/* Eric Meyer's Reset CSS v2.0 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

html {

    position: relative;
    margin: 0;
    padding: 0;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;

}

body {
  line-height: 1;
  font-family: 'Pretendard', Arial, sans-serif;
  overflow-x: hidden;   /* 좌우 스크롤만 차단 */
  position: relative;
}


button {
    font-family: 'Pretendard', Arial, sans-serif;
    text-align: center;
}


ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

html,
body {
    touch-action: manipulation;
    /* 빠른 탭 반응 */
    -webkit-tap-highlight-color: transparent;
    /* 터치 시 하이라이트 제거 */
    overscroll-behavior: contain;
    /* 스크롤 튐 방지 */
    scroll-behavior: smooth;
    /* 부드러운 스크롤 */
    margin: 0;
    padding: 0;
    background: #fff;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}



.global-loader {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.global-loader.hidden {
  display: none;
}

.spinner {
  width: 46px;
  height: 46px;
  border: 4px solid #E5E7EB;
  border-top: 4px solid #5B7CFA;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner-big {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


#loadingOverlayProfilep {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(4px);

    display: none; /* 기본 숨김 */

    align-items: center;
    justify-content: center;

    z-index: 9999;
    transition: opacity 0.2s ease;
}

.spinner-profilep {
    width: 40px;
    height: 40px;
    border: 3px solid #ddd;
    border-top: 3px solid #5f4bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


.width-1280container {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 99999;
}

.width-1280container2 {
    max-width: 1980px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 10;
}

.nav-item-top {
    display: none;
    text-decoration: none;
}

.app-bottom-nav{
    text-decoration: none;

}

.top-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 24px 0px 18px;
    max-width: 1920px;
    height: 56px;
}
.top-iconmenu{
    display: flex;
    gap: 16px;
}

.top-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 6px;

}

.top-logo-img {
    margin-top: 4px;
    height: 32px; width: 32px;
}

.top-logo-text {
    font-size: 22px;
    line-height: 32px;
    /* 적절한 비율로 행간 설정 */
    color: #111111;
    font-weight: 550;
    padding: 0;
    /* 텍스트 상자의 내부 간격 없음 */
    letter-spacing: -0.025em;
    text-decoration: none;
}

.top-nav-menu {
    display: flex;
}

.top-button-earth {
    border-radius: 12px;
    margin: auto;
    padding-top: 2px;
    position: relative;
    cursor: pointer;
}
.top-button-cart {
    border-radius: 12px;
    margin: auto;
    padding-top: 2px;
    position: relative;
    cursor: pointer;
}
.top-button-cart:hover .language-text {
  color: #0075ff; 
}
.top-button-cart:hover #cartImg {
  content: url("../assets/img/cart_2px_0075ff.png");
}
.cart-badge-indexp{
  position: absolute;
  top: +2px;
  right: -2px;
  background-color: #ff3b30; /* 빨간색 */
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  /* display: none;  */
  display: flex; 
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid #f0f0f0;
}
.top-button-person {

    border-radius: 12px;

    padding-right: 0px;
}

.top-menu-icon-earth {
    height: 28px;
    margin-right: 4px;
}
.top-menu-icon-hamburger{
    width: 28px; height: 28px;
}
.top-menu-icon-person {
    height: 24px;
}
.header-container {
  position: sticky; /* or fixed */
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid transparent; /* 👈 처음엔 안 보이게 */
  transition: border-color 0.2s ease, background 0.2s ease;
  margin-bottom: 4px;

}
.header-container.is-scrolled {
  border-bottom-color: rgba(0, 0, 0, 0.06);
  
}
.topNavlink {
    text-decoration: none;
    color: #111111;
    margin: 4px;
    display: none;
}

.header-inner{
  max-width: 1920px;
  margin: 0 auto;
  height: 56px;
}
.sticky-test {
  position: sticky;
  top: 0;
  background: red;
  height: 60px;
}
/* .main-container{
    padding-top: 124px;
} */
/* 모달 스타일 */
.modal {
    position: fixed;
    top: 36px;
    right: -10px;

    background-color: rgba(255, 255, 255, 1); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); /* 사파리/iOS 대응 */
    box-shadow: 12px 12px 12px rgba(67, 0, 209, 0.1);
    border-radius: 32px;

    padding: 10px;
    width: 300px;
    z-index: 9999;

    box-sizing: border-box;
    height: 620px;
    overflow: hidden;

    /* 🔽 애니메이션용 */
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;

    transition: opacity 0.25s ease, transform 0.25s ease;
    
}
.modal.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}




.modal-content ul {
    padding: 0;
    margin-top: 10px;

    overflow-y: auto;
    max-height: 460px;
    list-style: none;
}

.modal-content li {
    padding: 20px 20px 20px 28px;
    cursor: pointer;
    /* margin-bottom: 12px; */
    color: #111111;
    font-weight: 500;
    border-radius: 20PX;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: none;

    font-size: 14px;
}
.lang-left-indexp {
  display: flex;
  align-items: center;
  gap: 12px;
}

.language-title-box-indexp{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 20px 16px 20px;
}
.modal-content li:hover {
    background: rgba(0, 117, 255, 0.3);
    color: #0075ff;
    transition: background-color 0.3s ease;
    /* hover 시에만 트랜지션 적용 */

}

.language-title-text-img-box{
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;

}

.language-title-img{
    width: 24px; height: 24px;
}


.language-title {
    color: #111111;
    font-size: 18px;
    line-height: 30px;
    font-weight: 700;
}
.language-title-close-img{
    width: 18px;
    height: 18px;
    margin-right: 2px;
    margin-bottom: 2px;
    cursor: pointer;
}
.flag-icon {
    width: 24px;
    height: 24px;
    border-radius: 100%;
    border: 2px solid #f0f0f0;
}
.lang-check-indexp {
  width: 18px;
  height: 18px;
  margin-right: 20px;
}
.lang-check-profilep {
  width: 18px;
  height: 18px;
  margin-right: 20px;
}
.search-language {
    padding: 14px 20px 14px 44px;
    margin: 16px 12px 26px;
    border: none;
    border-radius: 100px;
    font-size: 16px;
    height: 48px;
    box-sizing: border-box;
    background-color: #f7f7fb;
    width: 92%

}
.search-language::placeholder{
    color: #7f8c9d;
    font-weight: 500;
    font-size: 12px;
}

.search-language:focus {
    background-color: #ffffff;
    border: 1px solid #111111; /* 원하는 색 */
    outline: none;
    box-shadow: none; /* glow 제거 */
}
.search-language-wrap-indexp {
  position: relative;
  border-bottom: 1px solid #f0f0f0;
}

.search-language-img-indexp{
    width: 20px; height: 20px;
    position: absolute;
    left: 32px;
    top: 46%;
    transform: translateY(-50%);
    opacity: 0.7;
    pointer-events: none;
}
.search-language-img-planTypep{
    width: 20px; height: 20px;
    position: absolute;
    left: 20px;
    top: 39%;
    transform: translateY(-50%);
    opacity: 0.7;
    pointer-events: none;
    z-index: 10;
}

/* 메인배너 */

.main-banner {
    height: 230px;
    margin: 0 auto 24px;
    border-radius: 20px;
    width: calc(100% - 40px);
    display: flex;
    justify-content: flex-start;
    position: relative;
    border: none;
    overflow: hidden; 

    /* 맑은 느낌을 위해 그림자도 투명하게 조정 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.main-banner::before {
    content: '';
    position: absolute;

    width: 200px;
    height: 200px;

    top: 62px;
    left: -142px;

    background: linear-gradient(
        173deg,
        rgba(204, 0, 255, 0.4) 0%,
        rgba(255, 0, 0, 0.4) 50%,
        rgba(255, 214, 0, 0.4) 100%
    );

    filter: blur(50px);

    z-index: 0;
    pointer-events: none;
}


/* 오른쪽 그라데이션 바 (29도) */
.main-banner::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    /* 피그마 좌표 1528, -524 반영 */
    top: -100px;
    left: 252px; 
    
    /* 피그마 29도 반영 (CSS 각도로 변환) */
    background: linear-gradient(
        209deg, 
        rgba(0, 82, 255, 0.4) 0%,   /* 0% 0052FF */
        rgba(153, 105, 255, 0.4) 98% /* 98% 9969FF */
    );
    
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}











.banner-cloud-icon-indexp{
    display: none;
}
.banner-cloud-icon-indexp2{
    display: none;
}
.banner-cloud-icon-indexp3{
    display: none;
}
.app-down-btn-container-indexp{
    display: none;
}

/* 배너 안의 흰색 글씨들에 이 스타일을 적용하세요 */
.main-banner .main-banner-container {
    color: #ffffff !important;
    font-weight: 700; 
    z-index: 2;

    margin-top: 20px;
    position: relative;
}

.main-banner-container {
    height: 160px;
    margin: 10px auto 24px;
    width: calc(100% - 40px);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 30px;

}

.banner-brand-name{
   font-size: 12px;
   font-weight: 500;
   color: #111111; 
   height: 18px;
}
.banner-title {
    font-size: 24px;
    font-weight: 550;
    line-height: 34px;
    text-align: center;
    color: #111111;
    margin-bottom: 8px;
}

.banner-sub-title {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #505050;
    text-align: center;
}

.main-banner-img {
    width: auto;
    height: 200px;
    object-fit: cover;
    border-radius: 20px;
    position: absolute;
    right: -20%;
    top: -0px;
    z-index: 100;
    /* 높은 값으로 설정 */
}

.language-text {
    font-size: 16px;
    display: none;
}

.main-searchbar {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;

    border-radius: 16px;
    min-height: 70px;
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05),
        0px -1px 10px rgba(67, 0, 209, 0.03);

    padding: 20px 20px 20px 24px;

    box-sizing: border-box;
    margin: -70px 40px 60px 40px;
    border: 1px solid #f8f8fa;
}


.main-search-label {
    font-size: 16px;
    line-height: 30px;
    font-weight: 700;
    line-height: 24px;
    color: #6F5BFF;
    height: auto;
}

.search-icon {
    width: 30px;
    height: 30px;
}

.label-icon {
  display: grid;
  align-content: center;
  justify-content: center;
  padding-top: 6px;

}

#mainSearchBar {
    height: auto;
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    color: #999999;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;

}

.mainSearchBarlinkbox {
    height: 32px;
    border-radius: 12px;
    padding-left: 10px;
    border: 1px solid #f8f8fa;
    background-color: #f8f8fa;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    text-decoration: none;
}


/* main-banner-dot */

.main-banner-dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    /* 배너와의 간격 */
}

.main-banner-dot {
    width: 6px;
    height: 6px;
    margin: 0px 6px;
    border-radius: 100%;
    background-color: #dbdbdb;
}

.active {
    background-color: #0075FF;
}

/* 서브-1 */

.sub-1-container {
    display: flex;
    justify-content: start;
    align-items: flex-end;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 48px;
}

.sub-1-title {
    font-size: 20px;
    color: #111111;
    font-weight: bold;
    line-height: 24px;
    padding-left: 4px;
}
.sub-1-title-img{
    width: 24px; height: 24px;
}




.sub-1-container-card {
    margin: 32px 20px 3px;
    padding-left: 24px;
    padding-right: 24px;

    min-height: 160px;

    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto !important; /* JS 순간이동 방해 금지 */
    scroll-snap-type: none !important;

    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    padding-bottom: 20px;
    gap: 5px;
}



/* 💡 화면 왼쪽 70px 지점에 투명한 레이더를 하나 설치합니다. */
#scroll-anchor {
    position: absolute;
    left: 70px;
    top: 0;
    width: 1px;
    height: 100%;
    pointer-events: none;
    visibility: hidden;
}

.sub-1-container-card::-webkit-scrollbar {
    display: none;
}
.main-sub-1-card {
    min-width: 60px;
    min-height: 56px;
    flex-shrink: 0; /* 너비 보존 */
    will-change: transform;
    
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    /* 💡 transition 시간을 자식들과 0.2s로 통일 */
    transition: all 0.2s ease-out; 
    transform: translateZ(0);
    -webkit-backface-visibility: hidden; /* 미세한 떨림 방지 */
    backface-visibility: hidden;
    transform-origin: left center !important;
}

/* 2. 기본 이미지 박스 (부모 명시) */
.main-sub-1-card .main-sub-1-cardimg {
    width: 30px;
    height: 30px;
    border-radius: 12px;
    display: flex;
    background-color: #ffffff;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-out; /* 0.3s -> 0.2s */
}

/* 3. 기본 이미지 자체 (부모 명시) */
.main-sub-1-card .main-sub-1-cardimg img {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: 2px solid #f8f8fa;
    box-sizing: border-box;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05);
    transition: all 0.2s ease-out; /* 0.3s -> 0.2s */
}

/* 4. 기본 텍스트 스타일 */
.main-sub-1-card .sub-1-card-bottom-text-1 {
    font-size: 12px;
    color: #9CA3AF;
    font-weight: 400;
    transition: all 0.2s ease-out; /* 0.3s -> 0.2s */
}

.sub-1-card-price-container {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    
    /* [핵심] 일반 상태에서는 숨기거나 아주 작게 설정 */
    opacity: 0;                /* 완전히 숨김 */
    transform: scale(0.6);     /* 60% 크기로 축소 */
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 튕기는 듯한 효과 */
    
    /* 가격이 나타날 공간은 미리 확보 (카드가 덜컹거리지 않게) */
    height: 30px;
    margin-top: 8px;
}
.price-amount {
    font-size: 0.9rem;          /* 비활성일 땐 작게 */
    font-weight: 700;
    color: #aaa;               /* 색상도 무채색으로 힘을 뺌 */
    line-height: 1;
    transition: all 0.4s ease; /* 폰트 크기 변화를 부드럽게 */
}

.price-currency, .price-suffix {
    font-size: 0.7rem;          /* 비활성일 땐 아주 작게 */
    font-weight: 500;
    color: #ccc;
    transition: all 0.4s ease;
}
/* ======================================================
   🔥 여기서부터 [is-active] 상태 (주인공 카드)
   ====================================================== */

/* 커진 전체 카드 너비 */
.main-sub-1-card.is-active {
    min-width: 100px !important;
    /* 💡 아주 미세하게 scale을 주면 렌더링이 더 쫀득해집니다 */
    white-space: nowrap; 
    overflow: visible;
    transform: translateZ(0) scale(1.02); 
    z-index: 10; /* 주인공이 위로 올라오게 */
    transition: all 0.15s ease-out !important;
}

/* 커진 이미지 박스 */
.main-sub-1-card.is-active .main-sub-1-cardimg {
    width: 110px;
    height: 70px;
    margin-bottom: 14px;
}

/* 커진 이미지 자체 */
.main-sub-1-card.is-active .main-sub-1-cardimg img {
    width: 70px;
    height: 70px;
}

/* 커진 텍스트 */
.main-sub-1-card.is-active .sub-1-card-bottom-text-1 {
    font-size: 18px;
    color: #111111;
    font-weight: 600;
}

.main-sub-1-card.is-active .sub-1-card-price-container {
    opacity: 1;                /* 선명하게 노출 */
    transform: scale(1.1);     /* 110% 크기로 확대하여 강조 */
}
.main-sub-1-card.is-active .price-currency,
.main-sub-1-card.is-active .price-suffix {
    font-size: 20px;          /* 활성화 시 읽기 편하게 커짐 */
    color: #0075ff; 
    font-weight: 600;               /* 텍스트 색상도 진해짐 */
}
.main-sub-1-card.is-active .price-amount {
    font-size: 20px;          /* 숫자를 가장 크게 */
    color: #0075ff;           /* 강조 컬러 */
    font-weight: 900;         /* 가장 굵게 */
    transition: all 0.4s ease;
}

/* 서브2 */

.sub-2-container {
    display: flex;
    justify-content: start;
    align-items: flex-end;
    margin-left: 24px;
    margin-right: 20px;
    margin-top: 60px;
}

.sub-2-title {
    font-size: 20px;
    color: #111111;
    font-weight: bold;
    line-height: 24px;
    padding-left: 4px;
}


.sub-2-container-card {
    margin: 12px 20px;
    display: flex;
    position: relative;
    padding-bottom: 20px;
    /* 하단 여백 추가 */
}


/* 인디케이터부분 */
.indicator-container {
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 숫자 텍스트를 오른쪽 정렬 */
    padding: 0 20px;
}
.indicator-bar {
    width: 55%;
    height: 4px;
    background-color: #f0f0f0; /* 배경 회색 바 */
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.indicator-progress {
    width: 10%; /* (1/10) 기본 너비 */
    height: 100%;
    background-color: #4300D1; /* 피그마의 보라색 포인트 */
    border-radius: 2px;
    transition: transform 0.1s ease; /* 부드러운 움직임 */
    transform-origin: left;
}
.indicator-text {
    margin-top: 8px;
    font-size: 14px;
    color: #888;
}
#current-index {
    color: #333;
    font-weight: bold;
}
/* 인디케이터부분 */




/* 이벤트부분 */
.sub-2-container-card-indexp{
    display: flex;
    gap: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 24px;
    margin-bottom: 40px;
    padding-bottom: 20px;
    padding-right: 10px;

    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    /* 🔽 스크롤바 숨김 */
    -ms-overflow-style: none;  /* IE, Edge */
    scrollbar-width: none;     /* Firefox */
}
.sub-2-container-card-indexp::-webkit-scrollbar {
    display: none;
}

.sub-2-card-indexp-1{
    padding-top: 10px;

    background-color: #F6F8FF;
    width: 140px; height: 140px;
    box-sizing: border-box;
    border-radius: 12px;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05);
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}
.sub-2-card-indexp-2{
    padding-top: 5px;
    padding-left: 18px;

    background-color: #F6F8FF;
    width: 140px; height: 140px;
    box-sizing: border-box;
    border-radius: 12px;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05);
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}
.sub-2-card-indexp-3{
    padding-top: 14px;

    background-color: #F6F8FF;
    width: 140px; height: 140px;
    box-sizing: border-box;
    border-radius: 12px;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05);
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}
.sub-2-card-indexp-4{
    padding-top: 5px;
    padding-left: 12px;

    background-color: #F6F8FF;
    width: 140px; height: 140px;
    box-sizing: border-box;
    border-radius: 12px;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05);
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}

.discount-card-img-indexp{
    width: 124px; height: 92px;
}
.sub-2-card-title-indexp{
    margin-left: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: #111111;

    margin-bottom: 4px;

    width: 120px;
    white-space: normal;          /* 줄바꿈 허용 */
    overflow-wrap: break-word;    /* 긴 단어 줄바꿈 */
    word-break: break-word;       /* 추가 안전장치 */

    /* flex 안이면 꼭 */
    min-width: 0;
}
.sub-2-card-subtitle-indexp{
    margin-left: 12px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #999999;

    width: 120px;
    white-space: normal;          /* 줄바꿈 허용 */
    overflow-wrap: break-word;    /* 긴 단어 줄바꿈 */
    word-break: break-word;       /* 추가 안전장치 */

    /* flex 안이면 꼭 */
    min-width: 0;
}











.main-sub-2-card {
    width: 100%;
    min-height: 120px;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05),
        0px -1px 10px rgba(67, 0, 209, 0.03);
    padding: 10px 20px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    box-sizing: border-box;
    padding-bottom: 20px;
}
.sub-2-title-img-indexp{
    width: 24px; height: 24px;
}
.main-sub-2-card-1 {
    width: 100%;
    margin-bottom: 12px;
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;


}

.main-sub-2-card-1-img {
    background-color: #ffffff;
    border-radius: 100%;
    width: 100px;
    height: 100px;
}

.friend {
    width: 100px;
    height: 100px;
}

.vip {
    width: 80px;
    height: 80px;
}

.review {
    width: 80px;
    height: 80px;
}

.point {
    width: 120px;
    height: 120px;
}

.boxcoin {
    width: 100px;
    height: 100px;
}

.main-sub-2-card-1-text {
    background-color: #ffffff;
    width: 180px;
    height: 70px;
    padding-top: 0px;
    padding-left: 0px;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.main-sub-2-card-1-text-title {
    font-size: 16px;
    color: #111111;
    font-weight: bold;
    line-height: 20px;
    margin: 8px 0px 12px;
}

.main-sub-2-card-1-text-sub {
    font-size: 12px;
    color: #767676;
    font-weight: 400;
    line-height: 16px;
}


/*바텀네비*/



.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: #808080;
    text-decoration: none;
    /* 텍스트 색상 */
}
.app-bottom-nav-profilep{
    color: #0075FF;
}
.app-bottom-nav-myesimp{
    color: #0075FF;
}

.nav-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 5px;
}

.event-container-web {
    display: none;
}

.guide-support-container {
    display: none;
}

.review-container {
    display: none;
}


.app-bottom-nav-slot {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    /* iOS safe-area 대응 */
    padding-bottom: env(safe-area-inset-bottom);

    /* 바텀 여백용 */
    pointer-events: none; 
}

.bottom-nav {
    width: 100%;
    height: 60px;
    background: rgba(255, 255, 255, 0.72);   
    backdrop-filter: blur(20px);            
    -webkit-backdrop-filter: blur(10px);    
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -1px 5px rgba(67, 0, 209, 0.05);
    z-index: 1000;
    border-radius: 20px 20px 0px 0px;
}

.app-bottom-nav-slot .bottom-nav {
    pointer-events: auto;
}


.main-footer-containter {
    display: none;
}

.bottom-margin {
    height: 50px;
}





/* 앱 */
.env-app .app-down-btn-container-indexp{
    display: none;
}
.env-app .event-container-web{
    display: none;
}
.env-app .review-container{
    display: none;
}
.env-app .guide-support-container{
    display: none;
}
.env-app .bottom-nav{
    width: 100%;
    height: 60px;
    background: rgba(255, 255, 255, 0.72);   
    backdrop-filter: blur(20px);            
    -webkit-backdrop-filter: blur(10px);    
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -1px 5px rgba(67, 0, 209, 0.05);
    z-index: 1000;
    border-radius: 20px 20px 0px 0px;
}

.env-app .app-bottom-nav-slot .bottom-nav {
    pointer-events: auto;
}
.env-app .main-footer-containter{
    display: none;
}
.env-app .sub-2-container{
    display: flex;
    justify-content: start;
    align-items: flex-end;
    margin-left: 24px;
    margin-right: 20px;
    margin-top: 60px;
}

.env-app .sub-2-container-card-indexp{
    display: flex;
    gap: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 24px;
    margin-bottom: 40px;
    padding-bottom: 20px;
    padding-right: 10px;

    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    /* 🔽 스크롤바 숨김 */
    -ms-overflow-style: none;  /* IE, Edge */
    scrollbar-width: none;     /* Firefox */
}
.env-app .sub-2-container-card-indexp::-webkit-scrollbar {
    display: none;
}
.env-app .nav-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 5px;
}
.env-app .sub-1-title-img {
  width: clamp(24px, 6vw, 48px);
  height: clamp(24px, 6vw, 48px);
}




/* 웹 */

.env-web .bottom-nav {
    width: 100%;
    /* 전체 너비 */
    height: 60px;
    /* 높이 */
    /* ✅ 기존 배경색 대신 반투명 + 블러 */
    background: none;   /* 60% 불투명 흰색 */
    backdrop-filter: none;            /* 블러 효과 */
    -webkit-backdrop-filter: none;   /* iOS Safari 지원 
    /* 배경색 */
    display: flex;
    /* 플렉스 박스 */
    justify-content: space-around;
    /* 아이템 간격 균등 */
    align-items: center;
    /* 세로 중앙 정렬 */
    box-shadow: none;
    /* 그림자 */
    z-index: 1000;
    /* 다른 요소 위에 고정 */
    border-radius: 0;
    gap: 16px;
    margin-right: 0;
    
    }
.env-web .sub-2-container{
    display: none;
}
.env-web .sub-2-container-card-indexp{
    display: none;
}

.env-web .nav-icon {
    display: none;
    margin: 0 18px 0;
}
.env-web .sub-1-title-img { 
  width: clamp(48px, 5vw, 80px);
  height: clamp(48px, 5vw, 80px);
}



/* 웹 사이즈 */
@media (min-width: 768px) {
    body {
        font-family: 'Pretendard', Arial, sans-serif;
    }
    .top-logo-img{
        width: 50px; height: 50px;
    }

    .top-nav {
        margin: 0 20px 18px;
        /* padding-bottom: 20px; */


    }

    .env-app .main-banner {
    height: 360px;
    margin: 0 auto 24px;
    border-radius: 20px;
    width: calc(100% - 40px);
    display: flex;
    justify-content: flex-start;
    position: relative;
    border: none;
    overflow: hidden; 

    /* 맑은 느낌을 위해 그림자도 투명하게 조정 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    }

    .env-app .main-banner::before {
        content: '';
        position: absolute;

        width: 400px;
        height: 400px;

        top: 62px;
        left: -282px;

        background: linear-gradient(
            173deg,
            rgba(204, 0, 255, 0.4) 0%,
            rgba(255, 0, 0, 0.4) 50%,
            rgba(255, 214, 0, 0.4) 100%
        );

        filter: blur(60px);

        z-index: 0;
        pointer-events: none;
    }


    /* 오른쪽 그라데이션 바 (29도) */
    .env-app .main-banner::after {
        content: '';
        position: absolute;
        width: 400px;
        height: 400px;
        /* 피그마 좌표 1528, -524 반영 */
        top: -200px;
        left: 662px; 
        
        /* 피그마 29도 반영 (CSS 각도로 변환) */
        background: linear-gradient(
            209deg, 
            rgba(0, 82, 255, 0.4) 0%,   /* 0% 0052FF */
            rgba(153, 105, 255, 0.4) 98% /* 98% 9969FF */
        );
        
        filter: blur(70px);
        z-index: 0;
        pointer-events: none;
    }


    .env-app .banner-brand-name{
    font-size: 18px;
    font-weight: 500;
    color: #111111; 
    height: 26px;
    }
    .env-app .banner-title {
        font-size: 32px;
        font-weight: 550;
        line-height: 40px;
        text-align: center;
        color: #111111;
        margin-bottom: 8px;
    }

    .env-app .banner-sub-title {
        font-size: 20px;
        font-weight: 400;
        line-height: 30px;
        color: #505050;
        text-align: center;
    }

    .env-app .main-banner .main-banner-container {
        height: 160px;
        margin: 80px auto 24px;
        width: calc(100% - 40px);
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 30px;

    }

    .env-app .main-searchbar {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;

        border-radius: 32px;
        min-height: 70px;
        background-color: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(20px); 
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05),
            0px -1px 10px rgba(67, 0, 209, 0.03);

        padding: 20px 40px 20px 44px;

        box-sizing: border-box;
        margin: -80px 60px 60px 60px;
        border: 1px solid #f8f8fa;
    }

    .env-app .main-search-label {
        font-size: 24px;
        font-weight: 700;
        line-height: 34px;
        color: #6F5BFF;
        height: auto;
    }

    .env-app #mainSearchBar {
        height: auto;
        border-radius: 12px;
        width: 100%;
        box-sizing: border-box;
        text-decoration: none;
        color: #999999;
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
    }

    .env-app .popular-section {
        background: #ffffff;
        padding: 32px 32px 48px;
        border-radius: 24px;
        margin-bottom: 60px;
    }

    .env-app .sub-1-container {
        display: flex;
        justify-content: start;
        align-items: center;
        /* margin-left: 20px;
        margin-right: 20px; */
        margin-top: 40px;
        gap: 0px;
    }
    .env-app .sub-1-container-card {
        margin: 60px 20px 10px;
        display: flex;
        overflow-x: auto;
        /* 가로 스크롤 유지 */
        overflow-y: hidden;
        /* 세로 스크롤 방지 */
        -webkit-overflow-scrolling: touch;
        scroll-behavior: auto !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        position: relative;
        padding-bottom: 30px;
        gap: 20px; /* JS의 +20 수치와 일치해야 함 */
        /* 하단 여백 추가 */
        min-height: 280px;
        border-radius: 32px;
    }
    .env-app .main-sub-1-card {
        min-width: 100px;
        min-height: 212px;
        flex-shrink: 0; /* 너비 보존 */
        will-change: transform;
        
        background: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        /* 💡 transition 시간을 자식들과 0.2s로 통일 */
        transition: all 0.2s ease-out; 
        transform: translateZ(0);
        -webkit-backface-visibility: hidden; /* 미세한 떨림 방지 */
        backface-visibility: hidden;
        transform-origin: left center !important;
    }
    .env-app .main-sub-1-card .main-sub-1-cardimg {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        background-color: #ffffff;
        align-items: start;
        justify-content: center;
        transition: all 0.2s ease-out; /* 0.3s -> 0.2s */
        padding-top: 10px;
    }

    .env-app .main-sub-1-card .main-sub-1-cardimg img {
        width: 60px;
        height: 60px;
        border-radius: 100%;
        border: 5px solid #f8f8fa;
        box-sizing: border-box;
        box-shadow: 16px 16px 16px rgba(67, 0, 209, 0.08);
        transition: all 0.2s ease-out; /* 0.3s -> 0.2s */
    }

    /* 커진 전체 카드 너비 */
    .env-app .main-sub-1-card.is-active {
        min-width: 180px !important;
        /* 💡 아주 미세하게 scale을 주면 렌더링이 더 쫀득해집니다 */
        white-space: nowrap; 
        overflow: visible;
        transform: translateZ(0) scale(1.02); 
        z-index: 10; /* 주인공이 위로 올라오게 */
        transition: all 0.15s ease-out !important;
    }

    /* 커진 이미지 박스 */
    .env-app .main-sub-1-card.is-active .main-sub-1-cardimg {
        width: 242px;
        height: 120px;
        margin-bottom: 32px;
    }

    /* 커진 이미지 자체 */
    .env-app .main-sub-1-card.is-active .main-sub-1-cardimg img {
        width: 120px;
        height: 120px;
        outline: 2px solid rgba(98, 87, 255, 0.15);
        box-shadow: 14px 14px 14px rgba(67, 0, 209, 0.1);
    }

    /* 커진 텍스트 */
    .env-app .main-sub-1-card.is-active .sub-1-card-bottom-text-1 {
        font-size: 32px;
        color: #111111;
        font-weight: 500;
    }
    .env-app .main-sub-1-card.is-active .sub-1-card-price-container {
        opacity: 1;                /* 선명하게 노출 */
        transform: scale(1.1);     /* 110% 크기로 확대하여 강조 */
        display: flex;
        justify-content: center; 
        margin-left: 20px;    
    }
    .env-app .main-sub-1-card.is-active .price-currency,
    .env-app .main-sub-1-card.is-active .price-suffix {
        font-size: 36px;          /* 활성화 시 읽기 편하게 커짐 */
        color: #0075ff; 
        font-weight: 600;               /* 텍스트 색상도 진해짐 */
    }
    .env-app .main-sub-1-card.is-active .price-amount {
        font-size: 36px;          /* 숫자를 가장 크게 */
        color: #0075ff;           /* 강조 컬러 */
        font-weight: 900;         /* 가장 굵게 */
        transition: all 0.4s ease;
    }
    .env-app .indicator-text {
        margin-top: 16px;
        margin-right: 4px;
        font-size: 24px;
        color: #888;
        font-weight: 500;
    }
    .env-app .sub-1-title {
        font-size: 32px;
        color: #111111;
        font-weight: bold;
        line-height: 46px;
        padding-left: 4px;
    }
    .env-app .sub-1-title-img{

        width: 60px; height: 60px;
    }

    .env-app .sub-2-container {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-left: 52px;
        margin-right: 32px;
        margin-top: 60px;
    }

    .env-app .sub-2-title {
        font-size: 36px;
        color: #111111;
        font-weight: bold;
        line-height: 24px;
        padding-left: 4px;
    }


    .env-app .sub-2-container-card {
        margin: 12px 20px;
        display: flex;
        position: relative;
        padding-bottom: 20px;
        /* 하단 여백 추가 */
    }
    .env-app .sub-2-title-img-indexp{
        width: 36px; height: 36px;
        box-sizing: border-box;
    }

    .env-app .sub-2-container-card-indexp{
        display: flex;
        gap: 20px;
        margin-left: 52px;
        margin-right: 52px;
        margin-top: 24px;
        margin-bottom: 120px;
        padding-bottom: 20px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        /* 🔽 스크롤바 숨김 */
        -ms-overflow-style: none;  /* IE, Edge */
        scrollbar-width: none;     /* Firefox */
    }
    .env-app .sub-2-card-indexp-1{
        padding-top: 10px;

        background-color: #F6F8FF;
        width: 200px; height: 200px;
        box-sizing: border-box;
        border-radius: 12px;
        box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05);
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 12px;
    }
    .env-app .sub-2-card-indexp-2{
        padding-top: 5px;
        padding-left: 18px;

        background-color: #F6F8FF;
        width: 200px; height: 200px;
        box-sizing: border-box;
        border-radius: 12px;
        box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05);
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 12px;
    }
    .env-app .sub-2-card-indexp-3{
        padding-top: 14px;

        background-color: #F6F8FF;
        width: 200px; height: 200px;
        box-sizing: border-box;
        border-radius: 12px;
        box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05);
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 12px;
    }
    .env-app .sub-2-card-indexp-4{
        padding-top: 5px;
        padding-left: 12px;

        background-color: #F6F8FF;
        width: 200px; height: 200px;
        box-sizing: border-box;
        border-radius: 12px;
        box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05);
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 12px;
    }
    .env-app .discount-card-img-indexp{
        width: 186px; height: 138px;
    }
    .env-app .nav-with-icon .app-bottom-nav{
        display: block;
        font-size: 18px;
        color: #111111;
        font-weight: 700;
    }

    .env-app .nav-with-icon .app-bottom-nav-profilep{
        display: block;
        font-size: 18px;
        color: #0075ff;
        font-weight: 700;
    }
    .env-app .nav-with-icon .app-bottom-nav-myesimp{
        display: block;
        font-size: 18px;
        color: #0075ff;
        font-weight: 700;
    }
    .env-app .bottom-nav {

        height: 80px;

    }

    .env-app .bottom-nav .nav-item:first-child {
        display: inline-flex; /* 홈 */
        
    }

    .env-app .sub-2-card-title-indexp{
        margin-left: 12px;
        font-size: 20px;
        font-weight: 500;
        line-height: 28px;
        color: #111111;

        margin-bottom: 4px;

        width: 200px;
        white-space: normal;          /* 줄바꿈 허용 */
        overflow-wrap: break-word;    /* 긴 단어 줄바꿈 */
        word-break: break-word;       /* 추가 안전장치 */

        /* flex 안이면 꼭 */
        min-width: 0;
    }

    .env-app .sub-2-card-subtitle-indexp{
        margin-left: 12px;
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
        color: #999999;

        width: 200px;
        white-space: normal;          /* 줄바꿈 허용 */
        overflow-wrap: break-word;    /* 긴 단어 줄바꿈 */
        word-break: break-word;       /* 추가 안전장치 */

        /* flex 안이면 꼭 */
        min-width: 0;
    }






    /* 모바일 화면 프레임 */



    .header-nav-group{
        display: flex;
        align-items: center;
        gap: 0;

    }
    .header-inner{
        height: 70px;
        padding-top: 10px;
        max-width: 1920px;

    }

    .topNavlink {
        text-decoration: none;
        color: #111111;
        margin: 10px;
        display: inline-block;
    }

    .nav-item-top {
        display: inline-block;
        text-align: center;
        vertical-align: top;
        margin: 0px 12px;
    }



    .top-button-earth {
        display: flex;
        flex-direction: column;
        gap: 5px;
        text-align: center;
        vertical-align: top;
        padding: 0px;
        margin: 0px 6px;
        position: relative;
        cursor: pointer;
    }
    .top-button-cart {
        display: flex;
        flex-direction: column;
        gap: 5px;
        text-align: center;
        vertical-align: top;
        padding: 0px;
        margin: 0px 6px;
        position: relative;
        cursor: pointer;
    }

    .top-menu-icon-earth {
        display: block;
        margin: 0 18px;
        width: 32PX; height: 32px;
    }
    .top-button-hamburger{
        display: none;
    }
    .bottom-nav .nav-item:first-child {
        display: none; /* 홈 */
        
    }
    .language-text {
        display: none;
        font-size: 16px;
        font-weight: 600;
    }

    .top-iconmenu {
        display: flex;
        gap: 0;
    }
    .cart-badge-indexp{
        top: +0px;
        right: +12px;
        width: 20px;
        height: 20px;
        border: 3px solid #f0f0f0;
    }

    .main-banner {

        width: 100%;
        height: 360px;
    }

    .modal {
        top:76px;
        
    }

    .bottom-nav {
    width: 100%;
    /* 전체 너비 */
    height: 60px;
    /* 높이 */
    /* ✅ 기존 배경색 대신 반투명 + 블러 */
    background: none;   /* 60% 불투명 흰색 */
    backdrop-filter: none;            /* 블러 효과 */
    -webkit-backdrop-filter: none;   /* iOS Safari 지원 
    /* 배경색 */
    display: flex;
    /* 플렉스 박스 */
    justify-content: space-around;
    /* 아이템 간격 균등 */
    align-items: center;
    /* 세로 중앙 정렬 */
    box-shadow: none;
    /* 그림자 */
    z-index: 1000;
    /* 다른 요소 위에 고정 */
    border-radius: 0;
    gap: 16px;
    margin-right: 0;
    
    }
    .app-bottom-nav{
        font-size: 18px;
        color: #111111;
        font-weight: 600;
    }


    .nav-item{
        gap: 5px;
        margin: 0 12px;
    }

    .nav-with-icon .nav-icon {
    display: inline-flex; /* 또는 inline-block */
    width: 32px; height: 32PX;
    }
    .nav-with-icon .app-bottom-nav {
    display: none; /* 또는 inline-block */
    }
    .whiteback {
        display: none;
    }
    
    .main-banner {

        height: 700px;
        margin: 0 auto;
        border-radius: 20px;
        /* width: calc(100% - 80px); */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        position: relative;
        border: none;
        overflow: hidden; 
        max-width: 1920px;
        padding: 0;

        background:#FFFFFF;

        /* 맑은 느낌을 위해 그림자도 투명하게 조정 */
        box-shadow: 16px 16px 16px rgba(67, 0, 209, 0.05);

    }

    .main-banner::before {
        content: '';
        position: absolute;
        
        /* 피그마 크기 1000x1000 반영 */
        width: 1000px;
        height: 1000px;
        
        /* 피그마 좌표 -779, -56 반영 */
        /* 부모 컨테이너 기준 왼쪽 상단 바깥으로 배치 */
        top: -56px; 
        left: -889px;
        
        /* [핵심] 피그마 중지점 및 채우기(Opacity 40%) 반영 */
        /* 피그마의 선형 그라데이션 느낌을 Radial로 변환하여 자연스럽게 확산 */
        background: linear-gradient(
            173deg, 
            rgba(204, 0, 255, 0.4) 0%,   /* 보라 CC00FF */
            rgba(255, 0, 0, 0.4) 50%,    /* 빨강 FF0000 */
            rgba(255, 214, 0, 0.4) 100%  /* 노랑 FFD600 */
        );
        /* 레이어 흐림 500을 CSS 렌더링에 맞게 최적화 */
        /* radial-gradient와 중첩되어 피그마와 동일한 부드러운 효과를 냄 */
        filter: blur(200px); 
        
        /* 배경이므로 글자 뒤로 배치 */
        z-index: 0;
        pointer-events: none;
    }


    /* 오른쪽 그라데이션 바 (29도) */
    .main-banner::after {
        content: '';
        position: absolute;
        width: 1000px;
        height: 1000px;
        /* 피그마 좌표 1528, -524 반영 */
        top: -624px;
        left: 1528px; 
        
        /* 피그마 29도 반영 (CSS 각도로 변환) */
        background: linear-gradient(
            209deg, 
            rgba(0, 82, 255, 0.4) 0%,   /* 0% 0052FF */
            rgba(153, 105, 255, 0.4) 98% /* 98% 9969FF */
        );
        
        filter: blur(250px);
        z-index: 0;
        pointer-events: none;
    }

    /* .banner-cloud-icon-indexp{
        display: block;
        width: 20px; height: 20px;
        position: absolute;
        right: 380px;
        top: 100px;
    } */







    .app-down-btn-container-indexp{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 80px;
        gap: 6px;
        /* padding-right: 140px; */
    }
    .app-down-btn-indexp-box{
        display: flex;
        gap: 12px;
    }
    .app-down-btn-box-indexp{
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 12px;
        padding: 14px 10px;
 
    }

    .app-down-apple-indexp{
        width: 24px; height: 24px;
        background-color: none;
        border-radius: 50px;
    }
    .app-down-android-indexp{
        width: 24px; height: 24px;
        background-color: #ffffff;
        border-radius: 50px;
    }
    .app-down-text-title-indexp{
        font-size: 18px;
        font-weight: 550;
        color: #767676;
    }
    .app-down-text-indexp{
        font-size: 14px;
        font-weight: 600;
        color: #767676;
    }
    .app-down-btn-indexp{
        gap: 12px;
        padding: 14px 16px;
        border-radius: 12px;

        background: rgba(255,255,255,0.3);
        backdrop-filter: blur(30px);
        border: 1px solid rgba(255,255,255,0.8);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 10px 10px 30px rgba(67, 0, 209, 0.08);

        cursor: pointer;

        min-width: 180px; height: 46px;
        box-sizing: border-box;

        display: flex;
        align-items: center;

        margin-bottom: 5px;
    }
    .app-down-btn-indexp:hover {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, 0.75);

        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.1);
        color: #111111;
        border: 1px solid #f8f8fa;
    }
    .app-down-btn-indexp:active {
        transform: translateY(0px) scale(0.98);

        background: rgba(255, 255, 255, 0.55);

        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.12),
            inset 0 1px 2px rgba(255, 255, 255, 0.6);

        border: 1px solid rgba(255, 255, 255, 0.9);
    }

    .main-banner .main-banner-container {
        color: #111111 !important;
        font-weight: 700; 
        z-index: 2;
        margin: 100px 0 0;
        padding: 0;
        position: relative;
        display: flex;
        max-width: 700px;
        height: 240px;
    }
    .main-banner-container {
        
        
        
        
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        /* padding: 0 0 0 140px; */
        /* margin-right: 140px; */
    }
    .banner-brand-name {
        font-size: clamp(16px, 2vw, 24px);
        margin-bottom: clamp(6px, 1.5vw, 10px);
        text-align: left;
    }
    .banner-title {
        font-size: clamp(32px, 6vw, 60px);
        line-height: clamp(40px, 7vw, 72px);
        max-width: clamp(320px, 80vw, 600px);
        margin: clamp(8px, 2vw, 12px) 0;
        text-align: center;
    }

    .banner-sub-title {
        font-size: clamp(18px, 3.5vw, 32px);
        line-height: clamp(26px, 5vw, 44px);
        text-align: center;
        color: #505050;
    }

    .main-banner-img {
        height: 400px;
        position: absolute;
        right: 140px;
        top: 10px;
    }



    .active {
        background-color: #4300d1;
    }

    /* search banner */

    .main-searchbar {
        position: relative;
        overflow: hidden;
        border-radius: 50px;

        height: 140px;
        margin:
        -90px 
        clamp(20px, 10vw, 200px)
        200px
        clamp(20px, 10vw, 200px);
        padding: 20px 60px 20px 60px;
        gap: 16px;

        display: flex;
        flex-direction: row;
        box-sizing: border-box;           
        justify-content: flex-start;
        align-items: center;

        cursor: pointer;

    }
    .main-searchbar:hover {
        transform: translateY(-1px);

        /* background: rgba(255, 255, 255, 0.5); */

        box-shadow:
            0 14px 36px rgba(0, 0, 0, 0.1);
    }
    .main-searchbar:active {
        transform: translateY(0px);

        box-shadow:
            0 6px 18px rgba(0, 0, 0, 0.12),
            inset 0 2px 4px rgba(0, 0, 0, 0.06);
    }

    #mainSearchBar {
        font-size: clamp(16px, 2.4vw, 20px);
        line-height: clamp(22px, 3.2vw, 28px);
    }
    .mainSearchBarlinkbox {
        height: 64px;

    }
    .placeholderText{
        pointer-events: none;
    }
    .main-search-label {
        font-size: clamp(18px, 3.2vw, 32px);
        line-height: clamp(26px, 4.6vw, 48px);
        font-weight: 700;
        color: #6F5BFF;
        height: auto;
    }

    .search-icon {
        width: clamp(36px, 4.5vw, 54px);
        height: clamp(36px, 4.5vw, 54px);
    }

    .label-icon {
        display: grid;
        align-content: center;
        justify-content: center;
        padding-left: 5px;
        gap: 12px;

    }


    
    #main-searchbar {
        height: 90px;
        border-radius: 12px;
        padding-left: 0px 30px 10px;
        font-size: 16px;
        letter-spacing: -0.4px;
        box-sizing: border-box;
    }
    .popular-section {
        background: #ffffff;
        padding:
            32px
            clamp(20px, 8vw, 160px)
            48px;
        border-radius: 24px;
        margin-bottom: clamp(48px, 4vw, 100px);
    }
    /* 인기여행기 */
    
    .sub-1-title {
        font-size: clamp(24px, 3vw, 48px);
        line-height: clamp(32px, 4vw, 60px);
        color: #111111;
        font-weight: bold;
        padding-left: 4px;
    }

    .sub-1-container-card {
        margin: 90px 20px 30px;
        display: flex;
        overflow-x: auto;
        /* 가로 스크롤 유지 */
        overflow-y: hidden;
        /* 세로 스크롤 방지 */
        -webkit-overflow-scrolling: touch;
        scroll-behavior: auto !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        position: relative;
        padding-bottom: 30px;
        gap: clamp(12px, 2vw, 20px);
        /* 하단 여백 추가 */
        min-height: 360px;
        border-radius: 32px;
    }
    .sub-1-container-card::-webkit-scrollbar {
        display: none;
    }
    .sub-1-container-card.dragging {
        cursor: grabbing;
    }
    .sub-1-container {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 70px;
        gap: 0px;
    }
    .sub-1-title-img {
    width: clamp(48px, 4vw, 80px);
    height: clamp(48px, 4vw, 80px);
    }
    .main-sub-1-card {
        min-width: clamp(140px, 12vw, 180px);
        min-height: clamp(200px, 12vw, 252px);
        flex-shrink: 0; /* 너비 보존 */
        will-change: transform;
        
        background: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
        /* 💡 transition 시간을 자식들과 0.2s로 통일 */
        transition: all 0.2s ease-out; 
        transform: translateZ(0);
        -webkit-backface-visibility: hidden; /* 미세한 떨림 방지 */
        backface-visibility: hidden;
        transform-origin: left center !important;
    }


    .main-sub-1-card .main-sub-1-cardimg {
        width: clamp(96px, 12vw, 120px);
        height: clamp(96px, 12vw, 120px);
        border-radius: 12px;

        display: flex;
        align-items: flex-start;
        padding-top: clamp(6px, 2vw, 10px);
        justify-content: center;

        background-color: #ffffff;
        transition: all 0.2s ease-out; /* 0.3s -> 0.2s */
    }

    /* 3. 기본 이미지 자체 (부모 명시) */
    .main-sub-1-card .main-sub-1-cardimg img {
        width: clamp(96px, 12vw, 120px);
        height: clamp(96px, 12vw, 120px);
        border-radius: 100%;
        border: clamp(3px, 0.6vw, 5px) solid #f8f8fa;

        box-sizing: border-box;
        box-shadow: 16px 16px 16px rgba(67, 0, 209, 0.08);
        transition: all 0.2s ease-out; /* 0.3s -> 0.2s */
    }

    /* 4. 기본 텍스트 스타일 */
    .main-sub-1-card .sub-1-card-bottom-text-1 {
        font-size: 18px;
        color: #9CA3AF;
        font-weight: 400;
        transition: all 0.2s ease-out; /* 0.3s -> 0.2s */
    }

    /* ======================================================
   🔥 여기서부터 [is-active] 상태 (주인공 카드)
   ====================================================== */

    /* 커진 전체 카드 너비 */
    .main-sub-1-card.is-active {
        /* min-width: clamp(260px, 22vw, 340px); */
        white-space: nowrap; 
        overflow: visible;
        /* transform: translateZ(0) scale(1.02);  */
        transition: all 0.15s ease-out !important;
        z-index: 10;
    }

    /* 커진 이미지 박스 */
    .main-sub-1-card.is-active .main-sub-1-cardimg {
        width: clamp(220px, 24vw, 292px);
        height: clamp(140px, 16vw, 180px);
        margin-bottom: clamp(24px, 4vw, 42px);
    }

    /* 커진 이미지 자체 */
    .main-sub-1-card.is-active .main-sub-1-cardimg img {
        width: clamp(140px, 14vw, 180px);
        height: clamp(140px, 14vw, 180px);
        outline: clamp(1px, 0.3vw, 2px) solid rgba(98, 87, 255, 0.15);
        box-shadow: 14px 14px 14px rgba(67, 0, 209, 0.1);
         transform: scale(1.05);
    }

    /* 커진 텍스트 */
    .main-sub-1-card.is-active .sub-1-card-bottom-text-1 {
        font-size: clamp(22px, 3vw, 32px);
        color: #111111;
        font-weight: 500;
    }
    .main-sub-1-card.is-active .sub-1-card-price-container {
        opacity: 1;                /* 선명하게 노출 */
        transform: scale(1.1);     /* 110% 크기로 확대하여 강조 */
        display: flex;
        justify-content: center; 
        margin-left: 20px;    
    }
    .main-sub-1-card.is-active .price-currency,
    .main-sub-1-card.is-active .price-suffix,
    .main-sub-1-card.is-active .price-amount {
        font-size: clamp(24px, 3.2vw, 36px);
        color: #0075ff;
        font-weight: 600;
    }
    .main-sub-1-card.is-active .price-amount {
        font-weight: 900;
    }






    
    .indicator-container {
        margin-top: 0px;
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* 숫자 텍스트를 오른쪽 정렬 */
        padding: 0 60px;
    }
    .indicator-bar {
        width: 45%;
        height: 4px;
        background-color: #f7f9ff; /* 배경 회색 바 */
        border-radius: 4px;
        overflow: hidden;
        position: relative;
    }
    .indicator-progress {
        width: 10%; /* (1/10) 기본 너비 */
        height: 100%;
        background-color: #4300D1; /* 피그마의 보라색 포인트 */
        border-radius: 4px;
        transition: transform 0.1s ease; /* 부드러운 움직임 */
        transform-origin: left;
    }
    .indicator-text {
        margin-top: 16px;
        margin-right: 4px;
        font-size: 28px;
        color: #888;
        font-weight: 500;
    }
    #current-indexp {
        color: #333;
        font-weight: bold;
    }








    .sub-2-container-card-indexp{
        display: none;
    }

    /* 이벤트부분 */
    .sub-2-container,
    .sub-2-container-card {
        display: none;
    }

    .event-container-web {
        padding: 100px 56px;
        display: block;
        background-color: #f8f8fa;
    }

    .event-text-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .event-logo-bland {
        display: flex;
        justify-content: center;
    }

    .event-logo {
        width: 50px;
        height: 50px;
    }

    .event-logo-text {
        font-size: 32px;
        line-height: 46px;
        font-weight: bold;
        align-self: center;
        color: #111111;
        letter-spacing: -0.8px;
    }

    .event-title {
        font-size: 32px;
        font-weight: bold;
        line-height: 46px;
        color: #111111;
        letter-spacing: -0.8px;
    }

    .event-subtitle {
        font-size: 18px;
        color: #767676;
        line-height: 28px;
        margin-top: 20px;
        margin-bottom: 32px;
        font-weight: 500;
        letter-spacing: -0.45px;
        text-align: center;
    }

    .event-img-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 20px;
    }

    .event-cardbox {
        width: 600px;
        height: 220px;
        background-color: #ffffff;
        border-radius: 32px;
        box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05);
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        margin-left: 20px;
        margin-bottom: 20px;
        cursor: pointer;
        transition: 
            transform 0.25s ease,
            box-shadow 0.25s ease;
    }
    .event-cardbox:hover {
        transform: translateY(-6px);
        box-shadow: 12px 16px 20px rgba(67, 0, 209, 0.12);
    }

     .event-cardbox:active {
        transform: translateY(-2px);
        box-shadow: 8px 10px 12px rgba(67, 0, 209, 0.10);
    }   
    .cardbox-img {
        width: 220px;
        height: 220px;
        border-radius: 20px 0 0 20px;
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .event-card-img-indexp{
        width: 220px; height: 220px;
        border-radius: 20px 0 0 20px;
    }
        .event-card-img-indexp2{
        width: 180px; height: 180px;
        border-radius: 20px 0 0 20px;
    }
    .event-cardbox-text {
        margin: 40px 30px;

    }

    .cardbox-text-title {
        font-size: 24px;
        font-weight: bold;
        color: #111111;
        line-height: 46px;
        letter-spacing: -0.6px;
        margin-bottom: 10px;
    }

    .cardbox-text-subtitle {
        font-size: 18px;
        font-weight: 400px;
        color: #767676;
        line-height: 28px;
        letter-spacing: -0.45px;
    }

    .review-container {
        margin-top: 200px;
 
        display: flex;
        flex-direction: column;
    }

    .review-titlebox {
        margin-bottom: 20px;
        padding: 0 56px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .review-title {
        font-size: 40px;
        font-weight: bold;
        line-height: 46px;
        color: #111111;
        letter-spacing: -0.8%;
    }
    .review-title-img-indexp{
        width: 70px; height: 70px;
    }
    

    .review-category-list{
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        align-items: center;
        margin-bottom: 80px;
        border: 1px solid #E5E5EC;
        background-color: #f8f8fa;
        width: 100%;
        

    }
    .review-category-box-indexp{
        display: flex;
        border: none;
        padding: 14px 20px;
        border-radius: 100px;
        gap: 4px;
    }
    .review-category-box-indexp2{
        display: flex;
        border: none;
        padding: 14px 20px;
        border-radius: 100px;
        gap: 8px;
    }
    .review-category-img-indexp{
        width: 32px; height: 32px;
        /* opacity: 0.6; */
    }
    .review-category-title-indexp{
        font-size: 14px;
        line-height: 32px;
        color:#111111;
        text-align: center;
    }


    .review-card-container {
        display: flex;
        overflow: hidden;
        /* 넘치는 요소 숨기기 */
        white-space: nowrap;
        /* 줄바꿈 방지 */
        width: 100%;
        /* 부모 요소 크기에 맞게 조정 */
        scroll-behavior: smooth;
        /* 부드러운 스크롤 효과 */
    }
    .review-card-track {
        display: flex;
        /* 40s를 조절해서 속도를 맞추세요. 숫자가 작을수록 빠릅니다. */
        animation: marquee 40s linear infinite;
        will-change: transform;
    }
    /* 마우스 올리면 멈춤 - 이 한 줄로 JS 이벤트 리스너 대체 가능 */
    .review-card-container:hover .review-card-track {
        animation-play-state: paused;
    }
    /* 무한 루프 핵심 로직 */
    @keyframes marquee {
        0% {
            transform: translateX(0);
        }
        100% {
            /* 원본 카드 세트의 너비(450px * 9개 = 4050px)만큼만 이동 */
            transform: translateX(-4050px);
        }
    }
    .review-cardbox {
        display: flex !important;
        flex-direction: column !important;
        width: 300px;
        min-height: 300px;
        background-color: #ffffff;
        border: 1px solid #E5E5EC;
        border-radius: 20px;
        box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05);
        margin-right: 50px;
        margin-bottom: 100px;
        padding: 30px 30px 24px;
        position: relative;
        flex-shrink: 0;
    }
    .review-kiword-box{
        display: flex;
        gap: 6px;
        margin-bottom: 10px;
    }
    .review-keyword-img2{
        width: 36px;
        height: 36px;
    }
    .review-keyword-title2{
        font-size: 14px;
        line-height: 36px;
    }
    .review-innertitle {
        font-size: 24px;
        line-height: 42px;
        color: #111111;
        letter-spacing: -0.6%;
        font-weight: bold;
        margin: 0 0 24px;
        width: 300px;
        white-space: normal !important;
    }

    .review-subtitle {
        font-size: 18px;
        line-height: 28px;
        color: #767676;
        letter-spacing: -0.8%;
        font-weight: 400;

        width: auto;
        min-height: 240px;
        max-height: 270px;
        white-space: normal !important;
        /* 줄바꿈 허용 */
        word-wrap: break-word;
        /* 긴 단어가 있을 경우 줄바꿈 */
        word-break: break-all!important;        /* 한글/영문 가리지 않고 박스 끝에서 줄바꿈 */
        display: -webkit-box!important;        /* (선택사항) 넘치는 텍스트 말줄임표 처리할 때 유용 */
        margin-bottom: 50px;
    }

    .idandproductdatte {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* 우측 정렬 유지 */
        margin-right: 20px;
        color: #999999;
    }

    .productname-review-indexp {
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: 6px;
        margin-bottom: 10px;
        box-sizing: border-box;
    }
    .review-product-line1,
    .review-product-line2 {
        white-space: normal;
        word-break: keep-all;   /* 한글/일본어 자연 줄바꿈 */
        font-size: 14px;
    }
    .review-product-line1{
        line-height: 24px;
    }
    .custnamedate {
        display: flex;
        align-items: center;
    }

    .reviewdate {
        margin-right: 10px;
        font-size: 14px;
    }
    .reviewname{
        font-size: 14px;
    }
    .review-device-indexp{
        width: 24px; height: 24px;
        border: 2px solid #f0f0f0;
        border-radius: 100px;
        margin-right: 10px;
        opacity: 0.7
    }
    .guide-support-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        margin: 0px 20px 200px 20px;
    }
    .support-container:hover {
        transform: translateY(-2px);
        box-shadow: 12px 16px 20px rgba(67, 0, 209, 0.12);
    }

     .support-container:active {
        transform: translateY(-0px);
        box-shadow: 8px 10px 12px rgba(67, 0, 209, 0.10);
    } 
    .guide-container:hover {
        transform: translateY(-2px);
        box-shadow: 12px 16px 20px rgba(67, 0, 209, 0.12);

    }
     .guide-container:active {
        transform: translateY(-0px);
        box-shadow: 8px 10px 12px rgba(67, 0, 209, 0.10);
    } 
    .guide-container::before,
    .support-container::before{
        opacity: .75;
        transition: opacity .2s ease;
    }
    .guide-container:hover::before,
    .support-container:hover::before{
         opacity: 1;
    }
    .guide-support-title-container {
        font-size: 40px;
        line-height: 50px;
        color: #111111;
        letter-spacing: -0.8%;
        font-weight: bold;
        margin-bottom: 40px;
        margin-left: 6px;
        margin-top: 100px;
        width: 100%;
        text-align: center;
    }

    .guide-support-card-container {
        width: 100%;
        min-height: 300px; 
        background-color: none;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 40px;
        flex-wrap: wrap; 
    }

    .guide-container {
        width: 700px;
        height: 300px;
        background-color: #ffffff;
        border-radius: 20px;
        box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05);
        display: flex;
        flex-direction: column;
        /* align-items: center; */
        justify-content: center;
        padding: 10px 20px;
        box-sizing: border-box;
        border: 1px solid #E5E5EC;;
        cursor: pointer;
        transition:all .2s ease;
    }

    .support-container {
        width: 700px;
        height: 300px;
        background-color: #ffffff;
        border-radius: 20px;
        box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05);
        display: flex;
        flex-direction: column;
        /* align-items: center; */
        justify-content: center;
        padding: 10px 20px;
        box-sizing: border-box;
        border: 1px solid #E5E5EC;;
        cursor: pointer;
        transition:all .25s ease;
    }

    .guide-container{
        background:
            radial-gradient(
                900px 500px at 0px 20px,
                rgba(204,0,255,0.03),
                rgba(255,0,0,0.02),
                rgba(255,214,0,0.015),
                transparent 65%
            ),
            #ffffff;
    }

    .support-container{
        background:
            radial-gradient(
                900px 500px at 0px 20px,
                rgba(0,82,255,0.03),
                rgba(153,105,255,0.015),
                transparent 65%
            ),
            #ffffff;
    }
    .guide-container,
    .support-container{
        position: relative;
        overflow: hidden;
    }

    .guide-container::before,
    .support-container::before{
        content:'';
        position:absolute;
        inset:0;
        background:
            radial-gradient(
                600px 300px at 50% -50px,
                rgba(255,255,255,0.6),
                transparent 60%
            );
        pointer-events:none;
    }

    .support-img-bottom-box-indexp{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .indexp-bottom-guid-support-container{
        display: flex;
        justify-content: center;
        align-items: start;
        gap: 30px;
    }
    .indexp-bottom-guid-support-container > * {
        flex: 1;
    }

    .indexp-bottom-guid-support-text-box{
        display: flex;
        flex-direction: column;
        padding-top: 40px;
        padding-left: 30px;
        gap: 20px;
    }
    .indexp-bottom-guid-support-text-main{
        font-size: 24px;
        font-weight: 600;
        line-height: 32px;
        color: #111111;

    }

    .indexp-bottom-guid-support-text-sub{
        font-size: 18px;

        line-height: 26px;
        color: #111111;

    }


    .guide-text-container {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        margin-top: 20px;
    }

    .guide-text {
        font-size: 20px;
        line-height: 42px;
        color: #4300d1;
        letter-spacing: -0.6%;
        font-weight: bold;
        display: flex;
        text-decoration: none;

    }

    .guide-text img {
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }


    

    .support-text-container {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 20px;
        box-sizing: border-box;
    }

    .support-text {
        font-size: 20px;
        line-height: 42px;
        color: #4300d1;
        letter-spacing: -0.6%;
        font-weight: bold;
        text-decoration: none;
    }
    .support-img-bottom-indexp{
        width: 180px;
        height: 180px;
    }
    .support-text img {
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }

    .bottom-margin {
        display: none;
    }

    .main-footer-containter {
        display: block;
        background-color: #f8f8fa;
        color: #222;
        text-align: center;
        max-width: 100%;
        margin: 50px auto 0px;
        padding: 40px 20px;
        /* 위아래 60px, 좌우 20px → 충분한 여백 */
        min-height: 300px;
        /* 푸터 높이 넉넉하게 */
    }

    .footer-policy {
        margin-bottom: 30px;
        line-height: 26px;
        font-weight: 600px;
        text-decoration: none;
        color: #222;
        font-weight: 600px;
    }


    .footer-policy a {
        text-decoration: none;
        color: #222;
        line-height: 26px;
        font-weight: 600px;
    }

    .canpanyname {
        color: #222;
        line-height: 26px;
        font-weight: 600px;

    }

    .fotter-address {
        margin-bottom: 30px;
        line-height: 26px;
        font-weight: 600px;
    }

    .Inquiry {
        margin-bottom: 50px;
        line-height: 26px;
        font-weight: 600px;
    }

    .social {
        display: flex;
        justify-content: center;
        margin: 20px 20px 40px;

    }



    .footer-icon-back {
        width: 60px;
        height: 60px;
        border-radius: 100%;
        background-color: #f2f2f5;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 12px;
    }

    .footer-icon-back img {
        width: 36px;
        height: 36px;

    }
}







/* ----------------------------------------------------------------------로그인 페이지---------------------------------------------------------------------------------------------------- */

.longi-head-container {
    height: 56px;
    width: 100%;
    margin-top: 44px;
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}


.left-arrow {
    width: 28x;
    height: 28px;
    left: 0;
    bottom: 14px;
    cursor: pointer;
    padding: 10px;
    border-radius: 12px;
    transition: transform 0.1s ease;
}
.left-arrow:hover{
    background-color: #F7F7FB;
}
.left-arrow:active{
    scale: calc(0.9);
}
/* .left-arrow {
    width: 28px;
    height: 28px;
} */

.loginpage-title-text {
    font-size: 20px;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: -0.5px;
}

.loginpage-email-input-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    height: 90px;
    width: 100%;
    gap: 8px;
}
.loginpage-referral_code-input-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    height: 90px;
    width: 100%;
    gap: 8px;
    margin-top: 32px;
}
.loginpage-email-inputbox-container::before {
    content: "";
    position: absolute;
    left: 52px;
    top: 60px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('../assets/img/email-icom.png');
    /* 아이콘 경로 */
    background-size: cover;
    transition: background-image 0.3s ease;
    /* 부드러운 전환 효과 */
}


.loginpage-email-inputbox:focus{
    background-color: #ffffff;
    color: #111111;
    border: 1px solid #111111;

}

.loginpage-referral_code-inputbox-container::before {
    content: "";
    position: absolute;
    left: 52px;
    top: 60px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('../assets/img/human-icon-gray.png');
    /* 아이콘 경로 */
    background-size: cover;
    transition: background-image 0.3s ease;
    /* 부드러운 전환 효과 */
}



.loginpage-email-label-container {
    font-size: 14px;
    letter-spacing: 0.35px;
    color: #505050;
    line-height: 22px;
    margin-left: 40px;
}

.loginpage-email-inputbox-container {
    width: calc(100% - 64px);
}
.loginpage-referral_code-inputbox-container {
    width: calc(100% - 64px);
}
.loginpage-email-inputbox {
    width: 100%;
    margin-left: 32px;
    height: 60px;
    border: 1px solid #F0F0F0;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 19px 40px 19px 50px;
    background-color: #f8f8fa;
}

.loginpage-email-input input::placeholder {
    color: #777C89;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.35px;
}

input:hover {
    background-color: #E0E0E5;
    color: #666B77;
}

input:focus {
    border-color: #0075FF;
    background-color: rgba(0, 102, 255, 0.1);
    outline: none;
    color: #111111;
}

/* 비밀번호 */
.loginpage-password-input-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    height: 90px;
    width: 100%;
    gap: 8px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.loginpage-password-inputbox-container::before {
    content: "";
    position: absolute;
    left: 52px;
    top: 60px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('../assets/img/password-icon.png');
    /* 아이콘 경로 */
    background-size: cover;
    transition: background-image 0.3s ease;
    /* 부드러운 전환 효과 */
}

.loginpage-password-inputbox-container:focus-within::before {
    background-image: url('../assets/img/password-icon-blue.png');
    /* 클릭 시 변경될 아이콘 */
}

/* 두 번째 아이콘 (예: 눈 아이콘 - 비밀번호 보이기/숨기기) */
.loginpage-password-inputbox-container::after {
    content: "";
    position: absolute;
    right: 52px;
    /* 오른쪽 끝 정렬 */
    top: 60px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('../assets/img/passwordeye-gray-icon.png');
    /* 두 번째 아이콘 경로 */
    background-size: cover;
    cursor: pointer;
    /* 클릭 가능하도록 */
}

.loginpage-password-label-container {
    font-size: 14px;
    letter-spacing: 0.35px;
    color: #505050;
    line-height: 22px;
    margin-left: 40px;
}

.loginpage-password-inputbox-container {
    width: calc(100% - 64px);
}

.loginpage-password-inputbox {
    width: 100%;
    margin-left: 32px;
    height: 60px;
    border: 1px solid #F0F0F0;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 19px 40px 19px 50px;
    background-color: #f8f8fa;

}

.loginpage-password-input input::placeholder {
    color: #777C89;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.35px;
}

.login-options-container {
    display: flex;
    width: calc(100% - 64px);
    justify-content: space-between;
    align-items: center;
    align-content: center;
    margin: 0 auto 60px;
}

.img-accountSave-container {
    display: flex;
    align-items: center;
}

.check-img-container {
    margin-right: 10px;
    margin-left: 8px;
    display: flex;
    align-items: center;
}

.hidden-checkbox {
    display: none;
    /* 기본 체크박스를 숨김 */
}

.check-img-label {
    cursor: pointer;
    /* 마우스를 올리면 클릭 가능하도록 */
}


.check-img-label {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url('../assets/img/check-gray.png');
    background-size: cover;
    cursor: pointer;
}

/* 체크되었을 때 배경 이미지 변경 */
.hidden-checkbox:checked+.check-img-label {
    background-image: url('../assets/img/check-blue.png');
}


.check-img {
    width: 22px;
    height: 22px;
}

.account-save-text {
    color: #777C89;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.35px;
}

.account-password-find a {
    color: #777C89;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.35px;
    margin-right: 6px;
    text-decoration: none;
}

.account-password-find a:hover {
    color: #111111;
}

.account-password-find a:active {
    color: #0075FF;
}

.login-submit {
    display: block;
    height: 60px;
    width: calc(100% - 64px);
    margin: 0 auto;
    background-color: #0075FF;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: -0.45px;
    border: none;
    border-radius: 16px;
}

.login-submit:hover {
    background-color: rgba(0, 102, 255, 0.8);
}

.social-login-container1 {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 118px);
    height: 61px;
    margin: 48px auto 24px;
}

.social-login-container2 {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 118px);
    height: 61px;
    margin: 0 auto 92px;
}

.sc-login-bg {
    width: 80px;
    height: 60px;
    border: 1px solid #35383F;
    border-radius: 16px;
    background-color: #1F222A;
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-login-icon {
    width: 24px;
    height: 24px;
}

.singup {
    display: block;
    margin: 0 auto 50px;
    width: 300px;
    text-align: center;
    color: #505050;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.35px;

}

.singup a {

    color: #0075FF;

}

/* --------------------------------------------------------------------로그인 페이지-------------------------------------------------------------------------------------------------------- */


/* 회원가입 페이지----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.signup-head-container {
    height: 56px;
    width: 100%;
    margin-top: 44px;
    margin-bottom: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}


.signpage-title-text {
    font-size: 20px;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: -0.5px;
}

.social-signup-container {
    width: calc(100% - 64px);
    display: flex;
    flex-direction: column;
    margin: 40px auto 0;
}

.singup-box {
    text-decoration: none;
    margin-bottom: 12px;

}


.sc-signup-bg {
    width: 100%;
    height: 60px;
    border-radius: 18px;
    border: 1px solid #E5E7EB;
    background-color: #ffffff;

    display: flex;
    align-items: center;
    padding-left: 24px;

    box-sizing: border-box;

    transition: all 0.2s ease;
}

/* hover */
.sc-signup-bg:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    border-color: #D1D5DB;
}

/* active */
.sc-signup-bg:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.social-signup-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
}

.signup-text {
    color: #111111;
    text-decoration: none;
}
.singin-page-box{
    margin: 135px auto 50px;
    display: flex;
}
.singin-page {
    color: #505050;
    font-size: 14px;
}

.singin-page-text {
    margin-left: 12px;
    color: #0075FF;
    font-size: 14px;
}

/* 회원가입 페이지----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* 메일 회원가입 페이지 --------------------------------------------------------------------------------------------------------------------------------*/

.loginpage-name-input-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    height: 90px;
    width: 100%;
    gap: 8px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.loginpage-name-inputbox-container {
    width: calc(100% - 64px);
}

.loginpage-name-inputbox-container::before {
    content: "";
    position: absolute;
    left: 52px;
    top: 60px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('../assets/img/human-icon-gray.png');
    /* 아이콘 경로 */
    background-size: cover;
    transition: background-image 0.3s ease;
    /* 부드러운 전환 효과 */
}

.loginpage-name-inputbox-container:focus-within::before {
    background-image: url('../assets/img/human-icon-blue.png');
    /* 클릭 시 변경될 아이콘 */
}

.loginpage-name-inputbox {
    width: 100%;
    margin-left: 32px;
    height: 60px;
    border: 1px solid #F0F0F0;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 19px 40px 19px 50px;
    background-color: #f8f8fa;

}

.loginpage-name-label-container {
    font-size: 14px;
    letter-spacing: 0.35px;
    color: #505050;
    line-height: 22px;
    margin-left: 40px;
}



.loginpage-tel-input-container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: start;
    height: 90px;
    gap: 8px;
    margin: 24px auto 20px;
    width: calc(100% - 64px);
}

.country-code {
    margin-right: 12px;
    width: 80px;
    background-color: #f8f8fa;
    height: 60px;
    border-radius: 16px;
    border: 1px solid #F0F0F0;
    color: #777C89;
    padding: 0 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('../assets/img/dropdown-gray.png');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: right 8px center;
    /* 화살표 위치 */
    /* 화살표 크기 조절 */

}

.loginpage-tel-label-select-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.country-code-label {
    color: #505050;
    font-size: 14px;
    padding-left: 6px;
}

.loginpage-tel-label-input-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.loginpage-tel-label {
    color: #505050;
    font-size: 14px;
    padding-left: 6px;

}

.loginpage-tel-inputbox {
    background-color: #f8f8fa;
    height: 60px;
    border-radius: 16px;
    border: 1px solid #F0F0F0;
    box-sizing: border-box;
    width: 100%;
    padding-left: 20px;
}


.loginpage-tel-inputbox::placeholder {
    color: #777C89;
    /* 원하는 색상 코드 */
}


/* 메일 회원가입 페이지 --------------------------------------------------------------------------------------------------------------------------------*/

/* 검색페이지------------------------------------------------------------------------------------------------------------------------------------------ */




.search-title {
    font-size: 20px;
    font-weight: 700;
    color: #111111;
    letter-spacing: -0.3px;
    line-height: 34px;

    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.header-home-icon{
    width: 28px; height: 28px;
    cursor: pointer;
    padding: 10px;
    border-radius: 12px;
    transition: transform 0.1s ease;
}
.header-home-icon:hover{
    background-color: #F7F7FB;
}
.header-home-icon:active{
    opacity: 0.6;
    scale: calc(0.9);
}
.search-header-container-detailp {
    /* margin: 0 0 20px; */
    display: flex;
    align-items: center;
    width: 100%;
    height: 56px;
    position: relative;
    box-sizing: border-box;
    padding: 0 20px;
}

.cart-img-detailp-top {
    width: 28px;
    height: 28px;
}
.cart-img-container-detailp{
    position: relative;
    cursor: pointer;
    padding: 10px;
    border-radius: 12px;
    transition: transform 0.1s ease;
}
.cart-img-container-detailp:hover{
    background-color: #F7F7FB;
}
.cart-img-container-detailp:active{
    scale: calc(0.9);
}
.cart-badge-detailp{
  position: absolute;
  top: 10px;
  right: 4px;
  background-color: #ff3b30; /* 빨간색 */
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  /* display: none;  */
  display: flex; 
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid #f0f0f0;
}

.search-title-detailp {
    font-size: 20px;
    font-weight: 700;
    color: #111111;
    letter-spacing: -0.3px;
    line-height: 34px;
    margin: 0 auto;
}

.left-arrow-detailp {
    width: 28x;
    height: 28px;
    left: 0;
    bottom: 14px;
    padding: 10px;
    border-radius: 12px;
    transition: transform 0.1s ease;

}
.left-arrow-detailp:hover{
    background-color: #F7F7FB;
}
.left-arrow-detailp:active{
    scale:calc(0.9);
}



.search-bar-container1 {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    position: relative;
}

.search-bar1 {
    width: calc(100% - 64px);
    box-sizing: border-box;
    height: 52px;
    background-color: #f7f7fb;
    border: none;
    border-radius: 26px;
    padding-left: 56px;
    padding-right: 16px;
    box-shadow: 8px 8px 8px 0px rgba(67, 0, 209, 0.02);
    user-select: auto !important;
    -webkit-user-select: auto !important;
    font-size: 18px;
}

.search-bar-container1::before {
    content: "";
    background-image: url('../assets/img/search-gray.png');
    width: 24px;
    height: 24px;
    position: absolute;
    background-size: 24px 24px;
    left: 51px;
    top: 50%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    pointer-events: none;
    /* ✅ 마우스 이벤트 통과시킴 */
}

.search-bar1::placeholder {
    color: #7f8c9d;
    font-size: 14px;
    line-height: 34px;
    letter-spacing: -0.35px;
}
.search-bar1:focus {
    background-color: #ffffff;
    border: 1px solid #111111; /* 원하는 색 */
    outline: none;
    box-shadow: none; /* glow 제거 */
}
.continent-container {
    height: 52px;
    display: flex;

    margin-top: 24px;

    overflow-x: auto;
    /* 가로 스크롤 허용 */
    -webkit-overflow-scrolling: touch;
    /* 부드러운 터치 스크롤 */
    white-space: nowrap;
    scrollbar-width: none;
    /* Firefox에서 스크롤바 숨기기 */
    font-size: 20px;
}

.continent {
    flex: 0 0 auto;
    min-width: 108px;
    /* height: 52px; */
    text-align: center;
    border-bottom: 2px solid #f0f0f0;
    /* height와 같은 값으로 설정 */
    color: #d9d9d9;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    box-sizing: border-box;
    padding: 14px 16px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.continent {
    cursor: pointer;
    /* 이거 추가하면 클릭 가능한 느낌이 들어 */
}
.page-search-body {
  height: 100vh;
  margin: 0;
}

.page-search-body .search-header-container,
.page-search-body .search-bar-container1,
.page-search-body .continent-container {
  flex-shrink: 0;
  background: white;
  z-index: 2;
}
.page-search-body .contury-Container {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 40px;
    min-height: 0; 
  flex-wrap: wrap;      /* 중요 */
  align-content: flex-start;  /* ★ 핵심 */
}
.continent-selected {
    color: #111111;
    border-bottom: 2px solid #111111 !important;
    font-weight: 600;
}


.page-search-body{
  margin: 0;
  height: 100vh;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}





.contury-Container {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
}

.search-country {
    padding: 12px 16px;
    border-radius: 12px;
    background-color: #f8f8fa;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.02),
        0px -1px 10px rgba(67, 0, 209, 0.02);
    cursor: pointer;
    margin: 14px;
    width: auto;
    color: #999999;
    font-size: 18px;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15);
    /* ✨ 너무 어둡지 않게 */
    z-index: 1000;
    /* 모달이 z-index: 1000이면, overlay는 그 아래 */
}
.modal-overlay-indexp {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: none;
}
.modal-overlay-indexp.show {
    display: block;
}
.day-modal {
    position: absolute;
    left:0; right:0; bottom:0;
    width: 100%;
    max-height: 90dvh;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    
    /* justify-content: flex-start; */
    opacity: 0;
    pointer-events: none;
    min-height: 0;
    
    background-color: rgba(255, 255, 255);
    border-radius: 50px 50px 0 0;
    padding: 20px 0;
    box-shadow: 0 -2px 10px rgba(67, 0, 209, 0.1);
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out;
    z-index: 1000;
    transition:
        transform 0.4s ease-in-out,
        opacity 0.25s ease-out;
     
}


.day-modal.show {
    transform: translateY(0%);
    opacity: 1;
    pointer-events: auto;
}


.day-scroll-area {
  display: flex;
  flex-direction: column;  
  max-height: calc(90vh - 38px);
  overflow-y: auto !important;

  -webkit-overflow-scrolling: touch;
  padding: 0 0 20px;
  box-sizing: border-box; 

}

.day-modal-content {
    padding: 16px 36px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
}


.multi-country-info {
    display: flex;
    flex-direction: column;
    background-color: #f8f8fa;
    max-height: 180px;
    padding: 20px 20px 12px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    /* border: 1px solid #E5E5EC; */
    border-radius: 28px;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.03),
        0px -1px 10px rgba(67, 0, 209, 0.03);
        /* background:#fff;
  box-shadow: 8px -8px 24px rgba(0,0,0,.05); */
    margin-bottom: 30px;
    overflow-y: auto;
}

.multi-country-title-box {
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 6px;

}

.multi-country-icon {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    margin-bottom: 4px;
}
.multi-country-icon-drop{
    width: 16px;
    height: 16px;
}
.multi-country-list-title {
    display: block;
    width: 100%;
    color: #0075ff;
    line-height: 28px;
    font-size: 16px;
    font-weight: 600;
    padding-left: 8px;
    margin-bottom: 10px;
    /* margin-top: 10px; */
}

.country-info-note {
    font-size: 12px;
    color: #909090;
    margin-bottom: 12px;
    margin-left: 8px;
    margin-right: 8px;
    line-height: 16px;
}

.multi-country-list {
    position: relative;
    line-height: 30px;
    font-size: 16px;
    color: #111111;
    padding: 10px;
}

#dayOptionsContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    width: auto;

    margin: 14px 36px 10px;          
    box-sizing: border-box;
}

.day-select-x-btn {
    border: none;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    flex-shrink: 0; 
    flex: 0 0 auto;
    cursor: pointer;
    transition: transform 0.1s ease;
    padding: 10px;
    border-radius: 12px;
}
.day-select-x-btn:hover{
    background-color: #F7F7FB;
}
.day-select-x-btn:active{
    scale: calc(0.9);
}
.day-select-x {
    width: 20px;
    height: 20px
}

#choice-country {
    margin: 20px 0 12px 8px;
    font-size: 16px;
    line-height: 28px;
    font-weight: 550;
    color: #111111
}
.choice-country-icon-indexp{
    width: 26px; height: 26px;
    margin-top: 8px;
    margin-left: 12px;
}
.choice-country-box-indexp{
    display: flex;
    align-items: center;
}


#countrySelectContainer {
    background-color: #ffffff;
    border: 1px solid #E5E5EC;
    /* background-color: rgba(0, 117, 255, 0.1); */
    border-radius: 28px;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05),
        0px -1px 10px rgba(67, 0, 209, 0.03);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 60px;
    min-width: 100%;
    padding: 14px 20px;
    box-sizing: border-box;
    gap: 8px;

}

.country-flag {
    width: 26px;
    height: 26px;
    border-radius: 100%;
    object-fit: cover;
    /* margin: 6px 6px 6px 20px; */
    border: 2px solid #f8f8fa;
    box-sizing: border-box;
}



.country-select {
    /* margin: 10px 20px 10px 10px; */
    font-size: 18px;
    color: #0075FF;
    font-weight: 700;
    text-align: center;
    line-height: 26px;
}

.select_validity {
    margin: 20px auto;
    width: 80%;
    text-align: center;
    color: #909090;
    font-size: 16px
}



/* 드롭다운 기본 스타일 */
.custom-dropdown {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 0px 12px 8px;
    font-weight: 600;
    box-sizing: border-box;
}

.custom-dropdown {
    color: #111111
}
.calendar-img-indexp{
    width: 26px;
    height: 26px;
    margin-bottom: 12px;
    margin-left: 12px;
}
.calendar-choice-box-indexp{
    display: flex;
    align-items: center;
}




.dropdown-toggle {
    min-width: 50%;
    height: 60px;
    padding: 0 14px;
    background-color: #ffffff;
    border-radius: 28px;
    border: 1px solid #E5E5EC;
    cursor: pointer;
    color: #909090;
    box-sizing: border-box;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05),
        0px -1px 10px rgba(67, 0, 209, 0.03);
    padding-left: 24px;
    display: flex;
    align-items: center;
    /* ✅ 세로 가운데 */
    justify-content: space-between;
    /* ← 우측에 화살표 넣을 거면 이렇게 */
    width: 100%;
}


.dropdown-menu {
    position: absolute ;
    /* 또는 fixed (JS로 위치 계산 시) */
    top: calc(100% + 8px);
    left: 0;
    width: 100%;

    max-height: 160px;
    overflow-y: auto !important;
    background-color: #ffffff;
    border: 1px solid #E5E5EC;
    border-radius: 24px;
    padding: 6px 0;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05),
        0px -1px 10px rgba(67, 0, 209, 0.03);
    z-index: 9999;
    box-sizing: border-box;

    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.dropdown-menu.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


.day-drodown-img {
    width: 18px;
    height: 18px;
    margin-left: 10px;
}

.dropdown-item {
    padding: 14px 20px;
    cursor: pointer;
    /* border-radius: 24px; */

}

.dropdown-toggle.selected {
    background-color: #ffffff;
    /* 연한 파랑 예시 */
    color: #0075FF;
    /* 선택된 글자색 */
    font-weight: 600;
}
.dropdown-toggle.active {
    border: 1px solid #111111;
    color: #111111; 
}

.btn-day-confirm {
    margin: 50px 32px 70px;
    background-color: #f8f8fa;
    color: #909090;
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    border-radius: 28px;
    height: 60px;
    display: flex;
    align-items: center;
    /* ✅ 세로 중앙 */
    justify-content: center;
    /* ✅ 가로 중앙도 필요하면 */
    font-weight: 600;
    cursor: default;
    transition: background-color 0.3s, color 0.3s;
    flex-shrink: 0;
}

.btn-day-confirm.active {
    background-color: #0075FF;
    color: white;
    cursor: pointer;
}
/* .btn-day-confirm:active{
    scale: calc(0.9);
} */
.dropdown-item:hover {
    background-color: #f0f0f0;
}


.dropdown-item.selected {
    /* background-color: #0075ff1a; */
    /* 선택 시 배경 (예: 연한 파랑) */
    color: #0075FF;
    /* 선택 시 글자색 */
    font-weight: 600;
}


.hidden {
    display: none !important;
}

/* 검색페이지------------------------------------------------------------------------------------------------------------------------------------------ */



/* 상품유형형페이지------------------------------------------------------------------------------------------------------------------------------------------ */
.plan-type-header {
    margin: 0 32px;
    padding-top: 20px;
}

.plan-type-label-country {
    color: #111111;
    font-size: 18px;
    letter-spacing: -0.025em;
    /* -2.5% 자간 */
    line-height: 34px;
    padding-left: 6px;
    font-weight: 600;
}
.plan-type-label-country-img{
    width: 26px; height: 26px;
    margin-left: 8px;
}
.plan-type-label-country-box{
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}


.plan-type-label-days {
    color: #111111;
    font-size: 18px;
    letter-spacing: -0.025em;
    /* -2.5% 자간 */
    line-height: 34px;
    padding-left: 6px;
    display: flex;
    justify-content: space-between;
    font-weight: 600;

}
.plan-type-label-days-img{
    width: 26px;
    height: 26px;

}
.plan-type-label-days-box{
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    margin-left: 8px;
}
.select-country-img {
    width: 26px;
    height: 26px;
    border: 2px solid #f8f8fa;
    border-radius: 100%;
    margin-right: 6px;
    box-sizing: border-box;
}

.search-again {
    width: 20px;
    height: 20px;
    transition: transform 0.25s ease;
}
.search-again.is-open {
    transform: rotate(180deg);
}

.plan-type-value-box-1 {
    display: flex;
    align-items: center;

}

.plan-type-country-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

#plan-type-selectDayText-box.disabled {
    background-color: #ffffff;
    /* 연회색 배경 */
    border: 1px solid #E5E5EC;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05),
        0px -1px 10px rgba(67, 0, 209, 0.03);
    /* 클릭은 그대로 가능! */
    color: #909090;
}

#plan-type-selectDayText-box-listp.disabled {
    background-color: #ffffff;
    /* 연회색 배경 */
    border: 1px solid #E5E5EC;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05),
        0px -1px 10px rgba(67, 0, 209, 0.03);
    /* 클릭은 그대로 가능! */
    color: #909090;
}


#plan-type-selectDayText-box.disabled .plan-type-value {
    color: #909090;
    font-weight: 500;
    /* 글자색 회색으로 명시적 지정 */
}

#plan-type-selectDayText-box-listp.disabled .plan-type-value {
    color: #909090;
    font-weight: 500;
}

.plan-type-value-box {
    width: 100%;
    height: 52px;
    border-radius: 28px;
    border: 1px solid #E5E5EC;
    display: flex;
    padding: 14px 20px;
    align-items: center;
    box-sizing: border-box;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05),
        0px -1px 10px rgba(67, 0, 209, 0.03);
    margin-bottom: 20px;
    margin-right: 6px;
    display: flex;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
}


.plan-type-value {
    color: #0075FF;
    font-weight: 600;
}




.plan-type-question {
    margin: 35px 32px 20px;
    color: #111111;
    font-size: 20px;
    letter-spacing: -0.025em;
    /* -2.5% 자간 */
    line-height: 34px;
    font-weight: 600;
}

.plan-type-card-list {
    margin: 0 32px 40px;
}

.plan-type-card {
    width: 100%;
    background-color: #f8f8fa;
    border-radius: 16px;
    height: 100px;
    margin-bottom: 20px;
    padding: 9px 20px;
    box-sizing: border-box;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05),
        0px -1px 10px rgba(67, 0, 209, 0.03);
    cursor: pointer;    
}

.plan-type-card-title {
    color: #111111;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 28px;
    margin-bottom: 6px;
}

.plan-type-card {
    color: #767676;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.plan-type-checkmark {
    width: 24px;
    height: 24px;
}

.plan-type-card.disabled {
    opacity: 0.4;
    pointer-events: none;
}


.plan-type-card.selected {

    background-color: rgba(0, 117, 255, 0.1);
}

#plan-type-confirm-btn {
    background-color: #cccccc;
    pointer-events: none;
}

#plan-type-confirm-btn.active {
    background-color: #0075FF;
    color: #fff;
    pointer-events: auto;
}

.plan-type-card.selected .plan-type-card-title,
.plan-type-card.selected .plan-type-card-desc {
    color: #0075FF;
    /* 원하는 색상 */
}



#search-again-country-wrapper {
    margin-top: 10px;
    background: #ffffff;
    border-radius: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    z-index: 10;
    position: absolute;
    width: 100%;
    height: 500px;
    left: 0;
    top: -140%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-0px);
    transition: opacity 0.4s, transform 0.4s;
}

#search-again-country-wrapper.fade-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-200px);
    /* 더 위에서 사라짐 */
}

#search-again-country-wrapper-listp.fade-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-200px);
    /* 더 위에서 사라짐 */
}

#search-again-country-input {
    width: 100%;
    margin-top: 6px;
    margin-bottom: 26px;
    border-radius: 100px;
    border: none;
    height: 48px;
    
    color: #111111;
    font-size: 16px;
    padding: 14px 20px 14px 44px;
    background-color: #f7f7fb;
    box-sizing: border-box;
    font-weight: 600;
    position: sticky;
    z-index: 1;
}
#search-again-country-input:focus {
    border: 1px solid #111111;
    height: 48px;
    color: #111111;
    font-weight: 500;
    background-color: #ffffff;
    box-sizing: border-box;
}

#search-again-country-input::placeholder {
    font-size: 12px;
    color: #999;
    font-weight: 500;
}

#search-again-country-list li {
    cursor: pointer;
}

#search-again-country-list li:hover {
    background-color: #F7F7FB;
    ;
}

#search-again-country-list {
    overflow-y: auto;
    /* 💡 리스트만 스크롤 */
    flex-grow: 1;

    margin-top: 10px;
    list-style: none;
}

.dropdown-flag {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    margin-right: 8px;
    vertical-align: middle;
    border: 2px solid #f8f8fa;
}

.country-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 20px;
    padding: 20px 20px 20px 20px;
    gap: 12px;
}

.country-item:hover {
    background-color: #F7F7FB;
}

#countrySearchOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    /* 어두운 반투명 배경 */
    z-index: 9;
    /* wrapper보다 낮지만 화면 맨 위 */
}

#countrySearchOverlay-listp {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    /* 어두운 반투명 배경 */
    z-index: 9;
    /* wrapper보다 낮지만 화면 맨 위 */
}

.pts-modal-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.pts-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 12px;
    transition: transform 0.1s ease;
}
.pts-close-btn:hover{
    background-color: #F7F7FB;
}
.pts-close-btn:active{
    scale: calc(0.9);
}
.pts-close-btn:hover .pts-icon-close {
    stroke: #505050;
}
.pts-icon-close{
    display: flex;
    justify-content: center;
    align-items: center;
}

.dropdown-menu-dayre {
    position: absolute;
    top: 95%;
    /* 부모 아래로 */
    left: 0;
    z-index: 999;
    border: none;
    border-radius: 6px;
    width: 100%;
    overflow-y: auto;
    margin: 12px 0px;
    max-height: 200px;
    /* ✅ 여기! 최대 높이 설정 */
    overflow-y: auto !important;
    /* ✅ 넘치면 스크롤 */
    background-color: #ffffff;
    border: 1px solid #E5E5EC;
    border-radius: 24px;
    padding: 14px 0;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05),
        0px -1px 10px rgba(67, 0, 209, 0.03);
    box-sizing: border-box;
    color: #111111;
    font-size: 16px;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.3s, transform 0.3s;
}


.dropdown-menu-dayre.fade-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-16px);
    /* 살짝 위에서 사라짐 */
}

.dropdown-menu-dayre :hover {
    background-color: #F7F7FB
}


.plan-type-header {
    position: relative;
}

.dayre-dropdown-item {
    padding: 14px 20px;
    cursor: pointer;

}


/* 상품유형형페이지-------------------------
----------------------------------------------------------------------------------------------------------------- */
.plan-tab-listp {
    margin: 25px 32px 22px;
    display: flex;
}

.plan-tab-button-listp {
    flex: 1;
    text-align: center;
    border: none;
    border-bottom: 3px solid #E5E5EC;
    background-color: white;
    cursor: pointer;
    font-size: 18px;
    line-height: 28px;
    padding: 6px 0;
    color: #767676;
    font-weight: 500;
}

.plan-tab-button-listp.active {
    border-bottom: 3px solid #0075FF !important;
    color: #0075FF !important;
    font-weight: 600;
}

.product-card-listp {
    background-color: #f8f8fa;
    margin: 0 32px 20px;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05),
        0px -1px 10px rgba(67, 0, 209, 0.03);
    box-sizing: border-box;
    cursor: pointer;
    min-height: 90px;
}

.product-list {
    min-height: auto;
}

.product-top-listp {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-top-title-listp {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.54px;
    font-weight: 600;
}

.product-top-price-listp {
    font-size: 24px;
    color: #0075FF;
    font-weight: 600;

}


.product-speed-listp {
    margin-top: 8px;
    font-size: 14px;
    color: #767676;
    line-height: 22px;
}

.product-empty-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    width: 100%;
    text-align: center;
}

.product-none-list {
    font-size: 16px;
    color: #666;
    margin: 0;
    /* 기본 마진 제거 */
}


#search-again-country-wrapper-listp {
    margin-top: 10px;
    background: #ffffff;
    border-radius: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    z-index: 10;
    position: absolute;
    width: 100%;
    height: 450px;
    left: 0;
    top: 90%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-0px);
    transition: opacity 0.4s, transform 0.4s;
}


/* #search-again-country-input-listp {
    width: 100%;
    margin-top: 6px;
    margin-bottom: 10px;
    border-radius: 16px;
    border: none;
    height: 60px;
    color: #111111;
    font-size: 18px;
    padding: 12px 24px;
    background-color: rgba(0, 117, 255, 0.1);
    box-sizing: border-box;
    font-weight: 600;
    position: sticky;
} */
#search-again-country-input-listp {
    width: 100%;
    margin-top: 6px;
    margin-bottom: 26px;
    border-radius: 100px;
    border: none;
    height: 48px;
    
    color: #111111;
    font-size: 16px;
    padding: 14px 20px 14px 44px;
    background-color: #f7f7fb;
    box-sizing: border-box;
    font-weight: 600;
    position: sticky;
    z-index: 1;
}
#search-again-country-input-listp:focus {
    border: 1px solid #111111;
    height: 48px;
    color: #111111;
    font-weight: 500;
    background-color: #ffffff;
    box-sizing: border-box;
}
#search-again-country-input-listp::placeholder {
    font-size: 12px;
    color: #999;
    font-weight: 500;
}

#search-again-country-list-listp li {
    padding: 20px 20px;
    cursor: pointer;
    flex: 1;
    overflow-y: auto;
}

.overlay-listp {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    /* 반투명 */
    z-index: 9;
    /* ✅ 얘는 검색창보다 뒤에 있어야 함 */

}



.pts-modal-header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

#search-again-country-input-listp {
    position: sticky;
    top: 48px;
    /* 닫기버튼 높이만큼 밀어줌 */
    z-index: 9;
}

#search-again-country-list-listp {
    flex: 1;
    overflow-y: auto;
    padding-right: 10px;
}




#search-again-day-open-img-wrapper-listp {
    position: absolute;
    top: 96%;
    /* 부모 아래로 */
    left: 0;
    z-index: 999;
    border: none;
    border-radius: 6px;
    width: 100%;
    overflow-y: auto;
    margin: 11px 0px;
    max-height: 200px;
    /* ✅ 여기! 최대 높이 설정 */
    overflow-y: auto !important;
    /* ✅ 넘치면 스크롤 */
    background-color: #f8f8fa;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05),
        0px -1px 10px rgba(67, 0, 209, 0.03);
    box-sizing: border-box;
    border-top: none;
    color: #111111;
    font-size: 16px
}

.day-dropdown-list li {
    padding: 10px 14px;
    cursor: pointer;
    border-radius: 24px;
}

.day-dropdown-list li:hover {
    background-color: rgba(0, 117, 255, 0.1);
}



/*----------------------------------------상세 페이지--------------------------------------------------------------------------------------------*/
.image-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.qr-notice-img-detailp{
    width: 20px; height: 20px;
}
.qr-download-info-detailp{
    margin-top: -20px;
    display: flex;
    flex-direction: column;
    padding: 32px 20px;
    position: relative;
    z-index: 2;
    border-radius: 24px;
    background-color: #ffffff;
}
.qr-info-detailp {
    margin: 0 0 16px 0;
    background-color: rgba(255, 206, 31, 0.1);
    /* border-bottom: 1px solid #E5E5EC; */
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* box-shadow: 0 0 10px rgba(0, 117, 255, 0.1); */
    padding: 0 20px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);

}

.qr-notice-detailp {
    margin-top: 16px;
    margin-bottom: 16px;
    width: auto;
    font-size: 12px;
    padding: 0px 10px;
    text-align: center;
    line-height: 24px;
    font-weight: 600;
}

.notice-box-detailp {
    margin: 0px;
    height: auto;
    background-color: rgba(255, 206, 31, 0.1);
    border-radius: 16px;
    /* border-bottom: 1px solid #E5E5EC; */
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}


.small-text1-detailp {
    margin-top: 24px;
    margin-bottom: 24px;
    width: auto;
    font-size: 12px;
    padding: 0px 20px;
    text-align: center;
    line-height: 24px;
}

.small-text2-detailp {
    margin-bottom: 20px;
    width: auto;
    font-size: 12px;
    padding: 0px 20px;
    text-align: center;
    line-height: 24px;
    font-weight: 600;
}

.download-text-detailp {
    font-weight: 600;
}
.row-detailp-container{
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    margin: 0 20px;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.row-detailp1 {
    position: relative;

    width: 100%;
    padding: 0 16px;
    margin-top: 20px;
    box-sizing: border-box;
    display: flex;
    /* border-bottom: 1px solid #f5f5f5; */
    justify-content: start;
    align-items: flex-start;
}
/* .row-detailp1::after {
  content: "";
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: -5px;
  height: 1px;
  background: #f5f5f5;
} */
.row-detailp2 {
    position: relative;

    width: 100%;
    padding: 0 16px;
    margin-top: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: start;
    align-items: flex-start;
}

.row-detailp3 {
    position: relative;
    width: 100%;
    padding: 0 16px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: start;
    align-items: flex-start;
}
/* .row-detailp2::after {
  content: "";
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: -5px;
  height: 1px;
  background: #f5f5f5;
} */
.date-reset-box-detailp{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;  
    box-sizing: border-box;
    margin-right: 10px;
}
.data-reset-box-detailp{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;  
    box-sizing: border-box;
    margin-right: 10px;

}
.date-reset-img-detailp{
    width: 20px; height: 20px;
    cursor: pointer;
}
.calendar-img-detailp {
    width: 24px;
    height: 24px;
}

.calendar-text-detailp {
    margin-left: 10px;
    width: 130px;
    line-height: 32px;
    font-size: 14px;
    color: #505050;
    font-weight: 600;
}

.calendar-time-detailp {
    line-height: 32px;
    font-size: 14px;
    color: #111111;
    margin-left: 8px;
    font-weight: 600;

}

.calendar-detail-detailp {
    font-size: 10px;
    line-height: 14px;
    color: #767676;
    margin-left: 6px;
    text-align: right;
    width: 46px;
}

.calendar-dropdown-detailp {
    width: 16px;
    height: 16px;
    margin-left: 6px;


}


.carrier-img-detailp {
    width: 24px;
    height: 24px;
}

.carrier-title-detailp {
    margin-left: 10px;
    width: 130px;
    line-height: 32px;
    font-size: 14px;
    color: #505050;
    font-weight: 600;

}
.carrier-time-detailp{
    line-height: 32px;
    font-size: 14px;
    color: #111111;
    margin-left: 8px;
    font-weight: 600;
    flex: 1;

}
.carrier-text-detailp {
    margin-left: 8px;
    font-size: 14px;
}
.feature-icons-container{
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    margin: 0 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    /* box-shadow: 0 0 10px rgba(0, 117, 255, 0.1); */
    background-color: #ffffff;
    /* border: 1px solid #E5E5EC; */

}
.feature-icons {
    margin: 16px 20px 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.feature-icons2 {
    margin: 0 20px 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    align-items: start;   /* 🔥 핵심 */
}
.feature-item-detailp {
    /* box-shadow: 5px 5px 5px 0 rgba(0, 117, 255, 0.05); */
    /* border: 1px solid #E5E5EC; */
    border-radius: 24px;
    flex: 1;
    /* 동일 너비로 꽉 채움 */
    min-width: 0;
    /* overflow 방지용 */
    display: flex;
    flex-direction: column;
    /* 세로 정렬 */
    align-items: center;
    /* 가로 가운데 정렬 */
    justify-content: center;
    /* 세로 가운데 정렬 (선택) */
    text-align: center;
    /* 텍스트 가운데 정렬 */
    padding: 12px;
    gap: 10px;
    background-color: #ffffff;
}

.feature-item-img {
    width: 34px;
    height: 34px;
    margin-bottom: 6px;
}

.feature-title-img {
    font-size: 14px;
    color: #111111;
    font-weight: 600;
}

.feature-text-img {
    font-size: 14px;
    color: #111111;
    font-weight: 600;

}

.product-extra {
    margin: 30px 20px 40px;
    display: flex;
    flex-direction: column;


}

.ckeck-country-btn-detailp {
    margin-bottom: 20px;
    min-height: 56px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    text-align: left;
    background-color: #F8F8FA;
    display: flex;
    align-items: center;
    padding: 14px 24px;
    cursor: pointer;
}



.ckeck-country-btn-img-detailp {
    width: 22px;
    height: 22px;
    margin-right: 10px;
}

.ckeck-country-btn-dropdownimg-detailp {
    width: 22px;
    height: 22px;
    margin-left: 20px;
    margin-left: auto;
}
.ckeck-country-btn-text-detailp{
    font-size: 14px;
    font-weight: 600;
    color: #505050;
}
/* 폰트 */

.ckeck-apn-btn-detailp {
    margin-bottom: 20px;
    min-height: 50px;
    border: none;
    border-radius: 12px;
    box-shadow: 8px 8px 8px 0 rgba(67, 0, 209, 0.05);
    text-align: left;
    background-color: #F8F8FA;
    flex-direction: column;
    display: flex;
    transition: height 0.3s ease;
    overflow-anchor: none;

}

.product-specs{
    display: flex;
    flex-direction: column;
    background-color: #f8f8fa;
    padding-bottom: 20px;
    padding-top: 20px;
    gap: 20px;
}

.apn-card-box-detailp {
  /* border: 1px solid #E5E5EC; */
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  overflow: hidden; /* 핵심 */
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  text-align: left;
  width: auto;
}

.ckeck-apn-btn-detailp2 {
  width: 100%;
  min-height: 56px;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8f8fa;
  margin: 0;
  cursor: pointer;
    border: 0;
      /* border-bottom: 1px solid #E5E5EC; */


}

.apn-body-detailp {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease;
  opacity: 0;
  display: flex;
  flex-direction: column;


}

.apn-body-detailp.open {
  max-height: 200px;   /* 충분히 크게 */
  opacity: 1;
  padding-bottom: 16px;
}





.apn-result-wrapper-detailp{
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.apn-result-detailp {

    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0 18px 0 24px; 
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.4;
}


.apn-result-detailp:nth-child(1) {
  margin-top: 26px; /* 원하는 만큼 */
}


.apn-label-detailp{
    width: 90px;
    color: #767676;
    font-weight: 600;
    font-size: 14px;
}
.apn-value-detailp {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #111111;

    min-width: 0;          /* flex 필수 */
    white-space: normal;   /* 🔥 줄바꿈 허용 */
    word-break: break-all; /* 🔥 길어도 강제로 줄바꿈 */
    margin-right: 10px;
}
.apn-copy-btn-detailp {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 16px;
  background-color: #f8f8fa;
}
.apn-copy-icon-detailp {
  width: 18px;
  height: 18px;
  opacity: 0.6;
}

.apn-copy-btn-detailp:hover .apn-copy-icon-detailp {
  opacity: 1;
}

.ckeck-apn-btn-dropdownimg-detailp {
  transition: transform 0.25s ease;
}

.ckeck-apn-btn-dropdownimg-detailp.is-open {
  transform: rotate(180deg);
}

.ckeck-apn-btn-text-detailp {
    color: #505050;
    font-size: 14px;
    font-weight: 600;
}

.ckeck-apn-btn-img-detailp {
    width: 22px;
    height: 22px;
    margin-left: 20px;
    margin-right: 10px;
}

.ckeck-apn-btn-dropdownimg-detailp {
    width: 22px;
    height: 22px;
    margin-left: auto;

}

.info-bubble-btn {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 12px;
  background: #f8f8fa;        /* 말주머니 몸통 */
  border: none;
  border-radius: 10px;
    width: fit-content;
  cursor: pointer;
}

.info-bubble-btn::after {
  content: "";
  position: absolute;

  top: -6px;                 /* 🔥 위로 */
  left: 20px;

  width: 0;
  height: 0;

  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #f8f8fa;  /* 🔥 방향 반전 */
}
.info-bubble-icon{
    width: 14px; height: 14px;
}
.info-bubble-text{
    color: #767676;
    font-size: 10px;
    font-weight: 600;
}
.warning-box-detailp {
    background-color: #FF00001A;
    border-radius: 16px;
    width: 100%;
    min-height: 56px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    padding: 16px 20px;
    box-sizing: border-box;


}
#validityPeriod{
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
}
.validityPeriodimg-detailp {
    width: 24px;
    height: 24px;
    margin: 0 10px 0 0  
}
.expiration_days-Detailp{
    margin-left: 4px;
    font-size: 16px;
    font-weight: 600;
}
.validity-text-box-detailp {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    display: inline-block;
    margin: 0;
}
.validity-warning{
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: calc(100% - 40px);
}
.validity-warning-text {
    font-size: 14px;
    color: #FF0000E6;
    line-height: 24px;
    /* margin-top: 16px; */
    text-align: center;
}

.expiration-warning-detailp {
    font-size: 12px;
    color: #FF0000E6;
    background-color: #FF000000;
    line-height: 24px;
    margin-bottom: 10px;
    text-decoration: underline;
    border: none;
    margin-right: 20px;
    margin-left: auto;
}

.purchase-actions-detailp {
    display: flex;
    justify-content: space-between;
    margin: 10px auto 10px;
    width: calc(100% - 40px);
    gap: 15px;
}

.cart-box-detailp {
    width: 60px;
    height: 60px;
    border-radius: 22px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.1s ease;
}
.cart-box-detailp:hover{
    background-color: #F7F7FB;
}
.cart-box-detailp:active{
    scale: calc(0.9);
}

.buy-button-detailp {
    margin-left: 0;
    margin-right: 1px;
    background-color: #0075FF;
    color: #ffffff;
    border: none;
    border-radius: 28px;
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.1s ease;
}
.buy-button-detailp:hover{
    background-color: #3391FF;
}
.buy-button-detailp:active{
    scale: calc(0.9);
}
.cart-img-detailp {
    width: 28px;
    height: 28px;
}

.product-country-image {
    width: 100%;
    max-width: 460PX;
    height: 150px;
    box-shadow: 8px 8px 8px 0 rgba(67, 0, 209, 0.05);
    display: flex;
    justify-content: center;
    /* 수평 가운데 */
    align-items: flex-end;

}

.product-header {
  position: relative;
  padding: 28px 0 48px;
  /* border-radius: 20px 20px 0 0; */
  overflow: hidden;
  /* 90deg 대신 135deg를 써서 색이 뭉치지 않고 흐르게 만듭니다 */
  background: linear-gradient(
    135deg,
    #e3f2ff 0%,   /* 맑은 하늘색 */
    #ffffff 50%,  /* 중앙을 완전히 흰색으로 비워주면 글자가 팍 삽니다 */
    #e8eaf6 100%  /* 끝에만 살짝 보랏빛 */
  );
  border-bottom: 1px solid #f1f5f9; /* 경계선을 아주 연한 회색으로 */
  /* 고밀도 UI 느낌을 주는 핵심: 미세한 외곽선 */
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
}
.product-title-detailp {
  position: relative;
  min-height: 110px;
  width: 90%;
  /* padding: 20px; */

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  border-radius: 12px;


  color: #1e293b;
  z-index: 1;
  box-sizing: border-box;
}

.product-title-detailp::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 0% 75%,
      rgba(0,117,255,0.02) 0,
      rgba(0,117,255,0.02) 90px,
      transparent 91px
    ),
    radial-gradient(
      circle at 35% -20%,
      rgba(0,117,255,0.02) 0,
      rgba(0,117,255,0.02) 100px,
      transparent 101px
    ),
    radial-gradient(
      circle at 120% 65%,
      rgba(120, 90, 200, 0.02) 0,
      rgba(120, 90, 200, 0.02) 90px,
      transparent 91px
    );

  filter: blur(10px);   /* 🔥 여기 */
}
#productName {
    margin-top: 6px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    text-align: center;
}

#productSubtitle {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    text-align: center;
    margin-top: 6px;
}

#productDataPolicy {
    margin-top: 6px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}





#countryModalOverlayDetailp {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
}

/* 모달에만 적용할 새로운 클래스 */
/* .modal-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
    transform: translate(-50%, -100%);
} */

#countryModalDetailp {
    position: fixed;
    top: 50%;
    left: 50%;
    background: #ffffff;
    width: calc(100% - 60px);
    max-width: 400px;
    padding: 20px;
    border-radius: 32px;
    z-index: 10000;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    max-height: 600px;
    box-sizing: border-box;
    min-height: 600px;
    transition: opacity 0.4s, transform 0.4s;
    transform: translate(-50%, -50%);
}

#apnInfoModalDetailp {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    background: #ffffff;
    width: calc(100% - 60px);
    max-width: 400px;
    border-radius: 32px;
    z-index: 10000;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    max-height: 600px;
    box-sizing: border-box;
    min-height: 600px;
    transition: opacity 0.4s, transform 0.4s;
    transform: translate(-50%, -50%);
    padding: 20px;
}

#apnInfoModalDetailp.modal-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -100%);
}
#dateResetInfoModalDetailp {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    background: #ffffff;
    width: calc(100% - 60px);
    max-width: 400px;
    border-radius: 32px;
    z-index: 10000;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    max-height: 300px;
    box-sizing: border-box;
    min-height: 300px;
    transition: opacity 0.4s, transform 0.4s;
    transform: translate(-50%, -50%);
    padding: 20px;
}
#dateResetInfoModalDetailp.modal-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -100%);
}
#dataResetInfoModalDetailp {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    background: #ffffff;
    width: calc(100% - 60px);
    max-width: 400px;
    border-radius: 32px;
    z-index: 10000;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    max-height: 300px;
    box-sizing: border-box;
    min-height: 300px;
    transition: opacity 0.4s, transform 0.4s;
    transform: translate(-50%, -50%);
    padding: 20px;
}
#dataResetInfoModalDetailp.modal-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -100%);
}

#expirationWarningModalDetailp {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    background: #ffffff;
    width: calc(100% - 60px);
    max-width: 400px;
    border-radius: 32px;
    z-index: 10000;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    max-height: 600px;
    box-sizing: border-box;
    min-height: 600px;
    transition: opacity 0.4s, transform 0.4s;
    transform: translate(-50%, -50%);
    padding: 20px;
}

#expirationWarningModalDetailp.modal-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -100%);
}


#countryModalDetailp.modal-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -100%);
}

.modal-header-detailp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    margin-bottom: 12px;
}

.close-btn-detailp {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    text-align: center;
    border: none;
    background: none;
    cursor: pointer;
    width: 20px;
    height: 20px;
    color: #111 !important;
    padding: 10px;
    transition: transform 0.1s ease;
    box-sizing: border-box;
}
.close-btn-detailp:hover{
    background-color: #f7f7fb;
    border-radius: 12px;
}

.close-btn-detailp:active{
    scale: calc(0.9);
}
.close-btn-detailp {
    width: 50px;
    height: 50px;
    font-size: 24px;
}



.lock-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

.flag-detailp {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    border-radius: 50px;
    border:2px solid #f8f8fa;
}

.country-item-detailp {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 20px;
    padding: 20px 20px 20px 20px;
    gap: 12px;
}

.country-item-detailp:hover {
    background-color: #F7F7FB;
}


.modal-body-detailp {
    max-height: 500px;
    /* 필요 시 조절 */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* iOS 터치 스크롤 */
}


.countrty-title-list-detailp {
    display: flex;
    align-items: center;
    font-size: 20px;
    line-height: 32px;
    padding: 0;
    /* ❌ 상하 30px 없애기 */
    color: #111111;
    font-weight: 600px;

}

.country-name-detailp {
    font-size: 16px;
    color: #111111;
    padding: 10px;
}

.carrier-name-detailp {
    font-size: 12px;
    color: #505050;
    padding-left: 10px;
}

.countrty-title-img-detailp {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    object-fit: contain;
}

.modal-header-detailp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    /* 적당한 내부 여백 */
}


.modal-search-detailp {
  position: relative;
  border-bottom: 1px solid #f0f0f0;
}
.modal-search-detailp:focus {
    border: 1px solid #111111;
    height: 48px;
    color: #111111;
    font-weight: 500;
    background-color: #ffffff;
    box-sizing: border-box;
}
.search-icon-detailp {
    width: 20px; height: 20px;
    position: absolute;
    left: 20px;
    top: 39%;
    transform: translateY(-50%);
    opacity: 0.7;
    pointer-events: none;
    z-index: 10;
}



.search-input-detailp {
    width: 100%;
    margin-top: 6px;
    margin-bottom: 26px;
    border-radius: 100px;
    border: none;
    height: 48px;
    
    color: #111111;
    font-size: 16px;
    padding: 14px 20px 14px 44px;
    background-color: #f7f7fb;
    box-sizing: border-box;
    font-weight: 600;
    position: sticky;
    z-index: 1;
}
.search-input-detailp:focus {
    border: 1px solid #111111;
    height: 48px;
    color: #111111;
    font-weight: 500;
    background-color: #ffffff;
    box-sizing: border-box;
}

.search-input-detailp::placeholder {
    font-size: 12px;
    color: #999;
    font-weight: 500;
}
















body.modal-open,
html.modal-open {
    overflow: hidden !important;
    touch-action: none
}


.apnInfo-header-detailp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    color: #111111;
    font-size: 20px;
    font-weight: 600;
    line-height: 34px;
    border-bottom: 1px solid #E5E5EC;
    padding: 0 12px 10px;
}

.apnInfo-title-container-detailp {
    display: flex;
}

.apnInfo-titl-img-detailp {
    width: 32px;
    height: 32px;
    margin-right: 6px;
}



.apn_info_text {
    font-size: 16px;
    color: #111111;
    line-height: 30px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 26px 12px 12px;
    flex: 1 1 auto;
    min-height: 0;
}


#expirationWarningModalDetailp {
    display: flex;
    flex-direction: column;
}


.expirationWarning-header-detailp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #111111;
    font-size: 18px;
    font-weight: 600;
    line-height: 34px;
    padding: 0 12px 10px;
    border-bottom: 1px solid #E5E5EC;
}

.expirationWarning-title-container-detailp {
    display: flex;
    align-items: center;
}

.expiration-warning-titl-img-detailp {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.expiration_warning_text {
    font-size: 16px;
    color: #111111;
    line-height: 30px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 12px 12px;
    flex: 1 1 auto;
    min-height: 0;
}

/* 메일 회원가입 페이지 */

.loginpage-submit-btn {
    margin: 48px 32px 30px;
    background-color: #f8f8fa;
    color: #909090;
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    border-radius: 16px;
    height: 60px;
    display: flex;
    align-items: center;
    /* ✅ 세로 중앙 */
    justify-content: center;
    /* ✅ 가로 중앙도 필요하면 */
    font-weight: 600;
    cursor: default;
    transition: background-color 0.3s, color 0.3s;
    border: none;
    width:100%;
    width: calc(100% - 64px); /* 전체 너비에서 좌우 32px 뺌 */
}

.loginpage-submit-btn.active {
    background-color: #0075FF;
    color: white;
    cursor: pointer;
}

.email-send-text{
    width: calc(100% - 64px);
    margin: 10px auto 0;
    color:#767676;
    line-height: 24px;
    display: none;
}

/* /////////////메일인증페이지 */

.timerbox-email {
    margin-top: 10px;
    color: #909090;
    margin-left: 32px;
    margin-right: 32px;
    width: calc(100% - 64px); /* 좌우 여백 32px씩 뺀 크기 */
    box-sizing: border-box;   /* 패딩/보더 포함 계산 */
    display: none;
}




/* 프로필페이지/////////////////////////////////////*/

.coupon-available-tab-item-checkoutp{
    display: flex;
    margin-bottom: 20px;
    border: 1px solid #E5E5EC;
    width: 100%;
    min-height: 100px;
    min-width: 30px;
    border-radius: 16px;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}


.coupon-available-tab-item-body-checkoutp{
    display: flex;
    flex-direction: column;
    padding: 20px 40px;
    gap: 10px;
    justify-content: center;
}

.coupon-available-tab-item-value-profilep{
    font-size: 16px;
    font-weight: 600;
    color: #0075FF;
}
.coupon-available-tab-item-title-profilep{
    font-size: 14px;
    font-weight: 600;
    color: #111111;
}

.coupon-available-tab-item-valid-box-profilep{
    font-size: 12px;
    display: flex;
    gap: 6px;
    color: #767676;
}
.coupon-available-tab-item-sub-profilep{
    font-size: 12px;
    color: #767676;
}


/*사용완료 쿠폰카드*/
.coupon-expired-tab-item-checkoutp{
    display: flex;
    margin-bottom: 20px;
    border: 1px solid #f0f0f0;
    width: 100%;
    min-height: 100px;
    min-width: 30px;
    border-radius: 12px;
    box-sizing: border-box;

}
.coupon-expired-tab-item-body-checkoutp{
    display: flex;
    flex-direction: column;
    padding: 20px 40px;
    gap: 10px;
    justify-content: center;
}

.coupon-expired-tab-item-value-profilep{
    font-size: 16px;
    font-weight: 600;
    color: #767676;
}
.coupon-expired-tab-item-title-profilep{
    font-size: 14px;
    font-weight: 600;
    color: #767676;
}

.coupon-expired-tab-item-date-box-profilep{
    font-size: 12px;
    display: flex;
    gap: 6px;
    color: #767676;
}

.coupon-expired-tab-item-date-box-profilep{
    font-size: 12px;
    display: flex;
    gap: 6px;
    color: #767676;
}
/*주문모달*/
.order-list-card-container-profilep{
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #E5E5EC;
    border-radius: 16px;
    box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.04),
        0 8px 20px rgba(0, 0, 0, 0.06);
    gap: 12px;
    
}
.order-list-card-header-box{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 20px;
    padding-left: 6px;
    border-bottom: 1px solid #E5E5EC;
}
.order-list-card-date-box{
    display: flex;
    gap: 6px;
    color: #767676;
    font-size: 12px;
    font-weight: 500;
}
.order-list-card-orderNum-box{
    display: flex;
    gap: 6px;
    color: #767676;
    font-size: 12px;
    font-weight: 500;    
}

.order-list-card-product-box-profilep{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    font-size: 18px;
    font-weight: 600;
    color: #111111;
    gap: 8px;
    padding-left: 6px;
    padding-right: 6px;
    /* padding-bottom: 20px;
    border-bottom: 1px solid #E5E5EC; */
}
.order-list-card-product-name-2box{
    display: flex;
    justify-content: space-between;
}
.order-list-card-payment-box-profilep{
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}
.order-list-card-payment-price-box{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-left: 6px;
    padding-right: 6px;
}
.order-list-card-payment-price-value-box{
    display: flex;
    gap: 6px;
    color: #555555;
    font-size: 18px;
    font-weight: 600;

}
.order-list-card-payment-price-text{
    font-size: 18px;
    color: #555555;
    font-weight: 600;
}

.order-list-card-btn-box-profilep{
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.order-list-card-btn-detail-profilep{
    flex: 1;
    background-color: #F7F7FB;
    /* border: 1px solid #E5E5EC; */
    border-radius: 12px;
    color: #111111;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    cursor: pointer;
}
.order-list-card-btn-receipt-profilep{
    flex: 1;
    background-color: #F7F7FB;
    /* border: 1px solid #E5E5EC; */

    border-radius: 12px;
    color: #111111;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    cursor: pointer;
}
.order-list-card-review-box-profilep{
    display: flex;
    margin-top: 10px;
}
.order-list-card-btn-review-profilep{
    flex: 1;
    background-color: rgba(0, 117, 255, 0.1);
    border-radius: 12px;
    color: #111111;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 34px;
}
.order-modal-title-box-profilep{
    display: flex;
    gap: 4px;
    padding-left: 6px;
    flex: 0 0 auto;
    margin-bottom: 10px;
}
.order-modal-title-img-profilep{
    padding-top: 2px;
    width: 24px; height: 24px;
}
.order-modal-title-text-profilep{
    font-size: 20px;
    line-height: 28px;
    display: flex;
    align-items: center;
    color: #111111;
    font-weight: 600;
    margin-bottom: 12px;

}

.account-info-title-box-1{
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: start;
    margin-left: 10px;

}
.account-info-title-box-2{
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: end;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
}
.profile-personimg{
    width: 20px;
    height: 20px;
    margin-right: 4px;
}

.account-info-title{
    width: calc(100% - 40px);
    margin: 42px auto 0px;
    height: auto;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
.account-info-title-label{
    font-size: 20px;
    line-height: 28px;
    color: #111111;
    /* font-weight: 600; */
}

.profile-edit-link{
    text-decoration: none;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 12px;
    margin-left: 10px;
}

.profile-edit-link:hover .profile-edit-link-label{
    color: #007bff;
}

.profile-edit-link:hover .profile-link-img{
    content: url("/assets/img/dropdown-blue-right.png");
}
.profile-edit-link-label{
    font-size: 14px;
    color: #909090;
}

.profile-link-img{
    width: 12px;
    height: 12px;
}
.payment-link-img{
    width: 16px;
    height: 16px;
}



.account-box-profilep{
    margin: 8px auto 12px;
    width:100%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border: none;
    width: calc(100% - 40px);
    box-sizing: border-box; 
    border-radius: 24px;
    padding: 20px 20px;
    height: auto;
    box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.04),
        0 8px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #F7F7FB;
    gap: 6px;    
}

.account-info-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.account-info-item_label{
    font-size:16px;
    color:#767676;
    margin: 10px 10px 10px 0;
    min-width: 60px;
}
.account-info-item_value{
    font-size: 16px;
    color: #111111;
    display: flex;
    align-items: flex-start;
}


    /* 프로필-----친구추천----------------------------------- */


.profile-referral_codeimg{
    width: 20px;
    height: 20px;
    margin-right: 4px;

}
.profilep-middle-bg{
    background-color: #F7F9FC;
    padding: 20px 0;
    /* border-radius: 50px 50px 0 0; */
}
.referral_code-title{
    width: 100%;
    margin: 16px auto 0;
    height: auto;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.referral_code-title-label{
    font-size: 18px;
    line-height: 28px;
    color: #111111;
}
.referral_code-title-box-1{
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: start;
    margin-left: 10px;
}
.profile-edit-link{
    text-decoration: none;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: end;
}

.profile-edit-link:hover .profile-edit-link-label{
    color: #007bff;
}

.profile-edit-link:hover .profile-link-img{
    content: url("/assets/img/dropdown-blue-right.png");

}
.profile-edit-link-label{
    font-size: 14px;
    color: #909090;
}



.referral_code-box-profilep{
    margin: 8px auto 24px;
    width:100%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border: none;
    width: calc(100% - 40px);
    box-sizing: border-box; 
    border-radius: 24px;
    padding: 14px 20px;
    height: auto;
    box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.04),
        0 8px 20px rgba(0, 0, 0, 0.06);

    border: 1px solid #F7F7FB;
    gap: 20px;    
}
.payment-management-box-profilep{
    margin: 22px auto 24px;
    width:100%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border: none;
    width: calc(100% - 40px);
    box-sizing: border-box; 
    border-radius: 24px;
    padding: 20px;
    height: auto;
    box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.04),
        0 8px 20px rgba(0, 0, 0, 0.06);

    border: 1px solid #F7F7FB;
    gap: 20px;
}


.language-box-profilep{
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: auto;
}




.profile-payment_management-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right:10px;
    width: 100%;
    cursor: pointer;    
}
.profile-language-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right:10px;
    width: 100%;   
    gap: 10px;
}
.profile-order-history-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-right:10px;
    width: 100%;
}

.profile-referral_code-container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding-right:10px;
    width: 100%;
    /* margin-bottom: 10px; */
}
.order-history-label-value{
    display: flex;
    justify-content: center;
    align-items: center;
}
.language-label-value{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.coupon-label-value{
    display: flex;
    justify-content: center;
    align-items: center;
}
.referral_code-label-value{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.referral_code-item_value-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #111111;
}
.referral_code-item_label{
    font-size:16px;
    line-height: 20px;
    color:#767676;
    padding: 10px 20px 10px 8px;
    min-width: 60px;
}

.referral_code-item_value{
    font-size: 16px;
    color: #0075ff;
    margin-right: 20px;
    padding: 10px 20px 10px 10px;
    /* border-radius: 100px; */
    /* background-color: rgba(0, 117, 255, 0.1); */
}
.profile-order-item_value{
    font-size: 18px;
    /* font-weight: 500; */
    color: #111111;
    margin-left: 10px;
    padding: 10px 20px;
    /* border-radius: 100px;
    background-color: #f8f8fa; */
}

.profile-coupon-item_value{
    font-size: 18px;
    /* font-weight: 600; */
    color: #111111;
    margin-left: 10px;
    padding: 10px 20px;
    /* border-radius: 100px;
    background-color: #f8f8fa; */
}
.profile-lanuage-item_value{
    font-size: 16px;
    color: #111111;
    padding: 10px 20px;
}

.profile-payment-item_value{
    font-size: 16px;
    color: #111111;
    margin-right: 20px;
    padding: 16px 20px;
}


.referral_code-item_value-copy{
    border-radius: 100px;
    background-color: #f8f8fa;
    color: #222222;
    width: 24x;
    height: 24px;
    padding: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.referral_code-item_value-copy:active {
  transform: scale(0.85);
  opacity: 0.6;
}



.language-change-copy-btn{
    border-radius: 4px;
    background-color: #f8f8fa;
    color: #222222;
    border: solid 1px none;
    margin-left: auto;
    width: auto;
    font-size: 12px;
    text-align: center;
    display: flex;              /* ✅ flex로 전환 */
    justify-content: center;    /* 가로 가운데 */
    align-items: center;        /* 세로 가운데 */ 
    padding: 14px 20px;
    font-weight: 600;
    border-radius: 12px;
    
}
.profile-order-history-share-container{
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.profile-coupon-container{
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.profile-referral_code-share-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 42px;
    background-color: #F7F7FB;
    border-radius: 32px;
    margin: 0 0 16px;
    gap: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.profile-referral_code-share-container:hover{
    background-color: #f1f1f3;
}
.profile-referral_code-share-container:active {
  transform: scale(0.85);
  opacity: 0.6;
}
.referral_code-share-btn{
    font-size: 14px;
    color: #111111;
    text-align: center;

}
.referral_code-share-img{
    width: 12px;
    height: 12px;
}

.card-label-value-profilep{
    display: flex;
    justify-content: flex-start;
    align-items: center;

}


.order-cuponbox{
    display: flex;
    flex-direction: column;
    width: calc(100% - 40px);
    margin: 16px auto 42px;
    box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.04),
        0 8px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #F7F7FB;
    border-radius: 24px;
    padding: 20px; 
    box-sizing: border-box;
    gap: 20px;   
}

.orderbox-profilep{
    display: flex;
    flex-direction: column;
    
}

.cupon-box-profilep{
    display: flex;
    flex-direction: column;
    
}

.orderbox-profilep,
.cupon-box-profilep {
    flex: 1;   /* 부모 안에서 동일한 비율로 공간 차지 */
    min-width: 0;
}


.order-profilep-title{
    margin: 0;
    height: auto;
    font-size: 20px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 8px;
}
.order-profilep-title-label{
    font-size: 18px;
    line-height: 28px;
    color: #111111;
    width: 100%;
}
.cupon-profilep-title{
    margin: 0;
    height: auto;
    font-size: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}
.cupon-profilep-title-label{
    font-size: 18px;
    line-height: 28px;
    color: #111111;
    width: 100%;
}
.order-cardbox-profilep{
    margin: 8px auto 0;
    width:100%;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box; 
    border-radius: 24px;
    /* padding: 28px 20px 14px; */
    height: auto;
    /* box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.04),
        0 8px 20px rgba(0, 0, 0, 0.06); */
    /* border: 1px solid #F7F7FB;     */
}

.profilep-modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); /* 반투명 배경 */
  display: none; /* 기본은 안 보이게 */
  justify-content: center; /* 가운데 정렬 */
  align-items: center;
  z-index: 999;
}
.profilep-modal-overlay.show {
  display: flex;    /* show 클래스 붙으면 보이게 */
}
.cupon-cardbox-profilep{
    margin: 0 auto 0;
    width:100%;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box; 
    border-radius: 24px;
    /* padding: 14px 20px 28px; */
    height: auto;
    /* box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.04),
        0 8px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #F7F7FB;     */
}

.order-coupon-detail-img{
    width: 16px;
    height: 16px;
}


.order-coupon-detail-btn{
    font-size: 12px;
    color: #111111;
    text-align: center;

}

.payment-management-title{
    width: 100%;
    margin: 0 auto 0;
    height: auto;
    font-size: 20px;
    display: flex;
    justify-content: start;
    align-items: center;
    box-sizing: border-box;
    gap: 6px;
    padding-top: 10px;
}
.profile-language-value-container{
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.selected-language-title{
    /* width: calc(100% - 40px); */
    margin: 0 auto;
    height: auto;
    font-size: 20px;
    display: flex;
    justify-content: start;
    align-items: center;
    box-sizing: border-box;
    gap: 8px;
}

.selected-language-title-label{
    font-size: 18px;
    line-height: 28px;
    color: #111111;
    gap: 8px;
}

.profile-selected-languageimg{
    width: 20px;
    height: 20px;
    margin-right: 4px;
}
.profile-payment-managementimg{
    width: 20px;
    height: 20px;
    margin-right: 4px;
}

.profile-lanuage-flage-label{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border: 2px solid #0075ff1A;
}
.profile-card-img-label{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border: 2px solid #0075ff1A;
}


.logout-submit-container{
    display: flex;
    width: calc(100% - 40px);
    margin: 72px auto 120px;
    gap: 8px;
}

.logout-btn {
    width: 100%;
    background-color: #f8f8fa;
    color: #909090;
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    border-radius: 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    cursor: default;
    transition: background-color 0.3s, color 0.3s;
    border: none;
    margin: 0 auto 100px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.logout-btn:hover{
  background-color: #f1f1f3;
}
.logout-btn:active{
  transform: scale(0.85);
  opacity: 0.6;
}

/* 프로필수정페이지 */

.profile-edit-container{
    display: flex;
    flex-direction: column;
    margin: 72px auto 40px;
    width: calc(100% - 64px);
}
.delete-account-text{
    width: calc(100% - 64px);
    margin: auto;
    display: flex;
    justify-content: end;
    align-items: center;
    font-size: 14px;
    color: #767676;
    margin-bottom: 60px;
    gap: 4px;
    cursor: pointer;
}
.delete-account-img-profileeditp{
    width: 14px;
    height: 14px;
}


.profile-edit-input-box{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
    margin: 20px 0;
    gap: 14px;
    padding-right: 30px;
}

.form-label-profiie-editp{
    font-size: 14px;
    color: #505050;
    margin-left: 8px;
}

.input-with-icon-profile-editp{
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.profile-edit-input{
    width: 100%;
    height: 60px;
    border: 1px solid #F0F0F0;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 19px 40px 19px 50px;
    background-color: #f8f8fa;
}

.profile-edit-input-num-name{
    width: 100%;
    height: 60px;
    border: 1px solid #F0F0F0;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 19px 40px 19px 50px;
    background-color: rgba(255, 206, 31, 0.1);
}
.profile-edit-input-num-name:focus {
    background-color: #fff;
    border: 1px solid #111111;
    outline: none;
}
.profile-edit-input-num-name::-webkit-outer-spin-button,
.profile-edit-input-num-name::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.input-icon-profile-editp{
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    pointer-events: none; 
}


.save-btn-profile-editp{
    width: 100%;
    background-color: #0075ff1A;
    border-radius: 16px;
    border: none;
    margin-top: 32px;
    color: #111111;
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    height: 60px;
}



.label-row-profilep {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.email-change-btn-profilep{
    border: none;
    border-radius: 6px;
    background-color: #0075FF;
    color: #ffffff;
    margin-right: 4px;
    cursor: pointer;
    transition: transform 0.1s ease;
}
.email-change-btn-profilep:hover{
    scale: calc(1.1);
    background-color: #3391FF;
}

.email-change-btn-profilep:active{
    scale: calc(1.1);
}

.modal-email-profilep{
    display: none;
    position: fixed;
    inset: 0;
    top: 0; left:0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 1000;
    justify-content: center;
    align-items: flex-start;
    padding: 0 10px;
    box-sizing: border-box;
}



.current-email-span-profilep{
    color: #0075FF;
}

.emailModal-close-btn-profilep{
    border: none;
    margin-top: 30px;
    width: 100%;
    line-height: 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    background-color: #0075FF;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.1s ease;
}
.emailModal-close-btn-profilep:hover{
    background-color: #3391FF;
}
.emailModal-close-btn-profilep:active{
    scale: calc(0.9);
}
/* 수정 불가 input은 hover/focus 반응 없애기 */
.profile-edit-input:disabled,
.profile-edit-input[readonly],
.profile-edit-input:disabled:hover,
.profile-edit-input[readonly]:hover,
.profile-edit-input:disabled:focus,
.profile-edit-input[readonly]:focus {
  outline: none;
  

  box-shadow: none;
  border-color: #F0F0F0;
  background-color: #f8f8fa; /* 네가 고정하고 싶은 배경 */
  cursor: default;
}


.social-provider-icon-editp{
    width: 20px;
    height: 20px;
    margin-right: 4px;
    vertical-align: middle;

}

.social-email-box{
    padding-right: 6px;
}
.social-provider-text{
    font-size: 14px;
    line-height: 20px;
    color: #111111;

}

.toasts-profile-editp {
  position: fixed;
  bottom: calc(82px + 16px + env(safe-area-inset-bottom)); /* 하단바 82px */
  left: 50%;
  transform: translateX(-50%) translateY(8px); /* 처음엔 살짝 아래 */

  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2000;

}

.toasts-profile-editp.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0); /* 위로 살짝 올라오며 고정 */
}

.toast-checkoutp {
    position: fixed;
    top: 50%;              
    left: 50%;             
    transform: translate(-50%, -60%); /* 처음에는 살짝 위 */
    background: rgba(0, 0, 0, 0.8); /* 검정 반투명 */
    color: #fff;                      /* 글자 흰색 */
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease; /* transform에 transition */
    z-index: 2000;
}

.toasts-profile-editp.show {
    opacity: 1;
    transform: translate(-50%, -50%); /* 최종 위치 = 딱 중앙 */
}

.toast-referral_code-profilep {
  position: fixed;
  bottom: calc(60px + 16px + env(safe-area-inset-bottom)); /* 하단바 + 여백 */
  left: 50%;
  transform: translateX(-50%) translateY(8px); /* 살짝 아래서 올라오게 */

  background: rgba(0, 0, 0, 0.85);
  color: #fff;

  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;

  max-width: min(90vw, 360px);
  text-align: center;
  word-break: keep-all;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2000;
}

/* 보여줄 때 */
.toast-referral_code-profilep.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 성공 / 실패 색상 구분 */
.toast-referral_code-profilep.success {
  background: rgba(0, 128, 0, 0.9);  /* 초록 */
}

.toast-referral_code-profilep.error {
  background: rgba(200, 0, 0, 0.9);  /* 빨강 */
}



body.modal-open {
  overflow: hidden;
}
/* 프로필 언어선택 모달 

/* 모달 전체 (배경 오버레이) */
.language-change-modal-profilep {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* 반투명 배경 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;

  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease; /* 배경은 페이드 효과만 */
}

/* 숨김 처리 */
.language-change-modal-profilep.fade-hidden {
  opacity: 0;
  pointer-events: none;
}


/* 모달 박스 */

.empty-order-box-profilp{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-top: 100px;
}
.empty-order-img{
    width: 50px; height: 50px;
}
.empty-order-text{
    font-size: 18px;
    color: #909090;
}

.no-card-message-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-top: 100px;    
}
.no-card-message-img{
    width: 50px; height: 50px;
}
.no-card-message{
    font-size: 18px;
    color: #909090;
}



.empty-coupon-profilep-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-top: 60px;    
}
.empty-coupon-img{
    width: 50px; height: 50px;
}
.empty-coupon-text{
    font-size: 18px;
    color: #909090;
}



.language-change-modal-content {
  background: #ffffff;
  border-radius: 32px;
  width: calc(100% - 40px);
  max-height: 80%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  padding: 10px;
  box-sizing: border-box;

  transform: translateY(0);
  transition: transform 0.3s ease; /* 슬라이드 애니메이션 */
}

.language-change-modal-profilep.fade-hidden .language-change-modal-content {
  transform: translateY(-40px);
}

.languge-change-header-profilep{
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin: 16px 20px;
    
}
.languge-change-header-title{
    display: flex;
    gap: 8px;
}
.language-change-header-text{
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}
.language-change-header-img{
    width: 24px;
    height: 24px;
}
.language-change-modal-search-box{
    display: flex;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

.modal-search-icon-profilep {
  position: absolute;
  top: 45%;
  left: 32px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%); /* 세로 중앙 */
  pointer-events: none; /* 클릭 이벤트 input으로 통과 */
}

.language-change-modal-search-input{
    width: 92%;

    background-color: #f7f7fb;
    font-size: 14px;
    line-height: 28px;
    border-radius: 100px;
    border: none;
    height: 48px;
    padding: 14px 20px 14px 44px;
    margin: 16px 12px 26px;
    box-sizing: border-box;
}
.language-change-modal-search-input:focus {
    background-color: #ffffff;
    border: 1px solid #111111; /* 원하는 색 */
    outline: none;
    box-shadow: none; /* glow 제거 */
}
.language-change-modal-search-input::placeholder{
    color: #7f8c9d;
    font-weight: 500;
    font-size: 12px;
}

.language-change-modal-body-profilep{
    overflow-y: auto;
    flex: 1;
    margin-top: 10px;
}
.modal-language-item-profilep{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    border-radius: 12px;
    padding: 20px 20px 20px 28px;
    transition: background 0.2s; /* 부드러운 효과 */
}
.lang-left-profilep{
    display: flex;
    gap: 12px;
    align-items: center;

}
.modal-language-item-profilep:hover {
    background-color: #f0f4ff;   /* 배경색 */
    color: #0075FF;              /* 텍스트 색상 */
}
.modal-language-item-profilep:active {
  background-color: #d9e8ff; /* 모바일 터치 순간 효과 */
}

/* 모달내부 (언어선택)*/

.modal-language-name-profilep{
    font-size: 14px;
    line-height: 32px;
}
.modal-language-code-profilep{
    font-size: 14px;
    line-height: 32px;

}

.modal-language-flag-profilep{
    width: 24px;
    height: 24px;
    border: solid 2px #f8f8fa;
    border-radius: 100%;
}

.language-change-modal-close-profilep{
    width: 20px; height: 20px;
    padding: 10px;
    border-radius: 12px;
    cursor: pointer;

    transition: transform 0.1s ease; /* 핵심 */
}
.language-change-modal-close-profilep:hover{
    background-color: #f7f7fb;
}
.language-change-modal-close-profilep:active{
    transform: scale(0.9)
}


.terms-box-referral{
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px 20px 20px;
  border-radius: 4px;
  font-size: 14px;
  margin-top: 6px;
  box-sizing: border-box;
  gap: 8px;
}
.terms-box{
    padding: 10px 14px;
    font-size: 16px;
    color: #111111;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.termsp-detail-btn{
    width: 20px; height: 20px;
    padding: 10px;
    transition: transform 0.1s ease;
    cursor: pointer;
}
.termsp-detail-btn:hover{
    border-radius: 12px;
    background-color: #F7F7FB;
    
}
.termsp-detail-btn:active{
    scale: calc(0.9);
}

.terms-box-all{
    padding: 24px 14px;
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    margin-bottom: 10px;
    border-bottom: 1px solid #E5E5EC;
}
.custom-checkbox{
  cursor: pointer;
  display: flex;
  align-items: center;

}
.custom-checkbox input {
  display: none;
}

/* 커스텀 UI */
.checkmark-termsp {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("../assets/img/check-ffffff.png") no-repeat center/contain;
  margin-right: 8px;
  vertical-align: middle;
  
}

/* 체크 상태일 때 이미지 변경 */
.custom-checkbox input:checked + .checkmark-termsp {
  background: url("../assets/img/check-blue.png") no-repeat center/contain;
  
}



.termsp-logo-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    margin-top: 30px;
    margin-bottom: 0px;
}
.termsp-logo-img{
    width: 60px;
    height: 60px;
}
.termsp-logo-text{
    font-size: 18px;
    color: #111111;
    line-height: 28px;
}

.termsp-next-btn-container{
    display: flex;
    justify-content: center;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    z-index: 100;

}
.termsp-next-btn{
    width: 100%;
    box-sizing: border-box;
    border: none;
    height: 60px;
    border-radius: 100px;
    /* box-shadow: 0 8px 24px rgba(0,0,0,0.2); */
}
.termsp-next-btn.active {
  background: #0075FF;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  cursor: pointer;
}
.termsp-next-btn:active {
  scale: calc(0.9);
}
.referral-label-text{
    font-size:16px;
    color:#505050;
    padding-left: 8px;
}
.referral-input-value{
    border-radius: 100px;
    border: 1px solid #E5E5EC;
    height: 52px;
    padding: 14px 20px;
    box-sizing: border-box;
    font-size: 16px;
}
.referral-input-value:focus{
    background-color: #ffffff;
    border: 1px solid #111111;
}
.referralp-error-text{
    color: #767676;
    margin-top:4px; 
    display:none;
    margin-left: 10px;
    font-size: 14px;
    line-height: 22px;
}




/* cartpage  */
.all-margin-container{
    padding: 20px 0 20px;
}
.cart-item-wrapper{
    padding: 30px 20px;
    background-color: #f8f8fa;
}
.cart-list-container{
    padding-bottom: 10px;
}
.cart-item{
    margin-bottom: 20px;
    background-color: #f0f4ff;
    border-radius: 12px;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05),
    0px -1px 10px rgba(67, 0, 209, 0.03);
    min-height: 100px;
    padding: 16px;
}
.cart-item-name-cartp{
    color: #111111;
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;

    letter-spacing: -0.025em;
}

.cart-item-cartp{
    display: flex;
    flex-direction: column;
    gap: 20px; 
    align-items: center;

    min-height: 120px;
    /* padding: 20px 32px 16px 20px; */
    align-items: flex-start;
    position: relative; 

    /* border: 1px solid #E5E5EC; */
    border-radius: 24px;
    /* box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05),
    0px -1px 10px rgba(67, 0, 209, 0.03); */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;

}
.cart-item-img-check-container-cartp{
    display: flex;
    justify-content: center;

}
.cart-item-img-check-cartp{
    width: 24px;
    height: 24px;
}

.cart-item-img-countryesim-cartp{
    width: 42px;
    height: 42px;
    border-radius: 100px;
    border: 2px solid #0075ff1A;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cart-item-content{
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.cart-item-2-cartp{
    width: 80%;
    padding: 0 0 20px;
    box-sizing: border-box;
    margin: 12px auto 0;

}
.cart-item-container2-cartp{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.cart-item-container-cartp{
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex: 1;
}

.cart-item-container-cartp2{
    margin-bottom: 10px;

}
.cart-item-img-countryesim-container-cartp{
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 100%;
    height: 100%; */
    max-width: 70px;
    max-height: 70px;
    background-color: #ffffff;
    flex-shrink: 0;
    border-radius: 100px; 
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cart-item-subtitle-cartp{
    font-size: 16px;
    font-weight: 600;
    color: #111111;
    line-height: 20px;
}

.cart-item-delete-cartp{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 16px;     /* 부모의 위쪽에서 16px */
    right: 16px;   /* 부모의 오른쪽에서 16px */
    cursor: pointer;
}
.cart-item-bottom{
    display: flex;
    margin: 10px auto 32px;
    /* flex-basis: 100%; */
    justify-content: space-between;
    align-items: center;
    padding: 0;
    gap: 40px;
    width: 80%;
    box-sizing: border-box;
}

.cart-summary-box-cartp{
    padding: 20px 20px 20px;
    margin-bottom: 30px;
}


.cart-total-cartp{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 20px 12px;
}



.cart-total-price-container{
    display: flex;
    flex-direction: row;
    gap: 8px;
    font-size: 24px;
}

.checkout-btn-cartp{
    border-radius: 36px;
    color: #ffffff;
    background-color: #0075FF;
    padding: 20px;
    text-align: center;
    margin-top: 40px;
    font-weight: 600;
    box-shadow:0 8px 24px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}
.checkout-btn-cartp:hover{
    background-color: #3391FF;
}
.checkout-btn-cartp:active {
    transform: scale(0.9); /* 3% 정도 살짝 작아짐 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 그림자도 함께 줄여서 바닥에 붙는 느낌 */
}

.cart-item-cartp.selected {
    background: rgba(255, 255, 255);

}
.cart-total-priceText1{
    color: #111111;
    font-weight: 600;
    font-size: 18px;
}

.cart-total-price{
    color: #0075FF;
    font-weight: 600;
}
.cart-total-price-text2{
    color: #0075FF;
    font-weight: 600;
}

.cart-total-order-text1{
    color: #505050;
    font-weight: 600;

}
.cart-total-order-text2{
    color: #0075FF;
    font-weight: 600;
}
.cart-total-order{
    color: #0075FF;
    font-weight: 600;
}

.cart-total-sub-text-cartp{
    color: #505050;
    font-size: 12px;
}

.cart-total-sub-text-cartp{
    padding: 0 8px;

}

.cart-qty-bottom{
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding-left: 4px;
}

.cart-item-decrease{
    border-radius: 100%;
    width: 32px;
    height: 32px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: 16px;
    background-color: #f7f7fb;
}


.cart-item-increase{
    border-radius: 100%;
    width: 32px;
    height: 32px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: 16px;
    background-color: #f7f7fb;

}
.cart-item-qty{
    color: #111111;
    font-size: 20px;
    line-height: 32px;
    font-weight: 600;
}


.cart-item-price{
    font-size: 24px;
    font-weight: 600;
    color: #0075FF;
    padding-right: 4px;
}
#buyNowIncreaseBtn{
    background-color: #f7f7fb;
    border-radius: 100px;
    width: 32px; height: 32px;
    cursor: pointer;

}
#buyNowDecreaseBtn{
    background-color: #f7f7fb;
    border-radius: 100px;
    width: 32px; height: 32px;
    cursor: pointer;

}

.cart-item-label-cartp{
    color: #333;
    font-size: 12px;
    margin-right: 8px;
    line-height: 24px;
}

.cart-item-date-cartp {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 12px;
  width: 16px; height: 16px;
  color: #0075FF;
}

.start-day-check-box-all-container{
    display: flex;
    flex-direction: column;
    padding-left: 8px;
    
}

.start-day-all-same-check-img{
    width: 18px; height: 18px;
}



.start-day-check-group{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.start-day-option{
  flex:1 1 180px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:8px 20px;
  border-radius:12px;
  /* border:1px solid #e5e5e5; */
  cursor:pointer;
  background-color: #f8f8fa;
  
}





.start-day-option.selected{
  background:rgba(0, 117, 255, 0.6);

}
.start-day-all-same-check-text{
    font-size: 14px;
    color: #646975;
    line-height: 24px;
    margin-inline-end:4px;
}

.start-day-label-container{
    display: flex;
    align-items: center;
    margin-left: 8px;
}
.start-day-img-cartp{
    width: 16px; height: 16px;
}
.start-day-label-cartp{
    font-size: 16px;
    color: #505050;
    line-height: 20px;
    font-weight: 600;
    margin-left: 8px;
}
.start-day-all-same-check-text-qty{
    font-size: 14px;
    color: #646975;
    line-height: 24px;
    text-align: center;
}
.start-day-all-same-check-text-unit{
    font-size: 14px;
    color: #646975;
    line-height: 24px;
    text-align: center;
}
.date-input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%; /* 필요에 따라 고정폭도 가능 */
  margin-top: 8px;
}

.start-date-input-cartp {
  width: 100%;
  padding-right: 36px; /* 아이콘 공간 확보 */
  box-sizing: border-box;
  background-color: #ffffff;
  border: 1px solid #E5E5EC;
  min-height: 48px;
  border-radius: 32px;
  padding-left: 20px;
  color: #505050;
  font-size: 14px;
  cursor: pointer;
}

.calendar-icon-cartp {
  position: absolute;
  right: calc(0% + 20px);   /* input 오른쪽 여백 */
  top: 50%;
  transform: translateY(-50%);
  width: 16px;   /* 아이콘 크기 */
  height: 16px;
  pointer-events: none;
}

.cart-item-1-cartp{
    display: flex;
    flex-direction: row;
    position: relative;
    gap: 24px; 
    align-items: center;
    justify-content: flex-start;
    min-height: 100px;
    padding: auto;
    width: 80%;
    padding: 30px 0 30px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #E5E5EC;
    margin: 0 auto;

}

.start-day-option.selected .start-day-all-same-check-text,
.start-day-option.selected .start-day-all-same-check-text-qty, 
.start-day-option.selected .start-day-all-same-check-text-unit {
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;

}



.calendar-modal-cartp {
  position: fixed;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4); /* 배경 어두워짐 */
  display: none; /* 기본은 안 보임 */
  justify-content: center;
  align-items: flex-end; /* 밑에서 올라오게 */

  z-index: 1000;

}

/* 모달 콘텐츠 (밑에서 올라오는 박스) */
.calendar-modal-content-cartp {
  width: 100%;
  /* max-width: 536px; */
  
  min-height: 70%;

  background: #fff;
  border-radius: 32px 32px 0 0;
  padding: 20px;

  transform: translateY(100%);
  transition: transform 0.3s ease-out;

  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
}
.calendar-modal-cartp.show {
  display: flex;
}
/* 열렸을 때 애니메이션 */
.calendar-modal-cartp.show .calendar-modal-content-cartp {
  transform: translateY(0);
}

.close-btn-cartp {
  width: auto;
  border: none;
  background: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 12px;
  transition: transform 0.1s ease;
  align-self: center;
  height: 44px
}

.close-btn-cartp:hover{
    background-color: #f7f7fb;
}
.close-btn-cartp:active{
    scale: calc(0.9);
}

.close-btn-img-cartp{
    width: 24px; height: 24px;
}

#calendarContainerCartp {    
  
  /* 제목과 달력 사이 간격 */
  margin-bottom: 30px!important;

}

.flatpickr-calendar {
  width: 100% !important;  /* 달력이 부모에 맞게 꽉 차게 */
  box-shadow: none !important; /* 그림자 제거 (모달과 겹치는거 방지) */
  border: none !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto;
  overflow: hidden !important;
}

.flatpickr-month{
    margin-bottom: 20px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.flatpickr-days {
    width: 100% !important;
}


.flatpickr-current-month {
  width: 100% !important;
  left: 0 !important;
  padding: 0 !important; /* 기본 패딩이 방해할 수 있음 */

  text-align: center!important;
  display: flex!important;
  justify-content: center!important;
  align-items: center!important;

}



.flatpickr-monthDropdown-months {
    margin-top: 8px;  
  border: none !important;      /* 계속 보이던 테두리 제거 */
  box-shadow: none !important;  /* 어색한 그림자 제거 */
  padding: 4px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  color: #333 !important;
  cursor: pointer;
  outline: none !important;
  text-align: center;
}
/* 2. 드롭다운에 마우스를 올렸을 때 */
.flatpickr-monthDropdown-months:hover {
  background: #ffffff !important;
  border-color: #111111 !important;
}

/* 3. 드롭다운 내부의 옵션들 (option 태그) */
/* 주의: option 태그는 OS/브라우저에 따라 스타일 적용이 제한적일 수 있습니다 */
.flatpickr-monthDropdown-month {
  background-color: #ffffff !important;
  color: #333333 !important;
  padding: 10px !important;
  border: none!important;
  border-radius: 12px!important;
}

/* 4. 선택된 상태의 연도 입력란과 월 드롭다운 정렬 */
.flatpickr-current-month input.cur-year {
  font-weight: 700 !important;
  color: #333333 !important;
}





.flatpickr-day {
  max-width: none !important; /* 고정 너비 해제 */
  flex-basis: 14.28%; /* 7일 기준 균등 배분 */
}

.flatpickr-innerContainer{
  display: flex;
  justify-content: center;
  width: 100% !important;
}

.flatpickr-rContainer{
  width: 100% !important;
}

.dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

.flatpickr-monthDropdown-months{
    /* margin-right: 20px!important; */
  color: #111111!important;
  font-weight: 600!important;
  appearance: none!important;
  -webkit-appearance: none!important;
  -moz-appearance: none!important;
  background-image: none!important;
  
  
}

.numInput{
    color: #111111!important;
    font-weight: 600!important;
}


.calendar-title-container-cartp{
    font-size: 18px;
    font-weight: 600;
    color: #0075FF;
    margin: 20px 20px 0;
    display: flex;
    justify-content: flex-start;
}
.calendar-title-text-cartp{
    font-size: 18px;
    font-weight: 600;
    color: #0075FF;
    line-height: 22px;
}

.calendar-title-img-cartp{
    width: 22px;
    height: 22px;
    margin-right: 8px;
}

.flatpickr-monthDropdown-month{
    border: none!important;
    margin-top: 10px!important;
    color: #0075ff;
}

.calendar-title-container-inner1-cartp{
    display: flex;

}

.calendar-title-container-inner2-cartp{
    font-size: 14px;
    line-height: 22px;
    color: #ffffff;
    margin: 60px auto 0;
    background-color: #0075FF;
    border: none;
    border-radius: 36px;
    font-weight: 600;
    padding: 10px;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    width: 50%;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.calendar-title-container-inner2-cartp:hover {
    filter: brightness(1.2); /* 마우스를 올렸을 때 살짝 밝아짐 */
}

.calendar-title-container-inner2-cartp:active {
    transform: scale(0.96); /* 결제 버튼보다 작으므로 조금 더 확실하게 눌리는 느낌 */
    filter: brightness(0.9); /* 눌렸을 때는 다시 살짝 어둡게 */
}




/* header container */
.flatpickr-months {
    position: relative!important;
}

/* 가운데 month wrapper */
.flatpickr-month {
    width: 100%!important;
    text-align: center!important;
}

/* 왼쪽 화살표 */
.flatpickr-prev-month {
    position: absolute!important;
    left: 0!important;

}
/* 오른쪽 화살표 */
.flatpickr-next-month {
    position: absolute!important;
    right: 0!important;
}


.flatpickr-prev-month, 
.flatpickr-next-month {
  padding: 10px !important; /* 터치 영역 확보 */
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: #5a5a5a !important; /* 원래 돌아가야 할 회색/검정 계열 색상 */
  transition: fill 0.2s ease;
}

/* 2. 터치 중/포커스 시 (파란색 유지) */
.flatpickr-prev-month:active svg,
.flatpickr-next-month:active svg,
.flatpickr-prev-month:focus svg,
.flatpickr-next-month:focus svg {
  fill: #0075FF !important;
  background: none !important; /* 배경에 남는 주황 잔상 제거 */
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  /* 모바일에서 터치 후 남아있는 hover 상태를 파란색 혹은 기본색으로 강제 */
  fill: #5a5a5a !important; 
}

@media (any-hover: hover) {
  .flatpickr-prev-month:hover svg,
  .flatpickr-next-month:hover svg {
    fill: #0075FF !important;
  }
}


.cart-expiration_days-box{
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    margin-left: 4px;
}
.cart-expiration_days-text{
    font-size: 12px;
    color: #999999;
    font-weight: 600;
}
.cart-expiration_days-img{
    width: 18px; height: 18px;
}

.cart-product-detail-modal-container{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 16px;
}

.cart-product-detail-text{
    font-size: 14px;
    line-height: 20px;
    margin-right: auto;
}

.cart-product-detail-img{
    width: 20px; height: 20px;
}



.toasts-cartp {
    position: fixed;
    top: 50%;              
    left: 50%;             
    transform: translate(-50%, -60%); /* 처음에는 살짝 위 */
    background: rgba(0, 0, 0, 0.8); /* 검정 반투명 */
    color: #fff;
    line-height: 26px;                      /* 글자 흰색 */
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease; /* transform에 transition */
    z-index: 2000;
}

.toasts-cartp.show {
    opacity: 1;
    transform: translate(-50%, -50%); /* 최종 위치 = 딱 중앙 */
}
.margin32-container-bg{
    background-color:#f8f8fa;
    margin-bottom: 40px;
}
.margin32-container{
    margin: 0 0;
    background-color: #f8f8fa;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.delivery-method-title{
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;

    margin: 0 0 10px 4px;

}

.email-change-title-box-container-checkoutp{
    display: flex;
    flex-direction: column;
}

.email-change-box-checkoutp{
    display: flex;
    flex-direction: column;
    padding: 30px 20px;
    background-color: #ffffff;
    gap: 12px;
}
.delivery-method-text{
    font-size: 14px;
    line-height: 24px;
    /* background-color: rgba(255, 206, 31, 0.1); */
    padding: 0 6px 10px;
    border-bottom: 1px solid #E5E5EC;
}

.email-change-title-box-checkoutp{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 12px 4px;
    padding: 0 4px;
}
.email-change-img-text-box-checkoutp{
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
}
.email-change-img-checkoutp{
    width: 28px; height: 28px;
}
.email-change-text-checkoutp{
    font-size: 14px;
    line-height: 28px;
    /* font-weight: 600; */
    color: #111111;
}
.email-box-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.email-change-btn-checkoutp{
    font-size: 12px;
    line-height: 28px;
    border: none;
    background-color: #2F8BFF;
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
}
.email-arrow-checkoutp{
    width: 16px; height: 16px;
}
.email-change-email-box-checkoutp{
    background-color: #f8f8fa;
    width: 100%; min-height: 50px;
    border-radius: 16px;

    font-size: 12px;
    color: #111111;
    line-height: 28px;
    padding: 10px 16px;
    box-sizing: border-box;
    cursor: pointer;
}
#orderProductList{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.order-product-box-checkoutp{
    display: flex;
    flex-direction: column;
    padding: 30px 20px;
    background-color: #ffffff;
}

.order-product-title-container-checkoutp{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 4px;
    position: relative;
    /* padding-left: 6px; */
    margin-bottom: 22px;
    gap: 12px;
}
.order-product-title-qty-checkoutp{
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: #111111;
}   
.order-product-title-img-checkoutp{
    width: 34px; height: 34px;
    position: absolute;
    top: 0;      /* 위쪽 기준 */
    left: -6px;     /* 왼쪽 기준 */   
}

.order-product-title-text-checkoutp{
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: #111111;
}

.order-discount-title-text-checkoutp{
    font-size: 14px;
    line-height: 28px;
    /* font-weight: 600; */
    color: #111111;
}
.order-product-main-container-checkoutp{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 20px;
    background-color: #fff;
    width: 100%; min-height: 100px;
    border-radius: 12px;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.02),
        0px -1px 10px rgba(67, 0, 209, 0.03);
    box-sizing: border-box;
    border: 1px solid #f7f7fb;
}

.order-product-main-head-checkoutp{
    display: flex;
    flex-direction: row;
    gap: 16px;
}
.order-product-main-price-qty-checkoutp{
    display: flex;
    flex-direction: row;
    margin-left: 8px;

}
.order-product-main-price-checkoutp{
    display: flex;
    flex-direction: row;
    gap: 6px;
    margin-right: 20px;

    font-size: 14px;
    color: #555555;
    font-weight: 600;
}
.order-product-main-qty-checkoutp{
    display: flex;
    flex-direction: row;
    gap: 6px;

    font-size: 14px;
    color: #555555;
    font-weight: 600;
}
.order-product-main-head-title-checkoutp{
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #111111;
    font-size: 16px;
    font-weight: 600;
}
.order-product-main-img-checkoutp{
    width: 34px; height: 34px;
    border: 2px solid #0075ff1A;
    border-radius: 100px;
}



.discount-container-checkoutp{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 20px;
    background-color: #ffffff;
}

.discount-title-checkoutp{
    font-size: 20px;
    font-weight: 600;
    color:#111111;
    padding-left: 6px;
    margin-bottom: 2px;
}












.user-level-box-checkoutp{
    display: flex;
    flex-direction: column;
}

.user-level-title-container-checkoutp{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-left: 2px;
    position: relative;
    margin-bottom: 10px;
    gap: 12px;
    border-bottom: 1px solid #E5E5EC;
    padding: 0 10px;

}

.Payment-method-title-container-checkoutp{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 10px;
    gap: 12px;
    padding: 0 6px;

}


.user-level-title-img-checkoutp{
    width: 20px; height: 20px;
}


.user-level-main-container-checkoutp{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px;
    padding: 8px  0;
    background-color: #fff;
    width: auto; min-height: 50px;
    /* border-bottom: 1px solid #E5E5EC; */
    box-sizing: border-box;
    /* margin-bottom: 40px; */
}

.user-level-main-level-title-box-checkoutp{
    display: flex;
    gap: 4px;
    align-items: center;

}
.user-level-main-level-vlaue-box-checkoutp{
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-level-main-level-title-checkoutp{
    color: #111111;
    font-size: 14px;

}
.user-level-main-level-value-checkoutp{
    color: #111111;
    font-size: 14px;
}
.user-level-main-level-persent-checkoutp{
    color: #0075FF;
    font-size: 18px;
    font-weight: 600;
    background-color: #ffffff;
    padding: 6px 0;
    border-radius: 20px;

}
.user-level-main-level-text-checkoutp{
    color: #111111;
    font-size: 12px;
}
.coupon-select-title-container-checkoutp{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-left: 2px;
    position: relative;
    margin-bottom: 10px;
    gap: 12px;
    padding: 0 10px;
}
.coupon-select-title-checkoutp{
    display: flex;
    align-items: center;
    gap: 12px;
}
.coupon-select-main-container-checkoutp{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 18px;
    background-color: #fff;
    width: 100%; min-height: 60px;
    border-radius: 12px;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.03),
        0px -1px 10px rgba(67, 0, 209, 0.03);
    box-sizing: border-box;
    /* margin-bottom: 60px; */
    align-items: center;
    border: 1px solid #F7F7FB;
    cursor: pointer;

    transition: all 0.15s ease;

}
.coupon-select-main-container-checkoutp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  border-color: #e9ecf5; /* 살짝 강조 */
}

/* 👆 눌림 */
.coupon-select-main-container-checkoutp:active {
  transform: scale(0.98);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}
.coupon-select-main-coupon-title-box-checkoutp{
    display: flex;
    align-items: center;
    gap: 4px;
}
.coupon-select-main-coupon-select-box-checkoutp{
    display: flex;
    gap: 6px;
    align-items: center;
    margin-right: 8px;
}
.coupon-select-title-img-checkoutp{
    width: 20px; height: 20px;
}
.coupon-select-main-coupon-title-checkoutp{
    color: #111111;
    font-size: 14px;
}
.coupon-select-main-coupon-select-text{
    font-size: 14px;
    color: #111111;
    cursor: pointer;
}
.coupon-select-main-coupon-select-img{
    width: 14px; height: 14px;
}


.coupon-select-main-coupon-persent-box-checkoutp{
    display: flex;
    align-items: center;
    gap: 6px;
}

.coupon-select-main-coupon-persent-value{
    color: #0075FF;
    font-size: 18px;
    font-weight: 600;
    background-color: #ffffff;
    padding: 6px;
    border-radius: 20px;

}
.coupon-select-main-coupon-persent-text{
    color: #111111;
    font-size: 12px;
}
.payment-select-main-container-checkoutp{
     display: flex;
     flex-direction: column;
     padding: 20px 6px;
     gap: 30px;
     margin-left: 6px;
}

.expresspay-select-main-title-box-checkoutp{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
    cursor: pointer;
}

.credit_card-select-main-title-box-checkoutp{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
    cursor: pointer;
    margin-bottom: 10px;
}

.expresspay-select-main-btn-checkoutp{
    width: 20px; height: 20px;
}
.credit_card-select-main-btn-checkoutp{
    width: 20px; height: 20px;
}

.expresspay-select-main-title-checkoutp{
    font-size: 14px;
    font-weight: 600;
}
.credit_card-select-main-title-checkoutp{
    font-size: 14px;
    font-weight: 600;
}

.expresspay-select-main-container-checkoutp{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.easy-pay-container-checkoutp {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 한 줄에 3개 */
  gap: 10px; /* 아이템 사이 간격 */
}
.Payment-method-box-checkoutp{

    background-color: #ffffff;
    padding: 30px 20px;
}
.easy-pay-option-checkoutp {
  /* border: 1px solid #ddd; */
  border-radius: 6px;
  box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.02),
        0px -1px 10px rgba(67, 0, 209, 0.03);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.easy-pay-option-checkoutp:hover {
  border: 1px solid #0075FF;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.easy-pay-option-checkoutp.selected {
  border: 2px solid #0075FF;
  box-shadow: 0 0 10px rgba(0, 117, 255, 0.2);
  background-color: #f5faff;
}

.easy-pay-option-checkoutp img {
  max-height: 24px;
  object-fit: contain;
}

.credit_card-select-title-container-checkoutp{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.credit_card-select-main-text-title-checkoutp{
    color: #111111;
    font-size: 14px;
    font-weight: 600;
}


.credit_card-select-main-container-checkoutp{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 22px;
    background-color: #fff;
    width: 100%; min-height: 60px;
    border-radius: 12px;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.02),
        0px -1px 10px rgba(67, 0, 209, 0.03);
    box-sizing: border-box;
    margin-bottom: 40px;
    align-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
}
.credit_card-select-main-container-checkoutp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

/* 👆 눌림 - 아주 약하게 */
.credit_card-select-main-container-checkoutp:active {
  transform: scale(0.98);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}
.credit_card-select-main-add-img-checkoutp{
    width: 22px; height: 22px;
}

.credit_card-main-add-box-checkoutp{
    display: flex;
    align-items: center;
    gap: 4px;
}

.credit_card-select-main-add-btn-box-checkoutp{
    display: flex;
    align-items: center;
    gap: 6px;
}
.credit_card-select-main-add-btn-checkoutp{
    width: 20px; height: 20px;
}

.final-payment-box-checkoutp{
     display: flex;
     flex-direction: column;
     padding: 30px 20px;
     background-color: #ffffff;
}
.final-payment-title-container-checkoutp{
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    margin-bottom: 32px;
    gap: 12px;
    padding: 0 6px;
}

.final-payment-title-text-checkoutp{
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: #111111;
}

.final-payment-main-container-checkoutp{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 10px;
}

.final-payment-main-product-price-checkoutp{
    display: flex;
    justify-content: space-between;
}

.final-payment-main-discount-checkoutp{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.final-payment-main-discount-persent-checkoutp{
    display: flex;
    gap: 12px;
}

.final-payment-main-final-price-checkoutp{
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    border-top: 1px solid #909090;
    padding-top: 20px;

}

.final-payment-main-product-price-text-checkoutp{
    color: #505050;
    font-size: 16px;
}

.final-payment-main-product-price-value-checkoutp{
    color: #111111;
    font-size: 16px;
    font-weight: 600;
    display: inline-block;
    min-width: 100px;
    text-align: right;
}
.final-payment-main-discount-persent-text-checkoutp{
    color: #505050;
    font-size: 16px;    
}
.final-payment-main-discount-persent-value-checkoutp{
    color: #505050;
    font-size: 16px;    
}
.final-payment-main-discount-persent-value2-checkoutp{
    color: #111111;
    font-size: 16px;
    font-weight: 600;
    display: inline-block;
    min-width: 100px;
    text-align: right;    
}

.final-payment-main-final-price-text-checkoutp{
    font-size: 18px;
    font-weight: 600;
    color: #111111;
}
.final-payment-main-final-price-value-checkoutp{
    color: #0075FF;
    font-size: 18px;
    font-weight: 600;
}

.terms-agreement-box-bg-checkoutp{
    background-color: #ffffff;
    padding: 30px 20px;
}
.terms-agreement-box-checkoutp{
    background-color: #f7f7fb;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    padding: 20px 14px;
}

.terms-agreement-box-checkoutp.active{
      background-color: rgba(0, 117, 255, 0.1);
      

}

.terms-agreement-check-box-container{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.terms-agreement-check-box-img-checkoutp{
    width: 20px; height: 20px;
}

.terms-agreement-check-box-text-checkoutp{
    font-size: 12px;
    line-height: 22px;
    font-weight: 600;
    color: #111111;
}
.terms-agreement-list-container-checkoutp{
    display: flex;
    flex-direction: column;
    padding: 0 4px;
    gap: 8px;
}
.terms-agreement-list1-checkoutp{
    display: flex;
    justify-content: space-between;
}
.terms-agreement-list2-checkoutp{
    display: flex;
    justify-content: space-between;

}
.terms-agreement-list1-text-checkoutp{
    font-size: 12px;
    color: #505050;
}
.terms-agreement-list2-text-checkoutp{
    font-size: 12px;
    color: #505050;
}
.terms-agreement-list1-detail-checkoutp{
    font-size: 12px;
    text-decoration: underline;
    color: #0075FF;
}
.terms-agreement-list2-detail-checkoutp{
    font-size: 12px;
    text-decoration: underline;
    color: #0075FF;
}
.final-payment-btn-box-bg-checkoutp{
    background-color: #ffffff;
    padding: 30px 20px 40px;
}
.final-payment-btn-box-checkoutp{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7fb;
    color: #909090;
    font-size: 18px;
    gap: 10px;
    border-radius: 12px;
    min-height: 50px;
    transition: all 0.25s ease; /* 색 전환 부드럽게 */
    cursor: not-allowed;


}

.final-payment-btn-box-checkoutp.active {
  background-color: #0075FF;  /* 파란색 버튼 */
  color: #fff;                /* 흰색 글씨 */
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 117, 255, 0.3); /* 선택사항: 살짝 입체감 */
}




.email-change-modal-close-btn-checkoutp{
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 0 auto 32px;
    /* flex: 0 0 auto; */
    cursor: pointer;
    padding: 10px;
    transition: transform 0.1s ease;
}
.email-change-modal-close-btn-checkoutp:hover{
    background-color: #f7f7fb;
    border-radius: 12px;
}
.email-change-modal-close-btn-checkoutp:active{
    scale: calc(0.9);
}
.email-change-modal-close-btn-img-checkoutp{
    width: 24px; height: 24px;
}

.email-change-modal-header-checkoutp{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 42px;
    padding: 18px 30px;
    border-radius: 0;
    background-color: #f8f8fa;

}
.email-change-modal-header-input-box-checkoutp{
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.email-change-modal-header-title-checkoutp{
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 6px;
}

.email-change-modal-header-text-checkoutp{
    color: #111111;
    font-size: 14px;
    line-height: 20px;
    text-align: center;

}
.email-change-modal-header-img-checkoutp{
    width: 20px; height: 20px;
}

.email-change-modal-add-input-checkoutp{
    border: 1px solid #E5E5EC;
    border-radius: 100px;
    background-color: #ffffff;

    height: 44px;
    /* width: 70%; */

    padding: 14px 20px;
    box-sizing: border-box;

    font-size: 14px;
    flex:1;

}

.email-change-modal-add-input-checkoutp:focus {
  border-color: #111111;
  background-color: #ffffff;
}


.email-change-modal-add-btn-checkoutp{
    border: none;
    background-color: #ffffff;
    border: 1px solid #E5E5EC;
    border-radius: 100px;
    cursor: pointer;
    box-sizing: border-box;

    display: flex;
    justify-content: center;
    align-items: center;
}

.email-change-modal-add-btn-img{
    width: 44px; height: 44px;
    transition: transform 0.1s ease;

}
.email-change-modal-add-btn-img:active{
    scale: calc(0.9);

}
.cart-empty-message-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
    min-height: 500px;
}
.cart-empty-message{
    font-size: 24px;
    color: #909090;
}
.cart-empty-message-img{
    width: 70px; height: 70px;
}


.email-change-modal-list-container-checkoutp{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 40px;
}
.email-change-modal-list-header-title-checkoutp{
    font-size: 20px;
    color: #111111;
    font-weight: 600;
    margin-bottom: 16px;
}
.email-change-modal-header-sub-checkoutp{
    font-size: 12px;
    line-height: 20px;
    color: #595959;
    padding-left: 10px;
}


.selected-email-item {
  background: rgba(0, 117, 255, 0.05);
}
.selected-email-text {
  color: #0075FF;
  text-decoration: none;
}


.email-change-modal-list-header-sub-checkoutp{
    font-size: 16px;
    color: #767676;
    padding-bottom: 20px;
    /* border-bottom: 1px solid #E5E5EC; */
    box-sizing: border-box;
}
.email-change-modal-list-header-checkoutp{
    margin-bottom: 20px;

    padding: 0 32px;
}
.email-change-moda-modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); /* 반투명 배경 */
  display: none; /* 기본은 안 보이게 */
  justify-content: center; /* 가운데 정렬 */
  align-items: center;
  z-index: 999;
}
.email-change-moda-modal-overlay.show {
  display: flex;    /* show 클래스 붙으면 보이게 */
}
.body-lock {
  overflow: hidden;

}
.delete-icon-checkoutp{
    width: 28px; height: 28px;
    transition: transform 0.1s ease;
    padding: 10px;

}
.delete-icon-checkoutp:hover{
    background-color: #F7F7FB;
    border-radius: 12px;
}
.delete-icon-checkoutp:active{
    scale: calc(0.9);
}
.email-item-delete-btn-checkoutp{
    font-size: 12px;
    color: #909090;
    display: block;
    text-align: right;
    line-height: 14px;
    flex-shrink: 0;
}
.email-item-checkoutp{
    display: flex;
    /* margin-bottom: 20px; */
    padding: 20px 20px;
    box-sizing: border-box;
    align-items: center;
    min-height: 84px;
    border-radius: 12px;
}

.email-item-check-icon-checkoutp{
    width: 20px; height: 20px;
}

.email-item-box-checkoutp{
    display: flex;
    justify-content: space-between;
    width: 100%;    
    align-items: center;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}
.email-item-main-container-checkoutp{
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
    margin-right: 10px;
    flex: 1;
    min-width: 0;
}

.emailItemTemplate{
    gap: 20px;
}
.email-item-selected-btn-checkoutp{
    margin-right: 30px;
}

.email-item-text-checkoutp{
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 20px;
}
.email-item-set-default-btn-checkoutp{
    border-radius: 12px;
    border: none;
    background-color: #f8f8fa;
    font-size: 12px;
    padding: 4px 8px;
    color: #666666;
}
.email-item-set-default-text-checkoutp{
    font-size: 12px;
    font-weight: 500;
    color: #767676;

}

.email-item-select-complated-checkoutp {
    width: calc(100% - 40px);
    min-height: 60px;
    background-color: #0075FF;
    color: #ffffff;
    text-align: center;
    display: flex;              /* flex 컨테이너 */
    justify-content: center;    /* 가로 중앙 */
    align-items: center;        /* 세로 중앙 */
    font-size: 16px;            /* 필요하면 글자 크기 */
    font-weight: 500;           /* 버튼 강조 */
    cursor: pointer;            /* 마우스 포인터 */
    border-radius: 24px;         /* 살짝 둥글게 */
    margin: auto;

}

.email-change-modal-list-body-checkoutp{
  max-height: 300px;   /* 원하는 높이 제한 */
  overflow-y: auto;    /* 세로 스크롤만 생기게 */
  overflow-x: hidden;  /* 가로 스크롤 숨김 */
  margin-bottom: 42px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}




/* ============================
   🟠 주문 취소 '예/아니오' 모달
   ============================ */

/* 어두운 배경 오버레이 */
.modal-overlay-yer-no {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}



/* 모달 박스 */
.yes-or-no-modal-box {
  width: 85%;
  max-width: 360px;
  background: #ffffff;
  border-radius: 16px;
  padding: 22px 20px;
  text-align: center;
  animation: yesOrNoFadeIn 0.2s ease-out;
}

/* 제목 */
.yes-or-no-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin-bottom: 10px;
}

/* 서브 설명 */
.yes-or-no-modal-desc {
  font-size: 14px;
  color: #555;
  margin-bottom: 24px;
  line-height: 1.4;
}

/* 버튼 영역 */
.yes-or-no-modal-buttons {
  display: flex;
  gap: 10px;
}

/* '네, 취소합니다' 버튼 */
.yes-or-no-btn-yes {
  flex: 1;
  padding: 12px 0;
  background: #ff3b30;
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.yes-or-no-btn-yes:active {
  transform: scale(0.85);
  opacity: 0.6;
}
/* '아니오' 버튼 */
.yes-or-no-btn-no {
  flex: 1;
  padding: 12px 0;
  background: #efefef;
  border: none;
  border-radius: 12px;
  color: #333;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.yes-or-no-btn-no:active {
  transform: scale(0.85);
  opacity: 0.6;
}
/* 모달 등장 애니메이션 */
@keyframes yesOrNoFadeIn {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}






/*프로필 페이지 */

.order-list-wrapper-profilep{
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1 auto;
    overflow-y: auto; 
}

.card-modal-profilep{
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 100%;
    background-color: #ffffff;
    /* box-shadow: 0 -2px 10px rgba(67, 0, 209, 0.1); */
    transform: translateX(-50%) translateY(100%);
    transition: transform 0.4s ease-in-out;
    z-index:1001;
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    max-height:80vh;
    overflow-y: auto;
    min-height: 80%;
    padding:20px;
    box-sizing: border-box;
    overflow: hidden;
}
.card-modal-profilep.show {
  transform: translateX(-50%) translateY(0);  /* ✅ 이거 추가 */
}

.card-modal-title-box-profilep{
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 30px;
    margin-left: 6px;
}
.card-list-temp-img-delete-box-profilep{
    padding: 10px;
    border-radius: 12px;
}
.card-list-temp-img-delete-box-profilep:hover {
  background-color: #f7f7fb;
}
.card-list-temp-img-delete-box-profilep:active {
  transform: scale(0.85);
  opacity: 0.6;
}
.card-modal-title-img-profilep{
    width: 24px; height: 24px;
}
.card-modal-title-text-profilep{
    font-size: 20px;
    color: #111111;
    font-weight: 600;
}

/*카드 템플릿 */

.card-list-profilep-box{
    border-radius: 12px;
    border: 1px solid #f0f0f0 ;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.02), 0px -1px 10px rgba(67, 0, 209, 0.03);
}
.card-temp-body-profilep{
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;

}
.card-temp-body-profilep-1{
    display: flex;
    gap: 20px;
    align-items: center;

}
.card-list-temp-text-profilep{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.card-list-temp-img-profilep{
    width: 40px;
    height: 40px;
}
.card-list-temp-expiration-period-profilep{
    display: flex;
    gap: 4px;
    color: #767676;
    font-size: 12px;
}
.card-list-temp-img-delete-profilep{
    width: 24px; height: 24px;
}
.card-number-temp-value-profilep{
    font-size: 16px;
    color: #111111;
}


.coupon-modal-profilep{
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: auto;
    min-height: 60px;
    background-color: #ffffff;
    /* box-shadow: 0 -2px 10px rgba(67, 0, 209, 0.1); */
    transform: translateX(-50%) translateY(100%);
    transition: transform 0.4s ease-in-out;
    z-index:1001;
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    max-height:80vh;
    overflow-y: auto;
    min-height: 80%;
    padding:20px;
    box-sizing: border-box;
    overflow-x: hidden; 
}
.coupon-modal-profilep.show {
  transform: translateX(-50%) translateY(0);  /* ✅ 이거 추가 */
}
.coupon-modal-header-profilep{
    flex: 0 0 auto
}

.coupon-list-container-profile{
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden; 
}




.coupon-select-modal-header-container{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    margin-left: 6px;
    flex: 0 0 auto;
}
.coupon-select-modal-header-img{
    width: 28px;
    height: 28px;
}
.coupon-select-modal-header-text{
    font-size: 20px;
    font-weight: 600;
    color: #111111;
    
}
.coupon-modal-profilep-search-box{
    display: flex;
    margin-bottom: 20px;
    padding-left: 4px;
}
.coupon-modal-profilep-search-bar{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;

}
.coupon-modal-profilep-text{
    font-size: 18px;
    font-weight: 600;
    color: #505050;
    padding-left: 4px;
}

.coupon-modal-profilep-search-input{
    background-color: #ffffff;
    color: #111111;
    font-weight: 500;
    font-size: 14px;
    border: 1px solid #E5E5EC;
    border-radius: 100px;
    height: 52px;
    padding: 14px 20px;
    flex-grow: 1;     /* 남은 공간 전부 차지 */
    width: auto;
    box-sizing: border-box;
}
.coupon-modal-profilep-search-input::placeholder {
    color: #777C89;
}
.coupon-modal-profilep-search-input:focus {
    outline: none;              /* 기본 파란 테두리 제거 */
    border-color: #111111;      /* 원하는 색으로 변경 */
    background-color: #ffffff;
}
.coupon-modal-profilep-search-btn{
    border: none;
    border-radius: 100px;
    height: 52px;
    width: 60px;
    background-color: #F7F7FB;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;  
}

.coupon-modal-profilep-search-btn:hover {
    background-color: #FCFCFE; /* 조금 어두운 파란색 */
}

.coupon-modal-profilep-search-btn:active {
    background-color: #FCFCFE; /* 더 어둡게 */
    transform: scale(0.97);   /* 누르는 느낌 */
}
.coupon-modal-profilep-tab-box{
    margin-top: 50px;
    margin-bottom: 30px;
    display: flex;

}
.coupon-tab{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #d9d9d9;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 2px solid #d9d9d9;
    height: 46px;
    cursor: pointer;
}
.coupon-tab.active {
    color: #0075ff;
    font-weight: 600;
    border-bottom: 2px solid #0075ff;
    background-color: transparent !important;
}

.coupon-select-modal-items-container-checkoutp{
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    margin-top: 20px;
    margin-bottom: 20px;
    /* 중요 */
    min-height: 0;
    -webkit-overflow-scrolling: touch; /* iOS 스크롤 활성화 */
}


.coupon-select-modal-item-checkoutp{
    display: flex;
    width: 98% ;
    min-height: 108px;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    cursor: pointer;

}
.coupon-select-modal-item-fix-checkoutp{
    display: flex;
    width: 98% ;

    min-height: 100px;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    cursor: pointer;
}

.coupon-select-modal-item-check-checkoutp{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    /* border-right: 2px dashed #f0f0f0; */
    position: relative;
    box-sizing: border-box;
}

/* 진짜 점선 대신 가짜 점선 */
.coupon-select-modal-item-check-checkoutp::before {
  content: "";
  position: absolute;
  top: 10px;              /* 위에서 조금 띄우기 */
  bottom: 10px;           /* 아래서 조금 띄우기 */
  right: 0;
  width: 0;
  border-right: 2px dashed #E5E5EC;
}

.coupon-select-modal-item-check-img-checkoutp{
    width: 24px;
    height: 24px;

}

.coupon-select-modal-item-body-checkoutp{
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  padding: 20px;
  gap: 10px;
}
.coupon-select-modal-item-body-fix-checkoutp{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  gap: 10px;
}

.coupon-select-modal-item-title-checkoutp{
    font-size: 16px;
    /* font-weight: 600; */
    color: #111111;
}

.coupon-select-modal-item-value-checkoutp{
    font-size: 22px;
    font-weight: 600;
    color: #0075FF;    
}
.coupon-select-modal-item-sub-checkoutp{
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #767676;    
}



.coupon-select-complated-checkoutp {
    width: 100%;
    min-height: 60px;
    background-color: #0075FF;
    color: #ffffff;
    text-align: center;
    display: flex;              /* flex 컨테이너 */
    justify-content: center;    /* 가로 중앙 */
    align-items: center;        /* 세로 중앙 */
    font-size: 16px;            /* 필요하면 글자 크기 */
    font-weight: 500;           /* 버튼 강조 */
    cursor: pointer;            /* 마우스 포인터 */
    border-radius: 100px;         /* 살짝 둥글게 */
    margin-top: 30px;
    box-shadow: 0 4px 10px rgba(0, 117, 255, 0.3);
    transition: all 0.15s ease;
}
/* 🖱 hover */
.coupon-select-complated-checkoutp:hover {
  background-color: #2F8BFF;
  box-shadow: 0 6px 14px rgba(0, 117, 255, 0.4);
  transform: translateY(-1px);
}

/* 👆 눌림 */
.coupon-select-complated-checkoutp:active {
  transform: scale(0.97);
  box-shadow: 0 2px 6px rgba(0, 117, 255, 0.25);
}
.coupon-select-modal-item-check-img-fix-checkoutp{
    width: 24px;
    height: 24px;

}
/* .credit_card-add-container-checkoutp{
    margin: 30px auto;
    width: 100%; height: 50px;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid #0075FF;
    border-radius: 12px;
    display: flex;
    align-items: center;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.02),
    0px -1px 10px rgba(67, 0, 209, 0.03);
} */

.card-add-field-checkoutp {
  margin-bottom: 32px;
}

.card-row {
  display: flex;
  gap: 20px;
}

.card-field.small {
  flex: 1;
}

.stripe-card-field-checkoutp {
  border: 1px solid #E5E5EC;
  border-radius: 24px;
  padding: 20px;
  background-color: #fff;
  /* height: 44px;   */
 
}

.card-number-label-checkoutp{
    font-size: 16px;
    color: #505050;
    /* font-weight: 600; */
    line-height: 20px;
    margin-bottom: 10px;
    margin-left: 8px;
    display: block;
    display: block;
    box-sizing: border-box;
}

.card-expiry-label-checkoutp{
    font-size: 16px; 
    color: #505050;
    /* font-weight: 600; */
    line-height: 20px;
    margin-bottom: 10px;
    margin-left: 8px;
    display: block;
}

.card-cvc-label-checkoutp{
    font-size: 16px;
    color: #505050;
    /* font-weight: 600; */
    line-height: 20px;
    margin-bottom: 10px;
    margin-left: 8px;
    display: block;
}



.card-add-modal-header-title{
    font-size:16px;
    color: #111111;

}
.email-change-modal-close-btn-checkoutp{
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 0 auto 32px;
    /* flex: 0 0 auto; */
    cursor: pointer;
    padding: 10px;
    transition: transform 0.1s ease;
}
.card-add-modal-close-btn-checkoutp{
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 0 auto 40px;
    cursor: pointer;
    transition: transform 0.1s ease;
    padding: 10px;
    border-radius: 12px;
}
.card-add-modal-close-btn-checkoutp:hover{
    background-color: #f7f7fb;
}
.card-add-modal-close-btn-checkoutp:active{
    scale: calc(0.9);
}
.card-add-modal-close-btn-img-checkoutp{
    width: 24px; height: 24px;
}

.card-add-modal-header-container{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 40px;
    margin-left: 6px;
}
.card-add-modal-header-img{
    width: 28px;
    height: 28px;
}
.card-add-modal-header-text{
    font-size: 20px;
    font-weight: 600;
    color: #111111;
    
}

.card-add-modal-body{
    margin-bottom: 20px;

}
.card-add-modal-footer-checkoutp{
    margin-top: 42px;
}
.card-add-save-card-btn-checkoutp{
    width: 100%; height: 32px;
    border: none;
    border-radius: 100px;
    background-color: #0075ff;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    min-height: 60px;
    cursor: pointer;            /* 마우스 포인터 */
    box-shadow: 0 4px 10px rgba(0, 117, 255, 0.3);
}
/* 🖱 hover (웹) */
.card-add-save-card-btn-checkoutp:hover {
  background-color: #2F8BFF;
  box-shadow: 0 6px 14px rgba(0, 117, 255, 0.4);
  transform: translateY(-1px);
}

/* 👆 클릭 눌림 (모바일 포함) */
.card-add-save-card-btn-checkoutp:active {
  transform: scale(0.97);
  box-shadow: 0 2px 6px rgba(0, 117, 255, 0.25);
}

/* ⛔ disabled 상태 (추가 추천) */
.card-add-save-card-btn-checkoutp:disabled {
  background-color: #cfd8e3;
  box-shadow: none;
  cursor: not-allowed;
}
.saved-card-brand{
    width: 36px; height: 36px;
    margin-bottom: 20px;

}
.saved-cards-wrapper-checkoutp{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.saved-card-box-checkoutp{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%; height: 120px;
    background-color: #f8f8fa;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid #F7F7FB;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.01),
        0px -1px 10px rgba(67, 0, 209, 0.02);
    padding: 20px 30px;
    position: relative;
    cursor: pointer;
}

.saved-card-box-checkoutp.selected {
  background-color: #e9f3ff;
  border: 1px solid #0075FF;
}


.saved-card-right{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.btn-use-credit-card{
    width: 24px; height: 24px;
}


.saved-card-mask{
    color: #111111;
    margin-left: 8px;
}

.saved-card-change-btn-checkoutp{
    position: absolute;
}


/* MyeSIM Page */

.myesim-title-text {
    font-size: 20px;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: -0.5px;
}


.myesim-page-body-container{
    width: 100%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-top: 30px;
}

.myesim-page-body-top-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    line-height: 40px;
    font-size: 18px;
    color: #d9d9d9;
    font-weight: 600;  
    margin-bottom: 40px;
}
.myesim-page-body-top-container > * {
  flex: 1; /* 자식 모두 같은 너비 */
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid #d9d9d9;
  
}

.myesim-page-body-top-status{
    text-align: center;
}

.myesim-page-body-top-status.selected{
    color:#0075FF;

    border-bottom: 3px solid #0075FF;
}

.myesim-page-body-middle-card{
    max-width: 100%;
    max-height: 430px;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.02),
        0px -1px 10px rgba(67, 0, 209, 0.03);
    box-sizing: border-box;
    border-radius: 12px;
    background-color: #ffffff;
    margin-bottom: 30px;    
    display: flex;
    flex-direction: column;
    padding: 20px 30px;
    gap: 12px;
    border: 1px solid #F7F7FB;

    
}
.myesim-page-body-middle-status-box{
    display: flex;
    flex-direction: row;
    gap: 6px;
    margin-bottom: 10px;
}
.myesim-page-body-middle-ordernumber-box{
    display: flex;
    flex-direction: row;
    gap: 6px;
    margin-bottom: 10px;
}
.myesim-page-body-middle-status-img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #FFB080, #FF8A3D);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.myesim-page-body-middle-status-text{
    color: #FF8A3D;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.myesim-page-body-middle-card-head-container{
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    line-height: 20px;
    border-bottom: 1px solid #f0f0f0;
    color: #909090;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 6px;
    
}

.myesim-page-body-middle-card-main-container{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    margin-bottom: 10px;
}
.myesim-page-body-middle-card-iccid-value{
    font-size: 12px;
    line-height: 20px;
    color: #111111;
    letter-spacing: 0.5px;
}
.myesim-page-body-middle-card-main-img-container{
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.myesim-page-body-middle-card-main-img{
    width: 50px; height: 50px;
    border-radius: 100%;
    border: 2px solid #0075ff1A;
}

.myesim-page-body-middle-card-main-text-container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 3px;
    box-sizing: border-box;
    gap: 10px;
}

.myesim-page-body-middle-card-main-text1{
    font-weight: 600;
    font-size: 20px;
    color:#111111;

}
.myesim-page-body-middle-card-main-text2{
    font-weight: 600;
    font-size: 18px;
    color:#111111;
}

.myesim-page-body-middle-card-date-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    width: 100%; min-height: 60px;
    padding: 0 6px;
    border-top: 1px solid #d9d9d9;
    padding-top: 16px;

}

.myesim-page-body-middle-card-date-text-box-container-1{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 10px;
}
.myesim-page-body-middle-card-iccid-container{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 10px;
}
.myesim-page-body-middle-card-date-expiration_days-title{
    color: #595959;
    font-size: 12px;
    min-width: 100px;
}
.myesim-page-body-middle-card-iccid-title{
    color: #595959;
    font-size: 12px;
    line-height: 20px;
    min-width: 100px;
}
.myesim-page-body-middle-card-date-expiration_days-value{
    color: #111111;
    font-size: 12px;
    line-height: 20px;
}
.myesim-page-body-middle-card-status2{
    color: #111111;
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
}
.myesim-page-body-middle-card-date-text-box-container-2{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-right: 38px;
}
.myesim-page-body-middle-card-date-text-box{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.myesim-page-body-middle-card-date-text{
    color: #595959;
    font-size: 12px;
    line-height: 20px;
    min-width: 100px;
}

.myesim-page-body-middle-card-date-text-value{
    color: #111111;
    font-size: 12px;
    line-height: 20px;
}

.myesim-page-body-middle-card-date-change-btn-2{
    font-size: 12px;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2px 0 6px;
    color: #0075FF;
    margin-left: 4px;
    font-weight: 500;
}

.myesim-page-body-middle-card-date-text-box-container-3{
    display: flex;
    flex-direction: row;
}

.myesim-page-body-middle-card-date-text-sub{
    color: #767676;
    font-size: 10px;
    line-height: 18px;

}

.myesim-page-body-middle-card-date-change-btn-container{
    display: flex;
    flex-direction: row;
    gap: 12px; /* ✅ 자식 간 간격 */
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}


.myesim-page-body-middle-card-date-change-btn-container > * {
  flex: 1; /* ✅ 모든 자식 동일 너비 */
}

.myesim-page-body-middle-card-date-change-btn-1{
    text-align: center;
    font-size: 12px;
    line-height: 34px;
    color: #222222;
    font-weight: 600;
    background-color: #f8f8fa;
    border-radius: 8px;
    height: 34px;
    cursor: pointer;
    transition: transform 0.1s ease;
}
.myesim-page-body-middle-card-date-change-btn-2{
    text-align: center;
    font-size: 12px;
    line-height: 34px;
    color: #222222;
    font-weight: 600;
    background-color: #f8f8fa;
    border-radius: 8px;
    height: 34px;
    cursor: pointer;
    transition: transform 0.1s ease;
}
.myesim-page-body-middle-card-date-change-btn-3{
    text-align: center;
    font-size: 12px;
    line-height: 34px;
    color: #0075ff;
    font-weight: 600;
    background-color: rgba(0, 117, 255, 0.1);
    border-radius: 8px;
    height: 34px;
}
.myesim-login-block{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
}
.myesim-login-btn{
    margin-top: 30px;
    width: 200px; height: 60px;
    border-radius: 12px;
    border: none;
    background-color: #0075FF;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
}
.myesim-empty-block{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
}
.myesim-empty-icon{
    margin-top: 30px;
    width: 240px; height: 240px;
    margin-right: 40px;
}








/* 결제완료 페이지 */
.payment-success-container{
    padding: 10px 32px;
    width: 100%;
    box-sizing: border-box;
}

.payment-success-title-container{
    margin-top: 120px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: 10px;
}

.payment-success-title-text{
    font-size: 24px;
    font-weight: 600;
}

.payment-success-sub-text{
    font-size: 20px;
    color: #595959;
}

.payment-success-main-container{
    margin-top: 130px;
    position: relative;
    display: flex;
    flex-direction:column ;
}

.payment-success-main-card-container{
    display: flex;
    flex-direction:column ;
    position: relative;
    z-index: 2;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.02),
        0px -1px 10px rgba(67, 0, 209, 0.03);
    width: 100%;
    min-height: 316px;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    background-color: #ffffff;
    padding: 30px 20px;
    box-sizing: border-box;

}
.payment-success-main-img{
    width: 120px; height: 120px;
    z-index: 1; 
    position: absolute;
    bottom: 280px;   /* 카드 밖으로 조금 튀어나오게 */
    right: 10px;
    margin-bottom: 10px;
}
.payment-success-main-card-product-container{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.payment-success-main-card-product-name-2Box{
    display: flex;
    flex-direction: row;
    gap: 8px;
}
.payment-success-main-card-product-name-1{
    font-size: 20px;
    font-weight: 600;
}
.payment-success-main-card-product-name-2{
    font-size: 20px;
    font-weight: 600;
}
.payment-success-main-card-payment-container{
    margin-top: 20px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #111111;
    padding-top: 20px;
    gap: 16px;

}
.payment-success-main-card-price-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.payment-success-main-card-price-text{
    font-size: 18px;
    color: #595959;
}
.payment-success-main-card-price-value-box{
    display: flex;
    flex: row;
    gap: 6px;
}
.payment-success-main-card-price-value{
    font-size: 18px;
    font-weight: 600;
    color: #0075ff;

}
.payment-success-main-card-price-value-2{
    font-size: 18px;
    font-weight: 600;
    color: #0075ff;

}
.payment-success-main-card-pyament-method-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.payment-success-main-card-pyament-method-text{
    font-size: 18px;
    color: #595959;    
}

.payment-success-main-card-pyament-method-value-box{
    display: flex;
    gap: 6px;
}
.payment-success-main-card-pyament-method-value-img{
    width: 24px; height: 24px;
    display: block;
}
.payment-success-main-card-pyament-method-value{
    font-size: 18px;
    color: #111111;
    display: flex;
    align-self: center;        
}
.payment-success-main-card-btn-container{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.payment-success-main-card-btn-box-1{
    width: 100%; height: 54px;
    border-radius: 10px;
    background-color: #0075FF;
    color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s ease;

}
.payment-success-main-card-btn-box-1:hover{
    background-color: #3390FF;
}
.payment-success-main-card-btn-box-1:active{
    scale: calc(0.9);
}


.payment-success-main-card-btn-box-2{
    display: flex;
    flex-direction: row;
    gap: 10px;
    cursor: pointer;
}
.payment-success-main-card-btn-box-2 > *{
    flex: 1;
}
.payment-success-main-card-order-detail-btn{
    border-radius: 10px;
    width: 100%; height: 54px;
    background-color: #f8f8fa;
    color: #111111;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.1s ease;
}
.payment-success-main-card-order-detail-btn:hover{
    background-color: #f0f0f3;
}
.payment-success-main-card-order-detail-btn:active{
    scale: calc(0.9);
}
.payment-success-main-card-receipt-btn{
    border-radius: 10px;
    width: 100%; height: 54px;
    background-color: #f8f8fa;
    color: #111111;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.1s ease;
}
.payment-success-main-card-receipt-btn:hover{
    background-color: #f0f0f3;
}
.payment-success-main-card-receipt-btn:active{
    scale: calc(0.9);
}

/* 영수증 페이지 */

.receipt-page-container{
    padding: 16px;
     height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: 10px;
    background-color: #f8f8fa;
    margin: 16px 0
}
.receipt-page-top-container{
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    padding: 20px;
    gap: 20px;
    border-radius: 12px;
}
.receipt-page-top-shopName{
    font-size: 24px;
    font-weight: 600;
    color: #111111;
}
.receipt-page-top-shopName-date-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.receipt-page-top-date{
    font-size: 14px;
    font-weight: 500;
    color: #909090;
}
.receipt-page-top-receipt{
    font-size: 18px;
    font-weight: 600;
    color: #111111;
}
.receipt-page-middle-container-1{
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    padding: 20px;
    gap: 10px;
    border-radius: 12px;    
}
.receipt-page-middle-customer-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.receipt-page-middle-customer-name-title{
    color: #909090;
    font-size: 14px;
}
.receipt-page-middle-customer-name-value{
    color: #111111;
    font-size: 14px;
}
.receipt-page-middle-ordernumber-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;    
}

.receipt-page-middle-ordernumber-title{
    color: #909090;
    font-size: 14px;
    min-width: 60px;
}
.receipt-page-middle-ordernumber-value{
    color: #111111;
    font-size: 14px;
    text-align: right;
}

.receipt-page-middle-container-2{
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    padding: 20px;
    gap: 10px;
    border-radius: 12px;       
}
.receipt-page-middle-invoicenumber-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 14px;
    line-height: 20px; 
}
.receipt-page-middle-invoicenumber-title{
    color: #909090;
    min-width: 70px;
}
.receipt-page-middle-invoicenumber-value{
    color: #111111;
    text-align: right;
}

.receipt-page-middle-currency-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 14px;
    line-height: 20px; 
}
.receipt-page-middle-currency-title{
    color: #909090;
}
.receipt-page-middle-currency-value{
    color: #111111;
}
.receipt-page-middle-price-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 14px;
    line-height: 20px; 
}
.receipt-page-middle-price-title{
    color: #909090;
}
.receipt-page-middle-price-value{
    color: #111111;
}
.receipt-page-middle-cancel-price-title{
    color: #909090;
}
.receipt-page-middle-cancel-price-value{
    color: #111111;
}
.receipt-page-middle-final-price-title{
    color: #909090;
}
.receipt-page-middle-final-price-value{
    color: #111111;
}
.receipt-page-middle-paymentMethod-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 14px;
    line-height: 20px; 
}
.receipt-page-middle-paymentMethod-title{
    color: #909090;
}
.receipt-page-middle-paymentMethod-value{
    color: #111111;
}
.receipt-page-middle-paymentStaus-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 14px;
    line-height: 20px; 
}
.receipt-page-middle-paymentStaus-title{
    color: #909090;
}
.receipt-page-middle-paymentStaus-value{
    color: #111111;
}
.receipt-page-bottom-container-1{
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    padding: 20px;
    gap: 10px;
    border-radius: 12px;     
}
.receipt-page-bottom-company-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 14px;
    line-height: 20px; 
}
.receipt-page-bottom-company-title{
    color: #909090;
    min-width: 70px;
    
}
.receipt-page-bottom-company-value{
    color: #111111;
    text-align: right;
}

.receipt-page-bottom-address-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 14px;
    line-height: 20px; 
}
.receipt-page-bottom-address-title{
    color: #909090;
    min-width: 60px;
}
.receipt-page-bottom-address-value{
    color: #111111;
    text-align: right;
}

.receipt-page-bottom-phoneNumber-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 14px;
    line-height: 20px; 
}
.receipt-page-bottom-phoneNumber-title{
    color: #909090;
    min-width: 40px;
}
.receipt-page-bottom-phoneNumber-value{
    color: #111111;
}

.receipt-page-bottom-container-2{
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    padding: 20px;
    gap: 10px;
    border-radius: 12px; 
}
.receipt-page-bottom-sign-box{
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 12px;
    color: #909090;
    font-size: 14px;
    font-weight: 600;
}
.receipt-page-bottom-sign-company{
    margin-top: 10px;
}
.receipt-page-download-btn{
    margin: 16px auto;
    width: calc(100% - 32px); height: 70px;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    box-sizing: border-box;
    background-color: #0075FF;
    color: #ffffff;
    cursor: pointer;
}


/* 주문상세 페이지 */
.order-detail-page-container{
    /* padding: 32px; */
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #F7F7FB;
    padding-top: 10px;
}

.order-detail-page-container-top{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background-color: #FFFFFF;
    width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 0 auto;
    border-radius: 12px;
}
.order-detail-page-top-date{
    color: #505050;
    font-size: 16px;
    font-weight: 600;
}
.order-detail-page-top-orderNum-title{
    font-size: 16px;
    line-height: 22px;
    color: #111111;
}
.order-detail-page-top-orderNum_payment-box{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.order-detail-page-top-orderNum-box{
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    color: #111111;
    font-size: 16px;
    font-weight: 500;
    align-items: center;
}
.order-detail-page-container-middle{
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    padding: 20px;
    box-sizing: border-box;
    width: calc(100% - 20px);
    margin: 0 auto;
    border-radius: 12px;
}
.order-detail-page-middle-title-box{
    display: flex;
    flex-direction: row;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-left: 4px;
}
/* .order-detail-page-top-paymentStatus{

} */
.order-detail-page-top-paymentStatus-success{
    color: #0075FF;
    font-size: 16px;
    padding-left: 6px;
}
.order-detail-page-top-paymentStatus-cancel{
    color: #FF0000E6;
    font-size: 16px;
    padding-left: 6px;
}
.order-detail-page-middle-product-card-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background-color: #fff;
    width: 100%; min-height: 100px;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.02),
        0px -1px 10px rgba(67, 0, 209, 0.03);
    box-sizing: border-box;
    margin-bottom: 20px;
    border-radius: 12px;
    border: 1px solid #F7F7FB;
}
.order-detail-page-middle-product-card-head{
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.order-detail-page-middle-product-card-head-img{
    width: 30px; height: 30px;
    border-radius: 100px;
    border: 2px solid #0075ff1A;
}

.order-detail-page-middle-product-card-title-box{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.order-detail-page-middle-product-card-price-qty{
    display: flex;
    margin-left: 4px;

}

.order-detail-page-middle-product-card-price-box{
    display: flex;
    flex-direction: row;
    gap: 6px;
    margin-right: 20px;
}
.order-detail-page-middle-product-card-qty-box{
    display: flex;
    flex-direction: row;
    gap: 6px;
}


.order-detail-page-middle-product-card-cancel-box{
    display: flex;
    flex-direction: row;
    margin-left: 10px;
}
.order-detail-page-middle-product-card-cancel-title{
    color:red;
}


.order-detail-page-container-bottom{
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    background-color: #FFFFFF;
    box-sizing: border-box;
    margin: 0 auto;
    width: calc(100% - 20px);
    border-radius: 12px;
}
.order-detail-page-bottom-title-box{
    font-size: 18px;
    font-weight: 600;
    color: #111111;

}
.order-detail-page-bottom-price-container{
    display: flex;
    flex-direction: column;
    
}
.order-detail-page-bottom-price-subtotal-box{
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}
.order-detail-page-bottom-price-subtotal-title{
    color: #595959;
    font-size: 14px;
}
.order-detail-page-bottom-price-subtotal-value{
    color: #111111;
    font-size: 14px;
    font-weight: 600;
}

.order-detail-page-bottom-price-userLevel-box{
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;    
}
.order-detail-page-bottom-price-userLevel-title-box{
    display: flex;
    gap: 20px;
}
.order-detail-page-bottom-price-userLevel-title{
    color: #595959;
    font-size: 14px;    
}
.order-detail-page-bottom-price-userLevel-persent-value{
    color: #595959;
    font-size: 14px;       
}
.order-detail-page-bottom-price-userLevel-price-value{
    color: #111111;
    font-size: 14px;
    font-weight: 600;    
}


.order-detail-page-bottom-price-coupon-box{
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;    
}
.order-detail-page-bottom-price-coupon-title-box{
    display: flex;
    gap: 20px;
}

.order-detail-page-bottom-price-coupon-title{
    color: #595959;
    font-size: 14px;    
}
.order-detail-page-bottom-price-coupon-persent-value{
    color: #595959;
    font-size: 14px;       
}
.order-detail-page-bottom-price-coupon-price-value{
    color: #111111;
    font-size: 14px;
    font-weight: 600;    
}

.order-detail-page-bottom-price-refund-box{
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;    
}
.order-detail-page-bottom-price-refund-title{
    color: #595959;
    font-size: 14px;    
}
.order-detail-page-bottom-price-refund-value{
    color: #111111;
    font-size: 14px;
    font-weight: 600;    
}

.order-detail-page-bottom-price-total-box{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top:5px;
    border-top: 1px solid #909090;
    padding-top: 20px;
}
.order-detail-page-bottom-price-total-title{
    font-size: 18px;
    font-weight: 600;
}
.order-detail-page-bottom-price-total-value-box{
    display: flex;
    color: #0075FF;
    font-size: 18px;
    font-weight: 600;
}
.order-detail-page-container-bottom-2{
    display: flex;
    gap: 12px;
    background-color: #ffffff;
}
/* .order-detail-page-container-bottom-2 > *{
    flex: 1;
} */
.order-detail-page-bottom-2-receipt-btn{
    width: calc(100% - 40px); 
    height: 50px;
    border-radius: 24px;
    background-color: #0075ff;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    margin: 10px auto 40px;
    transition: transform 0.1s ease;
    cursor: pointer;
}
.order-detail-page-bottom-2-receipt-btn:hover{
    background-color: #3390FF;
}
.order-detail-page-bottom-2-receipt-btn:active{
    scale: calc(0.9);
}
.order-detail-page-bottom-2-cancel-btn{
    width: 100%; height: 50px;
    border-radius: 12px;
    background-color: #f8f8fa;
    color: #111111;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px;
    font-weight: 600;

}
.myesim-page-body-middle-container{
    margin-bottom: 100px;
}
.myesim-esim-status-box{
    font-size: 24px;
    font-weight: 600;
    color: #0075FF;
    margin-left: 4px;
}
.myesim-esim-status-cancel-box{
    font-size: 24px;
    font-weight: 600;
    color: red;
    margin-left: 4px;
}
.myesim-page-body-middle-card-date-status-container{
    min-height: 30px;
}


.delete-accountp-body-container{
    position: relative;
    padding-bottom: 200px;
    margin-top: 30px;
    z-index: 9;

}

.header-container-delete-accountp{
    display: flex;
    width: 100%; min-height: 300px;
    background-color: #0075FF;
    padding: 20px;
    align-items: start;
    position: relative;
    box-sizing: border-box;


}

.header-title-text-delete-accountp{
    color: #ffffff;
    font-weight: 600;
    font-size: 24px;
    position: absolute;
    bottom: 70%;
}

.header-title-img-delete-accountp{
    width: 170px; height: 170px;
    position: absolute;
    right: 16px;
    bottom: 10;
    z-index: 10;
}

.exit-survey-container-delete-accountp{
    display: flex;
    flex-direction: column;
    width: calc(100% - 64px);
    min-height: 200px;
    margin: auto;
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    margin-top: -170px; 
    position: relative;
    z-index: 9;
    transform: none;
    box-shadow: 0px 8px 8px rgba(67, 0, 209, 0.05), 
        0px -1px 10px rgba(67, 0, 209, 0.03);
    padding: 30px;   
    box-sizing: border-box;
    margin-bottom: 40px; 
}

.exit-survey-header-box{
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 20px;
}
.exit-survey-header-titel{
    font-size: 16px;
    font-weight: 600;
    color: #111111;
}

.exit-survey-header-sub-title{
    font-size: 12px;
    color:#767676
}

.exit-survey-main-select-box{
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;

}
.exit-survey-select-item{
    display: flex;
    justify-content: space-between;
}

.exit-survey-select-left{
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #111111;
    font-size: 14px;
}

/* 진짜 라디오는 숨김 */
.custom-radio input[type="radio"] {
    display: none;
}

/* 기본 상태 이미지 */
.custom-radio .radio-img {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

/* 선택되면 이미지 변경 */
.custom-radio input[type="radio"]:checked + .radio-img {
    content: url('/assets/img/check-0075FF.png');
}


/* 입력창 스타일 */
.etc-input {
    width: 100%;
    min-height: 120px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-sizing: border-box;
    resize: none;  /* 크기 조절 비활성 */
    outline: none;
    margin-top: 12px;
}


.etc-input:focus {
    border-color: #0075FF;
}

.delete-account-agreement-container{
    margin-top: 30px;
    padding: 30px;
    background-color: #f8f8fa;
    display: flex;
    flex-direction: column;

}
.delete-account-agreement-title-box{
    color: #111111;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
}
.delete-account-agreement-main-box{
    display: flex;
    flex-direction: column;
    color: #909090;
    font-size: 12px;
    gap: 10px;
}
.delete-account-agreement-main-text{
    line-height: 20px;
}
.delete-account-agreement-check-box{
    margin-top: 20px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    gap: 10px;
    background-color: #ffffff;
    border-radius: 12px;
    min-height: 40px;
    cursor: pointer;

}

.delete-account-agreement-check-img{
    width: 20px; height: 20px;
}
.delete-account-agreement-check-text{
    color: #111111;
    font-size: 12px;
}

.delete-account-btn-container{
    margin-top: 30px;
    background-color: #f8f8fa;
    color: #d9d9d9;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    pointer-events: none;

}
.exit-survey-select-item.text-active .exit-survey-select-title {
    color: #0075ff;
}

.exit-survey-select-item.text-active .exit-survey-select-desc {
    color: #0075ff;
}

.delete-account-agreement-check-box.checked
.delete-account-agreement-check-text {
    color: #0075ff;
}

.delete-account-btn-container.enabled {
    background-color: #0075ff;
    color: #ffffff;
    pointer-events: auto;
}


/* 리뷰 작성페이지 */
.product-card-container-reviewp{
    min-height: 140px;
    padding: 30px 20px 0;
    margin-bottom: 30px;
}
.product-card-box-reviewp{
    border: 1px solid #E5E5EC;
    box-sizing: border-box;
    min-height: 120px; 
    width: 100%;
    border-radius: 20px;
    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05);
    padding: 20px;
}
.product-card-title-box-reviewp{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 24px;
    margin-bottom: 10px;
}
.product-card-title-img-reviewp{
    width: 36px;
    height: 36px;
    border-radius: 100px;
    border: 2px solid #E5E5EC;
    box-sizing: border-box;
}

.product-card-title-img-reviewp img{
    width: 36px;
    height: 36px;
}
.product-card-title-text-reviewp{
    font-size: 20px;
    font-weight: 600;
    color: #111111;
    line-height: 28px;
}
.product-card-orderNumber-reviewp{
    display: flex;
    gap: 6px;
    font-size: 12px;
    line-height: 22px;
    color: #909090;
    margin-left: 4px;
}

.product-card-orderDate-reviewp{
    display: flex;
    gap: 6px;
    font-size: 12px;
    color: #909090;
    line-height: 22px;
    margin-left: 4px;

}

.input-container-reviewp{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 20px;
}

.input-keyword-select-box-reviewp{
    display: flex;
    flex-direction: column;
    gap: 8px;

}
.input-keyword-select-field-reviewp{
    font-size: 14px;
    line-height: 22px;
    color: #505050;
    margin-left: 10px;
}
.input-keyword-select-display-reviewp{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border: 1px solid #E5E5EC;
    border-radius: 100px;
    box-sizing: border-box;
    cursor: pointer;
    
}


.input-keyword-select-placeholder-reviewp{
    color: #777C89;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.input-keyword-select-dropimg-reviewp{
    width: 16px; height: 16px;
    transition: transform 0.2s ease;
}


.input-device-select-box-reviewp{
    display: flex;
    flex-direction: column;
    gap: 8px;

}
.input-device-select-field-reviewp{
    font-size: 14px;
    line-height: 22px;
    color: #505050;
    margin-left: 10px;
}
.input-device-select-display-reviewp{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border: 1px solid #E5E5EC;
    border-radius: 100px;
    box-sizing: border-box;
    cursor: pointer;
}
.input-device-select-placeholder-reviewp{
    color: #777C89;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 8px;
}
.input-device-select-dropimg-reviewp{
    width: 16px; height: 16px;
}


.input-review-title-box-reviewp{
    display: flex;
    flex-direction: column;
    gap: 8px;

}
.input-keyword-select-title-reviewp{
    font-size: 14px;
    line-height: 22px;
    color: #505050;
    margin-left: 10px;
}

.input-keyword-select-body-reviewp{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border: 1px solid #E5E5EC;
    border-radius: 100px;
    box-sizing: border-box;
    color: #111111;
    font-size: 14px;
    line-height: 24px;
}
.input-keyword-select-body-reviewp::placeholder {
    color: #777C89;
}

/* 리뷰 바디 */
.input-review-body-box-reviewp{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 30px;
}
.input-keyword-select-title-reviewp{
    font-size: 14px;
    line-height: 22px;
    color: #505050;
    margin-left: 10px;
}
.input-review-body-reviewp{
    padding: 24px 20px;
    border: 1px solid #E5E5EC;
    border-radius: 32px;
    box-sizing: border-box;
    color: #111111;
    font-size: 14px;
    line-height: 24px;
    height: 170px;
    font-family: inherit; 
}
.input-keyword-select-body-reviewp:focus,
.input-review-body-reviewp:focus {
    outline: none;
    border-color: #111111;          /* 브랜드 컬러 */
    background-color: #ffffff;      /* 연한 배경 */
}
.input-keyword-select-body-reviewp:hover,
.input-review-body-reviewp:hover {

    background-color: #f8f8fa;      /* 연한 배경 */
}
.input-review-body-reviewp::placeholder {
    color: #777C89 !important;
    -webkit-text-fill-color: #777C89 !important; /* 추가 */
    opacity: 1;
    font-size: 14px;
    font-family: inherit;
}

.write-review-completion-container{
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

.write-review-completion-btn{
    height: 60px;
    border-radius: 16px;
    background-color: #f8f8fa;
    color: #767676;
    font-size: 18px;
    font-weight: 600;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}
.write-review-completion-btn.active-reviewp-btn{
    background-color: #0075ff;
    color: #ffffff;

}
.review-page-content{
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 120px; /* 하단 탭바 높이 */
}

/* 키워드 드롭다운 */
.select-keyword-dropdown-reviewp{
    /* margin-top: 8px; */
    display: flex;
    flex-direction: column;
    
    max-height: 0;                 /* 🔒 기본 닫힘 */
    overflow: hidden;
    
    /* padding: 14px 0; */

    opacity: 0;
    transform: translateY(-4px);

    border-radius: 24px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.06);

    transition:
        max-height 0.4s ease,
        opacity 0.3s ease,
        transform 0.3s ease;      
}

.select-keyword-dropdown-reviewp.open-write-reviewp {
    max-height: 400px;             /* 🔑 충분히 큰 값 */
    opacity: 1;
    transform: translateY(0);
}

.input-keyword-select-display-reviewp.open-write-reviewp {
    border-color: #111111;
}

.input-keyword-select-display-reviewp.open-write-reviewp
.input-keyword-select-dropimg-reviewp {
    transform: rotate(180deg);
    transition: transform 0.35s ease;
}

.select-keyword-dropdown-icon-list{
    display: flex;
    align-items: center;
    padding: 14px 20px;
    gap: 8px;

}
.select-keyword-dropdown-icon-list:hover{
    background-color: #f8f8fa;
}
.select-keyword-dropdown-icon-list.keyword-active-write-reviewp {
    color: #111111;
    font-weight: 600;
}

.select-keyword-dropdown-icon{
    width: 24px; height: 24px;
}
.select-keyword-dropdown-text{
    color: #111111;
    line-height: 24px;
}

/* 디바이스 드롭다운*/
.select-device-dropdown-reviewp{
    /* margin-top: 8px; */
    display: flex;
    flex-direction: column;
    
    max-height: 0;                 /* 🔒 기본 닫힘 */
    overflow: hidden;
    /* padding: 14px 0; */
    opacity: 0;
    transform: translateY(-4px);

    border-radius: 24px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.06);

    transition:
        max-height 0.4s ease,
        opacity 0.3s ease,
        transform 0.3s ease;    
}

.select-device-dropdown-reviewp.open-write-reviewp {
    max-height: 400px;             /* 🔑 충분히 큰 값 */
    opacity: 1;
    transform: translateY(0);
}

.input-device-select-display-reviewp.open-write-reviewp {
    border-color: #111111;
}

.input-device-select-display-reviewp.open-write-reviewp
.input-device-select-dropimg-reviewp {
    transform: rotate(180deg);
    transition: transform 0.35s ease;
}


.select-device-dropdown-icon-list{
    display: flex;
    align-items: center;
    padding: 14px 20px;
    gap: 8px;

}
.select-device-dropdown-icon-list:hover{
    background-color: #f8f8fa;
}
.select-device-dropdown-icon-list.device-active-write-reviewp {
    color: #111111;
    font-weight: 600;
}
.select-device-dropdown-icon{
    width: 24px; height: 24px;
    /* margin-bottom: 5px; */
}
.select-device-dropdown-text{
    color: #111111;
    line-height: 24px;

}








/* search공통 */

body.page-search-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
  padding-top: 20px;
}

body.page-search-body .app-container {
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
  /* padding-top: 40px; */
  
}
.btn-day-confirm {
  /* 하단 마진이 브라우저 하단바에 묻히지 않도록 안전 영역 확보 */
  margin-bottom: calc(70px + env(safe-area-inset-bottom));
}
.continent-container.dragging {
  cursor: grabbing;
}

.continent-container {
  cursor: grab;
}
.continent-container,
.continent-container * {
  user-select: none;
  -webkit-user-drag: none;
}


/* search-app */
body.page-search-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
body.page-search-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-search-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    
  }
  body.page-search-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    /* overflow-y: auto; */
  }

}


/* serach-web */
body.page-search-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
}

body.page-search-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;
  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.common-header{
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    margin: 0 40px 0 20px;
    border-bottom: 1px solid #F7F7FB;
}
.common-header-logo-img{
    width: 50px;
    height: 50px;
}
.common-header-inner{
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 100%;
}
.common-header-logo-link{
        display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 6px;
    text-decoration: none;
}
.common-nav-icon{
    width: 32px;
    height: 32px;
}
.common-user-link-icon{
    width: 32px;
    height: 32px;    
}
.common-logo-text{
    font-size: 22px;
    line-height: 32px;
    color: #111111;
    font-weight: 550;
    padding: 0;
    letter-spacing: -0.025em;
    text-decoration: none;
    text-align: center;
}
.common-menu-group{
    display: flex;
    align-items: center;
    gap: 40px;

}
.common-nav-link{
    text-decoration: none;
    padding: 8px;
    transition: all 0.25s ease-out;
    cursor: pointer;
}
.common-user-link{
    text-decoration: none;
    padding: 8px;
    transition: all 0.25s ease-out;
    cursor: pointer;
}
.common-nav-link-text{
    font-size: 18px;
    font-weight: 600;
    color: #111111;
    text-decoration: none;
}
.common-nav-link:hover,
.common-user-link:hover,
.common-cart-wrapper:hover {
    transform: translateY(-2px); /* 위쪽으로 2px 이동 */
    background-color: rgba(255, 255, 255, 0.7); /* 반투명 흰색 */
    backdrop-filter: blur(8px);                /* 뒤쪽 배경을 흐리게 */
    -webkit-backdrop-filter: blur(8px);
}
.common-nav-link:hover .common-nav-link-text {
    color: #555555;
}
.common-user-link:hover .common-user-link-icon {
    content: url('../assets/img/person_2px_555555.png');
}
.common-cart-wrapper:hover .common-nav-icon {
    content: url('../assets/img/cart_2px_555555.png');
}
.common-cart-wrapper {
    position: relative; /* 이게 있어야 배지가 밖으로 안 도망가요 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 8px; /* 클릭 영역 확보 */
    transition: all 0.25s ease-out;

    text-decoration: none;
}

/* 2. 장바구니 배지: 부모를 기준으로 위치를 잡습니다 */
.common-cart-badge {
    position: absolute;
    top: 6px;     /* 위에서부터의 거리 (조절 가능) */
    right: 2px;   /* 오른쪽에서부터의 거리 (조절 가능) */
    
    /* 디자인 요소 */
    background-color: #ff4d4f; /* 눈에 띄는 빨간색 (KieSIM 포인트 컬러로 변경 가능) */
    color: white;
    font-size: 10px;           /* 작은 글씨 */
    font-weight: 700;
    min-width: 16px;           /* 숫자 1개일 때도 동그랗게 유지 */
    height: 16px;
    border-radius: 50%;        /* 완전한 원형 */
    
    /* 중앙 정렬 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 디테일: 배경색과 겹칠 때 더 잘 보이게 흰색 테두리 살짝 */
    border: 1.5px solid white;
    
    /* 숫자가 0일 때는 안 보이게 하고 싶다면 (선택 사항) */
    /* display: none; */
}
@media (max-width: 450px) {

  body.page-search-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-search-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
  .common-header{
    display: none;
  }
}




/* plan-type-공통 */


body.page-plan-type-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-plan-type-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
  padding-top: calc(20px);
}

.plan-type-header-container {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;

    width: 100%;
    height: 56px;

    z-index: 8;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(30px);
    box-sizing: border-box;

        z-index: 11
}

.plan-type-header-inner {
    max-width: 100%;          /* 🔥 카드 실제 폭 */
    margin: 0 auto 0;            /* 가운데 정렬 */

    height: 100%;
    padding: 10px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;

}
.payment-success-header-inner {
    max-width: 100%;          /* 🔥 카드 실제 폭 */
    margin: 0 auto 0;            /* 가운데 정렬 */

    height: 100%;
    padding: 10px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;

}
#plan-type-stage{
    overflow-y: auto;
    height: auto;
    padding-top: 24px;
    flex: 1;
    flex-direction: column;
}
/* .btn-day-confirm {
  margin: 50px 32px calc(30px + env(safe-area-inset-bottom, 20px)) 32px;
} */

/* plan-type-app */
body.page-plan-type-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
body.page-plan-type-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-plan-type-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
  }
  body.page-plan-type-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
  }
  body.page-plan-type-body.env-app .app-container .plan-type-header-inner {
    max-width: 780px;          /* 🔥 카드 실제 폭 */
    margin: 0 auto;            /* 가운데 정렬 */

    height: 56px;
    padding: 0 32px;

    display: flex;
    align-items: center;
    /* justify-content: space-between; */

    box-sizing: border-box;

  }

}

/* plan-type-web */
body.page-plan-type-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  height: 100vh;
  box-sizing: border-box; /* ⭐ 이거 */
}

body.page-plan-type-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;
  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

body.page-plan-type-body.env-web .app-container .plan-type-header-inner {
  max-width: 536px;          /* 🔥 카드 실제 폭 */
  margin: 0 auto;            /* 가운데 정렬 */

  height: 56px;
  padding: 0 32px;

  display: flex;
  align-items: center;
  box-sizing: border-box;

}
@media (max-width: 450px) {

  body.page-plan-type-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-plan-type-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
  .common-header{
    display: none;
  }
}

/* plan-list-공통 */
body.page-plan-list-body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  
  /* 1. 전체 화면이 스크롤되거나 당겨지는 것을 방지 */
  overflow-x: hidden; 
  
  /* 2. 크롬/안드로이드에서 '당겨서 새로고침' 및 바운스 현상 차단 */
  overscroll-behavior-y: none; 
  
  /* 3. iOS(아이폰)에서 전체 레이아웃이 밀리는 현상 방지 */
  position: fixed; 
}

body.page-plan-list-body .app-wrapper {
  height: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-plan-list-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
  box-sizing: border-box;
}

#plan-list-stage {
  display: flex;
  flex-direction: column;
  flex: 1;                    /* 🔥 전체 높이 차지 */
  min-height: 0;              /* 🔥 overflow 정상 동작용 */
}
#plan-detail-list-listp {
  flex: 1;                    /* 🔥 남은 영역 전부 */
  overflow-y: auto;           /* 🔥 여기만 스크롤 */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* 중요: 내부 리스트 스크롤이 끝에 도달해도 부모(전체화면)로 전달되지 않게 함 */
  overscroll-behavior-y: contain;
}
.search-header-container {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    height: 56px;

    padding: 0 32px;
    margin-top: 20px;
    margin-bottom:50px;

    box-sizing: border-box;
}
.tab-description{
    margin: 0 32px 20px;
}
.plan-type-desc{
    display: flex;
    flex-direction: column;

    width: 100%;
    padding: 16px 20px;

    border-radius: 16px;
    background-color: #F7FCF9;

    box-sizing: border-box;

    box-shadow: 8px 8px 8px rgba(67, 0, 209, 0.05), 0px -1px 10px rgba(67, 0, 209, 0.03);

    cursor: pointer;

}

.plan-type-desc-title-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.plan-type-desc.open .plan-type-desc-sub-box {
  max-height: 200px; /* 충분히 큰 값 */
  opacity: 1;
}

.plan-type-desc-title-left{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    
}
.plan-type-desc-title-text{
    color: #10D682;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
}
.plan-type-desc-title-right{
    width: 20px;
    height: 20px;
    transition: transform 0.25s ease;
}
.plan-type-desc.open .plan-type-desc-title-right {
  transform: rotate(180deg);
}
.plan-type-desc-icon-left{
    width: 20px;
    height: 20px;
}

.plan-type-desc-sub-box{
    color: #10D682;
    font-size: 14px;
    line-height: 24px;
    padding-left: 4px;
    box-sizing: border-box;

    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
    max-height 0.25s ease,
    opacity 0.2s ease;
    
}
.plan-type-desc-sub-line1{
    padding-top: 10px;
    box-sizing: border-box;
}

/* plan-list-app */
body.page-plan-list-body.env-app{
    overflow: hidden;
}
body.page-plan-list-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding-top: calc(20px);
}
body.page-plan-list-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-plan-list-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
      overflow: hidden;
  }
  body.page-plan-list-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
      overflow: hidden;
  }


}

/* plan-list-web */
body.page-plan-list-body.env-web{
    position:static;
}
body.page-plan-list-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;
  overflow: auto;
}

body.page-plan-list-body.env-web .app-container {
  max-width: 536px;
  min-height: 820px;
  max-height: 820px;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow: hidden;
  padding-top: calc(20px);

}
@media (max-width: 450px) {

  body.page-plan-list-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-plan-list-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
}



/* plan-detail-공통 */
body.page-plan-detail-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-plan-detail-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  padding-top: calc(20px);
}
.detailp-header {
  flex: 0 0 auto;
}

.detailp-footer {
  flex: 0 0 auto;
  border-radius: 24px 24px 0 0; 
  border: 1px solid #E5E5EC;
}

.product-detail-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; 
}
.detailp-scroll {
  padding-top: 10px;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}




/* plan-detail-app */

body.page-plan-detail-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
body.page-plan-detail-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-plan-detail-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
      overflow: hidden;
  }
  body.page-plan-detail-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
      overflow: hidden;
  }


}

/* plan-detail-web */
body.page-plan-detail-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;
    overflow: hidden;

}

body.page-plan-detail-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow: hidden;
}
@media (max-width: 450px) {

  body.page-plan-detail-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-plan-detail-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
}



.login-modal-box-detailp {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) scale(0.95);
  opacity: 0;

  width: 85%;
  max-width: 360px;
  background: #fff;
  border-radius: 24px;
  padding: 48px 20px 20px;
  text-align: center;
  backdrop-filter: blur(6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  transition: 
    transform 0.25s ease,
    opacity 0.25s ease;

  z-index: 10000;
  overflow: hidden;
  pointer-events: none; 

}


.login-modal-box-detailp.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.login-modal-actions-detailp {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-modal-header-title{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-modal-title-text{
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -0.025em;
    color: #111111;
    margin-bottom: 8px;
}

.login-modal-sub-text{
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;   
    letter-spacing: -0.025em;
    color: #767676;
    margin-bottom: 48px;
    width: 80%;
}

.login-cancel-btn-detailp,
.login-confirm-btn-detailp {
  height: 48px;
  border-radius: 20px;
  border: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.025em;
  cursor: pointer;

}
.login-confirm-btn-detailp {
  background: #1A73E8;
  color: white;
  /* border-radius: 0 0 20px 0; */
}

.login-cancel-btn-detailp {
  background: none;
  color: #8A94A6;
  font-weight: 500;
  /* border-radius: 0 0 0 20px; */
}



/* login-공통 */
body.page-login-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-login-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  padding-top: calc(20px);
}






/* loginl-app */

body.page-login-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
body.page-login-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-login-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
      overflow: hidden;
  }
  body.page-login-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
      overflow: hidden;
  }


}

/* login-web */
body.page-login-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;
    overflow: hidden;

}

body.page-login-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow: hidden;

}
@media (max-width: 450px) {

  body.page-login-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-login-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
}



/* buy-now-공통 */

body.page-buy-now-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-buy-now-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  /* padding-top: calc(20px); */
}

.buy-now-header-container {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    /* margin-top: 20px; */

    width: 100%;
    height: 56px;

    z-index: 10;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(30px);
    box-sizing: border-box;
}



/* buy-now-app */

body.page-buy-now-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;

}
body.page-buy-now-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-buy-now-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
      /* overflow: hidden; */
  }
  body.page-buy-now-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    overflow: auto;
  }
  body.page-buy-now-body.env-app .calendar-modal-cartp {
    max-width: 780px;
  }

}

/* buy-now-web */
body.page-buy-now-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;
  /* overflow: hidden; */

}

body.page-buy-now-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow-y: auto;
}
body.page-buy-now-body.env-web .calendar-modal-cartp {
  max-width: 536px;
}
@media (max-width: 450px) {

  body.page-buy-now-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-buy-now-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
}




/* cart-공통 */

body.page-cart-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-cart-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  /* padding-top: calc(20px); */
}

.buy-now-header-container {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 20px;

    width: 100%;
    height: 56px;

    z-index: 10;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(30px);
    box-sizing: border-box;
}



/* cart-app */

body.page-cart-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;

}
body.page-cart-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-cart-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
      /* overflow: hidden; */
  }
  body.page-cart-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    overflow: auto;
  }
  body.page-cart-body.env-app .calendar-modal-cartp {
    max-width: 780px;
  }

}

/* cart-web */
body.page-cart-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;
  /* overflow: hidden; */

}

body.page-cart-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow-y: auto;
}
body.page-cart-body.env-web .calendar-modal-cartp {
  max-width: 536px;
}
@media (max-width: 450px) {

  body.page-cart-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-cart-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
}



/* checkout-공통 */
#modal-layer-checkoutp{
  position: fixed;
  inset: 0;

  display: flex;
  justify-content: center;   
  align-items: flex-end;     

  pointer-events: none;      
  z-index: 1000;
}

#modal-layer-checkoutp > * {
  pointer-events: auto;      
}

body.page-checkout-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-checkout-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
}

.buy-now-header-container {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 20px;

    width: 100%;
    height: 56px;

    z-index: 10;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(50px);
    box-sizing: border-box;
}

.email-change-modal-checkoutp {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);


    width: 100%;

    transition: transform 0.4s ease-in-out;

    height: auto;
    background-color: #ffffff;
    box-shadow: 0 -2px 10px rgba(67, 0, 209, 0.1);
    /* 처음엔 안 보이게 */
    z-index: 1000;
    border-radius: 24px 24px 0 0;

    display: flex;
    flex-direction: column;
    max-height: 95vh;
    overflow-y: auto;
    /* 🔥 스크롤 가능하게 */
    min-height: 85%;
    padding: 20px 0;
    box-sizing: border-box;
}
.email-change-modal-checkoutp.show {
  transform: translateX(-50%) translateY(0);  /* ✅ 이거 추가 */
}
.coupon-select-modal-checkoutp {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);

    width: 100%;

    background-color: #ffffff;

    transition: transform 0.4s ease-in-out;

    z-index: 1001;
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    min-height: 85%;
    padding: 20px;
    box-sizing: border-box;

    /* important */
    overflow-x: hidden;
    overflow-y: hidden;  /* 전체 스크롤 막고 내부 스크롤만 허용 */
}

.coupon-select-modal-checkoutp.show {
  /* display: flex; */
  transform: translateX(-50%) translateY(0);
}

.card-add-modal-checkoutp {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);

    width: 100%;

    height: auto;
    background-color: #ffffff;
    box-shadow: 0 -2px 10px rgba(67, 0, 209, 0.1);

    transition: transform 0.4s ease-in-out;

    z-index: 1001;
    border-radius: 24px 24px 0 0;

    display: flex;
    flex-direction: column;

    overflow-y: auto;
    max-height: 95vh;
    min-height: 80%;

    padding: 20px;
    box-sizing: border-box;

    isolation: isolate;
}

.card-add-modal-checkoutp.show {
  transform: translateX(-50%) translateY(0);
}
.card-loading-overlay {
  position: absolute;
  inset: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(2px);

  z-index: 20;

  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
}

.card-loading-overlay.show {
  opacity: 1;
  pointer-events: all;
}

.payment-loading-overlay {
  position: fixed;
  inset: 0;

  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 99999;

  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
}

.payment-loading-overlay.show {
      opacity: 1;
  pointer-events: all;
}


/* checkout-app */

body.page-checkout-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;

}
body.page-checkout-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-checkout-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
  }
  body.page-checkout-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    overflow: auto;
  }
  body.page-checkout-body.env-app .calendar-modal-cartp {
    max-width: 780px;
  }
  body.page-checkout-body.env-app .email-change-modal-checkoutp{
    width: 100%;
    max-width: 780px;
  }
  body.page-checkout-body.env-app .coupon-select-modal-checkoutp{
    width: 100%;
    max-width: 780px;
  }
  body.page-checkout-body.env-app .card-add-modal-checkoutp{
    width: 100%;
    max-width: 780px;    
  }
}

/* checkout-web */
body.page-checkout-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;

}

body.page-checkout-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow-y: auto;
}
body.page-checkout-body.env-web .calendar-modal-cartp {
  max-width: 536px;
}
body.page-checkout-body.env-web .email-change-modal-checkoutp{
width: 100%;
max-width: 536px;
}
body.page-checkout-body.env-web .coupon-select-modal-checkoutp{
width: 100%;
max-width: 536px;
}
body.page-checkout-body.env-web .card-add-modal-checkoutp{
width: 100%;
max-width: 536px;    
}
@media (max-width: 450px) {

  body.page-checkout-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-checkout-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
}

/* payment-success-공통 */

body.page-payment-success-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-payment-success-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
}

/* payment-success-app */

body.page-payment-success-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;

}
body.page-payment-success-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-payment-success-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
  }
  body.page-payment-success-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    overflow: auto;
  }

}

/* cart-web */
body.page-payment-success-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;

}

body.page-payment-success-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow-y: auto;
}

body.env-web .bottom-nav {
  display: none !important;
}
body.env-web .web-nav-menu {
  display: flex;
  align-items: center;
  gap: 20px;
}
body.env-app .web-nav-menu {
  display: none;
}
body.page-payment-success-body.env-app .header-container {
  display: none;
}
@media (max-width: 768px) {
.env-web .web-nav-menu{
    display: none;
  }
.env-web .app-bottom-nav{
    display: none;
}
.env-web .header-nav-group{
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.env-web .top-button-hamburger{
    display: flex;
    padding-top: 2px;
    cursor: pointer;
}

.env-web .top-button-hamburger:hover #hamburgerImg {
  content: url("../assets/img/hamburger_2px_0075FF.png");
}
.env-app .top-button-hamburger{
        display: none;
    }    
.env-web .top-button-cart{
    display: none;
}


.env-web .sub-2-container {
    display: flex;
    justify-content: start;
    align-items: flex-end;
    margin-left: 24px;
    margin-right: 20px;
    margin-top: 60px;
}
.env-web .sub-2-container-card {
    margin: 12px 20px;
    display: flex;
    position: relative;
    padding-bottom: 20px;
    /* 하단 여백 추가 */
}
.env-web .sub-2-container-card-indexp{
    display: flex;
    gap: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 24px;
    margin-bottom: 40px;
    padding-bottom: 20px;
    padding-right: 10px;

    overflow-x: auto;
    overflow-y: hidden;
    white-space: normal;
    /* 🔽 스크롤바 숨김 */
    -ms-overflow-style: auto;  /* IE, Edge */
    scrollbar-width: auto;     /* Firefox */
}
.env-web .sub-2-container-card-indexp::-webkit-scrollbar {
  display: block !important;
  height: 6px;
}
.env-web .sub-2-container-card-indexp::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}
}
@media (max-width: 450px) {

  body.page-payment-success-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-payment-success-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
}



/* hamburger-modal */

.hamburger-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);

  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  z-index: 1000;
}

.hamburger-overlay.show {
  opacity: 1;
  pointer-events: all;
}
.hamburger-modal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90vh;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 24px 0;

  transform: translateY(100%);
  transition: transform 0.3s ease;

  z-index: 1001;
}

.hamburger-modal.show {
  transform: translateY(0);
}
.hamburger-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hamburger-content a {
  font-size: 18px;
  text-decoration: none;
  color: #111;
}

.hamburger-content{
  display: flex;
  flex-direction: column;
}
.hamburger-header-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px 24px;
  border-bottom: 1px solid #F7F7FB;
  
}
.hamburger-logo-container{
    display: flex;
    gap: 6px;
}
.hamburger-logo-img{
    width: 24px; height: 24px;
}
.hamburger-logo-title{
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
}
.hamburger-modal-close-container{
    padding: 12px 12px;
    border-radius: 12px;
}
.hamburger-modal-close-container:hover{
    background-color: #F7F7FB;
}
.hamburger-modal-close-container:active{
    background-color: #F7F7FB;
    transform: scale(0.98);
}
.hamburger-close-btn{
    width: 20px; height: 20px;
}

.hamburger-menu-container{
    display: flex;
    flex-direction: column;;
}

.hamburger-menu{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 42px;
    gap: 8px;
    padding: 10px 32px;
    cursor: pointer;
}

.hamburger-menu:hover{
    background-color: #F7F7FB;
}

.hamburger-menu:active {
    background-color: #F7F7FB;
    transform: scale(0.98);
}

.hamburger-menu-img{
    width: 24px; height: 24px;
}

.hamburger-menu-text{
    font-size: 18px;
    /* font-weight: 600; */
    color: #111111;
}

.hamburger-appBtn-container{
    display: flex;
    flex-direction: column;
    padding: 48px 0 16px;
    border-top: 1px solid #F7F7FB; 
}

.hamburger-appBtn-title{
    font-size: 20px;
    font-weight: 600;
    color: #0075ff;
    margin-bottom: 20px;
    padding-left: 32px;
}

.hamburger-appBtn-content{
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    width: 100%;
    padding: 10px 32px;
    cursor: pointer;
}

.hamburger-appBtn-content:hover{
    background-color: #F7F7FB;
}

.hamburger-appBtn-content:active {
    background-color: #F7F7FB;
    transform: scale(0.98);
}

.hamburger-appBtn-content-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 4px;
}

.hamburger-appBtn-content-img{
    width: 24px; height: 24px;
}

.hamburger-appBtn-content-text{
    font-size: 16px;
    /* font-weight: 600; */
    line-height: 24px;
    text-align: center;
}


/* receipt-공통 */
body.page-receipt-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-receipt-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
}

/* receipt-app */
body.page-receipt-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;

}
body.page-receipt-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-receipt-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
  }
  body.page-receipt-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    overflow: auto;
  }

}

/* receipt-web */
body.page-receipt-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;

}

body.page-receipt-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow-y: auto;
}

@media (max-width: 450px) {

  body.page-receipt-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-receipt-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
}

/* order-detail-공통 */
body.page-order-detail-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-order-detail-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
}

/* order-detail-app */
body.page-order-detail-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;

}
body.page-order-detail-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-order-detail-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
  }
  body.page-order-detail-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    overflow: auto;
  }

}

/* order-detail-web */
body.page-order-detail-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;

}

body.page-order-detail-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow-y: auto;
}
@media (max-width: 450px) {

  body.page-order-detail-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-order-detail-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
}




/* profile-공통 */
body.page-profile-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-profile-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
}

.order-modal-profilep{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 100%;
    height: auto;
    min-height: 60px;
    background-color: #ffffff;
    /* box-shadow: 0 -2px 10px rgba(67, 0, 209, 0.1); */
    transition: transform 0.4s ease-in-out;
    z-index:1001;
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    max-height:90vh;
    overflow-y: auto;
    min-height: 80%;
    padding:20px;
    box-sizing: border-box;
    overflow: hidden;
}
.order-modal-profilep.show {
  transform:  translateX(-50%) translateY(0);  /* ✅ 이거 추가 */
}

/* profile-app */
body.page-profile-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;

}
body.page-profile-body.env-app .common-header{
    display: none;
}

@media (min-width: 900px) {
  body.page-profile-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
  }
  body.page-profile-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    overflow: auto;
  }
  body.page-profile-body.env-app .order-modal-profilep {
    max-width: 780px;
  }
  body.page-profile-body.env-app .coupon-modal-profilep{
    max-width: 780px;
  }
  body.page-profile-body.env-app .language-change-modal-content{
    max-width: calc(780px - 40px);
  }
  body.page-profile-body.env-app .card-modal-profilep{
    max-width: 780px;
  }
}

/* profile-web */
body.page-profile-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;

}

body.page-profile-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow-y: auto;
}
@media (max-width: 450px) {

  body.page-profile-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-profile-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
}
.profilep-main-bg{
    background: #ffffff;
}
body.page-profile-body.env-web .order-modal-profilep {
    max-width: 536px;
}
body.page-profile-body.env-web .coupon-modal-profilep{
    max-width: 536px;
}

body.page-profile-body.env-web .language-change-modal-content{
    max-width: calc(536px - 40px);
}
body.page-profile-body.env-web .card-modal-profilep{
    max-width: 536px;
  }



/* profile_edit-공통 */
body.page-profile_edit-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-profile_edit-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
}
.modal-content-profilep{
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 24px;
  width: calc(100% - 20px);
  text-align: center;
  /* ✅ 화면 중앙 정렬 */
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%); /* 시작 위치 (살짝 위) */
  opacity: 0;
  transition: all 0.4s ease;
  font-size: 16px;
  line-height: 28px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  box-sizing: border-box;
}

.modal-email-profilep.show .modal-content-profilep {
  transform: translate(-50%, -50%); /* 중앙으로 이동 */
  opacity: 1;                       /* 서서히 나타남 */
}

/* profile_edit-app */
body.page-profile_edit-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;

}
body.page-profile_edit-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-profile_edit-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
  }
  body.page-profile_edit-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    overflow: auto;
  }
  body.page-profile_edit-body.env-app .modal-content-profilep{

    max-width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 0 10px;
  }
}

/* profile-web */
body.page-profile_edit-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;

}

body.page-profile_edit-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow-y: auto;
}
body.page-profile_edit-body.env-web .modal-content-profilep{
  width: calc(536px - 20px) !important;
  box-sizing: border-box;
}
@media (max-width: 450px) {

  body.page-profile_edit-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-profile_edit-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
}

/* signup-공통 */
body.page-signup-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-signup-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
}


/* signup-app */
body.page-signup-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;

}
body.page-signup-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-signup-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
  }
  body.page-signup-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    overflow: auto;
  }

}

/* signup-web */
body.page-signup-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;

}

body.page-signup-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow-y: auto;
}
@media (max-width: 450px) {

  body.page-signup-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-signup-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
}

/* singupmail-공통 */

body.page-singupmail-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-singupmail-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
}


/* singupmail-app */

body.page-singupmail-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;

}
body.page-singupmail-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-singupmail-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
  }
  body.page-singupmail-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    overflow: auto;
  }

}
.signupmailp-form{
    margin-top: 48px;
}
/* singupmail-web */
body.page-singupmail-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;

}

body.page-singupmail-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow-y: auto;
}
@media (max-width: 450px) {

  body.page-singupmail-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-singupmail-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
}

/* loginmail-공통 */

body.page-loginmail-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-loginmail-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
}


/* loginmail-app */

body.page-loginmail-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;

}
body.page-loginmail-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-loginmail-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
  }
  body.page-loginmail-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    overflow: auto;
  }

}
.signupmailp-form{
    margin-top: 48px;
}


/* loginmail-web */
body.page-loginmail-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;

}

body.page-loginmail-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow-y: auto;
}
@media (max-width: 450px) {

  body.page-loginmail-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-loginmail-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
}


/* change-email-공통 */

body.page-change-email-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-change-email-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
}


/* change-email-app */

body.page-change-email-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;

}
body.page-change-email-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-change-email-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
  }
  body.page-change-email-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    overflow: auto;
  }

}



/* change-email-web */
body.page-change-email-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;

}

body.page-change-email-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow-y: auto;
}
@media (max-width: 450px) {

  body.page-change-email-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-change-email-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
}





/* terms-공통 */

body.page-terms-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-terms-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
}

.terms-box-container{
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin-bottom: 10px ;
    border-radius: 24px 24px 0 0;
    gap: 10px;
}

.modal-overlay-termsp {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 9999;
  opacity: 0;
  pointer-events: none;

}
.modal-overlay-termsp.show {
  opacity: 1;
  pointer-events: auto;
}

.modal-content-termsp {
  position: fixed;

  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);  

  width: 100%;
  background: white;

  border-radius: 20px 20px 0 0;

  padding: 20px;
  height: 85vh;
  transition: transform 0.3s ease;

  box-sizing: border-box;
}

.modal-content-termsp.show {
  transform: translateX(-50%) translateY(0);
}

.terms-modal-main-content{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px;
    height: 100%;
}
.terms-modal-header{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 20px 10px;
   flex-shrink: 0;
}
.terms-modal-body{
    background-color: #f7f7fb;
    padding: 20px;
    border-radius: 12px;

    font-size: 14px;
    line-height: 26px;

    flex: 1;
    overflow-y: auto;

}
.terms-modal-title{
    font-size: 20px;
    font-weight: 600;
    color: #111111;
}
.terms-modal-close-btn{
    font-size: 20px;
    font-weight: 600;
    color: #111111;

    padding: 10px;
    cursor: pointer;
    transition: transform 0.1s ease;

}
.terms-modal-close-btn:hover{
    background-color: #f7f7fb;
    border-radius: 12px;
}
.terms-modal-close-btn:active{
    scale: calc(0.9);
}

.terms-confirm-btn{
    width: 100%;
    padding: 14px 20px;
    border-radius: 12px;
    background-color: #0075FF;
    color: #ffffff;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    transition: transform 0.1s ease;
    margin-bottom: 42px;

}
.terms-confirm-btn:hover{
    background-color: #1A85FF;
}
.terms-confirm-btn:active{
    scale: calc(0.9);
}
.terms-modal-footer{
  flex-shrink: 0;
}
/* terms-app */

body.page-terms-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;

}

body.page-terms-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-terms-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
  }
  body.page-terms-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    overflow: auto;
  }

  body.page-terms-body.env-app .modal-content-termsp{
    width: 100%;
    max-width: 780px;
  }
}



/* terms-web */
body.page-terms-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;

}

body.page-terms-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow-y: auto;
}
body.page-terms-body.env-web .modal-content-termsp{
  width: 100%;
  max-width: 536px;
}
@media (max-width: 450px) {

  body.page-terms-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-terms-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
}



/* myesim-공통 */

body.page-myesim-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-myesim-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
}


/* myesim-app */

body.page-myesim-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;

}
body.page-myesim-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-myesim-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
  }
  body.page-myesim-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    overflow: auto;
  }

}



/* myesim-web */
body.page-myesim-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;

}

body.page-myesim-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow-y: auto;
}
@media (max-width: 450px) {

  body.page-myesim-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-myesim-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
}


/* write-review-공통 */

body.page-write-review-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-write-review-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
}


/* write-review-app */

body.page-write-review-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;

}
body.page-write-review-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-write-review-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
  }
  body.page-write-review-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    overflow: auto;
  }

}



/* write-review-web */
body.page-write-review-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;

}

body.page-write-review-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow-y: auto;
}
@media (max-width: 450px) {

  body.page-write-review-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-write-review-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
}

/* delete-account-공통 */

body.page-delete-account-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-delete-account-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
}


/* delete-account-app */

body.page-delete-account-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;

}
body.page-delete-account-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-delete-account-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
  }
  body.page-delete-account-bodyy.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    overflow: auto;
  }

}



/* delete-account-web */
body.page-delete-account-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;

}

body.page-delete-account-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow-y: auto;
}
@media (max-width: 450px) {

  body.page-delete-account-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-delete-account-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
}



/* esim-down-공통 */

body.page-esim-down-body .app-wrapper {
  height: 100dvh;
  display: flex;
  justify-content: center;
  background: #ffffff;
}

body.page-esim-down-body .app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
}
.product-container-esim_downloadp{
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: #F7F7FB;
    margin-top: 10px;
    margin-bottom: 32px;
    gap: 10px;
}
.product-title-esim_downloadp{
    font-size: 14px;
    font-weight: 600;
    line-height: 28px;
    border-bottom: 1px solid #E5E5EC;
    width: 150px;
}
.product-name-esim_downloadp{
    display: flex;
    align-items: center;
    gap: 12px;
}
.product-flag-img-esim_downloadp{
    width: 24px; height: 24px;
    border-radius: 100px;
    border: 1px solid #0075ff1A;
}
.product-text-esim_downloadp{
    display: flex;
    flex-direction: column;
}
.product-text-country-esim_downloadp{
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #333333;
}
.product-text-volume-esim_downloadp{
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #333333;    
}
.product-description-esim_downloadp{
    display: flex;
    align-items: center;
    gap: 6px;

}
.product-description-text-esim_downloadp{
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: #777777;
}
.product-description-img-esim_downloadp{
    width: 18px; height: 18px;
    cursor: pointer;
}
.product-description-iccid-esim_downloadp{
    display: flex;
    align-items: center;
    gap: 6px;
}
.product-description-iccid-title{
    font-size: 12px;
    line-height: 18px;
    color: #AAAAAA;
}
.product-description-iccid-value{
    font-size: 12px;
    line-height: 18px;
    color: #AAAAAA;
}
.download-title-container-esim_downloadp{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    padding: 0 20px;
    margin-bottom: 20px;
}
.download-title-text-main-esim_downloadp{
    font-size: 18px;
    font-weight: 600;
    color: #111111;
    line-height: 28px;
}
.download-title-text-sub-esim_downloadp{
    font: 14px;
    font-weight: 600;
    color: #767676;
    line-height: 20px;
}
.download-tab-container-esim_downloadp{
  display: flex;
  width: 100%;

  margin-bottom: 32px;
}
.download-tab-container-esim_downloadp > *{
  flex: 1;
  text-align: center;
}
.download-tab-esim_downloadp{
    height: 52px;
    border-bottom: 3px solid #d9d9d9;

    display: flex;
    justify-content: center;
    align-items: center;

    color: #d9d9d9;
    font-size: 16px;
    font-weight: 600;

    cursor: pointer;
}
.download-tab-esim_downloadp.active-esimdown{
    border-bottom: 3px solid #0075ff;
    color: #0075ff;
}




.download-tab-title-container-esim_downloadp{
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 20px;
    margin-bottom: 20px;
}
.download-tab-title-guide-esim_downloadp{
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 10px 20px 10px 22px;

    border-radius: 100px;
    background-color: #10D682;

    cursor: pointer;
    transition: transform 0.1s ease;
}
.download-tab-title-guide-esim_downloadp:hover{
    opacity: 0.8;
}
.download-tab-title-guide-esim_downloadp:active{
    scale: calc(0.9);
}
.download-tab-title-main-esim_downloadp{
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #111111;
}
.download-tab-title-guide-text-esim_downloadp{
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
}
.download-tab-title-guide-img-esim_downloadp{
    width: 18px; height: 18px;
}
.download-tab-description-container-esim_downloadp{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;

    padding: 0 20px;
    margin-bottom: 32px;
}
.download-tab-description-main-esim_downloadp{
    font-size: 14px;
    font-weight: 600;
    line-height: 28px;
    color: #111111;
}
.download-tab-description-sub-esim_downloadp{
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    color: #767676;
}
.download-tab-main-container-esim_downloadp{
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
}
.download-tab-main-btn-esim_downloadp{
    width: 100%; height: 60px;
    border-radius: 100px;
    background: linear-gradient(to right, #0059cc 0%, #0075ff 30%, #0075ffcc 100%);
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 18px;
    font-weight: 600;
    line-height: 26px;

    border: none;

    transition: background 0.2s;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.download-tab-main-btn-esim_downloadp:hover {
  background: linear-gradient(to bottom, #54a4ff, #006ce9);
}
.download-tab-main-btn-esim_downloadp:active {
  scale: calc(0.9);
}
.tab-panel-esim_downloadp{
    display: none;
    flex-direction: column;
}
.tab-panel-esim_downloadp.active-esimdown{
    display: flex;
}
.download-tab-main-qrbox-esim_downloadp{
    width: 190px; height: 190px;
    border: 2px solid #E5E5EC;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.download-tab-esim_downloadp.disabled{
    opacity: 0.4 !important;
    pointer-events: auto !important;
}
.download-tab-main-title-esim_downloadp{
    font-size: 14px;
    color: #ffffff;
    padding: 14px 20px;
    background-color: #0075FF;
    border-radius: 16px;
    font-weight: 600;
}
.download-tab-main-container-ios-esim_downloadp{
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 10px;
    box-sizing: border-box;
    margin-bottom: 30px;
}
.download-tab-main-container-android-esim_downloadp{
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 10px;
    margin-bottom: 30px;
}
.download-tab-device-esim_downloadp{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    margin-left: 6px;
}
.download-tab-device-img-esim_downloadp{
    width: 24px; height: 24px;

}
.manual-code-item-esim_downloadp{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 12px;
    height: auto;

    border-radius: 10px;
    border: 1px solid #F7F7FB;
    box-sizing: border-box;
    padding: 0 10px 0 0;
}

.manual-code-value-esim_downloadp{
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex: 1;          /* 남은 공간 다 먹기 */
    min-width: 0; 
    min-height: 60px;


}


.manual-code-copy-esim_downloadp{
    width: 18px; height: 18px;
    padding: 6px;
    background-color: #F7F7FB;
    border-radius: 100px;
    opacity: 0.7;
    cursor: pointer;
    transition: transform 0.1s ease;
}
.manual-code-copy-esim_downloadp:hover{
    opacity: 1;
}
.manual-code-copy-esim_downloadp:active{
    scale: calc(0.9);
}
.manual-code-title-esim_downloadp{
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    color: #111111;
    width: 100px;


    flex: 0 0 100px;  /* 고정 100px */
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #F7F7FB;

    height: auto; /* 고정 높이 대신 부모 높이에 맞춤 */
    align-self: stretch;

    padding: 10px;
    box-sizing: border-box;
}

.manual-value-esim_downloadp{
  word-break: break-all;
}
.manual-value-esim_downloadp{
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: #111111;
    display: flex;
    align-items: center;
    padding: 10px 0; 
    box-sizing: border-box;   
}
.is-hidden{
    display: none !important;
}
#activationTimingDescModal {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    background: #ffffff;
    width: calc(100% - 60px);
    max-width: 400px;
    border-radius: 32px;
    z-index: 10000;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    max-height: 400px;
    box-sizing: border-box;
    min-height: 400px;
    transition: opacity 0.4s, transform 0.4s;
    transform: translate(-50%, -50%);
    padding: 20px;
}
#activationTimingDescModal.modal-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -100%);
}
.guide-modal-esim_downp{
  padding: 20px;
  box-sizing: border-box;

  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 536px; /* 기본 웹 */
  height: 100%;

  background: #fff;
  z-index: 10000;
  left: 50%;  
  transform: translateX(-50%) translateY(100%);
  opacity: 0;
  pointer-events: none;

  transition: transform 0.35s ease, opacity 0.35s ease;    
}
.guide-modal-esim_downp.active {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.guide-modal-esim_downp-header{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.guide-modal-esim_downp-header-title{
    display: flex;
    justify-content: space-between;
    align-items: center;

    height: 54px;
}
.guide-modal-esim_downp-header-title-text{
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
}
.guide-modal-esim_downp-header-title-cloBtn{
    width: 20px; height: 20px;
    padding: 10px;
    border-radius: 12px;
    transition: transform 0.1s ease;
}
.guide-modal-esim_downp-header-title-cloBtn:hover{
    background-color: #F7F7FB;
}
.guide-modal-esim_downp-header-title-cloBtn:active{
    scale: calc(0.9);
}
.guide-modal-esim_downp-header-device-tab-box{
    display: flex;
    align-items: center;
    height: 40px;

}
.guide-modal-esim_downp-header-device-tab-box.active{
    background-color: #0075FF;

}

.guide-modal-esim_downp-header-device-tab{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    border-bottom: 3px solid #d9d9d9;
    color: #d9d9d9;
    font-size: 18px;
    font-weight: 600;
}
.guide-modal-esim_downp-header-device-tab.is-active{
    border-bottom: 3px solid #0075ff;    
    color: #0075ff;
}
.guide-arrow-esim_downp{
    border: none;
    background-color: transparent !important;
}
.guide-arrow-btn-esim_downp{
    width: 32px; height: 32px;
}
.guide-slider-wrappe{
    position: relative;
}
.guide-arrow-esim_downp {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.guide-arrow-esim_downp.left {
  left: 10px;
}
.guide-arrow-esim_downp.right {
  right: 10px;
}



.modal-body-esim_downp{
    height: 100%;
  display: flex;
  flex-direction: column;
}
.guide-slider-wrapper {
  width: 100%;
  height: calc(100vh - 160px); 
  overflow: hidden;
  /* aspect-ratio: 9 / 16;  */
  /* flex: 1; */

}
.guide-slider-esim_downp {
  display: flex;
  transition: transform 0.3s ease;
  height: 100%;
}
.guide-slide {
  min-width: 100%;
  height: 100%;
  overflow-y: auto;
  -ms-overflow-style: none;

  scrollbar-width: none;
}

.guide-slide img {
  width: 100%;
  /* height: 100%; */
  /* object-fit: contain;  */
  height: auto; 
  display: block;
}
.guide-slide::-webkit-scrollbar {
  display: none;
}



/* esim-down-app */

body.page-esim-down-body.env-app .app-container {
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;

}
body.page-esim-down-body.env-app .common-header{
    display: none;
}
@media (min-width: 900px) {
  body.page-esim-down-body.env-app .app-wrapper {
    background: #ffffff;
    padding: 32px 0;
    min-height: 100vh;
    box-sizing: border-box; /* ⭐ 이거 */
  }
  body.page-esim-down-body.env-app .app-container {
    max-width: 780px;
    min-height: auto;
    margin: 0;
    border: 1px solid #e5e5ec;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    overflow: auto;
  }
  body.page-esim-down-body.env-app .guide-modal-esim_downp {
    max-width: 780px;
  }

}



/* esim-down-web */
body.page-esim-down-body.env-web .app-wrapper {
  background: #ffffff;
  padding: 32px 0;
  min-height: 100vh;
  box-sizing: border-box;

}

body.page-esim-down-body.env-web .app-container {
  max-width: 536px;
  min-height: auto;
  margin: 0;

  border: 1px solid #e5e5ec;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow-y: auto;
}

body.page-esim-down-body.env-web .guide-modal-esim_downp {
  max-width: 536px;
}

@media (max-width: 450px) {

  body.page-esim-down-body.env-web .app-wrapper {
    height: 100dvh;
    background: #ffffff;
    padding: 0;
    /* overflow-y: auto; */
  }

  body.page-esim-down-body.env-web .app-container {
    min-height: 100svh;
    max-width: 780px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow:none;
    position: relative;
    box-sizing: border-box;
  }
  body.page-esim-down-body.env-web .guide-modal-esim_downp {
    max-width: 100%;
    left: 0;
    transform: translateY(100%);
  }

  body.page-esim-down-body.env-web .guide-modal-esim_downp.active {
    transform: translateY(0);
  }
}

/* 폰트 */


@font-face {
    font-family: 'Pretendard';
    src: url('../assets/font/Pretendard-Regular.woff2') format('woff2'),
        url('../assets/font/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../assets/font/Pretendard-Bold.woff2') format('woff2'),
        url('../assets/font/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

html[lang="ja"] body {
  font-family:
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    system-ui,
    sans-serif;
}
html[lang="ja"] button {
  font-family:
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    system-ui,
    sans-serif;
}
html[lang="zh-CN"] body {
  font-family:
    "PingFang SC",
    "Noto Sans SC",
    system-ui,
    sans-serif;
}
html[lang="zh-TW"] body {
  font-family:
    "PingFang TC",
    "Noto Sans TC",
    system-ui,
    sans-serif;
}

html[lang="th"] body {
  line-height: 1.4;
}

html[lang="ar"],
html[lang="fa"],
html[lang="ur"] {
  direction: rtl;
}

html[lang="ar"] body,
html[lang="fa"] body,
html[lang="ur"] body {
  line-height: 1.6;
}

html[lang="ar"] body,
html[lang="fa"] body,
html[lang="ur"] body {
  font-family:
    "Noto Sans Arabic",
    system-ui,
    sans-serif;
}

html[lang="he"] {
  direction: rtl;
}