/* =========================
   EDUCATION PAGE LAYOUT
========================= */

.curriculum-page {
  max-width: var(--content);
  margin: 0 auto;
}


/* =========================
   FILTER BUTTONS
========================= */

.course-filter {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}

.course-filter button {
  padding: 10px 18px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: 0.2s;
}

.course-filter button:hover {
  background: #f5f5f5;
}

.course-filter button.active {
  background: #333;
  color: #fff;
  border-color: #333;
}

/* =========================
   GROUP BLOCK (핵심 변경)
========================= */

.course-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 그룹 전체 박스 */
.group-block {
  background:#f8fafc;
  border-radius:20px;
  padding: 25px;
}

/* 그룹 타이틀 */
.group-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  border-left: 6px solid #333;
  padding-left: 10px;
}

/* =========================
   COURSE GRID (그룹 내부)
========================= */

.group-block .course-item {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px;
  margin: 15px auto;
  transition: 0.2s;
  background:#fff;
}

/* hover */
.group-block .course-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.course-item h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.course-item p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* =========================
   GROUP NOTE
========================= */

.group-note {
  margin-top: 20px;
  padding: 20px;
  background: #f8f8f8;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-muted);
}

/* =========================
   GROUP COLOR
========================= */

.group-block[data-group="GM"] .group-title {
  border-color: #f59f00;
}

.group-block[data-group="SIEMENS"] .group-title {
  border-color: #339af0;
}

/* =========================
   FILTER HIDDEN
========================= */

.hidden {
  display: none !important;
}

/* =========================
   COURSE CARD 구조 복구
========================= */

.course-item {
  display: flex;
  flex-direction: column;
  min-height: 220px;
}

/* 상단 (제목/설명) */
.course-top {
  flex: 1;  /* ⭐ 중요: 아래 meta를 바닥으로 밀어줌 */
}

/* =========================
   META INFO
========================= */

.course-meta {
  margin-top: auto;   /* ⭐ 카드 하단 고정 */
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  font-size: 15px;
  color: var(--text-muted);
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
}

.course-meta .note {
  color: var(--text-light);
  font-size: 14px;
  margin-left: 10px;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {

  .group-block {
    padding: 15px;
  }

  .course-item {
    padding: 15px;
  }

  .course-item h3{
      font-size:16px;
  }

  .course-item p{
      font-size:14px;
      line-height:1.7;
  }

  .course-meta{
      font-size:12px;
  }

  .course-meta .note{
      font-size:12px;
  }
}


/* ==========================================
   1. 교육일정 (전체 레이아웃)
========================================== */
.schedule-page {
  max-width: var(--content);     /* 최대 콘텐츠 폭 */
  margin: 0 auto;        /* 가운데 정렬 */ 
}

.reg_actions {
  margin: 5px;
  display: flex;
  justify-content: flex-end;
}

.btn-register {
  display: inline-block;
  padding: 10px 18px;
  background: #228be6;
  color: white;
  border-radius: 8px;
  font-size: 14px;
  text-decoration: none;
  transition: 0.2s;
}

.btn-register:hover {
  background: #1c7ed6;
}

/* ==========================================
   TOP BAR (탭 + 연도 필터 한 줄 정렬)
========================================== */

/* 전체 래퍼 */
.edu-top-bar {
  display: flex;                /* 가로 정렬 */
  justify-content: space-between; /* 좌우 끝 정렬 */
  align-items: center;          /* 세로 가운데 정렬 */
  margin: 20px 0;          /* 아래 여백 */
  
}

.curriculum-section{

    padding:60px 0;
    background:#f8fafc;
    border-radius:20px;
    padding: 30px;

}

/* ==========================================
   2. TABS (그룹 필터)
========================================== */
.edu-tabs {
  display: flex;         /* 가로 배치 */
  gap: 10px;             /* 탭 간 간격 */
  margin-bottom: 20px;   /* 아래 여백 */
}

.edu-tabs a {
  padding: 8px 18px;     /* 클릭 영역 */
  border-radius: 999px;  /* pill 형태 */
  text-decoration: none; /* 밑줄 제거 */
  background: #f1f3f5;   /* 기본 배경 */
  color: var(--text-muted);           /* 글자 색 */
  font-size: 14px;       /* 글자 크기 */
  transition: all 0.2s ease; /* 애니메이션 */
}

.edu-tabs a:hover {
  background: #e2e6ea;   /* hover 배경 */
}

.edu-tabs a.active {
  background: #2c3e50;   /* 활성 배경 */
  color: #fff;           /* 활성 글자 */
  font-weight: 600;      /* 강조 */
}


/* ==========================================
   3. FILTER (연도 선택)
========================================== */
/* select 박스 스타일 */
.year-filter select {
  padding: 6px 10px;            /* 내부 여백 */
  border-radius: 8px;           /* 둥근 모서리 */
  border: 1px solid #ddd;       /* 테두리 */
  font-size: 14px;              /* 글자 크기 */
  background: #fff;             /* 배경 */
  cursor: pointer;              /* 클릭 커서 */
}


/* ==========================================
   4. TABLE (교육 일정 테이블)
========================================== */
.edu-table {
  width: 100%;               /* 전체 폭 */
  border-collapse: collapse; /* 테두리 병합 */
  text-align: center;        /* 텍스트 중앙 */
}

/* 헤더 */
.edu-table th {
  background: #f8f9fa;
  padding: 12px;
  border: 1px solid #eee;
  font-size: 13px;
  white-space: nowrap;
}

/* 셀 */
.edu-table td {
  border: 1px solid #eee; /* 테두리 */
  padding: 8px;           /* 내부 여백 */
  min-height: 80px;       /* 최소 높이 */
  font-size: 13px;        /* 글자 크기 */
  transition: background 0.2s; /* hover 효과 */
}

.edu-table td:hover {
  background: #fafafa;   /* hover 배경 */
}


/* ==========================================
   5. COURSE (과정명 컬럼)
========================================== */
.course {
  width: 130px;          /* 고정 폭 */
  font-weight: 600;      /* 강조 */
  background: #fafafa;   /* 배경 구분 */
}


/* ==========================================
   6. COURSE COLOR (과정별 색상)
========================================== */
.course-GMTC    { color: var(--text); font-weight: 600; } /* GM TC */
.course-GMMATH  { color: #3498db; font-weight: 600; } /* GM MATH */
.course-GMDRAW  { color: #e67e22; font-weight: 600; } /* GM DRAW */
.course-GMTCVIS { color: #9b59b6; font-weight: 600; } /* GM TC VIS */
.course-TCUSER  { color: #16a085; font-weight: 600; } /* TC USER */
.course-TCNXUSER{ color: #c0392b; font-weight: 600; } /* NX USER */


/* ==========================================
   7. DATE CELL (클릭 가능한 일정 셀)
========================================== */
.date-cell {
  cursor: pointer;       /* 클릭 가능 */
  transition: 0.2s;      /* hover 애니메이션 */
}

.date-cell:hover {
  background: #f0f6ff;   /* hover 강조 */
}


/* ==========================================
   8. SCHEDULE BOX (일정 박스)
========================================== */
.edu-box {
  font-size: 12px;       /* 글자 크기 */
  line-height: 1.5;      /* 줄 간격 */
  padding: 4px 6px;      /* 내부 여백 */
  border-radius: 6px;    /* 둥근 모서리 */
  color: var(--text);           /* 기본 텍스트 */
}


/* ==========================================
   9. STATUS BADGE (상태 표시)
========================================== */
.status {
  display: inline-block; /* inline-block */
  margin-top: 6px;       /* 위 여백 */
  padding: 3px 8px;      /* 크기 */
  border-radius: 999px;  /* pill */
  font-size: 11px;       /* 글자 */
  font-weight: 500;      /* 강조 */
}

/* 예정 */
.status.planned {
  background: #fff3cd;   /* 배경 */
  color: #b26a00;        /* 글자 */
}

/* 종료 */
.status.ended {
  background: #e9ecef;
  color: #6c757d;
}

/* 취소 */
.status.canceled {
  background: #fde2e2;
  color: #c92a2a;
}


/* ==========================================
   10. GROUP / EMPTY STATE
========================================== */
.group-header td {
  padding: 10px 0 !important; /* 상하 여백 */
  font-size: 15px;            /* 글자 크기 */
  font-weight: 700;           /* 강조 */
  text-align: center;         /* 중앙 */
  background: #e9ecef;        /* 배경 */
}

.no-data-row {
  text-align: center;         /* 중앙 정렬 */
  color: #868e96;             /* 회색 */
}


/* ==========================================
   11. CURRENT MONTH (현재 월 강조)
========================================== */
.current-month {
  background: #e7f5ff;        /* 현재 월 컬럼 배경색 (연한 파랑으로 강조) */
}


/* ==========================================
12. CALENDAR (FullCalendar)
========================================== */

/* 캘린더 전체 */
#calendar{
    margin-top:30px;
    background:#fff;
    padding:12px;
    border-radius:10px;
    box-shadow:0 3px 12px rgba(0,0,0,.05);
}

/* 전체 기본 글꼴 */
.fc{
    font-family:'Pretendard','Noto Sans KR',sans-serif;
    font-size:13px;
}

/* 월 제목 */
.fc .fc-toolbar-title{
    font-size:18px;
}

/* 버튼 */
.fc .fc-button{
    font-size:13px;
    padding:4px 10px;
}

/* 요일 */
.fc .fc-col-header-cell-cushion{
    font-size:13px;
    font-weight:600;
}

/* 날짜 숫자 */
.fc .fc-daygrid-day-number{
    font-size:13px;
}

/* 이벤트 글씨 */
.fc .fc-event-title{
    font-size:11px;
}

/* 이벤트 시간(혹시 사용시) */
.fc .fc-event-time{
    font-size:11px;
}

/* More 링크(+2 more) */
.fc .fc-daygrid-more-link{
    font-size:11px;
}

/* 셀 높이 */
.fc .fc-daygrid-day-frame{
    min-height:85px;
}

/* ==========================================
   13. EVENT STATE (강조/비활성)
========================================== */
/* 선택된 이벤트 (강조 상태) */
.highlight-event {
  background-color: #2c3e50 !important; /* 이벤트 배경색 강제 적용 (기본 스타일 덮어쓰기) */
  border-color: #2c3e50 !important;     /* 테두리 색상 동일하게 맞춤 */
  font-weight: 600;                     /* 텍스트 강조 (굵게) */
  opacity: 1;                           /* 완전 선명하게 표시 */
}

/* 비선택 이벤트 (흐림 처리) */
.dim-event {
  opacity: 0.25;                        /* 투명도 낮춰서 비활성 느낌 */
}


/* ==========================================
   14. MOBILE UI (768px 이하 - 카드형 레이아웃)
========================================== */
@media (max-width: 768px) {

  /* 상단 바 세로 정렬로 변경 */
  .edu-top-bar {
    flex-direction: column;     /* 세로 배치 */
    align-items: flex-start;    /* 왼쪽 정렬 */
    gap: 10px;                  /* 요소 간 간격 */
  }

  /* 연도 필터 영역 전체 폭 사용 */
  .year-filter {
    width: 100%;
  }

  /* select도 전체 폭 */
  .year-filter select {
    width: 100%;
  }

  /* 테이블 헤더 숨김 (모바일에서는 불필요) */
  .edu-table thead {
    display: none; /* 월 헤더 제거 */
  }

  /* tbody를 그리드 카드 레이아웃으로 변경 */
  .edu-table tbody {
    display: grid;                         /* grid 사용 */
    grid-template-columns: 1fr;
    gap: 12px;                             /* 카드 간 간격 */
  }

  /* 각 row → 카드 형태 */
  .edu-table tr {
    display: block;                        /* 블록 요소로 변경 */
    border: 1px solid #eee;                /* 카드 테두리 */
    border-radius: 10px;                   /* 둥근 모서리 */
    overflow: hidden;                      /* 내부 요소 넘침 방지 (둥근 모서리 유지) */
    background: #fff;                      /* 카드 배경 */
  }

  /* 그룹 헤더는 한 줄 전체 사용 */
  .group-header {
    grid-column: 1 / -1;                   /* 2열 전체 차지 */
  }

  /* 그룹 헤더 스타일 */
  .group-header td {
    display: block;                        /* 전체 폭 사용 */
    width: 100%;                           /* 가로 꽉 채움 */
    padding: 12px 0;                       /* 상하 여백 */
    text-align: center;                    /* 중앙 정렬 */
  }

  /* 일반 셀 */
  .edu-table td {
      display: block;
      padding: 6px 8px;
      border: none;
      min-height: 0;
  }

  /* 과정명 */
  .edu-table td.course {
      grid-column: 1 / -1;

      display: flex;
      align-items: center;
      justify-content: center;

      width: 100%;
      height: auto;
      min-height: 0;

      padding: 8px 10px;
      margin: 0;

      font-size: 14px;
      line-height: 1.4;
      font-weight: 700;

      background: linear-gradient(90deg, #f1f3f5, #f8f9fa);
      border-bottom: 1px solid #e9ecef;
      border-radius: 10px 10px 0 0;
  }

  /* 과정별 일정 영역을 2열로 배치 */
  .edu-table tbody tr:not(.group-header) {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-flow: row;
      grid-auto-rows: min-content;
      align-content: start;
      gap: 0;
  }

  /* 일정 셀 */
  .edu-table tbody tr:not(.group-header) td:not(.course) {
      width: auto;
      height: auto;
      min-height: 0;
      padding: 4px 6px;
  }

  /* 일정 내부 - 날짜 + 상태 */
  .edu-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      width: 100%;
      height: auto;
      min-height: 0;

      gap: 6px;
      padding: 3px 4px;
      line-height: 1.4;
  }

  /* before로 붙던 월 라벨 제거 */
  .edu-table td::before {
    display: none;                         /* 라벨 숨김 */
  }

  /* 상태 배지 축소 */
  .status {
    margin: 0;                             /* 여백 제거 */
    font-size: 10px;                       /* 작은 글자 */
    padding: 2px 6px;                      /* 작은 배지 */
  }

  /* 빈 데이터 셀 숨김 (불필요한 줄 제거) */
  .edu-table td:has(.hide-mobile) {
    display: none;                         /* "-" 셀 제거 */
  }

  /* 데이터 없음 메시지 */
  .no-data-row {
    display: block;                        /* 블록 요소 */
    text-align: center;                    /* 중앙 정렬 */
    padding: 10px;                         /* 여백 */
    font-size: 13px;                       /* 글자 크기 */
  }
}



/* =========================================================
   3. REGISTRATION PAGE LAYOUT
========================================================= */

.registration-section{

    padding:60px 0;
    background:#f8fafc;
    border-radius:20px;
    padding: 30px;

}

/* 🔥 2단 레이아웃 (핵심) */
.registration-layout {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 🔥 반반 */
  gap: 40px;

  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 20px;
}

.top-action {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 20px;
}

.check-btn {
  padding: 10px 16px;
  border-radius: 8px;
  background: #eef1f4;
  font-size: 14px;
  text-decoration: none;
  color: var(--text);
}

/* =========================
   MESSAGE UI
========================= */
.message-wrap {
  margin: 10px 0 20px;
}

.message {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 8px;
}

.message.success {
  background: #e6f7e6;
  color: #2f8f2f;
  border: 1px solid #b7e1b7;
}

.message.warning {
  background: #fff6e5;
  color: #b26a00;
  border: 1px solid #ffd699;
}

.message.error {
  background: #ffe6e6;
  color: #c92a2a;
  border: 1px solid #ffb3b3;
}

/* =========================================================
   CARD
========================================================= */

.schedule-card {
  display: block;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  transition: all 0.2s ease;
  cursor: pointer;
  margin-bottom: 10px;
}

.schedule-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* 상단 */
.card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 체크박스 */
.card-top input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #6b7c93;
}

/* 제목 */
.card-top .title {
  font-weight: 600;
  font-size: 14px;
}

/* =========================================================
   META + BADGE (🔥 핵심 수정)
========================================================= */

.card-meta {
  font-size: 12.5px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

/* 🔥 badge 오른쪽 끝 */
.card-meta .badge {
  margin-left: auto;
}

/* 아이콘 정렬 */
.card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* =========================================================
   선택 상태
========================================================= */

.schedule-card:has(input[type="checkbox"]:checked) {
  border: 1px solid #cfd9e6;
  background: #f6f8fb;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.schedule-card:has(input[type="checkbox"]:checked) .title {
  color: #2f3b52;
  font-weight: 600;
}

/* =========================================================
   마감 상태
========================================================= */

.schedule-card.full {
  opacity: 0.4;
  pointer-events: none;
  background: #f8f9fa;
}

/* =========================================================
   BADGE
========================================================= */

.badge {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
}

.badge.green {
  background: #e6f7ec;
  color: #2f9e44;
}

.badge.red {
  background: #ffe3e3;
  color: #e03131;
}

/* =========================================================
   전체 선택
========================================================= */

.select-all {
  margin-bottom: 12px;
  font-size: 14px;
}

.select-all input {
  margin-right: 6px;
}

/* =========================================================
   FORM
========================================================= */

.form-section {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 20px;
}

.registration-page fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.form-section.disabled {
  opacity: 0.5;
  pointer-events: none;
  background: #f8f9fa;
}

.empty-form-message {
  margin-bottom: 12px;
  font-size: 14px;
  color: #999;
}

/* 리스트 */
.form-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 한 줄 */
.form-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 🔥 label 정렬 + 고정폭 */
.label {
  width: 90px;
  font-size: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
  text-align: right;
}

/* input */
.form-row input,
.form-row select {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: 0.2s;
  min-width: 0; /* 🔥 중요 */
}

.form-row input:focus,
.form-row select:focus {
  border-color: #9aa6b2;
}

/* 버튼 */
.submit-btn {
  width: 100%;
  margin-top: 18px;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: #2f3b52;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.submit-btn:hover {
  background: #1f2937;
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 768px) {

  /* 바깥 영역 여백 축소 */
  .registration-section {
      padding: 14px;
      border-radius: 14px;
  }

  /* 2열 → 1열 */
  .registration-layout {
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
      padding: 14px;
      width: 100%;
      box-sizing: border-box;
  }

  /* Grid 자식이 화면 밖으로 밀리지 않도록 */
  .registration-layout > * {
      min-width: 0;
  }

  /* 교육 카드 */
  .schedule-card {
      width: 100%;
      max-width: 100%;
      padding: 12px;
      box-sizing: border-box;
      overflow: hidden;
  }

  /* 카드 상단 */
  .card-top {
      width: 100%;
      min-width: 0;
      align-items: flex-start;
  }

  .card-top input[type="checkbox"] {
      flex-shrink: 0;
      margin-top: 2px;
  }

  /* 긴 과정명 줄바꿈 허용 */
  .card-top .title {
      flex: 1;
      min-width: 0;
      font-size: 12px;
      line-height: 1.45;
      word-break: normal;
      overflow-wrap: anywhere;
  }

  /* 날짜 / 인원 / 강사 / 상태 */
  .card-meta {
      width: 100%;
      min-width: 0;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      font-size: 11.5px;
  }

  /* 신청가능 배지 */
  .card-meta .badge {
      margin-left: 0;
      align-self: flex-end;
  }

  /* =========================================================
    모바일 신청자 정보 폼
  ========================================================= */

  .form-section {
      width: 100%;
      min-width: 0;
      padding: 14px;
      box-sizing: border-box;
  }

  .form-list {
      width: 100%;
      min-width: 0;
  }

  /* 모바일에서는 라벨 + 입력창 세로 배치 */
  .form-row {
      width: 100%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
  }

  /* 라벨 */
  .label {
      width: 100%;
      flex: none;
      text-align: left;
      font-size: 12px;
      font-weight: 500;
  }

  /* 입력창 */
  .form-row input,
  .form-row select {
      display: block;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      padding: 10px 12px;
  }

  /* 버튼 */
  .submit-btn {
      width: 100%;
      box-sizing: border-box;
  }
}

/* =========================================================
   4. EGISTRATION CHECK PAGE
========================================================= */


.registration_check-page {
  max-width: var(--content);
  margin: 0 auto;
  padding: 30px 20px;
}

/* 검색 영역 */
.search-box {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}

.search-box form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.search-box input {
  flex: 1;
  min-width: 180px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.search-box button {
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  background: #2f3b52;
  color: #fff;
  cursor: pointer;
}

/* =========================================================
   RESULT CARD
========================================================= */

.result-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 교육 리스트 카드 */
.check-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.check-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.check-card input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #6b7c93;
}

.check-title {
  font-weight: 500;
  color: var(--text);
}

.check-meta {
  font-size: 12px;
  color: #6b7280;
}

/* =========================================================
   BUTTON AREA
========================================================= */

.action-buttons {
  display: flex;
  gap: 10px;
}

.btn {
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.btn.cancel {
  background: #ffe3e3;
  color: #e03131;
}

.btn.update {
  background: #e6f7ec;
  color: #2f9e44;
}

/* =========================================================
   FORM (신청자 정보)
========================================================= */

.info-form {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 20px;
}

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

.info-form .label {
  width: 90px;
  text-align: right;
  font-size: 14px;
  color: var(--text-muted);
}

.info-form input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* =========================================================
   EMPTY
========================================================= */

.empty-box {
  padding: 40px;
  text-align: center;
  color: var(--text-light);
  border: 1px dashed #ddd;
  border-radius: 10px;
  background: #fafafa;
}

/* =========================================================
   RESULT LAYOUT (신청확인 전용)
========================================================= */

.result-layout {
  display: flex;
  gap: 24px;
  margin-top: 20px;
}

/* 좌우 비율 (신청 페이지랑 동일하게) */
.result-layout .card-section {
  flex: 1.2;
}

.result-layout .form-section {
  flex: 0.8;
}

/* 취소 버튼 스타일 */
.cancel-btn {
  margin-top: 16px;
  background: #ffe3e3;
  color: #e03131;
}

.cancel-btn:hover {
  background: #ffc9c9;
}

.schedule-card:has(input:checked) {
  background: #fff5f5;
  border-color: #ffc9c9;
}

.modal-overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.45);

    display:none;

    align-items:center;
    justify-content:center;

    z-index:9999;

}

.modal-overlay.show{

    display:flex;

}

.confirm-modal{

    width:360px;

    background:#fff;

    border-radius:12px;

    box-shadow:0 15px 40px rgba(0,0,0,.25);

    overflow:hidden;

}

.modal-title{

    font-size:20px;

    font-weight:700;

    padding:18px 24px;

    border-bottom:1px solid #eee;

}

.modal-body{

    padding:30px 24px;

    text-align:center;

    line-height:1.7;

}

.modal-buttons{

    display:flex;

}

.modal-buttons button{

    flex:1;

    border:0;

    padding:15px;

    cursor:pointer;

    font-size:15px;

}

.btn-secondary{

    background:#f3f3f3;

}

.btn-primary{

    background:var(--brand);

    color:white;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .result-layout {
    flex-direction: column;
  }

  .result-layout .card-section,
  .result-layout .form-section {
    width: 100%;
  }

  .search-box form {
    flex-direction: column;
  }

  .check-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .info-form .form-row {
    flex-direction: row;
  }

  .info-form .label {
    width: 80px;
    font-size: 13px;
  }
}

/* ============================================================
   [Stage2] 신청 폼 섹션 제목  (.form-section-title)
   ------------------------------------------------------------
   registration / registration_check 의 📚/🧾 제목.
   기존엔 .section-title 를 썼는데, 그건 base.css의 overview eyebrow
   (작은 파란 대문자)라 큰 제목이 작게 나오는 문제가 있었습니다.
   전용 클래스로 분리하고 제목다운 스타일을 지정합니다.
   ============================================================ */
.form-section-title{
    font-size:18px;
    font-weight:700;
    color:var(--text);
    margin:0 0 16px;
    padding-bottom:12px;
    border-bottom:2px solid #eee;
}