/* =====================================================================
   NAVER Cloud AI Demo — Design System
   Colors / typography / layout per NAVER_Cloud_PPT_Design_Guide.md
   Main #00C878 (green) · Sub #515B61 (gray) · Point #4F7DFF (blue)
   ===================================================================== */

/* --- Web font: self-hosted NanumSquare (NAVER's geometric sans, close to
       NanumSquare Neo). Falls back to Malgun Gothic on Windows. Offline-safe. --- */
@font-face {
  font-family: 'NanumSquareWeb';
  src: url('../assets/fonts/NanumSquare-Light.woff2') format('woff2');
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'NanumSquareWeb';
  src: url('../assets/fonts/NanumSquare-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'NanumSquareWeb';
  src: url('../assets/fonts/NanumSquare-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'NanumSquareWeb';
  src: url('../assets/fonts/NanumSquare-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-display: swap;
}

:root {
  /* Main (green) */
  --nc-green:        #00C878;
  --nc-green-dark:   #097156;
  --nc-green-header: #00A479;
  --nc-green-bright: #1BD68B;
  --nc-green-accent: #25DA64;
  --nc-mint:         #D6F6E9;
  --nc-mint-2:       #DBF4EB;

  /* Sub (gray / neutral) */
  --nc-gray:         #515B61;
  --nc-border:       #DEE5EB;
  --nc-gray-mid:     #B4C1C8;
  --nc-bg:           #F5F7F9;
  --nc-bg-2:         #F0F3F6;
  --nc-muted:        #6F7D87;
  --nc-muted-2:      #778A91;

  /* Point (blue) */
  --nc-blue:         #4F7DFF;
  --nc-blue-dark:    #09449B;
  --nc-blue-light:   #C9E7F7;

  /* Semantic */
  --nc-red:          #FF4545;
  --nc-teal:         #00D1C9;

  --nc-text:         #1a2227;
  --nc-white:        #ffffff;

  --nc-radius:       14px;
  --nc-radius-sm:    9px;
  --nc-shadow:       0 2px 10px rgba(30, 45, 60, 0.06);
  --nc-shadow-hover: 0 10px 30px rgba(0, 120, 90, 0.14);
  --nc-maxw:         1180px;

  --font: 'NanumSquare Neo', 'NanumSquareNeo', 'NanumSquareWeb', 'NanumSquare',
          'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--nc-text);
  background: var(--nc-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--nc-maxw); margin: 0 auto; padding: 0 28px; }

/* ============================ Top navigation ========================= */
.nc-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--nc-border);
}
.nc-nav .wrap {
  display: flex; align-items: center; gap: 22px;
  height: 62px;
}
.nc-brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 17px; }
.nc-brand .logo-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--nc-green) 0%, var(--nc-green-header) 100%);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px;
  box-shadow: 0 3px 8px rgba(0,168,121,0.35);
}
.nc-brand .brand-txt b { color: var(--nc-green-dark); }
.nc-brand .brand-txt span { color: var(--nc-gray); font-weight: 700; }
.nc-nav-links { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nc-nav-links a {
  font-size: 14px; font-weight: 700; color: var(--nc-gray);
  padding: 8px 13px; border-radius: 8px; transition: .15s;
}
.nc-nav-links a:hover { background: var(--nc-bg); color: var(--nc-green-dark); }
.nc-nav-links a.active { color: var(--nc-green-dark); background: var(--nc-mint); }

/* =============================== Hero =============================== */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 460px at 82% -10%, rgba(79,125,255,0.10), transparent 60%),
    radial-gradient(900px 520px at 12% 8%, rgba(0,200,120,0.14), transparent 62%),
    linear-gradient(180deg, #f7fbf9 0%, #ffffff 100%);
  border-bottom: 1px solid var(--nc-border);
}
.hero .wrap { padding-top: 70px; padding-bottom: 66px; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; letter-spacing: .04em;
  color: var(--nc-green-dark); background: var(--nc-mint);
  padding: 7px 14px; border-radius: 999px; margin-bottom: 22px;
}
.hero h1 {
  margin: 0 0 18px; font-size: 44px; font-weight: 800; line-height: 1.22;
  letter-spacing: -0.03em;
}
.hero h1 .pt { color: var(--nc-green); }
.hero p.lead { margin: 0; font-size: 17px; color: var(--nc-gray); max-width: 720px; font-weight: 400; }
.hero-cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

/* clouds/chips decorative graphic */
.hero-graphic { position: absolute; right: -40px; top: 40px; width: 380px; opacity: .9; pointer-events: none; }

/* ============================== Buttons ============================= */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font); font-weight: 800; font-size: 14px;
  padding: 13px 22px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; transition: .16s; line-height: 1;
}
.btn-primary { background: var(--nc-green); color: #fff; box-shadow: 0 6px 16px rgba(0,200,120,0.28); }
.btn-primary:hover { background: #00b46c; transform: translateY(-1px); }
.btn-ghost { background: #fff; color: var(--nc-green-dark); border-color: var(--nc-border); }
.btn-ghost:hover { border-color: var(--nc-green); background: var(--nc-bg); }
.btn-blue { background: var(--nc-blue); color:#fff; box-shadow: 0 6px 16px rgba(79,125,255,0.28); }
.btn-blue:hover { background: #3c6bf5; transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-sm { padding: 9px 15px; font-size: 13px; }
.btn-xs { padding: 3px 9px; font-size: 11.5px; border-radius: 7px; }
.pr-cred-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--nc-border); flex-wrap: wrap; }
.pr-cred-row:last-child { border-bottom: 0; }
.pr-cred-row .k { flex: 0 0 200px; font-size: 12.5px; font-weight: 800; color: var(--nc-text); }
.pr-cred-row .v { flex: 1; min-width: 220px; font-size: 12.5px; color: var(--nc-gray); background: var(--nc-bg-2); padding: 5px 9px; border-radius: 6px; word-break: break-all; }
.pc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pc-badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 100px; }

/* =========================== Section head =========================== */
.section { padding: 60px 0; }
.section.alt { background: var(--nc-bg); border-top: 1px solid var(--nc-border); border-bottom: 1px solid var(--nc-border); }
.sec-head { margin-bottom: 34px; }
.sec-head .kicker { font-size: 13px; font-weight: 800; color: var(--nc-green-header); letter-spacing:.05em; display:flex; align-items:center; gap:8px; }
.sec-head .kicker::before { content:''; width: 9px; height: 9px; border-radius: 999px; border: 3px solid var(--nc-green); }
.sec-head h2 { margin: 10px 0 8px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.sec-head p { margin: 0; color: var(--nc-gray); font-size: 15px; max-width: 760px; }

/* ========================= Product grid (home) ===================== */
.prod-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.grid-group-head { grid-column: 1 / -1; margin: 18px 0 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.grid-group-head:first-child { margin-top: 0; }
.grid-group-head h3 { margin: 0; font-size: 19px; font-weight: 800; color: var(--nc-text); }
.grid-group-head span { font-size: 13px; color: var(--nc-muted); font-weight: 600; }
.scn-home-banner { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; text-decoration: none;
  background: linear-gradient(135deg,#0d1b2a,#12324a); color: #fff; border-radius: var(--nc-radius); padding: 20px 24px; }
.scn-home-banner .b-tag { flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: #7cf3ac;
  background: rgba(3,199,90,.15); border: 1px solid rgba(3,199,90,.35); border-radius: 100px; padding: 5px 12px; }
.scn-home-banner .b-body { flex: 1; min-width: 0; }
.scn-home-banner h4 { margin: 0 0 4px; font-size: 16px; font-weight: 800; }
.scn-home-banner p { margin: 0; font-size: 12.5px; color: #b9c7d6; }
.scn-home-banner .b-go { flex: none; font-size: 13px; font-weight: 800; color: #7cf3ac; }
.scn-home-banner:hover { box-shadow: 0 12px 30px rgba(0,0,0,.18); }
@media (max-width: 720px){ .scn-home-banner { flex-direction: column; align-items: flex-start; } }
.prod-card {
  position: relative; background: #fff; border: 1px solid var(--nc-border);
  border-radius: var(--nc-radius); padding: 24px 22px 22px;
  transition: .18s; display: flex; flex-direction: column; min-height: 186px;
}
.prod-card:hover { transform: translateY(-4px); box-shadow: var(--nc-shadow-hover); border-color: transparent; }
.prod-card .p-top { display: flex; align-items: center; justify-content: space-between; }
.prod-icon {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  color: #fff; flex-shrink: 0;
}
.prod-icon svg { width: 30px; height: 30px; }
.p-badge {
  font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 999px;
  letter-spacing: .03em;
}
.p-badge.live { color: var(--nc-green-dark); background: var(--nc-mint); }
.p-badge.soon { color: var(--nc-muted); background: var(--nc-bg-2); }
.p-badge.guide { color: #5b3fb8; background: #efeafc; }
.prod-card h3 { margin: 18px 0 6px; font-size: 19px; font-weight: 800; letter-spacing:-.02em; }
.prod-card .p-desc { margin: 0; font-size: 13.5px; color: var(--nc-gray); flex-grow: 1; }
.prod-card .p-cat { margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--nc-muted); }
.prod-card .p-arrow {
  position: absolute; right: 20px; bottom: 20px; color: var(--nc-gray-mid);
  transition: .18s; opacity: 0;
}
.prod-card:hover .p-arrow { opacity: 1; color: var(--nc-green); transform: translateX(3px); }

/* icon tile color variants */
.ic-green  { background: linear-gradient(135deg, #00C878, #00A479); }
.ic-blue   { background: linear-gradient(135deg, #4F7DFF, #09449B); }
.ic-teal   { background: linear-gradient(135deg, #16D1CD, #0071BE); }
.ic-violet { background: linear-gradient(135deg, #6C7BFF, #3742A8); }
.ic-dgreen { background: linear-gradient(135deg, #1BD68B, #097156); }
.ic-slate  { background: linear-gradient(135deg, #6F7D87, #3d474d); }
.ic-amber  { background: linear-gradient(135deg, #F7B733, #E0771F); }
.ic-rose   { background: linear-gradient(135deg, #F2557D, #B5295A); }
.ic-orange { background: linear-gradient(135deg, #F08A3C, #C2531A); }

/* ========================= Product page hero ======================= */
.p-hero { background: linear-gradient(180deg, #f6faf8 0%, #fff 100%); border-bottom: 1px solid var(--nc-border); }
.p-hero .wrap { padding: 40px 28px 46px; }
.breadcrumb { font-size: 13px; color: var(--nc-muted); font-weight:700; margin-bottom: 22px; display:flex; gap:8px; align-items:center;}
.breadcrumb a:hover { color: var(--nc-green-dark); }
.breadcrumb .sep { color: var(--nc-gray-mid); }
.p-hero-main { display: flex; gap: 22px; align-items: flex-start; }
.p-hero .prod-icon { width: 68px; height: 68px; border-radius: 18px; }
.p-hero .prod-icon svg { width: 38px; height: 38px; }
.p-hero h1 { margin: 2px 0 10px; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
.p-hero .governing { font-size: 16px; color: var(--nc-gray); max-width: 780px; }
.p-hero .governing b { color: var(--nc-green-dark); font-weight: 800; }
.p-hero .tags { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-size: 12px; font-weight: 700; color: var(--nc-gray); background: #fff; border:1px solid var(--nc-border); padding: 5px 12px; border-radius: 999px; }

/* ========================= Feature cards =========================== */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.feature-card {
  background: #fff; border: 1px solid var(--nc-border); border-radius: var(--nc-radius);
  padding: 24px; display: flex; gap: 16px;
}
.feature-card .f-ico {
  width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
  background: var(--nc-mint); color: var(--nc-green-dark); display: grid; place-items: center;
}
.feature-card .f-ico svg { width: 24px; height: 24px; }
.feature-card h4 { margin: 2px 0 7px; font-size: 16px; font-weight: 800; }
.feature-card p { margin: 0; font-size: 13.5px; color: var(--nc-gray); }

/* domain (service type) cards — richer, stacked layout */
.domain-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
.domain-card { flex-direction: column; gap: 14px; }
.domain-card.is-on { border-color: var(--nc-green); box-shadow: 0 0 0 1px var(--nc-green) inset; }
.domain-card.is-off { opacity: .82; }
.domain-card.is-off .f-ico { background: var(--nc-bg-2); color: var(--nc-muted); }
.dm-body { display: flex; flex-direction: column; min-width: 0; }
.domain-card h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.dm-status { font-size: 12px; font-weight: 800; }
.dm-status.on { color: var(--nc-green-dark); }
.dm-status.off { color: var(--nc-muted); }
.dm-badge {
  align-self: flex-start; font-size: 11.5px; font-weight: 800; color: var(--nc-green-dark);
  background: var(--nc-mint); border-radius: 999px; padding: 3px 11px; margin-bottom: 10px;
}
.domain-card.is-off .dm-badge { color: var(--nc-muted); background: var(--nc-bg-2); }
.domain-card p { font-size: 13.5px; color: var(--nc-gray); }
.dm-list { margin: 11px 0 0; padding-left: 0; list-style: none; display: grid; gap: 7px; }
.dm-list li { position: relative; padding-left: 18px; font-size: 13px; color: var(--nc-gray); }
.dm-list li::before {
  content: ''; position: absolute; left: 2px; top: 6px; width: 7px; height: 7px;
  border-radius: 2px; background: var(--nc-green);
}
.domain-card.is-off .dm-list li::before { background: var(--nc-muted); }
.dm-use {
  margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--nc-border);
  font-size: 12.5px; color: var(--nc-gray);
}
.dm-use span { font-weight: 800; color: var(--nc-text); margin-right: 6px; }

/* ============================ Process ============================== */
.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.step { position: relative; padding: 0 14px; }
.step .snum {
  width: 40px; height: 40px; border-radius: 999px; background: #fff;
  border: 2px solid var(--nc-green); color: var(--nc-green-dark);
  display: grid; place-items: center; font-weight: 800; font-size: 15px; margin-bottom: 14px;
  position: relative; z-index: 2;
}
.step h4 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.step p { margin: 0; font-size: 13px; color: var(--nc-gray); }
.step:not(:last-child)::after {
  content: ''; position: absolute; top: 20px; left: calc(50% + 20px); right: calc(-50% + 20px);
  height: 2px; background: var(--nc-border); z-index: 1;
}
.process.compact { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) {
  .process, .process.compact { grid-template-columns: 1fr; gap: 20px; }
  .step { padding-left: 54px; }
  .step .snum { position: absolute; left: 0; top: 0; }
  .step:not(:last-child)::after { top: 40px; left: 19px; right: auto; bottom: -20px; width: 2px; height: auto; }
}

/* ============================ Info list ============================ */
.callout {
  border-left: 4px solid var(--nc-green); background: var(--nc-mint-2);
  padding: 14px 18px; border-radius: 0 10px 10px 0; font-size: 13.5px; color: var(--nc-green-dark);
}
.callout.warn { border-color: var(--nc-red); background: #fff2f2; color: #b53434; }
.callout b { font-weight: 800; }

/* spec table */
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; background:#fff; border-radius: var(--nc-radius); overflow:hidden; border:1px solid var(--nc-border); }
.spec-table th { background: var(--nc-border); color: var(--nc-text); font-weight: 800; text-align: left; padding: 13px 18px; font-size:13px; }
.spec-table td { padding: 13px 18px; border-top: 1px solid var(--nc-border); color: var(--nc-gray); vertical-align: top; }
.spec-table td:first-child { font-weight: 800; color: var(--nc-text); width: 34%; }

/* ======================= OCR live demo panel ====================== */
.demo-shell { background: var(--nc-bg); border: 1px solid var(--nc-border); border-radius: 18px; padding: 26px; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 900px) { .demo-grid { grid-template-columns: 1fr; } }

.demo-panel { background:#fff; border:1px solid var(--nc-border); border-radius: var(--nc-radius); padding: 20px; display:flex; flex-direction:column; }
.demo-panel .dp-head { display:flex; align-items:center; justify-content: space-between; margin-bottom: 14px; }
.demo-panel .dp-head h4 { margin:0; font-size:15px; font-weight:800; display:flex; align-items:center; gap:9px; }
.dp-head .lvlbar { width: 26px; height: 26px; border-radius: 7px; background: var(--nc-green-header); color:#fff; display:grid; place-items:center; font-size:13px; }

.dropzone {
  border: 2px dashed var(--nc-gray-mid); border-radius: 12px; padding: 30px 18px; text-align: center;
  color: var(--nc-muted); cursor: pointer; transition: .16s; background: var(--nc-bg);
}
.dropzone:hover, .dropzone.drag { border-color: var(--nc-green); background: var(--nc-mint-2); color: var(--nc-green-dark); }
.dropzone svg { width: 38px; height: 38px; margin-bottom: 10px; opacity:.7; }
.dropzone b { color: var(--nc-green-dark); font-weight: 800; }
.dropzone small { display:block; margin-top:8px; font-size:12px; }

.field-row { display:flex; gap: 12px; align-items:center; margin: 16px 0; flex-wrap:wrap; }
.field-row label { font-size:13px; font-weight:800; color: var(--nc-gray); }
select, .txt-input {
  font-family: var(--font); font-size: 14px; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--nc-border); background:#fff; color: var(--nc-text); font-weight:700;
}
.txt-input { flex: 1; min-width: 180px; }
select:focus, .txt-input:focus { outline: none; border-color: var(--nc-green); }

.samples { display:flex; gap:10px; flex-wrap:wrap; margin-top: 6px; }
.sample-thumb {
  width: 92px; height: 66px; border-radius: 9px; overflow:hidden; border:2px solid var(--nc-border);
  cursor:pointer; transition:.15s; background:#fff; position:relative;
}
.sample-thumb img { width:100%; height:100%; object-fit: cover; }
.sample-thumb:hover, .sample-thumb.sel { border-color: var(--nc-green); }
.sample-thumb .cap { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.55); color:#fff; font-size:10px; font-weight:700; padding:2px 4px; text-align:center;}

/* preview + boxes */
.preview-box { position: relative; width: 100%; background: var(--nc-bg-2); border-radius: 10px; overflow: hidden; min-height: 160px; display:grid; place-items:center; }
.preview-box img { width: 100%; display: block; }
.overlay { position: absolute; inset: 0; pointer-events: none; }
.overlay .bbox { position:absolute; border: 2px solid rgba(0,200,120,.9); background: rgba(0,200,120,.10); border-radius:2px; }
.overlay .bbox .lbl { position:absolute; top:-16px; left:0; font-size:9px; background: var(--nc-green); color:#fff; padding:0 3px; border-radius:3px; white-space:nowrap; font-weight:700; }

.result-empty { color: var(--nc-muted); font-size: 14px; text-align:center; padding: 40px 10px; }
.result-empty svg { width:44px; height:44px; opacity:.4; margin-bottom:10px; }

.status-bar { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:800; padding:10px 14px; border-radius:10px; margin-bottom:14px; }
.status-bar.ok { background: var(--nc-mint); color: var(--nc-green-dark); }
.status-bar.err { background:#fff2f2; color:#b53434; }
.status-bar.load { background: var(--nc-bg-2); color: var(--nc-gray); }
.spinner { width:15px; height:15px; border:2.5px solid var(--nc-gray-mid); border-top-color: var(--nc-green); border-radius:999px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.res-tabs { display:flex; gap:6px; margin-bottom:12px; border-bottom: 1px solid var(--nc-border); }
.res-tabs button { font-family:var(--font); font-weight:800; font-size:13px; color: var(--nc-muted); background:none; border:none; padding:9px 14px; cursor:pointer; border-bottom: 2px solid transparent; margin-bottom:-1px; }
.res-tabs button.active { color: var(--nc-green-dark); border-bottom-color: var(--nc-green); }

.text-lines { max-height: 320px; overflow:auto; }
.text-line { display:flex; justify-content: space-between; gap:12px; padding:8px 12px; border-radius:8px; font-size:13.5px; }
.text-line:nth-child(odd) { background: var(--nc-bg); }
.text-line .conf { font-size: 11px; font-weight:800; color: var(--nc-green-header); flex-shrink:0; }
.text-line .conf.low { color: var(--nc-red); }

pre.json { background: #0f1a17; color: #b9f5d8; font-size: 12px; border-radius: 10px; padding: 16px; overflow:auto; max-height: 340px; line-height:1.5; margin:0;
  font-family: 'Consolas','D2Coding',monospace; }
pre.json .k { color:#7fdbff; } pre.json .s { color:#c8f7a0; } pre.json .n { color:#ffd479; }

.res-actions { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }

/* ===================== Papago demo (multi-tab) ==================== */
.ptabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.ptabs button {
  font-family:var(--font); font-weight:800; font-size:13.5px; color:var(--nc-gray);
  background:#fff; border:1px solid var(--nc-border); padding:10px 16px; border-radius:999px; cursor:pointer; transition:.15s;
  display:flex; align-items:center; gap:7px;
}
.ptabs button:hover { border-color:var(--nc-blue); color:var(--nc-blue-dark); }
.ptabs button.active { background:var(--nc-blue); color:#fff; border-color:var(--nc-blue); box-shadow:0 4px 12px rgba(79,125,255,.28); }
.ptab-panel { animation: fade .2s ease; }
@keyframes fade { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

.lang-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.lang-row select { flex:1; min-width:0; }
.swap-btn { flex-shrink:0; width:40px; height:40px; border-radius:10px; border:1px solid var(--nc-border); background:#fff; color:var(--nc-blue); cursor:pointer; display:grid; place-items:center; transition:.15s; }
.swap-btn:hover { background:var(--nc-blue); color:#fff; border-color:var(--nc-blue); }
.swap-btn:disabled { opacity:.4; cursor:not-allowed; }
.swap-btn svg { width:20px; height:20px; }

.ta-wrap { position:relative; }
textarea.papago-ta {
  width:100%; min-height:180px; resize:vertical; font-family:var(--font); font-size:15px;
  padding:14px; border:1px solid var(--nc-border); border-radius:11px; background:#fff; color:var(--nc-text); line-height:1.6;
}
textarea.papago-ta:focus { outline:none; border-color:var(--nc-blue); }
textarea.papago-ta[readonly] { background:var(--nc-bg); }
.char-count { position:absolute; right:12px; bottom:10px; font-size:11px; font-weight:700; color:var(--nc-muted); background:rgba(255,255,255,.85); padding:2px 6px; border-radius:6px; }
.char-count.over { color:var(--nc-red); }

.opt-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:14px 0; }
.chk { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--nc-gray); cursor:pointer; }
.chk input { width:16px; height:16px; accent-color:var(--nc-blue); }

.detected-note { font-size:12.5px; font-weight:700; color:var(--nc-blue-dark); margin-top:8px; }

.lang-badge-big { display:flex; align-items:center; gap:16px; padding:24px; background:#fff; border:1px solid var(--nc-border); border-radius:14px; }
.lang-badge-big .code { width:64px; height:64px; border-radius:16px; background:linear-gradient(135deg,#4F7DFF,#09449B); color:#fff; display:grid; place-items:center; font-size:20px; font-weight:800; flex-shrink:0; }
.lang-badge-big .nm { font-size:22px; font-weight:800; }
.lang-badge-big .sub { font-size:13px; color:var(--nc-muted); font-weight:700; }

.progress-track { height:10px; background:var(--nc-border); border-radius:999px; overflow:hidden; margin:10px 0; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--nc-blue),var(--nc-green)); width:0%; transition:width .4s; border-radius:999px; }

.img-compare { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:720px){ .img-compare{grid-template-columns:1fr;} }
.img-compare figure { margin:0; }
.img-compare figcaption { font-size:12px; font-weight:800; color:var(--nc-muted); margin-bottom:6px; }
.img-compare img { width:100%; border:1px solid var(--nc-border); border-radius:10px; display:block; }

.mode-toggle { display:inline-flex; background:var(--nc-bg-2); border-radius:10px; padding:3px; }
.mode-toggle button { font-family:var(--font); font-weight:800; font-size:13px; border:none; background:none; color:var(--nc-muted); padding:8px 16px; border-radius:8px; cursor:pointer; }
.mode-toggle button.active { background:#fff; color:var(--nc-blue-dark); box-shadow:var(--nc-shadow); }

.iframe-preview { width:100%; height:340px; border:1px solid var(--nc-border); border-radius:10px; background:#fff; }

.info-card { background:var(--nc-mint-2); border:1px solid var(--nc-border); border-radius:14px; padding:22px; }
.info-card h4 { margin:0 0 10px; font-size:16px; font-weight:800; color:var(--nc-green-dark); }
.info-card p { margin:0 0 8px; font-size:13.5px; color:var(--nc-gray); }
.info-card code { background:#fff; padding:2px 7px; border-radius:6px; font-size:12px; color:var(--nc-blue-dark); font-family:'Consolas',monospace; }

.demo-panel.full { grid-column: 1 / -1; }

/* ===================== CLOVA Speech demo ========================== */
.rec-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:6px 0 14px; }
.rec-btn {
  display:inline-flex; align-items:center; gap:10px; font-family:var(--font); font-weight:800; font-size:14px;
  padding:12px 20px; border-radius:999px; border:none; cursor:pointer; transition:.15s;
  background:var(--nc-teal); color:#fff; box-shadow:0 6px 16px rgba(0,209,201,.3);
}
.rec-btn:hover { filter:brightness(.96); }
.rec-btn.recording { background:var(--nc-red); box-shadow:0 6px 16px rgba(255,69,69,.35); animation:pulse 1.4s infinite; }
.rec-btn .dot { width:11px; height:11px; border-radius:999px; background:#fff; }
.rec-btn.recording .dot { animation:blink 1s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.03)} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.rec-timer { font-family:'Consolas',monospace; font-weight:800; font-size:16px; color:var(--nc-gray); }
.rec-hint { font-size:12px; color:var(--nc-muted); }
audio { width:100%; margin-top:10px; }

.seg-list { max-height:420px; overflow:auto; display:flex; flex-direction:column; gap:8px; }
.seg { display:flex; gap:12px; padding:11px 13px; border-radius:10px; background:var(--nc-bg); border:1px solid var(--nc-border); }
.seg .seg-meta { flex-shrink:0; width:96px; }
.seg .seg-time { font-family:'Consolas',monospace; font-size:11px; color:var(--nc-muted); font-weight:700; }
.seg .spk { display:inline-block; margin-top:4px; font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; color:#fff; }
.seg .seg-text { flex:1; font-size:14px; line-height:1.5; }
.seg .seg-conf { font-size:10px; color:var(--nc-green-header); font-weight:800; margin-top:4px; }
.spk-c0{background:#00A479}.spk-c1{background:#4F7DFF}.spk-c2{background:#8B5CF6}.spk-c3{background:#F59E0B}.spk-c4{background:#EC4899}
.evt-chip { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; color:var(--nc-blue-dark); background:var(--nc-blue-light); padding:4px 10px; border-radius:999px; margin:2px; }

/* streaming architecture diagram */
.arch { display:flex; align-items:stretch; gap:0; flex-wrap:wrap; margin:8px 0 18px; }
.arch .node { flex:1; min-width:120px; background:#fff; border:1px solid var(--nc-border); border-radius:12px; padding:16px 14px; text-align:center; }
.arch .node .ic { width:40px; height:40px; border-radius:10px; margin:0 auto 8px; display:grid; place-items:center; color:#fff; }
.arch .node b { display:block; font-size:13px; }
.arch .node small { font-size:11px; color:var(--nc-muted); }
.arch .arrow { display:flex; align-items:center; color:var(--nc-gray-mid); font-size:20px; padding:0 8px; font-weight:800; }
@media (max-width:720px){ .arch{flex-direction:column} .arch .arrow{transform:rotate(90deg); padding:6px 0} }

.code-block { background:#0f1a17; color:#b9f5d8; font-size:12px; border-radius:10px; padding:16px; overflow:auto; max-height:300px; line-height:1.5; font-family:'Consolas','D2Coding',monospace; margin:0; white-space:pre; }

.live-dot { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; color:#fff; background:var(--nc-red); padding:3px 10px; border-radius:999px; }
.live-dot::before { content:''; width:7px; height:7px; border-radius:999px; background:#fff; animation:blink 1s infinite; }

.stream-live { display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-top:6px; }
@media (max-width:820px){ .stream-live{ grid-template-columns:1fr; } }

.video-wrap { position:relative; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; }
.video-wrap #stPlayer, .video-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#7d939f; background:#0f1a17; font-size:14px; text-align:center; padding:20px; }
.cap-overlay { position:absolute; left:0; right:0; bottom:0; padding:14px 18px 16px; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)); display:flex; flex-direction:column; gap:4px; z-index:2; }
.cap-line { color:#fff; font-size:19px; font-weight:800; line-height:1.35; text-shadow:0 2px 6px rgba(0,0,0,.9); }
.cap-tr { color:#93c5ff; font-size:15px; font-weight:700; text-shadow:0 2px 6px rgba(0,0,0,.9); }
@media (max-width:620px){ .cap-line{font-size:15px} .cap-tr{font-size:13px} }

.stream-side { background:var(--nc-bg-2); border:1px solid var(--nc-border); border-radius:12px; padding:14px; display:flex; flex-direction:column; min-height:0; }
.side-head { font-size:13px; font-weight:800; color:var(--nc-gray); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.side-count { font-size:11px; font-weight:800; color:#fff; background:var(--nc-teal); padding:2px 8px; border-radius:999px; }
.stream-side .seg-list { max-height:360px; }
.sseg { cursor:pointer; transition:.12s; }
.sseg:hover { border-color:var(--nc-teal); }
.sseg.active { background:var(--nc-mint); border-color:var(--nc-green); }
.sseg.active .seg-text { font-weight:800; color:var(--nc-green-dark); }
.seg-tr { margin-top:4px; font-size:12.5px; color:var(--nc-blue-dark); font-weight:700; }

/* ===================== Maps demo ================================== */
.map-canvas { width:100%; height:420px; border-radius:12px; overflow:hidden; border:1px solid var(--nc-border); background:var(--nc-bg-2); }
.map-canvas.tall { height:480px; }
.map-img-wrap { width:100%; background:var(--nc-bg-2); border:1px solid var(--nc-border); border-radius:12px; overflow:hidden; display:grid; place-items:center; min-height:200px; }
.map-img-wrap img { max-width:100%; display:block; }
.host-banner { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:#fff4e5; border:1px solid #ffd9a8; color:#8a5a12; border-radius:10px; padding:12px 16px; font-size:13px; font-weight:700; margin-bottom:16px; }
.host-banner .btn { margin-left:auto; }

.mstat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:16px; }
.mstat { background:#fff; border:1px solid var(--nc-border); border-radius:12px; padding:14px 16px; }
.mstat .k { font-size:12px; font-weight:700; color:var(--nc-muted); }
.mstat .v { font-size:20px; font-weight:800; color:var(--nc-text); margin-top:4px; }
.mstat .v small { font-size:12px; font-weight:700; color:var(--nc-muted); }
.mstat.hl .v { color:var(--nc-green-dark); }
.mstat.blue .v { color:var(--nc-blue-dark); }

.guide-list { max-height:300px; overflow:auto; display:flex; flex-direction:column; gap:2px; }
.guide-item { display:flex; gap:12px; padding:9px 12px; border-radius:8px; font-size:13.5px; align-items:baseline; }
.guide-item:nth-child(odd){ background:var(--nc-bg); }
.guide-item .gd { flex-shrink:0; width:74px; font-family:'Consolas',monospace; font-size:12px; color:var(--nc-muted); font-weight:700; text-align:right; }
.guide-item .gi { flex:1; }
.guide-item .gt { flex-shrink:0; width:44px; height:44px; }

.opt-pills { display:flex; gap:8px; flex-wrap:wrap; }
.opt-pill { font-size:12px; font-weight:800; padding:6px 12px; border-radius:999px; border:1px solid var(--nc-border); background:#fff; color:var(--nc-gray); cursor:pointer; }
.opt-pill.on { background:var(--nc-blue); color:#fff; border-color:var(--nc-blue); }

.wp-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.wp-row .txt-input { flex:1; }
.wp-row .rm { width:34px;height:34px;border-radius:8px;border:1px solid var(--nc-border);background:#fff;color:var(--nc-red);cursor:pointer;flex-shrink:0; }
.mono { font-family:'Consolas',monospace; font-size:12.5px; }
.addr-item { padding:10px 12px; border:1px solid var(--nc-border); border-radius:9px; margin-bottom:8px; background:#fff; cursor:pointer; transition:.12s; }
.addr-item:hover { border-color:var(--nc-green); background:var(--nc-bg); }
.addr-item .road { font-weight:800; font-size:14px; }
.addr-item .jibun { font-size:12.5px; color:var(--nc-muted); margin-top:3px; }
.addr-item .xy { font-size:11.5px; color:var(--nc-blue-dark); margin-top:4px; font-family:'Consolas',monospace; }
.route-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; font-weight:700; color:var(--nc-gray); margin-top:10px; }
.route-legend span { display:inline-flex; align-items:center; gap:6px; }
.route-legend i { width:14px; height:4px; border-radius:2px; display:inline-block; }

/* ===================== CLOVA Voice demo =========================== */
.slider-row { display:grid; grid-template-columns:96px 1fr 52px; align-items:center; gap:12px; margin:10px 0; }
.slider-row label { font-size:13px; font-weight:800; color:var(--nc-gray); }
.slider-row input[type=range] { width:100%; accent-color:var(--nc-green); }
.slider-row .val { font-family:'Consolas',monospace; font-weight:800; font-size:13px; color:var(--nc-green-dark); text-align:right; }
.voice-audio { width:100%; margin-top:14px; }
.emo-grid, .gallery-grid, .multi-grid { display:grid; gap:14px; }
.emo-grid { grid-template-columns:repeat(2,1fr); }
.gallery-grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.multi-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
@media (max-width:640px){ .emo-grid{grid-template-columns:1fr} }
.voice-card { background:#fff; border:1px solid var(--nc-border); border-radius:12px; padding:16px; }
.voice-card .vc-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.voice-card .vc-name { font-weight:800; font-size:15px; }
.voice-card .vc-tag { font-size:11px; font-weight:800; color:var(--nc-muted); background:var(--nc-bg-2); padding:3px 9px; border-radius:999px; }
.voice-card .vc-emo { font-size:24px; }
.voice-card audio { width:100%; margin-top:6px; }
.voice-card .vc-play { width:100%; }
.voice-card.playing { border-color:var(--nc-green); box-shadow:0 0 0 1px var(--nc-green) inset; }
.emo-neutral{border-left:4px solid #778A91}.emo-sad{border-left:4px solid #4F7DFF}.emo-joy{border-left:4px solid #00C878}.emo-angry{border-left:4px solid #FF4545}
.lang-flag { font-size:20px; margin-right:6px; }
.char-counter { font-size:12px; font-weight:700; color:var(--nc-muted); text-align:right; margin-top:4px; }
.char-counter.over { color:var(--nc-red); }

/* ===================== NAVER API HUB (Shopping Insight) demo ======= */
.cfg-banner { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:#fff2f2; border:1px solid #ffd0d0; color:#b53434; border-radius:10px; padding:12px 16px; font-size:13px; font-weight:700; margin-bottom:16px; }
.chart-box { background:#fff; border:1px solid var(--nc-border); border-radius:12px; padding:16px; }
.chart-box svg { width:100%; height:auto; display:block; }
.chart-legend { display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; }
.chart-legend span { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--nc-gray); }
.chart-legend i { width:14px; height:4px; border-radius:2px; }
.ch-line { fill:none; stroke-width:2.5; }
.ch-dot { stroke:#fff; stroke-width:1.5; }
.ch-grid { stroke:var(--nc-border); stroke-width:1; }
.ch-axis { fill:var(--nc-muted); font-size:10px; font-family:var(--font); }
.pill-toggle { display:inline-flex; background:var(--nc-bg-2); border-radius:10px; padding:3px; flex-wrap:wrap; }
.pill-toggle button { font-family:var(--font); font-weight:800; font-size:13px; border:none; background:none; color:var(--nc-muted); padding:8px 14px; border-radius:8px; cursor:pointer; }
.pill-toggle button.active { background:#fff; color:var(--nc-blue-dark); box-shadow:var(--nc-shadow); }
.kw-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.kw-row .txt-input { flex:1; }
.kw-row .rm { width:34px;height:34px;border-radius:8px;border:1px solid var(--nc-border);background:#fff;color:var(--nc-red);cursor:pointer;flex-shrink:0; }
.chk-inline { display:inline-flex; gap:6px; align-items:center; font-size:13px; font-weight:700; color:var(--nc-gray); margin-right:6px; }
.insight-note { font-size:12.5px; color:var(--nc-muted); margin-top:10px; }
.rank-list { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.rank-item { display:flex; align-items:center; gap:10px; font-size:13px; }
.rank-item .bar { height:14px; border-radius:3px; background:var(--nc-green); }
.rank-item .rl { width:120px; font-weight:700; flex-shrink:0; }
.rank-item .rv { font-family:'Consolas',monospace; font-weight:800; color:var(--nc-gray); }

/* ===================== CLOVA Dubbing (content page) =============== */
.shot-figure { margin: 0; }
.shot-figure img { width: 100%; display: block; border: 1px solid var(--nc-border); border-radius: 14px; box-shadow: var(--nc-shadow); }
.shot-figure figcaption { margin-top: 12px; font-size: 13px; color: var(--nc-muted); text-align: center; font-weight: 700; }
.link-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.tut-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 22px; }
@media (max-width: 760px){ .tut-grid { grid-template-columns: 1fr; } }
.tut-video { margin: 0; }
.tut-video figcaption { margin-top: 10px; font-size: 13px; font-weight: 800; color: var(--nc-gray); }

/* ============================ Footer =============================== */
.nc-footer { background: #fff; border-top: 1px solid var(--nc-border); padding: 26px 0; margin-top: 20px; }
.nc-footer .wrap { display:flex; align-items:center; justify-content: space-between; flex-wrap:wrap; gap:12px; }
.nc-footer .f-logo { display:flex; align-items:center; gap:10px; font-weight:800; color: var(--nc-gray); font-size:14px; }
.nc-footer .f-logo .logo-mark { width:24px; height:24px; border-radius:7px; font-size:12px; }
.nc-footer .copyright { font-size: 12px; color: var(--nc-muted); font-weight:400; }
.nc-footer .pageno { font-size:12px; color: var(--nc-gray-mid); font-weight:700; }

/* utility */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.stack > * + * { margin-top: 16px; }
.hidden { display:none !important; }
@media (max-width: 900px){ .prod-grid{grid-template-columns:1fr 1fr;} .feature-grid{grid-template-columns:1fr;} .hero h1{font-size:34px;} }
@media (max-width: 620px){ .prod-grid{grid-template-columns:1fr;} .p-hero-main{flex-direction:column;} }

/* ============================ Demo Scenario ============================ */
.scn-hero { background: linear-gradient(135deg,#06202f 0%,#0d1b2a 48%,#102a3a 100%); color:#fff; padding: 40px 0 44px; }
.scn-hero .breadcrumb { color:#9fb0c2; margin-bottom:18px; }
.scn-hero .breadcrumb a { color:#9fb0c2; } .scn-hero .breadcrumb a:hover { color:#fff; }
.scn-tag { display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.06em; color:#fff; padding:4px 12px; border-radius:100px; margin-bottom:12px; }
.scn-hero h1 { font-size:30px; font-weight:800; letter-spacing:-.02em; margin:0 0 12px; }
.scn-hero > .wrap > p { font-size:15px; color:#c4d0dd; max-width:780px; margin:0 0 20px; }
.scn-chain { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:16px; }
.scn-chain .s { font-size:12px; font-weight:700; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:8px; padding:6px 10px; }
.scn-chain i { color:#7cf3ac; font-weight:800; font-style:normal; }
.scn-prods { display:flex; flex-wrap:wrap; gap:8px; }
.scn-prods span { font-size:11.5px; font-weight:600; color:#cfe0ee; background:rgba(3,199,90,.12); border:1px solid rgba(3,199,90,.3); border-radius:7px; padding:4px 9px; }

.scn-notice { background:#fff8e8; border:1px solid #f5e2b0; border-radius:12px; padding:13px 16px; font-size:13px; color:#7a5b12; margin-top:26px; }
.scn-b { display:inline-block; font-size:11px; font-weight:800; padding:2px 8px; border-radius:6px; margin:0 2px; }
.scn-b.live { color:#0a7a3c; background:#d6f6e9; } .scn-b.sim { color:#5b3fd6; background:#efeafc; } .scn-b.embed { color:#0071be; background:#dcefff; }

.scn-flow { display:flex; flex-direction:column; gap:16px; }
.scn-stage { background:#fff; border:1px solid var(--nc-border); border-radius:16px; padding:20px 22px; transition:.25s; }
.scn-stage.pending { opacity:.55; }
.scn-stage.active { border-color:var(--nc-green); box-shadow:0 0 0 1px var(--nc-green) inset, 0 10px 30px rgba(0,200,120,.08); opacity:1; }
.scn-stage.done { opacity:1; border-color:#cfe9dc; }
.scn-stage-head { display:flex; gap:15px; align-items:flex-start; }
.scn-num { flex:none; width:34px; height:34px; border-radius:10px; background:var(--nc-dark,#0d1b2a); color:#fff; display:grid; place-items:center; font-weight:800; }
.scn-stage.done .scn-num { background:var(--nc-green); }
.scn-stage-meta { flex:1; min-width:0; }
.scn-stage-tag { font-size:12px; font-weight:800; color:var(--nc-green-dark); margin-bottom:3px; }
.scn-stage-meta h3 { margin:0 0 5px; font-size:16.5px; font-weight:800; }
.scn-stage-meta p { margin:0; font-size:13.5px; color:var(--nc-gray); }
.scn-state { flex:none; font-size:11.5px; font-weight:800; color:var(--nc-muted); background:var(--nc-bg-2); border-radius:7px; padding:4px 10px; align-self:center; }
.scn-state.ok { color:#0a7a3c; background:#d6f6e9; } .scn-state.load { color:#5b3fd6; background:#efeafc; } .scn-state.err { color:#b53434; background:#fff2f2; }
.scn-run { margin-top:14px; }
.scn-viz { margin-top:14px; } .scn-viz:empty { display:none; margin:0; }
.scn-kv { display:flex; gap:10px; padding:6px 0; font-size:12.5px; border-bottom:1px dashed var(--nc-border); }
.scn-kv:last-child { border-bottom:0; } .scn-kv span { flex:0 0 120px; color:var(--nc-muted); font-weight:700; } .scn-kv b, .scn-kv code { color:var(--nc-text); word-break:break-all; }

/* stage1 phone */
.scn-phone { display:inline-block; background:#0d1b2a; border-radius:16px; padding:10px; vertical-align:top; }
.scn-phone-top { color:#cfe0ee; font-size:12px; padding:4px 6px 8px; }
.scn-phone iframe { width:340px; height:390px; border:0; border-radius:10px; background:#0d1b2a; display:block; max-width:78vw; }
.scn-side { display:inline-block; vertical-align:top; margin-left:18px; min-width:280px; max-width:420px; }
.scn-side .scn-kv { border-color:#e6ebf1; }

/* stage2 console */
.scn-console { background:#0d1b2a; color:#cfe0ee; border-radius:12px; padding:16px 18px; }
.scn-console-head { font-size:13px; font-weight:700; color:#fff; margin-bottom:10px; }
.scn-console .scn-kv { border-color:rgba(255,255,255,.1); } .scn-console .scn-kv span { color:#8ba0b4; } .scn-console .scn-kv b, .scn-console .scn-kv code { color:#e8eef4; }
.scn-chstate { display:inline-block; font-weight:800; font-size:13px; padding:5px 14px; border-radius:8px; margin-bottom:10px; background:#22303f; color:#9fb0c2; letter-spacing:.06em; }
.scn-chstate.mid { background:#3a2b6b; color:#c9b8ff; } .scn-chstate.pub { background:#0a7a3c; color:#fff; }
.scn-ls-ctl { display:flex; align-items:center; gap:10px; margin:2px 0 12px; }
.scn-pollnote { flex:1; min-width:0; font-size:12px; color:#9fb0c2; }
.scn-profiles { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.scn-prof { font-size:11.5px; font-weight:700; background:rgba(3,199,90,.15); color:#7cf3ac; border-radius:7px; padding:4px 10px; }

/* stage3 platforms */
.scn-platforms { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.scn-plat { border:1px solid var(--nc-border); border-radius:12px; padding:14px; text-align:center; opacity:.5; transition:.3s; }
.scn-plat.on { opacity:1; border-color:var(--nc-green); }
.scn-plat-ic { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; font-size:20px; margin:0 auto 8px; }
.scn-plat-name { font-size:13px; font-weight:800; }
.scn-plat-st { font-size:12px; font-weight:700; color:var(--nc-muted); margin-top:4px; }
.scn-plat-v { font-size:12px; color:var(--nc-gray); margin-top:2px; min-height:16px; }
.scn-livedot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#e23b3b; margin-right:4px; animation:scnBlink 1s infinite; }
@keyframes scnBlink { 50% { opacity:.3; } }

/* stage4 VPE */
.scn-vpe { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:16px; align-items:start; }
.scn-vpe > * { min-width:0; }
.scn-player { position:relative; width:100%; border-radius:14px; background:linear-gradient(135deg,#243447,#0d1b2a); aspect-ratio:16/9; max-height:58vh; overflow:hidden; display:grid; place-items:center; }
.scn-player-badge { position:absolute; top:12px; left:12px; font-size:11.5px; font-weight:800; color:#fff; background:rgba(226,59,59,.9); padding:3px 9px; border-radius:6px; }
.scn-player-view { position:absolute; top:12px; right:12px; font-size:12px; color:#fff; background:rgba(0,0,0,.35); padding:3px 9px; border-radius:6px; }
.scn-player-center { width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.9); color:#0d1b2a; display:grid; place-items:center; font-size:24px; }
.scn-player-cap { position:absolute; left:12px; right:12px; bottom:22px; color:#fff; font-size:13px; font-weight:700; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.scn-player-bar { position:absolute; left:0; right:0; bottom:0; height:5px; background:rgba(255,255,255,.2); }
.scn-player-bar i { display:block; height:100%; width:42%; background:var(--nc-green); animation:scnBar 8s linear infinite; }
@keyframes scnBar { from { width:8%; } to { width:96%; } }
.scn-player video { position:absolute; inset:0; }
.scn-poster { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#243447,#0d1b2a); color:#fff; }
.scn-poster-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35; }
.scn-poster-msg { position:relative; text-align:center; padding:16px; max-width:92%; }
.scn-poster-ic { font-size:30px; }
.scn-poster-msg b { display:block; margin:6px 0 4px; font-size:15px; }
.scn-poster-msg p { font-size:12px; color:#c4d0dd; margin:0 0 12px; line-height:1.55; }
.scn-poster-msg code { background:rgba(255,255,255,.14); padding:1px 5px; border-radius:4px; word-break:break-all; }
.scn-product { border:1px solid var(--nc-border); border-radius:14px; padding:16px; display:flex; gap:14px; }
.scn-thumb { flex:none; width:66px; height:66px; border-radius:12px; background:linear-gradient(135deg,#ffe0b2,#ffab6b); display:grid; place-items:center; font-size:32px; }
.scn-pname { font-size:14px; font-weight:800; margin-bottom:5px; }
.scn-pprice b { font-size:17px; color:#e23b3b; } .scn-pprice s { color:var(--nc-muted); font-size:12.5px; margin-left:5px; }
.scn-badge-sale { font-size:11px; font-weight:800; color:#e23b3b; background:#ffe6e6; border-radius:5px; padding:1px 6px; margin-left:4px; }
.scn-pmeta { font-size:11.5px; color:var(--nc-muted); margin-top:7px; }

/* stage5 clips */
.scn-clips { display:flex; gap:16px; flex-wrap:wrap; }
.scn-clip { flex:none; width:150px; }
.scn-clip-thumb { position:relative; aspect-ratio:9/16; border-radius:12px; background:linear-gradient(160deg,#3a2b6b,#7c5cff); display:grid; place-items:center; }
.scn-clip-live { position:absolute; top:8px; left:8px; font-size:10px; font-weight:800; color:#fff; background:rgba(0,0,0,.4); padding:2px 7px; border-radius:5px; }
.scn-clip-play { width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.9); color:#3a2b6b; display:grid; place-items:center; font-size:18px; }
.scn-clip-dur { position:absolute; bottom:8px; right:8px; font-size:10.5px; font-weight:700; color:#fff; background:rgba(0,0,0,.5); padding:1px 6px; border-radius:5px; }
.scn-clip-title { font-size:12px; font-weight:700; margin-top:7px; }
.scn-clip-info { flex:1; min-width:260px; }
.scn-clip-video { width:170px; aspect-ratio:9/16; object-fit:cover; border-radius:12px; background:#000; display:block; }

/* stage6 MI */
.scn-mi-head { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:12px; }
.scn-scenes { display:flex; flex-direction:column; gap:8px; }
.scn-scene { display:flex; gap:12px; align-items:center; border:1px solid var(--nc-border); border-radius:10px; padding:10px 12px; }
.scn-scene-t { flex:none; font-weight:800; font-size:12.5px; color:var(--nc-green-dark); background:var(--nc-mint); border-radius:6px; padding:3px 8px; }
.scn-scene-body { flex:1; min-width:0; }
.scn-scene-kw { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:3px; }
.scn-scene-kw span { font-size:11px; font-weight:700; color:var(--nc-gray); background:var(--nc-bg-2); border-radius:5px; padding:2px 7px; }
.scn-scene-cap { font-size:12.5px; color:var(--nc-muted); }
.scn-mi-note { margin-top:12px; font-size:12px; color:var(--nc-muted); }
/* Media Intelligence (실제 API) 데모 */
.scn-mi-src { border:1px solid var(--nc-border); border-radius:12px; padding:14px; background:var(--nc-bg-2); }
.scn-mi-wsbar { display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-size:12.5px; color:var(--nc-muted); padding-bottom:10px; margin-bottom:10px; border-bottom:1px dashed var(--nc-border); }
.scn-mi-wsbar b { color:var(--nc-text); }
.scn-mi-wsbar a { margin-left:auto; color:var(--nc-green-dark); font-weight:700; }
.scn-mi-assets { display:flex; flex-direction:column; gap:8px; }
.scn-asset { display:flex; gap:10px; align-items:center; background:var(--nc-bg); border:1px solid var(--nc-border); border-radius:10px; padding:9px 12px; }
.scn-asset-main { flex:1; min-width:0; }
.scn-asset-name { font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scn-asset-meta { font-size:11.5px; color:var(--nc-muted); margin-top:2px; }
.scn-asset-badge { flex:none; font-size:11px; font-weight:800; border-radius:6px; padding:3px 9px; background:var(--nc-bg-2); color:var(--nc-gray); border:1px solid var(--nc-border); }
.scn-asset-badge.ok { background:var(--nc-mint); color:var(--nc-green-dark); border-color:transparent; }
.scn-asset-badge.load { background:#fff5e0; color:#b7791f; border-color:transparent; }
.scn-mi-reg { margin-top:12px; padding-top:12px; border-top:1px dashed var(--nc-border); }
.scn-mi-reg label { display:block; font-size:12px; font-weight:700; color:var(--nc-gray); margin-bottom:6px; }
.scn-mi-reg-row { display:flex; gap:8px; flex-wrap:wrap; }
.scn-mi-reg-row select { flex:1; min-width:220px; }
.scn-mi-reg small { display:block; margin-top:7px; font-size:11.5px; color:var(--nc-muted); }
.scn-mi-empty { font-size:12.5px; color:var(--nc-muted); padding:10px 2px; }
.scn-mi-out { margin-top:14px; }
.scn-mi-col-h { font-size:13px; font-weight:800; margin-bottom:8px; }
.scn-thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; margin-bottom:14px; }
.scn-thumb-item { position:relative; border-radius:8px; overflow:hidden; background:#000; aspect-ratio:16/9; }
.scn-thumb-item img { width:100%; height:100%; object-fit:cover; display:block; }
.scn-thumb-item span { position:absolute; left:4px; bottom:4px; font-size:10.5px; font-weight:700; color:#fff; background:rgba(0,0,0,.62); border-radius:4px; padding:1px 6px; }
.scn-mi-cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.scn-mi-col { min-width:0; }
.scn-transcript { max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; border:1px solid var(--nc-border); border-radius:10px; padding:10px; background:var(--nc-bg); }
.scn-tline { display:flex; gap:9px; font-size:12.5px; line-height:1.5; }
.scn-tline-t { flex:none; font-weight:800; font-size:11px; color:var(--nc-green-dark); }
.scn-kwchips { display:flex; gap:6px; flex-wrap:wrap; }
.scn-kwchips span { font-size:11.5px; font-weight:700; color:var(--nc-gray); background:var(--nc-bg-2); border:1px solid var(--nc-border); border-radius:6px; padding:3px 9px; }
.scn-hl { border:1px solid var(--nc-border); border-left:3px solid var(--nc-green); border-radius:8px; padding:9px 11px; margin-bottom:8px; background:var(--nc-bg); }
.scn-hl-t { font-size:11.5px; font-weight:800; color:var(--nc-green-dark); margin-bottom:4px; }
.scn-hl-d { font-size:12.5px; line-height:1.55; color:var(--nc-text); }
@media (max-width:720px){ .scn-mi-cols { grid-template-columns:1fr; } }
/* --------------------- 시나리오 ② VOD2LIVE 편성 채널 --------------------- */
.v2l-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:20px; align-items:start; }
.v2l-grid > * { min-width:0; }
.v2l-panel { border:1px solid var(--nc-border); border-radius:12px; padding:14px; background:var(--nc-bg); margin-bottom:16px; }
.v2l-panel-h { font-size:13.5px; font-weight:800; margin-bottom:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.v2l-meta { font-size:12px; font-weight:600; color:var(--nc-muted); }
.v2l-lib, .v2l-schedule { display:flex; flex-direction:column; gap:8px; }
.v2l-libitem, .v2l-schrow { display:flex; gap:10px; align-items:center; background:var(--nc-bg-2); border:1px solid var(--nc-border); border-radius:10px; padding:9px 11px; }
.v2l-libinfo, .v2l-schinfo { flex:1; min-width:0; }
.v2l-libname, .v2l-schname { font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v2l-libmeta, .v2l-schmeta { font-size:11.5px; color:var(--nc-muted); margin-top:2px; }
.v2l-schnum { flex:none; width:24px; height:24px; border-radius:6px; background:var(--nc-green); color:#fff; font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; }
.v2l-schbtns { display:flex; gap:3px; flex:none; }
.v2l-empty { font-size:12.5px; color:var(--nc-muted); padding:10px 2px; }
.v2l-controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px dashed var(--nc-border); }
.v2l-loop { font-size:12.5px; font-weight:700; color:var(--nc-gray); display:flex; align-items:center; gap:6px; margin-right:auto; }
/* 채널 플레이어 */
.v2l-channel { border:1px solid var(--nc-border); border-radius:12px; overflow:hidden; background:#0d0f12; margin-bottom:16px; }
.v2l-chan-bar { display:flex; align-items:center; gap:10px; padding:9px 12px; background:#15181d; color:#fff; }
.v2l-onair { font-size:11.5px; font-weight:800; letter-spacing:.5px; color:#9aa4ad; background:#232830; border-radius:6px; padding:3px 9px; }
.v2l-onair.live { color:#fff; background:#e23b3b; animation:v2lpulse 1.6s ease-in-out infinite; }
@keyframes v2lpulse { 0%,100%{opacity:1} 50%{opacity:.55} }
.v2l-chan-name { font-size:13px; font-weight:700; }
.v2l-clock { margin-left:auto; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; color:#cdd6df; }
.v2l-player-wrap { position:relative; aspect-ratio:16/9; background:#000; }
.v2l-video { width:100%; height:100%; object-fit:contain; background:#000; display:none; }
.v2l-poster { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#e7edf2; padding:20px; }
.v2l-poster-ic { font-size:40px; margin-bottom:8px; }
.v2l-poster b { font-size:15px; }
.v2l-poster p { font-size:12.5px; color:#9aa4ad; margin-top:6px; line-height:1.5; }
.v2l-nowbar { display:grid; grid-template-columns:1.6fr 1fr; gap:1px; background:var(--nc-border); }
.v2l-now, .v2l-next { background:#15181d; color:#fff; padding:10px 12px; }
.v2l-lab { display:block; font-size:10.5px; font-weight:800; letter-spacing:.4px; color:#8b95a0; margin-bottom:3px; }
.v2l-now b, .v2l-next b { font-size:13px; font-weight:700; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v2l-now small, .v2l-next small { font-size:11px; color:#9aa4ad; font-variant-numeric:tabular-nums; }
.v2l-prog { height:5px; background:#2a2f37; border-radius:3px; margin:6px 0 4px; overflow:hidden; }
.v2l-prog-fill { height:100%; width:0; background:var(--nc-green); transition:width .5s linear; }
/* 동시송출 */
.v2l-simul { border:1px solid var(--nc-border); border-radius:12px; padding:14px; background:var(--nc-bg); margin-bottom:16px; }
.v2l-simul-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.v2l-plat { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; border:1px solid var(--nc-border); border-left:3px solid var(--c); border-radius:8px; padding:6px 11px; }
.v2l-plat i { font-style:normal; }
.v2l-plat em { font-style:normal; font-size:11px; font-weight:700; color:var(--nc-muted); margin-left:2px; }
.v2l-plat em.on { color:var(--c); }
.v2l-simul small { font-size:11.5px; color:var(--nc-muted); }
/* EPG */
.v2l-epg { border:1px solid var(--nc-border); border-radius:12px; padding:14px; background:var(--nc-bg); }
.v2l-epg-list { display:flex; flex-direction:column; gap:2px; }
.v2l-epg-row { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:8px; font-size:12.5px; }
.v2l-epg-row.live { background:var(--nc-mint); }
.v2l-epg-t { flex:none; font-weight:800; font-variant-numeric:tabular-nums; color:var(--nc-green-dark); width:44px; }
.v2l-epg-n { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v2l-epg-badge { flex:none; font-size:10.5px; font-weight:800; color:#fff; background:#e23b3b; border-radius:5px; padding:2px 7px; }
@media (max-width:900px){ .v2l-grid { grid-template-columns:1fr; } }
/* --------------------- 시나리오 ③ AI 미디어 아카이브 검색 --------------------- */
.aia-panel { border:1px solid var(--nc-border); border-radius:12px; padding:14px; background:var(--nc-bg); }
.aia-panel-h { font-size:13.5px; font-weight:800; margin-bottom:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.aia-arc-meta { font-size:12px; color:var(--nc-muted); margin-bottom:8px; }
.aia-arc-meta b, .aia-res-meta b { color:var(--nc-green-dark); }
.aia-archive { display:flex; flex-direction:column; gap:7px; }
.aia-arc-row { display:flex; gap:10px; align-items:center; background:var(--nc-bg-2); border:1px solid var(--nc-border); border-radius:10px; padding:9px 12px; }
.aia-arc-info { flex:1; min-width:0; }
.aia-arc-name { font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aia-arc-sub { font-size:11.5px; color:var(--nc-muted); margin-top:2px; }
.aia-arc-st.ok { color:var(--nc-green-dark); font-weight:700; }
.aia-arc-st.load { color:#b7791f; font-weight:700; }
.aia-arc-badge { flex:none; font-size:11.5px; font-weight:800; border-radius:6px; padding:4px 10px; display:inline-flex; align-items:center; gap:6px; }
.aia-arc-badge.ok { background:var(--nc-mint); color:var(--nc-green-dark); }
.aia-arc-badge.load { background:#fff5e0; color:#b7791f; }
/* 검색 */
.aia-search { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.aia-search #aiaQuery { flex:1; min-width:240px; }
.aia-examples { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px; }
.aia-chip { font-size:12px; font-weight:700; color:var(--nc-gray); background:var(--nc-bg); border:1px solid var(--nc-border); border-radius:16px; padding:6px 13px; cursor:pointer; transition:all .15s; }
.aia-chip:hover { color:var(--nc-green-dark); border-color:var(--nc-green); background:var(--nc-mint); }
.aia-persons-wrap { margin:4px 0 16px; padding:12px 14px; border:1px dashed var(--nc-border); border-radius:12px; background:var(--nc-bg); }
.aia-persons-h { font-size:12.5px; font-weight:800; margin-bottom:10px; }
.aia-persons-h span { font-weight:600; color:var(--nc-muted); }
.aia-persons { display:flex; gap:8px; flex-wrap:wrap; }
.aia-person { display:flex; align-items:center; gap:8px; padding:5px 12px 5px 5px; border:1px solid var(--nc-border); border-radius:22px; background:var(--nc-bg-2); cursor:pointer; font-size:12.5px; font-weight:700; color:var(--nc-text); transition:all .15s; }
.aia-person:hover { border-color:var(--nc-green); background:var(--nc-mint); color:var(--nc-green-dark); }
.aia-person img { width:30px; height:30px; border-radius:50%; object-fit:cover; background:#0d0f12; }
.aia-person-ic { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--nc-border); font-size:15px; }
/* 장면 요약 (VLM) */
.aia-sum-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.aia-sum-bar label { font-size:12.5px; font-weight:700; color:var(--nc-gray); flex:none; }
.aia-sum-bar select { flex:1; min-width:220px; max-width:520px; }
.aia-sum-out { min-height:10px; }
.aia-scenes { display:flex; flex-direction:column; gap:12px; }
.aia-scene { display:flex; gap:14px; border:1px solid var(--nc-border); border-left:3px solid var(--nc-green); border-radius:12px; padding:12px; background:var(--nc-bg); }
.aia-scene-thumb { position:relative; flex:none; width:200px; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:#0d0f12; }
.aia-scene-thumb img { width:100%; height:100%; object-fit:cover; }
.aia-scene-thumb .aia-noimg { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:30px; }
.aia-scene-tc { position:absolute; left:6px; bottom:6px; font-size:10.5px; font-weight:800; color:#fff; background:rgba(0,0,0,.62); border-radius:5px; padding:2px 7px; font-variant-numeric:tabular-nums; }
.aia-scene-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.aia-scene-h { font-size:12.5px; font-weight:800; color:var(--nc-green-dark); }
.aia-scene-desc { font-size:13px; line-height:1.6; color:var(--nc-text); }
.aia-scene-btns { display:flex; gap:6px; margin-top:auto; }
@media (max-width:640px){ .aia-scene { flex-direction:column; } .aia-scene-thumb { width:100%; } }
.aia-res-meta { font-size:13px; font-weight:700; margin-bottom:12px; }
.aia-results { min-height:10px; }
.aia-res-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.aia-res-card { border:1px solid var(--nc-border); border-radius:12px; overflow:hidden; background:var(--nc-bg); display:flex; flex-direction:column; }
.aia-res-thumb { position:relative; aspect-ratio:16/9; background:#0d0f12; display:flex; align-items:center; justify-content:center; }
.aia-res-thumb img { width:100%; height:100%; object-fit:cover; }
.aia-noimg { font-size:34px; }
.aia-res-score { position:absolute; top:6px; right:6px; font-size:11.5px; font-weight:800; color:#fff; background:rgba(0,200,120,.92); border-radius:6px; padding:2px 8px; }
.aia-res-body { padding:11px 12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.aia-res-name { font-size:13px; font-weight:700; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.aia-res-tc { font-size:11.5px; font-weight:700; color:var(--nc-green-dark); font-variant-numeric:tabular-nums; }
.aia-res-tags { display:flex; gap:5px; flex-wrap:wrap; }
.aia-res-tags span { font-size:10.5px; font-weight:700; color:var(--nc-gray); background:var(--nc-bg-2); border-radius:5px; padding:2px 7px; }
.aia-res-ppl { font-size:11.5px; color:var(--nc-gray); }
.aia-res-script { font-size:11.5px; color:var(--nc-muted); font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aia-res-btns { display:flex; gap:6px; margin-top:auto; padding-top:4px; }
/* 큐레이션 */
.aia-cur-wrap { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:18px; align-items:start; }
.aia-player-box { border:1px solid var(--nc-border); border-radius:12px; overflow:hidden; background:#0d0f12; }
.aia-player-empty { aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; color:#9aa4ad; font-size:13px; text-align:center; padding:20px; }
.aia-video { width:100%; aspect-ratio:16/9; object-fit:contain; background:#000; display:block; }
.aia-player-cap { padding:9px 12px; font-size:12px; color:#cdd6df; background:#15181d; }
.aia-cur { border:1px solid var(--nc-border); border-radius:12px; padding:14px; background:var(--nc-bg); }
.aia-cur-list { display:flex; flex-direction:column; gap:7px; max-height:360px; overflow-y:auto; }
.aia-cur-row { display:flex; gap:8px; align-items:center; background:var(--nc-bg-2); border:1px solid var(--nc-border); border-radius:9px; padding:8px 10px; }
.aia-cur-info { flex:1; min-width:0; }
.aia-cur-name { font-size:12.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aia-cur-sub { font-size:11px; color:var(--nc-muted); margin-top:2px; }
.aia-cur-btns { display:flex; gap:4px; flex:none; }
@media (max-width:820px){ .aia-cur-wrap { grid-template-columns:1fr; } }
/* --------------------- VPE 라이브 데모 --------------------- */
.vpe-mode { margin-bottom:18px; }
.vpe-mode.ok { border-color:var(--nc-green); background:var(--nc-mint); }
.vpe-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; align-items:start; }
.vpe-grid > * { min-width:0; }
.vpe-stage { position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; }
.vpe-player { width:100%; height:100%; }
.vpe-player video { width:100%; height:100%; }
.vpe-wm { position:absolute; left:10%; top:10%; color:rgba(255,255,255,.55); font-size:13px; font-weight:800; letter-spacing:.5px; pointer-events:none; text-shadow:0 1px 3px rgba(0,0,0,.6); transition:left .8s ease, top .8s ease; z-index:3; }
.vpe-srcbar { display:flex; align-items:center; gap:10px; margin-top:12px; }
.vpe-srcbar label { font-size:12.5px; font-weight:700; color:var(--nc-gray); flex:none; }
.vpe-srcbar select { flex:1; }
.vpe-ctl-h { font-size:13.5px; font-weight:800; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.vpe-ctls { border:1px solid var(--nc-border); border-radius:12px; padding:14px; background:var(--nc-bg); display:flex; flex-direction:column; gap:10px; }
.vpe-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; font-weight:700; color:var(--nc-gray); }
.vpe-row select { max-width:120px; }
.vpe-color { width:44px; height:30px; border:1px solid var(--nc-border); border-radius:6px; background:none; padding:0; cursor:pointer; }
.vpe-checks { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:8px; border-top:1px dashed var(--nc-border); }
.vpe-checks label { font-size:12.5px; font-weight:700; color:var(--nc-gray); display:flex; align-items:center; gap:6px; }
.vpe-btns { display:flex; gap:8px; padding-top:8px; border-top:1px dashed var(--nc-border); }
.vpe-note { margin-top:10px; }
.vpe-embed { margin-top:20px; }
.vpe-code { background:#0d0f12; color:#cfe3d6; border-radius:12px; padding:16px; font-size:12px; line-height:1.55; overflow-x:auto; white-space:pre; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
@media (max-width:820px){ .vpe-grid { grid-template-columns:1fr; } }
/* --------------------- VOD Station 라이브 데모 --------------------- */
.vod-chan { border:1px solid var(--nc-border); border-radius:12px; padding:14px; background:var(--nc-bg); margin-bottom:18px; }
.vod-chan-h { font-size:13.5px; font-weight:800; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.vod-badge { font-size:11px; font-weight:800; border-radius:6px; padding:3px 9px; background:var(--nc-bg-2); color:var(--nc-gray); border:1px solid var(--nc-border); }
.vod-badge.ok { background:var(--nc-mint); color:var(--nc-green-dark); border-color:transparent; }
.vod-chan-kv { display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; }
.vod-chan-kv > div { display:flex; gap:10px; align-items:baseline; font-size:12.5px; min-width:0; }
.vod-chan-kv span { flex:none; width:110px; color:var(--nc-muted); font-weight:700; }
.vod-chan-kv code { font-size:11.5px; word-break:break-all; color:var(--nc-text); }
.vod-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; align-items:start; }
.vod-grid > * { min-width:0; }
.vod-stage { width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; }
.vod-video { width:100%; height:100%; object-fit:contain; background:#000; display:block; }
.vod-srcbar { display:flex; align-items:center; gap:10px; margin:12px 0; }
.vod-srcbar label { font-size:12.5px; font-weight:700; color:var(--nc-gray); flex:none; }
.vod-srcbar select { flex:1; }
.vod-urlrule { margin-top:12px; font-size:12px; color:var(--nc-muted); border:1px dashed var(--nc-border); border-radius:10px; padding:12px; }
.vod-urlrule code { font-size:11px; color:var(--nc-green-dark); word-break:break-all; }
.vod-urlrule p { margin:6px 0 0; line-height:1.5; }
@media (max-width:820px){ .vod-grid { grid-template-columns:1fr; } .vod-chan-kv { grid-template-columns:1fr; } }
.scn-yt { margin-top:16px; }
.scn-yt-head { font-size:14px; font-weight:800; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
/* VPE 실시간 자막 오버레이 + 상품 분석 */
.scn-caps { position:absolute; left:10px; right:10px; bottom:44px; display:flex; flex-direction:column; gap:5px; pointer-events:none; }
.scn-cap-line { align-self:center; max-width:96%; font-size:13.5px; font-weight:700; color:#fff; background:rgba(0,0,0,.62); padding:5px 12px; border-radius:8px; line-height:1.4; text-align:center; }
.scn-cap-line.ko { font-size:15px; }
.scn-cap-line.tr { font-size:12.5px; font-weight:600; color:#cfe0ee; background:rgba(3,199,90,.28); }
.scn-vpe-side { display:flex; flex-direction:column; gap:14px; }
.scn-cap-ctl, .scn-prod-ai { border:1px solid var(--nc-border); border-radius:14px; padding:14px 16px; }
.scn-cap-ctl-h { font-size:13.5px; font-weight:800; margin-bottom:8px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.scn-cap-ctl label { display:block; font-size:12px; font-weight:700; color:var(--nc-muted); margin:6px 0 4px; }
.scn-cap-ctl small { display:block; margin-top:8px; font-size:11.5px; color:var(--nc-muted); line-height:1.5; }
.scn-ocr-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.scn-ocr-tags span { font-size:11.5px; background:var(--nc-bg-2); border-radius:6px; padding:2px 8px; color:var(--nc-gray); }
.scn-llm { border:1px solid var(--nc-border); border-left:3px solid var(--nc-green); border-radius:10px; padding:10px 12px; background:var(--nc-bg); }
.scn-llm-h { font-size:12.5px; font-weight:800; margin-bottom:6px; }
.scn-llm-name { font-size:13.5px; font-weight:800; color:var(--nc-text); }
.scn-llm-cat { font-size:11px; font-weight:700; color:var(--nc-green-dark); background:var(--nc-mint); border-radius:5px; padding:1px 7px; margin-left:4px; }
.scn-llm-sum { font-size:12.5px; line-height:1.55; color:var(--nc-muted); margin:6px 0; }
.scn-llm-q { font-size:12px; color:var(--nc-gray); } .scn-llm-q b { color:var(--nc-green-dark); }
/* ---------------- 계정 / 헤더 로그인 상태 ---------------- */
.nc-auth { display:inline-flex; align-items:center; gap:12px; margin-left:8px; }
.nc-auth .nc-user { font-weight:700; color:var(--nc-green-dark); }
.nc-auth a { font-weight:600; }
.nc-admin-link { color:var(--nc-blue,#4f7dff)!important; font-weight:700!important; }
.acct-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:760px; }
.acct-card { border:1px solid var(--nc-border); border-radius:14px; padding:20px; background:var(--nc-bg); }
.acct-card h3 { margin:0 0 14px; font-size:16px; }
.acct-form { display:flex; flex-direction:column; gap:12px; }
.acct-form label { display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:700; color:var(--nc-gray); }
.acct-form .btn { margin-top:4px; }
.acct-msg { font-size:12.5px; min-height:16px; }
.acct-msg.ok { color:var(--nc-green-dark); font-weight:700; }
.acct-msg.err { color:#e23b3b; font-weight:700; }
.acct-msg.load { color:var(--nc-muted); }
@media (max-width:640px){ .acct-grid { grid-template-columns:1fr; } }
/* ---------------- 관리자 대시보드 ---------------- */
.adm-bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.adm-stat { font-size:13px; color:var(--nc-muted); } .adm-stat b { color:var(--nc-green-dark); font-size:15px; }
.adm-cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:20px; align-items:start; }
.adm-col { min-width:0; }
.adm-h { font-size:13.5px; font-weight:800; margin-bottom:10px; }
.adm-tablewrap { overflow-x:auto; border:1px solid var(--nc-border); border-radius:12px; max-height:70vh; overflow-y:auto; }
.adm-table { width:100%; margin:0; font-size:12.5px; }
.adm-table th { position:sticky; top:0; background:var(--nc-bg-2); z-index:1; }
.adm-table td, .adm-table th { white-space:nowrap; }
.adm-detail { white-space:normal; max-width:280px; color:var(--nc-muted); }
.adm-ts { font-variant-numeric:tabular-nums; color:var(--nc-gray); }
.adm-uid { font-size:11px; color:var(--nc-muted); }
.adm-ip { font-size:11.5px; color:var(--nc-muted); font-variant-numeric:tabular-nums; }
.adm-badge { font-size:11px; font-weight:800; border-radius:5px; padding:2px 8px; background:var(--nc-bg-2); color:var(--nc-gray); }
.adm-badge.admin { background:#e8efff; color:#3a5bd0; }
.adm-act { font-size:11px; font-weight:800; border-radius:5px; padding:2px 8px; background:var(--nc-bg-2); color:var(--nc-gray); }
.adm-act-login { background:var(--nc-mint); color:var(--nc-green-dark); }
.adm-act-signup { background:#e8efff; color:#3a5bd0; }
.adm-act-logout { background:#fff0f0; color:#c0392b; }
@media (max-width:820px){ .adm-cols { grid-template-columns:1fr; } }
@media (max-width:720px){ .scn-vpe{grid-template-columns:1fr;} .scn-platforms{grid-template-columns:1fr;} .scn-side{margin-left:0;margin-top:14px;display:block;} }