/* AI 소설 교과서 — 강 본문·위젯 스타일. 전부 .lesson-ai-novel 아래.
   원본: bruni-world /ai-novel/ 인라인 <style> (2026-10-23 옮김). */

.lesson-ai-novel{
  --ink:var(--bg); --ink2:var(--surface); --ink3:var(--surface-2); --line2:var(--line-2);
  --muted:var(--text-2); --muted-d:var(--text-3); --accent:var(--mint); --accent-soft:var(--mint-soft);
  --prose:var(--text-prose); --on-accent:var(--mint-ink);
  --warn:#ffc44d; --blue:#6aa9ff; --violet:#c39bff; --pink:#ff8fb1;
}
:root[data-theme="light"] .lesson-ai-novel{
  --warn:#8a5a00; --blue:#1f5fbf; --violet:#6a43c9; --pink:#b0305f;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .lesson-ai-novel{
    --warn:#8a5a00; --blue:#1f5fbf; --violet:#6a43c9; --pink:#b0305f;
  }
}

/* 문단 꾸밈 */
.lesson-ai-novel p.mut{color:var(--muted)}
.lesson-ai-novel .key{margin-top:20px;padding:16px 20px;background:var(--mint-dim);
  border-left:3px solid var(--accent);border-radius:0 12px 12px 0;font-weight:600;color:var(--text)}
.lesson-ai-novel code.i{font-family:var(--mono);font-size:.92em;background:var(--line);
  padding:1px 6px;border-radius:6px;color:var(--text)}

/* 그림·데모 틀 */
.lesson-ai-novel .demo{margin-top:22px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--ink2)}
.lesson-ai-novel .demo-bar{display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:11px 16px;border-bottom:1px solid var(--line2);font-size:12.5px;color:var(--muted)}
.lesson-ai-novel .demo-bar b{color:var(--accent);font-weight:700;letter-spacing:.06em}
.lesson-ai-novel .demo-stage{padding:22px}
@media(max-width:560px){.lesson-ai-novel .demo-stage{padding:16px}}
.lesson-ai-novel .tgl{font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--on-accent);
  background:var(--accent);border:none;padding:7px 14px;border-radius:999px;transition:transform .12s}
.lesson-ai-novel .tgl:active{transform:scale(.95)}

/* 표 */
.lesson-ai-novel .tbl-wrap{overflow-x:auto}
.lesson-ai-novel .tbl-wrap table{min-width:520px}
.lesson-ai-novel td b{color:var(--accent)}
.lesson-ai-novel .tbl-note{font-size:12.5px;color:var(--muted-d);margin-top:8px}

/* 그림 판 */
.lesson-ai-novel .fig-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px}
.lesson-ai-novel .fig-trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:18px}
@media(max-width:640px){.lesson-ai-novel .fig-duo,.lesson-ai-novel .fig-trio{grid-template-columns:1fr}}
.lesson-ai-novel .pane{background:var(--ink3);border:1px solid var(--line2);border-radius:12px;padding:16px;min-width:0}
.lesson-ai-novel .pane h3{font-size:14.5px;font-weight:800;margin:0 0 6px;line-height:1.4}
.lesson-ai-novel .pane p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.6}
.lesson-ai-novel .pane p.ex{font-size:12.5px;color:var(--muted-d);margin-top:10px}
.lesson-ai-novel .L-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;padding:2px 9px;border-radius:999px;margin-bottom:12px}
.lesson-ai-novel .L-tag.no{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.lesson-ai-novel .L-tag.ok{background:var(--mint-dim);color:var(--accent)}
.lesson-ai-novel .L-tag.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.lesson-ai-novel .L-tag.blue{background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue)}
.lesson-ai-novel .L-tag.violet{background:color-mix(in srgb,var(--violet) 16%,transparent);color:var(--violet)}
.lesson-ai-novel .fig-solo{padding:18px}
.lesson-ai-novel .jrow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;color:var(--muted-d)}
.lesson-ai-novel .j{border:1px solid var(--line2);border-radius:999px;padding:4px 11px;background:var(--ink3);color:var(--muted);font-size:12px;white-space:nowrap}
.lesson-ai-novel .j.on{border-color:var(--accent);color:var(--accent);font-weight:700}
.lesson-ai-novel .fb-note{font-size:12.5px;color:var(--muted-d);margin:0;padding:0 16px 16px;text-align:center;line-height:1.6}
.lesson-ai-novel .badge{font-weight:800;padding:2px 9px;border-radius:999px;font-size:11.5px;white-space:nowrap}
.lesson-ai-novel .badge.no{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
.lesson-ai-novel b.bad-n{color:var(--bad)}
.lesson-ai-novel input[type=range]{accent-color:var(--accent);width:100%}

/* 알약 선택기·판정 상자 */
.lesson-ai-novel .vf-row{margin-bottom:16px}
.lesson-ai-novel .vf-row.last{margin-bottom:0}
.lesson-ai-novel .vf-row .lab{font-size:12px;color:var(--muted);margin-bottom:8px}
.lesson-ai-novel .vpills{display:flex;gap:8px;flex-wrap:wrap}
.lesson-ai-novel .vpill{font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);
  background:var(--ink3);border:1px solid var(--line2);border-radius:999px;
  padding:8px 14px;cursor:pointer;transition:.15s}
.lesson-ai-novel .vpill:hover{color:var(--text)}
.lesson-ai-novel .vpill.on{background:var(--accent);color:var(--on-accent);border-color:transparent;font-weight:700}
.lesson-ai-novel .verdict{margin-top:18px;padding:16px 18px;border-radius:14px;background:var(--ink3);
  border:1px solid var(--line2);transition:.15s}
.lesson-ai-novel .verdict .vt{font-size:11px;letter-spacing:.14em;color:var(--muted-d);font-weight:700}
.lesson-ai-novel .verdict .vb{font-size:19px;font-weight:800;margin-top:6px;line-height:1.4}
.lesson-ai-novel .verdict .vd{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.6}
.lesson-ai-novel .verdict.g{border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:var(--mint-dim)}
.lesson-ai-novel .verdict.g .vb{color:var(--accent)}
.lesson-ai-novel .verdict.w{border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 6%,transparent)}
.lesson-ai-novel .verdict.w .vb{color:var(--warn)}
.lesson-ai-novel .verdict.v{border-color:color-mix(in srgb,var(--violet) 40%,transparent);background:color-mix(in srgb,var(--violet) 6%,transparent)}
.lesson-ai-novel .verdict.v .vb{color:var(--violet)}

/* 6강 — 프롬프트 조립기 */
.lesson-ai-novel .asm-layers{display:flex;gap:8px;flex-wrap:wrap}
.lesson-ai-novel .asm-ctx{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:14px}
.lesson-ai-novel .asm-ctx select,.lesson-ai-novel .cost select,.lesson-ai-novel .cost input[type=number]{font-family:inherit;font-size:13px;color:var(--text);
  background:var(--ink3);border:1px solid var(--line2);border-radius:10px;padding:7px 10px;max-width:100%}
.lesson-ai-novel .budget{margin-top:16px;height:14px;border-radius:999px;background:var(--ink3);border:1px solid var(--line2);
  display:flex;overflow:hidden}
.lesson-ai-novel .budget span{height:100%;transition:width .25s ease;min-width:0}
.lesson-ai-novel .budget .sys{background:var(--blue)}
.lesson-ai-novel .budget .mem{background:var(--violet)}
.lesson-ai-novel .budget .lore{background:var(--warn)}
.lesson-ai-novel .budget .story{background:var(--accent)}
.lesson-ai-novel .budget .an{background:var(--pink)}
.lesson-ai-novel .budget-lab{display:flex;justify-content:space-between;font-size:12px;color:var(--muted-d);margin-top:6px;gap:8px;flex-wrap:wrap}
.lesson-ai-novel .budget-lab b{color:var(--text);font-variant-numeric:tabular-nums}
.lesson-ai-novel .asm-out{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.lesson-ai-novel .blk{border:1px solid var(--line2);border-left-width:3px;border-radius:10px;padding:10px 12px;background:var(--ink3);
  font-size:13px;color:var(--prose);line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.lesson-ai-novel .blk .bt{font-size:10.5px;letter-spacing:.14em;font-weight:800;margin-bottom:4px;display:flex;justify-content:space-between;gap:8px}
.lesson-ai-novel .blk .bt i{font-style:normal;color:var(--muted-d);font-weight:600;letter-spacing:0}
.lesson-ai-novel .blk.sys{border-left-color:var(--blue)}.lesson-ai-novel .blk.sys .bt{color:var(--blue)}
.lesson-ai-novel .blk.mem{border-left-color:var(--violet)}.lesson-ai-novel .blk.mem .bt{color:var(--violet)}
.lesson-ai-novel .blk.lore{border-left-color:var(--warn)}.lesson-ai-novel .blk.lore .bt{color:var(--warn)}
.lesson-ai-novel .blk.story{border-left-color:var(--accent)}.lesson-ai-novel .blk.story .bt{color:var(--accent)}
.lesson-ai-novel .blk.an{border-left-color:var(--pink)}.lesson-ai-novel .blk.an .bt{color:var(--pink)}
.lesson-ai-novel .blk .cutmark{color:var(--bad);font-weight:700}
.lesson-ai-novel .asm-warn{margin-top:12px;font-size:13px;color:var(--warn);min-height:1.6em;line-height:1.6}

/* 7강 — 로어북 */
.lesson-ai-novel .lore-lab{font-size:12px;color:var(--muted)}
.lesson-ai-novel .lore-ta{display:block;width:100%;min-height:120px;margin-top:6px;font-family:inherit;font-size:14px;line-height:1.7;color:var(--text);
  background:var(--ink3);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;resize:vertical;box-sizing:border-box}
.lesson-ai-novel .lore-ta:focus{border-color:var(--accent);outline:none}
.lesson-ai-novel .lore-list{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.lesson-ai-novel .lore-e{border:1px solid var(--line2);border-radius:10px;padding:10px 12px;background:var(--ink3);font-size:13px;
  color:var(--muted-d);transition:.15s;display:flex;gap:10px;align-items:flex-start;line-height:1.6}
.lesson-ai-novel .lore-e .st{flex-shrink:0;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--line);margin-top:2px;white-space:nowrap}
.lesson-ai-novel .lore-e .nm{color:var(--muted-d)}
.lesson-ai-novel .lore-e.on .nm{color:var(--text)}
.lesson-ai-novel .lore-e .tk{color:var(--muted-d)}
.lesson-ai-novel .lore-e .kw{font-size:12px;color:var(--muted-d);margin-top:3px}
.lesson-ai-novel .lore-e .kw code{font-family:inherit;color:var(--muted);background:var(--line);padding:0 5px;border-radius:5px}
.lesson-ai-novel .lore-e.on{border-color:color-mix(in srgb,var(--warn) 50%,transparent);background:color-mix(in srgb,var(--warn) 6%,transparent);color:var(--prose)}
.lesson-ai-novel .lore-e.on .st{background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warn)}
.lesson-ai-novel .lore-e.on .kw code.hit{color:var(--warn);font-weight:700}
.lesson-ai-novel .lore-sum{margin-top:12px;font-size:13px;color:var(--muted)}
.lesson-ai-novel .lore-sum b{color:var(--accent);font-variant-numeric:tabular-nums}
.lesson-ai-novel .lore-depth{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:12.5px;color:var(--muted)}
.lesson-ai-novel .lore-depth span{white-space:nowrap}
.lesson-ai-novel .lore-depth b{color:var(--text);font-variant-numeric:tabular-nums;min-width:4.5em}

/* 10강 — 온도 */
.lesson-ai-novel .tmp-prefix{font-size:15px;color:var(--text);line-height:1.7}
.lesson-ai-novel .tmp-prefix b{color:var(--accent)}
.lesson-ai-novel .pbars{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.lesson-ai-novel .pbar{display:grid;grid-template-columns:5.5em 1fr 3.4em;gap:10px;align-items:center;font-size:13px}
.lesson-ai-novel .pbar .w{color:var(--prose);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lesson-ai-novel .pbar .tr{height:12px;background:var(--ink3);border:1px solid var(--line2);border-radius:999px;overflow:hidden}
.lesson-ai-novel .pbar .fl{display:block;height:100%;background:var(--accent);transition:width .2s ease;border-radius:999px}
.lesson-ai-novel .pbar.off .fl{background:var(--line-2)}
.lesson-ai-novel .pbar.off .w{color:var(--muted-d);text-decoration:line-through}
.lesson-ai-novel .pbar .pc{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.lesson-ai-novel .tmp-ctl{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;margin-top:16px}
@media(max-width:520px){.lesson-ai-novel .tmp-ctl{grid-template-columns:1fr}}
.lesson-ai-novel .tmp-ctl .lab{font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between}
.lesson-ai-novel .tmp-ctl .lab b{color:var(--text);font-variant-numeric:tabular-nums}
.lesson-ai-novel .tmp-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lesson-ai-novel .tmp-out{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--ink3);border:1px solid var(--line2);
  font-size:14px;line-height:1.7;color:var(--prose);min-height:3.2em}
.lesson-ai-novel .tmp-out b{color:var(--accent)}
.lesson-ai-novel .tmp-out .sub{color:var(--muted-d);font-size:12.5px}
.lesson-ai-novel .chk{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);cursor:pointer}
.lesson-ai-novel .chk.gap{margin-top:12px}
.lesson-ai-novel .chk input{accent-color:var(--accent);width:15px;height:15px}

/* 14강 — 비용 계산기 */
.lesson-ai-novel .cost{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
@media(max-width:560px){.lesson-ai-novel .cost{grid-template-columns:1fr}}
.lesson-ai-novel .cost label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);min-width:0}
.lesson-ai-novel .cost label.wide{grid-column:1/-1}
.lesson-ai-novel .cost input[type=number],.lesson-ai-novel .cost select{width:100%;box-sizing:border-box}
.lesson-ai-novel .cost-out{margin-top:18px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:560px){.lesson-ai-novel .cost-out{grid-template-columns:1fr}}
.lesson-ai-novel .stat{background:var(--ink3);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;min-width:0}
.lesson-ai-novel .stat .l{font-size:11px;letter-spacing:.12em;color:var(--muted-d);font-weight:700}
.lesson-ai-novel .stat .v{font-size:20px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums;color:var(--text);overflow-wrap:anywhere}
.lesson-ai-novel .stat .v.hi{color:var(--accent)}
.lesson-ai-novel .stat .s{font-size:12px;color:var(--muted-d);margin-top:2px}
.lesson-ai-novel .cost-note{margin-top:12px;font-size:12.5px;color:var(--muted-d);line-height:1.6}

/* 18강 — 코드 */
.lesson-ai-novel pre.L-code{margin-top:16px;background:var(--code-bg);border:1px solid var(--code-line);border-radius:12px;padding:14px 16px;
  font:12.5px/1.6 var(--mono);color:var(--code-text);overflow-x:auto;white-space:pre}
.lesson-ai-novel pre.L-code .c{color:var(--code-dim)}
.lesson-ai-novel pre.L-code .k{color:var(--code-good)}
.lesson-ai-novel pre.L-code .s{color:#ffc44d}

/* 단계 목록 */
.lesson-ai-novel .steps{counter-reset:s;margin-top:14px;display:flex;flex-direction:column;gap:8px}
.lesson-ai-novel .steps div{position:relative;padding:10px 12px 10px 44px;border:1px solid var(--line2);border-radius:10px;background:var(--ink2);font-size:14px;color:var(--prose);line-height:1.6}
.lesson-ai-novel .steps div::before{counter-increment:s;content:counter(s);position:absolute;left:12px;top:10px;width:22px;height:22px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.lesson-ai-novel .steps div b{color:var(--accent)}

/* 출처 목록 */
.lesson-ai-novel ul.src{margin-top:14px;font-size:12.5px;color:var(--muted-d);line-height:1.7}
.lesson-ai-novel ul.src li{margin-top:4px}
.lesson-ai-novel ul.src a{color:var(--muted)}

/* 점검표 */
.lesson-ai-novel .ck{margin-top:6px;display:flex;flex-direction:column;gap:2px}
.lesson-ai-novel .ck .g{font-size:11.5px;letter-spacing:.2em;color:var(--accent);font-weight:700;margin:18px 0 6px}
.lesson-ai-novel .ck label{display:flex;gap:11px;align-items:flex-start;padding:8px 10px;border-radius:10px;
  font-size:14.5px;color:var(--prose);cursor:pointer;line-height:1.6}
.lesson-ai-novel .ck label:hover{background:var(--line)}
.lesson-ai-novel .ck input{width:17px;height:17px;accent-color:var(--accent);margin-top:3px;flex-shrink:0}
.lesson-ai-novel .ck input:checked+span{color:var(--muted-d)}
.lesson-ai-novel .ck-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px}
.lesson-ai-novel .ck-count{font-size:13px;color:var(--muted)}
.lesson-ai-novel .ck-count b{color:var(--accent);font-size:17px}
.lesson-ai-novel .ck-reset{font-family:inherit;font-size:12px;background:none;border:1px solid var(--line2);
  color:var(--muted-d);border-radius:999px;padding:5px 12px;cursor:pointer}
.lesson-ai-novel .ck-reset:hover{color:var(--bad);border-color:var(--bad)}

@media (prefers-reduced-motion:reduce){
  .lesson-ai-novel *{transition-duration:.01ms!important}
}