@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'Noto Sans KR',system-ui,sans-serif;color:#182a43;background:#edf1f4;font-synthesis:none;--navy:#233f65;--blue:#488ee8;--green:#009985;--muted:#7c899d;--line:#ecf0f4}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #77b4ff;outline-offset:3px}button{border:0}button:disabled{opacity:.35;cursor:default}.app{width:100%;max-width:440px;margin:0 auto;min-height:100dvh;background:#fff;position:relative;padding-bottom:100px;box-shadow:0 0 80px #2343650a}main{padding:24px 22px}h1,h2,h3,p{margin:0}h1{font-size:25px;font-weight:900;letter-spacing:-1.1px}h2{font-size:18px;font-weight:800;letter-spacing:-.7px}h3{font-size:14px}small,.muted{color:var(--muted)}small{font-size:11px}.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.brand{display:flex;gap:10px;align-items:center}.brand-icon{font-size:35px}.brand p{font-size:10px;color:#647897;margin-top:2px}.icon-btn{background:#f3f6f9;border-radius:50%;width:37px;height:37px;color:var(--navy);display:grid;place-items:center}.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.greeting{background:linear-gradient(130deg,#e7f3ff,#d9eaff);border-radius:23px;padding:22px 18px 16px;position:relative;overflow:hidden}.hello{position:relative;z-index:1;min-height:115px}.hello h2{font-size:20px;margin-bottom:9px}.hello p{font-size:12px;line-height:1.8;color:#527199}.hero-mascot{position:absolute;width:165px;height:165px;right:-15px;top:-5px;object-fit:cover;border-radius:32%;mix-blend-mode:multiply}.hero-emoji{position:absolute;right:0;top:0;font-size:85px}.eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:800;color:#7b94b2}.metric-card{position:relative;background:#ffffffed;border:1px solid #fff;border-radius:17px;padding:19px 16px}.metric-columns{display:flex;justify-content:space-between;gap:10px}.number{font-size:48px;font-weight:900;line-height:1.2;letter-spacing:-2px;color:#17355f;font-variant-numeric:tabular-nums}.up{color:var(--green);font-weight:800}.down{color:#e67572;font-weight:800}.growth{font-size:16px;margin:3px 0}.rank-block{background:#fff4e9;border-radius:13px;min-width:80px;text-align:center;padding:9px;font-size:10px}.rank-block strong{display:block;font-size:22px;line-height:1.4;color:#253e5f}.rank-block hr{border:0;border-top:1px solid #eedfd2;margin:7px}.goal{margin-top:18px}.goal p{font-size:12px;font-weight:700;margin-bottom:9px}.progress-row{display:flex;gap:9px;align-items:center;font-size:11px;font-weight:700}.track{height:9px;background:#e9edf1;border-radius:20px;flex:1;overflow:hidden}.track span{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,#77b5ff,#3984de)}.section-head{display:flex;align-items:center;justify-content:space-between;margin:25px 0 12px}.text-btn{background:none;color:#73849c;font-size:11px;padding:4px}.winners{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:17px}.winner{border-radius:19px;text-align:center;padding:17px 12px;background:linear-gradient(160deg,#fff0e8,#fffbeb)}.winner.grow{background:linear-gradient(150deg,#fff1ed,#fff8e4)}.winner-title{font-size:12px;font-weight:800}.avatar{display:inline-grid;place-items:center;background:#e4efff;border:3px solid #fff;border-radius:50%;width:42px;height:42px;font-size:28px;flex-shrink:0}.winner .avatar{width:69px;height:69px;font-size:46px;margin:12px 0 7px;background:#ffdda3}.winner strong{display:block;font-size:27px;line-height:1.3;letter-spacing:-1px}.winner h3{font-size:13px}.highlight{border:1px solid var(--line);border-radius:15px;padding:15px;display:flex;gap:12px;align-items:center}.highlight p{font-size:12px;line-height:1.8}.highlight .avatar{background:#ffe8e6}.demo-note{text-align:center;color:#94a0b1;font-size:10px;margin-top:20px}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:440px;background:#ffffffed;backdrop-filter:blur(14px);border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:center;padding:10px 8px max(10px,env(safe-area-inset-bottom));z-index:20;height:78px}.nav-item{background:none;color:#7d8a9e;width:20%;font-size:10px;display:flex;align-items:center;flex-direction:column;gap:4px}.nav-item.active{color:#1c416e;font-weight:800}.nav-add .plus{width:54px;height:54px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;border:4px solid #fff;box-shadow:0 1px 8px #18355a40;font-size:34px;font-weight:400;line-height:1;margin-top:-29px}.tabs{display:flex;gap:5px;margin-bottom:10px}.tabs button{flex:1;min-height:35px;border-radius:9px;background:#f0f3f6;color:#69788f;font-size:11px;font-weight:600;padding:7px 5px}.tabs button.selected{background:var(--navy);color:#fff;box-shadow:0 2px 4px #203d6420}.banner{margin:19px 0;background:linear-gradient(120deg,#edf6ff,#dfecfb);border-radius:15px;padding:18px;display:flex;justify-content:space-between;align-items:center}.banner h2{font-style:italic;color:#244d7d}.banner .bowling{font-size:43px}.table-head,.rank-row{display:grid;grid-template-columns:28px 1fr 65px 43px;align-items:center;gap:6px}.table-head{font-size:9px;color:#8a96a7;padding:10px 5px}.rank-row{padding:10px 5px;border-bottom:1px solid var(--line);font-size:12px}.rank-row.me{background:#eef5ff;border-radius:9px}.rank-row .person{display:flex;align-items:center;gap:7px;min-width:0}.rank-row .avatar{width:31px;height:31px;font-size:21px;border-width:2px}.rank-row .score{font-weight:800;text-align:right;font-size:14px}.rank-number{font-weight:800;color:#6e7a8a}.rank-row .change{text-align:right;font-size:10px}.rank-row small{font-size:9px}.label{display:block;font-size:12px;font-weight:700;margin:22px 0 9px}input,textarea{border:1px solid #e0e6ef;border-radius:9px;padding:11px 12px;color:#243e60;background:#fff;min-width:0;width:100%}input[type=date]{width:100%;font-size:13px}textarea{resize:vertical;min-height:75px;font-size:12px}.score-input{display:flex;gap:7px;align-items:center;margin:10px 0}.score-input label{font-size:12px;width:41px;flex-shrink:0}.score-input input{text-align:center;font-size:20px;font-weight:800;padding:8px;flex:1}.step{width:33px;height:37px;flex-shrink:0;border-radius:9px;background:#f0f3f6;color:#324c6f;font-size:20px}.remove{font-size:15px;width:24px;background:none;color:#8795a8}.add-game{padding:10px 13px;background:#fff0ed;color:#ec7268;border-radius:9px;font-size:12px;font-weight:700}.primary{width:100%;padding:14px;background:var(--navy);color:#fff;border-radius:11px;font-size:13px;font-weight:700}.error{color:#cc433c;font-size:12px;min-height:22px;margin:8px 0}.card{border:1px solid var(--line);border-radius:17px;padding:18px;margin:14px 0;background:#fff;box-shadow:0 3px 12px #203d6403}.profile{display:flex;align-items:center;gap:18px;margin:15px 0 25px}.profile .avatar{width:90px;height:90px;font-size:60px;background:#dbe9ff}.badge{font-size:11px;background:#fff4db;border-radius:7px;padding:5px 9px;display:inline-block;margin-top:8px}.profile-edit{background:none;color:#637995;margin-left:5px}.my-stats{display:flex;align-items:center;gap:12px}.my-stats .number{font-size:39px}.ribbon{margin-top:13px;padding:8px;background:#edf7f5;color:#0a877b;border-radius:7px;font-size:11px;font-weight:700}.session{padding:13px 0;border-bottom:1px solid var(--line)}.session:last-child{border:0}.session-top{display:flex;justify-content:space-between;font-size:11px;margin-bottom:8px}.score-pills{display:flex;gap:6px;flex-wrap:wrap}.score-pill{padding:7px 12px;background:#f1f5fa;border-radius:8px;font-size:14px;font-weight:800}.session p{font-size:11px;color:#78869a;margin-top:6px}.chart{width:100%;height:auto;margin-top:12px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.stat-grid div{background:#f6f8fb;text-align:center;padding:12px 2px;border-radius:10px;font-size:10px;color:#78869a}.stat-grid strong{display:block;color:#213957;font-size:20px;margin-top:4px}.bars{display:flex;align-items:flex-end;height:125px;gap:11px;padding-top:18px}.bar-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;font-size:10px;color:#506e96}.bar{width:100%;min-height:2px;background:linear-gradient(#72a9eb,#4386d8);border-radius:4px 4px 0 0;margin-top:4px}.bar-col small{font-size:8px;margin-top:5px}.achievement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.achievement{border:1px solid var(--line);border-radius:14px;padding:14px 6px;text-align:center;background:#fff}.achievement .medal{width:56px;height:56px;margin:0 auto 8px;display:grid;place-items:center;font-size:36px;border-radius:50%;background:#fff0c8}.achievement.locked .medal{filter:grayscale(1);opacity:.45}.achievement h3{font-size:10px}.achievement small{display:block;font-size:9px;margin:6px 0}.achievement .track{height:5px}.avatars{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:20px 0}.avatar-option{background:#f7f9fb;border:2px solid transparent;border-radius:13px;padding:9px 2px;font-size:9px;color:#5a6d86}.avatar-option .avatar{width:51px;height:51px;font-size:34px;display:grid;margin:auto auto 5px}.avatar-option.selected{border-color:#386eb2;background:#edf5ff}.result-main{background:linear-gradient(150deg,#203755 0,#2e4e71 36%,#e9c894 100%);min-height:calc(100dvh - 78px);padding-top:30px}.result-title{text-align:center;color:#ffe6ac;font-size:32px;letter-spacing:1px;transform:rotate(-3deg);font-weight:900}.result-sub{text-align:center;color:#fff;margin:8px;font-size:14px}.result-mascot{display:block;width:155px;height:130px;object-fit:cover;border-radius:40%;margin:12px auto;mix-blend-mode:screen}.result-emoji{text-align:center;font-size:76px;margin:8px}.result-panel{background:#fffdf8;border-radius:21px;padding:14px}.result-scores{display:flex;gap:6px;flex-wrap:wrap}.result-scores div{flex:1;min-width:60px;background:#faf2e5;text-align:center;border-radius:11px;padding:12px 5px;font-size:10px}.result-scores strong{display:block;font-size:27px;margin-top:3px}.result-scores .best{color:#f17b3e}.today-avg{text-align:center;border:3px solid #ffe4aa;background:#fff6df;border-radius:14px;padding:10px;margin-top:10px;font-size:12px}.today-avg strong{display:block;font-size:39px;line-height:1.2}.result-rank{display:flex;align-items:center;gap:15px;background:#fff6e6;padding:15px;border-radius:15px;margin-top:12px}.result-rank span{font-size:38px}.result-rank h2{color:#ed7850;font-size:23px;font-style:italic}.result-rank p{font-size:18px;font-weight:800}.result-actions{display:flex;gap:9px;margin-top:14px}.result-actions button{flex:1}.secondary{background:#ffffffd9;border:1px solid white;color:var(--navy);border-radius:11px;font-weight:700}.empty{padding:35px 15px;text-align:center;color:#7a8a9f;font-size:13px}.desktop-brand{display:none}.toast{position:fixed;bottom:95px;left:50%;transform:translateX(-50%);background:#203d64;color:white;padding:11px 18px;font-size:12px;border-radius:10px;z-index:100;width:max-content;max-width:90vw}.celebrate{animation:pop .55s ease-out}@keyframes pop{from{transform:translateY(15px);opacity:.2}to{transform:translateY(0);opacity:1}}@media(min-width:900px){body{background:radial-gradient(ellipse at 25% 30%,#e2ebf7,transparent 60%),#eff2f5}.desktop-brand{display:block;position:fixed;left:calc(50% - 430px);top:23%;width:260px}.desktop-brand>span{font-size:60px}.desktop-brand h1{font-size:35px;margin-top:20px}.desktop-brand p{font-size:28px;font-weight:800;line-height:1.6;margin:22px 0;color:#3b5779}.desktop-brand small{font-size:12px}.desktop-note{margin-top:65px;font-size:9px;letter-spacing:2px;line-height:1.9;color:#9baabb}.app{margin-left:calc(50% - 85px);margin-right:0;min-height:100vh}.bottom-nav{left:calc(50% + 135px)}}@media(max-width:374px){main{padding:20px 15px}.number{font-size:43px}.hero-mascot{width:145px;height:145px}.hello h2{font-size:18px}.avatar-option .avatar{width:45px;height:45px}.score-input{gap:5px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

select{display:block;width:100%;padding:11px;border:1px solid #e0e6ef;border-radius:9px;background:#fff;color:#243e60;margin-top:8px;font:inherit}