:root{color-scheme:light;--ink:#191f28;--secondary:#4e5968;--muted:#6b7684;--line:#eef0f3;--soft:#f7f8fa;--blue:#286de0;--blue-soft:#f1f6ff;--green:#087d5e;--green-soft:#edf8f3;--amber:#976313}
*{box-sizing:border-box;letter-spacing:0}
[hidden]{display:none!important}
body{margin:0;background:#fff;color:var(--ink);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default;opacity:.4}
button,summary,a{touch-action:manipulation}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
h1,h2,h3,p{margin:0}button i{pointer-events:none}
.wrap{width:100%;max-width:640px;margin:0 auto;padding:0 24px}
.topbar{background:#fff}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:block;width:100px;height:23px;object-fit:contain}
.icon-button{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;background:transparent;border:0;border-radius:8px;color:var(--secondary);font-size:22px;transition:background .15s}
.icon-button:hover{background:var(--soft)}.refreshing i{animation:spin 1s linear infinite}
.heading{padding:16px 0 24px}.eyebrow{font-weight:500;font-size:13px;color:var(--muted);margin-bottom:5px}
h1{font-size:27px;line-height:1.4;font-weight:750}
.muted{color:var(--muted);font-size:12px}#checked{margin-top:8px;min-height:19px}
.tabs{display:flex;gap:4px;padding:4px;background:#f2f4f6;border-radius:8px;margin-bottom:4px}
.tab{flex:1;min-width:0;min-height:42px;border:0;border-radius:6px;padding:9px 8px;background:transparent;color:var(--muted);font-size:14px;font-weight:600;transition:background .18s,color .18s}
.tab[aria-selected=true]{color:var(--ink);background:#fff;box-shadow:0 1px 4px #191f2809}
.tab:hover:not([aria-selected=true]){color:var(--ink);background:#e9edf1}
.quest-overview{padding:26px 0 0}
.event-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:10px}
.mode{color:var(--blue);font-weight:600}
.quest-title{display:flex;align-items:center;justify-content:space-between;gap:16px}
h2{font-size:20px;line-height:1.5;font-weight:700;min-width:0}
.quest-emblem{flex:0 0 38px;display:grid;place-items:center;width:38px;height:38px;color:var(--blue);background:var(--blue-soft);border-radius:8px;font-size:23px}
.all-complete .quest-emblem{color:var(--green);background:var(--green-soft)}
.metric-label{font-size:14px;color:var(--secondary);margin-top:26px}
.metric{font-size:36px;font-weight:750;line-height:1.35;font-variant-numeric:tabular-nums;margin-top:4px}
.metric small{font-size:20px;color:var(--muted);font-weight:500;margin-left:8px}
.progress-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12px;margin:22px 0 10px;color:var(--muted)}
.goal{font-size:14px;color:var(--secondary)}.goal strong{color:var(--blue);font-weight:650}
.progress-heading>strong{font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}
.progress-track{height:7px;border-radius:4px;background:#edf0f4;overflow:hidden}
.progress-fill{display:block;height:100%;background:#3182f6;border-radius:4px;transform-origin:left;animation:progress-in .65s cubic-bezier(.2,.7,.2,1) both}
.all-complete .progress-fill{background:var(--green)}.all-complete .goal{color:var(--green)}
.next-reward{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:17px;font-size:13px;color:var(--muted)}
.next-reward strong{color:var(--ink);font-size:16px;font-weight:650;display:inline-flex;align-items:center;gap:6px;text-align:right;font-variant-numeric:tabular-nums}
.next-reward.complete strong{color:var(--green)}
.reset{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:18px 0;margin-top:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.reset>span:first-child{display:flex;align-items:center;gap:6px}.reset .ti{font-size:16px;color:#8b95a1}
.countdown{font-weight:600;color:var(--secondary);font-variant-numeric:tabular-nums;white-space:nowrap}.countdown.elapsed{color:var(--amber)}
.rewards{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px 0 8px}
.rewards.single{grid-template-columns:1fr}.reward-label{color:var(--muted);font-size:13px}
.reward-value{margin-top:7px;font-size:23px;line-height:1.4;font-weight:700;font-variant-numeric:tabular-nums}.paid{color:var(--green)}
.sync-note{font-size:11px;color:var(--muted);margin-top:12px}
.update-guide{font-size:13px;line-height:1.6;color:var(--muted);margin-bottom:8px;word-break:keep-all;overflow-wrap:anywhere}
.notice{font-size:13px;color:var(--amber);background:#fff8e9;border-radius:6px;margin-top:14px;padding:12px 14px}
.section{position:relative;padding:28px 0;margin-top:28px;border-top:1px solid var(--line)}
.rewards+.section,.sync-note+.section,.notice+.section{border-top:0}
.rewards+.section:before,.sync-note+.section:before,.notice+.section:before{content:"";position:absolute;top:0;left:-24px;right:-24px;height:8px;background:#f4f5f7}
.section+.section{margin-top:0;padding:22px 0}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
h3{font-size:19px;font-weight:700}.section-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.section-count strong{color:var(--blue);font-weight:650}
.section-subtitle{font-size:13px;color:var(--muted);margin:6px 0 20px}
.quest-list{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.quest-item{border:0;border-radius:8px;background:#fff;overflow:hidden;animation:content-in .2s ease both}
.quest-item.active{background:var(--blue-soft)}
.quest-item summary{display:flex;align-items:center;gap:13px;padding:17px 12px;list-style:none;cursor:pointer;min-height:100px;border-radius:8px}
.quest-item:not(.active) summary:hover{background:var(--soft)}
.quest-item>summary:focus-visible{outline-offset:-3px}
summary::-webkit-details-marker{display:none}summary::marker{content:""}
.quest-icon{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;background:#f2f4f6;border-radius:50%;color:#8b95a1;font-size:14px;font-weight:650}
.quest-icon .ti{font-size:21px}.quest-item.active .quest-icon{background:#dfeaff;color:var(--blue)}
.quest-item.achieved .quest-icon{background:var(--green-soft);color:var(--green)}
.quest-item.pending .quest-icon{background:#fff6df;color:var(--amber)}
[data-mission] .quest-icon{border-radius:8px}
.quest-body{flex:1;min-width:0}.quest-kicker{font-size:12px;font-weight:500;color:var(--muted);margin-bottom:3px}.quest-item.active .quest-kicker{color:var(--blue)}
.quest-name{font-size:15px;font-weight:650;line-height:1.5}.quest-reward{font-size:14px;font-weight:500;color:var(--secondary);margin-top:4px;font-variant-numeric:tabular-nums}
.quest-item.active .quest-reward{color:var(--blue)}
.quest-right{align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:12px;flex:0 0 auto}
.state{font-size:12px;font-weight:500;white-space:nowrap;color:var(--muted)}.state.done{color:var(--green)}.state.waiting{color:var(--amber)}.state.next{color:var(--blue)}
.chevron{font-size:17px;color:#8b95a1;transition:transform .2s}.quest-item[open] .chevron,.info[open]>summary .chevron{transform:rotate(180deg)}
.quest-detail{padding:16px;border-top:1px solid #e9edf3;font-size:13px;color:var(--muted)}
.quest-detail p+p{margin-top:8px}.quest-detail strong{color:var(--secondary);font-weight:650}
.mini-progress{height:4px;background:#e7ebf0;margin:12px 0;border-radius:2px;overflow:hidden}.mini-progress .progress-fill{animation:none;background:#98bff8}
.quest-detail .detail-row{display:flex;justify-content:space-between;gap:14px}
.mission-filter{display:flex;gap:4px;padding:3px;margin:18px 0 12px;background:#f2f4f6;border-radius:6px}
.mission-filter button{flex:1;min-width:0;padding:8px 4px;border:0;background:transparent;border-radius:4px;font-size:12px;font-weight:500;color:var(--muted);min-height:36px}
.mission-filter button[aria-pressed=true]{background:#fff;color:var(--ink);font-weight:600}.mission-filter small{font-size:11px;margin-left:5px;color:var(--muted)}
.empty-filter{font-size:13px;color:var(--muted);text-align:center;padding:28px 8px}
.info>summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;font-size:14px;font-weight:600;gap:12px;min-height:32px}
.info>summary>span{display:flex;align-items:center;gap:10px}.info>summary .ti{font-size:19px;color:#8b95a1}
.notes{padding-left:19px;font-size:13px;color:var(--muted);margin:18px 0 0}.notes li+li{margin-top:10px}
.history{display:flex;justify-content:space-between;gap:16px;padding:16px 0;font-size:12px;border-bottom:1px solid var(--line)}.history:last-child{border:0}.amounts{text-align:right;font-weight:500}
.achievement{display:flex;align-items:center;gap:10px;padding:12px 14px;margin:16px 0 0;background:var(--green-soft);border-radius:8px;color:var(--green);font-size:13px;font-weight:600;animation:content-in .2s ease both}
.achievement>.ti{font-size:22px}.achievement>span{flex:1}.achievement button{border:0;background:none;color:inherit;font-size:20px;min-width:36px;min-height:36px}
.message{padding:28px 18px;background:var(--soft);border-radius:8px;font-size:14px;color:var(--muted);margin-bottom:24px}.message.error{background:#fff5f2;color:#9d4330}
.footer{padding-top:18px;padding-bottom:max(36px,env(safe-area-inset-bottom));font-size:11px;color:var(--muted);text-align:center}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes progress-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes content-in{from{opacity:.3}to{opacity:1}}
@media(min-width:768px){.wrap{padding-left:32px;padding-right:32px}.heading{padding-top:24px}.quest-overview{padding-top:30px}.metric{font-size:38px}.rewards+.section:before,.sync-note+.section:before,.notice+.section:before{left:-32px;right:-32px}.quest-item summary{padding:18px 16px}}
@media(max-width:359px){.wrap{padding-left:20px;padding-right:20px}h1{font-size:25px}h2{font-size:18px}.metric{font-size:32px}.quest-title{gap:10px}.quest-emblem{width:32px;height:32px;flex-basis:32px;font-size:21px}.quest-item summary{gap:10px;padding:16px 8px}.quest-icon{width:30px;height:30px;flex-basis:30px}.quest-name{font-size:14px}.quest-reward{font-size:13px}.reward-value{font-size:21px}.rewards{gap:18px}.goal{font-size:13px}.rewards+.section:before,.sync-note+.section:before,.notice+.section:before{left:-20px;right:-20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
