.mypage { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 40px; position: relative; }
.mypage.pament-list { padding-bottom: 20px; }
.mypage .user { width: 100%; margin-top: 40px; background: #f9f9f9; padding: 50px 0; border-bottom: 1px solid #eee; }
.mypage .user .column { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.mypage .user .column .between { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.mypage .user .column .between .name { display: flex; align-items: center; gap: 5px; }
.mypage .user .column .between .name h2 { font-size: 28px; font-weight: bold; }
.mypage .user .column .between .name p { font-size: 24px; font-weight: 500; margin-top: 4px; }
.mypage .user .column .between .buttons { display: flex; gap: 10px; }
.mypage .user .column .between .buttons .round-btn { background: #fff; border: 1px solid #ddd; border-radius: 30px; padding: 10px 20px; display: flex; align-items: center; gap: 5px; }
.mypage .user .column .between .buttons .round-btn p { font-size: 14px; color: #333; }
.mypage .user .column .between .buttons .round-btn i { font-size: 16px; color: #555; }
.mypage .user .card-wrap { width: 100%; display: flex; gap: 20px; }
.mypage .user .card-wrap .card { flex: 1; width: 100%; height: 157px; background: #3a573e; padding: 25px 30px; border-radius: 10px; }
.mypage .user .card-wrap .card .content { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; width: 100%; height: 100%; }
.mypage .user .card-wrap .card .content .title { margin-bottom: 10px; }
.mypage .user .card-wrap .card .content .title p { color: #fff; font-size: 16px; }
.mypage .user .card-wrap .card .content .inner { display: flex; justify-content: space-between; align-items: center; }
.mypage .user .card-wrap .card .content .inner .img { width: 32px; height: 32px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.mypage .user .card-wrap .card .content .inner .img.coupon { background-image: url(../../images/icon/coupon-icon.svg); }
.mypage .user .card-wrap .card .content .inner .img.seed { background-image: url(../../images/icon/seed-icon.svg); }
.mypage .user .card-wrap .card .content .inner .number { display: flex; align-items: baseline; gap: 5px; color: #fff; }
.mypage .user .card-wrap .card .content .inner .number button { font-size: 32px; font-weight: bold; color: white; text-decoration: underline; }
.mypage .user .card-wrap .card .content .inner .number p { font-size: 16px; }
.mypage .mypage-list { padding: 50px 0; }
.mypage .mypage-list .list { margin-bottom: 50px; }
.mypage .mypage-list .list:last-child { margin-bottom: 0; }
.mypage .mypage-list .list .tit { display: flex; align-items: center; gap: 10px; padding-bottom: 15px; border-bottom: 2px solid #222; }
.mypage .mypage-list .list .tit img { width: 28px; }
.mypage .mypage-list .list .tit p { font-size: 20px; font-weight: bold; }
.mypage .mypage-list .list ul { padding-top: 10px; }
.mypage .mypage-list .list ul li { padding: 14px 0; border-bottom: 1px solid #eee; }
.mypage .mypage-list .list ul li:last-child { border-bottom: 0; }
.mypage .mypage-list .list ul li a { font-size: 16px; color: #555; font-weight: 500; }
.mypage .mypage-list .list ul .sub-list { width: 100%; display: flex; flex-direction: column; padding: 0; border-bottom: 1px solid #eee; }
.mypage .mypage-list .list ul .sub-list .accordion { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; cursor: pointer; }
.mypage .mypage-list .list ul .sub-list .accordion a { color: #222; }
.mypage .mypage-list .list ul .sub-list .accordion i { font-size: 18px; font-weight: 600; color: #333; }
.mypage .mypage-list .list ul .sub-list .panel { display: none; }
.mypage .mypage-list .list ul .sub-list .panel .items-wrap { display: flex; }
.mypage .mypage-list .list ul .sub-list .panel .items-wrap .item { flex: 1; padding: 22px 0; font-size: 14px; color: #333; background: #fafafa; border-radius: 0; cursor: pointer; text-align: center; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 5px; border-top: 1px solid #eee; }
.mypage .mypage-list .list ul .sub-list .panel .items-wrap .item + .item { border-left: 1px solid #eee; }
.mypage .mypage-list .list ul .sub-list .panel .items-wrap .item.act { color: #23b16c; border: 1px solid #23b16c; font-weight: 700; }
.mypage .logout { display: none; }
.mypage .myinfo { width: 100%; display: flex; flex-direction: row; justify-content: center; gap: 40px; padding: 40px 0 0 10px; align-items: stretch; }
.mypage .myinfo .wraper { margin: 0; }
.mypage .myinfo .side-navi { padding: 60px 0 40px; }
.mypage .myinfo .contain { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 20px; }
.mypage .myinfo .contain .main-content { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 40px; }
.mypage .myinfo .contain .main-content .title { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 2px solid #333; }
.payment-content { width: 100%; }
.mypage .myinfo .contain .main-content .title .titl h3 { font-size: 28px; font-weight: 700; letter-spacing: -0.75px; line-height: 1; }
.mypage .myinfo .contain .main-content .title .button-wrap { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.mypage .myinfo .contain .main-content .title .button-wrap button { display: flex; height: 35px; flex-direction: row; align-items: center; justify-content: center; gap: 5px; padding: 0 30px; border-radius: 5px; font-size: 14px; letter-spacing: -0.75px; color: #fff; line-height: 1; font-weight: 500; }
.mypage .myinfo .contain .main-content .title .button-wrap .delete-btn .icon { width: 16px; height: 16px; background: #fff; border-radius: 2px; display: flex; flex-direction: row; align-items: center; justify-content: center; }
.mypage .myinfo .contain .main-content .title .button-wrap .delete-btn .icon i { color: #f3544b; font-size: 16px; transition: 0.3s; }
.mypage .myinfo .contain .main-content .title .button-wrap .delete-btn:disabled .icon i { color: #c9caca; }
.mypage .myinfo .contain .main-content .title .button-wrap .delete-btn { background: #f3544b; }
.mypage .myinfo .contain .main-content .title .button-wrap .delete-btn:disabled { background: #dadada; }
.myinfo .side-navi .side-navi-bar { display: flex; flex-direction: column; align-items: flex-start; width: 160px; gap: 70px; }
.myinfo .side-navi .side-navi-bar .title h3 { font-size: 24px; line-height: 1; color: #333; font-weight: 700; letter-spacing: -0.75px; }
.myinfo .side-navi .side-navi-bar .navi-bar-inner { width: 100%; }
.myinfo .side-navi .navi-list { display: flex; flex-direction: column; align-items: flex-start; gap: 70px; }
.myinfo .side-navi .navi-list .depth1 { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.myinfo .side-navi .navi-list .depth1 .navi-item { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.myinfo .side-navi .navi-list .depth1 .navi-item img { width: 20px; height: 20px; object-fit: contain; }
.myinfo .side-navi .navi-list .depth1 .navi-item span { font-size: 18px; line-height: 1; font-weight: 700; color: #333; letter-spacing: -0.75px; }
.myinfo .side-navi .depth2-list { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.myinfo .side-navi .depth2-list .depth2 .navi-item { font-size: 16px; line-height: 1; font-weight: 500; color: #333; letter-spacing: -0.75px; transition: 0.36s; }
.myinfo .side-navi .depth2-list .depth2 .navi-item:hover { color: #23b16c; }
.myinfo .side-navi .depth2-list .depth2 .navi-item.act { color: #23b16c; font-weight: 600; }
.myinfo .payment-content .card-list { width: 100%; display: flex; flex-direction: column; align-items: center; }
.myinfo .payment-content .card-list .list-header { width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; padding: 0 20px; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid #dadada; }
.myinfo .payment-content .card-list .list-header .tit { font-size: 24px; font-weight: 600; color: #000; line-height: 1; letter-spacing: -0.75px; }
.myinfo .payment-content .card-list .list-header .number { font-size: 24px; font-weight: 500; color: #888; line-height: 1; letter-spacing: -0.75px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; }
.myinfo .payment-content .card-list .list-header .tit + .number::before { content: ""; display: block; width: 1px; height: 24px; background: #dadada; }
.myinfo .payment-content .card-list .card-wrap { width: 100%; height: fit-content; padding: 20px; transition: 0.3s; }
.myinfo .payment-content .card-list .card-wrap .cards { width: 100%; display: flex; flex-wrap: wrap; gap: 20px; transition: 0.3s; }
.myinfo .payment-content .card-list .cards .card-item { width: calc(50% - 10px); display: flex; gap: 10px; border: 1px solid #eee; border-radius: 10px; position: relative; transition: 0.3s; }
.myinfo .payment-content .card-list .cards .card-item .item-wrap { min-width: 0; width: 100%; padding: 20px 30px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; position: relative; }
.myinfo .payment-content .card-list .cards .card-item .card-info { width: calc(100% - 110px); display: flex; flex-direction: row; align-items: center; gap: 15px; }
.myinfo .payment-content .card-list .cards .card-item .card-info .card-thumb { min-width: 85px; height: 55px; border-radius: 5px; overflow: hidden; transition: 0.3s; }
.myinfo .payment-content .card-list .cards .card-item .card-info .card-thumb img { width: 100%; height: 100%; object-fit: contain; }
.myinfo .payment-content .card-list .cards .card-item .card-info .card-text { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; max-width: 209px; min-width: 0; transition: 0.3s; }
.myinfo .payment-content .card-list .cards .card-item .card-info .card-text .card-bank { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; transition: 0.3s; }
.myinfo .payment-content .card-list .cards .card-item .card-info .card-text .card-bank p { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myinfo .payment-content .card-list .cards .card-item .card-info .card-text .card-bank.no-badge p { max-width: 100%; }
.myinfo .payment-content .card-list .cards .card-item .card-info .card-text .card-bank .primary-badge { flex-shrink: 0; padding: 3px 8px; border-radius: 100px; background: #eefbf1; font-size: 13px; font-weight: 500; color: #23b16c; letter-spacing: -0.75px; line-height: 1; }
.myinfo .payment-content .card-list .cards .card-item .card-info .card-text .card-number { font-size: 16px; color: #888; line-height: 1; font-weight: 400; max-width: 100%; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myinfo .payment-content .card-list .cards .card-item .card-actions { position: relative; align-self: flex-start; }
.myinfo .payment-content .card-list .cards .card-item .card-actions .menu-btn { color: #888; }
.myinfo .payment-content .card-list .cards .card-item .card-actions .floating-menu { position: absolute; right: 0; top: 100%; background: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); z-index: 10; display: none; flex-direction: column; align-items: flex-start; transition: 0.3s; }
.myinfo .payment-content .card-list .cards .card-item .card-actions .floating-menu button { width: 130px; height: 37px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 10px 15px; font-size: 14px; letter-spacing: -0.75px; line-height: 1; font-weight: 400; }
.myinfo .payment-content .card-list .cards .card-item .card-actions .floating-menu .edit-btn { color: #888; }
.myinfo .payment-content .card-list .cards .card-item .card-actions .floating-menu .delete-btn { color: #ff3b30; }
.myinfo .payment-content .card-list .cards .card-item .card-actions .floating-menu.active { display: flex; }
.myinfo .payment-content .card-item input[type="checkbox"] { display: none; }
.myinfo .payment-content .checkmark { position: absolute; top: 8px; left: 8px; width: 16px; height: 16px; background: #555; border-radius: 2px; flex-direction: row; align-items: center; justify-content: center; display: none; transition: 0.3s; }
.myinfo .payment-content .checkmark i { color: #fff; }
.myinfo .payment-content .card-item input[type="checkbox"]:checked + .checkmark { display: flex; }
.myinfo .payment-content .card-item:has(input[type="checkbox"]:checked), .myinfo .payment-content .card-item:hover { border-color: #23b16c; }
.myinfo .contents .add-btn { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; max-width: 350px; width: 100%; height: 55px; border-radius: 5px; background: #f1faf7; border: 1px solid #23b16c; transition: 0.3s; }
.myinfo .contents .add-btn .icon { width: 20px; height: 20px; border-radius: 100%; background: #23b16c; display: flex; flex-direction: row; align-items: center; justify-content: center; }
.myinfo .contents .add-btn .icon i { color: #fff; font-size: 18px; line-height: 1; }
.myinfo .contents .add-btn p { color: #23b16c; font-size: 16px; font-weight: 700; letter-spacing: -0.75px; line-height: 1; }
/* 배송지관리 */
.myinfo .address-content { width: 100%; display: flex; flex-direction: column; gap: 40px; }
.myinfo .address-content .location-list { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.myinfo .address-content .location-list .location-item { width: 100%; height: 160px; padding: 30px 20px; border-radius: 10px; border: 1px solid #eee; background: #fff; display: flex; flex-direction: column; justify-content: center; }
.myinfo .address-content .location-list .location-item.default { border: 1px solid #23b16c; }
.location-info { width: 100%; display: flex; flex-direction: column; height: 100%; gap: 12px; justify-content: center; }
.location-info .name { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; transition: 0.3s; }
.location-info .name p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 18px; line-height: 100%; letter-spacing: -0.75px; }
.primary-badge { flex-shrink: 0; padding: 5px 8px; border-radius: 3px; background: #23b16c; font-size: 13px; font-weight: 500; color: #fff; letter-spacing: -0.75px; line-height: 1; }
.location-info .row-info { width: 100%; display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; }
.location-info .row-info .col-info { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.location-info .row-info .col-info span { font-size: 14px; font-weight: 400; line-height: 1; color: #333; }
.location-info .row-info .col-info .address { white-space: normal; word-break: break-word; line-height: 1.4; word-break: keep-all; }
.location-info .row-info .actions { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; min-width: 70px; }
.location-info .row-info .actions button { font-weight: 400; font-size: 13px; line-height: 100%; letter-spacing: -0.75px; color: #888; display: flex; flex-direction: row; align-items: center; gap: 10px; }
.location-info .row-info .actions button + button::before { content: ""; display: block; width: 1px; height: 12px; background: #888; }
.myinfo .address-content .add-btn { border: 1px solid #eee; background: #fff; }
.myinfo .address-content .add-btn .icon { background: #fff; }
.myinfo .address-content .add-btn .icon i { color: #23b16c; }
/* 배송지수정 */
.address-edit-page .main-content { padding-top: 30px; }
.address-edit-page .address-form { width: 100%; display: flex; flex-direction: column; gap: 30px; }
.address-edit-page .address-form .form-group { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.address-edit-page .address-form .form-group label { font-size: 14px; color: #666; font-weight: 400; }
.address-edit-page .address-form .form-group .form-input { border-radius: 5px; padding: 10px 20px; height: 45px; font-size: 14px; letter-spacing: -0.75px; line-height: 1; }
.address-edit-page .address-form .form-group .address-search { width: 100%; position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.address-edit-page .address-form .form-group .address-search .form-input.zipcode { width: 100%; padding: 10px 40px 10px 20px; }
.address-edit-page .address-form .form-group .address-search .search-btn { min-width: 20px; height: 20px; max-width: 20px; position: absolute; right: 16px; }
.address-edit-page .address-form .form-group .address-search .search-btn .ico.search { width: 100%; height: 100%; background: url(../../images/main/search_icon_dark.svg) 50% 50% / contain no-repeat; }
.address-edit-page .address-form .bottom-actions { width: 100%; }
.address-edit-page .address-form .bottom-actions .save-btn { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; height: 55px; background-color: #23b16c; color: #fff; font-size: 16px; color: #fff; line-height: 1; letter-spacing: -0.75px; font-weight: 600; }
.more-wrap { position: relative; display: none; }
.more-wrap .menu-btn { color: #888; }
.more-wrap .floating-menu { position: absolute; right: 0; bottom: -70px; background: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); z-index: 10; display: none; flex-direction: column; align-items: flex-start; transition: 0.3s; }
.more-wrap .floating-menu button { width: 130px; height: 37px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 10px 15px; font-size: 14px; letter-spacing: -0.75px; line-height: 1; color: #7d7d7d; font-weight: 400; }
.more-wrap .floating-menu button + .button { border-top: 1px solid; }
.more-wrap .floating-menu .edit-btn { color: #888; }
.more-wrap .floating-menu .delete-btn { color: #ff3b30; }
.more-wrap .floating-menu.active { display: flex; }
.mobile-payment-add { width: 100%; min-height: 100vh; background: #fff; padding: 20px; padding-top: 80px; }
.payment-form, .verification-form, .card-form { width: 100%; max-width: 400px; margin: 0 auto; }
.form-header { margin-bottom: 30px; text-align: center; }
.info-text p { font-size: 16px; color: #333; line-height: 1.5; }
.form-group label { display: block; font-size: 16px; font-weight: 600; color: #333; min-width: 100px; }
.form-group input, .form-group select { width: 100%; height: 50px; padding: 0 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; background: #fff; }
.form-group input:focus, .form-group select:focus { outline: none; border-color: #23b16c; }
.resident-input, .phone-input { display: flex; align-items: center; gap: 10px; }
.resident-input input, .phone-input input, .phone-input select { flex: 1; }
.resident-input .separator, .phone-input .separator { font-size: 18px; color: #666; font-weight: 500; }
.card-number-input { display: flex; gap: 8px; }
.card-number-input input { flex: 1; text-align: center; font-size: 18px; font-weight: 600; }
.expiry-input { display: flex; align-items: center; gap: 8px; }
.expiry-input input { flex: 1; text-align: center; }
.expiry-input .separator { font-size: 18px; color: #666; font-weight: 500; }
.verification-input { display: flex; align-items: center; gap: 15px; }
.verification-input input { flex: 1; }
.timer { font-size: 14px; color: #ff3b30; font-weight: 600; min-width: 50px; }
.resend-btn { background: none; border: none; color: #23b16c; font-size: 14px; text-decoration: underline; cursor: pointer; margin-top: 10px; }
.note { font-size: 14px; color: #666; margin-top: 8px; }
.next-btn, .confirm-btn { width: 100%; height: 55px; background: #ddd; border: none; border-radius: 8px; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; transition: 0.3s; }
.next-btn.active, .confirm-btn.active { background: #23b16c; }
.next-btn:disabled, .confirm-btn:disabled { background: #ddd; cursor: inherit; }
.terms-section { margin-top: 40px; padding: 20px; background: #f8f9fa; border-radius: 12px; }
.terms-header { margin-bottom: 20px; }
.all-agree { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.all-agree input[type="checkbox"] { display: none; }
.all-agree .checkmark { width: 20px; height: 20px; border: 2px solid #ddd; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: 0.3s; }
.all-agree input[type="checkbox"]:checked + .checkmark { background: #23b16c; border-color: #23b16c; }
.all-agree .label-text { font-size: 16px; font-weight: 600; color: #333; }
.terms-list { display: flex; flex-direction: column; gap: 15px; }
.term-item { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.term-item input[type="checkbox"] { display: none; }
.term-item .checkmark { width: 18px; height: 18px; border: 2px solid #ddd; border-radius: 3px; display: flex; align-items: center; justify-content: center; transition: 0.3s; }
.term-item input[type="checkbox"]:checked + .checkmark { background: #23b16c; border-color: #23b16c; }
.term-text { flex: 1; font-size: 14px; color: #333; line-height: 1.4; }
.term-item i { color: #666; font-size: 14px; }
.agree-next-btn { width: 100%; height: 55px; background: #ddd; border: none; border-radius: 8px; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; transition: 0.3s; }
.agree-next-btn.active { background: #23b16c; }
.agree-next-btn:disabled { background: #ddd; cursor: inherit; }
.close-link { text-align: center; margin-top: 20px; color: #888; font-size: 15px; cursor: pointer; letter-spacing: -0.75px; font-weight: 500; }
.card-registration { padding: 30px 20px 0; display: flex; width: 100%; flex-direction: column; justify-content: space-between; gap: 30px; }
.card-registration .registration-wrap { width: 100%; display: flex; flex-direction: column; gap: 30px; }
.card-registration .action-buttons { width: 100%; }
.card-registration .instruction p { font-size: 20px; font-weight: 600; letter-spacing: -0.75px; line-height: 1.4; color: #333; }
.card-registration .instruction small { font-size: 16px; font-weight: 400; letter-spacing: -0.75px; line-height: 1.4; color: #555; }
.input-item-wrapper { width: 100%; display: flex; flex-direction: column; gap: 10px; position: relative; }
.input-item-wrapper .input-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.input-item-wrapper .input-item .title { display: flex; max-width: 190px; width: 100%; align-items: flex-start; flex-direction: row; gap: 2px; }
.input-item-wrapper .input-item .title label { font-size: 16px; color: #333; font-weight: 600; }
.input-item-wrapper .input-item .input-box-wrap { width: 100%; display: flex; align-items: center; flex-direction: column; gap: 10px; }
.input-item-wrapper .input-item .input-box { width: 100%; display: flex; align-items: center; flex-direction: row; gap: 10px; }
.input-item-wrapper .input-item .input-box .input { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 13px; }
.input-item-wrapper .input-item .input-box .input .ipt { width: 100%; }
.input-item-wrapper .input-item .input-box.underline .input .ipt { border: none; border-bottom: 1px solid #dadada; border-radius: 0; }
.input-item-wrapper .input-item .input-box.id-number .input .back { width: 100%; display: flex; flex-direction: row; gap: 13px; }
.input-item-wrapper .input-item .input-box.id-number .input .dash { width: 25px; height: 1px; display: block; background: #888; }
.input-item-wrapper .input-item .input-box.id-number .input .back .rrn-back { min-width: 55px; max-width: 55px; text-align: center; }
.input-item-wrapper .input-item .input-box.id-number .input .back .masked { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 5px; justify-content: space-evenly; }
.input-item-wrapper .input-item .input-box.id-number .input .back .masked span { width: 8px; height: 8px; border-radius: 8px; display: block; background: #b5b5b6; }
.input-item-wrapper .input-item .button { max-width: 400px; width: 100%; }
.input-item-wrapper .input-item .button .check-btn { width: 100%; display: flex; height: 45px; justify-content: center; align-items: center; border-radius: 5px; border: 1px solid #eee; background: #fff; color: #333; font-size: 15px; }
.input-item-wrapper .input-message { display: flex; width: 100%; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; transition: 0.3s; }
.input-item-wrapper .input-message .text { width: 100%; display: flex; align-items: center; flex-direction: row; justify-content: flex-start; }
.input-item-wrapper .input-message .text p { font-size: 14px; letter-spacing: -0.75px; line-height: 1; font-weight: 400; color: #999; text-align: left; word-break: keep-all; }
.input-item-wrapper .input-message .text.card { background: #eee; width: fit-content; padding: 4px 8px; border-radius: 100px; }
.input-item-wrapper .input-message .text.card p { color: #333; }
.input-item-wrapper .input-item .input-box.underline .input.code { position: relative; }
.input-item-wrapper .input-item .input-box.underline .input.code .timer { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #b5b5b6; font-size: 13px; font-weight: 500; }
.code-send { width: 100%; align-items: flex-start; }
.code-send .input-item { width: 100%; }
.code-send .input-item .ipt { padding-right: 60px; }
.code-send .resend-btn { display: flex; width: 102px; height: 32px; padding: 4px 8px; justify-content: center; align-items: center; gap: 10px; border-radius: 100px; background: #eee; font-size: 12px; line-height: 1; font-weight: 400; letter-spacing: -0.75px; color: #333; text-decoration: none; }
.input-message.open-terms { width: 100%; display: flex; flex-direction: row; justify-content: flex-start; }
.input-message.open-terms .inner { width: 100%; display: flex; flex-direction: row; justify-content: flex-start; gap: 8px; }
.input-message.open-terms .checkmarkcircle { width: 18px; height: 18px; display: block; background: url(../../images/icon/check_icon_circle_off.svg) 50% 50% no-repeat; background-size: contain; transition: 0.3s; }
.input-message.open-terms .checkmarkcircle.active { width: 18px; height: 18px; display: block; background: url(../../images/icon/check_icon_circle_on.svg) 50% 50% no-repeat; background-size: contain; transition: 0.3s; }
.input-message.open-terms .inner p { flex: 1; text-align: left; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 5px; color: #333; font-size: 14px; font-weight: 600; letter-spacing: -0.75px; line-height: 1; }
.input-message.open-terms .inner .required { color: #ff7a42; font-size: 14px; font-weight: 600; letter-spacing: -0.75px; line-height: 1; }
.input-message.open-terms .icon { width: 18px; height: 18px; display: flex; flex-direction: row; align-items: center; justify-content: center; }
.input-message.open-terms .icon i { font-size: 16px; color: #333; }
.bottom-sheet-wrapper { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; }
.bottom-sheet-wrapper.active { display: block; }
.bottom-sheet-wrapper .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 998; }
.bottom-sheet { position: absolute; bottom: 0; width: 100%; background: #fff; border-top-left-radius: 16px; border-top-right-radius: 16px; transform: translateY(100%); transition: transform 0.3s ease-in-out; z-index: 1000; }
.bottom-sheet-wrapper.active .bottom-sheet { transform: translateY(0); }
.bottom-sheet .sheet-content { width: 100%; padding: 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.bottom-sheet .sheet-content .all-agree { width: 100%; padding: 16px; background: #f8f8f8; border-radius: 8px; }
.bottom-sheet .sheet-content .all-agree > label { width: 100%; gap: 8px; }
.bottom-sheet .sheet-content .all-agree .inp { width: 100%; }
.bottom-sheet .sheet-content .all-agree .checkcircle { width: 100%; }
.bottom-sheet .sheet-content .all-agree .text p { font-size: 16px; letter-spacing: -0.75px; font-weight: 700; line-height: 1; color: #333; }
.bottom-sheet .sheet-content .terms-list { width: 100%; gap: 12px; padding: 0 16px; }
.bottom-sheet .sheet-content .terms-list .term-item { width: 100%; display: flex; flex-direction: row; }
.bottom-sheet .sheet-content .terms-list .term-item .inp { display: flex; width: 100%; }
.bottom-sheet .sheet-content .terms-list .term-item .inp label { width: 100%; display: flex; gap: 8px; }
.bottom-sheet .sheet-content .terms-list .term-item .inp label .text { flex: 1; display: flex; flex-direction: row; justify-content: flex-start; gap: 5px; }
.bottom-sheet .sheet-content .terms-list .term-item .inp label .text p { color: #333; font-size: 14px; font-weight: 400; letter-spacing: -0.75px; line-height: 1; }
.bottom-sheet .sheet-content .terms-list .term-item .inp label .text .required { color: #ff7a42; font-size: 14px; font-weight: 400; letter-spacing: -0.75px; line-height: 1; }
.bottom-sheet .sheet-content .terms-list .term-item .detail-btn { width: 18px; height: 18px; display: flex; flex-direction: row; align-items: center; justify-content: center; }
.bottom-sheet .sheet-content .terms-list .term-item .detail-btn i { font-size: 16px; color: #333; }
.bottom-sheet .sheet-content .carrier-selection { width: 100%; }
.bottom-sheet .sheet-content .carrier-selection .sheet-header { width: 100%; display: flex; padding-bottom: 20px; }
.bottom-sheet .sheet-content .carrier-selection .sheet-header h3 { font-weight: 600; font-size: 20px; line-height: 140%; letter-spacing: -0.75px; color: #333; }
.bottom-sheet .sheet-content .carrier-list { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.bottom-sheet .sheet-content .carrier-item { width: 100%; padding: 10px; cursor: pointer; transition: 0.3s; }
.bottom-sheet .sheet-content .carrier-item .carrier-info { display: flex; flex-direction: row; gap: 4px; justify-content: space-between; }
.bottom-sheet .sheet-content .carrier-item .carrier-name { font-size: 14px; font-weight: 400; color: #666; }
.bottom-sheet .sheet-content .carrier-item .check-icon { width: 16px; height: 16px; background: url(../../images/icon/only_check_off.svg) 50% 50% no-repeat; background-size: contain; transition: 0.3s; }
.bottom-sheet .sheet-content .carrier-item.selected .check-icon { width: 16px; height: 16px; background: url(../../images/icon/only_check_on.svg) 50% 50% no-repeat; background-size: contain; transition: 0.3s; }
.carrier-select { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #ddd; border-radius: 0; background: #fff; cursor: pointer; transition: 0.3s; }
.carrier-select:hover { border-color: #23b16c; }
.carrier-select span { font-size: 16px; color: #b5b5b6; }
.carrier-select.selected span { color: #000; }
.carrier-select i { font-size: 16px; color: #666; }
.input-box.phone-number .select-btn { min-width: 130px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 45px; padding: 10px; border: 1px solid #dadada; }
.input-box.phone-number .select-btn span { color: #b5b5b6; }
.input-box.phone-number .select-btn.selected span { color: #000; }
.input-box.phone-number .select-btn i { font-size: 18px; color: #b5b5b6; }
.bottom-sheet .sheet-content .sheet-header { width: 100%; display: flex; padding: 10px; }
.bottom-sheet .sheet-content .prefix-list { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.bottom-sheet .sheet-content .prefix-item { width: 100%; padding: 10px; cursor: pointer; transition: 0.3s; }
.bottom-sheet .sheet-content .prefix-item .prefix-info { display: flex; flex-direction: row; gap: 4px; justify-content: space-between; }
.bottom-sheet .sheet-content .prefix-item .prefix-number { font-size: 14px; font-weight: 400; color: #666; }
.bottom-sheet .sheet-content .prefix-item .check-icon { width: 16px; height: 16px; background: url(../../images/icon/only_check_off.svg) 50% 50% no-repeat; background-size: contain; transition: 0.3s; }
.bottom-sheet .sheet-content .prefix-item.selected .check-icon { width: 16px; height: 16px; background: url(../../images/icon/only_check_on.svg) 50% 50% no-repeat; background-size: contain; transition: 0.3s; }
.information .myinfo-content { width: 100%; display: flex; flex-direction: column; }
.information .myinfo-content .page-title { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.information .myinfo-content .page-title h2 { font-weight: 700; font-size: 24px; line-height: 100%; letter-spacing: -0.75px; color: #333; }
.information .myinfo-content .page-title p { font-weight: 400; font-size: 13px; line-height: 100%; letter-spacing: -0.75px; color: #888; }
.information .myinfo-content .confirm-form, .information .myinfo-content .edit-form { width: 100%; display: flex; flex-direction: column; gap: 40px; }
.information .myinfo-content .confirm-form .form-wrap { border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 40px 0; margin-top: 40px; width: 100%; display: flex; flex-direction: column; gap: 20px; }
.information .myinfo-content .edit-form .form-wrap { width: 100%; display: flex; flex-direction: column; gap: 20px; }
.information .myinfo-content .confirm-form .input-item-wrapper .input-item, .information .myinfo-content .edit-form .input-item-wrapper .input-item { flex-direction: row; align-items: flex-start; }
.information .myinfo-content .confirm-form .input-item-wrapper .input-item .title, .information .myinfo-content .edit-form .input-item-wrapper .input-item .title { padding: 0; border-bottom: none; display: flex; justify-content: flex-start; height: 45px; }
.information .myinfo-content .confirm-form .input-item-wrapper .input-item .title p, .information .myinfo-content .edit-form .input-item-wrapper .input-item .title p { font-size: 16px; letter-spacing: -0.75px; line-height: 1; font-weight: 500; color: #333; }
.information .myinfo-content .confirm-form .input-item-wrapper .input-item .title .required, .information .myinfo-content .edit-form .input-item-wrapper .input-item .title .required { font-size: 16px; letter-spacing: -0.75px; line-height: 1; font-weight: 500; color: #ff3b30; }
.information .myinfo-content .confirm-form .input-item-wrapper .input-item .input-box .input, .information .myinfo-content .edit-form .input-item-wrapper .input-item .input-box .input { max-width: 400px; }
.information .myinfo-content .form-buttons { width: 100%; }
.information .myinfo-content .edit-form .form-buttons { margin-bottom: 80px; }
.information .myinfo-content .form-buttons .buttons-wrap { display: flex; flex-direction: row; align-items: center; justify-content: center; max-width: 700px; margin: 0 auto; gap: 10px; }
.information .myinfo-content .form-buttons .buttons-wrap .button { flex: 1; }
.information .myinfo-content .form-buttons .buttons-wrap button { max-width: 345px; height: 55px; border-radius: 5px; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: 16px; line-height: 1; font-weight: 600; letter-spacing: -0.75px; }
.information .myinfo-content .form-buttons .buttons-wrap .button .leave-btn { width: 100%; background-color: #fff; border: 1px solid #dadada; }
.information .myinfo-content .form-buttons .buttons-wrap .button .leave-btn p { font-size: 16px; line-height: 1; font-weight: 600; letter-spacing: -0.75px; }
.information .myinfo-content .form-buttons .buttons-wrap .button .leave-btn i { display: none; }
.information .myinfo-content .confirm-form .button, .information .myinfo-content .edit-form .button { display: flex; align-items: center; justify-content: center; }
.information .myinfo-content .confirm-form .submit-btn, .information .myinfo-content .edit-form .submit-btn { max-width: 345px; height: 55px; background: #23b16c; color: #fff; border-radius: 5px; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: 16px; line-height: 1; font-weight: 600; letter-spacing: -0.75px; }
.information .myinfo-content .confirm-form .input-item-wrapper .input-box, .information .myinfo-content .edit-form .input-item-wrapper .input-box { flex-direction: column; align-items: flex-start; }
.information .myinfo-content .confirm-form .input-item-wrapper .input-box .input-message, .information .myinfo-content .edit-form .input-item-wrapper .input-box .input-message { flex-direction: column; }
.information .myinfo-content .confirm-form .input-item-wrapper .input-box .input-message .text, .information .myinfo-content .edit-form .input-item-wrapper .input-box .input-message .text { align-items: flex-start; }
.information .myinfo-content .confirm-form .input-item-wrapper .input-box .input-message p, .information .myinfo-content .edit-form .input-item-wrapper .input-box .input-message p { font-size: 12px; transition: 0.3s; }
.information .myinfo-content .confirm-form .input-item-wrapper .input-box .input-message .text i, .information .myinfo-content .edit-form .input-item-wrapper .input-box .input-message .text i { font-size: 16px; color: #999; transition: 0.3s; }
.information .myinfo-content .confirm-form .input-item-wrapper .input-box .input-message.error .text i, .information .myinfo-content .edit-form .input-item-wrapper .input-box .input-message.error .text i { font-size: 16px; color: #ff3b30; transition: 0.3s; }
.information .myinfo-content .confirm-form .input-item-wrapper .input-box .input-message.error p, .information .myinfo-content .edit-form .input-item-wrapper .input-box .input-message.error p { color: #ff3b30; }
.information .myinfo-content .confirm-form .input-item-wrapper .input-box .input-message.success .text i, .information .myinfo-content .edit-form .input-item-wrapper .input-box .input-message.success .text i { color: #1ec800; }
.information .myinfo-content .confirm-form .input-item-wrapper .input-box .input-message.success p, .information .myinfo-content .edit-form .input-item-wrapper .input-box .input-message.success p { color: #1ec800; }
.information .myinfo-content .confirm-form .input-item-wrapper .input-box .input-message .text.error i, .information .myinfo-content .confirm-form .input-item-wrapper .input-box .input-message .text.error p, .information .myinfo-content .edit-form .input-item-wrapper .input-box .input-message .text.error i, .information .myinfo-content .edit-form .input-item-wrapper .input-box .input-message .text.error p { color: #ff3b30; }
.information .myinfo-content .confirm-form .input-item-wrapper .input-box .input-message .text.success i, .information .myinfo-content .confirm-form .input-item-wrapper .input-box .input-message .text.success p, .information .myinfo-content .edit-form .input-item-wrapper .input-box .input-message .text.success i, .information .myinfo-content .edit-form .input-item-wrapper .input-box .input-message .text.success p { color: #1ec800; }
.information .myinfo-content .edit-form .input-item-wrapper .input-box.email-input-box, .information .myinfo-content .edit-form .input-item-wrapper .input-box.nick-input-box { display: grid; grid-template-columns: minmax(0, 400px) 105px; gap: 10px; align-items: flex-start; }
.information .myinfo-content .edit-form .input-item-wrapper .input-box.email-input-box .input, .information .myinfo-content .edit-form .input-item-wrapper .input-box.nick-input-box .input { max-width: none; width: 100%; }
.information .myinfo-content .edit-form .input-item-wrapper .input-box.email-input-box .input-message, .information .myinfo-content .edit-form .input-item-wrapper .input-box.nick-input-box .input-message { grid-column: 1 / -1; }
.information .myinfo-content .edit-form .input-item-wrapper .input-box.email-input-box .check-btn, .information .myinfo-content .edit-form .input-item-wrapper .input-box.nick-input-box .check-btn { display: flex; width: 105px; height: 45px; justify-content: center; align-items: center; border-radius: 5px; border: 1px solid #dadada; background: #fff; color: #333; font-size: 14px; font-weight: 500; line-height: 1; }
.information .myinfo-content .input-box .input { position: relative; }
.information .myinfo-content .input-item .input-box .input .pw { padding: 10px 40px 10px 20px; }
.information .myinfo-content .input-box .input .toggle-password { position: absolute; right: 16px; top: 50%; transform: translate(0, -50%); }
.information .myinfo-content .input-item .input-box .input .toggle-password .ico { width: 24px; height: 24px; object-fit: contain; }
.information .myinfo-content .input-item .input-box .input .toggle-password .ico.eye-off { background: url(../../images/icon/eye-off.svg) 50% 50% no-repeat; }
.information .myinfo-content .input-item .input-box .input .toggle-password .ico.eye-on { background: url(../../images/icon/eye-on.svg) 50% 50% no-repeat; }
.information .myinfo-content .agree-area { width: 100%; display: flex; flex-direction: column; gap: 20px; padding-top: 20px; border-top: 1px solid #eee; }
.information .myinfo-content .agree-area .agree-group { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.information .myinfo-content .agree-area .agree-group .agree-item { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; }
.information .myinfo-content .agree-item .inp { display: flex; position: relative; flex-direction: row; align-items: center; }
.information .myinfo-content .agree-item .inp label { width: 100%; display: flex; position: relative; cursor: pointer; align-items: center; flex-direction: row; justify-content: flex-start; gap: 8px; }
.information .myinfo-content .agree-item.all .inp label .text p { font-size: 15px; color: #333; letter-spacing: -0.75px; font-weight: 600; }
.information .myinfo-content .agree-list .agree-item .inp label .text { width: calc(100% - 24px); display: flex; flex-direction: row; align-items: center; gap: 2px; flex-wrap: wrap; }
.information .myinfo-content .agree-list .agree-item .inp label .text p { font-size: 14px; color: #333; letter-spacing: -0.75px; font-weight: 400; text-align: left; }
.information .myinfo-content .agree-list .agree-item .inp label .text span { font-size: 14px; color: #333; letter-spacing: -0.75px; font-weight: 400; text-align: left; }
.information .myinfo-content .agree-list .agree-item .inp label .text .required { color: #ff7a42; }
.information .myinfo-content .agree-list { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.information .myinfo-content .agree-list li { width: 100%; }
.information .myinfo-content .agree-group .agree-item { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; }
.information .myinfo-content .input-box-wrap { align-items: flex-start; }
.information .myinfo-content .input-box-wrap > .button { max-width: 400px; width: 100%; }
.information .myinfo-content .input-box-wrap > .button .search-btn { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-radius: 5px; padding: 10px 20px; height: 45px; border: 1px solid #dadada; background: #f8f8f8; }
.information .myinfo-content .input-box-wrap > .button .search-btn p { font-size: 14px; font-weight: 400; letter-spacing: -0.75px; color: #999; }
.information .myinfo-content .input-box-wrap > .button .search-btn .ico { width: 20px; height: 20px; display: block; }
.information .myinfo-content .input-box-wrap > .button .search-btn .search { background: url(../../images/main/search_icon_dark.svg) 50% 50% / contain no-repeat; }
main .footer-button { display: flex; flex-direction: column; align-items: center; gap: 30px; position: relative; width: 100%; z-index: 100; }
.card-registration .footer-button { padding: 10px; background: #fff; }
.registration-add-wrap { width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 100px; }
.registration-add-wrap .instruction p { text-align: center; }
.registration-add-wrap .instruction p.error { color: #ff3b30; font-weight: 500; text-align: center; white-space: pre-line; }
.pin-dots { display: flex; justify-content: center; gap: 12px; margin-bottom: 40px; }
.pin-dots .dot { width: 12px; height: 12px; border-radius: 50%; background: #e0e0e0; }
.pin-dots .dot.filled { background: #333; }
#pinInput { pointer-events: none; }
.address-registration { padding: 30px 20px 0; display: flex; width: 100%; flex-direction: column; justify-content: space-between; gap: 30px; }
.mobile-top-navi.left.location-form-modal .header-inner .top-bar { padding-left: 20px; }
.address-registration .registration-wrap .form-content { width: 100%; display: flex; flex-direction: column; gap: 30px; }
.address-registration .registration-wrap .input-item .button { width: 100%; }
.address-registration .registration-wrap .input-item .button .search-btn { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-radius: 5px; padding: 10px 20px; height: 45px; border: 1px solid #dadada; background: #f8f8f8; }
.address-registration .registration-wrap .input-item .button .search-btn p { font-size: 14px; font-weight: 400; letter-spacing: -0.75px; color: #999; }
.address-registration .registration-wrap .input-item .button .search-btn .ico { width: 20px; height: 20px; display: block; }
.address-registration .registration-wrap .input-item .button .search-btn .search { background: url(../../images/main/search_icon_dark.svg) 50% 50% / contain no-repeat; }
.address-registration .registration-wrap .input-item-wrapper .input-item .title label { font-size: 14px; color: #666; font-weight: 400; }
.item-wrapper { display: flex; flex-direction: row; align-items: center; gap: 5px; }
.item-wrapper .text p { font-size: 14px; letter-spacing: -0.75px; color: #333; }
.check-wrap { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.check-wrap .terms-wrapper { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.form-container .form-content .form-buttons { width: 100%; display: flex; justify-content: center; }
.form-container .form-content .form-buttons .button-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.form-container .form-content .form-buttons .button-wrap .button { width: 100%; display: flex; }
.form-container .form-content .form-buttons .button-wrap .add-btn { width: 100%; height: 55px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; border-radius: 5px; background: #23b16c; color: #fff; font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: -0.5px; transition: 0.3s; }
.form-container .form-content .form-buttons .button-wrap .add-btn.disabled { background: #dadada; color: #999; cursor: not-allowed; }
.form-container .form-content .form-buttons .button-wrap .add-btn.success { background: #23b16c; color: #fff; }
.address-registration .form-container .form-content .form-buttons { padding-bottom: 10px; }
.payment-password .col-buttons { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.payment-password .col-buttons .button { width: 100%; display: flex; }
.payment-password .col-buttons .button .set-btn { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; box-shadow: 4px 4px 15px 0 #0000000d; height: 200px; gap: 15px; background: #fff; border-radius: 10px; }
.payment-password .col-buttons .button .set-btn .icon { width: 80px; height: 80px; border-radius: 100%; background: #f1faf7; display: flex; flex-direction: row; align-items: center; justify-content: center; }
.payment-password .col-buttons .button .set-btn .icon i { width: 35px; height: 35px; background: url(../../images/icon/password_icon.svg) 50% 50% no-repeat; object-fit: contain; }
.payment-password .col-buttons .button .set-btn p { font-weight: 500; font-size: 18px; line-height: 1; letter-spacing: -0.75px; text-align: center; color: #333; }
.payment-password-registration { padding: 30px 20px 0; display: flex; width: 100%; flex-direction: column; justify-content: space-between; gap: 30px; }
.payment-password-registration .pw-setting { padding: 70px 0 60px; }
.payment-password-registration .page-title .tit { display: flex; flex-direction: row; justify-content: flex-start; gap: 5px; margin-bottom: 15px; }
.payment-password-registration .page-title .tit b { font-weight: 600; font-size: 16px; line-height: 100%; letter-spacing: -0.75px; color: #333; }
.payment-password-registration .page-title .tit p { font-weight: 400; font-size: 14px; line-height: 100%; letter-spacing: -0.75px; color: #888; }
.payment-password-registration .registration-wrap .form-content { width: 100%; display: flex; flex-direction: column; gap: 30px; }
.payment-password-registration .registration-wrap .input-item .title label { font-size: 14px; color: #666; font-weight: 400; }
.payment-password-registration .input-item-wrapper.code-send .input-item .input-box .input.code { position: relative; }
.payment-password-registration .input-item-wrapper.code-send .input-item .input-box .input.code input.success { border-color: #23b16c; }
.payment-password-registration .input-item-wrapper.code-send .input-item .input-box .input.code input.error { border-color: #ff3b30; }
.payment-password-registration .input-item-wrapper.code-send .input-item .input-box .input.code .timer { position: absolute; right: 0; }
.payment-password-registration .input-item-wrapper.code-send .input-item .input-box .resend-btn { margin-top: 0; border-radius: 5px; font-size: 14px; height: 45px; }
.payment-password-registration .registration-wrap .form-container { width: 100%; }
.payment-password-registration .registration-wrap { width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 30px; }
.payment-password-registration .instruction p { font-size: 20px; font-weight: 600; letter-spacing: -0.75px; line-height: 1.4; color: #333; text-align: center; }
.payment-password-registration .instruction p.error { color: #ff3b30; }
.payment-password-registration .registration-wrap .carrier-select { border: 1px solid #ddd; border-radius: 5px; }
/* 찜리스트 */
.zzim-list .main-content .title .titl { display: flex; flex-direction: row; align-items: flex-end; gap: 10px; }
.zzim-list .main-content .title .titl small { font-weight: 400; font-size: 13px; line-height: 1.4; letter-spacing: -0.75px; color: #888; }
.zzim-list .main-content .actions { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 20px; border: 1px solid #eee; border-radius: 5px; }
.zzim-list .main-content .actions .inp .text p { font-size: 14px; font-weight: 500; line-height: 1; color: #333; }
.zzim-list .main-content .actions .buttons { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; }
.zzim-list .main-content .actions .buttons .btn + .btn::before { content: ''; width: 1px; height: 15px; background-color: #B5B5B6; display: block; }
.zzim-list .main-content .actions .buttons .btn { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; font-weight: 300; font-size: 14px; line-height: 1; letter-spacing: -0.75px; color: #333; }
.zzim { width: 100%; display: flex; flex-direction: column; }
.zzim .list-header { display: flex; flex-direction: row; align-items: center; gap: 5px; }
.zzim .list-header .tit { font-size: 14px; font-weight: 500; color: #000; line-height: 1; letter-spacing: -0.75px; }
.zzim .list-header .count { font-size: 14px; font-weight: 500; color: #000; line-height: 1; letter-spacing: -0.75px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; }
.zzim .list-header .count strong { font-weight: 700; }
.zzim-item { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 20px 0; border-bottom: 1px solid #eee; }
.zzim-item:last-child { border-bottom: none; }
.zzim-item .inp { min-width: 16px; }
.zzim-item .thumb { width: 90px; min-width: 90px; flex: 0 0 90px; height: 120px; border-radius: 5px; overflow: hidden; }
.zzim-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.zzim-item .info-wrap { width: 100%; display: flex; flex-direction: row; align-items: flex-start; }
.zzim-item .info { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.zzim-item .info .name { font-weight: 400; font-size: 14px; line-height: 1.4; letter-spacing: -0.75px; color: #333; }
.zzim-item .info .meta { margin-top: 5px; }
.zzim-item .price-info { display: flex; flex-direction: column; gap: 4px; }
.zzim-item .price-row { display: flex; align-items: center; }
.zzim-item .original-price { font-size: 13px; color: #9ca3af; text-decoration: line-through; line-height: 1; }
.zzim-item .current-price { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.zzim-item .current-price p { font-size: 14px; color: #ff3b30; font-weight: 600; letter-spacing: -0.75px; margin: 0; }
.zzim-item .current-price b { font-size: 18px; color: #000; font-weight: 700; letter-spacing: 0; }
.zzim-item .price-section .current-price b { font-size: 18px; color: #000; font-weight: 700; }
.zzim-item .cta { min-width: 305px; max-width: 305px; width: 100%; display: flex; flex-direction: row; align-items: center; gap: 5px; }
.zzim-item .cta .btn { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; height: 40px; border-radius: 5px; border: 1px solid #eee; }
.zzim-item .cta .btn p { font-weight: 400; font-size: 14px; line-height: 1; letter-spacing: -0.75px; color: #333; }
.zzim-item .cta .btn-add { border-color: #23B16C; }
.zzim-item .cta .btn-add p { color: #23B16C; }
.zzim-item .cta .btn i { width: 16px; height: 16px; }
.zzim-item .cta .btn-add i { background: url(../../images/icon/shopping-ico-green.svg) 50% 50% no-repeat; object-fit: contain; }
.zzim-item .cta .btn-del i { background: url(../../images/icon/delete-icon-black.svg) 50% 50% no-repeat; object-fit: contain; }
.zzim-item .cta .btn-add:disabled{border-color:#dadada;}
.zzim-item .cta .btn-add:disabled p{color:#b5b5b6;}
.zzim-item .cta .btn-add:disabled i{filter: grayscale(1); opacity:.45;}
/* 보유쿠폰 */
.coupon .myinfo .contain .main-content .title .button-wrap .add-btn { color: #23b16c; font-size: 16px; font-weight: 600; padding: 0; }
.coupon .main-content .tab-navigation { width: 100%; }
.coupon .main-content .tab-navigation .tab-list { width: 100%; height: 50px; display: flex; flex-direction: row; align-items: center; }
.coupon .main-content .tab-navigation .tab-list .tab-item { width: 100%; height: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: 18px; line-height: 1; font-weight: 400; letter-spacing: -0.75px; color: #b5b5b6; background-color: #fafafa; border: 1px solid #dadada; transition: all 0.3s; }
.coupon .main-content .tab-navigation .tab-list .tab-item:first-child { border-right: 0; }
.coupon .main-content .tab-navigation .tab-list .tab-item.active:first-child { border: 1px solid #23b16c; }
.coupon .main-content .tab-navigation .tab-list .tab-item.active { background-color: #fff; border-color: #23b16c; color: #23b16c; font-weight: 600; }
.coupon .main-content .coupon-content { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 20px; }
.coupon .main-content .coupon-content .count p { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 5px; font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: -0.75px; color: #333; }
.coupon .main-content .coupon-content .count p b { font-weight: 700; }
.coupon .main-content .coupon-content .coupon-list { width: 100%; height: 100%; display: flex; flex-wrap: wrap; flex-direction: row; gap: 20px; align-items: flex-start; align-content: flex-start; }
.coupon .main-content .coupon-content .coupon-list .coupon-item { max-width: calc((100% / 2) - 10px); width: 100%; height: 155px; display: flex; flex-direction: row; align-items: center; background-color: #fff; border-radius: 10px; border: 1px solid #eee; }
.coupon .main-content .coupon-content .coupon-list .coupon-item .coupon-info { width: 100%; display: flex; flex-direction: column; padding: 0 20px; }
.coupon .main-content .coupon-content .coupon-list .coupon-item .discount-info { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #eee; }
.coupon .main-content .coupon-content .coupon-list .coupon-item .discount-info .discount-amount { font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: -0.75px; color: #23b16c; }
.coupon .main-content .coupon-content .coupon-list .coupon-item .discount-info .detail-link { display: flex; flex-direction: row; align-items: center; gap: 2px; }
.coupon .main-content .coupon-content .coupon-list .coupon-item .discount-info .detail-link p { font-weight: 400; font-size: 13px; line-height: 1; letter-spacing: -0.75px; color: #333; }
.coupon .main-content .coupon-content .coupon-list .coupon-item .discount-info .detail-link i { font-weight: 400; font-size: 13px; line-height: 1; letter-spacing: -0.75px; color: #333; }
.coupon .main-content .coupon-content .coupon-list .coupon-item .coupon-details { padding: 15px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.coupon .main-content .coupon-content .coupon-list .coupon-item .coupon-details .coupon-name { font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: -0.75px; color: #333; }
.coupon .main-content .coupon-content .coupon-list .coupon-item .coupon-meta { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.coupon .main-content .coupon-content .coupon-list .coupon-item .coupon-meta .meta-item { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 15px; }
.coupon .main-content .coupon-content .coupon-list .coupon-item .coupon-meta .meta-item span { font-weight: 400; font-size: 13px; line-height: 1; letter-spacing: -0.75px; color: #888; }
.coupon .main-content .coupon-content .coupon-list .coupon-item .coupon-actions { min-width: 95px; max-width: 95px; display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: #fafafa; border-left: 1px solid #eee; }
.coupon .main-content .coupon-content .coupon-list .coupon-item .coupon-actions > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.coupon .main-content .coupon-content .coupon-list .coupon-item .coupon-actions > div p { font-weight: 500; font-size: 15px; line-height: 1; letter-spacing: -0.75px; text-align: center; color: #666; }
.coupon .main-content .coupon-content .coupon-list .coupon-item .coupon-actions > div b { font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: -0.75px; text-align: center; color: #666; }
main .footer-button.mobile { display: none; }
/* 장바구니 */
.cart .main-content { gap: 25px; }
.cart .main-content .tab-navigation { max-width: 720px; }
.cart .main-content .tab-navigation .tab-list { width: 100%; height: 50px; display: flex; flex-direction: row; align-items: center; }
.cart .main-content .tab-navigation .tab-list .tab-item { width: 100%; height: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: 18px; line-height: 1; font-weight: 400; letter-spacing: -0.75px; color: #b5b5b6; background-color: #fafafa; border: 1px solid #dadada; transition: all 0.3s; }
.cart .main-content .tab-navigation .tab-list .tab-item:first-child { border-right: 0; }
.cart .main-content .tab-navigation .tab-list .tab-item.active:first-child { border: 1px solid #23b16c; }
.cart .main-content .tab-navigation .tab-list .tab-item.active { background-color: #fff; border-color: #23b16c; color: #23b16c; font-weight: 600; }
/* 본문(장바구니 제품 리스트)*/
.cart .cart-wrap { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 20px; position: relative; }
.cart .cart-content { width: calc(100% - 300px - 20px); display: flex; flex-direction: column; gap: 15px; }
.cart .cart-actions { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 15px; border: 1px solid #eeeeee; border-radius: 5px; }
.cart .cart-actions .inp .text p { font-size: 14px; font-weight: 500; letter-spacing: -0.75px; color: #333; line-height: 1; }
.cart .cart-actions .buttons { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.cart .cart-actions .buttons .btn { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 13px; font-weight: 300; color: #333; letter-spacing: -0.75px; line-height: 1; }
.cart .cart-actions .buttons .btn + .btn::before { content: ""; width: 1px; height: 15px; background-color: #b5b5b6; display: block; }
.cart .item-info-wrap { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 15px; }
.cart .item-info-wrap .item-info { display: flex; flex-direction: row; justify-content: flex-end; align-items: flex-start; gap: 10px; }
.cart .item-info-wrap .item-info .thumb { width: 70px; min-width: 70px; flex: 0 0 70px; height: 70px; border-radius: 5px; overflow: hidden; }
.cart .item-info-wrap .item-info .thumb .item-link { display: block; width: 100%; height: 100%; }
.cart .item-info-wrap .item-info .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: top;}
.cart .item-info-wrap .item-info .info { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cart .item-info-wrap .item-info .info .ship { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; }
.cart .item-info-wrap .item-info .info .ship span { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; font-weight: 400; font-size: 13px; line-height: 1; letter-spacing: -0.75px; color: #888; }
.cart .item-info-wrap .item-info .info .ship span + span::before { content: ""; width: 1px; height: 12px; background-color: #888; display: block; }
/* 제품리스트 */
.cart .cart-items { display: flex; flex-direction: column; width: 100%; gap: 15px; }
.cart .cart-items .brand-section { padding: 20px 15px; border: 1px solid #eee; border-radius: 10px; background-color: #fff; display: flex; flex-direction: column; width: 100%; gap: 10px; }
.cart .brand-header { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px solid #eeeeee; padding-bottom: 15px; }
.cart .brand-header .brand-name, .btn-brand-del i { color: #333; font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -0.75px; }
.cart .cart-items .cart-item { display: flex; flex-direction: column; width: 100%; gap: 10px; padding-top: 15px; overflow: hidden; }
.subscription-items { position: relative; padding-top: 10px; }
.subscription-items .item-info { flex: 1; padding-right: 20px; justify-content: flex-start !important; }
.subscription-item-del { position: absolute; right: 16px; }
.cart .subscription-items .brand-section { border: none; padding: 0; }
.subscription-item { padding: 20px 15px; border: 1px solid #eee; border-radius: 10px; }
/* 옵션 */
.cart .options-list { width: 100%; display: flex; flex-direction: column; gap: 10px; padding-left: 30px; }
.cart .option-item { padding: 15px; background-color: #fafafa; border-radius: 5px; width: 100%; display: flex; flex-direction: column; gap: 15px; }
.cart .option-item .option-info { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.cart .cart-items .option-info .price .amount { font-weight: 700; font-size: 14px; line-height: 1; color: #333; }
.cart .option-item .option-info .quantity-control { display: flex; flex-direction: row; align-items: center; background-color: #ffffff; border-radius: 4px; border: 1px solid #eee; }
.cart .option-item .option-info .quantity-control .qty-btn, .cart .option-item .option-info .quantity-control .qty-input { min-width: 28px; width: 100%; max-width: 28px; height: 28px; gap: 0; border: none; text-align: center; }
.cart .subscription-details { margin-left: 30px; padding: 10px; background-color: #fafafa; border-radius: 5px; width: calc(100% - 30px); display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.cart .subscription-details .detail-item { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px; }
.cart .subscription-details .detail-item .label { color: #888; font-size: 13px; font-weight: 400; line-height: 1; letter-spacing: -0.75px; min-width: 58px; max-width: 58px; width: 100%; }
.cart .subscription-details .detail-item .value { color: #555; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: -0.75px; }
.cart .cart-items .option-info { align-items: flex-start; }
.cart .cart-items .optin-inner { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.cart .cart-items .subscription-item .option-item { border: 1px solid #eee; background-color: #fff; }
.cart .cart-items .option-name-wrap { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
.cart .cart-items .option-name-wrap .option-name { color: #333; font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: -0.75px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
.cart .cart-items .option-name-wrap .soldout-badge { padding: 4px 6px; background-color: #b5b5b6; border-radius: 3px; display: flex; flex-direction: row; align-items: center; justify-content: center; color: #fff; letter-spacing: -0.75px; font-size: 13px; font-weight: 600; line-height: 1; min-width: fit-content; }
.cart .cart-items .option-item.soldout .option-name-wrap .option-name { color: #c9caca; }
.soldout-text { display: none; }
.cart .cart-items .option-item.soldout .option-info .quantity-control button:disabled i { color: #c9caca !important; }
.cart .cart-items .option-item.soldout .quantity-control .qty-input:disabled { background-color: #ffffff; }
.cart .cart-items .option-item .btn-del i { font-size: 14px; color: #888; }
.cart .cart-items .subscription-option-wrap { display: flex; flex-direction: row; justify-content: flex-start; gap: 5px; }
.cart .cart-items .subscription-option-wrap span { font-size: 14px; font-weight: 400; letter-spacing: -0.75px; line-height: 1; color: #888; }
.cart .item-footer { padding-left: 30px; padding-top: 10px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.cart .item-footer .item-actions { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; }
.cart .item-footer .item-actions .btn + .btn::before { content: ""; width: 1px; height: 13px; background-color: #b5b5b6; display: block; }
.cart .item-footer .item-actions .btn { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; line-height: 1; letter-spacing: -0.75px; color: #333; }
.brand-subtotal { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 5px; }
.brand-subtotal .val, .brand-subtotal .won { font-size: 18px; font-weight: 700; line-height: 1; }

.mobile-cta-bar .btn.primary .cta-label{color: #fff;}
/* 결제요약 */
.cart .cart-wrap .payment-summary-wrap { position: absolute; right: 0; top: 0; }
.cart .cart-wrap .payment-summary-wrap .summary-title { font-size: 20px; line-height: 1; font-weight: 600; color: #333; letter-spacing: -0.75px; }
.cart .cart-wrap .payment-summary-wrap .payment-summary, .cart .cart-wrap .payment-summary-wrap .subscription-summary { min-width: 300px; max-width: 300px; width: 100%; display: flex; flex-direction: column; gap: 15px; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .paymen-wrap, .cart .cart-wrap .payment-summary-wrap .subscription-summary .subs-list { display: flex; flex-direction: column; padding: 20px; gap: 10px; background-color: #fff; border: 1px solid #eee; border-radius: 5px; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .paymen-wrap .paylist { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .paymen-wrap .paylist .col { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .paymen-wrap .paylist .row { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .paymen-wrap .paylist li > ol { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .paymen-wrap .paylist li > ol .row .tit { display: flex; flex-direction: row; align-items: center; gap: 5px; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .paymen-wrap .paylist li > ol .row .tit p { font-size: 14px; letter-spacing: -0.75px; line-height: 1; color: #b5b5b6; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .paymen-wrap .paylist li > ol .row .tit i { color: #b5b5b6; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .paymen-wrap .paylist li > ol .row .v { color: #b5b5b6; text-align: right; font-size: 14px; font-weight: 500; line-height: 1; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .paymen-wrap .paylist .row .k { color: #888; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -0.75px; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .paymen-wrap .paylist .row .v { color: #333; text-align: right; font-size: 18px; font-weight: 500; line-height: 1; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .paymen-wrap .paylist::after { content: ""; width: 100%; height: 1px; background-color: #eee; display: block; margin-top: 5px; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .paymen-wrap .total { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 5px; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .paymen-wrap .total .k { color: var(--Web_color-gray-03, #333); font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -0.75px; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .paymen-wrap .total .v { color: var(--Web_color-gray-03, #333); text-align: right; font-family: "Pretendard Variable"; font-size: 21px; font-style: normal; font-weight: 700; line-height: normal; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .summary-action, .cart .cart-wrap .payment-summary-wrap .subscription-summary .summary-action { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .summary-action .btn, .cart .cart-wrap .payment-summary-wrap .subscription-summary .summary-action .btn { width: 100%; height: 55px; border-radius: 5px; display: flex; flex-direction: row; align-items: center; justify-content: center; background-color: #23b16c; color: #fff; gap: 5px; font-size: 18px; font-weight: 700; letter-spacing: -0.75px; line-height: 1; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .summary-action .btn,
.cart .cart-wrap .payment-summary-wrap .subscription-summary .summary-action .btn span{color: #fff;}
.cart .cart-wrap .payment-summary-wrap .payment-summary .summary-action .btn,
.cart .cart-wrap .payment-summary-wrap .subscription-summary .summary-action .btn .btn-default-text {color: #fff;}
.cart .cart-wrap .payment-summary-wrap .payment-summary .summary-action .btn:disabled, .cart .cart-wrap .payment-summary-wrap .subscription-summary .summary-action .btn:disabled { background-color: #ccc; color: #999; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .summary-action .btn .btn-empty-text, .cart .cart-wrap .payment-summary-wrap .subscription-summary .summary-action .btn .btn-empty-text { display: none; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .summary-action .btn:disabled .btn-default-text, .cart .cart-wrap .payment-summary-wrap .subscription-summary .summary-action .btn:disabled .btn-default-text { display: none; }
.cart .cart-wrap .payment-summary-wrap .payment-summary .summary-action .btn:disabled .btn-empty-text, .cart .cart-wrap .payment-summary-wrap .subscription-summary .summary-action .btn:disabled .btn-empty-text { display: inline;color: #999; }
.cart .cart-wrap .payment-summary-wrap .subscription-summary .subscription-item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cart .cart-wrap .payment-summary-wrap .subscription-summary .subscription-item .item-name { font-weight: 500; font-size: 16px; word-break: keep-all; line-height: 1.4; letter-spacing: -0.75px; color: #333; }
.cart .cart-wrap .payment-summary-wrap .subscription-summary .subscription-item .item-details { width: 100%; padding: 10px; background-color: #fafafa; border-radius: 5px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.cart .cart-wrap .payment-summary-wrap .subscription-summary .subscription-item .detail-item { width: 100%; display: flex; flex-direction: row; justify-content: flex-start; gap: 20px; }
.cart .cart-wrap .payment-summary-wrap .subscription-summary .subscription-item .detail-item .label { font-weight: 400; font-size: 13px; line-height: 1; letter-spacing: -0.75px; min-width: 55px; max-width: 55px; width: 100%; color: #888; }
.cart .cart-wrap .payment-summary-wrap .subscription-summary .subscription-item .detail-item .value { font-weight: 500; font-size: 13px; line-height: 1; letter-spacing: -0.75px; color: #555; }
/* 일반주문조회 */
.order-inquiry .filter-section { width: 100%; }
/* 취소/교환/반품 */
.cancel-exchange .filter-section { width: 100%; }
.cancel-exchange .filter-row { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; max-width: 573px; width: 100%; }
.cancel-exchange .filter-row .filter-item.period-filter { min-width: 113px; max-width: 113px; width: 100%; }
.cancel-exchange .filter-row .filter-item.category-filter { min-width: 150px; max-width: 150px; width: 100%; }
.cancel-exchange .category-select { width: 100%; display: flex; height: 40px; border: 1px solid #eee; border-radius: 5px; padding: 8px 12px; }
.cancel-exchange .filter-row .filter-item.category-filter .custom-select { width: 100%; }
.cancel-exchange-list { width: 100%; display: flex; flex-direction: column; gap: 70px; padding-bottom: 120px; }
.cancel-exchange-date-group .date-header { width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; padding: 0 20px; gap: 15px; }
.cancel-exchange-date-group .date-header .tit { display: flex; flex-direction: row; align-items: center; gap: 15px; }
.cancel-exchange-date-group .date-header .tit.date p { font-size: 20px; font-weight: 600; color: #000; line-height: 1; }
.cancel-exchange-date-group .date-header .tit.order span, .cancel-exchange-date-group .date-header .tit.order p { font-size: 16px; font-weight: 500; color: #888; line-height: 1; letter-spacing: -0.75px; }
.cancel-exchange-date-group .date-header .tit.date + .tit.order::before { content: ""; width: 1px; height: 18px; background-color: #dadada; display: block; }
.cancel-exchange-date-group { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.cancel-exchange-group { width: 100%; display: flex; flex-direction: column; gap: 20px; padding: 20px; background-color: #fff; border: 1px solid #dadada; border-radius: 10px; }
.cancel-exchange-group .cancel-exchange-item + .cancel-exchange-item::before { content: ""; width: 100%; height: 1px; background-color: #eee; display: block; }
.cancel-exchange-item { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.cancel-exchange-item .cancel-exchange-status-title { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.cancel-exchange-item .cancel-exchange-status { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 10px; }
.cancel-exchange-item .cancel-exchange-status .order-info .order-number, .cancel-exchange-item .cancel-exchange-status .status-info .status-badge { font-size: 16px; line-height: 1; font-weight: 600; color: #000; letter-spacing: -0.75px; }
.cancel-exchange-item .cancel-exchange-status .order-info, .cancel-exchange-item .cancel-exchange-status .status-info { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.cancel-exchange-item .cancel-exchange-status .order-info + .status-info::before { content: ""; width: 1px; height: 15px; background-color: #dadada; display: block; }
.cancel-exchange-product-wrap { width: 100%; display: flex; flex-direction: row; align-items: flex-end; }
.cancel-exchange-products { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; }
.cancel-exchange-actions.web { min-width: 165px; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; }
.cancel-exchange-actions.web .btn.btn-detail { width: 100%; height: 40px; padding: 10px; display: flex; flex-direction: row; align-items: center; justify-content: center; background-color: #fff; border: 1px solid #23b16c; border-radius: 5px; color: #23b16c; font-size: 14px; letter-spacing: -0.75px; font-weight: 500; transition: all 0.3s; }
.cancel-exchange-actions.web .btn.btn-detail:hover { border-color: #117545; color: #117545; }
.cancel-exchange-actions.mobile { min-width: 70px; display: none; flex-direction: row; justify-content: flex-end; align-items: center; }
.cancel-exchange-actions.mobile .btn.btn-detail { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 5px; justify-content: center; background-color: #fff;  transition: all 0.3s; }
.cancel-exchange-actions.mobile .btn.btn-detail span,
.cancel-exchange-actions.mobile .btn.btn-detail i{color: #23b16c; font-size: 13px; letter-spacing: -0.75px; font-weight: 500;}
.filter-row { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; max-width: 600px; width: 100%; }
.filter-row .filter-item.period-filter { min-width: 113px; max-width: 113px; width: 100%; }
.period-select { width: 100%; display: flex; height: 40px; border: 1px solid #eee; border-radius: 5px; padding: 8px 12px; }
.filter-row .filter-item.period-filter .custom-select { width: 100%; }
.filter-item.search-filter { width: 100%; }
.search-input-wrap { width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; position: relative; }
.search-input-wrap .search-input { width: 100%; height: 40px; padding: 10px 60px 10px 10px; border: 1px solid #eee; }
.search-input-wrap .buttons { position: absolute; right: 10px; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 10px; }
.search-input-wrap .buttons .search-clear { min-width: 16px; max-width: 16px; width: 100%; height: 16px; }
.search-input-wrap .buttons .search-clear i.delete { width: 100%; height: 100%; object-fit: contain; background: url(../../images/icon/search-delete-icon.svg); transition: 0.3s; }
.search-input-wrap .buttons .btn-search { min-width: 20px; max-width: 20px; width: 100%; height: 20px; }
.search-input-wrap .buttons .btn-search i.search { width: 100%; height: 100%; background: url(../../images/main/search_icon_green.svg) 50% 50% / contain no-repeat; transition: 0.3s; }
.search-input-wrap .buttons .search-clear:hover i.delete, .search-input-wrap .buttons .btn-search:hover i.search { filter: brightness(0.75); }
.order-list { width: 100%; display: flex; flex-direction: column; gap: 70px; padding-bottom: 120px; }
.order-date-group .date-header { width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; padding: 0 20px; gap: 15px; }
.order-date-group .date-header .tit { display: flex; flex-direction: row; align-items: center; gap: 15px; }
.order-date-group .date-header .tit.date p { font-size: 20px; font-weight: 600; color: #000; line-height: 1; }
.order-date-group .date-header .tit.order span, .order-date-group .date-header .tit.order p { font-size: 16px; font-weight: 500; color: #888; line-height: 1; letter-spacing: -0.75px; }
.order-date-group .date-header .tit.date + .tit.order::before { content: ""; width: 1px; height: 18px; background-color: #dadada; display: block; }
.order-date-group { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.order-group { width: 100%; display: flex; flex-direction: column; gap: 20px; padding: 20px; background-color: #fff; border: 1px solid #dadada; border-radius: 10px; }
.order-group .order-item + .order-item::before { content: ""; width: 100%; height: 1px; background-color: #eee; display: block; }
.order-item { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.order-item .order-status-title { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.order-item .order-status { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 10px; }
.order-item .order-status .order-info .order-number, .order-item .order-status .status-info .status-badge { font-size: 16px; line-height: 1; font-weight: 600; color: #000; letter-spacing: -0.75px; }
.order-item .order-status .order-info, .order-item .order-status .status-info { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.order-item .order-status .order-info + .status-info::before { content: ""; width: 1px; height: 15px; background-color: #dadada; display: block; }
.order-product-wrap { width: 100%; display: flex; flex-direction: row; align-items: flex-end; }
.order-products { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; }
.product-item { display: flex; flex-direction: row; gap: 15px; }
.product-image { min-width: 110px; max-width: 110px; height: 110px; border-radius: 5px; overflow: hidden; }
.product-image img { width: 100%; height: 100%; object-fit: cover; }
.product-info { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.product-name { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.product-name .name a{ font-size: 16px; line-height: 1; font-weight: 400; letter-spacing: -0.75px; color: #333; }
.product-name .product-options { font-size: 14px; line-height: 1; font-weight: 400; letter-spacing: -0.75px; color: #888; }
.product-price { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; }
.product-price span { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; }
.product-price .current-price { font-size: 16px; line-height: 1; font-weight: 600; color: #333; }
.product-price .quantity { font-size: 16px; line-height: 1; font-weight: 400; color: #888; }
.product-price .current-price + .quantity::before { content: ""; width: 1px; height: 11px; background-color: #dadada; display: block; }
.order-actions.web { min-width: 165px; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; }
.order-actions.web .btn.btn-detail { width: 100%; height: 40px; padding: 10px; display: flex; flex-direction: row; align-items: center; justify-content: center; background-color: #fff; border: 1px solid #23b16c; border-radius: 5px; color: #23b16c; font-size: 14px; letter-spacing: -0.75px; font-weight: 500; transition: all 0.3s; }
.order-actions.web .btn.btn-detail:hover { border-color: #117545; color: #117545; }
.order-actions.mobile { min-width: 70px; display: none; flex-direction: row; justify-content: flex-end; align-items: center; }
.order-actions.mobile .btn.btn-detail { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 5px; justify-content: center; background-color: #fff; color: #23b16c; font-size: 13px; letter-spacing: -0.75px; font-weight: 500; transition: all 0.3s; }
/* 주문상세 */
.order-detail-content { width: 100%; display: flex; flex-direction: column; gap: 60px; }
.order-detail-content .order-info-section { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.order-detail-content .order-info-section .info-item { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 5px; }
.order-detail-content .order-info-section .info-item.number span { font-size: 24px; font-weight: 600; letter-spacing: -0.75px; line-height: 1; color: #333; }
.order-detail-content .order-info-section .info-item.date span { font-size: 16px; font-weight: 500; letter-spacing: -0.75px; line-height: 1; color: #888; }
.order-detail-content .order-info-section .info-item.complete { padding: 10px; background-color: #aaa; width: fit-content; border-radius: 30px; }
.order-detail-content .order-info-section .info-item.complete span { font-size: 14px; font-weight: 400; letter-spacing: -0.75px; line-height: 1; color: #fff; }
.delivery-info-section, .order-products-section, .payment-info-section, .orderer-info-section { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.order-detail-content .section-title { font-size: 20px; font-weight: 600; letter-spacing: -0.75px; line-height: 1; color: #333; text-align: left; }
.delivery-info-section .delivery-info, .payment-info-section .payment-info, .orderer-info-section .orderer-info { width: 100%; display: flex; flex-direction: column; gap: 15px; padding: 20px; border: 1px solid #eee; border-radius: 10px; }
.payment-info-section .payment-info { gap: 0; }
.payment-breakdown { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.payment-breakdown .breakdown-item { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.payment-breakdown .breakdown-item span { font-size: 14px; color: #888; line-height: 1; font-weight: 400; }
.payment-breakdown .breakdown-item .label { letter-spacing: -0.75px; }
.payment-breakdown .breakdown-item.total { padding: 15px 0; margin-top: 7px; border-top: 1px solid #eee; }
.payment-breakdown .breakdown-item.total span { font-size: 16px; color: #333; font-weight: 600; line-height: 1; }
.payment-method { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.payment-method p { font-size: 14px; font-weight: 400; letter-spacing: -0.75px; color: #888; line-height: 1; }
.payment-method p b { font-size: 14px; font-weight: 400; letter-spacing: -0.75px; color: #727272; line-height: 1; }
.delivery-info-section .delivery-info > div, .orderer-info-section .orderer-info > div { width: 100%; display: flex; flex-direction: row; justify-content: flex-start; }
.delivery-info-section .delivery-info > div > strong { width: 100%; min-width: 160px; max-width: 160px; font-size: 16px; font-weight: 500; color: #888; letter-spacing: -0.75px; line-height: 1; }
.delivery-info-section .delivery-info > div > p { width: 100%; font-size: 16px; font-weight: 400; color: #333; letter-spacing: -0.75px; line-height: 1; }
.orderer-info-section .orderer-info > div > strong { width: 100%; min-width: 60px; max-width: 60px; font-size: 14px; font-weight: 500; color: #888; letter-spacing: -0.75px; line-height: 1; }
.orderer-info-section .orderer-info > div > p { width: 100%; font-size: 14px; font-weight: 400; color: #333; letter-spacing: -0.75px; line-height: 1; }
.orderer-info-section .orderer-info .orderer-email p { color: #888; }
.order-detail .order-products-section .order-products .product-item { width: 100%; padding: 20px; flex-direction: column; gap: 20px; background-color: #fff; border-radius: 10px; border: 1px solid #eee; }
.order-detail .order-products-section .order-products .product-item .product-status { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.order-detail .order-products-section .order-products .product-item .product-status .status-badge { font-size: 16px; color: #000; font-weight: 600; letter-spacing: -0.75px; line-height: 1; }
.order-detail .order-products-section .order-products .product-item .product-status .btn-tracking { display: flex; flex-direction: row; align-items: center; gap: 5px; justify-content: center; background-color: #fff; color: #23b16c; font-size: 15px; letter-spacing: -0.75px; font-weight: 500; line-height: 1; transition: all 0.3s; }
.order-detail .order-products-section .order-products .product-item .product-status .btn-tracking span { line-height: 1.4; }
.order-detail .order-products-section .order-products .product-item .product-content { width: 100%; display: flex; flex-direction: row; align-items: stretch; gap: 15px; }
.order-detail .order-products-section .order-products .product-item .product-content .product-info-wrap { width: 100%; display: flex; flex-direction: row; justify-content: space-between; }
.order-detail .order-products-section .order-products .product-item .product-content .product-name .name , .order-detail .order-products-section .order-products .product-item .product-content .product-name .namea{ font-size: 16px; font-weight: 400; color: #333; letter-spacing: -0.75px; line-height: 1; }
.order-detail .order-products-section .order-products .product-item .product-content .product-name .product-option { font-size: 14px; font-weight: 400; color: #888; letter-spacing: -0.75px; line-height: 1; }
.order-detail .order-products-section .order-products .product-item .product-content .product-info .product-details { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; }
.order-detail .order-products-section .order-products .product-item .product-content .product-info .product-details span { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; }
.order-detail .order-products-section .order-products .product-item .product-content .product-info .product-details .product-price { font-size: 16px; font-weight: 600; line-height: 1; color: #333; }
.order-detail .order-products-section .order-products .product-item .product-content .product-info .product-details .product-quantity { font-size: 16px; font-weight: 400; line-height: 1; color: #888; }
.order-detail .order-products-section .order-products .product-item .product-content .product-info .product-details .product-price + .product-quantity::before { content: ""; width: 1px; height: 15px; background-color: #dadada; display: block; }
.order-detail .order-products-section .order-products .product-actions.web { width: fit-content; display: flex; align-items: flex-end; flex-direction: row; justify-content: flex-end; gap: 8px; }
.order-detail .order-products-section .order-products .product-actions.mobile { display: none; width: fit-content; align-items: flex-end; flex-direction: row; justify-content: flex-end; gap: 8px; }
.order-detail .order-products-section .order-products .product-actions .btn-add { min-width: 40px; height: 40px; border-radius: 5px; background-color: #fff; border: 1px solid #dadada; display: flex; flex-direction: row; align-items: center; justify-content: center; transition: all 0.3s; }
.order-detail .order-products-section .order-products .product-actions .btn-add i { width: 14px; height: 14px; background: url(../../images/icon/cart-icon.svg) 50% 50% no-repeat; background-size: contain; }
.order-detail .order-products-section .order-products .product-actions .btn-add:hover { border-color: #727272; }
.order-detail .order-products-section .order-products .product-actions .btn-add:hover i { filter: brightness(0.75); }
.order-detail-content .row-wrap { width: 100%; display: flex; flex-direction: row; align-items: flex-start; gap: 40px; padding-bottom: 120px; }
.order-detail .order-products-section .order-products .product-actions .btn-review { width: 100%; max-width: 165px; min-width: 165px; height: 40px; padding: 10px; display: flex; flex-direction: row; align-items: center; justify-content: center; background-color: #fff; border: 1px solid #23b16c; border-radius: 5px; color: #23b16c; font-size: 14px; letter-spacing: -0.75px; font-weight: 500; transition: all 0.3s; }
.order-detail .order-products-section .order-products .product-actions .btn-inquiry, .order-detail .order-products-section .order-products .product-actions .btn-detail, .order-detail .order-products-section .order-products .product-actions .btn-withdraw { display: flex; min-width: 100px; height: 40px; border: 1px solid #dadada; background-color: #fff; flex-direction: row; align-items: center; justify-content: center; border-radius: 5px; font-size: 14px; letter-spacing: -0.75px; color: #333; font-weight: 500; transition: all 0.3s; }
.order-detail .order-products-section .order-products .product-actions .btn:hover { box-shadow: 0 0 5px #00000020; }
/* PC 화면에서 모바일용 CTA 바 숨김 */
.mobile-cta-bar { display: none; }
.order-detail .order-actions { width: 100%; display: flex; justify-content: center; }
.order-detail .order-actions .action-buttons { width: 100%; max-width: 580px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; }
.order-detail .order-actions .action-buttons .btn { width: 100%; max-width: 280px; display: flex; height: 50px; padding: 10px; justify-content: center; align-items: center; gap: 8px; border-radius: 5px; background-color: #fff; border: 1px solid #eee; font-size: 16px; font-weight: 500; letter-spacing: -0.75px; line-height: 1; }
.order-detail .order-actions .action-buttons .btn-cancel { color: #333; }
.order-detail .order-actions .action-buttons .btn-exchange { background-color: #333; color: #fff; }
.order-detail .order-actions .action-buttons .btn-complete { background-color: #23b16c; color: #fff; }
/* 일반주문 - 주문취소 */
.cancel-step-content { max-width: 780px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 40px; padding-bottom: 120px; }
.cancel-products-section, .exchange-return-products-section, .selected-products-section { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.section-title { width: 100%; text-align: center; font-size: 20px; font-weight: 600; letter-spacing: -0.75px; line-height: 1; color: #333; }
.section-title.left { text-align: left; }
.cancel-step-content .product-selection, .exchange-return-products-section .product-selection, .exchange-reason-section, .return-reason-section { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.cancel-step-content .product-selection .product-item, .exchange-return-products-section .product-selection .product-item { width: 100%; }
.cancel-step-content .product-selection .product-item .item-wrap { width: 100%; display: flex; padding: 20px; flex-direction: row; gap: 15px; border: 1px solid #eee; border-radius: 10px; transition: all 0.3s; }
.exchange-return-products-section .product-selection .product-item .item-wrap { width: 100%; display: flex; padding: 20px; flex-direction: row; gap: 15px; border: 1px solid #eee; border-radius: 10px; transition: all 0.3s; }
.cancel-step-content .product-selection .product-content { width: 100%; display: flex; flex-direction: row; gap: 15px; }
.exchange-return-products-section .product-selection .product-item .product-content { width: 100%; display: flex; flex-direction: row; gap: 15px; }
.cancel-step-content .product-selection .product-content .product-image { min-width: 70px; max-width: 70px; height: 70px; }
.cancel-step-content .product-selection .product-item.selected .item-wrap { border-color: #23b16c; }
.exchange-return-products-section .product-selection .product-item.selected .item-wrap { border-color: #23b16c; }
.cancel-step-content .product-name .name,
.cancel-step-content .product-name .name a { font-size: 16px; font-weight: 500; color: #333; }
.cancel-step-content .product-name .description { font-size: 14px; font-weight: 400; color: #888; letter-spacing: -0.75px; line-height: 1; }
.cancel-step-content .product-price .current-price { font-weight: 700; }
.cancel-step-content .product-price .original-price { text-decoration-line: line-through; color: #b5b5b6; font-weight: 400; font-size: 16px; line-height: 1; }
.cancel-step-content .action-buttons, .exchange-return-step-content .action-buttons { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 10px; }
.cancel-step-content .action-buttons .btn, .action-buttons .action-buttons .btn { width: 100%; display: flex; height: 50px; padding: 10px; justify-content: center; align-items: center; gap: 8px; border-radius: 5px; background-color: #fff; border: 1px solid #eee; font-size: 16px; font-weight: 500; letter-spacing: -0.75px; line-height: 1; }
.cancel-step-content .action-buttons .next-btn, .cancel-step-content .action-buttons .cancel-btn, .cancel-step-content .action-buttons .green-btn, .exchange-return-step-content .action-buttons .next-btn { background-color: #23b16c; border: 1px solid #23b16c; color: #fff; }
/* 일반주문 - 주문취소 요청상품 */
.cancel-products-section .selected-products, .selected-products-section .selected-products { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.cancel-products-section .selected-products .product-item, .selected-products-section .selected-products .product-item { width: 100%; }
.cancel-products-section .selected-products .product-item .product-content, .selected-products-section .selected-products .product-item .product-content { width: 100%; display: flex; flex-direction: row; gap: 15px; padding: 20px; border: 1px solid #eee; border-radius: 10px; transition: all 0.3s; }
.cancel-products-section .selected-products .product-item .product-content .product-image { min-width: 70px; max-width: 70px; height: 70px; }
.cancel-products-section .selected-products .product-item.is-hidden, .selected-products-section .selected-products .product-item.is-hidden, .exchange-option-section .selected-product-info .product-item.is-hidden { display: none; }
.cancel-products-section .more-wrap, .selected-products-section .more-wrap, .exchange-option-section .more-wrap { width: 100%; display: flex; text-align: center; flex-direction: row; align-items: center; }
.cancel-products-section .more-btn, .selected-products-section .more-btn, .exchange-option-section .more-btn { width: 100%; height: 45px; border: 1px solid #eeeeee; border-radius: 5px; background-color: #fff; font-size: 14px; letter-spacing: -0.75px; line-height: 1; color: #b5b5b6; font-weight: 600; transition: all 0.3s; }
.cancel-products-section .more-btn:hover, .selected-products-section .more-btn:hover, .exchange-option-section .more-btn:hover { border-color: #727272; color: #727272; }
.cancel-reason-section, .refund-info-section { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.cancel-reason-section .reason-options, .refund-info-section .refund-content, .process-method-section .process-method-options { width: 100%; display: flex; flex-direction: column; gap: 25px; padding: 20px; border: 1px solid #eee; border-radius: 10px; transition: all 0.3s; }
.cancel-reason-section .reason-options .reason-text { color: #333; letter-spacing: -0.75px; line-height: 1; font-size: 16px; }
.refund-info-section .refund-content .refund-breakdown, .refund-info-section .refund-content .total { width: 100%; display: flex; flex-direction: column; gap: 20px; }
.refund-info-section .refund-content .refund-breakdown .breakdown-item, .refund-info-section .refund-content .total .refund { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.refund-info-section .refund-content .refund-breakdown + .total::before { content: ""; width: 100%; height: 1px; background-color: #eeeeee; display: block; }
.refund-info-section .refund-content .refund-breakdown .breakdown-item span, .refund-info-section .refund-content .total .refund span { font-size: 16px; letter-spacing: -0.75px; line-height: 1; color: #888888; font-weight: 400; }
.refund-info-section .refund-content .refund-breakdown .breakdown-item.order span { font-weight: 600; color: #333; }
.refund-info-section .refund-content .total .refund.total span { font-size: 18px; font-weight: 600; color: #23b16c; }
/* 환불 예정 금액 확인 섹션 스타일 */
.refund-info-section .refund-breakdown { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.refund-info-section .refund-breakdown .breakdown-item { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.refund-info-section .refund-breakdown .breakdown-item span { font-size: 16px; letter-spacing: -0.75px; line-height: 1; color: #888888; font-weight: 400; }
.refund-info-section .refund-breakdown .breakdown-item.order span { font-weight: 600; color: #333; }
/* 환불 받을 계좌 정보 섹션 */
.refund-account-section { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.refund-account-section .refund-account-content { width: 100%; display: flex; flex-direction: column; gap: 25px; padding: 20px; border: 1px solid #eee; border-radius: 10px; transition: all 0.3s; }
.refund-account-section .account-notice { font-size: 14px; letter-spacing: -0.75px; line-height: 1.4; color: #888888; font-weight: 400; }
.refund-account-section .account-form { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.refund-account-section .form-group { width: 100%; display: flex; flex-direction: row; gap: 8px; align-items: center; }
.refund-account-section .form-label { font-size: 16px; letter-spacing: -0.75px; line-height: 1; color: #333; font-weight: 500; }
.refund-account-section .form-input { width: 100%; height: 50px; padding: 0 15px; border: 1px solid #dadada; border-radius: 5px; font-size: 14px; letter-spacing: -0.75px; line-height: 1; color: #333; background: #fff; transition: all 0.3s; }
.refund-account-section .form-input:focus { outline: none; border-color: #23b16c; }
.refund-account-section .form-input::placeholder { color: #b5b5b6; }
/* 환불 받을 계좌 정보 표시 (완료 페이지) */
.refund-account-section .account-info { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.refund-account-section .account-item { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.refund-account-section .account-item .label { font-size: 16px; letter-spacing: -0.75px; line-height: 1; color: #888888; font-weight: 400; }
.refund-account-section .account-item .value { font-size: 16px; letter-spacing: -0.75px; line-height: 1; color: #333; font-weight: 500; }
.cancel-step-content .complete-head { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.cancel-step-content .complete-head .icon { width: 50px; height: 50px; border-radius: 50%; border: 4px solid #23b16c; display: flex; flex-direction: row; align-items: center; justify-content: center; margin-bottom: 10px; }
.cancel-step-content .complete-head .icon .check-ico { width: 40px; height: 40px; background: url(../../images/icon/only_check_on.svg) 50% 50% no-repeat; background-size: contain; }
.cancel-step-content .complete-head .complete-title { font-size: 32px; line-height: 1; letter-spacing: -0.75px; color: #333; font-weight: 700; }
.cancel-step-content .complete-head .complete-desc { font-size: 16px; line-height: 1.4; letter-spacing: -0.75px; color: #666; font-weight: 400; margin-top: 10px; }
.cancel-step-content .complete-head .complete-desc .label { color: #888; }
.cancel-step-content .complete-head .complete-desc strong { color: #333; font-weight: 600; }
.process-method-section { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.exchange-flow, .return-flow { width: 100%; }
.exchange-return-step-content .exchange-flow .exchange-reason-section .reason-options, .exchange-return-step-content .return-flow .return-reason-section .reason-options { width: 100%; display: flex; flex-direction: column; gap: 25px; padding: 20px; border: 1px solid #eee; border-radius: 10px; transition: all 0.3s; }
.other-reason-field textarea { width: 100%; resize: none; padding: 10px; }
.other-reason-field .reason-input-section .required-field { color: #ff3b30; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: -0.75px; }
.other-reason-field .reason-input-section textarea { height: 110px; }
.other-reason-field .reason-input-section .character-count { color: #888; font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: -0.75px; }
.reason-options .other-reason-field { width: 100%; display: flex; flex-direction: column; padding: 10px 20px 0px; gap: 15px; }
.reason-options .other-reason-field .reason-input-section { width: 100%; position: relative; display: flex; flex-direction: column; gap: 5px; }
.reason-options .character-count { width: 100%; display: flex; flex-direction: row; justify-content: flex-end; }
.reason-options .photo-upload-section { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.reason-options .photo-upload-section .photo-slots { width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; }
.reason-options .photo-upload-section .photo-slots .photo-slot { width: 70px; height: 70px; display: flex; flex-direction: row; align-items: center; justify-content: center; border: 1px solid #eee; background-color: #fafafa; cursor: pointer; position: relative; }
.reason-options .photo-upload-section .photo-slots .photo-slot i { font-size: 20px; color: #dadada; }
.reason-options .photo-upload-section .photo-slots .photo-slot.uploaded img { width: 100%; height: 100%; object-fit: cover; }
.reason-options .photo-upload-section .photo-slots .photo-slot.uploaded .photo-remove { position: absolute; top: 0; right: 0; width: 15px; height: 15px; background-color: #00000099; display: flex; align-items: center; justify-content: center; border-radius: 0; }
.reason-options .photo-upload-section .photo-slots .photo-slot.uploaded .photo-remove i { font-size: 10px; color: #ffffff; }
.reason-options .photo-upload-section .upload-info ul { width: 100%; display: flex; flex-direction: column; }
.reason-options .photo-upload-section .upload-info ul li { color: #b5b5b6; font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: -0.75px; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 5px; }
.reason-options .photo-upload-section .upload-info ul li::before { content: ""; width: 5px; height: 1px; background-color: #b5b5b6; display: block; margin-top: 7px; }
/* 기타 사유 입력 필드 스타일 */
.other-reason-field { width: 100%; display: flex; flex-direction: column; padding: 10px 20px 0px; gap: 15px; }
.other-reason-field .reason-input-section { width: 100%; position: relative; display: flex; flex-direction: column; gap: 5px; }
.other-reason-field .reason-input-section .required-field { color: #ff3b30; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: -0.75px; }
.other-reason-field .reason-input-section textarea { width: 100%; height: 110px; resize: none; padding: 10px; border: 1px solid #dadada; border-radius: 5px; font-size: 14px; letter-spacing: -0.75px; line-height: 1.4; color: #333; background: #fff; transition: all 0.3s; }
.other-reason-field .reason-input-section textarea:focus { outline: none; border-color: #23b16c; }
.other-reason-field .reason-input-section textarea::placeholder { color: #b5b5b6; }
.other-reason-field .reason-input-section .character-count { width: 100%; display: flex; flex-direction: row; justify-content: flex-end; color: #888; font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: -0.75px; }
.other-reason-field .reason-input-section .character-count.limit-reached { color: #ff3b30; }
/* 일반주문조회 - 교환 */
.exchange-return .exchange-return-step-content { max-width: 780px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.exchange-return .action-buttons { max-width: 780px; width: 100%; margin: 0 auto 80px; }
.exchange-flow { display: flex; flex-direction: column; gap: 20px; }
.exchange-flow .exchange-option-section, .overall-exchange-summary, .selected-exchange-summary, .delivery-info-section, .pickup-info-section { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.exchange-options-section { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.exchange-options-section .option-group { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.exchange-options-section .option-group .form-label { font-size: 16px; letter-spacing: -0.75px; line-height: 1; color: #333; display: flex; flex-direction: row; align-items: center; gap: 5px; }
.exchange-options-section .option-group .form-label .selected-count { color: #888; }
.exchange-options-section .option-group .form-select { width: 100%; height: 50px; padding: 10px; border: 1px solid #dadada; border-radius: 5px; font-size: 14px; letter-spacing: -0.75px; line-height: 1; }
.exchange-options-section .option-group .form-select option.has-exchange-options { color: #117545; }
.exchange-options-section .product-exchange-option { width: 100%; display: flex; flex-direction: column; gap: 15px; padding: 20px; border: 1px solid #eee; border-radius: 10px; background-color: #fff; }
.exchange-options-section .product-exchange-option .product-header { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; }
.exchange-options-section .product-exchange-option .product-image-small, .product-overview-item .product-overview-content .product-overview-image, .product-comparison .original-product .product-image-small, .exchange-product .product-image-small { min-width: 50px; max-width: 50px; width: 100%; height: 50px; border-radius: 5px; overflow: hidden; }
.exchange-options-section .product-exchange-option .product-image-small img, .product-overview-item .product-overview-content .product-overview-image img, .product-comparison .original-product .product-image-small img, .exchange-product .product-image-small img { width: 100%; height: 100%; object-fit: cover; }
.overall-exchange-summary .section-subtitle, .delivery-info-section .section-subtitle, .pickup-info-section .section-subtitle { color: #333; font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: -0.75px; }
.overall-summary-content { width: 100%; }
.option-group .quantity-selector { width: fit-content; display: flex; flex-direction: row; align-items: center; background: #fff; border-radius: 4px; border: 1px solid #eee; }
.option-group .quantity-selector .qty-btn, .option-group .quantity-selector .qty-input { min-width: 28px; width: 100%; max-width: 28px; height: 28px; gap: 0; border: none; text-align: center; }
.selected-exchange-summary { width: 100%; }
.exchange-summary-list { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.exchange-summary-list .exchange-summary-item { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.original-product-section { width: 100%; }
.product-comparison { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; }
.original-product { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
.exchange-product { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
.selected-product-info { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.selected-product-info .product-item .item-wrap { gap: 15px; width: 100%; padding: 20px; border: 1px solid #eee; border-radius: 10px; background-color: #fff; transition: all 0.3s; }
.selected-product-info .product-item.selected .item-wrap { border-color: #23b16c; }
.selected-product-info .product-item .product-content { width: 100%; display: flex; flex-direction: row; align-items: flex-start; gap: 15px; }
.selected-product-info .product-item .product-content .product-image { min-width: 70px; max-width: 70px; width: 100%; height: 70px; }
.selected-product-info .product-item .product-content .product-name .name,
.selected-product-info .product-item .product-content .product-name .name ar { color: #333; font-weight: 500; font-size: 16px; line-height: 100%; letter-spacing: -0.75px; }
.selected-product-info .product-item .product-content .product-name .description { font-size: 14px; color: #888; font-weight: 400; line-height: 1; letter-spacing: -0.75px; }
.selected-product-info .product-item .product-content .product-details .product-price { font-size: 16px; font-weight: 700; color: #333; }
.selected-product-info .product-item input[type="radio"] + label::before { content: ""; display: block; width: 16px; min-width: 16px; max-width: 16px; height: 16px; background: url(../../images/icon/check-off.svg) 50% 50% no-repeat; transition: all 0.3s; }
.selected-product-info .product-item input[type="radio"]:checked + label::before { background: url(../../images/icon/check-on.svg) 50% 50% no-repeat; transition: all 0.3s; }
/* 교환 예정 상품 스타일 */
.exchange-pending-section { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.exchange-pending-list { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 15px; background-color: #fff; border: 1px solid #dadada; border-radius: 10px; }
.exchange-pending-item { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; padding: 15px; background-color: #fafafa; border-radius: 5px; }
.exchange-pending-item .item-info-wrap { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.exchange-pending-item .item-info { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.exchange-pending-item .quantity-selector { display: flex; flex-direction: row; align-items: center; background-color: #fff; border-radius: 4px; border: 1px solid #eee; }
.exchange-pending-item .quantity-selector .qty-btn { min-width: 28px; width: 100%; max-width: 28px; height: 28px; gap: 0; border: none; text-align: center; }
.exchange-pending-item .quantity-selector .qty-input { min-width: 28px; width: 100%; max-width: 28px; height: 28px; gap: 0; border: none; text-align: center; }
.exchange-pending-item .item-name { display: flex; align-items: center; gap: 10px; }
.exchange-pending-item .item-name strong { font-size: 15px; font-weight: 600; line-height: 1; color: #333; letter-spacing: -0.75px; }
.exchange-pending-item .exchange-arrow { color: #23b16c; font-weight: bold; font-size: 18px; }
.exchange-pending-item .item-options { display: flex; flex-direction: column; gap: 5px; flex-wrap: wrap; }
.exchange-pending-item .option-tag { font-size: 14px; letter-spacing: -0.75px; font-weight: 500; }
.exchange-pending-item .option-tag.product-option { color: #888; }
.exchange-pending-item .option-tag.additional { color: #23b16c; font-size: 12px; }
.exchange-pending-item .item-quantity { font-size: 12px; letter-spacing: -0.75px; font-weight: 500; }
.exchange-pending-item .quantity-display { font-weight: 600; }
.exchange-pending-item .exchange-quantity { color: #23b16c; }
.exchange-pending-item .original-quantity { color: #6c757d; }
.exchange-pending-item .item-price { min-width: 200px; }
.exchange-pending-item .price-comparison { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.exchange-pending-item .original-price { font-size: 14px; color: #6c757d; text-decoration: line-through; }
.exchange-pending-item .new-price { font-weight: 600; color: #000; font-size: 16px; }
.exchange-pending-item .price-difference { font-size: 12px; font-weight: 600; }
.exchange-pending-item .price-difference.positive { color: #dc3545; }
.exchange-pending-item .price-difference.negative { color: #28a745; }
.exchange-pending-item .remove-item-btn { background: none; border: none; color: #333; font-size: 18px; cursor: pointer; margin-left: 15px; }
.exchange-total-info { padding: 15px; background: #fff; border-radius: 6px; border: 1px solid #dadada; }
.exchange-total-info .total-comparison { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.exchange-total-info .total-row { display: flex; justify-content: space-between; align-items: center; }
.exchange-total-info .total-row:last-child { margin-bottom: 0; }
.exchange-total-info .total-row.difference { padding-top: 10px; border-top: 1px solid #dadada; font-weight: 700; }
.exchange-total-info .total-label { font-weight: 600; color: #888; }
.exchange-total-info .total-amount { font-weight: 700; }
.exchange-total-info .total-amount.original { color: #888; text-decoration: line-through; }
.exchange-total-info .total-amount.new { color: #000; }
.exchange-total-info .total-amount.positive { color: #dc3545; }
.exchange-total-info .total-amount.negative { color: #28a745; }
.exchange-total-info .total-amount.additional { color: #e74c3c; }
.exchange-total-info .total-amount.shipping { color: #666; }
.exchange-total-info .total-row.difference .total-label { color: #000; }
.exchange-total-info .total-row.shipping-fee { background: #f8f9fa; padding: 8px 12px; border-radius: 4px; margin: 5px 0; }
.exchange-total-info .total-row.total-cost { border-top: 2px solid #e74c3c; padding-top: 10px; margin-top: 10px; background: #fff5f5; padding: 10px 12px; border-radius: 4px; }
.delivery-info-section .title-wrap, .pickup-info-section .title-wrap { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.delivery-info-section .title-wrap .change-address-link, .pickup-info-section .title-wrap .change-address-link { font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: -0.75px; color: #23b16c; }
.address-info { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 20px; background-color: #fff; border: 1px solid #eee; border-radius: 10px; }
.address-info .address-title { font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: -0.75px; color: #333; }
.address-info .address-details { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.address-info .address-details p { font-size: 14px; font-size: 400; line-height: 1; letter-spacing: -0.75px; color: #333; }
/* 반품신청 */
.exchange-return-step-content .return-flow { display: flex; flex-direction: column; gap: 40px; }
.return-shipping-payment-section, .return-method-section { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.section-subtitle { font-size: 20px; line-height: 1; letter-spacing: -0.75px; color: #333; font-weight: 600; }
.payment-method-options, .return-method-options { width: 100%; padding: 20px; display: flex; flex-direction: column; gap: 20px; border: 1px solid #eee; border-radius: 10px; }
.return-method-options .radio-group .radio-text { display: flex; flex-direction: column; gap: 5px; }
.return-method-options .radio-group .radio-text span { font-size: 16px; font-weight: 500; letter-spacing: -0.75px; line-height: 1; color: #333; }
.return-method-options .radio-group .radio-text p { font-size: 13px; letter-spacing: -0.75px; line-height: 1; color: #888; }
.shipping-fee-info { border-bottom: 1px solid #eee; padding-bottom: 20px; }
.payment-option-wrap { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.payment-option .payment-info .payment-title { font-size: 15px; letter-spacing: -0.75px; }
.fee-row { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.fee-row span { font-size: 16px; font-weight: 600; color: #333; line-height: 1; letter-spacing: -0.5px; }
.complete-message { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.complete-message .complete-icon { width: 50px; height: 50px; border-radius: 50%; border: 4px solid #23b16c; display: flex; flex-direction: row; align-items: center; justify-content: center; }
.complete-message .complete-icon .check-ico { width: 40px; height: 40px; background: url(../../images/icon/only_check_on.svg) 50% 50% no-repeat; background-size: contain; }
.complete-message .complete-title { font-size: 32px; line-height: 1; letter-spacing: -0.75px; color: #333; font-weight: 700; }
.complete-message .complete-description { font-size: 13px; line-height: 1; letter-spacing: -0.75px; color: #888; font-weight: 400; }
.return-request-section, .exchange-request-section, .reason-section, .exchange-cost-section, .return-method-section, .return-shipping-section, .return-cost-section, .refund-amount-section { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.return-item, .exchange-item { width: 100%; display: flex; padding: 20px; flex-direction: row; align-items: center; gap: 15px; border: 1px solid #eee; border-radius: 10px; transition: all 0.3s; }
.return-request-section .item-info, .exchange-request-section .item-info { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.return-request-section .item-info .item-name, .exchange-request-section .item-info .item-name { font-size: 16px; font-weight: 500; letter-spacing: -0.75px; color: #333; }
.return-request-section .item-info .item-options, .exchange-request-section .item-info .item-options { font-size: 14px; font-weight: 400; letter-spacing: -0.75px; color: #888; }
.return-request-section .item-info .item-quantity, .exchange-request-section .item-info .item-quantity { font-size: 12px; font-weight: 400; letter-spacing: -0.75px; color: #888; }
.return-request-section .item-info .item-price, .exchange-request-section .item-info .item-price { font-size: 16px; font-weight: 700; letter-spacing: -0.75px; color: #333; }
.reason-section .reason-content { width: 100%; display: flex; padding: 20px; flex-direction: column; gap: 15px; border: 1px solid #eee; border-radius: 10px; transition: all 0.3s; }
.cost-info, .method-info { width: 100%; display: flex; padding: 20px; flex-direction: column; gap: 10px; border: 1px solid #eee; border-radius: 10px; transition: all 0.3s; }
.cost-info .cost-item, .refund-info .refund-row { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.item-image { min-width: 70px; max-width: 70px; height: 70px; border-radius: 5px; overflow: hidden; }
.item-image img { width: 100%; height: 100%; object-fit: cover; }
.method-info .method-item { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; }
.method-info .method-item .method-text { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.reason-text-preview { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reason-content .reason-detail { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 15px; }
.reason-content .reason-item { width: 100%; display: flex; flex-direction: row; align-items: flex-start; gap: 15px; }
.reason-content .reason-label { min-width: 60px; max-width: 60px; font-size: 16px; letter-spacing: -0.75px; color: #888; line-height: 1.4; }
.reason-content .reason-text-container { width: calc(100% - 150px); position: relative; }
.reason-content .reason-text-full, .reason-text-preview, .reason-value { font-size: 16px; letter-spacing: -0.75px; color: #333; line-height: 1.4; word-break: keep-all; }
.reason-content .reason-detail .toggle-btn { min-width: 60px; max-width: 60px; }
.attached-photos .photo-grid { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin-left: 75px; }
.attached-photos .photo-grid .photo-item { width: 70px; height: 70px; overflow: hidden; cursor: pointer; }
.attached-photos .photo-grid .photo-item img { width: 100%; height: 100%; object-fit: cover; }
.cost-info .cost-item .cost-label, .method-info .method-item .method-label, .refund-info .refund-row .refund-label { font-size: 16px; letter-spacing: -0.75px; color: #888; line-height: 1; font-weight: 400; }
.cost-info .cost-item .cost-amount, .cost-info .cost-item .cost-method { font-size: 18px; letter-spacing: -0.75px; color: #333; line-height: 1; font-weight: 600; }
.refund-info { width: 100%; display: flex; flex-direction: column; gap: 25px; background-color: #ffffff; border-radius: 10px; border: 1px solid #eee; }
.refund-info .flex-wrap { width: 100%; display: flex; flex-direction: column; gap: 20px; padding: 20px 20px 0 20px; }
.refund-info .flex-wrap.order + .flex-wrap.deduct { border-top: 1px solid #eee; }
.refund-info .flex-wrap .flex-col { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.refund-info .refund-row .refund-label { font-size: 16px; font-weight: 400; letter-spacing: -0.75px; color: #888; }
.refund-info .refund-row .refund-value { font-size: 16px; font-weight: 500; color: #888; }
.refund-info .refund-row .refund-label.total { font-size: 16px; font-weight: 600; letter-spacing: -0.75px; color: #333; }
.refund-info .refund-row .refund-value.total { font-size: 18px; font-weight: 600; color: #333; }
.refund-info .refund-row.total { padding: 20px; background-color: #fafafa; border-top: 1px solid #eee; }
.refund-info .refund-row.total .refund-label { font-size: 18px; font-weight: 600; letter-spacing: -0.75px; color: #333; }
.refund-info .refund-row.total .refund-value { font-size: 22px; font-weight: 700; color: #23b16c; }
.method-item .method-text .method-value { font-size: 16px; font-weight: 500; letter-spacing: -0.75px; line-height: 1; color: #333; }
.method-item .method-text .method-description { font-size: 13px; letter-spacing: -0.75px; line-height: 1; color: #888; }
.order-cancel .action-buttons { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 10px; padding-bottom: 80px; }
.order-cancel .action-buttons .btn { width: 100%; display: flex; height: 50px; padding: 10px; justify-content: center; align-items: center; gap: 8px; border-radius: 5px; background-color: #fff; border: 1px solid #eee; font-size: 16px; font-weight: 500; letter-spacing: -0.75px; line-height: 1; }
.order-cancel .action-buttons .next-btn, .order-cancel .action-buttons .cancel-btn, .order-cancel .action-buttons .green-btn, .order-cancel .action-buttons .history-btn { background-color: #23b16c; border: 1px solid #23b16c; color: #fff; }
.cancel-exchange-detail-content { width: 100%; display: flex; flex-direction: column; gap: 40px; }
.request-info-section, .status-section, .detail-info-section, .refund-exchange-info-section, .products-info-section, .reason-images-section, .reason-info-section, .exchange-products-section { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.cancel-exchange-detail-content .row-wrap { width: 100%; display: flex; flex-direction: row; align-items: flex-start; gap: 40px; padding-bottom: 120px; }
.detail-info-section .detail-info, .refund-exchange-info-section .refund-exchange-info, .reason-info-section .reason-info { width: 100%; display: flex; padding: 20px; flex-direction: column; gap: 25px; background-color: #ffffff; border-radius: 10px; border: 1px solid #eee; }
.reason-info-section .reason-info .reason-text { width: 100%; display: flex; align-items: flex-start; gap: 10px; }
.reason-info-section .reason-info .label { font-size: 14px; letter-spacing: -0.75px; color: #888; font-weight: 400; line-height: 1; min-width: 60px; max-width: 60px; width: 100%; }
.reason-info-section .reason-info .value { font-size: 16px; letter-spacing: -0.75px; color: #333; line-height: 1; }
.refund-exchange-info .amount-breakdown .breakdown-item { width: 100%; display: flex; flex-direction: row; justify-content: space-between; }
.reason-images { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 10px; }
.reason-images .reason-image { min-height: 70px; max-width: 70px; width: 100%; height: 70px; }
.reason-images .reason-image img { width: 100%; height: 100%; object-fit: cover; }
.request-info-section .request-info, .products-info-section .products-info { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.request-info-section .request-info .info-item { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 5px; }
.request-info-section .request-info .info-item span { font-size: 16px; letter-spacing: -0.75px; color: #888; line-height: 1; }
.products-info-section .product-item, .exchange-products-section .product-item { width: 100%; display: flex; padding: 20px; flex-direction: column; gap: 10x; background-color: #ffffff; border-radius: 10px; border: 1px solid #eee; }
.products-info-section .product-item .product-status-header, .exchange-products-section .product-item .product-status-header { width: 100%; display: flex; flex-direction: row; gap: 10px; align-items: center; }
.products-info-section .product-item .product-status-header .status-badges, .exchange-products-section .product-item .product-status-header .status-badges { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; }
.products-info-section .product-item .product-status-header .status-badges span, .exchange-products-section .product-item .product-status-header .status-badges span { color: #000; font-size: 16px; font-weight: 600; letter-spacing: -0.75px; line-height: 1; }
.products-info-section .product-item .product-status-header .status-badges .status-badge.completed + .status-badge.completed { color: #888; font-size: 16px; font-weight: 500; letter-spacing: -0.75px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; }
.products-info-section .product-item .product-status-header .status-badges .status-badge.completed + .status-badge.completed::before { content: ""; width: 1px; height: 13px; background-color: #888; display: block; }
.products-info-section .product-item .product-status-header .refund-schedule-info { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; }
.products-info-section .product-item .product-status-header .refund-schedule-info::before { content: ""; width: 1px; height: 13px; background-color: #888; display: block; }
.products-info-section .product-item .product-status-header .refund-schedule-info span { color: #888; font-size: 16px; font-weight: 500; letter-spacing: -0.75px; }
.products-info-section .product-item .product-content, .exchange-products-section .product-item .product-content { width: 100%; display: flex; flex-direction: row; gap: 15px; }
.products-info-section .product-item .product-content .product-name .product-option, .exchange-products-section .product-item .product-content .product-name .product-option { font-size: 14px; color: #888; letter-spacing: -0.75px; line-height: 1; }
.products-info-section .product-item .product-content .product-details, .exchange-products-section .product-item .product-content .product-details { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.product-details .price-info .product-price { font-size: 16px; color: #333; font-weight: 600; }
.product-details .product-quantity { font-size: 16px; color: #888; font-weight: 400; display: flex; flex-direction: row; align-items: center; gap: 10px; }
.product-details .price-info + .product-quantity::before { content: ""; width: 1px; height: 12px; display: block; background-color: #888; }
.refund-exchange-info .refund-info { width: 100%; display: flex; flex-direction: column; gap: 10px; background-color: #ffffff; border-radius: 0; border: none; }
.refund-exchange-info .refund-info .flex-wrap { padding: 0; }
.refund-exchange-info .refund-info .refund-row.total { padding: 20px 0; background-color: #fff; }
.refund-exchange-info .refund-method, .refund-exchange-info .refund-schedule { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.refund-exchange-info .refund-method span, .refund-exchange-info .refund-schedule span, .refund-exchange-info .refund-method p, .refund-exchange-info .refund-schedule p { font-size: 16px; letter-spacing: -0.75px; line-height: 1; color: #888; font-weight: 500; }
.refund-exchange-info .refund-info .flex-wrap.order .refund-row span { font-size: 16px; font-weight: 600; color: #333; }
.refund-exchange-info .refund-info .flex-wrap .flex-col span { font-size: 16px; font-weight: 500; color: #888; }
.refund-exchange-info .refund-info .refund-row.total span { color: #23b16c; font-size: 22px; font-weight: 700; }
.refund-exchange-info .amount-breakdown { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.refund-exchange-info .amount-breakdown .additional { padding-top: 10px; border-top: 1px solid #dadada; }
.refund-exchange-info .amount-breakdown span, .refund-exchange-info .exchange-schedule span, .refund-exchange-info .exchange-schedule p { font-size: 16px; letter-spacing: -0.75px; line-height: 1; color: #888; font-weight: 500; }
.refund-exchange-info .amount-breakdown .new span { color: #333; }
.refund-exchange-info .amount-breakdown .new .value { font-weight: 600; }
.refund-exchange-info .amount-breakdown .additional span { font-weight: 600; color: #000; }
.refund-exchange-info .exchange-schedule { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
@media only screen and (max-width: 1200px) {
.mypage .myinfo { padding: 40px 10px; }
.mypage .user { padding: 50px 10px; margin-top: 0; }
.mypage .mypage-list { padding: 50px 10px; }
.myinfo .side-navi .navi-list .depth1 .navi-item img { width: 24px; height: 24px; }
.myinfo .side-navi .navi-list .depth1 .navi-item span { font-size: 17px; }
.mypage .myinfo .side-navi .depth2-list .depth2 .navi-item { font-size: 15px; }
}
@media only screen and (max-width: 900px) {
.myinfo .payment-content .card-list .cards .card-item { width: 100%; }
.myinfo .payment-content .card-list .cards .card-item .card-text { max-width: 550px; }
.myinfo .payment-content .add-btn { margin-top: 70px; }
.cancel-exchange-detail-content .row-wrap { flex-direction: column; }
}
@media only screen and (max-width: 768px){
    .payment-password .col-buttons{padding: 20px;}
    .cancel-exchange-list{padding-inline: 20px;}
    .cancel-exchange-item .cancel-exchange-status-title{flex-wrap: wrap;}
}
@media only screen and (max-width: 720px) {
.mypage.pament-list { padding-bottom: 130px; }
.mypage.address-list { padding: 10px 20px 130px; }
.mypage.payment-password{background-color: #f5f5f5;height: calc(100% - 54px);}
.mypage .myinfo .wraper { height: 100%; }
.mypage .logout { display: flex; align-items: center; justify-content: center; font-size: 14px; letter-spacing: -0.75px; color: #888; line-height: 1; text-decoration: underline; letter-spacing: -0.5px; text-underline-offset: 3px; text-decoration-thickness: 1px; margin-bottom: 100px; }
.mypage .mypage-list .list ul .sub-list .panel .items-wrap { display: grid; grid-template-columns: repeat(2, 1fr); }
.mypage .myinfo { padding: 0 20px; height: 100%; }
.mypage.address-edit-page .myinfo { padding: 0 20px; }
.mypage .myinfo .contain .main-content .title { display: none; }
.myinfo .payment-content .card-list { justify-content: space-between; }
.myinfo .payment-content .card-list .card-wrap { padding: 0; }
.myinfo .payment-content .card-list .card-wrap .cards { gap: 0; }
.myinfo .payment-content .card-list .card-header { display: none; }
.myinfo .payment-content .card-list .cards .card-item { border: none; }
.myinfo .payment-content .card-list .cards .card-item .item-wrap { padding: 20px; }
.myinfo .payment-content .card-list .cards .card-item .card-actions { display: none; }
.myinfo .payment-content .card-list .cards .card-item .card-info { flex: 1; width: auto; min-width: 0; gap: 15px; }
.myinfo .payment-content .card-list .cards .card-item .card-info .card-thumb { flex: 0 0 85px; width: 85px; min-width: 85px; height: 55px; transform: none; }
.myinfo .payment-content .card-list .cards .card-item .card-info .card-text { max-width: none; }
.more-wrap { display: flex; }
.myinfo .payment-content .more-wrap .floating-menu { top: 100%; bottom: auto; margin-top: 4px; }
.myinfo .payment-content .card-item input[type="checkbox"] { pointer-events: none; opacity: 0; }
.myinfo .payment-content .checkmark { display: none !important; }
.myinfo .payment-content .card-item { cursor: default; }
.myinfo .payment-content .card-item:hover { border-color: #eee; }
.myinfo .payment-content .card-item:has(input[type="checkbox"]:checked), .myinfo .payment-content .card-item:hover { border-color: #eee; }
main .footer-button { padding: 0 10px; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); }
.pament-list .footer-button { padding: 20px; }
.address-list .footer-button { position: relative; }
.myinfo .payment-content .add-btn { margin-top: 0; box-shadow: 0 4px 12px #22222250; max-width: 100%; }
.myinfo .address-content .add-btn { box-shadow: 0 4px 15px 0 #0000000d; max-width: 100%; }
.card-registration { padding: 30px 16px 200px; min-height: calc(100vh - 54px); position: relative; }
.registration-step4, .registration-step5 { padding: 0; }
.payment-password-registration { position: relative; }
.payment-password-registration .wraper { display: flex; flex-direction: column; justify-content: flex-start; }
.information .myinfo .contain .main-content { padding: 30px 16px 50px; }
.myinfo .address-content .location-list .location-item { box-shadow: 0 4px 15px 0 #0000000d; }
.information .myinfo-content .page-title h2 { font-weight: 400; font-size: 16px; }
.information .myinfo-content .confirm-form .form-wrap, .information .myinfo-content .edit-form .form-wrap { border: none; padding: 0; }
.information .myinfo-content .confirm-form .input-item-wrapper .input-item, .information .myinfo-content .edit-form .input-item-wrapper .input-item { flex-direction: column; align-items: flex-start; }
.information .myinfo-content .confirm-form .form-wrap .input-item-wrapper .input-item .title { display: flex; }
.information .myinfo-content .confirm-form .input-item-wrapper .input-item .input-box .input, .information .myinfo-content .edit-form .input-item-wrapper .input-item .input-box .input { max-width: none; }
.input-item-wrapper .input-item .button { max-width: none; }
.information .myinfo-content .confirm-form .submit-btn, .information .myinfo-content .edit-form .submit-btn { max-width: none; }
.information .myinfo-content .confirm-form .input-item-wrapper .input-item .title, .information .myinfo-content .edit-form .input-item-wrapper .input-item .title { height: fit-content; }
.information .myinfo-content .form-buttons .buttons-wrap { flex-direction: column; align-items: flex-end; }
.information .myinfo-content .form-buttons .buttons-wrap .button { width: 100%; display: flex; flex-direction: row; justify-content: flex-end; }
.information .myinfo-content .form-buttons .buttons-wrap button { max-width: none; }
.information .myinfo-content .form-buttons .buttons-wrap .button .leave-btn { border: none; width: fit-content; height: fit-content; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 5px; }
.information .myinfo-content .form-buttons .buttons-wrap .button .leave-btn p { font-size: 12px; line-height: 1; font-weight: 400; letter-spacing: -0.75px; }
.information .myinfo-content .form-buttons .buttons-wrap .button .leave-btn i { display: block; font-size: 12px; }
.information .myinfo-content .input-box-wrap > .button { max-width: none; }
.zzim-item { align-items: stretch; }
.zzim-item .thumb { height: auto; }
.zzim-item .info-wrap { flex-direction: column; justify-content: space-between; gap: 10px; }
.zzim-item .cta { max-width: none; }
/* 보유쿠폰 */
.coupon .myinfo { padding: 0px; height: 100%; }
.coupon .myinfo .contain .main-content { gap: 0; }
.coupon .main-content .coupon-content { padding: 30px 20px 80px; height: calc(100svh - 54px - 50px); justify-content: space-between; min-height: fit-content; }
.coupon .main-content .coupon-content .coupon-list { flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; height: 100%; }
.coupon .main-content .coupon-content .coupon-list .coupon-item { max-width: 100%; flex-direction: column; height: fit-content; }
.coupon .main-content .tab-navigation .tab-list .tab-item { background-color: #fff; color: #888888; border: none; border-bottom: 1px solid #eee; }
.coupon .main-content .tab-navigation .tab-list .tab-item.active { background-color: #fff; color: #888888; border: none; border-bottom: 2px solid #23b16c; color: #23b16c; }
.coupon .main-content .tab-navigation .tab-list .tab-item.active:first-child { border: none; border-bottom: 2px solid #23b16c; }
.coupon .main-content .coupon-content .coupon-list .coupon-item .coupon-actions { max-width: 100%; min-width: 100%; padding: 10px; height: 100%; border-left: none; border-top: 1px solid #eee; }
.coupon .main-content .coupon-content .coupon-list .coupon-item .coupon-actions > div { display: flex; flex-direction: row; align-items: center; gap: 2px; height: 100%; width: 100%; justify-content: center; }
.coupon .main-content .tab-navigation.scroll-sticky { position: fixed; top: 54px; /* 모바일 헤더 높이에 맞춰 조정 */
    left: 0; right: 0; background: #fff; z-index: 1001; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
main .footer-button.mobile { display: flex; padding: 10px; }
main .footer-button.mobile .add-btn { width: 100%; height: 55px; display: flex; flex-direction: row; align-items: center; gap: 5px; justify-content: center; background-color: #fff; border-radius: 5px; border: 1px solid #eee; margin-top: 0; box-shadow: 0 4px 12px #22222250; max-width: 100%; }
main .footer-button.mobile .add-btn i { font-size: 16px; color: #23b16c; font-weight: 500; }
main .footer-button.mobile .add-btn p { font-size: 14px; color: #23b16c; font-weight: 500; letter-spacing: -0.75px; line-height: 1; }
/* 장바구니 */
.cart .myinfo { padding: 0; }
/* 장바구니 탭네비게이션 */
.cart .main-content .tab-navigation .tab-list .tab-item { background-color: #fff; color: #888888; border: none; border-bottom: 1px solid #eee; text-align: center; font-size: 15px; word-break: keep-all; }
.cart .main-content .tab-navigation .tab-list .tab-item.active { background-color: #fff; color: #888888; border: none; border-bottom: 2px solid #23b16c; color: #23b16c; }
.cart .main-content .tab-navigation .tab-list .tab-item.active:first-child { border: none; border-bottom: 2px solid #23b16c; }
/* 결제요약 */
.cart .cart-wrap { flex-direction: column; padding: 0 20px; }
.cart .cart-content { width: 100%; }
.cart .cart-wrap .payment-summary-wrap { position: inherit; width: 100%; padding-bottom: 30px; }
.cart .cart-wrap .payment-summary-wrap .payment-summary, .cart .cart-wrap .payment-summary-wrap .subscription-summary { min-width: 100%; max-width: 100%; }
/* 장바구니 탭 네비게이션 스크롤 고정 */
.cart .main-content .tab-navigation { will-change: transform; transform: translateZ(0); backface-visibility: hidden; perspective: 1000px; }
.cart .main-content .tab-navigation.scroll-sticky { position: fixed; top: 54px; left: 0; right: 0; background: #fff; z-index: 1001; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transform: translateZ(0); }
/* 모바일 CTA 바 */
.mobile-cta-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #eee; padding: 12px 20px; z-index: 1000; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); }
.mobile-cta-bar .cta-row { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
.mobile-cta-bar .btn { width: 100%; height: 48px; border-radius: 8px; font-size: 16px; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; }
.mobile-cta-bar .btn.primary { background: #23b16c; color: #fff; }
.mobile-cta-bar .order-detail .btn { width: 100%; display: flex; padding: 10px; justify-content: center; align-items: center; border-radius: 5px; gap: 8px; background-color: #fff; border: 1px solid #eee; font-size: 16px; font-weight: 500; letter-spacing: -0.75px; line-height: 1; }
.mobile-cta-bar .order-detail .btn-cancel { color: #333; }
.mobile-cta-bar .order-detail .btn-exchange { background-color: #333; color: #fff; }
.mobile-cta-bar .btn.primary:hover:not(:disabled) { background: #1e9a5e; }
.mobile-cta-bar .btn.primary:disabled { background: #ccc; color: #999; cursor: inherit; }
.mobile-cta-bar { width: 100%; display: flex; flex-direction: row; }
.cart .myinfo { padding-bottom: calc(80px + 65px + var(--safe-area-bottom)); }
/* 장바구니: 공용 하단 GNB(.bottom-bar)는 화면 맨 아래에 두고, 결제요약바(.mobile-cta-bar)를 그 위로 쌓음 */
body:has(main.cart) .mobile-cta-bar { bottom: calc(65px + var(--safe-area-bottom)); }
/* 일반주문조회 */
.order-item .order-status { flex-direction: column-reverse; align-items: flex-start; display: flex; }
.order-item .order-status .order-info .order-number { font-size: 13px; font-weight: 400; color: #888; }
.order-item .order-status .order-info + .status-info::before { display: none; }
.order-inquiry .order-product-wrap { flex-direction: column; }
.order-actions.web { display: none; }
.order-actions.mobile { display: flex; }
/* 주문상세 */
/* 결제정보, 총주문금액, 주문자 정보 */
.order-detail-content { padding-top: 20px; }
.order-detail-content .row-wrap { flex-direction: column; padding-bottom: calc(120px + 65px + var(--safe-area-bottom)); }
/* 주문상세: 공용 하단 GNB(.bottom-bar)는 화면 맨 아래에 두고, 결제요약바(.mobile-cta-bar)를 그 위로 쌓음 */
body:has(main.order-detail) .mobile-cta-bar { bottom: calc(65px + var(--safe-area-bottom)); }
.order-detail .order-products-section .order-products .product-actions.web { display: none; }
.order-detail .order-products-section .order-products .product-actions.mobile { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 8px; }
.order-detail .order-products-section .order-products .product-actions .btn-review { min-width: none; max-width: none; }
.order-detail .order-products-section .order-products .product-actions.mobile .btn { flex: 1; }
.cancel-step-content .complete-head { padding-top: 0; }
.cancel-step-content .product-selection, .exchange-return-products-section .product-selection, .exchange-reason-section, .return-reason-section { padding: 10px; }
.zzim-item .cta { max-width: none; min-width: 100%; }
}
/* 260602 마이페이지 고도화 디자인 */
.mypage.new { background-color: #F4F4F4; height: fit-content; }
.mypage.new .myinfo-new { padding: 40px 10px 120px; height: 100%; }
.myinfo-new .myinfo-layout { max-width: 1280px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr) 210px; gap: 16px; align-items: flex-start; transition: all 0.3s; }
/*왼쪽 사이드바  */
.mypage.new .myinfo-new .side-navi { height: 100%; padding: 30px; border-radius: 15px; background-color: #fff; }
.mypage.new .myinfo-new .side-navi .side-navi-bar { gap: 50px; }
.mypage.new .myinfo-new .side-navi .navi-list { gap: 50px; width: 100%; }
.mypage.new .myinfo-new .side-navi .side-navi-bar .title h3 { font-size: 22px; }
/* 중간 콘텐츠 */
.myinfo-new .mypage-content { display: flex; flex-direction: column; gap: 24px; }
.myinfo-new .mypage-content .mypage-card { background: #fff; border-radius: 10px; padding: 30px; display: flex; flex-direction: column; gap: 20px; width: 100%; }
.myinfo-new .mypage-content .mypage-card .user-top { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.myinfo-new .mypage-content .mypage-card .user-top .name { min-width: 80px; width: 100%; }
.myinfo-new .mypage-content .mypage-card .user-top .name p { font-size: 1.25rem; font-weight: 400; color: #333; letter-spacing: -0.75px; line-height: 1; display: flex; flex-direction: row; align-items: center; gap: 5px; }
.myinfo-new .mypage-content .mypage-card .user-top .name strong { font-size: inherit; font-weight: 700; }
.myinfo-new .mypage-content .mypage-card .user-top .my-rank { padding: 5px 8px; border-radius: 5px; background-color: #F1FAF7; display: flex; flex-direction: row; justify-content: space-between; align-items: center; max-width: 280px; width: 100%; height: 38px; }
.myinfo-new .mypage-content .mypage-card .user-top .my-rank .label { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
.myinfo-new .mypage-content .mypage-card .user-top .my-rank .heart-icon { width: 20px; height: 20px; background: url(../../images/user/heart-icon-green.png) 50% 50% no-repeat; background-size: contain; }
.myinfo-new .mypage-content .mypage-card .user-top .my-rank span { font-size: 1rem; letter-spacing: -0.75px; line-height: 1; color: #333; font-weight: 600; }
.myinfo-new .mypage-content .mypage-card .user-top .my-rank .value b { color: #23B16C; font-size: 1rem; font-weight: 700; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion { width: 100%; display: flex; flex-direction: column; align-items: center; border-radius: 5px; background-color: #23B16C; }
.donation-ranking-accordion { --ranking-title-width: 150px; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header { width: 100%; height: 40px; padding: 8px 24px; display: grid; grid-template-columns: var(--ranking-title-width) minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking-title { grid-column: 1; text-align: left; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.75px; color: #fff; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking { display: flex; flex-direction: row; justify-content: flex-start; gap: 10px; grid-column: 2; min-width: 0; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking .medal { min-width: 20px; height: 20px; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking.ranking-first .medal { background: url(../../images/user/gold.png) 50% 50% no-repeat; background-size: contain; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking.ranking-second .medal { background: url(../../images/user/silver.png) 50% 50% no-repeat; background-size: contain; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking.ranking-third .medal { background: url(../../images/user/bronze.png) 50% 50% no-repeat; background-size: contain; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking b { font-size: 1.125rem; color: #fff; font-weight: 600; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking p { font-size: 1.125rem; color: #fff; font-weight: 400; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking-control { grid-column: 3; display: flex; align-items: center; gap: 10px; justify-content: flex-end; white-space: nowrap; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking-control .ranking-toggle-text { font-size: 1rem; font-weight: 400; color: #fff; letter-spacing: -0.75px; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking-control .ranking-arrow { width: 20px; height: 20px; background: url(../../images/user/down-icon.svg) 50% 50% no-repeat; background-size: contain; transition: transform 0.2s ease; }
.ranking-body { width: 100%; background: #F1FAF7; border-radius: 0 0 5px 5px; min-height: 80px; overflow: hidden; }
.ranking-body ul { margin: 0; padding: 0 20px; }
.ranking-body ul li { list-style: none; height: 40px; display: grid; grid-template-columns: var(--ranking-title-width) minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.ranking-body li .ranking { grid-column: 2; min-width: 0; }
.donation-ranking-accordion .ranking { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; }
.ranking-body ul li .ranking .medal { min-width: 20px; height: 20px; }
.ranking-body ul li .ranking.ranking.ranking-first .medal { background: url(../../images/user/gold.png) 50% 50% no-repeat; background-size: contain; }
.ranking-body ul li .ranking.ranking-second .medal { background: url(../../images/user/silver.png) 50% 50% no-repeat; background-size: contain; }
.ranking-body ul li .ranking.ranking-third .medal { background: url(../../images/user/bronze.png) 50% 50% no-repeat; background-size: contain; }
.ranking-body ul li .ranking b { font-size: 1.125rem; color: #23B16C; font-weight: 600; }
.ranking-body ul li .ranking p { font-size: 1.125rem; color: #23B16C; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-body ul li.ranking-first-mobile { display: none; }
/* 접힌 상태 */
.donation-ranking-accordion:not(.active) .ranking-body { display: none; }
.donation-ranking-accordion:not(.active) .ranking-arrow { transform: rotate(180deg); }
.donation-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.donation-summary-card { padding: 12px 27px; border: 1px solid #E0E0E0; border-radius: 10px; background: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-height: 135px; justify-content: center; }
.donation-summary-card .summary-title { display: flex; align-items: center; gap: 6px; }
.donation-summary-card .summary-title .summary-icon { width: 18px; height: 18px; }
.donation-summary-card .summary-title .summary-icon.coin { background: url(../../images/user/money-icon.svg) 50% 50% no-repeat; background-size: contain; }
.donation-summary-card .summary-title .summary-icon.globe { background: url(../../images/user/earth-icon.svg) 50% 50% no-repeat; background-size: contain; }
.donation-summary-card .summary-title span { font-size: 1.125rem; color: #333; letter-spacing: -0.75px; font-weight: 600; }
.donation-summary-card .summary-text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.donation-summary-card .summary-text .summary-value { font-size: 2rem; font-weight: 700; display: flex; flex-direction: row; align-items: baseline; gap: 5px; }
.donation-summary-card .summary-text .summary-value span { font-weight: 600; font-size: 24px; }
.donation-summary-card .summary-text .summary-desc { font-size: 1rem; letter-spacing: -0.75px; font-weight: 500; color: #666; }
/* 정기구독현황 */
.subscription-status-head { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid #333; }
.subscription-status-head .title { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; }
.subscription-status-head .title strong { font-size: 20px; letter-spacing: -0.75px; color: #333; font-weight: 700; }
.subscription-status-head .title span { font-size: 1rem; color: #bbb; letter-spacing: -0.75px; }
.subscription-status-head .manage-link { display: flex; flex-direction: row; align-items: center; gap: 15px; font-size: 1rem; font-weight: 600; color: #333; letter-spacing: -0.75px; }
.subscription-status-head .manage-link .arrow { width: 19px; height: 19px; background: url(../../images/user/right-arrow.svg) 50% 50% no-repeat; background-size: contain; }
.subscription-status-list { width: 100; display: flex; flex-direction: column; gap: 15px; }
.subscription-status-list .subscription-status-item { display: flex; padding: 20px; border-radius: 10px; border: 1px solid #EEEEEE; flex-direction: column; gap: 15px; }
.subscription-status-list .subscription-status-item .delivery-date { font-size: 1rem; letter-spacing: -0.75px; font-weight: 600; }
.subscription-status-list .subscription-status-item .divider { max-width: 690px; width: 100%; height: 1px; margin: 0 auto; background: #EEEEEE; display: block; }
.subscription-status-list .subscription-status-item .subscription-product { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; }
.subscription-status-list .subscription-status-item .subscription-product .thumb { max-width: 56px; width: 100%; height: 56px; border-radius: 5px; overflow: hidden; }
.subscription-status-list .subscription-status-item .subscription-product .thumb img { width: 100%; height: 100%; object-fit: cover; }
.subscription-status-list .subscription-status-item .subscription-product .info { flex: 1; }
.subscription-status-list .subscription-status-item .subscription-product .info strong { font-size: 0.875rem; letter-spacing: -0.75px; font-weight: 400; color: #333; line-height: 1.4; display: -webkit-box; -line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; }
.subscription-status-list .subscription-status-item .subscription-price { width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 5px; }
.subscription-status-list .subscription-status-item .subscription-price .price-box { width: 100%; height: 35px; display: flex; flex-direction: row; align-items: center; justify-content: center; background-color: #F8F8F8; border-radius: 5px; gap: 5px; }
.subscription-status-list .subscription-status-item .subscription-price .price-box span { font-size: 0.875rem; letter-spacing: -0.75px; color: #666; line-height: 1; font-weight: 400; }
.subscription-status-list .subscription-status-item .subscription-price .price-box b { font-size: 0.875rem; letter-spacing: -0.75px; color: #23B16C; line-height: 1; font-weight: 600; }
.donation-total-banner { width: 100%; height: 190px; border-radius: 10px; overflow: hidden; position: relative; }
.donation-total-bg { width: 100%; height: 100%; }
.donation-total-bg .web-bg { width: 100%; height: 100%; object-fit: cover; }
.donation-total-bg .mobile-bg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: none; }
.donation-total-text { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 30px; }
.donation-total-text .total-text-box { width: 100%; max-width: 415px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; border-radius: 10px; background-color: #1A3328; gap: 10px; }
.donation-total-text .total-text-box .tit { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; }
.donation-total-text .total-text-box .tit p { color: #fff; font-size: 1.25rem; letter-spacing: -0.75px; line-height: 1.2; font-weight: 700; }
.donation-total-text .total-text-box .tit .gift-icon { width: 24px; height: 24px; background: url(../../images/user/gift-icon.png) 50% 50% no-repeat; background-size: cover; }
.donation-total-text .total-text-box strong { font-size: 2.375rem; font-weight: 800; line-height: 1.4; color: #39FF92; }
.subscription-empty { font-size: 0.875rem; letter-spacing: -0.75px; color: #bbb; font-weight: 400; text-align: center; padding: 30px 0; }
/* 오른쪽 배너 이미지 */
.myinfo-new .right-banner { display: flex; flex-direction: column; gap: 16px; transition: all 0.3s; }
.myinfo-new .right-banner .right-banner-item { width: 100%; height: fit-content; margin: 0; padding: 0; font-size: 0; }
.myinfo-new .right-banner .right-banner-item img { width: 100%; object-fit: cover; }
@media only screen and (max-width: 1280px) {
.myinfo-new .right-banner { display: none; }
.myinfo-new .myinfo-layout { grid-template-columns: 220px minmax(0, 1fr) 0px; }
}
@media only screen and (max-width: 1024px) {
.myinfo-new .right-banner { display: none; }
.myinfo-new .myinfo-layout { grid-template-columns: 220px minmax(0, 1fr); }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking-title { font-size: 0.875rem; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking-control .ranking-toggle-text { font-size: 0.875rem; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking b { font-size: 0.875rem; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking p { font-size: 0.875rem; }
.ranking-body ul li .ranking b { font-size: 0.875rem; }
.ranking-body ul li .ranking p { font-size: 0.875rem; }
.donation-ranking-accordion { --ranking-title-width: 105px; --ranking-list-width: 150px; }
.donation-summary-card .summary-title span { font-size: 1rem; }
.summary-value { font-size: 2.4rem; }
.donation-summary-card .summary-text .summary-desc { font-size: 0.875rem; }
}
@media only screen and (max-width: 768px) {
.mobile-header.mypage-header { background: #fff; border-bottom: 1px solid #f1f1f1; }
.mobile-header.mypage-header .header-inner { background: #fff; }
.mobile-header.mypage-header .top-bar { height: 53px; display: flex; align-items: center; justify-content: flex-start; }
.mobile-header.mypage-header .left-wrap, .mobile-header.mypage-header .right-wrap { display: none; }
.mobile-header.mypage-header .mobile-page-title { margin: 0; font-size: 1.125rem; font-weight: 700; color: #222; line-height: 1; letter-spacing: -0.75px; }
.mobile-header.mypage-header .banner, .mobile-header.mypage-header .menu-wrapper { display: none; }
.myinfo-new .mypage-content .mypage-card .user-top .my-rank .heart-icon { width: 14px; height: 14px; }
.myinfo-new .mypage-content .mypage-card .user-top .my-rank span { font-size: 0.9rem; }
.myinfo-new .mypage-content .mypage-card .user-top .my-rank .value b { font-size: 0.9rem; }
.myinfo-new .mypage-content .mypage-card .user-top { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.myinfo-new .mypage-content .mypage-card .user-top .my-rank { max-width: none; }
.mypage.new { flex-direction: column-reverse; }
.mypage.new .myinfo-new { padding: 0; justify-content: flex-start; background-color: #fff; }
/* 모바일 기본: 모든 side-navi 숨김 */
.side-navi { display: none; }
.mypage.new .myinfo-new .side-navi { display: flex; border-radius: 0; width: 100%;padding: 20px; }
.mypage.new .myinfo-new .side-navi .side-navi-bar .title { display: none; }
.myinfo .side-navi .navi-list .depth1 { width: 100%; gap: 0; }
.myinfo .side-navi .navi-list .depth1 > .navi-item { width: 100%; height: 45px; border-bottom: 2px solid #333; padding: 0 15px; }
.myinfo .side-navi .navi-list .depth2-list { width: 100%; gap: 0 !important; padding: 0 15px; }
.myinfo .side-navi .navi-list .depth2-list .depth2 { width: 100%; height: 45px; border-bottom: 1px solid #EEEEEE; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; }
.myinfo-new .myinfo-layout { display: flex; flex-direction: column-reverse; align-items: center; width: 100%; }
.mypage.new .myinfo-new .side-navi .side-navi-bar { width: 100%; }
.myinfo-new .mypage-content { width: 100%; padding: 40px 20px; background-color: #f4f4f4; }
.myinfo-new .mypage-content .mypage-card { padding: 16px; }
.donation-summary-card .summary-text .summary-desc { display: none; }
.donation-ranking-accordion { --ranking-title-width: 80px; --ranking-list-width: 80px; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header { padding: 8px; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking { gap: 5px; }
.donation-ranking-accordion .ranking { gap: 5px; }
.ranking-body ul { padding: 8px; }
.donation-summary-grid { width: 100%; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.donation-summary-card { width: 100%; flex-direction: row; align-items: center; gap: 20px; min-height: 50px; justify-content: space-between; padding: 9px 15px; }
.donation-summary-card .summary-title span { font-size: 0.875rem; }
.summary-text .summary-value { font-size: 0.9rem; }
.summary-icon { width: 18px; height: 18px; }
.donation-summary-card .summary-text .summary-value { font-size: 1.1rem; }
.donation-summary-card .summary-text .summary-value span { font-size: 1.1rem; }
.donation-total-banner { height: 220px; }
.donation-total-bg .web-bg { display: none; }
.donation-total-bg .mobile-bg { display: block; }
.donation-total-text { padding: 16px; }
.donation-total-text { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.donation-total-text .total-text-box .tit p { font-size: 1rem; }
.donation-total-text .total-text-box .tit .gift-icon { width: 20px; height: 20px; }
.donation-total-text .total-text-box strong { font-size: 1.5rem; }
.donation-total-text .total-text-box { height: fit-content; }
.mypage.zzim-list .myinfo .contain .main-content{gap: 20px;}
.zzim-content {padding: 0 20px;}
.filter-section{padding: 20px;}
.subscription-manage .tab-navigation {padding: 20px;}
}
@media only screen and (max-width: 450px) {
.mypage .user .column .between { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 0; }
.mypage .user .column .between .name h2 { font-size: 20px; }
.mypage .user .column .between .name p { font-size: 16px; }
.mypage .user .column .between .buttons .round-btn p { text-align: left; font-size: 12px; }
.ranking-body ul li .ranking p { min-width: 80px; overflow: hidden; }
}
@media only screen and (max-width: 425px) {
.mypage.new .myinfo-new { padding: 0; }
.donation-summary-card { flex-direction: column; }
.donation-summary-card .summary-title { width: 100%; justify-content: flex-start; }
.donation-summary-card .summary-text { width: 100%; align-items: flex-end; }
.subscription-status-head .title { gap: 5px; }
.subscription-status-head .title strong { font-size: 1rem; }
.subscription-status-head .title span { font-size: 0.9rem; }
.subscription-status-head .manage-link { gap: 5px; }
.subscription-status-list .subscription-status-item .subscription-price { flex-direction: column; }
.ranking-body ul li.ranking-first-mobile { display: flex; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking { display: none; }
.ranking-body ul li { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
}
@media only screen and (max-width: 375px) {
.myinfo-new .mypage-content .mypage-card .user-top .name p { font-size: 1rem; }
.myinfo-new .mypage-content { padding: 10px; }
.myinfo-new .mypage-content .mypage-card { padding: 16px; gap: 16px; }
.myinfo-new .mypage-content .mypage-card.subscription-status { padding: 16px; }
.myinfo-new .myinfo-layout { max-width: none; padding: 0; }
.mypage.new .myinfo-new .side-navi { width: 100%; padding: 16px; }
.donation-total-text .total-text-box .tit { flex-direction: column-reverse; }
.donation-total-text .total-text-box .tit p { font-size: 0.9rem; text-align: center; word-break: keep-all; }
.donation-total-text .total-text-box .tit .gift-icon { min-width: 16px; height: 16px; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking-title { font-size: 0.9rem; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking-control .ranking-toggle-text { font-size: 0.9rem; }
.myinfo-new .mypage-content .mypage-card .donation-ranking-accordion .ranking-header .ranking-control .ranking-arrow { width: 14px; height: 14px; }
}