/* 가이드 페이지 전용 — shell.css 다음에 읽는다 */
/* 가이드는 읽는 글이라 본문 폭을 좁게 쓴다. 셸 기본값 1120px을 덮는다.
   레일 위치 계산도 이 값(820px)을 전제로 한다. */
.wrap{max-width:820px}

/* ── 히어로 ── */
.hero{background:linear-gradient(180deg,#032644 0%,#053b63 100%);color:#fff;
  padding:clamp(44px,8vw,72px) 0}
.hero h1{font-size:clamp(27px,5.4vw,40px);font-weight:800;line-height:1.28;
  letter-spacing:-.035em;margin-bottom:16px}
.hero p{color:#C3D2DF;font-size:clamp(16px,2vw,18px);margin-bottom:22px}
.hero .badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.hero .badges span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-pill);padding:6px 14px;font-size:14.5px;color:#E6EEF6;font-weight:600}
.hero .btns{display:flex;flex-wrap:wrap;gap:10px}
/* 네이비 히어로 위에서는 ghost 테두리를 흰색으로 */
.hero .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}

/* ── 섹션 ── */
.section{padding:clamp(40px,7vw,64px) 0;border-bottom:1px solid var(--line)}
/* ".sec-toc" 는 색인 카드 한 장뿐이라 아래 여백을 절반만 준다.
   0 으로 두면 다음 섹션과 68px 로 붙어 다른 섹션 간격(129~151)과 어긋난다. */
.sec-toc{padding-bottom:clamp(18px,3vw,34px);border-bottom:0}
.section-soft{background:var(--surface)}
.section-muted{background:var(--accent-weak)}
.section h2{font-size:clamp(25px,4.6vw,36px);font-weight:700;line-height:1.28;
  letter-spacing:-.035em;margin-bottom:8px}
.section .lead{color:var(--ink-soft);font-size:18px;font-weight:500;line-height:1.6;margin-bottom:24px}
.section h3{margin:32px 0 10px;font-size:20px;font-weight:800;line-height:1.4;letter-spacing:-.02em}
.section p{margin-bottom:15px}

/* ── 표 ── */
/* table에 overflow:hidden을 걸면 caption이 잘린다. 셀 테두리가 이미 면을 만든다. */
table{width:100%;border-collapse:collapse;margin:20px 0;font-size:16.5px;
  background:var(--surface)}
caption{caption-side:top;text-align:left;font-size:15px;font-weight:600;color:var(--ink-soft);padding:0 0 10px}
/* 세로 테두리를 지우고 가로줄만 남긴다. 격자 표가 이 사이트에서 가장 각진 자리였다. */
th,td{border:0;border-bottom:1px solid var(--line);padding:15px 16px;
  text-align:left;vertical-align:top;line-height:1.72}
thead th{background:var(--bg);border-bottom:2px solid var(--line);font-weight:700;white-space:nowrap}
tbody th{background:transparent;font-weight:700;color:var(--ink);white-space:normal}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td.step{text-align:center;white-space:nowrap;font-weight:800;color:var(--accent);width:64px}
.scroll{overflow-x:auto}

/* main 으로 스코프한다. 전역으로 두면 헤더 .nav(ul)·.nav>li 의 margin 까지
   건드려 flex 중앙 정렬이 어긋난다. 실제로 메뉴가 13px 위로 밀려 있었다. */
main ul,main ol{padding-left:24px;margin-bottom:17px}
main li{margin-bottom:9px;line-height:1.72}
.note{background:var(--accent-weak);border-left:4px solid var(--accent);
  padding:18px 20px;border-radius:0 var(--r-card) var(--r-card) 0;margin:22px 0;font-size:16.5px;line-height:1.7}

/* ── FAQ ── */
details{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);margin-bottom:10px}
details summary{cursor:pointer;padding:19px 21px;font-weight:700;font-size:17.5px;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";float:right;color:var(--accent);font-weight:700;font-size:22px;line-height:1}
details[open] summary::after{content:"−"}
details .a{padding:0 21px 20px;color:var(--ink-soft);font-size:16.5px;line-height:1.72}

/* ── CTA · 푸터 ── */
.cta{background:var(--accent-weak);padding:clamp(40px,7vw,60px) 0;text-align:center;border:0}
.cta h2{font-size:clamp(21px,4vw,28px);margin-bottom:12px;letter-spacing:-.035em}
.cta p{color:var(--ink-soft);margin-bottom:24px}
.cta .btns{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.cta .btn-ghost{border-color:var(--ink);color:var(--ink)}

.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.links a{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:11px 17px;text-decoration:none;font-size:15px;font-weight:600;color:var(--ink)}
.links a:hover{border-color:var(--accent);background:var(--accent-weak)}


/* ── 떠 있는 색인 (데스크톱) ── */
.toc-rail{display:none}
@media(min-width:1280px){
  .toc-rail{display:block;position:fixed;left:max(14px,calc((100vw - 820px)/2 - 214px));
    /* 가시성을 트랜지션에 걸지 않는다. 트랜지션이 시작 값에서 멈추는 환경이 있어
       레일이 영영 안 보이게 된다(2026-09-11 실측). 즉시 전환한다. */
    visibility:hidden;pointer-events:none;
    top:50%;transform:translateY(-50%);width:200px;z-index:40;
    max-height:74vh;overflow-y:auto;overscroll-behavior:contain}
  .toc-rail ol{list-style:none;margin:0;padding:0;counter-reset:rail;
    border-left:2px solid var(--line)}
  .toc-rail li{counter-increment:rail;margin:0}
  .toc-rail a{display:block;padding:7px 0 7px 13px;margin-left:-2px;
    border-left:2px solid transparent;
    color:var(--ink-soft);text-decoration:none;font-size:13.5px;font-weight:600;
    line-height:1.45;transition:color .15s,border-color .15s}
  .toc-rail a:hover{color:var(--ink)}
  .toc-rail a.on{color:var(--accent);border-left-color:var(--accent);font-weight:700}
  /* 전체폭 히어로 위에 겹치지 않게, 지나간 뒤에만 띄운다 */
  .toc-rail.show{visibility:visible;pointer-events:auto}
  .toc-rail-head{font-size:11.5px;font-weight:800;letter-spacing:.04em;
    color:var(--ink-soft);margin-bottom:10px;padding-left:13px}
}
/* 상단 카드 색인은 넓은 화면에서도 남긴다. 레일은 JS로 뜨기 때문에
   JS가 죽으면 색인이 하나도 없게 되는 상황을 만들지 않는다. */

@media(max-width:720px){
  body{font-size:16px}
  .nav{display:none}
  .hd-cta{margin-left:auto}
  th,td{padding:13px 13px;font-size:15.5px}
  .fab{right:16px;bottom:16px;height:50px;padding:0 18px;font-size:15px}
}

/* ── 색인 ── */
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px 22px;margin:24px 0 4px}
.toc h2{font-size:16px!important;font-weight:700;margin-bottom:12px;letter-spacing:-.02em;color:var(--ink-soft)}
.toc ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:2px 18px}
.toc li{margin:0;counter-increment:toc}
.toc a{display:flex;gap:9px;align-items:baseline;padding:8px 2px;
  text-decoration:none;color:var(--ink);font-size:15.5px;font-weight:600;border-radius:8px}
.toc a::before{content:counter(toc,decimal-leading-zero);color:var(--accent);
  font-size:13px;font-weight:800;flex:none;font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--accent)}
.toc ol{counter-reset:toc}

/* 색인에서 넘어왔을 때 고정 헤더에 제목이 가리지 않게 */
.section[id]{scroll-margin-top:86px}

/* ── 매뉴얼 이미지 ── */
figure{margin:22px 0}
figure img{display:block;width:100%;border:1px solid var(--line);border-radius:var(--r-card)}
figcaption{margin-top:10px;font-size:14.5px;color:var(--ink-soft);line-height:1.7}
.figrow{display:grid;gap:16px}
@media(min-width:900px){.figrow{grid-template-columns:1fr 1fr}}

@media(max-width:600px){
  .toc ol{grid-template-columns:1fr}
}

/* ── 본문 내부링크 = 아이콘 형태 ── */
.go{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;
  padding:8px 15px 8px 12px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink);text-decoration:none;
  font-size:15.5px;font-weight:700;line-height:1.25;margin:3px 6px 3px 0}
.go:hover{border-color:var(--accent);background:var(--accent-weak);color:var(--accent)}
.ref{display:inline-flex;align-items:baseline;gap:5px;color:var(--accent);
  font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--accent-weak)}
.ref:hover{border-bottom-color:var(--accent)}
.go::before,.ref::before{content:'';flex:none;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.go::before{width:18px;height:18px}
.ref::before{width:14px;height:14px;align-self:center}
td .go,th .go{margin:2px 0}
.links a{display:inline-flex;align-items:center;gap:8px}
.links a::before{content:'';flex:none;width:17px;height:17px;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.i-usim{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M9%204v16M3%2012h6M14%209h4M14%2014h4%22%2F%3E%3C%2Fsvg%3E")}
.i-plans{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M4%2012h16M4%2018h10%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E")}
.i-steps{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%2212%22%20height%3D%2220%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M10%205h4M12%2018.5v.01%22%2F%3E%3C%2Fsvg%3E")}
.i-app{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E")}
.i-esim{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%208v6m0%200-2.5-2.5M12%2014l2.5-2.5%22%2F%3E%3C%2Fsvg%3E")}
.i-transfer{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208h13l-3-3M20%2016H7l3%203%22%2F%3E%3C%2Fsvg%3E")}
.i-blocked{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%202.5%2020h19L12%203z%22%2F%3E%3Cpath%20d%3D%22M12%2010v4M12%2017.5v.01%22%2F%3E%3C%2Fsvg%3E")}
.i-visit{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s7-6.2%207-11a7%207%200%201%200-14%200c0%204.8%207%2011%207%2011z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.6%22%2F%3E%3C%2Fsvg%3E")}
.i-faq{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M9.2%209.3a2.9%202.9%200%201%201%203.6%203.5v1.4M12.4%2017.6v.01%22%2F%3E%3C%2Fsvg%3E")}
.i-guide{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204.5A2%202%200%200%201%206%203h13v16H6a2%202%200%200%200-2%202V4.5z%22%2F%3E%3Cpath%20d%3D%22M8%207.5h7M8%2011h7%22%2F%3E%3C%2Fsvg%3E")}
.i-chat{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a8%208%200%201%201-3.2-6.4%22%2F%3E%3Cpath%20d%3D%22M3.5%2020.5%205%2016%22%2F%3E%3Cpath%20d%3D%22M8.5%2012v.01M12%2012v.01M15.5%2012v.01%22%2F%3E%3C%2Fsvg%3E")}
.i-out{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%204h6v6M20%204l-8.5%208.5%22%2F%3E%3Cpath%20d%3D%22M18%2014v5a1.5%201.5%200%200%201-1.5%201.5h-11A1.5%201.5%200%200%201%204%2019V8a1.5%201.5%200%200%201%201.5-1.5H10%22%2F%3E%3C%2Fsvg%3E")}
.i-open{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%2212%22%20height%3D%2220%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M9.5%2012.2l1.8%201.8%203.4-3.6%22%2F%3E%3C%2Fsvg%3E")}