@charset "UTF-8";
/*
 * 디자인 CSS 보완 스타일시트
 * 최종 수정: 2025-11-06
 * 디자인 CSS가 실제 운영 서버에 맞지 않는 경우 일부 수정을 위한 파일
 */

/* reservation-ui.css */
.reserv-ui {
  dl {
    /* 251024 정은우 | 첫번째 값이 아닌경우가 있어 first-child 선택자 추가 */

    &:first-child, &.reserv-ui-first-child {
      border-top: 0;
    }
  }

  dd {
    /* 251204 정은우 | 좌우 여백이 깨지는 경우 존재하므로 div 태그에도 padding-left 추가(기존에는 input에만 여백 있었음) */

    > div {
      padding-left: 20px;
    }
  }
}

@media (max-width: 812px) {
  .paying {
    .reserv-ui {
      .choose {
        min-height: 44vh;
      }
    }
  }
}

/* reservation-ui.css END*/

/* schedule.css */
@media (max-width: 812px) {
  .my {
    .sect.schedule {
      .head {
        h3 {
          span {
            /* 251024 정은우 | 최대 길이가 넘어갈 때 뱃지 줄어듦(CSS 깨짐) 방지 */
            flex-shrink: 0;
          }
        }
      }
    }
  }
}

/* schedule.css END */

/* auto-login.css */
.login-wrap {
  /* 251022 정은우 pc cert page ui mo와 동일하게 */
  background: none;
  /*position: relative;*/

  padding: var(--top-h);
  /*background-color: var(--gray-pale);*/
  justify-content: flex-start;
}

.login-form {
  width: auto;

  .btn {
    border: none;

    /* 251022 정은우 hover animation을 위한 css */
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
      height: 100%;
      width: 0;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
    }

    &:hover::before {
      width: 200%;
      transition: 1s;
      pointer-events: none;
    }

    &.cancel {
      background: var(--white);
      color: var(--gray-light);
      border: 2px solid var(--gray-light);
      /* hover animation */

    }
  }
}

/* gnb tab 있을 때 login ui */
&.has-tab .contents > .login-wrap, &:has(.gnb .tabs) .contents > .login-wrap {
  height: calc(100% - var(--top-h) - var(--tab-h));
}

@media (max-width: 812px) {
  .login-wrap {
    background: none;
    position: relative;
    padding: 0;

    .login-form {
      width: initial;
      padding: 30px 0;

      input {
        font-size: 0.9em;
      }
    }
  }
}

/* auto-login.css END */


/* section.css */
body {
  &:has(.gnb .tabs) .contents {
    padding: calc(var(--top-h) + var(--tab-h)) 0 0 0;
  }

  /* 251023 정은우 | 탭 영역 지정이 전역적으로 선택되므로 탭이 있어도 CSS가 깨지는 현상 발생 */

  &:has(.gnb .tabs.only-one-tab > a:only-child) .contents {
    padding-top: calc(var(--top-h) + var(--tab-h));
  }
}


/* Custom(수정): 251208 소통마당 cs-card 하단 여백 수정 */
.sect .head.cs-card {
  padding: 30px;
  margin-bottom: 20px;
}

/* Custom(수정): cs-card가 있는 head는 only-child여도 padding-bottom 유지 */
.sect .head:only-child:not(.cs-card) {
  padding-bottom: 0;
}

@media (max-width: 812px) {
  .contents {
    .header.nav {
      /*margin: 0;*/
    }
  }
}

/* section.css END */

/* overview.css */
.pay-overview {
  /*251022 정은우 QR UI 티켓처럼 변경 START */

  &.reservation-ticket-info-wrapper {
    li.item {
      border: none;
      box-shadow: none;
      max-width: 100%;
    }

    .ticket-img {
      background-color: #fff;
      border-radius: 20px;
      border: 1px solid var(--gray-border);

      overflow: hidden;
      flex-shrink: 0;
      position: relative;
      width: 400px;

      .ticket-printing {
        position: absolute;
        inset: 0;
        padding-top: 20%;
        line-height: 1.4;

        .qrcode {
          padding: 5% 22%;
          position: relative;

          .expired-wrapper {
            position: absolute;
            height: calc(100% - 1em);
            width: auto;
            aspect-ratio: 1 / 1;
            background-color: rgba(255, 255, 255, 0.8);
          }

          .expired-wrapper + .stamp.expired ~ img, .img:has(.expired-wrapper) img {
            filter: blur(4px);
            opacity: 0.5;
          }
        }

        .page-name {
          font-size: 1.2em;
        }

        .name {
          font-weight: bold;
          text-align: center;
          font-size: 1.7em;
          line-height: 1.3;
          color: #000;
        }

        .remain {
          text-align: center;
          font-size: 1.1em;
          display: block;
          color: var(--gray-mid);
          margin-bottom: 1%;

          span {
            color: var(--gray-dark);
          }

          .num {
            font-weight: bold;
            color: var(--main-color);
          }
        }

        .main-info {
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        .info {
          display: flex;
          justify-content: space-between;
          padding: 4% 7%;
          gap: 4%;

          dt {
            font-weight: bold;
            color: var(--gray-light);
            font-size: 0.85em;
          }

          dd {
            font-size: 1.1em;
          }
        }

        .date {
          font-weight: bold;
          text-align: center;
          font-size: 1.4em;
          color: #000;
        }
      }

      .ticket-bg {
        width: 400px;
        aspect-ratio: 8.6/15;
        background: url(../images/ticket/itoct.svg) no-repeat center bottom/100% auto;

        img {
          width: 400px;
          display: none;
        }
      }

      /* Stamp */

      .stamp {
        --color: var(--main);
        position: absolute;
        width: 240px;
        height: 240px;
        border: 4px solid var(--color);
        border-radius: 50%;
        opacity: 1;
        transform-origin: center;
        transform: rotate(-30deg);
        left: 20%;
        bottom: 10%;
        padding: 10px;
        box-sizing: border-box;
        color: var(--color);
        z-index: 3;
        mix-blend-mode: multiply;
        font-weight: 900;
        font-size: 2.5em;
        text-align: center;
        line-height: 212px;

        &::before {
          content: '';
          width: 212px;
          height: 212px;
          left: 10px;
          top: 10px;
          border-radius: 50%;
          border: 10px solid var(--color);
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          position: absolute;
        }

        &.used {
          --color: rgb(0, 149, 255);
        }

        &.expired {
          --color: orangered;
        }

        &.canceled,
        &.unabled {
          --color: rgb(171, 0, 0);
        }
      }

      /* Stamp End */
    }
  }

  /* responsive: ticket inner widths */
  @media (max-width: 812px) {
    .subscr {
      padding-left: 20px;
      width: 100%;
    }

    .ticket-img {
      width: 100%;
    }

    .ticket-printing {
      font-size: 1.2em;
    }
  }
  /* Qr Ticket Ui END*/
}

@media (max-width: 812px) {
  .pay-overview {
    &.reservation-ticket-info-wrapper {
      li.item {
        .ticket-img {
          border-top: 0;
        }
      }
    }
  }
}

/* overview.css END */

/* cs.css */
.wrap.cs {
  &.view {
    .contents > div.article {
      padding-bottom: 0;
    }
  }
}

@media (max-width: 812px) {
  .cs {
    .sect {
      /* 251024 정은우 | 공지사항 목록 화면 넘어감 해결 */
      max-width: 100vw;

      &.board-list {
        padding-right: 0;
      }
    }
  }
}

/* cs.css END */

/* seat.css */
.huge-widget {

  &.bus-seats .ui-widget {
    /* 헤더 251016 정은우 여백이 안맞아 실서버 기준으로 수정*/

    .header {
      margin: 30px 30px 0;
    }

    /* 범례 251016 정은우 정렬이 안맞아 실서버 기준으로 수정*/

    .option.color-var .legend p {
      white-space: normal;
    }
  }

  .btns {
    height: var(--btn-h);
    line-height: var(--btn-h);
    font-weight: bold;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;

    a {
      &.cancel {
        width: 80px;
        background-color: var(--gray-dark);
        color: #fff;
      }

      &.select-complete {
        color: #fff;
        transition: 0.5s;
        display: block;
        background-color: var(--gray-light);
        flex-grow: 1;

        /* 좌석 선택 전 */

        &::after {
          content: '좌석을 선택하세요';
        }

        /* 선택 완료 */

        &.ed {
          background-color: var(--main-color);

          &::after {
            content: '선택 완료';
          }
        }
      }
    }
  }
}

@media (max-width: 812px) {
  .huge-widget {
    &.bus-seats .ui-widget {
      & .bus-frame {
        flex-direction: column;

        .front {
          flex-direction: row;

          li {
            writing-mode: horizontal-tb;
          }
        }

        .seat-batch {
          flex-direction: column;
          flex-wrap: wrap;

          > ul {
            flex-direction: column;
            width: calc(100% / var(--row));
            height: 100%;
            gap: calc(var(--gap) / var(--row) * 5);

            li {
              height: 30px;
              width: auto;
            }
          }
        }
      }

    }
  }
}

/* seat.css END */

/* list.css */
.list {
  li {
    &.item {
      /* 251022 정은우 | 예약 상세 티켓 아이템의 ui */


      &:has(.ticket-img) {
        justify-content: center;

        .date {
          margin: 0;
        }
      }

      /* 251022 정은우 | 예약 상세 티켓 아이템의 ui End */
    }
  }
}

.list.horizon {
  li {
    .btnset {
      p {
        width: max-content;
      }
    }
  }
}
@media (max-width: 812px) {
  /* Custom 정은우 251211: 모바일에서 예약 상품 정보가 잘려 보이는 현상 수정 */
  .reservation-form{
  .list.pay-overview {
    li {
      &.item {
            width: 100%;
          }
        }
      }
    }
}
/* list.css END */

/* 정은우 251211 모바일에서 예약 정보 튀어나옴 숨김 처리 */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

/* utilities.css */
.color-var .legend p.able span {
  background-color: #fff;
  border: 1px solid var(--main-color);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  margin-left: 0;
}

.color-var .legend p.warn span {
  background-color: orange;
  margin-left: 0;
}

.color-var .legend p.unable span {
  background-color: var(--gray-pale);
  border: 2px dotted var(--gray-border);
}

/* 251020 정은우 : 상태에 따른 범례 색상 구분을 위한 css 추가 */
.color-var .legend p.reserved {
  color: var(--gray-mid);
}

.color-var .legend p.unable {
  color: var(--gray-light);
}

.color-var .legend p.able {
  color: var(--main-color);
}

.color-var .legend p.selected span {
  background-color: var(--main-color);
}

.color-var .legend p.selected {
  color: var(--main-color);
}

.color-var .legend p.reserved span {
  border: 2px dotted var(--gray-dark);
}

.color-var .legend p.using span {
  background-color: var(--blue);
}

.color-var .legend p.regular span {
  background-color: var(--Main);
}

.color-var .legend p.outdate span {
  background-color: var(--red-color);
}

.color-var.font p.reserved {
  color: var(--gray-dark);
}

/* utilities.css END */

/* calendar.css - 달력 모달 */

/* calendar.css END */

/* gnb.css */
.scrolled {
  .gnb {
    .menu {
      .menus {
        li.member {
          font-size: 18px !important;
        }
      }
    }
  }
}

.gnb {
  .menu {
    .menu-n {
      > li {
        .depth2 {
          > li {
            > a {
              white-space: pre-wrap;
            }
          }
        }
      }
    }
  }

  /*251023 정은우 | 기본 하얀 gnb인 경우 분기 처리*/

  &.light-gnb {
    .menu {
      .menu-all {
        li {
          &.member {
            background-image: url(../../global/images/icon/user-b.svg);
            background-position: left center;
            height: auto;
            margin-right: 26px;
            width: 26px;
            height: 26px;

            &.logout {
              background-image: url(../../global/images/icon/logout.svg);
              padding: 0;
              width: 26px;
              height: 26px;
            }

            a {
              padding-left: 26px;
            }
          }
        }
      }
    }
  }
}

/* Custom 정은우 251211: 모바일 환경에서는 icon 제거 및 여백 일치*/
@media (max-width: 812px) {
  .gnb {
    &.light-gnb {
      & .menu {
        & .menu-all {
          & li {
            &.member {
              background-image: none;
              padding: 0;

              &::before {
                content: '';
              }

              a {
                padding-left: 0;
              }
            }

            &.member.logout {
              background-image: none;

              &::before {
                content: '';
              }
            }
          }
        }
      }
    }
  }
}

/* gnb.css END */