/* ═══════════════════════════════════════════════════════════
   Momentor PC Overrides — Clean Rewrite (2026-03-25 00:00)
   Single @media block. No conflicts.
   ═══════════════════════════════════════════════════════════ */

/* ── 모바일에서 숨길 것들 ── */
.hero-badge-label,
.hero-decoded,
.hero-benefit-line,
.seal-explainer,
.pc-faq-section,
.hero-phone-mockup { display: none; }

/* ════════════════════════════════════════════════════════
   PC — 1024px+
   ════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── 전역 ── */
  body { -webkit-font-smoothing: antialiased; }

  /* ── 네비게이션 ── */
  .home-nav {
    backdrop-filter: blur(20px) !important;
    background: rgba(8,8,8,0.7) !important;
    border-bottom: 1px solid rgba(201,168,76,0.08) !important;
    padding: 0 48px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
  }

  /* ════ 1. HERO ════ */
  /* ── HERO: flex 2컬럼 ── */
  .hero-section {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 96px 80px 72px !important;
    min-height: auto !important;
    height: auto !important;
    gap: 48px !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* 왼쪽 텍스트 컬럼 */
  .hero-text-col {
    flex: 0 0 52% !important;
    max-width: 52% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    z-index: 2 !important;
    position: relative !important;
  }

  /* eyebrow 배지 */
  .hero-badge-label {
    display: inline-block !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(201,168,76,0.7) !important;
    border: 1px solid rgba(201,168,76,0.22) !important;
    border-radius: 20px !important;
    padding: 5px 14px !important;
    margin-bottom: 20px !important;
    grid-column: unset !important;
    grid-row: unset !important;
  }

  /* 헤드라인 */
  .hero-headline {
    font-size: clamp(2rem, 2.8vw, 3.2rem) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    margin-bottom: 20px !important;
    max-width: 100% !important;
    grid-column: unset !important;
    grid-row: unset !important;
  }

  /* 서브텍스트 */
  .hero-sub {
    font-size: 1rem !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,0.6) !important;
    white-space: normal !important;
    margin-bottom: 28px !important;
    max-width: 480px !important;
    grid-column: unset !important;
    grid-row: unset !important;
  }

  /* 삭제된 요소들 숨김 */
  .hero-tagline-sub,
  .hero-benefit-line,
  .hero-decoded { display: none !important; }

  /* CTA */
  .hero-cta-inline {
    margin-top: 0 !important;
    grid-column: unset !important;
    grid-row: unset !important;
  }
  .hero-cta-wrap { display: none !important; }

  .hero-cta-btn,
  .hero-cta-inline > button {
    background: #C4A34B !important;
    color: #080808 !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    border: none !important;
    padding: 16px 40px !important;
    font-size: 0.82rem !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 28px rgba(196,163,75,0.3) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  /* 저장된 프로필 숨김 */
  #home-saved-profile { display: none !important; }

  /* 히어로 비주얼 — 오른쪽 flex 아이템 */
  .hero-logo-wrap { display: none !important; }

  .hero-visual {
    flex: 0 0 44% !important;
    max-width: 44% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    min-height: 360px !important;
    z-index: 1 !important;
    grid-column: unset !important;
    grid-row: unset !important;
  }

  /* SVG 차트 — 배경 */
  .hero-visual-svg {
    position: absolute !important;
    width: 520px !important;
    height: 520px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0.2 !important;
    pointer-events: none !important;
  }

  /* 폰 목업 */
  .hero-phone-mockup {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .hero-phone-frame {
    width: 300px !important;
    border-radius: 44px !important;
    border: 2px solid rgba(201,168,76,0.8) !important;
    box-shadow:
      0 0 0 10px rgba(8,8,8,1),
      0 0 0 11px rgba(201,168,76,0.22),
      0 60px 140px rgba(0,0,0,0.9),
      0 0 100px rgba(201,168,76,0.15) !important;
    overflow: hidden !important;
  }

  .hero-phone-notch {
    width: 90px !important;
    height: 24px !important;
    background: #080808 !important;
    border-radius: 0 0 14px 14px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  .hero-phone-screen {
    width: 100% !important;
    display: block !important;
  }

  /* 캡션 숨김 */
  .hero-visual-caption { display: none !important; }

  /* ════ 2. DIFF SECTION (reads the sky / mind / moment) ════ */
  .home-section:has(.diff-row) {
    max-width: 1040px !important;
    margin: 0 auto !important;
    padding: 96px 80px !important;
  }

  .home-divider { display: none !important; }

  .diff-row--sentence {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(201,168,76,0.07) !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  .diff-row--sentence:last-child {
    border-bottom: none !important;
  }

  .diff-label {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.45) !important;
    width: 200px !important;
    flex-shrink: 0 !important;
    font-style: normal !important;
    white-space: nowrap !important;
  }

  .diff-value {
    font-family: 'Bodoni Moda', serif !important;
    font-style: italic !important;
    font-size: 1.25rem !important;
    color: rgba(255,255,255,0.75) !important;
    line-height: 1.2 !important;
    flex: 1 !important;
    white-space: nowrap !important;
  }

  .diff-value.accent {
    color: #C9A84C !important;
    font-size: 1.25rem !important;
    white-space: nowrap !important;
  }

  .diff-closing {
    margin-top: 24px !important;
    font-size: 0.9rem !important;
    color: rgba(255,255,255,0.5) !important;
    text-align: left !important;
    line-height: 1.6 !important;
    letter-spacing: 0.02em !important;
  }

  /* ════ 3. STAT BOX (Older than astrology) ════ */
  .home-section:has(.stat-box) {
    max-width: 1040px !important;
    margin: 0 auto !important;
    padding: 64px 80px 64px !important;
  }

  .stat-box {
    display: grid !important;
    grid-template-columns: 380px 1fr !important;
    gap: 80px !important;
    align-items: start !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .stat-label {
    font-family: 'Bodoni Moda', serif !important;
    font-style: italic !important;
    font-size: clamp(1.6rem, 2vw, 2.2rem) !important;
    color: rgba(255,255,255,0.88) !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    opacity: 1 !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
  }

  .stat-body {
    font-size: 1.0rem !important;
    line-height: 1.85 !important;
    color: rgba(255,255,255,0.55) !important;
    margin-bottom: 24px !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .stat-combo {
    font-size: 0.85rem !important;
    color: rgba(255,255,255,0.32) !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    letter-spacing: 0.02em !important;
  }

  .stat-yours { color: rgba(201,168,76,0.65) !important; }

  /* ════ 4. HOW IT WORKS ════ */
  .home-section:has(.how-step) {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 96px 80px !important;
    background: rgba(255,255,255,0.012) !important;
    border-top: 1px solid rgba(201,168,76,0.06) !important;
    border-bottom: 1px solid rgba(201,168,76,0.06) !important;
  }

  /* 3컬럼 그리드로 변경 */
  .home-section:has(.how-step) > .home-section-label {
    text-align: center !important;
    margin-bottom: 56px !important;
  }

  /* how-step 들의 부모를 3열로 */
  .home-section:has(.how-step) > .how-step:first-of-type {
    margin-top: 0 !important;
  }

  /* 3열 레이아웃은 JS 없이 CSS로 */
  .home-section:has(.how-step) {
    display: block !important;
  }

  .how-step {
    display: flex !important;
    gap: 20px !important;
    border-left: 2px solid rgba(201,168,76,0.2) !important;
    padding: 0 0 0 28px !important;
    margin-bottom: 40px !important;
    align-items: flex-start !important;
  }

  .how-step:last-child { margin-bottom: 0 !important; }

  .how-num {
    font-family: 'Bodoni Moda', serif !important;
    font-size: 5rem !important;
    color: rgba(201,168,76,0.18) !important;
    line-height: 0.85 !important;
    font-style: italic !important;
    flex-shrink: 0 !important;
    width: 80px !important;
    letter-spacing: -0.02em !important;
  }

  .how-title {
    font-size: 1.05rem !important;
    color: rgba(255,255,255,0.88) !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
  }

  .how-desc {
    font-size: 0.92rem !important;
    color: rgba(255,255,255,0.5) !important;
    line-height: 1.7 !important;
  }

  /* ════ 5. TEASER CARD ════ */
  .home-section:has(.teaser-card) {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 96px 80px !important;
  }

  .teaser-card {
    padding: 52px 60px !important;
    border: 1px solid rgba(201,168,76,0.14) !important;
    border-radius: 20px !important;
    background: rgba(201,168,76,0.02) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .teaser-card::before {
    content: '' !important;
    position: absolute !important;
    top: -80px !important;
    right: -80px !important;
    width: 240px !important;
    height: 240px !important;
    background: radial-gradient(circle, rgba(201,168,76,0.07) 0%, transparent 70%) !important;
    pointer-events: none !important;
  }

  .teaser-chapter {
    font-size: 0.62rem !important;
    letter-spacing: 0.2em !important;
    color: rgba(201,168,76,0.6) !important;
    margin-bottom: 14px !important;
    display: block !important;
  }

  .teaser-title {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
    margin-bottom: 24px !important;
    color: rgba(255,255,255,0.92) !important;
    font-style: italic !important;
  }

  .teaser-text {
    font-size: 1.0rem !important;
    line-height: 1.85 !important;
    color: rgba(255,255,255,0.58) !important;
    max-width: 640px !important;
  }

  /* ════ 6. DISCOVER SECTION ════ */
  .home-section:has(.discover-card) {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 96px 80px !important;
  }

  .discover-card {
    border: 1px solid rgba(201,168,76,0.1) !important;
    border-radius: 14px !important;
    padding: 28px 32px !important;
    background: rgba(255,255,255,0.02) !important;
    margin-bottom: 16px !important;
    transition: all 0.22s ease !important;
    cursor: pointer !important;
  }

  .discover-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(201,168,76,0.28) !important;
    background: rgba(201,168,76,0.03) !important;
  }

  .discover-title {
    font-size: 1.0rem !important;
    color: rgba(255,255,255,0.88) !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
  }

  .discover-desc {
    font-size: 0.88rem !important;
    color: rgba(255,255,255,0.48) !important;
    line-height: 1.6 !important;
  }

  /* ════ 7. 가격 섹션 ════ */
  .product-select-section {
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 96px 80px !important;
    text-align: center !important;
    background: linear-gradient(180deg, #0d0b07 0%, #100e09 100%) !important;
    border-top: 1px solid rgba(201,168,76,0.1) !important;
    border-bottom: 1px solid rgba(201,168,76,0.1) !important;
  }

  .product-select-heading {
    font-size: 0.6rem !important;
    letter-spacing: 0.28em !important;
    color: rgba(201,168,76,0.5) !important;
    margin-bottom: 12px !important;
    display: block !important;
  }

  /* 섹션 헤드라인 */
  .product-select-section::before {
    content: 'Choose Your Reading' !important;
    display: block !important;
    font-family: 'Bodoni Moda', serif !important;
    font-style: italic !important;
    font-size: clamp(2rem, 2.8vw, 3rem) !important;
    color: rgba(255,255,255,0.88) !important;
    margin-bottom: 56px !important;
    line-height: 1.2 !important;
  }

  .product-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 20px !important;
    max-width: 820px !important;
    margin: 0 auto 20px !important;
  }

  .product-card {
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(201,168,76,0.12) !important;
    border-radius: 20px !important;
    padding: 40px 28px 32px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .product-card:hover {
    background: rgba(201,168,76,0.04) !important;
    border-color: rgba(201,168,76,0.28) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 48px rgba(0,0,0,0.5) !important;
  }

  .product-card.pc-best {
    border-color: rgba(201,168,76,0.55) !important;
    background: rgba(201,168,76,0.05) !important;
    box-shadow: 0 0 0 1px rgba(201,168,76,0.25), 0 20px 60px rgba(0,0,0,0.6) !important;
  }

  .product-card.pc-best:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 0 0 1px rgba(201,168,76,0.4), 0 24px 72px rgba(0,0,0,0.6) !important;
  }

  .product-best-badge {
    position: absolute !important;
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #C9A84C !important;
    color: #080808 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.56rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
  }

  .product-name {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.4) !important;
    margin-bottom: 16px !important;
    display: block !important;
  }

  .product-price-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 4px !important;
  }

  .product-orig {
    font-size: 0.78rem !important;
    color: rgba(255,255,255,0.22) !important;
    text-decoration: line-through !important;
    display: block !important;
  }

  .product-price {
    font-family: 'Bodoni Moda', serif !important;
    font-style: italic !important;
    font-size: 3.2rem !important;
    color: rgba(255,255,255,0.88) !important;
    line-height: 1 !important;
    display: block !important;
  }

  .product-card.pc-best .product-price {
    color: #C9A84C !important;
  }

  .product-eb-badge {
    font-size: 0.58rem !important;
    letter-spacing: 0.12em !important;
    color: rgba(201,168,76,0.85) !important;
    background: transparent !important;
    border: 1px solid rgba(201,168,76,0.35) !important;
    border-radius: 20px !important;
    padding: 2px 10px !important;
    display: inline-block !important;
    margin-top: 6px !important;
  }

  .product-btn {
    width: 100% !important;
    margin-top: 28px !important;
    padding: 13px 20px !important;
    background: transparent !important;
    border: 1px solid rgba(201,168,76,0.28) !important;
    border-radius: 40px !important;
    color: rgba(201,168,76,0.75) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.1em !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
  }

  .product-card.pc-best .product-btn {
    background: #C9A84C !important;
    border-color: transparent !important;
    color: #080808 !important;
    font-weight: 700 !important;
  }

  .product-btn:hover {
    background: rgba(201,168,76,0.1) !important;
    border-color: rgba(201,168,76,0.45) !important;
  }

  /* Seal 설명 */
  .seal-explainer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 20px !important;
    font-size: 0.76rem !important;
    color: rgba(255,255,255,0.3) !important;
    letter-spacing: 0.03em !important;
  }

  .seal-explainer-icon { color: rgba(201,168,76,0.45) !important; }

  /* ════ 8. 테스티모니얼 ════ */
  .home-reviews-section {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 96px 80px !important;
  }

  .home-reviews-grid,
  [class*="reviews-grid"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 64px !important;
    margin-top: 56px !important;
  }

  .home-review-card {
    background: none !important;
    border: none !important;
    border-top: 1px solid rgba(201,168,76,0.1) !important;
    border-radius: 0 !important;
    padding: 36px 0 !important;
    margin-bottom: 0 !important;
  }

  .star-rating {
    font-size: 10px !important;
    letter-spacing: 5px !important;
    color: rgba(201,168,76,0.55) !important;
    margin-bottom: 16px !important;
    display: block !important;
  }

  .home-review-text {
    font-family: 'Bodoni Moda', serif !important;
    font-style: italic !important;
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    color: rgba(255,255,255,0.75) !important;
    margin-bottom: 20px !important;
  }

  .review-name {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: rgba(201,168,76,0.5) !important;
    font-style: normal !important;
  }

  .review-meta {
    font-size: 0.7rem !important;
    color: rgba(255,255,255,0.28) !important;
    margin-top: 6px !important;
  }

  /* ════ 9. MID CTA ════ */
  .mid-cta-section {
    max-width: 640px !important;
    margin: 0 auto !important;
    padding: 80px 80px !important;
    text-align: center !important;
  }

  .mid-cta-text {
    font-size: 1.1rem !important;
    color: rgba(255,255,255,0.65) !important;
  }

  .mid-cta-section .btn-begin {
    background: #C4A34B !important;
    color: #080808 !important;
    font-weight: 700 !important;
    padding: 16px 44px !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 24px rgba(196,163,75,0.35) !important;
    border: none !important;
  }

  /* ════ 10. FAQ ════ */
  .pc-faq-section {
    display: block !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 96px 80px !important;
    border-top: 1px solid rgba(201,168,76,0.07) !important;
  }

  .pc-faq-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 48px !important;
    margin-top: 40px !important;
  }

  .pc-faq-item {
    padding: 28px 32px !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(201,168,76,0.1) !important;
    border-radius: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .pc-faq-q {
    font-family: 'Bodoni Moda', serif !important;
    font-style: italic !important;
    font-size: 1.05rem !important;
    color: rgba(255,255,255,0.85) !important;
    margin-bottom: 14px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }

  .pc-faq-a {
    font-size: 0.9rem !important;
    line-height: 1.75 !important;
    color: rgba(255,255,255,0.5) !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  /* ════ 11. FINAL CTA ════ */
  .final-cta-section {
    max-width: 100% !important;
    padding: 120px 80px !important;
    text-align: center !important;
    background: linear-gradient(180deg, transparent 0%, rgba(201,168,76,0.03) 100%) !important;
    border-top: 1px solid rgba(201,168,76,0.08) !important;
  }

  .final-cta-text {
    font-size: clamp(2rem, 3.5vw, 4rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    color: rgba(255,255,255,0.9) !important;
    max-width: 700px !important;
    margin: 0 auto 48px !important;
    white-space: normal !important;
  }

  .final-cta-section .btn-begin {
    background: #C4A34B !important;
    color: #080808 !important;
    font-weight: 700 !important;
    padding: 20px 56px !important;
    border-radius: 50px !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.1em !important;
    border: none !important;
    animation: finalCtaPulse 2.5s ease-in-out infinite !important;
    box-shadow: 0 4px 28px rgba(196,163,75,0.4) !important;
  }

  .final-cta-sub {
    font-size: 0.75rem !important;
    color: rgba(255,255,255,0.28) !important;
    letter-spacing: 0.08em !important;
    margin-top: 20px !important;
  }

  /* ════ 12. SECTION 공통 ════ */
  .home-section-label {
    font-size: 0.6rem !important;
    letter-spacing: 0.26em !important;
    color: rgba(201,168,76,0.5) !important;
    text-transform: uppercase !important;
    margin-bottom: 40px !important;
    display: block !important;
  }

  /* ════ 전역 인터랙션 ════ */
  .discover-card,
  .product-card,
  .home-review-card {
    transition: all 0.22s ease !important;
  }

  button:focus-visible,
  a:focus-visible {
    outline: 2px solid rgba(201,168,76,0.7) !important;
    outline-offset: 3px !important;
  }

} /* end @media 1024px */

/* ════ 애니메이션 (전역) ════ */
@keyframes finalCtaPulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(201,168,76,0.35); }
  50%       { box-shadow: 0 4px 44px rgba(201,168,76,0.6); }
}

/* ════════════════════════════════════════════════
   추가: 섹션 구분 강화 + 텍스트 대비 최종 수정
   ════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* 짝수/홀수 섹션 배경 미묘한 차등화 */
  .home-body > div:nth-child(even):not(.product-select-section) {
    background: rgba(255,255,255,0.01) !important;
  }

  /* 전체 body text 대비 강화 */
  .home-section p,
  .home-section div,
  p, li {
    -webkit-font-smoothing: antialiased !important;
  }

  /* 인용/스토리 섹션 강화 */
  .home-section blockquote,
  [class*="story"] p,
  [class*="quote"] p {
    font-size: 1.1rem !important;
    line-height: 1.85 !important;
    color: rgba(255,255,255,0.7) !important;
  }

  /* "The Sun That Can't Stop Burning" 섹션 */
  .home-section:has([class*="story"]),
  .home-section:has([class*="teaser"]) {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 96px 80px !important;
  }

  /* Free 링크 */
  .product-free-link {
    text-align: center !important;
    margin-top: 16px !important;
  }
  .product-free-link a {
    font-size: 0.78rem !important;
    color: rgba(255,255,255,0.3) !important;
    letter-spacing: 0.05em !important;
  }
  .product-free-link a:hover {
    color: rgba(201,168,76,0.6) !important;
  }

  /* Gift Reading 섹션 */
  [class*="gift"] {
    max-width: 600px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* 섹션 최대 너비 통일 */
  .home-body > div {
    box-sizing: border-box !important;
  }
}

/* ════════════════════════════════════════════════
   히어로 임팩트 극대화 — 차트 강화 + 배경 효과
   ════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* 히어로 전체 영역 — 풀 블리드 배경 */
  .hero-section {
    background:
      radial-gradient(ellipse 60% 80% at 75% 50%, rgba(201,168,76,0.07) 0%, transparent 65%),
      radial-gradient(ellipse 40% 60% at 20% 30%, rgba(201,168,76,0.04) 0%, transparent 60%),
      #080808 !important;
    min-height: 90vh !important;
    border-bottom: 1px solid rgba(201,168,76,0.1) !important;
  }

  /* SVG 차트 — 메인 비주얼로 강화 */
  .hero-visual-svg {
    opacity: 0.55 !important;
    filter: drop-shadow(0 0 40px rgba(201,168,76,0.3)) !important;
    width: 580px !important;
    height: 580px !important;
  }

  /* 폰 목업 앞으로 */
  .hero-phone-mockup { z-index: 3 !important; }

  /* 히어로 섹션 레이블 */
  .hero-visual::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at center, transparent 40%, rgba(8,8,8,0.4) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .hero-phone-mockup { z-index: 4 !important; }

  /* 헤드라인 크기 최대화 */
  .hero-headline {
    font-size: clamp(2.8rem, 4vw, 5.2rem) !important;
    letter-spacing: -0.025em !important;
    line-height: 1.04 !important;
  }

  /* CTA 영역 강화 */
  .hero-cta-inline {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
  }

  /* Free 탐색 링크 */
  .hero-cta-inline::after {
    content: 'Free to explore →' !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.78rem !important;
    color: rgba(255,255,255,0.35) !important;
    letter-spacing: 0.04em !important;
    cursor: pointer !important;
    white-space: nowrap !important;
  }
}

/* ════════════════════════════
   B안: 폰 목업 제거, SVG 차트 메인 비주얼
   ════════════════════════════ */
@media (min-width: 1024px) {
  /* 폰 목업 숨김 */
  .hero-phone-mockup { display: none !important; }

  /* SVG 차트를 중앙 메인 비주얼로 */
  .hero-visual {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }

  .hero-visual-svg {
    position: relative !important;
    width: 520px !important;
    height: 520px !important;
    opacity: 0.85 !important;
    filter:
      drop-shadow(0 0 32px rgba(201,168,76,0.5))
      drop-shadow(0 0 80px rgba(201,168,76,0.2)) !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }

  /* 차트 주변 후광 효과 */
  .hero-visual::before {
    content: '' !important;
    position: absolute !important;
    width: 500px !important;
    height: 500px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle,
      rgba(201,168,76,0.12) 0%,
      rgba(201,168,76,0.04) 45%,
      transparent 70%) !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  .hero-visual-svg { z-index: 2 !important; }
}

/* SVG 내부 밝기 강화 */
@media (min-width: 1024px) {
  .hero-visual-svg {
    filter:
      brightness(3.5)
      drop-shadow(0 0 24px rgba(201,168,76,0.6))
      drop-shadow(0 0 60px rgba(201,168,76,0.3)) !important;
    opacity: 0.9 !important;
    max-width: 100% !important;
  }
}

/* ════════════════════════════════════════════════
   PC 스크롤 + 폰트 가독성 수정
   ════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── 스크롤 활성화 ── */
  body {
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    height: auto !important;
  }
  .screen.active {
    overflow: visible !important;
    height: auto !important;
    min-height: 100vh !important;
  }
  #screen-home,
  #screen-result,
  #screen-compat-result {
    overflow: visible !important;
    height: auto !important;
  }
  html {
    overflow-y: scroll !important;
    scroll-behavior: smooth !important;
  }

  /* ── 폰트 가독성 전면 강화 ── */

  /* 본문 기본 색상 */
  body {
    color: rgba(255,255,255,0.88) !important;
  }

  /* 헤드라인 */
  .hero-headline,
  .final-cta-text,
  .stat-label,
  h1, h2, h3 {
    color: rgba(255,255,255,0.95) !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
  }

  /* 서브 텍스트 — 모두 밝게 */
  .hero-sub,
  .hero-tagline-sub,
  .hero-decoded,
  .diff-closing,
  .stat-body,
  .how-desc,
  .teaser-text,
  .discover-desc,
  .home-review-text,
  .pc-faq-a,
  .final-cta-sub,
  p {
    color: rgba(255,255,255,0.72) !important;
  }

  /* 레이블 */
  .home-section-label,
  .product-select-heading,
  .diff-label,
  .product-name,
  .review-meta,
  .seal-explainer {
    color: rgba(201,168,76,0.65) !important;
  }

  /* 메인 강조 텍스트 */
  .diff-value,
  .teaser-title,
  .how-title,
  .discover-title {
    color: rgba(255,255,255,0.92) !important;
  }

  /* Bodoni 폰트 렌더링 */
  .hero-decoded,
  .teaser-title,
  .home-review-text,
  .diff-value,
  .final-cta-text,
  [style*="Bodoni"],
  [class*="serif"] {
    text-rendering: geometricPrecision !important;
  }
}

/* ════════════════════════════════════════════════════════════
   결과 화면 PC 레이아웃 — 단일 컬럼 중앙 정렬 (2026-03-25)
   사이드바 그리드 → 상단 sticky 탭 + 900px 단일 컬럼
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── 비활성 화면 강제 숨김 (화면 전환 수정 2026-03-25) ── */
  #screen-result:not(.active),
  #screen-compat-result:not(.active) {
    display: none !important;
  }

  /* ── 퍼스널 리딩 결과 화면 ── */
  #screen-result {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding-bottom: 80px !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
    align-items: unset !important;
  }

  /* sticky header → nav(72px) 아래에서 시작, 스크롤 시 72px에 달라붙음 */
  .result-sticky-header {
    grid-column: unset !important;
    grid-row: unset !important;
    position: fixed !important;
    top: 72px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: 900px !important;
    width: 100% !important;
    margin-top: 0 !important;
    z-index: 200 !important;
    background: rgba(8,8,8,0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(201,168,76,0.1) !important;
    border-right: none !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    max-height: none !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
  }

  /* 탭 — 가로 수평 배치 (ID selector 사용 — specificity 우선) */
  .result-chapter-tabs,
  #chapter-tabs {
    flex-direction: row !important;
    gap: 0 !important;
    padding: 0 0 0 24px !important;
    justify-content: flex-start !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    margin-top: 0 !important;
    background: transparent !important;
    overflow-x: auto !important;
    height: auto !important;
  }

  .chapter-tab {
    text-align: center !important;
    border-left: none !important;
    border-left-color: transparent !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 13px 24px !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    flex: none !important;
    background: transparent !important;
    transition: color 0.2s, border-color 0.2s !important;
  }

  .chapter-tab.active {
    border-left: none !important;
    border-left-color: transparent !important;
    border-bottom: 2px solid var(--accent) !important;
    color: var(--accent) !important;
    background: transparent !important;
  }

  .chapter-tab:hover:not(.active) {
    border-left-color: transparent !important;
    background: transparent !important;
    border-bottom-color: rgba(201,168,76,0.3) !important;
  }

  /* 컨텐츠 전체 — 그리드 컬럼 해제 */
  /* [REMOVED sidebar residue #1] */

  /* 히어로 */
  .result-hero {
    max-width: 100% !important;
    margin: 40px auto 8px !important;
    padding-left: 60px !important;
    padding-right: 60px !important;
    box-sizing: border-box !important;
  }

  /* 결과 섹션 */
  .result-section {
    max-width: 100% !important;
    padding: 48px 60px !important;
    box-sizing: border-box !important;
  }

  /* 챕터 컨텐츠 래퍼 */
  .ch1-section {
    padding: 0 60px !important;
    box-sizing: border-box !important;
    margin-bottom: 36px !important;
  }

  /* 챕터 타이틀 블록 */
  .chapter-title-block {
    padding: 40px 60px 24px !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  /* cl-body (챕터 내용 컨테이너) */
  .cl-body {
    padding: 20px 0 120px !important;
    overflow-y: visible !important;
  }

  /* [REMOVED: sidebar layout residue] */
  .ch1-section-text,
  .prologue-subsection-text,
  .ch-identity, .ch-social, .ch-desc, .ch-traits {
    font-size: 1.05rem !important;
    line-height: 1.85 !important;
    color: rgba(255,255,255,0.8) !important;
    max-width: 100% !important;
  }

  /* 섹션 제목 — Bodoni italic */
  .ch1-section-title,
  .narrative-section-title,
  .prologue-subsection-title {
    font-family: 'Bodoni Moda', serif !important;
    font-style: italic !important;
    font-size: 1.6rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: rgba(255,255,255,0.92) !important;
    opacity: 1 !important;
    margin-bottom: 16px !important;
    line-height: 1.3 !important;
  }

  /* result-section-label 은 작은 레이블 유지 */
  .result-section-label {
    font-size: 0.62rem !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    font-family: 'Outfit', sans-serif !important;
    font-style: normal !important;
  }

  /* [REMOVED: sidebar layout residue] */
  #screen-compat-result {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding-bottom: 80px !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
    align-items: unset !important;
  }

  /* [REMOVED: sidebar layout residue] */

  .compat-chapter-tabs.result-chapter-tabs,
  #compat-chapter-tabs {
    flex-direction: row !important;
    gap: 0 !important;
    padding: 0 0 0 24px !important;
    justify-content: flex-start !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    margin-top: 0 !important;
    height: auto !important;
  }

  /* [REMOVED: sidebar layout residue] */

  .compat-result-header {
    padding: 40px 60px 20px !important;
    box-sizing: border-box !important;
  }

  /* ── PC 모달-auth 중앙 정렬 (gift 로그인 등) ── */
  #modal-auth.modal-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  #modal-auth .modal-sheet {
    border-radius: 20px !important;
    max-width: 420px !important;
    padding: 40px 32px 36px !important;
    margin-bottom: 0 !important;
  }

} /* end result-layout 1024px */

/* ════════════════════════════════════════════════
   결과 화면 PC 레이아웃 — .screen.active !important 오버라이드
   ════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── 퍼스널 결과 화면 ── */
  /* [REMOVED sidebar residue #2] */

  /* 좌측 사이드바 탭 */
  /* [REMOVED: sidebar layout residue] */

  /* [REMOVED: sidebar layout residue] */
  /* [REMOVED sidebar residue #3] */

  /* [REMOVED: sidebar layout residue] */

  /* [REMOVED: sidebar layout residue] */

  /* [REMOVED: sidebar layout residue] */
  /* [REMOVED sidebar residue #4] */

  /* [REMOVED: sidebar layout residue] */
  /* [REMOVED sidebar residue #5] */

  /* [REMOVED: sidebar layout residue] */
  /* [REMOVED sidebar residue #6] */
  #screen-result .ch-social,
  #screen-result .ch-desc,
  #screen-result p,
  #screen-result .prologue-subsection-text {
    font-size: 1.05rem !important;
    line-height: 1.88 !important;
    color: rgba(255,255,255,0.78) !important;
    max-width: 68ch !important;
  }

  /* [REMOVED: sidebar layout residue] */
  /* [REMOVED sidebar residue #7] */

  /* [REMOVED: sidebar layout residue] */

  /* [REMOVED: sidebar layout residue] */

  /* [REMOVED: sidebar layout residue] */

  /* [REMOVED: sidebar layout residue] */

  /* [REMOVED: sidebar layout residue] */

  /* [REMOVED: sidebar layout residue] */
  /* [REMOVED sidebar residue #8] */
  #screen-compat-result .compat-section-text {
    font-size: 1.05rem !important;
    line-height: 1.88 !important;
    color: rgba(255,255,255,0.78) !important;
  }
}

/* ════════════════════════════
   PC 모달 중앙 정렬
   ════════════════════════════ */
@media (min-width: 1024px) {
  .modal-overlay {
    align-items: center !important;
    justify-content: center !important;
  }
  .modal-sheet {
    border-radius: 20px !important;
    max-width: 440px !important;
    padding: 40px 36px 44px !important;
  }

  /* Gift 모달도 동일 */
  #gift-modal-overlay,
  [id*="gift"][id*="overlay"],
  [id*="modal"][id*="overlay"] {
    align-items: center !important;
    justify-content: center !important;
  }

  /* Gift 모달 내부 버튼 */
  [id*="gift"] .modal-sheet,
  [id*="gift"] [class*="modal-sheet"] {
    border-radius: 20px !important;
  }
}

/* ════════════════════════════════════
   PC: anim-reveal 강제 표시 + 그리드 콘텐츠 보정
   ════════════════════════════════════ */
@media (min-width: 1024px) {
  /* 애니메이션 즉시 표시 */
  #screen-result .anim-reveal,
  #screen-compat-result .anim-reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: none !important;
  }

  /* result-hero 인라인 스타일 오버라이드 */
  /* [REMOVED sidebar residue #9] */

  /* [REMOVED: sidebar layout residue] */
  /* [REMOVED sidebar residue #10] */
  /* [REMOVED: sidebar layout residue] */

  /* [REMOVED: sidebar layout residue] */
  /* [REMOVED sidebar residue #11] */
  #screen-result .result-section,
  #screen-result .result-cta-section,
  #screen-result .hero-keywords-row,
  #screen-result .result-footer {
    grid-column: 2 !important;
  }
}

/* ════════════════════════════════════════════════
   수정 3: 페이월 CTA 골드 강제 (2026-03-25 런칭)
   ════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .sticky-paywall-btn,
  [class*="paywall"] button,
  [class*="paywall"] .btn,
  [id*="paywall"] button {
    background: linear-gradient(135deg, #C4A34B 0%, #D4B86A 100%) !important;
    color: #0D0B08 !important;
    border: none !important;
    font-weight: 600 !important;
  }
}

/* ════════════════════════════════════════════════
   수정 5: 4 Pillar 카드 PC 4열 + 섹션 구분선 골드
   ════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* 4 Pillar 카드 */
  .your-chart-pillars,
  .pillar-grid,
  [class*="pillar"][class*="grid"],
  [class*="pillar"][class*="wrap"] {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    max-width: 720px !important;
    margin: 0 auto !important;
  }
  .day-card, [class*="pillar-card"] {
    min-width: 0 !important;
    padding: 20px 14px !important;
  }

  /* 섹션 구분선 골드 그라디언트 */
  .home-divider,
  .section-divider {
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(196,163,75,0.25) 20%,
      rgba(196,163,75,0.45) 50%,
      rgba(196,163,75,0.25) 80%,
      transparent 100%
    ) !important;
    height: 1px !important;
    border: none !important;
    max-width: 900px !important;
    margin: 0 auto !important;
  }
}

/* ════════════════════════════════════════════════
   수정 1: Paywall 모달 PC 중앙 정렬 (2026-03-25)
   spacer flex:1이 카드를 bottom-sheet로 밀어내는 문제 수정
   ════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  #seal-paywall-overlay,
  [id*="paywall-overlay"] {
    justify-content: center !important;
    align-items: center !important;
  }
  /* spacer div 숨김 */
  #seal-paywall-overlay > [style*="flex:1"],
  #seal-paywall-overlay > [style*="flex: 1"],
  [id*="paywall-overlay"] > [style*="flex:1"],
  [id*="paywall-overlay"] > [style*="flex: 1"] {
    display: none !important;
    flex: 0 !important;
  }
  /* 카드 border-radius 전체 적용 (bottom-sheet → centered modal) */
  #seal-paywall-overlay > div:last-child,
  [id*="paywall-overlay"] > div:last-child {
    border-radius: 20px !important;
    max-width: 480px !important;
    width: 92% !important;
  }
}

/* ════════════════════════════════════════════════
   수정 2: Gift 모달 PC 중앙 정렬 (2026-03-25)
   ════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  #gift-modal-overlay,
  [id*="gift-modal-overlay"] {
    justify-content: center !important;
    align-items: center !important;
  }
  #gift-modal-overlay > [style*="flex:1"],
  #gift-modal-overlay > [style*="flex: 1"],
  [id*="gift-modal-overlay"] > [style*="flex:1"] {
    display: none !important;
    flex: 0 !important;
  }
  #gift-modal-overlay > div:last-child,
  [id*="gift-modal-overlay"] > div:last-child {
    border-radius: 20px !important;
    max-width: 480px !important;
    width: 92% !important;
  }
}

/* ════════════════════════════════════════════════
   수정 4: compat-share-modal PC 중앙 정렬 보장 (2026-03-25)
   JS에서 이미 처리하지만 CSS로 이중 보장
   ════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  #compat-share-modal-overlay {
    align-items: center !important;
    justify-content: center !important;
  }
  #compat-share-modal-overlay > div {
    border-radius: 16px !important;
    max-width: 460px !important;
  }
}

/* ════════════════════════════════════════════════
   타이포그래피 & 가독성 최종 수정 (2026-03-25)
   8px 그리드 spacing + 65ch max-width + letter-spacing
   ════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* 본문 텍스트 max-width + 가독성 */
  .home-sub,
  .hero-tagline-sub,
  .mid-cta-text,
  .home-section-text,
  .discover-desc,
  .how-desc {
    max-width: 65ch !important;
    line-height: 1.8 !important;
    letter-spacing: -0.012em !important;
  }

  /* 섹션 레이블 — label은 넓게 */
  .home-section-label {
    letter-spacing: 0.14em !important;
    margin-bottom: 32px !important;
  }

  /* 섹션 heading 하단 여백 */
  .section-heading {
    margin-bottom: 32px !important;
    letter-spacing: -0.018em !important;
    line-height: 1.2 !important;
  }

  /* Discover 카드 내부 여백 */
  .discover-card {
    padding: 32px 28px !important;
  }

  /* 리뷰 카드 내부 여백 */
  .review-card {
    padding: 32px 28px !important;
  }

  /* accordion 여백 */
  .accordion-item {
    padding: 24px 0 !important;
  }

  /* 챕터 본문 텍스트 가독성 */
  .ch-identity, .ch-social, .ch-desc, .ch-traits {
    letter-spacing: -0.01em !important;
    max-width: 65ch !important;
  }

  /* result-section-label */
  .result-section-label {
    letter-spacing: 0.14em !important;
    margin-bottom: 16px !important;
  }
}

/* ════════════════════════════════════════════════
   Widescreen 1440px+ — 더 넓은 여백
   ════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .hero-section {
    padding: 96px 120px 96px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
  }

  .home-section:has(.diff-row),
  .home-section:has(.stat-box),
  .home-section:has(.how-step),
  .home-section:has(.teaser-card),
  .home-section:has(.discover-card),
  .home-section:has([class*="story"]),
  .home-section:has([class*="teaser"]) {
    padding-left: 120px !important;
    padding-right: 120px !important;
    max-width: 1400px !important;
  }

  .home-section:has(.stat-box) {
    padding-left: 120px !important;
    padding-right: 120px !important;
  }

  .mid-cta-section {
    padding-left: 120px !important;
    padding-right: 120px !important;
  }

  .home-reviews-section {
    padding-left: 120px !important;
    padding-right: 120px !important;
    max-width: 1400px !important;
  }

  .pc-faq-section {
    padding-left: 120px !important;
    padding-right: 120px !important;
    max-width: 1400px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   TITAN PC LAYOUT — Full Spec Overhaul (2026-03-25 Cael)
   All rules inside @media (min-width: 1024px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ══════════════════════════════════
     §1. GLOBAL MAX-WIDTH & PADDING
     ══════════════════════════════════ */

  .home-section,
  .mid-cta-section,
  .pc-faq-section {
    max-width: 1200px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Body text blocks — readable measure */
  .home-section-text,
  .section-desc,
  .hero-subheadline,
  .mid-cta-text {
    max-width: 680px !important;
  }

  /* Review grid wrapper */
  .review-cards-grid {
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Pricing card container */
  .product-grid,
  .product-select-section .product-grid {
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Discover / chapters wrapper */
  .home-section:has(.discover-card) .discover-grid,
  .home-section:has(.discover-card) > div:not(.home-section-label) {
    max-width: 1040px !important;
  }

  /* Footer top margin */
  .pc-site-footer {
    margin-top: 96px !important;
  }


  /* ══════════════════════════════════
     §2. VERTICAL RHYTHM (SECTION GAPS)
     ══════════════════════════════════ */

  /* Hero → next section gap */
  .hero-section {
    padding-bottom: 120px !important;
  }

  /* General sections */
  .home-section {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }

  /* Small auxiliary sections */
  .mid-cta-section {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  /* Section title → body gap (applied via margin-bottom on labels/h2s) */
  .home-section-label,
  .home-headline,
  .section-title {
    margin-bottom: 20px !important;
  }

  /* Card group top/bottom margin */
  .review-cards-grid,
  .product-grid,
  .discover-grid,
  .home-section:has(.how-step) .how-step:first-of-type {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }

  /* FAQ item gap — handled in §12 */

  /* Pricing → CTA section gap */
  .product-select-section {
    margin-bottom: 88px !important;
  }


  /* ══════════════════════════════════
     §3. TYPOGRAPHY SCALE
     ══════════════════════════════════ */

  /* Hero eyebrow */
  .hero-eyebrow,
  .home-section-label,
  .hero-label {
    font-size: 13px !important;
    line-height: 18px !important;
    letter-spacing: 0.12em !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
  }

  /* Hero headline */
  .hero-headline,
  .hero-title {
    font-size: 56px !important;
    line-height: 64px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    max-width: 760px !important;
  }

  /* Hero subheadline */
  .hero-subheadline,
  .hero-sub,
  .home-sub {
    font-size: 20px !important;
    line-height: 32px !important;
    font-weight: 400 !important;
    max-width: 640px !important;
  }

  /* Section H2 */
  .home-headline,
  .section-title,
  .mid-cta-section h2 {
    font-size: 36px !important;
    line-height: 44px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
  }

  /* Section supporting text */
  .home-section-text,
  .section-desc,
  .mid-cta-text {
    font-size: 18px !important;
    line-height: 30px !important;
    font-weight: 400 !important;
    max-width: 680px !important;
  }

  /* Card title (general) */
  .how-title,
  .discover-title,
  .teaser-title {
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 600 !important;
  }

  /* Card body */
  .how-desc,
  .discover-desc,
  .teaser-desc {
    font-size: 16px !important;
    line-height: 26px !important;
    font-weight: 400 !important;
  }

  /* Small labels */
  .how-num,
  .step-num,
  .product-badge,
  .product-best-badge {
    font-size: 12px !important;
    line-height: 16px !important;
    letter-spacing: 0.08em !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
  }

  /* Review body */
  .review-quote,
  .home-review-card p,
  .home-review-text {
    font-size: 18px !important;
    line-height: 30px !important;
    font-weight: 400 !important;
    max-width: 520px !important;
  }

  /* FAQ question */
  .pc-faq-q,
  .accordion-header {
    font-size: 20px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
  }

  /* FAQ answer */
  .pc-faq-a,
  .accordion-body {
    font-size: 16px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
    max-width: 760px !important;
  }

  /* Button text */
  .btn-begin,
  .btn-calculate,
  .btn-paywall-cta {
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
  }


  /* ══════════════════════════════════
     §4. HERO LAYOUT
     ══════════════════════════════════ */

  .hero-section {
    min-height: 720px !important;
    padding-top: 96px !important;
    align-items: flex-start !important;
  }

  /* Hero text block max-width */
  .hero-headline,
  .hero-title {
    max-width: 760px !important;
  }

  /* Two-col layout: 56% text / 44% visual */
  .hero-section {
    grid-template-columns: 56% 44% !important;
    gap: 48px !important;
  }

  /* Hide duplicate CTA buttons — keep only .hero-cta-inline */
  .hero-cta-wrap {
    display: none !important;
  }

  /* Stat strip — below hero with 32px gap */
  .hero-stat-strip,
  .hero-strip {
    margin-top: 32px !important;
  }


  /* ══════════════════════════════════
     §5. NAVIGATION
     ══════════════════════════════════ */

  #pc-top-header {
    height: 72px !important;
  }

  .pc-header-inner {
    padding: 0 32px !important;
    gap: 40px !important;
  }

  .pc-nav-links,
  .home-nav-links {
    gap: 24px !important;
  }

  .pc-nav-guest,
  .pc-nav-guest-actions {
    gap: 16px !important;
  }

  .pc-nav-link {
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
  }

  .brand-wordmark {
    letter-spacing: 0.18em !important;
  }


  /* ══════════════════════════════════
     §6. COMPARISON SECTION
     ══════════════════════════════════ */

  .home-section:has(.diff-row) {
    max-width: 1040px !important;
  }

  .diff-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }

  /* Each column inside diff-row */
  .diff-row > * {
    min-height: 140px !important;
    padding: 24px 24px 20px 24px !important;
  }

  /* Conclusion text below diff cards */
  .diff-closing,
  .home-section:has(.diff-row) > p,
  .home-section:has(.diff-row) > div:last-child {
    margin-top: 28px !important;
    max-width: 760px !important;
  }


  /* ══════════════════════════════════
     §7. HOW IT WORKS
     ══════════════════════════════════ */

  .home-section:has(.how-step) {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }

  /* Label spans full width */
  .home-section:has(.how-step) > .home-section-label {
    grid-column: 1 / -1 !important;
  }

  .how-step {
    min-height: 220px !important;
    padding: 28px !important;
    border-left: none !important;
    margin-bottom: 0 !important;
  }

  .how-num {
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
    /* Override Bodoni italic from existing rules */
    font-family: 'Outfit', sans-serif !important;
    font-style: normal !important;
    width: auto !important;
  }

  .how-title {
    font-size: 22px !important;
    line-height: 30px !important;
    font-weight: 600 !important;
  }

  .how-desc {
    font-size: 16px !important;
    line-height: 26px !important;
    max-width: 280px !important;
  }


  /* ══════════════════════════════════
     §8. SAMPLE READING SECTION
     ══════════════════════════════════ */

  .home-section:has(.teaser-card),
  .home-section:has(.teaser-title) {
    max-width: 760px !important;
  }

  .teaser-card {
    max-width: 760px !important;
  }

  .teaser-text {
    max-width: 620px !important;
  }

  /* Quote typography */
  .teaser-title {
    font-size: 22px !important;
    line-height: 36px !important;
    font-weight: 400 !important;
  }

  /* Hide sign-in nudge on PC */
  #home-signin-hint {
    display: none !important;
  }


  /* ══════════════════════════════════
     §9. REVIEWS SECTION
     ══════════════════════════════════ */

  .review-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-top: 32px !important;
  }

  /* Show only first 3 review cards */
  .home-review-card:nth-child(n+4) {
    display: none !important;
  }

  .home-review-card {
    min-height: 260px !important;
    padding: 28px !important;
  }

  /* Stars → body gap */
  .home-review-card .star-rating {
    margin-bottom: 16px !important;
  }

  /* Body → author gap */
  .home-review-card .review-meta {
    margin-top: 20px !important;
  }

  /* Author label */
  .review-name {
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
  }


  /* ══════════════════════════════════
     §10. PRICING SECTION
     ══════════════════════════════════ */

  .product-grid {
    max-width: 1040px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-top: 32px !important;
  }

  .product-card {
    min-height: 280px !important;
    padding: 28px !important;
  }

  /* Tier name → price gap */
  .product-name {
    margin-bottom: 20px !important;
  }

  /* Price */
  .product-price {
    font-size: 40px !important;
    line-height: 44px !important;
    font-weight: 600 !important;
  }

  /* Old / original price */
  .product-orig {
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
  }

  /* CTA Button height */
  .product-btn {
    height: 48px !important;
  }

  /* Cards → "Or explore for free" gap */
  .product-free-link {
    margin-top: 20px !important;
  }

  /* Badge */
  .product-best-badge {
    height: 24px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }


  /* ══════════════════════════════════
     §11. WHAT YOU'LL DISCOVER / CHAPTERS
     ══════════════════════════════════ */

  .home-section:has(.discover-card) {
    display: block !important; /* reset any grid set above */
  }

  /* Discover cards wrapper — 4-col grid */
  .home-section:has(.discover-card) .discover-grid,
  .home-section:has(.discover-card) > div.discover-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }

  /* If discover-cards are direct children of the section */
  .home-section:has(.discover-card) {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }

  /* Label spans full width */
  .home-section:has(.discover-card) > .home-section-label {
    grid-column: 1 / -1 !important;
  }

  .discover-card {
    min-height: 220px !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .discover-title {
    font-size: 22px !important;
    line-height: 30px !important;
  }

  .discover-desc {
    font-size: 15px !important;
    line-height: 24px !important;
  }


  /* ══════════════════════════════════
     §12. FAQ
     ══════════════════════════════════ */

  .pc-faq-section {
    max-width: 760px !important;
  }

  .pc-faq-item {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
  }

  .pc-faq-item:last-child {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  /* Q → A gap */
  .pc-faq-q {
    margin-bottom: 12px !important;
  }


  /* ══════════════════════════════════
     §13. BUTTON RULES
     ══════════════════════════════════ */

  .btn-begin,
  .btn-calculate,
  .btn-paywall-cta {
    height: 52px !important;
    padding: 0 20px !important;
    border-radius: 9999px !important;
  }

  /* Secondary text link spacing from primary CTA */
  .hero-cta-inline > *:not(:first-child),
  .mid-cta-section > *:not(:first-child) {
    margin-top: 16px !important;
  }


  /* ══════════════════════════════════
     §14. BODY TEXT RULES
     ══════════════════════════════════ */

  /* Long text blocks — 680px max */
  .home-section p,
  .mid-cta-text,
  .home-section-text {
    max-width: 680px !important;
  }

  /* Left-align body text (except hero which stays centered/left by grid) */
  .home-section,
  .home-section p,
  .home-section div,
  .mid-cta-section,
  .pc-faq-section {
    text-align: left !important;
  }

  /* Multi-paragraph spacing */
  .home-section p + p,
  .teaser-text + .teaser-text,
  .pc-faq-a + .pc-faq-a {
    margin-top: 16px !important;
  }

  /* Gift 섹션 — 텍스트↔버튼 간격 */
  .gift-reading-section .gift-sub {
    margin-bottom: 40px !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
  }

} /* end TITAN PC LAYOUT */

/* ══════════════════════════════════════════════
   PC — My Readings / Compatibility / Setup 화면 폭 제한 + 중앙 정렬
   ══════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* My Readings / Compat / Setup 내부 콘텐츠 중앙 정렬
     — 화면 컨테이너 자체는 width:100% 유지
     — 내부 헤더·바디만 max-width + margin auto로 중앙 배치 */
  .profiles-grid,
  .cl-body,
  .csp-body {
    max-width: 820px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
  }

  #screen-profiles .profiles-header,
  #screen-compat-list .profiles-header,
  #screen-compat-setup .csp-header {
    max-width: 820px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
  }

  /* 버튼 전폭 유지 */
  .cl-new-btn,
  .btn-new-profile {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 결과 풀이 내용 여백 */
  .result-section,
  .ch1-section,
  .ch2-section,
  .ch3-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* ════════════════════════════════════════
   PC: 결과 화면 탭 통일 + 간격 2배 + 일러스트 픽스
   ════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* 1. reading-progress-bar PC에서 숨기기 (궁합 탭과 높이 통일) */
  #reading-progress-bar {
    display: none !important;
  }

  /* 2. 탭과 첫 콘텐츠 간격 2배 (JS calc에 +48px) — 이 값은 JS에서도 조정 */
  /* JS에서 24→48 이미 적용됨; 이 CSS는 안전망 */

  /* 3. PC 히어로 일러스트: 고정 390×280px 중앙 배치 (잘림 방지) */
  #hero-ilju-bg {
    width: 390px !important;
    height: 280px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    overflow: hidden !important;
  }

  /* 4. result-hero 최소 높이 확보 (일러스트 완전 노출) */
  #screen-result .result-hero {
    min-height: 310px !important;
  }
}

/* ════════════════════════════════════
   PC: 탭 규격 통일 + 일러스트 크기 조정
   ════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ① reading-progress-bar 숨기기 (궁합과 동일 구조로) */
  #reading-progress-bar {
    display: none !important;
  }

  /* ② 퍼스널/궁합 chapter-tab 동일 규격 강제 */
  .result-sticky-header .chapter-tab,
  #compat-sticky-header .chapter-tab {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
    font-weight: 400 !important;
    padding: 10px 20px !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.45) !important;
    border-bottom: 2px solid transparent !important;
    transition: color 0.2s, border-color 0.2s !important;
    white-space: nowrap !important;
  }
  .result-sticky-header .chapter-tab.active,
  #compat-sticky-header .chapter-tab.active {
    color: rgba(201,168,76,0.9) !important;
    border-bottom-color: rgba(201,168,76,0.7) !important;
  }

  /* ③ 히어로 카드 일러스트 PC 크기 조정 (잘림 방지) */
  #hero-ilju-bg svg {
    transform: scale(0.78) !important;
    transform-origin: center center !important;
  }

  /* ④ result-hero PC 최소 높이 확보 */
  .result-hero {
    min-height: 300px !important;
  }
}

/* ════════════════════════════════════════════════
   [FIX-BATCH] 3가지 수정 동시 적용
   ════════════════════════════════════════════════ */

/* ① PC 비교 섹션 (diff-row) 양쪽 내용 완전 노출 */
@media (min-width: 1024px) {
  .home-section:has(.diff-row) {
    max-width: 1200px !important;
    overflow: visible !important;
  }
  .diff-row {
    overflow: visible !important;
  }
  .diff-label {
    width: auto !important;
    min-width: 160px !important;
    max-width: none !important;
    white-space: nowrap !important;
    font-size: 0.72rem !important;
  }
  .diff-value {
    overflow: visible !important;
    white-space: normal !important;
  }
}

/* ② 모바일 Reading 헤더 높이 = My Readings 헤더 (87px) */
@media (max-width: 1023px) {
  .result-top-bar.profiles-header {
    min-height: 87px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    align-items: center !important;
  }
  /* 내부 버튼/h2 세로 중앙 정렬 */
  .result-top-bar.profiles-header .ph-back,
  .result-top-bar.profiles-header h2,
  .result-top-bar.profiles-header .ph-right {
    align-self: center !important;
  }
}