/* ═══════════════════════════════════════════════════════════════
   BDS — Cinematic Dark Layer
   style.css / story.css 뒤에 로드되어 히어로 아래 모든 섹션을
   다크 무드 + 글래스모피즘으로 덮어씁니다. (되돌리려면 index.html 에서
   이 파일과 js/cinematic.js 링크만 제거하면 됩니다.)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --cin-bg: #060A14;
  --cin-bg-2: #0A1124;
  --cin-text: #F4F7FF;
  --cin-muted: rgba(226, 232, 245, 0.68);
  --cin-faint: rgba(226, 232, 245, 0.44);
  --cin-glass: rgba(255, 255, 255, 0.055);
  --cin-glass-strong: rgba(255, 255, 255, 0.09);
  --cin-border: rgba(255, 255, 255, 0.12);
  --cin-sky: #6CC1FF;
  --cin-blue: #2390FC;
  --cin-lime: #D1FF44;
  --cin-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cin-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 28px 70px rgba(0, 0, 0, 0.42);
}

/* ───────── 베이스 ───────── */
body {
  background: var(--cin-bg);
  color: var(--cin-text);
}
::selection { background: rgba(108, 193, 255, 0.35); color: #fff; }
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--cin-sky); outline-offset: 3px;
}

/* 필름 그레인 (아주 미세) */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* 스크롤 진행 바 */
.cin-progress {
  position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 9500;
  background: linear-gradient(90deg, var(--cin-blue), var(--cin-sky), var(--cin-lime));
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}

/* 배경 앰비언트 빛 */
.cin-ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cin-orb { position: absolute; border-radius: 50%; will-change: transform; }
.cin-orb.a { width: 70vmax; height: 70vmax; left: -22vmax; top: 6vh; background: radial-gradient(circle, rgba(35, 144, 252, 0.30) 0%, rgba(35, 144, 252, 0) 62%); animation: cinFloat 22s ease-in-out infinite alternate; }
.cin-orb.b { width: 60vmax; height: 60vmax; right: -20vmax; top: 48vh; background: radial-gradient(circle, rgba(60, 90, 255, 0.24) 0%, rgba(60, 90, 255, 0) 62%); animation: cinFloat 28s ease-in-out -8s infinite alternate-reverse; }
.cin-orb.c { width: 38vmax; height: 38vmax; left: 30vw; top: 78vh; background: radial-gradient(circle, rgba(209, 255, 68, 0.10) 0%, rgba(209, 255, 68, 0) 64%); animation: cinFloat 30s ease-in-out -14s infinite alternate; }
@keyframes cinFloat { from { margin-left: 0; margin-top: 0; } to { margin-left: 4vmax; margin-top: 5vmax; } }

/* ───────── 헤더 ───────── */
header.scrolled {
  background: rgba(6, 10, 20, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

/* ───────── 섹션 배경은 투명 → 앰비언트 빛이 비침 ───────── */
.about-section, .stats-section, .narrative-section, .recommend-section,
.trust-section, .review-section, .reasons-section { background: transparent; }
.about-section, .stats-section, .narrative-section, .recommend-section,
.trust-section, .review-section { border-top: 1px solid rgba(255, 255, 255, 0.05); }

/* ───────── 타이포 ───────── */
.eyebrow { color: var(--cin-sky); letter-spacing: 0.6px; }
.section-head h2, .about-title, .stats-head h2 { color: #fff; }
.section-head p, .about-desc { color: var(--cin-muted); }
.about-desc strong { color: #fff; }
@media (min-width: 861px) {
  .section-head h2 { font-size: 44px; letter-spacing: -1.2px; }
  .about-title { font-size: 42px; letter-spacing: -1.2px; }
  .stats-head h2 { font-size: 34px; }
}
.rotate-word {
  background: linear-gradient(90deg, var(--cin-sky), var(--cin-lime));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-rotator::after { background: radial-gradient(circle, rgba(35, 144, 252, 0.34) 0%, rgba(35, 144, 252, 0) 70%); }
.about-rotator img { filter: drop-shadow(0 20px 40px rgba(35, 144, 252, 0.35)); }

/* ───────── 글래스 카드 공통 ───────── */
.stat-card, .recommend-card, .trust-card, .why-problem, .chat-mock, .reason-card:not(.is-main),
.final-cta .wrap {
  background: var(--cin-glass);
  border: 1px solid var(--cin-border);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--cin-glass-shadow);
}
.mini-review {
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid var(--cin-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 14px 34px rgba(0, 0, 0, 0.3);
}
.stat-card, .recommend-card, .trust-card, .reason-card { position: relative; }
.recommend-card:hover, .trust-card:hover, .reason-card:not(.is-main):hover, .stat-card:hover {
  border-color: rgba(108, 193, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 34px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(108, 193, 255, 0.12);
}
/* 마우스를 따라다니는 빛 */
[data-glass] { position: relative; }
[data-glass]::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity 0.4s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 62%);
}
[data-glass]:hover::before { opacity: 1; }

/* ───────── 버튼 ───────── */
.btn-navy {
  background: linear-gradient(180deg, #1B2D55, #122041);
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: 0 12px 34px rgba(35, 144, 252, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn-navy:hover { background: linear-gradient(180deg, #25396B, #17285A); border-color: rgba(108, 193, 255, 0.6); }
.btn-lime { box-shadow: 0 10px 40px rgba(209, 255, 68, 0.32); }
.btn-lime:hover { box-shadow: 0 16px 52px rgba(209, 255, 68, 0.48); }
.btn-primary { box-shadow: 0 10px 40px rgba(35, 144, 252, 0.45); }

/* ───────── About ───────── */
.partner-logo-grid .plogo {
  background: rgba(255, 255, 255, 0.94); border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.partner-logo-grid .plogo:hover { box-shadow: 0 16px 40px rgba(35, 144, 252, 0.35); }

/* ───────── Stats ───────── */
.stat-card .label { color: var(--cin-muted); }
.stat-card .num {
  font-size: 40px;
  background: linear-gradient(90deg, #fff 10%, var(--cin-sky) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ───────── Why ───────── */
.why-problem { background: rgba(255, 255, 255, 0.045); }
.why-tag { color: var(--cin-faint); }
.why-tag.is-blue { color: var(--cin-sky); }
.why-think .chat-single { background: #18233F; border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: none; backdrop-filter: none; }
.why-think .chat-single::after { border-top-color: #18233F; }
.bubble-light { color: #fff; }
.why-think-tail { color: #fff; }
.narrative-caption { color: var(--cin-muted); }
.narrative-caption strong { color: #fff; }
.chat-mock-header { background: rgba(255, 255, 255, 0.06); border-bottom-color: rgba(255, 255, 255, 0.1); }
.chat-mock-header .avatar { background: rgba(255, 255, 255, 0.12); box-shadow: none; }
.chat-mock-header .name { color: #fff; }
.chat-mock-header .status { color: var(--cin-faint); }
.msg.in { background: rgba(255, 255, 255, 0.09); color: #fff; }
.chat-mock-input { border-top-color: rgba(255, 255, 255, 0.1); }
.chat-mock-input .field { background: rgba(255, 255, 255, 0.07); color: var(--cin-faint); }
.why-solution h3 { color: #fff; }
.why-solution h3 em { color: var(--cin-sky); }
.video-embed { box-shadow: 0 30px 90px rgba(35, 144, 252, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1); background: #000; }
.why-divider { background: linear-gradient(to bottom, rgba(108, 193, 255, 0), var(--cin-sky)); transform-origin: 50% 0; }
.why-divider::after { background: var(--cin-sky); box-shadow: 0 0 0 5px rgba(108, 193, 255, 0.2), 0 0 24px rgba(108, 193, 255, 0.8); }

/* ───────── Recommend ───────── */
.recommend-card h4 { color: #fff; }
.recommend-card h4 em { color: var(--cin-sky); }
.recommend-card .ic { background: rgba(255, 255, 255, 0.08); }
.recommend-card .ic svg { color: var(--cin-sky); }
.recommend-card .rc-line { background: rgba(255, 255, 255, 0.14); }
.recommend-card p { color: var(--cin-muted); }

/* ───────── Trust ───────── */
.trust-card h4 { color: #fff; }
.trust-card h4 em { color: var(--cin-sky); }
.trust-card .tc-no { color: var(--cin-lime); }
.trust-card .tc-line { background: rgba(255, 255, 255, 0.14); }
.trust-card p { color: var(--cin-muted); }
.trust-card p strong { color: #fff; }
.trust-card .tc-media { background: rgba(255, 255, 255, 0.04); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.trust-card .ph-img {
  background: linear-gradient(135deg, rgba(35, 144, 252, 0.22), rgba(255, 255, 255, 0.04));
  border: 1px dashed rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.55);
}

/* ───────── Reasons ───────── */
.reasons-section { background: radial-gradient(70% 60% at 50% 0%, rgba(35, 144, 252, 0.16), rgba(35, 144, 252, 0) 70%); }
.reasons-section .section-head p { color: var(--cin-muted); }
.reason-card:not(.is-main) { background: rgba(255, 255, 255, 0.055); }
.reason-card.is-main { box-shadow: 0 34px 90px rgba(35, 144, 252, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28); }

/* ───────── Reviews ───────── */
.mini-review p { color: #EAF0FF; }
.mr-tag { color: var(--cin-sky); background: rgba(108, 193, 255, 0.12); }
.mr-who { color: var(--cin-faint); }
.review-marquee {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
}
@media (max-width: 767px) {
  .review-marquee {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  }
}

/* ───────── Final CTA ───────── */
.final-cta { background: radial-gradient(90% 120% at 50% 100%, rgba(35, 144, 252, 0.34) 0%, rgba(35, 144, 252, 0) 62%), transparent; padding: 120px 0; }
.final-cta .wrap { max-width: 980px; border-radius: 40px; padding: 80px 28px; }
.final-cta h2 { font-size: 44px; letter-spacing: -1.2px; }
@media (max-width: 767px) { .final-cta { padding: 72px 0; } .final-cta .wrap { width: calc(100% - 32px); padding: 54px 20px; border-radius: 30px; } .final-cta h2 { font-size: 30px; } }

/* ───────── Footer ───────── */
footer { background: #04070F; border-top: 1px solid rgba(255, 255, 255, 0.06); }

/* ───────── 모바일 Trust 카드(흰 배경 덮어쓰기) ───────── */
@media (max-width: 767px) {
  .trust-card { background: var(--cin-glass); border-color: var(--cin-border); box-shadow: var(--cin-glass-shadow); }
}

/* ───────── 스크롤 등장 (js/cinematic.js 가 Motion 로드에 성공했을 때만 적용) ─────────
   로드 실패/모션 줄이기 환경에서는 .cin-ready 가 붙지 않아 모든 콘텐츠가 그대로 보입니다. */
.cin-ready .reveal:not(.cin-done),
.cin-ready .reveal.in-view:not(.cin-done) { opacity: 0; transform: none; transition: none !important; }
.cin-ready .reveal.cin-done { opacity: 1; }
.cin-ready .cin-stagger.reveal:not(.cin-done) { opacity: 1; }
.cin-ready .cin-stagger:not(.cin-done) > *:not(.cin-kid-done) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .cin-orb { animation: none; }
  .cin-progress { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   라이트 그레이 섹션: About(비디에스는 어떤 곳인가요?) / Why(왜 비디에스에서…)
   다크 구간 사이에서 숨 고르는 연한 그레이톤 + 흰 카드
   ═══════════════════════════════════════════════════════════════ */
.about-section, .narrative-section {
  --lg-bg: #ECEFF4;
  background: var(--lg-bg);
  border-top: 0;
  color: var(--text);
}
.about-section .eyebrow, .narrative-section .eyebrow { color: var(--primary); }
.about-section .about-title, .narrative-section .section-head h2 { color: var(--navy); }
.narrative-section .section-head p, .about-section .about-desc { color: var(--text-body); }
.about-section .about-desc strong { color: var(--navy); }
.about-section .rotate-word {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--primary);
}
.about-section .about-rotator::after { background: radial-gradient(circle, rgba(35, 144, 252, 0.16) 0%, rgba(35, 144, 252, 0) 72%); }
.about-section .about-rotator img { filter: drop-shadow(0 18px 28px rgba(18, 33, 61, 0.18)); }
.about-section .partner-logo-grid .plogo {
  background: #fff; border-color: var(--border); box-shadow: 0 6px 18px rgba(18, 33, 61, 0.07);
}
.about-section .partner-logo-grid .plogo:hover { box-shadow: 0 12px 28px rgba(18, 33, 61, 0.14); }
.about-section .btn-navy {
  background: var(--navy); border: 0;
  box-shadow: 0 12px 28px rgba(18, 33, 61, 0.28);
}
.about-section .btn-navy:hover { background: #0B1730; }

/* Why — 흰 카드 */
.narrative-section .why-problem {
  background: #fff; border: 1px solid #E3E9F3;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 18px 50px rgba(18, 33, 61, 0.08);
}
.narrative-section .why-tag { color: var(--text-muted); }
.narrative-section .why-tag.is-blue { color: var(--primary); }
.narrative-section .why-think .chat-single {
  background: var(--bg-soft); border-color: #DCE3EF; box-shadow: 0 10px 28px rgba(18, 33, 61, 0.08);
}
.narrative-section .why-think .chat-single::after { border-top-color: var(--bg-soft); }
.narrative-section .bubble-light { color: var(--navy); }
.narrative-section .why-think-tail { color: var(--text); }
.narrative-section .narrative-caption { color: var(--text-body); }
.narrative-section .narrative-caption strong { color: var(--navy); }
.narrative-section .chat-mock {
  background: #fff; border: 1px solid #E3E9F3;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 18px 44px rgba(18, 33, 61, 0.12);
}
.narrative-section .chat-mock-header { background: var(--bg-soft); border-bottom-color: #E3E9F3; }
.narrative-section .chat-mock-header .avatar { background: #fff; box-shadow: var(--shadow-sm); }
.narrative-section .chat-mock-header .name { color: var(--navy); }
.narrative-section .chat-mock-header .status { color: var(--text-muted); }
.narrative-section .msg.in { background: var(--bg-soft); color: var(--navy); }
.narrative-section .chat-mock-input { border-top-color: #E3E9F3; }
.narrative-section .chat-mock-input .field { background: var(--bg-soft); color: var(--text-muted); }
.narrative-section .why-solution h3 { color: var(--navy); }
.narrative-section .why-solution h3 em { color: var(--primary); }
.narrative-section .video-embed { box-shadow: 0 28px 70px rgba(18, 33, 61, 0.22); background: var(--navy); }
.narrative-section .why-divider { background: linear-gradient(to bottom, rgba(35, 144, 252, 0), var(--primary)); }
.narrative-section .why-divider::after { background: var(--primary); box-shadow: 0 0 0 5px rgba(35, 144, 252, 0.18); }

/* ═══════════════════════════════════════════════════════════════
   라이트 그레이 섹션 2: Recommend(이런 상황이라면) / Review(고객 후기)
   ═══════════════════════════════════════════════════════════════ */
.recommend-section, .review-section { border-top: 0; color: var(--text); }
.recommend-section { background: #F3F5F9; }
.review-section { background: #ECEFF4; }
.recommend-section .eyebrow, .review-section .eyebrow { color: var(--primary); }
.recommend-section .section-head h2, .review-section .section-head h2 { color: var(--navy); }

.recommend-section .recommend-card {
  background: #fff; border: 1px solid #E3E9F3;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 10px 30px rgba(18, 33, 61, 0.06);
}
.recommend-section .recommend-card:hover {
  border-color: rgba(35, 144, 252, 0.35);
  box-shadow: 0 22px 50px rgba(18, 33, 61, 0.14);
}
.recommend-section .recommend-card h4 { color: var(--navy); }
.recommend-section .recommend-card h4 em { color: #1677FF; }
.recommend-section .recommend-card .ic { background: var(--bg-soft); }
.recommend-section .recommend-card .ic svg { color: #1677FF; }
.recommend-section .recommend-card .rc-line { background: #D5DAE3; }
.recommend-section .recommend-card p { color: var(--text-muted); }

.review-section .mini-review {
  background: #fff; border: 1px solid #E3E9F3;
  box-shadow: 0 8px 24px rgba(18, 33, 61, 0.07);
}
.review-section .mini-review p { color: var(--text-body); }
.review-section .mr-tag { color: var(--primary); background: rgba(35, 144, 252, 0.09); }
.review-section .mr-who { color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   라이트 그레이 섹션 3: Stats(오랜 기간 한 분 한 분에게…)
   ═══════════════════════════════════════════════════════════════ */
.stats-section { background: #F4F6FA; border-top: 0; }
.stats-section .stats-head h2 { color: var(--navy); }
.stats-section .stat-card {
  background: #fff; border: 1px solid #E3E9F3;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 10px 30px rgba(18, 33, 61, 0.06);
}
.stats-section .stat-card:hover {
  border-color: rgba(35, 144, 252, 0.35);
  box-shadow: 0 22px 50px rgba(18, 33, 61, 0.14);
}
.stats-section .stat-card .label { color: var(--text-muted); }
.stats-section .stat-card .num {
  background: linear-gradient(90deg, #0B4A94 0%, var(--primary) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   후기 섹션: 너무 어둡지 않은 미드톤 블루 배경 + 흰 카드로 시선 집중
   ═══════════════════════════════════════════════════════════════ */
.review-section {
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(108, 193, 255, 0.34) 0%, rgba(108, 193, 255, 0) 70%),
    linear-gradient(170deg, #2358B8 0%, #1B3F8F 52%, #152F6E 100%);
}
.review-section .eyebrow { color: #BFE3FF; }
.review-section .section-head h2 { color: #fff; }
.review-section .mini-review {
  background: #fff; border: 0;
  box-shadow: 0 16px 40px rgba(6, 18, 52, 0.38);
}

/* 후기 카드: 글래스모피즘 (카드가 계속 흐르는 마퀴라 backdrop-filter 대신
   반투명 그라데이션 + 밝은 테두리 + 윗면 하이라이트로 유리 질감을 표현 — 성능 보호) */
.review-section .mini-review {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.07) 100%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 18px 44px rgba(4, 14, 48, 0.32);
}
.review-section .mini-review p { color: #fff; }
.review-section .mr-tag { color: #fff; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.22); }
.review-section .mr-who { color: rgba(255, 255, 255, 0.66); }
.review-section .mr-stars { color: #FFC94D; text-shadow: 0 0 12px rgba(255, 201, 77, 0.45); }

/* 말풍선 꼬리: 테두리 라인이 꼬리까지 이어지도록 (바깥 삼각형=라인색, 안쪽 삼각형=배경색) */
.narrative-section .why-think .chat-single { border-color: #C5D0E3; }
.narrative-section .why-think .chat-single::before {
  content: ''; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%);
  border-left: 14.5px solid transparent; border-right: 14.5px solid transparent; border-top: 15.5px solid #C5D0E3;
  pointer-events: none;
}
.narrative-section .why-think .chat-single::after {
  z-index: 1; bottom: -13px; border-top-color: var(--bg-soft);
}

/* ═══════════════════════════════════════════════════════════════
   REVIEWS v2 — 가로 2~3줄 풀블리드 마퀴 + 아바타 글래스 카드
   (PC·모바일 공통. 위·아래 줄은 반대 방향으로 흐름)
   ═══════════════════════════════════════════════════════════════ */
.review-section { padding: 120px 0 110px; overflow: hidden; }
.review-section .section-head { margin-bottom: 0; }

/* 상단 요약 */
.review-summary {
  display: inline-flex; align-items: center; gap: 22px; margin-top: 30px; padding: 14px 30px;
  border-radius: 999px; color: #fff;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 14px 40px rgba(4, 14, 48, 0.28);
}
.review-summary .rs-item { display: flex; align-items: baseline; gap: 8px; }
.review-summary .rs-item b { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.review-summary .rs-item span { font-size: 13.5px; color: rgba(255, 255, 255, 0.72); font-weight: 600; }
.review-summary .rs-stars { color: #FFC94D; letter-spacing: 3px; font-size: 16px; text-shadow: 0 0 14px rgba(255, 201, 77, 0.55); }
.review-summary .rs-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.25); }

/* 마퀴: 화면 끝까지 */
.review-section .review-marquee {
  display: flex; flex-direction: column; gap: 18px; height: auto;
  width: 100vw; margin: 54px 0 0 calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.review-section .review-col { overflow: hidden; padding: 4px 0 14px; }
.review-section .review-col:nth-child(4) { display: none; }
.review-section .review-col-track {
  flex-direction: row; gap: 18px; width: max-content; padding-right: 18px;
  animation-name: reviewScrollX; animation-timing-function: linear; animation-iteration-count: infinite;
}
.review-section .review-col:nth-child(1) .review-col-track { animation-duration: 78s; }
.review-section .review-col:nth-child(2) .review-col-track { animation-duration: 90s; animation-direction: reverse; }
.review-section .review-col:nth-child(3) .review-col-track { animation-duration: 70s; }
.review-section .review-col:hover .review-col-track,
.review-section .review-col:focus-within .review-col-track,
.review-section .review-marquee.is-paused .review-col-track { animation-play-state: paused; }

/* 카드 */
.review-section .mini-review {
  flex: none; width: 340px; position: relative; overflow: hidden;
  display: grid; grid-template-columns: 46px 1fr auto;
  grid-template-areas: "av who tag" "stars stars stars" "txt txt txt";
  column-gap: 12px; row-gap: 12px; align-items: center;
  padding: 22px 24px 24px; border-radius: 26px;
  transition: transform 0.35s var(--cin-ease), box-shadow 0.35s ease, border-color 0.35s ease;
}
.review-section .mini-review:hover {
  transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 26px 56px rgba(4, 14, 48, 0.42);
}
.review-section .mini-review::before {
  content: "\201C"; position: absolute; right: 16px; bottom: -34px; font: 800 130px/1 Georgia, "Times New Roman", serif;
  color: rgba(255, 255, 255, 0.09); pointer-events: none;
}
.review-section .mr-avatar {
  grid-area: av; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--c1, #2390FC), var(--c2, #6CC1FF));
  box-shadow: 0 8px 18px rgba(4, 14, 48, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.review-section .mr-who { grid-area: who; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; min-width: 0; }
.review-section .mr-who b { font-size: 15.5px; font-weight: 800; color: #fff; }
.review-section .mr-who small { font-size: 12px; color: rgba(255, 255, 255, 0.62); font-weight: 600; }
.review-section .mr-tag { grid-area: tag; justify-self: end; margin: 0; white-space: nowrap; }
.review-section .mr-stars { grid-area: stars; margin: 4px 0 0; font-size: 14px; letter-spacing: 3px; }
.review-section .mini-review p {
  grid-area: txt; margin: 0; font-size: 15.5px; line-height: 1.65; font-weight: 600; letter-spacing: -0.2px; position: relative; z-index: 1;
}

/* 일시정지 버튼 */
.review-toggle {
  display: flex; align-items: center; gap: 9px; margin: 34px auto 0; padding: 11px 20px;
  border-radius: 999px; color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: background 0.25s ease, transform 0.2s ease;
}
.review-toggle:hover { background: rgba(255, 255, 255, 0.2); }
.review-toggle:active { transform: scale(0.97); }
.review-toggle .rt-icon { position: relative; width: 12px; height: 12px; }
.review-toggle .rt-icon::before, .review-toggle .rt-icon::after {
  content: ""; position: absolute; top: 0; width: 4px; height: 12px; border-radius: 1px; background: #fff;
}
.review-toggle .rt-icon::before { left: 0; }
.review-toggle .rt-icon::after { right: 0; }
.review-toggle[aria-pressed="true"] .rt-icon::before {
  left: 1px; width: 0; height: 0; border-radius: 0; background: none;
  border-left: 11px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.review-toggle[aria-pressed="true"] .rt-icon::after { display: none; }

@media (max-width: 767px) {
  .review-section { padding: 84px 0 80px; }
  .review-summary { gap: 12px; padding: 12px 18px; flex-wrap: wrap; justify-content: center; border-radius: 26px; }
  .review-summary .rs-item b { font-size: 20px; }
  .review-summary .rs-item span { font-size: 12px; }
  .review-summary .rs-sep { display: none; }
  .review-section .review-marquee { margin-top: 38px; gap: 14px; }
  .review-section .review-col-track { gap: 14px; padding-right: 14px; }
  .review-section .mini-review { width: 292px; padding: 18px 20px 20px; }
  .review-section .mini-review p { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .review-section .review-col { overflow-x: auto; }
  .review-section .review-col-track { animation: none; }
  .review-toggle { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   사이트 전반 다듬기
   ═══════════════════════════════════════════════════════════════ */
html { scroll-padding-top: 84px; }
h1, h2, h3 { text-wrap: balance; }
.section-head p, .about-desc { max-width: 640px; margin-left: auto; margin-right: auto; line-height: 1.8; }

/* 눌림 피드백 */
.btn:active, .story-cta:active, .float-call:active { transform: scale(0.97); }

/* 라임 버튼: 가끔 스치는 빛 */
.btn-lime { position: relative; overflow: hidden; isolation: isolate; }
.btn-lime::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg); animation: cinShine 5.2s ease-in-out infinite;
}
@keyframes cinShine { 0%, 62% { left: -70%; } 100% { left: 140%; } }
@media (prefers-reduced-motion: reduce) { .btn-lime::after { animation: none; display: none; } }

/* 상단 메뉴: 현재 섹션 표시 */
nav.gnb a { position: relative; }
nav.gnb a::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; width: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cin-sky), var(--cin-lime)); transform: translateX(-50%);
  transition: width 0.35s var(--cin-ease); box-shadow: 0 0 12px rgba(108, 193, 255, 0.7);
}
nav.gnb a.is-current { color: #fff; }
nav.gnb a.is-current::after { width: 100%; }

/* 섹션 경계를 부드럽게 (밝은 → 어두운 / 어두운 → 블루 → 어두운) */
.trust-section, .review-section, .final-cta { position: relative; }
.review-section::before, .final-cta::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 142px; z-index: 0; pointer-events: none;
}
.trust-section { border-top: 0; }
.review-section::before { background: linear-gradient(to bottom, rgba(6, 10, 20, 0.95) 0%, rgba(6, 10, 20, 0) 100%); }
.final-cta::before { background: linear-gradient(to bottom, #152F6E 0%, rgba(21, 47, 110, 0) 100%); }
.trust-section > .wrap, .review-section > .wrap, .final-cta > .wrap { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════
   MOTION EXTRA — 제목 단어 리빌 · 형광펜 · 3D 틸트 · 마그네틱 · 리플 · 채팅 연출 · 커서 빛
   (대부분 .cin-ready — Motion 로드 성공 + 동작 줄이기 아님 — 일 때만 적용)
   ═══════════════════════════════════════════════════════════════ */

/* 제목 단어 리빌 */
.cin-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.08em 0 0.16em; margin: -0.08em 0 -0.16em; }
.cin-wi { display: inline-block; }
.cin-ready .cin-split:not(.cin-split-done) .cin-wi { transform: translateY(108%); opacity: 0; }

/* 형광펜 */
.cin-ready .reason-card strong mark:not(.cin-hl-done) {
  background: linear-gradient(rgba(209, 255, 68, 0.16), rgba(209, 255, 68, 0.16)) no-repeat 0 0 / 0% 100%;
}
.reason-card strong mark.cin-hl-done { background-size: 100% 100%; }

/* 카드 3D 틸트 (마우스를 올렸을 때 · 포인터 기기만) */
@media (hover: hover) and (pointer: fine) {
  html.cin-ready [data-tilt]:hover {
    transform: perspective(900px) translateY(-8px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  }
  html.cin-ready [data-tilt] { transition: transform 0.35s var(--cin-ease), box-shadow 0.3s ease, border-color 0.3s ease; will-change: transform; }
}

/* 마그네틱 + 리플 버튼 */
.btn, .story-cta, .review-toggle { position: relative; overflow: hidden; }
.btn { translate: var(--tx, 0) var(--ty, 0); transition: translate 0.35s var(--cin-ease), transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.story-cta { overflow: hidden; }
.cin-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: rgba(255, 255, 255, 0.42); transform: scale(0); opacity: 0;
}

/* 채팅 목업: 입력 중… 말풍선 */
.cin-typing {
  position: absolute; right: 16px; display: flex; gap: 5px; padding: 15px 18px;
  border-radius: 18px; border-bottom-right-radius: 4px; background: var(--primary);
  box-shadow: 0 6px 16px rgba(35, 144, 252, 0.28); opacity: 0;
}
.cin-typing i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); animation: cinDot 1.1s ease-in-out infinite; }
.cin-typing i:nth-child(2) { animation-delay: 0.15s; }
.cin-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes cinDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.55; } 30% { transform: translateY(-5px); opacity: 1; } }

/* 커서를 따라오는 은은한 빛 */
.cin-cursor {
  position: fixed; left: 0; top: 0; width: 520px; height: 520px; border-radius: 50%;
  pointer-events: none; z-index: 1; opacity: 0; mix-blend-mode: screen; will-change: transform;
  background: radial-gradient(circle, rgba(108, 193, 255, 0.17) 0%, rgba(108, 193, 255, 0) 62%);
  transition: opacity 0.5s ease;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE MOTION — 터치 기기에서도 확실히 보이는 모션
   ═══════════════════════════════════════════════════════════════ */

/* 문장 스크럽(단어별 밝아짐): 래퍼는 자연스러운 인라인으로 */
.cin-w.cin-fw { display: inline; overflow: visible; padding: 0; margin: 0; }
.cin-fw .cin-wi { display: inline; }

/* 카드를 누르고 있는 동안: 살짝 눌리고 누른 지점에서 빛이 번짐 */
[data-glass].is-pressed::before { opacity: 1; }
html.cin-ready [data-tilt].is-pressed { transform: scale(0.972); }

/* 신뢰 카드 이미지 영역: 안쪽이 스크롤에 따라 움직이도록 살짝 키워 둠 */
.cin-ready .trust-card .tc-media > * { scale: 1.18; transition: scale 0.7s var(--cin-ease); }
.cin-ready .trust-card:hover .tc-media > * { scale: 1.25; }
.trust-card:hover .tc-media img { transform: none; }

@media (max-width: 767px) {
  /* 모바일은 카드 위로 올라올 때 빛을 더 크게 */
  [data-glass]::before { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 62%); }
}

/* ═══════════════════════════════════════════════════════════════
   CHANNELS — 블로그 · 유튜브 · 인스타그램 앨범
   ═══════════════════════════════════════════════════════════════ */
.social-section { position: relative; background: transparent; }
.social-section::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 142px; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, #152F6E 0%, rgba(21, 47, 110, 0) 100%);
}
.social-section > .wrap { position: relative; z-index: 1; }
.final-cta::before { display: none; }
.social-section .section-head h2 { color: #fff; }
.social-section .section-head p { color: var(--cin-muted); }
.social-section .eyebrow { color: var(--cin-sky); }

/* 탭 */
.sc-tabs {
  display: flex; width: fit-content; max-width: 100%; margin: 44px auto 0; padding: 6px; gap: 4px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.sc-tab {
  display: flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; cursor: pointer;
  color: rgba(255, 255, 255, 0.7); font-size: 15px; font-weight: 700; transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.sc-tab svg { width: 18px; height: 18px; }
.sc-tab:hover { color: #fff; }
.sc-tab[aria-selected="true"] {
  color: #fff; background: linear-gradient(135deg, rgba(35, 144, 252, 0.95), rgba(21, 101, 204, 0.95));
  box-shadow: 0 8px 24px rgba(35, 144, 252, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* 앨범 그리드 */
.sc-panels { margin-top: 40px; }
.sc-panel[hidden], .sc-grid[hidden], .sc-empty[hidden], .sc-more[hidden] { display: none; }
.sc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sc-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; color: #fff; position: relative;
  background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 56px rgba(0, 0, 0, 0.38);
  transition: transform 0.35s var(--cin-ease), border-color 0.3s ease, box-shadow 0.3s ease;
  animation: scIn 0.7s var(--cin-ease) both; animation-delay: calc(var(--i, 0) * 70ms);
}
a.sc-card:hover { transform: translateY(-8px); border-color: rgba(108, 193, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 36px 80px rgba(0, 0, 0, 0.5); }
@keyframes scIn { from { opacity: 0; transform: translateY(26px) scale(0.97); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }

.sc-thumb { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.sc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--cin-ease); }
a.sc-card:hover .sc-thumb img { transform: scale(1.08); }
.sc-play {
  position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s var(--cin-ease), background 0.3s ease;
}
.sc-play::after { content: ""; position: absolute; left: 23px; top: 18px; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
a.sc-card:hover .sc-play { transform: scale(1.12); background: rgba(255, 0, 51, 0.85); }

.sc-meta { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.sc-meta b {
  font-size: 16.5px; font-weight: 800; line-height: 1.45; letter-spacing: -0.3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-meta small {
  font-size: 13.5px; line-height: 1.6; color: var(--cin-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-meta time { font-size: 12.5px; color: var(--cin-faint); font-weight: 600; letter-spacing: 0.3px; }

.sc-ig { background: #fff; }
.sc-ig iframe { width: 100%; height: 560px; border: 0; display: block; }

/* 더 보기 / 채널 바로가기 */
.sc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.sc-more, .sc-channel {
  display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 999px; cursor: pointer;
  color: #fff; font-size: 15px; font-weight: 700; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: background 0.25s ease, transform 0.2s ease, border-color 0.25s ease;
}
.sc-more:hover, .sc-channel:hover { background: rgba(255, 255, 255, 0.17); border-color: rgba(255, 255, 255, 0.45); transform: translateY(-2px); }
.sc-empty { text-align: center; color: var(--cin-muted); font-size: 16px; line-height: 1.7; padding: 28px 0 0; }

@media (max-width: 1000px) { .sc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .sc-grid { grid-template-columns: 1fr; gap: 16px; }
  .sc-tabs { margin-top: 32px; width: 100%; justify-content: space-between; }
  .sc-tab { flex: 1; justify-content: center; padding: 12px 8px; font-size: 14px; gap: 6px; }
  .sc-tab svg { width: 16px; height: 16px; }
  .sc-panels { margin-top: 28px; }
  .sc-ig iframe { height: 520px; }
}
@media (prefers-reduced-motion: reduce) { .sc-card { animation: none; } }