/* 관장 화면 + AI 에이전트 패널 «움직이는 시연» — edu-demo.js 와 한 벌.
   원형 = SGM 홈페이지 sgm-demo.css(← INJI agent-demo.css)를 파일째 가져와 EDUCORE 로 바꿨다(2026-10-25).
   시연 «안쪽»은 실제 관장 화면의 그림이라 라이트 한 벌로 고정한다(앱 셸 바탕·카드·패널 값 = EDUCORE 플랫폼 토큰 라이트판).
   EDUCORE 는 모서리를 2/3/4/6px 로 줄였다(09-06) — 안쪽 카드·칩도 그 값으로. 바깥(주제 블록 글)은 홈페이지 토큰을 쓴다.
   원생 이름·숫자는 예시다. CSP — 인라인 스타일 없이 클래스만. */

.workspace { display:flex; height:640px; border-radius:var(--r-md); overflow:hidden; border:1px solid rgba(115,118,134,.22);
             box-shadow:0 18px 50px rgba(19,27,46,.16); font-family:var(--font-body); color:#0f1b2e; text-align:left;
             background:linear-gradient(178deg,#c3daf3 0%,#d8e8f7 26%,#e9f2fb 50%,#f5f1e8 76%,#fbe9dc 100%); }
.workspace .material-symbols-outlined { font-variation-settings:'FILL' 0, 'wght' 400; line-height:1; }

/* ── 관장 화면 (EDUCORE 셸) ── */
.ws-main { flex:1 1 auto; min-width:0; display:flex; position:relative; }
.ws-main::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 45% at 78% 4%, rgba(0,163,196,.14), transparent 70%),
             radial-gradient(ellipse 95% 42% at 42% 104%, rgba(242,168,116,.22), transparent 72%); }
.mrail { position:relative; z-index:1; flex:0 0 76px; display:flex; flex-direction:column; align-items:stretch; gap:2px;
         padding:0 6px 8px; background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.5));
         border-right:1px solid rgba(148,163,184,.28); box-shadow:inset 1px 0 0 rgba(255,255,255,.9),0 6px 18px rgba(19,27,46,.12); }
.mrail-logo { height:52px; display:flex; align-items:center; justify-content:center; }
.mrail-logo img { width:30px; height:auto; }
.mri { --c:#38bdf8; position:relative; min-height:50px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
       font-size:10px; font-weight:700; line-height:14px; color:#41506a; border-radius:3px; text-align:center; transition:background .3s; }
.mri[data-m="att"] { --c:#2dd4bf; } .mri[data-m="prog"] { --c:#a855f7; } .mri[data-m="rank"] { --c:#fb923c; }
.mri[data-m="event"] { --c:#16a34a; } .mri[data-m="notice"] { --c:#f43f5e; } .mri[data-m="pay"] { --c:#f59e0b; }
.mri[data-m="stats"] { --c:#64748b; } .mri[data-m="member"] { --c:#6366f1; } .mri[data-m="set"] { --c:#9ca3af; }
.mri .material-symbols-outlined { font-size:21px; color:var(--c); }
.mri.is-on { color:#0f1b2e; background:color-mix(in srgb, var(--c) 12%, transparent); }
.mri.is-on::before { content:""; position:absolute; left:-6px; top:50%; width:3px; height:26px; margin-top:-13px; background:var(--c); }
.mrail-gap { flex:1; }

.mcol { position:relative; z-index:1; flex:1; min-width:0; display:flex; flex-direction:column; }
.mtop { flex:0 0 52px; display:flex; align-items:center; gap:8px; padding:8px 14px; }
.mtabs { display:flex; gap:6px; min-width:0; overflow:hidden; }
.mtab { --c:#38bdf8; flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; height:36px; padding:6px 12px; border-radius:3px; font-size:12px;
        background:rgba(255,255,255,.72); border:1px solid rgba(148,163,184,.28); color:#41506a; white-space:nowrap; }
.mtab b { font-weight:600; }
.mtab .material-symbols-outlined { font-size:18px; color:var(--c); }
.mtab.is-on { background:#fff; color:#0f1b2e; border-top:2px solid var(--c); box-shadow:inset 0 -2px 0 var(--c),0 2px 6px #17354d24; }
.mtab.is-on b { font-weight:800; }
.mtab.is-new { animation:tabIn .35s ease; }
@keyframes tabIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.mtop-gap { flex:1; }
.mico { position:relative; width:34px; height:34px; flex:0 0 34px; display:inline-flex; align-items:center; justify-content:center;
        border-radius:3px; background:rgba(255,255,255,.72); border:1px solid rgba(148,163,184,.28); color:#41506a; }
.mico .material-symbols-outlined { font-size:18px; }

/* 무대: 층(layer)을 겹쳐 두고 하나만 보인다 */
.mstage { position:relative; flex:1; min-height:0; }
.stage-layer { position:absolute; inset:0 14px 14px; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s linear .45s; }
.stage-layer.is-on { opacity:1; visibility:visible; transition:opacity .45s ease; }

/* 표 화면 — 출석 관리 · 수련생 관리 · 수납 · 승급 */
.mflow, .mlistp { position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; }
.mlistp { padding:14px 16px; background:#fff; }
.mflow-t { display:flex; align-items:center; gap:8px; font-size:22px; font-weight:800; color:#131b2e; letter-spacing:-.03em; margin:2px 0 10px; }
.mflow-t .material-symbols-outlined { font-size:20px; color:#41506a; }
.mkpi { display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border:1px solid #c6c6cd; border-radius:4px; margin-bottom:10px; }
.mkpi span { display:flex; justify-content:space-between; align-items:center; padding:9px 12px; font-size:11px; font-weight:700; color:#45464d; }
.mkpi span + span { border-left:1px solid #e2e8f0; }
.mkpi b { font-size:19px; font-weight:800; color:#131b2e; font-variant-numeric:tabular-nums; }
.mkpi b.red { color:#dc2626; }
.mtbl { flex:1; min-height:0; background:#fff; border:1px solid #c6c6cd; border-radius:4px; overflow:hidden; }
.mtr { display:grid; grid-template-columns:minmax(64px,1fr) minmax(56px,.8fr) 64px minmax(64px,.8fr) minmax(80px,1fr);
       align-items:center; gap:0 8px; height:40px; padding:0 12px; border-bottom:1px solid #e2e8f0; font-size:11.5px; color:#334155;
       transition:background .4s; }
.mtr-4 { grid-template-columns:minmax(70px,1fr) 80px 24px minmax(90px,1.2fr); }
.mtr > span { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.mth { height:32px; font-weight:750; color:#45464d; background:color-mix(in srgb,#3274df 5%,#fff); font-size:10.5px; }
.mtr .pn { font-weight:750; color:#0f172a; font-size:12px; }
.mtr i { font-style:normal; }
.mtr.is-hit { background:#fff7e6; box-shadow:inset 3px 0 0 #f59e0b; }
.mtr.is-added { animation:rowIn .6s ease; }
@keyframes rowIn { from { opacity:0; transform:translateY(-6px); background:#d1fae5; } to { opacity:1; transform:none; } }
.mtag { display:inline-block; padding:2px 8px; border-radius:3px; background:#dbeafe; color:#1e40af; font-size:10px; font-weight:700; }
.ps { display:inline-block; padding:3px 7px; background:#0f766e; color:#fff; font-size:10px; font-weight:800; border-radius:2px; }
.ps.red { background:#dc2626; }
.ps.ds { background:#fff; color:#334155; border:1px solid #cbd5e1; }
.mfoot { padding:8px 4px 0; font-size:11px; color:#45464d; }
.mpane-h { display:flex; align-items:center; gap:6px; padding-bottom:10px; font-size:13px; font-weight:800; color:#131b2e; }
.mpane-h .material-symbols-outlined { font-size:18px; color:#fb923c; }
.mpane-h em { font-style:normal; font-weight:700; font-size:10.5px; color:#64748b; border:1px solid #e2e8f0; border-radius:3px; padding:1px 6px; }

/* 홈 */
.mhome { position:absolute; inset:0; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.mhello { position:relative; padding:20px 24px; border-radius:6px; background:rgba(255,255,255,.88);
          border:1px solid color-mix(in srgb,#c6c6cd 75%,#3274df); box-shadow:0 1px 4px rgba(19,27,46,.10); overflow:hidden; }
.mhello::after { content:""; position:absolute; right:-60px; top:-80px; width:300px; height:300px; border-radius:50%;
                 background:radial-gradient(circle, rgba(50,116,223,.16), transparent 65%); }
.mhello-k { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; color:#1959ba; letter-spacing:.06em; }
.mhello-k i { width:7px; height:7px; border-radius:50%; background:#3274df; box-shadow:0 0 0 3px rgba(50,116,223,.2); }
.mhello-t { margin-top:10px; font-size:24px; font-weight:800; letter-spacing:-.04em; color:#131b2e; }
.mhello-s { margin-top:6px; font-size:13px; color:#45464d; }
.mhello-d { display:flex; align-items:center; gap:6px; margin-top:14px; padding-top:10px; border-top:1px solid #e2e8f0;
            width:fit-content; font-size:11.5px; color:#45464d; }
.mhello-d .material-symbols-outlined { font-size:15px; }
.mstats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mstat { position:relative; min-height:92px; padding:15px 17px; border:1px solid #c6c6cd; border-radius:6px; background:#fff;
         box-shadow:0 1px 4px rgba(19,27,46,.10); }
.mstat-l { font-size:11px; font-weight:700; color:#45464d; }
.mstat-n { margin-top:6px; font-size:26px; font-weight:800; line-height:1.05; color:#131b2e; font-variant-numeric:tabular-nums; }
.mstat-n small { margin-left:3px; font-size:11px; font-weight:600; }
.mstat-a { margin-top:6px; font-size:10px; color:#1959ba; }
.mstat-i { position:absolute; right:15px; top:15px; width:34px; height:34px; border-radius:4px; display:flex; align-items:center;
           justify-content:center; font-size:19px; color:#1959ba; background:color-mix(in srgb,#3274df 10%,#fff); }
.mlist { flex:1; min-height:0; padding:13px 16px; border:1px solid #c6c6cd; border-radius:6px; background:#fff; box-shadow:0 1px 4px rgba(19,27,46,.10); overflow:hidden; }
.mlist-h { display:flex; align-items:center; gap:6px; padding-bottom:9px; margin-bottom:6px; border-bottom:1px solid #e2e8f0; font-size:13px; font-weight:750; color:#131b2e; }
.mlist-h .material-symbols-outlined { font-size:17px; color:#1959ba; }
.mlist-h em { font-style:normal; font-size:10px; font-weight:700; color:#1959ba; border:1px solid #bcd0f1; border-radius:3px; padding:1px 6px; }
.mrow { display:grid; grid-template-columns:70px 1fr 90px 60px; align-items:center; gap:8px; padding:8px 4px; border-bottom:1px solid #eef1f5; font-size:11px; color:#45464d; }
.mrow-h { padding:6px 4px; font-size:9.5px; font-weight:750; background:color-mix(in srgb,#3274df 5%,#fff); border-bottom:0; }
.mno { color:#1959ba; font-weight:700; font-size:10.5px; }
.mnm { color:#131b2e; font-weight:650; }
.mst { font-style:normal; display:inline-block; padding:2px 4px; border:1px solid #006398; color:#006398; border-radius:3px; font-size:9px; font-weight:750; }

/* 정보함 정리 */
.mnote { position:absolute; inset:0; padding:16px 18px; background:#fff; }
.mnote .mpane-h .material-symbols-outlined { color:#a855f7; }
.mnote dl { display:grid; grid-template-columns:90px 1fr; border:1px solid #e2e8f0; border-radius:4px; overflow:hidden; font-size:12px; }
.mnote dt, .mnote dd { margin:0; padding:9px 12px; border-bottom:1px solid #eef1f5; }
.mnote dt { background:#f8fafc; color:#45464d; font-weight:700; }
.mnote dd { color:#131b2e; }

/* ── AI 에이전트 패널 — 남색 머리줄 + 밝은 몸통 (EDUCORE 패널 구성 그대로) ── */
.ws-panel { position:relative; flex:0 0 40%; max-width:450px; display:flex; flex-direction:column; background:#fff;
            box-shadow:-8px 0 24px rgba(19,27,46,.14); }
.wsp-head { flex:0 0 54px; display:flex; align-items:center; gap:.55rem; padding:0 .9rem; color:#fff;
            background:linear-gradient(135deg,#0f1626,#1a2338); }
.wsp-logo { height:14px; width:auto; }
.wsp-title { font-weight:800; letter-spacing:.16em; font-size:13px; white-space:nowrap; }
.wsp-pin { margin-left:auto; display:inline-flex; align-items:center; gap:.2rem; padding:.3rem .65rem; border-radius:4px; font-size:11px; font-weight:700;
           background:linear-gradient(135deg,#3b82f6,#1d4ed8); white-space:nowrap; }
.wsp-pin .material-symbols-outlined { font-size:14px; }
.wsp-dot { width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.22); }
.wsp-main { flex:1; min-height:0; display:flex; }
.wsp-tabs { flex:0 0 60px; display:flex; flex-direction:column; align-items:center; gap:.1rem; padding:.5rem 0;
            background:linear-gradient(180deg,#eaf2fb,#f4f8fc); border-right:1px solid #dbe3ee; }
.wsp-tabs-gap { flex:1; }
.wsp-tab { display:flex; flex-direction:column; align-items:center; gap:.05rem; width:50px; padding:.4rem 0; color:#41506a; border-radius:4px; }
.wsp-tab em { font-style:normal; font-size:9.5px; letter-spacing:-.02em; }
.wsp-tab .material-symbols-outlined { font-size:20px; }
.wsp-tab.is-on { color:#1d6fd8; background:rgba(50,116,223,.12); }
.wsp-col { flex:1; min-width:0; display:flex; flex-direction:column; }
.wsp-bar { display:flex; align-items:center; gap:.45rem; padding:.55rem .75rem; border-bottom:1px solid #e2e8f0; background:#fff; }
.wsp-bar-gap { flex:1; }
.wsp-chip { display:inline-flex; align-items:center; gap:.25rem; padding:.35rem .7rem; border-radius:4px; font-size:11px; font-weight:700;
            color:#41506a; background:#fff; border:1px solid #c6c6cd; box-shadow:0 1px 2px rgba(19,27,46,.06); white-space:nowrap; }
.wsp-chip .material-symbols-outlined { font-size:15px; }
.wsp-chip-solid { color:#fff; background:#11243d; border-color:#00a3c4; box-shadow:0 0 0 1px rgba(0,163,196,.35),0 2px 8px rgba(17,36,61,.3); }
.wsp-chip-solid.is-pulse { animation:chipPulse .6s ease; }
@keyframes chipPulse { 50% { box-shadow:0 0 0 5px rgba(0,163,196,.35); } }
.wsp-body { flex:1; min-height:0; padding:.9rem; display:flex; flex-direction:column; gap:.7rem; overflow-y:auto; scroll-behavior:smooth;
            background:linear-gradient(180deg,#f4f8fc,#eaf2fb); }
.wsp-empty { margin:auto; text-align:center; padding:1rem; animation:msgIn .3s ease; }
.wsp-empty img { width:44px; height:auto; margin:0 auto .8rem; display:block; }
.wsp-empty-t { font-weight:800; letter-spacing:.12em; color:#11243d; font-size:14px; }
.wsp-empty-q { margin-top:.8rem; font-size:11px; color:#45464d; line-height:1.7; }
.wsp-input { margin:0; padding:.55rem .75rem .6rem; border-top:1px solid #e2e8f0; background:#fff; }
.wsp-ph { display:block; min-height:2.6em; font-size:11.5px; color:#94a3b8; line-height:1.4; }
.wsp-ph.is-typing { color:#13243a; }
.wsp-in-row { display:flex; align-items:center; gap:.45rem; margin-top:.25rem; }
.wsp-ic { font-size:18px; color:#41506a; }
.wsp-in-gap { flex:1; }
.wsp-send { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; color:#fff;
            background:linear-gradient(135deg,#00a3c4,#11243d); transition:transform .12s; }
.wsp-send .material-symbols-outlined { font-size:18px; }
.wsp-send.is-press { transform:scale(.86); }

/* 말풍선 — 모서리 4px, 줄높이 1.7 */
.ws-panel .msg-me { align-self:flex-end; max-width:88%; padding:.55rem .85rem; border-radius:4px; font-size:12.5px; line-height:1.6;
                    color:#13243a; background:linear-gradient(135deg,#e4eefd,#d5e3fc); border:1px solid #b7cdee;
                    box-shadow:0 2px 8px rgba(0,99,152,.14); }
.ws-panel .msg-ai { align-self:flex-start; max-width:96%; padding:.75rem .9rem; border-radius:4px; font-size:12.5px; line-height:1.7;
                    color:#131b2e; background:#fff; border:1px solid #c6c6cd;
                    box-shadow:0 10px 26px -6px rgba(19,27,46,.16),0 2px 5px rgba(19,27,46,.08); }
.ws-panel .msg-ai b { color:#006398; }
.ws-panel .msg-ai ul { margin:.3rem 0 0 1rem; list-style:disc; padding:0; }
.ws-panel .msg-ai li { margin:.1rem 0; }
.ws-panel .msg-ai p { margin:0; }
.ws-panel .msg-ai .mt-2 { margin-top:.5rem; }
.msg-att { display:inline-flex; align-items:center; gap:.25rem; margin-top:.35rem; padding:.12rem .5rem; border-radius:4px;
           background:rgba(255,255,255,.75); border:1px solid #b7cdee; font-size:11px; }
.msg-att .material-symbols-outlined { font-size:14px; }
.cur { display:inline-block; color:#006398; animation:curBlink 1s steps(1) infinite; margin-left:1px; }
@keyframes curBlink { 50% { opacity:0; } }
.ws-panel .msg-me, .ws-panel .msg-ai, .flow { animation:msgIn .22s ease; }
@keyframes msgIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* 진행 카드 */
.flow { align-self:stretch; background:#fff; border:1px solid #dbe3ee; border-radius:6px; padding:7px 12px 8px;
        box-shadow:0 1px 4px rgba(19,27,46,.10); display:flex; flex-direction:column; gap:3px; }
.flow-row { display:flex; align-items:center; gap:6px; font-size:12px; color:#45464d; line-height:1.5; }
.flow-row .mk { flex:0 0 14px; display:inline-flex; justify-content:center; }
.flow-row .run { width:8px; height:8px; border-radius:50%; background:rgb(217,119,6); animation:flowBlink 1.2s ease-in-out infinite; }
.flow-row .ok { font-size:11px; font-weight:800; color:rgb(4,120,87); }
.flow-row .tm { font-size:11px; opacity:.62; }
.flow-row.is-think { color:#64748b; font-style:italic; }
@keyframes flowBlink { 0%,100% { opacity:1; } 50% { opacity:.35; } }

/* 승인 창 */
.wsp-modal { position:absolute; inset:54px 0 0; z-index:5; display:flex; align-items:center; justify-content:center; padding:1rem;
             background:rgba(8,12,24,.45); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s; }
.wsp-modal.is-on { opacity:1; visibility:visible; transition:opacity .3s ease; }
.wsp-card { width:100%; max-width:330px; background:#fff; color:#1e293b; border-radius:6px; padding:1rem 1.05rem .9rem;
            box-shadow:0 20px 50px rgba(0,0,0,.30); transform:translateY(10px); transition:transform .3s ease; }
.wsp-modal.is-on .wsp-card { transform:none; }
.wsp-card-h { display:flex; align-items:center; gap:.35rem; font-weight:800; font-size:13px; color:#006398; }
.wsp-card-h .material-symbols-outlined { font-size:18px; }
.wsp-card-t { display:flex; align-items:center; gap:.35rem; margin:.65rem 0 .45rem; font-weight:700; font-size:13.5px; }
.wsp-card-t .material-symbols-outlined { font-size:17px; color:#2563eb; }
.wsp-card dl { display:grid; grid-template-columns:auto 1fr; gap:.25rem .7rem; font-size:12px; background:#f8fafc; border-radius:4px; padding:.55rem .7rem; margin:0; }
.wsp-card dt { color:#64748b; }
.wsp-card dd { margin:0; color:#0f172a; font-weight:600; min-width:0; overflow-wrap:anywhere; }
.wsp-card-n { margin-top:.55rem; font-size:11px; color:#64748b; }
.wsp-card-b { display:flex; justify-content:flex-end; gap:.4rem; margin-top:.7rem; }
.wsp-card-b span { font-size:12px; font-weight:700; padding:.4rem .9rem; border-radius:4px; }
.wsp-card-b .g { background:#eceef0; color:#434655; }
.wsp-card-b .p { background:linear-gradient(135deg,#00a3c4,#11243d); color:#fff; }

/* 패널 — 시키지 않아도 시작된 일 (출석 카메라) */
.wsp-sys { align-self:stretch; display:flex; align-items:center; gap:.45rem; padding:.5rem .7rem; border-radius:4px;
           background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; font-size:12px; animation:msgIn .25s ease; }
.wsp-sys .material-symbols-outlined { font-size:18px; color:#0f766e; }
.wsp-sys em { margin-left:auto; font-style:normal; font-size:10.5px; color:#047857; opacity:.8; white-space:nowrap; }

/* 보호자 폰 알림 */
.mphone { position:absolute; left:50%; bottom:16px; z-index:4; width:min(300px,80%); transform:translate(-50%,140%); opacity:0;
          transition:transform .5s cubic-bezier(.2,.9,.3,1.2), opacity .3s; pointer-events:none; }
.mphone.is-on { transform:translate(-50%,0); opacity:1; }
.mphone-n { background:rgba(255,255,255,.96); border-radius:14px; padding:.7rem .85rem; box-shadow:0 14px 34px rgba(19,27,46,.28);
            border:1px solid rgba(148,163,184,.35); }
.mphone-h { display:flex; align-items:center; gap:.4rem; font-size:11px; color:#45464d; }
.mphone-h img { width:auto; height:13px; }
.mphone-h em { margin-left:auto; font-style:normal; font-size:10px; color:#94a3b8; }
.mphone-t { margin-top:.35rem; font-size:13px; font-weight:800; color:#131b2e; }
.mphone-x { margin-top:.15rem; font-size:11.5px; line-height:1.5; color:#334155; }

/* 범용 화면 */
.mpane { position:absolute; inset:0; background:#fff; border:1px solid #c6c6cd; border-radius:6px; overflow:hidden; box-shadow:0 1px 4px rgba(19,27,46,.10); }

/* ── 좁은 화면 ── */
@media (max-width:1100px){
  .mico, .mtop-gap { display:none; }
}
@media (max-width:900px){
  .workspace { flex-direction:column; height:auto; }
  .ws-main { height:420px; flex:0 0 auto; }
  .ws-panel { flex:0 0 auto; height:560px; max-width:none; box-shadow:0 -6px 18px rgba(19,27,46,.10); }
  .mrail { display:none; }
  .mkpi span { padding:7px 8px; font-size:10px; }
  .mkpi b { font-size:15px; }
  .mstats { gap:8px; }
  .mstat { min-height:80px; padding:11px 12px; }
  .mstat-i { display:none; }
  .mhello-t { font-size:20px; }
  .mtr { grid-template-columns:minmax(56px,1fr) 52px 54px minmax(52px,.8fr); padding:0 8px; }
  .mtr > span:nth-child(5) { display:none; }
  .mtr-4 { grid-template-columns:minmax(56px,1fr) 64px 20px minmax(80px,1.2fr); }
}
@media (max-width:520px){
  .mrow { grid-template-columns:1fr 60px; }
  .mrow > span:nth-child(1), .mrow > span:nth-child(3) { display:none; }
  .mstat-a { display:none; }
  .wsp-pin { display:none; }
  .wsp-title { margin-right:auto; }
  .mkpi { grid-template-columns:repeat(2,1fr); }
  .mkpi span:nth-child(3) { border-left:0; }
  .mkpi span:nth-child(n+3) { border-top:1px solid #e2e8f0; }
}
@media (prefers-reduced-motion: reduce){ .stage-layer { transition:none; } }

/* ── 주제별 블록 — 왼쪽 글 + 오른쪽 움직이는 화면 (페이지를 내리면 차례로) · 홈페이지 토큰 ── */
.ai-section { padding-bottom:var(--section-gap); scroll-margin-top:var(--space-6); }
.ai-lead { max-width:44em; margin-top:var(--space-3); color:var(--muted-text); font-size:15px; }
.feats { display:flex; flex-direction:column; gap:88px; margin-top:var(--space-10); }
.feat { display:grid; grid-template-columns:minmax(0,30%) minmax(0,1fr); gap:44px; align-items:center; scroll-margin-top:var(--space-6); }
.feat:nth-child(even) { grid-template-columns:minmax(0,1fr) minmax(0,30%); }
.feat:nth-child(even) .feat-txt { order:2; }
.feat-no { display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-brand); font-weight:800; font-size:13px; letter-spacing:.08em;
           color:var(--info-text); background:var(--cont); padding:4px 10px; border-radius:var(--r-xs); }
.feat-no .material-symbols-outlined { font-size:17px; }
.feat-kind { margin-left:var(--space-2); font-size:12px; font-weight:700; color:var(--good); }
.feat-txt h3 { margin:var(--space-4) 0 var(--space-3); font-size:26px; line-height:1.35; font-weight:800; letter-spacing:-.02em; color:var(--ink); word-break:keep-all; }
.feat-txt p { font-size:15px; line-height:1.75; color:var(--muted-text); word-break:keep-all; }
.feat-txt ul { margin-top:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); }
.feat-txt li { position:relative; padding-left:1.5rem; font-size:14px; font-weight:600; color:var(--ink); }
.feat-txt li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--tint); font-weight:800; }
.feat-demo .workspace { height:540px; }
.feat-demo .ws-panel { flex-basis:43%; max-width:400px; }
.feat-demo .mrail { flex-basis:64px; }
.feat-demo .mri { font-size:9px; min-height:42px; }
.feat-demo .mri .material-symbols-outlined { font-size:19px; }
.feat-demo .mico { display:none; }
.feat-demo .wsp-tabs { flex-basis:54px; }
.feat-demo .wsp-tab { width:46px; }
.demo-note { margin-top:var(--space-12); font-size:13px; color:var(--muted-text); text-align:center; }
.cta-band { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); padding:var(--space-10) var(--space-8); margin-bottom:var(--section-gap); }
.cta-band h2 { font-size:25px; letter-spacing:-.8px; }
.cta-band p { margin-top:var(--space-2); color:var(--muted-text); font-size:15px; }
@media (max-width:1100px){
  .feat { grid-template-columns:minmax(0,1fr); gap:22px; }
  .feat:nth-child(even) { grid-template-columns:minmax(0,1fr); }
  .feat:nth-child(even) .feat-txt { order:0; }
  .feat-txt h3 { font-size:22px; }
  .feat-txt h3 br { display:none; }
  .feats { gap:64px; }
}
@media (max-width:900px){
  .feat-demo .workspace { height:auto; }
  .feat-demo .ws-main { height:340px; }
  .feat-demo .ws-panel { height:480px; max-width:none; }
  .feat-demo .wsp-tabs { display:none; }
  .cta-band { flex-direction:column; align-items:flex-start; padding:var(--space-8) var(--space-6); }
}

/* 히어로 «이렇게 말해보세요» — 문장을 누르면 그 장면으로 내려간다 */
.prompt-list li { padding:0; }
.prompt-list a { display:flex; gap:var(--space-3); align-items:center; width:100%; padding:15px 14px; color:inherit; text-decoration:none; border-radius:var(--r-sm); }
.prompt-list a:hover { background:var(--w-hi); }
@media (max-width:640px){ .prompt-list a { padding:14px 10px; gap:var(--space-2); } }