/* assets/css/app.css */
/* 기본은 라이트 */
:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --card:#ffffff;
  --border:rgba(17,24,39,.08);
  --text:rgba(17,24,39,.92);
  --muted:rgba(17,24,39,.55);

  --accent:#374151;     /* gray-700 */
  --accent-2:#111827;   /* gray-900 */
  --danger:#ef4444;

  --shadow: 0 10px 24px rgba(17,24,39,.06);

  --sidebar-bg: rgba(255,255,255,.92);
  --sidebar-bg-2: rgba(255,255,255,.78);

  --surface: rgba(17,24,39,.03);
  --surface-2: rgba(17,24,39,.06);
  --hover: rgba(17,24,39,.04);
  --active: rgba(17,24,39,.06);

  --control-bg: rgba(255,255,255,.85);
  --control-bg-2: rgba(255,255,255,.92);
}

/* 다크 모드 */
:root[data-theme="dark"]{
  --bg:#0b0d10;
  --panel:#111418;
  --card:#14181d;
  --border:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62);

  /* 다크에서는 포인트를 회색톤 유지(네가 원래 쓰던 느낌) */
  --accent:#2f343b;
  --accent-2:#23262a;
  --danger:#ef4444;

  --shadow: 0 10px 30px rgba(0,0,0,.35);

  --sidebar-bg: #111418;
  --sidebar-bg-2: #0f1216;

  --surface: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.10);
  --hover: rgba(255,255,255,.08);
  --active: rgba(255,255,255,.12);

  --control-bg: rgba(255,255,255,.06);
  --control-bg-2: rgba(255,255,255,.10);
}

*{ box-sizing:border-box; }
html, body { height: 100%; overflow: hidden; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;

  /* ✅ 기본(라이트) 배경 */
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(0,0,0,.03), transparent 60%),
    radial-gradient(700px 420px at 85% 0%, rgba(0,0,0,.02), transparent 55%),
    var(--bg);

  color:var(--text);
}

:root[data-theme="dark"] body{
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(700px 420px at 85% 0%, rgba(255,255,255,.06), transparent 55%),
    var(--bg);
}

a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; }

/* ✅ shell: 한 번만 정의 (문법 오류 + 중복 제거) */
.shell{
  display:flex;
  height:auto;
  min-height:100vh;
  min-height:100dvh;
  overflow:visible;
}

.sidebar{
  width:260px; flex:0 0 260px;
  padding:14px 14px;
  background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2));
  border-right:1px solid var(--border);
  position:sticky; top:0; height:100vh;
}

/* ✅ 사이드바: 상단(브랜드) / 중간(메뉴 스크롤) / 하단(버튼 고정) 구조 */
.sidebar{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}

/* 사이드바 로고/메뉴 구분선 */
.sidebar-divider{
  height:1px;
  width:100%;
  margin: 8px 0 16px 0;
  background: var(--border);
  opacity: .9;
}

/* ✅ 메뉴들이 들어가는 스크롤 영역 */
.sidebar-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding-bottom:12px;
}

/* ✅ 사이드바 하단 고정 버튼 영역 */
.sidebar-actions{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}

.sidebar-action-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.brand{
  display:flex; align-items:center; gap:10px;
  padding:6px 12px;
  border-radius:14px;
  margin-bottom:6px;
  justify-content:center;
}

/* ===== 브랜드 로고(테마별 이미지 교체) ===== */
.brand-logo{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:0;
}
.brand-logo-img{
  width:100%;
  max-width:230px;
  height:auto;
  display:none;
}

/* 기본(테마 속성 적용 전)에는 라이트 로고를 보여주고,
   data-theme가 dark일 때만 다크 로고로 전환 */
.logo-light{ display:block; }
.logo-dark{ display:none; }
:root[data-theme="dark"] .logo-light{ display:none; }
:root[data-theme="dark"] .logo-dark{ display:block; }

/* 기본(라이트) */
.brand-badge{
  background: linear-gradient(135deg, #111827, #9ca3af);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

/* 다크일 때만 덮어쓰기 */
:root[data-theme="dark"] .brand-badge{
  background: linear-gradient(135deg, #9ca3af, #e5e7eb);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.brand-title{ font-weight:800; letter-spacing:-.02em; }
.brand-sub{ font-size:12px; color:var(--muted); margin-top:2px; }

.nav-section{ margin-top:10px; }
.nav-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color: var(--muted);
  padding:6px 12px;
}

/* ✅ (수정) CSS 중첩 금지: sidebar nav 강제 세로 정렬 */
.sidebar .nav{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
}
.sidebar .nav a{
  width:100%;
  display:flex;
}

/* 사이드바 메뉴: Bootstrap 충돌 방지 */
.side-nav{
  display:flex;
  flex: 1;
  flex-direction:column;
  flex-wrap:nowrap;
  overflow-y: auto;   /* ✅ 메뉴가 길면 여기만 스크롤 */
  min-height: 0;      /* ✅ flex overflow 필수 */
}
.side-nav a{ width:100%; }

.side-nav a{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  font-size:13.5px;
  line-height:1.2;
  border-radius:12px;
  font-weight:600;
  color: var(--text);
}

.side-nav a:hover{
  background: var(--hover);
}

.side-nav a.active{
  background: var(--active);
  border:1px solid var(--border);
  color: var(--text);
}

.main{
  flex:1;
  padding:22px 22px 38px;
  height:100vh;
  overflow-y:auto;
  min-width:0; /* 가끔 가로 overflow 방지용 */
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:18px;
}
.h1{ font-size:22px; font-weight:900; letter-spacing:-.02em; }
.p-muted{ color:var(--muted); font-size:13px; margin-top:4px; }

.grid{ display:grid; gap:14px; }
.grid.cols-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid.cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ✅ (추가) 대시보드 비율 그리드 */
.grid.ratio-2-1-1{
  grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
}
.grid.ratio-1-2-1{
  grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);
}

.grid > .card{ min-width:0; }  /* 그리드 안 카드가 내용 때문에 폭 커지는 것 방지 */

@media (max-width: 1100px){
  .sidebar{ width:240px; flex-basis:240px; }
  .grid.cols-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* =========================
   Filter Row (PC/Tablet: 한 줄 유지 + 가로 스크롤)
   ========================= */
.filter-row{
  display:flex;
  gap:14px;
  align-items:flex-end;      /* label + input 높이 맞춰서 아래 정렬 */
  flex-wrap:nowrap;          /* ✅ 한 줄 고정 */
  overflow-x:auto;           /* ✅ 좁으면 가로 스크롤 */
  padding-bottom:6px;
  -webkit-overflow-scrolling: touch;
}

.filter-row::-webkit-scrollbar{ height:10px; }
.filter-row::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.35);
  border-radius: 999px;
}
:root[data-theme="dark"] .filter-row::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.22);
}

.filter-item{
  flex: 0 0 210px;           /* ✅ 기본 폭(필터 하나당) */
  min-width: 210px;
}

.filter-item.wide{           /* ✅ 검색처럼 넓게 쓰고 싶은 거 */
  flex-basis: 280px;
  min-width: 280px;
}

/* Tablet에서 조금 더 촘촘하게 */
@media (min-width: 721px) and (max-width: 1100px){
  .filter-item{ min-width: 190px; flex-basis: 190px; }
  .filter-item.wide{ min-width: 240px; flex-basis: 240px; }
}

/* Mobile은 기존처럼 세로로(스크롤 X) */
@media (max-width: 720px){
  .filter-row{
    flex-wrap:wrap;          /* ✅ 모바일에서는 줄바꿈 허용 */
    overflow-x:visible;
  }
  .filter-item, .filter-item.wide{
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* =========================
   Tablet: PC 레이아웃 유지 + 살짝 축소된 느낌
   ========================= */
@media (min-width: 721px) and (max-width: 1100px){
  /* ✅ 뷰포트 폭에 따라 자연스럽게 축소 */
  html{ font-size: clamp(13.5px, 1.25vw, 15px); }

  .sidebar{ width:240px; flex:0 0 240px; }
  .main{ padding:16px 16px 30px; }
  .grid{ gap:12px; }

  /* 카드/텍스트 계열 전반 다운스케일 */
  .h1{ font-size:19px; }
  .p-muted{ font-size:12.5px; }

  .card{ padding:13px; border-radius:18px; }
  .badge{ font-size:12.5px; }

  .chip{ padding:8px 10px; font-size:12.5px; }

  /* 표/리스트 줄바꿈 줄이기 */
  .table td, .table th{ font-size:13px; }
}

/* =========================
   Mobile: 사이드바 숨김 + 하단 전용 메뉴바
   ========================= */
@media (max-width: 720px){
  /* ✅ 스크롤 잠금 해제(핵심) */
  html, body{
    height: auto !important;
    overflow: auto !important;
  }
  body{ min-height: 100vh; }

  /* ✅ shell이 100vh 고정 + overflow:hidden이라 스크롤이 막힘 → 해제 */
  .shell{
    display:block;
    height:auto !important;
    min-height:100vh;
    overflow: visible !important;
  }

  /* 모바일은 사이드바 숨김 */
  .sidebar{ display:none !important; }

  /* 메인 영역도 고정 높이/스크롤 제한 풀기 */
  .main{
    height:auto !important;
    overflow: visible !important;
    padding:14px 14px calc(110px + env(safe-area-inset-bottom)) 14px;
  }

  /* 그리드 1열 */
  .grid.cols-5, .grid.cols-4, .grid.cols-2{ grid-template-columns: 1fr; }
  .grid.ratio-1-2-1, .grid.ratio-2-1-1{ grid-template-columns: 1fr; }
}

/* =========================
   Mobile Bottom Nav (전용 하단 메뉴바)
   ========================= */
.mnav{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  height: 74px;
  border-radius: 999px; /* 양 끝 완전 둥근 형태 */
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10050;

  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 6px;
  padding: 8px 10px;
}

.mnav-btn{
  flex: 1;
  min-width: 0;
  height: 58px;
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: 18px;
  cursor: pointer;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 4px;

  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.mnav-btn:active{
  background: var(--active);
}

.mnav-btn .ico{
  width: 22px;
  height: 22px;
  display:block;
  opacity: .92;
}

.mnav-btn .txt{
  font-size: 11px;
  color: var(--muted);
  line-height: 1;
}

/* 현재 선택된 탭 느낌 */
.mnav-btn[aria-current="page"]{
  background: var(--active);
  border: 1px solid var(--border);
}
.mnav-btn[aria-current="page"] .txt{
  color: var(--text);
  font-weight: 700;
}

/* =========================
   Mobile Sheet (버튼 누르면 상세 메뉴 뜨는 패널)
   ========================= */
.mnav-sheet{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(98px + env(safe-area-inset-bottom)); /* 하단바 위 */
  z-index: 10060;

  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  overflow: hidden;
  display:none;
}

.mnav-sheet.open{ display:block; }

.mnav-sheet-head{
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.mnav-sheet-title{
  font-weight: 900;
  letter-spacing: -.02em;
}

.mnav-sheet-close{
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 10px;
  cursor:pointer;
}

.mnav-sheet-body{
  max-height: min(52vh, 420px);
  overflow:auto;
  padding: 10px 10px 12px;
}

.mnav-sheet-group{
  margin-top: 8px;
}
.mnav-sheet-group-title{
  font-size: 11px;
  color: var(--muted);
  letter-spacing:.12em;
  text-transform: uppercase;
  padding: 8px 10px 6px;
}

.mnav-sheet-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;

  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
}
.mnav-sheet-item:hover{ background: var(--hover); }
.mnav-sheet-item:active{ background: var(--active); }

.mnav-sheet-item strong{
  font-size: 14px;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  width: max-content;
}

/* topbar 아래 구분선 */
.topbar-divider{
  width: 100%;
  height: 1px;
  background-color: var(--border);
  margin: 8px 0 16px;
}

.card{
  border:1px solid var(--border);
  background: var(--card);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.card-title{ font-size:12px; color: var(--muted); }
.card-value{ font-size:26px; font-weight:900; margin-top:8px; }
.card-sub{ font-size:12px; color: var(--muted); margin-top:6px; }

.hr{ height:1px; background: var(--border); margin:14px 0; border:0; }

/* ✅ 입력/셀렉트: 다크/라이트 둘 다 자연스럽게 */
.input, .select, .textarea{
  width:100%;
  border:1px solid var(--border);
  background: var(--control-bg);
  color:var(--text);
  border-radius:999px;
  padding:10px 14px;
  outline:none;
  box-shadow: none;
}

.textarea{ border-radius:16px; min-height:90px; resize:vertical; }

.input:focus, .select:focus, .textarea:focus{
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

.label{ font-size:12px; color: var(--muted); margin:10px 0 6px; display:block; }

/* =========================================================
   Buttons (manage.html 톤에 맞춰 정리)
========================================================= */
.btn{
  border:none;
  outline:none;
  cursor:pointer;
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  font-weight:650;
  user-select:none;
  transition: transform .05s ease, background .12s ease, border-color .12s ease;
}
.btn:active{ transform: translateY(1px); }

/* soft button */
.btn-soft{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(17,24,39,.10);
  color: rgba(17,24,39,.92);
}
:root[data-theme="dark"] .btn-soft{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: var(--text);
}
.btn-soft:hover{ background: rgba(255,255,255,.95); }
:root[data-theme="dark"] .btn-soft:hover{ background: rgba(255,255,255,.10); }

/* primary button */
.btn-primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#fff;
  border: 1px solid rgba(0,0,0,.08);
}
:root[data-theme="dark"] .btn-primary{
  background: linear-gradient(180deg, #61656b, #3f4247);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}

/* mini */
.btn-mini{
  padding:8px 10px;
  border-radius:10px;
  font-size:12.5px;
}

/* (호환) 기존 마크업: .btn.primary 지원 */
.btn.primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#fff;
  border: 1px solid rgba(0,0,0,.08);
}
:root[data-theme="dark"] .btn.primary{
  background: linear-gradient(180deg, #61656b, #3f4247);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}

.btn.danger{
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--text);
}

/* =========================================================
   Pill (manage.html 스타일)
========================================================= */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.70);
  border-radius:999px;
  box-shadow:none;
}
:root[data-theme="dark"] .pill{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

.pill select, .pill input{
  border:none;
  outline:none;
  background:transparent;
  font-size:12.5px;
  color:var(--text);
  min-width:110px;
}
.pill input{ min-width:220px; }
.pill input::placeholder{ color: var(--muted); }
.pill .icon{
  width:18px;
  height:18px;
  opacity:.55;
  display:inline-grid;
  place-items:center;
}

/* =========================================================
   Badge (manage.html 톤)
========================================================= */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.70);
  color: rgba(17,24,39,.92);
}
:root[data-theme="dark"] .badge{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.badge strong{ font-weight:800; }

/* =========================================================
   Table (support/manage 톤 + schedule column fixed)
========================================================= */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid rgba(17,24,39,.08);
  border-radius:16px;
  table-layout: fixed; /* ✅ 컬럼 폭 내용에 끌려가지 않게 */
}
:root[data-theme="dark"] .table{
  border-color: rgba(255,255,255,.12);
}

.table th, .table td{
  padding:12px 12px;
  border-bottom:1px solid rgba(17,24,39,.08);
  font-size:13px;
  text-align:left;
}
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .table td{
  border-color: rgba(255,255,255,.12);
}

.table th{
  font-size:12px;
  color: var(--muted);
  background: rgba(255,255,255,.70);
}
:root[data-theme="dark"] .table th{
  background: rgba(255,255,255,.03);
}

.table tr:last-child td{ border-bottom:none; }

.notice{
  padding:10px 12px;
  border:1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-radius:12px;
  color: var(--text);
  font-size:13px;
}

/* 경고/에러 문구가 없으면(비어있으면) 박스 자체를 숨김 */
.notice:empty{ display:none; }

/* 우측 하단 테마 토글 */
.theme-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display:flex;
  gap:8px;
  align-items:center;
}

.theme-btn{
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding:10px 12px;
  border-radius:999px;
  cursor:pointer;
  backdrop-filter: blur(10px);
}
.theme-btn:hover{ background: var(--hover); }

/* topbar 안에 들어가는 테마 도크(모바일 전용) */
.theme-dock{
  display:none;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
  margin-bottom:10px;
}

/* 모바일에서만 표시, 기존 우하단 fab은 숨김 */
@media (max-width: 720px){
  .theme-dock{ display:flex; }
  .theme-fab{ display:none !important; }
}

.theme-label{
  font-size:12px;
  color: var(--muted);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--surface);
}

/* Bootstrap Modal 테마 통일 */
.modal-content{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  color: var(--text) !important;
}

.modal-header, .modal-footer{
  border-color: var(--border) !important;
}

.modal-backdrop.show{
  opacity: .25; /* 기본 = 라이트 */
}

:root[data-theme="dark"] .modal-backdrop.show{
  opacity: .45;
}

/* Bootstrap form controls inside modal */
.modal .form-control,
.modal .form-select,
.modal textarea{
  background: var(--control-bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
}

.btn-close{ filter: invert(0); }
:root[data-theme="dark"] .btn-close{ filter: invert(1); }

/* PC/태블릿 기본: 아이콘 숨김 */
.logout-icon{ display: none; }

/* 모바일: 자동 로그아웃 배지 아이콘 모드 */
@media (max-width: 480px){
  .logout-badge{
    font-size: 11px;
    padding: 5px 8px;
    white-space: nowrap;
    flex-shrink: 0;
    gap: 4px;
  }

  .logout-badge .logout-text{ display: none; }
  .logout-badge .logout-icon{
    display: inline-block;
    font-size: 12px;
  }

  .logout-badge strong{
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
  }
}

.logout-badge{ white-space: nowrap; }

.clamp-3{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================
   SDMS Custom Modal (Bootstrap 없이도 동작)
========================================================= */
.sdms-modal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(6px);
}

.sdms-modal-card{
  background: var(--card);
  width: min(520px, 92vw);
  margin: 8vh auto;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
  overflow: hidden;
  border: 1px solid var(--border);
}

.sdms-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 80%, var(--text) 3%);
}

.sdms-modal-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 900;
  font-size: 18px;
}

.sdms-badge{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--text);
  font-weight: 900;
}

.sdms-modal-close{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.sdms-modal-body{ padding: 18px; }
.sdms-modal-strong{ font-weight: 900; margin-bottom: 6px; }
.sdms-modal-muted{ color: var(--muted); font-size: 13px; line-height: 1.5; }

.sdms-modal-foot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding: 14px 18px 18px;
}

.sdms-btn-ghost{
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
}

.sdms-btn-ghost:active,
.sdms-modal-close:active{ transform: translateY(1px); }

@media (max-width: 480px){
  .sdms-modal-card{ margin: 12vh auto; }
}

.schedule-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  background: var(--surface);
  border-radius:14px;
}
.schedule-date{
  flex:0 0 auto;
  font-weight:900;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.schedule-name{
  flex:1;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ====== 1) 상단 통계 카드 아이콘(테마 대응) ====== */
.grid.cols-5 > .card{ position: relative; }

.stat-icon{
  position:absolute;
  right:16px;
  top:14px;
  width:54px;
  height:54px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:22px;
  border: 1px solid transparent;

  background: color-mix(in srgb, var(--text) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  color: var(--text);

  box-shadow: 0 6px 12px rgba(0,0,0,.08);
  pointer-events:none;
}

:root[data-theme="dark"] .stat-icon{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
}

/* ====== 2) 통계(차트) 카드 ====== */
.chart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.chart-title{
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.chart-sub{
  margin-top: 6px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
}

.chart-tabs{ display:flex; gap:8px; }

/* ✅ chip active 중복 정의 제거: 딱 하나만 유지 */
.chip{
  border:1px solid var(--border);
  background: var(--control-bg);
  color:var(--text);
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  transition: background .12s ease, transform .06s ease, box-shadow .12s ease;
}
.chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.chip:active{ transform: translateY(0px); }

.chip.active{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#fff;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(79,70,229,.18);
}
:root[data-theme="dark"] .chip.active{
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.chart-body{
  height:240px;
  padding: 8px 2px 0;
}
.chart-body canvas{ width:100% !important; height:100% !important; }

.chart-foot{
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-top:8px;
}
.chart-foot .clock{ font-size:14px; }

.chart-mini-title{
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
}
.chart-mini{
  height:160px;
}
.chart-mini canvas{ width:100% !important; height:100% !important; }

/* ====== 3) 학사일정 타임라인 ====== */
.schedule-timeline{
  display:grid;
  gap:14px;
  padding-top:6px;
}
.schedule-item{
  display:grid;
  grid-template-columns: 34px 1fr;
  gap:12px;
  align-items:flex-start;
  position:relative;
}
.schedule-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  background: var(--surface);
  font-size:16px;
}
.schedule-line{
  position:absolute;
  left:16px;
  top:38px;
  bottom:-14px;
  width:2px;
  background: color-mix(in srgb, var(--border) 75%, transparent);
}
.schedule-item:last-child .schedule-line{ display:none; }

.schedule-name{
  font-weight:900;
  margin-top:2px;
}
.schedule-date{
  margin-top:6px;
  color: var(--muted);
  font-weight:800;
  font-variant-numeric: tabular-nums;
}

/* ====== 4) 급식 박스 ====== */
.meal-box{
  border:1px solid var(--border);
  background: var(--surface);
  border-radius:16px;
  padding:14px;
  min-height: 140px;
}
.meal-list{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:6px;
}
.meal-empty{
  color: var(--muted);
  font-weight:800;
}

/* =========================================================
   (추가) Dashboard: Greeting / Today Activity cards
========================================================= */
.greet-list{ display:flex; flex-direction:column; gap:10px; }
.greet-item{ display:flex; gap:10px; align-items:flex-start; }
.greet-ico{
  width:28px; height:28px; border-radius:10px;
  background:rgba(99,102,241,.12);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex:0 0 auto;
}
:root[data-theme="dark"] .greet-ico{
  background: rgba(255,255,255,.08);
}
.greet-text{ line-height:1.35; }
.greet-text b{ font-weight:900; }

.today-activity{ display:flex; flex-direction:column; gap:12px; }
.act-row{ display:flex; gap:12px; }
.act-time{ width:150px; flex:0 0 150px; font-weight:900; white-space:pre-line; }
.act-time .p-muted{ font-weight:600; }
.act-box{ flex:1; border:1px solid var(--border); border-radius:14px; padding:10px; background: var(--surface); }
.act-team{ font-weight:900; margin-bottom:8px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.act-empty{ color:var(--muted); }
.act-areas{ display:flex; flex-direction:column; gap:8px; }
.act-area{ display:flex; gap:10px; }
.act-areaName{ min-width:54px; font-weight:900; }
.act-members{ display:flex; flex-wrap:wrap; gap:6px; }
.act-member{
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  background:rgba(15,23,42,.02);
}
:root[data-theme="dark"] .act-member{
  background: rgba(255,255,255,.04);
}
.act-badge{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:999px;
  padding:5px 10px;
  background:rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.25);
  font-size:12px; font-weight:900;
}
.act-note{ color:var(--muted); font-size:12px; margin-top:6px; }

@media (max-width: 980px){
  .act-row{ flex-direction:column; }
  .act-time{ width:auto; flex:0 0 auto; }
}

/* =========================================================
   schedule manage weekly table cells
========================================================= */
/* ✅ 주간 표: 5개 컬럼 폭 항상 동일 */
#sm_weekTable{
  width:100%;
  table-layout: fixed;
}

.sm-rowhead{
  white-space: pre-line;
  font-weight: 900;
  line-height: 1.2;
  min-width: 140px;
}

.sm-cell{
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 12px;
  padding: 10px 10px 8px;
  background: rgba(255,255,255,.85);
  min-height: 66px;
  cursor: default;
  position: relative;
  transition: transform .06s ease, box-shadow .12s ease;
}
:root[data-theme="dark"] .sm-cell{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.sm-cell:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
:root[data-theme="dark"] .sm-cell:hover{
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.sm-cell::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
}
:root[data-theme="dark"] .sm-cell::before{
  background: rgba(255,255,255,.10);
}
.sm-cell-base::before { background: rgba(0,0,0,.10); }
:root[data-theme="dark"] .sm-cell-base::before { background: rgba(255,255,255,.14); }
.sm-cell-changed::before { background: #f59e0b; }
.sm-cell-checked::before { background: #16a34a; }

.sm-cell-checked{
  outline: 2px solid rgba(22,163,74,.25);
}
:root[data-theme="dark"] .sm-cell-checked{
  outline: 2px solid rgba(22,163,74,.18);
}

.sm-baseTeam{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.15;
}
.sm-assigned{
  margin-top: 6px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--text);
}

.sm-memo{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
}

.sm-meta{
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.sm-badge-mini{
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(17,24,39,.03);
  color: rgba(17,24,39,.82);
}
:root[data-theme="dark"] .sm-badge-mini{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
}
.sm-badge-changed{
  border-color: rgba(245,158,11,.40);
  background: rgba(245,158,11,.10);
}
.sm-badge-checked{
  border-color: rgba(22,163,74,.35);
  background: rgba(22,163,74,.10);
}

.sm-checkMark{
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 12px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(22,163,74,.35);
  background: rgba(22,163,74,.10);
}

.sm-checkBtn{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
}

.sm-empty{ color: var(--muted); font-weight: 700; }
.sm-areas{ display:grid; gap:10px; }
.sm-area{ padding-top:2px; }
.sm-areaName{ font-size:12px; font-weight:900; color: var(--muted); }
.sm-members{ display:grid; gap:2px; margin-top:4px; }
.sm-member{ font-size:13px; font-weight:800; line-height:1.25; }

.sm-inactive{
  background:#f3f4f6 !important;
  border:1px solid #e5e7eb !important;
}
.sm-inactive-badge{
  font-size:12px;
  font-weight:900;
  color:#6b7280;
  margin-bottom:6px;
}
.sm-inactive-reason{
  font-size:13px;
  color:#374151;
  white-space:pre-line;
  line-height:1.35;
}
/* 급식대기 '미등록' 표시 */
.sm-unset{
  background:#f3f4f6 !important;
  border:1px solid #e5e7eb !important;
}
.sm-unset-msg{
  font-size:13px;
  color:#6b7280;
  font-weight:800;
  line-height:1.35;
}
/* 부원 정보 없음 */
.sm-nomembers{
  background:#fff7ed !important;
  border:1px solid #fed7aa !important;
}
.sm-nomembers-msg{
  font-size:13px;
  color:#9a3412;
  font-weight:900;
  line-height:1.35;
}
.sm-na-item{
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:10px;
}
.sm-na-reason{
  margin:6px 0;
  white-space:pre-line;
  line-height:1.35;
}

/* =========================
   NonActivity / MealWait 리스트: 2개 정도만 보이고 내부 스크롤
========================= */

/* 리스트 컨테이너를 고정 높이로 만들고 내부 스크롤 */
#sm_na_list,
#sm_mw_list,
#sm_swap_list{
  max-height: 220px;
  overflow-y: auto;
  padding-right: 6px;
}

/* 리스트 아이템 간격이 너무 넓으면 2개가 잘 안 보일 수 있어서 살짝 정리 */
#sm_na_list .sm-na-item,
#sm_mw_list .sm-na-item{
  margin-bottom: 10px;
}

/* (선택) 스크롤바 예쁘게 */
#sm_na_list::-webkit-scrollbar,
#sm_mw_list::-webkit-scrollbar,
#sm_swap_list::-webkit-scrollbar{
  width: 10px;
}
#sm_na_list::-webkit-scrollbar-thumb,
#sm_mw_list::-webkit-scrollbar-thumb,
#sm_swap_list::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* swap 모달의 '최근 일정 변경 이력'은 기본 높이를 더 짧게 */
#smSwapModal #sm_swap_list{
  max-height: 140px;   /* 원하면 120~160 사이로 조절 */
  overflow-y: auto;
}

/* 교환/변경으로 들어온 사람 강조 */
.sm-swap-added{
  color: #f59e0b;        /* amber */
  font-weight: 900;
}
.sm-swap-icon{
  margin-left: 6px;
  font-size: 12px;
  opacity: .9;
}

/* 변경 배지와 팀라벨 사이 여백 */
.sm-cell .sm-badge-mini{
  margin-bottom: 6px;   /* 아래쪽 간격 */
  display: inline-block;
}

/* 팀 라벨 자체도 살짝 띄우기 */
.sm-baseTeam{
  margin-top: 2px;
}

.sm-badge-changed{
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #b45309;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
}

/* ✅ (수정) 아래쪽 중복 .chip 정의로 전체 테마가 깨지던 문제 해결
   - 기존 마크업이 chip-row를 쓰고 있었다면 그대로 유지
   - 다만 chip 자체는 이미 위에서 정의돼 있으니, 별도 스타일이 필요하면 chip-lite로 사용 */
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }

.chip-lite{
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  padding:8px 12px;
  font-size:14px;
  background:#fff;
  cursor:pointer;
}
.chip-lite.active{
  border-color: rgba(99,102,241,.6);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

/* =========================
   Scrollbar (Light/Dark)
   - Chrome/Edge/Safari: ::-webkit-scrollbar
   - Firefox: scrollbar-color
========================= */

/* 공통: 스크롤바 색상 변수 */
:root{
  --sb-track: rgba(17,24,39,.06);   /* 라이트: 트랙 */
  --sb-thumb: rgba(17,24,39,.18);   /* 라이트: 손잡이 */
  --sb-thumb-hover: rgba(17,24,39,.28);
}

:root[data-theme="dark"]{
  --sb-track: rgba(255,255,255,.06);   /* 다크: 트랙 */
  --sb-thumb: rgba(255,255,255,.16);   /* 다크: 손잡이 */
  --sb-thumb-hover: rgba(255,255,255,.24);
}

/* Firefox */
*{
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* Chrome/Edge/Safari */
::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track{
  background: var(--sb-track);
}
::-webkit-scrollbar-thumb{
  background: var(--sb-thumb);
  border-radius: 999px;
  border: 2px solid transparent;  /* “둥글고 얇게” 느낌 */
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background: var(--sb-thumb-hover);
}

/* =========================================================
   ✅ Global Active Tone Unify (Blue -> Dark Gray)
   - 버튼/칩/탭/사이드바 액션 등 "활성" 상태를 전부 accent 계열로 통일
========================================================= */

/* 공통 primary */
.btn-primary,
.btn.primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* 다크에서 너무 밝게 튀는 문제(글자톤/광택) 정리 */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn.primary{
  color: rgba(255,255,255,.92) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
}

/* 칩 active도 동일 톤 */
.chip.active{
  background: linear-gradient(180deg, var(--accent), var(--accent-2)) !important;
  border-color: transparent !important;
  color:#fff !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.10) !important; /* 파란 그림자 제거 */
}
:root[data-theme="dark"] .chip.active{
  box-shadow: 0 10px 24px rgba(0,0,0,.30) !important;
}

/* 사이드바 '벌점 부여하기' 같은 액션 버튼도 primary면 자동으로 통일됨.
   혹시 HTML에서 btn-soft로 되어 있으면 아래로 강제 통일 가능 */
.sidebar-actions .btn-primary,
.sidebar-actions .btn.primary{
  width:100%;
}

/* 탭(벌점 관리 페이지 탭)에서 부트스트랩 nav-pills / nav-tabs 계열도 통일 */
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active{
  background: linear-gradient(180deg, var(--accent), var(--accent-2)) !important;
  border-color: transparent !important;
  color:#fff !important;
}

/* =========================================================
   ✅ Dark mode: Bootstrap / Native controls normalize
========================================================= */

/* Bootstrap text helpers가 다크에서 검정으로 박히는 경우 */
:root[data-theme="dark"] .text-dark{ color: var(--text) !important; }
:root[data-theme="dark"] .text-muted{ color: var(--muted) !important; }

/* Bootstrap 버튼류(필터 초기화, 이전/다음 등) */
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .btn-light,
:root[data-theme="dark"] .btn-outline-dark,
:root[data-theme="dark"] .btn-secondary{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Bootstrap pagination (벌점 조회 이전/다음 등) */
:root[data-theme="dark"] .page-link{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .page-item.active .page-link{
  background: linear-gradient(180deg, var(--accent), var(--accent-2)) !important;
  border-color: transparent !important;
  color:#fff !important;
}

/* Bootstrap 테이블(벌점 부여 하단 이력/관리 페이지들) */
:root[data-theme="dark"] table,
:root[data-theme="dark"] .table{
  color: var(--text) !important;
  background: transparent !important;
}
:root[data-theme="dark"] .table thead th{
  background: rgba(255,255,255,.03) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .table tbody td{
  background: rgba(255,255,255,.02) !important;
  border-color: var(--border) !important;
}

/* Bootstrap form controls */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] textarea{
  background: var(--control-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* 드롭다운(option) 흰색 뜨는 문제(브라우저마다 100%는 아니지만 많이 개선됨) */
:root[data-theme="dark"] select option{
  background: #111418;
  color: rgba(255,255,255,.92);
}

/* 파일 선택 버튼(외출증 업로드) */
:root[data-theme="dark"] input[type="file"]{
  color: var(--text);
}
:root[data-theme="dark"] input[type="file"]::file-selector-button{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
}
:root[data-theme="dark"] input[type="file"]::file-selector-button:hover{
  background: var(--hover);
}

/* schedule manage에서 라이트 전용 색이 박힌 부분(회색/주황 박스 등) 다크 톤 보정 */
:root[data-theme="dark"] .sm-inactive,
:root[data-theme="dark"] .sm-unset{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.10) !important;
}
:root[data-theme="dark"] .sm-inactive-reason,
:root[data-theme="dark"] .sm-unset-msg{
  color: var(--muted) !important;
}
:root[data-theme="dark"] .sm-nomembers{
  background: rgba(245,158,11,.08) !important;
  border-color: rgba(245,158,11,.22) !important;
}
:root[data-theme="dark"] .sm-nomembers-msg{
  color: rgba(253,230,138,.92) !important;
}

/* ================================
   Dark mode: text visibility fix
================================ */
:root[data-theme="dark"]{
  /* 브라우저 기본 폼/스크롤/내장 UI도 다크 기준으로 */
  color-scheme: dark;
}

/* 다크에서 '검정' 혹은 '연한 회색'으로 박히는 텍스트들 강제 보정 */
:root[data-theme="dark"] .text-dark,
:root[data-theme="dark"] .text-body,
:root[data-theme="dark"] .text-black,
:root[data-theme="dark"] .text-secondary,
:root[data-theme="dark"] .text-muted{
  color: rgba(255,255,255,.88) !important;
}

/* 링크가 너무 어둡게 박히는 경우 */
:root[data-theme="dark"] a{
  color: rgba(255,255,255,.90);
}
:root[data-theme="dark"] a:hover{
  color: rgba(255,255,255,.98);
}

/* ================================
   Sidebar bottom: '벌점 조회하기' only
   - Dark: transparent/menu-tone
================================ */
:root[data-theme="dark"] .sidebar .sidebar-actions .btn:first-child,
:root[data-theme="dark"] #sidebar .sidebar-actions .btn:first-child{
  background: transparent !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.86) !important;
}

:root[data-theme="dark"] .sidebar .sidebar-actions .btn:first-child:hover,
:root[data-theme="dark"] #sidebar .sidebar-actions .btn:first-child:hover{
  background: rgba(255,255,255,.06) !important;
}

/* ================================
   Dark mode: table/card text fix
   (최근기록/목록 테이블 글씨가 어두운 문제)
================================ */

/* 페이지 기본 글자색 자체를 다크 기준으로 올려줌 */
:root[data-theme="dark"] body{
  color: rgba(255,255,255,.90);
}

/* 카드 안 텍스트가 어둡게 박히는 경우 */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .card *{
  color: inherit;
}

/* ✅ 테이블 글자(헤더/본문) 강제 보정 */
:root[data-theme="dark"] table,
:root[data-theme="dark"] thead,
:root[data-theme="dark"] tbody,
:root[data-theme="dark"] tfoot,
:root[data-theme="dark"] th,
:root[data-theme="dark"] td{
  color: rgba(255,255,255,.86) !important;
}

/* 테이블 안에서 특히 '연하게' 처리된 텍스트도 너무 죽지 않게 */
:root[data-theme="dark"] table .muted,
:root[data-theme="dark"] table .p-muted,
:root[data-theme="dark"] table small{
  color: rgba(255,255,255,.68) !important;
}

/* ============================= */
/* 카드 탭 비활성 색상 수정 */
/* ============================= */

[data-theme="dark"] .tab,
[data-theme="dark"] .nav-link {
  color: #9ca3af; /* 밝은 회색 */
}

[data-theme="dark"] .tab:hover,
[data-theme="dark"] .nav-link:hover {
  color: #e5e7eb; /* hover 시 밝게 */
}

/* 활성 탭은 기존 강조 유지 */
[data-theme="dark"] .tab.active,
[data-theme="dark"] .nav-link.active {
  color: #ffffff;
}

/* ============================= */
/* 카드 탭 글씨 색상 통일 */
/* ============================= */

/* 기본(라이트 포함) 비활성 탭 */
.tab,
.nav-link {
  color: #6b7280; /* 중간 회색 */
}

/* hover 시 */
.tab:hover,
.nav-link:hover {
  color: #111827;
}

/* 활성 탭 */
.tab.active,
.nav-link.active {
  color: #111827;
  font-weight: 600;
}

/* 다크모드 전용 */
[data-theme="dark"] .tab,
[data-theme="dark"] .nav-link {
  color: #9ca3af;
}

[data-theme="dark"] .tab:hover,
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .tab.active,
[data-theme="dark"] .nav-link.active {
  color: #ffffff;
}

/* 당일 활동 일정 카드 내부 밀도 줄이기 */
[data-theme] .today-schedule .schedule-item {
  padding: 10px 14px;   /* 기존보다 줄이기 */
  border-radius: 12px;
}

[data-theme] .today-schedule .team-title {
  font-size: 14px;
  font-weight: 600;
}

[data-theme] .today-schedule .time-label {
  font-size: 12px;
  opacity: 0.7;
}

[data-theme] .today-schedule .member-chip {
  padding: 3px 8px;
  font-size: 12px;
  border-radius: 999px;
}

[data-theme] .today-schedule {
  gap: 8px;   /* 기존 16px 이런 값이면 줄이기 */
}

/* =========================
   Dashboard - "당일 활동 일정" 카드 높이 줄이기
   (dashboard.js의 act-* 클래스 기반)
========================= */

#todayActivityCard #todayActivityBody.today-activity{
  display: flex;
  flex-direction: column;
  gap: 10px !important; /* 행 간격 줄이기 */
}

/* 한 줄(좌:시간/타이틀, 우:박스) */
#todayActivityCard #todayActivityBody .act-row{
  display: grid;
  grid-template-columns: 120px 1fr; /* 왼쪽 폭 살짝 축소 */
  gap: 10px !important;
  align-items: start;
  margin: 0 !important;
}

/* 왼쪽(타이틀 + 시간) */
#todayActivityCard #todayActivityBody .act-time{
  font-size: 13px !important;
  line-height: 1.15 !important;
  white-space: pre-line; /* js에서 \n 넣는 거 유지 */
}

/* 시간 텍스트(p-muted)도 너무 흐리면 같이 또렷하게 */
#todayActivityCard #todayActivityBody .act-time .p-muted{
  font-size: 12px !important;
  line-height: 1.1 !important;
  opacity: 0.9;
}

/* 오른쪽 박스(팀명/명단/안내문 들어가는 카드) */
#todayActivityCard #todayActivityBody .act-box{
  padding: 10px 12px !important;   /* 핵심: 패딩 줄여서 높이 감소 */
  border-radius: 14px !important;  /* 약간 덜 둥글게(선택) */
}

/* 팀명 줄 */
#todayActivityCard #todayActivityBody .act-team{
  font-size: 13px !important;
  line-height: 1.15 !important;
  margin: 0 0 6px 0 !important; /* 아래 여백 줄이기 */
}

/* 뱃지(변경/비활동 등) */
#todayActivityCard #todayActivityBody .act-badge{
  padding: 2px 8px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  border-radius: 999px !important;
}

/* 멤버 칩 리스트 */
#todayActivityCard #todayActivityBody .act-members{
  display: flex;
  flex-wrap: wrap;
  gap: 6px !important;
}

/* 멤버 칩 */
#todayActivityCard #todayActivityBody .act-member{
  padding: 4px 8px !important;     /* 칩 높이 줄이기 */
  font-size: 12px !important;
  line-height: 1.15 !important;
  border-radius: 999px !important;
}

/* 안내 문구(등록된 일정이 없습니다 / 부원 정보...) */
#todayActivityCard #todayActivityBody .act-note{
  margin-top: 6px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* 구역별 표시(점심/저녁 같은 areaMap)도 촘촘하게 */
#todayActivityCard #todayActivityBody .act-areas{
  display: flex;
  flex-direction: column;
  gap: 8px !important;
}
#todayActivityCard #todayActivityBody .act-area{
  gap: 8px !important;
}
#todayActivityCard #todayActivityBody .act-areaName{
  font-size: 12px !important;
  line-height: 1.15 !important;
}

/* =========================
   Dashboard - 초압축 버전
========================= */

/* 행 간격 더 줄이기 */
#todayActivityCard #todayActivityBody.today-activity{
  gap: 6px !important;
}

/* 한 줄 구조 더 좁게 */
#todayActivityCard #todayActivityBody .act-row{
  grid-template-columns: 95px 1fr !important; /* 왼쪽 폭 더 축소 */
  gap: 8px !important;
}

/* 왼쪽 시간/제목 */
#todayActivityCard #todayActivityBody .act-time{
  font-size: 12px !important;
  line-height: 1.05 !important;
}

/* 오른쪽 카드 박스 */
#todayActivityCard #todayActivityBody .act-box{
  padding: 8px 10px !important;  /* 더 줄임 */
  border-radius: 12px !important;
}

/* 팀명 */
#todayActivityCard #todayActivityBody .act-team{
  font-size: 12px !important;
  margin: 0 0 4px 0 !important;
}

/* 멤버 칩 */
#todayActivityCard #todayActivityBody .act-member{
  padding: 3px 7px !important;
  font-size: 11px !important;
}

/* 안내 문구 */
#todayActivityCard #todayActivityBody .act-note{
  font-size: 11px !important;
  margin-top: 4px !important;
}

.weather-extra-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px 16px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
}

.weather-extra-grid div{
  font-size:13px;
}

/* =========================
   Mobile table fix: 글자 세로찢김 방지 + 가로 스크롤
   ========================= */
.table-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
}

/* 테이블 자체는 최소 폭을 주고, 글자 한글자씩 찢어지는걸 방지 */
.table-scroll table{
  min-width: 720px; /* 필요하면 640~900 사이로 조절 */
}

.table-scroll th,
.table-scroll td{
  white-space: nowrap;
  word-break: keep-all;
}

/* 모바일에서는 테이블 스크롤이 더 자주 필요하니 살짝 여백 */
@media (max-width: 720px){
  .table-scroll{ margin-top: 8px; }
}

/* =========================
   Mobile modal: 하단 메뉴바에 가리지 않게
   ========================= */
@media (max-width: 720px){
  .modal-dialog{
    margin: 12px !important;
  }

  .modal-content{
    max-height: calc(100vh - 140px) !important; /* 상단바/여백 고려 */
    overflow: hidden;
  }

  .modal-body{
    overflow: auto !important;
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important; /* ✅ 하단바 만큼 띄우기 */
    -webkit-overflow-scrolling: touch;
  }

  /* footer 버튼 영역도 안전하게 */
  .modal-footer{
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 720px){
  /* ✅ 오른쪽 영역을 세로 스택으로 */
  .topbar-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap: 8px;
  }

  /* ✅ 테마 버튼 50% 느낌으로 축소 */
  .theme-dock{
    display:flex;
    align-items:center;
    gap: 8px;
    margin: 0 !important;
  }

  .theme-dock .theme-label{
    font-size: 10px;
    opacity: .75;
  }

  /* 버튼 자체를 작게 */
  #themeToggleBtnTop{
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
    transform: scale(0.75); /* 체감 50%까지 원하면 0.75로 더 줄여도 됨 */
    transform-origin: right center;
  }
}

/* =========================
   Dashboard: greeting "내 정보" 줄바꿈
   ========================= */
.myinfo{
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.myinfo > div{
  display:flex;
  gap: 8px;
  align-items:baseline;
}
.myinfo b{
  display:inline-block;
  min-width: 44px;
  color: var(--muted);
  font-weight: 900;
}

/* 태블릿/PC는 2열로 더 компакт하게 */
@media (min-width: 721px){
  .myinfo{
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
  }
}

/* =========================
   Dashboard: 학사일정/급식 카드 내부 항목 글씨만 축소
   (제목/부제목은 건드리지 않음)
   ========================= */
.card-body-compact{
  font-size: 13px;
  line-height: 1.25;
}
.card-body-compact .schedule-name{
  font-size: 14px; /* 제목보다 작게, 항목명은 살짝 강조 */
  font-weight: 900;
}
.card-body-compact .schedule-date{
  font-size: 12.5px;
  color: var(--muted);
}

.card-body-compact .meal-list{
  margin: 0;
  padding-left: 18px;
}
.card-body-compact .meal-list li{
  margin: 6px 0;
}

/* 모바일은 한 단계 더 줄이기 */
@media (max-width: 720px){
  .card-body-compact{ font-size: 12.5px; }
  .card-body-compact .schedule-name{ font-size: 13px; }
  .card-body-compact .schedule-date{ font-size: 12px; }
}

/* =========================================================
   Responsive Fix Pack (PC/Tablet/Mobile 공통 문제 해결)
   ========================================================= */

/* 0) 페이지 자체 가로 스크롤 방지 (카드/테이블 튀는 문제 1차 차단) */
html, body { overflow-x: hidden; }
#pageContent { overflow-x: hidden; }
.card { max-width: 100%; }

/* 1) 하단 메뉴바 높이만큼 페이지 하단 여백 확보 (모달/컨텐츠 가림 방지) */
:root { --bottom-nav-h: 92px; } /* 네 하단바 높이, 필요하면 80~110 사이로 조절 */
body{
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
}

/* 2) 카드 안에서만 테이블 가로 스크롤 되게 하는 래퍼 */
.table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 16px;      /* 끝까지 스크롤 했는데 잘려보이는 느낌 방지 */
  padding-bottom: 8px;
  box-sizing: border-box;
}
.table-wrap table{
  width: 100%;
  min-width: 640px;         /* 모바일에서 글자 세로로 떨어지는거 방지 */
  border-collapse: separate;
}

/* 3) 학사일정 '다닥다닥' 간격 */
#dash_schedule .schedule-item{ padding: 10px 0; }
#dash_schedule .schedule-line{ margin-top: 10px; }

/* 4) 태블릿: 전체 글씨 약간 축소 + 최근 벌점이력 카드 세로 폭주 방지 */
@media (min-width: 768px) and (max-width: 1024px){
  .card { font-size: 14px; }
  .p-muted { font-size: 13px; }

  /* 테이블 카드가 너무 길어지면 카드 내부에서 세로 스크롤 */
  .table-wrap{ max-height: 280px; overflow-y: auto; }
  .table-wrap table{ min-width: 720px; }
}

/* 5) 모바일: 내용 텍스트만 더 축소 (PC/태블릿에 영향 안 주게 여기서만!) */
@media (max-width: 520px){
  .card { font-size: 13px; }
  .p-muted { font-size: 12px; }

  /* 모바일 모달: 하단바에 가리지 않게 */
  .modal-dialog{
    margin: 10px;
    margin-bottom: calc(10px + env(safe-area-inset-bottom) + var(--bottom-nav-h));
  }
  .modal-body{
    max-height: calc(100vh - 240px);
    overflow: auto;
  }
  .modal-title{ font-size: 16px; }
  .modal input, .modal select, .modal textarea{
    font-size: 14px;
    padding: 10px 12px;
  }
  .modal .btn{
    font-size: 14px;
    padding: 10px 12px;
  }
}

.myinfo-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.myinfo-item .k{ color: var(--muted); font-weight: 800; margin-right: 8px; }
.myinfo-item .v{ font-weight: 900; }

@media (max-width: 520px){
  .myinfo-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
  }
  .myinfo-item{ white-space: nowrap; }
}

/* 모바일에서 주간예보는 가로 스크롤 카드로 */
@media (max-width: 720px){
  #weatherForecast{
    display: flex !important;      /* inline grid 덮어쓰기 */
    gap: 10px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  #weatherForecast > *{
    flex: 0 0 84px;                /* 예보 카드 폭(원하면 78~92 조절) */
  }
}

.notice-title{
  font-weight: 900;
  white-space: normal;     /* ✅ 줄바꿈 허용 */
  word-break: keep-all;    /* ✅ 한글 보기 좋게 */
  line-height: 1.35;
}

.notice-badges-row{
  display:flex;
  gap:8px;
  flex-wrap: nowrap;     /* ✅ 한 줄 고정 */
  overflow-x: auto;      /* ✅ 넘치면 가로 스크롤 */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.notice-badges-row .badge{
  flex: 0 0 auto;
}

@media (max-width: 720px){
  .modal-dialog{
    margin: 12px !important;
    margin-bottom: calc(12px + var(--bottom-nav-h) + env(safe-area-inset-bottom)) !important;
  }

  .modal-content{
    max-height: calc(100vh - 160px) !important;
  }

  .modal-body{
    overflow: auto !important; /* ✅ 내부 스크롤 */
  }

  .modal .btn{
    font-size: 14px !important;
    padding: 8px 10px !important;
  }

  .modal .input,
  .modal input,
  .modal select,
  .modal textarea{
    font-size: 14px !important;
    padding: 10px 12px !important;
  }
}

/* PC에서 최근 벌점 표를 더 촘촘하게 (가로스크롤 덜 나게) */
@media (min-width: 1200px){
  .recent-table-wrapper table,
  .table-wrap table{
    table-layout: fixed;   /* 열 폭 고정 */
    width: 100%;
  }

  .recent-table-wrapper th,
  .recent-table-wrapper td,
  .table-wrap th,
  .table-wrap td{
    padding: 8px 10px;     /* ✅ 간격 줄이기 */
    font-size: 13px;       /* ✅ 글씨 조금 줄이기 */
    white-space: nowrap;   /* 기본은 한 줄 */
  }

  /* ‘벌점 항목’(텍스트 긴 칼럼)은 줄바꿈 허용해서 폭 절약 */
  .recent-table-wrapper td:nth-child(4),
  .recent-table-wrapper th:nth-child(4){
    white-space: normal;
    word-break: keep-all;
  }
}

/* 태블릿에서 그리팅 카드 내부 요소 컴팩트하게 */
@media (min-width: 768px) and (max-width: 1199px){
  .greeting-card .chip,
  .greeting-card .pill{
    padding: 6px 10px;
    font-size: 12.5px;
  }

  .greeting-card .row,
  .greeting-card .item{
    gap: 8px;
  }

  .greeting-card h1,
  .greeting-card .title{
    font-size: 18px;
    line-height: 1.2;
  }

  .greeting-card .p-muted,
  .greeting-card .desc,
  .greeting-card .text{
    font-size: 13px;
    line-height: 1.35;
  }

  .greeting-card .section{
    padding: 10px 12px;
  }
}

/* 공지관리(ADMIN) 테이블 더 촘촘하게 */
@media (min-width: 1024px){
  body[data-title="공지 관리"] .table th,
  body[data-title="공지 관리"] .table td{
    padding: 8px 10px;
    font-size: 13px;
  }

  body[data-title="공지 관리"] .table h6{
    font-size: 13px;
    margin: 0;
  }

  /* "수정/삭제" 버튼도 살짝 작게 */
  body[data-title="공지 관리"] .table .btn.btn-link{
    padding: 0 6px;
    font-size: 13px;
  }
}

@media (min-width: 768px) and (max-width: 1024px){
  #greetCard *{
    font-size: 12px !important;
    line-height: 1.25 !important;
  }
  #greetCard h1, #greetCard h2, #greetCard h3{
    font-size: 16px !important;
  }
}

:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* 모바일/태블릿에서 vh 대신 dvh 사용 */
@supports (height: 100dvh){
  body{
    min-height: 100dvh;
  }
}

/* 페이지 컨텐츠가 하단 UI(하단바/브라우저UI)에 가리지 않게 */
#pageContent{
  padding-bottom: calc(var(--safe-bottom) + 90px);
}

/* 만약 사이드바가 고정 높이로 되어있다면 아래도 효과 큼 */
.sidebar,
#sidebar,
nav.sidebar{
  max-height: calc(100dvh - var(--safe-top));
  overflow: auto;
}

/* 공지사항(목록) - 모바일에서 제목/메타를 세로로 쌓아서 폭 확보 */
@media (max-width: 520px){
  .notice-card > div{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .notice-card .p-muted{
    text-align: left !important;
    white-space: normal !important;
    margin-top: 6px;
  }

  .notice-title{
    width: 100%;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

.notice-badges-row{
  display:flex;
  gap:8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 8px;
}

.notice-badges-row::-webkit-scrollbar{
  height: 6px;
}

.notice-meta{
  margin-top: 6px;
}

/* 대시보드 - 최근 벌점 이력 테이블 촘촘하게 */
@media (min-width: 1024px){
  body[data-title="대시보드"] .table th,
  body[data-title="대시보드"] .table td{
    padding: 8px 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  body[data-title="대시보드"] .table{
    table-layout: auto;
  }
}

/* =========================================================
   ✅ [중요] 모바일/태블릿(터치)에서 'body 스크롤'로 전환
   - 크롬 상단바(주소/페이지정보) 자동 숨김이 되려면
     내부 div(.main) 스크롤이 아니라 문서(body)가 스크롤되어야 함
   ========================================================= */
@media (hover: none) and (pointer: coarse){

  /* 1) 문서 스크롤 잠금 해제 */
  html, body{
    height: auto !important;
    overflow: auto !important;
  }

  /* 2) 레이아웃 100vh 고정/overflow hidden 해제 */
  .shell{
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  /* 3) 내부 스크롤 담당(.main) 해제 -> body가 스크롤하도록 */
  .main{
    height: auto !important;
    overflow: visible !important;
  }

  /* 4) 사이드바도 100vh 고정이면 주소창 변화에 악영향 줄 수 있어 완화 */
  .sidebar{
    height: auto !important;
    max-height: none !important;
  }
}

/* 상단 자동 로그아웃 "연장" 버튼 - 작게 + pill */
#logoutExtendBtn{
  padding: 6px 10px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  border-radius: 999px !important; /* 완전 둥근 양끝 */
  min-height: 28px !important;
  height: 28px !important;
}

/* 버튼 안쪽 글자/정렬이 커 보이면 이것도 */
.badge.logout-badge #logoutExtendBtn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* =========================
   대시보드: PC/태블릿에서 같은 row로 카드 높이 늘어날 때
   내부 콘텐츠(그래프/테이블)가 남는 높이를 먹도록 처리
========================= */
body[data-title="대시보드"] #dashChartCard,
body[data-title="대시보드"] #dashRecentPenaltyCard{
  display: flex;
  flex-direction: column;
}

/* 통계 카드: 그래프 영역이 남는 높이를 먹게 */
body[data-title="대시보드"] #dashChartCard .chart-body{
  flex: 1;
  min-height: 260px; /* PC/태블릿에서 세로 길이 확보 */
}

/* canvas가 부모 높이를 100% 채우도록 */
body[data-title="대시보드"] #dashChartCard .chart-body canvas{
  width: 100% !important;
  height: 100% !important;
}

/* 최근 이력: 테이블 영역이 남는 높이를 먹게 */
body[data-title="대시보드"] #dashRecentPenaltyCard .table-wrap{
  flex: 1;
  max-height: none; /* 기존 max-height가 있으면 해제 */
  overflow: auto;
}

/* 대시보드 최근 이력 테이블: 전 기기 공통으로 촘촘하게 */
body[data-title="대시보드"] #dashRecentPenaltyCard .table{
  table-layout: fixed;
}

body[data-title="대시보드"] #dashRecentPenaltyCard .table th,
body[data-title="대시보드"] #dashRecentPenaltyCard .table td{
  padding: 7px 8px;   /* ← 이게 열 간격(가로/세로) 줄이는 핵심 */
  font-size: 13px;
  vertical-align: middle;
}

body[data-title="대시보드"] .dash-who{
  line-height: 1.15;
}
body[data-title="대시보드"] .dash-who .who-sub{
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}

/* 대시보드 최근 벌점 이력: 열 간격(패딩) 줄이기 */
body[data-title="대시보드"] #dashRecentPenaltyCard .table{
  table-layout: fixed;
}

body[data-title="대시보드"] #dashRecentPenaltyCard .table th,
body[data-title="대시보드"] #dashRecentPenaltyCard .table td{
  padding: 7px 8px;     /* ← 초록 동그라미 간격 줄이는 핵심 */
  font-size: 13px;
  vertical-align: middle;
}

/* 부여자/피부여자 2줄 표시 스타일 */
body[data-title="대시보드"] .dash-who{ line-height: 1.15; }
body[data-title="대시보드"] .dash-who .who-sub{
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}

/* 열 폭을 잡아주면 “칸이 넓게 벌어지는 느낌”이 더 확 줄어 */
body[data-title="대시보드"] #dashRecentPenaltyCard .table th:nth-child(1),
body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(1){ width:110px; }

body[data-title="대시보드"] #dashRecentPenaltyCard .table th:nth-child(2),
body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(2){ width:170px; }

body[data-title="대시보드"] #dashRecentPenaltyCard .table th:nth-child(3),
body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(3){ width:170px; }

body[data-title="대시보드"] #dashRecentPenaltyCard .table th:nth-child(5),
body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(5){ width:90px; }

/* 벌점 항목 길면 ... */
body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(4){
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 같은 행에서 카드 높이가 늘어날 때, 내부가 남는 높이를 먹게 */
body[data-title="대시보드"] #dashChartCard,
body[data-title="대시보드"] #dashRecentPenaltyCard{
  display:flex;
  flex-direction:column;
}

/* 차트 영역이 남는 높이 먹게 */
body[data-title="대시보드"] #dashChartCard .chart-body{
  flex:1;
  min-height:260px;
}
body[data-title="대시보드"] #dashChartCard .chart-body canvas{
  width:100% !important;
  height:100% !important;
}

/* 테이블 영역이 남는 높이 먹게 */
body[data-title="대시보드"] #dashRecentPenaltyCard .table-wrap{
  flex:1;
  max-height:none;
  min-height:0;
  overflow:auto;
}

/* ================================
   대시보드 - 최근 벌점 이력 더 타이트하게
================================ */

/* 표 기본 설정 */
body[data-title="대시보드"] #dashRecentPenaltyCard .table{
  table-layout: fixed;
  border-collapse: collapse;
}

/* 셀 간격 대폭 축소 */
body[data-title="대시보드"] #dashRecentPenaltyCard .table th,
body[data-title="대시보드"] #dashRecentPenaltyCard .table td{
  padding: 4px 6px;      /* 🔥 핵심: 7~8px → 4~6px */
  font-size: 12.5px;     /* 살짝 축소 */
  line-height: 1.2;
  vertical-align: middle;
}

/* 날짜 */
body[data-title="대시보드"] #dashRecentPenaltyCard .table th:nth-child(1),
body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(1){
  width: 85px;
}

/* 부여자 */
body[data-title="대시보드"] #dashRecentPenaltyCard .table th:nth-child(2),
body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(2){
  width: 125px;   /* 🔥 140 → 125 */
}

/* 피부여자 */
body[data-title="대시보드"] #dashRecentPenaltyCard .table th:nth-child(3),
body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(3){
  width: 125px;   /* 🔥 동일하게 축소 */
}

/* 벌점 항목 (남는 공간 전부 차지) */
body[data-title="대시보드"] #dashRecentPenaltyCard .table th:nth-child(4),
body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(4){
  width: auto;    /* 🔥 핵심 */
}

/* 벌점 */
body[data-title="대시보드"] #dashRecentPenaltyCard .table th:nth-child(5),
body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(5){
  width: 60px;    /* 🔥 더 축소 */
}

/* 2줄 구조 더 압축 */
body[data-title="대시보드"] .dash-who{
  line-height: 1.1;
}

body[data-title="대시보드"] .dash-who .who-sub{
  font-size: 11px;        /* 팀 글씨 더 작게 */
  margin-top: 2px;
  opacity: .7;
}

/* 테이블 전체 좌우 여백 제거 */
body[data-title="대시보드"] #dashRecentPenaltyCard .table{
  margin: 0;
}

/* 카드 내부 padding 줄이기 */
body[data-title="대시보드"] #dashRecentPenaltyCard .card-body{
  padding: 8px 10px;
}

/* ===========================
   PC(큰 화면)에서는 가로 스크롤 없이 한 번에 보이게
   - 4열(벌점 항목) ↔ 5열(벌점) 간격을 극단적으로 줄임
=========================== */
@media (min-width: 1025px){
  body[data-title="대시보드"] #dashRecentPenaltyCard .table-wrap{
    overflow-x: hidden;  /* ✅ PC에서 옆 스크롤 끔 */
  }

  body[data-title="대시보드"] #dashRecentPenaltyCard .table{
    width: 100%;
    table-layout: fixed;
  }

  /* 날짜/부여자/피부여자 폭은 최소로 */
  body[data-title="대시보드"] #dashRecentPenaltyCard .table th:nth-child(1),
  body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(1){ width: 82px; }

  body[data-title="대시보드"] #dashRecentPenaltyCard .table th:nth-child(2),
  body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(2){ width: 120px; }

  body[data-title="대시보드"] #dashRecentPenaltyCard .table th:nth-child(3),
  body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(3){ width: 120px; }

  /* 벌점 열: 아주 타이트하게 */
  body[data-title="대시보드"] #dashRecentPenaltyCard .table th:nth-child(5),
  body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(5){
    width: 48px;         /* ✅ 더 줄임 */
    padding-left: 2px;   /* ✅ 4열↔5열 간격의 절반 */
    padding-right: 6px;
    text-align: right;
    white-space: nowrap;
  }

  /* 벌점 항목 열: 남는 공간 전부 먹고, 오른쪽 패딩 최소 */
  body[data-title="대시보드"] #dashRecentPenaltyCard .table th:nth-child(4),
  body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(4){
    width: auto;
    padding-right: 2px;  /* ✅ 4열↔5열 간격의 절반 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ===========================
   태블릿/모바일: 가로 스크롤 유지
   대신 4열(항목) ↔ 5열(벌점) 간격만 더 줄이기
=========================== */
@media (max-width: 1024px){
  /* 스크롤은 그대로 */
  body[data-title="대시보드"] #dashRecentPenaltyCard .table-wrap{
    overflow-x: auto;
  }

  /* 4열 오른쪽 / 5열 왼쪽 패딩만 줄여서 간격 축소 */
  body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(4),
  body[data-title="대시보드"] #dashRecentPenaltyCard .table th:nth-child(4){
    padding-right: 4px;
  }

  body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(5),
  body[data-title="대시보드"] #dashRecentPenaltyCard .table th:nth-child(5){
    padding-left: 4px;
  }
}

/* ===========================
   최근 벌점 이력: 스크롤 정책
   - 모바일/태블릿(<=1279px): 가로 스크롤 유지
   - PC(>=1280px): 가로 스크롤 제거
=========================== */

/* 모바일+태블릿 */
@media (max-width: 1279px){
  body[data-title="대시보드"] #dashRecentPenaltyCard .table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 테이블이 실제로 overflow 되게 "최소 너비"를 줘야 스크롤이 생김 */
  body[data-title="대시보드"] #dashRecentPenaltyCard .table{
    width: max-content;       /* 내용 너비만큼 */
    min-width: 720px;         /* 태블릿에서 너무 안 넘치면 스크롤이 안 생겨서 최소폭 강제 */
  }
}

/* PC */
@media (min-width: 1280px){
  body[data-title="대시보드"] #dashRecentPenaltyCard .table-wrap{
    overflow-x: hidden;
  }

  body[data-title="대시보드"] #dashRecentPenaltyCard .table{
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }
}

/* ===========================
   최근 벌점 이력: 행 높이(세로)를 조금 키워서 아래 여백 줄이기
=========================== */
body[data-title="대시보드"] #dashRecentPenaltyCard .table>:not(caption)>*>*{
  padding-top: 8px !important;   /* 세로만 증가 */
  padding-bottom: 8px !important;
  line-height: 1.25 !important;
}

/* 2줄(팀) 부분도 살짝 숨 쉴 공간 */
body[data-title="대시보드"] #dashRecentPenaltyCard .dash-who .who-sub{
  margin-top: 3px !important;
}

/* ===========================
   태블릿/모바일: 4열(벌점 항목) ↔ 5열(벌점) 간격 강제 축소
   - Bootstrap padding 덮기 위해 !important 사용
=========================== */
@media (max-width: 1279px){

  body[data-title="대시보드"] #dashRecentPenaltyCard .table{
    table-layout: fixed !important;
  }

  /* 5열(벌점) 폭을 더 강하게 최소화 */
  body[data-title="대시보드"] #dashRecentPenaltyCard .table th:nth-child(5),
  body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(5){
    width: 48px !important;       /* ✅ 더 좁게 */
    padding-left: 2px !important; /* ✅ 간격 핵심 */
    padding-right: 6px !important;
    white-space: nowrap;
    text-align: right;
  }

  /* 4열(벌점 항목) 오른쪽 padding을 거의 제거 */
  body[data-title="대시보드"] #dashRecentPenaltyCard .table th:nth-child(4),
  body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(4){
    padding-right: 2px !important; /* ✅ 간격 핵심 */
  }

  /* 혹시 4열이 내용 때문에 과하게 넓어지면 ... 처리로 폭 폭주 방지 */
  body[data-title="대시보드"] #dashRecentPenaltyCard .table td:nth-child(4){
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 1px; /* table-layout fixed가 아닐 때도 폭 폭주 억제용 트릭 */
  }
}

/* =========================================================
   [FINAL OVERRIDE] Dashboard - 최근 벌점 이력 테이블 최종 고정
   (반드시 app.css 맨 아래에 붙여넣기)
========================================================= */

/* 0) 최근 벌점 카드가 남는 높이를 테이블이 먹게 */
body[data-title="대시보드"] #dashRecentPenaltyCard{
  display:flex;
  flex-direction:column;
}
body[data-title="대시보드"] #dashRecentPenaltyCard .table-wrap{
  flex:1;
  min-height:0;
  overflow-x:auto;              /* ✅ 기본은 가로 스크롤 가능 */
  overflow-y:hidden;            /* 세로 스크롤은 필요 시만 켜도 됨 */
  padding-bottom: 0 !important; /* ✅ 아래 여백 제거 */
}

/* 1) 테이블: 기본(공통) - 촘촘하게 + 열 폭이 이상하게 벌어지는 것 방지 */
body[data-title="대시보드"] #dashRecentPenaltyCard table.table{
  table-layout: fixed !important;
  width: 100% !important;
  margin: 0 !important;
}

/* 2) 셀 기본 패딩(세로는 조금 키워서 아래 여백 줄이기) */
body[data-title="대시보드"] #dashRecentPenaltyCard table.table th,
body[data-title="대시보드"] #dashRecentPenaltyCard table.table td{
  padding: 10px 8px !important;   /* ✅ 행 높이 ↑ (아래 빈공간 ↓) */
  line-height: 1.25 !important;
  vertical-align: middle !important;
  white-space: nowrap;
}

/* 3) “벌점 항목(4열) ↔ 벌점(5열)” 간격을 강제로 줄이기 */
body[data-title="대시보드"] #dashRecentPenaltyCard table.table th:nth-child(4),
body[data-title="대시보드"] #dashRecentPenaltyCard table.table td:nth-child(4){
  padding-right: 2px !important;  /* ✅ 4열 오른쪽 패딩 최소 */
}

body[data-title="대시보드"] #dashRecentPenaltyCard table.table th:nth-child(5),
body[data-title="대시보드"] #dashRecentPenaltyCard table.table td:nth-child(5){
  width: 56px !important;         /* ✅ 5열 폭을 확 줄임 */
  padding-left: 2px !important;   /* ✅ 5열 왼쪽 패딩 최소 */
  padding-right: 6px !important;
  text-align: right !important;
  font-weight: 900;
}

/* 4) PC(큰 화면): 가로 스크롤 없이 한 번에 보이게 */
@media (min-width: 1280px){
  body[data-title="대시보드"] #dashRecentPenaltyCard .table-wrap{
    overflow-x: hidden !important;    /* ✅ PC는 스크롤 끔 */
  }

  body[data-title="대시보드"] #dashRecentPenaltyCard table.table{
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* 5) 태블릿/모바일: 가로 스크롤 “무조건” 생기게 (태블릿에서 안 생기던 문제 해결) */
@media (max-width: 1279px){
  body[data-title="대시보드"] #dashRecentPenaltyCard .table-wrap{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ✅ 여기 핵심: 테이블이 ‘컨테이너보다 커야’ 스크롤이 생김 */
  body[data-title="대시보드"] #dashRecentPenaltyCard table.table{
    width: max-content !important;
    min-width: 860px !important;      /* ✅ 태블릿에서도 확실히 넘치게 */
  }
}

/* =========================================================
   FIX: 태블릿/모바일에서 4열(벌점 항목) ↔ 5열(벌점) 간격 과도하게 벌어지는 문제
   - 원인: 4열이 남는 폭을 과하게 먹음(특히 width:max-content류)
   - 해결: 태블릿/모바일에서는 열 폭을 명시적으로 고정하고
           4열 오른쪽/5열 왼쪽 padding을 최소화
   (반드시 app.css 맨 아래에)
========================================================= */

@media (max-width: 1279px){

  /* 1) 스크롤 컨테이너는 유지 */
  body[data-title="대시보드"] #dashRecentPenaltyCard .table-wrap{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 2) max-content 같은 규칙을 ‘무조건’ 덮어씀
        -> width는 100%로 두되, min-width로 넘치게 만들어 스크롤 생성 */
  body[data-title="대시보드"] #dashRecentPenaltyCard table.table{
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 860px !important;     /* 태블릿에서도 확실히 overflow */
  }

  /* 3) 열 폭을 명시적으로 잡아서 4열이 폭주하지 못하게 */
  body[data-title="대시보드"] #dashRecentPenaltyCard table.table th:nth-child(1),
  body[data-title="대시보드"] #dashRecentPenaltyCard table.table td:nth-child(1){ width: 92px !important; }

  body[data-title="대시보드"] #dashRecentPenaltyCard table.table th:nth-child(2),
  body[data-title="대시보드"] #dashRecentPenaltyCard table.table td:nth-child(2){ width: 150px !important; }

  body[data-title="대시보드"] #dashRecentPenaltyCard table.table th:nth-child(3),
  body[data-title="대시보드"] #dashRecentPenaltyCard table.table td:nth-child(3){ width: 150px !important; }

  /* ✅ 핵심: 벌점 항목(4열)을 “고정폭”으로 (남는 폭 독식 금지) */
  body[data-title="대시보드"] #dashRecentPenaltyCard table.table th:nth-child(4),
  body[data-title="대시보드"] #dashRecentPenaltyCard table.table td:nth-child(4){
    width: 300px !important;         /* 여기 숫자만 취향대로 260~340 조절 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 2px !important;   /* ✅ 4↔5 간격 줄이기 */
  }

  /* ✅ 핵심: 벌점(5열) 폭 최소 + 왼쪽 패딩 최소 */
  body[data-title="대시보드"] #dashRecentPenaltyCard table.table th:nth-child(5),
  body[data-title="대시보드"] #dashRecentPenaltyCard table.table td:nth-child(5){
    width: 56px !important;
    white-space: nowrap;
    text-align: right !important;
    padding-left: 2px !important;    /* ✅ 4↔5 간격 줄이기 */
  }
}

/* =========================================================
   FINAL: 최근 벌점 이력 4열(벌점 항목) ↔ 5열(벌점) 간격 강제 축소
   - 모바일/태블릿: 가로 스크롤 유지 + 간격만 줄임
   - PC: 기존대로(필요하면 여기서도 맞출 수 있음)
========================================================= */

@media (max-width: 1279px){

  /* 스크롤 유지(태블릿 포함) */
  body[data-title="대시보드"] #dashRecentPenaltyCard .table-wrap{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 테이블이 실제로 넘치게 해서 스크롤 조건 확보 */
  body[data-title="대시보드"] #dashRecentPenaltyTable{
    table-layout: fixed !important;
    min-width: 860px !important;
    width: max-content !important; /* 스크롤 유지 */
  }

  /* ✅ 핵심: 4열 오른쪽 패딩 최소 / 5열 왼쪽 패딩 최소 */
  body[data-title="대시보드"] #dashRecentPenaltyTable th:nth-child(4),
  body[data-title="대시보드"] #dashRecentPenaltyTable td:nth-child(4){
    padding-right: 2px !important;
  }

  body[data-title="대시보드"] #dashRecentPenaltyTable th:nth-child(5),
  body[data-title="대시보드"] #dashRecentPenaltyTable td:nth-child(5){
    width: 54px !important;       /* ✅ 5열 폭 최소 */
    padding-left: 2px !important; /* ✅ 간격 최소 */
    text-align: right !important;
    white-space: nowrap !important;
  }
}

/* =========================================================
   [Dashboard FIX] 태블릿/모바일에서 벌점 항목(4열) ↔ 벌점(5열) 간격 축소
   - 오른쪽으로 스크롤했을 때 4열이 남는 폭을 과하게 먹어서 벌점이 멀어 보이는 현상 해결
========================================================= */
@media (max-width: 1279px){
  body[data-title="대시보드"] #dashRecentPenaltyTable{
    table-layout: fixed !important;
    /* 스크롤은 유지하되, 열 폭을 우리가 통제 */
    min-width: 860px !important;
  }

  /* (선택) 앞열 폭도 같이 고정해주면 스크롤/간격이 더 안정적 */
  body[data-title="대시보드"] #dashRecentPenaltyTable th:nth-child(1),
  body[data-title="대시보드"] #dashRecentPenaltyTable td:nth-child(1){ width: 92px !important; }

  body[data-title="대시보드"] #dashRecentPenaltyTable th:nth-child(2),
  body[data-title="대시보드"] #dashRecentPenaltyTable td:nth-child(2){ width: 150px !important; }

  body[data-title="대시보드"] #dashRecentPenaltyTable th:nth-child(3),
  body[data-title="대시보드"] #dashRecentPenaltyTable td:nth-child(3){ width: 150px !important; }

  /* ✅ 핵심: 4열(벌점 항목)이 폭을 독식하지 못하게 '고정폭' */
  body[data-title="대시보드"] #dashRecentPenaltyTable th:nth-child(4),
  body[data-title="대시보드"] #dashRecentPenaltyTable td:nth-child(4){
    width: 260px !important;          /* 여기 숫자만 취향대로 220~320 조절 */
    padding-right: 2px !important;    /* 4↔5 간격 줄이는 핵심 */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ✅ 핵심: 5열(벌점)을 아주 타이트하게 */
  body[data-title="대시보드"] #dashRecentPenaltyTable th:nth-child(5),
  body[data-title="대시보드"] #dashRecentPenaltyTable td:nth-child(5){
    width: 56px !important;
    padding-left: 2px !important;     /* 4↔5 간격 줄이는 핵심 */
    padding-right: 6px !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
}

/* =========================================================
   [Dashboard FIX] 태블릿에서 그리팅 카드 내용이 과하게 커지는 문제
   - iPad 가로(>1024px)에서도 적용되도록 범위를 1279px까지 확장
========================================================= */
@media (min-width: 768px) and (max-width: 1279px){
  /* 제목/부제 간격도 살짝 압축 */
  body[data-title="대시보드"] #greetCard #greet_head{
    font-size: 18px !important;
    margin-top: 8px !important;
  }
  body[data-title="대시보드"] #greetCard #greet_sub{
    font-size: 12.5px !important;
    margin-top: 4px !important;
  }

  /* hr 간격 줄이기 */
  body[data-title="대시보드"] #greetCard .hr{
    margin: 10px 0 !important;
  }

  /* 노란색으로 동그라미 친 리스트(본문) 자체를 컴팩트하게 */
  body[data-title="대시보드"] #greetCard .greet-list{
    gap: 8px !important;
  }

  body[data-title="대시보드"] #greetCard .greet-item{
    gap: 8px !important;
  }

  body[data-title="대시보드"] #greetCard .greet-ico{
    width: 22px !important;
    height: 22px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
  }

  body[data-title="대시보드"] #greetCard .greet-text{
    font-size: 12.5px !important;
    line-height: 1.25 !important;
  }

  /* “나의 정보” 블록이 특히 커 보이면 여기로 눌러줌 */
  body[data-title="대시보드"] #greetCard .greet-text b{
    font-weight: 800 !important;
  }
}

/* =========================================================
   [Greet Card] 굵기 규칙 & 예보 줄바꿈
   - PC/태블릿/모바일 공통 굵기 기준
   - 태블릿/모바일에서 아침/점심/저녁 줄바꿈
========================================================= */

/* 공통: muted(얇게) */
body[data-title="대시보드"] #greetCard .muted{
  font-weight: 400;
  opacity: .9;
}

/* 나의 정보 타이틀(기존처럼 굵게) */
body[data-title="대시보드"] #greetCard .myinfo-title{
  font-weight: 900;
  margin-bottom: 6px;
}

/* ✅ 나의 정보: k(라벨) 얇게, v(값) 굵게 */
body[data-title="대시보드"] #greetCard .myinfo-item .k{
  font-weight: 400;
  opacity: .9;
}
body[data-title="대시보드"] #greetCard .myinfo-item .v{
  font-weight: 800;
}

/* ✅ 바로가기: 라벨 얇게, 링크 굵게 */
body[data-title="대시보드"] #greetCard .ql-label{
  font-weight: 400;
  opacity: .9;
}
body[data-title="대시보드"] #greetCard a.ql-link{
  font-weight: 800;
  text-decoration: none;
}
body[data-title="대시보드"] #greetCard a.ql-link:hover{
  text-decoration: underline;
}
body[data-title="대시보드"] #greetCard .ql-sep{
  font-weight: 400;
  opacity: .8;
  margin: 0 6px;
}

/* ✅ 활동 시간대 예보: 라벨 얇게, 예보 굵게 */
body[data-title="대시보드"] #greetCard .wx-label{
  font-weight: 400;
  opacity: .9;
}
body[data-title="대시보드"] #greetCard .wx-strong{
  font-weight: 900;
}

/* 기본(PC): 한 줄 유지 */
body[data-title="대시보드"] #greetCard .wx-part{
  display: inline;
}
body[data-title="대시보드"] #greetCard .wx-dot{
  display: inline;
}

/* ✅ 태블릿/모바일: 아침/점심/저녁 줄바꿈 */
@media (max-width: 1279px){
  body[data-title="대시보드"] #greetCard .wx-part{
    display: block;
    margin-top: 2px;
  }
  body[data-title="대시보드"] #greetCard .wx-dot{
    display: none; /* 줄바꿈이면 점(.) 구분자 숨김 */
  }
}

/* =========================================================
   [Tablet FIX] 태블릿에서 그리팅 카드 굵기 규칙이 안 먹는 문제 강제 오버라이드
   - iPad/갤탭 가로폭(1360~1366)까지 커버
========================================================= */
@media (min-width: 768px) and (max-width: 1439px){

  /* 최근 공지 (문장 굵게 / 제목 얇게) */
  body[data-title="대시보드"] #greetCard .muted{
    font-weight: 400 !important;
    opacity: .9 !important;
  }

  /* 활동 시간대 예보: 라벨 얇게, 예보 굵게 */
  body[data-title="대시보드"] #greetCard .wx-label{
    font-weight: 400 !important;
    opacity: .9 !important;
  }
  body[data-title="대시보드"] #greetCard .wx-strong{
    font-weight: 900 !important;
  }

  /* ✅ 태블릿에서도 예보 줄바꿈 */
  body[data-title="대시보드"] #greetCard .wx-part{
    display: block !important;
    margin-top: 2px !important;
  }
  body[data-title="대시보드"] #greetCard .wx-dot{
    display: none !important;
  }

  /* 나의 정보: 라벨 얇게 / 값 굵게 */
  body[data-title="대시보드"] #greetCard .myinfo-item .k{
    font-weight: 400 !important;
    opacity: .9 !important;
  }
  body[data-title="대시보드"] #greetCard .myinfo-item .v{
    font-weight: 800 !important;
  }

  /* 바로가기: 라벨 얇게 / 링크 굵게 */
  body[data-title="대시보드"] #greetCard .ql-label{
    font-weight: 400 !important;
    opacity: .9 !important;
  }
  body[data-title="대시보드"] #greetCard a.ql-link{
    font-weight: 800 !important;
  }
}

/* =========================================================
   [Dashboard] 최신 공지 카드: 내용 줄 수 + 글자 크기 + 버튼 정렬
   - PC/태블릿: 최대 12줄
   - 모바일: 3줄 유지
========================================================= */

/* 공통: 자세히 보기 버튼 정렬 */
body[data-title="대시보드"] #latestNoticeCard .notice-actions{
  display: flex;
  justify-content: flex-end;
}

/* 기본(PC/태블릿): 최대 12줄 */
body[data-title="대시보드"] #latestNoticeCard .notice-clamp{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;

  -webkit-line-clamp: 12;
  line-clamp: 12;
}

/* PC/태블릿: 내용 글자 크기 살짝 업 */
@media (min-width: 768px){
  body[data-title="대시보드"] #latestNoticeCard .notice-body{
    font-size: 14.5px;   /* 취향: 14~15.5 */
    line-height: 1.55;
  }
}

/* 모바일: 기존처럼 3줄 유지 + 크기 건드리지 않음 */
@media (max-width: 767px){
  body[data-title="대시보드"] #latestNoticeCard .notice-clamp{
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* =========================================================
   [Tablet FIX] 최신 공지 본문이 태블릿에서 전체 표시되는 문제(Clamp 강제)
========================================================= */
@media (min-width: 768px) and (max-width: 1439px){
  body[data-title="대시보드"] #latestNoticeCard #latestNoticeBody.notice-clamp{
    /* clamp가 먹기 위한 4종 세트 */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;

    -webkit-line-clamp: 12 !important;
    line-clamp: 12 !important;

    /* 혹시 태블릿 구간에서 다른 곳이 풀어버렸을 수 있어서 방어 */
    white-space: normal !important;
  }
}

/* =========================================================
   [Schedule Manage] 셀 내용 줄바꿈/가로스크롤 최적화
   - 문구(부원정보 없음/등록된 일정 없음)는 줄바꿈
   - 이름(학번)🔁 라인은 한 줄 고정
   - 태블릿/모바일은 칸 폭을 키우고 표는 가로 스크롤
========================================================= */

/* 1) 생활지도 일정 페이지에서는 td 기본을 줄바꿈 허용으로 */
body[data-title="생활지도 일정"] #sm_weekTable td,
body[data-title="생활지도 일정"] #sm_weekTable th{
  white-space: normal !important;
}

/* 2) "부원 정보가 등록되지..." / "등록된 일정이 없습니다." 같은 문구는 안전하게 줄바꿈 */
body[data-title="생활지도 일정"] #sm_weekTable .sm-nomembers-msg,
body[data-title="생활지도 일정"] #sm_weekTable .sm-unset-msg,
body[data-title="생활지도 일정"] #sm_weekTable .sm-empty{
  white-space: normal !important;
  word-break: keep-all;
  overflow-wrap: anywhere;       /* 아주 좁은 화면에서도 삐져나옴 방지 */
}

/* 3) ✅ 이름(학번) + 🔁 는 절대 줄바꿈 안 되게 (한 줄 고정) */
body[data-title="생활지도 일정"] #sm_weekTable .sm-member{
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;       /* 혹시 극단적으로 길면 말줄임 */
}

/* 4) 표가 길어질 때, 카드 안에서만 가로 스크롤 가능하게 (이미 있지만 확실히) */
body[data-title="생활지도 일정"] .table-wrap{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* =========================
   태블릿: 칸 폭을 키워서 "최준규 (2217)🔁" 같은 게 1줄로 보이게
   -> 대신 표는 가로 스크롤
========================= */
@media (min-width: 768px) and (max-width: 1439px){
  body[data-title="생활지도 일정"] #sm_weekTable{
    min-width: 980px;            /* 표 전체 최소 폭(취향: 920~1100) */
  }

  /* 왼쪽 구역/시간 열 */
  body[data-title="생활지도 일정"] #sm_weekTable th:first-child,
  body[data-title="생활지도 일정"] #sm_weekTable td:first-child{
    min-width: 160px;
  }

  /* 월~금 칸 폭(핵심) */
  body[data-title="생활지도 일정"] #sm_weekTable th:not(:first-child),
  body[data-title="생활지도 일정"] #sm_weekTable td:not(:first-child){
    min-width: 200px;            /* 핵심: 여기서 190~230 조절 */
  }
}

/* =========================
   모바일: 어차피 가로 스크롤이니까 칸을 더 넓게
========================= */
@media (max-width: 767px){
  body[data-title="생활지도 일정"] #sm_weekTable{
    min-width: 1180px;           /* 모바일에서 더 넓게 (취향: 1100~1400) */
  }

  body[data-title="생활지도 일정"] #sm_weekTable th:first-child,
  body[data-title="생활지도 일정"] #sm_weekTable td:first-child{
    min-width: 160px;
  }

  body[data-title="생활지도 일정"] #sm_weekTable th:not(:first-child),
  body[data-title="생활지도 일정"] #sm_weekTable td:not(:first-child){
    min-width: 210px;            /* 모바일 칸 폭(핵심) */
  }
}

/* ======================== */

/* =========================================================
   [TABLET ONLY] 사이드바: 상단(브랜드) + 하단(버튼) 고정, 메뉴만 스크롤
   - body 스크롤 유지(= 크롬 상단 페이지정보/주소창 숨김 유지)
   - 태블릿에서만 sidebar 높이를 다시 100dvh로 고정해서 구조 복원
========================================================= */
@media (hover: none) and (pointer: coarse) and (min-width: 768px) and (max-width: 1439px){

  /* ✅ 사이드바를 화면 높이 기준으로 고정(하지만 문서 스크롤은 body가 담당) */
  .sidebar{
    position: sticky !important;
    top: 0 !important;

    height: 100dvh !important;
    max-height: calc(100dvh - var(--safe-top)) !important;

    /* 사이드바 자체가 스크롤 잡아먹지 않게 -> 메뉴 영역만 스크롤 */
    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;
  }

  /* ✅ 상단 브랜드(빨간 동그라미) 고정 */
  .sidebar .brand{
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2)) !important;
  }

  /* 로고 아래 구분선도 상단에 같이 보이게 하고 싶으면(선택) */
  .sidebar .sidebar-divider{
    position: sticky !important;
    top: 72px !important; /* 브랜드 높이에 맞춰 필요하면 64~86 조절 */
    z-index: 4 !important;
    background: var(--sidebar-bg) !important;
  }

  /* ✅ 메뉴(주황 동그라미)만 스크롤 */
  .sidebar .sidebar-scroll{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ✅ 하단 버튼(빨간 동그라미) 고정 */
  .sidebar .sidebar-actions{
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2)) !important;

    /* 하단 안전영역 보정 */
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }
}

/* =========================================================
   [TABLET] 스크롤해도 사이드바(메뉴바) 고정 (fixed)
   - 사이드바: 고정
   - 메뉴 리스트: 내부 스크롤
   - 본문(main): 사이드바 폭만큼 밀기
========================================================= */
@media (hover: none) and (pointer: coarse) and (min-width: 768px) and (max-width: 1439px){

  /* 1) 사이드바를 화면에 완전 고정 */
  .sidebar{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;

    height: 100dvh !important;
    width: var(--sidebar-w, 280px) !important; /* 프로젝트에 변수 없으면 280px로 고정됨 */
    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;
    z-index: 999 !important;
  }

  /* 2) 상단 브랜드 고정 */
  .sidebar .brand{
    flex: 0 0 auto !important;
  }

  /* 3) 메뉴만 스크롤 */
  .sidebar .sidebar-scroll{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 4) 하단 버튼 고정 */
  .sidebar .sidebar-actions{
    flex: 0 0 auto !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }

  /* 5) 본문을 사이드바 폭만큼 오른쪽으로 밀기 */
  .main{
    margin-left: var(--sidebar-w, 280px) !important;
  }
}

/* =========================================================
   [Mobile Footer Logo] 로그인 제외 전 페이지 하단 로고 (모바일 전용)
========================================================= */
.mobile-footer-logo{
  display: none;
  text-align: center;
  padding: 26px 0 calc(110px + env(safe-area-inset-bottom));
  opacity: .35;
}

.mobile-footer-logo .mfl-img{
  height: 28px;
  width: auto;
  max-width: 72%;
}

/* ✅ 모바일 기준 너 프로젝트는 720px 쓰니까 이걸로 */
@media (max-width: 720px){
  .mobile-footer-logo{ display: block; }
}

/* 로그인 로고 중앙 정렬 */
.login-logo-wrap{
  width: 100%;
  display: flex;
  justify-content: center;   /* 가로 중앙 */
  align-items: center;
  margin-top: 18px;
}

.login-logo{
  display: block;
  height: clamp(60px, 8vw, 75px);
  width: auto;
  opacity: 1;
}

/* =========================
   Toast (success popup)
   ========================= */
.toast-host{
  position: fixed;
  right: 18px;
  bottom: 86px;            /* 하단 UI(테마 버튼 등) 위로 살짝 */
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;    /* 클릭 방해 X */
}

.toast-host .toast{
  pointer-events: auto;    /* 토스트 자체는 닫기 버튼 클릭 가능 */
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 14px;
}

.toast-host .toast .toast-body{
  font-weight: 800;
}

/* 모바일에서는 좌우 꽉 + 하단 조금 더 위로 */
@media (max-width: 720px){
  .toast-host{
    left: 12px;
    right: 12px;
    bottom: 96px;
  }
}

.site-footer {
  background-color: #11111100;
  color: #ccc;
  padding: 20px 0;
  text-align: center;
  font-size: 14px;
}

.site-footer a {
  color: #4da3ff;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* 공통 */
.site-footer{
  width: 100%;
  padding: 18px 0;
  margin-top: 24px;
  text-align: center;

  background: none;
  backdrop-filter: blur(6px);
}

.site-footer__inner{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  text-align: center;

  flex-wrap: wrap;            /* 좁아지면 줄바꿈 허용 */
}

.site-footer__copy,
.site-footer__link{
  color: #fff !important;
  font-size: 13px;
  line-height: 1.4;
}

.site-footer__link{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 태블릿 이하: 조금 줄이기 */
@media (max-width: 1024px){
  .site-footer{
    padding: 14px 0;
  }
  .site-footer__inner{
    gap: 10px;
  }
  .site-footer__copy,
  .site-footer__link{
    font-size: 12px;
  }
}

/* 모바일: 더 줄이고 한 줄이 힘들면 세로 정렬 */
@media (max-width: 600px){
  .site-footer{
    padding: 10px 0;
  }
  .site-footer__inner{
    gap: 6px;
    flex-direction: column;   /* 모바일은 세로로 깔끔하게 */
  }
  .site-footer__copy,
  .site-footer__link{
    font-size: 11px;
  }
}

/* 기본(라이트) */
.site-footer__copy,
.site-footer__link{
  color: #111 !important;   /* 라이트에서 잘 보이게 */
}

/* 다크 모드일 때만 흰색 */
html[data-theme="dark"] .site-footer__copy,
html[data-theme="dark"] .site-footer__link{
  color: #fff !important;
}