/* BeneValue 기본 스타일 — DESIGN.md 3·4·5장.
 * 모든 클래스는 bv- 접두사. 요소 단위 규칙은 .bv-page 안에서만 적용해
 * 기존 apple-* 페이지(reset.css / common.css 전역 규칙)와 충돌하지 않게 한다.
 */

/* ===== 페이지 래퍼 ===== */
.bv-page {
  font-family: var(--bv-font);
  font-size: var(--bv-fs-body-lg);
  line-height: 1.6;
  color: var(--bv-ink-2);
  background: var(--bv-surface);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

/* common.css의 전역 section 여백·최대 폭, reset.css의 p 16px 고정을 무효화.
 * :where()로 우선순위를 0으로 둬서 .bv-section, .bv-t-* 같은 클래스가 항상 이기게 한다. */
:where(.bv-page) section {
  padding: 0;
  max-width: none;
  margin: 0;
}
:where(.bv-page) :is(p, li, dd, dt) {
  font-size: inherit;
  line-height: inherit;
}
:where(.bv-page) :is(h1, h2, h3, p, ul, dl, dd) {
  margin: 0;
}
:where(.bv-page) ul {
  padding: 0;
  list-style: none;
}

/* app.css의 전역 caret-color: transparent 무효화 — 입력 중 커서가 보여야 한다 */
.bv-page input,
.bv-page textarea,
.bv-page select {
  caret-color: auto !important;
}

.bv-page :focus-visible {
  outline: 2px solid var(--bv-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--bv-focus-ring);
  border-radius: var(--bv-radius-small);
}

/* 페이지 이동 시 Blazor가 제목에 주는 프로그램 포커스(tabindex=-1)에는 링을 그리지 않는다 */
.bv-page [tabindex="-1"]:focus {
  outline: none;
  box-shadow: none;
}

/* ===== 타입 (DESIGN.md 3장) ===== */
.bv-t-display { font-size: var(--bv-fs-display); font-weight: 700; line-height: 1.3; letter-spacing: var(--bv-tracking-title); }
.bv-t-title-1 { font-size: var(--bv-fs-title-1); font-weight: 700; line-height: 1.3; letter-spacing: var(--bv-tracking-title); }
.bv-t-title-2 { font-size: var(--bv-fs-title-2); font-weight: 600; line-height: 1.4; letter-spacing: var(--bv-tracking-title); }
.bv-t-title-3 { font-size: var(--bv-fs-title-3); font-weight: 600; line-height: 1.5; letter-spacing: var(--bv-tracking-title); }
.bv-t-body-lg { font-size: var(--bv-fs-body-lg); font-weight: 400; line-height: 1.6; }
.bv-t-body    { font-size: var(--bv-fs-body); font-weight: 400; line-height: 1.6; }
.bv-t-label   { font-size: var(--bv-fs-label); font-weight: 500; line-height: 1.43; }
.bv-t-caption { font-size: var(--bv-fs-caption); font-weight: 400; line-height: 1.4; }

/* 영문·숫자만 있는 텍스트는 자간 0 (크림위키) */
.bv-num { font-variant-numeric: tabular-nums; letter-spacing: 0; }

.bv-c-ink-strong { color: var(--bv-ink-strong); }
.bv-c-ink { color: var(--bv-ink); }
.bv-c-ink-2 { color: var(--bv-ink-2); }
.bv-c-ink-3 { color: var(--bv-ink-3); }

/* ===== 레이아웃 (DESIGN.md 4장) ===== */
.bv-container {
  max-width: calc(var(--bv-container) + var(--bv-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--bv-gutter);
}
.bv-section { padding: var(--bv-section) 0; }
.bv-section--subtle { background: var(--bv-surface-subtle); }

/* ===== 도메인 띠 (DESIGN.md 2-3) ===== */
.bv-domain-operations { background: var(--bv-domain-operations); }
.bv-domain-hardware { background: var(--bv-domain-hardware); }
.bv-domain-healthcare { background: var(--bv-domain-healthcare); }
.bv-domain-ai { background: var(--bv-domain-ai); }
.bv-domain-game { background: var(--bv-domain-game); }

.bv-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 전용 본문에서 반복되는 텍스트·미디어 배치. 프로젝트별 구성은 Details에 둔다. */
.bv-case { padding-bottom: 0; }
.bv-case-section { padding: var(--bv-space-64) 0; }
.bv-case-head + .bv-case-section { padding-top: var(--bv-space-24); }
.bv-case-section h2 { margin-bottom: var(--bv-space-24); color: var(--bv-ink); }
.bv-case-section h3 { color: var(--bv-ink); }
.bv-case-section p + p { margin-top: var(--bv-space-16); }
.bv-case-lead { max-width: var(--bv-article); color: var(--bv-ink-2); }
.bv-case-kicker { margin-bottom: var(--bv-space-12); color: var(--bv-ink-3); font-size: var(--bv-fs-caption); font-weight: 500; }
.bv-case-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--bv-space-40); align-items: center; }
.bv-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bv-space-24); }
.bv-case :is(.bv-case-split, .bv-case-grid) > * { min-width: 0; }
@media (max-width: 767px) {
  .bv-case-split, .bv-case-grid { grid-template-columns: minmax(0, 1fr); gap: var(--bv-space-24); }
}

@media (prefers-reduced-motion: reduce) {
  .bv-page *,
  .bv-page *::before,
  .bv-page *::after {
    transition: none !important;
    animation: none !important;
  }
}