/* ==========================================================================
   공카 공통 내비게이션 레이어  /site/gc-nav.css  (v1.1, 2026-10-28)
   - 헤더(로고 + 햄버거) · 서비스 탭(홈 게이트) · 전체 메뉴 드로어
   - html.gc-scale 이 켜지면 랜딩의 폰트/여백/버튼/카드를 홈(v10) 기준으로 통일
   - 홈 index.html 과 동일한 수치: 헤더 48 / 탭 48·16px·700 / 로고 22px / 좌우 여백 20px
   적용: <link rel="stylesheet" href="/site/gc-nav.css">  +  <script src="/site/gc-nav.js" defer></script>
   ========================================================================== */

/* ---- 토큰 (랜딩 landing.css 가 정의한 변수 위에 덮어씀) ---- */
html.gc-scale { --pad: 20px; --ink: #1F2429; --ink-2: #464C53; --ink-3: #575E64; --ink-4: #ACB3BA; --line: #E5E8EC; --fill: #F4F6FA; --fill-soft: #F4F6FA; }
html.gc-nav { --gc-blue: #3431F5; --gc-ink: #1F2429; --gc-ink-3: #575E64; --gc-ink-4: #ACB3BA; --gc-line: #E5E8EC; --gc-paper: #FFFFFF; --gc-fill: #F4F6FA; --gc-danger: #D9303B; --gc-scrim: rgba(20, 27, 45, 0.55); }

/* ---- 1. 헤더: 로고 + 햄버거 (아정당 48px 헤더 규격) ---- */
html.gc-nav .topbar.gc-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: 48px; min-height: 48px; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); background: var(--gc-paper); transition: box-shadow 0.2s; }
/* 서브페이지(광고 랜딩): 스크롤하면 탭은 올라가고 로고+햄버거 줄만 상단 고정 → 다른 서비스로 새는 이탈 방지. 홈은 반대로 탭만 고정 */
html.gc-nav .topbar.gc-top.is-stuck { box-shadow: 0 1px 0 #EEF0F3; }
html.gc-nav .gc-logo { display: flex; align-items: center; height: 48px; text-decoration: none; }
html.gc-nav .gc-logo img { display: block; width: auto; height: 22px; }
html.gc-nav .gc-burger { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--gc-ink); cursor: pointer; }
html.gc-nav .gc-burger svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
html.gc-nav .gc-burger:active { background: var(--gc-fill); }
/* 기존 '빠른견적'/'입점 문의' 버튼은 숨기되 DOM에 남겨둠 (전체 메뉴의 주 버튼이 이 버튼을 대신 클릭) */
html.gc-nav .gc-top .gc-legacy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- 2. 서비스 탭 (홈 게이트와 동일: 48px · 16px · 700 · 활성 파랑 밑줄) ---- */
html.gc-nav .gc-tabs { position: relative; z-index: 3; display: flex; gap: 0; margin: 0 calc(var(--pad) * -1); padding: 0 4px; overflow-x: auto; scrollbar-width: none; background: var(--gc-paper); box-shadow: inset 0 -1px 0 #EEF0F3; }
html.gc-nav .gc-tabs::-webkit-scrollbar { display: none; }
html.gc-nav .gc-tabs a { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 2px; color: var(--gc-ink-4); font-family: inherit; font-size: clamp(13px, 3.8vw, 15px); font-weight: 700; letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; }
html.gc-nav .gc-tabs a.is-on { color: var(--gc-blue); }
html.gc-nav .gc-tabs a.is-on::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; border-radius: 2px; background: var(--gc-blue); }
html.gc-nav .gc-tabs .dot { position: relative; top: -7px; flex: 0 0 auto; width: 4px; height: 4px; margin-left: 2px; border-radius: 50%; background: var(--gc-danger); }
/* 탭 바로 아래 히어로가 붙는 랜딩: 상단 숨 쉴 공간 */
html.gc-nav .gc-tabs + .hero { padding-top: 16px; }

/* ---- 3. 전체 메뉴 드로어 (홈과 동일) ---- */
html.gc-nav .gc-scrim { position: absolute; inset: 0; z-index: 44; background: var(--gc-scrim); }
html.gc-nav .gc-menu { position: absolute; top: 0; right: 0; bottom: 0; z-index: 45; display: flex; flex-direction: column; width: 86%; max-width: 420px; padding: 0 20px 24px; overflow-y: auto; background: var(--gc-paper); box-shadow: -20px 0 40px -20px rgba(20, 27, 45, 0.34); animation: gcMenuIn 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
html.gc-nav.gc-fixed .gc-scrim, html.gc-nav.gc-fixed .gc-menu { position: fixed; }
@keyframes gcMenuIn { 0% { transform: translateX(40px); opacity: 0; } }
html.gc-nav .gc-menu[hidden], html.gc-nav .gc-scrim[hidden] { display: none; }
html.gc-nav .gc-mhead { display: flex; align-items: center; justify-content: space-between; height: 48px; }
html.gc-nav .gc-mhead img { height: 20px; width: auto; }
html.gc-nav .gc-mclose { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: transparent; color: var(--gc-ink); cursor: pointer; }
html.gc-nav .gc-mclose svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
html.gc-nav .gc-mprimary { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin: 8px 0 6px; padding: 0; border: 0; border-radius: 12px; background: var(--gc-blue); color: #fff; font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; cursor: pointer; }
html.gc-nav .gc-mprimary:active { filter: brightness(0.94); }
html.gc-nav .gc-mk { margin: 14px 0 4px; color: var(--gc-ink-4); font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; }
html.gc-nav .gc-msvc { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: var(--gc-ink); text-decoration: none; }
html.gc-nav .gc-msvc img { width: 36px; height: 36px; object-fit: contain; }
html.gc-nav .gc-msvc b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
html.gc-nav .gc-msvc small { display: block; margin-top: 1px; color: var(--gc-ink-3); font-size: 12.5px; font-weight: 400; }
html.gc-nav .gc-msvc.is-on b { color: var(--gc-blue); }
html.gc-nav .gc-msvc svg { width: 16px; height: 16px; margin-left: auto; fill: none; stroke: var(--gc-ink-4); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
html.gc-nav .gc-mmore { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
html.gc-nav .gc-mmore a { padding: 11px 0; color: var(--gc-ink-2, #464C53); font-size: 15px; font-weight: 500; text-decoration: none; }
html.gc-nav .gc-mcall { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 20px; }
html.gc-nav .gc-mcall a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 12px; font-size: 17px; font-weight: 600; text-decoration: none; }
html.gc-nav .gc-mcall .gc-tel { background: var(--gc-blue); color: #fff; font-size: 18px; }   /* 10/30 홈 전체 메뉴와 통일 */
html.gc-nav .gc-mcall .gc-tel svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
html.gc-nav .gc-mcall .gc-kakao { background: #FFE14A; color: #1E1A12; }
html.gc-nav .gc-mcall .gc-fine { margin: 2px 0 0; color: var(--gc-ink-4); font-size: 12.5px; text-align: center; }
html.gc-nav .gc-mfoot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gc-line); color: var(--gc-ink-4); font-size: 11.5px; line-height: 1.6; }

/* ---- 4. 홈(v10) 타이포·여백 스케일 (html.gc-scale) ---- */
html.gc-scale .band { padding: 56px var(--pad); }
html.gc-scale .sec-title, html.gc-scale .sec-title.tight { font-size: 24px; font-weight: 700; line-height: 34px; letter-spacing: -0.03em; }
html.gc-scale .sec-sub { margin-top: 8px; color: var(--ink-3); font-size: 15px; font-weight: 400; line-height: 24px; }
html.gc-scale .sec-sub.deal-sub { font-size: 13px; line-height: 20px; }
html.gc-scale .band.soft { background: var(--fill); }
html.gc-scale .cover-scroll .btn-main { height: 56px; border-radius: 12px; font-size: 17px; font-weight: 500; box-shadow: none; }
html.gc-scale .cover-scroll .btn-line, html.gc-scale .cover-scroll .svc-foot .btn-line, html.gc-scale .cover-scroll .svc-foot .btn-main { height: 48px; border-radius: 10px; font-size: 15px; font-weight: 500; }
html.gc-scale .cover-scroll .btn-line { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
html.gc-scale .band:not(.soft):not(.shorts-band) .btn-line { background: var(--fill); box-shadow: none; }
html.gc-scale .cover-scroll .ff-submit { height: 48px; border-radius: 10px; font-size: 16px; font-weight: 500; box-shadow: none; }
/* 카드: 테두리·그림자 없는 평면. 흰 밴드엔 회색 카드, 회색 밴드엔 흰 카드 */
html.gc-scale .cover-scroll .deal, html.gc-scale .cover-scroll .mcard, html.gc-scale .cover-scroll .rtx, html.gc-scale .cover-scroll .row-card, html.gc-scale .cover-scroll .pcard, html.gc-scale .cover-scroll .wr-card { box-shadow: none; }
html.gc-scale .cover-scroll .deal, html.gc-scale .cover-scroll .mcard, html.gc-scale .cover-scroll .row-card { background: var(--fill); }
html.gc-scale .cover-scroll .band.soft .deal, html.gc-scale .cover-scroll .band.soft .mcard, html.gc-scale .cover-scroll .band.soft .row-card, html.gc-scale .cover-scroll .band.soft .pcard, html.gc-scale .cover-scroll .band.soft .wr-card, html.gc-scale .cover-scroll .rtx { background: var(--paper); box-shadow: none; }
html.gc-scale .cover-scroll .deal, html.gc-scale .cover-scroll .rtx, html.gc-scale .cover-scroll .mcard { border-radius: 16px; }
html.gc-scale .cover-scroll .pcard { border-radius: 20px; }
/* 카드 타이포 */
html.gc-scale .cover-scroll .deal-name, html.gc-scale .cover-scroll .rvc-head { font-size: 16px; font-weight: 700; }
html.gc-scale .cover-scroll .deal-price { font-size: 17px; font-weight: 700; }
html.gc-scale .cover-scroll .deal-all-in > b { font-weight: 700; }
html.gc-scale .cover-scroll .db-main, html.gc-scale .cover-scroll .db-sub { font-size: 11px; font-weight: 700; }
html.gc-scale .cover-scroll .pc-cap { font-size: 18px; font-weight: 700; line-height: 26px; }
html.gc-scale .cover-scroll .pc-sub { font-size: 14px; line-height: 22px; }
html.gc-scale .cover-scroll .doc-sheet em { font-size: 13px; font-weight: 600; }
html.gc-scale .cover-scroll .rtx > p, html.gc-scale .cover-scroll .faq-a { font-size: 15px; line-height: 24px; }
html.gc-scale .cover-scroll .rtx-who, html.gc-scale .cover-scroll .rtx-meta > span, html.gc-scale .cover-scroll .mgr-count, html.gc-scale .cover-scroll .mc-badge { font-size: 13px; }
html.gc-scale .cover-scroll .rtx-who > b { font-weight: 700; }
html.gc-scale .cover-scroll .row-icon, html.gc-scale .cover-scroll .row-card strong { font-weight: 700; }
html.gc-scale .cover-scroll .row-card p { font-size: 14px; }
html.gc-scale .cover-scroll .mc-name { font-size: 24px; font-weight: 700; }
html.gc-scale .cover-scroll .mc-team { font-size: 15px; }
html.gc-scale .cover-scroll .sh-title { font-size: 15px; font-weight: 700; }
html.gc-scale .cover-scroll .sh-by { font-size: 13px; font-weight: 400; }
html.gc-scale .cover-scroll .ff-title { font-size: 24px; font-weight: 700; line-height: 34px; }
html.gc-scale .cover-scroll .ff-label, html.gc-scale .cover-scroll .ff-field > label, html.gc-scale .cover-scroll .check > span { font-size: 15px; font-weight: 500; }
html.gc-scale .cover-scroll .ff-done-title { font-weight: 700; }
html.gc-scale .cover-scroll .faq summary { font-size: 16px; font-weight: 500; }
html.gc-scale .cover-scroll .wr-tab, html.gc-scale .cover-scroll .tab, html.gc-scale .cover-scroll .ff-chip { font-weight: 500; }
html.gc-scale .cover-scroll .pb-kicker { font-size: 13px; font-weight: 500; }
html.gc-scale .cover-scroll .pb-text b { font-weight: 700; }
html.gc-scale .cover-scroll .pb-go { font-weight: 600; }
html.gc-scale .cover-scroll .ft-k, html.gc-scale .cover-scroll .ft-name { font-weight: 700; }
html.gc-scale .cover-scroll .ft-hours { font-weight: 400; }
html.gc-scale .footer { background: #ECF0F4; }
html.gc-scale .ft-tel { font-size: 20px; font-weight: 700; }
html.gc-scale .ft-links > a, html.gc-scale .ft-links > button { font-weight: 500; }
/* 푸터 회색이 화면 끝까지: 하단 고정 버튼 여유를 스크롤러가 아니라 푸터가 가짐 */
html.gc-scale .cover-scroll { padding-bottom: 0; }
html.gc-scale .cover-scroll > .footer { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
/* 빠른견적 시트 */
html.gc-scale .sheet { padding: 28px var(--pad) 24px; border-radius: 20px 20px 0 0; }
html.gc-scale .sheet .sheet-title { font-size: 20px; font-weight: 700; line-height: 28px; }
html.gc-scale .sheet .qk-sub { margin-top: 6px; color: var(--ink-3); font-size: 14px; line-height: 22px; }
html.gc-scale .sheet .qk-form { gap: 22px; }
html.gc-scale .sheet .lead-label { font-size: 15px; font-weight: 600; line-height: 22px; }
html.gc-scale .sheet .qk-chip { min-height: 44px; padding: 0 6px; border: 0; border-radius: 10px; background: var(--fill); box-shadow: none; color: var(--ink-2); font-size: 14px; font-weight: 500; }
html.gc-scale .sheet .qk-chip[aria-pressed="true"] { background: #EEF3FF; box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); font-weight: 600; }
html.gc-scale .sheet .qk-pref .qk-chip { min-height: 48px; font-size: 15px; }
html.gc-scale .sheet .field { height: 52px; padding: 0 16px; border: 0; border-radius: 10px; font-family: var(--font-body); font-size: 16px; font-weight: 500; letter-spacing: 0; box-shadow: inset 0 0 0 1px transparent; }
html.gc-scale .sheet .field:focus { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--blue); }
html.gc-scale .sheet .field[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--danger); }
html.gc-scale .sheet .check > span { font-size: 14px; font-weight: 500; }
html.gc-scale .sheet .link-btn { font-size: 13px; font-weight: 500; }
html.gc-scale .sheet .btn-main { height: 56px; border-radius: 12px; font-size: 17px; font-weight: 600; box-shadow: none; }
/* ---- 5. 홈(v10)과 같은 섹션 머리·카드 모양 (2026-10-28) ---- */
/* 섹션 제목·설명은 홈처럼 가운데 정렬 */
html.gc-scale .cover-scroll .band > .sec-title, html.gc-scale .cover-scroll .band > .sec-sub { text-align: center; }
/* 카드 라운딩: 큰 카드 20 · 일반 카드 16 (홈 기준) */
html.gc-scale .cover-scroll .wr-card { border-radius: 20px; }
html.gc-scale .cover-scroll .sit { border-radius: 16px; }
html.gc-scale .cover-scroll .sit b { font-size: 15px; font-weight: 700; line-height: 22px; }
html.gc-scale .cover-scroll .sit .sit-sub, html.gc-scale .cover-scroll .sit span.sit-sub { font-weight: 400; }
/* 접근성: 모션 최소화 */
@media (prefers-reduced-motion: reduce) { html.gc-nav .gc-menu { animation: none; } }