/* 공개 화면 공용 뼈대 — 🔴 사본 금지(헌법 ⑨). 색·여백·글자는 tokens.css 변수로만.
   쓰는 곳: index.html · can/ · ask.html · apply.html
   ⚠️ 한 화면에서만 쓰는 모양은 그 화면 안에 둔다. 여기엔 **두 곳 이상이 쓰는 것**만. */
*{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{
    font-family:var(--font); font-size:var(--fs-body); line-height:1.78;
    color:var(--ink); background:var(--bg);
    word-break:keep-all; overflow-x:hidden; -webkit-font-smoothing:antialiased;
  }
  .wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding-left:var(--pad-side); padding-right:var(--pad-side)}
  section{padding-top:var(--gap-5); padding-bottom:var(--gap-5); border-top:1px solid var(--line)}
  section:first-of-type{border-top:0}

  h1,h2{line-height:1.35; letter-spacing:var(--track-head); font-weight:700}
  h1{font-size:var(--fs-h1)}
  h2{font-size:var(--fs-h2)}
  .label{display:block; font-size:var(--fs-small); font-weight:700; letter-spacing:var(--track-label);
         color:var(--ink-3); margin-bottom:var(--gap-2)}
  .lead{font-size:var(--fs-lead); color:var(--ink-2); margin-top:var(--gap-3)}
  .note{font-size:var(--fs-small); color:var(--ink-3); margin-top:var(--gap-2)}

  /* ① 첫 화면 */
  /* ⓪ 정의 — 메인이 가장 먼저 말하는 것 */
  .define{border-top:0; padding-top:max(var(--gap-4), env(safe-area-inset-top)); padding-bottom:var(--gap-4)}
  .def-sub{margin-top:var(--gap-3); font-size:var(--fs-lead); color:var(--ink-2); line-height:1.7}

  .hero{padding-top:var(--gap-4)}
  .brand{display:block; font-size:var(--fs-small); font-weight:700; letter-spacing:.06em;
         color:var(--accent-ink); margin-bottom:var(--gap-3)}
  .cover{margin-top:var(--gap-4); width:100%; display:block;
         border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface-2)}
  .cover-cap{font-size:var(--fs-small); color:var(--ink-3); margin-top:var(--gap-2)}

  /* ② 업종이 달라도 같은 화면 — 이 페이지의 핵심 증거 */
  .trades{display:grid; gap:var(--gap-3); margin-top:var(--gap-3)}
  .trade{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface)}
  .trade video{width:100%; display:block; background:var(--surface-2)}
  .trade b{display:block; padding:10px var(--gap-2); font-size:var(--fs-body); font-weight:700;
           border-top:1px solid var(--line)}

  /* ③ 전과정 */
  .full video{width:100%; display:block; margin-top:var(--gap-3);
              border:1px solid var(--line); border-radius:var(--radius-lg); background:#000}

  /* ④ 누구 보시라고 */
  .who ul{list-style:none; margin-top:var(--gap-3)}
  .who li{padding:var(--gap-3) 0; border-bottom:1px solid var(--line);
          font-size:var(--fs-lead); font-weight:700}
  .who li:first-child{border-top:1px solid var(--line-2)}

  /* ⑤ 신청 */
  .ask{background:var(--surface-2)}
  .q{margin-top:var(--gap-4)}
  .q > p{font-size:var(--fs-lead); font-weight:700; margin-bottom:var(--gap-2)}
  .opts{display:flex; flex-wrap:wrap; gap:10px}
  .opt{flex:1 1 calc(50% - 5px); min-height:56px; padding:12px 14px;
       display:flex; align-items:center; justify-content:center; text-align:center;
       border:1px solid var(--line-2); border-radius:var(--radius); background:var(--surface);
       font-family:inherit; font-size:var(--fs-body); font-weight:600; color:var(--ink); cursor:pointer}
  .opt[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
  .opts.sigun .opt{flex:1 1 calc(33.333% - 7px); font-size:var(--fs-small); min-height:52px}

  #count{margin-top:var(--gap-3); padding:var(--gap-3); border:1px dashed var(--line-2);
         border-radius:var(--radius); background:var(--surface); color:var(--ink-3);
         font-size:var(--fs-small); text-align:center}

  .field{margin-top:var(--gap-2)}
  .field input{width:100%; min-height:var(--tap-h); padding:0 var(--gap-2);
    border:1px solid var(--line-2); border-radius:var(--radius); background:var(--surface);
    font-family:inherit; font-size:var(--fs-lead); color:var(--ink)}
  .field input::placeholder{color:var(--ink-3)}

  .agree{margin-top:var(--gap-4); border-top:1px solid var(--line); padding-top:var(--gap-3)}
  .agree label{display:flex; gap:12px; align-items:flex-start; padding:var(--gap-2) 0; cursor:pointer}
  .agree input{width:26px; height:26px; flex:0 0 26px; margin-top:2px; accent-color:var(--accent)}
  .agree .t{font-size:var(--fs-body); line-height:1.6}
  .agree .t .sub{display:block; font-size:var(--fs-small); color:var(--ink-3); margin-top:2px}

  .btn{display:flex; align-items:center; justify-content:space-between; gap:12px;
    min-height:var(--tap-h); width:100%; margin-top:var(--gap-3); padding:0 var(--gap-3);
    border:1px solid var(--accent); border-radius:var(--radius); background:var(--accent);
    color:var(--on-accent); font-family:inherit; font-size:var(--fs-lead); font-weight:700;
    text-decoration:none; box-shadow:var(--shadow); cursor:pointer}
  .btn[aria-disabled="true"]{background:var(--surface-2); border-color:var(--line); color:var(--ink-3); cursor:default}
  .btn .arrow{font-weight:400; opacity:.85}

  /* 직접 연락 — 폼이 번거로운 분들의 길 */
  .direct{margin-top:var(--gap-5); border-top:1px solid var(--line-2); padding-top:var(--gap-4)}
  .direct-t{font-size:var(--fs-lead); font-weight:700; margin-bottom:var(--gap-1)}
  .btn.call{background:var(--ink); border-color:var(--ink); justify-content:center; gap:10px}
  .btn.ghost{background:var(--surface); border-color:var(--line-2); color:var(--ink);
             justify-content:center; gap:10px; box-shadow:none; font-size:var(--fs-body); word-break:break-all}

  /* 기록 고르는 줄 — 🔴 기록이 있는 카테고리만 생긴다(빈 서랍 방지) */
  .cats{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--gap-3)}
  .cat{min-height:44px; padding:8px 14px; border:1px solid var(--line-2);
       border-radius:999px; background:var(--surface); font-family:inherit;
       font-size:var(--fs-small); font-weight:600; color:var(--ink-2); cursor:pointer}
  .cat[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
  .rec-cat{color:var(--ink-3)}
  .rec-big{width:100%; display:block; margin-top:var(--gap-3);
           border:1px solid var(--line); border-radius:var(--radius-lg); background:#000}

  /* ⑤ 기록 — 하나씩 쌓인다. 늘어나는 것이 기본이다 */
  .rec{border-bottom:1px solid var(--line); padding:var(--gap-4) 0}
  .rec:first-child{border-top:1px solid var(--line-2)}
  .rec-d{font-size:var(--fs-small); color:var(--ink-3); letter-spacing:var(--track-label)}
  .rec h3{font-size:var(--fs-lead); font-weight:700; margin-top:6px}
  .rec-ask{margin-top:var(--gap-3); padding:var(--gap-3); background:var(--surface-2);
           border-radius:var(--radius); font-size:var(--fs-body); line-height:1.6}
  .rec-ev{list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--gap-3)}
  .rec-ev li{flex:1 1 calc(50% - 5px)}
  .rec-ev a{display:flex; align-items:center; justify-content:center; min-height:54px;
            padding:0 12px; border:1px solid var(--line-2); border-radius:var(--radius);
            background:var(--surface); color:var(--ink); text-decoration:none;
            font-size:var(--fs-body); font-weight:600}
  .rec-sub{margin-top:var(--gap-2); font-size:var(--fs-small); color:var(--ink-3); line-height:1.6}
  .rec-sub b{color:var(--ink-2)}

  /* ⑥ 질문 게시판 */
  .board{background:var(--surface-2)}
  .board textarea{width:100%; min-height:120px; padding:var(--gap-2);
    border:1px solid var(--line-2); border-radius:var(--radius); background:var(--surface);
    font-family:inherit; font-size:var(--fs-lead); line-height:1.6; color:var(--ink); resize:vertical}
  .board textarea::placeholder{color:var(--ink-3)}
  .qa{border-bottom:1px solid var(--line); padding:var(--gap-4) 0}
  .qa:first-child{border-top:1px solid var(--line-2)}
  .qa-q{font-size:var(--fs-lead); font-weight:700}
  .qa-b{margin-top:var(--gap-2); font-size:var(--fs-body); line-height:1.7; color:var(--ink-2)}
  .qa-a{margin-top:var(--gap-3); padding:var(--gap-3); border-radius:var(--radius);
        background:var(--surface); border:1px solid var(--line); font-size:var(--fs-body); line-height:1.7}
  .qa-a b{display:block; margin-bottom:6px; font-size:var(--fs-small); color:var(--ink-3)}
  .qa-d{font-size:var(--fs-small); color:var(--ink-3); margin-top:var(--gap-2)}

  footer{border-top:1px solid var(--line); padding:var(--gap-4) 0 var(--gap-5)}
  footer p{font-size:var(--fs-small); color:var(--ink-3)}
  footer a{color:var(--ink-2)}

  @media (min-width:760px){
    :root{--pad-side:32px}
    .trades{grid-template-columns:repeat(3,1fr)}
    .btn{width:auto; min-width:420px}
    .btn.call,.btn.ghost{width:100%; min-width:0}
  }
  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
  .ok{margin-top:var(--gap-4); padding:var(--gap-4); border:1px solid var(--line);
      border-radius:var(--radius); background:var(--surface-2)}
  .ok b{font-size:var(--fs-lead)}

  /* ── 상단 메뉴 (모든 화면 공용) ──────────────────────────────
     🔴 칸은 **내용이 있는 것만** 생긴다(site.js 가 만든다). 빈 메뉴를 띄우지 않는다. */
  .nav{position:sticky; top:0; z-index:9; background:var(--bg);
       border-bottom:1px solid var(--line)}
  .nav .in{width:100%; max-width:var(--maxw); margin:0 auto;
           padding:0 var(--pad-side); display:flex; align-items:center; gap:var(--gap-3);
           min-height:52px}
  .nav a.home{font-size:var(--fs-small); font-weight:700; letter-spacing:.06em;
              color:var(--ink); text-decoration:none; white-space:nowrap}
  .nav ul{list-style:none; display:flex; gap:2px; margin-left:auto; overflow:auto}
  .nav li a{display:block; padding:10px 10px; font-size:var(--fs-small); font-weight:600;
            color:var(--ink-2); text-decoration:none; white-space:nowrap}
  .nav li a[aria-current="page"]{color:var(--ink); border-bottom:2px solid var(--ink)}

  /* ── 「할 수 있는 일」 칸 ────────────────────────────────── */
  .caps{list-style:none; margin-top:var(--gap-4)}
  .caps li{border-top:1px solid var(--line)}
  .caps li:last-child{border-bottom:1px solid var(--line)}
  .caps a{display:flex; align-items:center; gap:var(--gap-3); min-height:72px;
          padding:var(--gap-3) 0; color:var(--ink); text-decoration:none}
  .caps b{flex:1; font-size:var(--fs-lead); font-weight:700; line-height:1.4}
  .caps .go{color:var(--ink-3); font-size:var(--fs-lead)}

  /* ── 한 줄 길 안내(다음 쪽으로) ─────────────────────────── */
  .next{display:flex; align-items:center; justify-content:space-between; gap:12px;
        min-height:var(--tap-h); margin-top:var(--gap-4); padding:0 var(--gap-3);
        border:1px solid var(--line-2); border-radius:var(--radius);
        background:var(--surface); color:var(--ink); text-decoration:none;
        font-size:var(--fs-lead); font-weight:700}

  .nav a.cta{margin-left:var(--gap-2); padding:8px 14px; border-radius:var(--radius);
             background:var(--accent); color:var(--on-accent); text-decoration:none;
             font-size:var(--fs-small); font-weight:700; white-space:nowrap}

  /* ── 소개 — 이 사이트에서 가장 긴 글. 읽히는 것이 설계다 ──────
     한 덩어리씩 끊어 읽게 하고, 줄 간격을 넉넉히 둔다. */
  .sec{margin-top:var(--gap-5); padding-top:var(--gap-4); border-top:1px solid var(--line)}
  .sec h2{font-size:var(--fs-lead)}
  .sec p{margin-top:var(--gap-3); font-size:var(--fs-body); line-height:1.9; color:var(--ink-2)}
  .sec p.big{font-size:var(--fs-lead); font-weight:700; color:var(--ink)}
  .name{list-style:none; margin-top:var(--gap-3)}
  .name li{display:flex; gap:var(--gap-3); padding:var(--gap-3) 0; border-top:1px solid var(--line)}
  .name b{flex:0 0 56px; font-size:var(--fs-lead); letter-spacing:.04em}
  .name span{flex:1; line-height:1.8; color:var(--ink-2)}
  .five{list-style:none; margin-top:var(--gap-3)}
  .five li{display:flex; gap:var(--gap-3); padding:var(--gap-3) 0; border-top:1px solid var(--line)}
  .five b{flex:0 0 48px; color:var(--ink)}
  .five span{flex:1; line-height:1.8; color:var(--ink-2)}
  .warn{margin-top:var(--gap-3); padding:var(--gap-3); border-radius:var(--radius);
        background:var(--surface-2); border:1px solid var(--line); line-height:1.8}

  .rec-img{width:100%; display:block; margin-top:var(--gap-3);
           border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface)}
  .meta{margin-top:var(--gap-4); padding:var(--gap-3); border:1px solid var(--line);
        border-radius:var(--radius); background:var(--surface-2)}
  .meta > b{display:block; font-size:var(--fs-small); color:var(--ink-3); margin-bottom:var(--gap-2)}
  .meta dl{display:grid; grid-template-columns:auto 1fr; gap:6px var(--gap-3);
           font-size:var(--fs-small); line-height:1.7}
  .meta dt{font-weight:700; color:var(--ink-2); white-space:nowrap}
  .meta dd{color:var(--ink-2)}