/* 회원 마이페이지·고객센터 공통 — 흰 배경 + 네이비(§2-5). tokens.css 변수만 사용, 인라인 금지. */

/* 인라인 아이콘(이모지 대체 SVG) — 텍스트 흐름 안에서 1em 크기·기준선 정렬. */
.ic { width: 1em; height: 1em; vertical-align: -0.15em; display: inline-block; }

/* ── 셸: 좌 사이드바 + 우 컨텐츠 ─────────────────────────────── */
.acct-wrap {
  max-width: 1100px; margin: 0 auto; padding: var(--sp-32) var(--sp-24) var(--sp-64);
  display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-32); align-items: start;
}
.acct-side {
  position: sticky; top: var(--sp-24);
  border: 1px solid var(--gray-100); border-radius: var(--r-12); background: var(--bg);
  box-shadow: var(--sh-card); overflow: hidden;
}
/* ★2026-07-31 깨짐 수정(사장님 지적: /charge 화면):
   이 요소는 <a>인데 display 지정이 없어 ★인라인으로 잡혔다. 인라인 박스는 세로 padding이
   줄 높이를 늘리지 못해 네이비 배경이 글자를 벗어나 삐져나오고, 안쪽 .lbl(display:block)이
   인라인 안의 블록이 되면서 줄이 쪼개져 '보유 크레딧' 라벨이 배경 위로 잘려 보였다.
   → display:block 한 줄이 근본 수정. (마이페이지·지갑 등 account 셸을 쓰는 ★모든 화면 공통) */
.acct-side-balance {
  display: block;
  padding: var(--sp-16); background: var(--navy); color: #fff;
  text-decoration: none;
}
.acct-side-balance:hover { background: var(--navy-700, #2D4D7A); }
.acct-side-balance .lbl { font-size: var(--text-12); opacity: .8; display: block; }
.acct-side-balance .val { display: block; font-size: var(--text-20); font-weight: var(--w-700); }
.acct-side-balance .val small { font-size: var(--text-12); font-weight: var(--w-400); opacity: .85; margin-left: 2px; }
.acct-side-nav { padding: var(--sp-8); }
.acct-side-group {
  font-size: var(--text-12); color: var(--gray-500); font-weight: var(--w-700);
  padding: var(--sp-12) var(--sp-12) var(--sp-4);
}
.acct-side-link {
  display: flex; align-items: center; gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-12); border-radius: var(--r-8);
  color: var(--gray-700); text-decoration: none; font-size: var(--text-14);
  border-left: 3px solid transparent;
}
.acct-side-link:hover { background: var(--gray-50); }
.acct-side-link.is-active {
  background: var(--info-bg); color: var(--navy); font-weight: var(--w-700);
  border-left-color: var(--navy);
}
.acct-side-ico { width: 18px; height: 18px; flex: none; }

.acct-main { min-width: 0; }
.acct-h1 { font-size: var(--text-24); font-weight: var(--w-700); color: var(--navy); margin: 0 0 var(--sp-8); }
.acct-lead { color: var(--gray-500); font-size: var(--text-14); margin: 0 0 var(--sp-24); }

@media (max-width: 860px) {
  .acct-wrap { grid-template-columns: 1fr; gap: var(--sp-16); padding: var(--sp-16); }
  .acct-side { position: static; }
  .acct-side-nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
  .acct-side-group { width: 100%; padding-bottom: 0; }
  .acct-side-link { border-left: 0; border-bottom: 2px solid transparent; }
  .acct-side-link.is-active { border-left: 0; border-bottom-color: var(--navy); }
}

/* ── 카드 ─────────────────────────────────────────────────── */
.acct-card {
  border: 1px solid var(--gray-100); border-radius: var(--r-12); background: var(--bg);
  box-shadow: var(--sh-card); padding: var(--sp-24); margin-bottom: var(--sp-16);
}
.acct-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-16); }
.acct-card-title { font-size: var(--text-16); font-weight: var(--w-700); color: var(--gray-700); margin: 0; }
.acct-card.is-danger { border-color: #F3C6C6; }
.acct-card.is-danger .acct-card-title { color: var(--danger); }

/* 정의목록(라벨/값) */
.acct-dl { display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-12) var(--sp-16); margin: 0; }
.acct-dl dt { color: var(--gray-500); font-size: var(--text-14); }
.acct-dl dd { margin: 0; color: var(--gray-700); font-size: var(--text-14); word-break: break-word; }
.acct-dl dd .muted { color: var(--gray-500); }
.acct-lock { color: var(--gray-500); }
.acct-help { font-size: var(--text-12); color: var(--gray-500); margin-top: 2px; }
@media (max-width: 560px) { .acct-dl { grid-template-columns: 1fr; gap: var(--sp-4); } .acct-dl dd { margin-bottom: var(--sp-8); } }

/* ── 배지 ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: 999px; font-size: var(--text-12); font-weight: var(--w-700); line-height: 1.6;
}
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger); }
.badge--info    { background: var(--info-bg);    color: var(--info); }
.badge--neutral { background: var(--gray-100);   color: var(--gray-500); }
.badge--navy    { background: rgba(30,58,95,.08); color: var(--navy); }

/* ── 버튼 ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  height: var(--h-btn-40); padding: 0 var(--sp-16); border-radius: var(--r-8);
  font-size: var(--text-14); font-weight: var(--w-700); cursor: pointer;
  border: 1px solid transparent; text-decoration: none; transition: background .15s, box-shadow .15s, opacity .15s;
}
.btn-sm { height: 32px; padding: 0 var(--sp-12); font-size: var(--text-12); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-700); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: var(--bg); color: var(--navy); border-color: var(--gray-300); }
.btn-ghost:hover { border-color: var(--navy-300); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(.95); }
.btn-danger-ghost { background: var(--bg); color: var(--danger); border-color: #F3C6C6; }
.btn-danger-ghost:hover { background: var(--danger-bg); }

/* ── 폼 ───────────────────────────────────────────────────── */
.acct-field { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-16); }
.acct-field label { font-size: var(--text-12); font-weight: var(--w-600); color: var(--gray-700); }
.acct-input, .acct-select, .acct-textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: var(--text-14);
  border: 1px solid var(--gray-300); border-radius: var(--r-8); background: var(--bg);
  color: var(--gray-700); font-family: inherit;
}
.acct-textarea { min-height: 140px; resize: vertical; line-height: var(--lh-1-7); }
.acct-input:focus, .acct-select:focus, .acct-textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30,58,95,.10);
}
.acct-input[readonly] { background: var(--gray-50); color: var(--gray-500); }
.acct-err { color: var(--danger); font-size: var(--text-12); }
.acct-form-actions { display: flex; gap: var(--sp-8); justify-content: flex-end; margin-top: var(--sp-8); }

/* ── 빈 상태 ──────────────────────────────────────────────── */
.acct-empty {
  text-align: center; color: var(--gray-500); font-size: var(--text-14);
  padding: var(--sp-40) var(--sp-16); border: 1px dashed var(--gray-300);
  border-radius: var(--r-12); background: var(--gray-50);
}
.acct-empty strong { color: var(--gray-700); display: block; margin-bottom: var(--sp-4); }

/* ── 모달 ─────────────────────────────────────────────────── */
.acct-modal-back {
  position: fixed; inset: 0; background: rgba(17,24,39,.45);
  display: none; align-items: center; justify-content: center; padding: var(--sp-16); z-index: 50;
}
.acct-modal-back.is-open { display: flex; }
.acct-modal {
  background: var(--bg); border-radius: var(--r-12); box-shadow: var(--sh-modal);
  width: 100%; max-width: 440px; padding: var(--sp-24);
}
.acct-modal h3 { margin: 0 0 var(--sp-8); font-size: var(--text-20); color: var(--navy); }
.acct-modal p { color: var(--gray-700); font-size: var(--text-14); margin: 0 0 var(--sp-16); line-height: var(--lh-1-7); }

/* ── 포인트 지갑 ──────────────────────────────────────────── */
.wallet-hero {
  border-radius: var(--r-12); padding: var(--sp-32); margin-bottom: var(--sp-16);
  background: linear-gradient(135deg, var(--navy), var(--navy-700)); color: #fff;
}
.wallet-hero .lbl { font-size: var(--text-14); opacity: .85; }
.wallet-hero .amount { font-size: 40px; font-weight: var(--w-700); line-height: 1.1; margin: var(--sp-8) 0; }
.wallet-hero .amount small { font-size: var(--text-20); font-weight: var(--w-400); }
.wallet-hero .sub { font-size: var(--text-14); opacity: .9; }
.wallet-hero .actions { margin-top: var(--sp-16); display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.wallet-hero .btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.wallet-hero .btn-ghost:hover { background: rgba(255,255,255,.2); }
.wallet-low { background: var(--danger-bg); color: var(--danger); border-radius: var(--r-8); padding: var(--sp-12) var(--sp-16); font-size: var(--text-14); margin-bottom: var(--sp-16); }

/* 이용내역 타임라인 */
.ledger-day { font-size: var(--text-12); color: var(--gray-500); font-weight: var(--w-700); margin: var(--sp-16) 0 var(--sp-8); }
.ledger-item { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) 0; border-bottom: 1px solid var(--gray-100); }
.ledger-ico { width: 34px; height: 34px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-500); }
.ledger-ico.is-plus { background: var(--success-bg); color: var(--success); }
.ledger-ico.is-minus { background: var(--gray-100); color: var(--gray-500); }
.ledger-body { flex: 1; min-width: 0; }
.ledger-title { font-size: var(--text-14); color: var(--gray-700); }
.ledger-memo { font-size: var(--text-12); color: var(--gray-500); }
.ledger-amt { text-align: right; flex: none; }
.ledger-delta { font-weight: var(--w-700); font-size: var(--text-14); }
.ledger-delta.is-plus { color: var(--success); }
.ledger-delta.is-minus { color: var(--gray-700); }
.ledger-bal { font-size: var(--text-12); color: var(--gray-500); }

/* 충전 패키지 */
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-12); }
.pkg-card { border: 1px solid var(--gray-300); border-radius: var(--r-12); padding: var(--sp-16); text-align: center; }
.pkg-card.is-featured { border-color: var(--navy); box-shadow: 0 6px 18px rgba(30,58,95,.14); }
.pkg-credit { font-size: var(--text-20); font-weight: var(--w-700); color: var(--navy); }
.pkg-price { font-size: var(--text-14); color: var(--gray-700); margin: var(--sp-4) 0; }
.pkg-sub { font-size: var(--text-12); color: var(--gray-500); margin-bottom: var(--sp-12); }

/* ── 요금제 ───────────────────────────────────────────────── */
.pricing-hero { text-align: center; padding: var(--sp-32) 0 var(--sp-16); }
.pricing-hero h1 { font-size: 28px; color: var(--navy); margin: 0 0 var(--sp-8); }
.pricing-hero p { color: var(--gray-500); margin: 0; }
.beta-banner { background: var(--info-bg); color: var(--info); border-radius: var(--r-8); padding: var(--sp-12) var(--sp-16); text-align: center; font-size: var(--text-14); margin-bottom: var(--sp-24); }
.acct-table { width: 100%; border-collapse: collapse; font-size: var(--text-14); }
.acct-table th, .acct-table td { padding: var(--sp-12); border-bottom: 1px solid var(--gray-100); text-align: left; }
.acct-table th { color: var(--gray-500); font-weight: var(--w-600); background: var(--gray-50); }
.acct-table-wrap { overflow-x: auto; }

/* 아코디언(고지/FAQ) */
.acc-item { border-bottom: 1px solid var(--gray-100); }
.acc-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: var(--sp-16) 0; font-size: var(--text-14); font-weight: var(--w-600); color: var(--gray-700);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-8); }
.acc-q .chev { transition: transform .18s; flex: none; }
.acc-item.is-open .acc-q .chev { transform: rotate(90deg); }
.acc-a { display: none; padding: 0 0 var(--sp-16); color: var(--gray-700); font-size: var(--text-14); line-height: var(--lh-1-7); white-space: pre-line; }
.acc-item.is-open .acc-a { display: block; }

/* ── 탭(고객센터) ─────────────────────────────────────────── */
.acct-tabs { display: flex; gap: var(--sp-4); border-bottom: 1px solid var(--gray-100); margin-bottom: var(--sp-24); }
.acct-tab { padding: var(--sp-12) var(--sp-16); text-decoration: none; color: var(--gray-500); font-weight: var(--w-600); border-bottom: 2px solid transparent; }
.acct-tab.is-active { color: var(--navy); border-bottom-color: var(--navy); }

/* ── 목록(공지·문의) ──────────────────────────────────────── */
.list-row { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-16) var(--sp-8); border-bottom: 1px solid var(--gray-100); text-decoration: none; color: var(--gray-700); }
.list-row:hover { background: var(--gray-50); }
.list-row .t { flex: 1; min-width: 0; }
.list-row .t .title { font-size: var(--text-14); font-weight: var(--w-600); color: var(--gray-700); }
.list-row .t .meta { font-size: var(--text-12); color: var(--gray-500); margin-top: 2px; }
.list-row .pin { color: var(--navy); }
.list-date { font-size: var(--text-12); color: var(--gray-500); flex: none; }

/* 상세 */
.detail-head { border-bottom: 1px solid var(--gray-100); padding-bottom: var(--sp-16); margin-bottom: var(--sp-16); }
.detail-title { font-size: var(--text-20); color: var(--gray-700); margin: var(--sp-8) 0; }
.detail-meta { font-size: var(--text-12); color: var(--gray-500); }
.detail-body { font-size: var(--text-14); line-height: var(--lh-1-7); color: var(--gray-700); white-space: pre-wrap; }
.detail-reply { margin-top: var(--sp-16); padding: var(--sp-16); background: var(--info-bg); border-radius: var(--r-8); }
.detail-reply .h { font-size: var(--text-12); font-weight: var(--w-700); color: var(--info); margin-bottom: var(--sp-4); }

/* 페이저 */
.acct-pager { display: flex; justify-content: center; gap: var(--sp-8); margin-top: var(--sp-24); }
.acct-pager a, .acct-pager span { padding: var(--sp-8) var(--sp-12); border-radius: var(--r-8); font-size: var(--text-14); text-decoration: none; color: var(--navy); border: 1px solid var(--gray-300); }
.acct-pager .disabled { color: var(--gray-300); border-color: var(--gray-100); }

/* 가이드 단계 */
.guide-step { display: flex; gap: var(--sp-16); padding: var(--sp-16); border: 1px solid var(--gray-100); border-radius: var(--r-12); margin-bottom: var(--sp-12); }
.guide-num { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: var(--w-700); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.guide-step h4 { margin: 0 0 var(--sp-4); color: var(--gray-700); font-size: var(--text-16); }
.guide-step p { margin: 0; color: var(--gray-500); font-size: var(--text-14); }

/* flash */
.acct-flash { display: flex; gap: var(--sp-8); align-items: center; padding: var(--sp-12) var(--sp-16); border-radius: var(--r-8); font-size: var(--text-14); margin-bottom: var(--sp-16); }
.acct-flash.is-success { background: var(--success-bg); color: var(--success); }
.acct-flash.is-error { background: var(--danger-bg); color: var(--danger); }
.acct-flash.is-info { background: var(--info-bg); color: var(--info); }

/* 유틸(인라인 스타일 금지 §2-5 대체) */
.mt-16 { margin-top: var(--sp-16); }
.ml-8 { margin-left: var(--sp-8); }
.acct-field--row { flex-direction: row; align-items: center; gap: var(--sp-8); }
.acct-narrow { max-width: 820px; margin: 0 auto; }
.text-center { text-align: center; }
.mt-24 { margin-top: var(--sp-24); }

/* 충전 패키지 라디오 선택 */
.pkg-card { position: relative; cursor: pointer; display: block; }
.pkg-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.pkg-card:has(input:checked) { border-color: var(--navy); box-shadow: 0 6px 18px rgba(30,58,95,.14); }

/* 결제수단 선택(계좌이체/카드결제) — 패키지 카드와 같은 선택 어포던스 */
.method-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-12); }
.method-card {
  position: relative; cursor: pointer; display: block;
  border: 1px solid var(--gray-300); border-radius: var(--r-12);
  padding: var(--sp-16); text-align: center;
}
.method-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.method-card:has(input:checked) { border-color: var(--navy); box-shadow: 0 6px 18px rgba(30,58,95,.14); }
.method-name { display: block; font-weight: 700; color: var(--navy); }
.method-sub { display: block; margin-top: 4px; font-size: .86rem; color: var(--gray-600); }

/* ── 문제제작의뢰 접수 폼 (2026-07-21) ──────────────────────────── */
.ord-sec { margin:26px 0 12px; font-size:15.5px; font-weight:800; color:var(--navy, #1E3A5F); }
.ord-sec:first-of-type { margin-top:8px; }
.ord-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.ord-col-2 { grid-column:1 / -1; }
@media (max-width:640px) { .ord-grid { grid-template-columns:1fr; } }
.ord-textarea { min-height:70px; resize:vertical; font-family:inherit; line-height:1.6; padding:10px 13px; }
.ord-hint { font-weight:400; font-size:12px; color:var(--gray-500, #6B7280); }
.ord-dim { color:var(--gray-500, #6B7280); font-size:12.5px; }
.ord-memo { background:var(--gray-50, #F9FAFB); font-size:13px; color:var(--gray-700, #374151); }

/* ── 특별(감면) 신청 (2026-07-31) ────────────────────────────────────── */
.sp-chip {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
  font-size: var(--text-12); font-weight: var(--w-700, 700);
}
.sp-chip.is-pending  { background: #FEF3C7; color: #92400E; }
.sp-chip.is-approved { background: #DCFCE7; color: #166534; }
.sp-chip.is-rejected { background: #FEE2E2; color: #991B1B; }
.sp-state.is-approved { font-size: var(--text-14); color: var(--gray-700); }
.sp-state.is-approved strong { color: var(--navy); }
.sp-textarea { min-height: 180px; line-height: 1.7; resize: vertical; font-family: inherit; }
.sp-file { display: inline-block; margin-right: var(--sp-8); color: var(--navy); }