:root {
  /* 팔레트: 검은 허공 · 뼈흰색 · 용융 금색(엠버). 무지갯빛은 밝은 순간(완료·종합)에만 쓴다 */
  --bg: #05060a;
  --bg2: #0b0d14;
  --card: rgba(244, 241, 234, 0.04);
  --card-b: rgba(244, 241, 234, 0.10);
  --gold: #ffb24d;
  --gold-2: #ffd08a;
  --ember: #ff7a18;
  --iri-1: #8a6bff;
  --iri-2: #4fc3ff;
  --iri-3: #ff6ad5;
  --iri: linear-gradient(120deg, #8a6bff 0%, #4fc3ff 50%, #ff6ad5 100%);
  --ink: #f4f1ea;
  --muted: #a6a39d;
  --dim: #77746e;
  --body: #cfccc5;
  --ok: #6fd39a;
  --warn: #ff8f6b;
  --serif: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", "Batang", serif;
  --sans: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --gutter: max(16px, var(--safe-l), var(--safe-r));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: radial-gradient(900px 640px at 50% -8%, rgba(255,178,77,.15) 0%, rgba(255,122,24,.05) 42%, transparent 70%) no-repeat, var(--bg);
  min-height: 100vh; min-height: 100dvh;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  word-break: keep-all; overflow-wrap: anywhere;
}
body.drag::after { content: '사진을 놓으면 바로 분석합니다'; position: fixed; inset: 0; background: rgba(5,6,10,.85); border: 3px dashed var(--gold); display: grid; place-items: center; font-size: 1.4rem; color: var(--gold); z-index: 50; }
body.cam-open { overflow: hidden; overscroll-behavior: none; }
body.cam-open header.top, body.cam-open footer, body.cam-open .bg-orb { visibility: hidden; }
/* 배경 빛: blur 필터 대신 방사형 그라데이션 (휴대폰 GPU 부담 감소) */
.bg-orb { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }
.bg-orb.a { width: 760px; height: 760px; top: -380px; right: -300px; background: radial-gradient(circle, rgba(255,178,77,.26) 0%, rgba(255,178,77,.08) 40%, rgba(255,178,77,0) 70%); }
.bg-orb.b { display: none; }
.hidden { display: none !important; }

header.top { position: relative; z-index: 1; padding: calc(18px + var(--safe-t)) var(--gutter) 6px; max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.seal {
  font-family: var(--serif); font-weight: 900; font-size: 1.45rem; color: var(--gold-2); flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #17110a, #05060a 70%);
  border: 1px solid rgba(255,178,77,.6); text-shadow: 0 0 12px rgba(255,178,77,.85);
  box-shadow: 0 0 22px rgba(255,178,77,.28), inset 0 0 12px rgba(255,178,77,.14);
}
h1 { font-family: var(--serif); font-size: 1.5rem; margin: 0; letter-spacing: .04em; line-height: 1.3; }
.tagline { margin: 0; color: var(--muted); font-size: .9rem; }

main { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 12px var(--gutter) 60px; }
.panel { animation: fade .3s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: none; } }

/* ── 버튼 ── */
button { font-family: var(--sans); font-size: 1rem; border: 0; border-radius: 999px; padding: 13px 26px; min-height: 48px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, opacity .15s, background .15s; touch-action: manipulation; color: inherit; }
button:active { transform: scale(.97); }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible + * { outline: 2px solid var(--gold-2); outline-offset: 3px; }
button.primary { background: linear-gradient(135deg, #ffcb73 0%, var(--gold) 45%, var(--ember) 100%); color: #2a1503; font-weight: 700; box-shadow: 0 8px 28px rgba(255,122,24,.30), inset 0 1px 0 rgba(255,255,255,.35); }
button.primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
button.ghost { background: rgba(244,241,234,.04); color: var(--ink); border: 1px solid rgba(244,241,234,.16); }
@media (hover: hover) { button.ghost:hover { background: rgba(255,255,255,.08); } }
.chip { min-height: 36px; padding: 6px 14px; font-size: .85rem; background: rgba(255,178,77,.12); color: var(--gold-2); border: 1px solid rgba(255,178,77,.4); flex-shrink: 0; }

/* ── 엔진 상태 · 안내 ── */
@media (prefers-reduced-motion: reduce) { .scan-line { animation: none; } .panel { animation: none; } }
.engine-status { font-size: .82rem; color: var(--dim); margin: 0 0 14px; min-height: 1.3em; }
.engine-status.ready { color: var(--ok); }
.engine-status.error { color: var(--warn); }
.http-note { max-width: 560px; margin: 0 auto 16px; font-size: .85rem; color: var(--body); background: rgba(255,143,107,.08); border: 1px solid rgba(255,143,107,.35); border-radius: 12px; padding: 10px 14px; }
.http-note b { color: var(--warn); font-weight: 500; }

.mobile-card { display: flex; gap: 20px; align-items: center; margin: 30px auto 0; max-width: 640px; background: var(--card); border: 1px solid rgba(255,178,77,.3); border-radius: 18px; padding: 18px 20px; }
.mobile-card canvas { width: 132px; height: 132px; border-radius: 10px; background: #fff; padding: 8px; flex-shrink: 0; image-rendering: pixelated; }
.mobile-card h3 { margin: 0 0 4px; font-size: 1.05rem; }
.mobile-card p { margin: 0 0 6px; color: var(--body); font-size: .9rem; }
.mobile-card .small { font-size: .8rem; color: var(--dim); margin-top: 8px; }
.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; color: var(--gold-2); font-size: .92rem; word-break: break-all; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 34px 0 18px; }
.feat { background: var(--card); border: 1px solid var(--card-b); border-radius: 16px; padding: 20px; }
.feat b { font-family: var(--serif); font-size: 1.5rem; color: var(--gold); display: block; }
.feat span { font-size: .85rem; color: var(--muted); }
.feat p { margin: 8px 0 0; font-size: .92rem; color: var(--body); }
.disclaimer { color: var(--dim); font-size: .8rem; text-align: center; margin: 18px 0 0; }
.disclaimer b { color: var(--muted); font-weight: 500; }

/* ── 카메라 ── */
.cam-stage { position: relative; width: min(100%, 720px); margin: 10px auto 0; aspect-ratio: 4/3; background: #000; border-radius: 20px; overflow: hidden; border: 1px solid var(--card-b); box-shadow: 0 20px 60px rgba(0,0,0,.45); touch-action: none; }
/* 영상과 윤곽선 캔버스는 같은 레이어 안에서 같은 크기로 겹친다. 레이어 크기·위치·좌우반전은 app.js 의 layoutCamera 가 정한다. */
.cam-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.cam-layer.mirror { transform: scaleX(-1); }
.cam-layer video, .cam-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 타원 기본 위치(스크립트가 배치하기 전 잠깐 쓰임) */
.oval { position: absolute; left: 50%; top: 50%; height: 62%; aspect-ratio: 3/4; transform: translate(-50%, -50%); pointer-events: none;
  border: 2px dashed rgba(255,178,77,.75); border-radius: 50%; box-shadow: 0 0 0 200vmax rgba(0,0,0,.3); transition: border-color .2s; }
.cam { animation: none; }
.cam.ok .oval { border-style: solid; border-color: var(--ok); }
.status { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); background: rgba(5,6,10,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--card-b); color: var(--ink); padding: 8px 16px; border-radius: 999px; font-size: .92rem; text-align: center; width: max-content; max-width: calc(100% - 24px); }
.status.ok { border-color: var(--ok); color: var(--ok); }
.status.warn { border-color: var(--warn); color: var(--warn); }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.flash.on { animation: flash .35s ease-out; }
@keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }

.cam-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; gap: 10px 24px; margin: 18px auto 0; max-width: 420px; }
.cam-controls .auto-toggle { grid-column: 1 / -1; }
button.round { width: 54px; height: 54px; min-height: 54px; padding: 0; font-size: 1.3rem; display: grid; place-items: center; }
.shutter { position: relative; width: 80px; height: 80px; min-height: 80px; padding: 0; background: transparent; border-radius: 50%; }
.shutter svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.shutter circle { fill: none; stroke-width: 6; }
.shutter .track { stroke: rgba(255,255,255,.35); }
.shutter .progress { stroke: var(--ok); stroke-dasharray: 283; stroke-dashoffset: 283; stroke-linecap: round; transition: stroke-dashoffset .12s linear; }
.shutter .dot { position: absolute; inset: 11px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-2), var(--gold)); transition: transform .15s, opacity .15s; }
.shutter:disabled { cursor: not-allowed; }
.shutter:disabled .dot { opacity: .35; transform: scale(.9); }
.shutter:not(:disabled):active .dot { transform: scale(.88); }
.auto-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); cursor: pointer; min-height: 44px; padding: 0 8px; user-select: none; -webkit-user-select: none; }
.auto-toggle input { width: 18px; height: 18px; accent-color: var(--gold); }

/* ── 분석 중 ── */
.analyzing { text-align: center; }
.scan-wrap { position: relative; width: min(100%, 480px); margin: 10px auto; border-radius: 18px; overflow: hidden; border: 1px solid var(--gold); box-shadow: 0 0 40px rgba(255,178,77,.25); }
.scan-wrap canvas { display: block; width: 100%; height: auto; max-height: 62vh; max-height: 62dvh; object-fit: contain; background: #000; filter: saturate(.7) contrast(1.05); }
.scan-line { position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold-2), transparent); box-shadow: 0 0 18px var(--gold); animation: scan 1.8s ease-in-out infinite; }
@keyframes scan { 0% { top: 0; } 50% { top: calc(100% - 3px); } 100% { top: 0; } }
.steps { list-style: none; padding: 0; margin: 18px auto 0; max-width: 420px; text-align: left; }
.steps li { opacity: 0; transform: translateX(-8px); transition: .4s; color: var(--muted); padding: 6px 0 6px 26px; position: relative; }
.steps li::before { content: '✦'; position: absolute; left: 4px; color: var(--gold); }
.steps li.in { opacity: 1; transform: none; }
.steps li:last-child { color: var(--ink); }

/* ── 결과 ── */
.result-top { display: grid; grid-template-columns: 320px 1fr; gap: 22px; align-items: start; margin-top: 10px; }
.photo-wrap { border-radius: 18px; overflow: hidden; border: 1px solid var(--card-b); background: #000; }
.photo-wrap canvas { display: block; width: 100%; height: auto; }
.photo-note { margin: 8px 2px 0; font-size: .78rem; color: var(--dim); line-height: 1.5; }

/* 십자면상 카드 */
.shape-card { margin-top: 18px; background: linear-gradient(160deg, rgba(255,178,77,.1), rgba(255,255,255,.03)); border: 1px solid rgba(255,178,77,.35); border-radius: 20px; padding: 22px 24px; }
.shape-head { display: flex; gap: 16px; align-items: center; }
.shape-char { font-family: var(--serif); font-weight: 900; font-size: 2.8rem; line-height: 1; width: 76px; height: 76px; flex-shrink: 0; border-radius: 16px; display: grid; place-items: center;
  color: #2a1f05; background: linear-gradient(145deg, var(--gold-2), var(--gold)); box-shadow: 0 10px 30px rgba(255,178,77,.3); }
.shape-card h2 { font-family: var(--serif); margin: 2px 0 4px; font-size: 1.6rem; line-height: 1.3; }
.shape-advice { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--gold); background: rgba(0,0,0,.18); border-radius: 0 10px 10px 0; color: var(--gold-2); font-size: .93rem; }
.shape-top { display: flex; gap: 8px; flex-wrap: wrap; }
.shape-top span { font-size: .82rem; color: var(--muted); border: 1px solid var(--card-b); border-radius: 999px; padding: 4px 12px; }
.shape-top span b { font-family: var(--serif); color: var(--ink); margin-right: 4px; }
.shape-top span.on { color: var(--gold-2); border-color: rgba(255,178,77,.5); background: rgba(255,178,77,.1); }
.type-card { background: var(--card); border: 1px solid var(--card-b); border-radius: 20px; padding: 22px 24px; min-width: 0; }
.type-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; }
.type-seal { --seal: var(--gold); font-family: var(--serif); font-weight: 900; font-size: 2.4rem; width: 72px; height: 72px; border-radius: 16px; display: grid; place-items: center; color: #10131c; background: var(--seal); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.type-eyebrow { font-size: .78rem; color: var(--gold); letter-spacing: .12em; }
.type-card h2 { font-family: var(--serif); margin: 2px 0 4px; font-size: 1.7rem; line-height: 1.3; }
.type-shape { margin: 0; color: var(--muted); font-size: .92rem; }
.type-keyword { margin: 4px 0 0; color: var(--gold-2); font-family: var(--serif); letter-spacing: .06em; }
.avg { text-align: center; background: rgba(255,178,77,.08); border: 1px solid rgba(255,178,77,.35); border-radius: 14px; padding: 8px 14px; min-width: 84px; }
.avg-label { display: block; font-size: .72rem; color: var(--gold); letter-spacing: .1em; }
.avg b { font-family: var(--serif); font-size: 2rem; color: var(--gold-2); line-height: 1.1; }
.avg-grade { display: block; font-size: .72rem; color: var(--muted); }
.type-mix-wrap { margin: 16px 0 10px; }
.type-mix { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.06); }
.type-mix .mix { display: block; width: var(--w); background: var(--c); }
.type-mix-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin-top: 6px; }
.type-mix-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.type-secondary { display: inline-block; margin-top: 6px; font-size: .8rem; color: var(--gold-2); border: 1px solid rgba(255,178,77,.35); padding: 2px 10px; border-radius: 999px; }
.type-desc { color: #d5d8e2; margin: 8px 0 14px; }
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: .92rem; }
.type-grid h4 { margin: 0 0 4px; font-size: .78rem; color: var(--gold); letter-spacing: .1em; }
.type-grid p { margin: 0 0 10px; color: var(--body); }
.type-grid ul { margin: 0; padding-left: 18px; color: var(--body); }

h3.sec { font-family: var(--serif); font-size: 1.3rem; margin: 40px 0 14px; display: flex; align-items: center; gap: 12px; }
h3.sec span { font-size: .95rem; color: var(--gold); border: 1px solid rgba(255,178,77,.45); padding: 2px 10px; border-radius: 6px; letter-spacing: .1em; }
h3.sec::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--card-b), transparent); }

.samjeong { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sj { background: var(--card); border: 1px solid var(--card-b); border-radius: 16px; padding: 18px; }
.sj.best { border-color: rgba(255,178,77,.6); box-shadow: 0 0 30px rgba(255,178,77,.12); }
.sj-head { display: flex; flex-direction: column; margin-bottom: 14px; }
.sj-head b { font-family: var(--serif); font-size: 1.1rem; }
.sj-head span { color: var(--muted); font-size: .82rem; }
.sj p { margin: 10px 0 0; font-size: .9rem; color: var(--body); }
.meter { position: relative; height: 10px; border-radius: 999px; background: rgba(255,255,255,.07); }
.meter i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, #b8741c, var(--gold)); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.meter.gold i { background: linear-gradient(90deg, #b8741c, var(--gold-2)); }
.meter em { position: absolute; right: 0; top: -24px; font-style: normal; font-size: .85rem; color: var(--gold-2); font-family: var(--serif); }
.note { color: var(--muted); font-size: .92rem; margin-top: 14px; padding: 12px 16px; border-left: 3px solid var(--gold); background: var(--card); border-radius: 0 12px 12px 0; }

.fortunes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.fortune { background: var(--card); border: 1px solid var(--card-b); border-radius: 16px; padding: 18px; }
.f-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.f-icon { font-size: 1.2rem; }
.f-head b { font-size: 1.05rem; }
.f-level { font-family: var(--serif); font-size: .8rem; color: var(--muted); border: 1px solid var(--card-b); padding: 0 8px; border-radius: 6px; }
.f-level.top { color: #ffd166; border-color: rgba(255,209,102,.5); }
.f-score { margin-left: auto; font-family: var(--serif); font-size: 1.5rem; color: var(--gold-2); }
.fortune p { margin: 10px 0 0; font-size: .92rem; color: var(--body); }

.palaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.palace { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--card-b); border-radius: 14px; padding: 12px 14px; }
.p-grade { font-family: var(--serif); font-weight: 900; font-size: 1.3rem; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.g-top .p-grade { background: rgba(255,178,77,.2); color: var(--gold-2); border: 1px solid rgba(255,178,77,.5); }
.g-mid .p-grade { background: rgba(111,211,154,.12); color: var(--ok); border: 1px solid rgba(111,211,154,.4); }
.g-low .p-grade { background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid var(--card-b); }
.p-body { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.p-body b { font-size: .95rem; }
.p-body span { font-size: .8rem; color: var(--gold-2); }
.p-body small { font-size: .78rem; color: var(--dim); }

.parts { display: flex; flex-direction: column; gap: 8px; }
.part { background: var(--card); border: 1px solid var(--card-b); border-radius: 14px; overflow: hidden; }
.part summary { list-style: none; display: grid; grid-template-columns: 130px 1fr auto auto; gap: 12px; align-items: center; padding: 14px 18px; cursor: pointer; min-height: 56px; }
.part summary::-webkit-details-marker { display: none; }
.part summary::after { content: '⌄'; color: var(--dim); transition: transform .2s; }
.part[open] summary::after { transform: rotate(180deg); }
.part[open] summary { background: rgba(255,255,255,.03); }
.p-name { font-weight: 700; display: flex; flex-direction: column; line-height: 1.3; }
.p-name small { color: var(--dim); font-weight: 400; font-size: .75rem; }
.p-label { color: var(--gold-2); font-size: .95rem; }
.p-badge { font-family: var(--serif); font-size: .8rem; color: var(--muted); border: 1px solid var(--card-b); padding: 1px 8px; border-radius: 6px; }
.p-badge.top { color: #ffd166; border-color: rgba(255,209,102,.5); }
.part p { margin: 0; padding: 0 18px 16px; color: var(--body); font-size: .93rem; }

.summary { background: linear-gradient(160deg, rgba(255,178,77,.12), rgba(138,107,255,.08)); border: 1px solid rgba(255,178,77,.35); border-radius: 18px; padding: 24px 28px; font-family: var(--serif); font-size: 1.02rem; line-height: 1.9; }
.summary p { margin: 0 0 12px; }
.summary p:last-child { margin: 0; color: var(--gold-2); }

.result-bar { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

footer { position: relative; z-index: 1; text-align: center; color: var(--dim); font-size: .8rem; padding: 20px var(--gutter) calc(20px + var(--safe-b)); }
.toast { position: fixed; left: 50%; bottom: calc(28px + var(--safe-b)); transform: translate(-50%, 20px); opacity: 0; background: #12131b; color: var(--ink); border: 1px solid var(--card-b); padding: 12px 20px; border-radius: 12px; font-size: .92rem; transition: .3s; z-index: 60; width: max-content; max-width: calc(100vw - 32px); text-align: center; pointer-events: none; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
body.cam-open .toast { bottom: calc(170px + var(--safe-b)); }
@media (max-width: 820px) { body[data-bar="1"] .toast { bottom: calc(92px + var(--safe-b)); } }

/* ── 태블릿·휴대폰 ── */
@media (max-width: 820px) {
  .features { grid-template-columns: 1fr; }
  .result-top { grid-template-columns: 1fr; }
  .photo-col { max-width: 360px; width: 100%; margin: 0 auto; }
  .shape-card { padding: 18px; }
  .shape-char { width: 62px; height: 62px; font-size: 2.3rem; }
  .shape-card h2 { font-size: 1.4rem; }
  .samjeong { grid-template-columns: 1fr; }
  .type-card { padding: 18px; }
  .type-head { grid-template-columns: auto 1fr; }
  .avg { grid-column: 1 / -1; display: flex; gap: 12px; align-items: baseline; justify-content: center; }
  .type-grid { grid-template-columns: 1fr; }
  .part summary { grid-template-columns: 1fr auto auto; padding: 12px 16px; }
  .part summary .p-label { grid-column: 1 / -1; grid-row: 2; font-size: .9rem; }
  .summary { padding: 20px; font-size: .98rem; }

  /* 결과 화면: 하단 고정 버튼 막대 */
  .result { padding-bottom: 84px; }
  .result-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; flex-wrap: nowrap;
    padding: 10px var(--gutter) calc(10px + var(--safe-b));
    background: rgba(5,6,10,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--card-b); }
  .result-bar button { flex: 1; padding: 12px 10px; font-size: .95rem; }
  .result-bar #btn-home { flex: 0 0 52px; font-size: 1.2rem; }
  body[data-bar="1"] footer { padding-bottom: calc(96px + var(--safe-b)); }

  /* 카메라 화면: 전체 화면 */
  .cam { position: fixed; left: var(--vvl, 0px); top: var(--vvt, 0px); width: var(--vvw, 100%); height: var(--vvh, 100dvh); z-index: 40; background: #000; display: flex; flex-direction: column; animation: none; overflow: hidden; touch-action: none; overscroll-behavior: none; }
  .cam-stage { flex: 1; width: 100%; margin: 0; aspect-ratio: auto; border-radius: 0; border: 0; box-shadow: none; }
  .cam .status { top: calc(14px + var(--safe-t)); bottom: auto; font-size: .95rem; }
  .cam-controls { position: absolute; left: 0; right: 0; bottom: 0; max-width: none; margin: 0;
    padding: 16px var(--gutter) calc(14px + var(--safe-b));
    background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); }
  .mobile-card { flex-direction: column; text-align: center; }
}
@media (max-width: 420px) {
  h1 { font-size: 1.3rem; }
  .tagline { font-size: .82rem; }
  .seal { width: 42px; height: 42px; font-size: 1.3rem; }
  .type-seal { width: 60px; height: 60px; font-size: 2rem; }
  .type-card h2 { font-size: 1.45rem; }
  h3.sec { font-size: 1.15rem; margin-top: 32px; }
}
/* 가로로 눕힌 휴대폰 */
@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  .cam { position: fixed; left: var(--vvl, 0px); top: var(--vvt, 0px); width: var(--vvw, 100%); height: var(--vvh, 100dvh); z-index: 40; background: #000; display: flex; flex-direction: row; overflow: hidden; touch-action: none; }
  .cam-stage { flex: 1; width: auto; height: 100%; margin: 0; aspect-ratio: auto; border-radius: 0; border: 0; }
  .cam-controls { position: static; display: flex; flex-direction: column; justify-content: center; width: auto; margin: 0; max-width: none;
    padding: var(--safe-t) max(14px, var(--safe-r)) var(--safe-b) 14px; background: #000; gap: 14px; }
  .cam .status { top: calc(10px + var(--safe-t)); bottom: auto; }
  .auto-hint { display: none; }
  .auto-toggle { flex-direction: column; gap: 2px; font-size: .78rem; padding: 0; }
}


/* ══════════ 종합 분석 (손금 · 사주 · 종합) ══════════ */
:root { --wood: #5cb78a; --fire: #e0643f; --earth: #c9a24a; --metal: #d9d9e3; --water: #5b8fd9; }
button.sm { min-height: 40px; padding: 8px 18px; font-size: .92rem; }
button.link { background: none; color: var(--muted); text-decoration: underline; padding: 8px 12px; min-height: 40px; font-size: .88rem; }
.hub-title { font-family: var(--serif); font-size: clamp(1.4rem, 5vw, 1.9rem); margin: 18px 0 8px; text-align: center; }
.hub-title small { font-size: .55em; color: var(--gold); letter-spacing: .12em; margin-left: 6px; }
.hub-lead { text-align: center; color: var(--muted); max-width: 560px; margin: 0 auto 22px; }
.hub-lead b { color: var(--gold-2); font-weight: 500; }

.back-combo { margin-top: 22px; text-align: center; }

/* 허브 (첫 화면) — 천상 × 하이퍼팝: 검은 허공에 단 하나의 따뜻한 빛, 완료의 순간에만 무지갯빛 */
#embers { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
#embers.on { opacity: 1; }
body.cam-open #embers { display: none; }
#bloom { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 38%, #fff 0%, rgba(255,208,138,.8) 16%, rgba(255,122,24,.38) 40%, transparent 70%); }
#bloom.on { animation: bloom .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes bloom { 0% { opacity: 0; transform: scale(.55); } 22% { opacity: .8; } 100% { opacity: 0; transform: scale(1.6); } }

body[data-view="hub"] header.top .brand { display: none; }
body[data-view="hub"] header.top { min-height: 0; padding-bottom: 0; justify-content: flex-end; }

.hero { text-align: center; padding: 4px 0 2px; }
.halo { position: relative; isolation: isolate; width: 104px; height: 104px; margin: 8px auto 16px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255,178,77,.55); animation: breathe 6s ease-in-out infinite;
  box-shadow: 0 0 0 9px rgba(255,178,77,.035), 0 0 54px rgba(255,178,77,.28), inset 0 0 30px rgba(255,178,77,.16); }
.halo::before { content: ''; position: absolute; inset: -15px; border-radius: 50%; border: 1px solid rgba(255,178,77,.16); }
.halo::after { content: ''; position: absolute; inset: -46px; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(255,178,77,.20), transparent 66%); }
.halo-glyph { font-family: var(--serif); font-weight: 900; font-size: 3.3rem; line-height: 1; color: var(--ink); text-shadow: 0 0 26px rgba(255,178,77,.8), 0 0 4px rgba(255,208,138,.7); }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.hero-title { font-family: var(--serif); font-weight: 900; font-size: clamp(2rem, 9vw, 2.7rem); letter-spacing: .14em; margin: 0; padding-left: .14em; color: var(--ink); text-shadow: 0 0 34px rgba(255,178,77,.35); line-height: 1.25; }
.hero-sub { margin: 6px 0 0; color: var(--muted); font-size: .92rem; letter-spacing: .04em; }
.hub-lead { margin: 18px auto 22px; font-size: .95rem; }

.hub-steps { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin: 0 auto; }
.step { position: relative; display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: start; padding: 16px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(244,241,234,.05), rgba(244,241,234,.012)); border: 1px solid var(--card-b);
  transition: box-shadow .5s ease, background .5s ease; }
/* 가운데 글자 = 검은 허공 위의 주인공 (하나의 따뜻한 빛으로 비춘다) */
.mc-glyph { position: relative; overflow: hidden; width: 88px; height: 88px; border-radius: 22px; display: grid; place-items: center; background: #020305;
  border: 1px solid rgba(255,178,77,.28); box-shadow: inset 0 0 26px rgba(255,178,77,.10), 0 0 32px rgba(255,178,77,.12); transition: background .5s ease, box-shadow .5s ease, border-color .5s ease; }
.mc-glyph::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(255,178,77,.30), transparent 62%); }
.mc-glyph b { position: relative; font-family: var(--serif); font-weight: 900; font-size: 2.9rem; line-height: 1; color: var(--gold-2); text-shadow: 0 0 22px rgba(255,178,77,.9); }
.step-body { min-width: 0; }
.step-body h3 { margin: 2px 0 4px; font-family: var(--serif); font-size: 1.22rem; letter-spacing: .04em; }
.step-body h3 small { font-size: .72rem; color: var(--dim); font-family: var(--sans); font-weight: 400; margin-left: 6px; letter-spacing: .08em; }
.step-desc { margin: 0 0 10px; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.step-status { margin: 0 0 10px; color: var(--ink); font-size: .9rem; min-height: 1.2em; }
.step-status:empty { display: none; }
.step-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* 완료: 밝은 프레임 = 무지갯빛 (그림자 없는 한 번의 '계시') */
.step.done { border-color: transparent; background: linear-gradient(#0a0b12, #0a0b12) padding-box, var(--iri) border-box; box-shadow: 0 0 46px rgba(138,107,255,.16); }
.step.done .mc-glyph { background: linear-gradient(150deg, #fbf8f1, #e7e0f7); border-color: rgba(255,255,255,.7); box-shadow: 0 0 36px rgba(138,107,255,.42), 0 0 64px rgba(79,195,255,.2); }
.step.done .mc-glyph::before { background: radial-gradient(circle at 28% 18%, rgba(255,255,255,.95), transparent 58%); }
.step.done .mc-glyph b { background: var(--iri); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }

.hub-actions { max-width: 640px; margin: 26px auto 0; text-align: center; }
.pips { display: flex; gap: 10px; justify-content: center; margin: 0 0 16px; }
.pips i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(244,241,234,.34); transition: background .5s ease, box-shadow .5s ease, border-color .5s ease; }
.pips i.on { background: var(--iri); border-color: transparent; box-shadow: 0 0 14px rgba(138,107,255,.7); }
#hub-go { width: min(100%, 420px); }
#hub-go:disabled { background: transparent; color: var(--dim); border: 1px solid rgba(244,241,234,.16); opacity: 1; }
.hub-hint { color: var(--dim); font-size: .85rem; margin: 12px 0 4px; }
@media (prefers-reduced-motion: reduce) { .halo, #bloom.on { animation: none; } }
@media (max-width: 420px) { .step { grid-template-columns: 72px 1fr; gap: 14px; padding: 14px; } .mc-glyph { width: 72px; height: 72px; border-radius: 18px; } .mc-glyph b { font-size: 2.4rem; } .halo { width: 92px; height: 92px; } .halo-glyph { font-size: 2.9rem; } }

/* 사주 입력 */
.sajuform form { max-width: 520px; margin: 18px auto 0; display: flex; flex-direction: column; gap: 18px; }
.sajuform fieldset { border: 0; padding: 0; margin: 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg legend { font-size: .85rem; color: var(--muted); margin-bottom: 6px; padding: 0; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: grid; place-items: center; min-height: 48px; border-radius: 14px; border: 1px solid var(--card-b); background: var(--card); font-weight: 500; }
.seg input:checked + span { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #241c05; border-color: transparent; font-weight: 700; }
.seg input:focus-visible + span { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.field > label:first-child { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
.field-row { display: flex; gap: 8px; }
.field-row select, .field-row input[type="time"] { flex: 1; min-width: 0; min-height: 48px; padding: 0 12px; font: inherit; font-size: 1rem; color: var(--ink); background: #0f1017; border: 1px solid var(--card-b); border-radius: 12px; color-scheme: dark; }
.field-row select:focus-visible, .field-row input:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.field-row input:disabled { opacity: .4; }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; color: var(--body); font-size: .92rem; }
.check input { width: 20px; height: 20px; accent-color: var(--gold); }
.time-row { align-items: center; flex-wrap: wrap; }
.time-row input[type="time"] { flex: 0 0 140px; }
.field-hint { margin: 8px 0 0; color: var(--dim); font-size: .8rem; }
.form-error { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(255,143,107,.1); border: 1px solid rgba(255,143,107,.4); color: var(--warn); font-size: .9rem; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.form-actions .primary { flex: 1; }

/* 사주 결과 */
.saju-meta { text-align: center; color: var(--muted); margin: 0 0 14px; font-size: .92rem; }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 520px; margin: 0 auto; }
.pillar { background: var(--card); border: 1px solid var(--card-b); border-radius: 16px; padding: 10px 6px 12px; text-align: center; }
.pillar.day { border-color: rgba(255,178,77,.65); background: rgba(255,178,77,.08); box-shadow: 0 0 24px rgba(255,178,77,.12); }
.pillar.unknown { opacity: .55; border-style: dashed; }
.pillar-label { font-size: .75rem; color: var(--muted); letter-spacing: .08em; margin-bottom: 6px; }
.pillar.day .pillar-label { color: var(--gold-2); }
.glyph { --c: var(--ink); margin: 4px auto; width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; font-family: var(--serif); font-weight: 900; font-size: 1.9rem; line-height: 1; color: #10131c; background: var(--c); }
.glyph-ko { font-size: .78rem; color: var(--body); margin-top: 2px; }
.glyph-ko small { color: var(--dim); font-size: .7rem; margin-left: 2px; }
.pillar-q { display: grid; place-items: center; height: 118px; color: var(--dim); font-size: 1.4rem; }
.daymaster .type-seal { background: var(--seal); }
.el-bars { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.el-row { display: grid; grid-template-columns: 76px 1fr 30px; gap: 10px; align-items: center; font-size: .92rem; }
.el-row .el-name { color: var(--body); }
.el-row .el-name b { font-family: var(--serif); margin-right: 4px; color: var(--c); }
.el-track { height: 12px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.el-track i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: var(--c); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.el-row .el-count { text-align: right; color: var(--gold-2); font-family: var(--serif); }
.el-row.lack .el-name::after { content: ' 없음'; color: var(--warn); font-size: .75rem; }
.el-texts { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.el-texts p { margin: 0; padding: 10px 14px; border-left: 3px solid var(--gold); background: var(--card); border-radius: 0 12px 12px 0; color: var(--body); font-size: .92rem; }
.gods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.god { background: var(--card); border: 1px solid var(--card-b); border-radius: 14px; padding: 12px 14px; }
.god.top { border-color: rgba(255,178,77,.55); background: rgba(255,178,77,.07); }
.god b { display: flex; justify-content: space-between; font-family: var(--serif); }
.god b span { color: var(--gold-2); }
.god small { color: var(--muted); font-size: .8rem; line-height: 1.4; display: block; margin-top: 2px; }

/* 손금 결과 */
.palm-legend { display: flex; gap: 6px 12px; flex-wrap: wrap; margin-top: 8px; font-size: .78rem; color: var(--muted); }
.palm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.palm-legend i { display: inline-block; width: 16px; height: 4px; border-radius: 2px; background: var(--c); }
.hand-fingers { margin: 0; color: var(--body); font-size: .9rem; padding: 10px 14px; border-left: 3px solid var(--gold); background: rgba(0,0,0,.16); border-radius: 0 12px 12px 0; }
.p-badge.faint { color: var(--dim); }

/* 종합 결과 */
.combo-hero { text-align: center; padding: 28px 18px; margin-top: 10px; border-radius: 24px; border: 1px solid transparent;
  background: radial-gradient(520px 240px at 50% 0%, rgba(138,107,255,.20), rgba(79,195,255,.09) 55%, transparent 80%) padding-box, linear-gradient(#07080d, #07080d) padding-box, var(--iri) border-box;
  box-shadow: 0 0 60px rgba(138,107,255,.16); }
.combo-hero-label { color: var(--muted); letter-spacing: .16em; font-size: .85rem; }
.combo-score { font-family: var(--serif); color: var(--ink); line-height: 1.1; margin: 6px 0 2px; text-shadow: 0 0 28px rgba(138,107,255,.75), 0 0 64px rgba(79,195,255,.35); }
.combo-score b { font-size: clamp(3.4rem, 16vw, 5rem); font-weight: 900; }
.combo-score span { font-size: 1.2rem; margin-left: 4px; }
.combo-grade { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); }
.combo-sources { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.combo-sources span { font-size: .8rem; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--card-b); color: var(--muted); }
.combo-sources span.on { color: var(--gold-2); border-color: rgba(255,178,77,.5); background: rgba(255,178,77,.1); }
.combo-elems { display: flex; align-items: stretch; justify-content: center; gap: 10px; flex-wrap: wrap; }
.elem-chip { flex: 1 1 100px; max-width: 170px; text-align: center; background: var(--card); border: 1px solid var(--card-b); border-radius: 16px; padding: 12px 8px; }
.elem-chip .glyph { width: 48px; height: 48px; font-size: 1.6rem; }
.elem-chip b { display: block; font-size: .78rem; color: var(--muted); font-weight: 400; margin-bottom: 4px; letter-spacing: .06em; }
.elem-chip span { font-size: .88rem; color: var(--ink); }
.combo-rels { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.rel { padding: 9px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--card-b); font-size: .9rem; color: var(--body); }
.rel b { color: var(--gold-2); font-weight: 500; }
.rel.gen { border-color: rgba(111,211,154,.45); }
.rel.ctrl { border-color: rgba(255,143,107,.4); }
.combo-fortunes { display: flex; flex-direction: column; gap: 12px; }
.cf { background: var(--card); border: 1px solid var(--card-b); border-radius: 16px; padding: 14px 16px; }
.cf-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cf-head b { font-size: 1.02rem; }
.cf-tag { font-size: .72rem; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--card-b); color: var(--muted); }
.cf-tag.agree { color: var(--ok); border-color: rgba(111,211,154,.45); }
.cf-tag.diff { color: var(--warn); border-color: rgba(255,143,107,.45); }
.cf-score { margin-left: auto; font-family: var(--serif); font-size: 1.6rem; color: var(--gold-2); }
.cf-srcs { display: flex; gap: 8px 14px; flex-wrap: wrap; margin-top: 10px; font-size: .8rem; color: var(--muted); }
.cf-srcs span b { color: var(--ink); font-family: var(--serif); margin-left: 3px; font-weight: 700; }
.cf-srcs span.hi b { color: var(--gold-2); }
.detail-links { display: flex; gap: 10px; flex-wrap: wrap; }
.detail-links button { flex: 1 1 140px; }
.detail-links button:disabled { opacity: .4; }

/* 카메라: 무엇을 찍는지 표시, 손바닥용 안내 틀 */
.cam-kind { position: absolute; left: 12px; top: 12px; z-index: 3; font-size: .78rem; padding: 3px 12px; border-radius: 999px; background: rgba(5,6,10,.75); border: 1px solid var(--card-b); color: var(--gold-2); pointer-events: none; }
@media (max-width: 820px) { .cam-kind { top: calc(76px + var(--safe-t)); left: 12px; } }
@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) { .cam-kind { top: calc(52px + var(--safe-t)); } }
.cam.palm .oval { border-radius: 22%; border-color: rgba(255,178,77,.35); }

@media (max-width: 420px) {
  .pillars { gap: 6px; }
  .glyph { width: 46px; height: 46px; font-size: 1.6rem; }
  .step { padding: 14px; gap: 12px; }
}


/* 첫 화면(허브) 보조 요소 */
.hub .engine-status { text-align: center; margin: 22px 0 10px; }
.hub .http-note { text-align: center; }
.hub .mobile-card { margin-top: 22px; }
.hub .features { margin-top: 26px; }
@media (max-width: 820px) { .hub .features { display: none; } }

/* 운세 그래프 (레이더 · 흐름선 · 오행 구성도 · 3D 구성도) */
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.chart-card { background: linear-gradient(180deg, rgba(244,241,234,.05), rgba(244,241,234,.012)); border: 1px solid var(--card-b); border-radius: 20px; padding: 16px 14px 14px; min-width: 0; }
.chart-card.wide { max-width: 640px; margin: 0 auto; }
.chart-card h4 { margin: 0 0 6px 6px; font-family: var(--serif); font-size: .98rem; color: var(--ink); letter-spacing: .03em; }
canvas.chart { display: block; width: 100%; }
canvas.chart.radar { aspect-ratio: 1 / 1; }
canvas.chart.elmap { aspect-ratio: 1 / 1; }
canvas.chart.flow { aspect-ratio: 4 / 3; }
canvas.chart.orrery { aspect-ratio: 1 / 1.02; cursor: grab; touch-action: pan-y; border-radius: 14px; background: radial-gradient(60% 55% at 55% 45%, rgba(255,178,77,.10), transparent 70%); }
canvas.chart.orrery.grab { cursor: grabbing; }
canvas.chart.orrery:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin: 8px 0 0; font-size: .82rem; color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.chart-hint { margin: 8px 6px 0; font-size: .8rem; color: var(--dim); line-height: 1.55; }

/* 손금 촬영: 손 모양 안내선 (엄지 방향은 선택한 손과 미리보기 반전에 맞춰 뒤집힘) */
.hand-guide { position: absolute; z-index: 2; pointer-events: none; overflow: visible; }
.hand-guide.flip { transform: scaleX(-1); }
.hand-guide path { fill: rgba(255,178,77,.07); stroke: rgba(255,208,138,.9); stroke-width: 2.4; stroke-dasharray: 7 5; stroke-linejoin: round; transition: stroke .2s, fill .2s; }
.hand-guide path.crease { fill: none; stroke-width: 1.6; stroke-dasharray: 3 6; stroke: rgba(255,208,138,.5); }
.cam.ok .hand-guide path { stroke: var(--ok); fill: rgba(111,211,154,.08); }
.cam.ok .hand-guide path.crease { stroke: rgba(111,211,154,.5); fill: none; }
.hand-why, .face-why { position: absolute; left: 12px; right: 12px; z-index: 4; padding: 8px 12px 10px; border-radius: 14px; background: rgba(5,6,10,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,178,77,.4); }
.face-why .hw-text { min-height: calc(3 * 1.5em); }
.hand-why.compact .hw-text, .face-why.compact .hw-text { display: none; }
.hand-why.compact, .face-why.compact { padding: 6px 12px; }
.hand-why.tight { left: auto; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }   /* 자리가 아주 좁으면 설명은 빼고 버튼만 남긴다 */
.hand-why.tight .hw-badge, .hand-why.tight .hw-text { display: none; }
.face-why.tight { display: none; }
.fw-right { display: inline-flex; align-items: center; gap: 8px; }
.fw-skip { min-height: 26px; padding: 0 10px; font-size: .72rem; border-radius: 999px; background: transparent; border: 1px solid var(--card-b); color: var(--muted); }
.fw-dots { color: var(--gold-2); font-size: .72rem; letter-spacing: 3px; white-space: nowrap; }
.hw-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hw-badge { color: var(--gold-2); font-size: .88rem; }
.hw-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.hw-text { margin: 4px 0 0; color: var(--body); font-size: .8rem; line-height: 1.5; }
.hand-pick, .hand-mode { min-height: 32px; padding: 2px 12px; font-size: .8rem; border-radius: 999px; background: rgba(255,178,77,.1); border: 1px solid rgba(255,178,77,.5); color: var(--gold-2); }
.hand-pick small, .hand-mode small { color: var(--muted); font-size: .7rem; margin-left: 4px; }

/* 손금 풀이: 두드러진 특징 · 손 모양 단계 */
.standout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.standout-item { background: linear-gradient(180deg, rgba(255,178,77,.10), rgba(255,178,77,.03)); border: 1px solid rgba(255,178,77,.28); border-radius: 16px; padding: 14px 16px; }
.standout-item .so-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.standout-item .so-head b { font-family: var(--serif); color: var(--gold-2); font-size: 1rem; }
.standout-item .so-head span { font-size: .72rem; color: var(--dim); border: 1px solid var(--card-b); border-radius: 999px; padding: 1px 9px; }
.standout-item p { margin: 0; font-size: .9rem; color: var(--body); line-height: 1.6; }
.traits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.trait { background: var(--card); border: 1px solid var(--card-b); border-radius: 14px; padding: 12px 14px; }
.trait-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.trait-head b { font-size: .95rem; }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(244,241,234,.35); }
.dots i.on { background: var(--iri); border-color: transparent; box-shadow: 0 0 8px rgba(138,107,255,.6); }
.trait p { margin: 0; font-size: .86rem; color: var(--muted); line-height: 1.55; }
.part .metrics { margin: 6px 0 0; font-size: .78rem; color: var(--dim); }

/* 왼손 · 오른손 */
.palm-side { margin: -4px 0 10px; color: var(--muted); font-size: .92rem; }
.palm-side b { color: var(--gold-2); font-family: var(--serif); font-size: 1.05rem; }
.palm-side small { color: var(--dim); }
.palm-tabs { display: flex; gap: 8px; margin: 0 0 14px; }
.palm-tabs button { flex: 1; min-height: 42px; padding: 8px 10px; font-size: .88rem; background: rgba(244,241,234,.04); border: 1px solid rgba(244,241,234,.16); border-radius: 12px; color: var(--muted); }
.palm-tabs button.on { color: var(--ink); border-color: rgba(255,178,77,.6); background: rgba(255,178,77,.12); }
.compare .note { margin: 0; }
.cmp-legend { display: flex; gap: 16px; justify-content: center; margin: 0 0 10px; font-size: .82rem; color: var(--muted); }
.cmp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cmp-legend i, .cmp-track i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.cmp-legend i.l, .cmp-track i.l { background: #4fc3ff; }
.cmp-legend i.r, .cmp-track i.r { background: #ffb24d; }
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.cmp-sub { margin: 18px 4px 8px; font-family: var(--serif); font-size: .98rem; }
.cmp { background: var(--card); border: 1px solid var(--card-b); border-radius: 14px; padding: 12px 14px; }
.cmp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: .9rem; }
.cmp-head span { color: var(--muted); font-size: .82rem; }
.cmp-head .up { color: #6fd39a; font-weight: 700; } .cmp-head .down { color: #ff9a9a; font-weight: 700; }
.cmp-track { position: relative; height: 12px; margin: 0 6px 8px; border-radius: 6px; background: rgba(244,241,234,.07); }
.cmp-track i { position: absolute; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 8px currentColor; z-index: 2; }
.cmp-track em { position: absolute; top: 4px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #4fc3ff, #ffb24d); opacity: .75; }
.cmp p { margin: 0; font-size: .84rem; color: var(--muted); line-height: 1.55; }
.cmp-sum { margin: 12px 4px 0; font-size: .92rem; color: var(--body); line-height: 1.65; }

/* 오늘의 운세 · 올해·월별 · 별자리 */
.hub-extra { max-width: 640px; margin: 28px auto 0; text-align: center; }
.hub-extra-title { margin: 0 0 12px; font-family: var(--serif); font-size: 1.05rem; letter-spacing: .06em; color: var(--ink); }
.xtiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.xtile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px 12px; min-height: 92px; border-radius: 18px; background: linear-gradient(180deg, rgba(244,241,234,.05), rgba(244,241,234,.012)); border: 1px solid var(--card-b); color: var(--ink); }
.xtile b { font-family: var(--serif); font-weight: 900; font-size: 1.7rem; line-height: 1; color: var(--gold-2); text-shadow: 0 0 16px rgba(255,178,77,.7); }
.xtile span { font-size: .84rem; color: var(--muted); }
.xtile.off b { color: var(--dim); text-shadow: none; }
.hub-extra-hint { margin: 10px 0 0; font-size: .82rem; color: var(--dim); }
.extra-pane { min-height: 200px; }
.day-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 12px; }
.day-nav > div { text-align: center; line-height: 1.35; }
.day-nav small { display: block; color: var(--dim); font-size: .8rem; }
.day-nav a { color: var(--gold-2); }
.day-nav button { min-height: 44px; width: 44px; padding: 0; border-radius: 50%; background: rgba(244,241,234,.05); border: 1px solid var(--card-b); color: var(--ink); }
.fortunes.one { grid-template-columns: 1fr; align-content: start; }
.lucky { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.lucky div { background: var(--card); border: 1px solid var(--card-b); border-radius: 14px; padding: 12px 14px; }
.lucky small { display: block; color: var(--dim); font-size: .76rem; margin-bottom: 2px; }
.lucky b { font-size: .95rem; font-family: var(--serif); }
.astro-card { background: var(--card); border: 1px solid var(--card-b); border-radius: 18px; padding: 16px 18px; }
.astro-card p { margin: 8px 0 0; font-size: .92rem; color: var(--body); line-height: 1.65; }
.astro-head { display: flex; align-items: center; gap: 12px; }
.astro-head .sym { font-size: 2.2rem; line-height: 1; color: var(--gold-2); }
.astro-head b { font-family: var(--serif); }
.astro-head small { display: block; color: var(--dim); font-size: .78rem; }
.astro-moon { margin-left: auto; text-align: right; }
.zodiac-sym { font-size: 3.6rem; line-height: 1; color: var(--ink); text-shadow: 0 0 28px rgba(138,107,255,.75), 0 0 64px rgba(79,195,255,.35); }
.zodiac-hero .combo-score { margin: 4px 0; }
.compat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.compat div { background: var(--card); border: 1px solid var(--card-b); border-radius: 14px; padding: 12px 14px; }
.compat small { display: block; color: var(--dim); font-size: .76rem; margin-bottom: 2px; }
.compat b { font-family: var(--serif); font-size: .98rem; }
canvas.chart.monthly { aspect-ratio: 16 / 10; }
.month-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 12px 0; }
.month-grid button { min-height: 56px; padding: 6px 2px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; background: var(--card); border: 1px solid var(--card-b); color: var(--ink); }
.month-grid small { font-size: .72rem; color: var(--dim); }
.month-grid b { font-family: var(--serif); font-size: 1.05rem; }
.month-grid .lv-top { background: rgba(255,178,77,.2); border-color: rgba(255,178,77,.55); }
.month-grid .lv-good { background: rgba(255,178,77,.1); }
.month-grid .lv-low { background: rgba(255,120,120,.1); border-color: rgba(255,120,120,.3); }
.month-grid .cur small { color: var(--gold-2); font-weight: 700; }
.month-grid .sel { outline: 2px solid var(--gold-2); outline-offset: 1px; }
.month-detail { margin-bottom: 4px; }
.month-detail p:first-child { margin-top: 0; }

/* 2단계: 궁합 · 동물상 · 바이오리듬 */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.extra-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-left: calc(var(--gutter, 16px) * -1); margin-right: calc(var(--gutter, 16px) * -1); padding: 0 var(--gutter, 16px); }
.extra-tabs::-webkit-scrollbar { display: none; }
.extra-tabs button { flex: 0 0 auto; padding: 8px 16px; }
.f-sub { margin-left: 6px; color: var(--dim); font-size: .74rem; }
canvas.chart.bio { aspect-ratio: 16 / 10; }
.bio-list { display: grid; gap: 10px; }
.bio-row { background: var(--card); border: 1px solid var(--card-b); border-radius: 14px; padding: 12px 14px; }
.bio-head { display: flex; align-items: baseline; gap: 8px; }
.bio-head small { color: var(--dim); font-size: .76rem; }
.bio-val { margin-left: auto; font-family: var(--serif); font-size: 1.1rem; color: var(--ink); }
.bio-head em { font-style: normal; font-size: .74rem; color: var(--gold-2); border: 1px solid rgba(255,178,77,.4); border-radius: 999px; padding: 0 8px; }
.bio-track { position: relative; height: 8px; margin: 10px 4px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,106,106,.25), rgba(244,241,234,.08) 50%, rgba(111,211,154,.25)); }
.bio-track i { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 10px currentColor; border: 2px solid #fff; }
.bio-row p { margin: 0; font-size: .86rem; color: var(--muted); line-height: 1.55; }
.bio-next { display: grid; gap: 8px; }
.bio-next div { display: flex; flex-wrap: wrap; gap: 4px 14px; background: var(--card); border: 1px solid var(--card-b); border-radius: 12px; padding: 10px 14px; font-size: .84rem; color: var(--body); }
.bio-next b { min-width: 3em; }
.animal-photo { display: block; width: 96px; height: 96px; margin: 0 auto 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); box-shadow: 0 0 30px rgba(138,107,255,.5); object-fit: cover; background: #111; }
.pm-form { display: grid; gap: 14px; margin-top: 14px; }
.pm-field { display: grid; gap: 6px; font-size: .88rem; color: var(--muted); }
.pm-field input { min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--card-b); background: var(--card); color: var(--ink); font: inherit; }
.pm-actions { text-align: center; margin: 18px 0 4px; }

/* 3단계: 타로 · MBTI */
.xtile span { font-size: .74rem; line-height: 1.3; text-align: center; }
.xtile { padding: 12px 4px 10px; }
.seg.three { grid-template-columns: repeat(3, 1fr); margin: 12px 0 0; }
.seg.three span { flex-direction: column; min-height: 58px; font-size: .84rem; text-align: center; line-height: 1.25; padding: 6px 4px; }
.seg.three small { color: inherit; opacity: .7; font-size: .72rem; }
.tslots { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 18px 0 8px; }
.tslot { width: min(30%, 118px); text-align: center; }
.tslots.n1 .tslot { width: min(46%, 170px); }
.tcard { display: block; width: 100%; aspect-ratio: 3 / 5; padding: 0; border: 0; background: none; perspective: 800px; cursor: pointer; border-radius: 12px; }
.tinner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.tcard.flipped .tinner { transform: rotateY(180deg); }
.tface { position: absolute; inset: 0; border-radius: 12px; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: grid; place-items: center; overflow: hidden; }
.tface.back { background: radial-gradient(circle at 50% 40%, rgba(255,178,77,.25), transparent 60%), linear-gradient(145deg, #1a1633, #0a0b12 60%, #20143a); border: 1px solid rgba(255,178,77,.55); box-shadow: 0 0 22px rgba(138,107,255,.25); }
.tface.back span { font-family: var(--serif); font-weight: 900; font-size: 2.2rem; color: var(--gold-2); text-shadow: 0 0 18px rgba(255,178,77,.8); }
.tface.back::after { content: ''; position: absolute; inset: 6px; border-radius: 8px; border: 1px solid rgba(255,208,138,.3); }
.tface.front { transform: rotateY(180deg); background: linear-gradient(180deg, #14131f, #0a0b12); border: 1px solid rgba(255,255,255,.65); box-shadow: 0 0 26px rgba(138,107,255,.45); }
.tc { display: grid; gap: 4px; justify-items: center; align-content: center; width: 100%; height: 100%; padding: 6px 2px; }
.tc.rev { transform: rotate(180deg); }
.tc small { font-family: var(--serif); color: var(--gold-2); font-size: .72rem; letter-spacing: .08em; }
.tc b { font-size: 2.3rem; line-height: 1; }
.tc span { font-family: var(--serif); font-size: .82rem; color: var(--ink); line-height: 1.2; }
.tpos { display: block; margin-top: 6px; font-style: normal; font-size: .78rem; color: var(--muted); }
.tbtns { text-align: center; margin: 4px 0 12px; }
.tr-item { margin-top: 10px; }
.tr-item .astro-head .f-score { margin-left: auto; }
.tr-adv { color: var(--gold-2) !important; font-size: .86rem !important; }
@media (prefers-reduced-motion: reduce) { .tinner { transition: none; } }
.mb-start { display: grid; gap: 10px; margin-top: 12px; }
.mb-prog { height: 6px; border-radius: 3px; background: rgba(244,241,234,.1); margin-top: 6px; overflow: hidden; }
.mb-prog i { display: block; height: 100%; background: var(--iri); transition: width .3s ease; }
.mb-count { margin: 8px 0 0; color: var(--dim); font-size: .82rem; text-align: right; }
.mb-q { margin: 6px 0 14px; font-family: var(--serif); font-size: 1.05rem; color: var(--muted); font-weight: 500; }
.mb-opt { display: block; width: 100%; text-align: left; margin: 0 0 12px; padding: 18px 18px; border-radius: 18px; border: 1px solid var(--card-b); background: linear-gradient(180deg, rgba(244,241,234,.06), rgba(244,241,234,.02)); color: var(--ink); font-size: 1rem; line-height: 1.5; min-height: 72px; }
.mb-opt:active { background: rgba(255,178,77,.14); border-color: rgba(255,178,77,.6); }
.mb-code { display: flex; justify-content: center; gap: 8px; margin: 8px 0 4px; }
.mb-code b { font-family: var(--serif); font-size: 2.8rem; font-weight: 900; line-height: 1; color: var(--ink); text-shadow: 0 0 24px rgba(138,107,255,.8); width: 1.15em; }
.mb-axes { display: grid; gap: 12px; }
.mb-ax .mb-labels { display: flex; justify-content: space-between; font-size: .84rem; color: var(--dim); margin-bottom: 4px; }
.mb-ax .mb-labels .on { color: var(--gold-2); font-weight: 700; }
.mb-ax .mb-labels b { font-family: var(--serif); }
.mb-track { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(244,241,234,.07); }
.mb-track i { background: linear-gradient(90deg, #8a6bff, #4fc3ff); }
.mb-track u { background: linear-gradient(90deg, #ff6ad5, #ffb24d); text-decoration: none; }

/* 통합 리포트 · 다양한 시각화 */
canvas.chart.rings { width: min(100%, 230px); aspect-ratio: 1 / 1; margin: 6px auto 4px; }
canvas.chart.cols { aspect-ratio: 16 / 10; }
canvas.chart.cols.tall { aspect-ratio: 16 / 9; }
canvas.chart.wheel { aspect-ratio: 1 / 1; max-width: 360px; margin: 0 auto; }
canvas.chart.donut { aspect-ratio: 1 / 1; max-width: 260px; margin: 0 auto; }
.rp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: .84rem; color: var(--muted); margin: 4px 0 10px; }
.rp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rp-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.rp-legend b { color: var(--ink); font-family: var(--serif); }
.rp-profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.rp-tile { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, transparent), rgba(244,241,234,.02)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); min-width: 0; }
.rp-glyph { flex: 0 0 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-family: var(--serif); font-weight: 900; font-size: 1.5rem; color: var(--ink); background: color-mix(in srgb, var(--c) 28%, #05060a); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 40%, transparent); }
.rp-glyph.small { font-size: .85rem; letter-spacing: -.02em; }
.rp-tile b { display: block; font-size: .9rem; line-height: 1.3; }
.rp-tile small { display: block; color: var(--dim); font-size: .74rem; line-height: 1.35; margin-top: 2px; }
.rp-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.rp-add { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; min-height: 64px; border-radius: 16px; background: rgba(244,241,234,.04); border: 1px dashed rgba(255,178,77,.45); color: var(--ink); }
.rp-add b { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-2); width: 1.6em; text-align: center; }
.rp-add strong { display: block; font-size: .92rem; }
.rp-add small { display: block; color: var(--dim); font-size: .76rem; line-height: 1.35; }
.rp-actions { display: grid; gap: 10px; }
.rp-act { display: flex; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-b); }
.rp-act .ic { font-size: 1.5rem; line-height: 1.2; }
.rp-act b { font-size: .95rem; }
.rp-act p { margin: 2px 0 0; font-size: .86rem; color: var(--muted); line-height: 1.55; }
.combo-sources span:not(.on) { opacity: .5; }

canvas.chart.heat { aspect-ratio: 16 / 9; }

.tr-deck { margin: 12px 0 0; }
.tr-deck span { min-height: 44px; font-size: .88rem; }
.tc span { word-break: keep-all; }