/* index.html에서 뺀 화면 스타일 (2026-09-08).
   4,876줄짜리 한 파일에서 CSS 2,300줄 · JS 2,000줄을 갈랐다.
   **순서가 곧 규칙이다** — 아래로 갈수록 이긴다. 위쪽 덩어리는 원래 <head>의 첫 <style>,
   아래쪽은 SEO 메타 뒤에 있던 두 번째 <style>이었다. 그 순서를 그대로 유지한다.
   `!important`는 열 곳만 남아 있다(hidden 계열 · 접근성 설정 · 잠긴 글 흐림). 늘리지 말 것 —
   특이도로 못 이기면 선택자를 고치는 게 맞다(tooling/style-snapshot.md의 방법으로 확인한다). */

/* ══════════ 1 ══════════ */
:root {
  --bg: #0F1117;
  --bg2: #181C27;
  --bg3: #1E2333;
  --text: #EFECE4;
  --dim: #9A9589;
  --gold: #C9A969;
  --gold-dim: rgba(var(--gold-rgb),0.15);
  /* 투명도만 다른 색이 200곳 가까이 있다(글자색 .5 · 금색 .08 …).
     그 값들이 전부 이 세 줄을 가리킨다 — 브랜드 색을 바꾸려면 여기만 고치면 된다.
     투명도까지 토큰으로 만들지는 않았다. 197개가 딱 한 번씩만 쓰여서, 이름을 붙이면 오히려 늘어난다. */
  --text-rgb: 239,236,228;
  --gold-rgb: 201,169,105;
  --white-rgb: 255,255,255;
  --dim-rgb: 154,149,137;
  --border: rgba(var(--text-rgb),0.1);
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* hidden 속성은 무조건 이긴다.
   브라우저 기본 규칙 [hidden]{display:none}은 우선순위가 제일 낮아서,
   .cta-products{display:grid} 같은 클래스 규칙 하나면 조용히 진다.
   그래서 hidden을 붙여놨는데도 화면에 그대로 나오던 것들이 있었다
   (2026-09-08 발견: 글자 없는 빈 버튼 #pairBannerAction, 숨기기로 한 통합 해설서 카드 #ctaAllLink).
   pair-detail.html·pair.html에는 원래 이 줄이 있었고 index.html에만 없었다.
   개별 .클래스[hidden] 패치를 더 붙이지 말고 이 한 줄로 끝낸다. */
[hidden] { display: none !important; }
body {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.65;
}
button {
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(var(--text-rgb),.92);
  outline-offset: 3px;
}
.q-situation:focus,
.result-name:focus { outline: none; }
.app { max-width: 660px; margin: 0 auto; padding: 0 20px 80px; }

/* ── 상단 로고 ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0 0;
  font-size: 12px; color: var(--dim);
  font-weight: 600; letter-spacing: 0.04em;
}
/* ── 뷰 전환 ── */
.view { display: none; }
.view.active { display: block; }

/* ══════════════════════════════
   INTRO
══════════════════════════════ */

/* ══════════════════════════════
   QUIZ
══════════════════════════════ */
/* 문항 화면 맨 위에 붙어 있는다 — 스크롤해도 진행률과 「3 / 16」이 늘 보이게. */
.quiz-header { position: sticky; top: var(--psy-head-h, 0px); z-index: 5; padding: 10px 0 6px; margin-bottom: 12px;
  background: linear-gradient(180deg, var(--bg) 72%, rgba(15,17,23,0)); }
.quiz-progress {
  position: relative; display: flex; align-items: center; margin-bottom: 8px;
}
.prog-bar {
  position: relative; flex: 1; height: 9px;
  background: linear-gradient(90deg, rgba(var(--white-rgb),.045), rgba(var(--gold-rgb),.08), rgba(var(--white-rgb),.035));
  border: 1px solid rgba(var(--text-rgb),.13);
  border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 0 12px rgba(0,0,0,.45), 0 0 22px rgba(var(--gold-rgb),.07);
}

.prog-fill {
  position: relative; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--text));
  transition: width .45s cubic-bezier(.22,1,.36,1);
}
/* 진행 막대 아래 한 줄: 왼쪽에 되돌아가기, 오른쪽에 「3 / 16」. */
.quiz-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
.quiz-back {
  display: inline-flex; align-items: center; min-height: 34px;
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px;
  background: rgba(var(--white-rgb),.04); color: var(--dim);
  font: 800 12.5px/1 inherit; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
@media (hover: hover) {
  .quiz-back:hover { color: var(--text); border-color: rgba(var(--text-rgb),.28); background: rgba(var(--white-rgb),.08); }
}
.quiz-back[hidden] { display: none !important; }
.quiz-count { margin-left: auto; color: var(--dim); font-size: 12.5px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.quiz-count b { color: var(--gold); font-weight: 900; }
.q-situation {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.75;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 2px 0 0;
  margin: 0 auto 10px;
}

#quizView #qSituation { text-align: center; }

.q-visual {
  width: 100%;
  max-height: 390px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 22px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.q-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
/* 짧은 화면(아이폰 SE·미니, 주소창이 큰 브라우저)에서 그림과 여백을 줄여
   그림 · 상황 · 선지 넷 · 진행 막대가 한 화면에 다 들어오게 한다.
   폭이 아니라 높이로 재는 게 맞다 — 문제는 세로 공간이었다. */
#quizView { padding-top: 32px; }
@media (max-height: 730px) {
  #quizView { padding-top: 10px; }
  .quiz-header { padding: 4px 0 4px; margin-bottom: 8px; }
  .quiz-meta { min-height: 28px; }
  .q-situation { margin-bottom: 8px; font-size: 15.5px; }
  .q-divider { margin: 12px 0; }
  .q-options { gap: 8px; }
  .q-option { padding: 13px 16px; }
}
.q-visual.show img {
  animation: qImageIn .32s cubic-bezier(.22,1,.36,1) both;
}
@keyframes qImageIn {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}

.q-divider {
  height: 1px; margin: 18px 0 18px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb),.65), rgba(var(--text-rgb),.18), transparent);
  box-shadow: 0 0 16px rgba(var(--gold-rgb),.18);
}
.q-options { display: flex; flex-direction: column; gap: 10px; }
.q-option {
  display: flex; align-items: flex-start; gap: 0;
  background: var(--bg2); border: 1.5px solid var(--border);
  color: var(--text); font-size: 14px; font-family: inherit;
  text-align: left; padding: 16px 18px; border-radius: var(--radius);
  cursor: pointer; line-height: 1.6;
  /* 아이폰에서 「눌렀는데 반응이 없다」던 것 고침(2026-09-12): all 전환(느리고 무겁다)을 빼고
     색·눌림만 빠르게 전환한다. -webkit-tap-highlight-color를 끄고 :active로 직접 표시한다. */
  transition: border-color .1s ease, background-color .1s ease, transform .06s ease;
  -webkit-tap-highlight-color: transparent;
}
.option-text { flex: 1; }
/* 손가락을 대는 즉시(터치 시작) 눌린 표시가 뜬다 — setTimeout·전환을 기다리지 않아 탭이 바로 먹는 느낌이 든다. */
.q-option:active:not(:disabled) { transform: scale(.985); border-color: var(--gold); background: var(--gold-dim); }
/* hover는 마우스 기기에서만. 아이폰은 탭한 자리의 hover가 다음 문항 버튼에 그대로 남아
   방금 고른 선지가 다음 문항에서도 선택된 것처럼 보였다. */
@media (hover: hover) {
  .q-option:hover {
    border-color: var(--gold); background: var(--gold-dim); color: var(--text);
  }
}
.q-option.selected {
  border-color: var(--gold); background: var(--gold-dim);
  pointer-events: none;
}
.q-option:disabled { cursor: default; }












/* ══════════════════════════════
   스크롤 애니메이션
══════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════
   RESULT PAGE — 완전 재설계
   ════════════════════════════════════════ */

/* ── 페이드인 ── */

/* ── 결과 래퍼 ── */

/* 컬러 halo — 우상단 */

/* 좌하단 dim glow */

/* 히어로 내부 레이아웃 */

/* 텍스트 영역 */

/* eyebrow */

/* 원형 이름 */

/* 한줄 설명 */

/* 속성 카드 3개 */


/* 이미지 영역 */

/* 이미지 뒤 원형 glow */

/* ════ CHART ════ */

/* ════ 관계 카드 ════ */


/* 관계 카드 내부 — 태그 + 이름 + 아바타 가로 배치 */

/* 관계 캐릭터 이미지 */

/* 설명 텍스트 */
.rel-text {
  flex-direction: row;
  gap: 12px;
  padding: 16px 16px 16px 18px;
}

/* ════ CTA ════ */


/* ════ 액션 버튼 ════ */


/* ════ 출처 & 저작권 ════ */

/* ════ intro showcase overrides ════ */
.intro-title {
  font-size: clamp(32px, 9vw, 48px); font-weight: 800;
  line-height: 1.3; margin-bottom: 32px;
  background: linear-gradient(135deg, var(--text) 0%, var(--gold) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.intro { padding-top: 54px; text-align: center; }
.intro-brand {
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  color: var(--gold); margin-bottom: 12px;
}
/* 2026-09-11: 칸(80px)과 그림 크기는 그대로, 칸 사이만 16 → 6px(사용자: 「칸은 줄이지 말고 간격만」). */
.intro-showcase {
  display: grid;
  grid-template-columns: repeat(4, 80px);
  justify-content: center;
  gap: 14px 6px;
  margin: 0 auto 20px;
}
@media(max-width:560px) { /* 2026-09-11: 칸(80px)과 그림 크기는 그대로, 칸 사이만 16 → 6px(사용자: 「칸은 줄이지 말고 간격만」). */
.intro-showcase {
  display: grid;
  grid-template-columns: repeat(4, 80px);
  justify-content: center;
  gap: 14px 6px;
  margin: 0 auto 20px;
} }
/* 첫 화면 원탁(2026-09-12). SVG라 폭에 맞춰 알아서 커지고 줄어든다 — 별도 반응형이 필요 없다. */
.intro-table { width: 100%; max-width: 336px; margin: 2px auto 22px; }
.intro-table svg { display: block; width: 100%; height: auto; }
@media (max-width: 560px) { .intro-table { max-width: 300px; } }
/* 첫 화면 캐릭터 = 네 칸 두 줄 스티커(2026-09-12 밤 사용자가 시안 A 「스티커 + 색 테이프」를 골랐다 — 홈 탭의 원탁은 걷었다).
   칸 80px · 칸 사이 6px는 예전 첫 화면 값. 흰 테두리·그림자는 구운 스티커 파일이라 필터 계산이 없다(아이폰). 테이프 그림자도 box-shadow 한 줄. */
.intro-stk .intro-stk-cell { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.intro-stk .intro-stk-face { width: 80px; height: 74px; display: flex; align-items: flex-end; justify-content: center; }
.intro-stk .intro-stk-face img { display: block; width: 66px; height: auto; transform: rotate(var(--tilt, 0deg)); }
.intro-tape { display: inline-block; padding: 3px 7px 4px; border-radius: 3px; background: var(--tape); color: #1A1A1A; font-size: 10.5px; font-weight: 800; line-height: 1.2; white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,.38); transform: rotate(var(--tilt, 0deg)); }
.intro-tape.is-light { color: #FFFFFF; }
/* 홈 제목·시작 버튼 = 시안 A 「테이프」(2026-09-13 사용자 선택 · 시안 https://claude.ai/code/artifact/567052b6-4446-4fd4-8873-fba26a630fcc).
   원형 이름 테이프(.intro-tape)와 같은 재료 — 3~4px 모서리 · 아래로 떨어지는 그림자 한 줄 · 살짝 기울임. 금색 그라데이션 글씨·반짝이는 금속 버튼은 걷었다.
   #intro로 묶어 뒤쪽 화면 폭별 규칙(글자 크기·여백)은 그대로 두고 모양만 여기서 정한다. */
#intro .intro-brand { display: inline-block; align-self: center; width: max-content; max-width: 100%; margin-bottom: 16px; padding: 4px 10px 5px; border-radius: 3px; background: var(--text); color: #1A1A1A;
  font-size: 12px; letter-spacing: .02em; transform: rotate(-2deg); box-shadow: 0 2px 0 rgba(0,0,0,.45); }
#intro .intro-title { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: #FFFFFF; color: #FFFFFF; letter-spacing: -.03em; }
#intro .intro-title-tape { display: inline-block; margin-right: 6px; padding: 0 10px 2px; border-radius: 3px; background: #E8C547; color: #1A1A1A; -webkit-text-fill-color: #1A1A1A;
  transform: rotate(-2.5deg); box-shadow: 0 3px 0 rgba(0,0,0,.45); }
#intro .btn-start { border-radius: 4px; background: var(--text); background-image: none; animation: none; color: #1A1A1A; font-size: 17px; letter-spacing: .02em;
  transform: rotate(-1deg); box-shadow: 0 4px 0 rgba(0,0,0,.5); transition: transform .12s, box-shadow .12s; }
#intro .btn-start:hover { transform: rotate(-1deg) translateY(-1px); box-shadow: 0 5px 0 rgba(0,0,0,.5); }
#intro .btn-start:active { transform: rotate(-1deg) translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.5); }

.intro-arch-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.intro-arch-card img {
  width: 72px;
  height: auto;
  aspect-ratio: 1/1.18;
  object-fit: contain;
  image-rendering: pixelated;
  transform: scale(var(--img-scale,1));
  transform-origin: center bottom;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.2));
}
.intro-arch-name {
  display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(var(--text-rgb),.12);
  background: rgba(30,35,51,.8); font-size: 11px; font-weight: 700; line-height: 1;
}

/* 상단: 텍스트 배너 */

/* 하단: 상품 카드 2개 */


/* ════════════════════════════════════════
   RESULT PAGE v3
   ════════════════════════════════════════ */

@keyframes fadeSlideUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
.fade-up { animation: fadeSlideUp .5s cubic-bezier(.22,1,.36,1) both; }

/* ── 결과 래퍼 ── */
.result { padding-top: 24px; }

/* ════ HERO: 세로 스택 ════ */
.result-hero {
  position: relative;
  border-radius: 22px;
  overflow: visible;
  margin-bottom: 24px;
  background: linear-gradient(160deg, var(--bg2) 0%, var(--bg3) 100%);
  border: 1px solid var(--border);
}
.result-hero::before {
  content: '';
  position: absolute; top: -80px; right: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  background: var(--hero-color, var(--gold));
  opacity: .15; filter: blur(60px);
  pointer-events: none;
}

/* 캐릭터 영역 — 상단 */
.result-avatar-wrap {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: 24px;
  min-height: 260px;
  overflow: visible;
  position: relative;
}

.result-avatar {
  width: auto;
  height: var(--avatar-h, 210px);
  max-height: 240px;
  object-fit: contain;
  object-position: bottom center;
  image-rendering: pixelated;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.45));
  transform: scale(var(--img-scale,1));
  transform-origin: center bottom;
  margin-left: var(--avatar-mx, 0px);
  position: relative;
  z-index: 1;
}

/* 텍스트 영역 — 하단 */
.result-hero-copy {
  padding: 20px 24px 28px;
  position: relative;
  z-index: 1;
}

.result-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
  text-align: center;
}
.result-name {
  font-size: clamp(34px, 9vw, 48px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -.025em;
  margin-bottom: 8px;
  text-align: center;
}
.result-tagline {
  font-size: 13.5px;
  color: rgba(var(--text-rgb),.82);
  line-height: 1.6;
  margin-bottom: 6px;
}

/* 속성 카드 3개 */
.result-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.result-card {
  background: rgba(var(--white-rgb),.04);
  border: 1px solid rgba(var(--white-rgb),.07);
  border-radius: 12px;
  padding: 14px 15px;
}
.result-card.shadow {
  grid-column: span 2;
  border-color: rgba(224,144,112,.22);
  background: rgba(224,144,112,.05);
}
.result-card .label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--text-rgb),.55);
  margin-bottom: 6px;
}
.result-card .val {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(var(--text-rgb),.9);
}
.result-card.shadow .val { color: #E09070; }

/* ════ CHART ════ */
.chart-block {
  margin-bottom: 45px;
  padding: clamp(24px, 5vw, 34px);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 22px;
}
/* ── 입문 블록: 원형 설명 + 같은 원형의 브랜드 ── */
.intro-copy { margin: 4px 0 0; color: rgba(var(--text-rgb),.88); font-size: 14.5px; line-height: 1.8; word-break: keep-all; }
/* 브랜드·유명인 박스(.brand-block, chart-block). 2026-09-09 재조판.
   ⚠️ 여백은 **`.brand-head` 블록에 건다.** 제목이 인라인 `<span>`이라 거기 붙인 margin-bottom은
   아무 일도 하지 않는다 — 예전에 56px을 걸어두고 「간격이 없다」는 지적을 받았다.
   리듬: 박스 위 24 → 제목 → 14 → 칩 → 26 → 제목 → 14 → 칩 → 박스 아래 24. */
.brand-block { padding: clamp(22px, 4.5vw, 28px); }
.brand-head { margin-bottom: 14px; }
.brand-head .section-head { display: block; margin-bottom: 0; font-size: 12.5px; letter-spacing: .05em; }
.brand-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-chips span { padding: 8px 13px; border-radius: 999px; background: rgba(var(--text-rgb),.07); color: var(--text); font-size: 13.5px; font-weight: 700; }
/* 점선으로 희미하게 붙는 한 명(크리에이터의 「심리학 고양이」) */
.brand-chips .chip-ghost { background: none; border: 1px dashed rgba(var(--text-rgb),.32); color: rgba(var(--text-rgb),.5); font-weight: 600; }
.brand-head-people { margin-top: 26px; }
/* ── 내 원형 지도(archetype-radar.js) ── */
.radar { margin-top: 6px; }
.radar-wrap { width: min(100%, 400px); margin: 0 auto; }
.radar-svg { display: block; width: 100%; height: auto; overflow: visible; }
.radar-legend { display: grid; gap: 8px; margin-top: 14px; }
.radar-legend-item { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 12px; background: rgba(var(--white-rgb),.03); }
.radar-legend-item i { display: block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.radar-legend-name { color: var(--text); font-size: 13px; font-weight: 800; }
.radar-legend-top { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.radar-top-label { align-self: center; color: var(--gold); font-size: 10.5px; font-weight: 900; letter-spacing: .1em; }
.radar-top { padding: 4px 9px; border-radius: 999px; background: rgba(var(--white-rgb),.06); color: var(--text); font-size: 12px; font-weight: 700; }
.radar-top b { font-weight: 900; }
/* 지도 아래 항상 펼쳐져 있는 선택률 막대(2026-09-08 — 예전엔 「숫자로 보기」 접힘 안에 있었다) */
.chart-numbers { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 18px; }
.chart-sub-head { margin-bottom: 8px; color: var(--text); font-size: 17px; font-weight: 800; letter-spacing: -.02em; word-break: keep-all; }
.chart-numbers .chart-caption { margin-bottom: 14px; font-size: 12.5px; }
.chart-tie-note { margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(var(--gold-rgb),.22); border-radius: 12px;
  background: rgba(var(--gold-rgb),.07); color: rgba(var(--text-rgb),.74); font-size: 13px; line-height: 1.72; word-break: keep-all; }
.chart-tie-note b { color: var(--text); font-weight: 800; }
/* ── 잠긴 본문 (locked-copy.js가 그린다. pair-detail.html과 같은 구조, 이 화면 팔레트) ── */
.rich-copy { color: rgba(var(--text-rgb),.86); font-size: 14px; line-height: 1.8; word-break: keep-all; }
.rich-copy p { margin: 0 0 10px; }
.rich-copy p:last-child { margin-bottom: 0; }
.rich-copy strong { color: var(--gold); }
.rich-copy ol, .rich-copy ul, .plain-list { display: grid; gap: 7px; margin: 8px 0; padding-left: 20px; color: rgba(var(--text-rgb),.86); font-size: 14px; line-height: 1.7; word-break: keep-all; }
.rich-copy blockquote { margin: 10px 0; padding: 10px 12px; border-left: 3px solid var(--gold); background: rgba(var(--gold-rgb),.08); }
.locked { position: relative; }
.locked-teaser p { margin: 0; }
.locked-tail { margin-top: 6px !important; filter: blur(.9px); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.08)); mask-image: linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.08)); user-select: none; }
.locked .plain-list { margin: 0 0 8px; }
.locked-fade { display: grid; gap: 9px; margin-top: 10px; }
.locked-fade span { display: block; height: 11px; border-radius: 6px; background: linear-gradient(90deg, rgba(var(--text-rgb),.45), rgba(var(--text-rgb),.14)); filter: blur(2.5px); }
.locked-fade span:nth-child(1) { opacity: .55; width: 96%; }
.locked-fade span:nth-child(2) { opacity: .32; width: 88%; }
.locked-fade span:nth-child(3) { opacity: .14; width: 60%; }
.locked-count { margin: 0 0 6px; color: #E0C98F; font-size: 12.5px; font-weight: 800; }
.locked-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(var(--gold-rgb),.45); border-radius: 12px; background: linear-gradient(105deg, rgba(var(--gold-rgb),.22), rgba(var(--gold-rgb),.08)); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.locked-cta-text { font-size: 13px; font-weight: 800; }
.locked-cta strong { flex: 0 0 auto; color: var(--gold); font-size: 13px; font-weight: 900; }
.locked-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px; border: 1px dashed rgba(var(--gold-rgb),.4); border-radius: 999px; background: rgba(var(--gold-rgb),.07); color: #E0C98F; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.me-card details { margin-top: 12px; border: 1px solid var(--border); border-radius: 15px; background: rgba(var(--white-rgb),.025); }
.me-card summary { cursor: pointer; padding: 16px 18px; color: var(--text); font-size: 14.5px; font-weight: 750; line-height: 1.5; list-style: none; word-break: keep-all; }
.me-card summary::-webkit-details-marker { display: none; }
.me-card summary::before { content: "+ "; color: var(--gold); }
.me-card details[open] summary::before { content: "− "; }
.me-card .detail-body { padding: 0 18px 18px; }
/* 무료 결과의 원문은 유지하고 첫 화면의 읽기 부담만 줄인다. */
.me-card .me-reading { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; }
.me-reading > summary { padding: 13px 0; min-height: 48px; box-sizing: border-box; color: #E0C98F; }
.me-reading > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.me-reading:not([open]) .me-reading-less,
.me-reading[open] .me-reading-more { display: none; }
.me-reading-body { padding: 4px 0 0; }
.me-reading-body > .me-label-sub:first-child { margin-top: 0; }
/* 카드 안의 작은 구분 라벨. 카드 제목보다 확실히 작아야 하고, 색은 한 종류만 쓴다. */
.me-label-sub { display: block; margin: 22px 0 9px; color: #E0C98F; font-size: 13px; font-weight: 800; letter-spacing: .02em; word-break: keep-all; }
.me-card > .me-label + .me-label-sub { margin-top: 0; }
/* 「내가 미뤄둔 힘, 내 그림자」 머리 — 🔁 2026-09-11 사용자 지시(궁합의 「점수가 말해주는 것」 카드 머리를 참고해 예쁘게):
   축 이름 → 나 ↔ 맞은편 두 칸(얼굴 · 이름 · 점수 · 막대). 옛 한 줄(.me-shadow-axis)을 대신한다. */
/* 🔁 같은 날 다시(사용자: 「너무 못생겼다」): 두 칸 타일 → 가운데 정렬 한 판. 맞은편(그림자)은 흐리게. */
.sh-head { margin: 0 0 24px; padding: 18px 14px 16px; border: 1px solid rgba(var(--gold-rgb),.22); border-radius: 18px; background: linear-gradient(180deg, rgba(var(--gold-rgb),.08), rgba(var(--white-rgb),.015)); text-align: center; }
.sh-axis { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(var(--gold-rgb),.14); color: #E0C98F; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.sh-row { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 4px; margin-top: 14px; }
.sh-who { display: flex; flex-direction: column; align-items: center; min-width: 0; }
/* 🔁 2026-09-11 사용자 지시: 맞은편도 흐리게 하지 않고 원색 그대로. 워리어·혁명가는 app.js가 --img-scale 1.1을 준다. */
.sh-who img { width: 64px; height: 74px; object-fit: contain; transform: scale(var(--img-scale,1)); transform-origin: center bottom; }
.sh-role { margin-top: 6px; color: var(--dim); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.sh-name { margin-top: 2px; color: var(--text); font-size: 17px; font-weight: 900; letter-spacing: -.02em; }
.sh-pts { margin-top: 4px; color: var(--dim); font-size: 12.5px; font-weight: 700; }
.sh-pts b { margin-right: 1px; color: #F6F2EA; font-size: 22px; font-weight: 900; }
.sh-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 2px; }
.sh-arrow { color: rgba(var(--gold-rgb),.85); font-size: 20px; line-height: 1; }
.sh-mid-label { color: var(--dim); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.sh-track { margin-top: 14px; }
.sh-head + .me-label-sub { margin-top: 0; }
/* 결제 대기 · 「결제했는데 아직 잠겨 있나요?」의 무통장입금 안내(2026-09-11 사용자 지시). */
.pay-wait-note { margin: 8px 0 0; color: rgba(var(--text-rgb),.66); font-size: 12.5px; line-height: 1.65; word-break: keep-all; }
.pay-faq { margin: 12px 0 0; border: 1px solid var(--border); border-radius: 12px; background: rgba(var(--white-rgb),.03); text-align: left; }
.pay-faq summary { padding: 11px 14px; color: var(--text); font-size: 13px; font-weight: 800; line-height: 1.5; cursor: pointer; list-style: none; word-break: keep-all; }
.pay-faq summary::-webkit-details-marker { display: none; }
.pay-faq summary::after { content: " +"; color: var(--gold); }
.pay-faq[open] summary::after { content: " −"; }
.pay-faq-body { padding: 0 14px 12px; color: rgba(var(--text-rgb),.8); font-size: 12.5px; line-height: 1.75; word-break: keep-all; }
.pay-faq-body p { margin: 0 0 8px; }
.pay-faq-body b { color: #F6F2EA; font-weight: 800; }
.pay-faq-body ul { margin: 0; padding-left: 18px; }
.pay-faq-body a { color: var(--gold); }
/* 「조금 꺼내 쓰기」 — 이 카드의 결론이라 금색 선으로 한 번 띄운다. */
.shadow-try { padding: 14px 16px; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; background: rgba(var(--gold-rgb),.07); }
@media (max-width: 380px) { .shadow-num b { font-size: 23px; } .shadow-arch { font-size: 15px; } }
.me-what + .me-copy { margin-top: 0; }
.me-note { margin: 0 0 10px; color: rgba(var(--text-rgb),.62); font-size: 13.5px; line-height: 1.65; word-break: keep-all; }
.me-card-scene { border-color: rgba(224,201,143,.35); background: rgba(224,201,143,.05); }
/* 같은 원형끼리 비교(2026-09-11, 무료) — 「나의 8원형 선택률」 아래. */
.peer-block { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.peer-line { margin: 12px 0 0; color: rgba(var(--text-rgb),.86); font-size: 14.5px; line-height: 1.8; word-break: keep-all; }
.peer-line b { color: #F6F2EA; font-weight: 800; }
.peer-line small { color: var(--dim); font-size: 12.5px; font-weight: 600; }
/* 「나의 네 저울」(2026-09-11, 유료) — 축마다 가운데에서 양쪽으로 뻗는 막대. */
.scale-intro { margin: 0 0 18px; color: rgba(var(--text-rgb),.78); font-size: 14px; line-height: 1.75; word-break: keep-all; }
.scale-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.scale-row { padding: 14px 15px 13px; border: 1px solid var(--border); border-radius: 15px; background: rgba(var(--white-rgb),.03); }
.scale-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.scale-axis { color: #E0C98F; font-size: 13px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.scale-lean { color: var(--text); font-size: 14px; font-weight: 800; text-align: right; word-break: keep-all; }
.scale-ends { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; color: rgba(var(--text-rgb),.82); font-size: 13px; font-weight: 700; }
.scale-ends b { color: #F6F2EA; font-weight: 900; }
.scale-track { position: relative; display: flex; height: 8px; margin-top: 7px; border-radius: 999px; background: rgba(var(--white-rgb),.07); overflow: hidden; }
.scale-track .half { position: relative; flex: 1 1 50%; }
.scale-track .half i { position: absolute; top: 0; bottom: 0; background: rgba(var(--text-rgb),.4); }
.scale-track .half.l i { right: 0; border-radius: 999px 0 0 999px; }
.scale-track .half.r i { left: 0; border-radius: 0 999px 999px 0; }
.scale-track .half.is-win i { background: var(--gold); }
.scale-track::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: rgba(var(--text-rgb),.35); }
.scale-phr { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; color: var(--dim); font-size: 12px; font-weight: 600; }
/* 「16문항에서 내가 고른 것」 — 네 태도 2×2 칸 (2026-09-11). 가장 많이 고른 칸만 금색. */
.picks-lead { margin: 0 0 18px; color: rgba(var(--text-rgb),.9); font-size: 15px; line-height: 1.8; word-break: keep-all; }
.picks-lead b { color: #F6F2EA; font-weight: 800; }
.picks-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.picks-tile { display: flex; flex-direction: column; min-width: 0; padding: 14px 14px 13px; border: 1px solid var(--border); border-radius: 16px; background: rgba(var(--white-rgb),.03); }
.picks-tile.is-top { border-color: rgba(var(--gold-rgb),.45); background: rgba(var(--gold-rgb),.08); }
.picks-verb { color: rgba(var(--text-rgb),.78); font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; word-break: keep-all; }
.picks-tile.is-top .picks-verb { color: #E0C98F; }
.picks-count { display: flex; align-items: baseline; gap: 3px; margin-top: 6px; }
.picks-count b { color: #F6F2EA; font-size: 30px; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.picks-count small { color: var(--dim); font-size: 12.5px; font-weight: 700; }
.picks-bar { display: block; height: 6px; margin-top: 10px; border-radius: 999px; background: rgba(var(--white-rgb),.08); overflow: hidden; }
.picks-bar i { display: block; height: 100%; border-radius: inherit; background: rgba(var(--text-rgb),.38); }
.picks-tile.is-top .picks-bar i { background: var(--gold); }
/* 닮은꼴 둘은 늘 두 줄로 쌓는다 — 한 줄에 두면 「이노센트 0 · 케어기버 6」이 폰 폭에서 서로 겹쳤다. */
.picks-pair { display: flex; flex-direction: column; gap: 5px; margin-top: 11px; }
.picks-who { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--dim); font-size: 12px; font-weight: 700; white-space: nowrap; }
.picks-who img { flex: 0 0 auto; width: 22px; height: 25px; object-fit: contain; }
.picks-who b { margin-left: auto; color: rgba(var(--text-rgb),.85); font-weight: 800; }
/* 무료로 통째 여는 유료 원고 한 장. 잠금이 아니라 「미리 읽기」라는 딱지다(2026-09-09). */
.me-card-preview { border-color: rgba(var(--gold-rgb),.34); }
.me-preview-tag { display: inline-block; margin: 4px 0 20px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(var(--gold-rgb),.38); background: rgba(var(--gold-rgb),.1); color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .01em; word-break: keep-all; }
/* 목록(신호 3가지·미션·하면 안 되는 말)도 본문과 같은 크기로 읽힌다. */
.me-card .plain-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.me-card .plain-list li { position: relative; padding: 13px 16px 13px 34px; border: 1px solid var(--border); border-radius: 13px; background: rgba(var(--white-rgb),.025); color: rgba(var(--text-rgb),.88); font-size: 14px; line-height: 1.68; word-break: keep-all; }
.me-card .plain-list li::before { content: ""; position: absolute; left: 16px; top: 22px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.me-card .plain-list li strong { color: #F6F2EA; font-weight: 750; }
/* 결제 대기 카드 · 하단 고정 바 · 주문번호 연결 (궁합과 같은 흐름, 이 화면 팔레트) */
.pay-wait { margin: 0 0 14px; padding: 16px 16px 14px; border: 1px solid var(--border); border-radius: 14px; background: rgba(var(--white-rgb),.03); }
.pay-wait-head { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 15px; }
.pay-wait-spinner { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%; border: 3px solid rgba(125,189,125,.25); border-top-color: #7DBD7D; animation: paywait-spin 1s linear infinite; }
@keyframes paywait-spin { to { transform: rotate(360deg); } }
.pay-wait p { margin: 10px 0 0; color: rgba(var(--text-rgb),.78); font-size: 13px; line-height: 1.65; word-break: keep-all; }
.pay-wait-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pay-wait-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; background: rgba(var(--white-rgb),.05); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 800; text-decoration: none; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .pay-wait-spinner { animation: none; } }
/* 2026-09-07 재설계: 990원 하단 고정 바는 뺐다. 잠금은 화면 끝의 목차 카드(.me-gate) 한 곳. */
/* 관문은 광고판이 아니다(2026-09-08 밤 3차 사용자 지적).
   금색 테두리 3px + 리본은 「여기서 팝니다」라고 소리쳐서, 읽던 사람이 거기서 멈췄다.
   지금은 다른 카드와 같은 상자에 위쪽 금색 선 한 줄만 둔다. 눈에 띄는 건 버튼 하나면 충분하다.
   되돌리지 말 것 — 예전의 금색 액자는 2026-09-08 밤에 사용자가 직접 빼라고 했다. */
.me-gate { position: relative; margin: 18px 0 4px; padding: 0; border: 1px solid rgba(224,201,143,.22); border-radius: 22px;
  background: var(--bg2); box-shadow: none; overflow: hidden; }
.me-gate::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, rgba(224,201,143,0), var(--gold) 22%, #e0c98f 50%, var(--gold) 78%, rgba(224,201,143,0)); }
.me-gate-inner { position: relative; padding: clamp(24px,4.8vw,32px) clamp(20px,4.5vw,30px); border-radius: 22px; background: none; }
.me-gate h4 b { color: var(--gold); font-weight: 900; }
/* 이 카드에서는 h4가 제목이다. 라벨은 그 위의 작은 눈썹으로 되돌린다(제목이 둘이면 둘 다 안 읽힌다). */
.me-gate h4 { margin: 0 0 12px; color: var(--text); font-size: clamp(20px, 3.8vw, 25px); font-weight: 900; letter-spacing: -.035em; line-height: 1.3; text-align: center; }
.me-gate-tochead { margin: 4px 0 10px; color: rgba(224,201,143,.85); font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.me-gate-toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.me-gate-toc li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; border: 1px solid rgba(224,201,143,.16); border-radius: 12px; background: rgba(0,0,0,.28); color: var(--text); font-size: 14.5px; line-height: 1.45; word-break: keep-all; }
.me-gate-toc li .n { flex: 0 0 auto; margin-top: 1px; color: var(--gold); font-size: 12px; font-weight: 900; }
.me-gate-toc li .t { flex: 1; min-width: 0; display: block; font-weight: 700; }
.me-gate-toc li .t em { display: block; margin-top: 3px; color: rgba(var(--text-rgb),.52); font-size: 12.5px; font-style: normal; font-weight: 500; line-height: 1.5; }
.me-gate-toc li.is-open { color: rgba(var(--text-rgb),.6); }
.me-gate-toc li.is-open .n { color: rgba(224,201,143,.6); }
.me-gate-toc li .tag { margin-left: auto; flex: 0 0 auto; color: rgba(224,201,143,.8); font-size: 11.5px; font-weight: 800; }
/* 관문 버튼 (2026-09-09 재디자인 — 금색 그라데이션이 싸구려로 보인다는 지적).
   어두운 본문 위에서 **가장 밝은 것 하나**가 이 버튼이면 눈이 먼저 간다. 크림 알약 + 검정 글자.
   다른 시안으로 바꾸려면 background/color/border 세 줄만 갈아끼우면 된다:
     A 궁합과 같은 결  background:linear-gradient(110deg,#6953D7,#A84DA8 50%,#F06D88); color:#fff;
     B 딥 인디고+금테  background:linear-gradient(160deg,#1C1B2E,#15141F); color:var(--text); border:1.5px solid rgba(var(--gold-rgb),.55);
     C 잉크+금색 글자  background:#12131B; color:#E4C88C;
     E 금색 아웃라인   background:rgba(var(--gold-rgb),.07); color:#E4C88C; border:1.5px solid rgba(var(--gold-rgb),.5); */
/* 🔁 2026-09-13 사용자 지시: 크림 → 하단 바와 같은 보라·분홍(시안 A). 하단 바가 개인 심화 바가 되면서 같은 색으로 맞췄다. */
.me-gate-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 17px 22px; border: 1px solid rgba(var(--white-rgb),.22); border-radius: 999px; background: linear-gradient(110deg,#6953D7 0%,#A84DA8 50%,#F06D88 100%); background-origin: border-box; color: #fff; text-align: left; cursor: pointer; font: inherit; box-shadow: 0 12px 30px rgba(0,0,0,.45); transition: transform .18s ease, filter .18s ease; }
.me-gate-btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.me-gate-btn span { font-size: 16.5px; font-weight: 900; }
.me-gate-btn strong { flex: 0 0 auto; font-size: 16px; font-weight: 950; }
/* 정가/특가 표기 (2026-09-09). 정가는 작게 줄 긋고, 특가는 그대로 굵게. */
.me-gate-btn strong s { margin-right: 5px; color: rgba(255,255,255,.62); font-size: 12px; font-weight: 700; text-decoration: line-through; }
.me-gate-btn strong b { font-weight: 950; }
/* 두 칸 다 한 줄로 둔다. 좁은 화면에서는 나란히가 아니라 위아래로 — 375px에서 「잠긴 해설 열기」와
   값이 각자 두 줄로 쪼개져 있었다(2026-09-10 밤 사용자 지적). 쌓으면 무엇을/얼마에가 한 줄씩이 된다. */
.me-gate-btn span, .me-gate-btn strong { white-space: nowrap; }
@media (max-width: 430px) {
  /* 2026-09-10 밤 사용자 지적(「모바일에서 너무 심하게 커 보인다」): 99px → 약 68px. 두 줄 쌓기는 그대로, 여백·글자만 줄였다. */
  .me-gate-btn { flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin-top: 16px; padding: 11px 14px; text-align: center; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
  .me-gate-btn span { font-size: 14.5px; line-height: 1.3; }
  .me-gate-btn strong { font-size: 16.5px; line-height: 1.3; }
  .me-gate-btn strong s { font-size: 11px; }
}
/* 줄 그은 정가는 할인가 **위**에 둔다(2026-09-10 저녁 사용자 지시). 옆에 두면 두 숫자가 한 줄에 붙어
   어느 쪽을 내는지 흘깃 봐서는 안 읽힌다 — 실제로 결과 화면 버튼에서 사용자가 3,900원으로 읽었다. */
.me-pdf-price { display: block; text-align: center; line-height: 1.35; }
/* 지금 궁합에서 빠져나가는 길. 위의 「궁합 결과 보기」와 같은 급이 되면 둘 다 안 눌린다 — 글자 링크로만. */
.pair-exits { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
.pair-exits[hidden] { display: none; }
.pair-exits a { color: rgba(var(--text-rgb),.6); font-size: 12.5px; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(var(--text-rgb),.22); text-underline-offset: 3px; }
.pair-exits a:hover { color: var(--text); }
/* 정가를 조금 키웠다(2026-09-10 밤 사용자 지적: 너무 작아서 할인가가 정가처럼 보였다). */
.me-pdf-price s { display: block; margin: 0 0 2px; color: rgba(var(--text-rgb),.5); font-size: 13.5px; font-weight: 700; text-decoration: line-through; }
.me-gate-btn.is-soon { background: rgba(var(--white-rgb),.08); color: rgba(var(--text-rgb),.7); box-shadow: none; cursor: default; }
/* 목차 카드가 화면에 있는 동안은 궁합 하단 바를 숨긴다 — 결제 버튼 둘이 겹쳐 보이면 둘 다 떨어진다. */
body.my-gate-onscreen .pair-sticky { display: none; }
/* 결제 확인 축하 창 (2026-09-08) */
.paid-splash { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; background: rgba(10, 9, 16, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.paid-splash[hidden] { display: none; }
body.paid-splash-open { overflow: hidden; }
.paid-splash-card { width: min(100%, 420px); padding: 30px 26px 24px; border: 1px solid rgba(224,201,143,.22); border-radius: 22px; background: var(--bg2); text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,.5); animation: paid-splash-pop .45s cubic-bezier(.22,1.4,.36,1); }
@keyframes paid-splash-pop { from { transform: translateY(16px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .paid-splash-card { animation: none; } }
.paid-splash-burst { font-size: 40px; line-height: 1; }
.paid-splash-kicker { margin: 12px 0 0; color: var(--gold); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.paid-splash-card h3 { margin: 8px 0 0; color: var(--text); font-size: clamp(19px, 4vw, 23px); font-weight: 800; letter-spacing: -.03em; line-height: 1.35; word-break: keep-all; }
.paid-splash-copy { margin: 12px 0 0; color: rgba(var(--text-rgb),.78); font-size: 13.5px; line-height: 1.7; word-break: keep-all; }
.paid-splash-actions { display: grid; gap: 8px; margin: 18px 0 0; }
.paid-splash-actions button { min-height: 48px; padding: 13px 14px; border: 1px solid rgba(var(--white-rgb),.22); border-radius: 12px; background: transparent; color: var(--text); font: 800 14.5px/1.2 inherit; cursor: pointer; }
.paid-splash-note { margin: 12px 0 0; color: rgba(var(--text-rgb),.5); font-size: 12px; line-height: 1.6; word-break: keep-all; }
.paid-splash-minor { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 16px; }
.paid-splash-minor button { padding: 4px 2px; border: 0; background: none; color: rgba(var(--text-rgb),.55); font: 700 12.5px/1.4 inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* 「조심할 점」 상자 아래에 가운데 정렬로 둔다(2026-09-09 사용자 요청). inline-block이라 부모의 text-align이 가운데를 만든다. */
.rarity-line { margin: 14px auto 0; display: table; padding: 7px 13px; text-align: center; border-radius: 999px; border: 1px solid rgba(var(--gold-rgb),.3); background: rgba(var(--gold-rgb),.08); color: rgba(var(--text-rgb),.85); font-size: 13px; font-weight: 700; line-height: 1.5; word-break: keep-all; }
.rarity-line b { color: var(--gold); font-weight: 900; }
.rarity-line[hidden] { display: none; }
/* 2026-09-11: 「이어서 읽기」는 산 것을 여는 문 — 관문 버튼(.me-gate-btn)과 같은 크림 알약. 금색 그라데이션은 테스트 시작에만 쓴다. */
.paid-splash-go { width: 100%; margin-top: 10px; min-height: 54px; padding: 15px 18px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; background: linear-gradient(180deg, #FBF7EE, #EDE6D6); color: #171410; box-shadow: 0 12px 30px rgba(0,0,0,.45); font: 900 16px/1.2 inherit; cursor: pointer; }
/* 무료로 이미 읽은 장 표시 (2026-09-09) */
/* 제목 칸(.t) 안에서 설명 아래 줄에 선다. flex 형제로 두면 제목 너비를 뺏어 제목이 쪼개진다. */
.me-gate-toc .read { display:inline-block; margin-top:7px; padding:4px 9px; border-radius:999px; background:rgba(var(--gold-rgb),.14); color:var(--gold); font-size:10.5px; font-weight:900; white-space:nowrap; }
.me-gate-note { margin: 10px 0 0; color: rgba(var(--text-rgb),.55); font-size: 12px; line-height: 1.6; word-break: keep-all; text-align: center; }
/* 친구 궁합으로 한 장씩 열기 (2026-09-12). 관문 안, 제목과 목차 사이. 결제 버튼과 경쟁하지 않게 테두리만 쓴다 — 금색 채움은 결제 버튼 하나뿐이다. */
.me-friend { margin: 24px 0 0; /* 2026-09-13: 결제 버튼 아래로 내려서 위쪽 여백을 준다 */ padding: 22px 18px 20px; border: 1px solid rgba(224,201,143,.2); border-radius: 18px;
  background: radial-gradient(120% 85% at 50% 0%, rgba(var(--gold-rgb),.13), rgba(var(--gold-rgb),.03) 62%), rgba(0,0,0,.2); text-align: center; }
.me-friend-kicker { margin: 0 0 8px; color: var(--gold); font-size: 11.5px; font-weight: 900; letter-spacing: .1em; }
.me-friend-head { margin: 0 0 22px; color: rgba(var(--text-rgb),.82); font-size: 15.5px; font-weight: 700; line-height: 1.55; letter-spacing: -.02em; word-break: keep-all; }
.me-friend-head b { color: var(--text); font-weight: 900; }
/* 도장판 — 도장 셋을 잇는 줄. 금색 부분(::after)이 --done만큼 차오른다. 줄은 첫 도장 가운데에서 끝 도장 가운데까지. */
.me-stamps { position: relative; list-style: none; margin: 0 auto 18px; padding: 0; max-width: 300px; display: grid; grid-template-columns: repeat(3, 1fr); }
.me-stamps::before, .me-stamps::after { content: ""; position: absolute; top: 22px; left: calc(100% / 6); height: 2px; border-radius: 2px; }
.me-stamps::before { right: calc(100% / 6); background: rgba(224,201,143,.16); }
.me-stamps::after { width: calc((100% - 100% / 3) * var(--done, 0)); background: var(--gold); }
.me-stamp { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.me-stamp-dot { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font-size: 18px; font-weight: 900; line-height: 1; }
.me-stamp.is-wait .me-stamp-dot { border: 1.5px dashed rgba(224,201,143,.32); background: #1a1d26; color: rgba(224,201,143,.45); font-size: 14px; }
.me-stamp.is-ready .me-stamp-dot { border: 1.5px solid var(--gold); background: #231f17; color: var(--gold); font-size: 24px; font-weight: 700;
  box-shadow: 0 0 0 5px rgba(var(--gold-rgb),.13); animation: meStampGlow 2.4s ease-in-out infinite; }
.me-stamp.is-used .me-stamp-dot { background: linear-gradient(180deg, #E8D29C, #C9A969); color: #1a160f; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.me-stamp-label { color: rgba(var(--text-rgb),.42); font-size: 11.5px; font-weight: 800; line-height: 1.3; word-break: keep-all; }
.me-stamp.is-used .me-stamp-label, .me-stamp.is-ready .me-stamp-label { color: var(--gold); }
@keyframes meStampGlow { 50% { box-shadow: 0 0 0 9px rgba(var(--gold-rgb),.04); } }
@media (prefers-reduced-motion: reduce) { .me-stamp.is-ready .me-stamp-dot { animation: none; } }
.me-friend-note { margin: 0; color: rgba(var(--text-rgb),.6); font-size: 13px; line-height: 1.65; word-break: keep-all; }
.me-friend-note b { color: var(--gold); font-weight: 900; }
.me-friend-invite { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; min-height: 44px; padding: 11px 24px;
  border: 1px solid rgba(224,201,143,.5); border-radius: 999px; background: rgba(var(--gold-rgb),.07); color: var(--gold); font: 800 14px/1.2 inherit; cursor: pointer; transition: background .18s ease; }
.me-friend-invite:hover { background: rgba(var(--gold-rgb),.14); }
/* 고를 자리가 있을 때 목차 줄 — 줄 전체가 버튼, 오른쪽에 작은 「+」 하나. */
.me-gate-toc li.is-pickable { cursor: pointer; border-color: rgba(224,201,143,.32); transition: border-color .18s ease, background .18s ease; }
.me-gate-toc li.is-pickable:hover, .me-gate-toc li.is-pickable:focus-visible { border-color: var(--gold); background: rgba(var(--gold-rgb),.08); outline: none; }
.me-gate-toc li.is-busy { opacity: .55; pointer-events: none; }
.me-friend-plus { flex: 0 0 auto; align-self: center; width: 30px; height: 30px; display: grid; place-items: center; border: 1.5px solid var(--gold); border-radius: 50%; color: var(--gold); font-size: 19px; font-weight: 700; line-height: 1; }
.me-gate-toc li.is-friend { border-color: rgba(224,201,143,.28); background: rgba(var(--gold-rgb),.05); }
.me-gate-toc li.is-friend .t { color: rgba(var(--text-rgb),.7); }
/* 재검사 「그때의 나, 지금의 나」 (2026-09-10). 지도 아래 문장 몇 줄이 전부다 — 파는 자리가 아니다. */
.retest-notes { margin-top: 16px; }
.retest-notes p { margin: 0 0 8px; color: rgba(var(--text-rgb),.82); font-size: 15px; line-height: 1.8; word-break: keep-all; }
.retest-notes p:last-child { margin-bottom: 0; }
.retest-notes b { color: var(--text); font-weight: 900; }
.retest-notes em { color: var(--dim); font-size: 13.5px; font-style: normal; line-height: 1.75; }

/* ── 8원형 도감 (2026-09-10) ──────────────────────────────────────────
   🔁 2026-09-11 사용자 지시: 관문 카드 안의 점선 한 줄이던 것을 **바로 아래 별도 카드**로 떼고, 가운데 정렬, 버튼을 예쁘게.
   ⚠️ 그래도 관문의 금색 **채움** 버튼과 같은 급이 되면 둘 다 안 눌린다 — 여기 버튼은 금색 테두리 알약(옅은 채움)까지만. */
.gate-codex-all { padding: 26px 20px 24px; border: 1px solid rgba(var(--gold-rgb),.3); border-radius: 22px; background: linear-gradient(180deg, rgba(var(--gold-rgb),.09), rgba(var(--white-rgb),.015)); text-align: center; }
.gate-codex-kicker { display: block; color: #E0C98F; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }
.gate-codex-all p { margin: 8px 0 0; color: rgba(var(--text-rgb),.8); font-size: 14.5px; line-height: 1.7; word-break: keep-all; }
.gate-codex-all b { color: var(--text); font-weight: 800; }
.gate-codex-all s { color: rgba(var(--text-rgb),.36); }
.gate-codex-price { display: block; margin-top: 12px; color: #F6F2EA; font-size: 28px; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; }
.gate-codex-price b { color: inherit; }
.gate-codex-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 320px; min-height: 52px; margin-top: 18px; padding: 12px 20px; border: 1.5px solid rgba(var(--gold-rgb),.75); border-radius: 999px; background: rgba(var(--gold-rgb),.12); color: #E7CD8E; font: inherit; font-size: 15.5px; font-weight: 900; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.gate-codex-btn:hover { background: rgba(var(--gold-rgb),.2); transform: translateY(-1px); }
/* 「여덟 유형 전부」를 연 사람의 원형 갈아 끼우기 */
/* 히어로 바로 아래에 선다. 4,900원을 낸 사람이 **처음 만나는 것**이라 조용하면 안 된다 —
   사용자가 직접 사보고 「아예 결제가 안 된 줄 알았다」고 했다(2026-09-10 저녁). 금색 테두리로 산 것을 알린다. */
.codex-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin: 0 0 16px; padding: 11px 16px; border: 1px dashed rgba(var(--gold-rgb),.4); border-radius: 14px; color: rgba(var(--text-rgb),.78); font-size: 13px; line-height: 1.6; text-align: center; word-break: keep-all; }
.codex-band b { color: var(--gold); font-weight: 800; }
.codex-band a { color: var(--gold); font-weight: 800; text-decoration: none; white-space: nowrap; }
.codex-switch { margin: 0 0 20px; padding: clamp(16px,3.6vw,20px); border: 1px solid rgba(var(--gold-rgb),.42); border-radius: 18px; background: linear-gradient(180deg, rgba(var(--gold-rgb),.09), rgba(var(--gold-rgb),.03)); }
.codex-switch-label { margin-bottom: 13px; color: rgba(var(--text-rgb),.62); font-size: 13px; font-weight: 700; line-height: 1.6; word-break: keep-all; }
.codex-switch-label b { display: block; margin-top: 3px; color: var(--gold); font-size: 15.5px; font-weight: 900; letter-spacing: -.02em; }
.codex-switch-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.codex-chip { min-height: 40px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px; background: rgba(var(--white-rgb),.04); color: rgba(var(--text-rgb),.78); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.codex-chip.is-on { border-color: rgba(var(--gold-rgb),.45); background: rgba(var(--gold-rgb),.14); color: var(--gold); }
/* 결제한 사람에게만 보이는 「그다음 한 가지」. 한 화면에 하나만 그린다(renderCodexMore). */
.me-codex-more { margin-top: 16px; }
/* 결제한 도감 한 권 아래 두 갈래(2026-09-11): 8유형 전부(금색 테두리) · 다른 원형 하나. */
.me-codex-two { display: grid; gap: 10px; }
.me-codex-link.is-lead { border-color: rgba(var(--gold-rgb),.5); background: rgba(var(--gold-rgb),.09); }
/* 잠긴 화면(관문 바로 아래)의 도감 입구.
   🔁 2026-09-11 사용자 지적(「눈에 안 띄고 어디 있는지도 모르겠다」): 12.5px 흐린 글자 한 줄이던 것을
   캐릭터 일곱 얼굴이 붙은 카드로 바꿨다. 관문보다 조용하게 — 금색 채움 버튼이 아니고 값도 안 적는다(관문이 할 말이다). */
.me-codex-more.is-quiet { margin-top: 18px; }
.me-codex-teaser { flex-wrap: wrap; row-gap: 10px; padding: 16px; border-color: rgba(var(--gold-rgb),.32); background: rgba(var(--gold-rgb),.05); }
.me-codex-faces { display: flex; justify-content: space-between; width: 100%; }
.me-codex-faces img { width: 38px; height: 44px; object-fit: contain; }
.me-codex-teaser > span:not(.me-codex-faces) { flex: 1 1 200px; }
/* 보완·충돌 카드 아래 「○○는 어떤 사람일까?」 — 그 카드가 이미 다른 원형 이름을 부르고 있어서 도감의 문으로 제일 자연스럽다. */
/* 첫 화면 시작 버튼 아래 한 줄. 시작 버튼보다 확실히 조용해야 한다. */
.me-codex-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 15px 16px; border: 1px solid var(--border); border-radius: 14px; background: rgba(var(--white-rgb),.03); color: var(--text); text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.me-codex-link strong { display: block; font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.me-codex-link small { display: block; margin-top: 4px; color: var(--dim); font-size: 12px; line-height: 1.6; word-break: keep-all; }
.me-codex-link small b { color: var(--text); font-weight: 800; }
.me-codex-link small s { color: rgba(var(--text-rgb),.36); }
.me-codex-link em { flex: 0 0 auto; color: var(--gold); font-style: normal; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.claim-form { margin-top: 14px; padding: 16px; border: 1px dashed var(--border); border-radius: 14px; }
.claim-title { margin: 0; color: var(--text); font-size: 14px; font-weight: 900; }
/* 접힌 채로 두되, 눌러서 펼 수 있다는 게 보여야 한다. */
summary.claim-title { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; color: var(--dim); font-weight: 800; text-align: center; }
summary.claim-title::-webkit-details-marker { display: none; }
summary.claim-title::before { content: "?"; flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--border); border-radius: 50%; font-size: 11px; }
.claim-fold[open] summary.claim-title { margin-bottom: 4px; color: var(--text); }
.claim-desc { margin: 6px 0 0; color: var(--dim); font-size: 12px; line-height: 1.6; word-break: keep-all; }
.claim-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 12px; }
@media (max-width: 560px) { .claim-row { grid-template-columns: 1fr; } }
.claim-input { min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(var(--white-rgb),.05); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; }
.claim-input::placeholder { color: rgba(var(--text-rgb),.38); }
.claim-go { min-height: 44px; padding: 10px 14px; border: 0; border-radius: 10px; background: var(--gold); color: #1A0E00; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }
.claim-msg { min-height: 1.3em; margin: 10px 0 0; color: #F2C9BE; font-size: 12.5px; line-height: 1.6; }
.claim-linked-go { display: inline-block; margin-top: 8px; color: var(--gold); font-weight: 800; text-underline-offset: 3px; }
.pay-wait-sibling { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(var(--white-rgb),.12); }
.pay-wait-sibling .paid-splash-go { display: flex; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none; }
.claim-code { margin: 8px 0 0; color: var(--dim); font-size: 12px; }
.claim-code code { padding: 2px 7px; border-radius: 6px; background: rgba(var(--white-rgb),.06); color: var(--text); font: 800 12px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .1em; }
.me-pdf { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
/* 2026-09-10 밤 사용자 지시: 제목·설명은 왼쪽 칸, 표지와 값은 오른쪽 한 기둥(표지 → 정가 → 특가).
   가로 셋(표지·글·값)이던 때는 휴대폰에서 글 칸이 좁아져 설명이 뭉쳐 보였다. 궁합 화면 .pdf-row와 같은 모양이다. */
.me-pdf-link { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 10px; padding: 16px 15px; border: 1px solid var(--border); border-radius: 14px; background: rgba(var(--white-rgb),.03); color: var(--text); text-decoration: none; }
.me-pdf-text { flex: 1 1 auto; min-width: 0; }
.me-pdf-link strong { display: block; font-size: 14px; line-height: 1.4; word-break: keep-all; }
.me-pdf-link small { display: block; margin-top: 5px; color: var(--dim); font-size: 12px; line-height: 1.65; word-break: keep-all; }
.me-pdf-link.is-disabled { opacity: .5; pointer-events: none; }
/* 표지 그림(2026-09-09). 라트피드 상품 페이지의 대표 이미지다. */
.me-pdf-side { flex: 0 0 auto; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.me-pdf-cover { display: block; width: 92px; height: 92px; border-radius: 10px; object-fit: cover; }
.me-pdf-link em { font-style: normal; color: var(--gold); font-size: 14.5px; font-weight: 900; white-space: nowrap; }
@media(max-width:420px) {
  .me-pdf-side { width: 78px; }
  .me-pdf-cover { width: 78px; height: 78px; }
}
/* ── 나에 대한 조금 더 깊은 이야기 ──
   2026-09-08 전면 손질. 예전에는 카드 제목이 11px 금색 대문자 라벨이라 본문(14px)보다 작았고,
   카드 사이 간격이 10px라 열여섯 장이 한 덩어리로 붙어 보였다. 궁합 화면의 규칙을 그대로 가져왔다:
   본문보다 큰 목소리를 내는 건 제목뿐이고, 강조는 색이 아니라 무게로 한다. */
.me-block { margin-bottom: 45px; } /* 2026-09-12 밤 사용자: 한 번 더 ×1.5(30 → 45) */
.me-status { margin: 0 0 14px; padding: 12px 15px; border: 1px dashed var(--border); border-radius: 12px; color: rgba(var(--text-rgb),.75); font-size: 13px; line-height: 1.6; word-break: keep-all; }
.me-grid { display: grid; gap: 45px; }
/* 큰 박스를 걷어냈으므로 카드 하나하나가 chart-block과 같은 급으로 선다(2026-09-08). */
.me-card { padding: clamp(24px, 5vw, 34px); border: 1px solid var(--border); border-radius: 22px; background: var(--bg2); }
/* 이 라벨이 곧 그 카드의 제목이다. 작게 두면 읽는 사람이 무슨 이야기인지 모른 채 본문에 들어간다. */
.me-card .me-label { display: block; margin: 0 0 15px; color: var(--text); font-size: clamp(19px, 3.4vw, 23px); font-weight: 800; letter-spacing: -.032em; line-height: 1.34; text-transform: none; word-break: keep-all; }
.me-card .me-label::before { content: ""; display: block; width: 26px; height: 3px; margin-bottom: 13px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), rgba(var(--gold-rgb),.2)); }
.me-card h4 { margin: 0 0 12px; color: rgba(var(--text-rgb),.92); font-size: 16px; font-weight: 750; line-height: 1.5; word-break: keep-all; }
.me-card .me-what { margin: 0 0 16px; padding: 15px 17px; border-radius: 14px; background: rgba(200,90,70,.13); color: #F5D2C7; font-size: 15.5px; font-weight: 800; line-height: 1.55; letter-spacing: -.02em; word-break: keep-all; }
.me-copy { color: rgba(var(--text-rgb),.88); font-size: 14.5px; line-height: 1.8; word-break: keep-all; }
.me-copy p { margin: 0 0 13px; }
.me-copy p:last-child { margin-bottom: 0; }
/* 강조는 무게로. 금색 글자가 본문 곳곳에 박히면 화면이 얼룩덜룩해진다(궁합 화면에서 배운 것). */
.me-copy strong { color: #F6F2EA; font-weight: 750; }
/* 카드 안에서 쓰는 작은 라벨(브랜드·PDF). 블록 제목은 아래 `.chart-block > .section-head`가 따로 받는다. */
.section-head {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 6px;
}
/* 블록 제목은 이 화면에서 가장 큰 목소리다. 예전엔 11px 대문자 라벨이라 제목이 보이지 않았다
   (2026-09-08 사용자 지적). 궁합 화면(.section h2)과 같은 크기·굵기로 맞췄다. */
.chart-block > .section-head {
  margin-bottom: 12px;
  color: var(--text);
  font-size: clamp(23px, 4.4vw, 30px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.24;
  text-transform: none;
  word-break: keep-all;
}
.chart-block > .section-head::before {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  margin-bottom: 15px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(var(--gold-rgb),.2));
}
.chart-caption {
  margin-bottom: 24px;
  color: rgba(var(--text-rgb),.66);
  font-size: 15px;
  line-height: 1.55;
}
.chart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.chart-name { font-size: 12px; width: 60px; flex-shrink: 0; color: var(--text); font-weight: 600; }
.chart-bar-bg { flex: 1; height: 7px; background: rgba(var(--white-rgb),.06); border-radius: 4px; overflow: hidden; }
.chart-bar-fill { height: 100%; border-radius: 4px; transition: width .65s cubic-bezier(.22,1,.36,1); }
.chart-score {
  width: 44px;
  flex-shrink: 0;
  text-align: right;
  line-height: 1.15;
}
.chart-score strong {
  display: block;
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}
.chart-score span {
  display: block;
  margin-top: 3px;
  color: var(--dim);
  font-size: 9px;
}

/* ════ 관계 ════ */
.relation-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}
/* 2열은 화면이 정말 넓을 때만. 좁은 화면에서 2열로 두면 설명 칸이 100px까지 줄어
   한 줄에 열 글자가 채 안 들어간다(2026-09-08 사용자 지적). */
@media(max-width:660px) { .relation-cards { grid-template-columns: 1fr; } }

/* 관계 카드 */
.rel-card {
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.rel-card.boost { border: 1px solid rgba(110,170,110,.38); background: rgba(110,170,110,.07); }
.rel-card.clash { border: 1px solid rgba(200,90,70,.38); background: rgba(200,90,70,.07); }
/* 닮은꼴(2026-09-12): 좋다/나쁘다가 아니라 은색. 원탁의 닮은꼴 점선과 같은 색 계열이다. 넓은 화면(2열)에서는 세 번째 카드가 한 줄을 다 쓴다. */
.rel-card.twin { border: 1px solid rgba(174,184,204,.38); background: rgba(174,184,204,.07); }
.relation-cards > div:nth-child(3):last-child { grid-column: 1 / -1; }

/* 좌측: 태그 + 이름 + 설명 */
.rel-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 18px 20px 22px;
}
.rel-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.rel-tag.boost { color: #7DBD7D; }
.rel-tag.clash { color: #D07060; }
.rel-tag .dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.rel-tag.boost .dot { background: #7DBD7D; }
.rel-tag.clash .dot { background: #D07060; }
.rel-tag.twin { color: #AEB8CC; }
.rel-tag.twin .dot { background: #AEB8CC; }

.rel-name {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--text);
  margin-bottom: 8px;
}
.rel-desc {
  font-size: 14.5px;
  line-height: 1.72;
  word-break: keep-all;
  color: rgba(var(--text-rgb),.78);
  flex: 1;
}

/* 우측: 캐릭터 이미지 — 하단 정렬 */
.rel-avatar {
  width: 80px;
  height: 80px;
  object-fit: contain;
  object-position: center center;
  image-rendering: pixelated;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
  transform: scale(var(--img-scale,1));
  transform-origin: center center;
  align-self: center;
}

/* ════ CTA (원본 스타일) ════ */
.cta-section {
  background: linear-gradient(135deg, var(--bg2), var(--bg3));
  border: 1.5px solid var(--border);
  border-radius: 20px; padding: 24px;
  margin-bottom: 24px;
}
.cta-section h3 {
  font-size: 15px; font-weight: 800; color: var(--gold);
  margin-bottom: 6px;
}
.cta-section p { font-size: 13px; color: var(--dim); margin-bottom: 18px; line-height: 1.6; }
.cta-products { grid-template-columns: 1fr 1fr; gap: 10px; }
@media(max-width:420px) { .cta-products { grid-template-columns: 1fr; } }

/* ════ 액션 버튼 ════ */


/* ════ Disclaimer ════ */

/* ════ copyright ════ */

/* ── 관계 카드 헤더 (박스 위) ── */
.rel-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  padding-left: 2px;
}
.rel-header .rel-tag { margin-bottom: 0; }
.rel-header .rel-name { margin-bottom: 0; }

.cta-headline {
  font-size: clamp(18px, 5vw, 22px);
  font-weight: 900;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 0;
}
.cta-reason {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(245,248,255,.72);
  line-height: 1.7;
  word-break: keep-all;
}
.cta-reason strong {
  color: rgba(245,248,255,.92);
  font-weight: 750;
}
.cta-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  padding: 16px 18px;
  background: rgba(var(--white-rgb),.03);
  border: 1px solid rgba(var(--white-rgb),.07);
  border-radius: 12px;
}
.cta-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: rgba(245,248,255,.84);
  line-height: 1.55;
}
.cta-check-icon {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 1px;
}
.cta-check-item strong {
  color: var(--text);
  font-weight: 700;
}

/* ── btn-start shimmer ── */

/* ── 결과 액션 버튼 ── */


/* ── 결과 공유하기 — 차분한 slate ── */

/* ── 다시 테스트하기 ── */

/* ══ CTA headline ↔ 체크리스트 여백 ══ */
.cta-iceberg-top { margin-bottom: 20px;   margin-bottom: 20px;
}
.cta-checklist { margin-top: 0; }

/* ══ 금/은 버튼 — shimmer 제거, 입체감으로 ══ */

/* ── CTA 버튼 원본 ── */

/* ── 결과 공유하기 / 다시하기 ── */

/* ── 해시태그 (tagline 바로 아래) ── */

/* ── CTA 버튼 공통 ── */

/* 완전판 — 은색 */

/* 해설서 — 금색 */

/* ── 결과 액션 버튼 ── */

/* ═══ 해시태그 ═══ */

/* ═══ 해시태그 — 캐릭터 주변 산포 ═══ */
.arch-tags {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.arch-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid;
  letter-spacing: -.01em;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  background: rgba(15,17,23,.55);
  pointer-events: auto;
  filter: brightness(1.25);
}
/* 5개 태그 위치 — 캐릭터 주변 */

/* 캐릭터 기준 — 이미지는 가운데 정렬, 좌우에 태그 붙이기 */
/* 캐릭터 이미지 영역: avatar-wrap 기준 가로 중앙 */
/* 왼쪽 2개 */

/* 오른쪽 3개 */

/* 해시태그 — 캐릭터 좌우 바짝 붙이기 */
/* 왼쪽 2개 — 캐릭터 왼쪽 가장자리 바로 옆 */

/* 오른쪽 3개 — 캐릭터 오른쪽 가장자리 바로 옆 */

/* ── 해시태그 float 애니메이션 ── */

/* ══════════════════════════════════════════
   SWEEP SHIMMER — 빛이 쏴지는 효과
   ══════════════════════════════════════════ */

/* ── 테스트 시작하기 버튼 ── */

/* ── CTA 완전판(은) / 해설서(금) 버튼 ── */

/* ── 해시태그 float ── */

/* 지금 위치 + 15% 아래로 이동 */

/* ── pulse glow ── */

.cta-product {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-radius: 14px; padding: 16px 18px; text-decoration: none; border: none;
  transition: transform .22s;
}
.cta-product:hover { transform: translateY(-2px); }

.cta-product.silver {
  background: linear-gradient(135deg, #4E7A92, #84B0C8, #4E7A92);
  animation: pgS 2.4s ease-in-out infinite;
}
.cta-product.silver:hover { filter: brightness(1.1); }
.cta-product.silver .prod-name  { font-size: 14px; font-weight: 900; display: block; margin-bottom: 4px; }
.cta-product.silver .prod-desc  { font-size: 11px; display: block; }

.cta-product.gold {
  background: linear-gradient(135deg, #7A5A10, #C09430, #7A5A10);
  animation: pgG 2.4s ease-in-out infinite;
  animation-delay: .6s;
}
.cta-product.gold:hover { filter: brightness(1.1); }
.cta-product.gold .prod-name  { font-size: 14px; font-weight: 900; display: block; margin-bottom: 4px; }
.cta-product.gold .prod-desc  { font-size: 11px; display: block; }

.cta-product-text { flex: 1; }
.cta-product-arrow { font-size: 18px; flex-shrink: 0; opacity: .8; transition: transform .2s; }
.cta-product:hover .cta-product-arrow { opacity: 1; }

@keyframes tagFloat1 {
  0%, 100% { transform: rotate(-4deg) translateY(0px); }
  50%       { transform: rotate(-4deg) translateY(-6px); }
}
@keyframes tagFloat2 {
  0%, 100% { transform: rotate(3deg) translateY(0px); }
  50%       { transform: rotate(3deg) translateY(-7px); }
}
@keyframes tagFloat3 {
  0%, 100% { transform: rotate(3deg) translateY(0px); }
  50%       { transform: rotate(3deg) translateY(-5px); }
}
@keyframes tagFloat4 {
  0%, 100% { transform: rotate(-3deg) translateY(0px); }
  50%       { transform: rotate(-3deg) translateY(-8px); }
}
@keyframes tagFloat5 {
  0%, 100% { transform: rotate(2deg) translateY(0px); }
  50%       { transform: rotate(2deg) translateY(-6px); }
}

@keyframes sweepShimmer {
  0%   { background-position: -150% center; }
  100% { background-position: 250% center; }
}
.btn-start {
  display: inline-block;
  width: 100%;
  max-width: 320px;
  padding: 17px 32px;
  border-radius: 14px;
  background-image: linear-gradient(
    105deg,
    #9A7010 0%, #D4A020 25%, #F8D840 48%,
    #FFFFFF 50%,
    #F8D840 52%, #D4A020 75%, #9A7010 100%
  );
  background-size: 250% auto;
  animation: sweepShimmer 9.6s ease-in-out infinite;
  color: #1A0E00;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  border: none;
  cursor: pointer;
  font-family: inherit;
  margin-top: 28px;
  box-shadow: 0 4px 20px rgba(180,140,0,.35);
  transition: transform .2s, box-shadow .2s;
}
.btn-start:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(180,140,0,.5);
}

@keyframes pgS {
  0%,100% { box-shadow: 0 0 4px 1px rgba(120,180,220,.12); }
  50%      { box-shadow: 0 0 12px 3px rgba(120,180,220,.4); }
}
@keyframes pgG {
  0%,100% { box-shadow: 0 0 4px 1px rgba(210,160,20,.12); }
  50%      { box-shadow: 0 0 12px 3px rgba(210,160,20,.4); }
}

.result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 52px;
}
.btn-share,
.btn-retry {
  width: 100%;
  padding: 15px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: all .2s ease;
  box-sizing: border-box;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.btn-share {
  background: linear-gradient(180deg, rgba(var(--white-rgb),.10), rgba(var(--white-rgb),.06));
  border: 1.5px solid rgba(var(--white-rgb),.18);
  color: #D7E4F3;
  box-shadow: inset 0 1px 0 rgba(var(--white-rgb),.08), 0 4px 14px rgba(0,0,0,.22);
}
.btn-share:hover {
  background: linear-gradient(180deg, rgba(var(--white-rgb),.14), rgba(var(--white-rgb),.08));
  color: #F1F7FF;
  transform: translateY(-1px);
}
.btn-retry {
  background: linear-gradient(180deg, rgba(var(--gold-rgb),.10), rgba(var(--gold-rgb),.05));
  border: 1.5px solid rgba(var(--gold-rgb),.30);
  color: #DCC897;
  box-shadow: inset 0 1px 0 rgba(var(--white-rgb),.04), 0 4px 14px rgba(0,0,0,.18);
}
.btn-retry:hover {
  border-color: rgba(var(--gold-rgb),.52);
  background: linear-gradient(180deg, rgba(var(--gold-rgb),.14), rgba(var(--gold-rgb),.07));
  color: #F0DCAA;
  transform: translateY(-1px);
}

/* 좌우 여백은 2026-09-09에 1.5배로 벌렸다(사용자 지적: 출처 문단이 화면 끝까지 붙어 답답하다). */
.disclaimer {
  padding: 0 60px;
  margin-top: 12px;
  margin-bottom: 16px;
}
.disclaimer p {
  font-size: 9.5px;
  color: rgba(var(--dim-rgb),.65);
  line-height: 1.75;
  margin: 0;
  text-align: center;
}
/* 원형 이론 — 무료에서 멈추는 사람에게 남는 유일한 알맹이라 본문처럼 읽히게 둔다. */
/* 「원형이 뭔가요」의 상세 이론 펼치기 (2026-09-10 밤).
   **보조 버튼이다** — 결제 버튼과 같은 급으로 보이면 안 되므로 금색 채움이나 그림자를 주지 않는다.
   접힌 상태에서 빈 공간이 남지 않게 패널은 hidden 하나로만 껐다 켠다(높이 애니메이션 없음). */
.theory-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 16px 0 0; padding: 9px 15px;
  border: 1px solid rgba(var(--gold-rgb),.32); border-radius: 999px; background: rgba(var(--gold-rgb),.07);
  color: var(--gold); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.theory-toggle::after { content: "+"; font-size: 14px; opacity: .8; }
.theory-toggle[aria-expanded="true"]::after { content: "\2212"; }
.theory-toggle-end { margin-top: 20px; }
.theory-panel[hidden] { display: none; }
@media (hover: hover) { .theory-toggle:hover { border-color: rgba(var(--gold-rgb),.55); } }
/* 삽화(.theory-figure · .me-figure)는 2026-09-10 밤에 사용자 지시로 전부 뺐다.
   그림을 안 그리므로 규칙도 같이 지웠다 — 되살리려면 app.js의 렌더와 함께 되살린다. */
/* 첫 화면의 「원형이 뭔가요」(2026-09-11 밤). 시작 버튼 아래, 글은 왼쪽 정렬로 읽는다. */
.intro-theory { max-width: 560px; margin: 44px auto 0; padding: 22px 20px 24px; border: 1px solid var(--border); border-radius: 22px; background: var(--bg2); text-align: left; }
.intro-theory > .section-head { margin: 0 0 10px; font-size: clamp(20px, 4vw, 24px); font-weight: 800; letter-spacing: -.03em; }
.intro-theory > .section-head::before { content: ""; display: block; width: 30px; height: 3px; border-radius: 2px; background: var(--gold); margin-bottom: 12px; }
.intro-theory .theory-src { margin-top: 22px; }
/* 홈 「칼 융과 원형」 글자를 흰색으로(2026-09-13 사용자 지시: 「너무 회색이야, 흰색으로 잘 보이게」). 결과 화면의 같은 원고는 그대로다. */
.intro-theory .intro-copy,
.intro-theory .theory-item p,
.intro-theory .theory-more-body p,
.intro-theory .theory-item b,
.intro-theory .theory-more-body b,
.intro-theory > .section-head,
.intro-theory .theory-item h4,
.intro-theory .theory-src h4,
.intro-theory .theory-src p { color: #fff; }
.intro-theory .theory-src p b { color: #fff; }

/* 「나와 궁합을 본 친구」(2026-09-12 되돌림). 예전 보라 배경은 쓰지 않는다 — 보라는 궁합의 눈썹·지도 색으로만 남는다(2026-09-11 규칙). */
.my-pairs { width: 100%; max-width: 420px; margin: 14px auto 6px; padding: 14px 16px 6px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg2); text-align: left; }
.my-pairs[hidden] { display: none; }
.my-pairs-title { margin: 0 0 4px; font-size: 14.5px; font-weight: 800; color: var(--text); }
.my-pair-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid rgba(var(--white-rgb),.07); color: var(--text); text-decoration: none; }
.my-pairs-title + .my-pair-row { border-top: 0; }
.my-pair-row img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.my-pair-who { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.my-pair-who b { font-size: 15px; font-weight: 800; }
.my-pair-who small { font-size: 12.5px; color: rgb(var(--dim-rgb)); }
.my-pair-go { flex: none; font-size: 13.5px; font-weight: 800; color: var(--gold); }
/* 🔁 2026-09-13 사용자 지시(우연히 생긴 궁합을 더 세게 알린다): 아직 안 열어본 궁합이 있으면 금색 「새 궁합 도착」 카드. */
.my-pairs.has-new { padding: 18px 18px 8px; border-color: rgba(var(--gold-rgb),.65); background: linear-gradient(180deg, rgba(var(--gold-rgb),.16), rgba(var(--gold-rgb),.04)); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.my-pairs-kicker { margin: 0 0 5px; color: var(--gold); font-size: 12.5px; font-weight: 900; letter-spacing: .02em; }
.my-pairs.has-new .my-pairs-title { font-size: 17.5px; font-weight: 900; line-height: 1.4; word-break: keep-all; }
.my-pairs-sub { margin: 5px 0 8px; color: rgba(var(--text-rgb),.72); font-size: 13px; line-height: 1.6; word-break: keep-all; }
.my-pairs-sub + .my-pair-row { border-top: 0; }
.my-pair-new { margin-left: 6px; padding: 2px 6px; border-radius: 999px; background: #E5484D; color: #fff; font-style: normal; font-size: 10.5px; font-weight: 900; vertical-align: 2px; }
.my-pair-row.is-new .my-pair-go { padding: 7px 12px; border: 1px solid rgba(var(--gold-rgb),.7); border-radius: 999px; }
/* 원형 설명 카드(2026-09-12 저녁 개고 — 이모지 · 쉬운 제목 · 금색 한 줄 요약 · 짧은 문단) */
.theory { margin-top: 20px; display: grid; gap: 14px; }
.theory-item { padding: 18px 18px 17px; border: 1px solid var(--border); border-radius: 18px; background: rgba(var(--text-rgb),.03); }
.theory-top { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.theory-emo { flex: none; font-size: 22px; line-height: 1; }
.theory-item h4 { margin: 0; font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -.02em; line-height: 1.35; word-break: keep-all; }
.theory-item p { margin: 0; font-size: 14.5px; line-height: 1.85; color: rgba(var(--text-rgb),.8); word-break: keep-all; }
.theory-item p + p { margin-top: 10px; }
.theory-item .theory-key { margin: 0 0 12px; padding: 11px 13px; border-radius: 12px; background: rgba(var(--gold-rgb),.11); color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.6; }
.theory-item b { color: var(--text); font-weight: 800; }
.theory-mores { margin-top: 22px; border-top: 1px solid var(--border); }
.theory-more { border-bottom: 1px solid var(--border); }
.theory-more > summary { list-style: none; cursor: pointer; padding: 15px 0 0; color: var(--gold);
  font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 7px; min-height: 44px; }
.theory-more > summary::-webkit-details-marker { display: none; }
.theory-more > summary::after { content: "+"; margin-left: auto; font-size: 16px; opacity: .7; }
.theory-more[open] > summary::after { content: "\2212"; }
.theory-more-body { padding-bottom: 16px; }
.theory-more-body p { margin: 0 0 11px; font-size: 14.5px; line-height: 1.85; color: rgba(var(--text-rgb),.8); word-break: keep-all; }
.theory-more > summary .theory-emo { margin-right: 8px; font-size: 17px; }
.theory-more-body b { color: rgba(var(--text-rgb),.9); font-weight: 700; }
/* 참고 문헌은 박스 밖, 「원형이 뭔가요」 바로 아래(2026-09-09). 접힘 안에 숨기면 공신력이 안 보인다. */
.me-pdf-note { margin: 0 0 12px; color: rgba(var(--text-rgb),.62); font-size: 13px; line-height: 1.7; word-break: keep-all; }
.me-pdf-note b { color: rgba(var(--text-rgb),.9); font-weight: 800; }
.me-pdf-link small b { color: inherit; font-weight: 800; }
/* 2026-09-10 밤에 접힘 안으로 들어왔다. 박스 밖에 있을 때 쓰던 음수 여백·좌우 패딩은 필요 없어졌다. */
.theory-src { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--border); }
.theory-src h4 { margin: 0 0 8px; color: rgba(var(--text-rgb),.62); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.theory-src p { margin: 0; font-size: 12px; line-height: 1.85; color: rgba(var(--dim-rgb),.8); word-break: keep-all; }
.theory-src p b { color: rgba(var(--text-rgb),.72); font-weight: 700; }
.policy-link { color: rgba(var(--gold-rgb),.9); text-decoration: none; border-bottom: 1px solid rgba(var(--gold-rgb),.35); }
.copyright-note {
  text-align: center;
  font-size: 9px;
  color: rgba(var(--dim-rgb),.55);
  padding: 0 40px 32px;
  line-height: 1.7;
}

.arch-tag:nth-child(1) { top: 40%; animation: tagFloat1 3.2s ease-in-out infinite; }
.arch-tag:nth-child(2) { top: 62%; animation: tagFloat2 3.8s ease-in-out infinite; }
.arch-tag:nth-child(3) { top: 22%; animation: tagFloat3 2.9s ease-in-out infinite; }
.arch-tag:nth-child(4) { top: 46%; animation: tagFloat4 3.5s ease-in-out infinite; }
.arch-tag:nth-child(5) { top: 68%; animation: tagFloat5 4.1s ease-in-out infinite; }

/* ══════════════════════════════════════════
   2026-08-20 UI PATCH
   - intro start button shimmer: ~30% slower
   - result product CTA buttons: unified card design
   ══════════════════════════════════════════ */

/* 결과 페이지 상품 버튼 2종 */
.cta-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

.cta-product,
.cta-product.silver,
.cta-product.gold {
  overflow: hidden;
  padding: 16px 16px 15px 17px;
  border-radius: 15px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  animation: none;
  box-shadow:
    inset 0 1px 0 rgba(var(--white-rgb),.055),
    0 8px 20px rgba(0,0,0,.17);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease;
}

.cta-product::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(var(--white-rgb),.07), transparent 38%, transparent 70%, rgba(var(--white-rgb),.025));
}

.cta-product::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 120px;
  height: 120px;
  right: -58px;
  top: -66px;
  border-radius: 50%;
  filter: blur(26px);
  opacity: .23;
  pointer-events: none;
}

.cta-product.silver {
  background: linear-gradient(145deg, #202B34 0%, #263847 55%, #1C252D 100%);
  border-color: rgba(151,190,210,.32);
}
.cta-product.silver::after { background: #8BC4DD; }

.cta-product.gold {
  background: linear-gradient(145deg, #302817 0%, #44351A 55%, #282116 100%);
  border-color: rgba(213,178,101,.40);
}
.cta-product.gold::after { background: #D9AC52; }

.cta-product:hover,
.cta-product.silver:hover,
.cta-product.gold:hover {
  transform: translateY(-2px);
  filter: none;
  box-shadow:
    inset 0 1px 0 rgba(var(--white-rgb),.08),
    0 12px 28px rgba(0,0,0,.24);
}
.cta-product.silver:hover { border-color: rgba(151,190,210,.56); }
.cta-product.gold:hover   { border-color: rgba(213,178,101,.64); }

.cta-product-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cta-product.silver .prod-name,
.cta-product.gold .prod-name {
  display: block;
  margin: 0 0 5px;
  font-size: 14.5px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -.015em;
}

.cta-product.gold .prod-name   { }

.cta-product.silver .prod-desc,
.cta-product.gold .prod-desc {
  display: block;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 550;
}

.cta-product.gold .prod-desc   { }

.cta-product-arrow,
.cta-product.silver .cta-product-arrow,
.cta-product.gold .cta-product-arrow {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  opacity: .92;
  border: 1px solid;
  transition: transform .2s ease, background .2s ease;
}
.cta-product.silver .cta-product-arrow {
  border-color: rgba(190,222,237,.28);
  background: rgba(170,211,230,.08);
}
.cta-product.gold .cta-product-arrow {
  border-color: rgba(226,192,119,.30);
  background: rgba(226,192,119,.08);
}
.cta-product:hover .cta-product-arrow {
  transform: translateX(2px);
}

@media(max-width: 420px) {
  .cta-products { grid-template-columns: 1fr; gap: 10px; }
  .cta-product,
  .cta-product.silver,
  .cta-product.gold { min-height: 82px; }
}

/* ══════════════════════════════════════════
   2026-08-20 CTA v5 — SAMPLE 03 오로라 그라데이션
   - 개별 완전판: 블루 오로라
   - 8원형 전체 통합본: 골드 오로라
   - 샘플 03의 5초 흐름 속도 그대로
   - 버튼 이모지 제거
   ══════════════════════════════════════════ */
@keyframes ctaAuroraFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.cta-product,
.cta-product.silver,
.cta-product.gold {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-size: 300% 300%;
  animation: ctaAuroraFlow 5s ease infinite;
}

/* SAMPLE 03에는 별도 광선 레이어가 없으므로 이전 장식 제거 */
.cta-product::before,
.cta-product.silver::before,
.cta-product.gold::before,
.cta-product::after,
.cta-product.silver::after,
.cta-product.gold::after {
  content: none;
}

/* SAMPLE 03 — 블루 오로라 */
.cta-product.silver {
  color: #F5F8FF;
  border-color: rgba(181,210,255,.36);
  background-image: linear-gradient(120deg, #2B3851, #536F91, #3C4F70, #7792AF, #2B3851);
  box-shadow: 0 0 24px rgba(125,159,205,.12), 0 8px 20px rgba(0,0,0,.18);
}

/* SAMPLE 03 — 골드 오로라 */
.cta-product.gold {
  color: #FFF7E8;
  border-color: rgba(255,214,122,.42);
  background-image: linear-gradient(120deg, #6A4312, #B37A22, #795016, #D1A54B, #6A4312);
  box-shadow: 0 0 24px rgba(var(--gold-rgb),.12), 0 8px 20px rgba(0,0,0,.18);
  animation-delay: 0s;
}

.cta-product.silver .prod-name { color: #F5F8FF; }
.cta-product.gold .prod-name   { color: #FFF7E8; }

.cta-product.silver .prod-desc { color: rgba(245,248,255,.68); }
.cta-product.gold .prod-desc   { color: rgba(255,247,232,.68); }

.cta-product.silver .cta-product-arrow {
  color: #F5F8FF;
  border-color: rgba(181,210,255,.30);
  background: rgba(181,210,255,.08);
}
.cta-product.gold .cta-product-arrow {
  color: #FFF7E8;
  border-color: rgba(255,214,122,.30);
  background: rgba(255,214,122,.08);
}

.cta-product.silver:hover,
.cta-product.gold:hover {
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════
   2026-08-28 CTA v6 — 유형별 후킹·상품 정보 강화
   ══════════════════════════════════════════ */
.cta-headline {
  text-wrap: balance;
  word-break: keep-all;
}
.cta-product,
.cta-product.silver,
.cta-product.gold {
  min-height: 116px;
  padding-top: 17px;
  padding-bottom: 16px;
}
@media(max-width: 600px) {
  .cta-products {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .cta-product,
  .cta-product.silver,
  .cta-product.gold {
    min-height: 112px;
  }
}

/* ========================================
   Mobile Report Polish v2
   PC styles remain unchanged above 600px
   ======================================== */
@media(max-width:600px){
  html,
  body {
    width: 100%;
    max-width: 100%;
    /* clip이지 hidden이 아니다. overflow-x:hidden은 body를 스크롤 상자로 만들어서
       그 안의 position:sticky(헤더·문항 진행 막대)가 화면에 안 붙고 같이 밀려 올라간다.
       clip은 넘치는 것만 잘라내고 스크롤 상자를 만들지 않아 sticky가 정상으로 동작한다. */
    overflow-x: clip;
  }

  .app {
    width: 100%;
    min-width: 0;
    padding-right: 18px;
    padding-left: 18px;
  }

  #quizView { padding-top: 20px; }
  /* 여기서 padding-top: 20px · margin-bottom: 0 으로 덮으면 붙어 있는 머리가
     너무 두꺼워지고 그림과 붙는다. 기본 규칙(10px/12px)을 그대로 쓴다. */
  .q-visual {
    max-height: none;
    margin-bottom: 18px;
    border-radius: 0;
  }
  .q-situation {
    font-size: 16px;
    line-height: 1.65;
    width: 100%;
    text-align: center;
  }

  /* 시작 화면: 작은 화면에서도 가장자리와 숨 쉴 공간 확보 */
  .intro {
    min-height: calc(100vh - 32px);
    min-height: calc(100svh - 32px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 24px;
    padding-bottom: 56px;
  }
  .intro-brand { margin-bottom: 9px; }
  .intro-title {
    font-size: 30px;
    margin-bottom: 22px;
  }
  .intro-showcase {
    width: 100%;
    max-width: 312px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 12px;
    margin: 0 auto 16px;
  }
  .intro-arch-card {
    min-width: 0;
    gap: 6px;
  }
  .intro-arch-card img {
    width: 54px;
    max-width: 100%;
  }
  .intro-arch-name {
    width: 100%;
    min-width: 0;
    padding: 5px 2px;
    font-size: 9.5px;
    white-space: nowrap;
  }
  .btn-start {
    max-width: 292px;
    margin-top: 22px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  /* 결과 첫 화면: 캐릭터 → 결과명 → 분석 카드 순으로 읽히게 */
  .result { padding-top: 16px; }
  .result-hero {
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
    margin-bottom: 20px;
  }
  .result-avatar-wrap {
    min-height: 218px;
    padding-top: 14px;
    margin-bottom: 0;
    overflow: hidden;
    isolation: isolate;
  }
  .result-avatar {
    height: clamp(174px, 56vw, 198px);
    max-height: 198px;
    max-width: 60%;
  }

  /* 태그는 움직임을 멈추고 캐릭터 바깥에 얇은 장식으로 배치 */
  .arch-tag {
    max-width: 42%;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 9px;
    line-height: 1.35;
    letter-spacing: -.035em;
    opacity: .78;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .arch-tags { z-index: 0; }
  .arch-tag:nth-child(1) { top: 24%; left: 12%; right: auto; }
  .arch-tag:nth-child(2) { top: 57%; left: 10%; right: auto; }
  .arch-tag:nth-child(3) { top: 18%; right: 11%; left: auto; }
  .arch-tag:nth-child(4) { top: 45%; right: 9%; left: auto; }
  .arch-tag:nth-child(5) { top: 70%; right: 12%; left: auto; }

  .result-hero-copy {
    padding: 18px 16px 20px;
  }
  .result-eyebrow {
    margin-bottom: 7px;
    font-size: 10.5px;
  }
  .result-name {
    font-size: 36px;
    line-height: 1.08;
    margin-bottom: 10px;
  }
  .result-tagline {
    max-width: 290px;
    margin: 0 auto;
    font-size: 13px;
    line-height: 1.65;
  }

  /* 강점·매력·조심할 점을 독립된 세로 리포트 카드로 */
  .result-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
  }
  .result-card,
  .result-card.shadow {
    min-height: auto;
    padding: 14px 15px 15px;
    border: 1px solid rgba(var(--white-rgb),.105);
    border-radius: 11px;
    box-shadow: inset 0 1px 0 rgba(var(--white-rgb),.025);
  }
  /* 2026-09-11: 강점·매력 카드의 청록·분홍 띠는 뺐다 — 원형 색도 아닌 색이 카드 테두리에 있었다(「규칙 한 장」: 카드 테두리는 중립). */
  .result-card:nth-child(1),
  .result-card:nth-child(2) {
    border-color: rgba(var(--white-rgb),.105);
    background: rgba(var(--white-rgb),.04);
  }
  .result-card.shadow {
    border-color: rgba(224,144,112,.22);
    border-left: 3px solid #E09070;
    background: linear-gradient(110deg, rgba(224,144,112,.085), rgba(224,144,112,.035));
  }
  .result-card .label {
    margin-bottom: 7px;
    font-size: 11.5px;
    letter-spacing: .08em;
  }
  .result-card:nth-child(1) .label,
  .result-card:nth-child(2) .label { color: rgba(var(--text-rgb),.55); }
  .result-card.shadow .label { color: #E6A084; }
  .result-card .val {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(var(--text-rgb),.94);
  }

  .chart-block { padding: 20px 16px; }

  /* CTA: 문장별 의미가 먼저 읽히게 여백과 대비 정리 */
  .cta-section { padding: 21px 16px; }
  .cta-headline {
    font-size: 20px;
    line-height: 1.38;
  }
  .cta-checklist {
    gap: 0;
    padding: 8px 13px;
  }
  .cta-check-item {
    gap: 9px;
    padding: 5px 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(245,248,255,.86);
  }
  .cta-check-item + .cta-check-item {
    border-top: none;
  }
}
/* PSYKITTY UI PATCH 2026-08-28 */

/* 1) 시작 화면 원형 이름: 캡슐/박스 제거 */
.intro-arch-name {
  min-width: 0;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(var(--text-rgb),.78);
}

/* 2) 결과 화면 해시태그: 캐릭터에서 약 15% 더 멀리 */
.arch-tag:nth-child(1) { right: 75%; }
.arch-tag:nth-child(2) { right: 74%; }
.arch-tag:nth-child(3) { left:  75%; }
.arch-tag:nth-child(4) { left:  76%; }
.arch-tag:nth-child(5) { left:  74%; }

/* 3) 한국어 문항 줄바꿈 개선 */
.q-situation {
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

@media(max-width:600px) {
  /* 모바일: 캐릭터와 좌우 가장자리 사이 중간 지대 */
  .arch-tag {
    max-width: 34%;
  }
  .arch-tag:nth-child(1) { left: 7%; right: auto; }
  .arch-tag:nth-child(2) { left: 6%; right: auto; }
  .arch-tag:nth-child(3) { right: 7%; left: auto; }
  .arch-tag:nth-child(4) { right: 6%; left: auto; }
  .arch-tag:nth-child(5) { right: 8%; left: auto; }

  .q-situation {
    word-break: keep-all;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }
}
/* /PSYKITTY UI PATCH 2026-08-28 */

/* PSYKITTY MOBILE SIZE/READABILITY PATCH 2026-08-28 */
@media(max-width:600px) {
  /* 시작 화면: 빈 공간을 줄이고 핵심 요소를 더 크게 */
  .intro {
    padding-top: 18px;
    padding-bottom: 34px;
  }
  .intro-brand {
    font-size: 15.5px;
    margin-bottom: 10px;
    letter-spacing: .11em;
  }
  .intro-title {
    font-size: 39px;
    line-height: 1.18;
    margin-bottom: 24px;
  }
  .intro-showcase {
    max-width: 338px;
    column-gap: 6px;
    row-gap: 14px;
    margin-bottom: 18px;
  }
  .intro-arch-card { gap: 7px; }
  .intro-arch-card img { width: 62px; }
  .intro-arch-name {
    font-size: 11px;
    line-height: 1.15;
    font-weight: 750;
    color: rgba(var(--text-rgb),.88);
  }

  /* 시작 버튼은 flex 안에서도 정확히 가운데 */
  .btn-start {
    max-width: 320px;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
  }

  /* 검색 문맥용 본문: 남겨두되 UI를 방해하지 않도록 맨 아래에서 작게 */

  /* 결과 차트: 막대보다 텍스트 가독성을 우선 */
  .chart-block { padding: 24px 18px; }
  /* 블록 제목·설명 크기는 기본 규칙의 clamp()가 화면 폭에 맞춰 처리한다.
     여기서로 다시 줄이면 제목이 라벨만 해진다(2026-09-08에 실제로 그랬다). */
  .chart-caption,
  .chart-numbers .chart-caption {
    line-height: 1.65;
    margin-bottom: 20px;
  }
  .chart-row {
    gap: 8px;
    margin-bottom: 11px;
  }
  .chart-name {
    width: 66px;
    font-size: 14.25px;
    line-height: 1.2;
    font-weight: 700;
  }
  .chart-bar-bg { height: 6px; }
  .chart-score { width: 50px; }
  .chart-score strong {
    font-size: 13.25px;
    line-height: 1.15;
  }
  .chart-score span {
    margin-top: 4px;
    font-size: 10.75px;
    color: rgba(var(--text-rgb),.66);
  }

  /* 보완/충돌 관계: 회색기를 줄이고 본문도 조금 키움 */
  .rel-text { padding: 19px 17px 19px 19px; }
  .rel-tag { font-size: 12px; }
  .rel-tag.boost { color: #9AD49A; }
  .rel-tag.clash { color: #E58A7D; }
  .rel-tag.twin { color: #C3CBDA; }
  .rel-desc {
    font-size: 14.5px;
    line-height: 1.72;
    color: rgba(var(--text-rgb),.88);
  }
}
/* /PSYKITTY MOBILE SIZE/READABILITY PATCH 2026-08-28 */

/* PSYKITTY FINISHING PATCH 2026-08-28 */
/* 결과 한줄 설명: 특정 유형에서 한 글자만 외따로 떨어지지 않도록 균형 줄바꿈 */
.result-tagline {
  max-width: 430px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* 시작 화면에도 결과 페이지와 동일한 출처/저작권 문구 배치 */
.intro-footer {
  margin-top: 52px;
}
.intro-footer .disclaimer {
  margin-top: 0;
}

/* 이 줄이 실제로 보일 때만 푸터를 시작 버튼 쪽으로 끌어올린다(46px → 18px, 2026-09-10 저녁 사용자 지시).
   ⚠️ .intro-footer의 기본 여백을 그냥 줄이면 안 된다 — 표본이 30명 미만이거나 값이 안 오면 이 줄은 통째로 숨는데,
      그때는 시작 버튼 바로 밑에 이론 출처 문단이 붙어버린다. 그래서 줄이 뜰 때만 클래스를 붙인다(app-boot.js). */
.intro-footer.has-intro-week { margin-top: 18px; }
/* 「이번 주에 N명이 테스트했어요」 (2026-09-10). 구석의 작은 한 줄이다 — 본문보다 커지면 안 된다.
   예전에 여기 있던 TODAY·TOTAL 방문 수를 대신한다. */
.intro-week {
  margin: 0 0 30px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(var(--dim-rgb), .78);
  font-variant-numeric: tabular-nums;
}
/* 첫 화면 「친구에게 이 테스트 공유하기」 버튼은 2026-09-11에 사용자 지시로 뺐다. */
.intro-footer .intro-week:not([hidden]) { margin-bottom: 14px; }

@media(max-width:600px) {
  /* 상단 제목 묶음에 숨 쉴 공간 추가 */
  .intro {
    padding-top: 60px;
  }

  /* 시작 버튼: 가로 약 20% 축소, 세로 약 10% 확대 */
  .btn-start {
    width: 100%;
    max-width: 256px;
    padding: 18px 22px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 유형명 아래 설명은 가운데에서 2줄이 비슷한 길이로 모이게 */
  .result-tagline {
    width: min(100%, 270px);
    max-width: 270px;
    margin: 0 auto;
    font-size: 13.25px;
    line-height: 1.62;
    text-align: center;
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .intro-footer {
    margin-top: 46px;
  }
  .intro-footer .disclaimer {
    padding: 0 28px;
    margin-bottom: 12px;
  }
  .intro-footer .disclaimer p {
    font-size: 9.5px;
    line-height: 1.65;
    color: rgba(var(--dim-rgb),.56);
  }
  .intro-footer .copyright-note {
    font-size: 10px;
    line-height: 1.65;
    padding: 0 18px 8px;
    color: rgba(var(--dim-rgb),.52);
  }
}
/* /PSYKITTY FINISHING PATCH 2026-08-28 */

/* PSYKITTY SHARE/FOOTER PATCH 2026-08-28 */
/* 결과 페이지 맨 아래 출처 설명은 가운데로 조이지 않고 편하게 읽히도록 */
#resultView > .disclaimer {
  max-width: 520px;
  padding: 0 28px;
  margin-left: auto;
  margin-right: auto;
}
#resultView > .disclaimer p {
  text-align: center;
  line-height: 1.78;
  word-break: keep-all;
}

/* PC에서 기본 공유 기능이 없는 경우에만 뜨는 결과 공유 패널 */
.share-fallback-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(5,7,12,.72);
  backdrop-filter: blur(6px);
}
.share-fallback-backdrop.open { display: flex; }
.share-fallback-panel {
  width: min(92vw, 420px);
  background: #181C27; border: 1px solid rgba(var(--text-rgb),.14);
  border-radius: 18px; padding: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.share-fallback-title {
  font-size: 18px; font-weight: 900; color: var(--text); margin-bottom: 6px;
}
.share-fallback-desc {
  font-size: 12.5px; line-height: 1.6; color: rgba(var(--text-rgb),.68); margin-bottom: 16px;
}
.share-fallback-url {
  width: 100%; border: 1px solid rgba(var(--text-rgb),.12);
  background: rgba(var(--white-rgb),.04); color: rgba(var(--text-rgb),.78);
  border-radius: 10px; padding: 11px 12px; font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 12px;
}
.share-fallback-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.share-fallback-actions button {
  border-radius: 11px; padding: 13px 10px; font: inherit; font-size: 13px; font-weight: 800;
  cursor: pointer; border: 1px solid rgba(var(--text-rgb),.14);
  background: rgba(var(--white-rgb),.07); color: var(--text);
}
.share-fallback-actions .share-copy-link {
  border-color: rgba(var(--gold-rgb),.35); color: #E6D3A5; background: rgba(var(--gold-rgb),.09);
}
.share-fallback-close {
  margin-top: 10px; width: 100%; border: 0; background: transparent;
  color: rgba(var(--text-rgb),.55); font-size: 12px; padding: 8px; cursor: pointer;
}
@media(max-width:600px) {
  #resultView > .disclaimer { padding: 0 20px; }
  #resultView > .disclaimer p { font-size: 9.5px; line-height: 1.78; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* /PSYKITTY SHARE/FOOTER PATCH 2026-08-28 */


/* ══════════ 2 (원래 SEO 메타 뒤에 있던 블록) ══════════ */
/* ══ 개발자용 결과 미리보기 ══ */
.dev-preview-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
}
.dev-preview-toggle {
  appearance: none;
  border: 1px solid rgba(var(--text-rgb),.14);
  background: rgba(30,35,51,.72);
  color: rgba(var(--text-rgb),.60);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.dev-preview-toggle:hover {
  color: rgba(var(--text-rgb),.88);
  border-color: rgba(var(--gold-rgb),.38);
}
.dev-preview-panel {
  display: none;
  width: min(100%, 360px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
  padding: 10px;
  border: 1px solid rgba(var(--text-rgb),.10);
  border-radius: 12px;
  background: rgba(24,28,39,.92);
}
.dev-preview-panel.open { display: grid; }
.dev-preview-type {
  appearance: none;
  border: 1px solid rgba(var(--text-rgb),.10);
  background: rgba(var(--white-rgb),.035);
  color: rgba(var(--text-rgb),.84);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 4px;
  border-radius: 9px;
  cursor: pointer;
}
.dev-preview-type:hover {
  border-color: rgba(var(--gold-rgb),.45);
  background: rgba(var(--gold-rgb),.08);
  color: var(--text);
}
@media (max-width: 420px) {
  .dev-preview-panel { width: min(100%, 330px); gap: 6px; }
  .dev-preview-type { font-size: 10.5px; padding: 8px 2px; }
}

/* ══════════════════════════════════════════
   2026-08-30 CTA FINAL — FILE TAB 16
   - 유형 심화 CTA를 1순위로 유지
   - 공유는 보조 버튼, 재테스트는 텍스트 버튼
   ══════════════════════════════════════════ */
.cta-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
  padding-top: 16px;
  overflow: visible;
}

.cta-product,
.cta-product.silver,
.cta-product.gold {
  position: relative;
  isolation: isolate;
  overflow: visible;
  min-height: 78px;
  padding: 18px 50px 15px 17px;
  border: 1px solid rgba(var(--white-rgb),.13);
  border-radius: 0 11px 11px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-decoration: none;
  animation: none;
  background-size: auto;
  box-shadow: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.cta-product::before,
.cta-product.silver::before,
.cta-product.gold::before {
  content: attr(data-tab);
  position: absolute;
  z-index: 2;
  left: -1px;
  right: auto;
  top: -16px;
  bottom: auto;
  display: block;
  width: auto;
  height: 16px;
  padding: 2px 11px;
  border-radius: 7px 7px 0 0;
  background: #365A78;
  color: #EAF6FF;
  font-size: 8.5px;
  line-height: 12px;
  font-weight: 900;
  letter-spacing: .07em;
  white-space: nowrap;
  pointer-events: none;
}

.cta-product::after,
.cta-product.silver::after,
.cta-product.gold::after { content: none; }

.cta-product.silver {
  color: #F6F8FB;
  border-color: rgba(163,210,248,.22);
  background: #151D2A;
  background-image: none;
}

.cta-product.gold {
  color: #F1D79C;
  border-color: rgba(224,188,107,.23);
  background: #211D15;
  background-image: none;
}

.cta-product.gold::before { background: #86652C; }

.cta-product:hover,
.cta-product.silver:hover,
.cta-product.gold:hover {
  transform: translateY(-2px);
  filter: none;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

.cta-product.silver:hover { border-color: rgba(163,210,248,.42); }
.cta-product.gold:hover { border-color: rgba(224,188,107,.43); }

.cta-product-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cta-product.silver .prod-name,
.cta-product.gold .prod-name {
  margin: 0 0 4px;
  font-size: 15.5px;
  line-height: 1.28;
  font-weight: 900;
  letter-spacing: -.025em;
  color: inherit;
  word-break: keep-all;
}

.cta-product.silver .prod-desc,
.cta-product.gold .prod-desc {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.45;
  font-weight: 550;
  color: inherit;
  opacity: .65;
  word-break: keep-all;
}

.cta-product-arrow,
.cta-product.silver .cta-product-arrow,
.cta-product.gold .cta-product-arrow {
  position: absolute;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--white-rgb),.14);
  border-radius: 9px;
  background: rgba(var(--white-rgb),.045);
  color: inherit;
  font-size: 18px;
  font-weight: 800;
  opacity: 1;
  transition: transform .2s ease;
}

.cta-product:hover .cta-product-arrow {
  transform: translate(3px,-50%);
}

/* 결과 공유하기 — 2026-09-10 밤에 키웠다(사용자: 너무 안 보인다). 공유 링크를 받은 친구가 이제
   「나도 해보기」로 이어지므로, 이 버튼이 곧 새 손님을 데려오는 문이다. 카톡 노랑은 「보내기」로 읽힌다 —
   금색(사세요)·보라(궁합)와 겹치지 않는다. */
.result-actions {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  align-items: center;
  gap: 12px;
  padding: 26px 0 0;
  border-top: 1px solid rgba(var(--white-rgb),.07);
}

/* 결과 이름 바로 아래 공유 두 버튼(2026-09-11). 결제 카드와 몇 화면 떨어져 있다 — 같이 외치지 않는다. */
.hero-share { display: grid; gap: 10px; justify-items: center; width: 100%; max-width: 420px; margin: 22px auto 8px; }
.hero-share[hidden] { display: none; }
.btn-story { width: 100%; max-width: 420px; min-height: 48px; padding: 13px 14px; border: 1px solid rgba(var(--white-rgb),.22); border-radius: 12px; background: transparent; color: var(--text); font: 800 14.5px/1.2 inherit; cursor: pointer; }
.btn-story:hover { border-color: rgba(var(--white-rgb),.4); }
/* 「나와 궁합을 본 친구」(2026-09-11). 궁합은 보라다(금색은 결제). 공유 버튼 바로 아래 조용한 카드. */
/* 🔁 2026-09-13 사용자 지적(PC에서 세로로 꽉 차서 닫기 버튼이 너무 멀다): 그림 높이를 화면 높이에 맞춰 줄이고, 오른쪽 위에 X를 둔다.
   넓은 화면(마우스)에서는 그림 왼쪽 · 글과 버튼 오른쪽으로 나란히 — 닫기가 그림 옆에 온다. */
.story-sheet-card { position: relative; width: min(100%, 360px); padding: 22px 20px 18px; }
.story-sheet-img { display: block; width: auto; max-width: 100%; height: min(54vh, 444px); aspect-ratio: 9 / 16; margin: 14px auto 0; border-radius: 16px; background: var(--bg); object-fit: cover; -webkit-touch-callout: default; }
.story-sheet-x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(var(--white-rgb),.18); border-radius: 50%; background: rgba(0,0,0,.28); color: var(--text); font: 400 20px/1 inherit; font-family: inherit; cursor: pointer; }
.story-sheet-x:hover { border-color: rgba(var(--white-rgb),.4); }
@media (min-width: 720px) and (hover: hover) {
  .story-sheet-card { width: min(100%, 620px); display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas: "img ." "img title" "img copy" "img dl" "img act" "img ."; column-gap: 28px; padding: 26px 28px; text-align: left; }
  .story-sheet-img { grid-area: img; height: min(72vh, 480px); margin: 0; }
  .story-sheet-card h3 { grid-area: title; margin: 0; }
  .story-sheet-card .paid-splash-copy { grid-area: copy; }
  .story-sheet-download { grid-area: dl; justify-self: start; }
  .story-sheet-card .paid-splash-actions { grid-area: act; }
}
.story-sheet-download { display: inline-block; margin-top: 12px; color: var(--gold); font-size: 13px; font-weight: 800; }

.share-nudge {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(var(--text-rgb),.78);
  text-align: center;
  word-break: keep-all;
}

.btn-share {
  width: 100%;
  max-width: 420px;
  min-height: 54px;
  padding: 15px 18px;
  border: 0;
  border-radius: 999px;
  background: #FEE500;
  color: #191600;
  box-shadow: 0 10px 26px rgba(254,229,0,.16);
  font-size: 16px;
  font-weight: 900;
}

.btn-share:hover {
  background: #FFEB3B;
  color: #191600;
  transform: translateY(-1px);
}

/* 🔁 2026-09-13 밤 사용자 지시(「다시 테스트하기 조금만 키워」): 10.5px 흐린 글자 → 13.5px 테두리 알약. 결제 버튼보다는 확실히 조용하다. */
.btn-retry {
  width: auto;
  min-height: 0;
  margin-left: 0;
  padding: 11px 20px;
  border: 1px solid rgba(var(--white-rgb),.16);
  border-radius: 999px;
  background: none;
  color: #B4BDCD;
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 800;
}

.btn-retry:hover {
  border-color: rgba(var(--white-rgb),.32);
  background: none;
  color: #DCE2EC;
  box-shadow: none;
  transform: none;
}

/* 다시 테스트하기 아래 공유 버튼 한 줄(2026-09-13 밤). 브랜드 색은 동그라미 안에만 — 글자는 조용하게. */
.share-row { width: 100%; max-width: 420px; margin-top: 18px; }
.share-row[hidden] { display: none; }
.share-row-label { margin: 0 0 14px; color: var(--dim); font-size: 12.5px; font-weight: 800; text-align: center; }
.share-row-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.share-ic { display: flex; flex-direction: column; align-items: center; gap: 7px; width: auto; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: rgba(var(--text-rgb),.72); font-family: inherit; font-size: 10.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.share-ic > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.share-ic svg { width: 23px; height: 23px; }
.share-ic:focus-visible { outline: none; }
.share-ic:focus-visible > span { outline: 2px solid var(--gold); outline-offset: 2px; }
.share-ic:active > span { transform: scale(.94); }
.si-kakao { background: #FEE500; }
.si-insta { background: radial-gradient(circle at 30% 107%, #FDD66A 0%, #F9A13B 28%, #EE2A7B 55%, #6228D7 100%); }
.si-x, .si-threads { background: #000; box-shadow: inset 0 0 0 1px rgba(var(--white-rgb),.2); }
.si-plain { background: #2A2F3C; }
/* 「결제했는데 아직 잠겨 있나요?」가 맨 아래(공유 버튼 아래)로 왔다(2026-09-13 밤). */
.result-actions .claim-form { width: 100%; max-width: 520px; margin-top: 22px; }

@media (max-width: 600px) {
  .cta-products {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .cta-product,
  .cta-product.silver,
  .cta-product.gold {
    min-height: 78px;
  }
}

@media (max-width: 360px) {
  .btn-share { font-size: 15px; }
}
.cta-product.is-disabled { opacity: .58; cursor: not-allowed; transform: none; filter: grayscale(.22); }
.cta-products.single { grid-template-columns: 1fr; }
.cta-products.stacked { grid-template-columns: 1fr; gap: 28px; }

/* 「이 기기에서 본 결과」 목록·코드 입력창의 스타일은 my-results.html 로 옮겼다(2026-09-08). */

/* 첫 화면 랜딩·「시작하기 전에」 안내 한 장은 2026-09-09에 뺐다(마크업·JS·CSS 모두). */

/* ══ 두 사람 궁합 · OPTION 01 풀폭 오로라 ══ */
.pair-hero-launch { margin: 0 0 24px; }
.pair-sticky { position: fixed; left: 0; right: 0; bottom: var(--psy-tab-h, 0px); z-index: 30; padding: 0 12px max(10px, env(safe-area-inset-bottom)); pointer-events: none; }
.pair-sticky[hidden] { display: none !important; }
.pair-sticky > button {
  pointer-events: auto; width: min(100%, 520px); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px; border: 1px solid rgba(var(--white-rgb),.22); border-radius: 999px; color: #fff; font-family: inherit; text-align: left; cursor: pointer;
  background: linear-gradient(110deg,#6953D7 0%,#A84DA8 50%,#F06D88 100%); background-origin: border-box; box-shadow: 0 12px 30px rgba(0,0,0,.42), 0 4px 14px rgba(163,77,173,.3);
}
.pair-sticky > button span { font-size: 13px; font-weight: 800; color: rgba(var(--white-rgb),.9); }
.pair-sticky > button strong { flex: 0 0 auto; font-size: 13px; font-weight: 900; }
/* 친구가 보낸 공유 링크로 온 사람의 「나도 해보기」 (2026-09-10 밤) */
.shared-try { margin: 8px 0 28px; padding: clamp(24px, 5vw, 32px) clamp(20px, 4.5vw, 30px); border-radius: 22px; background: var(--bg2); border: 1px solid rgba(var(--white-rgb),.12); text-align: center; }
.shared-try-kicker { font-size: 12px; font-weight: 800; color: #a99cd8; margin-bottom: 8px; }
.shared-try-title { font-size: clamp(22px, 4.6vw, 27px); font-weight: 800; color: var(--text); margin: 0 0 10px; }
.shared-try-copy { font-size: 14.5px; line-height: 1.75; color: rgba(var(--text-rgb),.72); margin: 0 0 22px; word-break: keep-all; }
.shared-try-btn { width: 100%; max-width: 360px; padding: 16px 18px; border: 1px solid rgba(var(--white-rgb),.22); border-radius: 999px; font-family: inherit; font-size: 16px; font-weight: 900; color: #fff; cursor: pointer; background: linear-gradient(110deg,#6953D7 0%,#A84DA8 50%,#F06D88 100%); box-shadow: 0 10px 26px rgba(163,77,173,.28); }
.result-actions[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .pair-sticky > button { transition: transform .2s ease; } .pair-sticky > button:hover { transform: translateY(-2px); } }
.pair-hero-launch[hidden],
.pair-invite-banner[hidden],
.compatibility-card[hidden],
#compatibilityCard [hidden],
#pairInviteBanner [hidden] { display: none !important; }
.pair-hero-launch > button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  /* 2026-09-11: 보라→분홍 그라데이션을 걷어냈다. 궁합 두 문(.pair-door)과 같은 금색 톤 — 무료 CTA라 크림(결제 색)은 쓰지 않는다. */
  border: 1px solid rgba(var(--gold-rgb),.38);
  border-radius: 18px;
  color: var(--text);
  text-align: left;
  background: rgba(var(--gold-rgb),.08);
  box-shadow: none;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.pair-hero-launch > button::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -35px;
  bottom: -62px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(var(--gold-rgb),.08);
}
.pair-hero-launch > button:hover { transform: translateY(-2px); border-color: rgba(var(--gold-rgb),.6); background: rgba(var(--gold-rgb),.12); }
.pair-hero-launch > button:disabled { opacity: .72; cursor: wait; transform: none; }
/* 얼굴 둘(.pair-cta-face)과 원 화살표(.pair-cta-arrow)는 2026-09-13 사용자 지시(「단순하게」)로 뺐다. */
.pair-hero-launch > button[hidden], .pair-name-form[hidden] { display: none !important; }
.pair-cta-copy { min-width: 0; flex: 1; }
.pair-cta-copy strong { display:block; font-size:16px; line-height:1.35; letter-spacing:-.025em; }
.pair-cta-copy > span { display:block; margin-top:3px; color:rgba(var(--text-rgb),.62); font-size:11.5px; line-height:1.5; }
.pair-cta-copy .pair-cta-action { margin-top:8px; color:var(--gold); font-size:12px; font-weight:900; }
/* 궁합 초대 폼(2026-09-13): 이름 두 칸 + 카톡 노랑 버튼 하나. 두 문·맞히기 갈래(.pair-door · .pair-way)는 그날 뺐다.
   ⚠️ 카톡 노랑은 카톡 공유에만 쓴다(색 규칙 — 크림은 결제, 금색 그라데이션은 테스트 시작). */
.pair-name-opt { color: rgba(var(--text-rgb),.5); font-weight: 600; }
.pair-kakao-go { display: block; width: 100%; min-height: 52px; margin-top: 12px; padding: 14px 16px; border: 0; border-radius: 14px;
  background: #FEE500; color: #191600; font-family: inherit; font-size: 15.5px; font-weight: 900; line-height: 1.2; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.pair-kakao-go:disabled { opacity: .7; cursor: default; }
.pair-name-hint { margin: 10px 0 0; color: rgba(var(--text-rgb),.6); font-size: 12.5px; line-height: 1.6; text-align: center; word-break: keep-all; }
/* 「궁합이 벌써 나왔어요」 창(#pairReadySplash)의 두 얼굴 */
.pair-ready-faces { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 6px; }
.pair-ready-faces img { width: 84px; height: 84px; object-fit: contain; }
.pair-ready-faces span { color: var(--gold); font-size: 22px; font-weight: 900; }
/* 이 창의 버튼은 결제가 아니다 — 크림 알약(결제 색)을 금색 테두리로 바꾼다(색 규칙). */
#pairReadySplash .paid-splash-go { background: rgba(var(--gold-rgb),.14); border: 1px solid rgba(var(--gold-rgb),.75); color: var(--gold); box-shadow: none; }
/* 「그 사람 심화 해설」 띠 (2026-09-10). 이 페이지가 내 결과가 아니라 **내가 본 그 사람**이라는 걸
   화면 맨 위에서 한 번 말한다. 조용해야 한다 — 경고가 아니라 문맥이다. */
.me-proxy-band { margin:0 0 14px; padding:12px 14px; border:1px dashed rgba(var(--gold-rgb),.4);
  border-radius:12px; background:rgba(var(--gold-rgb),.07); color:rgba(var(--text-rgb),.82);
  font-size:13.5px; line-height:1.65; word-break:keep-all; }
.me-proxy-band[hidden] { display:none; }
.me-proxy-band b { color:var(--gold); font-weight:800; }

/* 2026-09-13: 이름 폼이 곧 「우리 둘은 어떤 조합일까?」 카드다(제목 · 이름 두 칸 · 카톡 버튼). */
.pair-name-form { padding:20px 18px 18px; border:1px solid rgba(var(--gold-rgb),.38); border-radius:18px; background:rgba(var(--gold-rgb),.08); }
.pair-invite-title { margin:0 0 12px; color:var(--text); font-size:17px; font-weight:900; letter-spacing:-.025em; line-height:1.35; }
/* 「궁합 보기」 하나 → 누르면 이름 칸이 펼쳐진다(2026-09-13 밤). 금색 톤 — 카톡 노랑은 카톡 버튼에만, 크림은 결제에만. */
.pair-open-go { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:50px; margin:0; padding:0 18px; border:1px solid rgba(var(--gold-rgb),.6); border-radius:14px; background:rgba(var(--gold-rgb),.17); box-shadow:none; color:var(--text); font-family:inherit; font-size:15px; font-weight:900; cursor:pointer; }
.pair-open-go i { font-style:normal; color:var(--gold); }
.pair-open-go[hidden], .pair-name-step[hidden] { display:none; }
.pair-name-lead { margin:-4px 0 12px; color:rgba(var(--text-rgb),.62); font-size:12.5px; line-height:1.6; word-break:keep-all; }
.pair-name-title { margin:0 0 10px; color:rgba(var(--white-rgb),.84); font-size:12.5px; font-weight:850; line-height:1.55; word-break:keep-all; }
.pair-name-row { display:flex; flex-wrap:wrap; gap:8px; }
.pair-name-input { flex:1 1 118px; min-width:0; min-height:46px; padding:12px 13px; border:1px solid rgba(var(--white-rgb),.18); border-radius:12px; background:rgba(0,0,0,.24); color:#fff; font-size:14px; font-weight:800; }
.pair-name-input::placeholder { color:rgba(var(--white-rgb),.42); font-weight:700; }
/* 못 넘어가는 이유를 그 자리에서 말한다(2026-09-10 밤, 이름 두 칸이 필수가 되면서).
   alert로 띄우지 않는다 — 어느 칸이 문제인지 안 보이고, 확인을 누르면 입력 위치도 잃는다. */
.pair-name-error { margin:9px 0 0; color:#ffb4b4; font-size:12.5px; font-weight:800; line-height:1.55; word-break:keep-all; }
.pair-name-error[hidden] { display:none; }
.q-proxy { margin:0 auto 10px; padding:8px 14px; width:max-content; max-width:100%; border-radius:999px; background:rgba(163,77,173,.18); color:#e9d6ff; font-size:13px; font-weight:900; letter-spacing:-.01em; text-align:center; }
.q-proxy[hidden] { display:none; }
.q-final { margin:0 auto 10px; padding:8px 14px; width:max-content; max-width:100%; border-radius:999px; background:rgba(var(--gold-rgb),.18); color:#f3e3bd; font-size:13px; font-weight:900; letter-spacing:-.01em; text-align:center; word-break:keep-all; }
.q-final[hidden] { display:none; }
.pair-name-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
/* 「초대 링크 만들기」가 흰 상자라 눈에 안 띈다는 지적(2026-09-08) — 금색 그라데이션으로. */
.pair-name-actions .pair-primary { flex:1 1 auto; min-height:48px; padding:12px 16px; border:1px solid rgba(var(--white-rgb),.2); border-radius:12px; background:linear-gradient(105deg,#b8923f,#d9b565 55%,var(--gold)); background-origin:border-box; color:#1A0E00; font:850 14.5px/1.2 inherit; cursor:pointer; box-shadow:0 6px 18px rgba(180,140,0,.28); }
.pair-name-skip { flex:0 0 auto; min-height:46px; padding:12px 15px; border:1px solid rgba(var(--white-rgb),.16); border-radius:12px; background:transparent; color:rgba(var(--white-rgb),.72); font-size:13px; font-weight:850; cursor:pointer; }
.pair-name-inline { margin:13px 0 3px; }
.pair-name-inline .pair-name-input { width:100%; flex:1 1 100%; }
.pair-hero-launch.is-created > button { background:rgba(var(--gold-rgb),.05); border-color:rgba(var(--gold-rgb),.25); }
/* 그라데이션 배경 + 1px 테두리 조합 보정.
   CSS 기본값은 배경 크기를 padding-box로, 칠하는 범위를 border-box로 잡아서
   테두리 1px 만큼 그라데이션이 되풀이돼 왼쪽·위쪽에 끝색(분홍)이 새어나온다.
   배경에 애니메이션을 쓰는 .btn-start는 제외한다(반짝임 효과가 깨진다). */
.pair-hero-launch > button { background-origin: border-box; background-repeat: no-repeat; }

.pair-invite-banner,
.compatibility-card {
  width: 100%;
  border: 1px solid rgba(var(--gold-rgb),.25);
  border-radius: 18px;
  background: var(--bg2);
  box-shadow: none;
}
.pair-invite-banner { max-width:430px; margin:2px auto 18px; padding:18px 20px; text-align:left; }
.pair-kicker { color:#CFC0FF; font-size:11px; font-weight:900; letter-spacing:.12em; }
.pair-invite-title,.compatibility-title { margin:7px 0 6px; color:var(--text); font-size:20px; line-height:1.35; }
.pair-invite-desc,.compatibility-message { margin:0; color:rgba(var(--text-rgb),.72); font-size:13px; line-height:1.65; }
.pair-code { display:inline-flex; margin-top:12px; padding:8px 11px; border:1px solid rgba(var(--text-rgb),.14); border-radius:10px; background:rgba(4,7,12,.36); color:#E1D6FF; font:800 14px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.08em; }
.pair-banner-action { display:inline-flex; margin-top:12px; border:0; border-radius:10px; padding:9px 12px; background:var(--text); color:#151821; font:800 12px/1.2 inherit; cursor:pointer; }
.compatibility-card { margin:0 0 26px; padding:24px; }
.compatibility-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.compatibility-status { flex:0 0 auto; padding:7px 10px; border-radius:999px; background:rgba(155,123,255,.16); color:#D8CBFF; font-size:11px; font-weight:900; }
.compatibility-status.paid { background:rgba(77,190,128,.15); color:#7EE2AA; }
.compatibility-link { margin-top:12px; padding:11px 12px; overflow-wrap:anywhere; border-radius:11px; background:rgba(4,7,12,.32); color:rgba(var(--text-rgb),.62); font-size:11px; line-height:1.55; }
.compatibility-code-details { margin-top:12px; }
.compatibility-code-details summary { width:max-content; cursor:pointer; color:rgba(var(--text-rgb),.62); font-size:11px; font-weight:800; }
.compatibility-code-details .pair-code { margin-top:9px; }
.compatibility-preview { margin-top:18px; padding:17px; border:1px solid rgba(var(--text-rgb),.1); border-radius:15px; background:rgba(4,7,12,.28); }
.compatibility-preview-title { margin:0; color:var(--text); font-size:18px; line-height:1.4; }
.compatibility-preview-copy { margin:8px 0 0; color:rgba(var(--text-rgb),.72); font-size:13px; line-height:1.65; }
.compatibility-preview-points { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:13px; }
.compatibility-preview-point { padding:12px; border-radius:12px; background:rgba(var(--white-rgb),.045); color:rgba(var(--text-rgb),.7); font-size:12px; line-height:1.55; }
.compatibility-preview-point strong { display:block; margin-bottom:4px; color:#D9CCFF; font-size:11px; }
.compatibility-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:17px; }
.compatibility-actions button,.compatibility-actions a { appearance:none; display:inline-flex; align-items:center; justify-content:center; min-height:42px; border:1px solid rgba(var(--text-rgb),.16); border-radius:12px; padding:10px 14px; background:rgba(var(--white-rgb),.05); color:var(--text); font:800 13px/1.2 inherit; text-decoration:none; cursor:pointer; }
.compatibility-actions .pair-primary { border-color:transparent; background:var(--text); color:#141820; }
.compatibility-actions button:disabled { opacity:.48; cursor:wait; }
.compatibility-help { margin:13px 0 0; color:rgba(var(--text-rgb),.48); font-size:11px; line-height:1.55; }
#intro > .btn-start[hidden],#devPreviewWrap[hidden] { display:none !important; }
@media(max-width:420px) {
  .pair-hero-launch > button { padding:16px 14px; gap:11px; }
  .pair-cta-face { width:34px; height:34px; }
  .pair-cta-copy strong { font-size:15px; }
  .pair-cta-copy > span { font-size:10.8px; }
  .pair-cta-arrow { width:30px; height:30px; flex-basis:30px; }
  .compatibility-card { padding:20px 17px; }
  .compatibility-head { display:block; }
  .compatibility-status { display:inline-flex; margin-top:10px; }
  .compatibility-preview-points { grid-template-columns:1fr; }
  .compatibility-actions > * { width:100%; }
}

/* 유튜브 영상 카드(2026-09-11) — 「원형이 뭔가요」 맨 아래. 넓은 화면은 썸네일 옆에 글, 좁으면 위아래로 쌓는다. */
.video-card { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: rgba(var(--white-rgb),.03); color: var(--text); text-decoration: none; }
.video-thumb { position: relative; flex: 0 0 46%; max-width: 260px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.video-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-thumb::after { content: "\25B6\FE0E"; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; line-height: 46px; text-align: center; padding-left: 3px; box-sizing: border-box; }
.video-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.video-copy small { color: var(--dim); font-size: 12px; font-weight: 700; }
.video-copy strong { font-size: 16px; font-weight: 800; letter-spacing: -.02em; word-break: keep-all; }
.video-copy span { color: rgba(var(--text-rgb),.72); font-size: 13.5px; line-height: 1.6; word-break: keep-all; }
@media (max-width: 520px) { .video-card { flex-direction: column; align-items: stretch; } .video-thumb { flex: none; max-width: none; } .video-copy { padding: 2px 4px 4px; } }
@media (hover: hover) { .video-card:hover { border-color: rgba(var(--text-rgb),.28); } }

/* 뉴스레터 「고양이의 편지」(2026-09-11) — 유료 해설을 다 읽은 맨 아래. 금색은 「사세요」의 색이라 쓰지 않는다. */
.me-letter { margin-top: 18px; padding: clamp(22px, 4.5vw, 30px); border: 1px solid var(--border); border-radius: 22px; background: var(--bg2); text-align: center; }
.me-letter-kicker { display: block; color: var(--dim); font-size: 12px; font-weight: 800; }
.me-letter-title { display: block; margin: 6px 0 10px; font-size: clamp(19px, 3.4vw, 22px); font-weight: 800; letter-spacing: -.03em; word-break: keep-all; }
.me-letter-desc { margin: 0 0 18px; color: rgba(var(--text-rgb),.75); font-size: 14.5px; line-height: 1.75; word-break: keep-all; }
.me-letter-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 11px 20px; border: 1px solid rgba(var(--text-rgb),.28); border-radius: 999px; color: var(--text); font-size: 14px; font-weight: 800; text-decoration: none; }
@media (hover: hover) { .me-letter-btn:hover { border-color: rgba(var(--text-rgb),.5); } }
