/* ============================================================
   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) */
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(44, 98, 246, .28); }
.btn-primary:hover { background: var(--blue-600); box-shadow: 0 8px 22px rgba(44, 98, 246, .34); }

/* 화이트: 네이비 히어로 위 흰 배경 파란 글자 */
.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); }

.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); }

/* ---------- 모바일 메뉴 (아코디언) ---------- */
.mobile-menu {
  position: absolute; top: var(--nav-h); left: 0; right: 0;
  background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  padding: 14px 24px 22px; display: flex; flex-direction: column; gap: 6px;
  max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu > a:not(.btn) { padding: 11px 4px; 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: 6px; }

/* 모바일 서비스 아코디언 */
.m-acc-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 11px 4px; font-size: 15px; 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, .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);
  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: #a9c4ff; background: rgba(44, 98, 246, .16); border: 1px solid rgba(120, 160, 255, .32);
  padding: 6px 15px; border-radius: 999px; margin-bottom: 24px;
}
.hero h1 { font-size: clamp(32px, 5.6vw, 58px); font-weight: 800; color: #fff; }
.hero-sub { margin-top: 20px; font-size: clamp(16px, 2.3vw, 21px); color: #b7c6e6; }
.hero-cta { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.browser-frame {
  margin: 62px auto 0; max-width: 1080px; width: 92%;
  border-radius: 16px; overflow: hidden; background: #0d1526;
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: var(--shadow-lg);
  transform: perspective(1900px) rotateX(2.5deg);
}
.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; }

/* ============================================================
   섹션 공통 + Shiftee식 헤드 (eyebrow + 큰 타이틀 + 서브)
   ============================================================ */
.section { padding: 92px 0; background: var(--bg); transition: background-color .25s ease; }
.section.gray { background: var(--bg-alt); }
.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(28px, 4vw, 40px); 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);
}
.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(24px, 3.4vw, 33px); 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;
}
.integration-proofs .card-mock { margin-top: 0; }

/* 마인드맵 반응형 — 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) {
  /* 방사형 해제 → 2열 그리드 (세로로만 길어지는 문제 해결). 허브 상단 풀폭 + 노드 8개 2열(4행) */
  .mindmap {
    aspect-ratio: auto; width: min(440px, 100%);
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: stretch;
  }
  .mm-links { display: none; }
  .mm-hub, .mm-node { position: static; transform: none; width: auto; }
  .mm-hub {
    grid-column: 1 / -1; flex-direction: row; gap: 10px; height: auto;
    padding: 14px 18px; border-radius: var(--radius-sm); justify-content: center;
  }
  .mm-node { padding: 14px 10px; }
  .mm-node--live:hover, .mm-node--soon:hover { transform: none; }
  .integration-proofs { grid-template-columns: 1fr; margin-top: 32px; }
}
@media (max-width: 390px) {
  .mindmap .mm-label { font-size: 12.5px; }
  .mindmap .mm-sub, .mindmap .mm-tag { font-size: 10px; }
}

/* ============================================================
   멀티플랫폼 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(26px, 3.8vw, 40px); font-weight: 800; color: #fff; }
.cta-banner p { margin-top: 16px; font-size: 18px; color: #b7c6e6; }
.cta-buttons { margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   메가 푸터 (4컬럼)
   ============================================================ */
.footer { background: #070c16; color: #aebad1; padding: 64px 0 40px; }
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.footer-brand .brand { color: #fff; font-size: 22px; }
.footer-brand p { margin-top: 12px; font-size: 14px; color: #7e8aa4; max-width: 300px; }
.footer-col h3 { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8794b0; margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 14.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: 26px;
}
.footer-bottom .copyright { font-size: 13.5px; color: #94a0b8; }
.footer-bottom .footer-mini { display: flex; gap: 22px; }
.footer-bottom .footer-mini a { font-size: 13.5px; 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: 1000px) {
  .industry-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid, .feature-grid, .security-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}

@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 .btn { display: none; }
  .nav-actions .theme-toggle { display: none; }
  .hamburger { display: flex; }
  .mobile-menu:not([hidden]) { display: flex; }

  .section { padding: 62px 0; }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid, .feature-grid, .security-grid, .stats-grid, .case-grid { grid-template-columns: 1fr; }
  .stats-grid { gap: 32px; }
  .hero { padding: 44px 0 68px; }
  .browser-frame { width: 100%; transform: none; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* 갤러리: 가로 스와이프 캐러셀 */
  .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; }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 28px; }
}

/* ============================================================
   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); }
.faq-answer { padding: 0 26px 24px; }
.faq-answer p { font-size: 15px; line-height: 1.7; color: var(--text-muted); }

/* ============================================================
   기능 미니 목업 (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) {
  .industry-split .industry-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   데모 고지 (갤러리 하단) — 가상 데이터임을 명시
   ============================================================ */
.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) {
  .demo-note { align-items: flex-start; text-align: left; font-size: 13.5px; }
  .demo-note .demo-dot { margin-top: 7px; }
}

/* 카운트업 숫자 — 자릿수 변할 때 폭이 흔들리지 않도록 */
.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 {
  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); }
}