*{box-sizing:border-box} [hidden]{display:none!important} html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:#fff;color:#191919;font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
button,a,input,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #222;outline-offset:5px}a{color:inherit}
.phone-shell{width:100%;max-width:430px;margin:auto;background:white;min-height:100svh;padding-bottom:calc(71px + env(safe-area-inset-bottom,0px))}
.site-header{height:56px;padding:0 20px;display:flex;align-items:center;border-bottom:1px solid #ededed;background:#fff;position:relative;z-index:5}.logo-link{width:44px;height:44px;display:flex;align-items:center}.logo-placeholder{width:25px;height:25px;display:block;background:#aaa}
.main-scene{position:relative;min-height:calc(100svh - 56px - 71px - env(safe-area-inset-bottom,0px));padding:20px 20px 78px;overflow:hidden;display:flex;flex-direction:column;isolation:isolate}
.mission-card{z-index:2;position:relative;flex-shrink:0;border-radius:24px;padding:20px;background:#e9e9e9}.mission-header{display:flex;align-items:center;gap:8px}.mission-header>div{flex:1;min-width:0}
.eyebrow{font-family:'Instrument Sans',sans-serif;font-size:14px;font-weight:500;color:#747474;margin:0 0 6px;letter-spacing:-.025em}.mission-title{font-size:18px;font-weight:500;line-height:1.45;letter-spacing:-.045em;margin:0;word-break:keep-all}
[data-stage=feeling] .mission-title,[data-stage=next] .mission-title{font-size:20px;font-weight:700}.toggle{width:32px;min-height:44px;display:grid;place-items:center;border:0;background:none;color:#777;flex-shrink:0;margin-right:-8px}.toggle svg{transition:transform .22s ease}.toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.mission-actions{display:flex;gap:6px;margin-top:21px;animation:appear .2s ease}.certify-button,.another-button{flex:1;font-size:13px;min-height:42px;padding:8px;letter-spacing:-.035em;border-radius:7px;border:0}.certify-button{background:#686868;color:white}.another-button{color:#777;background:none}.another-button:hover{background:#ddd}
.center-content{z-index:1;position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:330px;padding:30px 0 67px}.hands-wrap{position:relative;width:min(73%,255px);margin:0 auto 22px}.hands-wrap img{width:100%;height:auto;display:block}.participation{font-size:14px;line-height:1.35;text-align:center;letter-spacing:-.025em;min-height:40px}.participation p{margin:0}.participation strong{font-family:'Instrument Sans',sans-serif;font-weight:600}.participation button{font-size:12px;background:none;border:0;text-decoration:underline;margin-top:6px;color:#666}
.star{display:block;background:currentColor;color:#aaa;clip-path:polygon(50% 0%,59% 28%,85% 15%,72% 41%,100% 50%,72% 59%,85% 85%,59% 72%,50% 100%,41% 72%,15% 85%,28% 59%,0% 50%,28% 41%,15% 15%,41% 28%)}.accent-one{position:absolute;width:26px;height:26px;right:-13px;top:30px;transform:rotate(18deg)}.accent-two{position:absolute;width:23px;height:23px;left:-15px;bottom:10px;transform:rotate(-10deg)}
.star-scene{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}.falling{position:absolute;width:var(--size);height:var(--size);left:var(--x);top:-40px;opacity:.52;animation:fall var(--duration) var(--delay) linear infinite}@keyframes fall{from{transform:translate3d(0,-30px,0) rotate(0)}to{transform:translate3d(22px,950px,0) rotate(260deg)}}.star-heap{position:absolute;bottom:0;left:0;right:0;height:160px;mask-image:linear-gradient(to bottom,#000 30%,transparent 100%)}.star-heap .star{position:absolute}.is-paused .falling,.is-hidden .falling{animation-play-state:paused}
.records-link{position:absolute;z-index:3;bottom:22px;left:50%;transform:translateX(-50%);text-decoration:none;display:flex;gap:5px;align-items:center;white-space:nowrap;color:#777;font-size:14px;padding:10px 12px}.records-link span{font-size:19px}.motion-toggle{position:absolute;z-index:3;right:16px;bottom:21px;width:36px;height:36px;display:grid;place-items:center;border:0;background:transparent;color:#888;font-size:13px}
.feeling-form{padding-top:22px;margin-top:20px;border-top:1px solid #d5d5d5;animation:appear .2s ease}fieldset{border:0;padding:0;margin:0;min-width:0}legend{margin:0 0 24px;padding:0;width:100%;font-size:14px;text-align:center}.emotion-group{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.emotion-option{position:relative;aspect-ratio:1;color:#555;cursor:pointer}.emotion-option input{position:absolute;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.face{width:100%;height:100%;border-radius:50%;background:#ccc;display:grid;place-items:center;pointer-events:none}.face svg{width:72%;height:72%}.emotion-option.selected{color:#fff}.selected .face{background:#191919}.emotion-option.muted{color:#999}.emotion-option.muted .face{background:#cfcfcf}.emotion-option input:focus-visible+.face{outline:2px solid #222;outline-offset:4px}.emotion-name{min-height:24px;text-align:center;margin:14px 0 20px;font-size:14px;font-weight:600}
textarea{display:block;border:0;background:#fff;width:100%;min-height:56px;max-height:152px;padding:16px;font-family:inherit;font-size:16px;line-height:24px;resize:none;border-radius:17px;box-shadow:none;overflow-y:hidden}textarea:focus{outline:2px solid #999;outline-offset:2px}textarea::placeholder{font-size:13px;letter-spacing:-.04em;color:#888}.next-button{width:100%;margin-top:20px;height:48px;border:0;border-radius:15px;background:#191919;color:white;font-size:14px}.next-button:disabled{background:#bcbcbc;color:#f4f4f4;opacity:1;cursor:not-allowed}.character-count{margin:6px 0 0;font-size:12px;text-align:right;color:#777}.is-writing .center-content{flex:1;min-height:145px;justify-content:flex-start;padding:16px 0 60px;color:#777}
.next-placeholder{padding:28px 0 3px;text-align:center;border-top:1px solid #d5d5d5;margin-top:20px}.step-number{color:#999;font-size:12px;font-family:'Instrument Sans',sans-serif}.next-placeholder h2{font-size:19px;margin:10px 0 14px;letter-spacing:-.04em}.next-placeholder p{color:#707070;font-size:14px;line-height:1.7;margin:0 0 24px;word-break:keep-all}.back-button{min-height:44px;border-radius:12px;background:#fff;font-size:14px;border:1px solid #d5d5d5;padding:10px 16px}
.records-space{min-height:65svh;padding:32px 24px;border-top:1px solid #eee}.records-space h2{margin:0;font-size:18px;font-weight:600}.empty-records{min-height:320px}.bottom-nav{position:fixed;z-index:10;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;min-height:calc(71px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:#f7f7f7;border-top:1px solid #eee;display:flex;justify-content:center}.bottom-nav a{width:120px;min-height:71px;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;color:#222;font-size:12px;text-decoration:none}.nav-star{width:24px;height:24px;color:#191919}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes appear{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:431px){.phone-shell{border-inline:1px solid #f1f1f1}}
@media(max-width:359px){.main-scene{padding-inline:14px}.mission-card{padding:17px}.mission-title{font-size:16px}.mission-actions{flex-direction:column}.emotion-group{gap:6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.falling-stars{display:none}.motion-toggle{display:none}}
@keyframes fall{from{transform:translate3d(0,-30px,0) rotate(0)}to{transform:translate3d(22px,var(--fall-distance,950px),0) rotate(260deg)}}