/* 인천소방 AX 연결판 — showcase.html 첫 화면(다크 섬, 라이트 테마에서도 어둡다).
 * 설계 docs/superpowers/specs/2026-10-25-showcase-board-design.md 4.1. 배경은 용어 연결판(page-glossary.css .gb-board)의 해법을 따른다:
 * 검정(--bg) 대신 계기판 색(--inst → --bg-2 → --bg)에 토큰 빛과 옅은 점 격자를 얹는다. 색은 토큰만 쓴다. */
.sc-board{position:relative;color:var(--txt);word-break:keep-all;overflow-wrap:break-word;
  background:
    radial-gradient(46% 62% at 4% 0%,rgba(var(--ember-rgb),.13),transparent 70%),
    radial-gradient(60% 46% at 62% 112%,rgba(var(--crim-rgb),.14),transparent 72%),
    radial-gradient(40% 50% at 100% 0%,rgba(var(--blue-rgb),.08),transparent 70%),
    radial-gradient(42% 52% at 0% 100%,rgba(var(--blue-rgb),.10),transparent 72%),
    linear-gradient(180deg,var(--inst) 0%,var(--bg-2) 70%,var(--bg) 100%);
  border-bottom:1px solid var(--glass-line);overflow:hidden}
.sc-board::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(rgba(var(--ink-rgb),.075) 1px,transparent 1.6px) 0 0/26px 26px;
  -webkit-mask-image:radial-gradient(70% 80% at 62% 52%,rgb(var(--black-rgb)) 25%,transparent 80%);mask-image:radial-gradient(70% 80% at 62% 52%,rgb(var(--black-rgb)) 25%,transparent 80%)}
.sc-board::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background:repeating-linear-gradient(0deg,rgba(var(--ink-rgb),.016) 0 1px,transparent 1px 3px)}
.sc-in{position:relative;z-index:1;max-width:1600px;margin:0 auto;min-height:min(78vh,690px)} /* 그림(1080×620 비율) 높이에 맞춰 — 글 칸 아래 빈자리를 줄인다 */

/* 왼쪽 글 칸 — 경로 → 라벨 → 제목 → 설명 → 수 → 버튼 */
.sc-copy{position:absolute;left:30px;top:30px;width:min(380px,29vw);z-index:2}
.sc-copy .crumb{margin-bottom:22px}
.sc-board .hero-eyebrow{margin:0 0 12px;font:600 12px/1.5 var(--font-sans);letter-spacing:.04em;color:var(--ember)}
.sc-copy h1{margin:0;font:700 clamp(40px,4.4vw,62px)/1.02 var(--font-sans);letter-spacing:-.045em;text-wrap:balance}
.sc-copy h1 .it{color:var(--ember)}
.sc-lead{margin:16px 0 0;color:var(--read);font-size:15px;line-height:1.75;text-wrap:balance}
.sc-board .hero-stats{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px;padding-top:16px;border-top:1px solid var(--glass-line)}
.sc-board .hero-stats div{display:flex;flex-direction:column-reverse;gap:2px}
.sc-board .hero-stats b{font:700 32px/1 "Space Grotesk",var(--font-sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sc-board .hero-stats div:nth-child(1) b{color:var(--ember)}
.sc-board .hero-stats div:nth-child(2) b{color:var(--amber)}
.sc-board .hero-stats span{font-size:12px;color:var(--txt-dim)}
.sc-board .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.sc-board .hero-btn{display:inline-flex;align-items:center;min-height:44px;padding:11px 18px;border:1px solid var(--glass-line);border-radius:10px;background:rgba(var(--ink-rgb),.05);color:var(--txt);font-size:14px;font-weight:600;transition:border-color .2s,transform .2s}
.sc-board .hero-btn:hover{border-color:rgba(var(--ember-rgb),.55);transform:translateY(-2px)}
.sc-board .hero-btn.is-primary{border-color:var(--ember);background:var(--ember);color:var(--on-accent)}
.sc-board .hero-btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* 오른쪽 그림 */
.sc-stage{position:absolute;right:18px;top:50%;width:min(64vw,1010px);transform:translateY(-50%);isolation:isolate}
.sc-stage::before{content:"";position:absolute;inset:-25% -12%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(30% 40% at 50% 50%,rgba(var(--ember-rgb),.16),rgba(var(--ember-rgb),.05) 55%,transparent 100%),
    radial-gradient(48% 46% at 50% 50%,rgba(var(--ink-rgb),.035),transparent 100%)}
.sc-svg{display:block;width:100%;height:auto;overflow:visible}
.sc-rings ellipse{fill:none;stroke:rgba(var(--ink-rgb),.08);stroke-width:1}
.sc-rings ellipse:first-child{fill:rgba(var(--ember-rgb),.05)}
.sc-l{stroke-width:.8;transition:opacity .3s,stroke .25s}
.sc-l1{stroke:rgba(var(--ember-rgb),.30)}
.sc-l2{stroke:rgba(var(--ink-rgb),.10)}
.sc-n{transition:opacity .45s ease}
.sc-n.sc-sys{fill:var(--ember);stroke:rgba(var(--ember-rgb),.35);stroke-width:8}
.sc-n.sc-f{fill:var(--amber)}
.sc-n.sc-term{fill:rgba(var(--ember-rgb),.72)}
.sc-n.sc-s2{fill:rgba(var(--ink-rgb),.55)}
/* 점 색은 범례대로 고리별이다(시스템 · 바로 이어진 사이트 자료 · 소방 업무 용어 · 한 걸음 더). 자료 종류는 올렸을 때 이름표에 적힌다. */
.sc-sl text{font:600 13px var(--font-sans);fill:var(--txt);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.sc-sl:hover text,.sc-sl:focus-visible text{fill:var(--amber)}
.sc-sl:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:4px}
.sc-tip{position:absolute;z-index:4;pointer-events:none;padding:6px 10px;border-radius:10px;background:var(--panel);border:1px solid var(--glass-line);font-size:13px;white-space:nowrap;transform:translate(14px,-50%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sc-tip small{color:var(--txt-dim);margin-left:8px;font-size:12px}
.sc-tip.is-left{transform:translate(calc(-100% - 14px),-50%)}

/* 평면 목록 — 좁은 화면에서만 보인다(넓은 화면은 그림의 시스템 링크가 같은 일을 한다) */
.sc-flat{display:none;margin:0;padding:0;list-style:none}
.sc-flat li{display:grid;gap:2px;padding:12px 0;border-top:1px solid var(--glass-line)}
.sc-flat a{font-weight:700;color:var(--txt)}
.sc-flat span{font-size:13px;color:var(--txt-dim)}
.sc-flat a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.sc-flat .sc-flat-total{font-size:12.5px;color:var(--txt-dim);border-top:1px solid var(--glass-line)}
.sc-hint{position:absolute;left:30px;bottom:22px;z-index:2;width:min(380px,29vw);margin:0;font-size:12.5px;line-height:1.7;color:var(--txt-dim)}
.sc-hint span{display:block;text-wrap:pretty}
.sc-board:not(.sc-js) .sc-hint-js{display:none} /* 스크립트가 없거나 판이 어긋나 정지 그림만 남으면 올리기·누르기 안내를 숨긴다 */
.sc-legend{position:absolute;right:30px;bottom:18px;z-index:2;display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;font-size:12px;color:var(--txt-dim)}
.sc-legend li{display:flex;align-items:center;gap:7px}
.sc-key{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.sc-key-sys{background:var(--ember)}
.sc-key-f{background:var(--amber)}
.sc-key-term{background:rgba(var(--ember-rgb),.72);width:6px;height:6px}
.sc-key-s2{background:rgba(var(--ink-rgb),.55)}

/* 첫 장면 — 스크립트가 판을 확인하면(.sc-js) 점·선을 숨겼다가 단계마다 켠다(assets/showcase-board.js schedule). */
.sc-board.sc-js .sc-n,.sc-board.sc-js .sc-l{opacity:0}
.sc-board.sc-js.is-sys .sc-n.sc-sys{opacity:1}
.sc-board.sc-js.is-first .sc-n.sc-f{opacity:1}
.sc-board.sc-js.is-links1 .sc-l1{opacity:1}
.sc-board.sc-js.is-second .sc-n.sc-s2,.sc-board.sc-js.is-second .sc-l2{opacity:1}
.sc-board.sc-js.is-on .sc-n,.sc-board.sc-js.is-on .sc-l{opacity:1}
/* 점에 올렸을 때: 그 점과 이웃만 밝게(완성 뒤 규칙보다 뒤에 두어 이긴다) */
.sc-board.sc-js.is-focus .sc-n{opacity:.15}
.sc-board.sc-js.is-focus .sc-l{opacity:.06}
.sc-board.sc-js.is-focus .sc-n.is-near{opacity:1}
.sc-board.sc-js.is-focus .sc-l.is-near{opacity:1;stroke:var(--amber);stroke-width:1.4}
.sc-board.sc-js.is-focus .sc-svg{cursor:pointer}
@media (prefers-reduced-motion:reduce){.sc-n,.sc-l{transition:none}}

@media (max-width:1100px){
  .sc-in{min-height:0;padding:26px 20px 22px}
  .sc-copy{position:static;width:auto;max-width:640px}
  .sc-stage,.sc-legend,.sc-hint{display:none}
  .sc-flat{display:block;margin-top:22px}
}
@media (max-width:640px){.sc-in{padding:22px 16px 18px}.sc-copy h1{font-size:38px}.sc-board .hero-stats b{font-size:28px}}
/* 인쇄 — 그림·범례·조작 안내·버튼은 빼고 경로·제목·설명·수와 평면 목록(시스템별 수)을 남긴다.
 * 다크 섬은 밝은 글자 토큰을 다시 선언하므로 사진 히어로 인쇄처럼 글자색을 바깥에서 물려받는다(배경은 인쇄에서 빠진다). */
@media print{
  .sc-board{background:none;border:0;color:inherit}
  .sc-board::before,.sc-board::after{display:none}
  .sc-stage,.sc-legend,.sc-hint,.sc-board .hero-actions{display:none}
  .sc-in{min-height:0;max-width:var(--wrap);padding:12px 30px} /* 아래 본문(.wrap)과 같은 왼쪽 선 */
  .sc-copy{position:static;width:auto;max-width:none}
  .sc-board :is(.sc-lead,.hero-stats span,.sc-flat a,.sc-flat span,.sc-flat .sc-flat-total){color:inherit}
  .sc-board .hero-stats div:nth-child(n) b{color:inherit} /* 수의 주황·호박색 규칙과 같은 특이도 — 호박색은 흰 종이에서 흐리다 */
  .sc-flat{display:block;margin-top:14px}
  .sc-flat li{break-inside:avoid}
}