@font-face { font-family:"Spoqa"; src:url("fonts/spoqahansansregular.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Spoqa"; src:url("fonts/spoqahansansmedium.otf") format("opentype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Spoqa"; src:url("fonts/spoqahansansbold.otf") format("opentype"); font-weight:800; font-display:swap; }

:root {
  --mint:#2ac1bc; --orange:#ff8200; --ink:#202725; --sub:#8a9692;
  --line:#edf1f0; --deep:#137f79; --wash:#effaf8; --mute:#96a29e; --page:#f4f6f5;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; }
body {
  background:var(--page); color:var(--ink);
  font-family:"Spoqa","Malgun Gothic",-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:contain;
}
button, input { font-family:inherit; color:inherit; }

.boot { position:fixed; inset:0; display:grid; place-items:center; background:var(--page); color:var(--sub); font-size:13px; z-index:50; }
.boot[hidden] { display:none; }

/* 로그인 */
.login { min-height:100%; display:grid; place-items:center; padding:24px 20px calc(24px + env(safe-area-inset-bottom)); }
.login[hidden] { display:none; }
.login-card { width:100%; max-width:360px; background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px 24px 24px; }
.login-title { font-size:22px; font-weight:800; margin:0 0 5px; letter-spacing:-.4px; }
.login-sub { font-size:12.5px; color:var(--sub); margin:0 0 24px; line-height:1.6; }
.field { display:block; margin-bottom:13px; }
.field span { display:block; font-size:11.5px; color:var(--sub); font-weight:600; margin-bottom:6px; }
.field input { width:100%; height:50px; padding:0 15px; border:1px solid #dbe5e1; border-radius:12px; background:#fff; font-size:16px; font-weight:600; outline:none; }
.field input:focus { border-color:var(--mint); }
.switch { display:inline-flex; align-items:center; gap:10px; margin:18px 0 4px; cursor:pointer;
          user-select:none; -webkit-user-select:none; }
.switch > span { font-size:13.5px; font-weight:600; color:#53615d; }
.switch input { appearance:none; -webkit-appearance:none; margin:0; flex:none; cursor:pointer;
                width:32px; height:19px; border-radius:99px; background:#dde4e2; position:relative;
                transition:background .2s cubic-bezier(.4,0,.2,1); }
.switch input::after { content:""; position:absolute; top:2px; left:2px; width:15px; height:15px;
                       border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(32,39,37,.16);
                       transition:transform .2s cubic-bezier(.4,0,.2,1); }
.switch input:checked { background:var(--mint); }
.switch input:checked::after { transform:translateX(13px); }
.login-error { font-size:12.5px; color:#c0392b; margin:14px 0 0; line-height:1.5; }
.login-error[hidden] { display:none; }
.login-submit { width:100%; height:52px; margin-top:18px; border:0; border-radius:14px; background:var(--mint); color:#fff; font-size:16px; font-weight:800; cursor:pointer; }
.login-submit:disabled { background:#c2ddda; }

/* 앱 */
.app { min-height:100%; display:flex; flex-direction:column; }
.app[hidden] { display:none; }
.top { flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px;
       padding:calc(12px + env(safe-area-inset-top)) 18px 12px; }
.brand { border:0; background:none; padding:0; font-size:17px; font-weight:800; letter-spacing:-.3px; }
.top-right { display:flex; align-items:center; gap:8px; }
.sync { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
        color:var(--deep); background:var(--wash); border-radius:999px; padding:6px 11px; }
.sync.stale { color:var(--sub); background:#f2f5f4; }
.sync.down { color:#a8564f; background:#fdeeed; }
.dot { width:6px; height:6px; border-radius:50%; background:var(--mint); flex:none; }
.sync.stale .dot { background:#c3ccc9; }
.sync.down .dot { background:#d98a83; }
.logout { width:34px; height:34px; display:grid; place-items:center; padding:0; border:0; background:none; color:#a9b5b1; cursor:pointer; }
.logout svg { width:19px; height:19px; }

.scroll { flex:1; padding:0 18px calc(26px + env(safe-area-inset-bottom)); }

.card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px 17px; margin-bottom:11px; }

.kicker { font-size:11px; color:var(--sub); font-weight:600; letter-spacing:.2px; }
.kicker.mb { display:block; margin-bottom:3px; }
.kicker.tap { display:inline-flex; align-items:center; gap:2px; border:0; background:none; padding:0; cursor:pointer; }
.caret { width:13px; height:13px; opacity:.55; }
.khead { display:flex; align-items:center; gap:7px; margin-bottom:13px; }
.chip { font-size:10px; font-weight:800; border-radius:999px; padding:3px 8px; }
.chip[hidden] { display:none; }
.chip.bonus { background:#fff1e2; color:#c25e00; }
.chip.sur { background:#ffeceb; color:#c0392b; }
.chip.hold { background:#eef2f1; color:#6f7c78; }
.kicker.tap + .chip { margin-left:7px; vertical-align:1px; }

.live { display:flex; gap:15px; align-items:center; }
.ring { width:74px; height:74px; border-radius:50%; flex:none; display:grid; place-items:center;
        background:conic-gradient(var(--mint) calc(var(--p) * 1%), #e9efed 0); }
.ring i { width:60px; height:60px; border-radius:50%; background:#fff; display:grid; place-items:center;
          font-style:normal; font-size:15px; font-weight:800; color:var(--deep); }
/* 멈춰 있어도 색은 죽이지 않는다. 폰으로 보는 시간의 대부분이 정지 상태라,
   그 화면이 가장 자주 보이는 화면이기 때문이다. 멈춤은 칩이 알려준다. */

.route { flex:1; min-width:0; }
.phase { font-size:14px; font-weight:800; margin-bottom:9px; }
.rrow { display:flex; gap:8px; font-size:12px; margin-bottom:5px; line-height:1.45; }
.rrow span { color:var(--sub); flex:none; width:49px; white-space:nowrap; }
.rrow b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rrow.wrap b { white-space:normal; }

.live-foot { display:flex; align-items:baseline; justify-content:space-between; margin-top:14px; padding-top:13px; border-top:1px solid var(--line); }
.live-foot span { font-size:12px; color:var(--sub); }
.live-foot strong { font-size:20px; font-weight:800; color:var(--deep); }

.banner { display:block; font-size:11.5px; font-weight:600; background:#eef2f1; color:#5f6d69;
          border-radius:12px; padding:9px 12px; margin:12px 0 0; line-height:1.45; }
.banner[hidden] { display:none; }

.hero { text-align:center; padding:16px 0 6px; }
.hero[hidden] { display:none; }
.hero strong { display:block; font-size:38px; font-weight:800; letter-spacing:-1.4px; line-height:1; font-variant-numeric:tabular-nums; }
.hero small { display:block; font-size:12px; color:var(--sub); margin-top:11px; }

.grow { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:11px 0 8px; }
.grow[hidden] { display:none; }
.grow b { font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; }
.grow small { font-size:11px; color:var(--sub); flex:none; }
.track { height:7px; border-radius:99px; background:#e9efed; overflow:hidden; margin-top:14px; }
.hero + .track { margin-top:16px; }
.grow + .track { margin-top:0; }
.fill { height:100%; border-radius:99px; background:var(--mint); transition:width .3s ease; }
.fill.warm { background:var(--orange); }
.gnote { font-size:11px; color:var(--sub); margin:8px 0 0; line-height:1.5; }
.gnote[hidden] { display:none; }

.duo { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:11px; }
.duo[hidden] { display:none; }
.stat { background:#fff; border:1px solid var(--line); border-radius:18px; padding:14px 15px; }
.stat span { display:block; font-size:11px; color:var(--sub); margin-bottom:5px; }
.stat strong { font-size:19px; font-weight:800; letter-spacing:-.3px; font-variant-numeric:tabular-nums; }
.stat strong em { font-style:normal; font-size:13px; font-weight:600; color:var(--sub); margin-left:1px; }

.lrow { display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid #f4f7f6; }
.lrow:last-child { border-bottom:0; padding-bottom:2px; }
.ltime { font-size:11px; color:var(--sub); width:38px; flex:none; }
.lbody { flex:1; min-width:0; }
.lbody b { display:block; font-size:12.5px; font-weight:600; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lbody small { font-size:11px; color:var(--sub); }
.lamt { font-size:13px; font-weight:800; color:var(--deep); flex:none; }
.lamt.pt { color:var(--mint); }

.foot { font-size:11px; color:#b3bdb9; text-align:center; margin:16px 0 0; line-height:1.6; }

.card.empty { text-align:center; padding:38px 20px; }
.card.empty strong { display:block; font-size:15px; font-weight:800; margin-bottom:7px; }
.card.empty p { font-size:12.5px; color:var(--sub); margin:0; line-height:1.6; }

/* 꾹 눌러 복사 — 2초 동안 아래쪽 선이 차오른다 */
.card.press { position:relative; overflow:hidden; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.card.press::after { content:""; position:absolute; left:0; bottom:0; height:3px; width:100%;
                     background:var(--mint); transform:scaleX(0); transform-origin:left; }
.card.press.holding::after { transform:scaleX(1); transition:transform 2s linear; }
.card.press.held { border-color:#a9ded9; }
.card.press.held::after { transform:scaleX(1); background:var(--deep); }
.kicker .hint { float:right; font-size:10.5px; font-weight:600; color:#bcc6c3; }

/* 포인트는 예산 계산에 안 들어가는 별개 값이라 선을 긋고 떼어놓는다 */
.pointrow { width:100%; display:flex; align-items:baseline; justify-content:space-between; gap:10px;
            margin-top:13px; padding:12px 0 0; border:0; border-top:1px solid var(--line);
            background:none; text-align:left; cursor:pointer; }
.pointrow[hidden] { display:none; }
.pointrow span { font-size:11.5px; color:var(--sub); }
.pointrow b { font-size:15px; font-weight:800; color:var(--mint); transition:color .15s ease; }
.pointrow.won b { color:var(--ink); }

.toast { position:fixed; left:50%; bottom:calc(28px + env(safe-area-inset-bottom)); transform:translateX(-50%);
         background:rgba(32,39,37,.92); color:#fff; font-size:13px; font-weight:600;
         padding:12px 20px; border-radius:999px; z-index:60; pointer-events:none;
         animation:toast-in .18s ease; white-space:nowrap; }
.toast[hidden] { display:none; }
@keyframes toast-in { from { opacity:0; transform:translate(-50%, 8px); } to { opacity:1; transform:translate(-50%, 0); } }

/* 프리셋 시트 */
.sheet-back { position:fixed; inset:0; background:rgba(32,39,37,.32); display:flex; align-items:flex-end; z-index:40; }
.sheet-back[hidden] { display:none; }
.sheet { width:100%; background:#fff; border-radius:22px 22px 0 0; padding:22px 18px calc(18px + env(safe-area-inset-bottom)); }
.sheet-head h2 { font-size:17px; font-weight:800; margin:0 0 4px; }
.sheet-head p { font-size:11.5px; color:var(--sub); margin:0 0 16px; line-height:1.6; }
.preset-row { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
              padding:15px 16px; margin-bottom:8px; border:1px solid #dbe5e1; border-radius:12px;
              background:#fff; font-size:15px; font-weight:800; text-align:left; cursor:pointer; }
.preset-row.active { border-color:var(--mint); background:var(--wash); color:var(--deep); }
.preset-row .name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preset-row .kind { flex:none; font-size:12px; font-weight:700; color:var(--sub); }
.preset-row.active .kind { color:#159a94; }
.sheet-close { width:100%; height:50px; margin-top:8px; border:0; border-radius:14px; background:#f2f5f4; color:#53615d; font-size:15px; font-weight:800; cursor:pointer; }

@media (min-width:520px) {
  .app, .login-card { max-width:460px; margin:0 auto; }
  .sheet { max-width:460px; margin:0 auto; border-radius:22px; margin-bottom:20px; }
  .sheet-back { align-items:center; justify-content:center; padding:20px; }
}