/* ===== MEDIT 브랜드 팔레트 (www.medit.com 기준) ===== */
  :root, html[data-theme="light"]{
    color-scheme: light;
    --brand:#587B32;           /* 브랜드 그린 (채도 완화) */
    --medit-blue:#5B783B;      /* Primary — 강조 텍스트 (흰배경 5.0:1) */
    --medit-sky:#617F45;       /* Accent */
    --medit-deep:#435F25;      /* Secondary */
    --bg:#F5F5F7;              /* Surface */
    --card:#FFFFFF;
    --line:#E4E6EB;
    --line-soft:#F0F1F4;
    --txt:#1B1B1E;
    --muted:#595A5D;
    --faint:#6B7178;           /* WCAG AA(4.5:1) 확보 */
    --accent:var(--medit-blue);
    --btn-bg:#5B783B;      /* 채움 버튼 배경 (흰글씨 5.0:1) */
    --on-accent:#FFFFFF;   /* 채움 버튼 글자색 */
    --accent-soft:#F5F9F1;
    --accent-line:#D7E3C9;
    --hover:#F5F5F7;
    --row-hover:#F7FAFF;
    --th-bg:#FAFAFB;
    --good:#1B7E59; --good-bg:#F0FAF5; --good-line:#C6EBD9; --good-fg:#0B6E48;
    --bad:#D12E23;  --bad-bg:#FDF1F0;  --bad-line:#F5C9C6;  --bad-fg:#A81E15;
    --warn:#E09B00; --warn-bg:#FFF8EC; --warn-line:#FAE3B5; --warn-fg:#8A5A00;
    --info-fg:#00379E;
    /* 지출 성격 태그 (릴리스 연계) */
    --d1:#5B783B; --d2:#2F7A72; --d3:#7C5C93; --d4:#8A5A00; --d5:#A85267;
    --chart-grid:#EDEEF1; --chart-axis:#595A5D; --chart-line2:#A5822F;
    --tip-bg:#1B1B1E;     --tip-fg:#FFFFFF;
    --shadow:0 1px 2px rgba(16,24,40,.04);
    --shadow-lg:0 10px 36px rgba(88,123,50,.10);
    --radius:12px;
  }
  /* ===== 다크 테마 — 어두운 배경에서 대비를 확보하려고 블루를 한 단계 밝게 씁니다 ===== */
  html[data-theme="dark"]{
    color-scheme: dark;
    --brand:#587B32;
    --medit-blue:#7BA451;      /* 카드 위 6.0:1 (채도 완화) */
    --medit-sky:#719B46;
    --medit-deep:#86AE5B;
    --bg:#0E1013;
    --card:#171A1F;
    --line:#282D35;
    --line-soft:#20242B;
    --txt:#E8EAED;
    --muted:#ADB4BE;      /* 보조 텍스트 — WCAG AA(4.5:1) 확보를 위해 밝힘 */
    --faint:#8E959F;
    --btn-bg:#5B783B;      /* 흰 글씨 대비 5.0:1 */
    --on-accent:#FFFFFF;
    --accent-soft:#1B2214;
    --accent-line:#3E4B30;
    --hover:#1E222A;
    --row-hover:#1B2029;
    --th-bg:#1C2027;
    --good:#3DD68C; --good-bg:#12251C; --good-line:#1F4A36; --good-fg:#6EE7AE;
    --bad:#FF6B60;  --bad-bg:#2A1614;  --bad-line:#5A2822;  --bad-fg:#FF9C94;
    --warn:#E8A93B; --warn-bg:#2A2113; --warn-line:#54401C; --warn-fg:#F0C476;
    --info-fg:#A8C6FF;
    --chart-grid:#252A32; --chart-axis:#9BA1AA; --chart-line2:#D6AC55;
    --d1:#8FB463; --d2:#58A79C; --d3:#B392C8; --d4:#D6AC55; --d5:#DC8397;
    --tip-bg:#E8EAED;     --tip-fg:#12141A;
    --shadow:0 1px 2px rgba(0,0,0,.3);
    --shadow-lg:0 10px 36px rgba(0,0,0,.45);
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--bg);color:var(--txt);
       font-family:"Roboto","Noto Sans KR","Malgun Gothic","맑은 고딕",-apple-system,"Segoe UI",sans-serif;
       font-size:14px;-webkit-font-smoothing:antialiased;
       padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  button,input,select,textarea{touch-action:manipulation}
  .mark{width:26px;height:20px;flex:none;color:var(--medit-blue)}
  #headerIcon{width:27px;height:27px;flex:none}
  header{background:var(--card);border-bottom:1px solid var(--line);padding:14px 28px;
         display:flex;align-items:center;gap:13px;flex-wrap:wrap;position:sticky;top:0;z-index:20}
  header h1{font-size:16px;margin:0;font-weight:700;letter-spacing:-.2px;
            padding-left:13px;border-left:1px solid var(--line);line-height:1.2}
  .badge{font-size:11px;padding:3px 9px;border-radius:3px;border:1px solid var(--line);
         color:var(--muted);font-weight:500;letter-spacing:.2px}
  .badge.on{color:var(--medit-blue);border-color:var(--accent-line);background:var(--accent-soft)}
  .badge.off{color:var(--bad);border-color:var(--bad-line);background:var(--bad-bg)}
  nav{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap}
  #rightBox{display:flex;align-items:center;gap:10px;flex:none;
            padding-left:14px;margin-left:4px;border-left:1px solid var(--line)}
  #userBox{display:none;align-items:center;gap:9px;min-width:0}
  #userAvatar{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);
              color:var(--medit-blue);font-size:11px;font-weight:700;display:flex;
              align-items:center;justify-content:center;flex:none}
  nav button{background:none;border:none;padding:8px 15px;border-radius:6px;
             cursor:pointer;font-size:13px;color:var(--muted);font-weight:500;font-family:inherit;
             position:relative;letter-spacing:-.1px}
  nav button:hover{color:var(--txt);background:var(--hover)}
  nav button.active{color:var(--medit-blue);font-weight:700;background:var(--accent-soft)}
  main{padding:24px 28px 64px;max-width:1440px;margin:0 auto}
  .view{display:none} .view.active{display:block}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
        padding:20px 22px;margin-bottom:16px}
  .card h2{font-size:13px;margin:0 0 16px;font-weight:700;letter-spacing:.1px;
           text-transform:uppercase;color:var(--txt)}
  .card h2 small{font-weight:400;color:var(--muted);margin-left:8px;text-transform:none;letter-spacing:0}
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:14px;margin-bottom:18px}
  .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
        padding:17px 19px;position:relative;overflow:hidden}
  .kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--medit-blue)}
  .kpi .l{font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.5px;text-transform:uppercase}
  .kpi .v{font-size:22px;font-weight:900;margin-top:7px;letter-spacing:-.8px;color:var(--txt)}
  .kpi .d{font-size:11.5px;margin-top:5px;color:var(--muted);display:block;line-height:1.5}
  .kpi .d.up{color:var(--bad);font-weight:500} .kpi .d.down{color:var(--good);font-weight:500}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .grid2 > *{min-width:0}
  .chartbox{min-width:0}
  canvas{max-width:100%}
  .card{min-width:0}
  .kpi{min-width:0}
  @media(max-width:900px){.grid2{grid-template-columns:1fr}}
  .chartbox{position:relative;height:310px}
  .chartbox.sm{height:265px}
  table{width:100%;border-collapse:collapse;font-size:13px}
  th,td{padding:9px 11px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
  th{background:var(--th-bg);font-weight:500;font-size:11px;color:var(--muted);position:sticky;top:0;
     white-space:nowrap;text-transform:uppercase;letter-spacing:.4px}
  td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  td.nw{white-space:nowrap}
  td.note{white-space:normal;min-width:260px;max-width:620px;line-height:1.6;color:var(--muted);font-size:12.5px}
  tbody tr:hover{background:var(--row-hover)}
  tfoot td{font-weight:900;background:var(--th-bg);border-top:2px solid var(--medit-blue);white-space:nowrap}
  .scroll{max-height:560px;overflow:auto;border:1px solid var(--line);border-radius:8px}
  label{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-bottom:6px;
        text-transform:uppercase;letter-spacing:.4px}
  input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:6px;
        font-size:13px;font-family:inherit;background:var(--card);color:var(--txt)}
  textarea{line-height:1.6;resize:vertical}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--medit-blue);
        box-shadow:0 0 0 3px rgba(0,79,236,.12)}
  .form{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:13px}
  .form .full{grid-column:1/-1}
  .btn{background:var(--btn-bg);color:var(--on-accent);border:none;padding:10px 20px;border-radius:6px;
       font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:-.1px;
       transition:background .15s}
  .btn:hover{filter:brightness(1.1)}
  .btn.ghost{background:var(--card);color:var(--txt);border:1px solid var(--line);font-weight:500}
  .btn.ghost:hover{background:var(--hover);border-color:var(--muted)}
  .btn.sm{padding:6px 11px;font-size:12px;font-weight:500}
  .btn.danger{background:var(--bad)} .btn.danger:hover{background:#B5261C}
  .btn:disabled{opacity:.45;cursor:not-allowed}
  .row{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap}
  .msg{padding:11px 14px;border-radius:6px;font-size:13px;margin-bottom:13px;display:none;line-height:1.6;
       border-left:3px solid transparent}
  .msg.ok{display:block;background:var(--good-bg);color:var(--good-fg);border:1px solid var(--good-line);border-left-color:var(--good)}
  .msg.err{display:block;background:var(--bad-bg);color:var(--bad-fg);border:1px solid var(--bad-line);border-left-color:var(--bad)}
  .msg.info{display:block;background:var(--accent-soft);color:var(--info-fg);border:1px solid var(--accent-line);border-left-color:var(--medit-blue)}
  .msg.warn{display:block;background:var(--warn-bg);color:var(--warn-fg);border:1px solid var(--warn-line);border-left-color:var(--warn)}
  .lock{max-width:380px;margin:56px auto;text-align:center;border-top:3px solid var(--medit-blue)}
  .hint{font-size:12px;color:var(--muted);line-height:1.7}
  code{background:var(--accent-soft);color:var(--medit-deep);padding:2px 6px;border-radius:3px;
       font-size:12px;font-family:"Roboto Mono",Consolas,monospace}
  pre{background:var(--th-bg);border:1px solid var(--line);border-radius:6px;padding:13px;
      overflow:auto;font-size:12px;line-height:1.65;white-space:pre-wrap;
      border-left:3px solid var(--medit-sky);font-family:"Roboto Mono",Consolas,monospace}
  footer{max-width:1440px;margin:0 auto;padding:0 28px 40px;display:flex;align-items:center;gap:10px;
         color:var(--faint);font-size:11px;letter-spacing:.3px}
  footer .mark{width:16px;height:13px;color:var(--faint);opacity:.6}
  .filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px}
  .chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
  .chip{border:1px solid var(--line);background:var(--card);border-radius:5px;padding:6px 14px;
        font-size:12px;cursor:pointer;font-weight:500;color:var(--muted);font-family:inherit}
  .chip:hover{border-color:var(--muted);color:var(--txt)}
  .chip.active{background:var(--btn-bg);color:var(--on-accent);border-color:var(--btn-bg);font-weight:700}
  details{border:1px solid var(--line);border-radius:8px;padding:12px 15px;margin-top:16px;background:var(--th-bg)}
  details summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--medit-deep)}
  details[open] summary{margin-bottom:13px}
  .amtBig{font-size:19px;font-weight:800;letter-spacing:-.4px}
  .hidecol{display:none}
  input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--txt);
    -webkit-box-shadow:0 0 0 100px var(--card) inset;
    caret-color:var(--txt);
    transition:background-color 9999s ease-out 0s}
  ::placeholder{color:var(--faint);opacity:1}
  ::selection{background:var(--btn-bg);color:var(--on-accent)}
  input[type=date],input[type=month]{color-scheme:inherit}
  input[type=checkbox]{accent-color:var(--medit-blue)}
  .scroll{scrollbar-color:var(--line) transparent}
  a{color:var(--medit-blue)}
  #userName{font-size:12.5px;font-weight:700;display:block;line-height:1.3}
  #userTitle{font-size:10.5px;color:var(--muted);display:block;line-height:1.3}

  /* ===== 로그인 화면 (레퍼런스 스타일) ===== */
  #gateCard{background:var(--card);border:1px solid var(--line);border-radius:20px;
            padding:42px 30px 34px;box-shadow:var(--shadow-lg);
            border-top:5px solid var(--btn-bg)}
  #gateIcon{width:62px;height:62px;display:block;margin:0 auto 20px}
  #gateTitle{font-size:25px;line-height:1.25;margin:0 0 9px;font-weight:800;
             letter-spacing:-.6px;text-align:center;color:var(--txt)}
  #gateSub{margin:0 0 30px;font-size:11.5px;color:var(--muted);letter-spacing:2.2px;
           text-transform:uppercase;font-weight:500;text-align:center}
  #gate label{font-size:11.5px;letter-spacing:1.1px}
  #gate input[type=email],#gate input[type=password]{
    padding:14px 16px;border-radius:12px;font-size:16px;background:var(--th-bg)}
  #gateRememberRow{display:flex;align-items:center;gap:9px;margin:18px 0 0;
    font-weight:400;color:var(--muted);font-size:13px;cursor:pointer;
    text-transform:none;letter-spacing:0}
  #gateRememberRow input{width:auto;margin:0}
  #gateBtn{width:100%;margin-top:20px;padding:15px;font-size:15px;border-radius:12px}
  #gateFoot{text-align:center;font-size:12px;color:var(--faint);margin:18px 0 0;line-height:1.7}
  @media (max-width:420px){
    #gateCard{padding:36px 22px 28px;border-radius:18px}
    #gateTitle{font-size:22px} #gateIcon{width:56px;height:56px;margin-bottom:16px}
  }

  /* 테마 전환 */
  .iconbtn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);
           background:var(--card);color:var(--muted);cursor:pointer;display:flex;
           align-items:center;justify-content:center;flex:none;padding:0;font-family:inherit}
  .iconbtn:hover{background:var(--hover);color:var(--txt)}
  .iconbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
               stroke-linecap:round;stroke-linejoin:round}
  html[data-theme="dark"] .ico-sun{display:none}
  html[data-theme="light"] .ico-moon{display:none}
  .seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
  .seg button{border:none;background:none;padding:9px 16px;font-size:12.5px;font-weight:500;
              color:var(--muted);cursor:pointer;font-family:inherit;min-height:40px}
  .seg button + button{border-left:1px solid var(--line)}
  .seg button.active{background:var(--btn-bg);color:var(--on-accent);font-weight:700}

  /* =================================================================
     아이패드 (≤1024px)
     ================================================================= */
  @media (max-width:1024px){
    main{padding:18px 18px 56px}
    footer{padding:0 18px 32px}
    header{padding:12px 18px}
    .chartbox{height:280px} .chartbox.sm{height:250px}
    .kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:11px}
    .kpi .v{font-size:20px}
  }

  /* =================================================================
     아이폰 · 좁은 화면 (≤780px)
     ================================================================= */
  @media (max-width:780px){
    header{padding:10px 14px;gap:9px;
           padding-top:calc(10px + env(safe-area-inset-top))}
    header h1{font-size:14.5px;padding-left:10px;flex:1;min-width:0;
              overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .mark{width:23px;height:18px}
    #headerIcon{width:24px;height:24px}
    #connBadge,#cntBadge{display:none}          /* 대시보드에 같은 정보가 있어 생략 */
    #userTitle{display:none !important}         /* 권한은 [설정] 탭에서 확인 */
    #userName{font-size:12px;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    #rightBox{margin-left:auto;padding-left:10px;gap:8px}
    #userAvatar{width:24px;height:24px;font-size:10.5px}
    #btnLogout{padding:7px 10px;font-size:11.5px;min-height:34px}
    #themeBtn{width:34px;height:34px}

    nav{order:10;width:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap;
        gap:3px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
        border-top:1px solid var(--line-soft);padding-top:8px;margin-top:2px}
    nav::-webkit-scrollbar{display:none}
    nav button{white-space:nowrap;padding:9px 14px;min-height:40px;font-size:13px}

    main{padding:14px 14px 48px}
    footer{padding:0 14px calc(28px + env(safe-area-inset-bottom));
           font-size:10.5px;line-height:1.5}
    .card{padding:15px 15px;border-radius:10px;margin-bottom:12px}
    .card h2{font-size:12px;margin-bottom:13px}
    .card h2 small{display:block;margin:5px 0 0 0;font-size:11.5px}

    .kpis{grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
    .kpi{padding:13px 13px 13px 15px}
    .kpi .l{font-size:10px;letter-spacing:.3px}
    .kpi .v{font-size:17px;letter-spacing:-.5px;margin-top:5px}
    .kpi .d{font-size:10.5px}
    .kpi:first-child{grid-column:1/-1}          /* 올해 누적은 한 줄 전체 */
    .kpi:first-child .v{font-size:23px}

    .grid2{grid-template-columns:1fr;gap:12px}
    .chartbox{height:250px} .chartbox.sm{height:230px}

    /* 입력칸 16px — iOS가 자동 확대하지 않도록 (필수) */
    input,select,textarea{font-size:16px;padding:11px 12px;border-radius:8px}
    label{font-size:10.5px}
    .form{grid-template-columns:1fr;gap:12px}
    .filters{grid-template-columns:1fr 1fr;gap:9px}
    .filters > div:last-child{grid-column:1/-1}

    .btn{padding:12px 18px;min-height:44px;border-radius:8px}   /* 터치 타겟 */
    .btn.sm{padding:8px 11px;min-height:34px;font-size:12px}
    .row{gap:8px}
    .row .btn{flex:1 1 auto}

    .chips{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;
           padding-bottom:2px}
    .chips::-webkit-scrollbar{display:none}
    .chip{white-space:nowrap;padding:8px 14px;min-height:36px;display:flex;align-items:center}

    .scroll{max-height:none;-webkit-overflow-scrolling:touch;border-radius:8px}
    th,td{padding:9px 9px;font-size:12.5px}
    th{font-size:10px;letter-spacing:.2px}
    td.note{min-width:200px;max-width:none;font-size:11.5px;line-height:1.55}
    /* 첫 열(연월)을 고정해 가로 스크롤 시에도 기준이 보이게 */
    #rowsTbl th:first-child,#rowsTbl td:first-child,
    #pivotTbl th:first-child,#pivotTbl td:first-child{
      position:sticky;left:0;background:var(--card);z-index:2;
      box-shadow:1px 0 0 var(--line)}
    #rowsTbl th:first-child,#pivotTbl th:first-child{background:var(--th-bg);z-index:3}
    #pivotTbl tfoot td:first-child,#rowsTbl tfoot td:first-child{background:var(--th-bg)}

    pre{font-size:11px;padding:11px}
    details{padding:11px 13px}
    .lock{margin:32px auto}
    .seg{width:100%} .seg button{flex:1}
  }

  @media (max-width:420px){
    #userName{display:none}                     /* 아바타만 — 제목 잘림 방지 */
    #rightBox{padding-left:8px;gap:6px}
    header h1{border-left:none;padding-left:4px}
    .kpis{grid-template-columns:1fr}
    .kpi:first-child .v{font-size:22px}
    header h1{font-size:13.5px}
    .filters{grid-template-columns:1fr}
  }

  /* 인쇄 — 보고 자료로 뽑을 때 */
  @media print{
    html{--bg:#fff;--card:#fff;--txt:#111;--muted:#555;--line:#ccc;--th-bg:#fafafa;color-scheme:light}
    header nav,#userBox,#themeBtn,footer,.chips,.btn{display:none !important}
    body{background:#fff;color:#111}
    .card{break-inside:avoid;border-color:#ccc}
    .scroll{max-height:none;overflow:visible}
  }

/* ===== 네비게이션: 관리자 그룹(우측, 구분선 + 관리자 배지) ===== */
.nav-admin{display:inline-flex;align-items:center;gap:2px;margin-left:auto;
  padding-left:10px;border-left:1px solid var(--line)}
.nav-adminlabel{font-size:10px;font-weight:700;color:#fff;background:#E8892B;
  border-radius:999px;padding:2px 8px;margin-right:4px;letter-spacing:.4px;white-space:nowrap}
@media(max-width:820px){
  .nav-admin{margin-left:8px;padding-left:8px}
}
/* ===== 로그인 · 재설정 전용 페이지 ===== */
body.loginpage{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
body.loginpage .wrap{max-width:420px;width:100%}
#gate.static{position:static;display:block;background:transparent;padding:0;inset:auto}
.btn.sm{padding:6px 11px;font-size:12px;min-height:32px}

/* 삭제(위험) 버튼: 흰 글씨가 4.5:1 이상 되도록 전용 색을 씁니다.
   (--bad 는 증가 텍스트용이라 밝아서 흰 글씨 대비가 부족했습니다) */
:root, html[data-theme="light"]{ --danger-btn:#C62A20; }
html[data-theme="dark"]{ --danger-btn:#B5261C; }
.btn.danger{ background:var(--danger-btn); color:#FFFFFF; }
.btn.danger:hover{ background:var(--danger-btn); filter:brightness(1.08); }