/* ============================================
   라이프리포트 - Design System
   ============================================ */
:root {
  color-scheme: light;  /* 다크모드에서도 라이트 UI 고정 (상태바·하단바 회색 방지) */
  --color-primary: #1a1a1a;
  --color-primary-dark: #000;
  --color-primary-light: #333;
  --color-bg: #FFFFFF;
  --color-bg-card: #7A1B1B;
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #666666;
  --color-text-light: #999999;
  --color-text-white: #FFFFFF;
  --color-border: #E8E8E8;
  --color-dot-inactive: #D0D0D0;
  --color-dot-active: #1A1A1A;
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --max-width: 480px;
  --header-height: 60px;
  --tab-height: 44px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --radius-sm: 8px;
  --radius-md: 12px;
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; overscroll-behavior:none; }
body { font-family:var(--font-sans); background:#fff; color:var(--color-text-primary); line-height:1; letter-spacing:-0.025em; overflow-x:hidden; min-height:100vh; min-height:100dvh; overscroll-behavior:none; }
/* 폼 요소는 자간을 상속하지 않으므로 전역 자간을 명시적으로 이어받음 */
button, input, optgroup, select, textarea { letter-spacing:inherit; }
a { text-decoration:none; color:inherit; }
button { border:none; background:none; cursor:pointer; font-family:inherit; font-size:inherit; }
img { display:block; max-width:100%; }
::-webkit-scrollbar { width:0; display:none; }
body { scrollbar-width:none; }

/* App Container */
#app-container { max-width:var(--max-width); margin:0 auto; background:var(--color-bg); min-height:100vh; min-height:100dvh; position:relative; box-shadow:0 0 40px rgba(0,0,0,0.06); }

/* 노치(상단 safe-area) 채움 — 상태바 영역 항상 흰색 */
#notch-fill { position:fixed; top:0; left:50%; transform:translateX(-50%); width:100%; max-width:var(--max-width); height:env(safe-area-inset-top); background:#fff; z-index:150; pointer-events:none; transition:background .25s ease; }

/* 상단 흐린 배경 (헤더+탭+캐러셀 뒤에 깔리는 blur 레이어) */
#page-main { position:relative; padding-bottom:0; }
/* 콘텐츠가 짧아도 푸터가 항상 화면 맨 아래에 붙도록 (sticky footer) */
#page-main.active { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
#page-main #main-footer { margin-top:auto; }

/* 하단 플로팅 내비게이션 */
.floating-nav { position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:200; width:min(var(--max-width), 100%); height:calc(80px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:#fff; border-radius:20px 20px 0 0; box-shadow:0 -2px 12px rgba(17,17,17,0.08); display:flex; align-items:center; justify-content:center; gap:2px; padding-left:24px; padding-right:24px; transition:transform var(--transition-normal), opacity var(--transition-normal); }
/* 맨 아래(푸터)까지 스크롤하면 아래로 사라짐 */
.floating-nav.nav-hidden { transform:translateX(-50%) translateY(180px); opacity:0; pointer-events:none; }
.fnav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; height:100%; background:none; border:none; cursor:pointer; color:#9a9a9a; font-size:12px; font-weight:500; white-space:nowrap; }
.fnav-item svg { width:21px; height:21px; display:block; }
.fnav-item.active { color:#2f7bf6; }
.hero-bg { position:absolute; top:0; left:0; right:0; height:calc(176px + min(480px, 100vw) * 1.0667); z-index:0; overflow:hidden; pointer-events:none; }
.hero-bg-img { position:absolute; inset:-48px; background-size:cover; background-position:center top; filter:blur(24px); transform:scale(1.15); transition:background-image .4s ease; }
.hero-bg-dark { position:absolute; inset:0; background:rgba(17,17,17,0.5); }
.hero-bg-veil { position:absolute; left:0; right:0; bottom:0; height:192px; background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 67%, #fff 100%); }
/* 캐러셀은 흐린 배경 위에 올라오도록 (헤더/탭은 sticky라 이미 위에 있음) */
#page-main > #main-carousel { position:relative; z-index:1; }

/* Page system */
.page { display:none; min-height:100vh; min-height:100dvh; }
.page.active { display:block; animation:fadeIn .3s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ============================================
   MAIN PAGE - Header
   ============================================ */
#main-header { position:sticky; top:0; z-index:100; height:calc(var(--header-height) + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); background:transparent; transition:background var(--transition-fast), box-shadow var(--transition-fast); }
#main-header.solid { background:var(--color-bg); box-shadow:none; }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:var(--header-height); padding:0 24px; }
.logo-area { display:flex; align-items:center; cursor:pointer; }
.logo-img { height:18px; width:auto; object-fit:contain; }
.logo-img-main { height:18px; width:auto; object-fit:contain; display:block; }
.header-right { display:flex; align-items:center; gap:12px; }
.login-btn { display:flex; align-items:center; color:var(--color-text-primary); font-size:14px; font-weight:500; padding:4px 0; transition:color var(--transition-fast); }
.login-btn:hover { color:var(--color-text-secondary); }
.hamburger-btn { color:var(--color-text-primary); padding:4px; display:flex; align-items:center; }
.hamburger-icon { width:20px; height:18px; display:block; }
.service-header .hamburger-icon { filter:invert(1); }

/* Sidebar Menu */
/* 사이드바 열림: 상하 safe-area(상태바·하단바) 영역도 흰색으로 맞춤 */
body.menu-open { background:#fff; }
.side-menu-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.25); z-index:998; opacity:0; pointer-events:none; transition:opacity var(--transition-normal); }
.side-menu-overlay.show { opacity:1; pointer-events:auto; }
.side-menu { position:fixed; top:0; right:-320px; width:320px; max-width:88vw; height:100vh; height:100dvh; background:#fff; z-index:999; transition:right var(--transition-normal); display:flex; flex-direction:column; box-shadow:-4px 0 20px rgba(0,0,0,0.12); }
.side-menu.show { right:0; }
.side-menu-header { display:flex; align-items:center; justify-content:flex-end; padding:calc(14px + env(safe-area-inset-top)) 14px 6px; flex-shrink:0; }
.close-menu-btn { font-size:22px; color:#1a1a1a; padding:6px; line-height:1; }
.side-menu-body { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:4px 20px 8px; }

/* 유저 카드 */
.side-card { background:#F7F7F7; border-radius:var(--radius-md); overflow:hidden; margin-bottom:24px; }
.side-user-section { padding:0; }
.side-user-row { display:flex; align-items:center; gap:12px; cursor:pointer; padding:18px 20px; }
.side-user-avatar { width:40px; height:40px; border-radius:50%; background:var(--color-primary); display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; color:#fff; flex-shrink:0; }
.side-user-text { flex:1; min-width:0; }
.side-user-title { font-size:18px; line-height:1.3; font-weight:700; color:var(--color-text-primary); margin:0 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-user-sub { font-size:13px; line-height:1.4; color:var(--color-text-light); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-user-chevron { font-size:22px; color:#c4c4c4; flex-shrink:0; line-height:1; }
.side-card-divider { height:1px; background:var(--color-border); margin:0 20px; }
.side-card-item { display:flex; align-items:center; gap:10px; width:100%; padding:16px 20px; background:none; border:none; font-size:15px; line-height:1.45; font-weight:600; color:var(--color-text-primary); cursor:pointer; font-family:var(--font-main); text-align:left; }
.side-card-item-ic { font-size:18px; }

/* 아코디언 (선 없는 큰 글씨 목록) */
.side-accordion { padding:0; }
.side-acc-item { border:none; }
.side-acc-header { display:flex; align-items:center; justify-content:space-between; width:100%; padding:14px 0; background:none; border:none; font-size:20px; line-height:1.3; font-weight:700; color:var(--color-text-primary); cursor:pointer; font-family:var(--font-main); text-align:left; }
.side-acc-arrow { font-size:18px; color:#c4c4c4; display:inline-block; transition:transform 0.2s; line-height:1; }
.side-acc-item.open .side-acc-arrow { transform:rotate(180deg); }
.side-acc-body { list-style:none; padding:2px 0 10px; margin:0; display:none; }
.side-acc-item.open .side-acc-body { display:block; }
.side-acc-body li { padding:9px 0 9px 4px; font-size:15px; line-height:1.45; font-weight:400; color:var(--color-text-secondary); cursor:pointer; }
.side-acc-body li:active { color:var(--color-text-primary); }

/* 하단 */
.side-bottom { flex-shrink:0; padding:16px 20px calc(28px + env(safe-area-inset-bottom)); }
.side-kakao-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:50px; background:#FEE500; color:#000; border:none; border-radius:var(--radius-md); font-size:16px; font-weight:700; cursor:pointer; font-family:var(--font-main); margin-bottom:10px; transition:opacity var(--transition-fast); }
.side-kakao-btn:active { transform:scale(0.99); }
.side-hours { font-size:12px; line-height:1.4; color:var(--color-text-light); text-align:center; }

/* Category Tabs */
#category-tabs { position:sticky; top:calc(var(--header-height) + env(safe-area-inset-top)); z-index:90; height:var(--tab-height); background:transparent; box-shadow:none; transition:background var(--transition-fast), box-shadow var(--transition-fast); }
#category-tabs.solid { background:var(--color-bg); box-shadow:0 4px 12px 0 rgba(17,17,17,0.10); }
.tabs-inner { display:grid; grid-template-columns:repeat(6, 1fr); align-items:stretch; height:var(--tab-height); padding:0 24px; }
.tab-item { display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:400; color:var(--color-text-secondary); position:relative; transition:all var(--transition-fast); white-space:nowrap; }
.tab-item::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:0; height:2px; background:var(--color-text-primary); transition:width var(--transition-normal); }
.tab-item.active { color:var(--color-text-primary); font-weight:600; }
.tab-item.active::after { width:100%; }

/* Carousel */
#main-carousel { overflow:hidden; background:transparent; padding:36px 0 24px; touch-action:pan-y; }
.carousel-track { display:flex; gap:0; will-change:transform; align-items:center; }
.carousel-slide { flex:0 0 80%; border-radius:8px; overflow:hidden; transform:scale(0.92); transition:transform .45s cubic-bezier(.25,.46,.45,.94); box-shadow:0 4px 24px 0 rgba(255,255,255,0.2); }
.carousel-slide.active { transform:scale(1); }
.carousel-card-img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.slide-placeholder { width:100%; aspect-ratio:3/4; background:#D9D9D9; }
.slide-image-wrapper { position:relative; width:100%; aspect-ratio:3/4; overflow:hidden; }
.slide-image { width:100%; height:100%; object-fit:cover; }
.slide-overlay { position:absolute; bottom:0; left:0; right:0; height:65%; background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,0.05) 20%,rgba(0,0,0,0.25) 50%,rgba(0,0,0,0.65) 80%,rgba(0,0,0,0.8) 100%); }
.slide-content { position:absolute; bottom:40px; left:24px; right:24px; color:#fff; z-index:2; }
.slide-brand { font-family:var(--font-serif); font-size:16px; font-weight:500; opacity:.9; display:block; margin-bottom:2px; }
.slide-title { font-family:var(--font-serif); font-size:38px; font-weight:900; line-height:1.15; margin-bottom:10px; text-shadow:0 2px 8px rgba(0,0,0,0.3); }
.slide-subtitle { font-size:14px; font-weight:400; opacity:.85; }
.carousel-dots { display:flex; align-items:center; justify-content:center; gap:12px; padding:24px 0 12px; background:transparent; position:relative; z-index:1; }
.dot { width:20px; height:3px; border-radius:2px; background:rgba(130,130,130,0.5); cursor:pointer; transition:all var(--transition-normal); }
.dot.active { background:var(--color-dot-active); width:28px; }

/* ── 메인 상단: 기본(흐린 배경 위)은 흰색 글자, 스크롤하면 흰 배경+검은 글자 ── */
/* 기본 상태 (페이지 최상단) */
#main-header .logo-img-main { filter:brightness(0) invert(1); transition:filter var(--transition-fast); }
#main-header .login-btn { color:#fff; }
#main-header .hamburger-icon { filter:brightness(0) invert(1); }
#category-tabs .tab-item { color:rgba(255,255,255,0.78); }
#category-tabs .tab-item.active { color:#fff; }
#category-tabs .tab-item::after { background:#fff; }
/* 스크롤 후 (흰 바) — 검은 글자 */
#main-header.solid .logo-img-main { filter:none; }
#main-header.solid .login-btn { color:var(--color-text-primary); text-shadow:none; }
#main-header.solid .hamburger-icon { filter:none; }
#category-tabs.solid .tab-item { color:var(--color-text-secondary); text-shadow:none; }
#category-tabs.solid .tab-item.active { color:var(--color-text-primary); }
#category-tabs.solid .tab-item::after { background:var(--color-text-primary); }

/* Quick Menu */
#quick-menu { padding:0 24px; background:var(--color-bg); }
.menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.menu-card { background:#F2F2F2; border-radius:12px; padding:0 9px; height:57px; display:flex; align-items:center; gap:9px; transition:opacity var(--transition-fast); text-decoration:none; }
.menu-card:active { opacity:0.6; }
.menu-icon-wrap { width:39px; height:39px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--color-text-primary); }
.menu-text { display:flex; flex-direction:column; gap:6px; }
.menu-title { font-size:14px; font-weight:700; color:var(--color-text-primary); }
.menu-label { font-size:12px; font-weight:400; color:rgba(26,26,26,0.5); }

/* Stats Section */
#stats-section { margin-top:36px; padding:0; background:var(--color-bg); text-align:center; }
.stats-badge { display:inline-block; border:1px solid #CCCCCC; border-radius:100px; padding:7px 16px; font-size:14px; color:#888; margin:0; }
.stats-main { display:flex; align-items:center; justify-content:center; gap:36px; margin-bottom:16px; }
.stats-wing { width:60px; height:auto; }
.stats-text { display:flex; flex-direction:column; gap:10px; }
.stats-count { font-size:28px; font-weight:700; color:var(--color-text-primary); line-height:1; }
.stats-number { color:#E1B567; font-size:38px; font-weight:700; }
.stats-label-pre { font-size:24px; font-weight:700; }
.stats-label-post { font-size:24px; font-weight:700; }
.stats-sub { font-size:14px; color:var(--color-text-secondary); font-weight:400; }
.stats-divider { height:1px; background:var(--color-border); margin:60px 24px 0; }

/* 실시간 구매 후기 */
#review-section { padding:48px 24px 40px; background:var(--color-bg); }
.review-header { text-align:center; margin-bottom:24px; }
.review-live-badge { display:inline-flex; align-items:center; gap:6px; background:#E63946; border-radius:100px; padding:6px 16px; font-size:12px; font-weight:800; color:#fff; margin-bottom:14px; letter-spacing:.5px; }
.review-live-dot { width:7px; height:7px; background:#fff; border-radius:50%; animation:review-live-blink 1.5s infinite; }
@keyframes review-live-blink { 0%, 100% { opacity:1; } 50% { opacity:.3; } }
.review-title { font-size:28px; font-weight:800; color:var(--color-text-primary); margin:0 0 12px; letter-spacing:-.5px; }
.review-subtitle { font-size:16px; color:var(--color-text-secondary); margin:0; }
.review-list-wrap { position:relative; margin-top:24px; overflow:hidden; transition:height .35s ease; }
/* 맨 위·맨 아래 후기에 흰색 그라디언트를 덮어 자연스럽게 흐려지게 */
.review-list-wrap::before, .review-list-wrap::after { content:''; position:absolute; left:0; right:0; height:96px; pointer-events:none; z-index:5; }
.review-list-wrap::before { top:0; background:linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 100%); }
.review-list-wrap::after { bottom:0; background:linear-gradient(to top, #fff 0%, rgba(255,255,255,0) 100%); }
.review-list { display:flex; flex-direction:column; gap:12px; position:relative; z-index:2; will-change:transform; }
.review-card { background:#fff; border:1px solid #F0F0F0; border-radius:16px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,0.04); will-change:transform, opacity; display:flex; gap:16px; align-items:stretch; }
.review-thumb { flex-shrink:0; width:66px; align-self:stretch; border-radius:8px; overflow:hidden; background:#D9D9D9; }
.review-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.review-body { flex:1; min-width:0; }

/* 라이브 후기 티커: #review-list 안 카드는 absolute로 슬롯 transform 사용 (5장 노출 + 아래 1장 대기) */
#review-list { display:block; position:relative; isolation:isolate; }
#review-list .review-card {
  position:absolute; left:0; right:0; box-sizing:border-box;
  transition:transform .6s cubic-bezier(.33,1,.68,1), opacity .45s ease;
  transform-origin:center;
  z-index:3;
}
#review-list .review-card.slot-out { transform:translateY(calc(-100% - 12px)); opacity:0; pointer-events:none; z-index:0; }
#review-list .review-card.slot-0   { transform:translateY(0); }
#review-list .review-card.slot-1   { transform:translateY(calc(100% + 12px)); }
#review-list .review-card.slot-2   { transform:translateY(calc(200% + 24px)); }
#review-list .review-card.slot-3   { transform:translateY(calc(300% + 36px)); }
#review-list .review-card.slot-4   { transform:translateY(calc(400% + 48px)); }
#review-list .review-card.slot-5   { transform:translateY(calc(500% + 60px)); opacity:0; pointer-events:none; }
.review-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.review-meta { display:flex; align-items:center; gap:8px; }
.review-author { font-size:14px; font-weight:700; color:var(--color-text-primary); }
.review-category { background:#FFE9E5; color:#C2675A; font-size:12px; padding:2px 9px; border-radius:100px; font-weight:600; }
.review-time { font-size:12px; color:var(--color-text-light); }
.review-stars { display:flex; gap:2px; margin-bottom:8px; }
.review-star { width:14px; height:14px; color:#E63946; display:inline-flex; flex-shrink:0; }
.review-star svg { width:100%; height:100%; fill:currentColor; }
.review-text { font-size:14px; color:var(--color-text-primary); line-height:1.6; }

.review-card.fading { opacity:0; transition:opacity .5s ease-out; }

/* ============================================
   SUB PAGES - Shared
   ============================================ */
.sub-header { display:flex; align-items:center; justify-content:space-between; height:calc(var(--header-height) + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 24px 0; background:#fff; border-bottom:1px solid #f0f0f0; position:sticky; top:0; z-index:100; }
.back-btn { font-size:24px; color:var(--color-text-primary); padding:4px; width:36px; }
.sub-title { font-size:16px; font-weight:700; position:absolute; left:50%; transform:translateX(-50%); }
.header-spacer { width:36px; }
.page-body { padding:24px 24px 60px; }

/* Form */
.form-group { display:flex; flex-direction:column; gap:16px; }
.input-wrap { display:flex; flex-direction:column; gap:6px; }
.input-wrap label { font-size:14px; font-weight:700; color:#1a1a1a; }
.input-wrap input, .input-wrap select, .input-wrap textarea { width:100%; padding:14px 16px; border:1px solid var(--color-border); border-radius:12px; font-size:16px; font-family:var(--font-sans); color:var(--color-text-primary); background:#fff; transition:border var(--transition-fast); outline:none; }
.input-wrap input:focus, .input-wrap select:focus, .input-wrap textarea:focus { border-color:var(--color-primary); background:#fff; }
.input-wrap input:disabled { background:#f0f0f0; color:#999; }
.input-wrap textarea { resize:vertical; min-height:120px; }
/* iOS Safari에서 input[type=date] 높이/정렬 통일 */
.input-wrap input[type="date"] { -webkit-appearance:none; appearance:none; min-height:46px; line-height:1.2; display:block; }
.input-wrap input[type="date"]::-webkit-date-and-time-value { text-align:left; min-height:1.2em; }
.input-wrap input[type="date"]::-webkit-calendar-picker-indicator { opacity:0.6; }
.input-hint { font-size:12px; color:var(--color-text-light); }

.radio-group { display:flex; gap:20px; padding:8px 0; }
.radio-label { display:flex; align-items:center; gap:6px; font-size:16px; cursor:pointer; }

/* Buttons */
.btn-primary { width:100%; height:54px; background:var(--color-primary); color:#fff; font-size:16px; font-weight:700; border:none; border-radius:12px; cursor:pointer; transition:background var(--transition-fast); margin-top:12px; }
.btn-primary:hover { background:var(--color-primary-dark); }
.btn-primary:active { transform:scale(0.98); }
.btn-secondary { width:100%; padding:14px; background:none; color:var(--color-text-light); font-size:14px; border:1px solid var(--color-border); border-radius:12px; cursor:pointer; margin-top:6px; }
.btn-outline-sm { padding:8px 16px; border:1px solid var(--color-primary); color:var(--color-primary); border-radius:var(--radius-sm); font-size:14px; font-weight:600; cursor:pointer; background:none; transition:all var(--transition-fast); align-self:flex-end; }
.btn-outline-sm:hover { background:var(--color-primary); color:#fff; }
.btn-outline-review { width:calc(100% - 32px); padding:10px 18px; border:1px solid var(--color-primary); color:var(--color-primary); border-radius:var(--radius-sm); font-size:14px; font-weight:700; cursor:pointer; background:none; transition:all var(--transition-fast); }
.btn-outline-review:hover { background:var(--color-primary); color:#fff; }

/* Section */
.section-divider { border:none; border-top:1px solid var(--color-border); margin:20px 0; }
.section-title { font-size:16px; font-weight:700; color:#1a1a1a; margin-bottom:16px; }

/* ============================================
   LOGIN PAGE
   ============================================ */
.login-logo { text-align:center; padding:32px 0 28px; display:flex; flex-direction:column; align-items:center; }
.login-logo-img { height:48px; width:auto; object-fit:contain; margin-bottom:8px; }
.login-welcome { margin-top:4px; font-size:16px; color:var(--color-text-secondary); }
.login-links { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:20px; font-size:14px; color:var(--color-text-secondary); }
.login-links a:hover { color:var(--color-primary); }
.login-links .divider { color:var(--color-border); }
.social-login { margin-top:32px; text-align:center; }
.social-label { font-size:14px; color:var(--color-text-light); margin-bottom:14px; position:relative; }
.social-label::before, .social-label::after { content:''; position:absolute; top:50%; width:28%; height:1px; background:var(--color-border); }
.social-label::before { left:0; }
.social-label::after { right:0; }
.social-buttons { display:flex; gap:10px; }
.social-btn { flex:1; padding:12px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; cursor:pointer; border:none; transition:opacity var(--transition-fast); }
.social-btn:hover { opacity:.85; }
.social-btn.kakao { background:#FEE500; color:#3C1E1E; }
.social-btn.naver { background:#03C75A; color:#fff; }
.social-btn.google { background:#fff; color:#333; border:1px solid var(--color-border); }

/* ============================================
   LOGIN - New Design
   ============================================ */
.login-body { padding:0 24px; }
.login-hero { text-align:center; margin:48px 0 40px; }
.login-hero-title { font-size:28px; font-weight:700; color:var(--color-text-primary); margin:0; }
.login-hero-sub { margin-top:10px; font-size:16px; line-height:1.5; color:var(--color-text-secondary); }
.login-actions { display:flex; flex-direction:column; gap:14px; align-items:center; }
.login-terms-note { font-size:12px; line-height:1.6; color:var(--color-text-secondary); text-align:center; margin:0; }
.login-terms-note a { color:var(--color-text-secondary); text-decoration:underline; }
.login-alt-link { display:block; margin:28px auto 0; padding:8px; background:none; border:none; font-size:14px; color:var(--color-text-secondary); text-decoration:underline; cursor:pointer; }
.login-alt-link:hover { color:var(--color-text-primary); }
.btn-kakao { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:54px; background:#FEE500; color:#000; font-size:16px; font-weight:700; border:none; border-radius:12px; cursor:pointer; transition:opacity var(--transition-fast); }
.btn-kakao:hover { opacity:.9; }
.btn-kakao:active { transform:scale(0.99); }
.btn-kakao-icon { display:inline-block; }
.btn-outline { width:100%; height:54px; background:#fff; color:var(--color-text-primary); font-size:16px; font-weight:700; border:1px solid var(--color-border); border-radius:12px; cursor:pointer; transition:background var(--transition-fast); }
.btn-outline:hover { background:#FAFAFA; }
.btn-outline:active { transform:scale(0.99); }
.login-body .login-links { justify-content:flex-start; margin-top:32px; padding:0 4px; }
.find-desc { font-size:16px; color:var(--color-text-secondary); line-height:1.6; margin:28px 0 24px; }

/* LOGIN-EMAIL (일반 로그인) */
.login-email-body { padding:0 24px; }
.login-email-title { font-size:28px; font-weight:700; text-align:center; margin:48px 0 32px; color:var(--color-text-primary); }
.login-email-form { display:flex; flex-direction:column; gap:18px; margin-bottom:28px; }
.login-email-field { display:flex; flex-direction:column; gap:8px; }
.login-email-field label { font-size:14px; font-weight:600; color:var(--color-text-secondary); }
.login-email-field input { border:1px solid var(--color-border); border-radius:12px; padding:14px 16px; font-size:16px; background:#fff; color:var(--color-text-primary); outline:none; transition:border-color var(--transition-fast); }
.login-email-field input:focus { border-color:var(--color-text-primary); }
.btn-dark { width:100%; height:54px; background:#111; color:#fff; font-size:16px; font-weight:700; border:none; border-radius:12px; cursor:pointer; transition:opacity var(--transition-fast); margin-top:12px; }
.btn-dark:hover { opacity:.85; }
.btn-dark:active { transform:scale(0.99); }
.login-email-body .login-links { justify-content:flex-start; margin-top:20px; padding:0 4px; }
.login-email-field .field-hint { font-size:12px; color:var(--color-text-light); font-weight:400; margin-left:4px; }
.login-email-field .radio-group { padding:6px 0 4px; gap:24px; }
.login-email-field .radio-label { font-size:14px; }
.login-email-body .terms-group { margin-top:8px; background:#FAFAFA; }
.login-email-title + .find-desc { text-align:center; margin:-12px 0 32px; }
.find-result { text-align:center; padding:8px 0 0; }
.find-result-label { font-size:14px; color:var(--color-text-secondary); margin:0 0 10px; }
.find-result-value { font-size:18px; font-weight:700; color:var(--color-text-primary); margin:0 0 6px; letter-spacing:.5px; }
.find-result-meta { font-size:12px; color:var(--color-text-light); margin:0 0 28px; }
.find-result .btn-dark { margin-top:0; margin-bottom:10px; }

/* ============================================
   SIGNUP - Terms
   ============================================ */
.terms-group { background:#FAFAFA; border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:14px; display:flex; flex-direction:column; gap:10px; }
.check-label { display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.check-label input[type="checkbox"] { width:18px; height:18px; accent-color:var(--color-primary); }
.terms-sub { padding-left:4px; font-size:14px; color:var(--color-text-secondary); }
.terms-divider { border:none; border-top:1px solid var(--color-border); margin:4px 0; }

/* ============================================
   MYPAGE
   ============================================ */
.profile-card { display:flex; align-items:center; gap:16px; padding:0 0 20px; background:#fff; color:#1a1a1a; border-bottom:1px solid #f0f0f0; cursor:pointer; }
.profile-avatar { width:52px; height:52px; border-radius:50%; background:#1a1a1a; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:20px; font-weight:700; color:#fff; }
.profile-name { font-size:18px; font-weight:700; color:#1a1a1a; }
.profile-email { font-size:14px; color:#999; margin-top:3px; }
.profile-arrow { color:#ccc; font-size:20px; margin-left:auto; flex-shrink:0; }
.mypage-stats { display:flex; margin:4px 0; border-bottom:1px solid #f0f0f0; }
.stat-item { flex:1; text-align:center; padding:20px 0; }
.stat-item:not(:last-child) { border-right:1px solid #f0f0f0; }
.stat-value { display:block; font-size:20px; font-weight:700; color:#1a1a1a; margin-bottom:4px; }
.stat-label { display:block; font-size:12px; color:#999; font-weight:400; }
.mypage-menu { list-style:none; margin-top:4px; }
.mypage-menu li { display:flex; align-items:center; justify-content:space-between; padding:18px 0; border-bottom:1px solid #f0f0f0; cursor:pointer; font-size:16px; font-weight:400; color:#1a1a1a; }
.mypage-menu .arrow { color:#ccc; font-size:18px; }
.mypage-menu .menu-divider { height:8px; background:#f5f5f5; margin:0 -24px; border:none; padding:0; }
.mypage-menu .logout-item { color:#aaa; }

/* ============================================
   리포트 보관함 (STORAGE)
   ============================================ */
.storage-tabs { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.stab { padding:8px 16px; border-radius:20px; font-size:14px; font-weight:400; background:#f5f5f5; color:#666; transition:all var(--transition-fast); }
.stab.active { background:#1a1a1a; color:#fff; font-weight:700; }
.storage-list { display:flex; flex-direction:column; gap:12px; }
.storage-card { background:#fff; border:1px solid #f0f0f0; border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:8px; }
.storage-badge { display:inline-block; padding:5px 12px; border-radius:20px; font-size:12px; font-weight:700; color:#fff; width:fit-content; }
.badge-destiny { background:#c8312c; }
.badge-relation { background:#4a7ab5; }
.badge-tarot { background:#7B5EA7; }
.badge-secret { background:#2a2a2a; }
.badge-digital { background:#2e8b74; }
.storage-info { display:flex; align-items:center; justify-content:space-between; }
.storage-name { font-size:16px; font-weight:700; color:#1a1a1a; }
.storage-date-group { text-align:right; }
.storage-date { font-size:14px; font-weight:600; color:#1a1a1a; }
.storage-expiry { font-size:12px; color:#bbb; margin-top:2px; }
.storage-summary { font-size:14px; color:#666; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Storage State Styles */
.loading-spinner, .empty-msg, .error-msg { text-align:center; padding:40px 20px; color:var(--color-text-light); font-size:14px; }
.loading-spinner::before { content:''; display:block; width:24px; height:24px; border:2px solid var(--color-border); border-top-color:var(--color-primary); border-radius:50%; margin:0 auto 12px; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.empty-msg::before { content:'📂'; display:block; font-size:32px; margin-bottom:12px; opacity:0.5; }
.error-msg { color:#D32F2F; }

/* ============================================
   REVIEW
   ============================================ */
.review-reward-banner { display:flex; align-items:center; gap:12px; padding:16px; background:linear-gradient(135deg,#FFF8E1,#FFF3CD); border-radius:var(--radius-md); margin-bottom:20px; }
.reward-icon { font-size:28px; }
.reward-title { font-size:16px; font-weight:700; color:#8B6914; }
.reward-desc { font-size:12px; color:#A88B3D; margin-top:2px; }
.star-rating { display:flex; gap:4px; }
.star { width:34px; height:34px; color:#D0D0D0; cursor:pointer; transition:color var(--transition-fast); display:inline-flex; flex-shrink:0; }
.star svg { width:100%; height:100%; fill:currentColor; }
.star.active { color:#E63946; }
.photo-upload { display:flex; align-items:center; gap:8px; padding:24px; border:2px dashed var(--color-border); border-radius:var(--radius-sm); cursor:pointer; justify-content:center; color:var(--color-text-light); font-size:14px; transition:all var(--transition-fast); }
.photo-upload:hover { border-color:var(--color-primary); color:var(--color-primary); }
.review-list { display:flex; flex-direction:column; gap:12px; }
.review-item { background:#FAFAFA; border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:14px; }
.review-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.review-service { font-size:14px; font-weight:600; color:var(--color-primary); }
.review-date { font-size:12px; color:var(--color-text-light); }
.review-stars { display:flex; gap:2px; margin-bottom:6px; }
.review-item .review-star { color:#FFB800; }
.review-text { font-size:14px; color:var(--color-text-secondary); line-height:1.6; }
.review-point { font-size:12px; color:#8B6914; font-weight:600; margin-top:8px; padding-top:8px; border-top:1px solid #f0f0f0; }

/* ============================================
   COUPON
   ============================================ */
.coupon-input-area { display:flex; gap:8px; margin-bottom:16px; }
.coupon-input-area input { flex:1; padding:12px 14px; border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:14px; background:#FAFAFA; outline:none; font-family:var(--font-sans); }
.coupon-input-area input:focus { border-color:var(--color-primary); background:#fff; }
.btn-coupon-register { padding:12px 20px; background:var(--color-primary); color:#fff; border-radius:var(--radius-sm); font-size:14px; font-weight:600; white-space:nowrap; }
.coupon-tabs { display:flex; gap:0; margin-bottom:20px; border-bottom:1px solid #f0f0f0; }
.ctab { padding:12px 16px; font-size:14px; font-weight:400; color:#999; position:relative; transition:all var(--transition-fast); }
.ctab.active { color:#1a1a1a; font-weight:700; }
.ctab.active::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:#1a1a1a; }
.ctab-count { font-size:12px; font-weight:700; background:#1a1a1a; color:#fff; padding:1px 6px; border-radius:10px; margin-left:4px; }
.coupon-list { display:flex; flex-direction:column; gap:12px; }
.coupon-card { display:flex; align-items:stretch; border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; background:#fff; transition:all var(--transition-fast); }
.coupon-card:hover { box-shadow:var(--shadow-sm); }
.coupon-card.expired { opacity:.5; }
.coupon-left { width:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--color-primary); color:#fff; padding:16px 10px; flex-shrink:0; gap:6px; }
.coupon-discount { font-size:20px; font-weight:800; }
.coupon-type { font-size:12px; opacity:.8; }
.coupon-divider { width:1px; background:var(--color-border); position:relative; }
.coupon-divider::before, .coupon-divider::after { content:''; position:absolute; left:-6px; width:12px; height:12px; background:#F5F5F5; border-radius:50%; }
.coupon-divider::before { top:-6px; }
.coupon-divider::after { bottom:-6px; }
.coupon-right { flex:1; padding:14px 16px; display:flex; flex-direction:column; justify-content:center; gap:7px; }
.coupon-name { font-size:16px; font-weight:700; color:#1a1a1a; }
.coupon-condition { font-size:12px; color:var(--color-text-secondary); }
.coupon-expiry { font-size:12px; color:var(--color-primary); font-weight:500; }
.coupon-expiry.expired-text { color:var(--color-text-light); }

/* ============================================
   PRODUCT SECTION
   ============================================ */
#product-section { padding:32px 16px 40px; background:var(--color-bg); }
.product-heading { font-family:var(--font-serif); font-size:24px; font-weight:900; line-height:1.4; color:var(--color-text-primary); margin-bottom:24px; letter-spacing:-0.5px; }

/* Featured product */
.product-featured { margin-bottom:24px; }
.featured-image-wrap { position:relative; width:100%; aspect-ratio:4/3; border-radius:var(--radius-md); overflow:hidden; }
.featured-image { width:100%; height:100%; object-fit:cover; }
.featured-overlay { position:absolute; bottom:0; left:0; right:0; height:60%; background:linear-gradient(to bottom,transparent,rgba(0,0,0,0.7)); }
.featured-text { position:absolute; bottom:20px; left:20px; color:#fff; }
.featured-brand { font-family:var(--font-serif); font-size:14px; opacity:.85; display:block; margin-bottom:2px; }
.featured-title { font-family:var(--font-serif); font-size:28px; font-weight:900; margin-bottom:4px; text-shadow:0 1px 4px rgba(0,0,0,0.3); }
.featured-sub { font-size:12px; opacity:.8; }

.product-info-row { display:flex; align-items:flex-end; justify-content:space-between; padding:14px 0 0; }
.product-info-left { flex:1; }
.product-name-main { font-size:16px; font-weight:700; color:var(--color-text-primary); margin-bottom:2px; }
.product-desc { font-size:12px; color:var(--color-text-secondary); margin-bottom:6px; line-height:1.4; }
.product-price-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.price-original { font-size:14px; color:var(--color-text-light); text-decoration:line-through; }
.price-discount { font-size:16px; font-weight:800; color:#D32F2F; }
.price-sale { font-size:18px; font-weight:800; color:var(--color-text-primary); }

.btn-start { padding:10px 18px; background:#D32F2F; color:#fff; border:none; border-radius:var(--radius-sm); font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background var(--transition-fast); }
.btn-start:hover { background:#B71C1C; }
.btn-start:active { transform:scale(0.96); }

/* Product list */
.product-list { display:flex; flex-direction:column; gap:16px; }
.product-card { border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; background:#fff; }
.product-thumb { width:100%; aspect-ratio:16/9; overflow:hidden; background:#f0f0f0; }
.product-thumb img { width:100%; height:100%; object-fit:cover; }
.product-card-info { padding:14px 16px 0; }
.product-card .btn-start { margin:12px 16px 14px; }
.product-card .product-info-row { padding:14px 16px; }
#product-section, .product-featured, .product-card { scroll-margin-top:110px; }

/* ============================================
   TESTIMONIAL SECTION
   ============================================ */
#testimonial-section { padding:36px 16px 12px; background:var(--color-bg); }
.testimonial-heading { font-family:var(--font-serif); font-size:24px; font-weight:900; line-height:1.4; color:var(--color-text-primary); margin-bottom:24px; letter-spacing:-0.5px; }

.testimonial-list { display:flex; flex-direction:column; gap:16px; }

.testimonial-card { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md); padding:18px 16px; }

.testimonial-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px; }
.testimonial-user { display:flex; align-items:center; gap:10px; }
.testimonial-avatar { width:40px; height:40px; border-radius:50%; background:#f0f0f0; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.testimonial-name { font-size:14px; font-weight:700; color:var(--color-text-primary); display:block; margin-bottom:2px; }
.testimonial-rating { display:flex; align-items:center; gap:4px; }
.t-stars { color:#F5A623; font-size:14px; letter-spacing:1px; }
.t-score { font-size:14px; font-weight:700; color:var(--color-text-primary); }
.testimonial-time { font-size:12px; color:var(--color-text-light); white-space:nowrap; padding-top:4px; }

.testimonial-text { font-size:14px; line-height:1.65; color:var(--color-text-secondary); margin-bottom:14px; word-break:keep-all; }

.testimonial-product { display:flex; align-items:center; gap:8px; padding:10px 12px; background:#f8f8f8; border-radius:var(--radius-sm); cursor:pointer; transition:background var(--transition-fast); }
.testimonial-product:hover { background:#f0f0f0; }
.testimonial-product-avatar { width:28px; height:28px; border-radius:50%; background:#e8e8e8; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.testimonial-product-name { font-size:14px; font-weight:700; color:var(--color-text-primary); flex-shrink:0; }
.testimonial-product-price { font-size:12px; margin-left:auto; display:flex; align-items:center; gap:4px; }
.tp-discount { color:#D32F2F; font-weight:800; }
.tp-original { color:var(--color-text-light); text-decoration:line-through; }
.tp-sale { color:var(--color-text-primary); font-weight:700; }

/* ============================================
   FOOTER
   ============================================ */
#main-footer { padding:32px 20px 36px; background:#f5f5f5; border-top:1px solid var(--color-border); }
#main-footer .footer-logo { margin-bottom:20px; }
.footer-logo-img { height:18px; width:auto; object-fit:contain; opacity:0.9; }

.footer-info { margin-bottom:20px; }
.footer-info p { font-size:14px; color:var(--color-text-secondary); line-height:1.8; margin:0; word-break:keep-all; }
.footer-info strong { color:var(--color-text-primary); font-weight:600; }

.footer-links { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-bottom:16px; padding-top:4px; }
.footer-links a { font-size:14px; color:var(--color-text-secondary); text-decoration:none; transition:color var(--transition-fast); }
.footer-links a:hover { color:var(--color-text-primary); }

.footer-copyright { font-size:12px; color:var(--color-text-light); margin:0; line-height:1.6; }

/* ============================================
   TOAST
   ============================================ */
.toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px); background:rgba(0,0,0,0.8); color:#fff; padding:12px 24px; border-radius:24px; font-size:14px; opacity:0; transition:all .3s ease; pointer-events:none; z-index:9999; white-space:nowrap; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================================
   SERVICE LANDING PAGE
   ============================================ */
.service-landing { position:relative; width:100%; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:#0a0a0a; overflow:hidden; }
.service-header { position:absolute; top:0; left:0; right:0; z-index:10; background:transparent; }
.service-header .header-inner { padding:12px 16px; }

.service-header .login-btn { color:#fff; }
.service-header .hamburger-btn { color:#fff; }

/* Hero area */
.service-hero { position:relative; flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; }
.service-header .header-inner { border-bottom: none; }
.service-hero-img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.service-hero-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.0) 45%, rgba(0,0,0,0.65) 75%, rgba(0,0,0,0.92) 100%); }
.service-hero-content { position:relative; z-index:2; text-align:center; padding:0 24px 28px; color:#fff; }
.service-hero-brand { font-family:var(--font-serif); font-size:20px; font-weight:700; display:block; margin-bottom:0; letter-spacing:2px; text-shadow:0 2px 8px rgba(0,0,0,0.5); }
.service-hero-title { font-family:var(--font-serif); font-size:52px; font-weight:900; line-height:1.15; margin:-4px 0 10px; letter-spacing:4px; text-shadow:0 3px 16px rgba(0,0,0,0.6); }
.service-hero-sub { font-size:16px; font-weight:400; opacity:.9; letter-spacing:0.5px; text-shadow:0 1px 6px rgba(0,0,0,0.5); }

/* CTA area */
.service-cta-area { position:relative; z-index:3; padding:0 16px 32px; background:linear-gradient(to bottom, rgba(10,10,10,0.0), rgba(10,10,10,1) 10%); }
.service-cta-btn { display:block; width:100%; padding:17px 0; background:var(--color-primary); color:#fff; border:none; border-radius:var(--radius-md); font-size:16px; font-weight:700; font-family:var(--font-main); cursor:pointer; letter-spacing:1px; transition:background var(--transition-fast), transform 0.15s ease; }
.service-cta-btn:hover { background:#A52020; }
.service-cta-btn:active { transform:scale(0.97); background:#7A1515; }

/* Responsive */
@media (min-width:481px) { body { background:#E8E8E8; } #app-container { border-left:1px solid var(--color-border); border-right:1px solid var(--color-border); } }
@media (max-width:360px) { .slide-title { font-size:32px; } .menu-title { font-size:16px; } .service-hero-title { font-size:42px; } }

/* ============================================
   STEP INDICATOR
   ============================================ */
.step-indicator { display:flex; align-items:center; justify-content:center; gap:8px; padding:16px 0 24px; }
.step-dot { width:10px; height:10px; border-radius:50%; background:#E0E0E0; transition:all var(--transition-normal); position:relative; }
.step-dot.active { background:var(--color-primary); transform:scale(1.2); box-shadow:0 0 0 4px rgba(139,26,26,0.15); }
.step-dot.done { background:var(--color-primary); }
.step-dot.done::after { content:'✓'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; font-size:12px; font-weight:700; }

/* ============================================
   STEP 1 - 정보 입력
   ============================================ */

.time-input-row { display:flex; align-items:center; gap:8px; }
.time-input-row select { flex:1; padding:12px 14px; border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:16px; font-family:var(--font-sans); color:var(--color-text-primary); background:#FAFAFA; outline:none; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
.time-input-row select:focus { border-color:var(--color-primary); background-color:#fff; }
.time-unknown { white-space:nowrap; font-size:14px; color:var(--color-text-secondary); }
.gender-select { display:flex; gap:10px; }
.gender-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; border:1.5px solid var(--color-border); border-radius:var(--radius-md); font-size:16px; font-weight:500; color:var(--color-text-secondary); background:#FAFAFA; cursor:pointer; transition:all var(--transition-fast); }
.gender-btn.active { border-color:var(--color-primary); border-width:2px; padding:13px; color:var(--color-primary); background:#FFFFFF; font-weight:700; }
.gender-btn.active svg { stroke:var(--color-primary); }

/* ============================================
   STEP 2 - 미리보기
   ============================================ */

.preview-user-info .user-name { font-weight:700; color:var(--color-text-primary); font-size:16px; }
.preview-user-info .user-detail { font-size:14px; }

.blur-text { font-size:14px; font-weight:600; color:var(--color-primary); padding:12px 20px; background:rgba(139,26,26,0.06); border-radius:var(--radius-sm); display:inline-block; }

/* ============================================
   STEP 3 - 결제
   ============================================ */

.payment-method-section { margin-bottom:24px; }
.payment-methods { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }

.kakao-pay .pay-icon-text { background:#FEE500; color:#3C1E1E; }
.naver-pay .pay-icon-text { background:#03C75A; color:#fff; }
.toss-pay .pay-icon-text { background:#0064FF; color:#fff; }
.kakao-pay.active { border-color:#D4C200; background:#FFFCE6; color:#3C1E1E; }
.naver-pay.active { border-color:#03C75A; background:#E6FFF0; color:#03C75A; }
.toss-pay.active { border-color:#0064FF; background:#E6F0FF; color:#0064FF; }

/* ============================================
   STEP 4 - 풀이 결과
   ============================================ */

/* ============================================
   Time Selection Grid
   ============================================ */
.time-section-header {
  text-align: center;
  margin-bottom: 16px;
}
.time-section-title {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}
.time-section-desc {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}
.time-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}
.time-btn {
  background: #FAFAFA;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.time-btn.active {
  background: #FFFFFF;
  border-color: var(--color-primary);
  border-width: 2px;
  padding: 11px 3px;
}
.time-btn .time-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-light);
  margin-bottom: 4px;
  pointer-events: none;
}
.time-btn .time-range {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text-primary);
  pointer-events: none;
}
.time-btn.active .time-name, .time-btn.active .time-range {
  color: var(--color-primary);
}
.time-btn.unknown {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:16px;
  font-weight: 800;
  color: var(--color-text-primary);
}
.time-btn.unknown.active {
  color: var(--color-primary);
}

/* ============================================
   AI 분석 로딩 페이지
   ============================================ */

/* 12-tick spinner */

/* ============================================================
   리포트 결과 - 책 스타일 레이아웃
   ============================================================ */

/* 미리보기 페이지 (책 스타일) */

/* 목차 리스트 */

/* 확인 모달 */

/* 탭 페이지 */
.tab-page { display:none; }
.tab-page.active { display:block; }
.tab-page.active ~ #main-footer { display:block; }
#main-footer { display:block; }
.tab-page-coming { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 24px; text-align:center; }
.tab-page-icon { font-size:52px; margin-bottom:16px; }
.tab-page-title { font-size:24px; font-weight:700; color:#1a1a1a; margin-bottom:12px; }
.tab-page-desc { font-size:16px; color:#888; line-height:1.7; }

/* ── 카테고리 탭 페이지 (감정/집중/생활/관계/디지털) ── */
.lr-cat-page { padding:36px 24px 40px; background:#fff; }
.lr-badge { display:inline-block; flex-shrink:0; white-space:nowrap; background:#1a1a1a; color:#fff; font-size:14px; font-weight:700; padding:6px 14px; border-radius:8px; }
.lr-headline { font-size:24px; font-weight:800; line-height:1.4; color:#1a1a1a; margin:12px 0 24px; }
.lr-test-list { list-style:none; display:flex; flex-direction:column; gap:24px; padding:0; margin:0; }
.lr-test-item { display:flex; gap:16px; cursor:pointer; }
.lr-thumb { width:129px; height:163px; flex-shrink:0; border-radius:8px; background:#D9D9D9; overflow:hidden; }
.lr-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.lr-test-info { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; padding:18px 0; }
.lr-test-name { font-size:16px; font-weight:700; color:#1a1a1a; line-height:1.3; }
.lr-test-desc { font-size:12px; color:#8a8a8a; margin-top:6px; line-height:1.4; }
.lr-dots { display:flex; gap:5px; margin-top:6px; }
.lr-dots span { width:6px; height:6px; border-radius:50%; background:#d6d6d6; }
.lr-original { font-size:14px; color:#b0b0b0; text-decoration:line-through; }
.lr-price-row { display:flex; align-items:baseline; gap:8px; margin-top:6px; }
.lr-discount { font-size:18px; font-weight:800; color:#ec3a2f; }
.lr-price { font-size:18px; font-weight:800; color:#1a1a1a; }

/* ── 전체(홈) 탭: 카테고리별 가로 스크롤 (제목만) ── */
.lr-ov-wrap { padding:0 0 40px; }
.lr-ov-block { margin-top:36px; }
.lr-ov-block:first-child { margin-top:8px; }
.lr-ov-head { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin:0 24px 18px; }
.lr-ov-lead { font-size:18px; font-weight:700; color:#1a1a1a; }
.lr-ov-scroll { list-style:none; display:flex; gap:12px; margin:0; padding:0 24px; overflow-x:auto; }
.lr-ov-card { flex:0 0 129px; width:129px; cursor:pointer; }
.lr-ov-name { font-size:14px; font-weight:700; color:#1a1a1a; margin-top:10px; line-height:1.3; word-break:keep-all; }

/* ====== 카테고리 탭 테스트 목록 ====== */
.tab-service-section { padding:0 24px 48px; }
.tab-service-header { display:flex; align-items:center; gap:10px; margin-top:36px; margin-bottom:36px; }
.tab-service-badge { background:#1a1a1a; color:#fff; font-size:12px; font-weight:700; width:37px; height:20px; border-radius:20px; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.tab-service-title { font-size:20px; font-weight:700; color:#1a1a1a; letter-spacing:-0.5px; }
.tab-service-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:24px; }
.tab-service-item { display:flex; gap:16px; align-items:center; }
.tab-service-thumb { width:106px; height:134px; border-radius:12px; background:#d0d0d0; flex-shrink:0; }
.tab-service-info { flex:1; padding-top:2px; }
.tab-service-name { font-size:16px; font-weight:700; color:#1a1a1a; margin-bottom:4px; }
.tab-service-desc { font-size:12px; color:#999; line-height:1.5; margin-bottom:18px; }
.tab-service-original { font-size:14px; color:#bbb; text-decoration:line-through; margin-bottom:4px; }
.tab-service-price-row { display:flex; align-items:center; gap:6px; }
.tab-service-discount { font-size:18px; font-weight:800; color:#e53e3e; }
.tab-service-price { font-size:18px; font-weight:800; color:#1a1a1a; }
.tab-service-item { cursor: pointer; }
.overview-card { cursor: pointer; }

/* ====== 서비스 소개 페이지 ====== */
/* 서비스 인트로: 배경 사진 + 제목 텍스트 이미지 + 실제 헤더/버튼/카운트 */
.service-intro { position: relative; display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: #e8e8e8; overflow: hidden; }
.service-intro-img { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center top; background-repeat: no-repeat; background-color: #e8e8e8; }
/* 헤더: 사진 위에 투명하게 얹고 흰색으로 */
.service-intro-header { position: relative; z-index: 2; background: transparent; border-bottom: none; flex-shrink: 0; padding-top: env(safe-area-inset-top); }
.service-intro-header .logo-img { filter: brightness(0) invert(1); }
.service-intro-header .login-text { color: #fff; }
.service-intro-header .hamburger-icon { filter: brightness(0) invert(1); }
.service-intro-body { flex: 1; }
/* 하단 영역: 제목 텍스트 이미지 → 버튼 → 카운트 */
.service-intro-cta { position: relative; z-index: 2; flex-shrink: 0; background: transparent; padding: 0 24px calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; text-align: center; }
.service-intro-title { width: calc(100% - 24px); aspect-ratio: 1429 / 941; margin-bottom: 22px; pointer-events: none; background-size: contain; background-position: center; background-repeat: no-repeat; }
.service-intro-btn { display: block; width: 100%; height: 56px; padding: 0; background: #fff; color: #1A1A1A; border: none; border-radius: 100px; font-size: 18px; font-weight: 700; cursor: pointer; font-family: var(--font-main); letter-spacing: 0.3px; box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.service-intro-btn:active { background: #f0f0f0; }
.service-intro-count { margin-top: 16px; font-size:12px; font-weight: 400; color: #fff; display: flex; align-items: center; justify-content: center; gap: 5px; }
.service-intro-count-icon { width:12px; height:12px; object-fit:contain; filter: brightness(0) invert(1); }
.service-intro-count #service-intro-count-num { font-weight: 700; }

/* ===== 정보 입력 (3단계) — 서비스 배경 + 검정 80% 딤 ===== */
#page-intake { position: relative; background: #1a1a1a; }
.intake-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center top; background-repeat: no-repeat; background-color: #1a1a1a; }
.intake-dim { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,0.8); }
.intake-inner { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: env(safe-area-inset-top) 24px calc(32px + env(safe-area-inset-bottom)); color: #fff; }
.intake-header { display: flex; align-items: center; justify-content: space-between; height: 60px; flex-shrink: 0; }
.intake-back { background: none; border: none; color: #fff; font-size:24px; line-height: 1; cursor: pointer; padding: 0; width: 32px; text-align: left; }
.intake-progress { font-size:16px; color: rgba(255,255,255,0.85); }
.intake-body { flex: 1; padding-top: 20px; }
.intake-q { font-size:24px; font-weight: 700; line-height: 1.4; margin-bottom: 28px; }
.intake-q:has(+ .intake-sub) { margin-bottom: 8px; }
.intake-sub { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.5; margin-bottom: 24px; }
.intake-input { width: 100%; background: transparent; border: none; border-bottom: 1.5px solid rgba(255,255,255,0.5); padding: 10px 2px; font-size: 16px; color: #fff; outline: none; margin-bottom: 24px; font-family: var(--font-sans); }
.intake-input::placeholder { color: rgba(255,255,255,0.55); }
.intake-gender { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.intake-options { display: flex; flex-direction: column; gap: 12px; }
.intake-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.intake-choice { padding: 16px 0; background: transparent; border: 1.5px solid rgba(255,255,255,0.6); border-radius: 12px; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; font-family: var(--font-sans); transition: background .15s, border-color .15s; }
.intake-choice.selected { background: #2984C7; border-color: #2984C7; }
.intake-cta { flex-shrink: 0; padding-top: 16px; }
.intake-next { width: 100%; height: 56px; background: #2984C7; color: #fff; border: none; border-radius: 100px; font-size: 18px; font-weight: 700; cursor: pointer; font-family: var(--font-main); }
.intake-next:active { background: #2374b0; }

/* ====== 홈: 서비스 전체 목록 ====== */
#home-service-overview { padding-bottom: 48px; }
.overview-main-title { padding: 36px 24px; text-align: center; }
.overview-main-title h2 { font-size: 28px; font-weight: 700; line-height: 1.45; letter-spacing: -0.5px; color: #1a1a1a; }
.overview-title-accent { color: #e53e3e; }
.overview-category { margin-bottom: 36px; }
.overview-cat-header { display: flex; align-items: center; gap: 10px; padding: 0 24px; margin-bottom: 16px; }
.overview-cat-title { font-size: 16px; font-weight: 700; color: #1a1a1a; letter-spacing: -0.3px; }
.overview-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.overview-scroll::-webkit-scrollbar { display: none; }
.overview-card-list { display: flex; gap: 12px; padding: 0 24px; list-style: none; margin: 0; }
.overview-card { flex: 0 0 106px; }
.overview-card-thumb { width: 106px; height: 134px; border-radius: 8px; background: #d0d0d0; margin-bottom: 8px; overflow: hidden; }
.overview-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.overview-card-name { font-size:14px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; line-height: 1.3; }
.overview-card-desc { font-size:12px; color: #999; line-height: 1.4; }

/* ============================================
   웹툰 본편 뷰어 (1화 MVP · 임시도형) — 라이트 테마(메인 톤 일치)
   ============================================ */
#page-webtoon.active { display:flex; }
#page-webtoon {
  position:fixed; inset:0; z-index:1200;
  max-width:var(--max-width); margin:0 auto;
  flex-direction:column;
  background:var(--color-bg); color:var(--color-text-primary);
  height:100vh; height:100dvh;
}
.wt-header {
  flex:0 0 auto; height:calc(var(--header-height) + env(safe-area-inset-top));
  display:flex; align-items:center; justify-content:space-between;
  padding:env(safe-area-inset-top) 16px 0; background:var(--color-bg);
  border-bottom:1px solid var(--color-border);
  position:relative; z-index:1230;   /* 딤/시트 위에 유지 → 나가기 버튼 항상 탭 가능 */
}
.wt-title { font-size:16px; font-weight:700; letter-spacing:.02em; color:var(--color-text-primary); }
.wt-icon-btn {
  width:44px; height:44px; border:0; background:transparent;
  color:var(--color-text-primary); font-size:24px; cursor:pointer; border-radius:8px;
}
.wt-icon-btn:active { background:rgba(0,0,0,.05); }
.wt-scroll { flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.wt-stage { padding:24px 20px calc(80px + env(safe-area-inset-bottom)); min-height:100%; display:flex; flex-direction:column; gap:30px; }

/* 컷 등장 애니메이션 */
.wt-cut { animation:wtFade .4s ease; display:flex; flex-direction:column; gap:14px; }
@keyframes wtFade { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

/* 임시도형 그림 placeholder */
.wt-art {
  position:relative; border-radius:16px;
  background:repeating-linear-gradient(135deg,#EFF1F4,#EFF1F4 12px,#E7EAEF 12px,#E7EAEF 24px);
  border:1px solid var(--color-border);
  min-height:180px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; padding:24px 18px;
}
.wt-art-emoji { font-size:56px; line-height:1; }
.wt-art-caption {
  font-size:12px; color:var(--color-text-light); text-align:center; line-height:1.5;
  max-width:90%;
}
.wt-art-caption::before { content:"🖼 "; opacity:.6; }

/* 특수 연출: 잔고 숫자 */
.wt-balance { text-align:center; }
.wt-balance-num { font-size:46px; font-weight:800; color:var(--color-text-primary); letter-spacing:-.02em; }
.wt-balance-label { font-size:14px; color:var(--color-text-light); margin-top:4px; }

/* 특수 연출: 블러 진단서 */
.wt-report {
  border:1px solid var(--color-border); border-radius:14px;
  padding:18px; background:#fff; filter:blur(2.5px); opacity:.85;
  display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
.wt-report-title { font-weight:700; font-size:14px; color:#2984C7; }
.wt-report-bar { height:9px; border-radius:5px; background:linear-gradient(90deg,#2984C7,#1A1A1A); }
.wt-report-line { height:9px; border-radius:5px; background:#E3E6EA; }

/* 특수 연출: D-30 시계 */
.wt-dday { text-align:center; }
.wt-dday-num { font-size:40px; font-weight:800; color:#2984C7; }
.wt-dday-num small { font-size:18px; color:var(--color-text-secondary); font-weight:600; }

/* 대사 — 화자별 */
.wt-line { font-size:16px; line-height:1.6; color:var(--color-text-primary); }
.wt-subtitle { text-align:center; font-size:20px; font-weight:800; color:var(--color-text-primary); padding:6px 0; letter-spacing:-.01em; }
.wt-subtitle.big { font-size:24px; }
.wt-narration { text-align:center; font-style:italic; color:var(--color-text-secondary); font-size:16px; }
.wt-bubble { max-width:84%; padding:11px 14px; border-radius:14px; font-size:16px; line-height:1.55; }
.wt-bubble .wt-who { display:block; font-size:12px; font-weight:700; opacity:.7; margin-bottom:3px; }
.wt-row { display:flex; }
.wt-row.left { justify-content:flex-start; }
.wt-row.right { justify-content:flex-end; }
/* 나(대사) */
.wt-me { background:#2984C7; color:#fff; border-bottom-right-radius:4px; }
/* 나(속마음) */
.wt-think { background:#fff; border:1px dashed #C7CBD1; color:#7A7F87; border-bottom-right-radius:4px; font-style:italic; }
/* 미래의 나 */
.wt-future { background:#F2F3F5; color:var(--color-text-primary); border-bottom-left-radius:4px; }
/* 분석가 */
.wt-analyst { background:#EAF3FB; color:var(--color-text-primary); border-bottom-left-radius:4px; }
/* 지폐들 */
.wt-bills { background:#F0F1F3; color:#555; margin:0 auto; text-align:center; }
.wt-other { background:#EDEEF0; color:#333; border-bottom-left-radius:4px; }
.wt-other .wt-who { color:#8A8F97; }

/* 참여장치 — 공통 */
.wt-device { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.wt-device-q { font-size:14px; font-weight:700; color:#2984C7; text-align:center; }
.wt-check {
  display:flex; align-items:center; gap:10px;
  padding:13px 15px; border-radius:12px; cursor:pointer;
  background:#fff; border:1px solid var(--color-border);
  font-size:14px; color:var(--color-text-primary); transition:all .15s ease;
}
.wt-check .wt-check-box {
  width:20px; height:20px; border-radius:6px; flex:0 0 auto;
  border:2px solid #C7CBD1; display:flex; align-items:center; justify-content:center;
  font-size:14px; color:#fff;
}
.wt-check.on { background:#EAF3FB; border-color:#2984C7; }
.wt-check.on .wt-check-box { background:#2984C7; border-color:#2984C7; }
.wt-check-counter { text-align:center; font-size:14px; color:var(--color-text-light); }
.wt-check-counter b { color:#2984C7; font-size:18px; }

/* 참여장치 — 선택지(목표 등) */
.wt-choice {
  padding:14px 16px; border-radius:12px; cursor:pointer; text-align:left;
  background:#fff; border:1px solid var(--color-border);
  font-size:16px; color:var(--color-text-primary); transition:all .15s ease; width:100%;
}
.wt-choice:active { transform:scale(.99); }
.wt-choice.on { background:#EAF3FB; border-color:#2984C7; color:#1A1A1A; }

/* 세로 스크롤 — 인라인 진행 버튼 & 장치 잠금 */
.wt-inline-btn {
  width:100%; height:50px; margin-top:10px; border:0; border-radius:12px;
  background:var(--color-primary); color:#fff; font-size:16px; font-weight:700; cursor:pointer;
  transition:opacity .2s ease;
}
.wt-inline-btn:disabled { opacity:.35; cursor:not-allowed; }
.wt-inline-btn.end { background:#F0F1F3; color:#1A1A1A; }
.wt-device.locked { opacity:.65; pointer-events:none; }

/* 질문 바텀시트 — 스크롤하다 질문 지점에 오면 하단에서 떠오름 (집중형: 배경 살짝 어둡게) */
.wt-dim {
  position:absolute; inset:0; z-index:1210;
  background:rgba(0,0,0,.32); opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.wt-dim.show { opacity:1; pointer-events:auto; }
.wt-sheet {
  position:absolute; left:0; right:0; bottom:0; z-index:1220;
  background:#fff; border-radius:20px 20px 0 0;
  box-shadow:0 -6px 28px rgba(0,0,0,.16);
  padding:14px 20px calc(22px + env(safe-area-inset-bottom));
  max-height:78%; overflow-y:auto;
  transform:translateY(110%);
  transition:transform .36s cubic-bezier(.22,.61,.36,1);
}
.wt-sheet.show { transform:translateY(0); }
.wt-sheet:not(.show) { pointer-events:none; }
.wt-sheet-grip { width:38px; height:4px; border-radius:2px; background:#DADCE0; margin:0 auto 14px; }
.wt-sheet .wt-device { margin-top:0; }
.wt-gate-sentinel { height:1px; margin:0; }

/* 선택 후 스크롤 기록에 남는 답변 요약 칩 */
.wt-answered {
  align-self:center; font-size:14px; font-weight:700; color:#2984C7;
  background:#EAF3FB; border-radius:16px; padding:6px 16px;
}

/* 진단서 — 블러 레이더 차트 미리보기 (1-12) */
.wt-radar { display:block; width:150px; height:150px; margin:4px auto 8px; }
.wt-report-tag { font-size:12px; font-weight:700; color:var(--color-text-secondary); margin-top:4px; }
.wt-report-foot { font-size:12px; color:var(--color-text-light); margin-top:6px; }

/* ============================================
   2화 — 상시 HUD & 인터랙티브 위젯
   ============================================ */
.wt-hud {
  flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:8px 14px; background:var(--color-bg); border-bottom:1px solid var(--color-border);
}
.hud-future { display:flex; flex-direction:column; align-items:center; gap:1px; min-width:42px; }
.hud-future-icon { font-size:24px; line-height:1; transition:all .4s ease; }
.hud-future-label { font-size:12px; color:var(--color-text-light); }
.hud-gauge-wrap { flex:1 1 auto; }
.hud-gauge-top { display:flex; justify-content:space-between; font-size:12px; color:var(--color-text-secondary); margin-bottom:3px; }
.hud-gauge-top span:last-child { font-weight:700; color:#2984C7; }
.hud-gauge { height:10px; border-radius:6px; background:#E3E6EA; overflow:hidden; }
.hud-gauge-fill {
  height:100%; width:100%; border-radius:6px;
  background:#2984C7;
  transition:width .5s cubic-bezier(.4,0,.2,1), background .5s ease;
}
.hud-gauge-fill.low { background:#1A1A1A; }
.hud-gauge-fill.mid { background:#6BA8D8; }
.hud-dday { font-size:14px; font-weight:800; color:#1A1A1A; min-width:42px; text-align:right; }

/* 속마음 두 갈래 (충동 vs 절제) */
.wt-inner { display:flex; flex-direction:column; gap:7px; margin:2px 0; }
.wt-inner-line { font-size:14px; padding:8px 12px; border-radius:10px; line-height:1.4; }
.wt-inner-impulse { background:#F2F3F5; color:#555; border-left:3px solid #B8BCC4; }
.wt-inner-restrain { background:#EAF3FB; color:#1A1A1A; border-left:3px solid #2984C7; }
.wt-inner-line .wt-inner-who { font-size:12px; font-weight:700; opacity:.7; margin-right:6px; }

/* A/B 선택지 */
.wt-ab { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.wt-ab-btn {
  width:100%; padding:14px 16px; border-radius:12px; cursor:pointer; text-align:left;
  background:#fff; border:1px solid var(--color-border);
  font-size:16px; color:var(--color-text-primary); transition:all .15s ease;
}
.wt-ab-btn:active { transform:scale(.99); }
.wt-ab-btn.picked { border-color:#2984C7; background:#EAF3FB; color:#1A1A1A; }
.wt-ab-btn .wt-ab-tag { font-size:12px; opacity:.7; margin-left:6px; }
.wt-ab.locked .wt-ab-btn { pointer-events:none; opacity:.5; }
.wt-ab.locked .wt-ab-btn.picked { opacity:1; border-color:#2984C7; background:#EAF3FB; }

/* 즉시 리액션 박스 */
.wt-react {
  margin-top:10px; padding:12px 14px; border-radius:12px;
  background:#fff; border:1px solid var(--color-border);
  font-size:14px; line-height:1.5; animation:wtFade .35s ease; color:var(--color-text-primary);
}
.wt-react .wt-react-delta { font-weight:800; margin-right:6px; }
.wt-react .up { color:#2984C7; }
.wt-react .down { color:#1A1A1A; }

/* 5초 타이머 위젯 */
.wt-timer-pop {
  text-align:center; padding:18px; border-radius:14px;
  background:#fff; border:1px solid var(--color-border);
}
.wt-timer-count { font-size:34px; font-weight:800; color:#1A1A1A; }
.wt-timer-deal { font-size:14px; color:#2984C7; margin:4px 0 12px; }
.wt-timer-btns { display:flex; gap:10px; }
.wt-timer-btns button {
  flex:1; height:48px; border:0; border-radius:12px; font-size:16px; font-weight:700; cursor:pointer;
}
.wt-buy { background:#1A1A1A; color:#fff; }
.wt-skip { background:#fff; color:#1A1A1A; border:1px solid var(--color-border) !important; }

/* 가상 장바구니 */
.wt-cart-list { display:flex; flex-wrap:wrap; gap:8px; }
.wt-cart-item {
  padding:10px 13px; border-radius:10px; cursor:pointer; font-size:14px;
  background:#fff; border:1px solid var(--color-border); color:var(--color-text-primary);
}
.wt-cart-item.in { background:#EAF3FB; border-color:#2984C7; color:#1A1A1A; }
.wt-cart-item.must { border-color:#1A1A1A; }
.wt-cart-bar { display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.wt-cart-count { font-size:14px; color:var(--color-text-light); }
.wt-cart-count b { color:#2984C7; font-size:16px; }
.wt-mini-btn {
  padding:10px 18px; border:0; border-radius:10px; background:var(--color-primary); color:#fff;
  font-size:14px; font-weight:700; cursor:pointer;
}
.wt-mini-btn:disabled { opacity:.4; cursor:not-allowed; }

/* 2화 — 7점 척도 / 감정 라벨링 / 구독 색출 / 엔딩 카드 */
.wt-scale-ends { display:flex; justify-content:space-between; font-size:12px; color:var(--color-text-light); margin-bottom:8px; }
.wt-scale-row { display:flex; gap:6px; }
.wt-scale-btn { flex:1; height:42px; border:1px solid var(--color-border); background:#fff; color:var(--color-text-primary); border-radius:8px; font-size:16px; font-weight:700; cursor:pointer; }
.wt-scale-btn.picked { background:#2984C7; color:#fff; border-color:#2984C7; }
.wt-emo-q { font-size:14px; font-weight:700; color:#2984C7; text-align:center; margin:6px 0; }
.wt-emo-step2 { margin-top:12px; animation:wtFade .35s ease; }
.wt-ab.locked .wt-ab-btn[data-k].picked, .wt-ab.locked .wt-ab-btn[data-act].picked { opacity:1; border-color:#2984C7; background:#EAF3FB; }
.wt-sub-list .wt-cart-item.canceled { text-decoration:line-through; opacity:.55; background:#EAF3FB; border-color:#2984C7; }
.wt-ending { display:flex; flex-direction:column; gap:5px; padding:20px; border-radius:16px; background:#fff; border:1px solid var(--color-border); box-shadow:var(--shadow-sm); text-align:center; }
.wt-end-grade { font-size:48px; }
.wt-end-title { font-size:20px; font-weight:800; color:var(--color-text-primary); }
.wt-end-desc { font-size:14px; color:var(--color-text-secondary); }
.wt-end-meta { font-size:14px; color:var(--color-text-light); margin-top:8px; }
.wt-end-meta b { color:#2984C7; }
.wt-end-top3-label { font-size:14px; font-weight:700; color:var(--color-text-secondary); margin-top:14px; }
.wt-end-top3-label small { color:var(--color-text-light); font-weight:400; }
.wt-end-top3 { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.wt-end-leak { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:#F7F8FA; border:1px solid var(--color-border); font-size:14px; color:var(--color-text-primary); }
.wt-end-rank { width:22px; height:22px; border-radius:50%; background:#2984C7; color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.wt-end-blur { margin-left:auto; filter:blur(3px); color:#2984C7; letter-spacing:2px; }
.wt-end-goal { font-size:14px; font-weight:700; color:#2984C7; margin-top:6px; }

/* ============================================
   3화 — 결과 + 결제
   ============================================ */
.e3 { display:flex; flex-direction:column; gap:16px; }
.e3-titlecard { text-align:center; padding:24px 0 8px; }
.e3-title-sub { font-size:14px; color:var(--color-text-light); }
.e3-title-main { font-size:24px; font-weight:800; color:var(--color-text-primary); margin-top:4px; }
.e3-analyzing { text-align:center; font-size:14px; color:var(--color-text-secondary); padding:10px; background:#F7F8FA; border:1px solid var(--color-border); border-radius:10px; }
.e3-analyzing b { color:#2984C7; }
.e3-future { text-align:center; }
.e3-future-icon { font-size:44px; }
.e3-section { font-size:14px; font-weight:800; letter-spacing:.1em; color:var(--color-text-light); text-align:center; border-top:1px solid var(--color-border); padding-top:16px; }
.e3-section.paid { color:#2984C7; border-color:rgba(41,132,199,.3); }
.e3-typecard { text-align:center; padding:22px; border-radius:16px; background:#EAF3FB; border:1px solid #2984C7; }
.e3-type-emoji { font-size:44px; }
.e3-type-name { font-size:20px; font-weight:800; color:#2984C7; margin-top:6px; }
.e3-type-code { font-size:14px; color:var(--color-text-secondary); margin-top:4px; }
.e3-type-leak { font-size:12px; color:var(--color-text-light); margin-top:8px; }
.e3-card { padding:16px; border-radius:14px; background:#fff; border:1px solid var(--color-border); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px; }
.e3-card-title { font-size:14px; font-weight:700; color:var(--color-text-primary); }
.e3-note { font-size:14px; color:var(--color-text-secondary); line-height:1.5; }
.e3-axis-top { display:flex; justify-content:space-between; font-size:12px; color:var(--color-text-secondary); margin-bottom:4px; }
.e3-axis-track { height:8px; background:#E3E6EA; border-radius:5px; overflow:hidden; }
.e3-axis-fill { height:100%; background:#2984C7; border-radius:5px; }
.e3-axis { margin-bottom:4px; }
.e3-leak-row { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--color-text-primary); }
.e3-leak-row.locked { opacity:.6; }
.e3-leak-rank { width:22px; height:22px; flex:0 0 auto; border-radius:50%; background:#2984C7; color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; }
.e3-leak-bar { flex:1; height:8px; background:#E3E6EA; border-radius:5px; overflow:hidden; }
.e3-leak-bar i { display:block; height:100%; background:linear-gradient(90deg,#2984C7,#1A1A1A); }
.e3-leak-pct { font-size:12px; color:var(--color-text-light); min-width:24px; text-align:right; }
.e3-loss { padding:18px; border-radius:14px; background:#fff; border:1px solid var(--color-border); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px; }
.e3-loss-rate { font-size:14px; color:var(--color-text-secondary); }
.e3-loss-peer { color:#1A1A1A; font-weight:700; margin-left:6px; }
.e3-loss-big { font-size:16px; color:var(--color-text-primary); line-height:1.5; }
.e3-loss-big b { color:#1A1A1A; }
.e3-est { font-size:12px; color:var(--color-text-light); }
.e3-divider { text-align:center; font-size:12px; color:var(--color-text-light); letter-spacing:.05em; padding:6px 0; }
.e3-pay { padding:20px; border-radius:16px; background:#fff; border:1px solid #2984C7; box-shadow:0 4px 16px rgba(41,132,199,.12); display:flex; flex-direction:column; gap:10px; text-align:center; }
.e3-pay-locks { font-size:12px; color:var(--color-text-secondary); }
.e3-pay-ai { font-size:14px; color:#2984C7; }
.e3-pay-social { font-size:12px; color:var(--color-text-light); }
.e3-pay-price { font-size:24px; font-weight:800; color:var(--color-text-primary); margin-top:4px; }
.e3-pay-old { font-size:16px; color:var(--color-text-light); text-decoration:line-through; font-weight:400; }
.e3-pay-off { font-size:14px; color:#D32F2F; }
.e3-pay-limit { font-size:12px; color:#D32F2F; }
.e3-later { background:transparent; border:0; color:var(--color-text-light); font-size:14px; cursor:pointer; padding:8px; }
.e3-top1 { padding:20px; border-radius:16px; background:#EAF3FB; border:1px solid #2984C7; display:flex; flex-direction:column; gap:8px; }
.e3-top1-label { font-size:12px; color:#2984C7; font-weight:700; }
.e3-top1-name { font-size:20px; font-weight:800; color:var(--color-text-primary); }
.e3-top1-root { font-size:14px; color:var(--color-text-secondary); line-height:1.5; }
.e3-rx { padding:12px; border-radius:10px; background:#F7F8FA; border:1px solid var(--color-border); }
.e3-rx-leak { font-size:14px; font-weight:700; color:#2984C7; margin-bottom:4px; }
.e3-rx { font-size:14px; color:var(--color-text-primary); line-height:1.5; }
.e3-plan-row { font-size:14px; color:var(--color-text-primary); padding:8px 10px; background:#F7F8FA; border:1px solid var(--color-border); border-radius:8px; }
.e3-happy { text-align:center; padding:18px; border-radius:14px; background:#F7F8FA; border:1px solid var(--color-border); }
.e3-happy-goal { font-size:14px; font-weight:700; color:#2984C7; margin-top:8px; }
.e3-outro { font-size:12px; color:var(--color-text-light); text-align:center; line-height:1.5; padding:8px; }

/* ============================================
   카톡 호감력 테스트 (lovechat) — 채팅형 (메인 톤)
   ============================================ */
#page-lovesetup.active, #page-lovechat.active, #page-loveresult.active { display:flex; }
#page-lovesetup, #page-lovechat, #page-loveresult {
  position:fixed; inset:0; z-index:1200; max-width:var(--max-width); margin:0 auto;
  flex-direction:column; background:var(--color-bg); color:var(--color-text-primary);
  height:100vh; height:100dvh;
}
.lc-body { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:24px 24px calc(40px + env(safe-area-inset-bottom)); }

/* 상대 설정 */
.lc-setup-title { font-size:24px; font-weight:800; letter-spacing:-.02em; }
.lc-setup-sub { font-size:14px; color:var(--color-text-light); margin-top:8px; margin-bottom:24px; line-height:1.5; }
.lc-field { margin-bottom:22px; }
.lc-field-label { display:block; font-size:14px; font-weight:700; color:var(--color-text-secondary); margin-bottom:10px; }
.lc-field-label small { font-weight:500; color:var(--color-text-light); }
.lc-choices { display:flex; flex-wrap:wrap; gap:8px; }
.lc-choice { padding:10px 14px; border:1.5px solid var(--color-border); border-radius:10px; background:#fff;
  font-size:14px; font-weight:600; color:var(--color-text-primary); transition:all .15s ease; }
.lc-choice:active { transform:scale(.97); }
.lc-choice.selected { border-color:#2f7bf6; background:#2f7bf6; color:#fff; }
.lc-mbti-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.lc-mbti-grid .lc-choice { padding:11px 0; text-align:center; font-size:13px; }
.lc-name-input { width:100%; height:48px; border:1.5px solid var(--color-border); border-radius:10px;
  padding:0 14px; font-size:16px; background:#fff; }
.lc-name-input:focus { outline:none; border-color:#2f7bf6; }
.lc-start-btn { width:100%; height:52px; margin-top:8px; border-radius:12px; background:#1a1a1a; color:#fff;
  font-size:16px; font-weight:700; }
.lc-start-btn:active { opacity:.9; }

/* 채팅 */
.lc-chat-header { border-bottom:1px solid var(--color-border); }
.lc-head-center { display:flex; flex-direction:column; align-items:center; line-height:1.25; }
.lc-head-name { font-size:16px; font-weight:700; }
.lc-head-sub { font-size:12px; color:var(--color-text-light); margin-top:2px; }
.lc-scroll { flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; background:#eceff3; }
.lc-stage { padding:16px 14px; display:flex; flex-direction:column; gap:8px; min-height:100%; }
.lc-row { display:flex; align-items:flex-end; gap:8px; animation:lcFade .25s ease; }
.lc-row.left { justify-content:flex-start; }
.lc-row.right { justify-content:flex-end; }
@keyframes lcFade { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.lc-avatar { width:34px; height:34px; border-radius:17px; flex:0 0 auto; display:flex; align-items:center;
  justify-content:center; font-size:13px; font-weight:700; color:#fff; }
.lc-op { background:#1a1a1a; }
.lc-them-av { background:#2f7bf6; }
.lc-bubble { max-width:74%; padding:9px 13px; border-radius:16px; font-size:16px; line-height:1.5; word-break:break-word; }
.lc-them { background:#fff; color:#1a1a1a; border-bottom-left-radius:5px; box-shadow:0 1px 1.5px rgba(0,0,0,.06); }
.lc-me { background:#2f7bf6; color:#fff; border-bottom-right-radius:5px; }
.lc-sys { align-self:center; background:rgba(0,0,0,.07); color:#5a5a5a; font-size:12px; padding:5px 12px;
  border-radius:12px; margin:6px auto; text-align:center; max-width:88%; }
.lc-pay { display:flex; flex-direction:column; }
.lc-pay-btn { margin-top:10px; width:100%; background:#2f7bf6; color:#fff; padding:11px; border-radius:10px;
  font-size:15px; font-weight:700; }
.lc-pay-btn:disabled { background:#9bbdf5; }
.lc-typingdots { display:inline-flex; gap:4px; align-items:center; }
.lc-typingdots span { width:6px; height:6px; border-radius:50%; background:#b8bdc6; display:inline-block;
  animation:lcBlink 1.2s infinite both; }
.lc-typingdots span:nth-child(2){ animation-delay:.2s; } .lc-typingdots span:nth-child(3){ animation-delay:.4s; }
@keyframes lcBlink { 0%,80%,100%{opacity:.3;} 40%{opacity:1;} }

/* 입력 바 / 결과 버튼 바 */
.lc-inputbar { flex:0 0 auto; display:flex; gap:8px; align-items:center; background:#fff;
  border-top:1px solid var(--color-border); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); }
.lc-inputbar input { flex:1 1 auto; height:42px; border:none; background:#f1f1f3; border-radius:21px;
  padding:0 16px; font-size:16px; }
.lc-inputbar input:focus { outline:none; }
.lc-send { width:42px; height:42px; border-radius:21px; background:#2f7bf6; color:#fff; font-size:17px; flex:0 0 auto; }
.lc-resultbar { flex:0 0 auto; padding:8px 14px calc(8px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--color-border); }
.lc-resultbar button { width:100%; height:46px; border-radius:10px; background:#1a1a1a; color:#fff; font-size:16px; font-weight:700; }

/* 결과 */
.lc-demo-tag { display:inline-block; background:#fef0c7; color:#92610a; font-size:12px; font-weight:700;
  padding:4px 10px; border-radius:8px; margin-bottom:16px; }
.lc-score-card { text-align:center; padding:24px 16px; border:1px solid var(--color-border); border-radius:14px; margin-bottom:20px; }
.lc-score-num { font-size:56px; font-weight:800; color:#2f7bf6; letter-spacing:-.02em; line-height:1; }
.lc-score-unit { font-size:18px; color:var(--color-text-light); font-weight:700; }
.lc-grade-row { margin-top:14px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.lc-grade-chip { font-size:16px; font-weight:800; padding:7px 14px; border-radius:10px; background:#f1f4f9; }
.lc-type-chip { font-size:16px; font-weight:800; padding:7px 14px; border-radius:10px; background:#2f7bf6; color:#fff; }
.lc-sec-title { font-size:18px; font-weight:800; margin:24px 0 12px; }
.lc-bar-row { margin-bottom:12px; }
.lc-bar-head { display:flex; justify-content:space-between; font-size:14px; margin-bottom:6px; }
.lc-bar-head b { font-weight:700; }
.lc-bar-track { height:9px; border-radius:5px; background:#E3E6EA; overflow:hidden; }
.lc-bar-fill { height:100%; border-radius:5px; background:linear-gradient(90deg,#2f7bf6,#1a1a1a); }
.lc-coach { border:1px solid var(--color-border); border-radius:12px; padding:14px; margin-bottom:10px; }
.lc-coach-my { font-size:14px; color:var(--color-text-secondary); }
.lc-coach-my b { color:#1a1a1a; }
.lc-coach-tip { font-size:14px; margin-top:8px; line-height:1.55; }
.lc-mind { background:#eaf3fb; border-radius:12px; padding:16px; font-size:15px; line-height:1.6; }
.lc-result-actions { display:flex; gap:10px; margin-top:24px; }
.lc-result-actions button { flex:1; height:48px; border-radius:10px; font-size:15px; font-weight:700; }
.lc-btn-primary { background:#1a1a1a; color:#fff; }
.lc-btn-ghost { background:#fff; border:1.5px solid var(--color-border); color:#1a1a1a; }

/* ── 서비스 소개: 텍스트형 인트로 (이미지 없는 테스트, 예: 카톡 호감력) ── */
.service-intro--text .service-intro-body { display:flex; align-items:center; justify-content:center; padding:24px; }
.service-intro-text { color:#1a1a1a; max-width:440px; width:100%; }
.si-badge { display:inline-block; background:#eaf1fe; color:#2f7bf6; font-size:13px; font-weight:700; padding:6px 12px; border-radius:100px; margin-bottom:16px; }
.si-title { font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.25; }
.si-hook { font-size:17px; color:var(--color-text-secondary); line-height:1.5; margin-top:12px; font-weight:600; }
.si-points { margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.si-points li { position:relative; padding-left:26px; font-size:15px; line-height:1.5; color:#333; }
.si-points li::before { content:'✓'; position:absolute; left:0; top:0; color:#2f7bf6; font-weight:800; }

/* ── 카톡 호감력 상대 설정 (정보입력과 동일 톤: 파란 배경 + 흰 칩) ── */
#lc-setup-bg { background-image:linear-gradient(160deg, #2f7bf6 0%, #7aa9f7 100%); }
.lc-setup-body { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; }
#page-lovesetup .intake-sub { color:rgba(255,255,255,.72); font-size:14px; line-height:1.5; margin:8px 0 22px; }
#page-lovesetup .lc-field { margin-bottom:20px; }
#page-lovesetup .lc-field-label { display:block; font-size:14px; font-weight:700; color:rgba(255,255,255,.92); margin-bottom:10px; }
#page-lovesetup .lc-field-label small { font-weight:500; color:rgba(255,255,255,.6); }
#page-lovesetup .lc-choices { display:flex; flex-wrap:wrap; gap:8px; }
#page-lovesetup .lc-choice { flex:0 0 auto; padding:11px 14px; font-size:14px; font-weight:600; border-radius:12px;
  background:transparent; border:1.5px solid rgba(255,255,255,.55); color:#fff; transition:background .15s, color .15s, border-color .15s; }
#page-lovesetup .lc-choice.selected { background:#fff; border-color:#fff; color:#2f7bf6; }
#page-lovesetup .lc-mbti-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
#page-lovesetup .lc-mbti-grid .lc-choice { padding:11px 0; text-align:center; font-size:13px; }

/* ── 하트 반응 (내 말풍선에 톡) ── */
.lc-me { position:relative; }
.lc-heart { position:absolute; left:-9px; bottom:-11px; width:24px; height:24px; font-size:14px;
  background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.2); animation:lcHeartPop .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes lcHeartPop { 0%{ transform:scale(0); } 100%{ transform:scale(1); } }

/* ── 결과 상세화 ── */
.lc-bar-note { font-size:13px; color:var(--color-text-light); line-height:1.5; margin-top:6px; }
.lc-persona-card { background:#2f7bf6; color:#fff; border-radius:14px; padding:16px 18px; margin-bottom:4px; }
.lc-persona-name { font-size:16px; font-weight:800; margin-bottom:6px; }
.lc-persona-card p { font-size:14px; line-height:1.6; color:rgba(255,255,255,.93); }
.lc-summary { font-size:15px; line-height:1.7; color:#333; background:#f6f8fc; border-radius:12px; padding:16px; }
.lc-coach.good { border-color:#bfe3c9; background:#f2fbf5; }
.lc-coach.weak { border-color:#f5d9b0; background:#fff9f0; }
.lc-next { font-size:15px; line-height:1.7; color:#1a1a1a; background:#eaf3fb; border-radius:12px; padding:16px; }

/* ============================================
   휴대폰 문자 인증 (회원가입)
   ============================================ */
.phone-verify-row { display:flex; gap:8px; align-items:stretch; }
.phone-verify-row input { flex:1; min-width:0; }
.btn-verify { flex:0 0 auto; padding:0 14px; border:none; border-radius:var(--radius-sm); background:#1a1a1a; color:#fff; font-size:14px; font-weight:600; white-space:nowrap; cursor:pointer; transition:background var(--transition-fast); }
.btn-verify:disabled { background:#c9c9c9; cursor:default; }
.phone-verify-msg { font-size:13px; margin:6px 2px 0; min-height:16px; }
.phone-verify-msg.ok  { color:#1a7f37; }
.phone-verify-msg.err { color:#c0392b; }