/* ============================================================================
   site/app.css — 사이트 전용(네비게이션·상태 화면). 부품은 components.css 가 갖는다.
   색·치수는 tokens.css 가 소유한다 — 여기 값을 적지 않는다.
   ============================================================================ */

/* ★ [hidden] 은 UA 스타일시트의 규칙이라 작성자 규칙에 진다.
   `.btn{display:inline-flex}` 가 이겨서 숨긴 버튼이 그대로 보였다(실측).
   한 줄로 못박는다 — 이 규칙이 없으면 hidden 이 조용히 무력해진다. */
[hidden]{display:none !important}

/* ── 상단 항해 ────────────────────────────────────────────────────────
   햄버거 없이 **버튼 격자**로 늘 보인다(사용자 요청 2026-09-25).
   첫 줄 = 전체 제목(홈) + 이름·나가기, 둘째 줄 = 메뉴 버튼. */
.topbar{position:sticky;top:0;z-index:10;background:var(--bg);
        border-bottom:1px solid var(--line)}
.topbar .inner{margin:0 auto;padding:var(--sp-3) var(--gutter);
        display:flex;flex-direction:column;gap:var(--sp-3)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.brand{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-serif);
       font-weight:var(--w-bold);font-size:var(--fs-lg);color:var(--ink);min-width:0}
.brand .ttl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand:hover{text-decoration:none;color:var(--brand-strong)}
/* 주칠 인장 — Stitch 파일럿에서 가져온 구조 요소 */
.seal{display:inline-flex;align-items:center;justify-content:center;flex:none;
      width:26px;height:26px;border:1px solid var(--accent);border-radius:var(--r-xs);
      color:var(--accent-strong);font-family:var(--font-serif);font-size:var(--fs-sm)}
.brand.on .seal{background:var(--accent-soft)}
.who{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);
     color:var(--ink-dim);white-space:nowrap;flex:none}
.who .btn{min-height:36px;padding:0 var(--sp-3)}

/* ★ components.css 의 목업용 `nav{margin-left:auto}` 가 세로 흐름에서 격자를 오른쪽으로
   밀고 좁혔다(실측). 여기서 되돌린다. */
.menu{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-left:0;width:100%}
.menu a{display:inline-flex;align-items:center;justify-content:center;
        min-height:var(--touch);padding:0 var(--sp-4);
        border:1px solid var(--line-strong);border-radius:var(--r-sm);
        background:var(--surface);color:var(--ink);font-size:var(--fs-sm);white-space:nowrap}
.menu a:hover{background:var(--brand-soft);text-decoration:none}
.menu a.on{background:var(--accent-soft);border-color:var(--accent);
           color:var(--accent-strong);font-weight:var(--w-medium)}

@media (max-width:640px){
  /* 두 줄 머리가 따라다니면 화면의 1/4 을 가린다 — 좁은 화면에서는 고정을 푼다 */
  .topbar{position:static}
  /* 제목이 홈 단추다 — 잘리면 안 된다. 넘치면 말줄임 대신 낱말 단위로 줄을 바꾼다 */
  .brand{font-size:var(--fs-base)}
  .brand .ttl{white-space:normal;word-break:keep-all;overflow:visible}
  .who .nm{display:none}               /* 이름은 넓은 화면에서만 — 나가기는 늘 보인다 */
  .menu{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}
  .menu a{padding:0 var(--sp-1)}
}

/* 한자 제목이 좁은 화면에서 「鎭明 / 系」처럼 한 글자만 떨어지지 않게 — 낱말(띄어쓰기) 단위로만 끊는다 */
h1,h2{word-break:keep-all}

/* ── 버튼 ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
     min-height:var(--touch);padding:0 var(--sp-5);border-radius:var(--r-sm);
     border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
     font:inherit;font-size:var(--fs-sm);cursor:pointer;
     transition:background var(--dur) var(--ease)}
.btn:hover{background:var(--surface-sunken)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-strong)}
.btn-quiet{border-color:transparent;background:transparent;color:var(--ink-dim);
           padding:0 var(--sp-3)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ── 입력 ────────────────────────────────────────────────────────────── */
.field{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.field label{font-size:var(--fs-sm);color:var(--ink-dim)}
.field input,.field textarea,.field select{
     font:inherit;padding:var(--sp-3);border:1px solid var(--line-strong);
     border-radius:var(--r-sm);background:var(--surface);color:var(--ink);width:100%}
.field textarea{min-height:9rem;resize:vertical;line-height:var(--lh-normal)}
.field input:focus,.field textarea:focus,.field select:focus{
     outline:2px solid var(--brand);outline-offset:1px}
.hint{font-size:var(--fs-xs);color:var(--ink-faint)}

/* ── 상태 표시 ───────────────────────────────────────────────────────── */
.notice{border:1px solid var(--line);border-left:3px solid var(--brand);
        background:var(--surface);padding:var(--sp-4) var(--sp-5);
        border-radius:var(--r-sm);margin:var(--sp-5) 0}
.notice.warn{border-left-color:var(--accent)}
/* 신청 내용 요약 — 이름표 : 값 */
.kv{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-2) var(--sp-5);
    margin:var(--sp-5) 0}
.kv dt{color:var(--ink-dim)}
.kv dd{margin:0;overflow-wrap:anywhere}
.empty{border:1px dashed var(--line-strong);border-radius:var(--r-sm);
       padding:var(--sp-7) var(--sp-5);text-align:center;color:var(--ink-dim)}
.err{color:var(--accent-strong)}
.dev{background:var(--accent-soft);border-bottom:1px solid var(--accent);
     padding:var(--sp-2) var(--gutter);font-size:var(--fs-xs);color:var(--accent-strong)}

/* ── 목록 ────────────────────────────────────────────────────────────── */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:1fr auto auto;gap:var(--sp-4);
     align-items:center;padding:var(--sp-4) var(--sp-1);
     border-bottom:1px solid var(--line)}
.row .t{font-family:var(--font-serif)}
.row .m{font-size:var(--fs-sm);color:var(--ink-dim);white-space:nowrap}
@media (max-width:640px){
  .row{grid-template-columns:1fr;gap:var(--sp-1)}
  .row .m{font-size:var(--fs-xs)}
}

/* ── 댓글 ────────────────────────────────────────────────────────────── */
.cmt{border-top:1px solid var(--line);padding:var(--sp-4) 0}
.cmt.depth1{margin-left:var(--sp-7);border-left:2px solid var(--line);
            padding-left:var(--sp-4)}
.cmt .meta{font-size:var(--fs-xs);color:var(--ink-faint);margin-bottom:var(--sp-2)}
.body{white-space:pre-wrap;line-height:var(--lh-relaxed);max-width:var(--measure)}

/* ── 검색 ────────────────────────────────────────────────────────────── */
.results{display:grid;gap:var(--sp-2);
         grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-top:var(--sp-5)}
.hit{border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-3);
     background:var(--surface);display:flex;align-items:baseline;gap:var(--sp-2)}
.hit:hover{background:var(--brand-soft);text-decoration:none}
.hit .g{font-size:var(--fs-xs);color:var(--brand)}
.hit .n{font-family:var(--font-serif);font-size:var(--fs-lg)}
.hit .y{font-size:var(--fs-xs);color:var(--ink-dim)}