/* ============ Swift Concurrency 강의 · 공유 디자인 ============ */
:root{
  --bg:#0d1117; --bg2:#161b22; --bg3:#1c2230; --border:#2b3440;
  --text:#e6edf3; --muted:#9aa7b4; --faint:#6e7b8a;
  --accent:#58a6ff; --core:#f0a35e; --tail:#7ee0c0; --done:#3fb950; --review:#bd8cff;
  --shadow:rgba(0,0,0,.35);
  /* syntax */
  --t-kw:#ff7b72; --t-type:#79c0ff; --t-str:#a5d6ff; --t-cmt:#7d8893; --t-attr:#d2a8ff; --t-num:#f0a35e;
  /* diagram */
  --d-line:#3a4654; --d-fill:#1c2230; --d-fill2:#222b3a;
}
[data-theme="light"]{
  --bg:#f6f8fa; --bg2:#ffffff; --bg3:#f0f3f7; --border:#d8dee4;
  --text:#1f2328; --muted:#57606a; --faint:#8b949e;
  --accent:#0969da; --core:#bc4c00; --tail:#1a7f64; --done:#1a7f37; --review:#8250df;
  --shadow:rgba(140,149,159,.2);
  --t-kw:#cf222e; --t-type:#0550ae; --t-str:#0a3069; --t-cmt:#6e7781; --t-attr:#8250df; --t-num:#953800;
  --d-line:#c2cbd6; --d-fill:#f0f3f7; --d-fill2:#e8edf3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  line-height:1.72; -webkit-font-smoothing:antialiased;}
a{color:var(--accent); text-decoration:none} a:hover{text-decoration:underline}
code{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; font-size:.86em;
  background:var(--bg3); padding:.12em .42em; border-radius:5px; border:1px solid var(--border)}

/* reading progress */
#readbar{position:fixed; top:0; left:0; height:3px; width:0; background:var(--accent); z-index:60; transition:width .1s}

/* topbar */
.lnav{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.lnav .in{max-width:1080px; margin:0 auto; padding:11px 22px; display:flex; align-items:center; gap:14px}
.lnav a.back{font-weight:600; font-size:14px; color:var(--muted)}
.lnav a.back:hover{color:var(--accent); text-decoration:none}
.lnav .pos{font-variant-numeric:tabular-nums; font-size:13px; color:var(--faint); font-weight:700}
.lnav .sp{flex:1}
.iconbtn{cursor:pointer; background:var(--bg2); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:6px 11px; font-size:13px; font-weight:600}
.iconbtn:hover{border-color:var(--accent)}

/* layout */
.shell{max-width:1080px; margin:0 auto; padding:0 22px; display:grid; grid-template-columns:1fr 220px; gap:38px}
@media(max-width:900px){.shell{grid-template-columns:1fr; gap:0}}
main.lesson{min-width:0; padding:34px 0 90px; max-width:760px}

/* hero */
.l-head{border-bottom:1px solid var(--border); padding-bottom:22px; margin-bottom:8px}
.l-tag{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em; padding:3px 10px; border-radius:6px}
.l-tag.core{color:var(--core); background:color-mix(in srgb,var(--core) 16%,transparent)}
.l-tag.tail{color:var(--tail); background:color-mix(in srgb,var(--tail) 16%,transparent)}
.l-head h1{font-size:30px; line-height:1.22; letter-spacing:-.02em; margin:.4em 0 .25em}
.l-head .focus{color:var(--muted); font-size:16px}
.l-head .time{margin-top:14px; font-size:13px; color:var(--faint)}
.l-head .time b{color:var(--review)}

/* objectives */
.objectives{background:var(--bg2); border:1px solid var(--border); border-radius:13px; padding:18px 20px; margin:24px 0}
.objectives h2{font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin:0 0 10px}
.objectives ul{margin:0; padding-left:20px} .objectives li{margin:6px 0; font-size:15px}

/* prose */
.lesson h2.sec{font-size:23px; letter-spacing:-.01em; margin:42px 0 14px; padding-top:8px}
.lesson h2.sec .n{color:var(--accent); font-weight:800; margin-right:10px}
.lesson h3{font-size:18px; margin:28px 0 10px}
.lesson p{font-size:16px; margin:14px 0}
.lesson ul,.lesson ol{font-size:16px} .lesson li{margin:6px 0}
.lede{font-size:17.5px; color:var(--text); background:var(--bg2); border-left:3px solid var(--core);
  border-radius:0 10px 10px 0; padding:16px 20px; margin:20px 0}
.key{color:var(--text); font-weight:700; box-shadow:inset 0 -.5em 0 color-mix(in srgb,var(--core) 22%,transparent)}

/* callouts */
.callout{border:1px solid var(--border); border-left-width:4px; border-radius:0 11px 11px 0;
  padding:14px 18px; margin:20px 0; font-size:15px; background:var(--bg2)}
.callout .h{font-weight:800; font-size:13.5px; letter-spacing:.02em; margin-bottom:5px; display:flex; gap:8px; align-items:center}
.callout p{margin:6px 0; font-size:15px}
.callout.note{border-left-color:var(--accent)} .callout.note .h{color:var(--accent)}
.callout.warn{border-left-color:var(--core)} .callout.warn .h{color:var(--core)}
.callout.trap{border-left-color:#ff6b6b} .callout.trap .h{color:#ff6b6b}
[data-theme="light"] .callout.trap{border-left-color:#cf222e} [data-theme="light"] .callout.trap .h{color:#cf222e}
.callout.tip{border-left-color:var(--tail)} .callout.tip .h{color:var(--tail)}
.callout.deep{border-left-color:#a371f7; background:color-mix(in srgb,#a371f7 9%,var(--bg2))}
.callout.deep .h{color:#a371f7}
[data-theme="light"] .callout.deep{border-left-color:#8250df; background:color-mix(in srgb,#8250df 7%,#fff)}
[data-theme="light"] .callout.deep .h{color:#8250df}
.callout.deep .h .badge{font-size:10px; font-weight:700; border:1px solid currentColor; border-radius:5px; padding:1px 6px; opacity:.8}

/* mapping / compare table */
table.map{width:100%; border-collapse:separate; border-spacing:0; margin:22px 0; font-size:14.5px;
  border:1px solid var(--border); border-radius:11px; overflow:hidden}
table.map th,table.map td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:top}
table.map thead th{background:var(--bg3); font-size:12px; letter-spacing:.03em; color:var(--faint); text-transform:uppercase}
table.map tbody tr:last-child td{border-bottom:none}
table.map tbody tr:hover{background:var(--bg3)}
table.map td:first-child{color:var(--muted)}
table.map td code{white-space:nowrap}
table.map .ko{color:var(--tail)} table.map .no{color:#ff6b6b}
[data-theme="light"] table.map .no{color:#cf222e}

/* code */
.code{margin:18px 0; border:1px solid var(--border); border-radius:11px; overflow:hidden; background:var(--bg2)}
.code .cap{font-size:12px; color:var(--faint); padding:8px 14px; border-bottom:1px solid var(--border); background:var(--bg3); font-weight:600}
.code pre{margin:0; padding:15px 16px; overflow-x:auto; font-size:13.6px; line-height:1.6}
.code code{background:none; border:none; padding:0; font-size:inherit; color:var(--text)}
.code script{display:none}
.t-kw{color:var(--t-kw)} .t-type{color:var(--t-type)} .t-str{color:var(--t-str)}
.t-cmt{color:var(--t-cmt); font-style:italic} .t-attr{color:var(--t-attr)} .t-num{color:var(--t-num)}

/* diagrams */
figure.diagram{margin:26px 0; background:var(--bg2); border:1px solid var(--border); border-radius:13px; padding:18px}
figure.diagram svg{display:block; width:100%; height:auto}
figure.diagram figcaption{margin-top:12px; font-size:13px; color:var(--muted); text-align:center}
.diagram .d-box{fill:var(--d-fill); stroke:var(--d-line)}
.diagram .d-box2{fill:var(--d-fill2); stroke:var(--d-line)}
.diagram .d-line{stroke:var(--d-line)}
.diagram .d-tx{fill:var(--text); font-family:inherit}
.diagram .d-mut{fill:var(--muted); font-family:inherit}
.diagram .d-acc{fill:var(--accent)} .diagram .s-acc{stroke:var(--accent)}
.diagram .d-core{fill:var(--core)} .diagram .s-core{stroke:var(--core)}
.diagram .d-tail{fill:var(--tail)} .diagram .s-tail{stroke:var(--tail)}
.diagram .d-rev{fill:var(--review)} .diagram .s-rev{stroke:var(--review)}

/* review block */
.review-box{background:color-mix(in srgb,var(--review) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--review) 38%,var(--border)); border-radius:13px; padding:20px 22px; margin:34px 0}
.review-box h2{color:var(--review); font-size:18px; margin:0 0 6px; display:flex; align-items:center; gap:9px}
.review-box .sub{color:var(--muted); font-size:13.5px; margin-bottom:8px}

/* resources */
.reslist{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.res{display:flex; align-items:center; gap:9px; background:var(--bg2); border:1px solid var(--border);
  border-radius:8px; padding:8px 12px; font-size:13.5px; color:var(--text)}
.res:hover{border-color:var(--accent); text-decoration:none}
.res .ic{flex:none; width:18px; text-align:center}
.res.apple .ic{color:var(--core)} .res.ob .ic{color:var(--accent)}
.res .lab{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.res .ext{flex:none; color:var(--faint); font-size:11px}

/* prev / next */
.pager{display:flex; gap:12px; margin-top:46px; border-top:1px solid var(--border); padding-top:24px}
.pager a{flex:1; border:1px solid var(--border); border-radius:12px; padding:14px 18px; background:var(--bg2)}
.pager a:hover{border-color:var(--accent); text-decoration:none}
.pager .dir{font-size:12px; color:var(--faint)} .pager .ttl{font-weight:700; font-size:14.5px; margin-top:3px; color:var(--text)}
.pager a.next{text-align:right} .pager a.disabled{opacity:.4; pointer-events:none}

/* in-page TOC */
aside.toc{padding-top:44px}
@media(max-width:900px){aside.toc{display:none}}
.toc .box{position:sticky; top:78px}
.toc .lbl{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:800; margin-bottom:10px}
.toc a{display:block; font-size:13px; color:var(--muted); padding:5px 0 5px 12px; border-left:2px solid var(--border)}
.toc a:hover{color:var(--text); text-decoration:none}
.toc a.active{color:var(--accent); border-left-color:var(--accent); font-weight:600}

@media print{
  .lnav,aside.toc,.pager,#readbar{display:none}
  .shell{grid-template-columns:1fr} .code pre{white-space:pre-wrap}
}