/* 소개팅할래 — 최종 스타일 (Pretendard · 브랜드 레드, B 웜 레드 테마) */

@font-face {
  font-family: "Pretendard Variable";
  src: url("/assets/v5/fonts/PretendardVariable-subset.woff2") format("woff2");
  font-weight: 45 920; font-style: normal; font-display: swap;
}

:root {
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --red: #D64D7A; --red-dark: #B23A63; --red-soft: #FBE3EB; --red-tint: #FDF1F5;
  --black: #111111; --n900: #171717; --n700: #404040; --n600: #525252; --n500: #737373; --n400: #A3A3A3; --n300: #D4D4D4; --n200: #E5E5E5; --n100: #F5F5F5; --container-app: 600px; --n50: #FAFAFA; --white: #FFFFFF;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --r: 20px; --r-sm: 12px;
  --container: 1120px; --gutter: 20px;
  /* 테마: B 웜 레드 (확정) */
  --bg: #FCF8FB; --bg-alt: #FDEEF3; --fg: #15131A; --fg-2: #4F4A57; --fg-3: #7D7686; --line: #E9E2EC;
  --card: #FFFFFF; --card-line: rgba(21,19,26,.12);
  --btn-bg: #D64D7A; --btn-fg: #FFFFFF; --btn-hover: #B23A63;
  --btn2-bg: #FFFFFF; --btn2-fg: #15131A; --btn2-line: #E8DDE6;
  --eyebrow: #D64D7A; --accent: #D64D7A; --accent-soft: #FBE3EB; --accent-tint: #FDF1F5;
  --shadow: 0 12px 32px rgba(214,77,122,.08);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.7; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: anywhere; overflow-x: hidden; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(214,77,122,.35); outline-offset: 3px; border-radius: 6px; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 72px 0; }
.section-alt { background: var(--bg-alt); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 900px) { :root { --gutter: 40px; } .section { padding: 112px 0; } }

/* ---------- type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--eyebrow); }
.eyebrow .dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.eyebrow .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); opacity: .6; animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
.h1 { font-size: clamp(40px, 10vw, 64px); font-weight: 300; line-height: 1.12; letter-spacing: -0.04em; }
.h1 .brand-word { font-weight: 500; position: relative; display: inline-block; }
.h1 .brand-word::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: 3px; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left center; }
.is-ready .h1 .brand-word::after { animation: draw .7s var(--ease) .8s forwards; }
.h1 .q { color: var(--accent); font-weight: 400; }
.h2 { font-size: clamp(28px, 6vw, 44px); font-weight: 600; line-height: 1.18; letter-spacing: -0.03em; }
.h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; }
.lead { font-size: 16px; color: var(--fg-2); line-height: 1.75; }
.small { font-size: 13.5px; color: var(--fg-3); line-height: 1.6; }
.sec-head { max-width: 640px; }
.sec-head .h2 { margin-top: 14px; }
.sec-head .lead { margin-top: 14px; }
.sec-head.center { margin: 0 auto; text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; } .mt-5 { margin-top: 56px; }
.accent { color: var(--accent); }
.br-d { display: none; }
@media (min-width: 900px) { .br-d { display: inline; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s; }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { background: var(--btn-hover); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.btn-secondary { background: var(--btn2-bg); color: var(--btn2-fg); border-color: var(--btn2-line); }
.btn-secondary:hover { border-color: var(--fg); transform: translateY(-1px); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 13.5px; }
.btn-lg { min-height: 58px; padding: 0 32px; font-size: 16px; }
.btn svg { width: 16px; height: 16px; transition: transform .2s; }
.btn:hover svg { transform: translateX(2px); }
.textlink { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fg); }
.textlink svg { width: 16px; height: 16px; color: var(--accent); transition: transform .2s; }
.textlink:hover svg { transform: translateX(3px); }
.textlink .muted { color: var(--fg-3); font-weight: 500; }
.arrow-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--fg); margin-top: 18px; }
.arrow-link svg { width: 16px; height: 16px; transition: transform .2s; }
.arrow-link:hover svg { transform: translateX(3px); }
.arrow-link:hover { color: var(--accent); }

/* ---------- header ---------- */
.header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid transparent; transition: border-color .25s; }
.header.is-scrolled { border-bottom-color: var(--line); }
.header .container { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.03em; }
.brand img { width: 34px; height: 34px; }
.brand .tag { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; color: var(--fg-3); padding-left: 10px; border-left: 1px solid var(--line); line-height: 1; }
.nav { display: none; align-items: center; gap: 2px; }
.nav a { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; color: var(--fg-2); padding: 8px 12px; border-radius: 999px; transition: color .15s, background .15s; }
.nav a:hover { color: var(--fg); background: var(--bg-alt); }
.nav .btn { margin-left: 10px; letter-spacing: 0; }
.nav a.btn-primary { color: var(--btn-fg); background: var(--btn-bg); }
.nav a.btn-primary:hover { background: var(--btn-hover); color: var(--btn-fg); }
.nav-toggle { width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.nav-sheet { position: absolute; left: var(--gutter); right: var(--gutter); top: 74px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; }
.nav-sheet a { padding: 13px 14px; border-radius: 12px; font-weight: 600; font-size: 15px; }
.nav-sheet a:hover { background: var(--bg-alt); }
.nav-sheet .btn { margin: 6px; }
@media (min-width: 1000px) { .nav { display: inline-flex; } .nav-toggle, .nav-sheet { display: none !important; } .header .container { height: 76px; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 40px 0 64px; }
.hero-grid { display: grid; gap: 40px; align-items: center; position: relative; z-index: 1; }
.hero-copy .h1 { margin-top: 22px; }
.hero-copy .lead { margin-top: 22px; max-width: 520px; }
.hero-cta { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.hero-links { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.hero-note { margin-top: 26px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-3); }
.hero-note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.scroll-cue { display: none; }
.hero-visual { position: relative; min-height: 360px; }
/* 블롭 + 떠오르는 하트 */
.blob { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; opacity: .9; animation: drift 12s ease-in-out infinite alternate; }
.blob-1 { width: 320px; height: 320px; right: 8%; top: -40px; background: rgba(214,77,122,.10); }
.blob-2 { width: 360px; height: 360px; left: -60px; bottom: -80px; background: rgba(255,186,160,.28); animation-delay: -4s; }
.blob-3 { width: 220px; height: 220px; right: 24%; bottom: 10%; background: rgba(255,160,175,.22); animation-delay: -8s; }
.hearts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hearts i { position: absolute; bottom: -30px; width: 16px; height: 16px; color: var(--accent); opacity: 0; animation: rise var(--d, 9s) linear var(--delay, 0s) infinite; }
.hearts i svg { width: 100%; height: 100%; }
/* reveal */
.reveal .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.reveal .line > span { display: inline-block; transform: translateY(110%); will-change: transform; }
.is-ready .reveal .line > span { animation: riseIn 1s var(--ease) forwards; }
.is-ready .reveal .line:nth-child(2) > span { animation-delay: .14s; }
.fade { opacity: 0; transform: translateY(10px); }
.is-ready .fade { animation: fadeIn .8s var(--ease) forwards; }
.is-ready .fade.d1 { animation-delay: .5s; } .is-ready .fade.d2 { animation-delay: .65s; } .is-ready .fade.d3 { animation-delay: .8s; } .is-ready .fade.d4 { animation-delay: .95s; }
@media (min-width: 900px) {
  .hero { padding: 72px 0 96px; min-height: calc(100vh - 76px); display: flex; align-items: center; }
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; width: 100%; }
  .scroll-cue { display: inline-flex; align-items: center; gap: 10px; position: absolute; left: var(--gutter); bottom: 28px; font-size: 10.5px; font-weight: 700; letter-spacing: .25em; color: var(--fg-3); }
  .scroll-cue::before { content: ""; width: 1px; height: 36px; background: var(--fg-3); animation: cue 1.8s ease-in-out infinite; }
  .hero-visual { min-height: 520px; }
}

/* 히어로 비주얼 A — 로고 마크 + 알림 카드 */
.visual-logo { position: relative; height: 100%; min-height: 420px; display: flex; align-items: center; justify-content: center; }
.visual-logo .mark { width: min(64%, 330px); filter: drop-shadow(0 20px 40px rgba(214,77,122,.14)); animation: floatY 6s ease-in-out infinite; }
.toast { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); border: 1px solid var(--card-line); border-radius: 16px; box-shadow: var(--shadow); font-size: 13px; max-width: 260px; }
.toast .ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.toast .ico svg { width: 18px; height: 18px; }
.toast b { display: block; font-size: 13.5px; }
.toast span { color: var(--fg-3); font-size: 12.5px; }
.toast-1 { left: 0; top: 3%; animation: floatY 7s ease-in-out -2s infinite; }
.toast-2 { right: 0; bottom: 1%; animation: floatY 8s ease-in-out -4s infinite; }
/* 히어로 비주얼 B — 사진 */
.visual-photo { position: relative; aspect-ratio: 4 / 5; max-height: 560px; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); }
.visual-photo .ph { position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 20%, #FFE9E4 0%, #F3C2D3 55%, #D9A39A 100%); animation: kenburns 14s ease-in-out infinite alternate; }
.visual-photo .ph::before { content: ""; position: absolute; left: 50%; top: 22%; width: 26%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: rgba(255,255,255,.34); }
.visual-photo .ph::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 70%; height: 52%; transform: translateX(-50%); border-radius: 50% 50% 0 0 / 60% 60% 0 0; background: rgba(255,255,255,.28); }
.visual-photo .ph-label { position: absolute; left: 14px; bottom: 14px; font-size: 11px; font-weight: 600; color: rgba(31,26,25,.55); background: rgba(255,255,255,.7); padding: 4px 9px; border-radius: 999px; }
.visual-photo .overlay { position: absolute; right: 14px; top: 14px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,.92); border-radius: 14px; font-size: 12.5px; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.visual-photo .overlay img { width: 30px; height: 30px; border-radius: 50%; }
.visual-photo .overlay b { display: block; font-size: 13px; }
.visual-photo .overlay span { color: var(--fg-3); }
/* 히어로 비주얼 C — 폰 목업 */
.visual-phone { display: flex; justify-content: center; }
.phone { position: relative; width: 300px; border-radius: 40px; background: #111; padding: 12px; box-shadow: 0 30px 60px rgba(0,0,0,.18); animation: floatY 7s ease-in-out infinite; }
.phone .screen { border-radius: 30px; background: var(--white); overflow: hidden; display: flex; flex-direction: column; min-height: 540px; }
.phone .ph-head { display: flex; align-items: center; gap: 10px; padding: 46px 16px 12px; border-bottom: 1px solid #F0F0F0; }
.phone .ph-head img { width: 38px; height: 38px; border-radius: 50%; }
.phone .ph-head b { display: block; font-size: 14px; }
.phone .ph-head span { font-size: 11.5px; color: var(--n500); }
.phone .notch { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: 110px; height: 30px; border-radius: 0 0 18px 18px; background: #111; }
.phone .ph-body { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #FAFAFA; }
.phone .bub { max-width: 82%; padding: 10px 12px; border-radius: 16px; font-size: 13px; line-height: 1.5; }
.phone .bub.ai { align-self: flex-start; background: #fff; border: 1px solid #ECECEC; border-bottom-left-radius: 6px; }
.phone .bub.me { align-self: flex-end; background: var(--accent-soft); border-bottom-right-radius: 6px; }
.phone .bub .who { display: block; font-size: 10.5px; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.phone .ph-input { display: flex; gap: 8px; padding: 12px 14px 18px; border-top: 1px solid #F0F0F0; }
.phone .ph-input span { flex: 1; height: 40px; border-radius: 999px; background: #F2F2F2; display: flex; align-items: center; padding: 0 14px; font-size: 12.5px; color: var(--n400); }
.phone .ph-input i { width: 40px; height: 40px; border-radius: 50%; background: var(--btn-bg); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.phone .ph-input i svg { width: 18px; height: 18px; }

/* ---------- 시작하는 방법 (4 cards) ---------- */
.start-grid { display: grid; gap: 14px; margin-top: 40px; }
.card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r); padding: 26px; transition: transform .25s var(--ease), box-shadow .25s; }
.start-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.start-card .ico { width: 44px; height: 44px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.start-card .ico svg { width: 22px; height: 22px; }
.start-card .h3 { margin-bottom: 6px; }
.start-card .small { min-height: 2.4em; }
.start-card .meta { display: block; margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--accent); }
.start-card .arrow-link { display: flex; margin-top: 14px; }
@media (min-width: 600px) { .start-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .start-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 숫자 3개 ---------- */
.stats { display: grid; gap: 14px; margin-top: 40px; }
.stat { padding: 28px 24px; border-radius: var(--r); background: var(--card); border: 1px solid var(--card-line); text-align: center; }
.stat .num { font-size: clamp(44px, 8vw, 64px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.stat .num small { font-size: .42em; font-weight: 600; letter-spacing: -0.02em; margin-left: 4px; color: var(--fg-2); }
.stat .lbl { margin-top: 10px; font-size: 14px; color: var(--fg-2); }
.stat .accent { color: var(--accent); }
.br-d { display: none; }
@media (min-width: 900px) { .br-d { display: inline; } }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 테스트 ---------- */
.feature { display: grid; gap: 32px; align-items: center; }
.feature .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.feature .note-line { margin-top: 14px; font-size: 13px; color: var(--fg-3); }
.quiz { display: block; background: var(--card); border: 1px solid var(--card-line); border-radius: 24px; padding: 24px; box-shadow: var(--shadow); max-width: 440px; margin: 0 auto; }
.quiz .prog { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; color: var(--fg-3); }
.quiz .prog i { flex: 1; height: 5px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; display: block; }
.quiz .prog i::after { content: ""; display: block; width: 9%; height: 100%; background: var(--accent); border-radius: 999px; }
.quiz .q { margin-top: 18px; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.4; }
.quiz .q em { font-style: normal; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .1em; display: block; margin-bottom: 6px; }
.quiz .opt { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; margin-top: 10px; font-size: 14px; font-weight: 500; transition: border-color .15s, background .15s; }
.quiz .opt:hover { border-color: var(--fg); }
.quiz .opt b { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-alt); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.quiz .opt.is-on { border-color: var(--accent); background: var(--accent-tint); }
.quiz .opt.is-on b { background: var(--accent); color: #fff; }
@media (min-width: 900px) { .feature { grid-template-columns: 1fr 1fr; gap: 64px; } .feature.flip > :first-child { order: 2; } }

/* ---------- AI LOVER 카드 ---------- */
.lover-grid { display: grid; gap: 16px; margin-top: 40px; }
.lover-card { position: relative; border-radius: 24px; overflow: hidden; background: var(--card); border: 1px solid var(--card-line); transition: transform .25s var(--ease), box-shadow .25s; }
.lover-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.lover-card .photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.lover-card .photo .ph { position: absolute; inset: 0; transition: transform 2s var(--ease); }
.lover-card:hover .photo .ph { transform: scale(1.06); }
.lover-card .photo .ph::before { content: ""; position: absolute; left: 50%; top: 20%; width: 28%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: rgba(255,255,255,.36); }
.lover-card .photo .ph::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 72%; height: 52%; transform: translateX(-50%); border-radius: 50% 50% 0 0 / 60% 60% 0 0; background: rgba(255,255,255,.3); }
.ph-haneul { background: radial-gradient(120% 90% at 30% 20%, #EEF5F0 0%, #CFE1D5 55%, #A9C6B4 100%); }
.ph-minji { background: radial-gradient(120% 90% at 70% 20%, #FFE9E4 0%, #F3C2D3 55%, #D9A39A 100%); }
.lover-card .badge { position: absolute; left: 14px; top: 14px; font-size: 11px; font-weight: 800; letter-spacing: .08em; background: rgba(255,255,255,.92); padding: 6px 10px; border-radius: 999px; color: var(--accent); }
.lover-card .replace { position: absolute; right: 12px; bottom: 12px; font-size: 10.5px; color: rgba(31,26,25,.5); background: rgba(255,255,255,.65); padding: 3px 8px; border-radius: 999px; }
.lover-card .body { padding: 22px 22px 24px; }
.lover-card .meta { font-size: 12.5px; color: var(--fg-3); font-weight: 600; }
.lover-card .name { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; margin-top: 4px; }
.lover-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lover-card .tags span { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--bg-alt); color: var(--fg-2); }
.lover-card .quote { margin-top: 14px; font-size: 14px; color: var(--fg-2); line-height: 1.65; }
.lover-card .btn { margin-top: 18px; width: 100%; }
.lover-card.cta-card { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 28px; background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; }
.lover-card.cta-card .h3 { font-size: 24px; color: inherit; }
.lover-card.cta-card p { margin-top: 12px; opacity: .8; font-size: 14.5px; }
.lover-card.cta-card .btn { width: auto; background: #fff; color: #111; margin-top: 24px; }
.lover-note { margin-top: 18px; font-size: 13px; color: var(--fg-3); display: flex; gap: 8px; align-items: center; }
.lover-note svg { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; }
@media (min-width: 700px) { .lover-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 진행 방식과 비용 ---------- */
.how-grid { display: grid; gap: 16px; margin-top: 40px; }
.how-card { padding: 28px; border-radius: var(--r); background: var(--card); border: 1px solid var(--card-line); }
.how-card .k { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; color: var(--accent); }
.how-card .h3 { margin-top: 8px; font-size: 22px; }
.list { margin-top: 16px; display: grid; gap: 10px; }
.list li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--fg-2); line-height: 1.6; }
.list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 17px; height: 17px; border-radius: 50%; background: var(--accent-soft) url("/assets/v5/embedded-1.svg") center/11px no-repeat; }
.list.no li::before { background: var(--bg-alt) url("/assets/v5/embedded-2.svg") center/11px no-repeat; }
.list.no li { color: var(--fg-3); }
.price-box { margin-top: 20px; padding: 18px 20px; border-radius: 16px; background: var(--accent-tint); border: 1px dashed rgba(214,77,122,.35); }
.price-box b { display: block; font-size: 15px; }
.price-box span { display: block; margin-top: 4px; font-size: 13px; color: var(--fg-2); }
.steps { margin-top: 20px; display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; }
.step .n { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: var(--bg-alt); color: var(--fg); }
.step.hi .n { background: var(--accent); color: #fff; }
.step b { display: block; font-size: 15px; }
.step span { display: block; font-size: 13.5px; color: var(--fg-3); margin-top: 2px; }
@media (min-width: 900px) { .how-grid { grid-template-columns: 1fr 1.1fr; } }

/* ---------- WHY ---------- */
.why-grid { display: grid; gap: 14px; margin-top: 40px; }
.why { padding: 26px; border-radius: var(--r); background: var(--card); border: 1px solid var(--card-line); }
.why .n { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--accent); }
.why .h3 { margin-top: 10px; }
.why p { margin-top: 8px; font-size: 14.5px; color: var(--fg-2); line-height: 1.65; }
@media (min-width: 600px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- COMPARE ---------- */
.table-wrap { margin-top: 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); border: 1px solid var(--card-line); background: var(--card); }
.cmp { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; }
.cmp th, .cmp td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; color: var(--fg-3); background: var(--bg-alt); }
.cmp tbody th { font-weight: 700; color: var(--fg); width: 120px; }
.cmp td { color: var(--fg-2); }
.cmp .me { background: var(--accent-tint); color: var(--fg); font-weight: 600; }
.cmp thead .me { color: var(--accent); border-top: 3px solid var(--accent); background: var(--accent-tint); }
.cmp tr:last-child td, .cmp tr:last-child th { border-bottom: 0; }
.cmp-note { margin-top: 12px; font-size: 12.5px; color: var(--fg-3); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 12px; margin-top: 40px; }
.faq { background: var(--card); border: 1px solid var(--card-line); border-radius: 18px; }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; font-weight: 700; font-size: 15.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--fg-3); transition: transform .25s; }
.faq[open] summary svg { transform: rotate(45deg); color: var(--accent); }
.faq .a { padding: 0 22px 22px; font-size: 14.5px; color: var(--fg-2); line-height: 1.7; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---------- JOIN ---------- */
.join { position: relative; overflow: hidden; border-radius: 28px; padding: 56px 24px; text-align: center; background: var(--btn-bg); color: var(--btn-fg); }
.join .h2 { color: inherit; }
.join .lead { color: inherit; opacity: .8; margin: 14px auto 0; max-width: 520px; }
.join .btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.join .btn-primary { background: #fff; color: #111; }
.join .btn-primary:hover { background: #fff; }
.join .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.join .btn-secondary:hover { border-color: #fff; }
.join .badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 30px; font-size: 13px; opacity: .85; }
.join .badges li { display: inline-flex; align-items: center; gap: 8px; }
.join .badges svg { width: 16px; height: 16px; }
.join .hearts i { opacity: 0; color: rgba(255,255,255,.5); }
@media (min-width: 900px) { .join { padding: 88px 40px; } }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 48px 0 40px; }
.footer-grid { display: grid; gap: 28px; }
.footer .brand { font-size: 18px; }
.footer .desc { margin-top: 12px; font-size: 13.5px; color: var(--fg-3); max-width: 420px; line-height: 1.65; }
.footer .links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: var(--fg-2); }
.biz { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px; }
.biz .k { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; color: var(--fg-3); }
.biz dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 12px 0 0; font-size: 13px; }
.biz dt { color: var(--fg-3); }
.biz dd { margin: 0; color: var(--fg-2); }
.biz dd.todo { color: var(--fg-3); font-style: normal; border-bottom: 1px dashed var(--line); }
.footer .legal { margin-top: 20px; font-size: 12.5px; color: var(--fg-3); line-height: 1.6; }
.footer .bottom { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: center; margin-top: 20px; font-size: 12.5px; color: var(--fg-3); }
.demo-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--bg-alt); color: var(--fg-3); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.2fr 1fr; } }

/* ---------- 버전 전환 (검토용) ---------- */
.ver-switch-unused { position: fixed; right: 14px; bottom: 14px; z-index: 80; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #111; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.ver-switch-unused a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 34px; padding: 0 10px; border-radius: 999px; color: #fff; font-size: 12.5px; font-weight: 700; }
.ver-switch-unused a:hover { background: rgba(255,255,255,.15); }
.ver-switch-unused a.is-on { background: #fff; color: #111; }

/* ---------- 스크롤 등장 ---------- */
.io { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.io.is-in { opacity: 1; transform: none; }

/* ---------- keyframes ---------- */
@keyframes riseIn { to { transform: translateY(0); } }
@keyframes draw { to { transform: scaleX(1); } }
@keyframes fadeIn { to { opacity: 1; transform: none; } }
@keyframes ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(18px, -14px); } }
@keyframes rise { 0% { transform: translateY(0) scale(.8); opacity: 0; } 10% { opacity: .55; } 90% { opacity: .15; } 100% { transform: translateY(-520px) scale(1.1); opacity: 0; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal .line > span { transform: none; } .h1 .brand-word::after { transform: scaleX(1); } .fade, .io { opacity: 1; transform: none; }
}


/* ===== 내부 화면 컴포넌트 ===== */
.container-app { width: 100%; max-width: var(--container-app); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); }
/* ---------- icon sizing ---------- */
.btn svg, .chip-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.chip-btn svg { width: 16px; height: 16px; color: var(--accent); }
.btn-sm svg { width: 16px; height: 16px; }
.inline-ico svg, .avatar svg { width: 100%; height: 100%; }
.err svg { width: 14px; height: 14px; flex: 0 0 auto; }
.status-ico svg { width: 30px; height: 30px; }
.cv-ico svg { width: 24px; height: 24px; }
.protect-head svg { width: 18px; height: 18px; color: var(--accent); }


/* ---------- badges · notes ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em; line-height: 1;
}
.badge-ai { background: var(--accent-soft); color: var(--red-dark); }
.badge-ai::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.badge-demo { background: #FFF0DA; color: #8A5F14; }
.badge-soft { background: #FDEEF3; color: var(--fg-2); }
.badge-line { border: 1px solid #E8DDE6; color: var(--fg-2); background: var(--card); }
.badge-state { background: var(--bg-alt); color: var(--fg-2); }
.badge-state.is-ok { background: var(--accent-soft); color: var(--red-dark); }
.badge-state.is-wait { background: #FFF0DA; color: #8A5F14; }
.badge-state.is-off { background: var(--bg-alt); color: var(--fg-3); }

.note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line);
  font-size: 13.5px; color: var(--fg-2); line-height: 1.55;
}
.note svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
.note-sage { background: var(--accent-soft); border-color: transparent; color: #8C2A4C; }
.note-blush { background: #FDEEF3; border-color: transparent; color: var(--fg-2); }
.note-warn { background: var(--accent-tint); border-color: transparent; color: #8C2A4C; }
.note-warn svg { color: var(--accent); }
.note-demo { background: #FFF0DA; border-color: transparent; color: #6E4A0E; font-size: 12.5px; padding: 8px 12px; border-radius: 10px; }
.note-demo svg { color: #C98F34; width: 16px; height: 16px; }


/* ---------- cards ---------- */
.card-plain { box-shadow: none; }
.card-soft { background: #FDEEF3; border-color: transparent; }
.card-sage { background: var(--accent-soft); border-color: transparent; }
.card-cream { background: var(--bg-alt); border-color: transparent; }
.card h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.card .t-small { margin-top: 6px; }


/* ---------- lists ---------- */
.checklist li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--fg-2); line-height: 1.6; }
.checklist li + li { margin-top: 8px; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--accent-soft); background-image: url("/assets/v5/embedded-3.svg");
  background-size: 12px; background-position: center; background-repeat: no-repeat;
}
.checklist.is-no li::before {
  background: var(--bg-alt);
  background-image: url("/assets/v5/embedded-4.svg");
  background-size: 12px; background-position: center; background-repeat: no-repeat;
}
.checklist.is-no li { color: var(--fg-3); }


/* ---------- 미리보기 메뉴 (데모 전용) ---------- */
.preview { position: fixed; right: 14px; bottom: 14px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.preview-toggle { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--fg); color: #fff; font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow); opacity: .85; }
.preview-toggle:hover { opacity: 1; }
.preview-panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 10px; min-width: 200px; max-width: calc(100vw - 28px); }
.preview-panel .preview-h { font-size: 11.5px; font-weight: 700; color: var(--fg-3); letter-spacing: .04em; padding: 2px 6px 6px; }
.preview-panel button, .preview-panel a { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 9px; font-size: 13.5px; color: var(--fg); }
.preview-panel button:hover, .preview-panel a:hover { background: var(--bg-alt); }
.preview-panel button[aria-pressed="true"] { background: var(--accent-soft); color: var(--red-dark); font-weight: 600; }
.preview-panel .preview-sep { height: 1px; background: var(--line); margin: 6px 0; }
@media (max-width: 599px) { .preview-toggle span { display: none; } .preview-toggle { width: 34px; padding: 0; justify-content: center; } }
@media print { .preview { display: none; } }


/* ---------- app shell (테스트·채팅·신청) ---------- */
.app-shell { padding: 20px 0 40px; }
.app-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.app-top .btn-ghost { margin-left: -12px; }
.app-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 24px 20px; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 2px 10px rgba(0,0,0,.03); }
@media (min-width: 600px) { .app-card { padding: 32px; } }


/* ---------- progress ---------- */
.progress { display: flex; align-items: center; gap: 12px; }
.progress-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
.progress-bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .4s var(--ease); }
.progress-n { font-size: 13px; font-weight: 600; color: var(--fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }


/* ---------- quiz ---------- */
.quiz-start .t-title { margin-top: 10px; }
.quiz-start .t-lead { margin-top: 12px; }
.quiz-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.quiz-facts li { font-size: 13px; font-weight: 600; color: var(--fg-2); background: var(--bg-alt); padding: 7px 12px; border-radius: 999px; }
.gender-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.gender-pick label { position: relative; display: block; }
.gender-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.gender-pick .opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px 16px; border-radius: 16px; border: 1.5px solid #E8DDE6; background: var(--card); cursor: pointer; transition: border-color .15s, background .15s; text-align: center; }
.gender-pick .opt b { font-size: 16px; }
.gender-pick .opt span { font-size: 12.5px; color: var(--fg-3); }
.gender-pick input:checked + .opt { border-color: var(--accent); background: var(--accent-soft); }
.gender-pick input:focus-visible + .opt { outline: 3px solid rgba(214,77,122,.35); outline-offset: 2px; }
.gender-pick .opt-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-alt); display: inline-flex; align-items: center; justify-content: center; color: var(--fg-2); }
.gender-pick input:checked + .opt .opt-ico { background: #fff; color: var(--accent); }

.q-head { display: flex; align-items: baseline; gap: 10px; margin-top: 26px; }
.q-num { font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--accent); }
.q-text { font-family: var(--font); font-size: clamp(21px, 5.6vw, 27px); line-height: 1.4; margin-top: 10px; min-height: 2.8em; }
.choices { display: grid; gap: 12px; margin-top: 24px; }
.choice {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 18px 18px; border-radius: 16px; border: 1.5px solid #E8DDE6; background: var(--card);
  font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--fg);
  transition: border-color .15s, background .15s, transform .15s;
}
.choice:hover { border-color: #B9AEB6; background: #fff; }
.choice:active { transform: scale(.995); }
.choice .choice-k { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-alt); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--fg-2); }
.choice.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.choice.is-selected .choice-k { background: var(--accent); color: #fff; }
.q-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }

/* result */
.result-top { text-align: center; }
.result-code { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--accent); background: var(--accent-soft); padding: 6px 12px; border-radius: 999px; }
.result-name { margin-top: 14px; }
.result-desc { margin-top: 12px; max-width: 520px; margin-left: auto; margin-right: auto; }
.result-grid { display: grid; gap: 12px; margin-top: 24px; }
.result-grid .card { padding: 18px; }
.result-grid .card .k { font-size: 12.5px; font-weight: 700; color: var(--fg-3); letter-spacing: .02em; }
.result-grid .card .v { margin-top: 6px; font-family: var(--font); font-size: 19px; font-weight: 500; }
.result-grid .card .v small { display: block; font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--accent); margin-top: 2px; letter-spacing: .06em; }
.result-grid .card .t-small { margin-top: 8px; }
.result-actions { margin-top: 24px; }
.result-actions .btn-row { flex-direction: column; }
.result-actions .btn { width: 100%; }
@media (min-width: 600px) { .result-grid { grid-template-columns: 1fr 1fr; } }


/* ---------- chat ---------- */
.chat { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 2px 10px rgba(0,0,0,.03); min-height: 560px; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--bg-alt); border: 1px solid var(--line); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 72px; height: 72px; }
.avatar-sm { width: 30px; height: 30px; }
.chat-who { min-width: 0; flex: 1; }
.chat-who .name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15.5px; }
.chat-who .desc { font-size: 12.5px; color: var(--fg-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-notice { padding: 10px 16px; background: var(--bg-alt); font-size: 12.5px; color: var(--fg-2); text-align: center; line-height: 1.5; }
.chat-body { flex: 1; padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; background: var(--bg); }
.msg { display: flex; gap: 8px; max-width: 88%; align-items: flex-end; }
.msg-wrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msg-me .msg-wrap { align-items: flex-end; }
.msg-wide { max-width: 100%; width: 100%; }
.msg-wide .msg-wrap { flex: 1; gap: 8px; }
@media (max-width: 599px) { .msg-wide .avatar { display: none; } }
.msg-ai { align-self: flex-start; }
.msg-me { align-self: flex-end; flex-direction: row-reverse; }
.msg-sys { align-self: center; max-width: 100%; }
.msg .bubble { padding: 11px 14px; border-radius: 18px; font-size: 15px; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.msg-ai .bubble { background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg-me .bubble { background: #FDEEF3; border-bottom-right-radius: 6px; }
.msg-sys .bubble { background: transparent; color: var(--fg-3); font-size: 12.5px; text-align: center; padding: 4px 8px; }
.msg .meta { font-size: 11px; color: #B9AEB6; margin: 0 2px; white-space: nowrap; }
.msg .ai-tag { display: block; font-size: 11px; font-weight: 700; color: var(--accent); margin-bottom: 3px; letter-spacing: .02em; }
.typing { display: inline-flex; gap: 4px; align-items: center; height: 18px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #B9AEB6; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
.chat-error { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; align-self: flex-start; max-width: 86%; padding: 12px 14px; border-radius: 16px; background: var(--accent-tint); color: #8C2A4C; font-size: 13.5px; line-height: 1.5; }
.chat-error .btn { background: #fff; color: #8C2A4C; min-height: 32px; padding: 0 12px; font-size: 13px; }
.chat-foot { border-top: 1px solid var(--line); padding: 12px 12px 12px 14px; background: var(--card); }
.chat-input { display: flex; align-items: flex-end; gap: 8px; }
.chat-input textarea { flex: 1; min-width: 0; width: 100%; resize: none; min-height: 46px; max-height: 120px; padding: 12px 14px; border-radius: 16px; border: 1px solid #E8DDE6; background: var(--bg); font-size: 15px; line-height: 1.45; outline: none; }
.chat-input textarea:focus { border-color: var(--accent); background: #fff; }
.chat-input textarea:disabled { background: var(--bg-alt); color: #B9AEB6; cursor: not-allowed; }
.send { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
.send:hover { background: var(--red-dark); }
.send:disabled { background: #B9AEB6; cursor: not-allowed; }
.send svg { width: 20px; height: 20px; }
.chat-hint { margin-top: 8px; font-size: 11.5px; color: #B9AEB6; text-align: center; }
.suggest { display: flex; gap: 8px; overflow-x: auto; padding: 0 2px 2px; margin-bottom: 10px; scrollbar-width: none; }
.suggest::-webkit-scrollbar { display: none; }
.chip-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid #E8DDE6; background: var(--card); font-size: 13.5px; font-weight: 500; color: var(--fg); white-space: nowrap; transition: border-color .15s, background .15s; }
.chip-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.suggest .chip-btn { flex: 0 0 auto; }
.ask-grid .chip-btn { white-space: normal; line-height: 1.4; }
@media (min-width: 600px) { .chat { min-height: 620px; } }

/* 프로필 헤더 (lover) */
.profile-strip { display: flex; align-items: center; gap: 14px; padding: 16px; background: #FDEEF3; }
.profile-strip .who { flex: 1; min-width: 0; }
.profile-strip .who .name { font-family: var(--font); font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-strip .who .type { margin-top: 3px; font-size: 13px; color: var(--fg-2); }
.profile-strip .who .type b { color: var(--accent); }


/* ---------- forms ---------- */
.stepper { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; }
.stepper .st { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #B9AEB6; }
.stepper .st .n { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-alt); color: var(--fg-3); font-size: 12px; }
.stepper .st.is-active { color: var(--fg); }
.stepper .st.is-active .n { background: var(--accent); color: #fff; }
.stepper .st.is-done .n { background: var(--accent-soft); color: var(--red-dark); }
.stepper .st.is-done { color: var(--red-dark); }
.stepper .bar { flex: 1; height: 1px; background: #E8DDE6; min-width: 10px; }
.stepper .st span.l { display: none; }
@media (min-width: 360px) { .stepper .st span.l { display: inline; } }

.form-head { margin-bottom: 20px; }
.form-head .t-sub { margin-top: 6px; }
.form-head .t-small { margin-top: 6px; }
.field { display: block; }
.field + .field { margin-top: 18px; }
.field > label, .field > .label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.field .req { color: var(--accent); margin-left: 3px; font-weight: 700; }
.field .optional, .check .optional { color: #B9AEB6; font-weight: 500; font-size: 12.5px; margin-left: 4px; }
.input, .select {
  display: block; width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid #E8DDE6; background: var(--card); font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #B9AEB6; }
.input:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(214,77,122,.12); }
.select { appearance: none; background-image: url("/assets/v5/embedded-5.svg"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; }
.hint { margin-top: 7px; font-size: 12.5px; color: var(--fg-3); line-height: 1.5; }
.field.is-error .input, .field.is-error .select { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(214,77,122,.12); }
.err { display: none; margin-top: 7px; font-size: 12.5px; color: var(--accent); font-weight: 600; }
.field.is-error .err { display: flex; align-items: center; gap: 5px; }
.field.is-error .chips-wrap { border-color: var(--accent); }
.check { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid #E8DDE6; background: var(--card); cursor: pointer; }
.check + .check { margin-top: 10px; }
.check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.check .check-t { font-size: 14.5px; font-weight: 600; }
.check .check-s { display: block; margin-top: 3px; font-size: 12.5px; color: var(--fg-3); font-weight: 400; line-height: 1.5; }
.check.is-error { border-color: var(--accent); }
.check-inline { display: inline-flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid #E8DDE6; background: var(--card); font-size: 14.5px; font-weight: 600; cursor: pointer; width: 100%; }
.check-inline input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; border: 1px solid transparent; border-radius: 12px; }
.chip { position: relative; display: inline-block; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 15px; border-radius: 999px; border: 1px solid #E8DDE6; background: var(--card); font-size: 14px; font-weight: 500; color: var(--fg); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.chip input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: #8C2A4C; font-weight: 600; }
.chip input:focus-visible + span { outline: 3px solid rgba(214,77,122,.35); outline-offset: 2px; }
.form-nav { display: flex; gap: 10px; margin-top: 28px; }
.form-nav .btn-primary { flex: 1; }
.form-nav .btn-secondary { flex: 0 0 auto; }
.form-alert { margin-bottom: 18px; }
.consent-box { padding: 14px; border-radius: 14px; background: var(--bg-alt); font-size: 13px; color: var(--fg-2); line-height: 1.6; max-height: 170px; overflow-y: auto; }
.consent-box dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.consent-box dt { font-weight: 700; color: var(--fg); }
.consent-box dd { margin: 0; }
.summary-review { display: grid; gap: 8px; }
.summary-review .kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #E8DDE6; font-size: 14px; }
.summary-review .kv .k { color: var(--fg-3); flex: 0 0 auto; }
.summary-review .kv .v { text-align: right; font-weight: 600; }
.summary-review .kv:last-child { border-bottom: 0; }


/* ---------- status ---------- */
.status-hero { text-align: center; padding: 8px 0 4px; }
.status-ico { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.status-ico.is-wait { background: #FFF0DA; color: #C98F34; }
.status-ico.is-off { background: var(--bg-alt); color: var(--fg-3); }
.status-hero .t-title { margin-top: 4px; }
.status-hero .t-lead { margin-top: 10px; }
.timeline { margin-top: 24px; display: grid; gap: 0; }
.tl { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.tl .dot { position: relative; width: 28px; display: flex; justify-content: center; }
.tl .dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #E8DDE6; margin-top: 6px; border: 3px solid var(--card); box-shadow: 0 0 0 1px #E8DDE6; }
.tl .dot::after { content: ""; position: absolute; top: 20px; bottom: -4px; width: 2px; background: var(--line); }
.tl:last-child .dot::after { display: none; }
.tl.is-done .dot::before { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tl.is-now .dot::before { background: #F0A33C; box-shadow: 0 0 0 1px #F0A33C; }
.tl .tl-b { padding-bottom: 20px; }
.tl .tl-t { font-weight: 700; font-size: 15px; }
.tl .tl-s { margin-top: 3px; font-size: 13.5px; color: var(--fg-2); line-height: 1.55; }
.tl .tl-time { font-size: 12px; color: #B9AEB6; margin-top: 4px; }
.status-actions { margin-top: 10px; }
.status-actions .btn-row { flex-direction: column; }
.status-actions .btn { width: 100%; }
.summary-card { margin-top: 20px; }
.summary-card h3 { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.summary-card h3 .link { font-size: 13px; }


/* ---------- 프로필 열람 보호 (캡처 억제) ---------- */
.protect { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.protect-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--fg-2); }
.protect-head .badge { margin-left: auto; }
.protect-body { position: relative; min-height: 260px; }
.protect-content { padding: 18px 16px 20px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.protect-content img { pointer-events: none; }
.protect-content .p-name { font-family: var(--font); font-size: 22px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.protect-content .p-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.protect-content .p-tags span { font-size: 12.5px; font-weight: 600; background: var(--bg-alt); color: var(--fg-2); padding: 5px 10px; border-radius: 999px; }
.protect-content .p-intro { margin-top: 14px; font-size: 15px; line-height: 1.65; }
.protect-content dl { margin-top: 14px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.protect-content dt { color: var(--fg-3); }
.protect-content dd { margin: 0; font-weight: 600; }
.protect-wm { position: absolute; inset: 0; pointer-events: none; background-repeat: repeat; opacity: .9; }
.protect-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: rgba(251,247,242,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.protect-cover .cv-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.protect-cover .cv-t { font-weight: 700; font-size: 16px; }
.protect-cover .cv-s { font-size: 13px; color: var(--fg-2); line-height: 1.55; max-width: 320px; }
.protect-cover .cv-s b { color: var(--accent); }
.protect.is-open .protect-cover { display: none; }
.protect:not(.is-open) .protect-content { filter: blur(10px); }
.protect-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-3); }
.protect-foot .timer { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.protect-foot .ring { width: 22px; height: 22px; }
.protect-foot .ring circle { fill: none; stroke-width: 3; }
.protect-foot .ring .bg { stroke: var(--bg-alt); }
.protect-foot .ring .fg { stroke: var(--accent); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 1s linear; }
.protect-log { margin-top: 10px; font-size: 12px; color: var(--fg-3); }
@media print { .protect, .protect * { visibility: hidden !important; } .protect::after { visibility: visible; content: "프로필은 인쇄할 수 없어요."; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } }


.center { text-align: center; }
.inline-ico { width: 18px; height: 18px; }
.ico-sm { width: 16px; height: 16px; }
.two-col { display: grid; gap: 14px; }
@media (min-width: 600px) { .two-col { grid-template-columns: 1fr 1fr; } }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.stack > * + * { margin-top: 12px; }
.btn-row { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 600px) { .btn-row { flex-direction: row; } }
.btn-block { width: 100%; }
.btn-ghost { color: var(--fg-2); padding: 0 12px; min-height: 40px; }
.btn-ghost:hover { background: var(--bg-alt); color: var(--fg); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: spin .8s linear infinite; }
.btn-secondary.is-loading::after { border-color: rgba(0,0,0,.2); border-top-color: var(--fg); }
.link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.t-display { font-size: clamp(32px, 8vw, 48px); font-weight: 600; line-height: 1.15; letter-spacing: -0.035em; }
.t-title { font-size: clamp(24px, 5.6vw, 34px); font-weight: 600; line-height: 1.22; letter-spacing: -0.03em; }
.t-sub { font-size: clamp(20px, 4.6vw, 24px); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.t-lead { font-size: 16px; color: var(--fg-2); line-height: 1.7; }
.t-small { font-size: 14px; color: var(--fg-2); line-height: 1.6; }
.t-micro { font-size: 12.5px; color: var(--fg-3); line-height: 1.55; }
.muted { color: var(--fg-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }


/* =============================================================
   추가 컴포넌트 — 신청서(5단계), 업로드, 인증, 상태, 매니저 상담, 프로필 카드 4안
   ============================================================= */

/* 트랙 레코드 (홈) */
.record { display: grid; gap: 28px; align-items: center; }
.record .photo { position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.record .photo img { width: 100%; height: 100%; object-fit: cover; }
.record .photo .cap { position: absolute; left: 14px; bottom: 14px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(0,0,0,.35); padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(6px); }
.record .big { font-size: clamp(56px, 10vw, 96px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: var(--accent); }
.record .big small { font-size: .3em; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); margin-left: 6px; }
.record .h2 { margin-top: 10px; }
.record .lead { margin-top: 14px; }
.record .pts { margin-top: 18px; display: grid; gap: 8px; }
.record .pts li { display: flex; gap: 10px; font-size: 14.5px; color: var(--fg-2); }
.record .pts li svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; margin-top: 3px; }
@media (min-width: 900px) { .record { grid-template-columns: 1fr 1fr; gap: 56px; } }
.hero-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 16s ease-in-out infinite alternate; }
.lover-card .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 2s var(--ease); }
.lover-card:hover .photo img { transform: scale(1.06); }

/* 옵션 카드 (성별·흡연·주량) */
.optcards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.optcards.c3 { grid-template-columns: repeat(3, 1fr); }
.optcards.c4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 480px) { .optcards.c4 { grid-template-columns: repeat(4, 1fr); } }
.optcard { position: relative; display: block; }
.optcard input { position: absolute; opacity: 0; width: 0; height: 0; }
.optcard .oc { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 12px; border-radius: 14px; border: 1.5px solid #E8DDE6; background: var(--card); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.optcard .oc b { font-size: 14.5px; }
.optcard .oc span { font-size: 11.5px; color: var(--fg-3); line-height: 1.35; }
.optcard input:checked + .oc { border-color: var(--accent); background: var(--accent-tint); }
.optcard input:focus-visible + .oc { outline: 3px solid rgba(214,77,122,.3); outline-offset: 2px; }
.field.is-error .optcards .oc { border-color: var(--accent); }

/* 인풋 보조 */
.input-row { display: flex; gap: 8px; }
.input-row .input { flex: 1; min-width: 0; }
.input-row .btn { flex: 0 0 auto; min-height: 50px; padding: 0 16px; font-size: 14px; }
.suffix { position: relative; }
.suffix .input { padding-right: 48px; }
.suffix::after { content: attr(data-suffix); position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--fg-3); }
.verified { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--red-dark); }
.verified svg { width: 16px; height: 16px; }
.textarea { display: block; width: 100%; min-height: 96px; padding: 12px 14px; border-radius: 14px; border: 1px solid #E8DDE6; background: var(--card); font-size: 15px; line-height: 1.55; resize: vertical; outline: none; }
.textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(214,77,122,.12); }
.counter { text-align: right; font-size: 12px; color: var(--fg-3); margin-top: 4px; }
.field.is-error .textarea { border-color: var(--accent); }

/* 인증 방법 */
.verify-opts { display: grid; gap: 10px; }
.verify-opt { position: relative; display: block; }
.verify-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.verify-opt .vo { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; border: 1.5px solid #E8DDE6; background: var(--card); cursor: pointer; }
.verify-opt .vo .ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.verify-opt .vo .ic svg { width: 20px; height: 20px; }
.verify-opt .vo b { display: block; font-size: 14.5px; }
.verify-opt .vo span { display: block; font-size: 12.5px; color: var(--fg-3); margin-top: 2px; line-height: 1.5; }
.verify-opt input:checked + .vo { border-color: var(--accent); background: var(--accent-tint); }
.verify-body { margin-top: 12px; padding: 14px; border-radius: 14px; background: var(--bg-alt); }

/* 사진 업로드 */
.uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 480px) { .uploads { grid-template-columns: repeat(3, 1fr); } }
.upload { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 16px; border: 1.5px dashed #DCCAD8; background: var(--card); overflow: hidden; cursor: pointer; transition: border-color .15s; }
.upload:hover { border-color: var(--accent); }
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.upload .u-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; text-align: center; }
.upload .u-in svg { width: 26px; height: 26px; color: var(--accent); }
.upload .u-in b { font-size: 13.5px; }
.upload .u-in span { font-size: 11.5px; color: var(--fg-3); line-height: 1.4; }
.upload .u-req { position: absolute; left: 10px; top: 10px; font-size: 10.5px; font-weight: 800; padding: 3px 7px; border-radius: 999px; background: var(--accent); color: #fff; }
.upload .u-req.opt { background: var(--bg-alt); color: var(--fg-3); }
.upload img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.upload.has-img { border-style: solid; border-color: var(--accent); }
.upload.has-img img { display: block; }
.upload.has-img .u-in { display: none; }
.upload .u-done { position: absolute; right: 8px; bottom: 8px; display: none; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.92); color: var(--red-dark); padding: 4px 8px; border-radius: 999px; }
.upload.has-img .u-done { display: inline-flex; }
.field.is-error .upload { border-color: var(--accent); }
.guide { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--bg-alt); }
.guide b { display: block; font-size: 13.5px; margin-bottom: 6px; }
.guide ul { display: grid; gap: 4px; }
.guide li { font-size: 13px; color: var(--fg-2); padding-left: 14px; position: relative; }
.guide li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* 신청 요약 */
.summary-grid { display: grid; gap: 8px; }
.summary-grid .kv { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px dashed #E8DDE6; font-size: 14px; }
.summary-grid .kv .k { color: var(--fg-3); }
.summary-grid .kv .v { font-weight: 600; }
.summary-grid .kv:last-child { border-bottom: 0; }
.summary-thumbs { display: flex; gap: 8px; }
.summary-thumbs span { width: 56px; height: 72px; border-radius: 10px; background: var(--bg-alt); overflow: hidden; border: 1px solid #E8DDE6; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; color: var(--fg-3); }
.summary-thumbs span img { width: 100%; height: 100%; object-fit: cover; }

/* 매니저(사람) 배지 */
.badge-human { background: var(--fg); color: #fff; }
.badge-human::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5BD38A; }
.hours { font-size: 12px; color: var(--fg-3); }

/* ---------- 프로필 카드 4안 (레퍼런스 밀착) ---------- */
.pc { background: #fff; color: #111; font-size: 13.5px; line-height: 1.55; }
.pc img { width: 100%; height: 100%; object-fit: cover; }
.pc .ph { position: relative; overflow: hidden; background: #EEE; }
.pc .ph img { position: absolute; inset: 0; }
.pc .ph .tag { position: absolute; left: 8px; bottom: 8px; font-size: 10px; font-weight: 700; color: rgba(0,0,0,.55); background: rgba(255,255,255,.7); padding: 2px 7px; border-radius: 999px; }
.pc .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: #777; }
.pc .val { font-size: 13.5px; font-weight: 600; color: #111; }
.pc .vbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 999px; }
.pc .vbadge svg { width: 12px; height: 12px; }

/* 1 — 화보형 I: 큰 사진 + 회색 정보 패널 + 세로 스트립 */
.pc1 { display: grid; grid-template-columns: 1fr; }
.pc1 .ph-main { aspect-ratio: 4 / 5; }
.pc1 .panel { background: #F3F3F3; padding: 20px 18px 18px; display: flex; flex-direction: column; gap: 16px; }
.pc1 .name { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.pc1 .sub { margin-top: 4px; font-size: 12.5px; color: #666; }
.pc1 .rows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.pc1 .rows div { display: flex; flex-direction: column; gap: 2px; }
.pc1 .intro { font-size: 13px; color: #444; line-height: 1.65; border-top: 1px solid #E0E0E0; padding-top: 12px; }
.pc1 .foot { display: grid; gap: 6px; font-size: 12.5px; color: #555; margin-top: auto; }
.pc1 .foot li { display: flex; gap: 8px; align-items: center; }
.pc1 .foot svg { width: 14px; height: 14px; color: #999; flex: 0 0 auto; }
.pc1 .strip { background: #E7E7E7; padding: 10px 12px; font-size: 10px; font-weight: 700; letter-spacing: .2em; color: #999; text-align: center; }
@media (min-width: 520px) {
  .pc1 { grid-template-columns: 1.05fr 1fr 28px; }
  .pc1 .ph-main { aspect-ratio: auto; min-height: 420px; }
  .pc1 .strip { writing-mode: vertical-rl; text-orientation: mixed; padding: 16px 8px; }
}

/* 2 — 화보형 II: 사진 | 텍스트 | 사진 */
.pc2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; background: #F6F6F6; }
.pc2 .ph { aspect-ratio: 3 / 4; }
.pc2 .text { grid-column: 1 / -1; background: #fff; padding: 18px; display: grid; gap: 14px; }
.pc2 .text .name { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.pc2 .text .name small { font-size: 12.5px; font-weight: 500; color: #666; margin-left: 8px; }
.pc2 .text .blk { display: grid; gap: 4px; }
.pc2 .text p { font-size: 13px; color: #333; line-height: 1.65; }
.pc2 .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pc2 .chips span { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: #F2F2F2; color: #333; }
.pc2 .mini { display: grid; grid-template-columns: repeat(3, auto); gap: 8px 12px; justify-content: start; }
.pc2 .mini .val { white-space: nowrap; }
.pc2 .mini div { display: flex; flex-direction: column; gap: 2px; }
@media (min-width: 520px) {
  .pc2 { grid-template-columns: .8fr 1.55fr .95fr; }
  .pc2 .text { grid-column: auto; }
  .pc2 .ph { aspect-ratio: auto; min-height: 380px; }
}

/* 3 — 화보형 III: 큰 클로즈업 + 작은 사진 2장 + 인증 스탬프 */
.pc3 { display: grid; grid-template-columns: 1fr; }
.pc3 .ph-big { aspect-ratio: 4 / 5; }
.pc3 .side { padding: 16px; display: grid; gap: 12px; }
.pc3 .side .top { display: flex; justify-content: space-between; align-items: flex-start; }
.pc3 .stamp { width: 58px; height: 58px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; letter-spacing: .06em; line-height: 1.15; transform: rotate(-8deg); text-align: center; }
.pc3 .sig { font-size: 10px; font-weight: 700; letter-spacing: .18em; color: #999; }
.pc3 .thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pc3 .thumbs .ph { aspect-ratio: 3 / 4; border-radius: 6px; }
.pc3 .who .name { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.pc3 .who .sub { font-size: 12.5px; color: #666; margin-top: 2px; }
.pc3 .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.pc3 .facts div { display: flex; flex-direction: column; gap: 1px; }
.pc3 .quote { font-size: 12.5px; color: #444; line-height: 1.6; border-left: 2px solid var(--accent); padding-left: 10px; }
@media (min-width: 520px) {
  .pc3 { grid-template-columns: 1.15fr 1fr; }
  .pc3 .ph-big { aspect-ratio: auto; min-height: 460px; }
  .pc3 .thumbs { grid-template-columns: 1fr; }
  .pc3 .thumbs .ph { aspect-ratio: 4 / 3; }
}

/* 4 — KNOW ABOUT ME 시트 */
.pc4 { padding: 14px; }
.pc4 .sheet { border: 2px solid #111; border-radius: 4px; }
.pc4 .row1 { display: grid; grid-template-columns: 1fr 108px; gap: 12px; padding: 14px; border-bottom: 2px solid #111; }
.pc4 .title { font-size: 30px; font-weight: 900; letter-spacing: -0.04em; line-height: .95; text-transform: uppercase; }
.pc4 .title .o { color: #fff; -webkit-text-stroke: 1.5px #111; }
.pc4 .lines { margin-top: 12px; display: grid; gap: 7px; }
.pc4 .line { display: grid; grid-template-columns: 54px 1fr; align-items: baseline; gap: 6px; font-size: 12px; font-weight: 700; }
.pc4 .line.two { grid-template-columns: 54px 1fr 44px 1fr; }
.pc4 .line i { font-style: normal; font-weight: 600; color: var(--accent); border-bottom: 1px solid #111; padding: 0 4px 1px; min-height: 18px; }
.pc4 .idph { aspect-ratio: 3 / 4; border: 2px solid #111; }
.pc4 .sec { padding: 12px 14px; border-bottom: 2px solid #111; }
.pc4 .sec:last-child { border-bottom: 0; }
.pc4 h5 { font-size: 13px; font-weight: 900; margin: 0 0 8px; }
.pc4 .favs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pc4 .fav { text-align: center; }
.pc4 .fav .box { height: 46px; border: 1.5px solid #111; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; padding: 4px; }
.pc4 .fav .k { font-size: 10.5px; color: #555; margin-top: 4px; }
.pc4 .split { display: grid; grid-template-columns: 1fr; gap: 0; }
.pc4 .split > div { padding: 12px 14px; }
.pc4 .split > div + div { border-top: 2px solid #111; }
.pc4 .meters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc4 .meter { text-align: center; }
.pc4 .meter .shape { position: relative; width: 56px; height: 52px; margin: 0 auto; border: 1.5px solid #111; border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%; overflow: hidden; background: #fff; }
.pc4 .meter .shape i { position: absolute; left: 0; right: 0; bottom: 0; background: #FBD3E0; }
.pc4 .meter .k { font-size: 11.5px; font-weight: 700; margin-top: 5px; }
.pc4 .tot { display: grid; gap: 6px; }
.pc4 .tot .r { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 12px; }
.pc4 .tot .r span { padding: 2px 8px; border-radius: 999px; color: #777; }
.pc4 .tot .r span.on { background: #FBD3E0; color: #111; font-weight: 700; }
.pc4 .pref { display: grid; gap: 8px; margin-top: 10px; }
.pc4 .pref .pr { display: grid; grid-template-columns: 1fr 1fr; font-size: 11px; color: #333; }
.pc4 .pref .pr span:last-child { text-align: right; }
.pc4 .pref .bar { grid-column: 1 / -1; position: relative; height: 2px; background: #111; margin: 5px 2px 0; }
.pc4 .pref .bar i { position: absolute; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: #FBD3E0; border: 1.5px solid #111; transform: translateX(-50%); }
.pc4 .bottom { display: grid; grid-template-columns: 1fr 1fr; }
.pc4 .bottom > div { padding: 12px 14px; }
.pc4 .bottom > div + div { border-left: 2px solid #111; }
.pc4 .bottom .k { font-size: 12.5px; font-weight: 900; }
.pc4 .bottom .v { margin-top: 6px; font-size: 13px; font-weight: 600; }
.pc4 .extra { padding: 10px 14px; border-top: 2px solid #111; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; font-size: 12px; }
.pc4 .extra div { display: flex; flex-direction: column; gap: 2px; }
.pc4 .extra b { font-size: 10.5px; color: #555; font-weight: 700; }
.pc4 .extra.one { grid-template-columns: 1fr; }
@media (min-width: 520px) {
  .pc4 .split { grid-template-columns: 1fr 1fr; }
  .pc4 .split > div + div { border-top: 0; border-left: 2px solid #111; }
  .pc4 .row1 { grid-template-columns: 1fr 150px; }
  .pc4 .title { font-size: 40px; }
}

/* 갤러리 */
/* 프로필 카드 갤러리 페이지 */
.gallery { display: grid; gap: 28px; }
.gallery-item { display: grid; gap: 14px; }
.gallery-item .g-head { display: flex; gap: 12px; align-items: flex-start; }
.gallery-item .g-letter { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font); font-size: 20px; font-weight: 600; }
.gallery-item .g-title { font-size: 17px; font-weight: 700; }
.gallery-item .g-desc { font-size: 13.5px; color: var(--fg-2); line-height: 1.6; margin-top: 3px; }
.gallery-item .g-card { max-width: 560px; }
.gallery-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 20px; }
@media (min-width: 1100px) { .gallery { grid-template-columns: 1fr 1fr; } }
.protect.is-plain .protect-cover, .protect.is-plain .protect-wm, .protect.is-plain .protect-foot { display: none; }
.protect.is-plain .protect-content { filter: none !important; }


/* 좁은 폭 보정 */
.gallery-item > *, .g-card, .protect, .protect-body, .protect-content { min-width: 0; }
.protect-head { flex-wrap: wrap; }
.pc .ph img, .upload img { pointer-events: none; }

/* 폼 리셋 · 스텝퍼 모바일 */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
.stepper .st span.l { white-space: nowrap; }
@media (max-width: 599px) { .stepper .st:not(.is-active) span.l { display: none; } }
.upload .u-req, .upload .u-done { z-index: 2; }
.upload .u-done { white-space: nowrap; align-items: center; gap: 4px; }
.upload .u-done svg { width: 12px; height: 12px; }

/* 초소형 폭 보정 (320px) */
@media (max-width: 379px) {
  .summary-grid .kv { grid-template-columns: 76px 1fr; }
  .summary-thumbs { flex-wrap: wrap; }
  .summary-thumbs span { width: 40px; height: 52px; font-size: 9.5px; }
  .pc4 .row1 { grid-template-columns: 1fr 84px; }
  .pc4 .title { font-size: 26px; }
}


/* =============================================================
   포스터 테마 — 레퍼런스(FALL IN LOVE 그라데이션 포스터 · L/O/V/E 코너 하트 포스터)
   파스텔 그라데이션 + 필름 그레인 + 흐린 하트 + 코너 레터 + 세로 라벨 + 심볼 티커
   강한 레드 사용 안 함: 로즈 핑크(#D64D7A)는 작은 강조만, 버튼은 블랙
   ============================================================= */
@font-face {
  font-family: "Hahmlet Latin";
  src: url("/assets/v5/fonts/Hahmlet-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
:root {
  --bg: #FCF8FB; --bg-alt: #F7F3FA; --fg: #15131A; --fg-2: #4F4A57; --fg-3: #7D7686; --line: #E9E2EC;
  --card: #FFFFFF; --card-line: rgba(21,19,26,.12);
  --btn-bg: #15131A; --btn-fg: #FFFFFF; --btn-hover: #D64D7A;
  --btn2-bg: rgba(255,255,255,.7); --btn2-fg: #15131A; --btn2-line: #15131A;
  --eyebrow: #15131A; --accent: #D64D7A; --accent-soft: #FBE3EB; --accent-tint: #FDF1F5;
  --red: #D64D7A; --red-dark: #B23A63;
  --pink: #F58BAE; --pink-soft: #FBD3E0; --lavender: #D8CCF5; --sky: #CFE0FA; --peach: #FFD9C7;
  --shadow: 0 14px 40px rgba(120,80,120,.10);
  --serif-en: "Hahmlet Latin", "Didot", "Bodoni MT", Georgia, serif;
}
body { background: var(--bg); position: relative; }
/* 그라데이션 메시 (고정) */
.mesh { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 45% at 8% -5%, rgba(205,185,248,.70) 0%, rgba(205,185,248,0) 65%),
    radial-gradient(45% 40% at 100% 100%, rgba(195,218,252,.75) 0%, rgba(195,218,252,0) 65%),
    radial-gradient(38% 34% at 78% 18%, rgba(248,185,208,.45) 0%, rgba(248,185,208,0) 65%),
    radial-gradient(40% 30% at 20% 90%, rgba(250,200,220,.35) 0%, rgba(250,200,220,0) 65%);
}
/* 필름 그레인 */
.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .055; mix-blend-mode: multiply;
  background-image: url("/assets/v5/embedded-6.svg"); }
.serif-en { font-family: var(--serif-en); }

/* ---------- 헤더 ---------- */
.header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.header.is-scrolled { background: rgba(252,248,251,.86); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); }
.brand .tag { letter-spacing: .22em; }
.nav a { letter-spacing: .16em; font-size: 12px; }

/* ---------- 히어로 (포스터) ---------- */
.hero.poster { padding: 56px 0 72px; min-height: calc(100vh - 68px); display: flex; align-items: center; text-align: center; }
.hero.poster .container { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.hero.poster .hero-copy { max-width: 760px; }
.hero.poster .lead { margin: 22px auto 0; }
.hero.poster .hero-cta { align-items: center; }
.hero.poster .hero-links { align-items: center; }
.hero.poster .hero-note { justify-content: center; text-align: center; }
@media (max-width: 599px) { .hero.poster .hero-note .dot { display: none; } }
.hero.poster .h1 { font-size: clamp(42px, 9.6vw, 76px); }
.hero.poster .h1 .brand-word::after { background: linear-gradient(90deg, var(--pink), var(--lavender)); height: .08em; opacity: .9; }
.hero.poster .h1 .q { color: var(--accent); }
.corner { position: absolute; z-index: 3; font-weight: 800; font-size: clamp(34px, 6vw, 84px); line-height: 1; letter-spacing: -0.02em; color: var(--fg); user-select: none; }
.c-l { left: var(--gutter); top: 18px; } .c-o { right: var(--gutter); top: 18px; } .c-v { left: var(--gutter); bottom: 18px; } .c-e { right: var(--gutter); bottom: 18px; }
.vtext { position: absolute; z-index: 3; writing-mode: vertical-rl; font-size: 11px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--fg-2); display: none; }
.vtext.v-left { left: calc(var(--gutter) + 10px); top: 50%; transform: translateY(-50%); }
.vtext.v-right { right: calc(var(--gutter) + 10px); top: 50%; transform: translateY(-50%); }
.vtext.serif-en { font-family: var(--serif-en); font-size: 13px; font-weight: 500; color: var(--accent); }
.heart-blob { position: absolute; z-index: 0; left: 50%; top: 50%; width: min(78vw, 640px); aspect-ratio: 1; transform: translate(-50%, -52%); filter: blur(34px); opacity: .95; pointer-events: none; animation: breathe 9s ease-in-out infinite; }
.heart-blob svg { width: 100%; height: 100%; }
.ring { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(96vw, 900px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: .6; animation: spin-slow 80s linear infinite; display: none; }
.ring text { font-family: var(--serif-en); font-size: 15px; letter-spacing: .34em; fill: var(--accent); }
.hero.poster .scroll-cue { left: 50%; transform: translateX(-50%); bottom: 22px; }
.hero.poster .hearts i { color: var(--pink); }
.hero.poster .blob { display: none; }
@media (min-width: 900px) {
  .hero.poster { padding: 80px 0 100px; min-height: calc(100vh - 76px); }
  .vtext, .ring { display: block; }
  .c-l, .c-o { top: 26px; } .c-v, .c-e { bottom: 26px; }
}

/* ---------- 심볼 티커 (포스터 하단 행) ---------- */
.ticker { border-top: 1px solid var(--fg); border-bottom: 1px solid var(--fg); background: rgba(255,255,255,.35); overflow: hidden; }
.ticker .track { display: flex; width: max-content; animation: ticker 48s linear infinite; }
.ticker .set { display: flex; align-items: center; gap: 28px; padding: 12px 14px 12px 28px; white-space: nowrap; font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.ticker .set .sym { width: 14px; height: 14px; flex: 0 0 auto; }
.ticker .set .dash { width: 44px; height: 1px; background: var(--fg); flex: 0 0 auto; }
.ticker .set .en { font-family: var(--serif-en); font-weight: 500; letter-spacing: .22em; font-size: 13px; }
.ticker:hover .track { animation-play-state: paused; }

/* ---------- 섹션 공통 (포스터 톤) ---------- */
.section-alt { background: rgba(255,255,255,.42); border-top: 1px solid rgba(21,19,26,.08); border-bottom: 1px solid rgba(21,19,26,.08); }
.eyebrow { letter-spacing: .24em; }
.eyebrow .sym { width: 12px; height: 12px; }
.card, .stat, .how-card, .why, .lover-card, .faq, .table-wrap, .quiz { box-shadow: none; border: 1px solid var(--card-line); background: rgba(255,255,255,.82); }
.start-card:hover, .lover-card:hover { box-shadow: none; border-color: var(--fg); transform: translateY(-2px); }
.start-card .ico { background: var(--pink-soft); color: var(--accent); border-radius: 50%; }
.start-card .meta { color: var(--accent); }
.stat .num.accent { color: var(--accent); }
.lover-card.cta-card { background: var(--fg); color: #fff; border-color: var(--fg); }
.lover-card .badge { color: var(--accent); }
.how-card .k { color: var(--accent); }
.price-box { background: var(--accent-tint); border-color: rgba(214,77,122,.4); }
.step.hi .n { background: var(--fg); color: #fff; }
.why .n { color: var(--accent); font-family: var(--serif-en); font-size: 14px; letter-spacing: .1em; }
.cmp thead .me { color: var(--accent); border-top-color: var(--fg); background: var(--accent-tint); }
.cmp .me { background: rgba(245,139,174,.10); }
.record .photo { box-shadow: none; border: 1px solid var(--card-line); }
.record .pts li svg { color: var(--accent); }
.list li::before { background-color: var(--pink-soft); }
.join { background: linear-gradient(135deg, #E9DDFB 0%, #FBE3EB 48%, #D9E6FB 100%); color: var(--fg); border: 1px solid rgba(21,19,26,.12); position: relative; overflow: hidden; }
.join .h2, .join .lead { color: var(--fg); }
.join .lead { opacity: .8; }
.join .btn-primary { background: var(--fg); color: #fff; }
.join .btn-secondary { background: rgba(255,255,255,.6); color: var(--fg); border-color: var(--fg); }
.join .badges { color: var(--fg-2); opacity: 1; }
.join .badges svg { color: var(--accent); }
.join { padding-top: 120px; }
.join .love { position: absolute; right: 28px; top: 14px; font-family: var(--serif-en); font-weight: 300; font-size: clamp(48px, 9vw, 112px); line-height: 1; letter-spacing: .04em; color: rgba(214,77,122,.26); pointer-events: none; }
@media (max-width: 599px) { .join { padding-top: 96px; } .join .love { font-size: 44px; right: 16px; top: 16px; } }
.join .love::before { content: "LOVE"; position: absolute; left: -.22em; top: .28em; color: rgba(255,255,255,.75); }
.join .hearts i { color: var(--pink); }
.join .heart-blob { width: 420px; top: 55%; left: 22%; opacity: .7; }
.visual-photo { box-shadow: none; border: 1px solid var(--card-line); }
.lover-card .photo img { filter: saturate(.9); }
.badge-ai { background: var(--pink-soft); color: var(--red-dark); }
.badge-ai::before { background: var(--accent); }
.site-corner { position: absolute; font-size: 10.5px; font-weight: 700; letter-spacing: .22em; color: var(--fg-3); }
/* 매니저·채팅·폼 */
.chat { box-shadow: none; border-color: var(--card-line); }
.msg-me .bubble { background: var(--pink-soft); }
.app-card { box-shadow: none; border-color: var(--card-line); background: rgba(255,255,255,.85); }
.btn-primary:hover { background: var(--btn-hover); box-shadow: none; }
.footer { border-top: 1px solid var(--fg); }

/* ---------- 프로필 카드 4 (KNOW ABOUT ME) 색 ---------- */
.pc4 .line i { color: var(--accent); }
.pc4 .meter .shape i, .pc4 .tot .r span.on, .pc4 .pref .bar i { background: var(--pink-soft); }

@keyframes breathe { 0%, 100% { transform: translate(-50%, -52%) scale(1); } 50% { transform: translate(-50%, -52%) scale(1.06); } }
@keyframes spin-slow { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .heart-blob, .ring, .ticker .track { animation: none !important; } }


/* =============================================================
   v5 — 솔로오프 구성 + 이어짐 MEMBERS (2026-11-06)
   사진 히어로 · 3단 알약 버튼 · 숫자 카드 · 걱정 말풍선 · 기다리는 분들 · 정답인 이유 4카드
   · 결혼지원금 · 확인 4단계 · 커플 이야기 캐러셀 · 강조 비교표 · 플로팅 AI 상담
   팔레트는 v4 그대로 (강한 레드 없음): 잉크 버튼, 로즈·바이올렛 그라데이션 글자, 라벤더·핑크·스카이 면
   ============================================================= */
:root {
  --violet: #8C6FE0; --violet-deep: #6F52D6; --violet-soft: #EEE8FD; --plum: #2B2342;
  --grad-brand: linear-gradient(92deg, #E0679A 0%, #B172D8 55%, #8C6FE0 100%);
  --bg-lav: #F7F3FD; --bg-grey: #F6F5F8;
  --shadow-card: 0 12px 32px rgba(70, 50, 110, .10);
}
.grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bg-white { background: #fff; }
.bg-lav { background: var(--bg-lav); }
.bg-grey { background: var(--bg-grey); }
.kicker { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--accent); }
.sec-head .kicker + .h2 { margin-top: 12px; }
.h2 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.24; }
.sec-head.center .lead { margin-left: auto; margin-right: auto; }
.br-m { display: inline; }
@media (min-width: 700px) { .br-m { display: none; } }

/* ---------- 헤더 (솔로오프 톤: 연라벤더 바 · 한글 메뉴) ---------- */
.header, .header.is-scrolled { background: rgba(246, 241, 253, .9); backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid rgba(140, 111, 224, .14); }
.nav a { font-size: 14px; letter-spacing: -0.01em; font-weight: 600; color: var(--fg-2); padding: 8px 11px; }
.nav a:hover { background: rgba(255, 255, 255, .7); color: var(--violet-deep); }
.nav a[aria-current="page"] { color: var(--violet-deep); }
.nav .btn { margin-left: 6px; }
.nav a.btn-ghost { background: #fff; color: var(--violet-deep); border: 1px solid rgba(140, 111, 224, .22); }
.nav a.btn-ghost:hover { background: var(--violet-soft); color: var(--violet-deep); }
.nav-sheet a { letter-spacing: -0.01em; }
.nav-sheet .btn-ghost { background: var(--violet-soft); color: var(--violet-deep); }
@media (min-width: 1000px) and (max-width: 1160px) { .nav a { padding: 8px 8px; font-size: 13.5px; } .brand .tag { display: none; } }

/* ---------- 히어로 ---------- */
.hero.v5 { display: block; min-height: 0; padding: 40px 0 56px; text-align: center; overflow: hidden; background: var(--bg); }
.hero.v5 .hero-bg { position: absolute; inset: 0 0 206px 0; z-index: 0; overflow: hidden; }
.hero.v5 .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; animation: kenburns 18s ease-in-out infinite alternate; }
.hero.v5 .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(252, 248, 251, .55) 0%, rgba(252, 248, 251, 0) 38%, rgba(252, 248, 251, 0) 62%, rgba(252, 248, 251, .9) 88%, var(--bg) 100%); }
.hero.v5 .hearts { z-index: 1; }
.hero.v5 .hearts i { color: #fff; }
.hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.hero-inner .mark { width: auto; height: 40px; filter: drop-shadow(0 8px 18px rgba(160, 50, 90, .16)); }
.chip-live { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(140, 111, 224, .2); font-size: 12.5px; font-weight: 600; color: var(--fg-2); }
.chip-live .dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.chip-live .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); opacity: .6; animation: ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
.hero.v5 .h1 { margin-top: 18px; font-size: clamp(40px, 9.4vw, 74px); font-weight: 800; line-height: 1.14; letter-spacing: -0.045em; color: var(--fg); }
.hero.v5 .h1 .line:first-child > span { font-weight: 700; }
.hero.v5 .h1 .brand-word { font-weight: 800; }
.hero.v5 .h1 .brand-word::after { display: none; }
.hero.v5 .lead { margin: 18px auto 0; max-width: 560px; font-size: 16.5px; color: var(--fg-2); }
.pill-row { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 26px; border-radius: 999px; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; box-shadow: 0 8px 22px rgba(80, 50, 120, .12); transition: transform .2s var(--ease), box-shadow .2s, background .2s; }
.pill svg { width: 16px; height: 16px; transition: transform .2s; }
.pill:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(80, 50, 120, .18); }
.pill:hover svg { transform: translateX(2px); }
.pill-1 { background: var(--violet-soft); color: #4B3A86; }
.pill-2 { background: var(--fg); color: #fff; }
.pill-2:hover { background: #2C2638; }
.pill-3 { background: #FBE3EB; color: #8C2A4C; }
.pill-lg { min-height: 60px; padding: 0 34px; font-size: 17px; }
.hero.v5 .hero-note { margin-top: 18px; justify-content: center; font-size: 12.5px; color: var(--fg-2); background: rgba(255, 255, 255, .6); padding: 6px 12px; border-radius: 999px; }
.hero-space { height: clamp(130px, 18vw, 230px); }
.stat-row { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 1000px; margin: 0 auto; }
.stat-card { background: #fff; border-radius: 20px; padding: 16px 16px 18px; text-align: left; box-shadow: 0 14px 34px rgba(70, 50, 110, .13); border: 1px solid rgba(140, 111, 224, .1); }
.stat-card .k { font-size: 13px; font-weight: 700; color: var(--fg); letter-spacing: -0.02em; line-height: 1.4; }
.stat-card .v { margin-top: 12px; text-align: right; font-size: clamp(26px, 7vw, 36px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.stat-card .v small { font-size: .5em; font-weight: 800; margin-left: 2px; letter-spacing: -0.02em; }
.stat-foot { position: relative; z-index: 2; margin: 12px auto 0; max-width: 680px; font-size: 12px; color: var(--fg-3); line-height: 1.6; }
.stat-foot a { color: var(--violet-deep); font-weight: 700; white-space: nowrap; }
.seal { position: absolute; z-index: 3; display: none; place-items: center; width: 148px; height: 148px; border-radius: 50%; right: max(24px, calc(50% - 620px)); top: 34px; background: radial-gradient(circle at 32% 26%, #fff 0%, #F7F1FF 58%, #EADFFC 100%); box-shadow: 0 16px 36px rgba(110, 80, 170, .22), inset 0 0 0 6px rgba(255, 255, 255, .75); transition: transform .3s var(--ease); }
.seal:hover { transform: rotate(-6deg) scale(1.03); }
.seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: seal-spin 30s linear infinite; }
.seal-ring text { font-family: var(--serif-en); font-size: 13.5px; letter-spacing: .3em; fill: var(--violet); }
.seal-in { position: relative; display: grid; justify-items: center; line-height: 1.1; }
.seal-in small { font-size: 11px; font-weight: 700; color: var(--fg-2); }
.seal-in b { margin: 4px 0; font-size: 25px; font-weight: 800; letter-spacing: -0.04em; }
@media (min-width: 800px) {
  .stat-row { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .stat-card { padding: 22px 22px 24px; }
  .stat-card .k { font-size: 15px; }
}
@media (min-width: 900px) {
  .hero.v5 { padding: 64px 0 72px; min-height: 0; }
  .hero.v5 .hero-bg { bottom: 168px; }
  .hero.v5 .lead { font-size: 18px; }
}
@media (min-width: 1000px) { .seal { display: grid; } }
@media (max-width: 599px) {
  .pill-row { flex-direction: column; align-items: stretch; width: 100%; max-width: 330px; }
  .pill-2 { order: -1; }
  .hero.v5 .hero-note { font-size: 11.5px; }
}


/* ---------- 걱정 말풍선 ---------- */
.worry { text-align: center; }
.worry .q-line { font-size: clamp(19px, 4.4vw, 26px); font-weight: 600; color: var(--fg-3); letter-spacing: -0.03em; }
.bubbles { display: grid; gap: 22px; justify-items: center; margin-top: 30px; }
.bubbles li { display: grid; justify-items: center; gap: 10px; }
.bubble { position: relative; display: inline-block; padding: 14px 24px; border-radius: 18px; font-size: clamp(16px, 4.2vw, 21px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.4; box-shadow: 0 10px 24px rgba(70, 50, 110, .14); }
.bubble::after { content: ""; position: absolute; bottom: -6px; left: 30px; width: 14px; height: 14px; background: inherit; transform: rotate(45deg); border-radius: 3px; }
.bubbles li:nth-child(2) .bubble::after { left: auto; right: 30px; }
.bubble.b1 { background: #7457D3; color: #fff; }
.bubble.b2 { background: #E9E1FB; color: #3F2F78; }
.bubble.b3 { background: var(--plum); color: #fff; }
.ans { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--accent); }
.ans svg { width: 14px; height: 14px; transition: transform .2s; }
.ans:hover svg { transform: translateX(3px); }
.chev { display: grid; justify-items: center; margin: 34px auto 22px; width: 34px; }
.chev svg { width: 30px; height: 16px; color: var(--violet); margin-top: -4px; }
.chev svg:nth-child(1) { opacity: .3; } .chev svg:nth-child(2) { opacity: .6; }
.chev { animation: nudge 1.8s ease-in-out infinite; }
.worry .h2 { font-size: clamp(26px, 5.6vw, 42px); font-weight: 800; }
@media (min-width: 760px) {
  .bubbles li:nth-child(1) { margin-right: 180px; }
  .bubbles li:nth-child(3) { margin-left: 140px; }
}

/* ---------- MEMBERS (이어짐) ---------- */
.mem-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.mem-head .h2 { margin-top: 12px; font-size: clamp(30px, 6vw, 48px); line-height: 1.22; }
.mem-head .side { font-size: 14px; color: var(--fg-3); line-height: 1.65; max-width: 320px; }
.mem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mem-card { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: #F1EEF4; isolation: isolate; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); transition: box-shadow .5s, transform .5s var(--ease); }
.mem-card:hover { box-shadow: 0 22px 44px rgba(60, 40, 90, .18); transform: translateY(-3px); }
.mem-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 2s var(--ease); }
.mem-card:hover > img { transform: scale(1); }
.mem-card .frost { position: absolute; inset: 0; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.mem-card .fade-b { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(to top, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .45) 45%, rgba(255, 255, 255, 0) 100%); }
.mem-card .in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 12px; }
.mem-card .bottom { display: block; }
.mem-card .top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip-w { display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12px; font-weight: 500; color: #3F3A45; line-height: 1.35; }
.chip-w svg { width: 10px; height: 10px; }
.sample-tag { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: rgba(21, 19, 26, .58); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; }
.mem-card .top .sample-tag { margin-left: auto; }
.mem-card .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.mem-card .tags span { padding: 4px 9px; border-radius: 999px; background: rgba(222, 104, 146, .92); color: #fff; font-size: 10.5px; font-weight: 600; line-height: 1.35; }
.mem-card .intro { margin: 0 0 10px; font-size: 12px; font-weight: 500; line-height: 1.6; color: #2A2630; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mem-card .go { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0; border-radius: 14px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12px; font-weight: 700; color: #3F3A45; transition: background .3s, color .3s; }
.mem-card .go svg { width: 13px; height: 13px; flex: 0 0 auto; }
.mem-card:hover .go { background: var(--fg); color: #fff; }
.mem-card .go .l { display: none; }
.sample-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; font-size: 12.5px; color: var(--fg-3); line-height: 1.6; }
.sample-note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; color: var(--violet); }
.sample-note.center { justify-content: center; text-align: left; }
.mem-cta { margin-top: 30px; display: flex; justify-content: center; }
@media (min-width: 420px) { .mem-card .go .l { display: inline; } .mem-card .in { padding: 14px; } .mem-card .intro { font-size: 12.5px; } }
@media (min-width: 640px) { .mem-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } .mem-head .side { text-align: right; } }
@media (min-width: 768px) { .mem-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .mem-card .in { padding: 16px; } }
@media (max-width: 380px) { .mem-card .tags span:nth-child(n+2) { display: none; } .chip-w { font-size: 11px; padding: 3px 8px; } }

/* ---------- 소개팅할래가 정답인 이유 ---------- */
.answer-head { text-align: center; }
.answer-head .mark { width: auto; height: 44px; margin: 0 auto 16px; }
.answer-head .h2 { font-size: clamp(28px, 5.6vw, 46px); font-weight: 800; line-height: 1.3; }
.reasons { display: grid; gap: 22px; max-width: 1000px; margin: 48px auto 0; }
.reason { display: grid; background: #fff; border-radius: 28px; box-shadow: var(--shadow-card); }
.reason .vis { position: relative; overflow: hidden; min-height: 230px; padding: 26px; border-radius: 28px; color: #fff; display: flex; flex-direction: column; gap: 14px; isolation: isolate; }
.reason .vis .ico { position: relative; z-index: 2; width: 30px; height: 30px; }
.reason .vis .ico svg { width: 100%; height: 100%; }
.reason .vis h3 { position: relative; z-index: 2; font-size: clamp(23px, 4.8vw, 31px); font-weight: 800; line-height: 1.32; letter-spacing: -0.035em; text-shadow: 0 2px 14px rgba(40, 20, 60, .16); }
.reason .txt { padding: 26px 22px 28px; display: flex; flex-direction: column; justify-content: center; }
.reason .txt .p { font-size: 15.5px; line-height: 1.75; color: var(--fg-2); }
.reason .txt .p b { color: var(--fg); font-weight: 700; }
.checks { display: grid; gap: 9px; margin-top: 18px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 15px; border-radius: 12px; background: #F7F4FC; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.reason.r-fit .checks li { background: #FDF1F5; }
.reason.r-care .checks li { background: #EEF4FC; }
.checks li svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--fg); }
.checks li b { color: var(--fg); font-weight: 700; }
.reason .fine { margin-top: 12px; font-size: 12px; color: var(--fg-3); line-height: 1.6; }
/* 비주얼 패널 */
.v-secure { background: linear-gradient(140deg, #29213F 0%, #3C2F62 55%, #594888 100%); }
.v-secure .wm { position: absolute; z-index: 0; inset: -30% -40%; display: grid; align-content: center; gap: 22px; transform: rotate(-18deg); opacity: .17; pointer-events: none; }
.v-secure .wm span { white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.v-secure .wm span:nth-child(even) { margin-left: -120px; }
.v-secure .big { position: absolute; z-index: 1; right: -18px; bottom: -22px; width: 170px; height: 170px; color: rgba(255, 255, 255, .1); }
.v-secure .big svg { width: 100%; height: 100%; }
.v-match { background: linear-gradient(140deg, #CDBDF6 0%, #A18AEB 52%, #7F67D9 100%); }
.reason .v-match { min-height: 300px; }
@media (max-width: 440px) { .v-match .pct b { font-size: 72px; } .reason .v-match { min-height: 290px; } }
.v-match .pct { position: absolute; z-index: 1; right: 22px; bottom: 16px; text-align: right; line-height: .9; }
.v-match .pct b { display: block; font-size: clamp(84px, 18vw, 136px); font-weight: 800; letter-spacing: -0.06em; color: rgba(255, 255, 255, .96); }
.v-match .pct b small { font-size: .32em; letter-spacing: -0.02em; margin-left: 4px; }
.v-match .pct span { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 700; opacity: .92; }
.v-match .ring { position: absolute; z-index: 0; left: -60px; bottom: -80px; width: 260px; height: 260px; opacity: .22; }
.v-fit { background: #D9A3B8 url("/assets/v5/img/why-fit.jpg") center / cover no-repeat; }
.v-fit::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(140deg, rgba(219, 128, 164, .62), rgba(183, 104, 146, .68)); }
.v-care { background: #9DB3D5 url("/assets/v5/img/why-care.jpg") center / cover no-repeat; }
.v-care::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(140deg, rgba(120, 146, 196, .6), rgba(88, 114, 168, .68)); }
@media (min-width: 860px) {
  .reason { grid-template-columns: 1fr 1.14fr; }
  .reason.flip { grid-template-columns: 1.14fr 1fr; }
  .reason.flip .vis { order: 2; }
  .reason .vis { min-height: 340px; padding: 34px; }
  .reason .txt { padding: 36px 40px; }
}

/* ---------- 결혼지원금 ---------- */
.gift-card { position: relative; overflow: hidden; display: grid; gap: 10px; border-radius: 32px; padding: 40px 24px; background: linear-gradient(135deg, #E9DDFB 0%, #FBE3EB 50%, #DCE8FB 100%); border: 1px solid rgba(21, 19, 26, .08); }
.gift-copy { position: relative; z-index: 2; }
.gift-copy .h2 { margin-top: 12px; font-size: clamp(26px, 5.4vw, 40px); font-weight: 800; }
.gift-amt { margin-top: 14px; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 12px; line-height: 1; }
.gift-amt .grad { font-size: clamp(64px, 15vw, 116px); font-weight: 800; letter-spacing: -0.06em; padding-right: .04em; }
.gift-amt small { font-size: clamp(16px, 3.4vw, 22px); font-weight: 800; color: var(--fg); padding-bottom: .5em; }
.gift-copy .lead { margin-top: 16px; max-width: 460px; }
.gift-copy .fine { margin-top: 12px; font-size: 12.5px; color: var(--fg-3); line-height: 1.6; max-width: 480px; }
.gift-copy .btn-row { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.gift-vis { position: relative; z-index: 1; display: grid; place-items: center; min-height: 220px; }
.gift-vis svg.rings { width: min(78%, 360px); height: auto; filter: drop-shadow(0 18px 30px rgba(120, 80, 150, .18)); animation: floatY 7s ease-in-out infinite; }
.gift-card .hearts i { color: #fff; }
@media (min-width: 860px) { .gift-card { grid-template-columns: 1.15fr .85fr; align-items: center; padding: 64px 64px; } }

/* ---------- 확인 4단계 ---------- */
.verify-grid { display: grid; gap: 36px; text-align: center; }
.verify-grid .lead { margin: 16px auto 0; max-width: 560px; }
.vtiles { width: 100%; max-width: 920px; margin: 0 auto; text-align: left; }
.vtiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vt { display: grid; align-content: start; gap: 6px; padding: 20px 18px; border-radius: 20px; background: #fff; border: 1px solid rgba(140, 111, 224, .16); box-shadow: 0 10px 26px rgba(70, 50, 110, .08); }
.vt .ico { width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--violet-soft); color: var(--violet-deep); margin-bottom: 6px; }
.vt .ico svg { width: 22px; height: 22px; }
.vt b { display: flex; align-items: center; gap: 7px; font-size: 16px; letter-spacing: -0.02em; }
.vt b i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: var(--fg); color: #fff; }
.vt > span:last-child { font-size: 13px; color: var(--fg-3); line-height: 1.55; }
@media (min-width: 900px) {
  .verify-grid { gap: 48px; }
  .vtiles { grid-template-columns: repeat(4, 1fr); gap: 18px; padding-bottom: 40px; }
  .vt { padding: 24px 22px; }
  .vt:nth-child(even) { transform: translateY(40px); }
}

/* ---------- 커플 이야기 (캐러셀) ---------- */
.stories .h2 { font-size: clamp(28px, 5.6vw, 46px); font-weight: 800; }
.marquee { margin-top: 40px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.mq-track { display: flex; gap: 20px; width: max-content; padding: 8px 10px 34px; animation: mq 70s linear infinite; }
.marquee:hover .mq-track, .marquee:focus-within .mq-track { animation-play-state: paused; }
.story { flex: 0 0 auto; width: 256px; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 14px 32px rgba(70, 50, 110, .11); }
.story .ph { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.story .ph img { width: 100%; height: 100%; object-fit: cover; }
.story .ph .sample-tag { position: absolute; left: 12px; top: 12px; }
.story .bd { padding: 18px 22px 24px; }
.story .who { display: flex; align-items: center; gap: 8px; }
.story .av { width: 28px; height: 28px; flex: 0 0 auto; }
.story .av svg { width: 100%; height: 100%; }
.badge-g { display: inline-flex; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-g.f { background: #FBE3EB; color: #A2335C; }
.badge-g.m { background: #E3ECFB; color: #355886; }
.story .q { margin-top: 14px; font-size: 14.5px; line-height: 1.65; color: var(--fg-2); min-height: 4.95em; }
.story .q b { color: var(--fg); font-weight: 700; }
@media (min-width: 900px) { .story { width: 272px; } }

/* ---------- 비교표 (가운데 강조) ---------- */
.cmp2-wrap { margin-top: 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 16px 2px 6px; }
.swipe-hint { margin-top: 18px; display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--violet-deep); }
.swipe-hint svg { width: 14px; height: 14px; }
@media (min-width: 760px) { .swipe-hint { display: none; } }
.cmp2 { width: 100%; min-width: 700px; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.cmp2 th, .cmp2 td { padding: 16px 16px; text-align: center; vertical-align: middle; border-bottom: 1px solid #ECE8F1; line-height: 1.5; }
.cmp2 thead th { background: #15131A; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.cmp2 thead th:first-child { border-radius: 14px 0 0 0; }
.cmp2 thead th:last-child { border-radius: 0 14px 0 0; }
.cmp2 tbody th { background: #fff; color: var(--fg); font-weight: 700; width: 140px; }
.cmp2 td { background: #F8F7FA; color: var(--fg-2); }
.cmp2 .me { background: #F6F1FE; color: var(--fg); font-weight: 700; border-left: 3px solid var(--violet); border-right: 3px solid var(--violet); }
.cmp2 thead th.me { background: #7F62D8; border-left-color: #7F62D8; border-right-color: #7F62D8; border-radius: 14px 14px 0 0; font-size: 16px; box-shadow: 0 -12px 0 #7F62D8; }
.cmp2 tbody tr:last-child .me { border-bottom: 3px solid var(--violet); border-radius: 0 0 14px 14px; }
.cmp2 tbody tr:last-child th, .cmp2 tbody tr:last-child td { border-bottom: 0; }
.cmp2 tbody tr:last-child th { border-radius: 0 0 0 14px; }
.cmp2 tbody tr:last-child td:last-child { border-radius: 0 0 14px 0; }

/* ---------- 마지막 신청 ---------- */
.final-card { position: relative; overflow: hidden; display: grid; gap: 28px; border-radius: 32px; padding: 28px 22px 40px; background: linear-gradient(135deg, #E9DDFB 0%, #FBE3EB 48%, #D9E6FB 100%); border: 1px solid rgba(21, 19, 26, .1); }
.final-card .love { position: absolute; right: 22px; bottom: 6px; font-family: var(--serif-en); font-weight: 300; font-size: clamp(48px, 10vw, 120px); line-height: 1; letter-spacing: .04em; color: rgba(214, 77, 122, .2); pointer-events: none; }
.final-ph { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3.4; box-shadow: 0 18px 40px rgba(60, 40, 90, .18); }
.final-ph img { width: 100%; height: 100%; object-fit: cover; }
.final-copy { position: relative; z-index: 1; }
.final-copy .q { font-size: clamp(17px, 3.6vw, 22px); font-weight: 600; color: var(--fg-2); line-height: 1.55; letter-spacing: -0.03em; }
.final-copy .hl { margin-top: 14px; font-size: clamp(16px, 3.4vw, 20px); font-weight: 800; letter-spacing: -0.02em; }
.final-copy .h2 { margin-top: 10px; font-size: clamp(30px, 6vw, 48px); font-weight: 800; }
.final-copy .pill { margin-top: 26px; }
.final-copy .badges { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: 13px; color: var(--fg-2); }
.final-copy .badges li { display: inline-flex; align-items: center; gap: 7px; }
.final-copy .badges svg { width: 16px; height: 16px; color: var(--accent); }
@media (min-width: 860px) { .final-card { grid-template-columns: .9fr 1.1fr; align-items: center; gap: 48px; padding: 48px; } .final-ph { aspect-ratio: 1 / 1; } }

/* ---------- 플로팅 AI 상담 (솔로오프 채팅 버블) ---------- */
.fchat { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: flex; align-items: flex-end; gap: 10px; }
.fchat-bubble { position: relative; display: none; padding: 14px 40px 14px 18px; border-radius: 20px 20px 6px 20px; background: #fff; box-shadow: 0 14px 34px rgba(50, 30, 80, .18); border: 1px solid rgba(140, 111, 224, .14); }
.fchat-bubble b { display: block; font-size: 14px; letter-spacing: -0.02em; }
.fchat-bubble span { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--fg-3); }
.fchat-bubble span i { width: 6px; height: 6px; border-radius: 50%; background: #3CB371; }
.fchat-x { position: absolute; right: 74px; bottom: 44px; display: none; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; color: var(--fg-3); }
.fchat-x:hover { background: var(--bg-grey); color: var(--fg); }
.fchat-x svg { width: 14px; height: 14px; }
.fchat-fab { position: relative; width: 58px; height: 58px; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; box-shadow: 0 12px 28px rgba(50, 30, 80, .22); border: 1px solid rgba(140, 111, 224, .18); transition: transform .2s var(--ease); }
.fchat-fab:hover { transform: translateY(-2px) scale(1.04); }
.fchat-fab img { width: 34px; height: auto; }
.fchat-fab .ai { position: absolute; right: -2px; top: -4px; padding: 2px 6px; border-radius: 999px; background: var(--fg); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
@media (min-width: 700px) { .fchat:not(.is-closed) .fchat-bubble { display: block; } .fchat:not(.is-closed) .fchat-x { display: inline-flex; } .fchat { right: 22px; bottom: 22px; } }

/* ---------- 섹션 간격 · 마감 ---------- */
.section.tight-top { padding-top: 40px; }
@media (min-width: 900px) { .section.tight-top { padding-top: 64px; } }
.lover-note, .cmp-note { justify-content: center; text-align: center; }
.how-card, .faq, .quiz, .lover-card { background: #fff; }
.faq summary { font-size: 15.5px; }

@keyframes seal-spin { to { transform: rotate(360deg); } }
@keyframes mq { to { transform: translateX(calc(-50% - 10px)); } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .mq-track, .seal-ring, .chev, .hero.v5 .hero-bg img, .gift-vis svg.rings { animation: none !important; }
  .marquee { overflow-x: auto; }
}

.footer .links { letter-spacing: 0; font-size: 13px; }

/* ---------- 로고 (ㅅㄱ? 가로형 마크, 2026-11-06 교체) ---------- */
.brand img { width: auto; height: 26px; }
.footer .brand img { height: 24px; }
@media (max-width: 359px) { .header .brand .tag { display: none; } }

.v5-inline-0{color:var(--fg-3)}

/* Integration: seasonal controls and approved character portraits. */
.home-preview{position:relative;z-index:51;padding:6px 18px;text-align:center;background:#eee8f7;color:#625671;font-size:11px;line-height:1.4}
.skip-link{position:fixed;top:-100px;left:12px;z-index:100;padding:12px;background:white;color:#38243a}.skip-link:focus{top:12px}
#holiday-snow{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.holiday-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:22px;position:relative;z-index:4}
.holiday-controls button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 17px;border:1px solid #cfc2df;border-radius:999px;background:rgba(255,255,255,.8);color:#554063;font:600 12px/1.2 Pretendard,sans-serif;cursor:pointer}
.holiday-controls button[aria-pressed=true]{background:#f2e9fb;border-color:#a68dc6}
.holiday-controls button:hover{background:white}.holiday-controls button:focus-visible{outline:3px solid #8062ad;outline-offset:4px}
.lover-card img[src$="lover-haneul.jpg"]{object-position:63% 30%}
.lover-card img[src$="lover-minji.jpg"]{object-position:50% 30%}
.sample-note{display:flex!important}.sample-tag{background:#fff!important;color:#654d77!important}
@media(max-width:599px){.holiday-controls{gap:8px;margin-top:18px}.holiday-controls button{font-size:12px;padding:9px 14px}.hero.v5 .hero-note{max-width:100%;white-space:normal}.home-preview{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.io,.fade,.reveal .line>span{opacity:1!important;transform:none!important}}

/* Align profile actions even when introductions wrap to different lengths. */
.lover-card:not(.cta-card){display:flex;flex-direction:column}
.lover-card:not(.cta-card) .photo{flex:none}
.lover-card:not(.cta-card) .body{display:flex;flex-direction:column;flex:1}
.lover-card:not(.cta-card) .quote{margin-bottom:18px}
.lover-card:not(.cta-card) .body > .btn{margin-top:auto}
.lover-card img[src*="lover-haneul.jpg"]{object-position:50% 35%}

/* Editorial wedding photo replaces the decorative ring illustration. */
.gift-card{padding:0;gap:0;background:#f7f3ef}
.gift-copy{padding:36px 26px}
.gift-vis{min-height:0;align-self:stretch;overflow:hidden}
.gift-vis img{display:block;width:100%;height:100%;max-height:580px;object-fit:cover;object-position:50% 50%}
@media(min-width:860px){.gift-card{grid-template-columns:1.1fr .9fr;padding:0}.gift-copy{padding:48px 28px 48px 48px}.gift-vis img{min-height:520px}}
@media(max-width:859px){.gift-vis{aspect-ratio:4/5;max-height:520px}.gift-vis img{object-position:50% 56%}}
/* Face-local presentation masks; keep the rest of each scene sharp. */
.story .face-blur::before,.story .face-blur::after{content:"";position:absolute;z-index:1;pointer-events:none;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);mask-image:radial-gradient(ellipse,#000 56%,transparent 73%);-webkit-mask-image:radial-gradient(ellipse,#000 56%,transparent 73%)}
.story .face-blur::before{left:var(--f1-x);top:var(--f1-y);width:var(--f1-w);height:var(--f1-h)}
.story .face-blur::after{left:var(--f2-x);top:var(--f2-y);width:var(--f2-w);height:var(--f2-h)}
.face-blur-1{--f1-x:22%;--f1-y:20%;--f1-w:32%;--f1-h:40%;--f2-x:47%;--f2-y:11%;--f2-w:37%;--f2-h:46%}
.face-blur-2{--f1-x:17%;--f1-y:18%;--f1-w:37%;--f1-h:44%;--f2-x:47%;--f2-y:32%;--f2-w:36%;--f2-h:39%}
.face-blur-3{--f1-x:16%;--f1-y:29%;--f1-w:39%;--f1-h:44%;--f2-x:44%;--f2-y:20%;--f2-w:39%;--f2-h:43%}
.face-blur-4{--f1-x:20%;--f1-y:30%;--f1-w:32%;--f1-h:35%;--f2-x:44%;--f2-y:22%;--f2-w:30%;--f2-h:34%}
.face-blur-5{--f1-x:20%;--f1-y:5%;--f1-w:36%;--f1-h:43%;--f2-x:53%;--f2-y:26%;--f2-w:35%;--f2-h:37%}
.face-blur-6{--f1-x:10%;--f1-y:29%;--f1-w:45%;--f1-h:52%;--f2-x:41%;--f2-y:17%;--f2-w:44%;--f2-h:52%}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.story .face-blur img{filter:blur(16px);transform:scale(1.08)}}

/* Full-photo blur gently softens on desktop hover without revealing a sharp face. */
.mem-card > img,.mem-card:hover > img{filter:blur(14px);transform:scale(1.12);object-position:50% 40%;transition:filter .45s var(--ease),transform .8s var(--ease)}
@media(hover:hover) and (pointer:fine){.mem-card:hover > img{filter:blur(8px);transform:scale(1.10)}}
.mem-card:focus-visible > img{filter:blur(8px);transform:scale(1.10)}
.mem-card .frost{background:rgba(255,255,255,.10);backdrop-filter:none;-webkit-backdrop-filter:none}

/* Discreet playback control outside the hero's main content. */
.music-toggle{position:fixed;left:18px;bottom:18px;z-index:70;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(121,100,147,.22);border-radius:50%;background:rgba(255,255,255,.92);color:#6b567c;box-shadow:0 4px 18px rgba(56,38,76,.08);cursor:pointer;transition:background .2s,color .2s}
.music-toggle svg{width:19px;height:19px}
.music-toggle:hover{background:#fff;color:#17121d}
.music-toggle:focus-visible{outline:3px solid #8062ad;outline-offset:4px}
.music-toggle .sound-wave{display:none}
.music-toggle[aria-pressed="true"] .sound-wave{display:block}
.music-toggle[aria-pressed="true"] .sound-off{display:none}
.music-toggle[aria-pressed="true"]{color:#ad4973;background:#fff3f8}
@media(max-width:599px){.music-toggle{left:12px;bottom:16px;width:40px;height:40px}}

/* =============================================================
   v6 (2026-11-06) — 정답인 이유(신뢰·신상 보호) · 시작 영수증 · 진행 방식 · 요금 ·
   11월 오픈 프로모션 · 솔로파티/결혼정보회사 비교표 · 겨울 배너 배경
   ============================================================= */
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", var(--font); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ---------- 11월 프로모션: 기간이 끝나면 home.js가 <html>에 .promo-ended를 붙여 정가로 돌아가요 ---------- */
.promo-ended [data-promo] { display: none !important; }
.pf[data-promo-after], .rc-total[data-promo-after] { display: none; }
.plan-total b[data-promo-after] { display: none; }
.promo-ended .pf[data-promo-after] { display: grid; }
.promo-ended .rc-total[data-promo-after] { display: flex; }
.promo-ended .plan-total b[data-promo-after] { display: inline; }

/* 도장 (인라인 SVG, 글자는 페이지 글꼴 그대로) */
.nov-stamp { display: block; width: 100%; height: auto; color: #D64D7A; overflow: visible; }
.nov-stamp text { fill: currentColor; font-family: var(--font); }
.nov-stamp .ns-ring { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; }
.nov-stamp .ns-ko { font-size: 11px; letter-spacing: .04em; }
.nov-stamp .ns-k { font-size: 12.5px; font-weight: 800; letter-spacing: -0.02em; }
.nov-stamp .ns-v { font-size: 27px; font-weight: 900; letter-spacing: -0.05em; }

/* ---------- 히어로: 오픈 기념 쿠폰 ---------- */
.coupon-wrap { position: relative; z-index: 3; width: 100%; max-width: 330px; margin-top: 20px; }
@media (min-width: 600px) { .coupon-wrap { max-width: 344px; } }
.coupon { display: grid; grid-template-columns: auto 1fr; text-align: left; filter: drop-shadow(0 14px 22px rgba(120, 60, 130, .2)) drop-shadow(0 2px 3px rgba(80, 40, 90, .08)); transform: rotate(-1.4deg); transition: transform .35s var(--ease); }
.coupon:hover, .coupon:focus-visible { transform: rotate(0deg) translateY(-2px); }
.cp-l, .cp-r { position: relative; display: flex; flex-direction: column; justify-content: center; }
.cp-l { padding: 14px 18px 14px 18px; border-radius: 14px 0 0 14px; background: linear-gradient(155deg, #E0679A 0%, #B172D8 100%); color: #fff;
  -webkit-mask: radial-gradient(circle 8px at 100% 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at 100% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 8px at 100% 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at 100% 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; }
.cp-l small { font-size: 11.5px; font-weight: 700; opacity: .92; letter-spacing: -0.01em; white-space: nowrap; }
.cp-l b { margin-top: 2px; font-size: 20px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; }
.cp-r { padding: 12px 18px 12px 20px; border-radius: 0 14px 14px 0; background: #fff;
  -webkit-mask: radial-gradient(circle 8px at 0 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at 0 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 8px at 0 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at 0 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; }
.cp-r::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; border-left: 2px dashed rgba(177, 114, 216, .45); }
.cp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.cp-was { font-size: 13px; font-weight: 600; color: var(--fg-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.cp-now { font-size: 27px; font-weight: 900; letter-spacing: -0.045em; line-height: 1.15; color: #D64D7A; }
.cp-r small { font-size: 11px; color: var(--fg-3); line-height: 1.4; }

/* ---------- 정답인 이유 (여성 관점: 신뢰 · 신상 보호) ---------- */
.why-kick { margin-top: 20px; font-size: clamp(25px, 4.6vw, 36px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.25; color: var(--fg); }
.why-kick span { background: linear-gradient(transparent 60%, rgba(224, 103, 154, .24) 0); padding: 0 .06em; }
.why-lead { margin: 12px auto 0; max-width: 560px; font-size: 16px; line-height: 1.75; color: var(--fg-2); }
.why6 { display: grid; gap: 16px; max-width: 1080px; margin: 44px auto 0; }
.w6 { position: relative; overflow: hidden; display: grid; gap: 24px; align-content: start; padding: 28px 22px; border-radius: 28px; background: #fff; border: 1px solid rgba(140, 111, 224, .1); box-shadow: 0 12px 32px rgba(70, 50, 110, .08); }
.w6-worry { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg-3); }
.w6-k { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 12.5px; font-weight: 800; letter-spacing: .01em; color: var(--violet-deep); }
.w6-k span { font-family: var(--serif-en); font-size: 12.5px; font-weight: 500; letter-spacing: .08em; padding: 1px 9px; border: 1px solid currentColor; border-radius: 999px; }
.w6-h { margin-top: 10px; font-size: clamp(23px, 3vw, 30px); font-weight: 800; line-height: 1.3; letter-spacing: -0.04em; }
.w6-p { margin-top: 12px; font-size: 15px; line-height: 1.75; color: var(--fg-2); }
.w6-fine { margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--fg-3); }
.w6-vis { margin: 0; }

/* 01 워터마크 */
.w6-mark { background: radial-gradient(110% 80% at 100% 0%, rgba(177, 114, 216, .38) 0%, rgba(34, 27, 49, 0) 58%), radial-gradient(80% 70% at 0% 100%, rgba(224, 103, 154, .22) 0%, rgba(34, 27, 49, 0) 60%), #221B31; border-color: transparent; color: #fff; box-shadow: 0 18px 40px rgba(34, 20, 60, .22); }
.w6-mark .w6-worry { color: rgba(255, 255, 255, .6); }
.w6-mark .w6-k { color: #E3BDF4; }
.w6-mark .w6-p { color: rgba(255, 255, 255, .8); }
.wm-vis { display: grid; justify-items: center; gap: 10px; }
.wm-card { position: relative; width: min(100%, 236px); aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; background: #3A2F4F; box-shadow: 0 26px 44px rgba(0, 0, 0, .38); transform: rotate(2.2deg); }
.wm-card > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; filter: blur(3px) saturate(1.05); transform: scale(1.08); }
.wm-tile { position: absolute; inset: -40% -70%; display: flex; flex-direction: column; justify-content: center; gap: 22px; transform: rotate(-26deg); pointer-events: none; }
.wm-tile span { white-space: nowrap; font: 600 10.5px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .02em; color: rgba(255, 255, 255, .62); text-shadow: 0 1px 2px rgba(20, 10, 30, .35); }
.wm-tile span:nth-child(even) { padding-left: 90px; }
.wm-chip { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(21, 19, 26, .6); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: -0.01em; }
.wm-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 16px 14px; background: linear-gradient(to top, rgba(20, 14, 30, .8), rgba(20, 14, 30, 0)); color: #fff; }
.wm-meta b { display: block; font-size: 15px; letter-spacing: -0.02em; }
.wm-meta small { display: block; font-size: 12px; opacity: .85; }
.wm-vis figcaption { font-size: 11.5px; color: rgba(255, 255, 255, .55); }

/* 02 허락한 한 사람 */
.ask { width: min(100%, 330px); margin: 0 auto; padding: 18px; border-radius: 22px; background: var(--bg-lav); border: 1px solid rgba(140, 111, 224, .18); box-shadow: 0 14px 30px rgba(70, 50, 110, .1); }
.ask-q { font-size: 14.5px; font-weight: 800; letter-spacing: -0.03em; }
.ask-who { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px; border-radius: 16px; background: #fff; }
.ask-who img { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; object-fit: cover; object-position: 50% 22%; filter: blur(2.5px); }
.ask-who b { display: block; font-size: 14px; letter-spacing: -0.02em; }
.ask-who small { display: block; font-size: 12px; line-height: 1.45; color: var(--fg-3); }
.ask-why { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--violet-deep); }
.ask-btns { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; margin-top: 12px; }
.ask-btns span { display: grid; place-items: center; min-height: 42px; border-radius: 12px; font-size: 13.5px; font-weight: 700; }
.ask-no { background: #fff; color: var(--fg-2); border: 1px solid #E5DDF0; }
.ask-yes { background: var(--fg); color: #fff; }

/* 03 AI 동일인 확인 */
.w6-real { background: linear-gradient(165deg, #F3EEFE 0%, #FFFFFF 62%); }
.idv { display: grid; justify-items: center; gap: 16px; }
.idv-row { display: flex; align-items: flex-start; justify-content: center; gap: 4px; }
.idv-node { display: grid; justify-items: center; align-content: start; gap: 8px; min-width: 78px; }
.idv-node b { font-size: 12px; font-weight: 700; color: var(--fg-2); white-space: nowrap; }
.idv-id, .idv-live, .idv-pic { height: 70px; display: grid; place-items: center; }
.idv-id { grid-template-columns: 28px 1fr; grid-template-rows: repeat(3, 6px); gap: 6px 7px; align-content: center; width: 90px; padding: 0 9px; border-radius: 10px; background: #fff; border: 1px solid #DCD3EA; box-shadow: 0 6px 14px rgba(70, 50, 110, .1); }
.idv-id img { grid-row: 1 / 4; width: 28px; height: 38px; object-fit: cover; object-position: 50% 20%; border-radius: 4px; filter: grayscale(1) blur(1px); }
.idv-id i { display: block; width: 100%; height: 6px; border-radius: 3px; background: #E5DEF0; }
.idv-id i:nth-of-type(2) { width: 68%; }
.idv-live { width: 70px; border-radius: 50%; padding: 3px; background: conic-gradient(from 20deg, #E0679A, #B172D8, #8C6FE0, #E0679A); }
.idv-live img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; border: 3px solid #fff; filter: blur(1.4px); }
.idv-pic { width: 54px; overflow: hidden; border-radius: 10px; box-shadow: 0 6px 14px rgba(70, 50, 110, .12); }
.idv-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: blur(1.4px); }
.idv-link { align-self: flex-start; margin-top: 25px; padding: 3px 7px; border-radius: 999px; background: #E6F4EC; color: #2C6A53; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.idv-ok { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; background: var(--fg); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; }
.idv-ok::before { content: ""; width: 14px; height: 8px; border-left: 2px solid #8EE0B4; border-bottom: 2px solid #8EE0B4; transform: rotate(-45deg) translate(1px, -2px); }

/* 04 매니저 · 애프터 케어 */
.w6-care { background: linear-gradient(150deg, #FDF1F5 0%, #F7F3FD 100%); }
.mnote { width: 100%; margin: 0; padding: 18px 18px 16px; border-radius: 20px; background: #fff; border: 1px solid rgba(214, 77, 122, .14); box-shadow: 0 14px 30px rgba(120, 60, 110, .1); }
.mn-h { display: flex; align-items: center; gap: 8px; }
.mn-av { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid rgba(214, 77, 122, .28); }
.mn-av img { width: 18px; height: auto; }
.mn-body { display: grid; gap: 12px; margin-top: 12px; }
.mn-h b { font-size: 13.5px; letter-spacing: -0.02em; }
.mn-h small { margin-left: auto; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; color: var(--fg-3); }
.mn-q { font-size: 12px; font-weight: 800; color: #B23A63; }
.mn-r { display: grid; gap: 6px; margin-top: 6px; }
.mn-r li { position: relative; padding-left: 14px; font-size: 13.5px; line-height: 1.5; color: var(--fg); }
.mn-r li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: #D64D7A; }
.mn-after { display: grid; align-content: start; gap: 4px; padding-top: 12px; border-top: 1px dashed #EAD9E4; }
@media (min-width: 600px) { .mn-body { grid-template-columns: 1.1fr 1fr; gap: 20px; } .mn-after { padding: 0 0 0 20px; border-top: 0; border-left: 1px dashed #EAD9E4; } }
.mn-after span { font-size: 12px; font-weight: 800; color: var(--violet-deep); }
.mn-after p { font-size: 13px; line-height: 1.6; color: var(--fg-2); }

.why-promise { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; max-width: 1080px; margin: 20px auto 0; }
.why-promise li { padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid rgba(140, 111, 224, .16); font-size: 13.5px; color: var(--fg-2); }
.why-promise b { color: var(--fg); font-weight: 700; }

@media (min-width: 900px) {
  .why6 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
  .w6 { padding: 36px 34px; }
  .w6-mark { grid-column: span 7; grid-template-columns: minmax(0, 1fr) 236px; align-items: center; align-content: center; gap: 30px; }
  .w6-only, .w6-real { grid-column: span 5; grid-template-rows: auto 1fr; }
  .w6-only .w6-vis, .w6-real .w6-vis { align-self: end; }
  .w6-care { grid-column: span 7; grid-template-rows: auto 1fr; }
  .w6-care .w6-vis { align-self: end; }
}

/* ---------- 겨울 배너: 누런 배경 대신 사이트 톤(라벤더·핑크·하늘) ---------- */
.gift-card { background: linear-gradient(118deg, #F1EAFD 0%, #FBEAF2 52%, #E9F0FD 100%); border-color: rgba(140, 111, 224, .14); }

/* ---------- 설렘을 시작하는 네 가지 방법: 영수증 ---------- */
.sc-grid { display: grid; gap: 40px; align-items: center; }
.sc-label { font-size: 14px; font-weight: 600; color: var(--fg-2); }
.sc-title { margin-top: 12px; font-size: clamp(32px, 6vw, 52px); font-weight: 800; line-height: 1.16; letter-spacing: -0.045em; color: var(--fg); }
.sc-sub { margin-top: 18px; max-width: 420px; font-size: 16px; line-height: 1.75; color: var(--fg-2); }
.sc-copy .pill { margin-top: 28px; }
.rc-wrap { justify-self: center; width: 100%; max-width: 410px; filter: drop-shadow(0 22px 26px rgba(50, 35, 80, .16)) drop-shadow(0 2px 3px rgba(50, 35, 80, .08)); transform: rotate(-1.6deg); transition: transform .5s var(--ease); }
.rc-wrap:hover { transform: rotate(0deg); }
.receipt { --t: 7px; position: relative; background: #FFFEFC; padding: 34px 26px 30px;
  -webkit-mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) top / calc(2 * var(--t)) var(--t) repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--t) + 1px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / calc(2 * var(--t)) var(--t) repeat-x;
          mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) top / calc(2 * var(--t)) var(--t) repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--t) + 1px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / calc(2 * var(--t)) var(--t) repeat-x; }
.rc-head { text-align: center; }
.rc-head img { width: 54px; height: auto; margin: 0 auto; }
.rc-name { margin-top: 8px; font-size: 17px; font-weight: 800; letter-spacing: -0.03em; }
.rc-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--fg-3); }
.rc-rule { margin: 16px 0; border-top: 1.5px dashed rgba(21, 19, 26, .4); }
.rc-cols { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 11px; letter-spacing: .04em; color: var(--fg-3); }
.rc-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 6px; margin: 0 -6px; padding: 9px 6px; border-radius: 6px; color: var(--fg); transition: background .25s; }
.rc-item:hover, .rc-item:focus-visible { background: #FDEFF4; }
.rc-no { padding-top: 3px; font-size: 12px; color: var(--fg-3); }
.rc-line { display: flex; align-items: baseline; gap: 8px; }
.rc-line b { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.rc-dots { flex: 1; min-width: 12px; border-bottom: 1.5px dotted rgba(21, 19, 26, .38); transform: translateY(-3px); }
.rc-qty { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.rc-item small { grid-column: 2; margin-top: 2px; font-size: 12px; color: var(--fg-3); }
.rc-item:hover .rc-qty::after, .rc-item:focus-visible .rc-qty::after { content: " →"; }
.rc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; font-size: 13.5px; color: var(--fg-2); }
.rc-total.big { font-size: 15px; font-weight: 800; color: var(--fg); }
.rc-total.big .mono { font-size: 22px; }
.rc-later .was { color: var(--fg-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.rc-later b { margin-left: 4px; font-size: 15px; font-weight: 800; color: #D64D7A; }
.rc-note { margin-top: 10px; font-size: 11.5px; line-height: 1.6; text-align: center; color: var(--fg-3); }
.rc-stamp { position: absolute; right: 16px; top: 18px; width: 88px; transform: rotate(-14deg); opacity: .9; mix-blend-mode: multiply; pointer-events: none; }
.rc-barcode { width: 76%; height: 46px; margin: 18px auto 8px; background: repeating-linear-gradient(90deg, #15131A 0 2px, #0000 2px 4px, #15131A 4px 5px, #0000 5px 8px, #15131A 8px 11px, #0000 11px 12px, #15131A 12px 13px, #0000 13px 17px); }
.rc-thanks { font-size: 12px; font-weight: 700; letter-spacing: -0.01em; text-align: center; }
.rc-thanks .mono { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 400; letter-spacing: .12em; color: var(--fg-3); }
@media (min-width: 900px) { .sc-grid { grid-template-columns: 1fr 440px; gap: 72px; } .rc-wrap { max-width: 440px; } .receipt { padding: 40px 34px 34px; } }
@media (max-width: 380px) { .receipt { padding: 30px 18px 26px; } .rc-line b { font-size: 14px; } .rc-stamp { width: 76px; right: 8px; } }

/* ---------- 진행 방식: 6단계 흐름 ---------- */
.flw { display: grid; gap: 0; max-width: 1080px; margin: 44px auto 0; counter-reset: none; }
.flw-i { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "n t" "n d" "n e"; column-gap: 14px; padding: 0 0 26px; }
.flw-i::before { content: ""; position: absolute; left: 27px; top: 46px; bottom: 4px; border-left: 1.5px dashed rgba(111, 82, 214, .35); }
.flw-i:last-child { padding-bottom: 0; }
.flw-i:last-child::before { display: none; }
.flw-n { grid-area: n; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1px solid rgba(140, 111, 224, .22); font-family: var(--serif-en); font-size: 19px; font-weight: 500; color: var(--violet-deep); box-shadow: 0 8px 18px rgba(70, 50, 110, .08); }
.flw-i b { grid-area: t; align-self: end; padding-top: 6px; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
.flw-i > span:not(.flw-n) { grid-area: d; margin-top: 3px; font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.flw-i em { grid-area: e; justify-self: start; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: var(--violet-soft); color: var(--violet-deep); font-size: 12px; font-style: normal; font-weight: 800; }
.flw-i.is-pay .flw-n { background: var(--fg); border-color: var(--fg); color: #fff; }
.flw-i.is-pay em { background: #FBE3EB; color: #B23A63; }
.flw-need { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; max-width: 1080px; margin: 40px auto 0; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid rgba(140, 111, 224, .14); }
.flw-need b { margin-right: 4px; font-size: 13px; font-weight: 800; color: var(--fg); }
.flw-need span { padding: 6px 12px; border-radius: 999px; background: var(--bg-lav); font-size: 13px; font-weight: 600; color: var(--fg-2); }
.flw-fine { margin: 12px auto 0; max-width: 680px; font-size: 13px; line-height: 1.6; text-align: center; color: var(--fg-3); }
@media (min-width: 900px) {
  .flw { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  .flw-i { grid-template-columns: 1fr; grid-template-areas: "n" "t" "d" "e"; align-content: start; padding: 0; }
  .flw-i::before { left: 64px; right: -10px; top: 28px; bottom: auto; border-left: 0; border-top: 1.5px dashed rgba(111, 82, 214, .35); }
  .flw-i b { padding-top: 18px; font-size: 17px; }
  .flw-i > span:not(.flw-n) { font-size: 13.5px; }
}

/* ---------- 요금: 세 가지 방식 + 11월 도장 ---------- */
.price-sec .sec-head .lead { font-size: 14.5px; }
.nov-band { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; max-width: 760px; margin: 36px auto 0; padding: 18px 22px 18px 18px; border-radius: 22px; background: #fff; border: 1.5px dashed rgba(214, 77, 122, .45); }
.nb-stamp { width: 96px; transform: rotate(-12deg); }
.nb-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: #B23A63; }
.nb-dday { padding: 2px 9px; border-radius: 999px; background: #D64D7A; color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
.nb-t { margin-top: 4px; font-size: clamp(19px, 3.4vw, 24px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.3; }
.nb-t b { color: #D64D7A; font-weight: 900; }
.nb-s { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--fg-3); }
.plans { display: grid; gap: 16px; max-width: 1080px; margin: 24px auto 0; }
.plan { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; border-radius: 26px; background: #fff; border: 1px solid rgba(140, 111, 224, .16); box-shadow: 0 12px 30px rgba(70, 50, 110, .07); }
.plan-name { font-size: 22px; font-weight: 800; letter-spacing: -0.04em; }
.plan-tag { margin-top: 4px; font-size: 14px; color: var(--fg-2); }
.plan-fees { margin: 20px 0 0; padding: 14px 0 0; border-top: 1.5px dashed rgba(21, 19, 26, .22); }
.pf { display: grid; grid-template-columns: auto minmax(12px, 1fr) auto; align-items: baseline; gap: 8px; padding: 6px 0; }
.pf dt { font-size: 14px; color: var(--fg-2); }
.pf i { border-bottom: 1.5px dotted rgba(21, 19, 26, .3); transform: translateY(-4px); }
.pf dd { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; text-align: right; white-space: nowrap; }
.pf dd s { margin-right: 6px; font-size: 13px; font-weight: 600; color: var(--fg-3); text-decoration-thickness: 1.5px; }
.pf dd b { font-size: 19px; font-weight: 900; color: #D64D7A; }
.plan-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg-lav); font-size: 13px; font-weight: 700; color: var(--fg-2); }
.plan-total b { font-size: 20px; font-weight: 900; letter-spacing: -0.03em; color: var(--fg); }
.plan-feat { display: grid; gap: 9px; margin: 18px 0 22px; }
.plan-feat li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.plan-feat li::before { content: ""; position: absolute; left: 3px; top: .42em; width: 11px; height: 6px; border-left: 2px solid var(--violet); border-bottom: 2px solid var(--violet); transform: rotate(-45deg); }
.plan-feat b { color: var(--fg); font-weight: 700; }
.plan-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; margin-top: auto; border-radius: 999px; background: var(--bg-lav); color: var(--fg); font-size: 15px; font-weight: 700; border: 1px solid rgba(140, 111, 224, .22); transition: transform .2s var(--ease), background .2s; }
.plan-cta:hover { transform: translateY(-1px); background: var(--violet-soft); }
.plan-mid { border: 2px solid var(--violet); }
.plan-mid .plan-cta { background: var(--fg); color: #fff; border-color: var(--fg); }
.plan-mid .plan-cta:hover { background: #2C2638; }
.plan-sig { background: radial-gradient(120% 70% at 100% 0%, rgba(177, 114, 216, .32) 0%, rgba(34, 27, 49, 0) 60%), #221B31; border-color: transparent; color: #fff; box-shadow: 0 18px 40px rgba(34, 20, 60, .22); }
.plan-sig .plan-tag, .plan-sig .pf dt, .plan-sig .plan-feat li { color: rgba(255, 255, 255, .78); }
.plan-sig .plan-fees { border-top-color: rgba(255, 255, 255, .3); }
.plan-sig .pf i { border-bottom-color: rgba(255, 255, 255, .3); }
.plan-sig .pf dd s { color: rgba(255, 255, 255, .55); }
.plan-sig .pf dd b { color: #F49ABF; }
.plan-sig .plan-total { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .78); }
.plan-sig .plan-total b { color: #fff; }
.plan-sig .plan-feat li::before { border-color: #E3BDF4; }
.plan-sig .plan-feat b { color: #fff; }
.plan-sig .plan-cta { background: #fff; color: var(--fg); border-color: #fff; }
.price-rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; max-width: 900px; margin: 22px auto 0; }
.price-rules li { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(140, 111, 224, .14); font-size: 13px; color: var(--fg-2); }
@media (min-width: 900px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
  .plan { padding: 30px 26px 26px; }
  .nov-band { grid-template-columns: 112px minmax(0, 1fr); padding: 20px 28px 20px 22px; }
  .nb-stamp { width: 112px; }
}

/* ---------- 비교표: 솔로파티 · 결혼정보회사 · 소개팅할래 ---------- */
.cmp3 { min-width: 760px; }
.cmp3 thead th.me img { display: inline-block; width: 30px; height: auto; margin: 0 6px -3px 0; filter: brightness(0) invert(1); }
.cmp3 tbody th { width: 150px; font-size: 14px; }
.cmp3 td { font-size: 14px; }
.cmp3 td.me { font-size: 14.5px; }
@media (max-width: 759px) { .cmp3 { min-width: 680px; } .cmp3 th, .cmp3 td { padding: 14px 12px; } .cmp3 tbody th { position: sticky; left: 0; z-index: 1; width: 104px; font-size: 13px; box-shadow: 6px 0 10px -8px rgba(21, 19, 26, .25); } .cmp3 thead th:first-child { position: sticky; left: 0; z-index: 2; } .cmp3 td, .cmp3 td.me { font-size: 13.5px; } }
.cmp-note { margin-top: 14px; font-size: 12.5px; color: var(--fg-3); text-align: center; }

@media (prefers-reduced-motion: reduce) { .coupon, .rc-wrap { transition: none !important; } }

/* =============================================================
   프로필 카드 (KNOW ABOUT ME, 2026-11-06) — 홈 예시 섹션 #card
   06-프로필항목.csv의 '카드' 공개 항목만 씁니다. 이상형·희망 조건·본인 확인용 사진은 카드에 없음.
   인라인 style 없이 클래스만 사용(CSP). 실제 회원 카드는 서버에서 워터마크를 합성한 이미지로 보냅니다.
   ============================================================= */
.kam-stage { display: grid; gap: 32px; max-width: 1000px; margin: 44px auto 0; }
.kam-offer { width: 100%; max-width: 440px; justify-self: center; }
.kam-why { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 16px; border-radius: 14px 14px 0 0; background: var(--fg); color: #fff; font-size: 13px; line-height: 1.5; }
.kam-why span { font-size: 11.5px; font-weight: 800; color: #E3BDF4; white-space: nowrap; }
.kam { position: relative; overflow: hidden; background: #FFFEFC; border: 1.5px solid #15131A; border-radius: 0 0 8px 8px; color: var(--fg); box-shadow: 0 24px 44px rgba(50, 35, 80, .14); }
.kam-top { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 14px; padding: 16px; border-bottom: 1.5px solid #15131A; }
.kam-title { font-size: 34px; font-weight: 900; line-height: .92; letter-spacing: -0.04em; text-transform: uppercase; }
.kam-title span { color: transparent; -webkit-text-stroke: 1.4px #D64D7A; }
.kam-lines { display: grid; gap: 9px; margin: 16px 0 0; }
.kam-lines div { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: baseline; gap: 6px; }
.kam-lines div.two { grid-template-columns: 42px minmax(0, 1fr) 42px minmax(0, 1fr); }
.kam-lines dt { font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--fg-2); }
.kam-lines dd { margin: 0; padding: 0 2px 1px; border-bottom: 1px solid #15131A; font-size: 13.5px; font-weight: 700; color: #B23A63; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kam-photos { display: grid; align-content: start; gap: 6px; }
.kam-main { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 1.5px solid #15131A; background: #E9E2F2; }
.kam-main img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; filter: blur(6px); transform: scale(1.12); }
.kam-wm { position: absolute; inset: -55% -90%; display: flex; flex-direction: column; justify-content: center; gap: 13px; transform: rotate(-28deg); pointer-events: none; }
.kam-wm span { white-space: nowrap; font: 600 9px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: rgba(255, 255, 255, .72); text-shadow: 0 1px 2px rgba(20, 10, 30, .4); }
.kam-wm span:nth-child(even) { padding-left: 60px; }
.kam-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kam-thumbs span { aspect-ratio: 1; overflow: hidden; border: 1.5px solid #15131A; background: #E9E2F2; }
.kam-thumbs img { width: 100%; height: 100%; object-fit: cover; filter: blur(5px); transform: scale(1.2); }
.kam-thumbs span:first-child img { object-position: 50% 12%; }
.kam-thumbs span:last-child img { object-position: 50% 78%; }
.kam-sec { padding: 12px 16px 14px; border-bottom: 1.5px solid #15131A; }
.kam h4 { margin: 0 0 9px; font-size: 13px; font-weight: 900; letter-spacing: -0.01em; }
.kam-favs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kam-favs li { display: grid; place-items: center; align-content: center; gap: 2px; min-height: 60px; padding: 6px; border: 1.2px solid #15131A; border-radius: 6px; text-align: center; }
.kam-favs b { font-size: 14.5px; font-weight: 800; letter-spacing: -0.02em; }
.kam-favs small { font-size: 11px; line-height: 1.35; color: var(--fg-3); }
.kam-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kam-tags li { padding: 4px 12px; border: 1.2px solid #15131A; border-radius: 999px; background: #FBE3EB; font-size: 13px; font-weight: 700; }
.kam-tot { display: grid; gap: 7px; margin: 0; }
.kam-tot div { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px; }
.kam-tot dt { font-size: 11.5px; font-weight: 800; color: var(--fg-2); }
.kam-tot dd { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.kam-tot dd span { padding: 2px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 11.5px; color: var(--fg-3); white-space: nowrap; }
.kam-tot dd span.on { border-color: #15131A; background: #EEE8FD; color: var(--fg); font-weight: 800; }
.kam-bio { border-bottom: 1.5px dashed rgba(21, 19, 26, .5); }
.kam-bio p { font-size: 13.5px; line-height: 1.7; color: var(--fg-2); }
.kam-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 10px 16px 12px; font-size: 11px; color: var(--fg-3); }
.kam-act { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 12px; }
.kam-act span { display: grid; place-items: center; min-height: 48px; border-radius: 999px; font-size: 14.5px; font-weight: 700; }
.kam-no { background: #fff; border: 1px solid rgba(21, 19, 26, .16); color: var(--fg-2); }
.kam-yes { background: var(--fg); color: #fff; }
.kam-sample { margin-top: 10px; font-size: 12px; text-align: center; color: var(--fg-3); }
.kam-side-t { margin-bottom: 12px; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--accent); }
.kam-notes { display: grid; gap: 0; border-top: 1px solid rgba(21, 19, 26, .12); }
.kam-notes li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; padding: 14px 4px; border-bottom: 1px solid rgba(21, 19, 26, .12); }
.kam-notes i { grid-row: 1 / 3; font-family: var(--serif-en); font-size: 17px; font-style: normal; color: var(--violet-deep); }
.kam-notes b { font-size: 15.5px; font-weight: 800; letter-spacing: -0.03em; }
.kam-notes span { margin-top: 2px; font-size: 13.5px; line-height: 1.55; color: var(--fg-2); }
@media (max-width: 420px) {
  .kam-top { grid-template-columns: minmax(0, 1fr) 108px; gap: 12px; padding: 14px; }
  .kam-title { font-size: 28px; }
  .kam-lines div.two { grid-template-columns: 34px minmax(0, 1fr) 40px minmax(0, 1fr); }
  .kam-sec { padding: 12px 14px 13px; }
}
@media (min-width: 960px) {
  .kam-stage { grid-template-columns: 440px minmax(0, 1fr); align-items: center; gap: 64px; }
  .kam-notes b { font-size: 17px; }
}

.kam-style { font-size:12px; line-height:1.8; color:var(--fg-2); }
.kam-style + .kam-style { margin-top:7px; }
@media (max-width:420px) {
  #card .kam-lines dt { white-space:nowrap; font-size:10px; }
}

/* Winter hero: fade the photograph, animate only the background. */
.hero.v5 .hero-bg { inset: 0 0 168px; background: #f8f4f7; }
.hero.v5 .hero-bg img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 43%; opacity: .44;
  transform-origin: 50% 46%; animation: winter-breathe 20s ease-in-out infinite alternate;
  will-change: transform;
}
.hero.v5 .hero-bg::after {
  background: linear-gradient(180deg, rgba(250,247,250,.12) 0%, rgba(250,247,250,.08) 50%, rgba(250,247,250,.5) 80%, var(--bg) 100%),
    radial-gradient(ellipse at 50% 42%, rgba(255,250,253,.57) 0%, rgba(255,250,253,.2) 40%, transparent 72%);
}
@keyframes winter-breathe { from { transform: scale(1); } to { transform: scale(1.035); } }
@media (max-width: 599px) {
  .hero.v5 .hero-bg { inset: 0 0 168px; }
  .hero.v5 .hero-bg img { height: auto; object-fit: contain; object-position: 50% 0; opacity: .44; }
  .hero.v5 .hero-bg::after { background: linear-gradient(180deg, rgba(250,247,250,.08), rgba(250,247,250,.2) 120px, var(--bg) 210px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero.v5 .hero-bg img { animation: none; transform: none; will-change: auto; }
}