*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --green: #129E7B; --green-h: #1DAC86; --green-50: #EDFCF6;
  --green2: #1BBFE0; --blue: #1BBFE0; --blue-50: #F0F9FF;
  --bg: #FFFFFF; --bg2: #F7F7F5; --surface: #FFFFFF;
  --fg1: #111111; --fg2: #6B7280; --muted: #AAAAAA;
  --border: #E8E8E6;
  --font: 'Pretendard Variable','Pretendard',-apple-system,sans-serif;
  --max-w: 1400px;
  --pad-x: 40px;
}
html { scroll-behavior: smooth; }
/* overflow-x: clip → 가로 넘침은 잘라내되 스크롤 컨테이너를 만들지 않음 → position:sticky(스크롤 고정)가 정상 작동 */
body { font-family: var(--font); background: var(--bg); color: var(--fg1); -webkit-font-smoothing: antialiased; overflow-x: clip; }
html { overflow-x: clip; }
a { text-decoration: none; color: inherit; }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }

/* ── NAV ── */
nav {
  position: sticky; top: 0; z-index: 300;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(20px);
  border-bottom: 0.5px solid var(--border);
  padding: 0 var(--pad-x); height: 68px;
  display: flex; align-items: center;
}
.nav-logo { flex-shrink: 0; }
.nav-center { display: flex; align-items: center; gap: 104px; flex: 1; justify-content: center; }
.nav-btn { font-size: 15px; font-weight: 500; color: var(--fg2); padding: 8px 14px; border-radius: 9px; cursor: pointer; transition: color 150ms, background 150ms; background: none; border: none; font-family: var(--font); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.nav-btn:hover { color: var(--green); background: var(--green-50); }
.nav-btn.active { color: var(--green); background: var(--green-50); }
.nav-btn-caret { width: 10px; height: 10px; transition: transform 200ms; flex-shrink: 0; }
.nav-btn.active .nav-btn-caret { transform: rotate(180deg); }
.nav-right { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.nav-cta { padding: 11px 24px; background: var(--green); color: #fff; border: none; border-radius: 999px; font-family: var(--font); font-size: 15px; font-weight: 500; cursor: pointer; transition: background 150ms; }
.nav-cta:hover { background: var(--green-h); }
/* ── MEGA MENU ── */
.mega-wrap { position: fixed; top: 68px; left: 0; right: 0; z-index: 299; }
.mega-panel { position: relative; z-index: 2; background: #fff; border-bottom: 0.5px solid var(--border); box-shadow: 0 12px 32px rgba(0,0,0,0.07); padding: 20px 0 24px; display: none; }
.mega-wrap.open .mega-panel { display: block; animation: megaSlide 180ms ease; }
@keyframes megaSlide { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.mega-inner { max-width: var(--max-w); margin: 0 auto; position: relative; padding: 4px var(--pad-x) 20px; min-height: 20px; }
.mega-col { position: absolute; top: 0; min-width: 160px; display: none; box-sizing: border-box; padding-right: 12px; }
.mega-col:first-child { min-width: 170px; }
.mega-col .mega-item, .mega-col .mega-simple { word-break: keep-all; overflow-wrap: break-word; }
/* Show all columns when mega is open */
.mega-wrap.open .mega-col { display: block; }
/* Highlight active section label */
.mega-section-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 12px 8px; display: block; }
.mega-wrap[data-active="solution"]   .mega-col:nth-of-type(1) .mega-section-label,
.mega-wrap[data-active="case-study"] .mega-col:nth-of-type(2) .mega-section-label,
.mega-wrap[data-active="pricing"]    .mega-col:nth-of-type(3) .mega-section-label,
.mega-wrap[data-active="company"]    .mega-col:nth-of-type(4) .mega-section-label,
.mega-wrap[data-active="insights"]   .mega-col:nth-of-type(5) .mega-section-label { color: var(--green); }
.mega-item { display: block; padding: 10px 12px; border-radius: 10px; transition: background 180ms, color 180ms; color: var(--fg1); font-size: 14px; font-weight: 500; margin-bottom: 2px; line-height: 1.3; position: relative; text-decoration: none; cursor: pointer; }
.mega-item:hover { background: var(--green-50); color: var(--green); }
.mega-item:hover .mega-item-sub { color: rgba(18,158,123,0.75); }
.mega-item-sub { display: block; font-size: 12px; color: rgba(0,0,0,0.35); margin-top: 3px; font-weight: 400; transition: color 180ms; }
.mega-simple { display: block; padding: 10px 12px; border-radius: 10px; transition: background 180ms, color 180ms; font-size: 14px; font-weight: 500; color: var(--fg1); margin-bottom: 2px; text-decoration: none; cursor: pointer; }
.mega-simple:hover { background: var(--green-50); color: var(--green); }

.blog-card { display: block; background: #fff; border: 0.5px solid var(--border); border-radius: 14px; overflow: hidden; transition: border-color 200ms, transform 200ms; text-decoration: none; color: inherit; }
.blog-card:hover { border-color: rgba(18,158,123,0.35); transform: translateY(-2px); }
.blog-thumb { height: 110px; background: var(--bg2); display: flex; align-items: center; justify-content: center; color: #9CA3AF; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; position: relative; overflow: hidden; }
.blog-thumb.t1 { background: linear-gradient(135deg, #EDFCF6 0%, #DBF5E8 100%); color: var(--green); }
.blog-thumb.t2 { background: linear-gradient(135deg, #F0F9FF 0%, #DBEEFB 100%); color: #19B5FE; }
.blog-thumb.t3 { background: linear-gradient(135deg, #FFF8E1 0%, #FFE9B3 100%); color: #D97706; }
.blog-body { padding: 14px 16px 16px; }
.blog-meta { font-size: 11px; color: #9CA3AF; margin-bottom: 6px; font-weight: 500; letter-spacing: -0.01em; }
.blog-meta .cat { color: var(--green); font-weight: 700; }
.blog-title { font-size: 13px; font-weight: 700; color: var(--fg1); line-height: 1.4; letter-spacing: -0.01em; }
.blog-more { grid-column: 1 / -1; text-align: right; padding: 4px 8px 0; }
.blog-more a { font-size: 12px; color: var(--green); font-weight: 600; text-decoration: none; }
.blog-more a:hover { text-decoration: underline; }
.mega-overlay { position: fixed; inset: 0; top: 0; z-index: 1; display: none; }
.mega-wrap.open .mega-overlay { display: block; }
/* Mega preview (left animated card shown on 솔루션 hover) */
.mega-preview { display: none !important; }
.mega-wrap.open[data-active="solution"] .mega-preview { display: flex; align-items: center; justify-content: center; animation: megaFade 240ms ease; }
@keyframes megaFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.mp-card { display: none; width: 100%; padding: 24px 20px; text-align: center; border-radius: 14px; }
.mp-card.mp-active { display: block; animation: mpSwap 220ms ease; }
@keyframes mpSwap { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }
.mp-card[data-preview="data"]    { background: #F5FBF2; }
.mp-card[data-preview="lca"]     { background: #F0F9FF; }
.mp-card[data-preview="scope3"]  { background: #F5FBF2; }
.mp-card[data-preview="trace"]   { background: #F5FBF2; }
.mp-card[data-preview="verification"]  { background: #EDFCF6; }
.mp-card[data-preview="report"]  { background: #FFF8E1; }
.mp-eyebrow { font-size: 11px; font-weight: 600; color: #6B7280; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 12px; }
.mp-title { font-size: 14px; font-weight: 700; color: var(--fg1); margin-top: 16px; }
.mp-desc { font-size: 11px; color: #6B7280; margin-top: 4px; line-height: 1.5; }
/* verify: timer */
.mp-timer { font-size: 36px; font-weight: 700; letter-spacing: -1.2px; color: var(--green); line-height: 1; font-variant-numeric: tabular-nums; }
.mp-label { font-size: 12px; color: #6B7280; margin-top: 6px; }
.mp-pair { margin-top: 14px; display: flex; justify-content: center; gap: 8px; }
.mp-before { background: #fff; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: #DEDCDC; text-decoration: line-through; }
.mp-after { background: var(--green); border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: #fff; }
/* data: progress bar */
.mp-bigpct { font-size: 40px; font-weight: 700; color: var(--green); letter-spacing: -1.2px; line-height: 1; }
.mp-bar-box { background: #fff; border-radius: 10px; padding: 14px; margin-top: 14px; }
.mp-bar-row { display: flex; justify-content: space-between; font-size: 11px; color: #6B7280; margin-bottom: 8px; }
.mp-bar-row .v { color: var(--green); font-weight: 700; font-size: 13px; }
.mp-bar-track { height: 7px; background: #F5FBF2; border-radius: 999px; overflow: hidden; }
.mp-bar-fill { height: 100%; background: var(--green); border-radius: 999px; width: 0; transition: width 1.6s cubic-bezier(.4,0,.2,1); }
.mp-active .mp-bar-fill { width: var(--pct, 78%); }
.mp-hint { font-size: 10px; color: #DEDCDC; margin-top: 8px; display: flex; justify-content: space-between; }
.mp-hint .to { color: var(--green); font-weight: 600; }
/* lca: rows */
.mp-rows { display: flex; flex-direction: column; gap: 6px; }
.mp-row { display: flex; justify-content: space-between; background: #fff; border-radius: 8px; padding: 9px 12px; font-size: 12px; }
.mp-row .k { color: #6B7280; }
.mp-row .v { font-weight: 700; color: var(--fg1); }
.mp-row.total { background: #19B5FE; }
.mp-row.total .k, .mp-row.total .v { color: #fff; }
/* scope3: 3-bar breakdown */
.mp-sbar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: #fff; margin-top: 10px; }
.mp-sbar > span { display: block; height: 100%; transition: width 1.4s ease; width: 0; }
.mp-active .mp-sbar > span { width: var(--w, 33%); }
.mp-scope-legend { display: flex; justify-content: space-between; margin-top: 12px; font-size: 11px; }
.mp-scope-legend > div { text-align: center; }
.mp-scope-legend .dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 4px; vertical-align: middle; }
.mp-scope-legend .k { color: #6B7280; }
.mp-scope-legend .v { font-weight: 700; color: var(--fg1); font-size: 13px; display: block; margin-top: 2px; }
/* trace: steps */
.mp-steps { display: flex; flex-direction: column; gap: 6px; }
.mp-step { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 8px; padding: 9px 11px; font-size: 12px; font-weight: 500; }
.mp-step .chk { width: 16px; height: 16px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0; transform: scale(.4); transition: opacity 260ms, transform 260ms; }
.mp-step.done .chk { opacity: 1; transform: scale(1); }
.mp-step.current { background: #EDFCF6; border: 0.5px solid rgba(18,158,123,.25); color: var(--green); }
.mp-step.current .chk { background: #fff; border: 1.5px solid var(--green); opacity: 1; transform: scale(1); }
.mp-step.current .chk::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: mpPulse 1.2s ease-in-out infinite; }
@keyframes mpPulse { 0%,100% { opacity: .3; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
/* report: badges */
.mp-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.mp-badge { background: #fff; border-radius: 8px; padding: 6px 12px; font-size: 11px; font-weight: 700; color: #6B7280; opacity: 0; transform: translateY(4px); transition: opacity 300ms, transform 300ms, background 300ms, color 300ms; }
.mp-active .mp-badge { opacity: 1; transform: translateY(0); }
.mp-active .mp-badge:nth-child(1) { transition-delay: 60ms; }
.mp-active .mp-badge:nth-child(2) { transition-delay: 140ms; }
.mp-active .mp-badge:nth-child(3) { transition-delay: 220ms; }
.mp-active .mp-badge:nth-child(4) { transition-delay: 300ms; background: #D97706; color: #fff; }
.mp-active .mp-badge:nth-child(5) { transition-delay: 380ms; }
.mp-report-pill { display: inline-block; margin-top: 14px; background: var(--green); color: #fff; border-radius: 999px; padding: 6px 14px; font-size: 11px; font-weight: 700; }
.nav-right { display: flex; align-items: center; gap: 24px; }
.nav-cta { padding: 10px 22px; background: var(--green); color: #fff; border: none; border-radius: 999px; font-family: var(--font); font-size: 15px; font-weight: 500; cursor: pointer; transition: background 150ms; }
.nav-cta:hover { background: var(--green-h); }

/* ── HERO ── */
.hero-wrap {
  position: relative; overflow: hidden; min-height: 100vh ; padding-top: 68px;
  display: flex; flex-direction: column; justify-content: flex-start;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5FDF9 70%, #EDFCF6 100%);
}
.hero-wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 900px 500px at 15% 100%, rgba(18,158,123,0.14) 0%, transparent 70%),
    radial-gradient(ellipse 700px 400px at 85% 95%, rgba(118,190,87,0.12) 0%, transparent 72%);
}
.hero-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 500px 280px at 10% 85%, rgba(18,158,123,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 520px 300px at 92% 78%, rgba(118,190,87,0.09) 0%, transparent 70%);
  mix-blend-mode: multiply;
}
/* mouse-follow glow overlay */
#heroGlow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity 400ms ease;
  background: radial-gradient(circle 480px at 50% 50%, rgba(18,158,123,0.18) 0%, transparent 70%);
}
.hero-wrap:hover #heroGlow { opacity: 1; }
.hero { max-width: var(--max-w); margin: 0 auto; padding: 100px var(--pad-x) 48px; text-align: center; position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; flex: 1; justify-content: flex-start; gap: 32px; }

@media (min-width: 1920px) {
  .hero { gap: 50px; }
}
.hero-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--green-50); border: 0.5px solid rgba(18,158,123,0.2); border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 500; color: var(--green); margin-bottom: 24px; }
.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulseGreen 1.6s ease-out infinite; }
.hero h1 { font-size: 56px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--fg1); margin-bottom: 0; }
.hero h1 .muted { color: var(--muted); display: block; margin-top: 10px; }

.hero-lead { font-size: 20px; color: var(--fg2); line-height: 1.65; margin-top: 18px; font-weight: 500; letter-spacing: -0.2px; }
.hero-lead .hl { color: var(--green); }

/* Stage with chart cards */
.hero-stage { position: relative; max-width: var(--max-w); margin: 0 auto; padding: 0; width: 100%; }
.hero-cards { display: grid; grid-template-columns: 1fr 1.45fr 1fr; gap: 24px; align-items: end; }
.hero-card {
  background: #fff; border: 0.5px solid var(--border); border-radius: 22px;
  padding: 24px; text-align: left; position: relative; overflow: hidden;
  box-shadow: 0 20px 60px rgba(16, 98, 73, 0.12), 0 4px 14px rgba(0,0,0,0.04);
  opacity: 0; transform: translateY(44px);
  animation: floatUp 900ms cubic-bezier(0.34,1.2,0.64,1) forwards;
}
.hero-card.card-l { animation-delay: 200ms; height: 440px; }
.hero-card.card-c { animation-delay: 120ms; height: 480px; }
.hero-card.card-r { animation-delay: 320ms; height: 440px; }

/* Card top bar (mock window chrome) */
.hc-topbar { display: none; }
.hc-dot { width: 9px; height: 9px; border-radius: 50%; }

/* Card L — multi-series line chart */
.hc-line-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.hc-line-title { font-size: 13px; color: var(--fg2); font-weight: 500; }
.hc-line-chip { font-size: 10px; font-weight: 600; color: var(--green); background: var(--green-50); padding: 3px 8px; border-radius: 999px; }
.hc-linechart { position: relative; height: 190px; margin: 6px 0 14px; }
.hc-linechart svg { width: 100%; height: 100%; overflow: visible; display: block; }
.hc-grid { stroke: #F0F0EE; stroke-width: 0.5; }
.hc-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: lineDraw 1.8s cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes lineDraw { to { stroke-dashoffset: 0; } }
.hc-line-dot { fill: #fff; stroke-width: 2; opacity: 0; animation: dotPop 300ms ease forwards; }
@keyframes dotPop { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
.hc-line-dot { transform-origin: center; transform-box: fill-box; }
.hc-yaxis { position: absolute; left: -4px; top: 0; bottom: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 9px; color: var(--muted); text-align: right; }
.hc-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; margin-top: 6px; }
.hc-legend-chip { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--fg2); }
.hc-legend-swatch { width: 10px; height: 3px; border-radius: 2px; flex-shrink: 0; }

/* Card R — process flow diagram */
.hc-flow-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.hc-flow-wrap { position: relative; padding: 6px 0; }
.hc-flow-svg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hc-flow-line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
.hc-flow-line.active { stroke: var(--green); animation: flowDash 1.2s linear infinite; }
@keyframes flowDash { to { stroke-dashoffset: -14; } }
.hc-flow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; position: relative; z-index: 1; }
.hc-flow-node { background: #fff; border: 0.5px solid var(--border); border-radius: 10px; padding: 10px 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); font-size: 11px; opacity: 0; transform: translateY(8px); animation: nodeAppear 500ms cubic-bezier(0.34,1.2,0.64,1) forwards; position: relative; }
.hc-flow-node.n1 { animation-delay: 400ms; }
.hc-flow-node.n2 { animation-delay: 600ms; }
.hc-flow-node.n3 { animation-delay: 800ms; }
.hc-flow-node.n4 { animation-delay: 1000ms; }
.hc-flow-node-title { font-size: 11px; font-weight: 700; color: var(--fg1); margin-bottom: 4px; }
.hc-flow-node-sub { font-size: 9px; color: var(--muted); font-family: ui-monospace,monospace; margin-bottom: 8px; }
.hc-flow-node-tag { display: inline-block; background: var(--blue-50); color: var(--blue); font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 4px; margin-bottom: 6px; }
.hc-flow-node-stats { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; border-top: 0.5px solid var(--bg2); }
.hc-flow-node-pass { font-size: 8px; font-weight: 700; color: var(--green); background: var(--green-50); padding: 2px 6px; border-radius: 4px; letter-spacing: 0.02em; }
.hc-flow-node-pass.fail { color: #DC2626; background: #FEE2E2; animation: shakeFail 600ms ease-in-out 1.2s; }
@keyframes shakeFail { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-2px)} 50%{transform:translateX(2px)} 75%{transform:translateX(-2px)} }
.hc-flow-bar { height: 3px; background: var(--bg2); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.hc-flow-fill { height: 100%; background: var(--green); border-radius: 999px; width: 0; animation: flowFill 1.2s ease forwards; }
@keyframes flowFill { to { width: var(--w, 80%); } }
@keyframes nodeAppear { to { opacity: 1; transform: translateY(0); } }

/* Card C — big bar chart dashboard */
.hc-chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.hc-chart-pill { font-size: 11px; font-weight: 600; background: var(--green-50); color: var(--green); padding: 5px 12px; border-radius: 999px; }
.hc-chart-pill.lf { animation: liveFlash 2.4s ease-in-out infinite; }
.hc-chart-title { font-size: 13px; color: var(--fg2); font-weight: 500; }
.hc-bars { display: flex; gap: 6px; align-items: flex-end; height: 170px; margin-bottom: 10px; padding: 0 2px; }
.hc-bar { flex: 1; border-radius: 5px 5px 0 0; transform-origin: bottom; transform: scaleY(0); transition: transform 1100ms cubic-bezier(0.16,0.84,0.32,1); position: relative; will-change: transform; backface-visibility: hidden; }
.hc-bar.bar-in { transform: scaleY(1); }
.hc-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 6px; background: inherit; border-radius: 5px 5px 0 0; opacity: 0.35; }
.hc-xaxis { display: flex; gap: 7px; margin-bottom: 22px; padding: 0 2px; }
.hc-xaxis > div { flex: 1; font-size: 9px; color: var(--muted); text-align: center; }
.hc-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 10px; }
.hc-stat { background: var(--bg2); border-radius: 12px; padding: 12px 14px; }
.hc-stat-lbl { font-size: 10px; color: var(--fg2); font-weight: 500; letter-spacing: 0.02em; }
.hc-stat-val { font-size: 16px; font-weight: 700; letter-spacing: -0.5px; margin-top: 4px; }
.hc-stat-delta { font-size: 10px; font-weight: 600; margin-top: 3px; }

/* Card R — animated step list */
.hc-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.hc-list-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg2); border-radius: 12px; border: 0.5px solid transparent; transition: all 400ms ease; }
.hc-list-row.active { background: var(--green-50); border-color: rgba(18,158,123,0.25); }
.hc-list-circle { width: 20px; height: 20px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 300ms; }
.hc-list-row.done .hc-list-circle { background: var(--green); }
.hc-list-row.active .hc-list-circle { background: transparent; border: 1.5px solid var(--green); animation: pulseRing 1.8s ease-out infinite; }
.hc-list-circle svg { width: 11px; height: 11px; display: none; }
.hc-list-row.done .hc-list-circle svg { display: block; }
.hc-list-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.6); border-radius: 999px; overflow: hidden; }
.hc-list-fill { height: 100%; background: var(--green); border-radius: 999px; width: 0%; transition: width 700ms ease; }
.hc-list-row.done .hc-list-fill { width: 100%; }
.hc-list-row.active .hc-list-fill { width: 55%; animation: listProg 1.8s ease-in-out infinite; }
@keyframes listProg { 0%,100%{width:35%} 50%{width:75%} }
.hc-donut { display: flex; align-items: center; justify-content: center; margin: 18px 0 8px; position: relative; height: 132px; }
.hc-donut svg { width: 132px; height: 132px; transform: rotate(-90deg); }
.hc-donut-seg { fill: none; stroke-width: 14; stroke-linecap: butt; }
.hc-donut-lbl { position: absolute; font-size: 22px; font-weight: 700; letter-spacing: -0.8px; color: var(--fg1); }
.hc-legend { display: flex; justify-content: space-around; margin-top: 8px; }
.hc-legend-item { text-align: center; }
.hc-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: middle; }
.hc-legend-val { font-size: 14px; font-weight: 700; color: var(--fg1); letter-spacing: -0.3px; }
.hc-legend-lbl { font-size: 10px; color: var(--fg2); margin-top: 2px; }

@keyframes floatUp { 0% { opacity: 0; transform: translateY(44px); } 100% { opacity: 1; transform: translateY(0); } }

.hero-cta-section { padding: 96px var(--pad-x) 100px; text-align: center; background: #fff; border-top: 0.5px solid var(--border); }
.hero-sub { font-size: 30px; color: var(--fg1); line-height: 1.45; max-width: 1000px; margin: 0 auto 40px; font-weight: 600; letter-spacing: -0.8px; }
.hero-sub .hl { color: var(--green); }
.hero-sub .brand-logo { display: inline-block; height: 0.95em; vertical-align: -0.12em; margin: 0 2px; }
.hero-btns { display: flex; gap: 12px; margin-bottom: 0; justify-content: center; }
.btn-primary { padding: 15px 32px; background: var(--green); color: #fff; border: 1px solid var(--green); border-radius: 999px; font-family: var(--font); font-size: 16px; font-weight: 500; cursor: pointer; transition: background 150ms, border-color 150ms; line-height: 1.2; }
.btn-primary:hover { background: var(--green-h); border-color: var(--green-h); }
.btn-ghost { padding: 15px 32px; background: transparent; color: var(--green); border: 1px solid var(--green); border-radius: 999px; font-family: var(--font); font-size: 16px; font-weight: 500; cursor: pointer; transition: border-color 150ms, color 150ms; line-height: 1.2; }
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
/* Paired buttons (side-by-side filled/line) */
.cta-btns .btn-primary, .cta-btns .btn-ghost,
.hero-btns .btn-primary, .hero-btns .btn-ghost { font-size: 16px; padding: 16px 36px; min-width: 180px; }
.hero-stats { display: flex; gap: 56px; padding-top: 36px; border-top: 0.5px solid var(--border); }
.hero-stat-val { font-size: 32px; font-weight: 700; letter-spacing: -0.8px; color: var(--fg1); }
.hero-stat-lbl { font-size: 13px; color: var(--fg2); margin-top: 3px; }

/* Dashboard Mockup */
.hero-mockup { margin: 0 auto; background: #fff; border: 0.5px solid var(--border); border-radius: 20px; overflow: hidden; padding: 24px 28px 22px; box-shadow: 0 20px 60px rgba(16, 98, 73, 0.10), 0 4px 14px rgba(0,0,0,0.04); opacity: 0; transform: translateY(60px); animation: floatUp 900ms cubic-bezier(0.34,1.2,0.64,1) 150ms forwards; position: relative; z-index: 1; }
.mock-topbar { display: flex; gap: 7px; margin-bottom: 24px; }
.mock-dot { width: 11px; height: 11px; border-radius: 50%; }
.mock-titlerow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.mock-badge { font-size: 12px; font-weight: 500; background: var(--green-50); color: var(--green); padding: 4px 12px; border-radius: 999px; }
.mock-chart { display: flex; gap: 6px; align-items: flex-end; height: 110px; margin-bottom: 12px; }
.mock-bar { flex: 1; border-radius: 4px 4px 0 0; transform-origin: bottom; animation: growUp 700ms cubic-bezier(0.34,1.2,0.64,1) both; }
.mock-months { display: flex; gap: 6px; margin-bottom: 24px; }
.mock-month { flex: 1; font-size: 10px; color: var(--muted); text-align: center; }
.mock-scopes { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.mock-scope { background: var(--bg2); border-radius: 12px; padding: 16px; }
.mock-scope-val { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }
.mock-scope-lbl { font-size: 12px; color: var(--fg2); margin-top: 3px; }
.mock-scope-delta { font-size: 12px; font-weight: 500; margin-top: 8px; }

/* ── TICKER ── */
.ticker { border-top: 0.5px solid var(--border); border-bottom: 0.5px solid var(--border); background: var(--bg2); overflow: hidden; padding: 20px 0; }
.ticker-track { display: flex; gap: 72px; white-space: nowrap; animation: tickerSlide 24s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }
.ticker-item { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: -0.2px; }
@keyframes tickerSlide { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* ── CONVERGENCE SECTION ── */
.converge-section { padding: 160px var(--pad-x); background: var(--bg2); border-bottom: 0.5px solid var(--border); overflow: hidden; }
.converge-head { text-align: center; margin-bottom: 80px; }
.converge-head .sh { font-size: 60px; font-weight: 700; letter-spacing: -1.8px; line-height: 1.3; color: var(--fg1); }
.converge-head .sm { font-size: 60px; font-weight: 700; letter-spacing: -1.8px; line-height: 1.3; color: var(--muted); }
.converge-sub { font-size: 20px; color: var(--fg2); line-height: 1.65; max-width: 780px; margin: 32px auto 0; font-weight: 500; letter-spacing: -0.3px; }
.mb-br { display: none; } /* 모바일 전용 줄바꿈 (데스크탑은 숨김) */
.converge-sub .hl { color: var(--green); font-weight: 600; }
.converge-btns { display: flex; justify-content: center; gap: 14px; margin-top: 32px; }
.converge-btns .btn-ghost { background: #fff; min-width: 180px; padding: 16px 36px; }
.converge-stage { position: relative; max-width: 900px; margin: 0 auto; height: 560px; display: flex; align-items: center; justify-content: center; }
.converge-center { background: #fff; border: 0.5px solid var(--border); border-radius: 20px; padding: 28px; width: 380px; box-shadow: 0 8px 48px rgba(0,0,0,0.07); z-index: 10; position: relative; }
.converge-center-title { font-size: 13px; font-weight: 700; color: var(--fg1); margin-bottom: 16px; }
.conv-bar-row { margin-bottom: 12px; }
.conv-bar-label { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; }
.conv-bar-track { height: 7px; background: var(--bg2); border-radius: 999px; overflow: hidden; }
.conv-bar-fill { height: 7px; border-radius: 999px; }
.conv-scopes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 16px; }
.conv-scope { background: var(--bg2); border-radius: 8px; padding: 10px; text-align: center; }
.conv-scope-v { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; }
.conv-scope-l { font-size: 10px; color: var(--fg2); margin-top: 2px; }

/* Floating cards */
.float-card {
  position: absolute; background: #fff; border: 0.5px solid var(--border);
  border-radius: 14px; padding: 18px 22px;
  width: 300px; min-height: 116px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06); z-index: 20;
  display: flex; align-items: center; gap: 14px;
  animation: floatHover 3s ease-in-out infinite;
}
.float-card > div:last-child { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; }
.float-card .fc-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.float-card .fc-icon svg { width: 22px; height: 22px; }
.float-card .fc-title { font-size: 20px; font-weight: 600; color: var(--fg1); letter-spacing: -0.03em; line-height: 1.3; }
.float-card .fc-sub { font-size: 14px; color: var(--fg2); margin-top: 4px; letter-spacing: -0.02em; line-height: 1.35; }
.float-card .fc-pill { font-size: 12px; font-weight: 500; padding: 4px 11px; border-radius: 999px; background: var(--green-50); color: var(--green); margin-top: 8px; letter-spacing: -0.01em; display: inline-block; align-self: flex-start; }

/* Float positions & delays */
.fc-1 { top: 30px;    left: -60px;  animation-delay: 0s;    animation-duration: 3.2s; }
.fc-2 { top: 30px;    right: -60px; animation-delay: 0.8s;  animation-duration: 3.5s; }
.fc-3 { bottom: 30px; left: -60px;  animation-delay: 0.4s; animation-duration: 2.8s; }
.fc-4 { bottom: 30px; right: -60px; animation-delay: 1.2s; animation-duration: 3.1s; }
.fc-5 { top: 50%; left: -140px; transform: translateY(-50%); animation-delay: 0.6s; animation-duration: 3.4s; }
.fc-6 { top: 50%; right: -140px; transform: translateY(-50%); animation-delay: 1s; animation-duration: 2.9s; }

/* Connection lines SVG */
.converge-lines { position: absolute; inset: 0; pointer-events: none; z-index: 5; }

@keyframes floatHover {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.fc-5 { animation-name: floatHoverH; }
.fc-6 { animation-name: floatHoverH; }
@keyframes floatHoverH {
  0%,100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(6px); }
}

/* Animated connection dots */
@keyframes dashMove {
  from { stroke-dashoffset: 200; }
  to   { stroke-dashoffset: 0; }
}
.conn-line { stroke: var(--green); stroke-width: 1.6; fill: none; stroke-dasharray: 5 7; opacity: 0.7; animation: dashMove 3s linear infinite; }

/* ── SCROLL FEATURES (네이티브 sticky 스크롤리텔링) ── */
/* 섹션을 길게(500vh) 만들고, 그 안의 .scroll-pin이 100vh로 sticky 고정됨.
   페이지를 정상 스크롤하면 진행도에 따라 JS가 패널을 1→5 / 5→1 자연 전환 (휠 가로채기 없음). */
.scroll-section { padding: 0; position: relative; height: 500vh; }
.scroll-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
/* 콘텐츠 그룹[제목 + 간격 + 행]을 화면(100vh) 세로 정중앙에 배치. gap = 제목과 행 사이 간격(데스크탑 ~100px, 작은 화면은 vh 비율). */
.scroll-stage { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: clamp(40px, 11vh, 100px); }
.scroll-layout { max-width: var(--max-w); width: 100%; margin: 0 auto; padding: 0 var(--pad-x); display: grid; grid-template-columns: 1fr 1.2fr; gap: 96px; align-items: center; }
.scroll-left { display: flex; flex-direction: column; gap: 16px; padding-top: 0; padding-bottom: 0; }
.scroll-left-title { text-align: center; max-width: var(--max-w); width: 100%; margin: 0 auto; padding: 0 var(--pad-x); }
.scroll-left-title .sh { font-size: 50px; font-weight: 800; letter-spacing: -1px; line-height: 1.15; color: var(--fg1); white-space: nowrap; }
.scroll-left-title .th-muted { color: var(--muted); }
.scroll-left-head .sh { font-size: 54px; font-weight: 700; letter-spacing: -1.4px; line-height: 1.1; color: var(--fg1); }
.scroll-left-head .sm { font-size: 54px; font-weight: 700; letter-spacing: -1.4px; line-height: 1.1; color: var(--muted); }
.feat-list { display: flex; flex-direction: column; gap: 20px; }
.feat-item { cursor: pointer; padding: 0; transition: all 300ms ease; display: flex; flex-direction: column; justify-content: center; }
/* Inactive: 컴팩트 타이틀만 (gray) */
.feat-item .fi-eyebrow,
.feat-item .fi-title-row,
.feat-item .fi-sub { display: none; }
.feat-item .fi-compact { display: block; font-size: 26px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; color: var(--muted); transition: color 200ms; }
/* Active: 풀 정보 표시 + 컴팩트 숨김 */
.feat-item.active .fi-eyebrow { display: block; font-size: 13px; font-weight: 600; color: var(--green); letter-spacing: 0.02em; margin-top: 24px; margin-bottom: 12px; }
.fp-eyebrow { display: block; font-size: 13px; font-weight: 600; color: var(--green); letter-spacing: 0.02em; margin-bottom: 12px; }
.feat-item.active .fi-title-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.feat-item.active .fi-title { font-size: 32px; font-weight: 700; color: var(--fg1); letter-spacing: -0.8px; line-height: 1.2; }
.feat-item.active .fi-link { font-size: 14px; font-weight: 600; color: var(--green); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; text-decoration: none; padding: 5px 14px; border-radius: 999px; border: 1.5px solid var(--green); transition: background 150ms, color 150ms; }
.feat-item.active .fi-link:hover { background: var(--green); color: #fff; }
.feat-item.active .fi-sub { display: block; font-size: 18px; color: var(--fg2); font-weight: 500; line-height: 1.5; margin-top: 20px; margin-bottom: 24px; }
.feat-item.active .fi-compact { display: none; }
/* Hover effect on inactive */
.feat-item:not(.active):hover .fi-compact { color: var(--fg2); }
/* 우측 패널의 fp-head 숨김 (정보는 이미 좌측에 표시됨) */
.scroll-section .fp-head { display: none !important; }
.scroll-right { position: relative; overflow: hidden; }

/* 탄소관리 섹션: 상단 중앙 제목 + 패널 헤더 재구성 */
.scroll-top-head { text-align: center; max-width: var(--max-w); margin: 0 auto; padding: 60px var(--pad-x) 0; }
.scroll-top-head .sh { font-size: 54px; font-weight: 700; letter-spacing: -1.4px; line-height: 1.15; color: var(--fg1); }
.scroll-top-head .th-muted { color: var(--muted); }
.fp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fp-head-num { font-size: 13px; font-weight: 600; color: var(--green); letter-spacing: 0.02em; margin-bottom: 10px; }
.fp-head-title { font-size: 28px; font-weight: 700; color: var(--fg1); letter-spacing: -0.6px; line-height: 1.25; display: inline; }
.fp-head-title-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
.fp-head-sub { font-size: 16px; color: var(--fg2); font-weight: 500; line-height: 1.5; margin-top: 10px; }
.fp-head-link {font-size: 14px; font-weight: 600; color: var(--green); display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap; opacity: .85; transition: opacity 150ms; text-decoration: none; }
.fp-head-link:hover { opacity: 1; }
/* 패널: 5개 stack — 각 100vh, 비활성은 opacity:0 + pointer-events:none (layout 유지하여 IntersectionObserver 정상 동작) */
.feat-panels-container { position: relative; height: 100%; }
.feat-panel { position: absolute; inset: 0; display: flex; align-items: center; padding: 0; opacity: 0; pointer-events: none; transition: opacity 350ms ease; overflow: hidden; }
.feat-panel .fp-eyebrow { display: none; }
.feat-panel img { max-height: 100%; object-fit: contain; }
.feat-panel.active { opacity: 1; pointer-events: auto; }
.feat-panel > * { transform: none; }
.feat-card { background: #fff; border: 0.5px solid var(--border); border-radius: 20px; padding: 36px; width: 100%; box-shadow: 0 2px 24px rgba(0,0,0,0.03); }
.feat-card-head { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg2); margin-bottom: 20px; }
.feat-card-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 0.5px solid var(--bg2); }
.feat-card-row:last-child { border-bottom: none; }
.feat-card-label { font-size: 14px; color: var(--fg2); }
.feat-card-val { font-size: 14px; font-weight: 600; color: var(--fg1); }
.pill { font-size: 11px; font-weight: 500; padding: 4px 12px; border-radius: 999px; }
.pill-g { background: var(--green-50); color: var(--green); }
.pill-b { background: var(--blue-50); color: var(--blue); }
.pill-y { background: #FFF8E1; color: #D97706; }
.feat-bar-track { height: 7px; background: var(--bg2); border-radius: 999px; overflow: hidden; }
.feat-bar-fill { height: 7px; border-radius: 999px; background: var(--green); }
.feat-sub { font-size: 13px; color: var(--fg2); margin-top: 6px; }
.feat-step { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 0.5px solid var(--bg2); }
.feat-step:last-child { border-bottom: none; }
.step-circle { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step-circle.done { background: var(--green); }
.step-circle.active-step { background: var(--green-50); border: 1.5px solid var(--green); animation: pulseRing 1.8s ease-out infinite; }
.step-circle.idle { background: var(--border); }
.step-txt { font-size: 14px; color: var(--fg1); }

/* ── BENTO GRID ── */
/* .bento-section { padding: 140px 140px; background: var(--bg2) } */
.bento-section { padding: 140px 0; background: var(--bg2); min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.bento-inner { max-width: var(--max-w); width: 100%; margin: 0 auto; padding: 0 var(--pad-x); }
.bento-head { margin-bottom: 72px; }
.bento-head .sh { font-size: 60px; font-weight: 700; letter-spacing: -2px; line-height: 1.3; color: var(--fg1); }
.bento-head .sm { font-size: 60px; font-weight: 700; letter-spacing: -2px; line-height: 1.3; color: var(--muted); }
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bento-card { background: #fff; border: 0.5px solid var(--border); border-radius: 20px; overflow: hidden; transition: transform 200ms ease, border-color 200ms; cursor: default; transform-style: preserve-3d; will-change: transform; }
.bento-card:hover { border-color: rgba(18,158,123,0.35); transform: translateY(-3px); }
.bento-preview { height: 260px; padding: 28px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.bento-body { padding: 24px 28px 28px; border-top: 0.5px solid var(--border); }
.bento-title { font-size: 24px; font-weight: 700; color: var(--fg1); margin-bottom: 8px; }
.bento-desc { font-size: 16px; color: var(--fg2); line-height: 1.7; display: flex; align-items: flex-start; gap: 6px; }
.bento-desc::before { content: ''; display: inline-block; flex-shrink: 0; width: 16px; height: 16px; margin-top: 4px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; }

/* ── STATS (light, gauge style) ── */
.stats-section {
  padding: 140px 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 35%, #F5FDF9 65%, #DBF5E8 100%);
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  position: relative;
  overflow: hidden;
}
.stats-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 900px 480px at 22% 110%, rgba(18,158,123,0.28) 0%, rgba(18,158,123,0.06) 45%, transparent 70%),
    radial-gradient(ellipse 1000px 520px at 78% 105%, rgba(118,190,87,0.22) 0%, rgba(118,190,87,0.04) 48%, transparent 72%),
    radial-gradient(ellipse 700px 360px at 50% 120%, rgba(29,172,134,0.18) 0%, transparent 68%);
}
.stats-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); position: relative; z-index: 1; }
.stats-title { font-size: 56px; font-weight: 700; letter-spacing: -1.8px; line-height: 1.15; color: var(--green); margin-bottom: 56px; text-align: center; }
.stats-title .fg1 { color: var(--fg1); }

/* highlight callout */
.stats-highlight { display: grid; grid-template-columns: 1.1fr 1fr; gap: 15px; background: var(--bg2); border: 2px; border-color: var(--green-50); border-radius: 20px; padding: 32px 40px; margin-bottom: 0; align-items: center; box-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 1px 0 rgba(255,255,255,0.8) inset; }
.highlight-val-row { display: flex; align-items: baseline; gap: 8px; }
.highlight-num { font-size: 64px; font-weight: 700; color: var(--green); line-height: 1; }
.highlight-suffix { font-size: 28px; font-weight: 700; color: var(--green); letter-spacing: -0.8px; }
.highlight-label-after { font-size: 30px; font-weight: 700; color: var(--fg1); margin-left: 150px; letter-spacing: -0.03em; margin-right: 20px; }
.highlight-desc { font-size: 14px; color: var(--fg2); line-height: 1.55; margin-top: 12px; margin-left: 150px;}
.highlight-visual { display: flex; flex-direction: column; gap: 18px; margin-left: -30px; }
.hv-row { display: flex; align-items: center; gap: 15px; }
.hv-label { font-size: 15px; font-weight: 500; color: var(--fg2); width: 55px; flex-shrink: 0; text-align: center;}
.hv-track { width: 300px; flex: none; height: 10px; background: rgba(18,158,123,0.12); border-radius: 999px; overflow: hidden; }
.hv-fill { height: 100%; background: var(--green); border-radius: 999px; width: 0; transition: width 1.4s cubic-bezier(0.4,0,0.2,1); }
.hv-val { font-size: 17px; font-weight: 700; color: var(--fg1); width: 44px; text-align: right; letter-spacing: -0.02em; }

/* gauge grid */
.gauge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 56px; margin-top: 20px; }
.gauge-card { background: #fff; border: 0.5px solid var(--border); border-radius: 20px; padding: 40px 32px 36px; text-align: center; transition: transform 300ms ease, box-shadow 300ms ease; box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.9) inset; }
.gauge-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.10), 0 1px 0 rgba(255,255,255,0.9) inset; }
.gauge-wrap { position: relative; width: 168px; height: 168px; margin: 0 auto 24px; }
.gauge { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge-track { fill: none; stroke: var(--bg2); stroke-width: 10; }
.gauge-fill { fill: none; stroke: var(--green); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1.6s cubic-bezier(0.4,0,0.2,1); }
.gauge-val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; font-size: 38px; font-weight: 700; letter-spacing: -1.3px; color: var(--fg1); line-height: 1; white-space: nowrap; }
.gauge-val .pct { font-size: 22px; font-weight: 700; color: var(--fg1); margin-left: 1px; letter-spacing: -0.3px; }
.gauge-val .suffix { font-size: 14px; font-weight: 600; color: var(--fg2); margin-left: 4px; letter-spacing: -0.2px; }
.gauge-val .trend { font-size: 16px; font-weight: 700; color: var(--green); margin-left: 2px; letter-spacing: -0.2px; }
.gauge-eyebrow { font-size: 13px; color: var(--green); font-weight: 600; letter-spacing: 0.04em; margin-bottom: 8px; }
.gauge-title { font-size: 20px; font-weight: 700; color: var(--fg1); letter-spacing: -0.03em; margin-bottom: 24px; }
.gauge-detail { display: flex; justify-content: center; align-items: baseline; gap: 10px; padding-top: 20px; border-top: 0.5px solid var(--border); }
.gauge-detail .before { font-size: 18px; color: var(--muted); font-weight: 600; text-decoration: line-through; }
.gauge-detail .arrow { color: var(--muted); font-size: 16px; }
.gauge-detail .after { font-size: 22px; color: var(--green); font-weight: 700; letter-spacing: -0.03em; }
.gauge-detail .unit { font-size: 13px; color: var(--fg2); margin-left: 2px; font-weight: 500; }

/* 도입 후 효과: before→after 감축 바차트 */
.bar-card { background: #fff; border: 0.5px solid var(--border); border-radius: 20px; padding: 32px 28px 28px; text-align: center; transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease; }
.bar-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.06); border-color: rgba(18,158,123,0.25); }
.bar-title { display: inline-block; font-size: 20px; font-weight: 700; color: var(--fg1); background: var(--bg2); border: 0.5px solid var(--border); border-radius: 999px; padding: 8px 20px; margin-bottom: 22px; letter-spacing: -0.2px; text-align: center; }
.bar-chart { position: relative; height: 180px; display: flex; align-items: flex-end; justify-content: space-around; padding: 0 26px; }
.bar-item { width: 60px; height: 100%; position: relative; }
.bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 0; border-radius: 9px 9px 0 0; }
.bar-before { background: #E8EAED; transition: height 900ms cubic-bezier(0.34,1,0.64,1) 200ms; }
.bar-after { background: var(--green); }
.bar-card.in-view .bar-before { height: var(--h); }
/* 초록 바: 회색 바와 같은 높이(92%)에서 시작해 목표값으로 줄어듦 */
.bar-card.in-view .bar-after { animation: barShrink 1200ms cubic-bezier(0.4,0,0.2,1) 300ms both; }
@keyframes barShrink {
  0%   { height: 92%; }
  100% { height: var(--h); }
}
.bar-cut { position: absolute; bottom: calc(var(--bar-h) + 10px); left: 71%; transform: translateX(-50%); display: flex; align-items: baseline; justify-content: center; font-size: 30px; font-weight: 800; color: var(--green); line-height: 1; opacity: 0; z-index: 3; white-space: nowrap; }
.bar-cut span { font-size: 17px; font-weight: 800; margin-left: 1px; }
.bar-cut em { font-size: 14px; font-weight: 700; color: var(--muted); font-style: normal; margin-left: 4px; }

/* 초록 bar 가 올라올 때(delay 250ms, duration 1100ms) 동시에 등장 — 같은 delay 250ms */
.bar-card.in-view .bar-cut { animation: barCutIn 500ms ease 1500ms forwards; }
@keyframes barCutIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.bar-foot { display: flex; justify-content: space-around; padding: 16px 26px 0; margin-top: 16px; border-top: 0.5px solid var(--border); }
.bar-foot-col { width: 60px; text-align: center; }
.bf-name { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; display: inline-block; }
.bf-name.before-label { background: #F3F4F6; color: var(--fg2); }
.bf-name.after-label { background: var(--green); color: var(--bg); }
.bf-val.before { color: var(--muted); margin-top: 10px; }
.bf-val.after { color: var(--green); margin-top: 10px; }

.stats-cta-wrap { text-align: center; }
.stats-cta { padding: 15px 32px; background: var(--green); color: #fff; border: none; border-radius: 999px; font-family: var(--font); font-size: 15px; font-weight: 500; cursor: pointer; transition: background 100ms, transform 100ms; display: inline-flex; align-items: center; gap: 10px; }

/* ── CUSTOMERS ── */
.customers-section { padding: 80px 0 80px; }
.customers-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }
.customers-section .logo-marquee { margin-left: clamp(80px,10vw,160px); margin-right: clamp(80px,10vw,160px); }
.customers-head .sh { font-size: 40px; font-weight: 700; line-height: 1.3; color: var(--fg1); text-align: center; }
.customers-head .sm { font-size: 40px; font-weight: 700; line-height: 1.3; color: var(--green); margin-bottom: 56px; text-align: center; }

/* Marquee logo ticker */
.logo-marquee { position: relative; overflow: hidden; padding: 8px 0; margin: 0 clamp(40px,6vw,80px) 18px; }
.logo-marquee::before, .logo-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.logo-marquee::before { left: 0; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%); }
.logo-marquee::after { right: 0; background: linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%); }
.logo-track { display: flex; gap: 88px; white-space: nowrap; animation: logoSlide 38s linear infinite; width: max-content; align-items: center; }
.logo-track.reverse { animation-direction: reverse; animation-duration: 46s; gap: 80px; }
/* .logo-track:hover { animation-play-state: paused; } */
.logo-item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; height: 128px; padding: 0 22px; }
.logo-item img { max-height: 96px; max-width: 280px; width: auto; height: auto; object-fit: contain; transition: transform 300ms ease, opacity 300ms ease; }
.logo-item:hover img { transform: translateY(-2px); }

/* Partner logos — original color, slightly smaller than customer logos */
.logo-track.reverse .logo-item { height: 104px; padding: 0 18px; }
.logo-track.reverse .logo-item img { max-height: 76px; max-width: 240px; transition: transform 300ms ease, opacity 300ms ease; }
.partner-eyebrow { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 48px 0 18px; padding: 0; }
@keyframes logoSlide {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* ── STANDARDS ── */
.standards-section { padding: 120px 0; border-top: 0.5px solid var(--border); background: var(--fg1); }
.standards-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "head head" "logos sec"; gap: 56px 80px; align-items: stretch; }
.standards-head { grid-area: head; align-items: center;}
.standards-head .sh { font-size: 40px; font-weight: 800; line-height: 1.3; color: var(--bg); text-align: center; }
.standards-head .sm { font-size: 40px; font-weight: 800; line-height: 1.3; color: var(--muted); text-align: center; }
.std-list { grid-area: logos; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 32px; align-content: stretch; margin-top: 100px; }
.std-chip { background: transparent; border: none; padding: 0; display: flex; align-items: center; justify-content: center; transition: transform 200ms; }
.std-chip:hover { transform: translateY(-2px); }
.std-chip img { max-height: 72px; max-width: 100%; width: auto; height: auto; object-fit: contain; }

/* ── SECURITY ── */
.security-list { grid-area: sec; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; margin-top: 50px;}
.sec-item { display: flex; gap: 20px; align-items: center; background: #1E2428; border: 0.5px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 24px 28px; transition: border-color 200ms, transform 200ms, box-shadow 200ms; flex: 1; box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.06) inset; }
.sec-item:hover { border-color: rgba(18,158,123,0.5); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.08) inset; }
.sec-icon { width: 52px; height: 52px; border-radius: 50px; background: rgba(18,158,123,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.sec-title { font-size: 19px; font-weight: 700; color: #FFFFFF; margin-bottom: 6px; }
.sec-desc { font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.55; }

/* ── CTA ── */
.cta-section {
  position: relative; overflow: hidden; padding: 160px var(--pad-x);
  background: #FFFFFF url('/theme/basic/assets/Shadow.png') center center / cover no-repeat;
}
.cta-section::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 460px 280px at 8% 88%, rgba(18,158,123,0.10) 0%, transparent 72%),
    radial-gradient(ellipse 500px 300px at 94% 82%, rgba(118,190,87,0.12) 0%, transparent 72%);
  animation: heroBgDrift2 20s ease-in-out infinite alternate;
  mix-blend-mode: multiply;
}
.cta-inner { max-width: var(--max-w); margin: 0 auto; position: relative; z-index: 1; }
.cta-inner .sh { font-size: 40px; font-weight: 700; line-height: 1.3; color: var(--fg1); }
.cta-inner .sm { font-size: 40px; font-weight: 700; line-height: 1.3; color: var(--muted); }
.cta-btns { display: flex; gap: 14px; }
.cta-btn-row { display: flex; gap: 14px; align-items: center; }
.btn-p { padding: 13px 28px; background: var(--green); color: #fff; border: none; border-radius: 999px; font-family: var(--font); font-size: 15px; font-weight: 500; cursor: pointer; transition: background 150ms; display: inline-flex; align-items: center; gap: 8px; }
.btn-p:hover { background: var(--green-h); }
.btn-g { padding: 13px 28px; background: transparent; color: var(--fg1); border: 0.5px solid var(--border); border-radius: 999px; font-family: var(--font); font-size: 15px; font-weight: 500; cursor: pointer; transition: border-color 150ms; display: inline-flex; align-items: center; gap: 8px; }
.btn-g:hover { border-color: #999; }
.btn-dl { border: 1.5px solid var(--green) !important; color: var(--green); }
.cta-btn-row .btn-p { font-size: 16px; padding: 16px 36px; justify-content: center; }
.cta-btn-row .btn-g { background: #fff; font-size: 16px; padding: 16px 36px; justify-content: center; border: 1px solid var(--green); color: var(--green); }


/* PCF Collaborative Canvas (card-c) */
.pcf-canvas { position:relative; background:#F5F7FA; border-radius:12px; border:0.5px solid var(--border); height:380px; overflow:hidden; margin-top:4px; }
.pcf-canvas::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,#CBD5E1 1px,transparent 1px); background-size:20px 20px; opacity:0.5; }
.pcf-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; overflow:visible; }
.pcf-conn { fill:none; stroke:#94A3B8; stroke-width:1.5; stroke-linecap:round; stroke-dasharray:300; stroke-dashoffset:300; animation:pcfConnDraw 700ms cubic-bezier(0.4,0,0.2,1) forwards; }
.pcf-conn-dash { stroke-dasharray:6,4; animation:pcfConnDraw 700ms cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes pcfConnDraw { to { stroke-dashoffset:0; } }

/* Nodes */
.pcf-node { position:absolute; background:#fff; border:0.5px solid #E2E8F0; border-radius:10px; padding:9px 11px 8px; width:116px; box-shadow:0 2px 10px rgba(0,0,0,0.07); opacity:0; animation:pcfNodeIn 450ms cubic-bezier(0.34,1.2,0.64,1) forwards; z-index:2; }
@keyframes pcfNodeIn { 0%{opacity:0;transform:scale(.85) translateY(8px)} 100%{opacity:1;transform:scale(1) translateY(0)} }
.pcf-node-hd { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1px; }
.pcf-node-title { font-size:10.5px; font-weight:700; color:var(--fg1); line-height:1.3; }
.pcf-node-dots { font-size:11px; color:#CBD5E1; line-height:1; }
.pcf-node-code { font-size:8px; color:var(--muted); font-family:ui-monospace,monospace; margin-bottom:5px; }
.pcf-tags-row { display:flex; gap:3px; flex-wrap:wrap; margin-bottom:5px; }
.pcf-tag { display:inline-block; font-size:7px; font-weight:700; padding:1.5px 5px; border-radius:999px; }
.pcf-tag-mip { background:transparent; color:#3B82F6; border:1px solid #93C5FD; }
.pcf-tag-loc { background:#F1F5F9; color:#64748B; border:none; }
.pcf-tag-new { background:#FEF3C7; color:#D97706; border:none; }
.pcf-data-row { display:flex; gap:3px; align-items:center; font-size:7px; margin-bottom:5px; padding-bottom:4px; border-bottom:0.5px solid #F1F5F9; }
.pcf-d-ok  { color:#10B981; font-weight:600; }
.pcf-d-warn{ color:#F59E0B; font-weight:600; }
.pcf-d-off { color:#CBD5E1; }
.pcf-mb-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.pcf-mb-lbl { font-size:7.5px; color:#94A3B8; display:flex; align-items:center; gap:2px; }
.pcf-pass  { font-size:7.5px; font-weight:700; color:var(--green); background:var(--green-50); padding:1.5px 6px; border-radius:4px; }
.pcf-fail  { font-size:7.5px; font-weight:700; color:#DC2626; background:#FEE2E2; padding:1.5px 6px; border-radius:4px; }
.pcf-io-row { display:flex; justify-content:space-between; font-size:7.5px; color:#6B7280; }

/* Drag ghost */
.pcf-node-drag { border:1.5px dashed #7C3AED; box-shadow:0 10px 28px rgba(124,58,237,0.2); opacity:0; animation:pcfDragIn 500ms ease forwards; z-index:4; }
@keyframes pcfDragIn { 0%{opacity:0;transform:scale(.88) translateY(10px)} 100%{opacity:0.9;transform:scale(1) translateY(0)} }

/* Sticky note */
.pcf-note { position:absolute; background:#FFF176; border-radius:10px; padding:10px 12px; width:110px; z-index:3; opacity:0; transform:rotate(-2deg); animation:pcfNoteIn 500ms ease forwards; box-shadow:0 4px 14px rgba(0,0,0,0.1); }
@keyframes pcfNoteIn { 0%{opacity:0;transform:rotate(-2deg) scale(.9)} 100%{opacity:1;transform:rotate(-2deg) scale(1)} }
.pcf-note-hd { display:flex; align-items:center; gap:5px; margin-bottom:7px; padding-bottom:5px; border-bottom:1px solid rgba(0,0,0,0.08); }
.pcf-note-circle { width:12px; height:12px; border-radius:50%; border:1.5px solid rgba(0,0,0,0.2); flex-shrink:0; }
.pcf-note-label { font-size:9.5px; font-weight:700; color:rgba(0,0,0,0.55); }
.pcf-note-menu { font-size:11px; color:rgba(0,0,0,0.3); margin-left:auto; line-height:1; }
.pcf-note-text { font-size:8.5px; color:rgba(0,0,0,0.5); line-height:1.55; }

/* Cursors */
.pcf-cursor { position:absolute; pointer-events:none; z-index:10; display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.pcf-cursor-label { font-size:7.5px; font-weight:600; color:#fff; padding:1.5px 6px; border-radius:999px; white-space:nowrap; }
.pcf-cursor-a { animation:pcfCurA 10s ease-in-out infinite; }
.pcf-cursor-b { animation:pcfCurB 11s ease-in-out infinite; animation-delay:1.5s; }
.pcf-cursor-c { animation:pcfCurC 12s ease-in-out infinite; animation-delay:0.8s; }
@keyframes pcfCurA {
  0%   { transform:translate(10px,25px); }
  20%  { transform:translate(145px,25px); }
  40%  { transform:translate(145px,190px); }
  60%  { transform:translate(10px,290px); }
  80%  { transform:translate(145px,190px); }
  100% { transform:translate(10px,25px); }
}
@keyframes pcfCurB {
  0%   { transform:translate(282px,25px); }
  25%  { transform:translate(282px,190px); }
  50%  { transform:translate(145px,190px); }
  75%  { transform:translate(282px,290px); }
  100% { transform:translate(282px,25px); }
}
@keyframes pcfCurC {
  0%   { transform:translate(282px,290px); }
  30%  { transform:translate(282px,190px); }
  60%  { transform:translate(145px,25px); }
  100% { transform:translate(282px,290px); }
}

/* ── FOOTER ── */
footer { background: #111; padding: 64px var(--pad-x); }
.footer-inner { max-width: var(--max-w); margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 60px; margin-bottom: 56px; padding-bottom: 48px; border-bottom: 0.5px solid rgba(255,255,255,0.07); }
.footer-logo { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.3px; margin-bottom: 14px; }
.footer-logo span { color: var(--green); }
.footer-tagline { font-size: 14px; color: rgba(255,255,255,0.35); line-height: 1.8; }
.footer-col-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.35); margin-bottom: 18px; }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a { font-size: 15px; color: rgba(255,255,255,0.5); transition: color 150ms; }
.footer-links a:hover { color: rgba(255,255,255,0.85); }
.footer-bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.footer-info { font-size: 12px; color: rgba(255,255,255,0.22); line-height: 1.9; }
.footer-copy { font-size: 12px; color: rgba(255,255,255,0.18); }

/* ── ANIMATIONS ── */
@keyframes growUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes donutDraw1 { from { stroke-dasharray: 0 251; } to { stroke-dasharray: 113 251; } }
@keyframes donutDraw2 { from { stroke-dasharray: 0 251; } to { stroke-dasharray: 75 251; } }
@keyframes donutDraw3 { from { stroke-dasharray: 0 251; } to { stroke-dasharray: 63 251; } }
@keyframes pulseGreen { 0%,100%{box-shadow:0 0 0 0 rgba(18,158,123,0.4)}70%{box-shadow:0 0 0 7px rgba(18,158,123,0)} }
@keyframes pulseRing { 0%{box-shadow:0 0 0 0 rgba(18,158,123,0.4)}70%{box-shadow:0 0 0 9px rgba(18,158,123,0)}100%{box-shadow:0 0 0 0 rgba(18,158,123,0)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)} }
@keyframes liveFlash { 0%,100%{background:var(--green-50);color:var(--green)}50%{background:var(--green);color:#fff} }
@keyframes spinR { from{transform:rotate(0deg)}to{transform:rotate(360deg)} }
@keyframes slideInLeft  { from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)} }
@keyframes slideInRight { from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)} }
@keyframes slideInTop   { from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)} }
@keyframes slideInBot   { from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)} }

/* ── MOBILE BURGER / NAV MOBILE ── */
.nav-burger { display: none; background: none; border: none; width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; flex-direction: column; gap: 4px; padding: 0; }
.nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--fg1); border-radius: 2px; transition: transform 200ms, opacity 150ms; }
.nav-burger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-drawer { display: none; position: fixed; top: 60px; left: 0; right: 0; bottom: 0; background: #fff; z-index: 295; overflow-y: auto; padding: 24px 20px 40px; flex-direction: column; gap: 4px; }
.mobile-drawer.open { display: flex; animation: megaSlide 200ms ease; }
.md-group { padding: 8px 0; border-bottom: 0.5px solid var(--border); }
.md-group:last-child { border-bottom: none; }
.md-head { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; margin-bottom: 4px; }
.md-link { display: block; font-size: 16px; font-weight: 500; color: var(--fg1); padding: 12px; border-radius: 10px; }
.md-link:active, .md-link:hover { background: var(--green-50); color: var(--green); }
.md-link-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; font-weight: 400; }
.md-cta { margin-top: 24px; padding: 14px; text-align: center; background: var(--green); color: #fff; border-radius: 999px; font-weight: 500; font-size: 16px; }

/* ── RESPONSIVE ── */
/* --- 탄소관리 섹션 모바일: 5 스테이지 stack + desktop 애니메이션 그대로 (scale down) --- */
@media (max-width: 1279px) {
  /* scroll-left: 상단 중앙 제목만 보이게, feat-list (왼쪽 메뉴)·빈 left 컬럼 숨김 */
  .scroll-section .feat-list { display: none; }
  .scroll-section .fi-title-row,
  .scroll-section .fi-compact { display: flex !important; }
  .scroll-left { display: none; }
  /* 상단 중앙 제목은 모바일에서 숨김 (모바일은 패널별 번호 칩 사용) */
  .scroll-section .scroll-left-title { display: block !important; margin-top: 50px !important; margin-bottom: 50px !important; }
  .scroll-top-head { padding: 20px 0 28px; text-align: left; }
  .scroll-left { padding-bottom: 0 !important; }
  .scroll-section { padding: 60px 20px 150px !important; min-height: auto !important; height: auto !important; }
  .scroll-pin { position: static !important; height: auto !important; overflow: visible !important; }
  .scroll-stage { min-height: auto !important; height: auto !important; display: block !important; gap: 0 !important; }
  .scroll-top-head .sh {
    font-size: clamp(24px, 6.8vw, 34px);
    line-height: 1.18;
    letter-spacing: -0.6px;
  }

  /* scroll-right: 모든 패널 표시 (active toggle 무시) */
  .scroll-right {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 100px !important;
  }
  .feat-panels-container {
    position: relative !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 80px !important;
  }
  .scroll-section .feat-panel {
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    inset: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }
  /* 모바일: 데스크탑 scale 변환 무효화 (세로 스택이므로 원본 크기) */
  .scroll-section .feat-panel > * { transform: none !important; }
  /* 데이터 흐름 순서: 01수집 → 02LCA → 03Scope → 04보고 → 05검증 (DOM 상 fp5 가 fp4 뒤지만 시각은 앞) */
  .scroll-section #fp0 { order: 1; }
  .scroll-section #fp1 { order: 2; }
  .scroll-section #fp2 { order: 3; }
  .scroll-section #fp5 { order: 4; }
  .scroll-section #fp4 { order: 5; }

  /* 패널 위 번호 chip + 제목 라벨 (data 속성으로) */
  .scroll-section .feat-panel::before {
    display: none !important;
    content: attr(data-num);
    order: -2;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    color: var(--green);
    background: var(--green-50);
    padding: 4px 11px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
  }
  .scroll-section .feat-panel::after {
    content: attr(data-title);
    order: -1;
    font-size: 20px;
    font-weight: 700;
    color: var(--fg1);
    letter-spacing: -0.4px;
    line-height: 1.25;
    margin-bottom: 14px;
  }
  /* panel 내부 wrapper / title-row 숨김, hero-visual 만 표시 */
  .scroll-section .feat-panel > div {
    width: 100%;
    gap: 0;
  }
  .scroll-section .feat-panel > div > div:not(.hero-visual):not(.fp-head):not(.fp-eyebrow) {
    display: none !important;
  }
  .scroll-section .fp-eyebrow { display: block !important; }
  .scroll-section .fp-head { display: flex !important; margin-bottom: 12px !important; width: 100% !important; }
  .scroll-section .fp-head > div { display: flex !important; flex-direction: column !important; width: 100% !important; }
  /* 더 알아보기 버튼: 이미지 하단 중앙에 배치 (모바일) */
  .scroll-section .feat-panel { position: relative !important; padding-bottom: 58px !important; }
  .scroll-section .fp-head-link {
    position: absolute !important; left: 50% !important; bottom: 2px !important;
    transform: translateX(-50%) !important; margin: 0 !important;
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    background: #fff !important; border: 1.5px solid var(--green) !important; color: var(--green) !important;
    padding: 10px 24px !important; border-radius: 999px !important;
    font-size: 14px !important; font-weight: 600 !important; white-space: nowrap !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.07) !important; opacity: 1 !important;
    z-index: 100 !important; pointer-events: auto !important;
  }

  /* scroll-layout 내부 가로 padding 제거 → hero-visual이 section padding까지 채움 */
  .scroll-section .scroll-layout { padding-left: 0; padding-right: 0; grid-template-columns: 1fr !important; }

  /* hero-visual: desktop 620×440 그대로 렌더 + 모바일 폭에 scale 다운
     실제 visual 폭 = 100vw - section padding(40) = 100vw - 40px
     min-height: 0 으로 데스크톱 440px 강제 최솟값 리셋 (빈 공간 제거) */
  .scroll-section .hero-visual {
    width: 100%;
    max-height: 440px;
    min-height: 0 !important;
    position: relative;
    overflow: hidden;
    padding: 0;
    border-radius: 14px;
    border: 0.5px solid var(--border);
    background: #fff;
  }
  .scroll-section .hero-visual > * {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 620px !important;
    height: 440px !important;
    transform-origin: top left;
  }
}


@media (max-width: 1024px) {
  .container, nav, .cta-section, .bento-section, .stats-section, .customers-section, .standards-section, .converge-section, footer { padding-left: 32px; padding-right: 32px; }
  .hero { padding-left: 32px; padding-right: 32px; padding-top: 40px; }
  .hero-stage { padding: 0 12px; }
  .hero-cta-section { padding: 56px 32px 64px; }
  .hero h1 { font-size: 50px; letter-spacing: -0.03em; }
  .hero-lead { font-size: 17px; }
  .converge-head .sh, .converge-head .sm,
  .bento-head .sh, .bento-head .sm, 
  .customers-head .sh, .customers-head .sm { font-size: 56px; letter-spacing: -1.4px; margin-top: 10px; }
  .bento-title { font-size: 20px; }
  .scroll-left-head .sh, .scroll-left-head .sm, .scroll-top-head .sh,
  .standards-head .sh, .standards-head .sm,
  .cta-inner .sh, .cta-inner .sm,
  .stats-title { font-size: 40px !important; letter-spacing: -1px; text-align: center; margin-top: 30px; }
  .bento-grid, .gauge-grid { grid-template-columns: repeat(2, 1fr); }
  .customers-inner { padding: 0 32px; }
  .partner-eyebrow { padding: 0 32px; }
  .logo-marquee::before, .logo-marquee::after { width: 60px; }
  .standards-inner { grid-template-columns: 1fr; grid-template-areas: "head" "logos" "sec"; gap: 40px; }
  .std-list { grid-template-columns: repeat(4, 1fr);}
  .scroll-layout { grid-template-columns: 1fr; }
  .scroll-left { position: relative; top: 0; height: auto; padding-right: 0; padding-bottom: 40px; gap: 28px; }
  .converge-stage { height: auto; min-height: 460px; }
}


@media (max-width: 768px) {
  nav { padding: 0 20px; height: 60px; }
  .nav-center { display: none; }
  .nav-right { gap: 10px; }
  .nav-cta { padding: 9px 16px; font-size: 13px; }
  .nav-burger { display: flex; }

  /* 모바일 hero — 바우처처럼 한 페이지에 꽉차게 */
  .hero-wrap { height: auto; max-height: none; min-height: calc(100vh - 60px); }

  .hero { padding: 68px 20px 28px; justify-content: flex-start; gap: 0; text-align: center; }
  .hero > div:first-child { display: flex; flex-direction: column; align-items: center; }
  .hero-badge { font-size: 12px; padding: 5px 12px; margin-bottom: 18px; }
  .hero h1 { font-size: 30px; letter-spacing: -0.03em; line-height: 1.2; text-align: center; }
  .hero h1 .muted { display: block; margin-top: 6px; }
  .hero-lead { font-size: 15px; margin-top: 14px; line-height: 1.6; }
  .hero-cta-btn-wrap { display: flex; justify-content: center; margin-bottom: -3px !important; }
  .hero-stage { padding: 0 4px; margin-top: 32px; }

  /* 모바일: 중앙 카드(card-c)만 표시, 좌우 카드 숨김 */
  .hero-cards { grid-template-columns: 1fr; gap: 20px; }
  .hero-card.card-l { display: none; }
  .hero-card.card-r { display: none; }
  .hero-card.card-c { order: -1; min-height: auto; height: auto; padding: 20px; border-radius: 18px; }

  .hc-bars { height: 140px; }
  .hc-stat-val { font-size: 14px; }
  .hc-gauge { width: 140px; height: 140px; }
  .hc-gauge-num { font-size: 34px; }
  .hc-donut { height: 112px; }
  .hc-donut svg { width: 112px; height: 112px; }

  .hero-cta-section { padding: 64px 20px 72px; }
  .hero-sub { font-size: 22px; line-height: 1.4; margin-bottom: 28px; letter-spacing: -0.5px; }
  .hero-sub .brand-logo { height: 0.85em; }
  .btn-primary, .btn-ghost { padding: 14px 24px; font-size: 15px; }
  .hero-btns { flex-direction: column; gap: 10px; max-width: 300px; margin: 0 auto; }
  .hero-stats { flex-wrap: wrap; gap: 24px; justify-content: center; padding-top: 28px; }
  .hero-stat-val { font-size: 26px; }
  .hero-stat-lbl { font-size: 12px; }

  /* 히어로 소개자료 다운로드 버튼: 높이 44 / 15px Semibold / radius 999 (모바일 적정 크기) */
  .hero-cta-btn-wrap .btn-primary {
    height: 44px !important; padding: 0 22px !important;
    font-size: 15px !important; font-weight: 600 !important;
    border-radius: 999px !important; display: inline-flex !important;
    align-items: center !important; justify-content: center !important; line-height: 1 !important;
  }
  .hero > div:first-child .hero-cta-btn-wrap { margin-top: 24px !important; margin-bottom: 30px; display: flex; justify-content: center; }

  /* Fix 2: OEM/CBAM/CDP ticker chips — smaller on mobile */
  .ticker-item { font-size: 11px; }
  .ticker-track { gap: 36px; }
  /* converge 상단 OEM/CBAM/CDP 칩 크기 축소 + 한 줄 고정 */
  .mb-br { display: inline !important; } /* 모바일에서 줄바꿈 활성화 */
  .converge-chips { gap: 6px !important; margin-top: 14px !important; flex-wrap: nowrap !important; }
  .converge-chips span { padding: 7px 12px !important; font-size: 12.5px !important; white-space: nowrap !important; }
  .converge-chips span svg { width: 12px !important; height: 12px !important; }
  /* 칩과 아래 카드가 0px로 붙는 문제 → stage margin-top 완화로 간격 확보 */
  .converge-stage { margin-top: -16px !important; }

  .converge-section { padding: 72px 20px; }
  .converge-head { margin-bottom: 36px; }
  .converge-sub { font-size: 16px; }
  .converge-head .sh, .converge-head .sm,
  .bento-head .sh, .bento-head .sm,
  .customers-head .sh, .customers-head .sm { font-size: 26px !important; letter-spacing: -0.5px;}
  .cta-inner .sh { font-size: 24px !important; letter-spacing: -0.5px; margin-bottom: -30px !important;}
  .cta-inner .sm { font-size: 24px !important; letter-spacing: -0.5px; margin-bottom: -10px !important; }
  .converge-stage { height: auto; min-height: auto; flex-direction: column; gap: 12px; padding: 20px 0; max-width: 100%; }
  .converge-center { width: 100%; padding: 22px; order: 0; }
  .float-card { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; width: 100%; padding: 14px 16px; min-height: auto; animation: none !important; }
  .float-card .fc-title { font-size: 15px; }
  .float-card .fc-sub { font-size: 12px; margin-top: 2px; }
  .float-card .fc-pill { font-size: 10px; margin-top: 6px; }
  .converge-lines { display: none; }

  .scroll-left-head .sh, .scroll-left-head .sm { font-size: 30px; letter-spacing: -0.6px; }
  .scroll-layout { padding: 0 20px; }
  .feat-item { font-size: 20px; padding: 8px 0; }
  .feat-panel { min-height: auto; padding: 20px 0; }
  /* Fix 3: mobile scroll reveal — panels start invisible, animate in via .in-view */
  .scroll-section .feat-panel { align-items: center; position: absolute; inset: 0; }
  .feat-card { padding: 22px; border-radius: 16px; }

  .bento-section { padding: 80px 20px; }
  .bento-grid { grid-template-columns: 1fr; gap: 14px; }
  .bento-preview { height: 200px; padding: 20px; }
  .bento-body { padding: 18px 20px 22px; }

  .stats-section { padding: 80px 20px; }
  .stats-title { font-size: 32px; letter-spacing: -0.6px; margin-bottom: 36px; }
  .stats-highlight { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
  .highlight-val-row { flex-wrap: wrap; gap: 6px 8px; align-items: baseline; }
  .highlight-num { font-size: 48px; }
  .highlight-suffix { font-size: 20px; }
  .highlight-label-after { font-size: 18px; display: block; margin-left: 0; margin-right: 0; margin-top: 0; }
  .highlight-desc { margin-left: 0; margin-top: 8px; font-size: 13px; }
  .highlight-visual { margin-left: 0; }
  .hv-track { width: 100%; flex: 1; }
  .gauge-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 32px; margin-top: 16px; }
  .gauge-card { padding: 30px 22px 28px; }
  .gauge-wrap { width: 140px; height: 140px; }
  .gauge-val { font-size: 36px; }

  /* 도입 후 bar 차트 — 모바일 사이즈 최적화 */
  .bar-card { padding: 24px 20px 22px; }
  .bar-title { font-size: 16px; margin-bottom: 24px; }
  .bar-chart { height: 220px; padding: 0 44px; }
  .bar-item { width: 56px; }
  .bar-cut { font-size: 28px; bottom: calc(var(--bar-h) + 10px); top: auto; left: 71%; transform: translateX(-50%); }
  .bar-cut span { font-size: 16px; }
  .bar-cut em { font-size: 12px; }
  .bar-foot { padding-top: 18px; margin-top: 18px; }
  .bf-name { font-size: 13px; }
  .bf-val { font-size: 22px; }

  .customers-section { padding: 80px 0 72px; }
  .customers-inner { padding: 0 20px; }
  /* "350+개 제조 기업이 …" 헤딩 전체 중앙정렬 (모바일) */
  .customers-head { text-align: center; }
  .logo-marquee::before, .logo-marquee::after { width: 48px; }
  .logo-track { gap: 56px; animation-duration: 28s; }
  .logo-track.reverse { animation-duration: 34s; gap: 48px; }
  .logo-item { height: 92px; padding: 0 12px; }
  .logo-item img { max-height: 68px; max-width: 200px; }
  .logo-track.reverse .logo-item { height: 72px; padding: 0 10px; }
  .logo-track.reverse .logo-item img { max-height: 54px; max-width: 170px; }
  .partner-eyebrow { padding: 0 20px; margin-top: 36px; }

  .standards-section { padding: 80px 20px; }
  /* "글로벌 표준과 국내 규정 …" 헤딩 32px (모바일) */
  .standards-head .sh, .standards-head .sm { font-size: 36px !important; }
  .std-list { grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 60px !important; }
  .security-block { margin-top: 30px !important; }
  .std-chip img { max-height: 54px; }
  .sec-item { padding: 18px 20px; }
  .sec-title { font-size: 16px; }
  .sec-desc { font-size: 13px; }

  .cta-section { padding: 40px 20px !important; }
  .cta-btns { flex-direction: column; align-items: center; width: 100%; }
  .cta-btn-row { justify-content: center !important; flex-wrap: wrap !important; }

  footer { padding: 48px 20px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; margin-bottom: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* === 메인 모바일 추가 수정 사항 === */
  /* fp-head 모바일: text + link 세로 스택 */
  .fp-head { flex-direction: column !important; gap: 12px !important; }
  .fp-head-title { font-size: 22px !important; }
  .fp-head-q { font-size: 15px !important; margin-top: 6px !important; }
  .fp-head-sub { font-size: 13px !important; margin-top: 4px !important; }
  .fp-head-link {
    display: inline-flex !important;
    width: fit-content !important;
    margin-left: auto !important;
    align-self: flex-start;
    padding: 10px 18px;
    border: 1.5px solid var(--green);
    border-radius: 999px;
    background: #fff;
    color: var(--green) !important;
    opacity: 1 !important;
    margin-top: 6px;
  }
  .fp-head-link:active,
  .fp-head-link:hover { background: var(--green) !important; color: #fff !important; }
  /* 소개자료 다운로드 버튼: 녹색 테두리 + 흰 바탕 + 녹색 글자 (모든 인스턴스) */
  .converge-btns .btn-primary,
.cta-btns .btn-ghost { border-color: var(--green); color: var(--green); }

  /* 도입 후 고객사 stats — 모바일 좌우 패딩만 유지 */
  .stats-section { padding-left: 20px !important; padding-right: 20px !important; }

  /* ── 스크롤 피처 섹션 — 모바일: sticky 해제, 정적 카드 레이아웃 ── */
  .scroll-section { height: auto !important; }
  .scroll-pin { position: relative !important; height: auto !important; overflow: visible !important; top: auto !important; }
  .scroll-stage { height: auto !important; padding: 60px 20px 40px; gap: 28px; }
  .scroll-left-title .sh { font-size: 30px !important; letter-spacing: -0.5px !important; white-space: normal !important; margin-top: -40px !important; line-height: calc(1.15em + 10px) !important; }
  .scroll-left-title { padding: 0 !important; }
  .scroll-layout { grid-template-columns: 1fr !important; gap: 16px !important; padding: 0 !important; }
  .feat-list { gap: 10px; }
  .feat-item,
  .feat-item.active { padding: 18px 16px; background: #fff; border: 0.5px solid var(--border); border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
  .feat-item .fi-compact { display: none !important; }
  .feat-item .fi-eyebrow { display: block !important; font-size: 11px !important; font-weight: 600 !important; color: var(--green) !important; letter-spacing: 0.04em !important; margin-top: 0 !important; margin-bottom: 8px !important; }
  .feat-item .fi-title-row { display: flex !important; flex-wrap: wrap; gap: 0 !important; }
  .feat-item .fi-title { display: block !important; font-size: 17px !important; font-weight: 700 !important; color: var(--fg1) !important; letter-spacing: -0.3px !important; line-height: 1.3 !important; }
  .feat-item .fi-sub { display: block !important; font-size: 13px !important; color: var(--fg2) !important; line-height: 1.6 !important; margin-top: 8px !important; margin-bottom: 0 !important; }
  .feat-item .fi-link { display: inline-flex !important; margin-left: 0 !important; margin-top: 10px !important; font-size: 13px !important; padding: 6px 14px !important; }

  /* ── Hero 배너 모바일 — badge 중앙 정렬 ── */
  .hero-badge { font-size: 12px; padding: 5px 12px; margin-bottom: 16px; }
  .hero > div:first-child .hero-badge { display: inline-flex; }

  /* ── CTA 섹션 버튼 모바일 full-width ── */

}

@media (max-width: 480px) {
  .hero h1 { font-size: 30px !important; letter-spacing: -0.03em; }
  .hero-lead { font-size: 15px; }
  .hero-badge { font-size: 11px; padding: 4px 11px; }
  .hero-sub { font-size: 17px; letter-spacing: -0.3px; }
  .hc-bars { height: 120px; gap: 4px; }
  .hc-bar { border-radius: 3px 3px 0 0; }
  .hc-stats { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .hc-stat { padding: 10px; }
  .hc-stat-val { font-size: 13px; }
  .hc-stat-lbl { font-size: 9px; }
  .hc-stat-delta { font-size: 9px; }
  .converge-head .sh, .converge-head .sm,
  .bento-head .sh, .bento-head .sm,
  .cta-inner .sh, .cta-inner .sm { font-size: 24px; letter-spacing: -0.5px; }
  .customers-head .sh, .customers-head .sm { font-size: 28px !important; letter-spacing: -0.5px; }
  .standards-head .sh, .standards-head .sm {font-size: 32px !important; margin-top: -0.5px;}
  .feat-card-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 0; }
  .logo-item { height: 80px; }
  .logo-item img { max-height: 60px; max-width: 170px; }
  .customers-inner { margin-bottom: 50px;}
  .stats-title { font-size: 28px !important; letter-spacing: -0.5px; }
  .logo-track.reverse .logo-item { height: 62px; }
  .logo-track.reverse .logo-item img { max-height: 46px; max-width: 140px; }
  .std-list { grid-template-columns: 1fr 1fr;}
  .gauge-grid { grid-template-columns: 1fr; }
  .feat-item .fi-title { font-size: 15px !important; }
  .feat-item .fi-sub { font-size: 12px !important; }
  .cta-banner { padding: 60px 20px !important; }
  .cta-h, .cta-m { font-size: 24px !important; }
  .cta-btn-row .btn-p { font-size: 12px !important; padding: 14px 20px !important; justify-content: center!important; }
  .cta-btn-row .btn-g { background: #fff; font-size: 12px!important; padding: 14px 20px!important; justify-content: center!important; border: 1px solid var(--green); color: var(--green); }
 
}

/* ── TWEAKS ── */
#tweaks-panel {
  display: none; position: fixed; bottom: 28px; right: 28px; z-index: 9999;
  background: #fff; border: 0.5px solid var(--border); border-radius: 14px;
  padding: 22px; min-width: 240px; box-shadow: 0 4px 28px rgba(0,0,0,0.08);
}
#tweaks-panel h4 { font-size: 13px; font-weight: 700; margin-bottom: 16px; }
.tw-row { margin-bottom: 14px; }
.tw-row label { font-size: 12px; color: var(--fg2); display: block; margin-bottom: 6px; }
.tw-row input[type=range] { width: 100%; }
.tw-row select { width: 100%; padding: 7px 10px; border: 0.5px solid var(--border); border-radius: 8px; font-family: var(--font); font-size: 13px; background: var(--bg2); }

/* ── OCR Data Collection Card ── */
.ocr-dz { border:1.5px dashed #D1D5DB; border-radius:12px; height:128px; position:relative; overflow:hidden; background:var(--bg2); transition:border-color 300ms,background 300ms; margin-bottom:12px; }
.ocr-dz.ocr-active { border-color:#129E7B; background:#F0FDF9; }
.ocr-hint { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; transition:opacity 250ms; pointer-events:none; }
.ocr-hint-icon { width:28px; height:28px; border-radius:8px; background:var(--bg2); display:flex; align-items:center; justify-content:center; }
.ocr-hint-main { font-size:9.5px; font-weight:500; color:#6B7280; text-align:center; }
.ocr-hint-sub { font-size:8px; color:#94A3B8; }
.ocr-drag-wrap { position:absolute; top:50%; left:50%; transform:translate(80px,-50%); display:flex; flex-direction:column; align-items:flex-start; gap:2px; pointer-events:none; z-index:10; opacity:0; transition:transform 1s cubic-bezier(.34,1.1,.64,1),opacity 300ms; }
.ocr-drag-file { background:#fff; border:0.5px solid #E2E8F0; border-radius:8px; padding:5px 9px; display:flex; align-items:center; gap:6px; box-shadow:0 8px 24px rgba(0,0,0,0.14); }
.ocr-file-nm { font-size:8px; font-weight:600; color:#374151; }
.ocr-file-sz { font-size:7px; color:#94A3B8; }
.ocr-doc { position:absolute; inset:8px; background:#fff; border-radius:8px; border:0.5px solid #E2E8F0; overflow:hidden; opacity:0; transition:opacity 300ms; }
.ocr-doc-head { background:#F8FAFC; padding:5px 10px; display:flex; justify-content:space-between; align-items:center; border-bottom:0.5px solid #E5E7EB; }
.ocr-doc-htitle { font-size:7.5px; font-weight:700; color:#374151; }
.ocr-doc-hbadge { font-size:6.5px; font-weight:700; color:#3B82F6; background:#EFF6FF; padding:1px 5px; border-radius:999px; }
.ocr-doc-body { padding:7px 10px; }
.ocr-doc-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.ocr-dl { height:5px; width:56px; background:#E5E7EB; border-radius:3px; }
.ocr-dv { height:5px; width:38px; background:#CBD5E1; border-radius:3px; transition:background 300ms,box-shadow 300ms; }
.ocr-doc-row.hl .ocr-dv { background:rgba(99,102,241,0.4); box-shadow:0 0 0 1.5px rgba(99,102,241,0.25); }
.ocr-scan-beam { position:absolute; left:0; right:0; height:1.5px; background:linear-gradient(90deg,transparent,rgba(99,102,241,.8) 40%,rgba(147,51,234,.9) 60%,transparent); box-shadow:0 0 8px rgba(99,102,241,.5); top:24px; opacity:0; pointer-events:none; z-index:5; transition:top 1.8s linear,opacity 200ms; }
.ocr-proc-wrap { position:absolute; bottom:0; left:0; right:0; height:2px; background:#F1F5F9; }
.ocr-proc-bar { height:100%; background:#3B82F6; border-radius:0 999px 999px 0; width:0; transition:width 1.8s ease; }
.ocr-field-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:0.5px solid #F1F5F9; opacity:0; transform:translateX(-5px); transition:opacity 250ms,transform 250ms; }
.ocr-field-row.visible { opacity:1; transform:translateX(0); }
.ocr-field-row:last-child { border-bottom:none; }
.ocr-fkey { font-size:9.5px; color:#6B7280; }
.ocr-fval { display:flex; align-items:center; gap:5px; }
.ocr-fnum { font-size:9.5px; font-weight:700; color:#111; }
.ocr-fauto { font-size:7px; font-weight:600; color:#129E7B; }
.ocr-result-row { display:flex; align-items:center; justify-content:space-between; background:#EDFCF6; border-radius:10px; padding:10px 12px; margin-top:8px; opacity:0; transform:translateY(4px); transition:opacity 350ms,transform 350ms; }
.ocr-result-row.visible { opacity:1; transform:translateY(0); }
.ocr-rlbl { font-size:9.5px; color:#374151; font-weight:500; margin-bottom:2px; }
.ocr-remit { font-size:17px; font-weight:700; color:#129E7B; letter-spacing:-0.5px; }
.ocr-save-pill { font-size:7.5px; font-weight:700; color:#fff; background:#129E7B; padding:4px 9px; border-radius:999px; opacity:0; transition:opacity 300ms; white-space:nowrap; }

/* ── Rotating chart slides (card-r) ── */
.chart-slides-wrap { position:relative; overflow:hidden; padding-bottom:8px; }
.chart-slide { transition:opacity 400ms; position:absolute; top:0; left:0; right:0; bottom:0; display:flex; flex-direction:column; }

/* ── Right card: fill height, distribute content evenly ── */
.hero-card.card-r { display:flex; flex-direction:column; }
.chart-slides-wrap { flex:1; min-height:200px; }
/* Bar chart slide layout — bars grow, YoY pills stick to bottom */
#chartBar .hc-bars { flex:1 !important; min-height:130px; height:auto !important; }
#chartBar .hc-yoy-row { margin-top:auto; }
/* Donut chart slide layout — donut on top, legend spreads vertically to fill */
#chartDonut > div:first-child { flex-shrink:0; }
#chartDonut > div:last-child { flex:1; display:flex; flex-direction:column; justify-content:space-around; padding:0 4px; min-height:0; }
.hc-yoy-row { display:flex; gap:6px; margin-top:10px; }
.hc-yoy-pill { flex:1; border-radius:9px; padding:6px 8px; text-align:center; }
.hc-yoy-lbl { font-size:8px; font-weight:600; }
.hc-yoy-val { font-size:11px; font-weight:700; margin-top:2px; }

/* ── OCR Request Phase ── */
.hero-card.card-l { display:flex; flex-direction:column; position:relative; }
#ocrRequestStep { flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.ocr-req-list { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.ocr-req-row { display:flex; align-items:center; gap:7px; padding:9px 10px; border-radius:8px; background:var(--bg2); transition:background 200ms; }
.ocr-req-cb { width:14px; height:14px; border-radius:3px; background:#129E7B; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ocr-req-label { font-size:9.5px; color:var(--fg1); font-weight:500; flex:1; }
.ocr-req-scope { font-size:7.5px; font-weight:600; padding:1px 6px; border-radius:999px; }
.ocr-req-scope.s1 { color:#6DB33F; background:#F0FBE8; }
.ocr-req-scope.s2 { color:#1BBFE0; background:#E8F9FD; }
.ocr-req-scope.s3 { color:#F26830; background:#FEF3EE; }
.ocr-req-footer { display:flex; align-items:center; justify-content:space-between; }
.ocr-req-all { font-size:8.5px; color:var(--fg2); }
.ocr-req-btn { font-size:9.5px; font-weight:600; color:#fff; background:#129E7B; border:none; border-radius:8px; padding:6px 14px; cursor:default; font-family:var(--font); display:flex; align-items:center; gap:5px; transition:transform 100ms,opacity 100ms; }
.ocr-req-btn.pressed { transform:scale(0.94); opacity:0.8; }
/* OCR cursor */
.ocr-cursor { position:absolute; pointer-events:none; z-index:50; opacity:0; left:50%; top:50%; transition:left 560ms cubic-bezier(.32,.72,.4,1), top 560ms cubic-bezier(.32,.72,.4,1), opacity 220ms, transform 130ms; transform-origin:0 0; will-change:left, top, transform, opacity; }
.ocr-cursor.show { opacity:1; }
.ocr-cursor.click { transform:scale(0.8); }
.ocr-plane-wrap { position:absolute; inset:0; pointer-events:none; z-index:30; overflow:hidden; }
.ocr-plane { position:absolute; opacity:0; }
@keyframes flyPlane { 0%{transform:translate(0,0) rotate(-15deg);opacity:1} 60%{opacity:1} 100%{transform:translate(120px,-90px) rotate(20deg);opacity:0} }
.ocr-toast { position:absolute; bottom:14px; left:50%; transform:translateX(-50%) translateY(6px); background:rgba(17,17,17,0.88); color:#fff; font-size:8.5px; font-weight:500; padding:5px 11px; border-radius:999px; white-space:nowrap; opacity:0; transition:opacity 220ms,transform 220ms; z-index:40; pointer-events:none; }
.ocr-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
/* Override OCR badge colors */
.ocr-fauto { font-size:7px; font-weight:600; color:#3B82F6 !important; }
.ocr-scan-beam { position:absolute; left:0; right:0; height:1.5px; background:linear-gradient(90deg,transparent,rgba(59,130,246,.8) 40%,rgba(59,130,246,.9) 60%,transparent); box-shadow:0 0 8px rgba(59,130,246,.5); top:24px; opacity:0; pointer-events:none; z-index:5; transition:top 1.9s linear,opacity 200ms; }
.ocr-doc-row.hl .ocr-dv { background:rgba(59,130,246,0.35); box-shadow:0 0 0 1.5px rgba(59,130,246,0.22); }

/* === Solution Hero Embeds (.scroll-section panels) === */
.scroll-section .feat-panel { align-items: center; position: absolute; inset: 0; }
.scroll-section .feat-panel > * { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.scroll-section .hero-visual { width: 100%; overflow: hidden; padding: 0; height: auto; position: relative; }
.scroll-section .hero-visual > * { position: absolute !important; top: 0; left: 0; width: 620px !important; height: 440px !important; transform-origin: top left; }
.scroll-section #fp4 .hero-visual > * { position: relative !important; width: 100% !important; height: auto !important; transform: none !important; left: auto !important; }
.scroll-section #fp0 .hero-visual > * { height: 530px !important; }
.scroll-section #fp0 .hero-visual { max-height: none !important; }
.scroll-section #fp2 .hero-visual > * { height: 470px !important; }
.scroll-section #fp2 .hero-visual { max-height: none !important; }

/* fp0: solution-data hero-dashboard */
.scroll-section .hero-dashboard { position: relative; width: 100%; background: #fff; border: .5px solid var(--border); border-radius: 14px; box-shadow: 0 8px 24px rgba(15,42,27,.06); overflow: hidden; min-height: 420px; display: flex; flex-direction: column; }
.scroll-section .hd-main { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1; }
.scroll-section .hd-top { display: flex; justify-content: space-between; align-items: center; }
.scroll-section .hd-crumb { font-size: 11px; color: var(--fg2); }
.scroll-section .hd-crumb strong { color: var(--fg1); font-weight: 600; }
.scroll-section .hd-chip { font-size: 10px; font-weight: 600; background: var(--green-50); color: var(--green); padding: 4px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.scroll-section .hd-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: dotPulseHE 1.6s ease-in-out infinite; }
.scroll-section .hd-h { font-size: 15px; font-weight: 700; letter-spacing: -.3px; color: var(--fg1); }
.scroll-section .track-cards { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
.scroll-section .track-card { background: #fff; border: .5px solid var(--border); border-radius: 10px; padding: 9px 5px; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease; min-width: 0; }
.scroll-section .track-card.pulse { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(18,158,123,.10); border-color: rgba(18,158,123,.3); }
.scroll-section .track-circle { position: relative; width: 50px; height: 50px; }
.scroll-section .track-circle svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.scroll-section .track-circle-bg { fill: none; stroke: #F3F3F0; stroke-width: 8; }
.scroll-section .track-circle-fg { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1); }
.scroll-section .track-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--fg1); letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.scroll-section .track-card.danger .track-pct { color: #DC2626; }
.scroll-section .track-card.warn .track-pct { color: #D97706; }
.scroll-section .track-card.live .track-pct::after { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #129E7B; margin-left: 3px; vertical-align: middle; animation: dotPulseHE 1.6s ease-in-out infinite; }
.scroll-section .track-lbl { font-size: 9.5px; font-weight: 700; color: var(--fg1); text-align: center; white-space: nowrap; }
.scroll-section .track-sub { font-size: 8px; color: var(--fg2); text-align: center; }
.scroll-section .track-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; min-height: 0; }
.scroll-section .track-req, .scroll-section .track-rem { background: #fff; border: .5px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.scroll-section .track-req-head, .scroll-section .track-rem-head { padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: .5px solid var(--bg2); }
.scroll-section .track-req-htitle, .scroll-section .track-rem-title { font-size: 13px; font-weight: 700; color: var(--fg1); }
.scroll-section .track-req-id, .scroll-section .track-rem-count { font-size: 11px; color: var(--fg2); font-weight: 600; }
.scroll-section .track-rem-count { color: var(--green); }
.scroll-section .track-req-body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 11px; flex: 1; justify-content: space-around; }
.scroll-section .track-req-row { display: grid; grid-template-columns: 52px 1fr; gap: 8px; font-size: 12px; align-items: center; line-height: 1.45; }
.scroll-section .track-req-row.targets { align-items: flex-start; }
.scroll-section .track-req-lbl { font-weight: 700; color: var(--fg2); font-size: 11px; }
.scroll-section .track-req-val { font-weight: 600; color: var(--fg1); font-size: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.scroll-section .track-req-cycle { font-size: 10.5px; font-weight: 600; color: var(--green); background: var(--green-50); padding: 2px 8px; border-radius: 999px; }
.scroll-section .track-req-scope { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #FFF8E1; color: #D97706; border: .5px solid rgba(217,119,6,.3); justify-self: start; }
.scroll-section .track-req-targets { display: flex; flex-wrap: nowrap; gap: 5px; overflow: hidden; align-items: center; min-width: 0; }
.scroll-section .t-tag { font-size: 10.5px; font-weight: 500; color: var(--fg1); background: var(--bg2); padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.scroll-section .t-tag.more { background: var(--green-50); color: var(--green); font-weight: 700; }
.scroll-section .track-rem-list { padding: 11px 11px 13px; display: flex; flex-direction: column; gap: 8px; flex: 1; justify-content: space-around; }
.scroll-section .fp-sched-row { background: #fff; border: .5px solid var(--border); border-radius: 9px; padding: 11px 12px !important; display: flex; align-items: center; gap: 9px; }
.scroll-section .fp-sched-when { min-width: 34px; font-size: 11px; color: var(--fg2); font-weight: 500; }
.scroll-section .fp-sched-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; position: relative; }
.scroll-section .fp-sched-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: rgba(18,158,123,.25); animation: dotPulseHE 1.6s ease-in-out infinite; }
.scroll-section .fp-sched-dot.done { background: #C0BDB8; }
.scroll-section .fp-sched-dot.done::after { display: none; }
.scroll-section .fp-sched-main { flex: 1; min-width: 0; }
.scroll-section .fp-sched-title { font-size: 12px; font-weight: 700; color: var(--fg1); }
.scroll-section .fp-sched-sub { font-size: 10.5px; color: var(--fg2); margin-top: 2px; }
@keyframes dotPulseHE { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.4);opacity:0} }

/* fp1: solution-lca pcf-dash */
.scroll-section .pcf-dash { background:#fff; border:.5px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 8px 24px rgba(16,98,73,.08); position:relative; width:100%; display:flex; flex-direction:column; min-height: 420px; }
.scroll-section .pcf-dash-head { padding: 9px 12px; border-bottom: .5px solid var(--border); display: flex; align-items: center; gap: 8px; background: linear-gradient(180deg,#fff 0%,#FAFAF8 100%); }
.scroll-section .pcf-dash-back { font-size: 11px; color: var(--fg2); }
.scroll-section .pcf-dash-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.scroll-section .pcf-dash-title-h { font-size: 11px; font-weight: 700; color: var(--fg1); }
.scroll-section .pcf-dash-title-s { font-size: 9px; color: var(--fg2); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scroll-section .pcf-dash-actions { display: flex; gap: 4px; }
.scroll-section .pcf-dash-btn { font-size: 9px; font-weight: 600; padding: 3px 7px; border-radius: 5px; background: var(--green); color: #fff; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.scroll-section .pcf-dash-btn.secondary { background: var(--bg2); color: var(--fg1); }
.scroll-section .pcf-dash-tabs { display: flex; border-bottom: .5px solid var(--border); background: #FAFAF8; }
.scroll-section .pcf-dash-tab { flex: 1; padding: 7px 8px; font-size: 9.5px; color: var(--fg2); text-align: center; font-weight: 500; border-bottom: 2px solid transparent; }
.scroll-section .pcf-dash-tab.on { color: var(--fg1); font-weight: 700; border-bottom-color: var(--fg1); background: #fff; }
.scroll-section .pcf-dash-body { display: grid; grid-template-columns: 0.72fr 1.75fr; min-height: 280px; flex: 1; }
.scroll-section .pcf-dash-left { padding: 10px 11px; border-right: .5px solid var(--border); display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.scroll-section .pcf-dash-section { font-size: 8.5px; font-weight: 700; color: var(--fg2); text-transform: uppercase; letter-spacing: .05em; }
.scroll-section .pcf-field { display: flex; flex-direction: column; gap: 3px; }
.scroll-section .pcf-field-lbl { font-size: 8px; color: var(--fg2); font-weight: 500; }
.scroll-section .pcf-field-val { font-size: 9.5px; font-weight: 600; color: var(--fg1); background: var(--bg2); border-radius: 4px; padding: 4px 6px; border: .5px solid var(--border); }
.scroll-section .pcf-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.scroll-section .pcf-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.scroll-section .pcf-tag { font-size: 8px; font-weight: 600; color: var(--fg1); background: var(--bg2); padding: 2px 6px; border-radius: 4px; }
.scroll-section .pcf-dash-right { padding: 10px 11px; display: flex; flex-direction: column; gap: 7px; background: #FAFAF8; position: relative; min-width: 0; overflow: hidden; }
.scroll-section .pcf-process-head { display: flex; justify-content: space-between; align-items: center; font-size: 9px; }
.scroll-section .pcf-process-head-lbl { font-weight: 600; color: var(--fg2); }
.scroll-section .pcf-process-head-val { font-weight: 700; color: var(--fg1); font-size: 11px; }
.scroll-section .pcf-process-head-val .u { font-size: 8px; font-weight: 500; color: var(--fg2); margin-left: 2px; }
.scroll-section .pcf-search { background: #fff; border: .5px solid var(--border); border-radius: 5px; padding: 4px 7px; font-size: 8.5px; color: var(--fg2); }
.scroll-section .pcf-cat-row { display: flex; gap: 3px; flex-wrap: wrap; }
.scroll-section .pcf-cat { font-size: 8px; font-weight: 600; color: var(--fg2); background: #fff; border: .5px solid var(--border); padding: 2px 5px; border-radius: 4px; display: inline-flex; align-items: center; gap: 3px; }
.scroll-section .pcf-cat.on { background: var(--green-50); color: var(--green); border-color: rgba(18,158,123,.3); }
.scroll-section .pcf-canvas { flex: 1; background: #FFFEF0; border: 1px dashed #F1E29A; border-radius: 8px; padding: 0; position: relative; min-height: 140px; overflow: hidden; }
.scroll-section .pcf-canvas::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle,#E8E3CC 1px,transparent 1px); background-size: 10px 10px; opacity: .5; pointer-events: none; }
.scroll-section .hero-mini-stage { position: absolute; top: 50%; left: 50%; width: 800px; height: 380px; transform: translate(-50%,-50%) scale(0.55); transform-origin: center center; }
.scroll-section .hero-mini-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.scroll-section .fp1-node { position: absolute; background: #fff; border: .5px solid #E2E8F0; border-radius: 11px; padding: 10px 12px; width: 175px; box-shadow: 0 3px 14px rgba(15,23,42,.08); z-index: 2; }
.scroll-section .fp1-node-hd { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2px; }
.scroll-section .fp1-node-title { font-size: 13px; font-weight: 700; color: var(--fg1); line-height: 1.3; }
.scroll-section .fp1-node-dots { font-size: 13px; color: #CBD5E1; }
.scroll-section .fp1-node-code { font-size: 9.5px; color: var(--muted); font-family: ui-monospace,monospace; margin-bottom: 7px; }
.scroll-section .fp1-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.scroll-section .fp1-tag { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.scroll-section .fp1-tag-mip { background: transparent; color: #3B82F6; border: 1px solid #93C5FD; }
.scroll-section .fp1-tag-loc { background: #F1F5F9; color: #64748B; }
.scroll-section .fp1-data { display: flex; gap: 5px; align-items: center; font-size: 9px; margin-bottom: 6px; padding-bottom: 5px; border-bottom: .5px solid #F1F5F9; }
.scroll-section .fp1-d-ok { color: #10B981; font-weight: 600; }
.scroll-section .fp1-d-warn { color: #F59E0B; font-weight: 600; }
.scroll-section .fp1-d-off { color: #CBD5E1; }
.scroll-section .fp1-mb { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.scroll-section .fp1-mb-lbl { font-size: 9.5px; color: #94A3B8; }
.scroll-section .fp1-pass { font-size: 9.5px; font-weight: 700; color: var(--green); background: var(--green-50); padding: 2px 8px; border-radius: 5px; }
.scroll-section .fp1-io { display: flex; justify-content: space-between; font-size: 9.5px; color: #6B7280; }
.scroll-section .fp1-node-drag { border: 1.5px dashed #7C3AED; box-shadow: 0 10px 28px rgba(124,58,237,.2); opacity: .92; }
.scroll-section .fp1-note { position: absolute; background: #FFF176; border-radius: 10px; padding: 9px 11px; width: 160px; z-index: 3; transform: rotate(-2deg); box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.scroll-section .fp1-note-hd { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid rgba(0,0,0,.08); }
.scroll-section .fp1-note-circle { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.2); flex-shrink: 0; }
.scroll-section .fp1-note-label { font-size: 10px; font-weight: 700; color: rgba(0,0,0,.55); }
.scroll-section .fp1-note-menu { font-size: 11px; color: rgba(0,0,0,.3); margin-left: auto; }
.scroll-section .fp1-note-text { font-size: 9.5px; color: rgba(0,0,0,.6); line-height: 1.5; }
.scroll-section .fp1-conn { fill: none; stroke: #94A3B8; stroke-width: 1.5; stroke-linecap: round; }
.scroll-section .fp1-cursor { position: absolute; pointer-events: none; z-index: 10; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; top: 0; left: 0; }
.scroll-section .fp1-cursor-label { font-size: 10px; font-weight: 600; color: #fff; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.scroll-section .h-cur-a { animation: hCurAhe 12s ease-in-out infinite; animation-fill-mode: both; }
.scroll-section .h-cur-b { animation: hCurBhe 14s ease-in-out infinite; animation-delay: -4.5s; animation-fill-mode: both; }
.scroll-section .h-cur-c { animation: hCurChe 13s ease-in-out infinite; animation-delay: -8.5s; animation-fill-mode: both; }
@keyframes hCurAhe { 0%{transform:translate(20px,40px)} 25%{transform:translate(225px,40px)} 50%{transform:translate(240px,230px)} 75%{transform:translate(435px,40px)} 100%{transform:translate(20px,40px)} }
@keyframes hCurBhe { 0%{transform:translate(645px,40px)} 25%{transform:translate(435px,40px)} 50%{transform:translate(230px,40px)} 75%{transform:translate(250px,230px)} 100%{transform:translate(645px,40px)} }
@keyframes hCurChe { 0%{transform:translate(250px,235px)} 33%{transform:translate(435px,40px)} 66%{transform:translate(645px,40px)} 100%{transform:translate(250px,235px)} }

/* fp2: solution-scope3 hero-dash-v2 */
.scroll-section .hero-dash-v2 { background: #fff; border: .5px solid var(--border); border-radius: 14px; box-shadow: 0 8px 24px rgba(16,98,73,.08); overflow: hidden; width: 100%; display: flex; flex-direction: column; min-height: 420px; }
.scroll-section .hd2-tabs { display: flex; align-items: center; gap: 0; border-bottom: 1px solid #E5E7EB; padding: 0 2px; overflow-x: auto; scrollbar-width: none; }
.scroll-section .hd2-tabs::-webkit-scrollbar { display: none; }
.scroll-section .hd2-tab-track { display: contents; }  /* 데스크탑: wrapper 무시 */
.scroll-section .hd2-tab { font-size: 7px; font-weight: 700; color: #94A3B8; padding: 6px 1px; white-space: nowrap; border-bottom: 2px solid transparent; flex: 1; text-align: center; min-width: 0; letter-spacing: -.4px; }
.scroll-section .hd2-tab.on { color: var(--green); border-bottom-color: var(--green); }
.scroll-section .hd2-tab.off { color: #CBD5E1; text-decoration: line-through; }
.scroll-section .hd2-header { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: .5px solid var(--bg2); gap: 6px; }
.scroll-section .hd2-title-area { display: flex; align-items: baseline; gap: 5px; min-width: 0; flex: 1; }
.scroll-section .hd2-cat-name { font-size: 11px; font-weight: 800; color: var(--fg1); flex-shrink: 0; }
.scroll-section .hd2-cat-desc { font-size: 9px; color: var(--fg2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scroll-section .hd2-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.scroll-section .hd2-btn-light { font-size: 7px; font-weight: 300; padding: 3px 5px; border-radius: 5px; border: .5px solid var(--border); color: var(--fg1); background: #fff; white-space: nowrap; }
.scroll-section .hd2-btn-line { font-size: 7px; font-weight: 500; padding: 3px 5px; border-radius: 5px; border: 1px solid var(--green); color: var(--green); background: #fff; white-space: nowrap; }
.scroll-section .hd2-chart-card { padding: 9px 11px; border-bottom: .5px solid var(--bg2); }
.scroll-section .hd2-chart-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 7px; gap: 5px; }
.scroll-section .hd2-chart-title { font-size: 9px; font-weight: 800; color: var(--fg1); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.scroll-section .hd2-chart-pill { font-size: 7px; font-weight: 700; color: var(--green); background: var(--green-50); padding: 1.5px 5px; border-radius: 999px; }
.scroll-section .hd2-chart-sub { font-size: 7px; color: var(--fg2); margin-top: 10px; font-weight: 500; }
.scroll-section .hd2-chart-tg { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.scroll-section .hd2-chart-tg > span:first-child { display: none; }
.scroll-section .hd2-chart-tg .seg { font-size: 7px; font-weight: 700; color: var(--fg2); padding: 2px 5px; border-radius: 4px; border: .5px solid var(--border); background: #fff; }
.scroll-section .hd2-chart-tg .seg.on { background: var(--green); color: #fff; border-color: var(--green); }
.scroll-section .hd2-chart-body { display: grid; grid-template-columns: 1.5fr 0.85fr; gap: 8px; align-items: stretch; }
.scroll-section .hd2-bars { display: flex; height: 185px; position: relative; padding-left: 22px; padding-bottom: 14px; }
.scroll-section .hd2-axis-y { position: absolute; left: 0; top: 0; bottom: 14px; display: flex; flex-direction: column; justify-content: space-between; font-size: 6.5px; color: var(--fg2); text-align: right; width: 20px; }
.scroll-section .hd2-bars-area { flex: 1; position: relative; display: flex; align-items: flex-end; justify-content: space-around; border-bottom: 1px solid #E5E7EB; }
.scroll-section .hd2-grp { display: flex; align-items: flex-end; gap: 1.5px; flex: 1; justify-content: center; height: 100%; padding: 0 3px; }
.scroll-section .hd2-bar { width: 12px; border-radius: 2px 2px 0 0; height: 0; animation: hd2BarGrowHE 1.2s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes hd2BarGrowHE { to { height: var(--h); } }
.scroll-section .hd2-axis-x { position: absolute; left: 0; right: 0; top: 100%; display: flex; justify-content: space-around; font-size: 7px; color: var(--fg2); font-weight: 500; padding: 4px 0 0; }
.scroll-section .hd2-rank { background: #fff; border: .5px solid var(--border); border-radius: 8px; padding: 7px 8px; font-size: 7.5px; align-self: start; }
.scroll-section .hd2-rank-title { font-size: 8.5px; font-weight: 800; color: var(--fg1); margin-bottom: 5px; }
.scroll-section .hd2-rank-head { display: grid; grid-template-columns: 14px 1fr 50px 24px; gap: 3px; font-size: 6px; color: var(--fg2); font-weight: 700; padding: 3px 0; border-bottom: .5px solid #E5E7EB; }
.scroll-section .hd2-rank-row { display: grid; grid-template-columns: 14px 1fr 50px 24px; gap: 3px; align-items: center; padding: 4px 0; border-bottom: .5px solid #F1F5F9; font-size: 7px; }
.scroll-section .hd2-rank-row .m { display: flex; align-items: center; justify-content: center; width: 12px; height: 12px; border-radius: 3px; font-size: 6.5px; font-weight: 800; color: var(--fg2); background: #F1F5F9; }
.scroll-section .hd2-rank-row .m.gold { background: #FEF3C7; color: #D97706; }
.scroll-section .hd2-rank-row .m.silver { background: #F1F5F9; color: #64748B; }
.scroll-section .hd2-rank-row .m.bronze { background: #FED7AA; color: #9A3412; }
.scroll-section .hd2-rank-row .nm { color: var(--fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scroll-section .hd2-rank-row .vl { text-align: right; color: var(--fg1); }
.scroll-section .hd2-rank-row .pc { text-align: right; color: var(--fg2); }
.scroll-section .hd2-rank-foot { display: flex; justify-content: space-between; font-size: 7px; color: var(--fg2); padding-top: 6px; margin-top: 4px; border-top: .5px solid #E5E7EB; }
.scroll-section .hd2-rank-foot b { color: var(--fg1); }
.scroll-section .hd2-pivot-card { padding: 9px 11px; background: #fff; position: relative; }
.scroll-section .hd2-unit { display: inline-block; font-size: 7px; font-weight: 700; color: var(--green); background: var(--green-50); padding: 1.5px 6px; border-radius: 999px; margin: 0 0 4px auto; float: right; }
.scroll-section .hd2-table { width: 100%; border-collapse: collapse; font-size: 7.5px; clear: both; }
.scroll-section .hd2-table thead th { font-size: 7px; font-weight: 700; color: var(--fg2); text-align: right; padding: 4px 5px; border-bottom: .5px solid #E5E7EB; background: #FAFBFC; }
.scroll-section .hd2-table thead th:first-child { text-align: left; }
.scroll-section .hd2-table thead th.tot { background: var(--green-50); color: var(--green); }
.scroll-section .hd2-table tbody td { padding: 3.5px 5px; text-align: right; color: var(--fg1); border-bottom: .5px solid #F1F5F9; }
.scroll-section .hd2-table tbody td:first-child { text-align: left; font-weight: 600; }
.scroll-section .hd2-table tbody td.tot { background: rgba(18,158,123,.06); font-weight: 700; }
.scroll-section .hd2-table tbody tr.sum td { background: rgba(18,158,123,.10); font-weight: 700; }
.scroll-section .hd2-table tbody tr.sum td.tot { background: rgba(18,158,123,.16); }

/* fp4: solution-verify vc-stage */
.scroll-section .vc-stage-wrap { position: relative; overflow: hidden; border-radius: 14px; flex: 1; display: flex; align-items: center; justify-content: center; }
.scroll-section .vc-stage { position: relative; width: 100%; height: 420px; display: flex; align-items: center; justify-content: center; margin: 0 auto; background: transparent; border: none; border-radius: 0; box-shadow: none; overflow: visible; }
.scroll-section .vc-center { background: #fff; border: .5px solid var(--border); border-radius: 14px; padding: 16px 20px; min-width: 160px; max-width: 200px; box-shadow: 0 6px 26px rgba(0,0,0,.07); z-index: 10; position: relative; }
.scroll-section .vc-float-card { position: absolute; background: #fff; border: .5px solid var(--border); border-radius: 11px; padding: 8px 10px; width: 152px; box-shadow: 0 4px 16px rgba(0,0,0,.06); z-index: 20; display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity 600ms; }
.scroll-section .vc-float-card.vc-show { opacity: 1; }
.scroll-section .vc-fc-icon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.scroll-section .vc-fc-icon svg { width: 13px; height: 13px; }
.scroll-section .vc-fc-title { font-size: 10px; font-weight: 600; color: var(--fg1); line-height: 1.3; }
.scroll-section .vc-fc-sub { font-size: 8.5px; color: var(--fg2); margin-top: 1px; line-height: 1.3; }
.scroll-section .vc-fc-pill { font-size: 8px; font-weight: 600; padding: 2px 6px; border-radius: 999px; background: var(--green-50); color: var(--green); margin-top: 3px; display: inline-block; }
.scroll-section .vc-fc-1 { top: 14px; left: 6px; animation: vcFloatHE 3.2s ease-in-out infinite; }
.scroll-section .vc-fc-2 { top: 14px; right: 6px; animation: vcFloatHE 3.5s ease-in-out infinite; animation-delay: .8s; }
.scroll-section .vc-fc-3 { bottom: 14px; left: 6px; animation: vcFloatHE 2.8s ease-in-out infinite; animation-delay: .4s; }
.scroll-section .vc-fc-4 { bottom: 14px; right: 6px; animation: vcFloatHE 3.1s ease-in-out infinite; animation-delay: 1.2s; }
.scroll-section .vc-fc-5 { top: 50%; left: 6px; transform: translateY(-50%); animation: vcFloatHEH 3.4s ease-in-out infinite; animation-delay: .6s; }
.scroll-section .vc-fc-6 { top: 50%; right: 6px; transform: translateY(-50%); animation: vcFloatHEH 2.9s ease-in-out infinite; animation-delay: 1s; }
@keyframes vcFloatHE { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes vcFloatHEH { 0%,100%{transform:translateY(-50%) translateX(0)} 50%{transform:translateY(-50%) translateX(4px)} }
.scroll-section .vc-conn-lines { position: absolute; inset: 0; pointer-events: none; z-index: 5; width: 100%; height: 100%; }
/* 모바일 전용 연결선 SVG — 데스크탑에선 좌표가 없어 비어있지만, CSS가 없으면 in-flow로 자리를 차지해
   중앙 허브(.vc-center)를 오른쪽으로 밀어냄. absolute로 빼서 .vc-center가 정중앙에 오도록 함. */
.scroll-section .vc-mobile-lines { position: absolute; inset: 0; pointer-events: none; z-index: 5; width: 100%; height: 100%; }
.scroll-section .vc-conn-line { stroke: var(--green); stroke-width: 1.5; fill: none; stroke-dasharray: 5 7; opacity: .6; animation: vcDashHE 3s linear infinite; }
@keyframes vcDashHE { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }

/* fp5: solution-report rh-* mockup */
.scroll-section .rpt-hero-mockup { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 420px; justify-content: flex-start; position: relative; background: transparent; border: none; border-radius: 0; box-shadow: none; width: 100%; }
.scroll-section .rpt-hero-mockup .rh-body { border-radius: 14px; overflow: hidden; border: .5px solid var(--border); }
.scroll-section .rh-body { flex: 1; display: grid; grid-template-columns: 160px 1fr; min-height: 0; overflow: hidden; position: relative; }
.scroll-section .rh-sidebar { border-right: .5px solid var(--border); display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.scroll-section .rh-sb-heading { font-size: 10px; font-weight: 700; color: var(--fg1); padding: 9px 10px 6px; flex-shrink: 0; border-bottom: .5px solid var(--border); }
.scroll-section .rh-toc { overflow: hidden; padding: 0; flex: 1; display: flex; flex-direction: column; }
.scroll-section .rh-toc-item { display: flex; align-items: center; gap: 5px; padding: 0 8px; border-left: 2px solid transparent; transition: background 150ms, border-color 150ms; flex: 0 0 9%; min-height: 0; }
.scroll-section .rh-toc-item.rh-toc-active { background: var(--green-50) !important; border-left-color: var(--green); }
.scroll-section .rh-toc-num { font-size: 8.5px; font-weight: 600; color: var(--fg2); flex-shrink: 0; width: 15px; line-height: 1.2; }
.scroll-section .rh-toc-title { font-size: 8.5px; font-weight: 600; color: var(--fg1); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scroll-section .rh-toc-sub { font-size: 7px; color: var(--fg2); line-height: 1.3; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scroll-section .rh-toc-item.rh-toc-active .rh-toc-title { color: var(--green); }
.scroll-section .rh-preview { display: flex; flex-direction: column; overflow: hidden; background: #525659; position: relative; }
.scroll-section .rh-ctrl { height: 22px; display: flex; align-items: center; gap: 5px; padding: 0 9px; background: #3a3d40; flex-shrink: 0; }
.scroll-section .rh-ctrl-icon { color: rgba(255,255,255,.5); font-size: 10px; line-height: 1; }
.scroll-section .rh-slider { width: 50px; height: 3px; background: rgba(255,255,255,.2); border-radius: 99px; position: relative; flex-shrink: 0; }
.scroll-section .rh-slider-thumb { width: 9px; height: 9px; background: #fff; border-radius: 50%; position: absolute; top: -3px; left: calc(50% - 4.5px); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.scroll-section .rh-ctrl-pct { font-size: 8.5px; color: rgba(255,255,255,.7); min-width: 24px; }
.scroll-section .rh-ctrl-sep { width: .5px; height: 12px; background: rgba(255,255,255,.15); margin: 0 2px; }
.scroll-section .rh-page-wrap { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 10px 6px 14px; gap: 0; }
.scroll-section .rh-page { background: #fff; border-radius: 3px; box-shadow: 0 4px 16px rgba(0,0,0,.45); width: 200px; height: 285px; overflow: hidden; flex-shrink: 0; font-size: 6px; color: #111; padding: 10px 9px 7px; display: none; zoom: 1.35; }
.scroll-section .rh-page.rh-page-active { display: block; }
.scroll-section .rh-page-company { text-align: center; font-size: 6px; font-weight: 700; color: #777; margin-bottom: 5px; letter-spacing: .08em; }
.scroll-section .rh-sec-heading { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; border-bottom: 1.5px solid #129E7B; padding-bottom: 3px; }
.scroll-section .rh-sec-icon { width: 14px; height: 14px; background: #129E7B; border-radius: 3px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.scroll-section .rh-sec-icon svg { width: 8px; height: 8px; }
.scroll-section .rh-sec-title { font-size: 7.5px; font-weight: 700; color: #1a1a1a; letter-spacing: -.2px; line-height: 1.2; }
.scroll-section .rh-note-box { background: #FFFBEB; border: .5px solid #F59E0B; border-radius: 3px; padding: 4px 5px; margin-bottom: 5px; display: flex; gap: 4px; align-items: flex-start; }
.scroll-section .rh-note-icon { color: #F59E0B; font-size: 8px; flex-shrink: 0; }
.scroll-section .rh-note-text { font-size: 5.5px; color: #78350F; line-height: 1.4; }
.scroll-section .rh-note-title { font-weight: 700; margin-bottom: 1px; font-size: 6px; }
.scroll-section .rh-chart-wrap { margin-bottom: 5px; border: .5px solid #F0F0F0; border-radius: 2px; padding: 3px; background: #FAFAFA; }
.scroll-section .rh-chart-legend { display: flex; gap: 6px; justify-content: center; padding: 3px 0 0; flex-wrap: wrap; }
.scroll-section .rh-legend-item { display: flex; align-items: center; gap: 2px; font-size: 4.5px; color: #555; }
.scroll-section .rh-legend-dot { width: 5px; height: 5px; border-radius: 1px; flex-shrink: 0; }
.scroll-section .rh-tbl { width: 100%; border-collapse: collapse; margin-bottom: 4px; font-size: 5px; }
.scroll-section .rh-tbl th { background: #129E7B; color: #fff; font-weight: 700; padding: 2.5px 3px; text-align: center; font-size: 5px; }
.scroll-section .rh-tbl td { border: .5px solid #E5E7EB; padding: 2px 3px; text-align: right; font-size: 5px; }
.scroll-section .rh-tbl td:first-child { background: #F5F5F5; color: #444; font-weight: 600; text-align: left; min-width: 40px; }
.scroll-section .rh-tbl tr.rh-tbl-sum td { background: #E5F7F2; font-weight: 700; }
.scroll-section .rh-tbl tr.rh-tbl-sum td:first-child { background: #C8EFE5; color: #0A5C47; }
.scroll-section .rh-unit-note { font-size: 4.5px; color: #aaa; margin-bottom: 4px; text-align: right; }
.scroll-section .rh-page-footer { border-top: .5px solid #E5E7EB; padding-top: 4px; margin-top: 4px; display: flex; align-items: center; justify-content: space-between; }
.scroll-section .rh-footer-brand { font-size: 5px; font-weight: 700; color: #999; }
.scroll-section .rh-footer-pg { font-size: 6.5px; font-weight: 700; color: #aaa; }
.scroll-section .rh-co-header { font-size: 6.5px; font-weight: 700; color: #fff; background: #129E7B; padding: 3px 5px; border-radius: 2px; margin-bottom: 3px; margin-top: 2px; }
.scroll-section .rh-cat-label { font-size: 6px; color: #444; margin-bottom: 2px; font-weight: 600; }
.scroll-section .rh-sub-tbl { width: 100%; border-collapse: collapse; margin-bottom: 3px; font-size: 4.5px; }
.scroll-section .rh-sub-tbl th { background: #129E7B; color: #fff; font-weight: 700; padding: 1.5px 2px; text-align: center; }
.scroll-section .rh-sub-tbl td { border: .5px solid #E5E7EB; padding: 1.5px 2px; text-align: right; }
.scroll-section .rh-sub-tbl td:first-child { text-align: left; background: #F5F5F5; color: #444; min-width: 30px; }
.scroll-section .rh-sub-unit { font-size: 4.5px; color: #aaa; text-align: right; margin-bottom: 3px; }
.scroll-section .rh-dl-btn { padding: 5px 9px; background: var(--green); color: #fff; border-radius: 999px; font-size: 8.5px; font-weight: 700; display: flex; align-items: center; gap: 4px; position: absolute; bottom: 7px; right: 7px; z-index: 10; transition: transform 120ms,box-shadow 120ms; }
.scroll-section .rh-dl-btn svg { width: 9px; height: 9px; }
.scroll-section .rh-dl-btn.rh-clicked { transform: scale(.93); box-shadow: 0 0 0 3px rgba(18,158,123,.25); }
.scroll-section .rh-cursor { position: absolute; pointer-events: none; z-index: 50; opacity: 0; transition: left 360ms cubic-bezier(.25,.72,.4,1),top 360ms cubic-bezier(.25,.72,.4,1),opacity 180ms,transform 100ms; transform-origin: 2px 2px; }
.scroll-section .rh-cursor.show { opacity: 1; }
.scroll-section .rh-cursor.click { transform: scale(.8); }

/* ── BC1: 검증 신청 PC mockup ── */
.bc1-preview { padding: 18px !important; }
.bc1-frame { width: 100%; height: 100%; background: #fff; border-radius: 8px; border: .5px solid var(--border); box-shadow: 0 8px 24px rgba(16,98,73,.10); display: flex; flex-direction: column; overflow: hidden; position: relative; }
.bc1-topbar { display:flex; align-items:center; gap:3px; padding:5px 8px; background:#FAFAF8; border-bottom:.5px solid var(--border); flex-shrink:0; }
.bc1-dot { width:5px; height:5px; border-radius:50%; }
.bc1-dot-r { background:#FF5F57; }
.bc1-dot-y { background:#FEBC2E; }
.bc1-dot-g { background:#28C840; }
.bc1-url { margin-left:7px; font-size:7px; color:#6B7280; font-weight:500; letter-spacing:.01em; }
.bc1-thead { display:grid; grid-template-columns: 1.6fr 1fr 0.95fr 1.1fr; padding: 4px 8px; background:#F7F7F5; border-bottom:.5px solid var(--border); font-size:7px; font-weight:700; color:#6B7280; text-transform:uppercase; letter-spacing:.04em; flex-shrink:0; }
.bc1-row { display:grid; grid-template-columns: 1.6fr 1fr 0.95fr 1.1fr; padding: 0 8px; border-bottom:.5px solid var(--border); align-items:center; flex:1; min-height:0; }
.bc1-row-target { background:#FAFFF9; }
.bc1-row-last { border-bottom: 0; }
.bc1-rep { min-width:0; }
.bc1-rep-name { font-size:8.5px; font-weight:700; color:#111; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.2; }
.bc1-rep-sub { font-size:6.5px; color:#6B7280; margin-top:1px; }
.bc1-cell { font-size:8px; color:#111; font-weight:500; }
.bc1-tag { font-size:6.5px; font-weight:700; padding:1.5px 5px; border-radius:3px; white-space:nowrap; }
.bc1-tag-draft { background:#FFF8E1; color:#D97706; }
.bc1-tag-ing { background:#EDFCF6; color:#129E7B; }
.bc1-tag-done { background:#EFF6FF; color:#2563EB; }
.bc1-apply { display:inline-flex; align-items:center; gap:3px; padding:3px 7px; background:#129E7B; color:#fff; border-radius:4px; font-size:7px; font-weight:700; white-space:nowrap; box-shadow:0 1px 3px rgba(18,158,123,.3); transition: transform 120ms; }
.bc1-apply.click { transform: scale(.9); }
.bc1-btn-mute { display:inline-flex; padding:3px 7px; background:#F7F7F5; color:#6B7280; border:.5px solid var(--border); border-radius:4px; font-size:7px; font-weight:500; white-space:nowrap; }
.bc1-btn-view { display:inline-flex; padding:3px 7px; background:#EFF6FF; color:#2563EB; border:.5px solid rgba(37,99,235,.25); border-radius:4px; font-size:7px; font-weight:600; white-space:nowrap; }

.bc1-modal { position:absolute; inset:0; background:rgba(0,0,0,.42); display:flex; align-items:center; justify-content:center; z-index:30; opacity:0; pointer-events:none; transition: opacity 240ms ease; border-radius:8px; }
.bc1-modal.show { opacity:1; }
.bc1-modal-card { background:#fff; border-radius:9px; width: calc(100% - 28px); max-width: 240px; box-shadow:0 12px 36px rgba(0,0,0,.26); transform: translateY(6px) scale(.96); transition: transform 240ms cubic-bezier(.32,.72,.4,1); }
.bc1-modal.show .bc1-modal-card { transform: translateY(0) scale(1); }
.bc1-modal-head { display:flex; align-items:center; justify-content:space-between; padding:7px 10px 6px; border-bottom:.5px solid var(--border); }
.bc1-modal-title { font-size:9px; font-weight:700; color:#111; }
.bc1-modal-body { padding: 8px 10px 10px; }
.bc1-modal-sub { font-size:7px; font-weight:700; color:#111; margin-bottom:6px; }
.bc1-radio { display:flex; align-items:center; gap:6px; padding:5px 7px; border:.5px solid var(--border); border-radius:5px; margin-bottom:4px; transition: all 220ms ease; }
.bc1-radio.sel { border-color:#129E7B; background:#EDFCF6; }
.bc1-radio-dot { width:8px; height:8px; border-radius:50%; border:1.5px solid #D5D5D2; background:#fff; flex-shrink:0; transition: all 220ms ease; }
.bc1-radio.sel .bc1-radio-dot { background:#129E7B; border-color:#129E7B; }
.bc1-radio-label { font-size:7.5px; font-weight:600; color:#111; }
.bc1-modal-actions { display:flex; justify-content:flex-end; gap:5px; margin-top:7px; }
.bc1-btn-cancel { padding:3.5px 9px; background:#fff; color:#111; border:.5px solid var(--border); border-radius:4px; font-family:inherit; font-size:7.5px; font-weight:600; cursor:pointer; }
.bc1-btn-next { padding:3.5px 10px; background:#129E7B; color:#fff; border:0; border-radius:4px; font-family:inherit; font-size:7.5px; font-weight:700; cursor:pointer; transition: transform 120ms; }
.bc1-btn-next.click { transform: scale(.92); }

/* Step containers */
.bc1-step1 { display:block; }
.bc1-step2 { display:none; }

/* Agency grid (2×2) */
.bc1-agency-grid { display:grid; grid-template-columns: 1fr 1fr; gap:4px; margin-bottom:6px; }
.bc1-agency { padding:4px 6px; border:.5px solid var(--border); border-radius:5px; background:#fff; transition: all 200ms ease; text-align:center; }
.bc1-agency.sel { border-color:#129E7B; background:#EDFCF6; }
.bc1-agency-nm { font-size:8px; font-weight:700; color:#111; letter-spacing:.02em; }
.bc1-agency.sel .bc1-agency-nm { color:#129E7B; }
.bc1-agency-sub { font-size:6.5px; color:#6B7280; margin-top:1px; }

/* Request textarea */
.bc1-req-label { font-size:7px; font-weight:700; color:#111; margin-top:4px; margin-bottom:3px; }
.bc1-req-box { background:#FAFAF8; border:.5px solid var(--border); border-radius:4px; padding:5px 7px; min-height:22px; font-size:7px; color:#374151; line-height:1.45; transition: border-color 200ms; position:relative; }
.bc1-req-box.focus { border-color:#129E7B; background:#fff; }
.bc1-req-text { white-space:pre-wrap; }
.bc1-req-caret { display:inline-block; width:0.6px; height:7px; background:#129E7B; vertical-align:middle; opacity:0; margin-left:1px; }
.bc1-req-box.focus .bc1-req-caret { opacity:1; animation: bc1Blink 0.9s steps(1) infinite; }
@keyframes bc1Blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* Submit button (green) */
.bc1-btn-submit { padding:3.5px 10px; background:#129E7B; color:#fff; border:0; border-radius:4px; font-family:inherit; font-size:7.5px; font-weight:700; cursor:pointer; transition: transform 120ms, background 200ms; }
.bc1-btn-submit.click { transform: scale(.92); }

/* Completion toast inside PC frame */
.bc1-toast { position:absolute; left:50%; bottom:14px; transform:translateX(-50%) translateY(8px); background:#111; color:#fff; padding:6px 12px; border-radius:999px; font-size:8px; font-weight:600; box-shadow:0 6px 18px rgba(0,0,0,.20); display:flex; align-items:center; gap:5px; opacity:0; pointer-events:none; transition: opacity 240ms ease, transform 240ms ease; z-index:50; white-space:nowrap; }
.bc1-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.bc1-toast-check { display:inline-flex; align-items:center; justify-content:center; width:11px; height:11px; border-radius:50%; background:#129E7B; color:#fff; font-size:7px; font-weight:900; line-height:1; }

.bc1-cursor { position:absolute; pointer-events:none; z-index:60; opacity:0; left:50%; top:50%; transition: left 420ms cubic-bezier(.32,.72,.4,1), top 420ms cubic-bezier(.32,.72,.4,1), opacity 200ms, transform 130ms; transform-origin: 0 0; }
.bc1-cursor.show { opacity:1; }
.bc1-cursor.click { transform: scale(.78); }

/* ─────────── bc2: LCA 자동 산정 ─────────── */
.bc2-preview{background:linear-gradient(135deg,#F8FAFC 0%,#F0F9FF 100%);padding:14px 12px;align-items:stretch;justify-content:stretch}
.bc2-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;height:100%;align-items:stretch}
.bc2-block{background:#fff;border:.5px solid #E2E8F0;border-radius:12px;padding:11px 12px;box-shadow:0 2px 10px rgba(15,23,42,.04);display:flex;flex-direction:column}
.bc2-block-title{font-size:9px;font-weight:700;color:#475569;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:4px;line-height:1;flex-shrink:0}
.bc2-list{display:flex;flex-direction:column;flex:1;justify-content:space-around;gap:4px;min-height:0}
.bc2-row{display:flex;flex-direction:column;gap:4px}
.bc2-row-spacer{visibility:hidden}
.bc2-row-head{display:flex;align-items:center;gap:5px;line-height:1}
.bc2-key{flex:1;font-size:9.5px;font-weight:600;color:#111}
.bc2-v{font-size:9px;font-weight:700;color:#111;font-variant-numeric:tabular-nums}
.bc2-v{font-size:8.5px;font-weight:700;color:#111;font-variant-numeric:tabular-nums}
.bc2-pct{font-size:8.5px;color:#94A3B8;font-weight:600;min-width:34px;text-align:right;font-variant-numeric:tabular-nums}
.bc2-bar-track{height:5px;background:#F1F5F9;border-radius:999px;overflow:hidden;width:100%}
.bc2-bar-fill{height:100%;background:#3B82F6;border-radius:999px;width:0;transition:width 1.2s cubic-bezier(.4,0,.2,1)}
.bc2-row.c-input .bc2-bar-fill{background:#3B82F6}
.bc2-row.c-output .bc2-bar-fill{background:#EF4444}
.bc2-row.c-energy .bc2-bar-fill{background:#F59E0B}
.bc2-row.c-trans .bc2-bar-fill{background:#10B981}
.bc2-row.c-pre .bc2-bar-fill{background:#8B5CF6}
.bc2-row.c-mfg .bc2-bar-fill{background:#F43F5E}
.bc2-row.c-deliver .bc2-bar-fill{background:#0EA5E9}
.bc2-divider{height:.5px;background:#E5E7EB;margin:9px 0 8px;flex-shrink:0}
.bc2-total{display:flex;justify-content:space-between;align-items:baseline;flex-shrink:0}
.bc2-total-lbl{font-size:9px;font-weight:600;color:#374151}
.bc2-total-val{font-size:12.5px;font-weight:700;color:#111;letter-spacing:-.2px;font-variant-numeric:tabular-nums;line-height:1}
.bc2-total-val .bc2-u{font-size:8px;font-weight:700;color:#111;margin-left:1px}

/* ─────────── bc3: 자동차 산업 특화 ─────────── */
.bc3-preview{background:linear-gradient(135deg,#F9FBF2 0%,#EDFCF6 100%);padding:14px 12px;align-items:stretch;justify-content:stretch;overflow:hidden}
.bc3-layout{display:grid;grid-template-columns:1fr 0.95fr;gap:8px;width:100%;height:100%;align-items:stretch;position:relative}
.bc3-list{display:flex;flex-direction:column;gap:5px;min-width:0}
.bc3-card{background:#fff;border:.5px solid #E2E8F0;border-radius:8px;padding:6px 8px;box-shadow:0 1px 6px rgba(15,23,42,.04);position:relative;display:flex;flex-direction:column;gap:3px;flex:1;justify-content:center;min-width:0}
.bc3-card.gen{border-color:rgba(59,130,246,.35);box-shadow:0 0 0 1.5px rgba(59,130,246,.1)}
.bc3-hd{display:flex;align-items:center;gap:6px;padding-right:42px;min-width:0}
.bc3-icon{width:14px;height:18px;background:#fff;border:.5px solid #E2E8F0;border-radius:2.5px;flex-shrink:0;position:relative;overflow:hidden}
.bc3-icon::after{content:"";position:absolute;top:3px;left:2.5px;right:2.5px;height:.8px;background:#3B82F6;box-shadow:0 2px 0 #3B82F6,0 4px 0 #94A3B8,0 6px 0 #94A3B8,0 8px 0 #94A3B8,0 10px 0 #94A3B8}
.bc3-icon.green::after{background:#129E7B;box-shadow:0 2px 0 #129E7B,0 4px 0 #94A3B8,0 6px 0 #94A3B8,0 8px 0 #94A3B8,0 10px 0 #94A3B8}
.bc3-icon.amber::after{background:#F59E0B;box-shadow:0 2px 0 #F59E0B,0 4px 0 #94A3B8,0 6px 0 #94A3B8,0 8px 0 #94A3B8,0 10px 0 #94A3B8}
.bc3-icon.blue::after{background:#3B82F6;box-shadow:0 2px 0 #3B82F6,0 4px 0 #94A3B8,0 6px 0 #94A3B8,0 8px 0 #94A3B8,0 10px 0 #94A3B8}
.bc3-info{flex:1;min-width:0}
.bc3-name{font-size:8px;font-weight:700;color:#111;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc3-sub{font-size:6.5px;color:#94A3B8;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.bc3-progress{height:2.5px;background:#F1F5F9;border-radius:999px;overflow:hidden}
.bc3-progress-fill{height:100%;background:#129E7B;border-radius:999px;width:0;transition:width 1.6s cubic-bezier(.4,0,.2,1)}
.bc3-foot{display:flex;justify-content:flex-end;align-items:center}
.bc3-meta{font-size:6.5px;color:#94A3B8;font-variant-numeric:tabular-nums;line-height:1}
.bc3-status{position:absolute;top:6px;right:6px;display:inline-flex;align-items:center;gap:2px;font-weight:700;padding:1.5px 4.5px;border-radius:999px;font-size:6.5px;line-height:1.2;white-space:nowrap}
.bc3-status.done{color:#129E7B;background:#EDFCF6}
.bc3-status.gen{color:#3B82F6;background:#EFF6FF}
.bc3-status.gen .bc3-ri{display:inline-block;width:5px;height:5px;border:1.2px solid #3B82F6;border-top-color:transparent;border-radius:50%;animation:bc3Spin 700ms linear infinite}
.bc3-status.queue{color:#64748B;background:#F1F5F9}
@keyframes bc3Spin{to{transform:rotate(360deg)}}

/* PCF Information Sheet */
.bc3-doc-wrap{position:relative;display:flex;align-items:stretch;justify-content:center;min-width:0}
.bc3-doc{background:#fff;border:.5px solid #D1D5DB;border-radius:5px;width:100%;height:100%;box-shadow:0 8px 22px rgba(15,23,42,.13),0 2px 8px rgba(0,0,0,.05);overflow:hidden;display:flex;flex-direction:column;animation:bc3DocFloat 4s ease-in-out infinite;will-change:transform}
@keyframes bc3DocFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.bc3-doc-head{padding:6px 7px 5px;display:flex;align-items:center;gap:5px;border-bottom:.5px solid #E5E7EB;flex-shrink:0}
.bc3-doc-logo{display:flex;flex-direction:column;line-height:1;flex-shrink:0}
.bc3-doc-logo .a{font-size:7.5px;font-weight:800;color:#0F5132;letter-spacing:.04em}
.bc3-doc-logo .b{font-size:4.5px;font-weight:600;color:#0F5132;letter-spacing:.15em;margin-top:.5px}
.bc3-doc-title{flex:1;text-align:center;font-weight:700;color:#111;font-size:6.5px;line-height:1.2}
.bc3-doc-title .lbl{font-weight:600;font-size:5px;color:#374151;display:block;margin-bottom:.5px}
.bc3-doc-section{padding:4px 7px 0}
.bc3-doc-section.bc3-pie-sec{flex:1;padding-bottom:4px}
.bc3-sec-bar{background:#0F5132;color:#fff;text-align:center;font-weight:700;font-size:6px;padding:2px 0;letter-spacing:.04em;margin-bottom:0}
.bc3-doc-table{display:grid;grid-template-columns:44px 1fr;border:.5px solid #E5E7EB;border-top:none;font-size:5.5px;line-height:1.2}
.bc3-doc-table .k{background:#F0F5F2;padding:3px 4px;font-weight:700;color:#0F5132;border-right:.5px solid #E5E7EB;border-bottom:.5px solid #E5E7EB;text-align:center}
.bc3-doc-table .v{padding:3px 5px;color:#111;border-bottom:.5px solid #E5E7EB;font-weight:500}
.bc3-doc-table .k:last-of-type,.bc3-doc-table .v:last-of-type{border-bottom:none}
.bc3-doc-table .v.pcf{color:#0F5132;font-weight:700}
.bc3-doc-pie{display:flex;align-items:center;gap:6px;padding-top:3px}
.bc3-pie-circle{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:conic-gradient(#5B9BD5 0deg 230deg,#ED7D31 230deg 295deg,#70AD47 295deg 330deg,#FFC000 330deg 350deg,#7030A0 350deg 358deg,#A5A5A5 358deg 360deg);transform:scale(0);animation:bc3PieIn 700ms cubic-bezier(.34,1.2,.64,1) 200ms forwards}
@keyframes bc3PieIn{to{transform:scale(1)}}
.bc3-doc-leg{display:flex;flex-direction:column;gap:2px;font-size:5.5px;color:#374151;flex:1;min-width:0}
.bc3-doc-leg .row{display:flex;align-items:center;gap:3px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc3-doc-leg .sw{width:5px;height:5px;border-radius:1.5px;flex-shrink:0}
.bc3-doc-leg .nm{font-weight:600;color:#374151;overflow:hidden;text-overflow:ellipsis;flex:1}
.bc3-doc{padding-bottom:34px}
.bc3-basic-sec{flex-shrink:0;padding-bottom:5px}
.bc3-doc-table-basic{grid-template-columns:50px 1fr;font-size:5px;line-height:1.15}
.bc3-doc-table-basic .k{padding:2px 3px;font-size:5px}
.bc3-doc-table-basic .v{padding:2px 4px;font-size:5.5px}
.bc3-formats{position:absolute;bottom:8px;right:8px;display:flex;gap:5px;z-index:5}
.bc3-fmt{padding:5px 9px;border-radius:6px;font-size:10px;font-weight:500;color:#fff;letter-spacing:.05em;box-shadow:0 3px 8px rgba(0,0,0,.22);animation:bc3FmtPulse 2.6s ease-in-out infinite;display:inline-flex;align-items:center;gap:3px}
.bc3-fmt.xlsx{background:#16A34A}
.bc3-fmt.pdf{background:#DC2626;animation-delay:1.3s}
@keyframes bc3FmtPulse{0%,100%{transform:translateY(0);box-shadow:0 3px 8px rgba(0,0,0,.22)}50%{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.28)}}

/* ============================================================== */
/* === Mobile fixes (append-only, 데스크톱 1025px+ 영향 없음) === */
/* ============================================================== */

/* --- Baseline 뷰포트 컨테인먼트 (1024px 이하 공통) --- */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  img, svg, video, canvas { max-width: 100%; height: auto; }
}

/* --- Converge section 모바일: 3-1-3 grid + 점선 connector(카드→중앙으로 모이는 애니메이션) --- */
@media (max-width: 768px) {
  /* float-card 가 inline style="opacity:0" + animation:none 으로 안 보이는 문제 해결 */
  .converge-stage .float-card { opacity: 1 !important; }

  /* 3-1-3 grid: 위 3카드 / 중앙 통합 / 아래 3카드 */
  .converge-stage {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: auto auto auto;
    gap: 40px 8px !important;
    padding: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    flex-direction: unset !important;
  }

  /* 카드 grid 위치: 위 row B/A/Scope, 중앙 통합, 아래 row PCF/GHG/검증 */
  .converge-stage #fc5 { grid-row: 1; grid-column: 1; }
  .converge-stage #fc1 { grid-row: 1; grid-column: 2; }
  .converge-stage #fc3 { grid-row: 1; grid-column: 3; }
  .converge-stage .converge-center { grid-row: 2; grid-column: 1 / -1; width: 100% !important; }
  .converge-stage #fc6 { grid-row: 3; grid-column: 1; }
  .converge-stage #fc2 { grid-row: 3; grid-column: 2; }
  .converge-stage #fc4 { grid-row: 3; grid-column: 3; }

  /* 카드 컴팩트 디자인: icon + title 만 (sub/pill 숨김) */
  .converge-stage .float-card {
    position: relative !important;
    width: auto !important;
    min-height: auto !important;
    padding: 12px 6px !important;
    margin: 0 !important;
    gap: 6px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    border-radius: 12px !important;
  }
  .converge-stage .float-card > .fc-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
  }
  .converge-stage .float-card > .fc-icon svg {
    width: 14px !important;
    height: 14px !important;
  }
  .converge-stage .float-card .fc-title {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--fg1);
  }
  /* 모바일 전용 문구 (데스크톱은 기존 텍스트 유지) — data-mb-title 지정된 카드만 */
  .converge-stage .float-card .fc-title[data-mb-title] {
    font-size: 0 !important;
  }
  .converge-stage .float-card .fc-title[data-mb-title]::before {
    content: attr(data-mb-title);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.2px;
    color: var(--fg1);
    display: inline-block;
  }
  .converge-stage .float-card .fc-sub,
  .converge-stage .float-card .fc-pill { display: none !important; }

  /* 점선 connector: 위 row 카드 → 중앙 (아래방향 그려짐), 아래 row 카드 → 중앙 (위방향 그려짐) */
  .converge-stage #fc5::after,
  .converge-stage #fc1::after,
  .converge-stage #fc3::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 2px dotted rgba(18, 158, 123, 0.75);
    pointer-events: none;
    animation: convergeLineDown 700ms cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
  }
  .converge-stage #fc6::before,
  .converge-stage #fc2::before,
  .converge-stage #fc4::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 2px dotted rgba(18, 158, 123, 0.75);
    pointer-events: none;
    animation: convergeLineUp 700ms cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
  }
  @keyframes convergeLineDown {
    from { height: 0; opacity: 0; }
    to   { height: 40px; opacity: 1; }
  }
  @keyframes convergeLineUp {
    from { height: 0; opacity: 0; }
    to   { height: 40px; opacity: 1; }
  }
}

/* --- hc-inner: 카드 안에서 flex column으로 높이 채움 (chart-slides-wrap flex:1 작동) --- */
.hc-inner { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }

/* --- Hero 모바일: 카드 3개 1열 stack (데스크톱 사이즈 그대로 세로 쌓기) --- */
@media (max-width: 768px) {
  /* hc-inner wrapper 무력화 → 카드 직접 자식처럼 동작 */
  .hc-inner {
    position: static;
    width: auto;
    height: auto;
    transform: none;
    pointer-events: auto;
    display: contents;
  }
  /* 카드 외곽: height auto 로 풀어서 콘텐츠 따라 자연스럽게 */
  .hero-card.card-l,
  .hero-card.card-c,
  .hero-card.card-r {
    height: auto;
    min-height: auto;
    overflow: visible;
    /* padding/border-radius 는 기존 모바일 규칙(line 705) 사용 */
  }
  /* card-l (OCR 애니메이션): stage 전환마다 height 변동 → 큰 값으로 고정 */
  .hero-card.card-l {
    height: 480px !important;
    min-height: 480px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  /* hero-cards 는 기존 모바일 1fr 규칙(line 704) 그대로 사용 — 추가 오버라이드 없음 */
}

/* --- 일반 nowrap 해제 (큰 폰트가 모바일에서 가로 넘침 방지) --- */
@media (max-width: 1024px) {
  .converge-head .sh, .converge-head .sm,
  .bento-head .sh, .bento-head .sm,
  .customers-head .sh, .customers-head .sm,
  .scroll-left-head .sh, .scroll-left-head .sm, .scroll-top-head .sh,
  .standards-head .sh, .standards-head .sm,
  .cta-inner .sh, .cta-inner .sm,
  .stats-title,
  .scroll-mb-head .sh, .scroll-mb-head .sm { white-space: normal; word-break: keep-all; }
}

/* --- 섹션 간 간격 통일 (모바일 80px 위/아래) --- */
@media (max-width: 768px) {
  .scroll-section { padding: 80px 20px !important; }
  .customers-section { padding: 80px 20px !important; }
  .hero-cta-section { padding: 80px 20px !important; }
}

/* --- Hero card-c PCF 흐름도: 카드 폭 안에 통째 fit (화살표·노드 잘림 방지) --- */
@media (max-width: 768px) {
  /* 카드가 자식 pcf-canvas (400px) 의 min-content 따라 늘어나는 것 차단 */
  .hero-card.card-c {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }
  /* pcf-canvas는 absolute로 layout 영향 빼고 scale */
  .hero-card.card-c .pcf-canvas {
    position: relative !important;
    width: 400px !important;
    height: 380px !important;
    transform-origin: top left;
    transform: scale(calc((100vw - 80px) / 400px));
    /* scaled height 만큼만 layout 공간 차지하도록 negative margin */
    margin-bottom: calc((100vw - 80px) / 400 * 380 - 380px) !important;
    margin-right: calc((100vw - 80px) - 400px) !important;
  }
}

/* --- Hero card-r Scope 차트: 글자 잘림 방지 + stat 카드 동일 사이즈 --- */
@media (max-width: 768px) {
  /* 차트 슬라이드 영역 — 콘텐츠 모두 fit하도록 높이 확장 */
  .hero-card.card-r .chart-slides-wrap {
    min-height: 260px !important;
    padding-bottom: 8px !important;
    overflow: visible;
  }
  .hero-card.card-r .chart-slide {
    padding: 0 !important;
    overflow: hidden !important;
  }
  /* 도넛 슬라이드: legend 간격 줄이고 도넛 크기 확대 */
  .hero-card.card-r #chartDonut > div:first-child {
    margin-bottom: 10px !important;
  }
  .hero-card.card-r #chartDonut > div:first-child > div {
    width: 140px !important;
    height: 140px !important;
  }
  .hero-card.card-r #chartDonut > div:nth-child(2) {
    gap: 2px !important;
    padding: 0 4px !important;
  }
  .hero-card.card-r #chartDonut > div:nth-child(2) > div span {
    font-size: 11px !important;
  }
  /* 차트 슬라이드 상단 Scope 1/2/3 + percent 행 폰트 축소 (잘림 방지) */
  .hero-card.card-r .chart-slide > div:first-child span {
    font-size: 9px !important;
    white-space: nowrap;
  }
  /* Scope 1/2/3 stat 카드 동일 사이즈 강제 (애니메이션 중에도 width/height 유지) */
  .hero-card.card-r .hc-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .hero-card.card-r .hc-stat {
    padding: 10px 8px !important;
    height: 80px !important;
    min-height: 80px !important;
    box-sizing: border-box !important;
    overflow: hidden;
  }
  .hero-card.card-r .hc-stat-lbl { font-size: 10px !important; line-height: 1.2 !important; }
  .hero-card.card-r .hc-stat-val { font-size: 16px !important; margin-top: 2px !important; letter-spacing: -0.4px !important; }
  .hero-card.card-r .hc-stat-delta { font-size: 9px !important; line-height: 1.2 !important; }

  /* 막대 차트 아래 Scope 1/2/3 yoy pill — 폰트 키움 (가독성 강화) */
  .hero-card.card-r .hc-yoy-row {
    gap: 6px !important;
    margin-top: 8px !important;
  }
  .hero-card.card-r .hc-yoy-pill {
    padding: 7px 6px !important;
    border-radius: 8px !important;
    overflow: hidden;
  }
  .hero-card.card-r .hc-yoy-lbl {
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }
  .hero-card.card-r .hc-yoy-val {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
    white-space: nowrap;
    letter-spacing: -0.2px;
  }
  /* 도넛 슬라이드 범례 (legend-item) 잘림 방지 */
  .hero-card.card-r .hc-legend { gap: 4px !important; }
  .hero-card.card-r .hc-legend-item { min-width: 0; }
  .hero-card.card-r .hc-legend-val { font-size: 11px !important; }
  .hero-card.card-r .hc-legend-lbl { font-size: 8px !important; white-space: nowrap; }
  .hero-card.card-r .hc-legend-dot { width: 7px !important; height: 7px !important; margin-right: 3px !important; }
  /* x축 (2022, 2023, 2024) 라벨 작게 */
  .hero-card.card-r .hc-xaxis { gap: 4px !important; margin-bottom: 10px !important; }
  .hero-card.card-r .hc-xaxis > div { font-size: 8px !important; }
  /* hc-bars padding 축소 */
  .hero-card.card-r .hc-bars { gap: 3px !important; padding: 0 1px !important; }
}

/* --- 모바일 추가 fix: 테두리/잘림/3열 도입효과/로고 사이즈 --- */
@media (max-width: 768px) {
  /* (1) scroll-section hero-visual 바깥 테두리 제거 (이중 박스 방지) */
  .scroll-section .hero-visual {
    border: none !important;
    background: transparent !important;
  }

  /* (2) Bento 카드 미리보기 잘림 방지 + 내부 이미지 카드 영역 가득 채우기 */
  .bento-section .bento-preview {
    height: 300px !important;
    min-height: 300px !important;
    padding: 14px 12px !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  /* 내부 콘텐츠 wrapper: 너비·높이 100% 강제, scale로 빈 공간 채움 */
  .bento-section .bento-preview > * {
    width: 100% !important;
    height: 100% !important;
    margin: 0 auto !important;
    align-self: stretch !important;
  }

  /* (3) Stats 도입 효과: 모바일 1열 스택 (bar-card 가로 넘침 방지) */
  .gauge-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .gauge-card {
    padding: 18px 6px 14px !important;
    border-radius: 12px !important;
  }
  .gauge-wrap {
    width: 88px !important;
    height: 88px !important;
    margin: 0 auto 10px !important;
  }
  .gauge-val {
    font-size: 14px !important;
    letter-spacing: -0.3px !important;
    line-height: 1;
  }
  .gauge-val .pct { font-size: 9px !important; margin-left: 0 !important; }
  .gauge-val .suffix { font-size: 7px !important; margin-left: 2px !important; }
  .gauge-val .trend { font-size: 8px !important; margin-left: 1px !important; }
  .gauge-title {
    font-size: 11px !important;
    letter-spacing: -0.2px !important;
    margin-bottom: 10px !important;
    line-height: 1.2;
  }
  .gauge-detail {
    padding-top: 8px !important;
    gap: 3px !important;
    flex-wrap: wrap !important;
  }
  .gauge-detail .before { font-size: 10px !important; }
  .gauge-detail .arrow { font-size: 9px !important; }
  .gauge-detail .after { font-size: 12px !important; }
  .gauge-detail .unit { font-size: 9px !important; }

  /* (4) Customers 로고: 사이즈/간격 축소 → 한 화면에 3개 보이게 */
  .logo-marquee::before, .logo-marquee::after { width: 24px !important; }
  .logo-marquee { margin-left: 0 !important; margin-right: 0 !important; }
  .customers-section .logo-marquee { margin-left: 0 !important; margin-right: 0 !important; }
  .customers-head, .customers-head .sh, .customers-head .sm { text-align: left !important; }
  .logo-track { gap: 24px !important; }
  .logo-track.reverse { gap: 20px !important; }
  .logo-item { height: 60px !important; padding: 0 4px !important; }
  .logo-item img { max-height: 40px !important; max-width: 95px !important; }
  .logo-track.reverse .logo-item { height: 54px !important; padding: 0 4px !important; }
  .logo-track.reverse .logo-item img { max-height: 36px !important; max-width: 90px !important; }

  /* (5) Standards 로고: 사이즈 통일 (ipcc/ghg/cps 가 튀어보이지 않게) */
  .std-chip {
    padding: 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .std-chip img {
    max-height: 36px !important;
    max-width: 110px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
  }
}


/* === stats-section 반응형 === */
@media (max-width: 768px) {
  .stats-inner { padding: 0 !important; }
  /* bento-inner / standards-inner도 모바일에서 좌우 패딩 제거 → 다른 섹션과 동일하게 섹션 패딩(20px)만 적용 */
  .bento-inner { padding: 0 !important; }
  .standards-inner { padding: 0 !important; }

  /* stats-highlight: 1열로 전환 */
  .stats-highlight {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 24px 20px !important;
  }
  .highlight-num { font-size: 52px !important; }
  .highlight-suffix { font-size: 24px !important; }
  .highlight-label-after {
    font-size: 18px !important;
    margin-left: 0 !important;
    margin-top: 6px !important;
    display: block !important;
  }
  .highlight-desc {
    font-size: 13px !important;
    margin-left: 0 !important;
    margin-top: 8px !important;
  }
  .highlight-visual { margin-left: 0 !important; }
  /* 도입 전 위 문구(협력사 응답률·설명) 중앙정렬 (모바일만) */
  .stats-highlight > div:first-child { text-align: center !important; }
  .highlight-val-row { justify-content: center !important; }

  /* hv-track: 고정폭 해제 (칩 글자 줄바꿈 방지를 위해 바는 flex로 줄어듦) */
  .hv-track { width: auto !important; flex: 1 1 auto !important; min-width: 0 !important; }
  /* 도입 전/후 칩: 고정폭(44px) 제거 → 내용에 맞춰 한 줄로(줄바꿈 방지) */
  .hv-label { font-size: 12px !important; width: auto !important; flex-shrink: 0 !important; white-space: nowrap !important; }
  .hv-val { font-size: 15px !important; }

  /* bar-card: 1열 스택 + 사이즈 조정 */
  .gauge-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .bar-card { padding: 24px 20px 20px !important; }
  .bar-title { font-size: 15px !important; padding: 6px 16px !important; margin-bottom: 18px !important; }
  .bar-chart { height: 200px !important; padding: 0 32px !important; }
  .bar-item { width: 52px !important; }
  .bar-cut { font-size: 28px !important; bottom: calc(var(--bar-h) + 10px) !important; top: auto !important; left: 71% !important; transform: translateX(-50%) !important; }
  .bar-cut span { font-size: 16px !important; }
  .bar-cut em { font-size: 12px !important; }
  .bar-foot { padding: 14px 20px 0 !important; margin-top: 14px !important; }
  .bf-val { font-size: 18px !important; }
  .bf-name { font-size: 12px !important; }
}

/* === main.html 데스크탑 변경사항 모바일 반영 === */
@media (max-width: 768px) {
  /* 1. bento-section: min-height 100vh → auto (모바일 꽉채움 불필요) */
  .bento-section { min-height: auto !important; }

  /* 2. bar-title 칩 스타일: 모바일에서도 chip 형태 유지, 크기 축소 */
  .bar-title {
    font-size: 14px !important;
    padding: 6px 16px !important;
    border-radius: 999px !important;
    border: 0.5px solid var(--border) !important;
    background: var(--bg2) !important;
    display: inline-block !important;
    margin-bottom: 18px !important;
  }

  /* 3. sec-item: 다크 배경/테두리/그림자 모바일에서도 유지 */
  .sec-item {
    background: #1E2428 !important;
    border: 0.5px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.06) inset !important;
  }
  .sec-title { color: #FFFFFF !important; }
  .sec-desc { color: rgba(255,255,255,0.55) !important; }

  /* 4. stats-highlight: 모바일에서도 그림자 유지 + 바깥 연녹색 테두리 제거 */
  .stats-highlight {
    box-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 1px 0 rgba(255,255,255,0.8) inset !important;
    border: none !important;
  }

  /* 5. gauge-card: 모바일에서도 그림자 유지 */
  .gauge-card {
    box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.9) inset !important;
  }
}
/* ── LARGE SCREEN (≥1800px) ── */
@media (min-width: 1800px) {
  .hero-stage { max-width: 1500px; }
  .hero { max-width: 1500px; padding-top: 50px; padding-bottom: 24px; gap: 16px; }
  .hero-stage { margin-top: 20px !important; }
  .hero-cta-btn-wrap { margin-top: 28px !important; }
  .hero-cards { gap: 24px; }
  .hero-card.card-l { height: 460px; }
  .hero-card.card-c { height: 510px; }
  .hero-card.card-r { height: 460px; }
  .hero-card.card-l .hc-inner,
  .hero-card.card-r .hc-inner { zoom: 1.1; }
  /* (1420-48)/400 = 1.3 */
  .hero-card.card-c .pcf-canvas { width: 400px !important; height: 370px; zoom: 1.3; }
  .hero-card.card-c .hc-flow-head { zoom: 1.1; }
}

/* ── EXTRA LARGE SCREEN (≥2400px) ── */
@media (min-width: 2400px) {
  .hero-stage { max-width: 1920px;}
  .hero { max-width: 1920px; padding-top: 150px; padding-bottom: 24px; gap: 16px; }
  .hero-stage { margin-top: 50px !important; }
  .hero-cta-btn-wrap { margin-top: 28px !important; }
  .hero-cards { gap: 32px; }
  .hero-card.card-l { height: 560px; }
  .hero-card.card-c { height: 700px; }
  .hero-card.card-r { height: 560px; }
  .hero-card.card-l .hc-inner,
  .hero-card.card-r .hc-inner { zoom: 1.25; }
  /* canvas: width 400px 고정(SVG 좌표 일치), height 390px(노트 표시) */
  .hero-card.card-c .pcf-canvas { width: 400px !important; height: 390px; zoom: 1.72; }
  .hero-card.card-c .hc-flow-head { zoom: 1.25; }
  /* row2 노드·노트를 40px 위로 (CSS로만 → 기본 화면 영향 없음) */
  .hero-card.card-c .pcf-canvas .pcf-node[style*="top:198px"] { top: 158px !important; }
  .hero-card.card-c .pcf-canvas .pcf-note { top: 255px !important; }
  /* row2가 40px 위로 가므로 거기 닿는 화살표 3개도 같이 보정 */
  .hero-card.card-c .pcf-svg #pcfV1 { d: path("M203,141 V155"); }
  .hero-card.card-c .pcf-svg #pcfV2 { d: path("M338,141 V155"); }
  .hero-card.card-c .pcf-svg #pcfH3 { d: path("M261,219 H274"); }
}
/* ===== 모바일 반응형 보강 (360~768px, 후순위 우선) ===== */
@media (max-width: 768px) {
  /* 가로 넘침 방지: 미디어가 컨테이너를 넘지 않도록 */
  img, video, canvas, iframe { max-width: 100%; height: auto; }
  /* 긴 단어/숫자 줄바꿈 */
  h1, h2, h3, p, .sh, .sm { overflow-wrap: break-word; word-break: keep-all; }
}


/* =====================================================================
   유체 스케일 레이어 (Fluid scaling) — Framer 스타일 연속 반응형
   소스 맨 끝에 위치 → 기존 단계별(px) 값들을 덮어써 360px~대형까지
   화면 폭에 따라 글자/여백이 끊김 없이 부드럽게 커지고 줄어듭니다.
   기준 보간 구간: 360px → 1400px
   ===================================================================== */
:root {
  /* 좌우 거터(gutter)도 폭에 따라 유동 */
  --pad-x: clamp(20px, 1.25rem + 1.7vw, 40px);
}
/* Hero */
.hero h1   { font-size: clamp(26px, 0.8rem + 3.2vw, 56px); }
.hero-sub  { font-size: clamp(17px, 0.78rem + 1.25vw, 30px); }
/* 대형 섹션 제목 (60px급) */
.converge-head .sh, .converge-head .sm,
.bento-head .sh,    .bento-head .sm { font-size: clamp(32px, 1.39rem + 2.69vw, 60px); }
/* 56px급 제목 */
/* .stats-title { font-size: 28px; letter-spacing: -0.6px; margin-bottom: 36px; } */
.cta-inner .sh, .cta-inner .sm { font-size: clamp(24px, 1.48rem + 2.31vw, 40px); }
/* 54px급 (스크롤 섹션 헤드) */
.scroll-left-head .sh, .scroll-left-head .sm,
.scroll-top-head .sh { font-size: clamp(30px, 1.36rem + 2.31vw, 54px); }
.scroll-left-title .sh { font-size: clamp(28px, 1.2rem + 2.1vw, 50px); }
/* 40px급 (고객사/표준 헤드) */
.customers-head .sh, .customers-head .sm,
.standards-head .sh, .standards-head .sm { font-size: clamp(28px, 1.49rem + 1.15vw, 40px); }
/* 본문 서브카피 */
.converge-sub { font-size: clamp(15px, 0.83rem + 0.48vw, 20px); }

/* === 1280px 미만: bento/stats도 모바일처럼 1열 배열로 전환 === */

@media (min-width: 769px) and (max-width: 1279px) {
  .bento-section { min-height: auto !important; }
  .bento-grid { grid-template-columns: 1fr !important; }
  .stats-highlight { grid-template-columns: 1fr !important; gap: 24px !important; }
  .gauge-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* scroll-section: 이 구간(769~1279)에선 폰 전용 scale 공식이 카드를 왜곡시키므로,
     데스크톱처럼 자연 크기로 렌더하되 가운데 정렬 + 폭 제한 */
  .scroll-section .scroll-layout {padding-left: 20px !important; padding-right: 20px !important; }
  .scroll-section .feat-panel > div {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .scroll-section .hero-visual {
    width: 100% !important;
    max-width: 760px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    overflow: hidden !important;
  }
  .scroll-section .hero-visual > * {
    position: relative !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* ── hero-dash-v2(fp2): scale 유지, 높이·overflow 잘림 해결 ── */
@media (max-width: 768px) {
  /* fp0: 데이터 수집 대시보드 - 실제 컨텐츠 높이에 맞춤 */
  .scroll-section #fp0 .hero-visual { height: calc((100vw - 40px) / 620 * 530) !important; }
  .scroll-section #fp0 .hero-visual > * { height: 530px !important; }
  /* fp2: 스케일 윈도우를 실제 콘텐츠 높이에 맞춤 */
  .scroll-section #fp2 .hero-visual {
    height: calc((100vw - 40px) / 620 * 470) !important;
  }
  .scroll-section #fp2 .hero-visual > * {
    height: 470px !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .scroll-section #fp0 { padding-bottom: 46px !important; }
  .scroll-section #fp2 { padding-bottom: 46px !important; }
  /* hero-dash-v2 내부 overflow:hidden이 잘라내지 않도록 해제 */
  .scroll-section #fp2 .hero-dash-v2 {
    overflow: visible !important;
    min-height: 0 !important;
  }
  /* fp4 (원격 제3자 검증): scale 방식 대신 자연 크기로 렌더 */
  .scroll-section #fp4 .hero-visual {
    height: auto !important;
    background: #fff !important;
    border: 0.5px solid var(--border) !important;
    border-radius: 14px !important;
  }
  .scroll-section #fp4 .hero-visual > * {
    position: relative !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
  }
  .scroll-section #fp4 .vc-stage {
    height: 280px !important;
    overflow: hidden !important;
  }
  .scroll-section #fp4 .vc-float-card {
    opacity: 1 !important;
  }
}