@charset "UTF-8";

/* [EmptyStateTokens] 마이페이지 전역 빈 상태(no-data) 공통 변수 — css/rest.css는 thema.php를 통해
   전 페이지 공통 로드되므로 여기서 정의하면 order/refund/use/qa/member 등 분리된 스타일시트에서도
   그대로 상속 참조 가능. 값 하나만 바꾸면 마이페이지 전체 빈 상태 화면에 한 번에 반영됨(승민 지시,
   recentitems.php .ri_empty 기준: 아이콘 41px·문구 14px / point.php 기존 96·48px의 2배로 재확정). */
:root {
    --fp-empty-icon-size: 41px;
    --fp-empty-text-size: 14px;
    --fp-empty-gap: 14px;
    --fp-empty-pad-desktop: 192px;
    --fp-empty-pad-mobile: 96px;
    --fp-empty-bg: #fff;
    --fp-empty-radius: 17px;
}

span.bold{font-weight:500;}

/* 컨텐츠 폭 — 사용: 전 페이지. 레이아웃 기준값이라 변경 시 전 화면 영향 */
.container_wide{width:100%; margin:0 auto;}
.container_fix{width:100%; padding:0 15px; margin:0 auto; max-width:1230px; position:relative;}

/* 이미지 컨테이너 가로 넘침 차단 */
.container_img{overflow-x:hidden;}
@media (min-width:2000px){
	.container_img img{display:block; width:100%;}
}
@media (max-width:1900px){
	.container_img img{display:block; width:100%;}
}

/* 가로 스크롤 차단 */
html{overflow-x:hidden;}
@media (max-width:991px){
	#thema_wrapper{overflow-x:hidden;}
}

/* PC·모바일 노출 전환 유틸 */
.display_pc{display:block;}
.display_mobile{display:none;}
@media (max-width:991px){
	.display_pc{display:none;}
	.display_mobile{display:block;}
}

/* 스크롤바 색상 */
html{scrollbar-3dLight-Color: #fff;  scrollbar-base-color: #fff; scrollbar-Face-Color: #fff; scrollbar-Track-Color: #f0f0f0; 
scrollbar-DarkShadow-Color: #fff; scrollbar-Highlight-Color: #fff;}
::-webkit-scrollbar {background:#fff; width:4px; float:left; position:absolute; left:0; height:5px;  border-radius:4px;}
::-webkit-scrollbar-button:start:decrement {display: block; height: 4px; background:#f0f0f0; background-position:center;}
::-webkit-scrollbar-button:end:increment {display: block; height: 4px; background:#f0f0f0; background-position:center;}
::-webkit-scrollbar-button {background:transparent; color:#fff;}
::-webkit-scrollbar-track {background:#f5f5f5;}
::-webkit-scrollbar-thumb {height:50px; width:6px; border-radius:10px;} 

/* 이미지맵 클릭 외곽선 제거 */
area, map{outline: none !important; text-decoration: none !important; border-radius: 0 !important;}

/* 설정 아이콘 클릭 시 잘림 방지 */
.p10{overflow:hidden;}

/* 여백 유틸 */
.margin_bottom{margin-bottom:60px;}
.margin_top{margin-top:60px;}
.padding_bottom{padding-bottom:60px;}
.padding_top{padding-top:60px;}

/* 강제 줄바꿈 유틸 */
span.w_br{display:block;}
span.m_br{display:none;}

/* 강제 숨김 유틸 */
aside#sidebar-btn{display:none;}

/* 포인트 컬러 일괄 지정 대상 */
.at-menu .pc-menu .nav-top.nav-both .menu-ul .menu-li.on > a span:after, 
.at-menu .pc-menu .nav-top.nav-both .menu-ul .menu-li:hover > a span:after,
.at-menu .m-menu .m-nav ul li.active a:after,
.btn.active.btn-color, .btn.btn-color:hover, .btn.btn-color:focus, .btn.btn-color:active,
.item_detail .item_detail_tab .tabs ul.tabs-top li.on span:after, .btn.btn-login,
.regbtn-wrap #display_pay_button input,
.btn.active.btn-color, .btn.btn-color:hover, .btn.btn-color:focus, .btn.btn-color:active,
.review_modal .review_content .review_img_box .review_slider .slick-dots > li.slick-active{ background:var(--main-btn-point-color);}

.cart-wrap .shop-btn:hover {border: 1px solid var(--main-btn-line-point-color);background-color: var(--main-btn-point-color);color: #fff;}
.simple_reviews .table-row .contents div input:checked + label{border: 0; background-color: #235cf5; color:#fff;}
.btn.btn-color{border: 1px solid var(--main-btn-line-point-color); background: var(--main-btn-point-color);}
.faq_box .div-panel .faq_a_content .faq_icon span{background:#235cf5; border:1px solid #235cf5;}
html{scrollbar-arrow-color: var(--main-scroll-color); scrollbar-Shadow-Color: var(--main-scroll-color);}
::-webkit-scrollbar-thumb{background:var(--main-scroll-color);}


.marker_box {
    width: 32px;
    position: relative;
    text-align: center;
}
.marker_box .marker_msg {
    display: none;
    width: 225px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #d8d8d8;
    z-index: 11;
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.3s;
}
.marker_box .marker_msg .msg_box {
    font-size: 16px;
    color: #0c0c0c;
    font-weight: 400;
    line-height: 25px;
    text-align: left;
}
.marker_box .marker_msg::before {
    content: "";
    display: block;
    width: 36px;
    height: 36px;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    z-index: 10;
}
.marker_box .marker_msg::after {
    display: block;
    content: "";
    width: 13px;
    height: 13px;
    border: 1px solid #d8d8d8;
    background: #fff;
    border-left: 0;
    border-bottom: 0;
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%) rotate(-45deg);
}
.marker_box .address {
    display: block;
    width: 100%;
    height: 35px;
    line-height: 33px;
    border: 1px solid var(--main-btn-line-point-color);
    border-radius: 4px;
    text-align: center;
    margin-top: 20px;
}
.marker_box .address a {
    display: block;
    font-size: 12px;
    color: var(--main-btn-font-point-color);
    font-weight: 500;
}
.radio_check input + label .text {
    font-size: 16px;
    color: var(--main-box-font-color2);
    font-weight: 400;
}
@media (max-width: 991px) {
    .marker_box .marker_msg {
        top: 40px;
        z-index: 20;
        left: -50px;
        width: 225px;
        display: block;
        transform: translateX(-50%) scale(0);
        transform-origin: 73% top;
    }
    .marker_box .marker_msg.animation {
        animation-name: bubble;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }
    .marker_box .marker_msg.no_active {
        animation-name: bubbleEnd;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }
    .marker_box .marker_msg .msg_box {
        font-size: 15px;
    }
    .marker_box .marker_msg::after {
        left: 76%;
    }
    .marker_box .address {
        height: 30px;
        line-height: 28px;
    }
}
@media (max-width: 480px) {
    .marker_box {
        width: 17px;
    }
    .marker_box .marker_msg {
        width: 175.5px;
        padding: 8px 14px;
        top: 34px;
        left: -30px;
    }
    .marker_box .marker_msg .msg_box {
        font-size: 13px;
        line-height: 18.5px;
    }
    .marker_box .marker_msg::after {
        left: 72%;
    }
    .radio_check input + label .text {
        font-size: 13px;
        color: var(--main-box-font-color4);
    }
}
@keyframes bubble {
    0% {
        transform: translateX(-50%) scale(0);
    }

    100% {
        transform: translateX(-50%) scale(1);
    }
}

@keyframes bubbleEnd {
    0% {
        transform: translateX(-50%) scale(1);
    }

    100% {
        transform: translateX(-50%) scale(0);
    }
}


/* 마이페이지 변형 */
.at-body.mypage_bg .pagination {
    margin: 60px 0 80px;
}

/* 로그인 — 사용: 로그인 (skin > member > basic) */

.custom-login {
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 0;
}

.login-page-title {
    font-weight: 600;
    margin: 60px 0 15px;
    font-size: 33px;
    color: #151515;
    line-height: 1.1;
}

.member-login {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 0;
}

/* 우측 퀵윙 — 사용: 전 페이지 (skin > addon > sense-wing) */
.wing-right #stv{position:relative; width:80px; text-align:center; background:#fff; float:none;  border:1px solid #e1e1e1;}
.wing-right #stv #stv_list{width:80px; border:0; background-color:transparent; margin:0 auto; position:relative;}
.wing-right #stv #stv_list .wing_title{color:#222; font-size:13px; margin:13px auto; text-align:center; font-weight:500;}
.wing-right #stv #stv_list ul{width:65px; margin:0 auto;}
.wing-right .stv_item{padding:0;}
.wing-right .stv_item .prd_img{margin-bottom:10px; background-color:#fff; border:1px solid #e1e1e1;}
.wing-right .stv_item .prd_name, .wing-right .stv_item .prd_cost{display:none;}
.wing-right .stv_item img{display:block; width:100%; margin:0;}
.wing-right #stv_btn {margin:13px 0;}
.wing-right #stv_btn button{width:50%; height:13px; background:transparent; color:#333333; padding:0; outline:none; box-shadow:none; position:relative;}
.wing-right #stv_btn button:first-child:after{content:""; width:1px; height:14px; position:absolute; top:50%; transform:translateY(-50%); background-color:#d4d4d4; right:0;}
.wing-right #stv_btn button img{height:100%;display: inline-block;}
.wing-right .cart_icon{width:100%; border-top:1px solid #e1e1e1; display:block; text-align:center; padding:15.5px 0;}
.wing-right .cart_icon span{font-size:13px; color:#222222; font-weight:500; display:block; margin-top:10px;}
.wing-right .topbtn{display:block; margin-top:5px; height:20px; margin-top:10px ;color:#222;
font-size:16px; text-align:center; font-weight:600;}

@media (max-width:1550px){
	.wing-right{display:none !important;}
}

@media (max-width:991px) {
	::-webkit-scrollbar {width:6px}
	span.m_br{display:block;}

}

.msg_sound_only, .sound_only {
    display: inline-block !important;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0;
    line-height: 0;
    border: 0 !important;
    overflow: hidden !important;
}


/* 팝업레이어 — 사용: 전 페이지 */
#hd_pop {z-index:99999;position:relative;margin:0 auto;width:970px;height:0;max-width:100%;}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops_con {}
.hd_pops_con img {max-width:100%;}
.hd_pops_footer {font-size:12px; padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}

/* 새창(팝업) 공통 */
.new_win {}
.new_win .tbl_wrap {margin:0 20px}
.new_win #win_title {margin:0 0 20px;padding:20px;border-top:3px solid #333;border-bottom:1px solid #dde4e9;background:#fff;font-size:1.2em}
.new_win #win_title .sv {font-size:0.75em;line-height:1.2em}
.new_win .win_ul {margin:-20px 0 20px 0;padding:0 20px;border-bottom:1px solid #455255;background:#484848;list-style:none;zoom:1}
.new_win .win_ul:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .win_ul li {float:left;margin-left:-1px}
.new_win .win_ul a {display:block;padding:10px 10px 8px;border-right:1px solid #455255;border-left:1px solid #455255;color:#fff;font-family:dotum;font-weight:bold;text-decoration:none}
.new_win .win_desc {padding:20px}

.new_win .win_btn {clear:both;padding:20px;text-align:center}
.new_win .win_btn button {display:inline-block;padding:0 10px;height:30px;border:0;background:#4b545e;color:#fff;line-height:2em;cursor:pointer}
.new_win .win_btn input {padding:0 10px;height:30px;line-height:2em}
.new_win .win_btn a {display:inline-block;padding:0 10px;height:30px;background:#4b545e;color:#fff;vertical-align:middle;line-height:2.4em}
.new_win .win_btn a:focus, .new_win .win_btn a:hover {text-decoration:none}

/* 회원·비회원 탭 */

.custom-login .nav-tabs {
    display: flex;
    margin-bottom: 14px;
    overflow: hidden;
    border-radius: var(--fp-r, 13px);
    border-bottom: none;
    /* 이 카드가 상위 헤더 레이아웃 누적 높이 때문에 서브픽셀 세로 위치(예: top
       360.59375px)를 물려받음 — translateZ(0)는 별도 컴포지팅 레이어 분리 자체는
       무해해 유지하지만, 실측 결과 이 subpixel 위치를 정수로 스냅(translateY 보정)
       해도 안티앨리어싱 폭이 줄지 않고 오히려 늘어남을 확인(아래 참고) — 이 값 자체를
       "흐림의 원인"으로 보고 건드리는 시도는 이후 하지 않음 */
    transform: translateZ(0);
}

.custom-login .nav-tabs .nav-item {
    display: block;
    border: 1px solid #d6d6d6;
    border-radius: var(--fp-r, 13px) 0 0 var(--fp-r, 13px);
    overflow: hidden;
    margin-bottom: 0px;
    width: 50%;
    text-align: center;
    overflow: hidden;
}

/* 기존엔 margin-left:-1px로 두 탭의 테두리를 겹친 뒤 z-index로 active 쪽을 위에
   그렸는데, 같은 1px 자리에서 두 border가 경쟁하며 흐림이 생겼음 — 겹침 자체를
   없애고 가운데 경계선은 항상 활성 탭 쪽에서만 그리게 해서(비활성 탭은 그 안쪽
   테두리를 아예 갖지 않음) 어느 탭이 active든 항상 동일하게 1px 단일 라인으로
   보이게 함(이 겹침 제거 자체는 유효 — 흐림 재발 원인 아님, 이후에도 유지).
   [2026-08-14 정정] border-width를 1.5px/2px로 굵게 키운 두 차례 시도는 전부
   되돌림 — 승민 의도는 "얇은 1px 유지 + 흐림만 제거"였음. 대안으로 (a) .nav-tabs
   서브픽셀 top을 정수로 스냅(translateY 보정) (b) box-shadow inset을 ::after
   의사요소로 자식 흰배경 위에 그리기 (c) border 대신 outline(-offset:-1px) (d)
   .nav-tabs 자체의 이중 클리핑(overflow:hidden+border-radius, .nav-item 자체
   클립과 중첩) 제거 — 4가지를 Playwright 픽셀 스캔라인(같은 코너에서 배경색도
   테두리색도 아닌 픽셀의 연속 개수)으로 전부 실측 비교했으나, 어느 것도 원본
   1px 단일 border보다 안티앨리어싱 폭을 줄이지 못했다(오히려 (a)(b)(d)는 늘었고
   (c)는 완전히 동일). 즉 현재 수준(입력폼과 동일한 13px radius 곡선의 정상
   레스터라이즈)이 1px 두께를 유지하는 한 CSS만으로 도달 가능한 사실상의 하한선. */
.custom-login .nav-tabs .nav-item:first-child {
    border-right: none;
}

.custom-login .nav-tabs .nav-item + .nav-item {
    border-left: none;
    border-radius: 0 var(--fp-r, 13px) var(--fp-r, 13px) 0;
}

.custom-login .nav-tabs .nav-item.active {
    border-color: var(--main-btn-line-point-color);
}

.custom-login .nav-tabs .nav-item:first-child.active {
    border-right: 1px solid var(--main-btn-line-point-color);
}

.custom-login .nav-tabs .nav-item + .nav-item.active {
    border-left: 1px solid var(--main-btn-line-point-color);
}

.custom-login .nav-item .nav-link {
    height: 58px;
    line-height: 56px;
    display: block;
    position: relative;
    font-size: 16px;
    font-weight: 500;
    color: var(--main-btn-font-color4);
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: #fff;
    cursor: pointer;
}

.custom-login .nav-item.active .nav-link {
    color: var(--main-btn-font-point-color);
}

/* 입력 필드 */
.custom-login .input_div {
    margin-bottom: 12px;
}

.custom-login .input_div input {
    display: block;
    width: 100%;
    height: 58px;
    line-height: 56px;
    padding: 0 22px;
    font-size: 15px;
    font-weight: 400;
    border-radius: var(--fp-r, 13px) !important;
    border: 1px solid #d6d6d6;
    background-color: #fff;
    color: #0c0c0c;
    outline: none;
    box-shadow: none;
    transition: border-color 150ms ease;
}

.custom-login .input_div input:hover {
    border-color: var(--main-box-point-color);
}

.custom-login .input_div input:focus {
    outline: none;
    border-color: var(--main-box-point-color);
}

.custom-login .input_div input:first-child {
    margin-bottom: 14px;
}

.custom-login .login-opt {
    display: flex;
    align-items: center;
    gap: 23px;
    margin-bottom: 35px;
}

.custom-login .login-opt input {
    display: none;
}

.custom-login .login-opt input + label {
    position: relative;
    padding-left: 23px;
    font-size: 13px;
    font-weight: 400;
    color: var(--main-box-font-color4);
    cursor: pointer;
}

/* 로그인 유지 체크박스 */
.custom-login .login-opt input + label > .login_chk {
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.custom-login .login-opt input + label .login_chk_box {
    fill: #fff;
    stroke: #ebebeb;
}

.custom-login .login-opt input + label .login_chk_mark {
    fill: none;
    stroke: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.custom-login .login-opt input:checked + label .login_chk_box {
    fill: var(--main-btn-point-color);
    stroke: var(--main-btn-point-color);
}

.custom-login .login-opt input:checked + label .login_chk_mark {
    stroke: #fff;
}

/* 로그인 버튼 */
.custom-login .login-btn {
    height: 58px;
    line-height: 56px;
    margin-bottom: 20px;
    padding-bottom: 0;
}

.custom-login .login-btn button {
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    background: var(--main-btn-point-color);
    border: none;
    border-radius: var(--fp-r, 13px);
}

.custom-login .login-btn button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.custom-login .login-btn button:hover::after {
    opacity: 0.1;
}

/* 회원가입·아이디찾기 링크 */
.is-pc .at-body {
    min-height: auto;
}
.custom-login .lost-box {
    display: flex;
    justify-content: center;
}

/* hover 배경은 텍스트에 딱 맞는 작은 padding(4px 6px)만 차지하게 하고, 탭 사이
   구분선 간격(원래 33px+33px)은 hover 박스 밖의 margin으로 분리 — padding에
   간격을 다 넣으면 hover 배경이 구분선 쪽 빈 공간까지 과도하게 덮임 */
.custom-login .lost-box a {
    display: block;
    position: relative;
    margin: -4px 60px -4px -6px;
    padding: 4px 6px;
    font-size: 16px;
    font-weight: 400;
    color: var(--main-btn-font-color2);
    border-radius: 8px;
    transition: background-color 150ms ease;
}

.custom-login .lost-box a:hover {
    background-color: #f0f0f0;
}

.custom-login .lost-box a:last-child {
    margin: -4px -6px;
    padding: 4px 6px;
}

.custom-login .lost-box a::after {
    display: block;
    content: "";
    width: 1px;
    height: 14px;
    position: absolute;
    top: 2px;
    right: -27px;
    background: #ddd;
}

.custom-login .lost-box a:last-child::after {
    display: none;
}

/* 구분선 '또는' */
.custom-login .floating_or {
    position: relative;
    z-index: 1;
    margin: 50px 0 40px;
    font-size: 17px;
    font-weight: 300;
    color: var(--main-box-font-color4);
    text-align: center;
}

.custom-login .floating_or::before,
.custom-login .floating_or::after {
    content: "";
    width: calc(100% - 276px);
    height: 1px;
    position: absolute;
    top: 8px;
    z-index: -1;
    background: #e3e3e3;
}

.custom-login .floating_or::before {
    left: 0;
}

.custom-login .floating_or::after {
    right: 0;
}

/* 빠른 회원가입 플로팅 */
.custom-login .floating_wing {
    width: 230px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 20px;
    margin: 0 auto;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 500;
    color: #0c0c0c;
    background: #f2f2f2;
    border-radius: 22px;
    animation: ani 0.6s ease-in-out infinite alternate;
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.custom-login .floating_wing::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: -17px;
    border-style: solid;
    border-width: 9px;
    border-left-width: 7px;
    border-right-width: 7px;
    border-color: #f2f2f2 transparent transparent transparent;
}

@keyframes ani {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, 4px, 0);
    }
}

/* 모바일 서브 상단 카테고리 */
.sub_menu_box .m_sub_menu {
    position: relative;
    margin: 0 -15px;
}

/* SNS 로그인 버튼 */

.custom-login #sns_login {
    margin: 0;
    padding: 0;
    border: 0;
}

.custom-login #sns_login a {
    width: 100%;
    height: 60px;
    line-height: 58px;
    display: block;
    position: relative;
    margin-bottom: 13px;
    font-size: 16px;
    font-weight: 500;
    border: none;
    border-radius: var(--fp-r, 13px);
    text-align: center;
    overflow: hidden;
    transition: filter 150ms ease;
}

.custom-login #sns_login a:hover {
    filter: brightness(0.96);
}

.custom-login #sns_login a:focus-visible {
    outline: 2px solid var(--fp-primary, #1a6dff);
    outline-offset: 2px;
}

.custom-login #sns_login a.kakao {
    color: #3a2020;
    background: #ffe800;
}

.custom-login #sns_login a.naver {
    background: #21bc6f;
}

.custom-login #sns_login a.apple {
    background: #000;
}

.custom-login #sns_login a.google {
    background: #fff;
    color: #222;
    border: 1px solid var(--fp-hairline, #dcdcdc);
}

.custom-login #sns_login a.facebook {
    background: #445d99;
}

.custom-login #sns_login a.naver,
.custom-login #sns_login a.apple,
.custom-login #sns_login a.facebook,
.custom-login #sns_login a.twitter {
    color: #fff;
}

.custom-login #sns_login a img {
    position: absolute;
    left: 19px;
}

.custom-login #sns_login a.kakao img {
    top: 19px;
}

.custom-login #sns_login a.naver img {
    top: 20px;
}

.custom-login #sns_login a.google img {
    top: 18px;
    left: 18px;
}

.custom-login #sns_login a.facebook img {
    top: 18px;
}

.custom-login #sns_login a.apple img {
    top: 17px;
}

.custom-login .social-login-sheet {
    max-width: 500px;
    display: flex;
    flex-flow: column;
    margin: 0 auto;
}

.custom-login .email_login_chi {
    margin: 30px 0 50px;
    text-align: center;
}

/* 로그인페이지 .lost-box(회원가입/찾기) 링크와 같은 hover 패턴 재사용 — hover 배경이
   텍스트에 딱 맞는 padding(4px 6px)만 차지하고, 구분선을 위한 여백은 padding이 아니라
   margin(박스 바깥)으로 분리한다. 이전엔 두번째 링크에 padding-left:24px를 줘서 hover
   배경이 텍스트 시작 지점보다 24px 왼쪽까지 넓게 잡혀 "텍스트에 딱 맞지 않는" 문제가 있었다. */
.custom-login .email_login_chi a {
    display: inline-block;
    font-size: 16px;
    color: #444;
    position: relative;
    padding: 4px 6px;
    margin: -4px 19px -4px -6px;
    border-radius: 8px;
    transition: background-color 150ms ease;
}

.custom-login .email_login_chi a:hover {
    background-color: #f0f0f0;
}

/* 6ce4d54f에서 hover 배경을 텍스트에 딱 맞게(padding 4px 6px) 줄이면서 이 링크의
   바깥 왼쪽 여백(margin-left)도 같이 -6px로 줄어, 두 링크 사이 시각적 간격이 원래
   (텍스트 기준 약 38px)보다 8px 좁아져 있었음(승민 재지적) — hover padding은 그대로
   유지하고 margin-left만 -6px에서 2px로 복원해 원래 간격을 되돌린다. */
.custom-login .email_login_chi a:last-child {
    margin: -4px -6px -4px 2px;
}

.custom-login .email_login_chi a:not(:last-child)::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -12px;
    transform: translateY(-50%);
    width: 1px;
    height: 13px;
    background: #ddd;
}

@media (max-width: 991px) {
    .member-login {
        max-width: 100%;
    }

    .custom-login .nav-tabs {
        margin-bottom: 9px;
    }

    .custom-login .nav-item .nav-link {
        height: 48px;
        line-height: 47px;
    }

    .custom-login .input_div {
        margin-bottom: 8px;
    }

    .custom-login .input_div input {
        height: 46px;
        line-height: 44px;
        padding: 0 15px;
        font-size: 15px;
    }

    .custom-login .input_div input:first-child {
        margin-bottom: 10px;
    }

    .custom-login .login-opt {
        gap: 15px;
        margin-bottom: 21px;
    }

    .custom-login .login-opt input + label {
        padding-left: 20px;
        font-size: 13px;
    }

    .custom-login .login-btn {
        margin-bottom: 15px;
        height: 45px;
        line-height: 45px;
    }

    .custom-login .login-btn button {
        font-size: 16px;
    }

    .custom-login .lost-box a {
        margin-right: 28px;
        font-size: 15px;
    }

    .custom-login .lost-box a::after {
        right: -11px;
    }

    .custom-login .floating_or {
        margin: 38px 0;
        font-size: 14px;
    }

    .custom-login .floating_or::before,
    .custom-login .floating_or::after {
        width: 45%;
        top: 6px;
    }

    .custom-login .floating_wing {
        width: 195px;
        height: 38px;
        padding: 0;
        font-size: 14px;
    }

    .custom-login #sns_login a {
        height: 49px;
        line-height: 49px;
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 2026-08 (주)파이브센스_FIVESENSES.Corp. [SnsBtnMobileAlign] 아이콘을 provider별 top/left
       매직넘버로 수동 배치하던 방식(브레이크포인트마다 재조정 필요, 높이 바뀔 때마다 어긋남)을
       걷어내고 flex 세로 중앙정렬로 전환 — 아이콘 높이가 provider마다 달라도 항상 정확히
       텍스트와 세로 중앙이 맞음. 데스크톱(위 기본 규칙, position:absolute)은 그대로 유지. */
    .custom-login #sns_login a img {
        position: static;
        margin-right: 8px;
    }

    .custom-login #sns_login a.kakao img {
        height: 18px;
    }

    .custom-login #sns_login a.naver img {
        height: 13px;
    }

    .custom-login #sns_login a.apple img {
        height: 19px;
    }

    .custom-login #sns_login a.google img {
        height: 19px;
    }

    .custom-login #sns_login a.twitter img {
        height: 15px;
    }

    .custom-login #sns_login a.facebook img {
        height: 18px;
    }

    .custom-login .social-login-sheet {
        margin-top: 0;
    }

    .custom-login .email_login_chi a {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .custom-login .login-opt input + label::after {
        width: 11px;
        height: 11px;
        background-size: 11px;
    }

    .custom-login .login-opt input:checked + label::after {
        background-size: 11px;
    }

    .custom-login .floating_or::before,
    .custom-login .floating_or::after {
        width: 41%;
    }

    .custom-login #sns_login a.kakao img {
        height: 15px;
    }

    .custom-login #sns_login a.naver img {
        height: 13px;
        top: 15px;
    }
    .custom-login #sns_login a.apple img {
        height: 17px;
        top: 12px;
    }

    .custom-login #sns_login a.google img {
        height: 17px;
        left: 22px;
    }

    .custom-login #sns_login a.twitter img {
        height: 13px;
    }
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
로그인 페이지
html > skin > member > basic > login.skin.php=
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

/* 로그인 인트로 중 퀵윙 숨김 */
.at-html.login-intro .wing-right {
    height: 100vh;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}
.at-html.login-intro #thema_wrapper {
    background-color: #f7f7f7;
}
.at-html.login-intro .point_color {
    color: var(--main-btn-point-color);
}
.at-html.login-intro .sub_text {
    display: none;
}
.at-html.login-intro .at-body > .container_fix {
    max-width: 1360px;
    height: 100%;
}
.at-html.login-intro .at-body .at-content {
    padding: 0 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.at-html.login-intro .login_intro_img {
    border-radius: 20px 0 0 20px;
    overflow: hidden;
    min-width: 430px;
}
.at-html.login-intro .login_intro_img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.at-html.login-intro .custom-login {
    max-width: inherit;
    width: 100%;
}
.at-html.login-intro .login-body {
    display: flex;
    width: 100%;
}
.at-html.login-intro .member-login,
.at-html.login-intro .non-members-login {
    max-width: 715px;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.03);
    padding: 44px 9.526% 47px;
    border-radius: 0 20px 20px 0;
}
.at-html.login-intro .member-login.id_login {
    padding-top: 144px;
}
.at-html.login-intro .member-login.id_login {
    text-align: center;
}

.at-html.login-intro .member-login h4 {
    color: #1b1b1b;
    font-size: 18px;
    font-weight: 500;
    line-height: 1em;
    margin-bottom: 30px;
}
.at-html.login-intro .member-login h4.intro_closed_mall {
    padding-top: 19px;
}
.at-html.login-intro .custom-login .member-login .nav-tabs li a {
    height: 50px;
    line-height: 48px;
}
.at-html.login-intro .custom-login .member-login .nav-tabs {
    margin-bottom: 10px;
    display: none;
}
.at-html.login-intro .custom-login .member-login .tab-content .form-group input {
    height: 50px;
    line-height: 48px;
    margin-bottom: 10px;
    padding: 0 20px;
}
.at-html.login-intro .custom-login .member-login .tab-content .login-opt {
    padding-top: 10px;
    margin-bottom: 25px;
}
.at-html.login-intro .custom-login .member-login .login-btn {
    height: 50px;
    line-height: 48px;
    margin-bottom: 20px;
}
.at-html.login-intro .custom-login .member-login .login-btn button {
    font-size: 16px;
    font-weight: 500;
}
.at-html.login-intro .custom-login .member-login .tab-content .or {
    margin: 35px 0 20px;
}
.at-html.login-intro .custom-login .member-login .tab-content .lost-box a {
    color: #999999;
    transition: all 0.3s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
    .at-html.login-intro .custom-login .member-login .tab-content .lost-box a:hover {
        color: #333;
    }
}

.at-html.login-intro .custom-login .member-login .floating,
.at-html.login-intro .custom-login .social-login-sheet .floating {
    width: 200px;
    height: 35px;
    font-size: 14px;
    color: #666666;
    font-weight: 400;
}
.at-html.login-intro .custom-login #sns_login a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    line-height: 1;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 400;
}
.at-html.login-intro .custom-login #sns_login a.kakao img {
    top: 13px;
}
.at-html.login-intro .custom-login #sns_login a.naver img {
    top: 13px;
}
.at-html.login-intro .custom-login #sns_login a.google img {
    top: 11px;
}
.at-html.login-intro .custom-login #sns_login a.facebook img {
    top: 11px;
    left: 23px;
}
.at-html.login-intro .intro_adult_text {
    padding-top: 10px;
}
.at-html.login-intro .intro_adult_text p {
    font-size: 14px;
    color: #666666;
    text-align: center;
    line-height: 1.6em;
}
.at-html.login-intro .intro_adult_text a {
    font-weight: 500;
    color: #010101;
    text-decoration: underline;
    text-underline-offset: 5px;
}
@media (max-width: 1400px) {
    .at-html.login-intro .member-login,
    .at-html.login-intro .non-members-login {
        padding: 44px 2.526% 40px;
    }
    .at-html.login-intro .custom-login .member-login .tab-content .or::before {
        height: 1em;
        background-color: #fff;
        left: 50%;
        transform: translateX(-50%);
        width: 10%;
        top: 0;
    }
    .at-html.login-intro .custom-login .member-login .tab-content .or::after {
        width: 100%;
        z-index: -2;
    }
}
@media (max-width: 1200px) {
    .at-html.login-intro .login_intro_img {
        max-width: 715px;
        margin: 0 auto;
    }
}
@media (max-width: 991px) {
    .at-html.login-intro #thema_wrapper {
        background-color: #fff;
    }
    .at-html.login-intro .at-body > .container_fix {
        height: auto;
    }
    .at-html.login-intro .at-body .at-content {
        padding-top: 30px;
    }
    .at-html.login-intro .login-body {
        display: block;
    }
    .at-html.login-intro .login_intro_img {
        text-align: center;
        color: #999999;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.6em;
        padding: 0 9.526% 0;
        min-width: auto;
    }
    .at-html.login-intro .login_intro_img > .intro_adult {
        border-bottom: 1px solid #e9e9e9;
        padding-bottom: 25px;
    }
    .at-html.login-intro .login_intro_img .intro_adult img {
        width: 56px;
        margin: 0 auto 12px;
        display: inline-block;
    }
    .at-html.login-intro .login_intro_img .intro_closed_mall img {
        width: 168px;
        margin: 0 auto;
        display: inline-block;
    }
    .at-html.login-intro .member-login,
    .at-html.login-intro .non-members-login {
        box-shadow: none;
        padding-top: 35px;
        padding: 34px 9.526% 40px;
    }
    .at-html.login-intro .member-login.id_login {
        padding-top: 44px;
    }
    .at-html.login-intro .member-login h4 {
        text-align: center;
        font-size: 15px;
        margin-bottom: 20px;
    }
    .at-html.login-intro .custom-login .member-login .nav-tabs li a {
        height: 40px;
        line-height: 38px;
    }
    .at-html.login-intro .custom-login .member-login .nav-tabs li:nth-child(1) a {
        border-radius: 4px 0 0 4px;
    }
    .at-html.login-intro .custom-login .member-login .nav-tabs li:nth-child(2) a {
        border-radius: 0 4px 4px 0;
    }
    .at-html.login-intro .custom-login .member-login .tab-content .form-group input {
        height: 45px;
        line-height: 40px;
        border-radius: 4px !important;
        padding: 0 15px;
        border: 1px solid #e3e3e3;
    }
    .at-html.login-intro .custom-login .member-login .tab-content .login-opt {
        justify-content: center;
        padding-top: 5px;
        margin-bottom: 20px;
    }
    .at-html.login-intro .custom-login .member-login .login-btn {
        height: 40px;
        line-height: 40px;
        margin-bottom: 18px;
    }
    .at-html.login-intro .custom-login #sns_login a.kakao img {
        top: 15px;
    }
    .at-html.login-intro .custom-login #sns_login a.naver img {
        top: 16px;
    }
    .at-html.login-intro .custom-login #sns_login a.google img {
        top: 12px;
    }
    .at-html.login-intro .custom-login #sns_login a.facebook img {
        top: 13px;
        left: 26px;
    }
}
@media (max-width: 480px) {
    .at-html.login-intro .custom-login .member-login .tab-content .login-opt input + label::after {
        width: 13px;
        height: 13px;
        background-size: 13px;
    }
    .at-html.login-intro .custom-login .member-login .tab-content .login-opt input + label {
        font-size: 12px;
    }
    .at-html.login-intro .custom-login .member-login .tab-content .or {
        margin: 30px 0 20px;
        font-size: 13px;
    }
    .at-html.login-intro .custom-login .member-login .tab-content .or::before {
        width: 20%;
    }
    .at-html.login-intro .custom-login .member-login .floating,
    .at-html.login-intro .custom-login .social-login-sheet .floating {
        font-size: 11px;
        width: 140px;
        height: 24px;
        padding: 2px 15px 0;
    }
    .at-html.login-intro .intro_adult_text p {
        font-size: 12px;
    }
}

/* 회원가입 — 사용: 회원가입 (skin > member > basic, social) */
.register-wrap {
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    padding-bottom: 20px;
}

.register-wrap .register_sheet .reg_tab {
    display: flex;
    justify-content: center;
    gap: 13px;
    position: relative;
    padding: 0 83.5px;
}

.register-wrap .register_sheet .reg_tab li {
    height: 60px;
    line-height: 58px;
    flex: 1;
    margin-bottom: 59px;
    border: 1px solid #d6d6d6;
    border-radius: var(--fp-r, 13px);
}

.register-wrap .register_sheet .reg_tab li.active {
    background: var(--main-btn-point-color);
    border-color: var(--main-btn-line-point-color);
}

.register-wrap .register_sheet .reg_tab li a {
    display: block;
    font-size: 17px;
    font-weight: 400;
    color: var(--main-btn-font-color4);
    text-align: center;
}

.register-wrap .register_sheet .reg_tab li.active a {
    font-weight: 500;
    color: #fff;
}

.register-wrap .register_sheet .reg_form {
    max-width: 540px;
    margin: 0 auto;
}

.register-wrap .register_sheet .reg_form_com {
    margin-bottom: 40px;
    padding: 0 0 40px;
    border-bottom: 1px solid #d6d6d6;
}

.register-wrap .register_sheet .reg_form_com .reg_profile_trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.register-wrap .register_sheet .reg_form_com .reg_profile_trigger_thumb {
    display: block;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    background: var(--fp-surface-soft, #f7f7f7);
    border: 1px solid var(--fp-hairline, #e5e8eb);
}

.register-wrap .register_sheet .reg_form_com .reg_profile_trigger_thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.register-wrap .register_sheet .reg_form_com .reg_profile_trigger_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 20px;
    border-radius: 13px;
    background-color: var(--fp-surface-strong);
    color: var(--fp-ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.register-wrap .register_sheet .reg_form_com .reg_profile_trigger_link:hover {
    background-color: #e3e6ea;
}

.register-wrap .register_sheet .reg_form_com .reg_profile_trigger_link:focus-visible {
    outline: 2px solid var(--fp-primary, #1a6dff);
    outline-offset: 2px;
}

.register-wrap .register_sheet .reg_form_bui {
    display: none;
}

.register-wrap .register_sheet .reg_form_bui.active {
    display: block;
}

.register-wrap .register_sheet .reg_form_com .input-box {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
}

.register-wrap .register_sheet .reg_form_com .input-box:last-child {
    margin-bottom: 0;
}

.register-wrap .register_sheet .reg_form_com .input-box-msg {
    align-items: flex-end;
    flex-flow: column;
}

.register-wrap .register_sheet .reg_form_com .input-box-msg div {
    width: 100%;
    display: flex;
    align-items: center;
}

.register-wrap .register_sheet .reg_form_com .input-box label {
    width: 136px;
    font-size: 16px;
    font-weight: 400;
    color: var(--main-box-font-color);
    line-height: 46px;
}

.register-wrap .register_sheet .reg_form_com .input-box label .essential {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--main-box-point-color) !important;
    position: relative;
    top: 9px;
    right: -4px;
    font-size: 0;
    background-image: none !important;
}

.register-wrap .register_sheet .reg_form .red {
    display: none;
}

.register-wrap .register_sheet .reg_form_com .input-box input {
    width: calc(100% - 136px);
    height: 46px;
    line-height: 44px;
    padding: 0 15px;
    font-size: 16px;
    font-weight: 300;
    box-shadow: none;
    border: 1px solid #e1e1e1;
    border-radius: var(--fp-r, 13px);
    background-color: #fff;
    color: #0c0c0c;
    outline: none;
}

.register-wrap .register_sheet .reg_form_bui .addr .re_input_box {
    width: calc(100% - 136px);
}

.register-wrap .register_sheet .reg_form_bui .addr .re_input_box input {
    width: 100%;
}

.register-wrap .register_sheet .reg_form_com .input-box input:focus {
    border: 1px solid var(--main-box-line-point-color);
}

.register-wrap .register_sheet .reg_form_com .input-box .msg-box {
    width: calc(100% - 136px);
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    margin-top: 12px;
    display: none;
}

.register-wrap .register_sheet .reg_form_com .input-box .msg-box.txt {
    display: block;
}

/* 관리자 회원수정(superadm/member_form.php)의 실시간 검증 UI(fp_field_error/success)와
   같은 언어 — 아이콘 + 색상 텍스트로 통과/위반을 즉시 보여준다. 기존 .id/.pw 고정 빨강 대신
   상태 클래스(.error/.success)로 전환. */
.register-wrap .register_sheet .reg_form_com .input-box .msg-box.error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    /* !important 필요 — 닉네임 msg-box는 마크업에 .gray가 이미 있어 .msg-box.txt.gray(3클래스,
       아래쪽에 위치)가 이 규칙(2클래스)을 specificity+소스순서 모두에서 이겨버림 */
    color: var(--fp-error) !important;
}
.register-wrap .register_sheet .reg_form_com .input-box .msg-box.error::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--fp-error);
    border-radius: 50%;
}
.register-wrap .register_sheet .reg_form_com .input-box .msg-box.success {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--fp-success) !important;
}
.register-wrap .register_sheet .reg_form_com .input-box .msg-box.success::before {
    content: "\2713";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--fp-success);
    border-radius: 50%;
}
.register-wrap .register_sheet .reg_form_com .input-box input.input-error {
    border: 1px solid var(--fp-error);
    background-color: var(--fp-error-bg);
}
.register-wrap .register_sheet .reg_form_com .input-box input.input-success {
    border: 1px solid var(--fp-success);
    background-color: var(--fp-success-bg);
}

.register-wrap .register_sheet .reg_form_per .input-box-msg.email > div.email_msg {
    width: calc(100% - 136px);
    flex-direction: column;
}

.register-wrap .register_sheet .reg_form_per .input-box-msg.email > div.email_msg > div:not([data-error-target]) {
    width: 100%;
    color: #ff0000;
    font-weight: 400;
    margin-bottom: 0;
}

/* 이메일 실시간 검증 결과 박스(data-error-target) — 위 정적 안내문(email_msg_box)과 달리
   상태 클래스(.error/.success)에 따라 색이 바뀐다. */
.register-wrap .register_sheet .reg_form_per .input-box-msg.email > div.email_msg > div[data-error-target] {
    width: 100%;
    font-weight: 400;
    margin-bottom: 0;
}
.register-wrap .register_sheet .reg_form_per .input-box-msg.email > div.email_msg > div[data-error-target].error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--fp-error);
}
.register-wrap .register_sheet .reg_form_per .input-box-msg.email > div.email_msg > div[data-error-target].error::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--fp-error);
    border-radius: 50%;
}
.register-wrap .register_sheet .reg_form_per .input-box-msg.email > div.email_msg > div[data-error-target].success {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--fp-success);
}
.register-wrap .register_sheet .reg_form_per .input-box-msg.email > div.email_msg > div[data-error-target].success::before {
    content: "\2713";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--fp-success);
    border-radius: 50%;
}

/* 사업자등록증 첨부 — Untitled UI File Uploader 스타일 벤치마킹(드래그앤드롭 카드형).
   실제 <input type="file" name="com_file">는 그대로 유지(서버 전송 로직 무변경), 시각만
   카드로 감싼다. 드롭존/선택된 파일 카드 두 상태를 JS(register_form.skin.php)가 토글. */
.register-wrap .register_sheet .reg_form_bui .input-box .file-uploader {
    width: calc(100% - 136px);
}
.register-wrap .register_sheet .file-uploader-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.register-wrap .register_sheet .file-uploader-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    border: 1px dashed var(--fp-hairline, #dee1e6);
    border-radius: var(--fp-r, 13px);
    background: var(--fp-surface-soft, #f7f7f7);
    cursor: pointer;
    text-align: center;
    transition: border-color 150ms ease, background 150ms ease;
}
.register-wrap .register_sheet .file-uploader-drop:hover,
.register-wrap .register_sheet .file-uploader-drop:focus-visible,
.register-wrap .register_sheet .file-uploader-drop.is-dragover {
    border-color: var(--fp-primary, #1a6dff);
    background: var(--fp-surface-strong, #eef0f3);
    outline: none;
}
.register-wrap .register_sheet .file-uploader-icon svg {
    width: 26px;
    height: 26px;
    color: var(--fp-muted, #7c828a);
}
.register-wrap .register_sheet .file-uploader-text {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--fp-body, #5b616e);
    word-break: keep-all;
}
.register-wrap .register_sheet .file-uploader-text strong {
    color: var(--fp-primary-text, var(--fp-primary, #1a6dff));
    font-weight: 600;
}
.register-wrap .register_sheet .file-uploader-item {
    /* !important 필요 — .reg_form_com .input-box-msg div(범용 규칙, rest.css 1400행대)가
       specificity(4클래스+1태그)로 이 규칙(3클래스)을 이겨 display:flex를 강제해 버림 */
    display: none !important;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--fp-hairline, #dee1e6);
    border-radius: var(--fp-r, 13px);
    background: #fff;
}
.register-wrap .register_sheet .file-uploader-item.active {
    display: flex !important;
}
.register-wrap .register_sheet .file-uploader-item-icon svg {
    width: 20px;
    height: 20px;
    color: var(--fp-primary-text, var(--fp-primary, #1a6dff));
    flex-shrink: 0;
}
.register-wrap .register_sheet .file-uploader-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.register-wrap .register_sheet .file-uploader-item-name {
    font-size: 14px;
    color: var(--fp-ink, #0a0b0d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.register-wrap .register_sheet .file-uploader-item-size {
    font-size: 12px;
    color: var(--fp-muted, #7c828a);
}
.register-wrap .register_sheet .file-uploader-item-remove {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--fp-muted, #7c828a);
    transition: background 150ms ease, color 150ms ease;
}
.register-wrap .register_sheet .file-uploader-item-remove svg {
    width: 16px;
    height: 16px;
}
.register-wrap .register_sheet .file-uploader-item-remove:hover {
    background: var(--fp-error-bg, #fff2f2);
    color: var(--fp-error, #cf202f);
}
.register-wrap .register_sheet .file-uploader-existing {
    width: calc(100% - 136px);
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--fp-muted, #7c828a);
    word-break: break-all;
}

/* 사업자등록증 첨부 실시간 검증(초록/빨강) — regSetFieldState가 #com_file_uploader에
   input-error/input-success 클래스를 토글하면 드롭존 테두리·배경만 상태색으로 바뀐다
   (카드 레이아웃 자체는 그대로 유지). */
.register-wrap .register_sheet .file-uploader.input-success .file-uploader-drop {
    border-color: var(--fp-success);
    background: var(--fp-success-bg);
}
.register-wrap .register_sheet .file-uploader.input-error .file-uploader-drop {
    border-color: var(--fp-error);
    background: var(--fp-error-bg);
}
.register-wrap .register_sheet .file-uploader.input-success .file-uploader-item {
    border-color: var(--fp-success);
}
.register-wrap .register_sheet .file-uploader.input-error .file-uploader-item {
    border-color: var(--fp-error);
}

.register-wrap .register_sheet .reg_form_com .input-box.reg_form_name {
    align-items: flex-start;
    margin-bottom: 20px;
    margin-top: 10px;
}

.register-wrap .register_sheet .reg_form_com .reg_form_name.input-box .reg_form_name_box {
    width: calc(100% - 136px);
}

.register-wrap .register_sheet .reg_form_com .input-box.addr {
    align-items: flex-start;
    flex-wrap: wrap;
}

/* 이름/주소 실시간 검증(초록/빨강) 확대 — .addr는 라벨+re_input_box가 이미 flex row로 옆에
   붙어있어(align-items:flex-start), 검증 msg-box를 같은 row에 3번째 아이템으로 두면 옆으로
   삐져나간다. label+re_input_box를 .addr_field로 한 번 더 감싸 flex-wrap으로 줄바꿈시키고,
   msg-box는 라벨 폭(136px)만큼 들여써 입력 영역 아래로 붙인다. */
.register-wrap .register_sheet .reg_form_com .input-box.addr .addr_field {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.register-wrap .register_sheet .reg_form_com .input-box.addr > .msg-box {
    width: 100%;
    margin-left: 136px;
}

.register-wrap .register_sheet .reg_form .reg_terms {
    padding: 0 20px;
}

.register-wrap .register_sheet .reg_form_com .reg_form_name.input-box input {
    width: 100%;
}

.register-wrap .register_sheet .reg_form_com .reg_form_name .cert-box {
    width: 100%;
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.register-wrap .register_sheet .reg_form_com .reg_form_name button.win_btn {
    width: 100%;
    background: #bfbfbf;
    border-radius: 5px !important;
    font-size: 16px;
    font-weight: 300;
    padding: 10px 10px;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    transition: 0.3s;
    background-color: #f6f6f6;
    border: 1px solid #f6f6f6;
    color: #999999 !important;
}

.register-wrap .register_sheet .reg_form_com .reg_form_name button.win_btn:hover {
    background: var(--main-box-point-color);
    color: #fff !important;
}

.register-wrap .register_sheet .reg_form_com .reg_form_name .msg-box {
    width: 100%;
    margin-top: 10px;
    font-size: 13px;
    color: #999;
    font-weight: 400;
    line-height: 20px;
}

.register-wrap .register_sheet .reg_form_com .input-box-msg .nick,
.register-wrap .register_sheet .reg_form_com .input-box-msg .hp {
    flex-flow: column;
    align-items: flex-end;
}

.register-wrap .register_sheet .reg_form_com .input-box .msg-box.txt.gray {
    color: var(--main-box-font-color4);
}

.register-wrap .register_sheet .reg_form_per .input-box.addr .re_input_box,
.register-wrap .register_sheet .reg_form_per .input-box.homepage .re_input_box,
.register-wrap .register_sheet .reg_form_per .input-box.tel .re_input_box,
.register-wrap .register_sheet .reg_form_per .input-box.signature .re_input_box,
.register-wrap .register_sheet .reg_form_per .input-box.profile .re_input_box,
.register-wrap .register_sheet .reg_form_per .input-box.recommend .re_input_box {
    width: calc(100% - 136px);
}

.register-wrap .register_sheet .reg_form_per .input-box.addr .re_input_box input,
.register-wrap .register_sheet .reg_form_per .input-box.homepage .re_input_box input,
.register-wrap .register_sheet .reg_form_per .input-box.tel .re_input_box input,
.register-wrap .register_sheet .reg_form_per .input-box.signature .re_input_box input,
.register-wrap .register_sheet .reg_form_per .input-box.profile .re_input_box input,
.register-wrap .register_sheet .reg_form_per .input-box.recommend .re_input_box input {
    width: 100%;
}

.register-wrap .register_sheet .reg_form_com .input-box .re_input_box #daum_juso_pagemb_zip,
.register-wrap .register_sheet .reg_form_com .input-box.addr #daum_juso_pagecom_zip {
    max-height: 400px;
}

.register-wrap .register_sheet .reg_form_com .input-box textarea {
    line-height: 21px;
    padding: 15px;
    font-size: 16px;
    font-weight: 300;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    width: 100%;
    height: 130px;
    resize: none;
    background: #fff;
}

.register-wrap .register_sheet .reg_form .reg_terms h2 {
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: 400;
    color: var(--main-box-font-color);
}

.register-wrap .register_sheet .reg_form .reg_terms .check-box {
    position: relative;
    padding: 0;
    padding-bottom: 23px;
    border: none;
}

.register-form .check-input {
    display: none;
}

.register-wrap .register_sheet .reg_form .reg_terms .check-box .check-input + label {
    position: relative;
    display: flex;
    align-items: center;
    line-height: 1;
    padding-left: 0px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
    color: #999999;
    margin: 0;
}

.register-wrap .register_sheet .reg_form .reg_terms .check-box .check-input:checked + label {
    color: var(--main-box-font-color);
}

.register-wrap .register_sheet .reg_form .reg_terms .check-box .arrow {
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    top: 7px;
    right: 0;
    cursor: pointer;
    border-radius: var(--fp-r, 13px);
    transition: background-color 150ms ease;
}
.register-wrap .register_sheet .reg_form .reg_terms .check-box .arrow:hover {
    background-color: var(--fp-surface-strong, #eef0f3);
}

.register-wrap .register_sheet .reg_form .reg_terms .check-box .arrow::before,
.register-wrap .register_sheet .reg_form .reg_terms .check-box .arrow::after {
    content: "";
    width: 8px;
    height: 1px;
    position: absolute;
    top: 50%;
    background: var(--main-box-font-color);
    transition: all 100ms linear;
}

.register-wrap .register_sheet .reg_form .reg_terms .check-box .arrow::before {
    right: 6px;
    transform: translateY(-50%) rotate(-45deg);
}

.register-wrap .register_sheet .reg_form .reg_terms .check-box .arrow::after {
    transform: translateY(-50%) rotate(45deg);
}

.register-wrap .register_sheet .reg_form .reg_terms .check-box.active .arrow::before {
    transform: translateY(-50%) rotate(45deg);
}

.register-wrap .register_sheet .reg_form .reg_terms .check-box.active .arrow::after {
    transform: translateY(-50%) rotate(-45deg);
}

.register-wrap .register_sheet .reg_form .reg_terms .check-box .detail-content {
    height: 0;
    line-height: 22px;
    display: block;
    margin-top: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    overflow-y: auto;
    font-size: 13px;
    font-weight: 300;
    border: none;
    background: #f8f8f8;
    color: #999;
    transition: all 250ms linear;
    overflow: hidden;
}
.register-wrap .register_sheet .reg_form .reg_terms .check-box.active .detail-content {
    height: 145px;
    margin-top: 20px;
    padding: 20px 6px 20px 20px;
    opacity: 1;
    visibility: visible;
    border-radius: 5px;
}

.register-wrap .register_sheet .reg_form .reg_terms .check-box .detail-content .cf_box {
    overflow-y: auto;
    height: 105px;
    padding-right: 5px;
}

.register-wrap .register_sheet .reg_form .reg_terms .check-box.active .detail-content .cf_box::-webkit-scrollbar {
    width: 4px;
}
.register-wrap .register_sheet .reg_form .reg_terms .check-box.active .detail-content .cf_box::-webkit-scrollbar-thumb {
    background: #d6d6d6;
    width: 4px;
}
.register-wrap .register_sheet .reg_form .reg_terms .check-box.active .detail-content .cf_box::-webkit-scrollbar-button {
    background-color: #f8f8f8;
}

.register-wrap .register_sheet .reg_form .reg_terms .regbtn-wrap {
    width: 100%;
    margin: 0 auto;
    margin-top: 80px;
    text-align: center;
}

.register-wrap .register_sheet .reg_form .regis_interest {
    position: relative;
    margin: 0;
    margin-top: 10px;
    padding: 40px 0 0;
    font-size: 16px;
    font-weight: 400;
    border: none;
    color: #444;
}

.register-wrap .register_sheet .reg_form .reg_terms .regbtn-wrap.register_btn #btn_submit.regbtn {
    border-radius: var(--fp-r, 13px);
    width: 100%;
    height: 58px;
    line-height: 58px;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    background: var(--main-btn-point-color);
}

.register-wrap .register_sheet .reg_form .regis_interest::after {
    content: "";
    width: 200%;
    height: 18px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #eff2f5;
}

.register-wrap .register_sheet .input-box.with-button input {
    margin-right: 5px;
    width: calc(100% - 261px) !important;
}

.register-wrap .register_sheet .input-box .hp_req {
    width: 120px;
    min-height: 46px;
    font-size: 15px;
    font-weight: 400;
    border-radius: 5px;
    background: var(--main-btn-point-color);
    transition: 0.2s;
    color: #fff;
    padding: 5px;
}

.register-wrap .register_sheet .input-box .hp_req.hp_chk {
    background: #999999;
}

.register-wrap .register_sheet .input-box .hp_req.again {
    background: #999999;
}

.register-wrap .register_sheet .input-box.with-timer .timer {
    position: absolute;
    font-size: 16px;
    font-weight: 600;
    transform: translateY(-50%);
    top: 50%;
    right: 140px;
    color: red;
}

.register-wrap .register_sheet .reg_form .captcha_html {
    padding-top: 39px;
}

@media (max-width: 991px) {
    .at-content.register_cont {
        padding-bottom: 0;
    }

    .register-wrap {
        padding-bottom: 0;
        max-width: 100%;
    }

    .register-wrap .register_sheet {
        width: 100%;
    }

    .register-wrap .register_sheet .reg_tab {
        gap: 10px;
        padding: 0;
        padding-bottom: 38px;
        margin-bottom: 60px;
    }

    .register-wrap .register_sheet .reg_tab li {
        height: 47px;
        line-height: 45px;
        margin-bottom: 0;
    }

    .register-wrap .register_sheet .reg_tab li a {
        font-size: 15px;
    }

    .register-wrap .register_sheet .reg_tab::after {
        content: "";
        width: 200%;
        height: 18px;
        position: absolute;
        bottom: 0;
        background: #eff2f5;
    }

    .register-wrap .register_sheet .reg_form_com .reg_form_name.input-box .reg_form_name_box {
        width: 100%;
    }

    .register-wrap .register_sheet .reg_form_com {
        position: relative;
        margin-bottom: 30px;
        border: none;
    }

    .register-wrap .register_sheet .reg_form_com .input-box {
        display: block;
        margin-bottom: 20px;
    }

    .register-wrap .register_sheet .reg_form_com .input-box-msg div {
        display: block;
    }

    .register-wrap .register_sheet .reg_form_com .input-box label {
        margin-bottom: 0;
        font-size: 16px;
    }

    .register-wrap .register_sheet .reg_form_com .input-box input {
        width: 100%;
        font-size: 14px;
        font-weight: 500;
        border-radius: var(--fp-r, 13px);
    }

    .register-wrap .register_sheet .reg_form_bui .addr .re_input_box {
        width: 100%;
    }

    .register-wrap .register_sheet .reg_form_com .input-box .msg-box {
        width: 100%;
    }

    .register-wrap .register_sheet .reg_form_com .input-box.addr .addr_field {
        display: block;
    }

    .register-wrap .register_sheet .reg_form_com .input-box.addr > .msg-box {
        margin-left: 0;
    }

    .register-wrap .register_sheet .reg_form_per .input-box-msg.email > div.email_msg {
        width: 100%;
    }

    .register-wrap .register_sheet .reg_form_per .input-box.addr .re_input_box,
    .register-wrap .register_sheet .reg_form_per .input-box.homepage .re_input_box,
    .register-wrap .register_sheet .reg_form_per .input-box.tel .re_input_box,
    .register-wrap .register_sheet .reg_form_per .input-box.signature .re_input_box,
    .register-wrap .register_sheet .reg_form_per .input-box.profile .re_input_box,
    .register-wrap .register_sheet .reg_form_per .input-box.recommend .re_input_box {
        width: 100%;
    }

    .register-wrap .register_sheet .reg_form_com .reg_form_name .cert-box {
        margin-top: 15px;
    }

    .register-wrap .register_sheet .reg_form_com .reg_form_name button.win_btn {
        padding: 9.25px 10px;
        font-size: 14px;
        font-weight: 500;
    }
    .register-wrap .register_sheet .reg_form_com .reg_form_name .msg-box {
        margin: 5px 0 20px;
        font-size: 13px;
        margin-top: 10px;
    }

    .register-wrap .register_sheet .input-box .hp_req {
        width: 100%;
        margin-top: 5px;
    }

    .register-wrap .register_sheet .input-box.with-button input {
        width: 100% !important;
        font-size: 14px;
        font-weight: 500;
        border-radius: var(--fp-r, 13px);
    }
    .register-wrap .register_sheet .input-box.with-timer .timer {
        right: 15px;
        top: 50px;
    }
    .register-wrap .register_sheet .input-box .hp_req {
        width: 100%;
        margin-top: 5px;
    }

    .register-wrap .register_sheet .reg_form .reg_terms h2 {
        font-size: 15px;
        font-weight: 600;
    }

    .register-wrap .register_sheet .reg_form .reg_terms .check-box {
        padding-bottom: 19px;
        margin-bottom: 19px;
        border-bottom: 1px solid #e1e1e1;
    }

    .register-wrap .register_sheet .reg_form .reg_terms .check-box:nth-child(7) {
        border-bottom: none;
    }

    .register-wrap .register_sheet .reg_form_com .input-box textarea {
        line-height: 19px;
        font-size: 13px;
    }

    .register-wrap .register_sheet .reg_form_com::after {
        content: "";
        width: 200%;
        height: 18px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background: #eff2f5;
    }

    .register-wrap .register_sheet .reg_form .reg_terms {
        padding: 0;
    }
    .register-wrap .register_sheet .reg_form .reg_terms .check-box .arrow {
        top: 10px;
        right: 2px;
    }
    .register-wrap .register_sheet .reg_form .reg_terms .check-box.active .detail-content {
        padding: 15px 5px 15px 15px;
        font-size: 11.5px;
        line-height: 21.5px;
    }
    .register-wrap .register_sheet .reg_form .regis_interest {
        font-size: 17px;
        font-weight: 600;
        padding: 30px 0 0;
    }
    .register-wrap .register_sheet .reg_form .captcha_html {
        padding-top: 30px;
    }
    .register-wrap .register_sheet .reg_form .reg_terms .regbtn-wrap {
        width: 100%;
        margin-top: 50px;
    }
    .register-wrap .register_sheet .reg_form .reg_terms .regbtn-wrap.register_btn #btn_submit.regbtn {
        width: 100%;
        padding: 0 45px;
        height: 48px;
        line-height: 46px;
        font-size: 15px;
        border-radius: var(--fp-r, 13px);
    }
}

@media (max-width: 480px) {
    .register-wrap .register_sheet .reg_tab {
        padding-bottom: 25px;
        margin-bottom: 35px;
    }

    .register-wrap .register_sheet .reg_form_com {
        padding: 0 0 30px;
    }
    .register-wrap .register_sheet .reg_form_com .input-box .msg-box.txt {
        margin-top: 6px;
    }

    .register-wrap .register_sheet .reg_form_com .reg_form_name .cert-box {
        margin-top: 10px;
    }
    .register-wrap .register_sheet .reg_form_com .reg_form_name .msg-box {
        font-size: 12px;
        line-height: 15px;
        margin-top: 6px;
        display: block;
    }
    .register-wrap .register_sheet .input-box .hp_req {
        font-size: 14px;
    }
    .register-wrap .register_sheet .input-box.with-button input {
        height: 40px;
        line-height: 40px;
        padding: 0 12px;
        font-size: 12px;
    }
    .register-wrap .register_sheet .input-box.with-timer .timer {
        top: 47px;
    }
    .register-wrap .register_sheet .reg_form .reg_terms h2 {
        font-size: 13px;
    }
    .register-wrap .register_sheet .reg_form .reg_terms .check-box {
        padding-bottom: 16px;
        margin-bottom: 17px;
    }
    .register-wrap .register_sheet .reg_form .reg_terms .check-box .check-input + label {
        font-size: 14px;
    }
    .register-wrap .register_sheet .reg_form .reg_terms .check-box .check-input + label::after {
        display: none;
    }
    .register-wrap .register_sheet .reg_form_com::after {
        height: 9px;
    }
    .reg_terms .radio_check input + label .circle::before {
        top: 7px;
        left: 4px;
    }
    .reg_terms .radio_check input + label .circle::after {
        top: 3.5px;
        left: 8px;
    }
    .register-wrap .register_sheet .reg_form .reg_terms .check-box .arrow {
        width: 8px;
    }
    .register-wrap .register_sheet .reg_form .reg_terms .check-box .arrow::before {
        right: 6px;
    }
    .register-wrap .register_sheet .reg_form .regis_interest::after {
        height: 9px;
    }
    .register-wrap .register_sheet .reg_form .reg_terms .regbtn-wrap {
        margin-top: 40px;
    }
}

/* 소셜 회원가입 변형 — 사용: 소셜가입 (skin > social > social_register_member.skin.php) */
.register-wrap.register_social .register_sheet .reg_form {
    min-width: 540px;
}

.register-wrap.register_social .register_sheet .reg_form_com {
    padding: 0;
    border-bottom: none;
}

.register-wrap.register_social .register_sheet .reg_form .reg_terms {
    padding: 0;
}

.register-wrap.register_social .register_sheet .reg_form .reg_terms .regbtn-wrap {
    margin-top: 0;
}

@media (max-width: 991px) {
    .register-wrap.register_social {
        display: block;
    }

    .register-wrap.register_social .area-box {
        float: none;
        width: 100%;
    }
    .register-wrap.register_social .register_sheet .reg_form {
        min-width: 100%;
    }

    .register-wrap.register_social .register_sheet .reg_form_com::after {
        display: none;
    }
}

/* 소셜 추가정보 변형 — 사용: 소셜가입 (skin > social > social_addition_member.skin.php) */
.register-wrap.register_addition .register_sheet .reg_form_com {
    padding: 0;
    border-bottom: none;
}

.register-wrap.register_addition .register_sheet .reg_form .reg_terms {
    padding: 0;
}

.register-wrap.register_addition .register_sheet .reg_form .reg_terms .regbtn-wrap {
    margin-top: 0;
}

@media (max-width: 991px) {
    .register-wrap.register_addition .register_sheet .reg_form_com::after {
        display: none;
    }
}

/* 회원가입 완료 — 축하 화면(컨페티). 프론트는 ds.css --fp-* 미탑재라 필요한 토큰을
   skin/member/basic/style.css :root에서 로컬 재선언(coupon_detail_modal과 동일 방식) */
.register_celebrate {
    position: relative;
    padding: 64px 20px 96px;
    overflow: hidden;
}
.register_celebrate_confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    /* .register_celebrate_card가 자체 스태킹 컨텍스트(z-index:1)를 가져 이 레이어(기존 z-index
       미지정, auto)가 카드 뒤로 밀려 있었음 — 카드보다 위로 올려 컨페티가 카드 위에 떨어지는
       것처럼 보이게 함. pointer-events:none이라 버튼 클릭에는 영향 없음. */
    z-index: 2;
}
.register_celebrate_confetti_piece {
    position: absolute;
    top: -20px;
    left: 0;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    /* 조각별 좌우 흔들림 폭 — JS가 인라인으로 개별 랜덤값을 지정 */
    --rc-confetti-drift: 0px;
    animation-name: rcConfettiFall;
    animation-timing-function: cubic-bezier(0.36, 0.66, 0.5, 1);
    animation-fill-mode: forwards;
}
.register_celebrate_confetti_piece--round {
    border-radius: 50%;
}
@keyframes rcConfettiFall {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--rc-confetti-drift), 640px) rotate(600deg);
        opacity: 0;
    }
}
.register_celebrate_confetti_piece--1 { background: var(--fp-primary); }
.register_celebrate_confetti_piece--2 { background: var(--fp-warning); }
.register_celebrate_confetti_piece--3 { background: var(--fp-success); }
.register_celebrate_confetti_piece--4 { background: var(--fp-primary-active); }

.register_celebrate_card {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 0 auto;
    padding: 48px 40px 40px;
    background: var(--fp-canvas);
    border: 1px solid var(--fp-hairline);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(10, 11, 13, 0.08);
    text-align: center;
}
.register_celebrate_badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 56px;
    margin: 0 auto 20px;
    padding: 0 24px;
    background: var(--fp-success-bg);
    border-radius: 28px;
}
.register_celebrate_badge img {
    height: 24px;
    width: auto;
}
.register_celebrate_card .txt-box {
    text-align: center;
}
.register_celebrate_card .txt-box h1 {
    margin: 0;
    line-height: 1.4;
    font-size: 26px;
    font-weight: 400;
    color: var(--fp-ink);
    word-break: keep-all;
}
.register_celebrate_card .txt-box h1 span {
    font-weight: 700;
}
.register_celebrate_card .txt-box p {
    margin-top: 12px;
    line-height: 1.6;
    font-size: 16px;
    font-weight: 400;
    color: var(--fp-body);
    word-break: keep-all;
}
.register_celebrate_card .info-box {
    margin-top: 32px;
    padding: 20px;
    background: var(--fp-surface-soft);
    border-radius: 16px;
    text-align: left;
}
.register_celebrate_card .info-box p {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    line-height: 1.6;
    font-size: 15px;
    font-weight: 400;
    color: var(--fp-muted);
}
.register_celebrate_card .info-box p + p {
    margin-top: 8px;
}
.register_celebrate_card .info-box p span {
    font-weight: 600;
    color: var(--fp-ink);
    text-align: right;
    word-break: break-all;
}
.register_celebrate_card #result_coupon {
    margin-top: 24px;
    padding: 16px 20px;
    background: var(--fp-success-bg);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--fp-ink);
    text-align: center;
}
.register_celebrate_card .alert-box {
    margin: 24px 0 0;
    padding: 16px 20px;
    background: var(--fp-surface-soft);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--fp-muted);
    text-align: center;
    list-style: none;
    word-break: keep-all;
}
/* 브레이크포인트별 <br class="hidden-lg hidden-md"> 강제줄바꿈 대신 항목 하나당 한 줄(li)로
   분리 — 박스 폭에 맞춰 자연스럽게 줄바꿈되므로 화면 크기별 br 하드코딩이 필요 없다. */
.register_celebrate_card .alert-box li + li {
    margin-top: 6px;
}
.register_celebrate_btns {
    display: flex;
    gap: 12px;
    margin-top: 32px !important;
}
.register_celebrate_btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease;
}
.register_celebrate_btn--primary {
    background: var(--fp-primary);
    color: var(--fp-on-primary);
    border: 1px solid transparent;
}
.register_celebrate_btn--primary:hover {
    background: var(--fp-primary-active);
}
.register_celebrate_btn--secondary {
    background: var(--fp-canvas);
    color: var(--fp-body);
    border: 1px solid var(--fp-hairline);
}
.register_celebrate_btn--secondary:hover {
    background: var(--fp-surface-soft);
}
@media (max-width: 991px) {
    .register_celebrate {
        padding: 40px 16px 64px;
    }
    .register_celebrate_card {
        padding: 40px 24px 32px;
        border-radius: 20px;
    }
    .register_celebrate_card .txt-box h1 {
        font-size: 22px;
    }
    .register_celebrate_card .txt-box p {
        margin-top: 8px;
        font-size: 15px;
    }
    .register_celebrate_card .info-box p {
        font-size: 14px;
    }
    .register_celebrate_card .alert-box {
        padding: 14px 16px;
        font-size: 13px;
    }
    .register_celebrate_btns {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .register_celebrate_card {
        padding: 32px 20px 28px;
    }
    .register_celebrate_badge {
        height: 48px;
        padding: 0 20px;
        border-radius: 24px;
    }
    .register_celebrate_badge img {
        height: 20px;
    }
    .register_celebrate_card .txt-box h1 {
        font-size: 20px;
    }
    .register_celebrate_card .txt-box p {
        font-size: 14px;
    }
    .register_celebrate_card .info-box p {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .register_celebrate_card .info-box p span {
        text-align: left;
    }
}

/* 마이페이지 — 사용: 마이페이지 (대시보드는 전체폭 노출 위해 분리, mypage_dashboard.php) */
.at-body.mypage {
    padding-top: 12px; /* 40px→12px(4px 스케일) — 위 .at-content 기본 여백 20px과 합쳐 32px, 대시보드~주문현황 섹션 간격을 카드 사이 간격(margin-bottom 32px)과 동일 리듬으로 정렬 */
}
.at-body.mypage_bg {
    background-color: #f9f9f9;
}
/* 2026-08 (주)파이브센스_FIVESENSES.Corp. 마이페이지 컨텐츠~푸터 사이 여백(.fix_footer margin-top)이
   흰색(#thema_wrapper 기본 배경)으로 끊겨 보이는 문제 — footer.skin.php는 IonCube 암호화(수정불가)라
   .at-body와 #pcFooter/#mobFooter의 공통 조상인 .at-wrapper 배경을 :has()로 조건부 처리해 CSS만으로 해결 */
.at-wrapper:has(.at-body.mypage_bg) {
    background-color: #f9f9f9;
}
.mypage_dashboard {
    border: 0;
    background: #f9f9f9;
    padding: 64px 0 32px; /* 4px 스케일(디자인시스템 간격 규칙) — 60px→64px */
    --mp-radius-card: 26px; /* 카드 radius(디자인시스템 --fp-rc) 미러링 — 프론트 페이지는 --fp-* 미로드 */
}
.mypage_dashboard .container_fix {
    display: flex;
}
.mypage_dashboard .quart_box {
    width: 19.231%;
    min-height: 150px;
    border-right: 0;
    background: #fff;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: 40px 32px; /* 4px 스케일 — 30px→32px */
    border-radius: var(--mp-radius-card);
    box-shadow: none; /* 승민 요청 — 대시보드 4칸 전체 엘리베이션 제거(프로필카드 한정 적용을 확대) */
}
.mypage_dashboard .quart_box .more-btn a {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    color: #0c0c0c;
    font-weight: 400;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 8px;
    transition: background-color 150ms ease;
}
.mypage_dashboard .quart_box .more-btn a:hover {
    background-color: #fafafa;
}
.mypage_dashboard .quart_box .more-btn a .arrow_box {
    display: inline-block;
    width: 7px;
    height: 13px;
    background-image: url(../img/arrow_box.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-left: 12px;
}
.mypage_dashboard .quart_box .quart-description span {
    font-size: 20px;
    color: var(--main-box-font-point-color);
    font-weight: 500;
    margin-top: 20px;
    display: block;
}
.mypage_dashboard .quart_box .left_info {
    display: flex;
    align-items: center;
    flex-grow: 1;
    text-decoration: none; /* left_info가 <a>로 감싸져도 밑줄 없이 기존 톤 유지 */
}
.mypage_dashboard .quart_box .left_info .icon_box {
    width: 64px; /* 4px 스케일 — 60px→64px, 환영 인상 강화 */
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
}
.mypage_dashboard .quart_box .left_info .icon_box .member_icon {
    display: block;
    width: 100%;
    height: 100%;
    background: #f0f0f0;
}
.mypage_dashboard .quart_box .left_info .icon_box .member_icon img {
    display: block;
    width: 100%;
}
.mypage_dashboard .quart_box .left_info .text_box {
    display: flex;
    flex-direction: column;
}
.mypage_dashboard .quart_box .left_info .text_box .name_box {
    font-size: 21px;
    color: #0c0c0c;
    font-weight: 600; /* 인사말 타이포 위계 강화(환영받는 인상) */
}
.mypage_dashboard .quart_box .left_info .text_box .level_text {
    display: inline-block;
    align-self: flex-start;
    font-size: 13px;
    color: var(--main-btn-point-color);
    background-color: color-mix(in srgb, var(--main-btn-point-color) 10%, transparent);
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px; /* 디자인시스템 배지 radius 고정값 */
    margin-top: 10px;
}
.mypage_dashboard .quart_box .right_info {
    position: relative;
}
.mypage_dashboard .quart_box .right_info > a {
    /* 직계 자식(>)으로 한정 — descendant(a)로 두면 .edit_list 내부 옵션 <a>까지 걸려
       border/radius가 새어 들어가 옵션마다 둥근 테두리 상자가 중복으로 겹쳐 보이는 버그가 남 */
    display: block;
    width: 78px;
    padding: 6px 5px;
    border: 1px solid #e1e1e1; /* 승민 요청 — 카드 내 다른 요소와의 일체감을 위해 hairline 톤으로 완화 */
    border-radius: 14px;
    font-size: 14px;
    color: #999999;
    font-weight: 400;
    text-align: center;
    transition: 0.1s;
}
.mypage_dashboard .quart_box .right_info > a:hover {
    border-color: var(--main-btn-font-point-color);
    color: var(--main-btn-font-point-color);
}
/* #info_edit 트리거 — 디자인시스템 Dropdown/Select 컴포넌트(form-controls 참조) 구조를 따름:
   trigger + chevron, 열리면 리스트가 trigger 바로 아래 gap 없이 붙고(top:100%) trigger 하단 모서리가 펴짐.
   width는 즉시 전환(애니메이션 없음) — 실측 결과 98px→190px를 180ms로 보간하면 우측 고정폭 특성상
   라벨 텍스트가 계속 좌측으로 밀려나며 흘러가는 동안 리스트(edit_list)는 표시가 즉시 토글돼(hide/show)
   트리거만 뒤늦게 폭을 따라잡는 것처럼 보여 어색했음. 폭을 즉시 전환하고 리스트에 페이드 인을 붙여
   "리스트가 자연스럽게 드러난다"는 단일 동작으로 단순화. */
@media (min-width: 992px) {
    .mypage_dashboard .quart_box .right_info a#info_edit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 98px; /* 닫힘 상태 실측 폭(콘텐츠 hug) — auto는 width 트랜지션이 보간되지 않아 고정값 사용 */
        padding: 6px 14px;
        transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
    }
    .mypage_dashboard .quart_box .right_info a#info_edit .edit_btn_chevron {
        transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
        flex-shrink: 0;
    }
    .mypage_dashboard .quart_box .right_info a#info_edit:hover,
    .mypage_dashboard .quart_box .right_info.is-open a#info_edit {
        border-color: var(--main-btn-font-point-color);
        color: var(--main-btn-font-point-color);
        box-shadow: 0 0 0 3px rgba(26, 109, 255, 0.10); /* 디자인시스템 open 상태 포커스링(--fp-primary 10%) 미러링 */
    }
    .mypage_dashboard .quart_box .right_info.is-open a#info_edit {
        width: 190px; /* .edit_list와 동일 폭 — 열림 시 하단 드롭다운과 좌우 테두리가 이어지도록 확장(즉시 전환) */
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .mypage_dashboard .quart_box .right_info.is-open a#info_edit .edit_btn_chevron {
        transform: rotate(180deg);
    }
    .mypage_dashboard .quart_box .right_info.is-open .edit_list {
        animation: fpInfoEditListIn 150ms ease;
    }
}
@keyframes fpInfoEditListIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.mypage_dashboard .quart_box .right_info .edit_list_wrap {
    display: none;
}
.mypage_dashboard .quart_box .right_info .edit_list {
    width: 190px;
    position: absolute;
    z-index: 200; /* 디자인시스템 Dropdown z-index 미러링 */
    top: 100%; /* trigger 바로 아래 gap 없이 부착 — 데드존 자체가 생기지 않는 구조 */
    right: 0;
    background: #fff;
    border: 1px solid var(--main-btn-font-point-color);
    border-top: none; /* trigger 하단과 이어지는 자리라 상단 보더 생략 */
    border-radius: 0 0 13px 13px; /* --fp-ri 미러링, 위는 trigger에 붙어 있어 평평하게 */
    box-shadow: 0 13px 34px rgba(26, 109, 255, 0.10), 0 2px 9px rgba(0, 0, 0, 0.06); /* 디자인시스템 dropdown-list 그림자 미러링 */
}
.mypage_dashboard .quart_box .right_info .edit_list li a {
    font-size: 14px;
    color: #0c0c0c;
    font-weight: 400;
    height: auto;
    line-height: 1.4;
    padding: 12px 16px; /* 디자인시스템 옵션 높이(42px)에 맞춘 상하 패딩, 4px 배수 */
    border-bottom: 1px solid #eef0f3; /* --fp-hairline-soft 미러링 — 셀렉트 옵션 행 구분선 */
    text-align: left; /* 디자인시스템 옵션은 좌측 정렬(중앙정렬 아님) */
    display: block;
    width: 100%;
    transition: background-color 120ms ease; /* 디자인시스템 dropdown-option 트랜지션 미러링 */
}
.mypage_dashboard .quart_box .right_info .edit_list li:nth-child(3) a {
    border-bottom: none;
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
}
.mypage_dashboard .quart_box .right_info .edit_list li a:hover {
    background: #f7f7f7; /* --fp-surface-soft 미러링 — 셀렉트 옵션 hover와 동일 톤 */
}
.mypage_dashboard .quart_info {
    flex-direction: unset;
    align-items: center;
    width: 39%;
}
.mypage_dashboard .quart_box + .quart_box {
    margin-left: 1.1023%;
}
@media (max-width: 991px) {
    .mypage_dashboard {
        background: #fff;
        padding: 0;
        margin-bottom: 0;
    }
    .mypage_dashboard .quart_box {
        width: 100%;
        padding: 35px 0;
        min-height: auto;
        box-shadow: none; /* 모바일은 풀블리드 행 레이아웃이라 카드 그림자 불필요(desktop 전용) */
    }
    .mypage_dashboard .quart_box .left_info .icon_box {
        width: 90px;
        height: 90px;
        margin-right: 30px;
    }
    .mypage_dashboard .quart_box .left_info .icon_box .member_icon {
        display: block;
        width: 100%;
        height: 100%;
        background: #f0f0f0;
    }
    .mypage_dashboard .quart_box .left_info .text_box {
        display: flex;
        flex-direction: column;
    }
    .mypage_dashboard .quart_box .left_info .text_box .name_box {
        font-size: 20px;
        font-weight: 400;
    }
    .mypage_dashboard .quart_box .left_info .text_box .level_text {
        font-size: 13px;
        margin-top: 10px;
    }
    .mypage_dashboard .quart_box .right_info > a {
        width: 75px;
        height: 27px;
        line-height: 27px;
        font-size: 14px;
        padding: 0 5px;
    }
    .mypage_dashboard .quart_box .right_info .edit_btn_chevron {
        display: none; /* 모바일은 바텀시트 형태라 select-trigger 셰브런 불필요 */
    }
    .mypage_dashboard .quart_box .right_info .edit_list_wrap {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10;
    }
    .mypage_dashboard .quart_box .right_info .edit_list {
        top: unset;
        right: auto;
        bottom: 60px;
        left: 0;
        z-index: 10;
        border: none; /* 데스크톱 select 테두리 리셋 — 모바일은 투명 바텀시트 래퍼 */
        box-shadow: 0 0 0;
        transform: none;
        width: 100%;
        background: transparent;
        padding: 0 15px;
    }
    .mypage_dashboard .quart_box .right_info .edit_list li a {
        display: block;
        background: #dcdcdc;
        line-height: 60px;
        font-size: 18px;
        color: #777;
        font-weight: 400;
        text-align: center;
        border-top: 1px solid #bababa;
        border-bottom: 0; /* 데스크톱 옵션 구분선(border-bottom) 리셋 — 모바일은 border-top으로만 구분 */
    }
    .mypage_dashboard .quart_box .right_info .edit_list li a:hover {
        color: #0c0c0c;
        background: #e7e7e7;
    }
    .mypage_dashboard .quart_box .right_info .edit_list li:first-child a {
        border-top: 0;
        border-radius: 10px 10px 0 0;
    }
    .mypage_dashboard .quart_box .right_info .edit_list li:nth-child(3) a {
        border-radius: 0 0 10px 10px;
    }
    .mypage_dashboard .quart_box .right_info .edit_list .cancel_btn {
        display: block;
        background: #fff;
        line-height: 60px;
        font-size: 18px;
        color: #0c0c0c;
        font-weight: 500;
        border-radius: 15px;
        text-align: center;
        margin-top: 15px;
        overflow: hidden;
    }
    .mypage_dashboard .quart_box .right_info .edit_list .cancel_btn:hover {
        background: #fff;
    }
}
@media (max-width: 480px) {
    .mypage_dashboard .quart_box {
        padding: 28px 0;
    }
    .mypage_dashboard .quart_box .left_info .text_box .name_box {
        font-size: 18px;
    }
    .mypage_dashboard .quart_box .left_info .text_box .level_text {
        font-size: 13px;
        margin-top: 10px;
    }
    .mypage_dashboard .quart_box .right_info .edit_list li a {
        font-size: 16px;
        line-height: 49px;
    }
    .mypage_dashboard .quart_box .right_info .edit_list .cancel_btn {
        font-size: 16px;
        line-height: 49px;
        border-radius: 2.5px;
        margin-top: 6px;
    }
}

.profil_wrap {
    display: none;
}
.profil_wrap.reg_profile {
    display: block !important;
}
.profil_wrap .profil_container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1002; /* 사이트 헤더(.at-header z-index:1000)보다 위, 딤 배경(.profil_bg 1001)보다 위 */
    width: 620px;
    max-width: 100%;
    background: #fff;
    border-radius: 20px;
    padding: 30px 30px;
    display: flex;
    flex-direction: column;
}
.profil_wrap .profil_close {
    width: 100%;
    display: flex;
    align-items: flex-end;
    margin-bottom: 20px;
}
@media (max-width: 991px) {
    .profil_wrap .profil_close {
        margin-bottom: 0;
    }
}
.profil_wrap .profil_close .profil_close_btn {
    display: block;
    width: 20px;
    height: 20px;
    position: relative;
    flex-grow: 1;
}
@media (max-width: 991px) {
    .profil_wrap .profil_close .profil_close_btn {
        width: 15px;
        height: 15px;
    }
}
.profil_wrap .profil_close .profil_close_btn span {
    display: block;
    width: 100%;
    height: 100%;
}
.profil_wrap .profil_close .profil_close_btn span::before {
    content: "";
    display: block;
    width: 1px;
    height: 21px;
    background: #cfcfcf;
    position: absolute;
    top: 0;
    right: 10px;
    transform: rotate(-45deg);
}
.profil_wrap .profil_close .profil_close_btn span::after {
    content: "";
    display: block;
    width: 1px;
    height: 21px;
    background: #cfcfcf;
    position: absolute;
    top: 0;
    right: 10px;
    transform: rotate(45deg);
}
@media (max-width: 991px) {
    .profil_wrap .profil_close .profil_close_btn span::before {
        height: 17.5px;
        width: 2px;
    }
    .profil_wrap .profil_close .profil_close_btn span::after {
        height: 17.5px;
        width: 2px;
    }
}
.profil_wrap .profil_box .title {
    background: #f7f7f7; /* surface-soft 톤 — 파일 내 기존 hover 배경과 동일(임의 신규색 아님) */
    border-radius: 13px;
    padding: 16px 20px;
}
.profil_wrap .profil_box .title h2 {
    font-size: 30px;
    color: #0c0c0c;
    font-weight: 600;
}
.profil_wrap .profil_box .profil_cont .profil_img {
    position: relative;
    margin: 40px auto 60px;
    width: 220px;
}
.profil_wrap .profil_box .profil_cont .profil_img .img_container {
    width: 100%;
    height: 220px;
    border-radius: 50%;
    overflow: hidden;
}
.profil_wrap .profil_box .profil_cont .profil_img .img_container img {
    display: block;
    width: 100%;
}
.profil_wrap .profil_box .profil_cont .profil_img .img_file {
    position: absolute;
    bottom: 0;
    right: 0;
}
.profil_wrap .profil_box .profil_cont .profil_img .img_file .add_file {
    display: block;
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 5px 40px rgba(0, 0, 0, 0.1);
}
.profil_wrap .profil_box .profil_cont .profil_img .img_file .add_file img {
    width: 100%;
}
.profil_wrap .profil_box .profil_cont .profil_txt {
    text-align: center;
}
.profil_wrap .profil_box .profil_cont .profil_txt p {
    font-size: 17px;
    color: #0c0c0c;
    font-weight: 400;
    line-height: 32px;
}
.profil_wrap .profil_box .profil_cont .profil_btn {
    margin-top: 40px;
    display: flex;
    align-items: center;
}
.profil_wrap .profil_box .profil_cont .profil_btn .pbtn {
    width: 49.108%;
    height: 53px;
    line-height: 51px;
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    border: 0;
    border-radius: 5px;
    background: var(--main-btn-point-color);
    text-align: center;
}
.profil_wrap .profil_box .profil_cont .profil_btn .pbtn.profil_none {
    border: 1px solid #dcdcdc;
    color: #0c0c0c;
    background: #fff;
    margin-left: 1.784%;
}
@media (max-width: 991px) {
    .profil_wrap .profil_box .profil_cont .profil_btn .pbtn + .pbtn {
        margin-left: 1.56%;
    }
}
.profil_wrap .add_box {
    display: none;
    width: 170px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 82px;
}
.profil_wrap .add_box .add_ul {
    width: 170px;
    max-width: 100%;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 5px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 1;
}
.profil_wrap .add_box .add_ul::before {
    content: "";
    display: block;
    border: 16px solid #fff;
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    border-left: 0;
    border-bottom: 0;
}
.profil_wrap .add_box .add_ul li {
    text-align: center;
    font-size: 14px;
    color: #0c0c0c;
    font-weight: 400;
    line-height: 50px;
    position: relative;
    z-index: 2;
}
.profil_wrap .add_box .add_ul li a {
    display: block;
    width: 100%;
}
.profil_wrap .add_box .add_ul:hover::before {
    border-color: #e8edf3;
}
.profil_wrap .add_box .add_ul:hover li {
    background: #e8edf3;
}
.profil_wrap .add_box .add_ul:hover li a {
    color: var(--main-box-font-color);
}
.profil_wrap .add_box .add_ul .edit_li label {
    width: 100%;
    cursor: pointer;
}
.profil_wrap .add_box .add_ul .edit_li input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
}
/* 프로필 이미지 삭제 텍스트 → X아이콘 전환(승민 지시, del_address 패턴 재사용). 단일 액션이라 접근성은 title/aria-label로 유지 */
.profil_wrap .add_box .add_ul li.delete_img a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 9px auto;
    border-radius: 8px;
    background-color: transparent;
    transition: background-color 150ms ease;
}
.profil_wrap .add_box .add_ul li.delete_img a:hover {
    background-color: #f7f7f7; /* 디자인시스템 --fp-surface-soft 미러링 */
}
.profil_wrap .add_box .add_ul li.delete_img .ico_x {
    position: relative;
    width: 16px;
    height: 16px;
}
.profil_wrap .add_box .add_ul li.delete_img .ico_x::before,
.profil_wrap .add_box .add_ul li.delete_img .ico_x::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 1px;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background-color: #999999;
    transition: background-color 150ms ease;
}
.profil_wrap .add_box .add_ul li.delete_img .ico_x::before {
    transform: rotate(45deg);
}
.profil_wrap .add_box .add_ul li.delete_img .ico_x::after {
    transform: rotate(-45deg);
}
.profil_wrap .add_box .add_ul li.delete_img a:hover .ico_x::before,
.profil_wrap .add_box .add_ul li.delete_img a:hover .ico_x::after {
    background-color: #cf202f; /* 디자인시스템 --fp-error 미러링 */
}
@media (max-width: 991px) {
    .profil_wrap .profil_container {
        width: 95%;
        padding: 15px 15px 30px;
        border-radius: 10px;
    }
    .profil_wrap .profil_box .title h2 {
        font-size: 21px;
    }
    .profil_wrap .profil_box .profil_cont .profil_img {
        width: 150px;
        margin: 16px auto 30px;
    }
    .profil_wrap .profil_box .profil_cont .profil_img .img_container {
        height: 150px;
    }
    .profil_wrap .profil_box .profil_cont .profil_img .img_file .add_file {
        width: 35px;
        height: 35px;
    }
    .profil_wrap .profil_box .profil_cont .profil_img .img_file .add_file img {
        display: block;
        width: 100%;
    }
    .profil_wrap .profil_box .profil_cont .profil_txt p {
        font-size: 17px;
        line-height: 22px;
    }
    .profil_wrap .profil_box .profil_cont .profil_btn {
        margin-top: 30px;
    }
    .profil_wrap .profil_box .profil_cont .profil_btn .pbtn {
        height: 50px;
        line-height: 48px;
        font-size: 16px;
        border-radius: 2.5px;
    }
    .profil_wrap .add_box {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 100;
        transform: none;
        top: unset;
    }
    .profil_wrap .add_box .add_ul {
        position: absolute;
        top: unset;
        bottom: 55px;
        left: 0;
        z-index: 10;
        box-shadow: 0 0 0;
        transform: none;
        background: transparent;
        width: calc(100% - 30px);
        left: 15px;
    }
    .profil_wrap .add_box .add_ul::before {
        display: none;
    }
    .profil_wrap .add_box .add_ul li a {
        border: 1px solid #bababa;
        display: block;
        background: #dcdcdc;
        line-height: 60px;
        font-size: 18px;
        color: #777;
        font-weight: 400;
        text-align: center;
        border-top: 1px solid #bababa;
        border-top: 0;
    }
    .profil_wrap .add_box .add_ul li a:hover {
        color: #222;
        background: #e7e7e7;
    }
    .profil_wrap .add_box .add_ul li label {
        display: block;
        background: #dcdcdc;
        line-height: 60px;
        font-size: 18px;
        color: #777;
        font-weight: 400;
        text-align: center;
        border-top: 1px solid #bababa;
        border-top: 0;
    }
    .profil_wrap .add_box .add_ul li label:hover {
        color: #222;
        background: #e7e7e7;
    }
    .profil_wrap .add_box .add_ul li:hover {
        background: transparent;
    }
    .profil_wrap .add_box .add_ul li.edit_li {
        border-radius: 10px 10px 0 0;
        overflow: hidden;
    }
    .profil_wrap .add_box .add_ul li.delete_img a {
        border-radius: 0 0 10px 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 60px;
        line-height: normal;
        margin: 0;
    }
    .profil_wrap .add_box .add_ul li.delete_img .ico_x::before,
    .profil_wrap .add_box .add_ul li.delete_img .ico_x::after {
        background-color: #777; /* 모바일 액션시트 기본 텍스트색과 통일 */
    }
    .profil_wrap .add_box .add_ul .cancel_btn {
        display: block;
        background: #fff;
        line-height: 60px;
        font-size: 18px;
        color: #1b1b1b;
        font-weight: 500;
        border-radius: 15px;
        text-align: center;
        margin-top: 15px;
        overflow: hidden;
    }
    .profil_wrap .add_box .add_ul .cancel_btn:hover {
        background: #fff;
    }
}
@media (max-width: 480px) {
    .profil_wrap .profil_box .title h2 {
        font-size: 18px;
    }
    .profil_wrap .profil_box .profil_cont .profil_img {
        width: 130px;
        margin: 13px auto 30px;
    }
    .profil_wrap .profil_box .profil_cont .profil_img .img_container {
        height: 130px;
    }
    .profil_wrap .profil_box .profil_cont .profil_txt p {
        font-size: 13px;
    }
    .profil_wrap .profil_box .profil_cont .profil_btn .pbtn {
        font-size: 14px;
    }
    .profil_wrap .add_box .add_ul li a {
        line-height: 49px;
        font-size: 16px;
    }
    .profil_wrap .add_box .add_ul li label {
        line-height: 49px;
        font-size: 16px;
    }
    .profil_wrap .add_box .add_ul .cancel_btn {
        display: block;
        background: #fff;
        line-height: 49px;
        font-size: 16px;
        color: #1b1b1b;
        font-weight: 500;
        border-radius: 15px;
        text-align: center;
        margin-top: 15px;
        overflow: hidden;
        border-radius: 2.5px;
        margin-top: 5px;
    }
}

.profil_bg {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001; /* 사이트 헤더(.at-header z-index:1000)까지 덮도록 상향 — 기존 10이면 헤더 위에 안 덮였음 */
}
/* 마이페이지 좌측 윙 — 사용: 마이페이지·주문내역·교환반품 (mypage_wing.php) */
.mypage_wing {
    width: auto;
    display: flex;
    gap: 50px;
}
.mypage_wing .mypage-sections01 {
    width: 200px;
    --mp-radius-menu: 26px;      /* 메뉴 컨테이너 카드 radius(디자인시스템 --fp-rc) 미러링 */
    --mp-radius-item: 13px;      /* 항목(li) radius — 활성 배경 기준값(--fp-r)으로 통일, 비활성도 동일 적용 */
    --mp-surface-soft: #f7f7f7;  /* hover 배경(디자인시스템 --fp-surface-soft) 미러링 */
}
.mypage_wing .mypage-sections01 h1 {
    /* 30px → 24px: 우측 컨텐츠 흰 섹션(주문내역 기준 top offset 60px)과 좌측 메뉴 흰 카드 시작선을 같은 레벨로 맞춤(승민 요청) */
    margin-bottom: 24px;
    font-size: 28px;
    font-weight: 500;
    color: var(--main-font-color);
}
.mypage_wing .mypage-sections01 ul {
    width: 100%;
    display: block;
    border: 1px solid #f2f2f2;
    border-radius: var(--mp-radius-menu);
    /* overflow:hidden 미사용 — 화살표 아이콘이 모서리 곡선에 클리핑되는 문제로 first/last-child 개별 radius 매칭 방식으로 전환 */
}
.mypage_wing .mypage-sections01 ul li {
    height: 50px;
    line-height: 48px;
    padding: 0 20px;
    background-color: #fff;
    border-bottom: 1px solid #f2f2f2;
    transition: background-color 150ms ease, color 150ms ease;
    display: flex;
    align-items: center;
}
.mypage_wing .mypage-sections01 ul li:first-child {
    border-top-left-radius: var(--mp-radius-item);
    border-top-right-radius: var(--mp-radius-item);
}
.mypage_wing .mypage-sections01 ul li:last-child {
    border-bottom: none;
    border-bottom-left-radius: var(--mp-radius-item);
    border-bottom-right-radius: var(--mp-radius-item);
}
.mypage_wing .mypage-sections01 ul li a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    font-size: 15px;
    font-weight: 400;
    color: var(--main-box-font-color3);
    line-height: 1.5;
}
.mypage_wing .mypage-sections01 ul li a span {
    /* 코너 1개 기법 — 선 2개를 따로 정렬하지 않고 한 박스의 우측+하단 변만 그려 통째로 회전.
       두 변이 애초에 같은 박스의 한 꼭짓점이라 이음새가 서브픽셀로 어긋날 일이 없음 */
    width: 6px;
    height: 6px;
    display: block;
    border-right: 1px solid var(--main-box-font-color3);
    border-bottom: 1px solid var(--main-box-font-color3);
    transform: rotate(-45deg);
    transition: border-color 150ms ease;
}
.mypage_wing .mypage-sections01 ul li:hover a {
    color: var(--main-btn-font-point-color);
}
.mypage_wing .mypage-sections01 ul li:hover a span {
    border-color: var(--main-btn-line-point-color);
}
/* 2026-08-06 (주)파이브센스_FIVESENSES.Corp. [RepurchaseRecentItems] Round13 — 주문내역/최근구매/
   마이아이템 3개 메뉴 활성표시 통일(승민 지시). 신규 상태 추가라 fivepro-design-system 토큰 사용. */
.mypage_wing .mypage-sections01 ul li.is-active {
    background: var(--fp-surface-soft, #f7f7f7);
}
.mypage_wing .mypage-sections01 ul li.is-active a {
    color: var(--fp-primary-text, var(--main-btn-point-color, #005eff));
    font-weight: 700;
}
.mypage_wing .mypage-sections01 ul li.is-active a span::before,
.mypage_wing .mypage-sections01 ul li.is-active a span::after {
    background: var(--fp-primary-text, var(--main-btn-point-color, #005eff));
}
.mypage_wing .mypage-sections01 ul li.categorys-link.is-active {
    background: var(--main-btn-point-color);
}
.mypage_wing .mypage-sections01 ul li.categorys-link.is-active a {
    color: #fff;
    font-weight: 500;
}
.mypage_wing .mypage-sections01 ul li.categorys-link.is-active a span {
    border-color: #fff;
}
/* 활성/비활성 첫·마지막 항목 radius는 위 :first-child/:last-child의 --mp-radius-item(13px)으로 통일됨 —
   활성 배경(brand fill)이 컨테이너와 같은 26px 곡률을 그대로 쓰면 코너가 텍스트 쪽으로 파고들어 답답해 보였던
   문제로 도입된 값을 비활성에도 동일 적용(승민 요청, 2026-08-08). 이전엔 활성 상태만 별도 13px 오버라이드가
   있었으나 값이 같아져 중복 제거. */
.mypage_wing .mypage-sections02 {
    width: calc(100% - 200px);
    display: table-cell;
}
.mypage_wing .mypage-sections02 section {
    overflow: hidden;
    margin-bottom: 90px;
}
.mypage_wing .mypage-sections02 section .head {
    padding: 0;
    border: none;
    color: #111;
    overflow: hidden;
}
.mypage_wing .mypage-sections02 section .head .orderform_title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 25px;
    font-size: 24px;
    font-weight: 500;
    color: var(--main-box-font-color);
    border-bottom: 1px solid #444;
    line-height: 1em;
}
.mypage_wing .mypage-sections02 section .head .orderform_title a {
    font-size: 15px; /* 17px→15px — 주문현황 요약(.inquirys .pull-right)·point/coupon more-btn과 동일한 "전체보기류" 텍스트버튼 크기로 통일 */
    font-weight: 400;
    color: var(--main-box-font-color2);
}
.mypage_wing .mypage-sections section .body.section-table {
    display: table;
    width: 100%;
}
.mypage_wing .mypage-sections section .body.section-table .section-table-head {
    display: table-header-group;
}
.mypage_wing .mypage-sections section .body.section-table .section-table-body {
    display: table-row-group;
}
.mypage_wing .mypage-sections section .body.section-table .section-table-body .section-table-row {
    display: table-row;
}
.mypage_wing .mypage-sections section .body.section-table .section-table-body .section-cell .img {
    max-width: 100px;
    display: inline-block;
    margin-bottom: 5px;
}
.mypage_wing .mypage-sections section .body.section-table .section-table-body .section-cell .img img {
    width: 100%;
    max-width: 100%;
}
.mypage_wing .mypage-sections section .body.section-table .section-table-body .section-cell.t-left {
    text-align: left;
}

/* 마이페이지 메뉴 경유 진입 시 좌측메뉴 유지 wrap — cart/wishlist/itemuselist/qalist/faq 공통 재사용 */
.mypage_entry_wrap {
    display: flex;
    gap: 50px;
}
.mypage_entry_wrap .mypage_entry_content {
    width: calc(100% - 200px);
}
@media (max-width: 991px) {
    .mypage_entry_wrap {
        display: block;
        gap: 0;
    }
    .mypage_entry_wrap .mypage_entry_content {
        width: 100%;
    }
}

.mypage_style ul,
.mypage_style li,
.mypage_style ol {
    list-style: none;
}
.mypage_style .mypage-table .mypage-sections.mypage_sections .section_table .section-table-head .section-cell {
    display: table-cell;
    text-align: center;
    font-size: 16px; /* 13px→16px, 온라인견적문의(.oc_wrap th) 원복 기준으로 재통일(승민 최종결정) */
    color: var(--main-box-font-color4);
    font-weight: 500;
    line-height: 1em;
    border-bottom: 1px solid #eee;
    padding: 22px 0;
}
.mypage_style .mypage-table .mypage-sections.mypage_sections .section_table .section-table-body .section-cell {
    display: table-cell;
    font-size: 16px;
    color: var(--main-box-font-color2);
    font-weight: 400;
    border-bottom: 1px solid #eee;
    padding: 22px 0;
    text-align: center;
}
.mypage_style .mypage-table .mypage-sections.mypage_sections .section_table .section-table-body .section-cell a {
    color: var(--main-box-font-color2);
}
.mypage_style .mypage-table .mypage-sections.mypage_sections .section_table {
    table-layout: fixed;
}
.mypage_style .mypage-table .mypage-sections.mypage_sections .section_table .section-cell {
    width: 25%;
    vertical-align: middle;
}
.mypage_style .mypage-table .mypage-sections.mypage_sections .section_table .section-table-body .section-cell:not(.od_it_info):not(.od_date):not(.od_num):not(.od_price):not(.od_status) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mypage_style .mypage-table .mypage-sections.mypage_sections .section_table .section-cell.od_it_info {
    width: 20%;
}
.mypage_style .mypage-table .mypage-sections.mypage_sections .section_table .section-cell.od_it_info .description {
    display: block;
    overflow: hidden;
}
.mypage_style .mypage-table .mypage-sections.mypage_sections .section_table .section-cell.od_it_info .description p {
    font-size: 14px;
    margin-top: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mypage_style .mypage-table .mypage-sections.mypage_sections .section_table .section-cell.od_it_info .description p + p {
    margin-top: 5px;
}
.mypage_style .mypage-table .mypage-sections.mypage_sections .section_table .section-cell.od_date {
    width: 20%;
}
.mypage_style .mypage-table .mypage-sections.mypage_sections .section_table .section-cell.od_num {
    position: relative;
    width: 20.95%;
}
.mypage_style .mypage-table .mypage-sections.mypage_sections .section_table .section-cell.od_num button.order_cancel {
    border-radius: 5px !important;
    margin-top: 10px;
    padding: 8px;
    background: var(--main-btn-point-color);
    border-color: var(--main-btn-line-point-color);
    outline: none;
}

.mypage_style .mypage-table .mypage-sections.mypage_sections .section_table .section-cell.od_num .input-group button {
    background: var(--main-btn-point-color);
    border-color: var(--main-btn-line-point-color);
}
.mypage_style .mypage-table .mypage-sections.mypage_sections .section_table .section-cell.od_num .input-group input:focus {
    border-color: var(--main-box-line-point-color);
    box-shadow: none;
}
.mypage_style
    .mypage-table
    .mypage-sections.mypage_sections
    .section_table
    .section-cell.od_num
    #sod_fin_cancelfrm_0
    .mypage_style
    .mypage-table
    .mypage-sections.mypage_sections
    .section_table
    .section-cell.od_price {
    width: 18.57%;
}
.mypage_style .mypage-table .mypage-sections.mypage_sections .section_table .section-cell.od_status {
    width: 20.95%;
}
.mypage_style .mob_mypage {
    display: none;
}
.mypage_style .mob_mypage .mob_section01 .myicon_list a span.cart_count {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--main-box-point-color);
    text-align: center;
    line-height: 14.5px;
    font-size: 9px;
    font-weight: 500;
    color: #fff;
    position: absolute;
    right: 1px;
    bottom: -4px;
}
@media (max-width: 991px) {
    .mypage_style .pc_mypage {
        display: none;
    }
    .mypage_style .mob_mypage {
        display: block;
    }
    .mypage_style .mob_mypage .mob_section .mob_container {
        padding: 40px 15px 20px;
    }
    .mypage_style .mob_mypage .mob_section .section_tit h1 {
        font-size: 20px;
        color: var(--main-box-font-color);
        font-weight: 600;
        margin-bottom: 15px;
    }
    .mypage_style .mob_mypage .mob_section .section_li a {
        display: flex;
        align-items: center;
        padding: 20px 0;
        position: relative;
        border-bottom: 1px solid #e1e1e1;
    }
    .mypage_style .mob_mypage .mob_section .section_li a .list_name {
        flex-grow: 1;
        font-size: 16px;
        color: var(--main-box-font-color);
        font-weight: 400;
    }
    .mypage_style .mob_mypage .mob_section .section_li a .more_btn {
        font-size: 15px;
        color: var(--main-btn-font-point-color);
        font-weight: 400;
    }
    .mypage_style .mob_mypage .mob_section .section_li a .more_btn .more_txt {
        font-size: 17px;
    }
    .mypage_style .mob_mypage .mob_section .section_li a .arrow_span {
        position: relative;
        right: 10px;
        margin-left: 35px;
    }
    .mypage_style .mob_mypage .mob_section .section_li a .arrow_span::before {
        content: "";
        display: block;
        width: 2px;
        height: 10px;
        background: #666;
        position: absolute;
        top: 5px;
        right: 0;
        transform: rotate(-45deg);
    }
    .mypage_style .mob_mypage .mob_section .section_li a .arrow_span::after {
        content: "";
        display: block;
        width: 2px;
        height: 10px;
        background: #666;
        position: absolute;
        top: 10px;
        right: 0;
        transform: rotate(45deg);
    }
    .mypage_style .mob_mypage .mob_section .section_li:last-child a {
        border-bottom: 0;
    }
    .mypage_style .mob_mypage .mob_section01 .mob_container {
        padding: 40px 0;
    }
    .mypage_style .mob_mypage .mob_section01 .mob_myicon {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 50px;
    }
    .mypage_style .mob_mypage .mob_section01 .myicon_list a {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .mypage_style .mob_mypage .mob_section01 .myicon_list a span {
        display: block;
    }
    .mypage_style .mob_mypage .mob_section01 .myicon_list a span.icon_box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 65px;
        height: 65px;
        border-radius: 20px;
        position: relative;
    }
    .mypage_style .mob_mypage .mob_section01 .myicon_list a span.icon_box img {
        height: 35px;
    }
    .mypage_style .mob_mypage .mob_section01 .myicon_list a span.icon_txt {
        font-size: 16px;
        color: var(--main-box-font-color);
        font-weight: 400;
        margin-top: 15px;
    }
    .mypage_style .mob_mypage .mob_section01 .myicon_list a span.cart_count {
        display: block;
        width: 13.5px;
        height: 13.5px;
        font-size: 10px;
        font-weight: 600;
        line-height: 13px;
        bottom: 11px;
        right: 12px;
    }
    .mypage_style .mob_mypage .mob_section04 .mob_container {
        padding: 0 15px;
    }
    .mypage_style .mob_mypage .mob_section04::after {
        content: "";
        display: none;
        width: 100%;
        height: 70px;
        background: #eff2f5;
    }
    /* 주문현황 요약(모바일) — PC(.pc_mypage .inquirys)와 동일한 데이터를 모바일 카드 톤으로 재구성(승민 요청) */
    .mypage_style .mob_mypage .mob_section01b .mob_inquirys_tit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
    }
    .mypage_style .mob_mypage .mob_section01b .mob_inquirys_tit span {
        font-size: 20px;
        color: var(--main-box-font-color);
        font-weight: 600;
    }
    .mypage_style .mob_mypage .mob_section01b .mob_inquirys_tit a {
        font-size: 14px;
        font-weight: 400;
        color: var(--main-box-font-color2);
    }
    .mypage_style .mob_mypage .mob_section01b .mob_inquiry_cnt_wrap {
        display: flex;
        gap: 6px;
    }
    .mypage_style .mob_mypage .mob_section01b .mob_inquiry_box {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 14px 2px;
        border-radius: 13px;
        background-color: #f7f8fa;
        text-align: center;
        transition: background-color 150ms ease, border-radius 150ms ease;
        -webkit-tap-highlight-color: transparent;
    }
    /* Round-LinkFilter(모바일) — div에서 a로 전환된 요약박스의 터치 피드백. PC(.pc_mypage .inquirys
       .inquiry-box:hover, 7ea29c2f)와 동일한 bg+radius 트랜지션 원칙을 모바일 톤(#f7f8fa 기준)과
       이 파일의 기존 모바일 hover/active 결합 패턴(8546·8553행)에 맞춰 적용 */
    .mypage_style .mob_mypage .mob_section01b .mob_inquiry_box:hover,
    .mypage_style .mob_mypage .mob_section01b .mob_inquiry_box:active {
        background-color: #eef0f4;
        border-radius: 16px;
    }
    .mypage_style .mob_mypage .mob_section01b .mob_inquiry_box .number {
        font-size: 17px;
        font-weight: 600;
        color: var(--main-box-font-point-color);
        font-variant-numeric: tabular-nums;
    }
    .mypage_style .mob_mypage .mob_section01b .mob_inquiry_box .number.zero {
        color: #cccccc;
    }
    .mypage_style .mob_mypage .mob_section01b .mob_inquiry_box .type {
        font-size: 12px;
        font-weight: 500;
        color: #777777;
        line-height: 1.3;
        word-break: keep-all;
    }
}
@media (max-width: 480px) {
    .mypage_style .mob_mypage .mob_section .mob_container {
        padding: 32px 15px 7px;
    }
    .mypage_style .mob_mypage .mob_section .section_tit h1 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    .mypage_style .mob_mypage .mob_section .section_li a .more_btn .more_txt {
        font-size: 14px;
    }
    .mypage_style .mob_mypage .mob_section .section_li a .arrow_span {
        margin-left: 20px;
        right: 4px;
    }
    .mypage_style .mob_mypage .mob_section .section_li a .arrow_span::before {
        width: 1px;
        height: 7px;
        top: 4px;
    }
    .mypage_style .mob_mypage .mob_section .section_li a .arrow_span::after {
        width: 1px;
        height: 7px;
        top: 8.5px;
    }
    .mypage_style .mob_mypage .mob_section01 .mob_container {
        padding: 25px 0 30px;
    }
    .mypage_style .mob_mypage .mob_section01 .mob_myicon {
        gap: 61px;
    }
    .mypage_style .mob_mypage .mob_section01 .myicon_list a span.icon_box {
        width: 50px;
        height: 50px;
        border-radius: 13px;
    }
    .mypage_style .mob_mypage .mob_section01 .myicon_list a span.icon_box img {
        height: 28px;
    }
    .mypage_style .mob_mypage .mob_section01 .myicon_list a span.icon_txt {
        font-size: 15px;
        margin-top: 0px;
    }
    .mypage_style .mob_mypage .mob_section01b .mob_inquirys_tit span {
        font-size: 18px;
    }
    .mypage_style .mob_mypage .mob_section01b .mob_inquiry_cnt_wrap {
        gap: 4px;
    }
    .mypage_style .mob_mypage .mob_section01b .mob_inquiry_box {
        padding: 12px 1px;
    }
    .mypage_style .mob_mypage .mob_section01b .mob_inquiry_box .number {
        font-size: 16px;
    }
    .mypage_style .mob_mypage .mob_section04 .mob_container {
        padding: 0 15px;
    }
    .mypage_style .mob_mypage .mob_section04::after {
        height: 50px;
    }
}

.none-item {
    font-size: var(--fp-empty-text-size, 14px);
    color: #666;
    font-weight: 400;
    border-bottom: 1px solid #eee;
    padding: 40px 0;
    text-align: center;
}
.none-item img {
    width: var(--fp-empty-icon-size, 41px);
    display: block;
    margin: 0 auto var(--fp-empty-gap, 14px);
}

/* 비밀번호 재확인 — 사용: 마이페이지 진입·주문조회 (password_skin.php) */
.password_confirm {
    width: 100%;
    max-width: 1200px;
    margin: 100px auto;
    background-color: #f9f9f9;
    border-radius: 30px;
    padding: 80px 15px;
}
.password_confirm .confirm_title {
    margin-bottom: 25px;
    text-align: center;
}
.password_confirm .confirm_title > img {
    display: block;
    margin: 0 auto;
}
.password_confirm .confirm_title > h2 {
    margin-top: 20px;
    font-weight: 700;
    font-size: 33px;
    color: #0c0c0c;
}
.password_confirm .confirm_wrap > p {
    margin-bottom: 40px;
    font-size: 17px;
    line-height: 1.7;
    color: #5d5d5d;
    font-weight: 400;
    text-align: center;
}
.password_confirm .confirm_wrap > p strong {
    font-weight: 400;
}
.password_confirm .confirm_wrap > p b {
    font-weight: 700;
    color: #0c0c0c;
}
.password_confirm .confirm_input > label {
    width: 100%;
}
.password_confirm .confirm_input > label > input {
    width: 100%;
    max-width: 460px;
    display: block;
    height: auto;
    padding: 0 15px;
    margin: 0 auto;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    background: url("/img/icon_secret.gif") no-repeat 97% 50%;
    background-color: #fff;
    line-height: 48px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    font-size: 16px;
    font-weight: 400;
    color: #0c0c0c;
}
.password_confirm .confirm_input > label > input:focus {
    border-color: var(--main-box-font-color2);
}
.password_confirm .confirm_input .confirm_btn_box {
    margin-top: 10px;
}
.password_confirm .btn_back {
    margin: 10px auto 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 460px;
    gap: 10px;
}
.password_confirm .btn_back .btn {
    flex: 1;
    border-radius: 10px !important;
    text-align: center;
    color: #5d5d5d;
    font-size: 16px;
    font-weight: 500;
    background-color: #f0f0f0;
    line-height: 1.2em;
    padding: 15.5px 12px;
    transition: 0.2s ease-in-out;
    border: none;
}
.password_confirm .btn_back .btn.btn_confirm {
    color: #fff;
    background-color: transparent;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.password_confirm .btn_back .btn.btn_confirm::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--main-btn-point-color);
    z-index: -1;
    transition: filter 0.2s ease-in-out;
}

@media (max-width: 991px) {
    .password_confirm {
        padding: 133px 53px;
        border-radius: 15px;
        margin: 50px auto;
    }
    .password_confirm .confirm_title {
        margin-bottom: 29px;
    }
    .password_confirm .confirm_title img {
        height: 53px;
    }
    .password_confirm .confirm_title > h2 {
        font-size: 26px;
        margin-top: 24px;
    }
    .password_confirm .confirm_wrap > p {
        font-size: 15px;
        line-height: 1.53;
    }
    .password_confirm .confirm_input > label > input {
        border-radius: 6px;
        font-size: 13px;
        line-height: 47px;
        padding: 0 18px;
    }

    .password_confirm .confirm_input > label > input:focus {
        border-color: #000;
    }
    .password_confirm .btn_back {
        margin: 17px auto 0;
        gap: 15px;
    }
    .password_confirm .btn_back .btn {
        font-size: 15px;
        border-radius: 6px !important;
        padding: 13px;
    }
}

/* 개인정보 수정 — 사용: 회원정보 수정 (member_confirm.php·register_form.php) */
.mypassword_confirm {
    width: 100%;
    display: flex;
    gap: 50px;
}
.mypassword_confirm .password_wrap {
    width: calc(100% - 200px);
}
.mypassword_confirm .password_wrap .orderform_title p {
    margin-top: 10px;
    font-size: 13px;
    color: #666;
    font-weight: 400;
    line-height: 1.5;
}
.mypassword_confirm .password_wrap .orderform_title p strong {
    color: #222;
    font-weight: 500;
    font-size: 16px;
}
.mypassword_confirm .password_wrap .confirm_wrap {
    width: 600px;
    max-width: 100%;
    margin: 40px auto 0;
}
@media (max-width: 991px) {
    .mypassword_confirm {
        gap: 0;
        margin-top: 50px;
    }
    .mypassword_confirm .password_wrap {
        width: 100%;
    }
}
@media (max-width: 480px) {
    .mypassword_confirm .password_wrap .orderform_title p {
        font-size: 13px;
    }
    .mypassword_confirm .password_wrap .orderform_title p strong {
        font-size: 14px;
    }
    .mypassword_confirm .password_wrap .confirm_wrap {
        margin: 20px auto 0;
    }
    .mypassword_confirm .password_wrap .confirm_wrap p {
        font-size: 14px;
    }
    .mypassword_confirm .password_wrap .confirm_wrap .confirm_input input {
        line-height: 39px;
        border-radius: 3px;
    }
    .mypassword_confirm .password_wrap .confirm_wrap .confirm_input .confirm_btn_box .btn_confirm {
        font-size: 13px;
        line-height: 39px;
        border-radius: 3px;
    }
    .mypassword_confirm .password_wrap .btn_back a {
        font-size: 14px;
    }
}

.register_style.edit_mem {
    gap: 50px;
}
.register_style.edit_mem .register_content {
    width: calc(100% - 200px);
}
.register_style.edit_mem .register_content .mypage_register {
    width: 100%;
}
.register_style.edit_mem .mypage_register {
    width: calc(100% - 200px);
}
.register_style.edit_mem .mypage_register .profil_wrap .profil_box {
    margin: 40px 0;
}
.register_style.edit_mem .mypage_register .profil_wrap .profil_box .profil_cont .profil_img {
    margin: 0 auto;
    width: 120px;
}
.register_style.edit_mem .mypage_register .profil_wrap .profil_box .profil_cont .profil_img .img_container {
    padding-bottom: 100%;
    height: 0;
}
.register_style.edit_mem .mypage_register .profil_wrap .profil_box .profil_cont .profil_img .img_file {
    right: 7px;
    bottom: 4px;
}
.register_style.edit_mem .mypage_register .profil_wrap .profil_box .profil_cont .profil_img .img_file .add_file {
    background: var(--main-box-point-color);
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 991px) {
    .register_style.edit_mem .mypage_register .profil_wrap .profil_box .profil_cont .profil_img .img_file .add_file {
        width: 30px;
        height: 30px;
    }
}
.register_style.edit_mem .mypage_register .register_tt {
    font-size: 24px;
    font-weight: 500;
    color: var(--main-box-font-color);
    padding-top: 8px;
    padding-bottom: 26px;
    border-bottom: 0; /* 2026-08 마이페이지 좌측상단 타이틀 통일(주문내역 톤) — 테두리 제거 */
    margin-bottom: 40px;
}
.register_style.edit_mem .mypage_register .area-box {
    float: none;
    width: 57.273%;
    margin-right: 0;
    margin: 0 auto;
}
.register_style.edit_mem .mypage_register .area-box .regbtn-wrap {
    width: 240px;
    margin: 60px auto 0;
}
.register_style.edit_mem .mypage_register .area-box .regbtn-wrap #btn_submit {
    height: 60px;
    line-height: 58px;
    border-radius: 5px;
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 0;
}
.register_style.edit_mem .mypage_register .input-box label {
    width: 135px;
    font-weight: 300;
}
.register_style.edit_mem .mypage_register .input-box .sns-wrap-reg {
    width: 100%;
}
.register_style.edit_mem .mypage_register .input-box .re_input_box input {
    width: 100%;
    font-size: 16px;
    color: #333;
    font-weight: 300;
    padding: 0 10px;
    border: 1px solid #d6d6d6;
    height: 46px;
    line-height: 44px;
    border-radius: var(--fp-r, 13px);
}
.register_style.edit_mem .mypage_register .input-box .re_input_box.icon_input {
    margin: 40px 0;
}
.register_style.edit_mem::after {
    display: none;
}

@media (max-width: 991px) {
    .no_container {
        padding: 0;
    }
    .no_container .at-content {
        padding: 0;
    }
    .mypage.container_fix .at-content {
        padding: 0;
    }
    .register_style.edit_mem {
        gap: 0;
    }
    .register_style.edit_mem .register_content {
        width: 100%;
    }
    .register_style.edit_mem .mypage_register {
        width: 100%;
    }
    .register_style.edit_mem .mypage_register .area-box {
        width: 100%;
    }
    .register_style.edit_mem .mypage_register .area-box .regbtn-wrap {
        width: 180px;
        margin: 50px auto 0;
    }
    .register_style.edit_mem .mypage_register .area-box .regbtn-wrap #btn_submit {
        height: 50px;
        line-height: 48px;
        font-size: 16px;
    }
    .register_style.edit_mem .mypage_register .input-box label {
        width: 100%;
        margin-bottom: 20px;
        font-weight: 400;
    }
    .register_style.edit_mem .mypage_register .input-box .re_input_box {
        width: 100%;
    }
}
@media (max-width: 480px) {
    .register_style.edit_mem .mypage_register .area-box .regbtn-wrap {
        width: 160px;
    }
    .register_style.edit_mem .mypage_register .area-box .regbtn-wrap #btn_submit {
        height: 40px;
        line-height: 38px;
        font-size: 13px;
    }
    .register_style.edit_mem .mypage_register .input-box label {
        font-size: 14px;
        margin-bottom: 5px;
    }
    .register_style.edit_mem .mypage_register .input-box .re_input_box input {
        font-size: 12px;
        padding: 0 12px;
        height: 40px;
        line-height: 38px;
    }
    .register_style.edit_mem .mypage_register .input-box .re_input_box.icon_input {
        margin: 40px 0;
    }
}
/* 마이페이지 공통 제목 */
.orderform_title {
    padding-bottom: 25px;
    font-size: 24px;
    font-weight: 500;
    color: var(--main-box-font-color);
    border-bottom: 1px solid #444;
    line-height: 1em;
}
/* 2026-08 (주)파이브센스_FIVESENSES.Corp. 마이페이지 좌측상단 타이틀 통일(주문내역 톤) — orderinquiry_tt 변형은 테두리 없이 노출.
   찜한상품/나의 후기/1:1 문의/쿠폰내역이 공유하는 .orderform_title.orderinquiry_tt 조합에 적용(쿠폰내역은 기존 page-scoped
   규칙이 더 구체적이라 그대로 유지, 나머지 페이지는 이 규칙으로 통일). */
.orderform_title.orderinquiry_tt {
    border-bottom: 0;
    /* 좌측 메뉴 흰 카드 시작선(마이페이지 경유 기준)과 우측 컨텐츠 흰 섹션 시작선을 같은 레벨로 맞춤(승민 요청) */
    margin-bottom: 12px;
}
/* sense:PATCH FIVESENSES.Corp. [MobileCartFixedUX] 장바구니 직접 진입(비-mypage) 시 상단에 뜨는 "장바구니" 타이틀(sub_text,
   page/top_banner.php)을 모바일에서만 숨김(승민 요청) — 데스크톱은 그대로 유지, mypage=1 경유는 top_banner.php에서
   이미 sub_text 자체를 생략하므로 이 규칙과 무관. */
@media (max-width: 991px) {
    .sub_text.cart_sub_text {
        display: none;
    }
}
/* 쿠폰내역/선물하기쿠폰(모바일 전용 타이틀) — .coupon_wrap .coupon_content .orderform_title(margin-bottom:0, PC 전용
   page-scoped 규칙)보다 더 구체적으로 재정의해 다른 마이페이지 하위 페이지와 동일한 12px 여백으로 통일(승민 요청) */
@media (max-width: 991px) {
    .coupon_wrap .coupon_content .orderform_title.orderinquiry_tt {
        display: block;
        margin-bottom: 12px;
    }
}
/* 배송지관리/적립금이 쓰는 .point_title 변형 — 기본 .orderform_title(보더+패딩)로 인해 좌측 메뉴보다 높이가 더 커서
   같은 취지로 별도 보정값 적용 */
.orderform_title.point_title {
    margin-bottom: 8px;
}
.left_tit {
    width: 115px;
    line-height: 38px;
    font-size: 16px;
    font-weight: 300;
    color: var(--main-box-font-color2);
}
@media (max-width: 991px) {
    .orderform_title {
        border: none;
        text-align: center;
        padding: 20px 0 35px;
        margin-bottom: 9px;
    }
    .left_tit {
        line-height: 32px;
        width: 85px;
        font-weight: 400;
    }
}

.right_tit {
    line-height: 38px;
    font-size: 16px;
    font-weight: 300;
    color: var(--main-box-font-color);
}
@media (max-width: 991px) {
    .right_tit {
        line-height: 32px;
        font-weight: 400;
        width: calc(100% - 85px);
    }
}
.right_tit span {
    margin-left: -4px;
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
마이페이지 > 온라인견적서
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
.online_contact_wrap {
    width: 100%;
    display: flex;
    gap: 50px;
}
.online_contact_wrap .online_contact_content {
    width: calc(100% - 200px);
}
/* 2026-08 (주)파이브센스_FIVESENSES.Corp. 좌측상단 타이틀 통일(주문내역 톤) — 테두리 제거 */
.orderform_title.online_contact_tt {
    border-bottom: 0;
    /* 좌측 메뉴 흰 카드 시작선과 레벨을 맞춤(승민 요청, .orderinquiry_tt와 동일 값) */
    margin-bottom: 12px;
}
.online_contact_wrap .oc_wrap {
    margin-bottom: 50px;
}
.online_contact_wrap .oc_wrap tr {
    border-bottom: 1px solid #e1e1e1;
}
.online_contact_wrap .oc_wrap tr:last-child {
    border-bottom: 0;
}
.online_contact_wrap .oc_wrap th {
    color: var(--main-box-font-color4);
    font-size: 16px;
    font-weight: 500;
    line-height: 1em;
    padding: 21.25px 0;
    text-align: center;
}
.online_contact_wrap .oc_wrap .name_txt {
    width: 50%;
}
.online_contact_wrap .oc_wrap .date_txt {
    width: 15%;
}
.online_contact_wrap .oc_wrap .ca_txt {
    width: 15%;
}
.online_contact_wrap .oc_wrap .status_txt {
    position: relative;
    text-align: center;
    width: 20%;
}
.online_contact_wrap .oc_wrap th .icon_box {
    display: inline-block;
}
.online_contact_wrap .oc_wrap th .icon_box img {
    position: relative;
    transform: translateY(3px);
    display: block;
}
.online_contact_wrap .oc_wrap td {
    color: var(--main-box-font-color2);
    font-size: 16px;
    line-height: 1em;
    padding: 21.25px 0;
    text-align: center;
}
.online_contact_wrap .oc_wrap td.name_txt {
    color: var(--main-box-font-color);
    text-align: left;
}
.online_contact_wrap .oc_wrap td.name_txt a {
    color: var(--main-box-font-color);
    padding-left: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.online_contact_wrap .oc_wrap .status_txt span {
    font-size: 12px;
    font-weight: 500;
    line-height: 1em;
    padding: 5px 7px;
    border-radius: 3px;
}
.online_contact_wrap .oc_wrap .status_txt span.green_sc {
    color: #1bc75c;
    background-color: #e4f9ec;
}
.online_contact_wrap .oc_wrap .status_txt span.blue_sc {
    color: #18a5ff;
    background-color: #e6f5ff;
}
.online_contact_wrap .oc_wrap .status_txt span.purple_sc {
    color: #7145e4;
    background-color: #f2eefd;
}
.online_contact_wrap .oc_wrap .status_txt span.red_sc {
    color: #ff657f;
    background-color: #ffeeec;
}
.online_contact_wrap .oc_wrap .status_txt span.gray_sc {
    color: #9d9d9d;
    background-color: #f4f4f4;
}
.online_contact_wrap .oc_wrap .status_caption {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    text-align: left;
    transition: all 0.5s;
}
.online_contact_wrap .oc_wrap .status_txt:hover .status_caption {
    opacity: 1;
    visibility: visible;
}
.online_contact_wrap .oc_wrap .status_caption p {
    color: #5d5d5d;
    font-size: 14px;
    line-height: 22px;
    white-space: nowrap;
    font-weight: 400;
}
.online_contact_wrap .oc_wrap .status_caption p a {
    color: var(--main-box-font-point-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 14px;
}
@media (max-width: 991px) {
    .online_contact_wrap {
        gap: 0;
    }
    .online_contact_wrap .oc_wrap {
        margin-bottom: 30px;
    }
    .online_contact_wrap .online_contact_content {
        width: 100%;
    }
    .orderform_title.online_contact_tt {
        text-align: center;
        /* 다른 마이페이지 하위 페이지 타이틀(24px/패딩 20px 0 35px)과 동일 톤으로 통일(승민 요청) */
        padding-bottom: 35px;
        font-size: 24px;
    }
    .online_contact_wrap .oc_wrap tr.th_row {
        border-bottom: none;
    }
    .online_contact_wrap .oc_wrap th {
        background-color: #f6f6f6;
        color: #999;
        font-size: 12px;
    }
    .online_contact_wrap .oc_wrap th.name_txt {
        border-radius: 6px 0 0 6px;
    }
    .online_contact_wrap .oc_wrap th.status_txt {
        border-radius: 0 6px 6px 0;
    }
    .online_contact_wrap .oc_wrap th .icon_box img {
        width: 12px;
        transform: none;
    }
    .online_contact_wrap .oc_wrap td .date_txt {
        padding-left: 10px;
        color: var(--main-box-font-color2);
        margin-bottom: 10px;
        display: block;
        width: 100%;
    }
    .online_contact_wrap .oc_wrap td.name_txt a {
        padding-left: 10px;
    }
    .online_contact_wrap .oc_wrap .no_list td {
        font-size: 13px;
        padding: 30px 0;
    }
    .online_contact_wrap .oc_wrap .status_caption {
        left: auto;
        right: 0;
        transform: none;
    }
}
@media (max-width: 480px) {
    .online_contact_wrap .oc_wrap th {
        font-size: 12px;
        padding: 10px 0;
    }
    .online_contact_wrap .oc_wrap .date_txt {
        font-size: 11px;
    }
    .online_contact_wrap .oc_wrap td .date_txt {
        margin-bottom: 5px;
    }
    .online_contact_wrap .oc_wrap td.name_txt a {
        font-size: 13px;
    }
    .online_contact_wrap .oc_wrap .ca_txt {
        font-size: 12px;
    }
    .online_contact_wrap .oc_wrap .status_txt span {
        font-size: 10px;
        padding: 4px 5px;
        white-space: nowrap;
        position: relative;
        top: -3px;
    }
    .online_contact_wrap .oc_wrap td {
        padding: 13.25px 0;
    }
    .online_contact_wrap .oc_wrap th .icon_box img {
        transform: translateY(2px);
    }
    .online_contact_wrap .oc_wrap .status_caption {
        top: 80%;
        padding: 13px;
        border-radius: 2.5px;
    }
    .online_contact_wrap .oc_wrap .status_caption p {
        font-size: 12px;
        line-height: 17px;
    }
}
/* 배송지 관리 — 사용: 마이페이지 배송지 (orderaddress.skin.php) */
.orderaddress_wrap {
    display: flex;
    gap: 50px;
}
.orderaddress_wrap .address_content {
    width: calc(100% - 200px);
}
.orderaddress_wrap .address_content .sod_orderaddr {
    width: 100%;
    display: table;
    border-top: 1px solid #444;
}
.orderaddress_wrap .address_content .sod_orderaddr .section-cell {
    text-align: center;
    font-size: 16px;
    color: var(--main-box-font-color);
    font-weight: 400;
    border-bottom: 1px solid #eee;
    padding: 22px 0;
}
.orderaddress_wrap .address_content .sod_orderaddr .address_head .section-cell {
    font-size: 16px; /* 13px→16px, 온라인견적문의(.oc_wrap th) 원복 기준으로 재통일(승민 최종결정) */
    color: var(--main-box-font-color4);
    font-weight: 500;
    line-height: 1em;
}
.orderaddress_wrap .address_content .sod_orderaddr .section-cell.add_txt {
    width: 59.282%;
}
.orderaddress_wrap .address_content .sod_orderaddr .section-cell.add_name {
    width: 10.953%;
}
.orderaddress_wrap .address_content .sod_orderaddr .section-cell.add_tel {
    width: 18.765%;
}
.orderaddress_wrap .address_content .sod_orderaddr .section-cell.add_del {
    width: 11%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.orderaddress_wrap .address_content .sod_orderaddr .section-cell.add_del a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: transparent;
    border-color: transparent;
    border-radius: 8px;
    padding: 0;
    transition: background-color 150ms ease;
}
.orderaddress_wrap .address_content .sod_orderaddr .section-cell.add_del a:hover {
    background-color: #f7f7f7; /* 디자인시스템 --fp-surface-soft 미러링 */
}
.orderaddress_wrap .address_content .sod_orderaddr .section-cell.add_del a.edit_address {
    color: #999999;
}
.orderaddress_wrap .address_content .sod_orderaddr .section-cell.add_del a.edit_address:hover {
    color: var(--main-btn-font-point-color);
}
.orderaddress_wrap .address_content .sod_orderaddr .section-cell.add_del a .ico_x {
    position: relative;
    width: 16px;
    height: 16px;
}
.orderaddress_wrap .address_content .sod_orderaddr .section-cell.add_del a .ico_x::before,
.orderaddress_wrap .address_content .sod_orderaddr .section-cell.add_del a .ico_x::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 1px;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background-color: #999999;
    transition: background-color 150ms ease;
}
.orderaddress_wrap .address_content .sod_orderaddr .section-cell.add_del a .ico_x::before {
    transform: rotate(45deg);
}
.orderaddress_wrap .address_content .sod_orderaddr .section-cell.add_del a .ico_x::after {
    transform: rotate(-45deg);
}
.orderaddress_wrap .address_content .sod_orderaddr .section-cell.add_del a:hover .ico_x::before,
.orderaddress_wrap .address_content .sod_orderaddr .section-cell.add_del a:hover .ico_x::after {
    background-color: #cf202f; /* 디자인시스템 --fp-error 미러링 */
}
/* 사용후기 삭제 텍스트 → X아이콘 전환(승민 지시, del_address 패턴 재사용). btn01은 수정버튼과 공유되어 그대로 두고 itemuse_delete 전용 스코프로 오버라이드 */
.sit_use_cmd .itemuse_delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: transparent;
    border: 0;
    padding: 0;
    vertical-align: middle;
    transition: background-color 150ms ease;
}
.sit_use_cmd .itemuse_delete:hover {
    background-color: #f7f7f7; /* 디자인시스템 --fp-surface-soft 미러링 */
}
.sit_use_cmd .itemuse_delete .ico_x {
    position: relative;
    width: 16px;
    height: 16px;
}
.sit_use_cmd .itemuse_delete .ico_x::before,
.sit_use_cmd .itemuse_delete .ico_x::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 1px;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background-color: #999999;
    transition: background-color 150ms ease;
}
.sit_use_cmd .itemuse_delete .ico_x::before {
    transform: rotate(45deg);
}
.sit_use_cmd .itemuse_delete .ico_x::after {
    transform: rotate(-45deg);
}
.sit_use_cmd .itemuse_delete:hover .ico_x::before,
.sit_use_cmd .itemuse_delete:hover .ico_x::after {
    background-color: #cf202f; /* 디자인시스템 --fp-error 미러링 */
}
.orderaddress_wrap .address_content .title_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 주문내역(orderinquiry.php) 기준 실측 정렬 — 다음 형제(흰 섹션 #sod_addr) 시작선을 좌측
       마이페이지 메뉴 카드(ul.mypage-categorys) 시작선과 같은 y좌표로 맞춤. title_box 내부
       정렬(위 point_title 규칙)은 건드리지 않고 title_box 자체의 하단 여백으로만 처리. */
    margin-bottom: 26px;
}
.orderaddress_wrap .address_content .orderform_title {
    border-bottom: 0;
}
/* title_box는 flex align-items:center로 타이틀↔버튼을 세로중앙정렬하는데, .orderform_title
   기본 padding-bottom:25px + .point_title의 margin-bottom:8px(다른 페이지 point.skin.php용,
   본 컨텍스트에선 무의미)가 실텍스트 아래 33px의 투명 여백을 만들어 정렬 계산이 박스 전체
   기준으로 이뤄지던 문제 — 실측(getBoundingClientRect) 결과 텍스트 시각 중심이 버튼 중심보다
   18px 위였음. title_box 스코프에서만 여백 제거해 실제 텍스트 라인 기준으로 정렬되게 함. */
.orderaddress_wrap .address_content .title_box .orderform_title.point_title {
    padding-bottom: 0;
    margin-bottom: 0;
}
.orderaddress_wrap .address_content .orderform_title span {
    font-size: 16px;
    color: var(--main-box-font-color2);
    font-weight: 400;
    margin-left: 15px;
}
.orderaddress_wrap .address_content .title_box .modify {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto; /* 형제 타이틀이 모바일에서 숨겨져도(hidden-xs/hidden-sm) 항상 우측 끝 고정 */
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--fp-on-primary, #fff);
    background-color: var(--fp-ink, #2e343a);
    padding: 10px 16px;
    border: none;
    border-radius: 18px;
    transition: opacity 150ms ease;
}
.orderaddress_wrap .address_content .title_box .modify:hover {
    /* orderinquiry.php .order_state_filter와 동일한 디자인 언어(다크필 pill + 아이콘) 채용,
       단 hover는 배경/색 전환 대신 오퍼시티 방식으로 통일(승민 지시) */
    opacity: 0.65;
}
@media (max-width: 991px) {
    .orderaddress_wrap .address_content .title_box {
        /* 모바일은 .modify 자체 margin-bottom(16px)으로 이미 여백이 맞춰져 있어 데스크톱용
           26px을 그대로 더하면 과도해짐 — 모바일 기존 간격 유지를 위해 상쇄 */
        margin-bottom: 0;
    }
    .orderaddress_wrap .address_content .title_box .modify {
        gap: 4px;
        font-size: 13px;
        padding: 9px 15px;
        border-radius: 15px;
        margin-bottom: 16px;
    }
}
.orderaddress_wrap .address_content .address_head {
    width: 100%;
    display: flex;
    align-items: center;
}
.orderaddress_wrap .address_content .address_cont li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
}
.orderaddress_wrap .address_content .address_cont li:last-child {
    border-bottom: none;
}
@media (max-width: 480px) {
    .orderaddress_wrap .address_content .address_cont li.no_list {
        min-height: calc(100vh - 210px);
        justify-content: center;
    }
}
.orderaddress_wrap .address_content .address_cont li.no_list div {
    padding: 160px 0;
    width: 100%;
    color: #777;
}
.orderaddress_wrap .address_content .address_cont li.no_list div img {
    display: block;
    margin: 0 auto 15px;
}
@media (max-width: 991px) {
    .orderaddress_wrap .address_content .address_cont li.no_list div {
        font-size: 13px;
        padding: 80px 0;
    }
    .orderaddress_wrap .address_content .address_cont li.no_list div img {
        width: 41px;
        height: 41px;
    }
}
.orderaddress_wrap .address_content .address_cont .section-cell {
    border-bottom: 0;
    color: var(--main-box-font-color2);
}
.orderaddress_wrap .address_content .address_cont .section-cell.add_txt {
    padding-left: 20px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}
.orderaddress_wrap .address_content .address_cont .section-cell.add_txt > div {
    display: inline-block;
    line-height: 1.2em;
}
.orderaddress_wrap .address_content .address_cont .section-cell.add_txt > div.add_icon {
    flex-shrink: 0;
}
.orderaddress_wrap .address_content .address_cont .section-cell.add_txt > div.add_icon span {
    display: block;
    font-size: 13px;
    color: #444;
    font-weight: 500;
    background: #f7f7f7;
    padding: 6px 8px;
    border-radius: 10px;
}
@media (max-width: 991px) {
    .orderaddress_wrap {
        gap: 0;
    }
    .orderaddress_wrap .address_content {
        padding: 20px 0;
        width: 100%;
    }
    .orderaddress_wrap .address_content .sod_orderaddr {
        border-top: 0;
    }
    .orderaddress_wrap .address_content .sod_orderaddr .section-cell {
        padding: 5px 0;
        text-align: left;
        font-size: 13px;
    }
    .orderaddress_wrap .address_content .sod_orderaddr .section-cell.add_txt {
        width: 90%;
    }
    .orderaddress_wrap .address_content .sod_orderaddr .section-cell.add_name {
        width: 17%;
        border-right: 1px solid #e0e0e0;
        margin-right: 4%;
    }
    .orderaddress_wrap .address_content .sod_orderaddr .section-cell.add_tel {
        width: 65%;
    }
    .orderaddress_wrap .address_content .sod_orderaddr .section-cell.add_del {
        width: auto;
    }
    .orderaddress_wrap .address_content .address_cont li {
        flex-wrap: wrap;
        position: relative;
        padding: 20px 0 20px 9px;
    }
    .orderaddress_wrap .address_content .address_cont li:first-child {
        padding-top: 0;
    }
    .orderaddress_wrap .address_content .address_cont li.no_list div {
        text-align: center;
    }
    .orderaddress_wrap .address_content .address_cont .section-cell.add_txt {
        padding-left: 0;
        text-align: left;
        color: var(--main-box-font-color1);
        font-size: 15px;
        display: block;
    }
    .orderaddress_wrap .address_content .address_cont .section-cell.add_txt > div {
        display: block;
    }
    .orderaddress_wrap .address_content .address_cont .section-cell.add_txt > div.add_icon {
        width: 70px;
        text-align: center;
        margin-bottom: 10px;
    }
    .orderaddress_wrap .address_content .address_cont .section-cell.add_txt > div.add_icon span {
        font-size: 10px;
        padding: 6px 0;
        border-radius: 9px;
    }
    .orderaddress_wrap .address_content .address_cont .section-cell.add_del {
        position: absolute;
        right: 6px;
        top: 14px;
        padding: 0;
    }
    .orderaddress_wrap .address_content .address_cont .section-cell.add_del a {
        width: 36px;
        height: 36px;
    }
    .orderaddress_wrap .address_content .address_head {
        display: none;
    }
}
@media (max-width: 480px) {
    .orderaddress_wrap .address_content .sod_orderaddr .section-cell {
        font-size: 11px;
    }
    .orderaddress_wrap .address_content .address_cont .section-cell.add_txt {
        font-size: 13px;
    }
    .orderaddress_wrap .address_content .address_cont .section-cell.add_txt > div.add_icon {
        width: 65px;
    }
    .orderaddress_wrap .address_content .address_cont .section-cell.add_txt > div.add_icon span {
        padding: 4px 0;
        border-radius: 8px;
    }
    .orderaddress_wrap .address_content .address_cont .section-cell.add_del a {
        width: 32px;
        height: 32px;
    }
}

/* 쿠폰 — 사용: 마이페이지 쿠폰 (coupon.skin.php) */
.coupon_wrap {
    display: flex;
    gap: 50px;
}
.coupon_wrap .coupon_content {
    width: calc(100% - 200px);
}
.coupon_wrap .coupon_content .orderform_title {
    border-bottom: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}
.coupon_wrap .coupon_content .orderform_title span {
    color: var(--main-box-font-color2);
    font-size: 16px;
    font-weight: 400;
    margin-left: 15px;
    margin-top: -3px;
}
@media (max-width: 1200px) {
    .coupon_wrap .coupon_content .orderform_title {
        display: block;
    }
    .coupon_wrap .coupon_content .orderform_title span {
        display: block;
        margin-left: 0;
        margin-top: 20px;
    }
}
/* 2026-08 (주)파이브센스_FIVESENSES.Corp. [CouponSummaryDashboard] 쿠폰함 상단 미니 대시보드 —
   point.php(.point_box) 카드와 동일한 톤(#fff 배경/17px 라운드/타이포)으로 통일, 4개 카드를
   한 줄에 배치하는 요약 그리드라 point_box보다 패딩만 축소 */
.coupon_wrap .coupon_content .coupon_summary_wrap {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}
.coupon_wrap .coupon_content .coupon_summary_box {
    flex: 1 1 0;
    display: block;
    background-color: #fff;
    border-radius: 17px;
    padding: 24px 20px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background-color 150ms ease, border-radius 150ms ease, border-color 200ms ease-out;
}
.coupon_wrap .coupon_content .coupon_summary_box:hover {
    background-color: #fafafa;
    border-radius: 20px;
}
.coupon_wrap .coupon_content .coupon_summary_box.active {
    border-color: var(--fp-primary, #1a6dff);
}
.coupon_wrap .coupon_content .coupon_summary_box .text {
    font-size: 15px;
    color: var(--main-box-font-color);
    font-weight: 500;
    margin-bottom: 8px;
    word-break: keep-all;
}
.coupon_wrap .coupon_content .coupon_summary_box .number {
    font-size: 24px;
    color: var(--main-box-font-point-color);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.coupon_wrap .coupon_content .coupon_summary_box.active .number {
    color: var(--fp-primary-text, #005eff);
}
/* 2026-08 (주)파이브센스_FIVESENSES.Corp. [CouponListCardRestore] 나의 쿠폰(coupon.php)은
   point.php/orderinquiry.php와 동일한 컨텐츠 섹션 패턴(바깥 컨테이너 흰 카드 bg+radius, 리스트
   행은 카드가 아니라 border-bottom 구분선만)으로 통일 — 레거시 상단보더(#444) 제거는 동일 원칙 */
.coupon_wrap .coupon_content .coupon_skin {
    width: 100%;
    display: table;
}
.coupon_wrap .coupon_content .coupon_skin .section-cell {
    text-align: center;
    font-size: 16px;
    color: var(--main-box-font-color4);
    font-weight: 500;
    border-bottom: 1px solid #e1e1e1;
    padding: 19px 0;
}
.coupon_wrap .coupon_content .coupon_skin .section-cell.subject {
    width: 42.856%;
    padding: 20px 0 20px 30px;
    text-align: left;
}
.coupon_wrap .coupon_content .coupon_skin .coupon_head .section-cell.subject {
    text-align: center !important;
}
.coupon_wrap .coupon_content .coupon_skin .section-cell.date {
    width: 23.81%;
}
.coupon_wrap .coupon_content .coupon_skin .section-cell.target {
    width: 19.048%;
}
.coupon_wrap .coupon_content .coupon_skin .section-cell.price {
    width: 14.286%;
}
.coupon_wrap .coupon_content .coupon_skin .section-cell.no_list {
    width: 100%;
}
.coupon_wrap .coupon_content .coupon_head {
    width: 100%;
    display: flex;
    align-items: center;
}
/* 2026-08 (주)파이브센스_FIVESENSES.Corp. 표 헤더 폰트 톤 재통일 — 13px 캡션톤 폐기,
   온라인견적문의(.oc_wrap th) 원복 기준(16px)으로 재통일(승민 최종결정) */
.coupon_wrap .coupon_content .coupon_skin .coupon_head .section-cell {
    font-size: 16px;
    line-height: 1em;
}
.coupon_wrap .coupon_content .coupon_cont li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
}
.coupon_wrap .coupon_content .coupon_cont li:last-child {
    border-bottom: 0;
}
.coupon_wrap .coupon_content .coupon_cont li.no_list div {
    width: 100%;
    color: var(--main-box-font-color);
}
.coupon_wrap .coupon_content .coupon_cont .section-cell {
    border-bottom: 0;
    color: var(--main-box-font-color2);
    font-weight: 400;
}
.coupon_wrap .coupon_content .coupon_cont li.no_list div .no_data {
    color: #777;
    font-size: var(--fp-empty-text-size, 14px);
    line-height: 1.4;
    text-align: center;
    background: var(--fp-empty-bg, #fff);
    border-radius: var(--fp-empty-radius, 17px);
    padding: var(--fp-empty-pad-desktop, 192px) 0; /* [EmptyStateTokens] 마이페이지 빈상태 전역 통일 — point.php 2배 확대 기준값 */
}
.coupon_wrap .coupon_content .coupon_cont li.no_list div .no_data img {
    width: var(--fp-empty-icon-size, 41px);
    display: block;
    margin: 0 auto var(--fp-empty-gap, 14px);
}
/* 2026-08 (주)파이브센스_FIVESENSES.Corp. [CouponTabRedesign] recentitems.php .ri_tabs(Underline Tabs)
   시각 언어 이식 — coupon_tab_item은 role="tab" 토글이 아니라 실제 페이지 이동(<a href>)이라
   active는 서버사이드에서 URL 기준으로 그대로 부여(로직 불변), 여기서는 CSS만 교체한다. */
.coupon_tab {
    display: flex;
    gap: 28px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--fp-hairline, #e5e8eb);
}
.coupon_tab .coupon_tab_item a {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 14px 2px;
    color: var(--fp-muted, #7c828a);
    font-size: 16px;
    font-weight: 500;
    transition: color 150ms ease;
}
.coupon_tab .coupon_tab_item a span {
    display: inline-flex;
    align-items: center;
    margin-left: 3px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--fp-primary-text, #005eff);
    background: var(--fp-surface-strong, #eef0f3);
    border-radius: 6px;
}
.coupon_tab .coupon_tab_item.active a {
    color: var(--fp-ink, #1b1b1b);
    font-weight: 700;
}
.coupon_tab .coupon_tab_item.active a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--fp-primary, #1a6dff);
}
.title_group .toggle_title {
    cursor: pointer;
}
.coupon_wrap .coupon_tit_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 15px;
}
.coupon_wrap .register_coupon {
    width: 40%;
}
/* 2026-08 (주)파이브센스_FIVESENSES.Corp. 쿠폰 등록 폼 디자인시스템 톤 정리 — 인풋+버튼 flex 정렬, 브랜드 포인트 컬러/radius 통일 */
.coupon_wrap .register_coupon form {
    display: flex;
    gap: 8px;
}
.coupon_wrap .register_coupon input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    height: 44px;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    padding: 0 16px;
    background-color: #fff;
    color: #0c0c0c;
}
.coupon_wrap .register_coupon input:focus {
    border-color: var(--main-btn-line-point-color);
}
.coupon_wrap .register_coupon button {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 20px;
    background-color: var(--main-btn-point-color);
    border: 1px solid var(--main-btn-line-point-color);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: filter 150ms ease;
}
.coupon_wrap .register_coupon button:hover {
    filter: brightness(1.08);
}
@media (max-width: 1200px) {
    .coupon_wrap .coupon_tit_box {
        align-items: flex-end;
    }
}
/* 2026-08 (주)파이브센스_FIVESENSES.Corp. [GiftCouponCardRedesign] 나의쿠폰/찜한상품(wishlist_body)·
   적립금(point_box)과 동일한 이 세션 카드 톤(radius 17px 데스크톱/13px 모바일, bg #f9f9f9)을
   선물하기 쿠폰 카드에 이식 — 레거시 검은 보더(#444) 제거는 다른 마이페이지 섹션과 동일 원칙 */
.present_coupon.off_coupon {
    padding-top: 20px;
    padding-bottom: 40px;
}
/* 2026-08 (주)파이브센스_FIVESENSES.Corp. [GiftCouponContainerCard] 나의쿠폰(coupon.php)/적립금(point.php)
   /주문내역(orderinquiry.php)과 동일하게 컨텐츠 섹션 바깥 컨테이너를 흰 카드(bg #fff+radius 17px)로 처리.
   개별 쿠폰 카드(.coupon_item .wrap, bg #f9f9f9)는 이 세션에 이미 확정된 디자인이라 유지 — 회색 카드가
   흰 컨테이너 위에서 색 대비로 구분되므로 카드 안에 카드로 겹쳐 보이지 않는다(좌우 여백만 추가, 기존
   상하 padding은 그대로 둠). */
.present_coupon.off_coupon {
    background-color: #fff;
    border-radius: 17px;
    padding-left: 30px;
    padding-right: 30px;
}
.present_coupon.off_coupon .coupon_item + li {
    margin-top: 20px;
}
.present_coupon.off_coupon .coupon_item .wrap {
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    border-radius: 17px;
    padding: 40px 50px 35px;
    position: relative;
}
.present_coupon.off_coupon .coupon_item .coupon_img {
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #f6f6f6;
    margin-right: 30px;
}
.present_coupon.off_coupon .coupon_item .coupon_info .cate {
    color: var(--main-btn-point-color);
    font-size: 11px;
    font-weight: 500;
    line-height: 1em;
    padding: 1.5px 5px;
    border-radius: 3px;
    background-color: #f3effe;
}
.present_coupon.off_coupon .coupon_item .coupon_info .title {
    color: #222222;
    font-size: 19px;
    font-weight: 500;
    line-height: 1em;
    padding: 15px 0 20px;
}
.present_coupon.off_coupon .coupon_item .coupon_info > div {
    color: #666666;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6em;
}
.present_coupon.off_coupon .coupon_item .coupon_info > div span {
    color: #aaaaaa;
    margin-right: 20px;
}
.present_coupon.off_coupon .coupon_item .sharing_btn {
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
}
/* 2026-08 (주)파이브센스_FIVESENSES.Corp. [GiftCouponKakaoRedesign] 주문조회 쿠폰공유 모달
   (oi_coupon_kakao/oi_coupon_done, skin/apms/order/basic/style.css)과 동일한 아이콘+텍스트
   pill 톤으로 통일 — 기존 on/off 이미지 스왑 방식(coupon_kakao.png/coupon_kakao_off.png)을
   버튼/스팬 분리 + 인라인 SVG로 교체 */
.present_coupon.off_coupon .coupon_item .gift_coupon_kakao {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 11px 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    color: #381e1f;
    background-color: #fae100;
    border: 0;
    border-radius: 19px;
    white-space: nowrap;
    cursor: pointer;
}
.present_coupon.off_coupon .coupon_item .gift_coupon_done {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 11px 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    color: #999999;
    background-color: #e1e1e1;
    border-radius: 19px;
    white-space: nowrap;
}
.present_coupon.off_coupon .coupon_item.used .wrap::after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 17px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #cccccc;
    opacity: 0.25;
}
.present_coupon.off_coupon .coupon_item.used .coupon_info .cate {
    color: #999999;
    background-color: #e5e5e5;
}
.present_coupon.off_coupon .coupon_item.used .coupon_info .title {
    color: #888888;
}
.present_coupon.off_coupon .coupon_item.used .coupon_info > div {
    color: #888888;
}
.present_coupon.off_coupon .coupon_item.used .coupon_info > div span {
    color: #888888;
}
.present_coupon.off_coupon .coupon_item .wrap .no_data {
    color: var(--main-box-font-color2);
    font-size: 16px;
    line-height: 1em;
    padding: 21.25px 0 0;
    text-align: center;
}

@media (max-width: 991px) {
    .title_group {
        position: relative;
        margin-bottom: 35px;
    }
    .title_group .toggle_title {
        display: block;
        text-align: center;
        width: 100%;
        padding: 15px;
        font-size: 13px;
        color: #fff;
        background: #b69a71;
        position: relative;
        font-weight: 500;
        border-radius: 22.5px;
    }
    .title_group .toggle_title::before {
        position: absolute;
        content: "";
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        background: url("/img/coupon_arrow.png");
        width: 11px;
        height: 6px;
    }
    .title_group .toggle_title.on::before {
        transform: translateY(-50%) rotate(180deg);
    }
    .title_group .title_list {
        display: none;
        position: absolute;
        width: 100%;
        z-index: 3;
        background: #fff;
        top: calc(100% + 8px);
        padding: 25px;
        text-align: center;
        border-radius: 10px;
        border: 1px solid #eeeeee;
        flex-direction: column;
        gap: 20px;
    }
    .title_group .title_list.on {
        display: flex;
    }
    .title_group .title_list .title {
        font-size: 13px;
    }
    .present_coupon.off_coupon .coupon_item .wrap .no_data {
        font-size: 13px;
    }
    .coupon_wrap .coupon_content .coupon_cont li.no_list div .no_data {
        font-size: var(--fp-empty-text-size, 14px);
        padding: var(--fp-empty-pad-mobile, 96px) 0; /* [EmptyStateTokens] 마이페이지 빈상태 전역 통일 모바일값 */
    }
}
@media (max-width: 991px) {
    .coupon_wrap {
        display: block;
        gap: 0;
        margin-bottom: 50px;
    }
    .coupon_wrap .coupon_content {
        width: 100%;
    }
    .coupon_wrap .coupon_content .coupon_summary_wrap {
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 20px;
    }
    .coupon_wrap .coupon_content .coupon_summary_box {
        flex: 1 1 calc(50% - 6px);
        border-radius: 13px;
        padding: 20px 16px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    }
    .coupon_wrap .coupon_content .coupon_summary_box .text {
        font-size: 13px;
    }
    .coupon_wrap .coupon_content .coupon_summary_box .number {
        font-size: 20px;
    }
    .coupon_wrap .coupon_content .coupon_skin .section-cell {
        font-size: 16px;
        padding: 16px 0;
        text-align: center;
        color: #0c0c0c;
    }
    .coupon_wrap .coupon_content .coupon_skin .section-cell.subject {
        width: 55%;
        padding: 9.5px 0;
        text-align: center;
    }
    .coupon_wrap .coupon_content .coupon_skin .section-cell.target {
        width: 25%;
    }
    .coupon_wrap .coupon_content .coupon_skin .section-cell.price {
        width: 25%;
    }
    .coupon_wrap .coupon_content .coupon_head {
        background: #f6f6f6;
        border-radius: 12px;
    }
    .coupon_wrap .coupon_content .coupon_head .section-cell {
        border-bottom: 0;
    }
    .coupon_wrap .coupon_content .coupon_skin .coupon_head .section-cell {
        font-size: 12px;
    }
    .coupon_wrap .coupon_content .coupon_cont li:last-child {
        border-bottom: 0;
    }
    .coupon_wrap .coupon_content .coupon_cont .section-cell {
        line-height: 1.2;
        border-bottom: 0;
        color: var(--main-box-font-color2);
    }
    .coupon_wrap .coupon_content .coupon_cont .section-cell.subject {
        text-align: left;
        padding: 15px 0 15px 10px;
    }
    .coupon_wrap .coupon_content .coupon_cont .section-cell.subject span {
        display: block;
        font-size: 14px;
    }
    .coupon_wrap .coupon_content .coupon_cont .section-cell.subject span.mob_date {
        color: var(--main-box-font-color2);
        margin-bottom: 5px;
        font-size: 12px;
    }

    .coupon_tab {
        position: relative;
        gap: 20px;
        padding-bottom: 10px;
        margin-bottom: 20px;
        border-bottom: 0;
    }
    .coupon_tab::after {
        content: "";
        display: block;
        background-color: #eeeeee;
        width: calc(100% + 30px);
        height: 1px;
        position: absolute;
        left: -15px;
        bottom: 0;
    }
    .coupon_tab .coupon_tab_item a {
        padding: 10px 2px;
        font-size: 14px;
    }
    .coupon_wrap .coupon_tit_box {
        padding-bottom: 20px;
    }
    .coupon_wrap .register_coupon {
        width: 100%;
    }
    .coupon_wrap .register_coupon form {
        display: flex;
        gap: 6px;
    }
    .coupon_wrap .register_coupon input {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 12px;
        padding: 0 12px;
        border-radius: 8px;
        height: 36px;
    }
    .coupon_wrap .register_coupon button {
        flex: 0 0 auto;
        font-size: 12px;
        border-radius: 8px;
        padding: 0 14px;
        height: 36px;
    }
    .present_coupon.off_coupon {
        padding-top: 0;
        border-radius: 13px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .present_coupon.off_coupon .coupon_item .wrap {
        padding: 22px 20px 20px;
        border-radius: 13px; /* 디자인시스템 모바일 카드 라운딩 규칙(17px→13px) */
    }
    .present_coupon.off_coupon .coupon_item.used .wrap::after {
        border-radius: 13px;
    }
    .present_coupon.off_coupon .coupon_item + li {
        margin-top: 10px;
    }
    .present_coupon.off_coupon .coupon_item .coupon_img {
        width: 95px;
        height: 95px;
        margin-right: 18px;
        min-width: 95px;
    }
    .present_coupon.off_coupon .coupon_item .coupon_info .cate {
        font-size: 10px;
        padding: 1.5px 3px;
    }
    .present_coupon.off_coupon .coupon_item .coupon_info .title {
        font-size: 15px;
        line-height: 1.2em;
        padding: 8px 0 14px;
    }
    .present_coupon.off_coupon .coupon_item .coupon_info > div {
        font-size: 12px;
    }
    .present_coupon.off_coupon .coupon_item .coupon_info > div span {
        color: #999;
        margin-right: 12px;
    }
    .present_coupon.off_coupon .coupon_item .sharing_btn {
        top: 15px;
        right: 15px;
        transform: none;
    }
    .present_coupon.off_coupon .coupon_item .gift_coupon_kakao,
    .present_coupon.off_coupon .coupon_item .gift_coupon_done {
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        border-radius: 50%;
    }
    .present_coupon.off_coupon .coupon_item .gift_coupon_kakao svg,
    .present_coupon.off_coupon .coupon_item .gift_coupon_done svg {
        width: 16px;
        height: 16px;
    }
}
@media (max-width: 480px) {
    .coupon_wrap .coupon_content .coupon_summary_wrap {
        gap: 8px;
    }
    .coupon_wrap .coupon_content .coupon_summary_box {
        padding: 16px 12px;
    }
    .coupon_wrap .coupon_content .coupon_summary_box .text {
        font-size: 12px;
    }
    .coupon_wrap .coupon_content .coupon_summary_box .number {
        font-size: 17px;
    }
    .coupon_wrap .coupon_content .coupon_skin .section-cell {
        font-size: 13px;
        padding: 9.5px 0;
    }
    .coupon_wrap .coupon_content .coupon_head {
        border-radius: 6px;
    }
}

/* 적립금 — 사용: 마이페이지 적립금 (point.skin.php) */
.point_wrap {
    width: 100%;
    display: flex;
    gap: 50px;
}
.point_wrap .point_content {
    width: calc(100% - 200px);
}
/* 2026-08 (주)파이브센스_FIVESENSES.Corp. [PointBoxEmphasis] 보유적립금 요약카드 격상 —
   6px 30px 얇은 줄 형태(존재감 부족)를 32px 36px 두툼한 카드로, 숫자도 22px→32px/700 강조.
   elevation(box-shadow)은 승민 재요청으로 제거(2026-08) — 배경색 대비(#fff 카드 / #f9f9f9 페이지)로 구분 유지. */
.point_wrap .point_content .point_box {
    background-color: #fff;
    border-radius: 17px;
    padding: 32px 36px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
}
.point_wrap .point_content .point_box .text {
    font-size: 17px;
    color: var(--main-box-font-color);
    font-weight: 500;
    flex-grow: 1;
}
.point_wrap .point_content .point_box .number {
    font-size: 32px;
    color: var(--main-box-font-point-color);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.point_wrap .point_content .point_skin {
    width: 100%;
    border-top: 1px solid #444;
}
.point_wrap .point_content .point_skin .section-cell {
    text-align: center;
    font-size: 16px;
    color: var(--main-box-font-color);
    font-weight: 400;
    border-bottom: 1px solid #eee;
    padding: 14px 0;
}
.point_wrap .point_content .point_skin .section-cell.date,
.point_wrap .point_content .point_skin .section-cell.expire-date,
.point_wrap .point_content .point_skin .section-cell.point01,
.point_wrap .point_content .point_skin .section-cell.point02 {
    width: 14.286%;
}
.point_wrap .point_content .point_skin .section-cell.content {
    width: 42.856%;
    text-align: left;
    padding-left: 35px;
}
.point_wrap .point_content .point_skin .section-cell.expire-date.red {
    color: #de1f1f;
}
.point_wrap .point_content .point_skin .section-cell.no_list {
    width: 100%;
    color: #777;
    background: var(--fp-empty-bg, #fff);
    border-radius: var(--fp-empty-radius, 17px);
    font-size: var(--fp-empty-text-size, 14px);
    padding: var(--fp-empty-pad-desktop, 192px) 0; /* [EmptyStateTokens] 마이페이지 빈상태 전역 통일 — point.php 2배 확대 기준값 */
}
.point_wrap .point_content .point_skin .section-cell.no_list img {
    width: var(--fp-empty-icon-size, 41px);
    display: block;
    margin: 0 auto var(--fp-empty-gap, 14px);
}
.point_wrap .point_content .point_head {
    display: flex;
    align-items: center;
}
.point_wrap .point_content .point_cont {
    display: flex;
    flex-direction: column;
}
.point_wrap .point_content .point_cont li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
}
.point_wrap .point_content .point_cont li:last-child {
    border-bottom: 0;
}
.point_wrap .point_content .point_cont .section-cell {
    color: #666;
    border-bottom: 0;
}
.point_wrap .point_content .point_cont .section-cell.content {
    color: #222;
}
.point_wrap .point_content .point_cont .section-cell.expire-date {
    color: var(--main-box-font-color2);
}
.point_wrap .point_content .point_footer {
    background: #f7f7f7;
    border-radius: 12px;
}
.point_wrap .point_content .point_footer .point_total {
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 16px;
    color: var(--main-box-font-color2);
    padding: 16px 0;
    font-weight: 400;
}
.point_wrap .point_content .point_footer .point_total .total_txt {
    width: 71.428%;
}
.point_wrap .point_content .point_footer .point_total .total_point {
    width: 14.286%;
}
.point_wrap .orderform_title {
    border-bottom: 0;
}
.point_wrap .orderform_title span {
    font-size: 16px;
    color: var(--main-box-font-color2);
    font-weight: 400;
    margin-left: 15px;
}
.point_wrap .text-center {
    margin: 50px 0 40px;
}
.point_wrap .text-center .pagination {
    margin-bottom: 0;
}
@media (max-width: 991px) {
    .point_wrap {
        display: block;
        gap: 0;
    }
    .point_wrap .point_content {
        width: 100%;
        padding: 40px 0 0;
    }
    /* [PointBoxEmphasis] 모바일도 동일 톤으로 격상 + 목록 위 배치로 위치 이동했으므로
       margin-top(35px, 이전 위치 기준 상단 여백)은 제거 — 타이틀 하단 여백(44px)으로 충분 */
    .point_wrap .point_content .point_box {
        background-color: #fff;
        border-radius: 13px;
        padding: 24px 20px;
        margin-bottom: 24px;
        margin-top: 0;
        display: flex;
        align-items: center;
    }
    .point_wrap .point_content .point_box .text {
        color: var(--main-box-font-color);
        font-size: 15px;
        font-weight: 500;
    }
    .point_wrap .point_content .point_box .number {
        color: var(--main-box-font-point-color);
        font-size: 24px;
        font-weight: 700;
    }
    .point_wrap .point_content .point_skin {
        border-top: 0;
    }
    .point_wrap .point_content .point_skin .section-cell.no_list {
        font-size: var(--fp-empty-text-size, 14px);
        padding: var(--fp-empty-pad-mobile, 96px) 0; /* [EmptyStateTokens] 마이페이지 빈상태 전역 통일 모바일값 */
    }
    .point_wrap .point_content .point_skin .section-cell {
        padding: 16px 0;
    }
    .point_wrap .point_content .point_skin .section-cell.date,
    .point_wrap .point_content .point_skin .section-cell.expire-date,
    .point_wrap .point_content .point_skin .section-cell.point01,
    .point_wrap .point_content .point_skin .section-cell.point02 {
        width: 19%;
    }
    .point_wrap .point_content .point_skin .section-cell.content {
        width: 43%;
        text-align: center;
        padding-left: 0;
    }
    .point_wrap .point_content .point_head {
        background: #f7f7f7;
        border-radius: 12px;
    }
    .point_wrap .point_content .point_head .section-cell {
        font-size: 12px;
        border-bottom: 0;
    }
    .point_wrap .point_content .point_cont li:last-child {
        border-bottom: 0;
    }
    .point_wrap .point_content .point_cont .section-cell {
        line-height: 1.2;
    }
    .point_wrap .point_content .point_cont .section-cell.content {
        text-align: left;
        padding-left: 10px;
    }
    .point_wrap .point_content .point_cont .section-cell.content span {
        display: block;
    }
    .point_wrap .point_content .point_cont .section-cell.content span.mob_date {
        color: #666;
        margin-bottom: 7px;
    }
    .point_wrap .point_content .point_footer .point_total {
        color: #0c0c0c;
    }
    .point_wrap .point_content .point_footer .point_total .total_txt {
        width: 62%;
    }
    .point_wrap .point_content .point_footer .point_total .total_point {
        width: 19%;
    }
    .point_wrap .text-center {
        margin: 25px 0 50px;
    }
}
@media (max-width: 480px) {
    .point_wrap .point_content .point_box {
        padding: 20px 16px;
    }
    .point_wrap .point_content .point_box .text {
        font-size: 14px;
    }
    .point_wrap .point_content .point_box .number {
        font-size: 20px;
    }
    .point_wrap .point_content .point_skin .section-cell {
        font-size: 12px;
        padding: 16px 0;
    }
    .point_wrap .point_content .point_head {
        border-radius: 6px;
    }
    .point_wrap .point_content .point_cont .section-cell.content span {
        font-size: 13px;
    }
    .point_wrap .point_content .point_cont .section-cell.content span.mob_date {
        font-size: 11px;
    }
    .point_wrap .point_content .point_footer {
        border-radius: 5px;
    }
    .point_wrap .point_content .point_footer .point_total {
        font-size: 11px;
        padding: 12px 0;
    }
}

/* ===== 2026-08 (주)파이브센스_FIVESENSES.Corp. [MyPostDesignRefresh] 나의 게시물/댓글/아이템 댓글·후기·문의
   (bbs/mypost.php, mode=1~5) — 구 GnuBoard 기본 화면(부트스트랩3+레거시 css 6종, 403)을 point_wrap/coupon_wrap과
   동일한 좌측메뉴+본문 레이아웃으로 리디자인. coupon_tab을 탭으로 그대로 재사용. 사용: mypost.skin.php +
   skin/member/basic/mypost/*.skin.php 전체(mode 1~5 공유 구조 — 데이터/쿼리 로직은 bbs/mypost.php 그대로) */
.mypost_wrap {
    width: 100%;
    display: flex;
    gap: 50px;
}
.mypost_wrap .mypost_content {
    width: calc(100% - 200px);
}
.mypost_wrap .orderform_title {
    border-bottom: 0;
}
.mypost_wrap .mypost_tab {
    margin-bottom: 24px;
}
.mypost_wrap .mypost_filter {
    margin-bottom: 20px;
}
.mypost_wrap select.mypost_filter_native {
    padding: 11px 14px;
    border: 1px solid var(--fp-hairline, #e5e8eb);
    border-radius: 10px;
    font-size: 14px;
    color: var(--main-box-font-color, #333);
    background: var(--fp-canvas, #fff);
}
.mypost_wrap .mypost_dropdown {
    max-width: 220px;
}
.mypost_wrap .mypost_dropdown .fp-dropdown-trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mypost_wrap .mypost_list {
    display: flex;
    flex-direction: column;
}
.mypost_wrap .mypost_item {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}
.mypost_wrap .mypost_item:last-child {
    border-bottom: 0;
}
.mypost_wrap .mypost_thumb {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--fp-surface-soft, #f7f7f7);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mypost_wrap .mypost_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mypost_wrap .mypost_thumb_fallback {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: var(--fp-surface-strong, #eef0f3);
}
.mypost_wrap .mypost_body {
    flex: 1;
    min-width: 0;
}
.mypost_wrap .mypost_subject {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--main-box-font-color, #222);
    word-break: keep-all;
}
.mypost_wrap .mypost_body a:hover {
    color: var(--fp-primary, #1a6dff);
}
.mypost_wrap .mypost_count {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--fp-primary-text, #005eff);
    background: var(--fp-surface-strong, #eef0f3);
    border-radius: 6px;
}
.mypost_wrap .mypost_meta {
    margin-top: 6px;
    font-size: 13px;
    color: var(--fp-muted, #999999);
}
.mypost_wrap .mypost_meta .sep {
    margin: 0 6px;
    color: var(--fp-hairline, #ddd);
}
.mypost_wrap .mypost_meta .status--done {
    color: var(--fp-success, #05b169);
    font-weight: 600;
}
.mypost_wrap .mypost_meta .status--reply {
    color: var(--fp-primary-text, #005eff);
    font-weight: 600;
}
.mypost_wrap .mypost_item_link {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--fp-muted, #999999);
}
.mypost_wrap .mypost_snippet {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--main-box-font-color2, #666);
    word-break: keep-all;
}
.mypost_wrap .mypost_snippet img {
    max-width: 100%;
    height: auto;
}
.mypost_wrap .mypost_detail {
    margin-top: 10px;
}
.mypost_wrap .mypost_detail .mypost_snippet:first-child {
    margin-top: 0;
}
.mypost_wrap .mypost_reply {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}
.mypost_wrap .mypost_reply .mypost_snippet {
    flex: 1;
    min-width: 0;
    margin-top: 0;
}
.mypost_wrap .mypost_reply_photo {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--fp-surface-soft, #f7f7f7);
}
.mypost_wrap .mypost_reply_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mypost_wrap .mypost_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--fp-empty-pad-desktop, 192px) 0;
    text-align: center;
    background: var(--fp-empty-bg, #fff);
    border-radius: var(--fp-empty-radius, 17px);
}
.mypost_wrap .mypost_empty img {
    width: var(--fp-empty-icon-size, 41px);
    margin-bottom: var(--fp-empty-gap, 14px);
}
.mypost_wrap .mypost_empty p {
    margin: 0;
    font-size: var(--fp-empty-text-size, 14px);
    color: var(--fp-muted, #999999);
}
.mypost_wrap .mypost_footnote {
    margin: 24px 0 0;
    font-size: 12px;
    color: var(--fp-muted, #999999);
    text-align: center;
}
.mypost_wrap .text-center .pagination {
    margin-top: 40px;
}

/* Dropdown(select) — 열림 상태까지 토큰 반영(디자인시스템 fp-dropdown 명세 이식). 프론트는 ds.css 미탑재라
   여기(rest.css, 전 페이지 공통 로드)에 로컬 정의 — 향후 다른 마이페이지 필터 select도 재사용 가능. */
.fp-dropdown { position: relative; }
.fp-dropdown-trigger {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-width: 160px;
    padding: 11px 14px;
    background: var(--fp-canvas, #fff);
    border: 1px solid var(--fp-hairline, #e5e8eb);
    border-radius: 10px;
    font-size: 14px;
    color: var(--main-box-font-color, #333);
    cursor: pointer;
    user-select: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.fp-dropdown-trigger:hover { border-color: var(--fp-primary, #1a6dff); }
.fp-dropdown-trigger--open {
    border-color: var(--fp-primary, #1a6dff);
    box-shadow: 0 0 0 3px rgba(26,109,255,0.10);
}
.fp-dropdown-chevron {
    flex: none;
    color: var(--fp-muted, #999999);
    transition: transform 200ms cubic-bezier(0.16,1,0.3,1);
}
.fp-dropdown-chevron--open { transform: rotate(180deg); }
.fp-dropdown-list {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    min-width: 160px;
    background: var(--fp-canvas, #fff);
    border: 1px solid var(--fp-hairline, #e5e8eb);
    border-radius: 10px;
    box-shadow: 0 13px 34px rgba(26,109,255,0.10), 0 2px 9px rgba(0,0,0,0.06);
    z-index: 200;
    overflow: hidden;
}
.fp-dropdown-option {
    padding: 11px 14px;
    font-size: 14px;
    color: var(--fp-ink, #1b1b1b);
    cursor: pointer;
    border-bottom: 1px solid var(--fp-hairline-soft, #eef0f3);
    transition: background 120ms ease;
    white-space: nowrap;
}
.fp-dropdown-option:last-child { border-bottom: none; }
.fp-dropdown-option:hover { background: var(--fp-surface-soft, #f7f7f7); }
.fp-dropdown-option--selected {
    color: var(--fp-primary, #1a6dff);
    font-weight: 600;
    background: #eef3ff;
}

@media (max-width: 991px) {
    .mypost_wrap {
        display: block;
        gap: 0;
    }
    .mypost_wrap .mypost_content {
        width: 100%;
        padding: 40px 0 0;
    }
    .mypost_wrap .mypost_item {
        gap: 12px;
        padding: 16px 0;
    }
    .mypost_wrap .mypost_thumb {
        width: 56px;
        height: 56px;
        border-radius: 10px;
    }
    .mypost_wrap .mypost_subject {
        font-size: 15px;
    }
    .mypost_wrap .mypost_snippet {
        font-size: 13px;
    }
    .mypost_wrap .mypost_empty {
        padding: var(--fp-empty-pad-mobile, 96px) 0;
    }
    .mypost_wrap .text-center .pagination {
        margin-top: 24px;
    }
}

/* 장바구니 — 사용: 장바구니 (cart.skin.php) */
#btn-print {
    line-height: 1em;
    padding: 17px 20.5px;
}
#btn-print:hover {
    background: #aaaaaa !important;
    border: 1px solid #aaaaaa !important;
}
#btn-print i {
    top: 1px;
    margin-right: 2px;
}
@media (max-width: 991px) {
    #mbtn-print {
        color: #0c0c0c !important;
        border: 1px solid #0c0c0c;
        background-color: #fff;
        border-radius: 3px !important;
        font-size: 15px;
        padding: 0;
        line-height: 52px;
        height: 52px;
        font-weight: 500;
    }
}
.cart_wrap {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-self: auto;
    padding-top: 20px;
}
.cart_wrap .cart_left {
    width: 70%;
}
.cart_wrap .cart_left .cart_head {
    width: 100%;
    border-bottom: 1px solid #444;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-bottom: 23px;
}
.cart_wrap .cart_left .cart_head.bottom {
    border-bottom: 0;
    margin-top: 20px;
}

.cart_wrap .cart_left .cart_head .radio_check .text {
    font-size: 18px;
    color: var(--main-box-font-color);
    font-weight: 500;
}
.cart_wrap .cart_left .cart_head .radio_check .ct_totle {
    display: inline-block;
}
.cart_wrap .cart_left .cart_head .cart_delete button.shop_btn {
    font-size: 17px;
    color: var(--main-btn-font-color2);
    background-color: transparent;
    font-weight: 400;
    width: auto;
    height: auto;
    display: inline-block;
    border: 0;
    padding: 0;
    padding-left: 25px;
    border-radius: 50px;
    transition: 0.1s all ease-in;
}
.cart_wrap .cart_left .cart_body {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.cart_wrap .cart_left .cart_body > li {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 30px 0;
}
.cart_wrap .cart_left .cart_body > li.no_cart_list {
    display: block;
    text-align: center;
    padding: 160px 0;
}
.cart_wrap .cart_left .cart_body > li.no_cart_list p {
    font-size: 16px;
}
.cart_wrap .cart_left .cart_body .cart_check {
    width: 5.835%;
}
.cart_wrap .cart_left .cart_body .cart_check .radio_check input + label .circle {
    margin-right: 0;
}

.cart_wrap .cart_left .cart_body .cart_check .radio_check input[disabled] + label .circle {
    background-color: #f6f6f6;
    border-color: #e6e6e6;
}
.cart_wrap .cart_left .cart_body .cart_content {
    width: 94.565%;
    display: flex;
    align-items: center;
    flex-grow: 1;
}
.cart_wrap .cart_left .cart_body .cart_content .item_img {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 5px;
}
.cart_wrap .cart_left .cart_body .cart_li[data-line-stock-short="1"] .cart_content .item_img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.08);
}
@media (max-width: 991px) {
    .cart_wrap .cart_left .cart_body .cart_content .item_img {
        width: 65px;
        height: 65px;
        border-radius: 5px;
    }
    .cart_wrap .cart_left .cart_body > li.no_cart_list {
        padding: 80px 0;
    }
    .cart_wrap .cart_left .cart_body > li.no_cart_list p {
        font-size: 13px;
    }
}
.cart_wrap .cart_left .cart_body .cart_content .item_img img {
    height: auto;
    max-width: inherit;
}
@media (max-width: 991px) {
    .cart_wrap .cart_left .cart_body .cart_content .item_img img {
        max-width: 100%;
        height: 100%;
    }
}
.cart_wrap .cart_left .cart_body .cart_content .item_detail {
    width: 340px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 25px;
    padding-top: 0;
    padding-right: 30px;
}
.cart_wrap .cart_left .cart_body .cart_content .item_detail .it_sub_name {
    font-size: 13px;
    color: #666;
    font-weight: 400;
    margin-bottom: 6px;
    line-height: 1.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 36.38px;
}
.cart_wrap .cart_left .cart_body .cart_content .item_detail .it_name {
    font-size: 18px;
    line-height: 1.4em;
    color: var(--main-box-font-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 51px;
}
.cart_wrap .cart_left .cart_body .cart_content .item_detail .option_wrap {
    padding: 0;
    margin-top: 10px;
}
.cart_wrap .cart_left .cart_body .cart_content .item_detail .option_wrap li {
    border-bottom: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.4em;
    color: var(--main-box-font-color2);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 39px;
}
.cart_wrap .cart_left .cart_body .cart_content .item_detail .option_wrap li + li {
    margin-top: 7px;
}
.cart_wrap .cart_left .cart_body .cart_content .item_detail .option_wrap li span {
    display: inline-block;
    position: relative;
    padding-left: 18px;
}
.cart_wrap .cart_left .cart_body .cart_content .item_detail .option_wrap li span::before {
    content: "";
    display: block;
    width: 1px;
    height: 12px;
    background: #c7c7c7;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-10px);
}
.cart_wrap .cart_left .cart_body .cart_content .cart_item_option .btn_revice {
    width: 96px;
}
.cart_wrap .cart_left .cart_body .cart_content .cart_item_option .btn_revice button {
    width: 100%;
    height: 37px;
    line-height: 35px;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    font-size: 14px;
    color: #0c0c0c;
    font-weight: 400;
}
.cart_wrap .cart_left .cart_body .cart_content .cart_item_option .btn_revice button:hover {
    color: #fff;
    border-color: var(--main-btn-line-point-color);
}
.cart_wrap .cart_left .cart_body .cart_content .cart_item_price {
    width: 160px;
}
.cart_wrap .cart_left .cart_body .cart_content .cart_item_price > div {
    text-align: right;
}
.cart_wrap .cart_left .cart_body .cart_content .cart_item_price .sale_price {
    font-size: 20px;
    font-weight: 600;
    color: var(--main-box-font-color);
    white-space: nowrap;
}
.cart_wrap .cart_left .cart_body .cart_content .cart_item_price .origin_price {
    font-size: 14px;
    color: var(--main-box-font-color2);
    font-weight: 400;
    text-decoration: line-through;
    margin-top: 5px;
    white-space: nowrap;
}
.cart_wrap .cart_left .cart_body .cart_content .cart_item_price .won {
    font-weight: 400;
}
.cart_wrap .cart_left .cart_body .cart_content .cart_item_delete {
    margin-left: 20px;
}
.cart_wrap .cart_left .cart_body .cart_content .cart_item_delete .delete_arrow {
    display: block;
    width: 15px;
    height: 15px;
    position: relative;
    cursor: pointer;
}
.cart_wrap .cart_left .cart_body .cart_content .cart_item_delete .delete_arrow::before {
    content: "";
    display: block;
    width: 1px;
    height: 15px;
    background: #666;
    position: absolute;
    top: 0;
    right: 7px;
    transform: rotate(-45deg);
}
.cart_wrap .cart_left .cart_body .cart_content .cart_item_delete .delete_arrow::after {
    content: "";
    display: block;
    width: 1px;
    height: 15px;
    background: #666;
    position: absolute;
    top: 0;
    right: 7px;
    transform: rotate(45deg);
}
/* 삭제버튼 hover 처리 — orderaddress.skin.php .del_address 기준 패턴 통일(찜한상품 .delete_btn과 동일, 커밋 7acb56c3) */
.cart_wrap .cart_left .cart_body .cart_content .cart_item_delete a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: transparent;
    transition: background-color 150ms ease;
}
.cart_wrap .cart_left .cart_body .cart_content .cart_item_delete a:hover {
    background-color: #f7f7f7; /* orderaddress.skin.php .del_address 패턴과 동일 */
}
.cart_wrap .cart_left .cart_body .cart_content .cart_item_delete .delete_arrow::before,
.cart_wrap .cart_left .cart_body .cart_content .cart_item_delete .delete_arrow::after {
    transition: background-color 150ms ease;
}
.cart_wrap .cart_left .cart_body .cart_content .cart_item_delete a:hover .delete_arrow::before,
.cart_wrap .cart_left .cart_body .cart_content .cart_item_delete a:hover .delete_arrow::after {
    background-color: #cf202f; /* orderaddress.skin.php .del_address 패턴과 동일 */
}
/* 데스크톱 전용 top-right 고정(align-items:flex-start/justify-content:flex-end)은
   히트영역(32px)과 아이콘(15px) 중심이 8.5px씩 어긋나 hover 라운딩 배경이 아이콘과
   따로 노는 것처럼 보이는 문제가 있어 제거 — base 규칙(center/center, del_address 등
   동일 패턴)으로 통일. bp991/모바일은 이미 base 규칙이라 정상이었음 */

/* 품절 라인 표시 — 사용: 장바구니 (data-line-stock-short) */
.cart_wrap .cart_left .cart_body .cart_li[data-line-stock-short="1"] .cart_content .item_detail .it_sub_name {
    color: #999999;
}
.cart_wrap .cart_left .cart_body .cart_li[data-line-stock-short="1"] .cart_content .item_detail .it_name {
    color: #666;
}

.cart_wrap .cart_left .cart_body .cart_li[data-line-stock-short="1"] .cart_content .item_detail .option_wrap li {
    color: #999999;
}

.cart_wrap .cart_left .cart_body .cart_li[data-line-stock-short="1"] .cart_content .item_detail .item_sticker.soldout {
    color: #4c4c4c;
    background-color: #ededed;
}

.cart_wrap .cart_left .cart_body .cart_li[data-line-stock-short="1"] .cart_content .cart_item_option .btn_revice button {
    background-color: #ededed;
    border-color: #ededed;
    color: #aaaaaa;
    cursor: not-allowed;
}

.cart_wrap .cart_left .cart_body .cart_li[data-line-stock-short="1"] .cart_content .cart_item_price .sale_price {
    color: #666;
}

.cart_wrap .cart_left .cart_body .cart_li[data-line-stock-short="1"] .cart_content .cart_item_price .origin_price {
    color: #999999;
}

/* 상품명 줄바꿈 여부·옵션유무에 따라 옵션변경버튼/가격/삭제버튼 행이 흔들리던 문제 —
   데스크톱에서 컬럼을 상단 정렬로 고정하고 item_detail이 자기 콘텐츠 폭만큼 밀려나지 않게 제한 */
@media (min-width: 992px) {
    .cart_wrap .cart_left .cart_body .cart_content {
        align-items: flex-start;
    }
    .cart_wrap .cart_left .cart_body .cart_content .item_detail {
        min-width: 0;
    }
    .cart_wrap .cart_left .cart_body .cart_content .item_detail a {
        display: block;
        width: 100%;
    }
    .cart_wrap .cart_left .cart_body .cart_content .cart_item_option {
        width: 96px;
        margin-right: 20px;
    }
}

.cart_wrap .cart_right {
    width: 25.67%;
    position: relative;
    min-height: 500px;
}
.cart_wrap .cart_right .right_title {
    margin-bottom: 21px;
}
.cart_wrap .cart_right .right_title h1 {
    font-size: 24px;
    color: var(--main-box-font-color);
    font-weight: 500;
    text-align: left;
}
.cart_wrap .cart_right .price_wrap {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    border: 1px solid #f2f2f2;
    padding: 30px;
    background-color: #fafafa;
}
.cart_wrap .cart_right .price_wrap .price_cont {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 17px;
}
.cart_wrap .cart_right .price_wrap .price_cont .cont_txt {
    flex-grow: 1;
    font-size: 16px;
    color: #444;
    font-weight: 400;
}
.cart_wrap .cart_right .price_wrap .price_cont .price_txt {
    font-size: 18px;
    color: #444;
    font-weight: 400;
    text-align: right;
}
.cart_wrap .cart_right .price_wrap .price_cont .price_txt .won {
    font-weight: 400;
    margin-left: -3px;
    display: inline-block;
}
.cart_wrap .cart_right .price_wrap .price_cont.sub_price {
    flex-direction: column;
}
@media (max-width: 991px) {
    .cart_wrap .cart_right .price_wrap .price_cont.sub_price {
        margin-top: -7px;
    }
}
.cart_wrap .cart_right .price_wrap .price_cont.sub_price .price_cont {
    margin-bottom: 0;
}
.cart_wrap .cart_right .price_wrap .price_cont.sub_price .sale_price {
    margin-top: 8px;
}
@media (max-width: 480px) {
    .cart_wrap .cart_right .price_wrap .price_cont.sub_price .sale_price {
        margin-top: 6px;
    }
}
.cart_wrap .cart_right .price_wrap .price_cont.sub_price .origin_price,
.cart_wrap .cart_right .price_wrap .price_cont.sub_price .sale_price {
    width: 100%;
}
.cart_wrap .cart_right .price_wrap .price_cont.sub_price .cont_txt,
.cart_wrap .cart_right .price_wrap .price_cont.sub_price .price_txt {
    font-size: 14px;
    color: #999;
}
.cart_wrap .cart_right .price_wrap .price_cont.sub_price .cont_txt {
    position: relative;
    padding-left: 15px;
}
.cart_wrap .cart_right .price_wrap .price_cont.sub_price .cont_txt::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border: 1px solid #dcdcdc;
    border-right: 0;
    border-top: 0;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.cart_wrap .cart_right .price_wrap .price_cont.price_bottom {
    margin-bottom: 0;
    border-top: 1px solid #f2f2f2;
    padding-top: 20px;
}
.cart_wrap .cart_right .price_wrap .price_cont.price_bottom > div {
    padding: 0;
    border-bottom: 0;
    width: auto;
    float: none;
    text-align: unset;
}
.cart_wrap .cart_right .price_wrap .price_cont.price_bottom .price_txt {
    font-size: 24px;
    font-weight: 600;
}
.cart_wrap .cart_right .price_wrap .price_cont.price_bottom .price_txt font {
    font-weight: 700;
}
.cart_wrap .cart_right .price_wrap .price_cont.price_bottom .price_txt .won {
    font-size: 18px;
}
.cart_wrap .cart_right .price_wrap .point_cont .cont_txt01 {
    color: var(--main-font-point-color);
    font-size: 13px;
    font-weight: 400;
    text-align: right;
    padding-top: 10px;
}
.cart_wrap .cart_right .price_wrap .point_cont .cont_txt01 span {
    color: var(--main-font-point-color);
    font-size: 13px;
    font-weight: 600;
}
.cart_wrap .cart_right .price_wrap .point_cont .cont_txt01 span font {
    font-weight: 600;
}
.cart_wrap .cart_right .cart_buy {
    width: 100%;
}
.cart_wrap .cart_right .cart_buy .cart_buy_btn .form-group {
    margin-bottom: 10px;
}
@media (max-width: 991px) {
    .cart_wrap .cart_right .cart_buy .cart_buy_btn .form-group {
        margin-bottom: 0;
    }
    .cart_wrap .cart_right .price_wrap .point_cont .cont_txt02 {
        text-align: right;
        padding-top: 14px;
    }
    .cart_wrap .cart_right .price_wrap .point_cont .cont_txt02 .sticker {
        font-size: 11px;
        color: #fff;
        background-color: var(--main-box-point-color);
        line-height: 14.5px;
        border-radius: 14px;
        padding: 2px 6px;
        font-weight: 400;
    }
    .cart_wrap .cart_right .price_wrap .point_cont .cont_txt02 .test {
        color: var(--main-box-font-color1);
        font-size: 12px;
        font-weight: 400;
    }
    .cart_wrap .cart_right .price_wrap .point_cont .cont_txt02 .percent {
        color: #777;
        font-size: 12px;
        font-weight: 400;
    }
    .cart-wrap .price-wrap {
        margin-bottom: 20px;
    }
}
.cart_wrap .cart_right .cart_buy .cart_buy_btn .buy-btn {
    margin-top: 20px;
    height: 60px;
    line-height: 58px;
    border: 0;
    border-radius: 5px !important;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    outline: none;
}
.cart_wrap .cart_right .cart_buy .cart_buy_btn .buy-btn[disabled] {
    background: #ededed;
    border-color: #ededed;
    color: #aaaaaa !important;
    cursor: not-allowed;
    opacity: 1;
}

.cart_wrap .cart_right .cart_buy .cart_buy_btn.none_cart_buy .buy-btn {
    background: rgb(221, 221, 221);
    color: #fff;
}
.cart_wrap .cart_right .cart_buy .cart_buy_btn.fixed {
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 10px 0 0;
    z-index: 10;
    margin: 0;
}
@media (max-width: 991px) {
    /* sense:PATCH FIVESENSES.Corp. [MobileCartFixedUX] 승민 요청 — 모바일 하단 고정 네비(mob_foot_menu) 자리를
       주문하기 버튼이 대신함(page/mobile_footer.php가 cart.php에서 그 네비 자체를 렌더링하지 않도록 제외 — 교체 관계).
       네이버페이/견적 버튼 등 나머지 .cart_buy_btn 형제는 고정하지 않고 기존 흐름 그대로 둔다(승민이 지목한
       .cart_buy_btn .buy-btn만 고정 대상). 빈 장바구니(.none_cart_buy)는 "계속 쇼핑하기" 안내 버튼이 이 자리를 대신함. */
    .cart_wrap .cart_right .cart_buy .cart_fixed_order_bar {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 100;
        margin: 0;
        padding: 10px 15px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .cart_wrap .cart_right .cart_buy {
        padding-bottom: 90px; /* 고정 주문바(버튼 높이 50px + 상하 패딩)에 가려지지 않도록 확보 */
    }
}
.cart_wrap .cart_right .cart_buy .cart_btn_1 .btn {
    font-size: 16px;
    font-weight: 500;
    color: var(--main-btn-font-point-color) !important;
    background-color: #fff;
    border: 1px solid var(--main-btn-line-point-color);
    display: block;
    line-height: 58px;
    height: 60px;
    border-radius: 5px !important;
    padding: 0;
    transition: 0.2s;
    width: 100%;
    outline: none;
}
.cart_wrap .cart_right .cart_buy .cart_btn_1 .btn:hover {
    color: #fff !important;
    background-color: var(--main-btn-point-color);
}
@media (max-width: 991px) {
    .cart_wrap .cart_right .cart_buy .cart_btn_1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    .cart_wrap .cart_right .cart_buy .cart_btn_1 .btn,
    .cart_wrap .cart_right .cart_buy .cart_btn_1 button {
        flex: 1;
    }
    .cart_wrap .cart_right .cart_buy .cart_btn_1 .btn {
        font-size: 15px;
        border-radius: 3px !important;
        line-height: 52px;
        height: 52px;
    }
}
.cart_wrap .cart_right .cart_scroll {
    position: absolute;
    top: 0;
    width: 100%;
}
.cart_wrap .cart_right .cart_scroll.fixed {
    position: fixed;
    top: 20px;
}
.cart_wrap .cart_right .cart_Wing {
    position: sticky;
    top: 150px;
    position: -webkit-sticky;
}
@media (max-width: 1200px) {
    .cart_wrap .cart_right {
        width: 27%;
    }
    .cart_wrap .cart_right .cart_scroll {
        position: relative;
    }
}
@media (max-width: 991px) {
    .cart_wrap {
        flex-direction: column;
        gap: 0;
    }
    .cart_wrap .cart_left {
        width: 100%;
    }
    .cart_wrap .cart_left .cart_head {
        border-bottom: 0;
        padding: 0 15px;
        margin-bottom: 40px;
    }
    /* sense:PATCH FIVESENSES.Corp. [MobileCartFixedUX] 카테고리바가 빠지는 자리(승민 요청)에 전체선택/선택삭제/전체삭제를
       스크롤 여부와 무관하게 항상 고정 노출. position:sticky는 #thema_wrapper(overflow-x:hidden → overflow-y가
       auto로 자동 승격, 이 파일 상단)가 스크롤 컨테이너로 잡혀 실제 문서 스크롤과 어긋나 동작하지 않음(사이트
       헤더도 같은 이유로 fixed 사용) — position:fixed로 전환하고 top은 cart.skin.php JS가 헤더 실측 높이로
       동기화한다(fpSyncMobHeadFixed). */
    .cart_wrap .cart_left .cart_head.mob_head {
        width: 100%;
        position: fixed;
        left: 0;
        background: #fff;
        z-index: 20;
        padding: 15px 15px;
        border: 1px solid #f2f2f2;
        border-top: 0;
    }
    .cart_wrap .cart_left .cart_head .radio_check {
        flex-grow: 1;
    }
    .cart_wrap .cart_left .cart_head .radio_check .text {
        font-size: 16px;
    }
    .cart_wrap .cart_left .cart_head .cart_delete {
        position: sticky;
        top: 0;
        right: 0;
    }
    .cart_wrap .cart_left .cart_head .cart_delete button.shop_btn {
        font-size: 13px;
    }
    .cart_wrap .cart_left .cart_body {
        padding: 0 15px;
    }
    .cart_wrap .cart_left .cart_body::before {
        content: "";
        display: block;
        width: calc(100% + 30px);
        height: 9px;
        background: #f9f9fa;
        position: relative;
        left: -15px;
    }
    .cart_wrap .cart_left .cart_body::after {
        content: "";
        display: block;
        width: calc(100% + 30px);
        height: 9px;
        background: #f9f9fa;
        position: relative;
        left: -15px;
    }
    .cart_wrap .cart_left .cart_body > li {
        padding: 30px 0 0;
        border-bottom: 1px solid #e7e7e7;
        flex-wrap: nowrap;
        align-items: flex-start;
        position: relative;
    }
    .cart_wrap .cart_left .cart_body > li:last-child {
        border-bottom: none;
    }
    .cart_wrap .cart_left .cart_body > li.no_cart_list:last-child {
        padding-bottom: 90px;
    }
    .cart_wrap .cart_left .cart_body .cart_check {
        width: 8.921%;
    }
    .cart_wrap .cart_left .cart_body .cart_content {
        flex-wrap: wrap;
        padding-bottom: 30px;
    }
    .cart_wrap .cart_left .cart_body .cart_content .item_detail {
        width: calc(100% - 65px);
        padding-left: 17px;
    }
    .cart_wrap .cart_left .cart_body .cart_content .item_detail .it_sub_name {
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    .cart_wrap .cart_left .cart_body .cart_content .item_detail .it_name {
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        height: 21px;
    }
    .cart_wrap .cart_left .cart_body .cart_content .item_detail .option_wrap li {
        font-size: 13px;
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        height: 15.5px;
    }
    .cart_wrap .cart_left .cart_body .cart_content .cart_item_option {
        margin-top: 20px;
    }
    .cart_wrap .cart_left .cart_body .cart_content .cart_item_option .btn_revice button {
        margin-bottom: 0;
        border-radius: 2.5px;
    }
    .cart_wrap .cart_left .cart_body .cart_content .cart_item_price {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 20px;
    }
    .cart_wrap .cart_left .cart_body .cart_content .cart_item_price .sale_price {
        order: 2;
        margin-bottom: 0;
    }
    .cart_wrap .cart_left .cart_body .cart_content .cart_item_price .origin_price {
        order: 1;
        margin-right: 11px;
    }
    .cart_wrap .cart_left .cart_body .cart_content .cart_item_delete {
        position: absolute;
        top: 21px;
        right: -9px;
    }
    .cart_wrap .cart_right {
        width: 100%;
        margin-top: 40px;
        padding: 0 15px;
        min-height: auto;
    }
    .cart_wrap .cart_right .right_title h1 {
        font-size: 18px;
        font-weight: 600;
    }
    .cart_wrap .cart_right .price_wrap {
        border: 0;
        padding: 0;
        background-color: transparent;
    }
    .cart_wrap .cart_right .price_wrap .price_cont .cont_txt {
        color: var(--main-box-font-color1);
    }
    .cart_wrap .cart_right .price_wrap .price_cont .price_txt {
        color: var(--main-box-font-color1);
    }
    .cart_wrap .cart_right .price_wrap .price_cont .price_txt .won {
        font-size: 16px;
    }
    .cart_wrap .cart_right .cart_buy .cart_buy_btn .buy-btn {
        height: 50px;
        line-height: 48px;
        margin-top: 0;
    }
    .cart_wrap .cart_right .cart_buy .buy-btn-wrap {
        padding: 0;
        margin-bottom: 20px;
    }
}
@media (max-width: 480px) {
    .cart_wrap .cart_left .cart_head {
        margin-bottom: 15px;
    }
    .cart_wrap .cart_left .cart_head .cart_delete button.shop_btn {
        font-size: 14px;
        padding-left: 16px;
    }
    .cart_wrap .cart_left .cart_body .cart_content {
        padding-bottom: 20px;
    }
    .cart_wrap .cart_left .cart_body .cart_content .item_detail .option_wrap {
        margin-top: 4px;
    }
    .cart_wrap .cart_left .cart_body .cart_content .cart_item_option {
        margin-top: 15px;
    }
    .cart_wrap .cart_left .cart_body .cart_content .cart_item_price {
        margin-top: 14px;
    }
    .cart_wrap .cart_left .cart_body .cart_content .cart_item_price .sale_price {
        font-size: 18px;
    }
    .cart_wrap .cart_left .cart_body .cart_content .cart_item_price .sale_price .won {
        font-size: 15px;
    }
    .cart_wrap .cart_left .cart_body .cart_content .cart_item_price .origin_price {
        margin-right: 8px;
    }
    .cart_wrap .cart_right {
        margin-top: 30px;
    }
    .cart_wrap .cart_right .price_wrap .price_cont .price_txt {
        font-size: 16px;
        color: var(--main-box-font-color);
    }
    .cart_wrap .cart_right .price_wrap .price_cont .price_txt .won {
        font-size: 13px;
    }
    .cart_wrap .cart_right .price_wrap .price_cont.sub_price .cont_txt {
        width: 70%;
        font-size: 12px;
    }
    .cart_wrap .cart_right .price_wrap .price_cont.sub_price .price_txt {
        width: 30%;
    }
    .cart_wrap .cart_right .price_wrap .price_cont.price_bottom .price_txt {
        font-size: 23px;
    }
    .cart_wrap .cart_right .price_wrap .price_cont.price_bottom .price_txt .won {
        font-size: 16px;
    }
    .cart_wrap .cart_right .cart_buy .cart_buy_btn .buy-btn {
        height: 52px;
        line-height: 53px;
        font-size: 15px;
        border-radius: 3px !important;
    }
}

@media (max-width: 991px) {
    .cart_style {
        padding: 0;
        margin-bottom: 0;
    }
}

/* 옵션 변경 모달 — 사용: 장바구니 (cartoption.skin.php) */
.mod_option_wrap {
    scrollbar-3dlight-color: #fff;
    scrollbar-base-color: #fff;
    scrollbar-face-color: #fff;
    scrollbar-track-color: #f0f0f0;
    scrollbar-darkshadow-color: #fff;
    scrollbar-highlight-color: #fff;
}
.mod_option_wrap .modal-content {
    box-shadow: 0 0 0;
    border: 0;
    border-radius: 20px;
}
.mod_option_wrap .modal-content .modal_body {
    padding: 50px 20px 30px 30px;
}
.mod_option_wrap .modal-content .modal_body form .modal_it_tit {
    margin-bottom: 20px;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
}
.mod_option_wrap .modal-content .modal_body form .modal_it_tit .modal_img {
    min-width: 65px;
    width: 65px;
    height: 65px;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 15px;
}
.mod_option_wrap .modal-content .modal_body form .padding_b {
    padding-right: 10px;
    padding-top: 20px;
}
.mod_option_wrap .modal-content .modal_body form .padding_b.modal_it_name {
    padding-top: 0;
    margin-bottom: 0;
    width: calc(100% - 75px);
}
.mod_option_wrap .option_form .modal_it_name p.it_sub_name {
    font-size: 13px;
    color: #5d5d5d;
    font-weight: 400;
    margin-bottom: 2px;
    max-height: 31px;
}
.mod_option_wrap .modal-content .modal_body form .point_b {
    font-size: 14px;
    font-weight: 400;
    color: var(--main-box-font-point-color);
    text-align: right;
}
.mod_option_wrap .modal-content .modal_body form .modal_scroll {
    max-height: 50vh;
    overflow: hidden;
    overflow-y: auto;
    padding-right: 10px;
}
@media (max-width: 991px) {
    .mod_option_wrap .modal-content .modal_body {
        padding: 35px 10px 15px 15px;
    }
    .mod_option_wrap .modal-content .modal_body form .padding_b {
        padding-right: 5px;
        font-size: 15px;
    }
    .mod_option_wrap .modal-content .modal_body form .modal_scroll {
        padding-right: 5px;
    }
}
.mod_option_wrap .option_form .option_close {
    display: block;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 30px;
    right: 30px;
}
.mod_option_wrap .option_form .option_close span {
    display: block;
    width: 100%;
    height: 100%;
}
.mod_option_wrap .option_form .option_close span::before {
    content: "";
    display: block;
    width: 1px;
    height: 24px;
    background: #999999;
    position: absolute;
    top: 0;
    right: 10px;
    transform: rotate(-45deg);
}
.mod_option_wrap .option_form .option_close span::after {
    content: "";
    display: block;
    width: 1px;
    height: 24px;
    background: #999999;
    position: absolute;
    top: 0;
    right: 10px;
    transform: rotate(45deg);
}
.mod_option_wrap .option_form .modal_it_name p {
    font-size: 16px;
    line-height: 1.4em;
    color: #0c0c0c;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 44.78px;
}
.mod_option_wrap .option_form .modal_it_name p#tit_price {
    margin-top: 5px;
    display: flex;
    align-items: center;
}
.mod_option_wrap .option_form .modal_it_name p#tit_price #tit_tot_price {
    font-size: 18px;
    font-weight: 700;
    color: #0c0c0c;
    letter-spacing: -0.01em;
}
.mod_option_wrap .option_form .modal_it_name p#tit_price .won {
    font-size: 14px;
    font-weight: 700;
    color: #0c0c0c;
    margin-left: 2px;
}
@media (max-width: 991px) {
    .mod_option_wrap .option_form .modal_it_name p#tit_price {
        margin-top: 3px;
    }
    .mod_option_wrap .option_form .modal_it_name p#tit_price #tit_tot_price {
        font-size: 16px;
    }
}
.mod_option_wrap .option_form .option_tit {
    font-size: 18px;
    color: #222;
    font-weight: 500;
    margin-bottom: 15px;
}
.mod_option_wrap .option_form .option_tit.option02_box {
    margin-top: 30px;
}
.mod_option_wrap .option_form .option_list_box {
    border: 0;
    margin: 0;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #f2f2f2;
}
.mod_option_wrap .option_form .option_list_box ul,
.mod_option_wrap .option_form .option_list_box li,
.mod_option_wrap .option_form .option_list_box ol {
    list-style: none;
}
.mod_option_wrap .option_form .option_list_box .option_sel {
    display: flex;
    width: 100%;
    margin-bottom: 5px;
}
.mod_option_wrap .option_form .option_list_box .option_sel:last-child {
    margin-bottom: 0;
}
@media (max-width: 991px) {
    .mod_option_wrap .option_form .option_list_box {
        margin-top: 15px;
        padding-top: 15px;
    }
    .mod_option_wrap .option_form .option_list_box .option_sel {
        margin-bottom: 5px;
    }
    .mod_option_wrap .option_form .option_list_box + .opt-tbl {
        padding-top: 15px;
    }
}
.mod_option_wrap .option_form .option_list_box .option_sel .option_name {
    font-size: 15px;
    color: #666666;
    font-weight: 400;
    margin-bottom: 0;
    width: 77px;
    line-height: 54px;
}
.mod_option_wrap .option_form .option_list_box .option_sel .td_sit_sel {
    width: calc(100% - 77px);
}
@media (max-width: 991px) {
    .mod_option_wrap .option_form .option_list_box .option_sel .td_sit_sel {
        width: calc(100% - 110px);
    }
}
.mod_option_wrap .option_form .option_list_box .option_sel select {
    box-shadow: 0 0 0;
    border: 1px solid #f2f2f2;
    border-radius: 5px !important;
    height: 54px;
    line-height: 52px;
    padding: 0 18px;
    font-size: 14px;
    color: #0c0c0c;
    font-weight: 400;
    appearance: none;
    -webkit-appearance: none; /* 크롬 화살표 없애기 */
    -moz-appearance: none; /* 파이어폭스 화살표 없애기 */
    appearance: none;
    background: url(../img/icon_select_arrow.png) no-repeat right 20px center;
}
.mod_option_wrap .option_form .option_list_box .option_sel li + li,
.mod_option_wrap .modal-content .modal_body form .modal_scroll .option_list_box .option_sel li:last-child {
    width: calc(100% - 77px);
}
@media (max-width: 991px) {
    .mod_option_wrap .option_form .option_list_box .option_sel li + li,
    .mod_option_wrap .modal-content .modal_body form .modal_scroll .option_list_box .option_sel li:last-child {
        width: calc((100% - 110px));
    }
}
.mod_option_wrap .option_form .change_btn button {
    width: 100%;
    height: 53px;
    line-height: 51px;
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    padding: 0;
    border-radius: 5px !important;
}
.mod_option_wrap .option_form #it_sel_option {
    margin-top: 20px;
}
.mod_option_wrap .option_form #it_sel_option ul {
    margin-bottom: 0;
}
.mod_option_wrap .option_form #it_sel_option #it_opt_added li {
    border: 0;
    margin-bottom: 0;
    padding: 0;
    position: relative;
}
.mod_option_wrap .option_form #it_sel_option #it_opt_added li + li {
    margin-top: 15px;
}
.mod_option_wrap .option_form #it_sel_option .row {
    margin-left: 0;
    margin-right: 0;
    background-color: #f7f7f7;
    border-radius: 5px;
    padding: 20px;
}
.mod_option_wrap .option_form #it_sel_option .row .op_group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}
.mod_option_wrap .option_form #it_sel_option .row .op_box {
    padding: 0;
    width: calc(100% - 100px);
}
.mod_option_wrap .option_form #it_sel_option .row .op_box label {
    display: flex;
    align-items: center;
    justify-content: right;
}
.mod_option_wrap .option_form #it_sel_option .row .op_box label .sale_price {
    color: #0c0c0c;
    font-size: 18px;
    font-weight: 600;
    line-height: 1em;
}
.mod_option_wrap .option_form #it_sel_option .row .op_box label .sale_price .won {
    color: #0c0c0c;
    font-size: 16px;
    font-weight: 600;
}
.mod_option_wrap .option_form #it_sel_option .row .op_box label .origin_price .won,
.mod_option_wrap .option_form #it_sel_option .row .op_box label .origin_price {
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    text-decoration: line-through;
    line-height: 1em;
}
.mod_option_wrap .option_form #it_sel_option .row .op_box .input-group-btn button {
    width: 33px;
    height: 36px;
    border-radius: 0 !important;
    background: #fff;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    outline: none;
}
.mod_option_wrap .option_form #it_sel_option .row .op_box .input-group-btn button span {
    width: 14px !important;
    height: 14px !important;
    position: relative;
}
.mod_option_wrap .option_form #it_sel_option .row .op_box .input-group-btn button.it_qty_plus span::before {
    content: "";
    display: block;
    width: 2px;
    height: 10px;
    background: #0c0c0c;
    position: absolute;
    top: 1px;
    right: 4px;
    transform: rotate(0);
}
.mod_option_wrap .option_form #it_sel_option .row .op_box .input-group-btn button.it_qty_plus span::after {
    content: "";
    display: block;
    width: 10px;
    height: 2px;
    background: #0c0c0c;
    position: absolute;
    top: 5px;
    right: 0;
    transform: rotate(0);
}
.mod_option_wrap .option_form #it_sel_option .row .op_box .input-group-btn button.it_qty_minus span::before {
    content: "";
    display: block;
    width: 10px;
    height: 2px;
    background: #dddddd;
    position: absolute;
    top: 6px;
    right: 0;
    transform: rotate(0);
}
.mod_option_wrap .option_form #it_sel_option .row .op_box .input-group-btn button.it_opt_del span::before {
    content: "";
    display: block;
    width: 1px;
    height: 15px;
    background: #727272;
    position: absolute;
    top: 0;
    right: 5px;
    transform: rotate(-45deg);
}
.mod_option_wrap .option_form #it_sel_option .row .op_box .input-group-btn button.it_opt_del span::after {
    content: "";
    display: block;
    width: 1px;
    height: 15px;
    background: #727272;
    position: absolute;
    top: 0;
    right: 5px;
    transform: rotate(45deg);
}
.mod_option_wrap .option_form #it_sel_option .row .op_box.col-sm-5 {
    margin-left: auto;
    position: static;
    width: 100px;
}
.mod_option_wrap .option_form #it_sel_option .row .op_box.col-sm-5 .input-group {
    display: flex;
    align-items: center;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    position: static;
}
.mod_option_wrap .option_form #it_sel_option .row .op_box.col-sm-5 .input-group > div.input-group-btn.it_del {
    position: static;
}
@media (max-width: 991px) {
    .mod_option_wrap .option_form #it_sel_option .row .op_box.col-sm-5 .input-group > div.input-group-btn.it_del {
        width: 0;
    }
}
.mod_option_wrap .option_form #it_sel_option .row .plus_group {
    width: 33px;
}
.mod_option_wrap .option_form #it_sel_option .row .input_group {
    width: calc(100% - 66px);
}
.mod_option_wrap .option_form #it_sel_option .row > .input_group {
    width: 100%;
    margin-top: 0;
    margin-bottom: 20px;
}
.mod_option_wrap .option_form #it_sel_option .row > .input_group .option_group + .option_group {
    margin-top: 15px;
}
.mod_option_wrap .option_form #it_sel_option .row .input_group input {
    padding: 0;
    height: 36px;
    line-height: 34px;
    border: 0;
    box-shadow: 0 0 0;
    text-align: center;
    font-size: 14px;
    color: #0c0c0c;
    font-weight: 600;
}
.mod_option_wrap .option_form #it_sel_option .row .it_group {
    width: auto;
    display: flex;
    align-items: center;
}
.mod_option_wrap .option_form #it_sel_option .row .del_group {
    position: absolute;
    top: 10px;
    right: 13px;
    width: 30px;
}
@media (max-width: 991px) {
    .mod_option_wrap .option_form #it_sel_option .row .del_group {
        top: 8px;
        right: 6px;
    }
}
.mod_option_wrap .option_form #it_sel_option .row .op_tt {
    padding-bottom: 10px;
    width: calc(100% - 40px);
}
@media (max-width: 991px) {
    .mod_option_wrap .option_form #it_sel_option .row .op_tt {
        padding-bottom: 0;
    }
}
.mod_option_wrap .option_form #it_sel_option .row .op_tt label {
    display: flex;
    font-size: 14px;
    color: #0c0c0c;
}
.mod_option_wrap .option_form #it_sel_option .row span.it_opt_subj {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    max-width: 70%;
}
.mod_option_wrap .option_form #it_sel_option .row .del_group.input-group-btn .it_opt_del {
    background-color: transparent;
}
.mod_option_wrap .option_form #it_sel_option .row .it_group button.it_opt_del {
    margin-left: 14px;
    border: 0;
    background: #f3f3f3;
    position: absolute;
    top: 10px;
    right: 13px;
    background-color: transparent;
    z-index: 10;
}
@media (max-width: 991px) {
    .mod_option_wrap .option_form #it_sel_option .row .it_group button.it_opt_del {
        top: 8px;
        right: 6px;
    }
}
.mod_option_wrap .option_form .tot_price {
    font-size: 16px;
    color: #0c0c0c;
    font-weight: 600;
    text-align: right;
    margin-bottom: 7px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1em;
}
.mod_option_wrap .option_form .tot_price div {
    display: inline-block;
    font-size: 24px;
    font-weight: 600;
    position: relative;
    top: -1px;
}
.mod_option_wrap * {
    scrollbar-3dlight-color: #fff;
    scrollbar-base-color: #fff;
    scrollbar-face-color: #fff;
    scrollbar-track-color: #f0f0f0;
    scrollbar-darkshadow-color: #fff;
    scrollbar-highlight-color: #fff;
}
.mod_option_wrap ::-webkit-scrollbar {
    background: #fff;
    width: 6px;
    float: left;
    position: absolute;
    left: 0;
    height: 5px;
    border-radius: 10px;
}
.mod_option_wrap *::-webkit-scrollbar {
    background: #fff;
    width: 5px;
    float: left;
    position: absolute;
    left: 0;
    height: 5px;
    border-radius: 10px;
}
.mod_option_wrap ::-webkit-scrollbar-button:start:decrement {
    display: block;
    height: 10px;
    background: #fff;
    background-position: center;
}
.mod_option_wrap *::-webkit-scrollbar-button:start:decrement {
    display: block;
    height: 10px;
    background: #fff;
    background-position: center;
}
.mod_option_wrap ::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 10px;
    background: #fff;
    background-position: center;
}
.mod_option_wrap *::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 10px;
    background: #fff;
    background-position: center;
}
.mod_option_wrap ::-webkit-scrollbar-button {
    background: transparent;
    color: #fff;
}
.mod_option_wrap *::-webkit-scrollbar-button {
    background: transparent;
    color: #fff;
}
.mod_option_wrap ::-webkit-scrollbar-track {
    background: #fff;
}
.mod_option_wrap *::-webkit-scrollbar-track {
    background: #fff;
}
.mod_option_wrap ::-webkit-scrollbar-track {
    width: 5px;
    background: #dbdbdb;
    border-radius: 10px;
}
.mod_option_wrap ::-webkit-scrollbar-thumb {
    height: 50px;
    width: 5px;
    background: #dbdbdb;
    border-radius: 10px;
}
.mod_option_wrap *::-webkit-scrollbar-thumb {
    height: 50px;
    width: 5px;
    background: #dbdbdb;
    border-radius: 10px;
}
.mod_option_wrap .option_body .op_warp {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.mod_option_wrap .option_body .option_name {
    position: relative;
    margin-bottom: 15px;
}
.mod_option_wrap .option_body .option_name > label {
    font-size: 14px;
    font-weight: 500;
    color: #666;
}
.mod_option_wrap .option_body .op_warp input[type="radio"].it_option {
    display: none;
}
.mod_option_wrap .option_body .op_warp label {
    margin-bottom: 5px;
    min-width: calc(33% - 5px);
    color: #777;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.4em;
    border: 1px solid #eeeeee;
    margin-right: 2.5px;
    background-color: #fff;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    word-break: break-all;
    height: 100%;
    border-radius: 2px;
}
.mod_option_wrap .option_body .op_warp label:hover {
    color: #0c0c0c;
    border: 1px solid #0c0c0c;
}
.mod_option_wrap .option_body .op_warp input[disabled] + label {
    cursor: not-allowed;
}
.mod_option_wrap .option_body .op_warp input:checked + label {
    color: #0c0c0c;
    border: 1px solid #0c0c0c;
}

.mod_option_wrap .it_opt_list .option_li {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.mod_option_wrap .it_opt_list .option_name {
    position: relative;
    margin-bottom: 15px;
}
.mod_option_wrap .it_opt_list .option_name > label {
    font-size: 14px;
    font-weight: 500;
    color: #666;
}
.mod_option_wrap .it_opt_list .option_li div {
    margin-bottom: 5px;
    flex: 1;
    min-width: calc(33% - 5px);
}
.mod_option_wrap .it_opt_list .option_li input[type="radio"].it_custom {
    display: none;
}
.mod_option_wrap .it_opt_list .option_li label {
    margin-bottom: 5px;
    width: 100%;
    color: var(--main-box-font-color3);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.4em;
    border: 1px solid #f2f2f2;
    margin-right: 2.5px;
    background-color: #fff;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    word-break: break-all;
    height: 100%;
    border-radius: 2px;
}
.mod_option_wrap .it_opt_list .option_li label:hover {
    color: var(--main-btn-font-color);
    border: 1px solid var(--main-btn-line-color);
}
.mod_option_wrap .it_opt_list .option_li input[disabled] + label {
    cursor: not-allowed;
}
.mod_option_wrap .it_opt_list .option_li input:checked + label {
    color: var(--main-btn-font-color);
    border: 1px solid var(--main-btn-line-color);
}

.mod_option_wrap .option_list_box .td_sit_sel {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.mod_option_wrap .option_list_box .option_radio + .option_radio {
    margin-top: 20px;
}
.mod_option_wrap .option_list_box .option_name {
    position: relative;
    margin-bottom: 15px;
}
.mod_option_wrap .option_list_box .option_name > label {
    font-size: 14px;
    font-weight: 500;
    color: #5d5d5d;
}
.mod_option_wrap .option_list_box .td_sit_sel div {
    margin-bottom: 5px;
    min-width: calc(33% - 5px);
}
.mod_option_wrap .option_list_box .td_sit_sel input[type="radio"].it_supply {
    display: none;
}
.mod_option_wrap .option_list_box .td_sit_sel label {
    margin-bottom: 5px;
    width: 100%;
    color: var(--main-box-font-color3);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.4em;
    border: 1px solid #eeeeee;
    margin-right: 5px;
    background-color: #fff;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    word-break: break-all;
    height: 100%;
    border-radius: 2px;
}
.mod_option_wrap .option_list_box .td_sit_sel label:hover {
    color: var(--main-btn-font-color);
    border: 1px solid var(--main-btn-line-color);
}
.mod_option_wrap .option_list_box .td_sit_sel input[disabled] + label {
    cursor: not-allowed;
}
.mod_option_wrap .option_list_box .td_sit_sel input:checked + label {
    color: var(--main-btn-font-color);
    border: 1px solid var(--main-btn-line-color);
}

@media (max-width: 991px) {
    .mod_option_wrap {
        top: unset;
        bottom: -100%;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s ease;
    }
    .mod_option_wrap .modal_bg {
        background: #222;
        opacity: 0.7;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 50;
        display: none;
    }
    .mod_option_wrap.mob {
        display: block;
        bottom: 0;
        opacity: 1;
        visibility: visible;
        overflow: visible;
    }
    .mod_option_wrap .modal-dialog {
        margin: 0;
        transform: translate3d(0, 0, 0) !important;
    }
    .mod_option_wrap .modal-content {
        border-radius: 10px 10px 0 0;
        box-shadow: -4px -16px 98px 0 rgba(0, 0, 0, 0.06);
    }
    .mod_option_wrap .option_form #mod_option_btn {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #e6e6e6;
        border-radius: 2px;
        width: 40px;
        height: 4px;
    }
    .mod_option_wrap .option_form .modal_it_name p {
        font-size: 16px;
    }
    .mod_option_wrap .option_form .modal_it_name p.it_sub_name {
        font-size: 11.5px;
    }
    .mod_option_wrap .option_form .option_close {
        width: 15px;
        height: 15px;
        right: 15px;
        top: 20px;
    }
    .mod_option_wrap .option_form .option_close span {
        position: relative;
    }
    .mod_option_wrap .option_form .option_close span::before {
        height: 20px;
    }
    .mod_option_wrap .option_form .option_close span::after {
        height: 20px;
    }
    .mod_option_wrap .option_form .option_tit {
        font-size: 14px;
    }
    .mod_option_wrap .option_form .option_list_box .option_sel .option_name {
        font-size: 15px;
        line-height: 35px;
        width: 110px;
    }
    .mod_option_wrap .option_form .option_list_box .option_sel select {
        height: 40px;
        line-height: 38px;
        padding: 0 15px;
        font-size: 15px;
        background: url(../img/mmoption_arrow.png) no-repeat right 12.5px center;
        background-size: 9px 5px;
        border-radius: 2.5px !important;
    }
    .mod_option_wrap .option_form #it_sel_option {
        margin-top: 40px;
    }
    .mod_option_wrap .option_form #it_sel_option #it_opt_added li {
        margin-bottom: 15px;
    }
    .mod_option_wrap .option_form #it_sel_option .row {
        padding: 15px 17px 18px 20px;
        border-radius: 2.5px;
    }
    .mod_option_wrap .option_form #it_sel_option .row span {
        font-size: 15px;
    }
    .mod_option_wrap .option_form #it_sel_option .row .op_box .input-group-btn button {
        width: 30px;
        height: 30px;
    }
    .mod_option_wrap .option_form #it_sel_option .row .op_box.col-sm-7 {
        padding-top: 10px;
    }
    .mod_option_wrap .option_form #it_sel_option .row .op_box.col-sm-5 {
        padding-top: 20px;
        margin: 0;
    }
    .mod_option_wrap .option_form #it_sel_option .row .plus_group {
        width: 30px;
    }
    .mod_option_wrap .option_form #it_sel_option .row .input_group {
        width: calc(100% - 60px);
    }
    .mod_option_wrap .option_form #it_sel_option .row > .input_group {
        width: 100%;
    }
    .mod_option_wrap .option_form #it_sel_option .row .input_group input {
        height: 30px;
        line-height: 28px;
        font-size: 13.5px;
    }
    .mod_option_wrap .option_form #it_sel_option .row .it_group {
        width: 30px;
    }
    .mod_option_wrap .option_form #it_sel_option .row .it_group button.it_opt_del {
        margin-left: 8px;
    }
    .mod_option_wrap .option_form .tot_price {
        font-size: 17px;
        margin-bottom: 25px;
    }
    .mod_option_wrap .option_form .tot_price div {
        font-size: 19px;
    }
    .mod_option_wrap .option_form .change_btn button {
        height: 45px;
        line-height: 43px;
        font-size: 15px;
        border-radius: 3px !important;
    }
    .mod_option_wrap .it_opt_list .option_name > label {
        font-size: 13px;
    }
}
@media (max-width: 480px) {
    .mod_option_wrap .option_form .option_close {
        top: 15px;
    }
    .mod_option_wrap .modal-content .modal_body form .padding_b.modal_it_name {
        margin-bottom: 20px;
    }
    .mod_option_wrap .option_form .modal_it_name p {
        font-size: 15px;
    }
    .mod_option_wrap .option_form .option_tit {
        font-size: 13px;
        margin-bottom: 10px;
    }
    .mod_option_wrap .option_form .option_tit.option02_box {
        margin-top: 20px;
    }
    .mod_option_wrap .option_form .option_list_box .option_sel .option_name {
        font-size: 14px;
        margin-bottom: 0px;
    }
    .mod_option_wrap .option_form .option_list_box .option_sel select {
        height: 35px;
        line-height: 33px;
        font-size: 13px;
    }
    .mod_option_wrap .option_form #it_sel_option {
        margin-top: 12px;
    }
    .mod_option_wrap .option_form #it_sel_option .row span {
        font-size: 13px;
        font-weight: 400;
    }
    .mod_option_wrap .option_form #it_sel_option .row .op_box.col-sm-5 {
        padding: 10px 0 0;
        width: 93.5px;
    }
    .mod_option_wrap .option_form #it_sel_option .row .op_box .input-group-btn button span {
        width: 10px !important;
        height: 10px !important;
    }
    .mod_option_wrap .option_form #it_sel_option .row .op_box .input-group-btn button.it_qty_plus span::before {
        right: 3.55px;
        top: 0;
    }
    .mod_option_wrap .option_form #it_sel_option .row .op_box .input-group-btn button.it_qty_plus span::after {
        bottom: 3.55px;
        top: initial;
    }
    .mod_option_wrap .option_form #it_sel_option .row .op_box .input-group-btn button.it_opt_del span::before {
        height: 11px;
        right: 3.55px;
        background: #666;
    }
    .mod_option_wrap .option_form #it_sel_option .row .op_box .input-group-btn button.it_opt_del span::after {
        height: 11px;
        right: 3.55px;
        background: #666;
    }
    .mod_option_wrap .option_form .tot_price {
        margin-bottom: 14px;
    }
    .mod_option_wrap .option_form .change_btn button {
        height: 46px;
        line-height: 44px;
    }
}

/* 카테고리 정렬바 — 사용: 상품리스트·기획전 (category.skin.php) */
.fix_category {
    width: 100%;
}
.fix_category .list_category_ul {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 70px;
    text-align: center;
    list-style: none;
}
.fix_category .list_category_ul > li {
    width: auto;
    margin: 5px;
}
.fix_category .list_category_ul > li > a {
    display: inline-block;
    width: 100%;
    min-width: 65px;
    height: 36px;
    padding: 0 20px;
    border: none;
    border-radius: 20px;
    text-align: center;
    line-height: 37px;
    font-size: 14px;
    font-weight: 500;
    color: #5d5d5d;
    background-color: #f3f3f6;
    overflow: hidden;
}
.fix_category .list_category_ul > li.active > a {
    border: none;
    color: #fff;
    background-color: var(--main-btn-point-color);
}
.fix_category .list_category_ul > li.active {
    position: relative;
    z-index: 2;
}
.fix_category .list_sort {
    width: 100%;
    border: none;
    padding: 0;
    margin-bottom: 40px;
    display: inline-block;
}
.fix_category .list_sort .left_sort {
    float: left;
    color: var(--main-box-font-color);
    font-size: 14px;
}
.fix_category.ev_id .list_sort .left_sort {
    display: none;
}
.fix_category .list_sort .left_sort span {
    color: var(--main-box-font-color);
    font-size: 14px;
    font-weight: 600;
}
.fix_category .list_sort .right_sort {
    float: right;
}
.fix_category .list_sort .right_sort > a {
    color: var(--main-btn-font-color3);
    font-size: 14px;
    padding: 0 8px;
    position: relative;
    line-height: 1em;
}
.fix_category .list_sort .right_sort > a:first-child {
    padding: 0 8px 0 0;
}
.fix_category .list_sort .right_sort > a:last-child {
    padding: 0 0 0 8px;
}
.fix_category .list_sort .right_sort > a::before {
    content: "";
    background-color: #dcdcdc;
    width: 1px;
    height: 13px;
    position: absolute;
    top: 53%;
    left: -2px;
    transform: translateY(-50%);
}
.fix_category .list_sort .right_sort > a:first-child::before {
    display: none;
}
.fix_category .list_sort .right_sort > a.on {
    font-weight: 600;
}

@media (max-width: 991px) {
    .fix_category {
        margin-top: 30px;
    }
    .fix_category .list_category {
        margin-bottom: 15px;
    }
    .fix_category.filter_category .list_category {
        margin-bottom: 0;
    }
    .fix_category .list_sort {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 17.5px;
    }
    .fix_category .list_sort .left_sort {
        margin-bottom: 0;
        font-size: 12px;
    }
    .fix_category .list_sort .left_sort span {
        font-size: 12px;
    }
    .fix_category .list_sort::after,
    .fix_category .list_sort::before {
        display: none;
    }
    .fix_category .list_sort .right_sort {
        font-size: 12px;
    }
    .fix_category .sort_box {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        z-index: 1000;
    }
    .fix_category .list_sort .right_sort > a {
        font-size: 12px;
    }
    .fix_category .list_sort .right_sort > a:first-child {
        padding: 0 5px 0 0;
    }
    .fix_category .list_sort .right_sort > a:last-child {
        padding: 0 0 0 5px;
    }
    .fix_category .sort_box_bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #0c0c0c;
        opacity: 0.6;
    }
    .fix_category .sort_cont {
        background-color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        border-radius: 15px 15px 0 0;
        padding: 41.5px 15px 15px;
    }
    .fix_category .dropdown #sortLabel {
        padding: 0 0 0 11.5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--main-box-font-color2) !important;
        font-size: 13px;
        font-weight: 400;
        background-color: transparent;
        border: none;
    }
    .fix_category .dropdown .caret {
        width: 9.5px;
        height: 5.5px;
        border: none;
        position: relative;
        margin-left: 7px;
    }
    .fix_category .dropdown .caret::before {
        content: "";
        display: block;
        width: 6.5px;
        height: 6.5px;
        border-left: 1px solid var(--main-box-font-color2);
        border-bottom: 1px solid var(--main-box-font-color2);
        position: absolute;
        top: -2px;
        left: -1px;
        transform: rotate(-45deg);
    }

    .fix_category .dropdown .sort_btn {
        margin-top: 15px;
        display: block;
        text-align: center;
        color: #fff;
        font-size: 13px;
        font-weight: 500;
        width: 100%;
        background-color: var(--main-btn-point-color);
        border-radius: 2.5px;
        line-height: 40px;
        border: none;
    }
    .fix_category .dropdown .close_btn {
        display: block;
        width: 12px;
        height: 12px;
        position: absolute;
        top: 15px;
        right: 15px;
    }
    .fix_category .dropdown .close_btn::before {
        content: "";
        display: block;
        width: 15.5px;
        height: 1px;
        background-color: #666666;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .fix_category .dropdown .close_btn::after {
        content: "";
        display: block;
        width: 15.5px;
        height: 1px;
        background-color: #666666;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    .fix_category .dropdown .sort-menu li {
        text-align: center;
        color: #5d5d5d;
        font-size: 13px;
        font-weight: 400;
        line-height: 38px;
    }
    .fix_category .dropdown .sort-menu li input {
        display: none;
    }
    .fix_category .dropdown .sort-menu li input + label {
        width: 100%;
        cursor: pointer;
    }
    .fix_category .dropdown .sort-menu li input:checked + label {
        color: var(--main-btn-font-color);
        font-weight: 500;
        background-color: #f9f9f9;
    }
    .list_sort .dropdown-backdrop {
        display: none !important;
    }
}
.item_sticker {
    height: 19px;
    border-radius: 3px;
    padding: 0 5px;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    line-height: 19px;
    background-color: #000;
    color: #fff;
    margin-top: 9px;
    display: inline-block;
    margin-right: 5px;
}
.item_sticker:last-child {
    margin-right: 0;
}
.item_sticker.best {
    color: #ff4e1f;
    background: rgba(255, 78, 31, 0.1);
}
.item_sticker.new {
    color: #f83249;
    background: rgba(248, 50, 73, 0.1);
}
.item_sticker.discount {
    color: #f83249;
    background: rgba(248, 50, 73, 0.1);
}
.item_sticker.hit {
    color: #f83249;
    background: rgba(248, 50, 73, 0.1);
}
.item_sticker.rec {
    color: #1d32ff;
    background: rgba(29, 50, 255, 0.1);
}
.item_sticker.coupon {
    background: #000;
}
.item_sticker.free_shupping {
    color: #9d9d9d;
    background: rgba(157, 157, 157, 0.1);
    margin-right: 5px;
}

@media (max-width: 991px) {
    .sub_text.ca_it_mb {
        margin-top: 35px;
        margin-bottom: 30px;
    }
    .sub_text h1 .ca_tit {
        font-size: 24px;
    }
    .m_sub_menu .cate_ul > .cate_li > a {
        text-align: center;
    }
}
@media (max-width: 480px) {
    .sub_text.ca_it_mb {
        margin-bottom: 20px;
    }
    .sub_text h1 .ca_tit {
        font-size: 19px;
    }
}

/* 상품 썸네일 확대 효과 */
.item-col .wr-img,
.post-col .wr-img {
    transition: all 0.2s ease-in-out;
}
.item-col:hover .wr-img,
.post-col:hover .wr-img {
    transform: scale(1.15);
}

/* 기획전 — 사용: 기획전 목록·상세 */
.div-title-wrap {
    display: block;
    margin: 0 0 28px;
}
.div-title-wrap .div-title {
    float: none;
    display: block;
    margin: 0;
    padding: 0;
    color: var(--main-box-font-color);
}
.div-title-wrap .div-title > a {
    font-weight: 600;
    font-size: 28px;
    color: var(--main-box-font-color);
}
.div-title-wrap .div-sep-wrap {
    display: none;
}
.event_con {
    margin: 30px 0;
}
.ev_id_tit {
    padding: 70px 0;
    text-align: center;
}
.ev_id_tit .txt {
    font-weight: 600;
    font-size: 38px;
    color: var(--main-box-font-color);
}
.eve_navigation {
    margin-top: 30px;
}
.eve_navigation .container_fix {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.eve_navigation .eve_navi_box {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.eve_navi_box .sub_navi_icon {
    font-size: 12px;
    color: var(--main-box-font-color3);
    margin-right: 10px;
}
.eve_navi_box .sub_navi_icon03 {
    color: var(--main-box-font-color);
}
.eve_navi_box .sub_navi_icon .sign {
    color: var(--main-box-font-color5);
    margin-right: 10px;
}

.event-wrap * {
    font-family: "Pretendard";
}
.event-wrap {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-right: -24px;
}
.event-wrap.cum_3 .eve-cont {
    width: calc(33.333% - 24px);
    margin-right: 24px;
    margin-bottom: 70px;
}
.event-wrap.cum_4 .eve-cont {
    width: calc(25% - 24px);
    margin-right: 24px;
    margin-bottom: 70px;
}
.event-wrap .event-img {
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}
.event-wrap .eve_sticker {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    align-items: center;
    z-index: 1;
}
.event-wrap .eve_icon {
    font-size: 13px;
    color: #fff;
    font-weight: 500;
    line-height: 1em;
    padding: 3px 8.5px;
    border-radius: 3px;
}
.event-wrap .eve_icon.eve_icon_proceeding {
    background-color: #f5726f;
}
.event-wrap .eve_icon.eve_icon_expected {
    background-color: #1673f1;
}
.event-wrap .eve_icon.eve_icon_end {
    background-color: #aaaaaa;
}
.event-wrap .dates_box {
    display: inline-block;
    margin-left: 5px;
    margin-top: -1px;
}
.event-wrap .date_box {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background-color: var(--main-box-point-color);
    line-height: 1em;
    padding: 5.5px 8.5px;
    border-radius: 3px;
}
.event-wrap .date_box .cent {
    margin: 0 3px;
}
.event-wrap .div-title-wrap {
    margin-bottom: 0;
}
.event-wrap .div-title-wrap .div-brand-name {
    margin-top: 20px;
    font-size: 16px;
    color: var(--main-box-font-color2);
    line-height: 1em;
}
.event-wrap .div-title-wrap .div-title {
    margin-top: 13px;
}
.event-wrap .div-title-wrap .div-title > a {
    font-size: 18px;
    line-height: 1.4em;
    font-weight: 500;
}
.event-wrap .div-title-wrap .div-day-text {
    margin-top: 25px;
    font-size: 13px;
    color: var(--main-box-font-color4);
    line-height: 1em;
}

.event-wrap .eve-cont.cont_end .event-img::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(36, 36, 36, 0.4);
}
.event-wrap .eve-cont.cont_end .date_box {
    background-color: #aaaaaa;
}
.event-wrap .eve-cont.cont_end .div-title-wrap .div-brand-name,
.event-wrap .eve-cont.cont_end .div-title-wrap .div-title > a,
.event-wrap .eve-cont.cont_end .div-title-wrap .div-day-text {
    color: #aaa;
}

@media (max-width: 991px) {
    .event-wrap {
        margin-right: -10px;
    }
    .event-wrap.cum_3 .eve-cont,
    .event-wrap.cum_4 .eve-cont {
        width: calc(50% - 10px);
        margin-right: 10px;
        margin-bottom: 30px;
    }
    .event-wrap .event-img {
        border-radius: 4px;
    }
    .event-wrap .eve_sticker {
        top: 8px;
        left: 8px;
    }
    .event-wrap .eve_icon {
        font-size: 11px;
        padding: 4px 5px;
    }
    .event-wrap .date_box {
        font-size: 11px;
        padding: 5px 5px;
    }
    .event-wrap .div-title-wrap .div-brand-name {
        margin-top: 15px;
        font-size: 12px;
    }
    .event-wrap .div-title-wrap .div-title > a {
        font-size: 14px;
    }
    .event-wrap .div-title-wrap .div-day-text {
        margin-top: 18px;
        font-size: 12px;
    } 
    .at-content.ev_id_cont {
        padding-top: 0;
    }
    .div-title-wrap {
        margin-bottom: 14px;
    }
    .div-title-wrap .div-title > a {
        font-size: 15px;
    }
    .event_con {
        margin: 0;
    }
    .ev_id_tit {
        padding: 35px 0;
    }
    .ev_id_tit .txt {
        font-size: 18px;
    }
    .sev_himg {
        margin-bottom: 35px;
        width: calc(100% + 30px);
        margin-left: -15px;
    }
}


/* 찜한상품 요약 — 사용: 마이페이지 */
.mypage-table .mypage-sections section.mp_wishlist .body.section-table .section-table-body .section-cell {
    padding: 10px 0;
    vertical-align: middle;
}
.m_scroll_guide {
    display: none;
    margin-bottom: 10px;
    background-color: #eee;
    text-align: center;
}
.m_scroll_guide > span {
    display: inline-block;
    font-size: 12px;
    line-height: 25px;
    color: #5a5a5a;
}
.wishlist_style .table {
    margin-bottom: 0;
}
.wishlist_style .mobile_table {
    display: none;
}

.wishlist_style .wl_tit > th {
    padding: 18px 0;
    border-top: none;
    border-bottom: 1px solid #f2f2f2;
    font-size: 16px; /* 2026-08 (주)파이브센스_FIVESENSES.Corp. 13px→16px, 온라인견적문의(.oc_wrap th) 원복 기준으로 마이페이지 표 헤더 재통일(승민 최종결정) */
    font-weight: 500;
    line-height: 1em;
    color: var(--main-box-font-color4);
    text-align: center;
}
.wishlist_style .wl_txt > td {
    padding: 20px 0;
    border-bottom: 1px solid #f2f2f2;
    font-size: 14px;
    line-height: 1;
    color: #0c0c0c;
}
.wishlist_style .wl_txt:last-child > td {
    border-bottom: none;
}
.wishlist_style .ri_empty_cell {
    border-top: none;
}
.wishlist_btn .btn + .btn {
    margin-left: 10px;
}

/* 위시리스트 — 사용: 마이페이지 찜한상품 */
.wishlist-skin .wishlist_head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-bottom: 20px;
}
.wishlist-skin .wishlist_head.bottom {
    border-bottom: 0;
    margin-top: 20px;
}
.wishlist-skin .wishlist_head .ch_check .text {
    font-size: 18px;
    color: #222;
    font-weight: 500;
}
.wishlist-skin .wishlist_head .ch_check .ct_totle {
    display: inline-block;
}
.wishlist-skin .wishlist_head .wishlist_delete button.shop_btn {
    font-size: 17px;
    color: #666;
    font-weight: 400;
    width: auto;
    height: auto;
    display: inline-block;
    border: 0;
    padding: 0;
    padding-left: 25px;
    background-color: transparent;
}
.wishlist-skin .wishlist_body {
    background-color: #f9f9f9;
    padding: 0 30px 10px;
    border-radius: 17px;
    overflow: hidden;
}
/* 2026-08 (주)파이브센스_FIVESENSES.Corp. 마이페이지 경유(mypage=1) 시엔 바깥 카드(.wishlist-skin.wishlist_style,
   흰색 카드)가 이미 배경을 갖고 있어, wishlist_body 자체 배경(회색)까지 겹치면 카드 안에 카드가 중첩된 이중 배경으로
   보임 — 마이페이지 경유 컨텍스트에서만 내부 배경을 지워 바깥 카드 하나로 통합(직접 진입 시엔 기존 회색 카드 그대로 유지).*/
.mypage_entry_content .wishlist-skin.wishlist_style .wishlist_body {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

.wishlist-skin .wl_txt .delete_btn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: transparent;
    transition: background-color 150ms ease;
}
.wishlist-skin .wl_txt .delete_btn a:hover {
    background-color: #f7f7f7; /* orderaddress.skin.php .del_address 패턴과 동일 */
}
.wishlist-skin .wl_txt .delete_btn .delete {
    display: block;
    width: 14px;
    height: 14px;
}
.wishlist-skin .wl_txt .delete_btn .delete::before {
    content: "";
    display: block;
    width: calc(100% + 4px);
    height: 1px;
    background-color: #777;
    transform: rotate(-45deg) translate(-5px, 3px);
    transition: background-color 150ms ease;
}
.wishlist-skin .wl_txt .delete_btn .delete::after {
    content: "";
    display: block;
    width: calc(100% + 4px);
    height: 1px;
    background-color: #777;
    transform: rotate(45deg) translate(2px, 4px);
    transition: background-color 150ms ease;
}
.wishlist-skin .wl_txt .delete_btn a:hover .delete::before,
.wishlist-skin .wl_txt .delete_btn a:hover .delete::after {
    background-color: #cf202f; /* orderaddress.skin.php .del_address 패턴과 동일 */
}
.wishlist-skin .wl_txt .img_td {
    padding-right: 20px;
}
.wishlist-skin .wl_txt .img_td a {
    border-radius: 5px;
}
.wishlist-skin .wl_txt .it_sub_name {
    color: var(--main-box-font-color2);
    font-size: 13px;
    line-height: 1.2em;
    margin-bottom: 10px;
}
.wishlist-skin .wl_txt .it_name {
    color: #0c0c0c;
    font-size: 16px;
    line-height: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color 150ms ease;
}
/* 2026-08 상품명 링크 hover — 주문내역 .od_info_title a:hover(439c8fa9)와 동일 톤 */
.wishlist-skin .wl_txt td > a:hover .it_name {
    color: var(--main-btn-point-color);
    text-decoration: underline;
}
/* 2026-08 체크박스 기본톤 개선(구조 변경 없이 네이티브 체크박스 색상·크기만 조정) */
.wishlist-skin .wl_txt input[type="checkbox"],
.wishlist-skin .mobile_table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--main-btn-point-color);
    cursor: pointer;
}
/* 2026-08 품절 뱃지 — 사이트 공통 .item_sticker 톤(장바구니 품절뱃지와 동일 색상) */
.wishlist-skin .wl_txt .item_sticker.soldout,
.wishlist-skin .mobile_table .item_sticker.soldout {
    color: #4c4c4c;
    background-color: #ededed;
    margin-top: 0;
}
.wishlist-skin .wl_txt .option_wrap li {
    margin-top: 10px;
    color: var(--main-box-font-color2);
    font-size: 14px;
    line-height: 1.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.wishlist-skin .wl_txt .option_wrap li span {
    display: inline-block;
    position: relative;
    padding-left: 10px;
}
.wishlist-skin .wl_txt .option_wrap li span::before {
    content: "";
    display: block;
    width: 1px;
    height: 12px;
    background: #c7c7c7;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-10px);
}
.wishlist-skin .wl_txt .item_price {
    padding-right: 30px;
}
.wishlist-skin .wl_txt .item_price .sale_price {
    color: #1b1b1b;
    font-size: 20px;
    font-weight: 600;
}
.wishlist-skin .wl_txt .item_price .sale_price .won {
    font-weight: 500;
}
.wishlist-skin .wl_txt .item_price .origin_price {
    color: #666666;
    font-size: 14px;
    margin-top: 10px;
    text-decoration: line-through;
}
.wishlist_btn {
    display: flex;
    align-items: center;
    justify-content: center;
}
.wishlist_btn .btn {
    margin-top: 60px;
    border-radius: 5px !important;
    border: 1px solid var(--main-btn-line-point-color);
    font-size: 16px;
    font-weight: 500;
    padding: 17px 20px;
    min-width: 240px;
    background-color: #fff;
    color: var(--main-btn-font-point-color);
}
.wishlist_btn .btn.btn-color {
    background-color: var(--main-btn-point-color);
    color: #fff;
}
.wishlist_btn .btn:focus {
    outline: none;
}
.wishlist-skin .div-table.table > tbody > tr > td.text-muted {
    font-size: 16px;
}
.wishlist-skin .div-table.table > tbody > tr > td.text-muted.no_data {
    padding: 160px 0;
}

@media (max-width: 991px) {
    .wishlist-skin .wishlist_body {
        padding: 0;
    }
    .wishlist-skin .wishlist_head {
        padding-bottom: 15px;
        justify-content: space-between;
    }
    .wishlist-skin .wishlist_head .wishlist_delete button.shop_btn {
        margin-bottom: 0;
    }
    .wishlist_style .table {
        display: none;
    }
    .wishlist_style .mobile_table {
        display: block;
        background-color: #f9f9f9;
        padding: 0 15px;
        border-radius: 10px;
        overflow: hidden;
    }
    .wishlist_style .mobile_table .mobile_table_content_info {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
    }
    .wishlist_style .mobile_table .mobile_table_content_box {
        width: 100%;
        padding: 20px 0;
    }
    .wishlist_style .mobile_table .mobile_table_content_box.border_top {
        border-top: 1px solid #e5e5e5;
    }

    .wishlist_style .mobile_table .mobile_table_content.it_text {
        padding-right: 30px;
    }
    .wishlist_style .mobile_table .mobile_table_content.delete_btn {
        position: absolute;
        top: -9px;
        right: -9px;
    }
    .wishlist_style .mobile_table .mobile_table_content > div {
        display: table-cell;
        vertical-align: middle;
    }
    .wishlist_style .mobile_table .mobile_table_content > div.left_text {
        width: 120px;
        padding-left: 10px;
        font-size: 14px;
        font-weight: 500;
    }
    .wishlist_style .mobile_table .radio_check input + label {
        position: relative;
        display: flex !important;
        width: auto !important;
        height: auto !important;
    }
    .wishlist_style .mobile_table .radio_check input + label .circle {
        top: 0;
        margin-right: 0;
        width: 17px;
        height: 17px;
    }
    .wishlist_style .mobile_table .radio_check input + label .circle::before {
        width: 2px;
        height: 5px;
        border-radius: 1.5px;
        top: 6px;
        left: 3px;
    }
    .wishlist_style .mobile_table .radio_check input + label .circle::after {
        width: 2px;
        height: 8px;
        border-radius: 3.5px;
        top: 3px;
        left: 7px;
    }
    .wishlist_style .mobile_table .mobile_table_content > div.right_text .img_box {
        width: 76px;
        height: 76px;
        position: relative;
        margin-right: 15px;
        margin-left: 13px;
    }
    .wishlist_style .mobile_table .mobile_table_content > div.right_text .img_box a {
        border-radius: 2.5px;
        overflow: hidden;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .wishlist_style .mobile_table .mobile_table_content > div.right_text .img_box img {
        width: 76px;
        height: 76px;
    }
    .wishlist_style .mobile_table .mobile_table_content.it_text .it_sub_name {
        color: #666;
        font-size: 11px;
        line-height: 1.2em;
        margin-bottom: 3px;
    }
    .wishlist_style .mobile_table .mobile_table_content.it_text .it_name {
        font-size: 15px;
        font-weight: 500;
        line-height: 21px;
    }
    .wishlist_style .mobile_table .mobile_table_content.it_text .option_wrap li {
        color: #666;
        font-size: 11px;
        margin-top: 3px;
    }
    .wishlist_style .mobile_table .mobile_table_content.it_text .option_wrap li span {
        display: inline-block;
        position: relative;
        padding-left: 10px;
    }
    .wishlist_style .mobile_table .mobile_table_content.it_text .option_wrap li span::before {
        content: "";
        display: block;
        width: 1px;
        height: 10px;
        background: #bebebe;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-9px);
    }

    .wishlist_style .mobile_table .mobile_table_content > div.right_text input[type="checkbox"] {
        margin: 0;
    }
    .wishlist-skin .ch_check input + label {
        display: flex !important;
        width: auto !important;
        height: auto !important;
    }
    .wishlist-skin .ch_check input + label .circle {
        width: 24px;
        height: 24px;
        margin-right: 0;
    }
    .wishlist-skin .wishlist_head .ch_check input + label .circle {
        margin-right: 10px;
    }
    .wishlist-skin .ch_check input + label .circle::before {
        height: 5px;
        top: 10px;
        left: 7px;
    }
    .wishlist-skin .ch_check input + label .circle::after {
        height: 11px;
        top: 6px;
        left: 12px;
    }
    .wishlist_style .mobile_table .delete_btn a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background-color: transparent;
        transition: background-color 150ms ease;
    }
    .wishlist_style .mobile_table .delete_btn a:hover {
        background-color: #f7f7f7; /* orderaddress.skin.php .del_address 패턴과 동일 */
    }
    .wishlist_style .mobile_table .delete_btn .delete {
        display: block;
        width: 12px;
        height: 12px;
    }
    .wishlist_style .mobile_table .delete_btn .delete::before {
        content: "";
        display: block;
        width: calc(100% + 4px);
        height: 1px;
        background-color: #7e7e7e;
        transform: rotate(-45deg) translate(-5px, 3px);
        transition: background-color 150ms ease;
    }
    .wishlist_style .mobile_table .delete_btn .delete::after {
        content: "";
        display: block;
        width: calc(100% + 4px);
        height: 1px;
        background-color: #7e7e7e;
        transform: rotate(45deg) translate(2px, 4px);
        transition: background-color 150ms ease;
    }
    .wishlist_style .mobile_table .delete_btn a:hover .delete::before,
    .wishlist_style .mobile_table .delete_btn a:hover .delete::after {
        background-color: #cf202f; /* orderaddress.skin.php .del_address 패턴과 동일 */
    }
    .wishlist_style .mobile_table .item_price {
        display: flex;
        align-items: end;
        justify-content: right;
        color: #0c0c0c;
    }
    .wishlist_style .mobile_table .item_price .origin_price {
        color: #666666;
        font-size: 13px;
        text-decoration: line-through;
        margin-right: 3px;
    }
    .wishlist_style .mobile_table .item_price .sale_price {
        color: #1b1b1b;
        font-size: 16px;
        font-weight: 600;
    }
    .wishlist_style .mobile_table .item_price .sale_price span {
        font-size: 13px;
        font-weight: 400;
    }
    .wishlist_btn .btn {
        margin-top: 20px;
        min-width: auto;
        width: 50%;
        border-radius: 2.5px;
        font-size: 16px;
        padding: 13px 20px;
    }

    .wishlist_style .mobile_table .mobile_table_content_wrap .no_data {
        text-align: center;
        font-size: 13px;
        width: 100%;
        display: inline-block;
        padding: 90px 0;
    }
}


/* 페이지네이션 변형 */

@media (max-width: 991px) {
    .at-content.type_cont .list-page {
        padding-bottom: 15px;
    }
}

/* 서브 상단 경로(breadcrumb) — 사용: 상품상세 */
.sub_navigation {
    margin: 30px auto 0;
}
.sub_navigation .container_fix {
    display: flex;
    align-items: center;
    padding: 0;
}
.sub_navigation .sub_navi_icon span {
    color: var(--main-btn-font-color4);
    font-size: 14px;
    line-height: 1em;
}
.sub_navigation .sub_navi_icon span.sign {
    margin: 0 5px;
}

/* 게시판 뷰 — 사용: 게시판·주문내역·교환반품 */
.view_style .view_title .view_subject {
    font-weight: 500;
    font-size: 18px;
    color: var(--main-box-font-color);
}

.view_style .view_title .view_info > span {
    display: inline-block;
    padding: 0 10px;
    font-size: 16px;
    line-height: 1.2;
    color: var(--main-box-font-color2);
}

.view_style .view-padding .view-content {
    min-height: 100px;
}

.responsive .view-comment {
    display: block;
    padding-bottom: 20px;
    font-size: 16px;
}

.view_style .comment-box {
    border: 0;
}

/* 댓글 작성 폼 */
.view_style .comment-box .comment-content {
    display: block;
}

.view_style .comment-box .comment-content:after {
    display: block;
    content: "";
    clear: both;
}

.view_style .comment-box .comment-content .comment-cell {
    display: block;
    float: left;
}

.view_style .comment-box .comment-content .comment-cell textarea {
    border: 1px solid #e5e5e5;
    box-shadow: none;
}

.view_style .comment-box .comment-content .comment-cell.comment-submit {
    border: 0;
    color: #fff;
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
게시판 html > skin > basic > list > basic 스킨
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

.sort_btn.btn {
    font-size: 13px;
    padding: 4px 11px;
}

@media (max-width: 991px) {
    .sort_btn.btn {
        font-size: 13px;
        padding: 3px 10px;
    }
}

.list-none {
    color: #777;
    font-size: 16px;
    font-weight: 400;
}
.list-none img {
    display: block;
    margin: 0 auto 15px;
}

@media (max-width: 991px) {
    .list-none {
        font-size: 13px;
    }
    .list-none img {
        width: 41px;
        height: 41px;
    }
}

/* ===== 2026-08 마이페이지 메인 대시보드(html > skin > member > basic > mypage.skin.php) 디자인 통일 + 고도화(2-A) =====
   기준: shop/orderinquiry.php 톤 — 카드 배경 #fff + radius 17px, hover(padding+음수margin+radius8px+bg#fafafa 패턴 재사용)
   .mypage-sections02는 이 파일 전용 클래스(mypage_wing.php 등 다른 페이지와 공유 안 됨, 전수 확인) — 범위 걱정 없이 스코프 가능 */

/* 최근 주문내역/상품문의/1:1문의/나의후기 4개 패널 — 흰 카드로 전환 */
.mypage_style .mypage-table.mypage_wing .mypage-sections02 section {
    background-color: #fff;
    border-radius: 17px;
    padding: 32px; /* 4px 스케일, 여유있는 카드 내부 패딩(24~32px) */
    margin-bottom: 32px;
    box-shadow: none; /* 승민 요청 — 대시보드 하단 4개 패널 엘리베이션 제거(상단 quart_box와 동일 원칙 확대) */
}
.mypage_style .mypage-table.mypage_wing .mypage-sections02 section:last-child {
    margin-bottom: 0;
}
.mypage_style .mypage-table.mypage_wing .mypage-sections02 section .head .orderform_title {
    border-bottom: none; /* 카드 전환 전 레거시 검은 보더(#444) 제거 — 다른 페이지의 orderinquiry_tt와 동일 원칙 */
    padding-bottom: 20px;
}
.mypage_style .mypage-table.mypage_wing .mypage-sections02 section .head .orderform_title a {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 8px;
    transition: background-color 150ms ease;
}
.mypage_style .mypage-table.mypage_wing .mypage-sections02 section .head .orderform_title a:hover {
    background-color: #fafafa;
}
.mypage_style .mypage-table.mypage_wing .mypage-sections02 section .section-table-body .section-cell > a {
    display: inline-block;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 8px;
    transition: background-color 150ms ease;
}
.mypage_style .mypage-table.mypage_wing .mypage-sections02 section .section-table-body .section-cell > a:hover {
    background-color: #fafafa;
}
.mypage_style .mypage-table.mypage_wing .mypage-sections02 section .none-item {
    border-bottom: none; /* 흰 카드 안에서는 불필요한 구분선이라 제거 — 부모 section이 이미 흰 카드라 배경 추가 안 함 */
    padding: var(--fp-empty-pad-desktop, 192px) 0; /* [EmptyStateTokens] 마이페이지 빈상태 전역 통일 — point.php 2배 확대 기준값(기존 120px에서 재확정) */
}
@media (max-width: 991px) {
    .mypage_style .mypage-table.mypage_wing .mypage-sections02 section .none-item {
        padding: var(--fp-empty-pad-mobile, 96px) 0;
    }
}
/* 최근주문내역/상품문의/1:1문의/나의후기 리스트 — 마지막 항목 하단 구분선 제거(승민 요청, point.php/coupon.php li:last-child 패턴과 동일 원칙).
   위시리스트(.mp_wishlist)는 요청 범위 밖이라 제외 */
.mypage_style .mypage-table.mypage_wing .mypage-sections02 section:not(.mp_wishlist) .section-table-body .section-table-row:last-child .section-cell {
    border-bottom: 0;
}

/* 주문/상품문의/1:1문의/리뷰 상태 뱃지(mp_badge) — 디자인시스템 배지 규칙(radius 6px 고정, 한 단어) 미러링 */
.mypage_style .mp_badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}
.mypage_style .mp_badge--progress {
    color: #1a6dff;
    background-color: rgba(26, 109, 255, 0.08); /* 디자인시스템 --fp-primary 8% 미러링(파일 내 기존 open-state 포커스링과 동일 RGB) */
}
.mypage_style .mp_badge--done {
    color: #1a9d5c; /* 디자인시스템 --fp-success 근사 미러링(성공 그린, 이 파일 최초 도입) */
    background-color: rgba(26, 157, 92, 0.1);
}
.mypage_style .mp_badge--muted {
    color: #999999; /* 파일 내 기존 종료상태 톤(.od_state.end) 재사용 */
    background-color: #f5f5f5;
}

/* 주문현황 요약(inquirys) — 컨트롤러가 이미 조회해 두던 값을 통계카드형으로 복원(2-A, 신규 쿼리 없음) */
.mypage_style .pc_mypage .inquirys {
    margin-bottom: 32px;
}
.mypage_style .pc_mypage .inquirys .title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 16px;
}
.mypage_style .pc_mypage .inquirys .title .pull-left {
    font-size: 24px; /* 20px→24px — 최근주문내역 등 다른 섹션 타이틀(.orderform_title, 24px)과 동일한 "제목" 위계로 통일 */
    font-weight: 500;
    color: var(--main-box-font-color);
}
.mypage_style .pc_mypage .inquirys .title .pull-right {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 400;
    color: var(--main-box-font-color2);
    transition: background-color 150ms ease;
}
.mypage_style .pc_mypage .inquirys .title .pull-right:hover {
    background-color: #fff; /* 카드형 전체보기 버튼과 달리 이 타이틀은 페이지 배경(#f9f9f9) 위에 바로 놓여 #fafafa로는 대비가 거의 없어 호버가 안 보였음 — 흰색으로 대비 확보 */
}
.mypage_style .pc_mypage .inquirys .inquiry-cnt-wrap {
    display: flex;
    gap: 16px;
}
.mypage_style .pc_mypage .inquirys .inquiry-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 12px;
    background-color: #fff;
    border-radius: 17px;
    box-shadow: none; /* 승민 요청 — 주문현황 요약 미니 스탯카드 엘리베이션 제거(상단 quart_box와 동일 원칙 확대) */
    transition: background-color 150ms ease, border-radius 150ms ease;
}
/* Round-LinkFilter — div에서 a로 전환(클릭 시 orderinquiry.php/refund_list.php 상태필터 이동), box-shadow가
   꺼져있어(위) shadow 대신 bg+radius 트랜지션으로 클릭 가능함을 알림(이 세션 hover 톤 재사용) */
.mypage_style .pc_mypage .inquirys .inquiry-box:hover {
    background-color: #fafafa;
    border-radius: 20px;
}
.mypage_style .pc_mypage .inquirys .inquiry-box .number {
    font-size: 28px;
    font-weight: 600;
    color: var(--main-box-font-point-color);
    font-variant-numeric: tabular-nums; /* 디자인시스템 수치 표기 규칙 */
}
.mypage_style .pc_mypage .inquirys .inquiry-box .number.zero {
    color: #cccccc;
}
.mypage_style .pc_mypage .inquirys .inquiry-box .number.zero + .type {
    color: #aaaaaa; /* 0건 카드는 라벨도 함께 낮은 위계로 — 유효 카드와의 시각 대비 강화 */
}
.mypage_style .pc_mypage .inquirys .inquiry-box .type {
    font-size: 13px;
    font-weight: 500;
    color: #777777;
}

/* 모바일 — 대시보드 다른 화면(마이페이지 요약카드)과 동일한 흰 배경 카드 + 탭 피드백
   (2026-08 후속) 배경색만 #fff로 세팅되어 있었으나 페이지 자체 배경도 흰색이라 카드 경계가 전혀 보이지 않던 문제 —
   radius(디자인시스템 모바일 13px 규칙)·카드 간 여백을 더해 실제 카드로 보이도록 보강.
   페이지 배경(#f9f9f9)은 page/top_banner.php $mypage_bg_extra_always에 mypage.php 추가로 확보 */
.mypage_style .mob_mypage .mob_section .mob_container {
    background-color: #fff;
    border-radius: 13px;
    margin: 0 16px 16px;
}
.mypage_style .mob_mypage .mob_section:first-child .mob_container {
    margin-top: 16px;
}
.mypage_style .mob_mypage .mob_section .section_li a {
    transition: background-color 150ms ease;
}
.mypage_style .mob_mypage .mob_section .section_li a:hover,
.mypage_style .mob_mypage .mob_section .section_li a:active {
    background-color: #fafafa;
}
.mypage_style .mob_mypage .mob_section01 .myicon_list a .icon_box {
    transition: background-color 150ms ease;
}
.mypage_style .mob_mypage .mob_section01 .myicon_list a:hover .icon_box,
.mypage_style .mob_mypage .mob_section01 .myicon_list a:active .icon_box {
    background-color: #f7f7f7; /* --fp-surface-soft 미러링, 세션 전반에서 재사용 중인 hover 톤 */
}