/* 사주별점 — 통합 스타일시트 */

  :root {
    /* 컬러 */
    --ink: #0e0810;
    --paper: #f5efe6;
    --deep: #2c1810;
    --gold: #c9973a;
    --gold-light: #e8c87a;
    --rose: #c4616e;
    --rose-light: #e8a0a8;
    --mist: #a99aaf;
    --mist-light: #c8bcd0;
    --jade: #4a7c6a;
    --jade-light: #7ec4ac;
    --cream: #faf5ee;
    --bg: #0e0810;
    --sand: #c89b7b;
    --border: rgba(201,151,58,0.12);
    --serif: 'Noto Serif KR', 'Noto Sans KR', serif;
    --sans: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

    /* 타이포 토큰 (모바일 퍼스트) */
    --text-xs: 12px;
    --text-sm: 13px;
    --text-md: 15px;
    --text-lg: 17px;
    --text-xl: 20px;

    /* 스페이싱 토큰 */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 12px;
    --sp-lg: 16px;
    --sp-xl: 24px;
    --sp-2xl: 32px;

    /* 배경/보더 토큰 */
    --bg-card: rgba(255,255,255,0.025);
    --bg-subtle: rgba(255,255,255,0.02);
    --bg-gold: rgba(201,151,58,0.04);
    --bg-rose: rgba(196,97,110,0.04);
    --bg-jade: rgba(74,124,106,0.04);
    --border-gold: rgba(201,151,58,0.15);
    --border-gold-hover: rgba(201,151,58,0.4);
    --btn-height: 48px;
  }

  /* PC에서 폰트 살짝 축소 */
  @media (min-width: 768px) {
    :root {
      --text-xs: 11px;
      --text-sm: 12px;
      --text-md: 14px;
      --text-lg: 16px;
      --btn-height: 44px;
    }
  }

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

  body {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-weight: 300;
    font-size: var(--text-md);
    line-height: 1.75;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-break: keep-all;
  }

  /* Background: animated star field */
  .cosmos {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }

  .cosmos::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 20% 10%, rgba(90,40,70,0.5) 0%, transparent 60%),
      radial-gradient(ellipse 60% 80% at 80% 90%, rgba(30,50,80,0.6) 0%, transparent 60%),
      radial-gradient(ellipse 40% 40% at 60% 30%, rgba(180,140,60,0.08) 0%, transparent 50%),
      linear-gradient(170deg, #0e0810 0%, #15101a 40%, #0a1020 100%);
    animation: cosmosShift 20s ease-in-out infinite alternate;
  }

  @keyframes cosmosShift {
    0% { opacity: 1; }
    50% { opacity: 0.85; }
    100% { opacity: 1; }
  }

  .stars {
    position: absolute;
    inset: 0;
  }

  .star {
    position: absolute;
    border-radius: 50%;
    background: white;
    animation: twinkle var(--dur, 3s) ease-in-out infinite var(--delay, 0s) alternate;
  }

  @keyframes twinkle {
    0% { opacity: var(--min-op, 0.1); transform: scale(0.8); }
    100% { opacity: var(--max-op, 0.9); transform: scale(1.2); }
  }

  /* Ziwei constellation pattern */
  .constellation {
    position: absolute;
    top: 5%;
    right: 5%;
    width: 200px;
    height: 200px;
    opacity: 0.15;
    animation: constellationFloat 8s ease-in-out infinite alternate;
  }

  @keyframes constellationFloat {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.1; }
    100% { transform: translateY(-15px) rotate(3deg); opacity: 0.2; }
  }

  /* Main layout */
  .page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px 80px;
  }

  /* Header */
  .header {
    text-align: center;
    margin-bottom: 60px;
    animation: fadeDown 1.2s ease both;
  }

  @keyframes fadeDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* 로그인 바 */
  .auth-bar {
    display: flex;
    justify-content: flex-end;
    padding: 8px 0;
    margin-bottom: 4px;
  }
  .auth-login-btn {
    background: #FEE500;
    color: #191919;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 12px;
    font-family: var(--sans);
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.3s;
  }
  .auth-login-btn:hover { opacity: 0.85; }
  .auth-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--mist-light);
  }
  .auth-logout-btn {
    background: none;
    border: 1px solid rgba(169,154,175,0.3);
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 11px;
    color: var(--mist);
    cursor: pointer;
    font-family: var(--sans);
  }
  .auth-logout-btn:hover { border-color: rgba(169,154,175,0.5); }

  .header-eyebrow {
    font-family: var(--serif);
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 16px;
    opacity: 0.9;
  }

  .header-chinese {
    font-family: 'Noto Serif KR', serif;
    font-size: clamp(52px, 12vw, 88px);
    font-weight: 700;
    color: transparent;
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 40%, #a06820 100%);
    -webkit-background-clip: text;
    background-clip: text;
    line-height: 1;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    text-shadow: none;
    filter: drop-shadow(0 0 30px rgba(201, 151, 58, 0.3));
    animation: goldShimmer 4s ease-in-out infinite alternate;
  }

  @keyframes goldShimmer {
    0% { filter: drop-shadow(0 0 20px rgba(201,151,58,0.2)); }
    100% { filter: drop-shadow(0 0 40px rgba(201,151,58,0.5)); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* 포커스 스타일 (#45) */
  :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  button:focus-visible, .pill:focus-visible, .nav-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(201,151,58,0.15);
  }

  .header-title {
    font-family: 'Noto Serif KR', serif;
    font-size: clamp(14px, 3vw, 18px);
    font-weight: 300;
    color: var(--mist-light);
    letter-spacing: 0.35em;
    margin-bottom: 24px;
  }

  .header-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    margin-bottom: 20px;
  }

  .divider-line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
  }

  .divider-icon {
    color: var(--gold);
    font-size: 14px;
    opacity: 0.8;
  }

  .header-desc {
    font-size: 13px;
    color: var(--mist);
    letter-spacing: 0.05em;
    line-height: 1.9;
    max-width: 360px;
    margin: 0 auto;
  }

  /* Tab switcher */
  /* 분석 선택 카드 */
  .analysis-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 40px;
    animation: fadeUp 1s ease 0.3s both;
  }

  .analysis-card {
    padding: 20px 16px 18px;
    border: 1px solid rgba(201,151,58,0.15);
    border-radius: 2px;
    background: rgba(255,255,255,0.02);
    cursor: pointer;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
  }

  /* 반짝이 오버레이 */
  .analysis-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(201,151,58,0.18) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  /* 상단 금빛 선 */
  .analysis-card::after {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform: scaleX(0);
    transition: transform 0.4s ease;
  }

  .analysis-card:hover::before { opacity: 1; }
  .analysis-card:hover::after  { transform: scaleX(1); }
  .analysis-card:hover {
    border-color: rgba(201,151,58,0.45);
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(201,151,58,0.1);
  }

  .analysis-card.selected {
    border-color: var(--gold);
    background: rgba(201,151,58,0.07);
    box-shadow: 0 0 24px rgba(201,151,58,0.12), inset 0 0 12px rgba(201,151,58,0.04);
  }
  .analysis-card.selected::before { opacity: 1; }
  .analysis-card.selected::after  { transform: scaleX(1); }

  .ac-icon {
    font-size: 22px;
    margin-bottom: 10px;
    display: block;
    filter: drop-shadow(0 0 6px rgba(201,151,58,0.3));
    transition: filter 0.35s ease;
  }
  .analysis-card:hover .ac-icon,
  .analysis-card.selected .ac-icon {
    filter: drop-shadow(0 0 10px rgba(201,151,58,0.6));
  }

  .ac-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold-light);
    letter-spacing: 0.15em;
    margin-bottom: 2px;
  }

  .ac-hanja {
    font-family: 'Noto Serif KR', serif;
    font-size: 11px;
    color: var(--gold);
    opacity: 0.6;
    letter-spacing: 0.2em;
    margin-bottom: 8px;
  }

  .ac-desc {
    font-size: 11px;
    color: var(--mist);
    line-height: 1.75;
    letter-spacing: 0.03em;
    opacity: 0.8;
  }

  /* 선택 표시 */
  .ac-check {
    position: absolute;
    top: 10px; right: 10px;
    width: 16px; height: 16px;
    border: 1px solid rgba(201,151,58,0.3);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .analysis-card.selected .ac-check {
    opacity: 1;
    background: rgba(201,151,58,0.15);
    border-color: var(--gold);
  }
  .ac-check::after {
    content: '✦';
    font-size: 7px;
    color: var(--gold);
  }

  /* 별 파티클 애니메이션 (hover 시) */
  @keyframes sparkle {
    0%   { opacity: 0; transform: scale(0) rotate(0deg); }
    35%  { opacity: 0.45; transform: scale(1) rotate(140deg); }
    100% { opacity: 0; transform: scale(0.2) rotate(300deg) translateY(-8px); }
  }

  .spark {
    position: absolute;
    pointer-events: none;
    font-size: 6px;
    color: #f9f9f9;
    animation: sparkle 1.4s ease forwards;
    text-shadow: 0 0 3px #f9f9f9, 0 0 7px rgba(201,151,58,0.35);
  }

  @media (max-width: 480px) {
    .analysis-cards { grid-template-columns: 1fr; gap: 8px; }
    /* 모바일: 카드 내부를 3열 grid로 통일 (아이콘 | 제목+한자 | 설명) */
    .analysis-card {
      padding: 14px 16px;
      display: grid;
      grid-template-columns: 32px 72px 1fr;
      grid-template-rows: auto auto;
      align-items: center;
      column-gap: 8px;
      text-align: left;
    }
    .ac-check { display: none; } /* 모바일: 테두리 색상으로 선택 표시 충분 */
    .ac-icon { grid-column: 1; grid-row: 1 / 3; margin-bottom: 0; font-size: 20px; justify-self: center; }
    .ac-title { grid-column: 2; grid-row: 1; margin-bottom: 0; font-size: 13px; }
    .ac-hanja { grid-column: 2; grid-row: 2; margin-bottom: 0; font-size: 10px; }
    .ac-desc { grid-column: 3; grid-row: 1 / 3; align-self: center; font-size: 11px; }
  }

  /* 기록 섹션 (사주 + 궁합 탭) */
  .history-section {
    display: none;
    width: 100%;
    max-width: 560px;
    margin-bottom: 32px;
  }
  .history-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(201,151,58,0.15);
  }
  .history-tab {
    background: none;
    border: none;
    padding: 8px 16px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    color: var(--mist);
    cursor: pointer;
    letter-spacing: 0.05em;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
  }
  .history-tab:hover { color: var(--gold-light); }
  .history-tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
  }
  .history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .history-clear {
    text-align: center;
    margin-top: 16px;
  }

  /* Form card */
  .form-card {
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(201,151,58,0.12);
    border-radius: 2px;
    padding: clamp(32px, 6vw, 52px);
    backdrop-filter: blur(20px);
    box-shadow:
      0 40px 80px rgba(0,0,0,0.5),
      inset 0 1px 0 rgba(201,151,58,0.1);
    animation: fadeUp 1s ease 0.5s both;
    position: relative;
    overflow: hidden;
  }

  .form-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
  }

  /* Corner ornaments */
  .corner {
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0.3;
  }

  .corner-tl { top: 12px; left: 12px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
  .corner-tr { top: 12px; right: 12px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); }
  .corner-bl { bottom: 12px; left: 12px; border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold); }
  .corner-br { bottom: 12px; right: 12px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }

  /* Section */
  .form-section {
    margin-bottom: 32px;
  }

  .section-label {
    font-family: 'Noto Serif KR', serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.35em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(201,151,58,0.3), transparent);
  }

  /* Pill toggle */
  .pill-group {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .pill {
    padding: 12px 20px;
    border: 1px solid rgba(201,151,58,0.2);
    border-radius: 1px;
    background: transparent;
    color: var(--mist);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
  }

  .pill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(201,151,58,0.08);
    opacity: 0;
    transition: opacity 0.3s;
  }

  .pill:hover::before { opacity: 1; }
  .pill:hover { color: var(--gold-light); border-color: rgba(201,151,58,0.5); }

  .pill.selected {
    background: rgba(201,151,58,0.1);
    border-color: var(--gold);
    color: var(--gold-light);
    box-shadow: 0 0 12px rgba(201,151,58,0.15), inset 0 0 8px rgba(201,151,58,0.05);
  }

  /* Date input row */
  .date-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }

  .input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .input-hint {
    font-size: 11px;
    color: var(--mist);
    letter-spacing: 0.15em;
    opacity: 0.7;
  }

  .styled-input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(201,151,58,0.15);
    border-radius: 1px;
    color: var(--paper);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    outline: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    height: 46px;
  }

  .styled-input::placeholder {
    color: rgba(138,122,143,0.4);
    font-size: 13px;
  }

  .styled-input:focus {
    border-color: rgba(201,151,58,0.5);
    background: rgba(201,151,58,0.04);
    box-shadow: 0 0 0 1px rgba(201,151,58,0.1);
  }

  /* Select */
  .styled-select {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(201,151,58,0.15);
    border-radius: 1px;
    color: var(--paper);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 300;
    transition: all 0.3s;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    box-sizing: border-box;
    height: 46px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9973a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
  }

  .styled-select:focus {
    border-color: rgba(201,151,58,0.5);
    background-color: rgba(201,151,58,0.04);
  }

  .styled-select option {
    background: #1a1018;
    color: var(--paper);
  }

  /* Time section: with 모름 toggle */
  .time-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: start;
  }

  .unknown-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .toggle-label {
    font-size: 11px;
    color: var(--mist);
    letter-spacing: 0.1em;
    white-space: nowrap;
    opacity: 0.7;
  }

  .toggle-switch {
    position: relative;
    width: 40px;
    height: 22px;
    cursor: pointer;
    margin-top: 6px;
  }

  .toggle-switch input { display: none; }

  .toggle-track {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(201,151,58,0.2);
    border-radius: 11px;
    transition: all 0.3s;
  }

  .toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--mist);
    border-radius: 50%;
    transition: all 0.3s;
  }

  .toggle-switch input:checked + .toggle-track { background: rgba(201,151,58,0.15); border-color: var(--gold); }
  .toggle-switch input:checked ~ .toggle-thumb { left: 20px; background: var(--gold); box-shadow: 0 0 8px rgba(201,151,58,0.5); }

  /* 생시 모름 */
  .time-unknown .styled-select { opacity: 0.3; pointer-events: none; }

  /* Gender */
  .gender-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .gender-btn {
    padding: 14px;
    border: 1px solid rgba(201,151,58,0.15);
    background: transparent;
    color: var(--mist);
    font-family: 'Noto Serif KR', serif;
    font-size: 13px;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 1px;
    position: relative;
    overflow: hidden;
  }

  .gender-btn .icon { font-size: 18px; }

  .gender-btn:hover { border-color: rgba(201,151,58,0.4); color: var(--gold-light); }

  .gender-btn.selected.female {
    background: rgba(196,97,110,0.08);
    border-color: var(--rose);
    color: var(--rose-light);
    box-shadow: 0 0 16px rgba(196,97,110,0.12);
  }

  .gender-btn.selected.male {
    background: rgba(74,124,106,0.08);
    border-color: var(--jade);
    color: #7ec4ac;
    box-shadow: 0 0 16px rgba(74,124,106,0.12);
  }

  /* Region input */
  .region-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .region-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 8px;
  }
  #birthRegion2:disabled { opacity: 0.35; cursor: not-allowed; }

  .region-unknown {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 4px 0;
  }

  .checkbox-custom {
    width: 16px;
    height: 16px;
    border: 1px solid rgba(201,151,58,0.3);
    border-radius: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    flex-shrink: 0;
    background: transparent;
  }

  .checkbox-custom.checked {
    background: rgba(201,151,58,0.1);
    border-color: var(--gold);
  }

  .checkbox-custom svg { display: none; }
  .checkbox-custom.checked svg { display: block; }

  .checkbox-text {
    font-size: 12px;
    color: var(--mist);
    letter-spacing: 0.08em;
  }

  /* Divider */
  .form-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,151,58,0.15), transparent);
    margin: 28px 0;
  }

  /* Submit button */
  .submit-btn {
    width: 100%;
    padding: 18px;
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold-light);
    font-family: 'Noto Serif KR', serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
    margin-top: 8px;
    border-radius: 1px;
  }

  .submit-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(201,151,58,0.1), rgba(201,151,58,0.2));
    opacity: 0;
    transition: opacity 0.5s;
  }

  .submit-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    background: rgba(201,151,58,0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.8s ease, opacity 0.8s ease;
    opacity: 0;
  }

  .submit-btn:hover::before { opacity: 1; }
  .submit-btn:hover { box-shadow: 0 0 30px rgba(201,151,58,0.2), 0 0 60px rgba(201,151,58,0.05); letter-spacing: 0.3em; }
  .submit-btn:active::after { transform: translate(-50%, -50%) scale(1); opacity: 0; }

  .btn-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    white-space: nowrap;
  }

  /* Info badges */
  .badge-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 24px;
    justify-content: center;
  }

  .badge {
    font-size: 11px;
    color: var(--mist);
    letter-spacing: 0.15em;
    padding: 5px 14px;
    border: 1px solid rgba(138,122,143,0.2);
    border-radius: 20px;
    opacity: 0.7;
  }

  /* Info panel */
  .info-panel {
    margin-top: 48px;
    width: 100%;
    max-width: 560px;
    animation: fadeUp 1s ease 0.8s both;
  }

  .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .info-card {
    padding: 24px;
    border: 1px solid rgba(201,151,58,0.08);
    background: rgba(255,255,255,0.015);
    border-radius: 1px;
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
    cursor: default;
  }

  .info-card:hover {
    border-color: rgba(201,151,58,0.2);
    background: rgba(201,151,58,0.03);
    transform: translateY(-2px);
  }

  .info-card-icon {
    font-size: 22px;
    margin-bottom: 10px;
    display: block;
  }

  .info-card-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold-light);
    letter-spacing: 0.1em;
    margin-bottom: 8px;
  }

  .info-card-desc {
    font-size: 11px;
    color: var(--mist);
    line-height: 1.8;
    letter-spacing: 0.03em;
  }

  /* Result overlay (placeholder) */
  .result-hint {
    text-align: center;
    margin-top: 16px;
    font-size: 11px;
    color: var(--mist);
    letter-spacing: 0.15em;
    opacity: 0.5;
  }

  /* Animations for interactions */
  @keyframes ripple {
    0% { transform: scale(0); opacity: 0.4; }
    100% { transform: scale(4); opacity: 0; }
  }

  /* Loading state */
  .loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(14,8,16,0.9);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 24px;
    backdrop-filter: blur(10px);
  }

  .loading-overlay.show { display: flex; }

  .loading-ring {
    width: 80px;
    height: 80px;
    border: 1px solid rgba(201,151,58,0.1);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
  }

  @keyframes spin { to { transform: rotate(360deg); } }

  .loading-text {
    font-family: 'Noto Serif KR', serif;
    font-size: 13px;
    color: var(--gold);
    letter-spacing: 0.4em;
    animation: pulse 2s ease-in-out infinite;
  }

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

  .loading-sub {
    font-size: 11px;
    color: var(--mist);
    letter-spacing: 0.2em;
    opacity: 0.6;
  }

  /* Responsive */
  @media (max-width: 480px) {
    .info-grid { grid-template-columns: 1fr; }
  }

/* ── 결과 페이지 CSS ── */
html { scroll-behavior:smooth; }
/* body 정의는 상단에 통합됨 */

/* BG */
.cosmos-bg {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 15% 5%, rgba(80,30,60,0.45) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 85% 95%, rgba(20,40,75,0.5) 0%, transparent 60%),
    linear-gradient(160deg,#0e0810 0%,#130d1a 50%,#09101e 100%);
}
.cosmos-bg::after {
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 33% 7%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 33%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 73% 14%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 42%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 6% 58%, rgba(255,255,255,.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 44% 72%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 63% 82%, rgba(255,255,255,.45) 0%, transparent 100%),
    radial-gradient(2px 2px at 79% 64%, rgba(255,255,255,.28) 0%, transparent 100%);
}

/* Layout */
.page { position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 16px 100px; }

/* Hero */
.hero { text-align:center; padding:52px 0 34px; animation:fadeDown 1s ease both; }
@keyframes fadeDown { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(14px)}  to{opacity:1;transform:translateY(0)} }
.hero-eyebrow { font-family:var(--sans); font-size:11px; letter-spacing:.4em; color:var(--gold); font-weight:400; margin-bottom:12px; opacity:.85; }
.hero-name    { font-family:var(--serif); font-size:clamp(26px,5.5vw,38px); font-weight:600; color:var(--paper); letter-spacing:.12em; margin-bottom:5px; }
.hero-sub     { font-family:var(--sans); font-size:14px; color:var(--mist); letter-spacing:.14em; margin-bottom:16px; font-weight:300; }
.hero-divider { display:flex; align-items:center; gap:14px; justify-content:center; margin-bottom:12px; }
.hdl { width:48px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.hdr { width:48px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); }
.hero-tag  { font-family:var(--serif); font-size:15px; color:var(--mist-light); letter-spacing:.16em; white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:480px) { .hero-tag { font-size:12px; letter-spacing:.08em; } }
.hero-note { font-family:var(--sans); font-size:12px; color:var(--mist); margin-top:8px; letter-spacing:.1em; font-weight:300; opacity:.7; }

/* 모바일 결과 헤더 — PC에서는 GNB가 있으므로 숨김 */
.result-header {
  display:none; position:sticky; top:0; z-index:51;
  align-items:center; gap:8px;
  padding:10px 16px;
  background:rgba(14,8,16,.95);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
}
.result-header-back {
  background:none; border:none; color:var(--mist-light);
  font-size:18px; cursor:pointer; padding:4px 8px 4px 0;
  line-height:1;
}
.result-header-name {
  font-family:var(--sans); font-size:14px; color:var(--paper);
  font-weight:500; letter-spacing:.03em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Nav */
.result-nav {
  display:flex; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  border:1px solid var(--border); border-radius:2px; margin-bottom:32px;
  position:sticky; top:0; z-index:50;
  /* PC: GNB 높이(56px) 아래에 고정 */
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  background:rgba(14,8,16,.9); scrollbar-width:none;
  animation:fadeUp .8s ease .2s both;
  width:calc(100% + 32px); margin-left:-16px; margin-right:-16px;
  border-left:none; border-right:none; border-radius:0;
}
.result-nav::-webkit-scrollbar{display:none}
.nav-btn {
  flex:1 1 0; min-width:0; padding:13px 8px;
  background:transparent; border:none; border-right:1px solid var(--border);
  color:var(--mist); font-family:var(--sans); font-size:13px;
  letter-spacing:.1em; font-weight:400; cursor:pointer; transition:all .3s;
  white-space:nowrap; position:relative; text-align:center;
}
.nav-btn:last-child{border-right:none}
.nav-btn::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:var(--gold); transform:scaleX(0); transition:transform .3s; }
.nav-btn.active { color:var(--gold-light); background:rgba(201,151,58,.05); }
.nav-btn.active::after { transform:scaleX(1); }

/* Section */
.result-section{display:none}
.result-section.active{display:block;animation:fadeUp .45s ease both}

/* Card */
.card {
  background:rgba(255,255,255,.025); border:1px solid var(--border);
  border-radius:2px; padding:clamp(18px,4vw,28px); margin-bottom:24px;
  position:relative; overflow:hidden;
}
.card::before { content:''; position:absolute; top:-1px; left:15%; right:15%; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.card-title {
  font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.3em;
  color:var(--gold); margin-bottom:18px; display:flex; align-items:center; gap:10px; text-transform:uppercase;
}
.card-title::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--border),transparent); }

/* Manse */
.manse-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.manse-table { width:100%; min-width:300px; border-collapse:separate; border-spacing:6px; table-layout:fixed; }
.manse-table th { font-family:var(--sans); font-size:11px; font-weight:400; letter-spacing:.22em; color:var(--mist); padding:4px 0; text-align:center; }
.manse-cell {
  background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:2px;
  text-align:center; padding:clamp(10px,2.5vw,15px) 6px; vertical-align:top; transition:all .3s;
}
.manse-cell:hover{border-color:rgba(201,151,58,.35);background:rgba(201,151,58,.04)}
.manse-cell.ilgan{border-color:rgba(201,151,58,.45);background:rgba(201,151,58,.07);box-shadow:0 0 18px rgba(201,151,58,.08)}
.ss-badge { font-family:var(--sans); font-size:11px; color:var(--gold); letter-spacing:.08em; margin-bottom:4px; min-height:15px; font-weight:400; }
.cheon-badge { font-size:11px; padding:1px 5px; border-radius:1px; border:1px solid rgba(201,151,58,0.2); background:rgba(201,151,58,0.06); display:inline-block; margin-bottom:2px; }
.ji-badge { font-size:11px; padding:1px 5px; border-radius:1px; display:inline-block; margin-bottom:2px; opacity:0.8; }
.ji-badge.wood { border:1px solid rgba(125,184,106,0.3); background:rgba(125,184,106,0.07); color:#7db86a; }
.ji-badge.fire { border:1px solid rgba(224,112,96,0.3); background:rgba(224,112,96,0.07); color:#e07060; }
.ji-badge.earth { border:1px solid rgba(200,164,74,0.3); background:rgba(200,164,74,0.07); color:#c8a44a; }
.ji-badge.metal { border:1px solid rgba(160,177,204,0.3); background:rgba(160,177,204,0.07); color:#a0b8cc; }
.ji-badge.water { border:1px solid rgba(90,142,196,0.3); background:rgba(90,142,196,0.07); color:#5a8ec4; }
.manse-cell.ilgan .ss-badge { color:var(--gold-light); font-size:10px; }
.cheon { font-family:var(--serif); font-size:clamp(22px,5vw,30px); font-weight:700; line-height:1.1; display:block; margin-bottom:3px; }
.ji    { font-family:var(--serif); font-size:clamp(22px,5vw,30px); font-weight:600; line-height:1.1; display:block; }
.jijanggan  { font-family:var(--sans); font-size:11px; color:var(--mist); letter-spacing:.06em; margin-top:7px; line-height:1.7; }
.twelve-won { font-family:var(--sans); font-size:11px; color:var(--mist-light); margin-top:5px; }
/* 만세력 셀 높이 통일 */
.manse-cell .ss-badge { height: 20px; }
.manse-cell .cheon { height: 36px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.manse-cell .ji { height: 36px; display: flex; align-items: center; justify-content: center; }
.manse-cell .jijanggan { height: 18px; display: flex; align-items: center; justify-content: center; }
.manse-cell .twelve-won { height: 18px; display: flex; align-items: center; justify-content: center; }
/* 만세력 푸터 + 용신 바 — 공통 세로 bar 스타일 */
.manse-footer { margin-top: 14px; }
.manse-footer-bar, .yongsin-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 16px; background: rgba(201,151,58,0.07); border: 1px solid rgba(201,151,58,0.25); border-radius: 2px; position: relative; overflow: hidden; }
.manse-footer-bar::before, .yongsin-bar::before { content:''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(201,151,58,0.5),transparent); }
.manse-footer-label, .yongsin-label { font-family: var(--sans); font-size: 11px; color: var(--gold); letter-spacing: 0.25em; font-weight: 400; }
.manse-footer-val, .yongsin-val { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--gold-light); letter-spacing: 0.1em; text-shadow: 0 0 12px rgba(201,151,58,0.5); }
.manse-footer-sub, .yongsin-sub { font-family: var(--sans); font-size: 11px; color: var(--mist); line-height: 1.6; text-align: center; margin-top: 2px; }
.yongsin-bar { margin-top:12px; }
.yongsin-divider { width:40px; height:1px; background:rgba(201,151,58,0.25); }

/* Ohaeng colors */
.wood{color:#7db86a} .fire{color:#e07060} .earth{color:#c8a44a} .metal{color:#a0b8cc} .water{color:#5a8ec4}

/* Ohaeng radar */
.ohaeng-radar-wrap { padding:10px 0 4px; }

/* 십성 */
.sipsung-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.ss-item { padding:15px; border:1px solid var(--border); background:rgba(255,255,255,.02); border-radius:1px; transition:all .3s; }
.ss-item:hover{border-color:rgba(201,151,58,.3);background:rgba(201,151,58,.03)}
.ss-name { font-family:var(--sans); font-size:16px; font-weight:700; margin-bottom:3px; }
.ss-role { font-family:var(--sans); font-size:11px; color:var(--mist); margin-bottom:7px; font-weight:300; letter-spacing:.08em; }
.ss-desc { font-family:var(--sans); font-size:13px; color:var(--mist-light); line-height:1.8; font-weight:300; }

/* 신살 */
.sinsal-grid{display:flex;flex-direction:column;gap:10px}
/* 그룹핑된 신살 */
.sinsal-group{border:1px solid var(--border);background:rgba(255,255,255,.02);border-radius:2px;padding:12px}
.sg-source{font-family:var(--sans);font-size:11px;color:rgba(201,151,58,0.6);letter-spacing:.06em;font-weight:300;margin-bottom:8px}
.sg-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.sg-tag{font-family:var(--sans);font-size:12px;font-weight:600;padding:4px 8px;border-radius:1px;border:1px solid var(--border);background:rgba(255,255,255,.03)}
.sg-tag.good{color:var(--jade-light);border-color:var(--jade);background:rgba(74,124,106,.06)}
.sg-tag.caution{color:var(--rose-light);border-color:var(--rose);background:rgba(196,97,110,.06)}
.sg-tag.neutral{color:var(--mist-light);border-color:rgba(201,151,58,.3);background:rgba(201,151,58,.04)}
.sg-hanja{font-size:9px;color:var(--mist);font-weight:300;letter-spacing:.06em;margin-left:4px}
.sg-rows{display:flex;flex-direction:column;gap:4px;border-top:1px solid rgba(255,255,255,.04);padding-top:8px}
.sg-row{font-family:var(--sans);font-size:12px;color:var(--mist-light);line-height:1.7;font-weight:300}
.sg-row-name{font-weight:500;margin-right:4px}
.sg-row.good .sg-row-name{color:var(--jade-light)}
.sg-row.caution .sg-row-name{color:var(--rose-light)}
.sg-single-desc{font-family:var(--sans);font-size:12px;color:var(--mist);line-height:1.7;font-weight:300;margin-top:2px}
/* 레거시 호환 (다른 곳에서 참조) */
.sinsal-item { padding:14px 12px; border:1px solid var(--border); background:rgba(255,255,255,.02); border-radius:2px; }
.sinsal-name { font-family:var(--sans); font-size:13px; font-weight:600; margin-bottom:4px; display:flex; align-items:baseline; gap:6px; }
.sinsal-hanja { font-size:10px; color:var(--mist); font-weight:300; letter-spacing:.08em; }
.sinsal-desc { font-family:var(--sans); font-size:12px; color:var(--mist-light); line-height:1.7; font-weight:300; }
.sinsal-source { font-family:var(--sans); font-size:11px; color:rgba(201,151,58,0.6); letter-spacing:0.06em; margin-bottom:4px; font-weight:300; }
.sinsal-synergy-section { margin-top:12px; }
.sinsal-syn-row { font-size:12px; color:var(--mist-light); line-height:1.8; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.sinsal-syn-row:last-child { border-bottom:none; }
.sinsal-syn-good strong { color:var(--jade-light); }
.sinsal-syn-bad strong { color:var(--rose-light); }
.sinsal-item.highlight{border-color:var(--rose);background:rgba(196,97,110,.05)}
.sinsal-item.highlight .sinsal-name{color:var(--rose-light)}
.sinsal-item.good{border-color:var(--jade);background:rgba(74,124,106,.05)}
.sinsal-item.good .sinsal-name{color:var(--jade-light)}
.sinsal-potential-toggle{display:block;width:100%;margin-top:14px;padding:10px;background:transparent;border:1px solid var(--border);color:var(--mist);font-family:var(--sans);font-size:12px;letter-spacing:.12em;cursor:pointer;border-radius:1px;transition:all .3s}
.sinsal-potential-toggle:hover{border-color:rgba(201,151,58,.3);color:var(--gold);background:rgba(201,151,58,.04)}
.sinsal-potential-section{margin-top:14px}
.sinsal-period-group{margin-bottom:16px}
.sinsal-period-label{font-family:var(--sans);font-size:12px;color:var(--gold);letter-spacing:.15em;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid rgba(201,151,58,.15);font-weight:400}
.sinsal-tags{margin-top:4px;display:flex;flex-wrap:wrap;gap:2px;justify-content:center}
.sinsal-tag{display:inline-block;font-family:var(--sans);font-size:11px;padding:3px 7px;border-radius:1px;letter-spacing:.04em;font-weight:400}
.sinsal-tag.stag-good{color:var(--jade-light);background:rgba(74,124,106,.15)}
.sinsal-tag.stag-bad{color:var(--rose-light);background:rgba(196,97,110,.12)}
.sinsal-summary{margin-top:14px;padding:12px;border:1px solid rgba(201,151,58,.12);background:rgba(201,151,58,.03);border-radius:1px;font-family:var(--sans);font-size:12px;color:var(--mist-light);line-height:1.8}
.sinsal-period-group.period-now .sinsal-period-label{color:var(--rose-light);border-bottom-color:rgba(196,97,110,.3)}
.sinsal-period-group.period-now .sinsal-period-label::after{content:' ← 현재';font-size:10px;opacity:0.8}
.sinsal-period-summary{margin-top:6px;margin-bottom:4px;padding:8px 10px;font-family:var(--sans);font-size:11px;color:var(--mist);line-height:1.7;border-left:2px solid rgba(201,151,58,.2)}

/* 합충형파해 */
.relations-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.rel-item{padding:14px 12px;border:1px solid var(--border);border-radius:2px;background:rgba(255,255,255,.02)}
.rel-type{font-family:var(--sans);font-size:13px;font-weight:700;margin-bottom:4px}
.rel-pair{font-family:var(--serif);font-size:15px;margin-bottom:4px;letter-spacing:.08em}
.rel-desc{font-family:var(--sans);font-size:11px;color:var(--mist-light);line-height:1.65;font-weight:300}
.rel-item.chung{border-color:var(--rose);background:rgba(196,97,110,.05)}
.rel-item.chung .rel-type{color:var(--rose-light)}
.rel-item.hap{border-color:rgba(201,151,58,.45);background:rgba(201,151,58,.05)}
.rel-item.hap .rel-type{color:var(--gold-light)}
.rel-item.hyung{border-color:rgba(220,140,60,.45);background:rgba(220,140,60,.05)}
.rel-item.hyung .rel-type{color:rgba(240,170,80,.9)}
.rel-item.samhap{border-color:var(--jade);background:rgba(74,124,106,.05)}
.rel-item.samhap .rel-type{color:var(--jade-light)}

/* 대운 신살 태그 */
.dw-sinsal{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;margin-top:4px}
.dw-sinsal-tag{font-family:var(--sans);font-size:11px;color:rgba(201,151,58,.8);background:rgba(201,151,58,.1);padding:1px 4px;border-radius:1px;letter-spacing:.04em}

/* 대운 */
.daewoon-scroll { display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:8px; padding-bottom:6px; margin-bottom:14px; }
.daewoon-scroll::-webkit-scrollbar{display:none}
.dw-item { flex-shrink:0; width:100px; padding:14px 10px 12px; border:1px solid var(--border); text-align:center; border-radius:2px; background:rgba(255,255,255,.02); cursor:pointer; transition:all .3s; position:relative; }
.dw-item.now{border-color:rgba(201,151,58,.55);background:rgba(201,151,58,.08)}
.dw-item.now::after { content:'현재'; position:absolute; top:-9px; left:50%; transform:translateX(-50%); font-family:var(--sans); font-size:9px; color:var(--gold); background:var(--ink); padding:0 5px; font-weight:400; }
.dw-item:hover{border-color:rgba(201,151,58,.3);transform:translateY(-2px)}
.dw-age  { font-family:var(--sans); font-size:10px; color:var(--mist); margin-bottom:7px; font-weight:300; }
.dw-char { font-family:var(--serif); font-size:20px; font-weight:600; margin-bottom:1px; }
.dw-ss   { font-family:var(--sans); font-size:10px; color:var(--gold); letter-spacing:.08em; margin-top:6px; font-weight:400; }

/* Story */
.story-hero { padding:clamp(22px,4.5vw,34px) clamp(18px,4vw,28px); border:1px solid var(--border); border-radius:2px; margin-bottom:16px; position:relative; overflow:hidden; }
.story-hero.love   { background:linear-gradient(135deg,rgba(196,97,110,.09) 0%,rgba(14,8,16,0) 65%); border-color:rgba(196,97,110,.22); }
.story-hero.wealth { background:linear-gradient(135deg,rgba(201,151,58,.09) 0%,rgba(14,8,16,0) 65%); border-color:rgba(201,151,58,.22); }
.story-hero::before{content:'';position:absolute;top:-1px;left:10%;right:10%;height:1px}
.story-hero.love::before  { background:linear-gradient(90deg,transparent,var(--rose),transparent); }
.story-hero.wealth::before{ background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.story-icon    { font-size:28px; margin-bottom:10px; display:block; }
.story-title   { font-family:var(--sans); font-size:20px; font-weight:700; letter-spacing:.08em; margin-bottom:5px; }
.story-title.love  { color:var(--rose-light); }
.story-title.wealth{ color:var(--gold-light); }
.story-headline { font-family:var(--serif); font-size:16px; line-height:1.8; color:var(--paper); margin-bottom:14px; font-style:italic; }
.story-body { font-family:var(--sans); font-size:14px; color:var(--mist-light); line-height:1.95; font-weight:300; }

/* Timeline */
.timeline { position:relative; padding-left:26px; margin-top:18px; }
.timeline::before { content:''; position:absolute; left:7px; top:10px; bottom:10px; width:1px; background:var(--border); }
.tl-item{position:relative;margin-bottom:20px}
.tl-item::before { content:''; position:absolute; left:-23px; top:7px; width:8px; height:8px; border-radius:50%; background:var(--ink); border:1px solid var(--gold); }
.tl-item.active::before{background:var(--gold);box-shadow:0 0 8px rgba(201,151,58,.5)}
.tl-section-past .tl-item{opacity:0.45}
.tl-section-future .tl-item{opacity:0.55}
.tl-age  { font-family:var(--sans); font-size:11px; color:var(--gold); letter-spacing:.12em; margin-bottom:4px; font-weight:500; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tl-text { font-family:var(--sans); font-size:14px; color:var(--mist-light); line-height:1.85; font-weight:300; }
.tl-bar { height:4px; border-radius:2px; margin-top:8px; background:rgba(201,151,58,0.15); overflow:hidden; }
.tl-bar-fill { height:100%; border-radius:2px; transition:width 1s ease; }

/* Insight — .ab 토큰과 통일 */
.insight-box { padding:var(--sp-md) var(--sp-lg); border-left:3px solid var(--gold); background:var(--bg-gold); margin:var(--sp-md) 0; font-family:var(--sans); font-size:var(--text-sm); color:var(--mist-light); line-height:1.75; border-radius:2px; }
.insight-box.rose{border-color:var(--rose);background:var(--bg-rose)}
.insight-box.mist{border-color:var(--mist);background:rgba(138,122,143,.04)}
/* 오행 토글 */
.ohaeng-toggle { display:flex; align-items:center; gap:9px; cursor:pointer; margin:10px 0 4px; font-family:var(--sans); user-select:none; }
.ohaeng-toggle input { display:none; }
.ohaeng-toggle-slider { width:36px; height:20px; background:rgba(255,255,255,.1); border-radius:10px; position:relative; transition:background .3s; flex-shrink:0; }
.ohaeng-toggle-slider::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; background:rgba(200,188,208,.5); border-radius:50%; transition:transform .3s, background .3s; }
.ohaeng-toggle input:checked + .ohaeng-toggle-slider { background:rgba(201,151,58,.3); }
.ohaeng-toggle input:checked + .ohaeng-toggle-slider::after { transform:translateX(16px); background:var(--gold); }
.ohaeng-toggle-label { font-size:13px; color:rgba(200,188,208,.55); transition:color .3s; }
.ohaeng-toggle input:checked ~ .ohaeng-toggle-label { color:var(--gold); }
/* 숨은 기운 설명 */
.ohaeng-hidden-info { margin-top:14px; padding:14px 16px; background:rgba(201,151,58,.03); border:1px solid rgba(201,151,58,.08); border-radius:2px; font-family:var(--sans); }
.ohaeng-hidden-info-q { font-size:13px; color:var(--gold); font-weight:600; margin-bottom:6px; }
.ohaeng-hidden-info-a { font-size:13px; color:var(--mist); line-height:1.85; }

/* Body text helpers */
.body-text { font-family:var(--sans); font-size:14px; color:var(--mist-light); line-height:1.95; font-weight:300; }
.body-text strong{color:var(--paper);font-weight:700}
.hl-rose{color:var(--rose-light);font-weight:500}
.hl-gold{color:var(--gold-light);font-weight:500}

/* ══ 자미두수 탭 — 총평 ══ */
.zw-summary-text {
  font-size: 14px;
  color: var(--paper);
  line-height: 1.85;
  padding: 0 4px;
  margin-bottom: 16px;
}
.zw-summary-text strong { color: var(--gold-light); }
.zw-stat-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.zw-stat-card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 12px 10px;
}
.zw-stat-label {
  font-size: 11px;
  color: var(--mist);
  letter-spacing: .03em;
  margin-bottom: 4px;
}
.zw-stat-value {
  font-size: 13px;
  color: var(--paper);
  font-weight: 600;
}
.zw-stat-sub {
  font-size: 11px;
  color: var(--mist-light);
  margin-top: 2px;
}

/* ══ 명반 4×4 ══ */
.zw-myungban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 12px;
  background: rgba(255,255,255,.02);
}
.zw-gung {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 8px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  min-height: 60px;
  padding: 10px 6px;
}
.zw-gung:hover {
  background: rgba(201,151,58,.08);
  border-color: rgba(201,151,58,.3);
}
.zw-gung.active {
  background: rgba(200,155,123,.15);
  border-color: rgba(200,155,123,.4);
}
.zw-gung--center {
  grid-column: span 2;
  grid-row: span 2;
  background: rgba(201,151,58,.04);
  border-color: var(--border);
  cursor: default;
  aspect-ratio: auto;
}
.zw-gung--center:hover {
  background: rgba(201,151,58,.04);
  border-color: var(--border);
}
.zw-gung-icon {
  font-size: 16px;
  margin-bottom: 2px;
}
.zw-gung-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-light);
}
.zw-gung-stars {
  font-size: 10px;
  color: var(--mist-light);
  margin-top: 3px;
}
.zw-gung-bright {
  font-size: 9px;
  color: var(--mist);
  margin-top: 2px;
}
.zw-myungban-hint {
  text-align: center;
  font-size: 11px;
  color: var(--mist);
  margin: 8px 0 16px;
}

/* ══ 궁 상세 패널 (card 내부 요소) ══ */
.zw-pd-star-section {
  margin-bottom: 20px;
}
.zw-pd-star-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
/* 천간지지/삼방사정은 .card-title + .insight-box 공통 스타일 사용 */
.zw-pd-stars {
  margin-bottom: 14px;
}
.zw-pd-star-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.zw-pd-star-name {
  font-size: 13px;
  color: var(--gold-light);
  font-weight: 600;
}
.zw-pd-star-alias {
  font-size: 11px;
  color: var(--mist);
  font-weight: 400;
}
.zw-pd-star-bright {
  font-size: 10px;
  color: var(--gold);
  opacity: 0.8;
}
.zw-pd-star-mutagen {
  font-size: 10px;
  color: #e07070;
  font-weight: 600;
}
.zw-pd-star-desc {
  font-size: 13px;
  color: var(--paper);
  flex-basis: 100%;
  margin-top: 4px;
  line-height: 1.6;
}
/* 해석 텍스트: 기존 .insight-box 패턴 사용 */
.zw-pd-interp {
  padding: 15px 17px;
  border-left: 2px solid var(--gold);
  background: rgba(201,151,58,.04);
  font-size: 14px;
  line-height: 1.9;
  color: var(--paper);
  margin-bottom: 12px;
}
.zw-pd-interp strong { color: var(--gold-light); }
/* 삼방사정/천간지지는 .zw-pd-section 공통 스타일 사용 */

/* ══ 운한 — 대한 타임라인 ══ */
.zw-daehan-timeline {
  position: relative;
  padding-left: 24px;
}
.zw-daehan-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--gold), var(--border), transparent);
}
.zw-tl-item {
  position: relative;
  margin-bottom: 16px;
}
.zw-tl-dot {
  position: absolute;
  left: -20px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: var(--bg);
}
.zw-tl-item.active .zw-tl-dot {
  background: var(--gold);
}
.tl-section-past .zw-tl-item{opacity:0.45}
.tl-section-future .zw-tl-item{opacity:0.55}
.zw-tl-period {
  font-size: 11px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: .05em;
}
.zw-tl-range {
  font-size: 11px;
  color: var(--mist);
  margin-bottom: 6px;
}
.zw-tl-content {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 12px;
}
.zw-tl-stars {
  font-size: 12px;
  color: var(--gold-light);
  margin-bottom: 6px;
}
.zw-tl-desc {
  font-size: 12px;
  color: var(--paper);
  line-height: 1.8;
}
.zw-tl-desc strong { color: var(--gold-light); }
.zw-tl-tip {
  font-size: 11px;
  color: var(--mist-light);
  margin-top: 8px;
  font-style: italic;
}
.zw-tl-toggle {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  background: rgba(201,151,58,.06);
  border: 1px dashed rgba(201,151,58,.2);
  border-radius: 2px;
  color: var(--gold);
  font-size: 12px;
  cursor: pointer;
  text-align: center;
}
.zw-tl-toggle:hover {
  background: rgba(201,151,58,.12);
  border-color: var(--gold);
}

/* ══ 운한 — 지금의 운세 ══ */
.zw-now-item {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 14px;
  margin-bottom: 12px;
}
.zw-now-period {
  font-size: 11px;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 4px;
}
.zw-now-range {
  font-size: 11px;
  color: var(--mist);
  margin-bottom: 8px;
}
.zw-now-fortune-wrap { display: flex; flex-direction: column; gap: 0; }
.zw-now-note { font-size: 12px; color: var(--mist); line-height: 1.8; margin-top: 10px; padding: 10px 12px; background: rgba(201,151,58,.04); border-radius: 2px; }

/* ══ 전생 인연 탭 ══ */
.pl-role-card {
  text-align: center;
  padding: 12px 0;
}
.pl-symbol { font-size: 48px; margin-bottom: 12px; }
.pl-role-name {
  font-size: 20px;
  color: var(--gold-light);
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 4px;
}
.pl-motto {
  font-size: 13px;
  color: var(--mist-light);
  font-style: italic;
  margin-bottom: 12px;
}
.pl-role-stars {
  font-size: 11px;
  color: var(--gold);
}

/* 전생 챕터 (각 챕터는 .card로 감싸짐) */
/* 전생 궁 카드 (Ch1) */
.pl-palace-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
@media (max-width: 400px) { .pl-palace-cards { grid-template-columns: 1fr; } }
.pl-palace-card { padding: 14px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 6px; text-align: center; }
.pl-palace-label { font-size: 11px; color: var(--mist); margin-bottom: 8px; letter-spacing: 0.04em; }
.pl-palace-title { font-family: var(--serif); font-size: 16px; color: var(--gold); margin-bottom: 6px; font-weight: 400; }
.pl-palace-star { font-size: 12px; color: var(--mist); line-height: 1.5; }

.pl-bridges {
  margin-bottom: 12px;
}
.pl-bridge-header { display: flex; align-items: center; gap: 8px; padding: 4px 12px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 11px; }
.pl-bridge-label { color: var(--mist); letter-spacing: 0.04em; flex: 1; }
.pl-bridge-label:last-child { text-align: right; }
.pl-chapter-body {
  font-size: 14px;
  color: var(--paper);
  line-height: 1.85;
  padding: 15px 17px;
  background: rgba(201,151,58,.04);
  border-radius: 0;
  border-left: 2px solid var(--gold);
}
.pl-chapter-body strong { color: var(--gold-light); }

/* 전생→현생 브리지 */
.pl-bridge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(201,151,58,.04);
  border-radius: 2px;
  margin-bottom: 4px;
  font-size: 13px;
}
.pl-bridge-from { color: var(--mist-light); flex: 1; }
.pl-bridge-arrow { color: var(--gold); }
.pl-bridge-to { color: var(--gold-light); flex: 1; text-align: right; }

/* 사명 카드 */
.pl-mission-card {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 24px;
  text-align: center;
}
.pl-mission-text {
  font-size: 14px;
  color: var(--paper);
  line-height: 1.9;
}
.pl-mission-text strong {
  color: var(--gold-light);
  font-size: 16px;
}

/* ── 총 결과 요약 히어로 ── */
.summary-hero {
  padding:clamp(28px,5vw,40px) clamp(20px,4vw,30px);
  border:1px solid rgba(201,151,58,.25); border-radius:2px; margin-bottom:16px;
  background:linear-gradient(145deg,rgba(201,151,58,.08) 0%,rgba(60,30,80,.15) 50%,rgba(14,8,16,0) 100%);
  position:relative; overflow:hidden;
}
.summary-hero::before { content:''; position:absolute; top:-1px; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,var(--gold-light),transparent); }
.summary-label { font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.3em; color:var(--gold); text-transform:uppercase; margin-bottom:16px; }
.summary-headline { font-family:var(--serif); font-size:clamp(18px,4vw,23px); line-height:1.7; color:var(--paper); font-style:italic; margin-bottom:16px; }
.summary-body { font-family:var(--sans); font-size:14px; color:var(--mist-light); line-height:1.95; font-weight:300; margin-bottom:20px; }
.summary-body strong{color:var(--paper);font-weight:700}
.sum-hl{color:var(--gold-light);font-weight:500}
.summary-tags{display:flex;flex-wrap:wrap;gap:8px}
.stag { font-family:var(--sans); font-size:13px; font-weight:400; padding:6px 14px; border:1px solid rgba(201,151,58,.2); background:rgba(201,151,58,.05); border-radius:20px; color:var(--mist-light); letter-spacing:.05em; }

/* ── 종합 요약 탭 ── */
.overview-hero {
  padding: clamp(28px,5vw,40px) clamp(20px,4vw,30px);
  border: 1px solid rgba(201,151,58,.25);
  border-radius: 2px;
  margin-bottom: 16px;
  background: linear-gradient(145deg, rgba(201,151,58,.1) 0%, rgba(60,30,80,.12) 50%, rgba(14,8,16,0) 100%);
  position: relative;
  text-align: center;
}
.overview-hero::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}
.overview-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.overview-headline {
  font-family: var(--serif);
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1.6;
  color: var(--paper);
  font-style: italic;
  margin-bottom: 12px;
}
.overview-body {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--mist-light);
  line-height: 1.9;
  font-weight: 300;
}
.overview-kv-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.overview-kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(201,151,58,0.06);
}
.overview-kv:last-child { border-bottom: none; }
.overview-kv-desc {
  font-size: 12px;
  color: var(--mist-light);
  padding: 2px 4px 8px;
  line-height: 1.6;
  border-bottom: 1px solid rgba(201,151,58,0.06);
}
.overview-k {
  font-size: 12px;
  font-weight: 600;
  color: var(--mist);
  letter-spacing: 0.05em;
}
.overview-v {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--gold-light);
}
.overview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 오행 바 차트 — 3줄 구조: 이모지+이름 / 바+퍼센트 / 설명 */
.oh-bar-row { display:flex; flex-direction:column; gap:4px; padding:10px 0; width:100%; border-bottom:1px solid rgba(255,255,255,0.03); }
.oh-bar-label { display:flex; align-items:center; gap:6px; }
.oh-bar-emoji { font-size:16px; }
.oh-bar-name { font-size:14px; font-weight:600; }
.oh-bar-line { display:flex; align-items:center; gap:8px; }
.oh-bar-gauge { flex:1; min-width:80px; }
.oh-bar-track { height:8px; background:rgba(255,255,255,0.04); border-radius:4px; overflow:hidden; width:100%; }
.oh-bar-fill { height:100%; opacity:0.75; border-radius:4px; }
.oh-bar-pct { font-size:18px; font-weight:300; flex-shrink:0; min-width:40px; text-align:right; }
.oh-bar-desc { font-size:11px; color:rgba(169,154,175,0.6); }
.oh-bar-desc.weak { color:var(--rose); }

/* 오행 밸런스 레이아웃: PC 좌우, 모바일 상하 */
.overview-ohaeng-layout {
  display: flex;
  align-items: center;
  gap: 20px;
}
.overview-ohaeng-radar {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}
.overview-ohaeng-radar svg { width: 420px; }
.overview-ohaeng-bars {
  flex: 1;
  min-width: 0;
  width: 100%;
}
@media (max-width: 600px) {
  .overview-ohaeng-layout {
    flex-direction: column;
  }
  .overview-ohaeng-radar svg { width: 100%; max-width: 320px; }
  /* 오행 바 차트 — 모바일: 크기만 축소 */
  .oh-bar-row { flex-direction:row; flex-wrap:wrap; align-items:center; gap:0 6px; padding:8px 0; }
  .oh-bar-label { gap:4px; flex-shrink:0; }
  .oh-bar-emoji { font-size:13px; }
  .oh-bar-name { font-size:11px; }
  .oh-bar-line { gap:6px; flex:1; min-width:0; }
  .oh-bar-gauge { min-width:60px; }
  .oh-bar-track { height:6px; }
  .oh-bar-pct { font-size:13px; min-width:30px; }
  .oh-bar-desc { font-size:10px; width:100%; }
}

/* ── 취직·이직·이사 그리드 ── */
.career-move-grid{display:grid;grid-template-columns:1fr;gap:10px}
.cm-item{padding:16px 14px;border:1px solid var(--border);background:rgba(255,255,255,.02);border-radius:1px;display:flex;flex-direction:column;gap:10px;transition:all .3s}
.cm-item:hover{border-color:rgba(201,151,58,.3);background:rgba(201,151,58,.03)}
.cm-header{display:flex;align-items:center;gap:8px}
.cm-icon{font-size:20px;flex-shrink:0}
.cm-title{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--paper)}
.cm-stars{font-size:12px;color:var(--gold);letter-spacing:.05em;margin-left:auto;flex-shrink:0}
.cm-body{font-family:var(--sans);font-size:13px;color:var(--mist-light);line-height:1.8;font-weight:300}
.cm-body strong{color:var(--paper);font-weight:700}
.cm-timing{padding:10px 12px;background:rgba(201,151,58,.05);border:1px solid rgba(201,151,58,.12);border-radius:1px;font-family:var(--sans);font-size:13px;color:var(--mist-light);line-height:1.75}
.cm-timing strong{color:var(--gold-light);font-weight:600}

/* ── 건강 그리드 ── */
.health-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.health-item{padding:13px 12px;border-radius:1px;border:1px solid var(--border);background:rgba(255,255,255,.02)}
.health-item.good{border-color:var(--jade);background:rgba(74,124,106,.05)}
.health-item.warn{border-color:rgba(196,97,110,.3);background:rgba(196,97,110,.04)}
.hi-label{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.15em;margin-bottom:6px}
.health-item.good .hi-label{color:var(--jade-light)}
.health-item.warn .hi-label{color:var(--rose-light)}
.hi-body{font-family:var(--sans);font-size:13px;color:var(--mist-light);line-height:1.75;font-weight:300}

/* ── 이직·이사 타이밍 그리드 ── */
.move-timing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.mt-item{padding:16px 14px;border:1px solid var(--border);background:rgba(255,255,255,.02);border-radius:1px;display:flex;flex-direction:column;gap:7px;transition:all .3s}
.mt-item:hover{border-color:rgba(201,151,58,.3)}
.mt-icon{font-size:20px}
.mt-title{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--paper)}
.mt-body{font-family:var(--sans);font-size:13px;color:var(--mist-light);line-height:1.8;font-weight:300;flex:1}
.mt-body strong{color:var(--paper);font-weight:700}
.mt-timing{font-family:var(--sans);font-size:12px;color:var(--gold);font-weight:500;letter-spacing:.1em;padding-top:4px;border-top:1px solid rgba(201,151,58,.12)}

/* Share */
.share-section {
  margin-top:40px; padding:clamp(26px,5vw,38px) clamp(18px,4vw,30px);
  border:1px solid var(--border); text-align:center; border-radius:2px;
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,rgba(201,151,58,.05),rgba(14,8,16,0));
}
.share-section::before { content:''; position:absolute; top:-1px; left:25%; right:25%; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.share-title { font-family:var(--sans); font-size:19px; font-weight:700; color:var(--gold-light); letter-spacing:.1em; margin-bottom:7px; }
.share-desc  { font-family:var(--sans); font-size:14px; color:var(--mist); line-height:1.85; margin-bottom:24px; font-weight:300; }
.share-preview { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:2px; padding:0; margin-bottom:20px; text-align:left; overflow:hidden; }
/* 공유 카드 새 레이아웃 */
.sc-layout { display:grid; grid-template-columns:minmax(120px,30%) 1fr; min-height:180px; }
.sc-zodiac { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.sc-zodiac-bg { position:absolute; inset:0; opacity:0.9; }
.sc-zodiac-img { position:relative; z-index:1; width:85%; height:85%; object-fit:contain; }
.sc-content { padding:16px 16px 12px; display:flex; flex-direction:column; justify-content:space-between; border-left:1px solid rgba(255,255,255,0.06); }
.sc-top { margin-bottom:6px; }
.sc-label { font-family:var(--sans); font-size:11px; color:var(--mist); letter-spacing:0.08em; font-weight:300; margin-bottom:8px; }
.sc-chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.sc-chip { font-family:var(--sans); font-size:10px; font-weight:500; color:var(--gold-light); background:rgba(201,151,58,0.1); border:1px solid rgba(201,151,58,0.3); padding:3px 10px; border-radius:12px; letter-spacing:0.04em; }
.sc-headline { font-family:var(--serif); font-size:14px; color:var(--paper); line-height:1.7; font-weight:400; margin-bottom:8px; }
.sc-summary { font-family:var(--sans); font-size:11px; color:var(--mist-light); line-height:1.8; font-weight:300; }
.sc-tags { display:flex; gap:5px; flex-wrap:wrap; margin-top:10px; }
.sc-stag { font-family:var(--sans); font-size:11px; color:var(--gold); border:1px solid rgba(201,151,58,0.25); padding:2px 7px; border-radius:1px; letter-spacing:0.05em; }
.sc-bottom { border-top:1px solid rgba(255,255,255,0.05); padding-top:8px; margin-top:8px; }
.sc-site { font-family:var(--sans); font-size:11px; color:rgba(201,151,58,0.5); letter-spacing:0.25em; }
@media (max-width: 480px) {
  .sc-layout { grid-template-columns:1fr; }
  .sc-zodiac { min-height:200px; }
  .sc-content { border-left:none; border-top:1px solid rgba(255,255,255,0.06); }
}
.sp-name { font-family:var(--sans); font-size:16px; font-weight:700; margin-bottom:2px; }
.sp-sub  { font-family:var(--sans); font-size:12px; color:var(--mist); font-weight:300; }
.sp-chars{ display:flex; gap:7px; margin-top:9px; flex-wrap:wrap; align-items:center; }
.sp-char { font-family:var(--serif); font-size:22px; font-weight:700; padding:7px 11px; border:1px solid var(--border); background:rgba(255,255,255,.02); border-radius:1px; }
.sp-teaser{ font-family:var(--sans); font-size:13px; color:var(--mist); margin-top:9px; line-height:1.75; font-weight:300; }
/* AI CTA */
.ai-cta-wrap { margin: 20px 0 12px; }
.ai-cta-btn {
  width: 100%; padding: 16px;
  background: rgba(201,151,58,0.06);
  border: 1px solid rgba(201,151,58,0.35);
  color: var(--gold-light);
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0.12em; cursor: pointer;
  transition: all 0.3s; border-radius: 1px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.ai-cta-btn:hover { background: rgba(201,151,58,0.12); border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(201,151,58,0.1); }
.ai-cta-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.ai-cta-btn.love { border-color: rgba(196,97,110,0.35); color: var(--rose-light); background: rgba(196,97,110,0.06); }
.ai-cta-btn.love:hover { background: rgba(196,97,110,0.12); border-color: var(--rose); }
#btnAiZiwei:hover { background: rgba(155,89,182,0.12) !important; border-color: rgba(155,89,182,0.6) !important; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(155,89,182,0.1); }
.ai-cta-icon { font-size: 18px; }
.ai-result-box {
  margin-top: 14px; padding: 20px 22px;
  border: 1px solid rgba(201,151,58,0.18);
  background: rgba(255,255,255,0.02);
  border-radius: 1px;
  font-family: var(--sans); font-size: 14px;
  color: var(--mist-light); line-height: 2;
}
.ai-result-box .ai-title {
  font-size: 17px; font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 24px; line-height: 1.6;
}
.ai-result-box .ai-section { margin-bottom: 22px; }
.ai-result-box .ai-section:last-child { margin-bottom: 0; }
.ai-result-box .ai-subtitle {
  font-size: 15px; font-weight: 600;
  color: var(--gold); margin-bottom: 6px;
}
.ai-result-box .ai-section p { margin: 0; }
.ai-result-box.loading {
  display: flex !important; align-items: center; justify-content: center;
  gap: 10px; min-height: 80px; color: var(--gold);
  font-size: 13px; letter-spacing: 0.1em;
}
@keyframes ai-pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }
.ai-result-box.loading::before { content:'✦'; animation: ai-pulse 1.2s ease infinite; }

/* 공유바 */
.share-bar {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px;
  padding-top: 18px; border-top: 1px solid rgba(201,151,58,0.1);
}
.share-bar .share-btn {
  flex: 1; min-width: 100px; padding: 11px 8px;
  background: transparent; border: 1px solid rgba(201,151,58,0.2);
  color: var(--mist); font-family: var(--sans); font-size: 12px;
  letter-spacing: 0.08em; cursor: pointer; transition: all 0.3s; border-radius: 1px;
}
.share-bar .share-btn:hover { border-color: var(--gold); color: var(--gold-light); background: rgba(201,151,58,0.06); }

.share-buttons{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }
.share-btn { padding:12px 24px; border-radius:1px; font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.08em; cursor:pointer; transition:all .3s; border:1px solid; }
.share-btn.kakao  { background:#fee500; color:#3c1e1e; border-color:#fee500; }
.share-btn.kakao:hover  { background:#ffd700; box-shadow:0 4px 16px rgba(254,229,0,.3); transform:translateY(-1px); }
.share-btn.link   { background:transparent; color:var(--gold-light); border-color:var(--gold); }
.share-btn.link:hover   { background:rgba(201,151,58,.1); transform:translateY(-1px); }
.share-btn.imgsave{ background:transparent; color:var(--mist-light); border-color:var(--mist); }
.share-btn.imgsave:hover{ background:rgba(138,122,143,.1); transform:translateY(-1px); }

/* Toast */
.toast { position:fixed; bottom:120px; left:20px; right:20px; transform:translateY(14px); background:rgba(26,18,36,.96); border:1px solid var(--gold); color:var(--gold-light); padding:12px 20px; border-radius:2px; font-family:var(--sans); font-size:13px; z-index:9999; opacity:0; transition:all .4s; backdrop-filter:blur(12px); pointer-events:none; text-align:left; line-height:1.5; }
@media (min-width:600px) { .toast { left:50%; right:auto; transform:translateX(-50%) translateY(14px); max-width:480px; } }
.toast.show{opacity:1;transform:translateY(0)}
@media (min-width:600px) { .toast.show { transform:translateX(-50%) translateY(0); } .toast { bottom:40px; } }

/* === RESPONSIVE === */
@media(max-width:600px){
  .ohaeng-desc-grid{grid-template-columns:repeat(3,1fr)}
  .sinsal-grid{flex-direction:column}
  .zw-gung { padding: 6px 3px; min-height: 50px; }
  .zw-gung-icon { font-size: 13px; }
  .zw-gung-name { font-size: 10px; }
  .zw-gung-stars { font-size: 9px; }
  .zw-stat-cards { gap: 6px; }
  .zw-pd-star-row { gap: 4px; }
  .sipsung-grid{grid-template-columns:1fr}
  .share-buttons{flex-direction:column;align-items:center}
  .share-btn{width:100%;max-width:280px}
  .health-grid{grid-template-columns:1fr}
  .move-timing-grid{grid-template-columns:1fr}
}
@media(max-width:380px){
  .ohaeng-desc-grid{grid-template-columns:repeat(3,1fr)}
  .ohaeng-desc:nth-child(4),.ohaeng-desc:nth-child(5){display:none}
}

/* ══════════════════════════════
   카드 뽑기 섹션
══════════════════════════════ */
.card-section{
  display:flex;flex-direction:column;align-items:center;
  padding:32px 0 8px;
  position:relative;
}

/* 카드 컨테이너 — 뒤집기 */
.flip-container{
  width:clamp(180px,45vw,220px);
  aspect-ratio:2/3.2;
  perspective:1000px;
  cursor:pointer;
  margin-bottom:24px;
  border-radius:52% 52% 14px 14px / 28% 28% 14px 14px;
}
.flip-inner{
  width:100%;height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform 1.2s cubic-bezier(.4,0,.2,1);
}
.flip-container.revealed .flip-inner{
  transform:rotateY(180deg);
}

/* 카드 앞뒤 공통 */
.card-face{
  position:absolute;inset:0;
  border-radius:52% 52% 14px 14px / 28% 28% 14px 14px;
  backface-visibility:hidden;overflow:hidden;
}

/* ── 카드 뒷면 (점성술 디자인) ── */
.card-back{
  background:linear-gradient(160deg,#0d0820 0%,#060410 100%);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(201,151,58,.3);
  box-shadow:0 8px 40px rgba(0,0,0,.6);
}
.back-inner{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}

/* 뒷면 — 점성술 원형 문양 */
.astro-circle{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.astro-svg{width:82%;height:82%;opacity:.65;animation:rotateSlow 60s linear infinite;}
.astro-svg-rev{width:65%;height:65%;opacity:.4;animation:rotateSlow 40s linear infinite reverse;position:absolute;}

/* 중앙 별 */
.back-star{
  position:relative;z-index:2;
  font-family:var(--serif);font-size:clamp(28px,8vw,38px);
  color:rgba(201,151,58,.85);
  text-shadow:0 0 20px rgba(201,151,58,.5),0 0 40px rgba(201,151,58,.2);
  animation:starPulse 3s ease-in-out infinite;
}
@keyframes starPulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes rotateSlow{to{transform:rotate(360deg)}}

/* 뒷면 별자리 점들 */
.back-dots{position:absolute;inset:0;pointer-events:none;}

/* 뒷면 골드 프레임 */
.back-frame{
  position:absolute;inset:0;border-radius:52% 52% 14px 14px / 28% 28% 14px 14px;pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(201,151,58,.45),
    inset 0 0 0 4px rgba(201,151,58,.06),
    inset 0 0 0 5px rgba(201,151,58,.25);
}
.back-corner{position:absolute;width:20px;height:20px;}
.back-corner svg{width:100%;height:100%;}
.back-corner.tl{top:8px;left:8px;}
.back-corner.tr{top:8px;right:8px;transform:scaleX(-1);}
.back-corner.bl{bottom:8px;left:8px;transform:scaleY(-1);}
.back-corner.br{bottom:8px;right:8px;transform:scale(-1,-1);}

/* 뒷면 텍스트 */
.back-label{
  position:absolute;bottom:16px;left:0;right:0;text-align:center;
  font-size:11px;color:rgba(201,151,58,.5);letter-spacing:.35em;font-weight:300;
  font-family:var(--sans);
}

/* ── 카드 앞면 ── */
.card-front{
  transform:rotateY(180deg);
  box-shadow:0 20px 60px rgba(0,0,0,.7);
}
/* 앞면 배경 */
.front-bg{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(160deg,#061a06 0%,#030d03 100%);
  transition:background .6s;
}
.front-bg-glow{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 35%,rgba(76,175,80,.22) 0%,transparent 70%);
  transition:background .6s;
}
/* 별 텍스처 */
.front-stars{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.7) 1px,transparent 1px),
    radial-gradient(circle,rgba(255,255,255,.4) 1px,transparent 1px),
    radial-gradient(circle,rgba(255,255,255,.2) 1px,transparent 1px);
  background-size:110px 110px,70px 70px,45px 45px;
  background-position:14px 20px,38px 52px,24px 30px;
  animation:cardTwinkle 5s ease-in-out infinite;
}
@keyframes cardTwinkle{0%,100%{opacity:.35}50%{opacity:.55}}

/* 앞면 별자리 장식 오버레이 */
.front-astro{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:.18;
  animation:astroFloat 12s ease-in-out infinite alternate;
}
@keyframes astroFloat{
  0%{opacity:.15;transform:scale(1) rotate(0deg);}
  100%{opacity:.25;transform:scale(1.02) rotate(1.5deg);}
}
/* 달 위상 장식 */
.front-moon{
  position:absolute;top:12px;right:14px;z-index:5;
  width:22px;height:22px;pointer-events:none;
  opacity:0;transition:opacity .8s ease .4s;
}
.front-moon.visible{opacity:.65;}
/* 황도 눈금 장식 (카드 사이드) */
.front-rune{
  position:absolute;z-index:3;pointer-events:none;
  opacity:0;transition:opacity .8s ease .6s;
}
.front-rune.visible{opacity:.22;}
.front-rune.left{left:5px;top:15%;bottom:15%;width:12px;}
.front-rune.right{right:5px;top:15%;bottom:15%;width:12px;transform:scaleX(-1);}

/* 앞면 캐릭터 */
.front-char{
  position:absolute;inset:0;z-index:4;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:40%;
}
.char-img{
  width:75%;max-height:70%;object-fit:contain;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(76,175,80,.35));
  transition:filter .5s;
}

/* 앞면 오버레이 텍스트 */
.front-top{
  position:absolute;top:0;left:0;right:0;z-index:5;
  padding:28px 12px 44px;
  background:linear-gradient(180deg,rgba(3,2,8,.9) 0%,rgba(3,2,8,.2) 55%,transparent 100%);
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.ft-ilgan{
  font-family:var(--serif);font-size:10px;letter-spacing:.38em;
  color:#4CAF50;text-shadow:0 0 10px rgba(76,175,80,.7);transition:color .4s,text-shadow .4s;
}
.ft-num{font-size:11px;color:rgba(255,255,255,.28);letter-spacing:.38em;}

.front-bot{
  position:absolute;bottom:0;left:0;right:0;z-index:5;
  padding:50px 14px 14px;
  background:linear-gradient(0deg,rgba(3,2,8,.92) 0%,rgba(3,2,8,.5) 55%,transparent 100%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.fb-sep{width:52%;height:1px;margin-bottom:1px;background:linear-gradient(90deg,transparent,#4CAF50,transparent);transition:background .4s;}
.fb-ilju{font-family:var(--serif);font-size:clamp(22px,6vw,34px);font-weight:700;color:var(--paper);letter-spacing:.25em;line-height:1;}
.fb-animal{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.22em;font-weight:300;}

/* 앞면 프레임 + 젬 */
.front-frame{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  border-radius:52% 52% 14px 14px / 28% 28% 14px 14px;
  box-shadow:
    inset 0 0 0 1px rgba(201,151,58,.5),
    inset 0 0 0 4px rgba(201,151,58,.05),
    inset 0 0 0 5px rgba(201,151,58,.28),
    inset 0 0 0 9px rgba(201,151,58,.03),
    inset 0 0 0 10px rgba(201,151,58,.12);
}
.c-gem{position:absolute;z-index:7;width:10px;height:10px;}
.c-gem::before{
  content:'';position:absolute;inset:0;
  background:var(--gc,rgba(201,151,58,.8));
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  animation:gemPulse 4s ease-in-out infinite;animation-delay:var(--gd,0s);
  box-shadow:0 0 6px var(--gc,rgba(201,151,58,.5));
}
@keyframes gemPulse{0%,100%{opacity:.35;transform:scale(.7)}50%{opacity:.9;transform:scale(1.15)}}
.c-gem.tl{top:6px;left:6px;} .c-gem.tr{top:6px;right:6px;}
.c-gem.bl{bottom:6px;left:6px;} .c-gem.br{bottom:6px;right:6px;}

/* 카드 글로우 (앞면 공개 후) */
.flip-container.revealed{
  filter:drop-shadow(0 0 18px rgba(76,175,80,.4));
  transition:filter 1s;
}

/* ── 별똥별 캔버스 (앞면 공개 후만) ── */
#shootCanvas{
  position:absolute;
  pointer-events:none;z-index:10;
  opacity:0;transition:opacity 1.5s;
}
#shootCanvas.visible{opacity:1;}

/* ══════════════════════════════
   뽑기 버튼
══════════════════════════════ */
.draw-btn{
  position:relative;
  padding:14px 40px;
  background:linear-gradient(135deg,rgba(201,151,58,.15) 0%,rgba(201,151,58,.05) 100%);
  border:1px solid rgba(201,151,58,.45);
  color:var(--gold-light);
  font-family:var(--serif);font-size:15px;letter-spacing:.25em;
  cursor:pointer;transition:all .3s;border-radius:2px;
  overflow:hidden;
}
.draw-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(201,151,58,.12) 0%,transparent 100%);
  opacity:0;transition:opacity .3s;
}
.draw-btn:hover::before{opacity:1;}
.draw-btn:hover{
  border-color:rgba(201,151,58,.7);
  box-shadow:0 0 24px rgba(201,151,58,.2);
  transform:translateY(-1px);
}
.draw-btn:active{transform:translateY(0);}
.draw-btn.hidden{display:none;}
.draw-btn-hint{
  font-size:10px;color:rgba(201,151,58,.4);letter-spacing:.15em;
  margin-top:8px;transition:opacity .4s;
}

/* 오행 탭 (공개 후 나타남) */
.ohaeng-tabs{
  display:none;
}
.ohaeng-tabs.visible{display:none;}
.card-section .tab-btn{
  padding:8px 14px;
  font-family:var(--serif);font-size:13px;letter-spacing:.12em;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.35);cursor:pointer;transition:all .22s;border-radius:1px;
}
.card-section .tab-btn span{display:block;font-size:8.5px;font-family:var(--sans);letter-spacing:.2em;opacity:.65;margin-top:2px;}
.card-section .tab-btn.active{
  color:var(--tab-c);border-color:var(--tab-c);
  background:linear-gradient(135deg,var(--tab-dim),transparent);
  box-shadow:0 0 12px var(--tab-glow);
}

/* 카드 정보 (공개 후) */
.card-info{
  text-align:center;margin-top:22px;
  display:none;
}
.card-info.visible{display:block;}
.ci-ilju{font-family:var(--serif);font-size:18px;font-weight:700;letter-spacing:.2em;color:#4CAF50;margin-bottom:4px;transition:color .4s;}
.ci-sub  {font-size:11px;color:rgba(76,175,80,.75);letter-spacing:.15em;margin-bottom:10px;transition:color .4s;}
.ci-body {font-size:13px;color:rgba(200,188,208,.7);line-height:1.95;font-weight:300;}
.ci-tags {display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin-top:11px;}
.ci-tag  {font-size:10px;color:var(--gold);border:1px solid rgba(201,151,58,.2);padding:3px 9px;background:rgba(201,151,58,.05);}

/* 상세 보기 힌트 */
.tap-hint{
  font-size:10px;color:rgba(201,151,58,.35);letter-spacing:.2em;margin-top:14px;
  display:none;
}
.tap-hint.visible{display:block;animation:hintBlink 2.5s ease-in-out infinite .8s;}
@keyframes hintBlink{0%,100%{opacity:.35}50%{opacity:.65}}

/* ══════════════════════════════
   모달 (상세 보기)
══════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:1100;
  background:rgba(4,2,12,.0);
  display:none;align-items:center;justify-content:center;
  pointer-events:none;
  transition:background .4s;
}
.modal-overlay.open{
  display:flex;
  background:rgba(4,2,12,.88);
  pointer-events:auto;
  backdrop-filter:blur(8px);
}
.modal-card{
  position:relative;
  width:clamp(260px,80vw,340px);
  transform:scale(.85) translateY(30px);
  opacity:0;
  transition:all .45s cubic-bezier(.23,1,.32,1);
  animation:none;
}
.modal-overlay.open .modal-card{
  transform:scale(1) translateY(0);
  opacity:1;
}

/* 모달 카드 — 크게 표시 */
.modal-flip{
  width:100%;aspect-ratio:2/3.2;
  border-radius:52% 52% 16px 16px / 28% 28% 16px 16px;overflow:hidden;
  box-shadow:0 30px 100px rgba(0,0,0,.85);
  position:relative;
}

/* 모달 내 캐릭터 + 배경 */
.modal-bg    {position:absolute;inset:0;z-index:0;transition:background .5s;}
.modal-bglow {position:absolute;inset:0;z-index:1;pointer-events:none;transition:background .5s;}
.modal-stars {
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.7) 1px,transparent 1px),
    radial-gradient(circle,rgba(255,255,255,.4) 1px,transparent 1px),
    radial-gradient(circle,rgba(255,255,255,.2) 1px,transparent 1px);
  background-size:110px 110px,70px 70px,45px 45px;
  background-position:14px 20px,38px 52px,24px 30px;
  animation:cardTwinkle 5s ease-in-out infinite;
}
.modal-char{
  position:absolute;inset:0;z-index:4;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:40%;
}
.modal-char-img{
  width:78%;max-height:68%;object-fit:contain;
}
.modal-top{
  position:absolute;top:0;left:0;right:0;z-index:5;
  padding:36px 16px 52px;
  background:linear-gradient(180deg,rgba(3,2,8,.92) 0%,rgba(3,2,8,.22) 55%,transparent 100%);
  text-align:center;
}
.mt-ilgan{font-family:var(--serif);font-size:11px;letter-spacing:.4em;font-weight:400;text-shadow:0 0 10px currentColor;transition:color .4s;}
.mt-num  {font-size:9px;color:rgba(255,255,255,.28);letter-spacing:.4em;margin-top:2px;}
.modal-bot{
  position:absolute;bottom:0;left:0;right:0;z-index:5;
  padding:55px 18px 18px;
  background:linear-gradient(0deg,rgba(3,2,8,.94) 0%,rgba(3,2,8,.5) 55%,transparent 100%);
  text-align:center;
}
.mb-sep  {width:52%;height:1px;margin:0 auto 6px;transition:background .4s;}
.mb-ilju {font-family:var(--serif);font-size:clamp(28px,8vw,44px);font-weight:700;color:var(--paper);letter-spacing:.25em;line-height:1;}
.mb-animal{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.22em;font-weight:300;margin-top:4px;}
.modal-frame{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  border-radius:52% 52% 16px 16px / 28% 28% 16px 16px;
  box-shadow:
    inset 0 0 0 1px rgba(201,151,58,.55),
    inset 0 0 0 4px rgba(201,151,58,.06),
    inset 0 0 0 5px rgba(201,151,58,.32),
    inset 0 0 0 9px rgba(201,151,58,.04),
    inset 0 0 0 10px rgba(201,151,58,.15);
}

/* 모달 하단 정보 */
.modal-info{
  background:rgba(6,4,14,.95);
  border:1px solid rgba(201,151,58,.15);
  border-top:none;border-radius:0 0 12px 12px;
  padding:20px 20px 16px;text-align:center;
}
.mi-ilju{font-family:var(--serif);font-size:17px;font-weight:700;letter-spacing:.2em;margin-bottom:4px;transition:color .4s;}
.mi-sub {font-size:11px;letter-spacing:.15em;margin-bottom:10px;opacity:.75;transition:color .4s;}
.mi-body{font-size:12px;color:rgba(200,188,208,.7);line-height:1.95;font-weight:300;}
.mi-tags{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin-top:10px;}
.mi-tag {font-size:10px;color:var(--gold);border:1px solid rgba(201,151,58,.2);padding:3px 8px;background:rgba(201,151,58,.05);}

/* 모달 닫기 */
.modal-close{
  position:absolute;top:-14px;right:-14px;
  width:34px;height:34px;border-radius:50%;
  background:rgba(10,6,20,.9);border:1px solid rgba(201,151,58,.3);
  color:rgba(201,151,58,.7);font-size:16px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;z-index:10;
}
.modal-close:hover{background:rgba(201,151,58,.15);color:var(--gold-light);}

/* 모달 오행 탭 */
.modal-tabs{
  display:none;
}
.modal-tab{
  padding:6px 12px;font-family:var(--serif);font-size:12px;letter-spacing:.1em;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.35);cursor:pointer;transition:all .2s;border-radius:1px;
}
.modal-tab span{display:block;font-size:8px;font-family:var(--sans);letter-spacing:.18em;opacity:.6;margin-top:1px;}
.modal-tab.active{color:var(--tab-c);border-color:var(--tab-c);background:linear-gradient(135deg,var(--tab-dim),transparent);}

/* ══════════════════════════════
   별똥별 + 이펙트 캔버스
══════════════════════════════ */
#modalShootCanvas{
  position:absolute;inset:-50px;
  width:calc(100% + 100px);height:calc(100% + 100px);
  z-index:8;pointer-events:none;
}
#modalFxCanvas{
  position:absolute;inset:-10px;
  width:calc(100% + 20px);height:calc(100% + 20px);
  z-index:7;pointer-events:none;
}

/* ── 자미두수란? 인포그래픽 12궁 미니 다이어그램 ── */
.ziwei-info-diagram { display:grid; grid-template-columns: repeat(4, 1fr); gap:4px; max-width:300px; margin:0 auto; }
.zid-cell { padding:8px 4px; text-align:center; font-size:11px; color:var(--mist-light); border:1px solid var(--border); background:rgba(255,255,255,.02); }
.zid-center { grid-column: 2 / 4; grid-row: 2 / 4; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:32px; color:var(--gold); border:1px solid rgba(201,151,58,.2); background:rgba(201,151,58,.04); }

/* ── 화면 전환 ── */
#screen-input  { display: block; }
#screen-result {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: var(--ink);
  z-index: 1000;
  display: none;
}
#screen-result.active {
  display: block;
  animation: screenFadeIn 0.6s ease both;
}
@keyframes screenFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ══ Track A: 궁합 CSS ══ */

/* ════════════════════════════════
   궁합 (Compatibility) CSS
   ════════════════════════════════ */

/* ── 관계 유형 칩 ── */
.relation-chips {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.relation-chip {
  padding: 8px 16px;
  border: 1px solid rgba(201,151,58,0.2);
  background: rgba(255,255,255,0.02);
  color: rgba(169,154,175,0.7);
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s;
}
.relation-chip:hover {
  border-color: rgba(201,151,58,0.4);
  color: rgba(245,239,230,0.8);
}
.relation-chip.active {
  border-color: rgba(201,151,58,0.6);
  background: rgba(201,151,58,0.1);
  color: var(--gold-light);
}

/* ── 관계 서브항목 ── */
.relation-subs {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.relation-sub {
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  color: rgba(169,154,175,0.6);
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}
.relation-sub:hover {
  border-color: rgba(201,151,58,0.3);
  color: rgba(245,239,230,0.7);
}
.relation-sub.active {
  border-color: rgba(201,151,58,0.4);
  background: rgba(201,151,58,0.08);
  color: #c9973a;
}

/* ── 궁합 결과 컨테이너 ── */
.compat-result {
}

/* ── 점수 히어로 ── */
.compat-hero {
  text-align: center;
  padding: 32px 20px 24px;
}
.compat-score-ring {
  position: relative;
  display: inline-block;
  width: 160px;
  height: 160px;
}
.compat-score-ring svg {
  width: 160px;
  height: 160px;
}
.compat-score-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: 52px;
  font-weight: 300;
  letter-spacing: -2px;
  font-family: 'Noto Serif KR', serif;
}
.compat-score-unit {
  font-size: 18px;
  font-weight: 300;
  opacity: 0.5;
  margin-left: 2px;
}
.compat-grade {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 2px;
  font-family: 'Noto Serif KR', serif;
}
.compat-judgement {
  margin-top: 10px;
  font-size: 14px;
  color: rgba(169,154,175,0.75);
  line-height: 1.6;
}

/* ── 궁합 유형 태그 ── */
.compat-type-tag {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 16px;
  border-radius: 20px;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.compat-type-flame {
  background: rgba(255,90,95,0.12);
  color: #ff7a7f;
  border: 1px solid rgba(255,90,95,0.25);
}
.compat-type-flow {
  background: rgba(74,144,226,0.12);
  color: #7ab8ff;
  border: 1px solid rgba(74,144,226,0.25);
}
.compat-type-stable {
  background: rgba(201,151,58,0.12);
  color: var(--gold-light);
  border: 1px solid rgba(201,151,58,0.25);
}
.compat-type-spark {
  background: rgba(180,120,255,0.12);
  color: #c4a0ff;
  border: 1px solid rgba(180,120,255,0.25);
}

/* ── 두 사람 나란히 비교 ── */
.compat-compare {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin: 20px 0 28px;
  padding: 24px 12px;
}
.compat-person-col {
  flex: 1;
  max-width: 130px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
}
.compat-person-name {
  font-size: 13px;
  color: rgba(245,239,230,0.7);
  font-weight: 400;
  letter-spacing: 0.5px;
}
.compat-person-char {
  font-size: 36px;
  font-weight: 300;
  font-family: 'Noto Serif KR', serif;
  line-height: 1.2;
}
.compat-person-info {
  font-size: 11px;
  color: rgba(169,154,175,0.6);
}
.compat-person-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
}

/* 관계 라인 중간 영역 */
.compat-vs {
  flex: 1.2;
  max-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
}
.compat-vs-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.compat-line {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  text-align: center;
  letter-spacing: 0.5px;
}
.compat-line-hap {
  background: rgba(74,124,106,0.2);
  color: #7bc4a5;
  border: 1px solid rgba(74,124,106,0.3);
}
.compat-line-chung {
  background: rgba(196,97,110,0.15);
  color: #e08a94;
  border: 1px solid rgba(196,97,110,0.25);
}
.compat-line-saeng {
  background: rgba(201,151,58,0.15);
  color: var(--gold-light);
  border: 1px solid rgba(201,151,58,0.25);
}
.compat-line-empty {
  font-size: 11px;
  color: rgba(169,154,175,0.5);
  text-align: center;
  padding: 8px;
}

/* ── 섹션 제목 (공통) ── */
.compat-section-title {
  font-size: 15px;
  font-weight: 400;
  color: rgba(201,151,58,0.75);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(201,151,58,0.1);
  letter-spacing: 1px;
  font-family: 'Noto Serif KR', serif;
}

/* ── 5항목 점수 게이지 바 ── */
.compat-scores-section {
  margin: 0 0 24px;
}
.compat-bar-item {
  margin-bottom: 14px;
}
.compat-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.compat-bar-label {
  font-size: 13px;
  color: rgba(245,239,230,0.8);
}
.compat-bar-score {
  font-size: 14px;
  font-weight: 300;
  font-family: 'Noto Serif KR', serif;
}
.compat-bar-track {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.compat-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1.2s ease-out;
}

/* ── 명리 분석 요약 ── */
.compat-mingli-section {
  margin: 0 0 24px;
}
.compat-mingli-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
}
.compat-mingli-icon {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  font-size: 13px;
}
.compat-mingli-text {
  color: rgba(169,154,175,0.75);
}
.compat-mingli-hap .compat-mingli-icon {
  color: #7bc4a5;
}
.compat-mingli-chung .compat-mingli-icon {
  color: #e08a94;
}
.compat-mingli-saeng .compat-mingli-icon {
  color: var(--gold-light);
}
.compat-mingli-neutral .compat-mingli-icon {
  color: rgba(169,154,175,0.6);
}

/* ── 현실 조언 텍스트 ── */
.compat-advice-text {
  font-size: 13px;
  line-height: 1.8;
  color: rgba(245,239,230,0.7);
}

/* ── 궁합 섹션 공통 설명 (card-narrative 통일) ── */
.compat-section-desc {
  font-size: var(--text-md);
  color: var(--paper);
  line-height: 1.8;
  padding: 0 4px;
  margin-bottom: var(--sp-lg);
}

/* ── 오행 비교 카드 안 카드 ── */
.compat-oheng-inner {
  padding: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(201,151,58,0.1);
  border-radius: 10px;
}

/* ── 십신 상호 분석 ── */
.compat-sipsin-section {
  margin: 0 0 24px;
}
.compat-sipsin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.compat-sipsin-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(201,151,58,0.12);
  border-radius: 10px;
  padding: 18px 14px;
  text-align: center;
}
.compat-sipsin-label {
  font-size: 11px;
  color: var(--mist);
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.compat-sipsin-emoji {
  font-size: 28px;
  margin-bottom: 6px;
}
.compat-sipsin-name {
  font-family: 'Noto Serif KR', serif;
  font-size: 16px;
  color: var(--gold-light);
  margin-bottom: 4px;
}
.compat-sipsin-short {
  font-size: 12px;
  color: var(--mist-light);
  margin-bottom: 8px;
}
.compat-sipsin-long {
  font-size: 11px;
  color: rgba(245,239,230,0.5);
  line-height: 1.6;
}

/* ── 오행 비교 차트 ── */
.compat-oheng-section {
  margin: 0 0 24px;
}
.compat-oh-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--mist);
  letter-spacing: 0.05em;
  margin: 14px 0 10px;
  padding: 0 38px;
}
.compat-oh-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.compat-oh-bar-left {
  flex: 1;
  height: 18px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px 0 0 3px;
  position: relative;
}
.compat-oh-fill-left {
  height: 100%;
  border-radius: 3px 0 0 3px;
  opacity: 0.7;
  position: absolute;
  right: 0;
  transition: width 0.8s ease-out;
}
.compat-oh-pct-left {
  font-size: 10px;
  color: var(--mist-light);
  width: 32px;
  text-align: right;
  flex-shrink: 0;
  line-height: 18px;
}
.compat-oh-label {
  width: 40px;
  text-align: center;
  font-family: 'Noto Serif KR', serif;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.compat-oh-bar-right {
  flex: 1;
  height: 18px;
  background: rgba(255,255,255,0.04);
  border-radius: 0 3px 3px 0;
  position: relative;
}
.compat-oh-fill-right {
  height: 100%;
  border-radius: 0 3px 3px 0;
  opacity: 0.7;
  position: absolute;
  left: 0;
  transition: width 0.8s ease-out;
}
.compat-oh-pct-right {
  font-size: 10px;
  color: var(--mist-light);
  width: 32px;
  text-align: left;
  flex-shrink: 0;
  line-height: 18px;
}

/* ── 올해의 궁합 운 ── */
.compat-forecast-section {
  margin: 0 0 24px;
}
.compat-forecast-outlook {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Noto Serif KR', serif;
  font-size: 16px;
  margin: 12px 0 8px;
}
.compat-forecast-summary {
  font-size: 13px;
  color: rgba(245,239,230,0.7);
  line-height: 1.7;
  margin-bottom: 12px;
}
.compat-forecast-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.compat-forecast-item {
  font-size: 12px;
  line-height: 1.5;
  padding: 6px 10px;
  border-radius: 4px;
}
.compat-forecast-item.good {
  color: var(--jade);
  background: rgba(74,124,106,0.1);
}
.compat-forecast-item.caution {
  color: var(--rose);
  background: rgba(196,97,110,0.1);
}

/* ── 조언 카드 강화 ── */
.compat-advice-item {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.6;
  padding: 8px 10px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.compat-advice-item.strength {
  color: rgba(245,239,230,0.7);
  background: rgba(74,124,106,0.08);
}
.compat-advice-item.weakness {
  color: rgba(245,239,230,0.7);
  background: rgba(196,97,110,0.08);
}
.compat-advice-icon {
  flex-shrink: 0;
  font-size: 14px;
}

/* ── AI 궁합 CTA ── */
.ai-cta-btn.compat {
  background: linear-gradient(135deg, rgba(196,97,110,0.15) 0%, rgba(201,151,58,0.15) 100%);
  border-color: rgba(196,97,110,0.25);
}
.ai-cta-btn.compat:hover {
  background: linear-gradient(135deg, rgba(196,97,110,0.25) 0%, rgba(201,151,58,0.25) 100%);
}

/* ── 공유 바 ── */
.compat-share-bar {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 20px 0 40px;
}

/* ── 모바일 반응형 (600px 이하) ── */
@media (max-width: 600px) {
  .compat-compare {
    padding: 16px 8px;
  }
  .compat-person-col {
    max-width: 100px;
  }
  .compat-person-char {
    font-size: 28px;
  }
  .compat-vs {
    max-width: 120px;
  }
  .compat-line {
    font-size: 10px;
    padding: 3px 8px;
  }
  .compat-score-ring {
    width: 140px;
    height: 140px;
  }
  .compat-score-ring svg {
    width: 140px;
    height: 140px;
  }
  .compat-score-number {
    font-size: 44px;
  }
  .relation-chips {
    gap: 6px;
  }
  .relation-chip {
    padding: 6px 12px;
    font-size: 12px;
  }
  .compat-sipsin-grid {
    grid-template-columns: 1fr;
  }
}

/* ══ Track B: 지장간/12운성 CSS ══ */

/* ═══════════════════════════════════════════════
   지장간 상세 블록 (P0 #8)
   ═══════════════════════════════════════════════ */
.jjg-detail-section { margin-top: 18px; }
.jjg-detail-section .section-sub {
  font-size: 12px;
  color: var(--mist-light);
  margin-bottom: 14px;
}
.jjg-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.jjg-pillar-col {
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
}
.jjg-pillar-label {
  font-size: 11px;
  color: var(--mist-light);
  margin-bottom: 8px;
  font-family: var(--sans);
}
.jjg-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.jjg-item:last-child { border-bottom: none; }
.jjg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  flex-shrink: 0;
}
.jjg-badge.wood { background: #7db86a; }
.jjg-badge.fire { background: #e07060; }
.jjg-badge.earth { background: #c8a44a; }
.jjg-badge.metal { background: #a0b8cc; color: var(--ink); }
.jjg-badge.water { background: #5a8ec4; }
.jjg-info {
  text-align: left;
  line-height: 1.3;
}
.jjg-oh-name {
  font-size: 10px;
  color: var(--mist-light);
}
.jjg-ss-name {
  font-size: 11px;
  color: var(--paper);
  font-weight: 500;
}
.jjg-weight-label {
  font-size: 9px;
  color: var(--mist);
  opacity: 0.7;
}
.jjg-empty {
  padding: 4px 0;
  font-size: 10px;
  color: var(--mist);
  opacity: 0.3;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.jjg-empty:last-child { border-bottom: none; }
.jjg-unknown {
  font-size: 11px;
  color: var(--mist);
  opacity: 0.4;
  padding: 16px 0;
}

/* ═══════════════════════════════════════════════
   12운성 상세 블록 + 에너지 게이지 (P0 #9)
   ═══════════════════════════════════════════════ */
.twelve-detail-section { margin-top: 18px; }
.twelve-detail-section .section-sub {
  font-size: 12px;
  color: var(--mist-light);
  margin-bottom: 14px;
}
.twelve-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.twelve-pillar-col {
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  padding: 12px 8px;
  text-align: center;
}
.twelve-pillar-label {
  font-size: 11px;
  color: var(--mist-light);
  margin-bottom: 6px;
  font-family: var(--sans);
}
.twelve-name {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--paper);
  font-weight: 600;
  margin-bottom: 8px;
}
.twelve-gauge-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.twelve-gauge-bar {
  height: 100%;
  border-radius: 3px;
  width: 0;
  transition: width 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.twelve-gauge-bar.high { background: linear-gradient(90deg, #C9A84C, #E8D48B); }
.twelve-gauge-bar.mid { background: linear-gradient(90deg, #8B5CF6, #A78BFA); }
.twelve-gauge-bar.low { background: linear-gradient(90deg, #475569, #64748B); }
.twelve-pct {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
}
.twelve-pct.high { color: #E8D48B; }
.twelve-pct.mid { color: #A78BFA; }
.twelve-pct.low { color: #64748B; }
.twelve-desc {
  font-size: 10px;
  color: var(--mist-light);
  line-height: 1.4;
}
.twelve-unknown {
  font-size: 11px;
  color: var(--mist);
  opacity: 0.4;
  padding: 16px 0;
}

/* ═══════════════════════════════════════════════
   암합(暗合) 카드
   ═══════════════════════════════════════════════ */
.anhap-section { margin-top: 14px; }
.anhap-section .section-title {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 10px;
}
.anhap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.anhap-card {
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-radius: 8px;
  padding: 12px;
}
.anhap-card .anhap-type {
  font-size: 11px;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 4px;
}
.anhap-card .anhap-pair {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--paper);
  margin-bottom: 4px;
}
.anhap-card .anhap-result {
  font-size: 11px;
  color: var(--mist-light);
  margin-bottom: 4px;
}
.anhap-card .anhap-desc {
  font-size: 11px;
  color: var(--mist);
  line-height: 1.4;
}

/* ── 반응형: 4열 → 2열 (모바일) ── */
@media (max-width: 480px) {
  .jjg-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .twelve-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .anhap-grid { grid-template-columns: 1fr; }
}
/* ══ Track D: 크로스트랙 CSS ══ */
/* 대운 지장간 교차 태그 */
.dw-cross{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin-top:5px}
.dw-cross-tag{font-family:var(--sans);font-size:10px;padding:1px 5px;border-radius:2px;letter-spacing:.03em}
.dw-cross-tag.hap{color:#c9973a;background:rgba(201,151,58,.12);border:1px solid rgba(201,151,58,.25)}
.dw-cross-tag.chung{color:#c4616e;background:rgba(196,97,110,.1);border:1px solid rgba(196,97,110,.25)}

/* 전생 카드 공유 버튼 */
.btn-past-share{display:inline-flex;align-items:center;padding:10px 24px;font-family:var(--sans);font-size:14px;color:var(--gold-light);background:rgba(201,151,58,.08);border:1px solid rgba(201,151,58,.3);border-radius:4px;cursor:pointer;transition:all .3s;letter-spacing:.03em}
.btn-past-share:hover{background:rgba(201,151,58,.15);border-color:rgba(201,151,58,.5)}

/* ══ 내러티브 리드 ══ */
/* 각 카드 상단에 친근한 1~2문장 요약을 표시하는 영역 */
.card-narrative{font-size:var(--text-md);color:var(--paper);line-height:1.8;padding:0;margin-bottom:var(--sp-lg)}
.card-divider-thin{height:1px;background:var(--border);margin:16px 0}

/* ══ 테마 선택 (원본 카드 — 스크롤 전 표시) ══ */
.theme-selector {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px;
  padding:8px 0;
}
.theme-card { border:1px solid var(--border); border-radius:4px; padding:14px 8px; text-align:center; cursor:pointer; }
.theme-card:hover, .theme-card.active { border-color:rgba(201,151,58,0.3); background:rgba(201,151,58,0.05); }
.theme-icon { display:block; font-size:22px; margin-bottom:6px; }
.theme-name { font-size:12px; color:var(--mist-light); }
.theme-card.active .theme-name { color:var(--gold-light); }
/* ══ 테마 compact 바 (스크롤 시 고정, 별도 요소) ══ */
.theme-bar {
  display:none; position:sticky; top:45px; z-index:40;
  width:calc(100% + 32px); margin-left:-16px; margin-right:-16px;
  background:rgba(14,8,16,.92);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
}
.theme-bar.visible { display:flex; }
.theme-bar-btn {
  flex:1; padding:10px 4px;
  background:transparent; border:none; border-bottom:2px solid transparent;
  color:var(--mist); font-family:var(--sans); font-size:12px;
  letter-spacing:0.05em; cursor:pointer; text-align:center;
}
.theme-bar-btn.active { color:var(--gold-light); border-bottom-color:var(--gold); }
.theme-content { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ══ 접기/펼치기 ══ */
.fold-section { margin-bottom:12px; }
.fold-toggle { width:100%; background:none; border:1px dashed rgba(201,151,58,0.2); border-radius:4px; padding:14px 16px; cursor:pointer; text-align:left; color:rgba(201,151,58,0.6); font-size:12px; font-family:var(--sans); display:flex; align-items:center; gap:8px; transition:all 0.3s; }
.fold-toggle:hover { border-color:rgba(201,151,58,0.4); background:rgba(201,151,58,0.03); }
.fold-arrow { transition:transform 0.3s; }
.fold-section.open .fold-arrow { transform:rotate(180deg); }
.fold-sub { font-size:10px; color:rgba(169,154,175,0.5); margin-left:auto; }
.fold-content { display:none; padding-top:8px; }
.fold-section.open .fold-content { display:block; }

/* ══ DO/DON'T 카드 ══ */
.do-header { display:flex; align-items:center; gap:8px; margin:14px 0 8px; font-size:11px; letter-spacing:0.1em; }
.do-header::after { content:''; flex:1; height:1px; background:currentColor; opacity:0.2; }
.do-header.do { color:var(--jade); }
.do-header.dont { color:var(--rose); }
.action-item { border:1px solid rgba(74,124,106,0.2); border-radius:4px; padding:12px 14px; margin-bottom:6px; display:flex; gap:10px; align-items:flex-start; background:rgba(74,124,106,0.08); }
.action-item.caution { border-color:rgba(196,97,110,0.2); background:rgba(196,97,110,0.08); }
.action-icon { font-size:16px; flex-shrink:0; margin-top:1px; }
.action-text { font-size:12px; line-height:1.7; color:var(--mist-light); }
.action-text strong { color:var(--paper); }

/* ══ 럭키 아이템 그리드 ══ */
.lucky-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.lucky-item { text-align:center; padding:12px 8px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); border-radius:4px; }
.lucky-icon { font-size:20px; margin-bottom:4px; }
.lucky-label { font-size:10px; color:var(--mist); margin-bottom:2px; }
.lucky-value { font-size:12px; color:var(--gold-light); }

/* ══ 다음 행동 유도 ══ */
.next-action-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:20px 0; }
.next-action-btn { background:rgba(169,154,175,0.05); border:1px solid rgba(169,154,175,0.2); border-radius:4px; padding:12px; font-size:11px; color:var(--mist); cursor:pointer; font-family:var(--sans); transition:all 0.3s; }
.next-action-btn:hover { border-color:rgba(201,151,58,0.3); color:var(--gold-light); }

/* ══ 스토리 히어로 추가 테마 ══ */
.story-hero.health { background:linear-gradient(135deg,rgba(74,124,106,.09) 0%,rgba(14,8,16,0) 65%); border-color:rgba(74,124,106,.22); }
.story-hero.health::before { background:linear-gradient(90deg,transparent,var(--jade),transparent); }
.story-hero.move { background:linear-gradient(135deg,rgba(169,154,175,.09) 0%,rgba(14,8,16,0) 65%); border-color:rgba(169,154,175,.22); }
.story-hero.move::before { background:linear-gradient(90deg,transparent,var(--mist),transparent); }
.story-hero.pastlife { background:linear-gradient(135deg,rgba(169,154,175,.09) 0%,rgba(14,8,16,0) 65%); border-color:rgba(169,154,175,.22); }
.story-hero.pastlife::before { background:linear-gradient(90deg,transparent,var(--mist),transparent); }
.sh-icon { font-size:28px; margin-bottom:10px; display:block; }
.sh-title { font-family:var(--sans); font-size:20px; font-weight:700; letter-spacing:.08em; margin-bottom:5px; color:var(--paper); }
.sh-headline { font-family:var(--serif); font-size:16px; line-height:1.8; color:var(--paper); margin-bottom:14px; font-style:italic; }
.sh-body { font-family:var(--sans); font-size:14px; color:var(--mist-light); line-height:1.95; font-weight:300; }

@media (max-width: 600px) {
  .lucky-grid { grid-template-columns:repeat(2,1fr); }
}

/* ══ 사주 상담 채팅 패널 ══ */
.chat-panel-overlay {
  display:none; position:fixed; inset:0; z-index:1100;
  background:var(--ink); overflow-y:auto; overflow-x:hidden;
}
.chat-panel {
  max-width:560px; margin:0 auto; padding:16px;
  min-height:100vh; display:flex; flex-direction:column;
  box-sizing:border-box; width:100%;
}
.chat-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid rgba(201,151,58,0.15); margin-bottom:20px;
}
.chat-header-title {
  font-family:var(--serif); font-size:15px; color:rgba(201,151,58,0.9); letter-spacing:0.1em;
}
.chat-close { background:none; border:none; color:rgba(169,154,175,0.6); font-size:18px; cursor:pointer; }
.example-chips {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;
}
.example-chip {
  font-size:12px; color:rgba(201,151,58,0.8); background:rgba(201,151,58,0.06);
  border:1px solid rgba(201,151,58,0.2); border-radius:20px;
  padding:6px 14px; cursor:pointer; transition:all 0.3s;
  font-family:var(--sans);
}
.example-chip:hover { background:rgba(201,151,58,0.12); border-color:rgba(201,151,58,0.4); }
.chat-cards { flex:1; display:flex; flex-direction:column; gap:16px; margin-bottom:20px; }
.qa-card {
  border:1px solid rgba(201,151,58,0.12); border-radius:2px;
  background:rgba(255,255,255,0.02); overflow:hidden;
  max-width:100%; box-sizing:border-box;
}
.qa-question {
  padding:12px 16px; background:rgba(201,151,58,0.04);
  border-bottom:1px solid rgba(201,151,58,0.08);
  font-size:13px; color:rgba(201,151,58,0.9); font-weight:400;
  display:flex; align-items:flex-start; gap:8px;
}
.qa-question::before {
  content:'Q'; font-weight:600; font-size:11px; color:rgba(201,151,58,0.5);
  flex-shrink:0; margin-top:1px;
}
.qa-answer {
  padding:16px; font-size:13px; color:rgba(245,239,230,0.85);
  line-height:1.85; font-weight:300;
  word-break:break-word; overflow-wrap:break-word;
}
.qa-card.loading .qa-answer {
  color:rgba(201,151,58,0.5); font-style:italic;
  animation: pulse 1.5s ease infinite;
}
@keyframes pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }
.chat-input-area {
  position:sticky; bottom:0; padding:12px 0;
  background:rgba(14,8,16,0.95); backdrop-filter:blur(16px);
  border-top:1px solid rgba(201,151,58,0.1);
  box-sizing:border-box; max-width:100%;
}
.chat-input-row { display:flex; gap:8px; max-width:100%; box-sizing:border-box; }
.chat-input {
  flex:1; min-width:0; background:rgba(255,255,255,0.04); border:1px solid rgba(201,151,58,0.15);
  border-radius:2px; padding:12px 14px; color:#f5efe6; font-size:16px;
  font-family:var(--sans); outline:none; transition:border-color 0.3s;
  box-sizing:border-box;
}
.chat-input::placeholder { color:rgba(169,154,175,0.4); }
.chat-input:focus { border-color:rgba(201,151,58,0.4); }
.chat-send {
  padding:12px 16px; background:rgba(201,151,58,0.1); border:1px solid rgba(201,151,58,0.3);
  color:rgba(201,151,58,0.9); font-size:13px; cursor:pointer; border-radius:2px;
  font-family:var(--sans); transition:all 0.3s; white-space:nowrap;
  flex-shrink:0; box-sizing:border-box;
}
.chat-send:hover { background:rgba(201,151,58,0.2); }
/* 상담 패널 안의 AI 결과 스타일 재활용 */
.qa-answer .ai-title { font-family:var(--serif); font-size:14px; color:rgba(201,151,58,0.85); margin-bottom:12px; line-height:1.6; }
.qa-answer .ai-subtitle { font-family:var(--serif); font-size:13px; color:rgba(201,151,58,0.75); margin:14px 0 6px; letter-spacing:0.05em; }
.qa-answer .ai-section { margin-bottom:8px; }
.qa-answer .ai-section p { margin-bottom:6px; }

/* 상담 진입 버튼 (AI 분석 결과 하단) */
.chat-entry-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px; margin-top:12px;
  background:rgba(201,151,58,0.06); border:1px solid rgba(201,151,58,0.25);
  border-radius:2px; color:rgba(201,151,58,0.85); font-size:13px;
  font-family:var(--sans); cursor:pointer; transition:all 0.3s; letter-spacing:0.05em;
}
.chat-entry-btn:hover { background:rgba(201,151,58,0.12); border-color:rgba(201,151,58,0.4); }

/* ══════════════════════════════════════════════════
   디자인 시스템 — 공통 컴포넌트 클래스
   render-*.js 인라인 스타일 대체용
   ══════════════════════════════════════════════════ */

/* 분석 블록: 좌측 컬러 보더 + 배경 (연애/재물/건강 해석 등) */
.ab { padding:var(--sp-md) var(--sp-lg); border-radius:2px; border-left:3px solid var(--gold); background:var(--bg-gold); margin-bottom:var(--sp-md); }
.ab.rose { border-left-color:var(--rose); background:var(--bg-rose); }
.ab.jade { border-left-color:var(--jade); background:var(--bg-jade); }
.ab.mist { border-left-color:var(--mist); background:rgba(138,122,143,0.04); }
.ab-title { font-size:var(--text-md); font-weight:600; color:var(--gold-light); margin-bottom:var(--sp-xs); }
/* 분석 블록 제목 — 부모 색상 자동 상속 */
.ab.jade .ab-title { color:var(--jade); }
.ab.rose .ab-title { color:var(--rose-light); }
.ab.mist .ab-title { color:var(--mist-light); }
.ab-desc { font-size:var(--text-sm); color:var(--mist-light); line-height:1.75; }

/* 정보 그리드: 2열 카드 배치 (삼방, 궁 정보 등) */
.ig { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-sm); margin-bottom:var(--sp-lg); }
.ig-cell { padding:var(--sp-md); border:1px solid var(--border); background:var(--bg-subtle); border-radius:2px; }
.ig-label { font-size:var(--text-xs); color:var(--mist); margin-bottom:var(--sp-xs); }
.ig-value { font-size:var(--text-sm); font-weight:600; color:var(--paper); }
.ig-sub { font-size:var(--text-xs); color:var(--mist); margin-top:2px; }

/* 본문/설명 텍스트 */
.t-body { font-size:var(--text-md); color:var(--paper); line-height:1.8; margin-bottom:var(--sp-lg); }
.t-desc { font-size:var(--text-sm); color:var(--mist-light); line-height:1.75; margin-bottom:var(--sp-md); }
.t-sub { font-size:var(--text-xs); color:var(--mist); font-weight:300; }
.t-title { font-size:var(--text-md); font-weight:600; color:var(--gold-light); margin-bottom:var(--sp-xs); }
.t-section-title { font-size:var(--text-sm); font-weight:600; color:var(--paper); margin-bottom:var(--sp-sm); }

/* 태그/뱃지 */
.ds-tag { font-size:var(--text-xs); padding:var(--sp-xs) var(--sp-md); border-radius:12px; border:1px solid rgba(201,151,58,0.25); color:var(--gold); display:inline-block; }
.ds-tag.rose { border-color:rgba(196,97,110,0.3); color:var(--rose-light); }
.ds-tag.jade { border-color:rgba(74,124,106,0.3); color:var(--jade-light); }
.ds-tag.mist { border-color:rgba(138,122,143,0.3); color:var(--mist-light); }
.ds-tag.square { border-radius:2px; }

/* 텍스트 유틸 */
.text-center { text-align:center; }
.lh-loose { line-height:2; }
.lh-snug { line-height:1.65; }
.ml-sm { margin-left:var(--sp-sm); }
.ml-xs { margin-left:var(--sp-xs); }
.mr-sm { margin-right:var(--sp-sm); }
.fw-bold { font-weight:700; }

/* 대운 건강 차트: 현재 대운 라벨 */
.dw-now-label { color:var(--gold-light); margin-left:var(--sp-sm); font-weight:700; }

/* 십성 태그 (대운 건강 차트) */
.ss-tag { font-size:11px; margin-left:4px; }

/* 분석 블록 아이콘 (스트레스 카드) */
.analysis-icon { font-size:16px; margin-right:8px; }

/* 계절 현재 뱃지 */
.season-now-badge { color:var(--gold-light); font-size:11px; font-weight:700; }

/* 플렉스 유틸 */
.fx { display:flex; }
.fx-wrap { display:flex; flex-wrap:wrap; }
.fx-col { display:flex; flex-direction:column; }
.fx-center { align-items:center; }
.fx-between { justify-content:space-between; }
.gap-xs { gap:var(--sp-xs); }
.gap-sm { gap:var(--sp-sm); }
.gap-md { gap:var(--sp-md); }
.gap-lg { gap:var(--sp-lg); }

/* 마진 유틸 */
.mb-xs { margin-bottom:var(--sp-xs); }
.mb-sm { margin-bottom:var(--sp-sm); }
.mb-md { margin-bottom:var(--sp-md); }
.mb-lg { margin-bottom:var(--sp-lg); }
.mb-xl { margin-bottom:var(--sp-xl); }
.mt-xs { margin-top:var(--sp-xs); }
.mt-sm { margin-top:var(--sp-sm); }
.mt-md { margin-top:var(--sp-md); }
.mt-lg { margin-top:var(--sp-lg); }

/* 색상 유틸 */
.c-jade { color:var(--jade); }
.c-jade-light { color:var(--jade-light); }
.c-rose { color:var(--rose); }
.c-rose-light { color:var(--rose-light); }
.c-mist { color:var(--mist); }
.c-mist-light { color:var(--mist-light); }
.c-gold { color:var(--gold); }
.c-gold-light { color:var(--gold-light); }
.d-block { display:block; }

/* 지장간 교차분석 (세운/대운 cross) */
.cross-hap { color:#c9973a; font-weight:600; }
.cross-chung { color:#c4616e; font-weight:600; }
.cross-summary { margin-top:var(--sp-sm); font-size:var(--text-sm); color:var(--mist-light); }
.cross-detail { margin-top:var(--sp-xs); font-size:var(--text-xs); color:var(--mist); }
.cross-detail-row { margin-bottom:2px; }

/* 격국 특수격 뱃지 */
.gyeokguk-special { color:var(--rose-light); font-size:var(--text-xs); margin-left:var(--sp-sm); }

/* overview-kv 수정자 */
.overview-kv.no-border { border-bottom:none; }

/* ── 히스토리 아이템 공통 ── */
.history-item { padding:14px 16px; border:1px solid var(--border-gold); border-radius:2px; background:var(--bg-subtle); transition:all 0.3s; }
.history-item:hover { border-color:var(--border-gold-hover); background:rgba(201,151,58,0.05); }
.history-item-inner { display:flex; align-items:center; gap:14px; cursor:pointer; }
.history-icon { font-size:24px; width:40px; text-align:center; }
.history-body { flex:1; }
.history-name { font-family:var(--serif); font-size:14px; color:var(--gold-light); margin-bottom:4px; }
.history-meta { font-size:var(--text-xs); color:var(--mist); letter-spacing:0.05em; }
.history-action { font-size:var(--text-xs); color:var(--gold); opacity:0.6; }
.history-footer { display:flex; justify-content:flex-end; margin-top:8px; padding-top:8px; border-top:1px solid rgba(201,151,58,0.08); }
.history-fill-btn { background:none; border:1px solid rgba(201,151,58,0.25); border-radius:2px; color:var(--mist-light); font-size:11px; padding:4px 12px; cursor:pointer; font-family:var(--sans); letter-spacing:0.05em; transition:all 0.3s; }
.history-fill-btn:hover { border-color:rgba(201,151,58,0.5); color:var(--gold-light); }
.history-empty { text-align:center; padding:20px; color:var(--mist); font-size:12px; }

/* ── 궁합 히스토리 아이템 ── */
/* compat-history: 사주 기록과 동일 스타일 사용 (history-item-inner 등) */

/* ── 상대방 기록 불러오기 패널 아이템 ── */
.partner-history-item { padding:10px 12px; border:1px solid var(--border); border-radius:2px; margin-bottom:6px; cursor:pointer; font-size:12px; color:var(--mist-light); transition:all 0.3s; }
.partner-history-item:hover { border-color:rgba(201,151,58,0.3); }

/* ── 신살 태그 설명 ── */
.sinsal-tag-desc { font-size:11px; opacity:0.85; margin-top:2px; }
.sinsal-tag-desc.good { color:var(--jade); }
.sinsal-tag-desc.bad { color:var(--rose-light); }
.sinsal-empty { grid-column:1/-1; text-align:center; opacity:0.5; }

/* ── 자미두수 삼방사정 그리드 셀 ── */
.zw-sb-cell { padding:10px 12px; border:1px solid var(--border); background:var(--bg-subtle); }
.zw-sb-label { font-size:11px; color:var(--mist); margin-bottom:4px; }
.zw-sb-name { font-size:13px; font-weight:600; color:var(--paper); margin-bottom:2px; }
.zw-sb-stars { font-size:12px; color:var(--gold-light); }
.zw-sb-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:var(--sp-lg); }
.zw-sb-verdict { font-size:14px; color:var(--mist-light); line-height:1.9; }

/* ── 자미두수 잡요 심화 분석 ── */
.zw-adj-section { margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.zw-adj-heading { font-size:13px; color:var(--mist); margin-bottom:12px; letter-spacing:.05em; }
.zw-adj-item { display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; padding:10px 12px; border-left:2px solid var(--border); background:var(--bg-subtle); border-radius:0 4px 4px 0; }
.zw-adj-icon { font-size:18px; flex-shrink:0; margin-top:2px; }
.zw-adj-title { font-size:13px; font-weight:600; color:var(--gold-light); margin-bottom:3px; }
.zw-adj-tag { font-size:11px; color:var(--mist); font-weight:400; }
.zw-adj-desc { font-size:13px; color:var(--mist-light); line-height:1.8; }

/* ── 자미두수 insight-box 내부 ── */
.ib-heading { margin-bottom:12px; font-size:13px; color:var(--mist-light); line-height:1.8; }
.ib-heading strong { color:var(--gold-light); }
.ib-body { font-size:14px; color:var(--mist-light); line-height:1.9; }
strong.gold { color:var(--gold-light); }
strong.rose { color:var(--rose-light); }

/* ── 궁합 바 점수 단위 ── */
.compat-bar-unit { font-size:11px; opacity:0.5; }

/* ── 궁합 오행 비교 소제목 ── */
.compat-oh-ko { font-size:10px; opacity:0.7; }

/* ── 궁합 연간운세 아이콘 ── */
.compat-forecast-icon { font-size:20px; }

/* ── 궁합 조언 텍스트 여백 ── */
.compat-advice-text { margin-top:var(--sp-lg); }

/* ── 궁합 DO/DON'T 사이 여백 ── */
.compat-action-spacer { margin-top:var(--sp-lg); }

/* ── 만세력 카드 내러티브 여백 ── */
.card-narrative.mb-sm { margin:8px 0 12px; }

/* ── 만세력 시간모름 배지 낮은 투명도 ── */
.manse-cell .ss-badge.dim { opacity:0.4; }
.manse-cell .cheon.dim, .manse-cell .ji.dim { opacity:0.25; }
.manse-cell .ji-badge.mt-3 { margin-top:3px; }

/* ── 건강 탭: 대운별 건강 차트 & 스트레스 카드 & 계절별 팁 ── */
.health-bar-wrap { position:relative; height:22px; background:rgba(255,255,255,.04); border-radius:1px; overflow:hidden; }
.health-bar { width:0%; height:100%; border-radius:1px; transition:width 0.8s ease; }
.health-bar.safe { background:linear-gradient(90deg, rgba(74,124,106,0.3), rgba(74,124,106,0.6)); }
.health-bar.mid { background:linear-gradient(90deg, rgba(201,151,58,0.2), rgba(201,151,58,0.4)); }
.health-bar.warn { background:linear-gradient(90deg, rgba(196,97,110,0.25), rgba(196,97,110,0.5)); }

/* 스트레스 카드: 별점 */
.stress-stars { letter-spacing:.08em; font-size:14px; }

/* 계절별 건강 팁 */
.season-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.season-item { padding:14px; border:1px solid var(--border); background:rgba(255,255,255,.02); border-radius:1px; transition:all .3s; }
.season-item:hover { border-color:rgba(201,151,58,.3); }
.season-item.now { border:2px solid var(--gold); }
.season-label { font-family:var(--sans); font-size:13px; font-weight:700; color:var(--paper); margin-bottom:6px; }
.season-organ { font-size:12px; color:var(--mist-light); margin-bottom:4px; }
.season-risk { font-size:11px; font-weight:700; }
.season-tip { font-size:12px; color:var(--mist-light); line-height:1.65; margin-top:6px; }

@media (max-width:480px) {
  .season-grid { grid-template-columns:1fr; }
}

/* ── 변화 탭: 타임라인 태그 (tl-tag) ── */
.tl-tags { display:inline-flex; gap:4px; flex-wrap:wrap; }
.tl-tag { font-size:10px; padding:2px 6px; border-radius:1px; font-weight:600; }
.tl-tag.chung { background:rgba(196,97,110,.12); color:var(--rose-light); }
.tl-tag.yongsin { background:rgba(74,124,106,.12); color:var(--jade-light); }
.tl-tag.ohaeng { background:rgba(201,151,58,.1); color:var(--gold-light); }
.tl-tag.now-tag { background:rgba(201,151,58,.2); color:var(--gold-light); font-weight:700; }

/* ── 변화 탭: 신살 시너지 맵 ── */
.synergy-grid { display:grid; grid-template-columns:1fr; gap:10px; }
.synergy-item { padding:14px; border:1px solid var(--border); background:rgba(255,255,255,.02); border-radius:1px; transition:all .3s; }
.synergy-item:hover { border-color:rgba(201,151,58,.3); }
.synergy-item.active { border:2px solid var(--gold); background:rgba(201,151,58,.04); }
.synergy-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.synergy-pair { font-family:var(--sans); font-size:14px; font-weight:700; color:var(--paper); }
.synergy-name { font-size:12px; color:var(--gold-light); font-weight:600; }
.synergy-status { font-size:10px; padding:2px 6px; border-radius:1px; font-weight:700; margin-left:auto; }
.synergy-status.on { background:rgba(74,124,106,.15); color:var(--jade-light); }
.synergy-status.off { background:rgba(155,155,155,.1); color:var(--mist); }
.synergy-status.past { background:rgba(155,155,155,.08); color:var(--mist); }
.synergy-item.past { opacity:0.5; }
.synergy-desc { font-family:var(--sans); font-size:13px; color:var(--mist-light); line-height:1.8; font-weight:300; }
.synergy-timing { padding:8px 10px; margin-top:8px; background:rgba(201,151,58,.05); border:1px solid rgba(201,151,58,.12); border-radius:1px; font-family:var(--sans); font-size:12px; color:var(--mist-light); line-height:1.65; }
.synergy-timing strong { color:var(--gold-light); font-weight:600; }

/* ── 인라인 스타일 → CSS 클래스 전환 ──
   Issue #10: 반응형 속성이 인라인에 있으면 미디어쿼리 적용 불가 → 클래스로 분리 */

/* 결과 화면 — GNB 공간 확보 + 탭바 sticky 위치 */
@media (min-width: 768px) {
  #screen-result > .page { padding-top: 80px; }
  #screen-result .result-nav { top: 56px; }
  #screen-result .theme-bar { top: 101px; }

  /* PC sticky: 배경만 뷰포트 전체로 확장, 버튼 영역은 원래 위치 유지 */
  .result-nav.stuck {
    background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-color: transparent;
    overflow: visible;
  }
  .result-nav.stuck::before {
    content: '';
    position: absolute; top: 0; bottom: 0;
    left: 50%; width: 100vw; transform: translateX(-50%);
    background: rgba(14,8,16,.9);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    z-index: -1;
  }
  .theme-bar.visible {
    background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: none;
    overflow: visible;
  }
  .theme-bar.visible::before {
    content: '';
    position: absolute; top: 0; bottom: 0;
    left: 50%; width: 100vw; transform: translateX(-50%);
    background: rgba(14,8,16,.92);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border);
    z-index: -1;
  }
}
@media (max-width: 767px) {
  #screen-result > .page { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  /* 모바일 결과 헤더 표시 + 하위 sticky 요소 top 조정 */
  #screen-result .result-header { display:flex; }
  #screen-result .result-nav { top:41px; }
  #screen-result .theme-bar { top:86px; }
}

/* 뒤로가기 버튼 래퍼 + 버튼 */
.back-wrap {
  position: relative;
  z-index: 2;
  padding: 16px 0 0;
}
.back-btn {
  background: transparent;
  border: 1px solid rgba(201,151,58,0.3);
  color: var(--gold);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  padding: 8px 20px;
  cursor: pointer;
  border-radius: 1px;
  transition: all 0.3s;
}
.back-btn:hover {
  background: rgba(201,151,58,0.1);
}

/* 폼 카드 헤더 (상대방 정보, 관계 유형 등) */
.form-card-header {
  text-align: center;
  margin-bottom: 16px;
}
.form-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gold-light);
}
.form-card-desc {
  font-size: 11px;
  color: var(--mist);
}
.form-card-history-btn {
  margin-top: 8px;
  font-size: 11px;
  color: var(--mist-light);
  border-color: rgba(201,151,58,0.25);
}

/* 라벨 옆 (선택) 표시 */
.label-optional {
  font-size: 10px;
  color: var(--mist);
  font-weight: 300;
  letter-spacing: 0.1em;
}

/* 히스토리 삭제 등 톤다운 pill 버튼 */
.pill--muted {
  font-size: 11px;
  color: var(--mist);
  border-color: rgba(138,122,143,0.3);
}

/* 히어로 구분선 아이콘 */
.hero-divider-icon {
  color: var(--gold);
  font-size: 13px;
}

/* 헤더 하위 기능 태그 (사주명리 · 자미두수 · 전생 인연) */
.header-sub-feature {
  font-size: 11px;
  opacity: 0.6;
}

/* 결과 힌트 변형 */
.result-hint--main {
  margin-top: 40px;
}
.result-hint--social {
  margin-top: 12px;
  opacity: 0.4;
  font-size: 11px;
}

/* 분석 카드 아이콘 크기 변형 */
.ac-icon--md { font-size: 24px; }
.ac-icon--lg { font-size: 28px; letter-spacing: -2px; }

/* 공유 개인정보 안내 */
.share-privacy-note {
  text-align: center;
  margin-top: 12px;
  font-size: 11px;
  color: var(--mist);
  opacity: 0.5;
  letter-spacing: 0.05em;
}

/* 종합 태그 중앙 정렬 변형 */
.overview-tags--centered {
  justify-content: center;
  margin-top: 12px;
}

/* 폼 구분선 넓은 여백 변형 */
.form-divider--wide {
  margin: 20px 0 16px;
}

/* 카드 스크린(일주 카드 뽑기) 레이아웃 */
.card-screen-page {
  padding-top: 30px;
}
.card-screen-back {
  text-align: center;
  margin-bottom: 16px;
}
.pill--back {
  font-size: 12px;
}

/* 자미두수 소개 섹션 — 인라인 스타일 → 클래스 전환 */
.ziwei-intro-desc {
  margin-bottom: 16px;
}
.ziwei-intro-header {
  text-align: center;
  margin-bottom: 20px;
}
.ziwei-intro-chinese {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--gold);
  margin-bottom: 8px;
}
.ziwei-intro-origin {
  font-size: 13px;
  color: var(--mist);
  line-height: 1.7;
}

/* 사주 vs 자미두수 비교 섹션 */
.ziwei-compare-section {
  margin-top: 20px;
}
.ziwei-compare-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 14px;
}
.ziwei-compare-desc {
  font-size: 13px;
  color: var(--mist-light);
  line-height: 1.8;
  margin-bottom: 16px;
}
.text-paper {
  color: var(--paper);
}

/* 사주 vs 자미두수 비교 테이블 */
.ziwei-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ziwei-compare-table tr {
  border-bottom: 1px solid var(--border);
}
.ziwei-compare-table tr.compare-last-row {
  border-bottom: none;
}
.compare-td {
  padding: 10px 8px;
}
.compare-label {
  color: var(--mist);
}
.compare-head {
  color: var(--gold);
  font-weight: 600;
}
.compare-value {
  color: var(--mist-light);
}

/* 섹션 라벨 — 토글 포함 시 한 줄 유지, 금선 뒤에 토글 */
.section-label--wrap {
  flex-wrap: nowrap;
  gap: 6px;
}
.section-label--wrap::after {
  order: 1;
}
.section-label--wrap .toggle-switch--right {
  order: 2;
  margin-left: 0;
}
.section-label--wrap .toggle-label {
  order: 3;
}

/* 토글 스위치 우측 정렬 */
.toggle-switch--right {
  margin-left: auto;
}

/* 시간 입력 2열 그리드 (시/분) */
.date-row--half {
  grid-template-columns: 1fr 1fr;
}

/* pill 그룹 — 시간 선택용 (균등 분할) */
.pill-group--spaced {
  margin-bottom: 12px;
}
.pill-group--spaced .pill {
  flex: 1;
  text-align: center;
}
/* pill 텍스트 반응형: PC=풀텍스트, MO=짧은텍스트 */
.pill-short { display: none; }
@media (max-width: 480px) {
  .pill-full { display: none; }
  .pill-short { display: inline; }
}

/* 카드 구분선 좁은 여백 변형 */
.card-divider-thin--compact {
  margin: 14px 0;
}

/* 클릭 가능한 카드 타이틀 (토글용) */
.card-title--clickable {
  cursor: pointer;
}
.card-title-arrow {
  float: right;
  transition: transform 0.3s;
}

/* 오행 레이더 차트 SVG */
.ohaeng-radar-svg {
  width: 100%;
  max-width: 420px;
  display: block;
  margin: 0 auto;
  overflow: visible;
}

/* insight-box 상단 여백 변형 */
.insight-box--spaced {
  margin-top: 14px;
}

/* ══════════════════════════════════════════════════
   GNB — PC 상단 고정 / MO 하단 탭바
   ══════════════════════════════════════════════════ */

/* ── PC 상단 GNB ── */
.gnb-pc {
  display: none; /* 모바일에서 숨김, PC에서 표시 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: rgba(14, 8, 16, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.gnb-pc-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
}
.gnb-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.gnb-logo-chinese {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--gold);
}
.gnb-logo-text {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--paper);
  letter-spacing: 0.1em;
}
.gnb-pc-nav {
  display: flex;
  gap: 4px;
}
.gnb-pc-tab {
  background: none;
  border: none;
  color: var(--mist);
  font-family: var(--sans);
  font-size: var(--text-sm);
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.3s, background 0.3s;
}
.gnb-pc-tab:hover {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.05);
}
.gnb-pc-tab.active {
  color: var(--gold);
  background: rgba(201, 151, 58, 0.08);
}

/* ── MO 하단 탭바 ── */
.gnb-mo {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: rgba(14, 8, 16, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  padding: 6px 0;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
}
.gnb-mo-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--mist);
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.3s;
}
.gnb-mo-tab.active {
  color: var(--gold);
}
.gnb-mo-icon {
  font-size: 20px;
  line-height: 1;
}
.gnb-mo-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
}
.gnb-mo-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gnb-mo-center-icon {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--gold);
  opacity: 0.6;
}

/* PC에서 상단 GNB 표시, 하단 탭바 숨김 */
@media (min-width: 768px) {
  .gnb-pc { display: block; }
  .gnb-mo { display: none; }
  /* 상단 패딩: GNB 높이(52px) + 여유 공간 */
  .screen > .page { padding-top: 80px; }
}

/* MO에서 상단/하단 패딩 (하단 탭바 높이만큼) */
@media (max-width: 767px) {
  .screen > .page { padding-top: 8px; padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}

/* ── 화면 공통 ── */
.screen {
  position: relative;
  min-height: 100vh;
}
.screen > .page {
  align-items: stretch;
}

/* ══════════════════════════════════════════════════
   홈 화면
   ══════════════════════════════════════════════════ */
.home-intro { text-align: center; padding-top: 40px; }
.home-intro-header { margin-bottom: 32px; }
.home-intro-eyebrow { font-family: var(--sans); font-size: 11px; letter-spacing: 0.4em; color: var(--gold); margin-bottom: 12px; opacity: 0.85; }
.home-intro-chinese { font-family: var(--serif); font-size: 64px; color: var(--gold); margin-bottom: 8px; }
.home-intro-title { font-family: var(--serif); font-size: 28px; color: var(--paper); letter-spacing: 0.12em; margin-bottom: 8px; }
.home-intro-subtitle { font-family: var(--sans); font-size: var(--text-sm); color: var(--mist); letter-spacing: 0.15em; }
.home-intro-divider { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 24px 0; }
.home-intro-desc { font-family: var(--serif); font-size: var(--text-lg); color: var(--mist-light); line-height: 2; margin-bottom: 32px; }
.home-cta-btn { width: 100%; max-width: 320px; margin: 0 auto 40px; display: block; background: linear-gradient(135deg, rgba(201,151,58,0.15), rgba(201,151,58,0.05)); border: 1px solid var(--border-gold); border-radius: 8px; padding: 14px 24px; cursor: pointer; transition: border-color 0.3s, background 0.3s; }
.home-cta-btn:hover { border-color: var(--border-gold-hover); background: linear-gradient(135deg, rgba(201,151,58,0.2), rgba(201,151,58,0.08)); }
.home-cta-btn .btn-inner { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--gold); font-family: var(--serif); font-size: var(--text-md); letter-spacing: 0.1em; }
.home-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 400px; margin: 0 auto; }
.home-feature { text-align: center; padding: 20px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; }
.home-feature-icon { font-size: 28px; display: block; margin-bottom: 8px; }
.home-feature-title { font-family: var(--serif); font-size: var(--text-md); color: var(--paper); margin-bottom: 4px; }
.home-feature-desc { font-size: var(--text-xs); color: var(--mist); }

/* 오늘의 운세 (홈) */
.home-fortune { padding-top: 40px; }
.home-fortune-header { text-align: center; margin-bottom: 24px; }
.home-fortune-greeting { font-family: var(--serif); font-size: var(--text-xl); color: var(--paper); letter-spacing: 0.1em; margin-bottom: 8px; }
.home-fortune-ilju { font-family: var(--sans); font-size: var(--text-sm); color: var(--mist); letter-spacing: 0.1em; }
.home-fortune-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 16px; }
.home-fortune-period { font-size: var(--text-xs); color: var(--mist); letter-spacing: 0.06em; margin-bottom: 8px; }
.home-fortune-ganji { font-family: var(--serif); font-size: var(--text-md); color: var(--gold); margin-bottom: 6px; }
.home-fortune-theme { font-size: var(--text-md); color: var(--paper); margin-bottom: 6px; }
.home-fortune-tip { font-size: var(--text-sm); color: var(--mist-light); line-height: 1.7; }
.home-fortune-actions { display: flex; justify-content: center; margin: 24px 0; }
/* 홈 탭 바 */
.home-tab-bar { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.home-tab { flex: 1; padding: 12px 0 10px; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; text-align: center; transition: border-color 0.3s, color 0.3s; }
.home-tab.active { border-bottom-color: var(--gold); }
.home-tab-label { display: block; font-family: var(--serif); font-size: var(--text-md); color: var(--mist); transition: color 0.3s; }
.home-tab.active .home-tab-label { color: var(--gold); }
.home-tab-sub { display: block; font-size: 11px; color: var(--mist); margin-top: 2px; opacity: 0.6; }
.home-tab.active .home-tab-sub { opacity: 1; }
/* 탭 컨텐츠 */
.home-tab-content { display: none; }
.home-tab-content.active { display: block; }
/* 기간 요약 (간지 + 십성 + 테마) */
.home-period-summary { text-align: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.home-period-ganji { font-family: var(--serif); font-size: var(--text-md); color: var(--gold); margin-bottom: 4px; }
.home-period-theme { font-size: var(--text-md); color: var(--paper); }
/* 테마별 카드 그리드 */
.home-theme-grid { display: flex; flex-direction: column; gap: 10px; }
.home-theme-card { padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; }
.home-theme-label { font-size: 12px; color: var(--gold); font-weight: 600; margin-bottom: 6px; letter-spacing: 0.04em; }
.home-theme-text { font-size: var(--text-sm); color: var(--mist-light); line-height: 1.7; }
.home-theme-card--ziwei { border-color: rgba(155,89,182,0.15); }
.home-theme-card--ziwei .home-theme-label { color: #9B59B6; }
/* 점수 요약 */
.home-score-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; }
.home-score-ring { position: relative; flex-shrink: 0; width: 72px; height: 72px; }
.home-score-num { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--serif); font-size: 20px; font-weight: 700; }
.home-score-text { flex: 1; min-width: 0; }
.home-score-grade { font-size: 12px; color: var(--mist-light); line-height: 1.6; margin-top: 4px; }
.home-action-btn { background: none; border: 1px solid var(--border-gold); border-radius: 6px; padding: 10px 20px; color: var(--gold); font-family: var(--sans); font-size: var(--text-sm); cursor: pointer; transition: background 0.3s; }
.home-action-btn:hover { background: rgba(201,151,58,0.08); }

/* ══════════════════════════════════════════════════
   분석 화면
   ══════════════════════════════════════════════════ */
.analyze-type-header { font-family: var(--serif); font-size: var(--text-xl); color: var(--paper); text-align: center; margin: 40px 0 24px; letter-spacing: 0.1em; }
.analyze-type-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 32px; }
.analyze-type-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer; transition: border-color 0.3s, background 0.3s; }
.analyze-type-card:hover { border-color: var(--border-gold); }
.analyze-type-card.selected { border-color: var(--gold); background: rgba(201,151,58,0.06); }
.analyze-type-icon { font-size: 28px; flex-shrink: 0; }
.analyze-type-title { font-family: var(--serif); font-size: var(--text-md); color: var(--paper); margin-bottom: 2px; }
.analyze-type-desc { font-size: var(--text-xs); color: var(--mist); }

.analyze-need-persons { text-align: center; padding: 24px; color: var(--mist); font-size: var(--text-sm); }
.analyze-need-persons p { margin-bottom: 16px; }

.analyze-person-header { font-family: var(--serif); font-size: var(--text-md); color: var(--paper); margin: 24px 0 12px; letter-spacing: 0.06em; }
.analyze-person-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.analyze-person-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color 0.3s; }
.analyze-person-item:hover { border-color: var(--border-gold); }
.analyze-person-item.selected { border-color: var(--gold); background: rgba(201,151,58,0.06); }
.analyze-person-icon { font-size: 24px; flex-shrink: 0; }
.analyze-person-info { flex: 1; min-width: 0; }
.analyze-person-name { font-family: var(--sans); font-size: var(--text-md); color: var(--paper); font-weight: 400; }
.analyze-person-meta { font-size: var(--text-xs); color: var(--mist); margin-top: 2px; }
.analyze-person-arrow { color: var(--mist); font-size: var(--text-sm); }
.analyze-self-badge { display: inline-block; background: rgba(201,151,58,0.15); color: var(--gold); font-size: 10px; padding: 1px 6px; border-radius: 3px; margin-left: 4px; }
.analyze-add-btn { display: block; width: 100%; padding: 12px; background: none; border: 1px dashed var(--border); border-radius: 8px; color: var(--mist); font-family: var(--sans); font-size: var(--text-sm); cursor: pointer; transition: border-color 0.3s, color 0.3s; }
.analyze-add-btn:hover { border-color: var(--gold); color: var(--gold); }
.analyze-ziwei-notice { background: rgba(201,151,58,0.08); border: 1px solid rgba(201,151,58,0.2); border-radius: 6px; padding: 10px 14px; font-size: var(--text-xs); color: var(--gold-light); margin-bottom: 16px; }
.analyze-compat-relation { margin-top: 16px; }

/* ══════════════════════════════════════════════════
   내사람 화면
   ══════════════════════════════════════════════════ */
.persons-header { font-family: var(--serif); font-size: var(--text-xl); color: var(--paper); text-align: center; margin: 40px 0 24px; letter-spacing: 0.1em; }
.persons-empty { text-align: center; padding: 40px 20px; color: var(--mist); font-size: var(--text-sm); }
.persons-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.persons-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; }
.persons-item-main { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.persons-item-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
.persons-item-info { flex: 1; min-width: 0; }
.persons-item-name { font-family: var(--sans); font-size: var(--text-md); color: var(--paper); font-weight: 400; margin-bottom: 2px; }
.persons-item-detail { font-family: var(--serif); font-size: var(--text-sm); color: var(--gold); margin-bottom: 2px; }
.persons-item-meta { font-size: var(--text-xs); color: var(--mist); }
/* 수정/삭제 → 카드 우측 상단 */
.persons-item-top-actions { position: absolute; top: 10px; right: 12px; display: flex; gap: 6px; }
.persons-edit-btn, .persons-delete-btn { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; font-size: 11px; font-family: var(--sans); cursor: pointer; transition: border-color 0.3s, color 0.3s; }
.persons-edit-btn { color: var(--mist-light); }
.persons-edit-btn:hover { border-color: var(--gold); color: var(--gold); }
.persons-delete-btn { color: var(--rose); border-color: rgba(196,97,110,0.2); }
.persons-delete-btn:hover { border-color: var(--rose); }
/* 빠른 분석 버튼 */
.persons-item-shortcuts { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.persons-shortcut-btn { flex: 1; padding: 7px 0; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 4px; color: var(--mist-light); font-family: var(--sans); font-size: 12px; cursor: pointer; transition: border-color 0.3s, color 0.3s, background 0.3s; text-align: center; }
.persons-shortcut-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,151,58,0.04); }
.persons-shortcut-btn:active { background: rgba(201,151,58,0.08); }
.persons-shortcut-compat { color: var(--rose-light,#d4828c); border-color: rgba(196,97,110,0.2); }
.persons-shortcut-compat:hover { border-color: var(--rose); color: var(--rose); background: rgba(196,97,110,0.04); }
.persons-self-badge { display: inline-block; background: rgba(201,151,58,0.15); color: var(--gold); font-size: 10px; padding: 1px 6px; border-radius: 3px; margin-left: 4px; }
.persons-add-btn { display: block; width: 100%; padding: 14px; background: none; border: 1px dashed var(--border); border-radius: 8px; color: var(--mist); font-family: var(--sans); font-size: var(--text-sm); cursor: pointer; transition: border-color 0.3s, color 0.3s; margin-bottom: 20px; }
.persons-add-btn:hover { border-color: var(--gold); color: var(--gold); }
.persons-form-header { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; }
.persons-back-btn { background: none; border: none; color: var(--mist); font-family: var(--sans); font-size: var(--text-sm); cursor: pointer; padding: 4px 0; }
.persons-back-btn:hover { color: var(--paper); }
.persons-form-title { font-family: var(--serif); font-size: var(--text-md); color: var(--paper); letter-spacing: 0.06em; }

/* ══════════════════════════════════════════════════
   프로필 화면
   ══════════════════════════════════════════════════ */
.profile-login-prompt { text-align: center; padding: 60px 20px 40px; }
.profile-login-icon { font-size: 40px; margin-bottom: 16px; }
.profile-login-title { font-family: var(--serif); font-size: var(--text-lg); color: var(--paper); margin-bottom: 12px; line-height: 1.6; }
.profile-login-desc { font-size: var(--text-sm); color: var(--mist); margin-bottom: 24px; line-height: 1.7; }
.profile-kakao-btn { display: block; margin: 0 auto; padding: 12px 32px; font-size: var(--text-md); }
.profile-header { text-align: center; padding: 40px 0 24px; }
.profile-avatar { display: inline-block; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; margin-bottom: 12px; border: 2px solid var(--border-gold); }
.profile-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 32px; background: var(--bg-card); }
.profile-nickname { font-family: var(--serif); font-size: var(--text-lg); color: var(--paper); }
.profile-user-id { font-size: 11px; color: var(--mist); margin-top: 4px; letter-spacing: 0.02em; user-select: all; }
.profile-section { border-top: 1px solid var(--border); padding: 8px 0; }
.profile-menu-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; color: var(--mist-light); font-size: var(--text-md); transition: color 0.3s; }
.profile-menu-item:hover { color: var(--paper); }
.profile-menu-icon { font-size: 18px; }
.profile-menu-badge { margin-left: auto; font-size: var(--text-xs); color: var(--mist); background: var(--bg-card); padding: 2px 8px; border-radius: 4px; }
.profile-menu-disabled { opacity: 0.5; cursor: default; }
.profile-menu-disabled:hover { color: var(--mist-light); }
.profile-logout-btn { display: block; width: 100%; padding: 14px; background: none; border: 1px solid rgba(196,97,110,0.2); border-radius: 6px; color: var(--rose); font-family: var(--sans); font-size: var(--text-sm); cursor: pointer; margin: 8px 0; transition: border-color 0.3s; }
.profile-logout-btn:hover { border-color: var(--rose); }