@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato');

@font-face {
    font-family: 'GowunBatang-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AppleSDGothicNeo';
    font-weight: 600;
    src: url('/assets/Web/font/AppleSDGothicNeoSB.woff2') format("woff2");
}

@font-face {
    font-family: 'GmarketSansBold';
    font-weight: 600;
    src: url('/assets/Web/font/GmarketSansTTF/GmarketSansTTFBold.ttf') format("ttf");
}

/* 기본 리셋 */
* {margin: 0; padding: 0;}
li {list-style: none;}
a {font-family: 'Pretendard'; text-decoration: none; color: inherit; cursor: pointer;}
html {
    line-height: 1;
    color: #111111;
    font-family: 'Pretendard';
    background: #fff;
    height: 100%;
    font-size: 62.5%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html::-webkit-scrollbar {display: none;}
body {font-size: 1.6rem; font-family: 'Pretendard'; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
button {font-family: 'Pretendard'; border: 0; cursor: pointer;}
input {font-family: 'Pretendard'; font-size: 1.6rem; font-weight: 400;}
h1, h2, h3, h4, h5, h6 {font-family: 'Pretendard'; margin: 0; line-height: 1;}
table {font-family: 'Pretendard'; border-spacing: 0px;}
select::-ms-expand {display: none;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type='number'] {-moz-appearance: textfield;}


/* 전체 공통 */
.wrap {max-width: 600px; margin: 0 auto; position: relative;}
.bg_b {background-color: #000;}
.bg {background-color: rgba(0, 0, 0, 0.60); display: none; width: 100%; height: 100%; z-index: 202; position: fixed; top: 0;left: 0;}
.bg2_b {background-color: #000;}
.bg2 {background-color: rgba(0, 0, 0, 0.60); display: none; width: 100%; height: 100%; z-index: 202; position: fixed; top: 0;left: 0;}


/* checkbox */
input[type="checkbox"]{display: none;}
input[type="checkbox"] + label{cursor:pointer; vertical-align: middle;}
.chk_agree + label {display: flex; justify-content: center; align-items: center;}
.chk_agree + label:before{ content:""; display: inline-block; width: 2.4rem; height: 2.4rem; border: none; border-radius: 50%; vertical-align: middle; align-items: center; background: url('/assets/Web/img/icon/icon_check.svg') center center / 60% no-repeat; margin-right: 1rem; background-color: #DBDBDB;}
.chk_agree:checked + label:before{ content:""; border-color: none; background: url('/assets/Web/img/icon/icon_check.svg') center center / 60% no-repeat; background-color: #000;}
.chk_agree.all + label {color: #222B45; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.389px;}
.chk_agree.chkyn + label {color: #2E3640; font-size: 1.4rem; font-weight: 400;}

.chk_box + label {display: flex; align-items: center; gap: 0.8rem; font-size: 1.3rem; font-weight: 700; line-height: 169%;}
.chk_box + label:before{content:""; display: inline-block; width: 16px; height: 16px; border-radius: 6px; border: 1px solid #D7DDE1; vertical-align: middle;}
.chk_box:checked + label:before{content:""; border-color:#36342F; border-radius: 6px; background: url('/assets/Web/img/icon/icon_check.svg') center center / 70% no-repeat; background-color:#36342F;}
.chk_box.survey + label:before {width: 22px; height: 22px;}

.filter_chk + label {display: flex; align-items: center; gap: 0.8rem; font-size: 1.2rem; font-weight: 700; line-height: 183%;}
.filter_chk + label:before{content:""; display: inline-block; width: 16px; height: 16px; border-radius: 6px; border: 1.8px solid #36342F; vertical-align: middle;}
.filter_chk:checked + label:before{content:""; border-color:#36342F; border-radius: 6px; background: url('/assets/Web/img/icon/icon_check.svg') center center / 70% no-repeat; background-color:#36342F;}

.filter_chk2 + label {display: flex; align-items: center; gap: 0.8rem; font-size: 1.4rem; color: #333333; line-height: 183%;}
.filter_chk2 + label:before{content:""; display: inline-block; width: 30px; height: 30px; border-radius: 6px; border: 1.8px solid #BABABA; vertical-align: middle;}
.filter_chk2:checked + label:before{content:""; border-color:#36342F; border-radius: 6px; background: url('/assets/Web/img/icon/icon_check.svg') center center / 70% no-repeat; background-color:#36342F;}


/* button */
.btn_area {position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); width: calc(100% - 4rem);max-width: 550px;}
.btn_area.btn_02 {display: flex; gap: 0.9rem;}
.basic_btn {background-color: #000; color: #FFFFFF; padding: 2rem 0; box-sizing: border-box; border-radius: 100px; width: 100%; /* box-shadow : 0px 10px 20px rgba(0, 0, 0, 0.10);*/ font-size: 1.6rem; font-weight: 700; line-height: 131%;}
.click_btn {background-color: #3f68d0; color: #F5F5F5; padding: 1rem 0; box-sizing: border-box; border-radius: 60px; width: 70%; box-shadow : 0px 10px 20px rgba(0, 0, 0, 0.10); font-size: 1.6rem; font-weight: 700; line-height: 121%;}
.popup_btn {padding: 0.4rem 1rem; box-sizing: border-box; background-color: #000; border-radius: 50px; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.10); color: #fff; width: 100%; height: 100%;}
.cancel_btn {background-color: #7E7E7E;}
.addr_btn {position: absolute; right: 1.4rem; bottom: 1rem; padding: 0.5rem 1rem; box-sizing: border-box; border-radius: 12px; background-color: #36342F; color: #fff; font-family: 'Poppins'; font-size: 1.2rem; font-weight: 400; line-height: normal;}
.point_btn {position: absolute; right: 0rem; bottom: 0.1rem; padding: 0.67rem 0.8rem; box-sizing: border-box; border-radius: 12px; border: 1px solid #A0A0A0; background-color: #FFFFFF; color: #36342F; font-family: 'Poppins'; font-size: 1.2rem; font-weight: 400; line-height: normal;}
.review_btn {color: #000; background-color: #fff;}
.report_btn {padding: 0.6rem 0.8rem; box-sizing: border-box; background-color: #3A3A3A66; color: #fff; border-radius: 8px; border: 1px solid #000; font-size: 1.2rem; font-weight: 900; font-family: 'Poppins';}
.url_btn {padding: 0.5rem 1.6rem; box-sizing: border-box; border-radius: 12px; background-color: #000; color: #fff; font-family: 'Poppins'; font-size: 1.4rem; font-weight: 600; line-height: normal;}
.check_btn {display: inline-block; width: 100%; padding:0.85rem; background: transparent; border-radius: 5rem; color: #EF7E33; font-size: 1.4rem; border: 1px solid #EF7E33;}
.support_btn {padding: 0.6rem; background-color: #000; color: #fff; border-radius: 15px; font-size: 1.2rem; font-weight: 700; line-height: normal;}


/* 바닥 컴포넌트 + button */
.bottom_menu {position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); background-color: #000; max-width: 600px; width: 100%; z-index: 301;}
.bottom_menu .inner {width: 100%; padding: 1.4rem 1.8rem; display: flex; gap: 1rem; box-sizing: border-box;}
.btn_style_01 {padding: 0.6rem 1.6rem; box-sizing: border-box; background-color: #000; border-radius: 8px; box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); color: #fff; font-size: 1.6rem; font-weight: 600; line-height: 150%; width: 40.413%; border: 1px solid #fff; }
.btn_style_01.on {background-color: #fff; color: #000;}
.btn_style_01.type2 {padding: 0.9rem 1.6rem; line-height: 2.4rem; width: 50%;}
.btn_style_02 {width: 4.4rem; height: 4.4rem; padding: 0 1.6rem; background-color: #000; border: 1px solid #fff; border-radius: 100px; box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); display: flex; justify-content: center; align-items: center;}
.btn_style_02.on svg path {fill: #000;}
.btn_style_02.on {background-color: #fff;}
.btn_style_03 {width: 80px; height: 80px; padding: 0.4rem 1rem; border-radius: 100px; border: 2px solid #979797; background-color: #DEDEDE; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.10); font-size: 1.4rem; color: #000; font-weight: 700; line-height: normal;}
.btn_style_04 {width: 80px; height: 80px; padding: 0.4rem 1rem; border-radius: 100px; background-color: #000; color: #fff; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.10); font-size: 1.4rem; font-weight: 700; line-height: normal;}
.btn_style_05 {display: flex; flex-direction: column; background-color: #fff; border-radius: 8px; justify-content: center; align-items: center; padding: 0.6rem 1.6rem; box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); color: #000; font-size: 1.6rem; font-weight: 600;}
.btn_style_05 .btn_sub {font-size: 1.1rem;}


/* bottom_menu 컴포넌트 설명
    하단 바에 '좋아요'표시인 heart : h
    포인트 : p
    버튼 : b
    예) 하단 바에 좋아요, 포인트, 버튼이 모두 있는 경우 : btm_hpb (b가 1개면 버튼 1개)
    하트나 버튼에 'on' 클래스를 주어 배경색을 흰색으로 표시할 수 있도록 함. */

/* 하트 + 포인트 + 버튼 + 버튼 이 있는 컴포넌트 */
.bottom_menu.btm_hpbb {z-index: 103;}
.bottom_menu.btm_hpbb .inner .bottom_point{display: flex; justify-content: flex-start; gap: 1.4rem; align-items: center;}
.bottom_menu.btm_hpbb .inner .bottom_point .bottom_txt{color: #fff; width: 28vw;}
.bottom_menu.btm_hpbb .inner .bottom_point .bottom_txt .sub{opacity: 0.6; font-size: 1rem; font-weight: 400; letter-spacing: 0.2px;}
.bottom_menu.btm_hpbb .inner .bottom_point .bottom_txt .txt_point{font-size: 2.0rem; font-weight: 900;line-height: normal;} /*  letter-spacing: 0.48px;  */

/* 하트 + 포인트 + 버튼 */
.bottom_menu.btm_hpb .inner {justify-content: space-between;}
.bottom_menu.btm_hpb .inner .bottom_point {display: flex; justify-content: flex-start; gap: 1.4rem; align-items: center;}
.bottom_menu.btm_hpb .inner .bottom_point .bottom_txt{color: #fff; width: 28vw;}
.bottom_menu.btm_hpb .inner .bottom_point .bottom_txt .sub{opacity: 0.6; font-size: 1rem; font-weight: 400; letter-spacing: 0.2px;}
.bottom_menu.btm_hpb .inner .bottom_point .bottom_txt .txt_point{font-size: 2.0rem; font-weight: 900; line-height: normal;}/*  letter-spacing: 0.48px;  */
.bottom_menu.btm_hpb .inner button {width: 50%;}

/* 하트 + 버튼 */
.bottom_menu.btm_hb .inner {align-items: center; gap: 1.6rem;}
.bottom_menu.btm_hb .inner button {width: 90%; padding: 1rem 1.6rem;}

/* 하트 + 버튼 + 버튼 */
.bottom_menu.btm_hbb .inner {align-items: center; gap: 0; justify-content: space-between;}
.bottom_menu.btm_hbb .inner button.sm {width: 30%;}
.bottom_menu.btm_hbb .inner button.md {width: 57%; margin-left: 3%;}


/* 버튼 + 버튼 */
.bottom_menu.btm_bb {position: fixed;}
.bottom_menu.btm_bb button.btn_style_05 {width: 60%;}


/* input text */
.input_area {display: flex; flex-direction: column; row-gap: 0.6rem; position: relative;}
.input_point_area {display: flex; flex-direction: column; position: relative;}
.input_area span {color: #36342F; font-size: 1.3rem; font-weight: 700; line-height: 169%;}
.input_area .input_info {display: flex; justify-content: space-between; align-items: center;}
.input_area span.sub {color: #BCBCBC; font-size: 1.2rem; font-weight: 400; line-height: normal; letter-spacing: 0.389px;}
.basic_input {padding: 0.9rem 1.4rem; box-sizing: border-box; border: 1px solid #D7DDE1; border-radius: 0.8rem; height: 5rem;}
.point_input {padding: 0.9rem 1.4rem; box-sizing: border-box; border: 1px solid #D7DDE1; border-radius: 0.8rem; height: 3.5rem; max-width: 23rem;}
.basic_input::placeholder {font-size: 1.4rem; color: #C0C0C0; font-weight: 400; line-height: 157%;}


/* textarea */
.basic_textarea {border-radius: 8px; border: 0.5px solid #D7DDE1; padding: 0.9rem 1.4rem; box-sizing: border-box; font-family: 'Pretendard'; font-size: 1.5rem; font-weight: 400; letter-spacing: -0.38px;}
.basic_textarea::placeholder {color: #BCBCBC;}
input, textarea {caret-color: black;     /* 커서 색을 검은색으로 지정 */}


/* radio */
input[type='radio'] {appearance: none;}
.radio_area {display: inline-flex;}
.basic_radio + label {border-radius: 0.8rem; border: 1px solid #D7DDE1; background: #FFF; color: #6F6F6F; font-size: 1.4rem; font-weight: 400; line-height: normal; padding: 0.9rem 4.45rem; margin-right: 0.8rem;}
.basic_radio:checked + label {background-color: #000; color: #FFF; font-weight: 700;}
.basic_radio.small + label {padding: 0.9rem 2.3rem; box-sizing: border-box; width: 56px;}

.basic_radio2 + label {border-radius: 0.8rem; border: 1px solid #D7DDE1; background: #FFF; color: #6F6F6F; font-size: 1.4rem; font-weight: 400; line-height: normal; padding: 0.9rem 2rem; margin-right: 0.8rem;}
.basic_radio2:checked + label {background-color: #000; color: #FFF; font-weight: 700;}
.basic_radio2.small + label {padding: 0.9rem 2.3rem; box-sizing: border-box; width: 56px;}


.radio_group {display: flex; flex-direction: column; row-gap: 0.8rem;}
.radio_group .radio_one {display: flex; align-items: center; gap: 1.6rem; padding: 0.8rem 0.1rem; box-sizing: border-box;}
.circle_radio {appearance: none; border-radius: 50%; width: 22px; height: 22px; background-color: #fff; box-shadow: 0 0 0 2px #D3D3D3;}
.circle_radio:checked {background-color: #1D1B20; border: 5px solid white; box-shadow: 0 0 0 2px #1D1B20;}


/* select box */
.select {color: #C0C0C0; width: 100%; outline: 0 none; border: 0.5px solid #D7DDE1; position: relative; border-radius: 8px; padding: 1.4rem 1.6rem; box-sizing: border-box; white-space: nowrap; background: url('/assets/Web/img/icon/icon_arrow_down.svg') calc(100% - 1.6rem) center no-repeat;}
.select::after {content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 100%; height: 100%; }
.select .selected_value {font-size: 1.4rem; font-weight: 400; line-height: 157%;}
.report_select {-o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('/assets/Web/img/icon/icon_arrow_down.svg') calc(100% - 1.2rem) center no-repeat; color: #000000AA; font-size: 1.4rem; font-weight: 400; border-radius: 12px; padding: 1rem 1.2rem; box-sizing: border-box; outline: 0 none; line-height: normal; border: 1px solid #DCDBDD; background-color: #fff;}


/* table */
.terms_table {border-collapse: collapse; width: 100%;}
.terms_table th, .terms_table td {border: 1px solid #2E3640; padding: 0.5rem; font-size: 1.4rem;}


/* svg control */
.like_svg.on svg {fill: #fff;}


/* alert - 02_3 */
.bg {background-color: rgba(0, 0, 0, 0.49); width: 100%; height: 100%; z-index: 100; position: fixed; top: 0; left: 0;}
.bg2 {background-color: rgba(0, 0, 0, 0.49); width: 100%; height: 100%; z-index: 100; position: fixed; top: 0; left: 0;}
.alert { padding: 2.6rem 2rem 2rem 2rem; box-sizing: border-box; border-radius: 20px; background-color: #fff; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 14rem); z-index: 101;}
.alert.select_alert {z-index: 203;}
.alert.select_alert .inner {gap: 1.6rem; width: 100%;}
.alert.select_alert .btn_box {display: flex; gap: 1rem; width: 100%; align-items: center; justify-content: center;}
.alert.select_alert .btn_box .basic_btn {padding: 0.95rem 0; width: 9.3rem; text-align: center; font-size: 1.4rem;}

.alert .inner {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.2rem;}
.alert .inner h5 {color: #222B45; font-size: 1.7rem; font-weight: 700; line-height: normal; letter-spacing: 0.389px;}
.alert .inner p {text-align: center; color: #2E3640; font-size: 1.4rem; font-weight: 400; line-height: 142%;}
.alert .inner p.align_left {text-align: left;}
.alert .inner .popup_btn_area {width: 100%; height: 3.6rem; margin-top: 0.4rem;}



/* alert - 05_4 */
.alert.style02 .inner {gap: 1.6rem;}
.alert.style02 .inner .alert_container {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.2rem;}
.alert.style02 .inner .alert_container .alert_title {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.alert.style02 .inner .alert_container .alert_title figure {width: 48px; height: 48px;}
.alert.style02 .inner .alert_container .alert_title figure img {width: 100%; height: 100%; object-fit: cover;}
.alert.style02 .inner .alert_container .alert_title h5.alert_point {color: #FFC628; font-size: 3.2rem; font-weight: 900; line-height: normal; letter-spacing: 0.389px;}
.alert.style02 .inner .alert_container p.sub_txt {color: #222B45; font-size: 1.7rem; font-weight: 700; line-height: normal; letter-spacing: 0.389px;}
.alert.style02 .inner .alert_container p.explain_txt {color: #2E3640; font-size: 1.4rem; font-weight: 400; line-height: 142%;}
.alert.style02 .inner .popup_btn_area {height: 100%; display: flex; justify-content: center; align-items: center; gap: 1rem;}


/* popup - 03_2 */
.popup {max-width: 600px; width: 100%; border-radius: 24px 24px 0 0; overflow: hidden; background-color: #FFFFFF; position: fixed; z-index: 203; bottom: 54px; left: 50%; transform: translateX(-50%); box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.04);}
.popup .inner .title {width: calc(100% - 5rem); margin: 0 auto; padding-bottom: 1rem; display: flex; justify-content: center; align-items: center; position: relative; padding: 1.4rem 0; box-sizing: border-box;}
.popup .inner .title h4 {color: #111111; font-size: 1.5rem; font-weight: 700; line-height: 169%; letter-spacing: -0.5px;}
.popup .inner .title h5 {color: #111111; font-size: 1.3rem; font-weight: 700; line-height: 169%; letter-spacing: -0.5px;}
.popup .inner .title button {position: absolute; background-color: #FFFFFF; width: 1.8rem; height: 1.8rem; top: 50%; transform: translateY(-50%); right: 0;}
.popup .inner .popup_content {margin-top: 0.8rem; margin-right: 0.8rem; height: 312px; overflow-y: auto; padding-right: 1.6rem; box-sizing: border-box;}
.popup .inner .popup_content::-webkit-scrollbar {width: 6px;}
.popup .inner .popup_content::-webkit-scrollbar-track {background-color: #fff;}
.popup .inner .popup_content::-webkit-scrollbar-thumb {background-color: #79747E;  border-radius: 6px; background-clip: padding-box;}
.popup .inner .popup_content ul.select_list li {padding: 1.2rem 2.4rem 1.2rem 5.6rem; box-sizing: border-box; font-family: 'Roboto'; color: #2E3640; font-size: 1.6rem; font-weight: 400; line-height: 150%; letter-spacing: -0.5px;}
.popup .inner .popup_content ul.select_list li:hover {background-color: #99999914;}
.popup .inner .popup_content ul.select_list li.selected {background-color: #99999914; position: relative;}
.popup .inner .popup_content ul.select_list li.selected::before {content: ''; width: 2.4rem; height: 2.4rem; background: url('/assets/Web/img/icon/icon_check_b.svg'); position: absolute; top: 50%; transform: translateY(-50%); left: 1.6rem;}

/* popup survey - 05_4 */
.popup.survey {bottom: 7.3rem;}
.popup.survey .inner .popup_content {height: 100vw; margin: 0 auto; padding: 0 1.5rem; box-sizing: border-box; padding-bottom: 2.5rem;}
.popup.survey .inner .popup_content .survey_info {border-radius: 12px; background-color: #F6F6F6; padding: 1.2rem 1.6rem; box-sizing: border-box;}
.popup.survey .inner .popup_content .survey_info p {color: #8F9BB3; font-size: 1.2rem; font-weight: 600; line-height: 141%;}
.popup.survey .inner .popup_content .survey_list {position: relative;}
.popup.survey .inner .popup_content .survey_list li {position: relative; margin-top: 2.5rem;}
.popup.survey .inner .popup_content .survey_list li::before {content: ''; position: absolute; top: -1.7rem; left: -1.5rem; width: calc(100% + 3rem); height: 1px; background-color: #EAECEF;}
.popup.survey .inner .popup_content .survey_list li h6 {color: #222B45; font-size: 1.6rem; font-weight: 700; line-height: normal; margin-bottom: 0.9rem;}

/* popup purchase - 07_4 */
.popup.purchase {bottom: 7.3rem;}
.popup.purchase .popup_content {padding: 0;}
.popup.purchase .popup_content .input_box {padding: 0 1.6rem;}
.popup.purchase .popup_content .select .selected_value {color: #C0C0C0;}
.popup.purchase .popup_content .selected_size {display: flex; flex-direction: column; row-gap: 0.8rem; margin-top: 0.8rem; margin-bottom: 0.8rem; padding: 0 1.6rem;}
.popup.purchase .popup_content .selected_size li {display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 0;}
.popup.purchase .popup_content .selected_size li .size_area p {color: #2E3640; font-size: 1.4rem; font-weight: 500; line-height: normal; letter-spacing: 1px; margin-bottom: 0.9rem;}
.popup.purchase .popup_content .selected_size li .size_area .point_price {font-size: 1.8rem; font-weight: 800; line-height: normal; letter-spacing: 1px;}
.popup.purchase .popup_content .selected_size li .cnt_area {display: flex; align-items: center; gap: 1rem;}
.popup.purchase .popup_content .selected_size li .cnt_area button {width: 30px; height: 30px; border-radius: 100px; overflow: hidden;}
.popup.purchase .popup_content .selected_size li .cnt_area p {width: 20px; text-align: center; color: #2E2A28; font-family: 'Poppins'; font-weight: 600; font-size: 1.4rem; line-height: normal; letter-spacing: 1px;}
.popup.purchase .popup_content .total_box {padding: 2.4rem 1.6rem; background-color: #F6F6F6; color: #1B2D2A; font-size: 1.8rem; font-weight: 800; letter-spacing: 1px;}

/* popup size - 07_5 */
.popup.size_select {bottom: 7.3rem;}
.popup.size_select .inner ul.select_list li {padding: 1.2rem 1.6rem; font-family: 'Pretendard'; font-weight: 600; line-height: 150%; letter-spacing: -0.5px; display: flex; justify-content: space-between;}
.popup.size_select .inner .popup_content ul.select_list li.selected::before {display: none;}
.popup.size_select .inner ul.select_list li .size_cnt {text-align: right; font-size: 1.1rem; font-weight: 500; line-height: 145%;}
.popup .inner .popup_content ul.select_list li.soldout:hover {background-color: #fff;}
.popup.size_select .inner ul.select_list li.soldout {color: #C0C0C0;}


/* header */
.basic_header {width: 100%; padding: 1.9rem 2rem; box-sizing: border-box; background-color: #fff; /*margin-top: 4rem;*/}
.basic_header a figure {width: 1.8rem; height: 1.8rem;}
.basic_header a figure img {width: 100%; height: 100%; object-fit: fill;}
.basic_header .inner {justify-content: space-between;}
.basic_header .inner h2 {text-align: center; color: #222B45; font-size: 1.6rem; font-weight: 700; line-height: normal;}

.basic_header_no_topbar {width: 100%; padding: 1.9rem 2rem; box-sizing: border-box; background-color: #fff; /*margin-top: 4rem;*/}
.basic_header_no_topbar a figure {width: 1.8rem; height: 1.8rem;}
.basic_header_no_topbar a figure img {width: 100%; height: 100%; object-fit: fill;}
.basic_header_no_topbar .inner {justify-content: space-between;}
.basic_header_no_topbar .inner h2 {text-align: center; color: #222B45; font-size: 1.6rem; font-weight: 700; line-height: normal;}

.basic_header_only_topbar {width: 100%; padding: 1.9rem 2rem; box-sizing: border-box; background-color: #fff; /*margin-top: 4rem;*/}
.basic_header_only_topbar a figure {width: 1.8rem; height: 1.8rem;}
.basic_header_only_topbar a figure img {width: 100%; height: 100%; object-fit: fill;}
.basic_header_only_topbar .inner {justify-content: space-between;}
.basic_header_only_topbar .inner h2 {text-align: center; color: #222B45; font-size: 1.6rem; font-weight: 700; line-height: normal;}

.more_header {border-bottom: 1px solid #EAEAEA;}
.enjoy_header {border-bottom: 1px solid #EAEAEA;}
.enjoy_title {display: flex; flex-direction: column; gap: 0.8rem;}

/* 01_1_intro.html */
.intro_main {height: 100svh; max-width: 600px; overflow-y: hidden;}
.intro_main .intro_inner {width: 100%; height: 100%; display: flex;}
.intro_main .intro_inner .img_area {width: 56%; height: 100%; display: flex; flex-direction: column; position: relative;}
.intro_main .intro_inner .img_area .img_top {width: 100%; height: 62%;}
.intro_main .intro_inner .img_area .img_top figure {width: 100%; height: 100%; overflow: hidden;}
.intro_main .intro_inner .img_area .img_top figure img {width: 100%; height: 100%; object-fit: cover; object-position: 109% -3rem; transform: scale(1.9); filter: brightness(60%) grayscale(100%);}

.intro_main .intro_inner .img_area .img_bottom {width: 100%; height: 38%; position: relative; background-color: #000; overflow: hidden;}
.intro_main .intro_inner .img_area .img_bottom figure {width: 20rem; height: 19.5rem; position: absolute; bottom: 0; right: -8rem;}
.intro_main .intro_inner .img_area .img_bottom figure img {width: 100%; height: 100%; object-fit: cover; filter: brightness(60%) grayscale(100%);}

.intro_main .intro_inner .logo_txt {position: absolute; bottom: 6.3rem; left: 3.5rem;}

.intro_main .intro_inner .logo_area {width: 44%; height: 100%; background-color: #000; display: flex; justify-content: center; align-items: center;}
.intro_main .intro_inner .logo_area h1 {width: 11rem;}
.intro_main .intro_inner .logo_area h1 figure {width: 100%; height: 100%;}
.intro_main .intro_inner .logo_area h1 figure img {width: 100%; height: 100%; object-fit: cover;}


/* 01_2_login.html */
/*.login_main {background-color: #000; width: 100%; height: 100svh;}*/
.login_main {background-color: #000; width: 100%;}
/*.login_main .login_inner {width: calc(100% - 7.2rem); height: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8rem;}*/
.login_main .login_inner {width: calc(100% - 7.2rem); margin: 0 auto; display: flex; flex-direction: column; align-items: center;}
/*.login_main .login_inner .login_top {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.7rem;}*/
.login_main .login_inner .login_top {display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 1rem;}
.login_main .login_inner .login_top span {margin-bottom: 0.9rem; color: #fff; padding: 0.6rem 1.2rem 0.4rem 1.2rem; box-sizing: border-box; background-color: #242424; border-radius: 10rem; font-size: 1.6vh; font-weight: 400; line-height: 138%;}
.login_main .login_inner .login_top h1 {width: 27rem; height: 4.5rem; margin-top: 2rem; margin-bottom: 2.2rem;}
.login_main .login_inner .login_top h1 figure {width: 100%; height: 100%;}
.login_main .login_inner .login_top h1 figure img {width: 100%; object-fit: cover;}
.login_main .login_inner .login_top p {color: #fff; font-size: 1.5rem; font-weight: 400; line-height: 173%;}

.login_main .login_inner .login_middle {width: 100%;}
.login_main .login_inner .login_middle ul {display: flex; flex-direction: column; gap: 1.8vh; width: 100%;}
.login_main .login_inner .login_middle ul li {width: 100%;}
.login_btn {width: 100%; align-items: center; gap: 1rem; border-radius: 10rem; padding: 1.3vh 2.7rem;}
.login_btn span {width: 90%; color: #222B45; font-size: 2vh; font-weight: 600; line-height: normal; letter-spacing: 0.389px;}

.login_main .login_inner .login_bottom a {text-decoration: underline; color: #BBB; font-size: 1.5rem; font-weight: 700; line-height: 173%;}


/* 02_1.html */
.terms_main .terms_inner {width: calc(100% - 4rem); margin: 0 auto; margin-top: 3.8rem; display: flex; flex-direction: column; gap: 3.8rem; position: relative;}
.terms_main .terms_inner .terms_list {display: flex; flex-direction: column; gap: 2.4rem;}
.terms_main .terms_inner .terms_list li {border-bottom: 1px solid #ABA9A33D; padding-bottom: 2.4rem;}
.terms_main .terms_inner .terms_list li:last-child {border: none;}
.terms_main .terms_inner .terms_list li .chk_group {display: flex; flex-direction: column; gap: 2.4rem;}
.terms_main .terms_inner .terms_list li .chk_box {display: flex; justify-content: space-between; align-items: center;}

.title {display: flex; flex-direction: column; gap: 0.8rem;}
.title h2 {color: #000; font-size: 2.2rem; font-weight: 700; line-height: normal; letter-spacing: -0.44px;}
.title h6 {color: #222B45; font-size: 1.6rem; font-weight: 700; line-height: normal; letter-spacing: -0.44px;}
.title p {font-size: 1.4rem; color: #2E3640; font-weight: 400; line-height: normal;}
.error_txt {color: #EF7E33;}
.top_logo {text-align: center; margin-top: 2.5rem;}
.illu_img {text-align: center; margin-top: 4rem;}

/* 02_4.html */
.terms_main .terms_inner .terms_box {margin-top: 3.8rem; padding-bottom: 8rem;}
.terms_main .terms_inner .terms_box ul {display: flex; flex-direction: column; row-gap: 0.4rem;}
.terms_main .terms_inner .terms_box ul li {margin-bottom: 1rem;}
.terms_main .terms_inner .terms_box ul li:first-child {margin-bottom: 0;}
.terms_main .terms_inner .terms_box ul li h3 {color: #2E3640; font-size: 1.4rem; font-weight: 800; line-height: normal;}
.terms_main .terms_inner .terms_box ul li p {color: #2E3640; font-size: 1.4rem; font-weight: 400; line-height: normal;}


/* 03_1.html */
.title .title_sub {font-weight: 600; font-size: 1.4rem; line-height: 2rem; letter-spacing: 0;}
.title h2 {display: flex; align-items: center;}
.point {padding: 0.4rem 0.8rem; background-color: #A5A5A5; border-radius: 100px; margin-left: 0.8rem; color: #FFF; font-size: 1.5rem; font-weight: 700; line-height: 138%;}

.process ul {display: flex; gap: 6.7rem; position: relative; justify-content: space-between; padding: 0 0.5rem; align-items: center;}
.process ul::after {content: ''; width: 100%; height: 1px; background-color: #EAECEF; position: absolute; top: 50%; transform: translateY(-50%); left: 0;}
.process ul li {position: relative;}
.process ul li .circle_gray {width: 0.8rem; height: 0.8rem; background-color: #E7E7E7; border-radius: 100%; }
.process ul li.active .circle_gray {width: 1.2rem; height: 1.2rem;}
.process ul li .circle_black {display: none; width: 0.8rem; height: 0.8rem; background-color: #000; border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;}
.process ul li.active .circle_black {display: block;}

.sr_only {display: none;}


/* 메인 시작 - 포인트 부분 */
.main_header {
    position: fixed; 
    top: 0; 
    /*left: 0; 
    width: 100%; */
    left: 50%;
    transform: translateX(-50%);
    
    background-color: #fff; 
    padding: 0rem 2rem 1.4rem 2rem; 
    box-sizing: border-box; 
    
    
    max-width: 600px;
    width: 100%;
    z-index: 300;
}
.main_header .inner {display: flex; justify-content: space-between; align-items: center;}
.main_header .inner h1.logo {width: 9rem;}
.main_header .inner h1.logo figure {width: 100%; height: 100%; display: flex;}
.main_header .inner h1.logo figure img {width: 100%; height: 100%; object-fit: cover;}
.main_header .inner .point_area {display: flex; align-items: center; color: #fff; gap: 1rem;}
.main_header .inner .point_area .svg_container {display: flex; align-items: center; color: #fff; gap: 0.4rem;}
.main_header .inner .point_area .svg_container span.point_txt {text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); font-family: 'Archivo'; font-size: 1.4rem; font-weight: 700; line-height: normal; letter-spacing: -0.28px; text-transform: uppercase;}
.main_header .inner .point_area button {background-color: transparent;}
.main_header .inner .point_area figure {width: 20px; height: 20px; display: flex; }
.main_header .inner .point_area figure img {width: 100%; height: 100%; object-fit: fill;}
.main_header .notice_banner { display:block; gap: 6px; padding: 0.8rem 1.4rem; margin: 0rem calc(-2rem - 2px) calc(-1.4rem - 2px);}
/*.main_header .notice_banner::after {content: ''; position: absolute; top: 0.9rem; right: 1.4rem; width: 1.6rem; height: 1.6rem; background: url('/assets/Web/img/icon/icon_arr_link.svg') no-repeat center center / 100% auto;}*/
.main_header .notice_banner img {vertical-align: middle;}
.main_header .notice_banner .notice_banner_txt {color: #000; font-size: 1.2rem; line-height: 1.8rem; vertical-align: middle;}

/* 필터 08 (07_1에 있음) */
.filter_wrap {position: absolute; top: -48px; right: 0; background-color: #fff; width: 80vw; z-index: 203; height: 110svh; overflow-y: auto;}
.filter_wrap .filter_inner {padding: 2.4rem; width: 100%; box-sizing: border-box;}
.filter_wrap .filter_title {display: flex; justify-content: space-between;}
.filter_wrap .filter_title h5 {font-size: 1.6rem; font-weight: 700; line-height: normal; color: #222B45;}
.filter_wrap .filter_title button {background-color: transparent;}

.filter_container {margin-top: 3.7rem; display: flex; flex-direction: column; row-gap: 1.6rem;}
.filter_container .filter_box {display: flex; flex-direction: column; row-gap: 0.8rem;}
.filter_container .filter_box .filter_category {display: flex; justify-content: space-between; align-items: center;}
.filter_container .filter_box .filter_category h6 {color: #5B5954; font-size: 1.5rem; font-weight: 700; line-height: 173%;}
.filter_container .filter_box .filter_content {display: flex; flex-direction: column; row-gap: 1.2rem; background-color: #F3F3F3; border-radius: 12px; padding: 1.2rem;}

.filter_price {display: flex; justify-content: flex-start; align-items: center; gap: 0.8rem;}
.filter_price input {width: 11.4rem;}
.filter_price span {font-size: 1.5rem; color: #5B5954; font-weight: 700; line-height: 173%;}

.input_area.search {display: flex; justify-content: flex-start; gap: 1.6rem; flex-direction: row;}
.input_area.search .basic_input {width: 80%;}
.input_area.search button.search_btn {border-radius: 8px; background-color: #000; color: #fff; padding: 0.6rem 1.6rem; box-sizing: border-box; font-size: 1.6rem; line-height: 150%; width: 20%;}


/* tutorial 04_1, 04_2 */
.tutorial {background-color: rgba(0, 0, 0, 0.84); width: 100%; height: 100%; z-index: 202; position: fixed; top: 0;left: 0;}
.tutorial_header {background-color: #000; border: 2px solid #000; padding: 1rem 2rem 1.4rem 2rem; box-sizing: border-box; position: fixed; top: 0; left: 0; width: 100%; z-index: 1;}
.tutorial_header .tutorial_inner {display: flex; justify-content: space-between; align-items: center;}
.tutorial_header .tutorial_inner .tutorial_logo {width: 9rem; opacity: 0.2;}
.tutorial_header .tutorial_inner .tutorial_logo figure {width: 100%; height: 100%; display: flex;}
.tutorial_header .tutorial_inner .tutorial_logo figure img {width: 100%; height: 100%; object-fit: cover;}
.tutorial_header .tutorial_inner .point_area {display: flex; align-items: center; color: #fff; gap: 1rem; position: relative;}
.tutorial_header .tutorial_inner .point_area.tutorial_point {opacity: 0.2;}
.tutorial_header .tutorial_inner .point_area .svg_container {display: flex; align-items: center; color: #fff; gap: 0.4rem;}
.tutorial_header .tutorial_inner .point_area .svg_container span.point_txt {text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); font-family: 'Archivo'; font-size: 1.4rem; font-weight: 700; line-height: normal; letter-spacing: -0.28px; text-transform: uppercase;}
.tutorial_header .tutorial_inner .point_area button {background-color: transparent;}
.tutorial_header .tutorial_inner .point_area figure {width: 20px; height: 20px; display: flex; }
.tutorial_header .tutorial_inner .point_area figure img {width: 100%; height: 100%; object-fit: fill;}
.tutorial_header .tutorial_inner button.close_btn {background-color: transparent; position: absolute; top: 0.1rem; left: 1.8rem; width: 42px; height: 42px;}
.tutorial_header .tutorial_inner button.close_btn img {width: 100%; height: 100%; object-fit: fill;}
.tutorial_header .tutorial_inner .point_area .svg_container.first {position: absolute; right: 4rem; top: 2.8rem;}
.tutorial_header .tutorial_inner .point_area .svg_container .first_inner {position: relative; width: 16rem;}
.tutorial_header .tutorial_inner .point_area .svg_container .first_inner .tutorial_txt_01 {position: absolute; top: 0; left: 1rem; font-family: 'GowunBatang-Regular'; font-size: 1.8rem; font-weight: bold;}
.tutorial_header .tutorial_inner .point_area .svg_container .first_inner svg {position: absolute; top: 0; right: 0;}

.bottom_menu.b_tutorial .inner.second button:nth-child(3) {opacity: 0.2;}
.bottom_menu.b_tutorial .inner.second button:nth-child(4) {opacity: 0.2;}
.bottom_menu.b_tutorial .inner.thirds button:nth-child(2) {opacity: 0.2;}
.bottom_menu.b_tutorial .inner.thirds button:nth-child(4) {opacity: 0.2;}
.bottom_menu.b_tutorial .inner {position: relative;}
.bottom_menu.b_tutorial .svg_container.second {position: absolute; bottom: 8rem; left: 4rem;}
.bottom_menu.b_tutorial .svg_container.second .second_inner {position: relative; width: 24rem;}
.bottom_menu.b_tutorial .svg_container.second .second_inner .tutorial_txt_02 {position: absolute; bottom: 7rem; left: 2rem; font-family: 'GowunBatang-Regular'; font-size: 1.8rem; font-weight: bold; color: #fff; line-height: 144%; letter-spacing: -1px;}
.bottom_menu.b_tutorial .svg_container.second .second_inner svg {position: absolute; bottom: 0; left: 0;}

.bottom_menu.b_tutorial .svg_container.thirds {position: absolute; bottom: 8rem; left: 4rem;}
.bottom_menu.b_tutorial .svg_container.thirds .thirds_inner {position: relative; width: 24rem;}
.bottom_menu.b_tutorial .svg_container.thirds .thirds_inner .tutorial_txt_03 {position: absolute; bottom: 2rem; left: 2rem; font-family: 'GowunBatang-Regular'; font-size: 1.8rem; font-weight: bold; color: #fff; line-height: 144%; letter-spacing: -1px; text-align: right;}
.bottom_menu.b_tutorial .svg_container.thirds .thirds_inner svg {position: absolute; bottom: -2rem; right: 1rem;}


/* 05_1.html */
/*.main {padding-bottom: 8.4rem; margin-top: 4rem;}*/
.main { margin-top: 9rem;}
.main .inner .main_list {display: flex; flex-direction: column; row-gap: 1.2rem;}
.main .inner .main_list a {width: 100%; height: 122.4vw; position: relative;}
.main .inner .main_list a figure.main_img {width: 100%; height: 100%;}
/*.main .inner .main_list a figure.main_img img {width: 100%; height: 100%; object-fit: cover; filter: brightness(70%);}*/
.main .inner .main_list a figure.main_img img {width: 100%; height: 100%; object-fit: cover;}
.main .inner .main_list a .brand_area {position: absolute; top: 4rem; left: 2rem;}
/*.main .inner .main_list a .brand_area .name {color: #fff; font-size: 1.6rem; font-weight: 500; line-height: 100%;}*/
.main .inner .main_list a .brand_area .name {color: #fff; font-size: 1.6rem; font-weight: 500; line-height: 100%;  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); padding: 4px 8px;}
.main .inner .main_list a .badge_area {position: absolute; top: 4rem; left: auto; right: 2rem;}
.main .inner .main_list a .badge_area .bg-label-product {color: #fff; background-color: #ff6f61 !important;}
.main .inner .main_list a .badge_area .bg-label-shortform {color: #fff; background-color: #e84c6c !important;}
.main .inner .main_list a .badge_area .bg-label-event {color: #fff; background-color: #a058f0 !important;}
/*.main .inner .main_list a .txt_area {position: absolute; bottom: 7rem; left: 2rem; right: 2rem;}*/
/*.main .inner .main_list a .txt_area {position: absolute; bottom: 0rem; width: 100%; background-color: rgb(0, 0, 0, 0.2); }*/
.main .inner .main_list a .txt_area {position: absolute; bottom: 0rem; width: 100%; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15); background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(102, 102, 102, 0.00) 100%); }

/*.main .inner .main_list a .txt_area .txt_title {display: flex; flex-direction: column; gap: 1rem; text-align: left;}*/
.main .inner .main_list a .txt_area .txt_title {display: flex; flex-direction: column; gap: 1rem; text-align: left; margin: 2rem;}
.main .inner .main_list a .txt_area .txt_title h3 {color: #fff; font-size: 3.2rem; font-weight: 700; line-height: 100%;}
/*.main .inner .main_list a .txt_area .txt_title p {color: #fff; font-size: 1.8rem; font-weight: 700; line-height: 120%;}*/
.main .inner .main_list a .txt_area .txt_title p {color: #fff; font-size: 1.8rem; font-weight: 700; line-height: 120%; max-height: 240%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; max-width: 270px; white-space: normal; word-break: break-word;}

/*.main .inner .main_list a .txt_info {position: relative; display: flex; justify-content: space-between; bottom: 4rem;}*/
.main .inner .main_list a .txt_info {position: relative; display: flex; justify-content: space-between; margin-top: 0rem; margin-bottom: 2rem;}
.main .inner .main_list a .txt_info .txt_info_first {margin-left: 2rem; gap: 1.3rem;}
.main .inner .main_list a .txt_info .txt_info_second {margin-right: 2rem; gap: 1.3rem;}
.txt_info_detail {display: flex; gap: 0.9rem; align-items: center; box-sizing: border-box;}
.txt_info_detail figure {display: flex; justify-content: center; align-items: center;}
.txt_info_detail figure img {width: 100%; height: 100%; object-fit: fill;}
.txt_info_detail span {color: #fff; font-size: 1.2rem; font-weight: 400; line-height: 110%;}


/* 05_2.html */
.detail_main {padding-bottom: 8.4rem;}
.detail_main .detail_header {position: fixed; top: 0; left: 50%; transform: translateX(-50%); max-width: 600px; width: 100%; padding: 2rem; z-index: 10; box-sizing: border-box; transition: background-color 0.3s ease; background-color: transparent;}
.detail_main .scrolled {background-color: rgba(100, 100, 100, 0.2); height: 66px;}
.detail_main .detail_header {position: fixed; top: 0; left: 50%; transform: translateX(-50%); max-width: 600px; width: 100%; padding: 2rem; z-index: 10; box-sizing: border-box;}
.detail_main .detail_header .inner {display: flex; justify-content: space-between;}
.detail_main .swiper {width: 100%; max-height: 1080px; height: 150vw;}
.detail_main .swiper .swiper-wrapper .swiper-slide {position: relative;}
.detail_main .swiper .swiper-wrapper .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}

.detail_main .swiper .swiper-wrapper .swiper-slide .slide_txt_area {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; row-gap: 2.1rem; width: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(102, 102, 102, 0.00) 100%);}
.detail_main .swiper .swiper-wrapper .swiper-slide .slide_txt_area .inner {padding: 0 2.4rem 2.7rem 2.4rem;}
.detail_main .swiper .swiper-wrapper .swiper-slide .slide_txt_area .slide_txt {display: flex; flex-direction: column; row-gap: 1.8rem; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);}
.detail_main .swiper .swiper-wrapper .swiper-slide .slide_txt_area .slide_txt .slide_txt_sub {font-size: 1.4rem; color: #fff; font-weight: 700; line-height: normal;}
/*.detail_main .swiper .swiper-wrapper .swiper-slide .slide_txt_area .slide_txt .slide_txt_title {font-size: 2.4rem; color: #fff; font-weight: 700; line-height: 158%;}*/
.detail_main .swiper .swiper-wrapper .swiper-slide .slide_txt_area .slide_txt .slide_txt_title {font-size: 2.4rem; color: #fff; font-weight: 700; line-height: 158%; max-height: 316%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}

.detail_main .swiper .swiper-wrapper .swiper-slide .slide_txt_area .slide_cnt_area {display: flex; margin-top: 1.4rem;}
.detail_main .swiper .swiper-wrapper .swiper-slide .slide_txt_area .slide_cnt_area .slide_cnt {display: flex; padding: 1rem; box-sizing: border-box; gap: 0.9rem; align-items: center; color: #fff; padding-left: 0;}

.visual_section .mySwiper .swiper-pagination {left: 2.4rem; bottom: 21rem; width: fit-content;}
.visual_section .mySwiper .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet {border-radius: 0 !important; background-color: #000; width: 2rem; height: 3px; margin: 0;}
.visual_section .mySwiper .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {color: #fff; background-color: #fff; opacity: 1;}

.prefer_section {width: 100%;}
.prefer_section .inner {width: calc(100% - 4rem); padding: 3.2rem 0; margin: 0 auto; display: flex; flex-direction: column; row-gap: 1.2rem; border-bottom: 1px solid #E3E3E3;}
.prefer_section .inner h3 {color: #2B2B2B; font-size: 1.6rem; font-weight: 700; line-height: 138%;}
.prefer_section .inner .prefer_box {border-radius: 0 0 16px 16px; overflow: hidden;}

.prefer_section .inner .prefer_box .tab .tab_nav {display: flex; justify-content: space-between; box-sizing: border-box; border-radius: 16px 16px 0 0; border: 1px solid #E0E0E0; border-bottom: none;}
.prefer_section .inner .prefer_box .tab .tab_nav.active {border-bottom: 1px solid #E0E0E0; background-color: #F8F8F8;}
.prefer_section .inner .prefer_box .tab .tab_nav li {padding: 1.8rem; border-radius: 0 16px 0 0; width: 50%;}
.prefer_section .inner .prefer_box .tab .tab_nav li:first-child.active {border-radius: 16px 16px 0 0; box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, 0.04); background-color: #fff; z-index: 1;}
.prefer_section .inner .prefer_box .tab .tab_nav li:last-child.active {border-radius: 16px 16px 0 0; box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.04); background-color: #fff; z-index: 1;}
.prefer_section .inner .prefer_box .tab .tab_nav li a .tab_txt {display: flex; align-items: center; gap: 1rem;}
/* .prefer_section .inner .prefer_box .tab .tab_nav li a .tab_txt .gender {padding: 0.1rem 1rem; box-sizing: border-box; background-color: #F4F4F4; border-radius: 40px; color: #747373; font-size: 1.8rem; font-weight: 400; line-height: 138%; text-align: center; width: 3.3rem; height: 3.3rem; display: flex; align-items: center;} */
.prefer_section .inner .prefer_box .tab .tab_nav li a .tab_txt .gender {padding: 0.1rem 1rem; box-sizing: border-box; border-radius: 40px; color: #747373; font-size: 1.8rem; font-weight: 400; line-height: 138%; text-align: center; width: 3.3rem; height: 3.3rem; display: flex; align-items: center;}
.prefer_section .inner .prefer_box .tab .tab_nav li a .tab_txt .txt {color: #111; font-size: 1.6rem; font-weight: 800; line-height: normal;}
.prefer_section .inner .prefer_box .tab .tab_nav li a .tab_txt .txt .per {color: #747373; font-size: 1rem; font-weight: 600; line-height: normal;}

.prefer_section .inner .prefer_box .tab .tab_container {border: 1px solid #E0E0E0; border-top: none; border-bottom: none;}
.prefer_section .inner .prefer_box .tab .tab_container .tab_chart_dougnut {display: flex; gap: 1.6rem; align-items: center; justify-content: center; padding: 1.6rem 0; border-bottom: 1px solid #E3E3E3; margin: 0 1.2rem;}
.prefer_section .inner .prefer_box .tab .tab_container .tab_chart_dougnut .canvas_area {width: 36.8vw;}

.prefer_section .inner .prefer_box .tab .tab_container .tab_chart_bar {width: 100%; height: 100%;}
.prefer_section .inner .prefer_box .tab .tab_container .tab_chart_bar .canvas_area {padding: 1.9rem; box-sizing: border-box; height: 300px;}

.prefer_section .inner .prefer_box .tab_btn_area {background-color: #F8F8F8; border: 1px solid #E0E0E0; border-radius: 0 0 16px 16px; border-top: none;}
.prefer_section .inner .prefer_box .tab_btn_area a {padding: 1.4rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 1.2rem; color: #747373; font-size: 1.2rem; font-weight: 400; line-height: 138%;}

.prefer_section .inner .prefer_btn_area {margin: 0.4rem auto; border-radius: 100px; background: #4F4F4F; color: #fff; padding: 0.8rem 2.6rem; box-sizing: border-box; width: fit-content;}
.prefer_section .inner .prefer_btn_area a {display: block; font-size: 1.2rem; font-weight: 400; line-height: 138%; display: flex; gap: 1rem; align-items: center;}

.prefer_section .inner .info_area {display: flex; justify-content: center; align-items: center; gap: 0.7rem;}
.prefer_section .inner .info_area .svg_cover {background-color: #CBCBCB; width: 16px; height: 16px; border-radius: 40px; text-align: center; display: flex; justify-content: center; align-items: center;}
.prefer_section .inner .info_area button {color: #747373; font-size: 1.2rem; font-weight: 400; line-height: 138%; text-decoration: underline; background-color: #fff;}

.product_section .inner {margin: 3.2rem 0;}
.product_section .inner .product_title {width: calc(100% - 4.8rem); margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
.product_section .inner .product_title h3 {color: #2B2B2B; font-size: 1.6rem; font-weight: 700; line-height: 138%;}
.product_section .inner .product_title a {display: block;}
.product_section .inner .product_title figure {width: 100%; height: 100%;}
.product_section .inner .product_title figure img {width: 100%; height: 100%; object-fit: contain;}

.product_section .inner .product_container ul li .product_one {display: flex; justify-content: flex-start; width: 100%; gap: 2rem; margin-top: 2.8rem;}
.product_section .inner .product_container ul li:nth-child(even) .product_one {justify-content: flex-end;}
.product_section .inner .product_container ul li:nth-child(even) .product_one figure {order: 2;}
.product_section .inner .product_container ul li .product_one figure {width: 48.22vw; height: 41vw; position: relative; max-width: 345px; max-height: 300px;}
.product_section .inner .product_container ul li .product_one figure img {width: 100%; height: 100%; object-fit: cover;}

.product_section .inner .product_container ul li .product_one .product_info {display: flex; flex-direction: column; justify-content: center; align-items: left; gap: 1rem; font-family: "Space Grotesk", sans-serif; color: #2B2B2B; line-height: 138%; }
.product_section .inner .product_container ul li .product_one .product_info .product_name {font-size: 1.4rem; font-weight: 500;}
.product_section .inner .product_container ul li .product_one .product_info .product_point {font-weight: 700; margin-bottom: 0.8rem;}
.product_section .inner .product_container ul li .product_one .product_info a {font-weight: 400; font-size: 1rem; display: flex; gap: 0.7rem; align-items: center;}

/*.brand_section .inner {width: calc(100% - 4rem); margin: 0 auto; border-top: 1px solid #E3E3E3; padding: 3.2rem 0 1.2rem 0;}*/
/*.brand_section .inner h3 {color: #2B2B2B; font-size: 1.6rem; font-weight: 700; line-height: 138%; margin-bottom: 1rem;}*/
/*.brand_section .inner p {color: #2B2B2B; font-size: 1.4rem; font-weight: 300; line-height: 138%; margin-bottom: 1.3rem;}*/
/*.brand_section .inner figure {width: 40vw; margin-bottom: 1.8rem; max-width: 150px;}*/
/*.brand_section .inner figure img {width: 100%; height: 100%; object-fit: fill;}*/


.brand_section .inner {width: calc(100% - 4rem); margin: 0 auto; border-top: 1px solid #E3E3E3; padding: 3.2rem 0 1.2rem 0;}
.brand_section .inner .logo_warp {margin-bottom: 1.8rem; border-radius: 8px; border: 1px solid #D9D9D9; padding: 1.8rem 5rem; display: grid; place-items: center;}
.brand_section .inner .brand_name {color: #2B2B2B; font-size: 1.4rem; font-weight: 700; line-height: 120%; margin-bottom: 2.5rem; text-align: center;}
.brand_section .inner .store_btn_area {margin: 2.8rem auto; border-radius: 6px; background: #ECECEC; color: #333333; padding: 1.3rem 2.4rem; box-sizing: border-box; width: fit-content;}
.brand_section .inner .store_btn_area a {display: block; font-size: 1.2rem; font-weight: 400; line-height: 138%; display: flex; gap: 1rem; align-items: center;}
.brand_section .inner h3 {color: #2B2B2B; font-size: 1.6rem; font-weight: 700; line-height: 138%; margin-bottom: 1rem;}
.brand_section .inner p {color: #555555; font-size: 1.4rem; font-weight: 300; line-height: 138%; margin-bottom: 1.3rem;}
.brand_section .inner figure {width: 200px; height: 40px; text-align: center;}
.brand_section .inner figure img {width: 100%; height: 100%; object-fit: scale-down;}
/*.brand_section .inner .map_box {margin-bottom: 1.0rem; border-radius: 8px; border: 1px solid #D9D9D9; padding: 10rem 5rem; display: grid; place-items: center;}*/

.mb_r15 {margin-bottom: 1.5rem;}
.mt_r2 {margin-bottom: 2rem;}


.product_info_section .inner {width: calc(100% - 4rem); margin: 0 auto; border-top: 1px solid #E3E3E3; padding: 3.2rem 0 1.2rem 0;}
.product_info_section .inner h3 {color: #2B2B2B; font-size: 1.6rem; font-weight: 700; line-height: 138%; margin-bottom: 1rem;}
.product_info_section .inner p {color: #2B2B2B; font-size: 1.4rem; font-weight: 300; line-height: 138%; margin-bottom: 1.3rem;}
.product_info_section .inner figure {width: 40vw; margin-bottom: 1.8rem; max-width: 150px;}
.product_info_section .inner figure img {width: 100%; height: 100%; object-fit: fill;}

.delivery_section .inner {width: calc(100% - 4rem); margin: 0 auto; border-top: 1px solid #E3E3E3; padding: 3.2rem 0 1.2rem 0;}
.delivery_section .inner h3 {color: #2B2B2B; font-size: 1.6rem; font-weight: 700; line-height: 138%; margin-bottom: 1rem;}
.delivery_section .inner p {color: #2B2B2B; font-size: 1.4rem; font-weight: 300; line-height: 138%; margin-bottom: 1.3rem;}
.delivery_section .inner figure {width: 40vw; margin-bottom: 1.8rem; max-width: 150px;}
.delivery_section .inner figure img {width: 100%; height: 100%; object-fit: fill;}


/* 애니메이션 05_5 (05_4에 good버튼 클릭시 발생) */
.animate_box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 101;}
.animate_box .inner {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.animate_box .inner figure {width: 48px; height: 48px;}
.animate_box .inner figure img {width: 100%; height: 100%; object-fit: fill;}
.animate_box .inner h5 {color: #FFC628; font-size: 3.2rem; font-weight: 900; line-height: normal; letter-spacing: 0.389px;}

.animate_box .inner .coin_area {position: relative; width: 50px; height: 50px; animation: flipAnimation 0.8s ease-in-out 1; /* 애니메이션을 0.8초에 한 번 반복 */}
.animate_box .inner .coin_area figure {position: absolute; width: 100%;  height: 100%; backface-visibility: hidden; /* 뒷면이 보이지 않도록 설정 */}
.animate_box .inner figure:nth-child(2) {transform: rotateY(180deg); /* 두 번째 이미지(동전)를 180도 회전 */}

@keyframes flipAnimation {
    0% {transform: rotateX(30deg) rotateY(30deg) translateY(0);}
    25% {transform: rotateX(90deg) rotateY(30deg) translateY(25px);}
    50% {transform: rotateX(180deg) rotateY(30deg) translateY(50px);}
    75% {transform: rotateX(90deg) rotateY(30deg) translateY(25px);}
    100% {transform: rotateX(0) rotateY(30deg) translateY(0);}
}

.animate_box .animate_point {position: relative;}
.animate_box h5.ap01 {animation: h5Animation 2s ease-in-out;}
.animate_box h5.ap02 {animation: h5Animation2 2s ease-in-out; position: absolute; top: 0; left: 0; z-index: 0; opacity: 0.8;}

@keyframes h5Animation {
    0% {opacity: 0; transform: translateY(20px);}
    50% {opacity: 0.8; transform: translateY(0);}
    100% {opacity: 1; transform: translateY(0);}
}
@keyframes h5Animation2 {
    0% {opacity: 0; transform: translateY(20px);}
    50% {opacity: 0.5; transform: translateY(10px);}
    100% {opacity: 0; transform: translateY(0);}
}


/* 공유하기 06 */
.detail_main.share {padding-bottom: 0;}


/* 포인트샵 07_1 */
/*.main.point_shop {margin-top: 0rem;}*/
.main.point_shop .inner {box-sizing: border-box;}
.point_shop_list {padding: 1.4rem; display: flex; flex-wrap: wrap; gap: 1.2rem; row-gap: 3.2rem;}
.point_shop_list li a {width: 42.26vw; display: flex; flex-direction: column; row-gap: 1.2rem;}
.point_shop_list li a > figure {width: 100%; height: 66.5vw;}
.point_shop_list li a > figure img {width: 100%; height: 100%; object-fit: cover;}
.point_shop_list li a .shop_txt {display: flex; flex-direction: column; row-gap: 0.8rem;}
.point_shop_list li a .shop_txt .brand_name {color: #989CA0; font-size: 1rem; font-weight: 500; line-height: normal; letter-spacing: -0.4px;}
.point_shop_list li a .shop_txt h6 {color: #1C1C26; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.3px; text-transform: uppercase;}
.point_shop_list li a .shop_txt h6.point_price {font-size: 1.8rem; font-family: 'Archivo'; font-weight: 700; letter-spacing: -0.72px;text-align: right;}
.point_shop_list li a .shop_txt .shop_txt_area {display: flex; align-items: center; gap: 1.6rem;}
.point_shop_list li a .shop_txt .shop_txt_area .shop_prefer {display: flex; align-items: center; gap: 0.6rem; color: #989CA0; font-size: 1.2rem; font-weight: 400; /* line-height: 133%; */ position: relative;}
.point_shop_list li a .shop_txt .shop_txt_area .shop_prefer.dot::after {content:'·'; position: absolute; top: 50%; transform: translateY(-50%); right: -0.9rem; color: #989CA0;}
/*.text-multiline-ellipsis {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.2em; max-height: 2.4em; min-height: 2.4em; word-break: break-word;}*/
.text-multiline-ellipsis {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.2em; max-height: 2.4em; word-break: break-word;}

/* =========================
   공통 (1행 + 2행 공통)
========================= */
.exhibition_list {
    padding: 1.4rem;
    gap: 1.2rem;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
}

/* 스크롤바 숨김 */
.exhibition_list::-webkit-scrollbar {
    display: none;
}

/* =========================
   1행 캐러셀 (기본)
========================= */
.exhibition_list {
    display: flex;
    flex-wrap: nowrap;
}

.exhibition_list li {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* 카드 크기 */
.exhibition_list li a {
    width: calc((100vw - 2.8rem - (1.2rem * 1.3)) / 2.3);
    display: flex;
    flex-direction: column;
    row-gap: 1.2rem;
}

/* =========================
   2행 캐러셀
========================= */
.exhibition_list.exhibition_list_2row {
    display: grid; /* flex 덮어쓰기 */
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    justify-content: flex-start;
}

/* 2행일 때 li 크기 */
.exhibition_list.exhibition_list_2row li {
    width: calc((100vw - 2.8rem - (1.2rem * 1.3)) / 2.3);
}

/* ⭐ 핵심: 2행에서는 반드시 100% */
.exhibition_list.exhibition_list_2row li a {
    width: 100%;
}

/* =========================
   카드 내부 UI (공통)
========================= */
.exhibition_list li a > figure {
    width: 100%;
    height: 60vw;
}

.exhibition_list li a > figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.8rem;
}

.exhibition_list li a .shop_txt {
    display: flex;
    flex-direction: column;
    row-gap: 0.8rem;
}

.exhibition_list li a .shop_txt .brand_name {
    color: #989CA0;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.4px;
}

.exhibition_list li a .shop_txt h6 {
    color: #1C1C26;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.3px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.exhibition_list li a .shop_txt .shop_txt_area {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.exhibition_list li a .shop_txt .shop_txt_area .shop_prefer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #989CA0;
    font-size: 1.2rem;
    position: relative;
}

.exhibition_list li a .shop_txt .shop_txt_area .shop_prefer.dot::after {
    content: '·';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -0.9rem;
    color: #989CA0;
}

/* 포인트샵 상세 - 7_2 */
.detail_main .slide_cnt_area {position: relative;}
.detail_main .slide_cnt_area .remain_area {border-radius: 8px; border: 1px solid #fff; color: #fff; padding: 0.6rem 0.6rem 0.2rem 0.6rem; text-align: center; display: flex; flex-direction: column; position: absolute; bottom: -1rem; right: 0;}
.detail_main .slide_cnt_area .remain_area span {font-size: 1.1rem; font-weight: 400; line-height: 145%;}
.detail_main .slide_cnt_area .remain_area .remain_num {font-size: 1.6rem; font-weight: 400;}
.detail_main .slide_cnt_area .remain_area .remain_num .cnt {font-size: 1.6rem; font-weight: 800;}
.detail_main .slide_cnt_area .remain_area .remain_num .total {font-size: 1.2rem; font-weight: 800;}

.btm_hpbb_v2 .btn_style_01.md {width: 35%;}
.btm_hpbb_v2 .btn_style_01.sm {width: 32%; padding: 0.6rem 0;}
.bottom_menu.btm_hpbb_v2 .inner .bottom_point {width: 56%;}

/* 7-3의 팝업 */
.alert_v2 .txt_box {background-color: #F6F6F6; border-radius: 12px; padding: 1.3rem 0.7rem; box-sizing: border-box; width: 100%; text-align: center;}
.alert_v2 .txt_box h6 {color: #222B45; font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem;}
.alert_v2 .txt_box ul {display: flex; flex-direction: column; justify-content: space-between; row-gap: 0.4rem;}
.alert_v2 .txt_box ul li {display: flex; justify-content: space-between; color: #2E3640; font-size: 1.4rem; font-weight: 400; line-height: 142%;}
.alert_v2 .txt_box ul li span {width: 25%;}
.alert_v2 .txt_box ul li span.date {width: 50%;}


/* 주문하기 07_6 */
.order_main {padding-bottom: 10rem;}
.order_main .order_inner {width: calc(100% - 4rem); margin: 0 auto; margin-top: 1.6rem; display: flex; flex-direction: column; row-gap: 2.8rem;}
.order_main .title {margin-bottom: 0.2rem;}
.order_main .title h2 {color: #222B45; font-size: 2.4rem; font-weight: 600; line-height: normal; letter-spacing: 0.48px;}
.order_main .order_container {position: relative;}
.order_main .order_container h5 {color: #5B5954; font-size: 1.5rem; font-weight: 700; line-height: 173%; margin-bottom: 1.2rem;}
.order_main .order_option_box {display: flex; flex-direction: column; row-gap: 1rem;}
.order_main .order_option_row {display: flex; flex-direction: column; padding: 1.2rem 1.6rem; background-color: #F8F8F8; border-radius: 12px;}
.order_main .order_option_row.line {display: flex; flex-direction: column; row-gap: 1.3rem;}
.order_main .order_container .row_line {position: absolute; bottom: 0; left: -2rem; width: calc(100% + 4rem); height: 4px; background-color: #EBEBEB;}
.order_main .input_container {display: flex; flex-direction: column; row-gap: 1.2rem;}
.order_main .input_box {display: flex; flex-direction: column; row-gap: 0.6rem;}
.point_link_btn {border: 1px solid #EF7E33; border-radius: 0.8rem; padding: 1.1rem; text-align: center; color: #FA582F; font-size: 1.4rem; line-height: 2rem; background: url("/assets/Web/img/icon/icon_arr.svg") no-repeat calc(100% - 2rem + 1px) center;}
.point_link_btn strong {font-weight: 600;}

/* 더보기-주문내역에서도 사용하고 있음 */
.order_product {display: flex; gap: 1rem; margin-bottom: 1.2rem; align-items: center;}
.order_brand_name {color: #747373; font-size: 1.2rem; font-weight: 300; line-height: normal;}
.product_name {color: #2E2A28; font-size: 1.4rem; font-weight: 700; line-height: normal;}
.option_type_n {color: #888888; font-size: 1.2rem; font-weight: 300; line-height: normal;}
.order_product figure {width: 64px; height: 64px; border-radius: 4px; overflow: hidden;}
.order_product figure img {width: 100%; height: 100%; object-fit: cover;}
.order_product p span {display: block; margin:0.7rem 0rem;}
.order_option_one li span {margin:0.7rem 0rem;}
.order_option_one .order_info li {margin:0.7rem 0rem;}
.order_option_one .point_use_info ul { display: inline-block;}
.order_option_one {display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;}
.order_option_one .option_type {color: #888; font-size: 1.4rem; font-weight: 700; line-height: normal;}
.order_option_one .option_type.type02 {color: #2E2A28;}
.order_option_one .option_cnt {color: #2E2A28; font-size: 1.4rem; font-weight: 600; line-height: normal; letter-spacing: 1px; display: flex; align-items: center; gap: 1.2rem;}
.option_price {color: #2E2A28; font-size: 1.4rem; font-weight: 600; line-height: normal; letter-spacing: 1px; gap: 1.2rem;}
.option_separate {color: #555555; font-size: 1.4rem; font-weight: 300; line-height: normal; letter-spacing: 1px; gap: 1.2rem;}
.option_num {color: #2E2A28; font-size: 1.4rem; font-weight: 600; line-height: normal; letter-spacing: 1px; gap: 1.2rem;}
.order_option_one .option_cnt.type02 {font-weight: 800;}
.order_option_one .option_cnt.total {color: #FA582F; font-weight: 800;}

/* 공통으로 사용가능하도록 아코디언 형성 */
.accordion {margin-top: 4.8rem;}
.accordion ul li .ac_title {padding: 1.6rem 2rem; box-sizing: border-box; background-color: #F6F6F6; display: flex; justify-content: space-between; align-items: center;}
.accordion ul li .ac_title h6 {color: #AEADAA; font-family: 'Noto Sans KR'; font-size: 1.2rem; font-weight: 500; line-height: 183%;}
.accordion ul li .ac_desc {background-color: #E7E7E7; padding: 1rem 2rem; box-sizing: border-box;}
.accordion ul li .ac_desc p {color: #AEADAA; font-family: 'Noto Sans KR'; font-size: 1.1rem; font-weight: 500; line-height: 145%; margin-bottom: 1rem;}
.accordion ul li .ac_desc p:last-child {margin-bottom: 0;}


/* 더보기 */
.more_main {padding-bottom: 2rem;}
.more_user {padding: 1.9rem 2.4rem; box-sizing: border-box;}
.more_user .user_title {margin-bottom: 0.3rem; color: #222B45; font-size: 1.8rem; font-weight: 600; letter-spacing: -0.48px;}
.more_user .invited_code {display: flex; align-items: center; gap: 0.8rem; }
.more_user .invited_code p {font-size: 1.4rem; color: #5B5954; font-weight: 600; line-height: 185%; font-family: "Public Sans", sans-serif;}
.more_user .share_box {margin-top: 1.6rem; margin-bottom: 1.6rem;}
.more_user .share_box button {display: flex; align-items: center; gap: 0.8rem; padding: 0.4rem 1.8rem; box-sizing: border-box; background-color: #FFE812; border-radius: 8px;}
.more_user .share_box figure {width: 17px; height: 17px;}
.more_user .share_box figure img {width: 100%; height: 100%; object-fit: fill;}
.more_user .share_box .share_title {color: #000; font-size: 1.4rem; font-weight: 700; line-height: 185%;}
.more_user .share_detail {color: #2E3640; font-size: 1.2rem; font-weight: 400; line-height: normal; border-bottom: 1px solid rgba(171, 169, 163, 0.24); padding-bottom: 2rem;}

.more_mypages {padding: 0 2.4rem; box-sizing: border-box; display: flex; flex-direction: column;}
.more_mypages ul {display: flex; flex-direction: column; row-gap: 0.8rem; border-bottom: 1px solid rgba(171, 169, 163, 0.24); padding-bottom: 2.6rem; margin-top: 1.6rem;}
.more_mypages ul:first-child {margin-top: 0;}
.more_mypages ul:last-child {padding-bottom: 0; border-bottom: none;}
.more_mypages ul li a {display: flex; justify-content: space-between; align-items: center;}
.more_mypages ul li a .svg_container {display: flex; align-items: center; gap: 0.6rem;}
.more_mypages ul li a .mypage_title {font-family: "Public Sans", sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 173%; color: #5B5954;}
.more_mypages ul li a .mypage_txt {font-size: 1.5rem; font-weight: 700; line-height: 173%; font-family: "Public Sans", sans-serif; color: #000;}

.toggleSwitch {width: 36px; height: 18px; padding: 3px; display: block; position: relative; border-radius: 30px; border: 1px solid #000; background-color: #fff; cursor: pointer;}
.toggleSwitch .toggleButton {width: 18px; height: 18px; position: absolute; top: 50%; left: 3px; transform: translateY(-50%); border-radius: 50%; background: #000;}
.toggle_chk:checked ~ .toggleSwitch {background: #000;}
.toggle_chk:checked ~ .toggleSwitch .toggleButton {left: 50%; background: #fff;}
.toggleSwitch, .toggleButton {transition: all 0.2s ease-in;}

.alert_content ul {display: flex; flex-direction: column; }
.alert_content ul li {font-size: 1.4rem; color: #2E3640; font-weight: 400; line-height: 142%; padding-left: 1rem; position: relative;}
.alert_content ul li::before {content: ''; width: 3px; height: 3px; border-radius: 50px; background-color: #2E3640; position: absolute; top: 20%; left: 0;}
.alert_check {display: flex; justify-content: flex-start; text-align: left; width: 100%; padding: 1.2rem 1.4rem; box-sizing: border-box; background-color: #F6F6F6; border-radius: 12px;}


/* 더보기 - 내 포인트 09_2 */
.more_header.my_point {padding-bottom: 0;}
.more_header.my_point .tab_nav {display: flex; justify-content: space-between; margin-top: 1.9rem;}
.more_header.my_point .tab_nav li {width: 50%; text-align: center; font-size: 1.6rem; font-weight: 700; line-height: normal; color: #888; padding-bottom: 1.1rem;}
.more_header.my_point .tab_nav li.active {color: #000; border-bottom: 2px solid #000;}

.tab_container .point_total {margin: 2.6rem 5.2rem; padding: 1.2rem 1.4rem; box-sizing: border-box; text-align: center; border-radius: 12px; background-color: #F6F6F6; position: relative;}
.tab_container .point_total::after {content: ''; position: absolute; bottom: -2.6rem; left: -2.4rem; width: 87.2vw; height: 1px; background-color: rgba(171, 169, 163, 0.24);}
.tab_container .point_total.now {margin: 3.5rem 5.2rem 1.6rem 5.2rem;}
.tab_container .point_total.now::after {display: none;}
.tab_container .point_total p {color: #5B5954; font-size: 1.6rem; font-weight: 500; line-height: 150%;}
.tab_container .point_total .point_now {padding-top: 1.1rem; border-top: 1px solid rgba(171, 169, 163, 0.24); margin-top: 0.7rem; margin-bottom: 0.6rem;}
.tab_container .point_total p.point_now_value {font-weight: 800;}
.point_info {padding-top: 2.6rem;}
.point_info h6 {padding-left: 2rem; color: #000; font-size: 1.6rem; font-weight: 700; line-height: normal;}

.accordion.ac_style_point {margin-top: 1.5rem;}
.accordion.ac_style_point ul li .ac_title {background-color: #fff;}
.accordion.ac_style_point ul li .ac_title h6 {padding-left: 0; color: #000; font-size: 1.5rem; font-weight: 400;}
.accordion.ac_style_point ul li .ac_title h6 span {font-weight: 900;}
.accordion.ac_style_point ul li .ac_desc {padding: 1.6rem; background-color: #F6F6F6;}
.accordion.ac_style_point ul li .ac_desc > ul li {font-size: 1.4rem; color: #2E3640; font-weight: 400; line-height: 142%; padding-left: 1rem; position: relative;}
.accordion.ac_style_point ul li .ac_desc > ul li::before {content: ''; width: 3px; height: 3px; border-radius: 50px; background-color: #2E3640; position: absolute; top: 20%; left: 0;}

.point_now_txt {margin: 0 6.6rem;}
.point_now_txt p {color: #2E3640; font-size: 1.2rem; font-weight: 400; line-height: normal; text-align: center;}
.point_history {margin-top: 3.5rem; padding: 0 2rem;}
.point_history ul {display: flex; flex-direction: column; row-gap: 2rem;}
.point_history ul li {padding-top: 2rem; border-top: 1px solid rgba(171, 169, 163, 0.24); display: flex; justify-content: space-between; align-items: center;}
.point_history ul li .point_history_txt {display: flex; flex-direction: column; row-gap: 0.5rem;}
.point_history ul li .point_history_txt .point_use_date {color: #222B45; font-size: 1.2rem; font-weight: 400; line-height: normal;}
.point_history ul li .point_history_txt .point_product {color: #222B45; font-size: 1.4rem; font-weight: 700; line-height: normal;}
.point_history ul li .point_history_value .point_value_num {padding: 0.6rem; background-color: #000; color: #fff; border-radius: 15px; font-size: 1.2rem; font-weight: 700; line-height: normal;}


/* 더보기 - 관심 상품 */
/*.prefer_product_list {display: flex; flex-direction: column; margin-top: 2.2rem; padding: 0 1.5rem; box-sizing: border-box;}*/
.prefer_product_list {display: flex; flex-direction: column; padding: 0 1.4rem; box-sizing: border-box;}
.prefer_product_list ul {display: flex; flex-direction: column;}
.prefer_product_list ul li {padding-bottom: 2.2rem; border-bottom: 1px solid #E5E5E6; margin-bottom: 2.2rem;}
.prefer_product_list ul li:last-child {border-bottom: none; margin-bottom: 0;}
.prefer_product_list ul li .product_box {display: flex; gap: 1.2rem; justify-content: left;}
.prefer_product_list ul li .product_box figure {width: 8.7rem; height: 8.7rem; border-radius: 12px; overflow: hidden;}
.prefer_product_list ul li .product_box figure::after {content: ""; display: block; padding-top: 100%;}
.prefer_product_list ul li .product_box figure img {width: 100%; height: 100%; object-fit: cover;}

.prefer_product_list ul li .product_box .product_txt {width: 24.7rem; display: flex; flex-direction: column; row-gap: 0.8rem;}
.prefer_product_list ul li .product_box .product_txt .point_title {color: #989CA0; font-family: 'Archivo'; font-size: 1rem; font-weight: 900; line-height: normal; letter-spacing: -0.4px;}
.prefer_product_list ul li .product_box .product_txt .product_title {color: #1C1C26; font-size: 1.5rem; font-weight: 700; line-height: 120%; letter-spacing: -0.3px; text-transform: uppercase;}

.prefer_product_list ul li .product_box .product_txt .like_box {display: flex; gap: 0.6rem; font-size: 1.2rem; color: #989CA0; font-weight: 400; line-height: 133%; align-items: center;}

.prefer_product_list ul li .product_box .product_txt .personal_box {display: flex; justify-content: space-between;}
.prefer_product_list ul li .product_box .product_txt .personal_box .personal_txt {display: flex; gap: 0.5rem; color: #989CA0; font-size: 1.2rem; font-weight: 400; line-height: 133%;}
.prefer_product_list ul li .product_box .product_txt .personal_box button {background-color: transparent;}


/* 더보기 - 주문내역 */
.order_list {margin-top: 2.6rem; padding: 0 1.7rem;}
.order_list .order_product {margin-bottom: 0;}
.order_list ul {display: flex; flex-direction: column; row-gap: 2.6rem;}
.order_list ul li {display: flex; flex-direction: column; row-gap: 0.5rem;}
.order_list ul li .order_info_box {display: flex; justify-content: space-between;}
.order_list ul li .order_info_box .order_date {color: #5B5954; font-family: "Public Sans"; font-size: 1.5rem; font-weight: 700; line-height: 173%;}
/*.order_list ul li .order_info_box .delivery {color: #2E2A28; font-size: 1.4rem; font-weight: 700; line-height: normal; text-decoration: underline;} !*  cursor: pointer; *!*/
.order_list ul li .order_info_box .delivery {color: #2E2A28; font-size: 1.4rem; font-weight: 700; line-height: normal; } /*  cursor: pointer; */
.order_list ul li .order_info_box .delivery.finish {text-decoration: none; opacity: 0.3; cursor: none;}

.order_list ul li .order_product_box {border-radius: 12px; border: 1px solid #E1E1E1; padding: 1.4rem; box-sizing: border-box; display: flex; flex-direction: column; row-gap: 1.2rem;}
.order_list ul li .order_product_box .order_option_box {row-gap: 1.2rem;}
.order_list ul li .order_product_box .order_option_box .order_option_row {background-color: #F8F8F8; padding: 1.2rem 1.6rem; box-sizing: border-box; border-radius: 12px;}
.option_select {background-color: transparent; display: flex;}
.option_delete {background-color: transparent; display: flex;}


/* 더보기 - 주문 상세 */
.order_num {margin-top: 2.6rem; padding: 0 1.7rem;}
.order_num h6 {color: #888; font-size: 1.4rem; font-weight: 700; line-height: normal;}
.order_list.detail {margin-top: 2.4rem;}
.order_info_box.detail {padding-bottom: 1rem; border-bottom: 1px solid rgba(171, 169, 163, 0.24);}
.order_option_row.detail {row-gap: 1.5rem;}
.order_option_row.detail .order_option_one {flex-direction: row;}
.order_option_row.delivery {row-gap: 1.5rem;}
.order_option_row.delivery .order_option_one {flex-direction: row; justify-content: flex-start; gap: 1.4rem;}
.order_option_row.delivery .order_option_one .option_type {width: 13vw;}


/* 더보기 - 설문 프로필 */
.profile_container {padding: 3.4rem 2rem; box-sizing: border-box; display: flex; flex-direction: column; row-gap: 3.8rem;}
.basic_input.profile {color: #36342F; font-size: 1.4rem; font-weight: 400; line-height: 157%;}
.basic_input.profile:disabled {border: 0.5px solid #D7DDE1; background: #F3F3F3;}


/* 더보기 - 공지사항 */
.ac_faq_q {color: #000; font-size: 1.8rem; font-weight: 600; margin-right:0.5rem; line-height: normal; font-family: 'Lato'} /*자주 묻는 질문 'Q'*/
.ac_title_txt .ac_sub {color: #2E3640; font-size: 1.4rem; font-weight: 400; line-height: 142%;}
.accordion.ac_style_point.notice ul li .ac_title h6 {color: #000; font-size: 1.5rem; font-weight: 600; line-height: normal; font-family: 'AppleSDGothicNeo'}
.accordion.ac_style_point.notice ul li .ac_desc p {color: #36342F; font-size: 1.4rem; font-weight: 500; line-height: 157%;}


/* 더보기 - 불편사항/이용문의 */
.accordion .ac_title_status {display: flex; gap: 1.3rem; align-items: center;}
.accordion .ac_title_status span {font-size: 1.4rem; font-weight: 400; line-height: 142%;}
.accordion .ac_title_status span.ing {color: #0F73F1; }
.accordion .ac_title_status span.finish {color: #BEBEBE; }
.accordion .ac_desc.answer {display: flex; flex-direction: column;}
.accordion .ac_desc.answer p.question {padding-bottom: 1.6rem; }
.accordion .ac_desc.answer .answer_box {margin-top: 10px; border-top: 1px solid #DCDCDC;}
.accordion .ac_desc.answer .answer_box span.answer_date {color: #AEADAA; font-family: "Noto Sans KR"; font-size: 1.2rem; font-weight: 500; line-height: 183%;}




/* 더보기 - 불편사항/이용문의 등록 */
.form_container {padding: 1.8rem 2rem;}
.form_container form {display: flex; flex-direction: column; row-gap: 2.8rem;}
.form_container form .image_area {display: flex; justify-content: left; gap: 1.2rem;}
.form_container form .image_area svg {width: 100px; height: 100px;}
.form_container form .image_area svg::after {content: ''; padding-bottom: 100%; display: block;}
.form_container form .image_area .swiper {width: 22.3rem;}
.form_container form .image_area .swiper .swiper-wrapper .swiper-slide {width: 100px !important; position: relative;}
.form_container form .image_area .swiper .swiper-wrapper .swiper-slide .close {position: absolute; top: 0.8rem; right: 0.8rem;}
.form_container form .image_area .swiper .swiper-wrapper .swiper-slide figure {width: 100px; height: 100px; border-radius: 16px; overflow: hidden;}
.form_container form .image_area .swiper .swiper-wrapper .swiper-slide figure img {width: 100%; height: 100%; object-fit: cover;}
.btn_area.register {display: flex; gap: 0.9rem; z-index: 99;}


/* 회원 탈퇴 */
.cancel_container {padding: 3.7rem 2rem 0 2rem; box-sizing: border-box; display: flex; flex-direction: column; row-gap: 0.5rem;}
.cancel_container h5 {color: #222B45; font-size: 2.2rem; font-weight: 700; line-height: normal; letter-spacing: 0.44px;}
.cancel_container p {color: #2E3640; font-size: 1.4rem; font-weight: 400; line-height: normal;}
.form_container.cancel {padding: 3.3rem 2rem;}
.form_container.cancel form {gap: 0.5rem;}
.form_container.cancel form .select {margin-bottom: 1.1rem;}
.form_container.cancel form .input_area button {padding: 1.2rem 0; width: 70%; margin: 0 auto;}


/* 서비스 이용 */
.review {background-color: rgba(0, 0, 0, 0.84); width: 100%; height: 100svh; z-index: 202; position: fixed; top: 0;left: 0; display: flex; justify-content: center; align-items: center;}
.review .review_inner {display: flex; flex-direction: column; align-items: center; width: calc(100% - 4rem);}
.review .review_inner .mireview_sub {padding: 0.4rem 1.2rem; box-sizing: border-box; background-color: #242424; color: #fff; border-radius: 100px; text-align: center;}
.review .review_inner figure {margin-top: 3rem; margin-bottom: 1.75rem; width: 27rem;}
.review .review_inner figure img {width: 100%; height: 100%; object-fit: cover;}
.review .review_inner p {font-size: 1.5rem; font-weight: 400; line-height: 173%; color: #fff; margin-bottom: 3.8rem;}
.review .review_inner .btn_box {display: flex; gap: 0.9rem; width: 100%;}
.alert.review_alert {z-index: 203;}
.alert.review_alert .inner {gap: 1.6rem; width: 100%;}
.alert.review_alert .btn_box {display: flex; gap: 1rem; width: 100%; align-items: center; justify-content: center;}
.alert.review_alert .btn_box .basic_btn {padding: 0.95rem 0; width: 9.3rem; text-align: center; font-size: 1.4rem;}

/* 광고리포트 */
.report_wrap {width: 100%; font-family: 'Poppins'; background-color: #F4F7F7;}
/* .lnb_container {background-color: #000; width: 14%; height: 100svh;}
.lnb_container h1 {margin: 7.3rem 2.4rem 0 2.4rem; box-sizing: border-box;}
.lnb_container h1 img {width: 100%; height: 100%; object-fit: cover;}
.lnb_container ul {margin-top: 4.7rem; padding: 0 2.4rem; box-sizing: border-box; display: flex; flex-direction: column; row-gap: 2.8rem;}
.lnb_container ul li {color: #fff; font-size: 1.4rem; font-weight: 500; line-height: normal;}
.lnb_container ul li.active {font-weight: 900; text-decoration: underline;}
.lnb_container .brand_container {margin-top: 6.5rem; padding: 0 2.4rem; box-sizing: border-box; color: #fff; display: flex; flex-direction: column; row-gap: 1.2rem;}
.lnb_container .brand_container .brand_title {display: flex; justify-content: space-between;}
.lnb_container .brand_container .brand_title h5 {font-size: 1.4rem; font-weight: 900; line-height: normal;}
.lnb_container .brand_container .brand_info {color: #757575; font-size: 1rem; font-weight: 400; line-height: normal; display: flex; flex-direction: column;}
.lnb_container .brand_container .brand_addr {color: #CBCBCB; font-size: 1rem; line-height: normal;}
.lnb_container .brand_container .brand_addr h6 {font-weight: 700;}
.lnb_container .brand_container .brand_addr span {color: #757575;} */

.report_main {padding: 6.2rem 5rem; box-sizing: border-box; width: 100%;}
.report_main .report_title {display: flex; justify-content: space-between; width: 100%; align-items: center; flex-wrap: wrap;}
.report_main .report_title h2 {color: #202020; font-size: 3.2rem; font-weight: 600; line-height: 150%;}
.report_main .report_select_box {display: flex; justify-content: left; gap: 1.2rem; margin-top: 2.8rem; flex-wrap: wrap;}
.report_main .report_select_box .input_area.wd100 {width: 10rem;}
.report_main .report_select_box .input_area.wd490 {width: 49rem;}

.report_main .report_status {display: flex; justify-content: left; gap: 1.6rem; margin-top: 2.3rem; align-items: center; flex-wrap: wrap;}
.report_main .report_status .status_box {display: flex; gap: 1.3rem; align-items: center; padding: 0.7rem 1.8rem; box-sizing: border-box; border-radius: 12px; background-color: #fff;}
.report_main .report_status .status_box .status_title {color: #84818A; font-size: 1.3rem; font-weight: 400; line-height: normal;}
.report_main .report_status .status_box .status_value {color: #84818A; font-size: 1.3rem; font-weight: 700; line-height: normal;}

.report_summary {margin-top: 3rem; background-color: #fff; padding: 2.6rem; box-sizing: border-box; border-radius: 12px; display: flex; flex-direction: column; row-gap: 2.2rem;}
.report_summary .summary_main {display: flex; gap: 1.7rem;}
.report_summary .summary_info {color: #84818A; font-size: 1.3rem; font-weight: 700; line-height: normal;}
.report_summary .summary_detail {display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; row-gap: 1.2rem; gap: 1.7rem;}
.report_summary .summary_detail figure {width: 20rem;}
.report_summary .summary_detail figure img {width: 100%; height: 100%; object-fit: cover; border-radius: 12px; overflow: hidden;}
.report_summary .summary_detail .summary_first {width: 18rem;}
.report_summary .summary_detail .summary_first .summary_box {height: 100%; display: flex; flex-direction: column; justify-content: center; background-color: #F6F6F6; padding: 2rem; box-sizing: border-box; border-radius: 12px;}
.report_summary .summary_detail .summary_container {display: flex; flex-direction: column; justify-content: space-between; flex-wrap: wrap; row-gap: 1.6rem;}
.report_summary .summary_detail .summary_second {display: flex; justify-content: space-between; flex-wrap: wrap; row-gap: 1.2rem; gap: 1.7rem;}
.report_summary .summary_detail .summary_second .summary_box {background-color: #F6F6F6; padding: 2rem; box-sizing: border-box; border-radius: 12px; display: flex; flex-direction: column; row-gap: 1.1rem; }
.report_summary .summary_detail .summary_second .summary_box.wd30 {width: 30rem;}
.report_summary .summary_detail .summary_second .summary_box.wd20 {width: 20rem;}
.report_summary .summary_detail .summary_second .summary_box.wd15 {width: 15rem;}
.report_summary .summary_detail .summary_box .summary_info {color: #84818A; font-size: 1.3rem; font-weight: 700; line-height: normal;}
.report_summary .summary_detail .summary_box .summary_value {color: #000; font-size: 5rem; font-weight: 700; line-height: normal;}

.prefer_inner {margin-top: 2.8rem; padding: 2.6rem; box-sizing: border-box; background-color: #fff; border-radius: 12px;}
.prefer_inner .prefer_title {display: flex; flex-direction: column; row-gap: 1.2rem;}
.prefer_inner .prefer_title h3 {color: #202020; font-size: 3.2rem; font-weight: 600; line-height: 150%;}
.prefer_inner .prefer_title ul {color: #84818A; font-size: 1.3rem; font-weight: 700; line-height: normal;}
.prefer_inner .prefer_title p {color: #84818A; font-size: 1.3rem; font-weight: 700; line-height: normal;}
.prefer_inner .prefer_chart_area {margin-top: 2.4rem; padding: 2rem; box-sizing: border-box; border-radius: 12px; background-color: #F6F6F6;}
.prefer_inner .prefer_chart_area h4 {color: #000; font-size: 2rem; font-weight: 700; line-height: normal;}

.prefer_inner .prefer_chart_area .prefer_d_charts {display: flex;}
.prefer_inner .prefer_chart_area .prefer_d_charts .prefer_d_gender {display: flex; width: 50%; position: relative;}
.prefer_inner .prefer_chart_area .prefer_d_charts .prefer_d_gender .gender_txt {position: absolute; top: 1.9rem; left: 1.6rem; color: #84818A; font-size: 1.3rem; font-weight: 700; line-height: normal;}
.prefer_inner .prefer_chart_area .prefer_d_charts .prefer_d_box {width: 50%; display: flex; gap: 1.6rem; align-items: center; justify-content: center; padding: 1.6rem 0; margin: 0 1.2rem;}
.prefer_inner .prefer_chart_area .prefer_d_charts .prefer_d_box .canvas_area {width: 140px;}

.prefer_inner .prefer_chart_area .prefer_p_charts {width: 100%; margin-top: 2.7rem;}
.prefer_inner .prefer_chart_area .prefer_p_charts .percent_bar_bg {height: 11px; width: 100%; border-radius: 12px; background-color: #CECECE; position: relative;}
.prefer_inner .prefer_chart_area .prefer_p_charts .percent_bar_bg .progress_bar {position: absolute; top: 0.2rem; left: 0.3rem; background-color: #000; height: 7px; border-radius: 12px;}
.prefer_inner .prefer_chart_area .prefer_p_charts .percent_bar_bg .progress_txt {position: absolute; top: 2.4rem; color: #000; font-size: 2rem; font-weight: 700; line-height: normal;}
.prefer_inner .prefer_chart_area .prefer_p_charts .percent_txt {display: flex; justify-content: space-between; margin-top: 1.2rem; font-size: 2rem; color: #B7B7B7; font-weight: 700; line-height: normal;}

.data_inner {margin-top: 2.8rem; padding: 2.6rem; box-sizing: border-box; background-color: #fff; border-radius: 12px;}
.data_inner .data_title {display: flex; flex-direction: column; row-gap: 1.2rem;}
.data_inner .data_title h3 {color: #202020; font-size: 3.2rem; font-weight: 600; line-height: 150%;}
.data_inner .data_title ul {color: #84818A; font-size: 1.3rem; font-weight: 700; line-height: normal;}

.data_inner .data_chart_container {display: flex; gap: 3rem; margin-top: 2.4rem; }
.data_inner .data_chart_box {padding: 2rem; box-sizing: border-box; border-radius: 12px; background-color: #F6F6F6; width: 50%; position: relative;}
.data_inner .data_chart_box h4 {color: #000; font-size: 2rem; font-weight: 700; line-height: normal;}
.data_inner .data_chart_box .canvas_area {margin-top: 2.5rem;}
.data_inner .data_chart_box .no_data {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; padding: 1.3rem 2.4rem; background-color: #4F4F4F; border-radius: 100px; opacity: 0.69; color: #fff; font-size: 1.2rem; font-weight: 400; line-height: 138%;}

.data_inner .data_chart_area {padding: 2rem; box-sizing: border-box; border-radius: 12px; background-color: #F6F6F6; width: 50%; position: relative; width: 100%; margin-top: 2.5rem;}
.data_inner .data_chart_area .data_chart_inner {display: flex; justify-content: space-between; margin-top: 1.9rem;}
.data_inner .data_chart_area .data_chart_inner .data_chart_one {display: flex;}
.data_inner .data_chart_area .data_chart_inner .data_chart_one span {color: #84818A; font-size: 1.3rem; font-weight: 700; line-height: normal; width: 8rem;}
.data_inner .data_chart_area .data_chart_inner .data_chart_one .data_chart_draw {display: flex; align-items: center; gap: 1.6rem;}
.data_inner .data_chart_area .data_chart_inner .data_chart_one .data_chart_draw .canvas_area {width: 140px;}

.result_inner {display: flex; flex-direction: column; padding: 0 2rem; box-sizing: border-box; margin-top: 4.5rem;}
.result_inner h3 {color: #000; font-size: 2rem; font-weight: 700; line-height: normal;}
.result_inner .result_container {display: flex; flex-wrap: wrap; gap: 3rem; margin-top: 1.4rem;}
.result_inner .result_container .result_box {background-color: #F6F6F6; border-radius: 12px; width: 48%; display: flex; flex-direction: column; row-gap: 1.6rem; padding: 2.6rem 1.8rem; box-sizing: border-box;}
.result_inner .result_container .result_box h5 {width: 100%; text-align: center; background-color: #717171; border-radius: 100px; opacity: 0.69; color: #fff; font-size: 1.5rem; font-weight: 600; line-height: 138%; padding: 0.5rem 0;}
.result_inner .result_container .result_box .result_chart {display: flex; gap: 3.8rem; justify-content: center; align-items: center;}
.result_inner .result_container .result_box .result_chart .canvas_area {width: 140px;}
.result_inner .result_container .result_box .result_chart .legend_custom ul {width: 15rem;}
.result_inner .result_container .result_box .result_chart .legend_custom ul li {display: flex; gap: 1.8rem; text-align: left;}
.result_inner .result_container .result_box .result_chart .legend_custom ul li span {color: #84818A; font-size: 1.3rem; font-weight: 700; line-height: normal; text-align: left;}
.result_inner .result_container .result_box .result_chart .legend_custom ul li span:first-child {width: 5.3rem;}


@media screen and (max-width: 1190px){
    .prefer_inner .prefer_chart_area .prefer_d_charts .prefer_d_gender {flex-wrap: wrap; width: 100%;}
    .prefer_inner .prefer_chart_area .prefer_d_charts .prefer_d_box {width: 100%;}
}

@media screen and (max-width: 1130px){
    html {font-size: min(1.6rem, calc(100vw * 10 / 1130));}
    .data_inner .data_chart_area .data_chart_inner {flex-wrap: wrap; row-gap: 1.6rem; gap: 1.6rem; justify-content: flex-start;}
    .data_inner .data_chart_container {flex-wrap: wrap;}
    .data_inner .data_chart_box {width: 100%;}
    .result_inner .result_container .result_box {width: 100%;}
    .prefer_inner .prefer_chart_area .prefer_d_charts {flex-wrap: wrap;}
}

@media screen and (max-width: 835px){
    .report_summary .summary_detail .summary_second .summary_box.wd30,
    .report_summary .summary_detail .summary_second .summary_box.wd20,
    .report_summary .summary_detail .summary_second .summary_box.wd15 {width: 100%;}
}

@media screen and (max-width: 559px){
    .result_inner .result_container .result_box .result_chart {flex-wrap: wrap;}
}
@media screen and (min-width: 376px){
    html {font-size: min(1.6rem, calc(100vw * 10 / 375));}
}
@media screen and (max-width: 375px){
    html {font-size: min(1.6rem, calc(100vw * 10 / 375));}
}

/* 적립방법 */
.point_inner {padding:3.6rem 2rem 11.2rem;}
.point_list {display: flex; flex-direction: column; gap: 2rem;}
.point_item {border: 1px solid #D9D9D9; border-radius: 0.8rem; text-align: center; background: #F8F8F8; overflow: hidden;}
.point_item_header {background: #fff; font-size: 1.6rem; font-weight: 700; line-height: 2.4rem; padding: 1rem 2rem;}
.point_item_header .point_text {color: #FA582F;}
.point_item_body {padding: 1.6rem 2rem;}
.point_item_body p {font-size: 1.2rem; line-height: 1.8rem; letter-spacing: 0;}
.point_item_link {width: 19rem; margin-top: 1rem; display: inline-block; padding: 0.7rem; background: #fff; border-radius: 0.4rem; font-size: 1.2rem; line-height: 1.8rem; border: 1px solid #ECECEC; box-sizing: border-box;}
.point_item_link span {padding-right: 2.4rem; background: url("/assets/Web/img/icon/icon_arr_link_orange.svg") no-repeat right center / 1.6rem auto;}

/* 응모하기_리스트 */
.application_inner {padding: 1.6rem 2rem 9.8rem; text-align: center;}
.application_inner .title h2 {display: block;}
.application_list {margin-top: 2rem; display: flex; flex-direction: column; gap: 2rem;}

.application_item {border: 1px solid #D9D9D9; border-radius: 0.8rem; overflow: hidden;}
.application_item_header {font-size: 1.4rem; line-height: 2rem; letter-spacing: 0; background-color: #F6F6F6; font-weight: 400; padding: 0.8rem 1.5rem; text-align: left;}
.application_item_body {padding: 2rem 1.6rem; color: #555; font-size: 1.4rem; line-height: 2rem; letter-spacing: 0;}
.application_item_footer {padding: 0 1.6rem 2rem; display: flex; align-content: stretch; gap: 0.7rem;}
.application_item.active {border-color: #4B47AD}
.application_item.active .application_item_header {background: #F4F6FF; color: #4B47AD; font-weight: 400;}
.application_btn { flex: 0 1 100%; border: 1px solid #999999; font-size: 1.2rem; line-height: 1.8rem; letter-spacing: 0; text-align: center; border-radius: 0.6rem; background: #fff; padding: 0.7rem; color: #000000;}
.application_btn.apply {border-color: #4B47AD; background-color: #4B47AD; color: #fff;}
.application_btn.apply strong {font-weight: 600; color: #FFE659;}
.application_btn.completed {border-color: #555; background-color: #555; color: #fff; font-weight: 600;}
.application_btn.pending {border: 1px solid #D9D9D9; color: #BABABA; background-color: #F6F6F6;}
.application_btn.check {border-color: #4B47AD; background-color: #F4F6FF; color: #4B47AD;}

.application_item2 {border: 1px solid #D9D9D9; border-radius: 0.8rem; overflow: hidden;}
.application_item2_header {font-size: 1.4rem; line-height: 2rem; letter-spacing: 0; background-color: #F6F6F6; font-weight: 400; padding: 0.8rem 1.5rem; text-align: left;}
.application_item2_body {padding: 2rem 1.6rem; color: #555; font-size: 1.4rem; line-height: 2rem; letter-spacing: 0;}
.application_item2_footer {padding: 0 1.6rem 2rem; display: flex; align-content: stretch; gap: 0.7rem;}
.application_item2.active {border-color: #018057}
.application_item2.active .application_item2_header {background: #F4FFF9; color: #018057; font-weight: 400;}
.application_btn2 { flex: 0 1 100%; border: 1px solid #999999; font-size: 1.2rem; line-height: 1.8rem; letter-spacing: 0; text-align: center; border-radius: 0.6rem; background: #fff; padding: 0.7rem; color: #000000;}
.application_btn2.apply {border-color: #018057; background-color: #018057; color: #fff;}
.application_btn2.apply strong {font-weight: 600; color: #FFE659;}
.application_btn2.completed {border-color: #555; background-color: #555; color: #fff; font-weight: 600;}
.application_btn2.pending {border: 1px solid #D9D9D9; color: #BABABA; background-color: #F6F6F6;}
.application_btn2.check {border-color: #018057; background-color: #F4F6FF; color: #018057;}

.application_item3 {border: 1px solid #D9D9D9; border-radius: 0.8rem; overflow: hidden;}
.application_item3_header {font-size: 1.4rem; line-height: 2rem; letter-spacing: 0; background-color: #F6F6F6; font-weight: 400; padding: 0.8rem 1.5rem; text-align: left;}
.application_item3_body {padding: 2rem 1.6rem; color: #555; font-size: 1.4rem; line-height: 2rem; letter-spacing: 0;}
.application_item3_footer {padding: 0 1.6rem 2rem; display: flex; align-content: stretch; gap: 0.7rem;}
.application_item3.active {border-color: #311106}
.application_item3.active .application_item2_header {background: #F4FFF9; color: #311106; font-weight: 400;}
.application_btn3 { flex: 0 1 100%; border: 1px solid #999999; font-size: 1.2rem; line-height: 1.8rem; letter-spacing: 0; text-align: center; border-radius: 0.6rem; background: #fff; padding: 0.7rem;}
.application_btn3.apply {border-color: #471C0D; background-color: #471C0D; color: #fff;}
.application_btn3.apply strong {font-weight: 600; color: #FFE659;}
.application_btn3.completed {border-color: #555; background-color: #555; color: #fff; font-weight: 600;}
.application_btn3.pending {border: 1px solid #D9D9D9; color: #BABABA; background-color: #F6F6F6;}
.application_btn3.check {border-color: #471C0D; background-color: #F4F6FF; color: #471C0D;}


.progress_header {margin-top: -0.4rem; font-size: 1.2rem; line-height: 1.8rem; letter-spacing: 0; color: #999; text-align: left;}
.progress_body {display: flex; justify-content: space-between; margin: 0.4rem 0 -1rem;}
.progress_count {display: flex; gap: 0.2rem; color: #BABABA; font-size: 1.4rem; align-items: baseline;}
.progress_count span {color: #555;}
.progress_count strong {font-weight: 700; font-size: 2.5rem; letter-spacing: 0; text-align: center; color: #000000;}
.progress_bar {width: 21rem; height: 2.4rem; border-radius: 0.4rem; background: #E4E4E4; overflow: hidden;}
.progress_fill {height: 100%; background: linear-gradient(to right, #f4b400, #ff7043);}
.winner_detail {display: block; color: #333; font-weight: 700; font-size: 1.6rem; line-height: 2.4rem; letter-spacing: 0;}
.info_text {margin-top: -1.2rem; font-size: 1.4rem; line-height: 2rem; text-align: left; padding-left: 2.6rem; background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.9996 17.1471C6.05827 17.1471 2.85254 13.9414 2.85254 10C2.85254 6.05871 6.05827 2.85297 9.9996 2.85297C13.9409 2.85297 17.1467 6.05871 17.1467 10C17.1467 13.9414 13.9409 17.1471 9.9996 17.1471Z' stroke='%23BABABA' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.0003 14.1179C10.3252 14.1179 10.5886 13.8545 10.5886 13.5296C10.5886 13.2048 10.3252 12.9414 10.0003 12.9414C9.67547 12.9414 9.41211 13.2048 9.41211 13.5296C9.41211 13.8545 9.67547 14.1179 10.0003 14.1179Z' fill='%23BABABA'/%3E%3Crect x='9.41211' y='5.88232' width='1.17647' height='5.88235' rx='0.588235' fill='%23BABABA'/%3E%3C/svg%3E%0A") no-repeat 0 0 / 2rem auto;}
.info_text .point_text {color: #555; font-weight: 400;}
.info_text > span {color: #999;}
.alert_v3 {padding: 3.2rem 2rem; width: calc(100% - 4.9rem);}
.alert_v3 .inner h5 {font-size: 1.8rem; line-height: 2.6rem;}
.alert_v3 .txt_box {border-radius: 0; padding: 1.2rem 1.4rem; height: 204px; overflow-y: auto; overflow-x: hidden;}
.alert_v3 .txt_box::-webkit-scrollbar {width: 6px;}
.alert_v3 .txt_box::-webkit-scrollbar-track {background-color: #fff;}
.alert_v3 .txt_box::-webkit-scrollbar-thumb {background-color: #79747E; border-radius: 6px; background-clip: padding-box;}
.alert_v2 .txt_box ul li {font-size: 1.2rem; line-height: 1.8rem; text-align: left;}
.alert_v2 .txt_box ul li span {width: 50%;}



/* home */
.main.home { padding: 0 0rem 5.3rem; overflow: hidden;}
.main.home .inner {padding: 0 2rem 0rem;}
.main.home .inner.home_banner {/*margin-top: 2.4rem;*/ overflow: hidden;}
.main.home .title {margin-bottom: 1.2rem;}
/* .main.home .title h2 {font-weight: 700; font-size: 1.8rem; line-height: 2.6rem; color: #000; letter-spacing: 0;} */
.main.home .swiper-wrapper {z-index: 0}

.home_banner {position: relative;}
.home_banner .swiper-container, .brand_tabs, .brand_contents .swiper-container {overflow: hidden;}
.home_banner .swiper-container {margin-right: -2rem}
.home_banner .swiper-slide {width: 30rem; max-width: 750px; margin-right: 1.6rem;}
.home_banner .swiper-slide:last-child {margin-right: 0;}
/*.home_banner .swiper-slide {width: 30rem; max-width:100%; margin-right: 1.6rem;}*/
.home_banner .swiper-slide img {width: 100%;}
.home_banner .swiper-fraction { position: absolute; top: auto; left: auto; right: 6.5rem; bottom: 1.3rem; display: inline-block; width: auto; min-width: 3.2rem; height: 1.2rem; text-align: center; color: #BABABA; font-size: 0.8rem; line-height: 1.2rem; padding: 0 0.8rem; background-color: #00000066; border-radius: 0.6rem; box-sizing: border-box; }
.home_banner .swiper-fraction .swiper-pagination-current {color: #fff;}
.home_banner .swiper-fraction span {display: inline-block; line-height: 1.2rem; vertical-align: middle}

.main.home .inner.home_banner.slide-less-than-3 {margin-right: 0;}
.home_banner.slide-less-than-3 .swiper-container {margin-right: 0}
.home_banner.slide-less-than-3 .swiper-container .swiper-slide {margin-right: 0}
.home_banner.slide-less-than-3 .swiper-fraction {right: 3.3rem; bottom: 2rem;}

.service-list {display: flex; flex-direction: column; gap: 1.2rem;}
/*.service-item {display: flex; flex-direction: column; justify-content: center; border-radius: 0.8rem; background-color: #f8f8f8; padding: 2rem 1.6rem; background-position: right bottom; background-size: auto 100%; background-repeat: no-repeat;}*/
.service-item {display: flex; flex-direction: column; justify-content: center; border-radius: 0.8rem; background-color: #f8f8f8; padding: 2rem 1.6rem; background-position: right bottom; background-size: 100%; background-repeat: no-repeat;}
.service-item .sub-label {font-weight: 300; font-size: 1.2rem; line-height: 1.8rem;}
.service-item .label {font-weight: 600; font-size: 1.4rem; line-height: 2rem;}

.brand_wrap {margin: 0 -2rem; padding: 2.4rem 2rem; background-color: #F8F8F8; box-sizing: border-box;}
/*.brand_tabs {margin-right: -2rem;}*/
.brand_tabs, .brand_items {overflow: hidden; margin-right: -2rem;}
.brand_tabs .swiper-slide {margin-right: 0.6rem; width: auto; min-width: 6rem; border: 1px solid #D9D9D9; padding: 0.6rem 1.1rem; color: #999; font-size: 1.1rem; line-height: 1.6rem; border-radius: 1.5rem; box-sizing: border-box; background-color: transparent; text-align: center;}
/*.brand_tabs .swiper-slide[data-id="0"] {font-size: 1.0rem;}*/
/*.brand_tabs .swiper-slide[data-id="1"] {font-size: 1.0rem;}*/
.brand_tabs .swiper-slide.swiper-slide-thumb-active {color: #fff; background-color: #111; border-color: #111;}
.brand_contents {margin-top: 1.2rem; margin-right: -2rem; overflow: hidden;}
.brand_txt {font-size: 1.4rem; line-height: 1.8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;margin-right: 2rem;}
.brand_wrap .brand_items {margin-top: 1.6rem;}
.brand_wrap .brand_items .swiper-slide {width: 15.6rem; margin-right: 1.2rem;}
.brand_wrap .brand_items .swiper-slide img {width: 15.5rem;height: 24rem; object-fit: cover; border-radius: 1rem;}

[class^="icon-"] {background-size: contain; background-repeat: no-repeat; display: inline-block; width: 1.6rem; height: 1.6rem;}
.mid_banner {display: flex; flex-wrap: wrap; gap: 0.8rem;}
.mid_banner a {flex: 1 1 calc(50% - 0.8rem); display: flex; align-items: center; gap: 0.8rem; border-radius: 0.4rem; color: #111; font-weight: 300; font-size: 1rem; line-height: 1.4rem; padding: 0.8rem 1.6rem; box-sizing: border-box; text-align: left;}
.mid_banner [class^="icon-"] {width: 2.4rem; height: 2.3rem;}
.mid_banner a {display: flex; background-color: #E1F1FA;}
.mid_banner a + a {background-color: #FFF4EE;}
.icon-point { background-image: url("data:image/svg+xml,%3Csvg width='24' height='23' viewBox='0 0 24 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_4_27' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='23'%3E%3Cpath d='M24 0H0V23H24V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_4_27)'%3E%3Cpath d='M10 8.99365C14.9706 8.99365 19 7.20279 19 4.99365C19 2.78451 14.9706 0.993652 10 0.993652C5.02944 0.993652 1 2.78451 1 4.99365C1 7.20279 5.02944 8.99365 10 8.99365Z' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 13.8843C11.3348 13.9563 10.6399 13.9937 9.9233 13.9937C4.99385 13.9937 1 12.2017 1 9.99365' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19 10.9937V4.99365' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 4.99365V14.876C1 17.1489 5.00864 18.9937 9.95633 18.9937C10.6593 18.9937 11.3432 18.9552 12 18.8866' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.4304 22.006C20.5064 22.006 23 19.5289 23 16.4732C23 13.4175 20.5064 10.9404 17.4304 10.9404C14.3544 10.9404 11.8608 13.4175 11.8608 16.4732C11.8608 19.5289 14.3544 22.006 17.4304 22.006Z' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.0245 14.8117C16.0245 14.6959 16.0186 14.5651 16.0186 14.4063C16.0126 14.2606 16.0059 14.1229 16 14H17.2945C17.5152 14 17.7241 14.029 17.9321 14.0728C18.1343 14.1237 18.3186 14.2036 18.4783 14.3194C18.6381 14.4352 18.7607 14.5949 18.8588 14.7906C18.951 14.9933 19 15.2399 19 15.5365C19 15.8331 18.951 16.0727 18.8529 16.2683C18.7548 16.471 18.6262 16.6229 18.4783 16.7396C18.3186 16.8624 18.1469 16.9493 17.9567 16.9932C17.7605 17.0511 17.5643 17.073 17.38 17.073H16.816V18.1883C16.816 18.3112 16.816 18.4489 16.8219 18.6016C16.8219 18.7613 16.8219 18.8842 16.8345 19H16C16.0059 18.8842 16.0126 18.7613 16.0186 18.6016C16.0186 18.4498 16.0245 18.312 16.0245 18.1883V14.8117ZM16.816 16.2894H17.4417C17.5279 16.2894 17.6133 16.2745 17.7055 16.2455C17.7917 16.2236 17.8771 16.1806 17.9507 16.1227C18.0183 16.0648 18.0793 15.9919 18.1283 15.891C18.1714 15.7971 18.1959 15.6813 18.1959 15.5365C18.1959 15.3917 18.1655 15.2689 18.1164 15.1671C18.0547 15.0732 17.9879 14.9933 17.9076 14.9354C17.8214 14.8775 17.73 14.8415 17.6319 14.8126C17.5279 14.7976 17.4357 14.7836 17.3495 14.7836H16.816V16.2894Z' fill='%23111111'/%3E%3C/g%3E%3C/svg%3E%0A"); }
.icon-shop  { background-image: url("data:image/svg+xml,%3Csvg width='24' height='23' viewBox='0 0 24 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4_122)'%3E%3Cmask id='mask0_4_122' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='23'%3E%3Cpath d='M24 0H0V23H24V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_4_122)'%3E%3Cpath d='M9.86658 19.9604C9.86658 21.1588 8.9076 22.1315 7.72601 22.1315C6.54442 22.1315 5.58545 21.1588 5.58545 19.9604C5.58545 18.7619 6.54442 17.7892 7.72601 17.7892C8.9076 17.7892 9.86658 18.7619 9.86658 19.9604Z' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.7314 19.9604C18.7314 21.1588 17.7724 22.1315 16.5908 22.1315C15.4092 22.1315 14.4502 21.1588 14.4502 19.9604C14.4502 18.7619 15.4092 17.7892 16.5908 17.7892C17.7724 17.7892 18.7314 18.7619 18.7314 19.9604Z' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.28113 8.23598H20.2983L18.2262 15.2851H6.2162L2.85409 3.85889H0.856232' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.94363 19.885H14.376' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.03998 17.4996L8.83341 15.285' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.4356 12.4481C20.5882 12.4481 23.1438 9.85596 23.1438 6.65834C23.1438 3.46071 20.5882 0.86853 17.4356 0.86853C14.2831 0.86853 11.7274 3.46071 11.7274 6.65834C11.7274 9.85596 14.2831 12.4481 17.4356 12.4481Z' fill='%23FFF4EE' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.1837 6.65833L17.1959 8.10578L19.97 4.92139' fill='%23FFF4EE'/%3E%3Cpath d='M15.1837 6.65833L17.1959 8.10578L19.97 4.92139' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4_122'%3E%3Crect width='24' height='23' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");}

.price-range {display: flex; flex-wrap: wrap; gap: 1rem;}
.price-range a {flex: 1 1 calc(33.333% - 1rem); border: 1px solid #D9D9D9; border-radius: 0.6rem; text-align: center; color: #333; font-weight: 400; font-size: 1.2rem; line-height: 1.8rem; padding: 0.7rem; box-sizing: border-box;}

/* bottom_bar */
.bottom_bar .inner {height: 6.5rem; padding: 0; gap: 0;}
.bottom_bar .inner a {display: flex; width:100%; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;}
.bottom_bar .inner a span {color: #757575; font-size: 1.2rem;}
.bottom_bar .inner a.on span {color: #fff;}
.bottom_bar .inner a.on [class^="icon-"] {filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(57deg) brightness(102%) contrast(108%);}
.bottom_bar [class^="icon-"] {filter: brightness(0) saturate(100%) invert(49%) sepia(7%) saturate(17%) hue-rotate(8deg) brightness(92%) contrast(94%);}
.icon-docbar-home  { background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_51965_125)'%3E%3Cpath d='M8.49984 0.666992L1.1665 5.84255V15.3337H6.36206V9.24477H10.6376V15.3337H15.8332V5.84255L8.49984 0.666992Z' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_51965_125'%3E%3Crect width='16' height='16' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); }
.icon-docbar-point { background-image: url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_51965_129)'%3E%3Cpath d='M7.50016 7.37265C11.044 7.37265 13.9168 5.96806 13.9168 4.2354C13.9168 2.50274 11.044 1.09814 7.50016 1.09814C3.95634 1.09814 1.0835 2.50274 1.0835 4.2354C1.0835 5.96806 3.95634 7.37265 7.50016 7.37265Z' stroke='%23757575' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.9168 8C13.9168 9.73176 11.0449 11.1373 7.50016 11.1373C3.95544 11.1373 1.0835 9.73176 1.0835 8' stroke='%23757575' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.9168 11.7646C13.9168 13.4964 11.0449 14.9019 7.50016 14.9019C3.95544 14.9019 1.0835 13.4964 1.0835 11.7646' stroke='%23757575' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.9165 11.7645V4.20996' stroke='%23757575' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.0835 4.23535V11.7648' stroke='%23757575' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_51965_129'%3E%3Crect width='14' height='16' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); }
.icon-docbar-shop  { background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_51965_137)'%3E%3Cpath d='M15.8332 0.666504H1.1665V15.3332H15.8332V0.666504ZM11.1668 3.3335V4.66683C11.1668 6.14016 9.9735 7.3335 8.50016 7.3335C7.02683 7.3335 5.8335 6.14016 5.8335 4.66683V3.3335' stroke='%23757575' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_51965_137'%3E%3Crect width='16' height='16' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); }
.icon-docbar-fun { background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_51966_1899)'%3E%3Cpath d='M8.49984 15.3332C12.5499 15.3332 15.8332 12.0499 15.8332 7.99984C15.8332 3.94975 12.5499 0.666504 8.49984 0.666504C4.44975 0.666504 1.1665 3.94975 1.1665 7.99984C1.1665 12.0499 4.44975 15.3332 8.49984 15.3332Z' stroke='%23757575' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.83322 7.55561C6.32414 7.55561 6.72211 7.15764 6.72211 6.66672C6.72211 6.1758 6.32414 5.77783 5.83322 5.77783C5.34231 5.77783 4.94434 6.1758 4.94434 6.66672C4.94434 7.15764 5.34231 7.55561 5.83322 7.55561Z' fill='%23757575'/%3E%3Cpath d='M11.1667 7.55561C11.6576 7.55561 12.0556 7.15764 12.0556 6.66672C12.0556 6.1758 11.6576 5.77783 11.1667 5.77783C10.6758 5.77783 10.2778 6.1758 10.2778 6.66672C10.2778 7.15764 10.6758 7.55561 11.1667 7.55561Z' fill='%23757575'/%3E%3Cpath d='M8.49984 15.3332C12.5499 15.3332 15.8332 12.0499 15.8332 7.99984C15.8332 3.94975 12.5499 0.666504 8.49984 0.666504C4.44975 0.666504 1.1665 3.94975 1.1665 7.99984C1.1665 12.0499 4.44975 15.3332 8.49984 15.3332Z' stroke='%23757575' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.1668 10.6733C10.4846 11.3556 9.54239 11.7778 8.50016 11.7778C7.45794 11.7778 6.51572 11.3556 5.8335 10.6733' stroke='%23757575' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_51966_1899'%3E%3Crect width='16' height='16' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); }
.icon-docbar-more  { background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2.5' cy='8' r='1.4' stroke='%23757575' stroke-width='1.2'/%3E%3Ccircle cx='8.5' cy='8' r='1.4' stroke='%23757575' stroke-width='1.2'/%3E%3Ccircle cx='14.5' cy='8' r='1.4' stroke='%23757575' stroke-width='1.2'/%3E%3C/svg%3E%0A"); }




.mirefit-image img {
    width: 100%;
    margin-bottom: 2.4rem;
}

.mirefit-section .description {
    font-size: 1.5rem;
    color: #333;
    line-height: 1.6;
    text-align: left;
}

.mirefit-section .description .quote {
    font-weight: 500;
    margin-bottom: 1.2rem;
}

.mirefit-section .upload-btn {
    margin-top: 2.8rem;
    width: 100%;
    border: 1px solid #ff5a32;
    background-color: transparent;
    color: #ff5a32;
    font-size: 1.6rem;
    line-height: 2.4rem;
    font-weight: bold;
    padding: 0.8rem 0;
    border-radius: 8px;
    cursor: pointer;
}

/* 딤처리 배경 */
.mirefit-popup-overlay {
    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;
    padding: 2rem;
    box-sizing: border-box;
    z-index: 9999;
}

/* 팝업 하얀 박스 */
.mirefit-photo-popup {
    background-color: #fff;
    border-radius: 2rem;
    padding: 2rem 2rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 36rem;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
}

/* 제목 */
.popup-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 2rem;
    color: #111;
}

/* 이미지 박스: 고정된 160x200 */
.popup-image-wrap {
    width: 14rem;
    height: 18rem;
    margin: 0 auto 2rem;
    overflow: hidden;
    object-fit: contain;
    border-radius: 1.2rem;
    background-color: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 이미지: 세로 맞춤 + 가로 비율 유지 */
.popup-image-wrap img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
}

/* 안내 텍스트 */
.popup-guide {
    text-align: left;
    font-size: 1.4rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.popup-guide li {
    margin-bottom: 0.6rem;
    list-style: disc;
    padding-left: 1.2rem;
}

/* 유의사항 박스 */
.popup-warning {
    background-color: #f6f6f6;
    padding: 1.6rem;
    border-radius: 1.2rem;
    font-size: 1.3rem;
    line-height: 2rem;
    color: #666;
    text-align: left;
    margin-bottom: 2.4rem;
}

.popup-warning strong {
    display: block;
    color: #222;
}

/* 확인 버튼 */
.popup-btn {
    display: block;
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ff5a32;
    background-color: transparent;
    color: #ff5a32;
    font-size: 1.4rem;
    line-height: 2rem;
    font-weight: bold;
    border-radius: 1.8rem;
    cursor: pointer;
}

.bullet-item {
    position: relative;
    padding-left: 1.4rem;
    font-size: 1.4rem;
    color: #444;
    line-height: 1.6;
    /*margin-bottom: 0.6rem;*/
}

.bullet-item::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: #666;
    font-size: 1.4rem;
}

.warning-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.check-icon {
    width: 1.6rem;
    height: 1.6rem;
}

/* 02번 */
.popup-select {
    background: #fff;
    border-radius: 2rem;
    padding: 2.4rem 2rem;
    /* ← 오른쪽 padding 제거 */
    width: 100%;
    margin: 5vh auto;
    box-sizing: border-box;
    position: relative;
}

.mirefit-close-btn {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    width: 1.8rem;
    height: 1.8rem;
    background: url('/assets/Web/img/icon/icon-close.svg') no-repeat center/contain;
    border: none;
    cursor: pointer;
}

.popup-title {
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 2.4rem;
}

.popup-desc {
    font-size: 1.4rem;
    line-height: 2rem;
    text-align: left;
    margin-bottom: 0.8rem;
    color: #444;
    padding-left: 1.6rem;
    position: relative;
}

.popup-desc::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: #999;
}

.mirefit-select-tabs {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2.4rem;
}

.aitab {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 1rem;
    background: #f8f8f8;
    padding: 1.2rem;
    font-size: 1.4rem;
    color: #999;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
}

.aitab-icon {
    width: 3.2rem;
    height: 3.2rem;
    filter: grayscale(100%) brightness(0.6);
    fill:#ccc;
    margin-right: 0.6rem;
    transition: filter 0.2s;
}

.aitab.active {
    border: 1px solid #ff5a32;
    background: #fff2ec;
    color: #ff5a32;
}

.aitab.active .aitab-icon {
    filter: brightness(0) saturate(100%) invert(41%) sepia(75%) saturate(508%) hue-rotate(345deg) brightness(102%) contrast(101%);
    fill:#ff5a32;
}

.aitab2 {
    padding: 1.2rem;
    font-size: 1.4rem;
    color: #999;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
}

.aitab2-icon {
    width: 2.0rem;
    height: 2.0rem;
    filter: brightness(0) saturate(100%) invert(61%);
    fill:#ccc;
    margin-right: 0.6rem;
    transition: filter 0.2s;
}

.aitab2.active {
    color: #ff5a32;
}

.aitab2.active .aitab2-icon {
    filter: brightness(0) saturate(100%) invert(41%) sepia(75%) saturate(508%) hue-rotate(345deg) brightness(102%) contrast(101%);
    fill:#ff5a32;
}


.slider-wrap-outer {
    /*margin-left: -2rem;*/
    margin-right: -2rem;
    /* padding-right 상쇄 */
}

.slider-wrap-full {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

.slider-wrap-full .swiper-container {
    /*min-width: 100vw;*/
}


.popup-buttons {
    display: flex;
    gap: 1.2rem;
    margin-top: 3.2rem;
}


/* 03번 */
/* 섹션 구분 */
.make-section {
    margin-bottom: 3.8rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
}

.section-title {
    font-size: 1.6rem;
    font-weight: bold;
}

/* 구분 라인 */
.section-divider {
    height: 1px;
    background-color: #D9D9D9;
    margin: 1.2rem 0 2.4rem;
}

/* 버튼 아이콘 */
.btn-icon-make {
    width: 1.4rem;
    height: 1.4rem;
    margin-right: 0.4rem;
    vertical-align: middle;
}

.btn-edit,
.btn-new {
    font-size: 1.4rem;
    line-height: 2rem;
    color: #444;
    background: #fff;
    border: 1px solid #ccc;
    padding: 0.6rem 1.2rem;
    border-radius: 0.8rem;
    cursor: pointer;
}

.btn-new .count {
    color: #888;
    font-size: 1.4rem;
    margin-left: 0.4rem;
}

.btn-new .count strong {
    color: #111111;
    font-size: 1.4rem;
    margin-left: 0.4rem;
}

/* 룩북 리스트 정렬 */
.lookbook-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    justify-content: flex-start;
    /* 왼쪽 정렬 */
}

/* "이미지 생성 중" 카드 특화 */
.lookbook-card.loading {
    margin: 0;
    /* 중앙 정렬 제거 */
    flex-direction: column;
    gap: 0.6rem;
}

.lookbook-card.loading .loading-icon {
    width: 4rem;
    height: auto;
    object-fit: contain;
}

.loading-text {
    font-size: 1.2rem;
    line-height: 1.8rem;
    color: #6c63ff;
    text-align: center;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 4rem;
    height: 1rem;
}

.lds-ellipsis div {
    position: absolute;
    top: 0.4rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #6c63ff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    background: #D2D1FD;
    /* 첫 번째 원 */
    animation: lds-ellipsis1 0.6s infinite;
    left: 0rem;
}

.lds-ellipsis div:nth-child(2) {
    background: #B5B3FF;
    /* 두 번째 원 */
    animation: lds-ellipsis2 0.6s infinite;
    left: 0rem;
}

.lds-ellipsis div:nth-child(3) {
    background: #918EFD;
    /* 세 번째 원 */
    animation: lds-ellipsis2 0.6s infinite;
    left: 1.2rem;
}

.lds-ellipsis div:nth-child(4) {
    background: #6F6BFF;
    /* 네 번째 원 */
    animation: lds-ellipsis3 0.6s infinite;
    left: 2.4rem;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(1.2rem);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

/* 04번 */
.fitting-view {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;

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

/* 세로 기준 이미지 꽉차게 */
.fitting-image {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.fitting-image2 {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}


/* 뒤로가기 버튼 */
.btn-back {
    position: absolute;
    top: 1.6rem;
    left: 1.6rem;
    width: 2.4rem;
    height: 2.4rem;
    background: url('/assets/Web/img/icon/icon_back_wh.svg') no-repeat center/contain;
    border: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
    z-index: 10;
}

/* 하단 액션 영역 */
.action-bar {
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
    display: flex;
    gap: 1.6rem;
    /* 버튼 사이 간격 유지 */
    justify-content: space-between;
    align-items: center;
    padding: 0 1.6rem;
    /* 좌우 끝까지 */
    z-index: 10;
}

/* 아이콘 버튼들 */
.btn-icon {
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.btn-icon img {
    width: 2.4rem;
    height: 2.4rem;
    object-fit: contain;
    display: block;
}

.btn-icon.trash {
    background-image: url('/assets/Web/img/icon/icon-trash-fit.svg');
}

.btn-icon.share {
    background-image: url('/assets/Web/img/icon/icon-share-fit.svg');
}

.btn-back,
.btn-icon,
.btn-purchase {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

/* 구매하기 버튼 */
.btn-purchase {
    flex: 1;
    text-align: center;
    padding: 0.8rem 0;
    font-size: 1.6rem;
    line-height: 2.4rem;
    font-weight: bold;
    border-radius: 0.8rem;
    border: 1.5px solid #fff;
    background: transparent;
    /* 배경 제거 */
    color: #fff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

/* 그라데이션 박스 */
.bottom-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(102, 102, 102, 0) 100%);
    pointer-events: none;
    z-index: 5;
}

/* 미리핏 End*/

/* 장바구니 숫자 */
.cart-badge {
    position: absolute;
    display: none;
    top: 25px;
    right:0;
    background-color: #ff3b30; /* 빨간색 배경 */
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 12px;
    text-align: center;
    line-height: 1;
}

/* 이미지 확대 */
#imgZoomModal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    background-color: #000;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}
#imgZoomModal img {
    max-width: 100vw;
    max-height: 100vh;
    /*border-radius: 8px;*/
    /*box-shadow: 0 0 20px #000;*/
}
img.zoomable {
    cursor: zoom-in;
    width: 150px;
}
#imgZoomModal .close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 32px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    z-index: 10001; /* 이미지 위에 오도록 */
}

#imgZoomModal .close-btn:hover {
    color: #ccc;
}

/*--⭐리뷰 모달 CSS START */

/* 딤처리 */
.mi-modal-dim {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 900;
}

/* 모달 전체 */
.mi-review-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 420px;
    background: #fff;
    border-radius: 20px;
    max-height: 90vh;
    overflow-y: auto;
}

.mi-modal {
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
}


/* 상단 이미지 영역 */
.mi-modal-img-area {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

/* 사진 꽉 채우기 */
.mi-modal-img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 닫기 버튼 */
.mi-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;

    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0;

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

    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    border: none;

    cursor: pointer;
    z-index: 902;

    font-size: 0;
    line-height: 0;
    color: transparent;
}

.mi-modal-close svg {
    display: block;
}

/* 인디케이터 */
.mi-indicator {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 4px 10px;
    background: rgba(0,0,0,0.4);
    font-size: 12px;
    color: #fff;
    border-radius: 10px;
}

/* 텍스트 영역 */
.mi-modal-body {
    padding: 20px 18px 28px;
    background: #fff;
    border-radius: 0 0 24px 24px;
}

/* 아이디 + 날짜 */
.mi-header-line {
    display: flex;
    justify-content: space-between;
    font-size: 1.6rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 0.8rem;
}

.mi-date {
    font-size: 1.4rem;
    font-weight: 400;
    color: #BABABA;
}

/* 상품명 + 링크 */
.mi-product-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F5F5F5;
    padding: 1rem 0.8rem;
    font-size: 1.3rem;
    margin-bottom: 1.2rem;
    border-radius: 4px;
    gap: 0.8rem;
}

.mi-product {
    color: #555555;
    font-size: 1.3rem;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}


.mi-view-link {
    color: #FF4E3B;
    font-size: 1.3rem;
    font-weight: 400;
    text-decoration: underline;
    white-space: nowrap;
}

.mi-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 0.8rem;
}

.mi-stars .star {
    width: 18px;
    height: 18px;
    filter: grayscale(1) brightness(1.3);
    opacity: 0.5;
}

.mi-stars .star.active {
    filter: none;
    opacity: 1;
    color: #FA582F;
}


/* 리뷰 텍스트 - 3줄 제한 */
.mi-review-text {
    font-size: 1.5rem;
    color: #555555;
    line-height: 1.6;
    overflow: hidden;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    transition: all .25s ease;
}

/* 펼쳤을 때 */
.mi-review-text.expand {
    -webkit-line-clamp: unset;
    max-height: none;
}

/* 더보기 버튼 */
.mi-review-more-btn {
    margin-top: 10px;
    border: none;
    background: none;
    color: #BABABA;
    font-size: 1.3rem;
    padding: 0;
    cursor: pointer;
    display: none;
}

/*--⭐리뷰 모달 CSS END */

/************************************************************
 * WEB OVERRIDE (APP -> WEB 전환 1차)
 * 기준: min-width 600px 이상에서 웹 레이아웃 적용
 ************************************************************/

  :root{
    --web-gutter: 0px;          /* 기본 컨텐츠: 꽉 차게 */
    --web-slider-gutter: 20px;  /* 슬라이더/타이틀 여백 */
    --web-text-gutter: 12px;    /* 상품 텍스트(shop_txt) 여백 */
  }

  html, body { background: #f5f5f5; }
  
   html {
    font-size: 56.25%;
  }

  .wrap {
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    min-height: 100vh;
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
  }

  /* 기본 섹션(웹에서 꽉 차게) */
  .inner {
    padding-left: var(--web-gutter) !important;
    padding-right: var(--web-gutter) !important;
  }

  /* 대타이틀 여백 */
  .h-section-title,
  .promo-title,
  .live-title {
    padding-left: var(--web-slider-gutter) !important;
    padding-right: var(--web-slider-gutter) !important;
  }

  /* 슬라이더 계열: 좌측 여백 유지 */
  .review-section .review-wrap,
  .brand-section .brand-wrap,
  .service-banner .banner-wrap {
    padding-left: var(--web-slider-gutter) !important;
  }

  /* 슬라이더 마지막 카드 숨쉬기 */
  .review-section .review-card:last-child,
  .brand-section .brand-card:last-child,
  .service-banner .banner-item:last-child {
    margin-right: var(--web-slider-gutter) !important;
  }

  /* 상품 텍스트 영역(이미지는 edge-to-edge, 텍스트만 여백) */
  .shop_txt {
    padding-left: var(--web-text-gutter);
    padding-right: var(--web-text-gutter);
  }

  /* (선택) 리뷰 카드 폭 조절 */
  .review-section .review-card {
    width: 280px;
  }
  
  /* 2열 그리드 */
  .point_shop_list{
    width: 100%;
  	box-sizing: border-box;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* ✅ 핵심: minmax(0,1fr) */
    gap:12px;
    padding-left: var(--web-text-gutter);
    padding-right: var(--web-text-gutter);
  }

  .point_shop_list li a{
    width:100% !important; /* inline width:42.26vw 무력화 */
  }

  /* ✅ 인라인 height:60vw 덮어쓰기 */
  .point_shop_list li a figure{
   width: 100%;
  aspect-ratio: 3 / 4;      /* 세로형 썸네일 (원하면 4/5, 2/3 등으로 조절) */
  height: auto;             /* 고정 height 제거 */
  overflow: hidden;
  }

  /* ✅ 이미지 크롭 */
  .point_shop_list li a figure img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  
  
  /* 폰트/패딩은 rem */
.h-section-title { font-size: 1.8rem; margin-bottom: 1.2rem; }
.card { padding: 2.0rem; }

/* 테두리/갭은 px */
.card { border: 1px solid #eee; }
.grid { gap: 16px; }
  
  
  #alert_confirmCheckImage2 #bgCheckImage,
  #alert_confirmCheckImage3 #bgCheckImage {
    position: fixed !important;
    inset: 0 !important;
    z-index: 500 !important;
    display: block !important;
  }

  #alert_confirmCheckImage2 #bgCheckImage, 
  #alert_confirmCheckImage3 #bgCheckImage {
    /*position: absolute !important;*/
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
  }

  #alert_confirmCheckImage2 .alert, 
  #alert_confirmCheckImage3 .alert {
   /* position: absolute !important;*/
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: min(520px, calc(100% - 48px)) !important;
    /* height: 70vh !important; */
    max-height: calc(100% - 80px) !important;
    overflow: auto !important;

    background: #fff !important;
    border-radius: 10px !important;
    margin: 0 !important;
  }

  #alert_confirmCheckImage2 .alert img,
  #alert_confirmCheckImage3 .alert img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  
  .shop_prefer figure {
    width: 18px;
    height: 18px;
    flex: 0 0 18px; /* flex 늘어나는 것 방지 */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .shop_prefer figure img {
    width: 100%;
    height: auto;      /* ❌ 100% 쓰면 깨짐 */
    max-height: 100%;
    object-fit: contain;
    display: block;
  }
  
  /* 하단바 자체를 600 컨테이너로 고정 + 중앙 정렬 */
  .bottom_menu {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* 하단바 내부 패딩은 웹 기준으로 px로 통일 */
  .bottom_menu .inner {
    width: 100% !important;
    padding: 14px 24px !important;  /* 기존 1.4rem 1.8rem -> 웹 px */
    box-sizing: border-box;
    display: flex;
    gap: 10px; /* 기존 1rem -> 10px */
  }
  
  .bottom_menu.btm_hpbb .inner .bottom_point {
  	display: flex; 
  	justify-content: flex-start; 
  	gap: 20px !important;
  	align-items: center;
  }
   
  .bottom_menu.btm_hpbb .inner .bottom_point .bottom_txt .txt_point {   
  	text-align: left;
    font-size: 2.0rem;
    font-weight: 900;
    line-height: normal; 
  }
  
  /* 슬라이드: 모바일 vw 기반(150vw) → 웹에서는 600 컨테이너 기준 고정/안정화 */
  .detail_main .swiper {
    width: 100% !important;
    max-height: none !important;
    height: 70vh !important;           /* 기본 높이 */
    overflow: hidden;
    border-radius: 0;                    /* 필요하면 12px 같은 값으로 */
  }

  /* slide가 flex로 늘어나며 찌그러지는 케이스 방지 */
  .detail_main .swiper .swiper-wrapper,
  .detail_main .swiper .swiper-slide {
    height: 100% !important;
  }

  /* 이미지가 있는 경우(대부분 있음): 영역 꽉 채우고 크롭 */
  .detail_main .swiper .swiper-slide img,
  .detail_main .swiper .swiper-slide picture,
  .detail_main .swiper .swiper-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* 하단 텍스트/딤: 컨테이너 폭에 맞춰 중앙정렬 유지 */
  .detail_main .swiper .swiper-wrapper .swiper-slide .slide_txt_area {
    left: 0 !important;
    transform: none !important;

    width: 100% !important;             /* 600 컨테이너 안에서 100% */
    padding: 18px 24px 22px !important; /* 웹 여백 */
    row-gap: 14px !important;           /* 기존 2.1rem → 웹에서 조금 타이트 */
    box-sizing: border-box;

    /* 딤 강도/길이(웹에서 좀 더 자연스럽게) */
    background: linear-gradient(
      0deg,
      rgba(0,0,0,0.40) 0%,
      rgba(102,102,102,0.00) 100%
    ) !important;
  }
  
  /* 팝업 박스 (#alert_confirm 전용) */
  div#alert_confirm > div.alert#alert_confirm {
    width: min(520px, calc(100% - 48px)) !important;

    /* ✅ 짧으면 줄고, 길면 제한 + 스크롤 */
    height: auto !important;
    min-height: 0 !important;
    max-height: 60vh !important;     /* 취향: 55~70vh */
    overflow: hidden !important;      /* 스크롤은 inner가 담당 */

    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    background: #fff !important;
    border-radius: 24px !important;
    box-shadow: 0 14px 48px rgba(0,0,0,.18) !important;
    box-sizing: border-box !important;
  }

  /* ✅ 내부가 스크롤 담당(내용 많을 때만) */
  div#alert_confirm > div.alert#alert_confirm > .inner {
    height: auto !important;
    min-height: 0 !important;
    max-height: inherit !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;

    /* 필요하면 패딩 여기서 통제(인라인 padding 덮고 싶을 때) */
    /* padding: 22px 24px 20px !important; */
  }
  
  
  
  .alert .inner {
  	display: flex; 
  	flex-direction: column; 
  	justify-content: center; 
  	align-items: center; 
  	gap: 1.2rem;
  	padding: 20px !important;
  	}
  
    /* select_alert만 웹 스타일 적용 */
  .alert.select_alert {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: min(520px, calc(100% - 48px)) !important;
    padding: 22px 24px 20px !important;
    box-sizing: border-box !important;

    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 14px 48px rgba(0,0,0,.18) !important;

    /* 혹시 기존 width: calc(100% - 14rem) 같은게 남아있을 수 있어 강제 */
    max-width: 520px !important;
  }


  .alert {
	padding: 2.6rem 2rem 2rem 2rem;
	box-sizing: border-box;
	border-radius: 20px;
	background-color: #fff;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); 
	/* width: calc(100% - 14rem); */ 
	z-index: 101;
  }

  /* 내부 레이아웃 */
  .alert.select_alert > .inner {
    padding: 0 !important;           /* 바깥에서 패딩 주니 inner는 0 */
    box-sizing: border-box !important;
  }

  /* 타이틀/본문 */
  .alert.select_alert h5 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin: 0 0 10px !important;
    text-align: center !important;
  }

  .alert.select_alert p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 0 18px !important;
    color: #333 !important;
    text-align: center !important;
  }

  /* 버튼: 2개를 균등 2열 */
  .alert.select_alert .btn_box {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .alert.select_alert .btn_box .basic_btn {
    width: 100% !important;
    height: 44px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  /* 취소 버튼 톤(기존 cancel_btn이 있으면 그거 활용) */
  .alert.select_alert .btn_box .cancel_btn {
    background: #fff !important;
    border: 1px solid #ddd !important;
    color: #555 !important;
  }
  
   /* 장바구니 페이지 메인(부모) 기준 잡기 */
  .order_main,
  .main_order_main {
    position: relative;
    min-height: calc(100vh - 120px); /* 헤더/여백 고려 (필요시 조절) */
  }

  /* 빈 장바구니 안내 박스: 화면(600 랩) 기준으로 정중앙 */
  #cart_none {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    /* 가로 너무 커지지 않게 */
    width: min(360px, calc(100% - 48px)) !important;

    /* 하단 고정 버튼(주문하기) 영역만큼 살짝 위로 */
    margin-top: -40px !important;

    /* 내부 정렬 */
    display: none !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;

    z-index: 5 !important;
  }

  /* 버튼이 너무 작게/이상하게 보이면 */
  #cart_none button,
  #cart_none .btn_style01 {
    width: 100% !important;
    max-width: 240px !important;
  }
  
    .alert{
    max-width: 520px !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
  }

  .alert > .inner{
    height: auto !important;
    min-height: 0 !important;
    max-height: inherit !important;
    overflow-y: auto !important;
  }
  
    /* 버튼 영역: 모바일 100% → PC용 고정 폭 */
.alert .inner .popup_btn_area{
    width: auto !important;
    height: auto !important;
    margin: 16px auto 0 !important;

    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  /* 버튼: 각각 12rem로 고정 */
  .alert .inner .popup_btn_area .check_btn{
    width: 12rem !important;
    padding: 0.85rem 0 !important; /* 가로 padding 과다 방지 */
    white-space: nowrap !important;
  }

  /* 만약 다른 팝업에서 basic_btn도 쓰면 같이 */
  .alert .inner .popup_btn_area .basic_btn{
    width: 12rem !important;
    padding: 0.85rem 0 !important;
    white-space: nowrap !important;
  }
  
/* 버튼 영역: PC에서는 flex */
  .alert.select_alert .btn_box,
  .alert .popup_btn_area {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;          /* 버튼 간격 */
    width: 100% !important;
  }

  /* 버튼 크기 */
  .alert.select_alert .btn_box .basic_btn,
  .alert .popup_btn_area .check_btn {
    width: 12rem !important;
    padding: 0.85rem 0 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
  
    /* input + button을 한 줄로 */
  .input_point_area{
    display: flex !important;
    flex-direction: row !important;   /* 기존 column → row */
    align-items: center !important;
    gap: 12px !important;
    position: static !important;      /* absolute 버튼 쓰지 않게 */
    width: 100% !important;
  }

  /* span 래퍼도 폭 잡아주기 */
  .input_point_area > span{
    display: block !important;
  }

  /* 인풋 래퍼는 가로 꽉 */
  .input_point_area > span:first-child{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* 버튼 래퍼는 내용만큼(폭은 버튼에서 조절) */
  .input_point_area > span:last-child{
    flex: 0 0 auto !important;
  }

  /* 보유포인트 입력: 꽉차게 + 높이 5rem */
  .point_input{
    width: 100% !important;
    max-width: none !important;       /* 기존 23rem 제거 */
    height: 5rem !important;
    padding: 0 16px !important;       /* 세로는 height로 맞춤 */
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  /* 모두 사용하기: 가로 좀 넓게 + 높이 5rem */
  .point_btn{
    position: static !important;      /* 기존 absolute 제거 */
    height: 5rem !important;
    min-width: 160px !important;      /* <- 여기 수치 너가 원하는대로 조절 */
    padding: 0 18px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
  
    /* 결제 방식 카드 내부 정렬 */
  .order_main .order_option_row.line {
    padding: 20px 24px !important;
  }

  /* 라디오 버튼 감싸는 영역 */
  .order_main .order_option_one {
    display: grid !important;
    grid-template-columns: 1fr 1fr;  /* 2개 버튼 반반 */
    gap: 12px !important;
    text-align: center !important;
  }

  /* 실제 radio는 숨김 */
  .order_main .basic_radio2 {
    display: none;
  }

  /* 결제 버튼(label) */
  .order_main .basic_radio2 + label {
    width: 100% !important;          /* 꽉 차게 */
    height: 5rem !important;         /* 요청한 높이 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;           /* height로 정렬 */
    margin: 0 !important;

    border-radius: 12px !important;
    border: 1px solid #D7DDE1 !important;
    background: #fff !important;
    color: #6F6F6F !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer;
    box-sizing: border-box;
  }

  /* 선택된 상태 */
  .order_main .basic_radio2:checked + label {
    background: #000 !important;     /* 디자인 맞게 바꿔도 됨 */
    border-color: #000 !important;
    color: #fff !important;
  }
  
    /* 카드(회색 박스) 여백 통일 */
  .order_main .order_option_row {
    padding: 20px 24px !important;
    border-radius: 16px !important;
  }

  /* 결제 방식 라디오가 들어있는 행 */
  .order_main .order_option_row.line {
    row-gap: 0.6rem !important;
  }

  /* 라디오+라벨이 들어있는 래퍼 */
  .order_main .order_option_one {
    /* ✅ 2개면 2열로 딱 맞고, 많아지면 자동 줄바꿈 */
    display: grid !important;
    gap: 12px !important;
    text-align: center !important;

    /* 핵심: 자동 컬럼 (최소 160px, 공간되면 늘어남) */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    align-items: center;
  }

  /* 실제 radio 숨김 */
  .order_main input.basic_radio2 {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  /* 라벨을 버튼처럼 */
  .order_main input.basic_radio2 + label {
    width: 100% !important;
    height: 5rem !important;

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

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 12px !important;
    border: 1px solid #D7DDE1 !important;
    background: #fff !important;
    color: #6F6F6F !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
    cursor: pointer;

    /* 웹스러운 인터랙션 */
    transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
    user-select: none;
  }

  /* ✅ hover (앱엔 없던 부분) */
  .order_main input.basic_radio2 + label:hover {
    border-color: #bfc7cc !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
    transform: translateY(-1px);
  }

  /* ✅ 키보드 접근성 (PC에서 중요) */
  .order_main input.basic_radio2:focus-visible + label {
    outline: 3px solid rgba(250, 88, 47, .25) !important; /* 브랜드 컬러 느낌 */
    outline-offset: 2px;
  }

  /* ✅ 선택됨 */
  .order_main input.basic_radio2:checked + label {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.14) !important;
  }

  /* ✅ 선택된 상태에서 hover */
  .order_main input.basic_radio2:checked + label:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(0,0,0,.18) !important;
  }

  /* ✅ 비활성(혹시 disabled 쓸 경우 대비) */
  .order_main input.basic_radio2:disabled + label {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
  }
  
  
    /* ✅ 1) 기본 라인(보유포인트/최종결제 등) : 좌 라벨 / 우 금액 */
  .order_main .order_option_one {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    gap: 12px !important;
  }

  .order_main .order_option_one .option_type {
    text-align: left !important;
    white-space: nowrap;
  }

  .order_main .order_option_one .option_cnt {
    margin-left: auto !important;
    text-align: right !important;
    white-space: nowrap;
  }

  /* ✅ 2) 결제방식(라디오가 들어있는 줄)만 버튼 레이아웃 */
  /* 크롬/최신 브라우저 OK (:has 지원) */
  .order_main .order_option_one:has(> input.basic_radio2) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 12px !important;
    text-align: center !important;
    justify-items: stretch;
  }

  /* 라디오 숨김(결제방식 줄만 의미 있게 적용됨) */
  .order_main .order_option_one input.basic_radio2 {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  /* 결제 버튼 라벨 */
  .order_main .order_option_one input.basic_radio2 + label {
    width: 100% !important;
    height: 5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 12px !important;
    border: 1px solid #D7DDE1 !important;
    background: #fff !important;
    color: #6F6F6F !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
    cursor: pointer;
    transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
  }

  .order_main .order_option_one input.basic_radio2 + label:hover {
    border-color: #bfc7cc !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
    transform: translateY(-1px);
  }

  .order_main .order_option_one input.basic_radio2:checked + label {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.14) !important;
  }
  
  
    /* 카드(링크) 높이를 vw 대신 고정값으로 */
  .main .inner .main_list a {
    height: 56vh !important;     /* 포인트샵 상세는 720px 높이 */
    max-height: none !important;
  }

  /* figure도 카드 높이 100% 채우기 */
  .main .inner .main_list a figure.main_img {
    height: 100% !important;
  }

  /* 실제 이미지 cover로 꽉 채우기 */
  .main .inner .main_list a figure.main_img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }
  
  
  
    /* 섹션 여백 정리 */
  .product_section .inner {
    max-width: 600px;
    margin: 48px auto;
  }

  /* 타이틀 폭 통일 */
  .product_section .inner .product_title {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* 리스트 기본 */
  .product_section .product_container ul {
    display: flex;
    flex-direction: column;
    gap: 48px;              /* 카드 간 간격 */
  }

  /* li 패딩 정리 (인라인 padding 제거 보정) */
  .product_section .product_container ul li {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* 카드 1개 */
  .product_section .product_container ul li .product_one {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    align-items: center;
    margin-top: 0;          /* 모바일 margin 제거 */
  }

  /* 짝수 카드 반전 */
  .product_section .product_container ul li:nth-child(even) .product_one {
    grid-template-columns: 1fr 240px;
  }

  .product_section .product_container ul li:nth-child(even) .product_one figure {
    order: 2;
  }

  /* 이미지 영역 */
  .product_section .product_container ul li .product_one figure {
    width: 240px;
    max-width: none;
    height: auto;
    aspect-ratio: 1 / 1;    /* ← 핵심: 비율 고정 */
  }

  .product_section .product_container ul li .product_one figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* 텍스트 영역 */
  .product_section .product_container ul li .product_one .product_info {
    gap: 12px;
  }

  /* 짝수 텍스트 우측 정렬 */
  .product_section .product_container ul li:nth-child(even)
  .product_one .product_info {
    text-align: right;
    align-items: flex-end;
  }

  /* 상품명 */
  .product_section .product_container ul li
  .product_one .product_info .product_name {
    font-size: 1.6rem !important;
    line-height: 1.4;
  }

  /* Details 링크 */
  .product_section .product_container ul li
  .product_one .product_info a {
    font-size: 1.4rem !important;
    gap: 10px;
  }

  /* 짝수 Details 위치 */
  .product_section .product_container ul li:nth-child(even)
  .product_one .product_info a {
    justify-content: flex-end;
    font-size: 1.4rem !important;
  }
  
    /* 카드 전체 정렬은 그대로 두고 */
  .product_section .product_container ul li .product_one {
    gap: 3.2rem;
  }

  /* ✅ 이미지 비율 컨테이너 */
  .product_section .product_container ul li .product_one figure {
    width: 240px !important;        /* 원하는 값으로 조절 */
    aspect-ratio: 1 / 1;            /* 정사각형 */
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }

  /* ✅ 인라인 style 박살내기 핵심 */
  .product_section .product_container ul li .product_one figure img {
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    display: block;
  }
  
  
    :root{
    --prefer-chart-size: 180px;     /* ← 도넛 차트 크기(원하는 값으로) */
    --prefer-legend-font: 14px;     /* 범례 텍스트 */
    --prefer-tab-mbti: 16px;        /* 상단 MBTI (ISFJ/ISTJ) */
    --prefer-tab-percent: 13px;     /* MBTI 아래 퍼센트 */
    --prefer-age-font: 13px;        /* (있다면) 나이/보조텍스트 */
    --prefer-fold-font: 14px;       /* 하단 '접기' */
  }

  .prefer_section .inner .prefer_box
  .tab .tab_container .tab_chart_dougnut .canvas_area{
    width: var(--prefer-chart-size) !important;
    height: var(--prefer-chart-size) !important;
    flex: 0 0 var(--prefer-chart-size) !important;
  }

  .prefer_section .inner .prefer_box
  .tab .tab_container .tab_chart_dougnut .canvas_area canvas{
    width: var(--prefer-chart-size) !important;
    height: var(--prefer-chart-size) !important;
    display: block !important;
  }

  .prefer_section .inner .prefer_box
  .tab .tab_container .tab_chart_dougnut{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px; /* 차트-범례 간격 */
  }

  #legend-container p,
  #legend-container-male p{
    font-size: var(--prefer-legend-font) !important;
    line-height: 1.2 !important;
  }

  #legend-container span,
  #legend-container-male span{
    width: 14px !important;
    height: 14px !important;
    margin-right: 8px !important;
  }

  .prefer_box .tab .tab_nav .tab_txt #bestWomanMBTI,
  .prefer_box .tab .tab_nav .tab_txt #bestManMBTI{
    font-size: var(--prefer-tab-mbti) !important;
    line-height: 1.1 !important;
  }

  .prefer_box .tab .tab_nav .tab_txt #bestWomanMBTI .per,
  .prefer_box .tab .tab_nav .tab_txt #bestManMBTI .per{
    font-size: var(--prefer-tab-percent) !important;
    font-weight: 600;
  }

  .prefer_box .tab .tab_nav .tab_txt #bestWomanAge,
  .prefer_box .tab .tab_nav .tab_txt #bestManAge{
    font-size: var(--prefer-age-font) !important;
  }

  .prefer_box .tab_btn_area #tabMoreBtn span{
    font-size: var(--prefer-fold-font) !important;
  }

  .prefer_box .tab_btn_area #tabMoreBtn svg{
    width: 10px;
    height: auto;
  }
  
    /* 페이지 이동 버튼 래퍼 */
  #pageMoveBtn{
    top: 50% !important;          /* 세로 중앙 */
    bottom: auto !important;      /* 기존 bottom 무력화 */
    transform: translateY(-50%);
    left: 0;
    right: 0;
    pointer-events: none;         /* 이미지 위에 떠있어도 클릭 영역 정리 */
  }

  /* 버튼은 클릭 가능 */
  #pageMoveBtn a{
    pointer-events: auto;
  }

  /* 버튼 이미지 크기 (필요시 조절) */
  #pageMoveBtn img{
    width: 48px;                  /* ← 원하는 크기로 */
    height: auto;
    opacity: 0.9;
    transition: opacity .2s ease;
  }

  #pageMoveBtn a:hover img{
    opacity: 1;
  }
  
  .main_header .notice_banner {
  display:block;
  gap: 6px;
  padding: 1.2rem 1.2rem;
  margin: 0rem calc(-2rem - 2px) calc(-1.4rem - 2px);
  }
  
  
.main_header .notice_banner .notice_banner_txt {
	color: #000; 
	font-size: 14px; 
	line-height: 1.8rem; 
	vertical-align: middle;
	color: #FFFFFF; 
	margin-right: 20px;
	}


  /* ─────────────────────────
   1) TOP BAR (black)
   - #setTopBar 를 "바 컨테이너"로 사용
   ───────────────────────── */

  #setTopBar {
    position: relative !important;
    height: 40px !important;
    background: #000 !important;

    max-width: 600px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }

  /* 탑바 링크(로고/포인트 한 줄) */
  #setTopBar .notice_banner {
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 0 20px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
  }

  /* 로고 이미지(왼쪽) */
  #setTopBar .notice_banner img[src*="mireview_bi_horizontal"] {
    width: 130px !important;
    height: 18px !important;
    display: block !important;
    margin: 0 !important;
  }

  /* 포인트 영역(오른쪽) */
  #setMyPoint {
    display: none; /* 기본은 숨김(기존 로직 존중) */
    align-items: center;
    gap: 8px;
  }

  /* JS가 display:block 으로 켜도 flex 유지 */
  #setMyPoint[style*="display: block"],
  #setMyPoint[style*="display:block"] {
    display: flex !important;
  }

  /* 포인트 아이콘 */
  #setMyPoint img {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    margin: 0 !important;
  }

  /* 포인트 텍스트 */
  #setTopBar .notice_banner .notice_banner_txt {
    font-size: 14px !important;
    line-height: 1 !important;
    color: #fff !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }


  /* ─────────────────────────
   2) ROLLING BAR (gray)
   - #setRollingTitle 를 "바 컨테이너"로 사용
   ───────────────────────── */
   
	#setRollingTitle {
	  display: none;
	}
	
	/* 준비 완료되면 보여주기 */
	#setRollingTitle.is-ready {
	  display: block;
	}
	
	/* 롤링 내부 텍스트 색은 확정으로 박아두기 (흰색 상속/초기값 방지) */
	#setRollingTitle .notice_banner_txt {
	  color: #111 !important; 
	}   
   
  /* 롤링바 컨테이너(40px 고정) */
  #setRollingTitle{
    height: 40px !important;
    background: #F6F6F6 !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    display: none; /* 기본 숨김, JS에서 show() */
  }

  #setRollingTitle .notice_banner{
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
  }

  #setRollingTitle .rb-left{
    display:flex;
    align-items:center;
    gap: 8px;
    min-width: 0; /* 말줄임 위해 */
  }

  #setRollingTitle .rb-ico{
    width: 18px !important;
    height: 18px !important;
    display:block;
    flex: 0 0 auto;
  }

  #setRollingTitle .rb-arr{
    width: 18px !important;
    height: 18px !important;
    display:block;
    flex: 0 0 auto;
    margin-right:0px !important;
  }

  #setRollingTitle .rb-txt{
    font-size: 14px !important;
    line-height: 1 !important;
    color: #111 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  

  .main_header .notice_banner {
    gap: unset !important;
    padding: unset !important;
    margin: unset !important;
  }

  .main_header .notice_banner .notice_banner_txt {
    margin-right: unset !important;
  }

  .basic_header {
    width: 100%; 
    padding: 1.9rem 2rem; 
    box-sizing: border-box; 
    background-color: #fff; 
    margin-top: 80px;
  }
.basic_header_only_topbar {
    width: 100%; 
    padding: 1.9rem 2rem; 
    box-sizing: border-box; 
    background-color: #fff; 
    margin-top: 40px;
  }
  
  
  
  /* =========================
   WEB600/PC : 가로가 더 넓게 보이게
========================= */
@media (min-width: 600px){
  .point_shop_list li a figure{
    aspect-ratio: 3 / 4;     /* PC 비율 */
    max-height: 320px;       /* ✅ 이거로 “너무 커짐” 방지 (원하면 180~260 조절) */
    height: auto !important;
  }
  
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 80px; /* 화면 가운데 아래쪽 */
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8); /* 불투명 검정 */
    color: #fff;
    padding: 12px 20px;
    border-radius: 999px; /* 둥글게 */
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 9999;
    text-align: center;
    width: max-content;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px);
}

/* ul 기본 리셋 */
#orderProductList{
  margin: 0 !important;
  padding: 0 !important;
}

/* <ui> 태그를 컨테이너처럼 취급 (원인 해결 핵심) */
#orderProductList > ui{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 카드(li) 간격 + 좌우 패딩(인라인 패딩 덮기) */
#orderProductList > ui > li{
  list-style: none !important;
  box-sizing: border-box !important;

  padding-left: 20px !important;
  padding-right: 20px !important;

  margin: 28px 0 0 0 !important;
}
#orderProductList > ui > li:first-child{
  margin-top: 0 !important;
}

/* 카드 1개: 이미지 + 텍스트 */
#orderProductList > ui > li .product_one{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  width: 100% !important;
  gap: 20px !important;

  margin: 0 !important;
}

/* ✅ 짝수는 좌우 반전 */
#orderProductList > ui > li:nth-child(even) .product_one{
  flex-direction: !important;
}

/* 이미지 박스(정사각) */
#orderProductList > ui > li .product_one figure{
  margin: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;

  /* 모바일~PC 자동 대응 */
  width: clamp(150px, 44vw, 240px) !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}

/* ✅ 인라인 style="width:16rem;height:16rem" 완전 무시 */
#orderProductList > ui > li .product_one figure img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* 관리자에서 cover/contain 상관없이 안정적 */
}

/* 텍스트 영역 */
#orderProductList > ui > li .product_one .product_info{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* 짝수 텍스트 우측 정렬 */
#orderProductList > ui > li:nth-child(even) .product_one .product_info{
  text-align: right !important;
  align-items: flex-end !important;
}

/* 웹600/PC에서 이미지 폭 고정(원하면 숫자 조절) */
@media screen and (min-width: 600px){
  #orderProductList > ui > li .product_one figure{
    width: 240px !important;
  }
}

/* 기본(홀수): 이미지 왼쪽, 텍스트 오른쪽 */
#orderProductList > ui > li .product_one{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#orderProductList > ui > li .product_one figure{ order: 1 !important; }
#orderProductList > ui > li .product_one .product_info{ order: 2 !important; }

/* ✅ 짝수: 텍스트 왼쪽, 이미지 오른쪽 */
#orderProductList > ui > li:nth-child(even) .product_one figure{ order: 2 !important; }
#orderProductList > ui > li:nth-child(even) .product_one .product_info{ order: 1 !important; }

/* 짝수 텍스트 정렬 */
#orderProductList > ui > li:nth-child(even) .product_one .product_info{
  text-align: right !important;
  align-items: flex-end !important;
}