/* 서비스 구간 H2 — H(고정 화면 전환)를 다듬은 안. 비교용 파일이며 지금 사이트(index.html)는 쓰지 않는다.
   ① 오른쪽은 「실제 작업 화면」을 겹겹이 놓아 깊이를 준다(예약 사이트 / 주문 엑셀 / 문의함 / 상태판)
   ② 설명은 왼쪽 목록이 펼쳐지며 보여 준다
   ③ 밝기 두 가지: tone-light(밝은 회색 바탕) / tone-dark(어두운 바탕 + 밝은 화면) */
#svcH2 { position: relative; }
/* 밝은 바탕: 위는 새벽빛처럼 검정 → 짙은 남색 → 밝은 바탕으로 넘어가고, 아래는 끊김 없이 숫자·지구본 구간(같은 바탕색)으로 이어진다 */
#svcH2.tone-light { --ink: #0e1726; --sub: #4a5568; --dim: rgba(14,23,38,.3); --line: rgba(14,23,38,.12); --a1: #0a9f93; --a2: #1673c4; --glow: rgba(22,115,196,.07); --chip: rgba(14,23,38,.06);
  color: var(--ink); padding: 34vh 0 6vh;
  background: linear-gradient(180deg, #000 0, #0b1220 9vh, #33405a 17vh, #9aa8bd 25vh, #e6ebf1 31vh, #f4f6f9 36vh, #f4f6f9 100%); }
#svcH2.tone-dark { --ink: #fff; --sub: rgba(255,255,255,.7); --dim: rgba(255,255,255,.3); --line: rgba(255,255,255,.13); --a1: #1febd1; --a2: #1fa3eb; --glow: rgba(40,130,235,.3); --chip: rgba(255,255,255,.08);
  color: var(--ink); padding: 8vh 0; background: linear-gradient(180deg, #000 0, #070c16 24vh, #070c16 calc(100% - 24vh), #000 100%); }

.h2-wrap { position: relative; }
.h2-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 76px; overflow: hidden; }
.h2-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 60px; align-items: center; width: 100%; }

/* 왼쪽: 제목 + 펼쳐지는 목록 */
.h2-label { display: block; padding-bottom: 14px; font-family: var(--e-font); font-size: 14px; font-weight: 600; letter-spacing: .18em; color: var(--a2); }
.h2-head h2 { padding-bottom: 30px; font-size: clamp(30px, 2.8vw, 46px); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.h2-head h2 em { font-style: normal; background: linear-gradient(90deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h2-list { border-bottom: 1px solid var(--line); }
.h2-item { position: relative; border-top: 1px solid var(--line); }
.h2-item::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; transform-origin: left; transform: scaleX(var(--fill, 0)); background: linear-gradient(90deg, var(--a1), var(--a2)); }
.h2-btn { display: grid; grid-template-columns: 52px 1fr; align-items: center; width: 100%; padding: 17px 0; border: 0; background: none; font: inherit; font-size: 23px; font-weight: 700; letter-spacing: -.01em; text-align: left; color: var(--dim); cursor: pointer; transition: color .4s; }
.h2-btn span { font-family: var(--e-font); font-size: 13px; font-weight: 600; letter-spacing: .12em; }
.h2-btn:hover { color: var(--sub); }
.h2-item.on .h2-btn { color: var(--ink); }
.h2-item.on .h2-btn span { color: var(--a1); }
.h2-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.2,.7,.2,1); }
.h2-item.on .h2-more { grid-template-rows: 1fr; }
.h2-more > div { overflow: hidden; padding-left: 52px; }
.h2-more p { font-size: 15.5px; line-height: 1.7; color: var(--sub); }
.h2-tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; }
.h2-tags span, .h2-tags a { padding: 4px 10px; border-radius: 99px; background: var(--chip); font-size: 12.5px; font-weight: 500; color: var(--sub); }
.h2-tags a { font-weight: 600; color: var(--ink); transition: background-color .25s, color .25s; }   /* 서비스 이름: 누르면 진행 사례의 그 프로젝트로 */
.h2-tags a:hover { background: linear-gradient(90deg, var(--a1), var(--a2)); color: #fff; }
.h2-go { display: inline-flex; gap: 8px; margin: 14px 0 22px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.h2-go::after { content: "→"; transition: transform .3s; }
.h2-go:hover::after { transform: translateX(5px); }

/* 오른쪽: 겹겹이 놓인 작업 화면 */
.h2-stage { position: relative; height: min(560px, 64vh); perspective: 1800px; }
.h2-stage::before { content: ""; position: absolute; inset: -12% -8%; pointer-events: none; background: radial-gradient(closest-side, var(--glow), transparent); }
.scn { position: absolute; inset: 0; transform: rotateY(-8deg) rotateX(3deg); transform-style: preserve-3d; visibility: hidden; }
.scn.cur { visibility: visible; }
.scn:not(.cur) * { animation-play-state: paused !important; }
.ly { position: absolute; will-change: transform; }

/* 화면 틀(실제 프로그램 창처럼) */
.uiw { overflow: hidden; border-radius: 10px; background: #fff; color: #1b2433; font-size: 12px; line-height: 1.4; text-align: left;
  box-shadow: 0 34px 70px -14px rgba(4,10,25,.5), 0 10px 22px rgba(4,10,25,.16); }
.tone-light .uiw { box-shadow: 0 34px 70px -18px rgba(20,35,60,.32), 0 8px 20px rgba(20,35,60,.1), 0 0 0 1px rgba(20,35,60,.06); }
.uiw-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #f2f4f7; border-bottom: 1px solid #e2e6ec; }
.uiw-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.uiw-bar i:nth-child(2) { background: #febc2e; } .uiw-bar i:nth-child(3) { background: #28c840; }
.uiw-bar em { display: flex; align-items: center; flex: 1; height: 18px; margin-left: 10px; padding: 0 9px; border-radius: 5px; background: #fff; border: 1px solid #e2e6ec; font-style: normal; font-size: 10.5px; color: #7a8597; }
.toast { display: flex; align-items: center; gap: 10px; padding: 11px 15px 11px 12px; border-radius: 12px; background: rgba(255,255,255,.97); color: #1b2433; white-space: nowrap;
  box-shadow: 0 18px 40px -8px rgba(4,10,25,.4), 0 0 0 1px rgba(20,35,60,.06); animation: hToast 6s ease-in-out infinite; }
.toast i { flex: 0 0 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, #1febd1, #1fa3eb); }
.toast i.g { background: linear-gradient(135deg, #34d399, #10b981); }
.toast b { display: block; font-size: 12.5px; }
.toast span { display: block; font-size: 11px; color: #6b7686; }
@keyframes hToast { 0%, 8% { transform: translateY(10px) scale(.96); opacity: 0; } 16%, 84% { transform: none; opacity: 1; } 94%, 100% { transform: translateY(-6px); opacity: 0; } }

/* 1) 웹·앱: 펜션 예약 사이트 + 휴대폰 달력 */
.w-nav { display: flex; align-items: center; gap: 16px; padding: 11px 16px; font-size: 11px; color: #5b6575; }
.w-nav b { margin-right: auto; font-family: var(--e-font); font-size: 12px; letter-spacing: .1em; color: #23412f; }
.w-hero { position: relative; height: 196px; }
.w-hero svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.w-copy { position: absolute; left: 22px; bottom: 22px; color: #fff; }
.w-copy strong { display: block; padding-bottom: 10px; font-size: 21px; line-height: 1.3; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.w-btn { display: inline-block; padding: 6px 13px; border-radius: 6px; background: #fff; color: #23412f; font-size: 11px; font-weight: 700; }
.w-rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 16px 16px; }
.w-rooms i { display: block; height: 48px; margin-bottom: 6px; border-radius: 6px; }
.w-rooms .r1 { background: linear-gradient(135deg, #c9a27a, #8a6748); } .w-rooms .r2 { background: linear-gradient(135deg, #9fb7a8, #5f7f6e); } .w-rooms .r3 { background: linear-gradient(135deg, #d8c7b0, #a88f72); }
.w-rooms b { display: block; font-size: 11.5px; } .w-rooms span { font-size: 10.5px; color: #7a8597; }
.phone { padding: 12px 12px 14px; border-radius: 24px; border: 6px solid #10151d; }
.ph-top { display: flex; justify-content: space-between; padding: 0 4px 10px; font-size: 10px; font-weight: 700; }
.ph-tit { padding: 0 4px 8px; font-size: 13px; font-weight: 700; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; text-align: center; font-size: 10.5px; }
.cal .wk { padding-bottom: 4px; font-size: 9.5px; color: #9aa3b0; }
.cal span { padding: 4px 0; }
.cal .s { background: #e0f4f2; color: #0a7f75; font-weight: 700; }
.cal .s.a { border-radius: 99px 0 0 99px; background: #0a9f93; color: #fff; } .cal .s.z { border-radius: 0 99px 99px 0; background: #0a9f93; color: #fff; }
.ph-btn { margin-top: 12px; padding: 9px 0; border-radius: 9px; background: #10151d; color: #fff; text-align: center; font-size: 11.5px; font-weight: 700; }

/* 2) 업무 자동화: 주문 엑셀이 차례로 처리되고 결과가 정리된다 */
.sheet { position: relative; display: grid; grid-template-columns: 28px 1.1fr 1.4fr .6fr .8fr; font-size: 11px; }
.sheet > span { padding: 7px 8px; border-right: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; white-space: nowrap; overflow: hidden; }
.sheet .hd { background: #f6f8fa; color: #7a8597; font-weight: 600; }
.sheet .rn { background: #f6f8fa; color: #9aa3b0; text-align: center; }
.sheet .st { position: relative; }
.sheet .st b, .sheet .st em { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); padding: 1px 7px; border-radius: 4px; font-style: normal; font-weight: 600; font-size: 10.5px; }
.sheet .st b { background: #f1f3f6; color: #8a93a2; }
.sheet .st em { background: #dcf7ec; color: #0f8a5f; opacity: 0; animation: hDone 7s ease-out infinite; }
.sheet .scan { position: absolute; left: 0; right: 0; height: 28px; background: rgba(22,115,196,.08); border-top: 1px solid rgba(22,115,196,.35); border-bottom: 1px solid rgba(22,115,196,.35); pointer-events: none; animation: hScan 7s linear infinite; }
@keyframes hDone { 0%, 6% { opacity: 0; } 9%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hScan { 0% { top: 28px; opacity: 1; } 70% { top: calc(100% - 28px); opacity: 1; } 76%, 100% { top: calc(100% - 28px); opacity: 0; } }
.card { padding: 16px 18px 18px; }
.card h4 { padding-bottom: 12px; font-size: 13px; font-weight: 700; }
.card dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; font-size: 12px; }
.card dt { color: #6b7686; } .card dd { font-weight: 700; text-align: right; }
.card dd.ok { color: #0f8a5f; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 54px; margin-top: 14px; padding-top: 10px; border-top: 1px solid #edf0f4; }
.bars i { flex: 1; border-radius: 3px 3px 0 0; background: #cfe3f5; }
.bars i:last-child { background: linear-gradient(180deg, #1fa3eb, #1673c4); }

/* 3) AI 도입: 문의함이 자동 분류되고, 요약과 답변 초안이 나온다 */
.inbox li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid #edf0f4; }
.inbox .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #fff; }
.inbox b { display: block; font-size: 11.5px; } .inbox p { overflow: hidden; font-size: 11px; color: #6b7686; white-space: nowrap; text-overflow: ellipsis; }
.inbox .tg { padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; opacity: 0; animation: hTag 7s ease-out infinite; }
.tg.t1 { background: #e3f0fb; color: #1673c4; } .tg.t2 { background: #fdeee3; color: #c2621a; } .tg.t3 { background: #f3e8fd; color: #7c3aed; }
@keyframes hTag { 0%, 4% { opacity: 0; transform: scale(.7); } 8%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.sum h4 { padding-bottom: 12px; font-size: 13px; font-weight: 700; }
.sum h4 small { margin-left: 6px; font-size: 11px; font-weight: 500; color: #9aa3b0; }
.sum .row { display: grid; grid-template-columns: 62px 1fr 34px; gap: 8px; align-items: center; padding-bottom: 8px; font-size: 11.5px; }
.sum .row u { height: 7px; border-radius: 4px; background: #edf0f4; text-decoration: none; overflow: hidden; }
.sum .row u i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #1febd1, #1673c4); transform-origin: left; animation: hBar 7s cubic-bezier(.2,.7,.2,1) infinite; }
.sum .row em { font-style: normal; font-weight: 700; text-align: right; }
@keyframes hBar { 0%, 10% { transform: scaleX(0); } 30%, 90% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.draft { margin-top: 6px; padding: 11px 12px; border-radius: 8px; background: #f6f8fa; font-size: 11.5px; line-height: 1.6; color: #3b4555; }
.draft b { display: block; padding-bottom: 4px; font-size: 10.5px; color: #1673c4; }
.draft .caret { display: inline-block; width: 1.5px; height: 12px; margin-left: 2px; vertical-align: -2px; background: #1673c4; animation: hCaret 1s steps(1) infinite; }
@keyframes hCaret { 50% { opacity: 0; } }

/* 4) 운영·유지관리: 90일 가동 상태 + 업데이트 기록 */
.status { padding: 16px 18px 18px; }
.status .top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; }
.status .top b { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.status .top b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,.18); }
.status .top span { font-size: 11px; color: #7a8597; }
.up { display: flex; gap: 2px; height: 34px; }
.up i { flex: 1; border-radius: 2px; background: #34d399; }
.up i.w { background: #fbbf24; }
.status .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 16px; }
.status .nums div { padding: 10px 12px; border-radius: 8px; background: #f6f8fa; }
.status .nums b { display: block; font-size: 16px; } .status .nums span { font-size: 10.5px; color: #7a8597; }
.status svg { display: block; width: 100%; height: 58px; margin-top: 14px; }
.status polyline { fill: none; stroke: #1673c4; stroke-width: 2; stroke-linejoin: round; }
.log li { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid #edf0f4; font-size: 11.5px; }
.log li:first-of-type { border-top: 0; }
.log em { font-style: normal; font-family: var(--e-font); font-weight: 600; color: #1673c4; }
.log span { display: block; font-size: 10.5px; color: #9aa3b0; }

@media (max-width: 900px) {
  #svcH2.tone-light, #svcH2.tone-dark { padding: 20vh 0; }
  .h2-pin { position: relative; height: auto; padding: 0; overflow: visible; }
  .h2-in { grid-template-columns: 1fr; }
  .h2-stage { display: none; }
  .h2-more { grid-template-rows: 1fr; }
  .h2-item .h2-btn { color: var(--ink); }
}

/* ───── 사업군에 맞춘 장면 (11/10) ───── */
/* 1) AI 비전·센서: 카메라 검수 화면 + 열화상 감지 */
.vis { display: grid; grid-template-columns: 1.4fr 1fr; }
.vis .cam { position: relative; height: 252px; overflow: hidden; background: radial-gradient(ellipse at 50% 62%, #2b3442, #0c1016 76%); }
.vis .cam .rec { position: absolute; left: 12px; top: 10px; display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #ff7a7a; }
.vis .cam .rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; animation: hCaret 1.2s steps(1) infinite; }
.vis .cam .cn { position: absolute; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.45); }
.vis .cam .cn.a { left: 12px; bottom: 12px; border-right: 0; border-top: 0; } .vis .cam .cn.b { right: 12px; bottom: 12px; border-left: 0; border-top: 0; } .vis .cam .cn.c { right: 12px; top: 12px; border-left: 0; border-bottom: 0; }
.vis .pack { position: absolute; left: 50%; top: 55%; width: 124px; height: 86px; margin: -43px 0 0 -62px; border-radius: 14px; background: linear-gradient(160deg, #eef2f6, #b7c2cf); box-shadow: 0 12px 26px rgba(0,0,0,.45); }
.vis .pack::before { content: ""; position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fff, #b8def3 55%, #6fb0d6); }
.vis .pack::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 9px; height: 5px; border-radius: 3px; background: repeating-linear-gradient(90deg, #6b7686 0 2px, transparent 2px 4px); opacity: .6; }
.vis .box { position: absolute; left: calc(50% - 76px); top: calc(55% - 57px); width: 152px; height: 114px; border: 2px solid #22d3a6; border-radius: 6px; animation: vBox 6s ease-out infinite; }
.vis .box span { position: absolute; left: -2px; top: -23px; padding: 3px 8px; border-radius: 4px 4px 0 0; background: #22d3a6; color: #04211a; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.vis .scanl { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #22d3a6, transparent); animation: vScan 3s linear infinite; }
.vis .side { display: grid; align-content: start; gap: 9px; padding: 14px 16px; }
.vis .side h5 { font-size: 11px; font-weight: 700; color: #7a8597; }
.vis .mt { display: flex; justify-content: space-between; font-size: 11.5px; } .vis .mt span { color: #6b7686; } .vis .mt b { font-weight: 700; }
.vis .judge { margin-top: 4px; padding: 8px 0; border-radius: 8px; background: #dcf7ec; color: #0f8a5f; font-size: 12.5px; font-weight: 800; text-align: center; animation: vBox 6s ease-out infinite; animation-delay: .4s; }
@keyframes vScan { 0% { top: 0; } 100% { top: 100%; } }
@keyframes vBox { 0%, 14% { opacity: 0; transform: scale(1.12); } 22%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.heat .hv { position: relative; height: 92px; border-radius: 8px; overflow: hidden; background: linear-gradient(100deg, #15195a, #2d2a86 35%, #5a2d92 70%, #2d2a86); }
.heat .hv::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 18px; height: 34px; border-radius: 8px; background: rgba(120,90,210,.55); }
.heat .hv::after { content: ""; position: absolute; left: 58%; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, #fff6c0 0 18%, #ffb347 38%, #e8432f 62%, transparent 72%); animation: hHot 2.4s ease-in-out infinite; }
.heat .hv i { position: absolute; left: 22%; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, #8f7dff 0 30%, transparent 70%); }
.heat .warn { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; font-size: 12px; }
.heat .warn b { padding: 2px 8px; border-radius: 4px; background: #fde8e6; color: #c5221f; font-size: 11px; }
@keyframes hHot { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.18); opacity: 1; } }

/* 2) 모빌리티·스마트 디바이스: 주차 배치 시뮬레이션 + 차량 전장 모듈 */
.lot { position: relative; padding: 16px 16px 18px; background: #eef1f5; }
.lot .rw { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; }
.lot .rw i { position: relative; height: 34px; background: #fff; border: 1px solid #c9d0da; }
.lot .rw.up i { border-bottom: 0; } .lot .rw.dn i { border-top: 0; }
.lot .rw i::after { content: ""; position: absolute; inset: 5px 4px; border-radius: 4px; background: #8d9bb0; opacity: 0; animation: pIn 7s ease-out infinite; animation-delay: var(--d); }
.lot .rw i.ev { background: #e4f6ee; } .lot .rw i.ev::after { background: #2fae74; }
.lot .rw i.ds { background: #e3edfb; } .lot .rw i.ds::after { background: #3b7fd4; }
.lot .ai { height: 26px; margin: 2px 0; background: repeating-linear-gradient(90deg, #c9d0da 0 14px, transparent 14px 26px) center / 100% 2px no-repeat; }
.lot .res { position: absolute; right: 14px; top: -2px; transform: translateY(-50%); padding: 6px 12px; border-radius: 99px; background: #0e1726; color: #fff; font-size: 11.5px; font-weight: 700; }
@keyframes pIn { 0% { opacity: 0; transform: scale(.6); } 8%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.mod .row2 { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; }
.mod .row2 b { font-size: 13px; }
.mod .live { margin-left: auto; padding: 2px 8px; border-radius: 99px; background: #dcf7ec; color: #0f8a5f; font-size: 10.5px; font-weight: 700; }
.mod .wave { height: 34px; margin-top: 12px; border-radius: 6px; background: #f6f8fa; overflow: hidden; }
.mod .wave svg { display: block; width: 200%; height: 100%; animation: hWave 4s linear infinite; }
.mod .wave path { fill: none; stroke: #1673c4; stroke-width: 2; }
@keyframes hWave { to { transform: translateX(-50%); } }
.badge { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 12px; background: #0e1726; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 16px 34px -8px rgba(4,10,25,.45); }
.badge i { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #1febd1, #1fa3eb); }

/* 3) 플랫폼 서비스: 관리자 거래 현황 + 휴대폰 거래 화면 */
.tbl li { display: grid; grid-template-columns: 70px 1fr 74px; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #edf0f4; font-size: 11.5px; }
.tbl li.h { padding: 8px 14px; background: #f6f8fa; color: #7a8597; font-size: 10.5px; font-weight: 600; }
.tbl em { font-style: normal; font-family: var(--e-font); color: #7a8597; }
.tbl .st2 { justify-self: start; padding: 2px 8px; border-radius: 4px; font-size: 10.5px; font-weight: 700; }
.st2.ok { background: #dcf7ec; color: #0f8a5f; } .st2.ing { background: #e3f0fb; color: #1673c4; } .st2.chk { background: #fff4dc; color: #b26a00; }
.pf .lst { margin: 4px 0 10px; padding: 12px; border-radius: 12px; background: #f4f6f9; }
.pf .lst b { display: block; font-size: 12.5px; } .pf .lst span { font-size: 10.5px; color: #6b7686; }
.pf .lst strong { display: block; padding-top: 6px; font-size: 14px; color: #1673c4; }
.steps2 li { position: relative; display: flex; align-items: center; gap: 9px; padding: 6px 0 6px 2px; font-size: 11.5px; color: #9aa3b0; }
.steps2 li::before { content: ""; flex: 0 0 16px; height: 16px; border-radius: 50%; border: 1.5px solid #c9d0da; background: #fff; }
.steps2 li.d { color: #1b2433; } .steps2 li.d::before { border-color: #0a9f93; background: #0a9f93 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.steps2 li.n { color: #1673c4; font-weight: 700; } .steps2 li.n::before { border-color: #1673c4; box-shadow: 0 0 0 4px rgba(22,115,196,.15); animation: hPulse 1.6s ease-in-out infinite; }
@keyframes hPulse { 50% { box-shadow: 0 0 0 7px rgba(22,115,196,.05); } }

/* ───── 4분류 장면 (11/10 오후): 메타버스 / 규제혁신 / 모빌리티 AI / 디지털 휴먼 ───── */
/* 01 메타버스 매매단지: 위에서 비스듬히 본 가상 단지(SVG) + 아바타가 차로 다가가면 사양 카드 */
.mv { position: relative; background: linear-gradient(180deg, #cfe2f3, #eef3f8 46%); }
.mv svg { display: block; width: 100%; height: auto; }
.mv .av2 { animation: mvWalk 8s ease-in-out infinite; }
.mv .hl { transform-box: fill-box; transform-origin: center; animation: mvRing 8s ease-out infinite; }
/* 아바타는 빨리 다가가고(0~22%), 사양 카드는 오래 떠 있다(30~92%) — 화면이 비어 보이는 시간을 줄인다 */
@keyframes mvWalk { 0%, 4% { transform: translate(0, 0); } 22%, 92% { transform: translate(var(--tx), var(--ty)); } 100% { transform: translate(0, 0); } }
@keyframes mvRing { 0%, 20% { opacity: 0; transform: scale(.6); } 27%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
/* 사양 카드는 항상 보인다(사라지는 동안 화면이 비어 보이지 않게). 움직임은 아바타와 표시 고리만 */
.spec .ph2 { height: 66px; margin-bottom: 10px; border-radius: 8px; background: linear-gradient(135deg, #dfe6ee, #9fb0c4); position: relative; overflow: hidden; }
.spec .ph2 svg { position: absolute; left: 8%; bottom: 4px; width: 84%; height: auto; }
.spec .go2 { margin-top: 12px; padding: 8px 0; border-radius: 8px; background: #0e1726; color: #fff; text-align: center; font-size: 11.5px; font-weight: 700; }

/* 02 규제혁신: 실증특례 진행판 + 무인 키오스크 */
.sbx { padding: 16px 18px 18px; }
.sbx .flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 16px; }
.sbx .flow div { position: relative; padding: 10px 8px; border-radius: 8px; background: #f4f6f9; text-align: center; font-size: 11px; color: #9aa3b0; }
.sbx .flow b { display: block; padding-bottom: 3px; font-family: var(--e-font); font-size: 10px; letter-spacing: .08em; }
.sbx .flow .d { background: #e3f6f3; color: #0a7f75; }
.sbx .flow .n { background: #e3f0fb; color: #1673c4; font-weight: 700; box-shadow: inset 0 0 0 1.5px #1673c4; animation: sbNow 2s ease-in-out infinite; }
@keyframes sbNow { 50% { box-shadow: inset 0 0 0 1.5px rgba(22,115,196,.35); } }
.sbx .memo { display: grid; gap: 7px; padding: 12px; border-radius: 8px; border: 1px dashed #c9d0da; font-size: 11.5px; color: #4a5568; }
.sbx .memo b { color: #1b2433; }
.kio { width: 100%; padding: 14px 12px 16px; border-radius: 18px; background: linear-gradient(180deg, #f7f9fb, #e4e9ef); box-shadow: 0 30px 60px -16px rgba(4,10,25,.45), 0 0 0 1px rgba(20,35,60,.08); }
.kio .cam2 { width: 8px; height: 8px; margin: 0 auto 10px; border-radius: 50%; background: #1b2433; box-shadow: 0 0 0 3px #cfd6df; }
.kio .scr { padding: 14px 12px; border-radius: 10px; background: #0e1726; color: #fff; }
.kio .scr h6 { padding-bottom: 10px; font-size: 12.5px; font-weight: 700; }
.kio .scr span { display: block; margin-top: 7px; padding: 9px 0; border-radius: 7px; background: rgba(255,255,255,.1); text-align: center; font-size: 11.5px; font-weight: 700; }
.kio .scr span.p { background: linear-gradient(90deg, #1febd1, #1fa3eb); color: #04211a; }
.kio .tray { height: 14px; margin: 12px 8px 0; border-radius: 4px; background: #cfd6df; box-shadow: inset 0 2px 3px rgba(0,0,0,.15); }

/* 03 모빌리티 AI: 톨게이트 열화상(화물차) + 주차 자동설계 카드 */
.tg2 { position: relative; height: 236px; overflow: hidden; background: linear-gradient(100deg, #15195a, #2b2a84 40%, #4a2d8f 75%, #2b2a84); }
.tg2 svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tg2 .hot { transform-box: fill-box; transform-origin: center; animation: hHot 2.2s ease-in-out infinite; }
.tg2 .tag2 { position: absolute; padding: 3px 8px; border-radius: 4px; background: #e8432f; color: #fff; font-size: 10.5px; font-weight: 700; animation: vBox 6s ease-out infinite; }
.tg2 .lane { position: absolute; left: 12px; top: 10px; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: rgba(255,255,255,.75); }
.alert2 { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; font-size: 12px; }
.alert2 b { padding: 2px 8px; border-radius: 4px; background: #fde8e6; color: #c5221f; font-size: 11px; }
.pv .lot { padding: 12px 10px 12px; border-radius: 8px; }
.pv .lot .rw { grid-template-columns: repeat(10, 1fr); }
.pv .lot .rw i { height: 24px; }

/* 04 디지털 휴먼 에이전시: 권리 관리 목록 + 디지털 분신 음성 카드 */
.roster li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #edf0f4; }
.roster .pic { width: 30px; height: 30px; border-radius: 50%; }
.roster b { display: block; font-size: 12px; } .roster span { font-size: 10.5px; color: #7a8597; }
.roster .perm { display: flex; gap: 4px; }
.roster .perm em { padding: 2px 7px; border-radius: 4px; font-style: normal; font-size: 10px; font-weight: 700; }
.perm .y { background: #dcf7ec; color: #0f8a5f; } .perm .no { background: #fde8e6; color: #c5221f; }
.vox .wv { display: flex; align-items: center; gap: 3px; height: 54px; margin: 6px 0 12px; padding: 0 4px; border-radius: 8px; background: #f4f6f9; }
.vox .wv i { flex: 1; border-radius: 2px; background: linear-gradient(180deg, #1febd1, #1673c4); animation: vxBar 1.2s ease-in-out infinite; }
@keyframes vxBar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.vox .ok2 { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; background: #e3f6f3; color: #0a7f75; font-size: 11.5px; font-weight: 700; }
.vox .ok2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #0a9f93; }