/* =========================================
   1. 기본 레이아웃 & 공통
========================================= */
body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: #fafafa;
  margin: 0;
  padding: 0;
  color: #333;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

main.container {
  margin-top: 30px;
  margin-bottom: 30px;
}

/* =========================================
   2. 사용자 헤더 & 네비게이션
========================================= */
.user-header {
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  padding: 10px 20px;
}
.user-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 로고 */
.user-header h1 { margin: 0; }
.user-header h1 a {
  font-size: 22px;
  font-weight: bold;
  color: #041829;
  text-decoration: none;
}

/* 네비게이션 메뉴 */
.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-menu ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}
.nav-menu li { position: relative; }
.nav-menu a {
  display: block;
  padding: 16px 22px;
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

/* 왼쪽 메뉴 */
.nav-left {
  list-style: none;
  display: flex;
  gap: 25px;
  margin: 0;
  padding: 0;
}
/* ===== 1뎁스 메뉴 (데스크탑) ===== */
.nav-left > li > a.main-menu {
  font-size: 22px;        /* ⬅️ 핵심 */
  font-weight: 700;
  letter-spacing: -0.01em;
}



/* 오른쪽 메뉴 */
.nav-right {
  list-style: none;
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.btn-nav {
  display: inline-block;
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.btn-nav.primary {
  background: #0078d7;
  color: #fff;
}
.btn-nav.primary:hover { background: #005fa3; }
.btn-nav.secondary {
  background: #fff;
  color: #0078d7;
  border: 1px solid #0078d7;
}
.btn-nav.secondary:hover {
  background: #f0f8ff;
  color: #005fa3;
}

/* 햄버거 버튼 */
.menu-toggle {
  display: none;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  color: #0078d7;
}

/* ✅ 카테고리별 구분 */
.nav-left .main-menu {
  font-weight: 700 !important;
  color: #861b56ff !important;
  text-transform: uppercase;
}
.nav-left .site-menu { color: #555; }
.nav-right .user-menu a { font-weight: 600; }

/* ✅ 서브 메뉴 (데스크탑) */
.nav-menu li ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  background: #fff;
  border: 1px solid #ddd;
  min-width: 180px;
  z-index: 1000;
  flex-direction: column;
}
.nav-menu li ul.sub-menu li a {
  padding: 10px 15px;
  color: #333;
}
.nav-menu li:hover > ul.sub-menu { display: flex; }

/* =========================================
   모바일 메뉴
========================================= */
@media (max-width: 768px) {
  .menu-toggle { display: block; }

  .nav-menu {
    max-height: 0;
    overflow: hidden;
    flex-direction: column;
    background: #fff;
    position: absolute;
    top: 60px; left: 0;
    width: 100%;
    border-top: 1px solid #ddd;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
    z-index: 1000;
  }
  .nav-menu.open {
    max-height: 100vh; /* 화면 전체 높이 */
    opacity: 1;
    overflow-y: auto;  /* 메뉴 길면 스크롤 */
  }

  /* 메인 메뉴 */
  .nav-left li a, .nav-right li a {
    display: block;
    padding: 16px 20px;
    font-size: 20px;
    font-weight: 600;
    color: #222;
    border-bottom: 1px solid #f2f2f2;
  }

  /* hover 효과 */
  .nav-left li a:hover, .nav-right li a:hover {
    background: #f8f9fa;
    color: #0078d7;
  }

  /* ✅ 2뎁스 메뉴 (모바일 전용) */
  .nav-left li ul.sub-menu {
    display: block !important;   /* 항상 표시 */
    position: static !important; /* 절대 위치 해제 */
    border: none;
    margin: 0;
    padding: 0 0 0 20px;
    background: transparent;     /* 흰 박스 제거 */
  }
  .nav-left li ul.sub-menu li a {
    font-size: 15px;
    font-weight: 400;
    padding: 12px 20px;
    color: #555;
    border-bottom: none;
  }

  /* ✅ 로그인 버튼 강조 */
  .nav-right .btn-nav {
    margin: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    background: #0078d7;
    color: #fff;
    border-radius: 6px;
  }
  .nav-right .btn-nav:hover { background: #005fa3; }
}

/* =========================================
   선택: 화면 전체 오버레이
========================================= */
body.menu-open {
  overflow: hidden; /* 메뉴 열릴 때 배경 스크롤 방지 */
}

.menu-overlay {
  display: none;
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.4);
  z-index: 900;
}
.menu-overlay.show { display:block; }

/* =========================================
   드롭다운 (2뎁스)
========================================= */
.nav-menu li .dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  list-style: none;
  padding: 10px 0;
  min-width: 160px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  z-index: 1001;
}
.nav-menu li:hover .dropdown-menu { display: block; }
.nav-menu li .dropdown-menu li a {
  display: block;
  padding: 8px 15px;
  color: #333;
}
.nav-menu li .dropdown-menu li a:hover {
  background: #f0f8ff;
  color: #0078d7;
}


/* =========================================
   3. 카드 & 폼
========================================= */
.form-box,
.card {
  max-width: 900px;
  margin: 40px auto;
  background: #fff;
  padding: 30px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.form-box h2, .card h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
  color: #222;
}
form label { display: block; margin: 8px 0 5px; font-size: 14px; }
form input {
  width: 100%; padding: 10px; margin-bottom: 15px;
  border: 1px solid #ccc; border-radius: 5px; font-size: 14px;
}
form button {
  width: 100%; padding: 12px; background: #0078d7;
  border: none; border-radius: 5px;
  color: #fff; font-size: 16px; font-weight: bold;
  cursor: pointer;
}
form button:hover { background: #005a9e; }

/* =========================================
   4. 공통 버튼
========================================= */
.btn {
  display: inline-block; padding: 12px 24px; font-size: 15px; font-weight: 600;
  border-radius: 6px; text-decoration: none; cursor: pointer;
  transition: background 0.2s, color 0.2s; border: none;
}
.btn-primary { background: #0078d7; color: #fff; }
.btn-primary:hover { background: #005a9e; }
.btn-secondary { background: #fff; color: #0078d7; border: 1px solid #0078d7; }
.btn-secondary:hover { background: #f0f8ff; color: #005a9e; }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 4px; }

.btn-download {
  display: inline-block;
  padding: 6px 18px;
  background: #0078d7;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s, transform 0.1s;
  text-align: center;
  white-space: nowrap;
}
.btn-download:hover { background: #005a9e; transform: translateY(-1px); }

/* =========================================
   5. 스터디룸 & 자격증
========================================= */
.studyroom-card { text-align: center; padding: 40px 30px; }
.studyroom-card h2 { font-size: 22px; margin-bottom: 15px; color: #222; }
.studyroom-card .intro-text { font-size: 15px; color: #555; margin-bottom: 25px; }

.submenu {
  list-style: none; padding: 0; margin: 0;
  display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
}
.submenu li { margin: 0; }
.submenu-btn {
  display: inline-block; padding: 14px 24px; font-size: 15px; font-weight: 500;
  color: #fff; background: #0078d7; border-radius: 6px;
  text-decoration: none; transition: background 0.2s, transform 0.1s;
}
.submenu-btn:hover { background: #005a9e; transform: translateY(-2px); }

.cert-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; margin-top: 25px;
}
.cert-card {
  background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
  padding: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s;
}
.cert-card:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
.cert-card h3 { margin: 0; font-size: 18px; color: #0078d7; }
.cert-card p { font-size: 14px; color: #555; margin: 8px 0; line-height: 1.5; }

/* =========================================
   6. 자료실
========================================= */
.file-table th,
.file-table td {
  border: 1px solid #ddd;
  padding: 10px;
  font-size: 14px;
  color: #333;        /* ✅ 글자색 지정 */
}

.file-table th {
  background: #f5f5f5;
  font-weight: bold;
  color: #222;        /* 헤더는 조금 더 진하게 */
}

.file-table tr:nth-child(even) {
  background: #fafafa;
}

/* =========================================
   7. 공지사항
========================================= */
.notice-list { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.notice-card {
  background: #fff; border: 1px solid #ddd; border-radius: 6px;
  padding: 15px 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: transform 0.2s;
}
.notice-card:hover { transform: translateY(-2px); box-shadow: 0 3px 8px rgba(0,0,0,0.1); }
.notice-card h3 { margin: 0 0 8px; font-size: 18px; }
.notice-card h3 a { color: #0067B8; text-decoration: none; }
.notice-card h3 a:hover { text-decoration: underline; }
.notice-date { font-size: 13px; color: #777; }

.notice-detail {
  background: #fff; border: 1px solid #ddd; border-radius: 6px;
  padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.notice-detail h2 { font-size: 22px; color: #222; margin-top: 0; }
.notice-detail .notice-date { font-size: 14px; color: #888; margin-bottom: 15px; }
.notice-content { font-size: 15px; line-height: 1.6; color: #333; margin-bottom: 20px; }

/* =========================================
   8. 푸터
========================================= */
.user-footer {
  background: #f5f5f5;
  border-top: 1px solid #e5e5e5;
  padding: 20px 0;
  margin-top: 40px;
  font-size: 14px;
  color: #666;
}
.footer-container {
  max-width: 1200px; margin: 0 auto; padding: 0 15px;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}
.footer-links { margin-bottom: 10px; }
.footer-links a {
  margin: 0 10px; color: #0078d7; text-decoration: none; font-size: 14px;
}
.footer-links a:hover { text-decoration: underline; color: #005a9e; }
.footer-copy { font-size: 13px; line-height: 1.5; color: #666; }

/* =========================================
   9. 마이페이지
========================================= */
.mypage {
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 20px;
}
.mypage-profile {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.mypage-profile h2 { font-size: 20px; margin: 0 0 15px; color: #222; }
.mypage-profile p { margin: 6px 0; font-size: 15px; color: #555; }

.mypage-activity {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.mypage-activity h3 { font-size: 18px; margin-bottom: 15px; color: #0078d7; }

.mypage-table { width: 100%; border-collapse: collapse; }
.mypage-table th, .mypage-table td {
  border: 1px solid #eee; padding: 10px; text-align: center; font-size: 14px;
}
.mypage-table th { background: #f9f9f9; font-weight: 600; }

.mypage-actions {
  margin-top: 20px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
.mypage-actions .btn {
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 6px;
}

/* =========================================
   10. 관리자 페이지 헤더
========================================= */
.admin-header {
  position: sticky;
  top: 0;
  z-index: 1200;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 5px 20px rgba(15, 23, 42, .055);
}

.admin-header__inner {
  max-width: 1480px;
  min-height: 78px;
  margin: 0 auto;
  padding: 0 26px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.admin-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-brand__link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.admin-brand__mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f62fe, #4f46e5);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 7px 16px rgba(79, 70, 229, .16);
}

.admin-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.admin-brand__text strong {
  color: #0f172a;
  font-size: 16px;
}

.admin-brand__text small {
  margin-top: 4px;
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
}

.admin-nav-wrap {
  flex: 1;
  min-width: 0;
}

.admin-nav {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

/* 단일 메뉴 */
.admin-nav__single > a,
.admin-nav__logout > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 11px;
  border-radius: 9px;
  color: #475569;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-nav__single > a:hover {
  background: #f1f5f9;
  color: #172033;
}

.admin-nav__single > a.active {
  background: #eaf0ff;
  color: #3047c7;
}

/* 상위 그룹 자체가 하나의 박스로 보이도록 */
.admin-nav__group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 4px 6px;
  border: 1px solid #e4e8ef;
  border-radius: 11px;
  background: #f8fafc;
  transition: border-color .15s ease, background-color .15s ease;
}

.admin-nav__group-head {
  display: flex;
  align-items: center;
}

.admin-nav__group-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 9px;
  border-radius: 7px;
  background: #334155;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .045em;
  white-space: nowrap;
}

/* 하위 메뉴는 상위 그룹과 시각적으로 분리 */
.admin-nav__group-links {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 6px;
  border-left: 1px solid #dce2eb;
}

.admin-nav__group-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 7px;
  color: #64748b;
  text-decoration: none;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}

.admin-nav__group-links a:hover {
  background: #eef2f7;
  color: #172033;
}

.admin-nav__group-links a.active {
  background: #e6ebff;
  color: #3047c7;
  font-weight: 900;
}

/* 현재 페이지가 속한 상위 그룹도 함께 강조 */
.admin-nav__group.is-active {
  border-color: #cbd5ff;
  background: #f4f6ff;
}

.admin-nav__group.is-active .admin-nav__group-label {
  background: #4054d6;
  color: #ffffff;
}

.admin-nav__group.is-active .admin-nav__group-links {
  border-left-color: #cbd5ff;
}

/* 문제풀이 그룹은 기본 상태에서도 아주 약하게 구분 */
.admin-nav__group--practice:not(.is-active) .admin-nav__group-label {
  background: #4f5f7a;
}

/* 로그아웃 */
.admin-nav__logout {
  margin-left: auto !important;
}

.admin-nav__logout a {
  color: #c24141 !important;
  background: #fffafa;
  border: 1px solid #fee2e2;
  text-decoration: none;
}

.admin-nav__logout a:hover {
  color: #a82f2f !important;
  background: #fff3f3 !important;
}

/* 햄버거 */
.admin-menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.admin-menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: #334155;
  border-radius: 999px;
}

/* 좁은 데스크탑에서는 여백만 축소 - 상위 그룹명은 유지 */
@media (max-width: 1260px) {
  .admin-header__inner {
    padding: 0 16px;
    gap: 16px;
  }

  .admin-nav {
    gap: 5px;
  }

  .admin-nav__group {
    gap: 4px;
    padding: 3px 4px;
  }

  .admin-nav__group-label {
    padding: 0 7px;
    font-size: 9px;
  }

  .admin-nav__group-links {
    padding-left: 4px;
  }

  .admin-nav__group-links a {
    padding: 0 6px;
    font-size: 10px;
  }

  .admin-nav__single > a,
  .admin-nav__logout > a {
    padding: 0 8px;
    font-size: 11px;
  }
}

/* 모바일: 상위 그룹 제목 + 하위 메뉴 2열 */
@media (max-width: 900px) {
  .admin-header__inner {
    display: block;
    min-height: auto;
    padding: 13px 16px;
  }

  .admin-brand {
    width: 100%;
  }

  .admin-menu-toggle {
    display: block;
  }

  .admin-nav-wrap {
    display: none;
    padding-top: 13px;
  }

  .admin-nav-wrap.is-open {
    display: block;
  }

  .admin-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .admin-nav__single,
  .admin-nav__group,
  .admin-nav__logout {
    width: 100%;
    margin: 0 !important;
  }

  .admin-nav__single > a,
  .admin-nav__logout > a {
    width: 100%;
    min-height: 42px;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 0 13px;
    font-size: 13px;
  }

  .admin-nav__group {
    display: block;
    padding: 10px;
    border-radius: 12px;
  }

  .admin-nav__group-head {
    margin-bottom: 8px;
  }

  .admin-nav__group-label {
    min-height: 25px;
    padding: 0 8px;
    font-size: 10px;
  }

  .admin-nav__group-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 0;
    border-left: 0;
  }

  .admin-nav__group-links a {
    min-height: 40px;
    justify-content: flex-start;
    padding: 0 11px;
    background: #ffffff;
    border: 1px solid #e6eaf0;
    font-size: 13px;
  }

  .admin-nav__group-links a.active {
    border-color: #cbd5ff;
    background: #e9edff;
  }

  .admin-nav__logout a {
    margin-top: 4px;
    justify-content: center !important;
  }

  body.admin-menu-open {
    overflow: hidden;
  }
}


/* =========================================
   11. 모의고사 리스트 테이블
========================================= */
.exam-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.exam-table th, .exam-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}
.exam-table th {
  background: #f5f5f5;
  font-weight: bold;
}

/* ====== 기본 레이아웃 ====== */
body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: #f9f9f9;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1100px;
  margin: 30px auto;
  padding: 0 20px;
}

/* ====== 표 스타일 ====== */
table {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
th {
  background: #0078d7;
  color: #fff;
}
tr:hover {
  background: #f9f9f9;
}

/* ====== 버튼 스타일 ====== */
.btn {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
  color: #fff;
  transition: background 0.2s;
}

.btn:hover { opacity: 0.9; }

/* 상태별 버튼 */
.btn-exam {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
  color: #fff;
  transition: background 0.2s;
}
.btn-exam.start { background: #0078d7; }    /* 기본 응시 */
.btn-exam.done { background: #6c757d; }     /* 응시 완료 */
.btn-exam.inprogress { background: #17a2b8; } /* 진행 중 */
.btn-exam.pending { background: #ffc107; color:#000; } /* 로그인 필요 */

.btn-trial { background: #28a745; }
.btn-trial:hover { background: #1e7e34; }

.btn-login { background: #ffc107; color: #000; }
.btn-login:hover { background: #e0a800; }

/* ====== 상태 뱃지 ====== */
.badge-pass {
  background: #28a745;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.badge-fail {
  background: #dc3545;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.badge-neutral {
  background: #6c757d;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.locked {
  font-size: 12px;
  color: #999;
  margin-left: 6px;
}

.dot {
  margin: 0 4px;
  color: #999;
}

.meta {
  font-size: 13px;
  color: #555;
}

/* ====== Hero Section ====== */
.hero {
  background: linear-gradient(135deg, #0078d7, #00b4d8);
  color: #fff;
  padding: 60px 20px;
  text-align: center;
}
.hero h1 {
  font-size: 36px;
  margin-bottom: 10px;
}
.hero p {
  font-size: 18px;
  opacity: 0.9;
}

.logo {
  background-image: url('logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 400px;
  height: 150px;
}
.user-header {
  background: #ffffff;
  border-bottom: 1px solid #eef0f3;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.user-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}
.nav-menu .main-menu {
  font-weight: 600;
  color: #1f2937;
  padding: 8px 4px;
  position: relative;
}

.nav-menu .main-menu:hover {
  color: #5f1530;
}

/* 밑줄 애니메이션 */
.nav-menu .main-menu::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: #5f1530;
  transition: width .25s ease;
}

.nav-menu .main-menu:hover::after {
  width: 100%;
}
.main-menu.highlight {
  color: #5f1530;
  font-weight: 700;
}

.main-menu.highlight::after {
  background: #5f1530;
}
.sub-menu {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  padding: 10px 0;
  min-width: 190px;
}

.sub-menu li a {
  padding: 10px 18px;
  display: block;
  font-size: 14px;
}

.sub-menu li a:hover {
  background: #f8f9fb;
  color: #5f1530;
}
.btn-nav.secondary {
  border: 1.5px solid #5f1530;
  color: #5f1530;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
}

.btn-nav.secondary:hover {
  background: #5f1530;
  color: #fff;
}

/* =========================================
   관리자 메뉴 크기 확대 (v6)
========================================= */

/* 헤더 전체 높이와 좌우 공간 확대 */
.admin-header__inner {
  max-width: 1540px;
  min-height: 88px;
  padding: 0 30px;
  gap: 28px;
}

/* 브랜드도 조금 키움 */
.admin-brand__mark {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  font-size: 15px;
}

.admin-brand__text strong {
  font-size: 18px;
}

.admin-brand__text small {
  font-size: 10px;
}

/* 단일 메뉴 */
.admin-nav__single > a,
.admin-nav__logout > a {
  min-height: 44px;
  padding: 0 14px;
  font-size: 13px;
}

/* 상위 그룹 박스 면적 확대 */
.admin-nav__group {
  min-height: 54px;
  padding: 6px 8px;
  gap: 8px;
  border-radius: 13px;
}

/* 상위 그룹 라벨 */
.admin-nav__group-label {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  letter-spacing: .04em;
}

/* 하위 메뉴 영역도 넓히기 */
.admin-nav__group-links {
  gap: 4px;
  padding-left: 8px;
}

.admin-nav__group-links a {
  min-height: 40px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 12px;
}

/* 메뉴 전체 간격 */
.admin-nav {
  gap: 10px;
}

/* 1260px 이하에서도 너무 작아지지 않게 */
@media (max-width: 1260px) {
  .admin-header__inner {
    min-height: 82px;
    padding: 0 18px;
    gap: 18px;
  }

  .admin-nav {
    gap: 6px;
  }

  .admin-nav__group {
    min-height: 50px;
    padding: 5px 6px;
    gap: 6px;
  }

  .admin-nav__group-label {
    min-height: 33px;
    padding: 0 9px;
    font-size: 11px;
  }

  .admin-nav__group-links {
    padding-left: 6px;
  }

  .admin-nav__group-links a {
    min-height: 37px;
    padding: 0 8px;
    font-size: 11px;
  }

  .admin-nav__single > a,
  .admin-nav__logout > a {
    min-height: 40px;
    padding: 0 10px;
    font-size: 12px;
  }
}

/* 모바일 메뉴도 조금 더 크게 */
@media (max-width: 900px) {
  .admin-header__inner {
    padding: 15px 16px;
  }

  .admin-brand__mark {
    width: 40px;
    height: 40px;
  }

  .admin-brand__text strong {
    font-size: 17px;
  }

  .admin-nav__group {
    padding: 12px;
  }

  .admin-nav__group-label {
    min-height: 29px;
    padding: 0 9px;
    font-size: 11px;
  }

  .admin-nav__group-links a {
    min-height: 44px;
    padding: 0 12px;
    font-size: 14px;
  }

  .admin-nav__single > a,
  .admin-nav__logout > a {
    min-height: 46px;
    padding: 0 14px;
    font-size: 14px;
  }
}


/* =========================================
   사용자 페이지 디자인 보강 (v7)
   - 관리자 영역에는 영향 없음
========================================= */
body:not(.admin-page) {
  color: #172033;
  background: #f8fafc;
  -webkit-font-smoothing: antialiased;
}

.user-header {
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid #e8edf3;
  box-shadow: 0 5px 20px rgba(15, 23, 42, .035);
  backdrop-filter: blur(12px);
}

.user-header .container {
  max-width: 1240px;
  min-height: 78px;
  height: auto;
  margin: 0 auto;
}

.user-header h1 a {
  color: #172033;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.035em;
}

.nav-left {
  gap: 14px;
}

.nav-left > li > a.main-menu,
.nav-menu .main-menu {
  padding: 12px 10px;
  color: #334155 !important;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.02em;
}

.nav-left > li > a.main-menu:hover,
.nav-menu .main-menu:hover,
.nav-left .main-menu.highlight {
  color: #6f1744 !important;
}

.nav-menu li ul.sub-menu {
  min-width: 205px;
  padding: 8px;
  border: 1px solid #e7eaf0;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .11);
}

.nav-menu li ul.sub-menu li a {
  padding: 11px 13px;
  border-radius: 8px;
  color: #475569;
  font-size: 14px;
}

.nav-menu li ul.sub-menu li a:hover {
  background: #f8fafc;
  color: #6f1744;
  text-decoration: none;
}

.nav-right {
  gap: 8px;
}

.btn-nav {
  min-height: 38px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
}

.btn-nav.primary {
  background: #172554;
  box-shadow: 0 7px 16px rgba(23, 37, 84, .13);
}

.btn-nav.primary:hover {
  background: #1e3a8a;
}

.btn-nav.secondary {
  border-color: #6f1744;
  color: #6f1744;
}

.btn-nav.secondary:hover {
  background: #6f1744;
  color: #fff;
}

.user-footer {
  margin-top: 64px;
  padding: 34px 0;
  border-top: 1px solid #e5eaf0;
  background: #f1f5f9;
  color: #64748b;
}

.footer-container {
  max-width: 1200px;
}

.footer-links a {
  color: #475569;
  font-weight: 650;
}

.footer-links a:hover {
  color: #172554;
}

.footer-copy {
  color: #7c8798;
}

@media (max-width: 768px) {
  .user-header {
    padding: 0 14px;
  }

  .user-header .container {
    min-height: 64px;
    padding: 0;
  }

  .user-header h1 a {
    font-size: 21px;
  }

  .nav-menu {
    top: 64px;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .08);
  }

  .nav-left,
  .nav-right {
    width: 100%;
    display: block;
  }

  .nav-left > li > a.main-menu,
  .nav-menu .main-menu,
  .nav-left li a,
  .nav-right li a {
    padding: 15px 20px;
    font-size: 17px;
  }

  .nav-left li ul.sub-menu {
    padding-left: 12px;
    box-shadow: none;
  }

  .nav-left li ul.sub-menu li a {
    padding: 10px 20px;
    font-size: 14px;
  }

  .nav-right .btn-nav {
    width: calc(100% - 32px);
    margin: 8px 16px;
    box-sizing: border-box;
  }

  .user-footer {
    margin-top: 44px;
    padding: 26px 0;
  }
}


/* =========================================
   관리자 공통 레이아웃 정리 (2026-09-18)
   - 본문은 넓게 사용
   - 상단 메뉴는 한 줄 유지 / 가로 스크롤 방지
========================================= */
body.admin-page {
  min-width: 0;
  overflow-x: hidden;
  background: #f8fafc;
}

/* 관리자 본문 전용 폭: 일반 사용자 .container 규칙과 분리 */
body.admin-page > main.admin-content {
  width: min(100% - 40px, 1720px);
  max-width: 1720px;
  margin: 24px auto 36px !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* 헤더는 화면 폭 안에서만 사용 */
.admin-header__inner {
  width: 100%;
  max-width: 1760px;
  min-height: 72px;
  margin: 0 auto;
  padding: 0 18px;
  gap: 14px;
  box-sizing: border-box;
}

.admin-brand__mark {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  font-size: 13px;
}

.admin-brand__text strong { font-size: 16px; }
.admin-brand__text small { font-size: 9px; }

.admin-nav {
  gap: 5px;
  width: 100%;
  min-width: 0;
}

.admin-nav__single > a,
.admin-nav__logout > a {
  min-height: 36px;
  padding: 0 9px;
  font-size: 11px;
}

.admin-nav__group {
  min-height: 44px;
  padding: 3px 5px;
  gap: 4px;
  border-radius: 10px;
  flex: 0 1 auto;
  min-width: 0;
}

.admin-nav__group-label {
  min-height: 29px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 10px;
}

.admin-nav__group-links {
  gap: 1px;
  padding-left: 4px;
  min-width: 0;
}

.admin-nav__group-links a {
  min-height: 31px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 10px;
}

/* 데스크탑에서는 메뉴 자체 가로 스크롤 금지 */
@media (min-width: 901px) {
  .admin-nav-wrap {
    overflow: visible;
  }

  .admin-nav {
    flex-wrap: nowrap;
  }
}

/* 1500px 이하에서 한 단계 더 압축 */
@media (max-width: 1500px) and (min-width: 901px) {
  .admin-header__inner {
    padding: 0 12px;
    gap: 9px;
  }

  .admin-brand__link { gap: 8px; }
  .admin-brand__mark { width: 33px; height: 33px; }
  .admin-brand__text strong { font-size: 14px; }
  .admin-brand__text small { font-size: 8px; }

  .admin-nav { gap: 3px; }
  .admin-nav__group { padding: 2px 3px; gap: 2px; }
  .admin-nav__group-label { padding: 0 6px; font-size: 9px; }
  .admin-nav__group-links { padding-left: 3px; }
  .admin-nav__group-links a { padding: 0 5px; font-size: 9.5px; }
  .admin-nav__single > a,
  .admin-nav__logout > a { padding: 0 6px; font-size: 10px; }
}

@media (max-width: 900px) {
  body.admin-page > main.admin-content {
    width: calc(100% - 24px);
    margin: 16px auto 28px !important;
  }

  .admin-header__inner {
    padding: 12px 14px;
  }
}