:root{--paper:#f5f1e9;--card:#fffdf8;--ink:#292b29;--muted:#62635d;--accent:#9c3f22;--line:#d5d0c6;--soft:#e9e1d3;--width:1120px;--serif:"Batang","Noto Serif KR",serif;--sans:"Malgun Gothic","Apple SD Gothic Neo",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.8 var(--sans);word-break:keep-all}a{color:var(--accent);text-underline-offset:4px}img{max-width:100%;height:auto;display:block}button,input{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.shell{width:min(var(--width),calc(100% - 48px));margin-inline:auto}.notice{background:var(--ink);color:#fff;padding:10px 20px;font-size:12px;text-align:center}.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:22px}.brand{color:var(--ink);font-weight:800;text-decoration:none;font-size:21px;letter-spacing:-.05em}.navlinks{display:flex;gap:24px;font-size:14px}.navlinks a{color:var(--ink);text-decoration:none}.button{border:1px solid var(--ink);background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;padding:15px 22px;min-height:54px;line-height:1.5;text-decoration:none;font-weight:700;text-align:center;gap:8px}.button:hover{background:#444640}.button.secondary{color:var(--ink);background:transparent}.button.secondary:hover{background:var(--soft)}.button.accent{background:var(--accent);border-color:var(--accent);color:#fff}.eyebrow{font-size:12px;letter-spacing:.15em;font-weight:800;color:var(--accent);display:block;margin:0 0 16px}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding-block:40px 60px}.hero h1{font:700 clamp(36px,4.3vw,62px)/1.23 var(--serif);letter-spacing:-.055em;margin:0 0 24px;text-wrap:balance}.hero p{max-width:39em;color:var(--muted)}.hero-photo{margin:0}.hero-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}.caption{font-size:12px;color:var(--muted);margin:10px 0}.section{padding-block:64px;border-top:1px solid var(--line)}h2{font:700 clamp(26px,3vw,38px)/1.4 var(--serif);letter-spacing:-.05em;margin:0 0 22px;text-wrap:balance}h3{font-size:20px;line-height:1.5;margin:12px 0}p{margin:0 0 20px}.lede{font-size:18px;color:var(--muted);max-width:780px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.card{background:var(--card);padding:26px;border:1px solid var(--line)}.card .number{font:italic 28px var(--serif);color:var(--accent)}.card p{font-size:15px;color:var(--muted);margin-bottom:0}.diagram{background:var(--card);border:1px solid var(--line);padding:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.diagram figure{margin:0}.diagram svg{width:100%;height:140px;display:block}.diagram figcaption{font-size:14px;color:var(--muted)}.diagram strong{display:block;font-size:18px;color:var(--ink)}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line)}table{border-collapse:collapse;width:100%;min-width:570px;background:var(--card)}th,td{text-align:left;padding:18px;border-bottom:1px solid var(--line);vertical-align:top}th{background:var(--soft)}.scroll-hint{font-size:13px;color:var(--muted);margin:8px 0}.template{padding:28px;background:var(--card);border-left:3px solid var(--accent)}.template ol{padding-left:24px}.template li{margin:12px 0}.copy-button{margin-top:14px}.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:min(680px,100%);margin-inline:auto}.cta{text-align:center;margin:52px auto;padding:44px;background:var(--soft);border:1px solid var(--line)}.cta .eyebrow,.cta h2,.cta p{margin-inline:auto;max-width:720px}.footer{border-top:1px solid var(--line);padding-block:28px;font-size:13px;color:var(--muted)}.article{--width:900px}.article h1{font:700 clamp(32px,4vw,54px)/1.35 var(--serif);letter-spacing:-.05em;text-wrap:balance}.article-head{padding-block:48px 28px}.article .cover{width:100%;aspect-ratio:3/2;object-fit:cover}.article-section{margin-block:52px}.article-section h3{margin-top:32px}.article li{margin-block:10px}.byline{color:var(--muted);font-size:13px}.phone{max-width:390px;margin:24px auto;border:9px solid var(--ink);border-radius:26px;overflow:hidden;background:var(--paper)}.phone iframe{width:100%;height:640px;border:0;display:block}.mobile-preview{display:none}.preview-caption{max-width:580px;margin:18px auto;text-align:center;font-size:14px;color:var(--muted)}.checklist{border:0;padding:0;margin:18px auto;text-align:left;max-width:550px}.checklist legend{font-weight:700;margin-bottom:12px}.checklist label{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.checklist input{width:20px;height:20px;flex:0 0 auto;margin-top:4px;accent-color:var(--accent)}.status{padding:12px 0;min-height:54px;font-weight:700;max-width:620px;margin-inline:auto}.status[data-state=error]{color:#8c251a}.status[data-state=success]{color:#315840}details{border-bottom:1px solid var(--line);padding:20px 0}summary{cursor:pointer;font-weight:700}details p{margin-top:14px;color:var(--muted)}.sample-badge{display:inline-block;font-size:12px;padding:4px 10px;border:1px solid var(--line);color:var(--muted)}@media(max-width:900px){.hero{gap:28px}.navlinks{gap:12px}.grid{grid-template-columns:1fr 1fr}.hero h1{font-size:40px}}@media(max-width:600px){.shell{width:calc(100% - 36px)}.nav{gap:10px;padding-block:16px}.nav .button{font-size:12px;padding:10px 12px;min-height:44px}.brand{font-size:18px}.navlinks{display:none}.hero{grid-template-columns:1fr;padding-top:24px;gap:26px}.hero h1{font-size:38px}.hero-photo img{aspect-ratio:3/2}.section{padding-block:40px}.grid,.diagram{grid-template-columns:1fr}.diagram{gap:24px}.diagram figure{display:grid;grid-template-columns:100px 1fr;gap:16px;align-items:center}.diagram svg{height:110px}.cta{padding:28px 20px}.actions{grid-template-columns:1fr}.actions .button{width:100%;min-height:54px}.article-head{padding-top:30px}.article-section{margin-block:38px}.phone{display:none}.mobile-preview{display:block;margin-block:20px}.template{padding:20px}.card{padding:22px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Align each caption with its illustration; preserve mobile side-by-side reading. */
.diagram figcaption{text-align:center;margin-top:12px}
@media(max-width:600px){.diagram figcaption{text-align:left;margin-top:0}}