:root{color-scheme:dark;--ground:#100e17;--panel:#211a2c;--ink:#f0e9df;--muted:#c0afca;--accent:#cdb8df;--line:#51415e;--display:'Gowun Batang','Batang',serif;font-family:var(--display);color:var(--ink);background:#08070c;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,summary{touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled{cursor:wait;opacity:.55}a{color:inherit;text-underline-offset:4px}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}::selection{background:var(--accent);color:#21162c}input{caret-color:var(--accent)}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.app-shell{width:100%;max-width:480px;min-height:100svh;margin:0 auto;background:var(--ground);position:relative;overflow:clip;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}.app-header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 24px}.brand{display:flex;align-items:center;gap:9px;font-size:24px;font-weight:700;text-decoration:none}.brand svg{width:28px;height:28px}#language{width:86px;min-height:38px;font:12px system-ui,sans-serif;background:transparent;border:1px solid var(--line);padding:6px 7px;border-radius:6px}.selection{padding:18px 24px 10px;min-height:calc(100svh - 72px)}h1,h2,p{margin:0}h1{font-size:29px;font-weight:400;line-height:1.45;letter-spacing:-.03em;text-wrap:balance}.invitation{text-align:center}.invitation p{margin:12px 0 0;font-size:14px;color:var(--muted);line-height:1.85}.carousel{height:calc(clamp(325px,48svh,440px) + 70px);position:relative;margin-top:30px;touch-action:pan-y}.character{position:absolute;top:0;left:0;width:100%;transform-origin:center 60%;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .35s}.character.current{z-index:2;transform:translateX(-8px);opacity:1}.character.next{z-index:1;transform:translate(92%,26px) scale(.91);opacity:.5}.character.next .character-heading{visibility:hidden}.character-heading{height:70px;text-align:center}.character-heading h2{font-size:25px;letter-spacing:.08em}.character-heading p{font-size:12px;color:var(--muted);margin-top:8px}.portrait-card{width:100%;height:clamp(325px,48svh,440px);border:1px solid #80618d70;border-radius:16px;position:relative;overflow:hidden;padding:0;text-align:left;display:block;background:#352541}.cheongwol{background:radial-gradient(ellipse at 40% 32%,#654071,#382347 55%,#1b1525)}/* taste-skill-ignore: reference-pinned character lighting. */
.ryeoha{background:radial-gradient(ellipse at 50% 35%,#50325d,#281d35 60%,#17131f)}/* taste-skill-ignore: reference-pinned character lighting. */
.portrait-card img{position:absolute;width:113%;height:auto;left:-6.5%;top:-41px;user-select:none;-webkit-user-drag:none}.ryeoha img{width:110%;left:-5%;top:15px}.inscription{position:absolute;right:17px;top:20px;z-index:1;writing-mode:vertical-rl;letter-spacing:.2em;color:#d6c1df;font-size:14px}.caption{position:absolute;bottom:0;left:0;right:0;padding:42px 21px 20px;font-size:13px;background:linear-gradient(transparent,#130e1eea)}/* taste-skill-ignore: neutral image scrim for readable caption. */
.selection-controls{display:flex;gap:17px;justify-content:center;align-items:center;margin:17px 0}.circle{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;display:grid;place-items:center}.circle:hover{background:var(--panel)}.pagination{display:flex;gap:0}.pagination button{width:30px;height:44px;border:0;background:transparent;display:grid;place-items:center;padding:0}.pagination button::after{content:'';width:5px;height:5px;border-radius:5px;background:#8a7597;transition:width .3s}.pagination button.active::after{width:22px;background:#eadcef}.primary,.secondary{width:100%;min-height:50px;border:1px solid #bfa3d059;border-radius:8px;padding:12px 18px;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center}.primary{background:var(--accent);color:#21162c;transition:background .2s}.primary:hover{background:#e4d2ef}.primary:active{background:#bca4d0}.secondary{background:transparent;color:var(--ink);border-color:var(--line)}.hint{text-align:center;color:var(--muted);font-size:12px;line-height:1.7;margin-top:12px}.back,.text-button{min-height:44px;border:0;background:transparent;padding:10px 0;font-size:13px;color:#d4c2df}.back::before{content:'←';margin-right:8px}.birth-page,.result-page{padding:0 24px 24px}.greeting-scene{height:230px;position:relative;overflow:hidden;margin:0 -24px 24px;background:#191320}.greeting-scene>img{position:absolute;width:235px;left:-27px;top:-28px}.greeting-scene[data-character="1"]>img{width:215px;left:-25px;top:10px}.greeting-bubble{position:absolute;right:22px;top:70px;width:calc(100% - 182px);max-width:230px;background:#f3eee8;color:#2a2030;border-radius:14px;padding:17px 13px;font-size:15px;line-height:1.8}.greeting-bubble::before{content:'';position:absolute;right:100%;top:23px;border:9px solid transparent;border-right-color:#f3eee8}.greeting-bubble strong{display:block;font-size:12px;margin-bottom:6px;color:#695075}.page-heading h1{font-size:28px}.page-heading>p{color:var(--muted);font-size:14px;line-height:1.8;margin-top:9px}form{font-family:system-ui,'Malgun Gothic',sans-serif;margin-top:24px}form label{display:block;font-size:14px;margin:20px 0 9px;color:var(--ink)}input,select{min-height:48px;min-width:0;max-width:100%;width:100%;border:1px solid var(--line);border-radius:7px;padding:11px 12px;background:var(--panel);color:var(--ink);font-size:16px}input::placeholder{color:#bfaeca}input[type=date],input[type=time]{padding-inline:8px;font-size:14px;font-variant-numeric:tabular-nums}.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.field-row>div{min-width:0}.field-help{color:var(--muted);font-size:12px;line-height:1.85;margin-top:10px;overflow-wrap:anywhere}.location-fields{border:0;padding:0;margin:28px 0 0;min-width:0}.location-fields legend{font:20px var(--display);padding:0}.checkbox{display:flex;gap:8px;align-items:center}.checkbox input{width:20px;min-height:20px;margin:0}.checkbox span{font-size:13px}details{border-block:1px solid var(--line);margin:24px 0;padding:0}summary{cursor:pointer;min-height:52px;display:list-item;padding:16px 4px;font-size:14px;color:#e0d0e9}details[open]{padding-bottom:18px}.error{font:13px/1.8 system-ui,sans-serif;background:#38202c;color:#ffd3dc;border-radius:7px;padding:13px;margin:16px 0;overflow-wrap:anywhere}.ambiguity{margin-top:20px}.privacy{text-align:center;font-size:12px;color:var(--muted);line-height:1.85;margin:15px 0 0}.result-greeting{display:flex;align-items:center;gap:13px;padding:14px 0 23px}.result-greeting img{height:62px;width:62px;object-fit:cover;object-position:center 19%;background:#2c2038;border-radius:50%}.result-greeting p:first-child{font-size:13px;color:var(--muted);margin-bottom:7px}.result-greeting p:last-child{font-size:15px;line-height:1.7}.result-page h1{font-size:30px}.result-birth{font:13px/1.9 system-ui,sans-serif;color:var(--muted);margin:10px 0 25px;white-space:pre-line}table{border-collapse:collapse;width:100%;table-layout:fixed;font-variant-numeric:tabular-nums}.pillars-table{border:1px solid var(--line);border-radius:10px;overflow:hidden;outline:1px solid var(--line);outline-offset:-1px}.pillars-table th{padding:13px 0;background:#261d32;font:13px system-ui,sans-serif;color:#ddcde6}.pillars-table td{border-top:1px solid var(--line);border-right:1px solid var(--line);text-align:center;padding:16px 3px;background:#18131f}.pillars-table td:last-child{border-right:0}.pillars-table strong{display:block;font:34px/1.25 var(--display)}.pillars-table small{display:block;font:12px/1.7 system-ui,sans-serif;margin-top:6px;color:var(--muted)}.pillars-table .self{background:#2c2038}.element-목{color:#b6dab9}.element-화{color:#efb8aa}.element-토{color:#e1ca97}.element-금{color:#e7e2ee}.element-수{color:#b4d4ec}.table-note{font:12px/1.8 system-ui,sans-serif;color:var(--muted);margin-top:14px}.fortune-section{margin-top:34px}.fortune-section h2{font-size:24px;font-weight:400}.fortune-section>p:not(.field-help){color:#e4d3ed;font-size:15px;line-height:1.8;margin:12px 0 17px}.fortune-table{font:13px system-ui,sans-serif}.fortune-table th{font-weight:400;text-align:left;color:var(--muted);padding:12px 9px;border-bottom:1px solid var(--line)}.fortune-table td{padding:14px 9px;border-bottom:1px solid #33273e}.fortune-table td:nth-child(2){font:21px var(--display)}.fortune-table small{font:12px system-ui,sans-serif;color:var(--muted);padding-left:7px}.calculation-details{font-family:system-ui,sans-serif}.calculation-details dl{margin:0;display:grid;grid-template-columns:1fr;gap:8px}.calculation-details dt{color:var(--muted);font-size:12px;margin-top:12px}.calculation-details dd{margin:0;font-size:13px;line-height:1.7;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.result-page>.text-button{display:block;margin:15px auto 0}footer{text-align:center;padding:10px 24px 26px;font-size:12px;color:var(--muted)}footer p{margin-top:2px}dialog{width:min(420px,calc(100% - 32px));max-height:85svh;border:1px solid var(--line);border-radius:15px;padding:25px;background:#211a2c;color:var(--ink)}dialog::backdrop{background:#08060dcd}dialog h2{font-size:23px;font-weight:400;margin:0 0 16px}dialog p,dialog li{font:13px/1.9 system-ui,sans-serif;color:#dacde1}dialog p+p{margin-top:12px}dialog ul{padding-left:18px;margin:20px 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(min-width:481px){.app-shell{border-inline:1px solid #2f263a;box-shadow:0 20px 70px #0006}}@media(max-width:359px){.app-header,.birth-page,.result-page{padding-inline:18px}.selection{padding-inline:20px}.greeting-scene{margin-inline:-18px}.greeting-bubble{right:16px;width:calc(100% - 164px);font-size:13px}.greeting-scene>img{left:-40px}h1{font-size:27px}.field-row{gap:8px}input[type=date],input[type=time]{font-size:12px}.pillars-table strong{font-size:29px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}
.greeting-bubble p{white-space:pre-line;word-break:keep-all}.fortune-table th:first-child{width:16%}.fortune-table th:nth-child(2){width:32%}.fortune-table th:last-child{width:52%}.fortune-table td:last-child{white-space:nowrap;font-size:12px}.fortune-table td{padding-inline:7px}.fortune-table small{padding-left:5px}
#language{min-height:44px}.back{display:flex;align-items:center;gap:8px}.back::before{content:none}.back svg{width:18px;height:18px}
/* Reference card: 647 x 703. Intrinsic rows keep the crop independent of viewport height. */
.carousel { display: grid; height: auto; }
.character { position: relative; grid-area: 1 / 1; }
.portrait-card { container-type: inline-size; height: auto; aspect-ratio: 647 / 703; }
.cheongwol img { width: 108%; left: -4%; top: -14cqw; }
.ryeoha img { width: 108%; left: -4%; top: 1.7cqw; }
.greeting-scene[data-character="1"] > img { width: 235px; left: -27px; top: 8px; }