/* =================================================================
<2000-bandabi/current.css>
- 2000-bandabi 현재 스타일
- 순서 및 분류에 따라 그룹화
- SCSS 중첩 구조로 재작성
================================================================= */

@charset "UTF-8";

/* ========== 1. 전역 변수 ========== */
:root {
  /* Colors */
  --main: #72bf44;
  --main-light: #b5d334;
  --main2: #00b2c2;
  --main3: #f8b62d;
  --type1: #e53935;
  --type2: var(--mint-deep);
  --type3: #8e24aa;
  --type4: #ff8000;
  --type5: #1565d8;
  --type6: #e13ba7;
}
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@font-face {
  font-family: 'AliceDigitalLearning';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_elice@1.0/EliceDigitalBaeum.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AliceDigitalLearning';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_elice@1.0/EliceDigitalBaeum-Bd.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
body,
input,
textarea,
table,
button,
select,
optgroup,
option {
  letter-spacing: -0.04em;
  font-family: 'Open Sans', 'AliceDigitalLearning';
}
h1,
h2,
h3,
h4 {
  letter-spacing: -0.03em;
  line-height: 1.2;
}

html,
body {
  margin: 0;
  padding: 0;
  letter-spacing: -0.05em;
}
.material-icons-two-tone {
  font-size: inherit;
}
.main {
  position: static;
  background-color: transparent;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;

  .gnb {
    color: #fff;
    background-color: transparent;
    overflow: initial;
    .menu {
      .logo {
        img {
          &.logo-ori {
            display: none;
          }
          &.logo-w {
            display: block;
          }
        }
      }
      .right-menu {
        display: flex;
        gap: 14px;
        width: auto;
      }
    }
  }
  .contents {
    padding-top: 0;
    padding-bottom: var(--safe-bottom);
  }
}
.reserve-map {
  aspect-ratio: 2/1;
  overflow: hidden;
  @media (max-width: 812px) {
    aspect-ratio: 1/1.7;
  }
}
.gnb {
  transition: border-radius 0.3s;
  .menu .logo img {
    height: 40px;
  }
  .menu .menu-n {
    --menu-space: 40px;
  }
}

ul.notification {
  &.vertical {
    --cell: 5;
    .s0101 & {
      --gap: 12px;
      --cell: 6;
      li .icon {
        width: 60%;
      }
    }
  }
  &.must-rules {
    --cell: 7;
    --gap: 10px;
    position: relative;
    margin-bottom: calc(1.5 * var(--padding));

    > li {
      background: color-mix(in srgb, var(--red) 5%, var(--white) 100%);

      .icon {
        color: var(--red);
        width: 60%;
      }
      h4 {
        line-height: 1.25;
        font-size: 1em;
      }
    }
  }
}
.visual,
.images {
  --visual-heading-font-family: 'AliceDigitalLearning';
  --visual-heading-letter-spacing: 0;
  .text {
    h2 {
      line-height: 1.2;
    }
    .gradient-text {
      --main-gra: linear-gradient(to right, var(--main-light), var(--main), var(--mint-blue));
    }
  }
  .links {
    .btn {
      &.secondary {
        background-color: var(--mint-blue);
      }
    }
  }
}
.sect.over {
  h1 {
    font-weight: 700;
  }
}
.ui-sect {
  .ui-item {
    &.prices {
    }
  }
}
table {
  tbody th {
    white-space: nowrap;
  }
}
.time-clock {
  flex-wrap: nowrap;
  width: auto;
  .weekend {
    --main-light: var(--orange);
    --main: var(--red);
    --main: var(--red);
  }
  @media (max-width: 812px) {
    &.horizon > div {
      width: calc(50% - 1em);
    }
  }
}
.list {
  &.prices {
    .subinfo {
      > li {
        &.key-pricing {
          strong {
            display: none;
          }
          .pricing {
            font-size: 1.2em;
          }
        }
      }
    }
    & li {
      & .infos {
        & .info {
          h4.category {
            display: none;
          }
          h2 {
            color: var(--main-deep);
          }
        }
      }
    }
  }
}
.images * {
  transition: none !important;
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.list.swim {
  .infos .info:has(.data-time) {
    > p {
      display: none;
    }
  }
}
.contents {
  & .static {
    & .irregular {
      &:is(.tri) {
        & > div {
          & h2 {
            font-size: 1.3em;
          }
        }
      }
    }
  }
}
/* 모바일 */
@media (max-width: 812px) {
  .visual {
    .text {
      h2 {
        font-size: 2.6em;
        line-height: 1.1;
      }
    }
  }
  .list.vertical {
    &.program > li {
      --cell: 2;
      .thumb {
        --ratio: 4/3;
      }
    }
  }
  .static .sect {
    & .head.copy {
      & h4 {
        font-size: 1.15em;
        br {
          display: block;
          line-height: 1.4;
        }
      }
    }
  }
}

.calendar {
  .district {
    & .ctg {
      & .ctg-name {
        .weekly &::after {
          font-size: 14px;
          font-weight: 500;
        }
      }
    }
  }
  .pignose-calendar {
    .element {
      font-weight: 500;
      .district {
        .ctg-name {
          color: var(--map-color);
          &::after {
            display: block;
          }
        }
        .schedule-wrapper {
          &:only-of-type {
            .title::before {
              display: none;
            }
          }
          /* flex-direction: column;
          align-items: flex-start;
          gap: 5px;

          .schedules {
            flex-direction: column;
            width: 100%;
            .schedule {
              width: 100%;
              max-width: 100%;
            }
          } */
        }
      }
    }
  }
}
.ui-item {
  &.prices {
    display: flex;
    flex-direction: row;
    @media (max-width: 812px) {
      flex-direction: column;
    }
    & li {
      & .item-name {
        & .price-multi {
          .oneday-complex & {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            row-gap: 12px;
          }
          gap: 0;
          .price {
            flex-grow: 1;
          }
          row-gap: 4px;
          > h5 {
            width: 100%;
          }

          & + & {
            margin-top: 24px;
          }
        }
      }
    }
  }
  .images .text {
    padding-bottom: 0;
  }
}
.list.horizon {
  &.prices.program {
    @media (max-width: 812px) {
      & li {
        & .go-btn {
          .now:not(.soldout) & {
            &::before {
              content: '등록접수';
            }
          }
        }
      }
    }
  }
}
/* pc전용 */
@media (min-width: 813px) {
  /* GNB 메뉴에 마우스 호버 시 배경 스타일 적용 */
  .gnb:has(.menu-n li:hover) {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
  }
  .full .reserv-ui {
    ul.total.pay {
      background: #fff;
      height: 60px;
    }
  }
}
@media (max-width: 812px) {
  .allborder {
    overflow-x: auto;
    table {
      width: 200%;
    }
  }
  ul.notification.vertical.must-rules {
    width: 100%;
    --cell: 3;

    align-items: stretch;
    li {
      width: calc(33.3% - 7px);
    }
  }
  .main {
    &.type2 {
      .visual {
        position: fixed;
      }
    }
  }
}


/* =================================================================
 예약(충주 groupCode) 화면 전용 유지 블록
 - 퍼블 ecofarm current.css에는 없고, 현행 예약 화면이 의존하는 규칙만 남겼다.
 - 화성에코팜 예약 화면 작업 시 퍼블 기준으로 다시 정리한다.
================================================================= */

.map {
  .pin {
    transform: scale(1.2);
  }
}

.bbq.full {
  .selected-item {
    & > li {
      p.price {
        display: none;
      }
      & .selected-info {
        h3 {
          &::before {
            content: '바베큐존 ';
          }
        }
      }
    }
  }
}

.organic-program {
  --type1: var(--main);
  .sect01 {
    --map-color: var(--main);
    --color: var(--main);
  }

  .list.horizon {
    &.prices {
      &:not(.program):has(li .subinfo) {
        .thumb {
          aspect-ratio: 1/1;
          grid-row: 1/1;
        }
      }
    }
  }
  .calendar .pignose-calendar {
    .weekly & {
      & .element {
        & .district {
          .weekly & {
            @media (min-width: 812px) {
              .ctg {
                flex-direction: row;
                padding-top: 35px;
                .ctg-name {
                  width: 100%;
                  position: absolute;
                  top: 5px;
                }
                .schedule {
                  width: fit-content;
                }
              }
            }
          }
        }
      }
    }
  }
}

.organic-program {
  .list.horizon {
    &.prices.program {
      & > li {
        & .thumb {
          height: 100%;
          border-radius: 18px;
          img {
            object-fit: cover;
            height: 100%;
          }
        }
      }
    }
  }
}

.organic-rent {
  .list.vertical.program.prices {
    --cell: 3;
    .subinfo {
      li {
        .key-pricing,
        &.key-pricing {
          strong {
            display: none;
          }
        }
      }
    }
  }
}

.geonji-range {
  .calendar .district {
    & dl.schedule,
    .remain {
      dt {
        font-size: 0;
        border-radius: 6px;

        &::before {
          content: 'circle';
          font-family: 'Material Symbols Sharp';
          font-size: 1rem;
        }
      }
    }
    .schedule.disable {
      border: 0;

      dt {
        &::before {
          content: 'close';
          font-family: 'Material Symbols Sharp';
          font-size: 1rem;
        }
      }
    }

    @media (max-width: 812px) {
      display: none;
    }
  }
}

.facility-map {
  margin-top: 40px;

  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.calendar .district dl.schedule:has(.schedule-go-next) {
  overflow: visible !important;
  z-index: 6 !important;
}

.pignose-calendar-unit-date:has(.schedule-go-next) {
  overflow: visible !important;
  z-index: 5 !important;
}

.calendar {
  .district {
    & .ctg {
      .bbq & {
        flex-direction: row;
        flex-wrap: wrap;
        .ctg-name {
          width: 100%;
        }
        .schedule {
          width: calc(25% - 4px);
          text-align: center;
          justify-content: center;
          align-items: center;
        }
        @media (max-width: 812px) {
          .schedule {
            margin: 0;
          }
        }
      }
      & .ctg-name {
        .weekly &::after {
          font-size: 14px;
          font-weight: 500;
        }
      }
    }
  }
  .pignose-calendar {
    .element {
      font-weight: 500;
      .district {
        .ctg-name {
          color: var(--map-color);
          &::after {
            display: block;
          }
        }
        .schedule-wrapper {
          &:only-of-type {
            .title::before {
              display: none;
            }
          }
          /* flex-direction: column;
          align-items: flex-start;
          gap: 5px;

          .schedules {
            flex-direction: column;
            width: 100%;
            .schedule {
              width: 100%;
              max-width: 100%;
            }
          } */
        }
      }
    }
  }
}

@media (min-width: 813px) {
  .calendar .district .ctg.program-mode dl.schedule[data-date-label] {
    position: relative;
    overflow: visible;
    z-index: 2;
  }
  .calendar .district .ctg.program-mode dl.schedule:not(.combine)[data-date-label]:hover {
    border-color: var(--map-color, var(--main));
  }
  .calendar .district .ctg.program-mode dl.schedule:not(.combine)[data-date-label]:hover::after {
    content: attr(data-date-label);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    border-radius: 20px;
    padding: 5px 10px;
    background-color: color-mix(in srgb, var(--map-color, var(--main)) 100%, #000 20%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #fff;
    line-height: 1;
    font-size: 13px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
  }
}