@charset "UTF-8"; 

/**
 * 메인 헤더(.main-header) 전역 스타일
 * include/header.html에서 로드 — 레거시/컴포넌트 모드 모두 동일 렌더링 보장
 *
 * [구조]
 *  1) 페이지 골격 오버라이드 (#wrap padding-top 제거 — 새 헤더는 fixed가 아님)
 *  2) 헤더 격리 레이어 (box-sizing, font 상속 차단)
 *  3) 헤더 레이아웃 (renewal 참조 CSS와 동일한 단순 flex 체인)
 *  4) 매장명 드롭다운 버튼
 *  5) 사용자 정보 팝업 (격리된 스타일)
 *
 * [공통 기능 CSS 의존성]
 *  헤더는 oPopupController(popup.js)를 통해 쪽지·알림 팝업을 열기 때문에
 *  해당 팝업의 레이아웃 CSS가 반드시 함께 로드되어야 한다.
 *  @import를 통해 이 파일 하나만 로드하면 공통 팝업 기능이 보장된다.
 *  → 새로운 공통 팝업 CSS가 추가될 때는 아래 @import 목록에 추가할 것.
 */


/*
 * oPopupController(popup.js) 레이어 팝업 전용 CSS
 * 출처: public_html_old/css/main.css 48-155번 라인
 * main.css 전체를 로드하면 renewal CSS와 충돌하므로, 팝업 동작에 필요한 규칙만 여기에 포함.
 * → 새로운 팝업 전용 CSS가 필요할 때는 이 섹션에 추가할 것.
 */

/* 팝업 컨테이너 */
div.pp-container {
    position: relative;
    margin: 0 auto;
    padding: 40px;
    text-align: left;
    border-radius: 5px;
    background-color: #FFF;
}
div.pp-container.s780 { width: 780px; }
div.pp-container.s710 { width: 710px; }
div.pp-container.s700 { width: 700px; }
div.pp-container.s620 { width: 620px; }
div.pp-container.s580 { width: 580px; }
div.pp-container.s540 { width: 540px; }
div.pp-container.s350 { width: 350px; }
div.pp-container.s230 { width: 230px; }
div.pp-container.combobox { padding: 0 !important; }

div.pp-container .pp-head {
    border-bottom: 1px solid #292929;
    min-height: 36px;
}

div.pp-container button.pp-btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    overflow: hidden;
    text-indent: -1000px;
    background: url("/img/pp_btn_close.png") center no-repeat;
    background-size: 100%;
    border:0;
}

div.pp-container span.pp-title {
    vertical-align: top;
    font-size: 16px; /* 기존: 1.333rem @ 12px base = 16px. px 고정으로 renewal rem 기준 차이 방지 */
    font-weight: var(--fw-light, 300);
    text-align: left;
}

/* 레이어 팝업 오버레이 구조 */
.layer-popup.layer-popup-wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    /* flex-start + padding-top: 내부 load 후 팝업 높이가 변해도 위치가 튀지 않음
       (center 방식은 height 변화 시 translate 재계산으로 팝업이 위로 점프함) */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 150px;
    box-sizing: border-box;
}

.layer-popup .layer-popup-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.layer-popup .layer-popup-bg.layer-popup-bg-dimmed {
    background-color: #000;
    filter: alpha(opacity=20);
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)';
    -khtml-opacity: 0.2;
    -moz-opacity: 0.2;
    opacity: 0.3;
}

.layer-popup .layer-popup-cont {
    /* flexbox 부모(.layer-popup-wrap)가 중앙 정렬하므로 position/top/left 불필요.
       JS가 설정하는 margin-top/margin-left를 !important로 무력화. */
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin-top: 0 !important;
    margin-left: 0 !important;
    overflow: hidden;
    max-height: calc(100vh - 190px); /* 150px top padding + 40px bottom margin */
    overflow-y: auto;
}

/* ===== 1) 페이지 골격 오버라이드 ===== */
/* 스크롤바 항상 표시: 페이지 전환 시 스크롤바 유무로 인한 가로 레이아웃 쉬프트 방지
   (style.css는 overflow-y:scroll, common.css는 미설정이라 페이지마다 달랐음) */
html {
    overflow-y: scroll !important;
}
/* 이전 header는 position:fixed로 #wrap에 padding-top:50px이 필요했으나, 새 헤더는 flow 안에 있음 */
#wrap {
    padding-top: 0 !important;
}

/* ===== 2) 헤더 격리 레이어 ===== */
/* common.css의 html { font-size:12px; line-height:1.4 } 등 전역 상속을 차단 */
#main-header-root,
#main-header-root *,
#main-header-root *::before,
#main-header-root *::after {
    box-sizing: border-box;
}
#main-header-root {
    
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #292929;
}
#main-header-root a {
    text-decoration: none !important;
    /*color: inherit !important;*/
}
#main-header-root button {
    font: inherit;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

/* ===== 3) 헤더 레이아웃 (renewal/css/style.css 참조와 동일) ===== */
:root {
    --main-header-height: 64px;
    --rn-subnav-height: 52px;
}
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: var(--main-header-height);
    background: #fff;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}
body:has(.main-header) {
    padding-top: var(--main-header-height);
}
/* 커뮤니티 서브네비가 함께 fixed 되는 페이지에서 본문이 가려지지 않도록 합산 padding */
body:has(.main-header):has(.rn-subnav--community) {
    padding-top: calc(var(--main-header-height) + var(--rn-subnav-height));
}
.main-header-inner {
    width: 1200px;
    max-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.main-header-left {
    display: flex;
    align-items: center;
}
.main-logo {
    width: 160px;
    display: flex;
    align-items: center;
}
.main-logo-img {
    height: 18px;
    width: auto;
}

/* --- 네비게이션 --- */
.main-nav {
    display: flex;
    gap: 40px;
}
.main-nav-item {
    position: relative;
}
/* 메뉴 링크: renewal 참조와 동일하게 단순 — height·display 강제 없음 */
.main-nav-link {
    font-size: 18px !important;
    font-weight: var(--fw-bold, 600) !important;
    color: #292929;
    line-height: 1.6 !important;
    
    margin: 0 !important;
    padding: 0 !important;
}
.main-nav-link:hover,
.main-nav-link.active {
    color: #2F8BFF;
}

/* --- 드롭다운 서브메뉴 --- */
.main-nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column;
    gap: 12px;
    /*padding: 36px 24px 24px;*/
    padding: 24px;  /* 상하좌우 동일하게 24px */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    z-index: 100;
}
.main-nav-item:hover .main-nav-dropdown {
    display: flex;
}
.main-nav-dropdown-link {
    font-size: 18px !important;
    font-weight: var(--fw-bold, 600) !important;
    color: #292929;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.main-nav-dropdown-link:hover, .main-nav-dropdown-link-hover {
    color: #2F8BFF;
}

/* --- 헤더 우측 (이용권 문구, 아이콘, 매장명) --- */
.main-header-right {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}
/* 쪽지/알림: 아이콘 2개를 1행 유지, 팝업 위치 기준 */
.main-header-alarm-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    position: relative;
}

/* ===== 쪽지/알림 팝업 =====
 * 사용자 정보 드롭다운(#popup-user-info)과 동일: 문서 격리 + px 고정 + !important로 페이지 CSS 차단.
 * 기존 구현을 그대로 가져와도 페이지 기본 CSS가 다르면 다르게 보이므로, 팝업만 완전 격리.
 */
.main-header-right .list-box.none {
    display: none !important;
}
.main-header-right .list-box .template,
.main-header-right .list-box .template.none {
    display: none !important;
    visibility: hidden !important;
}

/* #popup-user-info와 동일: 팝업 전체 margin/padding 리셋 */
.main-header-right .list-box,
.main-header-right .list-box *,
.main-header-right .list-box *::before,
.main-header-right .list-box *::after {
    box-sizing: border-box;
}
.main-header-right .list-box,
.main-header-right .list-box *,
.main-header-right .list-box *::before,
.main-header-right .list-box *::after {
    margin: 0;
    padding: 0;
}
.main-header-right .list-box ul,
.main-header-right .list-box ol {
    list-style: none;
}
.main-header-right .list-box {
    
    font-size: 12px !important;
    color: #292929;
    line-height: 1.4;
    text-align: left !important;
}
.main-header-right .list-box button {
    background: none;
    border: 0;
    outline: none;
    font-family: inherit;
    cursor: pointer;
    vertical-align: middle;
}
.main-header-right .list-box a {
    color: inherit;
    text-decoration: none;
}
.main-header-right .list-box dl,
.main-header-right .list-box dt,
.main-header-right .list-box dd {
    display: block;
}

.main-header-right .list-box {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 8px;
    width: 410px;
    min-width: 360px;
    border: solid 1px #dcdcdc;
    border-radius: 8px;
    background-color: #fff;
    overflow: hidden;
    text-align: left;
    z-index: 10000;
    padding-top: 0;
}
.main-header-right .list-box:after {
    content: "";
    display: block;
    width: 12px;
    height: 10px;
    position: absolute;
    background: url("/img/home/edge.png");
    background-size: 12px auto;
    top: -10px;
    right: 24px;
    left: auto;
}
/* 헤더 행: absolute로 상단 고정, .inner에 padding-top으로 공간 확보 → 첫 행 겹침 방지 */
.main-header-right .list-box .tit {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 55px !important;
    min-height: 55px !important;
    display: block !important;
    z-index: 2;
    padding: 0 20px 0 25px !important;
    font-size: 15px !important;
    font-weight: var(--fw-light, 300) !important;
    line-height: 55px !important;
    color: #292929;
    border-bottom: solid 1px #dcdcdc;
    background: #fbfbfb;
    overflow: hidden;
    box-sizing: border-box;
}
.main-header-right .list-box .tit::after {
    content: "";
    display: block !important;
    clear: both;
    height: 0;
    visibility: hidden;
}
.main-header-right .list-box .inner {
    display: block !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    overflow-y: auto;
    max-height: 375px;
    min-height: 0;
}
/* 헤더(55px) 아래부터 목록 시작: 목록 ul에 직접 padding 적용(전역 리셋 영향 회피) */
.main-header-right .list-box .list-alarm,
.main-header-right .list-box .list-alarm-empty {
    padding-top: 56px !important;
}
/* JS 토글: .none인 쪽은 완전 비표시·공간 제거(빈 메시지가 목록 아래 겹쳐 보이는 현상 방지) */
.main-header-right .list-box .list-alarm.none,
.main-header-right .list-box .list-alarm-empty.none {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* 버튼 형태 고정: #popup-user-info 메뉴처럼 작은 글자 + 테두리 */
.main-header-right .list-box .btn-alarm-all {
    float: right;
    width: 74px !important;
    height: 29px !important;
    margin: 13px 0 0 0 !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    line-height: 27px !important;
    border-radius: 4px;
    background: #fff !important;
    border: 1px solid #dcdcdc !important;
    color: #696969 !important;
    cursor: pointer;
    white-space: nowrap;
    text-align: center !important;
}
.main-header-right .list-box .btn-alarm-all:hover,
.main-header-right .list-box .btn-alarm-all:focus {
    background: #ededed !important;
    border-color: #dcdcdc !important;
    color: #696969 !important;
}
.main-header-right .list-box .btn-alarm-all:active {
    border-color: #2f8bff !important;
}
.main-header-right .list-box .btn-alarm-all.reply-none {
    opacity: 0.65;
}
.main-header-right .list-box .list-alarm {
    overflow: visible;
    line-height: 1;
    height: auto;
    min-height: 0;
}
.main-header-right .list-box .list-alarm li {
    width: 100%;
    box-sizing: border-box;
    height: 75px;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #e6e6e6;
    clear: both;
}
.main-header-right .list-box .list-alarm li:last-child {
    border-bottom: 0;
}
.main-header-right .list-box .list-alarm li:first-child {
    margin-top: 0;
}
.main-header-right .list-box .list-alarm li.unchecked:hover,
.main-header-right .list-box .list-alarm li.checked:hover {
    background: #ecf4ff;
}
.main-header-right .list-box .list-alarm li.active {
    background: #d9eaff;
}
.main-header-right .list-box .list-alarm li a {
    width: 100%;
    box-sizing: border-box;
    height: 75px;
    padding: 15px 20px 15px 25px !important;
    display: block;
    text-decoration: none;
    font-size: 12px !important;
    font-weight: 300;
    color: #292929;
    overflow: hidden;
}
.main-header-right .list-box .list-alarm li.unchecked a {
    font-weight: 300;
    color: #292929;   
}
.main-header-right .list-box .list-alarm li.checked a {
    font-weight: 300;
    color: #cccccc;
}
/* 아이콘(dt)과 글(dd) 한 행: float + BFC, 기존 구현과 동일 레이아웃 */
.main-header-right .list-box .alarm_txt {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    display: block;
}
.main-header-right .list-box .alarm_txt dt {
    width: 40px !important;
    height: 50px !important;
    min-height: 50px !important;
    float: left !important;
    display: block !important;
    margin: 0 15px 0 0 !important;
    padding: 30px 0 0 0 !important;
    font-size: 11px !important;
    color: #999;
    text-align: center;
    background-position: center 5px;
    background-repeat: no-repeat;
    background-size: 20px auto;
}
.main-header-right .list-box .alarm_txt dt.i_message,
.main-header-right .list-box .alarm_txt dt.i_event,
.main-header-right .list-box .alarm_txt dt.i_notice,
.main-header-right .list-box .alarm_txt dt.i_reply {
    width: 40px;
    height: 50px;
    padding-top: 30px;
    background-position: center 5px;
    background-repeat: no-repeat;
    background-size: 20px auto;
}
.main-header-right .list-box .alarm_txt dt.i_message {
    background-image: url('/img/ic_message.png');
}
.main-header-right .list-box .alarm_txt dt.i_notice {
    background-image: url('/img/ic_notice.png');
}
.main-header-right .list-box .alarm_txt dt.i_event {
    background-image: url('/img/ic_event.png');
}
.main-header-right .list-box .alarm_txt dt.i_reply {
    background-image: url('/img/ic_reply.png');
}
.main-header-right .list-box .alarm_txt dd {
    font-size: 11px !important;
    font-weight: 300;
    padding: 3px 0 0 0 !important;
    margin: 0 !important;
    overflow: hidden;
    min-width: 0;
    display: block !important;
}
.main-header-right .list-box .alarm_txt dd:last-child {
    font-size: 14px !important;
    font-weight: 300;
    padding: 0 !important;
    margin-top: 11px !important;
    height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.main-header-right .list-box .alarm_txt dd .sub-title,
.main-header-right .list-box .alarm_txt dd span.alarm_time {
    font-size: 11px !important;
    color: #999;
}
.main-header-right .list-box .alarm_txt dd span.alarm_preview {
    display: inline-block;
    max-width: 120px;
    font-size: 11px !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: bottom;
}
.main-header-right .list-box .alarm_txt dd span.alarm_time:before,
.main-header-right .list-box .alarm_txt dd span.alarm_preview:before {
    content: "ㅣ";
    padding: 0 5px;
    color: #999;
    font-weight: var(--fw-light, 300);
    font-size: 11px !important;
}
.main-header-right .list-box .alarm-none {
    overflow-y: hidden;
    height: 430px;
}
.main-header-right .list-box .alarm-none li {
    color: #696969;
    font-size: 14px !important;
    line-height: 430px;
    padding: 0 !important;
    margin: 0 !important;
}
.main-header-right .list-box .list-alarm-empty.alarm-none li {
    line-height: normal !important;
    padding: 24px 16px !important;
    font-size: 14px !important;
    height: auto !important;
}
.main-header-right .list-box .list-alarm-empty .text-center {
    text-align: center !important;
    color: #696969;
    font-size: 14px !important;
}

.main-header-link{
    color: var(--Black, #000);
    /* 14M */
    
    font-size: var(--14, 14px);
    font-style: normal;
    font-weight: var(--fw-light, 300);
    line-height: 160%; /* 22.4px */
}
/* 이용권 문구(월정액 등) */
.main-subscription {
    font-size: 14px !important;
    font-weight: var(--fw-bold, 600) !important;
    color: #292929 !important;
    line-height: 1.6 !important;
    
}
.main-icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
}
.main-badge {
    position: absolute;
    top: -4px;
    right: -5px;
    width: 18px;
    height: 14px;
    background: #e0375e;
    border-radius: 999px;
    gap: 10px;

    display: none;
    font-size: 11px;
    color: #fff;
    text-align: center;
    /* font-family: 'Pretendard Variable'; */
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-top: 1px;
}

}

/* ===== 4) 매장명 드롭다운 버튼 ===== */
.main-shop-dropdown {
    position: relative;
}
.main-shop-dropdown #popup-user-info {
    top: 100%;
    left: auto;
    right: 0;
    margin-top: 4px;
}
/* common.css의 button 리셋(background:none 등)에 덮이지 않도록 고정 */
#main-header-root button.main-shop-btn {
    display: flex !important;
    align-items: center;
    gap: 4px;
    width: 120px;
    height: 40px;
    padding: 0 12px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px;
    background: #fff !important;
    background-color: #fff !important;
    font-size: 14px !important;
    font-weight: var(--fw-bold, 600) !important;
    color: #292929;
    
    cursor: pointer;
    outline: none;
}
#main-header-root button.main-shop-btn span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align:left;
}
#main-header-root button.main-shop-btn > svg {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
#main-header-root button.main-shop-btn.is-open > svg {
    transform: rotate(180deg);
}

/* ===== 5) 사용자 정보 드롭다운 팝업 =====
 * 팝업을 문서와 격리해 common.css 의존 제거
 * 폰트는 px 고정 (rem은 페이지별 root에 따라 달라지므로 사용 안 함) */
#popup-user-info,
#popup-user-info * {
    box-sizing: border-box;
}
#popup-user-info,
#popup-user-info *,
#popup-user-info *::before,
#popup-user-info *::after {
    margin: 0;
    padding: 0;
}
#popup-user-info {
    position: absolute;
    top: 40px;
    left: calc(50% + 324px);
    z-index: 10000;
    background: #fff;
    width: 220px;
    min-width: 220px;
    flex-shrink: 0;
    box-sizing: border-box;
    display: none;
    color: #292929;
    text-align: left !important;
    font-size: 12px;
    line-height: 1.4;
    
    border: 1px solid #1780ff;
}
#popup-user-info .popup-menu {
    display: block !important;
    width: 100%;
    padding-top: 21px;
    text-align: left !important;
    box-sizing: border-box;
}
#popup-user-info .popup-menu .user-profile {
    display: block !important;
    width: 100%;
    padding: 0 16px;
    text-align: left !important;
    box-sizing: border-box;
}
/* 기존 구현과 동일: inline-block 한 줄, 로고가 왼쪽에 붙고 닉네임은 바로 옆(간격만) */
#popup-user-info .popup-menu .user-profile .user-nick {
    display: block !important;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    white-space: nowrap;
    box-sizing: border-box;
}
#popup-user-info .popup-menu .user-profile .user-nick .user-photo-cover {
    display: inline-block;
    vertical-align: middle;
    background-color: #A4ACBC;
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 10px;
    width: 30px;
    height: 30px;
    overflow: hidden;
}
#popup-user-info .popup-menu .user-profile .user-nick .user-photo-cover .user-photo {
    width: 100%;
    height: 100%;
}
#popup-user-info .popup-menu .user-profile .user-nick .user-name,
#popup-user-info .popup-menu .user-profile .user-nick .user-name-suffix {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: var(--fw-bold, 600) !important;
    color: #292929 !important;
}
#popup-user-info .popup-menu .user-profile .user-nick .user-name {
    max-width: 80px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
/* 닉네임+님 한 줄 유지, 좌측 정렬 (다른 페이지에서 줄바꿈/중앙정렬 방지) */
#popup-user-info .popup-menu .user-profile .user-nick .user-name-group > div:first-child {
    display: block !important;
    width: 100%;
    line-height: 1.4 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden;
}
#popup-user-info .popup-menu .user-profile .user-id {
    font-size: 12px !important;
    font-weight: var(--fw-light, 300) !important;
    color: #292929 !important;
}
#popup-user-info .popup-menu .user-profile .user-id:before {
    content: "ID :";
    margin-right: 5px;
}
#popup-user-info .popup-menu .user-profile .user-nick .user-name-group {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    max-width: calc(100% - 50px);
    overflow: hidden;
}
#popup-user-info .popup-menu .user-payment {
    margin-top: 21px;
    background-color: #F2F3F5;
    padding: 11px 15px;
    text-align: left;
    min-height: 60px;
}
#popup-user-info .popup-menu .user-payment .product-name {
    display: block;
    font-size: 12px !important;
    font-weight: var(--fw-bold, 600) !important;
    color: #2F8BFF !important;
}
#popup-user-info .popup-menu .user-payment .product-name.no-product {
    line-height: 36px;
}
#popup-user-info .popup-menu .user-payment .product-expire-date {
    display: block;
    font-size: 12px !important;
    font-weight: var(--fw-light, 300) !important;
    color: #292929 !important;
}
#popup-user-info .popup-menu .user-payment .use-product,
#popup-user-info .popup-menu .user-payment .buy-product {
    margin-top: 12px;
    position: relative;
}
#popup-user-info .popup-menu .user-payment .icon-arrow {
    right: 0;
    position: absolute;
    top: 5px;
}
#popup-user-info .popup-menu .user-payment .use-product .product-name,
#popup-user-info .popup-menu .user-payment .buy-product .product-name {
    background-repeat: no-repeat;
    background-position: 90px 1px;
    width: 108px;
    display: inline-block;
}
#popup-user-info .popup-menu .user-payment .use-product .product-name {
    background-image: url(/img/icon_coin.png);
}
#popup-user-info .popup-menu .user-payment .buy-product .product-name {
    background-image: url(/img/icon_ticket.png);
}
#popup-user-info .popup-menu .user-menu {
    margin-top: 10px;
}
#popup-user-info .popup-menu .user-menu ul {
    font-size: 0;
}
#popup-user-info .popup-menu .user-menu ul li {
    display: block;
    height: 40px;
    line-height: 40px;
    font-size: 14px !important;
    font-weight: var(--fw-light, 300) !important;
}
#popup-user-info .popup-menu .user-menu ul li a {
    color: #292929 !important;
    text-decoration: none;
}
#popup-user-info .popup-menu .user-menu ul li span {
    vertical-align: middle;
    padding: 0 16px;
    display: block;
}
#popup-user-info .popup-menu .user-menu ul li .txt-exit {
    color: #FF5C5C !important;
}
#popup-user-info .popup-menu .user-menu ul li:hover {
    background-color: #F2F3F5;
}

/* ===== 고객센터 서브네비 (헤더 하단, support-notice.html 기준) ===== */
/* 메인 헤더와 함께 상단 고정: --main-header-height·--rn-subnav-height 변수로 헤더 높이 변경에 자동 추종 */
.rn-subnav--customer.rn-subnav,
.rn-subnav.rn-subnav--customer {
    width: 100%;
    position: fixed;
    top: var(--main-header-height);
    left: 0;
    height: var(--rn-subnav-height);
    z-index: 999;
}
.rn-subnav--customer .rn-subnav-inner {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* padding: 12px 0; */
    /* box-sizing: content-box; */
    height: 52px; /* 커뮤니티 서브네비 inner와 동일 높이 (LNB 사이즈 조정) */
}
.rn-subnav--customer .rn-subnav-left {
    display: flex;
    align-items: center;
    gap: 40px;
}
.rn-subnav--customer .rn-subnav-link {
    font-size: 17px !important;
    font-weight: var(--fw-bold, 600) !important;
    color: #A3A3A3;
    transition: color 0.2s ease;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.34px;
}
.rn-subnav--customer .rn-subnav-link:hover {
    color: #292929;
}
.rn-subnav--customer .rn-subnav-link.active {
    color: #292929;
}
.rn-subnav--customer .rn-profile-badge {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rn-subnav--customer .rn-profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.rn-subnav--customer .rn-profile-name {
    font-size: 15px;
    font-weight: var(--fw-bold, 600);
    color: #292929;
}
.rn-subnav--customer .rn-profile-grade {
    font-size: 15px;
    font-weight: var(--fw-bold, 600);
    color: #2F8BFF;
}
.rn-subnav--customer.rn-subnav--community {
    background: #FAFAFA;
}