/* =================================================================
<ito-citytour/current.css>
- 이토시티투어 현재 스타일
- 순서 및 분류에 따라 그룹화
- SCSS 중첩 구조로 재작성
================================================================= */

@charset "UTF-8";

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');


:root {
  /* Colors */
  --green-color: #009944;
  --main-color: #00a0dc;
  --main-light: #37c8ff;
  --main-light2: #00ffd5;
  --main-deep: #0073a1;
  --mint-blue: #00c2d5;
  --blue: #0068ac;
  --main-gra: linear-gradient(135deg, var(--main-light2), #6d49ff, var(--main-color));
  --main-gra-rev: linear-gradient(315deg, var(--main-light2), #6d49ff, var(--main-color));

  --main2: #db471d;

  /* Course Types */
  --type1: #00a0dc;
  --type2: #3069b3;
  --type3: #d3b47c;

  /* Layout */
}

@font-face {
  font-family: 'Cafe24SurroundAir';
  src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24SsurroundAir.woff') format('woff');
  font-weight: normal;
  font-display: swap;
}
body,
input,
textarea,
table,
button,
select,
optgroup,
option,
html {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', 'Pretendard', sans-serif;
}
.main {
  position: static;
  background-color: transparent;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;

  .scroll-btn {
    display: none;
  }
  .visual {
    .links {
      .btn.gradient {
        /* animation: blink 0.5s infinite alternate; */
      }
    }
  }
  .footer {
    position: absolute;
    bottom: 0;
    color: #fff;
    z-index: 2;
    background-color: transparent;
    border: 0;
    width: 100%;
    pointer-events: none;
  }
  .contents {
    padding-top: 0;
    padding-bottom: var(--safe-bottom);
  }
}
.s0103 {
  .contents {
    & .static {
      & .irregular {
        &:is(.tri) {
          & > div {
            & + div + div {
              margin-top: 0px;
              margin: auto;
            }
          }
        }
      }
    }
  }
}
.wrap {
  &:has(.head .sect01) {
    --main-color: var(--type1);
  }
  &:has(.head .sect02) {
    --main-color: var(--type2);
  }
  &:has(.head .sect03) {
    --main-color: var(--type3);
  }
}
.contents {
  & .static {
    & .irregular {
      & > div {
        &:nth-child(1) {
          .head h1 {
            --color: var(--type1);
          }
        }
        &:nth-child(2) {
          .head h1 {
            --color: var(--type2);
          }
        }
        &:nth-child(3) {
          .head h1 {
            --color: var(--type3);
          }
        }
        .head {
          h1 {
            margin-bottom: 0.3em;
            span {
              color: var(--color);
            }
          }
          .sect-logo {
            position: absolute;
            top: 36px;
            right: 0;
            height: 120px;
          }
        }
        & .img {
          position: relative;
          border-radius: 0;
          img.sect-logo {
            position: absolute;
            width: 80px;
            height: auto;
            top: 10px;
            left: 10px;
            z-index: 3;
            padding: 15px;
            background-color: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(20px);
          }
          img {
            border-radius: 0;
          }
        }
      }
    }
  }
}
.static .sect.over {
  & .head {
    position: relative;
    &.copy {
      h1 {
        span {
          color: var(--color);
        }
      }
      .feat {
        position: absolute;
        right: 0;
        top: 12px;
        margin-top: 0;
        flex-wrap: nowrap;
        p {
          font-size: 13px;
        }
        @media (max-width: 812px) {
          position: static;
          margin-top: var(--padding);
          font-size: 0.9em;
        }
      }
    }
  }
}
.calendar {
  .ctg {
    position: relative;
  }
  .schedule-wrapper {
    position: static;
    .schedules.periods {
      border-radius: 5em;
      position: absolute;
      top: 6px;
      right: 5px;
      .schedule.periods-all {
        border-radius: 5em;
        padding: 5px 15px;
      }
    }
  }
}
/* .wrap {
  .reserv-ui {
    .choose {
      .opt-sect01 {
      }
    }
  }
  &:has(.modal .calendar .schedule.sect01.active) {
    .reserv-ui {
      .choose {
        .opt-sect01,
        .opt-other {
          display: block;
        }
      }
    }
  }
  &:has(.modal .calendar .schedule.sect05.active) {
    .reserv-ui {
      .choose {
        .opt-sect05,
        .opt-other {
          display: block;
        }
      }
    }
  }
} */
@keyframes blink {
  0% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(1.2);
  }
}

.gnb {
  .menu {
    .logo {
      font-family: 'Cafe24SurroundAir';
      img {
        /* GNB 로고 확대: 36px → 50px (비율 유지, width: auto 기본값)! */
        max-height: 50px !important;
        width: auto;
      }
    }
    .menu-n {
      --menu-space: 55px;
      > li a {
        text-align: left;
        white-space: initial;
      }
      .depth2 {
        white-space: nowrap;
      }
      > li.active a {
        background: var(--main-gra);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation:
          bokemove 10s linear infinite alternate,
          blink 1s infinite alternate;
      }
    }
  }
}
.contents {
  & .static {
    & .irregular {
      & > div {
        .head {
          h1 {
            font-size: 1.8em;
            font-weight: 800;
          }
        }
      }
      @media (max-width: 812px) {
        padding: 0;
        border: 0;
        &.floor {
          gap: 10px;
          padding: 10px;
          background-color: var(--gray-pale);
          > div {
            background-color: var(--white);

            border-radius: 12px;
            flex-direction: column;
            gap: 2em;
            padding: var(--sp);
            & + & {
              margin-top: 0;
            }
            &:not(:has(.img)) .facility,
            .facility {
              --cell: 2;
            }
            .img {
              width: 100%;
              aspect-ratio: 16/9;
            }
          }
          + .sect {
            margin-top: 10px;
            border: 0;
          }
        }
        > div {
          overflow: visible;
          padding: 0;
          width: 100%;
          --sp: 32px;
          .col {
            width: 100%;
          }

          &:nth-child(odd) {
            .col {
              padding-left: var(--sp);
            }
            .img {
              aspect-ratio: 1/1;
            }
          }
          &:nth-child(even) {
            .col {
              padding-right: var(--sp);
              .head {
                padding-left: var(--sp);
              }
            }
            .img {
              aspect-ratio: 1/1;
            }
          }
          &.last {
            .col {
              flex-direction: column;
              width: 100%;
              .head {
                padding: var(--sp);
                padding-left: 0;
                width: 100%;
              }
            }
            .img {
              aspect-ratio: 1/1;
              width: 100%;
            }
          }
          & + & {
            border: 0;
            margin-top: 36px;
          }
        }
      }
    }
  }
}
.ui-item.prices {
  flex-direction: row;
  li {
    width: 33%;
    flex-grow: 1;
    flex-shrink: 0;
    .item-name {
      flex-direction: column;

      .price-multi {
        flex-grow: 0;

        .price {
          > p {
            width: fit-content;
          }
          &:nth-child(2) {
            p {
              color: var(--blue);
            }
          }
        }
      }
    }
  }
  &.rental {
    .item-name {
      flex-wrap: wrap;
      flex-direction: row;
      .price-multi {
        row-gap: 5px;
        flex-wrap: wrap;
        h5 {
          width: 100%;
        }
      }
    }
  }
}
/* .time-clock {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

  > div {
    &.holiday {
      --main-color: var(--red);
      .clock {
        background: conic-gradient(from 0deg, color-mix(in srgb, var(--red) 50%, transparent) 0%, var(--white) 100%);
        &::after {
        }
      }
    }
    &.open .clock {
      background: conic-gradient(from -90deg, var(--main-light2) 0%, var(--main-color) 25%, var(--white) 25% 100%);
    }
    &.close .clock {
      background: conic-gradient(
        from 0deg,
        var(--main-light2) 0%,
        var(--main-color) 75%,
        var(--red) 75%,
        var(--red) 82.5%,
        var(--red) 82.5%,
        var(--white) 82.5%,
        var(--white) 75% 100%
      );
    }
    .clock-frame {
      .clock {
        &::before {
          mix-blend-mode: overlay;
        }
      }
    }
  }
} */
.calendar {
  .ctg:only-child {
    .schedule-wrapper {
      background: transparent;
      padding: 0;
    }
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* pc�쟾�슜 */
@media (min-width: 813px) {
  /* GNB 硫붾돱�뿉 留덉슦�뒪 �샇踰� �떆 諛곌꼍 �뒪���씪 �쟻�슜 */
  .main .gnb:has(.menu-n li:hover) {
  }
}
@media (max-width: 812px) {
  body,
  html {
    padding: 0;
  }

  html:has(.main) {
    &,
    body,
    .visual {
      /* 紐⑤뱺 異뺤뿉�꽌 諛붿슫�뒪 諛� �깉濡쒓퀬移� 諛⑹� */
      -webkit-overflow-scrolling: auto; /* iOS Safari �깂�꽦 �뒪�겕濡� 鍮꾪솢�꽦�솕 */
      height: 100dvh; /* 理쒖떊 釉뚮씪�슦�� */
      height: -webkit-fill-available; /* iOS Safari */
      min-height: 0; /* min-height 異⑸룎 諛⑹� */
      overflow: hidden;
      flex: 1;
    }
  }

  .main {
    padding: 0;
    position: relative;
    width: 100%;
    height: 100%;
    .gnb {
      &.active {
        .coll {
          color: initial;
          background-color: transparent;
        }
      }
    }
    .visual .text p {
      br {
        display: none;
      }
    }
  }
  .contents {
    .header {
      width: initial;
    }
  }
  .ui-item.prices {
    display: grid;
    grid-template-columns: 1fr;
    .quantity {
      flex-grow: 1;
    }
    > li {
      position: relative;
      padding: 24px 15px;
      width: 100%;
      .item-name {
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: row;
        .name {
          h4 {
            font-size: 15px;
          }
        }
        .ms-icon {
          margin: 0;
        }
      }
    }
  }
}

/* 파노라마 페이지 시간표 */
.time-clock-set.col {
  .table.allborder {
    width: fit-content;
  }

  .time-clock {
    --size: 110px;
  }

  .allborder {
    margin-top: 30px;
  }

  .schedule-table {
    display: flex;
    margin: -1px;

    .schedule-group {
      display: flex;
      flex-direction: column;
      min-width: 0;
      flex: 1 1 0;

      .schedule-cell--head {
        border-left: 1px solid var(--gray-border);
      }
    }

    .schedule-group--4 {
      flex: 4 1 0;
    }

    .schedule-group--2 {
      flex: 2 1 0;
    }

    .schedule-times {
      display: flex;
      width: 100%;
    }

    .schedule-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px 12px;
      text-align: center;
      line-height: 1.4;
      border-bottom: 1px solid var(--gray-border);
      box-sizing: border-box;
      min-width: 0;
    }

    .schedule-cell--head {
      background-color: color-mix(in srgb, var(--main) 5%, transparent);
      font-weight: 500;
      font-weight: bold;
      color: var(--gray-mid);
      border-left: 1px solid var(--gray-border);
    }

    .schedule-times .schedule-cell {
      flex: 1 1 0;
      border-right: 1px solid var(--gray-border);
    }
  }

  @media (max-width: 812px) {
    .allborder {
      margin-top: 20px;
    }

    flex-direction: column;
    .schedule-table {
      flex-direction: column;
    }

    .schedule-group {
      flex-basis: auto;
      width: 100%;
    }

    .schedule-times {
      flex-wrap: wrap;
    }

    .schedule-times .schedule-cell {
      min-width: 25%;
    }
  }
}