/* 하루마감 — 시안 v2(10/23 승인) 토큰과 부품 */
:root{
  --bg:#FFFFFF; --group:#F2F2F7; --card:#FFFFFF; --fill:#F2F2F7; --fill2:#E5E5EA;
  --label:#000000; --label2:#6C6C70; --sep:#E5E5EA;
  --tint:#0A6CFF; --on-tint:#FFFFFF; --tint-soft:#EAF1FF;
  --warn:#A35400; --warn-bg:#FFF4E5; --red:#D70015;
  --dim:rgba(0,0,0,.28); --bar:rgba(249,249,249,.94);
  --font:-apple-system,BlinkMacSystemFont,'Pretendard Variable',Pretendard,system-ui,'Malgun Gothic',sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --group:#000000; --card:#1C1C1E; --fill:#1C1C1E; --fill2:#2C2C2E;
    --label:#FFFFFF; --label2:#AEAEB2; --sep:#38383A;
    --tint:#0A84FF; --tint-soft:#0A84FF26; --warn:#FFB340; --warn-bg:#3A2A10; --red:#FF453A;
    --dim:rgba(0,0,0,.55); --bar:rgba(22,22,24,.94); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --group:#000000; --card:#1C1C1E; --fill:#1C1C1E; --fill2:#2C2C2E;
  --label:#FFFFFF; --label2:#AEAEB2; --sep:#38383A;
  --tint:#0A84FF; --tint-soft:#0A84FF26; --warn:#FFB340; --warn-bg:#3A2A10; --red:#FF453A;
  --dim:rgba(0,0,0,.55); --bar:rgba(22,22,24,.94); color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--label);-webkit-font-smoothing:antialiased;letter-spacing:-.01em;-webkit-tap-highlight-color:transparent;word-break:keep-all;overflow-wrap:break-word}
body.grouped{background:var(--group)}
button,input,select{font-family:inherit;letter-spacing:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
:focus-visible{outline:3px solid var(--tint);outline-offset:2px;border-radius:8px}
.n{font-feature-settings:"tnum" 1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
.screen{flex:1;display:flex;flex-direction:column;min-height:calc(100dvh - env(safe-area-inset-top))}
body.with-tabs .screen{padding-bottom:calc(84px + env(safe-area-inset-bottom))}

/* 위쪽 줄 */
.nav{height:44px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 8px;margin-top:4px}
.ib{min-width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:var(--label);border-radius:22px}
.ib svg{width:22px;height:22px}
.navtitle{font:600 17px/1 var(--font)}
.cap{min-height:44px;display:flex;align-items:center;padding:0 4px;border:0;background:none}
.cap span{height:32px;display:flex;align-items:center;gap:5px;padding:0 12px;border-radius:16px;background:var(--fill);font:600 13px/1 var(--font);color:var(--label2)}
.cap svg{width:16px;height:16px}
.cap.warn span{background:var(--warn-bg);color:var(--warn)}
.navbtn{min-height:44px;padding:0 10px;border:0;background:none;font:400 17px/1 var(--font);color:var(--tint);display:flex;align-items:center;gap:2px}
.navbtn svg{width:22px;height:22px}

/* 질문 하나 화면 */
.q{padding:10px 24px 0}
.q .date{font:500 15px/1.4 var(--font);color:var(--label2)}
.q h1{font:700 26px/1.35 var(--font);margin-top:6px;letter-spacing:-.02em}
.q p{font:400 15px/1.5 var(--font);color:var(--label2);margin-top:8px}
.amt{padding:30px 24px 0;display:flex;align-items:baseline;min-height:74px}
.amt .v{font:700 44px/1 var(--font);letter-spacing:-.025em}
.amt .v.empty{color:var(--label2)}
.amt .u{font:700 30px/1 var(--font);margin-left:4px}
.caret{width:2.5px;height:42px;background:var(--tint);margin-left:3px;align-self:center;border-radius:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){.caret{animation:none}}
.amt-help{padding:10px 24px 0;font:400 15px/1.5 var(--font);color:var(--label2)}
.warnline{margin:12px 24px 0;display:flex;gap:8px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--warn-bg);color:var(--warn);font:600 15px/1.45 var(--font)}
.warnline svg{width:18px;height:18px;flex:none;margin-top:2px}
.pills{display:flex;gap:8px;padding:22px 24px 0;flex-wrap:wrap}
.pill{min-height:44px;display:flex;align-items:center;gap:6px;padding:0 16px;border-radius:22px;background:var(--fill);border:0;font:600 15px/1 var(--font);color:var(--label)}
.pill svg{width:14px;height:14px;color:var(--label2)}
.keypad{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);padding:0 8px}
.k{height:60px;display:grid;place-items:center;font:500 28px/1 var(--font);color:var(--label);border:0;background:none;border-radius:14px}
.k:active{background:var(--fill)}
.k svg{width:28px;height:28px}
.cta{padding:8px 20px calc(12px + env(safe-area-inset-bottom));display:flex;gap:10px}
.btn{flex:1;min-height:56px;border:0;border-radius:16px;font:700 19px/1 var(--font);display:flex;align-items:center;justify-content:center;gap:6px}
.btn.p{background:var(--tint);color:var(--on-tint)}
.btn.s{background:var(--fill2);color:var(--label)}
.btn.narrow{flex:0 0 112px}
.btn:disabled{opacity:.4;cursor:default}
.btn:active:not(:disabled){filter:brightness(.92)}

/* 저장했어요 */
.done{padding:26px 24px 0}
.done .check{width:56px;height:56px;border-radius:28px;background:var(--tint);display:grid;place-items:center}
.done .check svg{width:30px;height:30px;color:#fff}
.done h1{font:700 26px/1.35 var(--font);margin-top:18px;letter-spacing:-.02em}
.done .date{font:500 15px/1.4 var(--font);color:var(--label2);margin-top:4px}
.result{padding:28px 24px 0}
.result .k2{font:500 15px/1.4 var(--font);color:var(--label2)}
.result .v{font:700 40px/1.1 var(--font);margin-top:6px;letter-spacing:-.025em}
.result .peak{font:500 15px/1.5 var(--font);color:var(--label2);margin-top:6px}
.box{margin:22px 20px 0;background:var(--fill);border-radius:16px;padding:6px 16px}
.box.tight{margin-top:12px}
.row{min-height:52px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--sep)}
.row:last-child{border-bottom:0}
.row .t{font:500 16px/1.35 var(--font)}
.row .s2{font:400 13px/1.4 var(--font);color:var(--label2);margin-top:2px}
.row .r{font:600 17px/1.2 var(--font);text-align:right}
.row.link{width:100%;border:0;background:none;text-align:left;cursor:pointer}
.row .chev{display:flex;align-items:center;gap:4px;color:var(--label2);font:400 15px/1 var(--font)}
.row .chev svg{width:14px;height:14px}
.prog{height:6px;border-radius:3px;background:var(--fill2);margin-top:8px;overflow:hidden;width:150px}
.prog i{display:block;height:100%;background:var(--label);border-radius:3px}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:var(--warn-bg);color:var(--warn);font:700 12px/1 var(--font);margin-left:6px;vertical-align:2px;white-space:nowrap}
.detail{margin:8px 20px 0;padding:6px 16px;border-radius:16px;background:var(--fill)}
.detail .row{min-height:44px}
.note{font:400 13px/1.5 var(--font);color:var(--label2);padding:8px 24px 0}

/* 오늘(그룹 바탕) */
.large{padding:14px 20px 0}
.large h1{font:700 34px/1.2 var(--font);letter-spacing:-.02em}
.large .sub{font:500 15px/1.4 var(--font);color:var(--label2);margin-top:4px}
.card{margin:16px 16px 0;background:var(--card);border-radius:18px;padding:18px}
.card .hd{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card .hd .t{font:600 15px/1.3 var(--font);color:var(--label2)}
.card .big{font:700 32px/1.15 var(--font);margin-top:8px;letter-spacing:-.02em}
.card .two{display:flex;gap:28px;margin-top:12px}
.card .two div{font:400 15px/1.4 var(--font);color:var(--label2)}
.card .two b{display:block;font:600 17px/1.3 var(--font);color:var(--label);margin-top:2px}
.card .meter{height:8px;border-radius:4px;background:var(--fill);margin-top:12px;overflow:hidden}
.card .meter i{display:block;height:100%;background:var(--label);border-radius:4px}
.card .foot{font:400 15px/1.4 var(--font);color:var(--label2);margin-top:10px}
.card .empty-t{font:700 20px/1.35 var(--font);margin-top:4px}
.card .btn{margin-top:14px;width:100%}
.card.backup{display:flex;align-items:center;gap:14px;padding:16px 8px 16px 18px;width:calc(100% - 32px);border:0;text-align:left;color:var(--label)}
.card.backup .ico{width:40px;height:40px;border-radius:12px;background:var(--tint-soft);display:grid;place-items:center;color:var(--tint);flex:none}
.card.backup.warn .ico{background:var(--warn-bg);color:var(--warn)}
.card.backup .ico svg{width:22px;height:22px}
.card.backup .t{font:600 16px/1.35 var(--font)}
.card.backup .s2{font:400 14px/1.4 var(--font);color:var(--label2);margin-top:2px}
.card.backup .go{margin-left:auto;color:var(--label2);width:44px;height:44px;display:grid;place-items:center;flex:none}
.card.backup .go svg{width:14px;height:14px}
.textlink{min-height:44px;padding:0 4px;border:0;background:none;font:600 15px/1 var(--font);color:var(--tint)}

/* 아래 탭 */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;height:calc(84px + env(safe-area-inset-bottom) - 34px + 34px);background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--sep);display:none;padding:7px 0 env(safe-area-inset-bottom)}
body.with-tabs .tabbar{display:grid;grid-template-columns:repeat(3,1fr)}
.tabbar-in{display:contents}
.tb{display:flex;flex-direction:column;align-items:center;gap:4px;font:500 12px/1 var(--font);color:var(--label2);min-height:49px;border:0;background:none;text-decoration:none}
.tb svg{width:26px;height:26px}
.tb[aria-current="page"]{color:var(--tint)}

/* 처음 설정 */
.progress{height:4px;margin:4px 24px 0;border-radius:2px;background:var(--fill);overflow:hidden}
.progress i{display:block;height:100%;background:var(--tint)}
.segc{margin:22px 24px 0;display:grid;grid-template-columns:1fr 1fr;background:var(--fill);border-radius:12px;padding:3px;min-height:44px}
.segc button{display:grid;place-items:center;border-radius:9px;font:600 15px/1 var(--font);color:var(--label2);border:0;background:none;min-height:38px}
.segc button[aria-checked="true"]{background:var(--card);color:var(--label);box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}
.field{margin:22px 24px 0;border:0;border-bottom:2px solid var(--fill2);padding:0 0 10px;display:flex;flex-direction:column;align-items:flex-start;width:calc(100% - 48px);background:none;text-align:left}
.field .line{display:flex;align-items:baseline}
.field.on{border-bottom-color:var(--tint)}
.field .lbl{display:block;font:600 14px/1.3 var(--font);color:var(--label2);margin-bottom:8px}
.field .v{font:700 32px/1 var(--font);letter-spacing:-.02em}
.field .v.empty{color:var(--label2)}
.field .u{font:700 24px/1 var(--font);margin-left:4px}
.fieldwrap{display:flex;flex-direction:column}
.field-help{padding:10px 24px 0;font:500 15px/1.5 var(--font);color:var(--label2)}
.field-help b{color:var(--label);font-weight:700}
.stepper{margin:22px 24px 0;display:flex;align-items:center;justify-content:space-between;background:var(--fill);border-radius:14px;padding:6px}
.stepper button{width:56px;height:48px;border:0;border-radius:10px;background:var(--card);font:600 24px/1 var(--font);color:var(--label)}
.stepper .v{font:700 24px/1 var(--font)}

/* 달력 */
.calnav{display:flex;justify-content:space-between;align-items:center;padding:4px 8px 0}
.calnav h1{font:700 22px/1 var(--font)}
.segc.three{grid-template-columns:repeat(3,1fr);margin:10px 16px 0}
.wk{display:grid;grid-template-columns:repeat(7,1fr);padding:16px 10px 6px;font:600 13px/1 var(--font);color:var(--label2);text-align:center}
.grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:6px;padding:0 10px}
.d{height:58px;display:flex;flex-direction:column;align-items:center;gap:5px;padding-top:4px;border:0;background:none;border-radius:12px;color:var(--label)}
.d:disabled{cursor:default}
.d .dn{width:30px;height:30px;border-radius:15px;display:grid;place-items:center;font:500 17px/1 var(--font)}
.d .dv{font:500 13px/1 var(--font)}
.d.off .dv{color:var(--label2)}
.d.future .dn{color:var(--label2)}
.d.today .dn{background:var(--tint);color:#fff;font-weight:700}
.unit{font:400 13px/1.4 var(--font);color:var(--label2);padding:8px 20px 0;text-align:right}
.sum{margin:12px 16px 0;background:var(--fill);border-radius:16px;padding:6px 16px}

/* 아래 시트 */
.sheet-wrap{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center}
.dimmer{position:absolute;inset:0;background:var(--dim);border:0}
.sheet{position:relative;width:100%;max-width:480px;background:var(--bg);border-radius:14px 14px 0 0;padding:8px 0 calc(16px + env(safe-area-inset-bottom));max-height:92dvh;overflow:auto}
.grab{width:36px;height:5px;border-radius:3px;background:var(--fill2);margin:0 auto 10px}
.sheet .sh{display:flex;justify-content:space-between;align-items:center;padding:4px 12px 4px 20px}
.sheet .sh h2{font:700 20px/1.3 var(--font)}
.sheet .cta{padding:16px 20px 0}
.danger{min-height:44px;margin:8px auto 0;display:block;border:0;background:none;font:600 16px/1 var(--font);color:var(--red);padding:0 12px}
.inp{width:100%;min-height:52px;border:0;background:transparent;font:600 17px/1.2 var(--font);text-align:right;color:var(--label)}
.inp:focus{outline:none}
.row:focus-within{box-shadow:inset 0 -2px 0 var(--tint)}
.toggle{display:flex;align-items:center;gap:10px}
.toggle input{width:22px;height:22px;accent-color:var(--tint)}

/* 설정 목록(iOS 그룹) */
.gtitle{padding:22px 32px 7px;font:400 13px/1.3 var(--font);color:var(--label2)}
.glist{margin:0 16px;background:var(--card);border-radius:12px;overflow:hidden}
.gi{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px 0 16px;position:relative;width:100%;border:0;background:none;text-align:left;color:var(--label);text-decoration:none}
.gi + .gi::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--sep)}
.gi .t{font:400 17px/1.3 var(--font);flex:1;min-width:0}
.gi .t small{display:block;font:400 13px/1.4 var(--font);color:var(--label2);margin-top:2px}
.gi .val{display:flex;align-items:center;gap:6px;font:400 17px/1.2 var(--font);color:var(--label2);text-align:right}
.gi .val svg{width:14px;height:14px;flex:none}
.gi select,.gi input{font:400 17px/1.2 var(--font);color:var(--label2);background:transparent;border:0;text-align:right;min-height:44px;max-width:60%}
.gi input{color:var(--label)}
.gi input.n{width:6.5em;flex:none}
.gfoot{padding:7px 32px 0;font:400 13px/1.45 var(--font);color:var(--label2)}
.badge{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;background:var(--fill2);color:var(--label2);font:600 12px/1 var(--font);margin-left:6px;vertical-align:2px}
.switch{width:51px;height:31px;border-radius:16px;background:var(--fill2);position:relative;flex:none}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:14px;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.18)}
.save-area{padding:20px 16px calc(24px + env(safe-area-inset-bottom))}

/* 백업 */
.hero{padding:22px 24px 0;text-align:center}
.hero .big-ico{width:72px;height:72px;border-radius:22px;background:var(--tint-soft);color:var(--tint);display:grid;place-items:center;margin:0 auto}
.hero .big-ico svg{width:38px;height:38px}
.hero h1{font:700 24px/1.35 var(--font);margin-top:18px;letter-spacing:-.02em}
.hero p{font:400 15px/1.5 var(--font);color:var(--label2);margin-top:8px}
.stack{display:grid;gap:10px;padding:18px 16px 0}

/* 실적으로 적기: 플랫폼 고르기와 합계 줄 */
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:18px 24px 0}
.chip{flex:none;min-height:44px;display:flex;align-items:center;gap:6px;padding:0 16px;border-radius:22px;border:1.5px solid var(--fill2);background:var(--bg);font:600 15px/1 var(--font);color:var(--label)}
.chip .n{font-weight:500;color:var(--label2)}
.chip.on{background:var(--label);border-color:var(--label);color:var(--bg)}
.chip.on .n{color:var(--bg);opacity:.85}
.chips + .amt{padding-top:18px}
.totalline{padding:8px 24px 0;font:500 15px/1.4 var(--font);color:var(--label2)}
.totalline b{color:var(--label);font-weight:700}
.switch.on{background:var(--tint)}
.switch.on::after{left:22px}

/* 입금 확인 */
.dep{padding:14px 16px 16px;position:relative}
.dep + .dep::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--sep)}
.dep .t{font:600 17px/1.3 var(--font)}
.dep .t small{display:block;font:400 13px/1.4 var(--font);color:var(--label2);margin-top:3px}
.dep .acts{display:flex;gap:8px;margin-top:12px}
.dep .btn{min-height:44px;font-size:16px;border-radius:12px}

/* 알림 한 줄 */
.toast{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;max-width:calc(100% - 32px);background:var(--label);color:var(--bg);font:600 15px/1.4 var(--font);padding:12px 18px;border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.18)}