/* ================================================================ PATIENT FUNNEL — "마음의 온도" THERMO Layer v1.0 (2026) ---------------------------------------------------------------- 퍼널이 깊어질수록(인지 → 소개) 환자 마음의 온도는 올라가고, 페이지의 빛은 아침 → 오후 → 노을 → 황혼 → 밤으로 깊어집니다. js/thermo.js가 스크롤 위치에 따라 를 토글. nova.css의 모든 컴포넌트가 토큰(var)을 쓰므로 변수만 재정의합니다. ================================================================ */ /* ---------- 0. 온도 전환 트랜지션 ---------- */ body, .masthead, .factsheet, .quote-card, .knowledge-card, .question-card, .ba-slider, .chart-panel, .video-card, .target-card, .pain, .search-bar, .filter-pill, .stage-card, .proof-ledger, .stages-ledger, .faq-list, .learn-grid, .webinar-banner, .ticker, .modal__panel { transition: background-color 0.9s ease, border-color 0.9s ease, color 0.9s ease, box-shadow 0.9s ease; } .hero__title, .chapter__title, .display, .stat-strip, .fact, .proof-row, .faq-item, .story-item, .sub-head, .kicker, .stage-card__name, .stage-card__num, .stage-card__summary { transition: color 0.9s ease, border-color 0.9s ease; } /* ---------- 1. PHASE 1 — 오후 (관심·예약) ---------- */ html[data-phase="1"] { --paper: #F2E9D6; --paper-rgb: 242, 233, 214; --paper-soft: #F8F1E2; --white: #FDF8EC; --mark: #F1DFA4; } /* ---------- 2. PHASE 2 — 노을 (신뢰·스토리) ---------- */ html[data-phase="2"] { --paper: #EADAB9; --paper-rgb: 234, 218, 185; --paper-soft: #F1E4C9; --white: #F8EED6; --ink: #171309; --ink-70: rgba(23, 19, 9, 0.74); --ink-50: rgba(23, 19, 9, 0.54); --ink-30: rgba(23, 19, 9, 0.34); --line: rgba(23, 19, 9, 0.16); --line-soft: rgba(23, 19, 9, 0.09); --green: #0C5039; --mark: #EFD283; } /* ---------- 3. PHASE 3 — 황혼 (결심·웨비나) ---------- */ html[data-phase="3"] { --paper: #2E362E; --paper-rgb: 46, 54, 46; --paper-soft: #38423A; --white: #3A443B; --ink: #F1EEE2; --ink-70: rgba(241, 238, 226, 0.78); --ink-50: rgba(241, 238, 226, 0.56); --ink-30: rgba(241, 238, 226, 0.36); --line: rgba(241, 238, 226, 0.2); --line-soft: rgba(241, 238, 226, 0.1); --green: #6FCB9C; --green-deep: #8ADBB0; --green-soft: rgba(111, 203, 156, 0.14); --mark: rgba(224, 183, 86, 0.32); --red: #E0765F; --panel: #171C17; } /* ---------- 4. PHASE 4 — 밤 (팬덤·소개) ---------- */ html[data-phase="4"] { --paper: #11150F; --paper-rgb: 17, 21, 15; --paper-soft: #171C15; --white: #1B211A; --ink: #F2EFE4; --ink-70: rgba(242, 239, 228, 0.76); --ink-50: rgba(242, 239, 228, 0.54); --ink-30: rgba(242, 239, 228, 0.34); --line: rgba(242, 239, 228, 0.18); --line-soft: rgba(242, 239, 228, 0.09); --green: #7DD8A8; --green-deep: #9AE6BE; --green-soft: rgba(125, 216, 168, 0.13); --mark: rgba(224, 183, 86, 0.34); --red: #E88A74; --panel: #0A0D09; } /* 어두운 국면 보정: 카드 호버 섀도/헤더 */ html[data-phase="3"] .quote-card:hover, html[data-phase="4"] .quote-card:hover, html[data-phase="3"] .knowledge-card:hover, html[data-phase="4"] .knowledge-card:hover, html[data-phase="3"] .question-card:hover, html[data-phase="4"] .question-card:hover { box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.7); } html[data-phase="3"] .stage-card:hover, html[data-phase="4"] .stage-card:hover { background: rgba(255, 255, 255, 0.04); } html[data-phase="3"] .stage-card[aria-expanded="true"] .stage-card__toggle, html[data-phase="4"] .stage-card[aria-expanded="true"] .stage-card__toggle { background: var(--ink); color: var(--paper); border-color: var(--ink); } html[data-phase="3"] .masthead__cta, html[data-phase="4"] .masthead__cta, html[data-phase="3"] .btn--ink, html[data-phase="4"] .btn--ink { background: var(--ink); color: var(--paper) !important; } html[data-phase="3"] .btn--line, html[data-phase="4"] .btn--line { border-color: var(--ink); color: var(--ink); } html[data-phase="3"] .btn--line:hover, html[data-phase="4"] .btn--line:hover { background: var(--ink); color: var(--paper); } html[data-phase="3"] .masthead__burger span, html[data-phase="4"] .masthead__burger span { background: var(--ink); } html[data-phase="3"] .ticker__label, html[data-phase="4"] .ticker__label { background: linear-gradient(90deg, var(--paper) 72%, transparent); } html[data-phase="3"] ::selection, html[data-phase="4"] ::selection { background: rgba(224,183,86,0.4); color: #FFF; } html[data-phase="3"] .ba-slider__before, html[data-phase="4"] .ba-slider__before { background: rgba(242,239,228,0.28); } html[data-phase="3"] .ba-slider__track, html[data-phase="4"] .ba-slider__track { background: rgba(0,0,0,0.3); } html[data-phase="3"] .floating-cta a, html[data-phase="4"] .floating-cta a { background: var(--green); color: #0B120D; } html[data-phase="3"] .progress-line, html[data-phase="4"] .progress-line { background: var(--green); } html[data-phase="4"] .finale { background: linear-gradient(180deg, #0C120D, #060906); } html[data-phase="4"] .footer { background: #060906; } /* 밤하늘 미광 — 밤 국면에서만 은은한 별빛 그레인 */ html[data-phase="4"] body::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1.5px 1.5px at 18% 22%, rgba(255,255,255,0.35), transparent 60%), radial-gradient(1px 1px at 68% 12%, rgba(255,255,255,0.28), transparent 60%), radial-gradient(1.5px 1.5px at 84% 38%, rgba(255,255,255,0.22), transparent 60%), radial-gradient(1px 1px at 38% 64%, rgba(255,255,255,0.18), transparent 60%), radial-gradient(1.5px 1.5px at 8% 78%, rgba(255,255,255,0.24), transparent 60%); opacity: 0; animation: thermoStars 1.6s ease forwards; } @keyframes thermoStars { to { opacity: 1; } } body > * { position: relative; z-index: 1; } /* ---------- 5. 마음의 온도 게이지 ---------- */ .thermo-gauge { position: fixed; left: 22px; bottom: 22px; z-index: 810; display: flex; align-items: center; gap: 11px; background: color-mix(in srgb, var(--white) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px 10px 14px; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.35); transform: translateY(90px); opacity: 0; transition: transform 0.6s var(--e-out), opacity 0.6s, background-color 0.9s ease, border-color 0.9s ease; } .thermo-gauge.is-visible { transform: none; opacity: 1; } .thermo-gauge > i { font-size: 17px; color: var(--thermo-hue, #0E5B43); transition: color 0.6s; } .thermo-gauge__body { display: flex; flex-direction: column; line-height: 1.25; } .thermo-gauge__label { font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-50); } .thermo-gauge__value { font-family: var(--f-serif); font-weight: 900; font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; } .thermo-gauge__phase { font-size: 10.5px; font-weight: 700; color: var(--thermo-hue, #0E5B43); transition: color 0.6s; } .thermo-gauge__bar { width: 56px; height: 5px; border-radius: 999px; background: var(--line-soft); overflow: hidden; } .thermo-gauge__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #0E5B43, #C99A2E, #C4502F); background-size: 220px 100%; transition: width 0.25s linear; } @media (max-width: 720px) { .thermo-gauge { left: 14px; bottom: 14px; padding: 8px 14px 8px 12px; gap: 9px; } .thermo-gauge__bar { display: none; } .thermo-gauge__value { font-size: 15px; } } /* finale 온도 카피 */ .finale__thermo { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246, 243, 236, 0.72); border: 1px solid rgba(246, 243, 236, 0.25); border-radius: 999px; padding: 9px 18px; margin-bottom: 26px; } .finale__thermo i { color: #E8B563; } @media (prefers-reduced-motion: reduce) { body, .masthead, .factsheet, .quote-card, .knowledge-card, .question-card, .ba-slider, .chart-panel, .video-card, .target-card, .pain, .search-bar, .stage-card { transition: none; } html[data-phase="4"] body::after { animation: none; opacity: 1; } }