:root {
    --type-body:14px;
    --type-secondary:12px;
    --type-meta:11px;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0;
    background: #eceef1;
    font-family: "Pretendard", -apple-system, "SF Pro Display", "Apple SD Gothic Neo", "Noto Sans CJK KR", sans-serif;
    color: #1d1d1f;
    overflow-x: hidden;
    min-height: 100vh;
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:var(--type-body);
  }
  .wrap { max-width: 640px; width:100%; margin: 0 auto; padding: 24px 20px 50px; overflow-x: hidden; }

  /* Brand hero */

  .home-header .mark { display:flex; justify-content:center; gap:8px; margin-bottom:14px; flex-wrap:nowrap; }
  .home-header .mark span {
    width: 30px; height: 30px; display:flex; align-items:center; justify-content:center;
  }
  #screen-home .home-header .mark span {
    --mark-order:0;
    animation-name:homeMarkEnter, homeMarkWave;
    animation-duration:.48s, 6s;
    animation-timing-function:cubic-bezier(.2,.8,.2,1), ease-in-out;
    animation-delay:calc(var(--mark-order) * 70ms), calc(1.45s + var(--mark-order) * 95ms);
    animation-iteration-count:1, infinite;
    animation-fill-mode:both, none;
    will-change:transform, opacity;
  }
  #screen-home .home-header .mark span:nth-child(2) { --mark-order:1; }
  #screen-home .home-header .mark span:nth-child(3) { --mark-order:2; }
  #screen-home .home-header .mark span:nth-child(4) { --mark-order:3; }
  #screen-home .home-header .mark span:nth-child(5) { --mark-order:4; }
  /* @keyframes homeMarkEnter는 사주/궁합 탭 상단 아이콘 모션과 함께 index.html 인라인으로 이동함
     (홈 화면 마크 아이콘도 이 keyframes를 그대로 재사용) */
  @keyframes homeMarkWave {
    0%, 12%, 100% { transform:translateY(0) scale(1); }
    5% { transform:translateY(-3px) scale(1.03); }
  }
  .home-header .mark img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 2px rgba(63,53,76,.14)); }
  .home-header h1 {
    font-size: 26px; font-weight: 800; margin: 0; letter-spacing: -0.5px;
    background: linear-gradient(135deg, #5e5ce6, #ff375f);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  }
  .home-header p { font-size: 13px; color: #86868b; margin-top: 8px; }

  /* Auth (마이페이지 화면 안에 위치) */
  .auth-logged-out { display:flex; flex-direction:column; gap:8px; }
  .login-options-inline { display:flex; flex-direction:column; gap:8px; }
  .social-btn {
    display:flex; align-items:center; justify-content:center; gap:7px; padding:13px 14px; border-radius:12px; border:1px solid #e5e5ea;
    background:#fff; font-size:13px; font-weight:700; color:#3c4043; cursor:pointer;
    box-shadow:0 2px 6px rgba(0,0,0,0.04);
  }
  .social-kakao { background:#FEE500; border-color:#FEE500; color:#191919; }
  .auth-logged-in { display:flex; align-items:center; gap:8px; font-size:11.5px; color:#8e8e93; }
  .logout-link { background:none; border:none; font-size:11px; color:#8e8e93; text-decoration:underline; cursor:pointer; padding:2px; }

  .signup-gate {
    margin-top:14px; padding:16px; border-radius:14px; background:linear-gradient(135deg,#f7f5ff,#fff5f8);
    text-align:center;
  }
  .signup-gate p { font-size:12.5px; color:#3a3a3c; margin:0 0 12px 0; line-height:1.5; }
  .signup-gate .login-options-inline { align-items:center; }

  /* Input form */
  .form-card {
    background:#fff; border-radius:16px; padding:14px 16px; margin-bottom:14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
  }
  /* 카드 상단→오행과 오행→제목의 간격을 각각 16px로 맞춰 소개 영역의 수직 균형을 잡습니다. */
  .solo-intro {
    text-align:center; padding:2px 8px 12px; margin-bottom:0;
  }
  /* 홈의 일렬 오행 마크와 다른 역할이 보이도록 목→화→토→금→수 순환 오비트로 배치합니다. */
  .solo-intro-elements {
    position:relative; display:block; width:128px; height:78px; margin:0 auto 16px;
  }
  .solo-intro-elements::before {
    content:''; position:absolute; left:18px; top:9px; width:92px; height:58px;
    border:1px solid rgba(112,101,198,.16); border-radius:50%;
    background:transparent; pointer-events:none; animation:soloOrbitRing 6s ease-in-out infinite;
  }
  .solo-intro-elements::after {
    content:''; position:absolute; z-index:0; left:50%; top:50%; width:54px; height:40px;
    transform:translate(-50%,-50%); border-radius:50%;
    background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.94) 0 7%,rgba(174,105,224,.56) 17%,rgba(224,128,199,.34) 38%,rgba(192,151,235,.16) 58%,rgba(241,220,236,0) 76%);
    box-shadow:0 0 12px rgba(166,116,218,.14),0 0 20px rgba(225,146,196,.08);
    filter:blur(2px); opacity:.78; pointer-events:none; animation:soloOrbitCore 6s ease-in-out infinite;
  }
  .solo-intro-elements span {
    position:absolute; z-index:1; width:24px; height:24px; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:10.5px; font-weight:800; background:transparent; box-shadow:none;
    opacity:.78;
  }
  .solo-intro-elements .sie-wood  { left:52px; top:0; --toward-x:0px; --toward-y:2px; }
  .solo-intro-elements .sie-fire  { left:92px; top:18px; --toward-x:-2px; --toward-y:1px; }
  .solo-intro-elements .sie-earth { left:76px; top:52px; --toward-x:-1.5px; --toward-y:-1.5px; }
  .solo-intro-elements .sie-metal { left:28px; top:52px; --toward-x:1.5px; --toward-y:-1.5px; }
  .solo-intro-elements .sie-water { left:12px; top:18px; --toward-x:2px; --toward-y:1px; }
  /* 작은 크기에서도 실루엣은 남기되 제목보다 먼저 튀지 않도록 채도와 그림자를 낮춥니다. */
  .solo-intro-elements img {
    width:24px; height:24px; object-fit:contain;
    filter:saturate(.82) brightness(1.04) drop-shadow(0 1px 2px rgba(63,53,76,.08));
  }
  /* 금 오브는 하이라이트가 흰 배경과 색이 가까워서, 옅은 회색 테두리를 CSS로만 얹어 흰 카드
     배경에서도 경계가 또렷하게 보이게 함(이미지 자체엔 테두리를 굽지 않음). drop-shadow는
     box-shadow와 달리 spread를 지원하지 않아서, 작은 blur를 두 겹 겹쳐 테두리 느낌을 냄 */
  .solo-intro-elements .sie-metal img {
    filter:saturate(.78) brightness(1.03) drop-shadow(0 1px 2px rgba(63,53,76,.08)) drop-shadow(0 0 1px rgba(142,142,147,.55));
  }
  .solo-intro-kicker { font-size:10.5px; font-weight:800; color:#5e5ce6; letter-spacing:1.2px; margin-bottom:5px; }
  /* .solo-intro h2의 샤인 애니메이션 버전은 index.html 인라인으로 옮겨졌음.
     예전에 쓰던 단순 그라데이션 버전이 여기 남아있으면, 이 파일(비동기 로딩)이 인라인 스타일보다
     문서상 뒤에 있어 같은 우선순위에서 이 낡은 규칙이 덮어써버려 샤인 효과가 안 보이는 문제가 생김 */
  .solo-intro p { max-width:390px; margin:9px auto 0; font-size:12.5px; line-height:1.55; color:#6e6e73; }
  .solo-intro-benefits { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:12px; }
  .solo-intro-benefits span {
    padding:5px 9px; border-radius:999px; background:#f4f2ff; color:#5e5ce6; font-size:10px; font-weight:700;
  }
  .field { margin-bottom: 11px; }
  .field label { display:block; font-size:10.5px; font-weight:700; color:#6e6e73; margin-bottom:5px; }
  .field input, .field select {
    width:100%; height:40px; padding:0 8px; border-radius:9px; border:1px solid #e5e5ea;
    font-size:12.5px; background:#f9f9fb; font-family:inherit; min-width:0; box-sizing:border-box;
    touch-action:manipulation; /* 혹시 남아있을 수 있는 탭 반응 지연 요소 제거(방어적 조치) */
  }
  .field input:disabled { background:#ececee; color:#b0b0b6; cursor:not-allowed; }
  .grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:6px; }
  .grid3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:5px; }
  .grid2 select, .grid3 select { width:100%; min-width:0; }
  .time-row { align-items:center; }
  .check-inline {
    display:flex; align-items:center; gap:6px; font-size:11.5px; color:#6e6e73; height:40px; box-sizing:border-box;
    background:#f9f9fb; border:1px solid #e5e5ea; border-radius:9px; padding:0 8px; cursor:pointer;
  }
  .check-inline input { width:auto; margin:0; flex-shrink:0; }
  .check-inline span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .field label.check-inline { display:flex; margin-bottom:0; } /* .field label의 display:block보다 우선하도록 */
  .submit-btn {
    width:100%; padding:11px; border:none; border-radius:11px; font-size:13.5px; font-weight:700;
    color:#fff; background:linear-gradient(135deg,#5e5ce6,#ff375f); cursor:pointer;
  }
  .submit-btn:disabled { opacity:0.6; cursor:default; }
  .submit-btn-lg { padding:20px; font-size:15px; border-radius:14px; }
  .submit-btn-secondary {
    background:#f0eefc; color:#5e5ce6; padding:10px; font-size:13px; box-shadow:none;
  }

  .status { text-align:center; font-size:13px; color:#86868b; margin: 10px 0; min-height: 18px; }
  .status:empty { margin:0; min-height:0; } /* 메시지 없을 때(평소) 버튼 아래 불필요한 빈 공간 제거 */
  .toast {
    position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(16px);
    background:#1d1d1f; color:#fff; padding:13px 20px; border-radius:14px; font-size:13px; font-weight:600;
    max-width:86%; text-align:center; line-height:1.4; box-shadow:0 10px 30px rgba(0,0,0,0.22);
    opacity:0; pointer-events:none; transition:opacity 0.28s ease, transform 0.28s ease; z-index:9999;
  }
  .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

  .me-picker-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:2000;
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .me-picker-card {
    background:#fff; border-radius:20px; padding:28px 22px; max-width:340px; width:100%; text-align:center;
  }
  .me-picker-card .mp-icon { font-size:32px; margin-bottom:10px; }
  .me-picker-card h3 { font-size:15px; font-weight:800; color:#1d1d1f; margin:0 0 8px; }
  .me-picker-card p { font-size:12.5px; color:#6e6e73; line-height:1.5; margin:0 0 18px; }
  .me-picker-chips { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
  .me-picker-chip {
    padding:13px; border-radius:12px; border:1.5px solid #ece7ff; background:#f9f9ff;
    color:#5e5ce6; font-size:13.5px; font-weight:700; cursor:pointer;
  }
  .me-picker-skip { background:none; border:none; font-size:12px; color:#a1a1a6; text-decoration:underline; cursor:pointer; padding:6px; }

  .tf-modal-card { background:#fff; border-radius:20px; padding:24px 22px 22px; max-width:340px; width:100%; text-align:center; position:relative; }

  /* window.confirm()/prompt()는 iOS/Android 브라우저 기본 UI가 그대로 노출되어 앱과 어울리지 않으므로,
     iOS 표준 알림창 크기(270px)를 참고해 앱 톤에 맞춘 커스텀 확인창으로 통일함 (js/ui-helpers.js의
     showConfirmModal / showShareLinkModal 참고) */
  .confirm-modal-card { background:#fff; border-radius:16px; width:270px; max-width:88vw; text-align:center; overflow:hidden; }
  .confirm-modal-title { margin:20px 18px 6px; font-size:15px; font-weight:800; color:#1d1d1f; line-height:1.35; }
  .confirm-modal-message { margin:0 18px 18px; font-size:12.5px; line-height:1.5; color:#6e6e73; }
  .confirm-modal-message:empty { display:none; margin:0 0 18px; }
  .confirm-modal-actions { display:flex; border-top:1px solid #e5e5ea; }
  .confirm-modal-btn {
    flex:1; padding:13px 0; border:none; background:#fff; font-size:14.5px; font-weight:600; color:#5e5ce6;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .confirm-modal-btn + .confirm-modal-btn { border-left:1px solid #e5e5ea; }
  .confirm-modal-btn-primary { font-weight:800; }
  .confirm-modal-btn-danger { color:#ff3b30; font-weight:800; }
  .share-link-box {
    margin:0 18px 18px; padding:10px 12px; border-radius:10px; background:#f5f5f7;
    font-size:11.5px; color:#3a3a3c; word-break:break-all; user-select:all; text-align:left;
  }

  .privacy-modal-card {
    background:#fff; border-radius:20px; padding:24px 22px 22px; max-width:440px; width:100%;
    position:relative; max-height:80vh; overflow-y:auto; text-align:left;
  }
  .privacy-modal-title { font-size:16px; font-weight:800; margin:0 0 14px; color:#1d1d1f; }
  .privacy-modal-body { font-size:12.5px; line-height:1.6; color:#3a3a3c; }
  .privacy-modal-body h4 { font-size:13px; font-weight:800; color:#1d1d1f; margin:16px 0 6px; }
  .privacy-modal-body ul { margin:0 0 8px; padding-left:18px; }
  .privacy-modal-body li { margin-bottom:4px; }
  .privacy-modal-body p { margin:0 0 8px; }
  .privacy-updated { color:#8a8a92; font-size:11.5px; }
  .login-consent-note { font-size:11px; color:#a1a1a6; text-align:center; margin-top:10px; }
  .privacy-link { color:#5e5ce6; text-decoration:underline; cursor:pointer; }
  .mypage-footer-links { text-align:center; margin-top:8px; }
  .mypage-footer-links .privacy-link {
    appearance:none; -webkit-appearance:none; padding:0; border:0; background:none; font:inherit;
    font-size:12px; color:#a1a1a6; text-decoration:none;
  }
  .mypage-footer-links > span { margin:0 6px; color:#d1d1d6; }
  .tf-modal-close {
    position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:50%; border:none;
    background:#f2f2f4; color:#8e8e93; font-size:13px; cursor:pointer;
  }
  .tf-modal-avatar {
    width:52px; height:52px; margin:0 auto 10px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    overflow:hidden; font-size:19px; font-weight:800; color:#fff; background:linear-gradient(135deg,#5e5ce6,#ff375f);
  }
  .tf-modal-avatar img { width:100%; height:100%; display:block; object-fit:cover; }
  .tf-modal-name { font-size:14px; font-weight:800; color:#1d1d1f; }
  .tf-modal-body { font-size:13px; color:#3a3a3c; line-height:1.6; margin:14px 0 4px; text-align:left; min-height:40px; }
  .sipseong-caption { font-size:11px; color:#8a8a92; margin:3px 0 8px; line-height:1.5; }
  .tf-modal-body b { display:block; font-size:12px; color:#5e5ce6; margin-bottom:6px; }
  .tf-modal-loading { text-align:center; color:#a1a1a6; font-size:12.5px; padding:16px 0; }
  .tf-modal-full-btn { margin-top:14px; width:100%; padding:12px; font-size:13px; }
  .tf-modal-body .fortune-motion-stage { margin:2px 0 4px; }

  /* 오늘의 운세 팝업 전용 짧은 뽑기 모션 */
  .fm-quick-circle {
    width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:24px; background:linear-gradient(135deg,#5e5ce6,#ff375f); color:#fff;
    transform:scale(0.6); opacity:0; transition:transform 0.35s cubic-bezier(.34,1.56,.64,1), opacity 0.25s ease;
  }
  .fm-quick-circle.fm-quick-pop { transform:scale(1); opacity:1; }
  .fm-quick-ring {
    position:absolute; top:50%; left:50%; width:56px; height:56px; border-radius:50%; border:2px solid rgba(94,92,230,0.5);
    transform:translate(-50%,-50%) scale(1); opacity:0.9; transition:transform 0.5s ease-out, opacity 0.5s ease-out;
  }
  .fm-quick-ring.fm-quick-expand { transform:translate(-50%,-50%) scale(2.5); opacity:0; }

  /* 공통 클라이맥스 효과(컨페티) — 오늘의 운세 팝업, 나중엔 리포트 모션에서도 재사용 */
  .confetti-piece {
    position:absolute; top:50%; left:50%; width:6px; height:10px; border-radius:2px;
    transform: translate(-50%,-50%) rotate(var(--fm-angle)) translateX(0) rotate(0deg);
    opacity:1; animation: confettiFly 0.85s cubic-bezier(.25,.8,.35,1) forwards;
  }
  .confetti-piece.confetti-round { border-radius:50%; width:7px; height:7px; }
  @keyframes confettiFly {
    0% { transform: translate(-50%,-50%) rotate(var(--fm-angle)) translateX(0) rotate(0deg); opacity:1; }
    65% { opacity:1; }
    100% { transform: translate(-50%,-50%) rotate(var(--fm-angle)) translateX(var(--fm-dist)) rotate(var(--fm-spin)); opacity:0; }
  }

  .fm-idle-avatar {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-58%);
    width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:20px; font-weight:800; color:#fff;
    background:linear-gradient(135deg,#5e5ce6,#ff375f);
    animation:fmIdleBreathe 2.4s ease-in-out infinite;
  }
  .loading-dots { display:inline-flex; gap:3px; margin-left:6px; vertical-align:middle; }
  .loading-dots span {
    width:5px; height:5px; border-radius:50%; background:#8e8e93; display:inline-block;
    animation: loadingDotPulse 1.2s ease-in-out infinite;
  }
  .loading-dots span:nth-child(2) { animation-delay: 0.15s; }
  .loading-dots span:nth-child(3) { animation-delay: 0.3s; }
  @keyframes loadingDotPulse { 0%,80%,100% { transform:scale(0.6); opacity:0.4; } 40% { transform:scale(1); opacity:1; } }

  /* 타로 전용 로딩 표시 — 사주/궁합의 점 3개 바운스와 다르게, 별이 은은하게 회전+깜빡이는 모션 */
  .tarot-loading-spin {
    display:inline-block; margin-left:7px; color:#f5d78e; vertical-align:middle;
    animation: tarotLoadingSpin 1.1s linear infinite;
  }
  @keyframes tarotLoadingSpin {
    0% { transform:rotate(0deg) scale(0.85); opacity:0.55; }
    50% { transform:rotate(180deg) scale(1.05); opacity:1; }
    100% { transform:rotate(360deg) scale(0.85); opacity:0.55; }
  }

  /* Report (reuses established design system) */
  #report-area { display:none; }
  .sample-notice {
    background:#fff8e1; border:1px solid #ffd54f; color:#7a5c00; font-size:11.5px; line-height:1.5;
    border-radius:12px; padding:10px 14px; margin-bottom:10px; display:none;
  }
  .page { width:100%; background:#f5f5f7; border-radius:20px; padding: 26px 22px; }
  .header { text-align: center; padding: 4mm 0 6mm 0; }
  .header .eyebrow {
    font-size: 11px; letter-spacing: 2px; color: #86868b;
    text-transform: uppercase; font-weight: 600; margin-bottom: 8px;
  }
  .header h2 {
    font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -0.5px;
  }
  .header h2 svg { width:100%; max-width:360px; height:32px; }
  .header .sub { font-size: 13px; color: #86868b; margin-top: 8px; }

  .saju-overview-card {
    --core-color:#5e5ce6; --core-soft:#f2f0ff;
    background:linear-gradient(135deg,var(--core-soft),#fff5f8); border:1px solid rgba(94,92,230,0.12);
    border-radius:20px; padding:18px 22px; margin:10px 0;
    box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(94,92,230,0.07);
  }
  .saju-overview-main { display:flex; align-items:center; gap:15px; }
  .saju-core-symbol {
    width:60px; height:60px; flex:0 0 auto; border-radius:19px; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.8); border:1px solid rgba(255,255,255,0.9);
    box-shadow:inset 0 1px 1px rgba(255,255,255,0.6),0 8px 18px -10px var(--core-color);
  }
  .saju-core-symbol img { width:70%; height:70%; object-fit:contain; }
  .saju-overview-copy { min-width:0; }
  .saju-overview-label { font-size:10px; font-weight:800; color:var(--core-color); letter-spacing:0.8px; margin-bottom:3px; }
  .saju-overview-title { font-size:17px; font-weight:800; color:#1d1d1f; letter-spacing:-0.35px; word-break:keep-all; }
  .saju-overview-desc { font-size:11.5px; line-height:1.5; color:#6e6e73; margin-top:4px; word-break:keep-all; }
  .saju-overview-tags { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:14px; }
  .saju-overview-tags span {
    padding:6px 9px; border-radius:999px; background:rgba(255,255,255,0.8); border:1px solid rgba(94,92,230,0.1);
    color:#4c4b63; font-size:10px; font-weight:700; white-space:nowrap;
  }

  .saju-pillars-card {
    background:#fff; border-radius:20px; padding:18px 22px 16px; margin:10px 0;
    box-shadow:0 1px 3px rgba(0,0,0,0.06),0 8px 24px rgba(0,0,0,0.04);
  }
  .saju-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
  .saju-card-label { font-size:13.5px; font-weight:800; color:#1d1d1f; }
  .saju-card-sub { font-size:10.5px; color:#8e8e93; margin-top:3px; line-height:1.4; }
  .saju-pillars-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-left:-4px; margin-right:-4px; }
  .saju-pillar {
    --pillar-color:#5e5ce6; --pillar-soft:#f2f0ff;
    min-width:0; min-height:98px; padding:10px 6px; border-radius:14px; background:var(--pillar-soft); text-align:center;
    border:1px solid rgba(94,92,230,0.08);
    display:flex; flex-direction:column;
  }
  .saju-pillar.is-core {
    box-shadow:0 0 0 2px rgba(94,92,230,0.24);
  }
  .saju-pillar-label { min-height:25px; font-size:9.5px; font-weight:800; color:#4c4c50; margin-bottom:7px; line-height:1.3; word-break:keep-all; }
  .saju-pillar-elements { display:flex; flex-direction:column; gap:5px; }
  .saju-pillar-elements span {
    display:flex; align-items:center; justify-content:center; gap:4px; min-height:24px; padding:4px 3px;
    border-radius:8px; background:rgba(255,255,255,0.72); color:#3a3a3c; font-size:9.5px; font-weight:800;
  }
  .saju-pillar-elements i { width:7px; height:7px; flex:0 0 auto; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,0.74); }
  .saju-pillar-unknown { margin:auto 0; color:#8e8e93; font-size:9.5px; line-height:1.45; font-weight:700; word-break:keep-all; }
  .saju-help-note, .saju-section-help {
    padding:8px 10px; border-radius:10px; background:#f7f7fa; color:#77777d;
    font-size:10.5px; line-height:1.45; letter-spacing:-0.1px;
  }
  .saju-help-note { margin-top:12px; }
  .saju-section-help { margin:-3px 0 11px; }

  .balance-card { background:#fff; border-radius:20px; padding:20px 22px; margin:10px 0; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04); }
  .balance-card .label { font-size:13.5px; font-weight:800; color:#1d1d1f; letter-spacing:-0.2px; margin-bottom:7px; }
  .balance-card .balance-help { margin:0 0 12px; }
  .balance-row { display:flex; flex-direction:column; gap:0; }
  .balance-item {
    min-width:0; padding:8px 0; display:grid; grid-template-columns:32px 40px minmax(0,1fr) 36px;
    align-items:center; gap:9px;
  }
  .balance-item + .balance-item { border-top:1px solid #f2f2f4; }
  .balance-item .ic {
    width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:var(--balance-soft,#f5f5f7); overflow:hidden;
  }
  .balance-item .ic img { width:72%; height:72%; object-fit:contain; }
  .balance-item .name { font-size:11px; color:#3a3a3c; font-weight:700; white-space:nowrap; }
  .balance-meter { width:100%; height:9px; margin:0; background:var(--balance-soft,#f2f2f4); border-radius:999px; overflow:hidden; }
  .balance-fill {
    display:block; width:var(--balance-level,0%); height:100%; border-radius:inherit;
    background:var(--balance-color,#5e5ce6); opacity:0.64;
    transform:scaleX(0); transform-origin:left center;
  }
  .balance-status { justify-self:end; color:#6e6e73; font-size:10px; font-weight:700; white-space:nowrap; }
  .balance-status.is-none { padding:3px 6px; border-radius:999px; background:#f2f2f4; color:#8e8e93; }
  .balance-row.balance-animated .balance-fill { transform:scaleX(1); transition:transform 0.55s cubic-bezier(.2,.8,.2,1) var(--balance-delay,0ms); }

  .saju-report-reveal { animation:sajuReportRise 0.42s cubic-bezier(.2,.75,.25,1) both; }
  .saju-pillars-grid.saju-pillars-animated .saju-pillar { animation:sajuPillarRise 0.38s cubic-bezier(.2,.8,.2,1) both; animation-delay:var(--pillar-delay,0ms); }
  @keyframes sajuReportRise { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
  @keyframes sajuPillarRise { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

  @media (max-width:420px) {
    .saju-overview-card { padding:16px 18px; }
    .saju-core-symbol { width:54px; height:54px; border-radius:17px; font-size:26px; }
    .saju-overview-title { font-size:15.5px; }
    .saju-pillars-card { padding:16px 18px 14px; }
    .saju-pillars-grid { gap:5px; margin-left:-6px; margin-right:-6px; }
    .saju-pillar { min-height:102px; padding-left:4px; padding-right:4px; }
    .saju-pillar-elements span { font-size:9px; gap:3px; }
    .balance-card { padding-left:18px; padding-right:18px; }
    .page .section { padding-left:18px; padding-right:18px; }
  }

  @media (prefers-reduced-motion:reduce) {
    .saju-report-reveal, .saju-pillars-grid.saju-pillars-animated .saju-pillar { animation:none; }
    .balance-row.balance-animated .balance-fill { transition:none; transform:scaleX(1); }
    #screen-home .home-header .mark span { animation:none; opacity:1; transform:none; will-change:auto; }
  }

  .section { background:#fff; border-radius:20px; padding:18px 22px; margin:10px 0; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04); }
  .section-title { font-size:15px; font-weight:700; margin:0 0 10px 0; display:flex; align-items:center; gap:8px; }
  .icon-badge { width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px; }
  .badge-good{background:#d1f2d9;} .badge-bad{background:#ffe1e3;} .badge-trait{background:#e4e0ff;} .badge-flow{background:#ffe9c7;} .badge-health{background:#ffe0ec;} .badge-today{background:#ffedd9;} .badge-sinsal{background:#fff4cc;}
  .today-section { background: linear-gradient(135deg, #f5f3ff, #eef7ff); }
  .today-date { font-size:11px; font-weight:600; color:#8a8a92; margin-left:auto; }
  .today-section .section-title { justify-content:flex-start; }

  /* .fade-in / @keyframes fadeInSoft: 화면 전환 핵심 동작이라 index.html 인라인 스타일로 옮김
     (이 파일은 비동기로 로드되는데, 앱 켜자마자 빠르게 화면 전환하면 이 CSS가 아직 안 실려서
     모션이 씹히는 문제가 있었음 — 즉시 필요한 UI 동작은 지연 로딩 파일에 두면 안 됨) */

  /* ---------- 오늘의 운세 뽑기 모션 (공통 스테이지) ---------- */
  .fortune-motion-stage {
    position:relative; height:132px; border-radius:14px; margin-bottom:2px;
    background:linear-gradient(135deg,#f7f5ff,#fff5f8);
    display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer;
    user-select:none; -webkit-tap-highlight-color:transparent;
  }
  .fortune-motion-stage.fm-tarot-revealed { height:auto; overflow:hidden; cursor:default; }
  .fm-locked { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px; }
  .fm-locked-icon {
    width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#5e5ce6,#ff375f);
  }
  .fm-locked-text { font-size:12.5px; color:#6e6e73; text-align:center; }
  .fm-locked-btn {
    margin-top:4px; padding:9px 20px; border:none; border-radius:10px; cursor:pointer;
    background:linear-gradient(135deg,#5e5ce6,#ff375f); color:#fff; font-size:12.5px; font-weight:700;
  }

  .fortune-motion-stage .fm-hint {
    position:absolute; bottom:10px; left:0; right:0; text-align:center;
    font-size:11px; color:#8e8e93; animation:fmPulse 1.6s ease-in-out infinite;
  }
  @keyframes fmPulse { 0%,100%{opacity:0.55;} 50%{opacity:1;} }
  .fortune-motion-stage.fm-playing .fm-hint,
  .fortune-motion-stage.fm-playing .fm-idle-glow,
  .fortune-motion-stage.fm-playing .fm-idle-mark,
  .fortune-motion-stage.fm-playing .fm-idle-avatar,
  .fortune-motion-stage.fm-playing .fm-sparkle { display:none; }
  .fm-idle-glow {
    position:absolute; width:90px; height:90px; border-radius:50%; top:50%; left:50%;
    transform:translate(-50%,-58%);
    background:radial-gradient(circle, rgba(94,92,230,0.22), rgba(255,55,95,0.10) 60%, transparent 75%);
    animation:fmIdleBreathe 2.4s ease-in-out infinite;
  }
  @keyframes fmIdleBreathe { 0%,100% { transform:translate(-50%,-58%) scale(0.9); opacity:0.7; } 50% { transform:translate(-50%,-58%) scale(1.15); opacity:1; } }
  .fm-idle-mark {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-58%); font-size:26px;
    animation:fmIdleBreathe 2.4s ease-in-out infinite;
  }
  .fm-sparkle {
    position:absolute; color:#ffd60a; font-size:10px; line-height:1;
    text-shadow:0 0 4px rgba(255,214,10,0.8);
    animation: fmTwinkle 1.6s ease-in-out infinite;
  }
  @keyframes fmTwinkle { 0%,100% { opacity:0; transform:scale(0.4) rotate(0deg); } 50% { opacity:1; transform:scale(1.1) rotate(15deg); } }
  .fm-item { position:absolute; }

  /* 1. 산통점 (오미쿠지 한국식) */
  .fm-santong-tube {
    width:34px; height:70px; border-radius:8px 8px 4px 4px;
    background:linear-gradient(180deg,#c8933b,#a06c22); box-shadow:inset 0 0 0 2px rgba(255,255,255,0.15);
  }
  .fm-santong-tube.fm-shake { animation:fmShakeTube 0.5s ease-in-out 2; }
  @keyframes fmShakeTube { 0%,100%{transform:rotate(0);} 25%{transform:rotate(-8deg);} 75%{transform:rotate(8deg);} }
  .fm-santong-stick {
    position:absolute; width:6px; height:52px; border-radius:3px;
    background:linear-gradient(180deg,#fff5e0,#ffe6b3); top:14px; left:50%; margin-left:-3px;
    opacity:0; transform:translateY(0) rotate(0);
  }
  .fm-santong-stick.fm-pop { animation:fmStickPop 0.55s cubic-bezier(.2,.8,.3,1.2) forwards; }
  @keyframes fmStickPop { 0%{opacity:0; transform:translateY(10px) rotate(0);} 40%{opacity:1;} 100%{opacity:1; transform:translateY(-58px) rotate(-8deg);} }

  /* 2. 오행 구슬 모으기 */
  .fm-oh-dot { width:14px; height:14px; border-radius:50%; top:50%; left:50%; opacity:0.9; transition:transform 0.7s cubic-bezier(.3,.7,.2,1), opacity 0.4s; }
  .fm-oh-dot.fm-gather { transform:translate(-50%,-50%) !important; }
  .fm-oh-flash { width:10px; height:10px; border-radius:50%; top:50%; left:50%; margin:-5px 0 0 -5px; background:#fff; opacity:0; }
  .fm-oh-flash.fm-burst { animation:fmFlashBurst 0.5s ease-out forwards; }
  @keyframes fmFlashBurst { 0%{opacity:0.9; transform:scale(1);} 100%{opacity:0; transform:scale(14);} }

  /* 3. 캡슐 뽑기 */
  .fm-capsule { width:38px; height:38px; border-radius:50%; top:8px; left:50%; margin-left:-19px;
    background:linear-gradient(180deg,#5e5ce6 50%,#ff375f 50%); box-shadow:0 2px 6px rgba(0,0,0,0.15); }
  .fm-capsule.fm-shake { animation:fmShakeTube 0.4s ease-in-out 2; }
  .fm-capsule.fm-drop { animation:fmCapsuleDrop 0.55s cubic-bezier(.3,.7,.4,1.3) forwards; }
  @keyframes fmCapsuleDrop { 0%{top:8px;} 70%{top:78px;} 85%{top:66px;} 100%{top:78px;} }
  .fm-capsule.fm-split .fm-cap-top { animation:fmCapTop 0.35s ease-in forwards; }
  .fm-capsule.fm-split .fm-cap-bottom { animation:fmCapBottom 0.35s ease-in forwards; }
  .fm-cap-top, .fm-cap-bottom { position:absolute; left:0; right:0; height:19px; overflow:hidden; }
  .fm-cap-top { top:0; }
  .fm-cap-bottom { bottom:0; }
  @keyframes fmCapTop { to { transform:translateY(-14px) rotate(-25deg); opacity:0; } }
  @keyframes fmCapBottom { to { transform:translateY(14px) rotate(25deg); opacity:0; } }

  /* 4. 슬롯머신 */
  .fm-slot-reel { position:relative; width:26px; height:64px; border-radius:6px; background:#fff; box-shadow:inset 0 0 0 1px #ece7ff; overflow:hidden; }
  .fm-slot-reel .fm-slot-strip { display:flex; flex-direction:column; align-items:center; font-size:22px; line-height:32px; }
  .fm-slot-reel.fm-spin .fm-slot-strip { animation:fmSlotSpin 0.25s linear infinite; }
  .fm-slot-reel.fm-stop .fm-slot-strip { animation:none; transform:translateY(var(--fm-stop-offset,0)); transition:transform 0.3s ease-out; }
  @keyframes fmSlotSpin { from{transform:translateY(0);} to{transform:translateY(-64px);} }

  /* 5. 별자리 잇기 */
  .fm-star-dot { width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 6px 1px rgba(255,255,255,0.9); opacity:0.35; }
  .fm-star-dot.fm-lit { opacity:1; animation:fmStarLit 0.3s ease-out; }
  @keyframes fmStarLit { 0%{transform:scale(0.4);} 60%{transform:scale(1.6);} 100%{transform:scale(1);} }
  .fm-star-line-bar { height:1.4px; background:rgba(255,255,255,0.85); opacity:0; }

  /* 6. 스노우볼 흔들기 */
  .fm-globe { width:78px; height:78px; border-radius:50%; top:14px; left:50%; margin-left:-39px;
    background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0.08) 60%), linear-gradient(180deg,#e8f2ff,#dceeff);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,0.6), 0 2px 10px rgba(0,0,0,0.08); overflow:hidden; }
  .fm-globe.fm-shake { animation:fmGlobeShake 0.45s ease-in-out 2; }
  @keyframes fmGlobeShake { 0%,100%{transform:translateX(0) rotate(0);} 25%{transform:translateX(-4px) rotate(-6deg);} 75%{transform:translateX(4px) rotate(6deg);} }
  .fm-snow { position:absolute; width:4px; height:4px; border-radius:50%; background:#fff; top:-6px; opacity:0.9; animation:fmSnowFall linear forwards; }
  @keyframes fmSnowFall { to { top:100%; opacity:0.5; } }

  /* 7. 카드 뒤집기 */
  .fm-card { width:56px; height:78px; border-radius:10px; perspective:600px; }
  .fm-card-inner { position:relative; width:100%; height:100%; transition:transform 0.5s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d; }
  .fm-card.fm-flip .fm-card-inner { transform:rotateY(180deg); }
  .fm-card-face { position:absolute; inset:0; border-radius:10px; backface-visibility:hidden; display:flex; align-items:center; justify-content:center; font-size:22px; }
  .fm-card-front { background:linear-gradient(135deg,#5e5ce6,#ff375f); color:#fff; }
  .fm-card-back { background:#fff; box-shadow:inset 0 0 0 1px #ece7ff; transform:rotateY(180deg); }

  /* v44: 결과마다 결이 분명히 다른 오늘의 운세 모션 */
  .fm-gold-dust {
    position:absolute; left:50%; top:55%; width:4px; height:4px; border-radius:50%;
    background:#d7ad58; box-shadow:0 0 5px rgba(215,173,88,.58);
    animation:fmGoldDust .72s ease-out forwards;
  }
  @keyframes fmGoldDust {
    from { opacity:0; transform:translate(-50%,-50%) scale(.45); }
    24% { opacity:1; }
    to { opacity:0; transform:translate(calc(-50% + var(--dust-x)),calc(-50% + var(--dust-y))) scale(.9); }
  }

  .fm-oheng-orbit { position:relative; width:82px; height:82px; border:1px solid rgba(94,92,230,.13); border-radius:50%; }
  .fm-oheng-orb {
    position:absolute; top:50%; left:50%; width:13px; height:13px; margin:-6.5px;
    border-radius:50%; transform:rotate(calc(var(--orb-index) * 72deg)) translateX(35px);
    box-shadow:0 2px 6px rgba(50,45,70,.12);
  }
  .fm-oheng-orbit.fm-oheng-turn { animation:fmOhengTurn .88s cubic-bezier(.3,.7,.25,1) both; }
  .fm-oheng-orbit.fm-oheng-gather { animation:fmOhengGather .48s cubic-bezier(.25,.8,.3,1) forwards; }
  .fm-oheng-seal {
    position:absolute; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
    border-radius:50%; background:#fff; color:#655fd8; font-size:14px; font-weight:800;
    box-shadow:0 4px 14px rgba(94,92,230,.16),inset 0 0 0 1px #e5e1f7; opacity:0; transform:scale(.55);
  }
  .fm-oheng-seal.fm-oheng-show { animation:fmOhengSeal .5s cubic-bezier(.2,.85,.3,1.15) forwards; }
  @keyframes fmOhengTurn { from { transform:rotate(-70deg) scale(.72); opacity:.35; } to { transform:rotate(288deg) scale(1); opacity:1; } }
  @keyframes fmOhengGather { to { transform:rotate(360deg) scale(.34); opacity:.18; } }
  @keyframes fmOhengSeal { to { opacity:1; transform:scale(1); } }

  .fortune-motion-stage.fm-star-finished::after {
    content:''; position:absolute; inset:22px 28%; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%); animation:fmStarAura .5s ease-out both;
  }
  @keyframes fmStarAura { from { opacity:0; transform:scale(.55); } to { opacity:1; transform:scale(1.25); } }

  .fm-stamp-paper {
    position:absolute; left:50%; top:50%; width:102px; height:66px; transform:translate(-50%,-42%);
    border-radius:8px; background:linear-gradient(145deg,#fffdf8,#f7f0e3); border:1px solid #eadfcb;
    box-shadow:0 5px 14px rgba(104,83,50,.08);
  }
  .fm-stamp-mark {
    position:absolute; left:50%; top:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    transform:translate(-50%,-50%) scale(1.25); border:2px solid #b96968; color:#b96968; font-size:14px; font-weight:800;
    opacity:0; filter:blur(1px);
  }
  .fm-stamp-mark.fm-stamp-visible { animation:fmStampMark .36s ease-out forwards; }
  .fm-stamp-tool {
    position:absolute; left:50%; top:8px; width:42px; height:42px; margin-left:-21px; border-radius:9px 9px 6px 6px;
    background:linear-gradient(145deg,#bc8d54,#8d6236); box-shadow:0 5px 10px rgba(83,52,29,.18); transform:translateY(-32px);
  }
  .fm-stamp-tool span { position:absolute; left:13px; right:13px; top:-13px; height:18px; border-radius:7px 7px 3px 3px; background:#76502f; }
  .fm-stamp-tool.fm-stamp-press { animation:fmStampPress 1.05s cubic-bezier(.35,.7,.25,1) forwards; }
  @keyframes fmStampPress { 0% { transform:translateY(-32px) rotate(-3deg); } 50% { transform:translateY(35px) rotate(0); } 64% { transform:translateY(34px) scale(.96); } 100% { transform:translateY(-30px) rotate(2deg); opacity:.25; } }
  @keyframes fmStampMark { to { opacity:.82; transform:translate(-50%,-50%) scale(1); filter:blur(0); } }

  .fm-scroll { position:relative; display:flex; align-items:center; justify-content:center; width:28px; height:76px; }
  .fm-scroll-paper {
    width:0; height:62px; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:7px;
    background:linear-gradient(100deg,#fffaf0,#fffdf8 52%,#f6ecdc); border-top:1px solid #e6d8c2; border-bottom:1px solid #e6d8c2;
  }
  .fm-scroll-paper i { display:block; width:54px; height:2px; margin:0 auto; border-radius:2px; background:rgba(166,126,74,.22); }
  .fm-scroll-rod { position:absolute; top:0; bottom:0; width:7px; border-radius:5px; background:linear-gradient(90deg,#9b7040,#d3ad6a,#8b6037); z-index:2; }
  .fm-scroll-left { left:7px; } .fm-scroll-right { right:7px; }
  .fm-scroll.fm-scroll-open { animation:fmScrollFrame 1s cubic-bezier(.25,.8,.25,1) forwards; }
  .fm-scroll.fm-scroll-open .fm-scroll-paper { animation:fmScrollPaper 1s cubic-bezier(.25,.8,.25,1) forwards; }
  .fm-scroll.fm-scroll-open .fm-scroll-left { animation:fmScrollLeft 1s cubic-bezier(.25,.8,.25,1) forwards; }
  .fm-scroll.fm-scroll-open .fm-scroll-right { animation:fmScrollRight 1s cubic-bezier(.25,.8,.25,1) forwards; }
  .fm-scroll-glow { position:absolute; width:118px; height:76px; border-radius:50%; background:radial-gradient(circle,rgba(255,213,142,.23),transparent 68%); opacity:0; }
  .fm-scroll-glow.fm-scroll-glow-show { animation:fmScrollGlow .58s ease-out forwards; }
  @keyframes fmScrollFrame { to { width:126px; } }
  @keyframes fmScrollPaper { to { width:112px; } }
  @keyframes fmScrollLeft { to { left:0; } } @keyframes fmScrollRight { to { right:0; } }
  @keyframes fmScrollGlow { to { opacity:1; transform:scale(1.08); } }

  .fm-water-drop {
    position:absolute; left:50%; top:12px; width:15px; height:19px; margin-left:-7px; border-radius:55% 45% 60% 40%;
    background:linear-gradient(145deg,#91c5ee,#5e7fd0); transform:rotate(45deg) scale(.55); opacity:0;
  }
  .fm-ripple { position:absolute; left:50%; top:70%; width:34px; height:12px; margin:-6px 0 0 -17px; border:1.5px solid rgba(91,129,201,.48); border-radius:50%; opacity:0; }
  .fm-ripple-two { animation-delay:.16s !important; } .fm-ripple-three { animation-delay:.32s !important; }
  .fm-ripple-moon { position:absolute; left:50%; top:28px; width:33px; height:33px; margin-left:-16px; border-radius:50%; background:#fff3c9; box-shadow:0 0 18px rgba(255,221,144,.45); opacity:0; }
  .fm-ripple-playing .fm-water-drop { animation:fmWaterDrop .68s cubic-bezier(.45,0,.7,1) forwards; }
  .fm-ripple-playing .fm-ripple { animation:fmWaterRipple .85s ease-out .58s forwards; }
  .fm-ripple-playing .fm-ripple-moon { animation:fmMoonReveal .72s ease-out .86s forwards; }
  @keyframes fmWaterDrop { 0% { opacity:0; transform:translateY(-12px) rotate(45deg) scale(.55); } 24% { opacity:1; } 100% { opacity:.9; transform:translateY(66px) rotate(45deg) scale(.82); } }
  @keyframes fmWaterRipple { from { opacity:.7; transform:scale(.35); } to { opacity:0; transform:scale(3.1); } }
  @keyframes fmMoonReveal { from { opacity:0; transform:translateY(8px) scale(.72); } to { opacity:1; transform:translateY(0) scale(1); } }

  @media (prefers-reduced-motion:reduce) {
    .fm-gold-dust,.fm-oheng-orbit,.fm-oheng-seal,.fm-stamp-tool,.fm-stamp-mark,
    .fm-scroll,.fm-scroll-paper,.fm-scroll-rod,.fm-scroll-glow,.fm-water-drop,.fm-ripple,.fm-ripple-moon {
      animation-duration:.01ms !important; animation-delay:0s !important;
    }
  }

  ul.item-list { margin:0; padding:0; list-style:none; }
  ul.item-list li { padding:7px 0; border-bottom:1px solid #f0f0f2; font-size:12.5px; line-height:1.5; }
  ul.item-list li:last-child { border-bottom:none; }
  ul.item-list li b { color:#1d1d1f; font-weight:700; }
  ul.item-list li .desc { color:#48484a; }
  .summary-quote { margin-top:10px; background:linear-gradient(135deg,#f2f0ff,#fff0f5); border-radius:16px; padding:14px 18px; font-size:12.5px; font-weight:600; color:#3a3a3c; line-height:1.6; text-align:center; }
  .flow-line { font-size:13px; color:#3a3a3c; line-height:1.8; text-align:center; padding:2px 4px; }
  .badge-premium{background:#f0e6ff;}
  .premium-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .premium-card { background:linear-gradient(135deg,#f7f5ff,#fff5f8); border:1px solid #ece7ff; border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:8px; }
  .premium-card-label { font-size:12.5px; font-weight:700; color:#1d1d1f; }
  .premium-card-headline { font-size:12px; color:#5e5ce6; line-height:1.5; min-height:32px; }
  .premium-unlock-btn { margin-top:auto; border:none; border-radius:10px; padding:8px 0; font-size:12px; font-weight:700; color:#fff; background:linear-gradient(135deg,#5e5ce6,#ff375f); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .premium-unlock-btn:disabled { opacity:0.6; cursor:default; }
  .premium-detail { margin-top:14px; background:#fff; border:1px solid #ece7ff; border-radius:14px; padding:16px; font-size:12.5px; line-height:1.6; color:#3a3a3c; }

  /* 공통 타이포 위계: 읽는 글 14px, 보조 설명 12px, 태그·메타정보 11px. */
  .social-btn,
  .field input, .field select,
  .submit-btn, .submit-btn-secondary,
  .status, .toast,
  .me-picker-chip,
  .confirm-modal-message, .confirm-modal-btn,
  .privacy-modal-body, .privacy-modal-body h4,
  .tf-modal-body, .tf-modal-full-btn,
  .saju-card-label, .balance-card .label,
  .fm-locked-btn,
  ul.item-list li, .summary-quote, .flow-line,
  .premium-card-label, .premium-unlock-btn, .premium-detail {
    font-size:var(--type-body);
  }

  .home-header p,
  .auth-logged-in,
  .signup-gate p,
  .solo-intro p,
  .check-inline,
  .me-picker-card p, .me-picker-skip,
  .share-link-box,
  .privacy-updated,
  .tf-modal-loading,
  .sample-notice,
  .header .sub,
  .saju-overview-desc,
  .balance-item .name,
  .fm-locked-text,
  .premium-card-headline {
    font-size:var(--type-secondary);
  }

  .logout-link,
  .solo-intro-kicker, .solo-intro-benefits span,
  .field label,
  .login-consent-note,
  .sipseong-caption,
  .header .eyebrow,
  .saju-overview-label, .saju-overview-tags span,
  .saju-card-sub,
  .saju-pillar-label, .saju-pillar-elements span, .saju-pillar-unknown,
  .saju-help-note, .saju-section-help,
  .balance-status,
  .today-date,
  .fortune-motion-stage .fm-hint {
    font-size:var(--type-meta);
  }

  /* 4열 오행표는 14px 본문 체계 안에서도 칸 여백이 남도록 가장 큰 안전 크기를 사용합니다. */
  @media (max-width:420px) {
    .saju-pillar-label { min-height:26px; font-size:10px; line-height:1.35; }
    .saju-pillar-elements span { min-height:25px; padding-left:2px; padding-right:2px; gap:3px; font-size:10px; }
  }