@charset "utf-8";

/* =====================================================================
   site2z app.css — 퍼블리싱에 없는 "기능 추가" 요소 전용 (기존 룰 비변경).
   브랜드 토큰(--color-main, --grayscale*, --fs-*)만 사용.
   ===================================================================== */

/* ── 헤더 보유 충전금(알림톡 예치금) 배지 — M14 ── */
.point-badge {white-space: nowrap; display:inline-flex; align-items:center; column-gap:6px; padding:7px 14px; border:1px solid var(--grayscale3); border-radius:999px; background:var(--color-white); transition:border-color .2s, background-color .2s;}
.point-badge:hover {border-color:var(--color-main); background:var(--color-main-10);}
.point-badge .point-label {font-size:var(--fs-13, 13px); font-weight:500; color:var(--grayscale7, #767676);}
.point-badge .point-amount {font-size:var(--fs-14, 14px); font-weight:700; color:var(--color-main); padding: 0 !important;}
.point-badge.mobile {margin:6px 24px 10px; width:fit-content;}

/* ── 마이페이지 셸 (M14 — 시안 기준 1차 구현, 퍼블리셔 후속 보정 예정) ── */
#container > .mypage-section {padding-block: 0; overflow: unset;}
.mypage-layout {display:flex; align-items:flex-start;}
.mypage-side {height: calc(100vh - var(--header-height)); flex-shrink:0; width: 224px; position:sticky; top: var(--header-height); padding: var(--fs-60) var(--fs-30); background-color: var(--grayscale1);}
.mypage-side-tit {display:block; color:var(--grayscale10); padding-bottom: var(--fs-30); border-bottom:1px solid var(--grayscale3); margin-bottom: var(--fs-30);}
.mypage-side-tit.on {color:var(--color-main);}
.mypage-side-menu li a {display:block; padding:12px 2px; font-size:var(--fs-16); font-weight:500; color:var(--grayscale7); transition:color .2s;}
.mypage-side-menu li a:hover {color:var(--grayscale10);}
.mypage-side-menu li.on a {color:var(--color-main); font-weight:600;}
.mypage-side-menu li.logout {margin-top: var(--fs-30); border-top:1px solid var(--grayscale3); padding-top: var(--fs-30);}
.mypage-side-menu li.logout a {color:var(--grayscale5);}
.mypage-content {padding-block: var(--space-120); flex:1; min-width:0;}
.mypage-content .l-inner {display:flex; flex-direction:column; row-gap: var(--space-100);}
.mypage-content-header {display: flex; flex-direction: column; row-gap: var(--fs-40);}
.mypage-content .section-tit-wrap {margin-bottom: 0;}

/* 인사말 + 플랜 요약 스트립 */
.mypage-greeting {font-size:var(--fs-36); font-weight:600; color:var(--grayscale8); line-height:1.3;}
.mypage-greeting .name {color:var(--color-main); font-size: var(--fs-42); font-weight: 700;}
.plan-strip {display:flex; align-items:center; padding: var(--fs-30); border-radius:12px; background: rgb(var(--rgb-main) / 5%);}
.plan-strip .strip-item {flex:1; display:flex; flex-direction:column; row-gap:2px;}
.plan-strip .strip-item:first-child {padding-right: var(--fs-60);}
.plan-strip .strip-item:last-child {row-gap: 6px;}
.plan-strip .strip-item + .strip-item {border-left:1px solid var(--grayscale3); padding-left: var(--fs-60);}
.plan-strip .strip-label {font-size:var(--fs-14); color:var(--grayscale6);}
/* .plan-strip .strip-value {font-size:var(--fs-20); font-weight:700; color:var(--grayscale10);} */
.plan-strip.empty {justify-content:space-between; padding:28px 32px;}

/* 섹션 타이틀 + 정보 박스 */
.mypage-sec {display:flex; flex-direction:column; row-gap: var(--fs-20);}
.mypage-sec-head {display:flex; justify-content:space-between; align-items:center;}
.mypage-sec-tit {color:var(--grayscale10);}
.mypage-sec-more {font-size:var(--fs-16); font-weight:500; line-height: 1.5; color:var(--color-main);}
.mypage-two-col {display:grid; grid-template-columns:1fr 1fr; gap:var(--fs-30); align-items: stretch;}
.info-box {height: stretch; border:1px solid var(--grayscale3); border-radius:12px; background:var(--color-white); padding: var(--fs-28);}
.info-box .info-row, .content-box .info-row {display:flex; justify-content:space-between; align-items:center; column-gap:16px; padding:10px 0;}
.info-box .info-row + .info-row, .content-box .info-row + .info-row {border-top:1px solid var(--grayscale2);}
.info-box .info-row span, .content-box .info-row span {font-size:var(--fs-14); color:var(--grayscale6); flex-shrink:0;}
.info-box .info-row strong, .content-box .info-row strong {font-size:var(--fs-16); font-weight:600; color:var(--grayscale10); text-align:right; word-break:break-all;}
.info-box .box-btn {margin-top:20px;}
.info-box .strip-cols {display:flex; margin-bottom:4px;}
.info-box .strip-cols .strip-item {flex:1; display:flex; flex-direction:column; align-items: center;}
.info-box .strip-cols .strip-item + .strip-item {border-left:1px solid var(--grayscale2);}
.info-box .strip-cols .strip-item .strip-value {margin-top: 8px; font-size: var(--fs-20); line-height: 1.5; font-weight: 500; color: var(--grayscale9);}
.info-box .strip-cols .strip-item .body-large {margin-top: 8px;}
.info-box .strip-cols .strip-item .card-small {margin-top: 2px;}
.info-box .input-wrap {display: flex; align-items: flex-start; column-gap: var(--fs-16);}
.info-box .input-wrap .input-item {flex: 1;}

/* 목록 행 (결제·문의·충전 내역) */
.list-rows {display:flex; flex-direction:column;}
.list-rows .list-row {display:grid; grid-template-columns:1fr auto auto auto; gap:8px 24px; align-items:center; padding:16px 4px;}
.list-rows .list-row + .list-row {border-top:1px solid var(--grayscale2);}
.list-rows .list-row .row-tit {font-size:var(--fs-16); font-weight:600; color:var(--grayscale10);}
.list-rows .list-row .row-sub {grid-column:1; font-size:var(--fs-14); color:var(--grayscale6);}
.list-rows .list-row .row-date {font-size:var(--fs-14); color:var(--grayscale6); white-space:nowrap;}
.list-rows .list-row .row-amount {font-size:var(--fs-16); font-weight:600; color:var(--grayscale10); white-space:nowrap;}
.list-rows .list-row .row-state {font-size:var(--fs-14); font-weight:600; white-space:nowrap;}
.row-state.ok {color:var(--color-main);}
.row-state.bad {color:var(--color-red);}
.row-state.mid {color:var(--grayscale6);}
.list-empty {padding:48px 0; text-align:center; color:var(--grayscale5); font-size:var(--fs-15, 15px);}

/* 상태 pill */
.state-pill {display:inline-flex; align-items:center; justify-content:center; width:fit-content; min-height:28px; padding:5px 10px; border:1px solid transparent; border-radius:999px; background-color: var(--grayscale2); color: var(--grayscale6); font-size:var(--fs-14); font-weight: 500;; line-height:1;}
.state-pill.ok {background:var(--color-main-10); color:var(--color-main);}
.state-pill.mid {background:var(--grayscale2); color:var(--grayscale7);}
.state-pill.bad {background:#FEECEC; color:var(--color-red);}

/* 프로필 폼 */
.input-form-wrap {max-width: unset;}
/* .profile-form {display:flex; flex-direction:column; row-gap:18px; max-width:520px;}
.profile-form .input-item label {display:block; margin-bottom:8px; font-size:var(--fs-14); font-weight:500; color:var(--grayscale8);} */
.profile-form .form-msg {font-size:var(--fs-14);}
.profile-form .form-msg.ok {color:var(--color-main);}
.profile-form .form-msg.bad {color:var(--color-red);}

/* 알림톡 충전 — 프리미엄 충전 UI */
.mypage-lead {font-size:var(--fs-16); color:var(--grayscale6); line-height:1.6;}
.charge-grid {display:grid; grid-template-columns:6fr 5fr; gap:24px; align-items:start;}

.balance-card {position:relative; overflow:hidden; border-radius:16px; padding:32px;
    background:linear-gradient(135deg, #4F46E5 0%, var(--color-main) 45%, #8B8DF8 100%);
    color:var(--color-white); box-shadow:0 12px 32px rgba(99,102,241,.28);}
.balance-card .balance-deco {position:absolute; right:-70px; top:-70px; width:220px; height:220px; border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), rgba(255,255,255,0) 65%); pointer-events:none;}
.balance-card .balance-deco::after {content:""; position:absolute; left:-140px; top:150px; width:180px; height:180px; border-radius:50%;
    border:1px solid rgba(255,255,255,.25);}
.balance-card .balance-label {display:inline-block; padding:5px 12px; border-radius:99px; font-size:var(--fs-12); font-weight:600;
    letter-spacing:.02em; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);}
.balance-card .balance-amount {display:block; margin-top:14px; font-size:clamp(2rem, 2.6vw, 2.6rem); font-weight:700; letter-spacing:-0.02em;}
.balance-card .balance-amount small {margin-left:2px; font-size:.55em; font-weight:500; opacity:.85;}
.balance-card .balance-site {margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.22);}
.balance-card .balance-site-label {display:block; margin-bottom:8px; font-size:var(--fs-12); opacity:.8;}
.balance-card select {width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.14); color:var(--color-white); font-size:var(--fs-14); cursor:pointer; backdrop-filter:blur(4px);}
.balance-card select:focus {outline:2px solid rgba(255,255,255,.5); outline-offset:1px;}
.balance-card select option {color:var(--grayscale10);}

.charge-panel {margin-top:20px; padding:26px; border:1px solid var(--grayscale3); border-radius:16px; background:var(--color-white);}
.charge-panel-head {display:flex; align-items:baseline; justify-content:space-between; flex-wrap: wrap; row-gap: 4px; column-gap:10px; margin-bottom:16px;}
.charge-panel-tit {font-size:var(--fs-17); font-weight:700; color:var(--grayscale10);}
.charge-panel-sub {font-size:var(--fs-12); color:var(--grayscale6);}
.charge-amount-list {display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;}
.charge-amount-btn {display:flex; flex-direction:column; gap:4px; align-items:flex-start; padding:16px 18px;
    border:1.5px solid var(--grayscale3); border-radius:12px; background:var(--color-white); cursor:pointer;
    transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease; text-align:left;}
.charge-amount-btn strong {font-size:var(--fs-17); font-weight:700; color:var(--grayscale10);}
.charge-amount-btn span {font-size:var(--fs-12); color:var(--grayscale6);}
.charge-amount-btn:hover {border-color:var(--color-main); transform:translateY(-1px); box-shadow:0 6px 16px rgba(99,102,241,.12);}
.charge-amount-btn.active {border-color:var(--color-main); background:rgba(99,102,241,.06); box-shadow:0 0 0 3px rgba(99,102,241,.14);}
.charge-amount-btn.active strong {color:var(--color-main);}
.charge-notes {margin-top:20px; padding:16px 18px; border-radius:12px; background:var(--grayscale1);}
.charge-notes li {position:relative; padding-left:14px; font-size:var(--fs-13); color:var(--grayscale6); line-height:1.7;}
.charge-notes li::before {content:""; position:absolute; left:2px; top:11px; width:4px; height:4px; border-radius:50%; background:var(--color-main); opacity:.6;}

.charge-pay-card {position:sticky; top:100px; padding:26px; border:1px solid var(--grayscale3); border-radius:16px;
    background:var(--color-white); box-shadow:0 8px 24px rgba(17,17,17,.05);}
.charge-summary {margin:16px 0 18px; padding:16px 18px; border-radius:12px; background:var(--grayscale1);}
.charge-summary .summary-line {display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:var(--fs-14); color:var(--grayscale7);}
.charge-summary .summary-line strong {font-weight:600; color:var(--grayscale9);}
.charge-summary .summary-line.total {margin-top:8px; padding-top:14px; border-top:1px solid var(--grayscale3); font-size:var(--fs-15);}
.charge-summary .summary-line.total strong {font-size:var(--fs-20); font-weight:700; color:var(--color-main);}
.charge-pay-card #payment-method {margin:0 -8px;}
.charge-pay-card #chargeError {margin:8px 0 4px;}
.charge-pay-card .box-btn {margin-top:10px;}
.charge-safe {margin-top:12px; font-size:var(--fs-12); color:var(--grayscale5); text-align:center; line-height:1.6;}

/* 결제 내역 — 필터 pill + 접힌 환불 표시 */
/* .filter-pills {display:flex; flex-wrap:wrap;}
.filter-pill {display:inline-flex; align-items:center; padding:8px 16px; border:1px solid var(--grayscale3); border-radius:999px; font-size:1.4rem; font-weight:500; color:var(--grayscale7); background:var(--color-white); transition:border-color .15s ease, background-color .15s ease, color .15s ease;}
.filter-pill:hover {border-color:var(--color-main); color:var(--color-main);}
.filter-pill.active {border-color:var(--color-main-strong); background:var(--color-main-strong); color:var(--color-white); font-weight:600;} */
.filter-pill {margin-right: 12px;}

.row-amount.refund {color:#C0392B;}
.list-rows .list-row .row-refund {grid-column:1 / -1; padding:8px 12px; border-radius:8px; background:var(--grayscale1); font-size:1.3rem; color:var(--grayscale6);}
.list-rows .list-row .row-refund strong {color:#C0392B; font-weight:600;}
.row-receipt {color:var(--color-main); font-weight:500; text-decoration:underline; text-underline-offset:3px;}
.row-receipt:hover {opacity:.8;}

/* ── 템플릿 상세 서식 본문(.view-desc-body) — M-템플릿상세 (HQ 서식 본문 렌더) ── */
.view-desc-body {margin-top:18px; line-height:1.7; color:var(--grayscale7, #333); word-break:keep-all;}
.view-desc-body img {display:block; max-width:100%; height:auto; border-radius:10px; margin:14px 0;}
.view-desc-body h3 {margin:1em 0 .4em; font-size:var(--fs-20, 20px); font-weight:700; color:var(--grayscale9, #111);}
.view-desc-body h4 {margin:1em 0 .4em; font-size:var(--fs-16, 16px); font-weight:700;}
.view-desc-body p {margin:.5em 0;}
.view-desc-body ul, .view-desc-body ol {margin:.5em 0; padding-left:1.4em;}
.view-desc-body ul {list-style:disc;}
.view-desc-body ol {list-style:decimal;}
.view-desc-body li {margin:.2em 0;}
.view-desc-body a {color:var(--color-main, #2b6ef2); text-decoration:underline;}
.view-desc-body strong {font-weight:700;}
.view-desc-body em {font-style:italic;}
.view-desc-body blockquote {margin:.6em 0; padding:2px 0 2px 14px; border-left:3px solid var(--grayscale3, #ddd); color:var(--grayscale6, #666);}


/* ── 자동결제 카드 등록 유도 (완료 페이지·마이페이지) — M-빌링연결 ── */
.billing-cta {margin:26px 0 6px; padding:18px 20px; border:1px solid var(--color-main-30, #bcd2ff); background:var(--color-main-10, #f0f5ff); border-radius:12px; text-align:left;}
.billing-cta b {display:block; font-size:15px; margin-bottom:5px; color:var(--grayscale9, #111);}
.billing-cta p {font-size:13px; line-height:1.6; color:var(--grayscale6, #555); margin:0;}
.mypage-alert {display:flex; align-items:center; gap:14px; padding:14px 18px; border:1px solid #fde68a; background:#fffbeb; border-radius:12px;}
.mypage-alert-txt {flex:1; min-width:0;}
.mypage-alert-txt b {display:block; font-size:16px; color:#92400e;}
.mypage-alert-txt span {font-size:14px; color:#a16207;}
.mypage-alert .primary-btn {flex-shrink:0; white-space:nowrap;}
.mypage-alert.no-site {background-color: var(--color-main-10); border-color: var(--color-main); justify-content: space-between;}
.mypage-alert-txt p {display:block; font-size:16px; color:var(--grayscale10);}
.mypage-alert:has(.form-msg.ok) {background-color: var(--color-main-10);}
.mypage-alert:has(.form-msg.bad) {background-color: #FDECEC;}

/* ── 입금 계좌 박스 + 복사 (M27v2) ── */
.bank-acct-box {border:1px solid var(--grayscale3); border-radius:12px; background:var(--color-white); padding:20px 24px;
    display:flex; flex-direction:column; row-gap:12px;}
.bank-acct-label {font-size:var(--fs-13); font-weight:600; color:var(--grayscale6);}
.bank-acct-main {display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.bank-acct-badge {width:34px; height:34px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
    font-size:var(--fs-14); font-weight:800; color:var(--color-white); flex-shrink:0;}
.bank-acct-badge.dark {color:var(--grayscale10);}
.bank-acct-logo {width:34px; height:34px; border-radius:9px; object-fit:contain; flex-shrink:0; background:var(--color-white);
    border:1px solid var(--grayscale2);}
.bank-acct-name {font-size:var(--fs-20); font-weight:800; color:var(--grayscale10);}
.bank-acct-num {font-size:var(--fs-20); font-weight:800; color:var(--grayscale10); letter-spacing:.5px; word-break:break-all;}
.bank-acct-holder {font-size:var(--fs-20); font-weight:700; color:var(--grayscale10);}
.bank-copy-btn {align-self:flex-start; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--grayscale3);
    border-radius:8px; background:var(--color-white); padding:8px 14px; font-size:var(--fs-14); font-weight:600;
    color:var(--grayscale8); cursor:pointer; transition:border-color .15s ease, color .15s ease;}
.bank-copy-btn:hover, .bank-copy-btn.copied {border-color:var(--color-main); color:var(--color-main);}
.bank-copy-btn svg {flex-shrink:0;}

/* ── 결제수단 선택·증빙 폼·약관 모달·알림 (M27) ── */
.pay-method-tabs {display:flex; gap:10px; margin-bottom:16px;}
.pay-method-tab {flex:1; position:relative; display:flex; flex-direction:column; gap:3px; padding:14px 16px; border:1.5px solid var(--grayscale3, #ddd); border-radius:12px; cursor:pointer; transition:border-color .15s, background .15s;}
.pay-method-tab input {position:absolute; opacity:0; pointer-events:none;}
.pay-method-tab span {font-size:15px; font-weight:700; color:var(--grayscale9, #111);}
.pay-method-tab em {font-style:normal; font-size:12px; color:var(--grayscale6, #777);}
.pay-method-tab.is-on {border-color:var(--color-main, #2b6ef2); background:var(--color-main-10, #f0f5ff);}
.pay-method-tab.is-on span {color:var(--color-main, #2b6ef2);}
.tax-doc-tabs {display:flex; gap:8px;}
.tax-doc-tabs label {position:relative; flex:1; text-align:center; padding:10px 8px; border:1.5px solid var(--grayscale3, #ddd); border-radius:10px; cursor:pointer; font-size:13px;}
.tax-doc-tabs input {position:absolute; opacity:0; pointer-events:none;}
.tax-doc-tabs label:has(input:checked) {border-color:var(--color-main, #2b6ef2); background:var(--color-main-10, #f0f5ff); font-weight:700; color:var(--color-main, #2b6ef2);}
.mt10 {margin-top:10px;}

/* <dialog> 화면 중앙 고정 — reset.css 의 * {margin:0} 가 브라우저 기본(margin:auto) 센터링을
   지워 열린 대화상자가 좌상단에 붙는다. :where() 로 특이도 0을 유지해 개별 모달 룰을 침범하지 않는다. */
:where(dialog[open]) {position:fixed; inset:0; margin:auto; max-width:calc(100vw - 32px); max-height:calc(100vh - 32px);}

dialog.policy-modal {border:0; border-radius:16px; padding:0; width:min(680px, 94vw); max-height:84vh; display:flex; flex-direction:column; box-shadow:0 24px 64px rgba(0,0,0,.25);}
dialog.policy-modal:not([open]) {display:none;}
dialog.policy-modal::backdrop {background:rgba(17,24,39,.55);}
.policy-modal-h {display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid var(--grayscale2, #eee);}
.policy-modal-h b {font-size:17px;}
.policy-modal-x {width:32px; height:32px; border:0; border-radius:50%; background:var(--grayscale1, #f5f5f5); cursor:pointer; font-size:14px;}
.policy-modal-b {flex:1; overflow-y:auto; padding:18px 22px; font-size:13.5px; line-height:1.7; color:var(--grayscale7, #444);}
.policy-modal-b h4 {margin:18px 0 6px; font-size:14.5px; color:var(--grayscale9, #111);}
.policy-modal-b h4:first-child {margin-top:0;}
.policy-modal-f {padding:14px 22px; border-top:1px solid var(--grayscale2, #eee); text-align:right;}

dialog.pay-alert {border:0; border-radius:16px; padding:28px 30px 24px; width:min(360px, 90vw); text-align:center; box-shadow:0 24px 64px rgba(0,0,0,.25);}
dialog.pay-alert:not([open]) {display:none;}
dialog.pay-alert::backdrop {background:rgba(17,24,39,.55);}
dialog.pay-alert b {display:block; font-size:17px; margin-bottom:8px;}
dialog.pay-alert p {font-size:14px; line-height:1.6; color:var(--grayscale7, #555); margin-bottom:18px;}
/* ── 템플릿 상세 소개(.template-detail-body) — patch38v2 (핵심 기능·미리보기 대체 본문) ── */
.template-detail-body-wrap {padding:60px 0 90px;}
.template-detail-body {max-width:920px; margin:0 auto; line-height:1.8; color:var(--grayscale7, #333); word-break:keep-all; font-size:17px;}
.template-detail-body img {display:block; width:100%; height:auto; border-radius:14px; margin:26px 0;}
.template-detail-body h3, .template-detail-body h4 {margin:34px 0 12px; font-weight:700;}
.template-detail-body p {margin:12px 0;}
.template-detail-body ul, .template-detail-body ol {margin:12px 0 12px 22px;}
@media (max-width: 768px) {.template-detail-body {font-size:15px;} .template-detail-body-wrap {padding:40px 0 60px;}}
/* 템플릿 목록 필터 탭·정렬 링크화(a) 안전 규칙 — patch38v2 */
a.tab-btn, a.sort-btn {text-decoration:none; display:inline-block;}
/* ── FAQ 운영 상담(비회원 전용) 회원 안내 박스 — patch39v3 ── */
.inquiry-member-guide {display:flex; flex-direction:column; align-items:flex-start; gap:22px; justify-content:center; height:100%; min-height:320px; border:1px solid var(--grayscale3, #e5e7eb); border-radius:16px; padding:40px 36px; background:var(--grayscale1, #fafafa);}
.inquiry-member-guide .body-txt {line-height:1.8; color:var(--grayscale7, #444);}
.inquiry-member-guide .primary-btn {display:inline-flex; align-items:center; gap:8px;}
@media (max-width: 768px) {.inquiry-member-guide {min-height:0; padding:28px 22px;}}
/* ── 고객센터 기본 비밀글 — 타인 글 잠금 행(.cs-locked) — patch39v7 ── */
.cs-wrap .cs-list li .cs-locked {display:flex; justify-content:space-between; align-items:center; padding:24px 40px; border:1px solid var(--grayscale3); border-radius:12px; cursor:default; background:var(--grayscale1, #fafafa);}
.cs-wrap .cs-subject.is-locked {color:var(--grayscale6, #888);}
.cs-wrap .cs-subject.is-locked::before {content:"🔒"; margin-right:8px; font-size:0.9em;}
@media all and (max-width:768px) {.cs-wrap .cs-list li .cs-locked {flex-direction:column; row-gap:10px; align-items:flex-start; padding:24px 30px;}}

/* ── 알림톡 충전 — 충전할 사이트 라디오 카드 (H11-5) ─────────────────
   M14 뷰(site-radio 마크업)에 대응하는 CSS 가 누락돼 라디오가 생 텍스트로
   보였다(사용자 보고 2026-08-03: "라디오버튼·호버 다 보이게"). :has() 선택
   패턴은 이 파일의 .tax-doc-tabs 와 동일 — 기존 브라우저 지원 범위 유지. */
.site-radio-list {display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;}
.site-radio {position:relative; display:flex; align-items:center; gap:12px; padding:16px 18px;
    border:1.5px solid var(--grayscale3, #ddd); border-radius:12px; background:var(--color-white); cursor:pointer;
    transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;}
.site-radio:hover {border-color:var(--color-main); transform:translateY(-1px); box-shadow:0 6px 16px rgba(99,102,241,.12);}
.site-radio input {position:absolute; opacity:0; pointer-events:none;}
.site-radio-body {display:flex; flex-direction:column; gap:4px; min-width:0;}
.site-radio-name {font-size:var(--fs-16); font-weight:700; color:var(--grayscale10); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.site-radio-balance {font-size:var(--fs-13); color:var(--grayscale6);}
.site-radio-check {margin-left:auto; flex-shrink:0; position:relative; width:22px; height:22px; border-radius:50%;
    border:2px solid var(--grayscale4, #ccc); background:var(--color-white); transition:border-color .15s, background-color .15s;}
.site-radio-check::after {content:""; position:absolute; left:50%; top:45%; width:5px; height:9px;
    border:solid var(--color-white); border-width:0 2px 2px 0;
    transform:translate(-50%, -50%) rotate(45deg) scale(0); transition:transform .15s;}
.site-radio:has(input:checked) {border-color:var(--color-main); background:rgba(99,102,241,.06); box-shadow:0 0 0 3px rgba(99,102,241,.14);}
.site-radio:has(input:checked) .site-radio-name {color:var(--color-main);}
.site-radio:has(input:checked) .site-radio-check {border-color:var(--color-main); background:var(--color-main);}
.site-radio:has(input:checked) .site-radio-check::after {transform:translate(-50%, -50%) rotate(45deg) scale(1);}
.site-radio:has(input:focus-visible) {outline:2px solid var(--color-main); outline-offset:2px;}
@media (max-width: 768px) {.site-radio-list {grid-template-columns:1fr;}}
/* 잔액 카드의 선택 사이트명 (뷰의 .balance-site-name — 기존 CSS 는 .balance-site 만 정의) */
.balance-card .balance-site-name {display:block; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.22); font-size:var(--fs-13); opacity:.85;}

/* 추가 css 260803 */
.section-tit-wrap .icon {width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background-color: rgba(99,102,241,0.3); border-radius: 50%; margin: 0 auto 32px auto;}
.card-billing-wrap {max-width: 768px; margin-inline: auto; padding: var(--fs-40); border-radius: var(--fs-16); box-shadow: var(--sitelo-shadow);}
.card-billing-wrap .section-tit-wrap {margin-bottom: var(--fs-60);}


@media (max-width: 1440px) {
    .mypage-two-col, .charge-grid {grid-template-columns:1fr;}}

@media (max-width: 1280px) {
    .plan-strip {flex-direction:column; align-items:stretch; row-gap:16px; padding:24px;}
    .plan-strip .strip-item {padding:0;}
    .plan-strip .strip-item + .strip-item {border-left:0; border-top:1px solid var(--grayscale3); padding-top:16px; padding-left: 0;}
}

@media (max-width: 1024px) {
    .mypage-layout {flex-direction:column; gap:0;}
    .mypage-content {width:100%;}
    .mypage-side {position:static; width:100%; height:fit-content; padding: 20px 32px;}
    .mypage-side-tit {margin-bottom: 6px; padding-bottom: 16px;}
    .mypage-side.swiper {overflow:hidden;}
    .mypage-side-menu.swiper-wrapper {align-items:center;}
    .mypage-side-menu > .swiper-slide {width:auto; flex-shrink:0;}
    .mypage-side-menu li a {transition: color 0.3s; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--grayscale6);}
    .mypage-side-menu li a:hover {color: var(--grayscale9);}
    .mypage-side-menu li + li {margin-left: 12px; padding-left: 12px; position: relative;}
    .mypage-side-menu li.logout {margin:0; border:0; padding:0; margin-left: 12px; padding-left: 12px;}
    .mypage-side-menu li + li::after {content: ''; width: 1px; height: 14px; background-color: var(--grayscale3); position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%);}
    .header-util .point-badge {display:none;}
    .card-billing-wrap {padding: 24px;}
}

@media (max-width: 768px) {
    .mypage-side {position:static; width:100%; height:fit-content; padding: 20px 24px;}
    .mypage-side-tit {margin-bottom: 0; padding-bottom: 10px;}
    .mypage-content {padding-block: 60px;}
    .mypage-content .l-inner {row-gap: 40px;}
    .info-box,.card-billing-wrap, .charge-panel, .charge-pay-card {padding: 20px;}
}

@media (max-width: 600px) {
    .info-box .strip-cols {flex-direction: column;}
    .info-box .strip-cols .strip-item + .strip-item {padding-top: 16px; margin-top: 16px; border-left: 0; border-top: 1px solid var(--grayscale3);}
    .info-box, .card-billing-wrap, .charge-panel, .charge-pay-card{padding: 16px;}
    .list-rows .list-row {display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start;}
    .mypage-alert {flex-direction: column; align-items: flex-start;}
}

@media (max-width: 480px) {
    .mypage-content {padding-block: 40px;}
    .mypage-content .l-inner {row-gap: 28px;}
    .mypage-side {position:static; width:100%; height:fit-content; padding: 14px 16px;}
}

@media (max-width: 375px) {
    .mypage-side {position:static; width:100%; height:fit-content; padding: 10px 12px;}
}
/* ── H11-7: 알림톡 보관 잔액(해지 사이트) 박스 ── */
.stranded-box {
    margin: 0 0 20px;
    padding: 18px 20px;
    border: 1px solid #ffd9a8;
    background: #fff8ef;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.stranded-box.done {
    border-color: #b7e3c0;
    background: #f0faf2;
    gap: 4px;
}
.stranded-box.done strong { color: #1d7a3a; font-size: 15px; }
.stranded-box.done span { color: #4a7d59; font-size: 13px; }
.stranded-head { display: flex; flex-direction: column; gap: 4px; }
.stranded-head strong { font-size: 15px; color: #8a5a00; }
.stranded-head span { font-size: 13px; color: #a07828; }
.stranded-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px 12px; list-style: none; background: #fff; border-radius: 8px; border: 1px solid #f3e2c6; }
.stranded-list li { display: flex; justify-content: space-between; font-size: 13px; color: #555; }
.stranded-list li strong { color: #222; }
.stranded-claim { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stranded-claim label { font-size: 13px; color: #666; }
.stranded-claim select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; min-width: 180px; }
.stranded-note { font-size: 13px; color: #8a6d3b; margin: 0; }