/* ============================================================
   사이트 공통 레이아웃 — 모든 페이지가 같은 골격을 쓴다
   ------------------------------------------------------------
   토큰 = tokens.css (수심달 정본) · 지점 값 = brand.css
   이 파일은 «페이지마다 복사되던 공통 CSS»를 한 곳에 모은 것이다.

   ⚠ index.html · curriculum.html 은 아직 자기 <style> 안에 같은 규칙을
     들고 있다. 회귀 위험 때문에 이번에는 손대지 않았다 —
     두 파일을 이 파일로 옮기는 것은 별도 작업이다.
     새로 만드는 페이지는 반드시 이 파일을 쓴다.
   ============================================================ */
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--white);
  line-height:var(--lh-body);letter-spacing:var(--ls-body);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw,1080px);margin:0 auto;padding:0 var(--s5)}

/* ── 상단바 ── */
.topbar{border-bottom:1px solid var(--g15);background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);position:sticky;top:0;z-index:30}
.topbar .wrap{display:flex;align-items:center;gap:14px;height:68px}
.topbar img{height:25px;width:auto;display:block}
.topbar .br{font-size:var(--fs-sm);font-weight:var(--fw-black);color:var(--g70);
  border-left:1px solid var(--g15);padding-left:14px}
.topbar nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.topbar nav a{color:var(--g70);text-decoration:none;font-size:var(--fs-sm);font-weight:var(--fw-semi)}
.topbar nav a.cur{color:var(--accent)}
.topbar .btn-s{background:var(--grad-red);color:var(--white);padding:9px 16px;
  border-radius:var(--r-pill);box-shadow:var(--sh-red)}
/* 모바일 내비(≤860px) = nav.css + nav.js — 5개 페이지 공용.
   예전의 «.topbar nav a:not(.btn-s){display:none}» 는 대체 메뉴가 없어 폰에서
   페이지 이동이 불가능했다(design-guard 🟡). 그 자리를 토글이 대신한다. */

/* ── 공통 타이포·섹션 ── */
section{padding:var(--s9) 0}
@media(max-width:720px){section{padding:var(--s8) 0}}
h1,h2,h3{letter-spacing:var(--ls-head);line-height:var(--lh-head);margin:0}
.h2b{font-size:var(--fs-h2);font-weight:var(--fw-black)}
.eyebrow{font-size:var(--fs-cap);font-weight:var(--fw-bold);letter-spacing:.14em;
  color:var(--accent);text-transform:uppercase;margin-bottom:var(--s3)}
.lead{font-size:var(--fs-lg);color:var(--g70);margin-top:var(--s4);max-width:62ch}
.soft{background:var(--g08)}

/* ── 히어로 ── */
.hero{background:var(--grad-soft);padding:var(--s10) 0 var(--s9);border-bottom:1px solid var(--g15)}
@media(max-width:720px){.hero{padding:var(--s8) 0 var(--s7)}}
.hero h1{font-size:var(--fs-h1);font-weight:var(--fw-black);letter-spacing:var(--ls-display)}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .sub{margin-top:var(--s5);font-size:var(--fs-lg);color:var(--g70);max-width:58ch}

/* ── CTA ── */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 30px;border-radius:var(--r-pill);text-decoration:none;
  font-weight:var(--fw-bold);font-size:var(--fs-base);
  transition:transform .2s var(--e-out),box-shadow .2s var(--e-out)}
.cta.solid{background:var(--grad-red);color:var(--white);box-shadow:var(--sh-red)}
.cta.solid:hover{transform:translateY(-2px)}
.cta.ghost{border:1px solid var(--g15);color:var(--ink);background:var(--white)}
.ctas{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s6)}

/* ── 카드 그리드 ── */
.grid{display:grid;gap:var(--s4);margin-top:var(--s7)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{border:1px solid var(--g15);border-radius:var(--r-lg);padding:var(--s5);
  background:var(--white);box-shadow:var(--sh-1);
  transition:box-shadow .25s var(--e-out),transform .25s var(--e-out)}
.card:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.card h3{font-size:var(--fs-lg);font-weight:var(--fw-black);margin-bottom:var(--s3)}
.card p{margin:0;color:var(--g70);font-size:var(--fs-sm)}
.card .num{font-size:var(--fs-cap);font-weight:var(--fw-bold);color:var(--accent);
  letter-spacing:.1em;margin-bottom:var(--s2)}

/* ── 단계 흐름 ── */
.flow{display:grid;gap:var(--s3);margin-top:var(--s7);
  grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){.flow{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.flow{grid-template-columns:repeat(2,1fr)}}
.step{border:1px solid var(--g15);border-radius:var(--r-lg);padding:var(--s5) var(--s4);
  background:var(--white);box-shadow:var(--sh-1);position:relative}
.step .k{font-size:var(--fs-cap);color:var(--accent);font-weight:var(--fw-bold);
  letter-spacing:.1em;margin-bottom:var(--s2)}
.step .t{font-size:var(--fs-lg);font-weight:var(--fw-black);margin-bottom:var(--s2);
  letter-spacing:var(--ls-head)}
.step .d{font-size:var(--fs-cap);color:var(--g70);line-height:1.6}

/* ── 대비 강조 블록 ── */
.dark{background:var(--ink);color:var(--white)}
.dark .lead,.dark .card p{color:rgba(255,255,255,.72)}
.dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);box-shadow:none}
.dark .card h3{color:var(--white)}
.dark .card .num{color:var(--pink)}

/* ── 표 ── */
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin-top:var(--s5)}
th,td{padding:var(--s3) var(--s2);border-bottom:1px solid var(--g15);text-align:left}
th{font-weight:var(--fw-bold);color:var(--g70);font-size:var(--fs-cap);
  letter-spacing:.06em;border-bottom:2px solid var(--ink)}

/* ── 지점 변수 표기 · 미확정 칩 ──
   ⚠ 지점명을 HTML 에 직접 쓰지 않는다. brand.css 한 줄만 바꾸면 전 페이지가 갱신되어야
     2호점이 복제할 수 있다(brand.css 주석 참조). */
.bname::before{content:var(--branch-name)}
.region::before{content:var(--branch-region)}
.grade::before{content:var(--branch-grade)}
.tbd{background:var(--tbd-bg);border:1px dashed var(--tbd-line);color:var(--tbd-ink);
  border-radius:var(--r-sm);padding:2px 9px;font-size:var(--fs-cap);
  font-weight:var(--fw-bold);white-space:nowrap;display:inline-block}

/* ── 푸터 ── */
.foot{border-top:1px solid var(--g15);padding:var(--s7) 0;color:var(--g70);font-size:var(--fs-cap)}
.foot a{color:var(--g70);text-decoration:none;margin-right:var(--s4)}


a:focus-visible,button:focus-visible,input:focus-visible,label:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--red,#C8102E);outline-offset:2px;border-radius:2px}

/* 인쇄 — 어두운 섹션을 잉크로 채우지 않는다(curriculum.html 의 .creed 규칙과 같은 패턴) */
@media print{
  .topbar,.ctas{display:none}
  .dark{background:var(--white)!important;color:var(--ink)!important;border:1px solid var(--g15)}
  .dark h2,.dark h3,.dark .quote,.dark .big{color:var(--ink)!important}
  .dark p,.dark .lead,.dark .card p{color:var(--g70)!important}
  .dark .eyebrow{color:var(--accent)!important}
  .dark .card{background:transparent;border-color:var(--g15)}
}