:root{
  --bg:#fbfbfa; --panel:#ffffff; --ink:#2b2722; --ink-soft:#6b645b;
  --line:#ece8e2; --line-strong:#ddd6cc;
  --brand:#e8612c; --brand-soft:#fff1ea; --brand-ink:#b8431a;
  --tip:#2f7d6b; --tip-bg:#eafaf4; --warn:#c2700a; --warn-bg:#fff6e6;
  --info:#3163c4; --info-bg:#eef3fd;
  --radius:12px; --sidebar-w:288px; --topbar-h:60px;
  --shadow:0 1px 3px rgba(40,30,20,.06),0 8px 28px rgba(40,30,20,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,sans-serif;
  font-size:15.5px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
a{color:var(--brand-ink);text-decoration:none}
a:hover{text-decoration:underline}
img.logo-img{width:26px;height:26px;object-fit:contain;display:block}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;height:var(--topbar-h);
  display:flex;align-items:center;gap:14px;padding:0 18px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16.5px;white-space:nowrap}
.brand a{color:inherit;display:flex;align-items:center;gap:9px}
.brand a:hover{text-decoration:none}
.brand .logo{font-size:22px;line-height:1}
.brand .role{
  margin-left:2px;font-size:12px;font-weight:700;color:var(--brand-ink);
  background:var(--brand-soft);border:1px solid #f6d6c6;padding:3px 9px;border-radius:999px;
}
.topbar .spacer{flex:1}
.search-wrap{position:relative;flex:1;max-width:420px;min-width:0}
.search-input{
  width:100%;height:40px;padding:0 40px 0 38px;border-radius:10px;
  border:1px solid var(--line-strong);background:#fff;color:var(--ink);font-size:14.5px;outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.search-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.5;font-size:15px}
.search-kbd{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  font-size:11px;color:var(--ink-soft);background:#f3f0ea;border:1px solid var(--line-strong);
  border-radius:6px;padding:2px 7px;font-family:ui-monospace,monospace;
}
.menu-btn{display:none;border:1px solid var(--line-strong);background:#fff;border-radius:9px;
  width:38px;height:38px;font-size:18px;cursor:pointer;flex:none}

/* ---------- Search results dropdown ---------- */
.results{
  position:absolute;top:48px;left:0;right:0;background:#fff;border:1px solid var(--line-strong);
  border-radius:12px;box-shadow:var(--shadow);max-height:62vh;overflow:auto;padding:6px;display:none;
}
.results.open{display:block}
.results .empty{padding:18px;color:var(--ink-soft);font-size:14px;text-align:center}
.result{display:block;padding:9px 11px;border-radius:9px;cursor:pointer}
.result:hover,.result.active{background:var(--brand-soft);text-decoration:none}
.result .crumb{font-size:11.5px;color:var(--brand-ink);font-weight:700;margin-bottom:2px}
.result .rtitle{font-size:14.5px;font-weight:600;color:var(--ink)}
.result .snippet{font-size:12.5px;color:var(--ink-soft);margin-top:2px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.result mark,mark.hl{background:#ffe08a;color:inherit;border-radius:3px;padding:0 1px}
.results .rcount{padding:7px 11px 5px;font-size:11.5px;color:var(--ink-soft);font-weight:600}

/* ---------- Layout ---------- */
.layout{display:flex;max-width:1280px;margin:0 auto}
.sidebar{
  width:var(--sidebar-w);flex:none;position:sticky;top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h));overflow:auto;padding:16px 14px 60px;
  border-right:1px solid var(--line);
}
/* role switcher */
.role-switch{display:flex;gap:5px;background:#f3f0ea;border:1px solid var(--line);
  border-radius:11px;padding:4px;margin-bottom:16px}
.role-switch a{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:7px 4px;border-radius:8px;font-size:13px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.role-switch a:hover{background:#fff;text-decoration:none;color:var(--ink)}
.role-switch a.active{background:#fff;color:var(--brand-ink);box-shadow:0 1px 2px rgba(40,30,20,.08)}
.role-switch a .rs-emoji{font-size:14px}

.nav-group{margin-bottom:4px}
.nav-ch{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  padding:8px 11px;border:none;background:none;border-radius:9px;color:var(--ink);
  font-size:14.5px;font-weight:700;font-family:inherit;
}
.nav-ch:hover{background:#f3f0ea}
.nav-ch .ico{font-size:15px;width:18px;text-align:center}
.nav-ch .num{font-size:12px;color:var(--ink-soft);font-weight:700;min-width:16px}
.nav-ch .chev{margin-left:auto;font-size:11px;color:var(--ink-soft);transition:transform .2s}
.nav-group.collapsed .chev{transform:rotate(-90deg)}
.nav-subs{margin:2px 0 6px 30px;display:flex;flex-direction:column;gap:1px;
  border-left:2px solid var(--line);padding-left:8px}
.nav-group.collapsed .nav-subs{display:none}
.nav-sub{
  padding:5px 10px;border-radius:7px;font-size:13.5px;color:var(--ink-soft);cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nav-sub:hover{background:#f3f0ea;color:var(--ink);text-decoration:none}
.nav-sub.active{background:var(--brand-soft);color:var(--brand-ink);font-weight:700}

/* ---------- Content ---------- */
.content{flex:1;min-width:0;padding:34px 46px 120px;max-width:880px}
.doc-hero{margin-bottom:8px}
.doc-hero .eyebrow{font-size:13px;font-weight:700;color:var(--brand-ink);letter-spacing:.02em}
.doc-hero h1{font-size:33px;line-height:1.25;margin:6px 0 10px;letter-spacing:-.01em}
.doc-hero .tagline{color:var(--ink-soft);font-size:16px;margin:0}
.meta-bar{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}
.meta-chip{font-size:12.5px;color:var(--ink-soft);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.meta-chip b{color:var(--ink)}
.related{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;font-size:13.5px;color:var(--ink-soft)}
.related .pill{border:1px solid var(--line-strong);border-radius:8px;padding:4px 11px;background:#fff;color:var(--ink)}
.related a.pill:hover{border-color:var(--brand);color:var(--brand-ink);text-decoration:none}
.related .pill.soon{opacity:.6}
.related .pill.soon::after{content:" · 준비중";font-size:11px}
.divider{border:none;border-top:1px solid var(--line);margin:30px 0}

.chapter{margin-top:46px;scroll-margin-top:78px}
.chapter > h2{
  font-size:24px;display:flex;align-items:center;gap:10px;margin:0 0 4px;
  padding-bottom:12px;border-bottom:2px solid var(--line);flex-wrap:wrap;
}
.chapter > h2 .cnum{font-size:14px;font-weight:800;color:#fff;background:var(--brand);
  border-radius:8px;padding:2px 9px;letter-spacing:.02em}
.section{margin-top:30px;scroll-margin-top:78px}
.section > h3{font-size:18.5px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.section > h3::before{content:"";width:5px;height:18px;background:var(--brand);border-radius:3px;display:inline-block;flex:none}
.section h4{font-size:15px;margin:18px 0 6px;color:var(--ink)}
.section h4.warn-h{color:var(--warn)}
.section p{margin:10px 0}
.section ul,.section ol{margin:10px 0;padding-left:22px}
.section li{margin:5px 0}
.section code{background:#f3f0ea;border:1px solid var(--line);border-radius:5px;
  padding:1px 6px;font-size:13px;font-family:ui-monospace,"D2Coding",monospace;word-break:break-all}

/* callouts */
.callout{display:flex;gap:11px;border-radius:var(--radius);padding:13px 15px;margin:14px 0;
  border:1px solid var(--line);background:var(--panel);font-size:14.5px}
.callout__ico{font-size:18px;line-height:1.4;flex:none}
.callout--tip{background:var(--tip-bg);border-color:#bfe7da}
.callout--warn{background:var(--warn-bg);border-color:#f3dca6}
.callout--info{background:var(--info-bg);border-color:#cdddf7}

/* tables */
.table-scroll{overflow-x:auto;margin:14px 0;-webkit-overflow-scrolling:touch}
.cf-table{width:100%;border-collapse:collapse;font-size:13.8px;
  border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;min-width:480px}
.cf-table th,.cf-table td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  padding:9px 12px;text-align:left;vertical-align:top}
.cf-table th{background:#f6f3ee;font-weight:700;font-size:13px}
.cf-table tr:last-child td{border-bottom:none}
.cf-table th:last-child,.cf-table td:last-child{border-right:none}
.cf-table td.y{color:var(--tip);font-weight:700;text-align:center}
.cf-table td.n{color:#c25b5b;text-align:center}

/* screenshot placeholder + real image */
.shot{margin:14px 0;border:1.5px dashed var(--line-strong);border-radius:10px;
  background:repeating-linear-gradient(45deg,#faf8f4,#faf8f4 10px,#f4f0e9 10px,#f4f0e9 20px);
  color:var(--ink-soft);font-size:13.5px;padding:18px;text-align:center}
.shot-img{display:block;max-width:100%;height:auto;margin:14px 0;border:1px solid var(--line-strong);
  border-radius:10px;box-shadow:var(--shadow)}
pre.code{background:#2b2722;color:#f4efe9;border-radius:10px;padding:14px 16px;
  overflow:auto;font-size:13px;line-height:1.6;margin:14px 0}
pre.code code{background:none;border:none;color:inherit;padding:0;font-family:ui-monospace,"D2Coding",monospace}

/* flow */
.flow{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:14px 0}
.flow span{background:var(--brand-soft);border:1px solid #f6d6c6;color:var(--brand-ink);
  border-radius:9px;padding:8px 12px;font-size:13px;font-weight:600;text-align:center;line-height:1.35}
.flow span em{font-style:normal;font-weight:400;font-size:11px;opacity:.8}
.flow i{color:var(--ink-soft);font-style:normal;font-weight:700}

/* anatomy / dl */
.anatomy dt{font-weight:800;margin-top:16px;color:var(--brand-ink)}
.anatomy dd{margin:4px 0 0;padding-left:0}

/* faq */
.faq{border:1px solid var(--line-strong);border-radius:10px;margin:10px 0;background:#fff;overflow:hidden}
.faq summary{cursor:pointer;padding:13px 16px;font-weight:700;font-size:15px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"▸";margin-right:9px;color:var(--brand);font-size:13px}
.faq[open] summary::before{content:"▾"}
.faq[open] summary{border-bottom:1px solid var(--line)}
.faq > div{padding:13px 16px;color:var(--ink-soft);font-size:14.5px}

/* flash highlight on jump */
.section.flash > h3, .chapter.flash > h2{animation:flash 1.6s ease}
@keyframes flash{0%,40%{background:var(--brand-soft)}100%{background:transparent}}

.footer{margin-top:60px;padding-top:22px;border-top:1px solid var(--line);
  color:var(--ink-soft);font-size:13px}

/* back to top */
.totop{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-strong);background:#fff;box-shadow:var(--shadow);cursor:pointer;
  font-size:18px;display:none;z-index:30}
.totop.show{display:block}

/* scrim for mobile sidebar */
.scrim{display:none;position:fixed;inset:var(--topbar-h) 0 0 0;background:rgba(20,15,10,.32);z-index:35}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  :root{--sidebar-w:248px}
  .content{padding:30px 34px 110px}
  .doc-hero h1{font-size:30px}
}
@media (max-width:900px){
  .menu-btn{display:block}
  .search-kbd{display:none}
  .sidebar{position:fixed;left:0;top:var(--topbar-h);z-index:36;background:var(--panel);
    transform:translateX(-100%);transition:transform .22s;width:86vw;max-width:330px;box-shadow:var(--shadow)}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .scrim{display:block}
  .content{padding:26px 26px 100px}
  .doc-hero h1{font-size:27px}
  .brand{font-size:15px}
}
@media (max-width:600px){
  body{font-size:15px}
  .topbar{gap:9px;padding:0 12px}
  .brand span.brand-text{display:none}            /* 좁으면 로고만 */
  .brand .role{display:none}
  .search-wrap{max-width:none}
  .search-input{font-size:14px}
  .content{padding:20px 16px 90px}
  .doc-hero h1{font-size:23px}
  .doc-hero .tagline{font-size:14.5px}
  .chapter>h2{font-size:21px}
  .section>h3{font-size:17px}
  .flow{flex-direction:column;align-items:stretch}
  .flow i{transform:rotate(90deg)}
  .totop{right:14px;bottom:14px}
}

/* ============ LANDING (index.html) ============ */
.landing{max-width:880px;margin:0 auto;padding:64px 24px 100px;text-align:center}
.landing .hero-logo{font-size:64px;line-height:1;margin-bottom:6px}
.landing .hero-logo img{width:74px;height:74px;object-fit:contain;display:inline-block}
.landing h1{font-size:36px;margin:8px 0 8px;letter-spacing:-.01em}
.landing .sub{color:var(--ink-soft);font-size:17px;margin:0 auto 44px;max-width:560px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
.gcard{display:block;background:#fff;border:1px solid var(--line-strong);border-radius:16px;
  padding:26px 22px;transition:transform .15s,box-shadow .15s,border-color .15s}
.gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--brand);text-decoration:none}
.gcard .gemoji{font-size:34px}
.gcard h3{margin:14px 0 6px;font-size:20px;color:var(--ink)}
.gcard p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.6}
.gcard .go{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:700;color:var(--brand-ink)}
.landing .foot{margin-top:50px;color:var(--ink-soft);font-size:13px}
@media (max-width:720px){
  .cards{grid-template-columns:1fr}
  .landing{padding:44px 18px 80px}
  .landing h1{font-size:29px}
}