@charset "utf-8";
/* ------------------------------------------------------------------
 * mainscroll.css — 메인페이지 한 화면씩 스크롤
 *
 * 스크롤 제어는 mainscroll.js 가 전담한다. 여기서는 레이아웃만 잡는다.
 *
 * 마크업 구조
 *   #mainscroll > .ms-section                      각 화면
 *   .ms-section.active                             현재 보이는 섹션
 *   #ms-nav > ul > li > a.active + .ms-nav-label   하단 점 네비게이션
 *   .index-black / .ms-nav-light                   섹션별 네비 색상
 * ------------------------------------------------------------------ */

/* ── PC: 한 화면씩 스냅 ──────────────────────────────────────────── */
@media all and (min-width: 993px) {

    html.snap-on,
    html.snap-on body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    /* 스크롤은 mainscroll.js 가 전적으로 제어한다.
       여기에 scroll-snap / scroll-behavior 를 두면 JS 애니메이션 도중
       브라우저가 끼어들어 뚝뚝 끊기고 여러 섹션이 한 번에 넘어간다. */
    html.snap-on #mainscroll {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior: none;   /* 끝에서 바깥 스크롤로 새지 않게 */
    }
    html.snap-on #mainscroll::-webkit-scrollbar { width: 0; height: 0; }

    html.snap-on #mainscroll > .ms-section {
        position: relative;
        box-sizing: border-box;
        height: 100vh;
        /* 섹션 내용을 수직 중앙 정렬 */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    html.snap-on #mainscroll > .ms-section > * { width: 100%; }

    /* ms-sec2 는 내부 요소가 자체 높이를 잡으므로 중앙정렬을 걸지 않는다 */
    html.snap-on #mainscroll > .ms-sec2 { display: block; }

    /* 푸터 섹션: 내용 높이만큼만 */
    html.snap-on #mainscroll > .auto-height { height: auto; }
}

/* ── 모바일: 스냅 없이 일반 스크롤 ───────────────────────────────── */
@media all and (max-width: 992px) {
    #mainscroll { height: auto; overflow: visible; }
    #mainscroll > .ms-section { height: auto; }
    #ms-nav { display: none !important; }
}

/* ── 하단 점 네비게이션 ──────────────────────────────────────────
 * 마크업은 mainscroll.js 가 #ms-nav > ul > li > (a + .ms-nav-label) 로 직접 만든다.
 *
 * 예전에는 이 규칙들이 common.css 에도 나뉘어 있었고, 먼저 로드되는 common.css 가
 * 뒤의 이 파일을 이기려고 !important 를 13번 썼다. 한 파일로 합치면서 전부 걷어냈다.
 * 화면은 그대로다 — 합치기 전에 실측한 값과 동일한 결과가 나오도록 옮겼다.
 */
#ms-nav {
    position: fixed;
    z-index: 100;
    left: 50%; right: auto; top: auto; bottom: 28px;
    width: auto; margin-top: 0;
    transform: translateX(-50%);
}
#ms-nav ul {
    display: flex; align-items: center; gap: 22px;
    margin: 0; padding: 0; list-style: none;
}
#ms-nav ul li {
    position: relative; display: inline-block;
    width: auto; height: auto; font-weight: 500;
}
/* 마지막 항목(푸터 섹션)은 점을 찍지 않는다 */
#ms-nav ul li:last-of-type { display: none; }
#ms-nav ul li a {
    display: block; position: relative; cursor: pointer;
    width: auto; height: auto; padding: 6px 0;
}
#ms-nav ul li a span {
    display: block; position: static;
    width: 20px; height: 3px; border-radius: 2px;
    top: auto; left: auto; right: auto;
    background-color: rgba(255, 255, 255, .4);
    transition: width .25s ease, background-color .25s ease;
}
#ms-nav ul li a:hover span { background-color: rgba(255, 255, 255, .75); }
#ms-nav ul li a.active span { width: 34px; height: 3px; top: auto; background-color: #c30010; }

/* 툴팁 라벨 — 활성 항목에서만 보인다 */
#ms-nav ul li .ms-nav-label {
    position: absolute; display: none;
    left: 50%; right: auto; top: auto; bottom: 22px;
    transform: translateX(-50%);
    text-align: center; white-space: nowrap;
    color: #fff; font-size: 15px; font-weight: 400;
    font-family: 'Noto Sans KR', sans-serif;
}
#ms-nav ul li a.active + div { display: block; width: auto; }

/* 밝은 배경 섹션에서는 라벨을 어둡게.
   .index-black / .ms-nav-light 은 Index.cshtml 의 onEnter 가 #ms-nav 에 붙인다.
   #ms-nav 로 한정해야 위의 `#ms-nav ul li .ms-nav-label` 보다 특이도가 높아진다.
   (원래 이 자리를 !important 가 메우고 있었다) */
#ms-nav.index-black ul li .ms-nav-label { color: #222; }
#ms-nav.index-black.ms-nav-light ul li .ms-nav-label { color: #fff; }

/* 점 자체의 색을 섹션별로 바꾸는 규칙(.index-black ul li a span 등)이 common.css 에 있었으나,
   같은 파일의 `#ms-nav ul li a span{... !important}` 에 가려 한 번도 적용된 적이 없다.
   실측 결과 전 섹션에서 rgba(255,255,255,.4) 로 동일했다. 죽은 코드라 옮기지 않았다. */

/* 스크린리더 전용 텍스트 */
.sr-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}