/* 회원 마이페이지·고객센터 공통 — 흰 배경 + 네이비(§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); }
/* 그룹 제목 — '내 계정'과 '고객센터'가 ★한눈에 갈라져 보여야 한다(2026-08-18 사장님 지시).
   제목만 작게 띄워 두면 링크 목록에 묻힌다. 대문자급 자간 + 색 대비를 올리고,
   두 번째 그룹부터는 구분선과 여백으로 블록을 끊는다. */
.acct-side-group {
  display: block;
  font-size: var(--text-12); color: var(--navy); font-weight: var(--w-700);
  letter-spacing: .04em;
  padding: var(--sp-12) var(--sp-12) var(--sp-8);
}
.acct-side-group--sep {
  margin-top: var(--sp-12); padding-top: var(--sp-16);
  border-top: 1px solid var(--gray-100);
}
.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-group--sep { margin-top: var(--sp-8); padding-top: var(--sp-12); }
  .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); }

/* 충전 패키지 */
/* 충전 화면 패키지 — 요금제(.amt-grid)와 ★같은 규칙: 5개 한 줄, 모바일은 가로 스크롤.
   두 화면의 금액 카드가 다르게 보이면 같은 상품이 다른 것처럼 읽힌다. */
.pkg-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-12); }
@media (max-width: 760px) {
  .pkg-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 12px 2px 8px; margin: -12px -2px 0;
  }
  .pkg-grid > .pkg-card { flex: 0 0 132px; scroll-snap-align: center; }
}
.pkg-card { border: 2px solid var(--gray-300); border-radius: var(--r-12);
            padding: var(--sp-24) var(--sp-12) var(--sp-16); text-align: center;
            background: var(--bg); transition: border-color .15s, box-shadow .15s, transform .15s; }
.pkg-card:hover { border-color: var(--navy-300, #9DB2CE); transform: translateY(-2px); }
/* ★추천(featured)과 선택(checked)은 ★반드시 다르게 보여야 한다.
   전에는 둘 다 '네이비 테두리 + 그림자'라, 다른 카드를 골라도 추천 카드가 계속
   선택된 것처럼 남아 있었다(사장님 지적: "선택 효과가 추천 패키지에 그대로 있어").
   추천 = 배지 + 옅은 강조, 선택 = 진한 테두리 + 배경 + ✓ 로 갈랐다. */
.pkg-card.is-featured { border-color: var(--navy-300, #9DB2CE); }
.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); }
/* 1문항당 실질 단가 — 보너스율보다 직관적이라 눈에 띄게(네이비, §2-5 강조색). */
.pkg-unit { font-size: var(--text-12); font-weight: var(--w-700); color: var(--navy);
            margin-bottom: var(--sp-12); }
/* 1크레딧=1원 환산 고지 — 결제 저항을 줄이는 핵심 문장이라 본문보다 또렷하게. */
.pricing-rate { font-size: var(--text-14); color: var(--gray-700); margin-top: var(--sp-8); }
/* 부가세 포함 고지 — 법정 표시(총액표시제)라 눈에 띄되 본문을 가리지 않는 크기로. */
.pricing-vat { display: inline-block; margin-top: var(--sp-8); font-size: var(--text-12); color: var(--gray-500); }

/* ── 요금제 ───────────────────────────────────────────────── */
.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:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30,58,95,.14); }
/* 선택 = 진한 네이비 + 옅은 배경 + 우상단 ✓ (요금제 .amt-card.is-selected와 동일 언어) */
.pkg-card:has(input:checked) {
  border-color: var(--navy); background: rgba(30,58,95,.03);
  box-shadow: 0 6px 18px rgba(30,58,95,.16);
}
.pkg-card:has(input:checked)::after {
  content: "✓"; position: absolute; top: 8px; right: 10px;
  width: 20px; height: 20px; line-height: 20px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: var(--text-12); font-weight: var(--w-700);
}
/* 추천 배지 (2026-08-19 사장님 지적: "추천 글자랑 다른 문구가 겹쳐 읽기 어렵다")
   ★무엇이 문제였나 — 배지가 `top:-10px`로 카드 ★테두리 위에 정확히 걸쳐 있었고,
   배경이 반투명(rgba .08)이라 그 테두리와 카드 배경이 ★비쳐서 글자가 뭉개졌다.
   ★고친 방법 세 가지를 함께 쓴다(하나만으로는 또 겹친다)
     ① 배지를 카드 ★밖으로 완전히 올린다(테두리에 안 걸치게)
     ② 배경을 ★불투명 네이비로 — 뒤가 비치지 않으니 글자가 또렷하다
     ③ 그리드에 ★위 여백을 줘서 배지가 위쪽 안내문과 붙지 않게 한다 */
.pkg-grid { margin-top: 26px; }          /* 배지(높이 ~20px)가 나갈 자리 */
.pkg-card .badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; z-index: 1;
  background: var(--navy); color: #fff;  /* ★불투명 — 뒤가 안 비친다 */
  padding: 3px var(--sp-8); border-radius: 999px;
  font-size: var(--text-12); font-weight: var(--w-700); line-height: 1.4;
  box-shadow: 0 2px 6px rgba(30, 58, 95, .22);
}
/* 선택 표시(✓) — ★카드 밖 모서리로 뺀다.
   안쪽(top:8px right:10px)에 두면 카드가 좁아 ★금액 글자('50,000원'의 끝)와 겹친다.
   실제 화면을 찍어 보고 발견했다(좌표 검사는 배지만 봐서 못 잡았다).
   모서리 밖으로 빼면 가운데 '추천' 배지와도, 금액과도 부딪히지 않는다.
   흰 테두리를 둘러 어느 배경 위에서도 동그라미가 또렷하게 떨어져 보이게 한다. */
.pkg-card:has(input:checked)::after {
  top: -9px; right: -9px;
  border: 2px solid var(--bg, #fff);
  box-sizing: content-box;
}
/* ★모바일은 가로 스크롤이라 위 규칙(margin-top)이 기존 `margin:-12px…`를 덮어써
   스크롤 여백 설계가 깨진다. 모바일은 ★padding으로 배지 자리를 만든다
   (padding이면 스크롤 컨테이너 안쪽이라 배지가 잘리지 않는다). */
@media (max-width: 760px) {
  .pkg-grid { margin: 0 -2px; padding: 20px 2px 8px; }
}

/* 금액 + 추가금 2줄 표기 (2026-08-18 사장님 지시)
   예) 10,000원 / +1,000원 추가. 크레딧 수·문항 수는 지웠다 — 숫자가 4개씩 뜨면
   무엇을 비교해야 하는지 흐려진다. 결제 화면에서 필요한 비교축은 '금액'과 '덤' 둘뿐이다. */
.pkg-amt { font-size: var(--text-20); font-weight: var(--w-700); color: var(--navy); line-height: 1.2; }
.pkg-plus {
  margin-top: var(--sp-8); font-size: var(--text-12); font-weight: var(--w-700);
  color: var(--success); background: var(--success-bg);
  border-radius: var(--r-4); padding: 3px var(--sp-8); display: inline-block;
}
.pkg-plus.is-none { color: var(--gray-500); background: transparent; font-weight: 400; }

/* 결제수단 선택(계좌이체/카드결제) — 패키지 카드와 같은 선택 어포던스 */
.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-name { display: block; font-weight: 700; color: var(--navy); }
.method-sub { display: block; margin-top: 4px; font-size: .86rem; color: var(--gray-600); }

/* ── 결제수단 색 구분 (2026-08-18 사장님 지시) ─────────────────────────
   "계좌이체와 카드결제 구분이 잘 보이고 잘 따라가서 충전을 쉽게" 하려면
   ①고른 것이 즉시 보이고 ②고른 수단의 안내카드가 같은 색으로 이어져야 한다.
   카드=네이비(브랜드 포인트), 계좌=청록. 배경 흰색 고정은 그대로 지킨다(§2-5). */
.method-card { --m-color: var(--navy); }
.method-card--bank { --m-color: var(--teal); }
.method-ico {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0 auto var(--sp-8);
  border-radius: 50%; background: color-mix(in srgb, var(--m-color) 10%, #fff);
  color: var(--m-color);
}
.method-ico svg { width: 22px; height: 22px; }
.method-card:has(input:checked) {
  border-color: var(--m-color); background: color-mix(in srgb, var(--m-color) 4%, #fff);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--m-color) 22%, transparent);
}
.method-card:has(input:checked) .method-name { color: var(--m-color); }
.method-card:has(input:checked) .method-ico { background: var(--m-color); color: #fff; }
.method-card:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-color) 20%, transparent); }

/* 안내 카드도 같은 색 띠를 물려 '고른 수단 → 그 안내'로 눈이 이어지게 한다. */
#pay-info-bank { border-top: 3px solid var(--teal); }
#pay-info-card { border-top: 3px solid var(--navy); }

/* ── 문제제작의뢰 접수 폼 (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-08-18) ───────────────────────────────────────── */
/* 지문 준비 방식 — 결제수단 카드와 같은 선택 어포던스(익숙한 조작을 반복시킨다). */
.ord-srcrow { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.ord-src { position:relative; display:block; cursor:pointer; text-align:center;
           border:2px solid var(--gray-300); border-radius:var(--r-12); padding:16px 12px;
           background:var(--bg); transition:border-color .15s, box-shadow .15s; }
.ord-src input { position:absolute; opacity:0; pointer-events:none; }
.ord-src .n { display:block; font-weight:700; color:var(--navy); }
.ord-src .d { display:block; margin-top:4px; font-size:12.5px; color:var(--gray-500); }
.ord-src:has(input:checked) { border-color:var(--navy); background:rgba(30,58,95,.03);
                              box-shadow:0 6px 18px rgba(30,58,95,.14); }
@media (max-width:640px){ .ord-srcrow { grid-template-columns:1fr; } }

/* ★의뢰 종류 — 문제 / 지문분석지 (2026-08-19 #17).
   지문 준비 카드(.ord-src)와 같은 결로 맞춘다 — 같은 폼 안에서 고르는 것이 둘이라
   생김새가 다르면 무엇이 상위 선택인지 알기 어렵다. 종류가 ★상위이므로 조금 더 크게 둔다.
   :has()를 못 쓰는 브라우저를 위해 JS가 .is-on도 함께 토글한다(둘 다 같은 모양). */
.ord-kindrow { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.ord-kind { position:relative; display:block; cursor:pointer; text-align:center;
            border:2px solid var(--gray-300); border-radius:var(--r-12); padding:18px 14px;
            background:var(--bg); transition:border-color .15s, box-shadow .15s; }
.ord-kind input { position:absolute; opacity:0; pointer-events:none; }
.ord-kind b { display:block; font-size:16px; color:var(--navy); }
.ord-kind span { display:block; margin-top:4px; font-size:12.5px; color:var(--gray-500); }
.ord-kind.is-on,
.ord-kind:has(input:checked) { border-color:var(--navy); background:rgba(30,58,95,.03);
                               box-shadow:0 6px 18px rgba(30,58,95,.14); }
@media (max-width:640px){ .ord-kindrow { grid-template-columns:1fr; } }

/* 유형 선택 — 26개를 한 화면에 담되 생성 화면보다 ★간소화(문항수 개별지정 없음). */
.ord-typebar { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.ord-typecount { margin-left:auto; font-size:13px; color:var(--gray-500); }
.ord-typecount b { color:var(--navy); font-size:15px; }
.ord-typegrid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.ord-partgrid { display:grid; grid-template-columns:1fr; gap:12px; }
.ord-partcat,
.ord-typecat { border:1px solid var(--gray-100); border-radius:var(--r-12); padding:14px 12px; }

/* ── ★카테고리마다 색 (2026-09-06 사장님 지적 3-17 · «2번» 결정) ──────────
   > "버튼모양들이 다 달라서 사용하기 어려운 느낌"
   > "색깔도 사이트 자체가 너무 파란색과 흰색만 있어서 … 활기를 주자"

   ★색을 ★뿌리지 않는다 — ★뜻을 갖게 한다.
     다섯 카테고리(글이해·빈칸추론·글의구조·문법어법·서술형)에 각각 다른 색을 줘서
     회원이 ★눈으로 묶어 찾게 한다. 색이 ★정보를 나르면 활기는 따라온다.

   ★새 색을 만들지 않았다 — `tokens.css` 에 ★이미 있던 것만 쓴다.
     navy · teal · gold · info · success. §2-5 «배경 흰색 · 네이비 포인트»는 지킨다.
     ★칠하는 곳은 ★왼쪽 띠와 제목 글자뿐이다. 바탕은 ★흰색 그대로다. */
.ord-typecat { position: relative; padding-left: 14px; transition: border-color .15s; }
.ord-typecat::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 3px; background: var(--ord-cat, var(--navy));
}
.ord-typecat .ord-catall { color: var(--ord-cat, var(--navy)); }
.ord-typecat:hover { border-color: var(--ord-cat, var(--navy)); }
.ord-cat--reading   { --ord-cat: var(--navy,    #1E3A5F); }
.ord-cat--blank     { --ord-cat: var(--teal,    #0F766E); }
.ord-cat--structure { --ord-cat: var(--info,    #2563EB); }
.ord-cat--grammar   { --ord-cat: var(--gold,    #A9761B); }
.ord-cat--writing   { --ord-cat: var(--success, #16A34A); }
.ord-catall { display:flex; align-items:center; gap:7px; padding-bottom:9px; margin-bottom:9px;
              border-bottom:1px solid var(--gray-100); font-size:13.5px; color:var(--navy);
              cursor:pointer; }
.ord-type { display:flex; align-items:center; gap:7px; padding:5px 0; font-size:13px;
            color:var(--gray-700); cursor:pointer; }
.ord-type input { flex:none; }
@media (max-width:900px){ .ord-typegrid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ord-typegrid { grid-template-columns:1fr; } }

/* 견적 — 고르는 즉시 금액이 보여야 한다(마지막에 금액이 나오면 놀라서 이탈한다). */
.ord-quote { margin-top:20px; border:1px solid var(--gray-100); border-radius:var(--r-12);
             padding:18px 20px; background:var(--gray-50); }
.q-line { display:flex; justify-content:space-between; align-items:baseline;
          padding:6px 0; font-size:14px; color:var(--gray-700); }
.q-line b { color:var(--navy); font-weight:700; }
.q-total { border-top:1px solid var(--gray-300); margin-top:6px; padding-top:12px; font-size:15px; }
.q-total b { font-size:20px; }
.q-bal { color:var(--gray-500); font-size:13px; }
.q-note { margin:10px 0 0; font-size:13px; color:var(--gray-500); }
.q-note.is-short { color:var(--danger); font-weight:700; }
.ord-short { color:var(--danger); }

/* ── 특별(감면) 신청 (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); }

/* ── 요금 안내: 금액 선택 카드 (2026-08-12 개편) ──────────────────────────
   카드 전체가 <label>이라 어디를 눌러도 선택된다. 라디오는 시각적으로만 숨기고
   ★DOM에는 남긴다 — display:none으로 지우면 키보드 포커스·스크린리더에서 사라진다. */
/* ★금액 5개는 ★항상 한 줄이다(2026-08-18 사장님 지시).
   auto-fit + minmax는 폭이 좁아지면 조용히 2줄로 접혀서 '한 줄'이 지켜지지 않았다.
   개수를 고정(5)하면 접히지 않는다. 모바일은 접는 대신 ★가로 스크롤로 한 줄을 유지한다
   (폰에서 5칸을 우겨넣으면 카드 하나가 60px대라 금액이 읽히지 않는다). */
.amt-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-12);
}
@media (max-width: 760px) {
  .amt-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* 카드가 뜨는 그림자·배지가 잘리지 않게 위아래 여백을 준다.
       ★배지를 카드 밖(위)으로 올렸으므로 위 여백을 22px 이상으로 잡는다. */
    padding: 24px 2px 8px; margin: -12px -2px 0;
  }
  .amt-grid > .amt-card { flex: 0 0 132px; scroll-snap-align: center; }
}
.amt-card {
  position: relative; display: block; cursor: pointer;
  border: 2px solid var(--gray-300); border-radius: var(--r-12);
  padding: var(--sp-24) var(--sp-12) var(--sp-16); text-align: center;
  background: var(--bg); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.amt-card:hover { border-color: var(--navy-300, #9DB2CE); transform: translateY(-2px); }
.amt-card input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
/* 키보드 탭 이동이 보이게 — 마우스 없이도 어디 있는지 알아야 한다. */
.amt-card:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30,58,95,.14); }
.amt-card.is-selected {
  border-color: var(--navy); background: rgba(30,58,95,.03);
  box-shadow: 0 6px 18px rgba(30,58,95,.16);
}
.amt-card.is-selected::after {
  content: "✓"; position: absolute; top: 8px; right: 10px;
  width: 20px; height: 20px; line-height: 20px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: var(--text-12); font-weight: var(--w-700);
}
/* ★추천 배지 — 카드 ★테두리 바로 위 (2026-08-19 사장님 지시)
   전에는 top:-10px으로 ★테두리에 걸쳐 있었다. 배지가 선을 물고 있으니
   글자가 잘린 것처럼 보이고 카드가 망가진 인상을 준다(실측: 5만원 카드).
   → bottom:100%로 카드 ★위쪽 바깥에 두고 6px 띄운다. 선과 겹치지 않는다.
   ※ 그리드 위쪽에 배지가 들어갈 ★자리를 비워 둬야 잘리지 않는다(아래 padding-top). */
.amt-badge, .pkg-badge {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 6px; white-space: nowrap;
}
/* 배지가 카드 밖으로 나가므로 그리드가 그만큼 위 여백을 갖는다(안 그러면 잘린다). */
.amt-grid, .pkg-grid { padding-top: 22px; }
/* .pkg-card는 position 지정이 없어 배지가 ★페이지 기준으로 날아간다 — 기준점을 준다. */
.pkg-card { position: relative; }
.amt-price { font-size: var(--text-24); font-weight: var(--w-700); color: var(--navy); line-height: 1.2; }
.amt-won   { font-size: var(--text-14); font-weight: var(--w-700); margin-left: 2px; }
.amt-credit { margin-top: var(--sp-4); font-size: var(--text-14); color: var(--gray-700); }
.amt-bonus {
  margin-top: var(--sp-8); font-size: var(--text-12); font-weight: var(--w-700);
  color: var(--success); background: var(--success-bg);
  border-radius: var(--r-4); padding: 3px var(--sp-8); display: inline-block;
}
.amt-bonus.is-none { color: var(--gray-500, #6B7280); background: transparent; font-weight: 400; }

/* 선택 요약 + 구매 버튼 — 카드 바로 아래에 붙여 '고르면 바로 산다'가 한 눈에 들어오게. */
.buy-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-12); margin-top: var(--sp-24); padding-top: var(--sp-16);
  border-top: 1px solid var(--gray-100);
}
.buy-sum { font-size: var(--text-14); color: var(--gray-700); }
.buy-plus { color: var(--success); font-weight: var(--w-700); }
.btn-lg { height: var(--h-btn-48); padding: 0 var(--sp-32); font-size: var(--text-14); font-weight: var(--w-700); }
.btn-lg[disabled] { opacity: .45; cursor: not-allowed; }

.acct-bullets { margin: 0; padding-left: var(--sp-24); }
.acct-bullets li { margin-bottom: var(--sp-8); }
.acct-bullets li:last-child { margin-bottom: 0; }

/* 충전 신청 취소 버튼 (2026-08-14) — '결제 대기 중' 항목을 회원이 스스로 지운다.
   ★눈에 띄되 유도하지는 않게: 기본은 회색 텍스트, 올려야 붉게 변한다.
   입금한 회원이 무심코 누르는 것을 막으려면 '지우기 쉬움'보다 '실수하기 어려움'이 먼저다. */
.charge-cancel-form { margin-top: 6px; }
.charge-cancel-btn {
  border: 1px solid var(--gray-300); background: transparent; cursor: pointer;
  color: var(--gray-500, #6B7280); font-size: var(--text-12);
  border-radius: var(--r-4); padding: 3px 10px; transition: color .15s, border-color .15s;
}
.charge-cancel-btn:hover { color: #B91C1C; border-color: #FCA5A5; }

/* ★준비 중인 의뢰 종류 — 보이되 고를 수 없다 (2026-08-19 #17).
   숨기면 회원이 그런 서비스가 있는지조차 모른다. 잠그되 무엇인지는 알려 준다. */
.ord-kind.is-soon { opacity: .55; cursor: not-allowed; border-style: dashed; }
.ord-kind.is-soon:hover { border-color: var(--gray-300); box-shadow: none; }
.ord-kind-soon {
  display: block; margin-top: 6px; font-style: normal;
  font-size: var(--text-12); font-weight: var(--w-700); color: var(--navy);
}

/* ★유형 선택 바 — 보기 언어·난이도를 같은 줄에 (2026-08-19 사장님 지시).
   전에는 난이도가 유형 목록 한참 아래에 있어, 유형을 다 고르고 스크롤해야 했다. */
.ord-typebar { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.ord-bar-sep { width: 1px; height: 22px; background: var(--gray-300); margin: 0 var(--sp-4); }
.ord-bar-field { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ord-bar-lbl { font-size: var(--text-12); font-weight: var(--w-600); color: var(--gray-700); }

/* ★목록에서 고르기(select) → ★눌러서 고르기 (2026-08-23 사장님 지시)
   생성 화면의 세그먼트(.gen-seg / .gen-seg-btn)를 ★그대로 쓴다 — 같은 것은 같아 보여야 한다.
   다만 저기는 <button>이라 눌린 상태를 aria-pressed로 표시하는데,
   여기는 ★라디오라(자바스크립트 없이 동작하게) 체크 상태로 같은 모양을 낸다. */
.ord-seg { display: inline-flex; }
.ord-seg-btn { display: inline-flex; align-items: center; justify-content: center;
               flex: 0 0 auto; min-width: 58px; }
.ord-seg-btn input { position: absolute; opacity: 0; width: 0; height: 0; }
/* 눌린 상태 — .gen-seg-btn[aria-pressed="true"]와 ★같은 모양으로 맞춘다. */
.ord-seg-btn:has(input:checked) {
  color: #fff;
  background: linear-gradient(180deg, #35577f 0%, var(--navy) 100%);
  font-weight: var(--w-700);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset,
              0 -1px 0 rgba(0, 0, 0, 0.18) inset;
}
/* ★키보드로도 어디에 있는지 보여야 한다 — 라디오는 눈에 안 보이므로 라벨에 테두리를 준다. */
.ord-seg-btn:has(input:focus-visible) { outline: 2px solid var(--navy-300); outline-offset: 1px; }
@media (max-width: 720px) {
  .ord-bar-field { width: 100%; justify-content: space-between; }
  .ord-seg { flex: 1 1 auto; }
  .ord-seg-btn { flex: 1 1 0; min-width: 0; }
}
.acct-select-sm { width: auto; min-width: 116px; height: 32px; padding: 0 26px 0 10px;
                  font-size: var(--text-13, 13px); }

/* ── 유형별 보기 언어 (2026-08-29 사장님 지시 #6) ─────────────────────────
   "위에 따로 해 놓으니까 헷갈릴 것 같아" → 유형 ★바로 아래에 붙인다.
   ★고를 수 있는 유형은 3개뿐이라(내용일치·내용불일치·어휘선택) 화면이 안 시끄럽다. */
.ord-type-row { display: flex; flex-direction: column; gap: 3px; }
.ord-lang { display: inline-flex; gap: 4px; margin: 0 0 2px 24px; }
.ord-lang-btn { position: relative; display: inline-flex; cursor: pointer; }
.ord-lang-btn input { position: absolute; opacity: 0; width: 0; height: 0; }
.ord-lang-btn span {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line, #E5E7EB); background: #fff;
  font-size: 11.5px; font-weight: 600; color: var(--gray-600, #4B5563);
  line-height: 1.6; white-space: nowrap;
}
.ord-lang-btn input:checked + span {
  background: var(--brand, #1E3A5F); border-color: var(--brand, #1E3A5F); color: #fff;
}
.ord-lang-btn input:focus-visible + span { outline: 2px solid var(--brand, #1E3A5F); outline-offset: 1px; }
.ord-lang-fixed {
  margin: 0 0 2px 24px; font-size: 11.5px; color: var(--gray-500, #6B7280);
}

/* 일괄 적용 단추 — ★라디오 세그먼트(.ord-seg-btn)와 ★클래스를 나눈다.
   같은 클래스를 쓰면 "세그먼트 안에는 라디오가 있다"는 기존 검사가 깨진다
   (실제로 회귀가 났다). 모양만 닮게 하고 역할은 다르게 둔다. */
/* ── ★이 화면의 작은 버튼은 ★한 가지 모양이다 (2026-09-06 사장님 지적 3-17)
   > "어떤문제가 필요하신가요 밑에 버튼들을 ★통일성있게 만들자.
   >  ★버튼모양들이 다 달라서 사용하기 어려운 느낌을 주고 있어."

   ★전에는 세 가지가 섞여 있었다
     · «전체 선택/해제»  → `.btn.btn-ghost.btn-sm` (사각 · 회색 테두리)
     · «영어/한글/전체»  → `.ord-bulk-btn`         (알약 · 다른 크기)
     · 난이도            → 라디오
   같은 줄에 ★모서리도 크기도 다른 버튼이 나란히 서 있었다.

   ★한 규격으로 모은다 — `.ord-chip`.
     `.ord-bulk-btn` 과 `.btn-ghost.btn-sm` 은 ★이 규격을 그대로 물려받는다.
     (클래스 이름은 ★안 바꾼다 — 자바스크립트가 그 이름으로 찾는다.
      실제로 «세그먼트 안에는 라디오가 있다»는 기존 검사가 이름을 보고 있다) */
.ord-chip,
.ord-bulk-btn,
.ord-typebar .btn.btn-ghost.btn-sm {
  font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2;
  padding: 5px 12px; border: 1px solid var(--line, #E5E7EB);
  background: #fff; color: var(--gray-700, #374151);
  border-radius: 999px; cursor: pointer; margin-right: 4px;
  transition: border-color .15s, color .15s, background .15s;
}
.ord-chip:hover,
.ord-bulk-btn:hover,
.ord-typebar .btn.btn-ghost.btn-sm:hover {
  border-color: var(--brand, #1E3A5F); color: var(--brand, #1E3A5F);
  background: var(--gray-50, #F9FAFB);
}
.ord-chip.is-on,
.ord-bulk-btn.is-on {
  background: var(--brand, #1E3A5F); border-color: var(--brand, #1E3A5F); color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════
   ★이용권 구매 — 제품 소개 (2026-09-04 TW-20260904-3 사장님 지시)
   "1문항 ★공정 설명 문구 전부 삭제. 제품이 얼마나 좋은지·편리한지·왜 쓰면
    좋은지를 ★간결·전문적 문구와 이미지로 눈에 확 들어오게."

   ★앞선 판(3단계·10공정 표)의 CSS(.acct-pipeline)는 ★함께 지웠다 —
     쓰는 곳이 없어진 규칙을 남겨 두면 다음 사람이 살아 있는 줄 안다.
   ★색은 브랜드 그대로 — 흰 배경 + 네이비 포인트(§2-5). 인라인 스타일 금지.
   ═══════════════════════════════════════════════════════════════════ */
.sell-lead {
  margin: 0 0 var(--sp-8);
  font-size: var(--text-18);
  line-height: var(--lh-1-5);
  color: var(--gray-800);
  letter-spacing: -.01em;
}
.sell-lead strong { color: var(--navy); }
.sell-sub { margin: 0; font-size: var(--text-14); color: var(--gray-500); }
.sell-sub strong { color: var(--navy); font-weight: var(--w-700); }

/* 말 + 그림을 나란히. 좁은 화면에서는 그림이 아래로 내려간다. */
.sell-top {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--sp-24);
  align-items: center;
}
.sell-shot {
  width: 100%; height: auto;
  border: 1px solid var(--gray-100);
  border-radius: var(--r-12);
}

/* 그림이 없을 때의 대타 — '지문 한 장 → 문제지'를 도형으로 보인다.
   ★글자를 쓰지 않는다(번역·문구 관리 대상이 늘어난다). */
.sell-art {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-8);
  background: var(--navy-50);
  border-radius: var(--r-12);
  padding: var(--sp-16) var(--sp-12);
}
.sell-paper {
  flex: 1 1 0; min-width: 0;
  background: var(--bg);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-6);
  box-shadow: var(--sh-soft);
  padding: var(--sp-10) var(--sp-8);
  display: flex; flex-direction: column; gap: 5px;
}
.sell-paper .ln { display: block; height: 4px; border-radius: 999px; background: var(--gray-200); }
.sell-paper .ln.w85 { width: 85%; }
.sell-paper .ln.w70 { width: 70%; }
.sell-paper .ln.w60 { width: 60%; }
/* 문제지 쪽만 ★발문 줄을 네이비로 — 오른쪽이 '문제'가 됐음을 색으로 보인다. */
.sell-paper.is-out .ln.q { width: 55%; height: 5px; background: var(--navy-300); }
.sell-arrow { flex: none; color: var(--navy); }
.sell-arrow svg { width: 20px; height: 20px; display: block; }

/* 세 걸음 — 번호 동그라미 + 한 마디. */
.sell-steps {
  list-style: none; margin: var(--sp-24) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8);
}
.sell-steps li {
  display: flex; align-items: center; gap: var(--sp-8);
  background: var(--gray-50);
  border-radius: var(--r-8);
  padding: var(--sp-10) var(--sp-12);
  font-size: var(--text-13);
  color: var(--gray-700);
}
.sell-steps b {
  flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-size: var(--text-12); font-weight: var(--w-700);
  display: inline-flex; align-items: center; justify-content: center;
}

/* 좋은 점 4가지 — 아이콘 + 굵은 한 줄 + 설명. */
.sell-grid {
  margin-top: var(--sp-24);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-16) var(--sp-24);
}
.sell-item { display: flex; gap: var(--sp-12); align-items: flex-start; }
.sell-ico {
  flex: none;
  width: 38px; height: 38px; border-radius: var(--r-8);
  background: var(--navy-50); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
}
.sell-ico svg { width: 20px; height: 20px; }
.sell-item b {
  display: block;
  font-size: var(--text-15); font-weight: var(--w-700);
  color: var(--navy);
  margin-bottom: 3px;
}
.sell-item p {
  margin: 0;
  font-size: var(--text-13);
  line-height: var(--lh-1-7);
  color: var(--gray-600);
}
.sell-item p strong { color: var(--gray-800); font-weight: var(--w-600); }

/* 값에 관한 사실 — 좋은 점과 ★선으로 가른다(붙여 두면 같은 문단처럼 읽힌다). */
.sell-fees {
  margin-top: var(--sp-24);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--gray-100);
  font-size: var(--text-13);
  color: var(--gray-700);
}

/* 좁은 화면 — 한 줄에 하나씩. 그림은 말 아래로. */
@media (max-width: 720px) {
  .sell-top { grid-template-columns: 1fr; }
  .sell-grid { grid-template-columns: 1fr; }
  .sell-steps { grid-template-columns: 1fr; }
  .sell-lead { font-size: var(--text-16); }
}