/* 안내서 공용 — 밝은 종이 위에 실제 앱 화면(어두운 캡처)을 올린다 */
:root{
  --bg:#f6f8fa; --card:#fff; --soft:#eef2f6; --line:#dde4ec; --line2:#c8d3e0;
  --txt:#151a21; --sub:#48545f; --dim:#6b7784;
  --key:#0a7d51; --key-bg:#e3f5ed; --key-ln:#b9e3d1;
  --warn:#8a5606; --warn-bg:#fdf2e0; --warn-ln:#f0d6a8;
  --blue:#1a5aa8; --blue-bg:#e6eefb; --blue-ln:#c3d6f0;
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--txt);
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Malgun Gothic",sans-serif;
  font-size:17px;line-height:1.8;word-break:keep-all;overflow-wrap:anywhere;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:800px;margin:0 auto;padding:30px 20px 80px}

/* 표지 */
.cover{text-align:center;padding:10px 0 26px}
.cover .ic{font-size:50px;line-height:1}
.cover h1{font-size:32px;font-weight:900;margin:12px 0 8px;letter-spacing:-.03em;line-height:1.3}
.cover p{margin:0;color:var(--sub);font-size:16px}
.cover .who{
  display:inline-block;margin-top:14px;background:var(--key);color:#fff;
  border-radius:999px;padding:7px 18px;font-size:14px;font-weight:800;
}
.cover .who.t{background:var(--blue)}

/* 목차 */
.toc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;margin-bottom:28px}
.toc h2{font-size:14px;margin:0 0 9px;color:var(--dim);font-weight:800}
.toc ol{margin:0;padding-left:22px}
.toc li{padding:3px 0;font-weight:700}
.toc a{color:var(--txt);text-decoration:none}
.toc a:hover{color:var(--key);text-decoration:underline}

/* 장 */
.ch{margin:0 0 44px;scroll-margin-top:16px}
.ch>h2{
  font-size:24px;font-weight:900;margin:0 0 8px;letter-spacing:-.02em;
  display:flex;align-items:center;gap:10px;line-height:1.35;
}
.ch>h2 .n{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--key);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;
}
.ch.t>h2 .n{background:var(--blue)}
.ch>.lead{color:var(--sub);margin:0 0 18px;font-size:16px}

.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:12px}
.step h3{font-size:19px;font-weight:800;margin:0 0 10px;line-height:1.45}
.step p{margin:0 0 9px}
.step p:last-child{margin-bottom:0}
.step ul,.step ol{margin:9px 0 0;padding-left:21px}
.step li{padding:3px 0}

/* 실제 화면 */
figure{margin:16px 0 0;text-align:center}
figure img{
  max-width:100%;width:auto;display:block;margin:0 auto;
  border-radius:16px;border:1px solid var(--line2);
  box-shadow:0 12px 28px -14px rgba(20,30,45,.35);
}
figure img.narrow{max-width:300px}
figure img.mid{max-width:360px}
figure img.wide{max-width:430px}
figcaption{
  margin-top:10px;font-size:13.5px;color:var(--dim);line-height:1.6;
}
figcaption b{color:var(--key)}
.two{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.two figure{margin:0;flex:1 1 240px;max-width:300px}

/* 강조 */
.tip,.warn,.note{border-radius:var(--r);padding:15px 18px;margin:14px 0 0;font-size:15.5px;line-height:1.7}
.tip{background:var(--key-bg);border:1px solid var(--key-ln)}
.tip b{color:var(--key)}
.warn{background:var(--warn-bg);border:1px solid var(--warn-ln)}
.warn b{color:var(--warn)}
.note{background:var(--blue-bg);border:1px solid var(--blue-ln)}
.note b{color:var(--blue)}

.btn{display:inline-block;background:var(--key);color:#fff;border-radius:9px;padding:3px 11px;font-size:15px;font-weight:800;white-space:nowrap}
.btn.g{background:var(--soft);color:var(--txt);border:1px solid var(--line2)}

/* 문답 */
.qa{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;margin-bottom:10px}
.qa h4{margin:0 0 7px;font-size:17px;font-weight:800;line-height:1.5}
.qa h4:before{content:"Q. ";color:var(--key)}
.qa p{margin:0 0 6px;color:var(--sub);font-size:15.5px}
.qa p:last-child{margin-bottom:0}
.qa p:first-of-type:before{content:"A. ";color:var(--dim);font-weight:800}

table{width:100%;border-collapse:collapse;margin-top:14px;font-size:15.5px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
th,td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--soft);font-weight:800;font-size:14.5px;white-space:nowrap}
tr:last-child td{border-bottom:0}

.foot{text-align:center;color:var(--dim);font-size:14px;margin-top:46px;line-height:1.9}
.foot .big{font-size:17px;color:var(--txt);font-weight:800;margin-bottom:4px}
.foot a{color:var(--key)}

/* 갈림길 카드 */
.pick{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.pick a{
  flex:1 1 260px;background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:26px 24px;text-decoration:none;color:var(--txt);display:block;
  transition:border-color .15s, transform .15s;
}
.pick a:hover{border-color:var(--key);transform:translateY(-2px)}
.pick .ic{font-size:38px;line-height:1;display:block;margin-bottom:12px}
.pick b{display:block;font-size:21px;font-weight:900;margin-bottom:6px}
.pick s{text-decoration:none;display:block;font-size:14.5px;color:var(--sub);line-height:1.65}
.pick .go{display:inline-block;margin-top:14px;color:var(--key);font-weight:800;font-size:15px}
.pick a.t:hover{border-color:var(--blue)}
.pick a.t .go{color:var(--blue)}

@media (max-width:520px){
  body{font-size:16px}
  .wrap{padding:24px 15px 60px}
  .cover h1{font-size:26px}
  .ch>h2{font-size:21px}
  .step{padding:17px 16px}
  .step h3{font-size:17.5px}
  .two{gap:10px}
  .two figure{flex:1 1 100%;max-width:100%}
}
@media print{
  body{background:#fff}
  figure img{box-shadow:none;max-width:280px}
  .ch{break-inside:avoid}
}