/* Alphamyu 도움말 — 문서형 레이아웃: 본문 가독성 우선 (Minimalism / Swiss) */
:root{
  --bg:#fff; --surface:#f8fafc; --fg:#1e293b; --muted:#475569; --line:#e2e8f0; --line-strong:#cbd5e1;
  --link:#1d4ed8; --brand:#f83295; --chip:#eef2f7;
  --active-bg:#dbeafe; --active-fg:#1e3a8a;
  --point-bg:#eff6ff; --point-bar:#2563eb; --warn-bg:#fff7ed; --warn-bar:#c2410c;
  --font:"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo","Nanum Gothic",system-ui,sans-serif;
  --nav-w:220px; --measure:52rem; --text:46rem;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f172a; --surface:#111b31; --fg:#e5eaf3; --muted:#aab4c6; --line:#25324a; --line-strong:#3a4a68;
  --link:#8fb4ff; --chip:#1b2845; --active-bg:#1e3a8a; --active-fg:#fff;
  --point-bg:#10244d; --point-bar:#6ea0ff; --warn-bg:#35200d; --warn-bar:#fb923c;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:15px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1rem/1.8 var(--font);
  display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);word-break:keep-all;overflow-wrap:break-word}
a{color:var(--link);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--point-bar);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--fg);color:var(--bg);padding:10px 14px;border-radius:8px;transition:top .15s}
.skip:focus{top:12px}

/* ── 목차 ───────────────────────── */
#nav{position:sticky;top:0;height:100vh;overflow:auto;background:var(--surface);border-right:1px solid var(--line);
  padding:12px 8px 40px;font-size:13px;line-height:1.45;overscroll-behavior:contain}
#nav .brand{display:block;margin:2px 8px 10px;font-size:15px;font-weight:700;color:var(--fg);text-decoration:none}
#nav input{width:100%;min-height:36px;padding:6px 10px;margin:0 0 6px;border:1px solid var(--line-strong);border-radius:8px;
  background:var(--bg);color:var(--fg);font:inherit}
#nav input::placeholder{color:var(--muted)}
#nav h4{margin:14px 8px 4px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
#nav details{margin:2px 0}
#nav summary{cursor:pointer;min-height:34px;display:flex;align-items:center;padding:4px 8px;border-radius:8px;font-weight:500;list-style-position:inside}
#nav summary:hover,#nav a:hover{background:var(--chip)}
#nav a{display:block;min-height:30px;padding:5px 8px 5px 14px;border-radius:8px;color:var(--fg);text-decoration:none;
  border-left:3px solid transparent;transition:background-color .15s}
#nav a.d1{padding-left:24px;color:var(--muted)}
#nav a.d2{padding-left:34px;color:var(--muted)}
#nav a[aria-current]{background:var(--active-bg);color:var(--active-fg);border-left-color:var(--point-bar);font-weight:700}
#navbtn{display:none}

/* ── 본문 ───────────────────────── */
main{min-width:0;padding:28px clamp(20px,3.5vw,64px) 72px;outline:0}
#crumb{max-width:var(--measure);font-size:.85rem;color:var(--muted);margin:0 0 6px}
.doc,#pager,footer{max-width:var(--measure)}
.doc>:first-child{margin-top:0}
.doc h2{margin:.2em 0 .7em;padding-bottom:.4em;font-size:1.5rem;line-height:1.4;font-weight:700;border-bottom:3px solid var(--brand)}
.doc h3{margin:2.2em 0 .7em;padding-left:.7em;border-left:5px solid var(--point-bar);font-size:1.25rem;line-height:1.45;font-weight:700}
.doc h4{margin:1.8em 0 .5em;font-size:1.05rem;font-weight:700}
.doc p,.doc ul,.defs,.callout,.doc h3,.doc h4{max-width:var(--text)}
.doc p{margin:0 0 1em}
.doc .lead{font-size:1.1rem;color:var(--muted);margin-bottom:1.3em}
.doc hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.doc img{max-width:100%;height:auto}
.doc img.icon{vertical-align:-.2em;margin:0 .15em}
.doc h2 img.icon{vertical-align:middle;margin-left:.3em}
.doc figure{margin:1.1em 0}
.doc figure.shot{padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:10px;width:fit-content;max-width:100%;overflow-x:auto}
.doc figure.shot img{display:block;cursor:zoom-in}
.doc figure.shot.zoomed{width:100%}
.doc figure.shot.zoomed img{width:100%;max-width:none;cursor:zoom-out;image-rendering:auto}
.doc figure.video video{display:block;width:100%;max-width:100%;aspect-ratio:725/550;background:#000;border-radius:10px;object-fit:contain}

/* 목록 / 용어 정의 */
.doc ul{margin:0 0 1.2em;padding:0;list-style:none}
.doc li{position:relative;margin:0 0 .6em;padding-left:1.35em}
.doc li::before{content:"";position:absolute;left:.3em;top:.78em;width:.42em;height:.42em;border-radius:50%;background:var(--point-bar)}
.defs{margin:0 0 1.4em;border-top:1px solid var(--line)}
.def{display:grid;grid-template-columns:minmax(7.5em,max-content) minmax(0,1fr);gap:.2em 1.1em;padding:.7em .2em;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
a.def:hover{background:var(--chip)}
.def .k{font-weight:700;color:var(--fg)}
a.def .k{color:var(--link)}
.def .d{min-width:0}
a.def .d{color:var(--fg)}

/* 주석 · 단계 · 이동 링크 */
.doc p.note{position:relative;padding-left:1.5em;font-size:.95rem;color:var(--muted)}
.doc p.note::before{content:"※";position:absolute;left:0;top:0;font-weight:700}
.doc p.step{padding:.3em 0 .3em .9em;border-left:3px solid var(--line-strong)}
.doc p.more{margin:.2em 0 1.1em}
.doc p.more a{display:inline-flex;align-items:center;gap:.4em;min-height:40px;padding:6px 14px;border:1px solid var(--line-strong);border-radius:999px;text-decoration:none;font-weight:500;transition:background-color .15s}
.doc p.more a::after{content:"→"}
.doc p.more a:hover{background:var(--chip)}

/* 콜아웃: 색 + 제목 라벨(색만으로 구분하지 않음) */
.callout{margin:1.4em 0;padding:.9em 1.1em;border-left:5px solid var(--point-bar);border-radius:8px;background:var(--point-bg)}
.callout.warn{border-left-color:var(--warn-bar);background:var(--warn-bg)}
.callout-title{margin-bottom:.35em;font-size:.82rem;font-weight:700;letter-spacing:.06em;color:var(--point-bar)}
.callout.warn .callout-title{color:var(--warn-bar)}
.callout p:last-child{margin-bottom:0}
.tablewrap{overflow-x:auto;margin:1.2em 0}
.doc table{border-collapse:collapse}
.doc td,.doc th{border:1px solid var(--line-strong);padding:8px 12px}

/* 이전 / 다음 */
#pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line)}
#pager a{display:block;min-height:64px;padding:12px 16px;border:1px solid var(--line-strong);border-radius:10px;color:var(--fg);text-decoration:none;transition:background-color .15s}
#pager a:hover{background:var(--chip)}
#pager small{display:block;color:var(--muted);font-size:.8rem}
#pager .next{text-align:right;grid-column:2}
footer{margin-top:2.5rem;color:var(--muted);font-size:.8rem}

/* ── 좁은 화면 ───────────────────── */
@media (max-width:900px){
  html{font-size:16px}
  body{display:block}
  #navbtn{display:flex;align-items:center;position:sticky;top:0;z-index:10;width:100%;min-height:48px;padding:0 16px;border:0;border-bottom:1px solid var(--line);
    background:var(--surface);color:var(--fg);font:500 15px var(--font);cursor:pointer}
  #navbtn::after{content:"▾";margin-left:auto}
  #nav{display:none;position:static;height:auto;max-height:75vh;border-right:0;border-bottom:1px solid var(--line)}
  body.nav-open #nav{display:block}
  #nav{font-size:15px}
  #nav a{min-height:44px;display:flex;align-items:center}
  main{padding:20px 16px 56px}
  .doc h2{font-size:1.45rem}
  .def{grid-template-columns:1fr}
  #pager{grid-template-columns:1fr}
  #pager .next{grid-column:1}
}
@media print{#nav,#navbtn,#pager,.skip{display:none}body{display:block}.doc{max-width:none}}