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

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* ========== 1. 전역 변수 ========== */
:root {
  /* Colors */
  --green-color: #009944;
  --main: #de4f2d;
  --main-color: #de4f2d;
  --main-light: #fa7251;
  --main-deep: #9a2407;
  --mint-blue: #00c2d5;
  --blue: #1c61a6;
  --main-gra: linear-gradient(to left, #fa7251, #de4f2d);
  --main-gra-rev: linear-gradient(to right, #fa7251, #de4f2d);
  --main2: #db471d;

  /* Course Types */
  --type1: #de4f2d;
  --type2: #de4f2d;
  --type3: #de4f2d;
  --type4: #de4f2d;
  --type5: #de4f2d;
  --type6: #de4f2d;
  --type7: #de4f2d;

  /* Layout */
  --width: 1400px;
  --max-w: 1400px;
}

/* ========== 2. 전역 레이아웃 ========== */

.con {
  max-width: var(--width);
  margin: auto;
  width: 100%;
  &:has(.routes) {
    --gap: 16px;
    --cell: 5;
  }
  .footer {
    border: 0;
  }
}

.bCon {
  display: flex;
}
.header {
  .header_logo img {
    height: 40px;
  }
}

.gnb .menu li.logo img {
  height: 30px;
}

.lnb_con > ul > li a.impact {
  font-weight: bold;
  white-space: nowrap;
  font-size: 1.8rem;
  padding: 0.8em 1.2em;
}

.middle {
  height: auto;
  align-items: stretch;
}

.introbox {
  height: initial;
  margin-top: 0;
}
.footer {
  border-top: 1px solid var(--gray-border);
  .main & {
    border: 0;
  }
}
.footer_link {
  padding: 20px 0 40px 0;
  border-top: 0;
  .guide {
    max-width: var(--width);
    margin: auto;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4em;
    row-gap: 1em;
    h2 {
      font-size: 1.3em;
      white-space: nowrap;
    }
    .guide-call {
      display: flex;
    }
  }
}
.reserv-ui {
  .cs-info {
    .icon {
      filter: hue-rotate(180deg);
    }
  }
}
.footer_gov_link .exp {
  max-width: var(--max-w);
  margin: auto;
  padding: 0 2.5%;
}

ul.guide-call {
  justify-content: space-between;
  width: 100%;
  li {
    color: var(--gray-light);
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2em;
    font-weight: bold;
    font-size: 0.9em;
    width: auto;
    &:first-child {
      width: auto;
    }
    > strong {
      padding-left: 0;
      font-size: 1.4em;
      font-weight: 300;
      font-family: 'Pretendard';
      color: initial;
    }
  }
}

/* ========== 3. 주요 컴포넌트 ========== */

/* 코스 목록 (.routes) */
.routes {
  .main-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    > li {
      width: calc(100% / var(--cell) - (var(--gap) - var(--gap) / var(--cell)));
      border-radius: 12px;
      background-color: var(--gray-pale);
      overflow: hidden;
      flex-grow: 0;
      display: flex;
      flex-direction: column;
      position: relative;

      .thumb {
        height: 180px;
        object-fit: cover;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .infos {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        .info {
          padding: 1.8em 1.5em;
          flex-grow: 1;
          line-height: 1.4;
          h2 {
            font-size: 1.4em;
          }
          h4.category {
            color: var(--main-deep);
          }
          h5 {
            font-weight: normal;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.2em;
            font-size: 1em;
          }
          .operation {
            display: flex;
            flex-direction: column;
            gap: 0.5em;
            flex-wrap: wrap;
            row-gap: 0;
          }
          .time {
            font-weight: 300;
            font-size: 1.3em;
          }
        }
      }

      /* 순환 코스 */
      &.circluar {
        --cell: 2;
        flex-grow: 1;
        width: calc(100% / var(--cell) - (var(--gap) - var(--gap) / var(--cell)));
        .thumb {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          img {
            transition: 2s;
            width: 100%;
            height: 100%;
          }
        }
        &:hover {
          .thumb {
            img {
              width: 130%;
              height: 130%;
            }
          }
        }
        .infos {
          position: absolute;
          width: 100%;
          left: 0;
          bottom: 0;
          background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
          color: #fff;
          .info {
            display: flex;
            justify-content: space-between;
            align-items: center; /* RFP 스타일과 맞춤 */
            h4.category {
              color: var(--main2);
            }
            .time {
              font-size: 1.5em;
            }
          }
        }
      }

      /* 팝업존 박스 */
      &.popupzone_box {
        --cell: 2;
        background: none;
        max-width: initial;
        width: 40%;
        flex-grow: 1;
        .list {
          display: flex;
          aspect-ratio: 6.4/4;
          flex-wrap: nowrap;
          overflow: hidden;
          > li {
            display: block;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }
      }

      /* 안내 가이드 */
      .guide {
        background-color: transparent;
        border-radius: 12px;
        text-align: center;
        gap: 1em;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
        h3.intro_ttl {
          color: var(--orange);
          font-size: 1.6em;
        }
        .btn.fare {
          padding: 12px 20px;
          display: flex;
          font-size: 1.1rem;
        }
        .numberInfo {
          display: flex;
          flex-direction: column;
          gap: 0.7em;
        }
        .customer_num.sub {
          display: flex;
          flex-direction: column;
          font-size: 1.5em;
          font-weight: bold;
          span {
            font-size: 0.8em;
          }
        }
      }

      /* 안전수칙 */
      &.safety {
        background: rgba(255, 189, 22, 0.2);
        width: 28%;
      }
      &:nth-child(3):has(.guide) {
        background: rgba(255, 189, 22, 0.2);
        width: 24.5%;
      }
    }
  }

  /* RFP 스타일 (routes.rfp) */
  &.rfp .main-items > li {
    &.circluar {
      height: auto;
      aspect-ratio: 16/11;
      .infos {
        backdrop-filter: none;
        flex-direction: row;
        align-items: center;
        padding: 3em 1.5em 1.5em;
        .info {
          padding: 0;
          cursor: pointer;
          .name {
            display: flex;
            align-items: center;
            gap: 0.3em;
            &::before {
              content: 'cycle';
              font-family: 'Material Symbols Sharp';
              font-size: 1.8em;
              font-weight: 400;
            }
          }
          h2 {
            font-size: 1.8em;
          }
        }
        .btns {
          margin: 0;
          font-size: 1.3em;
          gap: 0.5em;
          display: flex;
          gap: 2em;
          a {
            border: none;
            height: fit-content;
            border-radius: 4px;
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: bold;
            &:hover {
              color: var(--main-light);
              text-shadow: none;
            }
          }
        }
      }
      &.theme .infos .info .name::before {
        content: 'category';
      }
    }
    &:has(.guide) {
      width: 20%;
    }
  }
}

.main-items {
  /* .list.vertical styles moved here */
  li.full .infos {
    align-items: center;
  }
}
.main-items.prices > li {
  .thumb {
    border-radius: 8px;
  }
}
.main-items.row2.prices li .infos .price-multi {
  justify-content: space-between;
  gap: 0;
  padding-right: 2em;
  .price dl {
    dd {
      font-size: 1.15em;
      white-space: nowrap;
      &.before {
        color: var(--gray-light);
        margin-left: 1em;
        text-decoration: line-through;
      }
    }
  }
}

/* 팝업존 (.popupzone) */
.popupzone {
  margin-top: 0;

  &.swiper {
    width: 100%;
    height: 100%;
    aspect-ratio: 6.4 / 4;
    border-radius: inherit;
    overflow: hidden;
  }

  .swiper-wrapper,
  .swiper-slide {
    height: 100%;
  }

  .swiper-wrapper {
    align-items: stretch;
  }

  .swiper-slide {
    display: flex;

    a {
      display: block;
      width: 100%;
      height: 100%;
    }

    img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }
  }
}
.popupzone_box {
  position: relative;
  .box.top {
    position: absolute;
    justify-content: center;
    z-index: 10;
    top: 16px;
    right: 16px;
  }
  ul.control {
    display: flex;
    align-items: center;
    gap: 6px;

    li {
      a {
        /* background-color: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px); */
        display: inline-flex;
        align-items: center;
        padding: 5px;
        border-radius: 999px;
        opacity: 0.6;
        &::before,
        &::after {
          width: 2px;
        }
        .text {
          font-size: 0;
        }
        .material-symbols-sharp {
          font-size: 1.3em;
          font-variation-settings: 'FILL' 1;
        }
      }

      &.stop {
        a {
          .is-play {
            display: none;
          }
        }

        &.is-paused {
          a {
            .is-pause {
              display: none;
            }

            .is-play {
              display: inline-flex;
            }
          }
        }
      }
    }
  }
}
.middle.popupzones {
  gap: var(--gap);
  display: flex;
  justify-content: space-between;
  padding: var(--gap) 0 0 0;
  > div.popupzone_box {
    width: 50%;
    flex-grow: 1;
  }
  .others {
    width: calc((100% - 640px) / 2);
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 3em;
    img {
      max-width: 100%;
      width: 100%;
    }
    .text {
      flex-grow: 1;
      .title {
        margin-bottom: 0.5em;
        font-size: 1.2em;
        :where(h2, h3, h4) {
          font-weight: 900;
          line-height: 1.2;
        }
        h2 {
          font-size: 1.7em;
        }
      }
      > p {
        mix-blend-mode: multiply;
        color: #666;
      }
    }
    &.vt {
      padding: 2em;
      .text {
        text-align: center;
      }
      img {
        width: 80%;
      }
    }
    &.hr {
      padding: 2em;
      width: calc(50% - 8px);
      display: flex;
      flex-direction: row;
      .text .title {
        font-size: 1em;
      }
      img {
        flex-shrink: 1;
      }
      &.parking img {
        width: 35%;
      }
      &.circ img {
        width: 40%;
      }
    }
    &.parking {
      background-color: #dff6ff;
      .title {
        color: #00a1b7;
      }
    }
    &.circ {
      background-color: #f9f3eb;
      .title {
        color: #e09a20;
      }
    }
  }
}

/* 협업 섹션 (.collabo) */
.collabo {
  --main-color: #96856e;
}
.sect.collabo {
  display: flex;
  gap: 3em;
  padding: 2em;
  background-color: #fbf8f5;
  border-radius: 12px;
  margin-top: var(--padding);

  h3 {
    color: var(--main-color);
  }
  h4 {
    margin-bottom: 4px;
  }
  p.em {
    color: var(--main-color);
    margin: 15px 0;
  }
  .logos {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: 16px;
    img {
      max-height: 24px;
    }
    .ito {
      max-height: 30px;
    }
  }
  .img {
    width: 40%;
    flex-shrink: 0;
    flex-grow: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  ul.demical {
    gap: 0.1em;
  }
}

/* 안전수칙 (.safety) */
.safety {
  background: rgba(255, 189, 22, 0.2);
  color: #000;
  width: 28%;
  display: flex;
  flex-direction: column;
  .title {
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    flex-grow: 1;
    color: var(--main2);
    overflow: hidden;
    justify-content: center;
    h1 {
      font-weight: 900;
      width: 60%;
      line-height: 1;
      flex-shrink: 0;
      transition: 0.3s;
    }
    .img {
      flex-shrink: 1;
      width: 20%;
      display: flex;
      transition: 0.3s;
      img {
        height: 50px;
        max-width: initial;
      }
      &.left {
        flex-direction: row-reverse;
      }
    }
  }
  &:hover .title h1 {
    width: 49%;

    overflow: hidden;
  }
  ol {
    padding: 0 1.5em 1.5em;
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    counter-reset: numb;
    font-size: 0.92em;
    > li {
      display: flex;
      gap: 0.3em;
      &::before {
        counter-increment: numb;
        content: '' counter(numb) '.';
        color: var(--main2);
      }
    }
  }
  .customer_txt {
    opacity: 0.6;
  }
}

/* ========== 4. 기타 및 개별 스타일 ========== */
.co-name::before {
  content: '인천';
}

.sub .detail .detail-contents {
  .sect.sight .map-area {
    height: 600px;
  }
  .sect .map-picker .option.color-var {
    justify-content: flex-start;
    margin-top: -1.2em;
  }
}

.section .overview .subscript {
  width: 80%;
}

.workingday {
  background: #de4f2d;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 0.7em;
  vertical-align: text-bottom;
}

.material-symbols-sharp {
  font-size: inherit;
  font-weight: inherit;
}
.btn {
  &.circle {
    &.overlay {
      top: 10%;
    }
  }
}
/* ========== 5. 반응형 (@media) ========== */
@media (max-width: 1400px) {
  :root {
    --width: 1300px;
  }

  .con {
    font-size: 0.9rem;
    .safety {
      font-size: 0.95em;
      & .title {
        h1 {
          font-size: 2em;
        }
      }
    }
  }
}
@media (max-width: 1300px) {
  :root {
    --width: 1200px;
  }
}
@media (max-width: 812px) {
  :root,
  html {
    --width: initial;
    --max-width: initial;
  }
  .header_logo img {
    height: 30px;
  }
  .gnb .menu li.logo img,
  .sub .gnb .menu li.logo img {
    height: 20px;
  }
  .con.contents {
    padding: var(--top-h) 0 0;

    .routes,
    .bCon {
      padding: 0 12px;
    }
    .bCon {
      margin: 12px 0;
    }
  }
  .con:has(.routes) {
    --gap: 10px;
    --cell: 2;
  }

  .footer_link .guide {
    padding: 0;
    flex-direction: column;
  }

  ul.guide-call {
    font-size: 12px;
    row-gap: 0.8em;
    flex-wrap: wrap;
    li {
      padding-right: 0;
      color: var(--gray-light);
      padding: 0 !important;
    }
  }
  .footer_link {
    padding-top: 0;
  }
  .routes {
    .main-items > li {
      .btns {
        font-size: 0.85em;
      }
      .infos .info {
        font-size: 0.89em;
        padding: 1.5em;
      }
      .thumb {
        height: 140px;
      }
      .guide {
        justify-content: center;
        gap: 0.5em;
        h3.intro_ttl {
          margin-bottom: 0;
          font-size: 1.25em;
          text-align: left;
          align-items: flex-start;
        }
        .btn.fare {
          font-size: 1em;
          padding: 0.5em 1em;
          margin-top: 1em;
        }
        .customer_num.sub {
          font-size: 1.2em;
          margin: 0;
          padding: 0;
        }
      }
      .customer .numberInfo {
        text-align: left;
        align-items: flex-start;
      }
      &.circluar {
        --gap: 1;
      }
      &.safety {
        width: 100%;
        order: 20;
      }
      &.popupzone_box {
        width: 100%;
      }
    }
    &.rfp .main-items > li {
      &:has(.guide) {
        width: 100%;
        padding: 1.5em;
        .guide {
          flex-direction: row;
          text-align: left;
          justify-content: flex-start;
          padding: 0;
          align-items: flex-start;
          h3.intro_ttl {
            width: 50%;
            flex-shrink: 0;
          }
          .btn.fare {
            position: absolute;
            bottom: 1.5em;
            font-size: 0.88em;
          }
          .customer {
            margin-top: 0;
            padding-top: 0;
          }
        }
      }
      &.circluar .infos {
        padding: 1.5em;
        .btns {
          gap: 1.2em;
          a {
            padding: 0;
            font-size: 0.9em;
            font-weight: bold;
          }
        }
      }
      &.safety {
        order: initial;
        .title {
          padding: 1.5em 0;
          h1 {
            font-size: 1.8em;
          }
        }
      }
    }
  }

  .middle.popupzones {
    flex-direction: column;
    > div.popupzone_box {
      width: 100%;
    }
    .others {
      width: 100% !important;
      padding: 1.5em;
      &:where(.hr, .vt) {
        flex-direction: row;
        padding: 1.8em 0 1.8em 1.8em !important;
        text-align: left;
        gap: 1em;
        justify-content: space-between;
        align-items: flex-end;
        .text {
          font-size: 12px;
          text-align: left !important;
          width: 65%;
          flex-shrink: 0;
          .title {
            font-size: 1em;
            text-align: left;
          }
        }
        img {
          width: 140px;
        }
        &.parking img {
          width: 130px;
        }
      }
    }
  }

  .section .overview .subscript {
    width: 100%;
  }

  .main-items.prices > li .price-multi .price {
    width: auto;
  }
  .main-items.row2.prices li .infos .price-multi {
    padding-right: 0;
  }

  .sect.collabo {
    width: initial;
    .img {
      width: 100%;
      aspect-ratio: 9/16;
    }
    .logos img {
      max-width: 50%;
    }
    + .sect {
      border-top: 0 !important;
    }
  }
  .btn {
    &.circle {
      &.overlay {
        top: 0;
      }
    }
  }
}
.sect .map-picker {
  .option.color-var {
    bottom: 10px;
    left: 10px;
    position: absolute;
    border-radius: 4px;
    padding: 8px;
    max-width: calc(100% - 20px);
    justify-content: center;
    align-items: center;
    row-gap: 8px;
    margin: auto;
    width: fit-content;
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}