@charset "UTF-8"; 

/**
 * popup-legacy-scope.css
 *
 * 팝업 내부 스타일 격리(Scoping) CSS
 *
 * [목적]
 *  renewal 페이지는 body 폰트/스타일이 기존 구현과 다르다.
 *  oPopupController가 여는 팝업 레이어(.layer-popup-wrap) 내부는 기존 구현의
 *  스타일 기준으로 렌더링되어야 하므로, 이 파일에서 .layer-popup-wrap 선택자로
 *  스코프하여 기존 스타일을 강제 적용한다.
 *
 *  → 팝업 외부(renewal 페이지)에는 전혀 영향을 주지 않는다.
 *  → 새로운 팝업 유틸리티 스타일이 필요할 때 이 파일에 추가한다.
 *
 * [출처]
 *  public_html_old/css/rn_common.css (동일 내용, 선택자만 .layer-popup-wrap으로 스코프)
 */

/* ====================================================
   1. 기본 폰트 리셋 + 요소 마진/패딩 리셋
   body 상속을 차단하고 기존 구현 기준 폰트로 고정.
   renewal CSS에는 p 태그 리셋이 없어 브라우저 기본 margin(1em 0)이 적용되므로
   팝업 내부에서 명시적으로 리셋한다.
   출처: rn_common.css 11-43번
   ==================================================== */
/* 쪽지: .layer-popup.layer-popup-wrap / 푸터 팝업: .pp-container.layer-popup-wrap */
.layer-popup-wrap,
.layer-popup.layer-popup-wrap {
    
    font-size: 12px;
    font-weight: 300;
    line-height: 1.4;
    color: #292929;
}

/* p 태그 마진 리셋 (기존 rn_common.css에 있던 전역 리셋) */
.layer-popup-wrap p {
    margin: 0;
    padding: 0;
}

/* a 태그 기본 스타일 */
.layer-popup-wrap a {
    text-decoration: none;
}

/* 폼 요소 폰트 상속 강제 적용
   input, button, select, textarea는 기본적으로 font를 상속받지 않으므로
   팝업 내부에서 명시적으로 기존 구현 폰트로 고정한다. */
.layer-popup-wrap input,
.layer-popup-wrap button,
.layer-popup-wrap select,
.layer-popup-wrap textarea {
    
    /* font-size: 12px; */
    font-weight: 300;
}

/* ul, li 리셋 */
.layer-popup-wrap ul,
.layer-popup-wrap li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ====================================================
   1-1. 팝업 핵심 요소 font-weight 명시적 강제 적용
   .layer-popup-wrap { font-weight: 300 } 상속이 타이틀/탭 등에
   영향을 주지 않도록 각 요소에 직접 지정.
   ==================================================== */

/* "쪽지함" 타이틀 */
.layer-popup-wrap div.pp-container span.pp-title {
    font-weight: var(--fw-light, 300) !important;
    font-size: 16px !important;
}

/* "받은쪽지 / 보낸쪽지" 탭 */
.layer-popup-wrap .notebox-head .tabs1 > li > a,
.layer-popup-wrap .tabs1 > li > a {
    font-weight: 600 !important;
}
.layer-popup-wrap .tabs1 > li.on > a {
    color: #292929 !important;
}

/* 페이지네이션 숫자 */
.layer-popup-wrap .pagination li a,
.layer-popup-wrap .pagination li.active strong {
    font-size: 13px !important;
    font-weight: var(--fw-light, 300) !important;
}

/* "쪽지 쓰기" 버튼 */
.layer-popup-wrap .btn-style1.btn-25-13 {
    font-size: 13px !important;
    font-weight: var(--fw-light, 300) !important;
}

/* ====================================================
   1-2. 검색 영역 레이아웃 수정
   ==================================================== */

/* search-select: select2 초기화 전 원본 <select>에도 float:left 적용 */
.layer-popup-wrap .pop-notebox .search-box .search-select {
    display: inline-block;
    float: left;
    height: 40px;
    vertical-align: middle;
    font-size: 12px;
}

/* 검색 아이콘 링크(<a>)가 클래스 없이 사용되므로 img.seach-icon으로 타겟
   notebox.css의 a.search-icon 선택자가 HTML과 맞지 않아 미적용됨 */
.layer-popup-wrap .pop-notebox .search-box a {
    display: inline-block;
    float: left;
    margin-top: 8px;
    margin-left: 5px;
    width: 25px;
    height: 25px;
}
.layer-popup-wrap .pop-notebox .search-box img.seach-icon {
    width: 25px;
    height: 25px;
    display: block;
}

/* 검색어 입력창 placeholder dim 처리 */
.layer-popup-wrap .pop-notebox .search-box .search-input::placeholder {
    color: #a2a2a2;
    opacity: 1;
}
.layer-popup-wrap .pop-notebox .search-box .search-input::-webkit-input-placeholder { color: #a2a2a2; }
.layer-popup-wrap .pop-notebox .search-box .search-input::-moz-placeholder { color: #a2a2a2; opacity: 1; }
.layer-popup-wrap .pop-notebox .search-box .search-input:-ms-input-placeholder { color: #a2a2a2; }

/* ====================================================
   2. 테이블 레이아웃 유틸리티 (.tbls, .tbl-cell, .v-ams)
   출처: rn_common.css 5998-6021번
   ==================================================== */
.layer-popup-wrap .tbls {
    display: table !important;
    border-spacing: 0;
    border-collapse: collapse;
}
.layer-popup-wrap .tbls > .tbl-row {
    display: table-row !important;
}
.layer-popup-wrap .tbls > .tbl-row > .tbl-cell {
    display: table-cell !important;
    word-break: break-all;
}
.layer-popup-wrap .tbls > .tbl-cell {
    display: table-cell !important;
    word-break: break-all;
}
.layer-popup-wrap .tbl-cell {
    display: table-cell !important;
    word-break: break-all;
}
.layer-popup-wrap .v-ams {
    vertical-align: middle !important;
}
.layer-popup-wrap .wps100 {
    width: 100%;
}

/* ====================================================
   3. tabs1 (탭 리스트 UI)
   출처: rn_common.css 6350-6386번
   ==================================================== */
.layer-popup-wrap .tabs1 {
    display: table;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
.layer-popup-wrap .tabs1 > li {
    position: relative;
    padding-left: 1px;
}
.layer-popup-wrap .tabs1 > li > a {
    display: block;
    font-size: 17px;
    font-weight: var(--fw-light, 300);
    padding-left: 25px;
    padding-right: 25px;
    color: #b4b4b4;
}
.layer-popup-wrap .tabs1.f15 > li > a {
    font-size: 15px;
    padding-left: 20px;
    padding-right: 20px;
}
.layer-popup-wrap .tabs1 > li.on > a {
    color: #292929;
}
.layer-popup-wrap .tabs1 > li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: 14px;
    border-left: 1px solid #e5e5e5;
    margin-top: -7px;
}
.layer-popup-wrap .tabs1 > li:first-child:before {
    content: none;
}

/* ====================================================
   4. 폰트 크기 유틸리티 (.fs10, .fs14)
   출처: rn_common.css 6545-6563번
   ==================================================== */
.layer-popup-wrap .fs10 {
    font-size: 10px !important;
}
.layer-popup-wrap .fs14 {
    font-size: 14px !important;
}

/* ====================================================
   5. 색상 유틸리티 (.cls5, .cls6)
   출처: rn_common.css 6625-6631번
   ==================================================== */
.layer-popup-wrap .cls5 {
    color: #696969 !important;
}
.layer-popup-wrap .cls6 {
    color: #969696 !important;
}

/* ====================================================
   6. 간격 유틸리티 (.ptbs10, .plrs10, .pl20, .mts3)
   출처: rn_common.css 5745-5866번
   ==================================================== */
.layer-popup-wrap .ptbs10 {
    padding-top: 10px;
    padding-bottom: 10px;
}
.layer-popup-wrap .plrs10 {
    padding-left: 10px;
    padding-right: 10px;
}
.layer-popup-wrap .pl20 {
    padding-left: 20px !important;
}
.layer-popup-wrap .mts3 {
    margin-top: 3px !important;
}

/* ====================================================
   7. 텍스트 유틸리티 (.text-center, .t-als, .ellipsis)
   출처: rn_common.css 1769-6773번
   ==================================================== */
.layer-popup-wrap .text-center {
    text-align: center;
}
.layer-popup-wrap .t-als {
    text-align: left !important;
}
.layer-popup-wrap .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ====================================================
   8. 배경색 유틸리티 (.bcs1)
   출처: rn_common.css 6684-6686번
   ==================================================== */
.layer-popup-wrap .bcs1 {
    background-color: #f5f5f5;
}

/* ====================================================
   9. 버튼 스타일 (.btn-style1, .btn-25-13, .btns1)
   출처: rn_common.css 2784-3665번, 6061-6167번
   ==================================================== */
.layer-popup-wrap .btn-style1 {
    border-radius: 4px;
    background: #2f8bff;
    color: #fff;
}
.layer-popup-wrap .btn-style1:hover,
.layer-popup-wrap .btn-style1:focus {
    background: #1671e4;
    color: #fff;
}
.layer-popup-wrap .btn-25-13 {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 25px !important;
    line-height: 23px !important;
    font-size: 13px;
    font-weight: 300;
    text-align: center;
    cursor: pointer;
}
.layer-popup-wrap .w80 {
    width: 80px !important;
}
.layer-popup-wrap .btns1 {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
}
.layer-popup-wrap .btns1.a {
    text-align: center;
    border: 1px solid #000;
    padding-left: 5px;
    padding-right: 5px;
}
.layer-popup-wrap .btns1.sz25 {
    height: 25px;
    line-height: 23px;
    font-size: 13px;
    font-weight: 300;
}
.layer-popup-wrap .btns1.bc1 {
    border-color: #dcdcdc;
    background-color: #fff;
    color: #696969;
}
.layer-popup-wrap .rds5 {
    border-radius: 5px !important;
}

/* ====================================================
   10. 체크박스 스타일 (.chk-style1)
   출처: rn_common.css 2438-2480번
   ==================================================== */
.layer-popup-wrap input[type=checkbox].chk-style1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.layer-popup-wrap input[type=checkbox].chk-style1 + label {
    display: inline-block;
    cursor: pointer;
    line-height: 190%;
    padding-left: 35px;
    min-width: 25px;
    height: 25px;
    background-image: url("/img/forms/chk-style1/chk-style1-off.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 25px 25px;
}
.layer-popup-wrap input[type=checkbox].chk-style1:focus + label,
.layer-popup-wrap input[type=checkbox].chk-style1:hover + label,
.layer-popup-wrap input[type=checkbox].chk-style1 + label:hover {
    background-image: url("/img/forms/chk-style1/chk-style1-disableds.png");
    background-size: 25px 25px;
}
.layer-popup-wrap input[type=checkbox].chk-style1:checked + label {
    background-image: url("/img/forms/chk-style1/chk-style1-on.png");
    background-size: 25px 25px;
}

/* ====================================================
   11. 팝업 내부 font-size rem → px 강제 고정
   notebox.css 등에서 rem 단위로 지정된 크기가 renewal html root(16px)를
   기준으로 계산되어 기존 구현(12px base)보다 커지는 문제 방지.
   기존 환산: 1.0833rem × 12px = 13px, 1.333rem × 12px = 16px
   ==================================================== */

/* 팝업 내부 테이블 td/th 기본 폰트 크기 고정 */
.layer-popup-wrap .pop-notebox table tbody tr td,
.layer-popup-wrap .pop-notebox table tbody tr th,
.layer-popup-wrap .pop-notebox table thead tr td,
.layer-popup-wrap .pop-notebox table thead tr th {
    font-size: 13px; /* 1.0833rem × 12px ≈ 13px */
}

/* 쪽지 목록 링크 (.fs14 클래스) */
.layer-popup-wrap .fs14 {
    font-size: 14px !important;
}

/* 팝업 내부 기본 테이블 셀 리셋
   renewal CSS에 td 기본 padding이 없어도 브라우저 UA 스타일이나
   다른 규칙에 의해 과도한 여백이 생기는 것을 방지 */
.layer-popup-wrap table {
    border-collapse: collapse;
    border-spacing: 0;
}
.layer-popup-wrap table td,
.layer-popup-wrap table th {
    padding: 0;
    box-sizing: border-box;
    font-size: 13px; /* 기본 셀 폰트도 px 고정 */
}

/* ====================================================
   12. 페이지네이션 (.pagination)
   prev/next 버튼은 이미지로 표시, 텍스트는 text-indent로 숨김
   출처: rn_common.css 4605-4688번
   ==================================================== */
.layer-popup-wrap .pagination {
    display: inline-block;
    margin: 0;
    padding: 0;
}
.layer-popup-wrap .pagination li {
    display: inline-block;
    float: left;
    width: 25px;
    height: 25px;
    margin-left: 20px;
    padding: 0;
}
.layer-popup-wrap .pagination li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    float: left;
    color: #969696;
    font-size: 13px;
    padding-top: 4px;
    text-align: center;
    line-height: 17px;
    cursor: pointer;
}
.layer-popup-wrap .pagination li a:hover {
    color: #2f8bff;
    font-weight: var(--fw-light, 300);
}
.layer-popup-wrap .pagination li.active strong {
    display: inline-block;
    width: 100%;
    height: 100%;
    float: left;
    color: #2f8bff;
    font-size: 13px;
    padding-top: 4px;
    text-align: center;
    line-height: 17px;
    font-weight: var(--fw-light, 300);
}
.layer-popup-wrap .pagination li.prev a,
.layer-popup-wrap .pagination li.pre a {
    background: url('/img/community/page_number_left_n.png') center center no-repeat;
    background-size: 25px 25px;
    text-indent: -99999px;
    overflow: hidden;
    cursor: pointer;
}
.layer-popup-wrap .pagination li.prev:not(.disabled) a:hover,
.layer-popup-wrap .pagination li.pre:not(.disabled) a:hover {
    background-image: url('/img/community/page_number_left_p.png');
    background-size: 25px 25px;
}
.layer-popup-wrap .pagination li.next a {
    background: url('/img/community/page_number_right_n.png') center center no-repeat;
    background-size: 25px 25px;
    text-indent: -99999px;
    overflow: hidden;
    cursor: pointer;
}
.layer-popup-wrap .pagination li.next:not(.disabled) a:hover {
    background-image: url('/img/community/page_number_right_p.png');
    background-size: 25px 25px;
}
.layer-popup-wrap .pagination li:first-child {
    margin-left: 0;
}
.layer-popup-wrap .pagination li.disabled a {
    cursor: default;
    opacity: 0.4;
}

/* ====================================================
   14. 검색창 입력 폰트 (notebox.css rem → px, font-family 명시)
   input 요소는 CSS font 상속을 받지 않으므로 font-family를 명시해야 함.
   notebox.css의 font-size: 1.1667rem이 renewal html root(16px) 기준으로
   계산되어 커지는 것도 방지 (1.1667 × 12px = 14px → 14px 고정)
   ==================================================== */
.layer-popup-wrap .pop-notebox .search-box .search-input {
    font-size: 14px !important;
    
    font-weight: 300 !important;
}

/* ====================================================
   16. 테이블 스타일 (.table-style2)
   출처: rn_common.css 4185-4227번
   ==================================================== */
.layer-popup-wrap .table-style2 {
    width: 100%;
    border-top: none;
}
.layer-popup-wrap .table-style2 tr th {
    padding: 10px;
    font-size: 1.0rem;
    color: #696969;
    border-bottom: 1px solid #dcdcdc;
    text-align: center;
}
.layer-popup-wrap .table-style2 tr td {
    padding: 10px;
    font-size: 1.0rem;
    color: #696969;
    border-bottom: 1px solid #dcdcdc;
    text-align: center;
}
.layer-popup-wrap .table-style2 thead tr th {
    background: #f5f5f5;
    font-size: 1.0rem;
    color: #696969;
    font-weight: var(--fw-light, 300);
}
.layer-popup-wrap .table-style2 thead tr td {
    background: #f5f5f5;
    font-size: 1.0rem;
    color: #696969;
    font-weight: var(--fw-light, 300);
}
.layer-popup-wrap .table-style2 tbody tr th {
    font-weight: 300;
    border-bottom: 1px dashed #dcdcdc;
}
.layer-popup-wrap .table-style2 tbody tr td {
    font-weight: 300;
}

/* ====================================================
   [글로벌] select2 type2 테마 완전 정의
   select2 dropdown은 <body> 바로 하위에 렌더링되므로
   .layer-popup-wrap 스코프 밖에서 별도로 지정.
   출처: public_html_old/css/common.css 1957~2063번
   폰트 크기: rem → px 변환 (기존 12px 기준 → px 고정)
   height: 45px → 40px (notebox.css의 .search-select height에 맞춤)
   ==================================================== */
.select2-container--type2.select2-container--focus {
    outline: none !important;
}
.select2-container--type2 .select2-selection {
    height: 40px;
    border: none;
    border-radius: 4px;
}
.select2-container--type2 .select2-selection.select2-selection--single {
    outline: none;
}
/* 파란 삼각형 화살표 아이콘 */
.select2-container--type2 .select2-selection .select2-selection__arrow {
    position: absolute;
    top: 0;
    right: 0;
    width: 25px;
    height: 40px;
    background: url("/img/forms/select_type2_down.png") right 10px top 14px no-repeat;
    background-size: 13px 7px;
    z-index: 2;
}
.select2-container--type2 .select2-selection .select2-selection__arrow b {
    display: none;
}
.select2-container--type2.select2-container--open .select2-selection__arrow {
    position: absolute;
    top: 0;
    right: 0;
    width: 25px;
    height: 40px;
    background: url("/img/forms/select_type2_up.png") right 10px top 13px no-repeat;
    background-size: 13px 7px;
}
.select2-container--type2 .select2-results > .select2-results__options {
    max-height: 200px;
    overflow-y: auto;
}
.select2-container--type2.select2-container--open .select2-selection.select2-selection--single {
    box-shadow: 0 0 10px #e6e6e6;
    overflow-y: hidden;
}
.select2-container--type2.select2-container--open .select2-selection {
    border-radius: 4px 4px 0 0;
    overflow-y: hidden;
}
.select2-container--type2.select2-container--open .select2-selection__arrow b {
    display: none;
}
.select2-container--type2 .select2-selection {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
    
    color: #696969;
}
.select2-container--type2 .select2-selection__rendered {
    font-size: 12px !important;
    
    color: #696969;
    line-height: 20px;
}
.select2-container--type2 .select2-results__option--highlighted {
    background: #dcdcdc;
}
.select2-container--type2 .select2-dropdown {
    margin-top: -1px;
    border: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 5px 10px #e6e6e6;
    border-top: none;
    overflow-y: hidden;
}
.select2-container--type2.select2-container--above.select2-container--open .select2-selection.select2-selection--single {
    box-shadow: 0 0 10px #e6e6e6;
    overflow-y: hidden;
}
.select2-container--type2.select2-container--above.select2-container--open .select2-selection {
    border-radius: 0 0 4px 4px;
    overflow-y: hidden;
}
.select2-container--type2 .select2-dropdown.select2-dropdown--above {
    margin-top: 5px;
    border: none;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -5px 10px #e6e6e6;
    overflow-y: hidden;
}
.select2-container--type2 .select2-results__option {
    height: 40px;
    padding: 8px 20px 8px 7px;
    font-size: 12px;
    
    color: #696969;
    text-align: center;
    white-space: nowrap;
}
.select2-container--type2 .select2-results__option--highlighted[aria-selected] {
    background-color: #dcdcdc;
    color: #696969;
}

/* ====================================================
   푸터 팝업 (이용약관/개인정보/광고문의·제휴제안)
   openPopup(main.js)으로 열리는 콘텐츠에 layer-popup-wrap 적용 시
   기존 구현(rn_footer.css)과 동일한 폰트·레이아웃·스크롤 적용.
   쪽지 팝업과 동일하게 .layer-popup-wrap 스코프로 renewal 페이지 상속 차단.
   ==================================================== */
.layer-popup-wrap .popup-footer .desc {
    font-weight: 300;
    margin-top: 12px;
    font-size: 15px;
    color: #292929;
}
.layer-popup-wrap .popup-footer .form-group {
    padding: 6px 0;
}
/* 라벨(dt)과 입력(dd)을 같은 행에 배치 — display: table로 확실히 한 줄 레이아웃 */
.layer-popup-wrap .popup-footer .form-group > dl {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 0 0 6px 0;
    padding: 0;
}
.layer-popup-wrap .popup-footer .form-group > dl:last-child {
    margin-bottom: 0;
}
.layer-popup-wrap .popup-footer .form-group > dl > dt {
    display: table-cell;
    width: 140px;
    min-width: 140px;
    vertical-align: top;
    padding: 10px 12px 10px 0;
    font-size: 14px;
    font-weight: var(--fw-light, 300);
    color: #292929;
    line-height: 1.4;
}
.layer-popup-wrap .popup-footer .form-group > dl > dd {
    display: table-cell;
    width: auto;
    vertical-align: top;
    padding: 10px 0;
    min-height: 38px;
}
/* 이메일 행: 라벨·입력·도메인 드롭다운 한 줄 유지 (너비·여백으로 가용 공간 확보) */
.layer-popup-wrap .popup-footer .form-email dt {
    vertical-align: middle;
}
.layer-popup-wrap .popup-footer .form-email dd {
    vertical-align: middle;
    white-space: nowrap;
}
.layer-popup-wrap .popup-footer .form-email dd input,
.layer-popup-wrap .popup-footer .form-email dd .form-gap,
.layer-popup-wrap .popup-footer .form-email dd span.select2 {
    vertical-align: middle;
}
/* select2가 원본 select의 w135를 상속하지 않을 수 있으므로 도메인 드롭다운 너비 명시 */
.layer-popup-wrap .popup-footer .form-email dd .select2-container,
.layer-popup-wrap .popup-footer .form-email dd .select2-container--type1 {
    width: 135px !important;
    max-width: 135px !important;
    box-sizing: border-box;
}
.layer-popup-wrap .popup-footer .subtitle-group {
    clear: both;
    display: inline-block;
    width: 100%;
    padding-bottom: 6px;
    margin-top: 12px;
    border-bottom: 1px solid #dcdcdc;
}
.layer-popup-wrap .popup-footer .subtitle-group h2 {
    display: inline-block;
    float: left;
    padding-left: 5px;
    font-weight: var(--fw-light, 300);
    font-size: 15px;
    color: #292929;
}
.layer-popup-wrap .popup-footer .subtitle-group div {
    display: inline-block;
    float: right;
    text-align: right;
    padding-right: 0;
    padding-top: 4px;
}
.layer-popup-wrap .popup-footer .subtitle-group div label {
    font-size: 13px;
    color: #696969;
    font-weight: var(--fw-light, 300);
}
.layer-popup-wrap .popup-footer .subtitle-group div label.red {
    color: #ec6464;
}
.layer-popup-wrap .popup-footer .subtitle-group div span {
    color: #ec6464;
    font-weight: var(--fw-light, 300);
    padding-left: 3px;
}
.layer-popup-wrap .popup-footer .subtitle-group div span.notice {
    color: #ec6464;
    font-weight: 300;
}
.layer-popup-wrap .popup-footer .subtitle-data {
    clear: both;
    display: inline-block;
    float: left;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 10px;
    padding-left: 10px;
    border-bottom: 1px dotted #dcdcdc;
}
.layer-popup-wrap .popup-footer .subtitle-data ul li {
    color: #696969;
    font-size: 13px;
    line-height: 160%;
    margin-bottom: 2px;
}
.layer-popup-wrap .popup-footer .subtitle-data ul li:last-child {
    margin-bottom: 0;
}
.layer-popup-wrap .popup-footer .subdesc {
    color: #969696;
    font-size: 11px;
    font-weight: 300;
}
.layer-popup-wrap .popup-footer .subdesc span.f12 {
    font-size: 12px;
}
.layer-popup-wrap .popup-footer .subdesc span.red {
    color: #ec6464;
}
.layer-popup-wrap .popup-footer .agree label {
    color: #696969;
    font-weight: var(--fw-light, 300);
}
.layer-popup-wrap .popup-footer .agree.form-group {
    padding-top: 8px;
    padding-bottom: 4px;
}
.layer-popup-wrap .popup-footer .agree.mt10 {
    margin-top: 12px !important;
}
/* 제휴제안/광고문의 팝업: 첫 문단 여백, 링크(파란색 밑줄), 폼 필드·filebox·유틸리티 */
.layer-popup-wrap .popup-footer .desc:first-of-type {
    margin-top: 0;
}
.layer-popup-wrap .popup-footer .desc a,
.layer-popup-wrap .popup-footer a.suggest-btn {
    color: #2f8bff;
    text-decoration: underline;
}
.layer-popup-wrap .popup-footer a.suggest-btn.fw-bold,
.layer-popup-wrap .popup-footer .desc a.fw-bold {
    font-weight: var(--fw-bold, 600);
}
.layer-popup-wrap .popup-footer input[type="text"],
.layer-popup-wrap .popup-footer input[type="email"] {
    box-sizing: border-box;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    padding: 0 12px;
    font-size: 12px;
    font-family: inherit;
    color: #292929;
    background-color: #fff;
    height: 45px;
    line-height: 45px;
}
.layer-popup-wrap .popup-footer textarea {
    box-sizing: border-box;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 12px;
    font-family: inherit;
    color: #292929;
    background-color: #fff;
    min-height: 80px;
    resize: vertical;
    line-height: 1.4;
}
/* 파일첨부: 입력란과 버튼을 같은 행에 배치 (flex로 한 줄 고정) */
.layer-popup-wrap .popup-footer .filebox {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}
.layer-popup-wrap .popup-footer .filebox input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.layer-popup-wrap .popup-footer .filebox input[type="text"] {
    flex: 1;
    min-width: 0;
    max-width: 330px;
    margin: 0;
    height: 45px;
    line-height: 45px;
    padding: 0 12px;
}
.layer-popup-wrap .popup-footer .filebox label {
    flex-shrink: 0;
    display: inline-block;
    font-size: 14px;
    color: #696969;
    text-align: center;
    height: 45px;
    line-height: 45px;
    margin: 0;
    padding: 0 16px;
    background-color: #fff;
    cursor: pointer;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
}
.layer-popup-wrap .popup-footer .w450 {
    width: 450px !important;
    max-width: 100%;
}
.layer-popup-wrap .popup-footer .w350 { width: 350px !important; }
.layer-popup-wrap .popup-footer .w330 { width: 330px !important; }
.layer-popup-wrap .popup-footer .w240 { width: 240px !important; }
.layer-popup-wrap .popup-footer .w138 { width: 138px !important; }
.layer-popup-wrap .popup-footer .w135 { width: 135px !important; }
.layer-popup-wrap .popup-footer .w110 { width: 110px !important; }
.layer-popup-wrap .popup-footer .w100 { width: 100px !important; }
.layer-popup-wrap .popup-footer .mt10 { margin-top: 10px !important; }
.layer-popup-wrap .popup-footer .ml10 { margin-left: 10px !important; }
.layer-popup-wrap .popup-footer .clearfix::after {
    content: '';
    display: table;
    clear: both;
}
.layer-popup-wrap .popup-footer .form-gap {
    margin: 0 4px;
    color: #292929;
}
.layer-popup-wrap .popup-footer select {
    box-sizing: border-box;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 12px;
    font-family: inherit;
    color: #292929;
    background-color: #fff;
}
.layer-popup-wrap .popup-footer .btns .btn {
    box-sizing: border-box;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    border-radius: 4px;
    cursor: pointer;
}
.layer-popup-wrap .popup-footer .btns .btn-style1 {
    background: #2f8bff;
    color: #fff;
    border: none;
}
.layer-popup-wrap .popup-footer .btns .btn-style2 {
    background: #fff;
    color: #696969;
    border: 1px solid #dcdcdc;
}
/* 푸터메뉴 팝업 - 이용약관/개인정보 탭 */
.layer-popup-wrap .popup-terms-wrap {
    padding: 0;
    min-height: 300px;
}
.layer-popup-wrap .popup-terms-wrap .tabs-wrap {
    padding: 20px 0 0 0;
}
.layer-popup-wrap .popup-terms-wrap .tabs-wrap ul.tab-style1 {
    display: block;
    width: 100%;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    background-color: #f5f5f5;
    list-style: none;
    margin: 0;
    padding: 0;
}
.layer-popup-wrap .popup-terms-wrap .tabs-wrap ul.tab-style1::after {
    content: '';
    display: table;
    clear: both;
}
.layer-popup-wrap .popup-terms-wrap .tabs-wrap ul.tab-style1 li {
    display: inline-block;
    float: left;
    width: 25%;
    height: 40px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.layer-popup-wrap .popup-terms-wrap .tabs-wrap ul.tab-style1 li a {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: var(--fw-light, 300);
    color: #696969;
    text-align: center;
    overflow: hidden;
    text-decoration: none;
}
.layer-popup-wrap .popup-terms-wrap .tabs-wrap ul.tab-style1 li:hover {
    background-color: #e8e8e8;
}
.layer-popup-wrap .popup-terms-wrap .tabs-wrap ul.tab-style1 li:hover a {
    color: #292929;
}
.layer-popup-wrap .popup-terms-wrap .tabs-wrap ul.tab-style1 li.sel {
    background-color: #969696;
}
.layer-popup-wrap .popup-terms-wrap .tabs-wrap ul.tab-style1 li.sel a {
    color: #fff;
    font-weight: var(--fw-light, 300);
}
.layer-popup-wrap .popup-terms-wrap .tabs-wrap ul.tab-style1 li.press {
    background-color: #969696;
}
.layer-popup-wrap .popup-terms-wrap .tabs-wrap ul.tab-style1 li.press a {
    color: #fff;
}
.layer-popup-wrap .popup-terms-wrap .tabs-data-wrap {
    display: none;
    padding: 30px 10px 0 10px;
}
.layer-popup-wrap .popup-terms-wrap .tabs-data-wrap.sel {
    display: block;
}
.layer-popup-wrap .popup-terms-wrap .tabs-data {
    margin-top: 15px;
}
.layer-popup-wrap .popup-terms-wrap .mscroll {
    padding: 10px 2px 10px 10px;
    border: 1px solid #ddd;
    /* 스크롤은 .pp-body에서 처리 (popup.css) */
}
.layer-popup-wrap .popup-terms-wrap .mscroll > div {
    padding: 5px 15px 5px 5px;
}
.layer-popup-wrap .popup-terms-wrap .tab1,
.layer-popup-wrap .popup-terms-wrap .tab2,
.layer-popup-wrap .popup-terms-wrap .tab3 {
    padding-bottom: 15px;
}
.layer-popup-wrap .popup-terms-wrap .tabs-data-wrap h4 {
    font-size: 15px;
    font-weight: var(--fw-light, 300);
    color: #292929;
    margin: 0 0 12px 0;
    padding: 0;
}
/* 광고문의 / 제휴제안 / 불만오류 (스크롤은 .pp-body에서 처리) */
.layer-popup-wrap .popup-ad-wrap.mscroll,
.layer-popup-wrap .popup-sugg-wrap.mscroll,
.layer-popup-wrap .popup-receipt-wrap.mscroll {
    padding: 10px 2px 10px 5px;
}
/* 좌우 패딩 축소: dd 가용 너비 확보(기존 dd 450px 수준). 15px→8px로 우측 여백 조정 */
.layer-popup-wrap .popup-ad-wrap.mscroll > div,
.layer-popup-wrap .popup-sugg-wrap.mscroll > div,
.layer-popup-wrap .popup-receipt-wrap.mscroll > div {
    padding: 5px 8px 5px 5px;
}
.layer-popup-wrap .popup-ad-wrap .btns,
.layer-popup-wrap .popup-sugg-wrap .btns,
.layer-popup-wrap .popup-receipt-wrap .btns {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}
.layer-popup-wrap .popup-ad-wrap .btns .btn,
.layer-popup-wrap .popup-sugg-wrap .btns .btn,
.layer-popup-wrap .popup-receipt-wrap .btns .btn {
    width: 130px;
}
.layer-popup-wrap .popup-ad-wrap .btns .btn + .btn,
.layer-popup-wrap .popup-sugg-wrap .btns .btn + .btn,
.layer-popup-wrap .popup-receipt-wrap .btns .btn + .btn {
    margin-left: 17px;
}
.layer-popup-wrap .popup-ad-wrap .form-group,
.layer-popup-wrap .popup-sugg-wrap .form-group,
.layer-popup-wrap .popup-receipt-wrap .form-group {
    padding-top: 5px;
}
.layer-popup-wrap .popup-ad-wrap .form-group dl,
.layer-popup-wrap .popup-sugg-wrap .form-group dl,
.layer-popup-wrap .popup-receipt-wrap .form-group dl {
    margin-top: 5px;
}
/* 이용약관/개인정보/커뮤니티정책 본문 */
.layer-popup-wrap .terms-data1,
.layer-popup-wrap .terms-data2,
.layer-popup-wrap .terms-data3,
.layer-popup-wrap .terms-data4 {
    font-size: 14px;
    color: #696969;
    font-weight: 300;
}
.layer-popup-wrap .terms-data1 h1,
.layer-popup-wrap .terms-data2 h1,
.layer-popup-wrap .terms-data3 h1,
.layer-popup-wrap .terms-data1 h2,
.layer-popup-wrap .terms-data2 h2,
.layer-popup-wrap .terms-data3 h2 {
    clear: both;
    font-size: 14px;
    color: #696969;
    font-weight: 300;
    margin-top: 20px;
    margin-bottom: 20px;
}
.layer-popup-wrap .terms-data1 h1,
.layer-popup-wrap .terms-data2 h1,
.layer-popup-wrap .terms-data3 h1 {
    font-weight: var(--fw-light, 300);
}
.layer-popup-wrap .terms-data1 p,
.layer-popup-wrap .terms-data2 p,
.layer-popup-wrap .terms-data3 p {
    margin-top: 3px;
    margin-bottom: 3px;
    line-height: 180%;
}
.layer-popup-wrap .terms-data1 p {
    line-height: 130%;
}
.layer-popup-wrap .terms-data1 .list_fr li,
.layer-popup-wrap .terms-data1 .list_se li,
.layer-popup-wrap .terms-data2 .list_fr li,
.layer-popup-wrap .terms-data2 .list_se li,
.layer-popup-wrap .terms-data3 .list_fr li,
.layer-popup-wrap .terms-data3 .list_se li {
    padding-left: 20px;
    text-indent: -20px;
    line-height: 180%;
}
.layer-popup-wrap .terms-data1 .list_fr li,
.layer-popup-wrap .terms-data1 .list_se li {
    line-height: 130%;
}
.layer-popup-wrap .terms-data2 .cert,
.layer-popup-wrap .terms-data3 .cert {
    padding-left: 80px;
    background: url('/img/sub/img_cert.png') 7px 5px no-repeat;
    background-size: 49px 49px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.layer-popup-wrap .terms-data2 .cert h3,
.layer-popup-wrap .terms-data2 .cert h4,
.layer-popup-wrap .terms-data2 .cert p {
    color: #292929;
    font-size: 14px;
    font-weight: 300;
    margin-top: 2px;
}
.layer-popup-wrap .terms-data2 .cert h3,
.layer-popup-wrap .terms-data2 .cert h4 {
    font-size: 14px;
}
.layer-popup-wrap .terms-data2 .cert h3 {
    font-weight: var(--fw-light, 300);
}
.layer-popup-wrap .terms-data2 .cert p {
    font-size: 12px;
}
.layer-popup-wrap .terms-data3 .list_se li {
    padding-left: 0;
    text-indent: 0;
}
.layer-popup-wrap .terms-data3 .list_fr li.no-indent {
    padding-left: 20px;
    text-indent: 0;
}
.layer-popup-wrap .terms-data4 .cummunity-box table tbody tr th,
.layer-popup-wrap .terms-data4 .cummunity-box table tbody tr td {
    padding: 10px;
}
.layer-popup-wrap .terms-data4 .cummunity-box table tbody tr:last-child th,
.layer-popup-wrap .terms-data4 .cummunity-box table tbody tr:last-child td {
    border-bottom: none;
}
.layer-popup-wrap .terms-data4 .cummunity-box span.fare {
    display: inline-block;
    text-indent: -9999px;
    width: 10px;
    height: 10px;
    background: #2f8bff;
    border-radius: 50%;
    margin-top: 3px;
}
.layer-popup-wrap .terms-data4 .bottom {
    margin-left: -10px;
    margin-right: -10px;
    border-top: 1px solid #dcdcdc;
    padding-top: 15px;
}
.layer-popup-wrap .popup-footer .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical,
.layer-popup-wrap .popup-footer .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical {
    right: -8px;
}
.layer-popup-wrap .popup-terms-wrap .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical,
.layer-popup-wrap .popup-terms-wrap .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical {
    right: -19px;
}
/* 탭 스타일 (terms 외 다른 팝업에서 tab-style1 사용 시) */
.layer-popup-wrap .tab-style1 {
    list-style: none;
    margin: 0;
    padding: 0;
}
.layer-popup-wrap .tab-style1 li.sel a {
    color: #fff;
    font-weight: var(--fw-light, 300);
}

/* 제휴제안 팝업용 select2 type1 (sugg.html에서 theme: 'type1' 사용, 드롭다운은 body에 렌더되므로 전역) */
.select2-container--type1 {
    height: 45px !important;
    vertical-align: middle;
}
.select2-container--type1 .select2-selection {
    box-sizing: border-box;
    height: 45px !important;
    min-height: 45px;
    max-height: 45px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
}
.select2-container--type1 .select2-selection .select2-selection__arrow {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 25px;
    height: calc(45px - 2px);
    background: url("/img/join/arrow_selectbox_down.png") right 10px center no-repeat;
    background-size: 13px 7px;
    z-index: 2;
}
.select2-container--type1 .select2-selection .select2-selection__arrow b {
    display: none;
}
.select2-container--type1.select2-container--open .select2-selection__arrow {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 25px;
    height: calc(45px - 2px);
    background: url("/img/join/arrow_selectbox_up.png") right 10px center no-repeat;
    background-size: 13px 7px;
}
.select2-container--type1 .select2-results > .select2-results__options {
    max-height: 200px;
    overflow-y: auto;
}
.select2-container--type1.select2-container--open .select2-selection {
    border-radius: 4px 4px 0 0;
}
.select2-container--type1.select2-container--open .select2-selection__arrow b {
    display: none;
}
.select2-container--type1 .select2-dropdown {
    z-index: 10000;
    margin-top: -1px;
    border: 1px solid #dcdcdc;
    border-radius: 0 0 4px 4px;
}
.select2-container--type1 .select2-selection {
    padding: 0 10px 0 12px;
    line-height: 43px;
    font-size: 12px;
    color: #696969;
    overflow-y: hidden;
}
.select2-container--type1 .select2-selection .select2-selection__rendered {
    line-height: 43px;
    padding: 0;
}
.select2-container--type1 .select2-results__option {
    padding: 6px 7px;
    font-size: 12px;
    color: #696969;
}
.select2-container--type1 .select2-results__option--highlighted {
    background: #dcdcdc;
}
.select2-container--type1.select2-container--above.select2-container--open .select2-selection {
    border-radius: 0 0 4px 4px;
}
.select2-container--type1 .select2-dropdown.select2-dropdown--above {
    margin-top: 1px;
    border: 1px solid #dcdcdc;
    border-radius: 4px 4px 0 0;
}
.select2-container--type1 span.select2-selection.select2-selection--single:focus {
    outline: none;
    border: 1px solid #2f8bff;
}