/* /assets/css/time_popup.css
   - 팝업(.hp-pop) 전용 진료표(schedule) 단독 CSS (time.css 없이 동작)
   - 전제: 수정한 time.js 구조
     1) 요일 헤더(.schedule__days) 1회
     2) 의사 컬럼(.schedule__doctor)이 첫 row에만 존재 + grid-row span 부여
   - 핵심 해결:
     ✅ .schedule__rows 를 "하나의 grid"로 만들고
     ✅ .schedule__row 를 display: contents 로 바꿔서
        doctor span이 실제로 2줄(shift 개수)로 먹도록 함
*/

/* =========================================================
   0) Scope reset & Swiper safety
========================================================= */
.hp-pop .schedule,
.hp-pop .schedule *{
  box-sizing: border-box;
}

/* time_popup.css (대체안) */
.hp-pop .hp-pop-swiper{
  overflow: hidden; /* 여기만 */
}
/* time_popup.css - 슬라이드 레이어 안전장치 */
.hp-pop .hp-pop-swiper,
.hp-pop .hp-pop-swiper .swiper-wrapper,
.hp-pop .hp-pop-swiper .swiper-slide{
  position: relative;
  z-index: 1;
}

.hp-pop .schedule{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* =========================================================
   1) Theme tokens (모바일 304*228 기준)
========================================================= */
.hp-pop .schedule{
  --bg: #1f2338;
  --text: #ffffff;
  --muted: rgba(255,255,255,.78);
  --line: rgba(255,255,255,.16);

  --cell-bg: rgba(255,255,255,.96);
  --cell-text: #111;
  --off: #e53935;

  --radius: 12px;
  --cell-radius: 8px;

  /* 밀도 */
  --pad: 10px;
  --gap: 4px;        /* 칸 사이 */
  --row-gap: 6px;    /* 오전/오후 사이 */

  /* 글자 */
  --title: 13px;
  --day: 10px;
  --doctor: 12px;
  --role: 10px;
  --shift: 10px;
  --cell: 10px;

  /* 크기 */
  --cell-h: 22px;

  /* 컬럼 폭: [의사][오전/오후][요일...] */
  --doctor-col: 88px;
  --shift-col: 34px;

  background: var(--bg);
  color: var(--text);
  border-radius: var(--radius);
  padding: var(--pad);
}

/* =========================================================
   2) Title
========================================================= */
.hp-pop .schedule__title{
  margin: 0 0 8px;
  text-align: center;
  font-weight: 900;
  letter-spacing: .01em;
  font-size: var(--title);
  line-height: 1.2;
}
.hp-pop .schedule__title::before,
.hp-pop .schedule__title::after{
  display:none !important;
}

/* =========================================================
   3) Days header (상단 1회)
========================================================= */
.hp-pop .schedule__days{
  display: grid;
  grid-template-columns: var(--doctor-col) var(--shift-col) repeat(var(--day-count), minmax(0, 1fr));
  gap: var(--gap);
  align-items: end;
  margin: 0 0 8px;
  color: var(--muted);
  font-weight: 800;
  font-size: var(--day);
}

.hp-pop .schedule__dayStub{
  height: 18px;
}

.hp-pop .schedule__day{
  height: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* =========================================================
   4) Doctors list & blocks
========================================================= */
.hp-pop .schedule__list{
  display: grid;
  gap: 3px;
}

.hp-pop .schedule__block{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 8px;
  min-width: 0;
}

.hp-pop .schedule__gridWrap{
  min-width: 0;
  overflow: hidden;
}

/* =========================================================
   5) ✅ 핵심 레이아웃: rows를 하나의 grid로
   - .schedule__rows = "의사 1명당 표 전체" grid
   - .schedule__row = 컨테이너 역할만 하고 레이아웃은 부모 grid가 담당
========================================================= */
.hp-pop .schedule__rows{
  display: grid;

  /* 한 의사의 표는 이런 컬럼 구조 */
  grid-template-columns: var(--doctor-col) var(--shift-col) repeat(var(--day-count), minmax(0, 1fr));

  /* 오전/오후 각각 한 줄 */
  grid-auto-rows: var(--cell-h);

  /* 자동 배치는 "행 우선" */
  grid-auto-flow: row;

  column-gap: var(--gap);
  row-gap: var(--row-gap);
}

/* row 래퍼는 레이아웃을 하지 않게 껍데기만 */
.hp-pop .schedule__row{
  display: contents;
}

/* =========================================================
   6) Doctor column (왼쪽, 오전/오후 span)
========================================================= */
.hp-pop .schedule__doctor{
  /* time.js에서 style="grid-row: span N" 를 주므로 그대로 먹음 */
  grid-column: 1;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;

  padding: 6px 6px;
  border-radius: 10px;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);

  min-width: 0;
  text-align: center;
}

.hp-pop .schedule__doctorName{
  font-size: var(--doctor);
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-pop .schedule__doctorRole{
  font-size: var(--role);
  font-weight: 800;
  opacity: .85;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   7) Shift (오전/오후)
========================================================= */
.hp-pop .schedule__shift{
  grid-column: 2;

  height: var(--cell-h);
  display:flex;
  align-items:center;
  justify-content:center;

  font-size: var(--shift);
  font-weight: 900;
  color: var(--text);

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;

  padding: 0;
  line-height: 1;
  white-space: nowrap;
}

/* =========================================================
   8) Cells (진료/휴진)
   - 컬럼 지정 안 하면 grid-auto-flow가 알아서 3번~끝까지 채움
========================================================= */
.hp-pop .schedule__cell{
  height: var(--cell-h);
  display:flex;
  align-items:center;
  justify-content:center;

  border-radius: var(--cell-radius);
  background: var(--cell-bg);
  color: var(--cell-text);

  font-size: var(--cell);
  font-weight: 800;

  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 3px 8px rgba(0,0,0,.10);

  padding: 0 1px;
  text-align:center;
  white-space: nowrap;
}

.hp-pop .schedule__cell.is-off{
  color: var(--off);
  font-weight: 900;
}

/* =========================================================
   9) Breakpoints (팝업 고정 사이즈 기준)
========================================================= */

/* 모바일 <=787 (304*228) : 최대 압축 */
@media (max-width: 787px){
  .hp-pop .schedule{
  /* ===== 여백 & 밀도 ===== */
  --pad: 10px;        /* 스케줄 전체 컨테이너 내부 패딩 */
  --gap: 4px;         /* 셀(칸) 사이 가로 간격 */
  --row-gap: 6px;     /* 오전 / 오후 줄 사이 세로 간격 */

  /* ===== 텍스트 크기 ===== */
  --title: 13px;      /* 상단 '의료진 진료안내' 타이틀 글자 크기 */
  --day: 10px;        /* 요일(월~토) 헤더 글자 크기 */
  --doctor: 12px;     /* 의사 이름 글자 크기 */
  --role: 9px;       /* 의사 직함 글자 크기 */
  --shift: 10px;      /* 오전 / 오후 텍스트 크기 */
  --cell: 10px;       /* 진료 / 휴진 셀 텍스트 크기 */

  /* ===== 셀 높이 ===== */
  --cell-h: 18px;     /* 한 칸(오전·오후·진료셀)의 고정 높이 */

  /* ===== 컬럼 폭 ===== */
  --doctor-col: 48px; /* 의사 정보(이름/직함) 컬럼 너비 */
  --shift-col: 34px;  /* 오전·오후 구분 컬럼 너비 */
}
  .hp-pop .schedule__block{ padding: 4px; }
}

/* 태블릿 788~1199 (600*450) */
@media (min-width: 788px) and (max-width: 1199px){
  .hp-pop .schedule{
    --pad: 14px;
    --radius: 14px;

    --title: 16px;
    --day: 13px;
    --doctor: 18px;
    --role: 11px;
    --shift: 11px;
    --cell: 15px;

    --cell-h: 43px;
    --doctor-col: 120px;
    --shift-col: 40px;

    --gap: 5px;
    --row-gap: 8px;
  }

  .hp-pop .schedule__title{ margin-bottom: 10px; }
  .hp-pop .schedule__day,
  .hp-pop .schedule__dayStub{ height: 20px; }

  .hp-pop .schedule__block{ padding: 10px; }
}

/* PC >=1200 (800*600) */
@media (min-width: 1200px){
  .hp-pop .schedule{
    --pad: 18px;
    --radius: 16px;

    --title: 30px;
    --day: 15px;
    --doctor: 30px;
    --role: 15px;
    --shift: 12px;
    --cell: 17px;

    --cell-h: 60px;
    --doctor-col: 160px;
    --shift-col: 48px;

    --gap: 6px;
    --row-gap: 10px;
  }

  .hp-pop .schedule__block{ padding: 12px; }
}