@charset "UTF-8";
*{margin:0;padding:0;box-sizing:border-box}
/* 디자인 토큰은 tokens.css (SoT). 다크 :root 폐기 — 라이트 에디토리얼로 전환 */
/* overflow-x 는 clip(hidden 아님) — hidden은 overflow-y를 auto로 강제해 스크롤 컨테이너를 만들어 결과 앵커칩(.result-nav) sticky top:0을 깨뜨림. clip은 스크롤포트 미생성이라 sticky 유지 + 가로 클립도 그대로. */
html,body{overflow-x:clip;max-width:100vw}
body{background:var(--color-bg-canvas);color:var(--color-text-primary);font-family:var(--font-sans);min-height:100vh;line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-break:keep-all;overflow-wrap:break-word}
/* 오로라 네뷸라 — 고정 풀뷰포트 레이어(보라/마젠타/민트), 콘텐츠 뒤에 은은히 깔림 */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(75% 55% at 50% -10%, rgba(110,99,201,.16), transparent 60%),
  radial-gradient(95% 60% at 50% 114%, rgba(91,224,160,.055), transparent 62%)}
/* 모바일: 풀이 본문/카드 내부 요소가 viewport 넘기지 않게 */
img,video,canvas,svg{max-width:100%;height:auto}
pre,code{white-space:pre-wrap;word-break:break-word}
.saju-full-md, .ai-hero-body {word-break:keep-all;overflow-wrap:break-word}
a{color:inherit}

/* HEADER — wordmark 프로젝트 로움 (YEP 에디토리얼: 큰 코너 장식 원) */
header{position:relative;background:var(--color-bg-canvas);padding:var(--space-2xl) var(--space-md) var(--space-xl);text-align:center;overflow:hidden;isolation:isolate}
/* 우상단 큰 피치 원 (반쯤 잘림) */
header::before{content:'';position:absolute;top:-160px;right:-90px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(126,90,160,.28),transparent 68%);filter:blur(24px);z-index:-1}
/* 좌하단 보조 스카이 원 (반쯤 잘림) */
header::after{content:none}
header>*{position:relative;z-index:1}
header .hdr-eyebrow{display:inline-block;font-family:var(--font-display);font-size:var(--text-caption);font-weight:700;letter-spacing:.06em;color:var(--color-text-primary);background:var(--color-bg-elevated);border:2px solid var(--color-border-default);border-radius:999px;padding:6px 16px;margin-bottom:var(--space-md);box-shadow:var(--shadow-soft)}
header h1{font-family:var(--font-serif);font-size:var(--text-display);font-weight:800;letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);color:var(--color-text-primary)}

/* LAYOUT */
main{max-width:1100px;margin:0 auto;padding:var(--space-md) var(--space-sm) var(--space-2xl)}

/* CARDS — YEP 제품카드(검정 2px + hard 그림자) */
.card{background:var(--color-bg-elevated);border:2px solid var(--color-border-default);border-radius:var(--r);padding:28px;box-shadow:var(--shadow-soft)}

/* FORMS */
label{display:block;font-size:var(--text-caption);color:var(--color-text-primary);margin-bottom:7px;font-weight:700;letter-spacing:.02em}
input[type=number],input[type=text],select{
  width:100%;padding:13px 14px;background:var(--color-bg-elevated);border:2px solid var(--color-border-default);
  border-radius:var(--r2);color:var(--text);font-size:var(--text-body);font-family:inherit;font-weight:500;
  transition:box-shadow .15s ease,border-color .15s ease;
}
input::placeholder{color:var(--color-text-tertiary);font-weight:400}
input:focus,select:focus{outline:none;border-color:var(--color-accent-deep);box-shadow:var(--shadow-soft)}

.dt-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:10px;margin-bottom:16px}
@media(max-width:540px){.dt-row{grid-template-columns:1.5fr 1fr 1fr;row-gap:14px}.dt-row > div:nth-child(4),.dt-row > div:nth-child(5){grid-column:span 1}.dt-row > div:nth-child(4){grid-column-start:1}}
.dt-row input{text-align:center;letter-spacing:.04em;padding-left:8px;padding-right:8px}

@media(max-width:768px){
  .saju-table-wrap,.ml-row,.dw-timeline{-webkit-mask-image:linear-gradient(to right,#000 90%,transparent);mask-image:linear-gradient(to right,#000 90%,transparent)}

}
/* 입력 터치 타겟 통일 (min 48px) + 생일 숫자 크게 */
input[type=number],input[type=text],select{min-height:48px}
.dt-row input{font-family:var(--font-display);font-weight:800;font-size:1.05rem}
/* 필수값 누락 시 흔들림 피드백 (analyze() 검증 로직 불변, 클래스만 부여) */
input.field-error,select.field-error{border-color:var(--color-warning)!important;animation:fieldShake .35s ease}
@keyframes fieldShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* 태어난 시간 도움말 (출생지 현지 시각 안내) */
.time-help-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border-radius:50%;border:1.5px solid var(--color-accent-deep);background:var(--color-accent-mist);color:var(--color-accent-deep);font-family:var(--font-display);font-weight:800;font-size:.66rem;line-height:1;cursor:pointer;flex-shrink:0}
.time-help-btn::before{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)} /* 44px 터치 히트영역(시각 크기 유지) */
.time-help-btn:hover{background:var(--color-accent-deep);color:#fff}
.birth-time-help{font-size:.78rem;line-height:1.55;color:var(--color-text-primary);background:var(--color-accent-mist);border:1.5px solid var(--color-accent-deep);border-radius:10px;padding:10px 13px;margin-top:-6px;margin-bottom:12px}
.birth-time-help[hidden]{display:none}
/* 서머타임 안내 팝업(모달) — 서머타임 시행기 출생자에게만 표시, 계산은 KST 그대로 */
.st-modal-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(8,7,18,.66);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.st-modal-overlay[hidden]{display:none}
.st-modal-card{position:relative;background:var(--color-bg-elevated);border:2px solid var(--color-accent-deep);border-radius:var(--r);padding:28px 24px 22px;width:100%;max-width:380px;text-align:center;box-shadow:var(--shadow-float)}
.st-modal-badge{display:inline-block;font-family:var(--font-display);font-weight:800;font-size:.72rem;letter-spacing:.04em;color:var(--color-accent-deep);background:var(--color-accent-mist);border:1.5px solid var(--color-accent-deep);border-radius:999px;padding:3px 13px;margin-bottom:14px}
.st-modal-title{font-family:var(--font-display);font-weight:800;font-size:1.16rem;color:var(--color-text-primary);margin-bottom:10px}
.st-modal-body{font-size:.85rem;line-height:1.62;color:var(--color-text-secondary);margin-bottom:20px}
.st-modal-btn{width:100%;padding:13px 20px;background:var(--color-accent);border:2px solid var(--color-accent-deep);border-radius:var(--r2);color:var(--color-text-inverse);font-size:.98rem;font-weight:800;cursor:pointer;font-family:var(--font-display);transition:filter .12s ease}
.st-modal-btn:hover{filter:brightness(1.08)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:17px 38px;background:var(--color-accent);border:2px solid var(--color-border-strong);border-radius:999px;color:var(--color-text-primary);font-size:var(--text-body-small);font-weight:800;font-family:var(--font-display);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .15s ease,color .15s ease;box-shadow:var(--shadow-soft)}
.btn:hover{background:var(--color-text-primary);color:var(--color-text-inverse);transform:translate(-2px,-2px);box-shadow:var(--shadow-lift)}
.btn:active{transform:translate(1px,2px);box-shadow:var(--shadow-soft)}
.btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.btn-full{width:100%;margin-top:var(--space-md)}

/* LANDING (랜딩 입력 폼) */
main{position:relative;isolation:isolate}
main::before{content:'';position:absolute;bottom:8%;right:-90px;width:220px;height:220px;border-radius:50%;background:var(--color-deco-coral);opacity:.35;z-index:-1;pointer-events:none}
@media(max-width:700px){main::before{width:150px;height:150px;right:-70px}}
.landing-col{max-width:580px;margin:0 auto;position:relative}
.landing-card{position:relative;overflow:hidden}
.landing-card::after{content:'';position:absolute;top:-70px;right:-70px;width:160px;height:160px;border-radius:50%;background:var(--color-accent-mist);z-index:0}
.landing-card>*{position:relative;z-index:1}

/* OHAENG BADGES */
.oh{display:inline-flex;align-items:center;justify-content:center;padding:2px 9px;border-radius:20px;font-size:.78rem;font-weight:700;letter-spacing:.04em}
.oh-木{background:var(--wood-bg);color:var(--wood);border:1px solid var(--wood)}
.oh-火{background:var(--fire-bg);color:var(--fire);border:1px solid var(--fire)}
.oh-土{background:var(--earth-bg);color:var(--earth);border:1px solid var(--earth)}
.oh-金{background:var(--metal-bg);color:var(--metal);border:1px solid var(--metal)}
.oh-水{background:var(--water-bg);color:var(--water);border:1px solid var(--water)}

/* HANJA SLOTS */

/* MODAL */

.modal-title{font-family:var(--font-display);font-size:var(--text-headline-2);font-weight:800;color:var(--color-text-primary)}

/* RESULTS */
#results{max-width:1100px;margin:0 auto;padding:0 var(--space-sm) var(--space-2xl);display:none}
#results.show{display:flex;flex-direction:column;gap:22px}
/* flex gap이 카드 간격을 담당 — 개별 카드의 상하 margin은 무력화해 이중 간격 방지 */
#results.show > *{margin-top:0!important;margin-bottom:0!important}
/* 결과 위계 재설계: 핵심 요약(지금/캐릭터/특성/테마)을 먼저, raw 데이터(만세력)는 뒤로.
   id·핸들러 무손상 — 마크업 이동 없이 order로만 시각 순서 제어 */
/* IA 재배치(2026-07-04, 결과 카드 스택): 결론존(캐릭터·일간·지금·오늘) → 앵커 점프칩 → 오행 균형 → 대운 흐름
   → 풀이(관심사·특성·2030·상담) → 만세력 전문표(뒤로+접기) → 리뷰 → 공유.
   마크업 이동 없이 order로만 시각 순서 제어(id/핸들러/스트리밍/코인 무손상).
   만세력 카드의 자식(오행/캐릭터슬롯/오늘/대운/운흐름)은 reflowResultTabs()가 #results 직접 자식으로 hoist. */
/* 단일 세로 스크롤 흐름(2026-07-05 매버릭 조정): 결론 히어로(캐릭터 + 일간/만세력 통합상자) → sticky 앵커칩 → paidDivider
   → [유료 심화: 대운 → 심화상담 → 2030 → 관심사] → [무료 부가: 오행/지금/특성/오늘] → 푸터.
   매버릭: 대운을 히어로 다음 첫 콘텐츠로, 심화상담을 대운 바로 아래로. 유료(대운/상담/2030/관심사)를 앞으로 묶고 무료 부가는 뒤. 폴백 order 병기. */
#results > #resultNav{order:8}           /* sticky 앵커 점프칩 — 히어로 바로 아래 */
#results > #paidDivider{order:9}         /* "여기부터 코인" — 대운/상담/2030 유료존 경계 */
#results > #zoneDaewoon{order:10}        /* 대운 흐름 — 히어로 다음 첫 콘텐츠(매버릭) */
#results > #chatCard{order:12}           /* 심화상담 — 대운 바로 아래(매버릭) */
#results > #grow2030Section{order:16}    /* 2030 심화 */
#results > #focusTop{order:18}           /* 관심사 풀이(유료, 무료진입 시 빈값→숨김) */
#results > #zoneOhaeng{order:30}         /* 무료 부가: 오행 */
#results > #topPriorityCard{order:32}    /* 지금 신경쓸 것 */
#results > #characterTraits{order:34}    /* 캐릭터 특성 */
#results > #manseDailySlot{order:36}     /* 오늘의 운세 */
#results > #aiHeroCard{order:44}
/* 재부모화 폴백(organize 실패 시에도 순서 유지) — manseryeokCard는 통합상자로 이동, 실패 시 뒤로 */
#results > #manseCharSlot{order:5}
#results > #ilganManseBox{order:6}
#results > #ilganQuickCard{order:7}
#results > #manseryeokCard{order:50}
#results > #characterCard{order:5}
#results > #feedbackCard{order:60}
#results > #soonCard{order:61}
/* 결과 카드 순차 등장 (5장까지 stagger) — 새 IA 순서에 맞춰 즉답 카드부터 */
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#results.show > #ilganQuickCard,
#results.show > #topPriorityCard,
#results.show > #characterCard,
#results.show > #characterTraits,
#results.show > #themeSection{animation:cardIn .42s ease-out both}
#results.show #manseCharSlot > #characterCard{animation:cardIn .42s ease-out both;animation-delay:.12s}
#results.show > #topPriorityCard{animation-delay:.06s}
#results.show > #characterCard{animation-delay:.12s}
#results.show > #characterTraits{animation-delay:.18s}
#results.show > #themeSection{animation-delay:.24s}
/* [0-0] 즉답 일간 카드 — 잉크빛 천문 토큰만 사용(하드코딩 색 금지) */
.ilgan-quick{text-align:center;padding:22px 18px}
.ilgan-quick .iq-eyebrow{font-size:var(--text-tiny);color:var(--color-text-tertiary);letter-spacing:.06em;margin-bottom:6px}
.ilgan-quick .iq-stem{font-family:var(--font-display);font-size:var(--text-display);font-weight:900;color:var(--color-accent);line-height:1.05;margin-bottom:8px}
.ilgan-quick .iq-essence{font-family:var(--font-sans);font-size:var(--text-body-large);color:var(--color-text-secondary);margin-bottom:12px}
.ilgan-quick .iq-meta{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.ilgan-quick .iq-oh{font-size:var(--text-tiny);color:var(--color-text-tertiary)}
.ilgan-quick .iq-boost{display:inline-flex;align-items:center;gap:5px;font-size:var(--text-tiny);color:var(--color-text-secondary)}
.ilgan-quick .iq-boost i{width:10px;height:10px;border-radius:50%;background:var(--bc,var(--color-accent));box-shadow:0 0 9px -1px var(--bc,var(--color-accent))}
/* 롱폼 progressive disclosure — CSS-only 접기(무JS 체크박스 토글). 카드 배경 = --color-bg-elevated */

.res-section{margin-top:22px}
.res-title{font-family:var(--font-display);font-size:var(--text-headline-2);font-weight:800;color:var(--color-text-primary);margin-bottom:18px;display:flex;align-items:center;gap:10px;letter-spacing:var(--tracking-tight)}
.res-title::before{content:'';display:inline-block;width:6px;height:1.1em;background:var(--color-accent);border-radius:3px;flex:none}

/* SAJU TABLE */
.saju-table-wrap{overflow-x:auto}
.saju-table{width:100%;border-collapse:collapse;min-width:360px}
.saju-table th,.saju-table td{padding:11px 12px;text-align:center;border:2px solid var(--color-border-default);font-size:.88rem}
.saju-table th{background:var(--color-bg-sunken);color:var(--color-text-primary);font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.04em}
.saju-table .pillar-stem{font-family:var(--font-display);font-size:1.7rem;font-weight:900}
.saju-table .pillar-branch{font-family:var(--font-display);font-size:1.7rem;font-weight:900}
.saju-table .pillar-label{font-size:.72rem;color:var(--color-text-tertiary)}
.saju-table .pillar-hanja{font-size:.8rem;color:var(--color-text-secondary)}
.saju-table .pillar-oh{padding:6px}
/* 일주(日柱) 열 강조 — 헤더 순서: 구분/시/일/월/연 → 3번째 칸이 일주.
   그룹 C "일간부터 보세요"를 시각으로. */
.saju-table th:nth-child(3){background:var(--color-accent);color:var(--color-text-primary);position:relative}
.saju-table td:nth-child(3){background:var(--color-accent-mist);border-left:3px solid var(--color-accent-deep);border-right:3px solid var(--color-accent-deep)}
.saju-table tr:first-child td:nth-child(3){border-top:3px solid var(--color-accent-deep)}
.saju-table tr:last-child td:nth-child(3){border-bottom:3px solid var(--color-accent-deep)}
.saju-table td:nth-child(3) .pillar-stem,
.saju-table td:nth-child(3) .pillar-branch{font-size:1.9rem}
/* 만세력 카드 접기 (raw 데이터 후순위 — 그룹 A "자세히 보기 드릴다운") */
.manse-card{overflow:visible}

.manse-card .manse-header{margin-top:16px;margin-bottom:14px}
.mh-meta{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.mh-gender{font-family:var(--font-display);font-weight:800;font-size:1rem;background:var(--color-accent);color:var(--color-text-inverse);padding:3px 16px;border-radius:999px;border:2px solid var(--color-border-default)}
.mh-age{font-size:.85rem;color:var(--color-text-secondary);font-weight:600}
.mh-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mh-item{display:flex;flex-direction:column;gap:3px;padding:9px 13px;background:var(--color-bg-sunken);border:2px solid var(--color-border-default);border-radius:var(--r2)}
.mh-k{font-size:.68rem;color:var(--color-text-tertiary);font-weight:700;letter-spacing:.03em}
.mh-v{font-size:.9rem;color:var(--color-text-primary);font-weight:700;font-family:var(--font-display)}
.mh-v em{font-style:normal;color:var(--color-text-tertiary);font-size:.72rem;font-family:var(--font-sans)}
@media(max-width:480px){.mh-grid{grid-template-columns:1fr}}
.manse-luck{margin-top:18px}
.manse-ohaeng{margin-top:14px}

.manse-oh{font-family:var(--font-display);font-weight:800;font-size:.95rem}
/* 오행 분포 밸런스 바 — 표→그래프, 과다·과소 직관화 (그룹 A/C/D) */
.oh-bars{display:flex;flex-direction:column;gap:9px;padding:16px;background:var(--color-bg-sunken);border:2px solid var(--color-border-default);border-radius:var(--r2)}
.oh-bar-row{display:grid;grid-template-columns:84px 1fr 30px;align-items:center;gap:11px}
.oh-bar-label{font-family:var(--font-display);font-weight:800;font-size:.86rem;white-space:nowrap}
.oh-bar-track{position:relative;height:18px;background:var(--color-bg-elevated);border:1px solid var(--color-border-default);border-radius:999px;overflow:hidden}
.oh-bar-fill{position:absolute;inset:0 auto 0 0;height:100%;border-radius:999px;min-width:2px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.oh-bar-count{font-family:var(--font-display);font-weight:800;font-size:.9rem;text-align:right}
.oh-bar-row.zero .oh-bar-count{color:var(--color-text-tertiary)}
.ml-block{margin-top:16px}
.ml-block:first-child{margin-top:0}
.ml-label{font-family:var(--font-display);font-weight:700;font-size:.78rem;color:var(--color-text-secondary);letter-spacing:.04em;margin-bottom:8px}
.ml-row{display:flex;gap:5px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.ml-cell{flex:0 0 auto;min-width:44px;text-align:center;padding:7px 5px;border:2px solid var(--color-border-default);border-radius:9px;background:var(--color-bg-elevated);scroll-snap-align:start;border-top:3px solid var(--color-state-future)}
.ml-cell.cur{background:var(--color-accent);border-color:var(--color-border-strong);border-top:3px solid var(--color-state-current);box-shadow:var(--shadow-soft)}
.ml-cell.past{border-top-color:var(--color-state-past)}
.ml-cell.cur .ml-sub{color:var(--color-text-primary);font-weight:700}
.ml-cell.past{opacity:.42}
.ml-gz{font-family:var(--font-display);font-weight:900;font-size:1.02rem;line-height:1.08}
.ml-sub{font-size:.62rem;color:var(--color-text-tertiary);margin-top:3px;white-space:nowrap}
.ten-god-badge{display:inline-block;background:var(--color-accent-mist);color:var(--color-accent-deep);border:1px solid var(--color-accent-deep);border-radius:12px;padding:2px 8px;font-size:.72rem;font-weight:700}

/* OHAENG PENTAGON */

/* ANALYSIS BOXES */

/* YONGSHIN */

/* SUNGMYUNG (NAME ANALYSIS) */

/* SAMJAE */

/* 81수리 */

/* COMPREHENSIVE */

/* DIVIDER */
.divider{border:none;border-top:1px solid var(--border);margin:28px 0}

/* SCROLL TOP */
.scroll-top{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));right:max(24px,env(safe-area-inset-right));background:var(--color-accent);color:var(--color-text-primary);border:2px solid var(--color-border-default);border-radius:50%;width:48px;height:48px;font-size:1.2rem;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:var(--shadow-soft);z-index:500;transition:transform .12s ease,box-shadow .12s ease}
.scroll-top:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-medium)}
.scroll-top.show{display:flex}

/* 십신(十神) 그래픽 — 십성 5분류 분포 바 + 주도 십신 심리 (다크 코스믹) */
.tenshin-graphic{margin-top:22px;padding-top:20px;border-top:1px solid var(--color-border-subtle)}
.ts-head{font-family:var(--font-display);font-size:1.05rem;font-weight:800;color:var(--color-text-primary);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:15px}
.ts-head span{font-size:.75rem;font-weight:600;color:var(--color-text-tertiary);letter-spacing:.02em}
.ts-bars{display:flex;flex-direction:column;gap:9px;margin-bottom:22px}
.ts-row{display:grid;grid-template-columns:98px 1fr 52px;align-items:center;gap:11px}
.ts-lbl{min-width:0}
.ts-lbl b{display:block;font-size:.86rem;font-weight:800;color:var(--color-text-secondary);white-space:nowrap}
.ts-row.dom .ts-lbl b{color:var(--color-text-primary)}
.ts-lbl span{display:block;font-size:.67rem;color:var(--color-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-track{height:12px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.ts-fill{height:100%;border-radius:999px;min-width:3px;transition:width .7s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 12px -2px currentColor}
.ts-val{font-family:var(--font-sans);font-size:.92rem;font-weight:800;color:var(--color-text-primary);text-align:right;white-space:nowrap}
.ts-val em{display:block;font-size:.65rem;font-weight:600;font-style:normal;color:var(--color-text-tertiary)}
.ts-psy-title{font-size:.82rem;font-weight:800;color:var(--color-text-tertiary);margin:2px 0 11px;letter-spacing:.02em}
.tenshin-card{background:var(--color-bg-sunken);border:1px solid var(--color-border-default);border-left:3px solid var(--ts-col,var(--color-accent));border-radius:14px;padding:15px 16px;margin-bottom:12px}
.tenshin-card h4{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:.9rem}
.tenshin-badge{font-family:var(--font-serif);font-weight:800;font-size:.9rem;color:var(--ts-col,var(--color-accent));padding:2px 11px;border-radius:999px;border:1px solid var(--ts-col,var(--color-accent));background:rgba(255,255,255,.03)}
.tenshin-card .ts-sym{font-size:.75rem;color:var(--color-text-tertiary)}
.tenshin-card .ts-cnt{margin-left:auto;font-size:.78rem;font-weight:800;color:var(--color-text-secondary)}
.tenshin-card .ts-desc{font-size:.86rem;line-height:1.75;color:var(--color-text-secondary);margin:0 0 12px;word-break:keep-all}
.proscons-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
@media(max-width:600px){.proscons-grid{grid-template-columns:1fr}.ts-row{grid-template-columns:82px 1fr 46px;gap:9px}}
.pros-box,.cons-box{background:rgba(255,255,255,.03);border-radius:10px;padding:10px 12px}
.pros-box{border-left:2px solid var(--color-accent)}
.cons-box{border-left:2px solid var(--color-warning,#E0746E)}
.pros-box .pc-title{font-size:.7rem;font-weight:800;color:var(--color-accent);margin-bottom:5px}
.cons-box .pc-title{font-size:.7rem;font-weight:800;color:var(--color-warning,#E0746E);margin-bottom:5px}
.pros-box ul,.cons-box ul{margin:0;padding-left:15px;font-size:.76rem;color:var(--color-text-secondary);line-height:1.7}
.ts-career{font-size:.8rem;color:var(--color-text-tertiary);line-height:1.6}
.ts-career b{color:var(--color-text-secondary);font-weight:700;margin-right:4px}

/* 궁 분석 */

/* 일간 왕쇠 배지 */
.wang-badge{display:inline-block;padding:3px 12px;border-radius:20px;font-size:.82rem;font-weight:700;border:1px solid}
.wang-strong{color:var(--fire);border-color:var(--fire);background:var(--fire-bg)}
.wang-weak{color:var(--water);border-color:var(--water);background:var(--water-bg)}
.wang-mid{color:var(--earth);border-color:var(--earth);background:var(--earth-bg)}

/* 지장간 표시 */
.jijang-row{font-size:.68rem;color:var(--muted);line-height:1.5;margin-top:3px}
.jijang-item{display:inline-block;margin:0 2px}

/* 시간 미리보기 */
.sigan-preview-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sigan-badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:.8rem;font-weight:700;background:var(--color-accent-mist);color:var(--color-accent-deep);border:1px solid var(--color-accent-deep)}

/* ── 핵심 정리 ── */

/* ── 툴팁(Tooltip) ── */
.tip{position:relative;border-bottom:2px dotted var(--color-accent);cursor:help;color:inherit}
.tip::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--color-text-primary);border:2px solid var(--color-text-primary);border-radius:10px;
  padding:9px 13px;font-size:.73rem;color:var(--color-text-inverse);line-height:1.6;
  white-space:normal;width:240px;word-break:keep-all;z-index:9999;
  opacity:0;pointer-events:none;transition:opacity .18s;
  box-shadow:var(--shadow-float);text-align:left;font-weight:400;
}
.tip:hover::after,.tip:focus::after,.tip:focus-visible::after{opacity:1}
.tip:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:3px}
/* 오른쪽 끝에서 삐져나오지 않도록 */
.tip.tip-left::after{left:auto;right:0;transform:none}
.tip.tip-right::after{left:0;transform:none}
.term-legend{display:flex;flex-wrap:wrap;gap:14px;margin:2px 0 14px;font-size:.82rem;color:var(--color-text-secondary)}
.term-legend .tip{font-weight:600;color:var(--color-text-primary)}
.term-legend .tip::after{left:0;transform:none}
.term-legend .tip:last-child::after{left:auto;right:0;transform:none}
@media(max-width:700px){
  /* 좁은 화면: 240px 버블이 개별 tip 기준이면 끝 항목(지장간)이 좌우로 삐짐 → 범례 컨테이너 기준 왼쪽 고정 + 폭 clamp로 항상 뷰포트 안 */
  .term-legend{position:relative}
  .term-legend .tip{position:static}
  .term-legend .tip::after,.term-legend .tip:last-child::after{left:0;right:auto;transform:none;width:min(240px,calc(100vw - 40px))}
}

/* 분석 상세 블록 */

.tag{display:inline-block;padding:3px 10px;border-radius:12px;font-size:.75rem;background:var(--color-bg-sunken);border:1px solid var(--border);color:var(--sub)}
.tag.good{border-color:var(--wood);color:var(--wood)}
.tag.bad{border-color:var(--fire);color:var(--fire)}
.tag.gold{border-color:var(--gold);color:var(--gold);background:var(--gold2)}

/* ===================== FOCUS TEXTAREA (프로젝트 로움에 물을 질문) ===================== */

/* ===================== AI HERO (프로젝트 로움 리포트) ===================== */
.ai-hero{position:relative;margin:18px 0 28px;padding:34px 30px 28px;border:2px solid var(--color-border-default);border-radius:var(--r);background:var(--color-bg-elevated);box-shadow:var(--shadow-medium)}
.ai-hero::before{content:'프로젝트 로움 — AI 사주 리포트';position:absolute;top:-14px;left:22px;background:var(--color-accent);color:var(--color-text-primary);font-family:var(--font-display);font-size:var(--text-caption);font-weight:800;letter-spacing:.02em;padding:5px 14px;border:2px solid var(--color-border-default);border-radius:999px}
.ai-hero-loading{display:flex;align-items:center;gap:12px;padding:14px 0;color:var(--color-text-secondary);font-size:.95rem;font-style:italic}
.ai-hero-loading .dots{display:inline-flex;gap:5px}
.ai-hero-loading .dots span{width:7px;height:7px;border-radius:50%;background:var(--color-accent);animation:aiDot 1.2s infinite ease-in-out}
.ai-hero-loading .dots span:nth-child(2){animation-delay:.2s}
.ai-hero-loading .dots span:nth-child(3){animation-delay:.4s}
@keyframes aiDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
/* 로딩 스켈레톤 (그룹 B/F "스켈레톤→페이드, 산만 방지") */
.skeleton-lines{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.skeleton-line{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--color-bg-sunken) 25%,var(--color-accent-mist) 50%,var(--color-bg-sunken) 75%);background-size:200% 100%;animation:skelShimmer 1.4s ease-in-out infinite}
.skeleton-line:nth-child(2){width:92%}
.skeleton-line:nth-child(3){width:78%}
@keyframes skelShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skeleton-line{animation:none}}
.ai-hero-body{font-family:var(--font-sans);font-size:var(--text-body-large);line-height:1.95;color:var(--color-text-primary);white-space:pre-wrap;margin:0;letter-spacing:.005em}
.ai-hero-body strong{color:var(--color-text-strong);font-weight:800}
.ai-hero-body p{margin:0 0 14px}
.ai-hero-body p:last-child{margin-bottom:0}
.ai-hero-error{color:var(--color-warning);font-size:.92rem;font-style:italic;padding:6px 0}
.ai-hero-meta{margin-top:18px;padding-top:14px;border-top:2px solid var(--color-border-subtle);font-size:.72rem;color:var(--color-text-tertiary);letter-spacing:.08em;text-align:right}
@media(max-width:700px){.ai-hero{padding:30px 18px 20px}.ai-hero-body{font-size:1rem;line-height:1.85}}

/* ===================== ACCESS GATE (비밀번호 입장) ===================== */
.gate-overlay{position:fixed;inset:0;background:var(--color-bg-canvas);z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px}
.gate-card{position:relative;background:var(--color-bg-elevated);border:2px solid var(--color-border-default);border-radius:var(--r);padding:44px 36px 36px;width:100%;max-width:420px;text-align:center;box-shadow:var(--shadow-float)}
.gate-title{font-family:var(--font-display);font-size:var(--text-headline-1);font-weight:800;letter-spacing:var(--tracking-tight);color:var(--color-text-primary);margin-bottom:12px}
.gate-sub{font-family:var(--font-sans);font-size:var(--text-body);color:var(--color-text-secondary);margin-bottom:30px;line-height:var(--leading-normal)}
.gate-input{width:100%;padding:14px 18px;background:var(--color-bg-elevated);border:2px solid var(--color-border-default);border-radius:var(--r2);color:var(--color-text-primary);font-size:1rem;font-family:inherit;text-align:center;letter-spacing:.1em;transition:border-color .15s ease,box-shadow .15s ease}
.gate-input::placeholder{color:var(--color-text-tertiary);letter-spacing:.1em}
.gate-input:focus{outline:none;border-color:var(--color-accent-deep);box-shadow:var(--shadow-soft)}
.gate-btn{margin-top:18px;width:100%;padding:15px 20px;background:var(--color-accent);border:2px solid var(--color-border-default);border-radius:var(--r2);color:var(--color-text-primary);font-size:1.02rem;font-weight:800;cursor:pointer;font-family:var(--font-display);letter-spacing:.04em;transition:transform .12s ease,box-shadow .12s ease,background .15s ease,color .15s ease;box-shadow:var(--shadow-soft)}
.gate-btn:hover{background:var(--color-text-primary);color:var(--color-text-inverse);transform:translate(-2px,-2px);box-shadow:var(--shadow-lift)}
.gate-btn:active{transform:translate(1px,2px);box-shadow:var(--shadow-soft)}
.gate-err{color:var(--color-warning);font-size:.82rem;margin-top:10px;min-height:1em}

/* ===================== FEEDBACK CARD — 컴맹 친화 미니멀 ===================== */

.fb-card{position:relative;background:var(--color-bg-elevated);border:2px solid var(--color-border-default);border-left:8px solid var(--color-accent);border-radius:var(--r);padding:32px;margin:24px 0;display:none;box-shadow:var(--shadow-soft)}
.fb-card.show{display:block;animation:fbCardIn .32s ease-out .08s both}
@keyframes fbCardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.fb-card{padding:24px 20px}}

.fb-title{color:var(--text);font-size:22px;font-weight:700;line-height:1.3;margin-bottom:8px;text-align:center}
@media(max-width:700px){.fb-title{font-size:19px}}
.fb-sub{color:var(--sub);font-size:14px;line-height:1.5;margin-bottom:28px;text-align:center}

/* 질문 그룹 */
.fb-q{margin-bottom:28px}
.fb-q:last-of-type{margin-bottom:24px}
.fb-q-label{color:var(--text);font-size:16px;font-weight:600;margin-bottom:10px}

/* 큰 emoji chip 3-옵션 */
.fb-q-big-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:520px){.fb-q-big-chips{grid-template-columns:1fr;gap:10px}}

.fb-big-chip{background:var(--card2);border:2px solid var(--border);border-radius:14px;padding:20px 12px;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:8px;transition:all .15s ease-out;min-height:108px}
.fb-big-chip:hover{transform:translateY(-1px)}
.fb-big-chip.match:hover{border-color:var(--wood);background:rgba(74,222,128,.08)}
.fb-big-chip.partial:hover{border-color:var(--earth);background:rgba(251,191,36,.08)}
.fb-big-chip.miss:hover{border-color:var(--fire);background:rgba(248,113,113,.08)}
.fb-big-chip.match.active{border-color:var(--wood);background:rgba(74,222,128,.24);box-shadow:0 0 24px rgba(74,222,128,.18)}
.fb-big-chip.partial.active{border-color:var(--earth);background:rgba(251,191,36,.24);box-shadow:0 0 24px rgba(251,191,36,.18)}
.fb-big-chip.miss.active{border-color:var(--fire);background:rgba(248,113,113,.24);box-shadow:0 0 24px rgba(248,113,113,.18)}
.fb-big-chip:focus{outline:2px solid var(--color-accent-deep);outline-offset:3px}

.fb-emoji{font-size:36px;line-height:1}
@media(max-width:520px){.fb-emoji{font-size:32px}}
.fb-big-label{color:var(--text);font-size:14px;font-weight:600;letter-spacing:.02em}
.fb-big-chip.match.active .fb-big-label{color:var(--wood)}
.fb-big-chip.partial.active .fb-big-label{color:var(--earth)}
.fb-big-chip.miss.active .fb-big-label{color:var(--fire)}

/* textarea */
.fb-textarea{width:100%;background:var(--color-bg-elevated);border:2px solid var(--color-border-default);border-radius:var(--r2);padding:16px 18px;color:var(--text);font-size:15px;font-family:inherit;line-height:1.65;resize:vertical;outline:none;transition:border-color .15s ease,box-shadow .15s ease;min-height:100px}
.fb-textarea::placeholder{color:var(--muted)}
.fb-textarea:focus{border-color:var(--color-accent-deep);box-shadow:var(--shadow-soft)}

/* 보내기 버튼 */
.fb-submit{width:100%;height:56px;border-radius:999px;border:2px solid var(--color-border-subtle);background:var(--color-bg-sunken);color:var(--color-text-tertiary);font-size:17px;font-weight:800;font-family:var(--font-display);cursor:not-allowed;transition:transform .12s ease,box-shadow .12s ease,background .15s ease,color .15s ease;display:flex;align-items:center;justify-content:center}
.fb-submit.active{background:var(--color-accent);color:var(--color-text-primary);border-color:var(--color-border-default);box-shadow:var(--shadow-soft);cursor:pointer}
.fb-submit.active:hover{background:var(--color-text-primary);color:var(--color-text-inverse);transform:translate(-2px,-2px);box-shadow:var(--shadow-lift)}
.fb-submit:active.active{transform:translate(1px,2px);box-shadow:var(--shadow-soft)}

/* Success / Error 배너 */
.fb-banner{display:none;align-items:center;gap:12px;padding:14px 18px;border-radius:12px;margin-bottom:20px;font-size:14px;font-weight:600;animation:fbCardIn .24s cubic-bezier(.4,0,.2,1) both;line-height:1.45}
.fb-banner.show{display:flex}
.fb-banner.ok{background:rgba(79,222,136,.18);color:var(--wood)}
.fb-banner.err{background:rgba(255,122,114,.18);color:var(--fire)}
.fb-banner-icon{font-size:18px;flex-shrink:0}
.fb-banner-msg{flex:1}

.fb-card.success-state{border-left-color:var(--wood)}
.fb-card.success-state .fb-form-area{opacity:.5;pointer-events:none}

@media(prefers-reduced-motion:reduce){
  .fb-card.show,.fb-banner{animation:none}
  .fb-big-chip,.fb-submit,.fb-textarea{transition:none}
}

/* 별점 */
.fb-stars{display:flex;gap:4px;justify-content:center}
.fb-star{background:none;border:none;cursor:pointer;font-size:34px;line-height:1;color:var(--border);padding:6px;min-width:44px;min-height:44px;transition:color .12s ease,transform .12s ease}
.fb-star:hover{transform:scale(1.12)}
.fb-star.on{color:var(--earth)}
.fb-star:focus{outline:2px solid var(--color-accent-deep);outline-offset:2px;border-radius:8px}

/* 저장·공유·멤버십 (준비중) */
.soon-card{margin:18px 0 28px;padding:24px;border:2px dashed var(--color-border-default);border-radius:var(--r);background:var(--color-bg-sunken);text-align:center}
.soon-title{font-family:var(--font-display);font-weight:800;font-size:var(--text-headline-2);color:var(--color-text-primary);margin-bottom:6px}
.soon-sub{font-size:var(--text-body-small);color:var(--color-text-secondary);margin-bottom:18px}
.soon-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.soon-btn{display:inline-flex;align-items:center;gap:6px;padding:12px 18px;border:2px solid var(--color-border-default);border-radius:999px;background:var(--color-bg-elevated);color:var(--color-text-tertiary);font-family:var(--font-display);font-weight:700;font-size:var(--text-body-small);cursor:not-allowed}
.soon-badge{font-size:var(--text-tiny);font-weight:800;color:var(--color-accent-deep);background:var(--color-accent-mist);border-radius:999px;padding:2px 8px}
.save-btn{display:inline-flex;align-items:center;gap:6px;padding:12px 22px;border:2px solid var(--color-border-strong);border-radius:999px;background:var(--color-accent);color:var(--color-text-primary);font-family:var(--font-display);font-weight:800;font-size:var(--text-body-small);cursor:pointer;box-shadow:var(--shadow-soft);transition:transform .12s ease,box-shadow .12s ease,background .15s ease,color .15s ease}
.save-btn:hover{background:var(--color-text-primary);color:var(--color-text-inverse);transform:translate(-2px,-2px);box-shadow:var(--shadow-lift)}
.save-btn:active{transform:translate(1px,2px);box-shadow:var(--shadow-soft)}
.save-btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}

/* === 사주 심화 챗봇 === */
.chat-card{position:relative;margin:18px 0 28px;padding:30px 24px 24px;border:2px solid var(--color-border-default);border-radius:var(--r);background:var(--color-bg-elevated);box-shadow:var(--shadow-medium)}
.chat-card::before{content:'심화 상담';position:absolute;top:-14px;left:22px;background:var(--color-sky);color:var(--color-text-primary);font-family:var(--font-display);font-size:var(--text-caption);font-weight:800;letter-spacing:.04em;padding:5px 14px;border:2px solid var(--color-border-default);border-radius:999px}
.chat-head{margin-bottom:16px}
.chat-title{display:block;font-family:var(--font-display);font-size:var(--text-headline-2);font-weight:800;color:var(--color-text-primary);letter-spacing:var(--tracking-tight)}
.chat-sub{display:block;margin-top:6px;font-size:var(--text-body-small);color:var(--color-text-secondary)}
.chat-hint{margin:14px 0 12px;padding:12px 14px;border:1px solid var(--color-border-default);border-radius:var(--r2);background:var(--color-bg-sunken);font-size:var(--text-body-small);color:var(--color-text-secondary);line-height:1.65}
.chat-hint b{color:var(--color-accent-deep);font-weight:700}
.chat-guide{margin:0 0 16px}
.chat-guide>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;font-size:var(--text-body-small);font-weight:700;color:var(--color-accent-deep)}
.chat-guide>summary::-webkit-details-marker{display:none}
.chat-guide>summary::after{content:'▾';font-size:.85em;transition:transform .15s ease}
.chat-guide[open]>summary::after{transform:rotate(180deg)}
.chat-guide-body{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.chat-ex{padding:11px 13px;border:1px solid var(--color-border-default);border-radius:var(--r2);background:var(--color-bg-sunken)}
.chat-ex .bad{display:block;font-size:var(--text-tiny);color:var(--color-text-secondary);text-decoration:line-through;opacity:.7;margin-bottom:5px}
.chat-ex .good{display:block;font-size:var(--text-body-small);color:var(--color-text-primary);line-height:1.6}
.chat-ex .good::before{content:'→ ';color:var(--color-accent-deep);font-weight:800}
.chat-send-cost{margin-top:8px;font-size:.76rem;line-height:1.5;color:var(--color-text-tertiary,var(--color-text-secondary));text-align:right;letter-spacing:.01em;opacity:.85;word-break:keep-all}
.chat-privacy{margin-top:10px;font-size:.76rem;line-height:1.5;color:var(--color-text-tertiary,var(--color-text-secondary));text-align:center;letter-spacing:.01em;opacity:.9}
.chat-log{display:flex;flex-direction:column;gap:12px;max-height:460px;overflow-y:auto;padding:4px 2px}
.chat-log:empty{display:none}
.chat-msg{max-width:88%;padding:12px 15px;border-radius:14px;font-size:.95rem;line-height:1.7;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;border:2px solid var(--color-border-default)}
.chat-msg.user{align-self:flex-end;background:var(--color-accent);color:var(--color-text-primary);border-bottom-right-radius:4px;font-weight:600}
.chat-msg.ai{align-self:flex-start;background:var(--color-bg-sunken);color:var(--color-text-primary);border-bottom-left-radius:4px}
.chat-msg.ai strong{color:var(--color-accent-deep);font-weight:700}
.chat-msg .blink{display:inline-block;width:7px;height:1.05em;vertical-align:text-bottom;background:var(--color-accent-deep);border-radius:2px;animation:chatBlink 1s steps(2,start) infinite;margin-left:2px}
@keyframes chatBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.chat-input-row{display:flex;gap:8px;align-items:flex-end;margin-top:16px}
.chat-input{flex:1;resize:none;background:var(--color-bg-elevated);border:2px solid var(--color-border-default);border-radius:var(--r2);color:var(--text);font-size:.95rem;line-height:1.5;padding:11px 14px;font-family:inherit;max-height:120px;transition:border-color .15s ease,box-shadow .15s ease}
.chat-input:focus{outline:none;border-color:var(--color-accent-deep);box-shadow:var(--shadow-soft)}
.chat-send{flex:none;width:46px;height:46px;border-radius:50%;border:2px solid var(--color-border-default);cursor:pointer;background:var(--color-accent);color:var(--color-text-primary);font-size:1.05rem;transition:transform .12s ease,box-shadow .12s ease}
.chat-send:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:var(--shadow-soft)}
.chat-send:disabled{opacity:.4;cursor:default}
/* 추천질문 2단계 주제 선택 (대분류 칩 → 중분류 아코디언 + Click&Fill) */
.chat-topics{margin-bottom:16px}
.chat-topic-row{display:flex;flex-wrap:wrap;gap:8px}
.chat-topic-chip{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;appearance:none;cursor:pointer;border:2px solid var(--color-border-default);background:var(--color-bg-elevated);color:var(--color-text-primary);border-radius:999px;padding:8px 16px;font-family:var(--font-display);font-size:var(--text-body-small);font-weight:700;word-break:keep-all;box-shadow:var(--shadow-soft);transition:transform .12s ease,box-shadow .12s ease,background .15s ease,border-color .15s ease,color .15s ease}
.chat-topic-chip:hover{transform:translateY(-1px);box-shadow:var(--shadow-medium)}
.chat-topic-chip:active{transform:translateY(1px);box-shadow:none}
.chat-topic-chip.on{border-color:var(--color-accent-deep);background:var(--color-accent-mist);color:var(--color-accent-soft)}
.chat-topic-chip.on::before{content:'▾ ';font-weight:900}
.chat-topic-chip .soon-badge{margin-left:2px;padding:1px 6px;border-radius:999px;border:1px solid var(--color-border-default);background:var(--color-bg-sunken);color:var(--color-text-tertiary);font-size:var(--text-tiny);font-weight:800}
.chat-topic-panel{margin-top:12px;padding:14px 14px 15px;border:1px solid var(--color-border-default);border-radius:var(--r2);background:var(--color-bg-sunken)}
.chat-topic-panel[hidden]{display:none}
.chat-topic-desc{margin:0 0 12px;font-size:var(--text-body-small);line-height:1.6;color:var(--color-text-secondary);word-break:keep-all}
.chat-topic-soon-note{margin:-4px 0 12px;font-size:var(--text-body-small);font-weight:700;color:var(--color-accent-soft)}
.chat-sub-row{display:flex;flex-wrap:wrap;gap:8px}
.chat-sub-chip{display:inline-flex;align-items:center;min-height:44px;appearance:none;cursor:pointer;border:2px solid var(--color-border-default);background:var(--color-bg-elevated);color:var(--color-text-primary);border-radius:999px;padding:8px 15px;font-size:var(--text-body-small);font-weight:600;word-break:keep-all;box-shadow:var(--shadow-soft);transition:transform .12s ease,box-shadow .12s ease,border-color .15s ease,color .15s ease}
.chat-sub-chip::before{content:'✎ ';color:var(--color-accent-deep);font-weight:800}
.chat-sub-chip:hover{transform:translateY(-1px);border-color:var(--color-accent-deep);box-shadow:var(--shadow-medium)}
.chat-sub-chip:active{transform:translateY(1px);box-shadow:none}
.chat-sub-chip[disabled]{cursor:default;opacity:.55;border-style:dashed;color:var(--color-text-tertiary);box-shadow:none}
.chat-sub-chip[disabled]::before{color:var(--color-text-tertiary)}
.chat-sub-chip[disabled]:hover{transform:none;border-color:var(--color-border-default);box-shadow:none}
/* ===================== 결과화면 리뉴얼: 우선순위 영역 ===================== */
/* [1] 지금 신경써야 할 것 — 결과화면의 히어로 카드 (피치 톤 + 한자 워터마크) */
.prio-card{position:relative;margin:0 0 22px;padding:38px 36px;border:2px solid var(--color-border-default);border-radius:var(--r);background:var(--color-accent-mist);box-shadow:var(--shadow-strong);overflow:hidden}
.prio-card::after{content:'運';position:absolute;right:-12px;bottom:-34px;font-family:var(--font-display);font-size:11rem;font-weight:900;line-height:1;color:var(--color-accent-soft);opacity:.5;z-index:0;pointer-events:none}
.prio-card>*{position:relative;z-index:1}
.prio-eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-size:var(--text-caption);letter-spacing:.02em;color:var(--color-text-inverse);background:var(--color-accent-deep);font-weight:700;margin-bottom:14px;padding:5px 13px;border-radius:999px}
.prio-headline{font-family:var(--font-display);font-size:var(--text-headline-1);font-weight:900;color:var(--color-text-primary);line-height:var(--leading-tight);margin-bottom:14px;letter-spacing:var(--tracking-tight)}
.prio-message{font-family:var(--font-sans);font-size:var(--text-body-large);line-height:var(--leading-relaxed);color:var(--color-text-primary);max-width:46ch}
.prio-badge{display:inline-block;margin-top:16px;font-family:var(--font-display);font-size:var(--text-caption);font-weight:700;padding:6px 16px;border-radius:999px;border:2px solid var(--color-border-default);background:var(--color-bg-elevated);color:var(--color-text-primary)}
.prio-loading{font-size:var(--text-body-small);color:var(--color-text-secondary);position:relative;z-index:1}
/* [2] 캐릭터 카드 — 일주 캐릭터(이모지 배지 + 천간색 이름) */
.char-card{position:relative;margin:0 0 22px;padding:40px 26px 32px;border:2px solid var(--color-border-default);border-radius:var(--r);background:var(--color-bg-elevated);box-shadow:var(--shadow-medium);text-align:center;overflow:hidden}
/* 천간색 은은한 상단 글로우 — JS가 카드에 --char-glow 변수를 주입(없으면 피치 fallback) */
.char-card::before{content:'';position:absolute;top:-90px;left:50%;transform:translateX(-50%);width:300px;height:200px;border-radius:50%;background:var(--char-glow,var(--color-accent-soft));opacity:.20;filter:blur(8px);pointer-events:none;z-index:0}
.char-card>*{position:relative;z-index:1}
.char-eyebrow{display:inline-block;font-family:var(--font-display);font-size:var(--text-caption);font-weight:700;letter-spacing:.04em;color:var(--color-accent-deep);background:var(--color-accent-mist);border-radius:999px;padding:5px 14px;margin-bottom:16px}
.char-emoji{display:inline-flex;align-items:center;justify-content:center;width:108px;height:108px;font-size:3.7rem;line-height:1;margin-bottom:18px;border:2px solid var(--color-border-default);border-radius:50%;background:var(--char-glow-bg,var(--color-bg-sunken));box-shadow:var(--shadow-soft)}
.animal-svg{width:62%;height:62%;display:block;overflow:visible}
/* 60갑자 캐릭터 일러스트(투명 webp) — 원형칩 대신 전신 figure + 천간색 오라 글로우 */
.char-emoji-figure{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;min-height:172px;margin-bottom:14px}
.char-emoji-figure::before{content:'';position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:158px;height:158px;border-radius:50%;background:var(--char-glow-bg,var(--color-bg-sunken));opacity:.55;filter:blur(17px);pointer-events:none;z-index:0}
.char-img{position:relative;z-index:1;height:172px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(0,0,0,.5))}
@media(max-width:520px){.char-emoji-figure{min-height:136px}.char-img{height:136px}}
.char-name{font-family:var(--font-display);font-size:var(--text-headline-1);font-weight:900;letter-spacing:var(--tracking-tight);line-height:var(--leading-tight)}
.char-hanja{font-family:var(--font-display);font-size:var(--text-body);font-weight:600;color:var(--color-text-secondary);margin-top:6px;letter-spacing:.04em}
.char-kw{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.char-kw span{font-size:var(--text-caption);font-weight:700;font-family:var(--font-sans);padding:7px 15px;border-radius:999px;border:2px solid var(--color-border-default);background:var(--color-bg-elevated);color:var(--color-text-primary)}
/* [3-1] 사주 인과 체인 — 일간→월령→십신→강점 흐름 */
.causal-chain{margin-top:20px;padding-top:18px;border-top:2px solid var(--color-border-subtle)}
.cc-flow{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:7px;margin-bottom:14px}
.cc-chip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 13px;border:2px solid var(--color-border-default);border-radius:var(--r2);background:var(--color-bg-elevated);font-family:var(--font-display);font-size:var(--text-body-large);font-weight:700;color:var(--color-text-primary);line-height:1.2}
.cc-chip em{font-size:var(--text-tiny);font-weight:500;color:var(--color-text-secondary);font-style:normal;margin-top:4px;white-space:nowrap}
.cc-chip.strong{border-color:var(--color-border-default);color:var(--color-text-primary);background:var(--color-accent-soft)}
.cc-arrow{color:var(--color-accent-deep);font-size:var(--text-body);font-weight:800;align-self:center}
@media (max-width:480px){
  /* 모바일 인과 체인 세로 스택 — 2줄 접힘 시 1행 끝 화살표가 허공을 가리키던 것(UX 감사, 매버릭 확정) */
  .cc-flow{flex-direction:column;flex-wrap:nowrap;align-items:center}
  .cc-flow .cc-arrow{transform:rotate(90deg)}
}
.cc-why{font-size:var(--text-body-small);color:var(--color-text-secondary);line-height:var(--leading-normal);text-align:center;background:var(--color-bg-sunken);border-radius:var(--r2);padding:12px 16px}
.cc-why strong{color:var(--color-accent-deep);font-weight:700}
/* [3] 특성 (기존 .res-section 재사용) */
.char-traits-text{font-family:var(--font-sans);font-size:var(--text-body-large);line-height:var(--leading-relaxed);color:var(--color-text-secondary)}
/* 특성을 스캔 가능한 포인트 칩 그리드로 — 줄글을 문장 단위로 분해 */
.trait-points{display:flex;flex-direction:column;gap:10px;margin-bottom:4px}
.trait-point{display:flex;align-items:flex-start;gap:11px;padding:13px 16px;background:var(--color-bg-sunken);border:2px solid var(--color-border-default);border-radius:var(--r2);font-family:var(--font-sans);font-size:var(--text-body-small);line-height:1.65;color:var(--color-text-primary);font-weight:500}
.trait-point::before{content:'';flex:none;width:9px;height:9px;margin-top:.5em;border-radius:50%;background:var(--tp-dot,var(--color-accent))}
.trait-point:nth-child(5n+1){--tp-dot:var(--wood)}
.trait-point:nth-child(5n+2){--tp-dot:var(--fire)}
.trait-point:nth-child(5n+3){--tp-dot:var(--earth)}
.trait-point:nth-child(5n+4){--tp-dot:var(--metal)}
.trait-point:nth-child(5n+5){--tp-dot:var(--water)}
/* [3-1] 사주 풀이 펼침 (관법) — 아웃라인 pill + 누름 인터랙션 */
.saju-full-btn{width:100%;margin-top:18px;cursor:pointer;border:2px solid var(--color-border-strong);background:var(--color-accent);color:var(--color-text-inverse);border-radius:999px;padding:16px 22px;font-size:1.02rem;font-weight:800;font-family:var(--font-display);letter-spacing:.02em;box-shadow:var(--shadow-soft);transition:transform .12s ease,box-shadow .12s ease,background .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.saju-full-btn::after{content:'→';font-weight:900;display:inline-block;transition:transform .15s ease}
.saju-full-btn:hover{background:var(--color-accent-deep);transform:translate(-2px,-2px);box-shadow:var(--shadow-lift)}
.saju-full-btn:hover::after{transform:translateX(5px)}
.saju-full-btn .unlock-coin{background:rgba(10,8,23,.18);color:inherit;font-size:.8rem;font-weight:800;padding:2px 9px;border-radius:999px;letter-spacing:0;font-family:var(--font-sans)}
.saju-full-btn:active{transform:translate(1px,2px);box-shadow:var(--shadow-soft)}
.saju-full-btn:disabled{opacity:.5;cursor:default;box-shadow:none;transform:none}
.saju-full-panel{display:none;margin-top:16px}
.saju-full-panel.show{display:block}
.saju-full-md{font-family:var(--font-sans);font-size:var(--text-body-large);line-height:var(--leading-relaxed);color:var(--color-text-primary)}
.saju-full-md p{margin:0 0 12px}
.saju-full-md strong{color:var(--color-text-strong);font-weight:700}
/* 풀이 끝 행동 계약 — 이렇게 하세요 / 이건 피하세요 (잉크빛 천문 토큰만) */
.dodont{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 4px}
@media(max-width:560px){.dodont{grid-template-columns:1fr}}
.dodont-col{border:var(--hairline);border-radius:var(--r-md,12px);background:var(--color-bg-elevated);padding:14px 16px}
.dodont-col.do{border-left:3px solid var(--color-accent)}
.dodont-col.dont{border-left:3px solid var(--color-deco-coral)}
.dodont-h{font-family:var(--font-display);font-weight:800;font-size:var(--text-caption);letter-spacing:.02em;margin-bottom:8px}
.dodont-col.do .dodont-h{color:var(--color-accent)}
.dodont-col.dont .dodont-h{color:var(--color-deco-coral)}
.dodont-col ul{margin:0;padding-left:1.05em;list-style:none}
.dodont-col li{position:relative;margin:0 0 7px;line-height:1.55;font-size:.95rem;color:var(--color-text-primary)}
.dodont-col li:last-child{margin-bottom:0}
.dodont-col li::before{content:'';position:absolute;left:-1.05em;top:.62em;width:5px;height:5px;border-radius:50%}
.dodont-col.do li::before{background:var(--color-accent)}
.dodont-col.dont li::before{background:var(--color-deco-coral)}
/* [4] 테마 버튼 — 한자 대문짝 + 누르면 펼침 */

.theme-card{position:relative;cursor:pointer;border:2px solid var(--color-border-default);border-radius:var(--r);background:var(--color-bg-elevated);box-shadow:var(--shadow-soft);padding:22px 14px 18px;text-align:center;transition:transform .14s ease,box-shadow .14s ease,background .15s ease;display:flex;flex-direction:column;align-items:center;gap:8px}
.theme-card:hover{box-shadow:var(--shadow-lift);transform:translate(-2px,-2px)}
.theme-card:active{transform:translate(1px,2px);box-shadow:var(--shadow-soft)}
.theme-card.open{background:var(--color-accent);box-shadow:var(--shadow-soft);transform:translate(0,0)}
.theme-card .tc-hanja{font-family:var(--font-display);font-size:2.6rem;font-weight:900;color:var(--color-text-primary);line-height:.95}
.theme-card .tc-label{font-family:var(--font-display);font-size:var(--text-body-small);color:var(--color-text-primary);font-weight:800;letter-spacing:.04em}
.theme-card .tc-preview{font-size:var(--text-tiny);font-weight:600;color:var(--color-accent-deep);min-height:1em;line-height:1.4}
.theme-card.open .tc-preview{color:var(--color-text-primary)}
.theme-card.soon{opacity:.65}
.theme-card.soon:hover{box-shadow:var(--shadow-soft);transform:none}
.theme-card .tc-soon{font-size:var(--text-tiny);color:var(--color-text-secondary);font-weight:700}
.tf-soon-msg{text-align:center;padding:24px 10px;color:var(--color-text-primary);font-size:var(--text-body-large);font-weight:700;line-height:var(--leading-normal)}
.tf-soon-msg span{display:block;margin-top:8px;font-size:var(--text-body-small);font-weight:400;color:var(--color-text-secondary)}
.theme-full{position:relative;margin-top:16px;border:2px solid var(--color-border-default);border-radius:var(--r);padding:28px 26px 24px;background:var(--color-bg-elevated);box-shadow:var(--shadow-soft);display:none}
.theme-full.show{display:block;animation:tfIn .28s ease-out both}
@keyframes tfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.theme-full .tf-title{font-family:var(--font-display);font-size:var(--text-headline-2);font-weight:800;margin-bottom:16px;padding-bottom:14px;border-bottom:2px solid var(--color-border-subtle);color:var(--color-text-primary);letter-spacing:var(--tracking-tight)}
.theme-full-md{font-family:var(--font-sans);font-size:var(--text-body-large);line-height:var(--leading-relaxed);color:var(--color-text-primary)}
.theme-full-md p{margin:0 0 12px}
.theme-full-md strong{color:var(--color-text-strong);font-weight:700}
.theme-full .tf-loading{color:var(--color-text-secondary);font-size:var(--text-body-small)}
.tf-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 16px;text-align:center;color:var(--color-text-secondary);font-size:var(--text-body-small)}
.tf-spinner{width:46px;height:46px;border:3px solid var(--color-bg-sunken);border-top-color:var(--color-accent);border-right-color:var(--color-accent);border-radius:50%;animation:tfspin .9s linear infinite}
@keyframes tfspin{to{transform:rotate(360deg)}}
.tf-msg{font-weight:800;font-family:var(--font-display);color:var(--color-text-primary);font-size:1.05rem;line-height:1.4;display:flex;align-items:center;gap:4px}
.tf-msg::after{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;animation:tfdot 1.2s ease-in-out infinite;margin-left:2px}
@keyframes tfdot{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.tf-sub{font-size:var(--text-tiny);color:var(--color-text-tertiary);line-height:1.6;max-width:280px}
/* "지금 중요한 것" 입력 */
.prio-check{margin-top:20px;border-top:2px solid var(--color-border-subtle);padding-top:18px}
.prio-check-q{font-family:var(--font-display);font-size:var(--text-body);font-weight:800;margin-bottom:12px;color:var(--color-text-primary)}
.prio-check-row{display:flex;gap:10px;align-items:stretch}
.prio-check textarea{flex:1;resize:none;background:var(--color-bg-elevated);border:2px solid var(--color-border-default);border-radius:var(--r2);color:var(--text);padding:12px 14px;font-size:var(--text-body-small);font-family:inherit;line-height:var(--leading-normal);transition:box-shadow .15s ease,border-color .15s ease}
.prio-check textarea:focus{outline:none;border-color:var(--color-accent-deep);box-shadow:var(--shadow-soft)}
.prio-check button{cursor:pointer;border:2px solid var(--color-border-default);background:var(--color-accent);color:var(--color-text-primary);border-radius:var(--r2);padding:10px 20px;font-size:var(--text-body-small);font-weight:800;font-family:var(--font-display);white-space:nowrap;transition:transform .12s ease,box-shadow .12s ease,background .15s ease,color .15s ease}
.prio-check button:hover{background:var(--color-text-primary);color:var(--color-text-inverse);transform:translate(-1px,-1px);box-shadow:var(--shadow-soft)}
.prio-check button:active{transform:translate(1px,1px);box-shadow:none}
.prio-check button:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.match-card{margin-top:18px;border:2px solid var(--color-border-default);border-left-width:8px;border-radius:var(--r);padding:20px 22px;background:var(--color-bg-elevated);box-shadow:var(--shadow-soft);animation:tfIn .26s ease-out both}
.match-card.aligned{border-left-color:var(--wood)}
.match-card.tension{border-left-color:var(--fire)}
.match-card.mixed{border-left-color:var(--earth)}
.match-title{font-family:var(--font-display);font-size:var(--text-caption);letter-spacing:.02em;color:var(--color-text-secondary);font-weight:700;margin-bottom:8px}
.match-headline{font-family:var(--font-display);font-size:var(--text-headline-2);font-weight:800;margin-bottom:12px;color:var(--color-text-primary);line-height:var(--leading-tight)}
.match-body{font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-relaxed);color:var(--color-text-secondary)}
.match-body p{margin:0 0 10px}
@media(max-width:700px){.theme-card .tc-hanja{font-size:2.1rem}.char-name{font-size:1.4rem}.prio-headline{font-size:1.35rem}.prio-card::after{font-size:8rem}}

/* 입력 화면 "관심사 미리 고르기" 멀티 칩 픽커 (체크한 풀이가 결과 최상단으로) */
.focus-picker{display:flex;flex-direction:column;gap:13px}
.fpk-head{font-size:.72rem;font-weight:700;color:var(--color-text-tertiary);margin-bottom:7px;letter-spacing:.02em}
.fpk-row{display:flex;flex-wrap:wrap;gap:8px}
.focus-chip{cursor:pointer;border:2px solid var(--color-border-default);background:var(--color-bg-elevated);color:var(--color-text-primary);border-radius:999px;padding:9px 15px;font-size:.86rem;font-weight:700;font-family:var(--font-display);transition:border-color .14s ease,background .14s ease,box-shadow .14s ease,color .14s ease}
.focus-chip:hover{box-shadow:var(--shadow-soft)}
.focus-chip.on{border-color:var(--color-accent-deep);background:var(--color-accent-mist);color:var(--color-accent-deep)}
.focus-chip.on::before{content:'✓ ';font-weight:900}
/* 고른 풀이를 담는 결과 최상단 스택 */
#focusTop{display:none;flex-direction:column;gap:16px}
.focus-top-card{margin-top:0;animation:cardIn .42s ease-out both}
/* ===== [신규] 2030 연애·성장 섹션 ===== */
.grow2030-section{
  margin:8px 0 24px;
  padding:18px 16px 20px;
  background:var(--color-bg-sunken);
  border:2px solid var(--color-border-default);
  border-left-width:8px;
  border-left-color:var(--color-accent);
  border-radius:var(--r);
}
.grow2030-head{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-display);
  font-size:var(--text-body-large);
  font-weight:800;
  color:var(--color-text-primary);
  margin-bottom:4px;
  letter-spacing:var(--tracking-tight);
}
.grow2030-head::before{
  content:'';flex:none;width:10px;height:10px;border-radius:50%;
  background:var(--color-accent);
  border:2px solid var(--color-border-default);
}
.grow2030-sub{
  font-family:var(--font-sans);
  font-size:var(--text-caption);
  color:var(--color-text-secondary);
  margin-bottom:16px;
  line-height:var(--leading-normal);
}
.grow2030-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.grow2030-card{
  position:relative;cursor:pointer;
  border:2px solid var(--color-border-default);
  border-radius:var(--r2);
  background:var(--color-bg-elevated);
  box-shadow:var(--shadow-soft);
  padding:18px 14px 16px;
  min-height:120px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:transform .14s ease,box-shadow .14s ease,background .15s ease;
}
.grow2030-card:hover{box-shadow:var(--shadow-lift);transform:translate(-2px,-2px)}
.grow2030-card:active{transform:translate(1px,2px);box-shadow:var(--shadow-soft)}
.grow2030-card.open{background:var(--color-accent-mist);box-shadow:var(--shadow-soft);transform:translate(0,0)}
.grow2030-card.done::after{content:'✓';position:absolute;top:8px;right:8px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:var(--color-bg-elevated);background:var(--color-accent-deep);border-radius:50%;line-height:1}
.grow2030-card .g2-icon{
  width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;
  font-size:1.9rem;line-height:1;
  border:2px solid var(--color-border-default);border-radius:50%;
  background:var(--g2-tone,var(--color-bg-sunken));
}
.grow2030-card .g2-label{
  font-family:var(--font-display);
  font-size:var(--text-body-small);
  font-weight:800;color:var(--color-text-primary);
  letter-spacing:.02em;
}
.grow2030-card .g2-desc{
  font-size:var(--text-tiny);
  font-weight:600;color:var(--color-text-secondary);
  line-height:1.4;min-height:1em;
}
.grow2030-card.open .g2-desc{color:var(--color-accent-deep)}
.grow2030-card:nth-child(1) .g2-icon{--g2-tone:var(--color-accent-soft)}
.grow2030-card:nth-child(2) .g2-icon{--g2-tone:var(--fire-bg)}
.grow2030-card:nth-child(3) .g2-icon{--g2-tone:var(--wood-bg)}
.grow2030-card:nth-child(4) .g2-icon{--g2-tone:var(--water-bg)}
.grow2030-full{margin-top:0}
.grow2030-full .theme-full{margin-top:16px}
.g2-cost .unlock-coin{font-style:normal;font-weight:800;font-family:var(--font-sans)}
.g2-unlock .g2-unlock-desc{margin:0;font-size:var(--text-body-small);color:var(--color-text-secondary);line-height:1.6;word-break:keep-all}
.g2-unlock .g2-unlock-btn{margin-top:16px}
/* ③ 캐릭터카드 화면 미리보기 (9:16 캡처와 별개의 인앱 카드) */
.cc-preview{
  --cc-glow:var(--color-accent);
  margin:6px 0 4px;padding:26px 20px 28px;
  border:2px solid var(--color-border-default);border-radius:var(--r);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--cc-glow-bg,var(--color-bg-sunken)) 0%, transparent 65%),
    var(--color-bg-elevated);
  box-shadow:var(--shadow-soft);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
}
.cc-pv-emoji{
  width:96px;height:96px;display:flex;align-items:center;justify-content:center;
  font-size:54px;line-height:1;
  border:3px solid var(--color-border-default);border-radius:50%;
  background:var(--cc-glow-bg,var(--color-bg-elevated));
  box-shadow:var(--shadow-soft);
}
.cc-pv-emoji-figure{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:150px}
.cc-pv-emoji-figure::before{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:140px;height:140px;border-radius:50%;background:var(--cc-glow-bg,var(--color-bg-elevated));opacity:.5;filter:blur(15px);pointer-events:none;z-index:0}
.cc-pv-img{position:relative;z-index:1;height:150px;width:auto;object-fit:contain;filter:drop-shadow(0 9px 18px rgba(0,0,0,.45))}
.cc-pv-alias{font-family:var(--font-display);font-size:1.7rem;font-weight:900;line-height:1.1;letter-spacing:var(--tracking-tight)}
.cc-pv-hanja{font-size:var(--text-caption);font-weight:600;color:var(--color-text-secondary)}
.cc-pv-tagline{font-family:var(--font-display);font-size:var(--text-body);font-weight:800;color:var(--color-text-primary);line-height:1.35;max-width:320px}
.cc-pv-kw{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:2px}
.cc-pv-kw span{font-family:var(--font-sans);font-size:var(--text-tiny);font-weight:700;padding:5px 13px;border-radius:999px;border:2px solid var(--color-border-default);background:var(--color-bg-elevated);color:var(--color-text-primary);box-shadow:var(--shadow-soft)}
.cc-pv-desc{font-family:var(--font-sans);font-size:var(--text-body-small);font-weight:500;line-height:var(--leading-normal);color:var(--color-text-primary);white-space:pre-line;max-width:340px}
.cc-actions{margin-top:18px;display:flex;justify-content:center}
@media(min-width:700px){
  .grow2030-grid{grid-template-columns:repeat(4,1fr);gap:14px}
  .grow2030-section{padding:22px 22px 24px}
}
@media(max-width:360px){
  .grow2030-grid{grid-template-columns:1fr}
}

/* ===== [신규] 9:16 공유 캐릭터카드 (1080×1920, html2canvas 타깃) ===== */
.story-card{
  position:fixed;left:-99999px;top:0;
  width:1080px;height:1920px;
  box-sizing:border-box;
  padding:96px 88px;
  display:flex;flex-direction:column;align-items:center;
  font-family:var(--font-display);
  background:
    radial-gradient(120% 70% at 50% 0%, var(--sc-glow-bg,rgba(99,234,137,.10)) 0%, transparent 60%),
    radial-gradient(80% 50% at 82% 96%, rgba(201,87,190,.16), transparent 60%),
    linear-gradient(165deg, #242233 0%, #14121f 55%, #0c0a15 100%);
  border:6px solid var(--color-border-strong);
  overflow:hidden;
}
.story-card::before{
  content:'';position:absolute;top:-180px;left:50%;transform:translateX(-50%);
  width:760px;height:520px;border-radius:50%;
  background:var(--sc-glow,var(--color-accent));
  opacity:.18;filter:blur(60px);pointer-events:none;z-index:0;
}
.story-card > *{position:relative;z-index:1}
.story-card .sc-brand{
  font-size:34px;font-weight:900;letter-spacing:.18em;
  color:var(--color-text-primary);text-transform:uppercase;
  margin-bottom:56px;
}
.story-card .sc-brand::after{
  content:'';display:inline-block;width:12px;height:12px;border-radius:50%;
  background:var(--color-accent);margin-left:10px;vertical-align:middle;
}
.story-card .sc-emoji{
  width:240px;height:240px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:128px;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--font-display);
  border:5px solid var(--color-border-strong);border-radius:50%;
  background:var(--sc-glow-bg,var(--color-bg-elevated));
  box-shadow:0 12px 40px rgba(0,0,0,.5), 0 0 34px -4px rgba(99,234,137,.4);
  margin-bottom:40px;
}
/* SNS 9:16 카드 캐릭터 일러스트 전신(html2canvas 캡처) */
.story-card .sc-emoji-figure{position:relative;flex:none;display:flex;align-items:flex-end;justify-content:center;min-height:380px;margin-bottom:40px}
.story-card .sc-emoji-figure::before{content:'';position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:380px;height:380px;border-radius:50%;background:var(--sc-glow-bg,var(--color-bg-elevated));opacity:.55;filter:blur(42px);pointer-events:none;z-index:0}
.story-card .sc-img{position:relative;z-index:1;height:380px;width:auto;object-fit:contain;filter:drop-shadow(0 18px 44px rgba(0,0,0,.55))}
.story-card .sc-alias{
  font-size:92px;font-weight:900;line-height:1.05;
  letter-spacing:var(--tracking-tight);
  color:var(--sc-glow,var(--color-text-primary));
  text-align:center;
  max-width:900px;
}
.story-card .sc-hanja{
  font-size:34px;font-weight:600;letter-spacing:.06em;
  color:var(--color-text-secondary);
  margin-top:14px;margin-bottom:32px;
}
.story-card .sc-tagline{
  font-size:46px;font-weight:800;line-height:1.3;
  color:var(--color-text-primary);
  text-align:center;max-width:880px;
  letter-spacing:var(--tracking-tight);
  margin-bottom:40px;
}
.story-card .sc-keywords{
  display:flex;flex-wrap:wrap;justify-content:center;gap:16px;
  max-width:920px;margin-bottom:40px;
}
.story-card .sc-keywords span{
  font-family:var(--font-sans);
  font-size:30px;font-weight:700;
  padding:14px 30px;border-radius:999px;
  border:2px solid var(--color-border-strong);
  background:var(--color-bg-elevated);
  color:var(--color-text-primary);
  box-shadow:0 0 14px rgba(99,234,137,.18);
}
.story-card .sc-desc{
  font-family:var(--font-sans);
  font-size:28px;font-weight:500;line-height:1.5;
  color:var(--color-text-primary);
  text-align:center;max-width:880px;
  margin-top:8px;white-space:pre-line;overflow:hidden;
}
.story-card .sc-spacer{flex:1 1 auto;min-height:24px}
.story-card .sc-footer{
  font-family:var(--font-sans);
  font-size:26px;font-weight:700;letter-spacing:.04em;
  color:var(--color-text-secondary);
  text-align:center;
}
.story-card .sc-footer strong{color:var(--color-accent-deep);font-weight:800}
.story-card .sc-disclaimer{
  font-family:var(--font-sans);
  font-size:24px;font-weight:500;letter-spacing:.03em;
  color:var(--color-text-tertiary);
  text-align:center;margin-top:12px;
}
#storyCardRoot{position:fixed;left:-99999px;top:0;width:1080px;height:0;overflow:hidden}

/* 대운 타임라인 (10년마다 바뀌는 큰 운) */
.dw-timeline-wrap{margin:0 0 20px;padding:18px 16px;background:var(--color-bg-sunken);border:2px solid var(--color-border-default);border-radius:var(--r)}
.dw-tl-label{font-family:var(--font-display);font-size:var(--text-body-small);color:var(--color-text-primary);margin-bottom:14px;font-weight:800}
.dw-timeline{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
.dw-item{flex:0 0 auto;min-width:66px;text-align:center;padding:18px 9px 12px;border:2px solid var(--color-border-default);border-radius:var(--r2);background:var(--color-bg-elevated);position:relative;transition:transform .12s ease,box-shadow .12s ease;scroll-snap-align:start;border-top:4px solid var(--color-state-future)}
.dw-item .dw-dir{position:absolute;top:3px;right:5px;font-size:.56rem;color:var(--color-text-tertiary);font-weight:800;letter-spacing:.02em;font-family:var(--font-display)}
.dw-item.cur .dw-dir{color:var(--color-accent-deep)}
.dw-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.dw-item.past{opacity:.5;border-top-color:var(--color-state-past)}
.dw-item.cur{border-width:3px;border-top:4px solid var(--color-state-current);background:var(--color-accent-mist);box-shadow:var(--shadow-soft)}
.dw-age{font-size:var(--text-tiny);color:var(--color-text-secondary);margin-bottom:6px;white-space:nowrap;font-weight:600}
.dw-ganji{font-family:var(--font-display);font-size:1.5rem;font-weight:900;line-height:1.05}
.dw-eum{font-size:var(--text-tiny);color:var(--color-text-tertiary);margin-top:4px}
.dw-now{font-size:var(--text-tiny);color:var(--color-accent-deep);font-weight:800;margin-top:6px;letter-spacing:.04em}
.dw-tl-hint{font-size:var(--text-caption);color:var(--color-text-secondary);margin-top:10px;line-height:var(--leading-normal)}

/* ===== 대운 인터랙티브 — 오행 동그라미 + 클릭 타임라인 + 시기별 풀이 ===== */
.dw-orbit-wrap{padding:18px 12px 14px;background:var(--color-bg-elevated);border:2px solid var(--color-border-default);border-radius:var(--r);margin-bottom:16px;overflow:hidden;position:relative}
.dw-orbit-title{font-family:var(--font-display);font-size:var(--text-body-small);font-weight:800;color:var(--color-text-primary);text-align:center}
.dw-orbit-sub{font-size:var(--text-tiny);color:var(--color-text-tertiary);text-align:center;margin:2px 0 14px}
.oh-orbit{position:relative;width:100%;max-width:330px;margin:12px auto 6px;aspect-ratio:1/1}

/* ── 중앙 무대(ring) : 기준 궤도 + 천천히 도는 후광 ── */
.oh-orbit-ring{position:absolute;left:50%;top:50%;width:56%;height:56%;transform:translate(-50%,-50%);border:2px solid var(--color-border-default);border-radius:50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.9), var(--color-bg-sunken) 62%),
    var(--color-bg-sunken);
  box-shadow:inset 0 2px 12px rgba(0,0,0,.40), inset 0 -3px 10px rgba(99,234,137,.16);
  overflow:visible}
/* 회전하는 궤도 글로우 링 (conic 그라데이션, ::before) */
.oh-orbit-ring::before{content:"";position:absolute;inset:-9%;border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(63,168,107,.0), rgba(232,93,78,.16), rgba(240,180,41,.0),
    rgba(123,135,148,.14), rgba(59,130,196,.0), rgba(63,168,107,.16), rgba(63,168,107,.0));
  -webkit-mask:radial-gradient(circle, transparent 60%, #000 64%, #000 72%, transparent 76%);
          mask:radial-gradient(circle, transparent 60%, #000 64%, #000 72%, transparent 76%);
  opacity:.0;animation:ohRingSpin 18s linear infinite;will-change:transform;pointer-events:none}
.oh-orbit.ready .oh-orbit-ring::before{opacity:1;transition:opacity .8s ease}
/* 중앙 코어 점멸(맥) */
.oh-orbit-ring::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;transform:translate(-50%,-50%);border-radius:50%;
  background:var(--color-accent);box-shadow:0 0 0 0 rgba(99,234,137,.45);animation:ohCorePulse 3.4s ease-in-out infinite}
@keyframes ohRingSpin{to{transform:rotate(360deg)}}
@keyframes ohCorePulse{0%,100%{box-shadow:0 0 0 0 rgba(99,234,137,.5);opacity:.9}50%{box-shadow:0 0 0 7px rgba(99,234,137,0);opacity:.5}}

/* 선택 전환 시 중앙에서 퍼지는 리플 */
.oh-orbit-ripple{position:absolute;left:50%;top:50%;width:56%;height:56%;transform:translate(-50%,-50%) scale(.6);border-radius:50%;
  border:2px solid var(--color-accent);opacity:0;pointer-events:none;z-index:0}
.oh-orbit.rippling .oh-orbit-ripple{animation:ohRipple .7s cubic-bezier(.25,.8,.4,1)}
@keyframes ohRipple{0%{transform:translate(-50%,-50%) scale(.55);opacity:.55}100%{transform:translate(-50%,-50%) scale(2.1);opacity:0}}

/* ── 오행 원 : 입체 채움 + 외곽 글로우 ── */
.oh-circle{position:absolute;transform:translate(-50%,-50%) scale(1);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;border:2.5px solid;font-family:var(--font-display);text-align:center;box-sizing:border-box;
  will-change:width,height,transform;
  transition:width .62s cubic-bezier(.34,1.4,.5,1),height .62s cubic-bezier(.34,1.4,.5,1),transform .45s cubic-bezier(.34,1.5,.5,1),opacity .4s,box-shadow .5s ease;
  z-index:2}
/* ::before = 내부 광택/유동 레이어 (오행별 ambient 모션이 여기서 돔 → 원 본체 animation 슬롯은 진입/bump 전용) */
.oh-circle::before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle at 38% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 58%);pointer-events:none;opacity:.9;transform-origin:50% 50%}
.oh-circle .ohc-name{font-weight:900;line-height:1;position:relative;z-index:1;text-shadow:0 1px 2px rgba(255,255,255,.6)}
.oh-circle .ohc-pct{font-size:.6rem;font-weight:800;margin-top:1px;opacity:.8;position:relative;z-index:1}

/* 진입 stagger pop */
.oh-orbit.ready .oh-circle{animation:ohEnter .5s cubic-bezier(.34,1.5,.5,1) backwards}
.oh-orbit.ready .oh-circle.idx-0{animation-delay:.02s}
.oh-orbit.ready .oh-circle.idx-1{animation-delay:.09s}
.oh-orbit.ready .oh-circle.idx-2{animation-delay:.16s}
.oh-orbit.ready .oh-circle.idx-3{animation-delay:.23s}
.oh-orbit.ready .oh-circle.idx-4{animation-delay:.30s}
@keyframes ohEnter{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}60%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}

/* 전환 시 톡 튀는 리바운드 (JS가 .bump 토글) */
.oh-circle.bump{animation:ohBump .55s cubic-bezier(.34,1.6,.45,1)}
@keyframes ohBump{0%{transform:translate(-50%,-50%) scale(1)}35%{transform:translate(-50%,-50%) scale(1.14)}100%{transform:translate(-50%,-50%) scale(1)}}

/* 오행별 정체성 — 채움 그라데이션 + 외곽 컬러 글로우 (본체) / ambient 모션은 ::before 에서 */
.oh-circle.w-목{border-color:var(--wood);color:var(--wood);
  background:radial-gradient(circle at 42% 34%, rgba(63,168,107,.10), var(--wood-fill) 78%);
  box-shadow:0 4px 14px rgba(63,168,107,.22), inset 0 -4px 10px rgba(63,168,107,.18)}
.oh-circle.w-화{border-color:var(--fire);color:var(--fire);
  background:radial-gradient(circle at 42% 36%, rgba(255,160,120,.55), var(--fire-fill) 80%);
  box-shadow:0 4px 16px rgba(232,93,78,.26), inset 0 -4px 12px rgba(232,93,78,.22)}
.oh-circle.w-토{border-color:var(--earth);color:var(--earth);
  background:radial-gradient(circle at 42% 34%, rgba(245,210,110,.5), var(--earth-fill) 82%);
  box-shadow:0 4px 14px rgba(240,180,41,.24), inset 0 -4px 10px rgba(240,180,41,.2)}
.oh-circle.w-금{border-color:var(--metal);color:var(--metal);
  background:linear-gradient(135deg, rgba(214,221,228,.7) 0%, var(--metal-fill) 45%, rgba(190,200,210,.5) 70%, var(--metal-fill) 100%);
  box-shadow:0 4px 14px rgba(123,135,148,.24), inset 0 -4px 10px rgba(123,135,148,.18)}
.oh-circle.w-수{border-color:var(--water);color:var(--water);
  background:radial-gradient(circle at 42% 30%, rgba(150,200,240,.55), var(--water-fill) 80%);
  box-shadow:0 4px 16px rgba(59,130,196,.26), inset 0 -4px 12px rgba(59,130,196,.22)}

/* ambient 모션 — ::before 내부 광택 레이어에서만 (본체 transform/animation 슬롯과 충돌 없음) */
.oh-circle.w-목::before{animation:ohWoodSway 6s ease-in-out infinite}      /* 생명·새싹: 좌우 흔들림 */
.oh-circle.w-화::before{background:radial-gradient(circle at 42% 32%, rgba(255,200,150,.9), rgba(255,140,90,0) 60%);animation:ohFireFlicker 2.4s ease-in-out infinite} /* 불꽃: 일렁이는 광 */
.oh-circle.w-토::before{animation:ohEarthBreathe 5.2s ease-in-out infinite} /* 대지: 느린 숨 */
.oh-circle.w-금::before{background:linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.95) 48%, rgba(255,255,255,0) 66%);background-size:260% 100%;animation:ohMetalShine 4.4s ease-in-out infinite} /* 금속: 광택 스윕 */
.oh-circle.w-수::before{animation:ohWaterRipple 4.4s ease-in-out infinite}  /* 물결: 위아래 유동 */

@keyframes ohWoodSway{0%,100%{transform:rotate(-3deg) translateY(1px)}50%{transform:rotate(3deg) translateY(-1px)}}
@keyframes ohFireFlicker{0%,100%{opacity:.7;transform:scale(.96) translateY(1px)}45%{opacity:1;transform:scale(1.06) translateY(-1.5px)}70%{opacity:.82;transform:scale(1) translateY(0)}}
@keyframes ohEarthBreathe{0%,100%{transform:scale(.9);opacity:.8}50%{transform:scale(1.05);opacity:1}}
@keyframes ohMetalShine{0%{background-position:140% 0}55%,100%{background-position:-40% 0}}
@keyframes ohWaterRipple{0%,100%{transform:translateY(2px) scaleX(1.02)}50%{transform:translateY(-2px) scaleX(.98)}}

/* ── 지배 오행(가장 센 기운) 강조 : 숨쉬는 후광 ── */
.oh-circle.dominant{z-index:3}
.oh-circle.dominant::after{content:"";position:absolute;inset:-26%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle, currentColor 0%, transparent 62%);opacity:.0;
  animation:ohDominantGlow 2.8s ease-in-out infinite}
.oh-orbit.ready .oh-circle.dominant::after{opacity:.28}
@keyframes ohDominantGlow{0%,100%{transform:scale(.82);opacity:.16}50%{transform:scale(1.12);opacity:.34}}
.dw-timeline.clickable .dw-item{cursor:pointer}
.dw-item.sel{border-width:3px;border-top:4px solid var(--color-accent-deep);background:var(--color-accent-soft);box-shadow:var(--shadow-soft);transform:translateY(-2px)}
.dw-item.sel .dw-dir{color:var(--color-accent-deep)}
.dw-reading{margin-top:6px;padding:18px 16px;background:var(--color-bg-sunken);border:2px solid var(--color-border-default);border-radius:var(--r)}
.dw-reading-head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.dw-reading-ganji{font-family:var(--font-display);font-size:1.45rem;font-weight:900}
.dw-reading-age{font-size:var(--text-body-small);color:var(--color-text-secondary);font-weight:700}

.dw-reading-body{font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-relaxed);color:var(--color-text-secondary)}
.dw-reading-body p{margin:0 0 10px}
/* P0-2: 대운 구간 누락 시 재요청 안내 */
.dw-missing-note{font-size:var(--text-body-small);color:var(--color-text-tertiary,var(--color-text-secondary));margin-top:8px}
.dw-retry-btn{margin-left:6px;padding:5px 13px;border-radius:999px;border:2px solid var(--color-border-default);background:var(--color-bg-elevated);color:var(--color-accent-deep);font-family:var(--font-display);font-weight:700;font-size:.82rem;cursor:pointer;transition:border-color .14s ease}
.dw-retry-btn:hover{border-color:var(--color-accent-deep)}
.dw-reading-body .typing{opacity:.55}
.dw-overview{font-family:var(--font-sans);font-size:var(--text-body-small);line-height:var(--leading-relaxed);color:var(--color-text-secondary);margin-bottom:14px;padding:10px 14px;background:var(--color-accent-mist);border-radius:var(--r2)}
@media(max-width:480px){.oh-orbit{max-width:280px}.oh-circle .ohc-pct{font-size:.52rem}.oh-circle.dominant::after{inset:-20%}}
/* 접근성: 모션 줄이기 — ambient/회전/리플/숨쉬기 끄고 정적 글로우만 유지 */
@media (prefers-reduced-motion: reduce){
  .oh-orbit-ring::before,.oh-orbit-ring::after,
  .oh-circle,.oh-circle::before,.oh-circle.bump,
  .oh-circle.w-목::before,.oh-circle.w-화::before,.oh-circle.w-토::before,.oh-circle.w-금::before,.oh-circle.w-수::before,
  .oh-circle.dominant::after,.oh-orbit.rippling .oh-orbit-ripple,.oh-orbit.ready .oh-circle{
    animation:none !important}
  .oh-circle{transform:translate(-50%,-50%) !important}
  .oh-circle::before{transform:none !important}
  .oh-orbit.ready .oh-circle.dominant::after{opacity:.26}
}

/* ===================== 전역 폴리시 & 반응형 ===================== */
::selection{background:var(--color-accent);color:var(--color-text-primary)}
html{scroll-behavior:smooth}
:focus-visible{outline:2px solid var(--color-accent-deep);outline-offset:2px}

/* 결과 영역도 코너 장식 원을 깔아 헤더와 톤 연결 */
#results{position:relative}

/* 태블릿 */
@media(max-width:700px){
  header{padding:var(--space-xl) var(--space-sm) var(--space-lg)}
  header::before{width:260px;height:260px;top:-110px;right:-80px}
  header::after{width:170px;height:170px;bottom:-90px;left:-70px}
  .card{padding:22px}

  .theme-card{padding:16px 8px 14px}
  .char-emoji{width:74px;height:74px;font-size:2.4rem}
  .prio-card{padding:26px 22px}
  .ai-hero::before,.chat-card::before{left:16px;font-size:var(--text-tiny)}
}
/* 모바일 */
@media(max-width:480px){

  .prio-check-row{flex-direction:column;align-items:stretch}
  .prio-check button{width:100%}
}

/* === 보기 모드 토글 (혼자 / 궁합) — 진입 분기 === */
.mode-toggle {
  display: flex;
  gap: 4px;
  max-width: 420px;
  margin: 0 auto 22px;
  background: var(--color-bg-elevated, #fff);
  border: 2px solid var(--color-border-default, #1A1A1A);
  border-radius: 999px;
  padding: 5px;
  box-shadow: 0 0 18px rgba(99,234,137,.10), 0 4px 16px rgba(0,0,0,.4);
  box-sizing: border-box;
}
.mode-toggle .mode-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 10px;
  border-radius: 999px;
  font-family: var(--font-display, "Poppins", "Pretendard", sans-serif);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  color: var(--color-text-secondary, #6B7280);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.mode-toggle .mode-tab.on {
  background: var(--color-deco-sky, #6E63C9);
  color: var(--color-text-primary, #ECEAF6);
  box-shadow: 0 0 16px -2px rgba(110,99,201,.6);
}
.mode-toggle .mode-tab:not(.on):hover { color: var(--color-text-primary, #1A1A1A); }
@media (max-width: 380px) {
  .mode-toggle .mode-tab { font-size: .85rem; padding: 10px 8px; }
}
/* ════════ 오행 命 오레리 — 3D 회전 히어로 (랜딩 센터피스, 레퍼런스 매칭) ════════ */
.orrery-wrap{display:flex;justify-content:center;align-items:center;margin:6px 0 26px;pointer-events:none;-webkit-user-select:none;user-select:none}
.orrery{position:relative;width:300px;height:300px;max-width:76vw;max-height:76vw;perspective:1000px}
.orrery-tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(46deg)}
.orrery-spin{position:absolute;inset:0;transform-style:preserve-3d;animation:orrSpin 42s linear infinite}
.orrery-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orb-pos{position:absolute;transform:translate(-50%,-50%);transform-style:preserve-3d}
.orb-ccw{transform-style:preserve-3d;animation:orrSpinCcw 42s linear infinite}
.orb-flat{transform:rotateX(-46deg)}
.orb{position:relative;display:flex;align-items:center;justify-content:center;width:clamp(30px,9.5vw,40px);height:clamp(30px,9.5vw,40px);border-radius:50%;box-shadow:0 0 13px -4px var(--oc),0 3px 10px -5px oklch(0 0 0/.55);animation:orbPulse 5s ease-in-out infinite}
.orb::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 36% 30%,oklch(1 0 0/.38) 0%,var(--oc) 48%,oklch(.16 .035 280) 100%);box-shadow:inset 0 0 10px -4px oklch(0 0 0/.5)}
.orb::after{content:none}
.orb>span{position:relative;z-index:1;font-family:var(--font-serif);font-weight:700;font-size:clamp(.85rem,3vw,1.05rem);line-height:1;color:oklch(.14 .02 280);text-shadow:0 1px 1px oklch(1 0 0/.4)}
.orb-center{width:clamp(58px,18vw,76px);height:clamp(58px,18vw,76px)}
.orb-center::before{background:radial-gradient(circle at 38% 32%,oklch(.32 .055 280) 0%,oklch(.15 .03 280) 66%,oklch(.10 .02 280) 100%);box-shadow:inset 0 0 14px -3px oklch(0 0 0/.6)}
.orb-center>.ming{font-size:clamp(1.7rem,6vw,2.2rem);font-weight:800;color:oklch(.97 .02 95);text-shadow:0 0 9px var(--orrery-hue),0 0 20px var(--orrery-hue),0 1px 2px oklch(0 0 0/.65)}
@keyframes orrSpin{to{transform:rotate(360deg)}}
@keyframes orrSpinCcw{to{transform:rotate(-360deg)}}
@keyframes orbPulse{0%,100%{box-shadow:0 0 20px -3px var(--oc),0 6px 16px -4px oklch(0 0 0/.6)}50%{box-shadow:0 0 30px 0 var(--oc),0 6px 16px -4px oklch(0 0 0/.6)}}
/* 물드는 달 — 중앙 命이 오행 상생색(목→화→토→금→수)으로 천천히 순환. @property 미지원 시 민트(--orrery-hue 초기값) 고정 폴백, reduce-motion은 토큰에서 정지. 결과 보강색 잠금은 결과 미니 오레리(2차-C)에서 */
@property --orrery-hue{syntax:'<color>';inherits:true;initial-value:#5BE0A0}
@keyframes orreryHue{0%{--orrery-hue:oklch(.78 .16 155)}20%{--orrery-hue:oklch(.70 .19 25)}40%{--orrery-hue:oklch(.82 .15 80)}60%{--orrery-hue:oklch(.90 .05 90)}80%{--orrery-hue:oklch(.68 .16 250)}100%{--orrery-hue:oklch(.78 .16 155)}}
.orrery{animation:orreryHue 48s linear infinite}
@media(max-width:480px){.orrery{width:264px;height:264px}}

/* ===== PREMIUM DARK COSMIC POLISH LAYER A (shell-hero + dataviz + interactive) ===== */
/* ════════════════════════════════════════════════════════════════════════════
   PREMIUM DARK COSMIC RESKIN — BLOCK A  (append to END of 1st <style>, before line 1124)
   Consolidates: SHELL+HERO + DATAVIZ + INTERACTIVE
   ────────────────────────────────────────────────────────────────────────────
   Design language (enforced, one system):
   • GLASS — primary cards:    bg rgba(27,24,48,.66) + blur(14px) saturate(120%)
                               + border var(--color-border-default)
                               + box-shadow 0 12px 36px rgba(0,0,0,.55),
                                 0 0 0 1px rgba(99,234,137,.10), inset 0 1px 0 rgba(255,255,255,.06)
                               + radius var(--r)
             nested/secondary: bg rgba(27,24,48,.50) (panels) / rgba(21,19,31,.72) (inputs)
                               + blur(8px) + border var(--color-border-default) + radius var(--r2)
   • RADIUS — cards var(--r), small/chips var(--r2).  No calc() multipliers.
   • LIFT   — buttons -3px, cards -3px, chips/list-items -2px.
   • GLOW   — resting ~.20, hover ~.35, primary CTA hover ~.45 (hero cap .55).
   • EASE   — transform cubic-bezier(.34,1.56,.64,1); color/opacity plain ease.
   • BUTTONS — solid mint gradient = PRIMARY CTA (.btn .gate-btn .save-btn);
               translucent mint rgba(99,234,137,.20) = SECONDARY (.chat-send .saju-full-btn .prio-check button).
   • SERIF (--font-serif = Nanum Myeongjo, link loads 400/700/800 ONLY → cap 800,
            never uppercase, never wide track) on hero/name/hanja headings.
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════ SHELL + HERO ════════════════════════════════ */

/* ── GATE / PASSWORD OVERLAY (selectors verified: .gate-overlay/.gate-card/.gate-input/.gate-btn/.gate-title/.gate-sub) ── */
.gate-overlay {
  background: linear-gradient(135deg, var(--color-bg-canvas) 0%, rgba(14, 13, 24, 0.94) 100%);
  backdrop-filter: blur(2px);
}
.gate-card {
  background: rgba(27, 24, 48, 0.66);
  backdrop-filter: blur(16px) saturate(125%);
  border: 1px solid var(--color-border-default);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(99, 234, 137, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border-radius: var(--r);
}
.gate-title {
  font-family: var(--font-serif);
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
  text-transform: none;
}
.gate-sub {
  font-family: var(--font-serif);
  letter-spacing: 0.01em;
}
.gate-input {
  background: rgba(21, 19, 31, 0.72);
  border: 1px solid var(--color-border-default);
  backdrop-filter: blur(8px);
  color: var(--color-text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  letter-spacing: 0.1em;
}
.gate-input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: rgba(27, 24, 48, 0.88);
  box-shadow:
    0 0 0 2px rgba(99, 234, 137, 0.22),
    0 6px 20px rgba(99, 234, 137, 0.20);
}
/* PRIMARY CTA — solid mint gradient */
.gate-btn {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-deep) 100%);
  border: 1px solid rgba(99, 234, 137, 0.40);
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  text-transform: none;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.15s ease;
  box-shadow:
    0 8px 24px rgba(99, 234, 137, 0.20),
    0 0 22px -2px rgba(99, 234, 137, 0.20);
}
.gate-btn:hover {
  background: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-accent) 100%);
  color: var(--color-text-inverse);
  transform: translateY(-3px);
  box-shadow:
    0 12px 32px rgba(99, 234, 137, 0.28),
    0 0 26px -2px rgba(99, 234, 137, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.gate-btn:active {
  transform: translateY(-1px);
  box-shadow:
    0 4px 16px rgba(99, 234, 137, 0.20),
    0 0 18px -2px rgba(99, 234, 137, 0.30);
}

/* ── LANDING CARD ── */
.landing-card {
  background: rgba(27, 24, 48, 0.66);
  backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--color-border-default);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(99, 234, 137, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border-radius: var(--r);
}

/* ── FORM CONTROLS — 1px hairline everywhere (overrides existing 2px, later source) ── */
input[type=number],
input[type=text],
select {
  background: rgba(21, 19, 31, 0.72);
  border: 1px solid var(--color-border-default);
  backdrop-filter: blur(8px);
  color: var(--color-text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
input::placeholder {
  color: var(--color-text-tertiary);
}
input:focus,
select:focus {
  outline: none;
  border-color: var(--color-accent);
  background: rgba(27, 24, 48, 0.88);
  box-shadow:
    0 0 0 2px rgba(99, 234, 137, 0.20),
    0 6px 20px rgba(99, 234, 137, 0.18);
}

/* ── PRIMARY BUTTON — solid mint gradient, single hero CTA (glow cap .55) ── */
.btn {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-deep) 100%);
  border: 1px solid rgba(99, 234, 137, 0.40);
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  text-transform: none;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.15s ease;
  box-shadow:
    0 8px 24px rgba(99, 234, 137, 0.20),
    0 0 22px -2px rgba(99, 234, 137, 0.20);
  position: relative;
  overflow: hidden;
}
.btn:hover {
  background: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-accent) 100%);
  color: var(--color-text-inverse);
  transform: translateY(-3px);
  box-shadow:
    0 14px 36px rgba(99, 234, 137, 0.28),
    0 0 22px -2px rgba(99, 234, 137, 0.55), /* hero CTA cap */
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn:active {
  transform: translateY(-1px);
  box-shadow:
    0 6px 18px rgba(99, 234, 137, 0.20),
    0 0 18px -2px rgba(99, 234, 137, 0.30);
}

/* ── PRIORITY CARD — neutral glass + mint BORDER + mint GLOW (NOT a mint fill); keep 運 readable ── */
.prio-card {
  background: rgba(27, 24, 48, 0.66);
  backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(99, 234, 137, 0.30);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.55),
    0 0 28px -4px rgba(99, 234, 137, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border-radius: var(--r);
}
/* 運 watermark: keep legible on the neutral (non-mint) glass — readable opacity retained */
.prio-card::after {
  opacity: 0.42;
  font-family: var(--font-display);
  font-weight: 900; /* Poppins display — 900 loaded, OK */
  letter-spacing: -0.08em;
}
.prio-eyebrow {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-deep) 100%);
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  border: 1px solid rgba(99, 234, 137, 0.30);
  text-transform: uppercase; /* Latin/UI eyebrow — OK */
  box-shadow: 0 0 16px -2px rgba(99, 234, 137, 0.20);
}
.prio-headline {
  font-family: var(--font-serif);
  font-weight: 800; /* serif cap */
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
}
.prio-message {
  font-family: var(--font-serif);
  line-height: 1.8;
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
}

/* ── CHARACTER CARD — primary glass; ::before keeps --char-glow (JS index.html:3026), restyle opacity/filter only ── */
.char-card {
  background: rgba(27, 24, 48, 0.66);
  backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--color-border-default);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(99, 234, 137, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border-radius: var(--r);
}
.char-card::before {
  /* keep background:var(--char-glow,...) from existing — only soften */
  opacity: 0.18;
  filter: blur(12px);
}
.char-emoji {
  border: 1px solid var(--color-border-default);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.40),
    0 0 0 1px rgba(99, 234, 137, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.char-name {
  font-family: var(--font-serif);
  font-weight: 800; /* serif cap */
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
}
.char-hanja {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-accent-soft);
  letter-spacing: 0.06em;
}

/* ── HANJA SLOTS (secondary panels) ── */

/* ── MODAL — glass overlay tier ── */

/* ════════════════════════════════ DATAVIZ ════════════════════════════════ */
/* 만세력 table / 오행 bars,circles,orbit / 대운 timeline */

/* ── 만세력 (SAJU TABLE) ── */
.saju-table {
  background: linear-gradient(135deg, rgba(27, 24, 48, 0.50) 0%, rgba(27, 24, 48, 0.44) 100%);
}
.saju-table th {
  background: rgba(27, 24, 48, 0.66);
  backdrop-filter: blur(14px) saturate(120%);
  border-color: var(--color-border-subtle) !important;
  border-width: 1px !important;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase; /* Latin/UI label — OK */
  box-shadow: inset 0 1px 0 rgba(99, 234, 137, 0.08);
}
.saju-table td {
  border-color: var(--color-border-subtle) !important;
  border-width: 1px !important;
  background: rgba(27, 24, 48, 0.26);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.saju-table tbody tr:hover td {
  background: rgba(27, 24, 48, 0.42);
}
/* 일주(日柱) column — cosmic pillar highlight */
.saju-table th:nth-child(3) {
  background: linear-gradient(135deg, rgba(99, 234, 137, 0.22) 0%, rgba(52, 209, 126, 0.16) 100%);
  border-color: rgba(99, 234, 137, 0.40) !important;
  border-width: 2px !important;
  color: var(--color-accent-soft);
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow:
    inset 0 1px 0 rgba(99, 234, 137, 0.20),
    0 0 12px -3px rgba(99, 234, 137, 0.35);
}
.saju-table td:nth-child(3) {
  background: rgba(99, 234, 137, 0.09);
  border-left: 2px solid rgba(99, 234, 137, 0.40) !important;
  border-right: 2px solid rgba(99, 234, 137, 0.40) !important;
  border-top: 1px solid rgba(99, 234, 137, 0.18) !important;
  border-bottom: 1px solid rgba(99, 234, 137, 0.18) !important;
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow:
    inset 0 0 8px -2px rgba(99, 234, 137, 0.15),
    0 0 14px -4px rgba(99, 234, 137, 0.25);
}
.saju-table tbody tr:hover td:nth-child(3) {
  background: rgba(99, 234, 137, 0.14);
  box-shadow:
    inset 0 0 12px -2px rgba(99, 234, 137, 0.22),
    0 0 20px -3px rgba(99, 234, 137, 0.38);
}
.saju-table tr:first-child td:nth-child(3) {
  border-top: 2px solid rgba(99, 234, 137, 0.40) !important;
}
.saju-table tr:last-child td:nth-child(3) {
  border-bottom: 2px solid rgba(99, 234, 137, 0.40) !important;
}
.saju-table .pillar-stem {
  font-family: var(--font-display);
  font-weight: 900; /* Poppins display — OK */
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}
.saju-table td:nth-child(3) .pillar-stem,
.saju-table td:nth-child(3) .pillar-branch {
  color: var(--color-accent-soft);
  text-shadow: 0 0 16px rgba(99, 234, 137, 0.25);
}
.saju-table .pillar-branch {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}
.saju-table .pillar-label {
  color: var(--color-text-tertiary);
}
.saju-table .pillar-hanja {
  color: var(--color-lavender);
  font-weight: 600;
}
.saju-table-wrap {
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(21, 19, 31, 0.50) 0%, rgba(21, 19, 31, 0.44) 100%);
  backdrop-filter: blur(8px);
}

/* ── 오행 막대 (OH-BARS) ── */
.oh-bars {
  background: rgba(27, 24, 48, 0.50);
  backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid var(--color-border-default);
  border-radius: var(--r2);
  box-shadow:
    0 2px 14px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(99, 234, 137, 0.08);
}
.oh-bar-label {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
}
.oh-bar-track {
  background: rgba(21, 19, 31, 0.72);
  border: 1px solid var(--color-border-subtle);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.40),
    inset 0 -1px 2px rgba(99, 234, 137, 0.06);
}
/* P0-1: NO background here — JS sets per-element 오행 color inline (index.html:2950).
   Keep only shape / neutral glow / min-width / transition. */
.oh-bar-fill {
  border-radius: 999px;
  min-width: 3px;
  transition: width 0.6s cubic-bezier(0.34, 1.2, 0.4, 1);
  box-shadow:
    0 0 12px -2px rgba(0, 0, 0, 0.40),
    inset 0 1px 2px rgba(255, 255, 255, 0.12);
}
.oh-bar-count {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}
.oh-bar-row.zero .oh-bar-count {
  color: var(--color-text-tertiary);
  opacity: 0.6;
}

/* ── 오행 동그라미 (OH-CIRCLE) — restyle color/bg/shadow only; layout (absolute/transform) preserved ── */
.oh-circle {
  border: 2.5px solid;
  font-family: var(--font-display);
  transition:
    width 0.62s cubic-bezier(0.34, 1.4, 0.5, 1),
    height 0.62s cubic-bezier(0.34, 1.4, 0.5, 1),
    transform 0.45s cubic-bezier(0.34, 1.5, 0.5, 1),
    opacity 0.4s ease,
    box-shadow 0.5s ease;
}
/* CONTRAST: white shine .85 → subtle sheen .28 (neutral, sits on colored orbs) */
.oh-circle::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.08) 38%,
    rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
  opacity: 0.7;
  transform-origin: 50% 50%;
}
/* CONTRAST: name legible on darker orb fills — off-white text, drop white halo */
.oh-circle .ohc-name {
  font-weight: 900; /* Poppins display — OK */
  line-height: 1;
  position: relative;
  z-index: 1;
  color: var(--color-text-primary);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.50);
  letter-spacing: -0.02em;
}
.oh-circle .ohc-pct {
  font-weight: 800;
  position: relative;
  z-index: 1;
  color: var(--color-text-primary);
  opacity: 0.85;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.40);
}

/* Element orbs — refined glows */
.oh-circle.w-목 {
  border-color: var(--wood);
  background: radial-gradient(circle at 42% 34%,
    rgba(79, 222, 136, 0.15) 0%, var(--wood-fill) 72%, rgba(79, 222, 136, 0.08) 100%);
  box-shadow:
    0 0 20px -3px rgba(79, 222, 136, 0.35),
    inset 0 -3px 8px rgba(79, 222, 136, 0.12);
}
.oh-circle.w-화 {
  border-color: var(--fire);
  background: radial-gradient(circle at 42% 36%,
    rgba(255, 160, 120, 0.40) 0%, var(--fire-fill) 75%, rgba(255, 122, 114, 0.10) 100%);
  box-shadow:
    0 0 22px -3px rgba(255, 122, 114, 0.35),
    inset 0 -3px 10px rgba(255, 122, 114, 0.15);
}
.oh-circle.w-토 {
  border-color: var(--earth);
  background: radial-gradient(circle at 42% 34%,
    rgba(255, 210, 77, 0.35) 0%, var(--earth-fill) 75%, rgba(255, 210, 77, 0.08) 100%);
  box-shadow:
    0 0 20px -3px rgba(255, 210, 77, 0.35),
    inset 0 -3px 8px rgba(255, 210, 77, 0.12);
}
.oh-circle.w-금 {
  border-color: var(--metal);
  background: linear-gradient(135deg,
    rgba(214, 221, 228, 0.55) 0%, var(--metal-fill) 45%, rgba(190, 200, 210, 0.40) 70%, var(--metal-fill) 100%);
  box-shadow:
    0 0 18px -2px rgba(166, 176, 196, 0.35),
    inset 0 -3px 8px rgba(166, 176, 196, 0.12);
}
.oh-circle.w-수 {
  border-color: var(--water);
  background: radial-gradient(circle at 42% 30%,
    rgba(150, 200, 240, 0.40) 0%, var(--water-fill) 75%, rgba(91, 168, 255, 0.08) 100%);
  box-shadow:
    0 0 22px -3px rgba(91, 168, 255, 0.35),
    inset 0 -3px 10px rgba(91, 168, 255, 0.15);
}

/* Ambient ::before motions */
.oh-circle.w-목::before { animation: ohWoodSway 6s ease-in-out infinite; }
/* CONTRAST: fire shine .9 → toned coral .5 */
.oh-circle.w-화::before {
  background: radial-gradient(circle at 42% 32%,
    rgba(255, 140, 110, 0.50) 0%, rgba(255, 140, 90, 0) 55%);
  animation: ohFireFlicker 2.4s ease-in-out infinite;
}
.oh-circle.w-토::before { animation: ohEarthBreathe 5.2s ease-in-out infinite; }
/* CONTRAST: metal white sweep .95 → cool silver .32 */
.oh-circle.w-금::before {
  background: linear-gradient(120deg,
    rgba(200, 220, 240, 0) 25%, rgba(200, 220, 240, 0.32) 48%, rgba(200, 220, 240, 0) 71%);
  background-size: 260% 100%;
  animation: ohMetalShine 4.4s ease-in-out infinite;
}
.oh-circle.w-수::before { animation: ohWaterRipple 4.4s ease-in-out infinite; }

@keyframes ohWoodSway {
  0%, 100% { transform: rotate(-2.5deg) translateY(1px); }
  50% { transform: rotate(2.5deg) translateY(-1px); }
}
@keyframes ohFireFlicker {
  0%, 100% { opacity: 0.68; transform: scale(0.96) translateY(1px); }
  45% { opacity: 1; transform: scale(1.06) translateY(-1.2px); }
  70% { opacity: 0.80; transform: scale(1) translateY(0); }
}
@keyframes ohEarthBreathe {
  0%, 100% { transform: scale(0.92); opacity: 0.80; }
  50% { transform: scale(1.04); opacity: 1; }
}
@keyframes ohMetalShine {
  0% { background-position: 140% 0; }
  55%, 100% { background-position: -40% 0; }
}
@keyframes ohWaterRipple {
  0%, 100% { transform: translateY(2px) scaleX(1.02); }
  50% { transform: translateY(-2px) scaleX(0.98); }
}

/* 진입 stagger pop */
.oh-orbit.ready .oh-circle {
  animation: ohEnter 0.5s cubic-bezier(0.34, 1.5, 0.5, 1) backwards;
}
.oh-orbit.ready .oh-circle.idx-0 { animation-delay: 0.02s; }
.oh-orbit.ready .oh-circle.idx-1 { animation-delay: 0.09s; }
.oh-orbit.ready .oh-circle.idx-2 { animation-delay: 0.16s; }
.oh-orbit.ready .oh-circle.idx-3 { animation-delay: 0.23s; }
.oh-orbit.ready .oh-circle.idx-4 { animation-delay: 0.30s; }
@keyframes ohEnter {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.oh-circle.bump { animation: ohBump 0.55s cubic-bezier(0.34, 1.6, 0.45, 1); }
@keyframes ohBump {
  0% { transform: translate(-50%, -50%) scale(1); }
  35% { transform: translate(-50%, -50%) scale(1.14); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* Dominant element glow */
.oh-circle.dominant { z-index: 3; }
.oh-circle.dominant::after {
  content: "";
  position: absolute;
  inset: -28%;
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(circle, currentColor 0%, transparent 65%);
  opacity: 0;
  animation: ohDominantGlow 2.8s ease-in-out infinite;
}
.oh-orbit.ready .oh-circle.dominant::after { opacity: 0.24; }
@keyframes ohDominantGlow {
  0%, 100% { transform: scale(0.80); opacity: 0.14; }
  50% { transform: scale(1.10); opacity: 0.32; }
}

/* ── 오행 궤도 (OH-ORBIT) ── */
.dw-orbit-wrap {
  background: linear-gradient(135deg, rgba(27, 24, 48, 0.50) 0%, rgba(27, 24, 48, 0.44) 100%);
  border: 1px solid var(--color-border-default);
  border-radius: var(--r);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(99, 234, 137, 0.08);
  backdrop-filter: blur(12px) saturate(110%);
}
.dw-orbit-title {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: 0.03em;
}
.dw-orbit-sub {
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}
/* Central stage — cosmic ring */
.oh-orbit-ring {
  border: 2px solid var(--color-border-default);
  background:
    radial-gradient(circle at 50% 38%,
      rgba(255, 255, 255, 0.06) 0%, rgba(21, 19, 31, 0.50) 58%, var(--color-bg-sunken) 100%),
    var(--color-bg-sunken);
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.45),
    inset 0 -3px 8px rgba(99, 234, 137, 0.12),
    0 0 16px -4px rgba(99, 234, 137, 0.20);
  backdrop-filter: blur(6px);
}
/* Rotating orbit glow ring — CONTRAST: aurora violet low, blends to bg (was white .9) */
.oh-orbit-ring::before {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(110, 99, 201, 0) 0deg,
    rgba(99, 234, 137, 0.18) 60deg,
    rgba(232, 93, 78, 0.14) 120deg,
    rgba(240, 180, 41, 0.10) 180deg,
    rgba(110, 99, 201, 0.35) 240deg,
    rgba(59, 130, 196, 0.14) 300deg,
    rgba(110, 99, 201, 0) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 62%, #000 73%, transparent 77%);
  mask: radial-gradient(circle, transparent 58%, #000 62%, #000 73%, transparent 77%);
  opacity: 0;
  animation: ohRingSpin 20s linear infinite;
  will-change: transform;
  pointer-events: none;
}
.oh-orbit.ready .oh-orbit-ring::before {
  opacity: 0.9;
  transition: opacity 0.9s ease;
}
@keyframes ohRingSpin { to { transform: rotate(360deg); } }
/* Central core pulse — CONTRAST: aurora violet center (was near-white) */
.oh-orbit-ring::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(110, 99, 201, 0.85);
  box-shadow: 0 0 0 0 rgba(110, 99, 201, 0.45);
  animation: ohCorePulse 3.4s ease-in-out infinite;
}
@keyframes ohCorePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(110, 99, 201, 0.45); opacity: 0.95; }
  50% { box-shadow: 0 0 0 8px rgba(110, 99, 201, 0); opacity: 0.50; }
}
.oh-orbit.rippling .oh-orbit-ripple {
  animation: ohRipple 0.7s cubic-bezier(0.25, 0.8, 0.4, 1);
}
@keyframes ohRipple {
  0% { transform: translate(-50%, -50%) scale(0.55); opacity: 0.60; }
  100% { transform: translate(-50%, -50%) scale(2.1); opacity: 0; }
}

/* ── 대운 타임라인 (DAEWOON TIMELINE) ── */
.dw-timeline-wrap {
  background: linear-gradient(135deg, rgba(27, 24, 48, 0.50) 0%, rgba(21, 19, 31, 0.44) 100%);
  border: 1px solid var(--color-border-default);
  border-radius: var(--r);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(99, 234, 137, 0.08);
  backdrop-filter: blur(12px) saturate(110%);
}
.dw-tl-label {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: 0.03em;
  text-transform: uppercase; /* Latin/UI label — OK */
}
.dw-item {
  border: 1px solid var(--color-border-default);
  border-radius: var(--r2);
  background: linear-gradient(135deg, rgba(27, 24, 48, 0.60) 0%, rgba(27, 24, 48, 0.50) 100%);
  transition:
    transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  border-top: 3px solid var(--color-state-future);
  backdrop-filter: blur(8px);
}
.dw-item:hover {
  transform: translateY(-2px); /* list-item lift */
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.35),
    0 0 12px -2px rgba(99, 234, 137, 0.20);
  background: linear-gradient(135deg, rgba(27, 24, 48, 0.72) 0%, rgba(27, 24, 48, 0.62) 100%);
  border-color: var(--color-border-default);
}
.dw-item.past {
  opacity: 0.48;
  border-top-color: var(--color-state-past);
}
/* keep 3px top emphasis on current 대운 (matches existing 4px-class intent) */
.dw-item.cur {
  border-width: 2px;
  border-top: 4px solid var(--color-state-current);
  background: linear-gradient(135deg, rgba(99, 234, 137, 0.15) 0%, rgba(99, 234, 137, 0.10) 100%);
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.40),
    0 0 16px -2px rgba(99, 234, 137, 0.35),
    inset 0 1px 0 rgba(99, 234, 137, 0.15);
  border-color: rgba(99, 234, 137, 0.35);
}
.dw-item.sel {
  border-width: 2px;
  border-top: 4px solid var(--color-accent-deep);
  background: linear-gradient(135deg, rgba(99, 234, 137, 0.18) 0%, rgba(99, 234, 137, 0.12) 100%);
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.40),
    0 0 20px -2px rgba(99, 234, 137, 0.35);
  transform: translateY(-2px);
}
.dw-item .dw-dir {
  color: var(--color-text-tertiary);
  font-weight: 800;
  font-family: var(--font-display);
  opacity: 0.7;
}
.dw-item.cur .dw-dir,
.dw-item.sel .dw-dir {
  color: var(--color-accent-deep);
  opacity: 1;
  font-weight: 900;
}
.dw-age {
  color: var(--color-text-secondary);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.dw-ganji {
  font-family: var(--font-display);
  font-weight: 900; /* Poppins display — OK */
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}
.dw-eum {
  color: var(--color-text-tertiary);
  opacity: 0.8;
}
.dw-now {
  color: var(--color-accent-deep);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase; /* Latin/UI label — OK */
}
.dw-tl-hint {
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}
/* 대운 리딩 풀이 */
.dw-reading {
  background: linear-gradient(135deg, rgba(21, 19, 31, 0.72) 0%, rgba(21, 19, 31, 0.62) 100%);
  border: 1px solid var(--color-border-default);
  border-radius: var(--r);
  box-shadow:
    0 2px 14px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(99, 234, 137, 0.06);
  backdrop-filter: blur(8px);
}
.dw-reading-ganji {
  font-family: var(--font-display);
  font-weight: 900; /* Poppins display — OK */
  color: var(--color-accent-soft);
  letter-spacing: -0.02em;
}
.dw-reading-age {
  color: var(--color-text-secondary);
  font-weight: 700;
}

/* ════════════════════════════════ INTERACTIVE ════════════════════════════════ */
/* focus chips / focus-top / theme cards / grow2030 / mode,chat / feedback / prio-check / loading */

/* ── 1. FOCUS PICKER CHIPS ── */
.fpk-head {
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
  text-transform: uppercase; /* Latin/UI label — OK */
  opacity: 0.9;
}
/* chip = secondary surface; add inset top hairline so chips & cards share one system */
.focus-chip {
  cursor: pointer;
  border: 1px solid var(--color-border-default);
  background: rgba(27, 24, 48, 0.50);
  backdrop-filter: blur(8px);
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-weight: 700;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* chips hover to a faint mint-mist edge (matches .theme-card), not grey */
.focus-chip:hover {
  background: rgba(27, 24, 48, 0.62);
  border-color: rgba(99, 234, 137, 0.30);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.40), 0 0 14px -2px rgba(99, 234, 137, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}
.focus-chip.on {
  border-color: var(--color-accent-deep);
  background: rgba(99, 234, 137, 0.20);
  color: var(--color-accent-soft);
  box-shadow: 0 0 18px -1px rgba(99, 234, 137, 0.35);
}
/* P0-2: NO .focus-chip.on::before here — already defined at index.html:718 (would double the ✓) */

/* ── 2. FOCUS TOP RESULT CARD — primary glass ── */
.focus-top-card {
  border: 1px solid var(--color-border-default);
  background: rgba(27, 24, 48, 0.66);
  backdrop-filter: blur(14px) saturate(120%);
  border-radius: var(--r);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(99, 234, 137, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ── 3. THEME CARDS ── */
.theme-card {
  border: 1px solid var(--color-border-default);
  border-radius: var(--r);
  background: rgba(27, 24, 48, 0.66);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(99, 234, 137, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.theme-card:hover {
  border-color: rgba(99, 234, 137, 0.30);
  background: rgba(27, 24, 48, 0.72);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.55),
    0 0 24px -2px rgba(99, 234, 137, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(-3px);
}
.theme-card:active {
  transform: translateY(-1px);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.theme-card.open {
  border-color: var(--color-accent-deep);
  background: rgba(27, 24, 48, 0.66);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.55),
    0 0 20px -2px rgba(99, 234, 137, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(0);
}
.theme-card .tc-hanja {
  font-family: var(--font-serif);
  font-weight: 800; /* serif cap (was 900; link loads max 800) */
  color: var(--color-text-primary);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  text-transform: none;
}
.theme-card .tc-label {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase; /* Latin/UI label — OK */
  opacity: 0.94;
}
.theme-card .tc-preview {
  font-weight: 600;
  color: var(--color-text-secondary);
}
/* CONTRAST: open state bg is now neutral dark glass → keep off-white text readable */
.theme-card.open .tc-preview {
  color: var(--color-text-primary);
}

/* ── 4. GROW2030 CARDS ── */
.grow2030-section {
  background: rgba(21, 19, 31, 0.50);
  backdrop-filter: blur(8px) saturate(100%);
  border: 1px solid var(--color-border-default);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(99, 234, 137, 0.08);
}
.grow2030-head {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase; /* Latin/UI head — OK */
}
.grow2030-sub {
  font-family: var(--font-sans);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}
.grow2030-card {
  border: 1px solid var(--color-border-default);
  border-radius: var(--r2);
  background: rgba(27, 24, 48, 0.50);
  backdrop-filter: blur(8px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.grow2030-card:hover {
  border-color: rgba(99, 234, 137, 0.30);
  background: rgba(27, 24, 48, 0.62);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.44),
    0 0 20px -2px rgba(99, 234, 137, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}
.grow2030-card:active {
  transform: translateY(0);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.grow2030-card.open {
  border-color: var(--color-accent-deep);
  background: rgba(27, 24, 48, 0.62);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.36),
    0 0 18px -1px rgba(99, 234, 137, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(0);
}
.grow2030-card .g2-label {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
  text-transform: uppercase; /* Latin/UI label — OK */
  opacity: 0.96;
}
.grow2030-card .g2-desc {
  font-weight: 600;
  color: var(--color-text-secondary);
}
.grow2030-card.open .g2-desc {
  color: var(--color-accent-soft);
}

/* ── 5. MODE TOGGLE & CHAT ── */
.mode-toggle {
  background: rgba(21, 19, 31, 0.50);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border-default);
}
/* CONTRAST: inactive light secondary, hover off-white */
.mode-tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-weight: 700;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.mode-tab:hover {
  color: var(--color-text-primary);
  background: rgba(99, 234, 137, 0.08);
}
.mode-tab.on {
  background: rgba(99, 234, 137, 0.20);
  border-color: var(--color-accent-deep);
  color: var(--color-accent-soft);
  box-shadow: 0 0 14px -1px rgba(99, 234, 137, 0.32);
}
.chat-card {
  border: 1px solid var(--color-border-default);
  border-radius: var(--r);
  background: rgba(27, 24, 48, 0.66);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(99, 234, 137, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.chat-input {
  background: rgba(21, 19, 31, 0.72);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border-default);
  border-radius: var(--r2);
  color: var(--color-text-primary);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.20);
}
.chat-input:focus {
  outline: none;
  border-color: var(--color-accent-deep);
  background: rgba(27, 24, 48, 0.72);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.20),
    0 0 16px rgba(52, 209, 126, 0.24);
}
/* SECONDARY action — translucent mint fill + mint text */
.chat-send {
  border: 1px solid var(--color-accent-deep);
  background: rgba(99, 234, 137, 0.20);
  color: var(--color-accent);
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
  box-shadow: 0 2px 12px rgba(99, 234, 137, 0.20);
}
.chat-send:hover:not(:disabled) {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  transform: translateY(-3px);
  box-shadow: 0 0 22px -2px rgba(99, 234, 137, 0.45);
}
.chat-send:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── 6. FEEDBACK CARD ── */
.fb-card {
  background: rgba(27, 24, 48, 0.66);
  backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--color-border-default);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--r);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.fb-big-chip {
  background: rgba(27, 24, 48, 0.50);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border-default);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.fb-big-chip:hover {
  border-color: rgba(99, 234, 137, 0.30);
  background: rgba(27, 24, 48, 0.62);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.36), 0 0 14px -2px rgba(99, 234, 137, 0.20);
}
/* element-coded active states retained (verdict semantics) */
.fb-big-chip.match.active {
  border-color: var(--stem-wood);
  background: rgba(79, 222, 136, 0.18);
  box-shadow: 0 0 20px rgba(79, 222, 136, 0.28);
}
.fb-big-chip.partial.active {
  border-color: var(--stem-earth);
  background: rgba(255, 210, 77, 0.16);
  box-shadow: 0 0 20px rgba(255, 210, 77, 0.24);
}
.fb-big-chip.miss.active {
  border-color: var(--stem-fire);
  background: rgba(255, 122, 114, 0.16);
  box-shadow: 0 0 20px rgba(255, 122, 114, 0.24);
}
.fb-banner.ok {
  border-color: rgba(79, 222, 136, 0.30);
  background: rgba(79, 222, 136, 0.14);
  color: var(--stem-wood);
}
.fb-banner.err {
  border-color: rgba(255, 122, 114, 0.30);
  background: rgba(255, 122, 114, 0.14);
  color: var(--stem-fire);
}
/* SECONDARY action — translucent mint fill + mint text */
.saju-full-btn {
  border: 1px solid var(--color-accent-deep);
  background: rgba(99, 234, 137, 0.20);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow:
    0 2px 14px rgba(99, 234, 137, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.saju-full-btn:hover {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  transform: translateY(-3px);
  box-shadow:
    0 0 22px -2px rgba(99, 234, 137, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.saju-full-btn:active {
  transform: translateY(0);
  box-shadow:
    0 2px 8px rgba(99, 234, 137, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.saju-full-btn:disabled {
  opacity: 0.5;
  cursor: default;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
  transform: none;
}

/* ── 7. PRIORITY CHECK & LOADING ── */
.prio-check {
  border-top: 1px solid var(--color-border-subtle);
}
.prio-check textarea {
  background: rgba(21, 19, 31, 0.72);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border-default);
  border-radius: var(--r2);
  color: var(--color-text-primary);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.20);
}
.prio-check textarea:focus {
  outline: none;
  border-color: var(--color-accent-deep);
  background: rgba(27, 24, 48, 0.72);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.20),
    0 0 14px rgba(52, 209, 126, 0.22);
}
/* SECONDARY action — translucent mint fill + mint text */
.prio-check button {
  border: 1px solid var(--color-accent-deep);
  background: rgba(99, 234, 137, 0.20);
  color: var(--color-accent);
  border-radius: var(--r2);
  font-family: var(--font-display);
  font-weight: 800;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
  box-shadow: 0 2px 10px rgba(99, 234, 137, 0.20);
}
.prio-check button:hover {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(99, 234, 137, 0.35);
}
.prio-check button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(99, 234, 137, 0.20);
}
.tf-spinner {
  border: 2px solid rgba(99, 234, 137, 0.18);
  border-top-color: var(--color-accent);
  border-right-color: var(--color-accent);
  box-shadow: 0 0 12px rgba(99, 234, 137, 0.24);
}
.tf-msg {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-text-primary);
}
.tf-sub {
  color: var(--color-text-tertiary);
}

  #exportRoot{ position:fixed; left:-9999px; top:0; width:840px; display:none; }
  .export-card{ width:840px; box-sizing:border-box; background:var(--card,#fff); color:var(--text,#1a1a1a);
    border:2px solid var(--border,#1a1a1a); border-radius:20px; padding:38px 40px; margin:0 0 26px;
    font-family:var(--font-sans,'Pretendard',sans-serif); position:relative; box-shadow:var(--shadow-soft,3px 4px 0 rgba(26,26,26,.9)); }
  .export-card .exp-h{ font-family:var(--font-display,'Poppins',sans-serif); font-size:25px; font-weight:800; margin:0 0 16px; letter-spacing:-.01em; }
  .export-card .exp-h2{ font-size:20px; font-weight:800; margin:26px 0 10px; padding-top:20px; border-top:2px dashed var(--border,#1a1a1a); }
  .export-card .exp-sub,.export-card .exp-meta,.export-card .exp-oh{ font-size:15px; color:var(--sub,#555); margin:0 0 10px; line-height:1.6; }
  .export-card .exp-pillars{ display:flex; gap:10px; margin:8px 0 16px; }
  .export-card .exp-pcell{ flex:1; text-align:center; border:2px solid var(--border,#1a1a1a); border-radius:14px; padding:14px 6px; background:var(--card2,#EAF4FC); }
  .export-card .exp-plabel{ font-size:13px; color:var(--sub,#555); margin-bottom:6px; font-weight:600; }
  .export-card .exp-pganji{ font-size:27px; font-weight:800; font-family:var(--font-serif,serif); line-height:1.1; }
  .export-card .exp-poh{ font-size:12px; color:var(--sub,#555); margin-top:7px; line-height:1.45; }
  .export-card .exp-prio-head{ font-size:20px; font-weight:800; margin:0 0 8px; }
  .export-card .exp-body{ font-size:16px; line-height:1.78; word-break:keep-all; }
  .export-card .exp-body p{ margin:0 0 11px; }
  .export-card .exp-body strong{ font-weight:800; }
  .export-card .exp-badge{ display:inline-block; margin-top:12px; padding:7px 16px; border:2px solid var(--border,#1a1a1a);
    border-radius:999px; background:var(--gold,#F0C36A); font-size:14px; font-weight:700; }
  .export-card .exp-dw{ margin:0 0 20px; }
  .export-card .exp-dw:last-of-type{ margin-bottom:0; }
  .export-card .exp-dw-head{ font-size:18px; font-weight:800; font-family:var(--font-serif,serif); margin:0 0 9px;
    padding:9px 14px; background:var(--card2,#EAF4FC); border:2px solid var(--border,#1a1a1a); border-radius:12px; }
  .export-card .exp-dw-head span{ font-size:14px; font-weight:600; color:var(--sub,#555); margin-left:9px; }
  .export-card .exp-brand{ margin-top:22px; padding-top:15px; border-top:2px solid var(--border,#1a1a1a);
    font-size:13px; color:var(--sub,#555); font-weight:600; letter-spacing:.02em; }
  .export-card .exp-page{ position:absolute; top:20px; right:24px; font-size:13px; color:var(--sub,#888); font-weight:700; }
  .export-toast{ position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(20px);
    background:var(--text,#1a1a1a); color:#fff; padding:13px 22px; border-radius:999px; font-size:15px; font-weight:600;
    opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:9999; max-width:88vw; text-align:center; box-shadow:var(--shadow-float,0 10px 30px rgba(26,26,26,.12)); }
  .export-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== PREMIUM DARK COSMIC POLISH LAYER B (share-export) ===== */
/* ════════════════════════════════════════════════════════════════════════════
   PREMIUM DARK COSMIC RESKIN — BLOCK B  (append to END of 2nd <style>, before line 1543)
   SHARE / EXPORT only: .story-card, .sc-*, .cc-*, .export-card, .export-toast
   ────────────────────────────────────────────────────────────────────────────
   MUST live in the 2nd block: .export-card/.export-toast originate here, and
   .story-card/.cc-* originate in the 1st block — appending last in document
   order lets these win by source order over BOTH copies (equal specificity).

   html2canvas safety: NO backdrop-filter anywhere captured (.story-card,
   .cc-preview, .export-card render flat/translucent in PNG). Solid/gradient
   bg + box-shadow glow only.  conic-gradient avoided in export targets.

   JS couplings preserved (do NOT remove):
   • .story-card::before  background:var(--sc-glow,...)      (set index.html:3727)
   • .story-card .sc-emoji background:var(--sc-glow-bg,...)  (set index.html:3728)
   • .story-card .sc-alias color:var(--sc-glow,...)          (stem-colored name)
   • .cc-preview          var(--cc-glow-bg,...) radial (fallback path retained)

   --font-serif (Nanum Myeongjo) link loads 400/700/800 ONLY → serif capped 800.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. STORY-CARD (9:16 SNS export, html2canvas) ── */
.story-card {
  /* aurora multi-layer: keep --sc-glow-bg hookup in layer 1 (JS injects stem bg) */
  background:
    radial-gradient(120% 70% at 50% 0%, var(--sc-glow-bg, rgba(99, 234, 137, 0.10)) 0%, transparent 60%),
    radial-gradient(100% 70% at 82% 96%, rgba(201, 87, 190, 0.18) 0%, transparent 65%),
    radial-gradient(80% 60% at 12% 20%, rgba(255, 111, 114, 0.10) 0%, transparent 50%),
    linear-gradient(165deg, #242233 0%, #14121f 55%, #0c0a15 100%);
  border: 6px solid var(--color-border-strong);
  box-shadow:
    inset 0 1px 2px rgba(99, 234, 137, 0.12),
    0 24px 60px rgba(0, 0, 0, 0.72);
}
.story-card::before {
  /* P0-3: keep background:var(--sc-glow,...) — JS injects per-character stem color.
     blur(60px) is fine (radial-rendered halo on-card); only opacity tuned. */
  content: '';
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 760px;
  height: 520px;
  border-radius: 50%;
  background: var(--sc-glow, var(--color-accent));
  opacity: 0.20;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.story-card .sc-brand {
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--color-text-primary);
  text-transform: uppercase; /* Latin/brand wordmark — OK */
  text-shadow: 0 2px 12px rgba(99, 234, 137, 0.15);
}
.story-card .sc-brand::after {
  background: var(--color-accent);
  box-shadow: var(--glow-mint);
}
.story-card .sc-emoji {
  /* P0-3: keep var(--sc-glow-bg,...) — JS injects stem bg. Layer mint sheen above it. */
  border: 5px solid var(--color-border-strong);
  background:
    radial-gradient(circle at 40% 40%, rgba(99, 234, 137, 0.08), transparent 60%),
    var(--sc-glow-bg, var(--color-bg-elevated));
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.50),
    0 0 34px -4px rgba(99, 234, 137, 0.40),
    inset 0 2px 8px rgba(99, 234, 137, 0.10);
}
.story-card .sc-alias {
  /* P0-3: keep color:var(--sc-glow,...) — stem-colored name. Do NOT hardcode primary. */
  font-family: var(--font-serif);
  font-weight: 800; /* serif cap (was 900) */
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--sc-glow, var(--color-text-primary));
  text-align: center;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.40);
  text-transform: none;
}
/* CONTRAST: hanja low on gradient → off-white */
.story-card .sc-hanja {
  color: var(--color-text-primary);
}
.story-card .sc-tagline {
  font-weight: 800;
  color: var(--color-text-primary);
  text-align: center;
  letter-spacing: var(--tracking-tight);
}
.story-card .sc-keywords span {
  font-family: var(--font-sans);
  font-weight: 700;
  border: 2px solid var(--color-border-strong);
  background: rgba(27, 24, 48, 0.66);
  color: var(--color-text-primary);
  box-shadow:
    0 0 14px rgba(99, 234, 137, 0.18),
    inset 0 1px 4px rgba(99, 234, 137, 0.08);
  backdrop-filter: none; /* html2canvas-safe */
}
.story-card .sc-desc {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--color-text-primary);
  text-align: center;
}
.story-card .sc-footer {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  text-align: center;
}
.story-card .sc-footer strong {
  color: var(--color-accent-deep);
  font-weight: 800;
  text-shadow: 0 0 12px rgba(99, 234, 137, 0.25);
}

/* ── 2. CHARACTER CARD PREVIEW (cc-preview) — NO backdrop-filter (shared by SNS share) ── */
.cc-preview {
  --cc-glow: var(--color-accent);
  border: 2px solid var(--color-border-default);
  border-radius: var(--r);
  /* keep var(--cc-glow-bg,...) radial path; solid base below for opacity */
  background:
    radial-gradient(120% 80% at 50% 0%, var(--cc-glow-bg, var(--color-bg-sunken)) 0%, transparent 65%),
    rgba(27, 24, 48, 0.72);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.42),
    0 0 18px -2px rgba(99, 234, 137, 0.20);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.cc-preview:hover {
  border-color: var(--color-border-strong);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.48),
    0 0 24px -1px rgba(99, 234, 137, 0.35);
  transform: translateY(-3px); /* card lift */
}
.cc-pv-emoji {
  /* keep var(--cc-glow-bg,...) hookup, layer mint sheen */
  border: 3px solid var(--color-border-default);
  background:
    radial-gradient(circle at 40% 40%, rgba(99, 234, 137, 0.08), transparent 60%),
    var(--cc-glow-bg, var(--color-bg-elevated));
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.35),
    0 0 16px -2px rgba(99, 234, 137, 0.30);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.cc-preview:hover .cc-pv-emoji {
  border-color: var(--color-border-strong);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.42),
    0 0 20px -1px rgba(99, 234, 137, 0.40);
}
.cc-pv-alias {
  font-family: var(--font-serif);
  font-weight: 800; /* serif cap (was 900) */
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  text-transform: none;
}
.cc-pv-hanja {
  font-weight: 600;
  color: var(--color-text-secondary);
}
.cc-pv-tagline {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-text-primary);
}
.cc-pv-kw span {
  font-family: var(--font-sans);
  font-weight: 700;
  border: 1px solid var(--color-border-default);
  background: rgba(27, 24, 48, 0.50);
  color: var(--color-text-primary);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.25),
    inset 0 1px 2px rgba(99, 234, 137, 0.08);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.cc-pv-kw span:hover {
  border-color: var(--color-border-strong);
  background: rgba(99, 234, 137, 0.10);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.30),
    inset 0 1px 3px rgba(99, 234, 137, 0.12);
}
.cc-pv-desc {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--color-text-primary);
}

/* ── 3. SAVE BUTTON — PRIMARY CTA (solid mint gradient) ── */
.save-btn {
  border: 1px solid var(--color-border-strong);
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-deep) 100%);
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-weight: 800;
  box-shadow:
    0 4px 14px rgba(99, 234, 137, 0.20),
    0 0 12px -1px rgba(99, 234, 137, 0.20);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.save-btn:hover {
  background: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-accent) 100%);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-deep);
  transform: translateY(-3px);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(99, 234, 137, 0.30),
    0 0 22px -2px rgba(99, 234, 137, 0.45);
}
.save-btn:active {
  transform: translateY(-1px);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.35),
    0 0 12px rgba(99, 234, 137, 0.20);
}
.save-btn:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ── 4. EXPORT CARD (text snapshot, html2canvas) — NO backdrop-filter; solid dark gradient ── */
/* CONTRAST: existing literal #fff/#1a1a1a/#555 fallbacks → resolved dark tokens explicitly */
.export-card {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(99, 234, 137, 0.06) 0%, transparent 55%),
    linear-gradient(165deg, var(--color-bg-elevated) 0%, var(--color-bg-sunken) 55%, var(--color-bg-canvas) 100%);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--r);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.55),
    inset 0 1px 2px rgba(99, 234, 137, 0.10);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.export-card:hover {
  border-color: var(--color-border-strong);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.55),
    0 0 18px -2px rgba(99, 234, 137, 0.20),
    inset 0 1px 2px rgba(99, 234, 137, 0.12);
}
.export-card .exp-h {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-text-primary);
}
.export-card .exp-h2 {
  font-weight: 800;
  color: var(--color-text-primary);
  border-top: 1px solid var(--color-border-subtle);
}
.export-card .exp-sub,
.export-card .exp-meta,
.export-card .exp-oh {
  color: var(--color-text-secondary);
}
.export-card .exp-pcell {
  border: 1px solid var(--color-border-default);
  border-radius: var(--r2);
  background: rgba(27, 24, 48, 0.50);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.export-card .exp-pcell:hover {
  border-color: var(--color-border-strong);
  background: rgba(99, 234, 137, 0.08);
  box-shadow: 0 4px 12px rgba(99, 234, 137, 0.15);
}
.export-card .exp-plabel {
  color: var(--color-text-secondary);
  font-weight: 600;
}
.export-card .exp-pganji {
  font-family: var(--font-serif);
  font-weight: 800; /* serif cap */
  color: var(--color-text-primary);
}
.export-card .exp-poh {
  color: var(--color-text-tertiary);
}
.export-card .exp-prio-head {
  font-weight: 800;
  color: var(--color-text-primary);
}
.export-card .exp-body {
  color: var(--color-text-primary);
}
.export-card .exp-body strong {
  font-weight: 800;
  color: var(--color-accent);
}
.export-card .exp-badge {
  border: 1px solid var(--color-border-default);
  background: linear-gradient(135deg, rgba(99, 234, 137, 0.15) 0%, rgba(99, 234, 137, 0.08) 100%);
  font-weight: 700;
  color: var(--color-accent);
  box-shadow: 0 0 10px rgba(99, 234, 137, 0.15);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.export-card .exp-badge:hover {
  border-color: var(--color-border-strong);
  background: linear-gradient(135deg, rgba(99, 234, 137, 0.20) 0%, rgba(99, 234, 137, 0.12) 100%);
  box-shadow: 0 0 14px rgba(99, 234, 137, 0.25);
}
.export-card .exp-dw-head {
  font-family: var(--font-serif);
  font-weight: 800; /* serif cap */
  background: rgba(27, 24, 48, 0.50);
  border: 1px solid var(--color-border-default);
  border-radius: var(--r2);
  color: var(--color-text-primary);
}
.export-card .exp-dw-head span {
  font-weight: 600;
  color: var(--color-text-secondary);
}
.export-card .exp-brand {
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-tertiary);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.export-card .exp-page {
  color: var(--color-text-tertiary);
  font-weight: 700;
}

/* ── 5. EXPORT TOAST — CONTRAST: was var(--text)(light) bg + #fff text = invisible ── */
.export-toast {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.62),
    0 0 22px -2px rgba(99, 234, 137, 0.35);
  /* on-screen toast (not captured) — backdrop-filter would be fine, but kept off
     for consistency with the export tier; solid bg already opaque */
}

/* ════════════════════════════════════════════════════════════════
   RADICAL REDESIGN — 방향 C "벤토 그리드 모던"
   레이아웃 근본 재발명: 수직 스택 → 비대칭 벤토 타일 대시보드.
   히어로/오레리/가치/입력을 모듈 타일로 재배치.
   토큰 위에서 오버라이드. 색 절제(민트 액센트 1개 + 잉크).
   ════════════════════════════════════════════════════════════════ */

/* 전역 캔버스 — 더 깊은 잉크, 미세 노이즈 없이 정제된 평면 + 상단 글로우만 */
body{background:#08071A;letter-spacing:var(--tracking-body)}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(120% 80% at 50% -20%, rgba(91,224,160,.10), transparent 55%),
  radial-gradient(90% 60% at 95% 8%, rgba(124,111,224,.10), transparent 50%),
  radial-gradient(80% 60% at 0% 60%, rgba(124,111,224,.05), transparent 55%)}

/* 기존 header/main/landing 레이아웃 무력화 — 벤토가 인수 */
header{display:none}
main{max-width:960px;margin:0 auto;padding:clamp(62px,9vw,70px) clamp(16px,4vw,24px) 72px}
main::before{content:none}
.landing-col{max-width:none;margin:0}

/* ── 톱 브랜드 라인 (한 줄, 절제) ── */
.bento-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.bento-brand{display:flex;align-items:center;gap:10px}
.bento-brand[role="link"]{transition:opacity .15s}
.bento-brand[role="link"]:hover{opacity:.82}
.bento-brand[role="link"]:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:8px}
.bento-logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(91,224,160,.22),rgba(124,111,224,.18));
  border:1px solid rgba(91,224,160,.30);font-family:var(--font-serif);font-weight:800;
  font-size:1rem;color:var(--color-accent);box-shadow:inset 0 0 12px rgba(91,224,160,.12)}
.bento-wordmark{font-family:var(--font-display);font-weight:800;font-size:1rem;letter-spacing:-.01em;color:var(--color-text-primary)}
.bento-wordmark span{color:var(--color-text-tertiary);font-weight:600}
/* 모드 토글 — 세그먼트 컨트롤(pill) */
.mode-toggle{display:inline-flex;gap:3px;padding:3px;background:rgba(255,255,255,.04);
  border:1px solid var(--color-border-default);border-radius:999px;margin:0}
.bento-topbar .mode-tab{font-family:var(--font-display);font-size:.8rem;font-weight:700;color:var(--color-text-tertiary);
  text-decoration:none;padding:7px 16px;border-radius:999px;transition:all .16s ease;letter-spacing:-.01em}
.bento-topbar .mode-tab.on{background:var(--color-accent);color:#08071A;box-shadow:0 2px 10px rgba(91,224,160,.30)}
.bento-topbar .mode-tab:not(.on):hover{color:var(--color-text-primary)}

/* ── 벤토 그리드 — 비대칭 12컬럼 ── */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;align-items:stretch}
.tile{position:relative;background:linear-gradient(180deg,rgba(22,20,42,.92),rgba(17,15,34,.92));
  border:1px solid var(--color-border-default);border-radius:20px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 30px -16px rgba(0,0,0,.7);
  transition:border-color .2s ease,transform .2s ease}
.tile-stat:hover,.tile-hero:hover{border-color:rgba(91,224,160,.22);transform:translateY(-2px)}
/* hero: 7컬럼 / 오레리: 5컬럼 — 비대칭 */
.tile-hero{grid-column:span 7;padding:30px 30px 28px;display:flex;flex-direction:column;justify-content:space-between;min-height:236px;
  background:linear-gradient(150deg,rgba(28,25,52,.96),rgba(15,13,32,.96))}
.tile-hero::after{content:'';position:absolute;top:-80px;right:-60px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,224,160,.16),transparent 65%);pointer-events:none}
.tile-orrery{grid-column:span 5;display:flex;align-items:center;justify-content:center;min-height:236px;
  background:radial-gradient(110% 90% at 50% 30%,rgba(124,111,224,.12),rgba(13,11,28,.96))}
/* 가치 메트릭 5타일 (12칸 폭 sub-grid, 데스크 5열) */
.bento-stats{grid-column:span 12;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:stretch}
.tile-stat{padding:18px 15px;display:flex;flex-direction:column;gap:6px;justify-content:center;min-height:104px}
/* 입력 타일 — 풀폭 */
.tile-form{grid-column:span 12;padding:clamp(22px,4vw,32px)}
.tile-form::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(91,224,160,.5),rgba(124,111,224,.4),transparent)}
/* /today 진입 시 비로그인/저장 사주 없음 안내 — 입력 폼 상단 배너 */
.today-form-notice{display:flex;flex-direction:column;gap:4px;margin-bottom:18px;padding:14px 16px;
  background:var(--color-bg-sunken);border:1px solid var(--color-border-default);
  border-left:3px solid var(--color-accent,#5BE0A0);border-radius:var(--r2,14px);word-break:keep-all}
.today-form-notice b{font-family:var(--font-display);font-weight:800;font-size:.84rem;color:var(--color-accent,#5BE0A0)}
.today-form-notice span{font-size:.86rem;line-height:1.6;color:var(--color-text-secondary)}

@media(max-width:760px){
  .bento{gap:10px}
  .tile-hero{grid-column:span 12;min-height:auto;padding:24px 22px 26px}
  .tile-hero .hero-h1{margin-top:18px}
  .tile-orrery{grid-column:span 12;min-height:230px;order:-1}
  .bento-stats{grid-template-columns:repeat(3,1fr)}
  .tile-stat{padding:14px 12px;min-height:96px}
  .tile-form{grid-column:span 12}
}
@media(max-width:440px){
  .bento-stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .tile-stat{padding:13px 12px;min-height:auto}
}

/* HERO 타일 내부 */

.hero-h1{font-family:var(--font-serif);font-weight:800;font-size:clamp(2rem,5vw,2.7rem);line-height:1.16;
  letter-spacing:-.02em;color:var(--color-text-primary);margin-top:auto}
.hero-h1 em{font-style:normal;color:var(--color-accent)}
.hero-sub{font-family:var(--font-sans);font-size:.95rem;color:var(--color-text-secondary);
  line-height:1.62;margin-top:12px;max-width:34ch}

/* STAT 타일 */
.stat-k{font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;
  color:var(--color-text-primary);line-height:1.05;display:flex;align-items:baseline;gap:4px;word-break:keep-all}
.stat-k b{font-size:.9rem;color:var(--color-accent);font-weight:700}
.stat-label{font-size:.78rem;color:var(--color-text-tertiary);font-weight:600;line-height:1.4}

/* 오레리 타일 — 스케일 보정(타일에 맞게) */
.tile-orrery .orrery-wrap{margin:0}
.tile-orrery .orrery{width:230px;height:230px;max-width:62vw;max-height:62vw}
@media(max-width:480px){.tile-orrery .orrery{width:210px;height:210px}}

/* ── FORM 타일 (입력) — 2컬럼 내부 그리드로 밀도 ── */
.form-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px;
  padding-bottom:20px;border-bottom:1px solid var(--color-border-default)}
.form-step{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--color-accent);
  background:rgba(91,224,160,.10);border:1px solid rgba(91,224,160,.26)}
.form-head-txt h2{font-family:var(--font-display);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;color:var(--color-text-primary);line-height:1.2}
.form-head-txt p{font-size:.86rem;color:var(--color-text-secondary);line-height:1.55;margin-top:5px;max-width:46ch}

/* 입력 필드 리스킨 — 더 미니멀, sunken 필드 */
.landing-card{background:none;border:none;border-radius:0;padding:0;box-shadow:none;overflow:visible}
.landing-card::after{content:none}

label{font-size:.78rem;color:var(--color-text-secondary);font-weight:700;letter-spacing:0;margin-bottom:7px}
input[type=number], input[type=text], select {
  background:rgba(8,7,20,.6)!important;border:1px solid var(--color-border-default)!important;
  border-radius:12px!important;color:var(--color-text-primary);font-weight:600;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
input::placeholder{color:var(--color-text-tertiary);font-weight:500}
input:focus, select:focus {border-color:var(--color-accent-deep)!important;
  box-shadow:0 0 0 3px rgba(91,224,160,.14)!important;background:rgba(8,7,20,.85)!important;outline:none}
.dt-row input{font-family:var(--font-display);font-weight:800}

/* 폼 내부 2단 그리드: 이름|성별 / 달력|관심사를 묶어 밀도 */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.form-grid .span2{grid-column:1 / -1}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}

/* 관심사 칩 — 섹션 헤더 + 칩 */
.focus-picker{display:flex;flex-direction:column;gap:14px;margin-top:2px}
.fpk-head{font-size:.75rem;font-weight:700;color:var(--color-text-tertiary);letter-spacing:.04em;margin-bottom:9px}
.fpk-row{display:flex;flex-wrap:wrap;gap:8px}
.focus-chip{cursor:pointer;border:1px solid var(--color-border-default);background:rgba(8,7,20,.5);
  color:var(--color-text-secondary);border-radius:999px;padding:13px 14px;font-size:.84rem;font-weight:700;
  font-family:var(--font-display);transition:all .14s ease} /* padding 상향 — 44px 터치 타깃 */
.focus-chip:hover{border-color:rgba(91,224,160,.4);color:var(--color-text-primary)}
.focus-chip.on{border-color:var(--color-accent-deep);background:rgba(91,224,160,.14);color:var(--color-accent)}

/* CTA — full, prominent 민트 */
.btn-full{width:100%;margin-top:26px}
.btn{background:var(--color-accent);border:1px solid var(--color-accent-deep);border-radius:14px;
  color:#08071A;font-family:var(--font-display);font-weight:800;font-size:1rem;padding:17px 32px;
  box-shadow:0 8px 24px -8px rgba(91,224,160,.6);transition:transform .12s ease,box-shadow .15s ease,filter .15s ease}
.btn:hover{background:var(--color-accent);color:#08071A;transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:0 14px 32px -8px rgba(91,224,160,.7)}
.btn:active{transform:translateY(0)}

/* 푸터 신뢰 라인 */
.bento-trust{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  margin-top:22px;font-size:.76rem;color:var(--color-text-tertiary)}
.bento-trust span{display:inline-flex;align-items:center;gap:6px}
.bento-trust i{width:5px;height:5px;border-radius:50%;background:var(--color-accent);opacity:.7}

/* 보조 안내/미리보기 박스 — 다크 정합 */
.birth-time-help{background:rgba(91,224,160,.08);border-color:rgba(91,224,160,.3);color:var(--color-text-secondary)}

/* ===== [신규] 오늘의 운세 카드 (additive — .theme-full/.fb-star/.oh-bar 톤 재사용) ===== */
.df-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-bottom:12px}
.df-date{font-family:var(--font-display);font-weight:800;font-size:.9rem;color:var(--color-text-secondary)}
.df-streak{margin-left:auto;font-size:.74rem;font-weight:700;color:var(--color-text-tertiary);white-space:nowrap}
.df-iljin{font-family:var(--font-display);font-weight:800;font-size:1.02rem;color:var(--color-text-primary);line-height:1.5;word-break:keep-all;margin-bottom:16px}
.df-iljin em{font-style:normal;color:var(--color-text-tertiary);font-size:.78rem;margin-left:3px}
/* 총운 */
.df-total{display:flex;align-items:center;gap:14px;padding:15px 16px;margin-bottom:16px;background:var(--color-bg-sunken);border:2px solid var(--color-border-default);border-radius:var(--r2)}
.df-score{font-family:var(--font-display);font-weight:800;font-size:1.9rem;line-height:1;color:var(--color-text-primary)}
.df-score em{font-style:normal;font-size:.85rem;color:var(--color-text-tertiary);margin-left:2px}
.df-grade{font-family:var(--font-display);font-weight:800;font-size:.92rem;padding:6px 14px;border-radius:999px;border:2px solid var(--color-border-default);white-space:nowrap}
.df-grade.good{color:var(--wood);border-color:var(--wood)}
.df-grade.mid{color:var(--earth);border-color:var(--earth)}
.df-grade.bad{color:var(--fire);border-color:var(--fire)}
.df-total-meta{display:flex;flex-direction:column;gap:2px;margin-left:auto;text-align:right;font-size:.74rem;color:var(--color-text-tertiary);word-break:keep-all}
/* 영역별 (별점=.fb-star 재사용 / 막대=.oh-bar 톤) */
.df-areas{display:flex;flex-direction:column;gap:11px;margin-bottom:4px}
.df-area{display:grid;grid-template-columns:62px auto 1fr;align-items:center;gap:10px}
.df-area-label{font-family:var(--font-display);font-weight:800;font-size:.82rem;white-space:nowrap}
.df-area-stars{display:inline-flex;gap:1px}
.df-area-stars .fb-star{font-size:16px;min-width:0;min-height:0;padding:0;cursor:default}
.df-area-stars .fb-star:hover{transform:none}
.df-area-bar{position:relative;height:13px;background:var(--color-bg-elevated);border:1px solid var(--color-border-default);border-radius:999px;overflow:hidden}
.df-area-fill{position:absolute;inset:0 auto 0 0;height:100%;border-radius:999px;min-width:2px;transition:width .5s cubic-bezier(.4,0,.2,1)}
@media(max-width:420px){.df-area{grid-template-columns:54px auto 1fr;gap:8px}}
.df-body-wrap{margin-top:16px}
/* 럭키 */
.df-lucky{margin-top:14px;padding:13px 15px;background:var(--color-accent-mist);border:2px solid var(--color-border-subtle);border-radius:var(--r2);font-size:.84rem;line-height:1.7;color:var(--color-text-primary);word-break:keep-all}
.df-lucky b{font-weight:800;color:var(--color-accent-deep)}
/* CTA / 공유 */
.df-cta-wrap,.df-share-wrap{margin-top:14px}
.df-cta{display:inline-flex;align-items:center;gap:7px;padding:12px 20px;border:2px solid var(--color-border-default);background:var(--color-accent);color:var(--color-text-primary);border-radius:999px;font-family:var(--font-display);font-weight:800;font-size:.9rem;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,opacity .15s ease}
.df-cta:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-soft)}
.df-cta:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.df-cta-coin{font-style:normal;font-weight:700;font-size:.78rem;opacity:.85}
.df-share{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border:2px solid var(--color-border-default);background:var(--color-bg-elevated);color:var(--color-text-primary);border-radius:999px;font-family:var(--font-display);font-weight:700;font-size:.84rem;cursor:pointer;transition:box-shadow .12s ease}
.df-share:hover{box-shadow:var(--shadow-soft)}
.df-share:disabled{opacity:.55;cursor:default}
.df-disclaimer{margin-top:12px;font-size:.72rem;line-height:1.6;color:var(--color-text-tertiary);word-break:keep-all}
/* ===== 결과 카드 스택 UX (2026-07-04 재개편) — 논탭 스택 + sticky 앵커 점프칩. 비주얼은 기존 토큰만 =====
   반려 사유: 4탭이 콘텐츠를 탭 뒤로 숨겨 "클릭해야 보임". → 탭 제거, 결론 먼저 + 앵커칩(숨김 없이 스크롤 점프) + 의미 단위 존 카드. */
/* 앵커 점프칩 — 탭이 아니라 스크롤 점프(콘텐츠를 숨기지 않는다). 결론 바로 아래에서 "이 아래에 무엇이 있는지" 안내 + 원하는 곳으로 즉시 이동.
   sticky top:0 은 html,body 의 overflow-x 가 clip 일 때만 작동(hidden이면 스크롤포트가 생겨 뷰포트에 안 붙음 — 26행 참고). headless 실측(scrollTo 후 getBoundingClientRect().top==0)으로 확정. */
.result-nav{position:sticky;top:0;z-index:20;display:flex;gap:8px;overflow-x:auto;padding:10px 2px;margin:0;background:var(--color-bg-overlay);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.result-nav::-webkit-scrollbar{display:none}
.rnav-lock{font-style:normal;font-size:.82em;margin-left:2px;opacity:.65}
.rnav-chip{flex:none;cursor:pointer;padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--color-border-default);background:var(--color-bg-elevated);color:var(--color-text-secondary);font-family:var(--font-serif);font-weight:700;font-size:.9rem;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.rnav-chip:hover{color:var(--color-text-primary);border-color:var(--color-border-strong)}
.rnav-chip.on{background:var(--color-accent-mist);border-color:var(--color-border-strong);color:var(--color-text-strong)}
/* 의미 단위 그룹 카드(오행/대운) — 접힘 아님, 항상 보임 */
.result-zone{background:var(--color-bg-elevated);border:var(--hairline);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-soft)}
.zone-title{font-family:var(--font-serif);font-weight:800;font-size:var(--text-headline-2);color:var(--color-text-primary);margin:0 0 16px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;letter-spacing:var(--tracking-tight)}
.zone-title::before{content:'';align-self:center;display:inline-block;width:6px;height:1.05em;background:var(--color-accent);border-radius:3px;flex:none}
.zone-sub{font-size:var(--text-caption);color:var(--color-text-tertiary);font-weight:400;letter-spacing:0}
.result-zone > #manseOhaeng{margin-top:0}
/* 대운 존 = 접힘 details. summary = 간지 힌트(작게), body = 기존 대운 상세(대운 보기 버튼 유료 + 세운/월운). "대운 전체를 여기 다 펼치지 말 것" */
/* 대운 카드 — 심화상담(chatCard)급 핵심 콘텐츠 승격(2026-07-05). 헤더 뱃지 + 큰 10년 타임라인(현재 대운 강조) + 현재구간 카피 → 유료 CTA(daewoonBody). */
.dw-zone{padding:26px 24px}
.dw-head{margin-bottom:14px}
.dw-badge{display:inline-block;font-family:var(--font-display);font-size:var(--text-caption);font-weight:700;letter-spacing:.04em;color:var(--color-accent-deep);background:var(--color-accent-mist);border-radius:var(--r-pill);padding:5px 14px;margin-bottom:12px}
.dw-title{font-family:var(--font-serif);font-weight:800;font-size:var(--text-headline-2);color:var(--color-text-primary);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight)}
.dw-lead{margin-top:8px;font-size:var(--text-body-small);line-height:var(--leading-normal);color:var(--color-text-secondary);word-break:keep-all}
/* 10년 타임라인(티저 전용) — 간지 크게, 현재 대운 강조(오행색/글로우/지금 뱃지). 클래스는 기존 유료 대운 뷰(.dw-timeline/.dw-timeline-wrap, CSS 1036/1038/2015)와 겹치지 않게 dw-tsr-* 네임스페이스로 분리(카드-인-카드/양방향 오염 방지). */
.dw-tsr-tl{display:flex;gap:8px;overflow-x:auto;padding:16px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dw-tsr-tl::-webkit-scrollbar{display:none}
.dw-tl-item{flex:none;position:relative;min-width:64px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:13px 10px 10px;border:var(--hairline);border-radius:var(--r-md);background:var(--color-bg-sunken);text-align:center}
.dw-tl-item.cur{border-color:var(--dw-c);background:var(--color-bg-elevated);box-shadow:0 0 0 1px var(--dw-c) inset,0 8px 22px -10px var(--dw-c)}
.dw-tl-now{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:.58rem;font-weight:800;color:var(--color-text-inverse);background:var(--dw-c);padding:1px 8px;border-radius:var(--r-pill);white-space:nowrap}
.dw-tl-gz{font-family:var(--font-display);font-size:1.4rem;font-weight:900;color:var(--dw-c);line-height:1.05}
.dw-tl-item.cur .dw-tl-gz{font-size:1.65rem}
.dw-tl-eum{font-size:.62rem;color:var(--color-text-tertiary);font-weight:600}
.dw-tl-age{font-size:.6rem;color:var(--color-text-tertiary);white-space:nowrap}
/* 티징 — 현재 대운 이후(미래)는 블러, 언락 시 해제. "이후 대운 더보기 1코인"으로 유도(기존 대운 언락 재사용) */
.dw-tl-item.locked{filter:blur(4px);opacity:.5;pointer-events:none;user-select:none}
.dw-tsr-wrap{position:relative}
.dw-tsr-wrap.locked::after{content:'';position:absolute;top:0;right:0;bottom:14px;width:64px;pointer-events:none;background:linear-gradient(to right,transparent,var(--color-bg-elevated))}
.dw-more-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;margin-top:4px;cursor:pointer;border:1px solid var(--color-accent-deep);background:rgba(99,234,137,.12);color:var(--color-accent);border-radius:var(--r-pill);padding:9px 18px;font-family:var(--font-display);font-weight:800;font-size:.9rem;letter-spacing:.01em;transition:background .15s ease,color .15s ease,transform .12s ease}
.dw-more-btn[hidden]{display:none}
.dw-more-btn:hover{background:var(--color-accent);color:var(--color-text-inverse);transform:translateY(-1px)}
.dw-more-btn .dw-more-coin{font-style:normal;font-family:var(--font-sans);font-size:.72rem;font-weight:800;background:var(--color-bg-elevated);color:var(--color-accent-deep);padding:2px 8px;border-radius:var(--r-pill)}
.dw-more-btn:hover .dw-more-coin{background:rgba(10,8,23,.18);color:inherit}

/* ── 세운 버튼 (대운 버튼 아래, .saju-full-btn 재사용 + 상단 간격) ── */
.seun-full-btn{margin-top:12px}

/* ── 캐릭터 특성 페이월(130코인) — 콘텐츠 블러 + 중앙 잠금 버튼 ── */
#characterTraits.ct-locked{position:relative;overflow:hidden}
#characterTraits.ct-locked #characterTraitsContent{filter:blur(7px);opacity:.5;pointer-events:none;user-select:none;max-height:260px;overflow:hidden}
.ct-lock-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:auto;margin-top:0;white-space:nowrap;word-break:keep-all}
.ct-lock-btn::after{content:none}
.ct-lock-btn:hover{transform:translate(-50%,-50%) translate(-2px,-2px)}
.ct-lock-btn:active{transform:translate(-50%,-50%) translate(1px,2px)}

/* ── 번들 CTA(심화 운세 590 / 2030 VISION 250) ── */
.pkg-cta{margin:2px 0 16px;padding:14px 16px;border:1.5px solid var(--color-accent-deep);border-radius:var(--r-lg,16px);background:linear-gradient(135deg,rgba(99,234,137,.10),rgba(157,149,255,.10))}
.pkg-cta.sm{margin:2px 0 12px;padding:0;border:none;background:none}
.pkg-cta-title{font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--color-text-primary);margin-bottom:3px;word-break:keep-all}
.pkg-cta-desc{font-size:.86rem;color:var(--color-text-secondary);margin-bottom:11px;line-height:1.5;word-break:keep-all}
.pkg-cta-btn{width:100%;min-height:44px;cursor:pointer;border:2px solid var(--color-border-strong);background:var(--color-accent);color:var(--color-text-inverse);border-radius:999px;padding:12px 18px;font-family:var(--font-display);font-weight:800;font-size:.95rem;display:inline-flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;box-shadow:var(--shadow-soft);word-break:keep-all;transition:background .15s ease,transform .12s ease}
.pkg-cta-btn:hover{background:var(--color-accent-deep);transform:translateY(-1px)}
.pkg-cta-btn:active{transform:translateY(1px)}
.pkg-cta-btn .pkg-cta-coin{font-style:normal;background:rgba(10,8,23,.18);color:inherit;font-size:.82rem;font-weight:800;padding:2px 10px;border-radius:999px;font-family:var(--font-sans);letter-spacing:0}
.pkg-cta-btn .pkg-cta-was{font-size:.74rem;font-weight:700;opacity:.72;text-decoration:line-through;font-family:var(--font-sans);letter-spacing:0}

/* 현재 대운 강조 카피 */
.dw-current{font-size:var(--text-body-small);color:var(--color-text-secondary);line-height:var(--leading-normal);word-break:keep-all}
.dw-current:empty{display:none}
.dw-current b{color:var(--color-text-strong);font-weight:700}
/* 무료 티저 요약 — 현재 대운 흐름 한 줄 맛보기(공감→궁금증). 은은한 mist 배경으로 눈에 들되 유료 CTA(민트 채움)를 안 가림. */
.dw-teaser{margin-top:14px;padding:14px 16px;border-radius:var(--r-md);background:var(--color-accent-mist);border:var(--hairline);font-size:var(--text-body-small);line-height:var(--leading-relaxed);color:var(--color-text-secondary);word-break:keep-all}
.dw-teaser:empty{display:none}
.dw-teaser b{color:var(--color-text-strong);font-weight:700}
.dw-teaser-label{display:inline-block;font-family:var(--font-display);font-size:.62rem;font-weight:800;letter-spacing:.04em;color:var(--color-accent-deep);background:var(--color-bg-elevated);border-radius:var(--r-pill);padding:2px 9px;margin-right:7px;vertical-align:middle}
.dw-details-body{margin-top:18px}
.dw-details-body > #manseDaewoonFull{margin-top:0}
.dw-details-body > #manseLuck{margin-top:16px}
/* 무료/유료 시각 경계 — "여기부터 코인" */
.paid-divider{display:flex;align-items:center;gap:14px;margin:2px 0}
.paid-divider::before,.paid-divider::after{content:'';flex:1;height:1px;background:var(--color-border-subtle)}
.paid-divider span{flex:none;font-size:var(--text-caption);font-weight:700;padding:5px 14px;border-radius:var(--r-pill);border:var(--hairline);background:var(--color-bg-sunken);color:var(--color-text-secondary);white-space:nowrap;word-break:keep-all}
/* 탭 잔재(빈 탭바/패널)는 세로 스택에서 숨김 */
#results > #resultTabbar:empty,#results > .rtab-panel:empty{display:none}
/* 스크롤 점프 타깃 여백(sticky 칩에 가리지 않게) */
#results.show > *{scroll-margin-top:64px}
/* 비어 있는 슬롯이 flex gap을 만들지 않게 */
#results.show > #manseDailySlot:empty,
#results.show > #focusTop:empty{display:none}
/* 만세력 전문표 — 초심자에게 안 들이대고 접어둔다(details 네이티브 토글) */
.manse-details{margin:0}
.manse-details > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0}
.manse-details > summary::-webkit-details-marker{display:none}
.manse-details > summary:hover .manse-sum-hint{color:var(--color-accent-soft)}
.manse-sum-title{font-family:var(--font-serif);font-weight:800;font-size:var(--text-headline-2);color:var(--color-text-primary);display:flex;align-items:center;gap:10px;letter-spacing:var(--tracking-tight)}
.manse-sum-title::before{content:'';display:inline-block;width:6px;height:1.05em;background:var(--color-accent);border-radius:3px;flex:none}
.manse-sum-hint{flex:none;font-size:var(--text-caption);color:var(--color-accent);font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.manse-sum-hint::after{content:'\25BE';transition:transform .2s ease}
.manse-details[open] .manse-sum-hint::after{transform:rotate(180deg)}
.manse-details:not([open]) .mh-open{display:none}
.manse-details[open] .mh-closed{display:none}
.manse-details > .manse-body{margin-top:16px}

/* ===== 입력 4스텝 마법사 (2026-07-04, additive — 필드/계산부 무손상, 래퍼 마크업 + 토큰만) ===== */
.iw-grid{display:block}
.intake-step{display:flex;flex-direction:column;gap:14px}
.intake-step[hidden]{display:none}
.intake-step:not([hidden]){animation:cardIn var(--motion-slow) var(--ease-emphasized) both}
.iw-why{font-size:.8rem;color:var(--color-text-tertiary);line-height:1.5;margin:0 0 2px;word-break:keep-all}
.iw-progress{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.iw-stepnum{font-family:var(--font-mono);font-size:var(--text-tiny);font-weight:600;color:var(--color-accent);white-space:nowrap}
.iw-track{flex:1;height:8px;border-radius:var(--r-pill);background:var(--color-bg-sunken);overflow:hidden;position:relative;order:2} /* order:2 — 스텝 라벨을 좌측으로, 우측 상단 고정 로그인 뱃지 겹침 회피 */
.iw-fill{position:absolute;top:0;left:0;height:100%;width:0;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--color-accent-deep),var(--color-accent));transition:width var(--motion-slow) var(--ease-emphasized)}
.iw-fill-ghost{background:var(--color-accent);opacity:.28}
.iw-steplabel{font-size:var(--text-tiny);color:var(--color-text-tertiary);white-space:nowrap}
.iw-nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.iw-btn{cursor:pointer;padding:13px 24px;border-radius:var(--r-md);font-weight:700;font-size:var(--text-body-small);font-family:var(--font-serif);transition:transform var(--motion-fast) var(--ease-spring),border-color var(--motion-fast)}
.iw-ghost{border:var(--hairline);background:transparent;color:var(--color-text-primary)}
.iw-ghost:hover{border-color:var(--color-border-strong)}
.iw-ghost[hidden]{display:inline-block;visibility:hidden}     /* STEP1: 슬롯 유지(자리만 비움) */
.iw-primary{border:1px solid transparent;background:var(--color-accent);color:var(--color-text-inverse);box-shadow:var(--glow-mint)}
.iw-primary:hover{transform:translateY(-2px)}
.iw-primary[hidden]{display:none}                             /* STEP4: analyze 버튼이 CTA를 대체 */
.iw-shake{animation:fieldShake .4s}
.iw-review{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.iw-review-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;padding:13px 16px;border:var(--hairline);border-radius:var(--r-md);background:var(--color-bg-sunken);transition:border-color var(--motion-fast),transform var(--motion-fast)}
.iw-review-row:hover{border-color:var(--color-accent);transform:translateY(-1px)}
.iw-review-row .irr-k{flex-shrink:0;width:78px;font-size:.78rem;color:var(--color-text-tertiary);font-weight:600}
.iw-review-row .irr-v{flex:1;font-size:.9rem;color:var(--color-text-primary);font-weight:600;word-break:keep-all}
.iw-review-row .irr-edit{flex-shrink:0;font-size:.74rem;color:var(--color-accent-deep);font-weight:700}
.cal-pills{display:flex;gap:10px;margin-top:2px}
.cal-pill{flex:1;cursor:pointer;padding:12px 14px;border:var(--hairline);border-radius:var(--r-md);background:var(--color-bg-sunken);color:var(--color-text-secondary);font-weight:700;font-size:.9rem;line-height:1.2;text-align:center;transition:border-color var(--motion-fast),background var(--motion-fast),transform var(--motion-fast);display:flex;flex-direction:column;gap:3px}
.cal-pill span{font-size:.68rem;font-weight:500;color:var(--color-text-tertiary);word-break:keep-all}
.cal-pill.on{border-color:var(--color-accent-deep);background:var(--color-accent-mist);color:var(--color-accent-deep)}
.cal-pill.on span{color:var(--color-accent-deep)}
.cal-pill:hover{transform:translateY(-1px);border-color:var(--color-border-strong)}
.summary-cta{display:flex;gap:10px;margin-top:18px}
.scta-btn{flex:1;cursor:pointer;padding:13px 16px;border:var(--hairline);border-radius:var(--r-md);background:var(--color-bg-sunken);color:var(--color-text-primary);font-weight:700;font-size:.86rem;font-family:var(--font-serif);text-align:center;transition:border-color var(--motion-fast),transform var(--motion-fast)}
.scta-btn:hover{border-color:var(--color-accent);transform:translateY(-1px)}
.scta-primary{background:var(--color-accent);color:var(--color-text-inverse);border-color:transparent}
.compat-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:15px 18px;border:var(--hairline);border-radius:var(--r-md);background:var(--color-bg-sunken);text-decoration:none;transition:border-color var(--motion-fast),transform var(--motion-fast)}
.compat-cta:hover{border-color:var(--color-accent);transform:translateY(-1px)}
.compat-cta .cc-txt{font-size:.84rem;line-height:1.6;color:var(--color-text-secondary);word-break:keep-all}
.compat-cta .cc-txt b{display:block;color:var(--color-text-primary);font-weight:700;margin-bottom:2px}
.compat-cta .cc-arrow{flex-shrink:0;font-size:.86rem;font-weight:800;color:var(--color-accent-deep);white-space:nowrap}
.ai-disclaimer{margin:22px 0 8px;padding:14px 18px;border:1px solid var(--color-border-subtle);border-radius:var(--r-md);background:var(--color-bg-sunken);font-size:.78rem;line-height:1.7;color:var(--color-text-tertiary);word-break:keep-all}
.ai-disclaimer strong{color:var(--color-text-secondary);font-weight:700}
#results > .ai-disclaimer{order:70}   /* 결과 flex column 최하단 고정 — order 미지정 시 order:0이라 최상단으로 뜨던 것 수정 */
/* ===== 이용 가이드 모달 — 프리미엄 리디자인 (다크코스믹 글래스) ===== */
.guide-modal[hidden]{display:none}
.guide-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px}
.guide-backdrop{position:absolute;inset:0;background:rgba(6,5,16,.78);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.guide-sheet{position:relative;display:flex;flex-direction:column;max-width:460px;width:100%;max-height:88vh;overflow-y:auto;
  background:rgba(22,20,42,.94);backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);
  border:1px solid var(--color-border-default);border-radius:var(--r-lg);
  box-shadow:var(--shadow-float),0 0 46px -10px rgba(91,224,160,.22),inset 0 1px 0 rgba(255,255,255,.06);
  word-break:keep-all;overflow-wrap:break-word;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.guide-sheet::-webkit-scrollbar{width:8px}
.guide-sheet::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
.guide-head{position:sticky;top:0;z-index:3;padding:22px 24px 14px;
  background:linear-gradient(to bottom,rgba(22,20,42,.98) 58%,rgba(22,20,42,.85));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border-subtle)}
.guide-head::before{content:'';position:absolute;top:0;left:0;right:0;height:120px;pointer-events:none;
  background:radial-gradient(120% 100% at 22% 0%,rgba(91,224,160,.16),transparent 62%)}
.guide-eyebrow{position:relative;display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);font-size:.68rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--color-accent-deep);background:var(--color-accent-mist);
  border:1px solid rgba(91,224,160,.4);border-radius:var(--r-pill);padding:4px 12px;margin-bottom:11px}
.guide-title{position:relative;font-family:var(--font-serif);font-size:1.5rem;font-weight:800;color:var(--color-text-primary);
  margin:0;line-height:1.25;letter-spacing:-.01em}
.guide-x{position:absolute;top:18px;right:18px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;z-index:4;
  background:rgba(255,255,255,.05);border:1px solid var(--color-border-default);border-radius:50%;color:var(--color-text-tertiary);
  font-size:.92rem;cursor:pointer;line-height:1;transition:background .15s,color .15s}
.guide-x:hover{background:rgba(255,255,255,.1);color:var(--color-text-primary)}
.guide-x::before{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)} /* 44px 터치 히트영역(시각 크기 유지) */
.guide-inner{position:relative;z-index:1;padding:18px 24px 20px;display:flex;flex-direction:column;gap:22px}
.guide-intro{background:linear-gradient(158deg,rgba(91,224,160,.10),rgba(124,111,224,.06));
  border:1px solid rgba(91,224,160,.24);border-radius:var(--r-md);padding:15px 15px 17px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 26px -10px rgba(91,224,160,.2)}
.guide-stats{display:flex;gap:9px;margin-bottom:13px}
.guide-stat{flex:1;text-align:center;background:rgba(10,8,23,.5);border:1px solid var(--color-border-default);border-radius:var(--r-sm);padding:10px 6px}
.guide-stat .gs-num{display:block;font-family:var(--font-serif);font-size:1.32rem;font-weight:800;color:var(--color-accent);line-height:1.08}
.guide-stat .gs-num small{font-size:.62em;font-weight:700}
.guide-stat .gs-label{display:block;font-size:.66rem;font-weight:700;color:var(--color-text-tertiary);margin-top:5px;letter-spacing:.01em}
.guide-intro p{font-size:.82rem;line-height:1.72;color:var(--color-text-secondary);margin:0}
.guide-intro p+p{margin-top:9px}
.guide-intro strong{color:var(--color-text-strong);font-weight:700}
.guide-sec{display:flex;flex-direction:column}
.guide-sec-head{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.guide-sec-ico{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:.92rem;
  background:var(--color-accent-mist);border:1px solid rgba(91,224,160,.32);border-radius:9px}
.guide-sec-title{font-family:var(--font-serif);font-size:1.04rem;font-weight:800;color:var(--color-text-primary);margin:0;white-space:nowrap}
.guide-sec-head .gsub{flex:none;font-size:.66rem;font-weight:800;color:var(--color-accent-deep);background:var(--color-accent-mist);
  border:1px solid rgba(91,224,160,.3);border-radius:var(--r-pill);padding:2px 9px;letter-spacing:.01em}
.guide-sec-head::after{content:'';flex:1;height:1px;min-width:12px;background:linear-gradient(to right,var(--color-border-default),transparent)}
.guide-sec .gs-body p{font-size:.83rem;line-height:1.7;color:var(--color-text-secondary);margin:0}
.guide-sec .gs-body p+p{margin-top:7px}
.guide-sec .gs-body .gs-lead{color:var(--color-text-primary);font-weight:600}
.guide-cards{display:flex;flex-direction:column;gap:10px}
.guide-card{position:relative;background:rgba(255,255,255,.035);border:1px solid var(--color-border-default);border-radius:var(--r-md);
  padding:14px 15px;transition:border-color .15s,background .15s}
.guide-card.paid{border-color:rgba(201,162,75,.26);background:linear-gradient(180deg,rgba(201,162,75,.05),rgba(255,255,255,.02))}
.guide-card.o2o{border-color:rgba(155,140,214,.26);background:linear-gradient(180deg,rgba(155,140,214,.06),rgba(255,255,255,.02))}
.guide-card-top{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.guide-card-ico{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:1.02rem;border-radius:10px;
  background:rgba(10,8,23,.55);border:1px solid var(--color-border-default)}
.guide-card.paid .guide-card-ico{background:rgba(201,162,75,.12);border-color:rgba(201,162,75,.3)}
.guide-card.o2o .guide-card-ico{background:rgba(155,140,214,.12);border-color:rgba(155,140,214,.32)}
.guide-card-name{font-family:var(--font-serif);font-size:.96rem;font-weight:800;color:var(--color-text-primary);margin:0;line-height:1.32}
.guide-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.gg-badge{display:inline-flex;align-items:center;font-size:.73rem;font-weight:800;font-family:var(--font-display);
  border-radius:var(--r-pill);padding:4px 11px;letter-spacing:.01em}
.gg-badge.won{color:var(--color-butter);background:rgba(201,162,75,.14);border:1px solid rgba(201,162,75,.5)}
.gg-badge.coin{color:var(--color-accent);background:var(--color-accent-mist);border:1px solid rgba(91,224,160,.42)}
.gg-badge.o2o{color:var(--color-lavender);background:rgba(155,140,214,.14);border:1px solid rgba(155,140,214,.44)}
.gg-badge.soon{color:var(--color-text-tertiary);background:var(--color-bg-sunken);border:1px solid var(--color-border-default)}
.guide-card p{font-size:.8rem;line-height:1.66;color:var(--color-text-secondary);margin:0}
.guide-card p strong{color:var(--color-text-strong);font-weight:700}
.guide-tip{display:flex;gap:11px;align-items:flex-start;background:var(--color-accent-mist);
  border:1px solid rgba(91,224,160,.3);border-left:3px solid var(--color-accent);border-radius:var(--r-sm);padding:13px 15px}
.guide-tip .gt-ico{flex:none;font-size:1.02rem;line-height:1.45}
.guide-tip b{display:block;font-size:.82rem;color:var(--color-text-strong);font-weight:800;margin-bottom:3px}
.guide-tip p{font-size:.78rem;line-height:1.62;color:var(--color-text-secondary);margin:0}
.guide-foot{position:sticky;bottom:0;z-index:3;display:flex;flex-direction:column;gap:9px;padding:14px 24px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(22,20,42,.99) 60%,rgba(22,20,42,.8));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--color-border-subtle)}
.guide-start{padding:14px;border-radius:var(--r-md);border:1px solid rgba(91,224,160,.5);
  background:linear-gradient(135deg,var(--color-accent),var(--color-accent-deep));color:var(--color-text-inverse);
  font-family:var(--font-serif);font-weight:800;font-size:1rem;cursor:pointer;
  box-shadow:0 8px 24px -6px rgba(91,224,160,.5),inset 0 1px 0 rgba(255,255,255,.25);transition:filter .14s,transform .1s}
.guide-start:hover{filter:brightness(1.06)}
.guide-start:active{transform:translateY(1px)}
.guide-dismiss{padding:11px;border-radius:var(--r-md);border:1px solid var(--color-border-default);background:transparent;
  color:var(--color-text-tertiary);font-weight:600;font-size:.84rem;cursor:pointer;transition:color .14s,border-color .14s}
.guide-dismiss:hover{color:var(--color-text-secondary);border-color:var(--color-border-strong)}
@media (max-width:430px){
  .guide-modal{padding:0;align-items:flex-end}
  .guide-sheet{max-width:100%;max-height:92vh;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .guide-head{padding:20px 18px 12px}
  .guide-inner{padding:16px 18px 18px;gap:20px}
  .guide-foot{padding:12px 18px calc(16px + env(safe-area-inset-bottom))}
  .guide-title{font-size:1.34rem}
  .guide-stat .gs-num{font-size:1.18rem}
  .guide-x{top:16px;right:16px;width:36px;height:36px}
}
.intake-step .btn-full{margin-top:6px}                        /* 스텝4 내부라 상단 여백은 flex gap이 담당 */

/* ===== 결과: 히어로 결론 + 단일 세로 스크롤 (2026-07-04 방향A, additive — 노드 재부모화만, 렌더/계산/코인 무손상). 탭바/패널 CSS는 잔재(빈 채로 :empty 숨김) ===== */
#results > #heroConclusion{order:5}
#results > #resultTabbar{order:6}
#results > .rtab-panel{order:7}
#results > #resultFooter{order:60}   /* 푸터(평가/저장/공유) — 만세력(50) 뒤, AI 면책(70) 앞 */
.hero-conclusion{display:flex;flex-direction:column;gap:14px}
.hero-conclusion #manseCharSlot,.hero-conclusion #ilganQuickCard{margin:0}
/* 일간 본질 + 만세력 통합 상자(히어로 일간 자리) — 상단=일간 한 줄, 하단=만세력 접힘. 개별 카드 배경/테두리 제거해 하나의 상자로 묶음. */
.ilgan-manse-box{border:var(--hairline);border-radius:var(--r-lg);background:var(--color-bg-elevated);box-shadow:var(--shadow-soft);overflow:hidden}
.ilgan-manse-box:empty{display:none}
.ilgan-manse-box > #ilganQuickCard{background:transparent;border:none;box-shadow:none;border-radius:0;margin:0}
.ilgan-manse-box > #manseryeokCard{background:transparent;border:none;box-shadow:none;border-radius:0;margin:0;border-top:var(--hairline)}
.hero-lede{counter-reset:hl;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.hero-lede li{position:relative;padding-left:26px;color:var(--color-text-secondary);font-size:var(--text-body-small);line-height:var(--leading-normal)}
.hero-lede li::before{counter-increment:hl;content:counter(hl);position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:var(--r-pill);background:var(--color-accent-mist);color:var(--color-accent);font-family:var(--font-mono);font-size:11px;font-weight:700;display:grid;place-items:center}
.result-tabbar{position:sticky;top:0;z-index:5;display:flex;gap:6px;overflow-x:auto;padding:10px 2px;margin:0;background:var(--color-bg-overlay);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.result-tabbar::-webkit-scrollbar{display:none}
.rtab{flex:none;cursor:pointer;padding:10px 20px;border-radius:var(--r-pill);border:1px solid var(--color-border-default);background:var(--color-bg-elevated);color:var(--color-text-secondary);font-family:var(--font-serif);font-weight:700;font-size:var(--text-body-small);white-space:nowrap;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.rtab:hover{color:var(--color-text-primary);border-color:var(--color-border-strong)}
.rtab.on{background:var(--color-accent);border-color:transparent;color:var(--color-text-inverse)}
.rtab[hidden]{display:none}
.rtab-panel{display:flex;flex-direction:column;gap:22px}
.rtab-panel[hidden]{display:none}
.rtab-panel > *{margin-top:0;margin-bottom:0}
.rtab-anim{animation:cardIn var(--motion-slow) var(--ease-emphasized) both}
.result-footer{display:flex;flex-direction:column;gap:22px;margin-top:8px}
.result-footer > *{margin-top:0;margin-bottom:0}