/* =========================================================
   CMS비교 — Design System (fintech B2B SaaS tone)
   ========================================================= */
:root {
  /* Brand — navy primary + royal-blue accent + lavender (finance duotone) */
  --brand: #1E2E52;        /* navy: buttons, headings, nav */
  --brand-600: #17233F;
  --brand-700: #101A30;
  --brand-tint: #EEF2FB;
  --brand-tint-2: #E1E8F7;
  --brand-light: #3E5B9E;
  --accent: #2E5BFF;       /* royal blue: icons, checks, links, charts */
  --accent-600: #1E45D8;
  --accent-tint: #E9EFFF;
  --accent-tint-2: #D6E2FF;

  /* Accent / status */
  --ok: #10B981;
  --ok-tint: #E7F8F1;
  --warn: #B45309;
  --warn-tint: #FEF3C7;
  --danger: #DC2626;
  --danger-tint: #FEE7E7;

  /* Neutrals */
  --ink: #0B1524;
  --ink-2: #33415A;
  --muted: #6B7A90;
  --line: #E7EBF2;
  --line-2: #EFF2F7;
  --bg: #FFFFFF;
  --soft: #F2F5FC;
  --lav: #EEF2FB;
  --navy: #141C2E;

  /* Shape / motion */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --pill: 999px;
  --sh-sm: 0 1px 2px rgba(16,32,64,.06), 0 1px 3px rgba(16,32,64,.04);
  --sh: 0 6px 20px rgba(16,40,80,.08);
  --sh-lg: 0 20px 50px rgba(16,40,80,.14);
  --ease: cubic-bezier(.4,.2,.2,1);

  /* Bootstrap bridge */
  --bs-primary: var(--brand);
  --bs-primary-rgb: 30,46,82;
  --bs-link-color-rgb: 46,91,255;
  --bs-link-hover-color-rgb: 30,69,216;
  --bs-body-color: var(--ink-2);
  --bs-border-color: var(--line);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
  color: var(--ink-2);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}
h1,h2,h3,h4,h5,h6,.fw-bold { color: var(--ink); letter-spacing: -0.025em; word-break: keep-all; }
h1,.display-5,.display-6 { line-height: 1.18; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-600); }
.container { max-width: 1120px; }

/* Text helpers */
.text-soft { color: var(--ink-2) !important; }
.text-muted-2 { color: var(--muted) !important; }
.bg-soft { background: var(--soft) !important; }
.bg-tint { background: var(--brand-tint) !important; }
.section { padding: 72px 0; }
@media (max-width: 768px){ .section { padding: 48px 0; } }

/* Eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-weight: 700; font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.eyebrow::before { content:""; width: 18px; height: 2px; background: var(--accent); border-radius: 2px; }

/* ---------- Buttons ---------- */
.btn { --bs-btn-font-weight: 600; border-radius: var(--pill); padding: .62rem 1.25rem; transition: all .18s var(--ease); }
.btn-lg { padding: .82rem 1.6rem; font-size: 1.02rem; }
.btn-sm { padding: .42rem .95rem; }
.btn-primary {
  --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-600); --bs-btn-hover-border-color: var(--brand-600);
  --bs-btn-active-bg: var(--brand-700);
  box-shadow: 0 6px 16px rgba(27,53,94,.28);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(27,53,94,.36); }
.btn-outline-primary {
  --bs-btn-color: var(--brand); --bs-btn-border-color: #C3D0E6;
  --bs-btn-hover-bg: var(--brand-tint); --bs-btn-hover-color: var(--brand-600);
  --bs-btn-hover-border-color: var(--brand); background: #fff;
}
.btn-light { background:#fff; border:1px solid var(--line); color: var(--ink); }
.btn-light:hover { background: var(--soft); border-color:#D7DEEA; }

/* ---------- Navbar ---------- */
.site-nav {
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.site-nav.scrolled { border-bottom-color: var(--line); box-shadow: 0 4px 20px rgba(16,32,64,.06); }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:1.34rem; color:var(--ink); letter-spacing:-.03em; }
.brand:hover { color: var(--ink); }
.brand-mark {
  width:32px; height:32px; border-radius:9px;
  background: linear-gradient(135deg, var(--accent) 0%, #5B7BFF 100%);
  display:grid; place-items:center; box-shadow: 0 4px 10px rgba(46,91,255,.35);
}
.brand-mark svg { width:18px; height:18px; }
.site-nav .nav-link { color: var(--ink); font-weight:600; font-size:1.06rem; padding:.45rem .9rem; border-radius:8px; }
.site-nav .nav-link:hover { color: var(--accent); background: var(--accent-tint); }
.site-nav .nav-link.active { color: var(--accent); background: var(--accent-tint); font-weight:700; }
.site-nav .nav-link.dropdown-toggle::after { margin-left:.4em; vertical-align:.15em; }
.nav-industry-menu .dropdown-item.active { color:#fff; background: var(--accent); }
.nav-industry-menu { border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 30px rgba(16,32,64,.12); padding:.5rem; min-width:340px; }
.nav-industry-menu.show { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.nav-industry-menu .dropdown-item { border-radius:8px; font-weight:600; font-size:1rem; color:var(--ink); padding:.5rem .75rem; }
.nav-industry-menu .dropdown-item:hover { color:var(--accent); background:var(--accent-tint); }
@media (max-width:991px){
  .nav-industry-menu { min-width:0; box-shadow:none; border:0; padding-left:.5rem; }
  .nav-industry-menu.show { grid-template-columns:1fr; }
}
.nav-phone { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:1.06rem; color:var(--accent); }
.nav-phone small { color: var(--muted); font-weight:600; }

/* ---------- Cards ---------- */
.card-soft { background:#fff; border:1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: #CBD7EC; }

.feature-ico {
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background: var(--accent-tint); color: var(--accent); flex:0 0 auto;
}
.feature-ico svg { width:22px; height:22px; }
.check-num {
  width:44px; height:44px; border-radius:12px; background: var(--accent-tint); color:var(--accent);
  font-weight:800; display:grid; place-items:center; flex:0 0 auto;
}

/* Provider chips */
.ptype { display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:700; padding:.3em .7em; border-radius: var(--pill); }
.ptype-agency { background: var(--accent-tint); color: var(--accent-600); }
.ptype-direct { background: #EEF1F6; color:#475069; }

/* ---------- Status badges ---------- */
.badge-status {
  display:inline-flex; align-items:center; gap:6px;
  font-weight:600; font-size:.8rem; border-radius: var(--pill); padding:.32em .7em; white-space:nowrap;
}
.badge-status::before { content:""; width:7px; height:7px; border-radius:50%; background: currentColor; opacity:.9; }
.st-supported { background: var(--accent-tint); color: var(--accent-600); }
.st-conditional { background:#FFF4E2; color:#B45309; }
.st-apply_required { background:#EEF2FF; color:#3B4FC4; }
.st-separate_service { background:#F1F5F9; color:#546074; }
.st-check_required { background: var(--warn-tint); color:#92610E; }
.st-unsupported { background: var(--danger-tint); color:#B91C1C; }
.st-unknown { background:#F1F5F9; color:#6B7A90; }

.fresh-fresh { color: var(--ok); } .fresh-recheck { color:#E5A100; }
.fresh-stale { color: var(--danger); } .fresh-none { color:#AEB8C8; }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; background: var(--soft); }
.hero.section { padding-top:2.25rem; padding-bottom:2.25rem; }
.page-hero.py-5 { padding-top:2.25rem !important; padding-bottom:2.25rem !important; }
.hero::before {
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 80% at 85% -10%, rgba(46,91,255,.14), transparent 60%),
    radial-gradient(50% 60% at 0% 10%, rgba(46,91,255,.08), transparent 55%);
}
.hero > .container { position:relative; z-index:1; }
.hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
.trust-bar { display:flex; flex-wrap:wrap; gap: 10px 26px; }
.trust-bar .ti { display:flex; align-items:center; gap:8px; color:var(--ink-2); font-weight:600; font-size:.92rem; }
.trust-bar .ti svg { width:18px; height:18px; color: var(--accent); }

/* Hero visual — 비교 미리보기 카드 */
.preview-card { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 18px 20px; width:100%; }
.preview-card .pc-dot { width:20px; height:20px; }
.preview-card .pc-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.preview-row { display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); align-items:center; gap:6px; padding:6px; border-top:1px solid var(--line-2); font-size:.84rem; }
.preview-row.h { border-top:0; color:var(--muted); font-weight:700; font-size:.74rem; }
.preview-row .lbl { color:var(--ink); font-weight:600; }
.pc-dot { width:18px; height:18px; border-radius:6px; display:grid; place-items:center; margin:0 auto; }
.pc-yes { background: var(--accent-tint); color: var(--accent); } .pc-no { background:#F1F5F9; color:#9AA6B6; }
.pc-yes svg, .pc-no svg { width:12px; height:12px; }

/* ---------- Comparison table ---------- */
.compare-table { border-collapse: separate; border-spacing:0; width:100%; background:#fff; border:1px solid var(--line); border-radius: var(--r); overflow:hidden; }
.compare-table th, .compare-table td { padding:14px 16px; text-align:left; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.compare-table thead th { background: var(--soft); font-weight:700; color:var(--ink); font-size:.9rem; }
.compare-table tbody th { font-weight:600; color:var(--ink); background:#FCFDFF; width:24%; min-width:150px; }
.compare-table tbody tr:hover td, .compare-table tbody tr:hover th { background:#F9FBFF; }
.compare-table tr:last-child th, .compare-table tr:last-child td { border-bottom:0; }
.provider-col { min-width:150px; }
.provider-col .pv-name { font-weight:700; color:var(--ink); }
.provider-col .pv-tag { font-size:.72rem; color:var(--muted); }

/* Checklist */
.checklist { list-style:none; padding:0; margin:14px 0; }
.checklist li { position:relative; padding-left:28px; margin-bottom:9px; color:var(--ink-2); }
.checklist li::before { content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%; background: var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E5BFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; }

.crosslist { list-style:none; padding:0; margin:8px 0; }
.crosslist li { position:relative; padding-left:22px; margin-bottom:8px; }
.crosslist li::before { content:"!"; position:absolute; left:6px; top:0; color:var(--warn); font-weight:800; }

/* Stepper */
.stepper .step { position:relative; }
.stepper .step .check-num { margin-bottom:10px; }

/* Disclaimer / callout */
.disclaimer { background:#FCFBF4; border:1px solid #F0E6C8; border-radius: var(--r-sm); color:#6B6244; }
.callout-brand { border-left:4px solid var(--brand); background: var(--brand-tint); border-radius: var(--r-sm); }

/* CTA band */
.cta-band { background:
    radial-gradient(60% 120% at 90% 0%, rgba(46,91,255,.14), transparent 60%), var(--brand-tint); }
.cta-card { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh); }

/* Footer */
footer.site { background: var(--navy); color:#AEB8CA; }
footer.site a { color:#CBD5E6; }
footer.site .brand, footer.site strong { color:#fff; }
footer.site .brand-mark { box-shadow:none; }

/* Accordion (FAQ) */
.accordion { --bs-accordion-border-color: var(--line); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(46,91,255,.18); border-radius: var(--r); overflow:hidden; }
.accordion-button:not(.collapsed) { background: var(--accent-tint); color: var(--accent-600); }
.accordion-button { font-weight:600; color:var(--ink); }

/* Forms */
.form-control, .form-select { border-radius: var(--r-sm); border-color: var(--line); padding:.62rem .85rem; }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(46,91,255,.18); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* Section title */
.section-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight:800; }

/* ---------- Illustrations & icons ---------- */
.illust { width:100%; max-width:440px; height:auto; display:block; }
.illust .il-navy { fill: var(--brand); }
.illust .il-navy2 { fill: var(--accent); }
.illust .il-tint { fill: var(--accent-tint-2); }
.illust .il-tint-2 { fill: var(--brand-tint); }
.illust .il-accent { fill: var(--accent); }
.illust .il-white { fill:#fff; }
.illust .il-stroke { fill:none; stroke: var(--brand); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.illust .il-card { fill:#fff; stroke: var(--line); stroke-width:1.5; }

.ind-ico { width:24px; height:24px; flex:0 0 auto; color: var(--accent); }
.ind-ico svg { width:100%; height:100%; }
/* '내 업종에 필요한 CMS' 업종 카드 그리드 */
.ind-card2 { display:flex; align-items:center; gap:12px; height:100%; padding:14px 14px; background:#fff;
  border:1px solid var(--line); border-radius:16px; text-decoration:none; transition:transform .15s, box-shadow .15s, border-color .15s; }
.ind-card2:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:0 10px 26px rgba(46,91,255,.12); }
.ind-card2-ico { width:58px; height:58px; flex:0 0 auto; object-fit:contain; }
span.ind-card2-ico { display:flex; align-items:center; justify-content:center; background:var(--accent-tint); color:var(--accent); padding:12px; border-radius:14px; }
.ind-card2-txt { min-width:0; flex:1 1 auto; }
.ind-card2-name { display:block; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.ind-card2-desc { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:.82rem; color:var(--muted); line-height:1.35; margin-top:2px; word-break:keep-all; }
.ind-card2-arrow { width:18px; height:18px; flex:0 0 auto; color:var(--muted); transition:transform .15s, color .15s; }
.ind-card2:hover .ind-card2-arrow { color:var(--accent); transform:translateX(2px); }
/* 상세비교 좌측 '업종별 추천' 리스트 (홈 카드와 동일 아이콘/톤, 컴팩트) */
.ind-side { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:12px; text-decoration:none; transition:background .15s; }
.ind-side:hover { background:var(--accent-tint); }
.ind-side-ico { width:40px; height:40px; flex:0 0 auto; object-fit:contain; }
span.ind-side-ico { display:flex; align-items:center; justify-content:center; background:var(--accent-tint); color:var(--accent); border-radius:10px; padding:8px; }
.ind-side-txt { min-width:0; }
.ind-side-name { display:block; font-weight:700; color:var(--ink); font-size:.92rem; line-height:1.25; letter-spacing:-.01em; }
.ind-side-desc { display:block; font-size:.76rem; color:var(--muted); line-height:1.25; word-break:keep-all; }
/* 비교표 셀 — 값 + 출처(신선도), 반복 노이즈 제거 */
.cell-val { font-size:.82rem; color:var(--ink-2); line-height:1.35; margin-top:4px; }
.cell-src { display:flex; align-items:center; gap:4px; width:fit-content; margin-top:6px; font-size:.72rem; font-weight:500;
  color:var(--muted); text-decoration:none; }
.cell-src:hover { color:var(--accent); text-decoration:underline; }
.cell-src span { font-size:.58rem; line-height:1; }
/* 업종 상세 본문 아티클 (왜 CMS가 필요한가) */
.ind-article h2 { font-size:1.35rem; font-weight:800; letter-spacing:-.01em; color:var(--ink); margin:1.8rem 0 .6rem; }
.ind-article h2:first-child { margin-top:0; }
.ind-article h3 { font-size:1.06rem; font-weight:700; color:var(--ink); margin:1.5rem 0 .5rem; }
.ind-article p { color:var(--ink-2); line-height:1.75; margin-bottom:1rem; }
.ind-article ul { margin:0 0 1rem; padding-left:0; list-style:none; }
.ind-article li { position:relative; padding-left:1.4rem; margin-bottom:.5rem; color:var(--ink-2); line-height:1.65; word-break:keep-all; }
.ind-article li::before { content:''; position:absolute; left:.25rem; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.cta-inline { background:var(--accent-tint); border:1px solid rgba(46,91,255,.14); border-radius:16px; }
/* 브레드크럼 */
.breadcrumb-bar { background:#fff; border-bottom:1px solid var(--line); }
.bc-list { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; list-style:none; margin:0; padding:.65rem 0; font-size:.85rem; }
.bc-item { display:flex; align-items:center; gap:.5rem; color:var(--muted); }
.bc-item:not(:first-child)::before { content:'›'; color:var(--muted-2); }
.bc-item a { color:var(--muted); text-decoration:none; }
.bc-item a:hover { color:var(--accent); text-decoration:underline; }
.bc-item span[aria-current] { color:var(--ink); font-weight:600; }
/* 관련 가이드 카드 */
.related-card { border:1px solid var(--line); transition:border-color .15s, box-shadow .15s, transform .15s; }
.related-card:hover { border-color:var(--accent); box-shadow:0 8px 22px rgba(46,91,255,.10); transform:translateY(-2px); }
.related-arrow { width:18px; height:18px; flex:0 0 auto; color:var(--muted); }
.related-card:hover .related-arrow { color:var(--accent); }
/* 1분추천 체크 항목(카드형) */
.reco-checks { display:grid; gap:8px; }
.reco-check { display:flex; align-items:flex-start; gap:10px; margin:0; padding:11px 13px; border:1px solid var(--line); border-radius:12px; cursor:pointer; transition:border-color .15s, background .15s; }
.reco-check:hover { border-color:var(--accent); }
.reco-check:has(input:checked) { border-color:var(--accent); background:var(--accent-tint); }
.reco-check input { margin-top:2px; flex:0 0 auto; }
.reco-check > span { font-weight:600; color:var(--ink); line-height:1.3; }
.reco-check small { display:block; font-weight:400; font-size:.78rem; margin-top:1px; }
/* 3사 상세 소개 이미지 카드 */
.provider-feature { max-width:460px; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 12px 30px rgba(16,32,64,.08); }
.provider-feature img { display:block; width:100%; height:auto; }
/* 효성 통합관리 2단 섹션: 텍스트와 균형 맞춰 적당히 */
.row.align-items-center .provider-feature { max-width:540px; margin-inline:auto; }
.ind-badge { width:56px; height:56px; border-radius:16px; background: var(--accent-tint); color: var(--accent); display:grid; place-items:center; }
.ind-badge svg { width:28px; height:28px; }
.page-hero { background: linear-gradient(180deg, var(--soft), #fff); border-bottom:1px solid var(--line); }
.media-frame { border-radius: var(--r); overflow:hidden; border:1px solid var(--line); }
.media-frame img { width:100%; height:auto; display:block; }
.hero-img { width:100%; height:auto; display:block; border-radius: var(--r-lg); box-shadow: var(--sh-lg); }
/* 조화형(inline): 이미지가 히어로 배경과 자연스럽게 어우러짐 */
.hero-inline { background:#E5ECF6 !important; }  /* Gemini 이미지 배경과 매칭(경계 제거) */
.hero-inline::before { display:none; }
.hero-inline-img { width:100%; height:auto; display:block; }
/* 상세비교·1분추천·3사 상세: 히어로 영역·텍스트·이미지 비율 통일(같은 높이) */
.page-hero.hero-inline { min-height:400px; display:flex; align-items:center; }
.page-hero.hero-inline > .container { width:100%; }
.page-hero.hero-inline .hero-inline-img { width:auto; height:auto; max-height:300px; max-width:100%; margin-inline:auto; }
@media (max-width:991px){ .page-hero.hero-inline { min-height:0; } }
/* 업종 인라인 이미지: 라운드 카드 프레임(보라 배경 이미지를 의도된 제품샷처럼) */
.hero-inline-img.ind-card { border-radius:20px; box-shadow:0 18px 40px rgba(30,46,82,.14); border:1px solid rgba(30,46,82,.06); overflow:hidden; }

/* Full-bleed image hero */
.hero-full { position:relative; width:100%; background: var(--soft); }
.hero-full .hero-bleed { display:block; width:100%; max-width:1728px; height:auto; margin:0 auto; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding:22px 0 4px; }

/* Text overlay option */
.hero-full.has-overlay { max-width:1728px; margin:0 auto; }
.hero-overlay { position:absolute; inset:0; display:flex; align-items:center; --scrim:.62; }
.hero-overlay.sc-light { --scrim:.42; }
.hero-overlay.sc-medium { --scrim:.62; }
.hero-overlay.sc-strong { --scrim:.82; }
.hero-overlay .container { width:100%; }
.hero-overlay .ho-inner { max-width:560px; color:#fff; }
/* alignment variants (scrim opacity driven by --scrim) */
.hero-overlay.ov-left { background: linear-gradient(90deg, rgba(11,18,32,var(--scrim)) 0%, rgba(11,18,32,calc(var(--scrim)*.62)) 40%, rgba(11,18,32,calc(var(--scrim)*.12)) 72%, transparent 100%); }
.hero-overlay.ov-left .ho-inner { margin-right:auto; text-align:left; }
.hero-overlay.ov-center { background: linear-gradient(180deg, rgba(11,18,32,calc(var(--scrim)*.7)) 0%, rgba(11,18,32,var(--scrim)) 100%); }
.hero-overlay.ov-center .ho-inner { margin:0 auto; text-align:center; }
.hero-overlay.ov-center .d-flex { justify-content:center; }
.hero-overlay.ov-right { background: linear-gradient(270deg, rgba(11,18,32,var(--scrim)) 0%, rgba(11,18,32,calc(var(--scrim)*.62)) 40%, rgba(11,18,32,calc(var(--scrim)*.12)) 72%, transparent 100%); }
.hero-overlay.ov-right .ho-inner { margin-left:auto; text-align:right; }
.hero-overlay.ov-right .d-flex { justify-content:flex-end; }
.hero-overlay .eyebrow { color:#9DB6FF; }
.hero-overlay .eyebrow::before { background:#9DB6FF; }
.hero-overlay h1 { color:#fff; font-weight:800; font-size:clamp(1.6rem,3.4vw,2.9rem); line-height:1.18; }
.hero-overlay p { color:rgba(255,255,255,.9); }
.hero-overlay .btn-light { background:#fff; color:var(--brand); border-color:#fff; }
.hero-overlay .btn-outline-light { color:#fff; border-color:rgba(255,255,255,.7); }
.hero-overlay .btn-outline-light:hover { background:rgba(255,255,255,.14); border-color:#fff; }
/* text color: dark variant (for light backgrounds) */
.hero-overlay.txt-dark .ho-inner, .hero-overlay.txt-dark h1 { color: var(--ink); }
.hero-overlay.txt-dark p { color: var(--ink-2); }
.hero-overlay.txt-dark .eyebrow { color: var(--accent); }
.hero-overlay.txt-dark .eyebrow::before { background: var(--accent); }
.hero-overlay.txt-dark .btn-light { background: var(--brand); color:#fff; border-color: var(--brand); }
.hero-overlay.txt-dark .btn-outline-light { color: var(--brand); border-color:#C3D0E6; background:#fff; }
.hero-overlay.txt-dark .btn-outline-light:hover { background: var(--accent-tint); border-color: var(--accent); }
/* Industry full-bleed hero: edge-to-edge(이미지=배경, 경계 없음) + 컴팩트 높이(인라인 수준), 캐릭터 상반신·얼굴 유지 */
.hero-full.ind-bleed { max-width:none; }
.hero-full.ind-bleed .hero-bleed { width:100%; max-width:none; height:clamp(360px,34vw,460px); object-fit:cover; object-position:right center; }
.hero-full.ind-bleed .hero-overlay h1 { font-size:clamp(1.5rem,2.8vw,2.1rem); line-height:1.25; }
.hero-full.ind-bleed .hero-overlay .lead { font-size:1.05rem; }
@media (max-width:768px){
  .hero-full.has-overlay.ind-bleed .hero-bleed { height:340px; object-fit:cover; object-position:right center; }
}
@media (max-width:768px){
  .hero-full.has-overlay .hero-bleed { height:440px; object-fit:cover; object-position:center; }
  .hero-overlay { align-items:flex-end; }
  /* mobile always uses a bottom scrim regardless of alignment (higher specificity wins) */
  .hero-full.has-overlay .hero-overlay { background: linear-gradient(180deg, rgba(11,18,32,calc(var(--scrim)*.4)) 0%, rgba(11,18,32,calc(var(--scrim)*.68)) 45%, rgba(11,18,32,var(--scrim)) 100%); }
  .hero-overlay .ho-inner { padding-bottom:8px; }
}

/* ---------- Product dashboard mockup ---------- */
.dash { overflow:hidden; box-shadow: var(--sh-lg); }
.dash-top { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background: var(--brand); }
.dash-brand { display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:700; font-size:.9rem; }
.dash-brand .brand-mark { box-shadow:none; background: linear-gradient(135deg,var(--accent),#5B7BFF); }
.dash-dots { display:inline-flex; gap:6px; }
.dash-dots i { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); }
.dash-top { padding:10px 14px; }
.dash-body { padding:12px; background:#fff; }
.dash-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px; }
.stat { background: var(--soft); border:1px solid var(--line-2); border-radius:10px; padding:9px 10px; }
.stat-l { display:block; font-size:.7rem; color:var(--muted); font-weight:600; }
.stat-v { display:block; font-size:1.02rem; font-weight:800; color:var(--ink); margin:1px 0 4px; }
.stat-v small { font-size:.7rem; font-weight:600; color:var(--muted); margin-left:2px; }
.spark { width:100%; height:20px; }
.donut { width:36px; height:36px; }
.dash-table { border:1px solid var(--line-2); border-radius:10px; overflow:hidden; }
.dash-th, .dash-tr { display:grid; grid-template-columns: 1fr 1.2fr .9fr .7fr; gap:8px; padding:7px 12px; font-size:.76rem; align-items:center; }
.dash-th { background: var(--soft); color:var(--muted); font-weight:700; }
.dash-tr { border-top:1px solid var(--line-2); color:var(--ink-2); }
.dash-dt { color:var(--muted); }
.ta-r { text-align:right; }
.ok-pill { font-style:normal; font-size:.7rem; font-weight:700; color:var(--accent-600); background:var(--accent-tint); padding:.18em .5em; border-radius:999px; }

/* Feature card (icon + title + desc) */
.feat { display:flex; gap:14px; align-items:flex-start; }
.feat .feature-ico { width:42px; height:42px; }
.feat h4 { font-size:1rem; font-weight:700; color:var(--ink); margin:0 0 3px; }
.feat p { font-size:.88rem; color:var(--muted); margin:0; }

/* Vertical progress rail (recommend) */
.rail { list-style:none; margin:0; padding:0; position:relative; }
.rail li { position:relative; padding:0 0 22px 44px; }
.rail li:last-child { padding-bottom:0; }
.rail li::before { content:attr(data-n); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%;
  background:var(--accent-tint); color:var(--accent); font-weight:800; font-size:.85rem; display:grid; place-items:center; z-index:1; }
.rail li::after { content:""; position:absolute; left:15px; top:30px; bottom:0; width:2px; background:var(--line); }
.rail li:last-child::after { display:none; }
.rail .r-t { font-weight:700; color:var(--ink); }
.rail .r-d { font-size:.85rem; color:var(--muted); }

/* Recommend top-pick hero */
.pick-hero { background: linear-gradient(135deg, var(--brand) 0%, #2A3E6E 100%); color:#fff; border-radius:var(--r-lg); padding:22px; }
.pick-hero .ph-badge { width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,.14); display:grid; place-items:center; }
.pick-hero .ph-badge svg { width:30px; height:30px; color:#fff; }
.pick-hero .rec-pill { background:var(--accent); color:#fff; font-size:.72rem; font-weight:700; padding:.2em .6em; border-radius:999px; }
.pick-name { font-size:1.6rem; font-weight:800; color:#fff; }
.fit-chip { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.12); border-radius:999px; padding:.3em .7em; font-size:.8rem; margin:.2rem .3rem 0 0; }
.fit-chip svg { width:13px; height:13px; color:var(--accent); }

/* Filter chip bar (compare) */
.chip-bar { display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:.4em .9em; font-size:.88rem; font-weight:600; color:var(--ink-2); cursor:pointer; user-select:none; transition:all .15s var(--ease); }
.chip:hover { border-color:var(--accent); color:var(--accent); }
.chip input { display:none; }
.chip.on { background:var(--accent-tint); border-color:var(--accent); color:var(--accent-600); }
.chip svg { width:15px; height:15px; }

.legend { display:inline-flex; gap:14px; font-size:.85rem; color:var(--muted); }
.legend b { color:var(--accent-600); }
.pv-tagpill { display:inline-block; font-size:.66rem; font-weight:700; padding:.14em .5em; border-radius:999px; background:var(--accent-tint); color:var(--accent-600); margin-left:6px; vertical-align:middle; }