/* 인천소방 AX 설계 구조 절(showcase.html #design) — 그림판·영역 카드·설계 목표. 색은 토큰만 쓴다(테마 래칫 0).
 * 절은 섬이 아니다(페이지 3층 배경이 보인다). 그림판(.scd-stage)만 다크 섬 — 계기·도식이라 라이트에서도 어둡다.
 * 정지 그림이 완성 장면이고, 스크립트가 켜지면(.scd-js) 첫 장면을 그린 뒤 .is-done 에서만 되풀이 움직임을 둔다. */
.scd{padding-top:72px;scroll-margin-top:96px;word-break:keep-all;overflow-wrap:break-word}
.scd [data-tone="ember"]{--tone:var(--ember);--tone-rgb:var(--ember-rgb)}
.scd [data-tone="blue"]{--tone:var(--blue);--tone-rgb:var(--blue-rgb)}
.scd [data-tone="amber"]{--tone:var(--amber);--tone-rgb:var(--amber-rgb)}
.scd [data-tone="green"]{--tone:var(--green);--tone-rgb:var(--green-rgb)}

/* 머리 — 라벨 → 제목 → 설명(문장마다 한 줄) · 오른쪽 수 */
.scd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-bottom:26px}
.scd-head-copy{max-width:760px}
.scd-eyebrow{margin:0;font:600 12px/1.4 "Space Grotesk",var(--font-sans);letter-spacing:.14em;color:var(--ember)}
.scd h2{margin:10px 0 0;font-size:clamp(28px,3.4vw,40px);font-weight:700;line-height:1.2;letter-spacing:-.035em;text-wrap:balance}
.scd-lead{margin:14px 0 0;color:var(--read);font-size:15.5px;line-height:1.75}
.scd-lead span{display:block;text-wrap:balance}
.scd-stats{display:flex;gap:10px 30px;margin:0}
.scd-stats div{display:flex;flex-direction:column-reverse;gap:4px}
.scd-stats dt{font-size:12px;color:var(--txt-dim)}
.scd-stats dd{margin:0;font:700 34px/1 "Space Grotesk",var(--font-sans);letter-spacing:-.03em;color:var(--txt);font-variant-numeric:tabular-nums}
.scd-stats div:last-child dd{color:var(--ember)}

/* 그림판 — 다크 섬 카드. 인천소방 AX 연결판(.sc-board)과 같은 계기판 바탕 */
.scd-stage{position:relative;margin:0;overflow:hidden;border:1px solid var(--glass-line);border-radius:22px;color:var(--txt);box-shadow:var(--shadow-card);
  background:
    radial-gradient(40% 60% at 0% 0%,rgba(var(--ember-rgb),.14),transparent 70%),
    radial-gradient(30% 50% at 44% 0%,rgba(var(--blue-rgb),.09),transparent 72%),
    radial-gradient(34% 54% at 72% 100%,rgba(var(--amber-rgb),.08),transparent 72%),
    radial-gradient(26% 50% at 100% 50%,rgba(var(--green-rgb),.10),transparent 70%),
    linear-gradient(180deg,var(--inst) 0%,var(--bg-2) 80%,var(--bg) 100%)}
.scd-stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(rgba(var(--ink-rgb),.07) 1px,transparent 1.6px) 0 0/26px 26px;
  -webkit-mask-image:radial-gradient(75% 85% at 60% 50%,rgb(var(--black-rgb)) 30%,transparent 85%);mask-image:radial-gradient(75% 85% at 60% 50%,rgb(var(--black-rgb)) 30%,transparent 85%)}
.scd-stage::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:repeating-linear-gradient(0deg,rgba(var(--ink-rgb),.016) 0 1px,transparent 1px 3px)}
.scd-svg{position:relative;z-index:1;padding:18px 16px 0}
.scd-still{display:block;width:100%;height:auto;overflow:visible}
.scd-still text{font-family:var(--font-sans)}

.scd-box{fill:rgba(var(--tone-rgb),.035);stroke:rgba(var(--tone-rgb),.5);stroke-width:1.2;transition:stroke .3s,stroke-width .3s}
.scd-stage.is-done .scd-box.is-loop{stroke-dasharray:7 7 !important;animation:scd-march 1.6s linear infinite}
@keyframes scd-march{to{stroke-dashoffset:-28}}
.scd-band{fill:rgba(var(--tone-rgb),.045);pointer-events:none;transition:fill .3s}
.scd-head-hit{fill:transparent}
.scd-head-no{font:600 10.5px "Space Grotesk",var(--font-sans);letter-spacing:.14em;fill:rgba(var(--tone-rgb),.75)}
.scd-head-name{font-size:17px;font-weight:700;fill:var(--tone)}
.scd-loop-arc{fill:none;stroke:var(--green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.scd-spin{transform-box:fill-box;transform-origin:center}
.scd-stage.is-done .scd-spin{animation:scd-rot 6s linear infinite}
@keyframes scd-rot{to{transform:rotate(360deg)}}

.scd-sys{cursor:pointer;transition:opacity .3s}
.scd-hit{fill:transparent}
.scd-sysname{font-size:15.5px;font-weight:600;fill:var(--txt);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
/* 상위 시스템 줄 — 이름을 크게, 위에 '상위 시스템' 표시. 하위 모듈 선은 왼쪽 세로줄(.scd-spine)에서 갈라진다 */
.scd-sys.is-parent .scd-sysname{font-size:18.5px;font-weight:700}
.scd-sys.is-parent .scd-track{stroke-width:2.6}
.scd-sysrole{font:600 11px var(--font-sans);letter-spacing:.12em;fill:var(--ember)}
.scd-spine{fill:none;stroke:rgba(var(--ink-rgb),.3);stroke-width:1.7;stroke-linecap:round}
.scd-tree-cap{font-size:11.5px;font-weight:600;letter-spacing:.04em;fill:var(--txt-dim)}
.scd-track{fill:none;stroke-width:1.7;stroke-linecap:round;stroke:rgba(var(--ink-rgb),.3)}
.scd-sys.is-ai .scd-track{stroke:url(#scd-trk);stroke-width:1.9}
.scd-track-glow{fill:none;stroke:var(--ember);stroke-width:7;opacity:.17;filter:url(#scd-blur)}
.scd-stop-a{stop-color:rgb(var(--ink-rgb));stop-opacity:.32}
.scd-stop-b{stop-color:var(--amber);stop-opacity:.62}
.scd-stop-c{stop-color:var(--ember);stop-opacity:1}
.scd-gap{fill:rgba(var(--ink-rgb),.2)}
.scd-st{cursor:help}
.scd-dot{fill:var(--tone)}
.scd-halo{fill:rgba(var(--tone-rgb),.12);stroke:rgba(var(--tone-rgb),.5);stroke-width:1;transform-box:fill-box;transform-origin:center}
.scd-sys:not(.is-ai) .scd-halo{fill:none;stroke:rgba(var(--tone-rgb),.28)}
.scd-stage.is-done .scd-sys.is-ai .scd-halo{animation:scd-breathe 2.8s ease-in-out infinite}
.scd-stage.is-done .scd-sys.is-ai .scd-st:nth-child(odd) .scd-halo{animation-delay:-1.4s}
@keyframes scd-breathe{50%{transform:scale(1.45);opacity:.35}}
.scd-stlabel{font-size:13px;font-weight:500;fill:var(--read);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round;transition:fill .25s}
.scd-stage.is-paused :is(.scd-box.is-loop,.scd-spin,.scd-halo,.scd-goal-ring,.scd-goal-arcs){animation:none !important}

.scd-goal-mark{--gs:1}
.scd-goal-glow{fill:url(#scd-goalglow)}
.scd-gstop-a{stop-color:var(--ember);stop-opacity:.55}
.scd-gstop-b{stop-color:var(--ember);stop-opacity:0}
.scd-goal-ring{fill:none;stroke:rgba(var(--amber-rgb),.42);stroke-width:1;stroke-dasharray:3 5;transform-box:fill-box;transform-origin:center}
.scd-goal-arcs{transform-box:fill-box;transform-origin:center}
.scd-goal-arc{fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round}
.scd-goal-core{fill:var(--amber);stroke:rgba(var(--ember-rgb),.55);stroke-width:7;transform-box:fill-box;transform-origin:center;transform:scale(var(--gs))}
.scd-stage.is-done .scd-goal-ring{animation:scd-rot 22s linear infinite reverse}
.scd-stage.is-done .scd-goal-arcs{animation:scd-rot 9s linear infinite}
.scd-goal-mark.is-hit .scd-goal-core{animation:scd-hit .38s ease-out}
@keyframes scd-hit{40%{transform:scale(1.28)}}
.scd-goal-name{font:700 12px var(--font-sans);letter-spacing:.12em;fill:var(--amber)}
.scd-goal-line{font-size:15px;font-weight:700;fill:var(--txt)}
.scd-part{fill:var(--tone);filter:drop-shadow(0 0 4px rgba(var(--tone-rgb),.95))}

/* 올렸을 때 — 그 선이나 그 영역만 밝게 */
.scd-stage.is-focus .scd-sys:not(.is-near){opacity:.16}
.scd-stage.is-focus .scd-sys.is-near .scd-track{stroke-width:2.6}
.scd-stage.is-focus .scd-part{opacity:.15 !important}
.scd-stage.is-areafocus :is(.scd-st,.scd-gap){opacity:.16;transition:opacity .25s}
.scd-stage[data-area="prompt"] .scd-st[data-area="prompt"],.scd-stage[data-area="context"] .scd-st[data-area="context"],
.scd-stage[data-area="harness"] .scd-st[data-area="harness"],.scd-stage[data-area="loop"] .scd-st[data-area="loop"]{opacity:1}
.scd-stage[data-area="prompt"] .scd-head[data-area="prompt"] .scd-band,.scd-stage[data-area="context"] .scd-head[data-area="context"] .scd-band,
.scd-stage[data-area="harness"] .scd-head[data-area="harness"] .scd-band,.scd-stage[data-area="loop"] .scd-head[data-area="loop"] .scd-band{fill:rgba(var(--tone-rgb),.16)}
.scd-stage[data-area="prompt"] .scd-box[data-area="prompt"],.scd-stage[data-area="context"] .scd-box[data-area="context"],
.scd-stage[data-area="harness"] .scd-box[data-area="harness"],.scd-stage[data-area="loop"] .scd-box[data-area="loop"]{stroke:var(--tone);stroke-width:2}

.scd-tip{position:absolute;z-index:4;pointer-events:none;max-width:320px;padding:10px 13px;border-radius:12px;background:var(--pop);border:1px solid var(--glass-line);border-top:2px solid var(--tone,var(--ember));box-shadow:var(--shadow-pop);font-size:12.5px;line-height:1.55;transform:translate(18px,-50%)}
.scd-tip.is-left{transform:translate(calc(-100% - 18px),-50%)}
.scd-tip b{display:block;margin-bottom:5px;font-size:13px}
.scd-tip ul{margin:0;padding:0 0 0 14px;color:var(--read)}

/* 아래 띠 — 설명 한 줄 · 범례 · 단추 */
.scd-foot{position:relative;z-index:1;display:grid;gap:10px;padding:6px 22px 18px}
.scd-detail{min-height:3.2em;margin:0;padding:10px 14px;border-radius:12px;background:var(--well);font-size:13.5px;line-height:1.6;color:var(--read)}
.scd-detail b{margin-right:10px;color:var(--txt)}
.scd-detail b[data-tone]{color:var(--tone)}
.scd-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px}
.scd-legend ul{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;list-style:none;font-size:12px;color:var(--txt-dim)}
.scd-legend li{display:flex;align-items:center;gap:7px}
.scd-key{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--tone)}
.scd-key.is-flow{width:22px;height:3px;border-radius:2px;background:linear-gradient(90deg,rgba(var(--ink-rgb),.3),var(--amber),var(--ember));box-shadow:0 0 8px rgba(var(--ember-rgb),.8)}
.scd-key-flow{margin-left:4px;padding-left:16px;border-left:1px solid var(--glass-line)}
.scd-ctrl{display:flex;gap:8px;margin:0}
.scd-ctrl button{min-height:36px;padding:7px 14px;border:1px solid var(--glass-line);border-radius:99px;background:rgba(var(--ink-rgb),.05);color:var(--txt);font:600 12.5px var(--font-sans);cursor:pointer}
.scd-ctrl button:hover{border-color:rgba(var(--ember-rgb),.55)}
.scd-ctrl button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* 좁은 화면 — 그림 대신 같은 데이터의 네 칸 띠 */
.scd-flat{display:none;position:relative;z-index:1;margin:0;padding:16px 18px 4px;list-style:none}
.scd-flat li{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--glass-line)}
.scd-flat li:first-child{border-top:0}
.scd-flat-name{font-size:14px}
.scd-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.scd-seg{display:flex;align-items:center;justify-content:center;min-height:28px;border-radius:7px;font-size:11px;font-weight:600;border:1px solid var(--glass-line);color:var(--txt-faint)}
.scd-seg.is-on{background:var(--tone);border-color:transparent;color:var(--on-accent)}
.scd-flat-tag{font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--ember)}
.scd-flat li.is-parent .scd-flat-name{font-size:16px}
.scd-flat li.is-module{margin-left:6px;padding-left:14px;border-left:1.5px solid rgba(var(--ink-rgb),.3)}
.scd-flat li.is-module + li.is-module{border-top:0;padding-top:13px}

/* 영역별 설계 카드 */
.scd-sub{margin:56px 0 16px;font-size:20px;font-weight:700;letter-spacing:-.01em}
.scd-areas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none;align-items:stretch}
.scd-area{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:22px 20px 20px;border:1px solid var(--glass-line);border-top:2px solid var(--tone);border-radius:18px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow-card);scroll-margin-top:120px;transition:border-color .25s,box-shadow .25s}
.scd-area:hover{border-color:rgba(var(--tone-rgb),.45);box-shadow:var(--shadow-hover)}
.scd-area::before{content:"";position:absolute;inset:0 0 auto;height:96px;pointer-events:none;background:linear-gradient(180deg,rgba(var(--tone-rgb),.12),transparent)}
.scd-area-top{position:relative;display:flex;align-items:flex-start;justify-content:space-between}
.scd-nest{display:block;width:56px;height:48px}
.scd-nest rect{fill:rgba(var(--tone-rgb),.10);stroke:var(--tone);stroke-width:1.4}
.scd-no{font:700 54px/.9 "Space Grotesk",var(--font-sans);letter-spacing:-.04em;color:rgba(var(--tone-rgb),.2)}
.scd-en{position:relative;margin:14px 0 0;font:600 11px "Space Grotesk",var(--font-sans);letter-spacing:.16em;color:var(--tone)}
.scd-area h4{position:relative;margin:3px 0 10px;font-size:21px;letter-spacing:-.03em}
.scd-goal-t{margin:0;color:var(--read);font-size:14px;line-height:1.7;text-wrap:balance}
.scd-items{margin:16px 0 0;padding:14px 0 0;list-style:none;display:grid;gap:8px;border-top:1px solid var(--glass-line)}
.scd-items li{display:grid;gap:1px;padding-left:14px;position:relative;font-size:12.5px;line-height:1.5}
.scd-items li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--tone)}
.scd-items b{font-weight:600;color:var(--txt)}
.scd-items span{color:var(--txt-dim)}
.scd-next{margin:auto 0 0;padding-top:16px;font-size:12.5px;line-height:1.6;color:var(--read);text-wrap:pretty}
.scd-next em{display:block;width:fit-content;margin:0 0 6px;padding:3px 8px;border-radius:99px;font-style:normal;font-size:11px;font-weight:600;color:var(--tone);background:rgba(var(--tone-rgb),.10);border:1px solid rgba(var(--tone-rgb),.3)}

/* 설계 목표 */
.scd-goal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px 40px;align-items:center;margin-top:56px;padding:30px;border:1px solid rgba(var(--ember-rgb),.28);border-radius:22px;
  background:radial-gradient(60% 120% at 0% 0%,rgba(var(--ember-rgb),.10),transparent 70%),radial-gradient(50% 100% at 100% 100%,rgba(var(--amber-rgb),.08),transparent 70%),var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.scd-goal h3{margin:10px 0 0;font-size:clamp(24px,2.6vw,32px);line-height:1.25;letter-spacing:-.035em;text-wrap:balance;background:linear-gradient(90deg,var(--ember),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.scd-princ{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.scd-princ li{display:grid;gap:3px;padding:14px 16px;border-radius:14px;background:var(--well);border:1px solid var(--glass-line)}
.scd-princ b{font-size:14.5px;color:var(--txt)}
.scd-princ span{font-size:13px;line-height:1.6;color:var(--read);text-wrap:balance}

/* 이 스튜디오의 지식 구조(#knowledge, 2026-10-26 기획 13절 4) — 설계 구조 그림의 상위 시스템(이 스튜디오)을 이루는 두 그림:
 * 세 층 그림(figure.hs-scene — assets/home-scene.css, 섬 아님)과 소방 지식 그래프 상황판(section.kg-board.theme-dark — assets/knowledge-graph.css, 화면 폭 다크 섬).
 * 머리는 설계 목표와 같은 이름표·설명 꼴, 제목은 그 절의 h3 와 같은 크기(그라디언트 글자는 설계 목표 한 곳에만) */
.scd-know{margin-top:96px;scroll-margin-top:96px}
.scd-know-head{max-width:760px;margin-bottom:30px}
.scd-know h3{margin:10px 0 0;font-size:clamp(24px,2.6vw,32px);font-weight:700;line-height:1.25;letter-spacing:-.035em;text-wrap:balance}
.scd-know .hs-scene{margin-bottom:56px}

@media (max-width:1100px){
  .scd-areas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scd-goal{grid-template-columns:1fr}
}
@media (max-width:760px){
  .scd-know{margin-top:72px}
  .scd-svg,.scd-tip,.scd-foot{display:none}
  .scd-flat{display:block}
  .scd-areas{grid-template-columns:1fr}
  .scd-goal{padding:22px}
  .scd-head{align-items:flex-start}
}
/* 인쇄 — 다크 섬 그림판은 바탕이 빠지므로 그림 대신 네 칸 띠를 싣고, 글자색은 바깥에서 물려받는다 */
@media print{
  .scd-stage{background:none;border:0;box-shadow:none;color:inherit}
  .scd-stage::before,.scd-stage::after,.scd-svg,.scd-tip,.scd-foot{display:none}
  .scd-flat{display:block}
  .scd-flat-name{color:inherit}
  .scd-area,.scd-goal,.scd-princ li{break-inside:avoid}
}