/* ============================================================================
   PaperX — 학술 조판 디자인 토큰
   심의 첨부 문서의 문법. SaaS 랜딩이 아니라 학술지 조판을 따른다.
   폰트: 본문 Noto Serif KR(한자·한글), 표·수치·라벨 Pretendard. 서브셋 미사용.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@1.3.9/dist/web/static/pretendard.css');

:root{
  /* 색 — 다섯 개만. 강조(seal)는 핵심 수치·위험에만. */
  --ink:#16181D;      /* 본문. 순흑이 아닌 먹빛 */
  --paper:#FCFCFA;    /* 배경. 종이의 미세한 온기 */
  --rule:#D8D6D0;     /* 괘선. 표·구분선 */
  --muted:#6B6E76;    /* 보조 텍스트 */
  --seal:#8C2E2A;     /* 강조. 인장 붉은빛. 아주 드물게 */

  /* 3층 막대 — 밀도로 구분(색이 아니라 패턴) */
  --layer-s1:#E5E4DF;                 /* 가장 옅은 회색 */
  --layer-s2:#C7C6C1;                 /* 중간 회색(+사선 해칭 오버레이) */
  --layer-s3:var(--ink);              /* 먹빛 단색 */
  --hatch:repeating-linear-gradient(45deg,#a9a8a3 0 1.5px,transparent 1.5px 5px);

  /* 서체 */
  --serif:'Noto Serif KR', serif;
  --sans:'Pretendard','IBM Plex Sans KR', system-ui, -apple-system, sans-serif;

  /* 크기 (rem) */
  --fs-figure:3rem;    /* 판정 수치 */
  --fs-title:1.5rem;   /* 제목 */
  --fs-body:1rem;      /* 본문 */
  --fs-label:.875rem;  /* 표·라벨 */
  --fs-note:.8125rem;  /* 주석 */
  --lh-body:1.75;

  /* 레이아웃 */
  --measure:72ch;      /* 논문 한 단 폭 */
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-6:3rem; --sp-8:4rem;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{font-size:16px}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:var(--fs-body); line-height:var(--lh-body);
  font-weight:400; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 판독성이 필요한 곳(수치·라벨·표·버튼)은 산세리프 + tabular */
.sans,.num,table,th,td,.label,.btn,.tag,input,select,textarea,button,nav,.nav{
  font-family:var(--sans);
}
.num,table,.figure,.tabular{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── 레이아웃 ──────────────────────────────────────────────────────────── */
.page{max-width:var(--measure);margin:0 auto;padding:var(--sp-8) var(--sp-4)}
.wide{max-width:calc(var(--measure) + 16ch)} /* 표가 넓을 때만 */
.stack>*+*{margin-top:var(--sp-3)}

/* ── 타이포 ────────────────────────────────────────────────────────────── */
h1{font-size:var(--fs-title);font-weight:600;letter-spacing:-.01em;line-height:1.4}
h2{font-size:1.15rem;font-weight:600;line-height:1.5;margin-top:var(--sp-4)}
h3{font-size:1rem;font-weight:600;color:var(--ink)}
p{margin:0}
a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--rule)}
a:hover{text-decoration-color:var(--ink)}
.muted{color:var(--muted)}
.note{font-size:var(--fs-note);color:var(--muted);line-height:1.6}
.label{font-size:var(--fs-label);color:var(--muted);letter-spacing:.02em}
.seal{color:var(--seal)}
strong{font-weight:600}

/* 판정 수치 — 화면에서 기억될 숫자 */
.figure{font-family:var(--sans);font-size:var(--fs-figure);font-weight:600;line-height:1;letter-spacing:-.02em}
.figure .unit{font-size:1rem;font-weight:500;color:var(--muted);margin-left:.35rem;letter-spacing:0}

/* ── 괘선·구분 ─────────────────────────────────────────────────────────── */
hr,.rule{border:none;border-top:1px solid var(--rule);margin:var(--sp-4) 0}
.hairline{border-top:1px solid var(--rule)}
.block{border:1px solid var(--rule);border-radius:2px;padding:var(--sp-3)}  /* 그림자 대신 괘선 */

/* ── 표 — 가로 괘선만. 세로선 없음(학술지 관례) ──────────────────────── */
table{border-collapse:collapse;width:100%;font-size:var(--fs-label)}
caption{text-align:left;font-family:var(--sans);font-size:var(--fs-note);color:var(--muted);padding-bottom:var(--sp-1)}
thead th{
  text-align:left;font-weight:600;color:var(--ink);
  border-bottom:1.5px solid var(--ink); padding:.5rem .75rem;white-space:nowrap;
}
tbody td{border-bottom:1px solid var(--rule);padding:.5rem .75rem;vertical-align:top}
tbody tr:last-child td{border-bottom:1.5px solid var(--ink)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}

/* ── 버튼 — 절제. seal 남발 금지. 기본은 괘선 테두리 ─────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--fs-label);font-weight:500;line-height:1;
  padding:.5rem .9rem;border:1px solid var(--rule);border-radius:2px;
  background:var(--paper);color:var(--ink);cursor:pointer;text-decoration:none;
  transition:border-color .12s,background .12s;
}
.btn:hover{border-color:var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-quiet{border-color:transparent;padding-left:.3rem;padding-right:.3rem}
.btn-quiet:hover{border-color:transparent;text-decoration:underline;text-underline-offset:3px}

/* ── 태그·라벨칩 ───────────────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;font-size:var(--fs-note);color:var(--muted);
  border:1px solid var(--rule);border-radius:2px;padding:.15rem .5rem;letter-spacing:.02em}

/* ============================================================================
   시그니처 — 3층 분리 막대
   본문의 어디까지가 설명되었고 어디가 남았는지를 막대 하나로.
   S1 옅은회색 · S2 중간회색+사선해칭 · S3 먹빛단색 · 미대응 빈칸
   ============================================================================ */
.layerbar{display:flex;width:100%;height:2.75rem;border:1px solid var(--ink);border-radius:2px;overflow:hidden;background:var(--paper)}
.layerbar-seg{position:relative;min-width:0}
.seg-s1{background:var(--layer-s1)}
.seg-s2{background:var(--layer-s2)}
.seg-s2::after{content:"";position:absolute;inset:0;background:var(--hatch)}
.seg-s3{background:var(--layer-s3)}
.seg-none{background:var(--paper)}
.seg-none+.seg-none{border-left:none}
/* 미대응은 빈칸이되, 인접 구분을 위해 좌측 세로 실선 */
.layerbar .seg-none{border-left:1px dashed var(--rule)}

/* 막대 범례 — 각 구간의 뜻을 한 줄씩(심의자가 처음 보는 개념) */
.layerbar-legend{margin-top:var(--sp-3);display:grid;gap:.6rem}
.leg-row{display:grid;grid-template-columns:1.1rem auto 1fr auto;gap:.6rem;align-items:baseline;font-size:var(--fs-label)}
.leg-swatch{width:1.1rem;height:1.1rem;border:1px solid var(--ink);border-radius:1px;position:relative;top:.15rem}
.leg-swatch.s1{background:var(--layer-s1)}
.leg-swatch.s2{background:var(--layer-s2)}
.leg-swatch.s2::after{content:"";position:absolute;inset:0;background:var(--hatch)}
.leg-swatch.s3{background:var(--layer-s3)}
.leg-swatch.none{background:var(--paper)}
.leg-name{font-weight:600;font-family:var(--sans)}
.leg-desc{color:var(--muted)}
.leg-val{font-family:var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}

/* ── 구절 대조(층별 목록) ──────────────────────────────────────────────── */
.passage{border:1px solid var(--rule);border-radius:2px;padding:var(--sp-2) var(--sp-3);margin-top:var(--sp-2)}
.passage-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2);margin-bottom:.5rem}
.passage-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.passage-col .label{display:block;margin-bottom:.25rem}
.passage-col p{font-size:.95rem;line-height:1.7}
@media(max-width:640px){.passage-cols{grid-template-columns:1fr}}

/* ── 빈 화면·오류(다음 행동을 안내. 사과하지 않는다) ──────────────────── */
.empty{border:1px dashed var(--rule);border-radius:2px;padding:var(--sp-6) var(--sp-4);text-align:center;color:var(--muted)}
.empty h3{color:var(--ink);margin-bottom:.5rem}
.notice{border:1px solid var(--rule);border-left:2px solid var(--seal);border-radius:2px;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-label);background:var(--paper)}

/* ── 상단 내비 ─────────────────────────────────────────────────────────── */
.topnav{border-bottom:1px solid var(--rule);background:var(--paper)}
.topnav-inner{max-width:calc(var(--measure) + 16ch);margin:0 auto;padding:var(--sp-2) var(--sp-4);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.brand{font-family:var(--sans);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.brand .seal{color:var(--seal)}
.topnav nav{display:flex;gap:var(--sp-3);align-items:center;font-size:var(--fs-label)}
.topnav nav a{text-decoration:none;color:var(--muted)}
.topnav nav a:hover,.topnav nav a.active{color:var(--ink)}

/* ── 인쇄(증거 문서로 그대로) ─────────────────────────────────────────── */
@media print{
  :root{--paper:#fff}
  body{background:#fff}
  .topnav,.no-print{display:none!important}
  .page{max-width:100%;padding:0}
  .block,.passage,.layerbar{break-inside:avoid}
}