/* Original rendered style: /app/globals.css */
:root{--red:#a71924;--red2:#671018;--gold:#d5b275;--ink:#101116;--paper:#f2ede4;--muted:#8f8a81}
.brand-medallion{border-radius:50%;background-color:#050a10!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;box-shadow:0 0 0 1px rgba(213,178,117,.28),0 10px 25px rgba(0,0,0,.38);filter:none!important}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#090a0e;color:#f6f2e9;font-family:"Noto Sans KR",sans-serif}button,input{font:inherit}button{cursor:pointer}.story-shell,.record-page{width:min(100%,480px);min-height:100vh;margin:0 auto;background:#0c0e14;position:relative;box-shadow:0 0 80px rgba(0,0,0,.85)}
.story-top,.record-nav{height:52px;position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(100%,480px);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:rgba(255,255,255,.78);background:linear-gradient(180deg,rgba(5,6,9,.8),transparent)}.story-top button,.record-nav button{border:0;background:none;color:#ddd;font-size:10px;letter-spacing:.12em}.story-top>div,.record-nav>div{display:flex;align-items:center;gap:10px}.story-top a,.record-nav a{color:#ddd;font-size:10px;font-weight:700;letter-spacing:.08em;text-decoration:none}.mini-brand{font:700 10px "Gowun Batang",serif;letter-spacing:.17em}
.story-scene{height:100svh;min-height:650px;position:relative;overflow:hidden}.story-scene>img{object-fit:cover}.scene-cover>img{object-position:center}.scene-gate>img{object-position:center}.scene-guide>img{object-position:center}.scene-name>img,.scene-birth>img,.scene-time>img,.scene-place>img{object-position:center;filter:saturate(.55) brightness(.58)}.scene-vignette{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,7,11,.96) 0%,rgba(5,7,11,.25) 45%,rgba(5,7,11,.35) 100%),linear-gradient(90deg,rgba(0,0,0,.22),transparent 35%,rgba(0,0,0,.22))}.scene-grain{position:absolute;inset:0;opacity:.16;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.cover-copy{position:absolute;z-index:3;left:28px;right:28px;bottom:126px;text-align:center;text-shadow:0 3px 18px #000}.cover-copy>p{color:#e0b36f;font-size:9px;letter-spacing:.28em}.cover-copy h1{font:700 clamp(34px,9vw,49px)/1.25 "Gowun Batang",serif;margin:12px 0 10px;letter-spacing:-.055em}.cover-copy span{color:#e2d9cb;font:400 12px "Gowun Batang",serif}.scene-actions{position:absolute;z-index:4;left:22px;right:22px;bottom:max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:9px}.story-choice{width:100%;min-height:60px;border:1px solid rgba(255,255,255,.72);border-radius:8px;background:rgba(8,8,9,.82);color:#fff;padding:0 20px;display:flex;align-items:center;justify-content:center;gap:22px;font:700 16px "Gowun Batang",serif;backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.25);transition:.2s}.story-choice:hover{background:rgba(167,25,36,.92);border-color:var(--red);transform:translateY(-2px)}.story-choice.red{background:var(--red);border-color:var(--red)}.scene-actions small{font-size:9px;color:rgba(255,255,255,.68)}.skip{border:0;background:none;color:rgba(255,255,255,.72);font-size:11px;text-decoration:underline;text-underline-offset:4px}.narration{position:absolute;z-index:4;left:28px;right:28px;top:auto;bottom:124px;text-align:center}.narration p{font:700 17px/1.75 "Gowun Batang",serif;margin:0;text-shadow:0 2px 12px #000}.narration p+ p{margin-top:3px}.speech-bubble{position:absolute;z-index:4;top:auto;bottom:112px;left:26px;right:26px;background:rgba(245,240,230,.97);color:#18181b;padding:20px 22px;border-radius:18px 18px 18px 3px;box-shadow:0 12px 40px rgba(0,0,0,.3)}.speech-bubble:after{content:"";position:absolute;left:0;bottom:-13px;border-top:20px solid #f5f0e6;border-right:18px solid transparent}.speech-bubble b{font:700 18px "Gowun Batang",serif}.speech-bubble p{margin:7px 0 0;font:400 14px/1.65 "Gowun Batang",serif;color:#4e4944}
.question-card{position:absolute;z-index:5;left:22px;right:22px;top:50%;transform:translateY(-48%);background:rgba(12,14,20,.9);border:1px solid rgba(255,255,255,.18);padding:30px 24px;backdrop-filter:blur(15px);box-shadow:0 24px 70px rgba(0,0,0,.5)}.question-card>span{color:var(--gold);font-size:9px;letter-spacing:.2em}.question-card h2{font:700 25px/1.45 "Gowun Batang",serif;margin:17px 0 28px;word-break:keep-all}.question-card label{display:block;color:#aaa;font-size:10px}.question-card input{width:100%;height:54px;border:0;border-bottom:1px solid rgba(255,255,255,.45);background:transparent;color:white;padding:0 3px;outline:none;font:400 20px "Gowun Batang",serif}.question-card input:focus{border-color:var(--gold)}.question-card input[type=date],.question-card input[type=time]{color-scheme:dark}.question-card>button{width:100%;height:56px;margin-top:28px;border:0;background:var(--red);color:white;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-weight:700}.question-card>button:disabled{opacity:.35}.question-card>p{color:#8d8c8b;font-size:9px;line-height:1.6;margin:14px 0 0}.choice-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.choice-tabs button{height:48px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:#aaa}.choice-tabs button.active{border-color:var(--gold);color:#fff;background:rgba(213,178,117,.13)}.choice-tabs+input{margin-top:15px}
.loading-scene{height:100svh;min-height:620px;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at center,#24212a 0,#0a0b0f 58%)}.seal-loader{width:106px;height:106px;display:grid;place-items:center;margin:0 auto 30px;position:relative}.seal-loader span{width:64px;height:64px;border:1px solid var(--red);color:#d45159;display:grid;place-items:center;font:700 32px "Gowun Batang",serif;animation:pulse 1.6s infinite}.seal-loader i{position:absolute;inset:0;border:1px solid rgba(213,178,117,.2);border-top-color:var(--gold);border-radius:50%;animation:spin 2s linear infinite}.loading-scene p{font:400 16px "Gowun Batang",serif;animation:fade .5s}.record-page{background:#0a0b0f;padding-top:52px}.record-nav{background:rgba(8,9,13,.92);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px)}
.record-hero{height:690px;position:relative;overflow:hidden}.record-hero>img{object-fit:cover;object-position:center}.record-shade{position:absolute;inset:0;background:linear-gradient(0deg,#0a0b0f 0%,rgba(10,11,15,.12) 54%,rgba(10,11,15,.4))}.record-hero-copy{position:absolute;left:24px;right:24px;bottom:48px;text-align:center}.record-hero-copy>span{display:inline-block;background:var(--red);padding:7px 10px;font-size:9px;font-weight:700;letter-spacing:.12em}.record-hero-copy h1{font:400 29px/1.5 "Nanum Pen Script",cursive;margin:18px 0 10px;text-shadow:0 3px 10px #000}.record-hero-copy p{color:#aaa;font-size:11px}.symbol-reveal{text-align:center;padding:72px 26px 58px;background:radial-gradient(circle at 50% 28%,rgba(167,25,36,.12),transparent 38%)}.symbol-reveal>p:first-child{color:var(--gold);font-size:9px;letter-spacing:.18em}.pillar-seal{width:112px;height:112px;border-radius:50%;margin:28px auto;display:grid;place-content:center;color:white;border:1px solid rgba(255,255,255,.25);box-shadow:0 16px 45px rgba(0,0,0,.4)}.pillar-seal.wood{background:radial-gradient(circle at 35% 30%,#658168,#173627)}.pillar-seal.fire{background:radial-gradient(circle at 35% 30%,#d1644a,#681621)}.pillar-seal.earth{background:radial-gradient(circle at 35% 30%,#aa8858,#4d3826)}.pillar-seal.metal{background:radial-gradient(circle at 35% 30%,#cfd2d4,#4e5867)}.pillar-seal.water{background:radial-gradient(circle at 35% 30%,#6b8ca3,#142a47)}.pillar-seal span:first-child{font:700 43px/1 "Gowun Batang",serif}.pillar-seal span:last-child{font:400 20px "Gowun Batang",serif;opacity:.6}.symbol-reveal h2{font:700 30px/1.4 "Gowun Batang",serif;margin:0 0 15px}.symbol-reveal>p:not(:first-child){color:#c4beb4;font:400 15px/1.9 "Gowun Batang",serif}.symbol-tags{display:flex;justify-content:center;gap:6px;margin:25px 0}.symbol-tags span{border:1px solid rgba(255,255,255,.17);padding:6px 9px;color:#aaa;font-size:9px}.symbol-reveal>small{display:block;color:#68696d;font-size:9px;line-height:1.7}.social-proof{height:60px;background:#78141d;display:flex;align-items:center;justify-content:center;gap:12px;color:#f6dfe1}.social-proof p{margin:0;font-size:10px}.social-proof span{color:#d9a76d}
.free-record>h2{text-align:center;font:700 28px "Gowun Batang",serif;padding:84px 22px 45px;margin:0}.free-record article{border-top:1px solid rgba(255,255,255,.1)}.comic-panel{height:590px;position:relative;overflow:hidden}.comic-panel>img{object-fit:cover}.comic-panel>span{position:absolute;left:16px;top:16px;background:var(--red);padding:7px 9px;font-size:9px;font-weight:700}.comic-caption{position:absolute;left:22px;right:22px;bottom:25px;background:rgba(245,241,233,.94);color:#17171a;padding:18px 20px;border-radius:18px 18px 2px 18px;font:400 17px/1.6 "Nanum Pen Script",cursive;box-shadow:0 8px 30px rgba(0,0,0,.28)}.record-copy{padding:42px 26px 64px;background:#f1ece2;color:#17171b}.record-copy>small{color:var(--red);font-size:9px;font-weight:800;letter-spacing:.14em}.record-copy h3{font:700 27px/1.45 "Gowun Batang",serif;margin:14px 0}.record-copy>p{color:#514c46;font:400 15px/1.9 "Gowun Batang",serif}.record-copy>div{margin-top:24px;border-left:3px solid #af8b52;background:#e6ded0;padding:17px 18px}.record-copy>div.danger{border-color:var(--red)}.record-copy>div.action{border-color:#43664d}.record-copy>div b{color:#6c542d;font-size:9px;letter-spacing:.1em}.record-copy>div p{font:700 13px/1.65 "Gowun Batang",serif;margin:6px 0 0}
.sealed-record{padding:82px 22px 70px;text-align:center;background:radial-gradient(circle at 50% 5%,rgba(167,25,36,.22),transparent 27%),#0d0e13}.seal-icon,.sheet-seal{width:62px;height:62px;margin:0 auto 25px;border:1px solid var(--red);color:#d74e57;display:grid;place-items:center;font:700 28px "Gowun Batang",serif;transform:rotate(-2deg)}.sealed-record h2{font:700 29px/1.45 "Gowun Batang",serif;margin:0}.sealed-record>p{color:#97948f;font-size:12px;line-height:1.8;margin:16px auto 35px;max-width:380px}.sealed-list{border-top:1px solid rgba(255,255,255,.14);text-align:left}.sealed-list>div{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;min-height:68px;border-bottom:1px solid rgba(255,255,255,.1)}.sealed-list span{color:#bb8f52;font:700 15px "Gowun Batang",serif}.sealed-list p{margin:0;color:#ddd7cd;font:700 13px/1.5 "Gowun Batang",serif}.sealed-list b{color:#666;font-size:8px;border:1px solid #444;padding:5px 6px}.unlock-button{width:100%;height:62px;margin-top:30px;border:0;background:var(--red);color:white;display:flex;align-items:center;justify-content:space-between;padding:0 21px;font-weight:800}.sealed-record>small{display:block;color:#68686c;font-size:8px;margin-top:12px}.full-record{background:#eee8dd;color:#18181b}.open-message{padding:18px;background:#244a36;color:#dff2e5;text-align:center;font-size:10px}.full-record>article{padding:72px 27px;border-bottom:1px solid #cfc7ba}.chapter-no{display:block;color:var(--red);font:700 38px "Gowun Batang",serif}.full-record article>small{display:block;color:var(--red);font-size:9px;letter-spacing:.1em;margin:12px 0}.full-record h2{font:700 29px/1.4 "Gowun Batang",serif;margin:0 0 28px}.full-record article>p{color:#4a4641;font:400 15px/2 "Gowun Batang",serif}.scene-examples{background:#dfd7ca;padding:20px;margin:28px 0 14px}.scene-examples b,.chapter-action b{color:var(--red);font-size:9px;letter-spacing:.1em}.scene-examples p{font-size:12px;line-height:1.65;margin:10px 0}.chapter-action{border:1px solid #ae9566;background:#f5eddf;padding:20px}.chapter-action p{font:700 13px/1.7 "Gowun Batang",serif;margin:7px 0 0}.record-footer{padding:42px 24px 60px;text-align:center;background:#08090c}.record-footer>span{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 20px;border:1px solid var(--red);color:#c73d45;font:700 21px "Gowun Batang",serif}.record-footer p{color:#666;font-size:8px;line-height:1.8}.record-footer button{border:0;background:none;color:#999;font-size:10px;margin-top:12px}
.checkout-layer{position:fixed;z-index:100;inset:0;background:rgba(0,0,0,.78);display:flex;align-items:flex-end;justify-content:center}.checkout-sheet{width:min(100%,480px);max-height:94svh;overflow:auto;background:#f2ece1;color:#19191c;padding:35px 24px 30px;position:relative;border-radius:18px 18px 0 0}.checkout-close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:29px;color:#777}.checkout-sheet h2{font:700 28px "Gowun Batang",serif;text-align:center;margin:0 0 12px}.checkout-sheet>p{text-align:center;color:#625d56;font-size:12px;line-height:1.7}.checkout-price{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #cfc7ba;border-bottom:1px solid #cfc7ba;padding:18px 0;margin:24px 0}.checkout-price span{font-size:8px;letter-spacing:.12em;color:#777}.checkout-price strong{font:700 20px "Gowun Batang",serif}.sale-price span{display:flex;flex-direction:column;gap:5px;letter-spacing:0}.sale-price span b{color:#a51f2b;font-size:10px}.sale-price span del{color:#918980;font-size:12px}.sale-price strong{color:#8d1722;font-size:24px}.launch-sale-copy{text-align:center;color:#6d5542!important;font-weight:700}.referral-form{margin:16px 0}.referral-form label{display:block;color:#4e4943;font-size:11px;font-weight:700}.referral-form label>span{display:flex;margin-top:8px}.referral-form input{min-width:0;flex:1;height:44px;border:1px solid #bcb1a2;background:#fffaf2;color:#171719;padding:0 12px;text-transform:uppercase;outline:none}.referral-form input:focus{border-color:#9b762f}.referral-form button{height:44px;border:0;background:#28231f;color:#fff;padding:0 14px;font-size:11px;font-weight:700}.referral-message{margin:-7px 0 15px!important;color:#9a2932!important;font-size:10px!important}.referral-message.valid{color:#2f6747!important}.connect-pay{text-align:center;border:1px dashed #b7ad9d;padding:20px}.connect-pay strong{color:#126fb1;font-size:18px;font-style:italic}.connect-pay p{font-size:10px;color:#6d675f;margin:7px 0 0}.preview-pay{margin-top:10px;background:#171b25}.granted-open{width:100%;min-height:58px;border:0;background:#254d3a;color:#fff;padding:0 18px;display:flex;align-items:center;justify-content:space-between;font:700 13px "Gowun Batang",serif}.pay-area>small{display:block;text-align:center;color:#756c61;font-size:9px;line-height:1.6;margin-top:8px}.pay-status{text-align:center;color:#655d54;font-size:10px}.checkout-sheet>small{display:block;text-align:center;color:#81796f;font-size:8px;line-height:1.7;margin-top:18px}.launch-badge{display:inline-block;margin:8px 0 22px;padding:7px 10px;border:1px solid rgba(213,178,117,.55);color:#e5c78d;background:rgba(213,178,117,.08);font-size:9px;font-weight:800;letter-spacing:.08em}.sealed-record .launch-badge+h2{margin-top:0}
.blueprint{padding:72px 24px 66px;background:#eee7dc;color:#171719;border-top:1px solid #cfc4b4}.section-eyebrow{color:#a42a31!important;font-size:9px!important;font-weight:800!important;letter-spacing:.16em!important;text-align:center}.blueprint h2{font:700 28px/1.45 "Gowun Batang",serif;text-align:center;margin:14px 0 12px;word-break:keep-all}.blueprint>p{margin:0 auto 30px;max-width:360px;color:#696058;font:400 13px/1.75 "Gowun Batang",serif;text-align:center}.blueprint-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.blueprint-grid article{min-height:138px;background:#f8f3ea;border:1px solid #d8ccba;padding:18px 15px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:0 8px 24px rgba(54,39,23,.06)}.blueprint-grid article>span{font:700 31px "Gowun Batang",serif;color:#9c252d}.blueprint-grid article>small{font-size:9px;color:#8b8175;margin:9px 0 5px}.blueprint-grid article>b{font:700 13px/1.45 "Gowun Batang",serif;color:#2b2724}.reading-volume{margin:0 0 26px;border:1px solid rgba(213,178,117,.28);padding:17px 16px;display:grid;grid-template-columns:1fr 1fr;gap:9px;text-align:left;background:rgba(255,255,255,.025)}.reading-volume b{grid-column:1/-1;color:#d5b275;font-size:9px;letter-spacing:.14em}.reading-volume span{color:#cbc3b7;font-size:10px}.full-record blockquote{margin:0 0 27px;padding:20px 18px;border-left:3px solid #a71924;background:#e2d8c9;color:#28221d;font:700 16px/1.7 "Gowun Batang",serif}.full-record article>p+p{margin-top:17px}.record-copy>p+p{margin-top:15px}
.persona-select-page{min-height:100svh;padding:80px 16px 30px;background:radial-gradient(circle at 50% 6%,#282638 0,#101119 33%,#08090d 76%);position:relative;overflow:hidden}.persona-select-page:before{content:"";position:absolute;inset:0;opacity:.22;pointer-events:none;background-image:linear-gradient(rgba(213,178,117,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(213,178,117,.04) 1px,transparent 1px);background-size:44px 44px}.persona-heading{position:relative;text-align:center;margin-bottom:22px}.persona-heading>p{margin:0;color:var(--gold);font-size:8px;letter-spacing:.3em}.persona-heading h1{font:700 28px/1.35 "Gowun Batang",serif;margin:10px 0 9px;word-break:keep-all}.persona-heading>span{display:block;color:#96929a;font:400 11px/1.65 "Gowun Batang",serif;word-break:keep-all}.persona-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px}.persona-card{height:276px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:#151721;box-shadow:0 15px 35px rgba(0,0,0,.28);transition:transform .25s,border-color .25s,box-shadow .25s}.persona-card:hover,.persona-card:focus-within{transform:translateY(-4px);border-color:rgba(213,178,117,.7);box-shadow:0 20px 42px rgba(0,0,0,.42),0 0 0 1px rgba(213,178,117,.12)}.persona-main{position:absolute;inset:0;width:100%;border:0;padding:0;background:transparent;color:#fff;overflow:hidden;text-align:left}.guide-art{position:absolute;inset:0;background-repeat:no-repeat;background-size:cover}.persona-breathing{inset:-4px;animation:persona-breathe 5.2s ease-in-out infinite;transform-origin:50% 72%;will-change:transform}.persona-card:nth-child(2) .persona-breathing{animation-delay:-1.2s;animation-duration:5.8s}.persona-card:nth-child(3) .persona-breathing{animation-delay:-2.5s;animation-duration:5.5s}.persona-card:nth-child(4) .persona-breathing{animation-delay:-3.7s;animation-duration:6.1s}.persona-card:hover .persona-breathing,.persona-card:focus-within .persona-breathing{animation-duration:3.7s}.persona-fade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,6,10,.98) 0%,rgba(5,6,10,.62) 25%,transparent 58%),linear-gradient(90deg,rgba(0,0,0,.08),transparent 60%)}.persona-info{position:absolute;left:13px;right:13px;bottom:42px;display:flex;flex-direction:column;text-shadow:0 2px 8px #000}.persona-info small{color:#d6b878;font-size:7px;letter-spacing:.12em}.persona-info strong{font:700 21px "Gowun Batang",serif;margin:3px 0}.persona-info span{color:#b6b1b0;font-size:8px}.persona-cycle{position:absolute;z-index:5;right:9px;bottom:9px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(7,8,12,.72);color:#d3cec6;padding:6px 9px;font-size:9px;backdrop-filter:blur(8px)}.persona-cycle:hover{border-color:var(--gold);color:#fff}.persona-cycle span{margin-left:3px}.fate-pick{position:relative;width:100%;min-height:51px;margin-top:14px;border:1px solid rgba(213,178,117,.34);border-radius:9px;background:linear-gradient(90deg,rgba(117,21,31,.65),rgba(34,29,43,.9));color:#f7eee1;font:700 12px "Gowun Batang",serif;letter-spacing:.02em}.fate-pick span{color:var(--gold);margin-right:8px}.persona-footnote{position:relative;text-align:center;color:#66636a;font-size:8px;line-height:1.6;margin:12px 0 0}.scene-guide-art{inset:-10px;animation:scene-breathe 6s ease-in-out infinite;transform-origin:50% 68%}.scene-greeting .scene-vignette{background:linear-gradient(0deg,rgba(5,7,11,.98) 0%,rgba(5,7,11,.18) 54%,rgba(5,7,11,.38) 100%)}.guide-nameplate{position:absolute;z-index:5;left:20px;top:74px;border-left:2px solid var(--gold);padding:5px 0 5px 11px;text-shadow:0 2px 10px #000}.guide-nameplate small{display:block;color:#d6b878;font-size:8px;letter-spacing:.12em}.guide-nameplate strong{display:block;font:700 23px "Gowun Batang",serif;margin-top:2px}.persona-greeting{bottom:132px}.record-guide-art{inset:-12px;background-size:cover;background-position-y:12%!important;animation:scene-breathe 7s ease-in-out infinite;transform-origin:50% 70%}.record-guide-label{position:absolute;z-index:4;top:20px;left:20px;color:#d8b978;font:700 9px "Gowun Batang",serif;letter-spacing:.08em;text-shadow:0 2px 8px #000}.comic-guide-art{background-size:cover;inset:-8px;animation:scene-breathe 6.5s ease-in-out infinite;transform-origin:50% 68%}.comic-guide-art.scene-b{filter:saturate(.72) brightness(.76)}.comic-guide-art.scene-c{filter:saturate(.9) contrast(1.08)}

/* Character art is intentionally static until face, hair and body layers are available. */
.persona-breathing,.scene-guide-art,.record-guide-art,.comic-guide-art{animation:none!important;transform:none!important;will-change:auto}
.persona-card{border-radius:1px;box-shadow:0 14px 30px rgba(0,0,0,.32);transition:border-color .2s,box-shadow .2s}
.persona-card:hover,.persona-card:focus-within{transform:none;border-color:rgba(213,178,117,.72);box-shadow:0 14px 30px rgba(0,0,0,.4),inset 0 0 0 1px rgba(213,178,117,.08)}
.persona-cycle{right:11px;bottom:10px;border:1px solid #efd7a5;border-radius:999px;background:linear-gradient(135deg,#f3e3c3,#d2ad69);color:#1d252b;padding:6px 10px;font:800 9px "Noto Sans KR",sans-serif;letter-spacing:.04em;box-shadow:0 5px 18px rgba(0,0,0,.3)}
.persona-cycle:hover{border-color:#fff0c9;background:linear-gradient(135deg,#fff0d3,#dfbd78);color:#11181d}
.fate-pick{min-height:54px;margin-top:16px;border:0;border-top:1px solid rgba(213,178,117,.48);border-bottom:1px solid rgba(213,178,117,.48);border-radius:0;background:#101117;color:#eee5d8;font:700 12px "Gowun Batang",serif;letter-spacing:.06em}
.fate-pick:hover{background:#171820;border-color:#d5b275}
.story-choice{border-radius:0;background:#0b0c10;border-color:rgba(213,178,117,.68);box-shadow:none;backdrop-filter:none;letter-spacing:.02em}
.story-choice:hover{background:#171218;border-color:#d5b275;transform:none}
.story-choice.red{background:#801722;border-color:#b33a42}
.speech-bubble{border:1px solid #c8b998;border-left:3px solid #8f1c25;border-radius:0;background:#eee7db;box-shadow:0 16px 38px rgba(0,0,0,.38)}
.speech-bubble:after{display:none}
.persona-greeting{bottom:136px;padding:19px 20px 18px}
.persona-greeting b{font-size:15px;letter-spacing:.01em}
.persona-greeting p{margin-top:9px;font-size:13px;line-height:1.75}
.scene-greeting .story-choice.red{min-height:56px;border:1px solid #bca77b;border-left:4px solid #8e1c25;background:#ece3d3;color:#17171a;box-shadow:none}
.scene-greeting .story-choice.red:hover{background:#f4eddf;border-color:#d1bb8c}
.scene-greeting .skip{color:#c4beb4;text-decoration:none;border-bottom:1px solid rgba(196,190,180,.45);padding:3px 0}
.comic-caption{border-radius:0;border-left:3px solid var(--red)}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{box-shadow:0 0 35px rgba(167,25,36,.45);transform:scale(1.04)}}@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media(min-width:481px){body{background:radial-gradient(circle at center,#202129 0,#08090c 58%)}.story-shell,.record-page{border-left:1px solid rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.08)}}@media(max-width:380px){.persona-card{height:245px}.persona-heading h1{font-size:24px}.persona-cycle span{display:none}.question-card h2{font-size:22px}.record-hero{height:620px}.comic-panel{height:520px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.guide-art.moa-guide-art{background-size:cover;background-position:center top}

/* Guide cards and the free-to-paid webtoon bridge */
.persona-info{display:flex;flex-direction:column}
.persona-info strong{order:1;margin:0 0 4px}
.persona-info small{order:2;font-size:10px}
.persona-info span{display:none!important}
.reading-bridge{padding:34px 0;background:#07111b;border-top:1px solid rgba(207,172,114,.2)}
.reading-bridge.paid{padding-top:22px;background:#0b1722}
.guide-bridge-panel{position:relative;margin:0;aspect-ratio:887/441;overflow:hidden;background:#07101a;border-top:1px solid rgba(207,172,114,.18)}
.guide-bridge-panel+ .guide-bridge-panel{border-top:2px solid #07111b}
.guide-bridge-panel img{display:block;width:100%;height:100%;object-fit:cover}
.free-bridge-scene img,.paid-bridge-scene img{object-position:center}
.bridge-speech-bubble{position:absolute!important;display:flex!important;align-items:center;justify-content:center;padding:12px 20px!important;border:2px solid rgba(35,31,28,.92)!important;border-radius:50%!important;background:rgba(255,250,241,.97)!important;color:#25211e!important;text-align:center;font-family:"Gowun Batang",serif!important;font-weight:700!important;line-height:1.42!important;letter-spacing:-.035em!important;word-break:keep-all!important;overflow-wrap:normal!important;text-wrap:pretty;box-shadow:0 5px 16px rgba(0,0,0,.2)}
.bridge-speech-bubble>span,.bridge-speech-bubble>p{position:relative;z-index:1}
.question-feature-demo{padding:28px 18px 34px;background:linear-gradient(180deg,#0a1621,#101a24);border-top:1px solid rgba(207,172,114,.22);color:#f4ede4}
.reading-method-preview{padding:34px 22px 38px;background:#0a151f;border-top:1px solid rgba(207,172,114,.22);color:#f5eee4}.reading-method-preview>header{max-width:650px;margin:0 auto 22px;text-align:center}.reading-method-preview>header small{display:block;margin-bottom:8px;color:#e4bd6d;font-size:9px;font-weight:800;letter-spacing:.15em}.reading-method-preview>header h3{margin:0;font:700 23px/1.45 "Gowun Batang",serif;letter-spacing:-.035em}.reading-method-preview>header p{margin:10px auto 0;max-width:560px;color:#d8d0c6;font-size:13px;line-height:1.75;word-break:keep-all}.reading-method-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:760px;margin:0 auto}.reading-method-steps article{min-width:0;padding:18px 16px;border:1px solid rgba(213,178,112,.3);border-radius:3px;background:#101c27}.reading-method-steps article>span{display:block;margin-bottom:12px;color:#d8a84c;font:700 10px/1 var(--ui-font);letter-spacing:.12em}.reading-method-steps article>b{display:block;color:#fff8ec;font:700 15px/1.5 "Gowun Batang",serif;word-break:keep-all}.reading-method-steps article>p{margin:9px 0 0;color:#cfc6bb;font-size:11px;line-height:1.72;word-break:keep-all}
.question-feature-demo>header{display:flex;flex-direction:column;gap:5px;margin:0 4px 14px}.question-feature-demo>header small{color:#e6c47d;font-size:9px;font-weight:800;letter-spacing:.14em}.question-feature-demo>header strong{font:700 18px/1.45 "Gowun Batang",serif}
.question-demo-stage{position:relative;min-height:370px;overflow:hidden;border:1px solid rgba(218,190,138,.24);border-radius:18px;background:#f4efe7;color:#27231f;box-shadow:0 16px 35px rgba(0,0,0,.3)}
.question-demo-reading{margin:0;padding:24px 22px;font:500 14px/1.85 var(--ui-font);word-break:keep-all}.question-demo-reading mark{padding:2px 0;background:linear-gradient(90deg,rgba(226,193,111,.5),rgba(226,193,111,.5)) 0 100%/0 100% no-repeat;color:inherit;animation:question-demo-highlight 9s ease-in-out infinite}
.question-demo-chip{position:absolute;z-index:3;left:50%;top:126px;min-width:230px;max-width:calc(100% - 28px);min-height:40px;transform:translate(-50%,8px);border:1px solid #8d6d34;border-radius:999px;background:#201c20;color:#fff4dc;padding:8px 15px;font-size:11px;font-weight:800;opacity:0;pointer-events:none;animation:question-demo-chip 9s ease-in-out infinite}
.question-demo-chat{position:relative;z-index:4;margin:42px 12px 12px;padding:16px;border:1px solid #d9cbb8;border-radius:15px;background:#fffaf2;box-shadow:0 12px 28px rgba(20,16,12,.18);transform:translateY(22px);opacity:0;animation:question-demo-chat 9s ease-in-out infinite}.question-demo-chat>small{display:block;color:#95743e;font-size:8px;font-weight:800;letter-spacing:.12em}.question-demo-chat blockquote{margin:7px 0 12px;padding:10px 12px;border-left:2px solid #af823d;background:#eee5d8;font:600 11px/1.55 var(--ui-font)}.question-demo-chat p{max-width:86%;margin:8px 0;padding:9px 11px;border-radius:12px;font:600 11px/1.55 var(--ui-font)}.question-demo-user{margin-left:auto!important;background:#27252a;color:#fff}.question-demo-answer{background:#e7dccd;color:#302923;opacity:0;transform:translateY(6px);animation:question-demo-answer 9s ease-in-out infinite}.question-demo-answer b{display:block;margin-bottom:3px;color:#8e682d;font-size:9px}
.question-demo-pointer{position:absolute;z-index:5;left:73%;top:145px;width:18px;height:24px;background:#f9f6ef;clip-path:polygon(0 0,0 100%,28% 72%,46% 100%,62% 91%,44% 65%,78% 65%);filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));opacity:0;animation:question-demo-pointer 9s ease-in-out infinite}
@keyframes question-demo-highlight{0%,12%,100%{background-size:0 100%}24%,82%{background-size:100% 100%}}
@keyframes question-demo-chip{0%,24%,100%{opacity:0;transform:translate(-50%,8px)}32%,45%{opacity:1;transform:translate(-50%,0)}52%,92%{opacity:0;transform:translate(-50%,-4px)}}
@keyframes question-demo-chat{0%,43%,100%{opacity:0;transform:translateY(22px)}53%,92%{opacity:1;transform:none}}
@keyframes question-demo-answer{0%,61%,100%{opacity:0;transform:translateY(6px)}70%,92%{opacity:1;transform:none}}
@keyframes question-demo-pointer{0%,27%,100%{opacity:0;transform:translate(0,0)}33%{opacity:1;transform:translate(-9px,-4px)}40%{opacity:1;transform:translate(-25px,-19px) scale(.9)}46%,92%{opacity:0;transform:translate(-25px,-19px) scale(.85)}}
@media(max-width:600px){.reading-method-preview{padding:28px 14px 32px}.reading-method-preview>header h3{font-size:20px}.reading-method-steps{grid-template-columns:1fr}.reading-method-steps article{padding:16px}.reading-method-steps article>b{font-size:14px}.reading-method-steps article>p{font-size:12px}}
@media(max-width:480px){.bridge-speech-bubble{padding:8px 10px!important;line-height:1.34!important}.guide-bridge-panel{min-height:0;aspect-ratio:887/441}.guide-bridge-panel img{object-position:center}.question-feature-demo{padding-left:12px;padding-right:12px}.question-demo-stage{min-height:390px}.question-demo-reading{padding:21px 17px;font-size:13px}.question-demo-chip{top:144px;min-width:210px}.question-demo-chat{margin-top:52px}}
@media(prefers-reduced-motion:reduce){.question-demo-reading mark{background-size:100% 100%;animation:none}.question-demo-chip,.question-demo-pointer{display:none}.question-demo-chat,.question-demo-answer{opacity:1;transform:none;animation:none}}

/* Readability and form-flow quality gate */
:root{--ui-font:system-ui,-apple-system,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
html{font-size:16px;text-size-adjust:100%}
body,button,input{font-family:var(--ui-font);text-rendering:optimizeLegibility}
.site-loading-indicator{position:fixed;z-index:9999;inset:0 0 auto;height:3px;overflow:hidden;background:transparent;opacity:0;pointer-events:none;transition:opacity .16s ease}.site-loading-indicator.active{opacity:1}.site-loading-indicator i{display:block;width:34%;height:100%;border-radius:0 999px 999px 0;background:linear-gradient(90deg,#9b742f,#efd18d,#fff1c6);box-shadow:0 0 14px rgba(239,209,141,.58);animation:site-loading-run 1.05s ease-in-out infinite}@keyframes site-loading-run{0%{transform:translateX(-110%)}100%{transform:translateX(395%)}}@media(prefers-reduced-motion:reduce){.site-loading-indicator i{width:76%;animation:none}}
.story-top button,.record-nav button{font-size:12px;font-weight:700;color:#f2eee7}.story-top a,.record-nav a{font-size:11px;color:#e6dfd5}
.mini-brand{font-size:11px;color:#f2eee7}
.persona-heading>p{font-size:10px}.persona-heading>span{font:500 14px/1.65 var(--ui-font);color:#d2cdd2}
.persona-info small{font-size:10px}.persona-info span{font-size:12px;color:#ece7df}.persona-cycle{font-size:11px}.persona-footnote{font-size:11px;color:#aaa5ad}
.guide-nameplate small{font-size:11px}.persona-greeting b{font-size:17px}.persona-greeting p{font:500 15px/1.75 var(--ui-font);color:#3f3a35}
.scene-name,.scene-birth,.scene-gender,.scene-time,.scene-place{display:grid;align-items:center;padding:70px 22px 22px}
.question-card{position:relative;inset:auto;transform:none;width:100%;padding:28px 24px;background:rgba(10,12,17,.97);backdrop-filter:none}
.question-card h2{font:700 25px/1.5 var(--ui-font);margin:22px 0 28px;letter-spacing:-.025em}
.question-card label{font-size:13px;color:#d0cbc4}.question-card input{font:600 19px var(--ui-font)}
.question-card>p{font-size:12px;line-height:1.75;color:#c4beb6}
.choice-tabs button{font-size:14px;font-weight:700;color:#c8c4be}
.question-progress{display:flex;align-items:center;justify-content:space-between;gap:12px}
.question-progress button{border:0;background:none;color:#e6dfd4;padding:5px 0;font-size:13px;font-weight:700}
.question-progress span{color:#d7b878;font-size:11px;font-weight:700;letter-spacing:.08em}
.symbol-reveal>small{font-size:11px;color:#aaa7a2}.social-proof p{font-size:12px}.section-eyebrow{font-size:10px!important}
.reading-chapter .record-copy>p,.full-record article>p{font-family:var(--ui-font);font-size:16px;line-height:1.95;color:#312e2a}
.scene-examples p,.chapter-action p,.self-check p{font-family:var(--ui-font);font-size:13px}
.free-ai-evidence{margin:28px 0 14px;padding:20px;border:1px solid #b89a61;background:#f4ecde}.free-ai-evidence>b{display:block;margin-bottom:12px;color:#8d2630;font-size:11px;letter-spacing:.08em}.free-ai-evidence p{display:grid;grid-template-columns:minmax(92px,120px) 1fr;gap:12px;margin:9px 0;font-family:var(--ui-font);font-size:13.5px;line-height:1.7;color:#29241f}.free-ai-evidence span{font-weight:800;color:#315864}
.sealed-record>p{font-size:14px;color:#c4beb6}.sealed-list p{font-family:var(--ui-font);font-size:14px}.reading-volume span{font-size:12px}.sealed-record>small{font-size:11px;color:#aaa6a0}
.record-footer p{font-size:11px;color:#aaa6a0}.record-footer button{font-size:12px}
.beginner-glossary{padding:64px 24px;background:#f5efe5;color:#25211e;border-top:1px solid #d8cdbd;border-bottom:8px solid #0b0d12}
.beginner-glossary header{text-align:center}.beginner-glossary header small{color:#92242c;font-size:11px;font-weight:800}.beginner-glossary h2{font:700 27px/1.45 "Gowun Batang",serif;margin:12px 0}.beginner-glossary header p{margin:0 auto 28px;max-width:390px;font:500 14px/1.75 var(--ui-font);color:#625b54}
.beginner-glossary>div{display:grid;gap:10px}.beginner-glossary article{padding:17px 18px;background:#fffaf2;border:1px solid #d9cdbb}.beginner-glossary article b{display:block;color:#8e242c;font-size:15px}.beginner-glossary article p{margin:7px 0 0;font:500 14px/1.75 var(--ui-font);color:#514a44}

/* Higher-contrast reading mode */
body{-webkit-font-smoothing:auto;color:#f7f2ea}
.mini-brand,.persona-heading>p,.guide-nameplate small,.record-ticket span,.section-eyebrow,.reading-chapter header>span,.reading-chapter header>small{color:#f0cf91!important;text-shadow:none}
.persona-heading>span,.persona-footnote,.question-card>p,.sealed-record>p,.sealed-record>small,.record-footer p{color:#ded8d0}
.question-card{border:1px solid rgba(255,255,255,.16)}
.question-card h2{font-size:27px;font-weight:800;color:#fff;line-height:1.45}
.question-card label{font-size:14px;font-weight:700;color:#eee8df}
.question-card input{color:#fff;background:#171a22;border-bottom-color:#c9ae77;padding:15px 13px}
.question-card input::placeholder{color:#aaa6a0}
.simple-number-field>span{display:block;margin-bottom:8px}.simple-number-field>small,.time-number-field>small{display:block;margin-top:9px;color:#bdb7ae;font-size:11px;line-height:1.55;font-weight:500}.time-number-field{margin:18px 0 0;padding:0;border:0}.time-number-field legend{margin-bottom:8px;font-size:14px;font-weight:700;color:#eee8df}.time-select-row{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:8px}.time-select-row select{width:100%;min-width:0;padding:14px 10px;border:1px solid rgba(201,174,119,.62);border-radius:8px;background:#171a22;color:#fff;font:inherit;font-size:14px}.time-select-row select:focus{outline:2px solid rgba(232,196,117,.42);outline-offset:1px}@media(max-width:420px){.time-select-row{gap:6px}.time-select-row select{padding:13px 7px;font-size:13px}}
.symbol-reveal>p:not(:first-child){color:#eee9e1;font-family:var(--ui-font);font-size:17px;font-weight:600;line-height:1.85}
.symbol-reveal>small{font-family:var(--ui-font);font-size:13px;line-height:1.8;color:#d0cbc4}
.blueprint{background:#f4eee4;color:#181512}
.blueprint>p{max-width:620px;color:#39332e;font-family:var(--ui-font);font-size:16px;font-weight:600;line-height:1.85}
.blueprint-grid article{background:#fffdf9;border-color:#bcae9a}
.blueprint-grid article>small{font-size:11px;font-weight:700;color:#655d54}
.blueprint-grid article>b{font-family:var(--ui-font);font-size:14px;color:#1f1b18}
.element-reading>small{font-family:var(--ui-font);font-size:13px!important;font-weight:600;line-height:1.75!important;color:#504942!important}
.reading-chapter .record-copy,.full-record>article,.full-record .paid-chapter-block>article{background:#fbf7ef}
.reading-chapter .record-copy>p,.full-record article>p{font-size:17.5px;line-height:1.9;font-weight:520;color:#201d1a;letter-spacing:-.012em}
.reading-chapter .record-copy h3,.full-record .paid-chapter-block>article h2{color:#171411}
.reading-chapter blockquote,.full-record blockquote{font-size:17px;line-height:1.75;color:#201b17;background:#e8dfd1}
.scene-examples p,.chapter-action p,.self-check p{font-size:14.5px;line-height:1.75;color:#29241f}
.beginner-glossary{background:#f8f3eb}.beginner-glossary header p,.beginner-glossary article p{font-size:15.5px;line-height:1.8;font-weight:600;color:#302b26}
.narrator-panel figcaption p{font-family:var(--ui-font);font-size:16px!important;line-height:1.8!important;font-weight:650;color:#1c1916}
@media(min-width:760px){.reading-chapter .record-copy>p,.full-record article>p{font-size:18px;line-height:1.92}.blueprint>p{font-size:17px}.narrator-panel figcaption p{font-size:17px!important}}

/* Celestial archive art direction — shared by free, paid and checkout flows */
:root{
  --night:#070d17;
  --night-soft:#101d2b;
  --teal:#315864;
  --celestial-gold:#cfac72;
  --celestial-paper:#fbf7ef;
  --celestial-ink:#1d1a17;
}
body{background:radial-gradient(circle at 50% 12%,#1a2d3d 0,#080e17 38%,#05080d 74%)}
.story-shell,.record-page{background:var(--night);box-shadow:0 0 90px rgba(0,0,0,.9)}
.story-top,.record-nav{background:linear-gradient(180deg,rgba(5,11,19,.98),rgba(5,11,19,.74));border-bottom:1px solid rgba(207,172,114,.2)}
.persona-select-page{background:radial-gradient(circle at 50% 3%,rgba(72,104,119,.46),transparent 30%),linear-gradient(180deg,#111f2d 0,#09111c 48%,#060b12 100%)}
.persona-select-page:before{opacity:.4;background-image:radial-gradient(circle at 20% 16%,rgba(236,210,159,.75) 0 1px,transparent 1.5px),radial-gradient(circle at 74% 9%,rgba(236,210,159,.5) 0 1px,transparent 1.5px),linear-gradient(rgba(207,172,114,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(207,172,114,.045) 1px,transparent 1px);background-size:103px 91px,139px 123px,48px 48px,48px 48px}
.persona-card{background:#0c1520;border-color:rgba(207,172,114,.28)}
.persona-card:hover,.persona-card:focus-within{border-color:rgba(226,196,139,.82);box-shadow:0 16px 36px rgba(0,0,0,.48),0 0 26px rgba(83,131,145,.13)}
.fate-pick{background:linear-gradient(90deg,#132431,#1a3039);border-color:rgba(207,172,114,.55);color:#fff9ed}
.fate-pick:hover{background:#1b3540}
.question-card{background:linear-gradient(160deg,rgba(13,26,38,.985),rgba(7,14,23,.985));border-color:rgba(207,172,114,.38);box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 0 45px rgba(69,115,128,.06)}
.question-card:before{content:"";position:absolute;inset:10px;pointer-events:none;border:1px solid rgba(207,172,114,.1)}
.question-card input{background:rgba(19,37,50,.82);border-bottom-color:#d1b47d}
.choice-tabs button{background:#0d1a26;border-color:rgba(207,172,114,.27)}
.choice-tabs button.active{background:#1a3540;border-color:#d1b47d}
.question-card>button,.story-choice.red{background:linear-gradient(90deg,#234955,#315f69);border:1px solid #b99a65;color:#fffaf1}
.question-card>button:hover,.story-choice.red:hover{background:#376b76}

/* Illustrated loading screen: the character remains still; only the star chart breathes. */
.loading-scene{height:100svh;min-height:680px;display:flex;flex-direction:column;justify-content:center;gap:0;padding:52px 20px 28px;background:radial-gradient(circle at 50% 28%,rgba(66,104,119,.35),transparent 35%),linear-gradient(180deg,#0c1825,#050a11);overflow:hidden}
.loading-illustration{position:relative;width:min(100%,380px);margin:0 auto;border:1px solid rgba(207,172,114,.42);box-shadow:0 24px 60px rgba(0,0,0,.58);overflow:hidden;aspect-ratio:4/5;background:#0b1521}
.loading-illustration:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 68%,#07101a 100%);pointer-events:none}
.loading-illustration img{display:block;width:100%;height:100%;object-fit:cover}
.guide-loading-illustration>.guide-art{position:absolute;inset:0;background-color:#0b1521;background-repeat:no-repeat}
.loading-illustration>i{position:absolute;z-index:2;left:22%;right:22%;bottom:9%;aspect-ratio:1;border:1px solid rgba(240,211,154,.75);border-radius:50%;box-shadow:0 0 35px rgba(218,180,112,.3),inset 0 0 25px rgba(218,180,112,.13);animation:chart-breathe 2.2s ease-in-out infinite;pointer-events:none}
.loading-copy{position:relative;z-index:3;margin:-2px auto 0;width:min(100%,380px);padding:23px 18px 20px;text-align:center;background:linear-gradient(180deg,#0b1723,#08111b);border:1px solid rgba(207,172,114,.32);border-top:0}
.loading-copy b{display:block;color:#f4e6c9;font-size:16px;font-weight:800;letter-spacing:-.02em}
.loading-copy p{min-height:26px;margin:9px 0 7px;color:#e9e4dc;font:600 14px/1.75 var(--ui-font);animation:fade .35s}
.loading-copy>span{display:flex;justify-content:center;gap:6px;height:8px}
.loading-copy>span i{width:5px;height:5px;border-radius:50%;background:#d8b87c;opacity:.25;animation:loading-dot 1.2s ease-in-out infinite}
.loading-copy>span i:nth-child(2){animation-delay:.18s}.loading-copy>span i:nth-child(3){animation-delay:.36s}

/* The day-pillar seal uses the same illustrated webtoon asset everywhere. */
.symbol-reveal{position:relative;background:radial-gradient(circle at 50% 28%,rgba(66,109,122,.2),transparent 35%),linear-gradient(180deg,#09131f,#07101a);border-top:1px solid rgba(207,172,114,.15);border-bottom:1px solid rgba(207,172,114,.14)}
.pillar-seal{width:164px;height:164px;margin:27px auto 30px;border:0;border-radius:0;background:url('/ui/celestial-seal-v1.webp') center/contain no-repeat!important;box-shadow:none;filter:drop-shadow(0 18px 26px rgba(0,0,0,.52));position:relative}
.pillar-seal:after{content:"";position:absolute;inset:24%;border-radius:50%;box-shadow:0 0 28px rgba(116,166,181,.18);pointer-events:none}
.pillar-seal span{position:relative;z-index:1;color:#fff8e9;text-shadow:0 2px 3px #03070d,0 0 14px rgba(218,191,139,.28)}
.pillar-seal span:first-child{font-size:48px}.pillar-seal span:last-child{font-size:21px;opacity:.72;margin-top:2px}
.pillar-seal span small{display:inline-block;margin-left:5px;color:#f4ddb0;font-family:var(--ui-font);font-size:.34em;font-weight:800;vertical-align:middle;opacity:.92}
.symbol-tags span{border-color:rgba(207,172,114,.3);background:rgba(15,30,43,.65);color:#eee4d3}
.social-proof{background:#173541;color:#f7eee0;border-top:1px solid rgba(207,172,114,.22);border-bottom:1px solid rgba(207,172,114,.22)}

/* Free and paid chapters deliberately share one Korean reading system. */
.reading-chapter>header h3,.full-record .paid-chapter-block>article h2{font-family:var(--ui-font);font-size:29px;line-height:1.46;font-weight:850;letter-spacing:-.035em;word-break:keep-all}
.reading-chapter .record-copy>p,.full-record .paid-chapter-block>article>p{font-family:var(--ui-font);font-size:17.5px;line-height:1.92;font-weight:520;letter-spacing:-.014em;color:var(--celestial-ink);word-break:keep-all}
.reading-chapter blockquote,.full-record .paid-chapter-block blockquote{font-family:var(--ui-font);font-size:17px;line-height:1.78;font-weight:700;letter-spacing:-.018em;word-break:keep-all}
.reading-chapter .record-copy,.full-record .paid-chapter-block>article{background:var(--celestial-paper);color:var(--celestial-ink)}
.reading-chapter .record-copy>small,.full-record .paid-chapter-block>article>small{font-family:var(--ui-font);font-size:11px;font-weight:800;color:#315864}

.sealed-record{background:radial-gradient(circle at 50% 0,rgba(64,107,120,.24),transparent 30%),linear-gradient(180deg,#0d1a27,#060c14);border-top:1px solid rgba(207,172,114,.2)}
.seal-icon,.sheet-seal,.record-footer>span{border:0!important;border-radius:0!important;background:url('/ui/celestial-seal-v1.webp') center/contain no-repeat!important;color:#fff4dc!important;text-shadow:0 1px 3px #02060b,0 0 8px rgba(225,194,135,.3);transform:none!important;filter:drop-shadow(0 10px 18px rgba(0,0,0,.4))}
.seal-icon{width:96px;height:96px;font-size:27px;margin-bottom:18px}
.sheet-seal{width:86px;height:86px;font-size:24px}
.record-footer>span{width:66px;height:66px;font-size:20px}
.sealed-list{border-color:rgba(207,172,114,.25)}
.sealed-list>div{border-color:rgba(207,172,114,.13)}
.sealed-list p{color:#f0ebe3}.sealed-list b{color:#c9baa3;border-color:#776a58}
.unlock-button{background:linear-gradient(90deg,#234955,#315f69);border:1px solid #b99a65;color:#fffaf1}
.record-footer{background:#050b12;border-top:1px solid rgba(207,172,114,.2)}
.checkout-layer{background:rgba(3,8,14,.86)}
.checkout-sheet{background:linear-gradient(180deg,#f7f0e4,#eee4d5);border-top:2px solid #b89962;box-shadow:0 -24px 80px rgba(0,0,0,.55)}

@keyframes chart-breathe{50%{transform:scale(1.06);opacity:.58;box-shadow:0 0 48px rgba(218,180,112,.48),inset 0 0 35px rgba(218,180,112,.2)}}
@keyframes loading-dot{50%{opacity:1;transform:translateY(-2px)}}
@media(max-width:380px){.loading-scene{padding-left:14px;padding-right:14px}.pillar-seal{width:148px;height:148px}.reading-chapter>header h3,.full-record .paid-chapter-block>article h2{font-size:26px}.reading-chapter .record-copy>p,.full-record .paid-chapter-block>article>p{font-size:16.5px}}
.loading-retry-actions{display:grid;gap:9px;margin-top:18px}.loading-retry-actions button{margin:0}.loading-retry-actions button+button{background:transparent;color:#d8c8a9;border:1px solid rgba(216,200,169,.48)}
@media(max-width:520px){.free-ai-evidence p{grid-template-columns:1fr;gap:2px}}
@media(min-width:760px){.reading-chapter .record-copy>p,.full-record .paid-chapter-block>article>p{font-size:18px}.loading-illustration,.loading-copy{width:400px}}
@media(prefers-reduced-motion:reduce){.loading-illustration>i,.loading-copy>span i{animation:none!important}}
@media(max-width:380px){.story-top,.record-nav{padding-left:10px;padding-right:10px}.story-top>div,.record-nav>div{gap:5px}.mini-brand{font-size:8px;letter-spacing:.1em}.story-top a,.record-nav a{font-size:9px}.story-top button,.record-nav button{font-size:10px;padding:2px}}

.toss-pay-button{width:100%;min-height:58px;border:0;border-radius:10px;background:#3182f6;color:#fff;font-weight:800;font-size:15px;box-shadow:0 9px 24px rgba(49,130,246,.22)}
.payment-method-guide{margin:18px 0;padding:16px;border:1px solid #c9bda9;border-radius:12px;background:#fffaf2;text-align:left}.payment-method-guide>div:first-child{display:flex;flex-direction:column;gap:4px}.payment-method-guide>div:first-child>b{font:700 15px/1.4 "Gowun Batang",serif;color:#28231f}.payment-method-guide>div:first-child>span{color:#71675d;font-size:10px;line-height:1.5}.payment-route-list{display:grid;gap:9px;margin:13px 0 10px}.payment-route-list>button{width:100%;min-height:62px;padding:10px 12px;border:1px solid #d8cfc2;border-radius:10px;background:#fff;display:flex;align-items:center;gap:11px;color:#28231f;text-align:left;cursor:pointer}.payment-route-list>button.selected{border:2px solid #3182f6;padding:9px 11px;background:#f7fbff;box-shadow:0 4px 14px rgba(49,130,246,.1)}.payment-route-list i{flex:0 0 36px;width:36px;height:36px;border-radius:9px;background:#182b47;color:#fff;display:grid;place-items:center;font-size:10px;font-style:normal;font-weight:900}.payment-route-list button:last-child i{background:#3182f6}.payment-route-list span{min-width:0;display:grid;gap:3px}.payment-route-list b{font-size:12px}.payment-route-list small{color:#756c62;font-size:9px;line-height:1.45;word-break:keep-all}.payment-method-guide>small{display:block;color:#7e7469;font-size:9px;line-height:1.55;word-break:keep-all}
.studio-credit{margin:28px 0 0;color:#8f969d;font-size:9px;font-weight:800;letter-spacing:.16em;text-align:center}
.review-product-card{position:relative;margin:28px 0 18px;padding:22px 18px;border:1px solid rgba(213,178,117,.38);border-radius:14px;background:linear-gradient(145deg,rgba(27,45,58,.96),rgba(9,18,28,.98));box-shadow:0 18px 42px rgba(0,0,0,.28);text-align:left}.review-product-card>small{color:#d6b878;font-size:8px;font-weight:800;letter-spacing:.16em}.review-product-card h2{margin:8px 0 10px;color:#fff8eb;font:700 22px/1.4 "Gowun Batang",serif;word-break:keep-all}.review-product-card>p{margin:0;color:#c5c0b9;font-size:10px;line-height:1.75;word-break:keep-all}.review-product-price{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:18px 0 14px;padding:13px 0;border-top:1px solid rgba(213,178,117,.18);border-bottom:1px solid rgba(213,178,117,.18)}.review-product-price span{color:#8f8b85;font-size:9px;text-decoration:line-through}.review-product-price strong{color:#f1c87f;font:800 19px/1 "Gowun Batang",serif;white-space:nowrap}.review-product-card ul{display:grid;gap:6px;margin:0 0 18px;padding:0;list-style:none}.review-product-card li{color:#ded7cd;font-size:10px;line-height:1.5}.review-product-card li:before{content:"✓";margin-right:7px;color:#d6b878;font-weight:900}.review-product-card>a{display:flex;align-items:center;justify-content:center;min-height:48px;border:1px solid rgba(213,178,117,.52);border-radius:8px;background:#182b3a;color:#fff4df;font-size:11px;font-weight:800;text-align:center;text-decoration:none}.review-seller-footer{position:relative;margin:0 -16px;padding:22px 20px;border-top:1px solid rgba(213,178,117,.2);border-bottom:1px solid rgba(213,178,117,.12);background:rgba(3,8,13,.55);color:#9ea3a7;text-align:center}.review-seller-footer>strong{display:block;margin-bottom:8px;color:#e8dccb;font:700 14px "Gowun Batang",serif}.review-seller-footer p{margin:4px 0;color:#9ea3a7;font-size:8px;line-height:1.6;word-break:keep-all}.review-seller-footer a{color:#d8c7ad;text-underline-offset:3px}.review-seller-footer>small{display:block;margin-top:8px;color:#777f86;font-size:8px}.review-seller-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;margin-top:15px}.review-seller-footer nav a{font-size:9px;font-weight:700}.review-seller-footer+.studio-credit{margin-top:18px}
.record-footer .studio-signature{margin:20px auto 12px;color:#d2b77e;font-size:10px;font-weight:800;letter-spacing:.12em}
.record-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 12px;margin:0 auto 14px;color:#b7afa3;font-size:10px}.record-contact a{color:#e2d6c3;font-weight:800;text-underline-offset:3px}.record-contact small{color:#8f8b85;font-size:10px}
.toss-pay-button:disabled{opacity:.5}.toss-connect{margin-top:10px}.toss-connect strong{color:#3182f6;font-style:normal}.payment-divider{display:flex;align-items:center;gap:10px;margin:17px 0;color:#918980;font-size:9px}.payment-divider:before,.payment-divider:after{content:"";height:1px;flex:1;background:#d2c8ba}
.payment-result-page{min-height:100svh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 16%,#23394a,#080b10 60%);color:#f5eee2;text-align:center}.payment-result-page section{width:min(100%,440px);padding:44px 30px 34px;border:1px solid rgba(213,178,117,.3);border-radius:16px;background:linear-gradient(155deg,rgba(18,29,40,.97),rgba(8,13,20,.98));box-shadow:0 28px 80px rgba(0,0,0,.38)}.payment-brand{width:76px;height:76px;margin:0 auto 19px;background:url('/brand-icon.png') center/contain no-repeat;filter:drop-shadow(0 8px 18px rgba(0,0,0,.32))}.payment-result-page small{display:block;color:#d0a960;font-size:9px;font-weight:800;letter-spacing:.18em}.payment-result-page h1{margin:12px 0 10px;font:700 24px/1.5 "Gowun Batang",serif;word-break:keep-all}.payment-result-page p{margin:0;color:#b8b0a5;font-size:12px;line-height:1.75;word-break:keep-all}.payment-result-page a{display:flex;align-items:center;justify-content:center;min-height:50px;margin-top:25px;border-radius:8px;background:#8f2430;color:#fff;text-decoration:none;font-size:13px;font-weight:800}.payment-result-page a:hover,.payment-result-page a:focus-visible{background:#a52b38;outline:3px solid rgba(209,171,103,.32);outline-offset:3px}
.purchase-restore-message{padding:15px 20px;border-top:1px solid rgba(206,174,118,.35);border-bottom:1px solid rgba(206,174,118,.35);background:#12222d;color:#f3e9d8;text-align:center;font:700 13px/1.7 var(--ui-font)}.purchase-restore-message span{display:block}.purchase-restore-message button{margin-top:9px;border:1px solid rgba(224,194,143,.7);background:transparent;color:#f0d6a8;padding:7px 12px;font:700 11px var(--ui-font);cursor:pointer}
.checkout-login{margin:22px 0;padding:20px;border:1px solid #b7aa98;background:#fffaf2;text-align:left}.checkout-login b{display:block;color:#28231f;font:700 16px/1.5 "Gowun Batang",serif}.checkout-login p{margin:8px 0 16px!important;color:#6c6257!important;font-size:11px!important;line-height:1.7!important;text-align:left!important}.checkout-login a{min-height:50px;padding:0 16px;background:#25221f;color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:800}.account-purchase-note{margin:14px 0!important;padding:11px 13px;border:1px solid #c4b8a7;background:#e8dfd1;color:#514a42!important;font-size:10px!important;line-height:1.65!important;text-align:left!important}
.checkout-identity{margin:20px 0;padding:19px;border:1px solid #b7aa98;border-radius:12px;background:#fffaf2;text-align:left}.checkout-identity>b{display:block;color:#28231f;font:700 17px/1.45 "Gowun Batang",serif}.checkout-identity>p{margin:7px 0 15px!important;color:#6c6257!important;font-size:10px!important;line-height:1.65!important;text-align:left!important;word-break:keep-all}.checkout-identity-actions{display:grid;gap:9px}.checkout-identity-actions>*{width:100%;height:50px;border-radius:7px}.guest-checkout-button{border:1px solid #2d2925;background:#2d2925;color:#fff;font:800 13px var(--ui-font);cursor:pointer}.guest-checkout-button:disabled{opacity:.55;cursor:wait}.checkout-social{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 44px;text-decoration:none;font:800 13px var(--ui-font);letter-spacing:-.02em}.checkout-social span{display:block}.checkout-social.google{border:1px solid #dadce0;background:#fff;color:#202124}.checkout-social.kakao{border:1px solid #fee500;background:#fee500;color:#191919}.checkout-provider-icon{position:absolute;left:17px;width:21px;height:21px;background-position:center;background-repeat:no-repeat;background-size:contain}.checkout-provider-icon.google{background-image:url('/auth/google-g.svg')}.checkout-provider-icon.kakao{background-image:url('/auth/kakao-bubble.svg')}.guest-purchase-note{margin:15px 0;padding:13px 14px;border:1px solid #cbbd9f;border-radius:9px;background:#f4ecdf;text-align:left}.guest-purchase-note b{color:#302a25;font-size:12px}.guest-purchase-note p{margin:4px 0 8px!important;color:#665e55!important;font-size:9px!important;line-height:1.55!important;text-align:left!important}.guest-purchase-note button{padding:0;border:0;border-bottom:1px solid #706556;background:transparent;color:#574d43;font-size:9px;cursor:pointer}
.checkout-consents{margin:18px 0 8px;padding:15px 14px;border:1px solid #c7baa7;background:#fffaf2;text-align:left}.checkout-consents label{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;padding:7px 0;color:#423b34;font-size:11px;line-height:1.65;cursor:pointer}.checkout-consents input{width:18px;height:18px;margin:1px 0 0;accent-color:#8f1923}.checkout-consents a{color:#70151d;font-weight:800;text-underline-offset:2px}.consent-help{margin:0 0 12px!important;color:#746a5e!important;font-size:10px!important;line-height:1.5!important;text-align:left!important}.record-legal-links{display:flex;justify-content:center;gap:16px;margin:4px 0 18px}.record-legal-links a{color:#a99f93;font-size:10px;text-decoration:underline;text-underline-offset:3px}.record-footer{padding-left:18px;padding-right:18px}.record-footer>p{max-width:620px;margin-left:auto;margin-right:auto}

/* v98: stable mobile navigation and fast first-paint artwork */
.mini-brand{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;word-break:keep-all}
.mini-brand b{font:inherit}.mini-brand i{font:inherit;font-style:normal}
.mini-brand-medallion{width:24px;height:24px;flex:0 0 24px;background-image:url('/brand-icon.png');box-shadow:0 0 0 1px rgba(213,178,117,.18),0 4px 12px rgba(0,0,0,.3)}
.story-top>div,.record-nav>div,.story-top a,.record-nav a,.story-top button,.record-nav button{white-space:nowrap;word-break:keep-all}
.persona-preloads{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:none}
.persona-preloads img{position:absolute;width:3px;height:1px}
.persona-card{background:radial-gradient(circle at 50% 30%,rgba(77,111,125,.4),transparent 38%),linear-gradient(180deg,#172837,#09111a)}
.paid-chapter-block{content-visibility:auto;contain-intrinsic-size:1400px}
.moa-flow-panel img{background:linear-gradient(110deg,#0a1520 20%,#162b39 38%,#0a1520 58%);background-size:220% 100%}

@media(max-width:480px){
  .story-top,.record-nav{padding-left:12px;padding-right:12px}
  .mini-brand i{display:none}
  .mini-brand{font-size:12px!important;letter-spacing:.08em!important}
  .mini-brand-medallion{width:22px;height:22px;flex-basis:22px}
  .story-top>div,.record-nav>div{gap:9px;min-width:0}
  .story-top a,.record-nav a{font-size:10px!important;letter-spacing:0!important}
  .story-top button,.record-nav button{font-size:10px!important;letter-spacing:0!important;padding:4px 0!important}
}

/* Final accessibility pass: keep compact controls easy to tap on phones. */
.story-top a,.record-nav a,.story-top button,.record-nav button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.persona-cycle{min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:7px 10px}
.persona-info{bottom:55px}

/* v131: one-at-a-time guide motion and the post-selection escort scene */
.guide-motion-art{overflow:hidden;background-color:#0b1521;background-repeat:no-repeat;background-size:cover}
.guide-motion-art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0;background:#0b1521}
.guide-motion-art.is-video-ready video{opacity:1}
.guide-dual-motion-art{overflow:hidden;background-color:#0b1521;background-repeat:no-repeat;background-size:cover}
.persona-fade{z-index:3}
.persona-info{z-index:4}
.guide-dual-motion-art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;background:#0b1521;transition:opacity .24s ease;will-change:opacity}
.guide-dual-motion-art .guide-idle-video{z-index:1;opacity:0}
.guide-dual-motion-art.is-idle-ready .guide-idle-video{opacity:1}
.guide-dual-motion-art.no-static-poster .guide-idle-video{opacity:1}
.guide-dual-motion-art .guide-greeting-video{z-index:2;opacity:0;pointer-events:none}
.guide-dual-motion-art.is-greeting .guide-greeting-video{opacity:1}
.persona-card.is-moving{border-color:rgba(226,196,139,.78);box-shadow:0 16px 38px rgba(0,0,0,.5),0 0 30px rgba(83,131,145,.16)}
.persona-card.is-moving:after{content:"";position:absolute;z-index:4;left:12px;top:12px;width:6px;height:6px;border-radius:50%;background:#e7c98f;box-shadow:0 0 12px rgba(231,201,143,.8);pointer-events:none}
.guide-escort-preload{position:absolute!important;width:1px!important;height:1px!important;left:0!important;bottom:0!important;opacity:.001!important;pointer-events:none!important;overflow:hidden!important}

.guide-escort-scene{position:relative;min-height:100svh;overflow:hidden;background:#06101a;color:#f7eee1;display:flex;align-items:flex-end;justify-content:center;padding:0 22px 48px}
.guide-escort-scene .escort-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.guide-escort-scene .escort-video{opacity:0}
.guide-escort-scene .escort-video.is-ready{opacity:1}
.escort-light{position:absolute;inset:8% 8% 0;background:radial-gradient(ellipse at 50% 56%,rgba(245,214,152,.36),rgba(60,112,133,.12) 34%,transparent 67%);animation:escort-light-breathe 2.6s ease-in-out infinite}
.escort-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,13,.08) 0%,rgba(4,8,13,.12) 43%,rgba(4,8,13,.94) 83%,#04080d 100%)}
.escort-copy{position:relative;z-index:3;width:min(100%,520px);margin-bottom:70px;text-align:center;text-shadow:0 3px 16px rgba(0,0,0,.9);animation:escort-copy-in .55s .12s ease-out both}
.escort-copy small{color:#e8c88c;font-size:10px;font-weight:800;letter-spacing:.14em}
.escort-copy h2{margin:13px 0 9px;font:700 clamp(24px,7vw,38px)/1.4 "Gowun Batang",serif;word-break:keep-all}
.escort-copy p{margin:0 auto;max-width:430px;color:#e1d8cb;font:500 14px/1.8 var(--ui-font);word-break:keep-all}
.guide-escort-scene>button{position:absolute;z-index:5;left:50%;bottom:34px;transform:translateX(-50%);min-width:210px;height:48px;border:1px solid rgba(231,201,143,.72);border-radius:999px;background:rgba(5,12,20,.76);color:#f8ecda;font:800 12px var(--ui-font);backdrop-filter:blur(10px);cursor:pointer}
.guide-escort-scene>button span{margin-left:13px;color:#e8c88c}
@keyframes escort-light-breathe{50%{opacity:.72;transform:scale(1.04)}}
@keyframes escort-copy-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){.guide-motion-art video,.guide-escort-scene .escort-video{display:none}.escort-light,.escort-copy{animation:none}}

/* v159: idle-only guide cards and the centered greeting sequence */
.guide-idle-art{overflow:hidden;background-color:#0b1521;background-repeat:no-repeat;background-size:cover}
.guide-idle-art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0;background:#0b1521;transition:opacity .18s ease-out}
.guide-idle-art.is-video-ready video{opacity:1}
.persona-card .persona-breathing,.persona-card:hover .persona-breathing,.persona-card:focus-within .persona-breathing{animation:none}
.guide-greeting-backdrop{position:fixed;z-index:1200;inset:0;display:grid;place-items:center;padding:20px;background:rgba(2,7,12,.82);backdrop-filter:blur(12px);animation:guide-dialog-backdrop-in .22s ease-out both}
.guide-greeting-dialog{position:relative;width:min(92vw,520px);height:min(88svh,760px);overflow:hidden;border:1px solid rgba(230,199,140,.6);border-radius:24px;background:#07111b;color:#fff;box-shadow:0 30px 100px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.05);animation:guide-dialog-in .28s ease-out both}
.guide-dialog-close{position:absolute;z-index:8;top:14px;right:14px;width:42px;height:42px;border:1px solid rgba(255,255,255,.34);border-radius:50%;background:rgba(4,10,16,.65);color:#fff;font:300 27px/1 var(--ui-font);cursor:pointer;backdrop-filter:blur(10px)}
.guide-dialog-media,.guide-dialog-idle-fallback{position:absolute;inset:0}
.guide-dialog-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;background:#07111b}
.guide-dialog-media .guide-escort-preloader{z-index:-1;width:1px;height:1px;opacity:0;pointer-events:none}
.guide-dialog-idle,.guide-dialog-idle-fallback{z-index:1}
.guide-dialog-idle-fallback{background-size:cover;background-position:center top}
.guide-dialog-greeting{z-index:2;opacity:0;transition:opacity .16s ease-out}
.guide-dialog-greeting.is-playing{opacity:1}
.guide-dialog-shade{position:absolute;z-index:3;inset:0;background:linear-gradient(180deg,rgba(2,6,10,.03) 0%,rgba(2,6,10,.08) 48%,rgba(2,6,10,.82) 68%,#050b12 100%);pointer-events:none}
.guide-dialog-copy{position:absolute;z-index:5;left:0;right:0;bottom:0;padding:24px 26px 26px;text-align:center;opacity:1;transform:none;pointer-events:auto}
.guide-dialog-copy small{display:block;color:#e7c98f;font:800 10px/1.4 var(--ui-font);letter-spacing:.13em}
.guide-dialog-copy h2{margin:6px 0 9px;font:700 clamp(25px,6vw,34px)/1.3 "Gowun Batang",serif}
.guide-dialog-copy p{max-width:410px;margin:0 auto;color:#f4eee6;font:600 14px/1.75 var(--ui-font);word-break:keep-all;text-shadow:0 2px 10px #000}
.guide-dialog-actions{display:grid;gap:9px;margin-top:18px}
.guide-dialog-actions button{width:100%;min-height:50px;border-radius:999px;font:800 13px var(--ui-font);cursor:pointer}
.guide-dialog-start{border:1px solid #e5c990;background:linear-gradient(135deg,#f0d69d,#c99a4e);color:#17120d;box-shadow:0 9px 24px rgba(201,154,78,.24)}
.guide-dialog-start span{margin-left:12px}
.guide-dialog-reselect{border:1px solid rgba(255,255,255,.28);background:rgba(5,11,18,.72);color:#f6efe5;backdrop-filter:blur(8px)}
.guide-escort-loading{position:absolute;z-index:7;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;background:radial-gradient(circle at 50% 42%,#14283a 0,#07111b 48%,#03080d 100%);color:#f5ead7;text-align:center}
.guide-escort-loading .brand-medallion{width:88px;height:88px;animation:escort-logo-breathe 1.05s ease-in-out infinite}
.guide-escort-loading b{font:700 14px/1.6 var(--ui-font);letter-spacing:.02em}
.guide-escort-loading i{width:92px;height:2px;overflow:hidden;border-radius:999px;background:rgba(230,199,140,.2)}
.guide-escort-loading i::after{display:block;width:42%;height:100%;border-radius:inherit;background:#e6c78c;content:"";animation:escort-loading-slide 1s ease-in-out infinite}
@keyframes escort-loading-slide{0%{transform:translateX(-120%)}50%{transform:translateX(115%)}100%{transform:translateX(240%)}}
@keyframes escort-logo-breathe{0%,100%{filter:drop-shadow(0 0 4px rgba(230,199,140,.18));opacity:.8;transform:scale(.96)}50%{filter:drop-shadow(0 0 20px rgba(230,199,140,.5));opacity:1;transform:scale(1.04)}}
.scene-name .question-card{animation:question-card-arrive .38s ease-out both}
.guide-escort-scene .escort-video{z-index:1}
.guide-escort-scene .guide-escort-scene-loading{z-index:8}
@keyframes guide-dialog-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes guide-dialog-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes question-card-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:560px){
  .guide-greeting-backdrop{padding:0;place-items:stretch}
  .guide-greeting-dialog{width:100%;height:100svh;max-height:none;border:0;border-radius:0}
  .guide-dialog-copy{padding:20px 18px max(22px,env(safe-area-inset-bottom))}
  .guide-dialog-copy p{font-size:13px;line-height:1.7}
  .guide-dialog-close{top:max(12px,env(safe-area-inset-top));right:12px}
}
@media(prefers-reduced-motion:reduce){
  .guide-greeting-backdrop,.guide-greeting-dialog,.guide-dialog-copy,.scene-name .question-card{animation:none;transition:none}
}

/* Guest purchase recovery */
.guest-recovery-link{display:block;margin-top:13px;color:#665646;font-size:10px;font-weight:800;text-align:center;text-underline-offset:3px}
.guest-recovery-fields{display:grid;grid-template-columns:1.35fr 1fr;gap:8px;margin:13px 0 8px}
.guest-recovery-fields label{display:grid;gap:5px;color:#4d4339;font-size:9px;font-weight:800}
.guest-recovery-fields input{width:100%;height:42px;padding:0 11px;border:1px solid #c8baa6;border-radius:7px;background:#fff;color:#25211e;font:600 12px var(--ui-font);outline:none}
.guest-recovery-fields input:focus{border-color:#8f2430;box-shadow:0 0 0 3px rgba(143,36,48,.11)}
.guest-purchase-note>small{display:block;margin:0 0 9px;color:#71685f;font-size:8px;line-height:1.55}
@media(max-width:430px){.guest-recovery-fields{grid-template-columns:1fr}}
.product-detail-link{display:block;width:max-content;max-width:100%;margin:22px auto 0;color:#e1c384;font-size:11px;font-weight:800;text-underline-offset:4px}
.reading-prose{min-width:0;overflow-wrap:anywhere;line-height:1.9}
.reading-prose>h4{margin:1.7em 0 .75em;color:inherit;font-size:1.1em;line-height:1.55;word-break:keep-all}
.reading-prose>p{margin:0 0 1.2em}.reading-prose strong{color:inherit;font-weight:700}
.reading-prose>ul,.reading-prose>ol{margin:.6em 0 1.3em;padding-left:1.4em;list-style-position:outside}
.reading-prose>ul{list-style-type:disc}.reading-prose>ol{list-style-type:decimal}.reading-prose li{margin:.4em 0;padding-left:.2em}
.reading-prose>blockquote{margin:1em 0 1.4em;padding:.3em 0 .3em 1em;border-left:2px solid #d7bd84;color:inherit;font:inherit}
.review-seller-footer>strong{margin-bottom:5px;font-size:20px}.review-seller-footer .seller-trade-name{margin-bottom:10px;color:#bbb2a6;font-size:9px}.record-footer .studio-signature b,.record-footer .studio-signature small{display:block}.record-footer .studio-signature b{color:#d2b77e;font:700 18px "Gowun Batang",serif;letter-spacing:.04em}.record-footer .studio-signature small{margin-top:5px;color:#8f8b85;font-size:9px;font-weight:600;letter-spacing:0}

/* Celestial storefront palette follows the original navy/gold brand medallion. */
:root {
  --store-ink: #080f1b;
  --store-surface: #111e30;
  --store-gold: #ddbd7d;
  --store-ivory: #f1e3c7;
  --store-rule: #baa16b45;
}

/* Original rendered style: /app/deep.css */
.self-check {
  margin: 18px 0;
  padding: 22px 18px;
  background: #191919;
  color: #f1ece2;
}

.sandbox-payment-note {
  margin: 14px 0 !important;
  padding: 11px 13px;
  border: 1px solid #9f7b3f;
  background: #fff1cf;
  color: #61471d !important;
  font-size: 10px !important;
  font-weight: 800;
  line-height: 1.65 !important;
  text-align: left !important;
}

.admin-sandbox-methods {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.admin-sandbox-methods > section {
  padding: 16px;
  border: 1px solid #c7baa7;
  border-radius: 10px;
  background: #fffaf2;
}

.admin-sandbox-methods > section > strong {
  display: block;
  color: #2b2724;
  font: 700 14px/1.5 "Gowun Batang", serif;
}

.admin-sandbox-methods > section > p {
  margin: 5px 0 12px;
  color: #6c6257;
  font-size: 10px;
  line-height: 1.6;
}

.paypal-test-placeholder {
  width: 100%;
  min-height: 48px;
  border: 1px solid #b9ad9c;
  border-radius: 8px;
  background: #e8dfd1;
  color: #746a5e;
  font-size: 10px;
  font-weight: 700;
}

.paypal-test-host { min-height: 45px; }

.self-check > b {
  display: block;
  margin-bottom: 12px;
  color: #d5b275;
  font-size: 9px;
  letter-spacing: .12em;
}

.self-check > p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 9px 0;
  color: #f1ece2;
  font: 400 12px/1.65 "Gowun Batang", serif;
}

.full-record .self-check > p { color: #f1ece2; }

.self-check > p span {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border: 1px solid #8f6d3b;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #d5b275;
  font-size: 8px;
}

.narrator-opening {
  padding-top: 28px;
  background: #090a0d;
}

.record-ticket {
  margin: 0 20px 24px;
  padding: 18px 17px 16px;
  border-top: 1px solid #8d7447;
  border-bottom: 1px solid rgba(141, 116, 71, .42);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
}

.record-ticket span {
  color: #c5a56d;
  font-size: 8px;
  letter-spacing: .15em;
}

.record-ticket b {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  font: 700 24px "Gowun Batang", serif;
}

.record-ticket small {
  color: #85817b;
  font-size: 9px;
}

.narrator-panel {
  position: relative;
  margin: 0;
  padding-bottom: 72px;
  overflow: hidden;
  background: #0b0c10;
}

.narrator-frame {
  width: 100%;
  aspect-ratio: 2.666 / 1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.narrator-panel figcaption {
  position: relative;
  z-index: 2;
  width: calc(100% - 40px);
  margin: -18px auto 0;
  padding: 19px 20px 21px;
  border: 1px solid #c9b995;
  border-left: 4px solid #8d1923;
  background: #eee7da;
  color: #17171a;
  box-shadow: 0 16px 36px rgba(0,0,0,.34);
}

.narrator-panel figcaption b {
  display: block;
  margin-bottom: 8px;
  color: #8d1923;
  font: 700 12px "Gowun Batang", serif;
  letter-spacing: .05em;
}

.narrator-panel figcaption p {
  margin: 0;
  font: 700 15px/1.78 "Gowun Batang", serif;
  word-break: keep-all;
}

.narrator-chapter {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 14px;
  padding: 6px 8px;
  background: rgba(9,10,13,.88);
  color: #d5b275;
  font-size: 8px;
  letter-spacing: .13em;
}

.element-reading {
  margin-top: 28px;
  padding: 23px 18px 19px;
  border: 1px solid #d3c6b3;
  background: #f8f3ea;
}

.element-reading h3 {
  margin: 0 0 20px;
  font: 700 16px "Gowun Batang", serif;
}

.element-row {
  display: grid;
  grid-template-columns: 24px 1fr 58px;
  align-items: center;
  gap: 10px;
  margin: 11px 0;
}

.element-row b {
  color: #4f4941;
  font: 700 11px "Gowun Batang", serif;
}

.element-row > span {
  height: 6px;
  overflow: hidden;
  background: #ddd5c9;
}

.element-row i {
  display: block;
  height: 100%;
  background: #5e8066;
}

.element-row.fire i { background: #a53b38; }
.element-row.earth i { background: #9c774d; }
.element-row.metal i { background: #7c8490; }
.element-row.water i { background: #355f7b; }
.element-row em {
  color: #777068;
  font: 400 9px "Noto Sans KR", sans-serif;
  text-align: right;
}

.element-reading > small {
  display: block;
  margin-top: 18px;
  color: #8c8379;
  font-size: 8px;
  line-height: 1.65;
}

.free-record > div > .narrator-panel {
  border-top: 1px solid rgba(255,255,255,.08);
}

.reading-chapter {
  border-top: 0 !important;
}

.reading-chapter > header {
  padding: 64px 25px 34px;
  background: #111216;
  color: #f4eee5;
}

.reading-chapter > header > span {
  display: block;
  color: #c3a369;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
}

.reading-chapter > header > small {
  display: block;
  margin-top: 28px;
  color: #a49d92;
  font-size: 9px;
  letter-spacing: .1em;
}

.reading-chapter > header h3 {
  margin: 10px 0 23px;
  color: #fff8ed;
  font: 700 27px/1.5 "Gowun Batang", serif;
  word-break: keep-all;
}

.reading-chapter > header blockquote {
  margin: 0;
  padding: 17px 16px;
  border-left: 3px solid #9f1f28;
  background: rgba(255,255,255,.055);
  color: #ded5c7;
  font: 400 15px/1.75 "Gowun Batang", serif;
}

.reading-chapter .record-copy {
  padding-top: 37px;
}

.reading-chapter .record-copy.chapter-lead {
  padding-bottom: 37px;
}

.reading-chapter .record-copy.chapter-continuation {
  padding-top: 37px;
}

.reading-chapter .record-copy > p {
  margin: 0;
  color: #403b36;
  font: 400 15px/2.05 "Gowun Batang", serif;
}

.reading-chapter .record-copy > p + p {
  margin-top: 20px;
}

.reading-chapter .record-copy > div {
  margin-top: 30px;
}

/* Keep the risk box dark even though generic record cards use a paper tone. */
.reading-chapter .record-copy > .self-check,
.full-record .paid-chapter-block > article > .self-check {
  background: #191919;
  color: #f1ece2;
}

.reading-chapter .record-copy > .self-check > p,
.full-record .paid-chapter-block > article > .self-check > p {
  color: #f1ece2;
}

.paid-chapter-block > article {
  padding: 72px 27px;
  border-bottom: 1px solid #cfc7ba;
}

.chapter-inline-visual {
  margin: 38px -27px;
  background: #080a0e;
}

.chapter-inline-visual > .moa-flow-group,
.chapter-inline-visual > .narrator-panel {
  width: 100%;
}

.paid-chapter-block > .narrator-panel {
  color: #f4eee5;
}

.moa-flow-group {
  border-top: 8px solid #080a0e;
  border-bottom: 8px solid #080a0e;
  background: #080a0e;
}

.moa-flow-panel {
  position: relative;
  width: 100%;
  container-type: inline-size;
  margin: 0;
  overflow: hidden;
  background: #111;
  line-height: 0;
}

.moa-flow-panel + .moa-flow-panel {
  border-top: 0;
}

.moa-flow-panel > img {
  display: block;
  width: calc(100% + 4px);
  height: auto;
  margin: -2px;
}

.moa-flow-panel > p {
  position: absolute;
  z-index: 3;
  top: 9%;
  width: 27%;
  height: 24%;
  margin: 0;
  padding: 2px 5px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #25211e;
  text-align: center;
  font-family: "Gowun Batang", serif;
  font-size: clamp(9.25px, 2.5cqw, 12px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.045em;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: pretty;
  line-height: 1.35;
}

.moa-flow-panel > p.bubble-left { left: 12%; }
.moa-flow-panel > p.bubble-right { left: 61%; }
.moa-flow-panel > p.bubble-source-first { top: 9%; }
.moa-flow-panel > p.bubble-compact { font-size: clamp(8.5px, 2.25cqw, 10.75px); }
.moa-flow-panel > p > span { display: block; max-width: 100%; }

.moa-flow-panel > p.generated-bubble {
  padding: 12px 17px;
  border: 2px solid rgba(35, 31, 28, .92);
  border-radius: 50%;
  background: rgba(255, 250, 241, .96);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .2);
  overflow: hidden;
}

.moa-flow-panel > p.generated-bubble > span { width: 100%; }

.paid-chapter-block > article > blockquote {
  margin: 0 0 28px;
  padding: 19px 18px;
  border-left: 3px solid #9f1f28;
  background: #e2d8c9;
  color: #302924;
  font: 700 15px/1.75 "Gowun Batang", serif;
}

@media (max-width: 380px) {
  .narrator-panel figcaption { width: calc(100% - 28px); padding: 17px; }
  .narrator-panel figcaption p { font-size: 14px; }
  .record-ticket { margin-left: 14px; margin-right: 14px; }
}

/* One reading type system for both the free preview and paid chapters. */
.reading-chapter > header h3,
.full-record .paid-chapter-block > article h2 {
  font-family: var(--ui-font);
  font-size: 29px;
  font-weight: 800;
  line-height: 1.46;
  letter-spacing: -.035em;
  word-break: keep-all;
}

.reading-chapter .record-copy > p,
.full-record .paid-chapter-block > article > p {
  color: #1d1a17;
  font-family: var(--ui-font);
  font-size: 17.5px;
  font-weight: 520;
  line-height: 1.92;
  letter-spacing: -.014em;
  word-break: keep-all;
}

.reading-chapter > header blockquote,
.full-record .paid-chapter-block > article > blockquote {
  font-family: var(--ui-font);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.78;
  letter-spacing: -.018em;
  word-break: keep-all;
}

.reading-chapter .record-copy > small,
.full-record .paid-chapter-block > article > small {
  color: #315864;
  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 380px) {
  .reading-chapter > header h3,
  .full-record .paid-chapter-block > article h2 { font-size: 26px; }
  .reading-chapter .record-copy > p,
  .full-record .paid-chapter-block > article > p { font-size: 16.5px; }
}

@media (min-width: 760px) {
  .reading-chapter .record-copy > p,
  .full-record .paid-chapter-block > article > p { font-size: 18px; }
}

/* Contextual reading questions */
[data-askable="true"] ::selection,
[data-askable="true"]::selection {
  background: #c8a869;
  color: #17120c;
}

.moa-flow-panel > p,
.narrator-panel figcaption,
.guide-bridge-panel .bridge-speech-bubble {
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}

.ask-selection-chip {
  position: fixed;
  z-index: 118;
  transform: translateX(-50%);
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid #d5b77d;
  border-radius: 999px;
  background: #102430;
  color: #fff8eb;
  box-shadow: 0 12px 30px rgba(0,0,0,.42);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.reading-qa-layer {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(3,8,13,.76);
  backdrop-filter: blur(5px);
}

.reading-qa-sheet {
  width: min(100%, 680px);
  max-height: min(88svh, 780px);
  overflow: auto;
  padding: 25px 22px max(20px, env(safe-area-inset-bottom));
  border: 1px solid rgba(207,172,114,.58);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg,#10202d 0,#08121c 100%);
  color: #f8f1e6;
  box-shadow: 0 -24px 70px rgba(0,0,0,.58);
}

.reading-qa-sheet > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.reading-qa-sheet > header small {
  color: #d7b97f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
}

.reading-qa-sheet > header h2 {
  margin: 7px 0 5px;
  color: #fff9ef;
  font: 800 24px/1.4 var(--ui-font);
  letter-spacing: -.035em;
}

.reading-qa-sheet > header p {
  margin: 0;
  color: #d9d2c8;
  font: 600 13px/1.65 var(--ui-font);
}

.reading-qa-sheet > header button {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  color: #fff;
  font-size: 24px;
}

.reading-qa-sheet > blockquote {
  margin: 20px 0 14px;
  padding: 15px 16px;
  border: 1px solid rgba(207,172,114,.25);
  border-left: 3px solid #c6a463;
  background: rgba(255,255,255,.055);
}

.reading-qa-sheet > blockquote b,
.reading-qa-sheet > blockquote small {
  display: block;
  color: #d9bc84;
  font-size: 10px;
}

.reading-qa-sheet > blockquote p {
  margin: 7px 0;
  color: #f5eee4;
  font: 650 14px/1.7 var(--ui-font);
  word-break: keep-all;
}

.qa-quick-questions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding-bottom: 3px;
}

.qa-quick-questions button {
  width: 100%;
  min-height: 48px;
  padding: 8px 11px;
  border: 1px solid rgba(207,172,114,.38);
  border-radius: 999px;
  background: #142a37;
  color: #f6eee2;
  font: 700 12px var(--ui-font);
  line-height: 1.45;
  word-break: keep-all;
}

.qa-locked-note {
  margin: 14px 0 0;
  padding: 12px 13px;
  background: rgba(207,172,114,.1);
  color: #e7d8bd;
  font: 600 12px/1.65 var(--ui-font);
}

.qa-usage-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(207,172,114,.28);
  border-radius: 10px;
  background: rgba(207,172,114,.08);
  color: #e9dcc6;
  font: 650 12px/1.6 var(--ui-font);
}

.qa-usage-note p { margin: 0; }
.qa-usage-note b { color: #f0cc83; }
.qa-usage-note.exhausted { align-items: flex-start; border-color: rgba(198,83,83,.5); background: rgba(133,37,47,.18); }
.qa-usage-note.exhausted div > b { display: block; margin-bottom: 4px; color: #ffe8c0; font-size: 13px; }
.qa-usage-note.exhausted button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid #d5b77d;
  border-radius: 999px;
  background: #8e2631;
  color: #fff8ec;
  font-weight: 800;
  cursor: pointer;
}

.qa-login-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 0;
  color: #eee2ce;
  font: 650 12px/1.6 var(--ui-font);
}

.qa-login-note p { margin: 0; }
.qa-login-note > span { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }

.qa-login-note a,
.qa-login-note button {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid #d2b577;
  border-radius: 999px;
  background: transparent;
  color: #fff8ec;
  font-weight: 800;
  cursor: pointer;
}

.account-restore-guide {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
  padding: 15px 16px;
  border: 1px solid rgba(207, 172, 114, .42);
  border-radius: 10px;
  background: rgba(18, 34, 45, .92);
  color: #f3e8d5;
}

.account-restore-guide b {
  display: block;
  font: 700 14px/1.5 var(--ui-font);
}

.account-restore-guide p {
  margin: 6px 0 0;
  color: #c8c0b5;
  font: 600 11px/1.7 var(--ui-font);
  word-break: keep-all;
}

.qa-messages {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.qa-messages article {
  padding: 13px 14px;
  border-radius: 14px;
}

.qa-user-question {
  margin-left: 28px;
  background: #294b57;
}

.qa-guide-answer {
  margin-right: 20px;
  border: 1px solid rgba(207,172,114,.25);
  background: #f5eee2;
  color: #211d19;
}

.qa-messages article b {
  display: block;
  margin-bottom: 6px;
  color: #8f6428;
  font-size: 11px;
}

.qa-messages article small {
  display: block;
  margin-bottom: 7px;
  opacity: .7;
  font: 500 10px/1.5 var(--ui-font);
}

.qa-messages article p,
.qa-thinking {
  margin: 0;
  font: 600 13.5px/1.75 var(--ui-font);
  white-space: pre-line;
  word-break: keep-all;
}

.qa-thinking { color: #d9c8aa; }

.reading-qa-sheet > form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.reading-qa-sheet textarea {
  min-height: 76px;
  resize: vertical;
  padding: 12px 13px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  outline: 0;
  background: #071019;
  color: #fff;
  font: 600 14px/1.6 var(--ui-font);
}

.reading-qa-sheet textarea:focus { border-color: #d5b77d; }
.reading-qa-sheet textarea:disabled { opacity: .52; }
.reading-qa-sheet > form button {
  width: 82px;
  border: 1px solid #c5a76d;
  border-radius: 10px;
  background: #2d5964;
  color: #fff9ed;
  font-size: 13px;
  font-weight: 800;
}

.reading-qa-sheet > form button:disabled { opacity: .4; }
.reading-qa-sheet > footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  color: #bbb2a7;
  font: 600 10px/1.55 var(--ui-font);
}

.reading-qa-sheet > footer span { color: #e0c48d; white-space: nowrap; }

@media (max-width: 600px) {
  .ask-selection-chip {
    left: 12px !important;
    right: 12px;
    top: auto !important;
    bottom: max(14px, env(safe-area-inset-bottom));
    width: calc(100% - 24px);
    transform: none;
  }
  .reading-qa-sheet { padding-left: 17px; padding-right: 17px; }
  .reading-qa-sheet > header h2 { font-size: 22px; }
  .qa-quick-questions { grid-template-columns: 1fr; }
  .qa-quick-questions button { min-height: 44px; text-align: left; }
  .reading-qa-sheet > form { grid-template-columns: 1fr; }
  .reading-qa-sheet > form button { width: 100%; min-height: 46px; }
  .reading-qa-sheet > footer { flex-direction: column; }
  .qa-login-note { align-items: flex-start; flex-direction: column; }
  .qa-login-note > span { justify-content: flex-start; }
  .qa-usage-note.exhausted { flex-direction: column; }
  .qa-usage-note.exhausted button { width: 100%; }
}

/* Reading chapter navigator */
.chapter-section,
#full-reading-offer { scroll-margin-top: 62px; }

.chapter-nav-toggle {
  position: fixed;
  z-index: 72;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(210,177,116,.72);
  border-radius: 999px;
  background: rgba(8,20,29,.96);
  color: #fff8ec;
  box-shadow: 0 12px 32px rgba(0,0,0,.48);
  backdrop-filter: blur(12px);
  font: 800 12px var(--ui-font);
}

.chapter-nav-toggle b {
  display: grid;
  min-width: 27px;
  min-height: 27px;
  place-items: center;
  border-radius: 50%;
  background: #cfb174;
  color: #10202a;
  font-size: 10px;
}

.chapter-nav-scrim {
  position: fixed;
  z-index: 70;
  inset: 0;
  border: 0;
  background: rgba(3,8,13,.62);
  backdrop-filter: blur(3px);
}

.chapter-navigator {
  position: fixed;
  z-index: 73;
  left: 12px;
  right: 12px;
  bottom: max(70px, calc(env(safe-area-inset-bottom) + 62px));
  max-height: min(68svh, 590px);
  overflow: hidden;
  border: 1px solid rgba(207,172,114,.5);
  border-radius: 18px;
  background: linear-gradient(165deg,rgba(14,31,42,.99),rgba(7,15,23,.99));
  color: #f8f1e7;
  box-shadow: 0 24px 70px rgba(0,0,0,.62);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(.98);
  transition: opacity .2s ease, transform .2s ease;
}

.chapter-navigator.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.chapter-navigator > header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  padding: 12px 15px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.chapter-navigator > header small {
  color: #d4b777;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

.chapter-navigator > header strong {
  flex: 1;
  font: 800 16px var(--ui-font);
  letter-spacing: -.025em;
}

.chapter-navigator > header button {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  background: transparent;
  color: #eee5d8;
  font-size: 21px;
}

.chapter-navigator ol {
  max-height: calc(min(68svh, 590px) - 64px);
  overflow-y: auto;
  margin: 0;
  padding: 7px;
  list-style: none;
  overscroll-behavior: contain;
}

.chapter-navigator li button {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 49px;
  padding: 6px 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #d8d1c7;
  text-align: left;
}

.chapter-navigator li button:hover,
.chapter-navigator li button:focus-visible { background: rgba(255,255,255,.07); }

.chapter-navigator li button > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(207,172,114,.34);
  border-radius: 50%;
  color: #d7bc82;
  font-size: 9px;
  font-weight: 900;
}

.chapter-navigator li button > span:last-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.chapter-navigator li button b {
  overflow: hidden;
  color: inherit;
  font-size: 12.5px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-navigator li button small {
  flex: 0 0 auto;
  padding: 3px 5px;
  border: 1px solid rgba(207,172,114,.28);
  border-radius: 999px;
  color: #cbb78f;
  font-size: 8px;
  font-weight: 800;
}

.chapter-navigator li button.is-active {
  background: linear-gradient(90deg,rgba(207,172,114,.2),rgba(45,91,103,.24));
  color: #fffaf0;
}

.chapter-navigator li button.is-active > span:first-child {
  border-color: #e0c185;
  background: #d2b475;
  color: #10202a;
  box-shadow: 0 0 18px rgba(210,180,117,.24);
}

@media (min-width: 920px) {
  .chapter-nav-toggle,
  .chapter-nav-scrim { display: none; }

  .chapter-navigator {
    left: calc(50% + 264px);
    right: auto;
    top: 76px;
    bottom: auto;
    width: min(286px, calc(50vw - 286px));
    max-height: calc(100svh - 100px);
    border-radius: 14px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .chapter-navigator > header button { display: none; }
  .chapter-navigator ol { max-height: calc(100svh - 164px); }
  .chapter-navigator li button > span:last-child { align-items: flex-start; flex-direction: column; gap: 3px; }
  .chapter-navigator li button b { overflow: visible; white-space: normal; line-height: 1.35; text-overflow: clip; }
}

@media (max-width: 919px) {
  .chapter-nav-toggle {
    left: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(74px, calc(env(safe-area-inset-bottom) + 66px));
    min-height: 40px;
    padding: 0 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.46);
  }
  .chapter-nav-toggle b { min-width: 24px; min-height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-navigator { transition: none; }
}

/* Quick reading tools */
.reading-side-rail { display: contents; }

.reading-quick-tools {
  position: fixed;
  z-index: 80;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 8px;
  width: min(220px, calc(100vw - 36px));
  padding: 8px;
  border: 1px solid rgba(201,169,109,.42);
  border-radius: 16px;
  background: rgba(7,19,28,.94);
  box-shadow: 0 16px 42px rgba(0,0,0,.42);
  backdrop-filter: blur(14px);
}

.ask-guide-fixed,
.kakao-share-control {
  position: static;
  width: 100%;
}

.ask-guide-fixed {
  min-height: 46px;
  border: 1px solid #c8a96e;
  border-radius: 10px;
  background: #173743;
  color: #fff8ed;
  padding: 9px 16px;
  font: 800 12px/1.35 var(--ui-font);
  cursor: pointer;
}
.ask-guide-fixed span { margin-right: 7px; color: #e3c37f; }
.kakao-share-control { text-align: right; }
.kakao-share-control > button {
  width: 100%; min-height: 46px; border: 1px solid #fee500; border-radius: 10px;
  background: #fee500; color: #191919; padding: 8px 15px; font: 800 12px/1.35 var(--ui-font); cursor: pointer;
}
.kakao-share-icon { display: inline-block; width: 17px; height: 16px; margin-right: 8px; vertical-align: -3px; background: url('/auth/kakao-bubble.svg') center/contain no-repeat; }
.kakao-share-control > button:disabled { opacity: .65; cursor: wait; }
.kakao-share-control > small { display: block; margin: 7px 2px 0; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,.06); color: #f4ecdf; font-size: 10px; text-align: center; }

@media (min-width: 920px) {
  .reading-side-rail {
    position: fixed;
    z-index: 80;
    left: calc(50% + 264px);
    top: 76px;
    display: grid;
    gap: 10px;
    width: min(286px, calc(50vw - 286px));
    max-height: calc(100svh - 96px);
  }
  .reading-side-rail .chapter-navigator {
    position: relative;
    z-index: auto;
    inset: auto;
    width: 100%;
    max-height: calc(100svh - 230px);
  }
  .reading-side-rail .chapter-navigator ol { max-height: calc(100svh - 294px); }
  .reading-side-rail .reading-quick-tools {
    position: relative;
    z-index: auto;
    inset: auto;
    width: 100%;
  }
}

@media (min-width: 721px) and (max-width: 919px) {
  .reading-quick-tools { right: 14px; bottom: 14px; width: 236px; }
  .chapter-nav-toggle { right: 266px; bottom: 14px; }
  .record-footer { padding-bottom: 132px; }
}

@media (max-width: 720px) {
  .reading-quick-tools {
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 7px;
    width: auto;
    padding: 7px;
    border-radius: 14px;
  }
  .ask-guide-fixed,
  .kakao-share-control > button { min-height: 48px; border-radius: 9px; padding: 7px 8px; font-size: 10.5px; }
  .kakao-share-control > small { position: absolute; left: 0; right: 0; bottom: 62px; margin: 0; box-shadow: 0 8px 24px rgba(0,0,0,.36); }
  .chapter-nav-toggle { right: 10px; bottom: max(82px, calc(env(safe-area-inset-bottom) + 74px)); }
  .record-footer { padding-bottom: 88px; }
}

/* Original rendered style: /app/app-ui.css */
/* App-wide visual contract: layout, type, actual SVG assets, and interaction states. */
.app-ui{--ink-900:#0c1117;--ink-800:#10171f;--ink-700:#18212b;--ink-600:#222e3a;--ink-500:#2c3a48;--paper:#f7f1e7;--gold:#d9bd87;--gold-hi:#efdab2;--gold-soft:#d9bd8714;--gold-line:#d9bd8738;--tx-1:#f6f2eb;--tx-2:#b8c0ca;--tx-3:#9ca8b5;--line-1:#ffffff10;--line-2:#ffffff21;--sans:system-ui,-apple-system,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;--f-body:400 16px/1.8 var(--sans);--f-sm:400 14px/1.6 var(--sans);--f-xs:600 13px/1.5 var(--sans);--ui-button-gold:none;--ui-button-ink:none;--w-page:1120px;--h-header:80px;background:var(--ink-900);color:var(--tx-1);font-family:var(--sans);margin:0;line-height:1.6}
.app-ui *{box-sizing:border-box}.app-ui button,.app-ui input,.app-ui select,.app-ui textarea{font:inherit}.app-ui button,.app-ui a{touch-action:manipulation}.app-ui button{cursor:pointer}.app-ui button:disabled{cursor:not-allowed;opacity:.55}.app-ui a{text-underline-offset:4px}.app-ui :focus-visible{outline:2px solid var(--gold-hi);outline-offset:4px}.app-ui h1,.app-ui h2,.app-ui h3,.app-ui p{word-break:keep-all;overflow-wrap:anywhere}.app-skip-link{position:fixed;left:12px;top:-100px;z-index:9999;padding:12px 20px;background:var(--gold);color:#111}.app-skip-link:focus{top:8px}
.app-ui .product-home-stage,.app-ui .product-detail,.app-ui .product-store{background:var(--ink-900);overflow-x:clip}.app-ui .product-app-header{height:80px;padding-inline:max(24px,calc((100vw - 1120px)/2));background:#0c1117ed;border-bottom:1px solid var(--line-1);backdrop-filter:blur(18px);gap:24px;z-index:60}.app-ui .product-app-brand{gap:12px;font-size:23px;letter-spacing:.06em}.product-app-brand>img{border-radius:50%;width:44px;height:44px;object-fit:contain}.product-app-brand b small{display:block;color:var(--tx-3);font:400 12px/1.5 var(--sans);letter-spacing:.04em}.app-ui .product-desktop-nav{gap:32px}.app-ui .product-desktop-nav a{font-size:15px}.app-ui .product-header-search{height:44px;gap:8px;border:1px solid var(--line-2);border-radius:50px;padding:0 16px;font-size:14px}.app-ui .product-bottom-nav{display:none}.app-ui .product-app-header a{text-decoration:none}.app-ui .product-app-brand>span{display:none}
.app-discovery{max-width:1120px;margin:auto;padding:40px 0 64px}.app-discovery-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.app-discovery-heading p{margin:0 0 8px;color:var(--gold);font-size:14px}.app-discovery-heading h1{margin:0;font:600 clamp(26px,3vw,34px)/1.4 var(--sans);letter-spacing:-.045em}.app-library-shortcut{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--tx-2);font-size:14px;padding:12px 16px;border:1px solid var(--line-2);border-radius:14px}.app-catalog{scroll-margin-top:100px}.app-catalog-controls{display:flex;flex-direction:column;gap:20px}.app-search{width:100%;display:flex;align-items:center;gap:12px;padding:4px 18px;border:1px solid #35404e;border-radius:16px;background:#151e28}.app-search input{height:50px;min-width:0;flex:1;background:none;border:0;color:var(--tx-1);outline:none;font-size:16px}.app-search:focus-within{outline:2px solid var(--gold);outline-offset:2px}.app-search input::placeholder{color:#a0abb7}.app-search button{display:grid;place-items:center;width:44px;height:44px;border:0;background:none}.app-category-tabs{display:flex;gap:10px;overflow:auto;padding:2px 2px 8px;scrollbar-width:none}.app-category-tabs button{display:flex;flex:1;align-items:center;justify-content:center;gap:10px;white-space:nowrap;min-height:54px;padding:12px 20px;border:1px solid var(--line-2);border-radius:14px;background:#141d26;color:var(--tx-2);font-size:14px}.app-category-tabs button[aria-pressed=true]{border-color:var(--gold);background:#d9bd8717;color:var(--gold-hi)}
.app-feature{position:relative;display:grid;grid-template-columns:1fr 340px;height:300px;overflow:hidden;border:1px solid #43505a;border-radius:24px;margin:24px 0 34px;text-decoration:none;background:linear-gradient(115deg,#202c38,#18202a)}.app-feature-copy{position:relative;z-index:2;padding:32px 40px}.app-feature-tag{font-size:13px;color:var(--gold-hi)}.app-feature h2{font:700 30px/1.45 "Gowun Batang",serif;letter-spacing:-.02em;margin:13px 0 12px}.app-feature p{font-size:14px;color:#c3ccd3;margin:0 0 17px}.app-feature-action{display:inline-flex;gap:12px;align-items:center;font-size:14px;color:var(--gold-hi)}.app-feature>.product-guide-artwork{height:100%;width:100%;mask-image:linear-gradient(to right,transparent,black 22%)}.app-feature>.product-guide-artwork img{object-position:50% 20%}.app-feature-seal{position:absolute;width:52px;height:52px;right:20px;top:20px;border-radius:50%;z-index:2}.app-results-heading{display:flex;align-items:center;justify-content:space-between;margin:26px 0 18px}.app-results-heading h2{font:600 22px/1.5 var(--sans);margin:0;letter-spacing:-.04em}.app-results-heading>span{color:var(--tx-3);font-size:14px}.app-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.app-product-card{display:block;min-width:0;border:1px solid var(--line-2);border-radius:20px;background:#141d26;text-decoration:none;overflow:hidden;transition:border-color .2s,transform .2s}.app-product-card:hover{border-color:var(--gold);transform:translateY(-3px)}.app-product-art{position:relative;height:210px;background:#172532;overflow:hidden}.app-product-art .product-guide-artwork{height:100%;width:100%}.app-product-art img{object-position:50% 18%;transition:transform .25s}.app-product-card:hover .app-product-art img{transform:scale(1.025)}.app-product-art>span{position:absolute;left:14px;bottom:12px;padding:3px 9px;border:1px solid #ffffff33;background:#111920e6;color:#f2e8d6;font-size:12px;border-radius:7px}.app-product-copy{padding:20px}.app-product-meta{display:flex;gap:10px;justify-content:space-between;font-size:12px;color:var(--product-accent,var(--gold))}.app-product-meta b{font-weight:500}.app-product-copy h3{margin:6px 0 8px;font:600 20px/1.5 var(--sans);letter-spacing:-.035em}.app-product-copy p{margin:0;color:var(--tx-2);font-size:15px;line-height:1.7;min-height:52px}.app-product-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding-top:14px;border-top:1px solid var(--line-1);gap:10px;font-size:13px;color:var(--gold-hi)}.app-product-bottom>span:last-child{display:flex;align-items:center;gap:8px;color:var(--tx-2)}.app-empty{text-align:center;padding:64px 20px;border:1px dashed var(--line-2);border-radius:20px}.app-empty p{color:var(--tx-2)}.app-empty button{background:#283542;border:1px solid var(--line-2);padding:12px 20px;border-radius:12px;color:var(--tx-1)}
/* Source SVGs, never pseudo-element drawings or cropped icon sheets. */
.app-ui .ui-icon{background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important;border:0!important;box-shadow:none!important;min-width:20px;vertical-align:middle}
.app-ui .ui-icon-account{background-image:url("/icons/account.svg")!important}
.app-ui .ui-icon-back{background-image:url("/icons/back.svg")!important}
.app-ui .ui-icon-calendar{background-image:url("/icons/calendar.svg")!important}
.app-ui .ui-icon-chapters{background-image:url("/icons/chapters.svg")!important}
.app-ui .ui-icon-check{background-image:url("/icons/check.svg")!important}
.app-ui .ui-icon-close{background-image:url("/icons/close.svg")!important}
.app-ui .ui-icon-forward{background-image:url("/icons/forward.svg")!important}
.app-ui .ui-icon-heart{background-image:url("/icons/heart.svg")!important}
.app-ui .ui-icon-home{background-image:url("/icons/home.svg")!important}
.app-ui .ui-icon-loader{background-image:url("/icons/loader.svg")!important}
.app-ui .ui-icon-lock{background-image:url("/icons/lock.svg")!important}
.app-ui .ui-icon-pages{background-image:url("/icons/pages.svg")!important}
.app-ui .ui-icon-question{background-image:url("/icons/question.svg")!important}
.app-ui .ui-icon-search{background-image:url("/icons/search.svg")!important}
.app-ui .ui-icon-sparkle{background-image:url("/icons/sparkle.svg")!important}
.app-ui .ui-icon-support{background-image:url("/icons/support.svg")!important}
.app-ui .ui-icon-work{background-image:url("/icons/work.svg")!important}
.app-ui .ui-icon::before,.app-ui .ui-icon::after{content:none!important}.app-ui .review-seller-footer{max-width:1120px;margin:auto;padding:32px 0 100px;border-top:1px solid var(--line-2);font-size:14px;color:var(--tx-3)}.app-ui .review-seller-footer strong{font:700 22px "Gowun Batang",serif;color:var(--gold-hi)}.app-ui .review-seller-footer p,.app-ui .review-seller-footer nav a{font-size:13px}.app-ui .review-seller-footer nav{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px}
/* Detail: one clear action, a calm reading surface, and collapsible contents. */
.app-ui .detail-hero{max-width:1120px;margin:28px auto 0;border:1px solid var(--line-2);border-radius:24px;overflow:hidden;background:#17212c}.app-ui .detail-hero-inner{display:grid;grid-template-columns:38% 1fr;min-height:430px;max-width:none;padding:0;gap:0}.app-ui .detail-hero-visual{position:relative;width:100%;height:100%;min-height:430px;inset:auto}.app-ui .detail-guide-art{width:100%;height:100%;position:absolute;inset:0;opacity:1}.app-ui .detail-guide-art img{object-position:50% 18%}.app-ui .detail-hero-content{position:relative;display:flex;flex-direction:column;justify-content:center;padding:36px;gap:24px;background:none}.app-ui .detail-hero-copy{padding:0}.app-ui .detail-hero-copy>small{font-size:13px;color:var(--gold-hi)}.app-ui .detail-hero-copy h1{font:700 clamp(26px,3vw,34px)/1.45 "Gowun Batang",serif;margin:12px 0}.app-ui .detail-hero-copy h2{font-size:18px;margin:8px 0 16px}.app-ui .detail-hero-copy>p{font-size:16px;line-height:1.85;color:var(--tx-2)}.app-ui .detail-hero-copy .detail-hero-name{font-size:16px;color:var(--gold-hi);font-weight:600}.app-ui .detail-purchase-panel{position:static;display:block;width:100%;padding:0;border:0;background:none;box-shadow:none}.app-ui .detail-purchase-panel>p{font-size:14px;color:var(--tx-2);text-align:center;margin:10px 0 0}.app-ui .detail-body{max-width:920px;margin:auto;padding:32px 0 100px}.app-ui .detail-concerns,.app-ui .detail-chapters{padding:26px;border:1px solid var(--line-2);border-radius:20px;background:#141c25;margin:0 0 20px}.app-ui .detail-concerns h2,.app-ui .detail-chapters h2{font:600 21px/1.5 var(--sans);margin:0}.app-ui .detail-concern-list{display:grid;grid-template-columns:1fr;gap:10px;margin-top:20px}.app-ui .detail-concern-list p{background:none;border:0;margin:0;padding:0;font-size:16px;color:var(--tx-2)}.app-ui .detail-chapters ol{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;padding:0;margin:20px 0 0;list-style:none}.app-ui .detail-chapters li{display:flex;align-items:baseline;gap:14px;padding:15px 0;border-bottom:1px solid var(--line-1);background:none;min-height:0}.app-ui .detail-chapters li b{font-size:15px;font-weight:400;line-height:1.65}.app-ui .detail-chapters li>span{color:var(--gold);font-size:13px;flex:0 0 24px}.app-detail-outline>summary{display:flex;gap:14px;align-items:center;cursor:pointer;list-style:none}.app-detail-outline>summary::-webkit-details-marker{display:none}.app-detail-outline>summary>span{flex:1}.app-detail-outline summary small{font-size:13px;color:var(--tx-3)}.app-detail-outline summary strong{display:block;font-size:20px;font-weight:600}.app-detail-outline[open]>summary>.ui-icon-forward{transform:rotate(90deg)}.app-detail-price{display:flex;justify-content:space-between;font-size:14px;color:var(--tx-2);margin:0 0 12px}.app-detail-price strong{color:var(--tx-1)}
.app-ui .product-primary,.app-ui .product-jump{display:flex;justify-content:center;align-items:center;gap:12px;min-height:56px;width:100%;padding:14px 22px;border:1px solid #e4cb9c;border-radius:14px;background:var(--gold);background-image:none;color:#151b22;font-size:16px;font-weight:700;box-shadow:none;text-decoration:none}.app-ui .product-primary .ui-icon,.app-ui .product-jump .ui-icon{filter:brightness(.18)}.app-ui .product-secondary{min-height:48px;border:1px solid var(--line-2);border-radius:12px;background:#1c2732;color:var(--tx-2);font-size:14px;margin-top:12px}.app-ui .preview-start{padding:32px;border-radius:20px;border:1px solid var(--gold-line);background:#17222d;text-align:left;margin:28px 0}.app-ui .preview-start h2{font:600 24px/1.5 var(--sans);margin:0 0 12px}.app-ui .preview-start p{font-size:16px;color:var(--tx-2)}.app-ui .preview-start-steps{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:20px 0 24px;counter-reset:none}.app-ui .preview-start-steps li{font-size:14px;min-height:0;padding:6px 12px;background:#ffffff08;border:1px solid var(--line-2);border-radius:8px;list-style:none}.app-ui .preview-start-steps li::before{content:none}.app-ui .detail-related h2{font:600 22px var(--sans)}.app-ui .related-grid>a{border:1px solid var(--line-2);border-radius:16px;padding:22px;background:#141e28}.app-ui .related-grid small{font-size:13px}.app-ui .related-grid b{font-size:18px}.app-ui .related-grid span{font-size:15px;color:var(--tx-2)}
/* Input and reader */
.app-ui .wizard-overlay{z-index:200}.app-ui .wizard-scrim{background:#060b12bf;backdrop-filter:blur(6px)}.app-ui .preview-wizard{background:#141e28;border:1px solid #3d4957;border-radius:24px;padding:28px;box-shadow:0 24px 80px #0008;max-width:560px}.app-ui .wizard-top{gap:14px;padding:0 0 20px}.app-ui .wizard-top b{font-size:14px;color:var(--tx-2);white-space:nowrap}.app-ui .wizard-back,.app-ui .wizard-close{min-width:44px;min-height:44px;background:#25313d;border:1px solid var(--line-2);border-radius:12px}.app-ui .wizard-body h2{font:600 28px/1.5 var(--sans);letter-spacing:-.04em}.app-ui .wizard-body>p{font-size:16px;color:var(--tx-2)}.app-ui .wizard-body{padding:20px 0 32px}.app-ui .wizard-body input,.app-ui .wizard-body select,.app-ui .wizard-body textarea{background:#0d151e;color:var(--tx-1);border:1px solid #4d5966;border-radius:12px;min-height:54px;padding:14px;font-size:18px}.app-ui .wizard-field small,.app-ui .wizard-field>span{font-size:14px;color:var(--tx-2)}.app-ui .wizard-choice button,.app-ui .wizard-toggle button{min-height:54px;font-size:16px;border-radius:12px;background:#1d2a36;border:1px solid #445261;color:var(--tx-1);background-image:none}.app-ui .wizard-choice button.selected,.app-ui .wizard-toggle button.selected{border-color:var(--gold);color:var(--gold-hi);background:#d9bd8715}.app-ui .product-preview-result{background:#131d27;border:1px solid var(--line-2);border-radius:22px;padding:28px;overflow:hidden}.app-ui .product-preview-result>header{padding:0 0 26px;min-height:0;text-align:left}.app-ui .result-guide-art{float:right;width:80px;height:100px;border-radius:14px;margin:0 0 16px 20px}.app-ui .product-preview-result>header h2{font-size:26px}.app-ui .product-preview-result>header p{font-size:15px;color:var(--tx-2)}.app-ui .product-preview-result>header small{font-size:13px;color:var(--gold-hi)}.app-ui .product-result-chapter{padding:32px 0;border-bottom:1px solid var(--line-2);background:none;scroll-margin-top:100px}.app-ui .product-result-chapter h3{font:700 25px/1.6 "Gowun Batang",serif}.app-ui .product-result-chapter p{font-size:17px;line-height:2;color:#dddfe1}.app-ui .product-result-chapter blockquote{font-size:19px;line-height:1.8;color:var(--gold-hi);border-left:2px solid var(--gold);padding:8px 0 8px 20px;margin:20px 0}.app-ui .product-result-chapter details{font-size:15px;border-radius:12px;background:#1d2935;padding:14px 16px}.app-ui .product-result-chapter summary{cursor:pointer;min-height:28px}.app-ui .product-topic-checkout{padding:24px;border:1px solid var(--gold-line);border-radius:18px;background:#1b2733;font-size:16px}.app-ui .product-topic-checkout p,.app-ui .product-topic-checkout label{font-size:15px;line-height:1.8}.app-ui .reading-qa-sheet{background:#16212c;border:1px solid #495767;border-radius:22px;padding:24px;color:var(--tx-1)}.app-ui .reading-qa-sheet textarea{font-size:16px;background:#0d151e;color:var(--tx-1);border:1px solid #52606e;border-radius:12px}.app-ui .reading-qa-sheet header p,.app-ui .reading-qa-sheet p{font-size:15px}.app-ui .chapter-nav-toggle,.app-ui .ask-guide-fixed{background:#253442;background-image:none;border:1px solid #64717d;border-radius:14px;min-height:48px;padding:12px 16px;font-size:14px}.app-ui .chapter-navigator{background:#18232e;border:1px solid #485562;border-radius:18px}.app-ui .chapter-navigator ol button{font-size:15px;min-height:52px}.app-ui .locked-toc{padding:20px;border-radius:14px;background:#0e1720}.app-ui .locked-toc p{font-size:14px;line-height:1.8}.app-ui .locked-toc b{font-size:12px}
/* Loading stays visible; the logo itself is never rotated. */
.brand-loading{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 12px;gap:22px;max-width:540px;margin:auto}.brand-loading-emblem{position:relative;width:104px;height:104px;display:grid;place-items:center;flex-shrink:0}.brand-loading-emblem>img:first-child{border-radius:50%}.brand-loading-orbit{position:absolute;inset:0;animation:brand-orbit 1.9s linear infinite}.brand-loading-label{font-size:13px;color:var(--gold);letter-spacing:.04em}.brand-loading-copy h2{margin:8px 0;font:600 24px/1.5 var(--sans)}.brand-loading-copy p{font-size:15px;color:var(--tx-2);margin:0}.brand-loading-track{display:flex;width:100%;align-items:center;gap:14px}.brand-loading-track progress{appearance:none;flex:1;min-width:0;height:6px;border:0;border-radius:8px;overflow:hidden;background:#34404c;accent-color:var(--gold)}.brand-loading-track progress::-webkit-progress-bar{background:#34404c;border-radius:8px}.brand-loading-track progress::-webkit-progress-value{background:var(--gold);border-radius:8px;transition:width .4s}.brand-loading-track progress:indeterminate{background:linear-gradient(90deg,#34404c 20%,var(--gold),#34404c 80%);background-size:200% 100%;animation:brand-sweep 1.6s linear infinite}.brand-loading-track b{font-size:14px;color:var(--gold);min-width:40px}.brand-loading.compact{flex-direction:row;gap:14px;padding:16px;text-align:left}.brand-loading.compact .brand-loading-emblem{width:48px;height:48px}.brand-loading.compact .brand-loading-emblem>img:first-child{width:36px;height:36px}.brand-loading.compact .brand-loading-orbit{width:48px;height:48px}.brand-loading.compact .brand-loading-track,.brand-loading.compact .brand-loading-label{display:none}.brand-loading.compact h2{font-size:16px;margin:0 0 3px}.brand-loading.compact p{font-size:13px}.app-navigation-loading{position:fixed;z-index:1000;top:94px;left:50%;transform:translateX(-50%);width:min(92vw,370px);background:#202e3bf5;border:1px solid #63707d;border-radius:18px;box-shadow:0 12px 40px #0008}.app-ui .system-state-page{background:var(--ink-900)}.app-ui .system-state-page section{background:#17222c;border:1px solid var(--line-2);border-radius:24px}.app-ui .system-state-page p{font-size:16px}.app-ui .system-state-page small{font-size:13px}.app-ui .system-state-actions a,.app-ui .system-state-actions button{font-size:15px;border-radius:12px;min-height:50px}
/* Account, authentication, help and policy pages share the same app frame. */
.app-ui :is(.account-page,.support-page,.guest-recovery-page,.login-page,.legal-page){background:var(--ink-900);color:var(--tx-1);font-family:var(--sans);min-height:100svh;padding:0 max(24px,calc((100% - 840px)/2)) 100px}.app-ui :is(.account-page,.support-page,.guest-recovery-page,.login-page)>.product-app-header{margin-inline:calc(-1 * max(24px,calc((100vw - 840px)/2)));padding-inline:max(24px,calc((100vw - 1120px)/2));width:100vw}.app-ui :is(.account-page,.support-page)>header:not(.product-app-header){padding:40px 0 28px}.app-ui :is(.account-page,.support-page) h1{font-size:32px}.app-ui :is(.account-page,.support-page,.guest-recovery-page,.login-page) p{font-size:16px;line-height:1.8}.app-ui :is(.account-page,.support-page,.guest-recovery-page,.login-page) small{font-size:13px}.app-ui :is(.account-page,.support-page)>header>span{font-size:16px;color:var(--tx-2)}.app-ui .account-summary,.app-ui .account-restore,.app-ui .support-compose,.app-ui .support-guest-entry>div,.app-ui .support-history article,.app-ui .login-card,.app-ui .guest-recovery-page>section{background:#16212b;border:1px solid var(--line-2);border-radius:20px;padding:26px}.app-ui .login-card{max-width:480px;margin:48px auto 24px}.app-ui .login-card h1{font-size:27px}.app-ui .login-brand-mark{width:88px;height:88px;margin:0 auto 20px;background-image:url('/brand-icon.png')}.app-ui .provider-login-button{border-radius:14px;min-height:56px;font-size:16px}.app-ui .guest-recovery-page>section{max-width:540px;margin:40px auto 24px}.app-ui .guest-recovery-page h1{font-size:28px}.app-ui .guest-recovery-page form input,.app-ui .support-page input,.app-ui .support-page select,.app-ui .support-page textarea{font-size:16px;min-height:50px;background:#0f1821;border:1px solid #4b5866;border-radius:12px;padding:12px;color:var(--tx-1)}.app-ui :is(.account-page,.support-page,.guest-recovery-page) button,.app-ui .account-inline-action{font-size:15px;min-height:48px;border-radius:12px}.app-ui .account-section-head{flex-wrap:wrap;gap:12px}.app-ui .account-section-head span,.app-ui .account-purchase-list p{font-size:14px;color:var(--tx-2)}.app-ui .account-profile small{padding:4px 10px;border-radius:7px;background:#263543}.app-ui .account-purchase-list article{padding:22px;border:1px solid var(--line-2);border-radius:16px;background:#131e28;margin-top:12px}.app-ui .account-empty{background:#131e28;border-radius:18px;padding:32px 20px;margin-top:20px}.app-ui .account-empty b{font-size:18px}.app-ui .account-empty a,.app-ui .account-restore>a,.app-ui .account-support>a{border-radius:12px;min-height:52px;font-size:15px;background:#304457}.app-ui .account-summary strong{font-size:21px}.app-ui .legal-hero{padding:40px 0 24px}.app-ui .legal-body p,.app-ui .legal-body li{font-size:16px;line-height:1.9}.app-ui .legal-nav a,.app-ui .legal-nav div a,.app-ui .legal-links a{font-size:14px}.app-ui .legal-table{font-size:15px}.app-ui .legal-notice{font-size:15px;border-radius:14px}.app-ui .legal-hero span{font-size:14px}.app-ui .legal-nav{min-height:80px;gap:20px}.app-brand-link{display:flex;gap:10px;align-items:center;color:var(--gold-hi);text-decoration:none;font:700 21px "Gowun Batang",serif}.app-brand-link img{border-radius:50%}.app-ui :is(.account-legal,.login-page>footer,.guest-recovery-page>footer){display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:32px;font-size:14px}.app-ui .account-utilities{display:flex;justify-content:flex-end;gap:16px;margin:20px 0;color:var(--tx-2);font-size:14px}
@keyframes brand-orbit{to{transform:rotate(360deg)}}@keyframes brand-sweep{to{background-position:-200% 0}}
@media(max-width:1180px){.app-discovery{margin:0 24px}.app-ui .detail-hero{margin-inline:24px}.app-ui .detail-body{padding-inline:24px}.app-ui .review-seller-footer{margin-inline:24px}}
@media(max-width:900px){.app-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-feature{grid-template-columns:1fr 280px}.app-ui .detail-hero-inner{grid-template-columns:36% 1fr}.app-ui .detail-hero-content{padding:28px}.app-ui .detail-hero-copy h1{font-size:27px}}
@media(max-width:640px){.app-ui{--h-header:68px}.app-ui .product-app-header{height:68px;padding-inline:20px;gap:12px}.app-ui .product-app-brand{font-size:21px;gap:9px}.product-app-brand>img{width:40px;height:40px}.product-app-brand b small{font-size:11px}.app-ui .product-desktop-nav{display:none}.app-ui .product-header-search{border:0;padding:10px;min-width:44px}.app-ui .product-header-search>span:last-child{display:none}.app-ui .product-bottom-nav{display:flex;position:fixed;z-index:70;height:calc(72px + env(safe-area-inset-bottom));padding:6px 12px calc(6px + env(safe-area-inset-bottom));background:#111a24f5;border-top:1px solid #3a4652;backdrop-filter:blur(20px);gap:12px}.app-ui .product-bottom-nav a{font-size:12px;font-weight:500;gap:5px;border-radius:14px}.app-ui .product-bottom-nav a.active{background:#d9bd8710;color:var(--gold-hi)}.app-ui .product-bottom-nav .ui-icon{width:24px;height:24px}.app-discovery{margin:0;padding:24px 20px 32px}.app-discovery-heading{margin-bottom:22px;align-items:flex-start}.app-discovery-heading p{font-size:13px;margin-bottom:7px}.app-discovery-heading h1{font-size:25px;letter-spacing:-.04em}.app-library-shortcut{width:44px;height:44px;justify-content:center;padding:8px;flex-shrink:0}.app-library-shortcut span,.app-library-shortcut>img:last-child{display:none}.app-search{padding:2px 14px;border-radius:14px;gap:10px}.app-search input{height:48px;font-size:15px}.app-category-tabs{gap:8px;margin-right:-20px;padding-right:20px}.app-category-tabs button{flex:0 0 auto;min-height:46px;gap:7px;padding:10px 13px;border-radius:12px;font-size:13px}.app-category-tabs img{width:19px;height:19px}.app-catalog-controls{gap:16px}.app-feature{height:266px;grid-template-columns:56% 44%;border-radius:20px;margin:18px 0 28px}.app-feature-copy{padding:24px 0 24px 22px}.app-feature-tag{font-size:12px}.app-feature h2{font-size:23px;line-height:1.5;margin:12px 0}.app-feature p{font-size:13px;line-height:1.75;max-width:210px}.app-feature-action{font-size:13px;gap:8px}.app-feature-seal{width:38px;height:38px;right:12px;top:12px}.app-feature>.product-guide-artwork{mask-image:linear-gradient(to right,transparent,black 15%)}.app-feature>.product-guide-artwork img{object-position:50% 18%}.app-results-heading{margin-top:24px}.app-results-heading h2{font-size:20px}.app-results-heading>span{font-size:13px}.app-product-grid{grid-template-columns:1fr;gap:12px}.app-product-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:14px;border-radius:17px;align-items:center}.app-product-art{height:132px;border-radius:10px}.app-product-art>span{left:5px;bottom:5px;font-size:11px;padding:2px 6px}.app-product-copy{padding:0}.app-product-meta{font-size:12px}.app-product-copy h3{font-size:18px;line-height:1.45;margin:4px 0 7px}.app-product-copy p{font-size:14px;line-height:1.65;min-height:0}.app-product-bottom{padding-top:10px;margin-top:10px;font-size:12px}.app-product-bottom>span:last-child{gap:4px}.app-product-card:hover{transform:none}.app-ui .review-seller-footer{margin:0 20px;padding:26px 0 108px}.app-ui .detail-hero{margin:16px 16px 0;border-radius:20px}.app-ui .detail-hero-inner{display:flex;flex-direction:column;min-height:0}.app-ui .detail-hero-visual{height:210px;min-height:0;width:100%}.app-ui .detail-guide-art{position:absolute;inset:0;mask-image:linear-gradient(to bottom,black 75%,transparent)}.app-ui .detail-guide-art img{object-position:50% 22%}.app-ui .detail-hero-content{padding:18px 22px 24px;gap:20px}.app-ui .detail-hero-copy h1{font-size:28px;margin:8px 0 10px}.app-ui .detail-hero-copy>p{font-size:15px;line-height:1.8;margin:10px 0}.app-ui .detail-hero-copy h2{font-size:17px}.app-ui .detail-body{padding:22px 16px 110px}.app-ui .detail-concerns,.app-ui .detail-chapters{padding:22px 20px;border-radius:17px}.app-ui .detail-concerns h2{font-size:19px}.app-ui .detail-concern-list p{font-size:15px}.app-ui .detail-chapters ol{grid-template-columns:1fr}.app-ui .preview-start{padding:24px 20px}.app-ui .preview-start h2{font-size:23px}.app-ui .preview-start p{font-size:15px}.app-ui .preview-start-steps li{font-size:13px}.app-ui .preview-wizard{border-radius:22px 22px 0 0;max-width:none;width:100%;max-height:calc(100dvh - 18px);padding:22px 22px calc(22px + env(safe-area-inset-bottom));margin:0;align-self:end;overflow:auto}.app-ui .wizard-overlay{align-items:end;padding:0}.app-ui .wizard-body{padding:12px 0 28px;min-height:230px}.app-ui .wizard-body h2{font-size:26px}.app-ui .wizard-top{padding-bottom:14px}.app-ui .wizard-body input{font-size:18px}.app-ui .product-preview-result{padding:24px 20px;border-radius:18px}.app-ui .product-result-chapter p{font-size:16px;line-height:2}.app-ui .product-result-chapter h3{font-size:23px}.app-ui .product-result-chapter blockquote{font-size:18px}.app-ui .reading-qa-sheet{border-radius:22px 22px 0 0;max-height:90dvh;overflow:auto;padding:22px}.app-ui .result-guide-art{width:62px;height:80px}.app-ui .product-preview-result>header h2{font-size:24px}.app-ui .brand-loading{padding:26px 0}.app-ui .brand-loading.compact{padding:14px}.app-navigation-loading{top:78px}.app-ui :is(.account-page,.support-page,.guest-recovery-page,.login-page,.legal-page){padding:0 20px 110px}.app-ui :is(.account-page,.support-page,.guest-recovery-page,.login-page)>.product-app-header{margin-inline:-20px;padding-inline:20px}.app-ui :is(.account-page,.support-page)>header:not(.product-app-header){padding:28px 0 22px}.app-ui .login-card{padding:28px 22px;margin-top:28px}.app-ui .guest-recovery-page>section{padding:26px 22px;margin-top:24px}.app-ui .guest-recovery-page h1{font-size:25px}.app-ui .support-guest-entry>div{padding:22px}.app-ui .support-guest-entry{padding:0}.app-ui .account-summary{grid-template-columns:1fr 1fr;padding:6px}.app-ui .account-summary>div{padding:15px 12px}.app-ui .account-summary strong{font-size:17px}.app-ui .account-summary small{font-size:12px}.app-ui .legal-nav{flex-wrap:wrap;gap:10px;padding:16px 0}.app-ui .legal-nav div a{font-size:13px}.app-ui .legal-body p,.app-ui .legal-body li{font-size:15px}.app-ui .legal-table th,.app-ui .legal-table td{font-size:14px}.app-ui .account-section-head span{font-size:14px}.app-ui .account-purchase-list article{padding:20px}.app-ui .system-state-page{padding:20px}.app-ui .system-state-page section{padding:24px}}
@media(max-width:360px){.app-discovery{padding-inline:16px}.app-product-card{grid-template-columns:78px minmax(0,1fr);gap:12px;padding:12px}.app-product-art{height:128px}.app-product-bottom>span:last-child{font-size:0}.app-feature-copy{padding-left:18px}.app-feature h2{font-size:21px}.app-feature-tag{font-size:11px}.app-discovery-heading h1{font-size:23px}}
@media(prefers-reduced-motion:reduce){.app-ui *, .app-ui *::before,.app-ui *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.brand-loading-orbit{opacity:.7}}

.app-ui .product-app-header{display:flex;position:sticky;top:0;align-items:center;justify-content:space-between}.app-ui .product-app-brand{display:flex;align-items:center;color:var(--gold-hi)}.app-ui .product-desktop-nav{display:flex;align-items:center;gap:28px}.app-ui .product-desktop-nav a{color:var(--tx-2);padding:24px 0}.app-ui .product-desktop-nav a.active{color:var(--gold-hi);border-bottom:2px solid var(--gold)}.app-ui .product-header-search{display:flex;align-items:center;color:var(--tx-2)}.app-ui .ui-icon{display:inline-block;width:22px;height:22px;flex-shrink:0}.app-ui .preview-brand{float:right;border-radius:50%;margin:0 0 14px 16px}.app-ui .result-verdict{border-left:2px solid var(--gold);padding-left:18px;color:var(--gold-hi)!important;font-weight:600}.app-ui .product-bottom-nav a{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;text-decoration:none;color:var(--tx-2)}.app-ui .login-page::before,.app-ui .login-page::after{display:none}
@media(max-width:640px){.app-ui .product-desktop-nav{display:none}.app-ui:has(.wizard-overlay) .product-bottom-nav{display:none}.app-ui .product-reading-side-rail .chapter-nav-toggle{bottom:calc(90px + env(safe-area-inset-bottom));left:16px;right:auto}.app-ui .product-reading-side-rail .reading-quick-tools{bottom:calc(90px + env(safe-area-inset-bottom));right:16px;width:auto;max-width:65vw}.app-ui .product-reading-side-rail .chapter-navigator{bottom:calc(150px + env(safe-area-inset-bottom));max-height:60dvh}.app-ui .product-reading-side-rail .chapter-navigator ol{max-height:calc(60dvh - 80px)}}

.app-ui .product-detail .detail-hero-copy>p{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible;max-height:none}.app-ui .product-preview-result .product-result-chapter{padding:30px 0;border:0;border-bottom:1px solid var(--line-2);border-radius:0;background:none;box-shadow:none;margin:0}.app-ui .product-preview-result .product-result-chapter p{font:400 17px/1.95 var(--sans);letter-spacing:0}.app-ui .product-preview-result .product-result-chapter .result-verdict{font-weight:600}.app-ui .product-preview-result .evidence-card{padding:14px;border-radius:12px}.app-ui .product-preview-result .evidence-card p{font-size:14px}.app-ui .product-preview-result .result-reading-tools{margin:0;padding:12px 0}.app-ui .product-preview-result>header{background:none;border:0;border-radius:0;box-shadow:none}.app-ui .preview-wizard .wizard-body h2{font-family:var(--sans)}
@media(max-width:640px){.app-ui .product-reading-side-rail .reading-quick-tools{left:auto;right:16px;width:calc(100vw - 174px);max-width:none;padding:0;border:0;background:none;box-shadow:none}.app-ui .product-reading-side-rail .ask-guide-fixed{width:100%;min-width:0;padding:12px 10px;font-size:13px;white-space:nowrap}.app-ui .product-preview-result .product-result-chapter p{font-size:16px}}

.app-ui .reading-qa-sheet>small,.app-ui .reading-qa-sheet .qa-limit-note,.app-ui .reading-qa-sheet>p{font-size:14px;line-height:1.7;color:var(--tx-2)}.app-ui .not-found-page,.app-ui .payment-result-page{background:var(--ink-900);font-family:var(--sans)}.app-ui .not-found-page section,.app-ui .payment-result-page section{border-radius:22px;border:1px solid var(--line-2);background:#17222d}.app-ui .not-found-page p,.app-ui .payment-result-page p{font-size:16px;line-height:1.8}.app-ui .not-found-page a,.app-ui .payment-result-page a{font-size:15px;border-radius:12px;min-height:52px}

.app-ui #product-preview-result,.app-ui #preview-form{scroll-margin-top:100px}.app-ui .reading-qa-sheet .qa-footer,.app-ui .reading-qa-sheet .qa-quota-note{font-size:14px;line-height:1.7}

.app-ui main .product-bottom-nav{display:none;margin:0;max-width:none;width:100%;transform:none}
@media(max-width:640px){.app-ui main .product-bottom-nav{display:flex;position:fixed;inset:auto 0 0;z-index:70;margin:0;padding:6px 12px calc(6px + env(safe-area-inset-bottom));height:calc(72px + env(safe-area-inset-bottom));width:100%;max-width:none}.app-ui:has(.wizard-overlay) main .product-bottom-nav{display:none}}

.app-ui main .product-bottom-nav{flex-direction:row;align-items:stretch;justify-content:space-between}.app-ui :is(.account-page,.support-page,.guest-recovery-page,.login-page)>.product-app-header{width:auto;max-width:none}.app-ui .account-utilities a{color:var(--tx-2);text-decoration:none;padding:10px 0;min-height:44px}

/* Full-width headers share a real grid column, so scrollbar width cannot create overflow. */
.app-ui main:is(.account-page,.support-page,.guest-recovery-page,.login-page){display:grid;grid-template-columns:minmax(24px,1fr) minmax(0,840px) minmax(24px,1fr);align-content:start;padding:0 0 100px;overflow:visible}
.app-ui main:is(.account-page,.support-page,.guest-recovery-page,.login-page)>*{grid-column:2;min-width:0}
.app-ui main:is(.account-page,.support-page,.guest-recovery-page,.login-page)>.product-app-header{grid-column:1/-1;width:auto;margin:0;padding-block:0;padding-inline:max(24px,calc((100% - 1120px)/2))}
.app-ui .reading-qa-sheet footer small{font-size:14px;line-height:1.7;color:var(--tx-2)}
@media(max-width:640px){
  .app-ui main:is(.account-page,.support-page,.guest-recovery-page,.login-page){grid-template-columns:20px minmax(0,1fr) 20px;padding-bottom:110px}
  .app-ui main:is(.account-page,.support-page,.guest-recovery-page,.login-page)>.product-app-header{padding-inline:20px}
}

/* Original rendered style: /app/reading-detail.css */
/* Product detail uses one container and its own layout, independent of the retired sales template. */
.reading-detail-shell{width:min(1120px,calc(100% - 48px));margin:0 auto;padding:24px 0 100px}
.reading-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-bottom:16px;color:var(--tx-2);font-size:14px;text-decoration:none}
.reading-detail-hero{display:grid;grid-template-columns:40% minmax(0,1fr);overflow:hidden;border:1px solid var(--gold-line);border-radius:28px;background:#17222c;min-height:470px}
.reading-detail-portrait{position:relative;min-width:0;background:#202c38;overflow:hidden}
.reading-detail-portrait>.product-guide-artwork{display:block;position:absolute;inset:0;width:100%;height:100%;mask-image:linear-gradient(to right,#000 70%,transparent)}
.reading-detail-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.reading-detail-intro{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:42px 44px 42px 24px;min-width:0}
.reading-eyebrow{color:var(--product-accent,var(--gold));font:500 13px/1.6 var(--sans);letter-spacing:.03em}
.reading-detail-intro h1{font:700 clamp(30px,3.1vw,42px)/1.4 "Gowun Batang",serif;letter-spacing:-.045em;margin:16px 0 14px}
.reading-detail-intro h2{font:500 19px/1.7 var(--sans);color:var(--gold-hi);margin:0 0 14px}
.reading-detail-intro>p{font:400 16px/1.95 var(--sans);color:var(--tx-2);margin:0 0 28px}
.reading-detail-intro .product-jump{max-width:360px;box-shadow:0 6px 22px #0002}
.reading-detail-intro .product-jump img{filter:brightness(.18)}
.reading-detail-body{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding-top:24px}
.reading-section-heading h2{font:600 23px/1.5 var(--sans);letter-spacing:-.035em;margin:8px 0 0}
.reading-concerns{padding:32px 36px;border:1px solid var(--line-2);border-radius:24px;background:#121b24}
.reading-concern-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:28px}
.reading-concern-grid p{position:relative;margin:0;padding-top:16px;border-top:1px solid var(--gold-line);font:400 16px/1.8 var(--sans);color:var(--tx-2)}
.reading-concern-grid p>span{display:block;color:var(--product-accent,var(--gold));font:500 12px/1.5 var(--sans);margin-bottom:8px}
.reading-outline{border:1px solid var(--line-2);border-radius:24px;background:#121b24;overflow:hidden}
.reading-outline summary{display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;padding:28px 36px}
.reading-outline summary::-webkit-details-marker{display:none}
.reading-outline summary small{display:block;color:var(--tx-3);font:400 13px/1.6 var(--sans);margin-bottom:6px}
.reading-outline summary strong{font:600 22px/1.5 var(--sans);letter-spacing:-.035em}
.reading-outline[open] summary>img{transform:rotate(90deg)}
.reading-outline ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;list-style:none;padding:0 36px 28px;margin:0}
.reading-outline li{display:flex;align-items:baseline;gap:16px;padding:16px 0;border-top:1px solid var(--line-2)}
.reading-outline li>span{flex:0 0 22px;color:var(--product-accent,var(--gold));font-size:13px}
.reading-outline li>b{font:400 15px/1.7 var(--sans);color:var(--tx-2)}
.reading-outline li.has-introduction{align-items:flex-start}
.reading-outline li.has-introduction>span{padding-top:4px}
.reading-outline-copy{min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.reading-outline-copy>b{display:block;font:500 16px/1.65 var(--sans);color:var(--tx-1)}
.reading-outline-copy>p{margin:6px 0 0;font:400 13px/1.85 var(--sans);color:var(--tx-2)}
.app-ui .reading-detail-body>#preview-form{width:100%;max-width:none;margin:0;padding:0}
.reading-start{display:grid;grid-template-columns:minmax(0,1fr) 290px;align-items:center;gap:48px;padding:36px;border:1px solid var(--gold-line);border-radius:24px;background:linear-gradient(110deg,#24323e,#18212b);margin:0}
.reading-start-brand{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.reading-start-brand>img{display:block;flex:0 0 56px;border-radius:50%}
.reading-start-brand b{display:block;font:700 22px/1.5 "Gowun Batang",serif;letter-spacing:.05em;color:var(--gold-hi)}
.reading-start-brand small{font:400 13px/1.6 var(--sans);color:var(--tx-2)}
.reading-start h2{font:600 25px/1.5 var(--sans);letter-spacing:-.045em;margin:0 0 14px}
.reading-start-copy>p{margin:0;font:400 15px/1.9 var(--sans);color:var(--tx-2)}
.reading-start-action>p{font:400 14px/1.7 var(--sans);color:var(--tx-2);text-align:center;margin:0 0 12px}
.reading-start-action>small{display:block;margin-top:12px;text-align:center;font-size:13px;color:var(--tx-2)}
.reading-related{padding-top:16px}
.reading-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}
.reading-related-grid>a{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:stretch;gap:22px;padding:18px;border:1px solid var(--line-2);border-radius:20px;background:#141e28;text-decoration:none;transition:border-color .2s}
.reading-related-grid>a:hover{border-color:var(--gold)}
.reading-related-grid .product-guide-artwork{display:block;width:104px;height:100%;min-height:148px;border-radius:12px;overflow:hidden}
.reading-related-grid .product-guide-artwork img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.reading-related-grid h3{font:600 18px/1.5 var(--sans);margin:2px 0 8px;color:var(--tx-1)}
.reading-related-grid p{font:400 14px/1.8 var(--sans);color:var(--tx-2);margin:0 0 16px}
.reading-related-grid a>div>span{display:flex;align-items:center;gap:8px;color:var(--gold-hi);font-size:13px}
.app-ui .app-product-card{height:100%;display:flex;flex-direction:column}
.app-ui .app-product-copy{display:flex;flex-direction:column;flex:1}
.app-ui .app-product-copy p{flex:1}
.app-ui .app-product-bottom{justify-content:flex-end}
.app-ui .app-product-bottom>span:last-child{font-size:13px}
@media(max-width:900px){
  .reading-detail-intro{padding:32px 28px 32px 18px}
  .reading-detail-intro h1{font-size:30px}.reading-detail-intro h2{font-size:17px}
  .reading-start{grid-template-columns:minmax(0,1fr);gap:24px;padding:28px}
  .reading-start-action{padding-top:24px;border-top:1px solid var(--gold-line)}
  .reading-start-action>p{text-align:left}
  .reading-start h2{font-size:22px}.reading-concern-grid{gap:20px}
  .reading-concerns{padding:28px}.reading-related-grid>a{grid-template-columns:80px minmax(0,1fr);gap:16px;padding:16px}
  .reading-related-grid .product-guide-artwork{width:80px}
}
@media(max-width:640px){
  .reading-detail-shell{width:calc(100% - 32px);padding:12px 0 116px}
  .reading-back{margin:0 4px 12px;font-size:13px}
  .reading-detail-hero{grid-template-columns:minmax(0,1fr);border-radius:24px;min-height:0}
  .reading-detail-portrait{height:260px}
  .reading-detail-portrait>.product-guide-artwork{mask-image:linear-gradient(to bottom,#000 65%,transparent)}
  .reading-detail-portrait img{object-position:50% 24%}
  .reading-detail-intro{padding:0 24px 28px;margin-top:-12px;position:relative}
  .reading-detail-intro h1{font-size:30px;margin:12px 0}.reading-detail-intro h2{font-size:17px;margin-bottom:12px}
  .reading-detail-intro>p{font-size:15px;line-height:1.9;margin-bottom:24px}
  .reading-detail-intro .product-jump{max-width:none}
  .reading-detail-body{gap:18px;padding-top:18px}
  .reading-concerns{padding:24px;border-radius:22px}
  .reading-section-heading h2{font-size:21px}.reading-eyebrow{font-size:12px}
  .reading-concern-grid{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:22px}
  .reading-concern-grid p{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;font-size:15px}
  .reading-concern-grid p>span{margin-top:4px;margin-bottom:0}
  .reading-outline{border-radius:22px}.reading-outline summary{padding:24px}.reading-outline summary strong{font-size:21px}
  .reading-outline ol{grid-template-columns:minmax(0,1fr);padding:0 24px 20px}
  .reading-start{grid-template-columns:minmax(0,1fr);gap:26px;padding:26px 24px;border-radius:22px}
  .reading-start-brand{margin-bottom:24px}.reading-start h2{font-size:23px}.reading-start-copy>p{font-size:15px}
  .reading-start-action>p{text-align:left;margin-bottom:12px}.reading-start-action{padding-top:20px;border-top:1px solid var(--gold-line)}
  .reading-related-grid{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:20px}
  .reading-related-grid>a{grid-template-columns:86px minmax(0,1fr)}.reading-related-grid .product-guide-artwork{width:86px;min-height:140px}
  .app-ui .app-product-card{display:grid;grid-template-columns:96px minmax(0,1fr)}
}
@media(max-width:360px){
  .app-feature{height:328px}.app-feature-action{align-items:flex-start}
  .reading-detail-intro{padding-inline:20px}.reading-detail-intro h1{font-size:28px}
  .reading-detail-portrait{height:230px}.reading-start{padding:24px 20px}.reading-start-brand{gap:10px}
  .reading-start-brand small{font-size:12px}.reading-start h2{font-size:21px}
  .app-ui .app-product-card{grid-template-columns:78px minmax(0,1fr)}
}
.app-ui .product-preview-result .result-reading-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 46px;
  margin: 8px 0 20px;
  padding: 12px 16px;
  top: 80px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: #17232d;
  box-shadow: 0 5px 18px #00000012;
}
.app-ui .result-reading-tools .reading-track { flex: 1; min-width: 0; height: 4px; background: #34434e; }
.app-ui .result-reading-tools b { flex: 0 0 auto; color: #ead7b2; font: 600 13px/1.5 var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.app-ui .result-reading-tools b em { font: inherit; color: #aebac4; margin-left: 4px; }
.app-ui .product-result-chapter > small { background: none; border: 0; padding: 0; font: 600 14px/1.5 var(--sans); letter-spacing: .14em; color: #ddc391; }
.reading-chart-summary { margin: 0 0 36px; padding: 24px; border: 1px solid #dec28e45; border-radius: 18px; background: linear-gradient(145deg, #23323d, #17222c); }
.product-reading-layout > .reading-chart-summary { grid-column: 1 / -1; width: 100%; margin-bottom: 0; scroll-margin-top: 100px; }
.reading-chart-summary > header > span { color: #dec28e; font: 600 12px/1.5 var(--sans); letter-spacing: .08em; }
.reading-chart-summary h2 { margin: 6px 0 8px; color: #f3eadd; font: 700 24px/1.5 var(--serif, serif); }
.reading-chart-summary p { margin: 0; color: #b9c5ce; font: 400 14px/1.75 var(--sans); word-break: keep-all; overflow-wrap: anywhere; }
.reading-pillar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.reading-pillar-grid article { display: flex; flex-direction: column; align-items: center; padding: 18px 10px; background: #101a2380; border: 1px solid #74838b40; border-radius: 12px; text-align: center; min-width: 0; }
.reading-pillar-grid .is-day { border-color: #d9bb7c99; background: #d9bb7c0c; }
.reading-pillar-grid small { color: #bdc6cc; font: 400 11px/1.7 var(--sans); }
.reading-pillar-grid strong { margin-top: 13px; color: #e5c594; font: 700 25px/1.4 var(--serif, serif); }
.reading-pillar-grid .pillar-hanja { color: #a6b2bb; font-size: 16px; letter-spacing: .12em; line-height: 1.8; }
.reading-pillar-grid p { margin-top: 12px; color: #bcc7cf; font-size: 12px; }
.reading-element-chart { padding-top: 20px; border-top: 1px solid #cbbb9740; }
.reading-element-chart h3 { margin: 0 0 5px; color: #f0e6d4; font: 600 17px/1.6 var(--sans); }
.reading-element-bars { display: grid; gap: 16px; margin: 24px 0; }
.reading-element-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 88px; align-items: center; gap: 12px; }
.reading-element-row > span { color: #e1e6e9; font: 500 14px/1.4 var(--sans); }
.reading-element-row > span small { margin-left: 5px; font-size: 11px; color: #9eabb5; }
.reading-element-row meter { appearance: none; -webkit-appearance: none; width: 100%; height: 7px; border: 0; background: #ffffff12; border-radius: 4px; }
.reading-element-row meter::-webkit-meter-bar { border: 0; background: #ffffff12; border-radius: 4px; height: 7px; }
.reading-element-row meter::-webkit-meter-optimum-value { background: currentColor; border-radius: 4px; }
.reading-element-row meter::-moz-meter-bar { background: currentColor; border-radius: 4px; }
.reading-element-row > b { text-align: right; color: #d5dce1; font: 500 12px/1.5 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reading-element-row > b span { display: inline-block; min-width: 46px; color: #a8b8c4; }
.reading-chart-summary .reading-chart-note { font-size: 12px; color: #a6b5c0; line-height: 1.9; }
.reading-share { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 28px 0; padding: 22px; border: 1px solid #d5bd8540; border-radius: 16px; background: #1c2933; }
.reading-share h3 { margin: 0 0 8px; font: 600 18px/1.5 var(--sans); color: #edddbd; }
.reading-share p { margin: 0; font: 400 13px/1.8 var(--sans); color: #adbdc8; }
.reading-share-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.reading-share .kakao-share-control { margin: 0; min-width: 0; }
.reading-share-buttons button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 14px; border: 1px solid #d5bd8555; border-radius: 10px; background: #14212a; color: #efd8aa; font: 500 13px/1.5 var(--sans); cursor: pointer; }
.reading-share-buttons button:disabled { opacity: .6; cursor: wait; }
.reading-share-buttons img { width: 19px; height: 19px; flex: 0 0 auto; }
.reading-share .reading-share-link { display: inline-block; margin-top: 10px; color: #d5bd85; font: 400 12px/1.5 var(--sans); text-decoration: underline; }
.reading-share .kakao-share-control > small { display: block; margin-top: 8px; color: #c5cfd6; font: 400 12px/1.6 var(--sans); }
@media (max-width: 640px) {
  .app-ui .product-preview-result .result-reading-tools { top: 68px; padding: 10px 12px; min-height: 42px; gap: 12px; }
  .reading-chart-summary { padding: 18px 16px; margin-bottom: 28px; }
  .reading-pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reading-element-row { grid-template-columns: 45px minmax(0, 1fr) 74px; gap: 8px; }
  .reading-element-row > b span { min-width: 40px; }
  .reading-share { display: block; padding: 18px; }
  .reading-share-buttons { margin-top: 16px; }
  .reading-share-buttons button { flex: 1; padding-inline: 10px; }
}
.numerology-input .wizard-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.numerology-name-fields{display:grid;gap:14px;margin-top:20px}
.numerology-name-fields p,.numerology-name-fields small{line-height:1.65;color:var(--app-muted,#b7c0c9)}
.numerology-name-fields label{display:grid;gap:8px;font-size:14px}
.reading-numerology{margin-top:28px;padding-top:24px;border-top:1px solid #d8bd8030}
.reading-numerology h3{margin:0 0 12px;font-size:19px}
.reading-numerology>p{line-height:1.8;color:#bac5ce}
.reading-numerology-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.reading-numerology-grid article{padding:20px 18px;background:#0d171f;border:1px solid #d8bd8030;border-radius:16px;min-width:0}
.reading-numerology-grid strong{display:block;font-size:36px;color:#e0c58d;margin:10px 0}
.reading-numerology-grid p{font-size:14px;line-height:1.7}
.reading-numerology-grid span,.reading-numerology-grid small{display:block;font-size:12px;line-height:1.7;color:#bac5ce;word-break:keep-all;overflow-wrap:break-word}
.reading-numerology-grid span{margin:12px 0 8px;color:#e0c58d}
.reading-numerology>.reading-chart-note{margin-top:16px}
@media(max-width:640px){.reading-numerology-grid{grid-template-columns:1fr}.reading-numerology-grid article{display:grid;grid-template-columns:54px 1fr;column-gap:14px}.reading-numerology-grid strong{grid-column:1;grid-row:1/3;margin:0}.reading-numerology-grid p,.reading-numerology-grid small,.reading-numerology-grid span{grid-column:2;margin:0 0 6px}}
.numerology-help{margin-bottom:18px;border:1px solid #d8bd8030;border-radius:12px;background:#0d171f;padding:0 14px}
.numerology-help summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;color:#e0c58d;font-size:14px;list-style:none}
.numerology-help summary::-webkit-details-marker{display:none}
.numerology-help summary:focus-visible{outline:2px solid #e0c58d;outline-offset:4px}
.numerology-help p{margin:0 0 12px;font-size:13px;line-height:1.7;color:#c6ced5}

/* Original rendered style: /app/workspace-ui.css */
/* A single compact app frame for discovery, the library and customer support. */
.app-ui { --w-page:840px; }
.app-ui .product-app-header,
.app-ui main:is(.account-page,.support-page,.guest-recovery-page,.login-page)>.product-app-header {
  padding-inline:max(24px,calc((100% - var(--w-page))/2));
}
.app-ui .app-discovery { width:min(var(--w-page),calc(100% - 48px));max-width:none;margin-inline:auto;padding-top:32px;padding-inline:0; }
.app-ui .app-feature { grid-template-columns:55% 45%;height:300px; }
.app-ui .app-feature-copy { padding:28px 32px; }
.app-ui .app-product-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
.app-ui .app-product-art { height:220px; }
.app-ui .reading-detail-shell { width:min(var(--w-page),calc(100% - 48px)); }
.app-ui .reading-start { grid-template-columns:minmax(0,1fr) 300px;gap:24px; }
.app-ui .reading-detail-intro { padding-right:28px; }
.app-ui .reading-detail-intro h1 { font-size:34px; }
.app-ui .app-seller-footer {
  width:min(var(--w-page),calc(100% - 48px));max-width:none;padding:24px 0 36px;
  background:none;text-align:left;margin:auto;color:var(--tx-3);
}
.seller-footer-heading { display:flex;align-items:center;gap:20px;margin-bottom:16px; }
.seller-footer-heading>span { font-size:13px;color:var(--tx-3); }
.app-ui .seller-footer-heading .app-brand-link { display:inline-flex;align-items:center;gap:10px;color:var(--gold-hi);font:700 20px/1.5 "Gowun Batang",serif;text-decoration:none; }
.seller-footer-info { display:flex;flex-wrap:wrap;gap:4px 16px; }
.app-ui .seller-footer-info p { margin:0;font:400 13px/1.8 var(--sans);color:var(--tx-3); }
.app-ui .seller-footer-info p:first-child { color:var(--tx-2); }
.app-ui .seller-footer-info small { display:block;width:100%;font-size:12px;margin-top:4px; }
.app-ui .app-seller-footer nav { justify-content:flex-start;border-top:1px solid var(--line-1);padding-top:14px;margin-top:16px;gap:4px 20px; }
.app-ui .app-seller-footer nav a { display:inline-flex;align-items:center;min-height:36px;color:var(--tx-2);font-size:13px; }

.app-ui main:is(.account-page,.support-page) { grid-template-columns:minmax(24px,1fr) minmax(0,var(--w-page)) minmax(24px,1fr); }
.app-ui main:is(.account-page,.support-page)>.workspace-heading { padding:32px 0 26px; }
.app-ui .workspace-heading p { margin:0 0 7px;color:var(--gold);font-size:14px;letter-spacing:0; }
.app-ui .workspace-heading h1 { margin:0;font:650 32px/1.4 var(--sans);letter-spacing:-.04em; }
.app-ui .workspace-heading>span { display:block;margin-top:10px;color:var(--tx-2);font-size:16px;line-height:1.7; }
.workspace-section-label { display:flex;align-items:center;gap:12px; }
.app-ui .workspace-section-label h2 { margin:0;font:600 20px/1.5 var(--sans);letter-spacing:-.03em; }
.app-ui .account-page .account-utilities { display:flex;justify-content:flex-end;gap:20px;margin-top:8px;margin-bottom:-12px;font-size:13px; }
.app-ui .account-page .account-connect { display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:18px;padding:24px;border:1px solid var(--gold-line);border-radius:22px;background:linear-gradient(110deg,#243442,#18242e); }
.app-ui .account-connect h2 { margin:0;font:600 20px/1.5 var(--sans); }
.app-ui .account-connect p { margin:6px 0 0;font-size:14px;color:var(--tx-2); }
.app-ui .account-connect>a { display:flex;align-items:center;justify-content:center;gap:16px;min-height:48px;padding:10px 18px;border-radius:12px;background:var(--gold);color:#171b20;text-decoration:none;font-size:15px;font-weight:600; }
.app-ui .account-connect>a img { filter:brightness(.2); }
.app-ui .account-page .account-profile { display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:20px 24px;border:1px solid var(--line-2);border-radius:20px;background:#17222c; }
.app-ui .account-profile>div { flex:1;min-width:0; }
.app-ui .account-profile b { font-size:17px;color:var(--tx-1); }
.app-ui .account-profile span { display:block;overflow-wrap:anywhere;font-size:14px;color:var(--tx-2); }
.app-ui .account-profile small { font-size:12px; }
.app-ui .account-page .account-summary { padding:0;overflow:hidden;border-radius:18px;background:#141f29;grid-template-columns:1fr 1fr; }
.app-ui .account-page .account-summary>div { padding:20px 24px;border-bottom:0; }
.app-ui .account-page .account-summary strong { font:600 20px/1.6 var(--sans);margin-top:6px; }
.app-ui .account-summary strong>span { font-size:14px;margin-left:5px;color:var(--tx-2); }
.app-ui .account-summary small { font-size:13px;color:var(--tx-2); }
.app-ui .account-page :is(.account-purchases,.account-free-readings) { margin-top:32px; }
.app-ui .account-page .account-section-head { border:0;padding-bottom:0;align-items:center;flex-direction:row;text-align:left; }
.app-ui .account-section-head h2 { font:600 22px/1.5 var(--sans);letter-spacing:-.03em; }
.app-ui .account-section-head span { font-size:13px; }
.app-ui .account-page .account-local-note { margin:10px 0 18px;font-size:14px;color:var(--tx-3); }
.app-ui .account-page .account-empty { display:flex;align-items:center;flex-direction:column;gap:12px;margin-top:18px;padding:32px 24px;border:1px solid var(--line-2);border-radius:22px;background:#131d26; }
.app-ui .account-empty b { font:600 18px/1.6 var(--sans); }
.app-ui .account-empty p { margin:0;color:var(--tx-2);font-size:15px; }
.app-ui .account-empty a { margin:8px 0 0;justify-content:center;gap:14px;background:#263b4b;color:var(--tx-1);font-weight:500; }
.app-ui .account-page .account-free-list article { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;padding:20px;margin-top:14px;border:1px solid var(--line-2);border-radius:20px;background:#17222c; }
.account-reading-identity { display:flex;align-items:center;gap:18px;min-width:0; }
.account-reading-identity>.product-guide-artwork { display:block;flex:0 0 76px;width:76px;height:94px;border-radius:14px;overflow:hidden; }
.account-reading-identity img { width:100%;height:100%;object-fit:cover; }
.account-reading-identity>div { min-width:0; }
.account-reading-icon { display:grid;place-items:center;flex:0 0 76px;width:76px;height:94px;border:1px solid var(--gold-line);border-radius:14px;background:#22333f; }
.account-reading-icon img { width:30px;height:30px; }
.app-ui .account-page .account-free-list strong { font:600 19px/1.5 var(--sans); }
.app-ui .account-free-list small { color:var(--gold);font-size:13px; }
.app-ui .account-free-list p { font-size:13px;color:var(--tx-3); }
.app-ui .account-page .account-free-actions { flex-direction:column;justify-content:center;gap:4px; }
.app-ui .account-page .account-free-open { min-width:130px;min-height:46px;gap:18px;padding:10px 14px;background:#304557;color:var(--tx-1);font:500 15px var(--sans); }
.app-ui .account-page .account-free-remove { min-height:40px;font-size:13px;color:var(--tx-3); }
.app-ui .account-page .account-purchase-list article { gap:24px;padding:24px; }
.app-ui .account-purchase-list strong { font:600 20px/1.5 var(--sans); }
.app-ui .account-purchase-list :is(small,span,code) { font-size:13px; }
.app-ui .account-purchase-primary,.app-ui .account-inline-action { display:flex;align-items:center;justify-content:space-between;padding:12px 16px;min-height:48px;border-radius:12px;background:#304557;color:var(--tx-1);text-decoration:none;font:500 15px var(--sans); }
.app-ui .account-page .account-restore { margin-top:24px;padding:24px;border-radius:20px;background:#17222c;border:1px solid var(--line-2); }
.app-ui .account-restore h2,.app-ui .account-support h2 { font:600 19px/1.6 var(--sans); }
.app-ui .account-restore p,.app-ui .account-support p { font-size:15px;color:var(--tx-2);margin:8px 0 0; }
.app-ui .account-restore>a { margin-top:18px;width:100%;max-width:none;padding:12px 16px;font-weight:500; }
.app-ui .account-page .account-support { margin-top:20px;padding:24px;border-radius:20px;border-color:var(--line-2);background:none; }
.app-ui .account-support>a { justify-content:center;gap:12px;font-weight:500; }
.app-ui .account-legal { justify-content:flex-start;padding:24px 0 0;gap:12px 20px; }
.app-ui .account-legal a { color:var(--tx-3);font-size:13px;min-height:36px;display:flex;align-items:center; }

.app-ui .support-page .support-quick-help { border:1px solid var(--line-2);border-radius:22px;background:#141e28;padding:24px;margin-bottom:24px; }
.support-quick-help .workspace-section-label { margin-bottom:14px; }
.support-quick-help details { border-top:1px solid var(--line-2); }
.support-quick-help summary { display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:62px;cursor:pointer;list-style:none;font-size:16px; }
.support-quick-help summary::-webkit-details-marker { display:none; }
.support-quick-help summary img { flex-shrink:0;transform:rotate(90deg);transition:transform .2s; }
.support-quick-help details[open] summary img { transform:rotate(-90deg); }
.app-ui .support-quick-help p { margin:0 0 18px;color:var(--tx-2);font-size:15px;line-height:1.85; }
.support-quick-help a { color:var(--gold-hi); }
.app-ui .support-page .support-guest-entry { display:grid;grid-template-columns:1fr 1fr;gap:16px;border:0;background:none;padding:0; }
.app-ui .support-page .support-guest-entry>div { display:flex;align-items:flex-start;flex-direction:column;gap:12px;padding:24px;border-radius:22px; }
.app-ui .support-guest-entry b { font:600 20px/1.5 var(--sans); }
.app-ui .support-guest-entry p { margin:0 0 8px;color:var(--tx-2);font-size:15px; }
.app-ui .support-guest-entry a { display:flex;gap:10px;align-items:center;width:100%;min-height:50px;margin-top:auto;padding:12px 14px;border-radius:12px;background:#304557;font-size:14px;color:var(--tx-1); }
.app-ui .support-guest-entry .support-email-link { background:none;border:1px solid var(--line-2);overflow-wrap:anywhere;word-break:break-all; }
.app-ui .support-guest-entry small { color:var(--tx-3);font-size:13px; }
.app-ui .support-guest-entry .support-contact-note { grid-column:1/-1;padding:8px 4px;line-height:1.9; }
.app-ui .support-contact-note a { display:inline;width:auto;padding:0;min-height:0;background:none;font-size:14px; }
.support-view-switch { display:flex;gap:6px;padding:6px;background:#111b24;border:1px solid var(--line-2);border-radius:16px;margin-bottom:20px; }
.app-ui .support-view-switch button { flex:1;min-height:46px;border:0;border-radius:11px;background:none;color:var(--tx-2);font-size:15px; }
.app-ui .support-view-switch button[aria-pressed=true] { background:#30404e;color:var(--gold-hi); }
.app-ui .support-page .support-compose { padding:28px;border-radius:22px; }
.app-ui .support-compose h2,.app-ui .support-history h2 { font:600 21px/1.5 var(--sans);letter-spacing:-.03em; }
.app-ui .support-compose label { font-size:15px;color:var(--tx-1); }
.app-ui .support-form-grid { margin-bottom:20px;gap:18px; }
.app-ui .support-compose textarea { min-height:180px;font:400 16px/1.8 var(--sans); }
.app-ui .support-compose button { background:var(--gold);color:#171b20;font-weight:600; }
.app-ui .support-compose .support-warning { font-size:13px;color:var(--tx-3); }
.app-ui .support-page .support-notice { border-radius:14px;font-size:14px; }
.app-ui .support-page .support-history { margin-top:4px; }
.app-ui .support-history>div:first-child { align-items:center;border:0;margin-bottom:16px; }
.app-ui .support-history>div:first-child h2 { margin:0; }
.app-ui .support-history>article { margin:0 0 14px;padding:24px; }
.app-ui .support-history article>header { flex-wrap:wrap; }
.app-ui .support-history article>header b { font-size:15px; }
.app-ui .support-history :is(time,code,small,.support-state) { font-size:13px; }
.app-ui .support-history article>p { font-size:16px; }
.app-ui .support-state { border-radius:8px; }
.app-ui .support-reply { border-radius:0 12px 12px 0; }
.app-ui .support-reply b { font-size:14px; }
.app-ui .support-reply p { font-size:15px; }
.app-ui .support-page .support-empty { display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:36px 24px;border:1px solid var(--line-2);border-radius:20px;background:#141e28; }
.app-ui .support-empty p { margin:0; }
.app-ui .support-empty button { padding:12px 24px;border:1px solid var(--line-2);background:#304557;color:var(--tx-1); }
.app-ui .refund-request-note { border-radius:14px; }
.app-ui .refund-request-note p { font-size:14px; }
.app-ui .refund-request-note :is(b,a) { font-size:14px; }

@media(max-width:900px) {
  .app-ui .reading-start { grid-template-columns:minmax(0,1fr); }
}

@media(max-width:640px) {
  .app-ui .product-app-header { padding-inline:20px; }
  .app-ui .app-discovery,.app-ui .app-seller-footer,.app-ui .reading-detail-shell { width:calc(100% - 40px); }
  .app-ui .app-discovery { padding-top:24px; }
  .app-ui .app-feature { grid-template-columns:60% 40%;height:auto;min-height:300px;margin-top:18px;border-radius:20px; }
  .app-ui .app-feature-copy { padding:24px 0 24px 22px; }
  .app-ui .app-feature h2 { font-size:24px; }
  .app-ui .app-feature p { font-size:13px; }
  .app-ui .app-feature-action { font-size:13px;gap:8px; }
  .app-ui .app-product-grid { grid-template-columns:minmax(0,1fr);gap:12px; }
  .app-ui .app-product-art { height:100%; }
  .app-ui .reading-start { grid-template-columns:minmax(0,1fr);gap:24px; }
  .app-ui .reading-detail-intro h1 { font-size:30px; }
  .app-ui .app-seller-footer { padding-bottom:108px; }
  .app-ui main:is(.account-page,.support-page) { grid-template-columns:20px minmax(0,1fr) 20px; }
  .app-ui main:is(.account-page,.support-page)>.workspace-heading { padding:28px 0 22px; }
  .app-ui .workspace-heading h1 { font-size:28px; }
  .app-ui .account-page .account-connect { grid-template-columns:28px minmax(0,1fr);padding:22px;gap:14px; }
  .app-ui .account-connect>a { grid-column:1/-1; }
  .app-ui .account-connect h2 { font-size:19px; }
  .app-ui .account-page .account-profile { padding:18px;flex-wrap:wrap; }
  .app-ui .account-page .account-summary>div { padding:18px 16px; }
  .app-ui .account-page .account-summary strong { font-size:17px; }
  .app-ui .account-page .account-free-list article { grid-template-columns:minmax(0,1fr);padding:18px;gap:16px; }
  .app-ui .account-page .account-free-actions { flex-direction:row;align-items:center;justify-content:space-between; }
  .app-ui .account-page .account-free-open { width:auto;min-width:150px; }
  .app-ui .account-page .account-free-remove { align-self:auto; }
  .app-ui .account-reading-identity { gap:14px; }
  .app-ui .account-page .account-purchase-list article { padding:20px;grid-template-columns:minmax(0,1fr);gap:18px; }
  .app-ui .account-page :is(.account-restore,.account-support) { padding:22px; }
  .app-ui .support-page :is(.support-quick-help,.support-compose) { padding:22px; }
  .app-ui .support-page .support-guest-entry { grid-template-columns:minmax(0,1fr); }
  .support-quick-help summary { font-size:15px; }
  .app-ui .support-form-grid { grid-template-columns:minmax(0,1fr); }
  .app-ui .support-history time { width:100%;margin:0; }
}

/* Original rendered style: /app/storefront-redesign.css */
/* Storefront art direction: the original navy/gold celestial medallion is the anchor.
   New discovery classes isolate this work from payment, reading and account UI. */
.app-ui .app-home-shell {
  --storefront-night: #060e18;
  --storefront-navy: #0b1725;
  --storefront-gold: #d7b779;
  --storefront-cream: #f4e4c1;
  --storefront-muted: #c3b9a6;
  --storefront-line: #b68c4b42;
  background: var(--storefront-night);
  border: 0;
}

.app-ui :is(.app-home-shell, .celestial-detail, .product-store) .product-home-stage {
  background: radial-gradient(ellipse 1100px 750px at 50% 100px, #112038 0%, #060e18 80%);
  color: var(--storefront-cream);
}

.app-ui :is(.app-home-shell, .celestial-detail, .product-store) .product-app-header {
  height: 84px;
  gap: 24px;
  padding-inline: max(16px, calc((100% - 1000px) / 2));
  border-bottom: 0;
  background: #060e18ed;
  backdrop-filter: blur(18px);
}

.app-ui :is(.app-home-shell, .celestial-detail, .product-store) .product-app-brand { gap: 12px; color: #e7c682; font: 700 28px/1.2 "Gowun Batang", serif; letter-spacing: .07em; }
.app-ui :is(.app-home-shell, .celestial-detail, .product-store) .product-app-brand > img { width: 52px; height: 52px; object-fit: contain; border-radius: 50%; }
.app-ui :is(.app-home-shell, .celestial-detail, .product-store) .product-desktop-nav { gap: 30px; }
.app-ui :is(.app-home-shell, .celestial-detail, .product-store) .product-desktop-nav a { color: #c7baa6; font-size: 15px; }
.app-ui :is(.app-home-shell, .celestial-detail, .product-store) .product-desktop-nav a.active { color: #e7c682; border-bottom-color: #d7b779; }
.app-ui :is(.app-home-shell, .celestial-detail, .product-store) .product-header-search { min-height: 44px; border: 0; border-radius: 0; color: #e7c682; }
.app-ui :is(.app-home-shell, .celestial-detail, .product-store) .product-header-search .ui-icon { width: 25px; height: 25px; background: url('/icons/search.svg') center / contain no-repeat; }

.storefront-discovery {
  width: min(1000px, calc(100% - 32px));
  margin-inline: auto;
  padding: 4px 0 52px;
  color: #f4e4c1;
  font-family: var(--ui-font, system-ui, sans-serif);
}

.storefront-discovery :is(h1, h2, h3, p) { margin: 0; word-break: keep-all; }
.storefront-discovery a { color: inherit; text-decoration: none; }
.storefront-discovery button { font-family: inherit; touch-action: manipulation; }
.storefront-discovery :focus-visible { outline: 2px solid #edce8b; outline-offset: 4px; }
.storefront-discovery img { max-width: 100%; }
.storefront-discovery .discovery-eyebrow { color: #ddc490; font: 400 18px/1.6 "Gowun Batang", serif; letter-spacing: .02em; }

.discovery-hero {
  position: relative;
  isolation: isolate;
  min-height: 590px;
  overflow: hidden;
  border: 1px solid #b78a4e99;
  border-radius: 18px;
  background: #091321;
  box-shadow: 0 16px 58px #0005;
}

.discovery-hero .discovery-hero-art { position: absolute; inset: 0; z-index: -3; display: block; width: 100%; height: 100%; }
.discovery-hero .discovery-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 0%; }
.discovery-hero-shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(0deg, #050c14 1%, #050c14d9 12%, #050c1480 42%, #050c1400 75%), linear-gradient(90deg, #050c1466 0%, transparent 75%); }
.discovery-hero-copy { position: absolute; left: 42px; right: 32px; bottom: 119px; text-shadow: 0 2px 18px #000a; }
.discovery-hero .discovery-eyebrow { font-size: 20px; margin-bottom: 12px; }
.discovery-hero h1 { max-width: 630px; color: #f4e1b5; font: 700 clamp(42px, 5.1vw, 58px)/1.26 "Gowun Batang", serif; letter-spacing: -.045em; }
.storefront-discovery .discovery-hero-description { margin-top: 16px; color: #e7d1a5; font: 400 20px/1.65 "Gowun Batang", serif; }
.discovery-primary-link { position: absolute; }
.discovery-owned { display: inline-block; width: fit-content; padding: 4px 8px; border: 1px solid #dfc69099; border-radius: 5px; color: #f6e5bf; background: #091522d9; font-size: 14px; line-height: 1.4; }
.discovery-hero-copy > .discovery-owned { margin-top: 10px; }

.discovery-categories { display: flex; justify-content: space-between; gap: 12px; width: 100%; margin: 0 0 28px; padding: 15px 0 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-bottom: 1px solid #ae854139; scroll-margin-top: 90px; }
.discovery-categories::-webkit-scrollbar { display: none; }
.discovery-categories button { position: relative; display: flex; flex: 1 0 110px; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px; min-height: 101px; padding: 3px 8px 17px; border: 0; background: transparent; color: #d0be9b; font: 400 18px/1.4 "Gowun Batang", serif; white-space: nowrap; }
.discovery-categories button::after { content: ""; position: absolute; bottom: 0; width: 68%; height: 3px; border-radius: 4px; background: transparent; }
.discovery-categories button[aria-pressed="true"] { color: #efc76f; }
.discovery-categories button[aria-pressed="true"]::after { background: #e2bb64; }

.discovery-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.discovery-section-heading h2 { color: #f3e2bd; font: 700 30px/1.4 "Gowun Batang", serif; letter-spacing: -.025em; }
.storefront-discovery .discovery-text-link {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 12px;
  min-height: 44px; padding: 7px 9px 7px 16px;
  border: 1px solid #b68c4b66; border-radius: 6px; background: #10203480;
  color: #e4c995; font: 700 15px/1.5 "Gowun Batang", serif; letter-spacing: -.015em; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.discovery-link-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px;
  width: 28px; height: 28px; border: 1px solid #b68c4b45; border-radius: 50%; background: #d7b7790a;
}
.discovery-link-icon .storefront-cta-arrow { display: block; width: 18px; height: 14px; transition: transform .18s ease; }
.storefront-discovery .discovery-text-link:focus-visible { outline: 2px solid #edce8b; outline-offset: 3px; }
@media (hover: hover) {
  .storefront-discovery .discovery-text-link:hover { border-color: #d7b779b3; background-color: #182b3e; color: #f4e4c1; }
  .discovery-text-link:hover .storefront-cta-arrow,
  .discovery-product-card:hover .discovery-link-icon .storefront-cta-arrow { transform: translateX(2px); }
}
.storefront-discovery .discovery-text-link:active { background-color: #203347; }
.discovery-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.discovery-feature-card { display: block; min-width: 0; }
.discovery-feature-cover { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid #ae804699; border-radius: 12px; background: #131a25; }
.discovery-feature-cover > :is(picture, .product-guide-artwork) { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.discovery-feature-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transition: transform .35s ease; }
.discovery-feature-shade { position: absolute; inset: 0; background: linear-gradient(0deg, #04080ff2 0%, #050a1170 22%, transparent 53%); }
.discovery-feature-cover > .discovery-owned { position: absolute; top: 14px; right: 14px; }
.discovery-feature-title { position: absolute; bottom: 25px; left: 26px; right: 18px; text-shadow: 0 2px 16px #000; }
.discovery-feature-title h3 { color: #f4e4bd; font: 700 clamp(29px, 3.4vw, 43px)/1.2 "Gowun Batang", serif; letter-spacing: -.055em; }
.storefront-discovery .discovery-feature-title p { margin: 0 0 10px; color: #ddbb73; font: 400 17px/1.4 "Gowun Batang", serif; }
.storefront-discovery .discovery-feature-question { margin: 14px 4px 0; color: #e4d3b3; font: 400 20px/1.6 "Gowun Batang", serif; text-align: center; }
.discovery-feature-card:hover .discovery-feature-cover { border-color: #e0b86c; }
.discovery-feature-card:hover .discovery-feature-cover img { transform: scale(1.025); }
.discovery-browse-prompt { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding: 18px 20px; border: 1px solid #ae854139; border-radius: 8px; background: linear-gradient(110deg, #13233699, #0b172555); }
.discovery-browse-prompt p { color: #c9bfae; font: 400 18px/1.65 "Gowun Batang", serif; }

.discovery-catalog { padding-top: 35px; scroll-margin-top: 96px; }
.discovery-catalog-heading { margin-bottom: 19px; }
.discovery-catalog-heading .discovery-eyebrow { margin-bottom: 5px; color: #bdb099; font: 400 14px/1.5 var(--ui-font, system-ui, sans-serif); }
.discovery-result-count { flex-shrink: 0; color: #b7b0a3; font-size: 14px; }
.discovery-search { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 3px 17px; border: 1px solid #6c614b; border-radius: 8px; background: #101c2a; }
.discovery-search:focus-within { outline: 2px solid #d7b779; outline-offset: 3px; }
.discovery-search > img { flex-shrink: 0; }
.discovery-search input { width: 100%; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; color: #f2e7d3; font: 400 16px/1.5 var(--ui-font, system-ui, sans-serif); }
.discovery-search input:focus-visible { outline: 0; }
.discovery-search input::placeholder { color: #b8b5af; }
.discovery-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.discovery-search button { display: grid; flex-shrink: 0; place-items: center; width: 44px; height: 44px; padding: 8px; border: 0; background: transparent; }
.discovery-filter-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 0; }
.discovery-filter-summary p { min-width: 0; color: #cdc4b7; font-size: 15px; overflow-wrap: anywhere; }
.discovery-filter-summary button { flex-shrink: 0; min-height: 44px; padding: 8px 0 8px 12px; border: 0; background: transparent; color: #e0bc7a; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.discovery-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.discovery-product-card { display: grid; grid-template-columns: 130px minmax(0, 1fr); min-width: 0; min-height: 190px; overflow: hidden; border: 1px solid #6a604741; border-radius: 9px; background: #0d1928; transition: border-color .2s; }
.discovery-product-card:hover { border-color: #d0a65e; }
.discovery-product-art { min-height: 190px; overflow: hidden; background: #142337; }
.discovery-product-art :is(picture, .product-guide-artwork) { display: block; width: 100%; height: 100%; }
.discovery-product-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.discovery-product-copy { display: flex; flex-direction: column; min-width: 0; padding: 21px 20px 17px; }
.discovery-product-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--product-accent, #d7b779); font-size: 14px; line-height: 1.45; }
.discovery-product-meta b { color: #e3c98f; font-size: 14px; font-weight: 500; }
.discovery-product-copy h3 { margin-top: 8px; color: #f1e2c5; font: 700 22px/1.45 "Gowun Batang", serif; letter-spacing: -.035em; }
.storefront-discovery .discovery-product-copy > p { margin-top: 7px; color: #c4c0b6; font-size: 16px; line-height: 1.6; }
.discovery-product-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 13px; color: #dbbe84; font: 700 14px/1.5 "Gowun Batang", serif; }
.discovery-empty { margin-top: 24px; padding: 50px 22px; border: 1px solid #6a604766; border-radius: 10px; text-align: center; }
.discovery-empty > img { margin-bottom: 15px; }
.discovery-empty h3 { font: 700 22px/1.5 "Gowun Batang", serif; }
.storefront-discovery .discovery-empty p { margin-top: 10px; color: #c4bfb5; font-size: 16px; line-height: 1.75; }
.discovery-empty button { min-height: 46px; margin-top: 21px; padding: 10px 20px; border: 1px solid #b88e4c; border-radius: 6px; background: #1a2739; color: #eed5a6; font-size: 15px; }

.app-ui .app-home-shell .app-seller-footer { width: min(1000px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 38px; border-top: 1px solid #ae854139; background: transparent; color: #aaa698; }
.app-ui .app-home-shell .app-seller-footer .app-brand-link { color: #dbc18d; font-family: "Gowun Batang", serif; }
.app-ui .app-home-shell .app-seller-footer :is(p, small, nav a, .seller-footer-heading > span) { color: #ada99f; font-size: 14px; line-height: 1.75; }
.app-ui :is(.app-home-shell, .celestial-detail, .product-store) .product-bottom-nav { display: none; border-top: 1px solid #b18a484d; background: #07111ef5; }
.app-ui :is(.app-home-shell, .celestial-detail, .product-store) .product-bottom-nav a { color: #b9ad94; font: 400 14px/1.3 "Gowun Batang", serif; }
.app-ui :is(.app-home-shell, .celestial-detail, .product-store) .product-bottom-nav a.active { background: transparent; color: #e9bf66; }

@media (max-width: 800px) {
  .discovery-hero { min-height: 545px; }
  .discovery-hero-copy { left: 32px; }
  .discovery-feature-title { left: 19px; bottom: 20px; }
  .discovery-feature-title h3 { font-size: 34px; }
  .discovery-product-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .discovery-product-card { grid-template-columns: 140px minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .app-ui :is(.app-home-shell, .celestial-detail, .product-store) .product-app-header { height: 70px; gap: 12px; padding-inline: 16px; }
  .app-ui :is(.app-home-shell, .celestial-detail, .product-store) .product-app-brand { font-size: 24px; gap: 10px; }
  .app-ui :is(.app-home-shell, .celestial-detail, .product-store) .product-app-brand > img { width: 44px; height: 44px; }
  .app-ui :is(.app-home-shell, .celestial-detail, .product-store) .product-header-search { padding: 10px 0 10px 10px; }
  .storefront-discovery { padding-top: 2px; padding-bottom: 34px; }
  .discovery-hero { min-height: clamp(450px, 126vw, 570px); border-radius: 12px; }
  .discovery-hero .discovery-hero-art img { object-position: 64% 35%; }
  .discovery-hero-shade { background: linear-gradient(0deg, #050c14 1%, #050c14e6 15%, #050c1499 35%, #050c1429 62%, transparent 84%); }
  .discovery-hero-copy { left: 19px; right: 16px; bottom: 95px; }
  .discovery-hero .discovery-eyebrow { margin-bottom: 11px; font-size: 16px; }
  .discovery-hero h1 { font-size: clamp(33px, 8.7vw, 48px); line-height: 1.3; letter-spacing: -.05em; }
  .storefront-discovery .discovery-hero-description { max-width: 310px; margin-top: 12px; font-size: 16px; line-height: 1.65; }
  .discovery-categories { gap: 4px; margin-bottom: 23px; padding-top: 12px; scroll-margin-top: 74px; }
  .discovery-categories button { flex: 1 0 61px; min-height: 88px; padding: 3px 0 14px; gap: 7px; font-size: 14px; }
  .discovery-categories button::after { width: 76%; }
  .discovery-section-heading { gap: 8px; margin-bottom: 13px; }
  .discovery-section-heading h2 { font-size: 22px; }
  .discovery-featured > .discovery-section-heading { flex-wrap: wrap; gap: 10px; }
  .discovery-featured > .discovery-section-heading h2 { flex-basis: 100%; max-width: 20em; text-wrap: balance; }
  .discovery-featured > .discovery-section-heading .discovery-text-link { margin-left: auto; }
  .storefront-discovery .discovery-text-link { padding-left: 13px; gap: 9px; font-size: 14px; }
  .discovery-feature-grid { gap: 12px; }
  .discovery-feature-cover { border-radius: 8px; }
  .discovery-feature-title { left: 12px; right: 8px; bottom: 14px; }
  .discovery-feature-title h3 { font-size: clamp(19px, 5.1vw, 25px); line-height: 1.35; letter-spacing: -.055em; word-break: keep-all; }
  .storefront-discovery .discovery-feature-title p { margin: 0 0 6px; font-size: 13px; }
  .storefront-discovery .discovery-feature-question { margin: 10px 0 0; font-size: 15px; line-height: 1.6; text-wrap: balance; }
  .discovery-feature-cover > .discovery-owned { top: 9px; right: 9px; font-size: 14px; padding: 3px 6px; }
  .discovery-browse-prompt { align-items: flex-start; flex-direction: column; gap: 12px; margin-top: 15px; padding: 16px; }
  .discovery-browse-prompt p { font-size: 15px; }
  .discovery-browse-prompt .discovery-text-link { align-self: flex-end; }
  .discovery-catalog { padding-top: 28px; scroll-margin-top: 85px; }
  .discovery-catalog-heading { align-items: flex-end; margin-bottom: 17px; }
  .discovery-catalog-heading h2 { font-size: 23px; }
  .discovery-result-count { padding-bottom: 4px; }
  .discovery-search { min-height: 56px; gap: 10px; padding-inline: 12px; }
  .discovery-search input { font-size: 16px; }
  .discovery-search input::placeholder { font-size: 14px; }
  .discovery-search > img { width: 20px; height: 20px; }
  .discovery-product-grid { gap: 12px; margin-top: 20px; }
  .discovery-product-card { grid-template-columns: 96px minmax(0, 1fr); min-height: 170px; }
  .discovery-product-art { min-height: 170px; }
  .discovery-product-copy { padding: 14px 13px 12px; }
  .discovery-product-meta { flex-wrap: wrap; gap: 3px 8px; font-size: 14px; }
  .discovery-product-copy h3 { margin-top: 6px; font-size: 21px; }
  .storefront-discovery .discovery-product-copy > p { margin-top: 6px; font-size: 16px; line-height: 1.6; }
  .discovery-product-action { padding-top: 12px; font-size: 14px; }
  .discovery-empty { padding: 36px 18px; }
  .app-ui .app-home-shell .app-seller-footer { padding: 26px 0 calc(102px + env(safe-area-inset-bottom)); }
  .app-ui :is(.app-home-shell, .celestial-detail, .product-store) .product-bottom-nav { display: flex; height: calc(73px + env(safe-area-inset-bottom)); padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); }
  .app-ui :is(.app-home-shell, .celestial-detail, .product-store) .product-bottom-nav a { gap: 5px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .storefront-discovery * { scroll-behavior: auto; transition: none; }
  .discovery-feature-card:hover .discovery-feature-cover img { transform: none; }
}
/* 1. Keep the homepage, its header and its footer on one quieter width. */
.app-ui .app-home-shell .storefront-discovery,
.app-ui .app-home-shell .app-seller-footer {
  width: min(920px, calc(100% - 32px));
}
.app-ui .app-home-shell .product-app-header {
  padding-inline: max(16px, calc((100% - 920px) / 2));
}

/* Same family and weight for the shared top navigation and category labels.
   Brand lettering remains unchanged; the existing mobile bottom nav already
   uses this family. Explicit specificity also defeats button inheritance. */
.app-ui main .product-app-header .product-desktop-nav a,
.app-ui .storefront-discovery .discovery-categories button {
  font: 400 16px/1.45 "Gowun Batang", serif;
  letter-spacing: 0;
}

@media (min-width: 641px) {
  .app-ui .app-home-shell .discovery-hero { min-height: 510px; }
  .app-ui .app-home-shell .discovery-hero-copy { left: 34px; }
  .app-ui .app-home-shell .discovery-hero h1 {
    font-size: clamp(38px, 4.4vw, 50px);
  }
  .app-ui .app-home-shell .discovery-hero .discovery-eyebrow,
  .app-ui .app-home-shell .discovery-hero-description { font-size: 18px; }
  .app-ui .app-home-shell .discovery-primary-link.storefront-art-cta {
    min-height: 52px;
    font-size: 20px;
  }
  .app-ui .app-home-shell .discovery-categories button { min-height: 88px; }
  .app-ui .app-home-shell .discovery-section-heading h2 { font-size: 27px; }
  .app-ui .app-home-shell .discovery-feature-grid { gap: 20px; }
  .app-ui .app-home-shell .discovery-feature-title h3 {
    font-size: clamp(28px, 3.2vw, 36px);
  }
}

/* The question participates in the same bottom-positioned text stack as the
   descriptor/title. Do not separately absolutely position these three lines. */
.app-ui .storefront-discovery .discovery-feature-title {
  inset: auto 22px 20px;
}
.app-ui .storefront-discovery .discovery-feature-title .discovery-feature-question {
  margin: 12px 0 0;
  color: #e4d3b3;
  font: 400 17px/1.6 "Gowun Batang", serif;
  text-align: left;
  text-wrap: pretty;
}
.app-ui .storefront-discovery .discovery-feature-shade {
  background: linear-gradient(0deg, #04080ff5 0%, #050a11ad 28%, transparent 62%);
}
@media (max-width: 640px) {
  .app-ui .storefront-discovery .discovery-categories button { font-size: 14px; }
  .app-ui .storefront-discovery .discovery-feature-title { inset: auto 10px 12px; }
  .app-ui .storefront-discovery .discovery-feature-cover { width: 100%; aspect-ratio: 3 / 5; min-height: 300px; }
  .app-ui .storefront-discovery .discovery-feature-title > p:first-child {
    margin-bottom: 6px;
    font-size: 14px;
  }
  .app-ui .storefront-discovery .discovery-feature-title h3 {
    font-size: clamp(18px, 4.7vw, 23px);
    line-height: 1.35;
  }
  .app-ui .storefront-discovery .discovery-feature-title .discovery-feature-question {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
  }
}

/* Original rendered style: /app/storefront-detail.css */
/* The celestial storefront extends into discovery/detail only; saved readings keep their styles. */
.storefront-artwork img { object-position: var(--storefront-position, 50% 30%); }
.app-ui .celestial-detail { background: var(--store-ink, #080f1b); }
.celestial-detail .reading-detail-shell { width: min(1000px, calc(100% - 48px)); }
.celestial-detail .reading-back { color: #c4b699; }
.celestial-detail .celestial-detail-hero {
  display: flex;
  position: relative;
  isolation: isolate;
  align-items: flex-end;
  min-height: 580px;
  border: 1px solid #bd9b5266;
  border-radius: 18px;
  background: #091321;
}
.celestial-detail .reading-detail-portrait { position: absolute; inset: 0; height: auto; z-index: -2; background: #091321; }
.celestial-detail .reading-detail-portrait > .product-guide-artwork { mask-image: none; width: 100%; height: 100%; }
.celestial-detail .reading-detail-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: var(--storefront-position, 50% 25%); }
.celestial-detail .celestial-detail-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #050c17ed, #050c1760 57%, transparent), linear-gradient(0deg, #050c17eb, transparent 80%); }
.celestial-detail .reading-detail-intro { width: min(640px, 75%); padding: 48px; margin: 0; }
.celestial-detail .reading-eyebrow { color: #e3c992; font-size: 14px; }
.celestial-detail .reading-detail-intro h1 { color: #f4dfae; font: 700 clamp(34px, 4vw, 48px)/1.4 "Gowun Batang", serif; text-wrap: balance; }
.celestial-detail .reading-detail-intro h2 { color: #f1e7d4; font: 400 18px/1.8 var(--sans); }
.celestial-detail .reading-detail-intro > .celestial-free-note { color: #dfd5c3; font-size: 14px; margin-bottom: 24px; }
.celestial-detail .reading-detail-intro .product-jump { width: 100%; max-width: 410px; }
.celestial-detail .reading-detail-body { gap: 36px; padding-top: 36px; }
.celestial-detail-overview { max-width: 720px; padding: 0 8px; }
.celestial-detail-overview > span { color: #d9bb7c; font: 700 20px/1.6 "Gowun Batang", serif; }
.celestial-detail-overview > p { color: #c3c8cf; font: 400 16px/1.95 var(--sans); margin: 12px 0 0; }
.celestial-detail .reading-concerns { border: 0; border-block: 1px solid #bea56536; background: transparent; border-radius: 0; padding: 30px 8px; }
.celestial-detail .reading-section-heading h2 { color: #f0dfbf; font-family: "Gowun Batang", serif; }
.celestial-detail .reading-concern-grid p { font-size: 16px; }
.celestial-detail .reading-outline { border-color: #baa16b45; border-radius: 12px; background: #101b2a; }
.celestial-detail .reading-outline summary strong { font-family: "Gowun Batang", serif; color: #edddba; }
.celestial-detail .reading-start { border-color: #b79c6059; border-radius: 16px; background: #111e30; }
.celestial-detail .reading-start h2 { font-family: "Gowun Batang", serif; color: #f1e3c7; }
.celestial-detail .reading-start-copy,
.celestial-detail .reading-start-action { min-width: 0; }
.app-ui main.celestial-detail .reading-start-action .storefront-art-cta { width: 100%; font-size: 20px; }
.app-ui main.celestial-detail .storefront-art-cta > span { white-space: nowrap; }
.celestial-detail .reading-related-grid > a { border-color: #b79c6045; background: #101a29; border-radius: 12px; }
.celestial-detail .reading-related-grid .product-guide-artwork { border-radius: 8px; }
.celestial-detail .reading-related-grid h3 { font-family: "Gowun Batang", serif; color: #efdfbc; }
.celestial-detail #preview-form { scroll-margin-top: 96px; }
@media (min-width: 641px) {
  .celestial-detail .reading-detail-portrait [data-product-art="full_lifetime"] img { object-position: 55% 0%; }
}
@media (max-width: 640px) {
  .celestial-detail .reading-detail-shell { width: calc(100% - 32px); padding-top: 4px; padding-bottom: 112px; }
  .celestial-detail .reading-back { min-height: 36px; margin-bottom: 8px; }
  .celestial-detail .celestial-detail-hero { min-height: clamp(420px, calc(100svh - 204px), 560px); border-radius: 14px; }
  .celestial-detail .celestial-detail-hero::after { background: linear-gradient(0deg, #050c17 2%, #050c17e6 24%, #050c1740 62%, transparent 85%); }
  .celestial-detail .reading-detail-intro { width: 100%; padding: 24px 20px; }
  .celestial-detail .reading-detail-intro h1 { font-size: clamp(27px, 7.7vw, 32px); max-width: 100%; margin: 10px 0 12px; word-break: keep-all; }
  .celestial-detail .reading-detail-intro h2 { font-size: 16px; max-width: 100%; word-break: keep-all; text-wrap: pretty; }
  .celestial-detail .reading-detail-intro > .celestial-free-note { font-size: 14px; margin-bottom: 18px; }
  .celestial-detail .reading-eyebrow { font-size: 14px; }
  .app-ui main.celestial-detail .reading-start-action .storefront-art-cta { font-size: clamp(16px, 4.8vw, 19px); }
  .celestial-detail .reading-detail-body { gap: 28px; padding-top: 28px; }
  .celestial-detail-overview { padding-inline: 4px; }
  .celestial-detail .reading-related-grid > a { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  .celestial-detail .reading-related-grid .product-guide-artwork { width: 96px; min-height: 140px; }
}

/* Original rendered style: /app/storefront-ui.css */
/* Artwork, rather than generic interface glyphs, connects the small controls to the hero. */
.storefront-painted-icon {
  --painted-icon-scale: 1.36;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}
.storefront-painted-icon img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  transform: scale(var(--painted-icon-scale));
  filter: brightness(1.6) saturate(.88);
}
.storefront-painted-icon-book { --painted-icon-scale: .96; }
.storefront-painted-icon-marriage { --painted-icon-scale: 1.48; }
.storefront-painted-icon-celestial { --painted-icon-scale: 1; }
.storefront-painted-icon-wealth { --painted-icon-scale: 1.43; }
.storefront-painted-icon-love { --painted-icon-scale: 1.31; }
.storefront-painted-icon-year { --painted-icon-scale: 1.48; }
.storefront-painted-icon-support { --painted-icon-scale: 1.04; }
.storefront-painted-icon-book img,
.storefront-painted-icon-support img { filter: none; }

.storefront-discovery .discovery-categories {
  gap: 8px;
  padding-top: 13px;
  border-bottom-color: #a2824738;
}
.storefront-discovery .discovery-categories button {
  gap: 6px;
  min-height: 98px;
  padding: 0 8px 14px;
  color: #d1b88b;
  font-weight: 400;
}
.storefront-discovery .discovery-categories button::after {
  width: 60%;
  max-width: 100px;
  height: 2px;
  border-radius: 0;
}
.storefront-discovery .discovery-categories button[aria-pressed="true"] { color: #edc67e; }
.storefront-discovery .discovery-categories button[aria-pressed="true"]::after { background: #dab46e; }
.storefront-discovery .discovery-categories button:not([aria-pressed="true"]) .storefront-painted-icon { opacity: .88; }

/* This shared class also reaches account/support without changing those pages' layout. */
.app-ui main .product-bottom-nav.storefront-bottom-nav {
  border-top: 1px solid #ad88483b;
  background: #080f18f7;
  box-shadow: none;
}
.app-ui main .product-bottom-nav.storefront-bottom-nav a {
  gap: 3px;
  border-radius: 0;
  color: #bca985;
  background: transparent;
  font: 400 14px/1.35 "Gowun Batang", serif;
}
.app-ui main .product-bottom-nav.storefront-bottom-nav a.active { color: #e5bc72; }
.app-ui main .product-bottom-nav.storefront-bottom-nav .storefront-painted-icon { width: 42px; height: 42px; }
.app-ui main .product-bottom-nav.storefront-bottom-nav a:not(.active) .storefront-painted-icon { opacity: .86; }
.app-ui main .product-bottom-nav.storefront-bottom-nav a:focus-visible { outline: 1px solid #e4c28b; outline-offset: -3px; }

/* Only the three free-reading entry controls use this texture; checkout/steps keep their own UI. */
.app-ui main .storefront-art-cta.storefront-art-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 48px;
  border: 1px solid #e9c98e;
  border-radius: 4px;
  background: linear-gradient(#6e511c15, #6e511c15), #d8b66f url('/art/ui-v2/gold-paper.webp') center / 640px auto;
  color: #241807;
  font: 700 23px/1.45 "Gowun Batang", serif;
  letter-spacing: -.035em;
  text-shadow: 0 1px #f5dca441;
  text-decoration: none;
  box-shadow: none;
  transition: filter .18s ease, border-color .18s ease;
}
.app-ui main .storefront-art-cta > span { position: static; font: inherit; }
.app-ui main .storefront-art-cta .storefront-cta-arrow {
  position: absolute;
  right: 20px;
  width: 28px;
  height: 20px;
  flex-shrink: 0;
}
.app-ui main .storefront-art-cta:hover { filter: brightness(1.035); border-color: #f0d8a8; }
.app-ui main .storefront-art-cta:active { filter: brightness(.96); }
.app-ui main .storefront-art-cta:focus-visible { outline: 2px solid #fae4b4; outline-offset: 4px; }
.app-ui .discovery-primary-link.storefront-art-cta { left: 30px; right: 30px; bottom: 18px; }
.storefront-discovery .discovery-hero-copy { bottom: 99px; }
.app-ui .reading-detail-intro .storefront-art-cta,
.app-ui .reading-start-action .storefront-art-cta { position: relative; }

@media (max-width: 640px) {
  .storefront-discovery .discovery-categories { gap: 4px; padding-top: 11px; margin-bottom: 23px; }
  .storefront-discovery .discovery-categories button { flex: 1 1 0; min-width: 0; min-height: 82px; padding: 0 0 11px; gap: 4px; font-size: 13px; }
  .storefront-discovery .discovery-categories .storefront-painted-icon { width: 40px; height: 40px; }
  .storefront-discovery .discovery-categories button::after { width: 76%; }
  .app-ui main .product-bottom-nav.storefront-bottom-nav { height: calc(80px + env(safe-area-inset-bottom)); padding: 4px 12px calc(5px + env(safe-area-inset-bottom)); }
  .app-ui main .storefront-art-cta.storefront-art-cta { min-height: 49px; padding: 9px 40px; font-size: clamp(17px, 4.85vw, 19px); border-radius: 3px; }
  .app-ui .discovery-primary-link.storefront-art-cta { left: 13px; right: 13px; bottom: 14px; }
  .storefront-discovery .discovery-hero-copy { bottom: 86px; }
  .app-ui main .storefront-art-cta .storefront-cta-arrow { right: 14px; width: 25px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-ui main .storefront-art-cta { transition: none; }
}

/* Original rendered style: /app/secondary-experience.css */
/* The public journey uses one ink, paper and antique-gold system. */
.app-ui main:is(.account-page, .support-page, .login-page, .guest-recovery-page, .legal-page, .shared-reading-page, .payment-result-page, .system-state-page, .not-found-page) {
  --w-page: 880px;
  --line-1: #b3935540;
  --line-2: #b3935530;
  --gold-line: #b3935557;
  --tx-1: #eee2ca;
  --tx-2: #c6c2b8;
  --tx-3: #aba99e;
  background: var(--store-ink, #080f1b);
  color: var(--tx-1);
}
.app-ui main:is(.account-page, .support-page, .login-page, .guest-recovery-page) > .product-app-header {
  height: 84px;
  border: 0;
  background: #080f1bf5;
  padding-inline: max(24px, calc((100% - 1000px) / 2));
}
.app-ui main:is(.account-page, .support-page, .login-page, .guest-recovery-page) .product-app-brand {
  gap: 12px;
  font: 700 28px/1.2 "Gowun Batang", serif;
  color: #e7c682;
  letter-spacing: .07em;
}
.app-ui main:is(.account-page, .support-page, .login-page, .guest-recovery-page) .product-app-brand > img { width: 52px; height: 52px; }
.app-ui main:is(.account-page, .support-page, .login-page, .guest-recovery-page) .product-header-search { border: 0; color: #dfc48b; }
.app-ui main:is(.account-page, .support-page, .login-page, .guest-recovery-page) .product-desktop-nav a { color: #c7baa6; }
.app-ui main:is(.account-page, .support-page, .login-page, .guest-recovery-page) .product-desktop-nav a.active { color: #e7c682; border-bottom-color: #d7b779; }
.app-ui main:is(.account-page, .support-page, .login-page, .guest-recovery-page) :focus-visible { outline: 2px solid #e8c890; outline-offset: 4px; }

.app-ui main:is(.account-page, .support-page) > .celestial-workspace-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  padding: 34px 0 28px;
  border-bottom: 1px solid #a080463d;
}
.app-ui .celestial-workspace-heading > div { min-width: 0; }
.app-ui .celestial-workspace-heading h1 { color: #f0dfbb; font: 700 36px/1.4 "Gowun Batang", serif; }
.app-ui .celestial-workspace-heading p { color: #c9aa6e; font: 400 15px/1.7 "Gowun Batang", serif; }
.app-ui .celestial-workspace-heading > div > span { display: block; margin-top: 12px; color: #bcbebc; font-size: 16px; line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; }
.app-ui .celestial-workspace-heading > .storefront-painted-icon { width: 84px; height: 84px; opacity: .95; }
.app-ui :is(.account-page, .support-page) :is(h2, .account-section-head h2, .workspace-section-label h2) { color: #efdfbd; font-family: "Gowun Batang", serif; }

.app-ui .account-page .account-connect { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 18px; border-radius: 6px; background: #0f1c2c; border-color: #a88a4b50; }
.app-ui .account-connect h2 { font-size: 21px; }
.app-ui .account-connect p { color: #c5c4bb; line-height: 1.75; }
.app-ui .account-connect > a { border: 1px solid #dec08b; border-radius: 3px; background: #d6b36e url('/art/ui-v2/gold-paper.webp') center / 640px auto; color: #21190d; font: 700 17px/1.5 "Gowun Batang", serif; }
.app-ui .account-page .account-profile { padding: 18px 4px; border: 0; border-bottom: 1px solid #a080463d; border-radius: 0; background: transparent; }
.app-ui .account-profile > .storefront-painted-icon { width: 38px; height: 38px; }
.app-ui .account-profile b { color: #ecddbd; font: 700 20px/1.5 "Gowun Batang", serif; }
.app-ui .account-page .account-summary { margin-top: 22px; border: 1px solid #a080463d; border-radius: 5px; background: #0e1a29; }
.app-ui .account-page .account-summary > div { padding: 20px 26px; }
.app-ui .account-page .account-summary small { word-break: keep-all; }
.app-ui .account-page .account-summary strong { color: #e8cf9f; font: 700 23px/1.6 "Gowun Batang", serif; }
.app-ui .account-page .account-summary > div:last-child strong { font-size: 18px; }
.app-ui .account-page :is(.account-purchases, .account-free-readings) { margin-top: 30px; }
.app-ui .account-section-head h2 { font-size: 24px; }
.app-ui .account-section-head > span { font-size: 14px; color: #b9b4a7; }
.app-ui .account-page .account-local-note { color: #adada6; font-size: 14px; line-height: 1.85; }
.app-ui .account-page .account-empty { gap: 12px; padding: 34px 22px; border: 1px solid #a5894e45; border-radius: 6px; background: #0c1827; }
.app-ui .account-empty > .storefront-painted-icon { width: 64px; height: 64px; margin-bottom: 3px; }
.app-ui .account-empty b { color: #ecdbb8; font: 700 22px/1.6 "Gowun Batang", serif; text-wrap: balance; }
.app-ui .account-empty p { max-width: 420px; color: #b9bdbb; font-size: 15px; line-height: 1.85; }
.app-ui .account-empty a { min-height: 48px; padding: 10px 20px; border: 1px solid #b898596e; border-radius: 3px; background: transparent; color: #dfc38d; font: 400 16px/1.6 "Gowun Batang", serif; }
.app-ui .account-page :is(.account-free-list, .account-purchase-list) > article { border: 1px solid #a5894e45; border-radius: 6px; background: #0e1a29; padding: 22px; }
.app-ui .account-reading-identity > .product-guide-artwork,
.app-ui .account-purchase-title > .product-guide-artwork { display: block; flex: 0 0 96px; width: 96px; height: 128px; overflow: hidden; border: 1px solid #b28c4e70; border-radius: 3px; }
.app-ui .account-purchase-title { display: flex; align-items: center; gap: 20px; min-width: 0; }
.app-ui .account-purchase-title > div { min-width: 0; }
.app-ui .account-purchase-title img { width: 100%; height: 100%; object-fit: cover; }
.app-ui .account-page :is(.account-free-list, .account-purchase-list) strong { display: block; color: #eee0c2; font: 700 22px/1.5 "Gowun Batang", serif; }
.app-ui .account-page :is(.account-free-list, .account-purchase-list) :is(small, p, code, .account-purchase-access > span) { font-size: 14px; line-height: 1.7; }
.app-ui .account-purchase-access { min-width: 0; }
.app-ui .account-page :is(.account-free-open, .account-purchase-primary, .account-inline-action) { min-height: 48px; border: 1px solid #ba965c6e; border-radius: 3px; background: #18283a; color: #e7d1a7; font: 400 16px/1.5 "Gowun Batang", serif; }
.app-ui .account-page .account-free-remove { color: #b8b3a8; font-size: 14px; }
.app-ui .account-page :is(.account-restore, .account-support) { border: 1px solid #a5894e38; border-radius: 6px; background: #0d1928; }
.app-ui .account-page .account-support { background: transparent; }
.app-ui .account-page :is(.account-restore, .account-support) h2 { font-size: 21px; }
.app-ui .account-page :is(.account-restore, .account-support) > a { min-height: 48px; border: 1px solid #b6955866; border-radius: 3px; background: transparent; color: #dfc38e; font: 400 16px/1.6 "Gowun Batang", serif; }
.app-ui .account-legal a { color: #b2ad9f; font-size: 14px; }

.app-ui .support-page .support-quick-help { padding: 26px; border: 1px solid #a5894e40; border-radius: 6px; background: #0d1928; }
.app-ui .support-quick-help .workspace-section-label { margin-bottom: 20px; }
.app-ui .support-quick-help summary { min-height: 66px; color: #e4d7bf; font-size: 16px; }
.app-ui .support-quick-help details { border-color: #ad92523d; }
.app-ui .support-quick-help details[open] summary { color: #e1bc7d; }
.app-ui .support-quick-help p { padding-right: 26px; color: #c3c3ba; font-size: 15px; line-height: 1.95; }
.app-ui .support-page .support-guest-entry > div { border: 1px solid #a5894e40; border-radius: 6px; background: #0e1a29; }
.app-ui .support-guest-entry b { color: #f0dfbd; font: 700 23px/1.55 "Gowun Batang", serif; }
.app-ui .support-guest-entry a { border: 1px solid #b595586b; border-radius: 3px; background: #172638; color: #ead4a9; font-size: 15px; }
.app-ui .support-guest-entry .support-email-link { font-size: 14px; }
.app-ui .support-guest-entry :is(small, .support-contact-note) { font-size: 14px; line-height: 1.8; }
.app-ui .support-page .support-view-switch { gap: 0; padding: 0; border: 0; border-bottom: 1px solid #a5894e59; border-radius: 0; background: transparent; }
.app-ui .support-view-switch button { position: relative; min-height: 52px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; font: 400 18px/1.5 "Gowun Batang", serif; }
.app-ui .support-view-switch button[aria-pressed=true] { border-bottom-color: #dfba77; background: transparent; color: #e4c68e; }
.app-ui .support-page .support-compose,
.app-ui .support-history > article { border: 1px solid #a5894e45; border-radius: 6px; background: #0e1a29; }
.app-ui .support-compose h2, .app-ui .support-history h2 { font: 700 25px/1.5 "Gowun Batang", serif; }
.app-ui .support-compose :is(input, select, textarea) { border: 1px solid #9a885450; border-radius: 4px; background: #080f1b; color: #eee2cc; font-size: 16px; }
.app-ui .support-compose :is(small, .support-warning) { color: #b5b4a9; font-size: 14px; line-height: 1.75; }
.app-ui .support-compose button { min-height: 50px; border: 1px solid #e2c28b; border-radius: 3px; background: #d6b36e url('/art/ui-v2/gold-paper.webp') center / 640px auto; color: #241807; font: 700 18px/1.5 "Gowun Batang", serif; }
.app-ui .support-compose button:disabled { opacity: .48; cursor: not-allowed; }
.app-ui .support-page .support-empty { padding: 32px 22px; border: 1px solid #a5894e45; border-radius: 6px; background: #0d1928; }
.app-ui .support-empty > .storefront-painted-icon { width: 60px; height: 60px; }
.app-ui .support-empty button { border-color: #bb995d73; border-radius: 3px; background: transparent; color: #e3c58e; font-size: 16px; }
.app-ui .support-page .support-notice { border-radius: 4px; line-height: 1.8; }
.app-ui .support-page .support-state { border-radius: 3px; font-size: 14px; }
.app-ui .support-reply { border-left-color: #d4b071; border-radius: 0; background: #192637; }
.app-ui .support-history :is(time, code, small) { font-size: 14px; }
.app-ui .support-page .refund-request-note { border: 1px solid #bf9f6266; border-radius: 4px; background: #211f1a; }

.app-ui .login-page .login-card,
.app-ui .guest-recovery-page > section { width: min(520px, 100%); margin: 40px auto 28px; padding: 38px; border: 1px solid #b2925659; border-radius: 7px; background: #0e1a29; box-shadow: 0 20px 60px #0003; }
.app-ui .login-card .login-brand-mark { width: 74px; height: 74px; margin-bottom: 22px; }
.app-ui .login-card h1,
.app-ui .guest-recovery-page h1 { color: #f0dfb9; font: 700 30px/1.5 "Gowun Batang", serif; text-wrap: balance; }
.app-ui .login-card .login-eyebrow,
.app-ui .guest-recovery-page > section > p { color: #d4b681; font: 400 15px/1.7 "Gowun Batang", serif; }
.app-ui .login-card .login-intro { margin-top: 14px; color: #c2c3bd; font-size: 16px; line-height: 1.85; }
.app-ui .login-card > small { display: block; margin-top: 22px; color: #b4b4a9; font-size: 14px; line-height: 1.8; }
.app-ui .login-page .provider-login-button { min-height: 54px; border-radius: 4px; font-size: 16px; }
.app-ui .login-page .guest-login { border-color: #b4945a73; background: #1a2a3d; color: #ead5ac; }
.app-ui .login-page .login-error { color: #f1c6bb; border-color: #ba796155; border-radius: 4px; background: #442e284f; font-size: 15px; line-height: 1.75; }
.app-ui .guest-recovery-page > section > small { color: #c2c1b7; font-size: 15px; line-height: 1.85; }
.app-ui .guest-recovery-page form { margin-top: 28px; gap: 20px; }
.app-ui .guest-recovery-page label { font-size: 15px; color: #e7dcc8; }
.app-ui .guest-recovery-page label > span { color: #e7dcc8; font-size: 15px; line-height: 1.6; font-weight: 500; }
.app-ui .guest-recovery-page .guest-recovery-medallion { border-radius: 50%; }
.app-ui .guest-recovery-page form input { min-height: 52px; border: 1px solid #a38c5959; border-radius: 4px; background: #080f1b; color: #f3e8d6; font-size: 16px; }
.app-ui .guest-recovery-page form input,
.app-ui .support-compose :is(input, select, textarea) { border-color: #8a7856; }
.app-ui .guest-recovery-page form > button { min-height: 52px; border: 1px solid #e2c58b; border-radius: 3px; background: #d6b36e url('/art/ui-v2/gold-paper.webp') center / 640px auto; color: #241807; font: 700 18px/1.5 "Gowun Batang", serif; }
.app-ui .guest-recovery-page button:disabled { opacity: .45; cursor: not-allowed; }
.app-ui .guest-recovery-page .guest-recovery-email { padding-top: 24px; margin-top: 26px; border-top-color: #ac8e5052; }
.app-ui .guest-recovery-page .guest-recovery-email b { color: #e5cfaa; font: 700 20px/1.5 "Gowun Batang", serif; }
.app-ui .guest-recovery-page :is(.guest-recovery-email, .guest-recovery-help) p { color: #b8bcb8; font-size: 14px; line-height: 1.85; }
.app-ui .guest-recovery-page .guest-recovery-email-button { border: 1px solid #b4975b70; border-radius: 3px; background: #172638; color: #e7d2a8; font-size: 16px; }
.app-ui .guest-recovery-page .guest-recovery-help { padding: 18px 0 0; border: 0; border-top: 1px solid #ad8d4b38; border-radius: 0; background: transparent; }
.app-ui .guest-recovery-page .guest-recovery-status { border-radius: 4px; font-size: 15px; line-height: 1.85; }
.app-ui :is(.login-page, .guest-recovery-page) > footer a { min-height: 44px; color: #b6ad9a; font-size: 14px; }

.app-ui .legal-page .legal-nav { min-height: 82px; }
.app-ui .legal-nav > a { display: flex; align-items: center; gap: 10px; color: #e6c78d; font: 700 23px/1.5 "Gowun Batang", serif; }
.app-ui .legal-nav > a img { width: 42px; height: 42px; object-fit: contain; border-radius: 50%; }
.app-ui .legal-nav div a { font-size: 14px; }
.app-ui .legal-page .legal-hero { padding: 46px 0 30px; }
.app-ui .legal-hero h1 { color: #f0dfb9; font-size: 36px; }
.app-ui .legal-hero :is(p, span) { font-size: 14px; }
.app-ui .legal-page .legal-notice { border-color: #b3945159; border-radius: 4px; background: #142031; font-size: 15px; }
.app-ui .legal-page .legal-body :is(p, li, td, th) { color: #cac8be; font-size: 16px; line-height: 1.95; }
.app-ui .legal-page .legal-body h2 { color: #eddab3; font-size: 24px; }
.app-ui .legal-page .legal-body h3 { color: #e0c48e; font-size: 18px; }
.app-ui .legal-page .legal-body small { font-size: 14px; }
.app-ui .legal-page .legal-links a { min-height: 44px; border-color: #a78a5160; border-radius: 3px; font-size: 14px; }

.app-ui :is(.payment-result-page, .system-state-page, .not-found-page) section { width: min(520px, 100%); padding: 40px 30px; border: 1px solid #b2925659; border-radius: 7px; background: #0e1a29; box-shadow: 0 20px 60px #0003; }
.app-ui :is(.payment-result-page, .system-state-page, .not-found-page) h1 { color: #f0dfb9; font: 700 28px/1.6 "Gowun Batang", serif; }
.app-ui :is(.payment-result-page, .system-state-page, .not-found-page) p { color: #c7c5bb; font-size: 16px; line-height: 1.9; }
.app-ui :is(.payment-result-page, .system-state-page, .not-found-page) small { color: #cbaa70; font-size: 14px; letter-spacing: .02em; }
.app-ui :is(.payment-result-page, .system-state-page, .not-found-page) :is(section > a, section > button) { min-height: 50px; border: 1px solid #e2c58b; border-radius: 3px; background: #d6b36e url('/art/ui-v2/gold-paper.webp') center / 640px auto; color: #241807; font: 700 17px/1.6 "Gowun Batang", serif; }
.app-ui .shared-reading-page .shared-brand { display: flex; align-items: center; gap: 12px; color: #e6c78d; font: 700 26px/1.4 "Gowun Batang", serif; }
.app-ui .shared-brand > img { width: 48px; height: 48px; border-radius: 50%; }
.app-ui .shared-reading-page .shared-reading-card { border-color: #b2935663; border-radius: 8px; background: #0e1a29; }
.app-ui .shared-card-copy h1 { color: #f0dfb9; font-family: "Gowun Batang", serif; }
.app-ui .shared-card-copy :is(p, small) { font-size: 15px; line-height: 1.85; }
.app-ui .shared-reading-page .shared-start-button { min-height: 52px; border: 1px solid #e2c58b; border-radius: 3px; background: #d6b36e url('/art/ui-v2/gold-paper.webp') center / 640px auto; color: #241807; font: 700 18px/1.6 "Gowun Batang", serif; }

/* Existing purchased stories retain their panel and prose layout; their frame follows the same brand. */
.app-ui .record-page { background: #080f1b; }
.app-ui .record-page .record-nav { background: #080f1bf5; border-bottom: 1px solid #b4945140; }
.app-ui .record-page .record-nav a { color: #dfc48e; }
.app-ui .record-page .mini-brand { font-family: "Gowun Batang", serif; }
.app-ui .record-page :is(.chapter-navigator, .reading-quick-tools, .reading-side-rail) { border-color: #b0905254; }
.app-ui .record-page .record-footer { background: #080f1b; border-top: 1px solid #b4945140; }
.app-ui .record-page .record-footer > .record-brand-mark { display: block; width: 48px; height: 48px; margin: 0 auto 20px; border-radius: 50%; }
.app-ui .record-page .checkout-layer { background: #030812d9; backdrop-filter: blur(7px); }
.app-ui .record-page .checkout-sheet { width: min(100%, 540px); border-radius: 10px 10px 0 0; }
.app-ui .record-page .checkout-sheet > .sheet-seal { display: block; width: 64px; height: 64px; background: none !important; border-radius: 50% !important; filter: none; }
.app-ui .record-page .checkout-sheet > h2 { color: #f1e3c7; font: 700 27px/1.5 "Gowun Batang", serif; }
.app-ui .record-page .checkout-sheet > p { color: #d8d2c7; font-size: 15px; line-height: 1.85; }
.app-ui .record-page .checkout-sheet :is(.pay-area > small, .checkout-sheet > small, .payment-method-guide > small) { color: #bbb4a8; font-size: 14px; line-height: 1.8; }
.app-ui .record-page .checkout-sheet > small { color: #bbb4a8; font-size: 14px; }
.app-ui .record-page .checkout-close { width: 44px; height: 44px; color: #dfc795; }
.app-ui .record-page .toss-pay-button { min-height: 54px; border: 1px solid #e2c58b; border-radius: 4px; background: #d6b36e url('/art/ui-v2/gold-paper.webp') center / 640px auto; color: #241807; font: 700 18px/1.6 "Gowun Batang", serif; }
.app-ui .record-page .toss-pay-button:disabled { background: #39372f; border-color: #665d4a; color: #c8bfae; opacity: 1; cursor: not-allowed; }

@media (max-width: 640px) {
  .app-ui main:is(.account-page, .support-page) { grid-template-columns: 16px minmax(0, 1fr) 16px; }
  .app-ui main:is(.account-page, .support-page, .login-page, .guest-recovery-page) > .product-app-header { height: 70px; padding-inline: 16px; }
  .app-ui main:is(.account-page, .support-page, .login-page, .guest-recovery-page) .product-app-brand { font-size: 24px; gap: 10px; }
  .app-ui main:is(.account-page, .support-page, .login-page, .guest-recovery-page) .product-app-brand > img { width: 44px; height: 44px; }
  .app-ui main:is(.account-page, .support-page) > .celestial-workspace-heading { padding: 23px 2px 23px; margin-bottom: 23px; gap: 18px; }
  .app-ui .celestial-workspace-heading h1 { font-size: 30px; }
  .app-ui .celestial-workspace-heading > div > span { font-size: 15px; }
  .app-ui .celestial-workspace-heading > .storefront-painted-icon { width: 68px; height: 68px; }
  .app-ui .account-page .account-connect { grid-template-columns: 34px minmax(0, 1fr); padding: 20px; gap: 14px; }
  .app-ui .account-connect > .storefront-painted-icon { width: 34px; height: 34px; }
  .app-ui .account-connect > a { grid-column: 1/-1; }
  .app-ui .account-connect h2 { font-size: 20px; }
  .app-ui .account-page .account-profile { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px 14px; }
  .app-ui .account-page .account-profile > .storefront-painted-icon { grid-row: 1 / span 2; }
  .app-ui .account-page .account-profile > div { min-width: 0; }
  .app-ui .account-page .account-profile b { word-break: keep-all; overflow-wrap: anywhere; }
  .app-ui .account-page .account-profile > small { grid-column: 2; justify-self: start; }
  .app-ui .account-page .account-summary > div { display: grid; grid-template-rows: 42px auto; align-content: start; row-gap: 6px; padding: 18px 14px; }
  .app-ui .account-page .account-summary small { font-size: 13px; line-height: 1.6; }
  .app-ui .account-page .account-summary strong { margin: 0; }
  .app-ui .account-page .account-empty { padding: 28px 16px; }
  .app-ui .account-empty b { font-size: 21px; }
  .app-ui .account-page :is(.account-free-list, .account-purchase-list) > article { padding: 16px; gap: 18px; }
  .app-ui .account-reading-identity > .product-guide-artwork,
  .app-ui .account-purchase-title > .product-guide-artwork { flex-basis: 82px; width: 82px; height: 112px; }
  .app-ui .account-purchase-title { gap: 15px; }
  .app-ui .account-page :is(.account-free-list, .account-purchase-list) strong { font-size: 20px; }
  .app-ui .account-page :is(.account-restore, .account-support) { padding: 20px; }
  .app-ui .support-page :is(.support-quick-help, .support-compose, .support-guest-entry > div) { padding: 22px 20px; }
  .app-ui .support-compose h2, .app-ui .support-history h2 { font-size: 23px; }
  .app-ui .login-page .login-card, .app-ui .guest-recovery-page > section { margin: 24px auto; padding: 28px 22px; }
  .app-ui .login-card h1, .app-ui .guest-recovery-page h1 { font-size: 27px; }
  .app-ui .legal-page .legal-nav { gap: 10px; align-items: center; }
  .app-ui .legal-nav > a { font-size: 20px; }
  .app-ui .legal-nav > a img { width: 34px; height: 34px; }
  .app-ui .legal-nav div { flex-wrap: wrap; gap: 6px 12px; }
  .app-ui .legal-nav div a { font-size: 14px; }
  .app-ui .legal-hero h1 { font-size: 30px; }
  .app-ui :is(.payment-result-page, .system-state-page, .not-found-page) section { padding: 32px 22px; }
  .app-ui :is(.payment-result-page, .system-state-page, .not-found-page) h1 { font-size: 26px; }
}

@media (max-width: 360px) {
  .app-ui .account-page .account-summary > div:last-child strong { font-size: 16px; }
}

/* Original rendered style: /app/reading-experience.css */
/* Public reading journey. Modern result surfaces plus shared checkout and reading tools.
   Legacy prose, guide images, chapter positioning and payment logic remain unchanged. */
.app-ui .celestial-detail,
.app-ui .record-page,
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer,
body.app-ui:has(:is(.celestial-detail, .record-page)) > .ask-selection-chip {
  --reading-ink: #080f1b;
  --reading-surface: #101b2a;
  --reading-gold: #ddbd7d;
  --reading-ivory: #f1e3c7;
  --reading-text: #d8d2c7;
  --reading-muted: #bbb4a8;
  --reading-rule: #baa16b55;
  --reading-error: #f1b3ad;
}

/* Compact, keyboard-friendly birth-profile wizard. */
.app-ui .celestial-detail .wizard-overlay { padding: 20px; }
.app-ui .celestial-detail .wizard-scrim { background: #030812d9; backdrop-filter: blur(7px); }
.app-ui .celestial-detail .wizard-overlay > .preview-wizard {
  width: min(100%, 540px);
  max-width: 540px;
  max-height: min(90dvh, 720px);
  min-height: 0;
  padding: 26px;
  border: 1px solid #b59b665f;
  border-radius: 12px;
  background: var(--reading-surface);
  color: var(--reading-ivory);
  box-shadow: 0 22px 70px #0009, inset 0 1px #e2c48816;
  scrollbar-color: #8b7548 #101b2a;
  scrollbar-width: thin;
}
.app-ui .celestial-detail .wizard-top {
  grid-template-columns: 44px minmax(0, 1fr) auto 44px;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--reading-rule);
}
.app-ui .celestial-detail .wizard-top b { color: var(--reading-gold); font-size: 14px; font-weight: 500; }
.app-ui .celestial-detail :is(.wizard-back, .wizard-close) {
  width: 44px;
  height: 44px;
  border: 1px solid #baa16b45;
  border-radius: 6px;
  background: #0b1523;
}
.app-ui .celestial-detail :is(.wizard-back, .wizard-close):hover { border-color: var(--reading-gold); background: #182438; }
.app-ui .celestial-detail .wizard-progress { height: 3px; border-radius: 0; background: #d8c08b26; }
.app-ui .celestial-detail .wizard-progress > i { border-radius: 0; background: var(--reading-gold); }
.app-ui .celestial-detail .preview-wizard .wizard-body { gap: 14px; min-height: 220px; padding: 16px 0 24px; }
.app-ui .celestial-detail .preview-wizard .wizard-body > h2 {
  color: var(--reading-ivory);
  font: 700 28px/1.5 "Gowun Batang", serif;
  letter-spacing: -.035em;
}
.app-ui .celestial-detail .wizard-body > p { color: var(--reading-text); font: 400 16px/1.8 var(--ui-font); }
.app-ui .celestial-detail .wizard-field { gap: 13px; }
.app-ui .wizard-relationship-options { display: grid; gap: 12px; }
.app-ui .wizard-relationship-options button {
  width: 100%; min-height: 56px; padding: 14px 18px; border: 1px solid var(--line-2);
  border-radius: 12px; background: #1d2a36; color: var(--tx-1); text-align: left; font: inherit;
}
.app-ui .wizard-relationship-options button[aria-pressed="true"] {
  border-color: var(--gold); background: #d9bd8715; color: var(--gold-hi);
}
.app-ui .wizard-relationship-skip {
  justify-self: center; min-height: 44px; padding: 8px 16px; border: 0; background: none;
  color: var(--tx-2); text-decoration: underline; text-underline-offset: 4px; font: inherit;
}
.app-ui :is(.wizard-relationship-options button, .wizard-relationship-skip):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
.app-ui .celestial-detail .wizard-field :is(small, label > span, legend),
.app-ui .celestial-detail .wizard-field > span { color: var(--reading-muted); font: 400 14px/1.75 var(--ui-font); }
.app-ui .celestial-detail .wizard-field :is(label, fieldset) { min-width: 0; }
.app-ui .celestial-detail .wizard-field fieldset { padding: 16px; border: 1px solid var(--reading-rule); border-radius: 6px; }
.app-ui .celestial-detail .wizard-body :is(input:not([type="checkbox"]), select, textarea) {
  min-width: 0;
  min-height: 54px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #a395735f;
  border-radius: 6px;
  background: #080f1b;
  color: #f3ead7;
  color-scheme: dark;
  font: 400 17px/1.6 var(--ui-font);
  box-shadow: none;
}
.app-ui .celestial-detail .wizard-body textarea { min-height: 124px; resize: vertical; }
.app-ui .celestial-detail .wizard-body :is(input, textarea)::placeholder { color: #b2ac9f; opacity: 1; }
.app-ui .celestial-detail .wizard-body :is(input, select, textarea):focus-visible {
  border-color: var(--reading-gold);
  outline: 2px solid #ddbd7d;
  outline-offset: 3px;
  box-shadow: none;
}
.app-ui .celestial-detail .wizard-body .wizard-big-input { font-size: 22px !important; font-weight: 500 !important; letter-spacing: .035em; }
.app-ui .celestial-detail :is(.wizard-choice, .wizard-toggle) button {
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid #a395735f;
  border-radius: 6px;
  background: #0b1523;
  color: var(--reading-text);
  font: 500 16px/1.5 var(--ui-font);
  box-shadow: none;
}
.app-ui .celestial-detail :is(.wizard-choice, .wizard-toggle) button:is(.on, [aria-pressed="true"]) {
  border-color: var(--reading-gold);
  background: #ddbd7d14;
  color: #f3d99e;
  box-shadow: inset 0 -2px #ddbd7d;
}
.app-ui .celestial-detail .wizard-check,
.app-ui .celestial-detail .product-check-grid label { min-height: 44px; color: var(--reading-text); font: 400 15px/1.7 var(--ui-font); }
.app-ui .celestial-detail .wizard-body input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  accent-color: var(--reading-gold);
}
.app-ui .celestial-detail .wizard-summary { border-color: var(--reading-rule); border-radius: 6px; background: #080f1b; }
.app-ui .celestial-detail .wizard-summary p { padding: 13px 14px; border-bottom-color: #baa16b30; color: var(--reading-ivory); font: 400 16px/1.7 var(--ui-font); }
.app-ui .celestial-detail .wizard-summary span { color: var(--reading-muted); font: 400 14px/1.7 var(--ui-font); }
.app-ui .celestial-detail :is(.numerology-help, .numerology-name-fields) { border-color: var(--reading-rule); border-radius: 6px; }
.app-ui .celestial-detail .numerology-help { background: #080f1b; }
.app-ui .celestial-detail .numerology-help summary { min-height: 46px; color: var(--reading-gold); font-size: 14px; }
.app-ui .celestial-detail .numerology-help p,
.app-ui .celestial-detail .numerology-name-fields :is(p, small) { color: var(--reading-text); font: 400 14px/1.8 var(--ui-font); }
.app-ui .celestial-detail .numerology-name-fields label { color: var(--reading-ivory); font-size: 15px; }

/* Real gold-paper texture, reserved for the next step and the purchase action. */
.app-ui .celestial-detail .preview-wizard > .product-primary,
.app-ui .celestial-detail .product-preview-result > .product-primary,
.app-ui .celestial-detail .product-topic-checkout .toss-pay-button {
  min-height: 55px;
  padding: 13px 20px;
  border: 1px solid #e3c48b;
  border-radius: 6px;
  background: #d7b472 url('/art/ui-v2/gold-paper.webp') center / cover no-repeat;
  color: #261e11;
  font: 700 18px/1.5 "Gowun Batang", serif;
  box-shadow: inset 0 1px #f7e2b475, 0 5px 16px #0003;
  text-shadow: none;
}
.app-ui .celestial-detail .preview-wizard > .product-primary:not(:disabled):hover,
.app-ui .celestial-detail .product-preview-result > .product-primary:not(:disabled):hover,
.app-ui .celestial-detail .toss-pay-button:not(:disabled):hover { filter: brightness(1.07); }
.app-ui .celestial-detail .preview-wizard > .product-primary:disabled,
.app-ui .celestial-detail .product-topic-checkout .toss-pay-button:disabled {
  border-color: #6e624a;
  background: #453f33;
  color: #d2c8b6;
  box-shadow: none;
  opacity: 1;
  filter: none;
  cursor: not-allowed;
}
.app-ui .celestial-detail .preview-wizard > .product-primary:disabled .ui-icon { opacity: .55; filter: none; }
.app-ui .celestial-detail :is(.preview-wizard, .product-preview-result) .product-secondary {
  min-height: 46px;
  padding: 11px 16px;
  border: 1px solid var(--reading-rule);
  border-radius: 6px;
  background: #0a1422;
  color: #d8c8a8;
  font: 400 15px/1.6 var(--ui-font);
}
.app-ui .celestial-detail :is(.preview-wizard, .product-preview-result) :is(button, a):focus-visible {
  outline: 2px solid #f0cc87;
  outline-offset: 4px;
}
.app-ui .celestial-detail :is(.preview-wizard, .product-preview-result) :is(.product-error, [role="alert"]) {
  padding: 13px 15px;
  border: 1px solid #c379715f;
  border-left: 3px solid #d69a89;
  border-radius: 4px;
  background: #3d202b;
  color: #ffd2c8;
  font: 400 15px/1.8 var(--ui-font);
}

/* Loading and results: recolor the existing reader chrome, retain prose layout. */
.app-ui .celestial-detail .product-preview-result {
  overflow: visible;
  border: 1px solid var(--reading-rule);
  border-radius: 10px;
  background: #0c1725;
  color: var(--reading-text);
  box-shadow: none;
}
.app-ui .celestial-detail :is(.product-preview-result > header, .product-reading-intro) { border-bottom-color: var(--reading-rule); background: transparent; }
.app-ui .celestial-detail :is(.product-preview-result > header h2, .product-preview-result > h2, .product-reading-intro h2) {
  color: var(--reading-ivory);
  font: 700 28px/1.5 "Gowun Batang", serif;
  letter-spacing: -.03em;
}
.app-ui .celestial-detail .product-preview-result > header :is(small, .product-guide-identity) { color: var(--reading-gold); font-size: 14px; }
.app-ui .celestial-detail .product-preview-result > header p,
.app-ui .celestial-detail .product-reading-intro p { color: var(--reading-text); font: 400 16px/1.85 var(--ui-font); }
.app-ui .celestial-detail .product-preview-result .product-result-chapter { border-bottom-color: #baa16b38; scroll-margin-top: 150px; }
.app-ui .celestial-detail .product-result-chapter > small { color: var(--reading-gold); font-size: 14px; }
.app-ui .celestial-detail .product-result-chapter h3 { color: var(--reading-ivory); font-family: "Gowun Batang", serif; }
.app-ui .celestial-detail .cross-reading-summary { border-color: var(--reading-rule); border-radius: 6px; background: #111e2d; }
.app-ui .celestial-detail .cross-reading-summary > small { color: var(--reading-gold); font-size: 14px; letter-spacing: .03em; }
.app-ui .celestial-detail .cross-reading-summary > span,
.app-ui .celestial-detail .cross-reading-summary em { color: var(--reading-text); font-size: 14px; }
.app-ui .celestial-detail .product-preview-result .result-reading-tools { top: 92px; border-color: var(--reading-rule); border-radius: 4px; background: #0c1725f2; box-shadow: none; }
.app-ui .celestial-detail .result-reading-tools b { color: var(--reading-gold); font-size: 14px; }
.app-ui .celestial-detail .result-reading-tools b em { color: var(--reading-muted); }
.app-ui .celestial-detail .result-reading-tools .reading-track { background: #baa16b30; }
.app-ui .celestial-detail .result-reading-tools .reading-track > i { background: var(--reading-gold); }
.app-ui .celestial-detail .brand-loading-label { color: var(--reading-gold); font-size: 14px; }
.app-ui .celestial-detail .brand-loading-copy h2 { color: var(--reading-ivory); font: 700 25px/1.55 "Gowun Batang", serif; }
.app-ui .celestial-detail .brand-loading-copy p { color: var(--reading-text); font: 400 16px/1.8 var(--ui-font); }
.app-ui .celestial-detail .brand-loading.compact h2 { font-size: 18px; }
.app-ui .celestial-detail .brand-loading.compact p { font-size: 14px; }
.app-ui .celestial-detail .brand-loading-track b { color: var(--reading-gold); font-size: 14px; }
.app-ui .celestial-detail .brand-loading-track progress,
.app-ui .celestial-detail .brand-loading-track progress::-webkit-progress-bar { background: #baa16b30; }
.app-ui .celestial-detail .brand-loading-track progress::-webkit-progress-value { background: var(--reading-gold); }
.app-ui .celestial-detail .brand-loading-track progress::-moz-progress-bar { background: var(--reading-gold); }
.app-ui .celestial-detail .reading-generation-progress { border: 1px solid var(--reading-rule); border-radius: 6px; background: #0b1725; }
.app-ui .celestial-detail .reading-generation-progress > b { color: var(--reading-ivory); font: 700 20px/1.6 "Gowun Batang", serif; }
.app-ui .celestial-detail .reading-generation-progress > small { color: var(--reading-text); font-size: 14px; line-height: 1.8; }
.app-ui .celestial-detail .reading-generation-progress > span { background: #baa16b35; }
.app-ui .celestial-detail .reading-generation-progress > span > i { background: var(--reading-gold); }
.app-ui .celestial-detail .product-restore-state > p { color: var(--reading-text); font-size: 16px; line-height: 1.8; }
.app-ui .celestial-detail .product-restore-state > a { color: var(--reading-gold); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }

/* Preserve all chart values, meter colors and the four/two-column arrangement. */
.app-ui .celestial-detail .reading-chart-summary { border-color: var(--reading-rule); border-radius: 10px; background: #101b2a; }
.app-ui .celestial-detail .reading-chart-summary > header > span { color: var(--reading-gold); font-size: 14px; letter-spacing: .03em; }
.app-ui .celestial-detail .reading-chart-summary h2 { color: var(--reading-ivory); font: 700 26px/1.5 "Gowun Batang", serif; }
.app-ui .celestial-detail .reading-chart-summary p { color: var(--reading-text); font-size: 15px; line-height: 1.8; }
.app-ui .celestial-detail .reading-pillar-grid article { border-color: #baa16b3d; border-radius: 5px; background: #080f1b; }
.app-ui .celestial-detail .reading-pillar-grid .is-day { border-color: #ddbd7d9c; background: #ddbd7d0c; }
.app-ui .celestial-detail .reading-pillar-grid small { color: var(--reading-muted); font-size: 14px; }
.app-ui .celestial-detail .reading-pillar-grid strong { color: var(--reading-gold); font-family: "Gowun Batang", serif; }
.app-ui .celestial-detail .reading-pillar-grid .pillar-hanja { color: #cec2aa; }
.app-ui .celestial-detail .reading-pillar-grid p { color: var(--reading-muted); font-size: 14px; }
.app-ui .celestial-detail .reading-element-chart { border-top-color: var(--reading-rule); }
.app-ui .celestial-detail .reading-element-chart h3 { color: var(--reading-ivory); font: 700 19px/1.6 "Gowun Batang", serif; }
.app-ui .celestial-detail .reading-element-row { grid-template-columns: 64px minmax(0, 1fr) 96px; }
.app-ui .celestial-detail .reading-element-row > span { color: var(--reading-text); font-size: 15px; }
.app-ui .celestial-detail .reading-element-row > span small { color: var(--reading-muted); font-size: 14px; }
.app-ui .celestial-detail .reading-element-row > b { color: var(--reading-text); font-size: 14px; }
.app-ui .celestial-detail .reading-element-row > b span { color: var(--reading-muted); }
.app-ui .celestial-detail .reading-chart-summary .reading-chart-note { color: var(--reading-muted); font-size: 14px; line-height: 1.85; }
.app-ui .celestial-detail .reading-numerology { border-top-color: var(--reading-rule); }
.app-ui .celestial-detail .reading-numerology-grid article { border-color: var(--reading-rule); border-radius: 6px; background: #080f1b; }
.app-ui .celestial-detail .reading-numerology-grid :is(small, span) { color: var(--reading-muted); font-size: 14px; }

/* The paid continuation and its consent block remain explicit and legible. */
.app-ui .celestial-detail .locked-toc { padding: 22px; border: 1px solid var(--reading-rule); border-radius: 6px; background: #080f1b; }
.app-ui .celestial-detail .locked-toc h3 { color: var(--reading-ivory); font: 700 22px/1.5 "Gowun Batang", serif; }
.app-ui .celestial-detail .locked-toc p { color: var(--reading-text); font-size: 15px; line-height: 1.8; border-color: #baa16b30; }
.app-ui .celestial-detail .locked-toc p > span { color: var(--reading-gold); font-size: 14px; }
.app-ui .celestial-detail .locked-toc b { color: var(--reading-muted); font-size: 14px; font-weight: 400; }
.app-ui :is(.celestial-detail, .record-page) :is(.product-topic-checkout, .checkout-sheet) { padding: 24px; border: 1px solid #c6a46880; border-radius: 8px; background: #111e2e; color: var(--reading-text); }
.app-ui :is(.celestial-detail, .record-page) :is(.product-topic-checkout, .checkout-sheet) header > small { color: var(--reading-gold); font-size: 14px; }
.app-ui :is(.celestial-detail, .record-page) :is(.product-topic-checkout, .checkout-sheet) header > h3 { color: var(--reading-ivory); font: 700 25px/1.5 "Gowun Batang", serif; }
.app-ui :is(.celestial-detail, .record-page) .checkout-price { border-color: var(--reading-rule); }
.app-ui :is(.celestial-detail, .record-page) .checkout-price span { color: var(--reading-text); font: 400 14px/1.7 var(--ui-font); letter-spacing: 0; }
.app-ui :is(.celestial-detail, .record-page) .checkout-price strong { color: var(--reading-gold); font: 700 27px/1.4 "Gowun Batang", serif; white-space: nowrap; }
.app-ui :is(.celestial-detail, .record-page) :is(.checkout-identity, .guest-purchase-note, .account-purchase-note, .approved-account-open) { border: 1px solid var(--reading-rule); border-radius: 6px; background: #0a1422; color: var(--reading-text); }
.app-ui :is(.celestial-detail, .record-page) .account-purchase-note { color: var(--reading-text) !important; font: 400 14px/1.85 var(--ui-font) !important; }
.app-ui :is(.celestial-detail, .record-page) :is(.checkout-identity, .guest-purchase-note) > b { color: var(--reading-ivory); font: 600 16px/1.6 var(--ui-font); }
/* Existing global rules use !important on these three pieces of checkout copy. */
.app-ui :is(.celestial-detail, .record-page) .checkout-identity > p,
.app-ui :is(.celestial-detail, .record-page) .guest-purchase-note p { color: var(--reading-text) !important; font: 400 15px/1.8 var(--ui-font) !important; }
.app-ui :is(.celestial-detail, .record-page) .guest-purchase-note > small,
.app-ui :is(.celestial-detail, .record-page) .approved-account-open small { color: var(--reading-muted); font-size: 14px; line-height: 1.8; }
.app-ui :is(.celestial-detail, .record-page) .guest-purchase-note > button { min-height: 44px; color: var(--reading-gold); border-bottom-color: var(--reading-rule); font-size: 14px; }
.app-ui :is(.celestial-detail, .record-page) :is(.product-topic-checkout, .checkout-sheet) .guest-recovery-link { color: var(--reading-gold); font-size: 14px; line-height: 1.8; }
.app-ui :is(.celestial-detail, .record-page) .checkout-identity-actions > * { min-height: 52px; height: auto; padding-block: 13px; border-radius: 6px; font-size: 15px; }
.app-ui :is(.celestial-detail, .record-page) .guest-checkout-button { border-color: var(--reading-rule); background: #1a293d; color: var(--reading-ivory); }
.app-ui :is(.celestial-detail, .record-page) .guest-recovery-fields label { gap: 8px; color: var(--reading-text); font-size: 14px; font-weight: 500; }
.app-ui :is(.celestial-detail, .record-page) .guest-recovery-fields input { min-height: 50px; border-color: #baa16b75; border-radius: 5px; background: #080f1b; color: var(--reading-ivory); font: 400 16px/1.5 var(--ui-font); }
.app-ui :is(.celestial-detail, .record-page) .guest-recovery-fields input::placeholder { color: #b2ac9f; }
.app-ui :is(.celestial-detail, .record-page) .guest-recovery-fields input:focus-visible { border-color: var(--reading-gold); outline: 2px solid var(--reading-gold); outline-offset: 3px; box-shadow: none; }
.app-ui :is(.celestial-detail, .record-page) .approved-account-open button { border-color: #baa16b80; border-radius: 5px; background: #1b2a3e; color: var(--reading-ivory); font-size: 15px; }
.app-ui :is(.celestial-detail, .record-page) :is(.product-topic-checkout, .checkout-sheet) :is(.guest-checkout-button, .approved-account-open button):disabled { border-color: #6e624a; background: #39372f; color: #c8bfae; opacity: 1; cursor: not-allowed; }
.app-ui :is(.celestial-detail, .record-page) .payment-method-guide { padding: 18px; border-color: var(--reading-rule); border-radius: 6px; background: #080f1b; }
.app-ui :is(.celestial-detail, .record-page) .payment-method-guide > div:first-child > b { color: var(--reading-ivory); font: 600 16px/1.7 var(--ui-font); }
.app-ui :is(.celestial-detail, .record-page) .payment-method-guide > div:first-child > span { color: var(--reading-muted); font-size: 14px; line-height: 1.75; }
.app-ui :is(.celestial-detail, .record-page) .payment-route-list > button { min-height: 78px; border: 1px solid #baa16b60; border-radius: 5px; background: #101b2a; color: var(--reading-ivory); box-shadow: none; }
.app-ui :is(.celestial-detail, .record-page) .payment-route-list > button.selected { border: 2px solid var(--reading-gold); background: #ddbd7d12; box-shadow: none; }
.app-ui :is(.celestial-detail, .record-page) .payment-route-list i,
.app-ui :is(.celestial-detail, .record-page) .payment-route-list button:last-child i { flex-basis: 42px; width: 42px; height: 42px; border: 1px solid var(--reading-rule); border-radius: 4px; background: #203047; color: var(--reading-gold); font-size: 14px; font-weight: 500; }
.app-ui :is(.celestial-detail, .record-page) .payment-route-list b { color: var(--reading-ivory); font-size: 15px; }
.app-ui :is(.celestial-detail, .record-page) .payment-route-list small { color: var(--reading-text); font-size: 14px; line-height: 1.65; }
.app-ui :is(.celestial-detail, .record-page) .checkout-consents { padding: 16px; border: 1px solid #c9b183; border-radius: 5px; background: #e8ddc4; color: #332a1e; }
.app-ui :is(.celestial-detail, .record-page) .checkout-consents label { grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 9px 0; color: #332a1e; font: 400 15px/1.85 var(--ui-font); }
.app-ui :is(.celestial-detail, .record-page) .checkout-consents label + label { margin-top: 5px; padding-top: 16px; border-top: 1px solid #8f785044; }
.app-ui :is(.celestial-detail, .record-page) .checkout-consents input { width: 21px; height: 21px; margin-top: 4px; accent-color: #715026; }
.app-ui :is(.celestial-detail, .record-page) .checkout-consents a { color: #612f20; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.app-ui :is(.celestial-detail, .record-page) .checkout-consents :is(input, a):focus-visible { outline: 2px solid #694c21; outline-offset: 3px; }
.app-ui :is(.celestial-detail, .record-page) .consent-help { margin-top: 11px !important; color: #e0cda8 !important; font: 400 14px/1.8 var(--ui-font) !important; }
.app-ui :is(.celestial-detail, .record-page) :is(.product-topic-checkout, .checkout-sheet) :is(.sandbox-payment-note, .pay-status) { color: #e9c792; font-size: 14px; line-height: 1.8; }
.app-ui :is(.celestial-detail, .record-page) .sandbox-payment-note { border-color: #b3945c70; border-radius: 4px; background: #2b251d; color: #e9c792 !important; font: 400 14px/1.8 var(--ui-font) !important; }
.app-ui :is(.celestial-detail, .record-page) :is(.product-topic-checkout, .checkout-sheet) .connect-pay { border-color: var(--reading-rule); border-radius: 5px; background: #080f1b; }
.app-ui :is(.celestial-detail, .record-page) :is(.product-topic-checkout, .checkout-sheet) .connect-pay strong { color: var(--reading-gold); font-size: 19px; }
.app-ui :is(.celestial-detail, .record-page) :is(.product-topic-checkout, .checkout-sheet) .connect-pay p { color: var(--reading-text); font-size: 14px; line-height: 1.8; }

/* Tools retain their existing fixed positions and panel behavior. */
.app-ui :is(.celestial-detail, .record-page) :is(.chapter-nav-toggle, .ask-guide-fixed) { border: 1px solid #b29a686f; border-radius: 6px; background: #101d2e; color: var(--reading-gold); font: 500 14px/1.6 var(--ui-font); box-shadow: 0 5px 18px #0004; }
.app-ui :is(.celestial-detail, .record-page) .chapter-nav-toggle b { color: #251b0c; font-size: 14px; }
.app-ui :is(.celestial-detail, .record-page) .ask-guide-fixed .ui-icon { width: 26px; height: 26px; background: url('/art/ui-v2/icon-celestial.webp') center / contain no-repeat; mix-blend-mode: screen; }
.app-ui :is(.celestial-detail, .record-page) .ask-guide-fixed > .storefront-painted-icon,
body.app-ui > .ask-selection-chip > .storefront-painted-icon { width: 25px; height: 25px; }
.app-ui :is(.celestial-detail, .record-page) .chapter-navigator { border-color: var(--reading-rule); border-radius: 7px; background: #101b2a; color: var(--reading-text); }
.app-ui :is(.celestial-detail, .record-page) .chapter-navigator :is(small, span) { font-size: 14px; }
.app-ui :is(.celestial-detail, .record-page) .chapter-navigator ol button { min-height: 52px; color: var(--reading-text); font-size: 15px; }
.app-ui :is(.celestial-detail, .record-page) .chapter-navigator ol button:is(.is-active, [aria-current="step"]) { border-color: var(--reading-gold); color: var(--reading-gold); background: #ddbd7d12; }
.app-ui :is(.celestial-detail, .record-page) .reading-share { border-color: var(--reading-rule); border-radius: 6px; background: #111e2d; }
.app-ui :is(.celestial-detail, .record-page) .reading-share h3 { color: var(--reading-ivory); font: 700 20px/1.6 "Gowun Batang", serif; }
.app-ui :is(.celestial-detail, .record-page) .reading-share p { color: var(--reading-text); font-size: 14px; }
.app-ui :is(.celestial-detail, .record-page) .kakao-share-primary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #fee500; border-radius: 6px; background: #fee500; color: #191919; font: 600 14px/1.5 var(--ui-font); cursor: pointer; }
.app-ui :is(.celestial-detail, .record-page) .kakao-share-primary img { flex: 0 0 20px; width: 20px; height: 20px; }
.app-ui :is(.celestial-detail, .record-page) .kakao-copy-link { min-height: 36px; margin-top: 6px; padding: 6px 0; border: 0; background: transparent; color: var(--reading-gold); font: 400 14px/1.5 var(--ui-font); text-decoration: underline; }
.app-ui :is(.celestial-detail, .record-page) .kakao-share-control > :is(small, .reading-share-link) { position: static; display: block; margin: 8px 0 0; padding: 0; background: none; color: var(--reading-text); font: 400 13px/1.6 var(--ui-font); text-align: left; }
.app-ui :is(.celestial-detail, .record-page) .reading-share :is(.reading-share-link, .kakao-share-control > small) { color: var(--reading-muted); font-size: 14px; }

/* Body portals: apply while a product result or restored legacy reading is mounted. */
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer { background: #030812d9; backdrop-filter: blur(7px); }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .reading-qa-sheet { border: 1px solid #b59b6680; border-bottom: 0; border-radius: 12px 12px 0 0; background: #101b2a; color: var(--reading-text); padding: 25px 24px max(24px, env(safe-area-inset-bottom)); box-shadow: 0 -18px 60px #0008; }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .reading-qa-sheet > header small { color: var(--reading-gold); font: 400 14px/1.6 var(--ui-font); letter-spacing: .02em; }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .reading-qa-sheet > header h2 { color: var(--reading-ivory); font: 700 26px/1.5 "Gowun Batang", serif; }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .reading-qa-sheet > header p { color: var(--reading-text); font: 400 15px/1.8 var(--ui-font); }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .reading-qa-sheet > header button { width: 44px; height: 44px; flex-basis: 44px; border-color: var(--reading-rule); border-radius: 5px; background: #0a1422; }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .reading-qa-sheet > blockquote { border-color: var(--reading-rule); border-left-color: var(--reading-gold); border-radius: 0; background: #080f1b; }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .reading-qa-sheet > blockquote b { color: var(--reading-gold); font-size: 14px; }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .reading-qa-sheet > blockquote p { color: var(--reading-text); font: 400 16px/1.85 var(--ui-font); }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .qa-quick-questions button { border-color: var(--reading-rule); border-radius: 5px; background: #122237; color: var(--reading-ivory); font: 400 14px/1.6 var(--ui-font); }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer :is(.qa-login-note, .qa-locked-note, .qa-usage-note) { border-color: var(--reading-rule); border-radius: 5px; color: var(--reading-text); font: 400 14px/1.8 var(--ui-font); }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer :is(.qa-login-note, .qa-usage-note) p { color: var(--reading-text); font: 400 14px/1.8 var(--ui-font); }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .qa-usage-note.exhausted { border-color: #b9975a70; background: #2b251d; }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .qa-usage-note.exhausted div > b { color: #efd298; font-size: 15px; }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer :is(.qa-login-note a, .qa-login-note button, .qa-usage-note button) { min-height: 44px; padding: 10px 14px; border: 1px solid var(--reading-rule); border-radius: 5px; background: #101d2e; color: var(--reading-gold); font: 500 14px/1.6 var(--ui-font); }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .qa-messages article { border-radius: 6px; padding: 15px 16px; }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .qa-user-question { border: 1px solid #baa16b3d; background: #172a40; color: var(--reading-ivory); }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .qa-guide-answer { border-color: #c6ae7a; background: #e9dfc9; color: #332b1f; }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .qa-messages article b { color: #725125; font: 600 14px/1.6 var(--ui-font); }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .qa-messages article small { opacity: 1; font: 400 14px/1.8 var(--ui-font); }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .qa-messages article p { color: inherit; font: 400 16px/1.9 var(--ui-font); }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .qa-guide-answer small { color: #65543a; }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .qa-user-question small { color: #d9caaa; }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .qa-thinking { color: var(--reading-gold); font: 400 15px/1.8 var(--ui-font); }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .reading-qa-sheet textarea { border-color: #a3957370; border-radius: 5px; background: #080f1b; color: var(--reading-ivory); font: 400 16px/1.8 var(--ui-font); }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .reading-qa-sheet textarea::placeholder { color: #b5ae9f; opacity: 1; }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .reading-qa-sheet > form button { min-height: 48px; border: 1px solid #e3c48b; border-radius: 5px; background: #d7b472 url('/art/ui-v2/gold-paper.webp') center / cover no-repeat; color: #261e11; font: 700 17px/1.5 "Gowun Batang", serif; }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .reading-qa-sheet :is(button, textarea):disabled { opacity: 1; border-color: #665d4a; background: #39372f; color: #c8bfae; cursor: not-allowed; box-shadow: none; }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .reading-qa-sheet :is(button, a, textarea):focus-visible { outline: 2px solid #f0cc87; outline-offset: 3px; }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .reading-qa-sheet > footer small { color: var(--reading-muted); font: 400 14px/1.8 var(--ui-font); }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .brand-loading-copy h2 { color: var(--reading-ivory); font: 700 18px/1.6 "Gowun Batang", serif; }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .brand-loading-copy p { color: var(--reading-muted); font-size: 14px; }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .ask-selection-chip { min-height: 46px; border: 1px solid #c2a263; border-radius: 5px; background: #15243a; color: #f0d39a; font: 500 15px/1.6 var(--ui-font); box-shadow: 0 5px 18px #0005; }
body.app-ui:has(:is(.celestial-detail, .record-page)) > .ask-selection-chip .ui-icon { width: 25px; height: 25px; background: url('/art/ui-v2/icon-celestial.webp') center / contain no-repeat; mix-blend-mode: screen; }

@media (max-width: 760px) {
  .app-ui .celestial-detail .wizard-overlay { padding: 0; }
  .app-ui .celestial-detail .wizard-overlay > .preview-wizard {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid #b59b6660;
    border-radius: 0;
  }
  .app-ui .celestial-detail .preview-wizard .wizard-body { min-height: 0; padding: 18px 0 24px; }
  .app-ui .celestial-detail .preview-wizard > .product-primary { flex-shrink: 0; }
}

@media (max-width: 640px) {
  .app-ui .celestial-detail .product-reading-side-rail .reading-quick-tools { grid-template-columns: minmax(0, 1fr); gap: 8px; width: min(220px, calc(100% - 144px)); }
  .app-ui .celestial-detail .product-reading-side-rail .chapter-nav-toggle { width: 104px; min-width: 0; gap: 4px; padding: 10px 8px; }
  .app-ui .celestial-detail .product-reading-side-rail .chapter-nav-toggle .ui-icon { width: 20px; height: 20px; }
  .app-ui .celestial-detail .product-reading-side-rail .chapter-nav-toggle b { width: 24px; height: 24px; flex: 0 0 24px; font-size: 13px; }
  .app-ui .celestial-detail .product-reading-side-rail :is(.kakao-share-primary, .ask-guide-fixed) { gap: 6px; padding: 10px 8px; font-size: 13px; }
  .app-ui .celestial-detail .product-reading-side-rail .ask-guide-fixed > .storefront-painted-icon { width: 20px; height: 20px; }
  .app-ui .celestial-detail .product-reading-side-rail .chapter-navigator { bottom: calc(210px + env(safe-area-inset-bottom)); }
  .app-ui .celestial-detail .product-preview-result .result-reading-tools { top: 76px; }
  .app-ui .celestial-detail .product-preview-result .product-result-chapter { scroll-margin-top: 132px; }
  .app-ui .celestial-detail .product-reading-layout:has(.product-topic-checkout) .product-reading-side-rail,
  .app-ui .celestial-detail .product-reading-layout:has(.product-topic-checkout) .result-reading-tools,
  body.app-ui:has(.celestial-detail .product-topic-checkout) > .ask-selection-chip { display: none; }
  .app-ui .celestial-detail .product-preview-result { padding: 24px 16px; }
  .app-ui .celestial-detail .product-preview-result > .product-topic-checkout { margin-inline: -16px; }
  .app-ui .celestial-detail .wizard-body input[type="checkbox"] { flex: 0 0 20px; padding: 0; border-radius: 3px; }
  .app-ui .celestial-detail .wizard-summary p { min-width: 0; overflow-wrap: anywhere; }
  .app-ui :is(.celestial-detail, .record-page) .checkout-price { display: grid; gap: 10px; }
  .app-ui .celestial-detail .wizard-top { gap: 9px; }
  .app-ui .celestial-detail .preview-wizard .wizard-body > h2 { font-size: 26px; }
  .app-ui .celestial-detail .wizard-summary p { grid-template-columns: 90px minmax(0, 1fr); }
  .app-ui .celestial-detail :is(.product-preview-result > header h2, .product-reading-intro h2) { font-size: 25px; }
  .app-ui .celestial-detail .locked-toc { padding: 18px 16px; }
  .app-ui .celestial-detail .locked-toc h3 { font-size: 21px; }
  .app-ui .celestial-detail .product-topic-checkout { padding: 20px 16px; }
  .app-ui .celestial-detail .product-topic-checkout header > h3 { font-size: 23px; }
  .app-ui .celestial-detail .payment-method-guide { padding: 15px 12px; }
  .app-ui .celestial-detail .checkout-consents { padding: 13px; }
  .app-ui .celestial-detail .checkout-consents label { gap: 10px; }
  .app-ui .celestial-detail .guest-recovery-fields { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .app-ui .celestial-detail .reading-element-row { grid-template-columns: 60px minmax(0, 1fr) 88px; gap: 8px; }
  .app-ui .celestial-detail .reading-element-row > b span { min-width: 44px; }
  .app-ui .celestial-detail .reading-chart-summary { padding: 20px 16px; }
  .app-ui .celestial-detail .reading-pillar-grid article { padding: 17px 9px; }
  body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .reading-qa-sheet { padding: 22px 18px max(22px, env(safe-area-inset-bottom)); border-radius: 10px 10px 0 0; }
  body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .reading-qa-sheet > header { gap: 12px; }
  body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .reading-qa-sheet > header h2 { font-size: 23px; }
  body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .qa-messages article { padding: 14px; }
  body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .qa-user-question { margin-left: 14px; }
  body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer .qa-guide-answer { margin-right: 12px; }
  body.app-ui:has(:is(.celestial-detail, .record-page)) > .ask-selection-chip { bottom: calc(85px + env(safe-area-inset-bottom)); }
}

@media (max-width: 430px) {
  .app-ui .celestial-detail .wizard-body .time-select-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .app-ui .celestial-detail .wizard-body .time-select-row > select:first-child { grid-column: 1 / -1; }
  .app-ui .celestial-detail .locked-toc p { grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; row-gap: 4px; }
  .app-ui .celestial-detail .locked-toc p > b { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .app-ui .celestial-detail .preview-wizard,
  .app-ui .celestial-detail .wizard-progress > i,
  .app-ui .celestial-detail .brand-loading-track progress,
  body.app-ui:has(:is(.celestial-detail, .record-page)) > .reading-qa-layer * { animation: none; transition: none; }
}
/* 2. Center the READING column, rather than centering reading + tool rail.
   These rules apply only to the modern product route, not .record-page.
   Mobile <=640 retains the already-corrected mobile layout. */
@media (min-width: 641px) {
  .app-ui .celestial-detail .product-reading-layout {
    display: grid;
    width: min(720px, 100%);
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
  .app-ui .celestial-detail .product-reading-layout > :is(.product-preview-result, .reading-chart-summary) {
    min-width: 0;
    width: 100%;
    grid-column: 1;
  }
}

/* A 720px reader + two 24px gaps + two symmetric 232px gutters fits at 1280.
   On wider screens the gutters cap at 256px. No transform is used, so fixed
   descendants keep the viewport as their containing block. */
@media (min-width: 1280px) {
  .app-ui .celestial-detail .product-reading-layout {
    width: min(1280px, calc(100vw - 48px));
    margin-inline: calc((100% - min(1280px, calc(100vw - 48px))) / 2);
    grid-template-columns: minmax(0, 1fr) 720px minmax(0, 1fr);
  }
  .app-ui .celestial-detail .product-reading-layout > :is(.product-preview-result, .reading-chart-summary) {
    grid-column: 2;
  }
  .app-ui .celestial-detail .product-reading-side-rail {
    position: sticky;
    z-index: 30;
    inset: 96px auto auto;
    display: grid;
    grid-column: 3;
    align-self: start;
    gap: 12px;
    width: 100%;
    min-width: 0;
    max-height: calc(100svh - 112px);
  }
  .app-ui .celestial-detail .product-reading-side-rail :is(.chapter-nav-toggle, .chapter-nav-scrim) {
    display: none;
  }
  .app-ui .celestial-detail .product-reading-side-rail .chapter-navigator {
    position: relative;
    inset: auto;
    width: 100%;
    max-height: calc(100svh - 258px);
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .app-ui .celestial-detail .product-reading-side-rail .chapter-navigator > header button { display: none; }
  .app-ui .celestial-detail .product-reading-side-rail .chapter-navigator ol { max-height: calc(100svh - 322px); }
  .app-ui .celestial-detail .product-reading-side-rail .reading-quick-tools {
    position: relative;
    z-index: auto;
    inset: auto;
    width: 100%;
  }
}

/* Use the existing collapsible navigator below the true three-column fit.
   Explicitly reset both the old 920px fixed rail and the old 1200px grid rail. */
@media (min-width: 641px) and (max-width: 1279px) {
  .app-ui .celestial-detail .product-reading-side-rail {
    position: static;
    inset: auto;
    display: contents;
    width: auto;
    max-height: none;
  }
  .app-ui .celestial-detail .product-reading-side-rail .chapter-nav-toggle {
    position: fixed;
    display: flex;
    inset: auto 258px 18px auto;
  }
  .app-ui .celestial-detail .product-reading-side-rail .chapter-nav-scrim { display: block; }
  .app-ui .celestial-detail .product-reading-side-rail .chapter-navigator {
    position: fixed;
    z-index: 73;
    inset: auto 18px 140px auto;
    width: min(360px, calc(100vw - 36px));
    max-height: min(68svh, 590px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) scale(.98);
  }
  .app-ui .celestial-detail .product-reading-side-rail .chapter-navigator.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .app-ui .celestial-detail .product-reading-side-rail .chapter-navigator > header button { display: block; }
  .app-ui .celestial-detail .product-reading-side-rail .chapter-navigator ol {
    max-height: calc(min(68svh, 590px) - 64px);
  }
  .app-ui .celestial-detail .product-reading-side-rail .reading-quick-tools {
    position: fixed;
    z-index: 80;
    inset: auto 18px 18px auto;
    width: 220px;
  }
  .app-ui .celestial-detail .product-reading-layout:has(.product-topic-checkout) .product-reading-side-rail,
  body.app-ui:has(.celestial-detail .product-topic-checkout) > .ask-selection-chip { display: none; }
}

/* Keep the close control inside short screens; only the chapter list scrolls. */
@media (max-width: 1279px) {
  .app-ui .celestial-detail .product-reading-side-rail .chapter-navigator {
    --chapter-panel-bottom: 140px;
    display: flex;
    flex-direction: column;
    bottom: var(--chapter-panel-bottom);
    max-height: min(590px, calc(100dvh - var(--chapter-panel-bottom) - max(16px, env(safe-area-inset-top))));
  }
  .app-ui .celestial-detail .product-reading-side-rail .chapter-navigator > header { flex-shrink: 0; }
  .app-ui .celestial-detail .product-reading-side-rail .chapter-navigator ol {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (max-width: 640px) {
  .app-ui .celestial-detail .product-reading-side-rail .chapter-navigator {
    --chapter-panel-bottom: calc(210px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 1279px) and (max-height: 560px) {
  .app-ui .celestial-detail .product-reading-side-rail .chapter-navigator { --chapter-panel-bottom: 16px; }
  .app-ui .celestial-detail .product-reading-side-rail:has(.chapter-navigator.is-open) :is(.reading-quick-tools, .chapter-nav-toggle) { visibility: hidden; }
}
@media (max-width: 640px) and (max-height: 560px) {
  .app-ui .celestial-detail .product-reading-side-rail .chapter-navigator { --chapter-panel-bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* Original rendered style: /app/readings/reading-page.css */
.reading-result-page-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 24px 0 80px; }
.reading-result-page-shell > .reading-back { margin-bottom: 24px; }
.product-reading-failure > [role="alert"] { overflow-wrap: anywhere; word-break: keep-all; }
.product-reading-failure-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; min-width: 0; margin-top: 24px; }
.app-ui .product-preview-result .product-reading-failure-actions > :is(a, button) { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 12px 16px; line-height: 1.6; text-align: center; text-decoration: none; white-space: normal; overflow-wrap: anywhere; word-break: keep-all; }
.product-reading-failure-actions > .product-primary { grid-column: 1 / -1; }
.product-reading-failure-actions > .product-primary:first-child ~ .product-secondary:last-child:nth-child(even) { grid-column: 1 / -1; }
.app-ui .celestial-detail .product-preview-result .product-reading-failure-actions > .product-secondary { min-height: 48px; }
.app-ui .celestial-detail .product-preview-result .product-reading-failure-actions > :is(a, button):focus-visible { outline: 2px solid #e4c28b; outline-offset: 3px; }
.app-ui .celestial-detail .product-restore-state > .product-reading-state-policy { margin: 20px 0 0; font-size: 14px; }
.product-reading-state-policy > a { display: inline-block; padding: 8px 4px; color: var(--reading-gold); line-height: 1.8; text-decoration: underline; text-underline-offset: 4px; }
.app-ui .celestial-detail .product-reading-failure-actions > .product-primary { min-height: 55px; padding: 13px 20px; border: 1px solid #e3c48b; border-radius: 6px; background: #d7b472 url('/art/ui-v2/gold-paper.webp') center / cover no-repeat; color: #261e11; font: 700 18px/1.5 "Gowun Batang", serif; box-shadow: inset 0 1px #f7e2b475, 0 5px 16px #0003; text-shadow: none; }
.app-ui .celestial-detail .product-reading-failure-actions > .product-primary:not(:disabled):hover { filter: brightness(1.07); }
.app-ui .celestial-detail .product-reading-failure-actions > .product-primary:disabled { border-color: #6e624a; background: #453f33; color: #d2c8b6; box-shadow: none; opacity: 1; filter: none; cursor: not-allowed; }
@media (max-width: 480px) { .product-reading-failure-actions { grid-template-columns: minmax(0, 1fr); } }
.reading-loading-screen { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); overflow-y: auto; background: #0b1420; color: #d8dfE7; outline: none; text-align: center; }
.reading-loading-screen .brand-loading { width: min(100%, 560px); }
.reading-loading-screen .brand-loading-copy:only-child { grid-column: 1 / -1; }
.reading-loading-screen > p { max-width: 440px; margin: 0; color: #aebccd; font: 400 14px/1.8 var(--sans); word-break: keep-all; }
.reading-loading-screen > a { padding: 12px 20px; border: 1px solid #bea36660; border-radius: 10px; color: #e1c893; font-size: 14px; }
.reading-loading-screen > a:focus-visible { outline: 2px solid #e1c893; outline-offset: 4px; }
.reading-loading-screen.free-reading-wait { justify-content: flex-start; gap: 20px; }
.free-reading-wait .brand-loading { margin-top: auto; margin-bottom: 0; flex-shrink: 0; }
.free-reading-wait > a, .free-reading-wait > .reading-wait-reassurance:last-child { margin-bottom: auto; }
.free-reading-wait-status { width: min(100%, 560px); flex-shrink: 0; }
.free-reading-wait-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 0; list-style: none; }
.free-reading-wait-steps li { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #8696a9; font: 400 12px/1.5 var(--sans); }
.free-reading-wait-steps li > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #617083; border-radius: 50%; font-variant-numeric: tabular-nums; }
.free-reading-wait-steps li > b { font-weight: 500; word-break: keep-all; }
.free-reading-wait-steps li[data-state="complete"] { color: #c0cbb7; }
.free-reading-wait-steps li[data-state="complete"] > span { border-color: #809074; background: #80907418; }
.free-reading-wait-steps li[data-state="current"] { color: #f0d797; }
.free-reading-wait-steps li[data-state="current"] > span { border-color: #dbc080; background: #dbc08016; animation: reading-stage-pulse 1.8s ease-in-out infinite; }
.free-reading-long-wait { margin: 14px 0 0; padding: 14px 16px; border: 1px solid #bea36650; border-radius: 12px; color: #d8c6a3; font: 400 14px/1.8 var(--sans); word-break: keep-all; overflow-wrap: anywhere; }
@keyframes reading-stage-pulse { 0%, 100% { box-shadow: 0 0 0 0 #dbc08000; } 50% { box-shadow: 0 0 0 5px #dbc08020; } }
@media (max-height: 650px) {
  .reading-loading-screen.free-reading-wait { gap: 14px; padding-block: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-bottom)); }
  .free-reading-wait .brand-loading { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 4px 0; text-align: left; }
  .free-reading-wait .brand-loading-emblem, .free-reading-wait .brand-loading-orbit { width: 56px; height: 56px; }
  .free-reading-wait .brand-loading-emblem > img:first-child { width: 44px; height: 44px; }
  .free-reading-wait .brand-loading-copy h2 { font-size: 20px; }
  .free-reading-wait .brand-loading-copy p { font-size: 14px; }
  .free-reading-wait .brand-loading-copy:only-child { grid-column: 1 / -1; text-align: center; }
  .free-reading-wait .brand-loading-track { grid-column: 1 / -1; }
}
.reading-loading-screen.has-reading-tips { justify-content: flex-start; gap: 18px; }
.reading-loading-screen.has-reading-tips .brand-loading { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 4px 0; margin-top: auto; margin-bottom: 0; text-align: left; }
.reading-loading-screen.has-reading-tips .brand-loading-emblem { width: 72px; height: 72px; }
.reading-loading-screen.has-reading-tips .brand-loading-emblem > img:first-child { width: 56px; height: 56px; }
.reading-loading-screen.has-reading-tips .brand-loading-orbit { width: 72px; height: 72px; }
.reading-loading-screen.has-reading-tips .brand-loading-copy h2 { font-size: 21px; line-height: 1.5; }
.reading-loading-screen.has-reading-tips .brand-loading-copy p { font-size: 14px; line-height: 1.75; }
.reading-loading-screen.has-reading-tips .brand-loading-track { grid-column: 1 / -1; }
.reading-loading-screen.has-reading-tips .brand-loading { flex-shrink: 0; }
.reading-wait-expectation { box-sizing: border-box; width: min(100%, 560px); flex-shrink: 0; padding: 18px 22px; border: 1px solid #d9bd8052; border-radius: 16px; background: #d9bd800c; text-align: left; }
.reading-wait-expectation h3 { margin: 0 0 8px; color: #ead5ae; font: 700 17px/1.6 var(--sans); word-break: keep-all; }
.reading-wait-expectation p { margin: 0; color: #d1dae3; font: 400 15px/1.8 var(--sans); word-break: keep-all; overflow-wrap: anywhere; }
.reading-wait-expectation p + p { margin-top: 8px; }
.reading-wait-expectation strong { color: #f2d795; font-weight: 700; white-space: nowrap; }
.reading-loading-screen.has-reading-tips > a { margin-bottom: auto; }
.reading-wait-tips { box-sizing: border-box; width: min(100%, 560px); flex-shrink: 0; padding: 22px 24px 18px; border: 1px solid #bca36c55; border-radius: 20px; background: linear-gradient(135deg, #1b2937, #101e2d); text-align: left; }
.reading-wait-tip-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #dcca9f; font: 500 14px/1.5 var(--sans); }
.reading-wait-tip-heading > small { color: #a5b3c2; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 13px; }
.reading-wait-tip-copy { min-height: 168px; padding: 20px 0 12px; animation: reading-tip-appear .25s ease-out; }
.reading-wait-tip-copy > span { color: #aebbca; font: 400 13px/1.5 var(--sans); }
.reading-wait-tip-copy h3 { margin: 7px 0 10px; color: #ead5ae; font: 700 21px/1.5 "Gowun Batang", serif; }
.reading-wait-tip-copy p { margin: 0; color: #d1dae3; font: 400 16px/1.85 var(--sans); word-break: keep-all; overflow-wrap: anywhere; }
.reading-wait-tip-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; border-top: 1px solid #a2b0bf25; padding-top: 12px; }
.reading-wait-tip-controls > small { margin-right: auto; color: #9eafc0; font: 400 13px/1.5 var(--sans); }
.reading-wait-tip-controls > button { display: inline-flex; justify-content: center; align-items: center; gap: 5px; min-height: 44px; padding: 8px 12px; border: 1px solid #ad976752; border-radius: 10px; background: #d8bc7f08; color: #e4cfaa; font: 500 14px/1.5 var(--sans); cursor: pointer; }
.reading-wait-tip-controls > button:hover { background: #d8bc7f18; }
.reading-wait-tip-controls > button:focus-visible { outline: 2px solid #e1c893; outline-offset: 3px; }
.reading-wait-tip-note { display: block; padding-top: 12px; color: #9aabbb; font: 400 12px/1.6 var(--sans); }
@keyframes reading-tip-appear { from { opacity: .3; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .reading-loading-screen.has-reading-tips { padding-left: 16px; padding-right: 16px; gap: 14px; }
  .reading-wait-tips { padding: 18px 18px 14px; border-radius: 16px; }
  .reading-wait-tip-copy { min-height: 190px; padding-top: 16px; }
  .reading-wait-tip-copy h3 { font-size: 20px; }
  .reading-wait-tip-controls > small { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .reading-wait-tip-copy, .free-reading-wait-steps li[data-state="current"] > span, .free-reading-wait .brand-loading-orbit, .free-reading-wait progress:indeterminate { animation: none; } }
.numerology-preview { margin: 36px 0; padding: 28px; border: 1px solid #b69a6352; border-radius: 16px; background: #101d2d; }
.numerology-preview > small { color: #ceb883; }
.numerology-preview h3 { margin: 8px 0 20px; color: #ebd9b3; font: 700 23px/1.6 "Gowun Batang", serif; word-break: keep-all; }
.numerology-preview p { font: 400 16px/1.95 var(--sans); word-break: keep-all; }
.numerology-preview .numerology-preview-note { color: #a8b7c7; font-size: 14px; }
.reading-purchase-offer { margin: 28px 0 18px; padding: 28px 24px 24px; border: 1px solid #d075705c; border-radius: 14px; background: linear-gradient(145deg, #211c26, #101722 70%); text-align: center; }
.reading-purchase-offer .reading-offer-label { margin: 0; color: #d3c4c2; font: 500 14px/1.6 var(--sans); }
.reading-purchase-offer .reading-offer-price { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 16px 0 8px; }
.reading-reference-price { color: #a4aebc; font: 400 14px/1.5 var(--sans); }
.reading-reference-price s { margin-left: 3px; text-decoration-thickness: 1px; }
.reading-discount-rate { padding: 4px 7px; border-radius: 6px; background: #e85472; color: #fff; font: 800 15px/1.4 var(--sans); }
.reading-delivery-note { max-width: 580px; margin: 10px auto 20px; color: #acb9c8; font: 400 13px/1.8 var(--sans); word-break: keep-all; }
.reading-offer-price strong { color: #ff858b; font: 800 clamp(32px, 5vw, 40px)/1.25 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.reading-offer-price strong > span { margin-left: 3px; font-size: .58em; font-weight: 600; }
.reading-purchase-offer .reading-offer-note { margin: 10px 0 22px; color: #bec5cf; font: 400 13px/1.6 var(--sans); }
.reading-purchase-offer > .product-primary { width: 100%; min-height: 54px; margin: 0; justify-content: center; gap: 12px; }
@media (max-width: 640px) {
  .reading-result-page-shell { width: calc(100% - 24px); padding: 16px 0 112px; }
  .numerology-preview { padding: 22px 18px; }
  .numerology-preview h3 { font-size: 21px; }
}

/* Original rendered style: /app/products/store.css */
/* ============================================================================
   묵연록 스토어프론트 — 디자인 시스템 (G20)
   1) 토큰   2) 앱 셸   3) 스토어프론트   4) 상세   5) 폼·결과   6) 반응형
   이 파일이 유일한 스토어 스타일입니다. 이전 G17/G18 레이어는 제거되었습니다.
   ============================================================================ */

:root {
  color-scheme: dark;

  /* ── 표면 ── */
  --ink-900: #040a10;
  --ink-800: #07121b;
  --ink-700: #0a1926;
  --ink-600: #0f2432;
  --ink-500: #163142;
  --line-1: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .13);
  --line-3: rgba(255, 255, 255, .2);

  /* ── 강조 ── */
  --gold: #cdae74;
  --gold-hi: #e3c897;
  --gold-soft: rgba(205, 174, 116, .12);
  --gold-line: rgba(205, 174, 116, .3);
  --gold-deep: #a8873f;
  --gold-ink: #14191e;
  --paper: #f4ede2;
  --danger: #ffb0a6;

  /* ── 글자 ── */
  --tx-1: #f7f2ea;
  --tx-2: #c2cbd0;
  --tx-3: #8b9aa2;

  /* ── 간격 (4px 스케일) ── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

  /* ── 라운드 ── */
  --r-s: 10px; --r-m: 14px; --r-l: 20px; --r-full: 999px;

  /* ── 그림자 ── */
  --e1: 0 2px 10px rgba(0, 0, 0, .22);
  --e2: 0 20px 48px rgba(0, 0, 0, .36);

  /* ── 타이포 ── */
  --serif: "Gowun Batang", serif;
  --sans: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --f-display: 700 clamp(28px, 3.3vw, 44px)/1.22 var(--serif);
  --f-h1: 700 clamp(24px, 2.6vw, 34px)/1.28 var(--serif);
  --f-h2: 700 clamp(19px, 1.9vw, 25px)/1.38 var(--serif);
  --f-h3: 700 17px/1.45 var(--serif);
  --f-lead: 400 15px/1.75 var(--sans);
  --f-body: 400 14px/1.7 var(--sans);
  --f-sm: 400 12px/1.6 var(--sans);
  --f-xs: 800 11px/1.5 var(--sans);
  --tight: -.025em;

  /* ── 레이아웃 ── */
  --w-page: 1200px;
  --w-read: 760px;
  --h-header: 60px;
  --h-tab: 62px;
  --pad-x: clamp(14px, 3vw, 24px);

  /* ── 모션 ── */
  --mo: 180ms cubic-bezier(.2, .65, .3, 1);

  /* 하위 호환 — 기존 마크업이 참조하는 이름 유지 */
  --app-night: var(--ink-900);
  --app-surface: var(--ink-700);
  --app-surface-2: var(--ink-600);
  --app-paper: var(--paper);
  --app-gold: var(--gold);
  --app-gold-strong: var(--gold-hi);
  --app-line: var(--gold-line);
  --app-copy: var(--tx-1);
  --app-muted: var(--tx-2);
  --product-accent: var(--gold);
  --ui-button-gold: url('/ui-assets/button-gold.webp');
  --ui-button-ink: url('/ui-assets/button-ink.webp');
}

/* ============================================================================
   2. 앱 셸
   ============================================================================ */
.product-store,
.product-detail,
.product-home-stage {
  min-height: 100svh;
  background:
    radial-gradient(1100px 520px at 50% -220px, rgba(64, 106, 122, .2), transparent),
    var(--ink-900);
  color: var(--tx-1);
  font-family: var(--sans);
  overflow-x: clip;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}
.product-store,
.product-home-stage { padding-bottom: 0; }
.story-shell.app-home-shell { width: 100%; max-width: none; margin: 0; background: var(--ink-900); box-shadow: none; }

.product-store a,
.product-detail a,
.product-home-stage a { color: inherit; text-decoration: none; }
.product-store button,
.product-detail button,
.product-home-stage button { font-family: inherit; touch-action: manipulation; }
.product-store :focus-visible,
.product-detail :focus-visible,
.product-home-stage :focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; border-radius: 6px; }

.product-store h1, .product-store h2, .product-store h3, .product-store p,
.product-detail h1, .product-detail h2, .product-detail h3, .product-detail p,
.product-home-stage h1, .product-home-stage h2, .product-home-stage h3, .product-home-stage p {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.product-store h1, .product-store h2,
.product-detail h1, .product-detail h2 { text-wrap: balance; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* 생성형 이미지로 만든 공용 아이콘 시트: 한 번 내려받아 모든 화면에서 재사용합니다. */
.ui-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  background-image: url('/ui-assets/ui-icons.webp');
  background-repeat: no-repeat;
  background-size: 400% 300%;
  vertical-align: middle;
}
.ui-icon-search { background-position: 0 0; }
.ui-icon-pages { background-position: 33.333% 0; }
.ui-icon-support { background-position: 66.667% 0; }
.ui-icon-back { background-position: 100% 0; }
.ui-icon-close { background-position: 0 50%; }
.ui-icon-forward { background-position: 33.333% 50%; }
.ui-icon-sparkle { background-position: 66.667% 50%; }
.ui-icon-question { background-position: 100% 50%; }
.ui-icon-chapters { background-position: 0 100%; }
.ui-icon-lock { background-position: 33.333% 100%; }
.ui-icon-account { background-position: 66.667% 100%; }
.ui-icon-home { background-position: 100% 100%; }

/* ── 상단 헤더 ── */
.product-app-header {
  position: sticky;
  z-index: 60;
  top: 0;
  display: flex;
  height: var(--h-header);
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  padding-inline: max(var(--pad-x), calc((100vw - var(--w-page)) / 2));
  border-bottom: 1px solid var(--line-1);
  background: color-mix(in srgb, var(--ink-900) 88%, transparent);
  backdrop-filter: blur(16px);
}
.product-app-brand { display: flex; min-height: 44px; align-items: center; gap: 10px; color: var(--gold-hi) !important; font: 700 18px var(--serif); letter-spacing: .04em; }
.product-app-brand > span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #02070b url('/brand-icon.png') center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(224, 189, 116, .48), 0 6px 18px rgba(0, 0, 0, .38);
}
.product-desktop-nav { display: flex; align-self: stretch; align-items: center; gap: var(--s8); }
.product-desktop-nav a {
  display: inline-flex;
  align-items: center;
  height: 100%;
  border-bottom: 2px solid transparent;
  color: var(--tx-3);
  font: 700 14px/1 var(--sans);
  transition: color var(--mo);
}
.product-desktop-nav a:hover { color: var(--tx-1); }
.product-desktop-nav a.active { border-bottom-color: var(--gold); color: var(--gold-hi); }
.product-header-actions { display: flex; align-items: center; gap: var(--s2); }
.product-header-actions a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--tx-2);
  font: var(--f-xs);
}
.product-header-search { gap: var(--s1); padding: 0 var(--s2); }
.product-header-search .ui-icon { width: 19px; height: 19px; }
.product-header-account {
  min-width: 78px;
  padding: 0 var(--s3);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-s);
  color: var(--gold-hi);
  transition: background var(--mo);
}
.product-header-account:hover { background: var(--gold-soft); }

/* ── 하단 탭 (모바일) ── */
.product-bottom-nav {
  position: fixed;
  z-index: 70;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  height: calc(var(--h-tab) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--line-1);
  background: color-mix(in srgb, var(--ink-900) 94%, transparent);
  backdrop-filter: blur(18px);
}
.product-bottom-nav a {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--tx-3);
  font: 800 10px/1 var(--sans);
}
.product-bottom-nav a.active { color: var(--gold-hi); }
.product-bottom-nav i.ui-icon { width: 24px; height: 24px; }

/* ── 안내자 배지 (공용) ── */
.product-guide-artwork { display: block; overflow: hidden; }
.product-guide-artwork > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.product-guide-slot,
.product-guide-identity,
.detail-guide-slot {
  position: absolute;
  z-index: 3;
  top: var(--s3);
  right: var(--s3);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 5px var(--s3) 5px 5px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-full);
  background: rgba(3, 10, 16, .74);
  backdrop-filter: blur(10px);
}
.product-guide-slot > i,
.product-guide-identity > i,
.detail-guide-slot > i {
  overflow: hidden;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ink-600);
}
.product-guide-avatar,
.product-guide-avatar > img { width: 100%; height: 100%; }
.product-guide-slot > span,
.product-guide-identity > span,
.detail-guide-slot > span { display: grid; gap: 1px; }
.product-guide-slot small,
.product-guide-identity small,
.detail-guide-slot small { color: var(--tx-3); font: 800 9px/1.3 var(--sans); }
.product-guide-slot b,
.product-guide-identity b,
.detail-guide-slot b { color: var(--tx-1); font: 700 13px/1.3 var(--serif); }
.product-guide-slot.compact { padding: 4px var(--s2) 4px 4px; }
.product-guide-slot.compact > i { width: 25px; height: 25px; }
.product-guide-slot.compact small { display: none; }
.product-guide-slot.compact b { font-size: 12px; }
.product-guide-identity { position: relative; top: auto; right: auto; }
.qa-guide-avatar { overflow: hidden; width: 40px; height: 40px; border-radius: 50%; background: var(--ink-600); }
.reading-qa-sheet .qa-guide-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.reading-qa-sheet[data-guide-id="biyeon"] .qa-guide-avatar img { object-position: 50% 31%; transform: scale(1.14); }

/* ── 버튼 ── */
.product-primary {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0 var(--s6);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background-color: #bd9b58;
  background-image: var(--ui-button-gold);
  background-position: center;
  background-size: cover;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 8px 20px -16px rgba(0, 0, 0, .9);
  color: var(--gold-ink);
  cursor: pointer;
  font: 800 14px/1 var(--sans);
  letter-spacing: .005em;
  transition: background var(--mo), box-shadow var(--mo), transform var(--mo);
}
.product-primary:hover {
  filter: brightness(1.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 10px 22px -16px rgba(0, 0, 0, .9);
}
.product-primary:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18); }
.product-primary:disabled {
  border-color: var(--line-1);
  background: var(--ink-600);
  filter: none;
  box-shadow: none;
  color: var(--tx-3);
  cursor: not-allowed;
}

/* 이동 링크 — 실제 행동이 아니라 아래로 보내는 역할이라 채우지 않습니다 */
.product-jump {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0 var(--s6);
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  background-color: var(--ink-700);
  background-image: var(--ui-button-ink);
  background-position: center;
  background-size: cover;
  color: var(--gold-hi);
  font: 800 14px/1 var(--sans);
  transition: border-color var(--mo), background var(--mo);
}
.product-jump:hover { border-color: var(--gold); filter: brightness(1.18); }
.product-secondary {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-s);
  background-color: var(--ink-700);
  background-image: var(--ui-button-ink);
  background-position: center;
  background-size: cover;
  color: var(--gold);
  cursor: pointer;
  font: 800 13px/1 var(--sans);
}
.product-error { color: var(--danger); }

/* ============================================================================
   3. 스토어프론트 — 홈 / 상품 목록
   ============================================================================ */
.product-discovery { width: 100%; overflow: hidden; }
.featured-products,
.store-catalog { width: min(100%, var(--w-page)); margin: 0 auto; }

/* ── 안내 스트립 ── */
.store-promotion {
  display: flex;
  width: min(calc(100% - 2 * var(--pad-x)), var(--w-page));
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin: var(--s4) auto 0;
  padding: var(--s3) var(--s5);
  border: 1px solid var(--line-2);
  border-radius: var(--r-m);
  background: linear-gradient(100deg, var(--ink-600), var(--ink-700) 72%);
}
.store-promotion div { display: grid; gap: 2px; min-width: 0; }
.store-promotion b { color: var(--tx-1); font: 700 15px/1.4 var(--serif); }
.store-promotion span { color: var(--tx-3); font: var(--f-sm); }
.store-promotion a {
  display: inline-flex;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s4);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-full);
  color: var(--gold-hi);
  font: 800 12px/1 var(--sans);
  transition: background var(--mo);
}
.store-promotion a:hover { background: var(--gold-soft); }
.store-promotion i { font-style: normal; }

/* ── 섹션 머리 ── */
.featured-products { padding: var(--s8) var(--pad-x) var(--s3); }
.featured-heading { max-width: 640px; }
.featured-heading small,
.catalog-heading small { color: var(--gold); font: 900 11px/1.5 var(--sans); letter-spacing: .1em; }
.featured-heading h1 { margin: var(--s2) 0 var(--s2); font: var(--f-display); letter-spacing: var(--tight); }
.featured-heading p { margin: 0 0 var(--s5); color: var(--tx-3); font: var(--f-body); }

/* ── 추천 카드 3-up ──
   목록 카드와 같은 뼈대를 쓰되 가로가 넓고 글자가 큽니다. */
.featured-product-stage { display: block; }
.featured-product-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
}
.featured-product-card {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--line-1);
  border-radius: var(--r-l);
  background: var(--ink-700);
  box-shadow: var(--e1);
  transition: transform var(--mo), border-color var(--mo), box-shadow var(--mo);
}
.featured-product-rail .featured-product-card,
.featured-product-rail .featured-product-card:not(.selected) { display: flex; }
.featured-product-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--product-accent) 55%, transparent);
  box-shadow: var(--e2);
}
.featured-product-card::after { display: none; }

/* 아트가 없거나 아직 로드되지 않은 카드도 비어 보이지 않게 — 상품 강조색으로 채웁니다 */
.featured-product-visual,
.store-card-image {
  background:
    radial-gradient(120% 92% at 50% 0, color-mix(in srgb, var(--product-accent) 24%, transparent), transparent 72%),
    linear-gradient(158deg, var(--ink-500), var(--ink-800));
}
.featured-product-visual { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.featured-guide-art { position: absolute; inset: 0; }
.featured-guide-art > img { object-position: 50% 15%; }
.featured-guide-art::after,
.detail-guide-art::after,
.result-guide-art::after,
.loading-guide-art::after { position: absolute; inset: 0; content: ""; pointer-events: none; }
.featured-guide-art::after {
  background: linear-gradient(180deg, transparent 42%, rgba(6, 16, 24, .82) 96%, var(--ink-700));
}
.featured-product-visual > .product-guide-slot { top: auto; right: auto; bottom: var(--s3); left: var(--s3); }

.featured-product-copy {
  position: relative;
  inset: auto;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--s5);
}
.featured-product-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.featured-product-meta span {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 0 var(--s3);
  border: 1px solid color-mix(in srgb, var(--product-accent) 46%, transparent);
  border-radius: var(--r-full);
  color: var(--tx-2);
  font: 800 10px/1 var(--sans);
}
.featured-product-meta em { color: var(--gold-hi); font: 800 10px/1 var(--sans); font-style: normal; }
.featured-product-copy > small { margin-top: var(--s3); color: var(--tx-3); font: 700 11px/1.5 var(--sans); }
.featured-product-card h2 {
  margin: var(--s2) 0 var(--s2);
  font: 700 clamp(21px, 1.7vw, 25px)/1.32 var(--serif);
  letter-spacing: var(--tight);
}
.featured-product-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--tx-2);
  font: var(--f-sm);
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.featured-product-facts { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s3); }
.featured-product-facts span {
  padding: 5px var(--s2);
  border-radius: var(--r-s);
  background: var(--line-1);
  color: var(--tx-3);
  font: 800 10px/1.3 var(--sans);
}
.featured-product-card strong { display: none; }
.featured-product-card a {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s4);
  border-radius: var(--r-s);
  background: var(--gold-soft);
  color: var(--gold-hi);
  font: 900 13px/1 var(--sans);
  transition: background var(--mo), color var(--mo);
}
.featured-product-card:hover a { background: linear-gradient(180deg, #cdb180, #b89a62); color: var(--gold-ink); }
.featured-product-card a b { font-size: 17px; line-height: 1; }

.featured-rail-dots { display: none; }
.product-trust-strip { display: flex; justify-content: center; gap: var(--s2); margin-top: var(--s6); }
.product-trust-strip span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 var(--s3);
  border: 1px solid var(--line-1);
  border-radius: var(--r-full);
  color: var(--tx-3);
  font: 700 11px/1 var(--sans);
}

/* ── 목록 ── */
.store-catalog { padding: var(--s10) var(--pad-x) var(--s16); }
.catalog-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); }
.catalog-heading h2 { margin: var(--s1) 0 0; font: var(--f-h1); letter-spacing: var(--tight); }
.catalog-heading label { display: block; }
.catalog-heading input {
  width: min(300px, 42vw);
  min-height: 42px;
  padding: 0 var(--s4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  background: var(--ink-800);
  color: var(--tx-1);
  font: var(--f-body);
}
.catalog-heading input::placeholder { color: var(--tx-3); }
.catalog-heading input:focus { border-color: var(--gold); outline: 0; box-shadow: 0 0 0 3px var(--gold-soft); }

.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s5);
  border-bottom: 1px solid var(--line-1);
}
.catalog-discovery { display: flex; align-items: center; gap: var(--s6); }
.catalog-discovery button {
  min-height: 46px;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--tx-3);
  cursor: pointer;
  font: 800 14px/1 var(--sans);
  transition: color var(--mo);
}
.catalog-discovery button:hover { color: var(--tx-1); }
.catalog-discovery button.selected { border-bottom-color: var(--gold); color: var(--gold-hi); }
.catalog-toolbar > a { color: var(--tx-3); font: 800 12px/1 var(--sans); }

.catalog-sticky {
  position: sticky;
  z-index: 30;
  top: calc(var(--h-header) - 1px);
  margin-inline: calc(-1 * var(--pad-x));
  padding-inline: var(--pad-x);
  background: color-mix(in srgb, var(--ink-900) 92%, transparent);
  backdrop-filter: blur(14px);
}

.catalog-filters { display: flex; gap: var(--s2); margin: var(--s4) 0 var(--s5); overflow-x: auto; scrollbar-width: none; }
.catalog-filters::-webkit-scrollbar { display: none; }
.catalog-filters button,
.catalog-empty button {
  min-height: 36px;
  flex: 0 0 auto;
  padding: 0 var(--s4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--tx-2);
  cursor: pointer;
  font: 800 12px/1 var(--sans);
  transition: border-color var(--mo), background var(--mo), color var(--mo);
}
.catalog-filters button:hover { border-color: var(--line-3); }
.catalog-filters button.selected { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-hi); }

.store-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.store-grid article {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--line-1);
  border-radius: var(--r-m);
  background: var(--ink-700);
  transition: transform var(--mo), border-color var(--mo);
}
.store-grid article:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--product-accent) 55%, transparent);
}
.store-grid article.premium-product { border-color: var(--gold-line); }
.featured-product-card.premium { border-color: var(--gold-line); }
.featured-product-card.premium .featured-product-copy {
  background: linear-gradient(180deg, rgba(224, 189, 116, .06), transparent 60%), var(--ink-700);
}
.store-card-image { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.store-card-image > .product-guide-artwork { position: absolute; inset: 0; }
.store-card-image > .product-guide-artwork::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(6, 16, 24, .8));
  content: "";
}
.store-card-image > .product-guide-artwork > img { object-position: 50% 14%; transition: transform 420ms ease; }
.store-grid article:hover .store-card-image > .product-guide-artwork > img { transform: scale(1.04); }
.store-card-image > span:not(.product-guide-slot) {
  position: absolute;
  z-index: 2;
  top: var(--s2);
  left: var(--s2);
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 var(--s2);
  border: 1px solid color-mix(in srgb, var(--product-accent) 50%, transparent);
  border-radius: var(--r-full);
  background: rgba(4, 11, 18, .76);
  color: var(--tx-1);
  font: 900 10px/1 var(--sans);
}
.store-card-image > .product-guide-slot { top: auto; right: var(--s2); bottom: var(--s2); }

.store-card-body { display: flex; min-height: 0; flex: 1; flex-direction: column; padding: var(--s4); }
.store-card-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.store-card-meta small { color: var(--tx-3); font: 800 10px/1.4 var(--sans); }
.store-card-meta span {
  padding: 3px var(--s2);
  border-radius: var(--r-full);
  background: #27523d;
  color: #d6f5e4;
  font: 900 9px/1.4 var(--sans);
}
.store-grid h3 { margin: var(--s2) 0 var(--s1); font: 700 19px/1.35 var(--serif); letter-spacing: var(--tight); }
.store-card-body > strong { color: var(--gold-hi); font: 700 13px/1.5 var(--serif); }
.store-grid p {
  display: -webkit-box;
  overflow: hidden;
  margin: var(--s2) 0 0;
  color: var(--tx-3);
  font: var(--f-sm);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.store-grid footer { display: block; margin-top: auto; padding-top: var(--s4); }
.store-grid footer > b { display: none; }
.store-grid footer a {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  border-radius: var(--r-s);
  background: var(--gold-soft);
  color: var(--gold-hi);
  font: 900 12px/1 var(--sans);
  transition: background var(--mo), color var(--mo);
}
.store-grid article:hover footer a { background: linear-gradient(180deg, #cdb180, #b89a62); color: var(--gold-ink); }
.store-grid footer a i { font-size: 16px; font-style: normal; }

.catalog-empty {
  padding: var(--s16) var(--s6);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-l);
  text-align: center;
}
.catalog-empty b { font: var(--f-h3); }
.catalog-empty p { margin: var(--s2) 0 var(--s5); color: var(--tx-3); }

/* ============================================================================
   4. 상세 페이지
   ============================================================================ */
.product-detail { padding-bottom: var(--s16); }

.detail-hero { padding: var(--s6) var(--pad-x) var(--s4); }
.detail-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1fr);
  width: min(100%, 1120px);
  min-height: 500px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line-1);
  border-radius: var(--r-l);
  background: var(--ink-700);
  box-shadow: var(--e2);
}
.detail-hero-visual { position: relative; min-height: 500px; overflow: hidden; background: var(--ink-600); }
.detail-guide-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.detail-guide-art > img { object-position: 50% 12%; }
.detail-guide-art::after { background: linear-gradient(180deg, transparent 66%, rgba(5, 13, 20, .6)); }
.detail-hero-visual > .detail-guide-slot { top: auto; right: var(--s5); bottom: var(--s5); }

.detail-hero-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: var(--s10) clamp(var(--s6), 3vw, 44px);
  background:
    radial-gradient(520px 320px at 100% 0, color-mix(in srgb, var(--product-accent) 14%, transparent), transparent),
    var(--ink-700);
}
.detail-hero-copy { display: block; padding: 0; }
.detail-hero-copy > small {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 var(--s3);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-full);
  color: var(--gold);
  font: 900 11px/1 var(--sans);
  letter-spacing: .06em;
}
.detail-hero h1 { margin: var(--s4) 0 var(--s2); font: 700 clamp(32px, 3.6vw, 48px)/1.18 var(--serif); letter-spacing: -.032em; }
.detail-hero h2 { max-width: 100%; margin: 0; font: var(--f-h2); color: var(--gold-hi); }
.detail-hero-copy > p { margin: var(--s4) 0 0; color: var(--tx-2); font: var(--f-body); }

.detail-purchase-panel {
  display: block;
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-1);
}
.detail-purchase-panel > small { color: var(--gold); font: var(--f-xs); }
.detail-purchase-panel > h3 { margin: var(--s2) 0 var(--s4); font: var(--f-h3); }
.detail-hero-facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s4); }
.detail-hero-facts b { width: 100%; color: var(--gold-hi); font: 700 30px/1.2 var(--serif); }
.detail-hero-facts span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 var(--s2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  color: var(--tx-3);
  font: 800 11px/1 var(--sans);
}
.detail-purchase-panel .product-jump { width: 100%; }
.detail-purchase-panel > p { margin: var(--s3) 0 0; color: var(--tx-3); font: 400 11px/1.6 var(--sans); }

.detail-hero-name { margin: var(--s2) 0 0 !important; color: var(--tx-3); font: 800 12px/1.5 var(--sans) !important; }

/* 접히는 상세 — 결정에 필요한 것만 펼쳐 봅니다 */
.detail-folds { display: grid; gap: var(--s2); }
.detail-folds > details {
  overflow: hidden;
  border: 1px solid var(--line-1);
  border-radius: var(--r-m);
  background: var(--ink-800);
}
.detail-folds > details[open] { border-color: var(--gold-line); }
.detail-folds > details > summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  color: var(--tx-1);
  cursor: pointer;
  font: 700 15px/1.5 var(--serif);
  list-style: none;
}
.detail-folds > details > summary::-webkit-details-marker { display: none; }
.detail-folds > details > summary::after {
  margin-left: auto;
  color: var(--tx-3);
  content: "＋";
  font: 400 17px/1 var(--sans);
}
.detail-folds > details[open] > summary::after { content: "－"; color: var(--gold-hi); }
.detail-folds > details > summary > span {
  min-width: 22px;
  padding: 2px var(--s2);
  border-radius: var(--r-full);
  background: var(--line-1);
  color: var(--tx-3);
  font: 800 11px/1.6 var(--sans);
  text-align: center;
}
.detail-folds > details > summary + *,
.detail-folds > details > .toc-grid,
.detail-folds > details > details { margin: 0 var(--s5) var(--s5); }
.detail-folds .fold-note { margin: 0 var(--s5) var(--s3); color: var(--tx-3); font: var(--f-sm); }
.detail-folds .includes,
.detail-folds .reason-grid,
.detail-folds .product-method > div { margin: 0 var(--s5) var(--s5); }
.detail-folds .faq > details { border-top: 1px solid var(--line-1); border-radius: 0; padding: var(--s3) 0; }
.detail-folds .faq > details > summary { min-height: 40px; font: 800 13px/1.5 var(--sans); }

.detail-related h2 { margin: 0 0 var(--s4); font: var(--f-h2); letter-spacing: var(--tight); }

.detail-glance {
  display: none;
}
.detail-glance p {
  margin: 0;
  padding: var(--s4);
  border: 1px solid var(--line-1);
  border-radius: var(--r-m);
  background: var(--ink-800);
  color: var(--tx-3);
  font: var(--f-sm);
}
.detail-glance b { display: block; margin-bottom: var(--s1); color: var(--gold-hi); font: 700 14px/1.4 var(--serif); }

.detail-body {
  display: block;
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: var(--s6) var(--pad-x) 0;
}
.detail-concerns {
  width: min(100%, 1040px);
  margin: var(--s6) auto 0;
  padding: clamp(var(--s6), 3vw, var(--s8));
  border: 1px solid var(--gold-line);
  border-radius: var(--r-l);
  background:
    radial-gradient(460px 150px at 50% 0, color-mix(in srgb, var(--product-accent) 10%, transparent), transparent 74%),
    linear-gradient(160deg, color-mix(in srgb, var(--ink-600) 74%, var(--ink-800)), var(--ink-800));
  box-shadow: var(--e1);
}
.detail-concerns-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  margin-bottom: var(--s6);
}
.detail-concerns-mark {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-s);
  background: var(--gold-soft);
  color: var(--gold-hi);
  place-items: center;
}
.detail-concerns h2 { margin: 0; font: var(--f-h2); letter-spacing: var(--tight); }
.detail-concern-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.detail-concern-list p {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  min-height: 78px;
  align-items: center;
  gap: var(--s3);
  margin: 0;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line-1);
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--ink-900) 58%, transparent);
  color: var(--tx-2);
  font: 500 14px/1.6 var(--sans);
  word-break: keep-all;
  text-align: left;
}
.detail-concern-list p:hover { border-color: var(--gold-line); background: color-mix(in srgb, var(--ink-600) 72%, transparent); }
.detail-concern-list i { color: var(--gold); }

.detail-chapters {
  width: min(100%, 900px);
  margin: var(--s8) auto 0;
  padding: clamp(var(--s5), 5vw, var(--s8));
  border: 1px solid var(--line-1);
  border-radius: var(--r-l);
  background: var(--ink-700);
}
.detail-chapters > header { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s5); }
.detail-chapters-mark {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-s);
  color: var(--gold-hi);
  place-items: center;
  font: 700 16px/1 var(--serif);
}
.detail-chapters header small { color: var(--gold); font: 800 10px/1.4 var(--sans); letter-spacing: .08em; }
.detail-chapters h2 { margin: var(--s1) 0 0; font: var(--f-h2); letter-spacing: var(--tight); }
.detail-chapters ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); margin: 0; padding: 0; list-style: none; }
.detail-chapters li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 58px;
  align-items: center;
  gap: var(--s3);
  border-top: 1px solid var(--line-1);
}
.detail-chapters li > span { color: var(--gold); font: 800 11px/1 var(--sans); }
.detail-chapters li > b { color: var(--tx-2); font: 600 14px/1.55 var(--sans); word-break: keep-all; }
.detail-body-main { min-width: 0; }
.detail-section,
#preview-form { width: min(100%, var(--w-read)); margin: 0 auto; padding: var(--s12) 0; }
.detail-body .detail-section,
.detail-body .detail-related { width: 100%; padding: 0; }
.detail-body #preview-form { width: min(100%, 780px); padding: 0; }
.detail-body #preview-form:has(.product-reading-layout) { width: 100%; }
.detail-body > section + section,
.detail-body > .detail-folds,
.detail-body > .detail-related { margin-top: var(--s8); }
.detail-section > h2 { margin: 0 0 var(--s6); font: var(--f-h1); letter-spacing: var(--tight); }
.detail-section > h3 { margin: var(--s8) 0 var(--s4); font: var(--f-h3); }
.detail-section blockquote {
  margin: 0 0 var(--s8);
  padding: var(--s6);
  border: 0;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  background: var(--ink-600);
  color: #fff3e0;
  font: 700 17px/1.8 var(--serif);
}

.reason-grid,
.includes,
.product-method > div,
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.reason-grid p,
.includes article,
.product-method article,
.related-grid a {
  margin: 0;
  padding: var(--s5);
  border: 1px solid var(--line-1);
  border-radius: var(--r-m);
  background: var(--ink-800);
  color: var(--tx-2);
  font: var(--f-body);
}
.includes article h3,
.product-method article h3 { margin: 0 0 var(--s3); color: var(--tx-1); font: var(--f-h3); }
.includes article p,
.product-method article p { margin: var(--s2) 0 0; }
.related-grid a { display: grid; gap: var(--s1); transition: border-color var(--mo); }
.related-grid a:hover { border-color: var(--gold-line); }
.related-grid small,
.product-method b { color: var(--gold); }
.related-grid b { color: var(--tx-1); font: var(--f-h3); }
.related-grid span { color: var(--tx-3); font: var(--f-sm); }

.toc-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.toc-grid p,
.locked-toc p {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  min-height: 58px;
  align-items: center;
  gap: var(--s3);
  margin: 0;
  padding: var(--s3) var(--s1);
  border-bottom: 1px solid var(--line-1);
}
.toc-grid span,
.locked-toc span { color: var(--gold); font: 800 12px/1 var(--sans); }
.toc-grid b,
.locked-toc b { font: 400 14px/1.5 var(--sans); }
.toc-grid small,
.locked-toc small { color: var(--tx-3); font: 800 10px/1 var(--sans); }
.locked-toc { margin-top: var(--s8); }

.faq details { padding: var(--s5) var(--s1); border-top: 1px solid var(--line-1); }
.faq summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 800 14px/1.5 var(--sans); }
.faq p { margin: var(--s2) 0 0; color: var(--tx-3); font: var(--f-body); }

.detail-sticky-purchase {
  position: sticky;
  top: calc(var(--h-header) + var(--s5));
  align-self: start;
  margin-top: var(--s12);
  padding: var(--s5);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-m);
  background: var(--ink-600);
}
.detail-sticky-purchase small { color: var(--gold); font: var(--f-xs); }
.detail-sticky-purchase h3 { margin: var(--s2) 0 0; font: var(--f-h3); }
.detail-sticky-purchase strong { display: block; margin: var(--s4) 0; color: var(--gold-hi); font: 700 24px/1.2 var(--serif); }
.detail-sticky-purchase a {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(180deg, #cdb180, #b89a62);
  color: var(--gold-ink);
  font: 800 13px/1 var(--sans);
}
.detail-sticky-purchase p { margin: var(--s3) 0 0; color: var(--tx-3); font: 400 10px/1.6 var(--sans); }

.detail-mobile-cta { display: none; }
.fixed-product-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin: var(--s5) 0 var(--s6);
  padding: var(--s4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-m);
  background: var(--ink-800);
}
.fixed-product-guide > p { margin: 0; color: var(--tx-3); font: 400 11px/1.6 var(--sans); text-align: right; }

/* ============================================================================
   5. 무료 결과 · 폼 · 결제
   ============================================================================ */
.product-preview-form,
.product-preview-result {
  max-width: 100%;
  padding: var(--s6);
  border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  background: var(--ink-700);
}
.product-preview-form { background: linear-gradient(160deg, var(--ink-600), var(--ink-700)); box-shadow: var(--e1); }
.product-preview-form > label,
.person-fields > label,
.field-pair label,
.product-preview-form > fieldset { display: grid; gap: var(--s2); margin: var(--s5) 0; }
.product-preview-form label > span,
.person-fields label > span { color: var(--tx-2); font: 800 13px/1.4 var(--sans); }
.product-preview-form input,
.product-preview-form select,
.product-preview-form textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  background: var(--ink-900);
  color: var(--tx-1);
  font: var(--f-body);
}
.product-preview-form input:focus,
.product-preview-form select:focus,
.product-preview-form textarea:focus { border-color: var(--gold); outline: 0; box-shadow: 0 0 0 3px var(--gold-soft); }
.product-preview-form textarea { min-height: 96px; }
.product-preview-form small { color: var(--tx-3); font: var(--f-sm); }
.person-fields { margin: var(--s6) 0; padding: var(--s4); border: 1px solid var(--line-2); border-radius: var(--r-m); }
.calendar-choice {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: var(--s5) 0;
  padding: var(--s1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-m);
  background: var(--ink-800);
}
.calendar-choice > legend { padding: 0 var(--s2); color: var(--tx-2); font-weight: 800; }
.calendar-choice > label {
  display: flex;
  min-height: 42px;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin: 0;
  border-radius: var(--r-s);
  color: var(--tx-2);
  cursor: pointer;
}
.calendar-choice > label:has(input:checked) { background: var(--ink-500); color: var(--tx-1); font-weight: 850; }
.calendar-choice input { width: auto; min-height: 0; accent-color: var(--gold); }
.field-pair { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s3); }
.time-known { display: flex !important; grid-template-columns: auto 1fr !important; min-height: 44px; align-items: center; }
.time-known input,
.product-check-grid input { width: auto; min-height: 0; }
.product-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.product-check-grid label { display: flex; min-height: 44px; align-items: center; gap: var(--s2); }
.birth-time-selects { margin: var(--s5) 0; padding: var(--s4); border: 1px solid var(--line-2); border-radius: var(--r-m); }
.birth-time-selects > div { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s2); }
.birth-time-selects small { display: block; margin-top: var(--s2); }
.product-preview-form .product-primary,
.product-preview-result .product-primary { width: 100%; margin-top: var(--s5); }

.product-preview-result > header {
  position: relative;
  min-height: 240px;
  overflow: hidden;
  padding: var(--s6);
  border-radius: var(--r-m);
  background: var(--ink-800);
}
.product-preview-result > header > :not(.result-guide-art) { position: relative; z-index: 1; max-width: 64%; }
.product-preview-result > header > small { color: var(--gold); font: var(--f-xs); }
.product-preview-result > header > h2 { margin: var(--s2) 0 var(--s1); font: var(--f-h1); }
.product-preview-result > header .product-guide-identity { margin-bottom: var(--s4); }
.result-guide-art { position: absolute; inset: 0 0 0 auto; width: 54%; }
.result-guide-art::after { background: linear-gradient(90deg, var(--ink-800), rgba(7, 18, 27, .1)), linear-gradient(180deg, transparent 58%, var(--ink-800)); }
.product-preview-result > .product-result-chapter { position: relative; padding: var(--s8) 0; border-bottom: 1px solid var(--line-1); }
.product-preview-result .product-result-chapter {
  scroll-margin-top: calc(var(--h-header) + 64px);
  margin: var(--s6) 0;
  padding: var(--s8) var(--s6);
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--gold-line);
  border-radius: var(--r-l);
  background: linear-gradient(155deg, color-mix(in srgb, var(--ink-700) 94%, var(--gold-soft)), var(--ink-800));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}
.product-result-chapter + .product-result-chapter { margin-top: var(--s8); }
.product-result-chapter > small {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  margin-bottom: var(--s2);
  padding: 0 var(--s3);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-full);
  background: var(--gold-soft);
}
.product-preview-result > .product-result-chapter h3 { margin: 0 0 var(--s3); font: var(--f-h1); }
.product-preview-result > .product-result-chapter > small { color: var(--gold); font: var(--f-xs); }
.product-preview-result > .product-result-chapter > strong { display: block; margin: var(--s2) 0; color: var(--gold-hi); font: 700 17px/1.7 var(--serif); }
.product-preview-result > .product-result-chapter p { color: var(--tx-2); font: var(--f-lead); }
.evidence-card { margin-top: var(--s4); padding: var(--s4); border: 1px solid var(--line-1); border-radius: var(--r-m); background: var(--ink-900); }
.evidence-card summary { color: var(--gold); font: 800 14px/1.5 var(--sans); cursor: pointer; }
.evidence-card[open] summary { margin-bottom: var(--s3); }
.evidence-card p { display: grid; grid-template-columns: 130px 1fr; gap: var(--s3); font: var(--f-sm); }
.evidence-card span { color: var(--gold); font-weight: 800; }
.result-action { display: grid; gap: var(--s2); margin-top: var(--s4); padding-left: var(--s4); border-left: 3px solid var(--gold); }
.result-action > b { display: block; color: var(--gold-hi); font: 800 14px/1.5 var(--sans); }
.result-action > span { display: block; }

.cross-reading-summary {
  display: grid;
  gap: var(--s2);
  margin: var(--s6) 0;
  padding: var(--s6);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-m);
  background: linear-gradient(150deg, rgba(224, 189, 116, .08), var(--ink-600));
}
.cross-reading-summary > small { color: var(--gold); font: 900 10px/1.4 var(--sans); letter-spacing: .12em; }
.cross-reading-summary > strong { color: #fff8ed; font: 700 clamp(24px, 3.2vw, 34px)/1.3 var(--serif); }
.cross-reading-summary > span {
  width: max-content;
  padding: var(--s1) var(--s3);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-full);
  color: var(--gold-hi);
  font: var(--f-xs);
}
.cross-reading-summary h3 { margin: var(--s2) 0 0; font: 800 15px/1.5 var(--sans); }
.cross-reading-summary p { margin: 0; padding: var(--s2) 0; border-top: 1px solid var(--line-1); color: var(--tx-2); font: var(--f-body); }
.cross-reading-summary em { color: var(--tx-3); font: 400 11px/1.6 var(--sans); font-style: normal; }

.result-reading-tools {
  position: sticky;
  z-index: 20;
  top: var(--h-header);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s3);
  margin: -1px calc(-1 * var(--s6)) var(--s5);
  padding: var(--s3) var(--s6);
  border-block: 1px solid var(--line-1);
  background: color-mix(in srgb, var(--ink-800) 94%, transparent);
  backdrop-filter: blur(14px);
}
.result-reading-tools span { height: 5px; overflow: hidden; border-radius: var(--r-full); background: var(--ink-500); }
.result-reading-tools i { display: block; width: var(--reading-progress, 18%); height: 100%; border-radius: inherit; background: var(--gold); }
.result-reading-tools b { color: var(--tx-2); font: 800 10px/1 var(--sans); }
.product-reading-layout { width: 100%; }
.product-reading-side-rail .reading-quick-tools { grid-template-columns: 1fr; }

@media (min-width: 920px) and (max-width: 1199px) {
  .product-reading-side-rail {
    position: static;
    display: contents;
    width: auto;
    max-height: none;
  }
  .product-reading-side-rail .chapter-nav-toggle { display: flex; right: 258px; left: auto; bottom: 18px; }
  .product-reading-side-rail .chapter-nav-scrim { display: block; }
  .product-reading-side-rail .chapter-navigator {
    position: fixed;
    z-index: 73;
    inset: auto 18px 80px auto;
    width: min(360px, calc(100vw - 36px));
    max-height: min(68svh, 590px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) scale(.98);
  }
  .product-reading-side-rail .chapter-navigator.is-open { opacity: 1; pointer-events: auto; transform: none; }
  .product-reading-side-rail .chapter-navigator > header button { display: block; }
  .product-reading-side-rail .chapter-navigator ol { max-height: calc(min(68svh, 590px) - 64px); }
  .product-reading-side-rail .reading-quick-tools { position: fixed; z-index: 80; inset: auto 18px 18px auto; width: 220px; }
}

@media (min-width: 1200px) {
  .product-reading-layout {
    display: grid;
    grid-template-columns: minmax(0, 780px) minmax(240px, 286px);
    align-items: start;
    gap: var(--s6);
  }
  .product-reading-side-rail {
    position: sticky;
    z-index: 30;
    top: calc(var(--h-header) + var(--s4));
    left: auto;
    display: grid;
    gap: var(--s3);
    width: 100%;
    max-height: calc(100svh - var(--h-header) - var(--s8));
  }
  .product-reading-side-rail .chapter-navigator {
    position: relative;
    inset: auto;
    width: 100%;
    max-height: calc(100svh - var(--h-header) - 150px);
  }
  .product-reading-side-rail .chapter-navigator ol { max-height: calc(100svh - var(--h-header) - 214px); }
  .product-reading-side-rail .reading-quick-tools {
    position: relative;
    z-index: auto;
    inset: auto;
    width: 100%;
  }
}
.reading-generation-progress { position: relative; min-height: 240px; overflow: hidden; padding: var(--s5); }
.reading-generation-progress > :not(.loading-guide-art) { position: relative; z-index: 1; }
.reading-generation-progress .product-guide-identity { margin-bottom: var(--s1); }
.reading-generation-progress > span {
  display: block;
  width: min(64%, 360px);
  height: 4px;
  margin-bottom: var(--s4);
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 12%);
}
.reading-generation-progress > span > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  transition: width .35s ease;
}
.reading-generation-progress > b {
  display: block;
  width: 100%;
  max-width: none;
  font: 800 18px/1.5 var(--sans);
  word-break: keep-all;
  overflow-wrap: normal;
}
.reading-generation-progress > small {
  display: block;
  max-width: 64%;
  margin-top: var(--s2);
  line-height: 1.65;
}
.loading-guide-art { position: absolute; inset: 0 0 0 auto; width: 58%; opacity: .6; }
.loading-guide-art::after { background: linear-gradient(90deg, var(--ink-700), transparent 60%), linear-gradient(180deg, transparent, var(--ink-700)); }
.reading-qa-sheet > header { display: flex; align-items: flex-start; gap: var(--s3); }

.product-topic-checkout {
  margin-top: var(--s6);
  padding: var(--s6);
  border: 1px solid #c9bda9;
  border-radius: var(--r-m);
  background: var(--paper);
  color: #28231f;
}
.product-topic-checkout header > small { color: #7b5a23; font: var(--f-xs); }
.product-topic-checkout header > h3 { margin: var(--s1) 0 0; font: 700 22px/1.4 var(--serif); }
.product-topic-checkout .account-purchase-note { padding: var(--s3); border-radius: var(--r-s); background: #fffaf2; color: #4e4943; font: var(--f-body); }
.approved-account-open { display: grid; gap: var(--s2); margin: var(--s4) 0; padding: var(--s4); border: 1px solid #b68b43; border-radius: var(--r-s); background: #fff8e9; }
.approved-account-open button { min-height: 48px; border: 1px solid #75551f; border-radius: 10px; background: #173743; color: #fff8ed; font: 800 14px/1.4 var(--sans); }
.approved-account-open button:disabled { opacity: .64; cursor: wait; }
.approved-account-open small { color: #655b50; font: 400 12px/1.6 var(--sans); }
.product-topic-checkout .guest-recovery-link { display: block; margin-top: var(--s3); color: #6d5542; text-align: center; text-decoration: underline; }
.product-topic-checkout .product-secondary,
.product-topic-checkout .sandbox-payment-note,
.product-topic-checkout .pay-status { color: #6d5542; }
.product-restore-state { text-align: center; }
.product-restore-state a { display: inline-block; margin-top: var(--s4); }

/* ============================================================================
   6. 반응형
   ============================================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {
  .store-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 761px) and (max-width: 1023px) {
  .product-desktop-nav { gap: var(--s5); }
  .featured-product-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured-product-rail .featured-product-card:first-child { grid-column: 1 / -1; }
  .featured-product-card:first-child .featured-product-visual { aspect-ratio: 21 / 9; }
  .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); min-height: 440px; }
  .detail-hero-visual { min-height: 440px; }
  .detail-hero-content { padding: var(--s8) var(--s6); }
  .detail-body { grid-template-columns: minmax(0, 1fr) 240px; gap: var(--s6); }
}

@media (max-width: 760px) {
  .product-store,
  .product-home-stage { padding-bottom: calc(var(--h-tab) + 12px + env(safe-area-inset-bottom)); }

  .product-app-header { height: 54px; padding-inline: var(--s4); }
  .product-app-brand { font-size: 17px; }
  .product-app-brand > span { width: 27px; height: 27px; }
  .product-desktop-nav { display: none; }
  .product-header-actions { gap: 0; }
  .product-header-search { min-width: 40px; padding: 0; }
  .product-header-search span { display: none; }
  .product-header-account { min-width: 0; padding: 0 var(--s2); border: 0; }
  .product-bottom-nav { display: flex; }

  .store-promotion { min-height: 52px; margin-top: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-s); }
  .store-promotion b { font-size: 13px; }
  .store-promotion span { display: none; }
  .store-promotion a { min-height: 32px; padding: 0 var(--s3); font-size: 10px; }

  /* 추천 — 가로 스냅 레일 */
  .featured-products { padding: var(--s5) 0 var(--s1) var(--pad-x); }
  .featured-heading { padding-right: var(--pad-x); }
  .featured-heading small { font-size: 10px; }
  .featured-heading h1 { margin: var(--s1) 0 var(--s1); font-size: 26px; }
  .featured-heading p { margin-bottom: var(--s4); font-size: 13px; }
  .featured-product-rail {
    display: flex;
    gap: var(--s3);
    overflow-x: auto;
    padding-right: var(--pad-x);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .featured-product-rail::-webkit-scrollbar { display: none; }
  .featured-product-rail .featured-product-card,
  .featured-product-rail .featured-product-card:not(.selected) {
    display: flex;
    flex: 0 0 84%;
    scroll-snap-align: start;
  }
  .featured-product-visual { aspect-ratio: 16 / 10; }
  .featured-product-copy { padding: var(--s4); }
  .featured-product-card h2 { font-size: 21px; }
  .featured-product-card a { min-height: 46px; }
  .featured-rail-dots {
    display: flex;
    height: 30px;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding-right: var(--pad-x);
  }
  .featured-rail-dots button { position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; }
  .featured-rail-dots button::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: var(--r-full);
    background: var(--ink-500);
    content: "";
    transform: translate(-50%, -50%);
    transition: width var(--mo);
  }
  .featured-rail-dots button.selected::after { width: 20px; background: var(--gold); }
  .product-trust-strip { margin-top: var(--s3); padding-right: var(--pad-x); overflow-x: auto; scrollbar-width: none; }
  .product-trust-strip::-webkit-scrollbar { display: none; }
  .product-trust-strip span { flex: 0 0 auto; }

  /* 목록 */
  .store-catalog { padding: var(--s6) var(--pad-x) var(--s12); }
  .catalog-heading { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .catalog-heading h2 { font-size: 23px; }
  .catalog-heading input { width: 100%; }
  .catalog-toolbar { margin-top: 0; }
  .catalog-sticky { top: calc(54px - 1px); margin-top: var(--s4); padding-top: var(--s1); }
  .catalog-discovery { gap: var(--s5); }
  .catalog-discovery button { min-height: 44px; font-size: 13px; }
  .catalog-toolbar > a { font-size: 11px; }
  .catalog-filters { margin: var(--s3) calc(-1 * var(--pad-x)) var(--s4) 0; padding-right: var(--pad-x); }
  .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .store-card-image { aspect-ratio: 4 / 3.1; }
  .store-card-body { padding: var(--s3); }
  .store-card-meta small { font-size: 9px; }
  .store-grid h3 { margin: var(--s1) 0 2px; font-size: 15px; }
  .store-card-body > strong { font-size: 11px; }
  .store-grid p { display: none; }
  .store-grid footer { padding-top: var(--s2); }
  .store-grid footer a { min-height: 36px; font-size: 11px; }

  /* 상세 */
  .product-detail { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .detail-hero { padding: var(--s3) var(--s3) var(--s3); }
  .detail-hero-inner { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 0; border-radius: var(--r-m); }
  .detail-hero-visual { min-height: 0; aspect-ratio: 4 / 3.4; }
  .detail-guide-art > img { object-position: 50% 10%; }
  .detail-hero-visual > .detail-guide-slot { right: var(--s3); bottom: var(--s3); }
  .detail-hero-content,
  .detail-hero-copy { width: 100%; min-width: 0; max-width: 100%; }
  .detail-hero-content { padding: var(--s5) var(--s4) var(--s5); }
  .detail-hero h1 {
    width: calc(100vw - 58px);
    max-width: 100%;
    margin: var(--s3) 0 var(--s1);
    font-size: 30px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-wrap: wrap;
  }
  .detail-hero h2 { font-size: 20px; }
  .detail-hero-copy > p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .detail-purchase-panel { margin-top: var(--s5); padding-top: var(--s4); }
  .detail-purchase-panel > h3 { display: none; }
  .detail-hero-facts b { font-size: 25px; }
  .detail-purchase-panel > p { text-align: center; }

  .detail-glance {
    display: flex;
    gap: var(--s2);
    padding: var(--s3) var(--s3) 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .detail-glance::-webkit-scrollbar { display: none; }
  .detail-glance p { min-width: 74%; scroll-snap-align: start; }

  .detail-body { display: block; padding: 0 var(--s4); }
  .detail-body .detail-section,
  .detail-body #preview-form { padding: var(--s10) 0; }
  .detail-section > h2 { font-size: 23px; }
  .detail-section blockquote { padding: var(--s4); font-size: 15px; }
  .reason-grid,
  .includes,
  .product-method > div,
  .related-grid { grid-template-columns: 1fr; }
  .detail-sticky-purchase { display: none; }

  .product-preview-form,
  .product-preview-result { padding: var(--s5) var(--s4); border-radius: var(--r-m); }
  .product-preview-result { padding-bottom: 104px; }
  .product-preview-result > header { min-height: 0; padding: var(--s4); }
  .product-preview-result > header > :not(.result-guide-art) { max-width: 100%; }
  .result-guide-art { opacity: .3; }
  .result-reading-tools { top: 54px; margin-inline: calc(-1 * var(--s4)); padding-inline: var(--s4); }
  .product-preview-result .product-result-chapter { margin: var(--s5) 0; padding: var(--s6) var(--s4); border-radius: var(--r-m); }
  .product-result-chapter + .product-result-chapter { margin-top: var(--s6); }
  .product-reading-side-rail .reading-quick-tools { grid-template-columns: 1fr; }
  .evidence-card p { grid-template-columns: 1fr; gap: var(--s1); }
  .field-pair { grid-template-columns: 1fr; }
  .product-check-grid { grid-template-columns: 1fr; }
  .birth-time-selects > div { grid-template-columns: 1fr 1fr 1fr; }

  /* 하단 고정 구매 바 — 상세에는 탭바가 없어 자리를 가리지 않습니다 */
  .detail-mobile-cta {
    position: fixed;
    z-index: 88;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--gold-line);
    background: color-mix(in srgb, var(--ink-900) 96%, transparent);
    backdrop-filter: blur(18px);
  }
  .detail-mobile-cta span { display: grid; gap: 1px; }
  .detail-mobile-cta b { color: var(--tx-1); font: 700 14px/1.3 var(--serif); }
  .detail-mobile-cta small { color: var(--tx-3); font: 400 10px/1.3 var(--sans); }
  .detail-mobile-cta a {
    display: flex;
    min-height: 46px;
    align-items: center;
    padding: 0 var(--s5);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 11px;
    background: linear-gradient(180deg, #cdb180, #b89a62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
    color: var(--gold-ink);
    font: 800 12px/1 var(--sans);
  }
  body:has(.product-preview-result) .detail-mobile-cta { display: none; }
}

@media (max-width: 760px) {
  .detail-concerns { margin-top: var(--s3); padding: var(--s5) var(--s4); }
  .detail-concerns-head { justify-content: flex-start; margin-bottom: var(--s4); }
  .detail-concerns h2 { font-size: 21px; }
  .detail-concerns-mark { width: 34px; height: 34px; flex-basis: 34px; }
  .detail-concern-list { grid-template-columns: 1fr; gap: var(--s2); }
  .detail-concern-list p { min-height: 64px; grid-template-columns: 20px 1fr; padding: var(--s3) var(--s4); }
  .detail-chapters { margin-top: var(--s6); padding: var(--s5) var(--s4); }
  .detail-chapters ol { grid-template-columns: 1fr; }
  .detail-chapters li { min-height: 54px; }
}

@media (max-width: 380px) {
  .store-grid { gap: var(--s2); }
  .store-grid h3 { font-size: 15px; }
  .featured-product-rail .featured-product-card { flex-basis: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  .product-store *,
  .product-detail *,
  .product-home-stage * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .store-grid article:hover,
  .featured-product-card:hover { transform: none; }
}

/* ============================================================================
   7. 홈 진입 — 상품이 아니라 '질문'을 먼저 고르는 화면
   ============================================================================ */
.product-discovery-home { padding-bottom: var(--s10); }

.ask-hero {
  width: min(100%, var(--w-page));
  margin: 0 auto;
  padding: clamp(var(--s8), 5vw, 64px) var(--pad-x) var(--s8);
  text-align: center;
}
.ask-hero small { color: var(--gold); font: 900 11px/1.5 var(--sans); letter-spacing: .16em; }
.ask-hero h1 {
  max-width: 20ch;
  margin: var(--s3) auto var(--s4);
  font: 700 clamp(31px, 4.2vw, 54px)/1.2 var(--serif);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.ask-hero p { max-width: 50ch; margin: 0 auto; color: var(--tx-2); font: var(--f-lead); }

.ask-board { width: min(100%, var(--w-page)); margin: 0 auto; padding: 0 var(--pad-x) var(--s16); }
.ask-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line-1);
}
.ask-board-head h2 { margin: 0; font: var(--f-h2); letter-spacing: var(--tight); }
.ask-board-head .catalog-filters { margin: 0; }

/* 대표 질문 — 아트를 크게 쓰는 한 장 */
.featured-product-card.ask-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr);
  margin-bottom: var(--s4);
  border-radius: var(--r-l);
}
.ask-lead .featured-product-visual { aspect-ratio: auto; min-height: 400px; }
.ask-lead .featured-guide-art::after {
  background: linear-gradient(90deg, transparent 52%, var(--ink-700) 100%);
}
.ask-lead .featured-product-copy { justify-content: center; padding: var(--s6) clamp(var(--s5), 2.2vw, 32px); }
.ask-lead h2 { margin: var(--s3) 0 var(--s3); font: 700 clamp(24px, 2.4vw, 34px)/1.28 var(--serif); }
.ask-lead p { -webkit-line-clamp: 3; font: var(--f-body); }
.ask-lead a {
  min-height: 52px;
  margin-top: var(--s5);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: linear-gradient(180deg, #cdb180, #b89a62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  color: var(--gold-ink);
  font-weight: 800;
}
.ask-lead:hover a { background: linear-gradient(180deg, #d8bd8e, #c3a56d); }

/* 나머지 질문 — 빠르게 훑는 목록 */
.ask-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ask-list a {
  display: grid;
  min-height: 80px;
  grid-template-columns: 46px minmax(0, 1fr) 16px;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-1);
  border-radius: var(--r-m);
  background: var(--ink-700);
  transition: border-color var(--mo), background var(--mo), transform var(--mo);
}
.ask-list a:hover {
  transform: translateX(2px);
  border-color: color-mix(in srgb, var(--product-accent) 58%, transparent);
  background: var(--ink-600);
}
.ask-list i {
  overflow: hidden;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: linear-gradient(160deg, var(--ink-500), var(--ink-800));
}
.ask-list span { display: grid; gap: 3px; min-width: 0; }
.ask-list b { color: var(--tx-1); font: 700 16px/1.4 var(--serif); letter-spacing: var(--tight); }
.ask-list small { color: var(--tx-3); font: 700 11px/1.4 var(--sans); }
.ask-list em { color: var(--tx-3); font: normal 18px/1 var(--sans); font-style: normal; }
.ask-list a:hover em { color: var(--gold-hi); }

.ask-more {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s5);
  border: 1px solid var(--line-2);
  border-radius: var(--r-m);
  color: var(--tx-2);
  font: 800 13px/1 var(--sans);
  transition: border-color var(--mo), color var(--mo);
}
.ask-more:hover { border-color: var(--gold-line); color: var(--gold-hi); }

@media (max-width: 1023px) {
  .featured-product-card.ask-lead { grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); }
  .ask-lead .featured-product-visual { min-height: 360px; }
}

@media (max-width: 760px) {
  .product-discovery-home { padding-bottom: var(--s6); }
  .ask-hero { padding: var(--s8) var(--pad-x) var(--s6); text-align: left; }
  .ask-hero h1 { max-width: 16ch; margin-inline: 0; font-size: 30px; }
  .ask-hero p { margin-inline: 0; }
  .ask-hero p { font-size: 14px; }
  .ask-board { padding: 0 var(--pad-x) var(--s12); }
  .ask-board-head { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .ask-board-head .catalog-filters { margin-inline: calc(-1 * var(--pad-x)) 0; padding-right: var(--pad-x); }

  .featured-product-card.ask-lead { display: block; }
  .ask-lead .featured-product-visual { min-height: 0; aspect-ratio: 4 / 4.15; }
  .ask-lead .featured-guide-art::after { background: linear-gradient(180deg, transparent 48%, rgba(6, 16, 24, .86) 96%, var(--ink-700)); }
  .ask-lead .featured-product-copy { padding: 14px var(--s4) 16px; }
  .ask-lead .featured-product-meta span { min-height: 22px; padding-inline: 10px; }
  .ask-lead h2 { margin: 8px 0 7px; font-size: 22px; }
  .ask-lead p { font-size: 12px; line-height: 1.5; -webkit-line-clamp: 2; }
  .ask-lead a { min-height: 44px; margin-top: 12px; }

  .ask-list { grid-template-columns: 1fr; }
  .ask-list a { min-height: 72px; grid-template-columns: 40px minmax(0, 1fr) 14px; gap: var(--s3); }
  .ask-list i { width: 40px; height: 40px; }
  .ask-list b { font-size: 15px; }
  .ask-more { min-height: 48px; font-size: 12px; }
}

/* 선택 입력은 접어 둡니다 — 필수만 보이면 폼이 짧아집니다 */
.form-optional {
  margin: var(--s5) 0;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-m);
}
.form-optional > summary {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s4);
  color: var(--tx-2);
  cursor: pointer;
  font: 800 13px/1 var(--sans);
  list-style: none;
}
.form-optional > summary::-webkit-details-marker { display: none; }
.form-optional > summary small { color: var(--tx-3); font: 400 11px/1 var(--sans); }
.form-optional > summary::after { margin-left: auto; color: var(--tx-3); content: "＋"; font: 400 16px/1 var(--sans); }
.form-optional[open] > summary::after { content: "－"; }
.form-optional > :not(summary) { margin-inline: var(--s4); }
.form-optional > :last-child { margin-bottom: var(--s4); }
.fixed-product-guide { margin: var(--s4) 0 var(--s5); padding: var(--s3); }
.fixed-product-guide > p { font-size: 10px; }

/* 이전에 입력한 출생 정보를 채워 두었을 때의 안내 */
.birth-prefilled-note {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: var(--s4) 0 0;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-s);
  background: var(--gold-soft);
  color: var(--gold-hi);
  font: 700 12px/1.6 var(--sans);
}

/* 폼 압축 — 필수 입력만 한눈에 */
.person-fields { margin: var(--s4) 0; padding: var(--s4) var(--s4) var(--s2); }
.person-fields > legend { padding: 0 var(--s2); color: var(--gold-hi); font: 700 14px/1 var(--serif); }
.product-preview-form > label,
.person-fields > label,
.field-pair label,
.product-preview-form > fieldset { margin: var(--s3) 0; }
.person-fields > label > small,
.field-pair label > small { color: var(--tx-3); font: 400 10px/1.5 var(--sans); }
.calendar-choice[data-compact="true"] { margin: var(--s3) 0; padding: 3px; }
.calendar-choice[data-compact="true"] > legend { font-size: 12px; }
.calendar-choice[data-compact="true"] > label { min-height: 38px; font-size: 13px; }
.form-partner > .person-fields { margin: 0 0 var(--s3); border: 0; padding: 0; }
.form-partner > .person-fields > legend { display: none; }
.product-preview-form > h2 { margin: 0 0 var(--s2); font: var(--f-h2); }
.product-preview-form > h2 + p { margin: 0; color: var(--tx-3); font: var(--f-sm); }

/* ============================================================================
   8. 무료 풀이 — 한 단계씩 넘어가는 입력 흐름
   ============================================================================ */
.preview-start {
  display: grid;
  justify-items: start;
  gap: var(--s3);
  padding: var(--s8) var(--s6);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-l);
  background: linear-gradient(160deg, var(--ink-600), var(--ink-700));
  box-shadow: var(--e1);
}
.preview-start h2 { margin: var(--s2) 0 0; font: var(--f-h1); letter-spacing: var(--tight); }
.preview-start > p { margin: 0; color: var(--tx-2); font: var(--f-body); }
.preview-start-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s2) 0;
  padding: 0;
  counter-reset: s;
  list-style: none;
}
.preview-start-steps li {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  color: var(--tx-3);
  counter-increment: s;
  font: 700 11px/1 var(--sans);
}
.preview-start-steps li::before { color: var(--gold); content: counter(s); font-weight: 900; }
.preview-start .product-primary { width: 100%; margin-top: var(--s2); }
.preview-start > small { color: var(--tx-3); font: 400 11px/1.6 var(--sans); }

.preview-wizard { display: grid; gap: var(--s5); min-height: 440px; align-content: start; }
.wizard-top { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: var(--s3); }
.wizard-back {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--tx-2);
  cursor: pointer;
  font: 400 20px/1 var(--sans);
}
.wizard-back:hover { border-color: var(--gold-line); color: var(--gold-hi); }
.wizard-progress { height: 4px; overflow: hidden; border-radius: var(--r-full); background: var(--ink-500); }
.wizard-progress > i { display: block; height: 100%; border-radius: inherit; background: var(--gold); transition: width var(--mo); }
.wizard-top b { color: var(--tx-3); font: 800 11px/1 var(--sans); }

.wizard-body { display: grid; gap: var(--s3); align-content: start; }
.wizard-body > h2 { margin: 0; font: 700 clamp(23px, 2.4vw, 30px)/1.35 var(--serif); letter-spacing: var(--tight); }
.wizard-body > p { margin: 0; color: var(--tx-3); font: var(--f-body); }
.wizard-field { display: grid; gap: var(--s3); margin-top: var(--s2); }
.wizard-field > label { display: grid; gap: var(--s2); margin: 0; }
.wizard-field small { color: var(--tx-3); font: 400 11px/1.6 var(--sans); }

.wizard-field input[type="text"],
.wizard-field input:not([type]),
.wizard-field select {
  width: 100%;
  min-height: 56px;
  padding: 0 var(--s4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-m);
  background: var(--ink-900);
  color: var(--tx-1);
  font: 400 17px/1 var(--sans);
}
.wizard-big-input { font: 700 22px/1 var(--sans) !important; letter-spacing: .04em; }
.wizard-field input:focus,
.wizard-field select:focus { border-color: var(--gold); outline: 0; box-shadow: 0 0 0 3px var(--gold-soft); }

.wizard-toggle,
.wizard-choice { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s2); }
.wizard-toggle button,
.wizard-choice button {
  min-height: 56px;
  padding: 0 var(--s3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-m);
  background: transparent;
  color: var(--tx-2);
  cursor: pointer;
  font: 800 15px/1.3 var(--sans);
  transition: border-color var(--mo), background var(--mo), color var(--mo);
}
.wizard-toggle button:hover,
.wizard-choice button:hover { border-color: var(--line-3); }
.wizard-toggle button.on,
.wizard-choice button.on { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-hi); }
.wizard-toggle { grid-auto-columns: 1fr; }
.wizard-toggle button { min-height: 46px; font-size: 14px; }
.wizard-check { display: flex !important; min-height: 44px; align-items: center; gap: var(--s2); color: var(--tx-2); font: 700 13px/1 var(--sans); }
.wizard-check input { width: auto; min-height: 0; accent-color: var(--gold); }

.time-select-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: var(--s2); }

.wizard-summary { display: grid; gap: 0; border: 1px solid var(--line-2); border-radius: var(--r-m); overflow: hidden; }
.wizard-summary p {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: var(--s3);
  margin: 0;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-1);
  color: var(--tx-1);
  font: 700 14px/1.5 var(--sans);
}
.wizard-summary p:last-child { border-bottom: 0; }
.wizard-summary span { color: var(--tx-3); font: 700 11px/1.5 var(--sans); }

.preview-wizard > .product-primary { width: 100%; min-height: 56px; margin-top: auto; }

@media (max-width: 760px) {
  .preview-start { padding: var(--s6) var(--s4); }
  .preview-start h2 { font-size: 24px; }
  .preview-wizard { min-height: 400px; gap: var(--s4); }
  .wizard-body > h2 { font-size: 22px; }
  .wizard-field input[type="text"],
  .wizard-field input:not([type]),
  .wizard-field select { min-height: 54px; font-size: 16px; }
  .wizard-choice { grid-auto-flow: row; }
  .wizard-toggle { grid-auto-flow: column; }
  .wizard-summary p { grid-template-columns: 78px 1fr; font-size: 13px; }
}

/* ── 입력을 전체 화면으로 덮습니다 ─────────────────────────── */
.wizard-overlay {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  padding: var(--s5);
  place-items: center;
}
.wizard-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(3, 8, 13, .84);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.wizard-overlay > .preview-wizard {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  max-height: min(90svh, 720px);
  overflow-y: auto;
  padding: var(--s6);
  border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  background: var(--ink-700);
  box-shadow: var(--e2);
  animation: wizard-in 260ms cubic-bezier(.2, .7, .3, 1);
}
@keyframes wizard-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }

.wizard-top { grid-template-columns: 34px 1fr auto 34px; }
.wizard-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--tx-3);
  cursor: pointer;
  font: 400 13px/1 var(--sans);
}
.wizard-close:hover { border-color: var(--line-3); color: var(--tx-1); }

@media (max-width: 760px) {
  .wizard-overlay { padding: 0; }
  .wizard-overlay > .preview-wizard {
    display: flex;
    width: 100%;
    height: 100svh;
    max-height: none;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    padding: calc(var(--s5) + env(safe-area-inset-top)) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
    animation-name: wizard-in-sheet;
  }
  /* 전체 화면에서는 실행 버튼을 아래에 고정해 엄지로 닿게 합니다 */
  .wizard-overlay > .preview-wizard > .wizard-body { flex: 1; overflow-y: auto; }
  .wizard-overlay > .preview-wizard > .product-primary { margin-top: var(--s4); }
  @keyframes wizard-in-sheet { from { opacity: 0; transform: translateY(28px); } }
}

@media (prefers-reduced-motion: reduce) {
  .wizard-overlay > .preview-wizard { animation: none; }
}

/* ============================================================================
   9. 생성형 경량 UI 자산 — 버튼 표면과 기능 아이콘
   ============================================================================ */
.featured-product-card a,
.store-grid footer a,
.ask-more,
.product-jump,
.product-secondary,
.catalog-filters button,
.catalog-empty button,
.wizard-toggle button,
.wizard-choice button,
.wizard-back,
.wizard-close,
.approved-account-open button,
.ask-guide-fixed,
.ask-selection-chip,
.reading-qa-sheet form button,
.reading-qa-sheet .qa-quick-questions button,
.chapter-nav-toggle,
.chapter-navigator header button {
  background-color: var(--ink-700);
  background-image: var(--ui-button-ink);
  background-position: center;
  background-size: cover;
}

.product-primary,
.ask-lead a,
.detail-sticky-purchase a,
.detail-mobile-cta a {
  background-color: #bd9b58;
  background-image: var(--ui-button-gold);
  background-position: center;
  background-size: cover;
}

.product-primary:hover,
.ask-lead:hover a,
.detail-sticky-purchase a:hover,
.detail-mobile-cta a:hover { filter: brightness(1.07); }

.featured-product-card:hover a,
.store-grid article:hover footer a {
  background-color: #bd9b58;
  background-image: var(--ui-button-gold);
  color: var(--gold-ink);
}

.product-primary:disabled {
  background: var(--ink-600);
  filter: none;
}

.featured-product-card a .ui-icon,
.store-grid footer a .ui-icon,
.product-primary .ui-icon,
.product-jump .ui-icon { width: 18px; height: 18px; }

.ask-list i.ui-icon {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url('/ui-assets/ui-icons.webp');
  background-size: 400% 300%;
}
.ask-list em.ui-icon { width: 18px; height: 18px; color: transparent; font-size: 0; }

.detail-concerns > h2 { margin-top: 0; }
.detail-concerns-mark { background: transparent; }
.detail-concerns-mark .ui-icon { width: 24px; height: 24px; }
.detail-concern-list i.ui-icon { width: 20px; height: 20px; }
.detail-chapters-mark .ui-icon { width: 34px; height: 34px; }

.wizard-back,
.wizard-close { display: inline-grid; place-items: center; color: transparent; font-size: 0; }
.wizard-back .ui-icon,
.wizard-close .ui-icon,
.reading-qa-sheet header button .ui-icon,
.chapter-navigator header button .ui-icon { width: 22px; height: 22px; }

.ask-selection-chip,
.ask-guide-fixed { display: inline-flex; align-items: center; gap: 7px; }
.ask-selection-chip .ui-icon,
.ask-guide-fixed .ui-icon { width: 20px; height: 20px; }

.chapter-nav-toggle { gap: 5px; }
.chapter-nav-toggle .ui-icon { width: 22px; height: 22px; }
.product-service-policy { margin: 28px 0; padding: 24px; border: 1px solid #bfa7753d; border-radius: 16px; background: #101c2a; }
.product-service-policy h2 { margin: 0 0 14px; color: #e0cca0; font: 700 20px/1.5 var(--sans); }
.product-service-policy p { color: #b5c2d1; font: 400 14px/1.85 var(--sans); word-break: keep-all; }
.product-service-policy a { display: inline-flex; align-items: center; gap: 8px; color: #e0cca0; font-size: 14px; }
.product-service-policy details { margin-top: 16px; padding-top: 14px; border-top: 1px solid #bfa77526; }
.product-service-policy summary { color: #bfc9d5; cursor: pointer; font: 500 14px/1.7 var(--sans); }

/* Original rendered style: /app/system-state.css */
.system-state-page{min-height:100svh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 15%,#203748,#070d14 58%);color:#f5eee3;text-align:center;font-family:var(--font-sans,"Pretendard","Noto Sans KR",sans-serif)}
.system-loading-bar{position:relative;overflow:hidden;width:100%;height:5px;margin-top:26px;border-radius:999px;background:rgba(208,169,96,.16)}.system-loading-bar i{position:absolute;inset:0 auto 0 0;width:38%;border-radius:inherit;background:linear-gradient(90deg,#a9803d,#f0d59a,#a9803d);animation:system-loading-slide 1.35s ease-in-out infinite}@keyframes system-loading-slide{0%{transform:translateX(-110%)}100%{transform:translateX(365%)}}
.system-state-page section{width:min(100%,430px);padding:42px 28px 34px;border:1px solid rgba(207,172,114,.3);border-radius:16px;background:rgba(8,15,23,.94);box-shadow:0 28px 80px rgba(0,0,0,.38)}
.system-state-brand{width:74px;height:74px;margin:0 auto 20px;background:url('/brand-icon.png') center/contain no-repeat;filter:drop-shadow(0 8px 18px rgba(0,0,0,.32))}.system-state-page small{display:block;color:#d0a960;font-size:9px;font-weight:800;letter-spacing:.18em}.system-state-page h1{margin:12px 0 11px;font:700 26px/1.5 "Gowun Batang",serif;word-break:keep-all}.system-state-page p{margin:0;color:#aaaeb0;font-size:13px;line-height:1.75;word-break:keep-all}.system-state-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:25px}.system-state-actions button,.system-state-actions a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:8px;font:800 12px var(--font-sans,"Pretendard",sans-serif);cursor:pointer;text-decoration:none}.system-state-actions button{border:0;background:#8f2430;color:#fff}.system-state-actions a{border:1px solid #46515b;color:#d9d7d2}.system-loading-dots{display:flex;justify-content:center;gap:7px;margin-top:24px}.system-loading-dots i{width:7px;height:7px;border-radius:50%;background:#d0a960;animation:system-dot 1.15s ease-in-out infinite}.system-loading-dots i:nth-child(2){animation-delay:.16s}.system-loading-dots i:nth-child(3){animation-delay:.32s}@keyframes system-dot{0%,70%,100%{opacity:.28;transform:translateY(0)}35%{opacity:1;transform:translateY(-5px)}}@media(max-width:480px){.system-state-page section{padding:36px 21px 30px}.system-state-actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.system-loading-dots i,.system-loading-bar i{animation:none}.system-loading-dots i:nth-child(2){opacity:.65}.system-loading-dots i:nth-child(3){opacity:1}.system-loading-bar i{width:72%}}

/* Original rendered style: /components/product-reading-method.module.css */
._method_1wlu0_1 {
  min-width: 0;
  border: 1px solid #baa16b45;
  border-radius: 12px;
  background: #101b2a;
  overflow: hidden;
}

._heading_1wlu0_17 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 36px;
  list-style: none;
  cursor: pointer;
}

._heading_1wlu0_17::-webkit-details-marker { display: none; }
._heading_1wlu0_17:focus-visible { outline: 2px solid #e0c38d; outline-offset: -5px; border-radius: 10px; }
._heading_1wlu0_17 > span { min-width: 0; }
._heading_1wlu0_17 small { display: block; margin-bottom: 6px; color: #a5b8ca; font: 400 .8125rem/1.7 var(--sans); word-break: keep-all; }
._heading_1wlu0_17 strong { display: block; color: #edddba; font: 700 1.375rem/1.6 "Gowun Batang", serif; letter-spacing: -.035em; word-break: keep-all; }
._heading_1wlu0_17 > img { flex: 0 0 24px; transition: transform 180ms ease; }
._method_1wlu0_1[open] ._heading_1wlu0_17 > img { transform: rotate(90deg); }
._content_1wlu0_51 { padding: 0 36px 28px; }
._methods_1wlu0_53 { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); align-items: stretch; }
._card_1wlu0_55 { min-width: 0; padding: 24px; border: 1px solid #c8ad7036; border-radius: 12px; background: #0a1421; overflow: hidden; }
._numerology_1wlu0_57 { border-color: #a9b9d63d; background: #0c1625; }
._cardHeading_1wlu0_59 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
._cardHeading_1wlu0_59 h3 { margin: 0; color: #f0dfb8; font: 700 1.25rem/1.6 "Gowun Batang", serif; }
._badge_1wlu0_63 { padding: 3px 9px; border: 1px solid #c8ad7040; border-radius: 5px; color: #d7c18f; font: 400 .8125rem/1.6 var(--sans); }
._numerology_1wlu0_57 ._badge_1wlu0_63 { border-color: #a9b9d650; color: #b9cbea; }
._source_1wlu0_67 { margin: 6px 0 0; color: #9dacbc; font: 400 .875rem/1.7 var(--sans); }
._diagram_1wlu0_69 { display: block; width: calc(100% + 48px); max-width: none; height: auto; aspect-ratio: 3 / 2; margin: 20px -24px 22px; object-fit: cover; background: #09131e; }
._points_1wlu0_71 { display: grid; gap: 12px; margin: 0; padding-top: 18px; border-top: 1px solid #a0b3c322; }
._points_1wlu0_71 > div { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 8px; }
._points_1wlu0_71 dt { color: #d7c18f; font: 500 .875rem/1.6 var(--sans); }
._points_1wlu0_71 dd { margin: 0; color: #aebccc; font: 400 .875rem/1.7 var(--sans); word-break: keep-all; }
._numerology_1wlu0_57 ._points_1wlu0_71 dt { color: #b9cbea; }
._plus_1wlu0_81 { display: grid; align-content: center; text-align: center; color: #cfb782; font: 300 1.625rem/1 var(--sans); }
._result_1wlu0_83 { display: flex; align-items: center; gap: 16px; margin-top: 24px; padding-top: 24px; border-top: 1px solid #c8ad7036; }
._result_1wlu0_83 > img { flex: 0 0 44px; border-radius: 50%; }
._result_1wlu0_83 p { margin: 0; min-width: 0; }
._result_1wlu0_83 strong { display: block; margin-bottom: 6px; color: #edddba; font: 700 1.0625rem/1.7 "Gowun Batang", serif; }
._result_1wlu0_83 p > span { display: block; color: #b8c5d3; font: 400 1rem/1.85 var(--sans); word-break: keep-all; }
._note_1wlu0_93 { margin: 18px 0 0; color: #96a8bc; font: 400 .8125rem/1.8 var(--sans); word-break: keep-all; }

@media (max-width: 720px) {
  ._heading_1wlu0_17 { padding: 24px; gap: 14px; }
  ._heading_1wlu0_17 strong { font-size: 1.3125rem; }
  ._content_1wlu0_51 { padding: 0 24px 24px; }
  ._methods_1wlu0_53 { grid-template-columns: minmax(0, 1fr); }
  ._plus_1wlu0_81 { min-height: 36px; margin-top: 0; }
  ._card_1wlu0_55 { padding: 22px; }
  ._diagram_1wlu0_69 { width: calc(100% + 44px); margin-left: -22px; margin-right: -22px; }
  ._points_1wlu0_71 > div { grid-template-columns: 108px minmax(0, 1fr); gap: 10px; }
  ._result_1wlu0_83 { align-items: flex-start; gap: 12px; }
}

@media (max-width: 420px) {
  ._heading_1wlu0_17 { padding: 22px 18px; }
  ._content_1wlu0_51 { padding: 0 14px 22px; }
  ._card_1wlu0_55 { padding: 20px 16px; }
  ._diagram_1wlu0_69 { width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; }
  ._result_1wlu0_83 > img { width: 36px; height: 36px; flex-basis: 36px; }
}

@media (max-width: 360px) {
  ._points_1wlu0_71 > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  ._heading_1wlu0_17 > img { transition: none; }
}

/* Original rendered style: /app/reviews.css */
.product-customer-stories,.reading-review-form,.review-coupon-wallet{margin:32px 0;color:#e9e5dc}.review-section-heading,.review-form-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.review-section-heading h2,.review-form-heading h2{margin:8px 0 0;font-size:25px;color:#f0dab0}.review-selection-note{color:#aebac5;font-size:13px;line-height:1.7}.review-buyer-count{display:flex;align-items:center;gap:6px;font-size:14px;white-space:nowrap}.review-buyer-count b{color:#e3c88e}.featured-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:22px 0 12px}.reading-review-card{min-width:0;border:1px solid #35424e;border-radius:18px;background:#101c27;padding:24px}.reading-review-card header{display:flex;align-items:center;gap:12px}.reading-review-card header>div{display:grid;gap:4px;min-width:0}.reading-review-card header small,.reading-review-card time{font-size:11px;color:#a5b2c0}.reading-review-card time{margin-left:auto;white-space:nowrap}.review-avatar{display:grid;place-items:center;width:38px;height:38px;border:1px solid #6c6249;border-radius:50%;background:#29313a;color:#dfbf7e;flex-shrink:0}.review-rating{display:flex;align-items:center;gap:3px;margin:18px 0 12px}.review-rating span{margin-left:6px;color:#e6cd97;font-size:13px}.review-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.85;font-size:15px}.review-reward-disclosure{display:block;border-top:1px solid #2a3844;padding-top:13px;margin-top:18px;font-size:11px;line-height:1.6;color:#a8b6c4}.review-form-heading{justify-content:flex-start;padding-bottom:24px;border-bottom:1px solid #4e493b}.review-form-heading span{color:#b5c0c9;font-size:13px}.reading-review-form{padding:28px;border:1px solid #6a5e44;border-radius:22px;background:linear-gradient(145deg,#1e2a34,#101a24)}.reading-review-form form{display:grid;gap:17px;margin-top:22px}.reading-review-form label{display:grid;gap:10px;line-height:1.7;font-size:14px}.reading-review-form input:not([type=checkbox]),.reading-review-form textarea{width:100%;box-sizing:border-box;background:#0b141d;color:#f4ede0;border:1px solid #465562;border-radius:12px;padding:14px 16px;font:inherit;line-height:1.7}.reading-review-form :focus-visible,.review-admin :focus-visible{outline:2px solid #dfbf7e;outline-offset:4px}.reading-review-form textarea{resize:vertical}.review-star-input{min-width:0;padding:0;border:0;margin:0}.review-star-input legend{font-size:14px;margin-bottom:8px}.review-star-input>div{display:grid;grid-template-columns:repeat(5,minmax(0,46px));gap:6px}.review-star-input button{width:100%;min-width:0;height:46px;padding:7px;background:transparent;border:1px solid transparent;border-radius:10px;cursor:pointer}.review-star-input button img{opacity:.24}.review-star-input button.active img{opacity:1}.review-star-input button:hover{background:#ffffff0a}.review-event-benefit{line-height:1.8;margin:0}.review-event-benefit strong{color:#efcf8b}.review-event-benefit small{display:block;color:#adbdcb;font-size:12px;margin-top:6px}.review-character-count{text-align:right;color:#a9b8c5;font-size:12px;margin-top:-10px}.review-privacy-note{color:#a9b7c4;font-size:12px;line-height:1.7;margin:0}.reading-review-form .review-public-consent{display:flex;align-items:flex-start;gap:10px}.review-public-consent input{accent-color:#dfbf7e;width:18px;height:18px;flex-shrink:0;margin-top:3px}.review-coupon-award{margin-top:20px;border:1px dashed #87734b;border-radius:14px;padding:20px;background:#dcc1840b;line-height:1.7}.review-coupon-award>b{color:#eed6a2}.review-coupon-award small{display:block;color:#aebcca}.review-coupon-award a{display:inline-block;margin-top:15px;color:#e5c994}.review-reading-end{height:1px}.review-wallet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}.review-wallet-grid article{display:flex;align-items:center;gap:16px;border:1px dashed #8c7650;border-radius:16px;padding:20px;background:#17232d}.review-wallet-grid article>div{display:grid;gap:6px}.review-wallet-grid strong{font-size:26px;color:#edd2a0}.review-wallet-grid small,.review-wallet-grid p{font-size:12px;color:#b6c1cb;margin:0;line-height:1.6}.review-wallet-grid .unavailable{opacity:.6}.checkout-coupon{margin:20px 0;padding:20px;border:1px solid #716143;border-radius:16px;background:#dcbc7c08}.checkout-coupon label{display:grid;gap:10px;color:#e7d2a9}.checkout-coupon select{max-width:100%;width:100%;background:#0d1822;color:#eee2ca;padding:12px;border:1px solid #65707a;border-radius:10px;font:inherit}.checkout-coupon p{margin:12px 0 0;font-size:13px;color:#acbbc8;line-height:1.7}.checkout-coupon .coupon-price-summary{display:flex;justify-content:space-between;color:#eed3a0}.review-admin{max-width:1000px;margin:0 auto;padding:40px 24px 100px;color:#eee6d8}.review-admin nav{display:flex;gap:20px;margin-bottom:32px}.review-admin h1{color:#e8c88a}.review-admin-controls{display:grid;gap:12px;border:1px solid #394856;background:#13212c;border-radius:18px;padding:24px;margin:24px 0}.review-admin-toggle{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid #30404b}.review-admin-toggle input{width:23px;height:23px;accent-color:#dfbf7e}.review-admin-toggle span{display:grid;gap:6px}.review-admin small{color:#aab8c5;line-height:1.7}.review-admin button,.review-admin select{border:1px solid #8b7751;border-radius:10px;padding:12px 16px;background:#16232e;color:#e6c88e;font:inherit;cursor:pointer}.review-admin button:disabled{opacity:.5;cursor:default}.review-admin-toolbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:24px 0}.review-admin-list{display:grid;gap:16px}.review-admin-item{border:1px solid #45505b;border-radius:18px;padding:14px}.review-admin-item>label{display:flex;gap:10px;align-items:center;padding:12px}.review-admin-item input{accent-color:#dfbf7e;width:20px;height:20px}.review-admin-item .reading-review-card{border:0}.review-admin-order{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px}.review-admin [role=alert]{color:#efaf99}.review-admin [role=status]{color:#d4c28e;line-height:1.7}
@media(max-width:640px){.featured-review-grid,.review-wallet-grid{grid-template-columns:1fr}.review-section-heading{align-items:flex-start;flex-direction:column;gap:4px}.review-section-heading h2,.review-form-heading h2{font-size:22px}.reading-review-card{padding:20px}.reading-review-form{padding:20px;margin:28px -2px}.review-form-heading{gap:12px}.review-form-heading>img{width:34px;height:34px}.review-form-heading span{font-size:12px}.review-admin{padding:24px 16px 100px}.review-admin-controls{padding:18px}.review-admin-toolbar select{width:100%}.review-admin .reading-review-card{padding:12px}.review-admin-item{padding:10px}}
.account-review-button{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:46px;margin-top:10px;border:1px solid #89754e;border-radius:12px;background:#d4b5750c;color:#e8d1a0;font:inherit;font-size:14px;font-weight:600;cursor:pointer}.account-review-button:hover{background:#d4b5751c}.account-review-button:focus-visible{outline:2px solid #dfbf7e;outline-offset:3px}.account-review-dialog{width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:0;border:1px solid #77654a;border-radius:24px;background:#101b25;color:#eee5d7;box-shadow:0 30px 110px #000a;overflow:auto;overscroll-behavior:contain}.account-review-dialog::backdrop{background:#030a11c9;backdrop-filter:blur(5px)}.account-review-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;background:#182630;border-bottom:1px solid #39454f;position:sticky;top:0;z-index:2}.account-review-dialog-heading small{color:#b8c4cf;font-size:13px}.account-review-dialog-heading h2{margin:6px 0 0;color:#edd1a0;font-size:23px}.account-review-dialog-heading>button{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:1px solid #58616a;border-radius:12px;background:#ffffff08;cursor:pointer}.account-review-dialog-body{padding:24px}.account-review-dialog .reading-review-form{margin:0;padding:0;border:0;background:none;border-radius:0}.account-review-dialog .review-form-heading{display:none}.account-review-dialog .reading-review-form form{margin-top:0}.account-review-dialog .reading-review-card{margin-top:6px}.account-review-dialog .product-primary,.review-load-state button{display:block;width:100%;min-height:52px;padding:15px 18px;border:0;border-radius:12px;background:#ddc088;color:#211c14;font:600 15px/1.5 Arial,sans-serif;cursor:pointer}.account-review-dialog .product-primary:disabled{opacity:.5;cursor:default}.account-review-dialog :focus-visible{outline:2px solid #e0c48b;outline-offset:3px}.review-load-state{padding:20px 0;line-height:1.8;color:#c2cbd2}.review-load-state a{color:#e4c58e}.review-preview-note{padding:14px 16px;border-radius:12px;background:#d5bd880c;border:1px solid #635640;font-size:13px;line-height:1.8;color:#c7c0b0;margin:0 0 22px}.reading-review-form>.review-preview-note{margin-top:20px}.account-review-dialog .review-preview-note{margin-top:0}.reading-review-card header b{overflow-wrap:anywhere}.account-review-dialog [role=alert]{color:#efaf99;line-height:1.7}
@media(max-width:640px){.account-review-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:20px}.account-review-dialog-heading{padding:18px}.account-review-dialog-body{padding:20px 18px}.account-review-dialog-heading h2{font-size:21px}}

.reading-review-form.has-review > .review-form-heading {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 24px;
}
.review-saved-consent { display: grid; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #384653; }
.review-saved-consent small { color: #b6c1cb; line-height: 1.7; }
.review-admin-preview-note { padding: 14px 18px; border: 1px dashed #89754e; border-radius: 12px; color: #e2c894; font-size: 13px; line-height: 1.8; }
.review-admin-preview-link { display: inline-block; margin: 14px 0 20px; color: #e4c58e; }
.reading-review-form .review-event-benefit {
  padding: 18px 20px;
  border: 1px solid #806b435c;
  border-radius: 14px;
  background: #ddc0880c;
  line-height: 1.75;
}
.review-event-benefit .review-event-label {
  display: block;
  margin-bottom: 6px;
  color: #cbb685;
  font-size: 12px;
  font-weight: 600;
}
.reading-review-form .review-event-benefit strong {
  display: block;
  font-size: 18px;
  line-height: 1.5;
  word-break: keep-all;
}
.reading-review-form .review-event-benefit p {
  margin: 9px 0 0;
  color: #d4dbe0;
  font-size: 14px;
  line-height: 1.75;
}
@media (max-width: 640px) {
  .reading-review-form .review-event-benefit { padding: 16px; }
  .reading-review-form .review-event-benefit strong { font-size: 17px; }
}

/* Original rendered style: /app/account/account.css */
:root{color-scheme:dark}.account-page{min-height:100svh;padding:32px max(20px,calc((100% - 760px)/2)) 80px;background:radial-gradient(circle at 50% 0,rgba(54,91,104,.3),transparent 32%),#070d14;color:#f2ece2;font-family:Arial,"Noto Sans KR",sans-serif}.account-page>nav:not(.product-bottom-nav){display:flex;justify-content:space-between}.account-page>nav:not(.product-bottom-nav) a{color:#c8bda9;font-size:12px;text-decoration:none}.account-page>header{padding:58px 0 32px}.account-page>header p{margin:0 0 10px;color:#d3ae6d;font-size:10px;letter-spacing:.22em}.account-page>header h1{margin:0;font:700 34px/1.35 "Gowun Batang",serif}.account-page>header span{display:block;margin-top:12px;color:#979da4;font-size:12px}.account-summary{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid rgba(207,172,114,.25);background:rgba(13,24,34,.8)}.account-summary div{padding:20px;border-right:1px solid rgba(207,172,114,.16)}.account-summary div:last-child{border:0}.account-summary small{display:block;color:#8f969d;font-size:10px}.account-summary strong{display:block;margin-top:8px;color:#f1e4ce;font:700 18px "Gowun Batang",serif}.account-purchases{margin-top:42px}.account-section-head{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid #29333d}.account-section-head h2{margin:0;font:700 22px "Gowun Batang",serif}.account-section-head span{color:#77818b;font-size:10px}.account-empty{padding:38px 0;text-align:center;color:#939aa1}.account-empty b{color:#d8d2c8;font-size:14px}.account-empty p{font-size:12px}.account-empty a,.account-restore>a{display:flex;align-items:center;justify-content:space-between;width:min(100%,330px);min-height:52px;margin:22px auto 0;padding:0 17px;background:#8f2430;color:#fff;text-decoration:none;font-weight:800;font-size:12px}.account-purchase-list article{display:grid;grid-template-columns:1fr minmax(220px,.9fr);gap:24px;padding:22px 0;border-bottom:1px solid #202b35}.account-purchase-list small,.account-purchase-list span{display:block;color:#828b94;font-size:10px}.account-purchase-list strong{display:block;margin:7px 0;color:#f0e4cf;font:700 18px "Gowun Batang",serif}.account-purchase-list p{margin:0;color:#9da4aa;font-size:11px}.account-purchase-list code{display:block;margin-top:8px;color:#bbb4aa;font-size:10px;overflow-wrap:anywhere}.account-restore{margin-top:44px;padding:28px;border:1px solid rgba(207,172,114,.28);background:linear-gradient(145deg,#122431,#0d1821)}.account-restore h2{margin:0;font:700 22px "Gowun Batang",serif}.account-restore p{color:#aab0b5;font-size:12px;line-height:1.75}.account-restore>a{margin:20px 0 0;background:#315d69}@media(max-width:600px){.account-page{padding:24px 17px 60px}.account-page>header{padding-top:44px}.account-summary{grid-template-columns:1fr}.account-summary div{border-right:0;border-bottom:1px solid rgba(207,172,114,.16)}.account-purchase-list article{grid-template-columns:1fr;gap:14px}.account-section-head{align-items:flex-start;gap:8px;flex-direction:column}.account-restore{padding:22px}}
:root .account-page>nav:not(.product-bottom-nav) span{display:flex;gap:16px}
.account-legal{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;padding:28px 12px 8px}.account-legal a{color:#8f8375;font-size:11px;text-decoration:underline;text-underline-offset:3px}
.account-support{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;padding:22px;border:1px solid #303c46;background:#0d1720}.account-support h2{margin:0;font:700 18px "Gowun Batang",serif}.account-support p{margin:8px 0 0;color:#919aa1;font-size:11px;line-height:1.65}.account-support>a{display:flex;align-items:center;justify-content:space-between;min-width:150px;padding:13px 14px;background:#233f4b;color:#fff;text-decoration:none;font-size:11px;font-weight:800}@media(max-width:600px){.account-support{align-items:stretch;flex-direction:column}.account-support>a{width:100%}}
.account-free-readings{margin-top:42px}.account-local-note{margin:14px 0 0;color:#929aa1;font-size:11px;line-height:1.7}.account-local-loading{padding:28px 0;color:#929aa1;font-size:12px}.account-free-empty{padding-bottom:18px}.account-free-list article{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;border-bottom:1px solid #202b35}.account-free-list small{display:block;color:#d3ae6d;font-size:10px}.account-free-list strong{display:block;margin:6px 0;color:#f0e4cf;font:700 18px "Gowun Batang",serif}.account-free-list p{margin:0;color:#828b94;font-size:10px}.account-free-actions{display:flex;align-items:center;gap:10px}.account-free-actions button{border:0;cursor:pointer}.account-free-open{display:flex;align-items:center;justify-content:space-between;gap:22px;min-width:190px;padding:14px 15px;background:#315d69;color:#fff;font-size:11px;font-weight:800}.account-free-remove{padding:10px 4px;background:transparent;color:#7f878e;font-size:10px;text-decoration:underline;text-underline-offset:3px}@media(max-width:600px){.account-free-list article{align-items:stretch;flex-direction:column;gap:15px}.account-free-actions{align-items:stretch;flex-direction:column}.account-free-open{width:100%}.account-free-remove{align-self:flex-start}}
.account-page>nav:not(.product-bottom-nav){align-items:center;gap:18px}.account-page>nav:not(.product-bottom-nav) a{white-space:nowrap}.account-page>nav:not(.product-bottom-nav) a:focus-visible,.account-page a:focus-visible,.account-page button:focus-visible{outline:2px solid #d3ae6d;outline-offset:4px}.account-profile{display:flex;align-items:center;flex-wrap:wrap;gap:7px 10px;margin-top:15px;color:#979da4}.account-profile b{color:#d8d2c8;font-size:13px}.account-page>header .account-profile span{display:inline;max-width:100%;margin:0;font-size:11px;overflow-wrap:anywhere}.account-profile small{padding:4px 7px;border:1px solid #34424d;border-radius:999px;color:#a8afb5;font-size:9px}@media(max-width:600px){.account-page>nav:not(.product-bottom-nav){align-items:flex-start;flex-direction:column;gap:14px}.account-page>nav:not(.product-bottom-nav) span{width:100%;justify-content:space-between;gap:10px!important}.account-page>nav:not(.product-bottom-nav) a{font-size:11px}.account-page>header{padding-top:38px}}
.account-empty .account-recovery-link{margin-top:10px;background:#233f4b}.guest-recovery-account{margin-top:20px}.guest-recovery-account>a{background:#8f2430}
.account-purchase-actions{display:flex;align-items:stretch;flex-direction:column;gap:7px;margin-top:14px}.account-purchase-primary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 13px;border:0;background:#315d69;color:#fff;text-decoration:none;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.account-purchase-primary:disabled{cursor:wait;opacity:.72}.account-purchase-actions>small{color:#858e96;font-size:9px;line-height:1.55}.account-purchase-actions>small a{color:#d7b86f;text-decoration:underline;text-underline-offset:2px}@media(max-width:600px){.account-purchase-primary{width:100%}}

.account-reading-identity small { overflow-wrap: anywhere; }

.account-page .account-admin-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 24px;
}
.account-page .account-admin-shortcuts a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 84px;
  padding: 16px;
  border: 1px solid #8b754d;
  border-radius: 16px;
  background: linear-gradient(120deg, #303329, #17232c);
  color: #edd4a0;
  text-decoration: none;
}
.account-page .account-admin-shortcuts a:hover { background: #30382f; }
.account-admin-shortcuts img { flex-shrink: 0; }
.account-admin-shortcuts a > span { display: grid; gap: 4px; flex: 1; min-width: 0; }
.account-admin-shortcuts strong { font-size: 16px; line-height: 1.5; word-break: keep-all; }
.account-admin-shortcuts small { color: #bdc5c9; font-size: 12px; line-height: 1.5; }
@media (max-width: 640px) {
  .account-page .account-admin-shortcuts { grid-template-columns: 1fr; gap: 10px; }
  .account-page .account-admin-shortcuts a { min-height: 74px; }
}

/* Original rendered style: /app/login/login.css */
.login-page{position:relative;min-height:100svh;overflow:hidden;padding:26px 22px 34px;background:radial-gradient(circle at 50% -10%,rgba(58,95,110,.34),transparent 34%),radial-gradient(circle at 15% 75%,rgba(123,75,53,.13),transparent 28%),#070d14;color:#f5eee3;font-family:var(--font-sans,"Pretendard","Noto Sans KR",sans-serif)}
.login-page::before,.login-page::after{position:absolute;content:"";pointer-events:none;border:1px solid rgba(203,168,106,.09);border-radius:50%}.login-page::before{width:520px;height:520px;left:50%;top:42%;transform:translate(-50%,-50%)}.login-page::after{width:650px;height:650px;left:50%;top:42%;transform:translate(-50%,-50%)}
.login-page nav,.login-page footer,.login-card{position:relative;z-index:1}.login-page nav,.login-page footer{width:min(440px,100%);margin:0 auto}.login-page nav a{min-height:44px;display:inline-flex;align-items:center;color:#c9bda9;font-size:12px;text-decoration:none}.login-page nav a:hover{color:#fff}
.login-card{width:min(440px,100%);margin:7vh auto 38px;padding:42px 38px 34px;border:1px solid rgba(207,172,114,.28);border-radius:18px;background:linear-gradient(160deg,rgba(18,31,42,.98),rgba(8,15,23,.98));box-shadow:0 28px 80px rgba(0,0,0,.46);text-align:center}
.login-brand-mark{width:78px;height:78px;margin:0 auto 20px;background:url('/brand-icon.png') center/contain no-repeat;filter:drop-shadow(0 8px 18px rgba(0,0,0,.34))}.login-eyebrow{margin:0;color:#d7ad67;font-size:10px;font-weight:700;letter-spacing:.16em}.login-card h1{margin:12px 0 12px;font:700 31px/1.35 "Gowun Batang",serif;letter-spacing:-.03em}.login-intro{max-width:330px;margin:0 auto 28px;color:#b8b6b1;font-size:14px;line-height:1.7;word-break:keep-all}
.social-login-actions{display:grid;justify-items:stretch;gap:10px;width:min(320px,100%);margin:0 auto}.social-login-actions button{font-family:inherit;cursor:pointer}.provider-login-button{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:52px;padding:0 46px;border:1px solid transparent;border-radius:8px;font-size:15px;font-weight:700;line-height:1;letter-spacing:-.02em;transition:transform .15s ease,filter .15s ease}.provider-login-button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.04)}.provider-login-button:active:not(:disabled){transform:translateY(0)}.provider-login-button:focus-visible{outline:3px solid rgba(91,160,215,.55);outline-offset:3px}.provider-login-button:disabled{cursor:wait;opacity:.62}.provider-login-icon{position:absolute;left:18px;display:grid;place-items:center;width:22px;height:22px}.guest-login{border-color:rgba(215,173,103,.48);background:#142331;color:#f7ead4}.guest-icon{border:1px solid rgba(215,173,103,.55);border-radius:50%;color:#e5bd79;font:700 11px/1 "Gowun Batang",serif}.google-login{border-color:#dadce0;background:#fff;color:#202124}.google-icon{background:url('/auth/google-g.svg') center/20px 20px no-repeat}.kakao-login{border-color:#fee500;background:#fee500;color:#191919}.kakao-icon{background:url('/auth/kakao-bubble.svg') center/21px 20px no-repeat}
.login-progress{margin:3px 0 0;color:#aeb4b9;font-size:12px}.login-error{margin:14px 0 0;padding:12px 13px;border:1px solid rgba(214,112,98,.35);border-radius:8px;background:rgba(139,43,37,.2);color:#ffd9d2;font-size:13px;line-height:1.55}.login-card>small{display:block;margin-top:22px;padding-top:20px;border-top:1px solid rgba(207,172,114,.13);color:#8f969d;font-size:11px;line-height:1.7;word-break:keep-all}.login-page footer{display:flex;justify-content:center;gap:18px}.login-page footer a{min-height:44px;display:inline-flex;align-items:center;color:#8d8f91;font-size:11px;text-underline-offset:3px}
@media(max-width:560px){.login-page{padding:20px 15px 28px}.login-page::before{width:390px;height:390px}.login-page::after{display:none}.login-card{margin:5vh auto 30px;padding:34px 20px 28px;border-radius:15px}.login-brand-mark{width:68px;height:68px}.login-card h1{font-size:28px}.login-intro{font-size:13px}}

/* Original rendered style: /app/support/support.css */
:root{color-scheme:dark}.support-page{min-height:100svh;padding:30px max(18px,calc((100% - 760px)/2)) 80px;background:radial-gradient(circle at 50% 0,rgba(59,88,105,.3),transparent 32%),#070d14;color:#eee7dd;font-family:Arial,"Noto Sans KR",sans-serif}.support-page>nav{display:flex;justify-content:space-between}.support-page>nav a{color:#c8bda9;text-decoration:none;font-size:12px}.support-page>header{padding:56px 0 30px}.support-page>header p{margin:0 0 10px;color:#d5b36f;font-size:9px;letter-spacing:.2em}.support-page>header h1{margin:0;font:700 34px/1.35 "Gowun Batang",serif}.support-page>header span{display:block;margin-top:13px;color:#aaa69e;font-size:13px;line-height:1.8}.support-notice{margin:0 0 22px;padding:15px 17px;border:1px solid #526b5b;background:#142219;color:#cbe0d0;font-size:12px;line-height:1.7}.support-compose{padding:26px;border:1px solid #343b43;background:#111923}.support-compose h2,.support-history h2{margin:0 0 20px;font:700 21px "Gowun Batang",serif}.support-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.support-compose label{display:block;color:#d4cec4;font-size:11px}.support-compose label>b{color:#d5ab64}.support-compose label>small{color:#777f87}.support-compose select,.support-compose textarea{display:block;width:100%;margin-top:8px;border:1px solid #3e4851;background:#090f16;color:#f2ece2;padding:0 12px;outline:none}.support-compose select{height:48px}.support-compose textarea{min-height:150px;padding-top:13px;resize:vertical;font:400 13px/1.7 Arial,"Noto Sans KR",sans-serif}.support-compose label>textarea+small{display:block;margin-top:6px;color:#747d86;text-align:right}.support-compose select:focus,.support-compose textarea:focus{border-color:#c49f61}.support-warning{margin:14px 0;color:#b99b83;font-size:11px;line-height:1.65}.support-compose button{width:100%;min-height:53px;border:0;background:#8f2430;color:#fff;font-weight:800}.support-compose button:disabled{opacity:.5}.support-history{margin-top:46px}.support-history>div:first-child{display:flex;justify-content:space-between;border-bottom:1px solid #303943}.support-history>div:first-child span{color:#c7a666;font-size:11px}.support-empty{color:#808892;padding:28px 0}.support-history>article{padding:22px 0;border-bottom:1px solid #26313a}.support-history article>header{display:flex;align-items:center;gap:10px}.support-history article>header b{font-size:12px}.support-history time{margin-left:auto;color:#7f8890;font-size:10px}.support-state{padding:5px 7px;border:1px solid #6e4a4e;color:#d9b6ba;font-size:9px}.support-state.in_progress{border-color:#76613e;color:#dfc38d}.support-state.resolved{border-color:#466b54;color:#b9d9c2}.support-history code{display:block;margin-top:12px;color:#7f8992;font-size:9px;overflow-wrap:anywhere}.support-history article>p{margin:14px 0 0;color:#c9c3b9;font-size:13px;line-height:1.8;white-space:pre-wrap}.support-reply{margin-top:18px;padding:18px;border-left:2px solid #b9965e;background:#121f28}.support-reply b{color:#ddc28f;font-size:11px}.support-reply p{margin:8px 0;color:#e0d8cd;font-size:12px;line-height:1.8;white-space:pre-wrap}.support-reply small{color:#77828b;font-size:9px}.refund-request-note{margin:15px 0;padding:16px;border:1px solid #715846;background:#211a16}.refund-request-note b{color:#e0c18e;font-size:11px}.refund-request-note p{margin:8px 0;color:#c8b9aa;font-size:11px;line-height:1.75}.refund-request-note a{color:#e0c18e;font-size:10px;text-underline-offset:3px}@media(max-width:600px){.support-page{padding-top:24px}.support-page>header{padding-top:44px}.support-form-grid{grid-template-columns:1fr}.support-compose{padding:20px}.support-history article>header{flex-wrap:wrap}.support-history time{width:100%;margin:0}}
.support-guest-entry{display:grid;gap:14px;padding:26px;border:1px solid #343b43;background:#111923}.support-guest-entry>div{padding:19px;border:1px solid #293641;background:#0b141d}.support-guest-entry b{font:700 18px "Gowun Batang",serif}.support-guest-entry p{margin:8px 0 15px;color:#969ea5;font-size:12px;line-height:1.7}.support-guest-entry a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 14px;background:#315d69;color:#fff;text-decoration:none;font-size:11px;font-weight:800}.support-guest-entry>small{color:#8f969d;font-size:10px;line-height:1.65}@media(max-width:600px){.support-guest-entry{padding:18px}}

/* Original rendered style: /app/support/support-actions.css */
.support-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.support-notice span {
  flex: 1;
}

.support-notice a,
.support-notice button {
  flex: 0 0 auto;
  border: 1px solid #6f8a78;
  background: #1c3024;
  color: #e4f0e7;
  padding: 8px 11px;
  text-decoration: none;
  font: 700 11px Arial, "Noto Sans KR", sans-serif;
  cursor: pointer;
}

@media (max-width: 600px) {
  .support-notice {
    align-items: stretch;
    flex-direction: column;
  }

  .support-notice a,
  .support-notice button {
    text-align: center;
  }
}

/* Original rendered style: /app/guest-recovery/guest-recovery.css */
:root{color-scheme:dark}.guest-recovery-page{min-height:100svh;padding:28px 18px 48px;background:radial-gradient(circle at 50% 10%,rgba(49,93,105,.34),transparent 34%),#060d14;color:#f4ecdf;font-family:Arial,"Noto Sans KR",sans-serif}.guest-recovery-page>nav{display:flex;justify-content:space-between;width:min(100%,500px);margin:0 auto}.guest-recovery-page a{color:#cdbb9e;font-size:11px;text-decoration:none}.guest-recovery-page>section{width:min(100%,500px);margin:48px auto 0;padding:34px 30px;border:1px solid rgba(213,178,117,.36);border-radius:18px;background:linear-gradient(155deg,rgba(15,30,41,.97),rgba(6,13,20,.98));box-shadow:0 28px 80px rgba(0,0,0,.38);text-align:center}.guest-recovery-medallion{display:block;width:72px;height:72px;margin:0 auto 16px;background:url('/brand-icon.png') center/contain no-repeat}.guest-recovery-page section>p{margin:0;color:#d5ad6b;font-size:9px;font-weight:800;letter-spacing:.18em}.guest-recovery-page h1{margin:10px 0 8px;font:700 28px/1.4 "Gowun Batang",serif}.guest-recovery-page section>small{display:block;color:#a9aaa8;font-size:11px;line-height:1.65}.guest-recovery-page form{display:grid;gap:13px;margin-top:26px;text-align:left}.guest-recovery-page label{display:grid;gap:6px}.guest-recovery-page label span{color:#d8d0c3;font-size:11px;font-weight:800}.guest-recovery-page input{width:100%;height:50px;padding:0 14px;border:1px solid #3a4650;border-radius:8px;background:#0b1721;color:#fff;font-size:13px;outline:none}.guest-recovery-page input:focus{border-color:#d4ae70;box-shadow:0 0 0 3px rgba(212,174,112,.14)}.guest-recovery-page button{height:52px;margin-top:5px;border:0;border-radius:8px;background:#8f2430;color:#fff;font-size:13px;font-weight:800;cursor:pointer}.guest-recovery-page button:disabled{opacity:.45;cursor:not-allowed}.guest-recovery-email{margin-top:22px;padding:20px 0 4px;border-top:1px solid #293540;text-align:left}.guest-recovery-email b{font:700 15px "Gowun Batang",serif}.guest-recovery-email p{margin:8px 0 12px;color:#a9aaa8;font-size:10px;line-height:1.7}.guest-recovery-page .guest-recovery-email-button{width:100%;margin:0;border:1px solid rgba(213,178,117,.55);background:transparent;color:#e8c68e}.guest-recovery-page .guest-recovery-email-button:not(:disabled):hover{background:rgba(213,178,117,.1)}.guest-recovery-status{margin-top:15px;padding:11px;border:1px solid rgba(213,178,117,.3);background:#101e28;color:#f0dcc0;font-size:11px;line-height:1.6}.guest-recovery-help{margin-top:24px;padding-top:20px;border-top:1px solid #293540;text-align:left}.guest-recovery-help b{font:700 14px "Gowun Batang",serif}.guest-recovery-help p{margin:8px 0 0;color:#91999f;font-size:10px;line-height:1.7}.guest-recovery-page>footer{display:flex;justify-content:center;gap:18px;margin:28px auto 0}@media(max-width:520px){.guest-recovery-page{padding:20px 14px 40px}.guest-recovery-page>section{margin-top:32px;padding:28px 20px}.guest-recovery-page h1{font-size:25px}}