/* AI코딩 완전정복 — 허브와 책 웹 버전(위키형 읽기 화면). 공용 style.css의 색 변수를 그대로 쓴다. */
.ac-hero{padding:128px 0 56px;background:radial-gradient(880px 460px at 72% -12%,rgba(212,168,67,.13),transparent 60%),radial-gradient(680px 400px at 10% 6%,rgba(76,141,255,.10),transparent 60%),var(--bg)}
.ac-hero h1{font-size:clamp(32px,5.2vw,56px);line-height:1.2}
.ac-hero h1 .k{color:var(--gold2)}
.ac-hero .lead{max-width:780px;margin-top:20px;color:var(--dim);font-size:17px;line-height:1.75}
.ac-badge{display:inline-flex;font-size:12.5px;font-weight:800;letter-spacing:.16em;color:var(--gold2);border:1px solid rgba(212,168,67,.45);background:rgba(212,168,67,.08);padding:7px 16px;border-radius:999px;margin-bottom:22px}
.ac-books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ac-book{border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;background:linear-gradient(180deg,var(--panel),var(--bg2));display:flex;flex-direction:column}
.ac-book.soon{background:linear-gradient(180deg,rgba(20,27,48,.55),var(--bg2));border-style:dashed}
.ac-kind{font-size:11.5px;font-weight:800;letter-spacing:.15em;color:var(--gold)}
.ac-book.soon .ac-kind{color:var(--blue)}
.ac-book h2{font-size:clamp(22px,2.4vw,29px);line-height:1.3;margin:11px 0 6px}
.ac-sub{color:var(--gold2);font-size:14.5px;font-weight:600}
.ac-book ul{list-style:none;margin:16px 0 0}
.ac-book li{color:var(--dim);font-size:14.5px;padding-left:16px;position:relative;margin-bottom:8px;line-height:1.6}
.ac-book li:before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:rgba(212,168,67,.6)}
.ac-ver{color:var(--faint);font-size:13px;margin-top:auto;padding-top:16px}
.ac-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.ac-note{margin-top:22px;color:var(--faint);font-size:13.5px;line-height:1.7}
.ac-note a{color:var(--gold2)}
@media(max-width:1100px){.ac-books{grid-template-columns:repeat(2,minmax(0,1fr))}.ac-book:first-child{grid-column:1/-1}}
@media(max-width:820px){.ac-books{grid-template-columns:1fr}}

/* 책 읽기 화면 */
.bk{display:grid;grid-template-columns:300px minmax(0,1fr);gap:0;max-width:1320px;margin:0 auto;padding:84px 0 0}
.bk-side{position:sticky;top:72px;align-self:start;height:calc(100vh - 72px);overflow:auto;border-right:1px solid var(--line);background:var(--bg)}
.bk-side-in{padding:22px 16px 40px}
.bk-close{display:none}
.bk-dim{display:none}
.bk-home{display:block;font-weight:800;font-size:15.5px;color:var(--text);margin-bottom:12px;line-height:1.4}
.bk-home span{display:block;font-size:12px;font-weight:600;color:var(--gold);margin-top:3px}
.bk-find{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:9px 11px;font:inherit;font-size:13.5px;margin-bottom:12px}
.bk-toc a{display:block;color:var(--dim);font-size:13.5px;line-height:1.45;padding:6px 8px;border-radius:8px}
.bk-toc a:hover{color:var(--text);background:rgba(255,255,255,.04)}
.bk-toc a.on{color:var(--gold2);background:rgba(212,168,67,.10);font-weight:700}
.bk-l0{font-weight:700;color:var(--text)!important}
.bk-py{margin:16px 8px 4px;font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--gold)}
.bk-part summary{list-style:none;cursor:pointer}
.bk-part summary::-webkit-details-marker{display:none}
.bk-part summary a{font-weight:700;color:var(--text)}
.bk-step{padding-left:12px!important;display:flex!important;gap:8px}
.bk-step b{min-width:24px;color:var(--faint);font-weight:700;font-variant-numeric:tabular-nums}
.bk-step.hide{display:none!important}
.bk-step .opt{font-style:normal;font-size:10.5px;font-weight:700;color:var(--blue);border:1px solid rgba(76,141,255,.45);border-radius:6px;padding:0 5px;margin-left:auto;align-self:center;flex:none}
.bk-step.read b{color:var(--gold2)}
.bk-step.read b::after{content:" ✓";font-size:11px}
.bk-hits{margin:-4px 0 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);max-height:52vh;overflow:auto}
.bk-hits-h{font-size:12px;font-weight:800;color:var(--gold);padding:9px 11px 5px}
.bk-hits a{display:block;padding:8px 11px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;color:var(--dim)}
.bk-hits a:hover{background:rgba(255,255,255,.04)}
.bk-hits b{display:block;color:var(--text);font-size:13px}
.bk-hits mark{background:rgba(212,168,67,.3);color:var(--text);border-radius:3px;padding:0 2px}
.bk-hits i{display:block;font-style:normal;font-size:11px;color:var(--faint);margin-top:2px}
.bk-progress{font-size:12.5px;color:var(--gold2);font-weight:700;margin:-4px 2px 12px}
.bk-side-foot{margin-top:18px;padding:12px 8px;border-top:1px solid var(--line);font-size:13px}
.bk-side-foot a{color:var(--blue)}
.bk-menu{display:none}
.bk-main{padding:26px clamp(18px,4vw,56px) 80px;max-width:900px;min-width:0}
.bk-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.bk-crumb{font-size:13px;color:var(--faint);min-width:0}
.bk-pdf{flex:none;font-size:13px;font-weight:700;color:var(--gold2);border:1px solid rgba(212,168,67,.45);background:rgba(212,168,67,.08);border-radius:999px;padding:6px 13px;white-space:nowrap}
.bk-pdf:hover{background:rgba(212,168,67,.16)}
.bk-crumb a{color:var(--dim)}
.bk-head .kind,.bk-cover .kind{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--gold)}
.bk-head h1{font-size:clamp(26px,3.4vw,38px);line-height:1.3;margin:10px 0 6px}
.bk-head h1 .no{display:block;font-size:.5em;color:var(--gold2);font-weight:800;margin-bottom:6px}
.bk-core{margin:16px 0 0;padding:14px 18px;border-left:4px solid var(--gold);background:rgba(212,168,67,.08);border-radius:0 12px 12px 0;font-weight:700;line-height:1.65}
.bk-onthis{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 6px}
.bk-onthis a{font-size:12.5px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.bk-onthis a:hover{color:var(--gold2);border-color:rgba(212,168,67,.4)}
.bk-cover h1{font-size:clamp(30px,4.4vw,48px);line-height:1.2;margin:12px 0 10px}
.bk-cover .sub{color:var(--gold2);font-size:17px;font-weight:600}
.bk-cover .by{color:var(--dim);margin-top:10px}
.bk-cover .how{color:var(--dim);margin-top:18px;line-height:1.75}
.bk-cover .how a,.bk-toc-full a{color:var(--gold2)}
.dl{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.bk-toc-full h2{margin:44px 0 10px}
.bk-py-card{margin-top:26px}
.bk-py-card h3{font-size:17px;color:var(--gold);margin-bottom:10px}
.bk-pcard{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:12px;background:var(--bg2)}
.bk-pcard .pt{font-weight:800;color:var(--text)!important;font-size:16px}
.bk-pcard .rng{margin-left:8px;font-size:12.5px;color:var(--faint)}
.bk-pcard ol{list-style:none;margin-top:10px;columns:2;column-gap:24px}
.bk-pcard li{break-inside:avoid;margin-bottom:5px;font-size:14px}
.bk-pcard li a{color:var(--dim)!important}
.bk-pcard li b{color:var(--faint);margin-right:6px}
.bk-h2{margin:34px 0 10px;font-size:20px}
.bk-steps{list-style:none}
.bk-steps a{display:grid;grid-template-columns:44px 1fr;gap:2px 10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;color:var(--text)}
.bk-steps a:hover{border-color:rgba(212,168,67,.4)}
.bk-steps b{grid-row:span 2;color:var(--gold2);font-size:18px}
.bk-steps em{font-style:normal;color:var(--dim);font-size:13.5px;line-height:1.55}
.bk-steps i.lv{grid-column:2;font-style:normal;font-size:12px;color:var(--faint)}

/* 본문 */
.bk-body{color:#dfe4f1;font-size:16.5px;line-height:1.85;word-break:keep-all;overflow-wrap:anywhere}
.bk-body h1{font-size:28px;margin:10px 0 18px}
.bk-body h2{font-size:23px;margin:44px 0 12px;padding-top:6px;color:var(--text)}
.bk-body h3{font-size:18.5px;margin:34px 0 10px;color:var(--gold2);scroll-margin-top:90px}
.bk-body h2{scroll-margin-top:90px}
.bk-body p{margin:12px 0}
.bk-body ul,.bk-body ol{margin:10px 0 10px 22px}
.bk-body li{margin:5px 0}
.bk-body a{color:var(--gold2);text-decoration:underline;text-underline-offset:3px}
.bk-body strong{color:var(--text)}
.bk-body blockquote{margin:16px 0;padding:12px 16px;border-left:4px solid var(--gold);background:rgba(212,168,67,.07);border-radius:0 10px 10px 0;font-weight:600}
.bk-body blockquote p{margin:0}
.bk-body table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px;line-height:1.6;display:block;overflow-x:auto}
.bk-body th,.bk-body td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
.bk-body th{background:var(--panel2);color:var(--text);white-space:nowrap}
.bk-body td{background:rgba(20,27,48,.35)}
.bk-body code{background:rgba(255,255,255,.07);border-radius:5px;padding:1px 6px;font-size:.92em}
.bk-body pre{position:relative;background:#0c1222;border:1px solid var(--line);border-radius:12px;padding:16px 16px 16px;margin:16px 0;overflow-x:auto}
.bk-body pre code{background:none;padding:0;font-size:14px;line-height:1.7;white-space:pre-wrap;word-break:keep-all}
.bk-copy{position:absolute;top:8px;right:8px;font:inherit;font-size:12px;font-weight:700;color:var(--bg);background:var(--gold2);border:0;border-radius:8px;padding:5px 10px;cursor:pointer}
.bk-body .column{margin:22px 0;padding:16px 18px;border:1px solid rgba(212,168,67,.35);border-radius:12px;background:rgba(212,168,67,.05);font-size:15.5px}
.bk-body .column .label{font-weight:800;color:var(--gold)}
.bk-body .column .src{text-align:right;font-size:13px;color:var(--faint)}
.bk-body details.bk-check{margin:14px 0 8px;border:1px solid var(--line);border-radius:12px;background:rgba(20,27,48,.45);padding:4px 16px}
.bk-body details.bk-check summary{cursor:pointer;font-weight:700;color:var(--gold2);padding:8px 0}
.bk-body details.bk-check[open] summary{border-bottom:1px solid var(--line);margin-bottom:6px}
.bk-body details.bk-check ol{margin:8px 0 10px 20px;font-size:15px}
.bk-donebar{margin-top:36px;display:flex;justify-content:center}
.bk-done{font:inherit;font-weight:700;font-size:14px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:10px 20px;cursor:pointer}
.bk-done.on{color:var(--bg);background:var(--gold2);border-color:var(--gold2)}
.bk-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:48px}
.bk-pager a{display:block;border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--text);font-weight:700;font-size:14.5px;line-height:1.45}
.bk-pager a:hover{border-color:rgba(212,168,67,.45)}
.bk-pager a span{display:block;font-size:12px;color:var(--faint);font-weight:600;margin-bottom:4px}
.bk-pager .next{text-align:right}
.bk-edition{margin-top:28px;font-size:12.5px;color:var(--faint);line-height:1.7}
@media(max-width:980px){
  .bk{grid-template-columns:1fr;padding-top:76px}
  .bk-menu{display:inline-flex;position:sticky;top:70px;z-index:40;margin:8px 16px 0;font:inherit;font-weight:700;font-size:14px;color:var(--bg);background:var(--gold2);border:0;border-radius:999px;padding:8px 16px;width:max-content}
  .bk-side{position:fixed;top:0;left:0;bottom:0;width:min(86vw,340px);height:auto;z-index:210;transform:translateX(-102%);transition:transform .2s;box-shadow:12px 0 40px rgba(0,0,0,.5)}
  .bk-side[data-open="1"]{transform:none}
  .bk-close{display:block;margin:0 0 12px auto;font:inherit;font-size:13px;font-weight:700;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer}
  .bk-dim{position:fixed;inset:0;z-index:205;background:rgba(0,0,0,.45)}
  .bk-side[data-open="1"]~.bk-dim{display:block}
  .bk-main{padding-top:14px}
  .bk-pcard ol{columns:1}
}
@media print{.bk-side,.bk-menu,.bk-pager,.bk-pdf,.bk-donebar,header.nav,body>footer,.drawer{display:none!important}.bk{display:block;padding:0}.bk-body{color:#000}}

.bk-body .fig{margin:26px 0;text-align:center}
.bk-body .fig svg{width:100%;max-width:720px;height:auto;font-family:inherit}
.bk-body .fig figcaption{margin-top:8px;font-size:13.5px;color:var(--faint)}
.fg-box{fill:#141b30;stroke:rgba(255,255,255,.16)}.fg-hl{fill:rgba(212,168,67,.14);stroke:#d4a843}.fg-pane{fill:rgba(20,27,48,.45);stroke:rgba(255,255,255,.08)}
.fg-cell{fill:rgba(20,27,48,.35);stroke:rgba(255,255,255,.12)}.fg-t{fill:#eef1f9;font-weight:700}.fg-s{fill:#9aa4bd}.fg-s2{fill:#dfe4f1}
.fg-n{fill:#e9c96a;font-weight:800}.fg-ar{stroke:#d4a843;stroke-width:1.6}.fg-ln{stroke:rgba(255,255,255,.22);stroke-width:1.4;stroke-dasharray:4 4}
.fg-ah{fill:#d4a843}.fg-lab{fill:#e9c96a;font-weight:600}