:root{
  --ink:#0e1a2b; --ink-2:#3d5169; --ink-3:#68798f;
  --bg:#f4f7fa; --card:#ffffff; --line:#dfe7f0;
  --brand:#0b5d66; --brand-2:#0e7c86; --brand-soft:#e6f2f3;
  --amber:#b9761a; --amber-soft:#fdf3e3;
  --red:#a8322b; --red-soft:#fbeceb;
  --r:16px; --shadow:0 1px 2px rgba(14,26,43,.05),0 8px 24px -12px rgba(14,26,43,.16);
  --fs:1;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Segoe UI",Roboto,sans-serif;
  font-size:calc(16.5px * var(--fs)); line-height:1.72; letter-spacing:-.01em;
  word-break:keep-all; overflow-wrap:break-word;
}
h1,h2,h3,h4{line-height:1.35; letter-spacing:-.025em; margin:0}
p{margin:0 0 .9em}
a{color:var(--brand-2)}
strong{font-weight:700}
.wrap{max-width:940px; margin:0 auto; padding:0 18px}

/* ---------- HERO ───────── */
header.hero{
  position:relative; color:#eaf3f4; overflow:hidden;
  background:
    radial-gradient(120% 120% at 88% -10%, #12727d 0%, rgba(11,93,102,0) 55%),
    radial-gradient(90% 90% at 0% 0%, #10323c 0%, rgba(11,93,102,0) 60%),
    linear-gradient(170deg,#0a2b33 0%,#0b4b54 55%,#0b5d66 100%);
}
header .wrap{padding-top:38px; padding-bottom:34px}
.kicker{
  display:inline-flex; align-items:center; gap:.5em; font-size:.76em; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:#8fd3d8; margin-bottom:14px;
}
.kicker::before{content:""; width:26px; height:2px; background:#8fd3d8; border-radius:2px}
h1{font-size:calc(1.72em * var(--fs)); font-weight:800; color:#fff; margin-bottom:.5em}
h1 .thin{display:block; font-weight:500; font-size:.56em; color:#a9d3d7; margin-bottom:.55em; letter-spacing:-.01em}
.lede{color:#cbe5e7; font-size:.98em; max-width:36em; margin-bottom:22px}
.chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 18px; padding:0}
.chips li{
  font-size:.78em; font-weight:600; padding:7px 12px; border-radius:999px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18); color:#dcf0f1;
}
.chips li b{color:#ffd79a; font-weight:700}
.hero-note{
  font-size:.82em; color:#a9cdd1; border-left:2px solid rgba(143,211,216,.5); padding-left:12px;
}

/* font size control */
.fsctl{position:absolute; top:18px; right:18px; display:flex; gap:6px; align-items:center}
.fsctl span{font-size:.66em; color:#8fb9be; letter-spacing:.08em}
.fsctl button{
  font:inherit; font-size:.72em; font-weight:700; color:#dff0f1; cursor:pointer;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  border-radius:8px; padding:4px 9px; line-height:1.4;
}
.fsctl button:active{background:rgba(255,255,255,.22)}

/* ---------- SECTIONS ───────── */
main{padding:34px 0 10px}
section{margin-bottom:34px}
.sec-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.num{
  flex:0 0 auto; font-size:.72em; font-weight:800; letter-spacing:.06em;
  color:#fff; background:var(--brand); border-radius:7px; padding:3px 8px; transform:translateY(-2px);
}
h2{font-size:calc(1.22em * var(--fs)); font-weight:800}
.art{
  font-size:.72em; font-weight:700; color:var(--brand); background:var(--brand-soft);
  border-radius:6px; padding:2px 7px; letter-spacing:0;
}
.sec-sub{color:var(--ink-2); font-size:.93em; margin:6px 0 18px; max-width:44em}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 20px; box-shadow:var(--shadow);
}
.card + .card{margin-top:12px}
.card h3{font-size:calc(1.02em * var(--fs)); font-weight:750; margin-bottom:.45em}
.card h4{font-size:.95em; font-weight:700; margin-bottom:.3em}
.card p:last-child{margin-bottom:0}
.muted{color:var(--ink-3); font-size:.88em}

.grid{display:grid; gap:12px}
@media(min-width:640px){ .grid.two{grid-template-columns:1fr 1fr} }

/* callout */
.note{
  border-radius:12px; padding:14px 16px; font-size:.9em; border:1px solid; margin:14px 0 0;
  display:flex; gap:11px; align-items:flex-start;
}
.note .ico{flex:0 0 auto; font-weight:800; font-size:.9em; line-height:1.5}
.note.warn{background:var(--amber-soft); border-color:#f0d9b2; color:#6b4712}
.note.warn .ico{color:var(--amber)}
.note.info{background:var(--brand-soft); border-color:#c9e3e5; color:#0a4950}
.note.info .ico{color:var(--brand)}
.note.stop{background:var(--red-soft); border-color:#f2cfcc; color:#7c2721}
.note.stop .ico{color:var(--red)}
.note b{font-weight:750}

/* step list */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:10px; counter-reset:s}
@media(min-width:760px){ .steps{grid-template-columns:1fr 1fr} }
.steps li{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:16px 16px 16px 58px; box-shadow:var(--shadow); counter-increment:s;
}
.steps li::before{
  content:counter(s); position:absolute; left:16px; top:15px;
  width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
  background:var(--brand); color:#fff; font-weight:800; font-size:.85em;
}
.steps b{display:block; font-size:.99em; margin-bottom:.15em}
.steps span{display:block; font-size:.86em; color:var(--ink-2); line-height:1.6}

/* timeline */
.tl{position:relative; margin:0; padding:0 0 0 30px; list-style:none}
.tl::before{content:""; position:absolute; left:9px; top:8px; bottom:12px; width:2px; background:linear-gradient(#bfd6dc,#e3ecf2)}
.tl li{position:relative; padding-bottom:18px}
.tl li:last-child{padding-bottom:0}
.tl li::before{
  content:""; position:absolute; left:-26px; top:7px; width:12px; height:12px; border-radius:50%;
  background:#fff; border:3px solid var(--brand);
}
.tl li.hot::before{border-color:var(--amber)}
.tl h4{font-size:.98em; font-weight:750; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.tl h4 em{font-style:normal; font-size:.82em; font-weight:700; color:var(--brand); background:var(--brand-soft); padding:1px 7px; border-radius:5px}
.tl p{font-size:.88em; color:var(--ink-2); margin:.25em 0 0}

/* table */
.tw{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; border:1px solid var(--line); background:var(--card)}
table{border-collapse:collapse; width:100%; font-size:.85em; min-width:520px}
caption{caption-side:top; text-align:left; font-size:.82em; color:var(--ink-3); padding:10px 14px 8px}
th,td{padding:11px 13px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
thead th{background:#eff4f8; color:var(--ink-2); font-size:.92em; font-weight:750; white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td b{font-weight:700}
td .tick{color:var(--brand); font-weight:800}
td .cross{color:var(--red); font-weight:800}

/* accordion */
.faq{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line); background:var(--card)}
details:first-of-type{border-top:0}
summary{
  cursor:pointer; list-style:none; padding:16px 44px 16px 0; position:relative;
  font-weight:700; font-size:.96em; display:block; color:var(--ink);
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:1.15em; font-weight:500; color:var(--brand); transition:transform .18s ease;
}
details[open] summary::after{content:"–"; transform:translateY(-50%)}
details[open] summary{color:var(--brand)}
.ans{padding:0 0 18px; font-size:.9em; color:var(--ink-2)}
.ans p:last-child{margin-bottom:0}
.ans .src{display:inline-block; font-size:.82em; font-weight:700; color:var(--brand); background:var(--brand-soft); border-radius:5px; padding:1px 6px; margin-right:4px}

/* checklist */
.chk{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.chk li{
  position:relative; padding:12px 14px 12px 40px; background:var(--card);
  border:1px solid var(--line); border-radius:11px; font-size:.9em; box-shadow:var(--shadow);
}
.chk li::before{
  content:""; position:absolute; left:14px; top:15px; width:13px; height:13px;
  border:2px solid #b3c4d4; border-radius:4px;
}
.chk li span{display:block; font-size:.86em; color:var(--ink-3); margin-top:.15em}

footer{border-top:1px solid var(--line); margin-top:12px; padding:26px 0 44px; background:#eff4f8}
footer .wrap{font-size:.82em; color:var(--ink-2)}
footer h3{font-size:.98em; font-weight:750; margin-bottom:.6em; color:var(--ink)}
footer dl{margin:0 0 14px; display:grid; gap:6px}
footer dl div{display:flex; gap:10px; flex-wrap:wrap}
footer dt{flex:0 0 6.2em; color:var(--ink-3); font-weight:600}
footer dd{margin:0; flex:1 1 12em}
.disclaim{font-size:.94em; color:var(--ink-3); border-top:1px dashed #c9d6e2; padding-top:12px; margin-top:4px}
.backtop{display:inline-block; margin-top:10px; font-weight:700; text-decoration:none}

/* ---------- PRINT ───────── */
@media print{
  @page{margin:14mm}
  body{background:#fff; font-size:11pt; --fs:1}
  header.hero{background:#0b5d66 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .fsctl,.backtop{display:none !important}
  .card,.steps li,.chk li,.tl li,.tw{box-shadow:none !important}
  details{border-bottom:1px solid #dfe7f0}
  summary::after{display:none}
  section,.card,.steps li,.tl li,.chk li{break-inside:avoid; page-break-inside:avoid}
  h2{break-after:avoid}
  footer{background:#fff}
}