/* Pretendard 기본 적용 */
body {
  margin: 0;
  padding: 0;
  font-family: 'Pretendard', 'Pretendard', sans-serif;
  background: #1E1F23;
  color: #E7E3DCB0;
  font-size: 14px;
  padding-bottom: 90px;
  box-sizing: border-box;
}

input, button {
    margin: 0;
    padding: 0;
    font-family: 'Pretendard', 'Pretendard', sans-serif;
    font-size: 1em;
}

/* 상단바 */
.top-bar {
  height: 60px;
  background: #1E1F23;
  display: flex;
  justify-content: center;
  /* 로고 가운데 */
  align-items: center;
  position: relative;
}

.top-logo {
  height: 28px;
}

.menu-btn {
  width: 28px;
  position: absolute;
  right: 20px;
}


.wrap {
  font-family: 'Pretendard', sans-serif;
  padding:10px;
}


/***********************************************
 *  공통 리스트 UI 
 ***********************************************/
/* 리스트 전체 영역 */
.common-list-container {
  /* padding: 20px 16px 20px; */
}

.common-list-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #292A2F;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 15px;
  color: #ffffffd0;
}
.common-list-box.available { background:#32343A; }
.common-list-box.break { background:#3E3535; }
.common-list-box.block { background:#3A3A3A; }

.common-list-time {
  font-weight: 600;
  color: #fff;
}

.common-list-student {
  font-size: 14px;
  color: #E5C784;
}

/* 리스트 아이템 공통 */
.common-item {
  border-bottom: 1px solid #2A2A2C;
  padding: 18px 0;
}

/* 상단 행 (제목 + 썸네일 + 화살표) */
.common-item-row {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* 옵션 - 썸네일 (수업영상만 사용) */
.common-thumb {
  width: 86px;
  height: 86px;
  background: #3a3a3a;
  border-radius: 6px;
  flex-shrink: 0;
}

/* 텍스트 정보 영역 */
.common-info {
  flex: 1;
  margin-left: 14px;
}

.common-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffffe0;
  line-height: 1.3em;
  margin-bottom: 6px;
}

.common-meta {
  font-size: 14px;
  font-weight: 400;
  color: #ADABA6E0;
}

/* 화살표 */
.common-arrow {
  width: 18px;
  height: 18px;
  margin-left: 8px;
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.common-arrow.open {
  transform: rotate(180deg);
}

/* 펼침 영역 */
.common-detail {
  display: none;
  margin-top: 14px;
}

.common-detail.open {
  display: block;
}

/* 상세 내 큰 이미지(영상 페이지에서 사용) */
.common-detail-thumb {
  width: 100%;
  height: 200px;
  background: #333;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* 상세 텍스트 */
.common-desc {
  color: #D9D8D5E0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6em;
  margin-bottom: 16px;
}

.common-desc img {
  width: 100%;
}

/* 옵션 - 유튜브 영상 */
.common-youtube iframe {
  width: 100%;
  height: 210px;
  border-radius: 8px;
}

/* 더보기 */
.common-more-wrap {
  padding: 10px 16px;
  text-align: center;
}

.common-more-btn {
  width: 100%;
  height: 48px;
  background: #1E1F23;
  /* 스크린샷 배경과 동일 */
  color: #D9D8D5E0;
  /* 거의 흰색 */
  border: 1px solid #3A3A3F;
  /* 연한 그레이 보더 */
  border-radius: 8px;
  /* 스크린샷과 동일 rounded */
  font-size: 16px;
}





/* 메인 공지 영역 */
.notice-bar {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: #17181B;
  border-bottom: 1px solid #2A2A2C;
}

.notice-icon {
  width: 16px;
  margin-right: 6px;
  opacity: 0.8;
}

.notice-label {
  color: #A17E36B0;
  /* 골드 */
  font-weight: medium;
  margin-right: 8px;
  font-size: 13px;
}

.notice-text {
  color: #D9D8D5B0;
  /* 밝은 골드/그레이 */
  font-size: 13px;
}


/* 리스트 형식 */



/* 캘린더 헤더 */
.calendar-header {
  width: 90%;
  margin: 16px auto 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.month-text {
  font-size: 16px;
  /* 기존 22px → 18px로 감소 */
  font-weight: 600;
  color: #ffffffB0;
  /* 하얀색으로 변경 */
}

.event-label {
  position: absolute;
  bottom: 4px;
  /* 🔥 셀 바닥에 붙이기 */
  left: 50%;
  transform: translateX(-50%);

  display: inline-flex;
  align-items: center;
  gap: 4px;

  padding: 1px 4px;
  background: #2a2a31;
  color: #e5c784B0;
  font-size: 11px;
  border-radius: 4px;
  font-weight: 500;
  line-height: 1.1;

  width: auto;
  max-width: 95%;
  /* 셀 안에서만 표시되게 */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 왼쪽 세로선 */
.event-label::before {
  content: "";
  width: 2px;
  height: 10px;
  background-color: #e5c784;
  border-radius: 2px;
  flex-shrink: 0;
  /* 아이콘/세로선은 줄어들지 않게 */
}

.arrow-wrap {
  display: flex;
  gap: 20px;
}

.nav-arrow {
  background: none;
  border: none;
  padding: 6px;
}

.nav-arrow img {
  width: 20px;
  filter: invert(80%) sepia(40%) saturate(800%) hue-rotate(10deg);
  /* 아이콘 금색 */
}

.nav-btn {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

/* 캘린더 */
.calendar {
  width: 100%;
  max-width: 420px;
  margin: 14px auto 0;
  padding: 0;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 10px;
  opacity: 0.75;
  font-size: 14px;
  /* 요일 폰트 */
  font-weight: 400;
  width: 100%;
  box-sizing: border-box;
  color: #ADABA6;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

.calendar-day {
  aspect-ratio: 1 / 1;
  /* 🟩 자동 정사각형! (핵심) */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: relative;

  padding: 0;
  /* 요청사항 */
  box-sizing: border-box;
  min-width: 0;
  /* overflow: hidden;  */
}

.calendar-day.empty {
  background: transparent;
}

.day-number {
  color: #D9D8D5;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 3px;
  /* 숫자와 라벨 간격 */
  position: relative;
  z-index: 2;
}

.calendar-day:hover {
  background: rgba(255, 215, 0, 0.1);
}

.today-cell .event-label {
  bottom: -6px;
  /* 기존보다 아래로 내림 (값은 조절 가능) */
}

.today-circle {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 38px;
  height: 38px;
  border: 1px solid #E4CA92;
  border-radius: 50%;
  background: linear-gradient(7.5deg,
      #E4CA92 0%,
      #A17E36 100%);
  color: #1E1F23;
  font-weight: 600;
  font-size: 14px;
}


/* 선택 날짜 */
.selected {
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid #d2b46c;
}

/* 퀵 메뉴 */
.quick-menu {
  width: 90%;
  margin: 26px auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-columns: 1fr;
  /* column-gap: 4%;
  row-gap: 14px; */
  gap: 14px;
}

.menu-btn-box {
  background: #1E1F23;
  border-radius: 4px;
  padding: 20px 12px;
  text-align: center;
  border: 1px solid #2d2d34;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
}

.menu-btn-box.left-box {
  background:
    linear-gradient(55deg,
      #1E1F23 0%,
      #232428 50%,
      #29292C 100%) padding-box,

    linear-gradient(55deg,
      #1E1F23 0%,
      #232428 50%,
      #29292C 100%) border-box;
}

.menu-btn-box.right-box {
  background:
    linear-gradient(55deg,
      #29292C 0%,
      #232428 50%,
      #1E1F23 100%) padding-box,

    /* 2) 외곽선 그라데이션 */
    linear-gradient(55deg,
      #29292C 0%,
      #232428 50%,
      #1E1F23 100%) border-box;
}

.menu-btn-box img {
  width: 24px;
  margin-bottom: 8px;
}

.menu-btn-box span {
  display: block;
  font-size: 14px;
  /* 시안 기준 */
  font-weight: 500;
  color: #ffffffB0;
  /* color: rgba(255,255,255,0.65); */
}







.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 68px;
  background: #0f1012;
  border-top: 1px solid #2d2d34;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav-item {
  flex: 1;
  text-align: center;
  padding-top: 6px;
  font-size: 11px;
  color: #777;
}

.nav-item img {
  width: 22px;
  display: block;
  margin: 0 auto 4px;
}

.nav-item .on {
  display: none;
}

/* 기본: OFF만 보임 */
.nav-item.active .off {
  display: none;
}

.nav-item.active .on {
  display: block;
}

.nav-item.active span {
  color: #E4C992;
  /* gold */
}




/* dimmed background */
.schedule-dim {
  display: none;
  position: fixed;
  z-index: 900;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
}

/* popup sheet */
.schedule-popup {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  bottom: -60%;
  width: 100%;
  max-height: 60%;
  background: #1b1b20;
  border-radius: 14px 14px 0 0;
  padding: 16px 18px 30px;
  box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.35);

  transition: bottom 0.25s ease;
}

/* popup header */
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.popup-header span {
  font-size: 16px;
  font-weight: 600;
  color: #e5c784;
}

.popup-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
}

/* 일정 리스트 */
.popup-list {
  max-height: calc(60vh - 60px);
  overflow-y: auto;
}

.schedule-item {
  padding: 12px 10px;
  border-radius: 8px;
  background: #26262d;
  border: 1px solid #323238;
  margin-bottom: 10px;

  font-size: 15px;
  color: #ddd;
}

#drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  z-index: 999;
}

#drawer-overlay.show {
  display: block;
}

#drawer {
  position: fixed;
  top: 0;
  right: -80%;
  width: 80%;
  height: 100vh;
  background: #1E1F23;
  color: #fff;
  transition: right 0.3s ease;
  z-index: 1000;
  overflow-y: auto;
}

#drawer.open {
  right: 0;
}


/* 메뉴 헤더 */
/* 전체 헤더 영역 */
.drawer-header {
  padding: 0 16px 10px;
  color: #ffffff;
  background: #1E1F23;
}

/* ================================
   1) 닫기 버튼 줄
================================= */
.drawer-close-row {
  height: 46px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.drawer-close-btn {
  background: none;
  border: none;
  padding: 0 4px;
  cursor: pointer;
}

.drawer-close-btn img {
  width: 26px;
  height: 26px;
  opacity: 0.9;
}

/* ================================
   2) 환영문구 + 로그아웃 (한줄)
================================= */
.drawer-info-row {
  height: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0 24px 0;
  border-bottom: 1px solid #292A2F;
}

.drawer-welcome {
  font-size: 16px;
  color: #ffffff;
  font-weight: 600;
}

/* 로그아웃 텍스트 + 아이콘 */
.drawer-logout {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #ffffff;
}

.drawer-logout span {
  font-size: 14px;
  color: #ADABA6;
}

.drawer-logout img {
  height: 14px;
  width: auto;
  opacity: 1.5;
}





.drawer-menu {
  padding: 0 16px;
  /* 좌우 padding만 (요청한 기준) */
  overflow-y: auto;
}

.drawer-menu a {
  display: flex;
  align-items: center;
  /* 세로 가운데 정렬 */
  height: 40px;
  /* 메뉴 높이 */
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
}

.drawer-menu a:hover {
  color: #ffffffE0;
  /* 살짝 강조 */
}


.drawer-footer {
  position: absolute;
  bottom: 0;
  width:100%;
  border-top: 1px solid #292A2F;
  padding: 10px;
  background: #17181B;
  font-size: 13px;
  line-height: 18px;
  opacity: 0.8;
}

.drawer-footer .corp {
  margin-bottom: 10px;
}

.drawer-footer a {
  color: #fff;
}

.drawer-footer .links {
  margin-top: 10px;
}


/* 상단 헤더 */
.top-bar.sub-header {
  height: 56px;
  background: #1E1F23;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

/* 뒤로가기 아이콘 */
.top-bar.sub-header .top-logo {
  width: 20px;
}

.sub-header-title {
  font-family: Pretendard;
  font-size: 18px;
  color: #ffffffe0;
  font-weight: 600;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* 메뉴 아이콘 */
.top-bar.sub-header .menu-btn {
  width: 22px;
}

/* 목록 영역 */
.submain-list {
  padding: 20px;
  margin-top: 10px;
}

.list-box {
  position: relative;
  background: linear-gradient(55deg, #1E1F23 0%, #232428 50%, #29292C 100%) padding-box,
    linear-gradient(55deg, #1E1F23 0%, #232428 50%, #29292C 100%) border-box;
  border: 1px solid #2d2d34;
  border-radius: 8px;
  padding: 20px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.20);
}

.list-box .icon {
  width: 24px;
  margin-right: 14px;
}

.list-box span {
  color: #FFFFFFD0;
  /* 피그마 글씨 밝기 기준 */
  font-size: 15px;
  flex-grow: 1;
}

.list-box .arrow {
  width: 16px;
  opacity: 0.6;
}




/* ==============================================
    공통 SELECT UI (앱 전체 재사용)
    Prefix: common-
   ============================================== */
.common-section {
  width: 90%;
  max-width: 420px;
  margin: 0 auto;
  padding-top: 10px;
}

/* 전체 한 줄(여러 select/input 나란히) */
.common-form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

/* wrapper (select + icon 포함하는 container) */
.common-select-box {
  position: relative;
  flex: 1;
}

/* 실제 select 태그 */
.common-select {
  width: 100%;
  height: 36px;
  max-width: 100%;
  /* padding: 0 38px 0 14px; */
  box-sizing: border-box; 

  background: #1E1F23;
  border: 1px solid #2A2A2C;
  border-radius: 8px;

  font-size: 12px;
  color: #ffffffe0;
/* 
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none; */
}

select {
  max-width: 100vw !important;
}

/* 오른쪽 화살표 아이콘 */
.common-select-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  opacity: 0.6;
  pointer-events: none;
  /* 클릭되면 안됨 */
}

/* 전체 검색/필터 박스용 (select + date 포함 가능) */
.common-form-box {
  /* padding: 10px ; */
  margin-top: 14px;
}

/* 라벨 */
.common-form-label {
  font-size: 13px;
  color: #ADABA6E0;
  margin-right: 8px;
  white-space: nowrap;
}

/* date input 공통 스타일 */
.common-input-date {
  /* flex: 1 1 auto; */
  height: 36px;
  padding: 0 5px;
  background: #1E1F23;
  border: 1px solid #2A2A2C;
  border-radius: 8px;
  color: #ffffffe0;
  font-size: 15px;
}

.common-input-date::-webkit-calendar-picker-indicator {
  filter: invert(80%);
  opacity: 0.8;
}

/* 버튼 */
.common-form-btn {
  width: auto;
  height: 36px;
  padding:0 10px;
  border-radius: 8px;
  border: 1px solid #3A3A3F;
  background: #2a2a31;
  color: #D9D8D5E0;
  font-size: 12px;
}

.common-form-row.first-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* 1줄차에서는 라벨 제거 → HTML에서 빼고 CSS는 영향없음 */

/* 검색 버튼 크기 고정 */
.common-form-row.first-row .common-form-btn {
  width: 80px;
  /* select와 동일 높이 */
  margin: 0;
  flex-shrink: 0;
}

/* 과목선택 셀렉트는 왼쪽 풀 영역 사용 */
.common-form-row.first-row .common-select-box {
  flex: 1;
}

/* 2줄차: 시험일 라벨 + 날짜 2개 */
.common-form-row.second-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

/* 시험일 라벨 */
.common-form-row.second-row .common-form-label {
  width: auto;
  font-size: 14px;
  color: #ADABA6E0;
  margin-right: 6px;
}

/* date input 일관화 */
.common-form-row.second-row .common-input-date {
  flex: 1;
  height: 36px;
  font-size: 12px;
}

/* ==============================================
   공통 INPUT (text, tel, number 등)
   Prefix : common-input
   ============================================== */
.common-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;

  background: #1E1F23;
  border: 1px solid #2A2A2C;
  border-radius: 8px;

  font-size: 15px;
  color: #ffffffe0;
  box-sizing: border-box;
}

/* placeholder 색 */
.common-input::placeholder {
  color: #9d9d9db0;
}

.common-btn {
  width: 100%;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #3A3A3F;
  background: #2a2a31;
  color: #D9D8D5E0;
  font-size: 15px;
}

.common-btn:active {
  opacity: 0.9;
}

.common-row {
  width: 90%;
  max-width: 420px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.common-row-label {
  width: 90px;
  font-size: 14px;
  color: #ADABA6E0;
  white-space: nowrap;
}

.common-row .common-input {
  flex: 1;
}


.login-wrap {
  margin-top: 30px;
}

.login-desc {
  font-size: 14px;
  color: #ADABA6B0;
  width: 90%;
  max-width: 420px;
  margin: 0 auto 20px;
  line-height: 1.5em;
}

/* 로그인 전용 input 높이만 따로 지정 */
.login-input {
  height: 50px;
}

.login-logo-box {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 120px;
}

.login-logo-box img {
  width: 200px;
  opacity: 0.9;
}


/*******************************************************
 * 공통 카드 박스 (notice, video, mock 등 재사용)
 *******************************************************/
.common-card {
  background: linear-gradient(55deg, #1E1F23 0%, #232428 50%, #29292C 100%);
  border: 1px solid #2A2A2C;
  border-radius: 12px;
  padding: 20px 18px;
  margin-bottom: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.18);
}

/*******************************************************
 * 카드 타이틀 영역
 *******************************************************/
.common-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/*******************************************************
 * 상태 배지 (접수중 / 접수완료 / 마감 / 공지상태 등)
 *******************************************************/
.common-badge {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
  display: inline-block;
}

.common-badge.gold {
  background: #E4C99233;
  color: #E4C992;
}
.common-badge.pink {
  background: #9A4D4D;
  color:#fff;
}
.common-badge.gray {
  background: #3A3A3F;
  color: #C8C8C8;
}

.common-badge-gold {
  background: rgba(228, 201, 146, 0.15);
  color: #E4C992E0;
}

.common-badge-gray {
  background: rgba(255, 255, 255, 0.08);
  color: #A0A0A0;
}

/**********************************************
 * 상담 상태 배지
 **********************************************/
.common-badge-break {
  background: #9A4D4D;
  color:#fff;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-right: 6px;
}

.common-badge-block {
  background: #5A5A5A;
  color:#fff;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-right: 6px;
}


.common-slot-cancel-btn {
  padding: 5px 10px;
  background: #4A4A4A;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
}


/*******************************************************
 * 펼침 화살표
 *******************************************************/
.common-arrow {
  width: 18px;
  opacity: 0.7;
  transition: transform .2s;
}

.common-arrow.open {
  transform: rotate(180deg);
}

/*******************************************************
 * 리스트 박스 (하위 옵션 묶음)
 *******************************************************/
.common-section-box {
  margin-top: 16px;
  background: #1E1F23;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid #2d2d34;
}

/*******************************************************
 * 토글 스위치 (앱 전체에서 사용 가능)
 *******************************************************/
.common-switch {
  position: relative;
  width: 48px;
  height: 26px;
  background: #555;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.25s;
}

.common-switch.active {
  background: #C49A45;
}

.common-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
}

.common-switch.active::after {
  transform: translateX(22px);
}


.mock-item-box {
  /* common-card 스타일을 그대로 복붙 */
  position: relative;
  background: linear-gradient(55deg, #1E1F23 0%, #232428 50%, #29292C 100%);
  border: 1px solid #2A2A2C;
  border-radius: 12px;
  padding: 20px 18px 26px;
  margin-bottom: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.18);
}

/*******************************************************
 * 모의고사 상세 정보
 *******************************************************/
.mock-meta {
  margin-top: 14px;
  font-size: 14px;
  color: #ADABA6;
  line-height: 1.5em;
}

/*******************************************************
 * 과목 리스트 전체 묶음
 *******************************************************/
.mock-subject-list {
  display: none;
}

/*******************************************************
 * 과목 1줄
 *******************************************************/
.mock-subject-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #2d2d34;
}

.mock-subject-row:last-child {
  border-bottom: none;
}

.mock-subject-name {
  font-size: 16px;
  color: #FFFFFF;
}

.mock-switch {
  width: 42px;
  height: 24px;
  background: #555;
  border-radius: 24px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}

.mock-switch::after {
  content: "";
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.2s;
}

/* 활성 상태 */
.mock-switch.active {
  background: #C6A563;
}

.mock-switch.active::after {
  left: 20px;
}

/* 비활성 (접수불가) */
.mock-switch.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.mock-status-badge.gold {
  background: linear-gradient(135deg, #E4C992 0%, #A17E36 100%);
  color: #1E1F23;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
  font-weight: 600;
  position: absolute;
  right: 16px;
  top: 16px;
}

.mock-status-badge.gray {
  background: #3A3A3F;
  color: #C8C8C8E0;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
  font-weight: 500;
  position: absolute;
  right: 16px;
  top: 16px;
}


/* ================================
  학과상담/멘토상담 전용 추가 스타일
  ================================= */

.consult-top-section {
  width: 90%;
  max-width: 420px;
  margin: 10px auto 0;
}

.consult-top-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.consult-top-row .common-select-box {
  flex: 1;
}

.consult-info {
  width: 90%;
  max-width: 420px;
  margin: 6px auto 0;
  font-size: 13px;
  color: #ADABA6E0;
  line-height: 1.5em;
}

.consult-state-wrap {
  width: 90%;
  max-width: 420px;
  margin: 14px auto 6px;
  display: flex;
  gap: 16px;
}

.consult-state-row {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #D9D8D5E0;
}

.consult-state-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

.consult-dot-available {
  background: #3A3A3F;
}

.consult-dot-mine {
  background: #A17E36;
}

.consult-dot-disabled {
  background: #333;
}

.consult-time-grid {
  width: 90%;
  max-width: 420px;
  margin: 10px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.consult-time-slot {
  height: 40px;
  border-radius: 6px;
  background: #2b2c31;
  border: 1px solid #2b2c31;
  font-size: 13px;
  color: #D9D8D5E0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.consult-time-slot.available {
  background: #3A3A3F;
}

.consult-time-slot.mine {
  background: #A17E36;
  color: #000;
  font-weight: 600;
}

.consult-time-slot.disabled {
  opacity: 0.25;
}

.consult-time-slot.selected {
  border: 1px solid #E4CA92;
}

.consult-my-section-title {
  width: 90%;
  max-width: 420px;
  margin: 20px auto 0;
  font-size: 15px;
  font-weight: 600;
  color: #ffffffe0;
}

.consult-cancel-btn {
  border: 1px solid #3A3A3F;
  background: #2a2a31;
  color: #D9D8D5E0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  flex-shrink: 0;
}

.consult-cancel-btn:active {
  opacity: 0.9;
}

.consult-sheet-dim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 900;
}

.consult-sheet-box {
  display: none;
  position: fixed;
  left: 0;
  bottom: -70%;
  width: 100%;
  max-height: 70%;
  background: #1B1B20;
  border-radius: 14px 14px 0 0;
  padding: 16px 20px 26px;
  z-index: 999;
  transition: bottom 0.25s ease;
}

.consult-sheet-header {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #E5C784;
  margin-bottom: 12px;
}

.consult-sheet-body {
  padding: 14px 0;
  text-align: center;
  font-size: 15px;
  color: #fff;
}

.consult-sheet-btn-wrap {
  margin-top: 18px;
  display: flex;
  gap: 12px;
}

.consult-sheet-btn {
  flex: 1;
  height: 46px;
  border-radius: 4px;
  background: #2A2A31;
  border: 1px solid #3A3A3F;
  font-size: 15px;
  color: #D9D8D5E0;
}

.consult-sheet-btn.confirm {
  background: #A17E36;
  border: none;
  color: #000;
  font-weight: 600;
}







/* ============================
   QNA 전용 최소 스타일
   (공통 + 출결관리 기반)
============================ */

.qna-answer-box {
  background: #2A2A31;
  border: 1px solid #3A3A3F;
  padding: 14px 12px;
  border-radius: 8px;
  margin-top: 14px;
  font-size: 14px;
  color: #D9D8D5E0;
  line-height: 1.5em;
}

.qna-answer-header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 10px;
  color: #D9D8D5E0;
}

.qna-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffffd0;
}


/* dim */
.app-modal-dim {
  display:none;
  position:fixed;
  z-index:9000;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.55);
}

/* 팝업 박스 */
.app-modal-box {
  display:none;
  position:fixed;
  z-index:9001;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 380px;

  background:#26272B;
  border-radius:14px;
  overflow:hidden;

  color:#fff;
  font-family: Pretendard;
}

/* 헤더 */
.app-modal-header {
  padding:16px;
  font-size:18px;
  font-weight:600;
  color:#fff;
  text-align:center;
  border-bottom:1px solid #2f3035;
}

/* 메시지 */
.app-modal-body {
  padding:20px 16px;
  font-size:15px;
  color:#ffffffE0;
  text-align:center;
  line-height:1.5em;
}

/* 버튼 영역 */
.app-modal-btn-wrap {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #2f3035;
}

.app-modal-btn {
  width:50%;
  padding:14px 0;
  background:none;
  border:none;
  font-size:16px;
  color:#ffffff99;
}

.app-modal-btn.confirm {
  color:#E5C784;
}