:root{--ink: #0f2a36;--ink-2: rgba(15, 42, 54, .74);--ink-3: rgba(15, 42, 54, .52);--line: rgba(15, 42, 54, .16);--line-strong: rgba(15, 42, 54, .42);--accent: #23708d;--paper: rgba(244, 249, 251, .84);--select: rgba(255, 255, 255, .56);--gutter: 24px;--top-h: 52px;--nav-h: 76px;--kb: 0px;--sat: env(safe-area-inset-top, 0px);--sab: env(safe-area-inset-bottom, 0px);--sal: env(safe-area-inset-left, 0px);--sar: env(safe-area-inset-right, 0px);--ease: cubic-bezier(.22, .61, .36, 1);--font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;color-scheme:light}@media(max-width:360px){:root{--gutter: 20px}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:#dceaef;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden;overscroll-behavior:none;word-break:keep-all;overflow-wrap:break-word}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}button:disabled{cursor:default}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}#water{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;pointer-events:none}body[data-water-input=on] #water{pointer-events:auto;cursor:pointer}#veil{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .9s var(--ease),background .9s var(--ease)}#veil[data-kind=text]{opacity:1;background:linear-gradient(180deg,#f0f7fad1,#f0f7fae0)}#veil[data-kind=start]{opacity:1;background:radial-gradient(ellipse 66% 19% at 50% 38%,#f0f8fb57,#f0f8fb1f 55%,#f0f8fb00),linear-gradient(180deg,#f0f7fa00 66%,#f0f7fa6b)}#veil[data-kind=result]{opacity:1;background:linear-gradient(180deg,#f0f7fa00 0% 40%,#f0f7fae6 62%,#f0f7faf0)}#veil[data-kind=soft]{opacity:1;background:linear-gradient(180deg,#f0f7fa33,#f0f7fa9e)}#veil[data-kind=none]{opacity:0}#app{position:fixed;inset:0;pointer-events:none}.top{position:absolute;top:0;left:0;right:0;height:calc(var(--top-h) + var(--sat));padding:var(--sat) calc(10px + var(--sar)) 0 calc(var(--gutter) + var(--sal));display:flex;align-items:center;justify-content:space-between;z-index:5;pointer-events:none}.wordmark{font-size:15px;font-weight:600;letter-spacing:.32em;opacity:0;transition:opacity .6s var(--ease)}body[data-screen]:not([data-screen=start]) .wordmark{opacity:.86}.top-actions{display:flex;gap:0;pointer-events:auto;margin-right:-2px}.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%}.icon-btn svg{width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;opacity:.82}body[data-screen=start] .icon-btn svg{filter:drop-shadow(0 0 6px rgba(240,248,251,.9))}.icon-btn svg .dot{fill:var(--ink);stroke:none}#btn-sound .ico-on{display:none}#btn-sound[aria-pressed=true] .ico-on{display:inline}#btn-sound[aria-pressed=true] .ico-off{display:none}#screens{position:absolute;inset:0}.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding:calc(var(--top-h) + var(--sat) + 28px) calc(var(--gutter) + var(--sar)) calc(var(--nav-h) + var(--sab) + var(--kb) + 32px) calc(var(--gutter) + var(--sal));opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .42s var(--ease),transform .42s var(--ease),visibility 0s linear .42s;pointer-events:none}.screen.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease) .08s,transform .5s var(--ease) .08s,visibility 0s;pointer-events:auto}.screen-inner{max-width:560px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}.eyebrow{font-size:11px;letter-spacing:.26em;font-weight:600;color:var(--ink-3);margin:0 0 18px}.title{font-size:clamp(23px,6.4vw,30px);line-height:1.42;font-weight:500;letter-spacing:-.012em;margin:0 0 22px}.body{font-size:16px;line-height:1.8;color:var(--ink-2);margin:0 0 14px}.note{font-size:13px;line-height:1.7;color:var(--ink-3);margin:0}.intro .note{font-size:12.5px;line-height:1.75;letter-spacing:.01em;color:#0f2a3699}.intro .rule{margin:30px 0 18px;width:28px;background:#0f2a3638}.rule{height:1px;background:var(--line);border:0;margin:26px 0}.bottom-nav{position:absolute;left:0;right:0;bottom:0;height:calc(var(--nav-h) + var(--sab));padding:0 calc(var(--gutter) + var(--sar)) var(--sab) calc(var(--gutter) + var(--sal));display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto;transform:translateY(calc(-1 * var(--kb)));transition:opacity .4s var(--ease),transform .25s var(--ease);z-index:4;background:linear-gradient(180deg,#f0f7fa00,#f0f7faeb 38%)}.bottom-nav[hidden]{display:flex;opacity:0;pointer-events:none}.nav-prev{min-width:64px;height:52px;font-size:15px;color:var(--ink-2);text-align:left;letter-spacing:.02em}.nav-prev[hidden]{display:block;visibility:hidden}.nav-next{min-width:132px;height:52px;padding:0 26px;border-radius:26px;background:var(--ink);color:#f4f9fb;font-size:15px;font-weight:500;letter-spacing:.04em;transition:background .3s var(--ease),color .3s var(--ease),opacity .3s}.nav-next:disabled{background:#0f2a3624;color:#0f2a366b}.nav-next.is-busy{opacity:.7}.screen.start{pointer-events:none;padding-bottom:calc(var(--sab) + 22px)}.screen.start.is-active .start-link{pointer-events:auto}.start .screen-inner{align-items:center;text-align:center;max-width:none}.start-flex-top{flex:.86 1 0;min-height:24px}.start-flex-mid{flex:1.18 1 0;min-height:40px}.on-water{text-shadow:0 0 1px rgba(246,251,253,.8),0 0 10px rgba(240,248,251,.8),0 0 28px rgba(240,248,251,.5)}.title-block{display:flex;flex-direction:column;align-items:center}.start-title-row{margin:0;font-weight:inherit;line-height:1}.start-title{display:block;font-size:clamp(46px,13vw,54px);font-weight:500;letter-spacing:.26em;margin-right:-.26em;line-height:1;color:var(--ink)}.start-sub{margin:26px 0 0;display:flex;flex-direction:column;align-items:center;gap:11px}.start-hanja{font-family:AppleMyungjo,"Noto Serif KR","Noto Serif CJK KR",Batang,serif;font-size:13px;font-weight:500;letter-spacing:.16em;margin-right:-.16em;color:var(--ink);line-height:1}.start-en{font-size:10.5px;font-weight:600;letter-spacing:.5em;margin-right:-.5em;color:var(--ink);line-height:1}.start-bottom{display:flex;flex-direction:column;align-items:center}.start-hint{margin:0;font-size:13px;letter-spacing:.06em;color:var(--ink-2);line-height:1.5}.taps{display:inline-flex;gap:11px;margin-top:16px}.taps i{width:5px;height:5px;border-radius:50%;border:1px solid rgba(15,42,54,.55);transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}.taps i.on{background:var(--ink);border-color:var(--ink);transform:scale(1.2)}.start-link{margin-top:26px;font-size:12px;letter-spacing:.04em;color:var(--ink-2);padding:12px 2px 4px;border-bottom:1px solid rgba(15,42,54,.28);line-height:1.2}.start-link small{color:var(--ink-3);font-size:11px;margin-left:8px;letter-spacing:.02em}@media(min-width:720px){.start-title{font-size:clamp(54px,4.4vw,64px)}.start-sub{margin-top:30px;gap:12px}.start-hanja{font-size:14px}.start-en{font-size:11px}.start-flex-top{flex-grow:.9}}@media(max-height:560px){.start-sub{margin-top:16px}}.progress{display:flex;align-items:center;gap:14px;margin:0 0 30px}.progress-num{font-size:12px;letter-spacing:.18em;color:var(--ink-3);font-variant-numeric:tabular-nums}.progress-bar{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.progress-bar i{height:2px;background:var(--line);transition:background .4s var(--ease)}.progress-bar i.on{background:var(--ink)}.q-text{font-size:clamp(21px,5.9vw,26px);line-height:1.5;font-weight:500;letter-spacing:-.012em;margin:0 0 30px}.options{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}.option{width:100%;min-height:68px;display:grid;grid-template-columns:30px 1fr 18px;align-items:center;gap:8px;padding:16px 6px 16px 4px;border-top:1px solid var(--line);text-align:left;font-size:16.5px;line-height:1.55;color:var(--ink);position:relative;transition:background .3s var(--ease)}.option:before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--ink);transform:scaleY(0);transform-origin:center;transition:transform .35s var(--ease)}.option .letter{font-size:12px;letter-spacing:.12em;color:var(--ink-3);font-weight:600;padding-left:10px}.option .mark{width:16px;height:16px;border-radius:50%;border:1px solid var(--line-strong);justify-self:end;transition:all .3s var(--ease)}.option[aria-checked=true]{background:var(--select)}.option[aria-checked=true]:before{transform:scaleY(1)}.option[aria-checked=true] .letter{color:var(--ink)}.option[aria-checked=true] .mark{border-color:var(--ink);background:radial-gradient(circle,var(--ink) 0 4px,transparent 4.5px)}@media(hover:hover){.option:hover{background:#ffffff5c}}.screen.result{padding-left:0;padding-right:0;padding-top:0}.result .screen-inner{max-width:none}.result-hero{min-height:min(58svh,560px);padding:calc(var(--top-h) + var(--sat) + 24px) calc(var(--gutter) + var(--sar)) 34px calc(var(--gutter) + var(--sal));display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}.result-hero .eyebrow{color:var(--ink-2);text-shadow:0 0 14px rgba(255,255,255,.7)}.result-name-wrap,.result-hero .eyebrow-wrap{max-width:560px;width:100%;margin:0 auto}.result-name{font-size:clamp(38px,11.4vw,56px);font-weight:300;letter-spacing:.02em;line-height:1.22;margin:0;text-shadow:0 0 22px rgba(255,255,255,.75),0 0 2px rgba(255,255,255,.5)}.result-en{font-size:12px;letter-spacing:.5em;font-weight:600;margin:14px 0 0;color:var(--ink-2);text-shadow:0 0 12px rgba(255,255,255,.8)}.result-body{padding:8px calc(var(--gutter) + var(--sar)) 0 calc(var(--gutter) + var(--sal))}.result-body>*{max-width:560px;margin-left:auto;margin-right:auto}.result-desc{font-size:17px;line-height:1.85;margin:0;color:var(--ink)}.disclaimer{margin-top:34px!important;font-size:12.5px;line-height:1.7;color:var(--ink-3);padding-top:16px;border-top:1px solid var(--line)}.write-field{margin-top:10px;position:relative}.write-field textarea{width:100%;min-height:34svh;max-height:52svh;resize:none;border:0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);background:#ffffff57;padding:18px 4px 34px;font:inherit;font-size:17px;line-height:1.85;color:var(--ink);outline:none;border-radius:0;transition:background .3s var(--ease),border-color .3s var(--ease)}body.kb-open .write-field textarea{min-height:22svh}.write-field textarea:focus{background:#ffffff8c;border-color:var(--ink)}.write-field textarea::placeholder{color:var(--ink-3)}.counter{position:absolute;right:6px;bottom:10px;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;pointer-events:none}.preview{margin:4px 0 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.8;color:var(--ink);white-space:pre-wrap;max-height:9.2em;overflow:hidden;position:relative}.preview.is-long:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.4em;background:linear-gradient(180deg,#f0f7fa00,#f0f7faf5)}.preview-meta{display:flex;justify-content:space-between;margin:10px 0 0;font-size:12.5px;color:var(--ink-3);letter-spacing:.04em}.notice{margin:28px 0 0;padding:18px 16px 16px;border:1px solid var(--line);background:#ffffff5c}.notice h3{margin:0 0 10px;font-size:13px;letter-spacing:.08em;font-weight:600;color:var(--ink-2)}.notice ul{margin:0;padding:0 0 0 16px}.notice li{font-size:13.5px;line-height:1.7;color:var(--ink-2);margin:0 0 6px}.agree{display:flex;align-items:flex-start;gap:12px;margin:16px 0 0;padding:12px 0 2px;font-size:15px;line-height:1.5;cursor:pointer;min-height:48px}.agree input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;flex:none;border:1px solid var(--line-strong);border-radius:0;background:#ffffff80;display:grid;place-items:center}.agree input:checked{background:var(--ink);border-color:var(--ink)}.agree input:checked:after{content:"";width:9px;height:5px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:translateY(-1px) rotate(-45deg)}.status{margin:18px 0 0;min-height:1.6em;font-size:14px;line-height:1.6;color:var(--ink-2)}.status.is-error{color:#8a3b2c}.center .screen-inner{justify-content:center;text-align:left}.sent-line{font-size:15px;letter-spacing:.06em;color:var(--ink-2);margin:0;text-shadow:0 0 14px rgba(255,255,255,.8)}.completion .title{font-size:clamp(23px,6.6vw,31px);line-height:1.55}.small-link{margin-top:30px;align-self:flex-start;font-size:13px;color:var(--ink-3);border-bottom:1px solid var(--line);padding:10px 0 4px}.mine-meta{font-size:12.5px;color:var(--ink-3);letter-spacing:.04em;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:6px 14px}.mine-type{font-size:24px;font-weight:300;margin:0 0 4px;letter-spacing:.02em}.mine-type small{font-size:11px;letter-spacing:.4em;font-weight:600;color:var(--ink-3);margin-left:10px;vertical-align:middle}.mine-text{margin:22px 0 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:16.5px;line-height:1.9;white-space:pre-wrap}.mine-remain{margin:14px 0 0;font-size:13px;color:var(--ink-3)}.loading{font-size:14px;color:var(--ink-3);letter-spacing:.04em}.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center}.overlay[hidden]{display:none}.overlay-backdrop{position:absolute;inset:0;background:#0f2a3652;opacity:0;transition:opacity .35s var(--ease)}.overlay.is-open .overlay-backdrop{opacity:1}.sheet{position:relative;width:100%;max-width:560px;max-height:calc(100% - var(--sat) - 28px);overflow-y:auto;overscroll-behavior:contain;background:#f2f8fa;padding:26px calc(var(--gutter) + var(--sar)) calc(30px + var(--sab)) calc(var(--gutter) + var(--sal));transform:translateY(24px);opacity:0;transition:transform .42s var(--ease),opacity .35s var(--ease);box-shadow:0 -10px 40px #0f2a361f}.overlay.is-open .sheet{transform:none;opacity:1}.sheet-close{position:absolute;top:10px;right:calc(8px + var(--sar));width:44px;height:44px;display:grid;place-items:center}.sheet-close svg{width:20px;height:20px;stroke:var(--ink);stroke-width:1.3;fill:none;stroke-linecap:round}.info-title{font-size:26px;font-weight:400;letter-spacing:.04em;margin:8px 0 4px}.info-en{font-size:11px;letter-spacing:.42em;font-weight:600;color:var(--ink-2);margin:0 0 18px}.info-tag{font-size:16px;color:var(--ink);margin:0 0 4px}.info-sec{border-top:1px solid var(--line);margin-top:22px;padding-top:18px}.info-sec h3{font-size:11px;letter-spacing:.26em;font-weight:600;color:var(--ink-3);margin:0 0 10px}.info-sec p{margin:0;font-size:15px;line-height:1.8;color:var(--ink-2)}@media(min-width:720px){.overlay{align-items:center}.sheet{max-height:86vh;box-shadow:0 20px 60px #0f2a362e}}#hud{position:fixed;left:8px;top:calc(var(--top-h) + var(--sat));z-index:30;font:10.5px/1.45 ui-monospace,Menlo,monospace;color:#0b1a22;background:#ffffffc7;padding:6px 8px;white-space:pre-wrap;max-width:calc(100vw - 16px);pointer-events:none}#hud[hidden]{display:none}.review-toggle{position:fixed;left:50%;top:calc(var(--sat) + 10px);transform:translate(-50%);z-index:40;height:32px;padding:0 14px;border-radius:16px;background:#13313d;color:#fff;font-size:11px;letter-spacing:.16em;font-weight:600;display:flex;align-items:center;gap:10px}.review-toggle .rv-arrow{font-size:15px;letter-spacing:0;padding:0 2px;opacity:.85}.review-panel{position:fixed;left:50%;top:calc(var(--sat) + 48px);transform:translate(-50%);width:min(380px,calc(100vw - 20px));max-height:calc(100% - var(--sat) - 70px);overflow-y:auto;z-index:40;background:#13313d;color:#eaf3f6;padding:10px 6px 12px;box-shadow:0 16px 40px #0000004d}.review-panel[hidden]{display:none}.review-panel h4{margin:10px 12px 4px;font-size:10px;letter-spacing:.22em;opacity:.6;font-weight:600}.review-panel button{display:block;width:100%;text-align:left;padding:9px 12px;font-size:13.5px;color:#eaf3f6}.review-panel button.on{background:#ffffff24}.review-panel .rv-note{font-size:11px;opacity:.6;padding:8px 12px 0;line-height:1.5}@media(prefers-reduced-motion:reduce){.screen,.screen.is-active,#veil,.sheet,.overlay-backdrop,.option,.option:before{transition-duration:.01s!important;transition-delay:0s!important}}
