/* ============================================================================
   styles/components.css — 화면 부품의 단일 정본
   목업(mockup/all.html)과 실제 사이트(site/)가 **이 파일 하나**를 함께 쓴다.
   따로 두면 목업이 먼저 늙고, 어느 쪽이 맞는지 알 수 없게 된다 (D-001 의 연장).

   색·치수·서체 값은 여기 적지 않는다 — styles/tokens.css 가 소유한다.
   ============================================================================ */

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
     font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-normal)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
/* 세계도는 20열이라 wrap(1120) 안에서 스크롤이 생긴다. 풀블리드로 빼서 뷰포트를 쓴다. */
.wide{max-width:none;margin:0 auto;padding:0 var(--gutter)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* ── 헤더 ── */
header{position:sticky;top:0;z-index:20;background:var(--surface);
       border-bottom:1px solid var(--line);box-shadow:var(--shadow-hairline)}
.hd{display:flex;align-items:center;gap:var(--sp-6);height:var(--header-h)}
.brand{font-family:var(--font-serif);font-size:var(--fs-lg);font-weight:var(--w-bold);
       letter-spacing:var(--tracking-tight);display:flex;align-items:center;gap:var(--sp-3)}
/* 주칠 인장 마크 — 전통 문서의 낙인. Stitch 파일럿에서 가져온 형태 */
.seal{display:inline-flex;align-items:center;justify-content:center;
      width:30px;height:30px;flex:0 0 30px;border:1.5px solid var(--accent);
      color:var(--accent);font-family:var(--font-serif);font-size:var(--fs-md);
      font-weight:var(--w-bold);border-radius:var(--r-xs)}
.brand > div{line-height:1.2}
/* 상단 작은 상태 표시 — 지금 어떤 자격으로 보고 있는가 */
.status{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto;
        color:var(--ink-dim);font-size:var(--fs-sm);white-space:nowrap}
.status i{width:6px;height:6px;border-radius:50%;background:var(--accent);
          display:inline-block;flex:0 0 6px}
.brand small{display:block;font-size:var(--fs-xs);color:var(--ink-dim);font-weight:var(--w-normal)}
nav{display:flex;gap:var(--sp-1);margin-left:auto;flex-wrap:wrap}
nav a{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);min-height:var(--touch);
      display:inline-flex;align-items:center;color:var(--ink-dim);font-size:var(--fs-sm)}
nav a[aria-current]{background:var(--brand-soft);color:var(--brand-strong);font-weight:var(--w-medium)}

/* ── 섹션 ── */
section{padding:var(--sp-section) 0}
/* 화면 제목은 자간을 벌린다 — 전통 현판의 벌어진 글자. Stitch 시안에서 보고 채택했다.
   본문의 --tracking-tight 와 반대 방향이지만 제목에 한해서다. */
h2{font-family:var(--font-serif);font-size:var(--fs-2xl);margin:0 0 var(--sp-2);
   letter-spacing:0.2em;font-weight:var(--w-bold)}
h2::after{content:"";display:block;width:32px;height:1px;background:var(--accent);
          margin:var(--sp-3) 0 0}
.lede{color:var(--ink-dim);margin:0 0 var(--sp-6);max-width:var(--measure)}

/* ── 세계도 격자 ──
   행=代, 열=남계 말단. 각 인물이 자손의 열 범위를 span 한다. */
.tree{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
      box-shadow:var(--shadow-raised);overflow:hidden}
/* ㄱ자 모서리 장식 — 전통 문서의 구역 표시. Stitch 파일럿에서 가져왔다. */
.framed{position:relative;padding:var(--sp-5)}
.framed::before,.framed::after{content:"";position:absolute;width:14px;height:14px;
  border:1px solid var(--line-strong);pointer-events:none}
/* Stitch 시안은 rgba(28,25,23,.45) 라는 신규 알파를 썼다. 우리 --line-strong(0.28)로 맞춘다. */
.framed::before{top:8px;left:8px;border-right:0;border-bottom:0}
.framed::after{bottom:8px;right:8px;border-left:0;border-top:0}
.tscroll{overflow-x:auto;overscroll-behavior-x:contain}
.tinner{display:grid;grid-template-columns:auto 1fr;min-width:max-content}
.glabel{display:flex;align-items:center;justify-content:center;gap:2px;
        position:sticky;left:0;z-index:2;background:var(--surface-sunken);
        border-right:1px solid var(--line);border-bottom:1px solid var(--line);
        padding:var(--sp-3) var(--sp-3);font-family:var(--font-serif);
        font-weight:var(--w-bold);color:var(--brand-strong);white-space:nowrap}
.glabel small{font-size:var(--fs-xs);font-weight:var(--w-normal);color:var(--ink-dim)}
.grow{display:grid;border-bottom:1px solid var(--line);gap:1px;background:var(--line)}
.node{background:var(--surface);display:flex;flex-direction:column;align-items:center;
      justify-content:center;padding:var(--sp-3) var(--sp-1);min-height:var(--touch);
      text-align:center;transition:background var(--dur) var(--ease)}
.node:hover{background:var(--brand-soft);cursor:pointer}
.node .hanja{font-family:var(--font-serif);font-size:var(--fs-hanja-name);
             font-weight:var(--w-medium);line-height:var(--lh-tight)}
.node .hangul{font-size:var(--fs-xs);color:var(--ink-dim);white-space:nowrap}
/* 현재 위치는 색만이 아니라 형태로도 표시한다 */
.node.is-current{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.node.is-current .hanja{color:var(--accent-strong)}
.dot{display:inline-block;width:5px;height:5px;border-radius:50%;
     background:var(--brand);margin-left:3px;vertical-align:middle}

.legend{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-3);
        font-size:var(--fs-sm);color:var(--ink-dim)}
.legend b{font-weight:var(--w-medium);color:var(--ink)}

/* ── 인물 초점 ── */
.crumb{font-family:var(--font-serif);padding:var(--sp-3) 0;
       display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.crumb .sep{color:var(--ink-faint)}
/* 현재 위치를 색만이 아니라 박스로도 표시한다 — Stitch 시안에서 채택 */
.crumb .cur{color:var(--accent-strong);font-weight:var(--w-bold);
            border:1px solid var(--accent);background:var(--accent-soft);
            padding:2px 10px;border-radius:var(--r-xs)}
/* 인물 머리 — 代 배지 · 큰 한자 · 작은 독음 */
.phead{display:flex;align-items:baseline;gap:var(--sp-3);margin:var(--sp-5) 0 var(--sp-4);
       padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.gbadge{border:1px solid var(--accent);color:var(--accent-strong);font-family:var(--font-serif);
        font-size:var(--fs-xs);padding:2px 8px;border-radius:var(--r-xs);white-space:nowrap}
.pname{font-family:var(--font-serif);font-size:var(--fs-2xl);font-weight:var(--w-medium)}
.pyomi{font-family:var(--font-serif);color:var(--ink-dim);font-size:var(--fs-base)}
.bon{color:var(--brand)}   /* 본관은 쪽빛 — 구조 정보 */

/* 문헌 — 한문 원문과 한글 번역을 나란히 */
.verse{border-top:1px solid var(--line)}
.vrow{display:grid;grid-template-columns:minmax(190px,auto) 1fr;gap:var(--sp-8);
      padding:var(--sp-4) 0;border-bottom:1px solid var(--line);align-items:baseline}
.vrow .han{font-family:var(--font-serif);font-size:var(--fs-lg);letter-spacing:.06em}
.vrow .kor{font-family:var(--font-serif);color:var(--ink-dim);font-size:var(--fs-sm)}
.photoslot{border:1px dashed var(--line-strong);border-radius:var(--r-sm);
           background:var(--surface-sunken);min-height:200px;display:flex;
           align-items:center;justify-content:center;color:var(--ink-faint);
           font-size:var(--fs-sm);margin:var(--sp-5) 0}
@media (max-width:640px){ .vrow{grid-template-columns:1fr;gap:var(--sp-2)} }

/* 문헌·참고 본문 — 문단 · 표 · 그림 */
.tx{max-width:var(--measure);line-height:var(--lh-relaxed);margin:0 0 var(--sp-4)}
hr.sep{border:0;border-top:1px solid var(--line);margin:var(--sp-6) 0}
/* ★ 표는 좁은 화면에서 **표만** 가로로 민다. 페이지가 통째로 밀리면
   세계도에서 잡아 둔 「가로 스크롤 0」이 문헌 화면에서 깨진다. */
.tblwrap{overflow-x:auto;margin:var(--sp-5) 0;border:1px solid var(--line);
         border-radius:var(--r-sm);background:var(--surface)}
.tbl{border-collapse:collapse;width:100%;font-size:var(--fs-sm)}
.tbl th,.tbl td{border:1px solid var(--line);padding:var(--sp-2) var(--sp-3);
                text-align:left;vertical-align:top;line-height:var(--lh-normal)}
.tbl th{background:var(--brand-soft);font-weight:var(--w-medium);color:var(--ink);
        white-space:nowrap}
.tbl td:first-child{font-family:var(--font-serif);white-space:nowrap;color:var(--ink)}
.tbl tbody tr:nth-child(2n){background:var(--surface-sunken)}
.fig{margin:var(--sp-5) 0;text-align:center}
/* 원본의 width·height 속성은 가로세로비만 쓰고 실제 크기는 화면에 맞춘다 */
.fig img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-sm)}

/* 절 제목과 차례 — 긴 참고 문서용 */
.sec{font-family:var(--font-serif);font-size:var(--fs-xl);font-weight:var(--w-medium);
     margin:var(--sp-8) 0 var(--sp-4);padding-top:var(--sp-4);
     border-top:1px solid var(--line);scroll-margin-top:72px}
.toc{border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r-sm);
     background:var(--surface);padding:var(--sp-4) var(--sp-5);margin:var(--sp-5) 0}
.toc p{margin:0 0 var(--sp-2)}
.toc ol{margin:0;padding-left:var(--sp-6);columns:2;column-gap:var(--sp-7)}
.toc li{margin:var(--sp-1) 0;font-size:var(--fs-sm);break-inside:avoid}
@media (max-width:640px){ .toc ol{columns:1} }

/* 지방(紙榜)·축문(祝文) — 세로쓰기. 표가 아니라 그림이다.
   ★ 칸을 원본 순서 그대로 왼쪽부터 세운다. 축문은 **오른쪽 칸부터** 읽는다
     — 원본 화면과 같은 배치라야 그 순서가 보존된다. */
.vert{margin:var(--sp-5) 0}
.vcols{display:flex;gap:var(--sp-4);justify-content:center;align-items:flex-start;
       overflow-x:auto;padding:var(--sp-5) var(--sp-4);border:1px solid var(--line);
       border-radius:var(--r-sm);background:var(--surface)}
.vcol{font-family:var(--font-serif);font-size:var(--fs-lg);line-height:1.45;
      text-align:center;white-space:nowrap;flex:0 0 auto}
.vert figcaption{color:var(--ink-dim);font-size:var(--fs-sm);margin-top:var(--sp-3);
                 line-height:var(--lh-relaxed)}

/* 글자 그림 — 2009년 페이지가 못 찍는 한자를 그림으로 넣은 자리(妣·辟·墜).
   글자 크기에 맞춰 앉혀야 글줄이 어긋나지 않는다. */
.glyph{height:1em;width:auto;vertical-align:-0.12em;display:inline-block}
.glyph-miss{opacity:.6}

/* 사진첩 — 스캔은 세로가 길다. 폭을 고정하고 설명을 곁에 붙인다. */
.album{display:grid;gap:var(--sp-6);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
       margin-top:var(--sp-5)}
.shot{margin:0;border:1px solid var(--line);border-radius:var(--r-sm);
      background:var(--surface);overflow:hidden}
.shot img{display:block;width:100%;height:auto;background:var(--surface-sunken)}
.shot figcaption{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);
                 color:var(--ink-dim);line-height:var(--lh-relaxed)}
@media (max-width:640px){ .album{grid-template-columns:1fr} }

/* 커뮤니티 — 탭 + 3열 목록 */
.tabs{display:flex;gap:var(--sp-6);border-bottom:1px solid var(--line);margin-bottom:var(--sp-5)}
.tabs a{padding:var(--sp-3) 0;color:var(--ink-dim);border-bottom:2px solid transparent;
        min-height:var(--touch);display:inline-flex;align-items:center}
.tabs a[aria-current]{color:var(--accent-strong);border-bottom-color:var(--accent);
                      font-weight:var(--w-medium)}
.blist{width:100%;border-collapse:collapse}
.blist th{text-align:left;font-weight:var(--w-normal);color:var(--ink-dim);
          font-size:var(--fs-sm);padding:var(--sp-3) var(--sp-4);
          border-bottom:1px solid var(--line);background:var(--surface-sunken)}
.blist td{padding:var(--sp-4);border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.blist th:nth-child(2),.blist td:nth-child(2){width:120px}
.blist th:nth-child(3),.blist td:nth-child(3){width:140px;text-align:right;color:var(--ink-faint)}
.blist tr:hover td{background:var(--surface-sunken)}
.bfoot{display:flex;justify-content:flex-end;margin-top:var(--sp-4)}
.bbtn{border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r-sm);
      padding:var(--sp-2) var(--sp-5);min-height:var(--touch);display:inline-flex;
      align-items:center;color:var(--ink)}
.panel{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
       margin-top:var(--sp-4)}
.box{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
     padding:var(--sp-5);box-shadow:var(--shadow-hairline)}
.box h3{margin:0 0 var(--sp-3);font-size:var(--fs-sm);letter-spacing:.04em;
        color:var(--ink-dim);font-weight:var(--w-medium);text-transform:none}
dl{margin:0}
.f{display:grid;grid-template-columns:3.5rem 1fr;gap:var(--sp-2);padding:var(--sp-2) 0;
   border-bottom:1px solid var(--line)}
.f:last-child{border-bottom:0}
.f dt{color:var(--ink-dim);font-size:var(--fs-sm);font-family:var(--font-serif)}
.f dd{margin:0;font-family:var(--font-serif);font-size:var(--fs-hanja-body)}
.card .ttl{font-family:var(--font-serif);color:var(--ink-dim);font-size:var(--fs-sm)}
.card .nm{font-family:var(--font-serif);font-size:var(--fs-lg)}
.card .nm small{color:var(--ink-dim);font-size:var(--fs-sm)}
.card .sub{color:var(--ink-dim);font-size:var(--fs-sm);font-family:var(--font-serif)}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chip{display:inline-flex;flex-direction:column;align-items:center;
      padding:var(--sp-2) var(--sp-4);min-height:var(--touch);justify-content:center;
      border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.chip .hanja{font-family:var(--font-serif);font-size:var(--fs-md)}
.chip .hangul{font-size:var(--fs-xs);color:var(--ink-dim)}
/* 딸은 색이 아니라 테두리 형태로도 가른다 */
.chip.f{border-style:dashed;border-color:var(--sex-female)}
.chip.f .hangul{color:var(--sex-female)}
.chip.proxy .hangul{color:var(--state-locked)}

/* ── 데이터 공백을 감추지 않는다 ── */
.gap{border:1px solid var(--state-locked);border-left-width:3px;border-radius:var(--r-md);
     background:var(--state-locked-bg);padding:var(--sp-4) var(--sp-5);margin-top:var(--sp-6)}
.gap h3{margin:0 0 var(--sp-2);font-size:var(--fs-sm);color:var(--state-locked)}
.gap ul{margin:0;padding-left:1.1rem;font-family:var(--font-serif)}
.gap small{color:var(--ink-dim);font-family:var(--font-sans);font-size:var(--fs-xs);margin-left:6px}
.gap p{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);color:var(--ink-dim)}

/* 중앙 정렬 단일 카드 — 할 일이 하나인 화면(로그인·대기 안내)에 쓴다 */
.solo{max-width:560px;margin:0 auto;border:1px solid var(--line);border-radius:var(--r-lg);
      background:var(--surface);box-shadow:var(--shadow-raised);text-align:center}
.solo .mark{display:inline-block;border:1px solid var(--accent);color:var(--accent);
            font-family:var(--font-serif);font-size:var(--fs-sm);padding:2px 10px;
            border-radius:var(--r-xs);letter-spacing:.08em}
.solo h3{font-family:var(--font-serif);font-size:var(--fs-2xl);margin:var(--sp-5) 0 var(--sp-1);
         letter-spacing:var(--tracking-tight)}
.solo .sub{color:var(--ink-dim);font-size:var(--fs-sm);margin:0 0 var(--sp-6)}
.solo .rule{width:72px;height:1px;background:var(--line-strong);margin:0 auto var(--sp-6)}
.solo p.body{max-width:var(--measure);margin:0 auto var(--sp-8);text-align:left;
             font-family:var(--font-serif);line-height:var(--lh-loose)}
.btn-google{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);
            width:100%;max-width:400px;min-height:var(--touch);padding:var(--sp-3) var(--sp-5);
            border:1px solid var(--line-strong);border-radius:var(--r-md);background:#fff;
            font-weight:var(--w-medium);color:var(--ink)}
.solo .note{color:var(--accent-strong);font-size:var(--fs-sm);margin:var(--sp-4) 0 0}

footer{border-top:1px solid var(--line);margin-top:var(--sp-section);
       padding:var(--sp-6) 0;color:var(--ink-faint);font-size:var(--fs-sm)}
@media (max-width:640px){ nav{display:none} }