/* 결제 · 구독 관리 (SCRUM-80). 색·간격은 사이트 토큰(--t1, --line, --accent-strong …)을 쓴다. */
.bl-page { max-width: 640px; margin: 0 auto; padding: 40px 16px 80px; }
.bl-card { background: var(--surface, #fff); border: 1px solid var(--line, #e5e7eb); border-radius: var(--r-lg, 16px); padding: 28px; display: grid; gap: 18px; }
.bl-card h1 { font-size: var(--fs-h2, 24px); font-weight: 800; color: var(--t1, #111827); margin: 0; }
.bl-eyebrow { font-size: 12px; font-weight: 800; color: var(--accent-strong, #047857); letter-spacing: .4px; }
.bl-sum { display: grid; gap: 8px; margin: 0; }
.bl-sum > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--t3, #4b5563); }
.bl-sum dd { margin: 0; color: var(--t1, #111827); font-variant-numeric: tabular-nums; }
.bl-total { padding-top: 8px; border-top: 1px solid var(--line, #e5e7eb); font-weight: 800; }
.bl-total dd { font-size: 20px; }
.bl-cardbox { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px; border-radius: var(--r-md, 12px); background: var(--surface-soft, #f9fafb); font-size: 14px; }
.bl-cardbox b { margin-right: auto; }
.bl-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.7; color: var(--t3, #4b5563); }
.bl-agree input { margin-top: 4px; }
.bl-agree a { color: var(--accent-strong, #047857); text-decoration: underline; }
.bl-btn { display: inline-flex; justify-content: center; align-items: center; height: 48px; padding: 0 20px; border-radius: var(--r-md, 12px); border: 0; background: var(--accent-strong, #047857); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; text-decoration: none; }
.bl-btn:disabled { opacity: .45; cursor: not-allowed; }
.bl-btn.ghost { height: 36px; background: #fff; color: var(--t1, #111827); border: 1px solid var(--line, #e5e7eb); font-size: 13px; }
.bl-err { color: #b91c1c; font-size: 14px; }
.bl-note { font-size: 14px; color: var(--t3, #4b5563); line-height: 1.7; }
.bl-mute { color: var(--t4, #9ca3af); }
.bl-panel { display: grid; gap: 16px; }
.bl-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bl-table th, .bl-table td { padding: 10px 8px; border-bottom: 1px solid var(--line, #e5e7eb); text-align: left; }
/* 머리글도 같이 오른쪽 — 칸만 오른쪽이면 「금액」 제목이 숫자와 다른 쪽에 떠 보인다. */
.bl-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 24px; }
/* 문서함 결제 내역은 금액도 머리글과 같이 왼쪽 — 숫자 폭만 고르게 둔다. */
.bl-table .amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-meter { height: 8px; border-radius: 4px; background: var(--surface-soft, #f3f4f6); overflow: hidden; }
.bl-meter > span { display: block; height: 100%; background: var(--accent-strong, #047857); }
@media (max-width: 480px) { .bl-card { padding: 20px; } .bl-btn { width: 100%; } }

/* 문서함 › 공고 알림(B2) — 조건 칩 · 스위치. 색 · 모서리 · 컨트롤 높이는 디자인 시스템 토큰
   (tokens.css 의 --color-* · globals.css 의 --r-*)만 쓴다. */
.al-title { font-size: var(--text-title-size, 18px); font-weight: 700; color: var(--color-text-primary); margin: 4px 0 6px; }
.al-warn { margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--color-status-warning-subtle);
           box-shadow: inset 0 0 0 1px var(--color-status-warning); color: var(--color-text-primary); font-size: 14px; line-height: 1.6; }
.al-warn a { color: var(--color-action-primary-hover); text-decoration: underline; }
.al-ok { margin: 0; color: var(--color-action-primary-hover); font-size: 14px; }
.al-switch { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--color-text-primary); cursor: pointer; }
.al-switch input { width: 18px; height: 18px; accent-color: var(--color-action-primary); }
/* 무료 주간 요약 수신 동의 — 법정 동의라 문구를 줄이지 않고 두 줄로 보여 준다. */
.al-consent { align-items: flex-start; font-weight: 500; font-size: 14px; }
.al-consent input { margin-top: 2px; flex: none; }
.al-consent span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.al-consent small { font-size: 12.5px; font-weight: 400; color: var(--color-text-muted); }
.al-group { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.al-group:disabled { opacity: .5; }
.al-group legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.al-group legend small { margin-left: 6px; font-weight: 400; color: var(--color-text-muted); }
.al-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.al-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-full);
           box-shadow: inset 0 0 0 1px var(--color-border-default); background: var(--color-surface-default);
           font-size: 14px; color: var(--color-text-secondary); cursor: pointer; user-select: none; }
.al-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.al-chip.on { box-shadow: inset 0 0 0 1px var(--color-action-primary); background: var(--color-action-primary-subtle);
              color: var(--color-action-primary-hover); font-weight: 600; }
.al-chip:focus-within { outline: 2px solid var(--color-action-primary); outline-offset: 2px; }
.al-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.al-field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.al-field select { height: 40px; padding: 0 10px; border-radius: var(--r-sm); border: 0; box-shadow: inset 0 0 0 1px var(--color-border-default);
                   font: inherit; font-weight: 400; color: var(--color-text-primary); background: var(--color-surface-default); }

/* 회원 화면(SCRUM-266) — 로그인·가입·재설정·이전 입력칸. */
.bl-input { height: 48px; padding: 0 14px; border: 1px solid var(--line, #e5e7eb); border-radius: var(--r-md, 12px); background: #fff; color: var(--t1, #111827); font-size: 15px; }
.bl-input:focus { outline: 2px solid var(--accent-strong, #047857); outline-offset: 1px; }
.bl-field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--t1, #111827); }
.bl-applogo{display:flex;justify-content:center;padding:48px 16px 0}.bl-applogo img{display:block;height:28px;width:auto}

/* 회원 화면의 링크가 눈에 띄게(SCRUM-332) — 사이트 공통 `a{color:inherit}` 때문에 안내 문장 속 링크가 회색 글자와
   똑같아 눌러지는지 알 수 없었다. 강조색 · 굵게 · 마우스를 올리면 밑줄. */
.bl-note a, .bl-link { color: var(--accent-strong, #4363ca); font-weight: 600; text-decoration: none; }
.bl-note a:hover, .bl-link:hover { color: var(--indigo-700, #2c4491); text-decoration: underline; }
.bl-center { text-align: center; }
/* 이름표 줄 오른쪽에 링크(「비밀번호 찾기」). */
.bl-field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bl-field-head .bl-link { font-size: 14px; padding: 4px 0; }
/* 버튼처럼 보이는 링크 · 보조 버튼 — 안내 상자 안의 다음 행동. */
.bl-btn.soft { justify-self: start; height: 44px; padding: 0 16px; gap: 6px; background: #fff; color: var(--indigo-700, #2c4491);
               border: 1px solid var(--indigo-300, #93a5e2); font-size: 14px; }
.bl-btn.soft:hover { background: var(--indigo-50, #edf0fa); }
/* 안내 상자(소셜 가입자 · 회원 이전) · 오류 상자(로그인 실패 뒤 다음 길). */
.bl-callout { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--indigo-100, #d6ddf3); border-radius: var(--r-md, 12px);
              background: var(--indigo-50, #edf0fa); }
.bl-callout h2 { margin: 0; font-size: 15px; font-weight: 800; color: var(--t1, #111827); }
.bl-callout p { margin: 0; font-size: 14px; color: var(--t3, #4b5563); line-height: 1.7; }
.bl-callout ul { margin: 0; padding-left: 20px; font-size: 14px; color: var(--t3, #4b5563); line-height: 1.8; }
.bl-callout.plain { background: var(--surface-soft, #f2f5fa); border-color: transparent; gap: 8px; }
.bl-alert { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-md, 12px); background: #fdf3f3; border: 1px solid #f1cccc; }
.bl-alert .bl-err { margin: 0; font-weight: 600; }
.bl-alert p { margin: 0; font-size: 14px; color: var(--t3, #4b5563); line-height: 1.7; }
.bl-eyebrow-row { display: grid; gap: 8px; }
.bl-eyebrow-row h1 { line-height: 1.4; }
.bl-eyebrow-row p { margin: 0; }
/* 고르기 카드(옮기기 / 옮기지 않기). 고른 카드는 테두리가 굵고 바탕이 옅게 칠해진다. */
.bl-choices { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.bl-choices legend { padding: 0; margin-bottom: 10px; font-size: 15px; font-weight: 800; color: var(--t1, #111827); }
.bl-choice { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; padding: 16px; cursor: pointer;
             border: 1px solid var(--line, #e5e7eb); border-radius: var(--r-md, 12px); background: #fff; }
.bl-choice:has(input:checked) { border: 2px solid var(--accent-strong, #4363ca); padding: 15px; background: var(--indigo-50, #edf0fa); }
.bl-choice input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--accent-strong, #4363ca); }
.bl-choice b { display: block; font-size: 15px; color: var(--t1, #111827); }
.bl-choice span span { display: block; margin-top: 4px; font-size: 14px; color: var(--t3, #4b5563); line-height: 1.7; }
@media (max-width: 480px) { .bl-btn.soft { width: 100%; justify-self: stretch; } }