/* ============================================================
   DailyForm — 정본 스타일시트 (Soft Precision)
   2026-08-24. 이전에는 페이지마다 <style> 이 따로 있어 색 하나 바꾸려면
   136장을 건드려야 했다. 공통 선택자 74개를 여기로 모은다.
   페이지 고유 규칙만 각 페이지 <style> 에 남기고, 이 파일 뒤에 실려 우선한다.
   대비는 배경 #f7f6f2 기준으로 계산해 주석에 남긴다 — 임의로 밝히지 말 것.
   ============================================================ */

:root{
  --bg:#f7f6f2;          /* 따뜻한 종이 */
  --card:#ffffff;
  --ink:#15140f;         /* 17.05:1 */
  --body:#3e3b33;        /* 10.34:1 — 본문 */
  --sub:#57544a;         /* 7.00:1 */
  --faint:#6b6759;       /* 5.23:1 — 작은 라벨. #8a8677 은 3.37 로 미달이었다 */
  --line:#e6e3d9;
  --line-strong:#15140f;
  --hl:#dcfb4a;          /* 산성 라임. 위에 얹는 글자는 ink (15.75:1) */
  --warn:#8a5a1a;        /* 5.9:1 on #fff */
  /* 구 토큰 호환 — 기존 마크업이 var(--pri)/var(--pri2)/var(--ok) 를 참조한다 */
  --pri:#15140f;
  --pri2:#3e3b33;
  --ok:#f1f0ea;
}

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

body{
  font-family:"IBM Plex Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",
    "Apple SD Gothic Neo","Malgun Gothic",sans-serif,
    "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);color:var(--ink);line-height:1.75;
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;
  /* 한국어는 어절 단위로 끊는다 — 없으면 제목이 「스스로 확/인하는」처럼 갈라진다. */
  word-break:keep-all;line-break:strict;
}

.wrap{max-width:700px;margin:0 auto;padding:16px}

/* ---- 링크: 잉크 + 헤어라인 밑줄. 색만으로 구분하지 않는다 ---- */
a{color:var(--ink);text-decoration:underline;text-decoration-color:#c9c5b7;text-underline-offset:2px}
a:hover{text-decoration-color:var(--ink)}

/* ---- 헤더 / 내비 ---- */
.topbar{align-items:flex-start;flex-direction:column;position:static;margin:0 0 22px;padding:0;border-bottom:none;background:none}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;text-decoration:none}
.logo{width:30px;height:30px;border-radius:2px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:.78rem;font-weight:600;box-shadow:none}
.nav{display:flex;gap:2px;flex-wrap:wrap;color:var(--sub);font-size:.9rem}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border:1px solid transparent;border-radius:2px;text-decoration:none;color:inherit}
.nav a:hover{background:var(--card);border-color:var(--line)}

header h1{font-size:1.9rem;line-height:1.18;letter-spacing:-.04em;margin-bottom:10px;font-weight:600}
header p{color:var(--sub);font-size:.95rem;margin-bottom:14px;font-weight:300}
h1{font-size:1.9rem;line-height:1.18;letter-spacing:-.04em;margin:8px 0 4px;font-weight:600}
h2{font-size:1.2rem;margin:28px 0 8px;padding-top:12px;border-top:1px solid var(--line);letter-spacing:-.03em;font-weight:600}

.crumb{font-size:.78rem;color:var(--faint);margin:4px 0 12px;letter-spacing:.02em}
.crumb a{color:var(--faint);text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ---- 본문 ---- */
article h2{font-size:1.2rem;margin:30px 0 8px;padding-top:14px;border-top:1px solid var(--line);letter-spacing:-.03em;font-weight:600}
article h2:first-of-type{border-top:none;padding-top:0;margin-top:4px}
article h3{font-size:1.02rem;margin:20px 0 4px;letter-spacing:-.02em;font-weight:600}
article p{color:var(--body);font-size:1rem;margin:10px 0;font-weight:300}
article ul,article ol{padding-left:20px;margin:8px 0}
article li{color:var(--body);font-size:1rem;margin:5px 0;font-weight:300}

/* ---- 면 ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:2px;padding:22px 22px 26px;margin:16px 0;box-shadow:none}

/* 리드 — 라임 세로선으로 표시한다(면을 칠하지 않는다) */
.lead{background:transparent;border:none;border-left:2px solid var(--hl);border-radius:0;padding:2px 0 2px 18px;color:var(--body);font-size:1.05rem;margin:0 0 18px;font-weight:300;line-height:1.7}

/* 근거·주의 상자 — 종이 톤 + 헤어라인 */
.note{background:var(--card);border:1px solid var(--line);border-radius:2px;padding:14px 16px;margin:14px 0;font-size:.94rem;color:var(--body)}
.disc{font-size:.85rem;color:var(--sub);background:transparent;border:none;border-top:1px solid var(--line);border-radius:0;padding:14px 0 0;margin-top:24px;line-height:1.7}

/* 도판은 대체로 밝은 배경이라 종이 위에서 경계를 잃는다 — 헤어라인으로 세운다. */
article img{max-width:100%;height:auto;border:1px solid var(--line);display:block}

blockquote.sample{background:transparent;border-left:2px solid var(--line);padding:6px 0 6px 16px;margin:12px 0;font-size:.95rem;color:var(--sub);font-style:normal}

/* ---- 표 ---- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.92rem;margin:14px 0}
table.ref{width:100%;border-collapse:collapse;font-size:.9rem;margin:14px 0;background:var(--card)}
table.ref th,table.ref td{border:1px solid var(--line);padding:9px 10px;text-align:left}
table.ref th{background:#f1f0ea;font-weight:600}
table.ref td.n,table.ref th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.ref td.c,td.c{text-align:center;white-space:nowrap}
table.ref tr.hi{background:#faf9f2}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:right;white-space:nowrap}
th{background:#f1f0ea;text-align:center;font-weight:600}
td:first-child,th:first-child{text-align:left;white-space:normal}
td.yes{color:#1f5f34;font-weight:600}
td.no{color:#9c2020;font-weight:600}
.up{color:var(--warn);font-weight:600}
.dn{color:#1f5f34;font-weight:600}

/* ---- FAQ ---- */
.faq dt{font-weight:600;margin:18px 0 4px;font-size:.98rem}
.faq dd{margin:0;color:var(--body);font-size:.95rem;font-weight:300}

pre.calc{background:var(--card);border:1px solid var(--line);border-radius:2px;padding:13px 15px;font-size:.86rem;overflow-x:auto;color:var(--body);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.6}

/* ---- 행동 유도 ---- */
.cta{display:block;background:var(--ink);color:var(--bg);text-align:center;text-decoration:none;font-weight:500;border-radius:2px;padding:16px;margin:22px 0}
.cta:hover{background:#2a2820}
.cta small{display:block;font-weight:300;font-size:.82rem;opacity:.82;margin-top:3px}

/* ---- 계산기 ---- */
label{display:block;font-weight:500;font-size:.88rem;margin-bottom:8px;color:var(--sub)}
input,select{width:100%;padding:13px 14px;font-size:1rem;border:1px solid var(--line);border-radius:2px;background:var(--card);font-family:inherit;color:var(--ink)}
input:focus,select:focus{outline:none;border-color:var(--ink)}
input:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
button{width:100%;margin-top:16px;padding:15px;font-size:1rem;font-weight:500;color:var(--bg);background:var(--ink);border:none;border-radius:2px;cursor:pointer;font-family:inherit}
button:hover{background:#2a2820}
button:active{transform:translateY(1px)}
.row{display:flex;gap:12px}
.row>div{flex:1}
.result{margin-top:20px;display:none}
.result.show{display:block}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* 결과 — 숫자가 화면에서 가장 크다 */
.big{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:2px;padding:24px;margin-bottom:14px}
.big .num{font-size:3rem;font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.055em}
.big .lbl{color:var(--faint);font-size:.82rem;margin-top:8px;letter-spacing:.02em}
.cell{background:var(--card);border:1px solid var(--line);border-radius:2px;padding:16px;text-align:left}
.cell .v{font-size:1.3rem;font-weight:600;letter-spacing:-.03em}
.cell .k{font-size:.78rem;color:var(--faint);margin-top:4px}

/* ---- 부속 ---- */
section.info h2{font-size:1.12rem;margin:22px 0 8px;letter-spacing:-.02em}
section.info h3{font-size:1rem;margin:16px 0 4px}
section.info p,section.info li{color:var(--body);font-size:.95rem;font-weight:300}
section.info ul{padding-left:20px;margin:6px 0}

.ad{background:transparent;border:1px dashed var(--line);border-radius:2px;color:var(--faint);text-align:center;padding:26px 10px;font-size:.85rem;margin:18px 0}
.ad-wrap{width:100%;max-width:600px;min-height:90px;margin:8px 0 14px}

footer{text-align:left;color:var(--faint);font-size:.8rem;padding:28px 0;border-top:1px solid var(--line);margin-top:32px}
footer a{color:var(--faint);display:inline-flex;align-items:center;min-height:44px}

/* ============================================================
   다크 — 같은 체계의 어두운 짝. 토큰만 바꾸므로 규칙은 손대지 않는다.
   구조 개편 전에는 페이지마다 <style> 이 따로여서 불가능했던 작업이다.
   대비는 배경 #14140f 기준. 전부 AA 통과.
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14140f;
    --card:#1c1b16;
    --ink:#f2f0e9;       /* 16.20:1 */
    --body:#ccc8bc;      /* 11.05:1 */
    --sub:#b0aca0;       /* 8.14:1 */
    --faint:#928e83;     /* 5.65:1 */
    --line:#2b2a23;
    --line-strong:#f2f0e9;
    --hl:#dcfb4a;        /* 15.78:1 — 라임은 어두운 배경에서도 성립한다 */
    --warn:#a89e6b;      /* 6.83:1 — 라이트의 #8a5a1a 는 어두운 배경에서 3 이하로 떨어진다 */
    --pri:#f2f0e9;
    --pri2:#ccc8bc;
    --ok:#1c1b16;
  }
  /* 잉크/배경이 뒤집히므로 채워진 요소도 함께 뒤집는다 */
  .cta{background:var(--ink);color:var(--bg)}
  .cta:hover{background:#ffffff}
  button{background:var(--ink);color:var(--bg)}
  button:hover{background:#ffffff}
  .logo{background:var(--ink);color:var(--bg)}
  table.ref th,th{background:#232219}
  table.ref tr.hi{background:#20201a}
  /* 도판은 밝은 배경으로 만들어져 있다 — 어두운 화면에서 눈부시지 않게 살짝 낮춘다 */
  article img{filter:brightness(.92)}
}