/* OSAJU — 디자인 토큰: 먹빛 밤하늘 #0F0E17 · 금니 #C9A66B · 한지 #F5F0E6 */
html, body { margin:0; padding:0; background:#0F0E17; overflow-x:hidden; max-width:100%; }
* { box-sizing:border-box; }
body { color:#F5F0E6; font-family:'Noto Sans KR', sans-serif; }
::selection { background:rgba(201,166,107,0.35); color:#F5F0E6; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:#0F0E17; }
::-webkit-scrollbar-thumb { background:#2A2837; border-radius:6px; border:2px solid #0F0E17; }
input, select, button { font-family:'Noto Sans KR', sans-serif; }
input:focus { outline:none; border-color:#C9A66B !important; }
.serif { font-family:'Noto Serif KR', serif; }

@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes drift1 { 0% { transform:translate(0,0) scale(1); } 50% { transform:translate(60px,-40px) scale(1.15); } 100% { transform:translate(0,0) scale(1); } }
@keyframes drift2 { 0% { transform:translate(0,0) scale(1); } 50% { transform:translate(-70px,50px) scale(1.1); } 100% { transform:translate(0,0) scale(1); } }
@keyframes drift3 { 0% { transform:translate(0,0) scale(1); } 50% { transform:translate(40px,60px) scale(0.92); } 100% { transform:translate(0,0) scale(1); } }
@keyframes breathe { 0%,100% { opacity:0.45; } 50% { opacity:1; } }
@keyframes sunPulse { 0%,100% { opacity:0.7; } 50% { opacity:1; } }
@keyframes ballPop { from { opacity:0; transform:scale(0.3); } to { opacity:1; transform:scale(1); } }
@keyframes inkSpread { from { opacity:0; transform:scale(0.6); filter:blur(14px); } to { opacity:1; transform:scale(1); filter:blur(0); } }

/* ---- 공통 컴포넌트 ---- */
.btn-primary { background:#C9A66B; color:#16151F; border:none; border-radius:12px; padding:15px 28px; font-size:16px; font-weight:700; cursor:pointer; letter-spacing:0.5px; transition:all 0.25s; }
.btn-primary:hover { background:#D8B87E; transform:translateY(-2px); box-shadow:0 10px 30px rgba(201,166,107,0.25); }
.btn-ghost { background:none; color:#EDE4D3; border:1px solid rgba(237,228,211,0.25); border-radius:10px; padding:15px 26px; font-size:15px; cursor:pointer; transition:all 0.25s; }
.btn-ghost:hover { border-color:#C9A66B; color:#C9A66B; }
.btn-pill { background:none; border:1px solid rgba(201,166,107,0.45); color:#C9A66B; border-radius:999px; padding:8px 18px; font-size:13.5px; font-weight:700; cursor:pointer; transition:all 0.2s; }
.btn-pill:hover { background:rgba(201,166,107,0.12); }
.btn-link { background:none; border:none; color:rgba(237,228,211,0.4); font-size:13px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.btn-link:hover { color:#C9A66B; }
.input { width:100%; background:rgba(245,240,230,0.04); border:1px solid rgba(237,228,211,0.15); border-radius:10px; padding:13px 14px; color:#F5F0E6; font-size:15px; transition:border-color 0.2s; }
.input-sm { background:rgba(245,240,230,0.04); border:1px solid rgba(237,228,211,0.15); border-radius:10px; padding:13px 12px; color:#F5F0E6; font-size:15px; text-align:center; transition:border-color 0.2s; }
/* 네이티브 select — iOS에선 휠 피커로 열림 */
.sel { -webkit-appearance:none; appearance:none; background:rgba(245,240,230,0.04); border:1px solid rgba(237,228,211,0.15); border-radius:10px; padding:13px 8px; color:#F5F0E6; font-size:15px; text-align:center; text-align-last:center; transition:border-color 0.2s, opacity 0.25s; cursor:pointer; min-width:0; }
.sel:focus { outline:none; border-color:#C9A66B; }
.sel:disabled { opacity:0.32; cursor:default; }
.sel option { background:#1C1B28; color:#F5F0E6; }
.dim-row { transition:opacity 0.25s; }
.dim-row.dim { opacity:0.32; pointer-events:none; }
.chk { display:flex; align-items:center; gap:7px; font-size:13px; color:rgba(237,228,211,0.65); cursor:pointer; white-space:nowrap; user-select:none; }
.chk input { width:17px; height:17px; accent-color:#C9A66B; cursor:pointer; }

/* ---- 탭 가능한 값 표시 필드 (날짜/시각) ---- */
.field-btn { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; background:rgba(245,240,230,0.04); border:1px solid rgba(237,228,211,0.15); border-radius:12px; padding:14px 16px; color:#F5F0E6; font-size:16px; cursor:pointer; transition:border-color 0.2s, background 0.2s; text-align:left; }
.field-btn:hover, .field-btn:focus { border-color:#C9A66B; outline:none; }
.field-btn .fv { font-family:'Noto Serif KR', serif; }
.field-btn .fx { color:rgba(201,166,107,0.7); font-size:13px; }
.field-btn.dim { opacity:0.4; pointer-events:none; }

/* ---- iOS 스타일 휠 피커 (바텀시트) ---- */
.dp-overlay { position:fixed; inset:0; z-index:78; background:rgba(10,9,16,0.62); backdrop-filter:blur(3px); display:flex; align-items:flex-end; justify-content:center; animation:fadeIn 0.25s ease both; }
.dp-sheet { width:min(460px, 100vw); background:linear-gradient(180deg,#1C1B28,#16151F); border-top-left-radius:24px; border-top-right-radius:24px; border-top:1px solid rgba(201,166,107,0.3); box-shadow:0 -20px 60px rgba(0,0,0,0.5); padding:10px 18px 26px; animation:sheetUp 0.36s cubic-bezier(0.2,0.9,0.25,1) both; }
@keyframes sheetUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
.dp-grip { width:38px; height:4px; border-radius:2px; background:rgba(237,228,211,0.25); margin:6px auto 4px; }
.dp-head { display:flex; align-items:center; justify-content:space-between; padding:8px 2px 6px; }
.dp-head .t { font-family:'Noto Serif KR',serif; font-size:16px; color:#F5F0E6; }
.dp-head button { background:none; border:none; cursor:pointer; font-size:15px; padding:6px 4px; }
.dp-cancel { color:rgba(237,228,211,0.5); }
.dp-done { color:#C9A66B; font-weight:700; }
.dp-wheels { position:relative; display:flex; gap:4px; height:200px; margin:6px 0 2px; -webkit-mask-image:linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent); mask-image:linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent); }
.dp-center { position:absolute; left:0; right:0; top:80px; height:40px; border-top:1px solid rgba(201,166,107,0.4); border-bottom:1px solid rgba(201,166,107,0.4); background:rgba(201,166,107,0.06); border-radius:8px; pointer-events:none; z-index:0; }
.dp-col { flex:1; overflow-y:scroll; scroll-snap-type:y mandatory; scrollbar-width:none; -ms-overflow-style:none; text-align:center; position:relative; z-index:1; -webkit-overflow-scrolling:touch; }
.dp-col::-webkit-scrollbar { display:none; width:0; height:0; }
.dp-col .dp-pad { height:80px; }
.dp-item { height:40px; line-height:40px; scroll-snap-align:center; font-family:'Noto Serif KR',serif; font-size:20px; color:rgba(237,228,211,0.38); transition:color 0.15s ease, transform 0.15s ease; will-change:transform; }
.dp-item.sel { color:#F5F0E6; }
.dp-item.near { color:rgba(237,228,211,0.6); }
.seg { padding:12px 14px; border-radius:10px; font-size:14px; cursor:pointer; transition:all 0.2s; background:rgba(245,240,230,0.03); border:1px solid rgba(237,228,211,0.15); color:rgba(237,228,211,0.6); }
.seg:hover { border-color:#C9A66B; }
.seg.on { background:rgba(201,166,107,0.14); border-color:#C9A66B; color:#C9A66B; font-weight:700; }
.card { border:1px solid rgba(201,166,107,0.18); border-radius:16px; background:rgba(22,21,31,0.7); padding:28px; }
.panel { border:1px solid rgba(201,166,107,0.2); border-radius:18px; background:rgba(22,21,31,0.85); box-shadow:0 20px 60px rgba(0,0,0,0.35); }
.vp-card { border:1px solid rgba(201,166,107,0.16); border-radius:14px; padding:26px 24px; background:rgba(245,240,230,0.025); transition:all 0.3s; }
.vp-card:hover { border-color:rgba(201,166,107,0.45); transform:translateY(-3px); background:rgba(245,240,230,0.04); }

/* ---- 홈: '무엇을 볼 수 있나' 피처 카드 갤러리 ---- */
@keyframes cardRise { 0% { opacity:0; transform:translateY(30px) scale(0.955); filter:blur(6px); } 60% { filter:blur(0); } 100% { opacity:1; transform:translateY(0) scale(1); } }
@keyframes sheen { 0% { transform:translateX(-140%) skewX(-18deg); } 100% { transform:translateX(260%) skewX(-18deg); } }
@keyframes dotPulse { 0%,100% { opacity:0.55; } 50% { opacity:1; } }
.feat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(272px, 1fr)); gap:16px; }
.feat-card { position:relative; border:1px solid rgba(201,166,107,0.16); border-radius:16px; padding:24px 22px 20px; background:rgba(245,240,230,0.022); overflow:hidden; cursor:pointer; opacity:0; animation:cardRise 0.72s cubic-bezier(0.2,0.8,0.2,1) both; transition:transform 0.35s cubic-bezier(0.2,0.8,0.2,1), border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; }
.feat-card:hover { transform:translateY(-6px); border-color:rgba(201,166,107,0.5); background:rgba(245,240,230,0.05); box-shadow:0 20px 46px rgba(0,0,0,0.42); }
.feat-card::before { content:''; position:absolute; inset:0; background:radial-gradient(360px 150px at 82% -18%, rgba(201,166,107,0.12), transparent 70%); opacity:0; transition:opacity 0.4s ease; pointer-events:none; }
.feat-card:hover::before { opacity:1; }
.feat-card .sheen { position:absolute; top:0; bottom:0; left:0; width:36%; background:linear-gradient(90deg, transparent, rgba(245,240,230,0.08), transparent); pointer-events:none; opacity:0; }
.feat-card:hover .sheen { opacity:1; animation:sheen 0.9s ease; }
.feat-top { display:flex; align-items:center; justify-content:space-between; }
.feat-hanja { font-family:'Noto Serif KR', serif; font-size:30px; color:#C9A66B; line-height:1; transition:transform 0.35s ease, text-shadow 0.35s ease; }
.feat-card:hover .feat-hanja { transform:scale(1.1); text-shadow:0 0 22px rgba(201,166,107,0.55); }
.feat-arrow { color:rgba(201,166,107,0.45); font-size:17px; transition:transform 0.3s ease, color 0.3s ease; }
.feat-card:hover .feat-arrow { transform:translateX(5px); color:#C9A66B; }
.feat-en { font-size:11px; letter-spacing:1.5px; color:rgba(201,166,107,0.7); margin-top:16px; }
.feat-title { font-family:'Noto Serif KR', serif; font-weight:600; font-size:18px; color:#F5F0E6; margin-top:4px; }
.feat-desc { font-size:13px; line-height:1.65; color:rgba(237,228,211,0.55); margin-top:9px; text-wrap:pretty; }
.feat-preview { margin-top:16px; min-height:34px; display:flex; align-items:center; }
.el-dot { width:14px; height:14px; border-radius:50%; }
.mini-chip { font-size:11px; padding:3px 10px; border-radius:999px; border:1px solid rgba(201,166,107,0.28); color:rgba(201,166,107,0.85); }
.sig-dot { width:9px; height:9px; border-radius:50%; animation:dotPulse 2.6s ease-in-out infinite; }
.mini-ball { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:#F5F0E6; border:1px solid rgba(245,240,230,0.2); }
/* ---- 상품 카드 (컴팩트 · 3열 고정) ---- */
.prod-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; width:100%; }
.prod-card { position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; border:1px solid rgba(201,166,107,0.18); border-radius:14px; background:rgba(245,240,230,0.022); padding:20px 10px 16px; cursor:pointer; color:#F5F0E6; opacity:0; animation:cardRise 0.6s cubic-bezier(0.2,0.8,0.2,1) both; transition:transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; }
.prod-card:hover { transform:translateY(-4px); border-color:rgba(201,166,107,0.5); background:rgba(245,240,230,0.05); }
.pc-hanja { font-size:34px; color:#C9A66B; line-height:1; text-shadow:0 0 18px rgba(201,166,107,0.3); transition:transform 0.25s ease; }
.prod-card:hover .pc-hanja { transform:scale(1.08); }
.pc-title { font-size:14.5px; font-weight:700; color:#F5F0E6; line-height:1.3; word-break:keep-all; }
.pc-tag { font-size:11px; padding:2px 9px; border-radius:999px; border:1px solid rgba(201,166,107,0.3); color:rgba(201,166,107,0.9); }

.cred-strip { display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center; margin-top:44px; }
.cred-item { display:flex; align-items:center; gap:8px; font-size:12.5px; color:rgba(237,228,211,0.5); }
.cred-item b { color:rgba(201,166,107,0.85); font-family:'Noto Serif KR', serif; font-weight:500; }

/* ---- 홈: 정확도의 원리 상세 설명 ---- */
.prin-section { margin-top:96px; padding-top:56px; border-top:1px solid rgba(201,166,107,0.12); scroll-margin-top:90px; }
.prin-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(360px, 1fr)); gap:18px; margin-top:30px; }
.prin-card { border:1px solid rgba(201,166,107,0.16); border-radius:16px; padding:28px 26px; background:rgba(22,21,31,0.5); transition:border-color 0.3s ease, background 0.3s ease; }
.prin-card:hover { border-color:rgba(201,166,107,0.34); background:rgba(22,21,31,0.72); }
.prin-head { display:flex; align-items:center; gap:14px; }
.prin-hanja { width:48px; height:48px; border-radius:12px; border:1px solid rgba(201,166,107,0.3); background:rgba(201,166,107,0.06); display:flex; align-items:center; justify-content:center; font-family:'Noto Serif KR', serif; font-size:23px; color:#C9A66B; flex-shrink:0; }
.prin-title { font-family:'Noto Serif KR', serif; font-size:18px; font-weight:600; color:#F5F0E6; }
.prin-en { font-size:11px; letter-spacing:1.5px; color:rgba(201,166,107,0.65); margin-top:2px; }
.prin-body { font-size:14px; line-height:1.85; color:rgba(237,228,211,0.62); margin-top:16px; text-wrap:pretty; }
.flow-wrap { display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; margin-top:26px; }
.flow-step { flex:1; min-width:120px; border:1px solid rgba(237,228,211,0.1); border-radius:12px; padding:16px 14px; background:rgba(245,240,230,0.02); text-align:center; }
.flow-step .fn { font-family:'Noto Serif KR', serif; font-size:14px; color:#C9A66B; }
.flow-step .ft { font-size:13px; color:#F5F0E6; font-weight:700; margin-top:6px; }
.flow-step .fd { font-size:11.5px; line-height:1.5; color:rgba(237,228,211,0.45); margin-top:5px; }
.flow-arrow { display:flex; align-items:center; color:rgba(201,166,107,0.4); font-size:15px; }
@media (max-width: 720px) { .flow-arrow { display:none; } .flow-step { min-width:44%; } }

/* ---- 비교표: 다른 사주풀이 vs OSAJU ---- */
.cmp-wrap { overflow-x:auto; margin-top:30px; }
.cmp-table { width:100%; min-width:560px; border-collapse:separate; border-spacing:0; font-size:14px; }
.cmp-table th, .cmp-table td { padding:15px 20px; text-align:left; vertical-align:middle; }
.cmp-table thead th { font-size:12px; letter-spacing:1px; font-weight:400; color:rgba(237,228,211,0.5); border-bottom:1px solid rgba(237,228,211,0.12); }
.cmp-table thead th.c-osaju { color:#C9A66B; font-weight:700; font-family:'Noto Serif KR', serif; font-size:14px; background:rgba(201,166,107,0.06); border:1px solid rgba(201,166,107,0.22); border-bottom:none; border-radius:12px 12px 0 0; }
.cmp-table td.c-label { color:rgba(237,228,211,0.62); font-size:13px; width:22%; }
.cmp-table td.c-other { color:rgba(237,228,211,0.4); }
.cmp-table td.c-osaju { color:#F5F0E6; font-weight:500; background:rgba(201,166,107,0.05); border-left:1px solid rgba(201,166,107,0.22); border-right:1px solid rgba(201,166,107,0.22); }
.cmp-table tbody tr:not(:last-child) td:not(.c-osaju) { border-bottom:1px solid rgba(237,228,211,0.07); }
.cmp-table tbody tr:not(:last-child) td.c-osaju { border-bottom:1px solid rgba(201,166,107,0.12); }
.cmp-table tbody tr:last-child td.c-osaju { border-bottom:1px solid rgba(201,166,107,0.22); border-radius:0 0 12px 12px; }
.cmp-check { color:#C9A66B; margin-right:7px; }
.cmp-x { color:rgba(200,120,110,0.55); margin-right:7px; }

/* ---- 체험 → 회원가입 전환 배너 ---- */
.convert-banner { display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; border:1px solid rgba(201,166,107,0.4); border-radius:16px; background:linear-gradient(118deg, rgba(201,166,107,0.14), rgba(155,42,42,0.05) 90%); padding:20px 24px; margin-bottom:28px; box-shadow:0 10px 30px rgba(0,0,0,0.25); animation:fadeUp 0.5s ease both; }
.cb-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cb-form input { background:rgba(15,14,23,0.55); border:1px solid rgba(237,228,211,0.2); border-radius:10px; padding:12px 13px; color:#F5F0E6; font-size:14px; width:158px; transition:border-color 0.2s; }
.cb-form input:focus { border-color:#C9A66B; }

/* ---- SNS 공유 모달 ---- */
.share-overlay { position:fixed; inset:0; background:rgba(10,9,16,0.7); backdrop-filter:blur(4px); z-index:70; display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn 0.25s ease both; }
.share-panel { width:min(460px, 94vw); max-height:92vh; overflow-y:auto; background:#16151F; border:1px solid rgba(201,166,107,0.3); border-radius:20px; padding:30px 28px; box-shadow:0 30px 80px rgba(0,0,0,0.55); animation:fadeUp 0.35s ease both; }
@media (max-width: 520px) { .share-overlay { align-items:center; padding:10px; } .share-panel { padding:20px 18px; border-radius:16px; max-height:92vh; } }
.share-url { display:flex; gap:8px; margin-top:18px; }
.share-url input { flex:1; min-width:0; background:rgba(245,240,230,0.04); border:1px solid rgba(237,228,211,0.15); border-radius:10px; padding:12px 13px; color:rgba(237,228,211,0.75); font-size:12.5px; }
.share-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:18px; }
.share-btn { display:flex; flex-direction:column; align-items:center; gap:9px; background:rgba(245,240,230,0.03); border:1px solid rgba(237,228,211,0.1); border-radius:14px; padding:16px 6px; cursor:pointer; transition:all 0.2s; color:#EDE4D3; font-size:12.5px; }
.share-btn:hover { border-color:rgba(201,166,107,0.4); background:rgba(245,240,230,0.06); transform:translateY(-2px); }
.share-ic { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; font-family:'Noto Sans KR', sans-serif; }
.share-msg { font-size:12.5px; color:#C9A66B; text-align:center; margin-top:16px; min-height:16px; line-height:1.5; }

/* ---- 분석중: 음양오행 회전 ---- */
.wx-wrap { position:relative; width:240px; height:240px; }
.wx-ring { position:absolute; inset:0; animation:wxSpin 9s linear infinite; }
.wx-orb { position:absolute; top:50%; left:50%; width:56px; height:56px; margin:-28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; color:var(--c); border:1.5px solid var(--c); background:rgba(15,14,23,0.8); box-shadow:0 0 24px color-mix(in srgb, var(--c) 55%, transparent); transform:rotate(calc(var(--i) * 72deg)) translateY(-104px) rotate(calc(var(--i) * -72deg)); animation:wxOrbGlow 2.4s ease-in-out infinite; animation-delay:calc(var(--i) * 0.3s); }
.wx-core { position:absolute; top:50%; left:50%; width:96px; height:96px; margin:-48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:44px; color:#F5F0E6; background:radial-gradient(circle, rgba(201,166,107,0.22), rgba(15,14,23,0.9)); border:1px solid rgba(201,166,107,0.4); text-shadow:0 0 30px rgba(201,166,107,0.6); animation:wxCore 3s ease-in-out infinite; }
@keyframes wxSpin { to { transform:rotate(360deg); } }
@keyframes wxOrbGlow { 0%,100% { opacity:0.55; } 50% { opacity:1; } }
@keyframes wxCore { 0%,100% { transform:scale(1); } 50% { transform:scale(1.08); } }
.an-msgs { position:relative; }
.an-msgs span { position:absolute; left:0; right:0; opacity:0; animation:anMsg 3s ease-in-out both; }
.an-msgs span:nth-child(1) { animation-delay:0s; }
.an-msgs span:nth-child(2) { animation-delay:1s; }
.an-msgs span:nth-child(3) { animation-delay:2s; }
@keyframes anMsg { 0%,28% { opacity:0; transform:translateY(6px); } 8%,22% { opacity:1; transform:translateY(0); } 33%,100% { opacity:0; } }

/* ---- 부적 발행 연출 ---- */
.incense { position:relative; height:70px; }
.incense span { position:absolute; left:50%; bottom:0; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:rgba(201,166,107,0.5); filter:blur(3px); animation:smokeRise 2s ease-in infinite; }
.incense span:nth-child(2) { animation-delay:0.6s; margin-left:2px; }
.incense span:nth-child(3) { animation-delay:1.2s; margin-left:-10px; }
@keyframes smokeRise { 0% { opacity:0; transform:translateY(0) scale(0.6); } 30% { opacity:0.8; } 100% { opacity:0; transform:translateY(-56px) scale(2.4); } }
.smoke-burst { position:relative; width:0; height:0; margin:0 auto; }
.smoke-burst span { position:absolute; width:24px; height:24px; border-radius:50%; background:radial-gradient(circle, rgba(201,166,107,0.55), transparent 70%); transform:rotate(var(--a)) translateX(0); animation:burst 0.7s ease-out forwards; }
@keyframes burst { to { transform:rotate(var(--a)) translateX(90px) scale(2.2); opacity:0; } }
.talisman-paper { width:180px; margin:0 auto; padding:22px 14px 16px; border-radius:8px; background:linear-gradient(160deg, #F6E7B8, #E6CF92); color:#9B2A2A; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,0.5); position:relative; animation:talPop 0.6s cubic-bezier(0.34,1.56,0.64,1) both; }
.talisman-paper .tal-seal { position:absolute; right:12px; bottom:44px; width:40px; height:40px; background:#9B2A2A; color:#F6E7B8; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:22px; transform:rotate(-4deg); }
@keyframes talPop { from { opacity:0; transform:scale(0.4) rotate(-8deg); filter:blur(6px); } to { opacity:1; transform:scale(1) rotate(0); filter:blur(0); } }

/* ---- 원국 생성: 카드 플립 + 오행 발광 + 원소 입자 ---- */
.gen-cell { position:relative; perspective:1000px; }
.gen-glow { position:absolute; left:50%; top:52%; width:150px; height:172px; transform:translate(-50%,-50%); border-radius:22px; background:radial-gradient(circle, var(--el) 0%, transparent 68%); filter:blur(18px); opacity:0; z-index:0; pointer-events:none; animation:genGlow 1.4s var(--d) ease both; }
.gen-flip { position:relative; z-index:2; transform-origin:50% 50%; transform-style:preserve-3d; animation:genFlip 0.9s var(--d) cubic-bezier(0.3,1.45,0.5,1) both; }
.gen-particles { position:absolute; left:50%; top:52%; width:0; height:0; z-index:3; pointer-events:none; }
.gp { position:absolute; width:6px; height:6px; border-radius:50%; background:var(--el); box-shadow:0 0 8px var(--el), 0 0 3px rgba(255,255,255,0.8); opacity:0; animation:partBurst 1.2s ease-out both; }
.gp.spark { width:5px; height:5px; box-shadow:0 0 9px var(--el), 0 0 4px #fff; animation:partBurst 1.2s ease-out both, twinkle 0.34s linear 4; }
@keyframes genFlip {
  0%   { opacity:0; transform:rotateY(-96deg) scale(0.84); }
  45%  { opacity:1; }
  70%  { transform:rotateY(11deg) scale(1.05); }
  100% { transform:rotateY(0deg) scale(1); }
}
@keyframes genGlow { 0%,36% { opacity:0; } 56% { opacity:0.9; } 100% { opacity:0; } }
@keyframes partBurst {
  0%   { opacity:0; transform:translate(0,0) scale(0.3); }
  22%  { opacity:1; }
  100% { opacity:0; transform:translate(var(--dx), var(--dy)) scale(1); }
}
@keyframes twinkle { 0%,100% { filter:brightness(1); } 50% { filter:brightness(2.4); } }
.gen-reveal-late { animation:fadeUp 0.9s 2.4s ease both; }
.gen-reveal-arc { animation:fadeIn 1.1s 2.2s ease both; }
.gen-reveal-chip { animation:fadeUp 0.6s 2.2s ease both; }
/* 1회 재생 후 정적 표시 */
.gen-static .gen-flip, .gen-static .gen-reveal-late, .gen-static .gen-reveal-arc, .gen-static .gen-reveal-chip { animation:none !important; opacity:1 !important; transform:none !important; }
.gen-static .gen-glow, .gen-static .gen-particles { display:none !important; }
/* 원국 생성 그리드 — 모바일 2열 */
.gen-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:40px; position:relative; z-index:2; }
@media (max-width: 760px) {
  .gen-grid { grid-template-columns:repeat(2, 1fr); gap:26px 14px; }
  .gen-arcs { display:none; }
  .gen-cell .serif { font-size:44px !important; }
}
/* 글자 상세 패널 — 모바일에선 딱 맞는 카드형 모달 */
@media (max-width: 760px) {
  .char-panel { top:50% !important; bottom:auto !important; left:14px !important; right:14px !important; width:auto !important; transform:translateY(-50%); max-height:84vh; border-radius:18px; border:1px solid rgba(201,166,107,0.35) !important; padding:24px 22px !important; }
  .char-panel .cp-ch { width:56px !important; height:56px !important; font-size:32px !important; border-radius:12px !important; }
  .char-panel .cp-kr { font-size:18px !important; }
}
.tabbtn { background:none; border:none; border-bottom:2px solid transparent; color:rgba(237,228,211,0.5); font-size:14.5px; padding:12px 18px; cursor:pointer; white-space:nowrap; transition:color 0.2s; }
.tabbtn:hover { color:#F5F0E6; }
.tabbtn.on { border-bottom-color:#C9A66B; color:#C9A66B; font-weight:700; }
.chip { font-size:12px; padding:5px 12px; border-radius:999px; border:1px solid rgba(201,166,107,0.3); color:#C9A66B; }
.chip-warn { font-size:12px; padding:5px 12px; border-radius:999px; border:1px solid rgba(155,42,42,0.4); color:#C97B6B; }
.chip-dim { font-size:12px; padding:4px 12px; border-radius:999px; border:1px solid rgba(237,228,211,0.18); color:rgba(237,228,211,0.7); }
.navstep { display:flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; padding:8px 14px; border-radius:20px; }
.navstep:hover { background:rgba(245,240,230,0.05); }
.char-card { cursor:pointer; transition:transform 0.3s; }
.char-card:hover { transform:translateY(-4px); }
.mini-card { cursor:pointer; transition:all 0.25s; }
.mini-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.4); }
.tg-card { border:1px solid rgba(237,228,211,0.1); border-radius:12px; padding:18px; background:rgba(245,240,230,0.02); transition:all 0.25s; }
.tg-card:hover { border-color:rgba(201,166,107,0.4); background:rgba(245,240,230,0.04); }
.career-row { display:flex; align-items:center; gap:20px; border:1px solid rgba(237,228,211,0.08); border-radius:12px; padding:18px 22px; background:rgba(245,240,230,0.02); transition:all 0.25s; }
.career-row:hover { border-color:rgba(201,166,107,0.35); background:rgba(245,240,230,0.04); }
.city-item { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; cursor:pointer; border-bottom:1px solid rgba(237,228,211,0.06); }
.city-item:hover { background:rgba(201,166,107,0.1); }
.month-btn { display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 6px; border-radius:12px; cursor:pointer; transition:all 0.2s; background:rgba(245,240,230,0.02); border:1px solid rgba(237,228,211,0.1); color:#F5F0E6; }
.month-btn:hover { transform:translateY(-2px); }
.month-btn.on { background:rgba(201,166,107,0.1); border-color:#C9A66B; }
.hover-dot:hover { opacity:1 !important; }

/* ---- 로그인 대기 오버레이 ---- */
.auth-load-ov { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(10,9,16,0.82); backdrop-filter:blur(6px); animation:fadeIn .2s ease both; }
.auth-load-card { width:min(360px,92vw); text-align:center; background:#16151F; border:1px solid rgba(201,166,107,0.28);
  border-radius:20px; padding:34px 28px; box-shadow:0 30px 80px rgba(0,0,0,0.55); }
.auth-spinner { width:44px; height:44px; margin:0 auto 20px; border-radius:50%;
  border:3px solid rgba(201,166,107,0.2); border-top-color:#C9A66B; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.auth-load-title { font-family:'Noto Serif KR',serif; font-size:17px; font-weight:600; color:#F5F0E6; }
.auth-load-sub { font-size:12.5px; line-height:1.6; color:rgba(237,228,211,0.5); margin-top:8px; }
.auth-load-bar { height:7px; border-radius:999px; background:rgba(237,228,211,0.1); overflow:hidden; margin-top:20px; }
.auth-load-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,#C9A66B,#EDD9A8); transition:width .35s ease; }
.auth-load-pct { font-family:'Noto Serif KR',serif; font-size:14px; color:#C9A66B; margin-top:10px; }

/* ---- 커스텀 드롭다운 (앱 톤 팝업) ---- */
.cs { position:relative; margin-top:5px; }
.cs-btn { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-width:180px;
  padding:12px 14px; border-radius:12px; border:1px solid rgba(201,166,107,0.3); background:rgba(245,240,230,0.03);
  color:#EDE4D3; font-size:14px; font-family:inherit; cursor:pointer; transition:border-color .18s, background .18s; }
.cs-btn:hover { border-color:rgba(201,166,107,0.55); background:rgba(201,166,107,0.06); }
.cs.open .cs-btn { border-color:#C9A66B; background:rgba(201,166,107,0.08); }
.cs-cur { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-arrow { color:#C9A66B; font-size:11px; transition:transform .2s; flex-shrink:0; }
.cs.open .cs-arrow { transform:rotate(180deg); }
.cs-menu { position:absolute; z-index:60; top:calc(100% + 6px); left:0; right:0; min-width:100%;
  background:#1b1a25; border:1px solid rgba(201,166,107,0.35); border-radius:12px; padding:6px;
  box-shadow:0 18px 46px rgba(0,0,0,0.55); animation:csIn .16s ease both; max-height:280px; overflow-y:auto; }
@keyframes csIn { from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }
.cs-opt { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:11px 12px; border:none; border-radius:8px; background:none; color:rgba(237,228,211,0.82);
  font-size:13.5px; font-family:inherit; text-align:left; cursor:pointer; transition:background .14s; }
.cs-opt:hover { background:rgba(201,166,107,0.12); color:#F5F0E6; }
.cs-opt.on { color:#C9A66B; background:rgba(201,166,107,0.08); }
.cs-check { color:#C9A66B; font-size:12px; }

/* ---- 누적 감정 카운터 (공항 스플릿플랩/오도미터) ---- */
.odo-wrap { display:flex; align-items:center; gap:10px; }
.odo-label { text-align:right; line-height:1.35; }
.odo-label .t1 { font-size:10px; letter-spacing:2px; color:rgba(201,166,107,0.75); }
.odo-label .t2 { font-size:9.5px; letter-spacing:1px; color:rgba(237,228,211,0.35); }
.odo { display:flex; gap:3px; }
.odo-digit { position:relative; width:19px; height:28px; overflow:hidden; border-radius:4px; background:linear-gradient(to bottom, #23222F 0%, #1A1926 48%, #14131E 52%, #1C1B28 100%); border:1px solid rgba(201,166,107,0.28); box-shadow:inset 0 1px 0 rgba(245,240,230,0.06), 0 2px 6px rgba(0,0,0,0.45); }
.odo-digit::after { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,0.55); box-shadow:0 1px 0 rgba(245,240,230,0.05); pointer-events:none; z-index:2; }
.odo-strip { display:block; transition:transform 0.9s cubic-bezier(0.25, 1, 0.35, 1); will-change:transform; }
.odo-strip span { display:flex; align-items:center; justify-content:center; width:19px; height:28px; font-family:'Noto Serif KR', serif; font-size:16px; font-weight:600; color:#E8C98A; text-shadow:0 0 10px rgba(201,166,107,0.35); }
.odo-digit:nth-child(1) .odo-strip { transition-delay:0.20s; }
.odo-digit:nth-child(2) .odo-strip { transition-delay:0.15s; }
.odo-digit:nth-child(3) .odo-strip { transition-delay:0.10s; }
.odo-digit:nth-child(4) .odo-strip { transition-delay:0.05s; }
.odo-digit:nth-child(5) .odo-strip { transition-delay:0s; }
@media (max-width: 1180px) { .odo-label { display:none; } }
@media (max-width: 700px) { .odo-wrap { display:none; } }
.section { position:relative; z-index:1; animation:fadeUp 0.5s ease both; }
@media (max-width: 860px) {
  .grid-2, .grid-2r { grid-template-columns:1fr !important; }
  .hero-flex { flex-direction:column; }
  .hero-side { display:none !important; }
  header { padding:14px 18px !important; }
  .nav-steps { display:none !important; }
}
@media (max-width: 700px) {
  header { flex-wrap:nowrap !important; gap:8px !important; padding:10px 12px !important; }
  header > div:last-child { flex-wrap:nowrap !important; gap:8px !important; margin-left:auto; min-width:0; }
  .hdr-sub { display:none !important; }
  header .btn-pill { padding:7px 13px !important; font-size:12.5px !important; }
}
/* 가입·입력 화면 모바일 최적화 (화면 크기 따라 가변) */
@media (max-width: 520px) {
  .section { padding-left:16px !important; padding-right:16px !important; }
  .panel { padding:22px 16px !important; }
  .section h2.serif { font-size:24px !important; }
  .sel, .input, .input-sm, .seg { padding-top:12px !important; padding-bottom:12px !important; font-size:14px !important; }
  .seg { padding-left:10px !important; padding-right:10px !important; }
}
/* STEP02(보정) 모바일 한 페이지: 태양 다이어그램 SVG 숨김 */
@media (max-width: 560px) { .corr-diagram { display:none !important; } }
/* 홈: 모바일에선 히어로 압축 → 상품 카드가 첫 화면에 최대한 보이게 */
@media (max-width: 760px) {
  .home-sec { padding:20px 16px 60px !important; overflow-x:hidden; max-width:100vw; }
  .home-sec .hero-flex { gap:0 !important; }
  .home-sec .hero-side { display:none !important; }
  .home-sec .hero-h1 { font-size:clamp(26px, 8.5vw, 36px) !important; margin-top:12px !important; white-space:normal !important; word-break:keep-all; }
  .home-sec .hero-p { display:none !important; }
  .prod-wrap { max-width:100%; overflow:hidden; }
  .home-sec .hero-btns { margin-top:16px !important; gap:8px !important; }
  .home-sec .hero-btns .btn-primary { padding:12px 16px !important; font-size:14px !important; }
  .home-sec .hero-btns .btn-ghost { padding:12px 14px !important; font-size:13.5px !important; }
  .prod-grid { gap:8px; }
  .prod-card { padding:14px 6px 12px; border-radius:12px; gap:5px; }
  .pc-hanja { font-size:27px; }
  .pc-title { font-size:12.5px; }
  .pc-tag { font-size:10px; padding:1px 7px; }
  .cred-strip { gap:6px 14px; margin-top:24px; font-size:11px; }
  .cred-item { font-size:11px; }
}
/* 비교표: OSAJU 열(왼쪽) 강조, 모바일에서 라벨 좁게 */
@media (max-width: 560px) {
  .cmp-table { min-width:480px; }
  .cmp-table th, .cmp-table td { padding:12px 12px; font-size:13px; }
  .cmp-table td.c-label { font-size:12px; }
}