@charset "utf-8";

/**
 * 공통 사용 css
 */
 :root {
    --border-width: 1px; /* 기본값 설정 */
    --percent: 3%;
   }
  .main {
    height: 100vh;
    padding: calc(env(safe-area-inset-top) + 40px) 0 0;
  
    /* 버튼 하단 위치 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .text-bold {
    font-size: 16px;
    font-weight: bold;
  }
  
  .text-red {
      color: #bf0000;
  }
  
  .text-gray {
      color: gray;
  }
  
  .text-white {
      color: white;
  }
  
  .ta_center {
    text-align: center;
  }
  
  .ta_left {
    text-align: left;
  }
  
  .fs-10 {
      font-size: 10px;
  }
  
  .mt-3 {
    margin-top: 3%;
  }
  
  .mt-5 {
    margin-top: 5%;
  }
  
  .mb-3 {
    margin-bottom: 3%;
  }
  
  .mb-5 {
    margin-bottom: 5%;
  }
  
  .mb-10 {
    margin-bottom: 10%;
  }
  
  .ml-3 {
    margin-left: 3%;
  }
  
  .ml-5 {
    margin-left: 5%;
  }
  
  .mr-5 {
    margin-right: 5%;
  }
  
  .mx-3 {
    margin-left: 3%;
    margin-right: 3%;
  }
  
  .mx-5 {
    margin-left: 5%;
    margin-right: 5%;
  }
  
  .mx-10 {
    margin-left: 10%;
    margin-right: 10%;
  }
  
  .my-1 {
    margin-top: 1%;
    margin-bottom: 1%;
  }
  
  .my-3 {
    margin-top: 3%;
    margin-bottom: 3%;
  }
  
  .my-5 {
    margin-top: 5%;
    margin-bottom: 5%;
  }
  
  .my-10 {
    margin-top: 10%;
    margin-bottom: 10%;
  }
  
  .pb-5 {
    padding-bottom: 5%;
  }
  
  .px-3 {
      padding-left: 3%;
      padding-right: 3%;
  }
  
  .hr-3 {
    width:100%;
    border:none;
    border-bottom: 3px solid #eeeeee;
    opacity: 0.5;
    margin: 3% 0;
    box-sizing: border-box;
  }
  
  .hr-5 {
    width:100%;
    border:none;
    border-bottom: 5px solid #eeeeee;
    margin: 3% 0;
    box-sizing: border-box;
  }
  
  .hr-8 {
    width:100%;
    border:none;
    border-bottom: 8px solid #eeeeee;
    margin: 3% 0;
    box-sizing: border-box;
  }
  
  .li-circle {
    list-style: outside;
  }
  
  .border-dynamic-gray {
      border: var(--border-width) solid #dddddd;
      border-radius: 5px;
  }
  
  .border-circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #dddddd;
    border-radius: 50%;
  }
  
  /*** 이미지 관련 css ***/
  /* 리뷰 별 아이콘 */
  .i-star.on {
    /* font-size: 1.3em; */
    width: 2em;
    height: 2em;
    background: url(../../../img/starrateOn.png) no-repeat;
    background-size: 100%;
    box-sizing: border-box;
  }
  
  .i-star {
    /* font-size: 1.3em; */
    width: 2em;
    height: 2em;
    background: url(../../../img/starrateOff.png) no-repeat;
    background-size: 100%;
  }
  /* //리뷰 별 아이콘 */
  
  /* 리뷰 사진 (+) 아이콘 */
  .i-plus {
    width: 24px;
      height: 24px;
      background: url('../images/common/icon.png') no-repeat 80.303% 33.333%;
    border: none;
  }
  /* 리뷰 사진 + 버튼 아이콘 */
  
  /** 이미지 색상 변경
  *	색상 추가 시 참고 - https://codepen.io/sosuke/pen/Pjoqqp 에서 원하는 컬러표 입력 후 filter:... 복사
  *	지켜야 할 규칙
  *	- 이미지는 검은색으로 합니다.
  *	- 배경색은 없어야 합니다.
  *	- 만약 이미지 색상이 검은색이 아니라면 아래의 코드를 붙여주시면
  *	  검은색에서 바뀌는 효과로 적용됩니다.
  *	brightness(0) saturate(100%)
  */
  .img-red {
      filter: brightness(0) saturate(100%) invert(11%) sepia(69%) saturate(6966%) hue-rotate(359deg) brightness(83%) contrast(112%);
  }
  
  .img-gray {
      filter: brightness(0) saturate(100%) invert(88%) sepia(0%) saturate(1007%) hue-rotate(313deg) brightness(95%) contrast(78%);
  }
  /* //이미지 색상 변경 */
  
  /*** //이미지 관련 css ***/
  
  /* placeholder */
  .placeholder-text-right::placeholder {
      text-align: right;
  }
  /* //placeholder */
  
  
  /**
   * //공통 사용 css
   */
  
  
  /**
  * 페이지별 사용 css
  */
  
  /* list > order.html 사용 */
  #wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  .content {
    width: 100%;
    margin-top: 30px;
    transition: 0.3s ease;
  }
  
  /* Tabs menu */
  .tabs {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    border-radius: 5px 5px 5px 5px;
  }
  @media screen and (max-width: 512px) {
    .tabs {
      height: 40px;
    }
  }
  
  /* Tab Links */
  .tablinks {
    background: transparent;
    border-bottom: 1px solid #e7e7e7;
    outline: none;
    cursor: pointer;
    width: 50%;
    /*change depending on the number of tabs*/
    height: 40px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-family: "IBM Plex Sans", sans-serif;
    overflow: hidden;
    border-radius: 5px 5px 5px 5px;
  }
  @media screen and (max-width: 512px) {
    .tablinks {
      height: 40px;
      font-size: 12px;
    }
  }
  
  .tablinks:before {
    background-image: #dddddd;
    content: "";
    width: 100%;
    height: 0px;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s ease-in-out;
    z-index: 2;
  }
  
  /*tab buttons hover*/
  .tablinks:hover::before {
    height: 100%;
    z-index: 2;
    bottom: 0;
  }
  @media screen and (max-width: 512px) {
    .tablinks:hover::before {
      height: 0;
    }
  }
  
  /* Tab active */
  .tablinks.active {
    z-index: 0;
    border: 1px solid #dddddd;
    border-bottom: none;
    height: 40px;
    overflow: hidden;
  }
  @media screen and (max-width: 512px) {
    .tablinks.active {
      height: 40px;
  
    }
  }
  
  .tablinks.active:before {
    bottom: 1px solid #dddddd;
    content: "";
    width: 100%;
    height: 5px;
    top: 0;
    left: 0;
  }
  
  /* Tabs text */
  .tablinks.active p,
  .tablinks.active:hover p {
    /* opacity: 1; */
    color: black;
  }
  
  .tablinks p {
    /* opacity: 0.6; */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: 0.5s ease;
    padding: 0;
    margin: 0;
    backface-visibility: hidden;
    font-weight: 400;
  }
  
  .tablinks:hover p {
    color: white;
    opacity: 1;
  }
  @media screen and (max-width: 512px) {
    .tablinks:hover p {
      color: #686868;
      opacity: 0.6;
    }
  }
  
  /* Tabs text bigger */
  .tablinks p:before {
    content: attr(data-title);
    position: absolute;
    height: auto;
    width: auto;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.1;
    font-size: 40px;
    transition: 1s ease-out;
    z-index: -1;
    font-weight: 600;
    top: 110%;
  }
  @media screen and (max-width: 512px) {
    .tablinks p:before {
      display: none;
    }
  }
  
  .tablinks:hover p:before {
    opacity: 0.1;
    font-size: 40px;
    top: -80%;
  }
  
  /* tab content */
    /*
  .wrapper_tabcontent {
    background-color: white;
    margin-top: 5px;
    z-index: -3;
    position: relative;
    opacity: 1;
    padding: 10px 20px;
    overflow: hidden;
    transition: all 1s ease;
    top: 0;
  }
    */
  
  .tabcontent {
    display: none;
    min-height: 180px;
  }
  
  @keyframes tabEffect {
    from {
      top: -40px;
    }
    to {
      top: 0px;
    }
  }
  .tabcontent.active {
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
    width: 100%;
    padding: 10px;
    transition: all 1s ease;
    display: block;
  }
  
  /* Tab content line */
  /*
  .wrapper_tabcontent:after {
    content: "";
    height: 5px;
    width: 100%;
    position: absolute;
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    left: 0;
    bottom: 0;
    z-index: -2;
    transition: all 1s ease;
  }
  */
  
  /* Title */
  /*
  .tabcontent h3 {
    font-size: 40px;
    top: 75px;
    transform: rotate(90deg);
    position: absolute;
    left: -90px;
    opacity: 0.1;
    width: 200px;
    height: 60px;
    background: -webkit-linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0;
    animation: city 1s ease;
  }
  */
  @media screen and (max-width: 512px) {
    .tabcontent h3 {
      top: 65px;
    }
  }
  
  @keyframes city {
    from {
      left: -150px;
    }
    to {
      left: -90px;
    }
  }
  /* Text*/
  .order-list-box {
    text-align: center;
    font-size: 20px;
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 15px;
    border: 3px solid #dddddd;
  }
  
  .order-list-box>ul>li {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 10px;
    margin-bottom: 0 !important;
  }
  
  .order-list-box .item-top {
    margin-bottom: 5px;
  }
  
  .order-list-box .item-middle {
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  .order-list-box .fs-small {
    font-size: small;
    margin-top: 5px;
  }
  
  .order-list-box .gray {
    color: #cccccc;
  }
  
  .btn-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    gap: 20px;
  }
  
  .order-list-box .btn-group .btn {
    display: block;
    font-size: 15px;
    font-family: Pretendard-SemiBold;
    color: #fff;
    text-align: center;
    width: 100%;
    padding: 10px 0;
    background-color: #dddddd;
    border-radius: 6px;
  }
  /* //list > order.html 사용 */
  
  /* list > order_deli_details.html 사용 */
  
  /* list > order_deli_review.html 사용*/
  .rating__result {
    display: flex;
  }
  
  .review_picture {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25vw;
    height: 25vw;
    background-color: #dddddd;
    border: none;
    border-radius: 7px;
  }
  
  .review_picture_group {
    display: flex;
    justify-content: space-between;
    margin-top: 3%;
    gap: 10px;
  }
  
  /* 이 부분은 지워야 할 지 상의가 필요함 */
  @media screen and (max-width: 310px) {
    .review_picture_group {
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .review_picture_group>li {
      width: 100%;
    }
    .review_picture_group .review_picture {
      width: 100%;
    }
  }
  
  /* textarea placeholder 가운데로 만드는 세트 */
  .textarea-container {
    position: relative;
    min-height: 300px;
  }
  
  .textarea-placeholder {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    text-align: center;
    color: #ccc;
    word-break: keep-all;
  }
  
  textarea:focus + .textarea-placeholder {
    display: none;
  }
  /* //textarea placeholder 가운데로 만드는 세트 */
  
  .textarea-container .order-list-box {
      min-height: 300px;
  }
  /* //list > order_deli_review.html 사용 */
  
  /* order/cart_order.html 사용 */
  .input-container {
    position: relative;
    display: inline-block;
  }
  
  .input-container input {
    padding-right: 20px; /* 고정 텍스트를 위한 오른쪽 패딩 조정 */
  }
  
  .input-container .fixed-text {
      font-size: 12px;
      font-weight: bold;
      position: absolute;
      right: 5px; /* input 내부 오른쪽 끝에서의 위치 */
      top: 0; /* input 태그와 동일한 높이 위치에 놓임 */
      height: 100%; /* input 필드의 높이와 맞춤 */
      display: flex;
      align-items: center; /* 세로 중앙 정렬 */
      pointer-events: none; /* 클릭 무시 */
  }
  
  .couponBtn {
      color:#bf0000;
      width: 100%;
      padding: 10px;
      border: 2px solid #bf0000;
      border-radius: 6px;
  }
  
  .payChoiceContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    gap: 20px;
  }
  
  .custom-radio {
      display: inline-block;
      text-align: center;
    justify-content: center;
    align-items: center;
  }
  
  .custom-radio input[type="radio"] {
    display: none; /* 기본 라디오 버튼 숨기기 */
    /* appearance: none; */
  }
  
  .custom-radio .radio-btn {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #dddddd; /* 회색 테두리 */
    border-radius: 50%; /* 원형 모양 */
    position: relative;
    cursor: pointer;
  }
  
  .custom-radio .radio-btn .indicator {
    display: none; /* 기본적으로 보이지 않음 */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #bf0000; /* 빨간색 배경 */
    transform: translate(-50%, -50%); /* 중앙 정렬 */
  }
  
  .custom-radio input[type="radio"]:checked + .radio-btn {
    border: 2px solid #bf0000; /* 빨간색 테두리 */
  }
  
  .custom-radio input[type="radio"]:checked + .radio-btn .indicator {
    display: block; /* 선택 시 보이기 */
  }
  
  .custom-radio input[type="radio"]:disabled + radio-btn {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #dddddd; /* 회색 테두리 */
    border-radius: 50%; /* 원형 모양 */
    position: relative;
    cursor: pointer;
  }
  
  .rsvNumBtn{
    display: flex;
    align-items: center;
    width: 100%;
  }
  
  #terms-of-service a {
    color: black;
    text-decoration: none;
  }
  
  /* //order > cart_order.html 사용 */
  
  @media screen and (max-width: 512px) {
    .tabcontent p {
      font-size: 14px;
      line-height: 26px;
    }
  }
  
  @keyframes fadeEffect {
    from {
      opacity: 0;
      margin-left: 30px;
    }
    to {
      opacity: 1;
      margin-left: 0;
    }
  }

  /* 240814 */

  .main {
    padding: calc(env(safe-area-inset-top) + 60px) 0 0;
}