:root{
  --paper:#f6f0e2; --paper2:#efe6d2; --ink:#23262e; --ink2:#666a76;
  --line:#d9cdb2; --orange:#e07b12; --btc:#f7931a;
  --good:#2c7a4b; --goodbg:#e8f2e9; --warnln:#bc4326; --warnbg:#f9e9e2;
  --srcbl:#3a6ea5; --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;
  background:
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(120,100,60,.045) 31px 32px),
    radial-gradient(1200px 500px at 80% -10%,#fdf8ec 0%,var(--paper) 60%);
  color:var(--ink); line-height:1.62; min-height:100dvh;
}
#app{max-width:680px;margin:0 auto;padding:0 20px 120px}

/* ── 상단 진행 바 ─────────────────────────── */
#top{
  position:sticky;top:0;z-index:9;background:rgba(246,240,226,.93);
  backdrop-filter:blur(6px);margin:0 -20px;padding:12px 20px 10px;
  border-bottom:1px solid var(--line);
}
#top .row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#brand{font:700 11px/1 var(--mono);letter-spacing:.18em;color:var(--orange)}
#where{font:700 12px/1 var(--mono);color:var(--ink2)}
#bar{height:4px;background:var(--paper2);border-radius:2px;margin-top:9px;overflow:hidden}
#bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--btc));
  border-radius:2px;transition:width .35s cubic-bezier(.6,0,.2,1)}

/* ── 화면 공통 ───────────────────────────── */
.step{display:none;position:relative;padding-top:30px}
.step.on{display:block;animation:rise .4s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ghost{
  position:absolute;top:-8px;right:-6px;font:900 150px/1 var(--mono);
  color:rgba(224,123,18,.09);user-select:none;pointer-events:none;letter-spacing:-.05em;
}
.kicker{font:700 11px/1 var(--mono);letter-spacing:.22em;color:var(--orange)}
.step h2{font-size:24px;line-height:1.3;letter-spacing:-.02em;margin:8px 0 4px;font-weight:800}
.step header{position:relative;margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid var(--ink)}

.body>*{margin-bottom:16px}
.body p{font-size:15.5px}
.body strong{font-weight:800}
.body code{
  font:600 13px/1 var(--mono);background:var(--paper2);border:1px solid var(--line);
  border-radius:5px;padding:2px 6px;word-break:break-all;
}
h3{font-size:17px;font-weight:800;margin-top:24px}
ol{padding-left:6px;counter-reset:n;list-style:none}
ol>li{counter-increment:n;display:flex;gap:12px;margin-bottom:12px;font-size:15.5px;flex-wrap:wrap}
ol>li::before{
  content:counter(n);flex:0 0 26px;height:26px;border-radius:50%;
  background:var(--ink);color:var(--paper);font:800 13px/26px var(--mono);text-align:center;
}
ol>li>span{flex:1;min-width:200px}
ol>li>ul{flex-basis:100%;padding-left:38px;margin-top:4px}
ul{padding-left:20px}
ul li{margin-bottom:7px;font-size:15.5px;word-break:keep-all}

/* 기기 메뉴 경로 — LCD 화면풍 */
.device{
  background:#16181d;border-radius:10px;padding:14px 16px;display:flex;flex-wrap:wrap;
  gap:6px 4px;align-items:center;border:1px solid #000;
  box-shadow:inset 0 0 18px rgba(247,147,26,.07),0 2px 0 rgba(0,0,0,.15);
}
.device span{font:700 13px/1.5 var(--mono);color:#ffc46b}
.device .arrow{color:#6b5b3e;padding:0 3px}

/* LCD 화면 목업 */
.lcds{display:flex;flex-direction:column;align-items:center;gap:7px;margin:18px 0}
.lcd{
  background:#16181d;border:1px solid #000;border-radius:12px;width:min(280px,100%);
  padding:12px 13px 13px;
  box-shadow:inset 0 0 18px rgba(247,147,26,.06),0 2px 0 rgba(0,0,0,.15);
}
.lcd-title{font:800 12px/1 var(--mono);color:#f0e6d2;text-align:center;letter-spacing:.06em;
  border-bottom:1px solid #2c2f37;padding-bottom:9px;margin-bottom:8px}
.lcd ul{list-style:none;padding:0;margin:0}
.lcd li{font:600 12.5px/1.5 var(--mono);color:#9aa0ac;padding:5px 9px;border-radius:6px;
  margin-bottom:2px;word-break:break-all}
.lcd li.sel{background:var(--btc);color:#16181d;font-weight:800}
.lcd li.more{color:#565b66;text-align:center}
.lcd-arrow{color:var(--orange);font-size:15px;font-weight:800;line-height:1}

/* 콜아웃 */
.callout{border-radius:10px;padding:14px 16px 13px;border-left:5px solid;position:relative}
.callout-tag{font:800 13px/1 var(--mono);letter-spacing:.12em;display:block;margin-bottom:6px}
.callout p{font-size:14.5px}
.callout.warn{background:var(--warnbg);border-color:var(--warnln)}
.callout.warn .callout-tag{color:var(--warnln)}
.callout.good{background:var(--goodbg);border-color:var(--good)}
.callout.good .callout-tag{color:var(--good)}
.callout.note{background:var(--paper2);border-color:var(--ink2)}
.callout.note .callout-tag{color:var(--ink2)}

/* 표 */
table{width:100%;border-collapse:collapse;font-size:14px;background:#fffdf7;border:1px solid var(--line)}
th{font:800 11.5px/1.4 var(--mono);letter-spacing:.08em;text-align:left;
  background:var(--ink);color:var(--paper);padding:9px 12px}
td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}

/* 사진/플레이스홀더 */
.shot{margin:18px 0}
.shot img{width:100%;border-radius:10px;border:1px solid var(--line);display:block;cursor:zoom-in}
.shot figcaption{font:600 12px/1.5 var(--mono);color:var(--ink2);margin-top:6px;text-align:center}

/* 라이트박스 */
#lb{
  display:none;position:fixed;inset:0;z-index:30;
  background:rgba(0,0,0,.92);cursor:zoom-out;
  align-items:center;justify-content:center;
}
#lb.on{display:flex}
#lb img{max-width:100%;max-height:100%;object-fit:contain;touch-action:pinch-zoom}
.todo-frame{
  border:2px dashed var(--line);border-radius:10px;aspect-ratio:16/9;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink2);
  background:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(120,100,60,.05) 14px 28px);
}
.todo-cam{font-size:26px}
.todo-frame span{font-weight:700;font-size:13.5px}
.todo-frame small{font-size:12px;padding:0 16px;text-align:center}

/* 체크리스트 */
.checks{list-style:none;padding:0}
.checks li{margin-bottom:10px}
.checks label{
  display:flex;gap:12px;align-items:flex-start;background:#fffdf7;border:1.5px solid var(--line);
  border-radius:10px;padding:13px 14px;cursor:pointer;transition:.18s;font-size:15px;
}
.checks input{display:none}
.checks i{
  flex:0 0 26px;height:26px;border:2.5px solid var(--ink);border-radius:7px;position:relative;
  background:#fff;transition:.18s;margin-top:1px;
}
.checks input:checked+i{background:var(--good);border-color:var(--good)}
.checks input:checked+i::after{
  content:"";position:absolute;left:7px;top:2.5px;width:6px;height:12px;
  border:solid #fff;border-width:0 3px 3px 0;transform:rotate(42deg);
}
.checks input:checked~span{color:var(--ink2)}
.checks label:active{transform:scale(.985)}

.sub-label{
  font:700 12px/1 inherit;color:var(--ink2);
  border-top:1px solid var(--line);padding-top:14px;margin-top:6px;margin-bottom:12px;
}

pre{font:600 13px/1.6 var(--mono);background:var(--paper2);border:1px solid var(--line);
  border-radius:8px;padding:12px 14px;overflow-x:auto}

/* ── 커버 ───────────────────────────────── */
#cover{display:none;padding-top:46px;text-align:left}
#cover.on{display:block;animation:rise .4s both}
#cover .docid{font:800 12px/1 var(--mono);letter-spacing:.3em;color:var(--orange);
  border:2px solid var(--orange);border-radius:6px;display:inline-block;padding:6px 10px;transform:rotate(-2deg)}
#cover h1{font-size:34px;line-height:1.22;letter-spacing:-.03em;font-weight:900;margin:22px 0 6px}
#cover .sub{font-size:17px;font-weight:700;color:var(--orange);margin-bottom:22px}
#cover .intro>*{margin-bottom:14px}
#cover .intro p{font-size:15.5px}
#cover .intro strong{background:linear-gradient(transparent 62%,rgba(247,147,26,.35) 62%)}
#start{
  margin-top:18px;
  width:100%;border:none;background:var(--ink);color:var(--paper);font:800 17px/1 inherit;
  padding:18px;border-radius:12px;cursor:pointer;letter-spacing:.02em;
  box-shadow:0 4px 0 rgba(35,38,46,.35);transition:.15s;
  font-family:inherit;
}
#start:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(35,38,46,.35)}
#start small{display:block;font:700 11px/1 var(--mono);color:var(--btc);
  letter-spacing:.18em;margin-top:6px}

/* ── 하단 내비 ───────────────────────────── */
#nav{
  position:fixed;left:0;right:0;bottom:0;z-index:9;display:none;
  background:rgba(246,240,226,.95);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);padding:12px 20px calc(12px + env(safe-area-inset-bottom));
}
#nav .in{max-width:680px;margin:0 auto;display:flex;gap:10px}
#nav button{
  border:2px solid var(--ink);border-radius:11px;font:800 15px/1.2 inherit;cursor:pointer;
  padding:13px 16px;transition:.15s;font-family:inherit;
}
#nav button:active{transform:scale(.97)}
#prev{background:transparent;color:var(--ink);flex:0 0 auto}
#next{background:var(--ink);color:var(--paper);flex:1}
#next small{display:block;font:700 10.5px/1 var(--mono);color:var(--btc);letter-spacing:.14em;margin-top:4px}
#nav button:disabled{opacity:.35;cursor:default}
@media(min-width:700px){
  .step h2{font-size:28px} #cover h1{font-size:42px} .ghost{font-size:200px}
}