/* ====== Responsive ====== */
@media (max-width: 880px) {
  .contact-hours__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ch-right__title {
    text-align: left;
    margin-bottom: 14px;
  }

  .ch-row {
    grid-template-columns: 1fr;
  }

  .ch-row dd {
    text-align: left;
    color: #444;
  }

  .contact-hours__notice {
    grid-template-columns: 1fr;
    
  }
}


/* ====== Base ====== */
.contact-hours {
  margin-top: 100px;
  width: 100%;
  font-family: system-ui, -apple-system, "Pretendard", "Noto Sans KR", sans-serif;
  color: #333;
}

.contact-hours__top {
  max-width: 1100px;
  margin: 0 auto 18px;
  padding: 10px 18px 16px;
  border-bottom: 1px solid #e6e6e6;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  background: linear-gradient(to right, #b6a391 0%, #e9ded2 100%);
  color: #ffffff;
}

.contact-hours__top p { margin: 4px 0; }

.contact-hours__card {
  max-width: 1100px;
  margin: 0 auto;
  padding: 34px 18px;
}

.contact-hours__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 28px;
  align-items: center;
}

/* ====== Left ====== */
.ch-left {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 8px;
}

.ch-left__icon {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  color: #9c9c9c;
}

.ch-left__label {
  margin: 0 0 6px;
  font-size: 14px;
  color: #777;
  letter-spacing: -0.2px;
}

.ch-left__phone {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #2f2f2f;
}

/* ====== Right ====== */
.ch-right {
  padding: 10px 0;
}

.ch-right__title {
  margin: 0 0 18px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: #333;
}

.ch-table {
  margin: 0;
  border-top: 1px solid #e6e6e6;
}

.ch-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 10px;
  padding: 16px 6px;
  border-bottom: 1px solid #e6e6e6;
}

.ch-row dt {
  margin: 0;
  font-size: 15px;
  color: #555;
}

.ch-row dd {
  margin: 0;
  text-align: right;
  font-size: 15px;
  color: #333;
}

.ch-right__note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14px;
  color: #d24a43;
  font-weight: 600;
}

/* ====== Divider ====== */
.contact-hours__divider {
  margin: 34px 0;
  border: 0;
  border-top: 1px solid #e6e6e6;
}

/* ====== Notice ====== */
.contact-hours__notice {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 100px;
}

.notice-left {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}

.notice-left__icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  color: #9c9c9c;
}

.notice-left__title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #333;
  letter-spacing: -0.2px;
}

.notice-list {
  margin: 0;
  padding: 10px 0 0 18px;
  color: #555;
  line-height: 1.8;
  font-size: 14px;
}

.notice-list li { margin: 6px 0; }


/* =========================
   ✅ RESERVE (contact-hours) Responsive Fix (Override)
   reserve.css 맨 아래에 붙여넣기
   ========================= */

/* 1) 섹션 내부에서는 한국어 줄바꿈이 한 글자씩 찢어지지 않게 */
.contact-hours,
.contact-hours *{
  word-break: keep-all;
  overflow-wrap: normal;
}

/* 2) 1100px 이하부터는 무조건 1컬럼로 떨어지게(덮어쓰기) */
@media (max-width: 1100px){
  .contact-hours__grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: start !important;
  }

  .ch-left{
    justify-content: flex-start !important;
    padding: 10px 0 !important;
  }

  .ch-right{
    padding: 0 !important;
  }

  .ch-right__title{
    text-align: left !important;
    margin-bottom: 12px !important;
  }
}

/* 3) 테이블(진료시간) 영역: 모바일에서 dt/dd가 찌그러지지 않게 */
@media (max-width: 880px){
  .contact-hours__card{
    padding: 24px 16px !important;
  }

  .ch-left__icon{
    width: 56px !important;
    height: 56px !important;
  }

  .ch-left__phone{
    font-size: 28px !important;
    letter-spacing: 0 !important;
    word-break: keep-all;
  }

  .ch-row{
    grid-template-columns: 1fr !important;
    padding: 14px 4px !important;
    gap: 6px !important;
  }

  .ch-row dt{
    font-weight: 700;
  }

  .ch-row dd{
    text-align: left !important;
    color: #444 !important;

    /* ✅ 시간 문자열이 한 글자씩 세로로 찢어지는 현상 방지 */
    word-break: keep-all;
    overflow-wrap: anywhere; /* 혹시라도 너무 길면 단어 단위로만 */
  }

  /* 유의사항도 1컬럼 + 제목/리스트 정렬 안정화 */
  .contact-hours__notice{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .notice-left{
    padding: 0 !important;
  }

  .notice-list{
    padding-left: 18px !important;
  }
}

/* 4) 아주 작은 화면에서 폰트만 한 번 더 정리 */
@media (max-width: 420px){
  .contact-hours__top{
    font-size: 15px !important;
  }

  .ch-right__title{
    font-size: 18px !important;
  }

  .ch-row dt,
  .ch-row dd{
    font-size: 14px !important;
  }
}