:root{
    --bg:#f6f5f1;
    --surface:#ffffff;
    --surface-alt:#edeae1;
    --ink:#232420;
    --ink-muted:#6e6c62;
    --line:#e2ded2;
    --accent:#2f5d50;
    --accent-strong:#1f463b;
    --accent-soft:#dce8e1;
    --accent-ink:#17332b;
    --ok:#2e7d4f;
    --ok-soft:#dff0e4;
    --warn:#a86a1a;
    --warn-soft:#f6e9d3;
    --danger:#b23b2e;
    --danger-soft:#f5dfd9;
    --night:#4b43a8;
    --night-soft:#e9e7fb;
    --holiday:#b4472c;
    --holiday-soft:#fde9e4;
    --shadow:0 1px 2px rgba(35,36,32,0.06),0 8px 24px -12px rgba(35,36,32,0.18);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#1a1b17;
      --surface:#232420;
      --surface-alt:#2b2c25;
      --ink:#ece9e0;
      --ink-muted:#a19d8d;
      --line:#3a3b32;
      --accent:#74b499;
      --accent-strong:#95cbb2;
      --accent-soft:#243a32;
      --accent-ink:#cfe8dd;
      --ok:#6fbe8d;
      --ok-soft:#1f3a2a;
      --warn:#e0b25b;
      --warn-soft:#3e3020;
      --danger:#e38066;
      --danger-soft:#3e241e;
      --night:#b3adf2;
      --night-soft:#2c2a4a;
      --holiday:#f0a38c;
      --holiday-soft:#43271f;
      --shadow:0 1px 2px rgba(0,0,0,0.3),0 8px 24px -12px rgba(0,0,0,0.5);
    }
  }
  :root[data-theme="dark"]{
    --bg:#1a1b17;
    --surface:#232420;
    --surface-alt:#2b2c25;
    --ink:#ece9e0;
    --ink-muted:#a19d8d;
    --line:#3a3b32;
    --accent:#74b499;
    --accent-strong:#95cbb2;
    --accent-soft:#243a32;
    --accent-ink:#cfe8dd;
    --ok:#6fbe8d;
    --ok-soft:#1f3a2a;
    --warn:#e0b25b;
    --warn-soft:#3e3020;
    --danger:#e38066;
    --danger-soft:#3e241e;
    --night:#b3adf2;
    --night-soft:#2c2a4a;
    --holiday:#f0a38c;
    --holiday-soft:#43271f;
    --shadow:0 1px 2px rgba(0,0,0,0.3),0 8px 24px -12px rgba(0,0,0,0.5);
  }

  *{box-sizing:border-box;}
  html,body{margin:0; overflow-x:hidden;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:"Gothic A1",-apple-system,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
    -webkit-font-smoothing:antialiased;
    padding-inline:16px;
  }
  h1,h2,h3{font-family:"Gowun Batang","Noto Serif KR",serif; text-wrap:balance; margin:0;}
  .num{font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;}
  a{color:var(--accent-strong);}
  button{font-family:inherit;}
  :focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

  .app{display:none; max-width:1180px; margin:0 auto; padding-block:20px 48px;}
  .app.ready{display:block;}

  /* --- gate --- */
  .gate{
    min-height:80vh; display:flex; align-items:center; justify-content:center; padding-block:48px;
  }
  .gate-card{
    width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line);
    border-radius:14px; padding:32px 28px; box-shadow:var(--shadow);
  }
  .gate-card h1{font-size:1.5rem; margin-bottom:6px;}
  .gate-card p{color:var(--ink-muted); font-size:0.9rem; margin:0 0 20px;}
  .gate-card label{display:block; font-size:0.82rem; font-weight:700; margin-bottom:6px; color:var(--ink-muted);}
  .gate-card input[type="text"], .gate-card input[type="password"]{
    width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:8px;
    background:var(--bg); color:var(--ink); font-size:1rem; margin-bottom:16px;
  }
  .gate-card button{
    width:100%; padding:11px; border:none; border-radius:8px; background:var(--accent);
    color:#fff; font-size:0.98rem; font-weight:700; cursor:pointer;
  }
  .gate-card button:hover{background:var(--accent-strong);}
  .gate-card label.remember-line{
    display:flex; align-items:center; gap:8px; margin:-4px 0 16px; cursor:pointer;
    font-size:0.88rem; font-weight:700; color:var(--ink);
  }
  .gate-card label.remember-line input{width:18px; height:18px; margin:0; accent-color:var(--accent);}
  .remember-hint{font-size:0.76rem; color:var(--ink-muted); margin:-10px 0 16px 26px; line-height:1.5;}
  .gate-note{font-size:0.78rem; color:var(--ink-muted); margin-top:14px; line-height:1.5;}

  /* --- shell --- */
  .shell{display:grid; grid-template-columns:220px 1fr; gap:28px; min-width:0;}
  @media (max-width:820px){ .shell{grid-template-columns:1fr;} }

  .rail{display:flex; flex-direction:column; gap:18px; min-width:0;}
  .rail-sticky{display:flex; flex-direction:column; gap:18px;}
  @media (max-width:820px){
    .rail{padding-top:var(--sticky-h,0px);}
    .rail-sticky{
      position:fixed; top:0; left:0; right:0; z-index:50;
      background:var(--bg); border-bottom:1px solid var(--line);
      padding:10px 16px 12px; margin:0; box-sizing:border-box;
    }
    .rail-footer{margin-top:0;}
  }
  .rail-footer{margin-top:auto; padding:10px 4px 2px; font-size:0.68rem; color:var(--ink-muted); line-height:1.5; opacity:0.75;}
  .brand{display:flex; align-items:baseline; gap:8px; padding:6px 4px;}
  .brand h1{font-size:1.3rem; color:var(--accent-ink); }
  .brand span{font-size:0.7rem; color:var(--ink-muted); font-weight:500;}

  .me-card{
    background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px;
    display:flex; flex-direction:column; gap:2px;
  }
  .me-card .me-name{font-weight:900; font-size:1.02rem;}
  .me-card .me-switch{font-size:0.76rem; color:var(--ink-muted); background:none; border:none; padding:0; text-align:left; cursor:pointer; text-decoration:underline;}

  nav.tabs{display:flex; flex-direction:column; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:6px; overflow:auto; -webkit-overflow-scrolling:touch;}
  nav.tabs button{
    display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:left;
    padding:10px 12px; border:none; background:none; border-radius:8px; color:var(--ink);
    font-size:0.92rem; font-weight:700; cursor:pointer; white-space:nowrap;
  }
  nav.tabs button:hover{background:var(--surface-alt);}
  nav.tabs button.active{background:var(--accent-soft); color:var(--accent-ink);}
  nav.tabs .badge{
    font-family:"JetBrains Mono",monospace; font-size:0.72rem; font-weight:500; background:var(--warn-soft);
    color:var(--warn); border-radius:999px; padding:1px 7px; min-width:18px; text-align:center;
  }
  @media (max-width:820px){
    nav.tabs{flex-direction:row;}
  }

  .balances{display:flex; flex-direction:column; gap:8px;}
  .bal-tile{
    background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  }
  .bal-tile .label{font-size:0.76rem; color:var(--ink-muted); font-weight:700;}
  .bal-tile .value{font-size:1.5rem; font-weight:700; margin-top:2px;}
  .bal-tile .value.value-sm{font-size:1.15rem;}
  .bal-tile .bal-sub{display:block; font-size:0.72rem; font-weight:500; color:var(--ink-muted); margin-top:1px;}
  .bal-tile .value .unit{font-size:0.85rem; color:var(--ink-muted); font-weight:500; margin-left:2px;}

  main{min-width:0;}
  .panel{
    background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:24px;
    margin-bottom:20px;
  }
  .panel h2{font-size:1.15rem; margin-bottom:4px;}
  .panel .sub{color:var(--ink-muted); font-size:0.85rem; margin:0 0 18px;}

  .panel > details > summary{
    font-size:1.15rem; font-weight:600; margin-bottom:4px;
    cursor:pointer; list-style:none;
  }
  .panel > details > summary::-webkit-details-marker{ display:none; }
  .panel > details > summary::before{
    content:"▸"; display:inline-block; width:1em; transition:transform .15s;
  }
  .panel > details[open] > summary::before{ transform:rotate(90deg); }
  .panel > details > summary + .sub{ margin-top:8px; }

  .view{display:none;}
  .view.active{display:block;}

  /* form */
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:0.82rem; font-weight:700; color:var(--ink-muted); margin-bottom:6px;}
  .field .hint{font-size:0.78rem; color:var(--ink-muted); margin-top:5px;}
  select,input[type="text"],input[type="date"],input[type="time"],input[type="number"],input[type="password"],input[type="email"],textarea{
    width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
    background:var(--bg); color:var(--ink); font-size:0.94rem; font-family:inherit;
  }
  input[disabled]{opacity:0.6; cursor:not-allowed;}
  textarea{resize:vertical; min-height:70px;}
  .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px; min-width:0;}
  .row2 .field{min-width:0;}
  @media (max-width:820px){ .row2{grid-template-columns:1fr;} }
  .checkline{display:flex; align-items:center; gap:8px; font-size:0.9rem;}
  .checkline input{width:auto;}

  .preview{
    background:var(--accent-soft); color:var(--accent-ink); border-radius:10px; padding:12px 14px;
    font-size:0.88rem; margin-bottom:16px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  }
  .preview strong{font-size:1.05rem;}
  .preview.bad{background:var(--danger-soft); color:var(--danger);}

  .btn{
    border:none; border-radius:8px; padding:10px 18px; font-weight:700; font-size:0.92rem; cursor:pointer;
  }
  .btn-primary{background:var(--accent); color:#fff;}
  .btn-primary:hover{background:var(--accent-strong);}
  .btn-primary:disabled{opacity:0.5; cursor:not-allowed;}
  .btn-ghost{background:var(--surface-alt); color:var(--ink);}
  .btn-danger{background:var(--danger-soft); color:var(--danger);}
  .btn-danger:hover{background:var(--danger); color:#fff;}
  .btn-ok{background:var(--ok-soft); color:var(--ok);}
  .btn-ok:hover{background:var(--ok); color:#fff;}
  .btn-sm{padding:6px 12px; font-size:0.82rem;}

  .msg{font-size:0.85rem; margin-top:10px;}
  .msg.error{color:var(--danger);}
  .msg.ok{color:var(--ok);}

  /* lists */
  .req-list{display:flex; flex-direction:column; gap:10px;}
  .req-card{
    border:1px solid var(--line); border-radius:12px; padding:14px 16px;
    display:flex; flex-direction:column; gap:8px;
  }
  .req-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;}
  .req-who{font-weight:900;}
  .req-type{font-size:0.8rem; color:var(--ink-muted);}
  .req-dates{font-size:0.9rem;}
  .req-reason{font-size:0.88rem; color:var(--ink-muted);}
  .req-meta{font-size:0.76rem; color:var(--ink-muted);}
  .req-actions{display:flex; gap:8px; margin-top:2px;}
  .emp-actions{flex-wrap:wrap; gap:6px;}
  .emp-actions .btn{padding:4px 9px; font-size:0.74rem;}

  .pill{
    display:inline-flex; align-items:center; gap:4px; font-size:0.74rem; font-weight:700;
    padding:3px 10px; border-radius:999px; white-space:nowrap;
  }
  .pill-pending{background:var(--warn-soft); color:var(--warn);}
  .pill-approved{background:var(--ok-soft); color:var(--ok);}
  .pill-rejected{background:var(--danger-soft); color:var(--danger);}
  .pill-cancelled{background:var(--surface-alt); color:var(--ink-muted);}
  .pill-master{background:var(--accent-soft); color:var(--accent-ink);}
  .pill-admin{background:var(--ok-soft); color:var(--ok);}
  .pill-employee{background:var(--surface-alt); color:var(--ink-muted);}
  .pill-locked{background:var(--danger-soft); color:var(--danger);}
  .pill-night{background:var(--night-soft); color:var(--night);}
  .pill-weekend{background:var(--holiday-soft); color:var(--holiday);}
  .pill-worktype{background:var(--surface-alt); color:var(--ink-muted);}
  td.ded-comp{color:var(--accent); font-weight:600;}
  td.ded-annual{color:var(--warn); font-weight:600;}
  td.ded-void{color:var(--ink-muted); text-decoration:line-through;}
  td.ded-none{color:var(--line);}

  .empty{color:var(--ink-muted); font-size:0.9rem; padding:20px 4px; text-align:center;}

  table{width:100%; border-collapse:collapse; font-size:0.86rem;}
  .table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); white-space:nowrap;}
  th{color:var(--ink-muted); font-weight:700; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.03em;}
  tr:last-child td{border-bottom:none;}
  td.num-cell{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums;}
  .mini-input{width:70px; padding:6px 8px; font-size:0.85rem;}

  .grant-form{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:18px;}
  .grant-form .field{margin-bottom:0; flex:1; min-width:140px;}
  .grant-form .field.narrow{flex:0 0 100px;}
  .grant-form .field.grow{flex:2; min-width:200px;}

  .filter-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:14px;}
  .filter-bar .field{margin-bottom:0; flex:0 0 150px;}
  .filter-bar .field.grow{flex:1; min-width:120px;}
  .filter-bar .filter-hint{font-size:0.78rem; color:var(--ink-muted); margin-left:2px;}
  .pagination{display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:12px; font-size:0.82rem; color:var(--ink-muted);}
  .pagination .btn{padding:5px 12px; font-size:0.8rem;}

  .device-row{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:6px 0;}
  .device-row-sep{border-top:1px solid var(--line); margin-top:10px; padding-top:16px;}
  .device-title{font-size:0.9rem; font-weight:700;}
  .device-sub{font-size:0.78rem; color:var(--ink-muted); margin-top:2px;}
  .divider{border:none; border-top:1px solid var(--line); margin:22px 0;}

  .toast{
    position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--bg);
    padding:10px 18px; border-radius:999px; font-size:0.86rem; font-weight:700; box-shadow:var(--shadow);
    opacity:0; transition:opacity 0.25s; pointer-events:none; z-index:50;
  }
  .toast.show{opacity:1;}

  .modal-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,0.45); display:flex; align-items:center;
    justify-content:center; padding:16px; z-index:60;
  }
  .modal-card{
    width:100%; max-width:360px; background:var(--surface); border:1px solid var(--line);
    border-radius:14px; padding:24px; box-shadow:var(--shadow);
  }
  .modal-card h3{font-size:1.05rem; margin-bottom:4px;}
  .modal-card .sub{margin-bottom:16px;}
  .modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:6px;}
  .modal-detail{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px 12px; margin-bottom:14px; font-size:0.86rem;}
  .modal-detail div{display:flex; justify-content:space-between; gap:12px; padding:3px 0;}
  .modal-detail b{font-family:"JetBrains Mono",monospace; font-weight:500; color:var(--accent);}
  .modal-note{font-size:0.78rem; color:var(--ink-muted); margin:0 0 12px;}

@media (max-width:480px){
  .panel{padding:16px;}
  .gate-card{padding:24px 18px;}
  .filter-bar .field, .grant-form .field{flex:1 1 100%; min-width:0;}
}

/* ===== 모바일 정리 ===== */
@media (max-width:820px){
  /* 상단 고정 영역: 브랜드·이름 한 줄, 잔여 두 칸 나란히, 탭은 슬림하게 */
  .rail-sticky{
    display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
    gap:8px 10px; padding:8px 16px 10px;
  }
  .rail-sticky .brand{padding:0;}
  .rail-sticky .brand h1{font-size:1.15rem;}
  .rail-sticky .me-card{
    flex-direction:row; align-items:center; gap:10px; justify-self:end; min-width:0;
    background:none; border:none; padding:0;
  }
  .rail-sticky .me-card .me-name{font-size:0.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .rail-sticky .balances{grid-column:1 / -1; flex-direction:row; gap:8px;}
  .rail-sticky .bal-tile{flex:1 1 0; min-width:0; padding:8px 12px; border-radius:10px;}
  .rail-sticky .bal-tile .label{font-size:0.7rem;}
  .rail-sticky .bal-tile .value{font-size:1.2rem; margin-top:0; line-height:1.3;}
  .rail-sticky .bal-tile .value.value-sm{font-size:0.92rem;}
  .rail-sticky nav.tabs{grid-column:1 / -1; padding:4px; border-radius:10px; scrollbar-width:none;}
  .rail-sticky nav.tabs::-webkit-scrollbar{display:none;}
  .rail-sticky nav.tabs button{padding:8px 11px; font-size:0.86rem;}
  .rail-sticky .bal-tile .bal-sub{font-size:0.68rem;}

  /* 저작권 문구는 상단 빈 공간 대신 페이지 맨 아래로 */
  .rail{display:contents;}
  .shell{padding-top:calc(var(--sticky-h,0px) + 14px); gap:0;}
  main{order:0;}
  .rail-footer{order:1; text-align:center; padding:4px 4px 0;}

  /* iOS 사파리에서 날짜·시간 입력칸이 카드 밖으로 넘치던 문제 */
  input[type="date"], input[type="time"]{
    -webkit-appearance:none; appearance:none; display:block;
    min-width:0; max-width:100%; min-height:40px; text-align:left;
  }
  input[type="date"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value{text-align:left;}
}

@media (max-width:640px){
  /* 필터: 2열 그리드로 겹치지 않게 */
  .filter-bar{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; align-items:end;}
  .filter-bar .field, .filter-bar .field.grow{min-width:0;}
  .filter-bar .btn{justify-self:start; min-height:40px;}
  .filter-bar .filter-hint{grid-column:1 / -1; margin-left:0;}

  /* 표 → 카드: 한 행을 카드 하나로, 각 칸 앞에 머리글 라벨 */
  .table-wrap{overflow:visible;}
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td{display:block; width:100%;}
  .table-wrap thead{display:none;}
  .table-wrap tr{
    border:1px solid var(--line); border-radius:12px; padding:10px 14px;
    margin-bottom:10px; background:var(--bg);
  }
  .table-wrap td{
    position:relative; padding:4px 0 4px 7.2em; border-bottom:none;
    white-space:normal; word-break:keep-all; overflow-wrap:anywhere;
  }
  .table-wrap td::before{
    content:attr(data-label); position:absolute; left:0; top:6px; width:8.2em;
    font-size:0.74rem; font-weight:700; color:var(--ink-muted); white-space:nowrap;
  }
  .table-wrap td:first-child{padding:0 0 6px; font-weight:700; font-size:0.92rem;}
  .table-wrap td:first-child::before{display:none;}
  .table-wrap td.cell-blank{display:none;}
  .table-wrap td[colspan]{padding:0; text-align:center;}
  .table-wrap td[colspan]::before{display:none;}
  .table-wrap tr:has(> td[colspan]){border:none; background:none; padding:0;}
}

/* ===== 모바일 개선 (2026-11): 하단 탭 바·잔여 칩·하단 고정 버튼·필터 접기 ===== */

/* 공통: 휴가 종류 버튼(연차/반차/반반차) — 원래 select는 숨기고 값만 공유해요 */
.seg{display:flex; background:var(--surface-alt); border-radius:10px; padding:3px; gap:2px;}
.seg button{
  flex:1; border:none; background:none; border-radius:8px; padding:9px 0; min-height:40px;
  font-size:0.92rem; font-weight:700; color:var(--ink-muted); cursor:pointer;
}
.seg button.on{background:var(--surface); color:var(--accent-ink); box-shadow:0 1px 2px rgba(0,0,0,0.12);}
.seg .seg-count{
  font-family:"JetBrains Mono",monospace; font-size:0.74rem; font-weight:500; margin-left:2px;
  background:var(--warn-soft); color:var(--warn); border-radius:999px; padding:1px 7px;
}
select.seg-source{display:none;}

/* 모바일 전용 요소는 넓은 화면에서 숨겨요 */
.mobile-seg, .filter-toggle, .tab-more, nav.tabs .tab-ico, nav.tabs .t-short{display:none;}
.more-sheet-overlay{display:none;}

@media (max-width:820px){
  /* 1) 상단: 브랜드·이름 한 줄 + 잔여 두 칩 (탭은 아래로 내려가요) */
  .rail-sticky{padding:8px 16px 10px;}
  .rail-sticky .bal-tile{
    display:flex; align-items:baseline; justify-content:space-between; gap:8px;
    padding:7px 12px; border-radius:10px;
  }
  .rail-sticky .bal-tile .label{font-size:0.74rem; white-space:nowrap;}
  .rail-sticky .bal-tile .value, .rail-sticky .bal-tile .value.value-sm{font-size:1.1rem; line-height:1.25; white-space:nowrap;}
  .rail-sticky .bal-tile .bal-sub{display:none;}

  /* 2) 하단 탭 바 */
  .rail-sticky nav.tabs{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:55;
    display:grid; grid-template-columns:repeat(var(--tab-count,4), minmax(0,1fr)); grid-auto-flow:column;
    gap:0; padding:4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    background:var(--surface); border:none; border-top:1px solid var(--line); border-radius:0;
    box-shadow:0 -6px 18px -14px rgba(0,0,0,0.35); overflow:visible;
  }
  .rail-sticky nav.tabs button{
    position:relative; flex-direction:column; justify-content:center; gap:3px;
    min-height:54px; padding:6px 2px; border-radius:10px; text-align:center;
    font-size:0.7rem; font-weight:700; color:var(--ink-muted); background:none;
  }
  .rail-sticky nav.tabs button:hover{background:none;}
  .rail-sticky nav.tabs button.active{background:none; color:var(--accent);}
  .rail-sticky nav.tabs button.active .tab-ico{stroke-width:2.3;}
  nav.tabs .tab-ico{display:block; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  nav.tabs .t-long{display:none;}
  nav.tabs .t-short{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
  nav.tabs button.in-more{display:none;}
  nav.tabs .tab-more{display:flex;}
  nav.tabs .tab-more[hidden]{display:none!important;}
  nav.tabs .tab-more.has-dot::after{
    content:""; position:absolute; top:8px; left:calc(50% + 8px); width:8px; height:8px;
    border-radius:50%; background:var(--danger);
  }
  .rail-sticky nav.tabs .badge{
    position:absolute; top:3px; left:calc(50% + 6px); background:var(--danger); color:#fff;
    font-size:0.64rem; padding:0 5px; min-width:16px; line-height:16px;
  }
  /* 하단 바에 본문·토스트가 가리지 않게 */
  .app{padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px));}
  .toast{bottom:calc(80px + env(safe-area-inset-bottom, 0px));}

  /* '더보기' 메뉴 */
  .more-sheet-overlay{display:block; position:fixed; inset:0; z-index:54; background:rgba(0,0,0,0.25);}
  .more-sheet-overlay[hidden]{display:none!important;}
  .more-sheet{
    position:fixed; right:10px; bottom:calc(72px + env(safe-area-inset-bottom, 0px));
    min-width:190px; background:var(--surface); border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--shadow); padding:6px; display:flex; flex-direction:column; gap:2px;
  }
  .more-item{
    display:flex; align-items:center; gap:10px; width:100%; border:none; background:none; border-radius:10px;
    padding:12px; font-size:0.92rem; font-weight:700; color:var(--ink); text-align:left; cursor:pointer;
  }
  .more-item.active{background:var(--accent-soft); color:var(--accent-ink);}
  .more-item .tab-ico{display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .more-item .badge{
    margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:0.72rem; background:var(--danger);
    color:#fff; border-radius:999px; padding:1px 7px;
  }

  /* 3) 결재 요청 버튼: 가로 꽉 채우고, 스크롤해도 하단 바 바로 위에 붙어 있어요 */
  .btn-cta{
    display:block; width:100%; min-height:50px; font-size:1rem; border-radius:12px;
    position:sticky; bottom:calc(72px + env(safe-area-inset-bottom, 0px)); z-index:5;
    box-shadow:0 0 0 8px var(--surface);
  }

  /* 4) [휴가][보상휴가] 나눠 보기 */
  .mobile-seg{display:flex; margin-bottom:14px;}
  .panel > .mobile-seg{margin-top:2px;}
  .view[data-show="leave"] .seg-sec[data-sec="comp"],
  .view[data-show="comp"] .seg-sec[data-sec="leave"]{display:none;}
  .view[data-show] .seg-hide{display:none;}

  /* 5) 필터 접기 */
  .filter-toggle{
    display:inline-flex; align-items:center; gap:6px; margin:0 0 12px; border-radius:999px;
    min-height:36px; padding:6px 14px;
  }
  .filter-toggle svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round;}
  .filter-toggle .filter-dot{width:7px; height:7px; border-radius:50%; background:var(--accent);}
  .filter-bar.is-collapsible:not(.open){display:none;}
  .table-wrap td .btn{white-space:nowrap;}
  .req-actions.emp-actions .btn{flex:0 1 auto; min-height:36px; font-size:0.82rem; padding:6px 12px;}

  /* 6) 결재 버튼 크게 */
  .req-actions .btn{flex:1; min-height:46px; font-size:0.95rem; border-radius:10px;}
  .req-top{align-items:center;}

  /* 7) 긴 안내 문구는 두 줄까지만 (누르면 펼쳐져요) */
  .panel .sub.clampable:not(.expanded){
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; cursor:pointer;
  }

  /* 입력칸 높이를 엄지로 누르기 편하게 */
  select,input[type="text"],input[type="date"],input[type="time"],input[type="number"],input[type="password"],input[type="email"],textarea{
    min-height:44px; font-size:16px; /* 16px 미만이면 iOS가 입력할 때 화면을 확대해요 */
  }
}

/* ===== 휴대폰 알림 · 홈 화면 추가 안내 ===== */
.switch-row{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line);}
.push-box > .switch-row:first-child{border-top:none; padding-top:2px;}
.switch{position:relative; flex:none; width:48px; height:28px; cursor:pointer;}
.switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.switch span{position:absolute; inset:0; border-radius:14px; background:var(--line); transition:background .15s;}
.switch span::after{content:""; position:absolute; left:3px; top:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s;}
.switch input:checked + span{background:var(--accent);}
.switch input:checked + span::after{transform:translateX(20px);}
.switch input:disabled + span{opacity:.5;}
.switch input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px;}
.push-test{width:100%; margin-top:8px; min-height:42px;}
.pill-on{display:inline-block; font-size:0.72rem; font-weight:700; padding:1px 8px; border-radius:999px; background:var(--ok-soft); color:var(--ok); margin-right:4px;}

.install-banner{
  display:flex; gap:12px; align-items:flex-start; background:var(--accent); color:#fff;
  border-radius:14px; padding:14px; margin-bottom:16px;
}
.install-banner .ib-icon{width:44px; height:44px; border-radius:11px; flex:none; background:#fff; object-fit:cover;}
.install-banner b{display:block; font-size:0.98rem; margin-bottom:3px;}
.install-banner p{margin:0; font-size:0.8rem; line-height:1.5; opacity:.92;}
.install-banner ol{margin:8px 0 0; padding:0; list-style:none; font-size:0.82rem;}
.install-banner ol li{display:flex; align-items:center; gap:8px; margin:6px 0;}
.install-banner ol li > i{font-style:normal; flex:none; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:900;}
.install-banner .ib-share{display:inline-flex; vertical-align:middle; width:18px; height:18px;}
.install-banner .ib-share svg{width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.install-banner .ib-acts{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.install-banner .ib-acts button{border:none; border-radius:9px; padding:9px 14px; font-weight:900; font-size:0.84rem; cursor:pointer;}
.install-banner .ib-primary{background:#fff; color:#17332b;}
.install-banner .ib-secondary{background:rgba(255,255,255,.16); color:#fff;}
@media (prefers-color-scheme: dark){ .install-banner{color:#10241d;} .install-banner .ib-secondary{color:#10241d; background:rgba(0,0,0,.12);} .install-banner ol li > i{background:rgba(0,0,0,.12);} .install-banner .ib-share svg{stroke:#10241d;} }

/* 하단 탭 바 크게 (2026-11-02 휴대폰에서 작다는 의견) */
@media (max-width:820px){
  .rail-sticky nav.tabs{padding:6px 6px calc(8px + env(safe-area-inset-bottom, 0px));}
  .rail-sticky nav.tabs button{min-height:64px; gap:4px; font-size:0.8rem; padding:6px 2px;}
  nav.tabs .tab-ico{width:28px; height:28px; padding:3px 0; box-sizing:content-box; border-radius:999px; width:52px; height:26px;}
  .rail-sticky nav.tabs button.active .tab-ico{background:var(--accent-soft);}
  .rail-sticky nav.tabs button.active{color:var(--accent-ink);}
  .rail-sticky nav.tabs button.active .t-short{font-weight:900;}
  .rail-sticky nav.tabs .badge{top:2px; left:calc(50% + 10px); font-size:0.7rem; min-width:18px; line-height:18px;}
  .app{padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px));}
  .btn-cta{bottom:calc(90px + env(safe-area-inset-bottom, 0px));}
  .toast{bottom:calc(98px + env(safe-area-inset-bottom, 0px));}
  .more-sheet{bottom:calc(88px + env(safe-area-inset-bottom, 0px));}
}

/* ===== 아이폰 느낌 (2026-11-02): 기본 글꼴·묶음 목록·반투명 바 — PC·휴대폰 공통 ===== */
:root{
  --font-ios:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","SF Pro Text","Gothic A1","Malgun Gothic",sans-serif;
  --group-bg:#f2f1ec; --field-bg:#f2f1ec; --sep:rgba(60,60,67,0.15);
  --bar-bg:rgba(248,247,243,0.82); --tabbar-bg:rgba(255,255,255,0.86);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --group-bg:#121310; --field-bg:#2b2c25; --sep:rgba(255,255,255,0.12);
    --bar-bg:rgba(18,19,16,0.82); --tabbar-bg:rgba(35,36,32,0.86);
  }
}
:root[data-theme="dark"]{
  --group-bg:#121310; --field-bg:#2b2c25; --sep:rgba(255,255,255,0.12);
  --bar-bg:rgba(18,19,16,0.82); --tabbar-bg:rgba(35,36,32,0.86);
}

body{font-family:var(--font-ios); background:var(--group-bg); letter-spacing:-0.01em;}
h2,h3{font-family:var(--font-ios); font-weight:700; letter-spacing:-0.02em;}
.num{font-family:var(--font-ios); font-weight:700; font-variant-numeric:tabular-nums;}
.gate-card, .modal-card{border:none; border-radius:16px;}

/* 카드·사이드바: 테두리 대신 아주 옅은 그림자 */
.panel{border:none; border-radius:16px; box-shadow:0 1px 2px rgba(0,0,0,0.04);}
.panel h2{font-size:1.3rem;}
.me-card, .bal-tile, nav.tabs{border:none; box-shadow:0 1px 2px rgba(0,0,0,0.04);}
nav.tabs button{font-weight:600; border-radius:10px;}
nav.tabs button.active{background:var(--accent); color:#fff;}
nav.tabs button.active .badge{background:rgba(255,255,255,0.25); color:#fff;}
.bal-tile .value{font-weight:700;}

/* 입력칸: 테두리 없는 회색 칸, 누르면 초록 테두리 */
select,input[type="text"],input[type="date"],input[type="time"],input[type="number"],input[type="password"],input[type="email"],textarea{
  border:1px solid transparent; background:var(--field-bg); border-radius:10px; min-height:44px; font-size:16px;
}
select:focus,input:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.field label{font-weight:600; font-size:0.8rem;}
.btn{border-radius:12px; font-weight:600;}
.btn-primary{min-height:46px;}
.btn-ghost{background:var(--accent-soft); color:var(--accent-ink);}
.btn-sm{border-radius:999px;}
.req-card{border:none; background:var(--group-bg); border-radius:14px;}
.preview{border-radius:12px;}
.divider{border-top:0.5px solid var(--sep);}
th{text-transform:none; letter-spacing:0; font-weight:600;}
th,td{border-bottom:0.5px solid var(--sep);}

/* 스위치: 아이폰 크기 */
.switch{width:51px; height:31px;}
.switch span{border-radius:16px; background:var(--surface-alt);}
.switch span::after{width:27px; height:27px; left:2px; top:2px; box-shadow:0 2px 4px rgba(0,0,0,0.2);}
.switch input:checked + span::after{transform:translateX(20px);}

/* 묶음 목록(설정 앱 스타일) */
.panel-grouped{background:transparent; box-shadow:none; padding:0 0 12px; max-width:640px;}
.panel-grouped > h2{font-size:1.9rem; font-weight:800; letter-spacing:-0.03em; margin:4px 4px 16px;}
.grp{background:var(--surface); border-radius:12px; overflow:hidden;}
.grp-row{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; min-height:48px; padding:10px 16px; margin:0; border:none; background:none;
  font:inherit; font-size:16px; color:var(--ink); text-align:left;
}
.grp .grp-row::before{content:""; position:absolute; top:0; left:16px; right:0; border-top:0.5px solid var(--sep);}
.grp > .grp-row:first-child::before, .grp > :first-child > .grp-row:first-child::before{display:none;}
.grp-text{min-width:0;}
.grp-title{font-size:16px;}
.grp-sub{font-size:13px; color:var(--ink-muted); margin-top:2px;}
.grp-label{flex:none; font-size:16px; color:var(--ink); font-weight:400; margin:0;}
.grp .grp-value, .grp .grp-value:focus, .sheet .grp-value, .sheet .grp-value:focus{
  flex:1; min-width:0; min-height:0; padding:0; border:none; background:transparent; box-shadow:none;
  text-align:right; font-size:16px; color:var(--ink);
}
.grp .grp-value[disabled]{color:var(--ink-muted); opacity:1; cursor:default; -webkit-text-fill-color:var(--ink-muted);}
.grp .grp-full, .grp .grp-full:focus, .sheet .grp-full, .sheet .grp-full:focus{text-align:left;}
.grp-head{font-size:13px; color:var(--ink-muted); margin:26px 16px 7px;}
.grp-foot{font-size:13px; color:var(--ink-muted); margin:7px 16px 0; line-height:1.45;}
.grp-msg{margin:6px 16px 0;}
.grp-msg:empty{display:none;}
.grp-action{color:var(--accent); cursor:pointer;}
.grp-action:disabled{opacity:0.45; cursor:default;}
.grp-danger{color:var(--danger);}
.grp-nav{cursor:pointer;}
.grp-action:active, .grp-nav:active{background:var(--surface-alt);}
.grp-chev{color:var(--ink-muted); font-size:22px; line-height:1; opacity:0.6;}
.grp-collapse{overflow:hidden; max-height:240px; opacity:1; transition:max-height .28s ease, opacity .2s ease;}
.grp-collapse.is-closed{max-height:0; opacity:0;}
.pill-on{background:var(--accent-soft); color:var(--accent-ink);}

/* 아래에서 올라오는 창(비밀번호 변경) */
.sheet-overlay{position:fixed; inset:0; z-index:70; display:flex; align-items:flex-end; justify-content:center; background:rgba(0,0,0,0); transition:background .22s ease;}
.sheet-overlay.open{background:rgba(0,0,0,0.35);}
.sheet{
  width:100%; max-width:520px; max-height:92vh; overflow:auto; background:var(--group-bg);
  border-radius:14px 14px 0 0; padding:14px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  transform:translateY(100%); transition:transform .22s ease;
}
.sheet-overlay.open .sheet{transform:none;}
.sheet-bar{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.sheet-bar b{font-size:17px;}
.sheet-btn{border:none; background:none; color:var(--accent); font:inherit; font-size:17px; padding:6px 4px; cursor:pointer;}
.sheet-done{font-weight:700;}
.sheet-btn:disabled{opacity:0.4;}
@media (min-width:821px){
  .sheet-overlay{align-items:center;}
  .sheet{border-radius:16px; padding-bottom:24px; transform:translateY(24px) scale(.98); opacity:0; transition:transform .2s ease, opacity .2s ease;}
  .sheet-overlay.open .sheet{transform:none; opacity:1;}
}

@media (max-width:820px){
  /* 위·아래 바: 반투명 유리 */
  /* 바 자체에 blur를 걸면 안쪽 하단 탭바(fixed)가 바에 갇혀 위로 올라와요. 그래서 뒤판(::before)에만 걸어요. */
  .rail-sticky{background:transparent; border-bottom:0.5px solid var(--sep); isolation:isolate;}
  .rail-sticky::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--bar-bg); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);}
  .rail-sticky nav.tabs{background:var(--tabbar-bg); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-top:0.5px solid var(--sep); box-shadow:none;}
  .rail-sticky nav.tabs button.active{background:none; color:var(--accent-ink);}
  .rail-sticky .bal-tile{box-shadow:none;}
  .rail-sticky .brand h1{font-family:var(--font-ios); font-weight:800; letter-spacing:-0.02em; color:var(--ink);}

  /* 본문: 카드 대신 회색 바탕 위에 바로, 첫 제목은 크게 */
  :root{--field-bg:var(--surface);}
  .panel{background:transparent; box-shadow:none; padding:4px 0 8px; border-radius:0;}
  .view > .panel:first-of-type > h2:first-child, .view > .seg-sec:first-of-type > h2:first-child{font-size:1.9rem; font-weight:800; letter-spacing:-0.03em; margin:2px 4px 6px;}
  .panel .sub{margin-left:4px; margin-right:4px;}
  .field label{margin-left:4px;}
  .req-card, .table-wrap tr{background:var(--surface); border:none; box-shadow:0 1px 2px rgba(0,0,0,0.04);}
  .btn-cta{box-shadow:0 0 0 8px var(--group-bg);}
  .seg{background:rgba(118,118,128,0.12);}
  .grant-form, .filter-bar{background:var(--surface); border-radius:12px; padding:12px;}
  .grant-form, .filter-bar, .panel > details, .modal-card{--field-bg:var(--group-bg);}
  .panel > details{background:var(--surface); border-radius:12px; padding:14px 16px;}
}

/* 휴대폰 상단 영역 키우기 (2026-11-02) */
@media (max-width:820px){
  .rail-sticky{padding:12px 16px 14px; gap:12px 12px;}
  .rail-sticky .brand h1{font-size:1.5rem;}
  .rail-sticky .me-card .me-name{font-size:1.05rem;}
  .rail-sticky .me-card a, .rail-sticky .me-card button{font-size:0.92rem;}
  .rail-sticky .bal-tile{padding:12px 16px; border-radius:14px;}
  .rail-sticky .bal-tile .label{font-size:0.85rem;}
  .rail-sticky .bal-tile .value, .rail-sticky .bal-tile .value.value-sm{font-size:1.55rem; line-height:1.2;}
  .rail-sticky .bal-tile .value .unit{font-size:0.95rem;}
}

/* index.html의 [hidden] 속성용 표시 규칙 */
[hidden]{display:none!important;}

/* ---------- 카카오 로그인 ---------- */
.gate-or{display:flex; align-items:center; gap:10px; margin:16px 0 12px; color:var(--ink-muted); font-size:0.8rem;}
.gate-or::before, .gate-or::after{content:""; flex:1; height:1px; background:var(--line);}
.gate-card button.kakao-btn{background:#FEE500; color:rgba(0,0,0,0.85); display:flex; align-items:center; justify-content:center; gap:8px; margin-top:0;}
.gate-card button.kakao-btn:hover{background:#f5dc00;}
.kakao-btn svg{width:18px; height:18px; fill:#000;}
.kk-dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:#FEE500; border:1px solid #d8c200; margin-right:6px; vertical-align:middle;}
.pill-kakao{background:#FEE500; color:rgba(0,0,0,0.8);}
#kakaoLinkModal .field input{width:100%; box-sizing:border-box;}

/* ---------- 내 신청내역 › 한눈에 보기 (year-summary.js) ---------- */
#mineSeg{max-width:520px; margin:4px 0 18px;}
#mineSeg button{flex:1;}
.ys-seg .t-short, .ys-mail-btn .t-short{display:none;}
#view-mine[data-show="summary"] .seg-sec:not([data-sec="summary"]),
#view-mine[data-show="leave"] .seg-sec:not([data-sec="leave"]),
#view-mine[data-show="comp"] .seg-sec:not([data-sec="comp"]){display:none !important;}
.ys-toolbar{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.ys-year{display:flex; align-items:center; gap:8px;}
.ys-year b{font-size:1.2rem; font-weight:800; min-width:72px; text-align:center;}
.ys-yr-btn{width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink-muted); font-size:18px; line-height:1; cursor:pointer;}
.ys-yr-btn:disabled{opacity:.35; cursor:default;}
.ys-mail-btn{margin-left:auto; white-space:nowrap;}
.ys-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px;}
.ys-card{background:var(--surface-alt); border-radius:12px; padding:12px 14px;}
.ys-card small{display:block; color:var(--ink-muted); font-weight:600; font-size:0.8rem;}
.ys-card strong{font-size:1.55rem; font-weight:800; font-variant-numeric:tabular-nums;}
.ys-card em{font-style:normal; color:var(--ink-muted); font-size:0.82rem; margin-left:3px;}
.ys-card.total{background:var(--accent-soft);}
.ys-card.total strong{color:var(--accent);}
.ys-grid{display:grid; grid-template-columns:minmax(260px,320px) 1fr; gap:20px; align-items:start;}
.ys-block{min-width:0;}
.ys-detail{margin-top:22px;}
.ys-h{font-size:0.98rem; font-weight:800; margin:0 0 8px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.ys-tag{margin-left:auto; font-size:0.78rem; color:var(--ink-muted); font-weight:500;}
.ys-tag b{color:var(--accent);}
.ys-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
table.ys-table{width:100%; border-collapse:collapse; font-size:0.85rem;}
table.ys-table th{background:var(--surface-alt); color:var(--ink-muted); font-weight:700; padding:7px 8px; text-align:center; font-size:0.78rem; white-space:nowrap;}
table.ys-table td{padding:6px 8px; border-bottom:1px solid var(--line); text-align:center;}
table.ys-table .n{text-align:right; font-variant-numeric:tabular-nums;}
table.ys-table .l{text-align:left;}
table.ys-comp td{white-space:nowrap;}
table.ys-comp td.l{white-space:normal; min-width:180px;}
table.ys-table tr.now td{background:var(--warn-soft);}
table.ys-table tr.fut td{color:var(--ink-muted); opacity:.6;}
table.ys-table tfoot td{font-weight:800; background:var(--surface-alt); border-bottom:none;}
table.ys-leave tr.mrow td{border-top:2px solid var(--line);}
.ys-y{color:var(--ok); font-weight:800;}
.ys-n{color:var(--ink-muted); opacity:.6;}
.ys-p{color:var(--warn); font-weight:700;}
.ys-cchip{display:inline-block; background:var(--warn-soft); color:var(--warn); border-radius:6px; padding:0 6px; font-size:0.78rem; font-weight:700; white-space:nowrap;}
.ys-note{font-size:0.78rem; color:var(--ink-muted); margin:8px 0 0;}
.ys-list, table.ys-mleave{display:none;}
/* 메일 시트 */
.ys-mail .ys-mail-sub{color:var(--ink-muted); font-size:0.9rem; margin:2px 4px 10px;}
.ys-mail .ys-hint{background:var(--warn-soft); color:var(--warn); border-radius:10px; padding:9px 12px; font-size:0.85rem; margin:0 0 6px;}
.ys-mail .ys-mail-head{display:flex; justify-content:space-between;}
.ys-mail .ys-mail-src{color:var(--accent); font-weight:700; text-transform:none;}
.ys-mail .ys-save{display:flex; align-items:center; gap:8px; font-size:0.9rem; margin:10px 4px 0; cursor:pointer;}
.ys-mail .ys-save input{width:18px; height:18px; accent-color:var(--accent);}
.ys-mail .ys-send{display:block; width:100%; min-height:48px; margin-top:12px; font-size:1rem; border-radius:12px;}
.ys-mail .ys-send:disabled{opacity:.45;}
.ys-mail .ys-file{font-size:0.8rem; color:var(--ink-muted); margin:10px 4px 0;}

@media (max-width:820px){
  .ys-seg .t-long, .ys-mail-btn .t-long{display:none;}
  .ys-seg .t-short, .ys-mail-btn .t-short{display:inline;}
  #mineSeg{max-width:none;}
  .ys-mail-btn{padding:8px 12px; font-size:0.9rem;}
  .ys-cards{grid-template-columns:1fr 1fr; gap:8px;}
  .ys-card strong{font-size:1.4rem;}
  .ys-grid{grid-template-columns:1fr; gap:18px;}
  table.ys-table{font-size:0.82rem;}
  table.ys-table th, table.ys-table td{padding:6px 5px;}
  /* 보상휴가 적립: 휴대폰은 목록, 연차 상세: 월별 묶음 한 줄 표 */
  .ys-comp-wrap, .ys-scroll{display:none;}
  .ys-list{display:block; list-style:none; margin:0; padding:0;}
  .ys-list li{display:flex; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line); align-items:flex-start;}
  .ys-list li.empty{display:block;}
  .ys-list .d{min-width:52px; font-weight:800; font-size:0.85rem;}
  .ys-list .d small{display:block; color:var(--ink-muted); font-weight:500; font-size:0.72rem;}
  .ys-list .b{flex:1; min-width:0;}
  .ys-list .b div{font-size:0.8rem; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px;}
  .ys-list .r{font-weight:800; font-size:0.85rem; text-align:right;}
  table.ys-leave{display:none;}
  table.ys-mleave{display:table; width:100%; border-collapse:collapse; font-size:0.85rem; table-layout:fixed;}
  table.ys-mleave td{padding:8px 4px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  table.ys-mleave td.day{width:62px; font-weight:700;}
  table.ys-mleave td.day small{color:var(--ink-muted); font-weight:500;}
  table.ys-mleave td.k{width:84px;}
  table.ys-mleave td.c{width:50px; text-align:center;}
  table.ys-mleave td.m{color:var(--ink-muted); font-size:0.78rem;}
  table.ys-mleave tr.lr{cursor:pointer;}
  table.ys-mleave tr.lr.open td.m{white-space:normal;}
  table.ys-mleave tr.mh td{background:var(--surface-alt); font-weight:800; font-size:0.78rem; padding:6px 8px; border:none;}
  table.ys-mleave tr.mh td span{float:right; color:var(--ink-muted); font-weight:600;}
}