:root{
  --primary:#476CFF;--primary-50:#F5F8FF;--primary-100:#EDF2FF;--primary-200:#DCE6FF;--primary-700:#2A45C0;
  --g50:#FCFCFD;--g100:#F7F8FA;--g200:#EEF0F4;--g300:#E2E5EC;--g600:#9AA1AD;--g700:#6B7280;
  --red:#E5484D;--amber:#9A6700;--amber-bg:#FFF7E6;--amber-bd:#FCE5A8;--green:#117A55;
  --text:#161A22;--muted:#525A66;--muted-strong:#3A4150;
  --code-bg:#EDF1FB;--code-text:#2A45C0;--line:#E6E9F0;--surface:#fff;
  --sidebar-w:300px;--toc-w:236px;
  --shadow-sm:0 1px 2px rgba(20,26,44,.05);--shadow:0 6px 22px rgba(31,45,90,.10);--shadow-lg:0 14px 40px rgba(31,45,90,.16);
  --radius:14px;--mono:ui-monospace,SFMono-Regular,'JetBrains Mono',Menlo,Consolas,monospace;
  --font:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--g100);line-height:1.68;font-size:15.5px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
::selection{background:var(--primary-200);color:var(--primary-700)}
h1,h2,h3,h4{letter-spacing:-.01em}
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;background:linear-gradient(90deg,var(--primary),#7C93FF);transition:width .08s linear}
/* 사이드바 */
.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh;overflow-y:auto;background:var(--surface);
  border-right:1px solid var(--line);z-index:40}
.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-thumb{background:var(--g300);border-radius:8px;border:2px solid var(--surface)}
.brand{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:11px;padding:18px 18px 15px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.brand:hover{text-decoration:none}
.brand-ico{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;font-size:18px;
  background:linear-gradient(135deg,var(--primary),#6E86FF);border-radius:11px;box-shadow:var(--shadow-sm)}
.brand-t b{display:block;font-size:14.5px;color:var(--text);line-height:1.25}.brand-t small{font-size:11.5px;color:var(--muted)}
.search{position:sticky;top:70px;z-index:2;padding:11px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.search input{width:100%;height:38px;padding:0 12px 0 33px;border:1px solid var(--g300);border-radius:10px;font:inherit;font-size:13px;
  outline:none;background:var(--g50) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="%239AA1AD" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg>') no-repeat 11px center;transition:border-color .15s,box-shadow .15s}
.search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-100);background-color:#fff}
.nav{padding:8px 0 30px}
.nav-group{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--g600);text-transform:uppercase;
  letter-spacing:.05em;padding:16px 18px 5px}
.nav-link{display:flex;align-items:center;gap:9px;margin:1px 10px;padding:7px 10px;border-radius:9px;color:var(--muted-strong);
  font-size:13.2px;line-height:1.35;transition:background .12s,color .12s}
.nav-link:hover{background:var(--g100);color:var(--text);text-decoration:none}
.nav-link .n{flex:none;width:24px;height:22px;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;
  color:var(--g700);background:var(--g100);border:1px solid var(--g200);border-radius:6px}
.nav-link .tt{min-width:0}
.nav-link.active{background:var(--primary-100);color:var(--primary-700);font-weight:700}
.nav-link.active .n{background:var(--primary);color:#fff;border-color:var(--primary)}
.nav-link.hidden{display:none}
/* 본문 레이아웃 */
.main{margin-left:var(--sidebar-w);display:grid;grid-template-columns:minmax(0,1fr) var(--toc-w);gap:34px;
  max-width:1180px;padding:0 40px 120px}
.main-index{display:block;max-width:1080px}
.content{min-width:0;padding-top:8px}
.crumb{font-size:12.5px;color:var(--muted);padding:22px 0 14px}.crumb a{color:var(--muted)}.crumb em{color:var(--muted-strong);font-style:normal;font-weight:600}
.doc-head{padding:0 0 18px;border-bottom:1px solid var(--line);margin-bottom:20px}
.dh-eyebrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.dh-chip{font-size:12px;font-weight:700;color:var(--primary-700);background:var(--primary-100);border-radius:999px;padding:4px 11px}
.dh-src{font-size:11px;color:var(--muted);font-family:var(--mono);background:var(--g100);border:1px solid var(--g200);border-radius:6px;padding:3px 8px}
.doc-head h1{font-size:27px;line-height:1.22;margin:4px 0 0}
.summary{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:13px 16px;background:linear-gradient(135deg,var(--primary-50),#fff);
  border:1px solid var(--primary-200);border-left:4px solid var(--primary);border-radius:10px}
.summary-k{flex:none;font-size:12.5px;font-weight:800;color:var(--primary-700);padding-top:2px}
.summary p{margin:0;color:var(--muted-strong)}
/* 본문 */
.doc{font-size:15.5px}
.doc h2{font-size:20px;margin:34px 0 12px;padding-top:20px;border-top:1px solid var(--g200);scroll-margin-top:16px}
.doc>h2:first-child{border-top:none;padding-top:4px;margin-top:6px}
.doc h3{font-size:16.5px;margin:24px 0 8px;color:var(--muted-strong);scroll-margin-top:16px}
.doc h4{font-size:14.5px;margin:18px 0 6px;color:var(--muted)}
.doc p{margin:11px 0}
.doc ul,.doc ol{margin:11px 0;padding-left:22px}.doc li{margin:5px 0}.doc li::marker{color:var(--primary)}
.doc strong{color:var(--muted-strong);font-weight:700}
.doc a{font-weight:500}
.doc code{background:var(--code-bg);color:var(--code-text);padding:2px 6px;border-radius:5px;font-size:12.5px;font-family:var(--mono)}
.doc code.loc{background:#0E1426;color:#A9C2FF;border:1px solid #243056;padding:2px 7px 2px 20px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="%237FA0FF" stroke-width="2.4"><path d="M9 18l6-6-6-6"/></svg>');background-repeat:no-repeat;background-position:6px center;font-size:11.8px;white-space:nowrap}
.doc pre{position:relative;background:#1b1f30;color:#e6e9f0;padding:18px;border-radius:12px;overflow-x:auto;font-size:13px;line-height:1.62;
  border:1px solid #2b3045;box-shadow:var(--shadow);margin:14px 0}
.doc pre::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),#7C93FF);border-radius:12px 12px 0 0}
.doc pre code{background:none;color:inherit;border:none;padding:0;font-size:13px;white-space:pre}
.doc pre::-webkit-scrollbar{height:9px}.doc pre::-webkit-scrollbar-thumb{background:#3a4060;border-radius:8px}
.doc table{border-collapse:separate;border-spacing:0;width:100%;margin:16px 0;font-size:13.5px;display:block;overflow-x:auto;
  border:1px solid var(--g300);border-radius:10px}
.doc th,.doc td{border-bottom:1px solid var(--g200);border-right:1px solid var(--g200);padding:9px 12px;text-align:left;vertical-align:top}
.doc th:last-child,.doc td:last-child{border-right:none}.doc tbody tr:last-child td{border-bottom:none}
.doc th{background:#EEF2FB;color:var(--muted-strong);font-weight:700;white-space:nowrap}
.doc tbody tr:nth-child(even) td{background:var(--g50)}.doc tbody tr:hover td{background:var(--primary-50)}
.doc hr{border:none;border-top:1px solid var(--g200);margin:26px 0}
.doc img{max-width:100%;border-radius:10px;border:1px solid var(--line)}
/* 콜아웃 */
.cal{display:flex;gap:11px;margin:15px 0;padding:13px 15px;border-radius:11px;border:1px solid var(--line);background:var(--g50)}
.cal .cal-i{flex:none;font-size:15px;line-height:1.5}
.cal .cal-b{min-width:0}.cal .cal-b>:first-child{margin-top:0}.cal .cal-b>:last-child{margin-bottom:0}
.cal.easy{background:#F0FBF4;border-color:#BBE9CB}.cal.easy strong{color:var(--green)}
.cal.warn{background:var(--amber-bg);border-color:var(--amber-bd)}.cal.warn strong{color:var(--amber)}
.cal.ref{background:var(--primary-50);border-color:var(--primary-200)}
.cal.who{background:#F3F0FF;border-color:#E0D7FF}
.cal.file{background:var(--g100);border-color:var(--g200)}.cal.file .cal-b{font-family:var(--mono);font-size:12.5px}
.cal.note{background:var(--primary-50);border-color:var(--primary-200)}
/* 우측 목차 */
.toc{position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto;padding:26px 0 60px}
.toc-h{font-size:11px;font-weight:800;color:var(--g600);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;padding-left:11px}
.toc a{display:block;padding:4px 11px;font-size:12.8px;line-height:1.4;color:var(--muted);border-left:2px solid var(--g200)}
.toc a:hover{color:var(--text);text-decoration:none;border-left-color:var(--g600)}
.toc a.toc-h3{padding-left:22px;font-size:12.3px}
.toc a.active{color:var(--primary-700);font-weight:700;border-left-color:var(--primary);background:var(--primary-50)}
.toc-empty{font-size:12px;color:var(--g600);padding-left:11px}
/* 페이저 */
.pager{display:flex;gap:14px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line)}
.pg{flex:1;display:flex;flex-direction:column;gap:3px;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s,border-color .12s}
.pg:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--primary)}
.pg small{font-size:11.5px;color:var(--muted)}.pg b{font-size:13.5px;color:var(--text)}
.pg.next{text-align:right}
/* index */
.hero{padding:40px 36px;border-radius:var(--radius);background:linear-gradient(135deg,#fff,var(--primary-50));
  border:1px solid var(--line);box-shadow:var(--shadow-sm);margin:30px 0 12px}
.hero-tag{font-size:11.5px;font-weight:800;letter-spacing:.12em;color:var(--primary);background:var(--primary-100);padding:5px 11px;border-radius:999px}
.hero h1{font-size:31px;line-height:1.2;margin:16px 0 10px}
.hero p{color:var(--muted);margin:8px 0;max-width:760px}.hero p b{color:var(--muted-strong)}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}
.cta{padding:10px 16px;border-radius:10px;font-size:13.5px;font-weight:700;background:#fff;color:var(--primary-700);
  border:1px solid var(--primary-200);box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s}
.cta:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow)}
.cta.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.hero-note{font-size:13px}
.cardsec{margin-top:34px}
.cardsec-h{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.cs-ico{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;font-size:19px;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow-sm)}
.cardsec-h h2{font-size:18px;margin:0}.cardsec-h p{margin:2px 0 0;font-size:12.8px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.card{display:flex;gap:12px;padding:14px 15px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);
  transition:transform .12s,box-shadow .12s,border-color .12s}
.card:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--primary)}
.card-no{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
  color:var(--primary-700);background:var(--primary-100);border-radius:8px}
.card-b{min-width:0;display:flex;flex-direction:column;gap:3px}
.card-b b{font-size:14px;color:var(--text);line-height:1.3}
.card-d{font-size:12.3px;color:var(--muted);line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* 떠있는 버튼 */
.top{position:fixed;right:24px;bottom:24px;width:46px;height:46px;border:none;border-radius:50%;background:var(--primary);color:#fff;
  font-size:20px;cursor:pointer;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:45}
.top.show{opacity:1;pointer-events:auto}.top:hover{transform:translateY(-3px)}
.menu-btn{display:none}.scrim{display:none}
/* 반응형 */
@media(max-width:1100px){.main{grid-template-columns:minmax(0,1fr)}.toc{display:none}}
@media(max-width:820px){
  .menu-btn{display:flex;align-items:center;justify-content:center;position:fixed;top:12px;left:12px;z-index:50;width:42px;height:42px;
    border:1px solid var(--line);border-radius:11px;background:#fff;font-size:18px;box-shadow:var(--shadow);cursor:pointer}
  .sidebar{transform:translateX(-100%);transition:transform .22s;box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:none}
  .scrim{display:block;position:fixed;inset:0;background:rgba(10,15,30,.4);opacity:0;pointer-events:none;transition:opacity .22s;z-index:39}
  .scrim.show{opacity:1;pointer-events:auto}
  .main{margin-left:0;padding:0 16px 90px}.crumb{padding-top:60px}
  .hero{padding:26px 20px}.hero h1{font-size:25px}
}
@media print{.sidebar,.toc,.top,.progress,.menu-btn,.pager{display:none}.main{margin:0;grid-template-columns:1fr;max-width:none}
  .doc pre,.card,.pg{box-shadow:none}}

/* ── 프로세스 다이어그램(.flow) — 사용자 매뉴얼 그림 설명 ─────────────────── */
.flow{display:flex;flex-wrap:wrap;gap:18px;align-items:stretch;margin:20px 0}
.flow-step{flex:1;min-width:128px;background:#fff;border:1px solid var(--primary-200);border-radius:12px;
  padding:13px 15px;position:relative;box-shadow:var(--shadow-sm)}
.flow-step .fn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;
  background:var(--primary);color:#fff;font-size:12px;font-weight:800;margin-bottom:7px}
.flow-step b{display:block;color:var(--primary-700);font-size:13.5px;margin-bottom:3px}
.flow-step span{font-size:12.5px;color:var(--muted);line-height:1.5}
.flow-step:not(:last-child)::after{content:"→";position:absolute;right:-15px;top:50%;transform:translateY(-50%);
  color:var(--primary);font-weight:800;font-size:18px;z-index:2}
@media(max-width:640px){.flow{flex-direction:column}
  .flow-step:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-18px;transform:translateX(-50%)}}
/* 세로 단계(.steps) */
.steps{counter-reset:st;margin:18px 0;padding:0;list-style:none}
.steps>li{position:relative;padding:2px 0 16px 40px;margin:0}
.steps>li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:0;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;background:var(--primary-100);color:var(--primary-700);
  font-weight:800;font-size:13px;border-radius:50%}
.steps>li:not(:last-child)::after{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--g200)}
/* 시퀀스 다이어그램(서비스 입장 연동 그림) */
.seqwrap{margin:18px 0;overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff;
  box-shadow:var(--shadow-sm);padding:6px}
.seqwrap svg{display:block;width:100%;min-width:680px;height:auto}
.seqwrap .lane{fill:#fff;stroke:var(--primary-200)}
.seqwrap .lane-t{fill:var(--primary-700);font-weight:800;font-size:13px}
.seqwrap .life{stroke:var(--g300);stroke-width:1.5;stroke-dasharray:4 4}
.seqwrap .msg{stroke:var(--primary);stroke-width:2}
.seqwrap .msg2{stroke:var(--g600);stroke-width:2}
.seqwrap .lbl{fill:var(--muted-strong);font-size:12px}
.seqwrap .lbl b{font-weight:800;fill:var(--primary-700)}
.seqwrap .band{fill:var(--g100)}
.seqwrap .band-t{fill:var(--muted);font-size:11.5px;font-weight:700}
.seqwrap text{font-family:var(--font)}
/* 역할/상태 칩 */
.pill{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;
  background:var(--g100);border:1px solid var(--g200);color:var(--muted-strong)}
.pill.ok{background:#EAF8F1;border-color:#BBE9CB;color:var(--green)}
.pill.no{background:#FFEFEF;border-color:#FAD1D1;color:var(--red)}
.pill.pri{background:var(--primary-100);border-color:var(--primary-200);color:var(--primary-700)}
/* ── 매뉴얼 본문 가로 전체 폭 사용(중앙 max-width 제한 해제) ──────────────────── */
.main{max-width:none}
.main-index{max-width:none}