/* 셸 — 헤더 캡슐 · 서랍 · 본문 틀 · 푸터 */
@layer layout {
    .wrap { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
    /* ── 셸: 헤더 캡슐 ────────────────────────────────────── */
    .dock { position: sticky; top: 0; z-index: 50; padding: 18px var(--gutter) 0; display: flex; justify-content: center; pointer-events: none; }
    .dock__bar { pointer-events: auto; display: flex; align-items: center; gap: 6px; width: var(--wrap); min-width: 0; max-width: 100%;   /* 본문 그리드 폭에 맞춘다 */ padding: 7px 13px 7px 24px; border-radius: 999px; background: var(--glass); box-shadow: var(--shadow-soft), inset 0 1px 0 var(--white-95); transition: background-color .25s ease, box-shadow .25s ease; }
    /* 스크롤 반응 — 맨 위에서는 히어로 위에 가볍게, 내려가면 불투명도 · 그림자를 올려 본문과 분리 (front.js 가 html.is-scrolled) */
    .is-scrolled .dock__bar { background: var(--white-90); box-shadow: var(--shadow), inset 0 1px 0 var(--white-95); }
    .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: -0.03em; white-space: nowrap; }
    .brand__logo { flex: none; width: 28px; height: 28px; fill: var(--red); fill-rule: evenodd; }
    .dock .page_h1 { flex: none; display: flex; align-items: center; margin: 0 14px 0 0; font: inherit; color: inherit; letter-spacing: inherit; } /* flex — 인라인 기준선 여백 때문에 로고가 위로 뜨지 않게 */
    .dock__nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }   /* 로고와 계정 묶음 사이 가운데 — 넘치면 auto 가 0 이 되어 스와이프로 이어진다 */
    /* 메뉴 가로 스와이프 — 폭이 모자라면 메뉴를 숨기지 않고 캡슐 안에서 밀어 본다. 넘친 쪽에 페이드 + 이동 단추(front.js)
       그림자(is-on) · 초점 링이 잘리지 않게 트랙을 캡슐 안쪽 여백까지 넓힌다(padding + 같은 크기 음수 margin) */
    .dock__scroller { --clear: 0px; --fade: 54px; position: relative; display: flex; flex: 1 1 auto; min-width: 0; }   /* 바 남은 폭을 채워 계정 링크를 오른쪽 끝으로 */
    .dock__track { position: relative; display: flex; flex: 1 1 auto; align-items: center; gap: 6px; min-width: 0; margin: -20px -6px; padding: 20px 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-padding-inline: 48px; }
    .dock__track::-webkit-scrollbar { display: none; }
    .dock__track { pointer-events: none; } /* 넓힌 위아래 여백이 아래 본문 클릭을 막지 않게 — 메뉴만 받는다 */
    .dock__track > * { pointer-events: auto; }
    .dock__scroller.is-prev .dock__track { -webkit-mask-image: linear-gradient(to right, transparent calc(var(--clear) + 6px), #000 calc(var(--clear) + var(--fade) + 6px)); mask-image: linear-gradient(to right, transparent calc(var(--clear) + 6px), #000 calc(var(--clear) + var(--fade) + 6px)); }
    .dock__scroller.is-next .dock__track { -webkit-mask-image: linear-gradient(to left, transparent calc(var(--clear) + 6px), #000 calc(var(--clear) + var(--fade) + 6px)); mask-image: linear-gradient(to left, transparent calc(var(--clear) + 6px), #000 calc(var(--clear) + var(--fade) + 6px)); }
    .dock__scroller.is-prev.is-next .dock__track { -webkit-mask-image: linear-gradient(to right, transparent calc(var(--clear) + 6px), #000 calc(var(--clear) + var(--fade) + 6px), #000 calc(100% - var(--clear) - var(--fade) - 6px), transparent calc(100% - var(--clear) - 6px)); mask-image: linear-gradient(to right, transparent calc(var(--clear) + 6px), #000 calc(var(--clear) + var(--fade) + 6px), #000 calc(100% - var(--clear) - var(--fade) - 6px), transparent calc(100% - var(--clear) - 6px)); }
    .dock__more { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--white-85); box-shadow: 0 0 0 1px var(--hair); cursor: pointer; transform: translateY(-50%); }
    .dock__more--prev { left: 0; }
    .dock__more--next { right: 0; }
    .dock__more svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    /* 광학 보정 — 한글 글리프가 줄 상자 안에서 위로 붙어 있어 캡슐 중심보다 약 1.5px 높다. 글자만 내린다 */
    .dock .dock__nav a, .dock .dock__acts .link, .dock .brand { padding-top: 2px; } /* .dock 한 단계 더 — 아래 padding 단축 규칙·1399 구간 규칙보다 우선 */
    .brand__logo { transform: translateY(-1.5px); }
    .dock__nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
    .dock__nav a:hover, .dock__acts .link:hover { color: var(--ink); }   /* 오버 — 글자만 진하게 */
    /* 오버 밑줄 — 가운데서 퍼지는 빛줄: 라일락 → 자주 → 살구 그라데이션 + 옅은 번짐 (배경 메쉬와 같은 색) */
    .dock__nav a, .dock__acts .link { position: relative; }
    .dock__nav a::after, .dock__acts .link::after { content: ''; position: absolute; left: 50%; bottom: 1px; width: calc(100% - 24px); height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, rgba(179, 161, 222, 0), #9a559a 30%, #e0937e 70%, rgba(240, 176, 140, 0)); box-shadow: 0 0 5px rgba(154, 85, 154, .2); opacity: 0; transform: translateX(-50%) scaleX(.3); transition: opacity .25s ease, transform .3s ease; pointer-events: none; }
    .dock__nav a:hover::after, .dock__acts .link:hover::after { opacity: .7; transform: translateX(-50%) scaleX(1); }
    .dock__nav a.is-on, .dock__acts .link.is-on { color: var(--plum-deep); font-weight: 600; }   /* 현재 위치 — 자주 굵은 글자만 */
    .dock__sep { width: 1px; height: 18px; margin: 0 12px; background: var(--hair); }   /* 세로선 양옆 = 메뉴 글자 사이 간격(26) */
    .dock__acts { display: flex; align-items: center; gap: 2px; margin-left: auto; }
    .dock__acts::before { content: ''; width: 1px; height: 18px; margin: 0 15px 0 6px; background: var(--hair); }   /* 계정 묶음 — 메뉴와 세로선 하나로 구분 */
    .dock__acts .link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 11px; font-size: 14px; font-weight: 500; color: var(--muted);   /* 계정 링크 — 메뉴보다 한 단계 작고 옅게 */ border-radius: 999px; white-space: nowrap; }
    .dock__menu { flex: none; display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--white-85); box-shadow: 0 0 0 1px var(--hair); cursor: pointer; place-items: center; }
    .dock__menu svg { width: 20px; height: 20px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; }
    /* ── 셸: 모바일 드로어 ────────────────────────────────── */
    .drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; pointer-events: none; overflow: hidden; }
    .drawer__mask { position: absolute; inset: 0; background: var(--shade-22); opacity: 0; transition: opacity .3s ease; }
    .drawer__sheet {
        position: absolute;
        top: 10px;
        right: 10px;
        bottom: 10px;
        width: min(380px, calc(100% - 20px));
        overflow-y: auto;
        padding: 8px 16px 28px;
        border-radius: 28px;
        background: var(--sheet);
        -webkit-backdrop-filter: blur(30px) saturate(170%);
        backdrop-filter: blur(30px) saturate(170%);
        border: 1px solid var(--glass-edge);
        box-shadow: 0 30px 80px -20px var(--shade-45);
        transform: translateX(calc(100% + 20px));
        transition: transform .38s cubic-bezier(.2, .8, .2, 1);
    }
    html.nav-open { overflow: hidden; }
    /* 스크롤 막대 (front.js) — PC 페이지 · 약관 · 처리방침 상자 공용. 배경 없이 오른쪽 끝에 붙는 반투명 막대, 굵기 5 고정, 오버 · 끌 때 색만 진하게 */
    .scroll-bar { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: 14px; }
    .scroll-bar--page { position: fixed; z-index: 95; }
    .scroll-bar[hidden] { display: none; }
    .scroll-bar__thumb { position: absolute; top: 0; right: 3px; width: 5px; height: var(--h, 48px); border-radius: 999px; background: var(--scroll-thumb); transform: translateY(var(--y, 0)); transition: background-color .15s ease; cursor: pointer; touch-action: none; }
    .scroll-bar:hover .scroll-bar__thumb, .scroll-bar.is-drag .scroll-bar__thumb { background: var(--scroll-thumb-hover); }
    .scroll-host { position: relative; }   /* 상자(textarea)를 감싸는 틀 — 막대가 상자 위에 겹친다 */
    .scroll-host .scroll-bar__thumb { right: 8px; }   /* 상자는 둥근 모서리 안쪽으로 — 위아래 띄움은 front.js 가 상자 반경으로 계산(막대 끝 ↔ 모서리 거리 = 오른쪽 간격 8) */
    html.nav-open .drawer { visibility: visible; pointer-events: auto; }
    html.nav-open .drawer__mask { opacity: 1; }
    html.nav-open .drawer__sheet { transform: none; }
    .drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: 56px; margin: 0 -16px; padding: 0 10px 0 20px; }
    .drawer__top strong { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }
    .drawer__close { min-height: 44px; padding: 0 12px; border: 0; background: none; font-size: 16px; font-weight: 600; color: var(--plum); cursor: pointer; }
    .group__label { margin: 20px 16px 8px; font-size: 14px; font-weight: 500; color: var(--muted); }
    .group { border-radius: 16px; background: var(--white-88); overflow: hidden; box-shadow: 0 1px 2px var(--plum-05); }
    .group a { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 14px; font-size: 16px; font-weight: 500; color: var(--ink); position: relative; }
    .group a.is-on { color: var(--plum); font-weight: 600; }
    .group li + li a::before { content: ''; position: absolute; left: 58px; right: 0; top: 0; height: 1px; background: var(--hair); }
    /* ── 셸: 본문 · 푸터 ──────────────────────────────────── */
    body:has(> .content_main) { display: flex; flex-direction: column; }   /* 짧은 화면 — 본문이 남는 높이를 채워 푸터가 화면 바닥에 */
    body > .content_main { flex: 1 0 auto; width: 100%; }
    .content_main { display: flow-root; padding-top: 40px; padding-bottom: 50px; } /* 푸터 위 50 — 섹션 사이 간격과 같다 (PC · 모바일 공통) */
    .foot { clear: both; padding: 0 0 32px; }
    .foot__panel { border-radius: var(--r-xl); padding: 40px 44px 30px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; background: var(--white-50); }
    .foot__links { display: grid; grid-template-columns: repeat(3, auto); gap: 0 56px; }
    .foot__links strong { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
    .foot__links a { display: block; padding: 4px 0; font-size: 15px; color: var(--text); }
    .foot__links a:hover { color: var(--plum); }
    .foot__legal { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--hair); font-size: 14px; line-height: 1.8; color: var(--muted); }
    .foot__legal span { display: inline-block; margin-right: 14px; }
    .foot__legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair-strong); }
    .foot__legal a:hover { color: var(--plum); }
    /* 인증 로고 — 옛 하단 그림(/img/tail.gif 950×70)의 오른쪽 세 로고를 잘라 쓴다. 흰 바탕은 multiply 로 유리판에 녹인다 */
    .foot__marks { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
    .foot__marks .foot__mark { display: block; height: 40px; min-height: 0; background: url(/img/tail.gif) no-repeat; }
    .foot__marks a.foot__mark { box-sizing: content-box; padding-block: 2px; background-clip: content-box; background-origin: content-box; }   /* 링크는 터치 44 — 그림(40)은 그대로, 위아래 빈 띠 2 */
    .foot__marks .foot__mark--ftc { width: 56px; background-position: -793px -17px; }
    .foot__marks .foot__mark--etc { width: 86px; background-position: -861px -17px; }
    /* PC — 사업자 정보는 왼쪽 칸, 하단 메뉴는 오른쪽 칸 (로고 · 이름은 2026-10-13 뺌) */
    @media (min-width: 1025px) {
        .foot__links { grid-column: 2; grid-row: 1; }
        .foot__legal { grid-column: 1; grid-row: 1; padding-top: 0; border-top: 0; align-self: start; } /* 위 끝을 하단 메뉴 제목과 맞춘다 — end 면 방문 수 줄이 없는 화면에서 아래로 처졌다 */
    }
    /* 레이어 창 — 담당자 선택(new_sslc) 이 마우스 위치에 띄운다 */
    #layer_window_area { display: none; position: absolute; z-index: 60; padding: 10px; font-size: 14px; border-radius: var(--r-md); background: var(--white); box-shadow: var(--shadow), 0 0 0 1px var(--hair); }
    #layer_window_x { position: absolute; top: -12px; right: -12px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--plum-deep); color: var(--white); font-size: 16px; line-height: 1; cursor: pointer; }
    /* 1399 이하 — 캡슐 안 간격만 좁혀 한 줄을 더 오래 유지 */
    @media (max-width: 1399px) {
        .dock .page_h1 { margin-right: 8px; }
        .dock__nav a { padding: 0 9px; font-size: 14.5px; }
        .dock__sep { margin: 0 7px; }
        .dock__acts::before { margin: 0 9px 0 4px; }
        .dock__acts .link { padding: 0 9px; }
    }
    /* 1024 이하 — 메뉴는 캡슐 안 스와이프로 남기고, 서랍 단추를 오른쪽 끝에 더한다 */
    @media (max-width: 1024px) {
        .dock__menu { display: grid; }
    }
    @media (max-width: 1024px) {
        .foot__panel { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
        .dock { padding-top: 10px; }
        .dock__bar { padding-left: 14px; }
        /* 좁은 캡슐 — 원 대신 가장자리 쉐브론만(누르는 폭 44, 쉐브론은 바깥쪽 24 안) — 메뉴 글자를 덜 가린다 */
        .dock__scroller { --clear: 24px; --fade: 20px; }
        .dock__more { width: var(--tap); height: var(--tap); background: none; box-shadow: none; }
        .dock__more--prev { place-items: center start; padding-left: 4px; }
        .dock__more--next { place-items: center end; padding-right: 4px; }
        .dock__more svg { width: 16px; height: 16px; }
        .content_main { padding-top: 24px; }
        .brand { min-height: var(--tap); }
        .foot__legal a { display: inline-flex; align-items: center; min-height: var(--tap); }
        .foot__panel { padding: 28px 22px 22px; gap: 24px; }
        .foot__links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
        .foot__links a { display: flex; align-items: center; min-height: var(--tap); padding: 0; font-size: 15px; line-height: 1.45; }
        .foot__legal span { margin-right: 10px; }
    }
    /* 400 이하 — 작은 폰 */
    @media (max-width: 400px) {
        .brand { font-size: 15px; }
        .foot__links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
        /* 푸터 링크 — 서비스(3) · 회사(3) 한 줄, 고객지원(4)은 아래 두 칸. 한 묶음만 홀로 남는 줄 없음 */
        .foot__links > div:nth-child(2) { order: 1; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
        .foot__links > div:nth-child(2) strong { grid-column: 1 / -1; }
    }
}