/* 퍼널 적용판 추가 스타일 (base.css는 원본 데모 그대로) */
#app[data-screen=home] #topbar{display:flex}
#app[data-screen=home] #backdrop,#app[data-screen=home]>.shade{display:block}
#app[data-screen=home] .shade{background:linear-gradient(180deg,#10040610 0%,transparent 40%,#13070888 62%,#140809f4 82%,#140809 100%)}
#app[data-screen=result] #backdrop,#app[data-screen=rename] #backdrop{filter:blur(9px) brightness(.25);transform:scale(1.08)}
#app[data-screen=result] .shade,#app[data-screen=rename] .shade{background:linear-gradient(#22100fb8,#140809f2)}

.home .ad-line{font:400 17px/1.6 var(--serif);color:#efe2cf;margin:0 0 4px;letter-spacing:.5px}
.home .primary small{font-weight:400;font-size:13px;margin-left:8px;color:#4a5a6c}

.concerns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.concerns button{min-height:64px;border:1px solid #ffffff1c;border-radius:8px;background:#14233488;font:400 18px var(--serif);color:#e6e2da}
.concerns button:first-child{grid-column:span 2}
.concerns button.selected{background:#b8a28324;border-color:#ccb493;color:#f4e5d2}

.res{padding:2px 2px 8px}
#res{flex:1}
.res section{margin:0 0 30px}
.res .kicker{font-size:11px;letter-spacing:2px;color:#bba791;margin-bottom:10px;display:block}
.res p{font-size:16px;line-height:1.95;color:#cbd2db;word-break:keep-all;margin:0 0 14px}
.res b{font-weight:500;color:#f0e8da}
.res .samsin{font:400 18px/1.9 var(--serif);color:#eadfce;word-break:keep-all;margin:6px 0 0}
.pum-badge{display:inline-flex;align-items:baseline;gap:6px;border:1px solid #d9c3a35a;border-radius:30px;padding:7px 16px;margin:6px 0 4px;color:#f2e2c9}
.pum-badge strong{font:500 26px var(--serif)}
.pum-scale{display:flex;gap:4px;justify-content:center;margin:12px auto 4px;max-width:260px}
.pum-scale i{flex:1;height:4px;border-radius:4px;background:#ffffff14}
.pum-scale i.on{background:#e2cfb5}
.pum-scale i.goal{background:#e8b4bc88}
.pum-legend{font-size:11px;color:#8799ae;display:flex;justify-content:space-between;max-width:260px;margin:0 auto}

.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0 18px}
.pillar{text-align:center;border:1px solid var(--line);border-radius:6px;padding:10px 4px 9px;background:#ffffff04}
.pillar span{display:block;font-size:11px;color:#8ea0b4;margin-bottom:6px}
.pillar strong{display:block;font:400 24px/1.25 var(--serif);color:#efe6d6}
.pillar small{display:block;font-size:11px;color:#9eafc1;margin-top:5px}
.pillar.day{border-color:#cdb79a66}
.name-els{display:flex;gap:8px;justify-content:center;margin:16px 0}
.name-els div{flex:1;max-width:84px;text-align:center;padding:12px 4px;border-top:1px solid #d5c6b67c;border-bottom:1px solid #d5c6b633}
.name-els strong{display:block;font:400 30px var(--serif)}
.name-els small{display:block;font-size:11px;color:#9eafc1;margin-top:6px}
.name-els div.flaw{background:#93364e22;border-top-color:#e8b4bc}
.el-row{display:flex;align-items:center;gap:12px;margin:9px 0}
.el-row label{width:24px;font:16px var(--serif)}
.el-row .rail{height:5px;background:#ffffff0e;flex:1;border-radius:8px;overflow:hidden}
.el-row .fill{height:100%;border-radius:8px;transform-origin:left;animation:growBar 1s ease both}
.el-row span{font-size:12px;color:#aebaca;width:30px;text-align:right}

.flaw-box{border:1px solid #e8b4bc44;background:linear-gradient(135deg,#93364e1c,#10213100);border-radius:8px;padding:18px 18px 6px}
.goal-line{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 14px;font:400 22px var(--serif);color:#f2e2c9}
.goal-line em{font-style:normal;color:#8799ae;font-size:16px}

.locked-list{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.locked-item{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;border-top:1px solid #ffffff0d}
.locked-item:first-child{border-top:0}
.locked-item .no{font-size:11px;color:#bba791;letter-spacing:1px;padding-top:3px;flex-shrink:0}
.locked-item div{flex:1;min-width:0}
.locked-item strong{display:block;font:400 17px/1.5 var(--serif);color:#e8e1d5;word-break:keep-all}
.locked-item p{margin:6px 0 0!important;font-size:13px!important;line-height:1.7!important;filter:blur(5px);user-select:none;color:#b8c3cf!important}
.locked-item .lock{font-size:13px;color:#bba791;flex-shrink:0;padding-top:3px}

.sticky-cta{position:sticky;bottom:0;padding:14px 0 2px;background:linear-gradient(transparent,#140809 30%)}
.price-line{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:4px 0 14px}
.price-line s{color:#7d8ea2;font-size:14px}
.price-line strong{font:500 30px var(--serif);color:#f4e8d6}
.plans{display:grid;gap:10px;margin:16px 0}
.plan{display:grid;grid-template-columns:1fr auto;gap:2px 12px;text-align:left;padding:16px 18px;border:1px solid #ffffff22;border-radius:8px;background:#14233488}
.plan.selected{border-color:#ccb493;background:linear-gradient(135deg,#9c29462a,#526d8120)}
.plan-name{font:400 18px var(--serif);color:#f0e8da;word-break:keep-all}
.plan-sub{grid-column:1;font-size:12px;color:#9eafc1}
.plan-price{grid-column:2;grid-row:1/3;align-self:center;text-align:right}
.plan-price s{display:block;font-size:12px;color:#7d8ea2}
.plan-price strong{font:500 20px var(--serif);color:#f4e8d6}
.review-card{border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin:10px 0;font-size:14px;line-height:1.75;color:#c5cfda}
.review-card small{display:block;color:#8799ae;font-size:11px;margin-top:6px}
.reason-table{width:100%;border-collapse:collapse;font-size:13px;margin:14px 0 18px}
.reason-table th,.reason-table td{border-bottom:1px solid #ffffff12;padding:10px 4px;text-align:left;color:#cbd2db;font-weight:400}
.reason-table th{color:#8ea0b4;font-size:11px;letter-spacing:1px}
.reason-table td.plus{color:#a9d3c3}.reason-table td.minus{color:#e8b4bc}
.rename-peek{border:1px solid #c0a68765;border-radius:8px;padding:20px;text-align:center;background:linear-gradient(145deg,#64343e26,#102131);margin:18px 0}
.rename-peek strong{display:block;font:500 34px var(--serif);letter-spacing:4px;color:#f4e8d6;margin:6px 0}
.months{display:flex;gap:8px;justify-content:center;margin:14px 0}
.months span{border:1px solid #e8b4bc66;border-radius:30px;padding:7px 14px;font:400 17px var(--serif);color:#f0dfe2}
.demo-flag{align-self:center;flex-shrink:0;margin:-8px 0 12px;font-size:10px;letter-spacing:1px;color:#d9b9a0;border:1px solid #dcbea12c;border-radius:20px;padding:3px 9px;background:#14080988;pointer-events:none}

/* 세로 웹툰 (청월당 흐름) */
#app[data-screen=webtoon] #backdrop,#app[data-screen=webtoon]>.shade{opacity:0}
.webtoon{padding:0!important}
#toon{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
#toon::-webkit-scrollbar{display:none}
.toon-panel{position:relative;min-height:600px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;padding:90px 26px 36px;opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.toon-panel.in{opacity:1;transform:none}
.toon-cap{position:relative;z-index:1;margin:0;font:400 20px/1.85 var(--serif);text-align:center;color:#efe6d6;word-break:keep-all;text-shadow:0 2px 10px #000a}
.toon-art.toon-photo{position:absolute;inset:0;display:block;background-size:cover;background-position:center}
.toon-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(#14080900 30%,#140809cc 75%,#140809)}
.toon-panel.path{min-height:680px;justify-content:flex-end}
.toon-art{position:relative;display:grid;place-items:center}
.toon-glow:before{content:'';position:absolute;inset:-18%;background:radial-gradient(circle,#f1d9c22e,transparent 65%);border-radius:50%}
.toon-flower{width:220px;height:auto;filter:drop-shadow(0 0 26px #afc7e830)}
.in .toon-flower.grow{animation:toonGrow 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes toonGrow{from{transform:scale(.25) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}
.toon-seal{position:absolute;font:500 64px var(--serif);color:#e7c77c;text-shadow:0 0 18px #e7c77c99,0 2px 6px #0008;opacity:0;transform:scale(1.4)}
.in .toon-seal{animation:toonSeal 1.4s .7s ease both}
@keyframes toonSeal{to{opacity:.95;transform:none}}
.toon-pair{display:flex;gap:18px}
.toon-pair figure{margin:0;text-align:center}
.toon-pair .toon-flower{width:140px}
.toon-pair figcaption{font-size:12px;color:#aebdca;margin-top:8px}
.toon-flower.faded{filter:grayscale(.85) sepia(.35) brightness(.55);transform:rotate(18deg) translateY(10px) scale(.9)}
.toon-scale{display:flex;align-items:flex-end;gap:3px}
.toon-scale div{width:34px;text-align:center}
.toon-scale img{width:100%;filter:grayscale(var(--k)) sepia(calc(var(--k) * .4)) brightness(calc(1 - var(--k) * .5));transform:rotate(calc(var(--k) * 30deg)) scale(calc(1 - var(--k) * .35));transform-origin:bottom center}
.toon-scale span{display:block;font-size:10px;color:#aebdca;margin-top:6px}
.toon-note{margin:-6px 0 0;font-size:12px;color:#8799ae}
.toon-panel.samsin{min-height:780px;justify-content:flex-end;padding-bottom:24px}
.toon-samsin{background-position:center 12%}
.toon-samsin:after{background:linear-gradient(#14080900 45%,#140809b3 80%,#140809)}
.toon-bubble{position:relative;z-index:1;margin:0 0 12px;max-width:290px;background:#f6efe3;color:#172432;font:500 16px/1.7 var(--serif);padding:13px 17px;border-radius:16px;word-break:keep-all;box-shadow:0 8px 24px #0006;opacity:0;transform:translateY(10px)}
.toon-bubbles{position:relative;z-index:1;width:100%;display:flex;flex-direction:column}
.toon-bubble.b0{align-self:flex-start}
.toon-bubble.b1{align-self:flex-end}
.in .toon-bubble{animation:toonBubble .7s ease both}
.in .toon-bubble.b1{animation-delay:1s}
@keyframes toonBubble{to{opacity:1;transform:none}}
.toon-end{padding:10px 26px 110px}
.toon-skip{position:absolute;right:14px;bottom:16px;z-index:5;font-size:12px;background:#140809d9;border:1px solid #ffffff2e;border-radius:20px;padding:9px 13px;color:#e4e6e7}

/* 대화형 입력 */
#app[data-screen=ask] .shade{background:linear-gradient(180deg,#14080920 0%,transparent 30%,#140809a8 55%,#140809f2 78%)}
.ask{justify-content:flex-end}
.ask-dots{position:absolute;top:96px;left:0;right:0}
.ask-box{background:linear-gradient(135deg,#102132eb,#07111bf2);border:1px solid #e7e1d129;border-radius:6px;padding:18px 18px 14px;backdrop-filter:blur(12px)}
.ask-box .speaker{display:block;font-size:12px;letter-spacing:2px;color:#d6c1a5}
.ask-q{font:400 21px/1.7 var(--serif);margin:8px 0 16px;color:#f2ead9;word-break:keep-all}
.ask-box .nav-line{margin-top:12px}
.ask-box .concerns{margin-top:2px}
.ask-box .error{min-height:0;margin:8px 0 0}
.time-row{display:flex;gap:8px;margin-top:10px}
.time-row select{flex:1;appearance:none;-webkit-appearance:none;text-align:center;background-image:none}
select.input option{color:#122030}

/* 명리 판정 표 */
.judge{border:1px solid var(--line);border-radius:8px;margin:14px 0 16px;background:#ffffff04}
.judge-row{display:grid;grid-template-columns:86px 1fr;gap:1px 10px;padding:10px 14px;border-top:1px solid #ffffff0d}
.judge-row:first-child{border-top:0}
.judge-row span{grid-row:1/3;font-size:12px;color:#8ea0b4;align-self:center}
.judge-row strong{font:400 17px var(--serif);color:#efe6d6}
.judge-row small{font-size:11px;color:#9eafc1}
.judge-row.yong strong{color:#a9d3c3}
.judge-row.gi strong{color:#e8b4bc}
.name-els em{display:block;font-style:normal;font-size:10px;margin-top:5px;color:#9eafc1}
.name-els .role-yong em,.name-els .role-hee em{color:#a9d3c3}
.name-els .role-gi em,.name-els .role-heavy em{color:#e8b4bc}

/* 꽃뿌리 컷, 스크롤 안내 */
.toon-bud{width:190px;height:190px;border-radius:50%;background-size:430%;background-position:93% 66%;background-repeat:no-repeat;filter:drop-shadow(0 0 22px #e8b4bc55)}
.in .toon-bud{animation:budPulse 3.2s ease-in-out infinite}
@keyframes budPulse{50%{transform:scale(1.05);filter:drop-shadow(0 0 34px #e8b4bc88)}}
.toon-scroll{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:0;padding:10px 14px 8px;border-radius:12px;background:#140809b3;border:1px solid #ffffff22;pointer-events:none;transition:opacity .4s}
.toon-scroll span{font-size:11px;letter-spacing:2px;color:#e4e6e7;margin-bottom:4px}
.toon-scroll i{width:12px;height:12px;border-right:2px solid #e2cfb5;border-bottom:2px solid #e2cfb5;transform:rotate(45deg);margin-top:-5px;animation:scrollCue 1.4s ease-in-out infinite}
.toon-scroll i+i{animation-delay:.2s;opacity:.6}
@keyframes scrollCue{0%,100%{transform:translateY(-3px) rotate(45deg);opacity:.3}50%{transform:translateY(4px) rotate(45deg);opacity:1}}
.toon-scroll.gone{opacity:0}

/* 로딩 체크리스트 (천기문 방식) */
.loading-list{padding-top:88px}
.load-seal{font:500 64px var(--serif);text-align:center;color:#f2e2c9;margin:6px 0 2px}
.load-head{display:flex;justify-content:space-between;font-size:12px;color:#aebdca;margin:16px 0 6px}
.load-head strong{font:500 18px var(--serif);color:#f2e2c9}
.progress-track.wide{width:100%;margin:0 0 14px}
.load-steps{list-style:none;margin:0;padding:0;overflow:hidden}
.load-steps li{font-size:14px;line-height:1.5;color:#5f7184;padding:7px 0 7px 26px;position:relative;transition:color .3s}
.load-steps li:before{content:'';position:absolute;left:2px;top:10px;width:12px;height:12px;border-radius:50%;border:1px solid #5f7184}
.load-steps li.done{color:#c8d2dc}
.load-steps li.done:before{content:'✓';border:0;top:6px;color:#a9d3c3;font-size:14px}
.load-steps li.hot.done{color:#f0dfe2}
.load-steps li.hot.done:before{content:'●';color:#e8b4bc;font-size:10px;top:9px}
.load-steps li b{color:#e8b4bc;font-weight:500}

/* 무료 결과 (천기문 이현 구조) */
.r-hero{text-align:center;margin-bottom:26px}
.r-hero .flower-wrap{height:170px;margin:6px auto 0;max-width:220px}
.r-hero .flower{width:100%;height:100%;object-fit:contain}
.r-grade{display:flex;flex-direction:column;align-items:center;margin-top:6px}
.r-grade span{font-size:11px;letter-spacing:2px;color:#bba791}
.r-grade strong{font:500 46px/1.15 var(--serif);color:#f4e8d6}
.r-title{font:500 26px/1.5 var(--serif);margin:14px 0 6px;color:#f2ead9}
.r-story p,.r-chapter p{font-size:16px;line-height:1.95;color:#cbd2db;word-break:keep-all;margin:0 0 16px}
.r-story b,.r-chapter b{color:#f0e8da;font-weight:500}
.r-turn{font:500 21px var(--serif)!important;color:#f2e2c9!important;text-align:center;margin:6px 0 18px!important}
.diag{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:6px 0 20px;background:#ffffff04}
.diag-row{display:grid;grid-template-columns:118px 1fr 30px;align-items:center;gap:10px;margin:8px 0}
.diag-row span{font-size:12px;color:#aebdca}
.diag-row .rail{height:6px;background:#ffffff10;border-radius:6px;overflow:hidden}
.diag-row .rail i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#c9a55a,#e8b4bc);transform-origin:left;animation:growBar 1.1s ease both}
.diag-row b{font:500 16px var(--serif);color:#f2e2c9;text-align:right}
.cliff-q{font:400 18px/1.7 var(--serif)!important;color:#eadfce!important;margin:20px 0 10px!important}
.cliff-lock{border:1px dashed #e8b4bc66;border-radius:8px;padding:12px 14px;font-size:15px!important;color:#f0dfe2!important;background:#93364e14;margin:0 0 4px!important}
.cliff-note{font-size:11px!important;color:#7d8ea2!important;text-align:center;margin:0 0 6px!important}
.combo-card{margin:30px 0;border:1px solid #c0a68755;border-radius:10px;padding:20px 18px;text-align:center;background:linear-gradient(160deg,#64343e22,#10213166)}
.combo-row{display:flex;flex-direction:column;align-items:center}
.combo-row span{font-size:11px;letter-spacing:2px;color:#bba791}
.combo-row strong{font:500 34px var(--serif);color:#f4e8d6;margin:2px 0}
.combo-row small{font-size:12px;color:#aebdca}
.combo-plus{font:300 24px var(--serif);color:#8799ae;margin:6px 0}
.combo-eq{font-size:12px;color:#8799ae;margin:12px 0 4px}
.combo-card h3{font:500 21px/1.5 var(--serif);color:#f2e2c9;margin:0 0 12px;word-break:keep-all}
.combo-share{font-size:14px;color:#cbd2db;line-height:1.7;margin:0 0 4px}
.combo-share b{font:500 20px var(--serif);color:#e8b4bc}
.r-chapter{margin:34px 0}
.r-chapter h3{font:500 23px var(--serif);text-align:center;margin:4px 0 6px;color:#f2ead9}
.sec-mark{text-align:center;font:400 12px var(--serif);letter-spacing:4px;color:#c9a55a;margin-bottom:6px}
.char-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:14px 0}
.char-grid span{display:flex;flex-direction:column;align-items:center;padding:8px 0 6px;border:1px solid var(--line);border-radius:6px;font:400 20px var(--serif);color:#8a9aac}
.char-grid span small{font-size:10px;margin-top:3px;font-family:var(--sans)}
.char-grid span.yong,.char-grid span.hee{color:#a9d3c3;border-color:#a9d3c355}
.char-grid span.gi{color:#e8b4bc;border-color:#e8b4bc55}
.r-chapter .flaw-box{margin:18px 0}
.r-toc{margin:34px 0}
.toc-part{border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin:10px 0;background:#ffffff03}
.toc-part h4{font:500 16px var(--serif);color:#f2e2c9;margin:0 0 8px}
.toc-part p{font-size:13px;line-height:1.7;color:#b8c3cf;margin:5px 0;word-break:keep-all}
.toc-part em{font-style:normal;font-size:10px;color:#c9a55a;border:1px solid #c9a55a66;border-radius:10px;padding:1px 6px;margin-left:4px}
.final-offer{margin:34px 0;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 4px}
.final-offer h3{font:500 22px/1.6 var(--serif);color:#f2ead9;margin:6px 0 14px}
.final-offer ul{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:6px}
.final-offer li{font-size:14px;color:#e6e2da;border:1px solid #c0a68744;border-radius:20px;padding:7px 12px}
.final-offer p{font-size:14px;line-height:1.8;color:#b8c3cf;margin:0 0 14px}
.unlock{display:flex;align-items:center;gap:10px}
.unlock-bar{flex:1;height:6px;background:#ffffff10;border-radius:6px;overflow:hidden}
.unlock-bar i{display:block;height:100%;background:#e2cfb5}
.unlock span{font-size:12px;color:#aebdca}
.r-reviews h4,.r-plans h4{font:500 18px var(--serif);text-align:center;color:#f2ead9;margin:30px 0 12px}
.r-plans{padding-bottom:20px}
.sticky-cta.gone{opacity:0;pointer-events:none}
.sticky-cta{transition:opacity .3s}
#app[data-screen=loading] #backdrop{filter:brightness(.62);transform:scale(1.04)}
#app[data-screen=loading] .shade{background:linear-gradient(180deg,#14080933 0%,#14080955 38%,#140809cc 70%,#140809f2 100%)}
#app[data-screen=loading] .loading h2,#app[data-screen=loading] .load-label{text-shadow:0 2px 12px #000c}

/* 애니메이션 중 브라우저가 스크롤을 멋대로 옮기지 않게 */
#res,#toon,.report-body{overflow-anchor:none}

/* 입력: 년·월·일 / 시·분 고르기를 잘 보이게, 고민은 목록으로 */
.date-row,.time-row{display:grid;gap:8px;margin-top:10px}
.date-row{grid-template-columns:1.4fr 1fr 1fr}
.time-row{grid-template-columns:1fr 1fr}
.ask-box select.input{appearance:none;-webkit-appearance:none;text-align:center;text-align-last:center;background:#22364b;border:1px solid #ffffff3d;color:#f6efe3;font-size:16px;min-height:52px;padding:12px 8px}
.ask-box select.input:focus{outline:2px solid #e2cfb5;outline-offset:1px}
.ask-box select.input option{background:#f6efe3;color:#122030}
.ask-box .segments button{background:#1b2c3f;border-color:#ffffff33;color:#c7d1dc;font-size:15px;min-height:46px}
.ask-box .segments button.selected{background:#e8dcc8;border-color:#e8dcc8;color:#14202c;font-weight:600}
.concern-list{display:grid;gap:8px}
.concern-list button{display:flex;align-items:center;gap:14px;text-align:left;padding:12px 14px;border:1px solid #ffffff22;border-radius:10px;background:#16263899;color:#e6e2da;transition:background .2s,border-color .2s}
.concern-list button:hover{border-color:#ccb49388}
.concern-list button.selected{background:#b8a28330;border-color:#ccb493}
.c-mark{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:1px solid #c9a55a66;font:500 18px var(--serif);color:#e7c77c}
.c-text{flex:1;display:flex;flex-direction:column;gap:2px}
.c-text strong{font:500 17px var(--serif);color:#f2ead9}
.c-text small{font-size:12px;color:#9eafc1}
.c-go{color:#8799ae;font-size:20px}

/* 한자 고르기 */
.hanja-slots{display:flex;gap:8px;justify-content:center;margin-bottom:10px}
.hanja-slot{flex:1;max-width:96px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 8px;border:1px solid #ffffff2e;border-radius:10px;background:#1b2c3f}
.hanja-slot strong{font:500 30px/1.2 var(--serif);color:#8a9aac}
.hanja-slot.set strong{color:#f4e8d6}
.hanja-slot small{font-size:11px;color:#9eafc1;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hanja-slot.open{border-color:#e2cfb5;box-shadow:0 0 0 1px #e2cfb5 inset}
.hanja-pick{border:1px solid #ffffff1f;border-radius:10px;padding:10px;background:#0f1d2c}
.hanja-pick .input{min-height:42px;font-size:14px;padding:10px 12px}
.hanja-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px;max-height:210px;overflow:auto;overscroll-behavior:contain}
.hanja-grid button{min-width:0;display:flex;flex-direction:column;align-items:center;padding:8px 2px 6px;border:1px solid #ffffff1f;border-radius:8px;background:#1b2c3f}
.hanja-grid button strong{font:400 24px/1.2 var(--serif);color:#f2ead9}
.hanja-grid button small{display:block;width:100%;text-align:center;font-size:10px;color:#aebdca;margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hanja-grid button.selected{background:#e8dcc8;border-color:#e8dcc8}
.hanja-grid button.selected strong,.hanja-grid button.selected small{color:#14202c}

/* 성명학 4요소 */
.four{border:1px solid #c0a68744;border-radius:10px;padding:14px;margin:16px 0;background:#ffffff04}
.four-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.four-head span{font-size:12px;letter-spacing:2px;color:#bba791}
.four-head strong{font:500 26px var(--serif);color:#f4e8d6}
.four-head small{font-size:12px;color:#8799ae;margin-left:2px}
.gyeok{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.gyeok div{text-align:center;border:1px solid var(--line);border-radius:8px;padding:8px 2px}
.gyeok span{display:block;font-size:11px;color:#8ea0b4}
.gyeok strong{display:block;font:500 20px var(--serif);color:#efe6d6}
.gyeok small{display:block;font-size:10px;color:#aebdca}
.gyeok .plus{border-color:#a9d3c355}.gyeok .plus strong{color:#a9d3c3}
.gyeok .minus{border-color:#e8b4bc55}.gyeok .minus strong{color:#e8b4bc}

/* 새 이름 결과 */
.name-card{border:1px solid #c0a68755;border-radius:10px;padding:14px;margin:14px 0;background:linear-gradient(160deg,#64343e1a,#10213155)}
.name-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.name-card-head .no{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#c9a55a;color:#14202c;font-size:12px;font-weight:600}
.name-card-head strong{font:500 26px var(--serif);color:#f4e8d6;letter-spacing:2px}
.name-card-head .hj{font:400 18px var(--serif);color:#d6c1a5;letter-spacing:2px}
.name-card-head .pill{margin-left:auto}
.name-card .reason-table{font-size:12px;margin:8px 0}

/* 한자 단계 체크 칸 */
.hanja-checks{display:grid;gap:8px;margin-top:10px}
.check-row{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid #ffffff26;border-radius:10px;background:#16263899;cursor:pointer}
.check-row input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;border:2px solid #aebdca;border-radius:6px;margin:1px 0 0;display:grid;place-items:center}
.check-row input:checked{background:#e8dcc8;border-color:#e8dcc8}
.check-row input:checked:after{content:'✓';color:#14202c;font-weight:800;font-size:14px}
.check-row span{display:flex;flex-direction:column;gap:3px}
.check-row b{font-size:15px;color:#f2ead9}
.check-row small{font-size:12px;color:#9eafc1;line-height:1.6}
.check-row.on{border-color:#ccb493;background:#b8a28324}
/* 숫자로 치는 생년월일·시각 (10-10) */
.num-field{position:relative;display:block}
.num-field .input{text-align:center;padding-right:30px;font-size:18px;letter-spacing:.5px}
.num-field span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:14px;color:#9fb0c2;pointer-events:none}
.hanja-slot{position:relative}
.slot-ok{position:absolute;top:5px;right:6px;width:17px;height:17px;border-radius:50%;background:#d9b46a;color:#1d1712;font:700 11px/17px var(--sans);font-style:normal}
.hanja-head{font-size:13px;line-height:1.6;color:#d9cdb8;margin:2px 0 8px;text-wrap:balance}.hanja-head b{color:#f4e8d6}
.hanja-slot{flex:1 1 0;min-width:0}.hanja-slot small{display:block;width:100%;text-align:center}
/* 휴대폰 입력 (10-10 밤): 키보드가 올라와도 앱 크기는 그대로, 질문 상자는 키보드 바로 위에.
   아이폰은 입력칸 글자가 16px보다 작게 보이면 화면을 확대하므로, 축소된 화면에서도 16px 이상으로 보이게 한다 */
.keyboard-open #app[data-screen=ask] .screen{bottom:auto;height:var(--keyboard-room,845px)}
#app input:not([type=checkbox]):not([type=range]),#app textarea,#app select{font-size:max(16px,calc(16.5px / var(--frame-scale,1)))!important}
/* 카카오 로그인 관문·가입 동의 (10-10 밤) */
.login-gate{justify-content:flex-end}
.gate-sub{font-size:14px;line-height:1.7;color:#c9d2dc;margin:-4px 0 18px;word-break:keep-all;text-wrap:balance}
.primary.kakao{background:#FEE500;color:#191600;font-weight:700;gap:8px}
.kakao-ic{width:20px;height:20px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23191600' d='M12 3C6.9 3 2.8 6.2 2.8 10.2c0 2.5 1.7 4.7 4.2 6L6 19.9c-.1.4.3.7.7.5l4.3-2.8c.3 0 .7.1 1 .1 5.1 0 9.2-3.2 9.2-7.2S17.1 3 12 3Z'/%3E%3C/svg%3E")}
.gate-note{text-wrap:balance;font-size:11.5px;line-height:1.6;color:#8fa0b3;text-align:center;margin:10px 0 2px}
.consent-box .check-row{margin:0 0 8px}
.consent-box .check-row small a{color:#e2cfb5;margin-left:4px}
/* 키보드가 떠 있을 때(10-10 밤 2차): 화면을 위에 붙이고, 보이는 높이(--keyboard-room)만 쓴다 */
.keyboard-open #viewport{place-items:start center;bottom:auto}
.keyboard-open #app .screen{bottom:auto;height:var(--keyboard-room,845px)}
.keyboard-open #app .screen.ask,.keyboard-open #app .screen.login-gate{padding-top:12px;overflow-y:auto}
.keyboard-open #app[data-screen=ask] #topbar{opacity:0;pointer-events:none}
.keyboard-open #app .screen.ask,.keyboard-open #app .screen.login-gate{justify-content:flex-start}
.keyboard-open #app .screen.ask>.ask-box,.keyboard-open #app .screen.login-gate>.ask-box{margin-top:auto}
.check-row b a{font-weight:400;font-size:12px;color:#e2cfb5;margin-left:4px}
.gate-note a{color:#e2cfb5;text-decoration:underline}
/* 10-11: 로그인 전 웹툰 (조선 → 저울 → 삼신 → 내 등급) */
.toon-panel.img{min-height:640px;justify-content:flex-end}
.toon-panel.text{min-height:520px}
.toon-panel.text .toon-cap{font-size:19px}
.toon-grade{min-height:auto;padding:70px 26px 20px;gap:10px;text-align:center}
.tg-eyebrow{margin:0;font:500 12px var(--serif);letter-spacing:3px;color:#d9c39b}
.toon-grade .toon-flower{width:190px}
.tg-label{margin:6px 0 0;font-size:12px;letter-spacing:3px;color:#9fb0c2}
.tg-grade{margin:0;font:500 54px/1.1 var(--serif);color:#f6efe3}
.tg-grade em{display:block;font:500 13px var(--serif);font-style:normal;letter-spacing:4px;color:#d9c39b;margin-top:4px}
.tg-scale{display:flex;gap:4px;width:220px;margin:6px auto 0}
.tg-scale i{flex:1;height:4px;border-radius:3px;background:#ffffff22}
.tg-scale i.on{background:#e7c77c}
.tg-flower{margin:8px 0 6px;font:500 22px var(--serif);color:#f6efe3}
.toon-grade .tg-say{opacity:1;animation:none;align-self:center;text-align:center;margin-top:8px}
.tg-end{padding:6px 22px 120px;text-align:center}
.tg-free{background:#0e1b2acc;border:1px solid #d9b46a40;border-radius:16px;padding:14px 16px 6px;margin:0 0 18px;text-align:left}
.tg-free-title{margin:0 0 6px;font:700 15px var(--serif);color:#f3e6cc;text-align:center}
.tg-free ul{list-style:none;margin:0;padding:0}
.tg-free li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid #ffffff14;font-size:14px;line-height:1.6;color:#e6e0d4}
.tg-free li:first-child{border-top:0}
.tg-free li em{flex:none;font:700 10.5px var(--sans);font-style:normal;color:#9fd3b0;border:1px solid #9fd3b0aa;border-radius:5px;padding:2px 6px;margin-top:2px}
.tg-free .blur{filter:blur(4px)}
.tg-end .gate-sub{margin:12px 0 6px}
.toon-panel.text{background:radial-gradient(ellipse at 50% 40%,#13243a,#140809 70%)}.toon-grade{background:linear-gradient(#14080900,#140809 30%)}.reveal-toon .toon{background:#140809}
.toon-panel.title{min-height:640px;background:radial-gradient(ellipse at 50% 35%,#13243a,#140809 70%)}
.toon-titlebox{text-align:center;margin-bottom:6px}
.toon-titlebox span{display:block;font:500 12px var(--serif);letter-spacing:5px;color:#d9c39b}
.toon-titlebox h3{margin:6px 0 0;font:600 28px var(--serif);color:#f6efe3;letter-spacing:1px}
.toon-titlebox:after{content:'';display:block;width:40px;height:1px;background:#d9c39b88;margin:16px auto 0}
.toon-grade{background:radial-gradient(ellipse at 50% 30%,#13243a,#140809 72%)!important;padding-top:90px!important;min-height:700px!important}
.tg-end .tg-say{opacity:1;animation:none;margin:10px auto 18px;text-align:center}
.tg-say{max-width:320px!important;text-wrap:balance}
.toon-bubble .sent{display:block;text-wrap:balance}.toon-bubble .sent+.sent{margin-top:4px}
/* 10-11 밤: 사주풀이 컷 기둥 그림 · 名 · 제목 글씨 · 말 꼴 · 카카오 버튼 */
.toon-titlebox h3{font:600 clamp(36px,11vw,46px)/1.2 var(--serif)!important;letter-spacing:-3px!important;margin-top:8px!important}
.toon-pillars{display:flex;justify-content:center;gap:10px;margin:4px 0 6px}
.tp-col{display:flex;flex-direction:column;align-items:center;gap:6px}
.tp-col span{display:flex;flex-direction:column;gap:4px;padding:10px 8px;border:1px solid #d9c39b55;border-radius:10px;background:#0b1828aa}
.tp-col b{font:600 26px/1.15 var(--serif);color:#f3ead9}
.tp-col b.el-목{color:#9fd3a6}.tp-col b.el-화{color:#f0a3a0}.tp-col b.el-토{color:#e3c88f}.tp-col b.el-금{color:#e9ecf1}.tp-col b.el-수{color:#8fb8e8}
.tp-col small{font-size:11px;letter-spacing:2px;color:#9fb0c2}
.toon-seal.big{position:relative;font-size:96px;opacity:1;transform:none}
.in .toon-seal.big{animation:toonSeal 1.4s .2s ease both}
.tg-say{max-width:320px;margin:14px auto 4px;padding:16px 4px 14px;border-top:1px solid #d9c39b66;border-bottom:1px solid #d9c39b66;text-align:center;font:500 17px/1.75 var(--serif);color:#f3ead9;background:none!important;box-shadow:none!important}
.tg-who{display:block;font:500 11px var(--serif);letter-spacing:5px;color:#d9c39b;margin-bottom:8px}
.tg-say .sent{display:block;text-wrap:balance}
.tg-say .sent+.sent{margin-top:4px}
.tg-end{padding:10px 22px 130px}
.tg-end .tg-say{margin:0 auto 26px}
.primary.kakao.tg-kakao{min-height:58px;border-radius:14px;font:600 16.5px var(--serif)!important;letter-spacing:-.2px;gap:10px;box-shadow:0 10px 28px #00000055}
.toon-panel.title{min-height:auto!important;justify-content:flex-start!important;padding-top:96px!important;padding-bottom:70px!important}.toon-panel.title .toon-pillars{margin:14px 0 10px}
.reveal-toon .tg-end{padding-bottom:220px!important}
.primary.kakao.tg-kakao{white-space:nowrap;font-size:15.5px!important;padding:0 12px!important;gap:8px;letter-spacing:-.4px}
/* 10-11: 소리 버튼 아래 글씨 · 빈 시 기둥 · 삼신 그림 위 한마디 */
#sound{position:relative}
#sound:after{content:attr(data-label);position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;letter-spacing:-.2px;color:#cfd8e2;text-shadow:0 1px 4px #000a;pointer-events:none}
.paper #sound:after{color:var(--p-mute);text-shadow:none}
.tp-col.tp-none span{border-style:dashed;background:transparent}
.tp-col.tp-none small{opacity:.5}
.toon-panel.samsin-say{min-height:700px;justify-content:flex-end;padding-bottom:40px}
.toon-panel.samsin-say .tg-say{position:relative;z-index:1;margin:0 auto;background:#140809b3!important;border-radius:0;padding:18px 10px 16px;font-size:18px}
.reveal-toon .tg-end{padding-top:22px!important}
#sound:after{background:#140809cc;border-radius:8px;padding:2px 6px;color:#e8eef5;font-size:10.5px}.paper #sound:after{background:#fffdf8e6;color:var(--p-sub)}
.toon-pillars{align-items:flex-start}.tp-col b.ghost{visibility:hidden}