@import url('/static/vendor/fonts/fonts.css');

/* ── 기본 ── */
html,body{height:100%;margin:0;}
body{font-family:'Noto Sans KR',sans-serif;background:#f8fafd;color:#1e293b;-webkit-font-smoothing:antialiased;letter-spacing:-0.02em;}
.jm{font-family:'JetBrains Mono',monospace;}

/* ── 소개 페이지 ── */
#page-intro{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:#f8fafd;}
.intro-phase{display:none;flex-direction:column;flex:1;overflow-y:auto;}
.intro-phase.active{display:flex;}
.nav-dot{width:10px;height:10px;border-radius:50%;background:#cbd5e1;transition:all .3s;cursor:pointer;}
.nav-dot.active{background:#2563eb;width:24px;border-radius:5px;}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeInUp .5s ease-out forwards;}
.layer-card-l{
  transition:all .25s ease;
  border: 1.5px solid #cbd5e1;
  border-left: 4px solid;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(149,157,165,0.10);
}
.layer-card-l:hover{
  transform:translateY(-2px) translateX(2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: #94a3b8;
}
.intro-tab{cursor:pointer;transition:all .25s;border-bottom:4px solid transparent;padding-bottom:.875rem;}
.intro-tab.active{color:#2563eb!important;border-bottom-color:#2563eb!important;font-weight:900;}
.t18-part{transition:all .6s ease;}
.t18-part.state-off{filter:grayscale(85%) brightness(.7)!important;}
.t18-part.state-on{filter:brightness(1.2)!important;}
/* 번호 뱃지 - 부모 filter 영향 받지 않게 */
.t18-step-badge{filter:none!important;isolation:isolate;}
/* LED 막대형 부품들 (transform 없음) hover - scale + 블러만 */
.t18-part[data-id="led-living"]:hover,
.t18-part[data-id="led-kitchen"]:hover{
  transform:scale(1.10)!important;
  filter:brightness(1.3) drop-shadow(0 0 12px rgba(251,191,36,.8))!important;
  box-shadow:0 0 16px rgba(251,191,36,.6)!important;
  z-index:9!important;
}
/* 세로/가로 LED (translate 있음) hover */
.t18-part[data-id="welcome-light"]:hover,
.t18-part[data-id="led-bedroom"]:hover{
  transform:translate(-50%,-50%) scale(1.10)!important;
  filter:brightness(1.3) drop-shadow(0 0 12px rgba(251,191,36,.8))!important;
  box-shadow:0 0 16px rgba(251,191,36,.6)!important;
}
.t18-part:hover{transform:translate(-50%,-50%) scale(1.10)!important;box-shadow:0 0 12px rgba(255,255,255,.7), 0 4px 12px rgba(0,0,0,.25)!important;z-index:99!important;}
.layer-card{
  transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor:pointer;
  border-left-width:3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02), 0 4px 12px rgba(149,157,165,0.05);
}
.layer-card:hover:not(.disabled){
  transform: translateY(-2px);
  border-left-width:8px;
  padding-left:calc(.75rem - 6px);
  box-shadow: 0 20px 25px -5px rgba(139,92,246,.15), 0 10px 10px -5px rgba(139,92,246,.1);
}
.layer-card:active:not(.disabled){
  filter:brightness(1.1);
  border-left-width:10px;
  padding-left:calc(.75rem - 8px);
}
.layer-card.disabled{opacity:.35;cursor:not-allowed;filter:grayscale(.7);}
@keyframes layerCardActivate{0%{filter:brightness(1);box-shadow:0 0 0 0 rgba(139,92,246,0);}50%{filter:brightness(1.15);box-shadow:0 0 30px rgba(139,92,246,.35);}100%{filter:brightness(1);box-shadow:0 0 0 0 rgba(139,92,246,0);}}
.layer-card.activating{animation:layerCardActivate .5s ease;}
.exam-table th{background:#f8fafc;font-weight:700;padding:8px 12px;border:1px solid rgba(226, 232, 240, 0.7);color:#475569;text-align:left;font-size:.8125rem;}
.exam-table td{padding:8px 12px;border:1px solid rgba(226, 232, 240, 0.7);font-weight:400;color:#475569;font-size:.8125rem;}
.badge-soon{background:#fffbeb;color:#d97706;border:1px solid #fcd34d;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;}
.layer-badge{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);padding:2px 8px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;display:inline-block;margin-bottom:2px;}
.logo-placeholder{width:140px;height:36px;border:1.5px dashed rgba(203, 213, 225, 0.6);border-radius:.5rem;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:#94a3b8;letter-spacing:.05em;background:#ffffff;box-shadow: 0 1px 2px rgba(0,0,0,0.02);}

/* ── 시뮬레이터 공통 ── */
#page-sim{display:none;flex-direction:column;height:100vh;overflow:hidden;background:#f8fafd;}
.sidebar-header{background:white;border-bottom:1px solid rgba(226,232,240,.7);padding:1rem;flex-shrink:0;}
.main-header{background:white;border-bottom:1px solid rgba(226,232,240,.7);padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,0.02);}
.sim-main-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.sim-body{display:flex;flex:1;overflow:hidden;}
.sidebar{background:white;border-right:1px solid rgba(226, 232, 240, 0.7);width:16rem;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;}
.sidebar-nav-fixed{flex:0 0 auto;display:flex;flex-direction:column;gap:.375rem;padding:0 1rem;}
.sidebar-hint{flex:1;padding:0.75rem 1rem;border-top:1px solid rgba(241, 245, 249, 0.8);margin-top:.5rem;overflow-y:auto;min-height:0;background:#fafbfc;}
.sim-main{flex:1;overflow-y:auto;padding:0.75rem 1.25rem;background:#f8fafd;}
.nav-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.625rem .75rem;
  border-radius:.75rem;
  border: 1px solid #e2e8f0;
  color:#64748b;
  font-weight:700;
  font-size:.875rem;
  transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
  text-align:left;
  letter-spacing:-.015em;
  white-space:nowrap;
  overflow:hidden;
  background:#ffffff;
}
.nav-btn span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-btn:hover{background:#f8fafc;color:#0f172a;transform:translateX(2px);border-color:#cbd5e1;}
.nav-btn.active{color:white!important;border-color:transparent!important;}
.nav-num{font-family:'JetBrains Mono',monospace;font-size:0.75rem;font-weight:800;background:rgba(255,255,255,.2);border-radius:.375rem;padding:2px 4px;min-width:28px;flex-shrink:0;text-align:center;}
.nav-btn:not(.active) .nav-num{background:#f1f5f9;color:#94a3b8;}

/* Layer별 Active 테마 적용 */
body[data-current-layer="intro"] .nav-btn.active {
  background: #8b5cf6!important;
  box-shadow: 0 4px 12px -2px rgba(139, 92, 246, 0.35)!important;
}
body[data-current-layer="L1"] .nav-btn.active {
  background: #d97706!important;
  box-shadow: 0 4px 12px -2px rgba(217, 119, 6, 0.35)!important;
}
body[data-current-layer="L2"] .nav-btn.active {
  background: #059669!important;
  box-shadow: 0 4px 12px -2px rgba(5, 150, 105, 0.35)!important;
}
body[data-current-layer="L3"] .nav-btn.active {
  background: #2563eb!important;
  box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.35)!important;
}
body[data-current-layer="L4"] .nav-btn.active {
  background: #7c3aed!important;
  box-shadow: 0 4px 12px -2px rgba(124, 58, 237, 0.35)!important;
}

.card{
  background:white;
  border:1px solid #cbd5e1;
  border-radius:1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 10px 20px -2px rgba(149,157,165,0.10);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: #94a3b8;
}
.task-banner{
  background: white;
  border: 1px solid #cbd5e1;
  border-left: 6px solid #64748b;
  border-radius:1rem;
  padding:1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.01), 0 4px 12px rgba(149,157,165,0.03);
}
.audit-panel{
  background:white;
  border:1px solid #cbd5e1;
  border-radius:1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.01), 0 8px 24px rgba(149,157,165,0.04);
}
.hint-box{
  background:#fffdf5;
  border:1px solid rgba(253, 230, 138, 0.6);
  border-left:4px solid #d97706;
  border-radius:.75rem;
  padding:1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.01);
}
.hidden-task{display:none!important;}

/* ── 멀티미터 ── */
.master-board{background:linear-gradient(145deg,#1e293b,#0f172a);border:4px solid #334155;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);}
.digital-display{font-family:'JetBrains Mono',monospace;background:#050505;color:#22c55e;text-shadow:0 0 12px rgba(34,197,94,.8);}
.terminal-glow{box-shadow:0 0 30px rgba(59,130,246,.6);border-color:#60a5fa!important;transform:scale(1.06);}

/* ── 게이지 ── */
.gauge-bar{transition:width .55s cubic-bezier(.34,1.56,.64,1);}
input[type="range"]{accent-color:#2563eb;}

/* ── 평면도 ── */
.floor-plan{background:#ffffff;border:1px solid rgba(226, 232, 240, 0.8);position:relative;
  background-image:linear-gradient(rgba(148,163,184,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,0.08) 1px,transparent 1px);
  background-size:40px 40px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.01), 0 8px 24px rgba(149,157,165,0.03);
}
.room{border:1.5px solid #cbd5e1;background:rgba(250,251,252,0.92);display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;color:#475569;position:absolute;pointer-events:none;padding-top:22px;}
.furniture{position:absolute;background:rgba(148,163,184,0.08);border:1px solid rgba(148,163,184,0.25);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:rgba(100,116,139,0.6);pointer-events:none;z-index:10;}
.snap-point{position:absolute;width:18px;height:18px;background:transparent;border:2px solid #2563eb;border-radius:50%;transform:translate(-50%,-50%);z-index:50;pointer-events:none;}
.node{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;z-index:200;cursor:grab;border:3px solid white;box-shadow:0 8px 24px rgba(149,157,165,0.15);touch-action:none;}
.node:active{cursor:grabbing;}
.ap-main{background:#3b82f6;}
.ap-mesh{background:#0d9488;}
.sensor-mmwave{background:#f43f5e;box-shadow:0 0 22px rgba(244,63,94,.45);}
.sensor-pir{background:#d97706;box-shadow:0 0 22px rgba(217,119,6,.45);}
.signal-indicator{padding:4px 10px;border-radius:6px;font-size:10px;font-weight:900;font-family:'JetBrains Mono',monospace;border:1px solid rgba(0,0,0,.04);transition:all .3s;}
.sig-excellent{background:#dcfce7;color:#166534;border-color:#86efac;}
.sig-good{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd;}
.sig-weak{background:#fef9c3;color:#854d0e;border-color:#fde047;}
.sig-dead{background:#fee2e2;color:#991b1b;border-color:#fca5a5;}
.range-circle{position:absolute;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);border:2px dashed rgba(244,63,94,.5);background:rgba(244,63,94,.08);z-index:100;}
.range-pir-beam{position:absolute;width:0;height:0;border-left:160px solid transparent;border-right:149px solid transparent;border-bottom:255px solid rgba(217,119,6,.22);pointer-events:none;transform-origin:top center;z-index:99;transition:transform .3s cubic-bezier(.4,0,.2,1);}

/* ── 스캔 오버레이 ── */
.scan-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(59,130,246,.06);display:none;z-index:150;pointer-events:none;}
.scan-line{width:100%;height:3px;background:linear-gradient(to bottom,transparent,#2563eb,transparent);position:absolute;animation:scanMove 2s linear infinite;}
@keyframes scanMove{0%{top:0}100%{top:100%}}

/* ── Wi-Fi 피크 ── */
.wifi-peak{position:absolute;bottom:0;transform:translateX(-50%);background:linear-gradient(to top,rgba(220,38,38,.55),rgba(220,38,38,0));border-top:3px solid rgba(248,113,113,.85);border-radius:100% 100% 0 0;pointer-events:none;}

/* ── 채널 그리드 ── */
.ch-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem;}

/* ── 기타 ── */
::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}
@keyframes pulse-soft{0%,100%{opacity:1}50%{opacity:.65}} .pulse-soft{animation:pulse-soft 2s infinite}
@keyframes pulse-scale {
  0% { transform: translate(-50%,-50%) scale(0.2); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0.3; }
}
.pulse-anim { animation: pulse-scale 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes spin{to{transform:rotate(360deg)}}


/* ═══════════════════════════════════════════════════════════
   PHASE 1 통합 랜딩 인트로 CSS (랜딩 v11 + 강연 차트)
   - 모든 selector는 #intro-phase-1 스코프로 격리됨
═══════════════════════════════════════════════════════════ */

/* Phase 1 스크롤 컨테이너 */
#intro-phase-1.intro-phase{
  display:none; /* 비활성 시 */
}
#intro-phase-1.intro-phase.active{
  display:block; overflow-y:auto; height:100vh;
  scroll-snap-type:y mandatory;
  font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  letter-spacing:-.02em; font-size:1.18rem; line-height:1.7;
  color:#334155; background:#f8fafd;
  -webkit-font-smoothing:antialiased;
}


#intro-phase-1{
  --bg:#f8fafd;
  --ink-900:#0f172a; --ink-700:#334155; --ink-500:#64748b; --ink-400:#94a3b8;
  --line:#cbd5e1; --line-soft:#e2e8f0;
  --card:#ffffff;
  --blue-600:#2563eb; --blue-700:#1d4ed8;
  --t-elec:#d97706;   /* 전기 */
  --t-space:#059669;  /* 공간 */
  --t-conn:#2563eb;   /* 연결 */
  --t-intel:#7c3aed;  /* 지능 */
  --slate-950:#020617; --slate-900:#0f172a; --indigo-950:#1e1b4b;
  --font:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --shadow-card:0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.06), 0 12px 32px rgba(15,23,42,.05);
  --shadow-hover:0 2px 6px rgba(15,23,42,.06), 0 10px 24px rgba(15,23,42,.09), 0 22px 48px rgba(15,23,42,.08);
  --maxw:1120px; --reading:680px;
  --gutter:clamp(1.5rem,5vw,3.5rem);
}



@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
#intro-phase-1 h1, #intro-phase-1 h2, #intro-phase-1 h3 {margin:0; color:var(--ink-900); letter-spacing:-.035em; line-height:1.12; font-weight:900;
  word-break:keep-all; overflow-wrap:break-word;}
#intro-phase-1 p {margin:0; word-break:keep-all;}
#intro-phase-1 a {color:inherit;}
#intro-phase-1 .wrap {max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter);}
#intro-phase-1 .mono-label { font-family:var(--mono); font-weight:700; text-transform:uppercase; letter-spacing:.22em; font-size:.82rem; }

/* ============================================================ 1. HERO ============================================================ */
#intro-phase-1 .hero { height:200vh; scroll-snap-align:start; }
#intro-phase-1 .hero-pin {
  position:sticky; top:0; height:100vh; display:flex; align-items:center; padding-bottom:6rem; overflow:hidden;
  color:#e2e8f0;
  background:
    radial-gradient(80% 60% at 75% 15%, rgba(124,58,237,.30), transparent 60%),
    radial-gradient(70% 50% at 10% 95%, rgba(37,99,235,.22), transparent 60%),
    linear-gradient(165deg, var(--slate-950) 0%, var(--slate-900) 48%, var(--indigo-950) 100%);
}
#intro-phase-1 .hero-pin::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(80% 80% at 50% 40%,#000,transparent 78%);
}
#intro-phase-1 .hero .wrap {position:relative; z-index:1;}
#intro-phase-1 .hero .eyebrow { color:#a5b4fc; margin-bottom:2.4rem; display:flex; align-items:center; flex-wrap:wrap; gap:.1em;
  font-size:clamp(1.3rem,1.8vw,1.65rem); letter-spacing:.15em; }
#intro-phase-1 .hero .eyebrow .dot { opacity:.45; margin:0 .55em; }
#intro-phase-1 .hero .eyebrow .brand { font-weight:800; color:#c4b5fd; text-shadow:0 2px 16px rgba(124,58,237,.4); }
#intro-phase-1 .hero h1 {
  color:#f8fafc; font-size:clamp(2.3rem,4.8vw,4rem); line-height:1.12; letter-spacing:-.045em; font-weight:900;
  max-width:36ch;
}
#intro-phase-1 .hero h1 em { font-style:normal; color:#c4b5fd; }
#intro-phase-1 .hero .sub { margin-top:2rem; color:#94a3b8; font-size:clamp(1.05rem,1.5vw,1.25rem); max-width:none; font-weight:400; }
#intro-phase-1 .scroll-cue { position:absolute; bottom:3rem; left:50%; transform:translateX(-50%); color:#c4b5fd;
  font-family:var(--mono); font-size:1.05rem; font-weight:800; letter-spacing:.45em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:.9rem; z-index:5; animation:scrollCueBlink 2s ease-in-out infinite; pointer-events:none; }
#intro-phase-1 .scroll-cue .line { width:2px; height:56px; background:linear-gradient(#a5b4fc,transparent); }

/* ============================================================ 2. ORCHESTRATION — the heart (rebuilt) ============================================================ */
#intro-phase-1 .orchestra { position:relative; height:200vh; background:var(--bg); scroll-snap-align:start; }
#intro-phase-1 .stage { position:sticky; top:0; height:100vh; overflow:hidden; }
#intro-phase-1 .stage-head { position:absolute; top:clamp(2.4rem,7vh,4.5rem); left:0; right:0; text-align:center; padding-inline:var(--gutter); z-index:6; }
#intro-phase-1 .stage-head .eyebrow { color:var(--blue-600); margin-bottom:.9rem; }
#intro-phase-1 .stage-head h2 { font-size:clamp(2rem,3.8vw,3rem); max-width:22ch; margin:0 auto; }

#intro-phase-1 .field { position:absolute; inset:0; z-index:2; }

/* connection lines (drawn at convergence) */
#intro-phase-1 .links { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .15s linear; }
#intro-phase-1 .links .lnk { stroke-width:1.8; vector-effect:non-scaling-stroke; stroke-linecap:round; opacity:.9; }

/* AI@Home core — the emphasized centre */
#intro-phase-1 .core { position:absolute; left:50%; top:60%; transform:translate(-50%,-50%) scale(.6); opacity:0; z-index:3;
  width:182px; height:182px; display:grid; place-items:center; will-change:transform,opacity; }
#intro-phase-1 .core .ring { position:absolute; inset:-28px; border-radius:50%;
  background:conic-gradient(from 220deg, var(--t-elec), var(--t-space), var(--t-conn), var(--t-intel), var(--t-elec));
  -webkit-mask:radial-gradient(farthest-side,transparent 60%,#000 62%); mask:radial-gradient(farthest-side,transparent 60%,#000 62%);
  opacity:calc(.28 + .72*var(--ignite,0));
  filter:saturate(calc(1 + .3*var(--ignite,0)));
  transform:rotate(calc(var(--ignite,0)*45deg)) scale(calc(1 + .07*var(--ignite,0))); }
#intro-phase-1 .core .disc { width:142px; height:142px; border-radius:50%;
  background:radial-gradient(120% 120% at 50% 22%, #8b5cf6, var(--t-intel) 72%);
  box-shadow:0 0 0 7px rgba(124,58,237,.16), 0 22px 60px rgba(124,58,237,calc(.34 + .4*var(--ignite,0)));
  display:grid; place-items:center; color:#fff; text-align:center; padding:0 .5rem; }
#intro-phase-1 .core .disc b { font-size:1.55rem; font-weight:900; letter-spacing:-.04em; display:block; line-height:1; }
#intro-phase-1 .core .disc span { font-size:.94rem; font-weight:700; letter-spacing:-.01em; margin-top:.45rem; display:block; color:rgba(255,255,255,.92); }

#intro-phase-1 .node { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4;
  width:clamp(230px,19vw,290px); background:var(--card); border:2px solid var(--line); border-radius:20px;
  padding:2.6rem 2rem; box-shadow:var(--shadow-card); will-change:left,top;
  border-top:3px solid var(--c); display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; }
#intro-phase-1 .node .orb { width:42px; height:42px; border-radius:50%; background:var(--c); display:block; margin-bottom:.7rem;
  box-shadow:0 0 0 6px color-mix(in srgb, var(--c) 16%, transparent),
             0 0 calc(16px*var(--ignite,0)) color-mix(in srgb, var(--c) 70%, transparent); }
#intro-phase-1 .node .mono { font-family:var(--mono); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; color:var(--c); display:block; margin-top:.9rem; white-space:nowrap; }
#intro-phase-1 .node .kn { display:block; color:var(--ink-900); font-weight:900; font-size:1.9rem; letter-spacing:-.03em; margin-top:.3rem; white-space:nowrap; }
#intro-phase-1 .node .desc { display:block; color:var(--ink-500); font-size:1rem; line-height:1.5; margin-top:.5rem; margin-top:.35rem; font-weight:500; }

/* climax caption — sits under the heading, fades in at scroll end */
#intro-phase-1 .converge-caption { margin-top:1.1rem; opacity:0; transition:opacity .25s; }
#intro-phase-1 .converge-caption p { font-size:clamp(1.15rem,2vw,1.55rem); font-weight:800; color:var(--ink-700); letter-spacing:-.02em; }
#intro-phase-1 .converge-caption p b { color:var(--t-intel); }

/* ============================================================ 3. OPPORTUNITY ============================================================ */
#intro-phase-1 .opportunity { height:200vh; scroll-snap-align:start; }
#intro-phase-1 .opp-pin { position:sticky; top:0; height:100vh; display:grid; align-content:center; background:var(--bg); border-top:1px solid var(--line-soft); padding-block:clamp(3rem,8vh,6rem); overflow:hidden; }
#intro-phase-1 .opp-lead { max-width:none; }
#intro-phase-1 .opp-lead .eyebrow { color:var(--blue-600); margin-bottom:1.4rem; }
#intro-phase-1 .opp-lead h2 { font-size:clamp(1.7rem,3.2vw,2.7rem); line-height:1.5; max-width:none; }
#intro-phase-1 .opp-lead h2 em { font-style:normal; color:var(--ink-400); }
#intro-phase-1 .callouts { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:clamp(3rem,7vh,5rem); }
#intro-phase-1 .callout { background:var(--card); border:2px solid var(--line); border-radius:22px; padding:2.5rem 2.1rem;
  box-shadow:var(--shadow-card); transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s; }
#intro-phase-1 .callout:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover); }
#intro-phase-1 .callout .mono-label { color:var(--ink-400); font-size:.86rem; }
#intro-phase-1 .callout .num { font-size:clamp(2.4rem,4.4vw,3.6rem); font-weight:900; color:var(--ink-900); letter-spacing:-.04em; margin:1.2rem 0 .5rem; line-height:1; }
#intro-phase-1 .callout .num .ph { font-size:.5em; }
#intro-phase-1 .callout .cap { color:var(--ink-500); font-size:1.05rem; font-weight:500; }

/* ============================================================ field-philosophy lead (merged into close page) ============================================================ */
#intro-phase-1 .man-kicker { color:var(--ink-400); margin-bottom:1.5rem; }
#intro-phase-1 .man-line { font-size:clamp(1.7rem,3.2vw,2.6rem); font-weight:900; color:var(--ink-900); letter-spacing:-.035em; line-height:1.34; max-width:20ch; margin:0 auto; }
#intro-phase-1 .man-line em { font-style:normal; color:var(--t-intel); }
#intro-phase-1 .man-sub { margin-top:1.4rem; color:var(--ink-500); font-size:clamp(1.05rem,1.6vw,1.25rem); font-weight:500; max-width:none; margin-inline:auto; }

/* ============================================================ 4. FIRST STEP ============================================================ */
#intro-phase-1 .firststep { min-height:100vh; scroll-snap-align:start; display:flex; align-items:center; justify-content:center; }
#intro-phase-1 .fs-pin { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--bg); border-top:1px solid var(--line-soft); padding-top:8vh; padding-bottom:8vh; }
#intro-phase-1 .fs-inner { max-width:900px; margin:0 auto; text-align:center; padding-inline:var(--gutter); width:100%; }
#intro-phase-1 .cert-card { position:relative; background:var(--card); border:1.5px solid var(--line-soft); border-radius:24px;
  margin-top:clamp(2.6rem,5vh,4rem);
  padding:clamp(2.6rem,5vh,3.6rem) clamp(2rem,4vw,3rem); box-shadow:var(--shadow-card); overflow:hidden;  max-width:780px; width:100%; margin-left:auto; margin-right:auto; }
#intro-phase-1 .cert-card::before { content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--t-elec), var(--t-space), var(--t-conn), var(--t-intel)); }
#intro-phase-1 .cert-kicker { display:inline-block; font-family:var(--mono); font-weight:700; text-transform:uppercase; letter-spacing:.2em;
  font-size:.82rem; color:var(--blue-600); }
#intro-phase-1 .cert-name { font-size:clamp(2rem,4.2vw,2.9rem); font-weight:900; color:var(--ink-900); letter-spacing:-.045em; margin-top:.6rem; line-height:1.12; white-space:nowrap; }
#intro-phase-1 .cert-sub { color:var(--ink-500); font-size:clamp(1.05rem,1.6vw,1.25rem); margin-bottom:1.2rem; font-weight:500; }
#intro-phase-1 .cert-cta { display:inline-flex; align-items:center; gap:.5em; margin-top:2.3rem;
  background:var(--blue-600); color:#fff; font-weight:700; font-size:1.1rem; text-decoration:none;
  padding:.85em 1.7em; border-radius:14px; box-shadow:0 6px 18px rgba(37,99,235,.25);
  transition:transform .2s, box-shadow .2s, gap .2s; }
#intro-phase-1 .cert-cta:hover { transform:translateY(-2px); gap:.8em; box-shadow:0 12px 28px rgba(37,99,235,.34); }
#intro-phase-1 .ph { font-family:var(--font); font-weight:700; font-size:.82em; color:var(--blue-700);
  background:rgba(37,99,235,.07); border:1px dashed var(--blue-600); border-radius:6px; padding:.05em .45em; }
#intro-phase-1 footer { background:var(--bg); color:var(--ink-400); padding:3rem var(--gutter); text-align:center; font-size:.84rem; border-top:1px solid var(--line-soft); }

@media (max-width:780px){
  #intro-phase-1 .callouts { grid-template-columns:1fr; }
  #intro-phase-1 .node { width:120px; padding:.7rem .75rem; }
  #intro-phase-1 .node .kn { font-size:1rem; }
  #intro-phase-1 .node .desc { display:none; }
}



/* ============ 3. 공간의 진화 + 시장 차트 ============ */
#intro-phase-1 .evolve{ scroll-snap-align:start; min-height:100vh; display:flex; align-items:center; justify-content:center; padding-block:clamp(3rem,7vw,5rem); background:var(--bg); width:100%; }
#intro-phase-1 .evolve-pin{ }
#intro-phase-1 .evolve .wrap{ max-width:1400px; width:100%; margin:0 auto; padding-inline:60px; }
#intro-phase-1 .evolve-head{ margin-bottom:2.4rem; text-align:center; }
#intro-phase-1 .evolve-head .eyebrow{ color:var(--blue-600); font-family:var(--mono); font-weight:700; text-transform:uppercase; letter-spacing:.22em; font-size:.82rem; }
#intro-phase-1 .evolve-grid{
  display:grid; grid-template-columns: 1fr 1.6fr; gap:clamp(3rem,5vw,4.5rem); align-items:center;
  justify-content:center; max-width:1320px; margin:0 auto;
}
#intro-phase-1 .evolve-left h2{
  font-size:clamp(2.4rem,4.4vw,3.4rem); line-height:1.12; color:var(--ink-900);
  letter-spacing:-.035em; margin-bottom:1.6rem;
}
#intro-phase-1 .evolve-lead{
  font-size:clamp(1.2rem,1.7vw,1.5rem); color:var(--ink-700); line-height:1.7; margin-bottom:1.4rem;
}
#intro-phase-1 .evolve-em{ margin-bottom:1.8rem; }
#intro-phase-1 .evolve-em em{
  font-style:normal; font-weight:700; color:var(--t-intel);
  font-size:clamp(1.3rem,1.8vw,1.6rem); letter-spacing:-.025em;
}
#intro-phase-1 .evolve-chips{ display:flex; flex-direction:column; gap:.75rem; }
#intro-phase-1 .evolve-chips .chip{
  display:block; background:var(--card); border:1px solid var(--line-soft);
  border-left:3px solid var(--t-space); border-radius:.6rem;
  padding:1rem 1.2rem; font-family:var(--font); font-size:1rem; font-weight:500; color:var(--ink-700);
  box-shadow:var(--shadow-card);
}
#intro-phase-1 .evolve-chips .chip b{
  display:inline-block; font-weight:900; color:var(--ink-900); margin-right:.6rem;
  font-family:var(--font); font-size:.95rem; letter-spacing:-.01em;
}
#intro-phase-1 .evolve-right{ }
#intro-phase-1 .chart-card{
  background:var(--card); border:1px solid var(--line-soft); border-radius:1rem;
  padding:1.6rem 1.6rem 1.3rem; box-shadow:var(--shadow-card);
}
#intro-phase-1 .chart-title{
  font-size:.95rem; font-weight:700; color:var(--ink-900); margin-bottom:1rem;
  letter-spacing:-.02em;
}
#intro-phase-1 .chart-title .g{ color:var(--t-space); }
#intro-phase-1 .chart-box{
  position:relative; height:300px; width:100%; margin-bottom:1rem;
}
#intro-phase-1 .chart-foot{
  font-size:.86rem; color:var(--ink-500); line-height:1.6;
  padding-top:.9rem; border-top:1px dashed var(--line-soft);
}
#intro-phase-1 .chart-foot .g{ color:var(--t-space); font-weight:700; }

@media (max-width:880px){
  #intro-phase-1 .evolve-grid{ grid-template-columns:1fr; }
  #intro-phase-1 .chart-box{ height:240px; }
}


/* JetBrains Mono · Noto Sans KR 폰트 보강 (이미 시뮬레이터에 있을 수 있음) */

/* ═══ T12 화면 내장 스타일 (원본 2432-2460 승격 · CSS 전역 적용이라 동작 동일) ═══ */
              @keyframes shimmer12{0%{background-position:-200% center}100%{background-position:200% center}}
              .t12-cleared{
                background:linear-gradient(105deg,#e2e8f0 0%,#f8fafc 40%,#e2e8f0 60%,#cbd5e1 100%);
                background-size:200% auto;
                animation:shimmer12 1.8s linear infinite;
                border-color:#94a3b8!important;
                color:#475569!important;
                pointer-events:none;
              }
              .t12-shake{animation:t12shk .4s ease}
              @keyframes t12shk{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
              .t12-card-out{transform:scale(1.1)!important;opacity:0!important;transition:all 0.35s ease!important}
            
@keyframes scrollCueBlink {
  0%,100% { opacity: 0.6; transform: translateX(-50%) translateY(0); }
  50% { opacity: 1; transform: translateX(-50%) translateY(6px); }
}

/* 1-3 배선설계 드래그 */
.t2b-blk{cursor:grab;user-select:none;transition:all .15s}
.t2b-blk:active{cursor:grabbing}
.t2b-slot{transition:all .15s}

/* 1-3 배선 구성 드래그 */
.gblk{cursor:grab;user-select:none;transition:transform .1s}
.gblk:active{cursor:grabbing}
.t2bcov{transition:opacity .35s ease}