:root{
  --bg:#ffffff; --fg:#1b1a22; --muted:#5c5870; --border:#e6e2ef;
  --accent:#8661c5;        /* Copilot purple */
  --accent-2:#5b7cf6;      /* blue */
  --accent-ink:#5a3fa0;
  --accent-weak:#f4f0fc;
  --grad:linear-gradient(120deg,#8661c5 0%,#6a5be0 45%,#4f8ef7 100%);
  --grad-soft:linear-gradient(120deg,#f6f1ff 0%,#eef3ff 100%);
  --code-bg:#f7f6fb; --sidebar-bg:#faf9fd;
  --card-bg:#ffffff; --card-alt:#fcfbfe; --topbar-bg:rgba(255,255,255,.86); --mermaid-bg:#ffffff;
  --sidebar-w:290px; --toc-w:230px; --topbar-h:58px;
  --note:#5b7cf6; --tip:#1a7f4b; --important:#8661c5; --warning:#b8860b; --caution:#d23b53;
  --shadow:0 1px 2px rgba(30,20,60,.06),0 6px 20px rgba(30,20,60,.06);
}
[data-theme="dark"]{
  --bg:#15131c; --fg:#e7e3f2; --muted:#a49fb8; --border:#312b43;
  --accent:#a98ce0; --accent-2:#7fa0ff; --accent-ink:#c3aaf0; --accent-weak:#241d38;
  --grad:linear-gradient(120deg,#a98ce0 0%,#8a7ef0 45%,#6fa0ff 100%);
  --grad-soft:linear-gradient(120deg,#26203a 0%,#1e2540 100%);
  --code-bg:#1d1930; --sidebar-bg:#171422;
  --card-bg:#1b1826; --card-alt:#1f1b2e; --topbar-bg:rgba(21,19,28,.86); --mermaid-bg:#1b1826;
  --note:#7fa0ff; --tip:#4cc38a; --important:#a98ce0; --warning:#e0b352; --caution:#f0788c;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;scroll-behavior:smooth;}
body{
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif;
  color:var(--fg); background:var(--bg); line-height:1.72; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-ink); text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:50; height:var(--topbar-h);
  display:flex; align-items:center; gap:14px; padding:0 20px;
  background:var(--topbar-bg); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:10px; font-size:16px; color:var(--fg);}
.brand:hover{text-decoration:none;}
.brand-mark{font-size:20px;}
.brand-text b{color:var(--accent-ink); font-weight:700;}
.brand-text{font-weight:600;}
.topbar .gh{margin-left:auto; font-size:13.5px; color:var(--muted); border:1px solid var(--border); padding:5px 12px; border-radius:20px;}
.topbar .gh:hover{border-color:var(--accent); color:var(--accent-ink); text-decoration:none;}
.theme-btn{margin-left:auto; background:none; border:1px solid var(--border); border-radius:20px; width:36px; height:32px; cursor:pointer; font-size:15px; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:border-color .12s, background .12s;}
.theme-btn:hover{border-color:var(--accent); background:var(--accent-weak);}
#menuBtn{display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--fg);}

/* ---------- layout ---------- */
.layout{display:flex; align-items:flex-start; max-width:none; margin:0;}
.sidebar{
  width:var(--sidebar-w); flex:none; position:sticky; top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h)); overflow-y:auto;
  background:var(--sidebar-bg); border-right:1px solid var(--border); padding:20px 12px 48px;
}
.nav-group{margin-bottom:20px;}
.nav-part{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--muted); padding:4px 10px; margin-bottom:3px;}
.nav-ico{font-size:13px;}
.sidebar ul{list-style:none; margin:0; padding:0;}
.sidebar li a{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; border-radius:8px; color:var(--fg); font-size:14.5px; transition:background .12s;}
.sidebar li a:hover{background:var(--accent-weak); text-decoration:none;}
.sidebar li a.active{background:var(--grad); color:#fff; font-weight:600; box-shadow:var(--shadow);}
.sidebar li a.active .nav-time{color:rgba(255,255,255,.85);}
.nav-time{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums;}
.sidebar li a.nav-subitem{padding-left:22px; font-size:13.5px; color:var(--muted); justify-content:flex-start;}
.sidebar li a.nav-subitem .nav-time{margin-left:auto;}
.sidebar li a.nav-subitem::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.5; margin-right:2px; flex:0 0 auto;}
.sidebar li a.nav-subitem.active{color:#fff;}
.sidebar li a.nav-subitem.active::before{background:#fff; opacity:.9;}

/* ---------- content ---------- */
.content{flex:1; min-width:0; max-width:1000px; margin:0 auto; padding:26px 54px 60px;}
.crumb{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); margin:2px 0 18px;}
.crumb .sep{opacity:.6;}
.crumb-part{font-weight:600; color:var(--accent-ink);}
.crumb-time{margin-left:auto; background:var(--accent-weak); color:var(--accent-ink); padding:2px 10px; border-radius:20px; font-weight:600; font-size:12px;}

.markdown-body{overflow-wrap:break-word;}
.markdown-body h1{font-size:31px; font-weight:700; line-height:1.3; margin:.1em 0 .7em; padding-bottom:.4em; border-bottom:3px solid transparent; border-image:var(--grad) 1;}
.markdown-body h2{font-size:22px; font-weight:700; margin:1.7em 0 .5em; padding-bottom:.25em; border-bottom:1px solid var(--border); scroll-margin-top:72px; position:relative;}
.markdown-body h3{font-size:18px; font-weight:700; margin:1.4em 0 .4em; scroll-margin-top:72px; position:relative;}
.markdown-body h4{font-size:15.5px; font-weight:700; margin:1.1em 0 .3em;}
.markdown-body h2 .anchor,.markdown-body h3 .anchor{position:absolute; left:-1.1em; color:var(--border); opacity:0; text-decoration:none; font-weight:400;}
.markdown-body h2:hover .anchor,.markdown-body h3:hover .anchor{opacity:1; color:var(--accent);}
.markdown-body p{margin:.7em 0;}
.markdown-body ul,.markdown-body ol{padding-left:1.5em; margin:.6em 0;}
.markdown-body li{margin:.28em 0;}
.markdown-body li::marker{color:var(--accent);}
.markdown-body hr{border:none; border-top:1px solid var(--border); margin:1.9em 0;}
.markdown-body img{max-width:100%; height:auto; border-radius:10px; border:1px solid var(--border); margin:.6em 0; box-shadow:var(--shadow);}
.markdown-body video{max-width:100%; height:auto; border-radius:10px; border:1px solid var(--border); margin:.6em 0; box-shadow:var(--shadow); display:block; background:#000;}
.markdown-body .img-row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start; margin:.6em 0;}
.markdown-body .img-row img{flex:1 1 0; min-width:240px; width:100%; margin:0;}
.markdown-body blockquote{margin:.8em 0; padding:.3em 1.1em; border-left:4px solid var(--accent); background:var(--accent-weak); border-radius:0 8px 8px 0; color:var(--fg);}
.markdown-body blockquote p{margin:.35em 0;}
.markdown-body code{background:var(--code-bg); padding:.14em .42em; border-radius:6px; font-size:.87em; font-family:'Cascadia Code',Consolas,monospace; color:var(--accent-ink);}
.markdown-body pre{background:var(--code-bg); border:1px solid var(--border); border-radius:10px; padding:15px 17px; overflow-x:auto; margin:.95em 0; box-shadow:var(--shadow);}
.markdown-body pre code{background:none; padding:0; color:var(--fg); font-size:13.5px; line-height:1.55;}
.markdown-body pre.mermaid{background:var(--mermaid-bg); text-align:center; padding:20px;}

/* tables */
.markdown-body .table-wrap{margin:1.1em 0; overflow-x:auto; border:1px solid var(--border); border-radius:10px;}
.markdown-body table{border-collapse:separate; border-spacing:0; width:100%; font-size:14.5px; display:table; table-layout:auto;}
.markdown-body .table-wrap table{margin:0;}
.markdown-body th,.markdown-body td{border-bottom:1px solid var(--border); border-right:1px solid var(--border); padding:9px 13px; text-align:left; vertical-align:top;}
.markdown-body tr td:last-child,.markdown-body tr th:last-child{border-right:none;}
.markdown-body tbody tr:last-child td{border-bottom:none;}
.markdown-body thead th{background:var(--grad-soft); font-weight:700; color:var(--accent-ink); position:sticky; top:0;}
.markdown-body tbody tr:nth-child(even){background:var(--card-alt);}
.markdown-body tbody tr:hover{background:var(--accent-weak);}

/* callouts */
.callout{border:1px solid var(--border); border-left-width:5px; border-radius:10px; padding:13px 17px; margin:1.1em 0; background:var(--card-alt); box-shadow:var(--shadow);}
.callout-title{display:flex; align-items:center; gap:7px; font-weight:700; margin-bottom:5px; font-size:14px;}
.callout-ico{font-size:14px;}
.callout p:first-of-type{margin-top:0;} .callout p:last-child{margin-bottom:0;}
.callout ul{margin:.3em 0;}
.callout-note{border-left-color:var(--note);} .callout-note .callout-title{color:var(--note);}
.callout-tip{border-left-color:var(--tip);} .callout-tip .callout-title{color:var(--tip);}
.callout-important{border-left-color:var(--important); background:var(--accent-weak);} .callout-important .callout-title{color:var(--important);}
.callout-warning{border-left-color:var(--warning);} .callout-warning .callout-title{color:var(--warning);}
.callout-caution{border-left-color:var(--caution);} .callout-caution .callout-title{color:var(--caution);}

/* prompt box */
.prompt-box{margin:1.1em 0; border:1px solid var(--border); border-radius:11px; overflow:hidden; background:var(--code-bg); box-shadow:var(--shadow);}
.prompt-row{display:flex; align-items:flex-start; gap:10px; padding:11px 13px;}
.prompt-row + .prompt-row{border-top:1px dashed var(--border);}
.prompt-row-en{background:color-mix(in srgb, var(--accent) 6%, transparent);}
.prompt-lang{flex:0 0 auto; font-size:15px; line-height:1.5; user-select:none;}
.prompt-text{flex:1 1 auto; min-width:0; line-height:1.6; word-break:break-word;}
code.prompt-text{font-family:'Cascadia Code',ui-monospace,SFMono-Regular,Consolas,monospace; font-size:13.5px; color:var(--accent-ink); background:transparent; padding:0;}
.prompt-note{color:var(--muted); font-size:13px; font-style:italic;}
.prompt-copy{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:1px solid var(--border); border-radius:7px; background:var(--card-bg); color:var(--muted); cursor:pointer; transition:all .12s;}
.prompt-copy:hover{color:var(--accent); border-color:var(--accent); background:var(--accent-weak);}
.prompt-copy.copied{color:var(--tip); border-color:var(--tip);}
.prompt-copy svg{display:block;}

/* prev/next */
.prevnext{display:flex; gap:16px; margin:34px 0 0;}
.pn{flex:1; display:flex; flex-direction:column; gap:3px; padding:14px 18px; border:1px solid var(--border); border-radius:12px; background:var(--card-bg); box-shadow:var(--shadow); transition:transform .12s,border-color .12s;}
.pn:hover{text-decoration:none; border-color:var(--accent); transform:translateY(-2px);}
.pn-next{align-items:flex-end; text-align:right;}
.pn-dir{font-size:12px; color:var(--muted); font-weight:600;}
.pn-label{font-size:15px; font-weight:700; color:var(--accent-ink);}
.pn-empty{flex:1; visibility:hidden;}

.pagefoot{margin-top:46px; padding-top:18px; border-top:1px solid var(--border); color:var(--muted); font-size:13px;}

/* ---------- right TOC ---------- */
.toc{width:var(--toc-w); flex:none; position:sticky; top:var(--topbar-h); height:calc(100vh - var(--topbar-h)); overflow-y:auto; padding:28px 18px 40px;}
.toc-title{font-size:12px; font-weight:700; color:var(--muted); margin-bottom:8px; letter-spacing:.02em;}
.toc ul{list-style:none; margin:0; padding:0; border-left:2px solid var(--border);}
.toc li{margin:0;}
.toc li a{display:block; padding:4px 0 4px 12px; margin-left:-2px; border-left:2px solid transparent; color:var(--muted); font-size:13px; line-height:1.4;}
.toc li a:hover{color:var(--accent-ink); text-decoration:none;}
.toc li a.active{color:var(--accent-ink); border-left-color:var(--accent); font-weight:600;}
.toc .toc-l3 a{padding-left:24px; font-size:12.5px;}

/* ---------- HOME hero & cards ---------- */
.is-home .toc{display:none;}
.is-home .content{max-width:1240px;}
/* 히어로: 보라 박스 없이 타이포 중심의 미니멀 배너 */
.is-home .markdown-body > div[align="center"]:first-of-type{
  text-align:left; padding:14px 0 22px; margin:4px 0 26px;
  word-break:keep-all; overflow-wrap:break-word;
}
.is-home .markdown-body > div[align="center"]:first-of-type h1{
  border:none; padding:0; margin:0 0 .35em;
  font-size:38px; line-height:1.22; font-weight:750; letter-spacing:-.02em; color:var(--fg);
  word-break:keep-all;
}
/* 서브타이틀 = 문단 전체가 굵은 글씨인 경우만(only-child) 큰 그라디언트 블록 */
.is-home .markdown-body > div[align="center"]:first-of-type p > strong:only-child{
  display:block; font-size:20px; font-weight:700; margin:0 0 4px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--accent-ink);
  word-break:keep-all;
}
/* 본문 안 인라인 강조는 평범한 굵은 글씨로 */
.is-home .markdown-body > div[align="center"]:first-of-type p strong{
  font-weight:700; color:var(--fg);
}
.is-home .markdown-body > div[align="center"]:first-of-type p{
  color:var(--muted); font-size:15px; line-height:1.75; max-width:none; margin:12px 0 0;
  word-break:keep-all;
}
.is-home .markdown-body > div[align="center"]:first-of-type p:has(> strong:only-child){margin:0; max-width:none; white-space:nowrap;}
.is-home .markdown-body > div[align="center"]:first-of-type em{color:var(--accent-ink); font-style:normal; font-weight:600;}
.is-home .markdown-body > div[align="center"]:first-of-type a{color:var(--accent-ink); font-weight:700;}
/* 하단 가운데 정렬 CTA(시작하기) */
.is-home .markdown-body > div[align="center"]:last-of-type{
  text-align:center; background:var(--grad-soft); color:var(--fg); box-shadow:var(--shadow);
  padding:22px 26px; border:1px solid var(--border); border-radius:14px; margin-top:8px;
}
.is-home .markdown-body > div[align="center"]:last-of-type strong{color:var(--fg); font-size:16px;}
.is-home .markdown-body > div[align="center"]:last-of-type a{color:var(--accent-ink); font-weight:700;}
.is-home .markdown-body h2{border-bottom:none; font-size:21px; display:inline-block; padding:2px 0; background:none;}
.is-home .markdown-body h2::after{content:''; display:block; height:3px; width:44px; margin-top:6px; background:var(--grad); border-radius:3px;}
/* 홈 코스 표를 카드처럼 (헤더에 '소요' 있는 표만) */
.is-home .markdown-body table.cards{border:none; border-radius:0; box-shadow:none;}
.is-home .markdown-body table.cards thead{display:none;}
.is-home .markdown-body table.cards,.is-home .markdown-body table.cards tbody,.is-home .markdown-body table.cards tr{display:block;}
.is-home .markdown-body table.cards tbody{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px;}
.is-home .markdown-body table.cards tbody tr{border:1px solid var(--border); border-radius:14px; padding:6px 4px; background:var(--card-bg); box-shadow:var(--shadow); transition:transform .12s,border-color .12s;}
.is-home .markdown-body table.cards tbody tr:hover{transform:translateY(-3px); border-color:var(--accent); background:var(--card-bg);}
.is-home .markdown-body table.cards td{display:block; border:none; padding:6px 16px;}
.is-home .markdown-body table.cards td:first-child{font-size:16px; font-weight:700; padding-top:14px;}
.is-home .markdown-body table.cards td:first-child a{color:var(--accent-ink);}
.is-home .markdown-body table.cards td:nth-child(2){color:var(--muted); font-size:13.5px;}
.is-home .markdown-body table.cards td:nth-child(3){color:var(--accent); font-weight:700; font-size:12.5px; padding-bottom:14px;}
.is-home .markdown-body table.cards td:nth-child(3)::before{content:'⏱️ '; }

/* responsive */
@media (max-width:1180px){ .toc{display:none;} }
@media (max-width:900px){
  #menuBtn{display:block;}
  .sidebar{position:fixed; left:0; top:var(--topbar-h); transform:translateX(-100%); transition:transform .2s; z-index:40; box-shadow:2px 0 16px rgba(0,0,0,.1);}
  .sidebar.open{transform:translateX(0);}
  .content{padding:20px 18px 50px;}
  .prevnext{flex-direction:column;}
  .is-home .markdown-body > div[align="center"]:first-of-type p:has(> strong:only-child){white-space:normal;}
  .is-home .markdown-body > div[align="center"]:first-of-type h1{font-size:30px;}
}