@charset "utf-8";
/* ============================================================================
   st88-cheongung 멤버/보드 페이지 테마
   ----------------------------------------------------------------------------
   충전/환전/마이페이지/콤프/쪽지/공지 등은 STX 공용(_Shared) 뷰가 렌더되며
   .bo-tit/.bo-guide/.write-table/.list-table/.board-btn/.moneyBtns 등
   레거시 클래스 어휘를 쓴다. 천궁 popup.css 는 이 어휘를 모르므로 여기서
   천궁 시각언어(골드 헤더 #ae9c48→#251b0d, 다크 바디 #251b0d, 화이트 인풋)로 입힌다.
   전용 오버라이드 뷰가 상단을 .popup-hd(골드) + .popup-body(다크)로 감싸고,
   내부 데이터 테이블/버튼/폼을 이 파일이 천궁 톤으로 스타일한다.
   전부 .skin-st88-cheongung 스코프 → 타 스킨/메인페이지 영향 없음.
   ============================================================================ */

/* ── 페이지 셸: 천궁 팝업 카드를 페이지 중앙에 배치 ───────────────────────── */
.skin-st88-cheongung .ch-page {
    padding: 30px 15px 60px;
    min-height: 60vh;
}
.skin-st88-cheongung .ch-page .popup-wrap {
    min-width: 0;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}
/* 천궁 popup.css 가 .popup-hd(골드)/.popup-body(다크)/.popup-tit 는 이미 스타일.
   페이지 문맥에서 body 상단 여백만 보정 */
.skin-st88-cheongung .ch-page .popup-body {
    margin-top: 8px;
}

/* ── 닫기(X) 버튼 — 페이지형 팝업 우상단, 메인으로 이동 ──────────────────── */
.skin-st88-cheongung .ch-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 5;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffd989;
    font-size: 20px;
    line-height: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 217, 137, 0.4);
    border-radius: 50%;
    text-decoration: none;
    transition: 0.2s;
}
.skin-st88-cheongung .ch-close:hover {
    background: rgba(255, 217, 137, 0.22);
    color: #fff;
}
@media (max-width: 768px) {
    .skin-st88-cheongung .ch-close { width: 34px; height: 34px; font-size: 18px; top: 8px; right: 8px; }
}

/* ── 안내 박스(.bo-guide / .guide-list) ──────────────────────────────────── */
.skin-st88-cheongung .bo-guide {
    margin: 0 0 20px;
    padding: 16px 18px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 217, 137, 0.18);
    border-radius: 10px;
}
.skin-st88-cheongung .bo-guide .guide-tit {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: #ffd989;
    display: flex;
    align-items: center;
    gap: 8px;
}
.skin-st88-cheongung .guide-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.skin-st88-cheongung .guide-list > li {
    position: relative;
    margin: 6px 0;
    padding-left: 14px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #e7dcc0;
}
.skin-st88-cheongung .guide-list > li::before {
    content: "·";
    position: absolute;
    left: 2px;
    color: #ae9c48;
}

/* ── 입력 테이블(.write-table): label(th) + input(td) ───────────────────── */
.skin-st88-cheongung .write-table {
    width: 100%;
    margin: 0 0 18px;
    border-collapse: collapse;
}
.skin-st88-cheongung .write-table th,
.skin-st88-cheongung .write-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    text-align: left;
    vertical-align: middle;
}
.skin-st88-cheongung .write-table th {
    width: 130px;
    font-size: 14px;
    font-weight: 600;
    color: #ffd989;
    white-space: nowrap;
}
.skin-st88-cheongung .write-table td {
    color: #f0e6c8;
}
.skin-st88-cheongung .unit-suffix {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #ffd989;
}

/* ── 폼 인풋/셀렉트: 천궁 화이트 인풋(popup.css intro-list 인풋 톤) ──────── */
.skin-st88-cheongung .ch-page input[type="text"],
.skin-st88-cheongung .ch-page input[type="password"],
.skin-st88-cheongung .ch-page input[type="tel"],
.skin-st88-cheongung .ch-page input[type="number"],
.skin-st88-cheongung .ch-page select,
.skin-st88-cheongung .ch-page textarea {
    height: 42px;
    padding: 0 14px;
    max-width: 320px;
    width: auto;
    min-width: 200px;
    color: #000;
    background: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    font-size: 14px;
    vertical-align: middle;
}
.skin-st88-cheongung .ch-page textarea {
    height: auto;
    min-height: 96px;
    padding: 10px 14px;
    max-width: none;
    width: 100%;
}
.skin-st88-cheongung .ch-page input::placeholder,
.skin-st88-cheongung .ch-page textarea::placeholder {
    color: #6b6b6b;
}
.skin-st88-cheongung .ch-page input[readonly] {
    background: #ece7db;
    color: #333;
}

/* ── 빠른금액 버튼(.moneyBtns) ───────────────────────────────────────────── */
.skin-st88-cheongung .moneyBtns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.skin-st88-cheongung .moneyBtns > li {
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #000;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    background: linear-gradient(#ffce6b, #ffbd3f);
    border: solid 1px #ffd273;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px #1d160e;
    cursor: pointer;
    transition: 0.2s;
}
.skin-st88-cheongung .moneyBtns > li:hover {
    background: linear-gradient(#ffac66, #d77421);
    color: #fff;
}
.skin-st88-cheongung .moneyBtns > li.btn-reset {
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 1);
    background: linear-gradient(#e3603b, #a3321e);
    border-color: #d85c38;
}
.skin-st88-cheongung .moneyBtns > li.btn-reset:hover {
    background: linear-gradient(#7188ff, #3243a3);
}

/* ── 제출/취소 버튼줄(.board-btn) ────────────────────────────────────────── */
.skin-st88-cheongung .board-btn {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 18px 0;
}
.skin-st88-cheongung .board-btn > button {
    min-width: 130px;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
    color: #000;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    background: linear-gradient(#ffce6b, #ffbd3f);
    border: solid 1px #ffd273;
    box-shadow: inset 0 0 0 1px #1d160e;
}
.skin-st88-cheongung .board-btn > button:hover {
    color: #fff;
    background: linear-gradient(#ffac66, #d77421);
}
/* 두 번째(취소/삭제) 버튼 = 레드 */
.skin-st88-cheongung .board-btn > button:nth-child(2),
.skin-st88-cheongung .board-btn > button#btn-charge-cancel,
.skin-st88-cheongung .board-btn > button#btn-exchange-cancel,
.skin-st88-cheongung .board-btn > button#btn-delete-all {
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 1);
    background: linear-gradient(#e3603b, #a3321e);
    border-color: #d85c38;
}
.skin-st88-cheongung .board-btn > button:nth-child(2):hover {
    background: linear-gradient(#7188ff, #3243a3);
}

/* 계좌문의 등 인라인 버튼(.account-btn) */
.skin-st88-cheongung .account-btn,
.skin-st88-cheongung .btn-edit {
    margin-left: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #976f37;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.skin-st88-cheongung .account-btn:hover,
.skin-st88-cheongung .btn-edit:hover { background: #917853; }

/* ── 내역 테이블(.list-table + .scroll-wrap) ─────────────────────────────── */
.skin-st88-cheongung .scroll-wrap {
    width: 100%;
    margin: 0 0 14px;
    overflow-x: auto;
}
.skin-st88-cheongung .list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.skin-st88-cheongung .list-table thead th {
    padding: 11px 8px;
    color: #fff;
    background: linear-gradient(#ae9c48, #7c6a2e);
    border: 1px solid rgba(0, 0, 0, 0.3);
    font-weight: 600;
    white-space: nowrap;
}
.skin-st88-cheongung .list-table tbody td {
    padding: 10px 8px;
    text-align: center;
    color: #e7dcc0;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.skin-st88-cheongung .list-table tbody tr:nth-child(even) td {
    background: rgba(0, 0, 0, 0.3);
}

/* ── 페이지네이션(.pagination / .pager) ──────────────────────────────────── */
.skin-st88-cheongung .pagination,
.skin-st88-cheongung .pager {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 16px 0;
    list-style: none;
    padding: 0;
}
.skin-st88-cheongung .pagination a,
.skin-st88-cheongung .pagination button,
.skin-st88-cheongung .pagination span,
.skin-st88-cheongung .pager a,
.skin-st88-cheongung .pager button,
.skin-st88-cheongung .pager span {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #e7dcc0;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 217, 137, 0.2);
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}
.skin-st88-cheongung .pagination .active,
.skin-st88-cheongung .pagination a.active,
.skin-st88-cheongung .pager .active,
.skin-st88-cheongung .pager a.active {
    color: #000;
    background: linear-gradient(#ffce6b, #ffbd3f);
    border-color: #ffd273;
    font-weight: 700;
}

/* 로딩/빈 행 */
.skin-st88-cheongung .list-table .loading-row td,
.skin-st88-cheongung .list-table .notice-empty td {
    padding: 24px 8px;
    text-align: center;
    color: #c9b98a;
    background: rgba(0, 0, 0, 0.18);
}

/* ── 콤프/포인트/마이페이지 공통 소소한 보정 ─────────────────────────────── */
.skin-st88-cheongung .ch-page h1,
.skin-st88-cheongung .ch-page h2,
.skin-st88-cheongung .ch-page h4 { color: #ffd989; }
.skin-st88-cheongung .ch-page a { color: #ffd989; }

/* ── 공지 팝업(로그인 시 캐러셀, notice-popup.js) 천궁 톤 ─────────────────── */
.skin-st88-cheongung .notice-popup {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.72);
}
.skin-st88-cheongung .notice-popup.active { display: flex; }
.skin-st88-cheongung .notice-popup-inner {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #251b0d;
    border: 1px solid rgba(255, 217, 137, 0.35);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.skin-st88-cheongung .notice-popup-close {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 5;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffd989;
    font-size: 18px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 217, 137, 0.4);
    border-radius: 50%;
    cursor: pointer;
}
.skin-st88-cheongung .notice-popup-close:hover { background: rgba(255, 217, 137, 0.2); color: #fff; }
.skin-st88-cheongung .notice-popup-title {
    margin: 0;
    padding: 16px 44px 12px 18px;
    font-size: 16px;
    font-weight: 700;
    color: #ffd989;
    background: linear-gradient(#ae9c48, #251b0d);
}
.skin-st88-cheongung .notice-popup-body {
    padding: 16px 18px;
    color: #e7dcc0;
    line-height: 1.6;
    overflow-y: auto;
}
.skin-st88-cheongung .notice-popup-body img { max-width: 100%; height: auto; border-radius: 8px; }
.skin-st88-cheongung .notice-popup-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 4px 0 10px;
}
.skin-st88-cheongung .notice-popup-pagination .swiper-pagination-bullet {
    width: 8px; height: 8px;
    background: rgba(255, 217, 137, 0.35);
    opacity: 1;
    border-radius: 50%;
}
.skin-st88-cheongung .notice-popup-pagination .swiper-pagination-bullet-active {
    background: #ffbd3f;
}
.skin-st88-cheongung .notice-popup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.25);
}
.skin-st88-cheongung .notice-popup-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #c9b98a;
    cursor: pointer;
}
.skin-st88-cheongung .notice-popup-close-btn {
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 1);
    background: linear-gradient(#e3603b, #a3321e);
    border: solid 1px #d85c38;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px #1d160e;
    cursor: pointer;
}
.skin-st88-cheongung .notice-popup-close-btn:hover { background: linear-gradient(#7188ff, #3243a3); }

/* 가로 일렬(row/separate) 공지 팝업 모드 — 천궁 골드톤 (POPUP_SEPARATE ON + 데스크탑 ≥1280px).
   ★ 컨테이너 positioning/overlay 가 없어 데스크톱에서 안 보이던 버그 수정: container/active/card 레이아웃 보강. */
.skin-st88-cheongung .row-popup-container {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    padding: 60px 30px;
    pointer-events: none;
}
.skin-st88-cheongung .row-popup-container.active {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}
.skin-st88-cheongung .row-popup-card {
    flex: 1 1 0;
    min-width: 0;
    max-width: 340px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    background: #251b0d;
    border: 1px solid rgba(255, 217, 137, 0.3);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    pointer-events: auto;
}
.skin-st88-cheongung .row-popup-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    color: #ffd989;
    background: linear-gradient(#ae9c48, #251b0d);
    border-bottom: 1px solid rgba(255, 217, 137, 0.2);
}
.skin-st88-cheongung .row-popup-card-title {
    margin: 0; flex: 1; min-width: 0;
    font-size: 15px; font-weight: 600; color: #ffd989;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.skin-st88-cheongung .row-popup-card-close {
    flex-shrink: 0; width: 28px; height: 28px; margin-left: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #ffd989; background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 217, 137, 0.4); border-radius: 50%;
    font-size: 18px; line-height: 1; cursor: pointer; transition: background 0.2s;
}
.skin-st88-cheongung .row-popup-card-close:hover { background: rgba(255, 217, 137, 0.2); color: #fff; }
.skin-st88-cheongung .row-popup-card-body {
    flex: 1; padding: 14px; overflow-y: auto;
    color: #e7dcc0; background: rgba(0, 0, 0, 0.2);
}
.skin-st88-cheongung .row-popup-card-image { margin-bottom: 12px; text-align: center; }
.skin-st88-cheongung .row-popup-card-image img { max-width: 100%; height: auto; border-radius: 6px; }
.skin-st88-cheongung .row-popup-card-content {
    font-size: 13px; line-height: 1.6; color: #e7dcc0;
    word-break: break-word; white-space: pre-wrap;
}
.skin-st88-cheongung .row-popup-card-footer {
    padding: 10px 14px; background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 217, 137, 0.2);
}
.skin-st88-cheongung .row-popup-card-dontshow {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: #c9b98a; cursor: pointer;
}
.skin-st88-cheongung .row-popup-card-dontshow input[type="checkbox"] {
    width: 14px; height: 14px; accent-color: #ffbd3f; cursor: pointer;
}
@media (max-width: 1279px) {
    .skin-st88-cheongung .row-popup-container { display: none !important; }
}

/* ── 반응형 ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .skin-st88-cheongung .ch-page { padding: 18px 10px 48px; }
    .skin-st88-cheongung .write-table th { width: 96px; font-size: 13px; }
    .skin-st88-cheongung .ch-page input[type="text"],
    .skin-st88-cheongung .ch-page input[type="password"],
    .skin-st88-cheongung .ch-page input[type="tel"],
    .skin-st88-cheongung .ch-page select { min-width: 0; width: 100%; max-width: none; }
}