/* ===================================
   SNUH CMS - Sitemap Page (한화 그룹 사이트맵 패턴)
   부서별 사이트맵 페이지 전용 (200_sitemap.html)

   레이아웃:
   ┌─────────────────────────────────────────┐
   │ 1Depth 라벨 (sitemap__section-title)   │
   ├─────────────────────────────────────────┤
   │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐       │ ← 2Depth 가로 그리드
   │ │ 2D  │ │ 2D  │ │ 2D  │ │ 2D  │       │   (sitemap__col-title)
   │ │ 3D  │ │ 3D  │ │ 3D  │ │ 3D  │       │ ← 3Depth 세로 리스트
   │ │ 3D  │ │ 3D  │ │ 3D  │ │ 3D  │       │   (sitemap__link)
   │ └─────┘ └─────┘ └─────┘ └─────┘       │
   └─────────────────────────────────────────┘

   - common.css + components.css 디자인 토큰만 사용 (직접 px 금지)
   - components.html 미등록, 페이지 전용
   =================================== */

/* ===================================
   Layout: 풀폭 1컬럼 (LNB 미렌더)
   =================================== */
.sub-page--sitemap .container {
    display: block;
    padding-top: var(--space-16);
    padding-bottom: var(--space-25);
}
.sub-page--sitemap .content {
    width: 100%;
    margin: 0;
}

@media (max-width: 1023px) {
    .sub-page--sitemap .container {
        padding-top: var(--space-12);
        padding-bottom: var(--space-20);
    }
}
@media (max-width: 767px) {
    .sub-page--sitemap .container {
        padding-top: var(--space-8);
        padding-bottom: var(--space-16);
    }
}

/* ===================================
   List Marker Reset — 외부 룰 override 방지
   (sitemap 내부 ul/li 마커 일괄 제거)
   =================================== */
.sitemap ul,
.sitemap ol,
.sitemap li {
    list-style: none;
}

/* ===================================
   Sitemap Sections (1Depth 풀폭 세로 나열)
   =================================== */
.sitemap__sections {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sitemap__section {
    border-top: 1px solid var(--color-gray-300);
    padding: var(--space-10) 0 var(--space-12);
}
.sitemap__section:first-child {
    border-top: 2px solid var(--color-primary-700);
}
.sitemap__section:last-child {
    border-bottom: 1px solid var(--color-gray-300);
}

@media (max-width: 767px) {
    .sitemap__section {
        padding: var(--space-8) 0 var(--space-10);
    }
}

/* ===================================
   Section Title (1Depth)
   =================================== */
/* content-block__title 표준과 동일한 시각언어(파란 세로바 + 36px) 적용 */
.sitemap__section-title {
    font-size: var(--fs-title-lg);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    color: var(--color-gray-900);
    margin: 0 0 var(--space-8);
    padding-left: var(--space-4);
    position: relative;
    letter-spacing: var(--ls-tight);
}
.sitemap__section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 22px;
    background-color: var(--color-primary-700);
    border-radius: var(--radius-sm);
}
.sitemap__section-title a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.sitemap__section-title a:hover,
.sitemap__section-title a:focus-visible {
    color: var(--color-primary-700);
    text-decoration: underline;
}
.sitemap__section-title--external::after {
    content: "↗";
    font-size: 0.75em;
    color: var(--color-text-secondary);
    margin-left: var(--space-1);
}

@media (max-width: 767px) {
    .sitemap__section-title {
        font-size: var(--fs-title-sm);
        margin: 0 0 var(--space-6);
    }
}

/* ===================================
   2Depth Columns (가로 그리드)
   =================================== */
.sitemap__cols {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-6) var(--space-8);
}

@media (max-width: 1023px) {
    .sitemap__cols {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .sitemap__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-5) var(--space-4);
    }
}
@media (max-width: 479px) {
    .sitemap__cols {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   2Depth Column Title
   =================================== */
.sitemap__col {
    min-width: 0;
}

/* 2depth — content-body__title 표준(28px bold) 동일 사양 */
.sitemap__col-title {
    font-size: var(--fs-title-sm);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
}
.sitemap__col-title a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.sitemap__col-title a:hover,
.sitemap__col-title a:focus-visible {
    color: var(--color-primary-700);
    text-decoration: underline;
}
.sitemap__col-title .icon-external {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: 0;
    vertical-align: 0;
}

/* ===================================
   Flat List (단일 row + 다수 링크 모드)
   한화 "그룹소개" 패턴 — 컬럼 헤더 없이 링크를 가로 그리드로
   =================================== */
.sitemap__flat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* sitemap__cols와 동일한 5컬럼 고정 그리드 → 모든 섹션의 N번째 항목이 같은 칸에 위치 */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3) var(--space-8);
}

.sitemap__flat-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--fs-body);          /* 18px */
    font-weight: var(--fw-regular);
    line-height: 1.5;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}
.sitemap__flat-link:hover,
.sitemap__flat-link:focus-visible {
    color: var(--color-primary-700);
    text-decoration: underline;
}

@media (max-width: 1023px) {
    .sitemap__flat-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .sitemap__flat-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3) var(--space-4);
    }
    .sitemap__flat-link {
        font-size: var(--fs-small);     /* 16px */
    }
}
@media (max-width: 479px) {
    .sitemap__flat-list {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   3Depth Link List
   =================================== */
.sitemap__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* 3depth — p2 표준 본문 사양 (18px regular) */
.sitemap__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 44px;
    font-size: var(--fs-body);          /* 18px */
    font-weight: var(--fw-regular);
    line-height: 1.5;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}
.sitemap__link-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.sitemap__link .icon-external {
    flex-shrink: 0;
    margin-left: 0;
}
.sitemap__link:hover,
.sitemap__link:focus-visible {
    color: var(--color-primary-700);
    text-decoration: underline;
}

/* ===================================
   Print
   =================================== */
@media print {
    .sitemap__section { page-break-inside: avoid; padding: var(--space-6) 0; }
    .sitemap__cols { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}

/* ===================================
   브레드크럼 미노출 (사이트맵 전용)
   =================================== */
/* 사이트맵은 페이지 자체가 전체 메뉴 구조를 보여주므로 '홈 > 사이트맵' 브레드크럼이
   정보로서 중복이다. 게다가 .header 가 position:sticky; top:0; z-index:1000 이라
   스크롤 시 page-header 영역과 겹쳐 '사이트맵' 제목과 브레드크럼이 포개져 보였다.
   .sub-page--sitemap 스코프라 다른 페이지 브레드크럼에는 영향이 없다. */
.sub-page--sitemap .page-header .breadcrumb {
    display: none;
}