:root{--paper:#f5f1e6;--paper-deep:#efe9da;--card:#fcfaf3;--ink:#232c3d;--ink-2:#39435a;--ink-soft:#6b7382;--line:#302a1829;--line-soft:#302a1814;--sage:#6f8460;--sage-ink:#4f6543;--sage-bg:#eaf0e2;--brick:#a54e3c;--brick-bg:#f6e9e4;--gold:#96702c;--gold-bg:#f3ebd7;--indigo:#3f66b8;--indigo-bg:#e9eef8;--lv-n5:#5c8054;--lv-n4:#6f8460;--lv-n3:#3f66b8;--lv-n2:#96702c;--lv-n1:#a54e3c;--lv-job:#5b4b8a;--radius:14px;--radius-sm:10px;--shadow-1:0 1px 0 #302a180d;--shadow-2:0 8px 24px #302a181a;--serif:"Noto Serif KR","Noto Serif JP","Apple SD Gothic Neo",serif;font-family:Pretendard,Apple SD Gothic Neo,Noto Sans KR,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:var(--paper);color:var(--ink-2);overscroll-behavior:none;user-select:none;-webkit-font-smoothing:antialiased}.app-frame{display:flex;padding:14px 20px calc(18px + env(safe-area-inset-bottom));overflow:hidden;background:var(--paper);flex-direction:column;max-width:440px;height:100%;margin:0 auto}button{cursor:pointer;border:none;font-family:inherit}.t-title{font-family:var(--serif);color:var(--ink);letter-spacing:-.01em;margin:0;font-weight:900}.t-jp{font-family:var(--serif);color:var(--ink);font-weight:700}.t-label{letter-spacing:.16em;color:var(--ink-soft);text-transform:uppercase;font-size:11.5px;font-weight:700}.t-sub{color:var(--ink-soft);font-size:12.5px;font-weight:600;line-height:1.5}.t-num{font-family:var(--serif);color:var(--ink);font-variant-numeric:tabular-nums;font-weight:900}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1)}.row-btn{text-align:left;display:flex;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1);color:var(--ink-2);align-items: center;gap:12px;width:100%;padding:13px 14px;transition:border-color .14s,background .14s,transform 60ms}.row-btn:active{transform:translateY(1px)}.row-btn.selected{border-color:var(--ink);background:linear-gradient(180deg,#232c3d0d,#232c3d05),var(--card);box-shadow:inset 0 0 0 1px var(--ink)}.row-btn .row-title{font-family:var(--serif);color:var(--ink);font-size:15px;font-weight:700;line-height:1.35}.row-btn .row-meta{color:var(--ink-soft);font-variant-numeric:tabular-nums;flex:none;margin-left:auto;font-size:12px;font-weight:700}.feature-btn{text-align:left;display:flex;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-1);color:var(--ink-2);align-items: center;gap:12px;width:100%;padding:14px;transition:border-color .14s,transform 60ms}.feature-btn:active{transform:translateY(1px)}.feature-btn .chev{color:var(--ink-soft);display:inline-flex;flex:none;margin-left:auto}.icon-tile{border:1.4px solid var(--line);display:inline-flex;color:var(--ink);background:0 0;border-radius:50%;flex:none;justify-content:center;align-items: center;width:38px;height:38px}.icon-tile.sage{color:var(--sage-ink);border-color:#6f846073}.icon-tile.indigo{color:var(--indigo);border-color:#3f66b859}.icon-tile.gold{color:var(--gold);border-color:#96702c66}.lv{display:inline-flex;font-family:var(--serif);color:#fff;letter-spacing:.02em;border-radius:7px;flex:none;justify-content:center;align-items: center;min-width:34px;height:26px;padding:0 8px;font-size:12.5px;font-weight:900}.lv.n5{background:var(--lv-n5)}.lv.n4{background:var(--lv-n4)}.lv.n3{background:var(--lv-n3)}.lv.n2{background:var(--lv-n2)}.lv.n1{background:var(--lv-n1)}.lv.job{background:var(--lv-job)}.chip{display:inline-flex;border:1px solid var(--line);background:var(--card);color:var(--ink-2);border-radius:999px;align-items: center;gap:5px;padding:4px 10px;font-size:12px;font-weight:700}.chip.gold{color:var(--gold);background:var(--gold-bg);border-color:#96702c66}.chip.sage{color:var(--sage-ink);background:var(--sage-bg);border-color:#6f846073}.chunky{letter-spacing:-.01em;color:#fff;background:var(--ink);border-radius:12px;width:100%;padding:15px 16px;transition:transform 50ms,box-shadow 50ms,filter .15s;font-size:16px;font-weight:800;box-shadow:0 3px #141a268c}.chunky:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 #141a268c}.chunky:disabled{opacity:.5;cursor:default}.chunky.sage{background:var(--sage-ink);box-shadow:0 3px #34442c99}.chunky.brick{background:var(--brick);box-shadow:0 3px #78362899}.chunky.blue{background:var(--indigo);box-shadow:0 3px #26428099}.ghost-btn{color:var(--ink);border:1.4px solid var(--line);background:0 0;border-radius:12px;width:100%;padding:13px 16px;transition:background .14s;font-size:15px;font-weight:700}.ghost-btn:active{background:var(--paper-deep)}.choice{border:1.4px solid var(--line);background:var(--card);color:var(--ink);text-align:left;box-shadow:var(--shadow-1);border-radius:12px;width:100%;padding:15px 16px;transition:border-color .12s,background .12s,color .12s,transform 50ms;font-size:15.5px;font-weight:700}.choice:active:not(:disabled){border-color:var(--ink);transform:translateY(1px)}.choice:disabled{cursor:default}.choice.correct{border-color:var(--sage);background:var(--sage-bg);color:var(--sage-ink);border-width:2px}.choice.wrong{border-color:var(--brick);background:var(--brick-bg);color:var(--brick);border-width:2px}.choice.dimmed{opacity:.4}.progress-track{background:var(--paper-deep);border:1px solid var(--line-soft);overflow:hidden;border-radius:999px;flex:1;height:8px}.progress-fill{background:var(--sage);border-radius:999px;height:100%;transition:width .28s}.verdict{border-radius:var(--radius);border:1px solid var(--line);background:var(--card);padding:14px 16px}.verdict.ok{background:var(--sage-bg);border-color:#6f846080}.verdict.ng{background:var(--brick-bg);border-color:#a54e3c73}.verdict-title{font-family:var(--serif);display:flex;align-items: center;gap:8px;margin:0;font-size:15px;font-weight:900}.verdict.ok .verdict-title{color:var(--sage-ink)}.verdict.ng .verdict-title{color:var(--brick)}.speak-btn:active:not(:disabled){transform:translateY(1px)}.speak-btn:disabled{cursor:default;opacity:.85}.reg-field{display:flex;text-align:left;flex-direction:column;gap:5px}.reg-field label{letter-spacing:.06em;color:var(--ink-soft);font-size:11.5px;font-weight:800}.reg-field input,.reg-field select{color:var(--ink);background:var(--card);border:1.4px solid var(--line);appearance:none;border-radius:10px;width:100%;padding:11px 12px;font-family:inherit;font-size:15px;font-weight:600}.reg-field input:focus,.reg-field select:focus{outline:none;border-color:var(--ink)}.reg-consent{display:flex;text-align:left;color:var(--ink-2);align-items: flex-start;gap:8px;font-size:13px;font-weight:600;line-height:1.5}.reg-consent input{accent-color:var(--sage-ink);flex-shrink:0;width:18px;height:18px;margin-top:1px}.reg-consent a{color:var(--indigo);font-weight:700}.reg-error{color:var(--brick);margin:0;font-size:13px;font-weight:700}.scroll-fade{overflow-y:auto;display:flex;-webkit-mask-image:linear-gradient(#0000 0,#000 10px calc(100% - 12px),#0000 100%);mask-image:linear-gradient(#0000 0,#000 10px calc(100% - 12px),#0000 100%);flex-direction:column;flex:1;gap:10px;padding-bottom:10px}.screen-head{display:flex;align-items: center;gap:10px}.back-btn{display:inline-flex;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-1);color:var(--ink);flex:none;justify-content:center;align-items: center;width:34px;height:34px;transition:background .14s,transform 60ms}.back-btn:active{background:var(--paper-deep);transform:translateY(1px)}.card-pad{display:flex;flex-direction:column;gap:10px;padding:14px}.sec-head{display:flex;font-family:var(--serif);color:var(--ink);align-items: center;gap:6px;font-size:14.5px;font-weight:900}.sec-head .sec-ico{display:inline-flex;color:var(--ink-soft);flex:none}.gauge-track{position:relative;background:var(--paper-deep);border:1px solid var(--line-soft);overflow:hidden;border-radius:999px;height:10px}.gauge-max{position:absolute;top:0;bottom:0;background:#96702c4d;border-radius:999px;height:100%;left:0}.gauge-typical{position:absolute;top:0;bottom:0;background:var(--sage);border-radius:999px;height:100%;left:0}.gauge-note{display:flex;color:var(--gold);align-items: center;gap:6px;font-size:12.5px;font-weight:700}.co-card{display:flex;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-1);flex-direction:column;gap:6px;min-width:168px;max-width:168px;padding:12px}.co-card.locked{border-style:dashed;border-color:var(--line);box-shadow:none;background:0 0}.co-card .co-name{display:flex;font-family:var(--serif);color:var(--ink);align-items: center;gap:6px;font-size:14.5px;font-weight:700;line-height:1.3}.co-card.locked .co-name{color:var(--ink-soft)}.co-rail{display:flex;overflow-x:auto;gap:10px;padding-bottom:4px}.lamp-dot{box-shadow:0 0 0 3px var(--paper-deep);border-radius:999px;flex:none;width:10px;height:10px}.quest-card.is-done{background:var(--sage-bg);border-color:#6f846080}.quest-card.is-active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.quest-card.is-locked{box-shadow:none;background:0 0;border-style:dashed}.quest-head{display:flex;font-family:var(--serif);color:var(--ink);align-items: center;gap:6px;font-size:14.5px;font-weight:700}.quest-card.is-locked .quest-head{color:var(--ink-soft)}.quest-head .quest-ico{display:inline-flex;color:var(--ink-soft);flex:none}.quest-card.is-done .quest-head,.quest-card.is-done .quest-head .quest-ico{color:var(--sage-ink)}.quest-card.is-active .quest-head .quest-ico{color:var(--ink)}.keigo-kind{border-left:3px solid var(--line);display:flex;flex-direction:column;gap:6px;padding-left:12px}.keigo-tag{display:inline-flex;font-family:var(--serif);color:#fff;letter-spacing:.02em;border-radius:6px;align-items: center;padding:2px 8px;font-size:11.5px;font-weight:900}.keigo-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}.keigo-list li{position:relative;color:var(--ink-soft);padding-left:16px;font-size:12.5px;font-weight:600;line-height:1.6}.keigo-list li:before{content:"";position:absolute;background:var(--ink-soft);opacity:.45;border-radius:999px;width:5px;height:5px;top:.62em;left:2px}.hero-num{display:flex;font-family:var(--serif);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;justify-content:center;align-items: center;gap:9px;margin:0;font-size:40px;font-weight:900;line-height:1}.hero-num .hero-unit{letter-spacing:.08em;color:var(--ink-soft);align-self: flex-end;padding-bottom:4px;font-family:inherit;font-size:15px;font-weight:800}.stat-panel{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-1);flex:1;min-width:0;padding:11px 6px 12px}.stat-panel .stat-label{letter-spacing:.1em;color:var(--ink-soft);font-size:10.5px;font-weight:700}.stat-panel .stat-value{display:flex;font-family:var(--serif);color:var(--ink);font-variant-numeric:tabular-nums;justify-content:center;align-items: center;gap:4px;margin-top:5px;font-size:21px;font-weight:900;line-height:1.15}.stat-panel.sage{border-color:#6f846066}.stat-panel.gold{border-color:#96702c59}.stat-panel.indigo{border-color:#3f66b84d}.stat-panel.sage .stat-value{color:var(--sage-ink)}.stat-panel.gold .stat-value{color:var(--gold)}.stat-panel.indigo .stat-value{color:var(--indigo)}.streak-note{display:inline-flex;background:var(--gold-bg);color:var(--gold);font-family:var(--serif);font-variant-numeric:tabular-nums;border:1px solid #96702c66;border-radius:999px;align-items: center;gap:8px;padding:8px 16px;font-size:15px;font-weight:900}.outline-cta{display:flex;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-1);color:var(--ink);text-align:left;text-decoration:none;border-radius:12px;align-items: center;gap:10px;width:100%;padding:12px 14px;transition:border-color .14s,transform 60ms;font-size:14px;font-weight:700;line-height:1.4}.outline-cta:active{transform:translateY(1px)}.outline-cta .chev{color:var(--ink-soft);display:inline-flex;flex:none;margin-left:auto}.icon-tile.sm{border-width:1.2px;width:30px;height:30px}.link-btn{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;background:0 0;padding:8px;font-size:13px;font-weight:700}.gate-backdrop{position:fixed;z-index:50;display:flex;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#232c3d73;justify-content:center;align-items: flex-end;inset:0}.gate-panel{overflow-y:auto;display:flex;padding:18px 20px calc(20px + env(safe-area-inset-bottom));background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-2);border-bottom:none;border-radius:14px 14px 0 0;flex-direction:column;gap:12px;width:100%;max-width:440px;max-height:86%}.detail-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);display:flex;flex-direction:column;gap:8px;padding:11px 13px 12px}.detail-head{display:flex;font-family:var(--serif);color:var(--ink);border-bottom:1px solid var(--line-soft);align-items: center;gap:7px;padding-bottom:8px;font-size:13px;font-weight:700}.detail-head .detail-head-icon{display:inline-flex;color:var(--ink-soft);flex:none}.detail-head .detail-head-sub{font-family:var(--serif);color:var(--ink-soft);margin-left:auto;font-size:12px;font-weight:600}.detail-tag{letter-spacing:.03em;border:1px solid var(--line);background:var(--paper-deep);color:var(--ink-soft);border-radius:999px;flex:none;padding:1px 8px;font-size:10.5px;font-weight:700;line-height:1.7}.detail-note{display:flex;color:var(--ink-soft);align-items: flex-start;gap:6px;font-size:12px;font-weight:600;line-height:1.55}.detail-note .detail-note-icon{display:inline-flex;flex:none;margin-top:1px}.detail-note.indigo .detail-note-icon{color:var(--indigo)}.detail-note.brick,.detail-note.brick .detail-note-icon{color:var(--brick)}.row-btn{padding:11px 13px}.row-btn .row-title{font-size:14.5px}.row-btn+.row-btn{margin-top:-2px}.feature-btn{padding:12px 13px}.scroll-fade{gap:8px}