@charset "UTF-8";
/* ====================================
   ✅ 공통 속성
==================================== */
* {-webkit-tap-highlight-color: transparent;}
.txt-ellipsis {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.flex-col{display: flex; flex-direction: column;}
.flex-row{display: flex; flex-direction: row; align-items: center;}


.ic-arrow-right{background: url('../../images/common/ic_arrow_right.svg') no-repeat;}
.ic-arrow-right-w16-primary{width: 1.6rem; height: 1.6rem; background-position: -14.8rem 0;}


/* ====================================
   ✅ CHECKBOX
==================================== */
.checkbox-ty1,
.checkbox-low,
.radio-ty1 {
  display: inline-flex; align-items: center; cursor: pointer; --size: 1.6rem;
}
.checkbox-ty1.line-2,
.checkbox-low.line-2,
.radio-ty1.line-2 {
  align-items: flex-start;
}
.checkbox-ty1 input,
.checkbox-low input,
.radio-ty1 input,
.toggle-ty1 input {
  display: none;
}
.checkbox-box,
.checkbox-low-box,
.radio-box {display: inline-block; width: var(--size); height: var(--size); margin-right:.8rem; background-size: contain; background-repeat: no-repeat; background-position: center; transition: background-image 0.15s;}
.checkbox-box {background-image: url('../../../images/common/check_off.svg');}
.checkbox-ty1 input:checked + .checkbox-box {background-image: url('../../../images/common/check_on.svg');}
.checkbox-low-box {background-image: url('../../../images/common/check_low_off.svg');}
.checkbox-low input:checked + .checkbox-low-box {background-image: url('../../../images/common/check_low_on.svg');}
.radio-box {border-radius: 50%; background-image: url('../../../images/common/radio_off_ou.svg');}
.radio-ty1 input:checked + .radio-box {background-image: url('../../../images/common/radio_on_ou.svg');}

.toggle-ty1 {
  --toggle-width: 4.8rem; 
  --toggle-height: 2.8rem; 
  --toggle-padding: 0.2rem; 
  --toggle-bg-on: var(--sky-500); 
  --toggle-bg-off: var(--gray-300); 
  --toggle-handle-size: 2.4rem; 
  --toggle-transition: 0.2s cubic-bezier(.5,1,.89,1); 
  width: 100%;
  display: flex; 
  justify-content: space-between;
  align-items: center; 
  cursor: pointer; 
  user-select: none;
}
.toggle-group {display: flex; align-items: center; justify-content: space-between; gap: 0 .8rem; padding: 1.4rem 1.6rem;}
.toggle-switch {position: relative; width: var(--toggle-width); height: var(--toggle-height); border-radius: calc(var(--toggle-height) / 2); background: var(--toggle-bg-off); transition: background-color var(--toggle-transition); display: flex; align-items: center;box-sizing: border-box;}    
.toggle-ty1 input:checked + .toggle-switch {background: var(--toggle-bg-on);}
.toggle-ty1.disabled .toggle-switch{background: var(--toggle-bg-off); opacity: 0.5; cursor: not-allowed;}
.toggle-ty1 input:disabled + .toggle-switch{opacity: 0.5; cursor: not-allowed;}
.toggle-handle {position: absolute; left: var(--toggle-padding); top: var(--toggle-padding); width: var(--toggle-handle-size); height: var(--toggle-handle-size); border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(150,160,180,0.06); display: flex; align-items: center; justify-content: center; transition: left var(--toggle-transition), background-color var(--toggle-transition); font-size: 1.5rem;}
.toggle-ty1 input:checked + .toggle-switch .toggle-handle {left: calc(var(--toggle-width) - var(--toggle-handle-size) - var(--toggle-padding));}
.toggle-handle svg {width: 1rem; height: 1rem; display: block;}
.toggle-ty1 input:not(:checked) + .toggle-switch .icon-check,
.toggle-ty1 input:checked + .toggle-switch .icon-x {display: none;}
.toggle-ty1 input:checked + .toggle-switch .icon-check,
.toggle-ty1 input:not(:checked) + .toggle-switch .icon-x {display: flex; align-items: center;}
.toggle:not(.low) input:checked + .toggle-switch .icon-check {color: #32b7f4;}
.toggle.low input:checked + .toggle-switch .icon-check {color: #90d2f7;}
.toggle-ty1 input:not(:checked) + .toggle-switch .icon-x {color: #adb1b6;}
.toggle.disabled .toggle-switch,
.toggle-ty1 input:disabled + .toggle-switch {opacity: 0.5; pointer-events: none;}
.toggle.disabled .toggle-handle,
.toggle-ty1 input:disabled + .toggle-switch .toggle-handle {background: #f7f8fa;}
.toggle.disabled .icon-check,
.toggle.disabled .icon-x,
.toggle-ty1 input:disabled + .toggle-switch .icon-check,
.toggle-ty1 input:disabled + .toggle-switch .icon-x {color: #d1d4d9 !important;}
/* ====================================
   ✅ seperater
==================================== */

.seperator-dot {display:inline-block;width:.2rem; height: .2rem; border-radius: var(--radius-full); margin-right:var(--spacing-0-5);}
.seperator-set {display: flex; align-items: center;}

/* ====================================
   ✅ toast
==================================== */

.toast-box { opacity: 0; position: fixed; left: 2rem; right: 2rem; bottom:0; display: flex; padding: var(--spacing-3) var(--spacing-4); flex-direction: column; justify-content: center; align-items: flex-start; gap: .2rem; border-radius:var(--radius-8); box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16); backdrop-filter: blur(.2rem); z-index: -999; pointer-events: none;/* 기본 상태: 위(-3rem), opacity 0 */transform: translateY(-3rem); /* out: 0.3s 동안 opacity 1 → 0, -3rem 방향으로 복귀 */transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, bottom 0.3s ease-in-out;}
.toast-box.showing {/* in: duration 0.5s, opacity 0 → 1, Y -3rem → 0 */opacity: 1; z-index: 999; pointer-events: all; transform: translateY(0); transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out,  bottom 0.5s ease-in-out;}

/* ====================================
   ✅ tooltip
==================================== */

.info-tooltip-box {display: none;position: absolute;bottom: 2.4rem;left: 0; width:max-content; padding: .4rem .8rem !important; max-width:25.5rem; border-radius: var(--radius-4); padding: var(--spacing-1) var(--spacing-2);box-shadow: 0 .4rem 1rem 0 rgba(0, 0, 0, 0.16);backdrop-filter: blur(.2rem);z-index: 20;}
.info-tooltip-box.rgt {left:auto; right:0}
.info-tooltip-box.center {left:50%; transform: translateX(-50%);}
.info-tooltip-btn-name{padding-left: var(--spacing-1);}
.info-tooltip-wrapper {display: inline-block;position: relative;vertical-align: -.2rem;}
.info-tooltip-wrapper .info-tooltip-btn {display:flex; align-items: center; padding:0 var(--spacing-1) 0 var(--spacing-1); height: 2.8rem;  border-radius: var(--radius-4);}
.info-tooltip-icon {display: flex;justify-content: center;align-items: center;cursor: pointer;width: 2rem;height: 2rem;vertical-align: middle;transition: filter 0.15s; border-radius: var(--radius-4);}
.info-tooltip-txt {min-width: 12rem;}
.info-tooltip-icon img { width: 1.2rem; height: 1.2rem;}
.info-tooltip-close { display: flex; align-items: flex-start; justify-content: center; flex-shrink: 0; width: 1.6rem; padding-top: var(--spacing-4)}
.info-tooltip-arrow-close { position: relative; cursor: pointer; width: 1.2rem; height: 1.2rem;}
/* ====================================
   ✅ Badge
==================================== */
.n-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-4); padding: .4rem; min-width: 3.2rem; height: 2rem;}
.n-badge.r-type {border-radius: var(10rem);}
/* ====================================
   ✅ helpbox
==================================== */
.help-box .help-box-inner {padding:1.2rem; border-radius: var(--radius-4);}
.help-box .help-box-list {margin-top: .4rem;}
.help-box .help-box-list-outer {display: flex;
flex-direction: column; height: 12rem; max-height: 12rem;  overflow: hidden; box-sizing: border-box;}
.help-box .help-box-list-outer:not(.is-expanded) .help-box-list { flex: 1 1 auto; min-height: 0; overflow: hidden;}
.help-box .help-box-list-outer.is-expanded { display: block; height: auto; max-height: none; overflow: visible;}
.help-box .help-box-list-outer.is-expanded .help-box-list { overflow: visible; }
.help-box .help-box-more-btn {position:relative;flex-shrink: 0;width: 100%;margin: 0;border: none;}
.help-box .help-box-more-btn:after {content: '';position: absolute;top: -100%; left: 0; width: 100%; height: 2.3rem; background: linear-gradient(180deg, rgba(245, 245, 245, 0.00) 0%, rgba(245, 245, 245, 0.84) 57.21%, #F5F5F5 100%);}
.help-box .help-box-more-btn-txt {position:relative; display:flex; align-items: center; justify-content: center; width: 100%;}
.help-box .help-box-more-btn-txt:after {content:''; width:1.2rem; height:1.2rem; background-image: url('../../images/common/ic_arrow_down.svg'); background-position: 100% 0;}
.help-box .help-box-list > li { position:relative; padding-left:1.2rem;}
.help-box .help-box-list > li:after {position: absolute;top: .8rem; left:0; width: .2rem; height:.2rem; background-color:var(--gray-500); border-radius: 50%; content: '';}
.help-box .help-box-txt {margin-top:var(--spacing-4);}

.banner-branded {display:flex; border-radius: var(--radius-4); padding: .8rem 1.2rem}
.banner-branded.bg-npay{margin-top: 1.6rem;}
.banner-branded .banner-branded-txt {margin-left:.8rem;}
/* ====================================
   ✅ Button
==================================== */
.btn-base {position:relative; display: flex; align-items: center; justify-content: center;  min-width:6.4rem; border-radius: .8rem; }
.btn-base .btn-txt {white-space: nowrap;pointer-events: none;}
[class*='btn-size-'] svg {width:1.6rem; height: 1.6rem; stroke-width: 0.15rem;}
[class*='btn-size-'] .ico_set {padding-left:var(--spacing-1)}
[class*='btn-size-'] .lft-arrow {transform: rotate(180deg);}
.btn-size-lg svg {width:2rem; height:2rem;}
.btn-size-xs {height:2.8rem; padding:0 .8rem;}
.btn-size-sm {height:3.2rem; padding:0 1rem;}
.btn-size-md {height:4rem; padding:0 1.2rem;}
.btn-size-lg {height:4.8rem; padding:0 1.2rem;}
.btn-base.bg-btn-primary-low .ico_set{color: var(--sky-500);;}
.btn-base.bg-btn-primary .ico_set,
.btn-base.bg-btn-primary_hover .ico_set,
.btn-base.bg-btn-primary .ico_set,
.btn-base.bg-btn-primary .ico_set{color: var(--white);;}
.btn-base.bg-btn-secondary-low .ico_set{color: var(--gray-500);;}
.btn-base.bg-btn-transparant .ico_set{color: var(--gray-700);;}
.btn-base:disabled {background-color: var(--gray-300)!important; pointer-events: none;}
.btn-base:disabled .btn-txt{color: var(--white)!important;}
.btn-base:disabled .ico_set{color: var(--white)!important;}
/* .btn-base:hover {background-color: var(--sky-700)!important; }
.btn-base:hover .btn-txt{color: var(--white)!important;}
.btn-base:hover .ico_set{color: var(--white)!important;} */
.btn-base.btn-text-type:hover{background-color:var(--neutral-100)!important ;}
.btn-base .ico_set.c-tertiary {color: var(--gray-500);;}
.btn-base.btn-text-type:hover .ico_set.c-tertiary {color: var(--gray-500)!important;}
.btn-base.btn-icon-type{ min-width:auto; width:2.8rem; height:2.8rem; padding:0;}
.btn-base.btn-icon-type .ico_set {padding-left:0;}
.btn-group {padding:1.6rem 1.6rem 2.4rem; display: flex;box-sizing: border-box;}
.btn-group.full-type {width:100%;}
.btn-group.full-type > button {width: 100%;}
.btn-group.menu-type {display: flex; justify-content: space-between; gap: 0 .8rem;}
.btn-group.menu-type .menu-unit-l button {height:2.4rem; padding-right:1.6rem;  background: url('../img/ic_arrow_right_ou_16_insur.svg') no-repeat right center; }
.btn-group.right-type .menu-unit-r {flex:1;}
.btn-group.right-type .menu-unit-r button {width: 100%;}
.btn-group.left-type .menu-unit-l {flex:1;}
.btn-group.left-type .menu-unit-l button {width: 100%;}
.btn-group.left-type,
.btn-group.right-type {display: flex; justify-content: space-between; gap: 0 .8rem;}
.btn-group.menu-type .menu-unit-r button {width: 16rem;}
.btn-group.menu-type .menu-unit-l {display: flex; flex-direction: column;flex-wrap: wrap; flex: 1; align-content: baseline; align-items: baseline;}
button[data-popup-close],
.passenger-layer-close{width: 2.4rem; height: 2.4rem; font-size: 0; position: absolute; right: 1.6rem; top: 50%; transform: translate(0, -50%); background: url('../../../images/common/ic_cancel.svg') no-repeat;}
/* ====================================
   ✅ Header
==================================== */
.n-header {width: 100%; position:fixed; top:0; left:0; padding: 2rem; border-bottom: 1px solid var(--gray-200);  background-color: var(--white); z-index: 10;}
.n-header-logo {max-width: 110rem; margin: auto;}
.n-header-logo img{height: 4rem;}
/* .n-header-logo {width:16.4rem;} */
/* .n-header-logo img{width:100%}   */
/* ====================================
   ✅ Header Card
==================================== */
.header-card{display: flex; justify-content: space-between; align-items: center; padding:1.55rem 1.6rem}
/* ====================================
   ✅ Header Popup
==================================== */
.layer-first-title{position:relative;display: flex; justify-content: space-between; padding: 1.6rem 1.2rem 1.2rem;}
.layer-first-title + .layer-guide-text{padding: 0 1.6rem 1.2rem;}
.layer-first-title button .ico_set {color: var(--gray-900);}
.layer-first-title h1{text-align: center; flex: 1;}
/* ====================================
   ✅ Heading
==================================== */
.heading-card {display: flex; justify-content: space-between; align-items: center; }
/* ====================================
   ✅ Menu
==================================== */
[class*=tab-type-btn] button{ border-radius: 10rem; background-color: var(--white);}
.tab-type-btn button + button { margin-left: .8rem}
[class*=tab-type-btn] .active{ background-color: var(--gray-900); color: var(--white); border:none;} 
.tab-type-btn.white-type .active {background-color: var(--gray-100); color: var(--gray-900); border: 1px solid var(--gray-900);}
.tab-type-bd { position: relative; display:flex; flex-shrink: 0; height:4.2rem; padding-left: 1.6rem; overflow-x: scroll;border-bottom: 1px solid var(--gray-200); border-radius: 0!important;}
.tab-type-bd::-webkit-scrollbar {display: none;}
.tab-type-bd button {flex-shrink:0;padding: 1rem .8rem;border: none;background: none;cursor: pointer;transition: color 0.3s; color: var(--gray-500);}
.tab-type-bd button.active {color: var(--gray-900); font-weight: var(--font-weight-bold)}
/* 움직이는 하단 바 */
.tab-type-bd .tab-line {position: absolute;bottom: 0;left: 0;height: .2rem;background-color: var(--gray-900);/* 너비와 위치 이동 모두에 트랜지션 적용 */transition: width 0.3s ease, transform 0.3s ease; /* 초기화 */width: var(--width, 0px);transform: translateX(var(--left, 0px));pointer-events: none; /* 선이 버튼 클릭을 방해하지 않도록 */}
.option-selection { display:grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 1.2rem; gap:.8rem;}
.option-selection .option-selection-itm {position:relative; height: 5.6rem; border-radius: .4rem; border:1px solid var(--gray-300);}
.option-selection .option-selection-itm.active { border-color:var(--gray-900); color:var(--gray-900); background-color: var(--gray-50);}
.option-selection .option-selection-itm.active > .text-tertiary {color: var(--gray-900);}
.option-selection .option-selection-itm.benefit-flag {overflow: hidden;}
.option-selection .option-selection-itm.benefit-flag:before{content:'혜택'; position:absolute; top:0; left:0; width:4rem; height:2rem; display: flex; justify-content: center; align-items:center; padding:.6rem .4rem; color: var(--white); background-color: var(--red-500); border-radius: 0 0 .8rem 0; box-sizing: border-box; font-size: 1.2rem; font-family: var(--font-family);}
.option-selection .selection-txt {display: flex; align-items: center; justify-content: center;}
.option-selection .selection-logo {width: auto; margin-right: .4rem;}
.option-selection .selection-logo.type-toss {height:2.4rem;}
.option-selection .selection-logo.type-naver {height:2rem;}
.option-selection .selection-logo.type-kakao {height:2rem;}
.option-selection.type-2 .option-selection-itm { height:6.4rem; border-radius: .8rem;}
.option-selection.type-2 .option-selection-itm.active { border-width:1.5px;}
/* ====================================
   ✅ input
==================================== */
.input-elem-btn{display:flex; align-items:center; justify-content: center; height:4.4rem; padding: 1rem .8rem; border-radius: .4rem; }
.input-elem-btn > span {padding:0 .95rem;}
.input-basic {position: relative; display: flex;
  align-items: center; height:4.4rem; padding: 1rem 1.6rem; border-radius: .4rem; background-color: var(--white); overflow: hidden;}
.input-basic input[type="text"],
.input-basic input[type="password"],
.input-basic input[type="number"],
.input-basic input[type="email"],
.input-basic input[type="tel"],
.input-basic input[type="url"]  { box-sizing: border-box; border: none; outline: none; background: none; padding: 0; margin: 0;width: 100%; color: var(--gray-800);}
.input-basic input[type="number"]::-webkit-outer-spin-button,
.input-basic input[type="number"]::-webkit-inner-spin-button,
.input-basic input[type="tel"]::-webkit-outer-spin-button,
.input-basic input[type="tel"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
.input-basic input[type="number"],
.input-basic input[type="tel"] { -moz-appearance: textfield;}
.input-basic input[type="text"]:disabled,
.input-basic input[type="password"]:disabled,  
.input-basic input[type="number"]:disabled,  
.input-basic input[type="email"]:disabled,
.input-basic input[type="tel"]:disabled,
.input-basic input[type="url"]:disabled,  
.input-basic.input-basic-slt.disabled {background-color: var(--gray-100); color: var(--gray-500); -webkit-appearance: none; -webkit-text-fill-color: var(--gray-500);opacity: 1; pointer-events: none;}
.bg-btn-secondary.disabled{background-color: var(--gray-300); color: var(--white); -webkit-appearance: none; -webkit-text-fill-color: var(--white);opacity: 1;}
.input-elem-box .input-elem-label{display:inline-block;}
.input-basic .input-reset-btn {width: 2.4rem; height:2.4rem;}
.input-textarea {width:100%; height:11.6rem; padding: 1rem 1.6rem; border-radius: .4rem;}
.input-textarea textarea{box-sizing: border-box; width: 100%; height: 100%;resize: none;   border: none; outline: none; resize: none; color: var(--gray-800);}
.input-textarea textarea::placeholder {color: var(--gray-400);}
.password-marking-char {display: flex; align-items: center; flex: 0; align-self: center;}.input-elem-btn{display:flex; align-items:center; justify-content: center; height:4.4rem; padding: 1rem .8rem; border-radius: .4rem; }
.input-grid.btn-set{ grid-template-columns: 1fr auto;gap: .8rem;}
.input-grid.btn-set-type-2{ grid-template-columns:auto;gap: .8rem;}
.input-grid.half-set{    grid-template-columns: repeat(2, 1fr); gap: .8rem;}
[class*='input-col']{display: flex; gap: .8rem; margin-top: .4rem; align-items: center;}
.input-col-2 > *{flex:1;}
.input-col-2 {align-items: flex-start; gap:1.2rem}
.input-col [class*='radio-ty'],
.input-col [class*='checkbox-ty']{height: 4.4rem;}
.input-col .w120 {width: 12rem;}
.input-grid { display: grid;}
[class*='input-grid']{gap: .8rem; margin: .8rem 0;}
.input-grid.grid-1-2,
.input-grid.grid-2-2{grid-template-columns: repeat(2, 1fr);gap:1.2rem;}
.input-grid.grid-2-2 .input-elem-box + .input-elem-box{margin-top: 0;}
.input-grid.grid-1-2 > .input-elem-box:first-child {grid-column: 1 / -1;}
.input-grid.grid-2-2 > .input-elem-box:first-child {grid-column: auto;}
.input-elem-label + .input-basic {margin-top:.4rem;}
.input-elem-label + .input-grid {margin-top:.4rem;}
.input-elem-help {margin-top: .4rem;}
/* ====================================
   ✅ select
==================================== */
.input-basic select { width: 100%; height: 100%; border: none; color: var(--gray-800); padding:1rem 1.6rem;}
.input-basic.input-basic-slt {padding: 0; overflow: visible;}
.slt-slted {display: flex;align-items: center;width:100%;height: 100%;padding: 1rem 1.6rem;box-sizing:border-box;}
.slt-list {display: none;position: absolute;top: calc(100% + 1rem);background: var(--white);left: -0.1rem ;right:-0.1rem;border-radius: .4rem;;z-index: 10;max-height: 26rem;overflow-y: auto;}
.slt-list > li .slt-option {position: relative;display: flex;align-items: center;padding:1.2rem 1.6rem}
.slt-list > li {height: 4rem;}
.slt-list .slt-option:hover {background-color: var(--sky-50);}
.slt-list .slt-option.selected::after {position:absolute;right:1.6rem;top:50%;transform: translateY(-50%);width: 1.6rem;height: 1.6rem;content: '';background: url('../../web/img/common/check_low_on.svg');}
.slt-list .slt-option.selected{ font-family: var(--font-family); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); line-height: var(--line-height-100); color: var(--gray-800);}
.open .slt-list {display: block;}
.slt-icon {position: absolute;top:1.2rem;right:1.6rem; width: 2rem; height: 2rem; background-image: url('../../images/common/ic_arrow_down.svg'); background-position:-92px -25px;}
.disabled .slt-icon {background-position: -92px -72px;}
.open .slt-icon {transform: rotate(-180deg);}
.input-basic.input-basic-slt.disabled .slt-placeholder{color: var(--gray-500);}
/* ====================================
   ✅ List
==================================== */
.payment-wrap{display: flex; flex-direction: column; gap: 0.8rem;}
.payment-list {display: flex; flex-direction: column; gap: 0.4rem;}
.payment-item {display: flex; justify-content: space-between; align-items: center;}
.payment-list.big-type .payment-item { height:2.6rem}
.payment-list.border-type{position: relative;}
.payment-list.border-type{ margin-top: .8rem; padding-left:.8rem; border-left:.4rem solid var(--gray-200)}
.payment-item.sub-type {align-items: flex-start}
.payment-item .payment-value-wrap {display: flex; flex-wrap: wrap; }
.payment-item .payment-value-wrap > * {width: 100%;text-align: right;}
.payment-item .payment-label {flex-shrink: 0; max-width: 50%;}
.payment-total-wrap {margin: 1.6rem 0 0.4rem; padding-top: 0.8rem; border-top: 1px solid var(--gray-200);}
.payment-extra-info {display: block; margin-top: 0.4rem;}
.payment-item.payment-discount .payment-value-discount {color: var(--red-600);}
.payment-period span{display: block; text-align: right;}
.payment-total-row {display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem;}
.payment-badge {display: inline-flex; align-items: center; justify-content: center; padding: 0.2rem 0.6rem; border-radius: 0.4rem; background-color: var(--green-100); font-family: var(--Pretendard); font-weight: var(--font-weight-medium); font-size: var(--font-size-xs); line-height: var(--line-height-100); color: var(--green-700);}
.payment-total-value {flex: 1; text-align: right; font-family: var(--Pretendard); font-weight: var(--font-weight-bold); font-size: var(--font-size-xl); color: var(--gray-900);}
.payment-benefit-row {text-align: right; margin-top: 0.4rem;}
.payment-benefit-row span.real-price{display: block;}
.bg-loding .payment-benefit-row span.real-price{display: none;}
.bg-loding .payment-benefit-row .skeleton-box{width: 7.2rem; height:1.2rem}
.pay-detail-discout {margin-top:.8rem; padding-top:1.2rem; border-top: 1px solid var(--gray-200);}
.pay-detail-discout .payment-item + .payment-item{margin-top: .8rem;}
.pay-detail-unit .payment-list { margin-top: .8rem; padding-left:.8rem; border-left:.4rem solid var(--gray-200)}

/* ====================================
   ✅ section
==================================== */
.n-inner { /*background-color: var(--neutral-100);*/ font-family: var(--font-family);}
.n-inner * {box-sizing: border-box;}
.n-sec { background-color: var(--white);}
.n-sec + .n-sec { margin-top: .8rem;}
.section-cont {padding: 0 1.6rem 1.6rem 1.6rem;}
/* ====================================
   ✅ bottom fix menu
==================================== */
/* .btm-quick-menu {position: fixed;bottom:0; left:0; right:0; z-index: 20; transition:transform 0.3s ease-in-out; will-change: transform; box-sizing: border-box;} */
.btm-quick-menu.hide { transform:translateY(100%);}
.btm-quick-menu .btm-quick-menu-info {display: flex; align-items: center;justify-content: center; padding:.4rem 1.6rem; flex-wrap: wrap; box-sizing: border-box;}
  /* p 태그를 순서대로 보였다 안보였다 반복하는 애니메이션 */
.btm-quick-menu .btm-quick-menu-info { position: relative; height: 2.6rem; /* 최대 p 높이에 맞게 조절 */overflow: hidden;}
.btm-quick-menu .btm-quick-menu-info p {position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 100%;opacity: 0;height: auto;text-align: center;transition: opacity 0.6s;animation: btm-quick-menu-p-fade 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;/* animation-delay는 아래에서 nth-child로 지정 */pointer-events: none; /* 클릭 방지 */}
.btm-quick-menu .btm-quick-menu-info p.no-animation {animation: none; opacity: 1;}
.btm-quick-menu .btm-quick-menu-info p:nth-child(1) { animation-delay: 0s; }
.btm-quick-menu .btm-quick-menu-info p:nth-child(2) { animation-delay: 2s; }
@keyframes btm-quick-menu-p-fade {
  0% { opacity: 0; }
  5% { opacity: 1; }
  45% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 0; }
}
/* ====================================
     ✅ 예약규정 
==================================== */
.term-agree-all {display:flex; align-items:center;  margin-bottom: .8rem; border-radius: .8rem; height: 4.8rem;}
.term-agree-all label {padding-left:1.6rem; width:100%; height:100%;}
.term-agree-all button {white-space: nowrap;}
.term-detail {padding-left:1.6rem;}
.term-detail .checkbox-low { position: absolute; top: 50%; transform: translateY(-50%); left: 0rem; width: 4rem;}
.term-detail-itm .checkbox-low-box {margin-right:.4rem;}
.term-detail-itm {display: flex; height: 3.2rem; position: relative; padding-left:2.4rem;}
.term-detail-itm +.term-detail-itm {margin-top:.4rem;}
.term-detail-itm button {display:flex; justify-content:space-between;align-items: center; width: 100%; color: var(--gray-700); text-align: left;}
.term-detail-itm button i {display: flex; align-items: center;}


/* ====================================
     ✅ alert
==================================== */
.alert-type-modal {display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(33,37,41,.25); box-sizing: border-box;}
.alert-type-modal-inner {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: 1.2rem; box-shadow: 0 4px 24px rgba(37,37,37,0.18); width: 32rem; max-width: 90vw; padding: 1.6rem; display: flex; flex-direction: column; gap: 1.2rem;}
.alert-type-modal-inner .btn-group{padding: 0;}
.alert-type-modal-title {text-align: center;}
/* ====================================
     ✅ table-row 
==================================== */
.table-row {display: grid; grid-template-columns: var(--label-width) 1fr; width:100%; gap: .4rem;}
.table-row .has-sub {flex-direction: column; /*gap: 0.4rem;*/ flex-wrap: wrap; width: 100%;}
.table-row-tit,
.table-row-cont{display: flex;}
.table-row-cont.end-type{text-align: right;}
/* 비율 클래스 */
.table-row.label-w-23  { --label-width: 23.78%; }
.table-row.label-w-39 { --label-width: 39.02%; }
.table-row.label-w-48 { --label-width: 48.78%; }
.table-row.label-w-58 { --label-width: 58.54%; }
.table-row.label-w-78 { --label-width: 78.66%; }


/* ====================================
     ✅ 스켈리톤 
==================================== */
.bg-loding .real-price {display: none;}
.skeleton-box {display: none; width: 9.6rem; height: 2.2rem; border-radius: 0.4rem;}
.bg-loding .skeleton-box {display: inline-block;}
.payment-total-row .skeleton-box {width: 12.7rem; margin-left: auto;}
.menu-unit-price.payment-section{height: 2rem; margin-top:.3rem;}
.menu-unit-price.payment-section .skeleton-box{width: 12.2rem; height: 2rem;}

/* ====================================
     ✅ 항공
==================================== */

.flight-info {display: flex; flex-direction: column;}
.final-conf-cont-inner .flight-info,
.section-cont > .flight-info {gap: 1.2rem;}
.flight-info .flight-segment .flight-arr{width: 1.6rem; height: 1.6rem;}
.flight-info .flight-segment .flight-arr img{width: 100%;}
.flight-info .flight-segment div:nth-of-type(1){display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem;}
.flight-info .flight-segment div.city{margin-bottom: 0.4rem; gap: 0.2rem;}
.flight-info .flight-segment div.city em{margin-left: 0.2rem;}
.flight-info .flight-segment > div{display: flex; align-items: center;}
.flight-info .flight-segment > div .text-secondary{display: flex; align-items: center;}

/* ====================================
     ✅ 탑승자 정보
==================================== */
.passenger-section .passenger-elem-item {padding: 1.7rem 1.6rem;  border: 1px solid var(--gray-200);  border-bottom: none;  border-radius: 0;}
.passenger-section .passenger-elem-item:first-of-type {border-radius: 0.8rem 0.8rem 0 0;}
.passenger-section .passenger-elem-item:last-of-type {border-bottom: 1px solid var(--gray-200); border-radius: 0 0 0.8rem 0.8rem;}
.passenger-section .passenger-elem-item:first-of-type:last-of-type {border-radius: 0.8rem;}
.passenger-section .passenger-elem-item > a {display: flex; flex-direction: column; gap: 0.8rem;}
.passenger-section .passenger-elem-item > a > div strong + strong{margin-left: 0.8rem;}

body.no-scroll {overflow: hidden; /* iOS용 */ touch-action: none;}
/* [data-popup]{position:fixed; left:0; right:0; bottom:0;  height: calc(var(--vh) * 100); background:#fff; transform:translateY(100%); transition:transform .35s ease; z-index:9999; display:flex; flex-direction:column;} */
/* ====================================
     ✅ 공통레이어 
==================================== */
[data-popup] {
  position: fixed;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  background: #fff;
  height: calc(var(--vh) * 100);
  max-height: calc(var(--vh) * 100);
  min-height: calc(var(--vh) * 100);
  height: auto;
  transform: translateY(100%);
  transition: transform .35s ease;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

[data-popup].active{transform:translateY(var(--popup-active-translate-y, 0px));}
/* [data-popup] .layer-section{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding: 1.6rem 1.6rem 5rem;   overscroll-behavior:contain;} */
[data-popup-style="radius"] {border-radius: 1.6rem 1.6rem 0 0;}
[data-popup] .layer-section {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 1.6rem 1.6rem 5rem;
}
[data-popup] .section-cont {
   flex: 1;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   background: #fff;
}

[data-popup="layer-passenger"]{z-index:10000;}
.layer-dim{position:fixed;inset:0;background:rgba(0,0,0,0.16);opacity:0;visibility:hidden;transition:opacity .25s ease;z-index:9998;}
.layer-dim.active{opacity:1;visibility:visible; display: block;}
.passenger-form{padding:1.6rem 0 2rem;}
.passenger-form-sm-title{display: flex; justify-content: space-between; align-items: baseline; flex:1;}
.passenger-form-section{margin-top:0.8rem;}
.layer-passenger header .caption-sm-r{padding:0 1.6rem 1.6rem 1.6rem;}
.passenger-layer-tabs{display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width: none !important; padding:0 1.6rem; border-bottom:1px solid var(--gray-200);}
.passenger-layer-tabs::-webkit-scrollbar {display: none !important; width: 0 !important; height: 0 !important;}
.passenger-layer-tabs button{padding:1rem 0.8rem 1.6rem;flex:0 0 auto;position:relative;flex-shrink: 0; padding: 1rem .8rem; border: none; background: none; cursor: pointer; transition: color 0.3s; color: var(--gray-500);}
.passenger-layer-tabs button.active{color:var(--gray-900); font-weight: var(--font-weight-bold);}
.passenger-layer-tabs button.active:before{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background-color:var(--gray-900);}
.passenger-notice{padding: 1.2rem; border-radius: 0.4rem;}
.passenger-stop-modal {display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(33,37,41,.25); box-sizing: border-box;}
.passenger-stop-modal-inner {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: 1.2rem; box-shadow: 0 4px 24px rgba(37,37,37,0.18); width: 320px; max-width: 90vw; padding: 1.6rem; display: flex; flex-direction: column; gap: 1.2rem;}
.passenger-stop-modal-inner .btn-group{padding: 0;}
.passenger-stop-modal-title {text-align: center;}
.passport-guide-wrap,
.passport-guide-wrap2{display: none;}
.passport-guide-wrap.on,
.passport-guide-wrap2.on{display: block;}
.passport-guide-img{margin-top: 0.4rem; display: none;}
.passport-guide-wrap.on .passport-guide-img.on,
.passport-guide-wrap2.on .passport-guide-img.on{display: block;}
.bul-type1 dd{padding-left: 1rem; position:relative;}
.bul-type1 dd:before{content:''; position: absolute; top: 0.8rem; left: 0; width: 0.25rem; height: 0.25rem; border-radius: 100px; background-color: #6A7282;}




.policy-flight-cont {margin:.8rem 1.6rem 0; height:16.8rem; overflow-y: scroll;}
.layer-pay-detail .pay-detail-unit + .pay-detail-unit { margin-top: 1.2rem;}
.pay-detail-discout {margin-top:.8rem; padding-top:1.2rem; border-top: 1px solid var(--gray-200);}
.pay-detail-discout .payment-item + .payment-item{margin-top: .8rem;}

.layer-scroll-box .sec-control-tab {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--white);
  margin:0 -1.6rem;
}

@media screen and (max-width: 768px) {
    body {
        touch-action: pan-x pan-y; 
    }
}

/*여행서비스쿠폰*/
.input-elem-btn.auth-btn:disabled{ border-color: var(--gray-300); color:  var(--gray-400); }
.auth-phone-inner .auth-phone-timer{margin-top:.4rem;}
/* ====================================
     ✅ sectionList-ver
==================================== */
.selection-list-ver {width:100%; border-radius: .8rem;}
.selection-list-ver label {width:100%; padding:1.6rem; }
.selection-list-ver.active {border-color: var(--gray-900); background-color:var(--gray-50);}
/* ====================================
     ✅ select style button
==================================== */
.btn-type-slt {border-radius: .4rem;}
.btn-type-slt {position: relative;}

/* bg box */
.notice-box {padding:1.2rem; display: flex; flex-direction: column; gap: 0.4rem;}
.list-type li{position: relative; padding-left: 1.6rem;}
.list-type li:before{content:'·'; position: absolute; top: 0; left: 0.4rem; font-size: 2rem; line-height: 0.8;}

/* 항공 레이어 */
  
.data-schedule {padding-bottom: 1.6rem;}
.data-schedule header {display: flex; padding:1.3rem 0; gap: 0 0.3rem;}
.data-schedule header .txt-data3{margin-left: 0.3rem; flex: 1; -webkit-box-flex: 1;}
.data-schedule header .txt-data3 .city{display: flex; align-items: center; gap: 0.2rem;}
.data-schedule .data-flight {height: auto;}
.data-schedule .data-flight .total-time{margin-top: 1.6rem;}
.data-schedule p.total-time strong {display: block; padding: 1.2rem 0; text-align: center;}
.data-schedule + p.guide-txt{padding: 1.6rem 0; text-align: center;}
.data-flight > li{position: relative; padding-bottom:2.4rem; padding-left: 10.8rem; }
.data-schedule .data-flight > li:not(:last-child):before {content: ""; position: absolute; left: 8.95rem; top: 1rem; bottom: -1rem; border-left: 0.1rem solid #00A6F4;}
.data-flight .city {position: relative;}
.data-flight .city > strong{display: block;}
.data-flight .city:only-child {min-height: 5.6rem;}
.data-flight .city:before {content: ""; position: absolute; left: -2.2rem; top: 0.4rem; background-color: #00A6F4; width: 0.7rem; height: 0.7rem; border-radius: 100px; border: 0.1rem solid #fff;}
.data-flight .city time {position: absolute; left: -11rem; top: 0; width: 7.7rem; padding-top: 2rem;}
.data-flight .city time b {position: absolute; left: 0; top: 0; width: 100%;}
.data-flight .city strong {margin-bottom: 0.3rem;}
.data-flight [class*="flight"] span:not(.n-badge) {display: flex; align-items: center;}
.data-flight .flight-info {margin: 0.8rem 0 0;}
.data-flight .flight-info .flight-tooltip{display: flex;}
.data-flight .flight-info span:last-of-type em {margin-right: 0.4rem;}
.data-flight .flight-info .info-tooltip-txt{min-width: 17rem;}
.data-flight .flight em {position: relative; text-align: left; width: auto;}
.data-flight .flight i.ico-baggage {display: block; width: 1.4rem; height: 1.4rem; margin-left: 0.4rem; background: url('../../images/common/ic_ baggage_1_gy5_ou.svg') no-repeat; background-size: contain; font-size: 0;}
.data-flight .seat-info{display: flex; align-items: center; margin-top: 0.4rem;}
.data-flight .seat-info2{margin-top: 0.4rem;}
.data-flight .seat-info .n-badge,
.data-flight .seat-info2 .n-badge{margin-right: 0.4rem;}
.data-flight .flight strong.flight-time{position: absolute; left: 0; top: 4.5rem; width: 7.7rem;}
.data-flight > li.flight-via{max-height: 11rem; min-height: 10rem; padding-bottom: 5.2rem;}
.data-flight > li.flight-via + .flight-via2{margin-top: -2rem;}
.data-schedule .data-flight > li.flight-via:before {background-color: transparent; border-left: 0.1rem dashed #00A6F4;}
.data-schedule .data-flight > li.flight-via2:before {border-left: 1px solid #80CCFD; background: none;}
.data-schedule .data-flight > li.flight-via .city:before, 
.data-schedule .data-flight > li.flight-via2 .city:before {width: 0.6rem; height: 0.6rem; border-width: 0.2rem; background-color: #fff; border-color: #80CCFD;}
.flight-info .flgiht-wait{position:absolute; top:4.5rem; left: 0;}
.data-flight-wrap .total-time{border-radius: 0.4rem;}
[data-popup] .section-cont{flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff;}
.depart-tooltip{left:auto; right: 0;}
.via-tooltip{left:50%; transform: translate(-50%, 0);}
/* top radius popup */
.top-round-popup{max-height: calc(var(--vh) * 100); height: calc(100% - 5.6rem); min-height: unset; border-radius: 1.2rem 1.2rem 0 0;}
.top-round-popup > header{background-color: #fff; border-radius: 1.2rem 1.2rem 0 0;}
.top-round-popup > header .layer-first-title{padding: 1.5rem 1.6rem;}
.top-round-popup > header .layer-first-title h1{min-height: 2.8rem;}
.top-round-popup header{}
.top-round-popup > header p{margin-top: 1.2rem;}
.top-round-popup > header p span{display: block;}
.top-round-popup .final-conf-cont{padding: 1.6rem;}
.top-round-popup .final-conf-cont .final-conf-cont-inner{padding: 1.6rem; display:flex; flex-direction: column; gap: 1.2rem; background-color: #fff; border-radius: 1.2rem;}
.top-round-popup .final-conf-cont .btn-group.full-type{padding: 0;}

/* 쿠폰 */
.select-list-hor { display: flex; flex-direction: column; gap: 2.3rem; }
.select-list-hor-box > a { display: flex; align-items: center; justify-content: space-between; padding: 1.7rem 1.6rem; border: 1.5px solid #d1d4da; border-radius: 12px; background: #fff; }
[data-popup-open="layer-coupon"] {display: flex; align-items: center;}

.aside-inner{max-width: 110rem; margin: auto; display: flex; justify-content: space-between; padding-top: 8.1rem;}
.n-inner-left{}
.aside-pay{width: 37.2rem; padding: var(--spacing-4);}
.aside-pay .btn-quick-menu .btn-group{padding-bottom: 0;}