.development-history{margin:30px 0;border:1px solid #b9cbd2;background:#fbfaf5}
.development-history>summary{padding:18px 20px;font-size:18px;font-weight:700;color:#17384a;cursor:pointer}
.development-history>summary:focus-visible{outline:3px solid #e3a943;outline-offset:2px}
.development-history>section{margin:0;border-top:1px solid #b9cbd2}
.code-evidence-modal,.cem-body{overscroll-behavior:contain}
.inline-reference{margin:16px 0;border:1px solid #b9cbd2;background:#fbfaf5}
.inline-reference>summary{padding:12px 16px;cursor:pointer;color:#17384a;font-weight:600}
.inline-reference>summary:hover{background:#eef3f3}
.inline-reference>summary:focus-visible{outline:3px solid #e3a943;outline-offset:2px}
.inline-reference>section{margin:0;padding:16px;border-top:1px solid #b9cbd2}
#generation .case-orientation{grid-template-columns:minmax(0,1fr)}
#generation .case-media-frame{aspect-ratio:16/9;min-height:0;height:auto;overflow:hidden;background:#102b3c}
#generation .case-media-frame img,#generation .case-media-frame video{display:block;width:100%;height:100%;object-fit:contain}
#generation .concept-diagram{width:100%;min-width:0}

/* 육각 성: 입력→생성→검증→저장 관계가 한번에 읽히는 기술 도식 */
#generation .diagram-generation{padding:30px;background-color:#eef4f3;background-image:linear-gradient(rgba(47,113,133,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(47,113,133,.055) 1px,transparent 1px);background-size:24px 24px}
#generation .generation-system-map{display:grid;gap:18px}
#generation .generation-pipeline{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1.18fr) 44px minmax(0,1.08fr);gap:0;align-items:stretch}
#generation .generation-stage{min-width:0;overflow:hidden;border:1px solid #8ba6b0;background:#fffdfa;box-shadow:0 7px 18px rgba(20,52,71,.07)}
#generation .generation-stage>header{display:flex;align-items:center;gap:11px;min-height:66px;padding:12px 14px;border-bottom:1px solid #b8cbd1;background:#e5eef0}
#generation .generation-stage>header>span{display:grid;width:32px;height:32px;flex:0 0 32px;place-items:center;background:#2f7185;color:#fff;font:800 11px/1 ui-monospace,monospace}
#generation .generation-stage>header>div{display:grid;gap:4px;min-width:0}
#generation .generation-stage>header small{color:#4c6f7b;font-size:10px;font-weight:800;line-height:1;letter-spacing:.12em}
#generation .generation-stage>header b{color:#143447;font-size:16px;line-height:1.25;word-break:keep-all;overflow-wrap:break-word}
#generation .generation-input-list{display:grid;gap:0;margin:0;padding:14px 16px}
#generation .generation-input-list>div{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:center;min-height:48px;padding:8px 0;border-bottom:1px solid #d7e1e4;background:transparent}
#generation .generation-input-list>div:last-child{border-bottom:0}
#generation .generation-input-list dt{color:#143447;font:800 12px/1 ui-monospace,monospace}
#generation .generation-input-list dd{margin:0;color:#667b86;font-size:12px;line-height:1.35;word-break:keep-all;overflow-wrap:break-word}
#generation .generation-arrow{display:grid;place-items:center;color:#2f7185;font:800 25px/1 ui-monospace,monospace}
#generation .generation-build-stage.is-core{border-color:#173b4d;background:#102b3c;box-shadow:0 9px 22px rgba(20,52,71,.14)}
#generation .generation-build-stage.is-core>header{border-bottom-color:#365a6b;background:#173b4d}
#generation .generation-build-stage.is-core>header>span{background:#d49355;color:#2f2419}
#generation .generation-build-stage.is-core>header small{color:#9cc8d5}
#generation .generation-build-stage.is-core>header b{color:#fff}
#generation .mini-hex-map{display:grid;place-items:center;padding:11px 12px 7px}
#generation .mini-hex-map svg{display:block;width:min(100%,210px);height:auto;overflow:visible}
#generation .mini-hex-map use{stroke:#102b3c;stroke-width:2.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#generation .mini-hex-map .hex-wall use{fill:#91afba}
#generation .mini-hex-map .hex-inner use{fill:#28485c}
#generation .mini-hex-map .hex-gate use{fill:#d49355}
#generation .mini-hex-map .hex-palace use{fill:#f6f1e5}
#generation .mini-hex-map text{font:800 12px/1 sans-serif;text-anchor:middle;fill:#2e2218;pointer-events:none}
#generation .generation-build-steps{gap:6px;padding:0 13px 15px}
#generation .generation-build-steps li{min-height:34px;border-color:#486c7e;color:#d0e0e6;font-size:10px;font-weight:700}
#generation .generation-validate-stage ul{display:grid;margin:0;padding:11px 15px 5px;list-style:none}
#generation .generation-validate-stage li{grid-template-columns:25px minmax(0,1fr);gap:9px;min-height:49px;border-bottom:1px solid #d7e1e4}
#generation .generation-validate-stage li>i{width:23px;height:23px;background:#dcece5;color:#347159;font-size:12px}
#generation .generation-validate-stage li b{font-size:12px;word-break:keep-all;overflow-wrap:break-word}
#generation .generation-validate-stage li small{font-size:10px;word-break:keep-all;overflow-wrap:break-word}
#generation .generation-gate-result{gap:7px;margin:7px 14px 14px}
#generation .generation-gate-result span{min-height:42px;padding:7px 9px;font-size:9px}
#generation .generation-gate-result span b{font-size:11px}
#generation .generation-output{border:1px solid #8ba6b0;background:#fffdfa;box-shadow:0 7px 18px rgba(20,52,71,.06)}
#generation .generation-output>header{gap:12px;padding:13px 16px;border-bottom:1px solid #b8cbd1;background:#e5eef0}
#generation .generation-output>header small{padding:5px 8px;background:#2f7185;font-size:9px;letter-spacing:.08em}
#generation .generation-output>header b{font-size:14px;word-break:keep-all;overflow-wrap:break-word}
#generation .generation-artifacts{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:13px}
#generation .generation-artifacts>section{min-height:74px;padding:12px 14px;border:1px solid #c7d6da;background:#f4f7f5}
#generation .generation-artifacts>section small{color:#54717b;font-size:9px;letter-spacing:.06em}
#generation .generation-artifacts>section b{font-size:15px}
#generation .generation-artifacts>section span{font-size:11px}
#generation .generation-artifacts>section.is-signature{border-color:#315769;background:#173b4d}
#generation .generation-artifacts>section.is-signature small{color:#9cc8d5}
#generation .generation-artifacts>section.is-signature b{color:#fff;font-size:13px;overflow-wrap:anywhere}
#generation .generation-artifacts>section.is-signature span{color:#d0e0e6}

@media(max-width:760px){
  #generation .diagram-generation{padding:18px}
  #generation .generation-pipeline{grid-template-columns:minmax(0,1fr);gap:0}
  #generation .generation-arrow{min-height:38px;transform:rotate(90deg)}
  #generation .generation-validate-stage{grid-column:auto}
  #generation .generation-validate-stage ul{grid-template-columns:1fr;padding:11px 15px 5px}
  #generation .generation-validate-stage li{grid-template-columns:25px minmax(0,1fr);justify-items:stretch;min-height:49px;padding:0;border-right:0;border-bottom:1px solid #d7e1e4;text-align:left}
  #generation .generation-validate-stage li:last-child{border-bottom:0}
  #generation .generation-input-list dd,#generation .generation-validate-stage li small{display:block}
  #generation .generation-output>header{align-items:flex-start;flex-direction:column}
  #generation .generation-artifacts{grid-template-columns:1fr}
}
@media(max-width:700px){.code-evidence-modal{max-height:calc(100dvh - 16px)}.cem-panel{height:calc(100dvh - 18px);max-height:none}.cem-body{padding-bottom:24px}}
.engineering-document .siege-preview-video{aspect-ratio:1060/884;height:auto;padding:0;min-height:0}
.engineering-document .siege-preview-video video{display:block;width:100%;height:auto;aspect-ratio:1060/884;object-fit:contain;max-height:none}

/* 남청 계열을 기준으로 두되, 강조 방식은 내용에 따라 다르게 사용한다. */
:root{--doc-ink:#143447;--doc-accent:#2f7185;--doc-line:#c7d3d7;--doc-paper:#faf8f1;--doc-muted:#667b86}
.reading{background:var(--doc-paper);color:var(--doc-ink)}
.reading-header{border-bottom:1px solid var(--doc-line)!important}
.reading-header>nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.reading-header b,.document-intro h1,.document-intro h1 em,.section-heading h2,.case-title h2{color:var(--doc-ink)!important}
.document-intro{border-bottom:1px solid var(--doc-ink)!important}
.document-switcher{margin-top:34px;border:1px solid var(--doc-line)!important;background:#fff!important;box-shadow:0 12px 30px rgba(20,52,71,.09)}
.document-browser{border-bottom:0}
.document-browser>div>small,.chapter-label small{color:var(--doc-accent)!important}
.document-browser p>span:first-child{padding-left:0!important;border-left:0!important}
.document-tabs{padding-top:0}
.document-tabs a{border-color:var(--doc-line)!important;color:#49626e;background:#fbfbf8}
.document-tabs a:hover{border-color:var(--doc-accent)!important;background:#eef4f3;color:var(--doc-ink)}
.document-tabs a:focus-visible{outline-color:var(--doc-accent)!important}
.document-tabs a[aria-current="page"]{border-color:var(--doc-ink)!important;background:var(--doc-ink)!important;color:#fff;box-shadow:none!important}
.document-tabs a:nth-child(2),.document-tabs a:nth-child(3),.document-tabs a:nth-child(4){font-weight:750;background:linear-gradient(180deg,#f8fbfa 0%,#eaf2f1 100%);color:var(--doc-ink);border-top:2px solid var(--doc-accent)!important}
.document-tabs a:nth-child(5),.document-tabs a:nth-child(6){color:#71838b;background:#f7f7f3}
.document-tabs a:nth-child(5) .doc-draft-status,.document-tabs a:nth-child(6) .doc-draft-status{color:#84949b}
.document-tabs a[aria-current="page"]{background:var(--doc-ink)!important;color:#fff!important}
.document-tabs a[aria-current="page"] small,.document-tabs a[aria-current="page"] span{color:#fff!important}
.document-tabs a[aria-current="page"] .doc-draft-status{color:#dbe8ec!important}
.engineering-document>[data-chapter]{border-top:1px solid var(--doc-line)!important;box-shadow:0 14px 34px rgba(20,52,71,.055)!important;background:#fffdf8!important}
.chapter-label>span{background:var(--doc-accent)!important}
.depth-refs a,.print-document-link,.document-toc-link{color:var(--doc-accent)}
.depth-refs{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:start;column-gap:24px;margin-top:14px;line-height:1.4}
.depth-refs-label{padding-top:12px;color:var(--doc-muted);font-size:12px;white-space:nowrap}
.depth-ref-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:2px;min-width:0}
.depth-refs a{display:flex;align-items:center;max-width:100%;min-width:0;min-height:40px;margin:0;padding:6px 0;white-space:nowrap;text-underline-offset:4px}
.depth-refs a:hover{color:var(--doc-ink);text-decoration-thickness:2px}
.depth-refs a:focus-visible{outline:2px solid var(--doc-accent);outline-offset:3px}
.print-document-link,.document-toc-link{display:inline-flex;align-items:center;min-height:40px;padding:8px 12px;border:1px solid var(--doc-line);text-decoration:none;font-size:12px;font-weight:700;background:#fff}
.print-document-link:hover,.document-toc-link:hover{border-color:var(--doc-accent);background:#eef4f3}
.print-document-link:focus-visible,.document-toc-link:focus-visible{outline:3px solid var(--doc-accent);outline-offset:2px}
.skip-link{position:fixed;top:8px;left:8px;z-index:1000;padding:10px 14px;background:var(--doc-ink);color:#fff;transform:translateY(-150%);transition:transform .15s ease}
.skip-link:focus{transform:translateY(0)}
.case-media,.concept-diagram,.generation-stage{box-shadow:0 8px 22px rgba(20,52,71,.07)!important}
.diagram-node{box-shadow:none!important}
.case-takeaway{margin:0 0 30px!important;padding:16px 0!important;border-top:1px solid var(--doc-line)!important;border-bottom:1px solid var(--doc-line)!important;background:transparent!important;color:var(--doc-ink)!important}
.decision-grid .rejected{background:linear-gradient(180deg,rgba(244,239,232,.28),rgba(244,239,232,.5))!important}
.maker-contract{border:1px solid var(--doc-line)!important;background:linear-gradient(135deg,#fbfcf9,#eef4f3)!important;box-shadow:0 10px 26px rgba(20,52,71,.065)!important}
#siege .siege-history blockquote{padding:14px 0!important;border-left:0!important;border-top:1px solid var(--doc-line)!important;border-bottom:1px solid var(--doc-line)!important;background:transparent!important}
#siege .siege-history .verification-record pre{border:1px solid var(--doc-line)!important;border-left-width:1px!important;background:#f3f6f5!important;color:var(--doc-ink)!important}
#siege .siege-history p{max-width:88ch;word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty}
#siege .siege-history-route{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr);gap:30px;align-items:start;margin:18px 0 24px}
#siege .siege-history-route .siege-history-wide{width:100%;max-width:none;aspect-ratio:708/620;margin:0;overflow:hidden;border:1px solid var(--doc-line);background:#0b1b24}
#siege .siege-history-route .siege-history-wide img{width:113.14%;max-width:none;height:auto;border:0;transform:none}
#siege .siege-history-route .siege-history-copy{min-width:0}
#siege .siege-history-route .siege-history-copy p,#siege .siege-history-squad-copy p{max-width:none}
#siege .siege-history-route .siege-history-copy>p:first-child{margin-top:0}
#siege .siege-history-squad{grid-template-columns:minmax(0,1fr) 270px;gap:30px}
#siege .siege-history-squad-copy{min-width:0}
#siege .siege-history-squad-copy>p:first-child{margin-top:0}
#siege .siege-history-squad figure{position:sticky;top:132px;width:270px;margin:0}
#siege .percentile-note{margin:16px 0;padding:14px 16px;border:1px solid var(--doc-line);background:#f2f6f5;color:#355565}
.engineering-document strong.key-point{color:var(--doc-ink);font-weight:750}
.source-code>summary,.inline-reference>summary,.development-history>summary{min-height:44px}
.cs-toolbar button,.cem-header button{min-height:40px;padding-inline:12px}

/* 생성기 재생 조작은 한 기준선에 맞추고, 공간이 좁을 때만 두 줄로 나눈다. */
#viz-generation .ct-player{display:grid;grid-template-columns:repeat(4,max-content) max-content minmax(140px,1fr) max-content;align-items:center;gap:10px}
#viz-generation .ct-player>button,#viz-generation .ct-player>label,#viz-generation .ct-player>input,#viz-generation .ct-player>b{margin:0}
#viz-generation .ct-player>label{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px;white-space:nowrap}
#viz-generation .ct-player>label select{height:40px;margin:0}
#viz-generation .ct-player>input{width:100%;min-width:140px;height:40px}
#viz-generation .ct-player>b{min-width:58px;text-align:right;white-space:nowrap}

@media(max-width:700px){
  .reading-header b{display:none}
  .reading-header>nav{gap:5px}
  .print-document-link,.document-toc-link{padding:7px 9px;font-size:11px}
  .depth-refs{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .depth-refs-label{padding-top:0}
  .depth-ref-links{grid-template-columns:minmax(0,1fr);row-gap:0}
  .depth-refs a{white-space:normal;overflow-wrap:anywhere}
  #siege .siege-history-route,#siege .siege-history-squad{grid-template-columns:minmax(0,1fr);gap:16px}
  #siege .siege-history-route .siege-history-wide{grid-row:auto}
  #siege .siege-history-squad figure{position:static;width:min(270px,100%);max-width:270px}
  #viz-generation .ct-player{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  #viz-generation .ct-player>button{min-width:0;padding-inline:6px}
  #viz-generation .ct-player>label{grid-column:1/3;justify-self:start}
  #viz-generation .ct-player>input{grid-column:1/4;min-width:0}
  #viz-generation .ct-player>b{grid-column:4;text-align:right}
}

@media print{
  #generation .concept-diagram{break-before:page;break-inside:avoid}
}

@media print{
  @page{size:A4;margin:14mm 12mm 18mm}
  html,body{height:auto!important;overflow:visible!important;background:#fff!important;color:#111!important}
  .skip-link,.reading-header,.document-switcher,.document-footer,.depth-refs,.code-evidence-modal,#viz-generation,#viz-siege,#siege .case-media:has(.siege-preview-video),button,video{display:none!important}
  .print-video-poster{display:block!important;width:100%!important;height:auto!important;object-fit:contain!important;background:#102b3c}
  .engineering-document{width:auto!important;max-width:none!important;margin:0!important;padding:0!important}
  .chapter-tabs-ready .engineering-document>[data-chapter],.engineering-document>[data-chapter]{display:block!important;border-top:1px solid #777!important;box-shadow:none!important;break-before:page}
  .document-intro{min-height:0!important;padding:0 0 10mm!important;border-bottom:1px solid #222!important}
  .document-intro h1,.document-intro h1 em,.section-heading h2,.case-title h2{color:#111!important}
  details{display:block!important}
  details>summary{color:#111!important}
  details[open]>:not(summary){display:block}
  details.source-code>:not(summary){display:none!important}
  .source-code pre,.inline-evidence pre{max-height:none!important;overflow:visible!important;white-space:pre-wrap!important;font-size:7.5pt!important;line-height:1.45!important}
  #generation .diagram-generation{padding:16px!important}
  #generation .generation-pipeline{grid-template-columns:minmax(0,1fr) 26px minmax(0,1.18fr) 26px minmax(0,1.08fr)!important;align-items:stretch!important}
  #generation .generation-arrow{min-height:0!important;transform:none!important}
  #generation .generation-output>header{align-items:center!important;flex-direction:row!important}
  #generation .generation-artifacts{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  pre.code-skin .cs-column-head{display:none!important}
  pre.code-skin .cs-row{grid-template-columns:30px minmax(0,1fr)!important;break-inside:avoid}
  pre.code-skin .cs-code{min-width:0!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important}
  pre.code-skin .cs-note{grid-column:2!important;min-width:0!important;margin:2px 0 5px!important;padding:3px 7px!important;border:1px solid #9bb0a1!important;white-space:normal!important;font-size:7pt!important;line-height:1.4!important}
  pre.code-skin .cs-note:empty{display:none!important}
  img,svg,table,figure{max-width:100%!important}
  table{font-size:8.5pt!important}
  a{color:#111!important;text-decoration:none!important}
}