@charset "UTF-8";

/*
 * custom.css — 커스텀 오버라이드 전용
 */

/* 일정 미선택 시 수량 영역에 안내 문구 표시 */
.ui-sect:has(.sect.date .time-schedule) {
  & .sect.date:not(:has(dl.schedule.active)) + .sect.set-ea {
    & .ui-item.prices li {
      & .quantity {
        &::before {
          font-size: 16px;
          content: "일정을 먼저 선택하세요";
        }
      }
    }
  }
}

/* 메인 화면 글씨 크기 수정 */
.visual,
.images {
  & .text {
    p {
      font-size: 1.4em;
    }
  }
}
.main {
  &.type2 {
    & .sect.end {
      & .right {
        & dl {
          dt {
            font-size: 16px;
          }
        }
      }
    }
  }
}

/* ============================================================
   달력(pignose) 커스텀 — calendar.css 에서 이관.
   퍼블리싱 재복붙에도 유지되도록 여기서 관리.
   ============================================================ */
.calendar .pignose-calendar {
  /* 슬롯 hover 시 헤더(z-index:20)보다 위로 — 안 그러면 맨 윗줄 슬롯 hover 가 헤더에 가림 */
  @media (min-width: 813px) {
    .pignose-calendar-unit-date:has(dl.schedule[data-date-label]:hover) {
      overflow: visible;
      z-index: 30;
    }
  }

  /* 주간 요일 라벨 — 컬럼 순서(nth-child)가 아니라 실제 날짜의 요일 클래스 기준 (오늘부터 시작해도 정확) */
  .weekly & .pignose-calendar-row > div {
    &.pignose-calendar-unit-sun > a:first-of-type::after {
      content: "일";
    }
    &.pignose-calendar-unit-mon > a:first-of-type::after {
      content: "월";
    }
    &.pignose-calendar-unit-tue > a:first-of-type::after {
      content: "화";
    }
    &.pignose-calendar-unit-wed > a:first-of-type::after {
      content: "수";
    }
    &.pignose-calendar-unit-thu > a:first-of-type::after {
      content: "목";
    }
    &.pignose-calendar-unit-fri > a:first-of-type::after {
      content: "금";
    }
    &.pignose-calendar-unit-sat > a:first-of-type::after {
      content: "토";
    }
  }

  /* 모바일 요일 라벨 — 동일하게 요일 클래스 기준 */
  @media (max-width: 812px) {
    .calendar:not(.range):not(.readonly)
      &:has(dl.schedule)
      .pignose-calendar-row
      > div {
      &.pignose-calendar-unit-sun > a:first-of-type::after {
        content: "일";
      }
      &.pignose-calendar-unit-mon > a:first-of-type::after {
        content: "월";
      }
      &.pignose-calendar-unit-tue > a:first-of-type::after {
        content: "화";
      }
      &.pignose-calendar-unit-wed > a:first-of-type::after {
        content: "수";
      }
      &.pignose-calendar-unit-thu > a:first-of-type::after {
        content: "목";
      }
      &.pignose-calendar-unit-fri > a:first-of-type::after {
        content: "금";
      }
      &.pignose-calendar-unit-sat > a:first-of-type::after {
        content: "토";
      }
    }
  }
}

/* 주간·월간 셀(모바일) — 날짜/요일/날씨 좌측 정렬.
   calendar.css 의 flex 유닛 justify-content:center 때문에 가운데로 몰려서 보완 */
@media (max-width: 812px) {
  #weeklyCalendar .pignose-calendar-unit-date {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  #weeklyCalendar .pignose-calendar-unit-date > a {
    align-self: flex-start !important;
    justify-content: flex-start !important;
  }
}

/* 월간 셀 날짜 표기 — 데스크톱은 일(6), 모바일은 월.일(07.06)로 주간과 통일.
   .m-day/.m-date 는 월간 셀(calendarMonthly.jsp)에만 있음 */
#weeklyCalendar .pignose-calendar-unit-date .m-date {
  display: none;
}
@media (max-width: 812px) {
  #weeklyCalendar .pignose-calendar-unit-date .m-day {
    display: none;
  }
  #weeklyCalendar .pignose-calendar-unit-date .m-date {
    display: inline;
  }
}

/* 모바일: cert 모달 '대상자 확인' 가로 넘침 방지.
   cert 모달 테이블은 (#regForm 과 달리) 모바일 세로 스택 규칙이 없어서 일반 테이블로 남아
   td 가 안 줄어들고, 주민번호 두 input(.inputs.nowrap)이 넘침.
   → 테이블을 세로 스택(th 위, td 아래 전폭) + input min-width:0 으로 축소 허용. */
@media (max-width: 812px) {
  .modal.certificate-common table,
  .modal.certificate-common tbody,
  .modal.certificate-common tr,
  .modal.certificate-common th,
  .modal.certificate-common td {
    display: block;
    width: 100%;
  }
  .modal.certificate-common .inputs.nowrap {
    min-width: 0;
  }
  .modal.certificate-common .inputs.nowrap > input {
    min-width: 0;
    flex: 1 1 0;
    width: auto;
  }
}