/* _content/BPack.Dist.Licensing.Ui/BpLicenseActivation.razor.rz.scp.css */
/* 활성화 패널 — 내용만. 색은 BPack 토큰(var(--bp-*))만 쓴다.

   ⚠ 세로 간격을 **이 컴포넌트가 소유한다.** 부모(BpLicenseGate 의 패널 · 호스트의 BpCard ·
   다이얼로그)가 무엇이든 같은 리듬으로 서야 한다. 부모의 gap 에 기대면 BpCard 에 그냥 넣었을 때
   요소가 서로 붙는다 — 실제로 그렇게 됐었다. */

.bp-lic-activation[b-h9z008g229] {
    display: flex;
    flex-direction: column;
    gap: var(--bp-space-3);
    min-width: 0;
}

.bp-lic-muted[b-h9z008g229] {
    margin: 0;
    font-size: var(--bp-size-small);
    line-height: var(--bp-line-normal);
    color: var(--bp-text-secondary);
}

.bp-lic-section[b-h9z008g229] {
    display: flex;
    flex-direction: column;
    gap: var(--bp-space-1);
}

.bp-lic-label[b-h9z008g229] {
    font-size: var(--bp-size-2xs);
    font-weight: var(--bp-weight-semibold);
    color: var(--bp-text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--bp-tracking-wide);
}

.bp-lic-hwid-row[b-h9z008g229] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--bp-space-2);
    align-items: center;
    background: var(--bp-bg-page);
    border: 1px solid var(--bp-border-default);
    border-radius: var(--bp-radius-md);
    padding: var(--bp-space-2) var(--bp-space-3);
}

.bp-lic-hwid[b-h9z008g229] {
    font-size: var(--bp-size-2xs);
    color: var(--bp-text-primary);
    word-break: break-all;
}

.bp-lic-facts[b-h9z008g229] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--bp-space-2) var(--bp-space-4);
    margin: 0;
    font-size: var(--bp-size-small);
    line-height: var(--bp-line-normal);
}

.bp-lic-facts dt[b-h9z008g229] { color: var(--bp-text-secondary); }
.bp-lic-facts dd[b-h9z008g229] { margin: 0; color: var(--bp-text-primary); word-break: break-all; }

.bp-lic-mono[b-h9z008g229] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.bp-lic-actions[b-h9z008g229] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--bp-space-2);
}

.bp-lic-hint[b-h9z008g229] {
    margin: 0;
    font-size: var(--bp-size-2xs);
    color: var(--bp-text-tertiary);
    word-break: break-all;
}

/* 상태·결과 줄 — Alert 박스 대신(DES-F02-ONLINE@1.0.0 O20). 색은 아이콘과 글자에만. */
.bp-lic-status[b-h9z008g229] {
    margin: 0;
    display: block;   /* 좁은 폭에서 아이콘이 혼자 한 줄을 차지하지 않게(RVW-TSK-F02-010-R1 m4) */
    font-size: var(--bp-size-small);
    line-height: var(--bp-line-normal);
    color: var(--bp-text-primary);
}
.bp-lic-status i[b-h9z008g229] { margin-right: var(--bp-space-1); }
.bp-lic-status-ok i[b-h9z008g229] { color: var(--bp-success); }
.bp-lic-status-error[b-h9z008g229] { color: var(--bp-error); }

/* 온라인 요청 영역 */
.bp-lic-online[b-h9z008g229] {
    margin-top: var(--bp-space-2);
    padding-top: var(--bp-space-4);
    border-top: 1px solid var(--bp-border-light);
    display: flex;
    flex-direction: column;
    gap: var(--bp-space-3);
}
.bp-lic-online-title[b-h9z008g229] { font-size: var(--bp-size-small); font-weight: var(--bp-weight-semibold); color: var(--bp-text-primary); }
.bp-lic-online-grid[b-h9z008g229] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bp-space-2); }
@media (max-width: 480px) { .bp-lic-online-grid[b-h9z008g229] { grid-template-columns: 1fr; } }

/* 요청 영역 다음 판(DES-F17-SPEC 1.1.0 §6.3 P1~P4 · 시안 TSK-F19-002 승인분) — 칸 라벨 · 오류 칸 · 좁은 폭 버튼. 토큰만. */
.bp-lic-online .bp-tpl-form-field label[b-h9z008g229] { font-size: var(--bp-size-small); }
.bp-lic-online[b-h9z008g229]  input[aria-invalid="true"] { border-color: var(--bp-error); }
@media (max-width: 480px) { .bp-lic-actions[b-h9z008g229]  .bp-btn { flex: 1 1 auto; } }

/* 마케팅 선택 동의(DES-F17-SPEC 1.3.0 §6.3 P3′ · 시안 TSK-F23-002 승인분) — 점선 테두리 상자 · “내용 보기” 펼침 4줄. 토큰만. */
.bp-lic-consent[b-h9z008g229] {
    display: flex;
    flex-direction: column;
    gap: var(--bp-space-1);
    padding: var(--bp-space-2) var(--bp-space-3);
    border: 1px dashed var(--bp-border-default);
    border-radius: var(--bp-radius-md);
    min-width: 0;
}
.bp-lic-consent[b-h9z008g229]  .bp-checkbox { word-break: keep-all; }
.bp-lic-consent-more > summary[b-h9z008g229] { cursor: pointer; font-size: var(--bp-size-2xs); color: var(--bp-text-secondary); }
.bp-lic-consent-more ul[b-h9z008g229] {
    margin: var(--bp-space-1) 0 0;
    padding-left: var(--bp-space-5);
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--bp-size-2xs);
    color: var(--bp-text-secondary);
    word-break: keep-all;
}
.bp-lic-consent-more li[b-h9z008g229] { display: list-item; list-style: inherit; }
/* _content/BPack.Dist.Licensing.Ui/BpLicenseGate.razor.rz.scp.css */
/* 잠금 화면 — 좌 브랜드 히어로 + 우 폼 split.
   기준선은 후보 A(대표 결정 2026-09-08 · DES-F02-UI@1.0.0 §1).
   색은 BPack 토큰(var(--bp-*))만 쓴다 — 자체 design token 을 만들지 않는다(04 §10). */

.bp-lic-gate[b-2zpwspirh4] {
    /* 게이트가 스스로 세로 스크롤한다 — 호스트가 html · body 넘침을 막아도(App Shell 의 overflow: hidden) 요청 영역 아래 버튼까지 닿는다
       (대표 2026-10-13 MongoTools “화면이 넘어 가버리더라 아래로” · TSK-F17-009). */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    display: grid;
    /* safe: 내용이 뷰포트보다 크면 start 로 폴백 → 잘리지 않고 자연 스크롤. */
    place-items: safe center;
    padding: var(--bp-space-6) var(--bp-space-4);
    box-sizing: border-box;
    background: var(--bp-bg-page);
    color: var(--bp-text-primary);
}

.bp-lic-shell[b-2zpwspirh4] {
    display: grid;
    /* min(260px, 100%) — 좁은 폭에서 히어로가 컨테이너를 넘기지 않게. */
    grid-template-columns: minmax(min(260px, 100%), 260px) minmax(0, 1fr);
    width: 100%;
    max-width: 860px;
    background: var(--bp-bg-surface);
    border: 1px solid var(--bp-border-default);
    border-radius: var(--bp-radius-lg);
    overflow: hidden;
}

.bp-lic-hero[b-2zpwspirh4] {
    background: linear-gradient(158deg, var(--bp-primary-700) 0%, var(--bp-primary-900) 100%);
    color: var(--bp-neutral-0);
    padding: var(--bp-space-5) var(--bp-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--bp-space-2);
    min-width: 0;
}

.bp-lic-hero-mark img[b-2zpwspirh4] { width: var(--bp-h-lg); height: var(--bp-h-lg); display: block; }
.bp-lic-hero-title[b-2zpwspirh4] { margin: 0; font-size: var(--bp-size-h3); font-weight: var(--bp-weight-bold); word-break: break-all; }
.bp-lic-hero-tag[b-2zpwspirh4] { margin: 0; font-size: var(--bp-size-small); opacity: 0.82; }
.bp-lic-hero-spacer[b-2zpwspirh4] { flex: 1; min-height: var(--bp-space-6); }
.bp-lic-hero-by[b-2zpwspirh4] { font-size: var(--bp-size-2xs); opacity: 0.72; }

.bp-lic-panel[b-2zpwspirh4] {
    padding: var(--bp-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--bp-space-3);
    min-width: 0;
}

.bp-lic-title[b-2zpwspirh4] {
    margin: 0;
    font-size: var(--bp-size-h2);
    font-weight: var(--bp-weight-bold);
    color: var(--bp-text-primary);
}

/* 좁은 폭 — 히어로를 위로 접는다. */
@media (max-width: 640px) {
    .bp-lic-shell[b-2zpwspirh4] { grid-template-columns: 1fr; }
    .bp-lic-hero[b-2zpwspirh4] { flex-direction: row; align-items: center; gap: var(--bp-space-3); }
    .bp-lic-hero-spacer[b-2zpwspirh4] { display: none; }
    .bp-lic-hero-by[b-2zpwspirh4] { margin-left: auto; }
}