:root{
  --bg:#f7f7f5; --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb;
  --card:#ffffff; --accent:#2563eb; --accent-soft:#dbeafe;
  --good:#16a34a; --warn:#d97706; --code:#0f172a; --chip:#eef2ff;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans KR",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.75; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px; margin:0 auto; padding:28px 18px 90px;}
a{color:var(--accent); text-decoration:none;} a:hover{text-decoration:underline;}

/* hero */
.hero{padding:18px 0 8px; border-bottom:1px solid var(--line); margin-bottom:8px;}
.hero .kicker{color:var(--accent); font-weight:700; font-size:13px; letter-spacing:.04em;}
.hero h1{font-size:30px; line-height:1.2; margin:6px 0 10px;}
.hero p{color:var(--muted); font-size:15px; margin:0;}
.toc{background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px 18px; margin:20px 0 8px;}
.toc b{font-size:13px; color:var(--muted);} .toc ol{margin:8px 0 0; padding-left:20px;}
.toc li{margin:3px 0;}

/* section */
section{padding:30px 0 8px; border-bottom:1px solid var(--line);}
section h2{font-size:22px; margin:0 0 4px;}
section .step{color:var(--accent); font-weight:700; font-size:13px; letter-spacing:.05em;}
section h3{font-size:16px; margin:22px 0 6px;}
section p{margin:10px 0;}
.analogy{background:var(--accent-soft); border-radius:10px; padding:12px 16px;
  font-size:14.5px; color:#1e3a8a; margin:14px 0;}
.analogy b{color:#1e40af;}

/* value panel */
.vals{background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:6px 4px; margin:16px 0;}
.vals .vhead{font-size:12px; color:var(--muted); padding:8px 14px 4px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;}
.row{display:grid; grid-template-columns:170px 1fr; gap:10px; padding:7px 14px;
  border-top:1px solid var(--line); align-items:start;}
.row:first-of-type{border-top:none;}
.row .k{color:var(--muted); font-size:13px; font-family:ui-monospace,Menlo,monospace;}
.row .v{font-size:14px;}
.row .v code{background:var(--chip); color:#3730a3; padding:1px 6px; border-radius:5px;
  font-size:13px;}
.row .note{display:block; color:var(--muted); font-size:12.5px; margin-top:2px;}

/* token chips */
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0;}
.chips .c{background:var(--chip); border:1px solid #c7d2fe; border-radius:6px;
  padding:3px 8px; font-family:ui-monospace,Menlo,monospace; font-size:13px;}
.chips .c small{color:var(--muted); display:block; font-size:10.5px; text-align:center;}

/* generation steps */
.gen{display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:10px 0;
  font-family:ui-monospace,Menlo,monospace; font-size:14px;}
.gen .w{background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46;
  padding:2px 7px; border-radius:6px;}
.gen .arrow{color:var(--muted);}
.gen .eos{background:#fef2f2; border-color:#fecaca; color:#991b1b;}

/* diagram */
.pipe{background:var(--code); color:#e2e8f0; border-radius:12px; padding:16px 18px;
  font-family:ui-monospace,Menlo,monospace; font-size:13px; line-height:1.7;
  overflow-x:auto; margin:16px 0; white-space:pre;}
.pipe .lab{color:#7dd3fc;} .pipe .fr{color:#fca5a5;} .pipe .tr{color:#86efac;}

img.fig{width:100%; border:1px solid var(--line); border-radius:12px; margin:14px 0;}
img.photo{display:block; width:100%; max-width:380px; margin:14px auto 4px;
  border:1px solid var(--line); border-radius:12px;}
/* 본문 칸보다 넓게 펼쳐 보여주는 큰 그림 */
img.fig-wide{width:94vw; max-width:1080px; position:relative;
  left:50%; transform:translateX(-50%);}
.cap{color:var(--muted); font-size:12.5px; text-align:center; margin:-6px 0 14px;}
.tag{display:inline-block; font-size:12px; padding:2px 9px; border-radius:999px;
  background:#dcfce7; color:#166534; font-weight:600;}
footer{margin-top:36px; color:var(--muted); font-size:12.5px; text-align:center;}