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

@charset "UTF-8";

/* ========== 1. 전역 변수 ========== */
:root {
  /* Colors */
  --main-light: #01aebb;
  --main: #724698;
  --main2: #00b2c2;
  --main3: #f8b62d;
  --type5: var(--mint-blue);
  --gray-light: #777;
  --gray-mid: #555;
}
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

body,
input,
textarea,
table,
button,
select,
optgroup,
option {
  letter-spacing: -0.04em;
  font-size: 20px;
}
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;
}
.gnb {
  .menu {
    font-size: 1em;
  }
}
.ui-item {
  &.prices {
    & li {
      & .item-name {
        & .name {
          > p {
            font-size: 1em;
          }
        }
      }
    }
  }
}
.selected-item {
  & > li {
    & .selected-info {
      h4 {
        font-size: 0.9em;
      }
      h3 {
        font-size: 1em;
      }
    }
    .quantity {
      a {
        width: 40px;
        height: 40px;
      }
      input {
        font-size: 1em;
      }
    }
  }
}
.reserv-ui {
  & .reserv-btns {
    a {
      font-size: 1em;
    }
  }
}
.calendar {
  .pignose-calendar {
    .pignose-calendar-top-date,
    .weekly-date {
      font-size: 1.2em;
    }
    .pignose-week-header {
      padding: 10px;
    }

    .weekly & {
      .pignose-calendar-row {
        .pignose-calendar-unit {
          > a {
            align-self: center;
            min-width: 100px;
            font-size: 1.2em;
            &::after {
              font-size: 1em;
            }
          }
          &.pignose-calendar-unit-disabled {
            &.today {
              a::before {
                font-size: 0.9em;
              }
            }
          }
        }
      }
      .element {
        padding: 10px;
      }
      .district {
        & .ctg {
          &.default {
            & .schedule-wrapper {
              & .schedules {
                font-size: 1em;
                & .schedule {
                  dt,
                  .remain {
                    width: 30px;
                    height: 30px;
                    font-size: 1rem;
                  }
                  .remain:has(.total) {
                    width: auto;
                    min-width: 58px;
                    padding: 0 8px;
                  }
                  .remain .total {
                    min-width: 0;
                    height: auto;
                    padding: 0;
                    border-radius: 0;
                    font-size: inherit;
                    line-height: inherit;
                    color: inherit;
                    background: none;
                  }
                  padding: 10px;
                  font-size: 1em;
                  dd.time {
                    font-weight: normal;
                    font-size: 1.2em;
                    gap: 0.5em;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.auth-banner {
  & .btnset {
    .btn {
      font-size: 0.9em;
    }
  }
}
ul.demical {
  & li {
    strong {
      font-weight: bold;
    }
  }
}
.join-member {
  .popup-content li > h2 {
    font-size: 0;
    line-height: 1.3;
    &:after {
      font-size: 1.2rem;
      letter-spacing: -0.05em;
      content: "충북도립파크골프장 이용 시 본인 확인이 필요합니다.";
      display: block;
    }
  }
}
.citizen:before {
  content: "충북";
}
.course-guide {
  --type1: #da1600;
  --type2: #00a1fd;
  --type3: #f4a302;
  --type4: var(--gray-white);
  --type5: #da1600;
  --course: 5;

  .course-card:nth-child(4) {
    .course-table-wrap {
      background-color: var(--gray-pale);
    }
    .hole-badge,
    .course-title {
      --color: #000;
      color: #fff;
    }
    .course-title {
    }
    .course-table {
      thead {
        th {
          color: #000;
        }
      }
    }
  }
}
.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;
          }
        }
      }
      .menu-n {
        ul {
          color: var(--gray-light);
          filter: brightness(1.3);
          li {
          }
        }
      }
      .right-menu {
        display: flex;
        gap: 14px;
      }
    }
  }
  .contents {
    padding-top: 0;
    padding-bottom: var(--safe-bottom);
  }
}

.gnb {
  transition: border-radius 0.3s;
  .menu .logo img {
    max-height: 46px;
  }
  .menu .menu-n {
    --menu-space: 40px;
  }
}
.calendar {
  .pignose-calendar {
    .weekly & {
      & .element {
        .ctg-name {
          display: none;
        }
        & .schedule-wrapper {
          .title {
            display: none;
          }
        }
      }
    }
  }
  &.readonly {
    .element {
      .ctg-name {
        font-size: 1.2rem;
      }
    }
    .schedule-wrapper {
      display: none;
    }
  }
}
.sect {
  & .head {
    &.copy {
      h4 {
        word-break: keep-all;
        line-height: 1.35;
        font-size: 1.2em;
        strong {
          position: relative;
          color: var(--black);
        }
      }
    }
  }
}
ul.notification {
  &.vertical {
    .notion & {
      --cell: 4;

      li .icon {
        font-size: 2.5em;
        @media (max-width: 812px) {
          width: 60%;
          font-size: 2.4em;
        }
      }
    }

    .s0101 & {
      --cell: 4;
    }
    > li {
    }
  }
}
.time-clock {
  & .infos {
    p {
      font-size: 1em;
      color: var(--gray-mid);
    }
  }
}
.gnb {
  --depth2Height: 120px !important;
  & .menu {
    & .menu-n {
      & > li {
        .depth2 {
          font-size: 18px;
        }
      }
    }
  }
}
.visual,
.images {
  --visual-heading-font-family: "EliceDigitalBaeum";
  --visual-heading-letter-spacing: 0;
  .text {
    font-size: 0.8em;
    h2 {
      font-weight: 500;
      line-height: 1.2;
    }
    .gradient-text {
      --main-gra: linear-gradient(
        to right,
        var(--main-light),
        var(--main),
        var(--mint-blue)
      );
    }
  }
  .links {
    .btn {
      .circle & {
        font-size: 1.2em;
        width: 140px;
        height: 140px;
      }
      &.secondary {
        background-color: var(--mint-blue);
      }
    }
  }
}
.sect.over {
  h1 {
    font-weight: 700;
  }
}
.calendar .district {
  & .ctg {
    &.default {
      & .schedule-wrapper {
        & .schedules {
          & .schedule {
            .time {
              .remain {
                font-size: 0.9em;
                padding: 8px 10px;
              }
              align-items: flex-start;
              flex-direction: column;
            }
          }
        }
      }
    }
  }
}
.auth-banner {
  .btnset {
    .btn {
      font-size: 1em;
      color: #fff;
      padding: 0.6em 1.2em;
      background-color: var(--main);
      border-radius: 5em;
      border: 0;
      transition:
        background-color 0.3s,
        color 0.3s;
      &:hover {
        background-color: var(--main-light);
        color: #fff;
      }
      &::after {
        display: none;
      }
    }
  }
}
.ui-sect {
  .ui-item {
    &.prices {
    }
  }
}
.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;
          }
        }
      }
    }
  }
}
.ui-item {
  &.prices {
    & li {
      .full & {
        &:only-child {
          .quantity {
            transform-origin: center right;
            transform: scale(1.2);
            @media (max-width: 812px) {
              transform: scale(1);
            }
          }
        }
      }
    }
  }
}
.images * {
  transition: none !important;
}
.images .swiper-button-prev,
.images .swiper-button-next {
  transition:
    transform 0.18s ease,
    opacity 0.18s ease,
    filter 0.18s ease,
    color 0.18s ease !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 {
      .links {
        gap: 0;
        width: 100%;
        .btn {
          border-radius: 0;
          aspect-ratio: initial;
          width: auto;
          height: auto;
          padding: 15px;
          flex-grow: 1;
          border-right: 0;
          gap: 8px;
          font-size: 15px;
        }
      }
    }
    h2 {
      font-size: 2.4em;
      line-height: 1.1;
    }
    p {
      display: none;
    }
  }

  .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 {
  .images .text {
    padding-bottom: 0;
  }
}
.list.horizon {
  &.prices.program {
    @media (max-width: 812px) {
      & li {
        & .go-btn {
          .now:not(.soldout) & {
            &::before {
              content: "등록접수";
            }
          }
        }
      }
    }
  }
}
.time-clock {
  gap: 3em;
}
@media (max-width: 812px) {
  body,
  input,
  textarea,
  table,
  button,
  select,
  optgroup,
  option {
    letter-spacing: -0.04em;
    font-size: 17px;
  }
  table {
    th,
    td {
      font-size: 14px;
      padding: 15px;
    }
  }
  .course-img {
    img {
      width: 700px;
      max-width: initial;
    }
  }
  .selected-item {
    & > li {
      & .selected-info {
        h4 {
          font-size: 1.1em;
        }
      }
    }
  }
  .gnb {
    .tabs {
      font-size: 1.1em;
    }
    .menu {
      .menu-all {
        .menu-n {
          padding: 30px;
          font-size: 1.2em;
        }
      }
      li.logo {
        img {
          max-height: 55%;
        }
      }
    }
  }
  .calendar.readonly {
    .element {
      .ctg-name {
        font-size: 14px;
        &::after {
          display: none;
        }
      }
    }
  }
  .time-clock-set {
    & > div {
      & .time-clock {
        justify-content: space-around;
        align-items: flex-start;
        > div {
          .clock-frame {
            --size: 120px;
          }
          flex-direction: column;
          align-items: center;
          text-align: center;
          .infos {
            text-align: center;
          }
        }
      }
    }
  }
}
/* 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;
    }
  }
}