/* ============================================================
   SIONS CRM 홍보 사이트 — Shiftee 톤 디자인 시스템
   화이트 기반 + 연블루그레이 교차 섹션 + 네이비 히어로/CTA + 파란 포인트
   외부 의존 0 (시스템 폰트 스택). 라이트가 기본, 다크는 토글.
   ============================================================ */

/* ---------- 디자인 토큰 ---------- */
:root {
  /* 브랜드 */
  --navy: #0E1B45;
  --navy-2: #14265E;
  --navy-deep: #0A1533;
  --blue: #2C62F6;
  --blue-600: #2050E0;
  --blue-700: #1B44C4;
  --blue-050: #eef3ff;
  --blue-100: #dfe8ff;

  /* 서피스 */
  --bg: #ffffff;
  --bg-alt: #f7f9fc;
  --surface: #ffffff;
  --border: #e5eaf3;
  --border-strong: #d3dcec;

  /* 텍스트 */
  --text: #111827;
  --text-soft: #374151;
  --text-muted: #6b7280;
  --text-invert: #eaf0fb;

  --shadow-xs: 0 1px 2px rgba(16, 27, 66, .05);
  --shadow-sm: 0 2px 8px rgba(16, 27, 66, .06);
  --shadow-md: 0 10px 28px rgba(16, 27, 66, .10);
  --shadow-lg: 0 28px 64px rgba(10, 21, 51, .30);

  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 20px;
  --maxw: 1160px;
  --nav-h: 68px;

  --font: -apple-system, BlinkMacSystemFont, "Pretendard Variable", Pretendard,
          "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
}

/* 다크 모드 (토글 시) */
html[data-theme="dark"] {
  --bg: #0d1424;
  --bg-alt: #111a2e;
  --surface: #16213a;
  --border: #26314b;
  --border-strong: #33405f;
  --text: #e7ecf6;
  --text-soft: #c3ccdd;
  --text-muted: #9aa7c0;
  --blue-050: #17233f;
  --blue-100: #1c2b4d;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, .38);
  --shadow-lg: 0 28px 64px rgba(0, 0, 0, .55);
}

/* ---------- 리셋 ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .25s ease, color .25s ease;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 300;
  background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 15px; border: 1px solid transparent; border-radius: 10px;
  padding: 11px 20px; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 8px 15px; font-size: 14px; }
.btn-lg { padding: 15px 28px; font-size: 16px; }

/* 프라이머리: 파란 배경 흰 글자 (WCAG AA) */
/* 주 CTA는 시온랩 모노크롬 계승 — 딥 네이비 잉크(라이트) / 화이트 필(다크).
   범용 SaaS 블루와 차별화, 블루는 보조 액센트(링크·아이콘·그래프)로만 유지 */
.btn-primary { background: var(--navy); color: #fff; box-shadow: 0 6px 18px rgba(10, 21, 51, .25); }
.btn-primary:hover { background: var(--navy-2); box-shadow: 0 8px 22px rgba(10, 21, 51, .32); }
html[data-theme="dark"] .btn-primary { background: #fff; color: var(--navy); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .btn-primary:hover { background: #dce4f5; }

/* 화이트: 네이비 히어로 위 흰 배경 파란 글자 */
.btn-white { background: #fff; color: var(--blue-700); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.btn-white:hover { background: #f3f6ff; color: var(--blue-700); }

/* 아웃라인: 어두운 배경 위 흰 테두리 */
.btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

/* 고스트: 라이트 섹션 위 */
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--bg-alt); border-color: var(--blue); color: var(--blue-700); }

/* 소프트: 옅은 파란 배경 파란 글자 */
.btn-soft { background: var(--blue-050); color: var(--blue-700); }
.btn-soft:hover { background: var(--blue-100); }

/* ============================================================
   네비바 (라이트, 스크롤 시 그림자)
   ============================================================ */
.navbar {
  position: sticky; top: 0; z-index: 120; height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
html[data-theme="dark"] .navbar { background: rgba(13, 20, 36, .88); }
.navbar.scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }

/* 네이비 히어로 페이지(index) 전용 — 스크롤 톱에서는 투명, 스크롤/메뉴 오픈 시 흰색 복귀.
   흰 헤더 × 네이비 히어로의 어색한 경계 제거. 스코프 클래스라 타 페이지 무영향.
   sticky 헤더가 플로우에서 차지하는 68px만큼 히어로를 뒤로 끌어올려 투명 배경에 네이비가 비치게 한다. */
.navbar.navbar-hero { margin-bottom: calc(-1 * var(--nav-h)); }
.navbar-hero + main .hero { padding-top: calc(68px + var(--nav-h)); }
.navbar.navbar-hero:not(.scrolled):not(.menu-open) {
  background: transparent;
  backdrop-filter: none;
}
/* 라이트 히어로 위 투명 헤더는 기본 색 그대로 — 흰색 반전은 다크 모드(네이비 히어로)에서만 */
html[data-theme="dark"] .navbar.navbar-hero:not(.scrolled):not(.menu-open) .brand { color: #fff; }
html[data-theme="dark"] .navbar.navbar-hero:not(.scrolled):not(.menu-open) .nav-link { color: #d7e1f5; }
html[data-theme="dark"] .navbar.navbar-hero:not(.scrolled):not(.menu-open) .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .navbar.navbar-hero:not(.scrolled):not(.menu-open) .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
html[data-theme="dark"] .navbar.navbar-hero:not(.scrolled):not(.menu-open) .btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
html[data-theme="dark"] .navbar.navbar-hero:not(.scrolled):not(.menu-open) .theme-toggle,
html[data-theme="dark"] .navbar.navbar-hero:not(.scrolled):not(.menu-open) .hamburger {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .24); color: #fff;
}

.nav-inner {
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 8px;
}
.brand {
  font-weight: 800; font-size: 21px; letter-spacing: .02em; color: var(--navy);
  display: inline-flex; align-items: center; gap: 8px;
}
html[data-theme="dark"] .brand { color: #fff; }
.brand-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); display: inline-block; }

.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 22px; flex: 1; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 15px; font-weight: 600; color: var(--text-soft);
  padding: 8px 12px; border-radius: 9px; background: transparent; border: 0; cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
  font-family: inherit;
}
.nav-link:hover { color: var(--blue-700); background: var(--bg-alt); }

.nav-actions { display: flex; align-items: center; gap: 10px; }

/* ---------- GNB 드롭다운 (메가메뉴) ---------- */
.nav-dropdown { position: relative; }
.nav-caret { transition: transform .18s ease; }
.nav-dropdown-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-dropdown-toggle[aria-expanded="true"] { color: var(--blue-700); background: var(--bg-alt); }

.mega {
  position: absolute; top: calc(100% + 10px); left: 0;
  width: 620px; max-width: calc(100vw - 48px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.nav-dropdown:hover .mega,
.nav-dropdown-toggle[aria-expanded="true"] + .mega {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.mega-item {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px;
  transition: background-color .14s ease;
}
.mega-item:hover { background: var(--bg-alt); }
.mega-ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-050); color: var(--blue);
}
.mega-tt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mega-tt strong { font-size: 14.5px; font-weight: 700; color: var(--text); }
.mega-tt span { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }

/* ---------- 테마 토글 ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-soft);
  transition: background-color .15s ease, color .15s ease;
}
.theme-toggle:hover { background: var(--blue-050); color: var(--blue); }
.theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* ---------- 햄버거 ---------- */
.hamburger {
  display: none; flex-direction: column; gap: 5px; width: 42px; height: 40px;
  align-items: center; justify-content: center; background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer; color: var(--text);
}
.hamburger span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 모바일 메뉴 (아코디언) ----------
   불투명 풀스크린 패널 — 짧은 패널 아래로 히어로 콘텐츠가 노출되던 문제 해결.
   navbar에 backdrop-filter가 있어 fixed의 기준이 navbar가 되므로 absolute+높이 계산 사용. */
.mobile-menu {
  position: absolute; top: var(--nav-h); left: 0; right: 0;
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  background: var(--bg);
  padding: 18px 24px calc(30px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu > a:not(.btn) { padding: 13px 4px; font-size: 16px; font-weight: 600; color: var(--text-soft); border-radius: 8px; }
.mobile-menu > a:not(.btn):hover { color: var(--blue-700); }
.mobile-menu .btn { justify-content: center; margin-top: 8px; padding: 13px 20px; font-size: 15.5px; }

/* 모바일 서비스 아코디언 */
.m-acc-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 13px 4px; font-size: 16px; font-weight: 600; color: var(--text-soft);
  background: transparent; border: 0; cursor: pointer; font-family: inherit;
}
.m-acc-toggle .nav-caret { transition: transform .18s ease; }
.m-acc-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.m-acc-panel { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 8px 8px; }
.m-acc-panel[hidden] { display: none; }
.m-acc-panel a {
  display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 9px;
  font-size: 14px; color: var(--text-soft);
}
.m-acc-panel a:hover { background: var(--bg-alt); color: var(--blue-700); }
.m-acc-panel .mega-ic { width: 30px; height: 30px; border-radius: 8px; }
.m-acc-panel .mega-ic svg { width: 16px; height: 16px; }

/* ============================================================
   히어로 (네이비 그라데이션)
   ============================================================ */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 640px at 50% -12%, rgba(44, 98, 246, .13), transparent 62%),
    radial-gradient(900px 500px at 88% 8%, rgba(44, 98, 246, .07), transparent 60%),
    linear-gradient(180deg, #f2f6ff 0%, var(--bg) 100%);
  color: var(--text);
  padding: 68px 0 96px;
  text-align: center;
  overflow: hidden;
}
.hero-inner { max-width: 900px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--blue-700); background: var(--blue-050); border: 1px solid rgba(44, 98, 246, .25);
  padding: 6px 15px; border-radius: 999px; margin-bottom: 24px;
}
.hero h1 { font-size: clamp(34px, 5.4vw, 56px); font-weight: 800; color: var(--text); }

/* 히어로 h1 타이핑 캐럿 — JS(anim-ready)에서만 생성되는 요소 */
.hero-caret {
  display: inline-block; width: 3px; height: .86em; margin-left: 8px;
  border-radius: 2px; background: var(--blue); vertical-align: -.06em;
  animation: caret-blink 1.1s steps(2, start) infinite;
}
.hero-caret.done { display: none; }
@keyframes caret-blink { 50% { opacity: 0; } }

.hero-sub { margin-top: 20px; font-size: clamp(16px, 2.3vw, 21px); color: var(--text-muted); }
.hero-cta { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* 히어로 체크 불릿 — CTA 아래 신뢰 포인트 4개 (schift 패턴, 실제 제공 기능만) */
.hero-points {
  margin: 26px auto 0; max-width: 760px;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px;
}
.hero-points li {
  position: relative; padding-left: 26px; text-align: left;
  font-size: 14px; font-weight: 600; color: var(--text-soft); line-height: 1.5;
}
.hero-points li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px;
  background: rgba(44, 98, 246, .16); border-radius: 5px;
}
.hero-points li::after {
  content: ""; position: absolute; left: 5px; top: 7px; width: 7px; height: 4px;
  border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}

/* 다크 모드에선 히어로가 기존 네이비 무드로 복귀 */
html[data-theme="dark"] .hero {
  background:
    radial-gradient(1200px 640px at 50% -12%, rgba(44, 98, 246, .35), transparent 62%),
    radial-gradient(900px 500px at 88% 8%, rgba(44, 98, 246, .18), transparent 60%),
    linear-gradient(165deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-2) 100%);
  color: var(--text-invert);
}
html[data-theme="dark"] .hero-eyebrow { color: #a9c4ff; background: rgba(44, 98, 246, .16); border-color: rgba(120, 160, 255, .32); }
html[data-theme="dark"] .hero h1 { color: #fff; }
html[data-theme="dark"] .hero-sub { color: #b7c6e6; }
html[data-theme="dark"] .hero-points li { color: #b7c6e6; }
html[data-theme="dark"] .hero-points li::before { background: rgba(44, 98, 246, .3); }
html[data-theme="dark"] .hero-points li::after { border-color: #a9c4ff; }

.browser-frame {
  position: relative; /* 라이브 알림 토스트(absolute)의 기준점 */
  margin: 62px auto 0; max-width: 1080px; width: 92%;
  border-radius: 16px; overflow: hidden; background: #0d1526;
  border: 1px solid rgba(10, 21, 51, .18); box-shadow: var(--shadow-lg);
  transform: perspective(1900px) rotateX(2.5deg);
}
html[data-theme="dark"] .browser-frame { border-color: rgba(255, 255, 255, .12); }
.browser-bar {
  display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px;
  background: #131c30; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-r { background: #FF5F57; } .dot-y { background: #FEBC2E; } .dot-g { background: #28C840; }
.browser-url {
  margin-left: 14px; font-size: 12.5px; color: #7C8AA8; background: #0d1526;
  padding: 4px 14px; border-radius: 6px; flex: 1; max-width: 360px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-shot { width: 100%; display: block; }
.browser-video {
  aspect-ratio: 16 / 9;
  height: auto;
  background: var(--navy-deep);
  object-fit: cover;
}

/* ============================================================
   섹션 공통 + Shiftee식 헤드 (eyebrow + 큰 타이틀 + 서브)
   ============================================================ */
.section { padding: 92px 0; background: var(--bg); transition: background-color .25s ease; }
.section.gray { background: var(--bg-alt); }
/* 섹션 경계 구분선 — 흰색↔연회색 교차만으론 경계가 흐릿하다 */
.section + .section { border-top: 1px solid var(--border); }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 52px; }
.section-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 14px;
}
.section-head h1,
.section-head h2 {
  font-size: clamp(26px, 3.5vw, 34px); font-weight: 800; color: var(--text);
  text-wrap: balance;         /* 제목 두 줄일 때 좌우 균형 */
}
.section-head p {
  margin-top: 16px; font-size: 17px; color: var(--text-muted);
  line-height: 1.72;          /* 한국어 가독성: 본문보다 여유 */
  text-wrap: pretty;          /* 마지막 줄 고아 단어 방지 (미지원 브라우저는 무시) */
}

/* 문장 단위 줄바꿈 — 넓은 화면에서만 적용.
   좁은 화면에선 자연 줄바꿈이 더 읽기 좋아 해제한다.
   ⚠️ display:none으로 숨기면 앞뒤 문장이 공백 없이 붙는다("대신합니다.청구").
   줄바꿈만 없애고 공백은 남기려면 콘텐츠를 공백으로 치환해야 한다. */
.br-sent {
  display: inline;
  font-size: 0;          /* br 자체 높이 제거 */
}
.br-sent::after {
  content: " ";
  font-size: 1rem;       /* 부모 크기로 복원해 정상 공백 확보 */
}
@media (min-width: 768px) {
  .br-sent { display: inline; font-size: inherit; }
  .br-sent::after { content: none; }
  /* br 뒤 문장 사이 숨쉴 틈 */
  .section-head p .br-sent + * { margin-top: 2px; }
}

/* 좌측 정렬 헤드 (스포트라이트 내부용) */
.head-left { text-align: left; margin-left: 0; margin-right: 0; }

/* ============================================================
   산업 그리드 ("이런 팀에 맞습니다")
   ============================================================ */
.industry-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.industry-item {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: 26px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-xs);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.industry-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-100); }
.industry-ic {
  width: 52px; height: 52px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-050); color: var(--blue);
}
.industry-item span { font-size: 14.5px; font-weight: 600; color: var(--text-soft); }

/* ============================================================
   Why 4카드
   ============================================================ */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.why-card {
  display: flex; flex-direction: column; gap: 14px; padding: 30px 26px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-xs); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.why-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--blue-100); }
.why-ic {
  width: 50px; height: 50px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-050); color: var(--blue);
}
.why-card h3 { font-size: 18px; font-weight: 700; color: var(--text); }
.why-card p { font-size: 14.5px; color: var(--text-muted); }

/* ============================================================
   기능 8카드 그리드
   ============================================================ */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feature-card {
  display: flex; flex-direction: column; gap: 12px; padding: 28px 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-xs); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--blue); }
.feature-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 12px; background: var(--blue-050); color: var(--blue);
}
.feature-card h3 { font-size: 17px; font-weight: 700; color: var(--text); }
.feature-card p { color: var(--text-muted); font-size: 14px; flex: 1; }
.feature-link { font-size: 14px; font-weight: 600; color: var(--blue-700); margin-top: 2px; }
html[data-theme="dark"] .feature-link { color: #7ea3ff; }

/* ============================================================
   스포트라이트 (지그재그 좌우 교차)
   ============================================================ */
.spotlight-inner {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 60px; align-items: center;
}
.spotlight-inner.reverse .spotlight-media { order: 2; }
.spotlight-inner.reverse .spotlight-text { order: 1; }
.spotlight-media img {
  width: 100%; border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.spotlight-media picture { display: block; }
/* 스크린샷 탭/클릭 → 라이트박스 확대 (app.js 위임 바인딩) */
.spotlight-media img { cursor: zoom-in; }
.spotlight-media { position: relative; }
@media (max-width: 860px) {
  /* 확대 힌트 칩 — 아주 작게, 누르면(클릭이 아래 img로 통과) 라이트박스 확대 */
  .spotlight-media:has(img)::after {
    content: "＋ 크게 보기";
    position: absolute; right: 8px; bottom: 8px;
    font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, .92);
    background: rgba(10, 21, 51, .5); padding: 2px 7px; border-radius: 999px;
    pointer-events: none;
  }
}
@media (max-width: 700px) {
  /* 모바일 캡처(<picture> 스왑): 크롭 없이 전체 표시 — 중간이 잘리면 깨져 보인다(사용자 지적).
     대신 폭을 살짝 줄여 세로 길이를 억제 */
  .spotlight-media picture img {
    width: min(320px, 100%); margin: 0 auto; display: block;
  }
}
.spot-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 12px;
}
.spotlight-text h2 { font-size: clamp(22px, 2.9vw, 28px); font-weight: 800; color: var(--text); }
.spotlight-text > p { margin-top: 15px; font-size: 18px; color: var(--text-muted); }
.spotlight-list { margin-top: 24px; display: flex; flex-direction: column; gap: 13px; }
.spotlight-list li { position: relative; padding-left: 30px; font-size: 15.5px; color: var(--text-soft); }
.spotlight-list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px;
  background: var(--blue-050); border-radius: 6px;
}
.spotlight-list li::after {
  content: ""; position: absolute; left: 6px; top: 8px; width: 8px; height: 5px;
  border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}
.spot-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 26px;
  font-size: 15px; font-weight: 600; color: var(--blue-700);
}
html[data-theme="dark"] .spot-more { color: #7ea3ff; }
.spot-more:hover { gap: 10px; }

/* ============================================================
   채팅 목업 (Slack 대화 카드)
   ============================================================ */
.chat {
  width: 100%; max-width: 480px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden;
}
.chat-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--navy); color: #fff;
}
.chat-avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue); color: #fff; font-weight: 800; font-size: 16px; letter-spacing: .02em;
}
.chat-head-meta { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.chat-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-sub { font-size: 12px; color: #9cb0d4; }
.chat-tag {
  margin-left: auto; flex: 0 0 auto; font-size: 11px; font-weight: 600; color: #cbd8f0;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
  padding: 3px 9px; border-radius: 999px;
}
.chat-body {
  display: flex; flex-direction: column; gap: 14px; padding: 20px 16px;
  background: var(--bg);
}
html[data-theme="dark"] .chat-body { background: #101828; }
.chat-divider { text-align: center; margin: 2px 0; }
.chat-divider span {
  font-size: 12px; color: var(--text-muted); background: var(--bg-alt);
  padding: 3px 12px; border-radius: 999px;
}
.msg { display: flex; gap: 9px; align-items: flex-end; max-width: 100%; }
.msg-in { justify-content: flex-start; }
.msg-out { justify-content: flex-end; }
.msg-ava {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; font-weight: 700; font-size: 12px;
}
html[data-theme="dark"] .msg-ava { background: var(--blue); }
.msg-col { display: flex; flex-direction: column; gap: 4px; max-width: 78%; }
.msg-col-out { align-items: flex-end; }
.msg-out > .bubble { max-width: 78%; }
.bubble {
  font-size: 14.5px; line-height: 1.55; padding: 10px 14px; border-radius: 14px;
  word-break: break-word;
}
.msg-out .bubble { background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.msg-in .bubble { background: #f1f5f9; color: var(--text); border-bottom-left-radius: 4px; }
html[data-theme="dark"] .msg-in .bubble { background: #1e293b; color: var(--text); }
.bubble-brief strong { display: block; margin-bottom: 6px; }
.bubble-list { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.bubble-list span { display: block; font-size: 13.5px; }
.bubble-list em { font-style: normal; opacity: .72; }
.msg-time { font-size: 12px; color: var(--text-muted); padding: 0 4px; }
.file-card {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-xs); max-width: 100%;
}
.file-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-050); color: var(--blue);
}
.file-meta { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.file-name { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-note { font-size: 12px; color: var(--text-muted); }
.conv-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  align-items: start; justify-items: center;
}
.conv-grid .chat { max-width: 460px; }

/* ============================================================
   연동 섹션 — 허브-스포크 마인드맵 (순수 CSS + 인라인 SVG)
   실제 연동군(실선·채움) / 연동 가능군(점선·흐림) 2계층. 인라인 style 0.
   CSS 노드 top/left %와 SVG viewBox %를 동일 0~100 정사각 좌표계로 공유
   → aspect-ratio:1/1 + preserveAspectRatio=none 으로 선-노드 자동 정렬.
   ============================================================ */
.mindmap {
  position: relative; width: min(760px, 100%); margin: 8px auto 0;
  aspect-ratio: 1 / 1;
}
/* SVG 연결선 레이어 — 노드 뒤 */
.mm-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
.mm-line { stroke-width: 1.3; vector-effect: non-scaling-stroke; fill: none; }
.mm-line--live { stroke: var(--blue); }
.mm-line--soon { stroke: var(--border-strong); }

/* 중앙 허브 */
.mm-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 120px; height: 120px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: var(--navy); border: 2px solid var(--blue); box-shadow: var(--shadow-md);
}
.mm-hub-ic { color: #fff; display: inline-flex; }
.mm-hub-label { font-size: 16px; font-weight: 800; letter-spacing: .3px; color: #fff; }
.mm-hub-sub { font-size: 10.5px; color: #b7c6e6; }

/* 노드 공통 */
.mm-node {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  width: 132px; padding: 12px 10px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  border-radius: var(--radius-sm); background: var(--surface);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}
.mm-ic {
  width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-050); color: var(--blue);
}
.mm-label { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.25; }
.mm-sub { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
.mm-tag {
  font-size: 10px; font-weight: 700; color: var(--text-soft);
  padding: 1px 8px; border-radius: 999px; background: var(--bg-alt);
  border: 1px solid var(--border-strong);
}
/* 실제군 = 채움 + 그림자 */
.mm-node--live { border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.mm-node--live:hover { transform: translate(-50%, -50%) scale(1.05); box-shadow: var(--shadow-md); border-color: var(--blue-100); }
/* 연동 가능군 = 점선 테두리 + 톤다운 (정직성: 아직 미연동 — opacity 대신 색/테두리로 구분해 대비 확보) */
.mm-node--soon { border: 1.5px dashed var(--border-strong); box-shadow: none; background: var(--bg-alt); }
.mm-node--soon .mm-ic { background: transparent; color: var(--text-muted); border: 1px dashed var(--border-strong); }
.mm-node--soon .mm-label { color: var(--text-soft); }
.mm-node--soon:hover { border-color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .mm-node { transition: none; } }

/* 스포크 좌표 (R=38, 중심 50,50 — 상단 반원=실제, 하단 반원=가능, 좌우 대칭) */
.spoke-1 { top: 37.0%; left: 14.3%; }  /* Slack */
.spoke-2 { top: 17.1%; left: 31.0%; }  /* 볼타 */
.spoke-3 { top: 17.1%; left: 69.0%; }  /* K-Startup */
.spoke-4 { top: 37.0%; left: 85.7%; }  /* 나라장터 */
.spoke-5 { top: 74.4%; left: 79.1%; }  /* 카카오 알림톡 */
.spoke-6 { top: 86.7%; left: 59.8%; }  /* DART */
.spoke-7 { top: 86.7%; left: 40.2%; }  /* 오픈뱅킹 */
.spoke-8 { top: 74.4%; left: 20.9%; }  /* 국세청 사업자검증 */

/* 범례 */
.mm-legend {
  display: flex; justify-content: center; gap: 22px; flex-wrap: wrap;
  margin-top: 20px; font-size: 12.5px; color: var(--text-muted);
}
.mm-legend .lg-item { display: inline-flex; align-items: center; gap: 7px; }
.mm-legend .lg-line { width: 22px; height: 0; border-top: 2px solid var(--blue); }
.mm-legend .lg-line.dash { border-top: 2px dashed var(--border-strong); }

/* 연동 미리보기 (기존 목업 3종 재배치) */
.integration-proofs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px;
}
/* 회색 섹션 배경과 같은 --bg-alt라 카드가 묻힌다 → 흰 카드 + 헤더 밴드로 분리 */
.integration-proofs .card-mock {
  margin-top: 0; background: var(--surface); box-shadow: var(--shadow-xs);
}
.integration-proofs .card-mock .cm-head { background: var(--bg-alt); }

/* 마인드맵 반응형 — 820 노드 축소 → 700 세로 폴백 */
@media (max-width: 820px) {
  .mindmap { width: min(600px, 100%); }
  .mm-node { width: 112px; padding: 10px 8px; }
  .mm-label { font-size: 12.5px; }
  .mm-sub, .mm-tag { font-size: 10px; }
  .mm-hub { width: 104px; height: 104px; }
}
@media (max-width: 700px) {
  /* 모바일도 데스크톱과 같은 방사형 그래프 유지 — 선·노드가 같은 % 좌표계를
     공유하므로 좌표는 그대로 두고 노드만 소형화(라벨만 남기고 서브·태그 숨김).
     66px 폭이면 최근접 이웃(spoke-6↔7, 중심 간 19.6%)과도 겹치지 않는다 */
  .mindmap { width: min(480px, 100%); }
  .mm-node { width: 66px; padding: 7px 3px; gap: 3px; border-radius: 10px; }
  .mm-ic { width: 24px; height: 24px; border-radius: 7px; }
  .mm-ic svg { width: 13px; height: 13px; }
  .mm-label { font-size: 10px; line-height: 1.25; word-break: keep-all; }
  .mm-sub, .mm-tag { display: none; }
  .mm-hub { width: 74px; height: 74px; gap: 2px; }
  .mm-hub-ic svg { width: 17px; height: 17px; }
  .mm-hub-label { font-size: 11.5px; }
  .mm-hub-sub { display: none; }
  .integration-proofs { grid-template-columns: 1fr; margin-top: 32px; }
}

/* ============================================================
   멀티플랫폼 2카드
   ============================================================ */
.platform-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.platform-card {
  display: flex; flex-direction: column; gap: 18px; padding: 34px 30px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.platform-card h3 { font-size: 20px; font-weight: 700; color: var(--text); }
.platform-card p { font-size: 15px; color: var(--text-muted); }
.platform-media { display: flex; align-items: center; justify-content: center; min-height: 220px; }
.platform-media img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }

/* ============================================================
   통계 3개
   ============================================================ */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.stat-item { padding: 20px; }
.stat-num { font-size: clamp(38px, 6vw, 56px); font-weight: 800; color: var(--blue); letter-spacing: -0.03em; line-height: 1.1; }
.stat-label { margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--text-soft); }
.stat-sub { margin-top: 4px; font-size: 13.5px; color: var(--text-muted); }

/* ============================================================
   상황 3카드
   ============================================================ */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.case-card {
  display: flex; flex-direction: column; gap: 12px; padding: 30px 28px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.case-tag {
  display: inline-flex; width: fit-content; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--blue-700); background: var(--blue-050); padding: 5px 12px; border-radius: 999px;
}
html[data-theme="dark"] .case-tag { color: #7ea3ff; }
.case-card h3 { font-size: 18px; font-weight: 700; color: var(--text); }
.case-card p { font-size: 14.5px; color: var(--text-muted); }

/* ============================================================
   갤러리
   ============================================================ */
/* 12칸 그리드: 1행 3개(각 4칸)·2행 4개(각 3칸)로 두 줄 모두 꽉 채움 (7개 → 3+4 균형) */
.gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.gallery-item { grid-column: span 4; }              /* 기본: 첫 줄 3개 = 각 4칸 */
.gallery-item:nth-child(n + 4) { grid-column: span 3; } /* 4번째부터 = 각 3칸 (둘째 줄 4개) */
.gallery-item {
  padding: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  cursor: zoom-in; background: var(--surface); box-shadow: var(--shadow-xs);
  transition: transform .16s ease, box-shadow .16s ease; display: block;
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gallery-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.gallery-mobile { display: flex; align-items: center; justify-content: center; padding: 8px; background: var(--bg-alt); }
/* 세로형(390/844) 모바일 샷이 2행 높이를 끌어올려 가로 카드 3개에 250px 흰 여백이 생기던 문제.
   프레임 폭을 줄여 프레임 높이를 가로 카드(16/10)와 맞춘다. 2행 413px → 198px. */
.phone-frame {
  display: block; width: 92px; border: 5px solid var(--navy); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow-md); background: var(--navy);
}
.phone-frame img { width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }
.gallery-dots { display: none; justify-content: center; gap: 8px; margin-top: 18px; }
.gallery-dots button {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--border-strong); transition: background-color .2s ease, transform .2s ease;
}
.gallery-dots button.active { background: var(--blue); transform: scale(1.25); }

/* ============================================================
   보안 뱃지 4개
   ============================================================ */
.security-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.security-card {
  display: flex; flex-direction: column; gap: 12px; padding: 28px 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.security-ic {
  width: 46px; height: 46px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-050); color: var(--blue);
}
.security-card h3 { font-size: 16px; font-weight: 700; color: var(--text); }
.security-card p { font-size: 13.5px; color: var(--text-muted); }

/* 아이콘 박스 안 3D 이미지 (svg 대체) — 박스 대비 자동 여백, 정사각 비율 유지 */
.industry-ic img, .why-ic img, .feature-icon img, .security-ic img {
  width: 68%; height: 68%; object-fit: contain; display: block;
}

/* ============================================================
   도입 3스텝
   ============================================================ */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step-card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 34px 30px; box-shadow: var(--shadow-xs);
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 13px; background: var(--navy); color: #fff; font-weight: 800; font-size: 19px;
  margin-bottom: 18px;
}
html[data-theme="dark"] .step-num { background: var(--blue); }
.step-card h3 { font-size: 19px; font-weight: 700; color: var(--text); }
.step-card p { margin-top: 10px; color: var(--text-muted); font-size: 15px; }

/* ============================================================
   최종 CTA (네이비)
   ============================================================ */
.cta-banner {
  background:
    radial-gradient(900px 440px at 50% 130%, rgba(44, 98, 246, .34), transparent 62%),
    linear-gradient(160deg, var(--navy-2), var(--navy) 60%, var(--navy-deep));
  color: var(--text-invert); padding: 92px 0; text-align: center;
}
.cta-inner { max-width: 740px; }
.cta-banner h2 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; color: #fff; }
.cta-banner p { margin-top: 12px; font-size: 15px; color: #b7c6e6; }
.cta-buttons { margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-banner .cta-note { margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, .62); }

/* ============================================================
   메가 푸터 (4컬럼)
   ============================================================ */
.footer { background: #070c16; color: #aebad1; padding: 48px 0 30px; }
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1.3fr 1fr 1fr; gap: 32px;
  padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.footer-brand .brand { color: #fff; font-size: 18px; }
.footer-brand p { margin-top: 8px; font-size: 12.5px; color: #7e8aa4; max-width: 300px; }
.footer-col h3 { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8794b0; margin-bottom: 10px; }
.footer-col ul { display: flex; flex-direction: column; gap: 7px; }
/* 제품 링크 8개는 2열로 접어 회사·문의 컬럼과 높이 균형 */
.footer-col:nth-child(2) ul { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; }
.footer-col a { font-size: 12.5px; color: #aebad1; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 18px;
}
.footer-bottom .copyright { font-size: 12px; color: #94a0b8; }
.footer-bottom .footer-mini { display: flex; gap: 18px; }
.footer-bottom .footer-mini a { font-size: 12px; color: #94a0b8; }
.footer-bottom .footer-mini a:hover { color: #fff; }

/* ============================================================
   라이트박스
   ============================================================ */
.lightbox {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  background: rgba(6, 10, 18, .9); padding: 32px; backdrop-filter: blur(4px);
}
.lightbox[hidden] { display: none; }
.lightbox-figure { margin: 0; max-width: 1100px; width: 100%; text-align: center; }
.lightbox-figure img {
  width: 100%; max-height: 82vh; object-fit: contain; border-radius: 12px;
  box-shadow: var(--shadow-lg); background: #0d1526;
}
.lightbox-figure figcaption { margin-top: 14px; color: #dce4f2; font-size: 15px; font-weight: 500; }
.lightbox-close {
  position: absolute; top: 20px; right: 26px; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .2); }

/* 모바일 라이트박스 — 원본을 뷰포트 폭으로 재축소하지 않고 크게 렌더 + 좌우 팬 */
@media (max-width: 700px) {
  .lightbox { padding: 14px; }
  .lightbox-figure { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lightbox-figure img { min-width: 860px; width: auto; max-height: 72vh; }
  .lightbox-figure figcaption { font-size: 13px; }
}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 1000px) {
  .why-grid, .feature-grid, .security-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col:nth-child(2) { grid-column: 1 / -1; }  /* 제품(2열 목록) 풀폭 → 회사·문의가 나란히 */
}

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  /* 2열에서는 12칸 span 리셋 (모든 아이템 1칸씩) */
  .gallery-item, .gallery-item:nth-child(n + 4) { grid-column: auto; }
  .conv-grid, .platform-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .spotlight-inner { grid-template-columns: 1fr; gap: 32px; }
  .spotlight-inner.reverse .spotlight-media,
  .spotlight-inner.reverse .spotlight-text { order: 0; }
}

/* 데스크탑(>860px): 모바일 전용 요소 강제 숨김 */
@media (min-width: 861px) {
  .mobile-menu, .hamburger { display: none !important; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; }   /* nav-links(flex:1 스페이서)가 사라져도 햄버거를 우측에 고정 */
  .nav-actions .btn { display: none; }
  .hamburger { display: flex; }
  .mobile-menu:not([hidden]) { display: flex; }

  .section { padding: 46px 0; }
  .section-head { margin-bottom: 34px; }
  .case-grid { grid-template-columns: 1fr; }
  /* Why 4카드: 1열 스택은 길다 → 2×2 컴팩트 */
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .why-card { padding: 16px 12px; gap: 8px; }
  .why-ic { width: 36px; height: 36px; border-radius: 10px; }
  .case-card { padding: 22px 20px; }

  /* 기능 8카드·보안 4카드: 아이콘+제목 타일 4열 — 설명은 숨김(기능은 상세 페이지가 담당) */
  .feature-grid, .security-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .feature-card, .security-card { padding: 14px 4px; gap: 7px; align-items: center; text-align: center; }
  .feature-icon, .security-ic { width: 38px; height: 38px; border-radius: 11px; }
  .feature-card h3, .security-card h3 { font-size: 12px; line-height: 1.3; letter-spacing: -.02em; }
  .feature-card p, .security-card p { display: none; }
  .feature-link { display: none; }

  /* 스탯 3개: 대형 세로 스택 → 한 줄 요약 */
  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat-item { padding: 8px 4px; }
  .stat-num { font-size: clamp(20px, 7vw, 28px); }
  .stat-label { margin-top: 5px; font-size: 12px; }
  .stat-sub { font-size: 10.5px; }

  /* 3단계: 세로 스택 대신 3×1 타일(번호+제목, 설명은 데스크톱만) */
  .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .step-card { padding: 14px 6px; text-align: center; }
  .step-card .step-num { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; margin: 0 auto 10px; }
  .step-card p { display: none; }
  .platform-card { padding: 24px 20px; }
  .spotlight-inner { gap: 24px; }

  .hero { padding: 44px 0 68px; }
  .navbar-hero + main .hero { padding-top: calc(44px + var(--nav-h)); }
  .browser-frame { width: 100%; transform: none; }

  /* 모바일 타이포 스케일 다운 — 한국 SaaS 랜딩 모바일 관행(제목 22~26px, 본문 14~15px)에 정렬 */
  .hero h1 { font-size: 25px; letter-spacing: -.02em; }
  .hero-sub { margin-top: 11px; font-size: 13.5px; }
  .hero-eyebrow, .section-eyebrow, .spot-eyebrow { font-size: 11px; }
  .hero-cta { margin-top: 22px; }
  .btn-lg { padding: 12px 22px; font-size: 14.5px; }
  .hero-points { gap: 9px 20px; display: grid; grid-template-columns: repeat(2, auto); justify-content: center; }
  .hero-points li { font-size: 12px; }
  .section-head h2 { font-size: 18px; letter-spacing: -.02em; }
  .section-head p { margin-top: 9px; font-size: 13px; }
  .spotlight-text h2 { font-size: 16.5px; letter-spacing: -.02em; }
  .spotlight-text > p { margin-top: 9px; font-size: 13px; }
  .spotlight-list { margin-top: 18px; gap: 10px; }
  .spotlight-list li { font-size: 12.5px; }
  .spot-more { margin-top: 16px; font-size: 13px; }
  .why-card h3 { font-size: 13.5px; }
  .why-card p { font-size: 11.5px; }
  .case-card h3 { font-size: 14px; }
  .case-card p { font-size: 12px; }
  .step-card h3 { font-size: 12.5px; line-height: 1.3; word-break: keep-all; }
  .platform-card h3 { font-size: 14px; }
  .platform-card p { font-size: 12.5px; }
  .cta-banner h2 { font-size: 16px; }
  .cta-banner p { margin-top: 8px; font-size: 13px; }
  /* 모바일: 브랜드·제품(2열 목록)은 풀폭, 회사·문의는 나란히 — 1열 스택은 너무 길다 */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .footer-col:nth-child(2) { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* 갤러리: 가로 스와이프 캐러셀 */
  .gallery-grid {
    display: flex; grid-template-columns: none; gap: 14px; align-items: center;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 4px; margin: 0 -24px; padding-left: 24px; padding-right: 24px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .gallery-grid::-webkit-scrollbar { display: none; }
  .gallery-item { flex: 0 0 86%; scroll-snap-align: center; }
  .gallery-mobile { padding: 14px; }
  .phone-frame { width: 140px; border-width: 6px; }
  .gallery-dots { display: flex; }
}

/* 초소형 (≤390px) */
@media (max-width: 390px) {
  .container { padding: 0 18px; }
  .nav-inner { padding: 0 18px; }
  .hero h1 { font-size: 23px; }
  .section { padding: 38px 0; }
}

/* ============================================================
   모바일 하단 고정 CTA 바 — 히어로 이후 표시, 푸터 근처 숨김 (app.js)
   ============================================================ */
.mobile-cta-bar { display: none; }
@media (max-width: 860px) {
  .mobile-cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;  /* navbar(120)·모바일메뉴 아래 */
    display: flex; gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -6px 24px rgba(16, 27, 66, .08);
    transform: translateY(110%);
    transition: transform .25s ease;
  }
  .mobile-cta-bar.show { transform: translateY(0); }
  .mobile-cta-bar .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta-bar { transition: none; }
}

/* ============================================================
   FAQ 아코디언 (pricing.html)
   ============================================================ */
.faq-list {
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
.faq-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-xs);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.faq-item[open] { border-color: var(--blue-100); box-shadow: var(--shadow-sm); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 26px; cursor: pointer; list-style: none;
  font-size: 16.5px; font-weight: 700; color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: 0 0 auto; width: 12px; height: 12px;
  border-right: 2.4px solid var(--text-muted); border-bottom: 2.4px solid var(--text-muted);
  transform: rotate(45deg); transition: transform .18s ease, border-color .18s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); border-color: var(--blue); }
.faq-item summary:hover { color: var(--blue-700); }
html[data-theme="dark"] .faq-item summary:hover { color: #7ea3ff; }
.faq-answer { padding: 0 26px 24px; }
.faq-answer p { font-size: 15px; line-height: 1.7; color: var(--text-muted); }
@media (max-width: 860px) {
  .faq-item summary { padding: 15px 17px; font-size: 14px; }
  .faq-answer { padding: 0 17px 15px; }
  .faq-answer p { font-size: 12.5px; }
}

/* ============================================================
   만드는 팀 섹션 (index #maker) — SION.LAB 구축 분야 칩
   ============================================================ */
.maker-tags {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 720px; margin: 0 auto;
}
.maker-tags li {
  font-size: 13.5px; font-weight: 600; color: var(--text-soft);
  padding: 8px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs);
}
.center-more { text-align: center; margin-top: 28px; }

/* 도입 후 변화 (index #outcomes) — "지금(✕) vs 도입 후(✓)" 좌우 대비 패널.
   왼쪽은 흐린 현재, 오른쪽은 네이비 강조 — 대비가 한눈에 읽히는 직설 구성 */
.vs-wrap {
  display: grid; grid-template-columns: 1fr 44px 1fr; align-items: stretch;
  max-width: 960px; margin: 0 auto;
}
.vs-col { padding: 26px 26px 28px; border-radius: var(--radius); }
.vs-head {
  display: inline-block; margin-bottom: 18px;
  font-size: 12px; font-weight: 800; letter-spacing: .05em;
  padding: 5px 14px; border-radius: 999px;
}
.vs-col ul { display: flex; flex-direction: column; gap: 16px; }
.vs-col li { position: relative; padding-left: 30px; font-size: 14.5px; line-height: 1.6; }
.vs-col li::before {
  position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; line-height: 1;
}
/* 왼쪽: 지금 — 흐림 + ✕ */
.vs-now { background: var(--bg-alt); border: 1px dashed var(--border-strong); }
.vs-now .vs-head { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-muted); }
.vs-now li { color: var(--text-muted); }
.vs-now li::before { content: "✕"; background: rgba(185, 28, 28, .09); color: #b91c1c; }
html[data-theme="dark"] .vs-now li::before { background: rgba(248, 113, 113, .14); color: #f87171; }
/* 오른쪽: 도입 후 — 네이비 강조 + ✓ */
.vs-after { background: linear-gradient(160deg, var(--navy-2), var(--navy)); box-shadow: var(--shadow-md); }
.vs-after .vs-head { background: rgba(255, 255, 255, .14); color: #fff; }
.vs-after li strong { display: block; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.vs-after li span { display: block; margin-top: 3px; color: #b7c6e6; font-size: 13px; }
.vs-after li::before { content: "✓"; background: rgba(74, 222, 128, .18); color: #4ade80; }
/* 중앙 화살표 */
.vs-arrow { position: relative; align-self: center; height: 44px; }
.vs-arrow::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px; border-top: 3px solid var(--blue); border-right: 3px solid var(--blue);
  transform: translate(-60%, -50%) rotate(45deg);
}
@media (max-width: 900px) {
  .vs-wrap { grid-template-columns: 1fr; max-width: 560px; }
  .vs-col { padding: 20px 18px 22px; }
  .vs-arrow { height: 34px; }
  .vs-arrow::before { transform: translate(-50%, -60%) rotate(135deg); }
  .vs-col li { font-size: 13px; }
  .vs-after li strong { font-size: 13.5px; }
  .vs-after li span { font-size: 12px; }
}

/* 보증 약속 (index #promise) — 도입 여정 타임라인 5단계 */
.journey {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
  list-style: none; padding: 0; margin: 0; position: relative;
  counter-reset: none;
}
/* 점을 잇는 수평 커넥터 — 점 중심 높이에 깔린다 */
.journey::before {
  content: ""; position: absolute; top: 17px; left: 10%; right: 10%;
  height: 2px; background: var(--blue-100);
}
.journey-step { position: relative; text-align: left; }
.jr-dot {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 800;
  margin-bottom: 12px; box-shadow: 0 0 0 5px var(--bg-alt);
}
.jr-when {
  display: inline-block; margin-left: 8px; vertical-align: 14px;
  font-size: 11.5px; font-weight: 700; color: var(--blue-700);
  background: var(--blue-050); border: 1px solid var(--blue-100);
  padding: 2px 9px; border-radius: 999px;
}
.journey-step h3 { font-size: 15.5px; font-weight: 800; color: var(--text); letter-spacing: -.01em; margin-bottom: 6px; }
.journey-step p { font-size: 13px; line-height: 1.65; color: var(--text-muted); }
/* 환불 단계 강조 */
.jr-refund .jr-dot { background: var(--blue); }
.jr-refund .jr-when { background: var(--blue); border-color: var(--blue); color: #fff; }
/* 다크: 네이비 점·짙은 파랑 뱃지 글자가 배경에 묻힘 — 밝게 보정 */
html[data-theme="dark"] .jr-dot { background: var(--blue); box-shadow: 0 0 0 5px var(--bg-alt); }
html[data-theme="dark"] .jr-when { color: #7ea3ff; }
html[data-theme="dark"] .jr-refund .jr-when { color: #fff; }
@media (max-width: 900px) {
  /* 세로 타임라인: 좌측 라인 + 점, 우측 콘텐츠 */
  .journey { grid-template-columns: 1fr; gap: 24px; max-width: 520px; margin: 0 auto; }
  .journey::before { top: 8px; bottom: 8px; left: 17px; right: auto; width: 2px; height: auto; }
  .journey-step { padding-left: 52px; }
  .jr-dot { position: absolute; left: 0; top: 0; margin-bottom: 0; }
  .jr-when { margin-left: 0; vertical-align: baseline; margin-bottom: 7px; }
  .journey-step h3 { font-size: 14.5px; }
  .journey-step p { font-size: 12.5px; }
}
/* 도입 안내 요금 섹션 하단 보증 요약 한 줄 */
.pricing-promise {
  margin: 26px auto 0; max-width: 760px; text-align: center;
  font-size: 14px; color: var(--text-soft);
  padding: 14px 18px; border-radius: var(--radius-sm);
  background: var(--blue-050); border: 1px solid var(--blue-100);
}
@media (max-width: 860px) {
  .pricing-promise { font-size: 12px; padding: 11px 13px; }
}
@media (max-width: 700px) {
  .maker-tags { gap: 7px; }
  .maker-tags li { font-size: 12px; padding: 6px 12px; }
  .center-more { margin-top: 22px; }
}

/* ============================================================
   기능 미니 목업 (features/*.html) — 순수 CSS, 인라인 0
   각 기능이 실제로 무엇을 하는지 UI로 보여주는 인터랙티브 데모
   ============================================================ */
:root {
  --ok: #166534; --ok-bg: #e7f6ec;
  --warn: #92400e; --warn-bg: #fdf0dc;
  --danger: #b91c1c; --danger-bg: #fdeaea;
  --info: #1d4ed8; --info-bg: #e6edfd;
}
html[data-theme="dark"] {
  --ok: #4ade80; --ok-bg: #14331f;
  --warn: #fbbf24; --warn-bg: #3a2c10;
  --danger: #f87171; --danger-bg: #3a1717;
  --info: #7ea3ff; --info-bg: #1c2b4d;
}

/* 목업 셸 — 앱 창처럼 보이는 카드 (spotlight-media 자리에 들어감) */
.mock {
  width: 100%; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.mock-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.mock-head .mock-title { font-size: 14.5px; font-weight: 700; color: var(--text); }
.mock-tag {
  margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--text-muted); background: var(--bg);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
}
.mock-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }

/* 상태 배지 (배지 색상 4종) */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; line-height: 1;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
.badge-ok { color: var(--ok); background: var(--ok-bg); }
.badge-warn { color: var(--warn); background: var(--warn-bg); }
.badge-danger { color: var(--danger); background: var(--danger-bg); }
.badge-info { color: var(--info); background: var(--info-bg); }

/* 목업 행 (리스트형: 청구서·입찰·문서) */
.mock-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.mock-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.mock-row .r-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mock-row .r-title { font-size: 14px; font-weight: 700; color: var(--text); }
.mock-row .r-sub { font-size: 12.5px; color: var(--text-muted); }
.mock-row .r-amt { margin-left: auto; font-size: 14px; font-weight: 800; color: var(--text); white-space: nowrap; }
.mock-row .r-side { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* 진행률 바 (프로젝트) */
.mock-prog { display: flex; flex-direction: column; gap: 6px; }
.mock-prog .p-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mock-prog .p-name { font-size: 14px; font-weight: 700; color: var(--text); }
.mock-prog .p-pct { font-size: 13px; font-weight: 800; color: var(--blue); }
.mock-bar { height: 8px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
.mock-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--blue-600)); }

/* KPI 카드 3열 (재무) */
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mock-kpi { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); padding: 13px; }
.mock-kpi .k-label { display: block; font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.mock-kpi .k-val { display: block; font-size: 17px; font-weight: 800; color: var(--text); margin-top: 5px; }
.mock-kpi .k-val.pos { color: var(--ok); }
.mock-kpi .k-val.neg { color: var(--danger); }

/* 도넛/게이지 반원 (재무 달성률) */
.mock-gauge { display: flex; align-items: center; gap: 16px; padding: 4px 2px; }
.gauge-ring {
  width: 92px; height: 92px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(var(--blue) 0 var(--g, 67%), var(--bg-alt) var(--g, 67%) 100%);
  display: grid; place-items: center;
}
.gauge-ring::after {
  content: ""; width: 66px; height: 66px; border-radius: 50%; background: var(--surface);
}
.gauge-ring .g-num {
  grid-area: 1 / 1; z-index: 1; font-size: 18px; font-weight: 800; color: var(--text);
}
.mock-gauge .g-meta { display: flex; flex-direction: column; gap: 4px; }
.mock-gauge .g-meta .g-t { font-size: 14px; font-weight: 700; color: var(--text); }
.mock-gauge .g-meta .g-s { font-size: 12.5px; color: var(--text-muted); }

/* 세금계산서 발행 카드 (금액 요약) */
.mock-tax .t-row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; }
.mock-tax .t-row .t-k { color: var(--text-muted); }
.mock-tax .t-row .t-v { font-weight: 700; color: var(--text); }
.mock-tax .t-sum { border-top: 1px dashed var(--border-strong); margin-top: 4px; padding-top: 12px; }
.mock-tax .t-sum .t-v { font-size: 17px; font-weight: 800; }
.mock-tax .t-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.mock-tax .t-foot .t-nts { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* 전자계약 서명 스텝 */
.mock-sign .sign-pad {
  border: 2px dashed var(--border-strong); border-radius: var(--radius-sm);
  padding: 22px; text-align: center; color: var(--text-muted); font-size: 13px;
  background: var(--bg-alt);
}
.mock-sign .sign-pad .sign-name { font-size: 22px; font-weight: 700; color: var(--text); font-family: cursive; }
.mock-steps { display: flex; align-items: center; gap: 0; }
.mock-steps .st { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.mock-steps .st.done { color: var(--ok); }
.mock-steps .st .st-dot {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-alt); color: var(--text-muted); font-size: 11px; border: 1px solid var(--border);
}
.mock-steps .st.done .st-dot { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.mock-steps .st-line { flex: 1; height: 2px; background: var(--border); margin: 0 8px; min-width: 16px; }
.mock-steps .st-line.done { background: var(--ok); }

/* CSS-only 관심 별표 토글 (입찰) — 체크박스 해킹, JS 불요 */
.mock-star { flex: 0 0 auto; cursor: pointer; line-height: 0; }
.mock-star input { position: absolute; opacity: 0; width: 0; height: 0; }
.mock-star .star-ic { display: inline-block; color: var(--border-strong); transition: color .16s ease, transform .12s ease; }
.mock-star:hover .star-ic { color: var(--warn); }
.mock-star input:checked ~ .star-ic { color: #f5a623; }
.mock-star input:focus-visible ~ .star-ic { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* 다운로드/아이콘 버튼 (문서) */
.mock-icbtn {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  display: grid; place-items: center; color: var(--text-muted);
  background: var(--bg-alt); border: 1px solid var(--border);
  transition: color .16s ease, background .16s ease;
}
.mock-row:hover .mock-icbtn { color: var(--blue); background: var(--blue-050); }

/* 값 유틸 클래스 — CSP style-src 'self'라 인라인 style 불가, 클래스로 값 표현 */
.mock-bar.w-30 > span { width: 30%; }
.mock-bar.w-50 > span { width: 50%; }
.mock-bar.w-68 > span { width: 68%; }
.mock-bar.w-100 > span { width: 100%; }
.gauge-ring.g-67 { --g: 67%; }

@media (max-width: 560px) {
  .mock-kpis { grid-template-columns: 1fr; }
  .mock-steps { flex-wrap: wrap; gap: 8px 0; }
}

/* ============================================================
   홈 밋밋 섹션 강화 (3차) — 산업 2단 · 카드 내장 목업 · 경량 대화
   순수 CSS, 인라인 0, 토큰만 → 다크모드 무회귀
   ============================================================ */

/* 산업 그리드 2단: 좌(아이콘 그리드) / 우(대표 앱 목업 1개) */
.industry-split {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: center;
}
.industry-split .industry-grid { grid-template-columns: repeat(2, 1fr); }
.industry-mock { align-self: center; }
.industry-mock .mock-body { gap: 16px; }

/* 카드 하단 내장 목업 래퍼 (integration/case 카드 안) */
.card-mock {
  margin-top: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-alt); overflow: hidden;
}
.card-mock .cm-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-bottom: 1px solid var(--border);
}
.card-mock .cm-head .cm-title { font-size: 12.5px; font-weight: 700; color: var(--text-soft); }
.card-mock .cm-head .mock-tag { padding: 2px 9px; font-size: 10.5px; }
.card-mock .cm-body { padding: 12px 13px; display: flex; flex-direction: column; gap: 9px; }
/* 카드 안이라 행/합계는 한 단계 낮은 배경 위에 흰 카드로 */
.card-mock .mock-row { padding: 9px 11px; }
.card-mock .mock-row .r-title { font-size: 13px; }
.card-mock .mock-row .r-sub { font-size: 11.5px; }
.card-mock.mock-tax .t-row { font-size: 12.5px; }
.card-mock.mock-tax .t-sum .t-v { font-size: 15px; }
.card-mock .badge { font-size: 11px; padding: 4px 9px; }

/* 경량 대화 버블 (Slack 연동·브리핑) — 아바타·헤더 없는 최소 셸 */
.mini-chat { display: flex; flex-direction: column; gap: 8px; }
.mini-chat .mc-b {
  max-width: 88%; font-size: 12.5px; line-height: 1.5; padding: 9px 12px;
  border-radius: 13px; word-break: keep-all;
}
.mini-chat .mc-q {
  /* 파란 버블(--blue) 위 글자 — 라이트/다크 모두 파란 배경이므로 흰색 고정 */
  align-self: flex-end; background: var(--blue); color: #fff;
  border-bottom-right-radius: 4px;
}
.mini-chat .mc-a {
  align-self: flex-start; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-bottom-left-radius: 4px;
}

@media (max-width: 900px) {
  .industry-split { grid-template-columns: 1fr; gap: 32px; }
  .industry-split .industry-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  /* 8개 = 4열×2행 고정 — 2열은 세로로 너무 길었다. 긴 라벨(디자인 에이전시)은 줄바꿈 허용 */
  .industry-split .industry-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .industry-split .industry-item { padding: 14px 4px; gap: 7px; }
  .industry-split .industry-ic { width: 38px; height: 38px; border-radius: 11px; }
  .industry-split .industry-item span { font-size: 12px; line-height: 1.3; letter-spacing: -.02em; word-break: keep-all; }
}

/* ============================================================
   데모 고지 (갤러리 하단) — 가상 데이터임을 명시
   ============================================================ */
.demo-note {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 22px auto 0; max-width: 720px;
  padding: 11px 16px; border-radius: 10px;
  background: var(--bg-alt); border: 1px solid var(--border);
  font-size: 14px; line-height: 1.6; color: var(--text-muted); text-align: center;
}
.demo-note strong { color: var(--text); font-weight: 700; }
.demo-note .demo-dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: #f59e0b;   /* amber — 주의 환기 */
}
@media (max-width: 600px) {
  /* flex 3분할로 문장이 조각나던 문제 — 블록 흐름으로 자연스러운 1~2줄 문장 */
  .demo-note { display: block; text-align: left; font-size: 13.5px; }
  .demo-note .demo-dot {
    display: inline-block; vertical-align: middle;
    margin-right: 7px; margin-top: -2px;
  }
}

/* 카운트업 숫자 — 자릿수 변할 때 폭이 흔들리지 않도록 */
.stat-num { font-variant-numeric: tabular-nums; }

/* ============================================================
   문의 폼 (contact.html) · 정책 문서 (privacy.html)
   ============================================================ */

.contact-wrap {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px;
  align-items: start;
}

/* ---------- 폼 카드 ---------- */
.form-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 34px 32px;
  box-shadow: var(--shadow-sm);
}

.field { margin-bottom: 20px; }
.field:last-of-type { margin-bottom: 0; }

.field > label,
.field-legend {
  display: block; margin-bottom: 8px;
  font-size: 14.5px; font-weight: 700; color: var(--text);
}
.field .opt { margin-left: 4px; font-weight: 500; color: var(--text-muted); }
.field .req { margin-left: 3px; color: var(--blue); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%; padding: 12px 14px;
  font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--text);
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 132px; }
.field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  padding-right: 40px;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); opacity: .75; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(44, 98, 246, .16);
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field-error { display: block; margin-top: 6px; font-size: 13px; color: #dc2626; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #dc2626; }
.field.has-error input:focus,
.field.has-error select:focus,
.field.has-error textarea:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }

/* ---------- 관심 기능 체크박스 ---------- */
.field fieldset { margin: 0; padding: 0; border: 0; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; }
.check {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; color: var(--text-soft); cursor: pointer;
}
.check input { flex: none; width: 17px; height: 17px; accent-color: var(--blue); cursor: pointer; }

/* ---------- 동의 ---------- */
.field-agree { margin: 24px 0 0; }
.agree {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.6; color: var(--text-soft); cursor: pointer;
}
.agree input { flex: none; margin-top: 3px; width: 17px; height: 17px; accent-color: var(--blue); cursor: pointer; }
.agree a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 전송 ---------- */
.form-actions { margin-top: 22px; }
.form-actions .btn { width: 100%; }
.form-actions .btn[disabled] { opacity: .6; cursor: not-allowed; }

.form-status {
  margin-top: 14px; padding: 11px 14px; border-radius: var(--radius-sm);
  font-size: 14px; line-height: 1.6;
}
.form-status.is-error {
  color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca;
}
html[data-theme="dark"] .form-status.is-error {
  color: #fca5a5; background: rgba(220, 38, 38, .12); border-color: rgba(220, 38, 38, .35);
}

.form-note { margin-top: 14px; font-size: 13.5px; line-height: 1.65; color: var(--text-muted); }

/* 허니팟 — 사람 눈에 안 보이되 스크린리더 탐색에서도 제외 */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 전송 완료 ---------- */
.form-done {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 56px 32px; text-align: center;
  box-shadow: var(--shadow-sm);
}
.form-done:focus { outline: none; }
.form-done .done-mark {
  width: 56px; height: 56px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--blue-050); color: var(--blue);
}
.form-done h2 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.02em; }
.form-done p { margin: 0; color: var(--text-muted); line-height: 1.72; }

/* ---------- 우측 안내 ---------- */
.contact-aside h2 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.02em; }
.contact-aside > p { margin: 0 0 26px; color: var(--text-muted); line-height: 1.72; }

.flow { list-style: none; margin: 0; padding: 0; position: relative; }
.flow::before {
  content: ""; position: absolute; left: 17px; top: 22px; bottom: 22px;
  width: 2px; background: linear-gradient(to bottom, var(--blue-100), var(--border), var(--blue-100));
}
.flow li { position: relative; display: flex; gap: 16px; padding-bottom: 26px; }
.flow li:last-child { padding-bottom: 0; }
.flow .flow-num {
  position: relative; z-index: 1; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 2px solid var(--blue);
  font-size: 13px; font-weight: 800; color: var(--blue);
}
.flow .flow-body { padding-top: 6px; }
.flow .flow-body strong { display: block; margin-bottom: 4px; font-size: 15.5px; color: var(--text); }
.flow .flow-body span { font-size: 14px; line-height: 1.65; color: var(--text-muted); }

.aside-box {
  margin-top: 28px; padding: 20px 22px;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
}
.aside-box h3 { margin: 0 0 8px; font-size: 15px; }
.aside-box p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-muted); }
.aside-box a { color: var(--blue); }

@media (max-width: 940px) {
  /* 좁은 화면에선 폼이 먼저 — 진행 안내를 위에 두면 폼까지 한참 스크롤해야 한다 */
  .contact-wrap { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  /* 좁은 화면은 스크롤 길이가 곧 이탈률 — 글자 크기는 유지하고 여백만 줄인다.
     .contact-wrap 스코프로 한정해 다른 페이지의 섹션 여백은 건드리지 않는다. */
  .section:has(.contact-wrap) { padding: 34px 0 56px; }
  .section:has(.contact-wrap) .section-head { margin-bottom: 28px; }
  .contact-wrap { gap: 34px; }

  .form-card { padding: 22px 18px; }
  .field { margin-bottom: 15px; }
  /* 이메일은 실제로 타이핑하는 칸이라 폭을 온전히 준다(2열이면 주소가 잘림) */
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .field-row .field { margin-bottom: 15px; }
  .field > label, .field-legend { margin-bottom: 6px; }

  /* 체크박스 8개: 라벨이 짧아 2열로도 충분하다(1열이면 280px를 잡아먹음) */
  .check-grid { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .check { font-size: 14px; }

  .field textarea { min-height: 104px; }
  .field-agree { margin-top: 18px; }
  .form-actions { margin-top: 18px; }
  .form-done { padding: 40px 20px; }

  /* 진행 안내: 폼을 다 본 뒤 읽는 보조 정보라 더 촘촘하게 */
  .contact-aside > p { margin-bottom: 20px; }
  .flow li { padding-bottom: 18px; }
  .flow .flow-num { width: 30px; height: 30px; font-size: 12px; }
  .flow::before { left: 14px; }
  .flow .flow-body { padding-top: 3px; }
  .aside-box { margin-top: 20px; padding: 16px 18px; }
}

/* ============================================================
   정책 문서 (privacy.html)
   ============================================================ */
.legal { max-width: 820px; margin: 0 auto; }
.legal .legal-meta { margin: -8px 0 40px; font-size: 14px; color: var(--text-muted); }
.legal h2 {
  margin: 40px 0 12px; padding-top: 20px;
  font-size: 18.5px; letter-spacing: -.02em;
  border-top: 1px solid var(--border);
}
.legal .legal-lead { margin-bottom: 34px; }
.legal p { margin: 0 0 12px; line-height: 1.8; color: var(--text-soft); }
.legal ul, .legal ol { margin: 0 0 12px; padding-left: 20px; }
.legal li { margin-bottom: 7px; line-height: 1.8; color: var(--text-soft); }
.legal table {
  width: 100%; margin: 6px 0 16px;
  border-collapse: collapse; font-size: 14.5px;
}
.legal th, .legal td {
  padding: 11px 13px; border: 1px solid var(--border);
  text-align: left; vertical-align: top; line-height: 1.7;
}
.legal th { background: var(--bg-alt); font-weight: 700; color: var(--text); }
.legal td { color: var(--text-soft); }
.legal .legal-contact.legal-contact-gap { margin-top: 32px; }
.legal .legal-contact {
  margin-top: 12px; padding: 18px 20px;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
}
.legal .legal-contact p { margin: 0 0 6px; }
.legal .legal-contact p:last-child { margin-bottom: 0; }
.legal a { color: var(--blue); }

@media (max-width: 600px) {
  .legal table, .legal thead, .legal tbody, .legal tr, .legal th, .legal td { display: block; }
  .legal thead { display: none; }
  .legal tr { margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
  .legal td { border: 0; border-bottom: 1px solid var(--border); }
  .legal tr td:last-child { border-bottom: 0; }
  .legal td::before { content: attr(data-th); display: block; margin-bottom: 3px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
}

/* ============================================================
   모션 — 스크롤 리빌 · 히어로 등장 · 그래프 애니메이션
   app.js가 html.anim-ready 게이트를 세우고 .reveal 태깅 + 진입 시 .in-view 부여.
   no-JS·모션 최소화 환경에선 anim-ready가 붙지 않아 모든 콘텐츠 즉시 노출.
   등장 연출은 전부 keyframes(fill: backwards) — 종료 후 스타일이 원래 선언으로
   복귀하므로 기존 hover transition(.16s 카드 리프트, .18s 노드 확대)을 해치지 않는다.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  @keyframes fade-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes mm-pop {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.95); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  @keyframes hub-ping {
    0%   { box-shadow: 0 0 0 0 rgba(44, 98, 246, .35), var(--shadow-md); }
    70%  { box-shadow: 0 0 0 16px rgba(44, 98, 246, 0), var(--shadow-md); }
    100% { box-shadow: 0 0 0 0 rgba(44, 98, 246, 0), var(--shadow-md); }
  }

  /* --- 기본 리빌: 아래에서 떠오르며 등장 --- */
  html.anim-ready .reveal:not(.in-view) { opacity: 0; }
  html.anim-ready .reveal.in-view { animation: fade-rise .6s cubic-bezier(.22, .61, .36, 1) backwards; }

  /* 그리드 카드 스태거 — 같은 행이 한꺼번에 들어올 때 형제 순서대로 시차 등장 */
  html.anim-ready :is(.why-grid, .feature-grid, .security-grid, .steps-grid, .journey, .case-grid, .platform-grid, .stats-grid) > .reveal.in-view:nth-child(2) { animation-delay: .08s; }
  html.anim-ready :is(.why-grid, .feature-grid, .security-grid, .steps-grid, .journey, .case-grid, .platform-grid, .stats-grid) > .reveal.in-view:nth-child(3) { animation-delay: .16s; }
  html.anim-ready :is(.why-grid, .feature-grid, .security-grid, .steps-grid, .journey, .case-grid, .platform-grid, .stats-grid) > .reveal.in-view:nth-child(4) { animation-delay: .24s; }
  html.anim-ready :is(.why-grid, .feature-grid, .security-grid, .steps-grid, .journey, .case-grid, .platform-grid, .stats-grid) > .reveal.in-view:nth-child(5) { animation-delay: .32s; }
  html.anim-ready :is(.why-grid, .feature-grid, .security-grid, .steps-grid, .journey, .case-grid, .platform-grid, .stats-grid) > .reveal.in-view:nth-child(6) { animation-delay: .40s; }
  html.anim-ready :is(.why-grid, .feature-grid, .security-grid, .steps-grid, .journey, .case-grid, .platform-grid, .stats-grid) > .reveal.in-view:nth-child(7) { animation-delay: .48s; }
  html.anim-ready :is(.why-grid, .feature-grid, .security-grid, .steps-grid, .journey, .case-grid, .platform-grid, .stats-grid) > .reveal.in-view:nth-child(8) { animation-delay: .56s; }
  /* 스포트라이트: 이미지가 먼저, 텍스트가 반 박자 뒤 */
  html.anim-ready .spotlight-inner > .spotlight-text.reveal.in-view { animation-delay: .12s; }

  /* --- 히어로 로드 스태거 (index 전용 — navbar-hero 페이지) --- */
  html.anim-ready .navbar-hero + main .hero .hero-eyebrow   { animation: fade-rise .55s cubic-bezier(.22, .61, .36, 1) .05s backwards; }
  html.anim-ready .navbar-hero + main .hero h1              { animation: fade-rise .6s  cubic-bezier(.22, .61, .36, 1) .16s backwards; }
  html.anim-ready .navbar-hero + main .hero .browser-frame  { animation: fade-rise .7s  cubic-bezier(.22, .61, .36, 1) .30s backwards; }
  html.anim-ready .navbar-hero + main .hero .hero-sub       { animation: fade-rise .6s  cubic-bezier(.22, .61, .36, 1) .44s backwards; }
  html.anim-ready .navbar-hero + main .hero .hero-cta       { animation: fade-rise .6s  cubic-bezier(.22, .61, .36, 1) .54s backwards; }
  html.anim-ready .navbar-hero + main .hero .hero-points    { animation: fade-rise .6s  cubic-bezier(.22, .61, .36, 1) .64s backwards; }

  /* --- 채팅 목업 라이브 재생: app.js가 chat-live를 부여하고 대화를 실시간처럼
         한 줄씩 도착시킨다(타이핑 버블 → 답변, 사이클 반복). 행은 opacity로만
         숨겨 자리(높이)를 유지 — 재생 중 페이지 레이아웃이 밀리지 않는다. --- */
  @keyframes typing-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30%           { transform: translateY(-4px); opacity: 1; }
  }
  @keyframes live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
    70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
  }

  html.anim-ready .chat.chat-live .chat-body > * { opacity: 0; }
  html.anim-ready .chat.chat-live .chat-body > .lv-in { opacity: 1; animation: fade-rise .4s ease backwards; }
  /* 사이클 종료: 표시된 행을 부드럽게 지우고 처음부터 다시 */
  html.anim-ready .chat.chat-live .chat-body.lv-out > .lv-in { opacity: 0; transition: opacity .35s ease; animation: none; }

  /* 헤더 온라인 점 — "지금 접속 중" 신호(무한 펄스) */
  html.anim-ready .chat.chat-live .chat-name::after {
    content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 7px;
    border-radius: 50%; background: #22c55e; vertical-align: 1px;
    animation: live-pulse 2s ease-out infinite;
  }
  /* 비서가 입력 중일 때 헤더 상태 표기 */
  html.anim-ready .chat.chat-live.is-typing .chat-sub::after {
    content: " · 입력 중…"; color: #7ee2a8;
  }

  /* 타이핑 버블(점 3개) — JS가 다음 답변 자리에 잠깐 끼워 넣는다 */
  html.anim-ready .typing-bubble { display: inline-flex; align-items: center; gap: 5px; padding: 14px 15px; }
  html.anim-ready .typing-bubble span {
    width: 7px; height: 7px; border-radius: 50%; background: #94a3b8;
    animation: typing-dot 1s ease-in-out infinite;
  }
  html.anim-ready .typing-bubble span:nth-child(2) { animation-delay: .15s; }
  html.anim-ready .typing-bubble span:nth-child(3) { animation-delay: .3s; }
  html[data-theme="dark"] .typing-bubble span { background: #64748b; }
  /* 일시정지(호버·이탈) 시 점 바운스도 멈춤 */
  html.anim-ready .chat.chat-live.lv-paused .typing-bubble span { animation-play-state: paused; }

  /* --- 진행률 바(mock-bar): 진입 시 0 → 지정 폭으로 채워짐 --- */
  html.anim-ready .mock.reveal .mock-bar > span { width: 0; transition: width .9s cubic-bezier(.22, .61, .36, 1) .3s; }
  html.anim-ready .mock.reveal.in-view .mock-bar.w-30  > span { width: 30%; }
  html.anim-ready .mock.reveal.in-view .mock-bar.w-50  > span { width: 50%; }
  html.anim-ready .mock.reveal.in-view .mock-bar.w-68  > span { width: 68%; }
  html.anim-ready .mock.reveal.in-view .mock-bar.w-100 > span { width: 100%; }

  /* --- 마인드맵: 실선이 그려지고 노드가 순서대로 자리잡는다
         (모바일도 방사형을 유지하므로 전 해상도 공통) --- */
  html.anim-ready .mindmap.reveal:not(.in-view) { opacity: 1; }
  html.anim-ready .mindmap.reveal.in-view { animation: none; }

  html.anim-ready .mindmap.reveal .mm-line--live { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.1s ease .1s; }
  html.anim-ready .mindmap.reveal.in-view .mm-line--live { stroke-dashoffset: 0; }
  html.anim-ready .mindmap.reveal .mm-line--soon { opacity: 0; transition: opacity .7s ease .85s; }
  html.anim-ready .mindmap.reveal.in-view .mm-line--soon { opacity: 1; }

  html.anim-ready .mindmap.reveal:not(.in-view) .mm-node { opacity: 0; }
  html.anim-ready .mindmap.reveal.in-view .mm-node { animation: mm-pop .5s cubic-bezier(.22, .61, .36, 1) backwards; }
  html.anim-ready .mindmap.reveal.in-view .spoke-1 { animation-delay: .18s; }
  html.anim-ready .mindmap.reveal.in-view .spoke-2 { animation-delay: .26s; }
  html.anim-ready .mindmap.reveal.in-view .spoke-3 { animation-delay: .34s; }
  html.anim-ready .mindmap.reveal.in-view .spoke-4 { animation-delay: .42s; }
  html.anim-ready .mindmap.reveal.in-view .spoke-5 { animation-delay: .70s; }
  html.anim-ready .mindmap.reveal.in-view .spoke-6 { animation-delay: .78s; }
  html.anim-ready .mindmap.reveal.in-view .spoke-7 { animation-delay: .86s; }
  html.anim-ready .mindmap.reveal.in-view .spoke-8 { animation-delay: .94s; }

  /* 허브 펄스 — 연결이 살아있다는 신호. 3회만 울리고 정지 */
  html.anim-ready .mindmap.reveal.in-view .mm-hub { animation: hub-ping 2.2s ease-out 1.1s 3; }

  /* --- 히어로 라이브 알림 토스트: "제품이 지금 일하고 있다" 로테이션.
         비디오 프레임 우상단에 겹치는 장식 요소라 색은 테마 무관 고정. --- */
  @keyframes toast-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateY(-8px); }
  }
  html.anim-ready .live-toast {
    position: absolute; top: 54px; right: 14px; z-index: 5;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 15px 9px 10px; border-radius: 12px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(10, 21, 51, .1); box-shadow: var(--shadow-md);
    pointer-events: none; opacity: 0;
  }
  html.anim-ready .live-toast.t-in  { animation: toast-in .45s cubic-bezier(.22, .61, .36, 1) forwards; }
  html.anim-ready .live-toast.t-out { animation: toast-out .4s ease forwards; }
  .live-toast img { width: 30px; height: 30px; display: block; }
  .live-toast-txt { display: flex; flex-direction: column; line-height: 1.4; }
  .live-toast-title { font-size: 13px; font-weight: 700; color: #111827; }
  .live-toast-sub { font-size: 11.5px; color: #64748b; }

  @media (max-width: 700px) {
    html.anim-ready .live-toast { top: 46px; right: 8px; gap: 8px; padding: 7px 11px 7px 8px; }
    .live-toast img { width: 24px; height: 24px; }
    .live-toast-title { font-size: 12px; }
    .live-toast-sub { font-size: 10.5px; }
  }
}