:root{--ink:#514a42;--muted:rgba(81,74,66,.70);--faint:rgba(81,74,66,.48);--line:rgba(118,97,78,.16);--line2:rgba(118,97,78,.30);--paper:rgba(255,255,255,.56);--paper2:rgba(255,255,255,.92);--warm:#f5eadb;--shadow:0 15px 38px rgba(103,82,62,.08);--danger:#7c5048}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Segoe UI",sans-serif;color:var(--ink);background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.97),rgba(255,255,255,0) 33%),linear-gradient(180deg,#fbf7ef,#eee3d2)}button,textarea{font:inherit}.app-shell{min-height:100vh;padding:20px 14px 42px}.topbar{width:min(100%,920px);margin:0 auto 26px;display:flex;justify-content:space-between;gap:14px;align-items:center}.brand-button{border:0;background:transparent;color:var(--faint);letter-spacing:.14em;text-transform:uppercase;font-size:12px;cursor:pointer}.language-switch{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.language-switch button,.connection-badge{min-height:37px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.46);color:var(--muted)}.language-switch button{cursor:pointer}.language-switch button.active{background:var(--paper2);border-color:var(--line2);color:var(--ink)}
.screen{width:min(100%,920px);margin:0 auto;min-height:620px;display:flex;align-items:flex-start;justify-content:center;padding-top:32px}.panel{width:100%;padding:30px;border:1px solid var(--line);border-radius:32px;background:var(--paper);box-shadow:var(--shadow);text-align:center}.panel.narrow{max-width:800px}.eyebrow{margin:0 0 14px;font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--faint)}h1,h2{margin:0;letter-spacing:-.035em;line-height:1.42;word-break:keep-all}h1{font-size:clamp(34px,6vw,54px)}h2{font-size:clamp(27px,4vw,38px)}.lead{max-width:700px;margin:15px auto 0;color:var(--muted);font-size:16px;line-height:1.9;word-break:keep-all}.quiet-note{max-width:680px;margin:18px auto 0;padding:15px 17px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.38);color:var(--muted);font-size:14px;line-height:1.78;word-break:keep-all}.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}.primary,.secondary,.quiet-link{min-height:50px;padding:0 21px;border-radius:999px;cursor:pointer}.primary{border:1px solid var(--line2);background:var(--paper2);color:var(--ink);box-shadow:0 10px 24px rgba(105,84,64,.09);font-size:17px}.secondary{border:1px solid var(--line);background:rgba(255,255,255,.44);color:var(--muted)}.quiet-link{border:0;background:transparent;color:var(--faint)}
.scenario-card{position:relative;width:100%;margin-top:24px;min-height:145px;padding:24px 52px 24px 24px;border:1px solid var(--line2);border-radius:28px;background:var(--paper2);color:var(--ink);cursor:pointer;text-align:left;transition:transform .2s ease,box-shadow .2s ease}.scenario-card:hover,.scenario-card:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow);outline:none}.scenario-title{display:block;font-size:20px;line-height:1.55;font-weight:650;letter-spacing:-.025em;word-break:keep-all}.scenario-lead{display:block;margin-top:9px;color:var(--muted);font-size:14px;line-height:1.75;word-break:keep-all}.scenario-arrow{position:absolute;right:22px;bottom:20px;color:var(--faint);font-size:20px}
.input-card{position:relative;z-index:10;pointer-events:auto!important;margin-top:22px;text-align:left}.input-card textarea,.editable-draft,.focus-custom textarea{position:relative;z-index:11;width:100%;padding:18px;border-radius:24px;border:1px solid var(--line);background:rgba(255,255,255,.78);color:var(--ink);resize:vertical;outline:none;line-height:1.86;pointer-events:auto!important;user-select:text!important;-webkit-user-select:text!important;touch-action:manipulation;caret-color:var(--ink);cursor:text;word-break:keep-all;overflow-wrap:break-word}.input-card textarea{min-height:190px;font-size:17px}.editable-draft{min-height:170px;font-size:18px}.focus-custom textarea{min-height:110px;font-size:16px}.input-card textarea:focus,.editable-draft:focus,.focus-custom textarea:focus{background:rgba(255,255,255,.92);border-color:var(--line2);outline:2px solid rgba(118,97,78,.13);outline-offset:2px}.input-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}.example-button{border:0;background:transparent;color:var(--muted);padding:5px 2px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}.counter{font-size:12px;color:var(--faint)}
.mirror-card,.letter-card{margin-top:22px;padding:25px;border:1px solid var(--line2);border-radius:28px;background:var(--paper2);text-align:left}.card-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}.mirror-text,.letter-text{margin:13px 0 0;font-size:19px;line-height:1.95;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word}.mirror-confirm{margin-top:22px;font-size:22px}.comfort-card{margin-top:22px;padding:28px;border-radius:30px;border:1px solid rgba(151,116,82,.22);background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(247,235,217,.78));box-shadow:0 18px 44px rgba(126,91,58,.09);text-align:left}.comfort-card p{margin:0;font-size:20px;line-height:2;word-break:keep-all;overflow-wrap:break-word}
.focus-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.focus-option{min-height:104px;padding:20px;border:1px solid var(--line);border-radius:25px;background:rgba(255,255,255,.48);color:var(--ink);cursor:pointer;text-align:left;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;font-size:16px;line-height:1.7;word-break:keep-all;transition:transform .18s ease,border-color .18s ease,background .18s ease}.focus-option:hover,.focus-option:focus-visible{transform:translateY(-1px);border-color:var(--line2);outline:none}.focus-option.selected{background:var(--paper2);border-color:var(--line2);box-shadow:var(--shadow)}.focus-check{flex:0 0 auto;color:var(--faint)}.focus-option.selected .focus-check{color:var(--ink)}.focus-custom{margin-top:14px;padding:20px;border-radius:25px;border:1px solid var(--line2);background:rgba(255,255,255,.52);text-align:left}.focus-custom label{display:block;margin-bottom:10px;color:var(--muted);font-size:14px}.focus-summary{margin-top:20px;padding:17px 20px;border-radius:22px;border:1px solid rgba(151,116,82,.22);background:rgba(247,235,217,.55);text-align:left}.focus-summary p{margin:9px 0 0;font-size:16px;line-height:1.75;word-break:keep-all}
.review-grid{display:grid;grid-template-columns:1fr;gap:13px;margin-top:14px}.review-card{padding:22px;border-radius:27px;border:1px solid var(--line);background:rgba(255,255,255,.47);text-align:left}.review-card.main{background:var(--paper2);border-color:var(--line2);box-shadow:var(--shadow)}.review-card p{margin:12px 0 0;white-space:pre-wrap;font-size:17px;line-height:1.95;word-break:keep-all;overflow-wrap:break-word}.craft-card{margin-top:14px;padding:20px 22px;border-radius:24px;border:1px dashed var(--line2);background:rgba(255,255,255,.38);text-align:left}.craft-card p{margin:10px 0 0;color:var(--muted);font-size:15px;line-height:1.85;word-break:keep-all;overflow-wrap:break-word}.safety-audit{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}.safety-audit span{padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.38);font-size:12px;color:var(--muted)}.status-line{min-height:27px;margin:14px 0 0;color:var(--muted);font-size:14px;line-height:1.75}.quiet-wait{padding:44px 20px}.quiet-wait-main{font-size:20px;line-height:1.85;word-break:keep-all}.quiet-wait-support{color:var(--muted);line-height:1.8;word-break:keep-all}.ending-card{padding:20px 0 8px}
.quiet-footer{width:min(100%,920px);margin:20px auto 0;display:flex;justify-content:space-between;gap:14px;align-items:center;color:var(--faint);font-size:12px;line-height:1.65}.connection-badge{display:inline-flex;align-items:center;white-space:nowrap}.connection-badge[data-state="error"]{color:var(--danger);border-color:rgba(124,80,72,.25)}.build-label{display:inline-flex;align-items:center;justify-content:center;padding:.28rem .55rem;border:1px solid rgba(87,77,67,.14);border-radius:999px;font-size:.72rem;letter-spacing:.04em;color:rgba(87,77,67,.54);background:rgba(255,255,255,.34);white-space:nowrap}
.screen[data-rhythm="slow"] .panel{animation:roomIn .62s ease both}.screen[data-rhythm="slow"] .eyebrow{animation:softIn .62s .14s ease both}.screen[data-rhythm="slow"] h1,.screen[data-rhythm="slow"] h2{animation:softIn .68s .28s ease both}.screen[data-rhythm="slow"] .lead,.screen[data-rhythm="slow"] .quiet-note,.screen[data-rhythm="slow"] .input-card,.screen[data-rhythm="slow"] .mirror-card,.screen[data-rhythm="slow"] .comfort-card,.screen[data-rhythm="slow"] .focus-options,.screen[data-rhythm="slow"] .focus-summary,.screen[data-rhythm="slow"] .review-grid,.screen[data-rhythm="slow"] .craft-card{animation:softIn .7s .44s ease both}.screen[data-rhythm="slow"] .actions{animation:softIn .68s .64s ease both}@keyframes roomIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes softIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:720px){.app-shell{padding:18px 12px 36px}.topbar{align-items:flex-start}.screen{padding-top:18px;min-height:560px}.panel{padding:23px 17px;border-radius:27px}.focus-options{grid-template-columns:1fr}.quiet-footer{align-items:flex-start;flex-direction:column}.language-switch button{padding:0 10px}.mirror-text,.letter-text{font-size:18px}.comfort-card p{font-size:18px}.scenario-card{min-height:132px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
