:root{
  --topbar-h: 56px;
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;
  --panel: #e6f5f2; /* [THEME-20260127-002] 파스텔 민트 */
  --panel-text:#134e4a;
  --bg: #f5fbfa;
  --line:#d7ebe6;
}
/* [THEME-20260127-003] 라이트(그레이) 테마 */
html[data-theme="light"]{
  --panel: #f3f6fb;
  --panel-text:#1f2937;
  --bg: #f7f8fb;
  --line:#e5e7eb;
}
/* [THEME-20260224-005] 밝은 살구 테마 */
html[data-theme="apricot"]{
  --panel: #fff2e8;
  --panel-text:#7a3b16;
  --bg: #fff8f3;
  --line:#ffd9c4;
}
/* [THEME-20260224-006] 핑크 테마 */
html[data-theme="pink"]{
  --panel: #ffeaf2;
  --panel-text:#7a2348;
  --bg: #fff6fa;
  --line:#ffc8dc;
}
/* [THEME-20260224-007] 보라 테마 */
html[data-theme="violet"]{
  --panel: #f2ecff;
  --panel-text:#4b2b7d;
  --bg: #f8f5ff;
  --line:#dbcfff;
}
/* [THEME-20260224-008] 그린 테마 */
html[data-theme="green"]{
  --panel: #e9f7ee;
  --panel-text:#1f5d35;
  --bg: #f4fbf6;
  --line:#cde8d5;
}
html,body{height:100%;}
body{margin:0;background:var(--bg);font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;color:#111827;}
a{color:inherit;text-decoration:none}

.app{
  min-height:100vh;
  display:grid;
  grid-template-rows: 1fr; /* [LAYOUT-TOPBAR-20260116-001] */
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-areas:
    "sidebar content";
  padding-top: var(--topbar-h); /* [LAYOUT-TOPBAR-20260116-001] */
}

/* ===== Topbar 기본 ===== */
.topbar{
  grid-area: auto; /* [LAYOUT-TOPBAR-20260116-002] */
  height: var(--topbar-h);
  min-height: var(--topbar-h); /* [LAYOUT-TOPBAR-20260116-006] */
  box-sizing: border-box; /* [LAYOUT-TOPBAR-20260116-007] */
  display:flex; align-items:center; justify-content:space-between;
  padding: 8px 12px;
  background:#e8f6f4; color:#0f3d37; /* [THEME-20260127-002] 파스텔 민트 */
  position:fixed; top:0; left:0; right:0; z-index:90; /* [LAYOUT-TOPBAR-20260116-002] */
  font-size:14px; line-height:1; /* [LAYOUT-TOPBAR-20260116-006] */
}
html[data-theme="light"] .topbar{ background:#eef2f7; color:#111827; } /* [THEME-20260127-004] */
html[data-theme="apricot"] .topbar{ background:#ffe7d6; color:#7a3b16; } /* [THEME-20260224-009] */
html[data-theme="pink"] .topbar{ background:#ffddea; color:#7a2348; } /* [THEME-20260224-010] */
html[data-theme="violet"] .topbar{ background:#e7ddff; color:#4b2b7d; } /* [THEME-20260224-011] */
html[data-theme="green"] .topbar{ background:#dff3e6; color:#1f5d35; } /* [THEME-20260224-012] */
.topbar *{ box-sizing:border-box; } /* [LAYOUT-TOPBAR-20260116-007] */
.topbar-left{display:flex; align-items:center; gap:10px;}
.brand-link{display:flex; align-items:center; gap:8px; color:#0f3d37; text-decoration:none;}
html[data-theme="light"] .brand-link{ color:#111827; } /* [THEME-20260127-004] */
html[data-theme="apricot"] .brand-link{ color:#7a3b16; } /* [THEME-20260224-013] */
html[data-theme="pink"] .brand-link{ color:#7a2348; } /* [THEME-20260224-014] */
html[data-theme="violet"] .brand-link{ color:#4b2b7d; } /* [THEME-20260224-015] */
html[data-theme="green"] .brand-link{ color:#1f5d35; } /* [THEME-20260224-016] */
.school-logo{height:30px; width:auto; max-width:none; flex:0 0 auto;}
.icon-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;background:#fff;color:#111;}

/* Sidebar */
.sidebar{
  grid-area: sidebar;
  background: var(--panel);
  color: var(--panel-text);
  height: calc(100vh - var(--topbar-h));
  position: fixed; top: var(--topbar-h); /* [LAYOUT-TOPBAR-20260116-003] */
  overflow:auto;
  transition: width .2s ease, transform .2s ease;
  width: var(--sidebar-w);
}
.sidebar-collapse{
  position:absolute; right:10px; top:10px;
  height:30px; padding:0 10px;
  border:1px solid #cfe6df;
  border-radius:8px;
  background:transparent;
  color:var(--panel-text);
  display:flex; align-items:center; gap:6px;
  cursor:pointer;
}
.sidebar-collapse .collapse-icon{
  display:inline-block; width:14px; height:14px; position:relative;
}
.sidebar-collapse .collapse-icon::before{
  content:'';
  position:absolute; inset:0;
  border-right:2px solid var(--panel-text);
  border-bottom:2px solid var(--panel-text);
  transform: rotate(135deg);
}
html.sidebar-collapsed .sidebar-collapse .collapse-icon::before{
  transform: rotate(-45deg);
}

.side-list{ list-style:none; margin:56px 0 0; padding:8px 10px 16px; }
.side-item{ margin:6px 0; }
.side-link{ display:block; padding:10px 12px; border-radius:8px; color:var(--panel-text); }
.side-link:hover{ background:rgba(15,61,55,.06); }
.side-link.side-top{ font-weight:700; }

/* [SIDEBAR-20260127-001] 아코디언 메뉴 */
.side-group{ margin:6px 0; }
.side-group-toggle{
  width:100%;
  text-align:left;
  background:transparent;
  color:var(--panel-text);
  border:0;
  padding:10px 12px;
  border-radius:8px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}
.side-group-toggle::after{
  content:'▾';
  font-size:12px;
  opacity:.8;
}
.side-group.is-open .side-group-toggle::after{ content:'▴'; }
.side-group-toggle:hover{ background:rgba(15,61,55,.06); }
.side-sub{
  list-style:none;
  margin:4px 0 6px;
  padding:6px 6px 6px 12px;
  display:none;
  background: rgba(15,61,55,.05); /* [THEME-20260127-002] 하위 배경 파스텔 */
  border-radius:10px;
}
.side-group.is-open .side-sub{ display:block; }
.side-sub a{
  display:block;
  padding:8px 10px;
  border-radius:8px;
  color:var(--panel-text);
  font-size:13px;
}
.side-sub a:hover{ background:rgba(255,255,255,.08); }

/* Content */
.content{ grid-area: content; padding:16px; } /* [LAYOUT-TOPBAR-20260116-004] */

/* [SEL-APPLY-20260304-202] 선택과목 신청 공개 페이지: 상단/사이드/탭바 숨김 */
body.public-plain-layout .topbar,
body.public-plain-layout .sidebar,
body.public-plain-layout .page-tabs{
  display:none !important;
}
body.public-plain-layout .app{
  grid-template-columns: 1fr !important;
  grid-template-areas: "content" !important;
  padding-top: 0;
}
html.sidebar-collapsed body.public-plain-layout .app{
  grid-template-columns: 1fr !important;
  grid-template-areas: "content" !important;
} /* [SEL-APPLY-20260304-203] 사이드바 접힘 상태 우선순위 충돌 방지 */
body.public-plain-layout .content{
  padding: 20px 24px;
  width: 100%;
  max-width: 100%;
}

/* [LAYOUT-PAGEW-20260116-003] 전역 폭 강제 해제(페이지별 기본 폭 유지) */

/* [LAYOUT-TABS-20260116-003] 최근 열린 페이지 탭 바 */
.page-tabs{
  --page-tab-text-width: 6.4em; /* [LAYOUT-TABS-20260223-110] 8글자 기준 대비 20% 축소 */
  --page-tab-close-size: 18px;
  --page-tab-chrome-size: 18px;
  background:#eef2f7;
  border:1px solid #dde3ee;
  border-radius:12px;
  padding:8px 10px;
  margin:20px 0 14px; /* [LAYOUT-TABS-20260116-009] */
  font-family: "Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* [LAYOUT-TABS-20260116-007] */
}
.page-tabs.is-hidden-by-pref{ display:none; } /* [UI-TABS-20260219-011] 개인설정 숨김 상태 */
.page-tabs.is-empty{ display:none; }
.page-tabs-inner{
  display:flex;
  align-items:center;
  gap:8px;
  overflow:auto;
}
.page-tabs-list{
  display:flex;
  align-items:center;
  gap:8px;
}
.page-tab{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  width: calc(var(--page-tab-text-width) + var(--page-tab-close-size) + var(--page-tab-chrome-size));
  flex:0 0 auto;
  background:#f8fafc;
  border:1px solid #cbd5e1;
  border-radius:6px; /* [LAYOUT-TABS-20260116-006] 네모형 탭 */
  padding:4px 6px; /* [LAYOUT-TABS-20260223-109] 8글자 기준 탭 폭 고정 */
  white-space:nowrap;
}
.page-tab.is-active{
  border-color:#0b1220;
  background:#fff;
}
.page-tab-link{
  display:block;
  width:var(--page-tab-text-width);
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px; /* [LAYOUT-TABS-20260116-011] */
  line-height:1.2; /* [LAYOUT-TABS-20260116-011] */
  font-family: "Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* [LAYOUT-TABS-20260116-008] */
}
.page-tab-close{
  flex:0 0 auto;
  width:var(--page-tab-close-size);
  height:var(--page-tab-close-size);
  border:1px solid #cbd5e1;
  background:#fff;
  border-radius:4px;
  line-height:16px;
  font-size:13px;
  cursor:pointer;
}
.page-tab-close:hover{ background:#e2e8f0; }
.page-tabs-hide{
  margin-left:auto;
  height:24px;
  padding:0 8px;
  border:1px solid #cbd5e1;
  border-radius:6px;
  background:#fff;
  font-size:12px;
  line-height:22px;
  cursor:pointer;
} /* [UI-TABS-20260219-012] 탭 바 숨김 버튼 스타일 */
.page-tabs-hide:hover{ background:#e2e8f0; }

/* Desktop collapsed */
html.sidebar-collapsed .app{
  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}
html.sidebar-collapsed .sidebar{
  width: var(--sidebar-w-collapsed);
}
html.sidebar-collapsed .side-link{
  text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
}
html.sidebar-collapsed .side-list,
html.sidebar-collapsed .side-group,
html.sidebar-collapsed .side-item{
  display:none; /* [SIDEBAR-20260127-006] 접힘 상태 메뉴 숨김 */
}
html.sidebar-collapsed .sidebar-collapse{
  justify-content:center;
}
html.sidebar-collapsed .sidebar-collapse .collapse-text{
  display:none;
}

/* Mobile off-canvas */
@media (max-width:1024px){
  .app{
    grid-template-columns: 1fr;
    grid-template-areas:
      "content"; /* [LAYOUT-TOPBAR-20260116-005] */
  }
  .sidebar{
    position: fixed;
    left:0; top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    transform: translateX(-100%);
    z-index: 50;
  }
  html.is-sidebar-open .sidebar{ transform: translateX(0); }
  html.is-sidebar-open::after{
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:40;
  }
}


/* ===== 상단 대메뉴 ===== */
.mainnav{ margin-left: 16px; }
.mainnav-list{
  display:flex; align-items:center; gap:14px;
  list-style:none; margin:0; padding:0;
}
.menu-item{ position:relative; }
.nav-link{
  display:inline-block; padding:8px 10px; color:#0f3d37; text-decoration:none; border-radius:8px;
  line-height:1; /* [LAYOUT-TOPBAR-20260116-006] */
}
.nav-link:hover{ background:rgba(15,61,55,.06); }
html[data-theme="light"] .nav-link{ color:#111827; } /* [THEME-20260127-004] */
html[data-theme="light"] .nav-link:hover{ background:rgba(15,23,42,.06); } /* [THEME-20260127-004] */

/* 드롭다운 */
.submenu{
  display:none;
  position:absolute;
  left:0;
  top: calc(100% + 8px);  /* ← margin 대신 top으로 여백 */
  margin:0;               /* ← gap 제거 (중요) */
  padding:6px;
  min-width:160px;
  background:#ffffff;
  color:#0f3d37;
  border:1px solid #d7ebe6;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.24);
  z-index: 80;
}
.submenu > li > a{
  display:block; padding:8px 10px; border-radius:8px; color:#0f3d37; text-decoration:none;
}
.submenu > li > a:hover{ background:rgba(15,61,55,.06); }
html[data-theme="light"] .submenu{ color:#111827; border-color:#e5e7eb; } /* [THEME-20260127-004] */
html[data-theme="light"] .submenu > li > a{ color:#111827; }
html[data-theme="light"] .submenu > li > a:hover{ background:rgba(15,23,42,.06); }

/* 2) '부모 hover'뿐 아니라 '서브메뉴 hover'와 '포커스'에도 열려 있게 */
.menu-item.has-sub:hover > .submenu,
.menu-item.has-sub:focus-within > .submenu,
.menu-item.has-sub > .submenu:hover {
  display:block;
}
/* 3) hover-bridge: 부모 아래 투명 다리(커서가 지나갈 때 hover 안 끊기게) */
.menu-item.has-sub::after{
  content:"";
  position:absolute;
  left:0; right:0; top:100%;
  height:12px;              /* 다리 두께. 필요시 8~12px 조절 */
}

/* 4) 혹시 상단바가 overflow를 잘라버리면 펼침이 잘릴 수 있으니 보정 */
.topbar{ overflow: visible; }

/* 우측 사용자 */
.userbox{ display:flex; align-items:center; gap:10px; color:#0f3d37; }
html[data-theme="light"] .userbox{ color:#111827; } /* [THEME-20260127-004] */
.user-name{ font-weight:600; }
.user-email{ opacity:.8; font-size:12px; }

/* [LAYOUT-TOPBAR-20260116-006] 페이지별 .btn 영향 차단 */
.topbar .btn,
.topbar .btn-ghost{
  height:32px;
  padding:6px 12px;
  border-radius:8px;
  border:1px solid #cfe6df;
  background:#ffffff;
  color:#0f3d37;
}
.topbar .btn:hover,
.topbar .btn-ghost:hover{
  background:#e6f5f2;
}
html[data-theme="light"] .topbar .btn,
html[data-theme="light"] .topbar .btn-ghost{
  border-color:#d6dde8;
  color:#111827;
}
html[data-theme="light"] .topbar .btn:hover,
html[data-theme="light"] .topbar .btn-ghost:hover{
  background:#f3f6fb;
}

/* 모바일: 대메뉴는 자동 줄바꿈/스크롤 */
@media (max-width: 1024px){
  .mainnav{ overflow-x:auto; max-width: 50vw; }
  .mainnav-list{ gap:8px; }
  .submenu{ position:fixed; left:12px; right:12px; top: calc(var(--topbar-h) - 2px); }
}

/* 모바일 탭-열림 상태 */
.menu-item.has-sub.open > .submenu{ display:block; }