/* =====================================================================
   정파사 가계부 — Toss tone
   모바일 우선(360~480). 데스크톱은 컨테이너만 넓히고 구조는 그대로.
   ===================================================================== */
:root{
  --color-primary-50:#E8F2FF; --color-primary-100:#C2DCFF; --color-primary-200:#85B9FF;
  --color-primary-300:#4795FF; --color-primary-400:#1F7CFF; --color-primary-500:#0064FF;
  --color-primary-600:#0050D9; --color-primary-700:#003EA8;

  --color-neutral-0:#FFFFFF; --color-neutral-50:#F9FAFB; --color-neutral-100:#F2F4F6;
  --color-neutral-200:#E5E8EB; --color-neutral-300:#D1D6DB; --color-neutral-500:#B0B8C1;
  --color-neutral-700:#8B95A1; --color-neutral-800:#4E5968; --color-neutral-900:#191F28;

  --color-success-bg:#E8F8EE; --color-success-fg:#00A85A;
  --color-warning-bg:#FFF4D6; --color-warning-fg:#FF9500;
  --color-error-bg:#FFE8E8;   --color-error-fg:#FF4040;
  --color-info-bg:#E8F2FF;    --color-info-fg:#0064FF;
  --color-purple-bg:#F1ECFF;  --color-purple-fg:#7048E8;

  --bg-base:#FFFFFF; --bg-subtle:#F2F4F6; --bg-page:#F9FAFB; --bg-overlay:rgba(25,31,40,.5);
  --text-primary:#191F28; --text-secondary:#4E5968; --text-tertiary:#8B95A1;
  --text-on-primary:#FFFFFF; --text-disabled:#B0B8C1;
  --border-default:#E5E8EB; --border-subtle:#F2F4F6; --border-strong:#D1D6DB;

  --radius-sm:8px; --radius-md:12px; --radius-lg:14px; --radius-xl:20px; --radius-full:9999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04); --shadow-md:0 4px 12px rgba(0,0,0,.06);
  --shadow-lg:0 8px 24px rgba(0,0,0,.10); --shadow-fab:0 8px 20px rgba(0,100,255,.30);

  --nav-h:60px;
  --font:Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg-page);color:var(--text-primary);
  font-family:var(--font);font-size:15px;font-weight:500;line-height:1.5;
  letter-spacing:-.012em;color-scheme:light;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font-family:inherit;letter-spacing:inherit;}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;}
.num{font-variant-numeric:tabular-nums;}

/* ------------------------------------------------------------- layout */
.wrap{max-width:480px;margin:0 auto;padding:0 20px;}
@media (min-width:820px){ .wrap{max-width:760px;} }

.appbar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bg-page) 86%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
}
.appbar.scrolled{border-bottom-color:var(--border-subtle);}
.appbar-in{max-width:480px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:10px;}
@media (min-width:820px){ .appbar-in{max-width:760px;} }
.appbar h1{font-size:20px;font-weight:800;flex:1;}
.appbar .sub{font-size:12px;font-weight:600;color:var(--text-tertiary);}

.section{margin:24px 0;}
.section-head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;}
.section-head h2{font-size:17px;font-weight:700;}
.section-head .more{margin-left:auto;font-size:13px;font-weight:600;color:var(--text-tertiary);}

/* -------------------------------------------------------------- cards */
.card{background:var(--bg-base);border:1px solid var(--border-subtle);
      border-radius:var(--radius-lg);padding:16px;}
.card + .card{margin-top:10px;}
.card-flat{background:var(--bg-subtle);border-color:transparent;}
.card-primary{background:var(--color-primary-500);color:#fff;border-color:transparent;}
.card-primary .label{color:rgba(255,255,255,.72);}

.hero{padding:20px;border-radius:var(--radius-xl);}
.hero .label{font-size:13px;font-weight:600;color:var(--text-tertiary);}
.hero .amount{font-size:32px;font-weight:800;letter-spacing:-.025em;margin-top:4px;}
.hero .delta{font-size:13px;font-weight:600;margin-top:6px;color:var(--text-secondary);}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.stat{background:var(--bg-base);border:1px solid var(--border-subtle);
      border-radius:var(--radius-md);padding:14px;}
.stat .label{font-size:12px;font-weight:600;color:var(--text-tertiary);}
.stat .value{font-size:19px;font-weight:800;margin-top:3px;letter-spacing:-.02em;}
.stat .value.sm{font-size:16px;}

/* ------------------------------------------------------------- amount */
.amt-in{color:var(--color-primary-500);}
.amt-out{color:var(--color-error-fg);}
.amt-neutral{color:var(--text-secondary);}
.amt-plus::before{content:'+';}
.amt-minus::before{content:'−';}

/* --------------------------------------------------------------- list */
.list{background:var(--bg-base);border:1px solid var(--border-subtle);
      border-radius:var(--radius-lg);overflow:hidden;}
.row{display:flex;align-items:center;gap:12px;padding:14px 16px;width:100%;
     background:none;border:0;text-align:left;cursor:pointer;color:inherit;font:inherit;}
.row + .row{border-top:1px solid var(--border-subtle);}
.row:active{background:var(--bg-subtle);}
.row .ico{width:38px;height:38px;flex:none;border-radius:var(--radius-md);
          display:grid;place-items:center;font-size:16px;background:var(--bg-subtle);}
.row .body{flex:1;min-width:0;}
.row .t1{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row .t2{font-size:12px;font-weight:500;color:var(--text-tertiary);margin-top:2px;
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row .right{text-align:right;flex:none;}
.row .r1{font-size:15px;font-weight:700;}
.row .r2{font-size:11px;font-weight:600;color:var(--text-tertiary);margin-top:2px;}

.daygroup{margin-top:16px;}
.daygroup .dayhead{display:flex;align-items:baseline;gap:8px;padding:0 4px 8px;}
.daygroup .dayhead .d{font-size:13px;font-weight:700;color:var(--text-secondary);}
.daygroup .dayhead .s{margin-left:auto;font-size:12px;font-weight:600;color:var(--text-tertiary);}

/* --------------------------------------------------------------- tags */
.tag{padding:2px 8px;border-radius:var(--radius-full);font-size:11px;font-weight:700;
     line-height:18px;display:inline-flex;align-items:center;gap:3px;}
.tag-real{background:var(--color-success-bg);color:var(--color-success-fg);}
.tag-circular{background:var(--color-warning-bg);color:var(--color-warning-fg);}
.tag-nominal{background:var(--color-error-bg);color:var(--color-error-fg);}
.tag-doubt{background:var(--bg-subtle);color:var(--text-secondary);}
.tag-info{background:var(--color-info-bg);color:var(--color-info-fg);}
.tag-purple{background:var(--color-purple-bg);color:var(--color-purple-fg);}
.tag-gray{background:var(--bg-subtle);color:var(--text-secondary);}

/* ------------------------------------------------------------ buttons */
.btn{font:700 15px/1 var(--font);letter-spacing:-.01em;border-radius:var(--radius-md);
     padding:14px 18px;border:0;display:inline-flex;align-items:center;justify-content:center;
     gap:6px;cursor:pointer;transition:background 100ms ease;}
.btn-primary{background:var(--color-primary-500);color:#fff;}
.btn-primary:active{background:var(--color-primary-700);}
.btn-primary:disabled{background:var(--color-neutral-100);color:var(--text-disabled);}
.btn-secondary{background:var(--bg-subtle);color:var(--text-primary);}
.btn-ghost{background:transparent;color:var(--color-primary-500);padding:10px 12px;}
.btn-danger{background:var(--color-error-bg);color:var(--color-error-fg);}
.btn-block{display:flex;width:100%;}
.btn-sm{padding:9px 14px;font-size:13px;border-radius:var(--radius-sm);}

.fab{position:fixed;right:max(20px,calc(50% - 240px + 20px));
     bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));
     width:56px;height:56px;border-radius:var(--radius-full);border:0;z-index:45;
     background:var(--color-primary-500);color:#fff;font-size:26px;font-weight:400;
     box-shadow:var(--shadow-fab);cursor:pointer;display:grid;place-items:center;line-height:1;}
@media (min-width:820px){ .fab{right:max(20px,calc(50% - 380px + 20px));} }
.fab:active{background:var(--color-primary-700);}

/* --------------------------------------------------------------- tabs */
.tabs{display:flex;gap:4px;background:var(--bg-subtle);padding:4px;
      border-radius:var(--radius-full);overflow-x:auto;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tabs button{border:0;background:transparent;color:var(--text-secondary);white-space:nowrap;
             font:700 13px/1 var(--font);padding:9px 14px;border-radius:var(--radius-full);cursor:pointer;}
.tabs button[aria-selected="true"]{background:var(--color-primary-500);color:#fff;}
.tabs.tabs-light button[aria-selected="true"]{background:var(--bg-base);color:var(--text-primary);
             box-shadow:var(--shadow-sm);}

/* ------------------------------------------------------------- inputs */
.field{margin-bottom:14px;}
.field > label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary);
               margin-bottom:6px;}
.input,select.input,textarea.input{
  width:100%;background:var(--bg-subtle);border:0;border-radius:var(--radius-md);
  padding:14px 16px;font-size:16px;font-weight:600;color:var(--text-primary);
  appearance:none;-webkit-appearance:none;}
.input:focus{outline:2px solid var(--color-primary-500);outline-offset:-2px;background:#fff;}
.input::placeholder{color:var(--text-disabled);font-weight:500;}
textarea.input{min-height:80px;resize:vertical;line-height:1.5;}
select.input{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%238B95A1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
             background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;}
.input-amount{font-size:24px;font-weight:800;text-align:right;letter-spacing:-.02em;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

.seg{display:grid;grid-auto-flow:column;gap:6px;background:var(--bg-subtle);
     padding:4px;border-radius:var(--radius-md);}
.seg button{border:0;background:transparent;color:var(--text-secondary);
            font:700 14px/1 var(--font);padding:11px 8px;border-radius:var(--radius-sm);cursor:pointer;}
.seg button[aria-selected="true"]{background:var(--bg-base);color:var(--text-primary);
            box-shadow:var(--shadow-sm);}
.seg button[aria-selected="true"][data-v="IN"]{color:var(--color-primary-500);}
.seg button[aria-selected="true"][data-v="OUT"]{color:var(--color-error-fg);}

.switch{display:flex;align-items:center;gap:10px;padding:12px 0;}
.switch .txt{flex:1;}
.switch .txt .t1{font-size:14px;font-weight:600;}
.switch .txt .t2{font-size:12px;color:var(--text-tertiary);margin-top:2px;}
.switch input{appearance:none;-webkit-appearance:none;width:48px;height:28px;flex:none;
              background:var(--color-neutral-300);border-radius:var(--radius-full);
              position:relative;cursor:pointer;transition:background 150ms;}
.switch input::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;
              border-radius:50%;background:#fff;transition:transform 150ms;box-shadow:var(--shadow-sm);}
.switch input:checked{background:var(--color-primary-500);}
.switch input:checked::after{transform:translateX(20px);}

/* -------------------------------------------------------------- sheet */
.sheet-bg{position:fixed;inset:0;background:var(--bg-overlay);z-index:60;opacity:0;
          transition:opacity 250ms;pointer-events:none;}
.sheet-bg.on{opacity:1;pointer-events:auto;}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--bg-base);
       border-radius:var(--radius-xl) var(--radius-xl) 0 0;
       max-width:480px;margin:0 auto;max-height:92vh;overflow-y:auto;
       transform:translateY(100%);transition:transform 300ms cubic-bezier(.22,1,.36,1);
       padding:8px 20px calc(24px + env(safe-area-inset-bottom));}
@media (min-width:820px){ .sheet{max-width:520px;} }
.sheet.on{transform:translateY(0);}
.sheet .handle{width:40px;height:4px;border-radius:2px;background:var(--color-neutral-200);
               margin:8px auto 16px;}
.sheet h3{font-size:19px;font-weight:800;margin-bottom:16px;}
.sheet-actions{display:flex;gap:8px;margin-top:20px;}
.sheet-actions .btn{flex:1;}

/* --------------------------------------------------------- bottom nav */
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--bg-base);
           border-top:1px solid var(--border-subtle);
           padding-bottom:env(safe-area-inset-bottom);}
.bottomnav-in{max-width:480px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);}
@media (min-width:820px){ .bottomnav-in{max-width:760px;} }
.bottomnav a{padding:9px 4px 8px;text-align:center;font-size:11px;font-weight:600;
             color:var(--text-tertiary);display:block;}
.bottomnav a.active{color:var(--color-primary-500);}
.bottomnav .i{display:block;font-size:19px;line-height:1.3;margin-bottom:1px;}

/* --------------------------------------------------------------- misc */
.empty{text-align:center;padding:44px 20px;color:var(--text-tertiary);font-size:14px;font-weight:500;}
.empty .big{font-size:34px;display:block;margin-bottom:10px;opacity:.5;}
.note{background:var(--color-info-bg);color:var(--color-primary-700);border-radius:var(--radius-md);
      padding:12px 14px;font-size:13px;font-weight:600;line-height:1.5;}
.note-warn{background:var(--color-warning-bg);color:#8a5200;}
.note-err{background:var(--color-error-bg);color:#b81c1c;}
.divider{height:1px;background:var(--border-subtle);margin:16px 0;}
.spinner{width:22px;height:22px;border:2.5px solid var(--color-neutral-200);
         border-top-color:var(--color-primary-500);border-radius:50%;
         animation:spin .7s linear infinite;margin:28px auto;}
@keyframes spin{to{transform:rotate(360deg);}}

.bar{height:6px;border-radius:3px;background:var(--bg-subtle);overflow:hidden;}
.bar > i{display:block;height:100%;border-radius:3px;background:var(--color-primary-500);}
.bar.warn > i{background:var(--color-warning-fg);}
.bar.err > i{background:var(--color-error-fg);}

.chart{display:flex;align-items:flex-end;gap:5px;height:130px;padding:0 2px;}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:100%;}
.chart .b{border-radius:3px 3px 0 0;min-height:2px;background:var(--color-primary-500);}
.chart .b.out{background:var(--color-neutral-200);}
.chart .lb{font-size:10px;font-weight:600;color:var(--text-tertiary);text-align:center;margin-top:5px;}

.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 24px);transform:translate(-50%,20px);
       background:var(--color-neutral-900);color:#fff;padding:13px 20px;border-radius:var(--radius-md);
       font-size:14px;font-weight:600;z-index:90;opacity:0;transition:all 250ms;
       pointer-events:none;max-width:calc(100vw - 40px);text-align:center;}
.toast.on{opacity:1;transform:translate(-50%,0);}

/* ------------------------------------------------------------- login */
.login-wrap{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
            padding:40px 24px;max-width:420px;margin:0 auto;}
.login-wrap .mark{width:44px;height:44px;border-radius:58% 42% 62% 38%;
            background:var(--color-primary-500);transform:rotate(-24deg);
            box-shadow:inset -8px -8px 0 rgba(0,0,0,.10);margin-bottom:22px;}
.login-wrap h1{font-size:27px;font-weight:800;line-height:1.3;margin-bottom:6px;}
.login-wrap .desc{font-size:14px;color:var(--text-tertiary);margin-bottom:30px;font-weight:500;}
body.login{background:var(--bg-base);padding-bottom:0;}