/* 창업접수시스템 머리·바닥 틀 — 2026-10-08 페이지 동선 grilling D2·D3
   메인·프로그램·신청서·포털(신청 내용 확인) 네 화면이 같이 쓴다. 메뉴 내용은 nav.js 가 그린다.
   🔴 클래스가 header.top 이 아니라 .gtop 인 이유 — 포털은 옛 common.css 를 쓰고 거기에도 header.top 이 있다(색·모양이 다르다).
   🔴 색은 site.css 의 :root 를 기대하지 않는다 — common.css 의 --crimson 은 다른 값(#b01c50)이다. 여기서 쓰는 값은 이 틀 안에서만 정한다.
      값 자체는 site.css 토큰과 같다(crimson A8134A · ink 171214 · taupe 5B5155 · soft 6B6165 · silver C9BCC1). */
.gtop,footer.ft{--f-crimson:#A8134A;--f-maroon:#6E0B2E;--f-ink:#171214;--f-taupe:#5B5155;--f-soft:#6B6165;--f-silver:#C9BCC1;--f-wrap:1120px;
  font-family:"Pretendard","Malgun Gothic","맑은 고딕",system-ui,sans-serif;word-break:keep-all}

/* ── 머리 — 로고(=창업접수시스템 첫 화면) + 이름표(eb·nm) + 3칸 메뉴 */
.gtop{background:#fff;border-top:3px solid var(--f-crimson);border-bottom:1px solid var(--f-silver);position:sticky;top:0;z-index:20;color:var(--f-ink)}
.gtop .in{max-width:var(--f-wrap);margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;min-height:70px;box-sizing:border-box}
.gtop .brand{display:flex;align-items:center;gap:14px;padding:12px 0;color:var(--f-ink);text-decoration:none}
.gtop .brand:hover{text-decoration:none;color:var(--f-ink)}
.gtop .brand img{height:28px;width:auto}
.gtop .brand .t{display:flex;flex-direction:column;gap:1px;border-left:1px solid var(--f-silver);padding-left:14px}
.gtop .brand .eb{font-size:11px;color:var(--f-taupe);letter-spacing:.02em}
.gtop .brand .nm{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.4}
.gtop nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;align-items:center}
.gtop nav a{padding:9px 12px;font-size:14px;line-height:1.5;color:var(--f-ink);border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none}
.gtop nav a:hover{color:var(--f-crimson);text-decoration:none}
.gtop nav a.on{color:var(--f-crimson);font-weight:700;border-bottom-color:var(--f-crimson)}
.gtop nav a.off{color:#A79CA0}                       /* 접수 기간 아님 — 자리는 그대로(D2) */
.gtop nav a.back{color:var(--f-taupe);font-size:13px;margin-left:8px;border-left:1px solid var(--f-silver);border-bottom-color:transparent}
.gtop nav a .n{display:inline-block;min-width:18px;height:18px;margin-right:5px;border-radius:50%;border:1px solid currentColor;font-size:11px;line-height:16px;text-align:center;font-weight:700;vertical-align:1px}
.gtop nav a.on .n{background:var(--f-crimson);border-color:var(--f-crimson);color:#fff}

/* ── 바닥 */
footer.ft{background:#fff;border-top:1px solid var(--f-silver);padding:34px 20px 40px}
footer.ft .in{max-width:var(--f-wrap);margin:0 auto;display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between;align-items:flex-end}
footer.ft .co img{height:26px;width:auto;margin-bottom:10px}
footer.ft .co p{margin:0;font-size:11.5px;line-height:1.9;color:var(--f-soft)}
footer.ft .co a{color:var(--f-crimson)}
footer.ft .chars{height:84px;width:auto}

@media (max-width:640px){
  .gtop .in{padding:0 12px;gap:0 8px;min-height:0}
  .gtop .brand{padding:10px 0 4px} .gtop .brand .nm{font-size:15px}
  .gtop nav{margin-left:0;width:100%;flex-wrap:nowrap}
  .gtop nav a{flex:1;text-align:center;padding:9px 2px;font-size:13px}
  .gtop nav a.back{display:none}                    /* 로고가 같은 일을 한다 */
  .gtop nav a .n{display:none}
  footer.ft{padding:28px 16px 32px} footer.ft .chars{height:64px}
}