:root {
  --primary-color: #4a90e2;
  --bg-color: #f8fafc;
  --card-bg: #ffffff;
  --text-main: #2d3436;
  --text-muted: #636e72;
  --accent-color: #00cec9;
  --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 20px 35px rgba(0, 0, 0, 0.1);
  --border-radius: 16px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --border-color: #e2e8f0;
  --header-bg: rgba(255, 255, 255, 0.82);
  --widget-bg: rgba(255, 255, 255, 0.7);
  --widget-bg-hover: rgba(255, 255, 255, 0.9);
  --widget-border: rgba(255, 255, 255, 0.4);
  --table-header: #f8fafc;
}

body.dark-mode {
  --bg-color: #020617;
  --bg-gradient: radial-gradient(circle at top right, #1e293b, #020617);
  --card-bg: #1e293b;
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 20px 35px rgba(0, 0, 0, 0.5);
  --border-color: #334155;
  --header-bg: rgba(15, 23, 42, 0.85);
  --widget-bg: rgba(30, 41, 59, 0.7);
  --widget-bg-hover: rgba(30, 41, 59, 0.9);
  --widget-border: rgba(255, 255, 255, 0.05);
  --table-header: #334155;
}

/* === Header Container & Inner Redesign === */
.header-container {
  width: 100%;
  margin: 0 auto;
  position: relative;
  min-height: 85px;
  display: flex;
  align-items: center;
}

.header-inner {
  width: 100%;
  max-width: 1200px; /* 諛붾줈媛€湲??뱀뀡怨??숈씪??理쒕? ?덈? */
  margin: 0 auto;
  padding: 0 1rem;   /* 諛붾줈媛€湲??뱀뀡怨??숈씪??醫뚯슦 ?щ갚 */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100%;
}

.header-user-panel {
  position: absolute;
  right: calc(1rem - 120px); /* 20px 異붽? ?대룞?섏뿬 ?꾩튂 理쒖쟻??*/
  top: 50%;          /* ?ㅻ뜑 以묒븰??湲곗? */
  transform: translateY(-20px); /* 湲곗〈 -15px?먯꽌 ?꾩そ?쇰줈 5px ???대룞 */
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 紐⑤뱺 ?붿냼瑜??곗륫 ?좎뿉 留욎땄 */
  gap: 0.5rem;
  z-index: 6000;
  pointer-events: none;
}

.header-user-panel > div, 
.header-user-panel > button {
  pointer-events: auto;
}

.header-top-row {
  display: flex;
  align-items: center;
  gap: 0.8rem; /* 踰꾪듉 ?ъ씠???곸젅??媛꾧꺽 */
}

.user-greeting {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  opacity: 0.9;
  letter-spacing: -0.3px;
  margin-top: 2px;
  white-space: nowrap;
}

.header-admin-crown {
  position: absolute;
  top: -4px;
  right: -4px;
  color: #ffd700;
  font-size: 0.85rem;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.3));
  pointer-events: none;
  z-index: 10;
  animation: crown-glow 2s infinite alternate;
}

@keyframes crown-glow {
  from { filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.4)); }
  to { filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8)); }
}

/* Silver Crown for Sub-Admin */
.header-admin-crown.silver {
  color: #c0c0c0; /* Silver */
  animation: crown-glow-silver 2s infinite alternate;
}

@keyframes crown-glow-silver {
  from { filter: drop-shadow(0 0 2px rgba(192, 192, 192, 0.4)); }
  to { filter: drop-shadow(0 0 6px rgba(192, 192, 192, 0.8)); }
}

.badge-role-admin { background: #fee2e2; color: #ef4444; border: 1px solid #fecaca; }
.badge-role-sub-admin { background: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb; }
.badge-role-user { background: #f0fdf4; color: #22c55e; border: 1px solid #bbf7d0; }

/* Activity Log Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.badge-blue { background: #e0e7ff; color: #4338ca; }
.badge-red { background: #fee2e2; color: #dc2626; }
.badge-green { background: #dcfce7; color: #16a34a; }
.badge-orange { background: #fff7ed; color: #ea580c; }
.badge-gray { background: #f3f4f6; color: #4b5563; }


/* === Admin Badge Styles (Profile Modal) === */

/* === Admin Badge Styles (Profile Modal) === */
.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-left: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  background: linear-gradient(135deg, #ffd700, #fdb931);
  color: #7b5802;
  border: 1px solid #eec800;
}

.admin-badge.silver {
  background: linear-gradient(135deg, #e0e0e0, #bdbdbd);
  color: #616161;
  border: 1px solid #9e9e9e;
}

.admin-badge i {
  font-size: 0.8rem;
}

/* === Theme Switch (Original Restored & Enhanced) === */
.theme-switch {
  display: inline-block;
  height: 30px;
  position: relative;
  width: 60px;
}

.theme-switch input {
  display: none;
}

/* Base Slider (Used by Theme Switch) */
.slider {
  background-color: #e2e8f0;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 5px;
}

.slider i {
  font-size: 14px;
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 22px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 22px;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

input:checked + .slider {
  background-color: #334155;
}

input:checked + .slider:before {
  transform: translateX(30px);
}

/* === Form Toggle Switch (Overrides for .switch class) === */



/* === Form Toggle Switch (Overrides for .switch class) === */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;  /* Match Register Form */
  height: 26px; /* Match Register Form */
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

/* Scoped Slider for Form Toggles - Use HIGH Specificity */
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1; 
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  display: block; /* Override flex */
  padding: 0; /* Remove padding */
}

/* Specificity Match: .slider.round:before is 0-2-1. This is 0-3-1 */
.switch .slider.round:before, 
.switch .slider:before {
  position: absolute;
  content: "";
  height: 20px; /* Match Register Form */
  width: 20px;  /* Match Register Form */
  left: 3px;    /* Match Register Form */
  bottom: 3px;  /* Match Register Form */
  background-color: white;
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
  z-index: 2;
}

/* Active State for Form Toggles */
.switch input:checked + .slider {
  background-color: var(--primary-color);
}

.switch input:checked + .slider.round:before,
.switch input:checked + .slider:before {
  transform: translateX(22px); /* Match Register Form */
}

.toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 5px;
}

.toggle-label-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

.slider .fa-sun { color: #f59e0b; }
.slider .fa-moon { color: #94a3b8; }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  font-family: "Inter", "Outfit", sans-serif;
  background: var(--bg-gradient, var(--bg-color));
  color: var(--text-main);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  transition: background 0.6s ease, color 0.4s ease; /* Enhanced transition for rich feel */
  background-attachment: fixed;
}

html {
  scroll-behavior: smooth;
}

html.intro-active main {
  scroll-snap-type: y mandatory;
}

/* Header & Navigation */
header {
  background: transparent;
  padding: 0;
  box-shadow: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px; /* Reduced base height */
  z-index: 5000;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
}

header.scrolled {
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  height: 80px;
  box-shadow: var(--shadow-soft);
  border-bottom: 1px solid var(--border-color);
}

header.scrolled .header-container {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Header spacing handled by .header-inner and .header-container at the top */

/* ?쒓퀎媛€ ?쇱そ ?섎떒 ?꾩젽 ?꾨줈 ?대룞??*/


/* === New Modern Digital Clock === */
.clock-widget-container {
    position: fixed;
    left: calc(2.5rem + 40px);
    top: 45px; /* Moved up by 20px (65px -> 45px) */
    z-index: 6000;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.side-site-title {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 1.15rem; /* Increased from 0.95rem (~20% increase) */
    background: linear-gradient(
        135deg,
        var(--primary-color) 0%,
        var(--accent-color) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
    margin-bottom: -5px; /* ?쒓퀎?€ ??諛€李⑸릺?꾨줉 */
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto;
}

html .side-site-title {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    cursor: pointer;
}

.side-site-title:hover {
    transform: translateY(-5px) scale(1.05);
    filter: brightness(1.1);
}

.modern-clock {
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: transparent;
    border: none;
    font-family: 'Outfit', sans-serif;
    color: var(--text-main);
    font-weight: 800;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* ?뺢탳???꾨젰 怨≪꽑 */
    cursor: default;
    user-select: none;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    will-change: transform, scale; /* 媛€???깅뒫 理쒖쟻??*/
}

.modern-clock:hover {
    transform: scale(1.2) translateY(-3px); /* 醫€ ???뺤떎???뺣? 諛?怨듭쨷 遺€??*/
    color: #4a90e2; /* 釉뚮옖??硫붿씤 而щ윭濡?媛뺤“ */
}

.clock-ampm {
    font-size: 0.9rem;
    color: #4a90e2;
    margin-right: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.clock-time {
    font-size: 2.4rem;
    display: flex;
    align-items: center;
    letter-spacing: -1px;
    color: var(--text-main);
}

.clock-colon {
    margin: 0 4px;
    animation: clockBlink 1.5s infinite;
    opacity: 1;
    color: #4a90e2;
}

@keyframes clockBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* 珥??⑥쐞 ?④?/?쒖떆 ?좊땲硫붿씠??*/
.clock-seconds {
    width: 0;
    opacity: 0;
    overflow: hidden;
    font-size: 1.4rem;
    color: #94a3b8;
    margin-left: 0;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
}

.clock-seconds::before {
    content: ':';
    margin-right: 2px;
}

.modern-clock:hover .clock-seconds {
    width: 40px;
    opacity: 1;
    margin-left: 5px;
}


main {
  flex: 1;
  margin-top: 125px;
  height: calc(100vh - 125px);
  overflow-y: auto;
  padding-top: 0;
  display: block;
}

#category-nav {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 0.75rem; /* Reduced gap to keep items in one line */
  padding: 0.4rem 0;
  margin: 0 auto;
  position: relative;
  z-index: 5001;
  background: transparent !important;
  pointer-events: auto;
}

.nav-item, .header-icon-btn {
  pointer-events: auto;
  padding: 0.45rem 0.85rem; /* 踰꾪듉 ?ш린 ?щ┝??*/
  border: 1px solid var(--border-color);
  background: var(--widget-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-muted);
  transition: var(--transition);
  white-space: nowrap; /* Prevent breaking into multiple lines */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-btn, .logout-btn {
  width: 42px;
  height: 42px;
  padding: 0 !important;
  font-size: 1.1rem;
}

.nav-item:hover, .header-icon-btn:hover {
  transform: translateY(-2px);
  background: var(--widget-bg-hover);
  box-shadow: var(--shadow-hover);
  color: var(--primary-color);
}

.nav-item.active {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  box-shadow: 0 8px 20px rgba(74, 144, 226, 0.3);
}

/* === Special Admin Nav Button === */
#nav-admin-btn {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 800 !important;
  padding: 0.6rem 1.4rem !important;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !important;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#nav-admin-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: 0.5s;
}

#nav-admin-btn:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5) !important;
  filter: brightness(1.1);
}

#nav-admin-btn:hover::before {
  left: 100%;
}

#nav-admin-btn.active {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  box-shadow: 0 8px 30px rgba(79, 70, 229, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Dark Mode Admin Button Adjustment */
body.dark-mode #nav-admin-btn {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode #nav-admin-btn:hover {
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4) !important;
}

/* Grid Layout */
.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  padding: calc(2rem - 20px) 5% 4rem; 
  max-width: 1400px;
  margin: 0 auto 0 260px; /* Shifted grid +40px effectively via margin or padding - let's use margin-left explicitly or adjust container */
}

/* Card Style */
.link-card {
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
  border: 1px solid rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-soft);
}

.link-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

.card-icon {
  width: 50px;
  height: 50px;
  background: rgba(74, 144, 226, 0.1);
  color: var(--primary-color);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

.card-content h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.card-content p {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Footer */
/* Footer */
footer {
  display: none !important; /* Hiding global footer as we use intro-mini-footer */
}

/* School Status Section */
.status-section {
  width: fit-content;
  min-width: 900px; /* Ensure a decent visual width */
  max-width: calc(100vw - 460px); /* Safety to avoid overlapping right buttons (320px left + 140px buffer) */
  margin: calc(2rem - 40px) auto 4rem 360px; /* Shifted +40px from 320px */
  padding: 3rem; /* Balanced padding on all sides */
  background: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center vertically within any min-height */
}

.status-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.status-tab {
  padding: 0.5rem 1.25rem;
  border-radius: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  cursor: pointer;
  font-weight: 700;
  color: var(--text-muted);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03); /* Added subtle shadow */
}

.status-tab:hover {
  background: var(--bg-color);
  color: var(--text-main);
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover); /* Enhanced hover shadow */
}

.status-tab.active {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  box-shadow: 0 4px 10px -1px rgba(74, 144, 226, 0.3);
}

.status-panel {
  display: none;
}

.status-panel.active {
  display: block;
}

/* Wrapper for Shadow & Radius */
.editable-table-wrapper {
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 2rem;
  border: 1px solid var(--border-color);
}

.status-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--card-bg) !important;
  table-layout: fixed;
  margin-bottom: 0;
}

.status-table th,
.status-table td {
  border: 1px solid var(--border-color);
  padding: 0.4rem 0.5rem; /* 湲곗〈 0.85rem?먯꽌 ?€??異뺤냼?섏뿬 怨듦컙 ?뺣낫 */
  text-align: center;
  color: var(--text-main);
  background: var(--card-bg); /* Explicitly set background */
  word-break: keep-all; /* ?⑥뼱 ?⑥쐞濡?以꾨컮轅??좎??섏뿬 遺덊븘?뷀븳 ??以??ㅼ뿬?곌린 諛⑹? */
  white-space: pre-wrap; /* ?ъ슜?먭? ?뷀꽣?ㅻ줈 ?낅젰??以꾨컮轅덉쓣 諛섏쁺?섎㈃??諛뺤뒪瑜??섍린硫?以꾨컮轅??덉슜 */
}

.status-table th {
  background: var(--table-header);
  font-weight: 700;
  color: var(--text-main);
  position: relative;
}

.status-table tr:hover {
  background: var(--bg-color);
}

/* Status Controls & Edit Mode */
.status-controls {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.status-tabs.edit-mode {
  border: 2px dashed var(--border-color);
  padding: 10px;
  background: var(--bg-color);
}

.status-tabs.edit-mode .status-tab {
  padding-right: 2.22rem;
  position: relative;
}

.delete-tab-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: #ef4444;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  cursor: pointer;
}

.add-tab-btn {
  padding: 0.4rem 1rem;
  border: 2px dashed var(--border-color);
  background: var(--card-bg);
  border-radius: 50px;
  color: var(--text-muted);
  font-weight: 600;
}

.editable-input {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  text-align: center;
  padding: 4px 6px; /* 8px?먯꽌 異뺤냼?섏뿬 ?낅젰 ?곸뿭 ?뺣낫 */
  border-radius: 4px;
  color: inherit; /* Ensure text is visible in dark mode */
  font-family: inherit;
  font-size: inherit;
}

.editable-input:focus {
  background: var(--card-bg);
  border-color: var(--primary-color);
  outline: none;
}

.table-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.85rem;
  background: var(--bg-color);
  border-radius: 12px;
}

.layout-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card-bg);
  padding: 0 0.8rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  height: 32px;
}

.table-grid-wrapper {
  display: grid;
  gap: 2rem;
  width: 100%;
}
.table-grid-1 { grid-template-columns: 1fr; }
.table-grid-2 { grid-template-columns: 1fr 1fr; }
.table-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

.hidden {
  display: none !important;
}

/* Admin Feature Control - Hidden by default for security */
.admin-feature.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
}

/* ================= Shortcut Section Redesign ================= */
.shortcut-section {
  width: 100%;
  max-width: 1200px;
  margin: -0.75rem auto 2rem; /* Adjusted from 0.5rem to pull up by ~20px */
  padding: 0 1rem;
  position: relative;
  z-index: 10;
  text-align: left;
}

/* Controls Area - Flow Layout */
.shortcut-controls {
  position: relative;
  top: auto;
  right: auto;
  display: flex;
  justify-content: flex-end; /* Keep right aligned as per standard UI, or change to flex-start if left requested explicitly. User asked to move position visually. Let's keep right for now as it's safer for "Edit" buttons */
  gap: 0.6rem;
  z-index: 20;
  margin-bottom: 1rem;
  padding: 0;
  border: none;
}

/* Toggle button - hidden by default on desktop */
.shortcut-toggle-btn {
  display: none;
}

/* Collapsed state for space saving */
.shortcut-grid.collapsed {
  display: none !important;
}

/* Source Toggle for Admin Editing Shortcuts */
.shortcut-source-toggle {
  display: flex;
  background: var(--bg-color);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin-right: 0.5rem;
  align-items: center;
}

.source-btn {
  padding: 0.3rem 0.8rem;
  font-size: 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-muted);
  white-space: nowrap;
}

.source-btn.active {
  background: var(--primary-color);
  color: white;
  font-weight: 700;
}

.shortcut-controls button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.82rem;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  height: 32px;
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
}

.shortcut-controls button:hover {
  transform: scale(1.05) translateY(-2px) rotate(1deg);
  filter: brightness(1.1);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.shortcut-controls button:active {
  transform: scale(0.95);
}

/* ... button colors remain ... */

/* Grid Layout for Groups */
.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Adjusted for 3 cols */
  gap: 1.5rem; /* Reduced gap */
  align-items: stretch;
}

/* Group Card Design */
.shortcut-group {
  background: rgba(255, 255, 255, 0.4); /* 諛섑닾紐낇븳 ?좊튆 諛곌꼍 */
  backdrop-filter: blur(12px) saturate(180%); /* ?좊━ 媛숈? 臾쇰━??釉붾윭 ?④낵 */
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 20px; /* ?쎄컙 ???κ?寃?*/
  padding: 1.2rem; /* ?대? ?щ갚 理쒖쟻??*/
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.05), /* 遺€?쒕윭???섎떒 洹몃┝??*/
    inset 0 0 0 1px rgba(255, 255, 255, 0.5); /* ?대? 愿묓깮 ?뚮몢由?*/
  border: 1px solid rgba(255, 255, 255, 0.2); /* ?멸낸 ?좊━ ?뚮몢由?*/
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.shortcut-group:hover {
  background: rgba(255, 255, 255, 0.6); /* ?몃쾭 ???좊━媛€ ??諛앹븘吏€???④낵 */
  box-shadow: 
    0 15px 45px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  transform: translateY(-8px) scale(1.01); /* 醫€ ???앸룞媛??덇쾶 遺€??*/
}

.shortcut-group h3 {
  font-size: 0.85rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 0.5rem; /* Less bottom margin */
  padding-bottom: 0; /* Remove padding */
  border-bottom: none; /* Remove border */
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: -0.5px;
}

/* Remove colored accents on border since border is gone, maybe color text instead? */
.shortcut-group:nth-child(4n + 1) h3 {
  color: #1d4ed8;
}
.shortcut-group:nth-child(4n + 2) h3 {
  color: #047857;
}
.shortcut-group:nth-child(4n + 3) h3 {
  color: #b45309;
}
.shortcut-group:nth-child(4n + 4) h3 {
  color: #6d28d9;
}

/* Items Grid within Group */
.shortcut-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem; /* Tighter horizontal gap */
  row-gap: 0.8rem; /* Tighter vertical gap */
}

/* Individual Shortcut Item */
.shortcut-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem; /* Tighter item gap */
  position: relative;
  padding: 0.6rem 0.3rem; /* Very compact padding */
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
  text-decoration: none !important;
  cursor: pointer;
  width: 100%;
}

.shortcut-item:hover {
  background: #f8fafc;
}

.shortcut-link-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none; /* specific for the link wrapper */
  width: 100%;
}

.shortcut-icon {
  width: 40px;
  height: 40px;
  background: #f1f5f9;
  border-radius: 16px; /* Softer rounded corners */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem; /* Larger icon */
  color: #64748b;
  transition: all 0.3s ease;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden; /* For custom images */
}

.custom-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Specific Colors for Icons (Dynamic assignment) */
.shortcut-group:nth-child(4n + 1) .shortcut-icon {
  color: #3b82f6;
  background: #eff6ff;
}
.shortcut-group:nth-child(4n + 2) .shortcut-icon {
  color: #10b981;
  background: #ecfdf5;
}
.shortcut-group:nth-child(4n + 3) .shortcut-icon {
  color: #f59e0b;
  background: #fffbeb;
}
.shortcut-group:nth-child(4n + 4) .shortcut-icon {
  color: #8b5cf6;
  background: #f5f3ff;
}

.shortcut-item:hover .shortcut-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.shortcut-item span {
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
  text-align: center; /* Center align */
  word-break: break-word;
  line-height: 1.3;
  width: 100%;
  display: block;
}

.shortcut-item:hover span {
  color: #1e293b;
}

/* ================= Edit Mode Specifics ================= */

/* When in Edit Mode */
.edit-mode .shortcut-group {
  border: 2px dashed #cbd5e1; /* Visual cue for editable */
  background: #fdfdfd;
}

.edit-mode .shortcut-item {
  background: transparent;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  cursor: grab; /* Drag cursor */
}

.edit-mode .shortcut-item:active {
  cursor: grabbing;
}

/* Floating Action Buttons inside Items */
.delete-btn,
.edit-btn {
  position: absolute;
  top: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: white;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s;
}

.delete-btn {
  right: -6px;
  background: #ef4444;
}
.edit-btn {
  left: -6px;
  background: #3b82f6;
}

.delete-btn:hover,
.edit-btn:hover {
  transform: scale(1.2);
}

/* Group Actions */
.group-actions {
  display: flex;
  gap: 0.5rem;
  background: #f8fafc;
  padding: 4px;
  border-radius: 8px;
}

.group-action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
  background: white;
}

.group-action-btn:hover {
  border-color: #cbd5e1;
  transform: translateY(-1px);
}
.group-action-btn.delete {
  color: #ef4444;
}
.group-action-btn.edit {
  color: #3b82f6;
}

/* Add Item Button (Dashed) */
.add-item-btn {
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.85rem;
  border: 2px dashed #e2e8f0;
  background: transparent;
  border-radius: 12px;
  color: #94a3b8;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.add-item-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
  background: #eff6ff;
}

/* Modal Design Tweaks */
.modal-content {
  border-radius: 24px; /* More rounded */
  padding: 0;
  overflow: hidden;
}

.modal-header {
  background: #f8fafc;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #e2e8f0;
}

.modal-body {
  padding: 2rem;
}

.modal-footer {
  padding: 1.5rem 2rem;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

/* Icon Selector Grid */
.icon-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 0.8rem;
}

.icon-option {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
  color: #64748b;
  background: #f8fafc;
}

.icon-option:hover {
  background: #f1f5f9;
  transform: scale(1.05);
}

.icon-option.selected {
  border-color: var(--primary-color);
  background: #eff6ff;
  color: var(--primary-color);
  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.1);
}

/* Icon Type Tabs */
.icon-type-tabs {
  display: flex;
  background: #f1f5f9;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 1rem;
}

.icon-tab {
  flex: 1;
  padding: 0.6rem;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}

.icon-tab.active {
  background: white;
  color: var(--primary-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.icon-tab-content {
  display: none;
}

.icon-tab-content.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

/* Custom Icon Input */
.custom-icon-inputs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.helper-text {
  font-size: 0.85rem;
  color: var(--text-muted, #64748b);
  margin-bottom: 0;
  text-align: center;
}

/* Radio Button Alternative: Segmented Control Toggle Group */
.source-toggle-group {
    display: flex;
    background: var(--bg-color, #f1f5f9);
    border: 1px solid var(--border-color, transparent);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}
.source-toggle-label {
    flex: 1;
    margin: 0;
    cursor: pointer;
}
.source-toggle-label input[type="radio"] {
    display: none;
}
.source-toggle-btn {
    text-align: center;
    padding: 0.6rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    transition: all 0.2s ease;
}
.source-toggle-label input[type="radio"]:checked + .source-toggle-btn {
    background: var(--card-bg, white);
    color: var(--primary-color, #3b82f6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Modern Input Fields */
.modern-input {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    font-size: 0.95rem;
    color: var(--text-main);
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--bg-color, #f8fafc);
    box-sizing: border-box;
}
.modern-input:focus {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background: var(--card-bg, white);
    outline: none;
}

.modern-file-upload {
    position: relative;
    width: 100%;
}
.modern-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 2px dashed var(--border-color, #cbd5e1);
    border-radius: 12px;
    background: var(--bg-color, #f8fafc);
    color: var(--text-muted, #64748b);
    transition: all 0.2s;
    font-size: 0.95rem;
    font-weight: 500;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    z-index: 1;
}
.modern-file-input:hover + .file-upload-label {
    border-color: var(--primary-color, #3b82f6);
    background: rgba(59, 130, 246, 0.05);
    color: var(--primary-color, #3b82f6);
}
.file-upload-label i {
    font-size: 1.5rem;
}

/* Disabled Status applied by JS */
.modern-input:disabled {
    opacity: 0.5;
    pointer-events: none;
    background: var(--bg-color, #e2e8f0);
}
.modern-file-input:disabled {
    pointer-events: none;
}
.modern-file-input:disabled + .file-upload-label {
    opacity: 0.5;
    background: var(--bg-color, #e2e8f0);
    border-color: var(--border-color, #cbd5e1);
    color: var(--text-muted, #94a3b8);
}

/* Redesigned Image Preview Container */
.image-preview {
  margin-top: 0.5rem;
  width: 100px;
  height: 100px;
  border-radius: 16px;
  border: 1px solid var(--border-color, #e2e8f0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  background: var(--card-bg, white);
  box-shadow: var(--shadow-soft);
  align-self: center;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview.hidden {
  display: none;
}

#clear-image {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(239, 68, 68, 0.9);
  color: white;
  border: none;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#clear-image:hover {
  background: #dc2626;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Shake Animation for Edit Mode */
@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1deg);
  }
  75% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.edit-mode .shortcut-item {
  animation: shake 0.5s infinite;
  animation-play-state: paused;
}

.edit-mode .shortcut-item:hover {
  animation-play-state: running;
}

/* Edit Mode Group Handle */
.edit-mode .shortcut-group h3 {
  cursor: grab;
  background: rgba(0, 0, 0, 0.02); /* Visual cue */
  padding: 0.5rem;
  border-radius: 8px;
}

.edit-mode .shortcut-group h3:active {
  cursor: grabbing;
}

@media (max-width: 1024px) {
  .table-grid-wrapper {
    grid-template-columns: 1fr;
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .header-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
  }
  .search-box {
    width: 100%;
  }
  .shortcut-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) {
  /* Disable collapsing on desktop */
  .shortcut-group h3 .toggle-icon {
    display: none !important;
  }
  
  .shortcut-group h3 {
    cursor: default;
  }
  
  .edit-mode .shortcut-group h3 {
    cursor: grab;
  }

  /* Force display hidden items on desktop to prevent layout issues */
  .shortcut-items.hidden {
    display: grid !important;
  }
}


.datayard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: start; /* ????? ???????????????????????袁⑸즴筌?씛彛???돗??????????????癲ル슢二??곸젞???????????????????????됰Ŧ?????????????????????대첐?????????????????????????????????????????????????????????????????????????????ш끽維뽳쭩?뱀땡???얩맪???????????????????轅붽틓??섑떊???⑤챷?????????????????????????嫄???????????????????????筌???????????????????????? ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????산뭐??????????嫄???????????饔낅떽??????????????????????????????*/
}

.datayard-card {
  background: var(--card-bg);
  padding: 2.22rem 1.8rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 180px; /* ??????????????????????????????????????????????????????????????????????????????????? */
  position: relative;
  overflow: hidden;
}

.datayard-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.datayard-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
}

/* --- ?????????????????????????????????????????ㅻ깹??????????????????????????????????????????????????????(??????????????????????ш끽維뽳쭩?뱀땡???얩맪???????????????????轅붽틓??섑떊???⑤챷?????????????????????????嫄???????????????????????筌???????????????????????????????????????????????????????????????????????????????????????????????????????????????????ㅻ깹??????????거???????????轅붽틓????????????????????????????????????????????????????????ㅻ깹??????????거???????????轅붽틓????????????????????????? --- */
/* ??????????????- ???????????????????????????????????????袁⑸즴筌?씛彛???돗??????????????癲ル슢二??곸젞???????????????????????됰Ŧ?????????????????????대첐??????????????????*/
.datayard-card.yellow .category-icon,
.datayard-card.yellow .chevron,
.datayard-card.yellow .datayard-item i {
  color: #f59e0b !important;
}
.datayard-card.yellow .datayard-item:hover {
  background: rgba(245, 158, 11, 0.08);
}

/* ??????????- ??????????????????????????????ㅻ깹???????????????*/
.datayard-card.green .category-icon,
.datayard-card.green .chevron,
.datayard-card.green .datayard-item i {
  color: #10b981 !important;
}
.datayard-card.green .datayard-item:hover {
  background: rgba(16, 185, 129, 0.08);
}

/* ???????????????????????????ㅻ깹????????????????????????????????????????????????ㅻ깹?????????????????????????????????????????? - ???????????????????????????ㅻ깹??????????*/
.datayard-card.purple .category-icon,
.datayard-card.purple .chevron,
.datayard-card.purple .datayard-item i {
  color: #8b5cf6 !important;
}
.datayard-card.purple .datayard-item:hover {
  background: rgba(139, 92, 246, 0.08);
}

/* ?????????????????????????????????????????????- ???????????????????*/
.datayard-card.red .category-icon,
.datayard-card.red .chevron,
.datayard-card.red .datayard-item i {
  color: #ef4444 !important;
}
.datayard-card.red .datayard-item:hover {
  background: rgba(239, 68, 68, 0.08);
}

.datayard-header .category-icon {
  font-size: 2.2rem;
  margin-bottom: 0.1rem;
}

.datayard-header h3 {
  font-size: 1.25rem; /* ??????????????????????ш끽維뽳쭩?뱀땡???얩맪???????????????????轅붽틓??섑떊???⑤챷?????????????????????????嫄???????????????????????筌????????????????????????????????????????????????????????????????????????????????????????????????????ㅻ깹???????????????????????????????????⑤벡?????????????????????*/
  font-weight: 700;
  margin: 0;
  color: var(--text-main);
}

.datayard-header i.chevron {
  font-size: 1rem;
  margin-top: 5px;
  transition: transform 0.4s ease;
}

.datayard-card.is-locked .datayard-header i.chevron,
.datayard-card:hover .datayard-header i.chevron {
  transform: rotate(180deg);
}

.datayard-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.datayard-card.is-locked .datayard-list,
.datayard-card:hover .datayard-list {
  max-height: 800px;
  opacity: 1;
  visibility: visible;
  margin-top: 1.5rem;
}

/* Datayard Edit Buttons Override */
.file-item-wrapper .edit-btn,
.file-item-wrapper .delete-btn {
  position: static !important; /* Force static positioning */
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: white;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  margin: 0;
  color: #64748b;
  opacity: 1; /* Ensure visibility */
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.file-item-wrapper .edit-btn:hover {
  background: #f0f9ff;
  color: #0284c7;
  border-color: #bae6fd;
  transform: translateY(-1px);
}

.file-item-wrapper .delete-btn:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
  transform: translateY(-1px);
}

.item-edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: 0.5rem;
  flex-shrink: 0; /* Prevent shrinking */
}

/* Datayard Items Styling */
.datayard-item-wrapper,
.file-item-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 0.5rem;
}

.datayard-item,
.file-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.2s ease;
  font-size: 0.95rem; /* ???????????????????????????????????????????? ?????????????*/
  font-weight: 500;
  color: var(--text-muted); /* ??????????????????????????????????????????????????????? ??????????????????????熬곣뫖利당춯??쎾퐲???????????????????꿔꺂?㏘틠??怨몄젦????????????????????????거??????????????????????€泥???????????????????????????????????????????????????????????????????????*/
  flex-grow: 1; /* ??????????????????????ш끽維뽳쭩?뱀땡???얩맪???????????????????轅붽틓??섑떊???⑤챷?????????????????????????嫄???????????????????????筌????????????????????????????????????????????????????????????????????????????????? ?????????????????????????????????????????ㅻ깹???????????????????????????????????? */
  margin-right: 0.5rem;
}

.datayard-item:hover,
.file-item:hover {
  transform: translateX(6px);
  color: var(--text-main); /* ??????????????????????????????????????????????????????????????*/
  background: rgba(0, 0, 0, 0.02);
}

.datayard-item i,
.file-item i {
  font-size: 1rem;
}

/* Floating Buttons & Overlay Styles */

/* Buttons Container */
.fixed-btn-container {
  position: fixed;
  top: 1.5rem; /* top-6 */
  right: 1.5rem; /* right-6 */
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* gap-2 */
}

/* Individual Button Base Style */
.sheet-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* gap-2 */
  padding: 0.5rem 0.875rem; /* py-2 px-3.5 */
  font-size: 0.875rem; /* text-sm */
  color: #ffffff;
  border-radius: 9999px; /* rounded-full */
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
  backdrop-filter: blur(12px); /* backdrop-blur-md */
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.3s ease; /* transition-all */
  font-family: inherit;
  text-decoration: none;
}

.sheet-btn:hover {
  transform: scale(1.05); /* hover:scale-105 */
}

.sheet-btn span {
  font-weight: 500; /* font-medium */
  display: inline;
}

/* Hide text on small screens if needed (md:inline logic) */
@media (max-width: 768px) {
  .sheet-btn span {
    display: none;
  }
}

/* Button Colors */
.btn-blue {
  background-color: rgba(59, 130, 246, 0.9); /* bg-blue-500/90 */
}
.btn-blue:hover {
  background-color: #2563eb; /* bg-blue-600 */
}

.btn-emerald {
  background-color: rgba(16, 185, 129, 0.9); /* bg-emerald-500/90 */
}
.btn-emerald:hover {
  background-color: #059669; /* bg-emerald-600 */
}

.btn-pink {
  background-color: rgba(236, 72, 153, 0.9); /* bg-pink-500/90 */
}
.btn-pink:hover {
  background-color: #db2777; /* bg-pink-600 */
}

.btn-amber {
  background-color: rgba(245, 158, 11, 0.9); /* bg-amber-500/90 */
}
.btn-amber:hover {
  background-color: #d97706; /* bg-amber-600 */
}

.btn-violet {
  background-color: rgba(124, 58, 237, 0.9); /* bg-violet-600/90 */
}
.btn-violet:hover {
  background-color: #6d28d9; /* bg-violet-700 */
}

/* Overlay Styles */
.sheet-overlay {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background: rgba(0, 0, 0, 0);
  z-index: 5500;
  pointer-events: none;
  overflow: hidden;
  transition: background 0.3s ease;
}

.sheet-overlay.active {
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.2);
}

.sheet-panel {
  position: absolute;
  left: 0;
  bottom: -100%;
  width: 100%;
  height: 100%; /* Full screen height */
  background: transparent;
  transition: bottom 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.1);
  border: none;
}

.sheet-overlay.active .sheet-panel {
  bottom: 0;
}

.sheet-panel iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block; /* Remove inline spacing */
}

/* ================= Chatbot Styles ================= */
#chatbot-fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 65px;
  height: 65px;
  background: transparent;
  border-radius: 50%;
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.08),
    0 0 20px rgba(79, 172, 254, 0.15),
    0 0 40px rgba(255, 78, 80, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.fab-label {
  position: absolute;
  top: 50%;
  right: 80px;
  transform: translateY(-50%);
  color: #4facfe;
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  box-shadow: none;
  white-space: nowrap;
  pointer-events: none;
  /* Text Gradient Effect */
  background: linear-gradient(to right, #4facfe 0%, #a29bfe 50%, #f78fb3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Outfit", "Inter", sans-serif;
  animation: floatLabelSide 2.5s ease-in-out infinite;
  z-index: 10000;
}

@keyframes floatLabelSide {
  0%,
  100% {
    transform: translateY(-50%) translateX(0);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-50%) translateX(-8px);
    opacity: 1;
  }
}

.fab-icon {
  width: 42px;
  height: 42px;
  transition: transform 0.3s ease;
}

#chatbot-fab:hover {
  transform: translateY(-5px) scale(1.08) rotate(5deg);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.15),
    0 0 35px rgba(79, 172, 254, 0.4);
}

#chatbot-container {
  position: fixed;
  bottom: 7.5rem;
  right: 2.5rem;
  width: 400px;
  height: 650px;
  max-height: 85vh;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 28px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9998;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transform-origin: bottom right;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

#chatbot-container.hidden {
  opacity: 0;
  transform: scale(0.7) translateY(100px) rotate(5deg);
  pointer-events: none;
}

#chatbot-container.active {
  opacity: 1;
  transform: scale(1) translateY(0) rotate(0);
  pointer-events: auto;
}

.chat-header {
  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  background-size: 200% 200%;
  animation: gradientBG 10s ease infinite;
  padding: 1.8rem 1.5rem;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.chat-header-info {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.header-icon-wrapper {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  padding: 8px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.header-icon {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

.chat-header h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chat-header p {
  font-size: 0.85rem;
  margin: 3px 0 0;
  opacity: 0.85;
  font-weight: 400;
}

.chat-close-btn {
  background: rgba(0, 0, 0, 0.1);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.chat-close-btn:hover {
  background: rgba(0, 0, 0, 0.2);
  transform: rotate(90deg);
}

.chat-messages {
  flex: 1;
  padding: 1.8rem;
  overflow-y: auto;
  background: rgba(248, 250, 252, 0.5);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  scroll-behavior: smooth;
}

/* Scrollbar Style */
.chat-messages::-webkit-scrollbar {
  width: 4px;
}
.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}
.chat-messages::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

.chat-message {
  max-width: 88%;
  display: flex;
  flex-direction: column;
  animation: messageIn 0.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes messageIn {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-message.user {
  align-self: flex-end;
  align-items: flex-end;
}

.chat-message.bot {
  align-self: flex-start;
  align-items: flex-start;
}

.message-content {
  padding: 1rem 1.2rem;
  border-radius: 20px;
  font-size: 0.98rem;
  line-height: 1.6;
  word-wrap: break-word;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.chat-message.user .message-content {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
  border-bottom-right-radius: 4px;
}

.chat-message.bot .message-content {
  background: white;
  color: #1e293b;
  border: 1px solid #f1f5f9;
  border-bottom-left-radius: 4px;
}

.chat-message.bot .message-content strong {
  color: #4f46e5;
  font-weight: 700;
}

.chat-message.bot .message-content.image-bubble {
  background: white;
  padding: 8px;
  border-radius: 24px;
}

.chat-image {
  max-width: 100%;
  width: 100%;
  display: block;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.chat-input-area {
  padding: 1.5rem;
  background: white;
  border-top: 1px solid #f1f5f9;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.chat-input-area input {
  flex: 1;
  padding: 1rem 1.4rem;
  border: 1px solid #f1f5f9;
  border-radius: 30px;
  outline: none;
  font-size: 1rem;
  transition: all 0.3s;
  background: #f8fafc;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.chat-input-area input:focus {
  border-color: #6366f1;
  background: white;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.chat-send-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.chat-send-btn:hover {
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}

/* Typing Animation */
.typing-dots {
  display: flex;
  gap: 4px;
}
.typing-dots span {
  width: 6px;
  height: 6px;
  background: #cbd5e0;
  border-radius: 50%;
  animation: typing 1.4s infinite;
}
.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

@media (max-width: 480px) {
  #chatbot-container {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
}

/* ================= Academic Calendar (FullCalendar) Styles ================= */
.calendar-section {
  padding: 2rem 10% 4rem; /* ??????????????????????????????????????????*/
  max-width: 1600px;
  margin: 0 auto;
}

.calendar-container {
  position: relative;
  z-index: 1;
  padding: 2.5rem 3rem;
  width: 100%;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* ??????????????????????????????????????? ::before?????????????????????????????????????????????????????????????????????????????????????????????袁⑸즴筌?씛彛???돗??????????????癲ル슢二??곸젞???????????????????????됰Ŧ?????????????????????대첐??????????????????????????????????????????????????????????????????????????????????? */
}

.calendar-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 10px 40px -10px rgba(0, 0, 0, 0.08),
    0 0 1px rgba(0, 0, 0, 0.1);
  z-index: -1;
  pointer-events: none;
}

/* Dynamic Transition Effects */
.calendar-wrapper.view-transitioning #calendar {
  opacity: 0;
  transform: scale(0.98) translateY(10px);
}

#calendar {
  flex: 1;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#calendar-header {
  width: 100%;
  margin-bottom: 1.5rem; /* ??????????????????????????????????????????????????????곕춴????????*/
}

/* Intro Step Styles are moved to Bento Introduction Section at the end */

.calendar-title-group {
  text-align: center;
  margin-bottom: 1rem; /* ??????????????????????????????????????????????????곕춴????????*/
}

.calendar-current-month {
  font-size: 2rem; /* ??????????????????????????????????곕춴????????????????????????????????????곕춴????????*/
  font-weight: 800;
  color: var(--primary-color);
  font-family: "Outfit", sans-serif;
  letter-spacing: -0.5px;
}

.calendar-view-controls {
  display: flex;
  justify-content: center; /* ??????????????????????????????산뭐???????????????????????????됰Ŧ?????????轅붽틓????곌램?뽳쭕????????????????????????????????????????????????????????????????*/
  gap: 12px;
  margin-bottom: 0.5rem;
}

.view-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 50%;
  font-size: 1.1rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s;
}

.view-btn:hover {
  background: #f8fafc;
  border-color: var(--primary-color);
}

.view-btn.active {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  box-shadow: 0 4px 10px rgba(74, 144, 226, 0.3);
}

.calendar-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.nav-arrow-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 10;
  flex-shrink: 0;
}

.nav-arrow-btn:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  transform: scale(1.1);
}

.nav-arrow-btn.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Multi Month Layout Tuning */
.fc-multimonth-month {
  padding: 20px !important;
  border: 1px solid #f8fafc !important;
  border-radius: 16px;
  background: #fff !important;
  box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.03);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.fc-multimonth-month:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.06);
}

.fc-multimonth-title {
  font-family: "Outfit", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  padding: 18px 0 !important;
  color: var(--primary-color) !important;
  text-align: center;
  border-bottom: 2px solid #f1f5f9;
  margin-bottom: 15px !important;
}

.fc-multimonth-daygrid {
  background: transparent !important;
}

.fc-daygrid-day-number {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 10px !important;
  transition: all 0.2s ease;
}

.fc-daygrid-day:hover .fc-daygrid-day-number {
  transform: scale(1.1);
}

/* Calendar Grid Header Styling */
.fc-theme-standard td,
.fc-theme-standard th {
  border-color: #e2e8f0 !important; /* Crisp lines */
}


#curr-fullcalendar .fc-col-header-cell {
  background: #f8fafc !important;
  padding: 12px 0 !important;
}

#curr-fullcalendar .fc-col-header-cell.fc-day-sun .fc-col-header-cell-cushion {
  color: #ef4444 !important;
}

#curr-fullcalendar .fc-col-header-cell.fc-day-sat .fc-col-header-cell-cushion {
  color: #3b82f6 !important;
}

/* Cell Background Highlights for Sundays/Holidays */
.fc-day-sun,
.fc-day-has-holiday {
  background-color: rgba(239, 68, 68, 0.04) !important; /* Light red shading */
}

/* Fix for Grid Lines and Alignment (????????????????????????밸븶筌믩끃??獄?€??????멥렑???????????????????耀붾굝?????臾먮뼁?????쇨덫?????????????????????????濾???????????????????????癲???????????????-???????????????????????????ㅻ깹??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????산뭐??????????嫄???????????饔낅떽??????????????????????????????????????????袁⑸즴筌?씛彛???돗??????????????癲ル슢二??곸젞???????????????????????됰Ŧ?????????????????????대첐???????????????????????????????????????????????????????????????????????????????????) */
.fc-theme-standard td,
.fc-theme-standard th {
  border-color: #e2e8f0 !important;
}

/* ????????????????????????밸븶筌믩끃??獄?€??????멥렑???????????????????耀붾굝?????臾먮뼁?????쇨덫?????????????????????????濾???????????????????????癲????????????????? ???????????????????????????ㅻ깹??????????????????????????????????????????????????????????????산뭐???????????????????????????????????????????????????????????????????????ш끽維뽳쭩?뱀땡???얩맪???????????????????轅붽틓??섑떊???⑤챷?????????????????????????嫄???????????????????????筌????????????????????????????????????????????????????????????????????????????????????????????????????????????*/
.fc .fc-col-header,
.fc .fc-daygrid-body,
.fc .fc-scrollgrid-sync-table {
  width: 100% !important;
  table-layout: fixed !important;
}

.fc-scrollgrid {
  border: 1px solid #e2e8f0 !important;
  width: 100% !important;
}

.fc-daygrid-day-frame {
  min-height: 100% !important;
}

/* ?????? ????????? ??????????????????????????????????????????嫄??????????????ㅻ깹????耀붾굝????????硫멸킐?????????????????????????????????룸ı?????????釉먮폁????????????????????????????????????怨뺤떪????????????????怨뺤떪????????????????????????????猷맣????????????????????????????????????????????????????????????⑤벡???????????????????????????????????????????????????????산뭐??????????嫄???????????饔낅떽??????????????????????????????????산뭐????????????????????????????????ш끽維뽳쭩?뱀땡???얩맪???????????????????轅붽틓??섑떊???⑤챷?????????????????????????嫄???????????????????????筌???????????????????????????????????????????????????????????????????????????????????????????????袁⑸즴筌?씛彛???돗??????????????癲ル슢二??곸젞???????????????????????됰Ŧ?????????????????????대첐??????????????????????????????????????????????????????????????????????????????????? */
.calendar-container {
  padding-right: 3.1rem !important; /* ????????padding-right??????????? 3rem?????????0.1rem ?????????????????????????????곕춴??????? */
}

.calendar-wrapper,
#calendar {
  overflow: visible !important;
}

/* Event Style Enhancements */
.fc-event {
  cursor: pointer;
  border-radius: 6px !important;
  padding: 3px 6px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  margin: 2px 0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  border: none !important;
}

.fc-event:not(.fc-event-dragging):not(.fc-event-mirror):hover {
  transform: scale(1.05) translateX(3px) !important;
  filter: brightness(1.05);
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 5;
}

/* ???????????????????????????????????????????됰Ŧ?????????轅붽틓????곌램?뽳쭕????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????곕춴???????????????????????????????밸븶筌믩끃??獄?€??????멥렑???????????????????耀붾굝?????臾먮뼁?????쇨덫?????????????????????????濾???????????????????????癲????????????????????????????????????????????????????????????????????????????*/
.fc-event-dragging,
.fc-event-mirror {
  transition: none !important;
  transform: none !important;
  opacity: 0.8;
  z-index: 9999 !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
  cursor: grabbing !important;
}

/* Highlight Sundays and Saturdays Number */
.fc-day-sun .fc-daygrid-day-number {
  color: #ef4444 !important;
  font-weight: 700;
}
.fc-day-sat .fc-daygrid-day-number {
  color: #3b82f6 !important;
  font-weight: 700;
}

/* ================= Modal Styles ================= */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex !important;
}

.modal-content {
  background-color: #fff;
  padding: 0;
  border-radius: 20px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: modalFadeIn 0.3s ease-out;
  overflow: hidden;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
}

.modal-header h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

.close-modal {
  font-size: 1.35rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s;
}

.close-modal:hover {
  color: #000;
}

.modal-body {
  padding: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.color-picker {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.color-option {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.2s;
}

.color-option:hover {
  transform: scale(1.1);
}

.color-option.selected {
  border-color: #000;
  box-shadow: 0 0 0 2px #fff inset;
}

.modal-footer {
  padding: 1.5rem 2rem;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
}

.footer-right {
  display: flex;
  gap: 0.8rem;
}

.btn-save,
.btn-cancel,
.btn-delete,
.btn-secondary,
.btn-success {
  padding: 0.6rem 1.4rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.btn-secondary {
  background: #f1f5f9;
  color: #2d3436;
  border: 1px solid transparent;
}

.btn-secondary:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
}

.btn-save {
  background: var(--primary-color);
  color: #fff;
}

.btn-cancel {
  background: #f1f5f9 !important;
  color: #2d3436;
  border: 1px solid transparent;
}

.btn-delete {
  background: #fff1f2;
  color: #ef4444;
  border: 1px solid #fee2e2;
}

.btn-save:hover {
  background: #357abd;
  transform: translateY(-1px);
}

.btn-cancel:hover {
  background: #e2e8f0;
  border-color: transparent;
  transform: translateY(-1px);
}

.btn-delete:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  transform: translateY(-1px);
}

/* ================= Custom Checkbox Styles ================= */
.checkbox-group {
  margin-top: 1rem;
}

.checkbox-container {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  user-select: none;
  color: var(--text-main);
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: relative;
  height: 22px;
  width: 22px;
  background-color: #eee;
  border-radius: 6px;
  transition: all 0.2s;
}

.checkbox-container:hover input ~ .checkmark {
  background-color: #ccc;
}

.checkbox-container input:checked ~ .checkmark {
  background-color: #ef4444;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

.checkbox-container .checkmark:after {
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Holiday Date Number Highlight */
.fc-day-has-holiday .fc-daygrid-day-number {
  color: #ef4444 !important;
  font-weight: 800 !important;
}

/* ================= Bento Introduction Section ================= */
/* ================= Premium Introduction Section ================= */
/* ????????????????????????????????ㅻ깹??????????????????????????????????????????????????밸븶筌믩끃??獄?€??????멥렑???????????????????耀붾굝?????臾먮뼁?????쇨덫?????????????????????????濾???????????????????????癲????????????????????????????????????????????ㅻ깹???????????????????????????????????????????????????????????????????????????濾????????????????곕춴???????븐뼐?????????嶺뚮∥???????????? ????????????????????????????????룰퀬????????????????????????????????????????????????????????????????????????ㅻ깹??????????거???????????轅붽틓??????????????????????????????????????????????????????????????????*/
/* Intro section styles consolidated */

/* Section Specific Overrides removed to avoid conflicts with new flex layout */

html.intro-active .nav-item {
  pointer-events: auto; /* ??????????????????????????????????????????????????????????????????????????????????????????????????????????????산뭐??????????????*/
}

/* intro-header-clock ????????????????????(???????? */
.intro-header-clock {
  display: none;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html.intro-active .intro-section {
  background: transparent !important;
  padding-top: 2rem;
}

.intro-section {
  position: relative;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  overflow: hidden;
  padding-top: 2rem;
  scroll-snap-align: start;
}
#intro-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0.6;
  pointer-events: none; /* Let clicks pass through if needed, but JS will handle mousemove */
}

/* Background Animated Blobs */
/* Background Animated Blobs - Enhanced */
.intro-blobs {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  filter: blur(100px); /* ????????????????????????????????????????????????????????????????????????????⑤벡????????*/
  opacity: 0.6; /* ?????? ????????????????*/
  pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5; /* ???????????????????????????????????????????곕춴?????????????????????????????????ш끽維뽳쭩?뱀땡???얩맪???????????????????轅붽틓??섑떊???⑤챷?????????????????????????嫄???????????????????????筌???????????????????????????????????????????????????????????????????*/
  /* mix-blend-mode ????????????????????????????????????????????????? ???????? */
  animation: moveBlob 20s infinite alternate ease-in-out;
  transition: transform 0.5s ease-out; /* ??????????????????????????????????????袁⑸즴筌?씛彛???돗??????????????癲ル슢二??곸젞???????????????????????됰Ŧ?????????????????????대첐??????????????????????????????????????????????????????????????????????????????????????????????????????????*/
}

/* ???????????????????????????????????????????????????????????????꾩룆梨띰쭕?뚢뵾??????????????嶺뚮죭?댁젘??????????????????????釉먮폁???????????????????살몝???????????????????????????????????????????????????????????????????????????????????ш끽維뽳쭩?뱀땡???얩맪???????????????????轅붽틓??섑떊???⑤챷?????????????????????????嫄???????????????????????筌?????????????????????????????????????????????????????????(JS????????????????????????????????????????????????산뭐????????????????CSS????????????????????????????????????袁⑸즴筌?씛彛???돗??????????????癲ル슢二??곸젞???????????????????????됰Ŧ?????????????????????대첐???????????????????????????????????????????????????????????????????????????????????????????곕춴???????) */
.intro-section:hover .blob {
  filter: brightness(1.1);
}

.b-1 {
  width: 50vw;
  height: 50vw;
  top: -10%;
  left: -10%;
  background: radial-gradient(circle, #4facfe, #00f2fe);
  animation-duration: 18s;
}
.b-2 {
  width: 45vw;
  height: 45vw;
  bottom: -10%;
  right: -5%;
  background: radial-gradient(circle, #f093fb, #f5576c);
  animation-delay: -5s;
  animation-duration: 22s;
}
.b-3 {
  width: 40vw;
  height: 40vw;
  top: 30%;
  right: 20%;
  background: radial-gradient(circle, #84fab0, #8fd3f4);
  animation-delay: -10s;
  animation-duration: 20s;
}
/* ?????????????????????????????곕춴???????????????????????????????????????곕춴????????*/
.b-4 {
  width: 35vw;
  height: 35vw;
  bottom: 10%;
  left: 10%;
  background: radial-gradient(circle, #a18cd1, #fbc2eb);
  animation: moveBlobReverse 25s infinite alternate ease-in-out;
  animation-delay: -2s;
}
.b-5 {
  width: 25vw;
  height: 25vw;
  top: 15%;
  left: 40%;
  background: radial-gradient(circle, #ffecd2, #fcb69f);
  animation: moveBlob 20s infinite alternate-reverse ease-in-out;
  opacity: 0.8;
}

@keyframes moveBlob {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.95);
  }
  100% {
    transform: translate(20px, 40px) scale(1.05);
  }
}

@keyframes moveBlobReverse {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-40px, -40px) scale(1.15);
  }
}

.intro-landing-container {
  position: relative;
  z-index: 10;
  text-align: center;
  width: auto;
  max-width: 1400px; /* Limited width for better readability */
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem; /* Reduced gap from 1.5rem to pull content up */
  margin: -1.5rem 50px 0 340px; /* Reduced top margin to lift up entire container */
  animation: fadeInUp 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.intro-header-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 1.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap; /* Fix: Allow wrapping to prevent squishing */
}

.intro-header-bar::after {
  content: "";
  flex: 1;
}

/* Collaborative Board (Padlet Style) */
.intro-board-section {
  width: 100%;
  max-width: 100%;
  margin: 0.5rem 0 0;
  animation: fadeInUp 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.board-header {
  display: flex;
  justify-content: space-between; /* ????????????????????????????????????????????????????????????????ㅻ깹?????????????????????????????????袁⑸즴筌?씛彛???돗??????????????癲ル슢二??곸젞???????????????????????됰Ŧ?????????????????????대첐??????????????????????????????????????????????????????????????*/
  align-items: flex-end; /* ????????????????????????????????????????????????????????????????????????????????????*/
  margin-bottom: 0.5rem;
  padding: 0 1rem;
}

.board-description {
  font-size: 0.85rem;
  color: #94a3b8;
  font-weight: 500;
  margin-bottom: 0.3rem; /* ????????????????????????????????룰퀬???????????????????????????????????????????????????????????????????????????????????袁⑸즴筌?씛彛???돗??????????????癲ル슢二??곸젞???????????????????????됰Ŧ?????????????????????대첐????????????????????????????????????????????????????????????????????????????????*/
}

.fun-title {
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Outfit", sans-serif;
  color: #1e293b; /* ???????????????????????????????????ㅻ깹??????????????????????????????????????????????????????????????????熬곣뫖利당춯??쎾퐲???????????????????꿔꺂?㏘틠??怨몄젦????????????????????????거??????????????????????€泥????????????????????????????????????????????????????????????????????????????????????????????????????ㅻ깹??????????거???????????轅붽틓?????????????*/
}

.fun-title i {
  color: var(--primary-color);
  display: inline-block;
  animation: gentleShake 3s infinite ease-in-out;
}

@keyframes gentleShake {
  0%,
  100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

.btn-add-post {
  padding: 0.6rem 1.2rem;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-add-post:hover {
  background: white;
  color: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: none;
}

.btn-add-post i {
  font-size: 1rem;
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3???????????????????????????????袁⑸즴筌?씛彛???돗??????????????癲ル슢二??곸젞???????????????????????됰Ŧ?????????????????????대첐??????????????????????????????????????????????????????????????*/
  gap: 1.5rem;
  padding: 0.85rem;
  min-height: 200px;
}

/* Modern SNS Style Board Card */
.board-card {
  background: white; /* Will be overridden by inline color, but structure is here */
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); /* Soft, premium shadow */
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden; /* Clips the left status border */
  border: 1px solid rgba(0,0,0,0.04);
  min-height: 240px; /* Taller, more substantial look */
  text-align: left;
}

.board-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); /* Lift effect */
}

/* Status Spines (Left Border) */
.board-card.status-important {
  border-left: 5px solid #f59e0b; /* Amber spine */
}
.board-card.status-urgent {
  border-left: 5px solid #ef4444; /* Red spine */
}
.board-card.status-normal {
  border-left: 5px solid rgba(0,0,0,0.1); /* Subtle gray spine */
}

/* Card Top Section: Header */
.card-top-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.2rem 1.2rem 0.6rem 1.2rem;
}

.author-profile {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.profile-avatar {
  width: 42px;
  height: 42px;
  background: white;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #555;
  font-size: 1.1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.profile-details {
  display: flex;
  flex-direction: column;
}

.profile-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1e293b;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 10px; /* Space between name and tag */
}

.profile-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.meta-date {
  font-size: 0.75rem;
  color: #64748b; /* Muted slate */
}

.status-pill {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.pill-important {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #f59e0b;
}

.pill-urgent {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #ef4444;
}

/* Actions Group */
.card-actions-group {
  display: flex;
  gap: 6px;
  opacity: 0; /* Hidden by default */
  transform: translateX(10px);
  transition: all 0.3s ease;
}

.board-card:hover .card-actions-group {
  opacity: 1;
  transform: translateX(0);
}

.action-disk {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  font-size: 0.85rem;
  transition: all 0.2s;
  backdrop-filter: blur(4px);
}

.action-disk:hover {
  background: white;
  color: #3b82f6; /* Blue hover */
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.action-disk.copy:hover {
  color: #10b981; /* Green copy hover */
}

.action-disk.delete:hover {
  color: #ef4444; /* Red delete hover */
}

/* Card Body */
.card-body-section {
  padding: 0.5rem 1.4rem 1.2rem 1.4rem; /* Indented slightly more than avatar */
  flex-grow: 1; /* Pushes footer down */
}

.card-text-content {
  font-size: 1rem;
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word; /* Prevents overflow with long text */
  margin-bottom: 0.8rem;
  cursor: pointer;
  transition: opacity 0.2s;
}

.card-text-content:hover {
  opacity: 0.8;
}

/* Copy Toast */
.copy-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(15, 23, 42, 0.9);
  color: white;
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  backdrop-filter: blur(8px);
}

.copy-toast.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.card-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  font-size: 0.8rem;
  color: #475569;
  text-decoration: none;
  transition: background 0.2s;
}

.card-file-chip:hover {
  background: white;
  border-color: #cbd5e1;
}

/* Card Footer: Comments */
.card-footer-section {
  background: rgba(255,255,255,0.3); /* Glassy footer */
  border-top: 1px solid rgba(0,0,0,0.03);
  padding: 1rem;
}

.comment-area {
  margin-bottom: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mini-comment {
  font-size: 0.8rem;
  color: #475569;
  display: flex;
  gap: 6px;
}

.mini-comment-author {
  font-weight: 700;
  color: #1e293b;
}

.comment-input-box {
  display: flex;
  gap: 6px;
}

.input-mini-name {
  width: 50px;
  padding: 0.3rem;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  text-align: center;
  font-size: 0.8rem;
  background: rgba(255,255,255,0.8);
}

.input-mini-text {
  flex: 1;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  font-size: 0.8rem;
  background: rgba(255,255,255,0.8);
}

.btn-mini-send {
  background: transparent;
  border: none;
  color: #3b82f6;
  cursor: pointer;
  padding: 0 0.5rem;
  font-size: 0.9rem;
  transition: transform 0.2s;
}

.btn-mini-send:hover {
  transform: scale(1.2);
}

/* Add Card Style */
.board-card.board-add-card {
  background: rgba(255,255,255,0.4) !important;
  border: 2px dashed #cbd5e1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-left: none; /* No spine for add card */
}

.add-card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  color: #64748b;
  transition: all 0.3s;
}

.add-icon-box {
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.board-add-card:hover .add-card-wrapper {
  color: #3b82f6;
  transform: scale(1.05);
}

.board-add-card:hover .add-icon-box {
  box-shadow: 0 8px 15px rgba(59, 130, 246, 0.15);
} /* End of Board Styles */


/* Board Status Tags */
.status-selector {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.status-option {
  cursor: pointer;
}

.status-option input {
  display: none;
}

.status-tag {
  padding: 0.3rem 0.8rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid #e1e8ed;
  background: white;
  color: #64748b;
  transition: all 0.2s;
}

.status-option input:checked + .status-tag {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.tag-normal {
  color: #64748b;
}
.status-option input:checked + .tag-normal {
  background: #f1f5f9;
  color: #1e293b;
  border-color: #cbd5e1;
}

.tag-important {
  color: #f59e0b;
}
.status-option input:checked + .tag-important {
  background: #fef3c7;
  color: #d97706;
  border-color: #fcd34d;
}

.tag-urgent {
  color: #ef4444;
}
.status-option input:checked + .tag-urgent {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fecaca;
}

/* Displayed tags on cards */
.card-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.badge-important {
  background: #fef3c7;
  color: #d97706;
}
.badge-urgent {
  background: #fee2e2;
  color: #dc2626;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Drag & Drop Visuals */
.board-grid.sorting .board-card {
  transition: transform 0.2s;
}

.board-card.sortable-ghost {
  opacity: 0.4;
  transform: scale(0.9);
}

.board-card.sortable-chosen {
  background-color: #fff !important;
  z-index: 1000;
}

.intro-mini-footer {
  margin-top: 2rem;
  margin-bottom: 1rem;
  opacity: 0.7;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  width: 100%;
}

/* Edit Controls Style */
.intro-edit-controls {
  position: absolute;
  top: 1rem;
  right: 1rem;
  opacity: 0.3;
  transition: opacity 0.3s;
}

.intro-landing-container:hover .intro-edit-controls {
  opacity: 1;
}

/* -- Refined Sticky-Note Modal Design for Board Post -- */
#boardPostModal .modal-content {
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: #ffffff;
  padding: 0;
  overflow: hidden;
  max-width: 450px; /* Reduced width for stick-note feel */
  width: 90%;
  animation: modalSlideUp 0.3s ease-out;
}

@keyframes modalSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

#boardPostModal .modal-header {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
}

#boardPostModal .modal-header h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e293b;
}

#boardPostModal .modal-body {
  padding: 1.5rem;
  background: #ffffff;
}

#boardPostModal .form-group {
  margin-bottom: 1.2rem;
}

#boardPostModal .form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 0.5rem;
}

#post-content-editor {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem;
  min-height: 100px; /* Reduced height to avoid burden */
  max-height: 250px;
  overflow-y: auto;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Author Chips Style */
.author-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.author-chip {
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.author-chip:hover {
  background: #e2e8f0;
}

.author-chip.selected {
  background: #3b82f6;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}

#post-author-custom {
  margin-top: 0.8rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  width: 100%;
  font-size: 0.9rem;
  outline: none;
}

/* Toggleable Color Picker */
.color-picker-container {
  position: relative;
  display: inline-block;
}

.color-trigger {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.color-trigger:hover {
  transform: scale(1.1);
}

.color-options-popover {
  position: absolute;
  bottom: 100%; /* Show above the trigger */
  top: auto;
  right: -10px; /* Align to right edge with slight overflow offset */
  left: auto;
  margin-bottom: 12px;
  background: #ffffff;
  padding: 0.8rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  display: flex;
  flex-wrap: wrap; /* Allow wrapping */
  justify-content: center;
  gap: 0.6rem;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.1);
  width: 180px; /* Limit width to act like a grid */
}

.color-options-popover::after {
  /* Arrow pointing down */
  content: '';
  position: absolute;
  bottom: -6px;
  right: 20px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  transform: rotate(45deg);
}

.color-options-popover.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.color-option {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s;
}

.color-option:hover {
  transform: scale(1.15);
}

.color-option.selected {
  border-color: #3b82f6;
  transform: scale(1.1);
}

/* File Upload Area Slim */
#file-drop-zone {
  padding: 1.2rem;
  border: 2px dashed #e2e8f0;
  border-radius: 12px;
}

#file-drop-zone i { font-size: 1.5rem; }
#file-drop-zone p { font-size: 0.8rem; }

/* Footer Buttons */
#boardPostModal .modal-footer {
  padding: 1rem 1.5rem;
  background: #f8fafc;
  display: flex;
  justify-content: flex-end;
  gap: 0.8rem;
}

.btn-memo-cancel {
  background: #ffffff;
  color: #64748b;
  border: 1px solid #e2e8f0;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

.btn-memo-save {
  background: #3b82f6;
  color: #ffffff;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

/* Status Tags Refined */
.status-pill-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap; /* Prevent wrapping in dark mode */
}

.status-check-tag {
  display: none;
}

.status-label {
  padding: 0.4rem 0.8rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap; /* Prevent text wrapping */
  display: flex; /* Ensure content layout */
  align-items: center;
  justify-content: center;
}

.status-check-tag:checked + .status-label.normal { background: #e2e8f0; color: #1e293b; }
.status-check-tag:checked + .status-label.important { background: #fef3c7; color: #d97706; }
.status-check-tag:checked + .status-label.urgent { background: #fee2e2; color: #dc2626; }

.intro-input-h2 {
  border: 2px dashed var(--primary-color);
  background: rgba(255, 255, 255, 0.8);
  padding: 0.5rem;
  border-radius: 12px;
  width: 100%;
  outline: none;
}

.intro-textarea-p {
  font-size: 1.2rem;
  text-align: center;
  border: 1px dashed var(--text-muted);
  background: rgba(255, 255, 255, 0.8);
  padding: 0.85rem;
  border-radius: 12px;
  width: 100%;
  min-height: 100px;
  resize: none;
  outline: none;
}

/* Center Areas */
.intro-search-area {
  width: 100%;
  max-width: 500px;
  margin: 0;
}

.intro-naver-search {
  position: relative;
  display: flex;
  align-items: center;
  background: transparent;
  padding: 0.35rem; /* ?????????????????*/
  border-radius: 50px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* ?????????????????????????????????????????????????????????ㅻ깹???????????????*/
  border: 1px solid #e1e8ed;
  transition: all 0.3s ease;
}

.intro-naver-search:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
  border-color: #03c75a; /* Naver Green */
}

.intro-naver-logo {
  padding-left: 1.5rem;
  font-size: 1.35rem;
  font-weight: 900;
  color: #03c75a;
}

.intro-naver-search input {
  flex: 1;
  padding: 0.6rem 1rem; /* ???????????????????????????????????????????????????????????????????(1rem -> 0.6rem) */
  border: none;
  outline: none;
  font-size: 1.1rem; /* ???????????????????????????????????????????????????????곕춴????????????????????????????????????곕춴????????*/
  background: transparent;
}

.intro-search-btn {
  width: 38px; /* ?????????????????????????????????곕춴????????(50px -> 38px) */
  height: 38px;
  background: #03c75a;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem; /* ??????????????????????ш끽維뽳쭩?뱀땡???얩맪???????????????????轅붽틓??섑떊???⑤챷?????????????????????????嫄???????????????????????筌???????????????????????????????????????????????????????????????????????????????*/
  transition: all 0.2s;
}

.intro-search-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(3, 199, 90, 0.3);
}

.intro-cheer-message {
  flex: 0 0 auto; /* Fix: Auto width to prevent squishing */
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-family: 'Gaegu', cursive;
  cursor: default;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.intro-cheer-message:hover {
  transform: scale(1.05) translateY(-5px);
}

.intro-cheer-message .line-1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.1;
  white-space: nowrap; /* Fix: Prevent text breakage */
}

.intro-cheer-message .line-2 {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
  white-space: nowrap; /* Fix: Prevent text breakage */
}

.intro-cheer-message:hover .line-1,
.intro-cheer-message:hover .line-2 {
  animation: bounceLittle 0.5s ease infinite alternate;
}

@keyframes bounceLittle {
  from { transform: translateY(0); }
  to { transform: translateY(-5px); }
}

.intro-clock-area {
  display: none; /* ???????????????????? ?????????????????????*/
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .intro-greeting {
    font-size: 2.5rem;
  }
  .intro-description {
    font-size: 1.1rem;
  }
  .intro-clock-full {
    font-size: 1.4rem;
    padding: 0.6rem 1.5rem;
  }
}

/* Bento Grid */
.bento-grid-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 300px);
  gap: 1.5rem;
  width: 100%;
  max-width: 1200px;
}

.bento-item {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 30px;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.bento-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  background: white;
}

.bento-hero {
  grid-column: span 2;
  grid-row: span 1;
  display: flex;
  flex-direction: row;
}
.bento-calendar {
  grid-column: span 1;
}
.bento-ai {
  grid-column: span 1;
  grid-row: span 2;
  background: #1e293b;
  color: white;
  border: none;
}
.bento-links {
  grid-column: span 1;
}
.bento-data {
  grid-column: span 2;
  flex-direction: row;
}

.bento-icon {
  width: 45px;
  height: 45px;
  background: #f1f5f9;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
}

.bento-ai .bento-icon {
  background: rgba(255, 255, 255, 0.1);
  color: #818cf8;
}

.bento-item h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.bento-item p {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.5;
}
.bento-ai p {
  color: #94a3b8;
}

/* Visual Elements */
.bento-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.mockup-screen {
  width: 180px;
  height: 120px;
  background: #f8fafc;
  border: 4px solid #e2e8f0;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mockup-dot {
  width: 20px;
  height: 20px;
  background: #4f46e5;
  border-radius: 50%;
  margin-bottom: 5px;
}
.mockup-line {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
}
.mockup-line.short {
  width: 60%;
}

.ai-glow {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 10%, #4338ca, transparent);
  opacity: 0.3;
}

.data-stack-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.data-stack-visual span {
  position: absolute;
  width: 100px;
  height: 60px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  transform: rotateZ(-5deg);
  transition: 0.3s;
}
.data-stack-visual span:nth-child(2) {
  transform: rotateZ(5deg) translateY(20px);
  background: #f1f5f9;
}
.data-stack-visual span:nth-child(3) {
  transform: rotateZ(15deg) translateY(40px);
  background: #e2e8f0;
}

.intro-cta {
  position: relative;
  z-index: 2;
  text-align: center;
}

.cta-line {
  width: 2px;
  height: 100px;
  background: linear-gradient(to bottom, var(--primary-color), transparent);
  margin: 0 auto 2rem;
}

@media (max-width: 1024px) {
  .bento-grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .bento-hero,
  .bento-ai,
  .bento-data {
    grid-column: span 1;
    grid-row: auto;
  }
  .bento-hero,
  .bento-data {
    flex-direction: column;
  }
  .bento-visual,
  .data-stack-visual {
    margin-top: 2rem;
  }
}

/* Datayard Controls (Unified with Shortcut Controls) */
.datayard-controls {
  max-width: 1400px;
  margin: 0 auto 1rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  z-index: 20;
}

.datayard-controls button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.82rem;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  height: 32px;
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
}

.datayard-controls button:hover {
  transform: scale(1.05) translateY(-2px) rotate(1deg);
  filter: brightness(1.1);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.datayard-controls button:active {
  transform: scale(0.95);
}

/* Edit Actions */
.group-edit-actions,
.item-edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: 1rem;
}

.edit-btn,
.delete-btn,
.add-item-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-btn {
  color: #4a90e2;
  background: rgba(74, 144, 226, 0.1);
}
.edit-btn:hover {
  background: rgba(74, 144, 226, 0.2);
}

.delete-btn {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}
.delete-btn:hover {
  background: rgba(239, 68, 68, 0.2);
}

.add-item-btn {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}
.add-item-btn:hover {
  background: rgba(16, 185, 129, 0.2);
}

/* File Tabs in Modal */
.file-type-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #f1f5f9;
}

.item-tab {
  background: none;
  border: none;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  position: relative;
}

.item-tab.active {
  color: #3b82f6;
}

.item-tab.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #3b82f6;
}

.item-tab-content {
  display: none;
}

.item-tab-content.active {
  display: block;
}

/* File Upload Area */
.file-upload-area {
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  padding: 2.5rem;
  text-align: center;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}

.file-upload-area:hover,
.file-upload-area.drag-over {
  border-color: #3b82f6;
  background: #f8fafc;
  color: #3b82f6;
}

.file-upload-area i {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

/* Progress Bar */
.progress-bar {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  margin: 1rem 0 0.5rem;
}

.progress-fill {
  height: 100%;
  background: #3b82f6;
  width: 0%;
  transition: width 0.3s;
}

.progress-text {
  font-size: 0.8rem;
  color: #64748b;
  text-align: right;
}

/* Sortable Handles */
.datayard-sortable-handle {
  cursor: move;
  color: #cbd5e1;
  margin-right: 1rem;
}

.file-item .datayard-sortable-handle {
  margin-right: 0.5rem;
}

.sortable-ghost {
  opacity: 0.4;
  background: #ebf4ff !important;
  border: 2px dashed #4299e1 !important;
}

.sortable-chosen {
  background: #f7fafc;
}

#datayard-edit-actions {
  display: flex !important;
  gap: 0.6rem;
}
#datayard-edit-actions.hidden {
  display: none !important;
}

/* Curriculum Section (??????????????? */
#curriculum-section {
  width: auto;
  max-width: 1100px;
  margin-left: 320px; /* Default margin for widget */
  margin-right: 50px;
  padding: 0.5rem 0 4rem;
  transition: margin-left 0.3s ease;
}

body.hide-widget #curriculum-section {
  margin-left: 50px;
  max-width: 1800px; /* Reduced from 2400px */
}

.curriculum-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

/* 1. Header Area Styles */
.curriculum-header-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
  background: transparent;
  padding: 0.5rem 0;
  box-shadow: none;
  border: none;
}

.curriculum-title-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 0 0 auto;
}

.curriculum-title-group h2 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.curriculum-title-group h2 i {
  color: var(--primary-color);
}

/* Moved inside .curriculum-nav-group */

.curriculum-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* 2. Navigation Group */
.curriculum-nav-group {
  display: flex;
  align-items: center;
  background: #f8fafc;
  padding: 0.3rem 0.4rem;
  border-radius: 12px;
  gap: 0.5rem;
}

.nav-arrow-btn, .nav-today-btn {
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: 1px solid #eef2f6;
  background: white;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  min-width: 36px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.nav-arrow-btn:hover, .nav-today-btn:hover {
  background: #fff;
  border-color: var(--primary-color);
  color: var(--primary-color);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.nav-today-btn {
  margin-left: 0.8rem;
  background: white;
}

/* === Export Buttons Style === */
.curr-export-group {
    display: flex;
    gap: 0.4rem;
    margin-left: 1rem;
    border-left: 1px solid #e2e8f0;
    padding-left: 1rem;
}

.export-btn {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid #eef2f6;
    background: white;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.export-btn i {
    font-size: 0.95rem;
}

.export-btn.excel {
    color: #166534; /* Green */
}

.export-btn.excel:hover {
    background: #f0fdf4;
    border-color: #166534;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(22, 101, 52, 0.1);
}

.export-btn.hwp {
    color: #1e40af; /* Blue/Indigo */
}

.export-btn.hwp:hover {
    background: #eff6ff;
    border-color: #1e40af;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.1);
}

.export-btn.google {
    color: #4285f4; /* Google Blue */
}

.export-btn.google:hover {
    background: #f8faff;
    border-color: #4285f4;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.1);
}


.period-display {
  font-size: 1.1rem;
  font-weight: 800;
  color: #334155;
  background: #edf2f7;
  padding: 0.6rem 2.2rem; /* 怨듦컙 ?뺣낫瑜??꾪빐 ?⑤뵫 利앷? */
  border-radius: 12px;
  min-width: 160px;
  text-align: center;
  border: 1px solid #e2e8f0;
  cursor: ns-resize;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  position: relative; /* ?붿궡??諛곗튂瑜??꾪빐 ?꾩닔 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ?곹븯 ?붿궡??媛€?대뱶 (Font Awesome ?쒖슜) */
.period-display::before,
.period-display::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  color: #4a90e2;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  pointer-events: none;
}

.period-display::before {
  content: "\f106"; /* angle-up */
  top: 5px;
}

.period-display::after {
  content: "\f107"; /* angle-down */
  bottom: 5px;
}

/* ?몃쾭 ???좊땲硫붿씠???쒖꽦??*/
.period-display:hover {
  background: #ffffff;
  border-color: #4a90e2;
  box-shadow: 0 4px 15px rgba(74, 144, 226, 0.15);
  color: #4a90e2;
  transform: translateY(-1px);
}

.period-display:hover::before {
  top: -15px;
  opacity: 1;
  animation: scrollHintUp 1.5s infinite ease-in-out;
}

.period-display:hover::after {
  bottom: -15px;
  opacity: 1;
  animation: scrollHintDown 1.5s infinite ease-in-out;
}

/* ??議곗옉 ?좊룄 ?좊땲硫붿씠??*/
@keyframes scrollHintUp {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
  50% { transform: translateX(-50%) translateY(-5px); opacity: 1; }
}

@keyframes scrollHintDown {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
  50% { transform: translateX(-50%) translateY(5px); opacity: 1; }
}


.btn-primary-gradient {
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  color: white;
  padding: 0.7rem 1.5rem;
  border-radius: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(74, 144, 226, 0.2);
  transition: var(--transition);
}

.btn-primary-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(74, 144, 226, 0.3);
}

/* 3. View Switcher */
.view-switcher {
  display: flex;
  background: #f8fafc;
  padding: 5px;
  border-radius: 12px;
  gap: 4px;
  border: 1px solid #f1f5f9;
}

.view-switcher .view-btn {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.view-switcher .view-btn.active {
  background: white;
  color: var(--primary-color);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Navigation & General Styles */
#school-today-widget {
  transition: all 0.3s ease;
}

body.hide-widget #school-today-widget {
  display: none !important;
}

/* 4. Table View Styles (iOS 26 redesign) */
.content-wrapper {
  background: white;
  border-radius: 22px;
  overflow: visible; /* Allow add buttons to peek out */
  box-shadow: 0 10px 34px -12px rgba(15, 23, 42, 0.16),
              0 2px 8px -2px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.05);
}

.curr-table-header {
  display: grid;
  grid-template-columns: 50px 45px 10.8fr 36fr 13.2fr 30fr; /* Special -10%, Staff -40% */
  background: rgba(238, 244, 255, 0.96); /* 연한 라벤더 — 연수관리 헤더와 통일 */
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  font-weight: 700;
  color: #4a5568;
  position: sticky;
  top: 0;
  z-index: 200;
}

.th {
  padding: 0.8rem 0.5rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #4a5568;
}
.th:not(:last-child) {
  box-shadow: inset -1px 0 0 rgba(15, 23, 42, 0.05);
}

.th-date, .th-day {
  padding: 0.8rem 0.2rem !important;
  font-size: 0.86rem;
  letter-spacing: -0.5px;
}

.curr-row {
  display: grid;
  grid-template-columns: 50px 45px 10.8fr 36fr 13.2fr 30fr; /* Match header columns */
  border-bottom: 1px solid rgba(15, 23, 42, 0.055);
  transition: transform 0.3s cubic-bezier(0.34, 1.32, 0.5, 1),
              box-shadow 0.3s cubic-bezier(0.34, 1.32, 0.5, 1),
              background-color 0.22s ease;
  position: relative; /* For z-index to work */
  overflow: visible;
}
.curr-row:last-child {
  border-bottom: none;
}

.curr-row:hover {
  z-index: 101;
}

body:not(.dark-mode) .curr-row:hover {
  background-color: #f4f9ff;
  transform: translateY(-3px) scale(1.008);
  box-shadow: 0 14px 32px -10px rgba(59, 130, 246, 0.28),
              0 2px 6px -2px rgba(15, 23, 42, 0.08);
  border-bottom-color: transparent; /* Seamless look */
}

/* Round the end cells on hover → card-like block feel (works in both themes) */
.curr-row:hover .curr-cell:first-child {
  border-radius: 16px 0 0 16px;
}
.curr-row:hover .curr-cell:last-child {
  border-radius: 0 16px 16px 0;
}

/* Subtle highlight for the row that contains today */
body:not(.dark-mode) .curr-row:has(.curr-cell.is-today) {
  background-color: rgba(99, 102, 241, 0.05);
}

.curr-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  min-height: 44px;
  overflow: visible; /* Needed for tooltips/popups */
  min-width: 0; /* Critical for truncation in Grid/Flex to work */
}
.curr-cell:not(:last-child) {
  box-shadow: inset -1px 0 0 rgba(15, 23, 42, 0.04);
}

.date-cell, .day-cell {
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  font-weight: 800;
  font-size: 1.2rem;
  color: #1e293b;
}

.day-sunday { background: #fff5f5; }
.day-sunday .date-cell, .day-sunday .day-cell { color: #ef4444; }
.day-saturday { background: #f8fbff; }
.day-saturday .date-cell, .day-saturday .day-cell { color: #3b82f6; }

.curr-cell:not(.date-cell):not(.day-cell) {
  padding: 0.4rem;
  gap: 1px; /* Further reduced from 2px */
}

.curr-event-chip {
  padding: 2.5px 9px;
  border-radius: 9px; /* iOS soft rounding */
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  justify-content: flex-start; /* Bullet and text to the left */
  align-items: flex-start;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.34, 1.5, 0.5, 1),
              box-shadow 0.2s ease, filter 0.15s ease, opacity 0.15s ease;
  cursor: grab;
  line-height: 1.15; /* Slightly tighter line height */
  gap: 4px;
}

.chip-controls {
  display: none;
  gap: 2px;
  margin-left: auto; /* Push buttons to the right */
  position: absolute;
  right: 12px; /* Moved left to avoid cell edge */
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  padding: 3px;
  border-radius: 11px;
  box-shadow: 0 6px 18px -4px rgba(15, 23, 42, 0.26);
  z-index: 1000;
}

.curr-event-chip:hover {
  transform: none; /* Remove translation to keep stable */
  filter: brightness(0.97);
  box-shadow: 0 4px 12px -3px rgba(15, 23, 42, 0.22);
  z-index: 50; /* Ensure chip is above others */
  overflow: visible; /* Ensure controls can pop out */
}

/* Click (press) feedback */
.curr-event-chip:active {
  transform: scale(0.95);
  filter: brightness(0.94);
}

/* Drag & drop feedback (SortableJS state classes) */
.curr-event-chip.sortable-ghost {
  opacity: 0.45;
  background: rgba(59, 130, 246, 0.14) !important;
  box-shadow: inset 0 0 0 1.5px rgba(59, 130, 246, 0.45);
  filter: none;
}
.curr-event-chip.sortable-chosen {
  cursor: grabbing;
}
.curr-event-chip.sortable-drag {
  transform: scale(1.05) rotate(-2deg);
  box-shadow: 0 16px 34px -6px rgba(15, 23, 42, 0.34);
  opacity: 1 !important;
  filter: none;
  cursor: grabbing;
}

.curr-event-chip:hover .chip-controls {
  display: flex;
}

.chip-btn {
  background: transparent;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 0.72rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s cubic-bezier(0.34, 1.6, 0.5, 1),
              background-color 0.15s ease;
}
.chip-btn:hover {
  background: rgba(15, 23, 42, 0.07);
}
.chip-btn:active {
  transform: scale(0.84);
}

/* Ensure Cells are Relative for positioning the Add Button */
.curr-cell {
  position: relative; 
}

/* Add Button in Cells (Hover) */
.cell-add-btn {
  display: none; /* Hidden by default */
  position: absolute;
  right: -12px; /* Center on the right border */
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  color: var(--primary-color);
  border: 1px solid #e2e8f0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 2000; /* Higher than likely anything else in the cell */
  transition: all 0.2s;
  font-size: 0.8rem;
}

/* Allowed last-child button to also sit on the boundary line */
.curr-cell:last-child .cell-add-btn {
  right: -12px;
}

.curr-cell:hover .cell-add-btn {
  display: flex !important;
}

.cell-add-btn:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-50%) scale(1.1);
}

.chip-btn.edit { color: #3b82f6; }
.chip-btn.delete { color: #ef4444; }

@media (max-width: 1400px) {
  #curriculum-section {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5rem 1rem 4rem;
  }
}


.curr-view {
  display: none;
  animation: fadeIn 0.3s ease-out;
}

.curr-view.active {
  display: block;
}

/* FullCalendar Resize */
#curr-fullcalendar {
  min-height: 600px;
}

/* Column Resize Handle */
.status-table th {
  position: relative;
}

.status-table th::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 1;
}

.status-table th::after:hover {
  background: rgba(74, 144, 226, 0.3);
}

.status-table th.resizing::after {
  background: rgba(74, 144, 226, 0.5);
}

/* Curriculum Modal Type Selector Redesign */
.type-selector-step {
  padding: 1rem 0;
}

.type-selector-step h3 {
  text-align: center;
  font-size: 1.2rem;
  color: var(--text-main, #1e293b);
  margin-bottom: 2rem;
  font-weight: 700;
}

.type-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
}

.type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: white;
  border: 2px solid #f1f5f9;
  border-radius: 1.5rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 1rem;
}

.type-card i {
  font-size: 2.5rem;
  transition: transform 0.3s;
}

.type-card span {
  font-size: 1.1rem;
  font-weight: 700;
  color: #475569;
}

.type-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
  border-color: transparent;
}

/* Type Specific Colors */
.type-card[data-type="edu"] {
  color: #3b82f6; /* Blue */
}
.type-card[data-type="edu"]:hover {
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
  border-color: #3b82f6;
}

.type-card[data-type="staff"] {
  color: #10b981; /* Green */
}
.type-card[data-type="staff"]:hover {
  background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
  border-color: #10b981;
}

.type-card[data-type="doc"] {
  color: #8b5cf6; /* Purple */
}
.type-card[data-type="doc"]:hover {
  background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 100%);
  border-color: #8b5cf6;
}

.type-card[data-type="life"] {
  color: #f59e0b; /* Amber */
}
.type-card[data-type="life"]:hover {
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
  border-color: #f59e0b;
}

.type-card:hover i {
  transform: scale(1.1);
}

/* Modal Footer Hide on Step 1 */
#currModal .modal-footer {
  display: none; /* Step 1?먯꽌??footer(?€??踰꾪듉 ?? ?④? */
}
#currModal.step-2 .modal-footer {
  display: flex; /* Step 2(?낅젰)?먯꽌??蹂댁엫 */
}

/* === Curriculum Modal New Design === */

/* 1. Type Tabs */
.curr-type-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  background: #f8fafc;
  padding: 0.4rem;
  border-radius: 12px;
}

.curr-type-tab {
  flex: 1;
  padding: 0.8rem;
  text-align: center;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  background: transparent;
}

.curr-type-tab:hover {
  background: rgba(255, 255, 255, 0.5);
  color: #334155;
}

.curr-type-tab.active {
  background: #3b82f6; /* Blue for Edu defaulted, will be overridden by JS */
  color: white;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

/* 2. Form Layout */
.curr-form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.2rem;
  align-items: flex-end;
}

.curr-form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.curr-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #64748b;
}

.curr-label.required::after {
  content: "*";
  color: #ef4444;
  margin-left: 0.2rem;
}

.curr-input {
  padding: 0.8rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.95rem;
  background: #f8fafc;
  transition: all 0.2s;
}

.curr-input:focus {
  background: white;
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 3. Holiday Checkbox */
.holiday-check-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  height: 48px; /* Match input height */
  white-space: nowrap;
}

.holiday-check-wrapper input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: #ef4444;
}

.holiday-check-wrapper span {
  font-weight: 700;
  color: #64748b;
  font-size: 0.95rem;
}
/* Color Palette */
.color-palette {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.palette-item {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.palette-item.selected {
  transform: scale(1.1);
  border-color: #3b82f6; /* Blue ring for selection */
  box-shadow: 0 0 0 2px white, 0 0 0 4px #3b82f6;
}

.palette-item:hover {
  transform: scale(1.1);
}

/* Modal Buttons cleanup */
.curr-btn-secondary, .curr-btn-primary {
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.curr-btn-secondary {
  background: #f1f5f9;
  color: #64748b;
}

.curr-btn-secondary:hover {
  background: #e2e8f0;
  color: #334155;
}

.curr-btn-primary {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.3);
}

.curr-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(79, 70, 229, 0.4);
}


/* Tooltip Refinement */
.curr-event-chip[data-tooltip]::after {
    text-align: left; /* Ensure left align for multi-line */
}

.is-holiday-row {
  background-color: #fff5f5 !important;
}
.is-holiday-row .curr-cell {
  color: #ef4444 !important;
}
.is-holiday-row .date-cell, 
.is-holiday-row .day-cell {
  color: #ef4444 !important;
}

/* 4. Time Selector */
.time-selector-container {
  background: #f8fafc;
  border-radius: 12px;
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
  margin-bottom: 1.2rem;
}

.time-mode-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 0.5rem;
  margin-bottom: 0.8rem;
}

.time-mode-tab {
  flex: 1;
  padding: 0.6rem;
  font-size: 0.9rem;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  color: #94a3b8;
  font-weight: 600;
}

.time-mode-tab i {
  margin-right: 0.4rem;
}

.time-mode-tab.active {
  background: white;
  color: #3b82f6;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.time-input-area {
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.time-separator {
  color: #cbd5e1;
  font-weight: 700;
  margin: 0 0.5rem;
}

.class-select {
  padding: 0.6rem;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  font-size: 1rem;
  font-weight: 600;
  color: #334155;
  min-width: 100px;
}

/* Reduce Modal Height */
#currModal .modal-header { padding: 1rem 1.5rem !important; }
#currModal .modal-body { padding: 1rem 1.5rem !important; }
#currModal .modal-footer { padding: 0.8rem 1.5rem !important; }
#currModal .curr-type-tabs { margin-bottom: 1rem !important; padding: 0.3rem !important; }
#currModal .curr-form-row { margin-bottom: 0.7rem !important; }
#currModal .curr-input { padding: 0.5rem 0.8rem !important; }
#currModal .holiday-check-wrapper { padding: 0.5rem 0.8rem !important; height: 38px !important; }
#currModal .time-selector-container { margin-bottom: 0.7rem !important; padding: 0.4rem !important; }
#currModal .time-mode-tabs { margin-bottom: 0.5rem !important; }
#currModal .curr-type-tab { padding: 0.6rem !important; }
#currModal .time-mode-tab { padding: 0.4rem !important; }
#currModal .modal-content.modal-lg { max-width: 750px !important; }

/* === Date Selector (날짜 / 기간) — matches .time-selector-container pattern === */
.curr-date-selector-container {
  background: #f8fafc;
  border-radius: 12px;
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
  margin-bottom: 1.2rem;
}
.curr-date-mode-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 0.5rem;
  margin-bottom: 0.8rem;
}
.curr-date-mode-tab {
  flex: 1;
  padding: 0.6rem;
  font-size: 0.9rem;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  color: #94a3b8;
  font-weight: 600;
  transition: all 0.15s ease;
  user-select: none;
}
.curr-date-mode-tab i {
  margin-right: 0.4rem;
}
.curr-date-mode-tab:hover {
  color: #475569;
}
.curr-date-mode-tab.active {
  background: white;
  color: #3b82f6;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.curr-date-input-area {
  padding: 0.3rem 0.2rem;
}
.curr-range-inputs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.curr-range-inputs .curr-input {
  flex: 1;
  min-width: 0;
  background: white;
}
.curr-range-inputs .range-separator {
  color: #94a3b8;
  font-weight: 700;
  flex-shrink: 0;
}
#curr-date-single-wrap .curr-input {
  width: 100%;
  background: white;
}

/* Display mode options — horizontal compact bars, 2×2 grid */
.curr-display-mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.7rem;
}
.display-mode-opt {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  background: white;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.display-mode-opt:hover {
  border-color: #94a3b8;
}
.display-mode-opt.active {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.08);
}
.dmo-visual {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}
.dmo-bar {
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: #e2e8f0;
}
.dmo-bar.filled {
  background: #94a3b8;
}
.display-mode-opt.active .dmo-bar.filled {
  background: #3b82f6;
}
.dmo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.2;
}
.dmo-text strong {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
}
.dmo-text small {
  font-size: 0.7rem;
  color: #64748b;
}
.display-mode-opt.active .dmo-text strong {
  color: #1d4ed8;
}

/* Range chip indicator (date range like 5/22~5/24 inside the chip) */
.curr-event-chip .chip-range {
  font-weight: 700;
  opacity: 0.85;
}
.curr-event-chip.is-range-chip {
  cursor: default;
}

/* Recurring event chip icon */
.curr-recur-icon {
  font-size: 0.7em;
  margin-right: 3px;
  opacity: 0.55;
}

/* === Recurring mode UI === */
.recur-method-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.recur-method-tab {
  flex: 1;
  padding: 0.45rem;
  text-align: center;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #94a3b8;
  background: white;
  border: 1.5px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.recur-method-tab i {
  margin-right: 0.3rem;
}
.recur-method-tab:hover {
  border-color: #cbd5e1;
}
.recur-method-tab.active {
  border-color: #3b82f6;
  background: #eff6ff;
  color: #1d4ed8;
}
.recur-field-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
  margin: 0.6rem 0 0.4rem;
}
.recur-req {
  color: #ef4444;
}
.recur-weekday-chips {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.recur-wd-chip {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0;
  background: white;
  font-size: 0.88rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}
.recur-wd-chip.wd-sun { color: #ef4444; }
.recur-wd-chip.wd-sat { color: #3b82f6; }
.recur-wd-chip:hover { border-color: #94a3b8; }
.recur-wd-chip.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}
.recur-wd-chip.active.wd-sun,
.recur-wd-chip.active.wd-sat {
  color: white;
}
.recur-period-inputs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.recur-period-inputs .curr-input {
  flex: 1;
  min-width: 0;
  background: white;
}
.recur-input-disabled {
  background: #f1f5f9 !important;
  color: #cbd5e1 !important;
}
.recur-infinite-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
}
.recur-infinite-check small {
  color: #94a3b8;
  font-weight: 500;
}
.recur-date-adder {
  display: flex;
  gap: 0.5rem;
}
.recur-date-adder .curr-input {
  flex: 1;
  min-width: 0;
  background: white;
}
.recur-add-btn {
  padding: 0 1rem;
  border-radius: 8px;
  border: none;
  background: #3b82f6;
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.recur-add-btn:hover {
  background: #2563eb;
}
.recur-date-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
  max-height: 140px;
  overflow-y: auto;
}
.recur-date-list:empty::before {
  content: "추가된 날짜가 없습니다";
  color: #cbd5e1;
  font-size: 0.8rem;
}
.recur-date-chip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1d4ed8;
}
.recur-date-chip i {
  cursor: pointer;
  opacity: 0.6;
  font-size: 0.75rem;
}
.recur-date-chip i:hover {
  opacity: 1;
  color: #ef4444;
}

/* Recurring UI — dark mode */
body.dark-mode .recur-method-tab {
  background: rgba(255,255,255,0.03);
  border-color: rgba(148,163,184,0.22);
  color: #94a3b8;
}
body.dark-mode .recur-method-tab.active {
  background: rgba(59,130,246,0.12);
  border-color: #3b82f6;
  color: #93c5fd;
}
body.dark-mode .recur-field-label {
  color: #cbd5e1;
}
body.dark-mode .recur-wd-chip {
  background: rgba(255,255,255,0.03);
  border-color: rgba(148,163,184,0.22);
  color: #94a3b8;
}
body.dark-mode .recur-wd-chip.wd-sun { color: #fca5a5; }
body.dark-mode .recur-wd-chip.wd-sat { color: #93c5fd; }
body.dark-mode .recur-wd-chip.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}
body.dark-mode .recur-wd-chip.active.wd-sun,
body.dark-mode .recur-wd-chip.active.wd-sat {
  color: white;
}
body.dark-mode .recur-period-inputs .curr-input,
body.dark-mode .recur-date-adder .curr-input {
  background: rgba(255,255,255,0.04);
  color: #e2e8f0;
  border-color: rgba(148,163,184,0.22);
}
body.dark-mode .recur-input-disabled {
  background: rgba(255,255,255,0.02) !important;
  color: #64748b !important;
}
body.dark-mode .recur-infinite-check {
  color: #cbd5e1;
}
body.dark-mode .recur-date-chip {
  background: rgba(59,130,246,0.12);
  border-color: rgba(59,130,246,0.3);
  color: #93c5fd;
}

/* ==========================================================================
   학사일정 플로팅 위젯 (iOS/iPadOS 26 Liquid Glass 스타일)
   ========================================================================== */
.curr-float-widget {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9000; /* 모달(9999)보다 아래 — 모달이 위젯을 덮음 */
  width: 86px;
  display: none;
  opacity: 0;
  transform: translateY(16px) scale(0.92);
  transition: opacity 0.34s cubic-bezier(0.34, 1.4, 0.5, 1),
              transform 0.34s cubic-bezier(0.34, 1.4, 0.5, 1);
  user-select: none;
  -webkit-user-select: none;
}
.curr-float-widget.cfw-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.curr-float-widget.cfw-dragging {
  transition: none;
}

.cfw-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px;
  border-radius: 24px;
  /* 흰색 → 아주 옅은 블루 모노톤 그라데이션 (앱 블루 정체성과 조화) */
  background: linear-gradient(155deg,
              rgba(255, 255, 255, 0.82) 0%,
              rgba(219, 234, 254, 0.74) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(185%);
  backdrop-filter: blur(24px) saturate(185%);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 26px rgba(59, 130, 246, 0.26),
              0 2px 10px rgba(15, 23, 42, 0.12);
  cursor: grab;
  overflow: hidden;
  animation: cfw-float 4s ease-in-out infinite;
}
/* 유리 광택 (specular) */
.cfw-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.55) 0%, transparent 48%);
  pointer-events: none;
}
@keyframes cfw-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.curr-float-widget.cfw-dragging .cfw-inner {
  animation: none;
  transform: scale(1.05);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.30);
  cursor: grabbing;
}

/* 드래그 핸들 (iOS 그래버) */
.cfw-grabber {
  width: 26px;
  height: 4px;
  border-radius: 2px;
  background: rgba(15, 23, 42, 0.18);
  margin: 2px auto 3px;
  flex-shrink: 0;
}

/* 월 이동 영역 */
.cfw-month-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cfw-step-btn {
  width: 100%;
  height: 24px;
  border: none;
  background: transparent;
  color: #475569;
  font-size: 0.78rem;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s ease, transform 0.1s ease;
}
.cfw-step-btn:hover { background: rgba(15, 23, 42, 0.06); }
.cfw-step-btn:active { transform: scale(0.86); background: rgba(59, 130, 246, 0.16); }

.cfw-month-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 3px 0 4px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cfw-month-display:hover { background: rgba(59, 130, 246, 0.10); }
.cfw-month-num {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  color: #1e293b;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.cfw-month-input {
  width: 46px;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  border: none;
  outline: none;
  padding: 0;
  border-radius: 8px;
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.14);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.cfw-year {
  margin-top: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #94a3b8;
}

.cfw-divider {
  height: 1px;
  background: rgba(15, 23, 42, 0.10);
  margin: 3px 5px;
  flex-shrink: 0;
}

/* 액션 버튼 */
.cfw-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cfw-action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 7px;
  border: none;
  background: transparent;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: 11px;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.1s ease;
}
.cfw-action-btn i {
  width: 15px;
  text-align: center;
  font-size: 0.85rem;
  color: #3b82f6;
}
.cfw-action-btn:hover { background: rgba(15, 23, 42, 0.06); }
.cfw-action-btn:active { transform: scale(0.93); background: rgba(59, 130, 246, 0.14); }
.cfw-today i { color: #ef4444; }

/* 월별 달력 보기에서는 위/아래 버튼 숨김 */
.curr-float-widget.cfw-calendar-mode .cfw-top,
.curr-float-widget.cfw-calendar-mode .cfw-bottom {
  display: none;
}

/* 다크모드 */
body.dark-mode .cfw-inner {
  /* 다크모드: 블루 톤을 머금은 어두운 그라데이션 */
  background: linear-gradient(155deg,
              rgba(42, 50, 70, 0.68) 0%,
              rgba(30, 38, 60, 0.68) 100%);
  border-color: rgba(148, 175, 235, 0.16);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.46),
              0 0 0 1px rgba(96, 165, 250, 0.12);
}
body.dark-mode .cfw-inner::before {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.04) 0%, transparent 55%);
}
body.dark-mode .cfw-grabber { background: rgba(255, 255, 255, 0.22); }
body.dark-mode .cfw-step-btn { color: #cbd5e1; }
body.dark-mode .cfw-step-btn:hover { background: rgba(255, 255, 255, 0.07); }
body.dark-mode .cfw-month-num { color: #f1f5f9; }
body.dark-mode .cfw-month-display:hover { background: rgba(96, 165, 250, 0.16); }
body.dark-mode .cfw-month-input { background: rgba(96, 165, 250, 0.20); color: #93c5fd; }
body.dark-mode .cfw-year { color: #64748b; }
body.dark-mode .cfw-divider { background: rgba(255, 255, 255, 0.10); }
body.dark-mode .cfw-action-btn { color: #e2e8f0; }
body.dark-mode .cfw-action-btn:hover { background: rgba(255, 255, 255, 0.07); }
body.dark-mode .cfw-action-btn i { color: #60a5fa; }
body.dark-mode .cfw-today i { color: #f87171; }

/* 모바일 화면비에서는 위젯 비활성화 */
@media (max-width: 768px) {
  .curr-float-widget { display: none !important; }
}

/* Compact spacing inside modal */
#currModal .curr-date-selector-container { margin-bottom: 0.7rem !important; padding: 0.4rem !important; }
#currModal .curr-date-mode-tabs { margin-bottom: 0.5rem !important; padding-bottom: 0.4rem !important; }
#currModal .curr-date-mode-tab { padding: 0.4rem !important; }

/* Dark mode adjustments */
body.dark-mode .curr-date-selector-container {
  background: rgba(255,255,255,0.02);
  border-color: rgba(148,163,184,0.2);
}
body.dark-mode .curr-date-mode-tabs {
  border-bottom-color: rgba(148,163,184,0.18);
}
body.dark-mode .curr-date-mode-tab {
  color: #94a3b8;
}
body.dark-mode .curr-date-mode-tab.active {
  background: rgba(255,255,255,0.06);
  color: #93c5fd;
  box-shadow: none;
}
body.dark-mode .curr-range-inputs .curr-input,
body.dark-mode #curr-date-single-wrap .curr-input {
  background: rgba(255,255,255,0.04);
  color: #e2e8f0;
  border-color: rgba(148,163,184,0.22);
}
body.dark-mode .display-mode-opt {
  background: rgba(255,255,255,0.03);
  border-color: rgba(148,163,184,0.22);
}
body.dark-mode .display-mode-opt:hover {
  border-color: rgba(148,163,184,0.4);
}
body.dark-mode .display-mode-opt.active {
  background: rgba(59, 130, 246, 0.12);
  border-color: #3b82f6;
}
body.dark-mode .dmo-bar {
  background: rgba(148,163,184,0.2);
}
body.dark-mode .dmo-bar.filled {
  background: #64748b;
}
body.dark-mode .display-mode-opt.active .dmo-bar.filled {
  background: #60a5fa;
}
body.dark-mode .dmo-text strong {
  color: #e2e8f0;
}
body.dark-mode .dmo-text small {
  color: #94a3b8;
}
body.dark-mode .display-mode-opt.active .dmo-text strong {
  color: #93c5fd;
}

/* === Member Confirmation Bar (iOS 26 status panel) === */
.curr-member-confirm-bar {
  margin-bottom: 1.4rem;
  overflow-x: auto;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 6px 22px -8px rgba(15, 23, 42, 0.14),
              0 1px 3px rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.05);
  padding: 6px 8px;
  position: relative;
}

.confirm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 800px;
}

.confirm-table th {
  background: transparent;
  color: #475569;
  padding: 0.55rem 0.5rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  text-align: center;
}

.confirm-table td {
  padding: 0.6rem 0.45rem;
  border: none;
  text-align: center;
}

.confirm-table .row-label {
  background: rgba(15, 23, 42, 0.04) !important;
  color: #475569;
  width: 84px;
  font-weight: 800;
  font-size: 0.8rem;
  border-radius: 12px;
}
.confirm-table th.row-label {
  color: #64748b;
}

.confirm-select {
  appearance: none;
  border: none;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  font-size: 0.79rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: transform 0.18s cubic-bezier(0.34, 1.5, 0.5, 1),
              box-shadow 0.2s ease, background-color 0.2s ease;
  width: auto;
  min-width: 86px;
}
.confirm-select:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px -3px rgba(15, 23, 42, 0.18);
}
.confirm-select:active {
  transform: scale(0.94);
}

/* Style the options explicitly with CSS variables for dark mode support */
.confirm-select option[value="미확인"] {
  background-color: var(--unconfirmed-option-bg, #fee2e2);
  color: var(--unconfirmed-text, #ef4444);
}

.confirm-select option[value="확인"] {
  background-color: var(--confirmed-option-bg, #dcfce7);
  color: var(--confirmed-text, #22c55e);
}

/* Base styles for the select itself based on class — borderless soft iOS pills */
.confirm-select.status-unconfirmed {
  background-color: var(--unconfirmed-bg, #fef2f2);
  color: var(--unconfirmed-text, #ef4444);
  border: none;
}

.confirm-select.status-confirmed {
  background-color: var(--confirmed-bg, #f0fdf4);
  color: var(--confirmed-text, #16a34a);
  border: none;
}

body.dark-mode {
  --unconfirmed-bg: rgba(239, 68, 68, 0.15); /* 諛섑닾紐?(select 踰꾪듉 ?먯껜 諛곌꼍) */
  --unconfirmed-option-bg: #2d1b24; /* 遺덊닾紐?(?듭뀡 紐⑸줉 諛곌꼍) - ?먯뿰?ㅻ윭???ㅽ겕 ?덈뱶??*/
  --unconfirmed-text: #fc8181;
  --confirmed-bg: rgba(34, 197, 94, 0.15); /* 諛섑닾紐?(select 踰꾪듉 ?먯껜 諛곌꼍) */
  --confirmed-option-bg: #1c2b23; /* 遺덊닾紐?(?듭뀡 紐⑸줉 諛곌꼍) - ?먯뿰?ㅻ윭???ㅽ겕 洹몃┛??*/
  --confirmed-text: #68d391;
}

.member-settings-btn {
  position: absolute;
  right: 0.6rem;
  top: 0.55rem;
  background: rgba(15, 23, 42, 0.05);
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 0.35rem 0.45rem;
  border-radius: 9px;
  transition: transform 0.18s cubic-bezier(0.34, 1.5, 0.5, 1),
              background-color 0.2s ease, color 0.2s ease;
  z-index: 10;
}

.member-settings-btn:hover {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}
.member-settings-btn:active {
  transform: scale(0.9);
}

/* Member Settings Modal */
.member-settings-content {
    max-width: 500px;
}

.member-list-textarea {
    width: 100%;
    height: 150px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    resize: vertical;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 10px;
}

.modal-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

/* Auto-generated Holiday Chips */
.is-auto-chip {
    border: 1px dashed rgba(0,0,0,0.1);
    opacity: 0.9;
    cursor: default !important;
}
.is-auto-chip:hover {
    transform: none !important;
}


/* Highlight InCharge in Chips */
.chip-incharge {
    font-weight: 700;
    color: #1e40af; /* Darker blue */
    background: rgba(30, 64, 175, 0.1);
    padding: 0 4px;
    border-radius: 4px;
    text-decoration: underline;
}



/* Custom Event Chip Styles (Overridden above) */
.curr-event-chip {
    margin-bottom: 2px;
    border: none;
}

.curr-event-chip::before {
    content: '•';
    margin-right: 2px;
    flex-shrink: 0;
    margin-top: 1px; /* Align with first line text */
}

/* Tooltip Concept */
.curr-event-chip[data-tooltip] {
    position: relative;
}

/* Document Checklist Styles */
.doc-chip {
    padding-left: 6px !important;
}

.doc-chip::before {
    display: none !important; /* Hide bullet for docs */
}

.doc-checkbox {
    margin-right: 6px;
    cursor: pointer;
    width: 14px;
    height: 14px;
    accent-color: #8b5cf6; /* Match doc theme color */
}

.completed-text {
    text-decoration: line-through;
    opacity: 0.6;
    color: #888;
}

/* Bulk Doc Input Styles */
.doc-bulk-container {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1rem;
    background: #f1f5f9;
    padding: 1rem;
    border-radius: 12px;
}

.curr-doc-bulk-row {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    animation: slideDown 0.2s ease-out;
    background: white;
    padding: 0.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.doc-row-remove-btn {
    background: #fee2e2;
    color: #ef4444;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.doc-row-remove-btn:hover {
    background: #fecaca;
    transform: scale(1.05);
}

.add-doc-row-btn {
    width: 100%;
    padding: 0.8rem;
    background: white;
    border: 2.2px dashed #cbd5e1;
    color: #475569;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.add-doc-row-btn:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
}

/* Inline Color Picker for rows */
.inline-color-picker {
    position: relative;
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    align-items: center;
}

.color-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.color-label {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    line-height: 1;
}

.color-trigger {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.1);
}

.color-trigger:hover {
    transform: scale(1.1);
    border-color: #cbd5e1;
}

.color-popover {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    z-index: 1100;
    display: none;
    margin-bottom: 8px;
}

.color-popover.active {
    display: block;
}

.mini-palette {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.mini-color-opt {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.05);
}

.mini-color-opt:hover {
    transform: scale(1.1);
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Truncation for long text */
.doc-chip .chip-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    mask-image: linear-gradient(to right, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
    width: 100%;
}

.curr-event-chip[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: rgba(30, 41, 59, 0.95);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 1rem; /* Larger font size */
    font-weight: 500;
    white-space: pre-wrap;
    width: max-content;
    max-width: 300px; /* Limit width */
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    max-width: 220px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    line-height: 1.5;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.1);
}

.curr-event-chip[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/* === FullCalendar Special Days Styling === */
.fc-daygrid-day-top {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 2px 8px !important;
}

/* ?ㅼ쭏?곸쑝濡??レ옄媛€ ?ㅼ뼱?덈뒗 留곹겕 而⑦뀒?대꼫??flex濡??ㅼ젙 */
.fc-daygrid-day-number {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    font-weight: 800;
    font-size: 1.1rem;
    text-decoration: none !important;
    /* 셀 너비를 넘지 않도록 제약 (특별일 텍스트 오버플로 방지) */
    flex: 1 1 0 !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.fc-special-days-list {
    /* 남은 가로 공간만 차지하고, 그 안에서 잘라냄 */
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    pointer-events: none;
}

.fc-special-day-item {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.75rem;
    color: #3b82f6;
    font-weight: 700;
    background: transparent !important;
    border: none !important;
    /* 칸 경계에서 페이드 아웃 (텍스트가 길 때만 끝부분이 흐려짐) */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
    /* 호버 시 상세 툴팁을 띄우기 위해 포인터 이벤트 허용 */
    pointer-events: auto;
    cursor: default;
}

/* ?붿씪蹂??됱긽 ?좎? (FullCalendar) */
.fc-day-sun .fc-daygrid-day-number { color: #ef4444; } /* ?쇱슂??鍮④컯 */
.fc-day-sat .fc-daygrid-day-number { color: #3b82f6; } /* ?좎슂???뚮옉 */

/* === FullCalendar Event Custom Styling === */
#curr-fullcalendar .fc-daygrid-event {
    margin: 1px 4px !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(59, 130, 246, 0.1) !important;
    background-color: #f0f7ff !important; /* ?고븳 ?뚮???諛곌꼍 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    border-left: 3px solid #3b82f6 !important; /* ?뚮???媛뺤“ 諛?*/
}

#curr-fullcalendar .fc-daygrid-event:hover {
    background-color: #e0efff !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.1) !important;
}

#curr-fullcalendar .fc-event-main {
    padding: 0 !important;
}

#curr-fullcalendar .fc-event-title {
    font-size: 0.72rem !important; /* 湲€???ш린 ??異뺤냼 */
    font-weight: 800 !important;
    color: #1e40af !important; /* 吏숈? ?뚮????띿뒪??*/
    white-space: nowrap !important;
}

/* === Table View Today Badge Style === */
.date-cell.is-today {
    position: relative;
    background: rgba(74, 144, 226, 0.05); /* ?ㅻ뒛 ?좎쭨 ?€ 諛곌꼍 ?꾩＜ ?고븯寃?*/
}

/* === Today Badge Style (Final High-Priority) === */

/* 1. Base Badge Style (Common) */
.today-badge {
    position: absolute;
    top: -22px; /* ?レ옄???쇱そ 癒몃━ ?꾩そ */
    left: -15px;
    background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
    color: white;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 12px;
    border-radius: 30px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
    z-index: 1000; /* Adjusted to be below modal (9999) but above calendar content */
    white-space: nowrap;
    animation: todayBounce 2s infinite ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.today-badge::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #34a853;
}

@keyframes todayBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* 2. FullCalendar Specific Clipping Prevention */

/* 罹섎┛??猷⑦듃?€ 酉??섎땲?ㅼ쓽 媛€?먭린 ?댁젣 */
#curr-fullcalendar,
.fc,
.fc-view-harness,
.fc-view {
    overflow: visible !important;
}

/* ?ㅽ겕濡ㅻ윭?€ ?섎땲?ㅼ쓽 媛€?먭린 ?댁젣 諛?transform ?쒓굅 (?ㅽ깮 而⑦뀓?ㅽ듃 諛⑹?) */
.fc-scroller-harness,
.fc-scroller {
    overflow: visible !important;
    transform: none !important;
    z-index: auto !important;
}

/* 헤더(요일명 행)가 이벤트 셀보다 항상 위에 렌더링되도록 z-index 설정 */
#curr-fullcalendar .fc-scrollgrid-section-header,
#curr-fullcalendar .fc-scrollgrid-section-header > td {
    position: relative !important;
    z-index: 200 !important;
}

/* ?ㅻ뜑蹂대떎 ?꾨줈 ?щ씪?ㅺ린 ?꾪빐 諛붾뵒 ?뱀뀡???곗꽑?쒖쐞 ?곹뼢 */
.fc-scrollgrid-section-body {
    position: relative !important;
    z-index: 10 !important;
}

/* ?ㅻ뒛 ?좎쭨 ?€怨?洹??대? ?붿냼?ㅼ쓽 紐⑤뱺 媛€???댁젣 */
.fc-day-today,
.fc-day-today .fc-daygrid-day-frame,
.fc-day-today .fc-daygrid-day-top,
.fc-day-today .fc-daygrid-day-number,
.fc-daygrid-day-number {
    position: relative !important;
    overflow: visible !important;
    z-index: 100 !important;
}

/* 泥?踰덉㎏ 以?諛곗? 怨듦컙 ?뺣낫瑜??꾪븳 ?곷떒 ?⑤뵫 */
#curr-fullcalendar {
    margin-top: 30px;
}

/* ??蹂닿린(Table View) ?ㅻ뒛 ?좎쭨 諛곌꼍 */
.date-cell.is-today {
    position: relative;
    background: rgba(74, 144, 226, 0.05);
    overflow: visible !important;
}

/* FullCalendar ?ㅻ뒛 ?좎쭨 ?щ챸 諛곌꼍???섏젙 */
.fc-day-today {
    background-color: rgba(66, 133, 244, 0.04) !important;
}

/* === Calendar Month Transition Animation === */
#curr-fullcalendar {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.calendar-anim-next {
    animation: slideNext 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.calendar-anim-prev {
    animation: slidePrev 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes slideNext {
    0% { transform: translateY(30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes slidePrev {
    0% { transform: translateY(-30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* === Tab-specific Background Effects (Premium Soft Gradients) === */

/* Base common style for background pseudo-elements */
#status-section::before,
#curriculum-section::before,
#datayard-section::before,
#helppage-section::before,
#account-section::before,
#bus-section::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    pointer-events: none;
    background-size: 400% 400%;
    animation: tabBgFlow 25s ease infinite;
    opacity: 0.7;
}

body.dark-mode #status-section::before,
body.dark-mode #curriculum-section::before,
body.dark-mode #datayard-section::before,
body.dark-mode #helppage-section::before,
body.dark-mode #account-section::before,
body.dark-mode #bus-section::before {
    display: none !important;
}

/* Subtle Moving Background Animation */
@keyframes tabBgFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 1. ?숆탳?꾪솴 (Status) - Soft Blue & Aurora */
#status-section::before {
    background: linear-gradient(-45deg, #f0f9ff, #e0f2fe, #fdf2f8, #f0f9ff);
}

/* 2. 援먯쑁怨쇱젙 (Curriculum) - Soft Emerald & Mint */
#curriculum-section::before {
    background: linear-gradient(-45deg, #f0fdf4, #dcfce7, #f0f9ff, #f0fdf4);
}


/* 4. ?먮즺留덈떦 (Datayard) - Soft Lavender & Mist */
#datayard-section::before {
    background: linear-gradient(-45deg, #f5f3ff, #ede9fe, #fdf4ff, #f5f3ff);
}

/* 5. ?⑦븰援?e吏€??(Support) - Soft Rose & Peach */
#helppage-section::before {
    background: linear-gradient(-45deg, #fff1f2, #ffe4e6, #fff7ed, #fff1f2);
}

/* 6. ?숆탳怨꾩젙 (Account) - Soft Violet & Slate */
#account-section::before {
    background: linear-gradient(-45deg, #f5f3ff, #ede9fe, #f8fafc, #f5f3ff);
}

/* 7. 諛곗감?좎껌 (Bus) - Soft Cyan & Sky */
#bus-section::before {
    background: linear-gradient(-45deg, #ecfeff, #cffafe, #f0f9ff, #ecfeff);
}

/* Ensure sections themselves don't block the background entirely */
.status-section, 
.category-content {
    background: transparent !important; /* ?щ챸?섍쾶 ?ㅼ젙?섏뿬 諛곌꼍 洹몃씪?곗씠?섏씠 蹂댁씠寃???*/
    box-shadow: none !important; /* ?낆껜媛먯? ?대? 移대뱶?먯꽌 泥섎━?섎룄濡??좊룄 */
}

/* Each section's main container should keep its card-like feel if requested, 
   but since the user said "sections feel indistinguishable", 
   moving the color to the page background is the best approach. 
   Internal cards will remain white for best readability. */

/* ================= School Account Section Styles ================= */
#account-section {
    max-width: 1250px; /* Reduced to maintain right alignment while shifting */
    margin-left: 370px; /* Increased by 50px (320px -> 370px) */
    margin-right: auto;
    padding: 10px 2% 4rem;
}

.section-controls {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    padding: 0;
}

#account-section .account-table-wrapper {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-color);
    margin-top: 0.5rem;
    overflow: visible; /* sticky ?ㅻ뜑瑜??꾪빐 visible濡?蹂€寃쏀븯嫄곕굹 ?ㅽ겕濡?而⑦뀒?대꼫瑜?議곗젙 */
}

#account-section .account-table {
    width: 100%;
    border-collapse: separate; /* sticky ?뚯닔???쎌? 諛??뚮몢由?臾몄젣瑜??꾪빐 separate 沅뚯옣 */
    border-spacing: 0;
    text-align: left;
    table-layout: fixed;
}

#account-section .account-table th {
    position: sticky;
    top: -1px;
    z-index: 100;
    background: var(--table-header);
    padding: 0.8rem 1rem;
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.9rem;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

#account-section .account-table td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.92rem;
    color: var(--text-main);
    vertical-align: middle;
}

#account-section .account-table tbody tr:hover {
    background-color: var(--bg-color);
}

#account-section .account-table tr td:first-child {
    text-align: center;
    color: #94a3b8;
    font-weight: 600;
}

/* ?쒕퉬?ㅻ챸 留곹겕 ?ㅽ???*/
#account-section .account-service-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 2px;
    transition: all 0.2s;
}

#account-section .account-service-link:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    filter: brightness(1.1);
}

/* 怨꾩젙 ?뺣낫 蹂듭궗 ?곸뿭 - 吏곴????④낵 */
#account-section .copyable-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.8rem;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    transition: all 0.2s;
    width: 100%;
    margin: 0;
    color: var(--text-main);
}

#account-section .copyable-field:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #2563eb;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
}

#account-section .copyable-field::after {
    content: '\f0c5';
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    font-size: 0.75rem;
    opacity: 0.4;
}

#account-section .copyable-field:hover::after {
    opacity: 1;
    color: #3b82f6;
}

/* 鍮꾧퀬 移? ?쇰컲?곸씤 ?쒖쓽 紐⑥뒿 */
#account-section .account-note {
    font-size: 0.9rem;
    color: #64748b;
    white-space: normal;
    word-break: break-all;
    background: transparent;
    padding: 0;
    border: none;
}

/* ?쒕옒洹??몃뱾 */
#account-section .drag-handle {
    cursor: grab;
    color: #cbd5e1;
    font-size: 0.8rem;
    margin-right: 6px;
}

/* ?ㅽ겕濡ㅻ컮 理쒖쟻??*/
#account-section .account-table-wrapper::-webkit-scrollbar {
    height: 6px;
}
#account-section .account-table-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

/* 紐⑤뱶蹂?愿€由?而щ읆 */
#account-section .edit-col {
    text-align: center;
}

#account-section .account-actions {
    display: flex;
    gap: 5px;
    justify-content: center;
}

/* ================= Bus Request Section Styles ================= */
#bus-section {
    max-width: calc(100% - 370px - 90px); /* ?쇱そ ?꾩젽 怨듦컙 370px濡??뺣? (湲곗〈 320px) */
    margin-left: 370px;
    margin-right: 90px;
    padding: 0 0 4rem;
}

#bus-section .bus-table-wrapper {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-color);
    margin-top: 0.5rem;
    overflow-x: auto; /* 媛€濡??ㅽ겕濡??덉슜 */
}

#bus-section .bus-table {
    width: 100%;
    min-width: auto; /* 怨좎젙 理쒖냼 ?덈퉬 ?쒓굅 */
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
}

#bus-section .bus-table th {
    position: sticky;
    top: -1px;
    z-index: 100;
    background: var(--table-header);
    padding: 0.6rem 0.4rem;
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.8rem;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
    text-align: center;
    transition: background 0.2s;
}

#bus-section .bus-table th[data-sort]:hover {
    background: #f1f5f9;
}

#bus-section .bus-table th i.fa-sort,
#bus-section .bus-table th i.fa-sort-up,
#bus-section .bus-table th i.fa-sort-down {
    margin-left: 4px;
    font-size: 0.7rem;
    color: #cbd5e1;
}

#bus-section .bus-table th.active-sort {
    color: var(--primary-color);
}

#bus-section .bus-table th.active-sort i {
    color: var(--primary-color);
}

#bus-section .bus-table td {
    padding: 0.4rem 0.3rem; 
    border-bottom: 1px solid var(--border-color);
    font-size: 0.82rem;
    color: var(--text-main);
    vertical-align: middle;
    text-align: center;
    background: var(--card-bg);
}

#bus-section .bus-table tbody tr:hover {
    background-color: #fbfcfe;
}

/* Status Badges */
.badge-region {
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.75rem;
}
.badge-region.관내 { background: #dcfce7; color: #15803d; }
.badge-region.관외 { background: #dbeafe; color: #1e40af; }

/* Bus Status Badges */
.badge-bus-status {
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.75rem;
    white-space: nowrap;
}
.badge-bus-status.pending {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid rgba(194, 65, 12, 0.1);
}
.badge-bus-status.completed {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.1);
}

.badge-bus-type {
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem;
}

/* 차형별 색상 (이미지 기반) */
[data-bus-type*="소형"] { background: #ffedd5; color: #9a3412; }
[data-bus-type*="중형"] { background: #f3e8ff; color: #6b21a8; }
[data-bus-type*="대형"] { background: #fee2e2; color: #991b1b; }

.badge-use-school {
    padding: 3px 6px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.7rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.badge-use-school.Y { background: #dbeafe; color: #1e40af; border: 1px solid rgba(30, 64, 175, 0.1); }
.badge-use-school.N { background: #fee2e2; color: #991b1b; border: 1px solid rgba(153, 27, 27, 0.1); }

#bus-section .bus-table-wrapper.spreadsheet-mode td {
    padding: 2px 3px; /* ?낅젰 ?꾨뱶瑜??꾪빐 ?⑤뵫 理쒖냼??*/
}

#bus-section .bus-input, 
#bus-section .bus-select {
    width: 100%;
    padding: 4px 6px; /* ?대? ?⑤뵫 異뺤냼 */
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 0.8rem; /* ?낅젰 ?꾨뱶 湲€瑗?異뺤냼 */
    font-family: inherit;
    background: transparent;
    transition: all 0.2s;
    text-align: center; /* ?낅젰 諛??좏깮 ?꾨뱶 媛€?대뜲 ?뺣젹 */
}

#bus-section .bus-input:hover, 
#bus-section .bus-select:hover {
    background: rgba(0, 0, 0, 0.03);
}

#bus-section .bus-input:focus, 
#bus-section .bus-select:focus {
    background: white;
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

#bus-section .bus-input[type="number"] {
    text-align: center;
}

#bus-section .total-display {
    display: block;
    text-align: center;
    font-weight: 800;
    color: var(--primary-color);
    font-size: 0.95rem;
}

/* 諭껋? ?ㅽ??쇱쓣 ?대???怨좎묠 */
#bus-section .td-badge-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ================= Bus Table Filter Bar ================= */
.bus-filter-bar {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.bus-filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1rem;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.22s ease;
    box-shadow: 0 2px 8px rgba(59,130,246,0.25);
    letter-spacing: 0.01em;
}

.bus-filter-toggle-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(59,130,246,0.35);
}

/* ?댄뻾?꾨즺 踰꾪듉 - ?щ젅?댄듃 怨꾩뿴 */
.bus-filter-toggle-btn.is-done-view {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    box-shadow: 0 2px 8px rgba(100,116,139,0.3);
}
.bus-filter-toggle-btn.is-done-view:hover {
    box-shadow: 0 4px 14px rgba(100,116,139,0.4);
}

/* ?쒖꽦(?좏깮) ?곹깭 - 珥덈줉 怨꾩뿴 媛뺤“ + ?ㅼ???*/
.bus-filter-toggle-btn.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 3px 12px rgba(16,185,129,0.4);
    transform: translateY(-1px);
}
.bus-filter-toggle-btn.active:hover {
    box-shadow: 0 5px 16px rgba(16,185,129,0.5);
}

/* ?댄뻾?꾨즺 諭껋? (???덉뿉???ъ슜) */
.badge-bus-status.done {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid rgba(71, 85, 105, 0.15);
}


/* ================= Bus Dashboard (Month Tabs & Calendar) ================= */
.bus-dashboard-wrapper {
    margin-bottom: 2rem;
}

.bus-month-selector-wrapper {
    margin-bottom: 2rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.bus-month-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-glass);
    backdrop-filter: var(--blur);
    border: 1px solid var(--border-color);
    border-radius: 9999px; /* Pill shape like image */
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: var(--shadow-sm);
}

.bus-month-tab {
    padding: 0.6rem 1.25rem;
    border-radius: 9999px;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bus-month-tab:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
}

.bus-month-tab.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.bus-main-layout {
    display: flex;
    gap: 2rem;
    align-items: stretch;
}

.bus-calendar-glass-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.5rem;
    width: 340px;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
}

.bus-cal-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
}

.bus-cal-month {
    font-size: 1.5rem; font-weight: 800; color: var(--text-main);
    font-family: 'Outfit', sans-serif;
}

.bus-cal-nav { 
    background: #f1f5f9; 
    border: none;
    width: 32px; height: 32px; 
    border-radius: 8px; 
    color: var(--text-muted); 
    cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.bus-cal-nav:hover {
    background: #e2e8f0;
    color: var(--text-main);
}

.bus-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.bus-cal-label { font-size: 0.75rem; font-weight: 700; color: #94a3b8; margin-bottom: 0.5rem; }
.bus-cal-label.sun { color: #ef4444; }
.bus-cal-label.sat { color: #3b82f6; }

.bus-day-cell {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem; font-weight: 500;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    color: var(--text-main);
}
.bus-day-cell:hover:not(.empty) { background: #f1f5f9; }
.bus-day-cell.sun { color: #ef4444; }
.bus-day-cell.sat { color: #3b82f6; }
.bus-day-cell.has-data::after {
    content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; background: #f59e0b; border-radius: 50%;
}
.bus-day-cell.selected {
    background: white;
    border: 2px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    font-weight: 700;
}

.bus-day-cell.today {
    color: var(--primary-color);
    font-weight: 800;
}

.bus-schedule-glass-card {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    flex: 1;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.bus-sch-header {
    padding: 1.25rem 1.5rem;
    background: var(--card-bg); /* 諛깆뾽 諛곌꼍??*/
    border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    position: relative;
    overflow: hidden;
    transition: background 0.5s ease;
}

.bus-sch-header-content {
    display: flex; align-items: center; gap: 1rem;
    position: relative;
    z-index: 2;
}

.bus-sch-badge {
    background: #fef3c7;
    color: #d97706;
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    font-size: 0.95rem; font-weight: 800;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.bus-sch-title {
    font-family: 'Gaegu', cursive;
    font-size: 2.2rem; font-weight: 700; color: #1e293b;
    margin: 0;
    letter-spacing: 1px;
}

.bus-quick-add-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
    margin-left: 0.5rem;
}

.bus-quick-add-btn:hover {
    transform: scale(1.15) rotate(90deg);
    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.4);
    background: #2563eb;
}

.bus-quick-add-btn i {
    font-size: 1rem;
}

/* Seasonal Backgrounds with Dynamic Gradient Flow */
.bus-sch-header {
    background-size: 200% 200%;
    animation: busGradientFlow 12s ease infinite;
}

@keyframes busGradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 12 Months Unique Dynamic Backgrounds */
.bus-sch-header.month-1 { background-image: linear-gradient(45deg, #ff9a9e 0%, #fecfef 50%, #667eea 100%); }
.bus-sch-header.month-2 { background-image: linear-gradient(45deg, #1e3c72 0%, #2a5298 50%, #cfd9df 100%); }
.bus-sch-header.month-3 { background-image: linear-gradient(45deg, #f6d365 0%, #fda085 50%, #f3904f 100%); }
.bus-sch-header.month-4 { background-image: linear-gradient(45deg, #ffdde1 0%, #ee9ca7 50%, #ff9a9e 100%); }
.bus-sch-header.month-5 { background-image: linear-gradient(45deg, #84fab0 0%, #8fd3f4 50%, #eef2f3 100%); }
.bus-sch-header.month-6 { background-image: linear-gradient(45deg, #d4fc79 0%, #96e6a1 50%, #5d99c6 100%); }
.bus-sch-header.month-7 { background-image: linear-gradient(45deg, #2193b0 0%, #6dd5ed 50%, #1c92d2 100%); }
.bus-sch-header.month-8 { background-image: linear-gradient(45deg, #ff0844 0%, #ffb199 50%, #f093fb 100%); }
.bus-sch-header.month-9 { background-image: linear-gradient(45deg, #e0c3fc 0%, #8ec5fc 50%, #f6d365 100%); }
.bus-sch-header.month-10 { background-image: linear-gradient(45deg, #f6d365 0%, #fda085 50%, #ff4e50 100%); }
.bus-sch-header.month-11 { background-image: linear-gradient(45deg, #70433c 0%, #b08d57 50%, #d4d3dd 100%); }
.bus-sch-header.month-12 { background-image: linear-gradient(45deg, #00b09b 0%, #96c93d 50%, #cc2b5e 100%); }

.bus-sch-header::before {
    content:''; position:absolute; inset:0;
    background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.4), transparent 70%);
    pointer-events:none;
    mix-blend-mode: overlay;
    animation: busGlow 8s ease-in-out infinite alternate;
}

@keyframes busGlow {
    from { transform: scale(1) translate(0, 0); opacity: 0.3; }
    to { transform: scale(1.2) translate(-10%, 10%); opacity: 0.6; }
}

.bus-sch-header::after {
    content:''; position:absolute; inset:0;
    background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.2;
    pointer-events: none;
}

/* Bus Animation Area */
.bus-animation-area {
    position: absolute;
    right: 0;
    bottom: -15px; /* ?쎄컙 ?꾨옒濡?*/
    width: 280px;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

/* Animated Elements */
.scenery-item {
    position: absolute;
    bottom: 25px;
    right: 30px;
    font-size: 3.5rem;
    opacity: 1;
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.2));
    animation: premiumFloat 5s infinite ease-in-out;
    transition: all 0.3s ease;
    z-index: 5;
}

@keyframes premiumFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg) scale(1); filter: drop-shadow(0 8px 15px rgba(0,0,0,0.2)); }
    50% { transform: translateY(-15px) rotate(8deg) scale(1.1); filter: drop-shadow(0 15px 25px rgba(0,0,0,0.3)); }
}

.bus-sch-header:hover .scenery-item {
    transform: scale(1.2) rotate(15deg);
    filter: drop-shadow(0 20px 30px rgba(255,255,255,0.4));
}

.bus-sch-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    align-content: start;
}

.bus-sch-item {
    background: var(--card-bg);
    padding: 1.25rem;
    border-radius: 12px;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

.bus-sch-item:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.bus-sch-item.selected {
    border-color: var(--primary-color);
    background: #ecf8ff; /* ?고븳 ?뚯뒪???뚮옉 諛곌꼍 */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    transform: scale(1.02);
}

body.dark-mode .bus-sch-item.selected {
    background: rgba(59, 130, 246, 0.2);
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3);
}

.bus-sch-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bus-sch-item-title {
    font-weight: 700;
    color: var(--text-main);
    font-size: 1rem;
}
.bus-sch-item-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.bus-sch-item i { color: #94a3b8; font-size: 1rem; }

/* Dark mode overrides for Dashboard */
body.dark-mode .bus-month-tabs {
    background-color: rgba(30, 41, 59, 0.7);
}
body.dark-mode .bus-month-tab {
    color: #94a3b8;
}
body.dark-mode .bus-month-tab:hover {
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
}
body.dark-mode .bus-month-tab.active {
    background: var(--primary-color);
    color: white;
}
body.dark-mode .bus-calendar-glass-card,
body.dark-mode .bus-schedule-glass-card,
body.dark-mode .bus-sch-item {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.5);
}
body.dark-mode .bus-sch-header {
    background: #1e293b;
    border-color: #334155;
}

/* Dark mode overrides for Header monthly backgrounds */
body.dark-mode .bus-sch-header.month-1 { background-image: linear-gradient(45deg, #2d3748, #2c5282, #1e3c72); }
body.dark-mode .bus-sch-header.month-2 { background-image: linear-gradient(45deg, #1a202c, #2d3748, #4a5568); }
body.dark-mode .bus-sch-header.month-3 { background-image: linear-gradient(45deg, #744210, #92400e, #451a03); }
body.dark-mode .bus-sch-header.month-4 { background-image: linear-gradient(45deg, #4a1212, #7f1d1d, #450a0a); }
body.dark-mode .bus-sch-header.month-5 { background-image: linear-gradient(45deg, #064e3b, #065f46, #022c22); }
body.dark-mode .bus-sch-header.month-6 { background-image: linear-gradient(45deg, #14532d, #166534, #052e16); }
body.dark-mode .bus-sch-header.month-7 { background-image: linear-gradient(45deg, #1e3a8a, #1e40af, #172554); }
body.dark-mode .bus-sch-header.month-8 { background-image: linear-gradient(45deg, #7f1d1d, #991b1b, #450a0a); }
body.dark-mode .bus-sch-header.month-9 { background-image: linear-gradient(45deg, #4c1d95, #5b21b6, #2e1065); }
body.dark-mode .bus-sch-header.month-10 { background-image: linear-gradient(45deg, #92400e, #b45309, #78350f); }
body.dark-mode .bus-sch-header.month-11 { background-image: linear-gradient(45deg, #451a03, #78350f, #1c1917); }
body.dark-mode .bus-sch-header.month-12 { background-image: linear-gradient(45deg, #064e3b, #15803d, #450a0a); }
body.dark-mode .bus-sch-title { color: #f7fafc; }
body.dark-mode .bus-day-cell { color: #f1f5f9; }
body.dark-mode .bus-day-cell:hover:not(.empty) { background: #334155; }
body.dark-mode .bus-cal-nav { background: #334155; color: #94a3b8; }
body.dark-mode .bus-cal-nav:hover { background: #475569; color: #f1f5f9; }

@media (max-width: 900px) {
    .bus-main-layout { flex-direction: column; }
    .bus-calendar-glass-card { width: 100%; height: auto; min-height: unset; margin:0 auto; max-width: 400px; }
    .bus-schedule-glass-card { width: 100%; height: auto; }
    .bus-sch-scroll { grid-template-columns: 1fr; }
}



#bus-section .bus-table .btn-delete-sm {
    padding: 4px 8px;
    background: #fee2e2;
    color: #ef4444;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Staff Status Picker */
.status-picker-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    background: #f8fafc;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
}

.status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.status-chip {
    padding: 5px 12px;
    background: white;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.status-chip:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.status-chip.active {
    background: #10b981;
    color: white;
    border-color: #059669;
    box-shadow: 0 3px 8px rgba(16, 185, 129, 0.3);
}

#staff-status-manual-wrap {
    margin-top: 0;
    animation: slideRight 0.3s ease-out;
}

@keyframes slideRight {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}


/* === Advanced Calendar HTML Tooltip === */
.calendar-html-tooltip {
    position: fixed;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.98); /* Deeper dark for premium feel */
    color: #f8fafc;
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    display: none;
    max-width: 320px;
    line-height: 1.4; /* Narrower line spacing */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    animation: tooltipFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.calendar-html-tooltip .tooltip-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 4px; /* Narrower item spacing */
    word-break: keep-all;
    overflow-wrap: break-word;
}

.calendar-html-tooltip .tooltip-item:last-child {
    margin-bottom: 0;
}

.calendar-html-tooltip .tooltip-bullet {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    background: #fbbf24; /* Amber */
    border-radius: 50%;
    margin-right: 8px;
    margin-top: 8px; /* Fine-tuned for line-height 1.4 */
}

.calendar-html-tooltip .tooltip-label-box {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    width: 50px; /* Aligned and compact */
}

.calendar-html-tooltip .tooltip-label {
    font-weight: 800;
    color: #e2e8f0;
    white-space: nowrap;
}

.calendar-html-tooltip .tooltip-value {
    flex: 1;
    font-weight: 500;
    color: #cbd5e1;
}

/* ================= Mobile Responsive Styles ================= */
/* ================= Common Form & Modal Styles ================= */
.grid-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem; /* Reduced from 1.25rem */
}

.form-row {
    display: flex;
    gap: 0.8rem;
    width: 100%;
}

.form-row > .form-group {
    flex: 1;
}

.form-group label {
    display: block;
    margin-bottom: 0.35rem; /* Reduced from 0.5rem */
    font-size: 0.8rem; /* Slightly smaller */
    font-weight: 700;
    color: #475569;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    height: 40px; /* Added fixed height for consistency */
    padding: 0 0.85rem; /* Adjusted padding for fixed height */
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.9rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-group textarea#bus-purpose {
    resize: none; /* Disable manual resizing */
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.1);
    outline: none;
}

.btn-icon {
    width: 32px;
    height: 32px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: white;
    border: 1px solid #e2e8f0;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.btn-icon.btn-edit-sm:hover {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background: #eff6ff !important;
}

.btn-icon.btn-delete-sm:hover,
.btn-icon.btn-reject-sm:hover {
    color: #ef4444 !important;
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
}

.btn-icon.btn-approve-sm:hover,
.btn-icon.btn-restore-sm:hover {
    color: #10b981 !important;
    border-color: #10b981 !important;
    background: #ecfdf5 !important;
}

.bus-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.bus-purpose-cell {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Time Picker UI */
.custom-time-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #f8fafc;
    height: 40px; /* Fixed height to match other inputs */
    padding: 0 0.6rem; /* Removed vertical padding */
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    width: 100%;
    justify-content: space-between;
}

.time-select-group {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: none;
    padding: 0;
}

.minimal-select {
    border: none !important;
    padding: 0.1rem 0.2rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    background: transparent !important;
    cursor: pointer;
    width: auto !important;
}

.minimal-select:focus {
    box-shadow: none !important;
    color: var(--primary-color);
}

.time-sep {
    font-weight: 700;
    color: #94a3b8;
    font-size: 0.9rem;
}

@media screen and (max-width: 768px) {
  html, body {
    overflow-y: auto !important; /* Allow body scrolling on mobile */
    height: auto !important;
  }

  main {
    margin-top: 180px !important; /* Adjusted for wrapped header */
    height: auto !important;
    overflow-y: visible !important;
    display: block !important;
  }

  header {
    height: auto !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0.5rem 0 !important;
  }

  .header-container {
    padding: 0.45rem 0.85rem !important; /* ?⑤뵫 異뺤냼濡??ш린 議곗젅 */
    flex-direction: column !important;
    gap: 0.8rem !important;
    min-height: auto !important;
  }

  #category-nav {
    flex-wrap: wrap !important;
    gap: 0.4rem 0.3rem !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .nav-item {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }

  /* Clock & Site Title Adjustment */
  .clock-widget-container {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0 auto 0.2rem auto !important;
    align-items: center !important;
    z-index: 5002 !important;
  }

  .side-site-title {
    opacity: 1 !important;
    transform: none !important;
    margin-bottom: 2px !important;
    font-size: 0.8rem !important;
    pointer-events: auto !important;
  }

  .modern-clock {
    transform: scale(0.85) !important;
    margin: 0 auto !important;
  }

  .clock-time {
    font-size: 1.8rem !important;
  }

  /* Major Page Sections Margin Reset */
  #curriculum-section, 
  #status-section, 
  #account-section, 
  #bus-section, 
  #shortcut-section, 
  #datayard-section, 
  #helppage-section,
  .links-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  body.hide-widget #curriculum-section {
    margin-left: 0 !important;
  }

  /* Intro Section Styles */
  .intro-landing-container {
    margin: 0 auto !important;
    padding: 1rem !important;
    width: 100% !important;
    gap: 1.2rem !important;
  }

  .intro-header-bar {
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 0 !important;
    align-items: center !important;
  }

  .intro-header-bar::after {
    display: none;
  }

  .intro-cheer-message {
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 0.5rem !important;
  }

  .intro-cheer-message .line-1 { font-size: 2.1rem !important; }
  .intro-cheer-message .line-2 { font-size: 1.3rem !important; }

  .intro-search-area {
    width: 95% !important;
    margin: 0 auto !important;
  }
  
  .intro-naver-search {
    width: 100% !important;
  }

  .intro-naver-search input {
    width: 100% !important;
    font-size: 0.9rem !important;
  }

  .board-grid {
    grid-template-columns: 1fr !important; /* Stack cards on mobile */
    gap: 1rem !important;
    padding: 0.5rem !important;
  }

  .board-card {
    min-height: auto !important;
  }

  /* Table View Scrollability */
  .content-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 1rem !important;
  }

  .curr-table-header, .curr-row {
    min-width: 900px !important; /* Fixed width to allow horizontal scroll */
  }

  /* Footer Adjustment */
  .intro-mini-footer {
    padding: 1rem !important;
    font-size: 0.75rem !important;
  }
}

/* ================= COMPREHENSIVE DARK MODE STYLES ================= */

/* === 1. Base Dark Mode Containers === */
body.dark-mode .category-content:not(#intro-section),
body.dark-mode .status-section {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* === 2. Table Containers - Glass Morphism Effect === */
body.dark-mode .content-wrapper,
body.dark-mode .editable-table-wrapper,
body.dark-mode .account-table-wrapper,
body.dark-mode .bus-table-wrapper {
  background: rgba(30, 41, 59, 0.4) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
  border-radius: 16px !important;
}

body.dark-mode .curriculum-header-area {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.5rem 0 !important;
  margin-bottom: 1.5rem !important;
}

/* ?ㅻ뜑 ?대? ?쒕ぉ */
body.dark-mode .curriculum-title-group h2 {
  color: #f1f5f9 !important;
}

body.dark-mode .curriculum-title-group h2 i {
  color: #60a5fa !important;
}

/* ?ㅻ퉬寃뚯씠??洹몃９ 諛곌꼍 */
body.dark-mode .curriculum-nav-group {
  background: rgba(51, 65, 85, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
}

/* ?ㅻ퉬寃뚯씠??踰꾪듉??(?붿궡?? ?ㅻ뒛, ?숇뀈 ?좏깮 ?? */
body.dark-mode .curriculum-nav-group .nav-arrow-btn,
body.dark-mode .curriculum-nav-group .nav-today-btn {
  background: rgba(71, 85, 105, 0.6) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .curriculum-nav-group .nav-arrow-btn:hover,
body.dark-mode .curriculum-nav-group .nav-today-btn:hover {
  background: rgba(59, 130, 246, 0.4) !important;
  border-color: #3b82f6 !important;
  color: #93c5fd !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

/* Period Display (湲곌컙 ?쒖떆) */
body.dark-mode .period-display {
  background: rgba(51, 65, 85, 0.6) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .period-display:hover {
  background: rgba(71, 85, 105, 0.8) !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
}

body.dark-mode .period-display::before,
body.dark-mode .period-display::after {
  color: #60a5fa !important;
}

/* View Switcher (蹂닿린 ?꾪솚) */
body.dark-mode .view-switcher {
  background: rgba(51, 65, 85, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
}

body.dark-mode .view-switcher .view-btn {
  background: transparent !important;
  color: #94a3b8 !important;
}

body.dark-mode .view-switcher .view-btn:hover {
  background: rgba(71, 85, 105, 0.5) !important;
  color: #cbd5e1 !important;
}

body.dark-mode .view-switcher .view-btn.active {
  background: rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

/* Export Buttons */
body.dark-mode .export-btn {
  background: rgba(71, 85, 105, 0.6) !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .export-btn.excel {
  color: #6ee7b7 !important;
}

body.dark-mode .export-btn.excel:hover {
  background: rgba(16, 185, 129, 0.3) !important;
  border-color: #10b981 !important;
  color: #6ee7b7 !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}

body.dark-mode .export-btn.hwp {
  color: #93c5fd !important;
}

body.dark-mode .export-btn.hwp:hover {
  background: rgba(59, 130, 246, 0.3) !important;
  border-color: #3b82f6 !important;
  color: #93c5fd !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

body.dark-mode .export-btn.google {
  color: #60a5fa !important;
}

body.dark-mode .export-btn.google:hover {
  background: rgba(66, 133, 244, 0.3) !important;
  border-color: #4285f4 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.4) !important;
}

/* 異붽? 踰꾪듉 (?쇱젙 異붽? ?? */
body.dark-mode .btn-primary-gradient {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4) !important;
}

body.dark-mode .btn-primary-gradient:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6) !important;
}

/* === 3. Table Headers === */
body.dark-mode .curr-table-header,
body.dark-mode .status-table th,
body.dark-mode .account-table th,
body.dark-mode .bus-table th {
  background: rgba(51, 65, 85, 0.6) !important;
  color: #e2e8f0 !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  font-weight: 800 !important;
}

body.dark-mode .th {
  color: #e2e8f0 !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

/* === 4. Table Cells === */
body.dark-mode .status-table td,
body.dark-mode .account-table td,
body.dark-mode .bus-table td {
  background: transparent !important;
  color: #cbd5e1 !important;
  border-color: #1e293b !important;
}

body.dark-mode .curr-cell {
  background: #0f172a !important; /* 遺덊닾紐낇븳 ?대몢??諛곌꼍 */
  color: #cbd5e1 !important;
  border-color: #1e293b !important;
}

body.dark-mode .curr-row {
  border-color: #1e293b !important;
}

body.dark-mode .curr-row:hover .curr-cell,
body.dark-mode .status-table tbody tr:hover td,
body.dark-mode .account-table tbody tr:hover td,
body.dark-mode .bus-table tbody tr:hover td {
  background: #1e293b !important;
}

/* === 5. Date Cells & Special Days === */
body.dark-mode .date-cell,
body.dark-mode .day-cell {
  color: #f1f5f9 !important;
}

body.dark-mode .day-sunday .curr-cell {
  background: #450a0a !important; /* ?대몢??鍮④컙??諛곌꼍 */
}

body.dark-mode .day-sunday .date-cell,
body.dark-mode .day-sunday .day-cell {
  color: #fca5a5 !important;
}

body.dark-mode .day-saturday .curr-cell {
  background: #172554 !important; /* ?대몢???뚮???諛곌꼍 */
}

body.dark-mode .day-saturday .date-cell,
body.dark-mode .day-saturday .day-cell {
  color: #93c5fd !important;
}

/* === 6. Event Chips & Badges === */
body.dark-mode .curr-event-chip {
  background: transparent !important;
  border: none !important;
  color: #e2e8f0 !important;
  box-shadow: none !important;
}

body.dark-mode .curr-event-chip:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
}

/* === 7. Buttons === */
body.dark-mode .btn-primary,
body.dark-mode .btn-primary-gradient,
body.dark-mode #curr-add-btn,
body.dark-mode #account-edit-mode-btn,
body.dark-mode #bus-request-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4) !important;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary-gradient:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6) !important;
}

body.dark-mode .btn-secondary,
body.dark-mode .curr-btn-secondary {
  background: rgba(71, 85, 105, 0.8) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode .btn-secondary:hover {
  background: rgba(100, 116, 139, 0.9) !important;
  border-color: rgba(148, 163, 184, 0.5) !important;
}

body.dark-mode .btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}

body.dark-mode .btn-cancel {
  background: rgba(71, 85, 105, 0.6) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode .btn-icon {
  background: rgba(30, 41, 59, 0.7) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  color: #94a3b8 !important;
}

body.dark-mode .btn-icon.btn-edit-sm:hover {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #60a5fa !important;
}

body.dark-mode .btn-icon.btn-delete-sm:hover,
body.dark-mode .btn-icon.btn-reject-sm:hover {
  background: rgba(239, 68, 68, 0.3) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #fecaca !important;
}

body.dark-mode .btn-icon.btn-approve-sm:hover,
body.dark-mode .btn-icon.btn-restore-sm:hover {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
}

/* === 8. Input Fields === */
body.dark-mode .editable-input,
body.dark-mode .bus-input,
body.dark-mode .bus-select,
body.dark-mode input[type="text"],
body.dark-mode input[type="date"],
body.dark-mode input[type="time"],
body.dark-mode input[type="number"],
body.dark-mode input[type="url"],
body.dark-mode textarea,
body.dark-mode select {
  background: rgba(51, 65, 85, 0.6) !important;
  color: #e2e8f0 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode .editable-input:focus,
body.dark-mode .bus-input:focus,
body.dark-mode .bus-select:focus,
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  background: rgba(51, 65, 85, 0.8) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
  color: #f1f5f9 !important;
}

/* === 9. Status Tabs === */
body.dark-mode .status-tab {
  background: rgba(51, 65, 85, 0.6) !important;
  color: #94a3b8 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode .status-tab:hover {
  background: rgba(71, 85, 105, 0.8) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, 0.5) !important;
}

body.dark-mode .status-tab.active {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.5) !important;
}

/* === 10. View Switcher === */
body.dark-mode .view-switcher {
  background: rgba(51, 65, 85, 0.6) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode .view-switcher .view-btn {
  background: transparent !important;
  color: #94a3b8 !important;
}

body.dark-mode .view-switcher .view-btn.active {
  background: rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

/* === 11. Period Display === */
body.dark-mode .period-display {
  background: rgba(51, 65, 85, 0.8) !important;
  color: #e2e8f0 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode .period-display:hover {
  background: rgba(71, 85, 105, 0.9) !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}

/* === 12. Badges & Status Pills === */
body.dark-mode .badge-region.관내 {
  background: rgba(16, 185, 129, 0.25) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

body.dark-mode .badge-region.관외 {
  background: rgba(59, 130, 246, 0.25) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
}

body.dark-mode .badge-bus-status.pending {
  background: rgba(251, 146, 60, 0.25) !important;
  color: #fdba74 !important;
  border: 1px solid rgba(251, 146, 60, 0.4) !important;
}

body.dark-mode .badge-bus-status.completed {
  background: rgba(34, 197, 94, 0.25) !important;
  color: #86efac !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
}

body.dark-mode .badge-bus-status.done {
  background: rgba(100, 116, 139, 0.3) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(100, 116, 139, 0.4) !important;
}

body.dark-mode .badge-use-school.Y {
  background: rgba(59, 130, 246, 0.25) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
}

body.dark-mode .badge-use-school.N {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

/* === 13. Copyable Fields === */
body.dark-mode .copyable-field {
  background: rgba(51, 65, 85, 0.6) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
  color: #cbd5e1 !important;
}

body.dark-mode .copyable-field:hover {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: #3b82f6 !important;
  color: #93c5fd !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

body.dark-mode .copyable-field::after {
  color: #94a3b8 !important;
}

body.dark-mode .copyable-field:hover::after {
  color: #60a5fa !important;
}

/* === 14. Account Service Links === */
body.dark-mode .account-service-link {
  color: #60a5fa !important;
  border-bottom-color: rgba(96, 165, 250, 0.3) !important;
}

body.dark-mode .account-service-link:hover {
  color: #93c5fd !important;
  border-bottom-color: #60a5fa !important;
}

/* === 15. Help/Data Section Cards === */
body.dark-mode .helppage-main-card,
body.dark-mode .helppage-sub-card,
body.dark-mode .helppage-item-card {
  background: rgba(30, 41, 59, 0.4) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  color: #e2e8f0 !important;
}

body.dark-mode .search-wrapper,
body.dark-mode .relative-search input {
  background: rgba(51, 65, 85, 0.6) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
  color: #e2e8f0 !important;
}

/* === 16. Time Picker === */
body.dark-mode .custom-time-picker-wrapper {
  background: rgba(51, 65, 85, 0.6) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode .time-select-group {
  background: transparent !important;
  border: none !important;
}

body.dark-mode .minimal-select {
  color: #e2e8f0 !important;
}

body.dark-mode .time-sep {
  color: #94a3b8 !important;
}

/* === 17. Status Chips === */
body.dark-mode .status-chip {
  background: rgba(51, 65, 85, 0.8) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode .status-chip:hover {
  background: rgba(71, 85, 105, 0.9) !important;
  border-color: rgba(148, 163, 184, 0.5) !important;
}

body.dark-mode .status-chip.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.5) !important;
}

/* === 18. Cell Add Button === */
body.dark-mode .cell-add-btn {
  background: rgba(51, 65, 85, 0.9) !important;
  color: #60a5fa !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .cell-add-btn:hover {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

/* === 19. Chip Controls === */
body.dark-mode .chip-controls {
  background: rgba(30, 41, 59, 0.95) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .chip-btn {
  background: transparent !important;
  color: #cbd5e1 !important;
  border: none !important;
}

body.dark-mode .chip-btn.edit {
  color: #60a5fa !important;
}

body.dark-mode .chip-btn.delete {
  color: #fca5a5 !important;
}

body.dark-mode .chip-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
}

/* === 학사일정 표 보기 iOS 26 재디자인 — 다크모드 보정 === */
body.dark-mode .curr-table-header {
  background: rgba(40, 48, 66, 0.94) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}
body.dark-mode .th {
  color: rgba(255, 255, 255, 0.72) !important;
}
body.dark-mode .th:not(:last-child) {
  box-shadow: inset -1px 0 0 rgba(148, 163, 184, 0.1);
}
body.dark-mode .curr-cell:not(:last-child) {
  box-shadow: inset -1px 0 0 rgba(148, 163, 184, 0.08);
}
body.dark-mode .curr-row:hover {
  transform: translateY(-3px) scale(1.008);
  box-shadow: 0 16px 34px -10px rgba(0, 0, 0, 0.62);
  border-bottom-color: transparent;
}
body.dark-mode .curr-row:has(.curr-cell.is-today) {
  background-color: rgba(99, 102, 241, 0.13);
}
body.dark-mode .confirm-table th {
  color: #cbd5e1;
  border-bottom-color: rgba(148, 163, 184, 0.14);
}
body.dark-mode .confirm-table th.row-label {
  color: #94a3b8;
}
body.dark-mode .confirm-table .row-label {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #cbd5e1;
}
body.dark-mode .member-settings-btn {
  background: rgba(255, 255, 255, 0.07);
  color: #94a3b8;
}
body.dark-mode .member-settings-btn:hover {
  background: rgba(96, 165, 250, 0.16);
  color: #93c5fd;
}

/* === 20. Table Controls & Layout Selector === */
body.dark-mode .table-controls {
  background: rgba(30, 41, 59, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
}

body.dark-mode .layout-selector {
  background: rgba(51, 65, 85, 0.6) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

/* === 21. Export Buttons === */
body.dark-mode .export-btn {
  background: rgba(51, 65, 85, 0.8) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode .export-btn:hover {
  background: rgba(71, 85, 105, 0.9) !important;
  border-color: rgba(148, 163, 184, 0.5) !important;
  color: #e2e8f0 !important;
}

body.dark-mode .export-btn.excel:hover {
  background: rgba(16, 185, 129, 0.3) !important;
  border-color: #10b981 !important;
  color: #6ee7b7 !important;
}

body.dark-mode .export-btn.hwp:hover {
  background: rgba(59, 130, 246, 0.3) !important;
  border-color: #3b82f6 !important;
  color: #93c5fd !important;
}

/* === 22. Navigation Arrows === */
body.dark-mode .nav-arrow-btn,
body.dark-mode .nav-today-btn {
  background: rgba(51, 65, 85, 0.8) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode .nav-arrow-btn:hover,
body.dark-mode .nav-today-btn:hover {
  background: rgba(71, 85, 105, 0.9) !important;
  border-color: rgba(148, 163, 184, 0.5) !important;
  color: #e2e8f0 !important;
}

/* === 23. Type Cards (Modal) === */
body.dark-mode .type-card {
  background: rgba(30, 41, 59, 0.6) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode .type-card span {
  color: #cbd5e1 !important;
}

body.dark-mode .type-card[data-type="edu"]:hover {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: #3b82f6 !important;
}

body.dark-mode .type-card[data-type="staff"]:hover {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
}

body.dark-mode .type-card[data-type="doc"]:hover {
  background: rgba(139, 92, 246, 0.2) !important;
  border-color: #8b5cf6 !important;
}

body.dark-mode .type-card[data-type="life"]:hover {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: #f59e0b !important;
}

/* === 24. Form Labels === */
body.dark-mode .form-group label,
body.dark-mode label {
  color: #cbd5e1 !important;
}

/* === 25. Tooltips === */
body.dark-mode .calendar-html-tooltip {
  background: rgba(15, 23, 42, 0.98) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

/* === 26. Account Note === */
body.dark-mode .account-note {
  color: #94a3b8 !important;
}

/* === 27. Total Display === */
body.dark-mode .total-display {
  color: #60a5fa !important;
}

/* === 28. Milky Way Star Effect === */
body.dark-mode::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(1px 1px at 20px 30px, #fff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 100px 100px, #fff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 150px 50px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 250px 200px, rgba(255,255,255,0.8), rgba(0,0,0,0)),
    radial-gradient(1.2px 1.2px at 350px 150px, #fff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 450px 300px, #fff, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 500px 500px;
  opacity: 0.12;
  pointer-events: none;
  z-index: -1;
  animation: starsTwinkle 8s infinite ease-in-out;
}

@keyframes starsTwinkle {
  0%, 100% { opacity: 0.08; transform: scale(1); }
  50% { opacity: 0.2; transform: scale(1.03); }
}

/* === 29. Section Controls === */
body.dark-mode .section-controls button,
body.dark-mode .status-controls button,
body.dark-mode .shortcut-controls button,
body.dark-mode .datayard-controls button {
  background: rgba(51, 65, 85, 0.8) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode .section-controls button:hover,
body.dark-mode .status-controls button:hover {
  background: rgba(71, 85, 105, 0.9) !important;
  border-color: rgba(148, 163, 184, 0.5) !important;
}

/* === 30. FullCalendar Dark Mode === */
body.dark-mode #curr-fullcalendar .fc-daygrid-event {
  background-color: transparent !important;
  border-color: transparent !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}

body.dark-mode #curr-fullcalendar .fc-daygrid-event:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.dark-mode #curr-fullcalendar .fc-event-title {
  color: #e0f2fe !important;
}

body.dark-mode .fc-day-today {
  background-color: rgba(59, 130, 246, 0.1) !important;
}

body.dark-mode .fc-day-sun .fc-daygrid-day-number {
  color: #fca5a5 !important;
}

body.dark-mode .fc-day-sat .fc-daygrid-day-number {
  color: #93c5fd !important;
}

body.dark-mode .fc-special-day-item {
  color: #60a5fa !important;
}

/* ?붿씪 ?ㅻ뜑 ?ㅽ겕紐⑤뱶 - 二쇰? 諛곌꼍怨?議고솕 (理쒓퀬 ?곗꽑?쒖쐞 - 踰붿쐞 ?뺤옣) */
body.dark-mode #curr-fullcalendar .fc-col-header,
body.dark-mode #curr-fullcalendar .fc-col-header-cell,
body.dark-mode #curr-fullcalendar .fc-scrollgrid-section-header,
body.dark-mode #curr-fullcalendar .fc-scrollgrid-section-header > div,
body.dark-mode #curr-fullcalendar .fc-scrollgrid-section-header table,
body.dark-mode #curr-fullcalendar th {
  background: transparent !important;
  background-color: transparent !important;
  border-color: rgba(148, 163, 184, 0.15) !important;
}

body.dark-mode #curr-fullcalendar .fc-col-header-cell {
  border-bottom: 2px solid rgba(148, 163, 184, 0.25) !important;
  padding: 1rem 0 !important;
}

body.dark-mode #curr-fullcalendar .fc-col-header-cell-cushion {
  color: #e2e8f0 !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

body.dark-mode #curr-fullcalendar .fc-col-header-cell.fc-day-sun {
  background: rgba(239, 68, 68, 0.08) !important;
}

body.dark-mode #curr-fullcalendar .fc-col-header-cell.fc-day-sun .fc-col-header-cell-cushion {
  color: #fca5a5 !important;
  font-weight: 800 !important;
  text-shadow: 0 0 10px rgba(252, 165, 165, 0.3) !important;
}

body.dark-mode #curr-fullcalendar .fc-col-header-cell.fc-day-sat {
  background: rgba(59, 130, 246, 0.08) !important;
}

body.dark-mode #curr-fullcalendar .fc-col-header-cell.fc-day-sat .fc-col-header-cell-cushion {
  color: #93c5fd !important;
  font-weight: 800 !important;
  text-shadow: 0 0 10px rgba(147, 197, 253, 0.3) !important;
}

/* ?뚮몢由??됱긽 - ???€?€?섍쾶 */
body.dark-mode #curr-fullcalendar .fc-theme-standard td,
body.dark-mode #curr-fullcalendar .fc-theme-standard th {
  border-color: rgba(148, 163, 184, 0.12) !important;
}

body.dark-mode #curr-fullcalendar .fc-scrollgrid {
  border-color: rgba(148, 163, 184, 0.2) !important;
  background: transparent !important;
}

/* ?щ젰 諛곌꼍 - ?꾩쟾 ?щ챸 */
body.dark-mode #curr-fullcalendar .fc-daygrid-day-frame {
  background: transparent !important;
}

body.dark-mode #curr-fullcalendar .fc-daygrid-day {
  background: transparent !important;
}

/* ?쇱슂??怨듯쑕??諛곌꼍 - ??誘몃쵖?섍쾶 */
body.dark-mode #curr-fullcalendar .fc-day-sun,
body.dark-mode #curr-fullcalendar .fc-day-has-holiday {
  background-color: rgba(239, 68, 68, 0.05) !important;
}

/* ?좎슂??諛곌꼍 異붽? */
body.dark-mode #curr-fullcalendar .fc-day-sat {
  background-color: rgba(59, 130, 246, 0.04) !important;
}

/* ?ㅻ뒛 ?좎쭨 媛뺤“ */
body.dark-mode #curr-fullcalendar .fc-day-today {
  background-color: rgba(59, 130, 246, 0.12) !important;
  position: relative;
}

body.dark-mode #curr-fullcalendar .fc-day-today::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
  opacity: 0.6;
}

/* === 31. Modals & Popups (Enhanced Dark Mode) === */
body.dark-mode .modal-content {
  background: rgba(15, 23, 42, 0.98) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
  color: #e2e8f0 !important;
}

body.dark-mode .modal-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15) !important;
}

body.dark-mode .modal-header h2 {
  color: #f1f5f9 !important;
}

body.dark-mode .close-modal {
  color: #94a3b8 !important;
  transition: color 0.2s;
}

body.dark-mode .close-modal:hover {
  color: #f1f5f9 !important;
}

body.dark-mode .modal-footer {
  background: transparent !important;
  border-top: 1px solid rgba(148, 163, 184, 0.15) !important;
}

/* === 32. Form Elements in Modals & Autofill Fix === */
body.dark-mode .curr-input,
body.dark-mode .form-control,
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode textarea,
body.dark-mode select {
  background-color: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  color: #e2e8f0 !important;
  color-scheme: dark; /* ?щ젰 ?꾩씠肄???釉뚮씪?곗? UI ?ㅽ겕紐⑤뱶 */
}

/* Autofill 諛곌꼍???쒓굅 ?몃┃ */
body.dark-mode input:-webkit-autofill,
body.dark-mode input:-webkit-autofill:hover, 
body.dark-mode input:-webkit-autofill:focus, 
body.dark-mode input:-webkit-autofill:active{
  -webkit-box-shadow: 0 0 0 30px #1e293b inset !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ?ㅽ겕紐⑤뱶 ?곹깭蹂?Select ?됱긽 (援먯쭅???뺤씤 ?? */
body.dark-mode .confirm-select.status-unconfirmed,
body.dark-mode select.status-unconfirmed {
  background-color: rgba(127, 29, 29, 0.3) !important; /* ?대몢??鍮④컯 諛곌꼍 */
  color: #fca5a5 !important; /* 諛앹? 鍮④컯 ?띿뒪??*/
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

body.dark-mode .confirm-select.status-confirmed,
body.dark-mode select.status-confirmed {
  background-color: rgba(20, 83, 45, 0.3) !important; /* ?대몢??珥덈줉 諛곌꼍 */
  color: #86efac !important; /* 諛앹? 珥덈줉 ?띿뒪??*/
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

body.dark-mode .curr-input:focus,
body.dark-mode .form-control:focus,
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  background-color: rgba(30, 41, 59, 0.8) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
  color: white !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #64748b !important;
}

/* === 33. Status Picker & Doc Bulk (Dark Mode Fix) === */

/* 洹쇰Т?곹솴 ?좏깮 而⑦뀒?대꼫 諛곌꼍 ?쒓굅/?щ챸??*/
body.dark-mode .status-picker-container,
body.dark-mode .status-chips {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 洹쇰Т?곹솴 踰꾪듉 ?ㅽ???*/
body.dark-mode .status-chip {
  background: rgba(51, 65, 85, 0.6) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
}

body.dark-mode .status-chip:hover {
  background: rgba(71, 85, 105, 0.8) !important;
  color: white !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
}

body.dark-mode .status-chip.active {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #93c5fd !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3) !important;
}

/* 怨듬Ц 紐⑸줉 而⑦뀒?대꼫 */
body.dark-mode .doc-bulk-container {
  background: rgba(30, 41, 59, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  color: #e2e8f0 !important;
}

/* 怨듬Ц ?낅젰 ??*/
body.dark-mode .curr-doc-bulk-row {
  background: rgba(51, 65, 85, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
}

/* 臾몄꽌 異붽? 踰꾪듉 */
body.dark-mode .add-doc-row-btn {
  background: rgba(51, 65, 85, 0.2) !important;
  border: 2px dashed rgba(148, 163, 184, 0.3) !important;
  color: #94a3b8 !important;
}

body.dark-mode .add-doc-row-btn:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}

/* 臾몄꽌 ??젣 踰꾪듉 */
body.dark-mode .doc-row-remove-btn {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}

body.dark-mode .doc-row-remove-btn:hover {
  background: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}

/* Type Selector Tabs in Modal */
body.dark-mode .curr-type-tabs {
  background: rgba(30, 41, 59, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
}

body.dark-mode .curr-type-tab {
  color: #94a3b8 !important;
}

body.dark-mode .curr-type-tab:hover {
  color: #cbd5e1 !important;
  background: rgba(148, 163, 184, 0.1) !important;
}

body.dark-mode .curr-type-tab.active {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Time Selector Container */
body.dark-mode .time-selector-container {
  background: rgba(30, 41, 59, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
}

body.dark-mode .time-mode-tabs {
  border-bottom: 1px solid rgba(148, 163, 184, 0.15) !important;
}

body.dark-mode .time-mode-tab {
  color: #94a3b8 !important;
}

body.dark-mode .time-mode-tab:hover {
  background: rgba(148, 163, 184, 0.1) !important;
  color: #cbd5e1 !important;
}

body.dark-mode .time-mode-tab.active {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  box-shadow: none !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* Input Group Text / Separator */
body.dark-mode .time-separator {
  color: #94a3b8 !important;
}

/* Checkbox Wrappers */
body.dark-mode .holiday-check-wrapper {
  background: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
}

body.dark-mode .holiday-check-wrapper span {
  color: #cbd5e1 !important;
}

/* Modal Buttons */
body.dark-mode .curr-btn-secondary {
  background: rgba(71, 85, 105, 0.6) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
}

body.dark-mode .curr-btn-secondary:hover {
  background: rgba(100, 116, 139, 0.7) !important;
  color: white !important;
}

/* Labels */
body.dark-mode .curr-label {
  color: #cbd5e1 !important;
}

body.dark-mode .badge {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* === 33. Icon Selectors === */
body.dark-mode .icon-selector {
  background: rgba(30, 41, 59, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 12px !important;
  padding: 1rem !important;
}

body.dark-mode .icon-option {
  background: rgba(51, 65, 85, 0.6) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode .icon-option:hover {
  background: rgba(71, 85, 105, 0.8) !important;
  border-color: rgba(148, 163, 184, 0.5) !important;
}

body.dark-mode .icon-option.selected {
  background: rgba(59, 130, 246, 0.3) !important;
  border-color: #3b82f6 !important;
  color: #93c5fd !important;
}

/* === 34. Color Pickers === */
body.dark-mode .color-picker-container,
body.dark-mode .color-trigger {
  background: rgba(51, 65, 85, 0.6) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode .color-popover,
body.dark-mode .color-options-popover {
  background: rgba(15, 23, 42, 0.98) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

/* === 35. File Upload Areas === */
body.dark-mode .file-drop-zone,
body.dark-mode .file-upload-area {
  background: rgba(51, 65, 85, 0.4) !important;
  border: 2px dashed rgba(148, 163, 184, 0.4) !important;
  color: #94a3b8 !important;
}

body.dark-mode .file-drop-zone:hover,
body.dark-mode .file-upload-area:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}

body.dark-mode .file-preview-area {
  background: rgba(51, 65, 85, 0.6) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
  color: #cbd5e1 !important;
}

/* === 36. Author Chips & Status Pills === */
body.dark-mode .author-chips {
  background: rgba(30, 41, 59, 0.4) !important;
  border-radius: 12px !important;
  padding: 0.8rem !important;
}

body.dark-mode .status-pill-group {
  background: rgba(30, 41, 59, 0.4) !important;
  border-radius: 12px !important;
  padding: 0.8rem !important;
}

body.dark-mode .status-label {
  background: rgba(51, 65, 85, 0.8) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode .status-check-tag:checked + .status-label {
  background: rgba(59, 130, 246, 0.4) !important;
  border-color: #3b82f6 !important;
  color: #93c5fd !important;
}

body.dark-mode .status-label.important:checked {
  background: rgba(245, 158, 11, 0.4) !important;
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
}

body.dark-mode .status-label.urgent:checked {
  background: rgba(239, 68, 68, 0.4) !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}

/* === 37. Checkbox & Radio Inputs === */
body.dark-mode .checkbox-container {
  color: #cbd5e1 !important;
}

body.dark-mode .checkmark {
  background: rgba(51, 65, 85, 0.6) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode .checkbox-container input:checked ~ .checkmark {
  background: #3b82f6 !important;
  border-color: #2563eb !important;
}

/* === 38. Tab Content Sections === */
body.dark-mode #datayard-section,
body.dark-mode #helppage-section {
  color: #e2e8f0 !important;
}

body.dark-mode .helppage-header h2 {
  color: #f1f5f9 !important;
}

body.dark-mode .helppage-header p {
  color: #94a3b8 !important;
}

/* === 39. Drag Handles === */
body.dark-mode .drag-handle {
  color: #64748b !important;
}

body.dark-mode .drag-handle:hover {
  color: #94a3b8 !important;
}

/* === 40. Progress Bars === */
body.dark-mode .progress-bar {
  background: rgba(51, 65, 85, 0.6) !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode .progress-fill {
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%) !important;
}

body.dark-mode .progress-text {
  color: #cbd5e1 !important;
}

/* === 41. Member Confirmation Bar === */
body.dark-mode .curr-member-confirm-bar {
  background: rgba(30, 41, 59, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
}

/* === 42. Scrollbars === */
body.dark-mode ::-webkit-scrollbar {
  background: rgba(30, 41, 59, 0.4) !important;
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.6) !important;
  border: 2px solid rgba(30, 41, 59, 0.4) !important;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.8) !important;
}

/* === 43. Hover States for Bus Table === */
body.dark-mode #bus-section .bus-table th[data-sort]:hover {
  background: rgba(71, 85, 105, 0.6) !important;
}

/* === 44. Icon Tabs === */
body.dark-mode .icon-type-tabs button,
body.dark-mode .file-type-tabs button,
body.dark-mode .item-tab {
  background: rgba(51, 65, 85, 0.6) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode .icon-type-tabs button.active,
body.dark-mode .file-type-tabs button.active,
body.dark-mode .item-tab.active {
  background: rgba(59, 130, 246, 0.3) !important;
  color: #93c5fd !important;
  border-color: #3b82f6 !important;
}

/* === 45. Helper Text === */
body.dark-mode .helper-text,
body.dark-mode .modal-desc {
  color: #94a3b8 !important;
}

/* === 46. Image Preview === */
body.dark-mode .image-preview {
  background: rgba(51, 65, 85, 0.6) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

/* === 48. Form Select === */
body.dark-mode .form-select {
  background: rgba(51, 65, 85, 0.6) !important;
  color: #e2e8f0 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode .form-select:focus {
  background: rgba(51, 65, 85, 0.8) !important;
  border-color: #3b82f6 !important;
}

/* === 49. Add Tab Button === */
body.dark-mode .add-tab-btn {
  background: rgba(51, 65, 85, 0.6) !important;
  color: #94a3b8 !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
}

body.dark-mode .add-tab-btn:hover {
  background: rgba(71, 85, 105, 0.8) !important;
  border-color: rgba(148, 163, 184, 0.6) !important;
  color: #cbd5e1 !important;
}

/* === 50. Delete Tab Button === */
body.dark-mode .delete-tab-btn {
  background: rgba(239, 68, 68, 0.8) !important;
  color: #ffffff !important;
}

body.dark-mode .delete-tab-btn:hover {
  background: rgba(220, 38, 38, 1) !important;
}

/* === 51. Holiday Rows (怨듯쑕???? === */
body.dark-mode .is-holiday-row {
  background-color: rgba(239, 68, 68, 0.2) !important;
}

body.dark-mode .is-holiday-row .curr-cell {
  color: #fca5a5 !important;
}

body.dark-mode .is-holiday-row .date-cell,
body.dark-mode .is-holiday-row .day-cell {
  color: #fca5a5 !important;
  font-weight: 800 !important;
}

body.dark-mode .is-holiday-row:hover {
  background-color: rgba(239, 68, 68, 0.25) !important;
}

/* === 52. Datayard & Helppage Sections === */
/* 移대뱶 而⑦뀒?대꼫 */
body.dark-mode #datayard-section .card,
body.dark-mode #helppage-section .card,
body.dark-mode #datayard-section .group-card,
body.dark-mode #helppage-section .group-card,
body.dark-mode #datayard-section .resource-card,
body.dark-mode #helppage-section .resource-card {
  background: rgba(30, 41, 59, 0.4) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  color: #e2e8f0 !important;
}

/* ?쇱퀜吏??섏쐞 硫붾돱 (?곗깋 諛곌꼍 臾몄젣 ?닿껐) */
body.dark-mode #datayard-section .card-body,
body.dark-mode #helppage-section .card-body,
body.dark-mode #datayard-section .menu-list,
body.dark-mode #helppage-section .menu-list,
body.dark-mode #datayard-section .sub-menu,
body.dark-mode #helppage-section .sub-menu,
body.dark-mode #datayard-section .resource-list,
body.dark-mode #helppage-section .resource-list,
body.dark-mode #datayard-section ul,
body.dark-mode #helppage-section ul,
body.dark-mode #datayard-section .items-list,
body.dark-mode #helppage-section .items-list {
  background: rgba(15, 23, 42, 0.6) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

/* 由ъ뒪???꾩씠??*/
body.dark-mode #datayard-section li,
body.dark-mode #helppage-section li,
body.dark-mode #datayard-section .list-item,
body.dark-mode #helppage-section .list-item,
body.dark-mode #datayard-section .resource-item,
body.dark-mode #helppage-section .resource-item {
  background: transparent !important;
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, 0.15) !important;
}

body.dark-mode #datayard-section li:hover,
body.dark-mode #helppage-section li:hover,
body.dark-mode #datayard-section .list-item:hover,
body.dark-mode #helppage-section .list-item:hover {
  background: rgba(51, 65, 85, 0.4) !important;
}

/* 留곹겕 */
body.dark-mode #datayard-section a,
body.dark-mode #helppage-section a {
  color: #93c5fd !important;
}

body.dark-mode #datayard-section a:hover,
body.dark-mode #helppage-section a:hover {
  color: #bfdbfe !important;
}

/* 移대뱶 ?ㅻ뜑 */
body.dark-mode #datayard-section .card-header,
body.dark-mode #helppage-section .card-header,
body.dark-mode #datayard-section .group-header,
body.dark-mode #helppage-section .group-header {
  background: rgba(51, 65, 85, 0.6) !important;
  color: #f1f5f9 !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

/* ?꾩씠肄??됱긽 */
body.dark-mode #datayard-section i,
body.dark-mode #helppage-section i,
body.dark-mode #datayard-section .fa,
body.dark-mode #helppage-section .fa,
body.dark-mode #datayard-section .fas,
body.dark-mode #helppage-section .fas {
  color: #94a3b8 !important;
}

body.dark-mode #datayard-section .card-header i,
body.dark-mode #helppage-section .card-header i {
  color: #cbd5e1 !important;
}

/* ?뚯씪 ?꾩씠肄?*/
body.dark-mode #datayard-section .file-icon,
body.dark-mode #helppage-section .file-icon {
  color: #60a5fa !important;
}

/* ?몃? 留곹겕 ?꾩씠肄?*/
body.dark-mode #datayard-section .external-link-icon,
body.dark-mode #helppage-section .external-link-icon,
body.dark-mode #datayard-section .fa-external-link-alt,
body.dark-mode #helppage-section .fa-external-link-alt {
  color: #94a3b8 !important;
}

/* ?쒕ぉ */
body.dark-mode #datayard-section h3,
body.dark-mode #helppage-section h3,
body.dark-mode #datayard-section h4,
body.dark-mode #helppage-section h4 {
  color: #f1f5f9 !important;
}

/* ?ㅻ챸 ?띿뒪??*/
body.dark-mode #datayard-section p,
body.dark-mode #helppage-section p,
body.dark-mode #datayard-section .description,
body.dark-mode #helppage-section .description {
  color: #94a3b8 !important;
}

/* 援щ텇??*/
body.dark-mode #datayard-section hr,
body.dark-mode #helppage-section hr {
  border-color: rgba(148, 163, 184, 0.2) !important;
}

/* ?좉? 踰꾪듉 (?꾩퐫?붿뼵) */
body.dark-mode #datayard-section .toggle-btn,
body.dark-mode #helppage-section .toggle-btn,
body.dark-mode #datayard-section .accordion-toggle,
body.dark-mode #helppage-section .accordion-toggle {
  background: rgba(51, 65, 85, 0.6) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

body.dark-mode #datayard-section .toggle-btn:hover,
body.dark-mode #helppage-section .toggle-btn:hover {
  background: rgba(71, 85, 105, 0.8) !important;
}

/* 寃€?됱갹 */
body.dark-mode #datayard-section input[type="search"],
body.dark-mode #helppage-section input[type="search"],
body.dark-mode #datayard-section .search-input,
body.dark-mode #helppage-section .search-input {
  background: rgba(51, 65, 85, 0.6) !important;
  color: #e2e8f0 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

/* 諛곗? */
body.dark-mode #datayard-section .badge,
body.dark-mode #helppage-section .badge,
body.dark-mode #datayard-section .tag,
body.dark-mode #helppage-section .tag {
  background: rgba(59, 130, 246, 0.3) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
}

/* === 53. Curriculum Incharge Text (?대떦???띿뒪?? === */
/* ?쇱씠?몃え?? 湲곕낯 ?뚮????좎? */
.chip-incharge {
  color: #2563eb;
  font-weight: 600;
}

/* ?ㅽ겕紐⑤뱶: 諛앹? ?섎뒛?됱쑝濡?蹂€寃?*/
body.dark-mode .chip-incharge {
  color: #7dd3fc !important;
  font-weight: 600;
}

/* === 54. ?먮즺留덈떦 & ?⑦븰援?e吏€??- ?섏쐞 ?좉? 硫붾돱 ?ㅽ겕紐⑤뱶 理쒖쟻??=== */

/* 硫붿씤 移대뱶 ?좉? 踰꾪듉 */
body.dark-mode .helppage-main-toggle {
  background: rgba(30, 41, 59, 0.5) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  color: #e2e8f0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode .helppage-main-toggle:hover {
  background: rgba(51, 65, 85, 0.7) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}

/* ?꾩씠肄?諛뺤뒪 */
body.dark-mode .icon-box {
  background: rgba(51, 65, 85, 0.6) !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ?쒕ぉ 洹몃９ */
body.dark-mode .title-group h3 {
  color: #f1f5f9 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .title-group p {
  color: #94a3b8 !important;
}

/* ?쇱퀜吏?而⑦뀗痢??곸뿭 */
body.dark-mode .hidden-content {
  background: rgba(15, 23, 42, 0.7) !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

/* 寃€???섑띁 */
body.dark-mode .search-wrapper {
  background: rgba(30, 41, 59, 0.6) !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  margin-bottom: 1rem !important;
}

body.dark-mode .relative-search {
  position: relative;
}

body.dark-mode .category-search-input {
  background: rgba(51, 65, 85, 0.7) !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
  color: #e2e8f0 !important;
  padding: 0.75rem 1rem 0.75rem 2.5rem !important;
  border-radius: 10px !important;
  transition: all 0.3s ease;
}

body.dark-mode .category-search-input:focus {
  background: rgba(51, 65, 85, 0.9) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
  outline: none;
}

body.dark-mode .category-search-input::placeholder {
  color: #64748b !important;
}

body.dark-mode .search-icon {
  color: #94a3b8 !important;
}

/* ?섏쐞 ?뱀뀡 而⑦뀒?대꼫 */
body.dark-mode .sub-sections-container {
  background: transparent !important;
}

/* ?섏쐞 ?뱀뀡 ?꾩씠??*/
body.dark-mode .sub-section-item {
  background: rgba(30, 41, 59, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  border-radius: 12px !important;
  margin-bottom: 0.75rem !important;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode .sub-section-item:hover {
  background: rgba(51, 65, 85, 0.5) !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
  transform: translateX(4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}

/* ?섏쐞 ?뱀뀡 ?좉? 踰꾪듉 */
body.dark-mode .sub-section-toggle {
  background: rgba(51, 65, 85, 0.5) !important;
  border: none !important;
  color: #f1f5f9 !important;
  padding: 1rem 1.25rem !important;
  transition: all 0.3s ease;
  font-weight: 600 !important;
}

body.dark-mode .sub-section-toggle:hover {
  background: rgba(71, 85, 105, 0.6) !important;
  color: #ffffff !important;
}

/* ?섏쐞 ?ㅻ뜑 ?쇱そ */
body.dark-mode .sub-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

body.dark-mode .sub-header-left span {
  color: #f1f5f9 !important;
  font-weight: 600 !important;
}

/* ?섏쐞 ?꾩씠肄?諛뺤뒪 */
body.dark-mode .sub-icon-box {
  background: rgba(71, 85, 105, 0.5) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  padding: 0.5rem !important;
  border-radius: 8px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
}

/* ?됱긽蹂??꾩씠肄?諛뺤뒪 - ?ㅽ겕紐⑤뱶 理쒖쟻??*/
body.dark-mode .sub-icon-box.blue-100-bg { background: rgba(59, 130, 246, 0.2) !important; }
body.dark-mode .sub-icon-box.green-100-bg { background: rgba(16, 185, 129, 0.2) !important; }
body.dark-mode .sub-icon-box.purple-100-bg { background: rgba(139, 92, 246, 0.2) !important; }
body.dark-mode .sub-icon-box.red-100-bg { background: rgba(239, 68, 68, 0.2) !important; }
body.dark-mode .sub-icon-box.yellow-100-bg { background: rgba(245, 158, 11, 0.2) !important; }
body.dark-mode .sub-icon-box.emerald-100-bg { background: rgba(16, 185, 129, 0.2) !important; }
body.dark-mode .sub-icon-box.pink-100-bg { background: rgba(236, 72, 153, 0.2) !important; }
body.dark-mode .sub-icon-box.amber-100-bg { background: rgba(245, 158, 11, 0.2) !important; }
body.dark-mode .sub-icon-box.violet-100-bg { background: rgba(139, 92, 246, 0.2) !important; }
body.dark-mode .sub-icon-box.cyan-100-bg { background: rgba(6, 182, 212, 0.2) !important; }
body.dark-mode .sub-icon-box.lime-100-bg { background: rgba(132, 204, 22, 0.2) !important; }
body.dark-mode .sub-icon-box.teal-100-bg { background: rgba(20, 184, 166, 0.2) !important; }
body.dark-mode .sub-icon-box.indigo-100-bg { background: rgba(99, 102, 241, 0.2) !important; }
body.dark-mode .sub-icon-box.fuchsia-100-bg { background: rgba(217, 70, 239, 0.2) !important; }
body.dark-mode .sub-icon-box.rose-100-bg { background: rgba(244, 63, 94, 0.2) !important; }
body.dark-mode .sub-icon-box.orange-100-bg { background: rgba(249, 115, 22, 0.2) !important; }
body.dark-mode .sub-icon-box.sky-100-bg { background: rgba(14, 165, 233, 0.2) !important; }

/* ?됱긽蹂??꾩씠肄??띿뒪??- ?ㅽ겕紐⑤뱶 理쒖쟻??*/
body.dark-mode .blue-600-text { color: #60a5fa !important; }
body.dark-mode .green-600-text { color: #34d399 !important; }
body.dark-mode .purple-600-text { color: #a78bfa !important; }
body.dark-mode .red-600-text { color: #f87171 !important; }
body.dark-mode .yellow-600-text { color: #fbbf24 !important; }
body.dark-mode .emerald-600-text { color: #34d399 !important; }
body.dark-mode .pink-600-text { color: #f472b6 !important; }
body.dark-mode .amber-600-text { color: #fbbf24 !important; }
body.dark-mode .violet-600-text { color: #a78bfa !important; }
body.dark-mode .cyan-600-text { color: #22d3ee !important; }
body.dark-mode .lime-600-text { color: #a3e635 !important; }
body.dark-mode .teal-600-text { color: #2dd4bf !important; }
body.dark-mode .indigo-600-text { color: #818cf8 !important; }
body.dark-mode .fuchsia-600-text { color: #e879f9 !important; }
body.dark-mode .rose-600-text { color: #fb7185 !important; }
body.dark-mode .orange-600-text { color: #fb923c !important; }
body.dark-mode .sky-600-text { color: #38bdf8 !important; }

/* ?섏쐞 ?먮툕濡??꾩씠肄?*/
body.dark-mode .sub-chevron {
  color: #94a3b8 !important;
  transition: all 0.3s ease;
}

/* ?섏쐞 ?꾩씠??由ъ뒪??*/
body.dark-mode .sub-items-list {
  background: rgba(15, 23, 42, 0.8) !important;
  border-top: 1px solid rgba(148, 163, 184, 0.15) !important;
  padding: 0.75rem !important;
}

/* ?뚯씪 ?꾩씠??*/
body.dark-mode .file-item {
  background: rgba(51, 65, 85, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  color: #cbd5e1 !important;
  padding: 0.75rem 1rem !important;
  border-radius: 8px !important;
  margin-bottom: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode .file-item:hover {
  background: rgba(59, 130, 246, 0.25) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #93c5fd !important;
  transform: translateX(6px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

body.dark-mode .file-item:last-child {
  margin-bottom: 0 !important;
}

/* ?뚯씪 ?꾩씠???꾩씠肄?*/
body.dark-mode .file-item .fa-file-alt {
  color: #60a5fa !important;
  font-size: 1rem;
}

body.dark-mode .file-item:hover .fa-file-alt {
  color: #93c5fd !important;
}

/* ?몃? 留곹겕 ?꾩씠肄?*/
body.dark-mode .file-item .link-icon,
body.dark-mode .file-item .fa-external-link-alt {
  color: #64748b !important;
  font-size: 0.85rem;
  margin-left: auto;
  transition: all 0.3s ease;
}

body.dark-mode .file-item:hover .link-icon,
body.dark-mode .file-item:hover .fa-external-link-alt {
  color: #60a5fa !important;
  transform: translateX(3px) translateY(-3px);
}

/* 硫붿씤 ?먮툕濡?*/
body.dark-mode .main-chevron {
  color: #94a3b8 !important;
  transition: transform 0.3s ease;
}

/* ?명꽣 */
body.dark-mode .helppage-footer {
  background: rgba(30, 41, 59, 0.4) !important;
  border-top: 1px solid rgba(148, 163, 184, 0.15) !important;
  color: #94a3b8 !important;
  padding: 1.5rem !important;
  margin-top: 2rem !important;
  border-radius: 12px !important;
}

body.dark-mode .helppage-footer a {
  color: #60a5fa !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(96, 165, 250, 0.3);
  transition: all 0.3s ease;
}

body.dark-mode .helppage-footer a:hover {
  color: #93c5fd !important;
  border-bottom-color: #60a5fa;
}

/* 洹몃━???덉씠?꾩썐 */
body.dark-mode .helppage-grid {
  display: grid;
  gap: 1.5rem;
}

/* 移대뱶 而⑦뀒?대꼫 */
body.dark-mode .helppage-card-container {
  background: transparent !important;
}

/* ?ㅽ겕濡ㅻ컮 而ㅼ뒪?곕쭏?댁쭠 (?섏쐞 硫붾돱?? */
body.dark-mode .sub-items-list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.dark-mode .sub-items-list::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
  border-radius: 4px;
}

body.dark-mode .sub-items-list::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.6);
  border-radius: 4px;
  transition: background 0.3s ease;
}

body.dark-mode .sub-items-list::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.8);
}



/* === 34. Intro Section Dark Mode Fixes (Naver Search & Greeting) === */

/* ?ㅼ씠踰?寃€?됱갹 ?ㅽ겕紐⑤뱶 理쒖쟻??(?댁쭏?곸씤 諛곌꼍???쒓굅 & ?щ챸??媛쒖꽑) */
body.dark-mode .intro-naver-search {
  background: rgba(30, 41, 59, 0.3) !important; /* ???щ챸?섍쾶 */
  border: 1px solid rgba(148, 163, 184, 0.2) !important; /* ?뚮몢由щ뒗 ?뉕쾶 ?좎??섎릺 ?€?€?섍쾶 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode .intro-naver-search input {
  background-color: transparent !important; /* ?낅젰李?諛곌꼍 ?꾩쟾 ?щ챸 */
  border: none !important; /* ?낅젰李??뚮몢由??쒓굅 (?붿껌?ы빆) */
  color: #f1f5f9 !important;
  box-shadow: none !important;
}

/* Autofill ??諛곌꼍???쒓굅 ?몃┃ for ?ㅼ씠踰?寃€?됱갹 */
body.dark-mode .intro-naver-search input:-webkit-autofill,
body.dark-mode .intro-naver-search input:-webkit-autofill:hover, 
body.dark-mode .intro-naver-search input:-webkit-autofill:focus, 
body.dark-mode .intro-naver-search input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px rgba(30, 41, 59, 0.0) inset !important; /* ?щ챸 ?몃┃???덈㉨?????덉뼱 ?대몢???됱쑝濡?*/
  -webkit-text-fill-color: #f1f5f9 !important;
  transition: background-color 5000s ease-in-out 0s;
}

body.dark-mode .intro-naver-search input::placeholder {
  color: #94a3b8 !important;
}

/* 寃€??踰꾪듉 */
body.dark-mode .intro-search-btn {
  background-color: transparent !important;
  color: #cbd5e1 !important;
}
body.dark-mode .intro-search-btn:hover {
  color: #60a5fa !important;
}

/* ?몄궗留?紐낅룄 ?곹뼢 (媛€?낆꽦 媛쒖꽑) */
body.dark-mode .intro-cheer-message .line-1 {
  color: #f1f5f9 !important; /* 湲곗〈蹂대떎 ??諛앷쾶 */
}

body.dark-mode .intro-cheer-message .line-2 {
  color: #e2e8f0 !important;
}


/* === 35. Unified Action Buttons (All Tabs) === */
/* 
   ?곸슜 ?€??
   - ?? 諛붾줈媛€湲??몄쭛 (#edit-mode-btn)
   - ?숆탳?꾪솴: ?꾪솴 ?몄쭛 (#status-section .btn-primary)
   - ?숆탳怨꾩젙: ?숆탳怨꾩젙 ?몄쭛 (#account-edit-mode-btn)
   - 諛곗감?좎껌: 諛곗감 ?좎껌 (#bus-request-btn)
   - ?먮즺留덈떦: ?먮즺留덈떦 ?몄쭛 (#datayard-edit-mode-btn)
   - ?숈궗?쇱젙: ?쇱젙 異붽? (#curr-add-btn)
*/

#edit-mode-btn,
#account-edit-mode-btn,
#status-section .btn-primary,
#bus-request-btn,
#datayard-edit-mode-btn,
#curr-add-btn {
  background: linear-gradient(135deg, #4f46e5, #8b5cf6) !important; /* Indigo to Violet Gradient */
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important; /* Pill Shape */
  padding: 0.65rem 1.5rem !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  letter-spacing: 0.3px !important;
}

/* Hover State */
#edit-mode-btn:hover,
#account-edit-mode-btn:hover,
#status-section .btn-primary:hover,
#bus-request-btn:hover,
#datayard-edit-mode-btn:hover,
#curr-add-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5) !important;
  filter: brightness(1.1);
  background: linear-gradient(135deg, #4338ca, #7c3aed) !important;
}

/* Active/Processing State */
#edit-mode-btn:active,
#account-edit-mode-btn:active,
#status-section .btn-primary:active,
#bus-request-btn:active,
#datayard-edit-mode-btn:active,
#curr-add-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
}

/* FontAwesome Icon Style Adjustment */
#edit-mode-btn i,
#account-edit-mode-btn i,
#status-section .btn-primary i,
#bus-request-btn i,
#datayard-edit-mode-btn i,
#curr-add-btn i {
  font-size: 1rem !important;
  margin: 0 !important; /* gap?쇰줈 媛꾧꺽 議곗젙?섎?濡?留덉쭊 ?쒓굅 */
}

/* Fix: ?숆탳 怨꾩젙 ?몄쭛 踰꾪듉 媛뺤젣 ?곸슜 (CSS ?곗꽑?쒖쐞 ?뺣낫) */
#account-section #account-edit-mode-btn {
  background: linear-gradient(135deg, #4f46e5, #8b5cf6) !important; /* Indigo to Violet Gradient */
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 0.65rem 1.5rem !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#account-section #account-edit-mode-btn:hover {
  background: linear-gradient(135deg, #4338ca, #7c3aed) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5) !important;
  filter: brightness(1.1) !important;
}


/* === 36. Notice Widget Dark Mode (Clean & Unified) === */
body.dark-mode .notice-item {
  background: rgba(30, 41, 59, 0.5) !important; /* ?대몢??諛섑닾紐?諛곌꼍 */
  border: 1px solid rgba(148, 163, 184, 0.1) !important;
  /* 湲곗〈 ?쇱そ 蹂대뜑 ?됱긽?€ ?좎???(CSS ?곗꽑?쒖쐞 二쇱쓽) */
  border-left-width: 4px !important; 
  color: #e2e8f0 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
}

body.dark-mode .notice-item:hover {
  background: rgba(51, 65, 85, 0.6) !important;
  transform: translateX(4px) translateY(-2px) !important;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .notice-content-preview {
  color: #cbd5e1 !important; /* 諛앹? ?뚯깋 ?띿뒪??*/
}

body.dark-mode .notice-author {
  background: rgba(148, 163, 184, 0.2) !important;
  color: #f1f5f9 !important;
  font-weight: 600 !important;
}

body.dark-mode .notice-date {
  color: #94a3b8 !important;
}

/* Notice Status Pills (Important/Urgent) Override */
body.dark-mode .notice-item.status-important {
  border-left-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.1) !important; /* ?€?€???곕쾭 諛곌꼍 */
}

body.dark-mode .notice-item.status-urgent {
  border-left-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.1) !important; /* ?€?€???덈뱶 諛곌꼍 */
}

body.dark-mode .pill-important {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

body.dark-mode .pill-urgent {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}


/* === 37. Shortcut Groups Glassmorphism (Dark Mode) === */
body.dark-mode .shortcut-group-card {
  background: rgba(255, 255, 255, 0.05) !important; /* ?꾩＜ ?щ????곗깋 ?꾪꽣 */
  backdrop-filter: blur(20px) saturate(180%) !important; /* 媛뺣젰??釉붾윭 ?④낵 */
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important; /* ?뉕퀬 ?щ챸???좊━ ?뚮몢由?*/
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important; /* 源딆? 洹몃┝??*/
  border-radius: 20px !important;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

body.dark-mode .shortcut-group-title {
  color: #f8fafc !important; /* 嫄곗쓽 ?곗깋 ?€?댄? */
  text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important; /* ?띿뒪??媛€?낆꽦 */
}

body.dark-mode .shortcut-group-card:hover {
  background: rgba(255, 255, 255, 0.1) !important; /* ?몃쾭 ??議곌툑 ??諛앷쾶 */
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-8px) !important;
  box-shadow: 0 15px 45px 0 rgba(0, 0, 0, 0.45) !important;
}

/* ?대? ?꾩씠?쒕뱾 */
body.dark-mode .shortcut-item-wrapper {
  transition: all 0.2s ease !important;
  border-radius: 12px;
}

body.dark-mode .shortcut-item-wrapper:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(5px);
}

body.dark-mode .shortcut-title {
  color: #e2e8f0 !important;
  font-weight: 500 !important;
}


/* === 38. Board Post Modal Dark Mode Fix === */
body.dark-mode #boardPostModal .modal-content {
  background: #1e293b !important; /* Deep Dark Blue Background */
  color: #f1f5f9 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode #boardPostModal .modal-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.1) !important;
  background: transparent !important;
}

body.dark-mode #boardPostModal .modal-header h2 {
  color: #f1f5f9 !important;
}

body.dark-mode #boardPostModal .close-modal {
  color: #94a3b8 !important;
}
body.dark-mode #boardPostModal .close-modal:hover {
  color: #f1f5f9 !important;
}

body.dark-mode #boardPostModal .modal-body {
  background: transparent !important;
}

body.dark-mode #boardPostModal .modal-footer {
  background: rgba(15, 23, 42, 0.3) !important; /* Slightly darker for footer */
  border-top: 1px solid rgba(148, 163, 184, 0.1) !important;
}

/* ?낅젰李??섏젙 */
body.dark-mode #post-content-editor {
  background: rgba(15, 23, 42, 0.6) !important; /* Very dark input bg */
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  color: #e2e8f0 !important;
}

/* ?쇰꺼 ?됱긽 */
body.dark-mode #boardPostModal label {
  color: #94a3b8 !important;
}


/* === 38-1. Extended Dark Mode Styles (Components) === */
/* ?묒꽦??移?*/
body.dark-mode .author-chip {
  background: rgba(51, 65, 85, 0.4) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(148, 163, 184, 0.1) !important;
}
body.dark-mode .author-chip:hover {
  background: rgba(71, 85, 105, 0.6) !important;
  color: #ffffff !important;
}
body.dark-mode .author-chip.selected {
  background: linear-gradient(135deg, #4f46e5, #8b5cf6) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
}

/* ?뚯씪 泥⑤? ?곸뿭 */
body.dark-mode #file-drop-zone {
  border-color: rgba(148, 163, 184, 0.2) !important;
  background: rgba(15, 23, 42, 0.3) !important;
}
body.dark-mode #file-drop-zone p { color: #94a3b8 !important; }
body.dark-mode #file-drop-zone i { color: #64748b !important; }

/* ?곹깭 ?좏깮 ?쇰꺼 */
body.dark-mode .status-label {
  background: rgba(51, 65, 85, 0.4) !important;
  color: #94a3b8 !important;
}

/* 泥댄겕???곹깭???쇰꺼 */
body.dark-mode .status-check-tag:checked + .status-label.normal {
  background: #334155 !important;
  color: #e2e8f0 !important;
}
body.dark-mode .status-check-tag:checked + .status-label.important {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}
body.dark-mode .status-check-tag:checked + .status-label.urgent {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* 紐⑤떖 ?섎떒 踰꾪듉 */
body.dark-mode .btn-memo-cancel {
  background: rgba(51, 65, 85, 0.4) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
}
body.dark-mode .btn-memo-cancel:hover {
  background: rgba(71, 85, 105, 0.8) !important;
  color: #fff !important;
}

/* 吏곸젒 ?낅젰 ?명뭼 */
body.dark-mode #post-author-custom {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  color: #e2e8f0 !important;
}


/* === 39. Table Header Styling Fix (Final) === */

/* [?ㅽ겕紐⑤뱶] ?ㅻ뜑 ?댁쨷 諛곌꼍 諛?寃뱀묠 臾몄젣 ?닿껐 */
/* thead 而⑦뀒?대꼫???щ챸?섍쾶 泥섎━ (?꾩닔) */
body.dark-mode .curr-table-header,
body.dark-mode .account-table thead,
body.dark-mode .bus-table thead,
body.dark-mode .status-table thead {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* ?ㅼ젣 ?€(th)?먮쭔 諛곌꼍 ?곸슜?섏뿬 源붾걫?섍쾶 泥섎━ */
body.dark-mode .account-table th,
body.dark-mode .bus-table th,
body.dark-mode .status-table th,
body.dark-mode .curr-table-header > div,
body.dark-mode .curr-row.header {
  background: #1e293b !important; /* ?щ챸???녿뒗 遺덊닾紐??됱긽 ?ъ슜?쇰줈 鍮꾩묠 諛⑹? */
  backdrop-filter: none !important; 
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
  color: #e2e8f0 !important;
  box-shadow: none !important;
  border-right: none !important;
  border-left: none !important;
}

/* ?숈궗?쇱젙 ?붾퀎 ?щ젰 (FullCalendar) ?ㅽ겕紐⑤뱶 諛곌꼍 */
body.dark-mode .fc-daygrid-day {
  background-color: #0f172a !important;
}
body.dark-mode .fc-day-sun,
body.dark-mode .fc-day-sun .fc-daygrid-day-top,
body.dark-mode .fc-day-sun .fc-daygrid-day-number {
  background-color: #450a0a !important;
}
body.dark-mode .fc-day-sat,
body.dark-mode .fc-day-sat .fc-daygrid-day-top,
body.dark-mode .fc-day-sat .fc-daygrid-day-number {
  background-color: #172554 !important;
}

/* [怨듯넻] ?뚯씠釉??ㅻ뜑 ?믪씠 ?듭씪 諛??ㅽ???*/
.bus-table thead th {
  height: 50px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  vertical-align: middle !important;
  position: relative !important;
  background-clip: padding-box;
}
/* === 40 & 41. Bus Request Badge Fix (Final V2) === */

/* 諭껋? ?ㅽ???- ?꾩튂 ?곹뼢 議곗젙 */
.driver-badge {
  position: absolute;
  top: -28px; /* ?띿뒪?몄? 5px ?댁긽 媛꾧꺽 ?뺣낫瑜??꾪빐 ???꾨줈 ?щ┝ */
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  color: white;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.5);
  z-index: 9999 !important;
  animation: bounceBadge 2s infinite ease-in-out;
  pointer-events: none;
}

.driver-badge::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  margin-left: -4px;
  border-width: 4px 4px 0;
  border-style: solid;
  border-color: #ff8e53 transparent transparent transparent;
}

@keyframes bounceBadge {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

/* 泥?踰덉㎏ ?€("?뺤씤") ?ㅻ쾭?뚮줈???꾩쟾 ?댁젣 */
/* 諛곌꼍???쒓굅 (?쇱씠?몃え???곹뼢 諛⑹?) */
.bus-table thead th:first-child {
  overflow: visible !important;
  z-index: 9999 !important;
}

/* [?ㅽ겕紐⑤뱶] ?κ렐 紐⑥꽌由?源⑥쭚 諛⑹? (Overflow visible 遺€?묒슜 ?닿껐) */
/* 醫뚯긽??*/
body.dark-mode .bus-table thead th:first-child {
  background: #1e293b !important;
  border-top-left-radius: 12px !important;
}
/* ?곗긽??(紐낆떆??吏€?? */
body.dark-mode .bus-table thead th:last-child {
  border-top-right-radius: 12px !important;
}

/* ?뚯씠釉??섑띁 ?ㅻ쾭?뚮줈???댁젣 */
.bus-table-wrapper {
  overflow: visible !important;
  margin-top: 35px !important;
  position: relative;
  z-index: 5 !important;
  background: transparent !important; /* ?댁쨷 諛곌꼍 ?쒓굅 */
}

/* ?뚯씠釉??먯껜 ?κ렐 紐⑥꽌由?泥섎━ (?댁슜 ?€?대굹??諛⑹?) */
.bus-table {
  border-collapse: separate !important; /* Radius ?곸슜???꾪빐 ?꾩닔 */
  border-spacing: 0;
  border-radius: 12px;
}

/* ?섎떒 ?κ렐 紐⑥꽌由?泥섎━ */
.bus-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px !important;
}
.bus-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px !important;
}


/* --- Mobile Screen Transition Animation --- */
@keyframes slideInRight {
  from { 
      transform: translateX(20%); 
      opacity: 0; 
  }
  to { 
      transform: translateX(0); 
      opacity: 1; 
  }
}

@keyframes slideInLeft {
  from { 
      transform: translateX(-20%); 
      opacity: 0; 
  }
  to { 
      transform: translateX(0); 
      opacity: 1; 
  }
}

@media (max-width: 768px) {
  .animate-slide-in-right {
      animation: slideInRight 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }

  .animate-slide-in-left {
      animation: slideInLeft 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
}

/* Dark Mode Overrides for Shortcuts - Added by AI */
body.dark-mode .shortcut-group {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px) saturate(180%);
}

body.dark-mode .shortcut-group:hover {
  background: rgba(30, 41, 59, 0.8);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

body.dark-mode .shortcut-group h3 {
  color: #e2e8f0;
}

body.dark-mode .shortcut-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .shortcut-icon {
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

body.dark-mode .shortcut-item span {
  color: #cbd5e1;
}

body.dark-mode .shortcut-item:hover span {
  color: #ffffff;
}

/* Dark Mode Specific Colors for Icons */
body.dark-mode .shortcut-group:nth-child(4n + 1) .shortcut-icon {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}
body.dark-mode .shortcut-group:nth-child(4n + 2) .shortcut-icon {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}
body.dark-mode .shortcut-group:nth-child(4n + 3) .shortcut-icon {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}
body.dark-mode .shortcut-group:nth-child(4n + 4) .shortcut-icon {
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
}

/* ================= LOGIN & AUTH STYLES ================= */
.login-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  z-index: 10000; /* Higher than everything */
}

body.dark-mode .login-wrapper {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.login-card {
  background: var(--card-bg);
  padding: 3rem;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 480px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(10px);
}

.login-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.login-logo i {
    font-size: 2.5rem;
}

.login-logo h1 {
  font-size: 1.8rem;
  font-weight: 800;
  color: #333;
  margin: 0;
}

body.dark-mode .login-logo h1 {
    color: #fff;
}

.login-subtitle {
  color: var(--text-muted);
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

.login-tabs {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 2rem;
}

body.dark-mode .login-tabs {
    background: #334155;
}

.login-tab {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s ease;
}

.login-tab.active {
  background: #fff;
  color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

body.dark-mode .login-tab.active {
    background: #1e293b;
    color: #60a5fa;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-align: left;
}

.auth-form.hidden {
    display: none;
}

.auth-form .form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    display: block;
    color: var(--text-main);
}

.auth-form input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-size: 1rem;
  background: var(--bg-color);
  color: var(--text-main);
  transition: border-color 0.3s;
}

.auth-form input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.btn-full {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: var(--primary-color);
  color: white;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-top: 0.5rem;
}

.btn-full:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(74, 144, 226, 0.3);
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 0.6rem 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.divider::before, .divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-color);
}

.divider span {
  padding: 0 10px;
}

.btn-google {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: white;
  color: #333;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  transition: all 0.2s;
}

body.dark-mode .btn-google {
    background: #334155;
    color: #fff;
    border-color: #475569;
}

.btn-google:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

body.dark-mode .btn-google:hover {
    background: #475569;
}

.auth-alert {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 12px;
  background: #fee2e2;
  color: #ef4444;
  font-size: 0.9rem;
  text-align: center;
  border: 1px solid #fecaca;
  display: none;
}
.auth-alert:not(.hidden) {
    display: block;
}
.auth-alert.success {
    background: #dcfce7;
    color: #16a34a;
    border-color: #bbf7d0;
}

/* Auth Form Enhancements */
.toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-color);
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    width: fit-content;
}

.toggle-label-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.auth-form select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 1rem;
    background: var(--bg-color);
    color: var(--text-main);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

#reg-class-info-group.hidden, #g-reg-class-info-group.hidden {
    display: none;
}


/* ================= ADMIN PAGE STYLES ================= */
/* ================= ADMIN PAGE STYLES (Redesigned) ================= */
#admin-section {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
}

/* ================= Admin Dashboard Styles (New) ================= */
.admin-container {
    display: flex;
    flex-direction: column; 
    height: auto; 
    min-height: 500px;
    background: transparent; 
    border-radius: 0; 
    overflow: visible; 
    box-shadow: none; 
    border: none; 
    margin: 1rem 0 1rem 350px; /* Fine-tuned from 400px to 350px */
    width: auto;
    max-width: calc(100% - 370px); /* Resized to match new margin */
}

/* --- Top Navigation (Replaces Sidebar) --- */
.admin-top-menu {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align left to apply specific padding */
    gap: 8px;
    padding: 0 0 1.25rem 50px; /* Increased bottom padding for more space */
    background: transparent; 
    flex-wrap: wrap;
    border-bottom: none; 
    padding-bottom: 0;
    margin-bottom: 1rem; /* Added margin for more gap */
}

.admin-nav-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 12px;
    border: 1px solid var(--border-color); /* Keep button border */
    background: white;
    color: #64748b;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-sm); /* Keep small shadow on buttons */
}

.admin-nav-btn:hover {
    background: #f8fafc;
    color: #334155;
    transform: translateY(-1px);
}

.admin-nav-btn.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.25);
}

/* Download CSV Button in Top Bar */
.admin-nav-btn.download-csv {
    /* MArgin auto removed to place next to items */
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border-color: transparent;
}
.admin-nav-btn.download-csv:hover {
    background: #10b981;
    color: white;
}

body.dark-mode .admin-nav-btn {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}
body.dark-mode .admin-nav-btn:hover {
    background: #334155;
    color: #f1f5f9;
}
body.dark-mode .admin-nav-btn.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* --- Sidebar (Hidden) --- */
.admin-sidebar {
    width: 260px; /* Reverted per request but hidden */
    background: var(--card-bg);
    border-right: 1px solid var(--border-color);
    display: none !important; /* Force hide */
    flex-direction: column;
    padding: 1.5rem;
    flex-shrink: 0;
}
/* Revert Sidebar CSS for safety */
.admin-sidebar-header { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); }
.admin-sidebar-header h3 { font-size: 1.2rem; font-weight: 800; color: var(--primary-color); display: flex; align-items: center; gap: 10px; margin: 0; }
.admin-nav { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.admin-nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: transparent; color: var(--text-muted); font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; font-size: 0.95rem; text-align: left; outline: none; }
.admin-nav-item i { width: 20px; text-align: center; font-size: 1.1rem; }
.admin-nav-item:hover { background: rgba(99, 102, 241, 0.08); color: var(--primary-color); }
.admin-nav-item.active { background: var(--primary-color); color: white; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); }
.admin-sidebar-footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.admin-nav-item.download-csv { color: #10b981; background: rgba(16, 185, 129, 0.1); font-size: 0.9rem; justify-content: center; }
.admin-nav-item.download-csv:hover { background: #10b981; color: white; }

/* --- Main Content --- */
.admin-content {
    flex: 1;
    padding: 0; 
    background: transparent; 
    overflow: visible; 
    max-height: none; 
    margin-top: 0; /* Reset margin (lowered by ~16px from -1rem) */
}
/* Cleaned up trailing lines */

.admin-view {
    display: none;
    animation: fadeIn 0.3s ease-out;
    max-width: 1200px; /* Constrain max width for better readability on huge screens */
    margin: 0 auto; /* Center content */
}

.admin-view.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.view-header {
    margin-bottom: 1rem; /* Reduced margin since title is gone */
    display: flex;
    justify-content: flex-end; /* Align actions to right if title is gone */
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    min-height: 0; /* Allow collapsing if empty */
}

/* Hide redundant titles as requested */
.view-header h2,
.view-header .view-desc {
    display: none !important;
}

.view-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* --- Dashboard Stats --- */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Force 3 columns on desktop */
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 900px) {
    .admin-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

.stat-card {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.stat-card.total { border-bottom: 4px solid #3b82f6; }
.stat-card.pending { border-bottom: 4px solid #f59e0b; }
.stat-card.deleted { border-bottom: 4px solid #ef4444; }

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.total .stat-icon { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.pending .stat-icon { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.deleted .stat-icon { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

.stat-info h3 {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0 0 4px 0;
    font-weight: 600;
}

.stat-info span {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1e293b;
}

.stat-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}

.stat-badge.danger { background: #fee2e2; color: #ef4444; }
.pending .stat-badge { background: #fef3c7; color: #d97706; }

body.dark-mode .stat-card { background: #1e293b; border-color: #334155; }
body.dark-mode .stat-info span { color: #f1f5f9; }
body.dark-mode .stat-info h3 { color: #94a3b8; }

/* --- Dashboard Widgets --- */
/* --- Dashboard Widgets --- */
/* --- User Log Filters --- */
.log-filter-bar {
    background: var(--card-bg);
    padding: 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-end;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.filter-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 2px;
}

.filter-group .curr-input {
    min-width: 140px;
    height: 36px;
    padding: 0 0.75rem !important;
}

.btn-filter-apply {
    background: var(--primary-color);
    color: white !important;
    border: none;
    padding: 0 1.25rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 36px;
}

.btn-filter-apply:hover {
    background: #357abd;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
}

.btn-filter-reset:hover {
    background: var(--bg-color);
    border-color: var(--text-muted) !important;
}

@media (max-width: 900px) {
    .log-filter-bar {
        gap: 1rem;
    }
    .filter-group {
        flex: 1 1 45%;
    }
    .filter-group .curr-input {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .filter-group {
        flex: 1 1 100%;
    }
}

/* --- Admin Table Wrapper (Card Style) --- */
.admin-table-wrapper {
    background: var(--card-bg); /* Add card background */
    border-radius: 16px;       /* Rounded corners */
    box-shadow: var(--shadow-sm); /* Subtle shadow */
    border: 1px solid var(--border-color);
    padding: 1.5rem;           /* Inner spacing */
    overflow: hidden;          /* Contain child borders */
    margin-bottom: 2rem;
}

/* --- Admin Table Styles (Refined) --- */
.admin-table {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0;
}

.admin-table th {
    background: #f8fafc; /* Light gray-blue header */
    color: #475569;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 16px;
    text-align: center; /* Generally center headers */
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.admin-table th:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.admin-table th:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

.admin-table td {
    padding: 16px;
    border-bottom: 1px solid #f1f5f9;
    color: var(--text-main);
    font-size: 0.9rem;
    vertical-align: middle;
    text-align: center; /* Center content by default */
    white-space: nowrap; /* Prevent wrapping */
}

/* Specific column alignments */
.admin-table th[data-sort="name"], .admin-table td:nth-child(4) { font-weight: 700; color: var(--text-main); }
.admin-table th[data-sort="email"], .admin-table td:nth-child(6) { color: #64748b; font-size: 0.85rem; }

.admin-table tbody tr:hover {
    background-color: #f8fafc;
}

/* Badges (New Style) */
.badge-role-admin { background: #fee2e2; color: #ef4444; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; }
.badge-role-sub { background: #e2e8f0; color: #475569; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; }
.badge-role-user { background: #dcfce7; color: #16a34a; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; }

.badge-status-approved { background: #dcfce7; color: #16a34a; padding: 4px 10px; border-radius: 8px; font-size: 0.75rem; font-weight: 700; }
.badge-status-pending { background: #ffedd5; color: #f97316; padding: 4px 10px; border-radius: 8px; font-size: 0.75rem; font-weight: 700; }

.badge-position {
    background: #e0e7ff; color: #4f46e5;
    padding: 4px 12px; border-radius: 20px;
    font-size: 0.8rem; font-weight: 600;
    display: inline-block;
}

.info-text-bold { color: #3b82f6; font-weight: 700; font-size: 0.85rem; }
.info-text-muted { color: #94a3b8; font-size: 0.85rem; }


/* Action Buttons */
.action-btn-group { display: flex; gap: 8px; justify-content: center; align-items: center; }

/* Segmented Control Filter Style */
.admin-segmented-control {
    display: flex;
    background: #f1f5f9;  /* Light gray background for the track */
    padding: 4px;
    border-radius: 8px;   /* Rounded corners */
    height: 42px;         /* Match search input height */
    box-sizing: border-box;
    border: 1px solid var(--border-color);
}

.segment-btn {
    border: none;
    background: transparent;
    padding: 0 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;       /* Muted text */
    border-radius: 6px;   /* Slightly smaller radius for inner buttons */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    display: flex;        
    align-items: center;
    justify-content: center; /* Center text info */
    user-select: none;    
    flex: 1;              /* Fill available width equally */
    height: 100%;         /* Fill available height */
}

/* Hover Effect */
.segment-btn:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.5); /* Subtle white overlay */
    color: #334155;
}

/* Click/Press Effect */
.segment-btn:active {
    transform: scale(0.96); /* Button press feel */
}

/* Selected State */
/* Selected State */
.segment-btn.active {
    background: #ffffff !important;  /* Force white background */
    color: #3b82f6 !important;       /* Force primary color text */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) !important; /* Force shadow */
    font-weight: 700 !important;
    transform: scale(1);
    opacity: 1 !important;
}

/* Admin Search & Filter Styling Update */
.view-actions {
    background: transparent; /* Remove container bg */
    padding: 0;
    box-shadow: none;
    border: none;
    margin-bottom: 1rem;
    display: flex;
    justify-content: flex-end; /* Align to right */
    gap: 12px;
}

/* ... Stat Card Clickable ... */
.stat-card.clickable {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card.clickable:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* --- Dashboard Widgets --- */
.dashboard-widgets {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 1.5rem;
}

@media (max-width: 1100px) {
    .dashboard-widgets {
        grid-template-columns: 1fr;
    }
}

.dashboard-widget {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 1.5rem; 
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    overflow: hidden; /* Prevent child wide content from stretching the card */
}

.dashboard-widget.full-width {
    grid-column: 1 / -1; /* Fill the entire width of the dashboard */
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.widget-header h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Pagination Styling */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.pagination button {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: white;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination button:hover:not(:disabled) {
    background: #f1f5f9;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.pagination button.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

body.dark-mode .pagination button {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

body.dark-mode .pagination button.active {
    background: var(--primary-color);
    color: white;
}
.btn-text:hover { text-decoration: underline; }

/* Filter Group - Removed buttons CSS, using toggle above */

.admin-search-box {
    position: relative;
    width: 240px;
}

.admin-search-box input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border-radius: 20px; /* Rounder search */
    border: 1px solid var(--border-color);
    background: white;
    color: var(--text-main);
    font-size: 0.9rem;
    outline: none;
    box-shadow: var(--shadow-sm);
}

.admin-search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* === User Stats Widget Styles === */
.stats-widget-container {
    padding: 2rem !important;
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.stats-title h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
}

.stats-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide scrollbar Firefox */
}
.stats-controls::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

.stats-period-buttons {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    flex: 0 0 auto;
}

.period-btn {
    padding: 6px 16px;
    border-radius: 6px;
    border: none;
    background: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.period-btn.active {
    background: white;
    color: #3b82f6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.stats-select {
    width: auto !important;
    min-width: 100px;
    height: 38px !important;
    padding: 0 10px !important;
    background-color: white !important;
    border: 1px solid #e2e8f0 !important;
    flex: 0 0 auto;
}

.stats-date-range {
    display: flex;
    align-items: center;
    gap: 4px;
    background: white;
    border: 1px solid #e2e8f0;
    padding: 0 8px;
    border-radius: 8px;
    height: 38px;
    flex: 0 0 auto;
}

.stats-date-range .date-input {
    border: none !important;
    padding: 0 4px !important;
    width: 110px;
    font-size: 0.85rem;
    background: transparent !important;
}

.range-sep {
    color: #94a3b8;
}

.stats-download-btn {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 1rem !important;
    flex: 0 0 auto;
    white-space: nowrap;
}

.stats-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
}

.legend-dot {
    width: 10px;
    height: 10px;
    background: #3b82f6;
    border-radius: 50%;
}

.legend-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
}

.stats-chart-wrapper {
    width: 100%;
    margin-bottom: 2rem;
    position: relative;
    overflow-x: auto; /* Enable horizontal scroll */
    background: white;
    border-radius: 12px;
}

.stats-chart-scroll-inner {
    height: 350px;
    min-width: 100%;
    /* Width will be set dynamically via JS */
}

/* Scrollbar for chart */
.stats-chart-wrapper::-webkit-scrollbar {
    height: 6px;
}
.stats-chart-wrapper::-webkit-scrollbar-track {
    background: #f8fafc;
}
.stats-chart-wrapper::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}
.stats-chart-wrapper::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

body.dark-mode .stats-chart-wrapper { background: #0f172a; }
body.dark-mode .stats-chart-wrapper::-webkit-scrollbar-track { background: #1e293b; }
body.dark-mode .stats-chart-wrapper::-webkit-scrollbar-thumb { background: #334155; }

/* Stats Data Table (Horizontal Scroll) */
.stats-table-scroll-container {
    width: 100%;
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
}

.stats-table-wrapper table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

.stats-table-wrapper th {
    background: #eff6ff;
    color: #1e40af;
    font-size: 0.85rem;
    padding: 12px;
    border: 1px solid #dbeafe;
    white-space: nowrap;
}

/* Side Widget Styles */
.side-widget {
    background: white;
}

.recent-logs-list {
    display: flex;
    flex-direction: column;
}

.recent-log-item {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}

.recent-log-item:hover {
    background: #f8fafc;
}

.recent-log-item:last-child {
    border-bottom: none;
}

.log-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.log-admin {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
}

.log-time {
    font-size: 0.75rem;
    color: #94a3b8;
}

.log-action-text {
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
}

.log-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

body.dark-mode .recent-log-item { border-color: #334155; }
body.dark-mode .recent-log-item:hover { background: #334155; }
body.dark-mode .log-admin { color: #f1f5f9; }
body.dark-mode .log-action-text { color: #cbd5e1; }

/* Scrollbar styling for stats table */
.stats-table-scroll-container::-webkit-scrollbar {
    height: 8px;
}
.stats-table-scroll-container::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.stats-table-scroll-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.stats-table-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Dark Mode Overrides */
body.dark-mode .stats-title h3 { color: #f1f5f9; }
body.dark-mode .stats-period-buttons { background: #0f172a; border-color: #334155; }
body.dark-mode .period-btn.active { background: #1e293b; color: #60a5fa; }
body.dark-mode .stats-date-range { background: #1e293b; border-color: #334155; }
body.dark-mode .stats-table-wrapper th { background: #172554; color: #60a5fa; border-color: #1e3a8a; }
body.dark-mode .stats-table-wrapper td { background: #0f172a; color: #cbd5e1; border-color: #1e293b; }
body.dark-mode .legend-text { color: #94a3b8; }

/* Log & Bin specifics */
.log-table td, .bin-table td {
    padding: 12px 16px;
}

.recent-logs-list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}
.recent-logs-list li:last-child { border-bottom: none; }

.log-icon {
    width: 36px; height: 36px; 
    border-radius: 50%; background: #eff6ff; 
    display: flex; align-items: center; justify-content: center;
    color: #3b82f6; font-size: 1rem;
    flex-shrink: 0;
}

.log-content {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.log-text { font-size: 0.9rem; color: var(--text-main); }
.log-time { font-size: 0.75rem; color: var(--text-muted); margin: 0; }

/* Responsive Sidebar */
@media (max-width: 1024px) {
    .admin-container {
        flex-direction: column;
        margin: 1rem;
        width: auto;
        max-width: 100%;
        margin-left: 0; /* Reset margin on mobile */
    }
    .admin-sidebar {
     /* ... (Existing responsive styles) ... */
        width: 100%;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        padding: 1rem;
        height: auto;
    }
    .admin-sidebar-header {
        margin: 0;
        padding: 0;
        border: none;
        margin-right: 2rem;
    }
    .admin-nav {
        flex-direction: row;
        overflow-x: auto;
    }
    .admin-sidebar-footer {
        display: none;
    }
    .admin-nav-item {
        white-space: nowrap;
        padding: 8px 12px;
    }
    .stat-badge {
        display: none;
    }
}

/* Refined Toggle Switch */
.toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
    padding: 0 12px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    width: fit-content;
    margin: 5px 0;
}

.toggle-label-text {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

.toggle-label-text.active {
    color: #4a90e2;
    font-weight: 700;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    margin-bottom: 0 !important;
    cursor: pointer;
}

.switch input { 
    opacity: 0; 
    width: 0; 
    height: 0;
}


/* Admin stats grid fix */
@media (max-width: 768px) {
    .admin-stats {
        grid-template-columns: 1fr;
    }
}

.hidden {
    display: none !important;

}

/* ================= Admin Dashboard Styles (New) ================= */
.admin-dashboard {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.admin-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.stat-card {
  flex: 1;
  background: white;
  border-radius: 20px;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent; /* Changed to 2px for selected state visibility */
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.stat-card.selected {
  border-color: #3b82f6;
  background: #eff6ff;
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-right: 1.5rem;
}

.stat-card.pending .stat-icon {
  background: #fff7ed;
  color: #f59e0b;
}

.stat-card.total .stat-icon {
  background: #eff6ff;
  color: #3b82f6;
}

.stat-info h3 {
  font-size: 0.95rem;
  color: #64748b;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.stat-info .count-number {
  font-size: 2rem;
  font-weight: 800;
  color: #1e293b;
  line-height: 1;
}

.stat-action-indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 0.9rem;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}

.stat-card:hover .stat-action-indicator {
  opacity: 1;
  transform: translateX(0);
}

.filter-label {
  background: #fff7ed;
  border: 1px solid #ffedd5;
  color: #c2410c;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.95rem;
  animation: slideDown 0.3s ease-out;
}

.filter-label button {
  color: #ea580c;
  text-decoration: underline;
  font-weight: 700;
  cursor: pointer;
  background: none; border: none;
}




/* Dark Mode Adjustments */
body.dark-mode .stat-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: none;
}
body.dark-mode .stat-card:hover {
    background: #334155;
}
body.dark-mode .stat-card.selected {
    border-color: #60a5fa;
    background: #1e3a8a;
}
body.dark-mode .admin-table-wrapper {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .admin-table th {
    background: #0f172a;
    color: #94a3b8;
    border-color: #334155;
}
body.dark-mode .admin-table td {
    border-color: #334155;
    color: #cbd5e1;
}
body.dark-mode .admin-table tr:hover {
    background: #334155;
}
body.dark-mode .admin-user-name {
    color: #f1f5f9;
}
body.dark-mode .filter-label {
    background: #431407;
    border-color: #7c2d12;
    color: #fed7aa;
}
body.dark-mode .filter-label button {
    color: #fdba74;
}

/* ================= Admin User Modal Simplification ================= */
#adminUserModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, 0.3);
}

#adminUserModal.active {
    display: flex !important;
}

.admin-edit-content {
    width: 90% !important;
    max-width: 500px !important;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
    background: #ffffff !important;
    margin: auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

body.dark-mode .admin-edit-content {
    background: #1e293b;
    color: #f1f5f9;
}

#adminUserModal .modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
}

body.dark-mode #adminUserModal .modal-header {
    border-color: #334155;
}

#adminUserModal .modal-header h2 {
    font-size: 1.2rem;
    font-weight: 700;
}

#adminUserModal .modal-body {
    padding: 1.5rem;
}

#adminUserModal .form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 0.35rem;
}

body.dark-mode #adminUserModal .form-group label {
    color: #94a3b8;
}

#adminUserModal input[type="text"],
#adminUserModal input[type="email"],
#adminUserModal select {
    width: 100%;
    height: 45px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 0 12px;
    font-size: 0.95rem;
    box-sizing: border-box;
}

body.dark-mode #adminUserModal input[type="text"],
body.dark-mode #adminUserModal select {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

#adminUserModal .modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

body.dark-mode #adminUserModal .modal-footer {
    border-color: #334155;
}

.btn-save-admin {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%) !important;
    color: white !important;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
}

.btn-save-admin:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.3);
}

.btn-cancel-simple {
    padding: 0.75rem 1.25rem;
    background: #f3f4f6;
    color: #4b5563;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

body.dark-mode .btn-cancel-simple {
    background: #334155;
    color: #cbd5e1;
}

/* ================= Status Table Editable Fixes ================= */
.status-table th, .status-table td {
    position: relative; /* For proper stacking context */
    /* overflow: hidden; Removed to allow resize handle interaction if needed, but input should be contained */
}

.status-table th .header-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.status-table .editable-input {
    width: 100%;
    min-width: 0; /* Important for narrow columns like 'No' or 'Job' */
    box-sizing: border-box; 
    border: 1px solid transparent; 
    background: transparent;
    padding: 4px 2px; /* Reduced horizontal padding for narrow cells */
    font-size: inherit;
    font-family: inherit;
    text-align: center;
    border-radius: 4px;
    transition: all 0.2s;
    outline: none;
    color: inherit;
}

.status-table .editable-input:hover {
    border-color: #cbd5e1; 
    background: rgba(255, 255, 255, 0.5);
}

.status-table .editable-input:focus {
    border-color: #3b82f6;
    background: white;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    z-index: 5; /* Ensure focused input is above other elements */
}

/* Dark mode support */
body.dark-mode .status-table .editable-input {
    color: #e2e8f0;
}
body.dark-mode .status-table .editable-input:hover {
    background: #334155;
    border-color: #475569;
}
body.dark-mode .status-table .editable-input:focus {
    background: #1e293b;
    border-color: #3b82f6;
}

/* Ensure resize handle is clickable and above input */
.resize-handle {
    z-index: 20 !important;
}

/* ================= Datayard Group Edit Actions ================= */
.group-edit-actions {
    display: flex;
    gap: 0.5rem;
    /* margin-left: 1rem; Removed */
}

.group-edit-actions button {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: white;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.group-edit-actions .edit-group-btn:hover {
    background: #f0f9ff;
    color: #0284c7;
    border-color: #bae6fd;
    transform: translateY(-1px);
}

.group-edit-actions .delete-group-btn:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
    transform: translateY(-1px);
}

/* ================= Today Badge & Date Highlight ================= */
.curr-cell.date-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important; /* Revert to center */
    gap: 2px !important;
    padding-top: 0 !important;          /* Remove padding */
}

.date-number {
    /* Remove fixed size for normal dates */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-main, inherit);
    background: transparent;
    transition: all 0.2s ease;
    /* Font size inherit to respect original */
    font-size: inherit;
    font-weight: inherit;
}

/* Dark Mode Support for Date Number */
body.dark-mode .date-number {
    color: inherit;
}

/* Highlight Circle for Today (Apply size only here) */
.date-number.today-circle {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #8b5cf6, #4f46e5) !important;
    color: white !important;
    font-weight: 800;
    font-size: 1.15rem; /* Larger font */
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.4), 
                0 0 0 2px rgba(255, 255, 255, 0.2) inset !important; /* Inner glow */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px); /* Slight lift */
}

/* Fix Badge Position: Float layout adjustment */
.curr-cell.date-cell {
    position: relative !important;
}

.curr-cell.date-cell .today-badge {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: fit-content !important;
    
    /* Center reference + fixed offset to follow the date number */
    top: 50% !important; 
    margin-top: -46px !important;
    bottom: auto !important;
    
    /* High priority layer to float above everything else in the table */
    z-index: 2000 !important;
}

/* ================= Segmented Control (Profile Homeroom) ================= */
.segmented-control-container {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    width: fit-content;
    border: 1px solid #e2e8f0;
}

.segment-btn-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 90px;
    user-select: none;
}

.segment-btn-custom:hover {
    color: #334155;
    background: rgba(255,255,255,0.5);
}

.segment-btn-custom.active {
    background: white;
    color: #3b82f6; /* Primary Blue */
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1);
}

/* ================= Training Section Wide Layout ================= */
.training-container {
    width: 95%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 10px 20px 20px;
    background: transparent;
}

.section-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-main, #1e293b);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 768px) {
    .training-container {
        width: 100%;
        padding: 10px;
    }
}

/* ================= Modern Training Table Styles ================= */
.training-table-wrapper {
    overflow: visible; /* sticky ?ㅻ뜑媛€ 硫붿씤 ?ㅽ겕濡ㅼ쓣 ?곕씪媛€?꾨줉 媛뺤젣 */
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    background: white;
    border: 1px solid #e2e8f0;
    margin-bottom: 20px;
}

.training-table-modern {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    white-space: nowrap; /* ??以??쒖떆 */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* Header Styling */
.training-table-modern thead th {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: #f8fafc !important; /* 諛곌꼍??怨좎젙 */
    color: #475569;
    font-weight: 700;
    text-align: center !important;
    padding: 14px 16px;
    border-bottom: 2px solid #cbd5e1 !important; /* ???쒕졆??寃쎄퀎??*/
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

/* Cell Styling */
.training-table-modern tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #334155;
    transition: background-color 0.2s;
    font-family: inherit; /* ?곸냽 */
}

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

.training-table-modern tbody tr:hover {
    background-color: #f8fafc;
}

/* Column Specific Styles */
/* Column Specific Styles - Width handled inline in HTML */
.col-num { color: #94a3b8; font-size: 0.9em; text-align: center; font-variant-numeric: tabular-nums; }
.col-category { text-align: center; }
.col-title { font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; text-align: left; white-space: normal; } /* Allow wrapping */
.col-target { color: #64748b; font-size: 0.9em; text-align: center; }
.col-deadline { 
    color: #d97706; 
    text-align: center; 
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.col-manager { text-align: center; color: #475569; }
.col-link { text-align: left; overflow: hidden; text-overflow: ellipsis; }
.col-completers { overflow: visible; text-align: left; }
.col-actions { text-align: center; }

/* Custom Scrollbar for Completers - Removed since wrapping */
/*.col-completers::-webkit-scrollbar { height: 4px; } ... */
.col-completers::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.col-completers::-webkit-scrollbar-track { background: transparent; }

/* Completer Tags in One Line */
/* Completer List Scroll Container */
.completer-scroll-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center; /* ?섏쭅 以묒븰 ?뺣젹 ?꾪븿?대굹 wrap ?쒖뿉??以꾨컮轅?*/
    align-content: flex-start; /* 以꾨컮轅????꾩そ遺€??梨꾩? */
    max-height: 80px; /* ??2.5以??믪씠 */
    overflow-y: auto;
    padding: 4px;
    /* Custom Scrollbar inside */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.completer-scroll-container::-webkit-scrollbar {
    width: 4px;
}
.completer-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}
.completer-scroll-container::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

.completer-tag-modern {
    display: inline-flex;
    align-items: center;
    background: #eff6ff;
    color: #3b82f6;
    padding: 2px 8px; /* ?⑤뵫 ?쎄컙 異뺤냼 */
    border-radius: 12px;
    font-size: 0.8rem; /* ?고듃 ?쎄컙 異뺤냼 */
    font-weight: 500;
    border: 1px solid #dbeafe;
    white-space: nowrap;
    height: 24px; /* ?믪씠 怨좎젙?쇰줈 洹좎씪?섍쾶 */
}

.completer-tag-modern .remove-btn {
    margin-left: 6px;
    cursor: pointer;
    opacity: 0.5;
    font-size: 0.8em;
    transition: opacity 0.2s;
}
.completer-tag-modern .remove-btn:hover { opacity: 1; color: #ef4444; }

/* Note Input Styling */
.note-input-modern {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    font-size: 0.95rem;
    color: #334155;
    transition: all 0.2s;
    font-family: inherit;
}

.note-input-modern:hover {
    background: #f1f5f9;
}

.note-input-modern:focus {
    background: white;
    border-color: #bfdbfe;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* Badge Updates (Inspired by Admin User Status Style) */
.badge {
    padding: 5px 14px;
    border-radius: 50px; /* Perfect Pill Shape */
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    display: inline-block;
    letter-spacing: -0.01em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.badge-essential { 
    background-color: #fef2f2; 
    color: #ef4444; 
    border: 1px solid #fee2e2; 
}

.badge-optional { 
    background-color: #eff6ff; 
    color: #3b82f6; 
    border: 1px solid #dbeafe; 
}

.target-badge {
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    display: inline-block;
    background-color: #f1f5f9;  /* Light slate bg */
    color: #475569;             /* Slate text */
    border: 1px solid #e2e8f0;
    letter-spacing: -0.01em;
}

/* Specific highlight for '??援먯썝/吏곸썝' often seen in trainings */
.target-badge {
    background-color: #f5f3ff; /* Very light violet */
    color: #6366f1;           /* Indigo text */
    border-color: #e0e7ff;
}

/* Completer Tooltip Styles */
.completer-tooltip-container {
    position: relative;
    display: inline-block;
}

.completer-more-badge {
    background: #e2e8f0;
    color: #64748b;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.completer-more-badge:hover {
    background: #cbd5e1;
}

.completer-tooltip-content {
    visibility: hidden;
    width: 250px;
    background-color: white;
    color: #334155;
    text-align: left;
    border-radius: 8px;
    padding: 10px;
    position: absolute;
    z-index: 100;
    bottom: 125%; /* Position above */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    white-space: normal; /* Allow wrapping inside tooltip */
    max-height: 200px;
    overflow-y: auto;
}

.completer-tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #e2e8f0 transparent transparent transparent;
}

.completer-tooltip-container:hover .completer-tooltip-content {
    visibility: visible;
    opacity: 1;
}

/* Tooltip internal tags */
/* Completer Status Button - Refined & Colorful */
.btn-completer-status {
    background: #f0f7ff; /* Very light blue background */
    color: #2563eb;    /* Professional blue text */
    font-size: 0.85rem;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 8px;
    border: 1px solid #dbeafe; /* Subtle blue border */
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.05); /* Very subtle blue shadow */
}

.btn-completer-status i.fa-check-circle {
    color: #3b82f6; 
    font-size: 1rem;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
}

.btn-completer-status:hover {
    background: #e0f2fe;
    border-color: #bae6fd;
    color: #1d4ed8;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.btn-completer-status.expanded {
    background: #2563eb;
    color: white;
    border-color: #1d4ed8;
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
}

.btn-completer-status.expanded i.fa-check-circle {
    color: white;
}

.btn-completer-status:active {
    transform: scale(0.97);
}

.btn-completer-status.empty {
    background: #ffffff;
    color: #94a3b8;
    border: 1px dashed #cbd5e1;
    box-shadow: none;
}

.btn-completer-status.empty:hover {
    background: #f8fafc;
    border-style: solid;
    color: #64748b;
    transform: none;
}

.btn-completer-status i {
    font-size: 0.9em;
}
/* Completer Toggle Styles */
.completer-toggle-content {
    display: none; /* Hidden by default */
    margin-top: 8px;
    padding: 8px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    width: 100%;
    box-sizing: border-box;
}

.completer-toggle-content.active {
    display: block;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.btn-completer-status .fa-chevron-down {
    transition: transform 0.2s;
}

.btn-completer-status.expanded .fa-chevron-down {
    transform: rotate(180deg);
}

.completer-tags-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    align-items: center;
    padding: 4px 0;
}

.completer-tag-modern {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background: #eef2ff;
    color: #4f46e5;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid #e0e7ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.completer-tag-modern .remove-btn {
    margin-left: 6px;
    cursor: pointer;
    opacity: 0.5;
    font-size: 0.75rem;
    transition: opacity 0.2s, color 0.2s;
}

.completer-tag-modern .remove-btn:hover {
    opacity: 1;
    color: #ef4444;
}

/* Training Management Action Buttons (Bus Request Style) */
.training-action-btns {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.training-action-btns button {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: white;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s;
}

.training-action-btns .btn-edit:hover {
    background: #f0f9ff;
    color: #0284c7;
    border-color: #bae6fd;
    transform: translateY(-1px);
}

.training-action-btns .btn-delete {
    color: #ef4444; /* Red icon as requested */
    background: #fef2f2; /* Light red background */
    border-color: #fecaca;
}

.training-action-btns .btn-delete:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
    transform: translateY(-1px);
}

/* Ensure Note textarea fits one line smoothly */
.note-input-modern::-webkit-scrollbar {
    width: 4px;
}
.note-input-modern::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

/* Refined Add Completer Button (Calendar Style) */
.btn-add-completer {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    color: #3b82f6;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.85rem;
    padding: 0;
    vertical-align: middle;
}

.btn-add-completer:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
    transform: scale(1.1) rotate(90deg); /* Playful rotate on hover */
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}

.btn-add-completer:active {
    transform: scale(0.95);
}

/* Dark Mode Support for the Add Button */
body.dark-mode .btn-add-completer {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .btn-add-completer:hover {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* Training Table Drag & Drop Styles */
.col-drag:hover {
    color: #3b82f6 !important;
}

.sortable-ghost {
    opacity: 0.4;
    background: #eff6ff !important;
    border: 2px dashed #3b82f6 !important;
}

body.dark-mode .sortable-ghost {
    background: #1e3a8a !important;
    border-color: #60a5fa !important;
}

/* ================= Menu Management Styles ================= */
.menu-settings-container {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    border: 1px solid #e2e8f0;
}

.menu-settings-subtitle {
    font-size: 1.1rem;
    color: #1e293b;
    margin-bottom: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.menu-toggle-item {
    background: #f8fafc;
    border-color: #e2e8f0;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-toggle-item.is-active {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.menu-toggle-item .item-name {
    font-weight: 600;
    color: #334155;
    font-size: 1rem;
}

.menu-toggle-item .toggle-control-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.menu-toggle-item .status-text {
    color: #94a3b8;
    font-weight: 500;
    font-size: 0.85rem;
    transition: all 0.3s;
    min-width: 40px;
    text-align: right;
}

.menu-toggle-item.is-active .status-text {
    color: #2563eb;
    font-weight: 600;
}

.menu-toggle-item .slider {
    background-color: #cbd5e1;
}

.menu-toggle-item.is-active .slider {
    background-color: #3b82f6;
}

/* ================= Dark Mode Refinements ================= */
body.dark-mode .menu-settings-container {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

body.dark-mode .menu-settings-subtitle {
    color: #f8fafc;
}

body.dark-mode .menu-toggle-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .menu-toggle-item.is-active {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

body.dark-mode .menu-toggle-item .item-name {
    color: #e2e8f0;
}

body.dark-mode .menu-toggle-item .status-text {
    color: #64748b;
}

body.dark-mode .menu-toggle-item.is-active .status-text {
    color: #60a5fa;
}

/* Training Table Dark Mode */
body.dark-mode .training-table-wrapper {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}


body.dark-mode .col-title {
    color: #ffffff;
    font-weight: 600;
}

body.dark-mode .col-manager {
    color: #94a3b8;
}

body.dark-mode .note-input-modern {
    color: #cbd5e1;
}

body.dark-mode .note-input-modern:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .note-input-modern:focus {
    background: rgba(15, 23, 42, 0.8);
    border-color: #3b82f6;
}

/* Completer Chip Buttons */
.completer-chip-btn {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
    background-color: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.completer-chip-btn.is-checked {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

body.dark-mode .completer-chip-btn {
    background-color: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .completer-chip-btn.is-checked {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

body.dark-mode .completer-tag-modern {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

body.dark-mode .completer-add-btn-sm {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    border: 1px dashed rgba(59, 130, 246, 0.4);
}

body.dark-mode .completer-add-btn-sm:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
}

/* Completer Add Button Small (Base) */
.completer-add-btn-sm {
    background: #f1f5f9;
    color: #475569;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.completer-add-btn-sm:hover {
    background: #e0f2fe;
    color: #3b82f6;
    border-color: #3b82f6;
}

/* Training Management Specific Refinements */
.segment-box {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
}

.segment-box.active {
    background: white;
    color: #ef4444;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

body.dark-mode .segment-box.active {
    background: #ef4444;
    color: white;
}

.target-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.target-card { 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px; 
    border: 2px solid #e2e8f0;
    border-radius: 12px; 
    cursor: pointer;
    position: relative;
    background: #fff;
    transition: all 0.2s;
}

.target-card:hover {
    border-color: #94a3b8;
}

.target-card input {
    display: none;
}

.target-card .card-box { 
    width: 24px;
    height: 24px;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    margin-bottom: 8px;
    position: relative;
}

.target-card input:checked ~ .card-box {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

.target-card input:checked ~ .card-box:after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px; 
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.target-card .card-text {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 600;
}

.target-card input:checked ~ .card-text {
    color: #3b82f6;
}

.target-card input:checked {
    border-color: #3b82f6;
    box-shadow: 0 4px 6px -1px rgba(59,130,246,0.1);
}

body.dark-mode .target-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .target-card:hover {
    border-color: #3b82f6;
}

body.dark-mode .target-card .card-text {
    color: #94a3b8;
}

body.dark-mode .target-card input:checked ~ .card-text {
    color: #60a5fa;
}

/* Training Modern Badges */
body.dark-mode .badge-essential {
    background-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

body.dark-mode .badge-optional {
    background-color: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

body.dark-mode .badge-ox-o {
    background-color: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

/* Training Management Modal Refinements */
.training-modal-body {
    padding: 24px;
}

.training-form-label {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: #1e293b;
}

.training-form-label span {
    color: #ef4444;
    font-size: 0.8em;
    margin-left: 2px;
}

body.dark-mode .training-form-label span {
    color: #f87171;
}

.training-input-modern {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background-color: #f8fafc;
    transition: all 0.2s;
    font-family: inherit;
}

body.dark-mode .training-input-modern {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

body.dark-mode .training-input-modern:focus {
    border-color: #3b82f6;
    background-color: rgba(255, 255, 255, 0.08);
}

.training-segmented-control {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 8px;
    width: fit-content;
}

body.dark-mode .training-segmented-control {
    background: rgba(255, 255, 255, 0.05);
}

.training-segmented-control input[type="radio"] {
    display: none;
}

.segment-btn {
    display: inline-block;
}

.segment-box {
    padding: 6px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #64748b;
    transition: all 0.2s;
    cursor: pointer;
}

.segment-box.active {
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Specific colors for Category */
.segment-btn input[value="沅뚯옣"]:checked ~ .segment-box.active {
    color: #3b82f6;
}

.segment-btn input[value="?꾩닔"]:checked ~ .segment-box.active {
    color: #ef4444;
}

body.dark-mode .segment-box.active {
    background: rgba(30, 41, 59, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .segment-btn input[value="沅뚯옣"]:checked ~ .segment-box.active {
    color: #60a5fa;
}

body.dark-mode .segment-btn input[value="?꾩닔"]:checked ~ .segment-box.active {
    color: #f87171;
}

/* Direct Input Row */
.training-direct-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border: 1px solid #e2e8f0;
    padding: 10px 16px;
    border-radius: 12px;
    transition: all 0.2s;
}

body.dark-mode .training-direct-input-row {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

.training-direct-input-row .direct-label {
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
}

body.dark-mode .training-direct-input-row .direct-label {
    color: #94a3b8;
}

.training-direct-input-row .direct-field {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    color: inherit;
}

/* Modal Footer Refinement */
.training-modal-footer {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

body.dark-mode .training-modal-footer {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Completer Status Button (Table) Refinement */
body.dark-mode .btn-completer-status {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.2);
    box-shadow: none;
}

body.dark-mode .btn-completer-status:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    color: #fff;
}

body.dark-mode .btn-completer-status.empty {
    background: rgba(255, 255, 255, 0.03);
    color: #64748b;
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .btn-completer-status.empty:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
}

body.dark-mode .completer-toggle-content {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Helper Utilities used in index.html */
.mb-24 { margin-bottom: 24px; }
.mb-30 { margin-bottom: 30px; }
.flex { display: flex; }
.flex-1 { flex: 1; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-20 { gap: 20px; }
.gap-40 { gap: 40px; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.fs-085 { font-size: 0.85rem; }
.grid { display: grid; }
.grid-cols-1-2 { grid-template-columns: 1fr 2fr; }

/* Secondary Button Refinement */
.btn-secondary {
    padding: 10px 24px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    background: white;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

body.dark-mode .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: #cbd5e1;
}

body.dark-mode .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #3b82f6;
}

/* Modal Content Dark Mode Shadow */
body.dark-mode .modal-content {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

body.dark-mode .training-form-label {
    color: #94a3b8;
}

/* Completer Modal Specific */
.completer-modal-content {
    max-width: 400px;
}

#completer-list-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
}

body.dark-mode #completer-list-container {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.4);
}

/* Utilities */
.mb-10 { margin-bottom: 10px; }
.mt-10 { margin-top: 10px; }
.text-blue { color: #3b82f6 !important; }
.text-slate { color: #64748b !important; }

body.dark-mode .text-blue { color: #60a5fa !important; }
body.dark-mode .text-slate { color: #94a3b8 !important; }

/* ================= Mobile Optimization for Training Tab ================= */
@media screen and (max-width: 768px) {
    /* 1. Hide "Add Training Info" Button */
    #training-section button[onclick*="openTrainingModal"] {
        display: none !important;
    }

    /* 2. Adjust Header Title to fit one line */
    #training-section .section-title {
        font-size: 1.1rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 10px !important;
    }

    /* Adjust container padding */
    #training-section .content-body {
        padding: 10px !important;
    }

    /* 3. Hide specified columns in Training Table - ?ㅻ뜑/?곗씠????遺덉씪移??ы븿 理쒖쥌 ?뺣━ */
    /* ?ㅻ뜑?먮쭔 ?덈뒗 ???④린湲?*/
    .training-table-modern .col-drag,
    /* ?곗씠???됱뿉留??덈뒗 ???④린湲?*/
    .training-table-modern .col-link,
    .training-table-modern .col-actions,
    /* ?묒そ 紐⑤몢 ?④만 ??*/
    .training-table-modern .col-num,
    .training-table-modern .col-deadline,
    .training-table-modern .col-manager,
    .training-table-modern .col-link-info,
    .training-table-modern .col-note,
    .training-table-modern .col-manage {
        display: none !important;
    }

    /* 4. Flexible Table Text & Layout */
    .training-table-modern {
        width: 100% !important;
        table-layout: fixed !important; /* Enforce fixed width to contain text */
    }

    .training-table-modern th, 
    .training-table-modern td {
        font-size: 0.8rem !important; /* Smaller text */
        padding: 6px 3px !important;   /* Tighter padding */
        overflow: hidden; /* Prevent spillover */
        word-break: break-word !important; /* Prevent long continuous strings from expanding the table width */
        white-space: normal !important;
    }
    
    /* === ?곗닔 ?뚯씠釉??ㅻ뜑 媛뺤젣 ?쒖떆 ===
     * ?듭떖: overflow-x:auto 而⑦뀒?대꼫 ?덉뿉?쒕뒗 position:sticky媛€ ?숈옉?섏? ?딆쓬.
     * 紐⑤컮?쇱뿉?쒕뒗 sticky ?쒓굅?섍퀬 position:static?쇰줈 ?뺤긽 ?뚮뜑留?
    */
    #training-table thead tr th,
    .training-table-modern thead th {
        position: static !important;  /* sticky ?쒓굅 - overflow-x:auto 異⑸룎 諛⑹? */
        background-color: #f8fafc !important;
        color: #1e293b !important;
        opacity: 1 !important;
        visibility: visible !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        padding: 10px 4px !important;
        line-height: 1.3 !important;
        height: auto !important;
        min-height: 32px !important;
        overflow: visible !important;
        box-shadow: none !important;
        border-bottom: 2px solid #cbd5e1 !important;
        white-space: normal !important;
        /* display???ш린??吏€?뺥븯吏€ ?딆쓬 - ???④? 洹쒖튃(.col-num ??display:none)????뼱?곗? ?딅룄濡?*/
    }

    .training-table-wrapper {
        overflow-x: auto !important;
        width: 100% !important;
    }


    .training-table-modern .col-category {
        width: 45px !important; /* Just enough for badge */
    }
    
    .training-table-modern .col-title {
        width: 35% !important; /* Reduced width */
        white-space: normal !important; /* Allow wrapping */
        font-size: 0.8rem !important; /* Smaller font size */
        line-height: 1.25;
    }

    .training-table-modern .col-target {
        width: 45px !important; /* Very narrow */
        text-align: center;
    }
    
    .training-table-modern .col-completers {
        width: auto !important; /* Expanded to fill remaining space */
    }

    /* Optimization for inner elements */
    .training-table-modern .badge {
        font-size: 0.7rem !important;
        padding: 2px 4px !important;
        display: inline-block;
        width: 100%; /* Fill cell */
        text-align: center;
        box-sizing: border-box;
    }

    .target-badge {
        font-size: 0.7rem !important;
        padding: 1px 3px !important;
        display: block; /* Stack badges if multiple */
        margin-bottom: 2px;
    }

    /* Adjust Status Button Text on Mobile */
    .btn-completer-status {
        padding: 4px 2px !important;
        font-size: 0.75rem !important;
        width: 100% !important;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2px;
    }
    
    /* Make the button content simpler */
    .btn-completer-status i {
        font-size: 0.7rem !important;
    }
    
    /* Hide specific text if needed or make it very small */
    /* Example: "?댁닔 ?꾨즺: 5紐? -> "5紐? or similar if super tight */
}

/* ================= Light Mode Section Backgrounds ================= */

/* Training Theme (Applied to Body for Full Coverage) */
body:not(.dark-mode).bg-theme-training {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    background-attachment: fixed !important; /* Ensure gradient covers scroll */
}

/* Admin Theme (Applied to Body for Full Coverage) */
body:not(.dark-mode).bg-theme-admin {
    background: linear-gradient(135deg, #fffdf9 0%, #f3e7e9 100%) !important;
    background-attachment: fixed !important;
}

/* Enhance Admin Container for Premium Feel */
body:not(.dark-mode) #admin-section .admin-container {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 20px !important;
}

/* ================= Training Section Dark Mode Refinement ================= */
body.dark-mode .training-table-wrapper {
    background: rgba(30, 41, 59, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
}

body.dark-mode .training-table-modern thead th {
    background-color: rgba(15, 23, 42, 0.8) !important;
    color: #f1f5f9 !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .training-table-modern tbody td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #f1f5f9 !important;
}

/* Fix row hover and selected background to match dark mode */
body.dark-mode .training-table-modern tbody tr:hover td,
body.dark-mode .training-table-modern tbody tr:hover {
    background-color: #1e293b !important;
}

/* Force high visibility for key columns */
body.dark-mode .training-table-modern .col-title,
body.dark-mode td.col-title,
body.dark-mode .training-table-modern tbody td.col-title,
body.dark-mode .training-table-modern tbody td.col-title div,
body.dark-mode td.col-title div {
    color: #ffffff !important;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

body.dark-mode .training-table-modern .col-num,
body.dark-mode .training-table-modern .col-manager,
body.dark-mode .training-table-modern .col-target,
body.dark-mode .training-table-modern .col-deadline {
    color: #ffffff !important;
    opacity: 1 !important;
}

body.dark-mode .note-input-modern {
    color: #f1f5f9;
}
body.dark-mode .note-input-modern:hover {
    background: rgba(255, 255, 255, 0.05);
}
body.dark-mode .note-input-modern:focus {
    background: rgba(30, 41, 59, 0.8);
    border-color: #4a90e2;
}

body.dark-mode .btn-completer-status {
    background: rgba(37, 99, 235, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(37, 99, 235, 0.3);
}
body.dark-mode .btn-completer-status:hover {
    background: rgba(37, 99, 235, 0.25);
    color: #93c5fd;
    border-color: rgba(37, 99, 235, 0.5);
}
body.dark-mode .btn-completer-status.empty {
    background: rgba(255, 255, 255, 0.02);
    color: #64748b;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}
body.dark-mode .btn-completer-status.empty:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    border-style: solid;
}

body.dark-mode .badge-essential {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
body.dark-mode .badge-optional {
    background-color: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}
body.dark-mode .target-badge {
    background-color: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

body.dark-mode .training-action-btns button {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}
body.dark-mode .training-action-btns .btn-edit:hover {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-color: #3b82f6;
}
body.dark-mode .training-action-btns .btn-delete {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}
body.dark-mode .training-action-btns .btn-delete:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border-color: #ef4444;
}

body.dark-mode .completer-tag-modern {
    background: rgba(79, 70, 229, 0.15);
    color: #a5b4fc;
    border: 1px solid rgba(79, 70, 229, 0.3);
}

body.dark-mode .completer-toggle-content {
    background: rgba(15, 23, 42, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ================= Multi-Select Dropdown Component ================= */
.multi-select-container {
  position: relative;
  width: 100%;
}

.multi-select-trigger {
  width: 100%;
  min-height: 45px;
  padding: 8px 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s;
  box-sizing: border-box;
}

body.dark-mode .multi-select-trigger {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}

/* Specific styling for Login/Register forms in index.html */
#login-container .multi-select-trigger {
  height: 38px;
  min-height: 38px;
  border-radius: 8px;
  font-size: 0.85rem;
  background: #f9fafb;
}

.multi-select-trigger:hover {
  border-color: #3b82f6;
}

.selected-items-text {
  font-size: 0.95rem;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

body.dark-mode .selected-items-text {
  color: #f1f5f9;
}

#login-container .selected-items-text {
  font-size: 0.85rem;
}

.multi-select-trigger i {
  color: #94a3b8;
  font-size: 0.8rem;
  transition: transform 0.2s;
}

.multi-select-container.active .multi-select-trigger i {
  transform: rotate(180deg);
}

.multi-select-popover {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  z-index: 11000;
  display: none;
  padding: 8px;
  box-sizing: border-box;
}

#login-container .multi-select-popover {
  max-height: 160px;
}

body.dark-mode .multi-select-popover {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.multi-select-container.active .multi-select-popover {
  display: block;
  animation: slideDownFade 0.2s ease-out;
}

.multi-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.multi-select-option:hover {
  background: #f1f5f9;
}

body.dark-mode .multi-select-option:hover {
  background: #334155;
}

.multi-select-option input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  cursor: pointer;
  margin: 0 !important;
  flex-shrink: 0;
}

.multi-select-option span {
  font-size: 0.9rem;
  color: #4b5563;
}

body.dark-mode .multi-select-option span {
  color: #cbd5e1;
}

#login-container .multi-select-option span {
  font-size: 0.85rem;
}

/* User Status Badges for ?대떦?낅Т */
.badge-work-tag {
  display: inline-block;
  padding: 2px 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #475569;
  margin: 1px;
}

body.dark-mode .badge-work-tag {
  background: #334155;
  border-color: #475569;
  color: #cbd5e1;
}

/* Adjust Admin Table Layout for extra column */
.admin-table th, .admin-table td {
  font-size: 0.85rem;
  padding: 10px 8px;
}

/* Animation */
@keyframes slideDownFade {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ================= Multi-Select Mini Variation & Doc Bulk Row ================= */
.curr-doc-bulk-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  margin-bottom: 12px;
  position: relative;
}

body.dark-mode .curr-doc-bulk-row {
  background: rgba(30, 41, 59, 0.4);
  border-color: rgba(255, 255, 255, 0.1);
}

.doc-bulk-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}

.mini-multi-select .multi-select-trigger {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  font-size: 0.85rem !important;
  border-radius: 8px !important;
}

.mini-multi-select .selected-items-text {
  font-size: 0.8rem !important;
}

.mini-multi-select .multi-select-popover {
  max-height: 220px !important;
  width: 180px !important;
  z-index: 10001 !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
}

/* Ensure popover is not clipped by modal boundaries */
#currModal .modal-content {
  overflow: visible !important;
}

#currModal .modal-body {
  overflow-y: auto !important;
  max-height: 75vh;
  padding-bottom: 220px !important; /* ?쒕∼?ㅼ슫 硫붾돱媛€ ?꾨옒?먯꽌 ?섎━吏€ ?딅룄濡??ъ쑀 怨듦컙 ?뺣낫 */
}

/* Multi-select manual input row in mini version */
.doc-incharge-col .multi-select-popover {
  padding: 6px !important;
}


.doc-incharge-col .multi-select-option {
  padding: 6px 10px !important;
  font-size: 0.8rem !important;
  gap: 8px !important;
}

.doc-bulk-incharge-manual {
  height: 30px !important;
  padding: 0 8px !important;
  font-size: 0.8rem !important;
  border-radius: 6px !important;
  border: 1px dashed #cbd5e1 !important;
  background: #fff !important;
}

body.dark-mode .doc-bulk-incharge-manual {
  background: rgba(15, 23, 42, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #f1f5f9 !important;
}

.curr-manual-input-row.hidden {
  display: none !important;
}

/* ================= Doc Bulk Inline Styling ================= */
.inline-color-picker {
    display: flex;
    gap: 12px;
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

body.dark-mode .inline-color-picker {
    background: rgba(15, 23, 42, 0.4);
    border-color: rgba(255, 255, 255, 0.05);
}

.color-picker-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

.color-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
}

.color-trigger {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid white;
    box-shadow: 0 0 0 1px #e2e8f0;
    cursor: pointer;
    transition: transform 0.2s;
}

.color-trigger:hover {
    transform: scale(1.1);
}

.color-popover {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 10005;
    display: none;
    width: 150px;
}

.color-popover.active {
    display: block;
    animation: slideUpFade 0.2s ease-out;
}

body.dark-mode .color-popover {
    background: #1e293b;
    border: 1px solid #334155;
}

.mini-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.mini-color-opt {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.1);
    transition: transform 0.1s;
}

.mini-color-opt:hover {
    transform: scale(1.1);
}

.doc-row-remove-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #fee2e2;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 4px;
    flex-shrink: 0;
}

.doc-row-remove-btn:hover {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
    transform: rotate(90deg);
}

body.dark-mode .doc-row-remove-btn {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}


/* ================= Curriculum Form Specifics ================= */
.curr-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.curr-form-group label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
}

body.dark-mode .curr-form-group label {
    color: #94a3b8;
}

.curr-input {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    background: #ffffff;
    transition: all 0.2s;
    box-sizing: border-box;
}

body.dark-mode .curr-input {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.curr-input:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.btn-doc-bulk-add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
    border: 1px dashed rgba(59, 130, 246, 0.3);
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 10px;
    width: fit-content;
}

.btn-doc-bulk-add:hover {
    background: rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

body.dark-mode .btn-doc-bulk-add {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.4);
    color: #60a5fa;
}



/* ================= Profile & Admin Settings Improvements ================= */
.auth-disabled-input {
    background: #f1f5f9;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    width: 100%;
}

body.dark-mode .auth-disabled-input {
    background: rgba(15, 23, 42, 0.4) !important;
    color: #64748b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.profile-settings-box {
    background: #f8fafc;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-top: 8px;
}

body.dark-mode .profile-settings-box {
    background: rgba(30, 41, 59, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .profile-settings-box p {
    color: #94a3b8 !important;
}

.profile-reset-btn {
    width: 100%;
    padding: 10px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.profile-reset-btn i {
    font-size: 1rem;
    color: #64748b;
}

body.dark-mode .profile-reset-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

body.dark-mode .profile-reset-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .profile-reset-btn i {
    color: #94a3b8;
}

.admin-edit-divider {
    margin: 20px 0;
    border-top: 1px solid #e2e8f0;
}

body.dark-mode .admin-edit-divider {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Segmented Control Dark Mode Fixes */
body.dark-mode .segmented-control-container {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .segment-btn-custom {
    color: #94a3b8;
}

body.dark-mode .segment-btn-custom:hover {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .segment-btn-custom.active {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
    box-shadow: none !important;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

body.dark-mode .modal-header h2 {
    color: #f1f5f9;
}

body.dark-mode .modal-body label {
    color: #94a3b8;
}

/* ?ㅻ쾭?덉씠 愿€由??뚯씠釉?留곹겕 - ?쇱씠???ㅽ겕 紐⑤뱶 ?€??*/
.overlay-admin-link {
    color: #3b82f6;
    text-decoration: none;
    font-size: 0.82rem;
    transition: color 0.2s;
}
.overlay-admin-link:hover {
    text-decoration: underline;
}
body.dark-mode .overlay-admin-link {
    color: #93c5fd; /* ?덈Т 諛앹? ?딆? ?낆? ?섎뒛??- ?ㅽ겕 諛곌꼍?먯꽌 ?앸퀎 媛€??*/
}
body.dark-mode .overlay-admin-link:hover {
    color: #bfdbfe;
}

/* ================= Floating Overlay Sidebar ================= */
.overlay-sidebar {
    position: fixed;
    top: 76px; /* Positioned right below the header area, near the logout button */
    right: 0;
    z-index: 9500; /* Set below modal (9999) and iframe overlay (99000) */
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: none;
    border-top-left-radius: 22px;
    border-bottom-left-radius: 22px;
    padding: 18px 12px;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.dark-mode .overlay-sidebar {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
}

.overlay-sidebar.collapsed {
    transform: translateX(100%);
}

.overlay-sidebar-toggle {
    position: absolute;
    left: -22px;
    top: 14px; /* Move toggle button near the top of the sidebar */
    width: 22px;
    height: 40px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px 0 0 8px;
    border-right: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.05);
    color: #475569;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 10;
}

body.dark-mode .overlay-sidebar-toggle {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

.overlay-sidebar-toggle:hover {
    background: rgba(255, 255, 255, 1);
    width: 26px;
    left: -26px;
}

body.dark-mode .overlay-sidebar-toggle:hover {
    background: rgba(30, 41, 59, 0.9);
}

.overlay-sidebar.collapsed .overlay-sidebar-toggle i {
    transform: rotate(180deg);
}

.overlay-sidebar-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none; /* Let container pass unused clicks */
}

.floating-overlay-btn {
    pointer-events: auto; /* Re-enable clicks for the button */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 19px;
    background: #10b981; /* Default green */
    color: white;
    border: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 0;
}

.floating-overlay-btn i {
    font-size: 1.1rem;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

.floating-overlay-btn span {
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.9rem;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.4s ease, opacity 0.3s ease 0.1s, padding 0.4s ease;
}

.floating-overlay-btn:hover {
    width: auto;
    border-radius: 19px;
    padding-right: 18px;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.floating-overlay-btn:hover i {
    transform: rotate(360deg);
}

.floating-overlay-btn:hover span {
    max-width: 200px;
    opacity: 1;
    padding-left: 5px;
}

.floating-overlay-btn.active-mode {
    transform: scale(1.05);
    box-shadow: 0 0 15px currentColor;
    outline: 2px solid white;
    outline-offset: 2px;
}

.floating-overlay-btn.inactive-mode {
    filter: grayscale(100%);
    opacity: 0.4;
}

.floating-overlay-btn.inactive-mode:hover {
    filter: grayscale(50%);
    opacity: 0.8;
}

/* Floating Overlay Button Color Themes */
.floating-overlay-btn.color-blue { background: #3b82f6; }
.floating-overlay-btn.color-blue:hover { background: #2563eb; }

.floating-overlay-btn.color-green { background: #10b981; }
.floating-overlay-btn.color-green:hover { background: #059669; }

.floating-overlay-btn.color-purple { background: #8b5cf6; }
.floating-overlay-btn.color-purple:hover { background: #7c3aed; }

.floating-overlay-btn.color-red { background: #ef4444; }
.floating-overlay-btn.color-red:hover { background: #dc2626; }

.floating-overlay-btn.color-yellow { background: #eab308; color: #1e293b; }
.floating-overlay-btn.color-yellow:hover { background: #ca8a04; }

.floating-overlay-btn.color-gray { background: #64748b; }
.floating-overlay-btn.color-gray:hover { background: #475569; }


/* ================= Full Screen Iframe Overlay ================= */
.main-iframe-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 99000;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.main-iframe-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: -1;
}

.main-iframe-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.iframe-panel {
    position: absolute;
    left: 0;
    bottom: -100%;
    width: 100%;
    height: 100vh; /* 釉뚮씪?곗? 理쒖긽?④퉴吏€ 苑?李④쾶 蹂€寃?*/
    background: #ffffff;
    border-radius: 0; /* 苑?李⑤?濡??κ렐 紐⑥꽌由??쒓굅 */
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.15);
    transition: bottom 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    display: flex;
    flex-direction: column;
}

body.dark-mode .iframe-panel {
    background: #0f172a;
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.5);
}

.main-iframe-overlay.active .iframe-panel {
    bottom: 0;
}

.iframe-panel iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
}

/* Iframe Overlay Controls */
.iframe-controls {
    position: absolute;
    top: 20px;
    right: 32px;
    display: flex;
    gap: 12px;
    z-index: 3001;
}

.iframe-action-btn {
    height: 48px;
    padding: 0 20px;
    background: rgba(15, 23, 42, 0.7);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.iframe-action-btn i {
    font-size: 1.1rem;
}

.iframe-action-btn.close-btn {
    width: 48px;
    padding: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.7);
}


.iframe-action-btn.close-btn:hover {
    background: #ef4444;
    border-color: #ef4444;
    transform: translateY(-2px) rotate(90deg);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

body.dark-mode .iframe-action-btn {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .iframe-action-btn.close-btn:hover {
    background: #dc2626;
}




/* ================= Intermediate & Low-Res Desktop Fix (769px ~ 1450px) ================= */
@media (min-width: 769px) and (max-width: 1450px) {
    /* 1. Expand Header to Accommodate Stacked Elements */
    .header-container {
        min-height: 120px !important;
        height: auto !important;
        align-items: flex-end !important; /* Push nav to bottom */
        padding-bottom: 15px !important;
        padding-top: 0 !important;
    }

    .header-inner {
        max-width: 100% !important;
        height: auto !important;
        padding-top: 60px !important; /* Space for absolute floating clock/user-panel */
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        justify-content: center !important;
    }

    #category-nav {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px 6px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .nav-item {
        white-space: nowrap !important;
    }

    /* 2. Clock Widget Placement */
    .clock-widget-container {
        left: 20px !important;
        top: 15px !important;
        transform: scale(0.9) !important;
        transform-origin: top left !important;
        z-index: 6000 !important;
    }

    /* 3. User Panel Placement */
    .header-user-panel {
        top: 25px !important;
        right: 20px !important;
        flex-direction: row !important;
        transform: none !important;
        align-items: center !important;
    }

    /* 4. Section & Margin Reset */
    #curriculum-section, 
    #status-section, 
    #account-section, 
    #bus-section,
    #datayard-section,
    #helppage-section,
    .admin-container {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 95% !important;
        max-width: 1100px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transform: none !important;
    }

    .intro-landing-container {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 95% !important;
        max-width: 1100px !important;
        margin-top: 1.5rem !important;
    }

    /* Table Horizontal Scroll */
    .account-table-wrapper, .bus-table-wrapper, .editable-table-wrapper {
        overflow-x: auto !important;
    }
}




/* Helppage (Support) Theme Overrides */
body.bg-theme-support {
    background: #f7faf9 !important;
}
body.dark-mode.bg-theme-support {
    background: #18181b !important;
}
body.dark-mode #helppage-bg-elements .bg-nature-wrap {
    opacity: 0.1 !important;
    filter: invert(1) hue-rotate(180deg);
}


        /* Noto Sans KR 폰트를 기본 폰트로 설정 */
        

        /* 배경 래퍼 */
        .bg-nature-wrap {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
            background: linear-gradient(180deg, #eaf5f0 0%, #f2f8f5 15%, #f7faf9 40%, #f4f9f6 70%, #eef6f1 100%);
        }
        .bg-nature-wrap > div, .bg-nature-wrap > svg {
            position: absolute;
        }
        /* 왼쪽 상단 산 장식 */
        .bg-mountain-left {
            top: 0; left: 0;
            width: 350px; height: 300px;
        }
        /* 오른쪽 상단 산 장식 */
        .bg-mountain-right {
            top: 0; right: 0;
            width: 300px; height: 280px;
        }
        /* 왼쪽 하단 장식 */
        .bg-bottom-left {
            bottom: 0; left: 0;
            width: 400px; height: 300px;
        }
        /* 오른쪽 하단 장식 */
        .bg-bottom-right {
            bottom: 0; right: 0;
            width: 380px; height: 280px;
        }
        /* 중간 좌측 장식 */
        .bg-mid-left {
            top: 40%; left: 0;
            width: 200px; height: 250px;
            transform: translateY(-50%);
        }
        /* 중간 우측 장식 */
        .bg-mid-right {
            top: 45%; right: 0;
            width: 180px; height: 220px;
            transform: translateY(-50%);
        }
        /* 학교 일러스트 */
        .school-illustration {
            position: absolute;
            top: 40px;
            right: 80px;
            width: 140px;
            height: 140px;
            z-index: 1;
            pointer-events: none;
        }
        @media (max-width: 768px) {
            .school-illustration {
                width: 90px; height: 90px;
                top: 20px; right: 20px;
            }
            .bg-mountain-left { width: 200px; height: 180px; }
            .bg-mountain-right { width: 180px; height: 160px; }
            .bg-bottom-left { width: 250px; height: 200px; }
            .bg-bottom-right { width: 230px; height: 180px; }
            .bg-mid-left { width: 120px; height: 160px; }
            .bg-mid-right { width: 110px; height: 140px; }
        }
        /* 카드 등장 애니메이션 */
        @keyframes cardEntrance {
            0% {
                opacity: 0;
                transform: translateY(30px) scale(0.95);
            }
            60% {
                opacity: 1;
                transform: translateY(-6px) scale(1.02);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        .card-entrance {
            opacity: 0;
            animation: cardEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }

        /* 스프링 바운스 슬라이드 애니메이션 */
        .slide-content {
            display: grid;
            grid-template-rows: 0fr;
            opacity: 0;
            transform: translateY(-8px);
            transition: grid-template-rows 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                        opacity 0.3s ease,
                        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .slide-content > * {
            overflow: hidden;
        }
        .slide-content.open {
            grid-template-rows: 1fr;
            opacity: 1;
            transform: translateY(0);
            transition: grid-template-rows 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                        opacity 0.4s ease 0.05s,
                        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
    

/* Restored Section Layouts */
#helppage-section,
#datayard-section {
  padding: calc(2rem - 20px) 5% 4rem;
  max-width: 1300px;
  margin: 0 auto 4rem 350px !important; max-width: 1300px !important; padding-left: 5% !important;
}

/* Restored Helppage & Datayard Styles */
/* Helppage Section (??????e???????????????? - ????????????????????????????????????????袁⑸즴筌?씛彛???돗??????????????癲ル슢二??곸젞???????????????????????됰Ŧ?????????????????????대첐??????????????????????????????????????????????????????????????*/
#helppage-section,
#datayard-section {
  padding: calc(2rem - 20px) 5% 4rem;
  max-width: 1300px;
  margin: 0 auto 4rem 350px !important; max-width: 1300px !important; padding-left: 5% !important; /* Increased left margin from 260px to 350px for balance */
}

.helppage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  align-items: start;
}

.helppage-main-card {
  background: #fff;
  border-radius: 1.5rem;
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.helppage-main-toggle {
  width: 100%;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.helppage-main-toggle .header-info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.icon-box {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

/* ================= Helppage Header ================= */
.helppage-header {
  text-align: center;
  margin-bottom: 1.8rem; /* Reduced from 3.5rem */
  padding-top: 1rem;
}

.helppage-header h2 {
  font-size: 2.25rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 0.4rem; /* Reduced from 0.75rem */
  letter-spacing: -0.025em;
  font-family: "Outfit", sans-serif;
}

.helppage-header p {
  font-size: 1.1rem;
  color: #64748b;
  font-weight: 500;
  margin: 0;
}

.helppage-footer {
  margin-top: 4rem;
  padding: 2rem 0;
  text-align: center;
  border-top: 1px solid #e2e8f0;
}

.helppage-footer p {
  font-size: 0.9rem;
  color: #94a3b8;
}

.helppage-footer a {
  color: #3b82f6;
  text-decoration: none;
  transition: color 0.2s;
}

.helppage-footer a:hover {
  color: #2563eb;
  text-decoration: underline;
}

.title-group h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.title-group p {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0.2rem 0 0;
}

.main-chevron {
  font-size: 1.25rem;
  color: #94a3b8;
  transition: transform 0.3s ease;
}

/* ????????????????????????????????????ㅻ깹?????????????????????????????????????????????????????????????????????????????????????*/
.blue-bg {
  background-color: #dbeafe;
}
.blue-text {
  color: #2563eb;
}
.blue-600-text {
  color: #2563eb;
}
.blue-100-bg {
  background-color: #dbeafe;
}
.green-bg {
  background-color: #dcfce7;
}
.green-text {
  color: #16a34a;
}
.green-600-text {
  color: #16a34a;
}
.green-100-bg {
  background-color: #dcfce7;
}
.purple-bg {
  background-color: #f3e8ff;
}
.purple-text {
  color: #9333ea;
}
.purple-600-text {
  color: #9333ea;
}
.purple-100-bg {
  background-color: #f3e8ff;
}
.orange-bg {
  background-color: #ffedd5;
}
.orange-text {
  color: #ea580c;
}
.orange-600-text {
  color: #ea580c;
}
.orange-100-bg {
  background-color: #ffedd5;
}
.amber-bg {
  background-color: #fef3c7;
}
.amber-text {
  color: #d97706;
}
.amber-600-text {
  color: #d97706;
}
.amber-100-bg {
  background-color: #fef3c7;
}
.red-bg {
  background-color: #fee2e2;
}
.red-text {
  color: #dc2626;
}
.red-600-text {
  color: #dc2626;
}
.red-100-bg {
  background-color: #fee2e2;
}
.sky-bg {
  background-color: #e0f2fe;
}
.sky-text {
  color: #0369a1;
}
.sky-600-text {
  color: #0369a1;
}
.sky-100-bg {
  background-color: #e0f2fe;
}
.emerald-bg {
  background-color: #d1fae5;
}
.emerald-text {
  color: #059669;
}
.emerald-600-text {
  color: #059669;
}
.emerald-100-bg {
  background-color: #d1fae5;
}
.teal-bg {
  background-color: #ccfbf1;
}
.teal-text {
  color: #0d9488;
}
.teal-600-text {
  color: #0d9488;
}
.teal-100-bg {
  background-color: #ccfbf1;
}
.amber-bg {
  background-color: #fef3c7;
}
.amber-text {
  color: #d97706;
}
.amber-600-text {
  color: #d97706;
}
.amber-100-bg {
  background-color: #fef3c7;
}
.violet-bg {
  background-color: #ede9fe;
}
.violet-text {
  color: #7c3aed;
}
.violet-600-text {
  color: #7c3aed;
}
.violet-100-bg {
  background-color: #ede9fe;
}
.pink-bg {
  background-color: #fce7f3;
}
.pink-text {
  color: #db2777;
}
.pink-600-text {
  color: #db2777;
}
.pink-100-bg {
  background-color: #fce7f3;
}
.indigo-bg {
  background-color: #e0e7ff;
}
.indigo-text {
  color: #4f46e5;
}
.indigo-600-text {
  color: #4f46e5;
}
.indigo-100-bg {
  background-color: #e0e7ff;
}
.rose-bg {
  background-color: #ffe4e6;
}
.rose-text {
  color: #e11d48;
}
.rose-600-text {
  color: #e11d48;
}
.rose-100-bg {
  background-color: #ffe4e6;
}
.fuchsia-bg {
  background-color: #fae8ff;
}
.fuchsia-text {
  color: #c026d3;
}
.fuchsia-600-text {
  color: #c026d3;
}
.fuchsia-100-bg {
  background-color: #fae8ff;
}
.cyan-bg {
  background-color: #ecfeff;
}
.cyan-text {
  color: #0891b2;
}
.cyan-600-text {
  color: #0891b2;
}
.cyan-100-bg {
  background-color: #ecfeff;
}
.lime-bg {
  background-color: #f7fee7;
}
.lime-text {
  color: #65a30d;
}
.lime-600-text {
  color: #65a30d;
}
.lime-100-bg {
  background-color: #f7fee7;
}

.hidden-content {
  border-top: 1px solid #f1f5f9;
  background-color: #f8fafc;
}

.search-wrapper {
  padding: 1.5rem 2rem 0.5rem;
}

.relative-search {
  position: relative;
  width: 100%;
}

.category-search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  outline: none;
  transition: all 0.2s;
}

.category-search-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.875rem;
}

.sub-sections-container {
  padding: 1rem 2rem 2rem;
}

.sub-section-item {
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.sub-section-item:last-child {
  border-bottom: none;
}

.sub-section-toggle {
  width: 100%;
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
}

.sub-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sub-header-left span {
  font-weight: 600;
  color: #334155;
}

.sub-icon-box {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sub-chevron {
  color: #94a3b8;
  font-size: 0.875rem;
  transition: transform 0.3s ease;
}

.sub-items-list {
  padding: 0.5rem 0 1rem 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border-radius: 0.75rem;
  text-decoration: none;
  color: #475569;
  font-size: 0.875rem;
  border: 1px solid #f1f5f9;
  transition: all 0.2s;
}

.file-item:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
  transform: translateX(4px);
  color: #1e293b;
}

.file-item .link-icon {
  margin-left: auto;
  font-size: 0.75rem;
  color: #cbd5e1;
}

.no-results {
  padding: 2rem;
  text-align: center;
  color: #94a3b8;
  font-size: 0.875rem;
}

/* Fix overlaps for desktop and reset for mobile */
@media (min-width: 769px) {
    #datayard-section,
    #helppage-section {
        margin-left: 360px !important;
        max-width: calc(100% - 380px) !important;
        padding-left: 0 !important;
    }
}
@media (max-width: 768px) {
    #datayard-section,
    #helppage-section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 5% !important;
        padding-right: 5% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}