/* Extracted from index.html in original document order. */

/* ---- original inline style block 1 ---- */

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

  :root {
    /* ── 폰트 스케일 (Figma 560 캔버스 실측 분포) — 전역 SSOT ──
       동일 역할 텍스트는 이 변수만 참조한다. book 밖(리뷰 모달·랜딩 등)에서도 해결되도록 :root에 둔다.
       반응형은 아래 @media 의 #teaser-result.book{ --fs-scale } 로 book 폭에 맞춰 축소된다. */
    --fs-scale:1;
    --fs-display:   calc(34.0px * var(--fs-scale));
    --fs-title:     calc(30.9px * var(--fs-scale));
    --fs-title-2:   calc(30.0px * var(--fs-scale));
    --fs-subtitle:  calc(25.0px * var(--fs-scale));
    --fs-subtitle-2:calc(24.0px * var(--fs-scale));
    --fs-lead:      calc(18.0px * var(--fs-scale));
    --fs-body:      calc(14.5px * var(--fs-scale));
    --fs-body-sm:   calc(13.5px * var(--fs-scale));
    --fs-caption:   calc(12.5px * var(--fs-scale));
    --fs-micro:     calc(10.4px * var(--fs-scale));
    --bg: #071316;
    --bg2: #101C1F;
    --bg3: #17272B;
    --text: #EFE7D8;
    --text2: #BFAF98;
    --text3: #7F7565;
    --legal-fine: #564f44;
    --silver: #8AA2A4;
    --accent: #E5C98A;
    --red: #9F3D35;
    --gold: #D1A35E;
    --border: rgba(229,201,138,0.12);
    --border2: rgba(229,201,138,0.22);
    --serif: 'Noto Serif KR', 'Batang', 'Georgia', serif;
    --sans: -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  }

  html { width: 100%; max-width: 100%; scroll-behavior: smooth; overflow-x: hidden; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* 모바일 가로 흔들림 방지 — 100vw 넘치는 요소가 있어도 가로 스크롤 잠금 */
    -webkit-font-smoothing: antialiased;
  }

  /* Layout */
  .wrap {
    max-width: 460px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
  }

  /* Section control */
  #app-shell, .section { width: 100%; max-width: 100%; min-width: 0; }
  .section { display: none; }
  .section.active { display: block; }

  /* ── LANDING ── */
  #sec-landing {
    padding: 0 0 30px;
  }

  .hero-top {
    padding: 52px 0 0;
    text-align: center;
  }

  /* ── 화자 인물 인트로 ── */
  .persona-intro {
    padding: 56px 0 0;
    text-align: center;
  }
  .persona-eyebrow {
    font-family: var(--serif);
    font-size: 11px;
    letter-spacing: 0.28em;
    color: var(--text3);
    text-transform: uppercase;
    margin-bottom: 22px;
  }
  .persona-portrait {
    width: 132px;
    height: 168px;
    margin: 0 auto 22px;
    border-radius: 50% / 46%;
    overflow: hidden;
    border: 1px solid var(--border2);
    background: #061012;
    box-shadow: 0 14px 40px rgba(0,0,0,0.55);
    position: relative;
  }
  .persona-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.35) contrast(1.04) brightness(0.92);
  }
  .persona-portrait::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 50% 18%, transparent 55%, rgba(6,16,18,0.6) 100%);
  }

  /* 가면 연구자 영상 초상 (정장+오페라가면, 얼굴 끝 섀도우) */
  .persona-portrait--video {
    width: 184px;
    height: 244px;
    border-radius: 96px 96px 18px 18px;
    box-shadow: 0 22px 60px rgba(0,0,0,0.6);
  }
  .persona-portrait--video .persona-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 38%;
    filter: contrast(1.05) saturate(1.02);
  }
  /* 위·아래 섀도우로 얼굴 끝이 어둠에 녹아들게 */
  .persona-portrait--video .persona-portrait-fade {
    position: absolute; inset: 0;
    pointer-events: none;
    background:
      linear-gradient(to bottom, rgba(6,16,18,0.85) 0%, transparent 26%, transparent 64%, rgba(6,16,18,0.92) 100%),
      radial-gradient(120% 80% at 50% 30%, transparent 52%, rgba(6,16,18,0.72) 100%);
  }
  .persona-name {
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.02em;
    margin-bottom: 4px;
  }
  .persona-years {
    font-family: var(--serif);
    font-size: 12.5px;
    color: var(--silver);
    letter-spacing: 0.1em;
    margin-bottom: 20px;
  }
  .persona-bio {
    font-family: var(--serif);
    font-size: 14px;
    line-height: 2;
    color: var(--text2);
    font-weight: 300;
    word-break: keep-all;
    margin-bottom: 8px;
  }
  .persona-bio em {
    font-style: normal;
    color: var(--accent);
  }
  .persona-rule {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--silver), transparent);
    margin: 30px auto;
    opacity: 0.45;
  }
  .persona-line {
    font-family: var(--serif);
    font-size: 15.5px;
    color: var(--accent);
    letter-spacing: 0.03em;
    margin-bottom: 30px;
    word-break: keep-all;
    line-height: 1.7;
  }

  .epigraph {
    font-family: var(--serif);
    font-size: 11.5px;
    font-weight: 300;
    color: var(--silver);
    letter-spacing: 0.08em;
    line-height: 1.9;
    margin-bottom: 40px;
    padding: 0 8px;
    opacity: 0.85;
  }

  .epigraph cite {
    display: block;
    margin-top: 6px;
    font-style: normal;
    color: var(--text3);
    font-size: 10.5px;
    letter-spacing: 0.12em;
  }

  /* Mirror divider */
  .mirror-divider {
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, transparent, var(--silver), transparent);
    margin: 0 auto 32px;
    opacity: 0.5;
  }

  .hero-badge {
    display: inline-block;
    font-family: var(--serif);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.22em;
    color: var(--silver);
    border: 1px solid var(--border2);
    padding: 5px 14px;
    margin-bottom: 28px;
    text-transform: uppercase;
  }

  .hero-title {
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
    margin-bottom: 10px;
    word-break: keep-all;
  }

  .hero-title em {
    font-style: normal;
    color: var(--accent);
  }

  .hero-split {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 28px 0 24px;
    font-family: var(--serif);
    font-size: 13.5px;
    color: var(--text2);
    letter-spacing: 0.04em;
  }

  .hero-split span {
    flex: 1;
    text-align: center;
    padding: 0 4px;
  }

  .hero-split .divider-v {
    width: 1px;
    height: 32px;
    background: linear-gradient(to bottom, transparent, var(--silver) 40%, transparent);
    opacity: 0.4;
    flex-shrink: 0;
  }

  .hero-sub {
    font-family: var(--serif);
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--text2);
    margin-bottom: 20px;
    word-break: keep-all;
    text-align: center;
  }

  .hero-emphasis {
    font-family: var(--serif);
    font-size: 15px;
    color: var(--accent);
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 36px;
    font-weight: 600;
  }

  /* 사주 오행(五行) 모티프 */
  .ohaeng-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 28px auto 30px;
    max-width: 260px;
  }

  .ohaeng-el {
    flex: 1;
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 400;
    color: var(--silver);
    text-align: center;
    letter-spacing: 0;
    opacity: 0.62;
    position: relative;
    padding: 4px 0;
  }

  .ohaeng-el:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 14px;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(to right, transparent, rgba(229,201,138,0.28), transparent);
  }

  /* CTA Button */
  .btn-primary {
    display: block;
    width: 100%;
    padding: 18px 24px;
    background: var(--text);
    color: var(--bg);
    font-family: var(--serif);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.15s ease;
    min-height: 58px;
  }

  .btn-primary:hover {
    background: #F4E9CE;
    transform: translateY(-1px);
  }

  .btn-primary:active {
    transform: translateY(0);
  }

  .btn-secondary {
    display: block;
    width: 100%;
    padding: 16px 24px;
    background: transparent;
    color: var(--text);
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
    border: 1px solid var(--border2);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    min-height: 54px;
  }

  .btn-secondary:hover {
    border-color: var(--accent);
    background: rgba(229,201,138,0.05);
  }

  /* Reviews Carousel */
  .reviews-section {
    margin-top: 52px;
    padding-top: 36px;
    border-top: 1px solid var(--border);
  }

  .reviews-label {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--text3);
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
  }

  .carousel {
    position: relative;
    overflow: hidden;
    min-height: 120px;
  }

  .review-card {
    position: absolute;
    top: 0; left: 0; right: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    background: var(--bg2);
    border: 1px solid var(--border);
    padding: 20px 22px;
  }

  .review-card.visible {
    opacity: 1;
    position: relative;
  }

  .review-text {
    font-family: var(--serif);
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--text2);
    font-weight: 300;
    word-break: keep-all;
  }

  .review-meta {
    margin-top: 10px;
    font-size: 11px;
    color: var(--text3);
    letter-spacing: 0.06em;
  }

  .stars {
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 8px;
  }

  /* ── FORM ── */
  #sec-form {
    padding: 0 0 60px;
    position: relative;
  }
  #sec-form.active { display: block; }
  #sec-form .wrap { position: relative; z-index: 2; padding-top: 20px; }

  /* 화자 영상 — 화면 꽉 채우는 풀블리드 배경 */
  .hf-stage--form {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #061012 !important;
    z-index: 0;
    overflow: hidden;
  }
  @media (min-width: 600px) {
    /* PC: 영상 배경을 입력 컬럼 폭에 맞춰 중앙 고정 */
    .hf-stage--form { left: 50% !important; right: auto !important; transform: translateX(-50%); width: 460px !important; }
  }
  .hf-stage--form video,
  .hf-stage--form .hf-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .hf-stage--form video { object-fit: cover; }
  /* 풀블리드 플레이스홀더: 실루엣을 상단 1/3에 차분히 고정(스트레치 방지) */
  .hf-stage--form .hf-placeholder { align-items: flex-start; }
  .hf-stage--form .hf-jung {
    width: 46%;
    max-width: 200px;
    margin-top: 8vh;
    margin-bottom: 0;
    animation: hf-jung-in 1.6s ease forwards, hf-breathe 6s ease-in-out 1.6s infinite;
  }
  .hf-stage--form .hf-seam,
  .hf-stage--form .hf-shadow-pool { display: none; }

  /* 차분한 호흡 애니메이션 (한 번 등장 후 은은하게 살아있음) */
  @keyframes hf-breathe {
    0%, 100% { opacity: 0.9; transform: translateY(0) scale(1); }
    50%      { opacity: 1;   transform: translateY(-4px) scale(1.012); }
  }

  /* 영상 위 가독성용 다크 스크림 (위/아래 진하게) */
  .hf-stage--form::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background:
      linear-gradient(to bottom,
        rgba(6,16,18,0.92) 0%,
        rgba(6,16,18,0.55) 22%,
        rgba(6,16,18,0.45) 50%,
        rgba(6,16,18,0.82) 78%,
        rgba(6,16,18,0.96) 100%);
  }
  .hf-stage--form .hf-tag { z-index: 6; }

  #sec-form .back-nav { position: relative; z-index: 3; }
  /* 화자 영상이 보이도록 상단 스페이서 (입력 폼은 그 아래 스크림 위로) */
  .wizard-stage-spacer { height: 2vh; }
  @media (min-width: 600px) { .wizard-stage-spacer { height: 4vh; } }

  /* 입력 카드 — 영상 위 가독성 보장 패널 */
  .wizard-step.active,
  .wizard-progress,
  .wizard-step-count {
    position: relative;
  }
  #sec-form .wizard-panel {
    background: linear-gradient(to bottom, rgba(6,16,18,0) 0%, rgba(13,13,16,0.72) 14%, rgba(13,13,16,0.9) 100%);
    padding: 30px 18px 28px;
    border: none;
    border-radius: 0;
    backdrop-filter: blur(2px);
  }
  /* 입력 내내 화자 영상이 배경으로 깔리도록 — 영상 더 보이게 */
  .hf-stage--form::after { background:
      linear-gradient(to bottom,
        rgba(6,16,18,0.78) 0%,
        rgba(6,16,18,0.35) 24%,
        rgba(6,16,18,0.30) 50%,
        rgba(6,16,18,0.60) 74%,
        rgba(6,16,18,0.88) 100%) !important; }

  /* 위저드 진행 바 */
  .wizard-progress {
    height: 3px;
    background: rgba(229,201,138,0.10);
    margin: 0 0 8px;
    overflow: hidden;
  }
  .wizard-progress-fill {
    height: 100%;
    width: 14%;
    background: linear-gradient(90deg, var(--text3), var(--accent));
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .wizard-step-count {
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--text3);
    text-align: right;
    margin-bottom: 26px;
    font-family: var(--serif);
  }

  /* 한 항목씩 — 한 스텝만 표시 */
  .wizard-step { display: none; }
  .wizard-step.active {
    display: block;
    animation: fade-in 0.45s ease forwards;
  }

  .form-header {
    margin-bottom: 36px;
  }

  .form-step-label {
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--text3);
    margin-bottom: 12px;
    text-transform: uppercase;
  }

  .form-title {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    word-break: keep-all;
  }

  .form-title em {
    font-style: normal;
    color: var(--accent);
  }

  .form-desc {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text3);
    line-height: 1.7;
  }

  .form-group {
    margin-bottom: 24px;
  }

  .form-group label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--silver);
    margin-bottom: 8px;
    font-family: var(--serif);
  }

  .form-group label .required {
    color: var(--red);
    margin-left: 2px;
  }

  .form-input {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid rgba(191,175,152,0.5);
    color: var(--text);
    font-size: 16px;
    font-family: 'Pretendard Variable', Pretendard, var(--sans);
    font-weight: 600;
    padding: 0 12px;
    height: 50px;
    outline: none;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    border-radius: 4px;
  }

  .form-input:focus {
    border-color: var(--red);
    background: rgba(159,61,53,0.12);
  }

  /* 브라우저 자동완성 시 강제되는 노란/파란 배경 무력화 (이름 등) */
  .form-input:-webkit-autofill,
  .form-input:-webkit-autofill:hover,
  .form-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px #0d0d10 inset;
    box-shadow: 0 0 0 1000px #0d0d10 inset;
    transition: background-color 9999s ease-in-out 0s;
    caret-color: var(--text);
  }

  .form-input::placeholder {
    color: #9a9a9a;
    font-size: 16px;
  }

  .form-input.error {
    border-color: var(--red);
  }

  .error-msg {
    display: none;
    font-size: 12px;
    font-family: 'Pretendard Variable', Pretendard, var(--sans);
    font-weight: 500;
    color: var(--red);
    margin-top: 10px;
    letter-spacing: -0.03em;
  }

  /* Radio group */
  .radio-group {
    display: flex;
    gap: 8px;
  }

  .radio-option {
    flex: 1;
    position: relative;
  }

  .radio-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .radio-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border: 1px solid rgba(191,175,152,0.5);
    border-radius: 4px;
    background: transparent;
    color: #9a9a9a;
    font-size: 14px;
    font-family: 'Pretendard Variable', Pretendard, var(--sans);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0;
  }

  .radio-option input:checked + .radio-label {
    border-color: var(--accent);
    background: rgba(229,201,138,0.08);
    color: var(--text);
  }

  /* Select */
  select.form-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239EA3B4' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
  }

  select.form-input option {
    background: var(--bg);
    color: var(--text);
  }

  /* 생년월일 라벨 행 — 라벨 좌측, 양/음력 라디오 우측 */
  .label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  .label-row > label {
    display: block;
    font-size: 16px;
    font-family: 'Pretendard Variable', Pretendard, var(--sans);
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.025em;
    margin-bottom: 0;
    flex: none;
  }
  .cal-inline {
    flex: none;
    gap: 14px;
  }
  .cal-inline .radio-option {
    flex: none;
  }
  /* 양/음력 — 박스 없는 체크 원형 아이콘 스타일(피그마 목업) */
  .cal-inline .radio-label {
    height: auto;
    min-height: 0;
    padding: 2px 0;
    font-size: 14px;
    font-family: 'Pretendard Variable', Pretendard, var(--sans);
    font-weight: 500;
    border: none;
    background: transparent;
    gap: 6px;
    color: #9a9a9a;
    opacity: 0.55;
  }
  .cal-inline .radio-label::before {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #9a9a9a;
    font-size: 11px;
    line-height: 1;
    color: transparent;
    transition: all 0.2s;
  }
  .cal-inline .radio-option input:checked + .radio-label {
    border: none;
    background: transparent;
    color: var(--text);
    opacity: 1;
  }
  .cal-inline .radio-option input:checked + .radio-label::before {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
  }

  /* Calendar row */
  .date-row {
    display: flex;
    gap: 8px;
  }

  .date-row select {
    flex: 1;
  }
  /* 년도 셀렉트를 2, 월·일을 각 1 비율로 */
  .date-row #f-year {
    flex: 2;
  }

  /* Textarea */
  textarea.form-input {
    background: transparent;
    resize: none;
    height: auto;
    min-height: 99px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    padding: 12px;
  }

  textarea.form-input::placeholder {
    font-size: 12px;
    color: #9a9a9a;
  }

  textarea.form-input:focus {
    border-color: var(--red);
    background: rgba(159,61,53,0.12);
  }

  .textarea-hint {
    font-size: 11px;
    color: var(--text3);
    margin-top: 5px;
  }

  .form-divider {
    height: 1px;
    background: var(--border);
    margin: 28px 0;
  }

  /* ── TEASER (③) ── */
  #sec-teaser {
    padding: 0 0 60px;
  }

  .loading-screen {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 100svh; /* dvh(스크롤 시 변동) 대신 svh 로 고정 — 모바일 세로 스크롤 방지 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
  }

  .loading-text {
    font-family: var(--serif);
    font-size: 14px;
    color: var(--text3);
    letter-spacing: 0.12em;
    animation: pulse 2s ease-in-out infinite;
    text-align: center;
    line-height: 2;
  }

  @keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
  }

  .loading-orb {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--border2);
    position: relative;
    margin-bottom: 28px;
    animation: spin-slow 4s linear infinite;
  }

  .loading-orb::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--silver), transparent 60%);
    opacity: 0.3;
    animation: pulse 2s ease-in-out infinite;
  }

  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* ── Higgsfield video slot (9:16 story) ── */
  .hf-stage {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 9 / 16;
    margin: 0 auto 28px;
    border: 1px solid var(--border2);
    background: linear-gradient(170deg, #0B1517 0%, #142126 60%, #0B1517 100%);
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0,0,0,0.5);
  }

  /* Real Higgsfield mp4 sits on top once available */
  .hf-stage video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 3;
    background: transparent;
  }
  .hf-stage video[data-hf-video]:not([src]) { display: none; }

  /* Placeholder mini-sequence (behind video) */
  .hf-placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
  }

  /* slow drifting vignette / "mirror" sheen */
  .hf-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120% 80% at 50% 18%, rgba(229,201,138,0.10), transparent 55%),
      radial-gradient(60% 50% at 50% 100%, rgba(0,0,0,0.55), transparent 70%);
    z-index: 2;
  }

  /* vertical mirror seam down the middle */
  .hf-seam {
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 1px;
    transform: translateX(-0.5px);
    background: linear-gradient(to bottom, transparent, rgba(229,201,138,0.35), transparent);
    opacity: 0;
    animation: hf-seam-in 5s ease forwards;
    z-index: 2;
  }

  @keyframes hf-seam-in {
    0% { opacity: 0; }
    35% { opacity: 0.7; }
    100% { opacity: 0.3; }
  }

  /* Shadow-reader silhouette SVG */
  .hf-jung {
    position: relative;
    width: 60%;
    max-width: 165px;
    margin-bottom: -2px;
    z-index: 1;
    opacity: 0;
    transform: translateY(14px);
    animation: hf-jung-in 5s ease forwards;
  }

  @keyframes hf-jung-in {
    0%   { opacity: 0; transform: translateY(18px) scale(0.98); filter: blur(6px); }
    40%  { opacity: 0.9; transform: translateY(0) scale(1); filter: blur(0.5px); }
    100% { opacity: 0.95; transform: translateY(0) scale(1); filter: blur(0); }
  }

  .hf-jung path, .hf-jung ellipse { fill: #061012; }

  /* the "shadow" that he gazes into — pooling reflection */
  .hf-shadow-pool {
    position: absolute;
    bottom: 8%;
    left: 50%;
    width: 46%;
    height: 14%;
    transform: translateX(-50%) scaleY(0.5);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(158,163,180,0.22), transparent 70%);
    opacity: 0;
    z-index: 0;
    animation: hf-pool 5s ease-in-out 1.4s forwards;
  }

  @keyframes hf-pool {
    0% { opacity: 0; transform: translateX(-50%) scaleY(0.3); }
    50% { opacity: 0.8; }
    100% { opacity: 0.5; transform: translateX(-50%) scaleY(0.55); }
  }

  .hf-tag {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 4;
    font-size: 8.5px;
    letter-spacing: 0.16em;
    color: var(--text3);
    text-transform: uppercase;
    opacity: 0.6;
  }

  /* Teaser result */
  .teaser-result {
    padding: 52px 0 0;
  }

  .teaser-top {
    text-align: center;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 36px;
  }

  .mask-score-label {
    font-size: 10.5px;
    letter-spacing: 0.2em;
    color: var(--text3);
    margin-bottom: 16px;
    text-transform: uppercase;
  }

  .mask-score-number {
    font-family: var(--serif);
    font-size: 80px;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, #D4D8E8 0%, #8AA2A4 60%, #6A6F84 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 6px;
  }

  .mask-score-unit {
    font-size: 11px;
    color: var(--text3);
    letter-spacing: 0.14em;
    margin-bottom: 16px;
  }

  .mask-score-desc {
    font-family: var(--serif);
    font-size: 13.5px;
    color: var(--text2);
    line-height: 1.8;
    word-break: keep-all;
  }

  .reader-byline {
    font-family: var(--serif);
    font-size: 11px;
    color: var(--text3);
    letter-spacing: 0.1em;
    margin-top: 16px;
    opacity: 0.8;
  }

  /* Shadow elements list */
  .shadow-list {
    margin-bottom: 36px;
  }

  .shadow-item {
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
  }

  .shadow-item:last-child {
    border-bottom: none;
  }

  .shadow-item-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 10px;
  }

  .shadow-index {
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--text3);
    padding-top: 2px;
    flex-shrink: 0;
    font-family: var(--serif);
  }

  .shadow-name {
    font-family: var(--serif);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.03em;
  }

  .shadow-lock {
    margin-left: auto;
    font-size: 13px;
    opacity: 0.35;
    flex-shrink: 0;
  }

  .shadow-reveal {
    font-family: var(--serif);
    font-size: 13.5px;
    color: var(--text2);
    line-height: 1.85;
    word-break: keep-all;
    font-weight: 300;
    padding-left: 28px;
  }

  .shadow-blurred {
    padding-left: 28px;
    position: relative;
  }

  .shadow-blur-text {
    font-family: var(--serif);
    font-size: 13px;
    color: var(--text2);
    line-height: 1.85;
    filter: blur(5px);
    user-select: none;
    font-weight: 300;
  }

  .shadow-blur-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .blur-cta {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--silver);
    background: rgba(7,19,22,0.75);
    padding: 4px 10px;
    border: 1px solid var(--border2);
    white-space: nowrap;
  }

  /* Insight highlight */
  .insight-highlight {
    background: rgba(229,201,138,0.05);
    border-left: 2px solid var(--silver);
    padding: 16px 18px;
    margin: 0 0 32px;
  }

  .insight-highlight p {
    font-family: var(--serif);
    font-size: 14px;
    color: var(--accent);
    line-height: 1.85;
    word-break: keep-all;
    font-weight: 300;
  }

  .insight-highlight p + p {
    margin-top: 10px;
  }

  /* ── PAYWALL (④) ── */
  #sec-paywall {
    padding: 0 0 80px;
  }

  .paywall-top {
    padding: 48px 0 36px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 36px;
    text-align: center;
  }

  .paywall-badge {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--red);
    border: 1px solid rgba(159,61,53,0.3);
    padding: 5px 12px;
    margin-bottom: 20px;
    text-transform: uppercase;
  }

  .paywall-title {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    word-break: keep-all;
    margin-bottom: 14px;
  }

  .paywall-sub {
    font-family: var(--serif);
    font-size: 13.5px;
    color: var(--text2);
    line-height: 1.85;
    word-break: keep-all;
    font-weight: 300;
  }

  /* Pricing */
  .price-block {
    background: var(--bg2);
    border: 1px solid var(--border);
    padding: 28px 24px;
    margin-bottom: 20px;
    text-align: center;
  }

  .price-original {
    font-size: 13px;
    color: var(--text3);
    text-decoration: line-through;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
  }

  .price-main {
    font-family: var(--serif);
    font-size: 38px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    margin-bottom: 4px;
  }

  .price-main span {
    font-size: 20px;
    font-weight: 400;
  }

  .price-kakao {
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--gold);
    letter-spacing: 0.04em;
  }

  .price-urgency {
    font-size: 11.5px;
    color: var(--text3);
    margin-top: 8px;
    letter-spacing: 0.04em;
  }

  /* Toast */
  .toast-container {
    margin-bottom: 20px;
    min-height: 44px;
  }

  .toast {
    background: var(--bg3);
    border: 1px solid var(--border);
    padding: 11px 16px;
    font-size: 12.5px;
    color: var(--text2);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.4s;
    letter-spacing: 0.02em;
  }

  .toast.show {
    opacity: 1;
  }

  .toast-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
    animation: blink 1.5s ease-in-out infinite;
  }

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  /* Phone hook */
  .phone-hook-section {
    margin-bottom: 20px;
  }

  .btn-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 20px;
    background: transparent;
    border: 1px solid var(--border2);
    color: var(--accent);
    font-family: var(--serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    min-height: 54px;
  }

  .btn-phone:hover {
    background: rgba(229,201,138,0.06);
    border-color: var(--accent);
  }

  /* Modal */
  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 1000;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 0;
  }

  .modal-overlay.open {
    display: flex;
  }

  .modal-box {
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-bottom: none;
    width: 100%;
    max-width: 460px;
    padding: 36px 24px 48px;
    animation: slide-up 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  @keyframes slide-up {
    from { transform: translateY(80px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  .modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: var(--text3);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-box-inner {
    position: relative;
  }

  .modal-title {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    word-break: keep-all;
  }

  .modal-sub {
    font-size: 12.5px;
    color: var(--text3);
    margin-bottom: 24px;
  }

  .sms-preview {
    background: var(--bg3);
    border: 1px solid var(--border);
    padding: 18px 18px;
    margin-bottom: 24px;
    position: relative;
  }

  .sms-header {
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--text3);
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  .sms-body {
    font-family: var(--serif);
    font-size: 13.5px;
    color: var(--text2);
    line-height: 1.8;
    word-break: keep-all;
  }

  .sms-body strong {
    color: var(--accent);
    font-weight: 600;
  }

  .modal-confirm {
    font-size: 12.5px;
    color: var(--gold);
    text-align: center;
    letter-spacing: 0.04em;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .modal-confirm::before {
    content: '✓';
    font-size: 13px;
  }

  /* Share section */
  .share-section {
    margin-top: 24px;
    text-align: center;
  }

  .share-label {
    font-size: 11px;
    color: var(--text3);
    letter-spacing: 0.1em;
    margin-bottom: 12px;
    text-transform: uppercase;
  }

  .btn-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1px solid var(--border2);
    background: transparent;
    color: var(--text2);
    font-family: var(--serif);
    font-size: 13.5px;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: border-color 0.2s, color 0.2s;
    min-height: 46px;
  }

  .btn-share:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  /* Notice */
  .paywall-notice {
    font-size: 11.5px;
    color: var(--text3);
    line-height: 1.8;
    margin-top: 20px;
    text-align: center;
    letter-spacing: 0.02em;
  }

  /* Back nav */
  .back-nav {
    padding: 20px 0 0;
    text-align: left;
  }

  .btn-back {
    background: none;
    border: none;
    color: var(--text3);
    font-size: 13px;
    cursor: pointer;
    padding: 10px 0;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    transition: color 0.2s;
    font-family: var(--serif);
  }

  .btn-back:hover {
    color: var(--text2);
  }

  /* Fade in */
  .fade-in {
    animation: fade-in 0.6s ease forwards;
  }

  @keyframes fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .fade-in-slow {
    animation: fade-in 1.2s ease forwards;
  }

  /* Staggered children */
  .stagger > * {
    opacity: 0;
    animation: fade-in 0.5s ease forwards;
  }

  .stagger > *:nth-child(1) { animation-delay: 0.1s; }
  .stagger > *:nth-child(2) { animation-delay: 0.25s; }
  .stagger > *:nth-child(3) { animation-delay: 0.4s; }
  .stagger > *:nth-child(4) { animation-delay: 0.55s; }
  .stagger > *:nth-child(5) { animation-delay: 0.7s; }
  .stagger > *:nth-child(6) { animation-delay: 0.85s; }

  /* Countdown */
  .countdown-bar {
    background: var(--bg2);
    border: 1px solid var(--border);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 12px;
    color: var(--text3);
    letter-spacing: 0.04em;
  }

  .countdown-timer {
    font-family: var(--serif);
    font-size: 15px;
    color: var(--red);
    font-weight: 600;
    letter-spacing: 0.05em;
  }

  /* Score bar */
  .score-bar-wrap {
    height: 3px;
    background: rgba(229,201,138,0.1);
    margin: 16px 0 20px;
    position: relative;
    overflow: hidden;
  }

  .score-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--text3), var(--accent));
    width: 0;
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Mobile: slightly smaller font on very small screens */
  @media (max-width: 360px) {
    .hero-title { font-size: 26px; }
    .mask-score-number { font-size: 68px; }
  }

  /* ── 모바일 최적화 중앙 컬럼 (PC서도 보임, 디바이스 베젤 없음) ── */
  body { padding: 0; }

  #app-shell {
    position: relative;
    max-width: 460px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--bg);
  }

  @media (min-width: 600px) {
    body { background: #0E0E11; }
    #app-shell {
      min-height: 100vh;
      box-shadow: 0 0 100px rgba(0,0,0,0.55);
    }
  }

  /* Touch targets ≥ 48px */
  .btn-primary { min-height: 52px; }
  .btn-secondary, .btn-phone { min-height: 50px; }
  .radio-label, .form-input, select.form-input { min-height: 50px; }
  .btn-back, .modal-close, .btn-share { min-height: 48px; }
.btn-back{display:none!important;}

  /* ── 오프닝 워크플로우: S1 히어로 / S2 훅 (앞단 짧게) ── */
  .ls-hero {
    min-height: 84vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px 28px;
  }
  .ls-kicker {
    font-family: var(--serif);
    font-size: 11px;
    letter-spacing: 0.32em;
    color: var(--text3);
    text-transform: uppercase;
    margin-bottom: 30px;
  }
  .ls-hero-title {
    font-family: var(--serif);
    font-size: 31px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text);
    word-break: keep-all;
    margin-bottom: 40px;
  }
  .ls-hero-title em { font-style: normal; color: var(--silver); }
  .ls-hero .btn-primary { max-width: 300px; }
  .ls-scrollhint {
    margin-top: 30px;
    color: var(--text3);
    font-size: 20px;
    animation: lsbob 2s ease-in-out infinite;
  }
  @keyframes lsbob {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50%      { transform: translateY(6px); opacity: 1; }
  }
  .ls-hook {
    padding: 74px 24px;
    text-align: center;
    border-top: 1px solid var(--border);
  }
  .ls-hook-q {
    font-family: var(--serif);
    font-size: 21px;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 34px;
    word-break: keep-all;
  }
  .ls-fade p {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1;
    margin: 20px 0;
    color: var(--text2);
  }
  .ls-fade p:nth-child(1) { opacity: 1; color: var(--text); }
  .ls-fade p:nth-child(2) { opacity: 0.62; }
  .ls-fade p:nth-child(3) { opacity: 0.4; }

  /* ── 결제 직전 풀 모놀로그 (뒷단 길게·몰입) ── */
  .prepay-monologue {
    padding: 22px 4px 8px;
    text-align: center;
  }
  .pm-eyebrow {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--text3);
    text-transform: uppercase;
    margin-bottom: 22px;
  }
  .pm-line {
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.95;
    color: var(--text2);
    word-break: keep-all;
    margin-bottom: 14px;
    font-weight: 300;
  }
  .pm-line em { font-style: normal; color: var(--accent); }
  .pm-rule {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--silver), transparent);
    margin: 24px auto;
    opacity: 0.4;
  }

  /* ── funnel-A: 섀도우 페이지 덱 (한 페이지씩 암전 전환) ── */
  .deck { position: relative; width: 100%; height: 100dvh; min-height: 100vh; overflow: hidden; }
  .deck-page {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 46px 30px;
    opacity: 0; filter: blur(11px); transform: scale(1.035);
    pointer-events: none;
    transition: opacity 0.75s ease, filter 0.75s ease, transform 0.95s cubic-bezier(0.22,1,0.36,1);
    overflow-y: auto;
  }
  .deck-page.active { opacity: 1; filter: blur(0); transform: none; pointer-events: auto; }
  .deck-page .persona-portrait--video { width: 150px; height: 200px; }
  .deck-page .persona-bio, .deck-page .persona-line { font-size: 14px; }
  .deck-page .btn-primary, .deck-page .btn-secondary { max-width: 320px; }
  .deck-hint {
    position: absolute; bottom: 28px; left: 0; right: 0;
    font-size: 11px; color: var(--text3); letter-spacing: 0.12em;
    animation: lsbob 2s ease-in-out infinite;
  }
  .deck-cta { margin-top: 30px; }

  /* 그림자 암전 베일 — 페이지/섹션 전환 시 어둠으로 덮였다 떠오름 */
  .shadow-veil {
    position: fixed; inset: 0; z-index: 200;
    background: radial-gradient(ellipse at 50% 42%, #141417 0%, #060607 72%);
    opacity: 0; pointer-events: none;
    transition: opacity 0.42s ease;
  }
  .shadow-veil.on { opacity: 1; }

  /* ── funnel-B 확정: 단일 합본 랜딩 (히어로+훅+칼융+심리학자+영상) ── */
  .combined-landing { padding: 44px 0 56px; text-align: center; }
  .cl-hero { padding: 26px 0 48px; }
  .cl-hook { padding: 42px 0 46px; border-top: 1px solid var(--border); }
  .cl-authority { padding: 44px 0 8px; border-top: 1px solid var(--border); }
  .cl-jung-text {
    font-family: var(--serif); font-size: 14.5px; line-height: 2;
    color: var(--text2); word-break: keep-all; margin-bottom: 30px; font-weight: 300;
  }
  .cl-jung-text em { font-style: normal; color: var(--gold); }
  .cl-video {
    position: relative; width: 100%; max-width: 290px; aspect-ratio: 9/12;
    margin: 0 auto 22px; border: 1px solid var(--border2); border-radius: 14px;
    overflow: hidden; background: #061012; box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  }
  .cl-video video { width: 100%; height: 100%; object-fit: cover; }
  .cl-video::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, transparent 60%, rgba(6,16,18,0.85) 100%);
  }
  .cl-video-tag {
    position: absolute; bottom: 12px; left: 0; right: 0; z-index: 2;
    font-family: var(--serif); font-size: 11.5px; color: var(--text);
    text-shadow: 0 1px 6px rgba(0,0,0,0.85); letter-spacing: 0.06em;
  }
  .cl-bio {
    font-family: var(--serif); font-size: 14.5px; line-height: 1.95;
    color: var(--text2); word-break: keep-all; margin: 18px 4px 24px; font-weight: 300;
  }
  .cl-bio em { font-style: normal; color: var(--accent); }
  .cl-cta { margin-top: 30px; }
  .cl-cta-sub { font-size: 12px; color: var(--text3); margin-top: 12px; letter-spacing: 0.04em; }

  /* 무료 결과 ↔ 결제 병합 구분선 */
  .merge-divider { display: flex; align-items: center; gap: 14px; margin: 40px 0 28px; }
  .merge-divider::before, .merge-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
  }
  .merge-divider span { font-size: 11px; color: var(--text3); letter-spacing: 0.14em; white-space: nowrap; }

  /* ── 시네마 애니메이션 (무료 결과 직전) ── */
  .loading-screen.cinema { padding: 0; overflow: hidden; position: relative; min-height: 100svh; contain: paint; }
  .cinema-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0.30; filter: grayscale(0.25) contrast(1.05);
    animation: cinema-drift 18s ease-in-out infinite alternate;
    transition: opacity 0.35s ease;
  }
  @keyframes cinema-drift { 0% { transform: scale(1.04); } 100% { transform: scale(1.14); } }
  .cinema-scrim {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(8,8,10,0.5), rgba(5,5,7,0.95) 72%);
  }
  .cinema-stage {
    position: relative; z-index: 2; width: 100%; max-width: 100%; min-width: 0; min-height: 100svh;
    display: flex; align-items: center; justify-content: center; padding: 48px 32px;
  }
  .cinema-line {
    font-family: var(--serif); font-size: 20px; line-height: 1.9; font-weight: 300;
    color: var(--text); text-align: center; word-break: keep-all; width: 100%; max-width: 430px;
    opacity: 0; transform: translateY(16px); filter: blur(9px);
    transition: opacity 1s ease, transform 1.2s cubic-bezier(0.22,1,0.36,1), filter 1s ease;
    text-shadow: 0 2px 24px rgba(0,0,0,0.75);
  }
  .cinema-line.show { opacity: 1; transform: none; filter: blur(0); }
  .cinema-line em { font-style: normal; color: var(--gold); }
  .cinema-line strong { font-weight: 700; color: var(--accent); }
  .cinema-skip {
    position: absolute; top: 18px; right: 16px; z-index: 4;
    background: rgba(0,0,0,0.35); border: 1px solid var(--border); color: var(--text2);
    font-size: 12px; padding: 8px 14px; border-radius: 20px; cursor: pointer;
    letter-spacing: 0.04em; font-family: var(--sans); min-height: 40px;
  }
  .cinema-skip:hover { color: var(--text); border-color: var(--border2); }
  .cinema-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(229,201,138,0.08); z-index: 3; }
  .cinema-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--text3), var(--gold)); transition: width 0.45s linear; }

  /* 시네마 배경 다채롭게 — 오행 색 워시(비트별) + 부유 한자 */
  .cinema-wash { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0.55; transition: background 1.8s ease; }
  .cinema.c0 .cinema-wash { background: radial-gradient(circle at 30% 26%, rgba(78,90,150,0.34), transparent 60%); }
  .cinema.c1 .cinema-wash { background: radial-gradient(circle at 72% 30%, rgba(165,70,82,0.32), transparent 60%); }
  .cinema.c2 .cinema-wash { background: radial-gradient(circle at 40% 70%, rgba(186,152,92,0.30), transparent 62%); }
  .cinema.c3 .cinema-wash { background: radial-gradient(circle at 62% 62%, rgba(90,156,142,0.30), transparent 62%); }
  .cinema-scrim2 { position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(to bottom, rgba(6,6,8,0.5), transparent 30%, transparent 70%, rgba(6,6,8,0.7)); }
  .cinema-hanja { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
  .cinema-hanja span { position: absolute; font-family: var(--serif); font-weight: 700; color: rgba(229,201,138,0.06);
    animation: hanjaDrift 15s linear infinite; }
  @keyframes hanjaDrift {
    0% { transform: translateY(40px); opacity: 0; }
    18% { opacity: 1; } 82% { opacity: 1; }
    100% { transform: translateY(-130px); opacity: 0; }
  }

  /* ── 추상 그림자 앰비언트 (빨강×검정, 감각적) — 배경 공용 ── */
  .shadow-ambient { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 28%, #160809 0%, #0A0608 55%, #060406 100%); }
  .shadow-ambient::before, .shadow-ambient::after { content: ''; position: absolute; inset: -25%; }
  .shadow-ambient::before {
    background:
      radial-gradient(38% 46% at 28% 32%, rgba(178,34,46,0.36), transparent 62%),
      radial-gradient(44% 40% at 74% 58%, rgba(98,16,26,0.42), transparent 62%),
      radial-gradient(34% 44% at 56% 86%, rgba(202,52,60,0.20), transparent 60%);
    filter: blur(46px);
    animation: shadowdrift1 19s ease-in-out infinite alternate;
  }
  .shadow-ambient::after {
    background:
      radial-gradient(48% 42% at 62% 18%, rgba(0,0,0,0.72), transparent 64%),
      radial-gradient(42% 52% at 18% 72%, rgba(8,2,4,0.85), transparent 60%),
      radial-gradient(30% 30% at 85% 88%, rgba(0,0,0,0.62), transparent 60%);
    filter: blur(34px); mix-blend-mode: multiply;
    animation: shadowdrift2 24s ease-in-out infinite alternate;
  }
  @keyframes shadowdrift1 { 0% { transform: translate(-4%,-3%) scale(1.06) rotate(0deg); } 100% { transform: translate(6%,5%) scale(1.22) rotate(7deg); } }
  @keyframes shadowdrift2 { 0% { transform: translate(4%,3%) scale(1.12) rotate(0deg); } 100% { transform: translate(-6%,-4%) scale(1.28) rotate(-6deg); } }

  /* 랜딩 hero — 그림자 자아 씬 (액자형, 보이게) */
  .cl-hero .hero-redshadow { position: relative !important; left: auto; top: auto; transform: none;
    width: 80%; max-width: 300px; aspect-ratio: 4/5; height: auto; margin: 8px auto 24px;
    z-index: 1 !important; pointer-events: none; overflow: hidden; opacity: 1;
    border: 1px solid var(--border2); border-radius: 12px; box-shadow: 0 20px 54px rgba(0,0,0,0.6); }
  .hero-wall { position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 30%, #2c1517 0%, #160c0e 54%, #0a0607 100%); }
  .hero-wall::after { content: ''; position: absolute; inset: 0; opacity: 0.22; mix-blend-mode: multiply;
    background-image:
      repeating-linear-gradient(118deg, transparent 0 36px, rgba(0,0,0,0.55) 36px 37px),
      repeating-linear-gradient(58deg, transparent 0 50px, rgba(0,0,0,0.45) 50px 51px); }
  .hero-wall::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 50% 18%, transparent 52%, rgba(8,4,5,0.78) 100%); }
  .hero-shadowfig { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero-shadowfig .bigshadow { fill: #0c0608; transform-origin: 200px 210px; animation: bigsway 7.5s ease-in-out infinite; }
  @keyframes bigsway {
    0%,100% { transform: translateX(-6px) scaleY(1); opacity: 0.9; }
    50%     { transform: translateX(6px) scaleY(1.02); opacity: 1; }
  }
  .hero-shadowfig .frontfig { filter: drop-shadow(0 0 14px rgba(150,28,38,0.25)); }
  .hero-redglow { position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 54% at 50% 30%, rgba(168,32,42,0.28), transparent 66%);
    animation: redpulse 5s ease-in-out infinite; mix-blend-mode: screen; }
  @keyframes redpulse { 0%,100% { opacity: 0.5; } 50% { opacity: 0.9; } }

  /* 결과 한 줄씩 reveal */
  .rl-hidden { opacity: 0; }
  .rl-show { animation: reveal-line 1s cubic-bezier(0.16,1,0.3,1) both; }
  @keyframes reveal-line {
    0%   { opacity: 0; transform: translateY(24px) scale(0.965); filter: blur(9px); letter-spacing: 0.12em; }
    55%  { opacity: 1; filter: blur(0.5px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); letter-spacing: normal; }
  }
  .rd-fullblur.rl-show { animation-duration: 1.2s; }

  /* 블러 처리된 전체 결과 */
  .rd-fullblur { position: relative; margin: 8px 0 6px; border: 1px solid var(--border); border-radius: 14px; padding: 22px 20px; overflow: hidden; background: rgba(229,201,138,0.015); }
  .rd-fullblur-text { font-family: var(--serif); font-size: 13.5px; line-height: 1.95; color: var(--text2); filter: blur(6px); user-select: none; word-break: keep-all; }
  .rd-fullblur-mask { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 20px; background: radial-gradient(ellipse at center, rgba(13,13,16,0.55), rgba(13,13,16,0.85)); }
  .rd-fullblur-lk { font-size: 26px; opacity: 0.85; }
  .rd-fullblur-mask p { font-family: var(--serif); font-size: 14px; line-height: 1.7; color: var(--text); word-break: keep-all; }

  /* 할인 느낌 (가격 숫자 X) */
  .rd-discount { margin-top: 6px; }
  .rd-discount-badge { display: inline-block; font-size: var(--fs-body); font-weight: 700; color: var(--red); border: 1px solid rgba(159,61,53,0.4); border-radius: 24px; padding: 9px 18px; letter-spacing: 0.02em; }
  .rd-discount-cap { font-size: var(--fs-caption); color: var(--text3); margin-top: 12px; }
  .rd-sticky-tag { flex-shrink: 0; font-family: var(--serif); font-size: var(--fs-body-sm); font-weight: 700; color: var(--red); line-height: 1.25; }
  .rd-sticky-tag span { color: var(--text3); font-weight: 400; font-size: 11px; }

  /* ── 첫 화면 사주 비주얼 (명식·오행·한자) ── */
  .cl-hero { position: relative; }
  .cl-hero::before {
    content: '命'; position: absolute; top: 46%; left: 50%;
    transform: translate(-50%, -50%); font-family: var(--serif); font-weight: 700;
    font-size: 220px; line-height: 1; color: rgba(229,201,138,0.028);
    z-index: 0; pointer-events: none; user-select: none;
  }
  .cl-hero > * { position: relative; z-index: 1; }
  .ls-kicker .han { color: var(--gold); letter-spacing: 0.12em; }

  /* 사주 명식 (사주팔자 8글자 · 4기둥) */
  .saju-myeongsik {
    display: flex; justify-content: center; gap: 8px;
    margin: 4px auto 28px; max-width: 250px;
  }
  .sj-col {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
    border: 1px solid var(--border); border-radius: 7px; padding: 7px 0 9px;
    background: rgba(229,201,138,0.022);
  }
  .sj-label { font-family: var(--serif); font-size: 9px; color: var(--text3); letter-spacing: 0.1em; }
  .sj-ch { font-family: var(--serif); font-size: 19px; color: var(--silver); line-height: 1.15; }
  .sj-ji { font-size: 17px; color: var(--text2); }
  .sj-day { color: var(--gold); }            /* 일간(나) 강조 */
  .sj-col.is-day { border-color: rgba(209,163,94,0.4); background: rgba(209,163,94,0.05); }

  .cl-saju-cap {
    font-family: var(--serif); font-size: 12.5px; color: var(--text3);
    letter-spacing: 0.06em; margin-top: 22px;
  }

  /* === 첫 랜딩 등장 이펙트 — 그림자가 피어오르듯 순차 등장 (2026-06-26) === */
  @keyframes shadow-emerge {
    0%   { opacity: 0; transform: translateY(26px) scale(0.985); filter: blur(7px); }
    60%  { filter: blur(0.5px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  }
  @keyframes shadow-frame-in {
    0%   { opacity: 0; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
  }
  .cl-hero > .hero-redshadow {
    animation: shadow-frame-in 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .cl-hero > .ls-kicker,
  .cl-hero > .saju-myeongsik,
  .cl-hero > .ls-hero-title,
  .cl-hero > .ohaeng-row,
  .cl-hero > .cl-saju-cap {
    animation: shadow-emerge 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .cl-hero > .ls-kicker      { animation-delay: 0.40s; }
  .cl-hero > .saju-myeongsik { animation-delay: 0.80s; }
  .cl-hero > .ls-hero-title  { animation-delay: 1.20s; }
  .cl-hero > .ohaeng-row     { animation-delay: 1.85s; }
  .cl-hero > .cl-saju-cap    { animation-delay: 2.20s; }
  @media (prefers-reduced-motion: reduce) {
    .cl-hero > .hero-redshadow,
    .cl-hero > .ls-kicker,
    .cl-hero > .saju-myeongsik,
    .cl-hero > .ls-hero-title,
    .cl-hero > .ohaeng-row,
    .cl-hero > .cl-saju-cap { animation: none !important; }
  }

  /* === 스크롤 진입 시 떠오름 — 아래 랜딩 섹션 (2026-06-26) === */
  .sreveal {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(6px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .sreveal.is-in { opacity: 1; transform: none; filter: blur(0); }
  @media (prefers-reduced-motion: reduce) {
    .sreveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  }

  /* 피벗: "넌 너를 몰라" (그림자 코어 · 훅→권위 다리) */
  .cl-pivot { padding: 54px 0; border-top: 1px solid var(--border); text-align: center; position: relative; }
  .cl-pivot-line { font-family: var(--serif); font-size: 15px; color: var(--text3); margin-bottom: 16px; word-break: keep-all; }
  .cl-pivot-big { font-family: var(--serif); font-size: 27px; font-weight: 700; color: var(--text); line-height: 1.45; word-break: keep-all; }
  .cl-pivot-big em { font-style: normal; color: var(--silver); }
  .cl-pivot-sub { font-family: var(--serif); font-size: 13.5px; color: var(--text3); margin-top: 18px; line-height: 1.8; word-break: keep-all; }

  /* ── 정보 입력 한 페이지 (위저드 → 단일 폼) ── */
  #sec-form .wizard-step { display: block !important; }
  #sec-form .wizard-step + .wizard-step {
    margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border);
  }
  #sec-form .wizard-step .form-title { font-size: 17px; line-height: 1.4; }
  #sec-form .wizard-step .form-desc { margin-top: 6px; margin-bottom: 4px; }
  #sec-form .wizard-progress, #sec-form .wizard-step-count { display: none !important; }

  /* ── 폼 v2: Figma 260826_입력란페이지 시안 반영 ── */
  /* 시안 비율(450px 캔버스 : 390px 컨텐츠, 좌우 30px)을 전체 폭(460px)은 바꾸지 않고 이 화면에만 적용 */
  #sec-form .wrap { padding: 0 30px; }
  #sec-form .wizard-panel.formv2 {
    background: linear-gradient(to bottom, rgba(13,13,16,0.55) 0%, rgba(13,13,16,0.93) 12%, rgba(13,13,16,0.97) 100%);
    padding: 34px 0 30px;
    border: none; border-radius: 24px 24px 0 0; backdrop-filter: blur(3px);
  }
  .fv-head { text-align: center; margin-bottom: 44px; }
  .fv-symbol { display: block; margin: 0 auto 24px; width: 43px; height: 43px; object-fit: contain; }
  .fv-head-eyebrow { font-family: 'Pretendard Variable', Pretendard, var(--sans); font-weight: 500; font-size: 16px; color: var(--text); letter-spacing: -0.025em; margin-bottom: 4px; }
  .fv-head-title { font-family: var(--serif); font-weight: 700; font-size: 24px; color: var(--text); letter-spacing: -0.025em; line-height: 1.3; word-break: keep-all; }
  .fv-field { margin-bottom: 24px; }
  .fv-field > label { display: block; font-family: 'Pretendard Variable', Pretendard, var(--sans); font-weight: 600; font-size: 16px; color: var(--text); margin-bottom: 10px; letter-spacing: -0.025em; }
  .fv-hint { font-size: 12px; color: var(--text3); margin-top: 10px; }
  /* 호명 — 이름 인풋 + 성별 버튼 한 행 */
  .fv-row { display: flex; gap: 4px; }
  .fv-name-input { flex: none; width: 200px; }
  .fv-gender { flex: 1; gap: 4px; }
  .formv2 .radio-option input:checked + .radio-label { border-color: var(--red); background: rgba(159,61,53,0.12); color: var(--text); }
  /* 양/음력 체크 아이콘 스타일은 붉은 박스 강조를 받지 않는다 */
  .formv2 .cal-inline .radio-option input:checked + .radio-label { border: none; background: transparent; }
  .formv2 .fv-cta { background: transparent; color: #F0DCC5; border: 1px solid rgba(212,197,169,0.8); border-radius: 4px; font-family: 'Pretendard Variable', Pretendard, var(--sans); font-weight: 500; font-size: 16px; letter-spacing: -0.02em; padding: 16px 24px; min-height: 0; margin-top: 12px; }
  .formv2 .fv-cta:hover { background: transparent; transform: translateY(-1px); }
  .fv-back { display: block; margin: 18px auto 0; background: none; border: none; color: var(--text3); font-size: 13px; cursor: pointer; padding: 8px; text-decoration: underline; text-underline-offset: 3px; }
  .fv-back:hover { color: var(--text2); }

  /* ══ 마지막 페이지 (무료 결과 + 결제 병합) ══ */
  #teaser-result { padding-bottom: 120px; }

  /* 가면지수 점수 헤더 */
  .rd-scorehead { text-align: center; padding: 18px 6px 30px; border-bottom: 1px solid var(--border); }
  .rd-score-label { font-family: var(--serif); font-size: 11px; letter-spacing: 0.2em; color: var(--text3); margin-bottom: 16px; }
  .rd-score-num { font-family: var(--serif); font-weight: 700; line-height: 1; }
  .rd-score-num span { font-size: 78px; background: linear-gradient(135deg,#E6D9B8,#D1A35E 55%,#86694593); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .rd-score-num i { font-style: normal; font-size: 18px; color: var(--text3); margin-left: 6px; }
  .rd-score-bar { height: 3px; background: rgba(229,201,138,0.1); margin: 18px auto 18px; max-width: 280px; overflow: hidden; }
  .rd-score-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--text3), var(--gold)); transition: width 1.4s cubic-bezier(0.22,1,0.36,1); }
  .rd-score-cap { font-family: var(--serif); font-size: 15px; color: var(--text2); line-height: 1.75; word-break: keep-all; }
  .rd-score-by { font-family: var(--serif); font-size: 11.5px; color: var(--text3); margin-top: 14px; }

  .rd-red { color: var(--red); }
  .rd-red-u { color: var(--red); border-bottom: 1px solid rgba(159,61,53,0.5); }
  .rd-gold { color: var(--gold); }

  /* 1) intro */
  .rd-intro { text-align: center; padding: 30px 6px 8px; }
  .rd-soft { font-family: var(--serif); font-size: 15.5px; color: var(--text2); line-height: 1.9; word-break: keep-all; }
  .rd-quote { font-family: var(--serif); font-size: 16px; color: var(--text); margin-top: 8px; }
  .rd-dim { font-family: var(--serif); font-size: 14px; color: var(--text3); margin-top: 6px; }
  .rd-strong { font-family: var(--serif); font-size: 15px; color: var(--text); margin-top: 22px; }

  /* 2) twist */
  .rd-twist { padding: 30px 6px 10px; text-align: center; }
  .rd-twist-line { font-family: var(--serif); font-size: 16px; line-height: 1.95; color: var(--text); word-break: keep-all; }
  .rd-blur-tail { font-family: var(--serif); font-size: 13.5px; line-height: 1.9; color: var(--text2); margin-top: 12px; filter: blur(5px); user-select: none; word-break: keep-all; }

  .rd-leadin { text-align: center; padding: 20px 6px 28px; }
  .rd-leadin p { font-family: var(--serif); font-size: 14.5px; line-height: 1.8; color: var(--text2); word-break: keep-all; }
  .rd-leadin strong { color: var(--text); font-weight: 600; }
  .rd-dim2 { color: var(--text3) !important; margin-top: 6px; }

  .rd-saju-map { display: none; border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin: 0 0 18px; background: linear-gradient(180deg, rgba(229,201,138,0.045), rgba(0,0,0,0.12)); }
  .rd-saju-map.on { display: block; }
  .rd-saju-map-title { font-family: var(--serif); font-size: 12px; letter-spacing: 0.16em; color: var(--gold); margin-bottom: 12px; text-align: center; }

  /* 3) domain cards */
  .rd-domain { border: 1px solid var(--border); border-radius: 14px; padding: 18px 18px 0; margin-bottom: 16px; background: rgba(229,201,138,0.015); overflow: hidden; }
  .rd-chip { display: inline-block; font-size: 12px; color: var(--red); border: 1px solid rgba(159,61,53,0.3); border-radius: 20px; padding: 4px 12px; margin-bottom: 14px; letter-spacing: 0.04em; }
  .rd-domain-body { font-family: var(--serif); font-size: 14px; line-height: 1.85; color: var(--text); word-break: keep-all; }
  .rd-domain-blur { font-family: var(--serif); font-size: 13.5px; line-height: 1.85; color: var(--text2); margin-top: 10px; filter: blur(5px); user-select: none; word-break: keep-all; }
  .rd-domain-lock { margin: 14px -18px 0; padding: 13px; text-align: center; font-size: 12px; color: var(--text3); border-top: 1px solid var(--border); background: rgba(0,0,0,0.25); }

  /* 4) shadow head + locklist */
  .rd-shadow-head { text-align: center; padding: 34px 6px 22px; }
  .rd-sh-title { font-family: var(--serif); font-size: 17px; color: var(--text); }
  .rd-sh-title strong { color: var(--accent); font-weight: 700; }
  .rd-locklist { display: flex; flex-direction: column; gap: 9px; }
  .rd-lock-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 15px 16px; font-family: var(--serif); font-size: 13.5px; color: var(--text2); background: linear-gradient(180deg, rgba(229,201,138,0.02), transparent); }
  .rd-lock-row .lk { font-size: 13px; opacity: 0.7; }

  /* 5) six grid */
  .rd-six-head { text-align: center; padding: 36px 6px 18px; }
  .rd-six-label { font-size: 11px; letter-spacing: 0.14em; color: var(--text3); margin-bottom: 14px; }
  .rd-six-title { font-family: var(--serif); font-size: 16px; color: var(--text); }
  .rd-six-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .rd-six-cell { border: 1px solid var(--border); border-radius: 10px; padding: 16px 6px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 96px; justify-content: center; }
  .rd-six-nm { font-family: var(--serif); font-size: 13px; color: var(--text2); }
  .rd-six-lk { font-size: 16px; opacity: 0.6; }
  .rd-six-foot { font-size: 9.5px; color: var(--text3); }
  .rd-six-cell.open { border-color: rgba(209,163,94,0.4); background: rgba(209,163,94,0.05); }
  .rd-six-score { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--gold); }
  .rd-six-dots { font-size: 9px; color: var(--red); letter-spacing: 2px; }

  /* 6) paycard */
  .rd-paycard { border: 1px solid var(--border2); border-radius: 16px; padding: 32px 22px 26px; margin-top: 34px; text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(229,201,138,0.05), transparent 70%); }
  .rd-pay-lock { font-size: 30px; margin-bottom: 18px; }
  .rd-pay-sub { font-family: var(--serif); font-size: var(--fs-body-sm); line-height: 1.8; color: var(--text3); margin-top: 14px; word-break: keep-all; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
  .rd-paycard .toast { justify-content: center; margin: 20px 0 18px; opacity: 1; }
  .rd-price { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-top: 4px; }
  .rd-price-old { font-size: var(--fs-body); color: var(--text3); text-decoration: line-through; }
  .rd-price-now { font-family: var(--serif); font-size: 36px; font-weight: 700; color: var(--text); }
  .rd-price-now i { font-style: normal; font-size: 20px; }
  .rd-price-urgency { font-size: var(--fs-caption); color: var(--red); margin-top: 12px; letter-spacing: 0.02em; }
  .rd-price-urgency .countdown-timer { color: var(--red); font-size: 12px; }
  .rd-kakao { display: block; width: 100%; margin: 18px 0 10px; padding: 14px; border: none; border-radius: 30px; background: #FEE500; color: #181600; font-family: var(--sans); font-weight: 700; font-size: 13.5px; cursor: pointer; }
  .rd-cta { border-radius: 30px; background: linear-gradient(180deg,#A4493A,#6F2928); color: #fff; }
  .rd-pay-note { font-size: var(--fs-caption); color: var(--text3); margin-top: 14px; }
  .rd-fine { font-size: var(--fs-micro); line-height: 1.7; color: var(--legal-fine); margin-top: 16px; text-align: left; word-break: keep-all; }
  .rd-fine b { color: var(--text3); font-weight: 600; }

  /* 7) reviews */
  .rd-reviews { margin-top: 34px; }
  .rd-rv-label { font-size: var(--fs-caption); letter-spacing: 0.1em; color: var(--text3); margin-bottom: 14px; }
  .rd-rv { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 10px; background: var(--bg2); }
  .rd-rv-stars { color: var(--gold); font-size: var(--fs-micro); letter-spacing: 2px; margin-bottom: 8px; }
  .rd-rv-text { font-family: var(--serif); font-size: var(--fs-body-sm); line-height: 1.8; color: var(--text2); word-break: keep-all; }
  .rd-rv-meta { font-size: var(--fs-micro); color: var(--text3); margin-top: 10px; display: flex; align-items: center; justify-content: space-between; }
  .rd-rv-meta .rv-who { display: flex; align-items: center; }
  .rd-rv-meta .rv-date { color: var(--text3); opacity: .65; font-size: var(--fs-micro); }
  .rd-rv-ilju { display: inline-block; font-size: var(--fs-micro); color: var(--gold); border: 1px solid rgba(209,163,94,.35); border-radius: 20px; padding: 2px 9px; margin-right: 7px; letter-spacing: .04em; }
  .rd-rv-summary { display: flex; align-items: baseline; gap: 9px; margin-bottom: 14px; }
  .rd-rv-score { font-family: var(--serif); font-size: var(--fs-title-2); font-weight: 800; color: var(--text); line-height: 1; }
  .rd-rv-sum-stars { color: var(--gold); font-size: var(--fs-body-sm); letter-spacing: 2px; }
  .rd-rv-count { font-size: var(--fs-caption); color: var(--text3); }
  .rd-rv-more { display: block; width: 100%; margin-top: 4px; padding: 14px; background: none; border: 1px solid var(--border2); border-radius: 12px; color: var(--text2); font-family: var(--serif); font-size: var(--fs-body-sm); letter-spacing: .02em; cursor: pointer; }
  .rd-rv-more:active { background: var(--bg2); }
  .rd-rv-btns { display: flex; gap: 8px; }
  .rd-rv-btns .rd-rv-more { flex: 1; }

  /* 오행별 일주 뱃지 색 */
  .rd-rv-ilju.el-목 { color: #8fbf7f; border-color: rgba(143,191,127,.4); }
  .rd-rv-ilju.el-화 { color: #d98a7a; border-color: rgba(217,138,122,.4); }
  .rd-rv-ilju.el-토 { color: #d1a35e; border-color: rgba(209,163,94,.4); }
  .rd-rv-ilju.el-금 { color: #b9c2c9; border-color: rgba(185,194,201,.4); }
  .rd-rv-ilju.el-수 { color: #7fa8c9; border-color: rgba(127,168,201,.4); }

  /* 카드 상단(별점+공감) */
  .rd-rv-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .rd-rv-top .rd-rv-stars { margin-bottom: 0; }
  .rv-like { background: none; border: 1px solid var(--border2); border-radius: 20px; color: var(--text3); font-size: var(--fs-micro); padding: 4px 11px; cursor: pointer; letter-spacing: .03em; }
  .rv-like.on { color: #d98a7a; border-color: rgba(217,138,122,.5); }
  .rv-like:active { background: var(--bg3); }

  /* 필터(오행)·정렬 컨트롤 */
  .rv-controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .rv-el-tabs { display: flex; gap: 6px; }
  .rv-el-tabs button { flex: 1; padding: 9px 0; background: none; border: 1px solid var(--border); border-radius: 10px; color: var(--text3); font-size: 12.5px; font-family: var(--serif); cursor: pointer; }
  .rv-el-tabs button.on { color: var(--gold); border-color: rgba(209,163,94,.5); background: rgba(209,163,94,.07); }
  .rv-el-tabs button.on[data-el="목"] { color: #8fbf7f; border-color: rgba(143,191,127,.5); background: rgba(143,191,127,.07); }
  .rv-el-tabs button.on[data-el="화"] { color: #d98a7a; border-color: rgba(217,138,122,.5); background: rgba(217,138,122,.07); }
  .rv-el-tabs button.on[data-el="금"] { color: #b9c2c9; border-color: rgba(185,194,201,.5); background: rgba(185,194,201,.07); }
  .rv-el-tabs button.on[data-el="수"] { color: #7fa8c9; border-color: rgba(127,168,201,.5); background: rgba(127,168,201,.07); }
  .rv-sort { display: flex; gap: 14px; justify-content: flex-end; }
  .rv-sort button { background: none; border: none; color: var(--text3); font-size: 12px; cursor: pointer; padding: 2px 0; }
  .rv-sort button.on { color: var(--text); font-weight: 700; }
  .rv-sort button.on::before { content: "✓ "; color: var(--gold); }

  /* 후기 작성 폼 */
  .rv-write { border: 1px solid rgba(209,163,94,.35); border-radius: 12px; background: rgba(209,163,94,.05); padding: 16px 18px; margin-bottom: 18px; }
  .rv-write-title { font-family: var(--serif); font-size: var(--fs-body-sm); font-weight: 700; color: var(--text); margin-bottom: 10px; }
  .rv-write-stars { display: flex; gap: 4px; margin-bottom: 10px; }
  .rv-write-stars button { background: none; border: none; font-size: 22px; color: var(--bg3); cursor: pointer; padding: 0 2px; line-height: 1; }
  .rv-write-stars button.on { color: var(--gold); }
  .rv-write textarea { width: 100%; min-height: 84px; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 13.5px; line-height: 1.7; padding: 12px 14px; resize: vertical; font-family: inherit; }
  .rv-write-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
  .rv-write-note { font-size: var(--fs-micro); color: var(--text3); }
  .rv-write-submit { padding: 10px 22px; border: none; border-radius: 10px; background: linear-gradient(180deg,#A4493A,#6F2928); color: #fff; font-family: var(--serif); font-weight: 700; font-size: var(--fs-body-sm); cursor: pointer; }
  .rv-write-submit:disabled { opacity: .5; cursor: default; }
  .rv-empty { text-align: center; color: var(--text3); font-size: var(--fs-caption); padding: 28px 0; }

  /* 후기 전체보기 오버레이 */
  .rv-modal { position: fixed; inset: 0; z-index: 210; background: var(--bg); display: none; flex-direction: column; }
  .rv-modal.open { display: flex; }
  .rv-modal-head { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 460px; margin: 0 auto; padding: 16px 20px 14px; border-bottom: 1px solid var(--border); }
  .rv-modal-title { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--text); }
  .rv-modal-close { background: none; border: none; color: var(--text2); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 6px; }
  .rv-modal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .rv-modal-inner { max-width: 460px; margin: 0 auto; padding: 20px 20px 60px; }
  .rv-modal-sum { display: flex; align-items: baseline; gap: 9px; padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }

  /* sticky bottom */
  .rd-sticky { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 460px; z-index: 90; display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: rgba(7,19,22,0.96); border-top: 1px solid var(--border2); backdrop-filter: blur(8px); }
  /* 모바일 브라우저 동적 툴바(주소창 접힘/펼침)로 뷰포트 높이가 흔들릴 때 도크 아래로 실제 화면
     배경이 순간 노출되는 것을 막는 여분 배경 (22b2f94 #landing-fixed-cta 와 동일 패턴). 도크 자체
     높이·버튼 위치는 그대로 두고 화면 밖(아래)으로만 같은 색을 더 깔아둔다. */
  .rd-sticky::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 150px; background: rgba(7,19,22,0.96); }
  .rd-sticky-price { display: flex; flex-direction: column; line-height: 1.2; flex-shrink: 0; }
  .rd-sticky-price .s-old { font-size: 11px; color: var(--text3); text-decoration: line-through; }
  .rd-sticky-price .s-now { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--text); }
  .rd-sticky-cta { flex: 1; padding: 15px; border: none; border-radius: 12px; background: linear-gradient(180deg,#A4493A,#6F2928); color: #fff; font-family: var(--serif); font-weight: 700; font-size: var(--fs-body); cursor: pointer; }
  /* 무료결과 공유 토스트 — 공유 시트(.v4-share-sheet, z-index 9990) 위에 떠야 한다.
     하단 고정바(.rd-sticky)는 z-index:90 으로 자체 쌓임맥락을 만들어 그 자식은 90 을 못 넘는다.
     그래서 바 바깥의 독립 fixed 레이어로 둔다. 문구가 길어질 수 있어 nowrap 은 쓰지 않는다.
     bottom 88px = 단일 CTA 바 높이 73px(375·데스크톱 동일) + 여백 15px. */
  .rd-share-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(88px + env(safe-area-inset-bottom));
    z-index: 9995; max-width: min(340px, calc(100% - 28px)); padding: 9px 14px; border-radius: 10px;
    background: rgba(47,36,29,0.92); color: #F4ECD9; border: 1px solid rgba(191,164,122,0.5);
    font-family: var(--serif); font-size: 12.5px; line-height: 1.4; text-align: center;
    opacity: 0; visibility: hidden; transition: opacity 0.25s; pointer-events: none; }
  .rd-share-toast.show { opacity: 1; visibility: visible; }

  /* ── 커스텀 공유 시트 (Figma 652:1205) ───────────────────────────────
     시안은 하단 바텀시트가 아니라 딤 위에 뜬 '가운데 정렬 흰 카드'다(400×319, radius 4,
     패딩 24/28/20). 올라오는 모션은 살리되 최종 위치는 시안대로 가운데. */
  .v4-share-mask { position: fixed; inset: 0; z-index: 9990; display: none;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(0,0,0,0.55); }
  .v4-share-mask.on { display: flex; }
  .v4-share-sheet { position: relative; width: 100%; max-width: 400px;
    background: #fff; border-radius: 4px; padding: 24px 28px 20px;
    font-family: 'Pretendard Variable', Pretendard, var(--sans);
    animation: v4ShareUp 0.22s ease-out; }
  @keyframes v4ShareUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  /* 닫기 = 40×40 흰 원. 시안(652:2529)은 카드 우상단 '밖으로' 20 씩 걸쳐 있다. */
  .v4-share-x { position: absolute; top: -20px; right: -20px; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 40px; background: #fff; cursor: pointer;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2)); }
  .v4-share-x svg { display: block; width: 20px; height: 20px; }
  /* 아이콘 그리드 — 원형 60px + 라벨 13px Medium 자간 -0.4, 3열 2행(열간격 40 / 행간격 21.5).
     아이콘은 피그마 원본 export(652:2501·2505·2509·2513·2517·2521, @3x)를 그대로 커밋해 쓴다. */
  .v4-share-grid { display: grid; grid-template-columns: repeat(3, 60px);
    justify-content: center; column-gap: 40px; row-gap: 21.5px; margin-bottom: 24px; }
  .v4-share-ch { display: flex; flex-direction: column; align-items: center; gap: 10px;
    border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; }
  .v4-share-ch img { width: 60px; height: 60px; border-radius: 30px; object-fit: cover; display: block; }
  .v4-share-ch span { font-size: 13px; font-weight: 500; color: #000; letter-spacing: -0.4px; line-height: 1; }
  /* 주소줄 — 입력칸 #F9F9F9/보더 #000(260728 요청: 링크 칸 테두리를 찐한 검정으로),
     텍스트 비활성 톤 #D3D3D3, 복사 버튼 보더 #D9D9D9. 둘 다 radius 4 · 높이 40 */
  .v4-share-url { display: flex; gap: 6px; height: 40px; }
  .v4-share-url input { flex: 1; min-width: 0; height: 40px; padding: 0 12px;
    border: 1px solid #000; border-radius: 4px; background: #F9F9F9;
    font-family: inherit; font-size: 14px; letter-spacing: -0.4px; color: #D3D3D3;
    text-align: center; text-overflow: ellipsis; }
  .v4-share-copy { flex: 0 0 95px; height: 40px; border: 0.667px solid #D9D9D9; border-radius: 4px;
    background: #fff; font-family: inherit; font-size: 13px; font-weight: 500; color: #000; cursor: pointer; }
  /* 좁은 화면에선 카드가 화면폭까지 차서 닫기 버튼이 화면 밖으로 나간다 → 안쪽으로 당긴다 */
  @media (max-width: 420px) {
    .v4-share-sheet { padding: 24px 20px 20px; }
    .v4-share-grid { column-gap: 24px; }
    .v4-share-x { top: -16px; right: -6px; }
  }

  /* ═══════════════ ver.4 무료결과/페이월 — 다크 리포트 서피스 (.v4-) ═══════════════ */
  #teaser-result.v4-on { background:var(--bg); color:var(--text); padding:6px 0 0; }
  .v4-doc, .v4-doc * { word-break: keep-all; }
  .v4-sec { padding: 42px 4px; }
  .v4-sec.tight { padding: 30px 4px; }

  .v4-eyebrow { font-family:var(--serif); font-size:14px; color:var(--text3); margin-bottom:14px; text-align:center; }
  .v4-h { font-family:var(--serif); font-size:25px; font-weight:800; line-height:1.44; color:var(--text); text-align:center; }
  .v4-h b { color:var(--accent); }
  .v4-sub { font-family:var(--serif); font-size:14.5px; line-height:1.9; color:var(--text2); text-align:center; }
  .v4-cap { font-size:10.5px; line-height:1.75; color:var(--text3); margin-top:16px; text-align:center; }

  /* 히어로 */
  .v4-hero { padding: 30px 6px 4px; }

  /* 가면 분석 배너 + 이름배지 + 게이지 */
  .v4-banner { margin:2px auto 0; padding:20px 22px; border:1px solid var(--border2); border-top:2px solid var(--gold); border-bottom:2px solid var(--gold); border-radius:4px; background:linear-gradient(180deg, rgba(209,163,94,.07), rgba(209,163,94,0)); text-align:center; }
  .v4-banner-eyebrow { font-family:var(--serif); font-size:10px; letter-spacing:.22em; color:var(--gold); margin-bottom:11px; }
  .v4-banner-title { font-family:var(--serif); font-size:20px; font-weight:800; color:var(--text); letter-spacing:.02em; }
  .v4-banner-title b { color:var(--accent); }
  .v4-banner-sub { font-family:var(--serif); font-style:italic; font-size:12px; color:var(--text2); margin-top:9px; letter-spacing:.02em; }
  .v4-namebadge { text-align:center; margin:26px auto 2px; }
  .v4-name { display:inline-block; background:var(--bg3); color:var(--text); font-family:var(--serif); font-weight:700; font-size:16px; letter-spacing:.02em; padding:8px 30px; border-radius:3px 3px 0 0; border:1px solid var(--border2); border-bottom:none; }
  .v4-birth { display:inline-block; background:var(--bg3); color:var(--text2); font-size:11px; letter-spacing:.03em; padding:7px 16px 8px; border:1px solid var(--border2); border-radius:0 0 3px 3px; }
  .v4-gauge { width:212px; height:212px; margin:24px auto 0; position:relative; }
  .v4-gauge-ring { width:100%; height:100%; border-radius:50%;
    background: conic-gradient(var(--gold) 0deg, var(--accent) var(--v4-deg,300deg), var(--bg3) var(--v4-deg,300deg) 360deg);
    -webkit-mask: radial-gradient(circle, transparent 79px, #000 80px); mask: radial-gradient(circle, transparent 79px, #000 80px); }
  .v4-gauge-core { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .v4-gauge-lbl { font-family:var(--serif); font-size:12px; letter-spacing:.16em; color:var(--gold); }
  .v4-gauge-num { font-family:var(--serif); font-size:74px; font-weight:800; color:var(--accent); line-height:1; margin:2px 0; }
  .v4-gauge-sub { font-family:var(--serif); font-size:14px; color:var(--text2); }

  /* 가면유형 4아이콘 스트립 */
  .v4-strip { display:flex; align-items:flex-start; justify-content:center; gap:2px; margin:6px auto 0; }
  .v4-strip-item { display:flex; flex-direction:column; align-items:center; gap:7px; width:66px; }
  .v4-strip-seal { width:50px; height:50px; object-fit:contain; filter:grayscale(.6) opacity(.5); transition:.3s; }
  .v4-strip-lbl { font-family:var(--serif); font-size:10.5px; color:var(--text3); text-align:center; line-height:1.3; }
  .v4-strip-item.active .v4-strip-seal { filter:none; transform:scale(1.1); }
  .v4-strip-item.active .v4-strip-lbl { color:var(--accent); font-weight:700; }
  .v4-strip-arrow { align-self:center; margin-top:16px; color:var(--text3); font-size:11px; }

  /* 선택 유형 카드 (다크 초상) */
  .v4-typecard { margin:24px 0 0; border:1px solid var(--border2); border-radius:8px; background:var(--bg2); padding:18px 16px; }
  .v4-typecard-body { display:flex; gap:14px; align-items:center; }
  .v4-typecard-face { width:100px; flex-shrink:0; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.5); }
  .v4-typecard-desc { font-family:var(--serif); font-size:12px; line-height:1.75; color:var(--text2); }

  .v4-typecard-future { margin-top:14px; padding-top:13px; border-top:1px dashed var(--border); font-family:var(--serif); font-size:12px; line-height:1.75; color:var(--text2); }
  .v4-kw { filter:blur(5px); color:var(--gold); font-weight:700; user-select:none; }
  .v4-lock { font-size:11px; }

  /* 전환 키워드 박스 */
  .v4-kwbox { border:1px solid var(--border); background:var(--bg2); border-radius:6px; padding:15px 16px; margin-bottom:12px; }
  .v4-kwbox-h { font-family:var(--serif); font-weight:700; font-size:14px; color:var(--accent); margin-bottom:8px; }
  .v4-kwbox-p { font-size:12.5px; line-height:1.8; color:var(--text2); }

  /* 위기 예고 */
  .v4-crisis-q { font-family:var(--serif); font-size:19px; font-weight:800; color:var(--text); text-align:center; }
  .v4-crisis-p { font-family:var(--serif); font-size:14px; line-height:1.95; color:var(--text2); text-align:center; margin-top:16px; }
  .v4-crisis-p b { color:var(--red); }
  .v4-crisislist { background:var(--bg2); border:1px solid var(--border); border-radius:6px; padding:24px 22px; margin-top:28px; }
  .v4-crisislist-h { font-family:var(--serif); font-size:18px; color:var(--text2); margin-bottom:14px; }
  .v4-crisis-ol { list-style:none; counter-reset:v4c; }
  .v4-crisis-row { counter-increment:v4c; font-family:var(--serif); font-size:14px; color:var(--text2); padding:9px 0; }
  .v4-crisis-row::before { content:counter(v4c)". "; color:var(--gold); }
  .v4-crisis-row.locked .v4-blurtext { filter:blur(3.5px); color:var(--text3); }
  .v4-crisis-eyebrow { font-family:var(--serif); font-size:13px; color:var(--text3); text-align:center; margin-bottom:8px; letter-spacing:.02em; }
  .v4-lock-badge { text-align:center; font-size:34px; line-height:1; margin-bottom:18px; filter:sepia(.25); }
  .v4-kwbox-p .v4-blurtext { filter:blur(4px); user-select:none; }
  /* 서사(연도예측·거울유형 설명) 앞 2줄만 공개, 나머지 블러(궁금증 유발) */
  .v4-blurtail { filter:blur(4px); color:var(--text3); user-select:none; }

  /* 운명의 이면 — 카를 융 아카이브 (다크 인서트) */
  .v4-archive { margin:34px 0 0; border-radius:12px; overflow:hidden; position:relative; padding:36px 22px 30px; background:#0e1518; border:1px solid var(--border); }
  .v4-archive::before { content:''; position:absolute; inset:0; background:url('/static/img/Carl3.webp') center/cover; opacity:.5; }
  .v4-archive::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,14,16,.72), rgba(8,14,16,.9)); }
  .v4-archive > * { position:relative; z-index:2; }
  .v4-archive-tag { font-family:var(--serif); font-size:12px; letter-spacing:.04em; color:#c8b48c; text-align:center; margin-bottom:14px; }
  .v4-archive-h { font-family:var(--serif); font-size:18px; font-weight:800; color:#f0e7d6; text-align:center; line-height:1.6; }
  .v4-archive-sub { font-family:var(--serif); font-size:12.5px; color:#b3a78f; text-align:center; margin-top:10px; }
  .v4-archive .rd-saju-map { opacity:1; transform:none; margin-top:22px; }

  /* 명식 지도 viz (8자표 + 요약 pill + 오행 펜타그램·막대) — 유료 리포트 명식과 동일 형식 */
  .v4-myeongsik { margin-top:20px; }
  .v4-ms-table { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
  .v4-ms-col { display:flex; flex-direction:column; gap:7px; min-width:0; }
  .v4-ms-cell { position:relative; border:1px solid var(--border); border-radius:12px; padding:13px 4px 11px; text-align:center; background:rgba(255,255,255,.03); }
  .v4-ms-cell.ilgan { box-shadow:0 0 0 1px rgba(229,201,138,.18); }
  .v4-ms-crown { position:absolute; top:-9px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:9px; font-weight:700; letter-spacing:.04em; color:var(--gold); background:#0e1518; border:1px solid rgba(229,201,138,.4); border-radius:999px; padding:2px 8px; }
  .v4-ms-sipsin { font-family:var(--serif); font-size:10.5px; line-height:1.2; min-height:14px; color:var(--text3); margin-bottom:3px; }
  .v4-ms-sipsin.day { color:var(--accent); font-weight:700; }
  .v4-ms-hanja { font-family:var(--serif); font-size:29px; font-weight:700; line-height:1.05; }
  .v4-ms-kr { font-size:11px; color:#c4c8ce; margin-top:3px; }
  .v4-ms-kr .v4-ms-oh { font-size:10px; color:#868d96; margin-left:2px; }
  .v4-ms-empty { color:#5a6168; padding:22px 4px 20px; font-size:20px; }
  .v4-ms-note { display:block; font-size:9.5px; color:var(--text3); margin-top:6px; }
  /* 요약 pill (일간·격·신강신약·용신) */
  .v4-chips { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:16px 0 2px; }
  .v4-chip { font-size:11.5px; color:#c4c8ce; border:1px solid var(--border2); border-radius:999px; padding:6px 13px; letter-spacing:.02em; background:rgba(0,0,0,.18); }
  .v4-chip b { color:var(--gold); font-weight:600; margin-right:4px; font-size:10px; letter-spacing:.04em; }
  /* 오행 분포(펜타그램·생극) + 오행 세기(세로 막대) */
  .v4-oh-wrap { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; align-items:end; }
  /* #4: 만세력 아래 오행/그래프는 밑으로 갈수록 흐릿하게(유료 유도). 표는 선명, 차트만 페이드. */
  .v4-oh-fade { -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%); mask-image:linear-gradient(180deg,#000 72%,transparent 100%); }
  .v4-oh-panel h3 { margin:0 0 10px; font-size:10.5px; font-weight:600; color:var(--text3); letter-spacing:.14em; }
  .v4-penta-wrap { position:relative; }
  .v4-penta-lg { display:flex; gap:10px; font-size:9.5px; letter-spacing:.02em; margin:0 0 2px 2px; }
  .v4-penta-lg-s { color:#9ea3b4; }
  .v4-penta-lg-k { color:#d4535a; }
  .v4-penta { width:100%; height:auto; display:block; margin:0 auto; }
  .v4-penta-h { font-family:var(--serif); font-size:26px; font-weight:700; }
  .v4-penta-n { font-size:14px; font-weight:600; font-family:var(--sans); }
  .v4-penta-sheng { fill:none; stroke:rgba(158,163,180,.42); stroke-width:1.5; }
  .v4-penta-ke { stroke:rgba(212,83,90,.6); stroke-width:1.6; stroke-dasharray:3 4; }
  .v4-vbars { display:flex; align-items:flex-end; justify-content:space-around; gap:5px; min-height:150px; padding-top:4px; }
  .v4-vbar { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; flex:1; }
  .v4-vbar.zero { opacity:.4; }
  .v4-vb-n { font-size:11px; font-weight:700; color:#c4c8ce; margin-bottom:4px; }
  .v4-vb-fill { width:18px; border-radius:5px 5px 0 0; min-height:6px; display:block; }
  .v4-vb-lb { font-family:var(--serif); font-size:12px; font-weight:700; margin-top:6px; }

  /* 목차 프리뷰 */
  .v4-toc-box { background:var(--bg2); border:1px solid var(--border); border-radius:4px; padding:22px 20px; margin-bottom:16px; }
  .v4-toc-h { font-family:var(--serif); font-size:18px; font-weight:800; color:var(--accent); margin-bottom:6px; }
  .v4-toc-sub { font-size:12.5px; color:var(--text2); margin-bottom:16px; }
  .v4-toc-item { font-family:var(--serif); font-size:13.5px; color:var(--text2); padding:5px 0; display:flex; gap:9px; align-items:center; }
  .v4-toc-item.locked .v4-toc-txt { filter:blur(3px); color:var(--text3); }

  /* 클로징 */
  .v4-closing-p { font-family:var(--serif); font-size:14.5px; line-height:2.05; color:var(--text2); text-align:center; padding:46px 12px; }
  .v4-closing-h { font-family:var(--serif); font-size:24px; font-weight:800; color:var(--accent); text-align:center; margin-top:30px; }
  .v4-closing-sub { font-family:var(--serif); font-size:14px; color:var(--text2); text-align:center; margin-top:12px; }

  /* CTA 존 (기존 rd-paycard/rd-reviews 다크 스타일 그대로 감쌈) */
  .v4-cta-zone { background:var(--bg); color:var(--text); margin:36px -20px 0; padding:38px 20px 120px; }
  .v4-cta-zone .rd-paycard { margin-top:0; }

  /* 등장 애니메이션 */
  .v4-fade { opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
  .v4-fade.in { opacity:1; transform:none; }

  @media(max-width:360px){ .v4-h{font-size:22px;} .v4-gauge{width:186px;height:186px;} .v4-gauge-num{font-size:64px;} }


/* ---- original inline style block 2 ---- */

  /* ═══ Figma '수정 후' · 무료결과 베이지 '고서' 테마 (.book) ═══ */
  #teaser-result.book{
    --pk:#e7d8bc; --ink:#2c2014; --ink2:#5b4a34; --ink3:#8c795c;
    --line:rgba(74,54,26,.16); --line2:rgba(74,54,26,.30); --hl:#9a3d31; --brz:#7c5a2c;

    /* ── 지면(다크) 팔레트 · Figma 633:110 렌더 픽셀 실측 ──
       지면은 그라데이션이 아니라 평면 #140d0a 다(프레임 좌우 여백 열을 세로로 스캔한
       결과 위→아래 전 구간 동일값). 지면 위 텍스트는 크림, 카드(파치먼트) 위 텍스트는
       위의 --ink 계열을 그대로 쓴다 — 토큰을 통째로 뒤집으면 카드가 같이 죽는다.
         --pg-tx  = 본문·타이틀 크림  (실측 #f0dcc5)
         --pg-tx2 = 부제·보조         (크림을 지면에 82% 로 얹은 값)
         --pg-tx3 = 캡션·메타         (실측 #9d8e7e)
         --pg-hl  = 지면 위 강조      (실측 히어로 '그림자' #c67b5b) */
    --pg:#140d0a;
    --pg-tx:#f0dcc5; --pg-tx2:#cbb69c; --pg-tx3:#9d8e7e; --pg-hl:#c67b5b;
    --pg-line:rgba(240,220,197,.20); --pg-line2:rgba(240,220,197,.42);
    /* 카드(파치먼트) 면색 실측 — 시안 목차·후기 카드 모두 #e7d6b3 */
    --pk2:#e7d6b3;

    /* --fs-* 폰트 스케일은 :root 에 정의(전역 SSOT). book 은 아래 @media 로 --fs-scale 만 덮어 반응형 축소. */

    /* ── 가로 비율 규칙 ── 컨텐츠 80% / 타이틀 85% / 설명문 65% / 배경 100% */
    --w-content:80%;
    --w-title:85%;
    --w-lead:65%;
    --w-bg:100%;

    /* 하단 고정 CTA 실측 높이(~117px) + 여유 — 본문 끝이 바 뒤로 숨지 않게. 바보다 크게. */
    --cta-safe:150px;

    /* 시안 실측대로 평면 다크. 크림 지면 시절의 radial+linear 2겹은 위쪽만 밝게 띄워
       히어로 다크와 경계 띠를 만들므로 쓰지 않는다. */
    background:var(--pg);
    color:var(--pg-tx);
  }
  /* 시안은 스테이지 최상단부터 어둡다 — 뒤로가기 바가 밝은 크림 띠로 남지 않게.
     또 이 바는 시안에 없는 요소라 흐름에 두면 책이 그만큼 아래로 밀려
     스테이지 대비 책 비중이 시안보다 작아진다 → 다크 히어로 위에 띄운다 */
  #teaser-result.book{ padding-top:0 !important; position:relative; }
  #teaser-result.book .back-nav{
    position:absolute; top:0; left:0; z-index:5;
    background:none; padding:14px 18px 0; margin:0;
  }
  #teaser-result.book .btn-back{ color:#cdb890; }

  /* 히어로 — 상단 다크 밴드. 아래 책 섹션의 갈색 그라데이션과 연속(Figma 분석결과 프레임).
     좌우 패딩 0 + container 로 두어 자식 cqw 가 책과 같은 560 기준으로 잡히게 한다 */
  #teaser-result.book .v4-hero{
    margin:0; padding:52px 0 46px;
    container-type:inline-size;
    background:linear-gradient(180deg,#241d16 0%,#2C2420 55%,#413731 100%);
  }
  /* Figma 447:5709 = Noto Serif KR 400 24px lh34.5 ls-0.12 #F0DCC5
     Figma 447:5711 = Noto Serif KR 500 34px lh45.9 ls-0.34 */
  #teaser-result.book .v4-hero .v4-eyebrow{
    font-family:var(--serif); font-size:var(--fs-subtitle-2); font-weight:400;
    line-height:1.44; letter-spacing:-0.005em; color:#F0DCC5;
    max-width:var(--w-title); margin:0 auto;
  }
  #teaser-result.book .v4-hero .v4-h{
    font-family:var(--serif); font-size:var(--fs-display); font-weight:500;
    line-height:1.35; letter-spacing:-0.01em;
    max-width:var(--w-title); margin:2.5cqw auto 0;
  }
  /* 책 섹션 배경 = Figma Vector 103 그라데이션 스톱 그대로 (다크 브라운 → 탠).
     .v4-sec(패딩 44/34) 보다 높은 특정도로 좌우 패딩 0 — 래퍼가 폭을 잡는다 */
  #teaser-result.book .v4-sec.v4-book-sec{
    /* spec 은 책 상단(249)이 헤드라인 끝(260)보다 11px 위 — 딱 그만큼만 겹친다 */
    margin-top:-1.96%;
    /* 책 이미지가 자체 여백·그림자를 포함하므로 섹션 상하 여백은 최소로 —
       여백이 크면 그라데이션 밝은 끝이 넓게 드러나 크림 띠처럼 보인다 */
    padding:0 0 8px;
    /* 마지막 스톱은 지면(다크 #140d0a)으로 수렴시켜 다음 섹션과의 경계 띠를 없앤다.
       중간 스톱은 시안 프레임 '1'(책이 놓인 다크 사진 지면) 좌측 여백열의 세로 휘도
       프로파일 실측을 따라간다 — 책 상단에서 살짝 밝아지고(luma 57→61) 책 아래로
       단조 감소해 지면 값(luma 13~15)에 닿는다. 옛 스톱(#C9B189/#DCCBA8)은 크림
       지면으로 수렴시키기 위한 값이라 다크에선 탠 띠로 뜬다. */
    background:linear-gradient(180deg,#413731 0%,#4A3A29 16%,#3A2C1F 40%,#2A1F16 62%,#1C1410 82%,#140d0a 100%);
  }
  /* 시안 실측: eyebrow #f2e5d2 · H #f0dcc5 · '그림자' 강조 #c67b5b(테라코타).
     옛 값(#cdb890/#e7ca8b)은 크림 지면 시절 대비를 낮춰 잡은 것 + 강조가 금색이었다. */
  #teaser-result.book .v4-hero .v4-eyebrow{ color:#f2e5d2; }
  #teaser-result.book .v4-hero .v4-h{ color:var(--pg-tx); }
  #teaser-result.book .v4-hero .v4-h b{ color:var(--pg-hl); }

  /* 공통 텍스트 — 이 넷은 모두 '지면 위' 요소다 → 크림.
     카드(파치먼트) 안쪽 텍스트는 아래 카드별 규칙에서 --ink 계열을 유지한다.
     주의: .v4-book-cap 은 같은 .v4-cap 을 쓰지만 고서 지면(크림) 위라 잉크다 —
     아래쪽에 뒤에 오는 동일 특정도 규칙으로 덮는다. */
  #teaser-result.book .v4-eyebrow{ color:var(--pg-tx2); }
  #teaser-result.book .v4-h{ color:var(--pg-tx); }
  #teaser-result.book .v4-h b{ color:var(--pg-hl); }
  #teaser-result.book .v4-sub{ color:var(--pg-tx2); }
  #teaser-result.book .v4-cap{ color:var(--pg-tx3); }

  /* 펼친 고서 (가면 분석 결과) — 글자 지운 빈 책 이미지 위에 개인화 텍스트 인쇄 */
  #teaser-result.book .v4-book{
    position:relative; margin:20px auto 6px; width:384px; max-width:93%;
    aspect-ratio:622/779; box-sizing:border-box;
    padding:15% 12% 15% 16%;
    background-image:url('/static/img/result3_book.png');
    background-image:image-set(url('/static/img/result3_book.webp') type('image/webp'), url('/static/img/result3_book.png') type('image/png'));
    background-size:100% 100%; background-repeat:no-repeat; background-position:0 0;
    display:flex; flex-direction:column; justify-content:center;
  }
  #teaser-result.book .v4-book > *{ position:relative; z-index:1; }
  /* result3_book 이미지에 상단 인장·하단 프레임 있음 → CSS 클래스프 숨김 */
  #teaser-result.book .v4-book-clasp{ display:none; }
  /* 지면 텍스트 = 인쇄된 세피아 잉크 톤 · Figma spec 수치(canvas 560=1:1px) */
  /* Figma 633:124 = Noto Serif KR Regular 17.99px / lh 35.04 / ls -0.36 / #2b1e18 */
  #teaser-result.book .v4-book-title{ font-family:var(--serif); font-size:18px; font-weight:400; text-align:center; color:var(--ink); letter-spacing:-0.36px; }
  /* Figma 633:121 = Noto Serif KR Bold 25.98px / lh 30.80 */
  #teaser-result.book .v4-book-typename{ font-family:var(--serif); font-size:26px; font-weight:700; text-align:center; color:var(--ink); }
  /* Figma 633:122 = Noto Serif KR Regular 11.99px / lh 20.87 / ls -0.12
     (시안의 'OBS-A (Hyper-Control)' 자리 — 우리는 상위%·점수를 넣는다) */
  #teaser-result.book .v4-book-typecode{ font-family:var(--serif); font-size:12px; font-weight:400; text-align:center; color:var(--ink); letter-spacing:-0.12px; }
  /* Figma 633:139 = Noto Serif KR Medium 9.99px / lh 17.65 / ls -0.25 */
  #teaser-result.book .v4-book-meta{ font-family:var(--serif); font-size:10px; font-weight:500; text-align:center; color:var(--ink2); letter-spacing:-0.25px; }

  /* 유형 카드 */
  #teaser-result.book .v4-strip{ display:none; }
  /* 유형 영역 = 책 지면 위 '인쇄'. 장식 프레임·코너 오너먼트는 result3_book 이미지가 제공
     → CSS 패널/테두리/그림자 전부 제거 (Figma 468:360/356/357) */
  #teaser-result.book .v4-typecard{
    position:relative; margin:0; padding:0 20px;
    background:none; border:0; border-radius:0; box-shadow:none;
  }
  #teaser-result.book .v4-typecard::before,
  #teaser-result.book .v4-typecard::after{ display:none; content:none; }
  #teaser-result.book .v4-typecard-body{ display:block; }
  #teaser-result.book .v4-typecard-desc{
    font-family:var(--serif); font-size:9px; font-weight:400; line-height:15.7px;
    letter-spacing:-0.18px; color:var(--ink);
  }
  /* 캡션 — 시안대로 책 '밖' 아래(다크 지면) 위에 놓인다 → 잉크가 아니라 크림이다.
     지면 위 요소이므로 위 .v4-cap 크림 규칙을 그대로 물려받는다(색 재지정 없음). */
  #teaser-result.book .v4-book-cap{
    font-family:var(--sans); font-size:7.9px; font-weight:400; line-height:9.4px;
    letter-spacing:-0.31px; text-align:center;
    margin:14px auto 0; max-width:var(--w-title);
  }
  #teaser-result.book .v4-blurbold{ font-weight:800; color:var(--ink); filter:blur(5px); user-select:none; }
  #teaser-result.book .v4-blurtail{ color:var(--ink3); }

  /* 연도 사건 — 찢긴 종이 카드 (Figma 485:227) */
  /* 종이는 '카드 배경'이지 절대배치 레이어가 아니다. 카드 높이는 제목·본문이 정하고,
     찢긴 종이는 그 padding box 를 정확히 덮도록 뒤에서 함께 늘어난다.
     paper3_torn.png 는 사방에 투명 여백이 있는 원본(635×360, 불투명부 x 11.34~88.66% /
     y 25.28~74.72%) → 불투명부가 카드와 일치하도록 레이어를 그만큼 바깥으로 뺀다.
       가로 여백 = 11.34 / 77.32 = 14.67%   세로 여백 = 25.28 / 49.44 = 51.13% */
  #teaser-result.book .v4-kwbox{
    position:relative; z-index:0;
    padding:40px 12% 40px; margin-bottom:4px;
    background:none; border:0; border-radius:0;
  }
  #teaser-result.book .v4-kwbox::before{
    content:''; position:absolute; inset:-51.13% -14.67%; z-index:-1;
    background-image:url('/static/img/paper3_torn.png');
    background-image:image-set(url('/static/img/paper3_torn.webp') type('image/webp'), url('/static/img/paper3_torn.png') type('image/png'));
    background-size:100% 100%; background-repeat:no-repeat;
  }
  #teaser-result.book .v4-kwbox-h{ color:var(--ink); font-weight:700; margin-bottom:8px; }
  #teaser-result.book .v4-kwbox-p{ color:#4a3a26; line-height:1.8; }

  /* 2026 위기 — eyebrow/제목/리드는 지면 위(크림), 리스트는 파치먼트 카드 안(잉크) */
  #teaser-result.book .v4-crisis-q{ color:var(--pg-tx); }
  #teaser-result.book .v4-crisis-p{ color:var(--pg-tx2); }
  #teaser-result.book .v4-crisis-p b{ color:var(--pg-hl); }
  #teaser-result.book .v4-crisislist{ background:var(--pk2); border:1px solid var(--line2); }
  #teaser-result.book .v4-crisislist-h{ color:var(--ink); }
  #teaser-result.book .v4-crisis-row{ color:var(--ink2); }
  #teaser-result.book .v4-crisis-row::before{ color:var(--brz); }
  #teaser-result.book .v4-crisis-row.locked .v4-blurtext{ color:var(--ink3); }
  #teaser-result.book .v4-crisis-eyebrow{ color:var(--pg-tx2); }

  /* 악인 관상 샘플 슬롯 */
  .v4-bad-card{
    background:var(--bg2); border:1px solid var(--border); border-radius:6px;
    overflow:hidden; margin-top:24px;
  }
  .v4-bad-head{
    padding:18px 18px 14px; border-bottom:1px solid var(--border); text-align:center;
  }
  .v4-bad-k{
    font-family:var(--serif); font-size:16px; font-weight:800;
    color:var(--accent); margin-bottom:7px;
  }
  .v4-bad-person{ font-size:12px; line-height:1.6; color:var(--text2); min-height:19px; }
  .v4-bad-face-slot{
    position:relative; display:grid; place-items:center; aspect-ratio:1 / 1;
    margin:16px 18px; border:1px solid var(--border2); border-radius:6px;
    overflow:hidden;
    background:repeating-linear-gradient(45deg,rgba(255,255,255,.10) 0 3px,transparent 3px 12px);
  }
  .v4-bad-face-slot[data-slot-state="empty"]::after{
    content:attr(data-slot-label); font-size:12px; color:var(--text3);
    line-height:1.5; padding:4px 10px; text-align:center;
  }
  .v4-bad-face-slot img{ display:block; width:100%; height:100%; object-fit:cover; }
  .v4-bad-locked{
    display:grid; grid-template-columns:auto 1fr; gap:8px 12px;
    padding:14px 18px 18px; border-top:1px solid var(--border);
    font-size:12px; line-height:1.55; color:var(--text2);
  }
  .v4-bad-locked span{ color:var(--accent); font-weight:700; }
  .v4-bad-locked b{ color:var(--text3); font-weight:500; }
  #teaser-result.book .v4-bad-card{ background:var(--pk2); border:1px solid var(--line2); }
  #teaser-result.book .v4-bad-head{ border-bottom-color:var(--line); }
  #teaser-result.book .v4-bad-k{ color:var(--ink); }
  #teaser-result.book .v4-bad-person{ color:var(--ink2); }
  #teaser-result.book .v4-bad-face-slot{
    border-color:var(--line2);
    background:repeating-linear-gradient(45deg,rgba(74,54,26,.11) 0 3px,transparent 3px 12px);
  }
  #teaser-result.book .v4-bad-face-slot[data-slot-state="empty"]::after{ color:var(--ink3); }
  #teaser-result.book .v4-bad-locked{ border-top-color:var(--line); color:var(--ink2); }
  #teaser-result.book .v4-bad-locked span{ color:var(--brz); }
  #teaser-result.book .v4-bad-locked b{ color:var(--ink3); }

  /* 목차 — 카드는 파치먼트, 안쪽 텍스트는 잉크 유지.
     시안(633:331/345)은 번호·자물쇠 아이콘이 없고 첫 줄만 선명 + 나머지는 블러다. */
  #teaser-result.book .v4-toc-box{ background:var(--pk2); border:1px solid var(--line2); }
  #teaser-result.book .v4-toc-h{ color:var(--ink); }
  #teaser-result.book .v4-toc-sub{ color:var(--ink2); }
  #teaser-result.book .v4-toc-item{ color:var(--ink2); }
  #teaser-result.book .v4-toc-item.locked .v4-toc-txt{ color:var(--ink3); }

  /* ── 운의 교차점 카드 (Figma 640:722 / 그래프 640:721) ────────────────────
     세피아 고문서 카드 + 나침반 워터마크 = life_bg.png (Figma 640:726 export).
     렌더 픽셀 실측 색: 지면 #bda991 · 축선 #9c8770 · 구간명 #25201c ·
     나이 #93826c · 제목 #171310 · 올해 마커/배지 #c67b5b · 블러막 #c1b19e.
     카드 자체가 container 라 안쪽 치수를 cqw 로 쓴다(시안 프레임 폭 427.33 = 100cqw). */
  #teaser-result.book .v4-lf{
    position:relative; width:100%; max-width:427px; margin:0 auto;
    padding:7.5% 5.5% 5%; box-sizing:border-box; container-type:inline-size;
    background-image:url('/static/img/life_bg.png');
    background-image:image-set(url('/static/img/life_bg.webp') type('image/webp'), url('/static/img/life_bg.png') type('image/png'));
    /* 시안 카드(423×634)는 안에 리스크 박스까지 담아 더 길다. 이번 카드는 차트만이라
       더 짧으므로 100% 100% 로 늘이면 나침반 워터마크가 납작해진다 → cover 로 비율 유지. */
    background-size:cover; background-position:center; background-repeat:no-repeat;
  }
  /* Figma 640:648 = Noto Serif KR Bold 23.42px / ls -0.47 (프레임 427.33 → 5.48cqw) */
  #teaser-result.book .v4-lf-title{
    font-family:var(--serif); font-weight:700; font-size:5.48cqw;
    letter-spacing:-0.11cqw; color:#171310; text-align:center; margin:0 0 4cqw;
  }
  /* 신규 운곡선 카드(engine/fortune_curve.py). 지면·제목·잠금 막을 SVG 가 품고
     오므로 래퍼는 폭만 맞춘다 — .v4-lf 계열 장식과 겹쳐 그리지 않는다. */
  #teaser-result.book .v-fortune-curve{ width:100%; max-width:427px; margin:0 auto; }
  #teaser-result.book .v-fortune-curve svg{ display:block; width:100%; height:auto; }
  #teaser-result.book .v4-lf-chart{ position:relative; }
  #teaser-result.book .v4-lf-chart svg{ display:block; width:100%; height:auto; }
  /* 잠금 막 = Figma 640:657 Rectangle 298 (그래프 좌표 x150.61 y3.50 172.69×166.10).
     만세력 하단 오버레이와 같은 방식(반투명 + backdrop-blur) — 반투명이라 뒤 지면색을
     그대로 받아 지면 톤이 바뀌어도 띠가 뜨지 않는다. */
  #teaser-result.book .v4-lf-veil{
    position:absolute; left:46.58%; right:0.66%; top:1.64%; height:77.74%;
    border-radius:1.2cqw; background:rgba(240,232,215,.26);
    -webkit-backdrop-filter:blur(1.1cqw); backdrop-filter:blur(1.1cqw);
    display:flex; align-items:center; justify-content:center; pointer-events:none;
  }
  /* Figma 640:665 Frame 58 = 27.16 지름 원형 배지(그래프폭 323.35 기준 8.4%) */
  #teaser-result.book .v4-lf-lock{
    width:6.4cqw; height:6.4cqw; border-radius:50%;
    background:rgba(70,64,58,.80); display:flex; align-items:center; justify-content:center;
  }
  #teaser-result.book .v4-lf-lock svg{ width:55%; height:55%; display:block; }
  /* SVG 안 글자 — 좌표계가 그래프 프레임(323.35)이라 font-size 도 그 단위(px)로 쓴다.
     Figma 640:649 = Noto Serif KR SemiBold 9.05 / 나이·계열명은 그보다 작다. */
  #teaser-result.book .v4-lf-st{ font-family:var(--serif); font-size:9.05px; font-weight:600; fill:#25201c; }
  #teaser-result.book .v4-lf-ag{ font-family:var(--sans); font-size:7px; fill:#93826c; }
  #teaser-result.book .v4-lf-sr{ font-family:var(--serif); font-size:8.2px; font-weight:600; fill:#2c2822; }
  #teaser-result.book .v4-lf-bg{ font-family:var(--sans); font-size:7.4px; font-weight:600; fill:#f4efe4; }
  /* 차트 하단 카피 (Figma 640:755) */
  #teaser-result.book .v4-lf-note{ margin-top:22px; text-align:center; }

  /* 클로징 */
  #teaser-result.book .v4-closing-p{ color:var(--pg-tx2); }
  /* 열쇠 = 프레임 가로 100%. Figma 640:739 의 "antique-paper 1"(636:426, 560×452) 한 장이다.
     찢긴 위·아래 가장자리가 이미지 자체에 들어 있어 종이 껍데기 4겹 합성이 필요 없다.
     antique-paper.png 는 860×694 로 560/452 와 같은 비율이라 잘림 없이 그대로 들어간다. */
  #teaser-result.book .v4-key{
    position:relative; width:100%; aspect-ratio:560/452; margin:26px auto 22px;
  }
  #teaser-result.book .v4-key img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  }
  #teaser-result.book .v4-closing-h{ color:var(--pg-tx); }
  #teaser-result.book .v4-closing-sub{ color:var(--pg-tx2); }

  /* 리뷰 — 요약줄·전체보기 버튼은 지면 위(크림), 후기 카드 안은 잉크.
     eyebrow(.rd-rv-label)는 시안 633:233 처럼 좌측정렬 세리프 큰 제목이다. */
  #teaser-result.book .rd-rv-label{
    font-family:var(--serif); font-size:var(--fs-subtitle-2); letter-spacing:-0.01em;
    color:var(--pg-tx); text-align:left; margin-bottom:10px;
  }
  #teaser-result.book .rd-rv-count{ color:var(--pg-tx3); }
  #teaser-result.book .rd-rv-score{ color:var(--pg-tx); }
  #teaser-result.book .rd-rv{ background:var(--pk2); border:1px solid var(--line2); }
  #teaser-result.book .rd-rv-text{ color:var(--ink2); }
  /* 지면 위 아웃라인 버튼 — 실측 테두리 #988a73 = 크림 55% on #140d0a */
  #teaser-result.book .rd-rv-more{ color:var(--pg-tx); border-color:rgba(240,220,197,.55); }
  #teaser-result.book .rd-rv-more:active{ background:rgba(240,220,197,.08); }

  /* CTA 존 — 지면(다크) 위 */
  #teaser-result.book .v4-cta-zone{ background:transparent; color:var(--pg-tx); }
  #teaser-result.book .rd-paycard{ border:1px solid var(--pg-line); background:radial-gradient(ellipse at 50% 0%, rgba(240,220,197,.05), transparent 70%); }
  #teaser-result.book .rd-pay-lock{ filter:sepia(.4); }
  #teaser-result.book .rd-pay-sub{ color:var(--pg-tx2); border-bottom-color:var(--pg-line); }
  #teaser-result.book .rd-discount, #teaser-result.book .rd-price-urgency{ display:none; }
  #teaser-result.book .rd-cta{ background:linear-gradient(180deg,#c9a35f,#a97f33); color:#2a1e0c; font-weight:800; }
  #teaser-result.book .rd-pay-note{ color:var(--pg-tx3); }
  #teaser-result.book .rd-fine{ color:var(--pg-tx3); }
  #teaser-result.book .rd-fine b{ color:var(--pg-tx2); }
  #teaser-result.book .rd-legal a{ color:var(--pg-tx2) !important; }

  /* 하단 고정 CTA (Figma 468:348 바 + 492:11 버튼). */
  #teaser-result.book .rd-sticky{
    max-width:560px;
    padding:9px 18px calc(9px + env(safe-area-inset-bottom));
    /* 시안 프레임에 없는 요소지만 결제 진입 필수라 유지 — 톤만 다크 지면에 맞춘다.
       옛 값 rgba(178,160,131,.80) 은 크림 지면 기준이라 다크에선 밝은 탠 슬래브로 뜬다.
       버튼은 크림(#EFE3C8) 그대로 둔다 — 지면이 어두워져 오히려 CTA 대비가 좋아진다. */
    background:rgba(20,13,10,.90); backdrop-filter:blur(5.4px);
    border-top:1px solid var(--pg-line2);
  }
  #teaser-result.book .rd-sticky::after{ background:rgba(20,13,10,.90); }
  #teaser-result.book .rd-sticky-cta{
    flex:none; width:100%; padding:13px;
    background:#EFE3C8; border:1px solid rgba(191,164,122,.65); border-radius:14.85px;
    font-family:var(--serif); font-size:var(--fs-lead); font-weight:700;
    letter-spacing:0.04em; color:#2F241D;
  }

  /* Figma 499:482 frame fidelity fixes */
  /* 페이지 폭 = Figma 캔버스 560. (프레임 '1'의 622 는 책이 캔버스 밖으로
     번지는 블리드 폭일 뿐 지면 폭이 아니다 — 622 로 두면 책이 화면 대비
     560/622 = 90% 로 작아져 시안과 어긋난다.) */
  #app-shell:has(#sec-teaser.active){
    max-width:560px;
    background:transparent;
  }
  #app-shell:has(#sec-teaser.active) #sec-teaser{
    width:100%;
  }
  #teaser-result.book{
    width:100%;
    max-width:560px !important;
    margin:0 auto;
    padding:0 !important;
    box-sizing:border-box;
    overflow:hidden;
  }
  /* 콘텐츠는 띠(z0) 위 레이어 — 자기 배경/이미지가 띠를 가리고, 여백에서만 띠가 비친다 */
  #teaser-result.book .v4-doc{ width:100%; position:relative; z-index:1; }
  #teaser-result.book .v4-cta-zone{ position:relative; z-index:1; }
  #teaser-result.book .v4-hero{
    margin:0;
    /* 좌우 0 유지 — 히어로 자식 cqw 기준폭을 책과 동일한 560 으로 맞추기 위함.
       텍스트 여백은 각 문구의 max-width 로 준다.
       하단 0: spec 은 헤드라인(…260)과 책 상단(249)이 겹칠 만큼 붙어 있다.
       여백을 두면 책이 스테이지에서 차지하는 비중이 시안보다 작아진다 */
    padding:21.43% 0 0;
    box-sizing:border-box;
  }
  /* 섹션은 좌우 여백 0 — 가로 비율은 아래 '폭 규칙'이 자식별로 정한다
     (배경 100% / 컨텐츠 80% / 타이틀 85% / 설명문 65%) */
  #teaser-result.book .v4-sec{
    margin:0;
    padding:44px 0;
    box-sizing:border-box;
  }
  #teaser-result.book .v4-sec.tight{ padding:28px 0; }
  #teaser-result.book .v4-sec:first-of-type{ padding-top:34px; }

  /* ── 가로 비율 규칙 (전 구간 공통) ──────────────────────────
     기본은 컨텐츠 폭. 역할별로 타이틀·설명문 폭을 덮어쓴다. */
  #teaser-result.book .v4-sec > *,
  #teaser-result.book .v4-doc > section > *{
    max-width:var(--w-content); margin-left:auto; margin-right:auto;
  }
  #teaser-result.book .v4-sec > .v4-h,
  #teaser-result.book .v4-doc > section > .v4-h{ max-width:var(--w-title); }
  #teaser-result.book .v4-sec > .v4-sub,
  #teaser-result.book .v4-sec > .v4-eyebrow,
  #teaser-result.book .v4-sec > .v4-cap,
  #teaser-result.book .v4-sec > .v4-crisis-eyebrow,
  #teaser-result.book .v4-sec > .v4-crisis-p,
  #teaser-result.book .v4-doc > section > .v4-closing-p,
  #teaser-result.book .v4-doc > section > .v4-closing-sub{ max-width:var(--w-lead); }
  /* 배경 역할 요소(고서·찢긴 종이 카드·열쇠 이미지·띠)는 100% */
  #teaser-result.book .v4-sec > .v4-book-wrap,
  #teaser-result.book .v4-doc > section > .v4-key{ max-width:var(--w-bg); }

  /* ── 폰트 위계 바인딩 ─────────────────────────────────────
     개별 px 하드코딩 없음. 크기 조정은 위 --fs-* 변수에서만 한다. */
  #teaser-result.book .v4-h,
  #teaser-result.book .v4-crisis-q{ font-size:var(--fs-title); line-height:1.44; font-weight:600; }
  /* 좁은 화면에서 마지막 줄에 어절 하나만 남는 것을 막는다 */
  #teaser-result.book .v4-h,
  #teaser-result.book .v4-sub,
  #teaser-result.book .v4-crisis-q,
  #teaser-result.book .v4-closing-p{ text-wrap:balance; }
  #teaser-result.book .v4-eyebrow,
  #teaser-result.book .v4-crisis-eyebrow,
  #teaser-result.book .v4-crisislist-h{ font-size:var(--fs-lead); line-height:1.44; }
  #teaser-result.book .v4-sub{ font-size:var(--fs-lead); line-height:1.44; }
  #teaser-result.book .v4-crisis-p,
  #teaser-result.book .v4-crisis-row,
  #teaser-result.book .v4-closing-p,
  #teaser-result.book .v4-closing-sub,
  #teaser-result.book .v4-kwbox-h{ font-size:var(--fs-body); }
  #teaser-result.book .v4-toc-item{ font-size:var(--fs-body-sm); }
  #teaser-result.book .v4-toc-h{ font-size:var(--fs-subtitle); }
  #teaser-result.book .v4-closing-h{ font-size:var(--fs-subtitle-2); }
  #teaser-result.book .v4-toc-sub,
  #teaser-result.book .v4-kwbox-p,
  #teaser-result.book .v4-cap{ font-size:var(--fs-caption); }

  /* ── 1-2 영역 (Figma 494:529) ────────────────────────────
     같은 문구가 좌측정렬 → 우측정렬로 두 번, 그 뒤 중앙 부제목·타이틀·세로 구분선.
     블록 폭·간격은 spec y좌표(1209/1330/1465/1560/1679) 그대로. */
  /* 책(…1067)과 좌측정렬 블록(1209) 사이 여백 = spec 그대로 */
  #teaser-result.book .v4-a12{ text-align:center; padding-top:134px; }
  #teaser-result.book .v4-a12 > *{ max-width:var(--w-content); }
  #teaser-result.book .v4-a12-side{
    font-family:var(--serif); font-size:var(--fs-body); font-weight:400;
    line-height:1.44; letter-spacing:-0.005em; color:var(--pg-tx);
  }
  #teaser-result.book .v4-a12-side b{ color:var(--pg-hl); font-weight:400; }
  #teaser-result.book .v4-a12-l{ text-align:left; }
  #teaser-result.book .v4-a12-r{ text-align:right; margin-top:81px; }
  /* 이 부제목만 24px (spec 492:2) — 폭도 설명문(65%)이 아니라 컨텐츠(80%) 기준 */
  #teaser-result.book .v4-sec > .v4-a12-lead{
    font-size:var(--fs-subtitle-2); max-width:var(--w-content); margin-top:95px;
    text-wrap:balance;
  }
  #teaser-result.book .v4-sec > .v4-a12-title{ font-weight:500; }
  #teaser-result.book .v4-a12-title{ max-width:var(--w-title); margin-top:27px; }
  #teaser-result.book .v4-a12-rule{
    display:block; width:1px; height:150px; margin-top:73px; background:var(--pg-line2);
  }

  /* 반응형: 개별 요소가 아니라 이 스케일 한 값만 조정한다 */
  @media(max-width:480px){ #teaser-result.book{ --fs-scale:.84; } }
  @media(max-width:360px){ #teaser-result.book{ --fs-scale:.74; } }
  /* 책 전체를 컨테이너 비율 단위(cqw)로 — 폭이 줄어도 여백·폰트·행간이 함께
     균등 축소되어 레이어 관계가 보존된다(과거 실패 #2: 상대 비율 무시 회피).
     기준 캔버스 560px → 1cqw = 5.6px */
  #teaser-result.book .v4-book-wrap{
    width:100%; max-width:560px; margin:0 auto; container-type:inline-size;
    /* 책이 캔버스보다 넓으므로 우측 넘침을 잘라낸다 */
    overflow:hidden;
  }
  #teaser-result.book .v4-book{
    /* Figma 는 책을 캔버스(560)보다 넓은 582 로 좌측 정렬 배치해 우측이 잘린다.
       560 으로 줄여 그리면 '지면에 인쇄된 장식 프레임'만 0.962 배로 작아지고
       텍스트는 spec px 그대로라, 본문이 프레임 선에 바짝 붙고 줄당 글자수가 준다.
       → 책을 582 캔버스폭(=103.93%)으로 두고 우측을 클립한다(시안과 동일 구조). */
    width:103.93%;
    /* 베이스 .v4-book 의 max-width:93% 해제 — 책 폭이 래퍼(=cqw 기준)와 어긋나면
       cqw로 잡은 모든 비율이 함께 틀어진다 */
    max-width:none;
    min-height:0;
    /* Figma 는 result3_book 을 582×818 로 '늘려' 배치한다(mode=STRETCH).
       이미지 자연비(1086:1448=0.750)를 쓰면 책이 5% 납작해져, 같은 px 텍스트가
       지면에서 더 크게/벌어져 보인다 → 배치비 582:818 을 그대로 쓴다 */
    aspect-ratio:582/818;
    margin:0;
    /* 지면 여백: Figma spec 캔버스 좌표 그대로 — 표 구분선 x=155~436, 책 좌변 x=0
       (1cqw = 5.6px = 캔버스 1px 단위). 우 패딩 = 582-436 = 146 */
    padding:31.07cqw 26.07cqw 19cqw 27.68cqw;
    justify-content:flex-start;
  }
  /* ── 세로 리듬 (책 높이 = 146.07cqw · padding-top 31.07cqw = 21.3%) ──
     시안 프레임 633:111 의 y 좌표는 책 이미지가 `result2 3`(y 236.1, h 778.6) 기준이고
     우리 지면은 `result3_book.png`(배치비 582×818)라 % 를 그대로 옮기면 설명 문단이
     지면 장식 프레임(우리 이미지 실측 세로 59.6~81.7%) 밖으로 나간다.
     → 우리 이미지에서 이미 검증된 두 앵커(제목 21.3% · 설명 66.5%)는 그대로 두고,
       그 사이에 새 3줄을 시안의 '상대 간격 비율'로 보간해 넣는다.
         시안 제목 25.26% → 설명 57.66% 구간(32.40pt) 안에서
           유형명 25.1% · 코드 38.9% · 메타 54.7% 지점
         → 우리 구간(21.3→66.5%, 45.2pt) 환산: 32.65% / 38.88% / 46.02%
                                    = 47.69cqw / 56.79cqw / 67.23cqw (책 상단 기준)
     각 블록 line-height 를 확정값으로 고정해 누적 드리프트를 제거한다. */
  #teaser-result.book .v4-book-title{ font-size:3.212cqw; line-height:6.257cqw; letter-spacing:-0.064cqw; }
  /* 31.07 + 6.257 = 37.33 → 유형명 47.69 까지 10.36 */
  #teaser-result.book .v4-book-typename{ font-size:4.640cqw; line-height:5.500cqw; margin-top:10.36cqw; }
  /* 47.69 + 5.500 = 53.19 → 코드 56.79 까지 3.60 */
  #teaser-result.book .v4-book-typecode{ font-size:2.141cqw; line-height:3.726cqw; margin-top:3.60cqw; letter-spacing:-0.021cqw; }
  /* 56.79 + 3.726 = 60.52 → 메타 67.23 까지 6.71. 한 줄 유지(줄바꿈 시 아래가 밀린다) */
  #teaser-result.book .v4-book-meta{ font-size:1.785cqw; line-height:3.151cqw; margin-top:6.71cqw; letter-spacing:-0.045cqw; white-space:nowrap; }
  /* 장식 프레임 내부선 = 이미지 실측 가로 29.5~78.9% × 책폭 582 = 캔버스 172~459.
     spec 본문 x=181~426 → 좌 inset 9 / 우 inset 33 (비대칭: 우측이 더 넓다).
     책 콘텐츠박스가 155~436 이므로 좌 26 / 우 10 을 준다 */
  /* 메타줄 끝(67.23+3.151=70.38cqw) → 설명 66.5%(=97.14cqw) 까지 26.76cqw */
  /* 지면 장식 프레임 실측(result3_book.png 1164×1636 픽셀 세로 스캔, 모든 열에서 공통):
       상단선 밴드 59.1~60.1% · **하단선 밴드 78.91~79.71%**
     선에는 두께가 있으므로 겹침 판정 기준은 **하단선의 위쪽 가장자리 78.91% = 115.24cqw** 다.
     (이전 주석의 81.7%=119.4cqw 는 오측이라 버튼이 하단선을 밟았다 — 겹침 원인)
     공유 CTA 전체가 115.24cqw 안에 들어오도록 설명 프레임을 위로 당긴다 */
  #teaser-result.book .v4-book .v4-typecard{ margin-top:22.36cqw; padding:0 1.79cqw 0 4.64cqw; }
  /* 설명은 시안과 동일하게 4줄 고정 — 줄수가 변하면 캡션 위치가 흔들린다 */
  #teaser-result.book .v4-typecard-desc{
    font-size:1.607cqw; line-height:2.804cqw; letter-spacing:-0.032cqw;
    height:11.22cqw; overflow:hidden;
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
  }
  /* 캡션은 지면 장식 프레임(이미지 세로 59.6~81.7%) '바깥 아래'.
     spec y(81.5%)는 프레임 하단선과 겹치므로 선 아래로 내려 가독 확보 */
  /* 캡션 spec x=134~448 → 콘텐츠박스(155~436) 밖으로 좌 -21 / 우 -12 */
  /* 캡션은 책 밖(다크 지면)이라 cqw 리듬이 아니라 페이지 폭 기준이다.
     책 아래 여백만 준다 — 음수 마진(지면 폭 넘기기)은 책 안이던 시절의 잔재라 제거. */
  #teaser-result.book .v4-book-cap{ font-size:1.41cqw; line-height:2.2cqw; letter-spacing:-0.055cqw; margin:2.5cqw auto 0; }

  /* 공유 CTA 는 고서 지면 안 — 설명 프레임(끝 97.14+11.22=108.36cqw) 아래.
     책 높이 146.07cqw, 하단 padding 19cqw → 127.07cqw 까지 쓸 수 있다.
     시안 실측(캔버스 560=1:1px): 말풍선 pill h19.07 / 꼬리 8.41 / 버튼 329.84×51.61.
     px 대신 cqw 로 두어 375px 화면에서도 지면과 함께 축소된다. */
  /* 실측 공간 예산(프레임 하단선 위쪽 가장자리 115.24cqw 기준): 설명 끝 100.22cqw → 15.02cqw.
     위 여백(1.5) + 말풍선(3.15) + 꼬리·간격(1.2) + 버튼(8.04) = 13.89cqw → 하단 1.13cqw 여유. */
  #teaser-result.book .v4-share-cta{ margin-top:1.5cqw; }
  #teaser-result.book .v4-share-bubble{
    margin:0 0 1.2cqw; padding:0.55cqw 3.20cqw; border-radius:1.70cqw;
    font-size:1.60cqw; line-height:2.05cqw; letter-spacing:-0.016cqw;
  }
  #teaser-result.book .v4-share-bubble::after{ border-width:1.20cqw 0.78cqw 0; }
  /* 버튼 폭은 시안처럼 설명 프레임(43.76cqw)보다 조금 넓게, 지면 콘텐츠폭(50.18) 안쪽으로 */
  #teaser-result.book .v4-share-btn{
    width:48cqw; max-width:100%; gap:2.20cqw; padding:2.10cqw 2.00cqw; border-radius:2.00cqw;
    font-size:3.00cqw; line-height:1.28; letter-spacing:-0.096cqw;
  }
  #teaser-result.book .v4-share-btn svg{ flex:0 0 2.30cqw; width:2.30cqw; height:3.07cqw; }
  /* ── 결과 공유 CTA (Figma 633:134 말풍선 + 633:125 버튼) ─────────────────
     **치수는 위 cqw 리듬 블록이 SSOT다.** 여기서는 색·서체·구조만 잡는다 —
     px 치수를 되살리면 지면 안 배치가 다시 틀어진다(과거 실패: 책 밖으로 밀려남).
     말풍선과 버튼은 반드시 세로로 쌓인다 — inline 흐름에 두면 폭이 남는 화면에서
     둘이 한 줄에 나란히 붙어 꼬리가 버튼을 못 가리킨다. */
  #teaser-result.book .v4-share-cta{
    margin-left:auto; margin-right:auto;
    display:flex; flex-direction:column; align-items:center;
  }
  /* 말풍선: pill #F6F0E6 + 텍스트 #4E3528, 꼬리는 CSS 삼각형(이미지 에셋 아님) */
  #teaser-result.book .v4-share-bubble{
    position:relative; display:inline-block; white-space:nowrap;
    background:#F6F0E6; color:#4E3528;
    font-family:'Pretendard Variable',Pretendard,var(--sans); font-weight:500;
    box-shadow:0 2px 4px rgba(20,12,6,.16);
    /* 위아래로 떠오르는 버블 효과 — 옴프리베 상품페이지의 '오늘 N명이 장바구니에
       담았어요' 배지와 동일 규격(bounce 1.6s ease-in-out infinite / ±5px). */
    animation: v4ShareBubbleBounce 1.6s ease-in-out infinite;
  }
  @keyframes v4ShareBubbleBounce{
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-5px); }
  }
  @media (prefers-reduced-motion: reduce) {
    #teaser-result.book .v4-share-bubble { animation: none !important; }
  }
  #teaser-result.book .v4-share-bubble::after{
    content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
    width:0; height:0; border-style:solid; border-color:transparent;
    border-top-color:#F6F0E6;
  }
  /* 버튼: 면 #2B1E18, 텍스트 Noto Serif KR SemiBold 흰색 */
  #teaser-result.book .v4-share-btn{
    display:inline-flex; align-items:center; justify-content:center;
    border:0; background:#2B1E18; color:#fff;
    font-family:var(--serif); font-weight:600; cursor:pointer;
    filter:drop-shadow(0 5.6px 4.5px rgba(0,0,0,.2));
  }
  #teaser-result.book .v4-share-btn svg{ display:block; }

  /* 유형카드는 .v4-book 내부 흐름 — 별도 섹션/음수마진 하이재킹 제거.
     위치는 위 cqw 리듬 블록에서 확정한다(여기서 px로 덮어쓰면 비율이 깨진다). */
  #teaser-result.book .v4-kwbox{
    border:0;
    border-radius:0;
    background-color:transparent;
    box-shadow:none;
  }
  #teaser-result.book .v4-archive{
    max-width:520px;
    margin:34px auto 0;
    padding:20px 0 0;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
  }
  #teaser-result.book .v4-archive::before,
  #teaser-result.book .v4-archive::after{ display:none; }
  #teaser-result.book .v4-archive-tag{ color:var(--ink3); }
  #teaser-result.book .v4-archive .rd-saju-map{
    max-width:384px;
    margin:22px auto 0;
    padding:18px;
    border:0;
    border-radius:3px;
    background:#11100d;
    box-shadow:0 14px 28px rgba(40,24,8,.25);
    color:#f0e7d6;
  }
  #teaser-result.book .v4-cta-zone{
    margin:36px 0 0;
    padding:38px 34px 48px;
  }
  #teaser-result.book .rd-paycard{
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
  }
  /* 하단 고정 CTA 가 본문 끝을 가리지 않게 여백 확보 */
  #teaser-result.book .v4-cta-zone{ padding-bottom:var(--cta-safe); }

  /* ── 배경 띠 프레임 (Figma Frame 28 / Frame 29) ──────────
     paper_texture_report.png(139×640) 실측: 네 변에만 1px 손그림 잉크선(#2F1F15,
     알파 58~212 불규칙)이 있고 안쪽은 완전 투명한 '사각 테두리' 이미지다.
     예전 코드는 이걸 background-size:100% 100% 로 9000px 높이에 늘려서,
     가로 1px 선이 세로로 ~14px 두께로 뭉개졌다(세로선은 4px). 그래서 모양이 무너졌다.

     피그마 실측(633:140 / 633:146 렌더의 행 휘도 스캔): 타일 경계 6~7곳 어디에도
     가로선이 없고, 가로 잉크는 프레임 맨 위와 맨 아래 딱 두 곳뿐이다.
     → 세로 background-repeat 로 이으면 시안에 없는 가로줄이 6~7개 생긴다. 쓰면 안 된다.
     대신 border-image 로 9분할해 '세로변만 자연 크기로 반복 + 가로변은 위아래 한 번씩'
     이라는 시안 구조를 그대로 만든다. 늘어남 없이 선 두께가 일정하다. */
  /* 띠는 콘텐츠 '뒤' (Figma 문서순서상 Frame 28/29 가 프레임 8 앞 = 아래 레이어).
     페이지 베이지 배경 위·모든 콘텐츠 아래에 깔려 좌우 여백과 투명 영역에만 비친다.
     z-index:4 로 두면 다크 히어로·고서·열쇠 사진 위를 30% 크림으로 덮어 가장자리가 뜬다. */
  #teaser-result.book .v4-band{
    position:absolute; inset:0; z-index:0; pointer-events:none;
  }
  /* slice 는 반드시 1 — 소스의 잉크는 정확히 가장자리 1px 이고 그 안쪽 1px 은 거의 비어 있다
     (col0 알파 중앙값 106 / col1 은 11). slice:2 면 3px 폭의 절반만 잉크가 차서 선이 성기다.
     선 두께 3px = 시안 세로선 두께(캔버스 560 기준 543/139 ≈ 3.9px)에 맞춘 값.

     opacity 재측정 (지면 다크 전환 후) — 옛 값 .85 는 '크림 지면(휘도 210) 대비 선이
     어두워지는' 방향으로 잡은 값이라 그대로 두면 안 된다. 다크에선 부호가 뒤집혀
     선이 지면보다 '밝아진다'.
       · 지면 휘도 14.8 (#140d0a)
       · 시안 타일(633:142) 실측: 선 픽셀 (31,21,14)~(47,31,21) → 휘도 22~34
         = 지면 대비 **+7 ~ +19 (중앙값 약 +10)**  ← 이게 맞춰야 할 목표다
       · 우리 렌더 실측: .85 → 중앙값 +6.6 / p90 +26.5
                        1.0  → 중앙값 +7.8 / p90 +31.2
     텍스처 잉크(#2F1F15)가 어둡고 자체 알파가 .42 라 opacity 를 올려도 상한이 +8 대다.
     즉 다크 위에서 이 프레임은 시안에서도 '희미한 음각 테두리'로만 읽힌다 — 밝게 띄우면
     시안과 어긋난다. 목표 중앙값(+10)에 가장 가까운 1.0 으로 확정. */
  #teaser-result.book .v4-band > i{
    position:absolute; top:0; bottom:0; display:block; opacity:1;
    border:3px solid transparent;
    border-image-source:url('/static/img/paper_texture_report.png');
    border-image-slice:1;
    border-image-width:3px;
    border-image-repeat:repeat;
  }
  /* Frame 29 = x3 w555 / Frame 28 = x9 w543 (캔버스 560 기준) */
  #teaser-result.book .v4-band-29{ left:0.54%; right:0.36%; }
  #teaser-result.book .v4-band-28{ left:1.61%; right:1.43%; }

  @media(max-width:559px){
    #app-shell:has(#sec-teaser.active){ max-width:100%; }
    #teaser-result.book{ width:100%; }
    #teaser-result.book .v4-hero{ padding:21.43% 0 0; }
    #teaser-result.book .v4-sec{ padding:38px 0; }
    #teaser-result.book .v4-sec.tight{ padding:24px 0; }
    #teaser-result.book .v4-cta-zone{ padding:34px 22px var(--cta-safe); }
  }


/* ---- original inline style block 3 ---- */

  /* ═══ 만세력 · Figma frame7 (494:479) — manseryeok_composite 이미지 배경 + 동적 텍스트 오버레이 ═══ */
  .sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  /* 태그·제목 = 합성 이미지 지면 안쪽 상단 (Figma 494:457 y≈10.6%, 494:458 y≈13.9%) */
  #teaser-result.book .v4-mansae-head{
    position:absolute; top:10.4%; left:0; width:100%; text-align:center; z-index:2;
  }
  #teaser-result.book .v4-archive-tag{ font-family:var(--serif); font-size:2.84cqw; letter-spacing:-0.014cqw; color:var(--ink); text-align:center; margin:0 0 0.7cqw; }
  #teaser-result.book .v4-archive-title{ font-family:var(--serif); font-size:5.69cqw; font-weight:700; letter-spacing:-0.028cqw; line-height:8.2cqw; text-align:center; color:var(--ink); margin:0; }

  /* 합성 이미지 카드 (빈 셀·리포트 프레임 제공) — .v4-archive .rd-saju-map 다크카드 규칙 무력화 */
  #teaser-result.book .v4-archive .v4-mansae{
    position:relative; width:100%; max-width:422px; margin:22px auto 0;
    aspect-ratio:1060/1658; container-type:inline-size;
    padding:0; border:0; border-radius:0; box-shadow:none;
    background-image:url('/static/img/manseryeok_composite.png');
    background-image:image-set(url('/static/img/manseryeok_composite.webp') type('image/webp'), url('/static/img/manseryeok_composite.png') type('image/png'));
    background-size:100% 100%; background-repeat:no-repeat; background-position:center;
    color:#e8dcc0; overflow:visible;
  }
  #teaser-result.book .v4-mansae .v4-myeongsik{ position:absolute; inset:0; margin:0; }

  /* 만세력 카드 하단 오버레이 (Figma 658:1112 "Rectangle 310", y=5198 h116).
     아래로 갈수록 카드 지면색으로 수렴하는 **그라데이션**이다 — 유료 구간이 서서히
     사라지는 페이드. 블러 패널로 만들면 회색 유리판이 얹힌 것처럼 보인다(그렇게 하지 마라).
     카드 폭 422 기준 116/422 = 27.5cqw. 끝색은 카드 자체 지면(#11100d)에 정확히 맞춘다 —
     다른 색을 쓰면 카드 하단에 띠가 뜬다. */
  #teaser-result.book .v4-archive .v4-mansae::after{
    content:""; position:absolute; z-index:3; pointer-events:none;
    left:0; right:0; bottom:0; height:34cqw;
    background:linear-gradient(180deg,
      rgba(17,16,13,0) 0%,
      rgba(17,16,13,.55) 42%,
      rgba(17,16,13,.88) 72%,
      #11100d 100%);
  }

  /* 8자 4기둥 표 — 합성 이미지의 빈 셀 박스에 정확히 정렬.
     이미지 실측(1060×1658): 열 중심 20.2/40.0/59.8/79.6%, 셀 폭 17.5%,
     천간행 y 27.5~38.4%, 지지행 y 39.5~50.4%, 행 간격 1.1%(세로) */
  #teaser-result.book .v4-mansae .v4-ms-table{
    position:absolute; top:27.5%; left:11.45%; width:76.9%;
    grid-template-columns:repeat(4,1fr); gap:2.99%;
  }
  #teaser-result.book .v4-mansae .v4-ms-col{ gap:1.72cqw; }
  /* 셀 배경·테두리 제거 (이미지가 제공), 텍스트만 오버레이 */
  #teaser-result.book .v4-mansae .v4-ms-cell{
    background:none!important; border:0!important; box-shadow:none!important;
    padding:0; aspect-ratio:17.5/17.05; min-width:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative;
  }
  #teaser-result.book .v4-mansae .v4-ms-hanja{ font-size:9.2cqw; font-weight:700; line-height:1; margin:0; }
  #teaser-result.book .v4-mansae .v4-ms-kr{ font-size:2.13cqw; color:#c4c8ce; margin-top:0.4cqw; line-height:1; }
  #teaser-result.book .v4-mansae .v4-ms-kr .v4-ms-oh{ display:none; }
  /* 십성 라벨 = 셀 '바깥' 종이 위 (Figma: 천간 위 y≈25%, 지지 아래 y≈50.9%).
     calc(px)로 셀 밖으로 확실히 빼내 어두운 셀과 겹치지 않게 → 대비 확보 */
  #teaser-result.book .v4-mansae .v4-ms-sipsin{
    position:absolute; left:50%; transform:translateX(-50%); margin:0;
    font-family:var(--serif); font-size:1.9cqw; font-weight:600; color:#2f241d;
    white-space:nowrap; line-height:1; min-height:0;
  }
  /* 천간 라벨 = 셀 위 종이(이미지 25.2%), 지지 라벨 = 셀 아래 종이(이미지 50.9%) */
  #teaser-result.book .v4-mansae .v4-ms-col > .v4-ms-cell:first-child .v4-ms-sipsin{
    top:auto; bottom:calc(100% + 0.94cqw);
  }
  #teaser-result.book .v4-mansae .v4-ms-col > .v4-ms-cell:last-child .v4-ms-sipsin{
    top:calc(100% + 0.78cqw); bottom:auto;
  }
  /* 일간 셀은 '일간(나)' 왕관이 라벨을 대신한다(시안 동일) → 중복 십성 라벨 숨김 */
  #teaser-result.book .v4-mansae .v4-ms-cell.ilgan .v4-ms-sipsin{ display:none; }
  #teaser-result.book .v4-mansae .v4-ms-crown{
    top:auto; bottom:calc(100% + 0.5cqw); font-size:1.66cqw; padding:0.24cqw 1.4cqw;
    background:#191817; color:#e5c98a; border:1px solid rgba(216,178,125,.55);
  }
  #teaser-result.book .v4-mansae .v4-ms-empty{ color:#6a5f4e; font-size:5cqw; }
  #teaser-result.book .v4-mansae .v4-ms-note{ display:none; }

  /* 판정 pill 3종 (격·신강신약·용신) — 셀 아래 이미지 여백 */
  /* pill 3종 — 지지 십성 라벨(≈50.9%) 아래 (Figma y≈54.7%) */
  #teaser-result.book .v4-mansae .v4-chips{
    position:absolute; top:54%; left:0; width:100%; margin:0; gap:1.8cqw; flex-wrap:nowrap;
  }
  #teaser-result.book .v4-mansae .v4-chip{
    background:#181511; border:1px solid #3a3122; color:#c8b48c; font-size:2.4cqw; padding:1.5% 3%; letter-spacing:0;
  }
  #teaser-result.book .v4-mansae .v4-chip b{ color:#d8b27d; font-size:2.2cqw; }

  /* 하단 리포트 패널 — 오행 분포(펜타그램) + 십성 분포(막대), 유료 유도 페이드 */
  #teaser-result.book .v4-mansae .v4-oh-wrap{
    position:absolute; top:64.5%; left:12%; width:76%; margin:0; gap:5%;
  }
  #teaser-result.book .v4-mansae .v4-oh-panel h3{ color:#8a7d64; font-size:2.4cqw; letter-spacing:.1em; margin-bottom:4px; }
  #teaser-result.book .v4-mansae .v4-penta-lg{ font-size:2cqw; }
  #teaser-result.book .v4-mansae .v4-penta-h{ font-size:5.5cqw; }
  #teaser-result.book .v4-mansae .v4-penta-n{ font-size:3cqw; }
  #teaser-result.book .v4-mansae .v4-vbars{ min-height:0; height:22cqw; gap:1.5%; }
  #teaser-result.book .v4-mansae .v4-vb-n{ font-size:2.4cqw; }
  #teaser-result.book .v4-mansae .v4-vb-fill{ width:3.2cqw; }
  #teaser-result.book .v4-mansae .v4-vb-lb{ font-size:2.6cqw; }


/* ---- original inline style block 4 ---- */

/* 결제 후 — 생성 로딩 / 최종 결과지 (그림자 디자인 톤 일치) */
#sec-generating .gen-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;}
.gen-orb{width:90px;height:90px;border-radius:50%;background:radial-gradient(circle at 50% 40%, rgba(209,163,94,.55), rgba(159,61,53,.16) 60%, transparent 73%);box-shadow:0 0 64px rgba(209,163,94,.25);animation:genpulse 2.4s ease-in-out infinite;margin-bottom:30px;}
@keyframes genpulse{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.12);opacity:1;}}
.gen-title{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--text);margin:0 0 14px;letter-spacing:-.01em;max-width:100%;word-break:keep-all;}
/* flex column + align-items:center 라 자식이 컨테이너보다 넓어질 수 있다 → 100% 로 한 번 더 잠근다. */
.gen-note{font-family:var(--serif);font-size:15.5px;line-height:1.85;color:var(--text2);max-width:min(440px,100%);margin:0 0 6px;word-break:keep-all;}
.gen-note b{color:var(--gold);font-weight:600;}
/* 진행바 = 서버가 알려주는 실제 진행률(章 완료 개수). 가짜 애니메이션 아님 → width 로만 움직인다. */
.gen-bar{width:min(240px,72vw);height:4px;border-radius:4px;background:var(--bg3);overflow:hidden;margin:26px 0 12px;position:relative;}
.gen-bar i{position:absolute;top:0;left:0;height:100%;width:0;background:var(--gold);border-radius:4px;transition:width .6s ease;}
.gen-meter{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:12.5px;color:var(--text2);margin:0 0 10px;}
/* display 를 지정한 요소는 hidden 속성만으로 숨겨지지 않는다 — 실패화면 전환에서 필요. */
#sec-generating [hidden]{display:none;}
.gen-meter b{color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums;}
.gen-sub{font-size:12.5px;color:var(--text3);font-family:var(--sans);margin:0;max-width:100%;word-break:keep-all;}
.gen-safe{font-family:var(--sans);font-size:12.5px;line-height:1.75;color:var(--text3);max-width:min(340px,100%);margin:18px 0 0;word-break:keep-all;}
.gen-long{font-family:var(--sans);font-size:12.5px;line-height:1.75;color:var(--text2);max-width:min(340px,100%);margin:14px 0 0;padding:10px 14px;border-radius:8px;background:var(--bg3);word-break:keep-all;box-sizing:border-box;}
.gen-actions{margin-top:22px;}
.gen-retry{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--bg);background:var(--gold);border:0;border-radius:8px;padding:13px 28px;cursor:pointer;}
.gen-retry:disabled{opacity:.5;cursor:default;}
/* 세션 분실 고객 자가복구 폼 — 대기화면 안에서만 쓰인다(#sec-generating [hidden] 규칙이 함께 적용된다). */
.gen-recover{margin-top:20px;max-width:min(340px,100%);width:100%;box-sizing:border-box;}
.gen-recover-label{font-family:var(--sans);font-size:12.5px;line-height:1.75;color:var(--text2);margin:0 0 10px;word-break:keep-all;}
.gen-recover-label b{color:var(--gold);font-weight:600;}
.gen-recover-row{display:flex;gap:8px;align-items:stretch;}
.gen-recover-input{flex:1 1 auto;min-width:0;font-family:var(--sans);font-size:15px;letter-spacing:.18em;text-align:center;color:var(--text);background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:12px 10px;box-sizing:border-box;}
.gen-recover-input:focus{outline:none;border-color:var(--gold);}
.gen-recover-btn{flex:0 0 auto;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--bg);background:var(--gold);border:0;border-radius:8px;padding:12px 18px;cursor:pointer;}
.gen-recover-btn:disabled{opacity:.5;cursor:default;}
.gen-recover-msg{font-family:var(--sans);font-size:12.5px;line-height:1.7;color:var(--text2);margin:10px 0 0;word-break:keep-all;}
.gen-recover-msg.err{color:#E0736A;}
#sec-result{padding:0 0 64px;background:#0C0A07;min-height:100vh;}
#app-shell:has(#sec-result.active){max-width:none;box-shadow:none;background:#0C0A07;}
body:has(#sec-result.active){background:#0C0A07;}
.result-frame{
  display:block;width:100%;max-width:none;margin:0;border:0;background:#0C0A07;
  border-radius:0;box-shadow:none;min-height:600px;
}


/* ---- original inline style block 5 ---- */

#sec-landing{
    --bg:#071316; --bg2:#101C1F; --bg3:#17272B;
    --text:#EFE7D8; --text2:#BFAF98; --text3:#7F7565;
    --silver:#8AA2A4; --accent:#E5C98A;
    --red:#9F3D35; --gold:#D1A35E;
    --border:rgba(229,201,138,0.12); --border2:rgba(229,201,138,0.22);
    --serif:'Noto Serif KR','AppleMyungjo','Batang','Georgia',serif;
    --sans:'Noto Sans KR',-apple-system,'Apple SD Gothic Neo',sans-serif;
  }
#sec-landing *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
#sec-landing{
    background:var(--bg); color:var(--text); font-family:var(--sans); position:relative;
    line-height:1.85; font-weight:300; letter-spacing:.01em;
    overflow-x:hidden;
    text-align:center;
  }
#sec-landing .wrap{max-width:560px; margin:0 auto; padding:0 26px}
/* atmosphere */
#sec-landing .grain{position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.04;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#sec-landing .vignette{position:fixed; inset:0; pointer-events:none; z-index:1;
    background:radial-gradient(130% 100% at 50% 8%, transparent 40%, rgba(0,0,0,.55) 100%)}
#sec-landing section{position:relative; z-index:2; padding:clamp(72px,16vw,128px) 0}
#sec-landing .reveal{opacity:0; transform:translateY(28px); transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1)}
#sec-landing .reveal.in{opacity:1; transform:none}
#sec-landing .d1{transition-delay:.12s}
#sec-landing .d2{transition-delay:.24s}
#sec-landing .d3{transition-delay:.36s}
#sec-landing .d4{transition-delay:.48s}
#sec-landing .kick{font-family:var(--serif); font-size:.78rem; letter-spacing:.42em; color:var(--text3);
    text-transform:uppercase; margin-bottom:30px; padding-left:.42em}
#sec-landing h1,
#sec-landing h2,
#sec-landing .serif{font-family:var(--serif)}
#sec-landing .lead{font-family:var(--serif); font-weight:400; font-size:clamp(1.75rem,7.5vw,1.875rem);
    line-height:1.5; color:var(--text); letter-spacing:-.01em}
#sec-landing .lead .accent{color:var(--accent)}
#sec-landing .lead .red{color:var(--red); font-weight:600}
#sec-landing .lead .dim{color:var(--text3); font-size:clamp(0.875rem, 3.8vw, 1.125rem)}
#sec-landing .lead .permission-line{display:inline-block; font-size:clamp(1.125rem, 4.8vw, 1.35rem)}
#sec-landing .lead .record-title{font-weight:600}
#sec-landing .lead .shadow-line{display:inline-block; margin-bottom:60px}
#sec-landing .lead-kick{margin-top:42px}
#sec-landing p.body{font-size:1.04rem; color:var(--text2); margin-top:26px; font-weight:300}
#sec-landing p.body strong{color:var(--accent); font-weight:500}
#sec-landing .rule{width:1px; height:clamp(46px,12vw,84px); margin:0 auto;
    background:linear-gradient(to bottom,transparent,var(--silver),transparent); opacity:.5}
/* hero */
#sec-landing .hero{min-height:100svh; display:flex; flex-direction:column; justify-content:flex-start; text-align:center;
    padding-top:clamp(20px,6vw,40px); padding-bottom:clamp(72px,12vh,120px)}
#sec-landing .hero-visual{position:relative; width:min(82%,330px); margin:0 auto clamp(80px,14vw,98px); overflow:visible}
#sec-landing .hero-visual img{display:block; position:relative; z-index:0; width:100%; height:auto; transform:scale(1.2); transform-origin:center center; border-radius:3px;
    filter:grayscale(1) contrast(1.06) brightness(1.0);
    -webkit-mask-image:radial-gradient(ellipse 64% 70% at 50% 50%, #000 38%, rgba(0,0,0,.78) 56%, rgba(0,0,0,.34) 74%, transparent 92%);
    mask-image:radial-gradient(ellipse 64% 70% at 50% 50%, #000 38%, rgba(0,0,0,.78) 56%, rgba(0,0,0,.34) 74%, transparent 92%)}
#sec-landing .hero-visual::before{content:""; position:absolute; inset:-12%; pointer-events:none; z-index:1;
    background:radial-gradient(ellipse 60% 68% at 50% 54%, transparent 34%, rgba(7,19,22,.32) 58%, rgba(7,19,22,.78) 78%, var(--bg) 96%)}
#sec-landing .hero-visual::after{content:""; position:absolute; inset:-6%; pointer-events:none; z-index:2;
    background:linear-gradient(to bottom, rgba(7,19,22,.2) 0%, transparent 34%, rgba(7,19,22,.62) 78%, var(--bg) 100%)}
#sec-landing .hero-eye{font-family:var(--serif); font-size:.8rem; letter-spacing:.5em; color:var(--silver);
    margin-bottom:38px; opacity:.85}
#sec-landing .hero h1{font-size:clamp(1.75rem,7.5vw,1.875rem); font-weight:500; line-height:1.4; letter-spacing:-0.03em}
#sec-landing .hero h1 .sub{display:block; font-size:.5em; font-weight:300; color:var(--text3);
    letter-spacing:.04em; margin-top:30px; line-height:1.7}
#sec-landing .scrollcue{position:relative; margin:clamp(34px,8vh,58px) auto 0;
    font-size:.68rem; letter-spacing:.34em; color:var(--text3); text-align:center}
#sec-landing .scrollcue span{display:block; width:1px; height:clamp(48px,10vh,80px); margin:14px auto 0;
    background:linear-gradient(to bottom,var(--silver),transparent); animation:drop 2.6s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
    55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* quote-card (jung) */
#sec-landing .jung{position:relative; z-index:3; border:1px solid var(--border2); margin-top:-120px; background:linear-gradient(180deg,rgba(7,19,22,.6),rgba(14,14,18,.4));
    border-radius:3px; padding:clamp(34px,8vw,48px) clamp(26px,7vw,38px); text-align:center}
#sec-landing .jung .mark{font-family:var(--serif); font-size:2.6rem; color:var(--text3); line-height:1; margin-bottom:8px}
#sec-landing .jung .q{font-family:var(--serif); font-size:1.16rem; color:var(--text); line-height:1.85; font-weight:300}
#sec-landing .jung .q b{color:var(--accent); font-weight:500}
#sec-landing .jung .by{font-family:var(--serif); font-size:.82rem; letter-spacing:.3em; color:var(--silver); margin-top:28px}
#sec-landing .jung-note{font-size:.72rem; color:var(--text3); line-height:1.7; margin:14px auto 0; text-align:center}
#sec-landing .book-visual{position:relative; z-index:1; width:min(82%,330px); margin:36px auto 18px; overflow:hidden; border-radius:4px}
#sec-landing .book-visual.reveal{opacity:1; transform:none; transition:none}
#sec-landing .book-visual img{display:block; width:80%; height:auto; margin:0 auto; filter:contrast(1.04) brightness(.9) saturate(.86); transform:translateX(-140px); opacity:0; transition:opacity 1.15s cubic-bezier(.16,1,.3,1) 1s, transform 1.15s cubic-bezier(.16,1,.3,1) 1s; -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.45) 60%, transparent 74%); mask-image:linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.45) 60%, transparent 74%)}
#sec-landing .book-visual.in img{opacity:1; transform:translateX(0)}
#sec-landing .book-visual::before{content:""; position:absolute; top:0; left:10%; width:80%; height:34%; pointer-events:none; z-index:2;
    background:linear-gradient(to bottom, rgba(0,0,0,.48), rgba(0,0,0,.18) 48%, transparent 100%); opacity:0; transform:translateX(-140px); transition:opacity 1.15s cubic-bezier(.16,1,.3,1) 1s, transform 1.15s cubic-bezier(.16,1,.3,1) 1s}
#sec-landing .book-visual.in::before{opacity:1; transform:translateX(0)}
/* bridge (개인화 전환) */
#sec-landing .bridge{text-align:center}
#sec-landing .bridge .big{font-family:var(--serif); font-size:clamp(1.75rem,7.5vw,1.875rem); line-height:1.55; color:var(--text)}
#sec-landing .bridge .big b{color:var(--gold); font-weight:500}
#sec-landing .bridge .small{font-size:clamp(0.875rem, 3.8vw, 1.125rem); color:var(--text3); margin-top:24px}
/* FORM — conversion core */
#sec-landing .formsec{padding-bottom:clamp(96px,20vw,150px)}
#sec-landing .formcard{border:1px solid var(--border2); border-radius:4px; overflow:hidden;
    background:linear-gradient(180deg,#111D20,#0B1517); box-shadow:0 30px 80px -40px rgba(0,0,0,.9)}
#sec-landing .formcard .top{padding:clamp(30px,7vw,40px) clamp(24px,6vw,34px) 6px; text-align:center}
#sec-landing .mirror-line{font-family:var(--serif); font-size:1.18rem; color:var(--accent); line-height:1.6}
#sec-landing .mirror-line .dim{color:var(--text3)}
#sec-landing .formcard .fields{padding:clamp(22px,6vw,30px) clamp(24px,6vw,34px) clamp(28px,7vw,36px)}
#sec-landing label.fl{display:block; font-family:var(--serif); font-size:.82rem; letter-spacing:.16em; color:var(--text3);
    margin:22px 0 10px}
#sec-landing label.fl:first-child{margin-top:0}
#sec-landing .row{display:flex; gap:10px}
#sec-landing input[type=text],
#sec-landing select{
    width:100%; background:#0B1517; border:1px solid var(--border); border-radius:3px;
    color:var(--text); font-family:var(--sans); font-size:1.02rem; font-weight:300;
    padding:15px 16px; appearance:none; outline:none; transition:border-color .3s}
#sec-landing input::placeholder{color:#54545f}
#sec-landing input:focus,
#sec-landing select:focus{border-color:var(--silver)}
#sec-landing select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A7A8A' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 16px center; padding-right:38px}
#sec-landing .seg{display:flex; gap:10px}
#sec-landing .seg button{flex:1; background:#0B1517; border:1px solid var(--border); border-radius:3px; color:var(--text2);
    font-family:var(--sans); font-size:1rem; padding:14px; cursor:pointer; transition:.25s; font-weight:300}
#sec-landing .seg button.on{border-color:var(--silver); color:var(--text); background:#142126}
#sec-landing .cta{display:block; margin-top:6px; width:100%; border:none; border-radius:3px; cursor:pointer;
    text-decoration:none; text-align:center;
    background:linear-gradient(180deg,#F1E4C4,#D1A35E); color:#0B1517;
    font-family:var(--serif); font-weight:600; font-size:1.16rem; letter-spacing:.06em;
    padding:20px; transition:transform .2s, box-shadow .3s; box-shadow:0 14px 40px -16px rgba(229,201,138,.4)}
#sec-landing .cta:hover{transform:translateY(-2px); box-shadow:0 20px 48px -16px rgba(229,201,138,.55)}
#sec-landing .cta:active{transform:translateY(0)}
#sec-landing .reassure{text-align:center; font-size:.86rem; color:var(--text3); margin-top:18px; letter-spacing:.02em}
#sec-landing .reassure b{color:var(--silver); font-weight:400}
/* expert (trust, below fold of form) */
#sec-landing .expert{text-align:center}
#sec-landing .analyst-portrait{position:relative; width:min(60%,320px); aspect-ratio:2/3; margin:0 auto 30px; overflow:visible}
#sec-landing .bridge .analyst-portrait{margin-top:clamp(72px,16vw,128px)}
#sec-landing .analyst-portrait .portrait-photo{position:absolute; top:7%; left:7.2%; width:85.6%; height:85.6%; object-fit:cover; z-index:0;
    border-radius:2px; filter:grayscale(1) contrast(1.03) brightness(.88); box-shadow:inset 0 0 42px rgba(0,0,0,.75)}
#sec-landing .analyst-portrait .portrait-frame{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; z-index:4;
    opacity:.62; mix-blend-mode:screen; filter:saturate(.78) brightness(.86) drop-shadow(0 0 18px rgba(0,0,0,.58)) drop-shadow(0 0 34px rgba(0,0,0,.34));
    -webkit-mask-image:radial-gradient(ellipse 88% 92% at 50% 50%, #000 58%, rgba(0,0,0,.82) 74%, rgba(0,0,0,.28) 91%, transparent 100%);
    mask-image:radial-gradient(ellipse 88% 92% at 50% 50%, #000 58%, rgba(0,0,0,.82) 74%, rgba(0,0,0,.28) 91%, transparent 100%)}
#sec-landing .analyst-portrait::after{content:""; position:absolute; top:7%; left:7.2%; width:85.6%; height:85.6%; pointer-events:none; z-index:1;
    background:radial-gradient(75% 70% at 50% 35%, transparent 46%, rgba(0,0,0,.42) 100%),
      linear-gradient(to bottom, rgba(7,19,22,0) 58%, rgba(7,19,22,.55) 100%)}
#sec-landing .analyst-portrait::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
    background:radial-gradient(ellipse 70% 78% at 50% 50%, transparent 48%, rgba(7,19,22,.24) 68%, rgba(7,19,22,.68) 88%, rgba(7,19,22,.96) 100%)}
#sec-landing .expert .avatar{width:74px; height:74px; border-radius:50%; margin:0 auto 22px;
    border:1px solid var(--border2); background:radial-gradient(circle at 50% 35%,#2c2c36,#141418);
    display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:1.7rem; color:var(--silver)}
#sec-landing .expert .name{font-family:var(--serif); font-size:1.25rem; color:var(--text); letter-spacing:.04em}
#sec-landing .expert .role{font-family:var(--serif); font-size:.82rem; letter-spacing:.26em; color:var(--silver); margin-top:10px}
#sec-landing .cred-tags{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; width:min(80vw,560px); margin:18px auto 0}
#sec-landing .cred-tags span{font-family:var(--serif); flex:0 0 auto; max-width:100%; white-space:nowrap; overflow-wrap:normal; font-size:.74rem; letter-spacing:.06em; color:var(--text2);
    border:1px solid var(--border2); border-radius:999px; padding:6px 13px; background:rgba(229,201,138,.04)}
#sec-landing .expert .desc{font-size:clamp(0.875rem, 3.8vw, 1.125rem); color:var(--text3); margin-top:22px; line-height:1.8}
#sec-landing .hero-proof{font-family:var(--sans); font-size:.84rem; color:var(--text3); margin-top:24px; letter-spacing:.02em}
#sec-landing .hero-proof b{color:var(--silver); font-weight:500}
#sec-landing .proof-strip{display:flex; justify-content:center; margin:30px auto 0; max-width:420px;
    border:1px solid var(--border2); border-radius:4px; overflow:hidden; background:rgba(229,201,138,.03)}
#sec-landing .proof-stat{flex:1; padding:18px 8px; text-align:center}
#sec-landing .proof-stat + .proof-stat{border-left:1px solid var(--border)}
#sec-landing .proof-stat b{display:block; font-family:var(--serif); font-size:1.5rem; color:var(--accent); font-weight:600; line-height:1.1}
#sec-landing .proof-stat span{display:block; font-size:.72rem; color:var(--text3); margin-top:7px; letter-spacing:.02em}
#sec-landing .proof-quote{font-family:var(--serif); font-size:1rem; color:var(--text2); font-style:italic;
    line-height:1.7; margin:24px auto 0; max-width:400px}
#sec-landing .proof-quote cite{display:block; font-style:normal; font-size:.76rem; color:var(--text3); letter-spacing:.08em; margin-top:12px}
#sec-landing .reviews{display:flex; flex-direction:column; gap:14px; margin:26px auto 0; max-width:430px}
#sec-landing .review{font-family:var(--serif); font-size:.96rem; color:#fff; font-style:italic; line-height:1.65;
    border:1px solid var(--border); border-radius:4px; padding:17px 20px; background:rgba(229,201,138,.03); text-align:left}
#sec-landing .review cite{display:block; font-style:normal; font-size:.74rem; color:var(--text3); letter-spacing:.06em; margin-top:11px}
#sec-landing footer{text-align:center; padding:50px 0 calc(110px + env(safe-area-inset-bottom)); position:relative; z-index:2}
#sec-landing footer .closer{font-family:var(--serif); font-size:1.05rem; color:var(--text2); line-height:1.7}
#sec-landing footer .closer b{color:var(--accent); font-weight:500}
#sec-landing footer .legal{font-size:.72rem; color:var(--text3); margin-top:30px; letter-spacing:.04em}
#sec-landing footer .biz{font-size:.68rem; color:var(--text3); margin-top:14px; line-height:1.7; letter-spacing:.03em; opacity:.85}
/* fixed CTA */
#sec-landing .sticky{position:fixed; left:0; right:0; bottom:0; z-index:30; padding:24px 16px calc(18px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(7,19,22,.12) 0%,rgba(7,19,22,.86) 22%,rgba(7,19,22,.98) 100%);
    border-top:1px solid rgba(229,201,138,.12);
    box-shadow:0 -18px 44px rgba(0,0,0,.42)}
#sec-landing .sticky a{display:block; position:relative; width:min(70vw,392px); margin:0 auto; text-align:center; text-decoration:none;
    background:transparent; color:inherit; padding:0; border-radius:0;
    filter:drop-shadow(0 16px 24px rgba(0,0,0,.58)); transition:transform .2s, filter .3s}
#sec-landing .sticky a img{display:block; width:100%; height:auto}
#sec-landing .sticky a span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family:var(--serif); font-weight:600; font-size:1.06rem;
    color:#fff; letter-spacing:.05em; line-height:1; text-shadow:0 2px 4px rgba(0,0,0,.75), 0 0 16px rgba(255,255,255,.16);
    pointer-events:none; transform:translateY(-1px)}
#sec-landing .sticky a:hover{transform:translateY(-2px); filter:drop-shadow(0 20px 28px rgba(0,0,0,.64))}
#sec-landing .sticky a:active{transform:translateY(0); filter:drop-shadow(0 12px 20px rgba(0,0,0,.54))}
.mlp-legal-toggle summary{ list-style:none; cursor:pointer; color:var(--legal-fine); font-size:.72rem; }
.mlp-legal-toggle summary::-webkit-details-marker{ display:none; }
.mlp-legal-toggle summary::after{ content:"<"; display:inline-block; margin-left:4px; transform:rotate(-90deg); }
.mlp-legal-toggle[open] summary::after{ transform:rotate(90deg); }
@media (max-width:480px){
#sec-landing .wrap{padding:0 22px}
#sec-landing section{padding:clamp(58px,14vw,86px) 0}
#sec-landing .hero{padding-top:clamp(18px,5vw,28px); padding-bottom:clamp(64px,11vh,96px)}
#sec-landing .hero-visual{width:min(78%,300px); margin-bottom:clamp(76px,13vw,88px)}
#sec-landing .lead,
#sec-landing .hero h1,
#sec-landing .bridge .big{
      font-size:clamp(1.55rem, 6.6vw, 1.78rem);
      line-height:1.5;
      letter-spacing:0;
    }
#sec-landing .hero h1 .sub{
      font-size:.52em;
      line-height:1.8;
      margin-top:24px;
    }
#sec-landing .lead .dim,
#sec-landing .lead .permission-line,
#sec-landing .bridge .small,
#sec-landing .expert .desc,
#sec-landing p.body{
      font-size:clamp(0.82rem, 3.6vw, 1rem);
      line-height:1.85;
      letter-spacing:0;
    }
#sec-landing .lead .shadow-line{margin-bottom:42px}
#sec-landing .kick{font-size:.68rem; letter-spacing:.34em; margin-bottom:24px}
#sec-landing .scrollcue{margin-top:clamp(28px,7vh,46px)}
#sec-landing .scrollcue span{height:clamp(42px,8vh,64px)}
#sec-landing .jung{margin-top:-82px; padding:32px 22px}
#sec-landing .jung .q{font-size:clamp(.94rem,3.9vw,1.08rem); line-height:1.82}
#sec-landing .jung .by{font-size:.72rem; letter-spacing:.22em}
#sec-landing .jung-note{font-size:.66rem; padding:0 4px}
#sec-landing .proof-strip{max-width:100%}
#sec-landing .proof-stat{padding:15px 6px}
#sec-landing .proof-stat b{font-size:1.24rem}
#sec-landing .proof-stat span{font-size:.66rem}
#sec-landing .review{font-size:.86rem; line-height:1.72; padding:15px 16px}
#sec-landing .cred-tags{width:80vw; gap:7px}
#sec-landing .cred-tags span{font-size:.68rem; padding:5px 10px; letter-spacing:.03em}
#sec-landing .analyst-portrait{width:min(70%,280px)}
#sec-landing .bridge .analyst-portrait{margin-top:clamp(54px,13vw,82px)}
#sec-landing .sticky{padding:20px 14px calc(16px + env(safe-area-inset-bottom))}
#sec-landing .sticky a{width:70vw}
#sec-landing .sticky a span{font-size:.96rem}
#sec-landing footer .closer{font-size:.94rem}

  }


/* ---- original inline style block 6 ---- */

  /* 첫 화면 전용 디자인 토큰 (스코프됨) */
  #sec-landing .mlp{
    --pad:26px;
    --antique-gold:#d8ba73; --bronze:#8c6a3c;
    --ink:#2f2115; --ink-deep:#3a2818; --label-ink:#8c5f2d; --soft-gray:#98866d;
    --paper-top-mid:#f4e8c9; --paper-top-deep:#e7d5a6;   /* 위 질문카드 종이 톤 */
    --paper-bot-mid:#ead9ae; --paper-bot-deep:#ddc38d;   /* 하단 박스 종이 톤 */
    position:relative; z-index:2; width:100%; max-width:100%; min-width:0;
    background:#0c0a07;
    display:flex; justify-content:center; align-items:flex-start;
    font-family:"Noto Serif KR","Apple SD Gothic Neo","Malgun Gothic",serif;
    color:#e8d7ad; -webkit-font-smoothing:antialiased;
  }
  #sec-landing .mlp *{ margin:0; padding:0; box-sizing:border-box; }

  /* 어두운 세로 캔버스 — 폰은 가로 100%, PC는 480px 모바일 컬럼으로 고정 */
  #sec-landing .mlp-canvas{
    position:relative;
    width:100%; max-width:480px; min-width:0;
    min-height:100svh;                 /* dvh(스크롤 시 변동) 대신 svh 로 고정 */
    background:#17120b;
    display:flex; flex-direction:column;
    padding:16px var(--pad) calc(104px + env(safe-area-inset-bottom));  /* 하단: 고정 CTA 높이만큼 여유 */
    overflow:hidden;
  }

  /* 배경 레이어 — 뒤: 정지 이미지(100%), 앞: 영상(90%, 중앙) */
  #sec-landing .mlp-bg{
    position:absolute; inset:0; z-index:0;
    overflow:hidden; pointer-events:none;
    background:url('/static/img/bg_img.webp') center / cover no-repeat;
  }
  #sec-landing .mlp-video{
    position:absolute; inset:0; margin:auto;
    width:90%; height:90%;
    object-fit:cover; object-position:center calc(50% + 30px);
    opacity:1;
    /* 좌우 끝을 투명하게 페이드 → 뒤 배경 이미지와 경계를 부드럽게 */
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
  }
  /* 배경 위 어둠 오버레이 — 상단은 강하게(말풍선 뒤 가림), 중앙은 노출, 하단은 비네트 */
  #sec-landing .mlp-bg::after{
    content:""; position:absolute; inset:0;
    /* 상단 어둠 밴드를 위로 올려 중앙(약 44~56%)에 닿지 않게 함 — 중앙만 밝게 노출 */
    background:linear-gradient(180deg,
      rgba(9,7,5,.94) 0%,
      rgba(11,9,6,.72) 18%,
      rgba(12,10,7,.22) 31%,
      rgba(12,10,7,.02) 44%,
      rgba(12,10,7,.04) 56%,
      rgba(12,10,7,.72) 100%);
  }
  #sec-landing .mlp-canvas > :not(.mlp-bg){ position:relative; z-index:1; }

  /* 하단 CTA 도크 — app-shell 밖에서 iOS overflow/transform 조상의 영향을 받지 않는다. */
  #landing-fixed-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:20;
    height:calc(100px + env(safe-area-inset-bottom));
    pointer-events:none;
    background:#0c0a07;
    border-top:1px solid rgba(229,201,138,.10);
    box-shadow:0 -18px 44px rgba(0,0,0,.42);
    font-family:"Noto Serif KR","Apple SD Gothic Neo","Malgun Gothic",serif;
  }
  /* 모바일 브라우저의 동적 툴바(주소창 접힘/펼침)로 뷰포트 높이가 흔들릴 때, 도크 아래로
     실제 화면보다 더 내려간 부분이 순간 노출되는 것을 막는 여분 배경. 도크 자체의 높이·
     버튼 위치는 그대로 두고, 화면 밖(아래)으로만 같은 색을 더 깔아둔다. */
  #landing-fixed-cta::after{
    content:""; position:absolute; left:0; right:0; top:100%;
    height:150px; background:#0c0a07;
  }
  #landing-fixed-cta[hidden]{ display:none; }
  #landing-fixed-cta *{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

  /* ── 상단 질문 말풍선 (오래된 종이 조각, 계단식) ── */
  #sec-landing .mlp-bubbles{
    display:flex; flex-direction:column; align-items:stretch;
    margin-top:calc(var(--pad) - 16px);           /* 상단여백 = 좌측여백(26px) 과 동일 */
    margin-bottom:clamp(46px, 14vw, 64px);        /* 말풍선 → 헤드라인 간격 */
  }
  #sec-landing .mlp-card{
    position:relative;
    width:52%; padding:14px 22px; border-radius:2px;
    color:var(--ink);
    /* 종이 얼룩·가장자리 그을림·중앙 밝은 종이톤 (다겹 gradient, 박스 반투명 ~0.7) */
    background:
      radial-gradient(circle at 15% 20%, rgba(92,56,23,.13) 0, rgba(92,56,23,.06) 12%, transparent 30%),
      radial-gradient(circle at 80% 74%, rgba(160,112,55,.11) 0, transparent 32%),
      radial-gradient(circle at 50% 46%, rgba(255,242,198,.35) 0, rgba(232,215,173,.50) 50%, rgba(179,128,70,.28) 100%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--paper-top-mid) 70%, transparent) 0%,
        color-mix(in srgb, var(--paper-top-deep) 70%, transparent) 100%);
    /* 바깥 엣지: 차분한 데클(낡은 종이 결) */
    clip-path:polygon(0.8% 2%, 25% 1.2%, 50% 1.8%, 75% 1.2%, 99.2% 2%, 98.8% 98%, 75% 98.8%, 50% 98.2%, 25% 98.8%, 1.2% 98%);
    box-shadow:
      inset 0 0 22px rgba(83,45,18,.34),
      inset 0 0 55px rgba(120,72,28,.20),
      inset 0 0 0 1px rgba(93,58,25,.14);
    /* 떠 있는 그림자 — clip-path 에 안 잘리도록 filter 로 처리 */
    filter:drop-shadow(0 8px 12px rgba(40,22,8,.50)) drop-shadow(0 2px 5px rgba(44,24,10,.42));
  }
  #sec-landing .mlp-card--left{ align-self:flex-start; transform:rotate(-0.6deg); }
  #sec-landing .mlp-card--right{ align-self:flex-end; margin-top:clamp(14px, 4vw, 22px); margin-right:-6px; transform:rotate(0.5deg); }
  /* 가장자리 그을림 라인 오버레이 */
  #sec-landing .mlp-card::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    opacity:.55; mix-blend-mode:multiply;
    background:
      linear-gradient(90deg, rgba(80,45,18,.25) 0%, transparent 7%, transparent 93%, rgba(80,45,18,.22) 100%),
      linear-gradient(180deg, rgba(90,50,20,.20) 0%, transparent 10%, transparent 88%, rgba(90,50,20,.20) 100%);
  }
  /* 안쪽 정갈한 프레임 라인 (이중 테두리) */
  #sec-landing .mlp-card::after{
    content:""; position:absolute; inset:2px; z-index:0; pointer-events:none;
    border:1px solid rgba(93,58,25,.20); border-radius:1px;
  }
  #sec-landing .mlp-card-text{
    position:relative; z-index:1;
    line-height:1.55; letter-spacing:-0.04em;
    font-size:clamp(0.58rem, 2.8vw, 0.68rem);
    word-break:keep-all; text-align:center;
    color:var(--ink); text-shadow:0 1px 0 rgba(255,238,195,.40);
  }
  #sec-landing .mlp-card-text strong{ color:var(--ink-deep); font-weight:700; }

  /* ── 중앙 카피 ── */
  #sec-landing .mlp-headline{
    text-align:center;
    font-size:clamp(1.4375rem, 6vw, 1.625rem);
    line-height:1.35; letter-spacing:-0.03em;
    word-break:keep-all; text-wrap:balance;
    margin-bottom:clamp(30px, 8vw, 40px);
    color:var(--antique-gold); font-weight:700;
    text-shadow:0 2px 8px rgba(0,0,0,.55);
  }
  #sec-landing .mlp-subcopy{
    text-align:center;
    font-size:clamp(0.78rem, 3.5vw, 0.875rem);
    line-height:1.8; letter-spacing:-0.04em;
    word-break:keep-all; color:var(--soft-gray);
  }

  /* 중간 여백 — 하단 박스를 아래로 밀어주는 스페이서
     min-height를 두면 flex-shrink가 이 값 아래로 못 줄어 .mlp-canvas가 100svh를 넘어가고,
     그 초과분에 .mlp-bg 배경이 그대로 노출된다(하단 고정 CTA 아래로 배경이 비치는 원인).
     0으로 두면 화면이 넉넉할 땐 flex:1이 여전히 남는 공간을 채우고, 좁을 땐 그만큼 줄어든다. */
  #sec-landing .mlp-spacer{
    flex:1 1 auto;
    min-height:0;
    display:flex; align-items:center; justify-content:center;
  }

  /* ── 하단 큰 문구 박스 (오래된 종이 조각) ── */
  #sec-landing .mlp-note{
    position:relative; overflow:hidden; border-radius:2px;
    align-self:center; width:80%; padding:23px 28px;
    color:var(--ink); transform:rotate(-0.3deg);
    background:
      radial-gradient(circle at 12% 18%, rgba(92,56,23,.18) 0, rgba(92,56,23,.08) 12%, transparent 28%),
      radial-gradient(circle at 82% 22%, rgba(160,112,55,.18) 0, transparent 30%),
      radial-gradient(circle at 50% 50%, rgba(255,242,198,.55) 0, rgba(232,215,173,.72) 48%, rgba(179,128,70,.38) 100%),
      linear-gradient(180deg, var(--paper-bot-mid) 0%, var(--paper-bot-deep) 100%);
    box-shadow:
      inset 0 0 28px rgba(83,45,18,.36),
      inset 0 0 70px rgba(120,72,28,.24),
      inset 0 0 0 1px rgba(93,58,25,.22);
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.42)) drop-shadow(0 3px 7px rgba(44,24,10,.45));
  }
  #sec-landing .mlp-note::before{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.7;
    background:
      linear-gradient(90deg, rgba(80,45,18,.25) 0%, transparent 7%, transparent 93%, rgba(80,45,18,.22) 100%),
      linear-gradient(180deg, rgba(90,50,20,.20) 0%, transparent 10%, transparent 88%, rgba(90,50,20,.20) 100%);
  }
  #sec-landing .mlp-note-label{
    position:relative; z-index:1; display:block; margin-bottom:16px;
    font-size:clamp(0.6rem, 2.8vw, 0.6875rem);
    line-height:1; letter-spacing:0.22em;
    color:var(--label-ink);
    font-family:"Courier Prime","Courier New",monospace; font-weight:700;
    text-align:center;
  }
  #sec-landing .mlp-note-text{
    position:relative; z-index:1;
    color:var(--ink);
    font-size:clamp(0.82rem, 4.2vw, 1.135rem);
    line-height:1.6; letter-spacing:-0.05em; font-weight:700;
    word-break:keep-all; text-align:center;
    text-shadow:0 1px 0 rgba(255,238,195,.45);
  }

  /* ── CTA 버튼 (뷰포트 하단 고정) — 기능은 goForm() 그대로, 디자인만 ── */
  #landing-fixed-cta .mlp-cta{
    position:absolute; left:50%; bottom:calc(18px + env(safe-area-inset-bottom));
    transform:translateX(-50%); z-index:30;
    display:block; width:min(64%, 272px); max-width:calc(100% - 52px);
    border:none; background:transparent; cursor:pointer; padding:0;
    aspect-ratio:780 / 200; text-decoration:none; pointer-events:auto;
  }
  #landing-fixed-cta .mlp-cta-frame{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:fill; pointer-events:none;
  }
  #landing-fixed-cta .mlp-cta-label{
    position:relative; z-index:1;
    display:flex; align-items:center; justify-content:center; height:100%;
    font-size:clamp(0.9375rem, 4vw, 1.0625rem);
    font-weight:700; letter-spacing:0.5px;
    color:#f4e6c8; text-shadow:0 1px 3px rgba(0,0,0,.6);
  }
  #landing-fixed-cta .mlp-cta:active{ transform:translateX(-50%) translateY(1px); }

  /* PC(>480px)만: 배경 영상·하단 박스를 각각 60px 위로, 중앙 그라데이션은 밝게 (모바일은 기본값 유지) */
  @media (min-width:481px){
    #sec-landing .mlp-video{ object-position:center calc(50% - 30px); }
    #sec-landing .mlp-note{ margin-bottom:24px; }        /* 박스↔CTA 간격 축소 */
    /* 상단 어둠 밴드를 위로 올려 중앙(약 40~60%)에 닿지 않게 함 */
    #sec-landing .mlp-bg::after{
      background:linear-gradient(180deg,
        rgba(9,7,5,.92) 0%,
        rgba(11,9,6,.60) 16%,
        rgba(12,10,7,.14) 27%,
        rgba(12,10,7,0) 40%,
        rgba(12,10,7,0) 60%,
        rgba(12,10,7,.66) 100%);
    }
  }

  /* 말풍선 교차 페이드 키프레임 (모바일 전용 애니메이션에서 사용)
     8s 루프 — 왼쪽: 0s 페이드인 → 3~3.5s 페이드아웃 / 오른쪽: 4~4.4s 페이드인 → 7~7.5s 페이드아웃 */
  @keyframes mlpBubbleLeft{
    0%{opacity:0} 5%{opacity:1} 37.5%{opacity:1} 43.75%{opacity:0} 100%{opacity:0}
  }
  @keyframes mlpBubbleRight{
    0%{opacity:0} 50%{opacity:0} 55%{opacity:1} 87.5%{opacity:1} 93.75%{opacity:0} 100%{opacity:0}
  }

  /* 첫 화면 아래 블록 — PC에선 약관 숨김(기존 footer 사용) + CTA 고정이라 높이 0 */
  #sec-landing .mlp-below{ width:100%; max-width:480px; min-width:0; margin:0 auto; background:#0c0a07; }
  #sec-landing .mlp-legal{ display:none; }

  /* 모바일(≤480px)만: 영상 크기·위치, 하단 박스 폭, 라벨 가독성 미세조정 (PC는 기본값 유지) */
  @media (max-width:480px){
    #sec-landing .mlp-video{ width:80%; height:80%; object-position:center calc(50% + 50px); transform:translateY(-105px); }
    #sec-landing .mlp-note{ width:78%; }
    #sec-landing .mlp-note-label{ font-size:clamp(0.6rem, 2.4vw, 0.6875rem); letter-spacing:0.24em; }

    /* 말풍선: 계단식 → 상단 한 줄(좌우 나란히, 동일 높이, 각 ~50%) + 교차 페이드.
       opacity만 애니메이션 → 레이아웃 시프트 없음.
       한 줄이 되며 줄어든 세로 길이만큼 margin-bottom 으로 보정(헤드라인 위치 유지). */
    #sec-landing .mlp-bubbles{
      flex-direction:row; justify-content:space-between; align-items:stretch;
      margin-bottom:clamp(26px, 8vw, 36px);
    }
    #sec-landing .mlp-card{
      width:calc(50% - 5px); padding:14px 10px;
      display:flex; align-items:center; justify-content:center;
    }
    #sec-landing .mlp-card--left{ animation:mlpBubbleLeft 8s linear infinite; }
    #sec-landing .mlp-card--right{
      margin-top:0; margin-right:0;
      animation:mlpBubbleRight 8s linear infinite;
    }

    /* CTA는 root fixed overlay로 화면 하단에 고정되어 약관 푸터 위를 덮는다. */
    #sec-landing .mlp-canvas{ padding-bottom:36px; }
    #sec-landing .mlp-below{ padding:6px 26px 30px; }
    #sec-landing .mlp-legal{ display:block; padding-bottom:0; }
    #sec-landing > footer{ display:none; }          /* 데스크톱용 푸터 중복 노출 방지 */
    #sec-landing{ padding-bottom:0; }
  }


/* ---- original inline style block 7 ---- */

/* 결제화면 시안 토큰 (Figma 260727) — 컨테이너 radius 8 / 패딩 20·30 / 간격 30 / 보더 #E0E0E0,
   선택 강조는 테두리 #FE2F51 + 배경 #FFD0D8 20%. 서체는 프리텐다드, 폰트크기는 짝수로 통일. */
#checkout{--co-radius:8px;--co-pad-y:20px;--co-pad-x:30px;--co-gap:30px;--co-line:#E0E0E0;--co-accent:#FE2F51;--co-accent-bg:rgba(255,208,216,.2);--co-indent:30px}
/* scrollbar-gutter both-edges: PC(클래식 스크롤바)에서 본문 컬럼은 스크롤바를 뺀 폭의 중앙,
   position:fixed 인 하단 CTA 는 스크롤바를 포함한 뷰포트 중앙이라 반칸(≈7px) 어긋났다.
   양쪽에 같은 거터를 예약해 두 중앙을 일치시킨다. 오버레이 스크롤바(모바일·맥)에는 영향 없음. */
html.co-lock,body.co-lock{overflow:hidden}#checkout{position:fixed;inset:0;z-index:10000;display:none;overflow-y:auto;scrollbar-gutter:stable both-edges;background:#fff;padding:0 0 110px;font-family:'Pretendard Variable',Pretendard,var(--sans,-apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif);color:#17171B;-webkit-font-smoothing:antialiased}#checkout.is-open{display:block}#checkout *{box-sizing:border-box}#checkout [hidden]{display:none!important}
.co-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:center;height:52px;background:#fff;border-bottom:1px solid var(--co-line);text-align:center}.co-back{position:absolute;left:6px;top:0;height:52px;width:44px;border:0;background:none;font-size:28px;line-height:1;color:#17171B;cursor:pointer}.co-head-title{font-size:16px;font-weight:600}
/* 상품명 컨테이너 상단 여백 60 */
.co-body{padding:60px 16px 0;max-width:460px;margin:0 auto}
/* 패딩은 260727 수정내용 원문(Notion, 축을 상하/좌우로 명시)대로 세로 20 / 가로 30 — 이전에
   "가로·세로 순서" 해석으로 뒤집어 둔 것을 되돌렸다. 보더도 원문값 #E0E0E0.
   제목 20px SemiBold #111(-0.5), 보조문구 14px Regular #111(-0.35). */
.co-sec{background:#fff;border:1px solid var(--co-line);border-radius:var(--co-radius);padding:var(--co-pad-y) var(--co-pad-x);margin-bottom:var(--co-gap)}.co-sec-t{font-size:20px;line-height:26px;font-weight:600;color:#111;letter-spacing:-.5px;margin-bottom:4px}.co-sec-sub{font-size:14px;line-height:18px;color:#111;letter-spacing:-.35px;margin-bottom:14px}
/* 상품명 — 피그마 실측: 연분홍 면 5% + 강조 테두리 1.67, 패딩 30/26, 이름 18 SemiBold,
   정가 10 Medium #B6B6B6, 할인율 14 Bold, 판매가 14 SemiBold, 할인율·가격 간격 12 */
.co-product{background:rgba(255,208,216,.05);border:1.67px solid var(--co-accent);border-radius:var(--co-radius);padding:30px 26px;margin-bottom:var(--co-gap);display:flex;align-items:center;justify-content:space-between;gap:10px}.co-product-name{font-size:18px;line-height:18px;font-weight:600;color:#111;letter-spacing:-.36px}.co-product-price{display:flex;align-items:center;gap:12px;white-space:nowrap}.co-rate{font-size:14px;font-weight:700;color:var(--co-accent);letter-spacing:-.42px}.co-was{font-size:10px;font-weight:500;color:#B6B6B6;letter-spacing:-.25px;text-decoration:line-through}.co-now{font-size:14px;font-weight:600;color:#111;letter-spacing:-.42px}
.co-phone{display:flex;gap:8px}.co-phone select,.co-phone input{height:48px;border:1px solid #E1E1E1;border-radius:10px;font-size:16px;color:#111;background:#fff;transition:border-color .15s}
/* 앞자리 셀렉트 — 피그마 원본 벡터(664:2041): 채움형 셰브런 #E1E1E1 12.6x7.63, 좌우 여백 20(브리프 §6) */
/* 선택자 특정도 주의: 앞의 `.co-phone select` 가 background 단축으로 #fff 를 깔기 때문에
   같은 특정도로는 화살표가 덮여 사라진다(그동안 렌더되지 않던 원인). select 를 함께 적어 올린다. */
.co-phone select.co-phone-pre{flex:0 0 102px;padding:0 20px;font-weight:600;letter-spacing:-.4px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.6' height='7.63329' viewBox='0 0 12.6 7.63329' fill='none'%3E%3Cpath d='M11.2088 0.261024C11.5064 -0.0654756 12.0124 -0.0888418 12.339 0.208792C12.6655 0.506425 12.6889 1.01246 12.3912 1.33896L6.8912 7.37229L6.87684 7.38766C6.80095 7.4666 6.70967 7.52913 6.60864 7.57137C6.50761 7.61361 6.39898 7.63466 6.28949 7.63322C6.18 7.63178 6.07196 7.60788 5.97208 7.563C5.8722 7.51811 5.78259 7.45321 5.7088 7.37229L0.208805 1.33896C-0.0888622 1.01242 -0.0654621 0.506425 0.261038 0.208792C0.587538 -0.0888418 1.09357 -0.0654756 1.3912 0.261024L6.3 5.64582L11.2088 0.261024Z' fill='%23E1E1E1'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 20px center}
.co-phone input{flex:1;min-width:0;text-align:center;padding:0 12px}.co-phone input::placeholder{color:#C4C4CC}
.co-phone select:focus,.co-phone input:focus{outline:none;border-color:var(--co-accent)}
/* 결제 금액 — 피그마 실측: 본문 16 #424242(항목명 Regular / 금액 SemiBold), 할인 라벨 14,
   할인율 배지는 알약형 10 SemiBold, 구분선 #F1F1F1 2px, 최종금액 18 SemiBold #111 */
.co-amt-row{display:flex;justify-content:space-between;gap:12px;font-size:16px;line-height:16px;color:#424242;letter-spacing:-.4px;padding:6px 0}.co-amt-row>span:last-child{font-weight:600}.co-amt-disc{font-size:14px;letter-spacing:-.35px}.co-amt-disc>span:last-child{color:var(--co-accent);font-size:16px}.co-disc-badge{display:inline-block;margin-left:8px;padding:4px 6px;border-radius:999px;background:var(--co-accent-bg);color:var(--co-accent);font-size:10px;line-height:10px;font-weight:600;letter-spacing:-.25px;vertical-align:1px}.co-amt-total{display:flex;justify-content:space-between;align-items:center;font-size:18px;line-height:18px;font-weight:600;color:#111;letter-spacing:-.45px;padding-top:18px;margin-top:12px;border-top:2px solid #F1F1F1}
/* 결제수단 섹션 — 위젯(renderPaymentMethods)은 자체 좌우 패딩을 갖고 렌더된다. 그대로 두면 위젯
   콘텐츠가 섹션 제목보다 그만큼 더 안쪽으로 밀려 좌측 세로선이 어긋난다(브리프 §8).
   위젯 내부 패딩만큼 음수 마진으로 되돌려 제목과 같은 세로선에 맞춘다.
   실측(로컬 위젯 렌더, 뷰포트 1512 / 컬럼 폭 390·460 기하): 위젯 좌우 패딩 24px.
   실뷰포트 모바일은 미검증 — 위젯이 좁은 화면에서 내부 패딩을 줄이면 이 값도 함께 줄여야 한다. */
#co-pm-sec{--co-pm-inset:24px}
#toss-payment-methods{margin:0 calc(-1 * var(--co-pm-inset))}
#toss-payment-methods:empty{display:none}
/* 시안(260721) 정렬: 라디오가 섹션 제목과 같은 세로선(컨테이너 콘텐츠 라인)에 서고,
   패널 내용(그리드·안내문)은 결제수단명 텍스트 라인까지 들여쓴다(라디오 20 + 간격 10 = 30).
   이전 구현은 라디오를 패딩 밖으로 내어써 수단명을 제목 라인에 맞췄는데 시안과 반대 해석이었다(260730 재수정). */
/* .co-pm-row 는 <button> 이라 width 지정이 없으면 일부 브라우저(구형 WebView 등)가 flex 부모의
   align-items:stretch 를 무시하고 콘텐츠 크기로 쪼그라든다 — 그 상태에서 라디오+라벨+배지가 좁은
   박스에 눌려 "퀵계좌이체"·"카드결제" 라벨이 줄바꿈되는 원인이었다. width:100% 로 고정폭 강제. */
.co-pm-row{display:flex;width:100%;align-items:center;gap:10px;padding:12px 0;border:0;background:none;cursor:pointer;text-align:left;font-family:inherit;font-size:16px}.co-radio{flex:0 0 20px;height:20px;border-radius:50%;border:2px solid #C9CAD0;position:relative}.co-radio.on{border-color:#17171B}.co-radio.on::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#17171B}.co-pm-label{font-size:14px;font-weight:700}.co-pm-badge{margin-left:8px;font-size:12px;font-weight:700;color:var(--co-accent);background:var(--co-accent-bg);border-radius:6px;padding:4px 8px;line-height:1}
.co-pm-sec{display:flex;flex-direction:column}.co-pm-row.open .co-pm-label{color:#17171B}
.co-pm-panel{padding:2px 0 14px;margin-left:var(--co-indent)}
.co-opt-note{font-size:12px;color:#9A9AA2;margin:2px 0 10px}
.co-opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.co-opt-grid.co-opt-1{grid-template-columns:1fr}
/* 피그마 260727_결제페이지 실측: 버튼 radius 4(컨테이너 8과 별개), 높이 46, 아이콘 18,
   좌측정렬 패딩 16 + 간격 12, 텍스트 12px SemiBold #111 자간 -0.3 */
/* 카드사명은 한 줄 고정(260730 대표 지시). 시안 실측은 패딩 16·간격 12지만 그 값으로는
   최장 이름("카카오뱅크")이 3열 셀 안에서 줄바꿈된다(컬럼 최대 460에서 내부 48px < 필요 60px)
   → 패딩 12·간격 8로 소폭 축소해 한 줄을 확보한다. 더 좁은 화면은 아래 미디어쿼리에서 2열 전환. */
.co-opt{display:flex;align-items:center;justify-content:flex-start;gap:8px;height:46px;padding:0 12px;border:1px solid var(--co-line);border-radius:4px;background:#fff;font-size:12px;font-weight:600;color:#111;letter-spacing:-.3px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:border-color .15s,background .15s}
.co-opt img{width:18px;height:18px;flex:0 0 18px;object-fit:contain}
.co-opt.on{border-color:var(--co-accent);background:var(--co-accent-bg)}
/* 간편결제는 시안대로 1열 — 가로형 브랜드 로고(42x14) + 간격 18 + 패딩 22 */
.co-opt-grid.co-opt-1 .co-opt{padding:0 22px;gap:18px}
.co-opt-grid.co-opt-1 .co-opt img{width:42px;height:14px;flex:0 0 42px}
/* 더보기 — 보더 없이 텍스트만 중앙 정렬(다른 버튼이 좌측정렬로 바뀌어도 유지) */
#co-card-more{justify-content:center;border-color:transparent;background:none;color:#8A8A93;gap:4px}
/* 간편결제 미선택 프리뷰 — 어떤 수단인지 가늠되게 아이콘 + 수단별 혜택 요약 */
.co-easy-preview{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 12px;padding:2px 0 12px}
.co-easy-prev{display:flex;align-items:center;gap:6px;font-size:12px;color:#5A5A63;white-space:nowrap}
/* 좁은 화면: 3열로는 카드사명 한 줄이 물리적으로 불가(375px에서 셀 내부 ≈31px) → 2열 전환.
   시안은 3열이지만 시안의 카드명 표기가 4자 기준이라 실명 기준으론 한 줄 우선(260730 대표 지시). */
@media (max-width:430px){
  .co-opt-grid{grid-template-columns:repeat(2,1fr)}
  .co-opt-grid.co-opt-1{grid-template-columns:1fr}
}
.co-easy-prev img{width:18px;height:18px;flex:0 0 18px}
/* 간편결제 패널 하단 안내 — 피그마 실측: 회색면 #F7F9FA / radius 4 / 패딩 16 / 본문 #828C94 12px.
   퀵계좌이체 쪽 안내(.co-opt-note)는 시안에서 맨 텍스트라 별도 클래스로 분리한다. */
.co-easy-note{background:#F7F9FA;border-radius:4px;padding:16px;font-size:12px;line-height:16px;letter-spacing:-.3px;color:#828C94}
/* 퀵계좌이체는 내부 선택지가 하나뿐 — 라디오만 눌러도 선택 상태(테두리)가 붙는다 */
.co-quick-box{display:flex;align-items:center;justify-content:center;height:48px;border:1px solid var(--co-line);border-radius:var(--co-radius);background:#fff;font-size:14px;font-weight:700;color:#17171B;transition:border-color .15s,background .15s}
.co-quick-box.on{border-color:var(--co-accent);background:var(--co-accent-bg)}
#checkout.pm-widget .co-pm-custom{display:none}
#checkout.pm-widget .co-agree-item-tossterms{display:none}
/* 할인코드 입력 — 결제금액 요약 바로 위. 금액은 전부 서버 응답값으로만 갱신한다. */
.co-promo-row{display:flex;gap:8px}
.co-promo-row input{flex:1;min-width:0;height:48px;border:1px solid #E1E1E1;border-radius:10px;padding:0 14px;font-size:16px;color:#111;background:#fff;letter-spacing:.04em;transition:border-color .15s}
.co-promo-row input::placeholder{color:#C4C4CC;letter-spacing:0}
.co-promo-row input:focus{outline:none;border-color:var(--co-accent)}
.co-promo-row input:disabled{background:#F7F9FA;color:#828C94}
.co-promo-btn{flex:0 0 auto;height:48px;padding:0 20px;border:1px solid #E1E1E1;border-radius:10px;background:#fff;font-size:16px;font-weight:600;color:#111;letter-spacing:-.35px;cursor:pointer;transition:background .15s}
.co-promo-btn:hover{background:#F7F9FA}
.co-promo-btn:disabled{opacity:.5;cursor:not-allowed}
.co-promo-msg{margin-top:10px;font-size:14px;line-height:18px;letter-spacing:-.3px;color:#828C94}
.co-promo-msg.ok{color:#118E62}
.co-promo-msg.err{color:#E5484D}
/* 전체동의 구간만 회색 면 + 보더 없음 (위 컨테이너들은 흰색 + 회색 보더) */
/* 전체동의 — 피그마 실측: 면 #F7F9FA, 패딩 30/24, 행 간격 8, 글자색 전부 #828C94,
   마스터 16 Medium / 항목 12 Regular, 체크 아이콘 16 */
.co-agree{background:#F7F9FA;border:0;border-radius:var(--co-radius);padding:30px 24px;margin-bottom:var(--co-gap)}.co-agree-all{display:flex;align-items:center;gap:8px;width:100%;padding:0 0 4px;border:0;background:none;cursor:pointer;font-family:inherit}.co-check{flex:0 0 16px;height:16px;border-radius:50%;border:1.5px solid #C9CAD0;background:#fff;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}.co-check::after{content:"✓";font-size:10px;line-height:1;opacity:0}.co-check.on{background:#828C94;border-color:#828C94}.co-check.on::after{opacity:1}.co-agree-label{font-size:16px;line-height:16px;font-weight:500;color:#828C94}
/* 셰브런은 피그마 원본 벡터(664:2150) — stroke #828C94 / 1px / linejoin round / 8.71x4.85.
   원본은 열린 상태(∧)라 닫힘 기본형(∨)으로 y를 뒤집어 두고, .open 에서 180° 돌려 원본과 같아진다. */
.co-agree-chev{position:relative;margin-left:auto;width:24px;height:24px;flex:0 0 24px;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.70773' height='4.8543' viewBox='0 0 8.70773 4.8543' fill='none'%3E%3Cpath d='M0.353864 0.353864 4.35386 4.35386 8.35386 0.353864' stroke='%23828C94' stroke-width='1.00088' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;transition:transform .2s;cursor:pointer}.co-agree-chev.open{transform:rotate(180deg)}
/* 시각적 아이콘은 24px 그대로 두고, 탭 인식 범위만 44px(모바일 권장 최소)로 넓힌다.
   ::before 는 생성 콘텐츠라 클릭 시 event.target 은 여전히 .co-agree-chev 자신이라
   기존 delegated 클릭 핸들러(toggle-agreement-list)가 그대로 동작한다. */
.co-agree-chev::before{content:"";position:absolute;inset:-10px}
/* 토스 필수약관 위젯 — 전체동의 회색면 안에서 자체 약관 목록과 한 묶음으로 보이게 여백만 정리.
   좌측 세로선은 맞추지 않는다: 위젯 자체 좌측 패딩이 30px 라 체크박스가 자사 항목보다 18px 안쪽에
   있는데(실측), 음수 마진으로 당기면 위젯의 흰 배경면이 회색 블록 안에서 좌우 비대칭이 된다.
   §14 가 요구하는 건 배치·간격이라 흰 면을 좌우 균등(24px)으로 두는 쪽을 택했다. */
#toss-agreement{margin-top:4px}
#toss-agreement:empty{display:none}
.co-agree-list{padding:0;border:0}.co-agree-item{display:flex;align-items:center;gap:4px;padding:4px 10px}.co-agree-item .co-check{flex:0 0 16px;height:16px}.co-agree-item-label{font-size:12px;line-height:12px;color:#828C94}.co-agree-item-label b{color:#828C94;font-weight:400}.co-agree-more{margin-left:auto;font-size:12px;line-height:12px;color:#828C94;text-decoration:underline;white-space:nowrap;cursor:pointer}
.co-cta-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:460px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #ECEDF0;z-index:10001}.co-cta{display:block;width:100%;margin:0 auto;height:54px;border:0;border-radius:12px;background:#17171B;color:#fff;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit}.co-cta:disabled{background:#C9CAD0;cursor:not-allowed}

/* Former index.html style attributes.  Keep their original visual precedence
   without requiring CSP style-src 'unsafe-inline'. */
.index-text-left{text-align:left!important}.index-text-center{text-align:center!important}.index-legal-gap{margin-top:10px!important}.index-legal-link{color:var(--text2)!important;text-decoration:underline!important}.index-site-footer{padding:26px 0 0;background:#0c0a07;position:relative;z-index:1}.index-site-footer-wrap{max-width:680px;margin:0 auto;text-align:left;padding:0 20px}.index-cinema-ambient{opacity:.9}.index-cinema-particle--1{left:10%;top:60%;font-size:54px;animation-delay:0s}.index-cinema-particle--2{left:78%;top:70%;font-size:64px;animation-delay:2.4s}.index-cinema-particle--3{left:24%;top:40%;font-size:40px;animation-delay:4.8s}.index-cinema-particle--4{left:62%;top:50%;font-size:48px;animation-delay:1.4s}.index-cinema-particle--5{left:44%;top:78%;font-size:44px;animation-delay:6.2s}.index-cinema-particle--6{left:86%;top:38%;font-size:38px;animation-delay:3.6s}.index-cinema-particle--7{left:6%;top:30%;font-size:42px;animation-delay:5.6s}
#teaser-result{display:none}.index-v4-mt12{margin-top:12px!important}.index-v4-mt14{margin-top:14px!important}.index-v4-mt16{margin-top:16px!important}.index-v4-mt24{margin-top:24px!important}.index-v4-mt30{margin-top:30px!important}.index-pg-emphasis{color:var(--pg-hl)!important;font-weight:700!important}.index-rd-legal-gap{margin-top:34px!important}.index-co-order-title{order:-1}.index-co-order-kakao{order:0}.index-co-order-kakao-panel{order:1}.index-co-order-card{order:2}.index-co-order-card-panel{order:3}.index-co-order-easy{order:4}.index-co-order-easy-preview{order:5}.index-co-order-easy-panel{order:6}.index-co-note-gap{margin:10px 0 0!important}.index-co-sec-title{font-size:18px!important;line-height:18px!important;letter-spacing:-.45px!important}.index-co-sec-title--promo{margin-bottom:14px!important}.index-co-sec-title--amount{margin-bottom:24px!important}.index-result-legal{max-width:680px;margin:14px auto 0;padding:0 20px;font-size:10.5px;line-height:1.7;color:var(--text3);text-align:center;word-break:keep-all}.index-result-reviews{max-width:460px;margin:24px auto 40px;padding:0 20px}.index-initially-hidden{display:none}
.v4-ms-cell.v4-el--목{background:linear-gradient(180deg,rgba(95,174,110,.16),rgba(10,11,13,.4))}.v4-ms-cell.v4-el--목.ilgan{border-color:#5fae6e}.v4-ms-cell.v4-el--목 .v4-ms-hanja,.v4-vb-lb.v4-el--목{color:#a9d6b2}.v4-vb-fill.v4-el--목{background:#5fae6e}.v4-ms-cell.v4-el--화{background:linear-gradient(180deg,rgba(216,96,74,.16),rgba(10,11,13,.4))}.v4-ms-cell.v4-el--화.ilgan{border-color:#d8604a}.v4-ms-cell.v4-el--화 .v4-ms-hanja,.v4-vb-lb.v4-el--화{color:#f0a899}.v4-vb-fill.v4-el--화{background:#d8604a}.v4-ms-cell.v4-el--토{background:linear-gradient(180deg,rgba(205,161,78,.15),rgba(10,11,13,.4))}.v4-ms-cell.v4-el--토.ilgan{border-color:#cda14e}.v4-ms-cell.v4-el--토 .v4-ms-hanja,.v4-vb-lb.v4-el--토{color:#e6cf9a}.v4-vb-fill.v4-el--토{background:#cda14e}.v4-ms-cell.v4-el--금{background:linear-gradient(180deg,rgba(159,176,192,.14),rgba(10,11,13,.4))}.v4-ms-cell.v4-el--금.ilgan{border-color:#9fb0c0}.v4-ms-cell.v4-el--금 .v4-ms-hanja,.v4-vb-lb.v4-el--금{color:#cfd7e0}.v4-vb-fill.v4-el--금{background:#9fb0c0}.v4-ms-cell.v4-el--수{background:linear-gradient(180deg,rgba(95,134,191,.16),rgba(10,11,13,.4))}.v4-ms-cell.v4-el--수.ilgan{border-color:#5f86bf}.v4-ms-cell.v4-el--수 .v4-ms-hanja,.v4-vb-lb.v4-el--수{color:#aac4e6}.v4-vb-fill.v4-el--수{background:#5f86bf}.v4-ms-cell.v4-el--fallback{background:linear-gradient(180deg,rgba(138,130,118,.14),rgba(10,11,13,.4))}.v4-ms-cell.v4-el--fallback.ilgan{border-color:#8a8276}.v4-ms-cell.v4-el--fallback .v4-ms-hanja{color:#cfc6b8}.v4-vb-fill.v4-series--0{background:#5f86bf}.v4-vb-lb.v4-series--0{color:#5f86bf}.v4-vb-fill.v4-series--1{background:#5fae6e}.v4-vb-lb.v4-series--1{color:#5fae6e}.v4-vb-fill.v4-series--2{background:#d8604a}.v4-vb-lb.v4-series--2{color:#d8604a}.v4-vb-fill.v4-series--3{background:#cda14e}.v4-vb-lb.v4-series--3{color:#cda14e}.v4-vb-fill.v4-series--4{background:#c9ced6}.v4-vb-lb.v4-series--4{color:#c9ced6}
.clipboard-fallback{position:fixed;top:0;left:-9999px;opacity:0}