/*
 * 결제 화면 전용 모양 — 요금제 안내 · 결제하기 · 카드 변경 · 결과 · 마이페이지 구독 · 결제.
 * Tailwind 로 만들 수 없는 것만 둔다(체크 목록 아이콘 · 결제 일정 선 · 영수증 절취선 · 카드 모양).
 * 시안: docs/ui/billing-ui-samples.html (①B · ②B · ③B · ④B · ⑤B · ⑥B+C).
 */

/* 기능 목록 — 파란 체크 */
.bl-feat { list-style: none; padding: 0; margin: 10px 0 0; font-size: 14px; color: #374151; }
.bl-feat li { display: flex; gap: 8px; padding: 3px 0; }
.bl-feat li::before {
  content: ""; width: 16px; height: 16px; margin-top: 3px; flex: none; border-radius: 50%;
  background: #EEF2FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* 요금제 카드 — 추천은 파란 테두리 + 위에 걸친 배지 */
.bl-plan { position: relative; display: flex; flex-direction: column; }
.bl-plan.is-rec { box-shadow: inset 0 0 0 2px #4F46E5; }
.bl-plan .bl-badge { position: absolute; top: -11px; left: 20px; }

/* 결제 일정 선 — 오늘 · 다음 결제 · 그다음(또는 오늘 · 이용 끝 · 이후) */
.bl-tl { display: flex; margin: 10px 0 6px; }
.bl-tl-pt { flex: 1; text-align: center; font-size: 12px; color: #5a6a80; }
.bl-tl-pt b { display: block; color: #111827; font-size: 13px; }
.bl-tl-ln { position: relative; height: 26px; }
.bl-tl-ln::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 3px; background: #4F46E5; }
.bl-tl-pt:first-child .bl-tl-ln::before { left: 50%; }
.bl-tl-pt:last-child .bl-tl-ln::before { right: 50%; }
.bl-tl-ln.is-off::before { background: repeating-linear-gradient(90deg, #cbd5e1 0 6px, transparent 6px 11px); }
.bl-tl-dot { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid #4F46E5; }
.bl-tl-ln.is-off .bl-tl-dot { border-color: #cbd5e1; }

/* 둥근 아이콘 */
.bl-circle { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; }
.bl-circle svg { width: 22px; height: 22px; }
.bl-circle.is-ok { background: #EEF2FF; color: #4F46E5; }
.bl-circle.is-bad { background: #FEF2F2; color: #B91C1C; }
.bl-circle.is-wait { background: #FFFBEB; color: #92400E; }

/* 영수증 모양 — 절취선 양 끝이 파인 모양 */
.bl-ticket { background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }
.bl-ticket-cut { position: relative; margin: 0 20px; border-top: 2px dashed #e1e6ee; }
.bl-ticket-cut::before, .bl-ticket-cut::after {
  content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bl-page-bg, #f5f7fb);
}
.bl-ticket-cut::before { left: -30px; }
.bl-ticket-cut::after { right: -30px; }

/* 이름 : 값 목록 */
.bl-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px; margin: 0; }
.bl-dl dt { color: #5a6a80; }
.bl-dl dd { margin: 0; text-align: right; font-weight: 600; color: #111827; overflow-wrap: anywhere; }
.bl-date { white-space: nowrap; }   /* 날짜는 한 덩어리 — 기간은 '~' 에서만 줄바꿈 */

/* 카드 모양 — 지금 카드 · 새 카드 자리 */
.bl-plastic {
  position: relative; width: 100%; max-width: 300px; aspect-ratio: 1.586; margin: 0 auto;
  border-radius: 14px; padding: 16px; color: #fff;
  background: linear-gradient(135deg, #4F46E5, #4338CA); box-shadow: 0 10px 24px rgba(67, 56, 202, .25);
}
.bl-plastic-chip { width: 34px; height: 24px; border-radius: 5px; background: linear-gradient(135deg, #f7d98b, #d7a93b); }
.bl-plastic-num { position: absolute; left: 16px; bottom: 36px; font-size: 17px; letter-spacing: 2px; font-weight: 700; }
.bl-plastic-co { position: absolute; left: 16px; bottom: 14px; font-size: 12px; opacity: .85; }
.bl-plastic.is-ghost {
  display: grid; place-items: center; background: #fff; color: #8493a6; font-weight: 700; font-size: 14px;
  border: 2px dashed #c7d3e6; box-shadow: none;
}

/* 해지 사유 선택지 */
.bl-opt { display: flex; gap: 8px; align-items: center; padding: 9px 10px; margin-top: 6px; border: 1px solid #e5eaf2; border-radius: 10px; font-size: 14px; cursor: pointer; }
.bl-opt:has(input:checked) { border-color: #4F46E5; background: #f7f9ff; }
.bl-opt input { accent-color: #4F46E5; }

/* 결제 요약 — 넓은 화면에서 스크롤해도 따라온다 */
@media (min-width: 1024px) { .bl-sticky { position: sticky; top: 96px; } }

/* ── 요금제 안내(/pricing) ─────────────────────────────────────────────
   폭: 머리 · 체험 띠 · 카드 줄 · 안내 상자 모두 같은 100% 폭.
   카드: 넓은 화면 3열, 좁으면 1열(2열이면 세 번째 카드가 혼자 남는다).
   카드 안 네 칸(머리 · 가격 · 기능 · 아래)은 서브그리드로 카드끼리 높이를 맞춘다 —
   ru · vi 처럼 설명이 길어져도 가격 · 목록 · 버튼이 같은 줄에 선다. 서브그리드를 모르는 브라우저는 그냥 세로로 쌓인다. */
.bl-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.bl-hero-art { width: 220px; max-width: 70%; height: auto; flex: none; }
@media (min-width: 768px) {
  .bl-hero { flex-direction: row; justify-content: center; gap: 36px; text-align: left; }
  .bl-hero-art { width: 280px; max-width: none; }
  .bl-hero-txt { max-width: 480px; }
}

.bl-trial { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 16px;
  padding: 20px; border-radius: 16px; background: #4338CA; color: #fff; }
.bl-trial-ic { flex: none; align-self: start; }   /* 폰: 글이 여러 줄이라 위에 붙인다. 넓은 화면은 가운데(아래 미디어쿼리) */
.bl-trial-txt { min-width: 0; }
.bl-trial-btn { grid-column: 1 / -1; width: 100%; }
@media (min-width: 640px) {
  .bl-trial { grid-template-columns: auto 1fr auto; padding: 20px 24px; }
  .bl-trial-btn { grid-column: auto; width: auto; white-space: nowrap; }
  .bl-trial-ic { align-self: center; }
}

.bl-plans { display: grid; grid-template-columns: 1fr; column-gap: 20px; }
@media (min-width: 900px) { .bl-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bl-plans > .bl-plan { margin-bottom: 20px; min-width: 0; padding: 24px; background: #fff;
  border: 1px solid #f3f4f6; border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
@supports (grid-template-rows: subgrid) {
  .bl-plans > .bl-plan { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
}
.bl-plan-head { display: flex; align-items: flex-start; gap: 12px; }
.bl-plan-ic { width: 44px; height: 44px; flex: none; }
.bl-plan-name { font-size: 18px; font-weight: 700; color: #111827; line-height: 1.35; overflow-wrap: anywhere; }
.bl-plan-desc { margin-top: 2px; font-size: 14px; color: #6b7280; word-break: keep-all; overflow-wrap: anywhere; }
.bl-plan-chip { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 999px;
  background: #f3f4f6; color: #4b5563; font-size: 11px; font-weight: 600; line-height: 1.5; }
.bl-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; margin-top: 16px; }
.bl-price-amt { font-size: 30px; font-weight: 800; line-height: 1.2; color: #4338CA; white-space: nowrap; }
.bl-price-amt.is-free { color: #111827; }
.bl-price-per { font-size: 14px; color: #6b7280; word-break: keep-all; }
.bl-plan .bl-feat { margin-top: 14px; }
.bl-feat li { word-break: keep-all; overflow-wrap: anywhere; }
.bl-plan-foot { align-self: end; margin-top: auto; padding-top: 20px; }

.bl-notice { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 16px;
  background: #fff; border: 1px solid #e5ecfa; font-size: 14px; color: #1f2937; }
.bl-notice-ic { flex: none; }
/* 결제 전 인증 카드 — 흰 상자는 결제 화면 틀 폭(1040px) 그대로, 안쪽은 560px 안에 가운데로(시안 A 그림 · 단계는 왼쪽 정렬) */
.bl-verify { padding: 44px 24px 40px; }
.bl-verify-in { max-width: 560px; margin: 0 auto; }
.bl-verify-art { display: block; width: 220px; max-width: 80%; height: auto; margin: 0 auto 20px; }
.bl-verify-desc { margin-top: 8px; line-height: 1.6; }
.bl-verify-steps { display: inline-grid; gap: 10px; margin-top: 22px; text-align: left; }
.bl-verify-btn { margin-top: 26px; }
@media (max-width: 480px) { .bl-verify { padding: 32px 18px 28px; } .bl-verify-art { width: 180px; margin-bottom: 16px; } }
.bl-notice ul { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 480px) { .bl-notice { padding: 16px; gap: 10px; } .bl-notice-ic { width: 30px; height: 30px; } }

/* 여러 달 묶음 — 기간 선택 [−] 숫자 [+](billing-checkout.html). 숫자 칸은 직접 입력도 된다.
   −/+ 는 글자 대신 선으로 그린다(글꼴마다 '−' 의 굵기 · 높이가 달라 가운데가 어긋났다). 두 버튼 모두 연한 파랑, 끝에 닿으면 회색. */
.bl-months { margin-top: 18px; padding-top: 18px; border-top: 1px solid #F3F4F6; }
.bl-step { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid #E5E7EB; border-radius: 12px; background: #fff;
  transition: border-color .15s, box-shadow .15s; }
.bl-step:focus-within { border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
.bl-step-btn { position: relative; flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: #EEF2FF; color: #4F46E5;
  cursor: pointer; transition: background-color .15s, color .15s, transform .08s; }
.bl-step-btn::before, .bl-step-btn.is-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  border-radius: 1px; background: currentColor; }
.bl-step-btn.is-plus::after { transform: rotate(90deg); }
.bl-step-btn:hover:not(:disabled) { background: #4F46E5; color: #fff; }
.bl-step-btn:active:not(:disabled) { transform: scale(.94); }
.bl-step-btn:focus-visible { outline: 2px solid #4F46E5; outline-offset: 1px; }
.bl-step-btn:disabled { background: #F3F4F6; color: #D1D5DB; cursor: not-allowed; }
.bl-step-num { width: 48px; height: 36px; border: 0; padding: 0; background: transparent; text-align: center; font-size: 17px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: #111827; outline: none; }
/* 포커스 테두리는 바깥 .bl-step 이 그린다 — 전역 input:focus 링(common.css)을 끄지 않으면 칸 안에 상자가 하나 더 생긴다. */
.bl-step-num:focus { box-shadow: none; }

/* 월간 ↔ 연간 전환(여러 달 묶음 스위치 · billing-checkout.html) — 왼쪽 요금제 이름(진한 파랑), 오른쪽 '월간 ◯ 연간' 스위치.
   ⚠️ 이름은 bl-co-* (checkout) — 요금제 화면 카드가 bl-plan-head · bl-plan-name 을 이미 쓴다(겹치면 스위치와 무관하게 /pricing 이 바뀐다).
   상자 · 테두리 없이 글자와 스위치만 둔다. 스위치 바탕은 늘 파랑(어느 쪽이든 고른 상태)이고 고른 쪽 글자만 진해진다. */
.bl-co-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.bl-co-name { margin-top: 2px; font-size: 20px; font-weight: 800; line-height: 1.35; color: #4338CA; }
.bl-co-note { margin-top: 6px; font-size: 13px; font-weight: 600; color: #4338CA; }
.bl-co-save { margin-top: 18px; padding-top: 16px; border-top: 1px solid #F3F4F6; font-size: 13px; font-weight: 600; color: #4338CA; }
.bl-tg { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 4px 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.bl-tg-label { font-size: 15px; font-weight: 700; color: #9CA3AF; white-space: nowrap; transition: color .15s; }
.bl-tg[aria-checked="false"] .is-m, .bl-tg[aria-checked="true"] .is-a { color: #111827; }
.bl-tg-track { position: relative; flex: none; width: 48px; height: 28px; border-radius: 999px; background: #4F46E5; transition: background-color .15s, box-shadow .15s; }
.bl-tg:hover .bl-tg-track { background: #4338CA; }
.bl-tg:focus-visible { outline: none; }
.bl-tg:focus-visible .bl-tg-track { box-shadow: 0 0 0 3px rgba(79, 70, 229, .3); }
.bl-tg-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: transform .2s ease; }
.bl-tg[aria-checked="true"] .bl-tg-knob { transform: translateX(20px); }
/* 바뀐 금액을 잠깐 비춘다(전환 · 개월 수). */
@keyframes bl-flash { from { background-color: #EEF2FF; } to { background-color: transparent; } }
.bl-flash { animation: bl-flash .7s ease-out; border-radius: 6px; }

/* 결제 내역 표 — 폰 폭(640px 이하)에서는 줄마다 카드로 바꾼다. 표 그대로면 최소 폭 520px 를 가로로 밀어야
   상태 · 영수증이 보였다. 1줄: 결제일 · 상태 / 2줄: 내용 · 금액 / 3줄: 영수증. 머리줄은 감춘다(칸이 스스로 읽힌다). */
@media (max-width: 640px) {
  table.bl-history { min-width: 0; }
  table.bl-history thead { display: none; }
  table.bl-history tbody, table.bl-history tr, table.bl-history td { display: block; }
  table.bl-history tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    column-gap: 12px; row-gap: 4px; padding: 14px 20px;
  }
  table.bl-history td { padding: 0; border: 0; } /* 전역 td 밑줄이 카드 안 줄마다 그어진다 */
  table.bl-history td:nth-child(1) { grid-column: 1; grid-row: 1; color: #6b7280; font-size: 13px; }
  table.bl-history td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; }
  table.bl-history td:nth-child(2) { grid-column: 1; grid-row: 2; }
  table.bl-history td:nth-child(3) { grid-column: 2; grid-row: 2; }
  table.bl-history td:nth-child(5) { grid-column: 1 / -1; grid-row: 3; }
  table.bl-history td:nth-child(5):not(:has(a)) { display: none; }
}