/* 버전: 202608130134 */
/* 홈(/) — 코스 포털 (PC 전용) · v2 시안(인덱스 시안2) 적용 */

body {
    margin: 0;
    background: #F0EEE5; /* A-COL-01 지면 크림 */
}

#index-new-main {
    min-height: 100vh;
    background: #F0EEE5; /* A-COL-01 */
    padding: 0; /* 상단 여백은 인트로(.in-intro) 패딩 52px이 담당, 하단은 공통 푸터 divider의 margin-top:100px로 처리 */
}

/* 시작: 인트로 문장 v202608130134 짧은설명: 시안의 리드 블록 — 세리프 40px 제목(강조 이탤릭 테라코타) + 리드 문장(A-TYPO-05).
   화면에 보이는 이 제목이 홈의 대표 h1이며, 이전의 sr-only h1을 대체한다 */
.in-intro {
    width: 1160px;
    margin: 0 auto;
    padding: 52px 0 40px;
}
.in-intro-title {
    margin: 0;
    font-family: Georgia, 'Times New Roman', '바탕', serif;
    letter-spacing: -0.3px;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.35;
    color: #3D3929;
}
.in-intro-title em {
    font-style: italic;
    color: #D97757;
}
.in-intro-lead {
    margin: 14px 0 0;
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    font-size: 16.5px;
    line-height: 1.7;
    color: #6E6A5B;
}
/* 끝: 인트로 문장 v202608130134 */

/* 시작: 서비스 바로가기 카드 그리드 v202608130134 짧은설명: 홈 상단 3열 3행(카드 9개)
   아이콘 배지+제목+설명+바로가기 텍스트 링크. 폭은 아래 본문 2단과 같은 1160px */
.in-quick-grid {
    width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-bottom: 8px;
}
.in-quick-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    background: #FAF9F5; /* A-COL-02 */
    border: 1px solid #E3DFD3;
    border-radius: 16px;
    padding: 24px 26px 20px;
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    color: #6E6A5B;
    font-weight: 400;
    text-decoration: none;
    transition: box-shadow 0.18s, transform 0.18s;
}
.in-quick-card:hover {
    box-shadow: 0 10px 24px rgba(61, 57, 41, 0.10);
    transform: translateY(-2px);
}
.in-quick-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.in-quick-ico {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #F5E8E1; /* 테라코타 틴트 */
    color: #C15F3C;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.in-quick-ico i {
    font-size: 20px;
}
.in-quick-title {
    margin: 0;
    font-family: Georgia, 'Times New Roman', '바탕', serif;
    letter-spacing: -0.3px;
    font-size: 19px;
    font-weight: 600;
    color: #3D3929;
}
/* 카드 제목의 부제(괄호): 볼드 없이 서브색 13px */
.in-quick-title-sub {
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    letter-spacing: normal;
    font-size: 13px;
    font-weight: 400;
    color: #6E6A5B;
}
.in-quick-desc {
    margin: 0;
    flex: 1;
    font-size: 14px;
    line-height: 1.65;
    color: #6E6A5B;
}
/* 바로가기: A-BTN-07 밑줄 텍스트 링크(좌측 정렬) */
.in-quick-btn {
    align-self: flex-start;
    padding-bottom: 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: #C15F3C;
    border-bottom: 1px solid rgba(193, 95, 60, 0.4);
}
.in-quick-card:hover .in-quick-btn {
    color: #D97757;
    border-color: #D97757;
}
/* 끝: 서비스 바로가기 카드 그리드 v202608130134 */

/* 본문 레이어: 2단(좌 280 + gap 36 + 우 나머지 = 1160px) */
.in-container {
    width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 280px 1fr;
    align-items: start;
    gap: 36px;
    padding: 36px 0 70px;
}

/* 좌측 컬럼: 280px 세로 메뉴 */
.in-left-col {
    width: 280px;
}

/* 우측 컬럼: 카드 피드 */
.in-right-col {
    min-width: 0;
}

/* 우측 컬럼: 해당 탭에 코스가 없을 때 안내 */
.in-empty {
    padding: 60px 0;
    text-align: center;
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    font-size: 15px;
    color: #A8A493;
}

/* 좌측 세로 메뉴: A-NAV-02 (불릿 없음 · 선택 = 잉크 채움) */
.in-left-col .in-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.in-left-col .in-menu-item {
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    font-size: 15.5px;
    font-weight: 500;
    color: #6E6A5B;
    padding: 11px 16px;
    border-radius: 10px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.in-left-col .in-menu-item:hover {
    background-color: #FAF9F5;
    color: #3D3929;
}
.in-left-col .in-menu-item.active {
    background-color: #3D3929;
    color: #FAF9F5;
    font-weight: 600;
}

/* 좌측 컬럼: 구분선 */
.in-left-divider {
    border: none;
    border-top: 1px solid #E3DFD3;
    width: 100%;
    margin: 22px 0;
}

/* 좌측 컬럼: 키워드 태그 클라우드 — A-BTN-05 칩.
   색·크기는 관리자(KeywordTag)가 인라인 스타일로 내보내 CSS를 이긴다(DB 값이 이미 v2) → 여기서는 모양만 정한다 */
.in-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.in-tag-item {
    display: inline-block;
    padding: 6px 13px;
    border-radius: 15px;
    border: 1px solid #E3DFD3;
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    color: #6E6A5B;
    background-color: #FAF9F5;
}
.in-tag-item:hover {
    border-color: #D97757;
    color: #C15F3C !important;
    background-color: #FAF9F5 !important;
}

/* 좌측 컬럼: 게시판 최근글 */
.in-board-title {
    font-family: Georgia, 'Times New Roman', '바탕', serif;
    letter-spacing: -0.3px;
    font-size: 17px;
    font-weight: 600;
    color: #3D3929;
    margin: 0 0 12px;
}
.in-board-title em {
    font-style: normal;
    color: #D97757;
}
.in-board-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.in-board-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 2px;
    border-bottom: 1px solid #EAE7DC;
    font-size: 14px;
}
.in-board-item:last-child {
    border-bottom: none;
}
.in-board-bullet {
    flex-shrink: 0;
    color: #D97757;
    font-weight: 800;
    line-height: 1;
}
.in-board-name {
    flex: 1;
    min-width: 0;
    color: #3D3929;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}
.in-board-name:hover {
    color: #C15F3C;
}
.in-board-num {
    flex-shrink: 0;
    font-size: 12px;
    color: #A8A493;
}
.in-board-empty {
    padding: 8px 2px;
    font-size: 14px;
    color: #A8A493;
}

/* 섹션 제목 (카드 박스 바깥 위): A-TYPO-03 + 테라코타 불릿 */
.in-section-title {
    margin: 0 0 20px;
    font-family: Georgia, 'Times New Roman', '바탕', serif;
    letter-spacing: -0.3px;
    font-size: 26px;
    font-weight: 600;
    color: #3D3929;
    line-height: 1.3;
}
.in-section-title em {
    font-style: normal;
    color: #D97757;
}

/* 코스 카드: A-CARD-01 규격(아이보리 · 라인 · r18 · pad 22/24) */
.in-card {
    box-sizing: border-box;
    background: #FAF9F5;
    border: 1px solid #E3DFD3;
    border-radius: 18px;
    padding: 22px 24px;
    margin-bottom: 18px;
    /* 기본폰트: 맑은 고딕 · 볼드없음 */
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    color: #6E6A5B;
    font-weight: 400;
}

/* 상단 행: 작성자 / 라이딩채널 주소 */
.in-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.in-author {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.in-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.in-avatar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #DCD6C5;
    color: #8A8471;
    font-size: 15px;
}
.in-author-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.in-author-name {
    font-size: 14.5px;
    font-weight: 600;
    color: #3D3929;
    cursor: pointer;
}
.in-author-date {
    font-size: 12.5px;
    color: #A8A493;
}
/* 코스 주소: 크림 알약 */
.in-course-addr {
    flex-shrink: 0;
    font-size: 13px;
    color: #6E6A5B;
    background: #F0EEE5;
    border: 1px solid #E3DFD3;
    padding: 6px 12px;
    border-radius: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.in-course-addr:hover {
    color: #C15F3C;
    border-color: #D97757;
}

/* 제목: A-TYPO-04 세리프 21px, 클릭 시 코스 페이지 이동 */
.in-card-title {
    display: block;
    margin: 0 0 14px;
    font-family: Georgia, 'Times New Roman', '바탕', serif;
    letter-spacing: -0.3px;
    font-size: 21px;
    font-weight: 600;
    color: #3D3929;
    line-height: 1.4;
    text-decoration: none;
}
.in-card-title:hover {
    color: #C15F3C;
}

/* 이미지 영역: 좌 2fr / 우 1fr, gap 8, 높이 250px
   ⚠️행 높이를 grid-template-rows로 명시해야(auto면 안 됨) 자식의 height:100%가 250px로 해소되고 object-fit이 먹는다 */
.in-media {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 250px;
    gap: 8px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}
.in-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}
.in-media-left,
.in-media-right {
    min-width: 0;
    height: 100%;
    overflow: hidden;
}
/* 첨부 2개 이상: 우측 상하 2단
   ⚠️1fr의 자동 최솟값(이미지 intrinsic 높이)이 행을 밀어내므로 minmax(0, 1fr)로 반씩 나눈다 */
.in-media-right.two {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    overflow: visible;
}
/* 첨부 0개: 썸네일 전체폭 */
.in-media-full {
    grid-column: 1 / -1;
    height: 100%;
    overflow: hidden;
}

/* 통계 행 (이미지 아래): 좌측 통계 / 우측 좋아요·스크랩·댓글 */
.in-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #EAE7DC;
    padding-top: 14px;
}
.in-stats-left {
    display: flex;
    gap: 22px;
}
.in-stats-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}
.in-action {
    font-size: 13.5px;
    color: #6E6A5B;
    white-space: nowrap;
}
.in-action:hover {
    color: #C15F3C;
}
.in-stat-label {
    display: block;
    font-size: 12px;
    color: #A8A493;
    margin-bottom: 2px;
}
.in-stat-value {
    font-size: 15.5px;
    font-weight: 700;
    color: #3D3929;
}
.in-stat-value em {
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    color: #6E6A5B;
}

/* 무한스크롤 중단(20개 도달·풀 소진) 시 더보기 버튼 — 가운데 정렬 아이보리 알약, 공개자료실 링크 */
.in-more-wrap {
    display: none;
    text-align: center;
    margin-top: 8px;
}
.in-more-wrap.visible {
    display: block;
}
.in-more-btn {
    display: inline-block;
    padding: 12px 44px;
    border: 1px solid #E3DFD3;
    border-radius: 26px;
    background: #FAF9F5;
    font-size: 15px;
    font-weight: 600;
    color: #3D3929;
    cursor: pointer;
    text-decoration: none;
}
.in-more-btn:hover {
    border-color: #D97757;
    color: #C15F3C;
}

/* 이미지 원본 라이트박스 */
#in-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.85);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
#in-lightbox-img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
}
/* 슬라이드 컨트롤(닫기·좌우 화살표·카운터): 코스 상세 라이트박스(course-detail.css #lightbox-*)와 동일 모양 v202607302323 */
#in-lightbox-close {
    position: fixed; top: 20px; right: 24px;
    background: rgba(255,255,255,0.18); border: none; color: #fff;
    font-size: 20px; cursor: pointer; width: 44px; height: 44px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s;
}
#in-lightbox-close:hover { background: rgba(255,255,255,0.32); }
#in-lightbox-prev, #in-lightbox-next {
    position: fixed; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.18); border: none; color: #fff;
    font-size: 18px; cursor: pointer; width: 44px; height: 44px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s;
}
#in-lightbox-prev { left: 24px; }
#in-lightbox-next { right: 24px; }
#in-lightbox-prev:hover, #in-lightbox-next:hover { background: rgba(255,255,255,0.32); }
#in-lightbox-counter {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 600; letter-spacing: 0.5px;
}