/* ════════════════════════════════════════════════════════════════════
   공통 — 바탕 · 헤더 · 푸터 · 아래 네비 · 버튼 · 폼 · 알림

   ⚠️ **날값(색 · 크기 · 간격)을 여기 적지 마세요.** 전부
   `css/tokens.css` 에 있습니다. 여기 적으면 한 곳에서 못 바꿉니다.
   ════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:var(--t-base);
  line-height:var(--lh-base); letter-spacing:-.011em;
  font-variant-numeric:tabular-nums;
  /* ⚠️ 한글은 브라우저 기본값이 **글자 단위**로 끊습니다 ("무료입니 / 다.").
     `keep-all` 로 띄어쓰기에서만 끊고, 띄어쓰기 없이 긴 것(주소 · 계좌번호)이
     칸 밖으로 넘치지 않게 `anywhere` 를 안전판으로 같이 둡니다. */
  word-break:keep-all; overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:var(--tr-head);
  line-height:var(--lh-tight); }
p,ul,ol{ margin:0; padding:0; }
ul,ol{ list-style:none; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }

/* ⚠️ 적는 칸의 예시 글이 **이미 적힌 값처럼** 보이면, 사장님이 그대로
   두고 넘어갈 때 우리가 숫자를 지어낸 셈이 됩니다.
   ⚠️ `opacity:1` 을 빼지 마세요 — 파이어폭스는 예시 글에 투명도를
   따로 먹여서, 색만 정하면 더 흐려집니다. */
input::placeholder, textarea::placeholder{ color:var(--ink3); opacity:1; }

/* §3 — 콘텐츠 1280 · 좌우 32px. 폰에서는 `--pad` 가 20px 로 내려갑니다.
   ⚠️ 좌우 여백을 여기서만 정합니다. 화면 CSS 에 또 적으면 구간마다
   왼쪽 줄이 어긋나고, 그건 스크롤하면서 눈에 걸립니다. */
.w{ width:100%; max-width:var(--w); margin:0 auto; padding:0 var(--pad); }
.w-wide{ width:100%; max-width:var(--w-wide); margin:0 auto; padding:0 var(--pad); }

/* 눈에는 안 보이지만 읽어 주는 프로그램과 크롤러에게는 보이는 글.
   ⚠️ `display:none` 으로 숨기지 마세요 — 그러면 크롤러가 값을 낮춰
   보거나 아예 무시합니다.
   ⚠️ 글씨 크기와 색을 그대로 둡니다. 전수 점검이 1px 짜리 칸도
   "보이는 것" 으로 세기 때문에, 여기를 1px 글씨로 두면 **12px 미만**
   으로 걸립니다. */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
  font-size:var(--t-base); color:#000; background:#fff; }

.skip{ position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:var(--s3) var(--s5); }
.skip:focus{ left:0; }

/* 넓은 화면에서만 줄을 바꿉니다.
   ⚠️ **`<br class="br-m">` 뒤에 띄어쓰기를 하나 두세요.** 좁아지면 이
   `<br>` 이 사라지는데, 없으면 앞뒤 낱말이 그대로 붙습니다. */
@media (max-width:640px){ .br-m{ display:none; } }

/* ── 헤더 ────────────────────────────────────────────────────────
   ⚠️ **`#chrome-t{ display:contents }` 를 지우지 마세요.** 감싸개
   높이가 헤더 높이와 같아서, 이게 없으면 `position:sticky` 가 적혀
   있어도 안 붙습니다. 맨 위에서는 멀쩡해 보이고 에러도 안 납니다. */
#chrome-t{ display:contents; }
/* §4 — **흰 헤더입니다.** 어두운 헤더로 되돌리지 마세요.
   ⚠️ 투명도는 .96 까지입니다. 더 투명하게 두면 `backdrop-filter` 가
   뒤를 흐릴 뿐 지우지 않아서, 밑으로 지나가는 글자가 메뉴와 겹쳐
   읽힙니다 — 한 번 겪었습니다. */
.hd{ position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft); }
.sc .hd{ box-shadow:0 1px 0 var(--line), 0 6px 20px -14px rgba(15,27,45,.35); }
.hd-in{ display:flex; align-items:center; gap:var(--s6); height:var(--hdr-h); }

.lg{ display:flex; flex-direction:column; justify-content:center; flex:none;
  min-height:44px; line-height:1.15; }
.lg b{ font-size:var(--t-lg); font-weight:900; letter-spacing:-.03em; color:var(--ink); }
.lg span{ font-size:var(--t-cap); color:var(--ink3); margin-top:1px;
  white-space:nowrap; }
.lg-ft{ flex-direction:row; align-items:baseline; gap:8px; flex-wrap:wrap; }
.lg-ft b{ color:var(--navy); }
/* 로고 옆 태그라인 — ⚠️ 12px 미만 금지라 --t-cap(13px) 입니다 */
.lg-ft i{ font-style:normal; font-size:var(--t-cap); letter-spacing:-.02em;
  color:var(--ink2); }

.gnb{ display:flex; gap:var(--s5); flex:1 1 auto; min-width:0;
  justify-content:center; }
.gnb a{ display:inline-flex; align-items:center; min-height:40px;
  font-size:var(--t-sm); font-weight:700; color:var(--ink2); white-space:nowrap; }
.gnb a:hover{ color:var(--ink); }
.gnb a.on{ color:var(--navy); }

.hd-r{ display:flex; align-items:center; gap:var(--s4); flex:none; }
.hd-ic{ display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--r); color:var(--ink2); }
.hd-ic:hover{ background:var(--bg-2); color:var(--ink); }
/* ⚠️⚠️ 시안 §2 의 **통합검색**입니다. 히어로가 START/CLOSE 두 장이
   되면서 큰 검색창이 들어갈 자리가 없어졌는데, 지우지 않고 여기로
   올렸습니다 — 모든 화면에서 쓸 수 있게 된 쪽이 낫습니다.
   ⚠️ 높이를 40px 아래로 내리지 마세요 (누르는 칸입니다). */
.hd-s{ flex:0 1 280px; display:flex; align-items:center; gap:8px;
  min-width:0; height:42px; padding:0 var(--s4);
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-pill); }
.hd-s:focus-within{ border-color:var(--blue); background:var(--surface); }
.hd-s-i{ flex:0 0 auto; display:inline-flex; color:var(--ink3); }
.hd-s input{ flex:1 1 auto; min-width:0; height:100%; border:0; outline:0;
  background:transparent; font-size:var(--t-cap); color:var(--ink); }
.hd-s input::placeholder{ color:var(--ink3); }
/* ⚠️ 헤더 오른쪽은 **줄바꿈 금지**입니다. 글자가 두 줄이 되면 헤더
   높이가 늘어나고 "내 기 / 록" 처럼 낱말이 잘립니다 — 실제로 그랬습니다. */
.hd-r{ flex-wrap:nowrap; }
.hd-txt, .hd-cta{ white-space:nowrap; }
/* 넓은 화면에서는 입력칸이 있으니 돋보기 단추는 접습니다 */
.hd-ic-s{ display:none; }
@media (max-width:1180px){
  .hd-s{ display:none; }
  .hd-ic-s{ display:inline-flex; }
}
.hd-txt svg{ margin-right:6px; }
.hd-txt{ display:inline-flex; align-items:center; min-height:40px;
  font-size:var(--t-sm); font-weight:700; color:var(--ink2); }
/* §4 — 입점 단추만 남색 채움입니다. 이것 하나만 채워야 어디를
   눌러야 하는지가 한눈에 보입니다. */
.hd-cta{ min-height:42px; padding:0 var(--s5); font-size:var(--t-sm);
  background:var(--navy); border-color:var(--navy); color:#fff; }
.hd-cta:hover{ background:var(--navy-dark); border-color:var(--navy-dark); }

@media (max-width:1240px){ .hd-in{ gap:var(--s5); } .gnb{ gap:var(--s4); } }
@media (max-width:1040px){ .lg span{ display:none; } .gnb{ gap:var(--s3); } }
/* §22 — 폰에서는 헤더를 단순하게. 메뉴는 아래 네비가 맡습니다.
   ⚠️ **입점 CTA 는 폰에서도 둡니다** (§39). 업체가 모이지 않으면 이
   플랫폼은 아무것도 아니고, 업체 사장님도 폰으로 들어옵니다. */
@media (max-width:900px){
  .gnb, .hd-txt{ display:none; }
  .hd-in{ justify-content:space-between; gap:var(--s3); }
  .hd-cta{ min-height:40px; padding:0 var(--s4); }
}

/* ── 아래 네비 (폰) ─────────────────────────────────────────────── */
.mnav{ display:none; }
@media (max-width:900px){
  .mnav{ display:grid; grid-template-columns:repeat(5,1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--surface); border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom); }
  .mnav a{ display:grid; justify-items:center; gap:3px;
    min-height:var(--mnav-h); padding:9px 2px 7px;
    font-size:var(--t-cap); font-weight:700; letter-spacing:-.04em;
    color:var(--ink3); }
  .mnav a.on{ color:var(--blue); }
  body{ padding-bottom:var(--mnav-h); }
}
/* ⚠️ **12px 미만 금지.** 아래 네비도 예외가 아닙니다 — 한 번
   11.5px 로 두었다가 전수 점검에 175건이 걸렸습니다 (화면마다
   다섯 칸이 반복되기 때문입니다). 자간을 좁혀서 맞춥니다. */

/* ── 버튼 ────────────────────────────────────────────────────────
   ⚠️ **누르는 것은 40px 이상.** `padding` 만으로 높이를 만들지 마세요 —
   짧은 이름에서 다시 낮아집니다. */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:var(--tap); padding:0 var(--s6); border-radius:var(--r-in);
  font-size:var(--t-base); font-weight:700; border:1px solid transparent;
  cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s, box-shadow .2s; }
.btn:active{ transform:translateY(1px); }
.btn-b{ background:var(--blue); color:#fff; }
.btn-b:hover{ background:var(--blue-600); }
.btn-b[disabled]{ background:var(--ink3); cursor:not-allowed; }
.btn-o{ background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn-o:hover{ border-color:var(--ink3); }
.btn-w{ background:#fff; color:var(--ink); }
.btn-gh{ background:transparent; color:#fff; border-color:rgba(255,255,255,.34); }
.btn-gh:hover{ border-color:#fff; }
/* §5 — 창업 초록 · 폐업 주황. 두 단추는 **같은 크기**입니다. */
/* ⚠️⚠️ **흰 글자를 얹는 면은 짙은 쪽입니다** (2026-10-01 지시서 §4
   "CTA Contrast 개선"). `--start`(#08A875) 위의 흰 글자는 대비 3.06,
   `--close`(#F36B38) 위는 3.01 이었습니다 — 이 사이트에서 제일 많이
   눌리는 두 단추가 기준(4.5) 바닥에 있었습니다.
   ⚠️ **색을 바꾼 것이 아닙니다** — 같은 초록 · 같은 주황의 짙은 단계이고,
   원래 hover 에 쓰던 값입니다. 옅은 쪽(`--start` · `--close`)은 테두리 ·
   아이콘 · 카드 악센트에 그대로 남습니다.
   ⚠️ 폐업이 빨강으로 넘어가지 않게 `--close-dark`(초록 성분 81)까지만
   내렸습니다 — `check.js` 가 그 선을 봅니다. */
.btn-st{ background:var(--start-dark); color:#fff; border-color:var(--start-dark); }
.btn-st:hover{ background:var(--start-deep); border-color:var(--start-deep); }
.btn-cl{ background:var(--close-dark); color:#fff; border-color:var(--close-dark); }
.btn-cl:hover{ background:var(--close-deep); border-color:var(--close-deep); }
.btn-nv{ background:var(--navy); color:#fff; border-color:var(--navy); }
.btn-nv:hover{ background:var(--navy-dark); border-color:var(--navy-dark); }
.btn-lg{ min-height:56px; padding:0 var(--s7); font-size:var(--t-lg); }
/* §5 hover — 2px 들리고 그림자. ⚠️ 크기를 키우지 마세요(zoom 금지 §21) */
@media (hover:hover){
  .btn-st:hover, .btn-cl:hover, .btn-nv:hover, .btn-b:hover{
    transform:translateY(-2px); box-shadow:var(--shadow-btn); }
}
@media (prefers-reduced-motion: reduce){
  .btn-st:hover, .btn-cl:hover, .btn-nv:hover, .btn-b:hover{
    transform:none; box-shadow:none; }
}
.btn-full{ display:flex; width:100%; }
.row-cta{ display:flex; gap:var(--s3); flex-wrap:wrap; }
.row-mid{ justify-content:center; }
@media (max-width:560px){ .row-cta .btn{ width:100%; } }
@media (prefers-reduced-motion: reduce){ .btn:active{ transform:none; } }

/* ── 구간 ────────────────────────────────────────────────────────
   ⚠️ 같은 바탕이 두 번 이어지면 두 구간이 한 구간으로 읽힙니다.
   `.sec` 와 `.sec-white` 를 번갈아 씁니다. */
.sec{ padding:var(--sec-y) 0; }
/* ⚠️ 고지 한 줄짜리 띠에 구간 높이(96px씩)를 주지 마세요. /stores 에서
   두 줄짜리 고지가 **구간 하나만큼** 높아 본문이 끊겨 보였습니다. */
.sec-note{ padding:var(--s7) 0; }
.sec-white{ background:var(--surface); }
.sec-hd{ margin-bottom:var(--s8); position:relative; }
.sec-hd h2{ font-size:var(--t-3xl); }
.sec-hd p{ margin-top:var(--s3); color:var(--ink2); font-size:var(--t-lg); max-width:62ch; }
/* ⚠️ **머리말도 `<p>` 입니다.** `.sec-hd p`(0,1,1)가 `.eyebrow`(0,1,0)를
   이겨서, 구간 머리말이 **사이트 전체에서 회색으로 죽어 있었습니다** —
   에러도 안 나고 찍어 보고서야 알았습니다. 여기서 되돌립니다. */
/* ⚠️⚠️ **색은 여기서 정해집니다** — 아래 `.eyebrow`(0,1,0)를 이 규칙
   (0,2,0)이 이깁니다. 2026-10-01 에 아래만 `--blue-600` 으로 고쳤다가
   **아무 변화가 없었습니다.** 바꾸시려면 두 곳을 같이 보세요. */
.sec-hd > .eyebrow{ color:var(--blue-600); margin-top:0; font-size:var(--t-sm);
  max-width:none; }
.sec-hd p b{ color:var(--ink); }
/* ⚠️ 2026-10-01 — `--blue` 에서 `--blue-600` 으로 내렸습니다. 15px 굵은
   글씨가 옅은 바탕에서 대비 2.5~3.1 이라 안 읽혔습니다. 쪽 색은 그대로
   따라옵니다 — `.side-start` · `.side-close` 가 `--blue-600` 도 같이
   갈아 끼우기 때문입니다 (창업은 start-deep · 폐업은 close-deep). */
.eyebrow{ font-size:var(--t-sm); font-weight:800; letter-spacing:.1em;
  color:var(--blue-600); margin-bottom:var(--s3); text-transform:uppercase; }
.sec-more{ position:absolute; right:0; bottom:2px; display:inline-flex;
  align-items:center; gap:4px; min-height:40px;
  font-size:var(--t-sm); font-weight:700; color:var(--ink2); }
.sec-more:hover{ color:var(--blue); }
@media (max-width:720px){
  .sec-more{ position:static; margin-top:var(--s3); }
  .sec-hd{ margin-bottom:var(--s6); }
}
.lead{ color:var(--ink2); font-size:var(--t-lg); }
.note{ font-size:var(--t-sm); color:var(--ink3); margin-top:var(--s3); }
.note-mid{ text-align:center; }
/* ⚠️ **문장 한가운데 링크를 박지 마세요.** 높이가 16px 이라 누르기
   어렵습니다 — 문단 끝에 버튼으로 내놓으세요.

   어쩔 수 없이 문장 안에 두는 자리가 몇 군데 있습니다 (동의 상자의
   방침 링크, 접수 안내). 거기는 **손가락이 닿게** 키웁니다 —
   `line-height` 로 높이를 만들면 줄 간격이 벌어져 글이 성글어지므로,
   위아래 여백으로 만들고 `line-height` 는 본문 그대로 둡니다. */
.note a, .notice-bad a, .notice-ok a, .agree-n a,
.empty p a, .pg-lead a, .sec-hd p a, .lead a, .read p a{
  display:inline-block; padding:11px 0; margin:-11px 0;
  color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.note a{ color:var(--ink2); }
.notice-bad a, .notice-ok a{ color:inherit; }
/* ⚠️ **흐린 글자(--ink3)를 쓰지 않습니다.** 이 상자에 들어가는 셋이
   전부 **법으로 알려야 하는 고지**입니다 — 중개자 지위(전자상거래법
   제20조 제1항) · 매물 값이 누구 것인지 · 지원사업은 기관까지만.
   --ink3 는 이 바탕에서 대비가 3.41 이라 14px 이 묻힙니다 (--ink2 는
   5.12). 읽히지 않는 고지는 고지가 아닙니다. */
.note-box{ background:var(--bg-2); border-radius:var(--r-lg);
  padding:var(--s5) var(--s6); margin-top:0; line-height:1.8;
  color:var(--ink2); }
.note-box b{ color:var(--ink); }

/* ── 폼 ──────────────────────────────────────────────────────────
   ⚠️ **적는 칸은 적는 칸으로 보여야 합니다.** 흰 바탕에 옅은 테두리로
   두면 바탕과 밝기가 거의 같아 빈 자리처럼 보입니다. */
.form-wrap{ max-width:var(--w-read); }
.f-r{ margin-bottom:var(--s5); }
.f-r label{ display:block; font-size:var(--t-base); font-weight:700; margin-bottom:var(--s2); }
/* 필수 표시(*) — 작고 굵어서 `--blue` 로는 대비 3.71 입니다 */
.f-r label b{ color:var(--blue-600); }
.f-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s5); }
@media (max-width:560px){ .f-2{ grid-template-columns:1fr; } }
input[type=text],input[type=tel],input[type=email],input:not([type]),textarea,.sel{
  display:block; width:100%; min-height:var(--tap);
  padding:12px var(--s5); border:1px solid var(--line); border-radius:var(--r-in);
  background:var(--bg-2); color:var(--ink); font:inherit; }
textarea{ min-height:120px; resize:vertical; line-height:1.7; }
input:focus,textarea:focus,.sel:focus{ outline:0; border-color:var(--blue);
  background:var(--surface); box-shadow:0 0 0 3px var(--blue-50); }
.sel{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238A99AC' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--s4) center;
  padding-right:var(--s9); }

/* 동의 상자 — 수집 항목 · 이용 목적 · 보유 기간을 같은 자리에서 */
.agree{ background:var(--bg-2); border-radius:var(--r-lg);
  padding:var(--s5) var(--s6); margin:var(--s6) 0; }
.agree-l{ display:flex; align-items:flex-start; gap:var(--s3);
  min-height:var(--tap); cursor:pointer; font-weight:700; }
.agree-l input{ width:20px; height:20px; margin-top:12px; flex:none; accent-color:var(--blue); }
.agree-l span{ padding-top:11px; }
/* 동의 상자의 방침 링크 — 법으로 알려야 하는 자리라 더 읽혀야 합니다 */
.agree-l b{ color:var(--blue-600); }
.agree-u{ display:grid; gap:6px; margin-top:var(--s2);
  font-size:var(--t-sm); color:var(--ink2); }
.agree-u b{ display:inline-block; min-width:74px; color:var(--ink); }
.agree-n{ margin-top:var(--s4); font-size:var(--t-sm); color:var(--ink2); line-height:1.75; }

.notice-bad,.notice-ok{ border-radius:var(--r-lg); padding:var(--s5) var(--s6);
  margin-bottom:var(--s6); font-size:var(--t-sm); line-height:1.75; }
.notice-bad{ background:var(--bad-bg); }
.notice-ok{ background:var(--ok-bg); }
/* ⚠️ `>` 를 빼지 마세요. `.notice-bad b` 로 두면 **문장 안의 `<b>` 까지**
   덩어리가 되어 그 낱말만 딴 줄에 앉습니다. */
.notice-bad > b,.notice-ok > b{ display:block; font-size:var(--t-base); margin-bottom:4px; }
.notice-bad{ color:#7A1F1F; } .notice-ok{ color:#0B5E42; }

/* ── 푸터 ────────────────────────────────────────────────────────── */
/* ⚠️⚠️ **푸터는 밝습니다** (2026-10-01 §1).
   짙은 남색으로 두었다가, 푸터 높이가 547px 이라 **짧은 화면에서는
   화면의 절반**을 먹었습니다 — /search 43.9% · /tools 30.7% · /my 27.6%.
   랜딩과 /home 은 길어서 14% · 6% 로 통과했고, 그 둘만 재고 있어서
   **78개 화면을 못 봤습니다.** 지시서 §1 의 "밝은 면 80% 이상" 은
   화면마다 지켜야 하는 값입니다.

   그래서 바탕을 웜 아이보리로 내리고 글자를 남색 · 회청으로 올렸습니다.
   `check.js` 의 "어두운 면이 화면의 15% 를 넘지 않는다" 가 이제
   **전 화면**에서 돕니다.

   ⚠️ 여기를 다시 어둡게 하시려면 **짧은 화면부터 재 보세요** —
   긴 화면만 보면 통과합니다. */
/* ⚠️ **테두리로 가르지 않습니다 — 색으로 가릅니다.** 1px 선을 두면
   `check.js` 의 "이웃한 두 구간이 붙어 보임" 이 그 선을 보고 통과시켜
   버려서, 푸터가 다시 본문과 같은 색이 되어도 아무도 모릅니다. */
.ft{ background:var(--bg-foot); color:var(--ink2);
  padding:var(--s9) 0 var(--s6); font-size:var(--t-base); }
/* ⚠️ 칸 수를 묶음 수에 맞추세요. `repeat(4,1fr)` 로 두고 묶음을
   다섯으로 늘리면 다섯째가 다음 줄로 혼자 떨어집니다. */
/* 다섯 칸 → 셋. 시안(§13)의 차분한 한 판에 가깝게 */
.ft-g{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:var(--s6); }
.ft-b p{ margin:var(--s3) 0 var(--s4); line-height:1.8; color:var(--ink2);
  font-size:var(--t-sm); }
.ft-col h4{ font-size:var(--t-base); margin-bottom:var(--s2); color:var(--navy); }
.ft-col a{ display:inline-flex; align-items:center; min-height:40px;
  color:var(--ink2); font-size:var(--t-sm); }
.ft-col a:hover{ color:var(--navy); }
/* ⚠️ 흐린 글자(--ink3)를 쓰지 마세요 — 아이보리 위에서 대비가 3.36 이라
   13px 글씨가 묻힙니다. --ink2 는 5.04 로 통과합니다. */
.ft-role{ margin-top:var(--s6); padding-top:var(--s4);
  border-top:1px solid var(--line); font-size:var(--t-sm);
  color:var(--ink2); line-height:1.8; }
.ft-biz{ margin-top:var(--s3); font-size:var(--t-cap); color:var(--ink2);
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); }
.ft-cp{ flex-basis:100%; margin-top:var(--s2); }
@media (max-width:900px){
  .ft-g{ grid-template-columns:1fr 1fr; gap:var(--s6); }
  .ft-b{ grid-column:1 / -1; }
}
@media (max-width:560px){ .ft-g{ grid-template-columns:1fr 1fr; } }

/* 시안의 맨 아랫줄 — 소개 · FAQ · 약관 · 방침.
   ⚠️ 누르는 것은 40px 이상입니다. 한 줄로 눕혀도 높이는 지킵니다. */
.ft-tail{ display:flex; flex-wrap:wrap; gap:0 var(--s5);
  margin-top:var(--s6); padding-top:var(--s4);
  border-top:1px solid var(--line); }
.ft-tail a{ display:inline-flex; align-items:center; min-height:40px;
  font-size:var(--t-sm); font-weight:600; color:var(--ink2); }
.ft-tail a:hover{ color:var(--navy); }

/* ── 알림 ────────────────────────────────────────────────────────
   ⚠️ 폰에서 **아래 네비에 가립니다.** 이 미디어쿼리는 `.mnav` 가
   나타나는 폭과 **같아야** 합니다. */
.toast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%,14px);
  z-index:90; background:var(--ink); color:#fff;
  padding:14px var(--s6); border-radius:var(--r-in);
  font-size:var(--t-sm); font-weight:600; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.toast.on{ opacity:1; transform:translate(-50%,0); }
@media (max-width:900px){ .toast{ bottom:calc(var(--mnav-h) + 16px); } }

/* ── 스크롤하면 드러나는 것 ──────────────────────────────────────
   ⚠️ 차례(`--rvd`)를 인라인으로 넣지 마세요 — build-pages 의 CSS 변수
   검사가 인라인 값을 못 봐서 "정의되지 않은 변수" 로 멈춥니다.
   받는 쪽은 반드시 되돌림 값(`var(--rvd, 0s)`)으로 씁니다. */
[data-rv]{ opacity:0; transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),
             transform .6s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--rvd, 0s); }
[data-rv].rv-on{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-rv]{ opacity:1; transform:none; transition:none; }
}
.rv-stg > [data-rv]:nth-child(2){ --rvd:.05s; }
.rv-stg > [data-rv]:nth-child(3){ --rvd:.10s; }
.rv-stg > [data-rv]:nth-child(4){ --rvd:.15s; }
.rv-stg > [data-rv]:nth-child(5){ --rvd:.20s; }
.rv-stg > [data-rv]:nth-child(6){ --rvd:.25s; }

/* ── 크롤러가 읽는 본문 ──────────────────────────────────────────
   ⚠️ **`display:none` 으로 숨기지 마세요.** 숨긴 글은 검색엔진이 값을
   낮춰 보거나 아예 무시합니다. 잠깐 보이는 게 정상입니다 — 화면을
   그리면 `render()` 가 갈아 끼웁니다. */
.pre{ padding:var(--s9) 0 var(--s10); }
.pre h1{ font-size:var(--t-2xl); margin-bottom:var(--s4); }
.pre h2{ font-size:var(--t-xl); margin:var(--s7) 0 var(--s3); }
.pre p{ color:var(--ink2); margin-bottom:var(--s3); max-width:70ch; }
.pre ul{ display:grid; gap:var(--s2); margin-bottom:var(--s4); }
.pre li{ color:var(--ink2); }

/* 로고 — 시안(§5)처럼 아이콘 + 이름 + 그 아래 작은 태그라인.
   ⚠️ `.lg` 는 헤더와 푸터가 같이 씁니다. 여기서 크기를 바꾸면
   푸터 로고도 같이 바뀝니다 — 전에 `.lg` 이름이 겹쳐 모든 화면에서
   로고 윗부분이 잘린 적이 있습니다. */
/* ⚠️⚠️ **이름을 두 번 겹쳤습니다.** 처음에 `.lg-hd` · `.lg-t` 로
   지었는데 둘 다 약관 화면(`pages.css`)이 이미 쓰는 이름이었습니다.
   그리고 안쪽을 `<span>` 으로 두었더니 위의
   `@media(max-width:1040px){ .lg span{ display:none } }` 가 (0,1,1) 로
   (0,1,0) 인 제 규칙을 이겨서 **1040px 아래에서 로고가 통째로
   사라졌습니다** — 에러도 가로 스크롤도 안 났고, 폰 화면을 찍어 보고서야
   알았습니다. 그래서 이름은 `hd-lg-` 로 바꾸고, 보이는 것은
   (0,2,0) 으로 못박습니다. */
.hd-lg{ flex-direction:row; align-items:center; gap:10px; }
.hd-lg .hd-lg-i{ display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--r); flex:0 0 auto;
  background:var(--navy); color:#fff; }
.hd-lg .hd-lg-t{ display:grid; gap:0; line-height:1.2; }
.hd-lg-t b{ font-size:var(--t-lg); font-weight:900; letter-spacing:-.02em;
  color:var(--navy); }
/* ⚠️ **12px 미만 금지입니다.** 시안의 태그라인은 더 작아 보이지만
   제일 작은 단계가 --t-cap(13px) 이고, 그 아래로 내리면 전수 점검이
   화면마다 잡습니다 — 자간을 좁혀서 맞춥니다. */
.hd-lg-t i{ font-style:normal; font-size:var(--t-cap); letter-spacing:-.03em;
  color:var(--ink3); white-space:nowrap; }
@media (max-width:1040px){ .hd-lg-t i{ display:none; } }
/* 폰에서 헤더가 한 줄에 들어가게 — ⚠️ 접는 것은 글자뿐이고 CTA 자체를
   숨기지는 않습니다. 이 버튼이 서비스로 들어가는 유일한 문입니다. */
@media (max-width:560px){ .hd-cta-w{ display:none; } }
/* ⚠️ 폰은 390px 만 있는 것이 아닙니다 — 갤럭시 계열이 360px 이고,
   거기서 헤더가 370px 로 **가로 스크롤**이 났습니다. 전수 점검은
   390 · 1024 · 1440 만 재서 못 잡습니다. 좁아지면 여백과 글씨를
   같이 줄입니다. */
@media (max-width:420px){
  .hd-in{ gap:var(--s2); }
  .hd-cta{ padding:0 var(--s3); }
  .hd-ic{ width:38px; }
  .hd-lg{ gap:8px; }
  .hd-lg .hd-lg-i{ width:34px; height:34px; }
  .hd-lg-t b{ font-size:var(--t-base); letter-spacing:-.04em; }
}
/* 제일 좁은 기계(320px · 옛 아이폰 SE)까지 — 좌우 여백을 더 줄입니다 */
@media (max-width:340px){ .hd-in{ padding-left:12px; padding-right:12px; } }