@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');

:root { --app-width:448px; --black:#111; --text:#1f2937; --muted:#6b7280; --line:#ececec; --red:#b8322b; --soft:#f7f7f7; --purple:#635aa8; --font:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#f1f1f1; color:var(--text); font-family:var(--font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app-shell { width:100%; max-width:var(--app-width); min-height:100vh; margin:0 auto; background:#fff; box-shadow:0 0 24px rgba(0,0,0,.04); position:relative; overflow:hidden; }
.top-header { width:100%; max-width:var(--app-width); height:60px; position:fixed; top:0; left:50%; transform:translateX(-50%); z-index:120; display:flex; align-items:center; justify-content:space-between; padding:0 20px; background:rgba(255,255,255,.97); border-bottom:1px solid #f0f0f0; backdrop-filter:blur(12px); }
.logo { display:flex; align-items:center; gap:7px; color:#161616; font-family:'Song Myung',serif; font-size:22px; }
.logo-seal { width:23px; height:23px; display:grid; place-items:center; color:#fff; background:var(--red); border-radius:2px; font:14px 'Song Myung',serif; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.icon-button { width:36px; height:36px; padding:8px; border:0; background:transparent; display:grid; align-content:center; gap:5px; }
.icon-button span { width:22px; height:2px; display:block; background:#111; }
main { padding-top:60px; padding-bottom:70px; }
.hero-carousel { padding:18px 8px 0; position:relative; overflow:hidden; }.hero-track { position:relative; height:270px; }.hero-banner { position:absolute; inset:0; padding:28px 24px; border-radius:13px; overflow:hidden; color:#fff; opacity:0; transform:translateX(35px) scale(.97); pointer-events:none; transition:.42s ease; box-shadow:0 7px 16px rgba(0,0,0,.12); }.hero-banner.active { opacity:1; transform:none; pointer-events:auto; }
.banner-night { background:linear-gradient(145deg,#091a2c 0%,#132b3d 50%,#231b26 100%); }.banner-red { background:linear-gradient(145deg,#401718,#8f363c 55%,#e19286); }.banner-blue { background:linear-gradient(145deg,#171a40,#3d4d86 58%,#87a0be); }
.banner-copy { position:relative; z-index:5; }.banner-copy small { color:rgba(255,255,255,.72); font-size:11px; }.banner-copy h2 { margin:13px 0 8px; color:#fff; font:400 30px/1.27 'Song Myung',serif; letter-spacing:-.045em; text-shadow:0 2px 9px rgba(0,0,0,.25); }.banner-copy p { margin:0; color:rgba(255,255,255,.68); font-size:10px; }.banner-copy button { height:39px; margin-top:22px; padding:0 16px; border:1px solid rgba(255,255,255,.22); border-radius:5px; color:#fff; background:rgba(255,255,255,.14); font-size:11px; font-weight:600; backdrop-filter:blur(4px); }.banner-copy button b { margin-left:8px; font-size:17px; }
.rank-badge { position:absolute; top:0; right:16px; z-index:7; width:42px; min-height:48px; padding:6px 3px 9px; text-align:center; background:#1f2341; color:#fff; clip-path:polygon(0 0,100% 0,100% 87%,50% 100%,0 87%); font-size:8px; line-height:1.1; }.rank-badge b { font-size:17px; }.banner-red .rank-badge { background:#641e22; }.banner-blue .rank-badge { background:#252759; padding-top:14px; font-size:10px; }
.stars { position:absolute; inset:0; opacity:.65; background-image:radial-gradient(circle at 12% 23%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 64% 14%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 83% 44%,#edca82 0 1px,transparent 1.5px),radial-gradient(circle at 37% 70%,#fff 0 1px,transparent 1.5px); }.moon { position:absolute; width:52px; height:52px; border-radius:50%; right:114px; top:28px; background:#f8e5b8; box-shadow:0 0 35px rgba(248,229,184,.35); }.portrait { position:absolute; width:175px; height:220px; right:1px; bottom:-35px; }.portrait .face { position:absolute; width:82px; height:103px; left:48px; top:34px; border-radius:48% 48% 45% 45%; background:linear-gradient(#f3ceb7,#d8a792); box-shadow:inset 0 -6px 14px rgba(123,69,64,.15); }.portrait .face::before { content:'⌣'; position:absolute; left:27px; top:48px; color:#744d4b; font-size:23px; transform:rotate(90deg); }.portrait .hair { position:absolute; z-index:2; width:110px; height:132px; left:33px; top:8px; border-radius:52% 52% 35% 35%; background:#201a1c; clip-path:polygon(7% 0,93% 0,100% 100%,73% 87%,69% 27%,50% 11%,31% 28%,25% 90%,0 100%); }.portrait .body-shape { position:absolute; width:160px; height:110px; bottom:0; left:8px; border-radius:70px 70px 0 0; background:linear-gradient(130deg,#32232a,#14141c); }.petals { position:absolute; inset:20px; color:rgba(255,235,224,.36); font-size:32px; transform:rotate(-12deg); }.double-moon { position:absolute; right:-25px; bottom:-37px; width:220px; height:220px; border-radius:50%; display:grid; place-items:center; color:rgba(104,29,34,.75); background:radial-gradient(circle at 38% 36%,#ffe5d7,#dc9587 65%,#a23e43); font:80px 'Song Myung',serif; box-shadow:0 0 0 12px rgba(255,255,255,.05); }.compass { position:absolute; right:-26px; bottom:-40px; width:224px; height:224px; border:1px solid rgba(255,255,255,.24); border-radius:50%; display:grid; place-items:center; }.compass::before,.compass::after { content:''; position:absolute; inset:27px; border:1px dashed rgba(255,255,255,.2); border-radius:50%; }.compass::after { inset:62px; border-style:solid; }.compass span { font:64px 'Song Myung',serif; color:rgba(255,255,255,.5); }
.carousel-dots { height:25px; display:flex; justify-content:center; align-items:center; gap:5px; }.carousel-dots button { width:5px; height:5px; padding:0; border:0; border-radius:99px; background:#d3d3d3; transition:.2s; }.carousel-dots button.active { width:17px; background:#555; }

.content-section { padding:28px 16px 34px; }.first-section { padding-top:22px; }.section-title-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }.section-title-row h2 { margin:0; color:#111; font-size:19px; line-height:1.35; letter-spacing:-.035em; }.section-title-row p { margin:9px 0 0; color:#777; font-size:11px; }.section-title-row p span { margin-right:4px; }.text-link { flex:none; padding:3px 0 3px 10px; border:0; background:transparent; color:#858585; font-size:11px; }
.poster-scroll,.product-scroll { display:flex; gap:10px; margin:0 -16px; padding:0 16px 5px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; }.poster-scroll::-webkit-scrollbar,.product-scroll::-webkit-scrollbar { display:none; }.poster { flex:0 0 145px; height:190px; padding:18px 13px; border:0; border-radius:9px; text-align:left; color:#fff; position:relative; overflow:hidden; scroll-snap-align:start; box-shadow:0 5px 11px rgba(0,0,0,.12); }.poster::after { content:''; position:absolute; width:120px; height:120px; border:1px solid rgba(255,255,255,.19); border-radius:50%; right:-32px; bottom:-40px; }.poster-green { background:linear-gradient(145deg,#244d42,#6c927b); }.poster-pink { background:linear-gradient(145deg,#813f55,#db899a); }.poster-purple { background:linear-gradient(145deg,#403b6c,#897dae); }.poster-orange { background:linear-gradient(145deg,#8a452e,#db8d59); }.poster-label { display:inline-block; padding:4px 6px; color:#255447; background:#ddf0e8; border-radius:3px; font-size:9px; font-weight:700; }.poster-label.hot { color:#942a42; background:#ffe3e7; }.poster-label.new { color:#994529; background:#ffe7d8; }.poster-symbol { display:block; margin:19px 0 12px; color:rgba(255,255,255,.72); font:45px/1 'Song Myung',serif; }.poster strong,.poster small { display:block; position:relative; z-index:1; }.poster strong { font-size:14px; }.poster small { margin-top:5px; color:rgba(255,255,255,.65); font-size:9px; }

.brand-proof { margin:7px 16px 20px; padding:28px 18px 24px; border-radius:9px; color:#fff; text-align:center; background:linear-gradient(145deg,#1c2d2a,#314d45); overflow:hidden; position:relative; }.brand-proof::before { content:'命'; position:absolute; right:-6px; top:-34px; color:rgba(255,255,255,.035); font:150px 'Song Myung',serif; }.proof-kicker { color:#c3aa7c; font-size:8px; letter-spacing:.16em; }.brand-proof h2 { margin:12px 0 8px; font:400 20px/1.5 'Song Myung',serif; }.brand-proof h2 strong { color:#efd6a5; font-weight:400; }.brand-proof > p { margin:0 auto; max-width:310px; color:rgba(255,255,255,.56); font-size:9px; line-height:1.7; }.proof-numbers { margin-top:22px; display:flex; align-items:center; justify-content:center; gap:25px; }.proof-numbers div { display:grid; gap:2px; }.proof-numbers b { color:#e8cf9c; font:23px 'Song Myung',serif; }.proof-numbers span { color:rgba(255,255,255,.5); font-size:8px; }.proof-numbers i { width:1px; height:26px; background:rgba(255,255,255,.14); }
.activity-list { border-top:1px solid #f1f1f1; }.activity-list article { min-height:81px; display:grid; grid-template-columns:39px 1fr auto; align-items:center; gap:11px; border-bottom:1px solid #f2f2f2; }.avatar { width:39px; height:39px; display:grid; place-items:center; border-radius:50%; color:#fff; font:16px 'Song Myung',serif; }.avatar-red { background:#a75254; }.avatar-blue { background:#4d718b; }.avatar-gold { background:#a78754; }.activity-list article div { min-width:0; }.activity-list b { margin-right:8px; font-size:11px; }.activity-list small { color:#999; font-size:9px; }.activity-list p { margin:5px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#555; font-size:10px; }.activity-list time { align-self:start; padding-top:19px; color:#aaa; font-size:8px; }.example-note { margin:10px 0 0; color:#aaa; font-size:8px; text-align:right; }
.section-divider { height:9px; background:#f5f5f5; border-top:1px solid #f1f1f1; border-bottom:1px solid #f1f1f1; }
.product-card { flex:0 0 139px; padding:0; border:0; background:#fff; text-align:left; scroll-snap-align:start; }.product-art { height:167px; border-radius:7px; position:relative; display:grid; place-content:center; text-align:center; overflow:hidden; color:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.04); }.product-art::before,.product-art::after { content:''; position:absolute; width:110px; height:110px; border:1px solid rgba(255,255,255,.24); border-radius:50%; top:-25px; right:-35px; }.product-art::after { top:auto; right:auto; left:-50px; bottom:-55px; }.product-art span { position:relative; z-index:1; font:50px 'Song Myung',serif; text-shadow:0 3px 12px rgba(0,0,0,.2); }.product-art i { position:relative; z-index:1; margin-top:8px; font-style:normal; font-size:9px; letter-spacing:.08em; color:rgba(255,255,255,.7); }.art-love { background:linear-gradient(145deg,#681f31,#d18389); }.art-mind { background:linear-gradient(145deg,#25274f,#7775a8); }.art-flower { background:linear-gradient(145deg,#6c3e61,#cf88a4); }.art-year { background:linear-gradient(145deg,#162f3d,#4c8394); }.art-career { background:linear-gradient(145deg,#3b3c31,#94906b); }.art-money { background:linear-gradient(145deg,#49362a,#b28a52); }.product-card > b { display:block; margin-top:10px; color:#222; font-size:12px; }.product-card > p { height:30px; margin:4px 0 6px; color:#888; font-size:9px; line-height:1.5; }.product-card > strong { color:#e2483e; font-size:10px; }
.rank-list { border-top:1px solid #efefef; }.rank-list button { width:100%; min-height:73px; display:grid; grid-template-columns:22px 49px 1fr 12px; align-items:center; gap:10px; padding:10px 2px; border:0; border-bottom:1px solid #f0f0f0; background:#fff; text-align:left; }.rank-list button > b { color:#111; text-align:center; font-size:13px; }.rank-thumb { width:49px; height:49px; display:grid; place-items:center; border-radius:6px; color:#fff; font:20px 'Song Myung',serif; }.thumb-one { background:#46705c; }.thumb-two { background:#526b90; }.thumb-three { background:#a75d79; }.thumb-four { background:#826d4c; }.rank-list div { display:grid; gap:5px; }.rank-list strong { color:#222; font-size:12px; }.rank-list small { color:#929292; font-size:9px; }.rank-list i { color:#aaa; font-style:normal; font-size:18px; }
.guide-banner { min-height:172px; margin:3px 16px 38px; padding:27px 23px; border-radius:8px; color:#fff; background:linear-gradient(125deg,#263930,#536d60); position:relative; overflow:hidden; }.guide-banner div { position:relative; z-index:2; }.guide-banner small { color:#cfc2a0; font-size:9px; }.guide-banner h2 { margin:9px 0 14px; font:400 21px/1.38 'Song Myung',serif; }.guide-banner button { padding:0; border:0; background:transparent; color:rgba(255,255,255,.75); font-size:9px; }.guide-symbol { position:absolute; right:18px; bottom:-20px; color:rgba(255,255,255,.1); font:120px 'Song Myung',serif; }
footer { padding:30px 20px 48px; color:#8d8d8d; background:#f7f7f7; }.footer-logo { display:flex; align-items:center; gap:7px; color:#555; }.footer-logo strong { font:18px 'Song Myung',serif; }.footer-logo .logo-seal { filter:grayscale(1); opacity:.65; }.footer-logo + p { margin:12px 0 20px; font-size:9px; }.footer-links { display:flex; gap:14px; margin-bottom:12px; color:#6c6c6c; font-size:9px; font-weight:600; }footer > small { font-size:8px; }

.bottom-nav { width:100%; max-width:var(--app-width); height:70px; position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:120; display:grid; grid-template-columns:repeat(4,1fr); padding:5px 4px calc(5px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97); border-top:1px solid #eaeaea; backdrop-filter:blur(12px); }.bottom-nav a,.bottom-nav button { min-width:0; border:0; border-radius:9px; background:transparent; display:grid; place-content:center; justify-items:center; gap:3px; color:#9c9c9c; text-align:center; transition:color .2s,background .2s,transform .2s; }.bottom-nav a:active,.bottom-nav button:active { transform:scale(.94); }.bottom-nav .nav-icon { width:28px; height:28px; display:block; color:inherit; position:relative; }.bottom-nav .nav-icon svg { width:100%; height:100%; display:block; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.bottom-nav b { font-size:10px; line-height:1; font-weight:500; letter-spacing:-.02em; }.bottom-nav .active { color:#161616; }.bottom-nav .active .nav-icon { color:#161616; }.bottom-nav .active b { font-weight:700; }.test-logged-in .saju-login-trigger .nav-icon::after { content:''; width:6px; height:6px; position:absolute; top:1px; right:0; border:2px solid #fff; border-radius:50%; background:#3ba36a; }

.sheet-backdrop { position:fixed; z-index:80; inset:60px 0 70px; background:rgba(0,0,0,.55); opacity:0; visibility:hidden; transition:.25s; }.sheet-backdrop.open { opacity:1; visibility:visible; }.birth-sheet { width:100%; max-width:448px; max-height:calc(100dvh - 130px); position:fixed; z-index:90; left:50%; bottom:70px; overflow-y:auto; padding:8px 20px 24px; border-radius:18px 18px 0 0; background:#fff; transform:translate(-50%,105%); transition:.32s cubic-bezier(.2,.8,.2,1); box-shadow:0 -10px 40px rgba(0,0,0,.17); }.birth-sheet.open { transform:translate(-50%,0); }.sheet-handle { width:38px; height:4px; margin:0 auto 14px; border-radius:9px; background:#d5d5d5; }.sheet-head { display:flex; justify-content:space-between; align-items:start; margin-bottom:18px; }.sheet-head small { color:#a33e36; font-size:9px; font-weight:700; }.sheet-head h2 { margin:5px 0 0; color:#111; font-size:20px; }.sheet-close,.menu-close { width:35px; height:35px; border:0; background:transparent; color:#555; font-size:28px; font-weight:300; line-height:1; }.birth-sheet form { display:grid; gap:13px; }.birth-sheet label > span,.birth-sheet legend { display:block; margin-bottom:6px; padding:0; color:#5c5c5c; font-size:10px; font-weight:600; }.birth-sheet input[type=text],.birth-sheet input[type=date],.birth-sheet select { width:100%; height:44px; padding:0 12px; border:1px solid #dedede; border-radius:6px; color:#222; background:#fff; outline:none; }.birth-sheet input:focus,.birth-sheet select:focus { border-color:#555; }.birth-sheet fieldset { min-width:0; margin:0; padding:0; border:0; }.choice-row { height:44px; display:grid; grid-template-columns:1fr 1fr; padding:3px; border-radius:6px; background:#f0f0f0; }.choice-row label { position:relative; }.choice-row input { position:absolute; opacity:0; }.choice-row span { height:38px; margin:0!important; display:grid!important; place-items:center; border-radius:4px; color:#888!important; font-size:11px!important; }.choice-row input:checked + span { color:#222!important; background:#fff; font-weight:700; box-shadow:0 1px 5px rgba(0,0,0,.08); }.form-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:9px; }.submit-button { height:50px; margin-top:4px; border:0; border-radius:6px; color:#fff; background:#5e58a6; font-size:13px; font-weight:700; }.submit-button b { margin-left:8px; font-size:19px; }.birth-sheet form > p { margin:0; color:#aaa; text-align:center; font-size:8px; }
.field-help { display:block; margin:-2px 0 8px; color:#999; font-size:9px; font-weight:400; line-height:1.5; }
.side-menu { width:100%; max-width:448px; position:fixed; z-index:130; top:0; bottom:0; left:50%; padding:17px 20px; background:#fff; transform:translateX(60%); opacity:0; visibility:hidden; transition:.3s; }.side-menu.open { transform:translateX(-50%); opacity:1; visibility:visible; }.side-head { height:40px; display:flex; align-items:center; justify-content:space-between; }.login-box { margin:24px 0 12px; padding:20px; border-radius:8px; background:#f6f4f1; display:grid; gap:12px; }.login-box span { color:#555; font-size:11px; }.login-box button { height:41px; border:0; border-radius:5px; color:#fff; background:#222; font-size:11px; }.side-menu > nav { border-top:1px solid #eee; }.side-menu > nav button { width:100%; height:57px; display:flex; justify-content:space-between; align-items:center; padding:0 3px; border:0; border-bottom:1px solid #eee; background:#fff; color:#222; font-size:13px; }.side-menu > nav b { color:#aaa; font-size:18px; }
.login-sheet,.result-sheet,.archive-sheet { width:100%; max-width:448px; max-height:calc(100dvh - 130px); position:fixed; z-index:92; left:50%; bottom:70px; overflow-y:auto; padding:8px 20px 24px; border-radius:18px 18px 0 0; background:#fff; transform:translate(-50%,105%); transition:.32s cubic-bezier(.2,.8,.2,1); box-shadow:0 -10px 40px rgba(0,0,0,.17); }.login-sheet.open,.result-sheet.open,.archive-sheet.open { transform:translate(-50%,0); }.login-sheet .sheet-head h2 { line-height:1.4; }.login-benefits { display:grid; gap:11px; margin:6px 0 22px; padding:17px 18px; border-radius:9px; background:#f7f7f7; }.login-benefits p { margin:0; color:#555; font-size:11px; }.login-benefits span { margin-right:8px; color:#5e58a6; font-weight:800; }.kakao-login,.email-login,.result-confirm { width:100%; height:50px; border-radius:7px; font-size:13px; font-weight:700; }.kakao-login { border:0; color:#251d00; background:#fee500; }.kakao-symbol { margin-right:7px; font-size:15px; }.email-login { margin-top:9px; border:1px solid #dedede; color:#333; background:#fff; }.login-policy { margin:13px 0 0; color:#aaa; text-align:center; font-size:8px; }.result-date { margin:-5px 0 18px; color:#888; font-size:10px; }.result-pillars { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #e6e6e6; border-radius:9px; overflow:hidden; }.result-pillars div { padding:14px 5px; border-right:1px solid #ececec; text-align:center; }.result-pillars div:last-child { border-right:0; }.result-pillars small { display:block; margin-bottom:7px; color:#999; font-size:9px; }.result-pillars b { display:block; color:#222; font-size:18px; line-height:25px; }.result-pillars strong { display:block; min-height:18px; color:#999; font-size:12px; line-height:18px; font-weight:500; }.result-notice { margin:18px 0; padding:16px; border-radius:8px; background:#f6f4f1; }.result-notice b { color:#333; font-size:11px; }.result-notice p { margin:6px 0 0; color:#777; font-size:9px; line-height:1.65; }.result-confirm { border:0; color:#fff; background:#5e58a6; }.archive-empty { min-height:290px; display:grid; place-items:center; align-content:center; text-align:center; }.archive-empty[hidden],.archive-content[hidden] { display:none; }.empty-bookmark { width:56px; height:56px; display:grid; place-items:center; margin-bottom:16px; border-radius:50%; color:#7d78b5; background:#f0eff8; font-size:28px; }.archive-empty b { color:#333; font-size:14px; }.archive-empty p { margin:7px 0 20px; color:#888; font-size:10px; }.archive-create { width:100%; height:48px; border:0; border-radius:7px; color:#fff; background:#5e58a6; font-size:12px; font-weight:700; }.archive-guide { margin:-5px 0 13px; color:#777; font-size:10px; }.archive-list { display:grid; gap:12px; }.saved-saju-card { overflow:hidden; border:1px solid #e6e2da; border-radius:11px; background:#fbfaf6; }.archive-select { width:100%; padding:0; border:0; background:transparent; text-align:left; }.saved-card-head { min-height:103px; display:flex; align-items:center; justify-content:space-between; padding:17px 18px; color:#fff; background:linear-gradient(135deg,#263a32,#526b60); }.saved-card-head small { color:#d9c9a7; font-size:8px; letter-spacing:.08em; }.saved-card-head h3 { margin:6px 0 5px; font-size:20px; }.saved-card-head p { margin:0; color:rgba(255,255,255,.56); font-size:9px; }.saved-card-head > span { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.3); border-radius:50%; color:#e4d3b0; font-size:23px; }.archive-pillars { display:grid; grid-template-columns:repeat(4,1fr); padding:13px 9px; }.archive-pillars div { border-right:1px solid #e8e4dc; text-align:center; }.archive-pillars div:last-child { border:0; }.archive-pillars small { display:block; margin-bottom:5px; color:#999; font-size:8px; }.archive-pillars b { color:#333; font-size:17px; }.saved-card-actions { display:flex; justify-content:flex-end; padding:0 12px 11px; }.chart-edit { padding:5px 8px; border:0; border-radius:4px; color:#777; background:#efede7; font-size:9px; }.archive-add { width:100%; height:46px; margin-top:13px; border:1px solid #dcdcdc; border-radius:7px; color:#555; background:#fff; font-size:11px; font-weight:600; }
.toast { min-width:220px; position:fixed; z-index:140; left:50%; bottom:84px; padding:13px 20px; border-radius:99px; color:#fff; background:rgba(20,20,20,.9); text-align:center; font-size:11px; opacity:0; visibility:hidden; transform:translate(-50%,12px); transition:.25s; }.toast.show { opacity:1; visibility:visible; transform:translate(-50%,0); }
.archive-sheet { padding-left:18px; padding-right:18px; background:#fff; }
.archive-sheet .sheet-head { margin-bottom:12px; }
.archive-guide { margin:0 0 14px; color:#8a8a8a; font-size:11px; }
.archive-list { gap:8px; }
.saved-saju-card { min-height:72px; display:grid; grid-template-columns:minmax(0,1fr) 47px 47px; align-items:center; overflow:hidden; border:1px solid #ececec; border-radius:10px; background:#fff; box-shadow:none; }
.archive-select { min-width:0; min-height:72px; display:grid; grid-template-columns:42px minmax(0,1fr) 16px; align-items:center; gap:12px; padding:11px 8px 11px 12px; border:0; background:#fff; text-align:left; }
.archive-select:active { background:#f8f8f8; }
.saved-avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:#4f4a86; background:#f0eff8; font-size:14px; font-weight:700; }
.saved-summary { min-width:0; display:grid; gap:5px; }
.saved-summary strong { overflow:hidden; color:#222; font-size:14px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.saved-summary small { color:#929292; font-size:10px; }
.saved-chevron { color:#aaa; font-size:22px; font-weight:300; }
.chart-edit,.chart-delete { align-self:stretch; min-width:47px; padding:0 8px; border:0; border-left:1px solid #f0f0f0; background:#fff; font-size:10px; }
.chart-edit { color:#777; }
.chart-delete { color:#b34b45; }
.chart-edit:active,.chart-delete:active { background:#f7f7f7; }
.archive-add { height:44px; margin-top:12px; border-color:#e3e3e3; color:#666; background:#fafafa; }
body * { font-family:var(--font)!important; }
.logo { font-weight:800; letter-spacing:-.055em; }
.logo-seal { font-weight:700!important; letter-spacing:-.04em; }
.banner-copy h2 { font-weight:800; letter-spacing:-.055em; }
.brand-proof h2,.guide-banner h2 { font-weight:700; letter-spacing:-.04em; }
.poster-symbol,.product-art span,.brand-proof::before,.guide-symbol,.double-moon,.compass span { font-family:var(--font)!important; font-weight:700; }
.result-pillars b,.saved-card-head h3,.saved-card-head > span,.archive-pillars b { font-weight:700; letter-spacing:-.035em; }
.section-title-row h2,.sheet-head h2 { letter-spacing:-.04em; }
.analysis-view { width:100%; max-width:var(--app-width); position:fixed; z-index:115; top:60px; bottom:70px; left:50%; overflow:hidden; color:#171927; background:#f5f6f9; opacity:0; visibility:hidden; transform:translate(-50%,28px); transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1),visibility .3s; }
.analysis-view.open { opacity:1; visibility:visible; transform:translate(-50%,0); }
.analysis-header { height:60px; display:grid; grid-template-columns:42px 1fr 42px; align-items:center; padding:0 14px; background:rgba(255,255,255,.96); border-bottom:1px solid #f0f0f3; backdrop-filter:blur(14px); }
.analysis-header button { width:40px; height:40px; display:grid; place-items:center; padding:8px; border:0; border-radius:12px; color:#20222d; background:transparent; }
.analysis-header svg { width:23px; height:23px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.analysis-header > div { display:grid; justify-items:center; gap:2px; }
.analysis-header b { font-size:15px; letter-spacing:-.03em; }
.analysis-header small { color:#8b8e98; font-size:10px; }
.analysis-saved { width:34px; height:34px; display:grid; place-items:center; justify-self:end; border-radius:11px; color:#675fc0; background:#f0effc; }
.analysis-saved svg { width:18px; height:18px; fill:#675fc0; stroke-width:1.6; }
.analysis-tabs { height:48px; display:grid; grid-template-columns:repeat(4,1fr); padding:0 10px; background:#fff; border-bottom:1px solid #eeeff3; }
.analysis-tabs button { position:relative; border:0; color:#9699a2; background:transparent; font-size:12px; font-weight:600; }
.analysis-tabs button::after { content:''; height:2px; position:absolute; right:28%; bottom:0; left:28%; border-radius:3px; background:#6259b3; opacity:0; transform:scaleX(.45); transition:.2s; }
.analysis-tabs button.active { color:#302c61; font-weight:800; }
.analysis-tabs button.active::after { opacity:1; transform:scaleX(1); }
.analysis-scroll { height:calc(100% - 108px); padding:18px 16px 36px; overflow-y:auto; overscroll-behavior:contain; scroll-behavior:smooth; }
.analysis-scroll > section { scroll-margin-top:18px; }
.analysis-hero { min-height:220px; position:relative; padding:25px 23px; overflow:hidden; border-radius:22px; color:#fff; background:radial-gradient(circle at 88% 10%,rgba(255,255,255,.22),transparent 28%),linear-gradient(145deg,#554caa,#756ac7 62%,#9585dc); box-shadow:0 14px 30px rgba(91,79,177,.24); }
.analysis-hero::before,.analysis-hero::after { content:''; position:absolute; border:1px solid rgba(255,255,255,.15); border-radius:50%; }
.analysis-hero::before { width:170px; height:170px; right:-56px; bottom:-78px; }
.analysis-hero::after { width:100px; height:100px; right:-20px; bottom:-44px; }
.analysis-hero > * { position:relative; z-index:1; }
.analysis-hero > small { color:rgba(255,255,255,.72); font-size:10px; font-weight:700; letter-spacing:-.01em; }
.analysis-hero > small span { color:#fff; font-weight:800; }
.analysis-hero h2 { max-width:270px; margin:15px 0 10px; font-size:26px; line-height:1.32; letter-spacing:-.055em; }
.analysis-hero p { max-width:330px; margin:0; color:rgba(255,255,255,.78); font-size:12px; line-height:1.75; word-break:keep-all; }
.analysis-card { margin-top:14px; padding:20px; border:1px solid #ececf2; border-radius:18px; background:#fff; box-shadow:0 5px 18px rgba(38,39,60,.035); }
.analysis-card-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:17px; }
.analysis-card-head small,.analysis-section-title small { color:#8c87bd; font-size:8px; font-weight:800; letter-spacing:.12em; }
.analysis-card-head h3,.analysis-section-title h3 { margin:5px 0 0; color:#1d1e27; font-size:17px; letter-spacing:-.045em; }
.analysis-card-head > span { color:#9598a1; font-size:9px; }
.analysis-pillar-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.analysis-pillar-grid div { display:grid; place-items:center; gap:8px; min-height:76px; padding:10px 4px; border-radius:12px; background:#f7f7f9; }
.analysis-pillar-grid div.day-pillar { color:#fff; background:#6259b3; box-shadow:0 6px 14px rgba(98,89,179,.2); }
.analysis-pillar-grid small { color:#9b9da5; font-size:9px; }
.analysis-pillar-grid .day-pillar small { color:rgba(255,255,255,.7); }
.analysis-pillar-grid b { font-size:20px; font-weight:800; letter-spacing:-.04em; }
.analysis-pillar-grid span { color:#8f929c; font-size:10px; font-weight:600; letter-spacing:.08em; }
.analysis-pillar-grid .day-pillar span { color:rgba(255,255,255,.78); }
.pillar-reading-guide { margin:12px 0 0; color:#9a9ca5; text-align:center; font-size:8px; }
.balance-overview { display:grid; grid-template-columns:104px 1fr; align-items:center; gap:19px; padding:4px 2px 20px; }
.balance-ring { --score:0; --ring-color:#655cb6; width:104px; height:104px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--ring-color) calc(var(--score) * 1%),#ececf2 0); }
.balance-ring::before { content:''; width:78px; height:78px; grid-area:1/1; border-radius:50%; background:#fff; }
.balance-ring div { z-index:1; grid-area:1/1; display:grid; justify-items:center; }
.balance-ring b { font-size:25px; line-height:1; }
.balance-ring small { margin-top:5px; color:#9b9da5; font-size:8px; }
.balance-copy { display:grid; gap:9px; }
.balance-copy span { display:flex; justify-content:space-between; gap:8px; padding-bottom:9px; border-bottom:1px solid #f0f0f3; color:#898c95; font-size:10px; }
.balance-copy b { color:#282a34; font-size:11px; }
.element-bars { display:grid; gap:12px; }
.element-bars > div { display:grid; grid-template-columns:22px 1fr 34px; align-items:center; gap:9px; }
.element-bars span { color:#555966; font-size:10px; font-weight:700; }
.element-bars i { height:7px; overflow:hidden; border-radius:99px; background:#eeeef2; }
.element-bars i b { width:0; height:100%; display:block; border-radius:inherit; transition:width .65s ease; }
.element-bars em { color:#777b86; text-align:right; font-size:9px; font-style:normal; }
.phase-two-evidence { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:20px; padding-top:17px; border-top:1px solid #eeeef3; }
.phase-two-evidence > div { min-width:0; display:grid; grid-template-columns:1fr auto; gap:4px 7px; padding:12px; border-radius:13px; background:#f8f7fc; }
.phase-two-evidence small { grid-column:1/-1; color:#918cab; font-size:7px; font-weight:800; letter-spacing:.08em; }
.phase-two-evidence b { overflow:hidden; color:#333440; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.phase-two-evidence span { color:#8179bd; font-size:9px; font-weight:700; }
.phase-two-evidence .strength-evidence { grid-column:1/-1; background:#fff7fa; }
.structure-summary { display:grid; gap:8px; }
.structure-summary > div { display:grid; grid-template-columns:84px minmax(0,1fr); align-items:center; gap:3px 10px; min-height:54px; padding:10px 12px; border-radius:13px; background:#f8f8fa; }
.structure-summary small { grid-row:1/3; color:#999ca6; font-size:8px; font-weight:700; }
.structure-summary b { color:#333540; font-size:11px; }
.structure-summary span { color:#81848e; font-size:9px; line-height:1.4; }
.position-ten-gods { margin-top:15px; padding-top:14px; border-top:1px solid #eeeef3; }
.position-ten-gods > small { color:#918cab; font-size:8px; font-weight:800; letter-spacing:.04em; }
.position-ten-gods > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:9px; }
.position-ten-gods > div > div { min-width:0; display:grid; gap:4px; padding:10px; border-radius:12px; background:#f7f6fb; }
.position-ten-gods small { color:#9a9ca5; font-size:8px; }
.position-ten-gods b { color:#3e4050; font-size:10px; }
.position-ten-gods span { color:#898b95; font-size:8px; }
.relation-evidence { margin-top:15px; padding-top:14px; border-top:1px solid #eeeef3; }
.relation-evidence > small { color:#918cab; font-size:8px; font-weight:800; letter-spacing:.04em; }
.relation-evidence > div { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.relation-evidence span { padding:6px 9px; border:1px solid #e4e0f3; border-radius:99px; color:#625a9f; background:#faf9ff; font-size:8px; font-weight:700; }
.structure-guide { margin:13px 2px 0; color:#989aa3; font-size:8px; line-height:1.65; word-break:keep-all; }
.analysis-insight-section { padding-top:28px; }
.analysis-section-title { margin:0 3px 15px; }
.analysis-section-title h3 { font-size:19px; }
.analysis-section-title p { margin:8px 0 0; color:#8a8d97; font-size:10px; line-height:1.6; }
.shaman-voice-note { display:grid; grid-template-columns:38px 1fr; align-items:center; gap:12px; margin:0 0 14px; padding:13px 14px; border:1px solid #e5e1f3; border-radius:15px; background:linear-gradient(135deg,#faf8ff,#fff9fb); }
.shaman-voice-note > span { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#5f56ab; font-size:13px; font-weight:800; box-shadow:0 5px 12px rgba(95,86,171,.2); }
.shaman-voice-note p { margin:0; color:#686a75; font-size:10px; line-height:1.65; word-break:keep-all; }
.shaman-voice-note b { color:#353743; }
.analysis-category-list { display:grid; gap:8px; }
.analysis-category-group { margin:22px 4px 3px; color:#7771af; font-size:10px; font-weight:800; letter-spacing:.04em; }
.analysis-category-group:first-child { margin-top:2px; }
.analysis-category { overflow:hidden; border:1px solid #e9eaf0; border-radius:16px; background:#fff; box-shadow:0 4px 14px rgba(38,39,60,.025); }
.analysis-category summary { min-height:76px; display:grid; grid-template-columns:38px minmax(0,1fr) 22px; align-items:center; gap:12px; padding:14px 14px 14px 15px; list-style:none; cursor:pointer; }
.analysis-category summary::-webkit-details-marker { display:none; }
.analysis-category summary:focus-visible { outline:2px solid #7168c2; outline-offset:-3px; }
.analysis-category-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; color:#ef5f91; background:#fff0f5; font-size:17px; font-weight:700; }
.analysis-category-copy { min-width:0; display:grid; gap:5px; }
.analysis-category-copy small { color:#999ca6; font-size:8px; font-weight:700; letter-spacing:.03em; }
.analysis-category-copy strong { color:#20232e; font-size:12px; font-weight:700; line-height:1.5; letter-spacing:-.035em; word-break:keep-all; }
.analysis-category-chevron { color:#9b9da6; text-align:center; font-size:17px; transition:transform .2s; }
.analysis-category[open] { border-color:#ddd9f4; box-shadow:0 8px 24px rgba(83,74,157,.07); }
.analysis-category[open] summary { background:#fbfaff; }
.analysis-category[open] .analysis-category-chevron { transform:rotate(180deg); }
.analysis-category-body { position:relative; padding:18px 18px 20px 65px; border-top:1px solid #eeeef3; background:#fff; }
.analysis-category-body::before { content:''; width:2px; position:absolute; top:21px; bottom:23px; left:32px; border-radius:2px; background:linear-gradient(#746bc3,#ef8aab); opacity:.55; }
.analysis-category-body p { margin:0 0 14px; color:#5f626d; font-size:11px; line-height:1.85; letter-spacing:-.015em; word-break:keep-all; }
.analysis-category-body p:last-child { margin-bottom:0; color:#363945; font-weight:600; }
.analysis-closing { margin-top:20px; padding:24px 21px; overflow:hidden; position:relative; border-radius:19px; color:#fff; background:radial-gradient(circle at 100% 0,rgba(255,255,255,.16),transparent 32%),linear-gradient(140deg,#292b3d,#494b68); }
.analysis-closing::after { content:'✦'; position:absolute; right:18px; bottom:-21px; color:rgba(255,255,255,.055); font-size:100px; }
.analysis-closing > * { position:relative; z-index:1; }
.analysis-closing small { color:#c8c3ef; font-size:8px; font-weight:800; letter-spacing:.13em; }
.analysis-closing h3 { margin:8px 0 12px; font-size:17px; letter-spacing:-.04em; }
.analysis-closing p { margin:0; color:rgba(255,255,255,.72); font-size:11px; line-height:1.85; word-break:keep-all; }
.analysis-luck-section { padding-top:30px; }
.luck-now-card { position:relative; overflow:hidden; padding:23px 21px; border-radius:20px; color:#fff; background:radial-gradient(circle at 92% 8%,rgba(255,255,255,.18),transparent 27%),linear-gradient(145deg,#282a3d,#524d85 58%,#7469bc); box-shadow:0 12px 27px rgba(59,54,108,.16); }
.luck-now-card::after { content:'運'; position:absolute; right:-3px; top:-27px; color:rgba(255,255,255,.045); font-size:126px; font-weight:900; }
.luck-now-card > * { position:relative; z-index:1; }
.luck-now-card > small { color:#cfc9ff; font-size:8px; font-weight:800; letter-spacing:.14em; }
.luck-now-card > h3 { max-width:290px; margin:9px 0 10px; font-size:21px; line-height:1.42; letter-spacing:-.05em; }
.luck-now-card > p { margin:0; color:rgba(255,255,255,.72); font-size:11px; line-height:1.82; word-break:keep-all; }
.luck-now-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:18px; }
.luck-now-grid > div { min-width:0; padding:12px; border:1px solid rgba(255,255,255,.11); border-radius:13px; background:rgba(255,255,255,.08); backdrop-filter:blur(7px); }
.luck-now-grid small { display:block; margin-bottom:7px; color:#c9c4ef; font-size:8px; }
.luck-now-grid b { display:block; color:#fff; font-size:10px; font-weight:600; line-height:1.6; word-break:keep-all; }
.luck-basis-card { margin-top:13px; }
.luck-basis-grid { display:grid; gap:8px; }
.luck-basis-grid > div { display:grid; grid-template-columns:73px 70px minmax(0,1fr); align-items:center; gap:8px; min-height:53px; padding:10px 12px; border-radius:13px; background:#f8f8fa; }
.luck-basis-grid small { color:#9a9ca5; font-size:8px; font-weight:700; }
.luck-basis-grid b { color:#56508e; font-size:11px; }
.luck-basis-grid span { color:#7f828c; font-size:9px; line-height:1.5; word-break:keep-all; }
.luck-section-head { display:flex; align-items:flex-end; justify-content:space-between; margin:27px 4px 11px; }
.luck-section-head small { color:#8c87bd; font-size:8px; font-weight:800; letter-spacing:.11em; }
.luck-section-head h3 { margin:4px 0 0; color:#22242e; font-size:16px; letter-spacing:-.04em; }
.luck-section-head > span { color:#a1a3ab; font-size:8px; }
.luck-decade-track { display:flex; gap:9px; margin-right:-16px; margin-left:-16px; padding:2px 16px 14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.luck-decade-track::-webkit-scrollbar { display:none; }
.luck-decade-card { min-width:122px; scroll-snap-align:center; display:grid; justify-items:center; gap:5px; padding:16px 10px 14px; border:1px solid #e7e7ed; border-radius:16px; background:#fff; text-align:center; box-shadow:0 4px 14px rgba(40,40,65,.025); }
.luck-decade-card small { min-height:17px; padding:4px 7px; border-radius:99px; color:#9699a3; background:#f3f3f6; font-size:7px; font-weight:700; }
.luck-decade-card > b { margin-top:3px; color:#292b35; font-size:20px; letter-spacing:.06em; }
.luck-decade-card strong { color:#5c5f69; font-size:9px; }
.luck-decade-card p { margin:1px 0 0; color:#a1a3ab; font-size:8px; }
.luck-decade-card.current { min-width:132px; color:#fff; border-color:#645bb3; background:linear-gradient(145deg,#554ca1,#7167bd); box-shadow:0 9px 20px rgba(89,80,167,.2); }
.luck-decade-card.current small { color:#fff; background:rgba(255,255,255,.15); }
.luck-decade-card.current > b,.luck-decade-card.current strong { color:#fff; }
.luck-decade-card.current p { color:rgba(255,255,255,.62); }
.luck-year-list { display:grid; gap:8px; }
.luck-year-card { padding:15px 15px 14px; border:1px solid #e8e8ee; border-radius:16px; background:#fff; }
.luck-year-card > div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.luck-year-card > div span { display:flex; align-items:baseline; gap:8px; }
.luck-year-card > div b { color:#30323c; font-size:15px; }
.luck-year-card > div small { color:#a0a2aa; font-size:8px; }
.luck-year-card em { padding:5px 8px; border-radius:99px; color:#7b76a5; background:#f2f1f8; font-size:8px; font-style:normal; font-weight:700; }
.luck-year-card > strong { display:block; margin:10px 0 5px; color:#353741; font-size:11px; letter-spacing:-.025em; }
.luck-year-card > p { margin:0; color:#83858e; font-size:9px; line-height:1.65; word-break:keep-all; }
.luck-year-card.current { border-color:#d9d4f4; background:linear-gradient(145deg,#faf9ff,#fff); box-shadow:0 7px 18px rgba(89,80,167,.07); }
.luck-year-card.current em { color:#fff; background:#675eb5; }
.luck-closing { display:grid; grid-template-columns:37px 1fr; align-items:center; gap:12px; margin-top:18px; padding:15px; border-radius:15px; background:#f0eff9; }
.luck-closing span { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; color:#fff; background:#6158ad; font-size:13px; font-weight:800; }
.luck-closing p { margin:0; color:#61636e; font-size:10px; line-height:1.7; word-break:keep-all; }
.luck-guide { margin:12px 5px 0; color:#a0a2aa; text-align:center; font-size:8px; line-height:1.6; word-break:keep-all; }
.insight-card { display:grid; grid-template-columns:42px 1fr; gap:13px; margin-bottom:10px; padding:18px; border:1px solid #ececf2; border-radius:17px; background:#fff; }
.insight-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; font-size:10px; font-weight:800; }
.insight-icon.purple { color:#665caf; background:#efedfb; }
.insight-icon.blue { color:#4178aa; background:#eaf3fa; }
.insight-icon.coral { color:#bd625c; background:#fbedeb; }
.insight-card div > small { color:#999ca5; font-size:9px; }
.insight-card h4 { margin:5px 0 8px; color:#252731; font-size:14px; letter-spacing:-.035em; }
.insight-card p,.balance-tip p { margin:0; color:#6f727d; font-size:11px; line-height:1.75; word-break:keep-all; }
.balance-tip { display:grid; grid-template-columns:34px 1fr; gap:11px; margin-top:13px; padding:18px; border-radius:17px; color:#fff; background:linear-gradient(135deg,#272b3d,#3c4056); }
.balance-tip > span { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:#ddd7ff; background:rgba(255,255,255,.1); font-size:17px; }
.balance-tip b { font-size:12px; }
.balance-tip p { margin-top:7px; color:rgba(255,255,255,.64); }
.analysis-disclaimer { margin:22px 7px 0; color:#a2a4ac; text-align:center; font-size:8px; line-height:1.65; }
.birth-sheet input[type=time] { width:100%; height:44px; padding:0 12px; border:1px solid #dedede; border-radius:6px; color:#222; background:#fff; outline:none; font:inherit; }
.birth-sheet input[type=time]:focus { border-color:#555; }
.exact-time-field em { margin-left:4px; color:#665caf; font-size:8px; font-style:normal; }
.leap-month-option { min-height:28px; display:flex; align-items:center; gap:6px; padding:5px 3px 0; color:#666; }
.leap-month-option[hidden] { display:none; }
.leap-month-option input { accent-color:#5e58a6; }
.leap-month-option span { margin:0!important; font-size:9px!important; }
.is-hidden { display:none!important; }

/* Rounded floating bottom navigation */
:root {
  --bottom-nav-height:62px;
  --bottom-nav-gap:max(8px, env(safe-area-inset-bottom));
  --bottom-nav-offset:calc(var(--bottom-nav-height) + var(--bottom-nav-gap));
}
.bottom-nav {
  width:calc(100% - 20px);
  max-width:calc(var(--app-width) - 20px);
  height:var(--bottom-nav-height);
  bottom:var(--bottom-nav-gap);
  padding:5px 6px;
  overflow:hidden;
  border:1px solid rgba(24,24,31,.08);
  border-radius:22px;
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 30px rgba(29,31,42,.14),0 2px 8px rgba(29,31,42,.06);
}
main { padding-bottom:calc(var(--bottom-nav-offset) + 8px); }
.sheet-backdrop { inset:60px 0 0; }
.birth-sheet,.login-sheet,.result-sheet,.archive-sheet {
  bottom:var(--bottom-nav-offset);
  max-height:calc(100dvh - 60px - var(--bottom-nav-offset));
}
.archive-sheet {
  bottom:0;
  max-height:calc(100dvh - 60px);
  padding-bottom:calc(var(--bottom-nav-offset) + 24px);
}
.birth-sheet:not(.open),
.login-sheet:not(.open),
.result-sheet:not(.open),
.archive-sheet:not(.open) {
  transform:translate(-50%, calc(100% + var(--bottom-nav-offset) + 48px));
  pointer-events:none;
}
.analysis-view { bottom:0; }
.analysis-scroll { padding-bottom:calc(var(--bottom-nav-offset) + 36px); }
.toast { bottom:calc(var(--bottom-nav-offset) + 14px); }
@media (max-width:448px) { body { background:#fff; }.app-shell { box-shadow:none; }.hero-carousel { padding-left:8px; padding-right:8px; } }
@media (max-width:370px) { .hero-track { height:250px; }.banner-copy h2 { font-size:27px; }.poster { flex-basis:137px; }.product-card { flex-basis:132px; }.section-title-row h2 { font-size:17px; }.analysis-tabs button { font-size:11px; }.luck-now-grid { grid-template-columns:1fr; }.luck-basis-grid > div { grid-template-columns:64px 62px minmax(0,1fr); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }

/* Modern ritual theme: paper, ink, lacquer and aged brass */
:root {
  --ritual-ink:#22211d;
  --ritual-ink-soft:#3b3831;
  --ritual-hanji:#f3eddf;
  --ritual-paper:#fbf7ee;
  --ritual-lacquer:#6d3029;
  --ritual-lacquer-soft:#eadbd2;
  --ritual-brass:#9a7b45;
  --ritual-brass-text:#6f562e;
  --ritual-line:#d8cdb8;
  --ritual-muted:#655f55;
}

body { background:#d9d3c7; color:var(--ritual-ink); }
.app-shell { background:var(--ritual-paper); box-shadow:0 0 24px rgba(34,33,29,.08); }
.top-header { background:rgba(251,247,238,.97); border-color:var(--ritual-line); backdrop-filter:none; }
.logo { color:var(--ritual-ink); }
.logo-seal { background:var(--ritual-lacquer); box-shadow:none; }
.icon-button span { background:var(--ritual-ink); }
.content-section { background:var(--ritual-paper); }
.section-title-row h2 { color:var(--ritual-ink); }
.section-title-row p,.text-link { color:var(--ritual-muted); }
.section-divider { background:#e9e1d2; border-color:var(--ritual-line); }

.hero-banner { border:1px solid rgba(214,199,174,.22); border-radius:8px; box-shadow:none; }
.banner-night { background:#202622; }
.banner-red { background:#632d29; }
.banner-blue { background:#29383c; }
.hero-banner::after { content:''; width:1px; position:absolute; top:25px; right:24px; bottom:25px; background:rgba(185,154,97,.42); }
.stars,.moon,.portrait,.petals,.double-moon,.compass { display:none; }
.banner-copy { max-width:330px; }
.banner-copy small { color:#c4ab79; }
.banner-copy h2 { max-width:310px; text-shadow:none; }
.banner-copy p { color:rgba(251,247,238,.7); }
.banner-copy button { border-color:rgba(196,171,121,.55); border-radius:2px; background:transparent; backdrop-filter:none; }
.rank-badge { top:0; right:18px; width:auto; min-width:40px; min-height:0; padding:7px 8px; color:#e8d7b4; background:rgba(16,17,15,.5)!important; clip-path:none; border-bottom:1px solid rgba(196,171,121,.55); }

.poster { height:164px; border:1px solid rgba(255,255,255,.13); border-radius:6px; box-shadow:none; }
.poster::after,.product-art::before,.product-art::after { display:none; }
.poster-green { background:#40584a; }
.poster-pink { background:#713a3d; }
.poster-purple { background:#4a454e; }
.poster-orange { background:#765038; }
.poster-label,.poster-label.hot,.poster-label.new { color:#f4ead8; background:rgba(26,25,22,.32); border-radius:2px; }
.poster-symbol { display:none; }
.poster strong { margin-top:49px; }
.brand-proof { border:1px solid #3f4037; border-radius:6px; background:#272b26; }
.brand-proof::before,.guide-symbol { display:none; }
.proof-kicker,.proof-numbers b { color:#c4a76e; }
.brand-proof h2 strong { color:#e7d3a8; }
.product-art { height:136px; border:1px solid rgba(34,33,29,.14); border-radius:4px; box-shadow:none; }
.art-love { background:#70363a; }
.art-mind { background:#394348; }
.art-flower { background:#674753; }
.art-year { background:#344f51; }
.art-career { background:#555644; }
.art-money { background:#6b5037; }
.product-art span { display:none; }
.product-art i { margin:0; color:#f2e8d5; font-size:11px; letter-spacing:.04em; }
.guide-banner { border:1px solid #465044; border-radius:6px; background:#303b33; }
.guide-banner small { color:#c7ad78; }
footer { color:#777064; background:#e9e1d4; }

.bottom-nav { border-color:rgba(111,86,46,.24); background:rgba(251,247,238,.97); box-shadow:0 8px 24px rgba(50,43,33,.12); backdrop-filter:none; }
.bottom-nav a,.bottom-nav button { color:#8a8377; }
.bottom-nav .active,.bottom-nav .active .nav-icon { color:var(--ritual-lacquer); }

.birth-sheet,.login-sheet,.result-sheet,.archive-sheet,.side-menu { color:var(--ritual-ink); background:var(--ritual-paper); }
.sheet-handle { background:#b8ab96; }
.sheet-head small { color:var(--ritual-lacquer); }
.sheet-head h2 { color:var(--ritual-ink); }
.birth-sheet input[type=text],.birth-sheet input[type=date],.birth-sheet input[type=time],.birth-sheet select,.email-login { border-color:var(--ritual-line); color:var(--ritual-ink); background:#fffdf8; }
.birth-sheet input:focus,.birth-sheet select:focus,.birth-sheet input[type=time]:focus { border-color:var(--ritual-lacquer); }
.choice-row { background:#e8dfd0; }
.choice-row input:checked + span { background:var(--ritual-paper); box-shadow:none; }
.submit-button,.result-confirm,.archive-create { background:var(--ritual-lacquer); }
.login-benefits,.result-notice,.login-box { background:#eee6d8; }
.login-benefits span { color:var(--ritual-lacquer); }
.saved-saju-card { border-color:var(--ritual-line); background:var(--ritual-paper); }
.archive-select,.chart-edit,.chart-delete { background:var(--ritual-paper); }
.saved-avatar { color:var(--ritual-lacquer); background:var(--ritual-lacquer-soft); }
.archive-add { border-color:var(--ritual-line); color:var(--ritual-muted); background:#f7f1e6; }

.analysis-view {
  --ink:var(--ritual-ink);
  --ink-soft:var(--ritual-ink-soft);
  --hanji:var(--ritual-hanji);
  --paper:var(--ritual-paper);
  --lacquer:var(--ritual-lacquer);
  --lacquer-soft:var(--ritual-lacquer-soft);
  --brass:var(--ritual-brass);
  --brass-text:var(--ritual-brass-text);
  --line:var(--ritual-line);
  --muted:var(--ritual-muted);
  --focus:#8b3b32;
  color:var(--ink);
  background:var(--hanji);
}
.analysis-header { background:rgba(243,237,223,.98); border-color:var(--line); backdrop-filter:none; }
.analysis-header button { width:44px; height:44px; border-radius:2px; color:var(--ink); }
.analysis-header b { color:var(--ink); font-weight:700; }
.analysis-header small { color:var(--muted); }
.analysis-saved { border:1px solid var(--line); border-radius:2px; color:var(--lacquer); background:transparent; }
.analysis-saved svg { fill:var(--lacquer); }
.analysis-tabs { background:var(--hanji); border-color:var(--line); }
.analysis-tabs button { color:#776f63; font-weight:500; }
.analysis-tabs button::after { right:20%; left:20%; border-radius:0; background:var(--lacquer); }
.analysis-tabs button.active { color:var(--lacquer); font-weight:700; }
.analysis-header button:focus-visible,.analysis-tabs button:focus-visible,.analysis-category summary:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.analysis-scroll { padding-right:16px; padding-left:16px; }

.analysis-hero { min-height:218px; padding:29px 24px; border:1px solid #4b463a; border-left:3px solid var(--brass); border-radius:2px; color:var(--hanji); background:var(--ink); box-shadow:none; }
.analysis-hero::before,.analysis-hero::after { display:none; }
.analysis-hero > small { color:#c4a86f; font-size:10px; letter-spacing:.02em; }
.analysis-hero > small span { color:#eadab9; }
.analysis-hero h2 { max-width:310px; margin:16px 0 12px; color:#fbf3e2; font-size:28px; font-weight:700; line-height:1.38; letter-spacing:-.025em; }
.analysis-hero p { color:rgba(251,243,226,.76); font-size:13px; line-height:1.82; }

.analysis-card { margin-top:12px; padding:24px 18px; border:1px solid var(--line); border-radius:2px; background:var(--paper); box-shadow:none; }
.analysis-card-head { margin-bottom:19px; }
.analysis-card-head small,.analysis-section-title small { color:var(--brass-text); font-size:10px; font-weight:700; letter-spacing:.03em; }
.analysis-card-head h3,.analysis-section-title h3 { margin-top:6px; color:var(--ink); font-size:19px; font-weight:700; letter-spacing:-.025em; }
.analysis-card-head > span { color:var(--muted); font-size:10px; }

.analysis-pillar-grid { gap:0; border:1px solid var(--line); }
.analysis-pillar-grid div { min-height:88px; gap:7px; padding:12px 4px; border-right:1px solid var(--line); border-radius:0; background:transparent; }
.analysis-pillar-grid div:last-child { border-right:0; }
.analysis-pillar-grid div.day-pillar { color:var(--ink); border-top:3px solid var(--lacquer); background:#efe4d1; box-shadow:none; }
.analysis-pillar-grid small,.analysis-pillar-grid .day-pillar small { color:var(--muted); font-size:10px; }
.analysis-pillar-grid b { font-size:21px; font-weight:700; }
.analysis-pillar-grid span,.analysis-pillar-grid .day-pillar span { color:#777064; font-size:11px; }
.pillar-reading-guide { color:#837b6e; font-size:9px; }

.balance-overview { grid-template-columns:1fr; gap:14px; padding-bottom:20px; }
.balance-ring { width:auto; height:auto; display:block; padding-bottom:15px; border-bottom:1px solid var(--line); border-radius:0; background:none; }
.balance-ring::before { display:none; }
.balance-ring div { display:flex; align-items:baseline; justify-content:flex-start; gap:9px; }
.balance-ring b { color:var(--ink); font-size:34px; }
.balance-ring small { color:var(--muted); font-size:10px; }
.balance-copy { gap:0; }
.balance-copy span { padding:10px 0; border-color:var(--line); color:var(--muted); font-size:11px; }
.balance-copy b { color:var(--ink); font-size:12px; }
.element-bars { gap:14px; }
.element-bars > div { grid-template-columns:24px 1fr 38px; }
.element-bars span { color:var(--ink-soft); font-size:11px; }
.element-bars i { height:5px; border-radius:0; background:#dfd5c3; }
.element-bars i b { border-radius:0!important; }
.element-bars [data-element="wood"] i b { background:#4b624d!important; }
.element-bars [data-element="fire"] i b { background:#8b3b32!important; }
.element-bars [data-element="earth"] i b { background:#9a7b45!important; }
.element-bars [data-element="metal"] i b { background:#77746b!important; }
.element-bars [data-element="water"] i b { background:#3e555b!important; }
.element-bars em { color:var(--muted); font-size:10px; }

.phase-two-evidence { gap:0; border:1px solid var(--line); border-bottom:0; }
.phase-two-evidence > div { gap:5px 8px; padding:14px 12px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.phase-two-evidence > div:nth-child(2) { border-right:0; }
.phase-two-evidence .strength-evidence { border-right:0; background:transparent; }
.phase-two-evidence small { color:var(--brass-text); font-size:9px; letter-spacing:.02em; }
.phase-two-evidence b { color:var(--ink); font-size:12px; }
.phase-two-evidence span { color:var(--lacquer); font-size:10px; }

.structure-summary { gap:0; border-top:1px solid var(--line); }
.structure-summary > div { min-height:62px; padding:13px 2px; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.structure-summary small { color:var(--muted); font-size:10px; }
.structure-summary b { color:var(--ink); font-size:12px; }
.structure-summary span { color:var(--muted); font-size:10px; }
.position-ten-gods,.relation-evidence { border-color:var(--line); }
.position-ten-gods > small,.relation-evidence > small { color:var(--brass-text); font-size:10px; letter-spacing:.02em; }
.position-ten-gods > div { gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.position-ten-gods > div > div { gap:5px; padding:12px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.position-ten-gods small,.position-ten-gods span { color:var(--muted); font-size:9px; }
.position-ten-gods b { color:var(--ink); font-size:11px; }
.relation-evidence > div { gap:8px 13px; }
.relation-evidence span { padding:5px 1px; border:0; border-bottom:1px solid var(--brass); border-radius:0; color:var(--ink-soft); background:transparent; font-size:9px; }
.structure-guide { color:#7e776c; font-size:9px; }

.analysis-insight-section,.analysis-luck-section { padding-top:38px; }
.analysis-section-title { margin:0 2px 19px; }
.analysis-section-title::after { content:''; display:block; width:40px; height:1px; margin-top:14px; background:var(--brass); }
.analysis-section-title h3 { font-size:21px; }
.analysis-section-title p { color:var(--muted); font-size:11px; }
.shaman-voice-note { display:block; margin:0 0 18px; padding:17px 16px; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-left:3px solid var(--lacquer); border-radius:0; background:rgba(251,247,238,.52); }
.shaman-voice-note > span { display:none; }
.shaman-voice-note p { color:var(--muted); font-size:12px; line-height:1.75; }
.shaman-voice-note b { color:var(--ink); }

.analysis-category-list { gap:0; border-bottom:1px solid var(--line); }
.analysis-category-group,.analysis-category-icon,.analysis-category-copy small { display:none; }
.analysis-category { overflow:hidden; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; box-shadow:none; }
.analysis-category summary { min-height:76px; grid-template-columns:minmax(0,1fr) 24px; gap:14px; padding:17px 8px 17px 12px; }
.analysis-category summary:focus-visible { outline-color:var(--focus); outline-offset:-2px; }
.analysis-category-copy { display:block; }
.analysis-category-copy strong { color:var(--ink); font-size:14px; font-weight:700; line-height:1.55; letter-spacing:-.025em; }
.analysis-category-chevron { color:#8c806d; }
.analysis-category[open] { border-color:var(--line); border-left:2px solid var(--lacquer); box-shadow:none; }
.analysis-category[open] summary { background:#eee5d6; }
.analysis-category-body { margin-left:12px; padding:19px 15px 24px 18px; border-top:1px solid var(--line); border-left:1px solid var(--brass); background:transparent; }
.analysis-category-body::before { display:none; }
.analysis-category-body p { margin-bottom:17px; color:#524d45; font-size:13px; line-height:1.82; letter-spacing:-.01em; }
.analysis-category-body p:last-child { color:var(--ink-soft); font-weight:600; }

.analysis-closing { margin-top:22px; padding:27px 22px; border-top:2px solid var(--brass); border-radius:2px; color:#f8efde; background:var(--ink); }
.analysis-closing::after { display:none; }
.analysis-closing small { color:#c4a86f; font-size:9px; letter-spacing:.04em; }
.analysis-closing h3 { color:#fbf3e2; font-size:18px; }
.analysis-closing p { color:rgba(251,243,226,.76); font-size:13px; line-height:1.82; }

.luck-now-card { padding:26px 21px; border:1px solid #7d4b42; border-top:2px solid #b2945c; border-radius:2px; color:#fbf3e2; background:#5f2b26; box-shadow:none; }
.luck-now-card::after { display:none; }
.luck-now-card > small { color:#d4ba83; font-size:9px; letter-spacing:.05em; }
.luck-now-card > h3 { color:#fff8e9; font-size:22px; letter-spacing:-.025em; }
.luck-now-card > p { color:rgba(255,248,233,.76); font-size:12px; }
.luck-now-grid { gap:0; border-top:1px solid rgba(229,205,162,.35); }
.luck-now-grid > div { padding:14px 12px 3px 0; border:0; border-radius:0; background:transparent; backdrop-filter:none; }
.luck-now-grid > div + div { padding-left:14px; border-left:1px solid rgba(229,205,162,.35); }
.luck-now-grid small { color:#d6c197; font-size:9px; }
.luck-now-grid b { color:#fff8e9; font-size:11px; }
.luck-basis-grid { gap:0; border-top:1px solid var(--line); }
.luck-basis-grid > div { min-height:61px; padding:13px 2px; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.luck-basis-grid small { color:var(--muted); font-size:9px; }
.luck-basis-grid b { color:var(--lacquer); font-size:12px; }
.luck-basis-grid span { color:var(--muted); font-size:10px; }
.luck-section-head { margin-top:32px; }
.luck-section-head small { color:var(--brass-text); font-size:9px; letter-spacing:.03em; }
.luck-section-head h3 { color:var(--ink); font-size:18px; }
.luck-section-head > span { color:var(--muted); font-size:9px; }
.luck-decade-track { scroll-padding-inline:16px; -webkit-overflow-scrolling:touch; }
.luck-decade-card { min-width:122px; gap:6px; padding:17px 10px; border-color:var(--line); border-radius:2px; background:var(--paper); box-shadow:none; }
.luck-decade-card small { padding:3px 0; border-bottom:1px solid var(--brass); border-radius:0; color:var(--muted); background:transparent; font-size:8px; }
.luck-decade-card > b { color:var(--ink); }
.luck-decade-card strong { color:var(--ink-soft); font-size:10px; }
.luck-decade-card p { color:var(--muted); font-size:9px; }
.luck-decade-card.current { min-width:132px; color:var(--ink); border:1px solid var(--lacquer); border-top:3px solid var(--lacquer); background:#eee4d3; box-shadow:none; }
.luck-decade-card.current small { color:var(--lacquer); background:transparent; }
.luck-decade-card.current > b,.luck-decade-card.current strong { color:var(--ink); }
.luck-decade-card.current p { color:var(--muted); }
.luck-year-list { gap:0; border-top:1px solid var(--line); }
.luck-year-card { padding:17px 10px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.luck-year-card > div b { color:var(--ink); font-size:16px; }
.luck-year-card > div small { color:var(--muted); font-size:9px; }
.luck-year-card em { padding:2px 0; border-bottom:1px solid var(--brass); border-radius:0; color:var(--brass-text); background:transparent; font-size:9px; }
.luck-year-card > strong { color:var(--ink); font-size:12px; }
.luck-year-card > p { color:var(--muted); font-size:10px; line-height:1.72; }
.luck-year-card.current { border-left:3px solid var(--lacquer); border-bottom-color:var(--line); background:#eee5d6; box-shadow:none; }
.luck-year-card.current em { color:var(--lacquer); background:transparent; }
.luck-closing { display:block; margin-top:20px; padding:17px 16px; border:0; border-left:3px solid var(--lacquer); border-radius:0; background:#ebe2d4; }
.luck-closing span { display:none; }
.luck-closing p { color:var(--ink-soft); font-size:11px; line-height:1.75; }
.luck-guide { color:#777064; font-size:9px; }
.analysis-disclaimer { color:#777064; font-size:9px; }

@media (max-width:370px) {
  .analysis-hero h2 { font-size:25px; }
  .analysis-category-copy strong { font-size:13px; }
  .analysis-category-body p { font-size:12px; }
}

/* Tight-inspired mobile editorial layer: neutral canvas + one vivid signature color */
:root {
  --app-width:420px;
  --ritual-ink:#18181b;
  --ritual-ink-soft:#3f3f46;
  --ritual-hanji:#fafafa;
  --ritual-paper:#fff;
  --ritual-lacquer:#ff1f66;
  --ritual-lacquer-soft:#fff0f5;
  --ritual-brass:#ff1f66;
  --ritual-brass-text:#d91250;
  --ritual-line:#e4e4e7;
  --ritual-muted:#71717a;
}

body { background:#f4f4f5; }
.app-shell,.content-section { background:#fff; }
.top-header { background:rgba(255,255,255,.98); border-color:#e4e4e7; }
.logo-seal { background:#18181b; }
.section-divider { background:#f4f4f5; border-color:#e4e4e7; }

.hero-banner { border:0; border-radius:20px; box-shadow:0 10px 30px rgba(24,24,27,.12); }
.banner-night { background:#18181b; }
.banner-red { background:#ff1f66; }
.banner-blue { background:#27272a; }
.hero-banner::after { width:46px; height:4px; top:auto; right:24px; bottom:25px; background:rgba(255,255,255,.72); }
.banner-copy small { color:rgba(255,255,255,.72); }
.banner-copy button { border-color:rgba(255,255,255,.45); border-radius:999px; }
.rank-badge,.banner-blue .rank-badge { padding:7px 9px; color:#fff; border:0; border-radius:0 0 8px 8px; background:rgba(0,0,0,.3)!important; }
.poster { border:0; border-radius:16px; box-shadow:none; }
.poster-green { background:#1f766d; }
.poster-pink { background:#ff1f66; }
.poster-purple { background:#6d4ccf; }
.poster-orange { background:#e86a33; }
.poster-label,.poster-label.hot,.poster-label.new { color:#18181b; background:#fff; border-radius:999px; }
.brand-proof { border:0; border-radius:20px; background:#18181b; }
.proof-kicker,.proof-numbers b { color:#ff6f9c; }
.brand-proof h2 strong { color:#fff; }
.product-art { border:0; border-radius:16px; }
.art-love { background:#ff1f66; }
.art-mind { background:#27272a; }
.art-flower { background:#8b5cf6; }
.art-year { background:#0f766e; }
.art-career { background:#52525b; }
.art-money { background:#a16207; }
.guide-banner { border:0; border-radius:18px; background:#18181b; }
.guide-banner small { color:#ff6f9c; }
footer { background:#f4f4f5; }

.bottom-nav { border-color:#e4e4e7; background:rgba(255,255,255,.98); box-shadow:0 8px 28px rgba(24,24,27,.12); }
.bottom-nav a,.bottom-nav button { color:#a1a1aa; }
.bottom-nav .active,.bottom-nav .active .nav-icon { color:#ff1f66; }
.birth-sheet,.login-sheet,.result-sheet,.archive-sheet,.side-menu { background:#fff; }
.sheet-head small,.login-benefits span { color:#ff1f66; }
.submit-button,.result-confirm,.archive-create { background:#18181b; }
.login-benefits,.result-notice,.login-box { background:#f4f4f5; }
.choice-row { background:#f4f4f5; }
.saved-saju-card { border-color:#e4e4e7; background:#fff; }
.archive-select,.chart-edit,.chart-delete { background:#fff; }
.saved-avatar { color:#d91250; background:#fff0f5; }
.archive-add { border-color:#e4e4e7; background:#fafafa; }

.analysis-view {
  --ink:#18181b;
  --ink-soft:#3f3f46;
  --hanji:#fafafa;
  --paper:#fff;
  --lacquer:#ff1f66;
  --lacquer-soft:#fff0f5;
  --brass:#ff1f66;
  --brass-text:#d91250;
  --line:#e4e4e7;
  --muted:#71717a;
  --focus:#ff1f66;
  background:#fafafa;
}
.analysis-header,.analysis-tabs { background:#fff; border-color:#e4e4e7; }
.analysis-header button { border-radius:10px; }
.analysis-saved { border-color:#e4e4e7; border-radius:10px; color:#ff1f66; }
.analysis-saved svg { fill:#ff1f66; }
.analysis-tabs button.active { color:#ff1f66; }
.analysis-tabs button::after { height:3px; border-radius:999px 999px 0 0; background:#ff1f66; }

.analysis-hero { min-height:220px; padding:30px 24px; border:0; border-radius:20px; background:#18181b; box-shadow:none; }
.analysis-hero::before { content:''; width:48px; height:4px; display:block; position:absolute; top:0; left:24px; border:0; border-radius:0 0 4px 4px; background:#ff1f66; }
.analysis-hero::after { display:none; }
.analysis-hero > small,.analysis-hero > small span { color:#ff6f9c; }
.analysis-hero h2 { color:#fff; }
.analysis-hero p { color:#d4d4d8; }

.analysis-card { border-color:#e4e4e7; border-radius:16px; background:#fff; }
.analysis-card-head small,.analysis-section-title small { color:#d91250; }
.analysis-card-head > span { color:#71717a; }
.analysis-pillar-grid { overflow:hidden; border-color:#e4e4e7; border-radius:12px; }
.analysis-pillar-grid div { border-color:#e4e4e7; }
.analysis-pillar-grid div.day-pillar { color:#18181b; border-top-color:#ff1f66; background:#fff0f5; }
.analysis-pillar-grid small,.analysis-pillar-grid .day-pillar small,.analysis-pillar-grid span,.analysis-pillar-grid .day-pillar span { color:#71717a; }
.balance-ring,.balance-copy span { border-color:#e4e4e7; }
.balance-ring b { color:#18181b; }
.element-bars i { background:#e4e4e7; }
.phase-two-evidence { overflow:hidden; border-color:#e4e4e7; border-radius:12px; }
.phase-two-evidence > div { border-color:#e4e4e7; }
.phase-two-evidence small { color:#d91250; }
.phase-two-evidence span { color:#ff1f66; }
.structure-summary,.structure-summary > div,.position-ten-gods,.relation-evidence,.position-ten-gods > div,.position-ten-gods > div > div { border-color:#e4e4e7; }
.position-ten-gods > div { overflow:hidden; border-radius:12px; }
.relation-evidence span { padding:5px 8px; border:0; border-radius:6px; color:#d91250; background:#fff0f5; }
.analysis-section-title::after { width:42px; height:3px; border-radius:999px; background:#ff1f66; }
.shaman-voice-note { padding:17px 16px; border:0; border-left:3px solid #ff1f66; border-radius:12px; background:#fff0f5; }

.analysis-category-list { gap:8px; border:0; }
.analysis-category { border:1px solid #e4e4e7; border-radius:12px; background:#fff; }
.analysis-category summary { padding-right:14px; padding-left:16px; }
.analysis-category[open] { border:1px solid #ff9abd; box-shadow:0 7px 20px rgba(255,31,102,.07); }
.analysis-category[open] summary { background:#fff5f8; }
.analysis-category-body { margin:0; padding:19px 18px 22px; border-top:1px solid #f0d9e1; border-left:0; background:#fff; }
.analysis-category-body p { color:#52525b; }
.analysis-category-body p:last-child { color:#27272a; }

.analysis-closing { border:0; border-top:4px solid #ff1f66; border-radius:16px; background:#18181b; }
.analysis-closing small { color:#ff6f9c; }
.analysis-closing h3 { color:#fff; }
.analysis-closing p { color:#d4d4d8; }
.luck-now-card { border:0; border-left:4px solid #ff1f66; border-radius:18px; background:#18181b; }
.luck-now-card > small { color:#ff6f9c; }
.luck-now-card > h3 { color:#fff; }
.luck-now-card > p { color:#d4d4d8; }
.luck-now-grid { border-color:#3f3f46; }
.luck-now-grid > div + div { border-color:#3f3f46; }
.luck-now-grid small { color:#a1a1aa; }
.luck-now-grid b { color:#fff; }
.luck-basis-grid,.luck-basis-grid > div { border-color:#e4e4e7; }
.luck-basis-grid b { color:#d91250; }
.luck-section-head small { color:#d91250; }
.luck-decade-card { border-color:#e4e4e7; border-radius:14px; background:#fff; }
.luck-decade-card small { border-color:#ff9abd; }
.luck-decade-card.current { border:2px solid #ff1f66; background:#fff5f8; }
.luck-decade-card.current small { color:#d91250; }
.luck-year-list { gap:8px; border:0; }
.luck-year-card { padding:16px; border:1px solid #e4e4e7; border-radius:14px; background:#fff; }
.luck-year-card em { border-color:#ff9abd; color:#d91250; }
.luck-year-card.current { border:2px solid #ff1f66; background:#fff5f8; }
.luck-closing { border:0; border-left:3px solid #ff1f66; border-radius:12px; background:#fff0f5; }
.luck-guide,.analysis-disclaimer { color:#71717a; }

/* SajuSum editorial mobile system — inspired by compact image-led fortune apps */
:root {
  --bottom-nav-height:64px;
  --bottom-nav-gap:max(10px, env(safe-area-inset-bottom));
}

.top-header {
  padding:0 18px;
  border-bottom:1px solid rgba(228,228,231,.72);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
}
.logo { gap:8px; font-size:20px; font-weight:800; letter-spacing:-.045em; }
.logo-seal { width:22px; height:22px; border-radius:5px; background:#18181b; font-size:12px; }
.icon-button { width:40px; height:40px; justify-items:end; }
.icon-button span { width:20px; height:1.5px; border-radius:99px; }
.icon-button span:nth-child(2) { width:15px; }

.hero-carousel { padding:14px 12px 0; }
.hero-track { height:276px; }
.hero-banner {
  padding:30px 22px;
  border:0;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(24,24,27,.13);
}
.hero-banner.has-editorial-media { isolation:isolate; background:#09090b; }
.hero-editorial-media,
.card-editorial-media {
  width:100%;
  height:100%;
  display:block;
  position:absolute;
  inset:0;
  object-fit:cover;
  pointer-events:none;
  user-select:none;
}
.hero-editorial-media { z-index:0; object-position:70% 44%; }
.hero-banner.has-editorial-media::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.76) 43%,rgba(0,0,0,.28) 70%,rgba(0,0,0,.08) 100%);
}
.hero-banner.has-editorial-media::after {
  width:38px;
  height:3px;
  top:auto;
  right:auto;
  bottom:24px;
  left:22px;
  z-index:2;
  border-radius:99px;
  background:#ff1f66;
}
.hero-banner.has-editorial-media .banner-copy { max-width:61%; }
.banner-copy h2 { margin-top:12px; font-size:29px; line-height:1.24; letter-spacing:-.05em; }
.banner-copy p { max-width:220px; font-size:10px; line-height:1.6; }
.banner-copy button {
  height:38px;
  margin-top:20px;
  padding:0 15px;
  border-color:rgba(255,255,255,.42);
  border-radius:999px;
  background:rgba(12,12,14,.28);
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
}
.rank-badge,.banner-blue .rank-badge {
  right:14px;
  padding:7px 9px;
  border:0;
  border-radius:0 0 8px 8px;
  color:#fff;
  background:rgba(0,0,0,.45)!important;
}
.carousel-dots { height:28px; }
.carousel-dots button { background:#d4d4d8; }
.carousel-dots button.active { width:20px; background:#18181b; }

.content-section { padding:30px 18px 36px; }
.first-section { padding-top:20px; }
.section-title-row { align-items:flex-end; margin-bottom:17px; }
.section-title-row > div { min-width:0; }
.section-kicker {
  display:block;
  margin-bottom:6px;
  color:#d91250;
  font-size:9px;
  font-weight:800;
  line-height:1;
  letter-spacing:.06em;
}
.section-title-row h2 { color:#18181b; font-size:19px; font-weight:800; line-height:1.35; }
.section-title-row p { margin-top:8px; color:#71717a; }
.text-link { color:#52525b; font-size:10px; font-weight:600; text-decoration:underline; text-decoration-color:#d4d4d8; text-underline-offset:4px; }
.poster-scroll,.product-scroll { gap:11px; margin-right:-18px; margin-left:-18px; padding-right:18px; padding-left:18px; }
.poster {
  flex-basis:148px;
  height:182px;
  padding:17px 14px;
  border:0;
  border-radius:12px;
  box-shadow:none;
}
.poster-green { background:#18181b; }
.poster-pink { background:#ff1f66; }
.poster-purple { background:#3f3f46; }
.poster-orange { color:#18181b; background:#e4e4e7; }
.poster-orange small { color:#52525b; }
.poster-label,.poster-label.hot,.poster-label.new { border-radius:999px; color:#18181b; background:#fff; }
.poster strong { margin-top:52px; font-size:14px; }
.brand-proof {
  margin:4px 18px 20px;
  padding:28px 22px 25px;
  border:0;
  border-top:4px solid #ff1f66;
  border-radius:16px;
  background:#18181b;
  text-align:left;
}
.proof-kicker,.proof-numbers b { color:#ff6f9c; }
.brand-proof h2 { font-size:21px; }
.brand-proof h2 strong { color:#fff; }
.proof-numbers { justify-content:flex-start; gap:22px; }

.product-card { flex-basis:148px; background:transparent; }
.product-art { height:184px; border:0; border-radius:12px; background:#27272a; }
.art-love,.art-flower { background:#ff1f66; }
.art-mind,.art-year { background:#27272a; }
.art-career,.art-money { background:#52525b; }
.product-art.has-editorial-media { isolation:isolate; background:#18181b; }
.product-art.has-editorial-media .card-editorial-media { z-index:0; object-position:center 43%; }
.product-art.art-career.has-editorial-media .card-editorial-media { object-position:center 54%; }
.product-art.has-editorial-media::after {
  content:'';
  width:auto;
  height:auto;
  display:block;
  position:absolute;
  inset:0;
  z-index:1;
  border:0;
  border-radius:inherit;
  background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.78) 100%);
}
.product-art.has-editorial-media i {
  position:absolute;
  right:12px;
  bottom:12px;
  left:12px;
  z-index:2;
  margin:0;
  color:#fff;
  text-align:left;
}
.product-card > b { margin-top:11px; color:#18181b; font-size:13px; }
.product-card > p { margin-top:5px; color:#71717a; font-size:10px; }
.product-card > strong { color:#d91250; font-size:10px; }
.poster:focus-visible,.product-card:focus-visible { outline:3px solid #ff1f66; outline-offset:3px; }

.avatar-red,.thumb-three { background:#ff1f66; }
.avatar-blue,.thumb-two { background:#27272a; }
.avatar-gold,.thumb-one,.thumb-four { background:#71717a; }
.guide-banner {
  margin-right:18px;
  margin-left:18px;
  border:0;
  border-top:4px solid #ff1f66;
  border-radius:16px;
  background:#18181b;
}
.guide-banner small { color:#ff6f9c; }

.bottom-nav {
  width:calc(100% - 24px);
  max-width:calc(var(--app-width) - 24px);
  padding:6px 7px;
  overflow:visible;
  border:1px solid rgba(255,255,255,.76);
  border-radius:24px;
  background:rgba(255,255,255,.72);
  box-shadow:0 14px 36px rgba(24,24,27,.16),inset 0 1px 0 rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
}
.bottom-nav a,.bottom-nav button {
  gap:3px;
  border-radius:17px;
  color:#71717a;
  transition:color .2s ease,background .2s ease,transform .2s ease;
}
.bottom-nav .nav-icon { width:26px; height:26px; display:grid; place-items:center; border-radius:9px; }
.bottom-nav .nav-icon svg {
  width:23px;
  height:23px;
  overflow:visible;
  pointer-events:none;
  stroke:currentColor;
  stroke-width:1.85;
}
.bottom-nav b { font-size:9.5px; font-weight:600; }
.bottom-nav .active { color:#d91250; background:rgba(255,31,102,.07); }
.bottom-nav .active .nav-icon { color:#d91250; }
.bottom-nav a:focus-visible,.bottom-nav button:focus-visible {
  outline:2px solid #ff1f66;
  outline-offset:-2px;
}
.test-logged-in .saju-login-trigger .nav-icon::after { top:-1px; right:-2px; }

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  .top-header { background:rgba(255,255,255,.97); }
  .bottom-nav { background:rgba(255,255,255,.96); }
}

@media (max-width:370px) {
  .hero-banner.has-editorial-media .banner-copy { max-width:67%; }
  .hero-editorial-media { object-position:74% 44%; }
  .banner-copy h2 { font-size:27px; }
  .product-card { flex-basis:140px; }
}

/* Header theme control */
.header-actions { display:flex; align-items:center; gap:2px; }
.theme-toggle {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #e4e4e7;
  border-radius:12px;
  color:#27272a;
  background:rgba(244,244,245,.86);
}
.theme-icon {
  width:19px;
  height:19px;
  display:block;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.theme-icon-sun { display:none; }
.theme-toggle:active { transform:scale(.94); }
.theme-toggle:focus-visible,.menu-trigger:focus-visible { outline:2px solid #ff1f66; outline-offset:2px; }

html[data-theme="light"] { color-scheme:light; }
html[data-theme="dark"] { color-scheme:dark; }
html[data-theme="dark"] .theme-icon-moon { display:none; }
html[data-theme="dark"] .theme-icon-sun { display:block; }

/* Dark theme — all user-facing surfaces */
html[data-theme="dark"] body { color:#f4f4f5; background:#09090b; }
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .content-section { background:#0f0f11; }
html[data-theme="dark"] .top-header {
  border-color:rgba(63,63,70,.72);
  background:rgba(18,18,20,.82);
}
html[data-theme="dark"] .logo { color:#fafafa; }
html[data-theme="dark"] .logo-seal { color:#18181b; background:#fafafa; }
html[data-theme="dark"] .icon-button span { background:#fafafa; }
html[data-theme="dark"] .theme-toggle { color:#ff8eaf; border-color:#3f3f46; background:rgba(39,39,42,.88); }
html[data-theme="dark"] .section-divider { border-color:#27272a; background:#18181b; }
html[data-theme="dark"] .carousel-dots button { background:#3f3f46; }
html[data-theme="dark"] .carousel-dots button.active { background:#fafafa; }
html[data-theme="dark"] .section-title-row h2 { color:#fafafa; }
html[data-theme="dark"] .section-title-row p,
html[data-theme="dark"] .text-link { color:#a1a1aa; }
html[data-theme="dark"] .text-link { text-decoration-color:#52525b; }
html[data-theme="dark"] .section-kicker { color:#ff78a7; }
html[data-theme="dark"] .poster-orange { color:#fafafa; background:#3f3f46; }
html[data-theme="dark"] .poster-orange small { color:#d4d4d8; }
html[data-theme="dark"] .brand-proof,
html[data-theme="dark"] .guide-banner { box-shadow:inset 0 0 0 1px #2f2f33; }
html[data-theme="dark"] .activity-list,
html[data-theme="dark"] .activity-list article { border-color:#27272a; }
html[data-theme="dark"] .activity-list b { color:#f4f4f5; }
html[data-theme="dark"] .activity-list small,
html[data-theme="dark"] .activity-list time,
html[data-theme="dark"] .example-note { color:#71717a; }
html[data-theme="dark"] .activity-list p { color:#d4d4d8; }
html[data-theme="dark"] .product-card { background:transparent; }
html[data-theme="dark"] .product-card > b { color:#f4f4f5; }
html[data-theme="dark"] .product-card > p { color:#a1a1aa; }
html[data-theme="dark"] .product-card > strong { color:#ff78a7; }
html[data-theme="dark"] .rank-list { border-color:#27272a; }
html[data-theme="dark"] .rank-list button { border-color:#27272a; background:#0f0f11; }
html[data-theme="dark"] .rank-list button > b,
html[data-theme="dark"] .rank-list strong { color:#f4f4f5; }
html[data-theme="dark"] .rank-list small,
html[data-theme="dark"] .rank-list i { color:#a1a1aa; }
html[data-theme="dark"] footer { color:#a1a1aa; background:#09090b; }
html[data-theme="dark"] .footer-logo,
html[data-theme="dark"] .footer-links { color:#d4d4d8; }
html[data-theme="dark"] .footer-logo .logo-seal { color:#fafafa; background:#3f3f46; }

html[data-theme="dark"] .bottom-nav {
  border-color:rgba(255,255,255,.13);
  background:rgba(24,24,27,.74);
  box-shadow:0 14px 40px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="dark"] .bottom-nav a,
html[data-theme="dark"] .bottom-nav button { color:#a1a1aa; }
html[data-theme="dark"] .bottom-nav .active,
html[data-theme="dark"] .bottom-nav .active .nav-icon { color:#ff8eaf; }
html[data-theme="dark"] .bottom-nav .active { background:rgba(255,31,102,.13); }
html[data-theme="dark"] .test-logged-in .saju-login-trigger .nav-icon::after { border-color:#18181b; }

html[data-theme="dark"] .birth-sheet,
html[data-theme="dark"] .login-sheet,
html[data-theme="dark"] .result-sheet,
html[data-theme="dark"] .archive-sheet,
html[data-theme="dark"] .side-menu { color:#f4f4f5; background:#141416; }
html[data-theme="dark"] .sheet-handle { background:#52525b; }
html[data-theme="dark"] .sheet-head h2,
html[data-theme="dark"] .birth-sheet label > span,
html[data-theme="dark"] .birth-sheet legend { color:#f4f4f5; }
html[data-theme="dark"] .sheet-head small { color:#ff78a7; }
html[data-theme="dark"] .sheet-close,
html[data-theme="dark"] .menu-close { color:#d4d4d8; }
html[data-theme="dark"] .field-help,
html[data-theme="dark"] .leap-month-option span { color:#a1a1aa!important; }
html[data-theme="dark"] .birth-sheet input[type=text],
html[data-theme="dark"] .birth-sheet input[type=date],
html[data-theme="dark"] .birth-sheet input[type=time],
html[data-theme="dark"] .birth-sheet select,
html[data-theme="dark"] .email-login {
  color:#f4f4f5;
  border-color:#3f3f46;
  background:#202023;
  color-scheme:dark;
}
html[data-theme="dark"] .birth-sheet input::placeholder { color:#71717a; }
html[data-theme="dark"] .birth-sheet select option { color:#f4f4f5; background:#202023; }
html[data-theme="dark"] .birth-sheet input:focus,
html[data-theme="dark"] .birth-sheet select:focus { border-color:#ff4f87; }
html[data-theme="dark"] .choice-row { background:#27272a; }
html[data-theme="dark"] .choice-row span { color:#a1a1aa!important; }
html[data-theme="dark"] .choice-row input:checked + span { color:#fff!important; background:#3f3f46; box-shadow:none; }
html[data-theme="dark"] .submit-button,
html[data-theme="dark"] .result-confirm,
html[data-theme="dark"] .archive-create { background:#ff1f66; }
html[data-theme="dark"] .login-benefits,
html[data-theme="dark"] .result-notice,
html[data-theme="dark"] .login-box { background:#202023; }
html[data-theme="dark"] .login-benefits p,
html[data-theme="dark"] .result-notice p,
html[data-theme="dark"] .login-box span { color:#d4d4d8; }
html[data-theme="dark"] .login-benefits span { color:#ff78a7; }
html[data-theme="dark"] .login-box button:not(.kakao-login) { color:#fff; background:#3f3f46; }
html[data-theme="dark"] .login-policy,
html[data-theme="dark"] .result-date { color:#a1a1aa; }
html[data-theme="dark"] .result-pillars { border-color:#3f3f46; }
html[data-theme="dark"] .result-pillars div { border-color:#3f3f46; }
html[data-theme="dark"] .result-pillars small,
html[data-theme="dark"] .result-pillars strong { color:#a1a1aa; }
html[data-theme="dark"] .result-pillars b,
html[data-theme="dark"] .result-notice b { color:#f4f4f5; }
html[data-theme="dark"] .archive-empty b,
html[data-theme="dark"] .saved-summary strong { color:#f4f4f5; }
html[data-theme="dark"] .archive-empty p,
html[data-theme="dark"] .archive-guide,
html[data-theme="dark"] .saved-summary small,
html[data-theme="dark"] .saved-chevron { color:#a1a1aa; }
html[data-theme="dark"] .empty-bookmark,
html[data-theme="dark"] .saved-avatar { color:#ff8eaf; background:#35131f; }
html[data-theme="dark"] .saved-saju-card,
html[data-theme="dark"] .archive-select,
html[data-theme="dark"] .chart-edit,
html[data-theme="dark"] .chart-delete,
html[data-theme="dark"] .archive-add {
  border-color:#2f2f33;
  background:#18181b;
}
html[data-theme="dark"] .archive-select:active,
html[data-theme="dark"] .chart-edit:active,
html[data-theme="dark"] .chart-delete:active { background:#27272a; }
html[data-theme="dark"] .chart-edit { color:#d4d4d8; }
html[data-theme="dark"] .chart-delete { color:#ff8e8e; }
html[data-theme="dark"] .archive-add { color:#d4d4d8; }
html[data-theme="dark"] .side-menu > nav { border-color:#2f2f33; }
html[data-theme="dark"] .side-menu > nav button { color:#f4f4f5; border-color:#2f2f33; background:#141416; }
html[data-theme="dark"] .side-menu > nav b { color:#71717a; }

html[data-theme="dark"] .analysis-view {
  --ink:#fafafa;
  --ink-soft:#d4d4d8;
  --hanji:#09090b;
  --paper:#18181b;
  --lacquer:#ff4f87;
  --lacquer-soft:#35131f;
  --brass:#ff4f87;
  --brass-text:#ff8eaf;
  --line:#3f3f46;
  --muted:#a1a1aa;
  --focus:#ff4f87;
  color:#f4f4f5;
  background:#0f0f11;
}
html[data-theme="dark"] .analysis-header,
html[data-theme="dark"] .analysis-tabs { border-color:#2f2f33; background:#141416; }
html[data-theme="dark"] .analysis-header button,
html[data-theme="dark"] .analysis-header b { color:#f4f4f5; }
html[data-theme="dark"] .analysis-header small,
html[data-theme="dark"] .analysis-tabs button { color:#a1a1aa; }
html[data-theme="dark"] .analysis-saved { color:#ff8eaf; border-color:#3f3f46; background:#35131f; }
html[data-theme="dark"] .analysis-saved svg { fill:#ff8eaf; }
html[data-theme="dark"] .analysis-tabs button.active { color:#ff8eaf; }
html[data-theme="dark"] .analysis-card { border-color:#2f2f33; background:#18181b; }
html[data-theme="dark"] .analysis-card-head h3,
html[data-theme="dark"] .analysis-section-title h3 { color:#fafafa; }
html[data-theme="dark"] .analysis-card-head small,
html[data-theme="dark"] .analysis-section-title small { color:#ff8eaf; }
html[data-theme="dark"] .analysis-card-head > span,
html[data-theme="dark"] .pillar-reading-guide { color:#a1a1aa; }
html[data-theme="dark"] .analysis-pillar-grid { border-color:#3f3f46; }
html[data-theme="dark"] .analysis-pillar-grid div { border-color:#3f3f46; background:#202023; }
html[data-theme="dark"] .analysis-pillar-grid div.day-pillar { color:#fff; border-top-color:#ff4f87; background:#35131f; }
html[data-theme="dark"] .analysis-pillar-grid small,
html[data-theme="dark"] .analysis-pillar-grid span,
html[data-theme="dark"] .analysis-pillar-grid .day-pillar small,
html[data-theme="dark"] .analysis-pillar-grid .day-pillar span { color:#a1a1aa; }
html[data-theme="dark"] .analysis-pillar-grid b,
html[data-theme="dark"] .balance-ring b { color:#fafafa; }
html[data-theme="dark"] .balance-ring,
html[data-theme="dark"] .balance-copy span,
html[data-theme="dark"] .phase-two-evidence,
html[data-theme="dark"] .phase-two-evidence > div,
html[data-theme="dark"] .structure-summary,
html[data-theme="dark"] .structure-summary > div,
html[data-theme="dark"] .position-ten-gods,
html[data-theme="dark"] .position-ten-gods > div,
html[data-theme="dark"] .position-ten-gods > div > div,
html[data-theme="dark"] .luck-basis-grid,
html[data-theme="dark"] .luck-basis-grid > div { border-color:#3f3f46; }
html[data-theme="dark"] .balance-ring::before { background:#18181b; }
html[data-theme="dark"] .element-bars i { background:#3f3f46; }
html[data-theme="dark"] .phase-two-evidence small,
html[data-theme="dark"] .luck-basis-grid b { color:#ff8eaf; }
html[data-theme="dark"] .phase-two-evidence span { color:#ff78a7; }
html[data-theme="dark"] .relation-evidence span { color:#ff8eaf; background:#35131f; }
html[data-theme="dark"] .shaman-voice-note { border-left-color:#ff4f87; background:#35131f; }
html[data-theme="dark"] .shaman-voice-note strong,
html[data-theme="dark"] .shaman-voice-note p { color:#f4f4f5; }
html[data-theme="dark"] .analysis-category { border-color:#2f2f33; background:#18181b; }
html[data-theme="dark"] .analysis-category[open] { border-color:#7f2948; box-shadow:none; }
html[data-theme="dark"] .analysis-category[open] summary { background:#27131a; }
html[data-theme="dark"] .analysis-category-copy strong { color:#f4f4f5; }
html[data-theme="dark"] .analysis-category-chevron { color:#a1a1aa; }
html[data-theme="dark"] .analysis-category-body { border-color:#512033; background:#18181b; }
html[data-theme="dark"] .analysis-category-body p { color:#d4d4d8; }
html[data-theme="dark"] .analysis-category-body p:last-child { color:#f4f4f5; }
html[data-theme="dark"] .analysis-hero,
html[data-theme="dark"] .analysis-closing,
html[data-theme="dark"] .luck-now-card { border:1px solid #2f2f33; }
html[data-theme="dark"] .luck-decade-card,
html[data-theme="dark"] .luck-year-card { border-color:#2f2f33; background:#18181b; }
html[data-theme="dark"] .luck-decade-card.current,
html[data-theme="dark"] .luck-year-card.current { border-color:#ff4f87; background:#35131f; }
html[data-theme="dark"] .luck-decade-card > b,
html[data-theme="dark"] .luck-decade-card strong,
html[data-theme="dark"] .luck-year-card > div b,
html[data-theme="dark"] .luck-year-card > strong { color:#f4f4f5; }
html[data-theme="dark"] .luck-decade-card p,
html[data-theme="dark"] .luck-year-card > div small,
html[data-theme="dark"] .luck-year-card > p { color:#a1a1aa; }
html[data-theme="dark"] .luck-decade-card small,
html[data-theme="dark"] .luck-year-card em { color:#ff8eaf; border-color:#7f2948; }
html[data-theme="dark"] .luck-closing { border-left-color:#ff4f87; background:#35131f; }
html[data-theme="dark"] .luck-closing p { color:#d4d4d8; }
html[data-theme="dark"] .luck-guide,
html[data-theme="dark"] .analysis-disclaimer { color:#a1a1aa; }

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  html[data-theme="dark"] .top-header { background:rgba(18,18,20,.97); }
  html[data-theme="dark"] .bottom-nav { background:rgba(24,24,27,.96); }
}

/* Compact mobile canvas — shared sizing across every screen */
:root {
  --app-width:400px;
  --page-gutter:16px;
}

.app-shell,
.top-header,
.analysis-view,
.birth-sheet,
.login-sheet,
.result-sheet,
.archive-sheet,
.side-menu { max-width:var(--app-width); }

.top-header { padding-right:var(--page-gutter); padding-left:var(--page-gutter); }
.logo { gap:7px; font-size:19px; }
.logo-seal { width:21px; height:21px; font-size:11px; }
.header-actions { gap:1px; }
.theme-toggle { width:36px; height:36px; border-radius:11px; }
.theme-icon { width:18px; height:18px; }
.icon-button { width:38px; height:38px; }
.icon-button span { width:19px; }
.icon-button span:nth-child(2) { width:14px; }

.hero-carousel { padding-right:12px; padding-left:12px; }
.hero-track { height:264px; }
.hero-banner { padding:27px 20px; }
.hero-banner.has-editorial-media .banner-copy { max-width:63%; }
.hero-banner.has-editorial-media::after { bottom:21px; left:20px; }
.banner-copy { min-width:0; }
.banner-copy h2 { max-width:100%; font-size:clamp(25px,7vw,28px); line-height:1.25; word-break:keep-all; overflow-wrap:break-word; }
.banner-copy p { max-width:200px; }
.banner-copy button { margin-top:18px; padding-right:14px; padding-left:14px; }

.content-section { padding:28px var(--page-gutter) 34px; }
.first-section { padding-top:19px; }
.section-title-row { gap:12px; margin-bottom:16px; }
.section-title-row > * { min-width:0; }
.section-title-row h2 { font-size:clamp(17px,4.8vw,18px); word-break:keep-all; overflow-wrap:break-word; }
.section-title-row p { font-size:10px; line-height:1.55; word-break:keep-all; }
.section-kicker { margin-bottom:5px; font-size:8.5px; }
.text-link { flex:none; font-size:9.5px; white-space:nowrap; }

.poster-scroll,
.product-scroll {
  margin-right:calc(var(--page-gutter) * -1);
  margin-left:calc(var(--page-gutter) * -1);
  padding-right:var(--page-gutter);
  padding-left:var(--page-gutter);
}
.poster { flex-basis:144px; height:176px; padding:16px 13px; }
.poster strong { margin-top:48px; font-size:13px; line-height:1.4; word-break:keep-all; }
.poster small { font-size:9px; line-height:1.45; word-break:keep-all; }
.poster-label { font-size:8.5px; }
.brand-proof { margin-right:var(--page-gutter); margin-left:var(--page-gutter); padding:26px 20px 23px; }
.brand-proof h2 { font-size:20px; }
.brand-proof > p { max-width:100%; }
.proof-numbers { gap:20px; }
.proof-numbers b { font-size:21px; }

.activity-list article { grid-template-columns:36px minmax(0,1fr) auto; gap:10px; }
.avatar { width:36px; height:36px; font-size:14px; }
.activity-list article div { min-width:0; }
.activity-list p { max-width:100%; }

.product-card { flex-basis:144px; min-width:0; }
.product-art { height:178px; }
.product-card > b { font-size:12px; line-height:1.45; word-break:keep-all; overflow-wrap:break-word; }
.product-card > p { height:31px; font-size:9.5px; line-height:1.55; word-break:keep-all; overflow-wrap:break-word; }
.rank-list button { grid-template-columns:20px 46px minmax(0,1fr) 12px; gap:9px; }
.rank-thumb { width:46px; height:46px; font-size:18px; }
.rank-list div { min-width:0; }
.rank-list strong,.rank-list small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.guide-banner { margin-right:var(--page-gutter); margin-left:var(--page-gutter); padding:25px 21px; }
.guide-banner h2 { font-size:20px; }

.bottom-nav .nav-icon { width:24px; height:24px; }
.bottom-nav .nav-icon svg { width:22px; height:22px; }
.bottom-nav b { font-size:9px; white-space:nowrap; }

.birth-sheet,
.login-sheet,
.result-sheet,
.archive-sheet { padding-right:18px; padding-left:18px; }
.side-menu { padding-right:18px; padding-left:18px; }
.sheet-head > div { min-width:0; }
.sheet-head h2 { font-size:19px; line-height:1.4; word-break:keep-all; overflow-wrap:break-word; }
.form-grid { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
.result-pillars div { min-width:0; padding-right:3px; padding-left:3px; }
.result-pillars b { font-size:17px; }
.result-pillars strong { font-size:11px; }
.saved-saju-card { grid-template-columns:minmax(0,1fr) 44px 44px; }
.chart-edit,.chart-delete { min-width:44px; padding-right:6px; padding-left:6px; }

.analysis-scroll { padding-right:14px; padding-left:14px; }
.analysis-header { grid-template-columns:40px minmax(0,1fr) 40px; padding-right:12px; padding-left:12px; }
.analysis-header > div { min-width:0; }
.analysis-header b { max-width:100%; overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.analysis-header small { max-width:100%; overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.analysis-tabs { padding-right:6px; padding-left:6px; }
.analysis-tabs button { min-width:0; padding-right:2px; padding-left:2px; font-size:11px; white-space:nowrap; }
.analysis-hero { padding:27px 21px; }
.analysis-hero h2 { max-width:100%; font-size:26px; }
.analysis-card { padding-right:16px; padding-left:16px; }
.analysis-card-head > div { min-width:0; }
.analysis-card-head h3,.analysis-section-title h3 { word-break:keep-all; overflow-wrap:break-word; }
.analysis-pillar-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.analysis-pillar-grid div { min-width:0; }
.analysis-pillar-grid b { font-size:20px; }
.analysis-pillar-grid span { font-size:10px; }
.phase-two-evidence > div,
.position-ten-gods > div > div { min-width:0; }
.structure-summary > div { grid-template-columns:76px minmax(0,1fr); }
.analysis-category summary { grid-template-columns:minmax(0,1fr) 22px; gap:10px; }
.analysis-category-copy { min-width:0; }
.analysis-category-copy strong { font-size:13px; overflow-wrap:break-word; }
.analysis-category-body p { font-size:13px; word-break:keep-all; overflow-wrap:break-word; }
.luck-basis-grid > div { grid-template-columns:68px 64px minmax(0,1fr); gap:7px; }
.luck-basis-grid > div > * { min-width:0; overflow-wrap:break-word; }
.luck-year-card > strong,
.luck-year-card > p { overflow-wrap:break-word; }

@media (max-width:400px) {
  .app-shell { box-shadow:none; }
}

@media (max-width:350px) {
  :root { --page-gutter:14px; }
  .top-header { padding-right:14px; padding-left:14px; }
  .logo { font-size:18px; }
  .theme-toggle { width:34px; height:34px; }
  .icon-button { width:36px; height:36px; }
  .hero-track { height:250px; }
  .hero-banner { padding:24px 18px; }
  .hero-banner.has-editorial-media .banner-copy { max-width:68%; }
  .hero-editorial-media { object-position:76% 44%; }
  .banner-copy h2 { font-size:24px; }
  .banner-copy p { font-size:9px; }
  .banner-copy button { height:36px; margin-top:15px; font-size:10px; }
  .poster { flex-basis:134px; height:168px; }
  .product-card { flex-basis:134px; }
  .product-art { height:168px; }
  .section-title-row h2 { font-size:17px; }
  .activity-list time { display:none; }
  .analysis-scroll { padding-right:12px; padding-left:12px; }
  .analysis-card { padding-right:13px; padding-left:13px; }
  .analysis-hero h2 { font-size:24px; }
  .analysis-category-copy strong { font-size:12.5px; }
  .analysis-category-body p { font-size:12.5px; }
  .luck-now-grid { grid-template-columns:1fr; }
  .luck-basis-grid > div { grid-template-columns:58px 56px minmax(0,1fr); }
}

/* Narrow-screen readability safeguards */
.theme-toggle,.icon-button { width:40px; height:40px; }
.theme-icon { width:20px; height:20px; }
.bottom-nav .nav-icon { width:26px; height:26px; }
.bottom-nav .nav-icon svg { width:24px; height:24px; }
.bottom-nav b { font-size:10px; }
.product-card > p { height:auto; min-height:31px; }
.analysis-category-copy strong,
.analysis-category-body p,
.luck-year-card > strong,
.luck-year-card > p { overflow-wrap:anywhere; }
.luck-year-card > div { flex-wrap:wrap; align-items:flex-start; }
.luck-year-card > div span { min-width:0; flex-wrap:wrap; }
.luck-year-card em { flex:none; }

@media (max-width:350px) {
  .theme-toggle,.icon-button { width:40px; height:40px; }
  .form-grid { grid-template-columns:1fr; }
  .birth-sheet,.login-sheet,.result-sheet,.archive-sheet,.side-menu { padding-right:16px; padding-left:16px; }
  .phase-two-evidence > div { padding-right:8px; padding-left:8px; }
  .structure-summary > div { grid-template-columns:72px minmax(0,1fr); gap:8px; }
  .analysis-category summary { gap:8px; padding-right:10px; padding-left:10px; }
  .analysis-category-body { margin-left:8px; padding:17px 12px 20px 14px; }
  .luck-basis-grid > div { grid-template-columns:58px 58px minmax(0,1fr); gap:6px; }
  .archive-select { grid-template-columns:40px minmax(0,1fr) 14px; gap:9px; padding-right:7px; padding-left:10px; }
  .saved-avatar { width:40px; height:40px; }
  .saved-summary small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* Tight-style index layout — header styling intentionally unchanged */
:root {
  --app-width:444px;
  --top-header-width:440px;
  --bottom-nav-width:408px;
  --page-gutter:16px;
  --bottom-nav-height:72px;
  --bottom-nav-gap:max(16px, env(safe-area-inset-bottom));
}

.top-header { max-width:var(--top-header-width); }

.hero-carousel {
  padding:16px 0 0;
  overflow:hidden;
  touch-action:pan-y;
}
.hero-track {
  width:100%;
  height:auto;
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 2px;
  will-change:transform;
  transition:transform .42s cubic-bezier(.2,.75,.2,1);
}
.hero-track.is-jumping { transition:none!important; }
.hero-banner {
  position:relative;
  inset:auto;
  flex:0 0 87%;
  min-width:0;
  height:auto;
  aspect-ratio:260 / 384;
  padding:0;
  border-radius:16px;
  opacity:.38;
  transform:scaleY(.91);
  transform-origin:center;
  pointer-events:none;
  transition:opacity .32s ease,transform .38s cubic-bezier(.2,.75,.2,1);
}
.hero-banner.active { opacity:1; transform:scaleY(1); pointer-events:auto; }
.hero-banner[data-clone="true"] { pointer-events:none!important; }
.hero-banner.has-editorial-media::before {
  background:linear-gradient(180deg,rgba(0,0,0,.03) 20%,rgba(0,0,0,.22) 46%,rgba(0,0,0,.84) 76%,rgba(0,0,0,.97) 100%);
}
.hero-banner.has-editorial-media::after {
  width:34px;
  height:3px;
  top:24px;
  right:auto;
  bottom:auto;
  left:20px;
  background:#ff1f66;
}
.hero-editorial-media { object-position:70% center; }
.hero-editorial-portrait { object-position:center; }
.hero-banner .banner-copy,
.hero-banner.has-editorial-media .banner-copy {
  max-width:none;
  position:absolute;
  right:20px;
  bottom:26px;
  left:20px;
  z-index:5;
}
.banner-copy small { font-size:10px; }
.banner-copy h2 {
  max-width:100%;
  margin:10px 0 8px;
  font-size:28px;
  line-height:1.26;
  word-break:keep-all;
}
.banner-copy p { max-width:100%; color:rgba(255,255,255,.76); font-size:10px; }
.banner-copy button {
  height:38px;
  margin-top:17px;
  padding:0 14px;
  font-size:10px;
}
.rank-badge,.banner-blue .rank-badge { right:14px; padding:7px 9px; }
.carousel-dots { height:32px; gap:6px; }
.carousel-dots button { width:5px; height:5px; }
.carousel-dots button.active { width:18px; }

.content-section { padding:30px var(--page-gutter) 36px; }
.first-section { padding-top:20px; }
.section-title-row { margin-bottom:15px; }
.section-title-row h2 { font-size:16px; line-height:1.42; }
.section-title-row p { font-size:10px; }
.section-kicker { font-size:8px; }
.poster-scroll,.product-scroll {
  gap:10px;
  margin-right:calc(var(--page-gutter) * -1);
  margin-left:calc(var(--page-gutter) * -1);
  padding-right:var(--page-gutter);
  padding-left:var(--page-gutter);
}
.poster { flex-basis:140px; }
.product-card { flex-basis:140px; }
.product-art { height:174px; }
.brand-proof,.guide-banner { margin-right:var(--page-gutter); margin-left:var(--page-gutter); }

.bottom-nav {
  width:calc(100% - 32px);
  max-width:var(--bottom-nav-width);
  height:var(--bottom-nav-height);
  padding:8px;
  border-radius:32px;
}
.bottom-nav a,.bottom-nav button { gap:6px; border-radius:40px; }
.bottom-nav .nav-icon { width:24px; height:24px; }
.bottom-nav .nav-icon svg { width:24px; height:24px; }
.bottom-nav b { font-size:10px; line-height:10px; }

@media (max-width:350px) {
  .hero-banner { flex-basis:87%; }
  .hero-banner .banner-copy,
  .hero-banner.has-editorial-media .banner-copy { right:18px; bottom:22px; left:18px; }
  .hero-banner.has-editorial-media::after { top:20px; left:18px; }
  .banner-copy h2 { font-size:25px; }
  .banner-copy p { font-size:9px; }
  .poster,.product-card { flex-basis:132px; }
  .product-art { height:164px; }
  .section-title-row h2 { font-size:15px; }
}

/* SajuSum signature — fixed cinnabar red in both themes */
:root {
  --brand-signature:#c23c45;
  --brand-signature-rgb:194,60,69;
  --brand-signature-soft:#f6e8e7;
  --brand-signature-dark-soft:#2d1719;
  --ritual-lacquer:var(--brand-signature);
  --ritual-lacquer-soft:var(--brand-signature-soft);
  --ritual-brass:var(--brand-signature);
  --ritual-brass-text:var(--brand-signature);
}

.analysis-view {
  --lacquer:var(--brand-signature);
  --lacquer-soft:var(--brand-signature-soft);
  --brass:var(--brand-signature);
  --brass-text:var(--brand-signature);
  --focus:var(--brand-signature);
}

.logo-seal,
.banner-red,
.poster-pink,
.art-love,
.art-flower,
.avatar-red,
.thumb-three,
.submit-button,
.result-confirm,
.archive-create { background:var(--brand-signature); }

.hero-banner.has-editorial-media::after,
.analysis-tabs button::after,
.analysis-hero::before,
.analysis-section-title::after,
.carousel-dots button.active { background:var(--brand-signature); }

.brand-proof,
.guide-banner { border-top-color:var(--brand-signature); }

.proof-numbers b { color:var(--brand-signature); }
.proof-kicker,
.guide-banner small,
.analysis-hero > small,
.analysis-hero > small span,
.analysis-closing small,
.luck-now-card > small { color:#f6f0e7; }

.section-kicker,
.product-card > strong,
.bottom-nav .active,
.bottom-nav .active .nav-icon,
.sheet-head small,
.login-benefits span,
.analysis-saved,
.analysis-tabs button.active,
.analysis-card-head small,
.analysis-section-title small,
.phase-two-evidence small,
.phase-two-evidence span,
.relation-evidence span,
.luck-basis-grid b,
.luck-section-head small,
.luck-decade-card.current small,
.luck-year-card em { color:var(--brand-signature); }

.analysis-saved svg { fill:var(--brand-signature); }
.saved-avatar { color:#fff; background:var(--brand-signature); }
.analysis-category-icon { color:#fff; background:var(--brand-signature); }
.empty-bookmark,
.insight-icon.purple { color:#fff; background:var(--brand-signature); }
.exact-time-field em { color:var(--brand-signature); }
.leap-month-option input { accent-color:var(--brand-signature); }
.luck-decade-card small,
.luck-year-card em { border-color:var(--brand-signature); }
.footer-logo .logo-seal { filter:none; opacity:1; }

.birth-sheet input:focus,
.birth-sheet select:focus,
.birth-sheet input[type=time]:focus,
.analysis-pillar-grid div.day-pillar,
.shaman-voice-note,
.analysis-category[open],
.analysis-closing,
.luck-now-card,
.luck-decade-card.current,
.luck-year-card.current,
.luck-closing { border-color:var(--brand-signature); }

.analysis-pillar-grid div.day-pillar,
.relation-evidence span,
.shaman-voice-note,
.analysis-category[open] summary,
.luck-decade-card.current,
.luck-year-card.current,
.luck-closing { background:var(--brand-signature-soft); }

.analysis-category[open] { box-shadow:0 7px 20px rgba(var(--brand-signature-rgb),.08); }
.analysis-category-body { border-top-color:var(--brand-signature); }
.bottom-nav .active { background:rgba(var(--brand-signature-rgb),.09); }

.theme-toggle:focus-visible,
.menu-trigger:focus-visible,
.poster:focus-visible,
.product-card:focus-visible,
.bottom-nav a:focus-visible,
.bottom-nav button:focus-visible,
.analysis-header button:focus-visible,
.analysis-tabs button:focus-visible,
.analysis-category summary:focus-visible { outline-color:var(--brand-signature); }

.hero-editorial-media,
.card-editorial-media { filter:hue-rotate(18deg) saturate(.78) brightness(.92); }

html[data-theme="dark"] {
  --ritual-lacquer:var(--brand-signature);
  --ritual-lacquer-soft:var(--brand-signature-dark-soft);
  --ritual-brass:var(--brand-signature);
  --ritual-brass-text:var(--brand-signature);
}

html[data-theme="dark"] .analysis-view {
  --lacquer:var(--brand-signature);
  --lacquer-soft:var(--brand-signature-dark-soft);
  --brass:var(--brand-signature);
  --brass-text:#f6f0e7;
  --focus:var(--brand-signature);
}

html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .section-kicker,
html[data-theme="dark"] .product-card > strong,
html[data-theme="dark"] .bottom-nav .active,
html[data-theme="dark"] .sheet-head small,
html[data-theme="dark"] .login-benefits span,
html[data-theme="dark"] .analysis-saved,
html[data-theme="dark"] .analysis-tabs button.active,
html[data-theme="dark"] .analysis-card-head small,
html[data-theme="dark"] .analysis-section-title small,
html[data-theme="dark"] .phase-two-evidence small,
html[data-theme="dark"] .phase-two-evidence span,
html[data-theme="dark"] .relation-evidence span,
html[data-theme="dark"] .luck-basis-grid b,
html[data-theme="dark"] .luck-section-head small,
html[data-theme="dark"] .luck-decade-card.current small,
html[data-theme="dark"] .luck-year-card em { color:#f6f0e7; }

html[data-theme="dark"] .bottom-nav .active { color:#fff; background:var(--brand-signature); }
html[data-theme="dark"] .bottom-nav .active .nav-icon { color:#fff; }
html[data-theme="dark"] .logo-seal,
html[data-theme="dark"] .footer-logo .logo-seal { color:#fff; background:var(--brand-signature); }
html[data-theme="dark"] .carousel-dots button.active { background:var(--brand-signature); }
html[data-theme="dark"] .analysis-saved { color:#fff; border-color:var(--brand-signature); background:var(--brand-signature); }
html[data-theme="dark"] .analysis-saved svg { fill:#fff; }
html[data-theme="dark"] .saved-avatar { color:#fff; background:var(--brand-signature); }
html[data-theme="dark"] .empty-bookmark,
html[data-theme="dark"] .insight-icon.purple { color:#fff; background:var(--brand-signature); }
html[data-theme="dark"] .exact-time-field em { color:#f6f0e7; }
html[data-theme="dark"] .birth-sheet input:focus,
html[data-theme="dark"] .birth-sheet select:focus,
html[data-theme="dark"] .birth-sheet input[type=time]:focus { border-color:var(--brand-signature); }
html[data-theme="dark"] .submit-button,
html[data-theme="dark"] .result-confirm,
html[data-theme="dark"] .archive-create { color:#fff; background:var(--brand-signature); }

html[data-theme="dark"] .analysis-pillar-grid div.day-pillar,
html[data-theme="dark"] .relation-evidence span,
html[data-theme="dark"] .shaman-voice-note,
html[data-theme="dark"] .analysis-category[open] summary,
html[data-theme="dark"] .luck-decade-card.current,
html[data-theme="dark"] .luck-year-card.current,
html[data-theme="dark"] .luck-closing { background:var(--brand-signature-dark-soft); }

html[data-theme="dark"] .relation-evidence span { border:1px solid var(--brand-signature); }
html[data-theme="dark"] .analysis-category-body { border-color:var(--brand-signature); }
html[data-theme="dark"] .luck-decade-card small { color:#f6f0e7; border-color:var(--brand-signature); }

html[data-theme="dark"] .analysis-pillar-grid div.day-pillar,
html[data-theme="dark"] .shaman-voice-note,
html[data-theme="dark"] .analysis-category[open],
html[data-theme="dark"] .analysis-closing,
html[data-theme="dark"] .luck-now-card,
html[data-theme="dark"] .luck-decade-card.current,
html[data-theme="dark"] .luck-year-card.current,
html[data-theme="dark"] .luck-closing,
html[data-theme="dark"] .luck-year-card em { border-color:var(--brand-signature); }

/* Modern birth input — the sheet continues behind the translucent bottom nav */
.birth-sheet {
  bottom:0;
  max-height:calc(100dvh - 60px);
  padding-bottom:calc(var(--bottom-nav-offset) + 24px);
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scroll-padding-bottom:calc(var(--bottom-nav-offset) + 16px);
  background:#fff;
  -webkit-overflow-scrolling:touch;
}

.birth-sheet form { gap:14px; }
.birth-moment-card { display:grid; gap:12px; min-width:0; }
.birth-moment-card .moment-field {
  min-width:0;
  margin:0;
  padding:17px;
  border:1px solid #e7e7ea;
  border-radius:16px;
  background:#fafafa;
}
.birth-sheet .moment-field > legend {
  margin:0;
  padding:0;
  color:#18181b;
  font-size:13px;
  font-weight:800;
  letter-spacing:-.025em;
}
.birth-sheet .moment-field > legend em {
  display:inline-flex;
  align-items:center;
  min-height:20px;
  margin-left:5px;
  padding:0 7px;
  border-radius:999px;
  color:var(--brand-signature);
  background:var(--brand-signature-soft);
  font-size:9px;
  font-style:normal;
  font-weight:700;
  vertical-align:2px;
}
.birth-sheet .moment-field > .field-help {
  margin:5px 0 13px;
  color:#8a8a91;
  font-size:9px;
  line-height:1.55;
}

.moment-parts {
  display:grid;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:4px 10px;
  border:1px solid #dedee2;
  border-radius:13px;
  background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.date-parts { grid-template-columns:minmax(84px,1.45fr) 8px minmax(58px,1fr) 8px minmax(58px,1fr); }
.time-parts { grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr); }
.moment-parts:focus-within {
  border-color:var(--brand-signature);
  box-shadow:0 0 0 3px rgba(var(--brand-signature-rgb),.1);
}
.moment-parts label {
  min-width:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:5px;
}
.birth-sheet .moment-parts input[type="text"] {
  flex:1 1 auto;
  width:100%;
  min-width:0;
  height:52px;
  padding:0;
  border:0;
  border-radius:0;
  outline:0;
  color:#18181b;
  background:transparent;
  text-align:right;
  font-family:var(--font);
  font-size:20px;
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
  caret-color:var(--brand-signature);
}
.birth-sheet .moment-parts input[type="text"]::placeholder { color:#c2c2c7; opacity:1; }
.birth-sheet .moment-parts label > span {
  flex:none;
  display:block!important;
  margin:0!important;
  padding:0;
  color:#71717a!important;
  font-size:10px!important;
  font-weight:600!important;
  white-space:nowrap;
}
.moment-parts > i {
  color:#b4b4ba;
  text-align:center;
  font-size:16px;
  font-style:normal;
  font-weight:500;
}

.calendar-inline {
  display:grid;
  grid-template-columns:auto minmax(144px,1fr);
  align-items:center;
  gap:10px;
  margin-top:12px;
}
.calendar-inline > span {
  color:#71717a;
  font-size:10px;
  font-weight:600;
  white-space:nowrap;
}
.calendar-inline .choice-row { height:38px; padding:3px; border-radius:10px; }
.calendar-inline .choice-row span { height:32px; border-radius:8px; }
.leap-month-option { padding-top:9px; }

.birthtime-bucket-source { display:none!important; }
.auto-time-bucket {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:46px;
  margin-top:11px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:11px;
  background:#f0f0f2;
  transition:border-color .18s ease, background .18s ease;
}
.auto-time-bucket span {
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  color:#52525b;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
.auto-time-bucket span b {
  display:grid;
  min-width:30px;
  height:20px;
  place-items:center;
  border-radius:6px;
  color:#fff;
  background:#a1a1aa;
  font-size:8px;
  letter-spacing:.04em;
}
.auto-time-bucket strong {
  min-width:0;
  color:#71717a;
  text-align:right;
  font-size:10px;
  line-height:1.45;
  font-weight:600;
  word-break:keep-all;
}
.auto-time-bucket.is-set {
  border-color:rgba(var(--brand-signature-rgb),.16);
  background:var(--brand-signature-soft);
}
.auto-time-bucket.is-set span b { background:var(--brand-signature); }
.auto-time-bucket.is-set strong { color:var(--brand-signature); }
.birth-sheet .submit-button { border-radius:13px; }

html[data-theme="dark"] .birth-sheet { background:#141416; }
html[data-theme="dark"] .birth-moment-card .moment-field {
  border-color:#343438;
  background:#1a1a1d;
}
html[data-theme="dark"] .birth-sheet .moment-field > legend { color:#f4f4f5; }
html[data-theme="dark"] .birth-sheet .moment-field > legend em {
  color:#f6f0e7;
  background:var(--brand-signature-dark-soft);
}
html[data-theme="dark"] .birth-sheet .moment-field > .field-help { color:#a1a1aa!important; }
html[data-theme="dark"] .moment-parts {
  border-color:#3f3f46;
  background:#202023;
}
html[data-theme="dark"] .birth-sheet .moment-parts input[type="text"] {
  color:#fafafa;
  background:transparent;
  color-scheme:dark;
}
html[data-theme="dark"] .birth-sheet .moment-parts input[type="text"]::placeholder { color:#64646c; }
html[data-theme="dark"] .birth-sheet .moment-parts label > span,
html[data-theme="dark"] .calendar-inline > span { color:#a1a1aa!important; }
html[data-theme="dark"] .moment-parts > i { color:#71717a; }
html[data-theme="dark"] .auto-time-bucket { background:#27272a; }
html[data-theme="dark"] .auto-time-bucket span,
html[data-theme="dark"] .auto-time-bucket strong { color:#a1a1aa; }
html[data-theme="dark"] .auto-time-bucket.is-set {
  border-color:var(--brand-signature);
  background:var(--brand-signature-dark-soft);
}
html[data-theme="dark"] .auto-time-bucket.is-set strong { color:#f6f0e7; }

@media (max-width:350px) {
  .birth-moment-card .moment-field { padding:14px; }
  .date-parts {
    grid-template-columns:minmax(70px,1.35fr) 5px minmax(48px,1fr) 5px minmax(48px,1fr);
    gap:4px;
    padding-right:8px;
    padding-left:8px;
  }
  .time-parts { gap:4px; padding-right:8px; padding-left:8px; }
  .birth-sheet .moment-parts input[type="text"] { font-size:18px; }
  .calendar-inline { grid-template-columns:1fr; gap:7px; }
  .auto-time-bucket { align-items:flex-start; flex-direction:column; gap:6px; }
  .auto-time-bucket strong { text-align:left; }
}

.unknown-time-toggle {
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding:0 12px;
  border:1px solid #dedee2;
  border-radius:12px;
  color:#52525b;
  background:#fff;
  font-size:11px;
  font-weight:700;
  text-align:left;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.unknown-time-toggle__mark {
  width:16px;
  height:16px;
  position:relative;
  flex:none;
  border:1.5px solid #a1a1aa;
  border-radius:50%;
  background:transparent;
}
.unknown-time-toggle__mark::after {
  content:'';
  width:6px;
  height:6px;
  position:absolute;
  inset:50% auto auto 50%;
  border-radius:50%;
  background:#fff;
  opacity:0;
  transform:translate(-50%,-50%);
}
.unknown-time-toggle b {
  min-width:42px;
  height:22px;
  display:grid;
  place-items:center;
  margin-left:auto;
  border-radius:7px;
  color:#71717a;
  background:#f0f0f2;
  font-size:8px;
  font-weight:700;
}
.unknown-time-toggle[aria-pressed="true"] {
  border-color:rgba(var(--brand-signature-rgb),.28);
  color:var(--brand-signature);
  background:var(--brand-signature-soft);
}
.unknown-time-toggle[aria-pressed="true"] .unknown-time-toggle__mark {
  border-color:var(--brand-signature);
  background:var(--brand-signature);
}
.unknown-time-toggle[aria-pressed="true"] .unknown-time-toggle__mark::after { opacity:1; }
.unknown-time-toggle[aria-pressed="true"] b { color:#fff; background:var(--brand-signature); }
.unknown-time-toggle:focus-visible {
  outline:2px solid var(--brand-signature);
  outline-offset:2px;
}
.time-moment .time-parts { transition:opacity .18s ease, border-color .18s ease, background .18s ease; }
.time-moment.is-time-unknown .time-parts { opacity:.46; }
.time-moment.is-time-unknown .time-parts input { cursor:not-allowed; }
.auto-time-bucket.is-unknown {
  border-color:rgba(var(--brand-signature-rgb),.16);
  background:#f7f4f4;
}
.auto-time-bucket.is-unknown span b { background:var(--brand-signature); }
.auto-time-bucket.is-unknown strong { color:var(--brand-signature); }

html[data-theme="dark"] .unknown-time-toggle {
  border-color:#3f3f46;
  color:#d4d4d8;
  background:#202023;
}
html[data-theme="dark"] .unknown-time-toggle__mark { border-color:#71717a; }
html[data-theme="dark"] .unknown-time-toggle b { color:#a1a1aa; background:#27272a; }
html[data-theme="dark"] .unknown-time-toggle[aria-pressed="true"] {
  border-color:var(--brand-signature);
  color:#f6f0e7;
  background:var(--brand-signature-dark-soft);
}
html[data-theme="dark"] .unknown-time-toggle[aria-pressed="true"] b {
  color:#fff;
  background:var(--brand-signature);
}
html[data-theme="dark"] .auto-time-bucket.is-unknown {
  border-color:var(--brand-signature);
  background:var(--brand-signature-dark-soft);
}
html[data-theme="dark"] .auto-time-bucket.is-unknown strong { color:#f6f0e7; }

/* Compact birth sheet — complete the form without scrolling on standard phones */
.birth-sheet {
  padding:8px 16px calc(var(--bottom-nav-offset) + 8px);
  scroll-padding-bottom:calc(var(--bottom-nav-offset) + 8px);
}
.birth-sheet:focus { outline:none; }
.birth-sheet > .sheet-handle { display:none; }
.birth-sheet .sheet-head {
  min-height:36px;
  align-items:center;
  margin-bottom:8px;
}
.birth-sheet .sheet-head h2 {
  margin:0;
  font-size:18px;
  line-height:1.25;
}
.birth-sheet .sheet-close {
  width:34px;
  height:34px;
  font-size:25px;
}
.birth-sheet form { gap:8px; }

.birth-profile-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 112px;
  align-items:end;
  gap:8px;
  min-width:0;
}
.birth-profile-grid > label,
.birth-profile-grid > fieldset { min-width:0; }
.birth-sheet .birth-profile-grid > label > span,
.birth-sheet .birth-profile-grid > fieldset > legend {
  margin:0 0 4px;
  color:#52525b;
  font-size:10px;
  font-weight:700;
  line-height:1.2;
}
.birth-sheet .birth-profile-grid input[name="nickname"] {
  height:44px;
  padding:0 10px;
  border-radius:10px;
  font-size:12px;
  text-overflow:ellipsis;
}
.birth-sheet .birth-profile-grid .choice-row {
  height:44px;
  border-radius:10px;
}
.birth-sheet .birth-profile-grid .choice-row span {
  height:38px;
  border-radius:8px;
  font-size:10px!important;
}

.birth-moment-card {
  display:block;
  overflow:hidden;
  border:1px solid #e7e7ea;
  border-radius:14px;
  background:#fafafa;
}
.birth-moment-card .moment-field {
  padding:10px 11px;
  border:0;
  border-radius:0;
  background:transparent;
}
.birth-moment-card .date-moment { padding-top:14px; }
.birth-moment-card .time-moment { border-top:1px solid #e7e7ea; }
.birth-sheet .moment-field > legend {
  margin:0 0 7px;
  font-size:11px;
  line-height:1.2;
}
.birth-sheet .moment-parts {
  gap:4px;
  padding:0 8px;
  border-radius:10px;
}
.birth-sheet .moment-parts input[type="text"] {
  height:44px;
  font-size:18px;
}
.birth-sheet .date-parts {
  grid-template-columns:minmax(78px,1.4fr) 6px minmax(52px,1fr) 6px minmax(52px,1fr);
}
.birth-sheet .calendar-inline {
  grid-template-columns:auto minmax(0,1fr);
  gap:8px;
  margin-top:7px;
}
.birth-sheet .calendar-inline .choice-row {
  height:36px;
  border-radius:9px;
}
.birth-sheet .calendar-inline .choice-row span {
  height:30px;
  border-radius:7px;
  font-size:10px!important;
}
.birth-sheet .leap-month-option {
  min-height:24px;
  padding:5px 0 0;
}

.time-entry-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) 112px;
  align-items:stretch;
  gap:8px;
  min-width:0;
}
.time-entry-row .time-parts { min-width:0; }
.time-entry-row .unknown-time-toggle {
  min-width:0;
  min-height:46px;
  justify-content:center;
  gap:6px;
  margin:0;
  padding:0 8px;
  border-radius:10px;
  font-size:10px;
  white-space:nowrap;
}
.time-entry-row .unknown-time-toggle__mark { width:14px; height:14px; }
.birth-sheet .auto-time-bucket {
  min-height:30px;
  display:grid;
  place-items:center;
  margin-top:6px;
  padding:4px 8px;
  border-radius:8px;
}
.birth-sheet .auto-time-bucket strong {
  width:100%;
  color:#71717a;
  text-align:center;
  font-size:9px;
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.birth-sheet .auto-time-bucket.is-set strong,
.birth-sheet .auto-time-bucket.is-unknown strong { color:var(--brand-signature); }
.birth-sheet .submit-button {
  height:46px;
  margin:0;
  border-radius:11px;
}

html[data-theme="dark"] .birth-moment-card {
  border-color:#343438;
  background:#1a1a1d;
}
html[data-theme="dark"] .birth-moment-card .moment-field { background:transparent; }
html[data-theme="dark"] .birth-moment-card .time-moment { border-top-color:#343438; }
html[data-theme="dark"] .birth-sheet .birth-profile-grid > label > span,
html[data-theme="dark"] .birth-sheet .birth-profile-grid > fieldset > legend { color:#d4d4d8; }

@media (max-width:350px) {
  .birth-sheet { padding-right:14px; padding-left:14px; }
  .birth-profile-grid { grid-template-columns:minmax(0,1fr) 108px; }
  .birth-moment-card .moment-field { padding:10px; }
  .birth-sheet .date-parts {
    grid-template-columns:minmax(68px,1.35fr) 5px minmax(45px,1fr) 5px minmax(45px,1fr);
    gap:3px;
  }
  .birth-sheet .calendar-inline { grid-template-columns:auto minmax(0,1fr); gap:7px; }
  .time-entry-row { grid-template-columns:minmax(0,1fr) 108px; gap:7px; }
  .birth-sheet .auto-time-bucket {
    align-items:center;
    flex-direction:row;
  }
  .birth-sheet .auto-time-bucket strong { text-align:center; }
}

.birth-moment-card .date-moment { padding-top:10px; }
.birth-sheet .date-moment > legend { padding-top:6px; }

/* Index 2.0 — hero, global header and bottom navigation intentionally untouched */
.home-index {
  --home-bg:#fff;
  --home-ink:#18181b;
  --home-muted:#71717a;
  --home-line:#e7e5e4;
  --home-soft:#f6f4f1;
  padding-bottom:20px;
  color:var(--home-ink);
  background:var(--home-bg);
}
.home-index :where(h2,p) { margin:0; }
.home-readings,
.home-channels {
  padding-right:var(--page-gutter);
  padding-left:var(--page-gutter);
}
.home-readings { padding-top:24px; padding-bottom:48px; }
.home-channels { padding-top:2px; padding-bottom:48px; }
.home-section-head { margin-bottom:20px; }
.home-section-head > small,
.home-section-head > div > small {
  display:block;
  margin-bottom:9px;
  color:var(--brand-signature);
  font-size:9px;
  font-weight:800;
  line-height:1;
  letter-spacing:.08em;
}
.home-section-head h2 {
  color:var(--home-ink);
  font-size:22px;
  font-weight:800;
  line-height:1.36;
  letter-spacing:-.045em;
  word-break:keep-all;
}
.home-section-head-inline {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:16px;
}
.home-section-link {
  min-height:44px;
  padding:0;
  border:0;
  color:var(--home-ink);
  background:transparent;
  font-size:11px;
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:var(--brand-signature);
  text-underline-offset:5px;
  white-space:nowrap;
}

.reading-card-list { display:grid; gap:11px; }
.reading-card {
  width:100%;
  min-height:188px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"copy number" "action action";
  gap:15px 18px;
  position:relative;
  overflow:hidden;
  padding:23px 20px 20px;
  border:1px solid transparent;
  border-radius:16px;
  text-align:left;
}
.reading-card::before {
  content:'';
  width:3px;
  position:absolute;
  top:20px;
  bottom:20px;
  left:0;
  border-radius:0 3px 3px 0;
  background:var(--brand-signature);
}
.reading-card-traditional { color:#fff; background:#18181b; }
.reading-card-year {
  color:var(--home-ink);
  border-color:var(--home-line);
  background:var(--home-soft);
}
.reading-card-number {
  grid-area:number;
  align-self:start;
  color:var(--brand-signature);
  font-size:clamp(28px,8.5vw,40px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.07em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.reading-card-traditional .reading-card-number { color:rgba(255,255,255,.18); }
.reading-card-copy {
  min-width:0;
  display:flex;
  flex-direction:column;
  grid-area:copy;
}
.reading-card-copy > small {
  display:block;
  margin-bottom:10px;
  color:var(--brand-signature);
  font-size:9px;
  font-weight:800;
  letter-spacing:.07em;
}
.reading-card-traditional .reading-card-copy > small { color:#f2c9cc; }
.reading-card-copy > strong {
  display:block;
  color:inherit;
  font-size:20px;
  font-weight:800;
  line-height:1.38;
  letter-spacing:-.045em;
  word-break:keep-all;
}
.reading-card-copy > span {
  margin-top:8px;
  color:var(--home-muted);
  font-size:10.5px;
  line-height:1.7;
  word-break:keep-all;
}
.reading-card-traditional .reading-card-copy > span { color:rgba(255,255,255,.63); }
.reading-card-action {
  min-height:36px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  grid-area:action;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:11px;
  font-weight:800;
}
.reading-card-action i { font-size:18px; font-style:normal; font-weight:500; line-height:1; }
.reading-card-year .reading-card-action {
  border-top-color:var(--home-line);
  color:var(--brand-signature);
}

.channel-preview-list { border-top:1px solid var(--home-line); }
.channel-preview {
  width:100%;
  min-height:76px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border:0;
  border-bottom:1px solid var(--home-line);
  color:var(--home-ink);
  background:transparent;
  text-align:left;
}
.channel-monogram,
.public-channel-mark {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(var(--brand-signature-rgb),.24);
  border-radius:11px;
  color:var(--brand-signature);
  background:rgba(var(--brand-signature-rgb),.06);
  font-size:11px;
  font-weight:800;
}
.channel-preview > span:nth-child(2),
.public-channel-copy { min-width:0; }
.channel-preview strong,
.public-channel-copy strong {
  display:block;
  overflow:hidden;
  color:inherit;
  font-size:13.5px;
  font-weight:700;
  line-height:1.4;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.channel-preview small,
.public-channel-copy small {
  display:block;
  overflow:hidden;
  margin-top:5px;
  color:var(--home-muted);
  font-size:9.5px;
  line-height:1.45;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.channel-preview em,
.public-channel-row em {
  padding:4px 7px;
  border:1px solid rgba(var(--brand-signature-rgb),.24);
  border-radius:99px;
  color:var(--brand-signature);
  font-size:8px;
  font-style:normal;
  font-weight:800;
  white-space:nowrap;
}

.home-footer {
  margin:0;
  padding:30px var(--page-gutter) 38px;
  border-top:1px solid var(--home-line);
  color:var(--home-muted);
  background:var(--home-soft);
}
.home-footer .footer-logo { color:var(--home-ink); }
.home-footer .footer-logo strong { font-size:17px; font-weight:800; }
.home-footer .footer-logo + p { margin:12px 0 18px; color:var(--home-muted); font-size:9.5px; line-height:1.6; }
.home-footer .footer-links { margin-bottom:14px; color:var(--home-ink); font-size:9px; }
.home-footer > small { color:var(--home-muted); font-size:8px; line-height:1.7; }

/* Public channel directory page */
.channel-page-body {
  --channel-bg:#fff;
  --channel-ink:#18181b;
  --channel-muted:#71717a;
  --channel-line:#e7e5e4;
  --channel-soft:#f6f4f1;
  color:var(--channel-ink);
  background:var(--channel-bg);
}
.channel-page-shell {
  min-height:100dvh;
  color:var(--channel-ink);
  background:var(--channel-bg);
}
.channels-page-main {
  min-height:100dvh;
  padding-bottom:calc(var(--bottom-nav-offset) + 24px);
  background:var(--channel-bg);
}
.channel-directory-page {
  padding:25px var(--page-gutter) 40px;
}
.channel-directory-header > small {
  display:block;
  margin-bottom:8px;
  color:var(--brand-signature);
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
}
.channel-directory-header h1 {
  margin:0;
  color:var(--channel-ink);
  font-size:24px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:-.045em;
}
.channel-directory-header p {
  margin:8px 0 0;
  color:var(--channel-muted);
  font-size:10.5px;
  line-height:1.7;
  word-break:keep-all;
}
.channel-search { position:relative; margin-top:20px; }
.channel-search svg {
  width:18px;
  height:18px;
  position:absolute;
  top:50%;
  left:14px;
  color:var(--channel-muted);
  pointer-events:none;
  transform:translateY(-50%);
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}
.channel-search input {
  width:100%;
  height:48px;
  padding:0 14px 0 42px;
  border:1px solid var(--channel-line);
  border-radius:13px;
  outline:0;
  color:var(--channel-ink);
  background:var(--channel-soft);
  font-size:16px;
}
.channel-search input::placeholder { color:var(--channel-muted); opacity:.9; }
.channel-filters {
  display:flex;
  gap:7px;
  margin:12px calc(var(--page-gutter) * -1) 0;
  padding:0 var(--page-gutter) 4px;
  overflow-x:auto;
  scrollbar-width:none;
}
.channel-filters::-webkit-scrollbar { display:none; }
.channel-filters button {
  min-width:max-content;
  height:34px;
  padding:0 13px;
  border:1px solid var(--channel-line);
  border-radius:99px;
  color:var(--channel-muted);
  background:var(--channel-bg);
  font-size:10px;
  font-weight:700;
}
.channel-filters button[aria-pressed="true"] {
  color:#fff;
  border-color:var(--brand-signature);
  background:var(--brand-signature);
}
.channel-result-status { margin:12px 0 8px; color:var(--channel-muted); font-size:9.5px; }
.channel-result-status b { font-weight:600; }
.public-channel-list { border-top:1px solid var(--channel-line); }
.public-channel-row {
  width:100%;
  min-height:76px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border:0;
  border-bottom:1px solid var(--channel-line);
  color:var(--channel-ink);
  background:transparent;
  text-align:left;
}
.public-channel-row.is-highlighted {
  margin-right:-8px;
  margin-left:-8px;
  padding-right:8px;
  padding-left:8px;
  border-left:3px solid var(--brand-signature);
  background:rgba(var(--brand-signature-rgb),.055);
}
.public-channel-copy small { color:var(--channel-muted); }
.channel-empty { padding:55px 20px; text-align:center; }
.channel-empty[hidden] { display:none; }
.channel-empty b { display:block; color:var(--channel-ink); font-size:13px; }
.channel-empty p { margin:7px 0 0; color:var(--channel-muted); font-size:10px; }
.route-side-menu > nav a {
  width:100%;
  height:57px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 3px;
  border-bottom:1px solid #eee;
  color:#222;
  background:#fff;
  font-size:13px;
}
.route-side-menu > nav a[aria-current="page"] { color:var(--brand-signature); font-weight:700; }
.route-side-menu > nav a b { color:#aaa; font-size:18px; }

.reading-card:focus-visible,
.home-section-link:focus-visible,
.channel-preview:focus-visible,
.channel-search input:focus-visible,
.channel-filters button:focus-visible,
.public-channel-row:focus-visible {
  outline:2px solid var(--brand-signature);
  outline-offset:2px;
}
.channel-search input:focus-visible { border-color:var(--brand-signature); }

html[data-theme="dark"] .home-index {
  --home-bg:#0f0f11;
  --home-ink:#f4f4f5;
  --home-muted:#a1a1aa;
  --home-line:#303034;
  --home-soft:#18181b;
}
html[data-theme="dark"] .reading-card-traditional { border-color:#343438; background:#202023; }
html[data-theme="dark"] .reading-card-year { border-color:#343438; background:#18181b; }
html[data-theme="dark"] .reading-card-year .reading-card-copy > small,
html[data-theme="dark"] .home-section-head > small,
html[data-theme="dark"] .home-section-head > div > small { color:#f2c9cc; }
html[data-theme="dark"] .reading-card-year .reading-card-action { color:#fff; }
html[data-theme="dark"] .channel-monogram { color:#fff; border-color:var(--brand-signature); background:var(--brand-signature); }
html[data-theme="dark"] .channel-preview em { color:#f2c9cc; border-color:var(--brand-signature); }
html[data-theme="dark"] .home-footer { background:#09090b; }

html[data-theme="dark"] .channel-page-body {
  --channel-bg:#141416;
  --channel-ink:#f4f4f5;
  --channel-muted:#a1a1aa;
  --channel-line:#343438;
  --channel-soft:#202023;
}
html[data-theme="dark"] .channel-page-shell,
html[data-theme="dark"] .channels-page-main { background:var(--channel-bg); }
html[data-theme="dark"] .channel-directory-header > small { color:#f2c9cc; }
html[data-theme="dark"] .public-channel-mark { color:#fff; border-color:var(--brand-signature); background:var(--brand-signature); }
html[data-theme="dark"] .public-channel-row em { color:#f2c9cc; border-color:var(--brand-signature); }
html[data-theme="dark"] .route-side-menu > nav a { color:#f4f4f5; border-color:#2f2f33; background:#141416; }
html[data-theme="dark"] .route-side-menu > nav a[aria-current="page"] { color:#f2c9cc; }
html[data-theme="dark"] .route-side-menu > nav a b { color:#71717a; }

@media (max-width:350px) {
  .home-readings,
  .home-channels { padding-right:14px; padding-left:14px; }
  .home-section-head h2 { font-size:20px; }
  .reading-card {
    min-height:176px;
    gap:12px;
    padding:20px 16px 18px;
  }
  .reading-card-copy > strong { font-size:18px; }
  .reading-card-copy > span { font-size:10px; }
  .reading-card-number { font-size:29px; }
  .channel-preview,
  .public-channel-row { grid-template-columns:34px minmax(0,1fr) auto; gap:9px; }
  .channel-monogram,
  .public-channel-mark { width:34px; height:34px; border-radius:10px; }
  .home-footer { padding-right:14px; padding-left:14px; }
  .channel-directory-page { padding-right:14px; padding-left:14px; }
  .channel-filters { margin-right:-14px; margin-left:-14px; padding-right:14px; padding-left:14px; }
}

/* Independent analysis route */
.analysis-page-body { overflow:hidden; }
.analysis-page-shell { min-height:100dvh; }
.analysis-page-background {
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:calc(60px + 28px) 24px calc(var(--bottom-nav-offset) + 28px);
  color:#18181b;
  background:#f7f7f6;
  overflow-y:auto;
  overscroll-behavior-y:contain;
}
.analysis-page-state {
  width:100%;
  max-width:312px;
  padding:28px 22px;
  border:1px solid #e4e4e7;
  border-radius:14px;
  background:#fff;
  text-align:center;
}
.analysis-page-state[hidden],
.analysis-saved[hidden] { display:none !important; }
.analysis-page-state b { display:block; font-size:16px; line-height:1.45; }
.analysis-page-state p { margin:8px 0 0; color:#71717a; font-size:11px; line-height:1.7; }
.analysis-page-state a {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:18px;
  padding:0 18px;
  border-radius:9px;
  color:#fff;
  background:var(--brand-signature);
  font-size:11px;
  font-weight:700;
}
.analysis-page-state a:focus-visible { outline:2px solid var(--brand-signature); outline-offset:3px; }
.analysis-page-body .sheet-backdrop { z-index:125; }
html[data-theme="dark"] .analysis-page-background { color:#f4f4f5; background:#0f0f11; }
html[data-theme="dark"] .analysis-page-state { border-color:#343438; background:#18181b; }
html[data-theme="dark"] .analysis-page-state p { color:#a1a1aa; }

/* Archive profile cards and purchased reading access */
.saved-saju-card {
  grid-template-columns:minmax(0,1fr) 44px 44px;
  grid-template-areas:
    "profile edit delete"
    "readings readings readings"
    "years years years";
  align-items:stretch;
  border-radius:13px;
}
.archive-select { grid-area:profile; }
.chart-edit { grid-area:edit; min-width:44px; }
.chart-delete { grid-area:delete; min-width:44px; }
.saved-reading-actions {
  grid-area:readings;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding:10px 11px 11px;
  border-top:1px solid #f0f0f1;
  background:#fff;
}
.reading-entitlement {
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0 11px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:10.5px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.reading-entitlement:active,
.reading-year-option:active { transform:scale(.97); }
.reading-entitlement .entitlement-mark {
  min-width:13px;
  font-size:12px;
  line-height:1;
  text-align:center;
}
.reading-entitlement.is-owned {
  color:#fff;
  background:var(--brand-signature);
}
.reading-entitlement.is-upsell {
  color:#9a2730;
  border-color:rgba(var(--brand-signature-rgb),.32);
  background:var(--brand-signature-soft);
}
.reading-entitlement.is-more {
  color:#52525b;
  border-color:#e4e4e7;
  background:#f4f4f5;
}
.reading-entitlement.is-locked {
  color:#6b6b72;
  border-color:#dedee2;
  background:#fff;
}
.saved-year-picker {
  grid-area:years;
  padding:2px 11px 12px;
  border-top:1px solid #f0f0f1;
  background:#fafafa;
}
.saved-year-picker[hidden] { display:none; }
.saved-year-picker > small {
  display:block;
  padding:9px 1px 7px;
  color:#71717a;
  font-size:9px;
  font-weight:700;
}
.saved-year-options {
  display:flex;
  gap:7px;
  padding:1px 1px 3px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.saved-year-options::-webkit-scrollbar { display:none; }
.reading-year-option {
  min-width:74px;
  min-height:48px;
  flex:0 0 auto;
  display:grid;
  place-content:center;
  gap:4px;
  padding:6px 10px;
  border:1px solid #dedee2;
  border-radius:10px;
  color:#3f3f46;
  background:#fff;
  text-align:center;
}
.reading-year-option b { font-size:11px; }
.reading-year-option span { color:#71717a; font-size:9px; font-weight:700; }
.reading-year-option.is-owned {
  color:#fff;
  border-color:var(--brand-signature);
  background:var(--brand-signature);
}
.reading-year-option.is-owned span { color:#fff; }
.reading-year-option.is-available span { color:#9a2730; }
.archive-select:focus-visible,
.chart-edit:focus-visible,
.chart-delete:focus-visible {
  position:relative;
  z-index:1;
  outline:2px solid var(--brand-signature);
  outline-offset:-3px;
}
.archive-add:focus-visible,
.reading-entitlement:focus-visible,
.reading-year-option:focus-visible {
  outline:2px solid var(--brand-signature);
  outline-offset:2px;
}

html[data-theme="dark"] .saved-reading-actions {
  border-top-color:#2f2f33;
  background:#18181b;
}
html[data-theme="dark"] .reading-entitlement.is-owned {
  color:#fff;
  background:var(--brand-signature);
}
html[data-theme="dark"] .reading-entitlement.is-upsell {
  color:#f6dcdd;
  border-color:var(--brand-signature);
  background:var(--brand-signature-dark-soft);
}
html[data-theme="dark"] .reading-entitlement.is-more,
html[data-theme="dark"] .reading-entitlement.is-locked {
  color:#d4d4d8;
  border-color:#3f3f46;
  background:#27272a;
}
html[data-theme="dark"] .saved-year-picker {
  border-top-color:#2f2f33;
  background:#141416;
}
html[data-theme="dark"] .saved-year-picker > small { color:#a1a1aa; }
html[data-theme="dark"] .reading-year-option {
  color:#f4f4f5;
  border-color:#3f3f46;
  background:#202023;
}
html[data-theme="dark"] .reading-year-option span { color:#a1a1aa; }
html[data-theme="dark"] .reading-year-option.is-owned {
  color:#fff;
  border-color:var(--brand-signature);
  background:var(--brand-signature);
}
html[data-theme="dark"] .reading-year-option.is-owned span { color:#fff; }
html[data-theme="dark"] .reading-year-option.is-available span { color:#f6dcdd; }

@media (max-width:350px) {
  .saved-saju-card { grid-template-columns:minmax(0,1fr) 44px 44px; }
  .saved-reading-actions { gap:6px; padding-right:9px; padding-left:9px; }
  .reading-entitlement { min-height:38px; padding-right:9px; padding-left:9px; font-size:10px; }
  .saved-year-picker { padding-right:9px; padding-left:9px; }
}

/* Protected deletion for profiles with purchased readings */
.delete-confirm-layer {
  position:fixed;
  z-index:180;
  inset:0;
  width:100%;
  max-width:none;
  height:100dvh;
  max-height:none;
  display:grid;
  place-items:center;
  margin:0;
  padding:24px 18px;
  border:0;
  background:rgba(9,9,11,.64);
  backdrop-filter:blur(4px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.delete-confirm-layer:not([open]) { display:none; }
.delete-confirm-layer::backdrop {
  background:transparent;
}
.delete-confirm-dialog {
  width:100%;
  max-width:380px;
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
  padding:24px 20px 20px;
  border:1px solid #e4e4e7;
  border-radius:16px;
  color:#18181b;
  background:#fff;
  box-shadow:0 22px 70px rgba(0,0,0,.24);
}
.delete-confirm-dialog > small {
  display:block;
  color:var(--brand-signature);
  font-size:9px;
  font-weight:800;
  letter-spacing:.05em;
}
.delete-confirm-dialog h2 {
  margin:7px 0 0;
  font-size:19px;
  line-height:1.45;
  letter-spacing:-.04em;
  word-break:keep-all;
}
.delete-confirm-dialog > p {
  margin:10px 0 0;
  color:#63636b;
  font-size:11px;
  line-height:1.75;
  word-break:keep-all;
}
.delete-purchase-summary {
  margin-top:14px;
  padding:11px 12px;
  border-left:3px solid var(--brand-signature);
  color:#7d232b;
  background:var(--brand-signature-soft);
  font-size:10px;
  font-weight:700;
  line-height:1.6;
}
.delete-purchase-summary[hidden],
.delete-consent-field[hidden] { display:none; }
.delete-consent-field {
  display:grid;
  gap:7px;
  margin-top:16px;
}
.delete-consent-field > span {
  color:#52525b;
  font-size:10px;
  line-height:1.5;
}
.delete-consent-field > b {
  color:#18181b;
  font-size:12px;
}
.delete-consent-field input {
  width:100%;
  height:48px;
  padding:0 13px;
  border:1px solid #d4d4d8;
  border-radius:10px;
  outline:0;
  color:#18181b;
  background:#fff;
  font-size:16px;
}
.delete-consent-field input:focus {
  border-color:var(--brand-signature);
  box-shadow:0 0 0 3px rgba(var(--brand-signature-rgb),.11);
}
.delete-consent-field input[aria-invalid="true"] { border-color:var(--brand-signature); }
.delete-consent-field em {
  min-height:15px;
  color:#71717a;
  font-size:9px;
  font-style:normal;
  line-height:1.5;
}
.delete-confirm-error {
  margin:12px 0 0 !important;
  padding:9px 10px;
  border-radius:8px;
  color:#8d242c !important;
  background:var(--brand-signature-soft);
  font-size:9px !important;
  line-height:1.55 !important;
}
.delete-confirm-error[hidden] { display:none; }
.delete-confirm-actions {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:8px;
  margin-top:18px;
}
.delete-confirm-actions button {
  min-height:46px;
  border:0;
  border-radius:10px;
  font-size:11px;
  font-weight:800;
}
.delete-confirm-cancel { color:#3f3f46; background:#f4f4f5; }
.delete-confirm-submit { color:#fff; background:var(--brand-signature); }
.delete-confirm-submit:disabled { color:#a1a1aa; background:#e4e4e7; cursor:not-allowed; }
.delete-confirm-actions button:focus-visible,
.delete-consent-field input:focus-visible {
  outline:2px solid var(--brand-signature);
  outline-offset:2px;
}

html[data-theme="dark"] .delete-confirm-layer { background:rgba(0,0,0,.72); }
html[data-theme="dark"] .delete-confirm-dialog {
  color:#f4f4f5;
  border-color:#3f3f46;
  background:#18181b;
  box-shadow:0 22px 70px rgba(0,0,0,.5);
}
html[data-theme="dark"] .delete-confirm-dialog > small { color:#f6dcdd; }
html[data-theme="dark"] .delete-confirm-dialog > p,
html[data-theme="dark"] .delete-consent-field > span,
html[data-theme="dark"] .delete-consent-field em { color:#a1a1aa; }
html[data-theme="dark"] .delete-purchase-summary {
  color:#f6dcdd;
  background:var(--brand-signature-dark-soft);
}
html[data-theme="dark"] .delete-consent-field > b { color:#f4f4f5; }
html[data-theme="dark"] .delete-consent-field input {
  color:#f4f4f5;
  border-color:#52525b;
  background:#202023;
}
html[data-theme="dark"] .delete-confirm-cancel { color:#e4e4e7; background:#27272a; }
html[data-theme="dark"] .delete-confirm-submit:disabled { color:#71717a; background:#303034; }
html[data-theme="dark"] .delete-confirm-error { color:#f6dcdd !important; background:var(--brand-signature-dark-soft); }

@media (max-width:350px) {
  .delete-confirm-layer { padding-right:14px; padding-left:14px; }
  .delete-confirm-dialog { padding-right:17px; padding-left:17px; }
}

/* Public/private channel directory and local channel creation */
.channel-directory-title-row {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.channel-directory-title-row > div { min-width:0; }
.channel-directory-title-row small {
  display:block;
  margin-bottom:8px;
  color:var(--brand-signature);
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
}
.channel-create-trigger {
  min-width:max-content;
  min-height:44px;
  padding:0 13px;
  border:1px solid var(--brand-signature);
  border-radius:11px;
  color:#fff;
  background:var(--brand-signature);
  font-size:10px;
  font-weight:800;
}
.channel-create-trigger span { margin-right:2px; font-size:14px; font-weight:500; }
.channel-scope-switch {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:21px;
  border-bottom:1px solid var(--channel-line);
}
.channel-scope-switch button {
  min-height:46px;
  position:relative;
  border:0;
  color:var(--channel-muted);
  background:transparent;
  font-size:12px;
  font-weight:700;
}
.channel-scope-switch button::after {
  content:'';
  position:absolute;
  right:14px;
  bottom:-1px;
  left:14px;
  height:2px;
  background:transparent;
}
.channel-scope-switch button[aria-pressed="true"] { color:var(--channel-ink); }
.channel-scope-switch button[aria-pressed="true"]::after { background:var(--brand-signature); }
.channel-scope-switch b {
  min-width:19px;
  display:inline-grid;
  place-items:center;
  margin-left:3px;
  padding:2px 5px;
  border-radius:99px;
  color:var(--channel-muted);
  background:var(--channel-soft);
  font-size:8px;
}
.channel-scope-switch button[aria-pressed="true"] b { color:var(--brand-signature); }
.channel-row.is-private .public-channel-mark {
  color:var(--channel-ink);
  border-color:var(--channel-line);
  background:var(--channel-soft);
}
.channel-row.is-private em {
  color:var(--channel-muted);
  border-color:var(--channel-line);
  background:var(--channel-soft);
}
.channel-empty button {
  min-height:42px;
  margin-top:16px;
  padding:0 15px;
  border:1px solid var(--brand-signature);
  border-radius:10px;
  color:#fff;
  background:var(--brand-signature);
  font-size:10px;
  font-weight:800;
}
.channel-empty button[hidden] { display:none; }

.channel-create-layer {
  position:fixed;
  inset:0;
  width:100%;
  max-width:none;
  height:100dvh;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  color:var(--channel-ink);
  background:transparent;
  overflow:hidden;
}
.channel-create-layer:not([open]) { display:none; }
.channel-create-layer[open] { display:grid; align-items:end; justify-items:center; }
.channel-create-layer::backdrop { background:rgba(9,9,11,.7); backdrop-filter:blur(4px); }
.channel-create-dialog {
  width:100%;
  max-width:var(--app-width);
  max-height:calc(100dvh - 28px);
  overflow-y:auto;
  padding:22px 18px max(20px, env(safe-area-inset-bottom));
  border:1px solid var(--channel-line);
  border-bottom:0;
  border-radius:18px 18px 0 0;
  color:var(--channel-ink);
  background:var(--channel-bg);
  box-shadow:0 -20px 60px rgba(0,0,0,.22);
  overscroll-behavior:contain;
}
.channel-create-dialog > header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.channel-create-dialog > header small {
  display:block;
  color:var(--brand-signature);
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
}
.channel-create-dialog h2 {
  margin:5px 0 0;
  color:var(--channel-ink);
  font-size:20px;
  line-height:1.35;
  letter-spacing:-.04em;
}
.channel-create-dialog > header button {
  width:40px;
  height:40px;
  flex:none;
  border:0;
  border-radius:50%;
  color:var(--channel-muted);
  background:var(--channel-soft);
  font-size:20px;
}
.channel-create-dialog > p {
  margin:8px 0 17px;
  color:var(--channel-muted);
  font-size:10px;
  line-height:1.65;
}
.channel-create-field { display:grid; gap:7px; margin-top:11px; }
.channel-create-field > span,
.channel-visibility-choice legend {
  color:var(--channel-ink);
  font-size:10px;
  font-weight:800;
}
.channel-create-field > span em { color:var(--channel-muted); font-size:8px; font-style:normal; font-weight:500; }
.channel-create-field input,
.channel-create-field select,
.channel-create-field textarea {
  width:100%;
  min-height:46px;
  padding:0 12px;
  border:1px solid var(--channel-line);
  border-radius:10px;
  outline:0;
  color:var(--channel-ink);
  background:var(--channel-soft);
  font-family:var(--font);
  font-size:16px;
}
.channel-create-field textarea {
  min-height:66px;
  padding-top:11px;
  padding-bottom:11px;
  resize:vertical;
  line-height:1.5;
}
.channel-create-field > small { margin-top:-3px; color:var(--channel-muted); font-size:8px; text-align:right; }
.channel-create-field > small b { color:inherit; font-weight:600; }
.channel-visibility-choice {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:16px 0 0;
  padding:0;
  border:0;
}
.channel-visibility-choice legend { margin-bottom:8px; }
.channel-visibility-choice label { min-width:0; }
.channel-visibility-choice input { position:absolute; opacity:0; pointer-events:none; }
.channel-visibility-choice label > span {
  min-height:65px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px 11px;
  border:1px solid var(--channel-line);
  border-radius:11px;
  color:var(--channel-muted);
  background:var(--channel-soft);
}
.channel-visibility-choice label b { color:var(--channel-ink); font-size:11px; }
.channel-visibility-choice label small { margin-top:5px; font-size:8px; line-height:1.4; }
.channel-visibility-choice input:checked + span {
  border-color:var(--brand-signature);
  box-shadow:inset 0 0 0 1px var(--brand-signature);
  background:rgba(var(--brand-signature-rgb),.07);
}
.channel-create-error {
  margin:12px 0 0 !important;
  padding:9px 10px;
  border-radius:8px;
  color:#8d242c !important;
  background:var(--brand-signature-soft);
  font-size:9px !important;
  line-height:1.55 !important;
}
.channel-create-error[hidden] { display:none; }
.channel-create-actions {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:8px;
  margin-top:17px;
}
.channel-create-actions button {
  min-height:46px;
  border:0;
  border-radius:10px;
  color:var(--channel-ink);
  background:var(--channel-soft);
  font-size:11px;
  font-weight:800;
}
.channel-create-actions button[type="submit"] { color:#fff; background:var(--brand-signature); }
.channel-create-trigger:focus-visible,
.channel-scope-switch button:focus-visible,
.channel-empty button:focus-visible,
.channel-create-dialog button:focus-visible,
.channel-create-dialog input:focus-visible,
.channel-create-dialog select:focus-visible,
.channel-create-dialog textarea:focus-visible,
.channel-visibility-choice input:focus-visible + span {
  outline:2px solid var(--brand-signature);
  outline-offset:2px;
}
.channel-create-field input[aria-invalid="true"] { border-color:var(--brand-signature); }

html[data-theme="dark"] .channel-directory-title-row small,
html[data-theme="dark"] .channel-create-dialog > header small { color:#f6dcdd; }
html[data-theme="dark"] .channel-row.is-private .public-channel-mark {
  color:#f4f4f5;
  border-color:#46464b;
  background:#27272a;
}
html[data-theme="dark"] .channel-row.is-private em {
  color:#d4d4d8;
  border-color:#46464b;
  background:#27272a;
}
html[data-theme="dark"] .channel-create-error { color:#f6dcdd !important; background:var(--brand-signature-dark-soft); }

@media (max-width:350px) {
  .channel-directory-title-row { gap:9px; }
  .channel-create-trigger { padding-right:10px; padding-left:10px; font-size:9.5px; }
  .channel-scope-switch button { font-size:11px; }
  .channel-create-dialog { padding-right:15px; padding-left:15px; }
  .channel-visibility-choice label > span { padding-right:9px; padding-left:9px; }
}

/* Shared mobile typography hierarchy */
:root {
  --type-caption:14px;
  --type-control:15px;
  --type-body:16px;
}
body { font-size:var(--type-body); }

/* Shared navigation, sheets and feedback */
.logo-seal { font-size:var(--type-caption); }
.bottom-nav b { font-size:var(--type-caption); line-height:1.2; }
.sheet-head small { font-size:var(--type-caption); line-height:1.4; }
.login-box span { font-size:var(--type-control); line-height:1.6; }
.login-box button { font-size:var(--type-control); }
.side-menu > nav button,
.route-side-menu > nav a { font-size:var(--type-body); }
.toast { font-size:var(--type-control); line-height:1.45; }
.submit-button,
.kakao-login,
.email-login,
.result-confirm { font-size:var(--type-control); }

/* Index hero and home sections */
.banner-copy small,
.rank-badge,
.banner-blue .rank-badge { font-size:var(--type-caption); line-height:1.3; }
.rank-badge,
.banner-blue .rank-badge { min-width:54px; }
.hero-banner { min-height:278px; }
.banner-copy p { font-size:var(--type-control); line-height:1.6; }
.banner-copy button { font-size:var(--type-control); }
.home-section-head > small,
.home-section-head > div > small,
.reading-card-copy > small { font-size:var(--type-caption); line-height:1.35; }
.reading-card-copy > span { font-size:var(--type-control); line-height:1.75; }
.reading-card { min-height:210px; }
.home-section-link { font-size:var(--type-caption); }
.reading-card-action { font-size:var(--type-control); }
.channel-monogram,
.public-channel-mark { font-size:var(--type-caption); }
.channel-preview strong,
.public-channel-copy strong { font-size:17px; }
.channel-preview small,
.public-channel-copy small { font-size:var(--type-control); line-height:1.5; }
.channel-preview em,
.public-channel-row em { font-size:var(--type-caption); }
.channel-preview,
.public-channel-row { min-height:92px; }
.home-footer .footer-logo + p,
.home-footer .footer-links,
.home-footer > small { font-size:var(--type-caption); line-height:1.7; }

/* Birth input */
.birth-sheet .birth-profile-grid > label > span,
.birth-sheet .birth-profile-grid > fieldset > legend,
.birth-sheet .moment-parts label > span,
.birth-sheet .leap-month-option span,
.calendar-inline > span,
.birth-sheet .birth-profile-grid .choice-row span,
.birth-sheet .calendar-inline .choice-row span { font-size:var(--type-caption)!important; }
.birth-sheet .birth-profile-grid input[name="nickname"] { font-size:16px; }
.birth-sheet .moment-field > legend { font-size:var(--type-control); }
.exact-time-field em { font-size:var(--type-caption); }
.time-entry-row .unknown-time-toggle,
.unknown-time-toggle { font-size:var(--type-caption); }
.birth-sheet .auto-time-bucket strong { font-size:var(--type-caption); line-height:1.4; }
.auto-time-bucket span,
.auto-time-bucket span b,
.unknown-time-toggle b { font-size:var(--type-caption); }

/* Login, result and archive */
.login-benefits p { font-size:var(--type-control); line-height:1.6; }
.login-policy { font-size:var(--type-caption); line-height:1.6; }
.result-date,
.result-pillars small,
.result-pillars strong { font-size:var(--type-caption); }
.result-notice b,
.result-notice p { font-size:var(--type-control); line-height:1.7; }
.archive-empty p,
.archive-guide { font-size:var(--type-control); line-height:1.65; }
.archive-empty b { font-size:18px; }
.archive-create,
.archive-add,
.chart-edit,
.chart-delete,
.reading-entitlement,
.saved-summary small,
.saved-year-picker > small,
.reading-year-option span { font-size:var(--type-caption); }
.reading-year-option b { font-size:var(--type-control); }
.saved-avatar { font-size:16px; }
.saved-summary strong { font-size:16px; }
.reading-entitlement .entitlement-mark { font-size:16px; }
.reading-year-option { min-width:82px; min-height:54px; }
.saved-summary small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Protected deletion */
.delete-confirm-dialog > small,
.delete-consent-field > span,
.delete-consent-field em { font-size:var(--type-caption); line-height:1.55; }
.delete-confirm-dialog > p,
.delete-purchase-summary,
.delete-consent-field > b { font-size:var(--type-control); }
.delete-confirm-error { font-size:var(--type-caption)!important; }
.delete-confirm-actions button { font-size:var(--type-control); }

/* Channel directory and creation */
.channel-directory-title-row small { font-size:var(--type-caption); line-height:1.35; }
.channel-directory-header p { font-size:var(--type-body); line-height:1.7; }
.channel-create-trigger { font-size:var(--type-control); }
.channel-scope-switch button { font-size:var(--type-body); }
.channel-scope-switch b { min-width:27px; font-size:var(--type-caption); }
.channel-filters button { height:38px; font-size:var(--type-control); }
.channel-result-status { font-size:var(--type-caption); }
.channel-empty b { font-size:18px; }
.channel-empty p { font-size:var(--type-body); line-height:1.7; }
.channel-empty button { font-size:var(--type-body); }
.channel-create-dialog > header small { font-size:var(--type-caption); }
.channel-create-dialog > p { font-size:var(--type-body); line-height:1.7; }
.channel-create-field > span,
.channel-visibility-choice legend,
.channel-visibility-choice label b { font-size:var(--type-control); }
.channel-create-field > span em,
.channel-create-field > small,
.channel-visibility-choice label small { font-size:var(--type-caption); line-height:1.45; }
.channel-visibility-choice label > span { min-height:88px; }
.channel-create-error { font-size:var(--type-control)!important; }
.channel-create-actions button { font-size:var(--type-body); }

/* Independent natal analysis */
.analysis-page-state p { font-size:var(--type-body); line-height:1.75; }
.analysis-page-state a { font-size:var(--type-control); }
.analysis-page-state b { font-size:18px; }
.analysis-header b { font-size:17px; }
.analysis-header small { font-size:var(--type-caption); line-height:1.4; }
.analysis-tabs { overflow-x:auto; scrollbar-width:none; }
.analysis-tabs::-webkit-scrollbar { display:none; }
.analysis-tabs button { min-width:72px; padding-right:4px; padding-left:4px; font-size:var(--type-control); line-height:1.35; }
.analysis-hero > small,
.analysis-card-head small,
.analysis-card-head > span,
.analysis-section-title small,
.analysis-pillar-grid small,
.analysis-pillar-grid span,
.balance-ring small,
.element-bars em,
.phase-two-evidence small,
.phase-two-evidence span,
.structure-summary small,
.structure-summary span,
.position-ten-gods > small,
.position-ten-gods small,
.position-ten-gods span,
.relation-evidence > small,
.relation-evidence span,
.analysis-closing small,
.luck-now-card > small,
.luck-now-grid small,
.luck-basis-grid small,
.luck-basis-grid span,
.luck-section-head small,
.luck-section-head > span,
.luck-decade-card small,
.luck-decade-card p,
.luck-year-card > div small,
.luck-year-card em { font-size:var(--type-caption); line-height:1.5; }
.pillar-reading-guide,
.structure-guide,
.luck-guide,
.analysis-disclaimer { font-size:var(--type-caption); line-height:1.7; }
.analysis-hero p,
.analysis-section-title p,
.shaman-voice-note p,
.analysis-category-body p,
.analysis-closing p,
.luck-now-card > p,
.luck-year-card > p,
.luck-closing p { font-size:var(--type-body); line-height:1.75; overflow-wrap:break-word; }
.analysis-category-copy strong { font-size:17px; line-height:1.55; overflow-wrap:break-word; }
.balance-copy span,
.element-bars span,
.structure-summary b,
.position-ten-gods b,
.luck-now-grid b,
.luck-basis-grid b,
.luck-decade-card strong { font-size:var(--type-control); line-height:1.55; }
.balance-copy b,
.phase-two-evidence b,
.luck-year-card > strong { font-size:var(--type-body); line-height:1.55; }
.phase-two-evidence b { overflow:visible; text-overflow:clip; white-space:normal; }
.position-ten-gods b,
.position-ten-gods span { overflow-wrap:break-word; }
.analysis-pillar-grid div { min-height:100px; padding-right:2px; padding-left:2px; }
.analysis-pillar-grid small,
.analysis-pillar-grid b,
.analysis-pillar-grid span { white-space:nowrap; }
.luck-basis-grid > div { grid-template-columns:76px 72px minmax(0,1fr); }
.luck-decade-card { min-width:148px; }
.luck-decade-card.current { min-width:156px; }
.luck-year-card > div {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:8px;
}
.luck-year-card > div span { min-width:0; flex-wrap:wrap; }
.luck-year-card em { white-space:nowrap; }

@media (max-width:350px) {
  .channel-directory-title-row { flex-wrap:wrap; }
  .channel-create-trigger,
  .channel-scope-switch button { font-size:var(--type-control); }
  .analysis-category-copy strong { font-size:17px; }
  .analysis-category-body p,
  .analysis-hero p { font-size:var(--type-body); }
  .structure-summary > div { grid-template-columns:86px minmax(0,1fr); }
  .luck-basis-grid > div { grid-template-columns:72px minmax(0,1fr); gap:7px; }
  .luck-basis-grid span { grid-column:1/-1; }
}

/* SajuSum signature logo */
.logo,
.footer-logo {
  min-height:44px;
  align-items:center;
  gap:8px;
  line-height:0;
}
.brand-symbol {
  width:auto;
  height:36px;
  display:block;
  flex:none;
  object-fit:contain;
}
.brand-wordmark {
  color:var(--brand-signature);
  font-family:var(--font)!important;
  font-size:20px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.055em;
  white-space:nowrap;
}
.side-head .brand-symbol,
.home-footer .brand-symbol { height:34px; }
.home-footer .brand-wordmark { font-size:19px; }
.home-footer .footer-story {
  margin:14px 0 20px;
  color:var(--home-muted);
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  letter-spacing:-.025em;
  word-break:keep-all;
}
.home-footer .footer-story > span {
  display:block;
  white-space:nowrap;
  transform-origin:left center;
}
.home-footer .footer-business {
  margin-top:28px;
}
.home-footer .footer-business a {
  color:inherit;
  font-weight:600;
  text-decoration:none;
}
.home-footer .footer-business a:focus-visible {
  border-radius:3px;
  outline:2px solid var(--brand-signature);
  outline-offset:3px;
}
.home-footer .footer-business > .footer-service-note {
  white-space:normal;
  transform:none;
}
.home-footer .footer-links,
.home-footer > small {
  font-size:16px;
  line-height:1.75;
}
.home-footer > small {
  display:block;
}

/* Reading products — shared editorial image system and one signature marker. */
.home-readings .reading-card {
  min-height:0;
  display:block;
  padding:0;
  border:1px solid #343438;
  color:#fff;
  background:#18181b;
}
.home-readings .reading-card::before { display:none; }
.reading-card-media {
  height:156px;
  display:block;
  position:relative;
  overflow:hidden;
  background:#111113;
}
.reading-card-media::after {
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:42%;
  background:linear-gradient(180deg,transparent,rgba(24,24,27,.72));
  pointer-events:none;
}
.reading-card-media img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.reading-card-year .reading-card-media img { object-position:center 54%; }
.home-readings .reading-card-number {
  min-height:32px;
  display:inline-flex;
  align-items:center;
  position:absolute;
  z-index:2;
  top:14px;
  right:14px;
  padding:0 11px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:#fff;
  background:var(--brand-signature);
  box-shadow:0 5px 18px rgba(0,0,0,.24);
  font-size:14px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
}
.home-readings .reading-card-copy { padding:19px 20px 0; }
.home-readings .reading-card-copy > small { color:#f2c9cc; }
.home-readings .reading-card-copy > span { color:rgba(255,255,255,.68); }
.home-readings .reading-card-action,
.home-readings .reading-card-year .reading-card-action {
  margin:18px 20px 20px;
  color:#fff;
  border-top-color:rgba(255,255,255,.16);
}
@media (max-width:350px) {
  .reading-card-media { height:140px; }
  .home-readings .reading-card-copy { padding-right:16px; padding-left:16px; }
  .home-readings .reading-card-action,
  .home-readings .reading-card-year .reading-card-action {
    margin-right:16px;
    margin-left:16px;
  }
}
.logo:focus-visible,
.footer-logo:focus-visible {
  border-radius:6px;
  outline:2px solid var(--brand-signature);
  outline-offset:4px;
}

@media (max-width:400px) {
  .home-footer .footer-story > span {
    width:104.167%;
    transform:scaleX(.96);
  }
}

@media (max-width:350px) {
  .top-header .brand-symbol { height:34px; }
  .top-header .brand-wordmark { font-size:19px; }
  .home-footer .footer-story {
    margin-right:-8px;
    margin-left:-8px;
    letter-spacing:-.06em;
  }
  .home-footer .footer-story > span {
    width:114.943%;
    transform:scaleX(.87);
  }
}

/* Keep the main reading proposition on a single mobile line. */
#home-readings-title {
  font-size:clamp(14px,3.45vw,16px);
  line-height:1.45;
  letter-spacing:-.09em;
  white-space:nowrap;
}

@media (max-width:350px) {
  #home-readings-title {
    width:107.527%;
    transform:scaleX(.93);
    transform-origin:left center;
  }
}

/* Footer information hierarchy */
.home-footer .footer-story,
.home-footer .footer-links,
.home-footer > small {
  font-size:14px;
  line-height:1.75;
}

.home-footer .footer-copyright,
.home-footer .footer-company-line {
  font-size:14px;
}

/* Reading products: uncropped 16:9 imagery keeps mobile cards compact. */
.home-readings .reading-card {
  aspect-ratio:16 / 9;
  min-height:0;
  position:relative;
  isolation:isolate;
  display:block;
  overflow:hidden;
  padding:0;
}
.home-readings .reading-card-media {
  width:100%;
  height:100%;
  position:absolute;
  z-index:0;
  inset:0;
  display:block;
}
.home-readings .reading-card-media img,
.home-readings .reading-card-year .reading-card-media img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.home-readings .reading-card-media::after {
  inset:0;
  height:auto;
  background:linear-gradient(180deg,rgba(12,12,14,.04) 18%,rgba(12,12,14,.5) 58%,rgba(12,12,14,.98) 100%);
}
.home-readings .reading-card-number {
  top:12px;
  right:12px;
}
.home-readings .reading-card-copy {
  position:absolute;
  z-index:1;
  right:18px;
  bottom:57px;
  left:18px;
  padding:0;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}
.home-readings .reading-card-copy > small { margin-bottom:3px; }
.home-readings .reading-card-copy > span {
  width:1px;
  height:1px;
  position:absolute;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.home-readings .reading-card-action,
.home-readings .reading-card-year .reading-card-action {
  min-height:34px;
  position:absolute;
  z-index:1;
  right:18px;
  bottom:12px;
  left:18px;
  align-items:center;
  margin:0;
  padding-top:8px;
}
@media (max-width:350px) {
  .home-readings .reading-card { aspect-ratio:16 / 9; }
  .home-readings .reading-card-media { height:100%; }
  .home-readings .reading-card-copy {
    right:14px;
    bottom:53px;
    left:14px;
    padding:0;
  }
  .home-readings .reading-card-action,
  .home-readings .reading-card-year .reading-card-action {
    right:14px;
    bottom:10px;
    left:14px;
    margin:0;
  }
}

/* Base mobile typography scale; final role overrides are authoritative. */
:root {
  --type-caption:clamp(14px,calc(11.42px + .806vw),15px);
  --type-control:clamp(15px,calc(12.42px + .806vw),16px);
  --type-body:clamp(16px,calc(13.42px + .806vw),17px);
  --type-title-sm:clamp(18px,calc(12.84px + 1.613vw),20px);
  --type-title-md:clamp(20px,calc(14.84px + 1.613vw),22px);
  --type-title-lg:clamp(25px,calc(17.26px + 2.419vw),28px);
}

/* Shared chrome and controls */
.brand-wordmark { font-size:clamp(19px,calc(16.42px + .806vw),20px); }
.home-footer .brand-wordmark { font-size:clamp(18px,calc(15.42px + .806vw),19px); }
.banner-copy h2 { font-size:var(--type-title-lg); }
.sheet-head h2,
.channel-create-dialog h2 { font-size:var(--type-title-sm); }
.sheet-close,
.menu-close,
.theme-toggle,
.icon-button,
.channel-create-dialog > header button {
  min-width:44px;
  min-height:44px;
}
.login-box button,
.reading-entitlement,
.channel-filters button,
.channel-empty button { min-height:44px; }
.side-menu { overflow-y:auto; }

/* Index */
.home-section-head h2 { font-size:var(--type-title-md); }
.reading-card-copy > strong { font-size:var(--type-title-sm); }
.channel-preview strong,
.public-channel-copy strong { font-size:clamp(16px,calc(13.42px + .806vw),17px); }
.home-footer .footer-story,
.home-footer .footer-links,
.home-footer > small {
  font-size:var(--type-caption);
  line-height:1.75;
}
.home-footer .footer-copyright,
.home-footer .footer-company-line {
  font-size:12px;
  line-height:1.75;
}
.home-footer .footer-story {
  margin-right:0;
  margin-left:0;
  letter-spacing:-.025em;
}
.home-footer .footer-story > span {
  width:auto;
  white-space:normal;
  overflow-wrap:break-word;
  transform:none;
}

/* Forms stay at 16px or larger to prevent mobile browser auto-zoom. */
.birth-sheet input,
.birth-sheet select,
.login-sheet input,
.channel-search input,
.channel-create-field input,
.channel-create-field select,
.channel-create-field textarea,
.delete-consent-field input { font-size:16px; }

/* Analysis titles scale without shrinking its long-form reading copy. */
.analysis-hero h2 { font-size:clamp(24px,calc(13.68px + 3.226vw),28px); }
.analysis-card-head h3,
.analysis-section-title h3,
.luck-section-head h3 { font-size:var(--type-title-sm); }
.analysis-category-copy strong { font-size:clamp(16px,calc(13.42px + .806vw),17px); }

@media (max-width:380px) {
  :root { --page-gutter:14px; }
  .channel-preview,
  .public-channel-row {
    grid-template-columns:34px minmax(0,1fr) auto;
    gap:9px;
  }
  .channel-monogram,
  .public-channel-mark { width:34px; height:34px; }
  .channel-visibility-choice { grid-template-columns:1fr; }
  .analysis-pillar-grid div { min-width:0; }
}

@media (max-width:360px) {
  /* A long proposition cannot remain legible on one line at 320px. */
  #home-readings-title {
    width:auto;
    white-space:normal;
    transform:none;
  }
  .home-section-head-inline { gap:10px; }
  .home-section-link { align-self:start; }
}

@media (max-height:700px) and (max-width:444px) {
  /* Preserve type size on short phones; reclaim space from chrome instead. */
  .birth-sheet { padding-top:6px; }
  .birth-sheet .sheet-head { margin-bottom:6px; }
  #birth-form,
  .birth-moment-card { gap:6px; }
}

/* Channel ritual symbols - shared by Index TOP 5 and directory */
.channel-preview,
.public-channel-row {
  grid-template-columns:44px minmax(0,1fr) auto;
  gap:12px;
}
.channel-symbol {
  position:relative;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex:none;
  color:var(--brand-signature);
  border:1px solid rgba(var(--brand-signature-rgb),.44);
  border-radius:15px 15px 15px 5px;
  background:radial-gradient(circle at 50% 42%,rgba(var(--brand-signature-rgb),.18),rgba(var(--brand-signature-rgb),.045) 72%);
  box-shadow:inset 0 0 0 3px rgba(var(--brand-signature-rgb),.05);
  overflow:hidden;
}
.channel-symbol::before,
.channel-symbol::after {
  content:"";
  position:absolute;
  pointer-events:none;
}
.channel-symbol::before {
  inset:6px;
  border:1px solid currentColor;
  border-radius:10px 10px 10px 3px;
  opacity:.16;
  transform:rotate(45deg) scale(.73);
}
.channel-symbol::after {
  width:3px;
  height:3px;
  top:5px;
  right:7px;
  border-radius:50%;
  background:currentColor;
  box-shadow:-26px 27px 0 currentColor;
  opacity:.58;
}
.channel-symbol svg {
  position:relative;
  z-index:1;
  width:29px;
  height:29px;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.channel-preview-copy,
.public-channel-copy { min-width:0; }
.channel-row.is-private .channel-symbol {
  color:var(--channel-muted);
  border-color:var(--channel-line);
  background:var(--channel-surface-soft);
}
html[data-theme="dark"] .channel-symbol {
  color:#f6dcdd;
  border-color:rgba(var(--brand-signature-rgb),.72);
  background:radial-gradient(circle at 50% 42%,rgba(var(--brand-signature-rgb),.34),rgba(var(--brand-signature-rgb),.10) 72%);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.025);
}
html[data-theme="dark"] .channel-row.is-private .channel-symbol {
  color:#d4d4d8;
  border-color:#3f3f46;
  background:#202023;
}
@media (max-width:380px) {
  .channel-preview,
  .public-channel-row {
    grid-template-columns:40px minmax(0,1fr) auto;
    gap:10px;
  }
  .channel-symbol { width:40px; height:40px; border-radius:13px 13px 13px 4px; }
  .channel-symbol svg { width:27px; height:27px; }
}

/* Ganji code entry card and Saju hub */
.home-readings .reading-card-s60 {
  border-color:#343438;
  background:#18181b;
}
.s60-card-media {
  overflow:hidden;
  background:#111113;
}
.s60-card-media::after {
  z-index:2;
  background:linear-gradient(180deg,rgba(12,12,14,.02) 12%,rgba(12,12,14,.38) 54%,rgba(12,12,14,.98) 100%)!important;
}
.s60-card-media > b {
  position:absolute;
  z-index:1;
  top:50%;
  left:50%;
  color:rgba(255,255,255,.2);
  font-size:clamp(58px,18vw,82px);
  font-weight:900;
  line-height:1;
  letter-spacing:-.09em;
  transform:translate(-50%,-60%);
}
.s60-card-orbit {
  width:210px;
  height:210px;
  position:absolute;
  z-index:1;
  top:-64px;
  right:-34px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:50%;
}
.s60-card-orbit::before,
.s60-card-orbit::after {
  content:'';
  position:absolute;
  border:1px solid rgba(255,255,255,.1);
  border-radius:50%;
}
.s60-card-orbit::before { inset:36px; }
.s60-card-orbit::after { inset:73px; }
.s60-card-orbit i {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  position:absolute;
  border-radius:50%;
  color:rgba(255,255,255,.76);
  background:rgba(9,9,11,.38);
  font-size:14px;
  font-style:normal;
  font-weight:800;
}
.s60-card-orbit i:nth-child(1) { top:6px; left:88px; }
.s60-card-orbit i:nth-child(2) { top:63px; right:1px; }
.s60-card-orbit i:nth-child(3) { right:30px; bottom:8px; }
.s60-card-orbit i:nth-child(4) { bottom:8px; left:30px; }
.s60-card-orbit i:nth-child(5) { top:63px; left:1px; }

.saju-hub-sheet {
  width:100%;
  max-width:var(--app-width);
  max-height:calc(100dvh - 60px);
  position:fixed;
  z-index:92;
  left:50%;
  bottom:0;
  overflow-y:auto;
  padding:8px 18px calc(var(--bottom-nav-offset) + 22px);
  border-radius:22px 22px 0 0;
  color:#18181b;
  background:#fff;
  box-shadow:0 -14px 42px rgba(0,0,0,.2);
  transform:translate(-50%,calc(100% + var(--bottom-nav-offset) + 48px));
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.saju-hub-sheet.open { transform:translate(-50%,0); }
.saju-hub-sheet:focus { outline:none; }
.saju-hub-sheet .sheet-head { align-items:center; margin-bottom:14px; }
.saju-hub-sheet .sheet-head h2 { margin:0; font-size:18px; letter-spacing:.08em; }
.saju-hub-close {
  width:44px;
  height:44px;
  border:0;
  color:#52525b;
  background:transparent;
  font-size:28px;
  font-weight:300;
  line-height:1;
}
.saju-hub-options { display:grid; gap:9px; }
.saju-hub-option {
  width:100%;
  min-height:84px;
  display:grid;
  grid-template-columns:50px minmax(0,1fr) 18px;
  align-items:center;
  gap:13px;
  padding:13px;
  border:1px solid #e4e4e7;
  border-radius:16px;
  color:#18181b;
  background:#fff;
  text-align:left;
}
.saju-hub-symbol {
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  border-radius:15px;
  color:var(--brand-signature);
  background:var(--brand-signature-soft);
}
.saju-hub-symbol::before {
  content:'';
  position:absolute;
  inset:7px;
  border:1px solid currentColor;
  border-radius:8px;
  opacity:.16;
  transform:rotate(45deg) scale(.74);
}
.saju-hub-symbol svg {
  position:relative;
  z-index:1;
  width:32px;
  height:32px;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.saju-hub-copy { min-width:0; display:grid; gap:5px; }
.saju-hub-option small { color:#71717a; font-size:14px; font-weight:650; line-height:1.45; }
.saju-hub-option b { color:inherit; font-size:17px; letter-spacing:-.035em; }
.saju-hub-option > i { color:#a1a1aa; font-size:22px; font-style:normal; }
.saju-hub-archive {
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:12px;
  padding:0 15px;
  border:1px solid #d4d4d8;
  border-radius:14px;
  color:#3f3f46;
  background:#f4f4f5;
  font-size:15px;
  font-weight:800;
}
.saju-hub-sheet :where(button):focus-visible {
  outline:2px solid var(--brand-signature);
  outline-offset:2px;
}

.reading-entitlement.is-free {
  color:#fff;
  border-color:#242427;
  background:#242427;
}
.reading-entitlement.is-free small {
  padding:3px 6px;
  border-radius:999px;
  color:#6c1d27;
  background:#fff;
  font-size:14px;
  font-weight:850;
}
.reading-entitlement.is-free .entitlement-mark {
  min-width:auto;
  color:#f2c9cc;
  font-size:14px;
  font-weight:900;
}

html[data-theme="dark"] .saju-hub-sheet {
  color:#f4f4f5;
  background:#141416;
}
html[data-theme="dark"] .saju-hub-close { color:#d4d4d8; }
html[data-theme="dark"] .saju-hub-option {
  color:#f4f4f5;
  border-color:#343438;
  background:#202023;
}
html[data-theme="dark"] .saju-hub-option small { color:#b4b4ba; }
html[data-theme="dark"] .saju-hub-archive {
  color:#d4d4d8;
  border-color:#3f3f46;
  background:#27272a;
}
html[data-theme="dark"] .reading-entitlement.is-free {
  color:#fff;
  border-color:#52525b;
  background:#27272a;
}

@media (max-width:350px) {
  .saju-hub-sheet { padding-right:14px; padding-left:14px; }
  .saju-hub-option { grid-template-columns:46px minmax(0,1fr) 16px; gap:10px; padding:11px; }
  .saju-hub-symbol { width:46px; height:46px; }
  .saju-hub-symbol svg { width:29px; height:29px; }
}

/* Archive: three compact access states */
.saved-reading-actions {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  padding:9px;
}
.saved-reading-actions > .reading-entitlement {
  width:100%;
  min-width:0;
  min-height:44px;
  gap:3px;
  padding-inline:3px;
  border-radius:10px;
  font-size:var(--type-caption);
  letter-spacing:-.025em;
}
.saved-reading-actions > .reading-entitlement > span:not(.entitlement-mark) {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.saved-reading-actions > .reading-entitlement .entitlement-mark,
.saved-reading-actions > .reading-entitlement.is-free .entitlement-mark {
  min-width:12px;
  flex:0 0 12px;
  color:inherit;
  font-size:14px;
}
.saved-reading-actions > .reading-entitlement.is-free,
html[data-theme="dark"] .saved-reading-actions > .reading-entitlement.is-free {
  color:#fff;
  border-color:var(--brand-signature);
  background:var(--brand-signature);
}
.archive-sheet .sheet-head {
  align-items:center;
  margin-bottom:16px;
}
.archive-sheet .sheet-head h2 { margin:0; }


/* Archive selection context */
.archive-selection-footer[hidden],
.archive-selection-access[hidden],
.archive-selection-indicator[hidden] { display:none; }

.archive-sheet[data-entry-purpose="selection"] {
  height:calc(100dvh - 60px);
  max-height:calc(100dvh - 60px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
  padding-top:12px;
  padding-bottom:calc(var(--bottom-nav-offset) + 10px);
}
.archive-sheet[data-entry-purpose="selection"] > .sheet-handle { display:none; }
.archive-sheet[data-entry-purpose="selection"] > .sheet-head {
  grid-row:1;
  min-width:0;
  margin:0 0 10px;
}
.archive-sheet[data-entry-purpose="selection"] > .sheet-head h2 {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.archive-sheet[data-entry-purpose="selection"] > :is(.archive-empty,.archive-content) {
  grid-row:2;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior-y:contain;
}
.archive-sheet[data-entry-purpose="selection"] > .archive-content {
  padding:2px 2px 10px;
}
.archive-sheet[data-entry-purpose="selection"] :is(
  .chart-edit,
  .chart-delete,
  .saved-reading-actions,
  .saved-year-picker
) { display:none; }
.archive-sheet[data-entry-purpose="selection"] .saved-saju-card {
  display:block;
  min-height:0;
  border-radius:14px;
}
.archive-sheet[data-entry-purpose="selection"] .archive-select {
  min-height:100px;
  grid-template-columns:42px minmax(0,1fr) 28px;
  gap:10px;
  padding:12px;
}
.archive-sheet[data-entry-purpose="selection"] .saved-summary { gap:3px; }
.archive-sheet[data-entry-purpose="selection"] .saved-chevron { display:none; }
.archive-selection-access {
  min-width:0;
  overflow:hidden;
  margin-top:2px;
  font-size:var(--type-caption);
  font-style:normal;
  font-weight:800;
  line-height:1.4;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.archive-selection-access.is-owned { color:var(--brand-signature); }
.archive-selection-access.is-available { color:#52525b; }
.archive-selection-indicator {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid #d4d4d8;
  border-radius:50%;
  color:transparent;
  background:#fff;
  font-size:14px;
  font-weight:900;
}
.saved-saju-card.is-selected {
  border-color:var(--brand-signature);
  box-shadow:0 0 0 1px var(--brand-signature);
}
.saved-saju-card.is-selected .archive-select {
  background:var(--brand-signature-soft);
}
.saved-saju-card.is-selected .archive-selection-indicator {
  color:#fff;
  border-color:var(--brand-signature);
  background:var(--brand-signature);
}
.archive-selection-footer {
  grid-row:3;
  display:block;
  padding-top:10px;
  border-top:1px solid #e4e4e7;
  background:#fff;
}
.archive-selection-continue {
  width:100%;
  min-height:52px;
  display:grid;
  grid-template-columns:minmax(0,auto) auto;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  border:0;
  border-radius:14px;
  color:#fff;
  background:var(--brand-signature);
  font-size:var(--type-control);
  font-weight:850;
}
.archive-selection-continue > span {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.archive-selection-continue > b { font-size:20px; line-height:1; }
.archive-selection-continue:disabled {
  color:#71717a;
  background:#e4e4e7;
  cursor:default;
}
.archive-selection-continue:focus-visible {
  outline:2px solid var(--brand-signature);
  outline-offset:2px;
}
html[data-theme="dark"] .archive-selection-footer {
  border-top-color:#343438;
  background:#141416;
}
html[data-theme="dark"] .archive-selection-access.is-owned { color:#f0a9ae; }
html[data-theme="dark"] .archive-selection-access.is-available { color:#d4d4d8; }
html[data-theme="dark"] .archive-selection-indicator {
  border-color:#52525b;
  background:#202023;
}
html[data-theme="dark"] .saved-saju-card.is-selected .archive-select {
  background:var(--brand-signature-dark-soft);
}
html[data-theme="dark"] .archive-selection-continue:disabled {
  color:#8b8b92;
  background:#27272a;
}

@media (max-width:350px) {
  .archive-sheet[data-entry-purpose="selection"] {
    padding-right:14px;
    padding-left:14px;
  }
  .archive-sheet[data-entry-purpose="selection"] .archive-select {
    grid-template-columns:40px minmax(0,1fr) 26px;
    gap:8px;
    padding:10px;
  }
  .archive-selection-indicator {
    width:26px;
    height:26px;
  }
  .archive-selection-continue {
    min-height:48px;
    padding-right:10px;
    padding-left:10px;
  }
}

/* Cheongwoldang-scale typography final overrides */
:root{--type-caption:12px;--type-control:14px;--type-body:14px;--type-card-title:16px;--type-section-title:clamp(18px,calc(12.84px + 1.613vw),20px);--type-hero-title:clamp(24px,calc(18.84px + 1.613vw),26px);--type-title-sm:var(--type-card-title);--type-title-md:var(--type-section-title);--type-title-lg:var(--type-hero-title)}
#home-readings-title{width:auto;font-size:var(--type-section-title);letter-spacing:-.045em;white-space:normal;transform:none}
.sheet-head h2,.birth-sheet .sheet-head h2,.channel-create-dialog h2,.saju-hub-sheet .sheet-head h2,.delete-confirm-dialog h2,.analysis-card-head h3,.analysis-section-title h3,.analysis-closing h3,.luck-now-card>h3,.luck-section-head h3{font-size:var(--type-section-title)}
.banner-copy h2,.channel-directory-header h1,.analysis-hero h2{font-size:var(--type-hero-title)}
.reading-card-copy>strong,.channel-preview strong,.public-channel-copy strong,.analysis-category-copy strong,.saved-summary strong,.saju-hub-option b,.luck-year-card>strong,.result-pillars b,.analysis-header b{font-size:var(--type-card-title)}
.home-section-link,.archive-create,.archive-add,.chart-edit,.chart-delete,.reading-entitlement,.saved-reading-actions>.reading-entitlement,.time-entry-row .unknown-time-toggle,.unknown-time-toggle,.birth-sheet .auto-time-bucket strong,.saju-hub-archive{font-size:var(--type-control)}
.reading-entitlement.is-free small,.reading-entitlement.is-free .entitlement-mark,.saved-reading-actions>.reading-entitlement .entitlement-mark,.saved-reading-actions>.reading-entitlement.is-free .entitlement-mark{font-size:var(--type-caption)}
.birth-sheet .leap-month-option span,.birth-sheet .birth-profile-grid .choice-row span,.birth-sheet .calendar-inline .choice-row span{font-size:var(--type-control)!important}
.delete-confirm-error{font-size:var(--type-control)!important}
.birth-sheet .moment-parts input[type="text"],.birth-sheet input,.birth-sheet select,.login-sheet input,.channel-search input,.channel-create-field input,.channel-create-field select,.channel-create-field textarea,.delete-consent-field input{font-size:16px}
.home-footer .footer-story{font-size:var(--type-body)}
.home-footer .footer-business{font-size:var(--type-caption)}
.home-footer .footer-links,.home-footer>small{font-size:var(--type-caption)}
.channel-preview,.public-channel-row{min-height:82px}
.analysis-pillar-grid div{min-height:94px}
.saju-hub-option{min-height:80px}

/* Index popular channels — unboxed ranked thumbnail carousel */
.home-channels .channel-preview-carousel { min-width:0; }
.home-channels .channel-preview-list {
  width:100%;
  display:grid;
  grid-template-rows:repeat(5,79px);
  grid-auto-flow:column;
  grid-auto-columns:100%;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  list-style:none;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.home-channels .channel-preview-list::-webkit-scrollbar { display:none; }
.home-channels .channel-preview-item {
  min-width:0;
  border:0;
}
.home-channels .channel-preview-item:nth-child(5n + 1) {
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.home-channels .channel-preview {
  width:100%;
  height:100%;
  min-height:0;
  grid-template-columns:104px 22px minmax(0,1fr);
  gap:12px;
  padding:7.5px 0;
  border:0;
  border-radius:0;
  background:transparent;
}
.home-channels .channel-preview-rank {
  color:var(--home-ink);
  font-size:var(--type-card-title);
  font-weight:850;
  font-variant-numeric:tabular-nums;
  line-height:1;
  text-align:center;
}
.home-channels .channel-preview-image {
  width:104px;
  height:64px;
  display:block;
  object-fit:cover;
  object-position:center;
  border-radius:14px;
  background:#27272a;
}
.home-channels .channel-preview-copy {
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
}
.home-channels .channel-preview-name {
  width:100%;
  min-width:0;
  overflow:hidden;
  color:var(--home-ink);
  font-size:var(--type-card-title);
  font-weight:750;
  line-height:1.45;
  letter-spacing:-.025em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.home-channels .channel-preview-count {
  color:var(--home-muted);
  font-size:var(--type-caption);
  font-weight:650;
  line-height:1.35;
  white-space:nowrap;
}
.home-channels .channel-preview:focus-visible {
  outline:2px solid var(--brand-signature);
  outline-offset:-2px;
  border-radius:14px;
}
.home-channels .channel-preview-pagination {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin:4px auto 0;
}
.home-channels .channel-preview-pagination button {
  width:44px;
  min-width:44px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  background:transparent;
}
.home-channels .channel-preview-pagination button::before {
  content:'';
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--home-line-strong);
  transition:width .2s ease,background-color .2s ease;
}
.home-channels .channel-preview-pagination button.active::before {
  width:22px;
  background:var(--brand-signature);
}
.home-channels .channel-preview-pagination button[hidden] { display:none; }
.home-channels .channel-preview-pagination button:focus-visible {
  outline:2px solid var(--brand-signature);
  outline-offset:-7px;
  border-radius:999px;
}
@media (hover:hover) {
  .home-channels .channel-preview:hover .channel-preview-name { color:var(--brand-signature); }
  .home-channels .channel-preview:hover .channel-preview-image { filter:brightness(1.06); }
}
.home-channels .channel-preview:active { opacity:.76; }
@media (max-width:350px) {
  .home-channels .channel-preview-list { grid-template-rows:repeat(5,71px); }
  .home-channels .channel-preview {
    grid-template-columns:88px 20px minmax(0,1fr);
    gap:9px;
    padding:7.5px 0;
  }
  .home-channels .channel-preview-image { width:88px; height:56px; border-radius:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .home-channels .channel-preview-list { scroll-behavior:auto; }
}

/* Hero marketing copy: natural wrapping and vertically centered CTA. */
.rank-badge b { font:inherit; }
.banner-copy h2 { text-wrap:pretty; }
.banner-copy button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  line-height:1;
}
.banner-copy button b {
  display:block;
  margin-left:0;
  line-height:1;
}

/* Footer policy links share one quiet treatment. */
.home-footer .footer-links { align-items:center; flex-wrap:wrap; }
.home-footer > small > .footer-copyright,
.home-footer > small > .footer-company-line { display:block; }

/* SajuSum typography contract: final role mapping and Korean wrapping. */
:root {
  --type-leading-caption:1.6;
  --type-leading-control:1.4;
  --type-leading-body:1.75;
  --type-leading-card-title:1.45;
  --type-leading-section-title:1.35;
  --type-leading-hero-title:1.25;
  --type-tracking-caption:0;
  --type-tracking-control:-.015em;
  --type-tracking-body:-.02em;
  --type-tracking-card-title:-.035em;
  --type-tracking-section-title:-.045em;
  --type-tracking-hero-title:-.05em;
}
body {
  font-size:var(--type-body);
  line-height:var(--type-leading-body);
  letter-spacing:var(--type-tracking-body);
}
.banner-copy h2,
.channel-directory-header h1,
.analysis-hero h2 {
  font-size:var(--type-hero-title);
  font-weight:800;
  line-height:var(--type-leading-hero-title);
  letter-spacing:var(--type-tracking-hero-title);
  word-break:keep-all;
  overflow-wrap:break-word;
}
.banner-copy h2 { text-wrap:pretty; }
.channel-directory-header h1,
.analysis-hero h2 { text-wrap:balance; }
.home-section-head h2,
.sheet-head h2,
.channel-create-dialog h2,
.delete-confirm-dialog h2,
.analysis-card-head h3,
.analysis-section-title h3,
.analysis-closing h3,
.luck-now-card > h3,
.luck-section-head h3 {
  font-size:var(--type-section-title);
  font-weight:800;
  line-height:var(--type-leading-section-title);
  letter-spacing:var(--type-tracking-section-title);
  word-break:keep-all;
  overflow-wrap:break-word;
  text-wrap:balance;
}
.reading-card-copy > strong,
.home-channels .channel-preview-name,
.public-channel-copy strong,
.analysis-category-copy strong,
.saved-summary strong,
.saju-hub-option b,
.luck-year-card > strong,
.result-pillars b,
.analysis-header b,
.archive-empty b,
.channel-empty b {
  font-size:var(--type-card-title);
  font-weight:700;
  line-height:var(--type-leading-card-title);
  letter-spacing:var(--type-tracking-card-title);
  word-break:keep-all;
  overflow-wrap:break-word;
}
.banner-copy p,
.reading-card-copy > span,
.home-footer .footer-story,
.login-benefits p,
.result-notice p,
.archive-empty p,
.archive-guide,
.channel-directory-header p,
.channel-empty p,
.channel-create-dialog > p,
.analysis-page-state p,
.analysis-hero p,
.analysis-section-title p,
.shaman-voice-note p,
.analysis-category-body p,
.analysis-closing p,
.luck-now-card > p,
.luck-year-card > p,
.luck-closing p {
  font-size:var(--type-body);
  line-height:var(--type-leading-body);
  letter-spacing:var(--type-tracking-body);
  word-break:keep-all;
  overflow-wrap:break-word;
  text-wrap:pretty;
}
.banner-copy button,
.home-section-link,
.reading-card-action,
.saju-hub-archive,
.submit-button,
.kakao-login,
.email-login,
.result-confirm,
.archive-create,
.archive-add,
.channel-create-trigger,
.channel-scope-switch button,
.channel-filters button,
.channel-empty button,
.channel-create-actions button,
.analysis-tabs button,
.analysis-page-state a {
  font-size:var(--type-control);
  line-height:var(--type-leading-control);
  letter-spacing:var(--type-tracking-control);
}
.banner-copy small,
.rank-badge,
.home-section-head > small,
.home-section-head > div > small,
.reading-card-copy > small,
.reading-card-number,
.home-footer .footer-business,
.home-footer .footer-links,
.home-footer > small,
.sheet-head small,
.login-policy,
.result-date,
.channel-directory-title-row small,
.channel-result-status,
.analysis-view small,
.bottom-nav b {
  font-size:var(--type-caption);
  line-height:var(--type-leading-caption);
  letter-spacing:var(--type-tracking-caption);
}
.rank-badge { line-height:1.35; }
.banner-copy button,
.reading-card-action,
.home-section-link { white-space:nowrap; }

/* Typography completion: keep every shared surface on the role-based scale. */
#home-readings-title {
  line-height:var(--type-leading-section-title);
  letter-spacing:var(--type-tracking-section-title);
}
.birth-sheet .sheet-head h2,
.login-sheet .sheet-head h2,
.result-sheet .sheet-head h2,
.archive-sheet .sheet-head h2,
#saju-hub-title {
  font-size:var(--type-section-title);
  font-weight:800;
  line-height:var(--type-leading-section-title);
  letter-spacing:var(--type-tracking-section-title);
}
.home-readings .reading-card-number,
.rank-badge {
  font-size:var(--type-caption);
  font-weight:700;
  line-height:var(--type-leading-caption);
  letter-spacing:var(--type-tracking-caption);
}

/* Shared navigation, feedback and service-entry controls. */
.login-box span {
  font-size:var(--type-body);
  line-height:var(--type-leading-body);
  letter-spacing:var(--type-tracking-body);
}
.login-box button,
.login-box a,
.side-menu > nav button,
.route-side-menu > nav a,
.saju-hub-archive,
.archive-selection-continue,
.toast {
  font-size:var(--type-control);
  font-weight:700;
  line-height:var(--type-leading-control);
  letter-spacing:var(--type-tracking-control);
}
.side-menu > nav b {
  font-size:var(--type-control);
  line-height:var(--type-leading-control);
  letter-spacing:var(--type-tracking-control);
}
.saju-hub-option small {
  font-size:var(--type-body);
  line-height:var(--type-leading-body);
  letter-spacing:var(--type-tracking-body);
}
.saju-hub-option b {
  font-size:var(--type-card-title);
  line-height:var(--type-leading-card-title);
  letter-spacing:var(--type-tracking-card-title);
}

/* Birth form labels and controls. */
.birth-sheet .birth-profile-grid > label > span,
.birth-sheet .birth-profile-grid > fieldset > legend,
.birth-sheet .moment-parts label > span,
.birth-sheet .calendar-inline > span,
.birth-sheet .leap-month-option span {
  line-height:var(--type-leading-caption);
  letter-spacing:var(--type-tracking-caption);
}
.birth-sheet .moment-field > legend,
.birth-sheet .birth-profile-grid .choice-row span,
.birth-sheet .calendar-inline .choice-row span,
.time-entry-row .unknown-time-toggle,
.unknown-time-toggle {
  line-height:var(--type-leading-control);
  letter-spacing:var(--type-tracking-control);
}
.unknown-time-toggle b,
.birth-sheet .auto-time-bucket strong,
.auto-time-bucket span,
.auto-time-bucket span b {
  line-height:var(--type-leading-caption);
  letter-spacing:var(--type-tracking-caption);
}

/* Index channel ranking and footer metadata. */
.home-channels .channel-preview-rank {
  font-weight:700;
  line-height:var(--type-leading-card-title);
  letter-spacing:var(--type-tracking-card-title);
}
.home-channels .channel-preview-count {
  font-weight:600;
  line-height:var(--type-leading-caption);
  letter-spacing:var(--type-tracking-caption);
}
.home-footer > small > .footer-copyright,
.home-footer > small > .footer-company-line {
  font-size:var(--type-caption);
  line-height:var(--type-leading-caption);
  letter-spacing:var(--type-tracking-caption);
}

/* Archive access, metadata and year picker. */
.saved-reading-actions > .reading-entitlement {
  font-size:var(--type-control);
  font-weight:700;
  line-height:var(--type-leading-control);
  letter-spacing:var(--type-tracking-control);
}
.saved-reading-actions > .reading-entitlement .entitlement-mark {
  font-size:var(--type-caption);
  line-height:var(--type-leading-caption);
  letter-spacing:var(--type-tracking-caption);
}
.saved-summary small,
.archive-selection-access,
.saved-year-picker > small,
.reading-year-option span {
  font-size:var(--type-caption);
  line-height:var(--type-leading-caption);
  letter-spacing:var(--type-tracking-caption);
}
.reading-year-option b {
  font-size:var(--type-control);
  line-height:var(--type-leading-control);
  letter-spacing:var(--type-tracking-control);
}

/* Protected deletion dialog. */
.delete-confirm-dialog > small,
.delete-consent-field > span,
.delete-consent-field em {
  font-size:var(--type-caption);
  line-height:var(--type-leading-caption);
  letter-spacing:var(--type-tracking-caption);
}
.delete-confirm-dialog > p,
.delete-purchase-summary,
.delete-consent-field > b {
  font-size:var(--type-body);
  line-height:var(--type-leading-body);
  letter-spacing:var(--type-tracking-body);
}
.delete-confirm-error,
.channel-create-error {
  font-size:var(--type-control)!important;
  line-height:var(--type-leading-control)!important;
  letter-spacing:var(--type-tracking-control);
}
.delete-confirm-actions button {
  font-size:var(--type-control);
  font-weight:700;
  line-height:var(--type-leading-control);
  letter-spacing:var(--type-tracking-control);
}

/* Channel directory and creation form. */
.channel-directory-header p {
  line-height:var(--type-leading-body);
  letter-spacing:var(--type-tracking-body);
}
.public-channel-copy small {
  display:-webkit-box;
  overflow:hidden;
  margin-top:3px;
  font-size:var(--type-body);
  line-height:var(--type-leading-body);
  letter-spacing:var(--type-tracking-body);
  text-overflow:clip;
  white-space:normal;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.channel-directory-title-row small,
.channel-result-status,
.channel-create-field > span em,
.channel-create-field > small,
.channel-visibility-choice label small,
.public-channel-row em {
  font-size:var(--type-caption);
  line-height:var(--type-leading-caption);
  letter-spacing:var(--type-tracking-caption);
}
.channel-create-field > span,
.channel-visibility-choice legend,
.channel-visibility-choice label b {
  font-size:var(--type-control);
  font-weight:700;
  line-height:var(--type-leading-control);
  letter-spacing:var(--type-tracking-control);
}
.channel-create-trigger,
.channel-scope-switch button,
.channel-filters button,
.channel-empty button,
.channel-create-actions button {
  font-size:var(--type-control);
  font-weight:700;
  line-height:var(--type-leading-control);
  letter-spacing:var(--type-tracking-control);
}

/* Natal analysis labels and dense evidence rows. */
.analysis-page-state b {
  font-size:var(--type-card-title);
  line-height:var(--type-leading-card-title);
  letter-spacing:var(--type-tracking-card-title);
}
.analysis-pillar-grid small,
.analysis-pillar-grid span,
.analysis-pillar-grid .day-pillar small,
.analysis-pillar-grid .day-pillar span {
  font-size:var(--type-caption);
  line-height:var(--type-leading-caption);
  letter-spacing:var(--type-tracking-caption);
}
.analysis-header small,
.analysis-hero > small,
.analysis-card-head small,
.analysis-card-head > span,
.analysis-section-title small,
.balance-ring small,
.element-bars em,
.phase-two-evidence small,
.phase-two-evidence span,
.structure-summary small,
.structure-summary span,
.position-ten-gods > small,
.position-ten-gods small,
.position-ten-gods span,
.relation-evidence > small,
.relation-evidence span,
.analysis-closing small,
.luck-now-card > small,
.luck-now-grid small,
.luck-basis-grid small,
.luck-basis-grid span,
.luck-section-head small,
.luck-section-head > span,
.luck-decade-card small,
.luck-decade-card p,
.luck-year-card > div small,
.luck-year-card em,
.pillar-reading-guide,
.structure-guide,
.luck-guide,
.analysis-disclaimer {
  font-size:var(--type-caption);
  line-height:var(--type-leading-caption);
  letter-spacing:var(--type-tracking-caption);
}
.analysis-tabs button,
.balance-copy span,
.balance-copy b,
.element-bars span,
.phase-two-evidence b,
.structure-summary b,
.position-ten-gods b,
.luck-now-grid b,
.luck-basis-grid b,
.luck-decade-card strong,
.luck-year-card > strong {
  line-height:var(--type-leading-control);
  letter-spacing:var(--type-tracking-control);
}

/* Index hero questions: preserve the comma as a meaningful two-line pause. */
:root {
  --type-hero-question:clamp(16px,4.5vw,20px);
  --type-leading-hero-question:1.42;
  --type-tracking-hero-question:-.035em;
}
.hero-banner .banner-copy h2.hero-question {
  font-size:var(--type-hero-question);
  font-weight:800;
  line-height:var(--type-leading-hero-question);
  letter-spacing:var(--type-tracking-hero-question);
  text-wrap:auto;
}
.hero-question > span {
  display:block;
  word-break:keep-all;
  overflow-wrap:normal;
}
@media (max-width:350px) {
  .hero-banner .banner-copy,
  .hero-banner.has-editorial-media .banner-copy {
    right:16px;
    left:16px;
  }
}

/* Direct-entry sitemap menu */
.side-menu.sitemap-menu {
  padding-bottom:calc(28px + env(safe-area-inset-bottom));
}
.sitemap-menu .side-sitemap {
  display:grid;
  gap:0;
  margin:18px 0 0;
  padding:0 0 28px;
  border:0;
}
.sitemap-menu .sitemap-group {
  min-width:0;
  border-bottom:1px solid #e4e4e7;
}
.sitemap-menu .sitemap-group:first-child {
  border-top:1px solid #e4e4e7;
}
.sitemap-menu .sitemap-group > summary {
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 4px;
  color:#18181b;
  font-size:var(--type-card-title);
  font-weight:750;
  line-height:var(--type-leading-card-title);
  letter-spacing:var(--type-tracking-card-title);
  cursor:pointer;
  list-style:none;
}
.sitemap-menu .sitemap-group > summary::-webkit-details-marker {
  display:none;
}
.sitemap-menu .sitemap-group > summary > span {
  width:18px;
  height:18px;
  position:relative;
  flex:0 0 18px;
}
.sitemap-menu .sitemap-group > summary > span::before,
.sitemap-menu .sitemap-group > summary > span::after {
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:12px;
  height:1.5px;
  border-radius:2px;
  background:#71717a;
  transform:translate(-50%,-50%);
  transition:transform .2s ease,opacity .2s ease;
}
.sitemap-menu .sitemap-group > summary > span::after {
  transform:translate(-50%,-50%) rotate(90deg);
}
.sitemap-menu .sitemap-group[open] > summary {
  color:var(--brand-signature);
}
.sitemap-menu .sitemap-group[open] > summary > span::after {
  opacity:0;
  transform:translate(-50%,-50%) rotate(0);
}
.sitemap-menu .sitemap-group > summary:focus-visible {
  outline:2px solid var(--brand-signature);
  outline-offset:-2px;
  border-radius:10px;
}
.sitemap-menu .sitemap-group-links {
  padding:0 0 8px 12px;
}
.sitemap-menu .sitemap-group-links > a {
  width:100%;
  height:auto;
  min-height:54px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:8px 4px;
  border:0;
  border-top:1px solid #e4e4e7;
  color:#18181b;
  background:transparent;
  text-decoration:none;
}
.sitemap-menu .sitemap-group-links > a > span {
  min-width:0;
  display:grid;
  gap:0;
}
.sitemap-menu .sitemap-group-links > a strong {
  color:inherit;
  font-size:var(--type-card-title);
  font-weight:750;
  line-height:var(--type-leading-card-title);
  letter-spacing:var(--type-tracking-card-title);
}
.sitemap-menu .sitemap-group-links > a small {
  display:none;
}
.sitemap-menu .sitemap-group-links > a > b {
  color:#a1a1aa;
  font-size:var(--type-control);
  font-weight:700;
}
.sitemap-menu .sitemap-group-links > a[aria-current="page"] {
  color:var(--brand-signature);
}
.sitemap-menu .sitemap-group-links > a:focus-visible {
  outline:2px solid var(--brand-signature);
  outline-offset:-2px;
  border-radius:10px;
}
@media (hover:hover) {
  .sitemap-menu .sitemap-group > summary:hover,
  .sitemap-menu .sitemap-group-links > a:hover {
    color:var(--brand-signature);
    background:rgba(var(--brand-signature-rgb),.05);
  }
}
html[data-theme="dark"] .sitemap-menu .sitemap-group,
html[data-theme="dark"] .sitemap-menu .sitemap-group:first-child {
  border-color:#343438;
}
html[data-theme="dark"] .sitemap-menu .sitemap-group > summary,
html[data-theme="dark"] .sitemap-menu .sitemap-group-links > a {
  color:#f4f4f5;
  border-color:#343438;
  background:transparent;
}
html[data-theme="dark"] .sitemap-menu .sitemap-group > summary > span::before,
html[data-theme="dark"] .sitemap-menu .sitemap-group > summary > span::after {
  background:#a1a1aa;
}
html[data-theme="dark"] .sitemap-menu .sitemap-group[open] > summary,
html[data-theme="dark"] .sitemap-menu .sitemap-group-links > a[aria-current="page"] {
  color:#f2c9cc;
}
html[data-theme="dark"] .sitemap-menu .sitemap-group-links > a > b {
  color:#71717a;
}
@media (max-width:350px) {
  .sitemap-menu .sitemap-group > summary { min-height:54px; }
  .sitemap-menu .sitemap-group-links > a { min-height:52px; padding:7px 3px; }
}
@media (prefers-reduced-motion:reduce) {
  .sitemap-menu .sitemap-group > summary > span::before,
  .sitemap-menu .sitemap-group > summary > span::after { transition:none; }
}

/* Archive primary chart — one saved profile becomes the future daily-flow target. */
.saved-saju-card {
  grid-template-columns:minmax(0,1fr) 40px 44px 44px;
  grid-template-areas:
    'profile primary edit delete'
    'readings readings readings readings'
    'years years years years'
    'primary-action primary-action primary-action primary-action';
}
.archive-select {
  grid-template-columns:minmax(0,1fr) 16px;
  gap:8px;
  padding-left:12px;
}
.saved-avatar { display:none!important; }
.primary-chart-indicator {
  grid-area:primary;
  width:36px;
  height:36px;
  align-self:center;
  justify-self:center;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #d4d4d8;
  border-radius:50%;
  color:transparent;
  background:#fff;
  cursor:pointer;
  transition:color .16s ease,background .16s ease,border-color .16s ease,transform .16s ease;
}
.primary-chart-indicator > span {
  font-size:var(--type-control);
  font-weight:900;
  line-height:1;
}
.primary-chart-toggle {
  grid-area:primary-action;
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 12px;
  border:0;
  border-top:1px solid #f0f0f1;
  color:#52525b;
  background:#fafafa;
  font-size:var(--type-control);
  font-weight:700;
  line-height:var(--type-leading-control);
  letter-spacing:var(--type-tracking-control);
  cursor:pointer;
  transition:color .16s ease,background .16s ease;
}
.primary-chart-toggle-mark {
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  flex:0 0 18px;
  border:1px solid #b8b8bf;
  border-radius:50%;
  color:transparent;
  font-size:var(--type-caption);
  font-weight:900;
  line-height:1;
}
.saved-saju-card.is-primary-chart .primary-chart-indicator,
.saved-saju-card.is-primary-chart .primary-chart-toggle {
  color:#fff;
  border-color:var(--brand-signature);
  background:var(--brand-signature);
}
.saved-saju-card.is-primary-chart .primary-chart-toggle-mark {
  color:var(--brand-signature);
  border-color:#fff;
  background:#fff;
}
.primary-chart-indicator:active,
.primary-chart-toggle:active { transform:scale(.97); }
.primary-chart-indicator:focus-visible,
.primary-chart-toggle:focus-visible {
  outline:2px solid var(--brand-signature);
  outline-offset:-2px;
}
.archive-sheet[data-entry-purpose='selection'] .primary-chart-indicator,
.archive-sheet[data-entry-purpose='selection'] .primary-chart-toggle { display:none; }
.archive-sheet[data-entry-purpose='selection'] .archive-select {
  grid-template-columns:minmax(0,1fr) 28px;
}
html[data-theme='dark'] .primary-chart-indicator {
  border-color:#52525b;
  background:#202023;
}
html[data-theme='dark'] .primary-chart-toggle {
  color:#d4d4d8;
  border-top-color:#343438;
  background:#18181b;
}
html[data-theme='dark'] .saved-saju-card.is-primary-chart .primary-chart-indicator,
html[data-theme='dark'] .saved-saju-card.is-primary-chart .primary-chart-toggle {
  color:#fff;
  border-color:var(--brand-signature);
  background:var(--brand-signature);
}
@media (max-width:350px) {
  .saved-saju-card { grid-template-columns:minmax(0,1fr) 38px 44px 44px; }
  .primary-chart-indicator { width:34px; height:34px; }
  .archive-sheet[data-entry-purpose='selection'] .archive-select {
    grid-template-columns:minmax(0,1fr) 26px;
  }
}

/* Archive purchased access — signature outline only, never a filled badge. */
.saved-reading-actions > .reading-entitlement.is-owned,
.saved-reading-actions > .reading-entitlement.is-free,
.saved-year-picker .reading-year-option.is-owned {
  color:#27272a;
  border-color:var(--brand-signature);
  background:#fff;
}
.saved-reading-actions > .reading-entitlement.is-owned .entitlement-mark,
.saved-reading-actions > .reading-entitlement.is-free .entitlement-mark,
.saved-year-picker .reading-year-option.is-owned span {
  color:inherit;
  background:transparent;
}
html[data-theme='dark'] .saved-reading-actions > .reading-entitlement.is-owned,
html[data-theme='dark'] .saved-reading-actions > .reading-entitlement.is-free,
html[data-theme='dark'] .saved-year-picker .reading-year-option.is-owned {
  color:#f4f4f5;
  border-color:var(--brand-signature);
  background:#18181b;
}

/* Archive profile details are information, not a product link. */
.archive-profile-view {
  grid-template-columns:minmax(0,1fr);
  cursor:default;
  user-select:text;
}
.archive-profile-view:active { background:transparent; }
html[data-theme='dark'] .archive-profile-view:active { background:transparent; }

.archive-channel-return { margin:0 0 20px; }
.archive-channel-return[hidden] { display:none; }
.archive-channel-return p { margin:0; color:#71717a; font-size:14px; line-height:1.6; }
.archive-channel-return a { display:flex; align-items:center; justify-content:center; min-height:44px; height:auto; padding:10px 12px; text-align:center; text-decoration:none; }
html[data-theme='dark'] .archive-channel-return p { color:#a1a1aa; }