/* blurssism v3.0.0 · © caffeinecat · MIT · https://github.com/leeuc10/blurssism */
/* 계층 밖: tokens.css의 변수를 팔레트·테마에 맞게 덮어쓰는 블록 */
@supports (color: color-mix(in srgb, red, blue)) {
  :root, [data-theme="light"], [data-theme="dark"], [data-palette], [data-background] {
    --crema-tint: color-mix(in srgb, var(--deco) var(--crema-tint-mix), var(--accent));
    /* 가장자리 선은 띠와 같은 색(crema-tint)을 조금 더 진하게 쓴 "띠의 첫 줄"이라 띠로 이어집니다(전에는 흰 테두리와 섞은 밝은 선이라 따로 떠 보였음) */
    --crema-edge: color-mix(in srgb, var(--crema-tint) calc(var(--crema-band-top) + 12%), transparent);
    /* 띠는 위에서 16px까지 ease-out 곡선으로 옅어지고(계단 없이), 그 뒤 40% 지점까지 천천히, 아래까지 옅게 남습니다 */
    --crema-band: linear-gradient(180deg,
      color-mix(in srgb, var(--crema-tint) var(--crema-band-top), transparent),
      color-mix(in srgb, var(--crema-tint) calc(var(--crema-band-top) * 0.88 + var(--crema-band-lip) * 0.12), transparent) 1px,
      color-mix(in srgb, var(--crema-tint) calc(var(--crema-band-top) * 0.66 + var(--crema-band-lip) * 0.34), transparent) 3px,
      color-mix(in srgb, var(--crema-tint) calc(var(--crema-band-top) * 0.39 + var(--crema-band-lip) * 0.61), transparent) 6px,
      color-mix(in srgb, var(--crema-tint) calc(var(--crema-band-top) * 0.14 + var(--crema-band-lip) * 0.86), transparent) 10px,
      color-mix(in srgb, var(--crema-tint) var(--crema-band-lip), transparent) 16px,
      color-mix(in srgb, var(--crema-tint) calc(var(--crema-band-lip) * 0.7 + var(--crema-band-mid) * 0.3), transparent) 24px,
      color-mix(in srgb, var(--crema-tint) calc(var(--crema-band-lip) * 0.4 + var(--crema-band-mid) * 0.6), transparent) 40px,
      color-mix(in srgb, var(--crema-tint) var(--crema-band-mid), transparent) 40%,
      color-mix(in srgb, var(--crema-tint) var(--crema-band-low), transparent));
    --crema-light: color-mix(in srgb, var(--crema-tint) var(--crema-light-strength), transparent);
    /* 같은 색조로 어둡게: color 블렌드는 색조·채도만 쓰고, 결 사이 틈은 밝아지지 않게 합니다 */
    --crema-grain-color: color-mix(in srgb, color-mix(in srgb, var(--deco) 60%, black) var(--crema-grain-tint), transparent);
  }
}
/* 팔레트·테마가 바뀔 때 띠·가장자리·빛 색이 끊기지 않고 이어지도록 색 변수를 등록합니다(등록된 색 변수는 transition이 됩니다) */
@property --crema-tint { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --crema-edge { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --crema-light { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --crema-grain-color { syntax: "<color>"; inherits: true; initial-value: transparent; }

html[data-crema="rich"], [data-crema="rich"] { --blur-md: 32px; --blur-lg: 48px; --crema-saturate: 140%; }

@layer blurssism;
@layer blurssism {
/* blurssism 컴포넌트 스타일 원본 · © caffeinecat · MIT. 색·간격·모서리·글자 크기 모두 tokens.css 변수(--text-* 포함)에서 옵니다. 접두어 bl-. dist/bundle.css는 빌드가 만듭니다.
   글꼴은 불러오지 않습니다. fonts.css를 함께 쓰거나 직접 호스팅하세요. */

.bl-root, .bl-root * { box-sizing: border-box; }
.bl-root { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; word-break: keep-all; }

/* ── 컴포넌트 변수(2.1) ─────────────────────────────
   자주 바꾸는 치수는 변수로 둡니다. :root나 .bl-root, 또는 특정 영역에서 덮어쓰면 그 안의 컴포넌트가 따라갑니다.
   예: .compact { --bl-btn-h: 44px; --bl-field-h: 44px; } */
:root, .bl-root {
  --bl-btn-h: 52px; --bl-btn-h-md: 40px; --bl-btn-px: var(--space-6); --bl-btn-radius: var(--radius-full);
  --bl-field-h: 52px; --bl-field-radius: var(--radius-md);
  --bl-icon-btn: 48px; --bl-chip-h: 36px; --bl-switch-w: 52px; --bl-switch-h: 32px; --bl-tab-h: 56px;
  --bl-card-pad: var(--space-6) var(--space-5) var(--space-5); --bl-card-radius: var(--radius-lg);
  --bl-dialog-w: 440px; --bl-sheet-w: 480px; --bl-toast-w: 420px;
}

/* ── 크레마 재질: 블러레마(Blurema) ─────────────────────────────
   1.5부터 클래스·속성·변수 이름이 crema이고, 1.4의 glass 이름은 2.0에서 제거됐습니다(auditCrema()가 남은 쓰임새를 찾아 줍니다).
   blur + crema. 맑은 유리 대신 우유 거품 색 젖빛 크레마입니다.
   블러 → 우유 거품 색(crema-fill) → 거품 결(crema-grain) → 크레마 띠(crema-band) → 크레마 가장자리(crema-edge) */
.bl-crema, .bl-crema-thick, .bl-btn-crema, .bl-icon-btn:not(.bl-icon-btn-plain) {
  background-image: var(--crema-band), var(--bl-grain-tint), var(--crema-grain);
  background-blend-mode: normal, color, normal;
}
.bl-crema {
  background-color: var(--bl-crema-fill);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--crema-saturate));
  backdrop-filter: blur(var(--blur-md)) saturate(var(--crema-saturate));
  border: 1px solid var(--crema-stroke);
  box-shadow: var(--shadow-crema);
}
.bl-crema-thick {
  background-color: var(--bl-crema-fill-strong);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(var(--crema-saturate));
  backdrop-filter: blur(var(--blur-lg)) saturate(var(--crema-saturate));
  border: 1px solid var(--crema-stroke);
  box-shadow: var(--shadow-sheet);
}
/* 크레마 채움이 팔레트(브랜드 팔레트 포함)의 장식색을 조금 머금습니다(1.6.2, 세기: --crema-fill-tint).
   요소마다 계산하므로 --crema-fill을 덮어써도, 배경·팔레트를 영역마다 바꿔도 그대로 따라갑니다. */
.bl-crema, .bl-crema-thick, .bl-crema-lite, .bl-btn-crema, .bl-icon-btn {
  /* 팔레트·테마·배경이 바뀌면 채움·띠·가장자리 색이 이어집니다. 블러 반경은 바꾸지 않습니다(블러 예산 규칙). */
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, --crema-tint .35s ease, --crema-edge .35s ease, --crema-light .35s ease, --crema-grain-color .35s ease;
  --bl-crema-fill: var(--crema-fill); --bl-crema-fill-strong: var(--crema-fill-strong);
  /* 거품 결 색조: 결 바로 위에 팔레트 장식색 층을 color 블렌드로 얹어 밝기는 두고 색조만 바꿉니다(세기: --crema-grain-tint, 다크만) */
  --bl-grain-tint: linear-gradient(var(--crema-grain-color, transparent), var(--crema-grain-color, transparent));
}
@supports (color: color-mix(in srgb, red, blue)) {
  .bl-crema, .bl-crema-thick, .bl-crema-lite, .bl-btn-crema, .bl-icon-btn {
    --bl-crema-fill: color-mix(in srgb, var(--crema-fill), var(--deco) var(--crema-fill-tint));
    --bl-crema-fill-strong: color-mix(in srgb, var(--crema-fill-strong), var(--deco) var(--crema-fill-tint));
  }
}
/* 크레마가 팔레트의 장식색(deco)을 따라가게 합니다. color-mix가 없는 브라우저는 tokens.css의 고정값을 씁니다.
   크레마 띠는 위 가장자리에 조금 더 고이고, 아래로 옅어지면서 면 전체에 남습니다(세기: --crema-band-top·lip·mid·low).
   라이트·다크 값은 tokens.css의 테마 블록에서 오므로 여기서는 한 번만 선언합니다. */

/* ── 데스크톱 모드: <html data-crema="rich"> ─────────────────────────────
   applyCremaPreference()가 큰 화면·마우스·넉넉한 기기에서 자동으로 켭니다. 끄려면 applyCremaPreference({ rich: false }).
   기본보다 블러가 깊고(32/48px. 2.0에서 40/64에서 낮춤), 라이트에서는 크레마가 조금 더 비치고, 그림자가 두 겹 늘고,
   왼쪽 위에서 캐러멜빛(crema-light)이 듭니다. 포인터를 따라오는 빛은 2.0부터 기본으로 꺼져 있고(applyCremaPreference({ pointerLight: true })),
   켜면 포인터 좌표를 각 크레마 요소 기준으로 씁니다. 블러 예산은 화면당 6개. */
[data-crema="rich"] .bl-crema, [data-crema="rich"] .bl-crema-thick, [data-crema="rich"] .bl-btn-crema, [data-crema="rich"] .bl-icon-btn:not(.bl-icon-btn-plain) {
  background-image:
    radial-gradient(140px circle at var(--bl-light-x, 18vw) var(--bl-light-y, 0px), var(--crema-light), transparent 70%),
    radial-gradient(420px circle at var(--bl-light-x, 18vw) var(--bl-light-y, 0px), color-mix(in srgb, var(--crema-light) 50%, transparent), transparent 70%),
    var(--crema-band), var(--bl-grain-tint), var(--crema-grain);
  background-blend-mode: normal, normal, normal, color, normal;
}
[data-crema="rich"] .bl-crema, [data-crema="rich"] .bl-btn-crema, [data-crema="rich"] .bl-icon-btn:not(.bl-icon-btn-plain) {
  box-shadow: var(--shadow-crema), inset 0 -1px 0 var(--crema-stroke), var(--shadow-crema-rich);
}
[data-crema="rich"] .bl-crema-thick { box-shadow: var(--shadow-sheet), var(--shadow-sheet-rich); }
@supports (color: color-mix(in srgb, red, blue)) {
  [data-crema="rich"] .bl-crema, [data-crema="rich"] .bl-btn-crema, [data-crema="rich"] .bl-icon-btn:not(.bl-icon-btn-plain) { background-color: color-mix(in srgb, var(--bl-crema-fill) var(--crema-rich-fill), transparent); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-crema="rich"] .bl-btn-crema, [data-crema="rich"] .bl-icon-btn:not(.bl-icon-btn-plain) { transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease; }
  [data-crema="rich"] .bl-btn-crema:hover, [data-crema="rich"] .bl-icon-btn:not(.bl-icon-btn-plain):hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-crema), inset 0 -1px 0 var(--crema-stroke), var(--shadow-crema-rich-hover);
  }
  [data-crema="rich"] .bl-btn-crema:active, [data-crema="rich"] .bl-icon-btn:not(.bl-icon-btn-plain):active { transform: scale(0.97); }
}

/* ── Button ─────────────────────────────── */
.bl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--bl-btn-h); padding: 0 var(--bl-btn-px); border-radius: var(--bl-btn-radius);
  font-family: var(--font-sans); font-size: var(--text-label-size); line-height: var(--text-label-line); font-weight: var(--text-label-weight);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform .12s ease, background-color .12s ease;
}
.bl-btn:active { transform: scale(0.97); }
.bl-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bl-btn:disabled { cursor: not-allowed; background: var(--paper-sunken); color: var(--ink-subtle); border-color: transparent; box-shadow: none; transform: none; }
.bl-btn-md { height: var(--bl-btn-h-md); padding: 0 var(--space-5); }
.bl-btn-block { display: flex; width: 100%; }
/* 2.0: primary가 강조색(accent) 채움입니다(전에는 ink 채움). 블랙 팔레트에서는 그대로 검정, 다른 팔레트에서는 그 팔레트 색.
   .bl-btn-accent는 같은 규칙의 별칭이고, 컴포넌트 variant="accent"는 bl-btn-primary를 붙입니다. 화면당 하나. */
.bl-btn-primary, .bl-btn-accent { background: var(--accent); color: var(--on-accent); }
.bl-btn-crema { background-color: var(--bl-crema-fill); color: var(--ink); border-color: var(--crema-stroke); box-shadow: var(--shadow-crema);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--crema-saturate)); backdrop-filter: blur(var(--blur-md)) saturate(var(--crema-saturate)); }
.bl-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.bl-btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.bl-btn svg { width: 20px; height: 20px; flex: none; }

.bl-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--bl-icon-btn); height: var(--bl-icon-btn); border-radius: var(--radius-full); cursor: pointer; color: var(--ink);
  background-color: var(--bl-crema-fill); border: 1px solid var(--crema-stroke); box-shadow: var(--shadow-crema);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(var(--crema-saturate)); backdrop-filter: blur(var(--blur-sm)) saturate(var(--crema-saturate));
}
.bl-icon-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bl-icon-btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.bl-icon-btn-plain { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bl-icon-btn svg { width: 22px; height: 22px; }
/* 크레마 안의 아이콘 버튼은 블러를 다시 걸지 않습니다. 뒤가 이미 흐려져 있어 보이는 차이가 없고, 블러 예산만 씁니다. */
.bl-crema .bl-icon-btn:not(.bl-icon-btn-plain), .bl-crema-thick .bl-icon-btn:not(.bl-icon-btn-plain), .bl-crema-lite .bl-icon-btn:not(.bl-icon-btn-plain) {
  background-color: var(--bl-crema-fill-strong); background-image: var(--bl-grain-tint), var(--crema-grain); background-blend-mode: color, normal; -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ── Chip ─────────────────────────────── */
.bl-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bl-chip {
  display: inline-flex; align-items: center; gap: var(--space-1); height: var(--bl-chip-h); padding: 0 var(--space-3);
  border-radius: var(--radius-full); border: 1px solid var(--line-strong); background: var(--paper-raised); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--text-label-size); line-height: var(--text-label-line); font-weight: 500; cursor: pointer;
}
.bl-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bl-chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.bl-chip svg { width: 16px; height: 16px; }

/* ── TextField ─────────────────────────────── */
.bl-field { display: flex; flex-direction: column; gap: var(--space-2); }
.bl-field-label { font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line); font-weight: 600; color: var(--ink); }
.bl-field-input {
  height: var(--bl-field-h); padding: 0 var(--space-4); border-radius: var(--bl-field-radius); width: 100%;
  border: 1px solid var(--line-strong); background: var(--paper-raised); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--text-body-size); line-height: var(--text-body-line);
}
.bl-field-input::placeholder { color: var(--ink-subtle); }
.bl-field-input:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bl-field-help { margin: 0; font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line); color: var(--ink-muted); }
.bl-field[data-invalid="true"] .bl-field-input { border-color: var(--danger); }
.bl-field[data-invalid="true"] .bl-field-help { color: var(--danger); font-weight: 500; }

/* ── Switch ─────────────────────────────── */
.bl-switch { position: relative; flex: none; width: var(--bl-switch-w); height: var(--bl-switch-h); padding: 0; border-radius: var(--radius-full); cursor: pointer;
  background: var(--paper-sunken); border: 1px solid var(--line-strong); transition: background-color .15s ease; }
.bl-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: var(--radius-full);
  background: var(--paper-raised); box-shadow: var(--shadow-crema); transition: transform .18s cubic-bezier(.3,1.4,.5,1); }
.bl-switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.bl-switch[aria-checked="true"]::after { transform: translateX(calc(var(--bl-switch-w) - var(--bl-switch-h))); }
.bl-switch:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ── Badge ─────────────────────────────── */
.bl-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-2);
  border-radius: var(--radius-full); font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: 600; white-space: nowrap; }
.bl-badge svg { width: 14px; height: 14px; }
.bl-badge-neutral { background: var(--paper-sunken); color: var(--ink-muted); }
.bl-badge-accent { background: var(--accent-soft); color: var(--accent-ink); }
.bl-badge-positive { background: var(--positive-soft); color: var(--positive); }
.bl-badge-warning { background: var(--warning-soft); color: var(--warning); }
.bl-badge-danger { background: var(--danger-soft); color: var(--danger); }
.bl-badge-info { background: var(--accent-soft); color: var(--info); }

/* ── Card ─────────────────────────────── */
.bl-card { padding: var(--bl-card-pad); border-radius: var(--bl-card-radius);
  background: var(--paper-raised); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.bl-card-eyebrow { margin: 0 0 var(--space-2); font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: var(--text-caption-weight); letter-spacing: var(--text-caption-tracking); color: var(--ink-muted); }
.bl-card-title { margin: 0 0 var(--space-2); font-size: var(--text-title-3-size); line-height: var(--text-title-3-line); font-weight: var(--text-title-3-weight); color: var(--ink); }
.bl-card-body { margin: 0; font-size: var(--text-body-size); line-height: var(--text-body-line); color: var(--ink-muted); }
.bl-card-quote { margin: 0; font-family: var(--font-serif); font-size: var(--text-quote-size); line-height: var(--text-quote-line); font-weight: var(--text-quote-weight); color: var(--ink); }
.bl-card-actions { display: flex; gap: var(--space-2); margin-top: var(--space-5); }

/* ── MediaCard ─────────────────────────────── */
.bl-media { position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 5; background: var(--paper-sunken); isolation: isolate; }
.bl-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bl-media-ph { position: absolute; inset: 0; }
.bl-media-ph i { position: absolute; display: block; }
.bl-media > .bl-badge { position: absolute; top: var(--space-4); left: var(--space-4); }
.bl-media-bar { position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); border-radius: var(--radius-lg); }
.bl-media-text { flex: 1; min-width: 0; }
.bl-media-title { margin: 0; font-family: var(--font-serif); font-size: var(--text-title-1-size); line-height: var(--text-title-1-line); font-weight: var(--text-title-1-weight); letter-spacing: var(--text-title-1-tracking); color: var(--ink); }
.bl-media-meta { margin: 0; font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line); color: var(--ink); }   /* 얇은 크레마 위 글자는 ink만 (뒤가 사진이어도 4.5:1) */

/* ── ListItem ─────────────────────────────── */
.bl-list { margin: 0; padding: var(--space-1) 0; list-style: none; border-radius: var(--radius-lg); background: var(--paper-raised); border: 1px solid var(--line); }
.bl-list > li + li .bl-item { border-top: 1px solid var(--line); }
.bl-list > li { padding: 0 var(--space-4); }
.bl-item { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-3) 0; width: 100%;
  background: none; border: 0; text-align: left; font-family: var(--font-sans); color: var(--ink); }
button.bl-item, a.bl-item { cursor: pointer; text-decoration: none; }
.bl-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.bl-item-lead { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--paper-sunken); color: var(--ink); }
.bl-item-lead svg { width: 20px; height: 20px; }
.bl-item-text { flex: 1; min-width: 0; }
.bl-item-title { display: block; font-size: var(--text-body-size); line-height: 24px; font-weight: 500; }
.bl-item-sub { display: block; font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line); color: var(--ink-muted); }
.bl-item-trail { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-subtle); font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line); }
.bl-item-trail svg { width: 18px; height: 18px; }

/* ── NavBar ─────────────────────────────── */
.bl-navbar { display: flex; align-items: center; gap: var(--space-2); height: var(--navbar-h); padding: 0 var(--space-2) 0 var(--space-4); border-radius: var(--radius-full); }
.bl-navbar-title { flex: 1; min-width: 0; margin: 0; font-size: var(--text-title-3-size); line-height: var(--text-title-3-line); font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-navbar-links { display: flex; gap: var(--space-1); }
.bl-navbar-link { height: 40px; display: inline-flex; align-items: center; padding: 0 var(--space-3); border-radius: var(--radius-full);
  color: var(--ink); font-size: var(--text-label-size); line-height: var(--text-label-line); font-weight: 500; text-decoration: none; }
/* 지금 페이지: 색(accent-soft) + 굵기 + 밑줄. 색만으로 알리지 않습니다. */
.bl-navbar-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700;
  text-decoration: underline 2px; text-underline-offset: 4px; }
.bl-navbar-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bl-navbar .bl-icon-btn { width: 40px; height: 40px; }
.bl-largetitle { margin: var(--space-6) 0 var(--space-4); font-size: var(--text-title-1-size); line-height: var(--text-title-1-line); font-weight: var(--text-title-1-weight); letter-spacing: var(--text-title-1-tracking); color: var(--ink); }

/* ── TabBar ─────────────────────────────── */
.bl-tabbar { display: flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-full); }
.bl-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: var(--bl-tab-h); min-width: 64px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-full); background: transparent; cursor: pointer;
  color: var(--ink); font-family: var(--font-sans); font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: var(--text-caption-weight); text-decoration: none; }
.bl-tab svg { width: 24px; height: 24px; }
/* 지금 탭: 불투명한 accent-soft 캡슐 + 굵기 + 밑줄. 크레마 위에서도 대비가 4.5:1 이상이고, 색만으로 알리지 않습니다.
   aria-selected는 1.5까지의 마크업(role="tab")용입니다. */
.bl-tab[aria-current="page"], .bl-tab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700;
  text-decoration: underline 2px; text-underline-offset: 3px; }
.bl-tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
/* 1.6.2: 크레마가 팔레트 장식색을 머금어 accent-soft 캡슐과 가까워지므로, 선택 캡슐에 강조색 1px 테두리를 둡니다 */
@supports (color: color-mix(in srgb, red, blue)) {
  .bl-tab[aria-current="page"], .bl-tab[aria-selected="true"], .bl-navbar-link[aria-current="page"] {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
  }
}

/* ── Sheet ─────────────────────────────── */
.bl-sheet { padding: var(--space-3) var(--space-6) var(--space-6); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.bl-sheet-grip { width: 40px; height: 5px; margin: 0 auto var(--space-5); border-radius: var(--radius-full); background: var(--line-strong); }
/* 2.1: open을 받는 모달 시트. 네이티브 <dialog>로 아래에서 올라오고, 손잡이를 끌어내려 닫습니다. md 이상은 가운데 카드. */
.bl-sheet-modal { width: 100%; max-width: none; margin: auto 0 0; border: 1px solid var(--crema-stroke); color: var(--ink); animation: bl-rise .26s cubic-bezier(.2,.8,.2,1); }
.bl-sheet-modal::backdrop { background: var(--scrim); animation: bl-fade .2s ease; }
.bl-sheet-modal:focus { outline: none; }
.bl-sheet-modal .bl-sheet-grip { cursor: grab; touch-action: none; position: relative; }
.bl-sheet-modal .bl-sheet-grip::before { content: ""; position: absolute; left: -40px; right: -40px; top: -16px; bottom: -16px; }   /* 손잡이 누르는 영역 */
.bl-sheet-modal[data-closing] { animation: bl-sink .2s ease forwards; }
.bl-sheet-modal[data-closing]::backdrop { animation: bl-fade-out .2s ease forwards; }
@media (min-width: 768px) { .bl-sheet-modal { width: min(var(--bl-sheet-w), calc(100% - 2 * var(--space-4))); margin: auto; border-radius: var(--radius-xl); } .bl-sheet-modal .bl-sheet-grip { display: none; } }
html:has(dialog.bl-sheet-modal[open]) { overflow: hidden; }
.bl-sheet-title { margin: 0 0 var(--space-2); font-size: var(--text-title-2-size); line-height: var(--text-title-2-line); font-weight: var(--text-title-2-weight); letter-spacing: var(--text-title-2-tracking); color: var(--ink); }
.bl-sheet-body { margin: 0 0 var(--space-6); font-size: var(--text-body-size); line-height: var(--text-body-line); color: var(--crema-ink-muted); }
.bl-sheet-actions { display: flex; flex-direction: column; gap: var(--space-2); }

/* ── Toast ─────────────────────────────── */
.bl-toast { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border-radius: var(--radius-full); font-size: var(--text-label-size); line-height: 22px; font-weight: 500; color: var(--ink); }
.bl-toast > svg { width: 20px; height: 20px; flex: none; }
.bl-toast[data-tone="positive"] > svg { color: var(--positive); }
.bl-toast[data-tone="danger"] > svg { color: var(--danger); }
.bl-toast[data-tone="warning"] > svg { color: var(--warning); }
.bl-toast[data-tone="info"] > svg { color: var(--info); }
.bl-toast-msg { flex: 1; min-width: 0; }
.bl-toast .bl-btn { height: 36px; padding: 0 var(--space-4); }
.bl-toast .bl-toast-close { width: 36px; height: 36px; }
/* 2.1: ToastProvider가 그리는 쌓임 영역. 아래 가운데, lg 이상은 오른쪽 아래. 안전 영역을 비웁니다. */
.bl-toaster { position: fixed; z-index: 60; left: var(--space-4); right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); pointer-events: none; }
.bl-toaster-item { width: min(100%, var(--bl-toast-w)); pointer-events: auto; animation: bl-rise .26s cubic-bezier(.2,.8,.2,1); }
.bl-toaster-item[data-closing] { animation: bl-sink .2s ease forwards; }
@media (min-width: 1120px) { .bl-toaster { left: auto; align-items: flex-end; } }

/* ── 미리보기용 배경: 크레마가 비쳐 보이도록 색 면을 깔아 둡니다 ── */
.bl-backdrop { position: relative; overflow: hidden; background: var(--paper); }
.bl-backdrop > i { position: absolute; display: block; border-radius: var(--radius-full); }

/* ── 성능: 크레마 끄기·가벼운 크레마 ─────────────────────────────
   <html data-crema="off">  → 모든 크레마가 불투명(blur 0)으로. 저사양 기기·절전 모드용 (Blurssism.applyCremaPreference())
   .bl-crema-lite           → 블러 없이 두꺼운 반투명만. 긴 목록 안에서 반복되는 크레마용 */
.bl-crema-lite { background: var(--bl-crema-fill-strong); border: 1px solid var(--crema-stroke); box-shadow: var(--shadow-card); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-crema="off"] .bl-crema, [data-crema="off"] .bl-crema-thick, [data-crema="off"] .bl-btn-crema, [data-crema="off"] .bl-icon-btn, [data-crema="off"] .bl-scrim {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
[data-crema="off"] .bl-btn-crema, [data-crema="off"] .bl-icon-btn:not(.bl-icon-btn-plain) { background-color: var(--paper-raised); background-image: none; }
[data-crema="off"] .bl-crema, [data-crema="off"] .bl-crema-thick { background: var(--paper-raised); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bl-crema, .bl-crema-thick { background: var(--paper-raised); }
  .bl-btn-crema, .bl-icon-btn:not(.bl-icon-btn-plain) { background-color: var(--paper-raised); background-image: none; }
}

/* ── Checkbox · Radio ─────────────────────────────── */
.bl-check { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--touch-min); cursor: pointer; font-size: var(--text-body-size); line-height: 24px; color: var(--ink); }
.bl-check input { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-content: center; width: 22px; height: 22px; margin: 0;
  border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--paper-raised); cursor: pointer; transition: background-color .12s ease; }
.bl-check input:checked { background: var(--accent); border-color: var(--accent); }
.bl-check input[type="checkbox"]:checked::after { content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bl-check input[type="radio"] { border-radius: var(--radius-full); }
.bl-check input[type="radio"]:checked { box-shadow: inset 0 0 0 5px var(--paper-raised); }
.bl-check input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bl-check input:disabled { background: var(--paper-sunken); border-color: var(--line); cursor: not-allowed; }
.bl-check:has(input:disabled) { color: var(--ink-subtle); cursor: not-allowed; }
.bl-check-sub { display: block; font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line); color: var(--ink-muted); }
.bl-radios { display: flex; flex-direction: column; border: 0; margin: 0; padding: 0; }
.bl-radios legend { padding: 0; margin-bottom: var(--space-1); font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line); font-weight: 600; }

/* ── Select ─────────────────────────────── */
.bl-select { position: relative; }
.bl-select select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer; }
.bl-select::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -6px; pointer-events: none;
  border: solid var(--ink-muted); border-width: 0 1.75px 1.75px 0; transform: rotate(45deg); }

/* ── SegmentedControl ─────────────────────────────── */
.bl-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-full); background: var(--paper-sunken); }
.bl-seg-item { height: 34px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-full); background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-body-sm-size); line-height: var(--text-label-line); font-weight: 600; color: var(--ink-muted); transition: background-color .15s ease; }
.bl-seg-item[aria-checked="true"] { background: var(--paper-raised); color: var(--ink); box-shadow: var(--shadow-card); }
.bl-seg-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.bl-seg-block { display: flex; } .bl-seg-block .bl-seg-item { flex: 1; }

/* ── Tooltip ───────────────────────────────
   .bl-tooltip: CSS만으로 쓰는 툴팁(부모 기준 위치). 숨어 있을 때는 visibility: hidden이라 블러 예산에 들지 않습니다.
   .bl-tooltip-pop: 컴포넌트가 쓰는 툴팁. 최상위 층(popover)에 떠서 overflow: hidden인 부모에 잘리지 않고, 위치는 스크립트가 정합니다.
   popover를 모르는 브라우저에서는 보이지 않고, aria-describedby로 스크린리더에만 읽힙니다. */
.bl-tip { position: relative; display: inline-flex; }
.bl-tooltip, .bl-tooltip-pop { padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none;
  font-family: var(--font-sans); font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: var(--text-caption-weight); color: var(--ink); }
.bl-tooltip { position: absolute; left: 50%; bottom: calc(100% + var(--space-2)); transform: translate(-50%, 4px); z-index: 10;
  opacity: 0; visibility: hidden; transition: opacity .12s ease, transform .12s ease, visibility .12s; }
.bl-tip:focus-within .bl-tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.bl-tip[data-dismissed] .bl-tooltip { opacity: 0; visibility: hidden; }
.bl-tooltip-pop { display: none; position: fixed; inset: auto; margin: 0; overflow: visible; transform: translate(-50%, -100%); }
.bl-tooltip-pop[data-place="below"] { transform: translate(-50%, 0); }
.bl-tooltip-pop:popover-open { display: block; }

/* ── Avatar ─────────────────────────────── */
.bl-avatar { position: relative; flex: none; display: inline-grid; place-items: center; overflow: hidden; border-radius: var(--radius-full);
  width: 40px; height: 40px; background: var(--accent-soft); color: var(--accent-ink); font-size: 15px; line-height: 1; font-weight: 600; }
.bl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bl-avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.bl-avatar-lg { width: 56px; height: 56px; font-size: 20px; }
.bl-avatar-stack { display: inline-flex; } .bl-avatar-stack .bl-avatar + .bl-avatar { margin-left: -10px; box-shadow: 0 0 0 2px var(--paper); }

/* ── Progress ─────────────────────────────── */
.bl-progress { display: grid; gap: var(--space-2); }
.bl-progress-head { display: flex; justify-content: space-between; font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line); }
.bl-progress-head span:last-child { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.bl-progress-track { height: 8px; border-radius: var(--radius-full); background: var(--paper-sunken); overflow: hidden; }
.bl-progress-fill { height: 100%; border-radius: var(--radius-full); background: var(--accent); transition: width .3s cubic-bezier(.2,.8,.2,1); }

/* ── Skeleton ─────────────────────────────── */
.bl-skel { display: block; border-radius: var(--radius-sm); background: var(--paper-sunken); position: relative; overflow: hidden; }
.bl-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--crema-fill), transparent); animation: bl-shimmer 1.4s ease infinite; }
@keyframes bl-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .bl-skel::after { animation: none; display: none; } }

/* ── Dialog ───────────────────────────────
   컴포넌트는 네이티브 <dialog class="bl-dialog">를 showModal()로 엽니다. 최상위 층에 뜨므로 크레마 안에서 열어도 갇히지 않고,
   뒤 화면은 자동으로 조작할 수 없게(inert) 되며, 열려 있는 동안 페이지 스크롤을 막습니다.
   CSS만 쓸 때는 <div class="bl-scrim"><div class="bl-dialog bl-crema-thick">…</div></div>도 그대로 됩니다.
   scrim은 어둡게만 하고 블러를 걸지 않습니다(다이얼로그 본체가 이미 블러라 예산을 아낍니다). */
.bl-scrim { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--space-4); background: var(--scrim); animation: bl-fade .2s ease; }
.bl-dialog { width: min(var(--bl-dialog-w), calc(100% - 2 * var(--space-4))); max-width: none; margin: auto; padding: var(--space-6); border-radius: var(--radius-xl); color: var(--ink);
  animation: bl-rise .26s cubic-bezier(.2,.8,.2,1); }
.bl-scrim > .bl-dialog { width: min(var(--bl-dialog-w), 100%); }
.bl-dialog::backdrop { background: var(--scrim); animation: bl-fade .2s ease; }
.bl-dialog:focus { outline: none; }
/* 2.1: 닫힐 때(data-closing) 가라앉으며 사라지고, 애니메이션이 끝난 뒤 close()됩니다 */
.bl-dialog[data-closing] { animation: bl-sink .2s ease forwards; }
.bl-dialog[data-closing]::backdrop { animation: bl-fade-out .2s ease forwards; }
html:has(dialog.bl-dialog[open]) { overflow: hidden; }
.bl-dialog-title { margin: 0 0 var(--space-2); font-size: var(--text-title-2-size); line-height: var(--text-title-2-line); font-weight: var(--text-title-2-weight); letter-spacing: var(--text-title-2-tracking); color: var(--ink); }
.bl-dialog-body { margin: 0 0 var(--space-6); font-size: var(--text-body-size); line-height: var(--text-body-line); color: var(--crema-ink-muted); }
.bl-dialog-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
@media (max-width: 767px) {
  .bl-scrim { place-items: end stretch; padding: 0; }
  .bl-dialog, .bl-scrim > .bl-dialog { width: 100%; margin: auto 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .bl-dialog-actions { flex-direction: column-reverse; } .bl-dialog-actions .bl-btn { width: 100%; }
}
@keyframes bl-fade { from { opacity: 0; } }
@keyframes bl-fade-out { to { opacity: 0; } }
@keyframes bl-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes bl-sink { to { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
  .bl-scrim, .bl-dialog, .bl-dialog::backdrop, .bl-sheet-modal, .bl-sheet-modal::backdrop, .bl-toaster-item { animation: bl-fade .15s ease; }
  .bl-dialog[data-closing], .bl-sheet-modal[data-closing], .bl-toaster-item[data-closing] { animation: bl-fade-out .15s ease forwards; }
  .bl-dialog[data-closing]::backdrop, .bl-sheet-modal[data-closing]::backdrop { animation: bl-fade-out .15s ease forwards; }
}

/* ── Table ─────────────────────────────── */
.bl-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--paper-raised); }
.bl-table { width: 100%; border-collapse: collapse; font-size: var(--text-label-size); line-height: var(--text-body-sm-line); color: var(--ink); }
.bl-table caption { padding: var(--space-4) var(--space-4) 0; text-align: left; font-size: var(--text-title-3-size); line-height: var(--text-title-3-line); font-weight: var(--text-title-3-weight); }
.bl-table th { padding: var(--space-3) var(--space-4); text-align: left; font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: 600; color: var(--ink-muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.bl-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.bl-table tr:last-child td { border-bottom: 0; }
@media (hover: hover) { .bl-table tbody tr:hover { background: var(--paper); } .bl-tip:hover .bl-tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); } }
.bl-table .bl-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Calendar ─────────────────────────────── */
.bl-cal { width: 320px; max-width: 100%; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--paper-raised); border: 1px solid var(--line); overflow-x: auto; }
.bl-cal-head { display: flex; align-items: center; margin-bottom: var(--space-2); }
.bl-cal-title { flex: 1; margin: 0; font-size: var(--text-body-size); line-height: 24px; font-weight: 600; text-align: center; }
.bl-cal-head .bl-icon-btn { width: 40px; height: 40px; }
.bl-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.bl-cal-dow { font-size: var(--text-caption-size); line-height: 32px; font-weight: 500; color: var(--ink-muted); }
.bl-cal-day { aspect-ratio: 1; min-height: 40px; border: 0; border-radius: var(--radius-full); background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-label-size); color: var(--ink); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .bl-cal-day:hover { background: var(--paper-sunken); } }
.bl-cal-day[data-today="true"] { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.bl-cal-day[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; box-shadow: none; }
.bl-cal-day:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.bl-cal-day:disabled, .bl-cal-day[aria-disabled="true"] { color: var(--ink-subtle); cursor: not-allowed; background: none; text-decoration: line-through; }

/* ── EmptyState ─────────────────────────────── */
.bl-empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-12) var(--space-6); text-align: center; }
.bl-empty-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--space-2); border-radius: var(--radius-full); background: var(--paper-sunken); color: var(--ink-muted); }
.bl-empty-icon svg { width: 28px; height: 28px; }
.bl-empty-title { margin: 0; font-size: var(--text-title-3-size); line-height: var(--text-title-3-line); font-weight: var(--text-title-3-weight); color: var(--ink); }
.bl-empty-body { margin: 0 0 var(--space-3); max-width: 320px; font-size: var(--text-label-size); line-height: 24px; color: var(--ink-muted); }

/* ── PalettePicker ───────────────────────────────
   각 버튼에 data-palette가 붙어 있어, 버튼 자신이 그 팔레트의 accent로 칠해집니다. */
.bl-palettes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bl-palette { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4) 0 var(--space-2);
  border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--paper-raised); color: var(--ink); cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-body-sm-size); line-height: var(--text-label-line); font-weight: 500; }
.bl-palette-dot { display: grid; place-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--accent); box-shadow: inset 0 0 0 4px var(--deco); }
/* 고른 팔레트: 색 + 굵기 + 동그라미 안의 체크 표시 */
.bl-palette[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.bl-palette[aria-checked="true"] .bl-palette-dot { box-shadow: none; }
.bl-palette[aria-checked="true"] .bl-palette-dot::after { content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bl-palette:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bl-palettes .bl-palette:has(.bl-palette-dot:only-child) { padding: 0 var(--space-2); width: 40px; justify-content: center; }

/* ── 반응형: 컨테이너 ───────────────────────────────
   단계별 --grid-columns / --grid-gutter / --grid-margin은 tokens.css에 있습니다.
   xs 0–599 · sm 600–767 · md 768–1119 · lg 1120–1439 · xl 1440+ */
.bl-container { width: 100%; max-width: calc(var(--content-max) + 2 * var(--grid-margin)); margin-inline: auto; padding-inline: var(--grid-margin); }
.bl-container-prose { max-width: calc(var(--prose-max) + 2 * var(--grid-margin)); }
.bl-container-full { max-width: none; }

/* ── 반응형: 12열 그리드 (xs 4열 · sm·md 8열 · lg·xl 12열) ── */
.bl-grid { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); gap: var(--grid-gutter); }
.bl-span-full { grid-column: 1 / -1; }

/* ── 반응형: 자동 그리드 (Grid 컴포넌트) ── */
.bl-autogrid { display: grid; gap: var(--bl-grid-gap, var(--grid-gutter)); grid-template-columns: repeat(var(--bl-cols-xs, 1), minmax(0, 1fr)); }
@media (min-width: 600px) { .bl-autogrid { grid-template-columns: repeat(var(--bl-cols-sm, var(--bl-cols-xs, 1)), minmax(0, 1fr)); } }
@media (min-width: 768px) { .bl-autogrid { grid-template-columns: repeat(var(--bl-cols-md, var(--bl-cols-sm, 1)), minmax(0, 1fr)); } }
@media (min-width: 1120px) { .bl-autogrid { grid-template-columns: repeat(var(--bl-cols-lg, var(--bl-cols-md, 1)), minmax(0, 1fr)); } }
@media (min-width: 1440px) { .bl-autogrid { grid-template-columns: repeat(var(--bl-cols-xl, var(--bl-cols-lg, 1)), minmax(0, 1fr)); } }

/* ── 반응형: 컴포넌트 규칙 ── */
@media (max-width: 1119px) {
  .bl-navbar-links { display: none; }               /* lg 미만: 링크 대신 TabBar(또는 메뉴 버튼). TabBar는 lg부터 숨습니다 */
}
@media (max-width: 767px) {
  .bl-table { font-size: var(--text-body-sm-size); }
  .bl-table th, .bl-table td { padding: var(--space-2) var(--space-3); }
}
@media (min-width: 768px) {
  .bl-sheet { border-radius: var(--radius-xl); }    /* md 이상: 시트는 가운데 카드처럼 띄웁니다 (위치는 소비자 몫) */
}

/* ── 터치 기기: 누르는 영역 최소 44px ──
   보이는 크기는 그대로 두고, 보이지 않는 ::before로 누르는 영역만 44px까지 넓힙니다.
   달력 날짜는 칸을 44px 이상으로 키웁니다(달력 폭 348px 이상일 때. 더 좁은 화면에서는 칸이 그만큼 작아집니다). */
@media (pointer: coarse) {
  .bl-chip, .bl-palette { height: 40px; }
  .bl-seg-item { height: 38px; }
  .bl-btn-md, .bl-chip, .bl-palette, .bl-seg-item, .bl-switch, .bl-navbar-link, .bl-icon-btn, .bl-toast .bl-btn { position: relative; }
  .bl-btn-md::before, .bl-chip::before, .bl-palette::before, .bl-seg-item::before, .bl-switch::before, .bl-navbar-link::before, .bl-icon-btn::before, .bl-toast .bl-btn::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--touch-min)); height: max(100%, var(--touch-min)); transform: translate(-50%, -50%);
  }
  .bl-cal { width: 348px; padding: var(--space-3); }
  /* 7 × 44px 날짜 칸을 유지합니다. 좁은 컨테이너에서는 카드 안에서 가로로 스크롤합니다. */
  .bl-cal-grid { min-width: 320px; }
  .bl-cal-day { min-height: 44px; }
}

/* ── 접근성: 화면에는 숨기고 스크린리더에는 읽히게 ── */
.bl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── 반응형: 낮은 화면(가로 모드 폰)에서도 시트·다이얼로그가 넘치지 않게 ── */
.bl-dialog, .bl-sheet { max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; }


/* ── Accordion.css ── */
.bl-acc { margin: 0; padding: 0; border-radius: var(--radius-lg); background: var(--paper-raised); border: 1px solid var(--line); overflow: hidden; }
.bl-acc-item + .bl-acc-item { border-top: 1px solid var(--line); }
.bl-acc-summary { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-5); cursor: pointer; list-style: none; color: var(--ink);
  font-family: var(--font-sans); font-size: var(--text-title-3-size); line-height: var(--text-title-3-line); font-weight: var(--text-title-3-weight); -webkit-tap-highlight-color: transparent; }
.bl-acc-summary::-webkit-details-marker { display: none; }
.bl-acc-summary::marker { content: ""; }
.bl-acc-summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.bl-acc-icon { flex: none; width: 22px; height: 22px; color: var(--ink-muted); }
.bl-acc-title { flex: 1; min-width: 0; }
.bl-acc-chevron { flex: none; width: 20px; height: 20px; color: var(--ink-subtle); transition: transform .18s ease; }
.bl-acc-item[open] > .bl-acc-summary .bl-acc-chevron { transform: rotate(90deg); color: var(--ink); }
.bl-acc-body { padding: 0 var(--space-5) var(--space-5); color: var(--ink-muted); font-size: var(--text-body-size); line-height: var(--text-body-line); }
.bl-acc-body > :first-child { margin-top: 0; }
.bl-acc-body > :last-child { margin-bottom: 0; }
@media (hover: hover) { .bl-acc-summary:hover { background: var(--paper-sunken); } }
/* 터치: 제목 줄이 56px라 44px 기준을 넘지만, 좁은 화면에선 좌우 여백을 줄여 글자 자리를 넓힙니다 */
@media (pointer: coarse) { .bl-acc-summary { min-height: max(56px, var(--touch-min)); } }
@media (max-width: 599px) { .bl-acc-summary { padding-left: var(--space-4); padding-right: var(--space-4); } .bl-acc-body { padding-left: var(--space-4); padding-right: var(--space-4); } }
@media (prefers-reduced-motion: reduce) { .bl-acc-chevron { transition: none; } }
@media (forced-colors: active) {
  .bl-acc { border-color: CanvasText; }
  .bl-acc-item + .bl-acc-item { border-top-color: CanvasText; }
  .bl-acc-item[open] > .bl-acc-summary { outline: 2px solid Highlight; outline-offset: -2px; }
  .bl-acc-item[open] > .bl-acc-summary .bl-acc-title { text-decoration: underline 2px; text-underline-offset: 3px; }
}

/* ── Alert.css ── */
.bl-alert {
  --bl-alert-tone: var(--info);
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line);
  font-family: var(--font-sans); font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line); word-break: keep-all;
}
.bl-alert-icon { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--bl-alert-tone); }
.bl-alert-body { flex: 1; min-width: 0; }
.bl-alert-title { margin: 0; font-size: var(--text-body-size); line-height: var(--text-body-line); font-weight: 700; color: var(--bl-alert-tone); }
.bl-alert-text { color: var(--ink); }
.bl-alert-title + .bl-alert-text { margin-top: var(--space-1); }
.bl-alert-text > p { margin: 0; }
.bl-alert-text > p + p { margin-top: var(--space-2); }
.bl-alert-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
/* 닫기: plain 아이콘 버튼 40px. 띠의 안쪽 여백만큼 당겨 글줄과 가운데를 맞춥니다 */
.bl-alert-close.bl-icon-btn { width: 40px; height: 40px; flex: none; margin: calc(var(--space-2) * -1) calc(var(--space-3) * -1) calc(var(--space-2) * -1) 0; color: var(--ink-muted); }
.bl-alert-close.bl-icon-btn svg { width: 20px; height: 20px; }
/* 톤: 바탕은 -soft, 아이콘·제목은 톤색. info는 -soft 토큰이 없어 paper-raised에 info를 조금 섞습니다 */
.bl-alert-positive { --bl-alert-tone: var(--positive); background: var(--positive-soft); }
.bl-alert-warning { --bl-alert-tone: var(--warning); background: var(--warning-soft); }
.bl-alert-danger { --bl-alert-tone: var(--danger); background: var(--danger-soft); }
@supports (color: color-mix(in srgb, red, blue)) {
  .bl-alert { border-color: color-mix(in srgb, var(--bl-alert-tone) 24%, transparent); }
  .bl-alert-info { background: color-mix(in srgb, var(--info) 10%, var(--paper-raised)); }
}
@media (pointer: coarse) {
  .bl-alert-close.bl-icon-btn { width: 44px; height: 44px; margin-right: calc(var(--space-4) * -1); }
}
@media (forced-colors: active) {
  .bl-alert { border: 1px solid CanvasText; }
  .bl-alert[role="alert"] { border-width: 2px; }
}
@media (prefers-contrast: more) {
  .bl-alert { border-color: var(--bl-alert-tone); }
}

/* ── Drawer.css ── */
.bl-drawer { --bl-drawer-width: 320px; box-sizing: border-box; width: min(var(--bl-drawer-width), 85vw); max-width: none; color: var(--ink); font-family: var(--font-sans); }
dialog.bl-drawer { position: fixed; inset: 0 auto 0 0; margin: 0; height: 100dvh; max-height: none; padding: 0; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0; border-left: 0; }
dialog.bl-drawer[data-side="right"] { inset: 0 0 0 auto; border-radius: var(--radius-xl) 0 0 var(--radius-xl); border-left: 1px solid var(--crema-stroke); border-right: 0; }
dialog.bl-drawer[open] { display: flex; flex-direction: column; }
dialog.bl-drawer:focus { outline: none; }
html:has(dialog.bl-drawer[open]) { overflow: hidden; }
dialog.bl-drawer::backdrop { background: var(--scrim); animation: bl-fade .26s ease; }
dialog.bl-drawer[data-closing]::backdrop { animation: bl-drawer-fade-out .26s ease forwards; }
/* 들어올 때 bl-slide-*, 닫힐 때는 같은 길을 되돌아 나갑니다(data-closing). 블러 반경은 움직이지 않고 transform만 */
dialog.bl-drawer[data-side="left"][open] { animation: bl-slide-left .26s cubic-bezier(.2,.8,.2,1); }
dialog.bl-drawer[data-side="right"][open] { animation: bl-slide-right .26s cubic-bezier(.2,.8,.2,1); }
dialog.bl-drawer[data-side="left"][data-closing] { animation: bl-slide-left-out .26s cubic-bezier(.2,.8,.2,1) forwards; }
dialog.bl-drawer[data-side="right"][data-closing] { animation: bl-slide-right-out .26s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes bl-slide-left { from { transform: translateX(-100%); } }
@keyframes bl-slide-right { from { transform: translateX(100%); } }
@keyframes bl-slide-left-out { to { transform: translateX(-100%); } }
@keyframes bl-slide-right-out { to { transform: translateX(100%); } }
@keyframes bl-drawer-fade-out { to { opacity: 0; } }
.bl-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2) var(--space-6); }
.bl-drawer-title { margin: 0; min-width: 0; font-size: var(--text-title-2-size); line-height: var(--text-title-2-line); font-weight: var(--text-title-2-weight); letter-spacing: var(--text-title-2-tracking); color: var(--ink); }
.bl-drawer-close { flex: none; margin-left: auto; }
.bl-drawer-body { flex: 1; min-height: 0; padding: var(--space-2) var(--space-6) var(--space-6); }
.bl-drawer-body > .bl-list { background: transparent; border: 0; }   /* 크레마 위에 리스트를 바로 올릴 때 */
/* 데스크톱 사이드바: 불투명한 paper-raised, 블러·scrim 없음. 배치는 소비자의 flex·grid 안에서 */
.bl-drawer-persistent { display: flex; flex-direction: column; flex: none; align-self: stretch; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.bl-drawer-persistent .bl-drawer-head { padding-right: var(--space-6); }
@media (prefers-reduced-motion: reduce) {
  dialog.bl-drawer[data-side][open] { animation: bl-fade .15s ease; }
  dialog.bl-drawer::backdrop { animation: bl-fade .15s ease; }
  dialog.bl-drawer[data-side][data-closing] { animation: bl-drawer-fade-out .15s ease forwards; }
  dialog.bl-drawer[data-closing]::backdrop { animation: bl-drawer-fade-out .15s ease forwards; }
}
@media (forced-colors: active) {
  .bl-drawer-persistent { border: 1px solid CanvasText; }
}

/* ── Link.css ── */
.bl-link {
  color: var(--accent-ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  text-decoration-skip-ink: auto; border-radius: var(--radius-sm); cursor: pointer; word-break: keep-all;
}
.bl-link-muted { color: var(--ink-muted); }
.bl-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bl-link:active { opacity: .8; }
/* 새 창 표시: 오른쪽 꺾쇠를 -45도 돌려 바깥 위를 가리키는 작은 화살표 */
.bl-link-ext { display: inline-block; width: .75em; height: .75em; vertical-align: 0; margin: 0 -.1em 0 .05em; transform: rotate(-45deg); }
@media (hover: hover) {
  .bl-link:hover { text-decoration-thickness: 2.5px; }
  .bl-link-muted:hover { color: var(--ink); }
}
@media (forced-colors: active) {
  .bl-link { color: LinkText; }
  .bl-link-muted { color: LinkText; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-link { transition: none; }
}

/* ── Menu.css ── */
.bl-menu-pop { min-width: 220px; padding: var(--space-2); }
.bl-menu { display: flex; flex-direction: column; }
.bl-menu-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--touch-min); margin: 0; padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-body-size); line-height: var(--text-body-line); font-weight: 500; -webkit-appearance: none; appearance: none; }
.bl-menu-item:hover { background: var(--paper-sunken); }
@supports (color: color-mix(in srgb, red, blue)) { .bl-menu-item:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); } }
.bl-menu-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.bl-menu-item > svg { width: 20px; height: 20px; flex: none; color: var(--crema-ink-muted); }
.bl-menu-label { flex: 1; min-width: 0; }
.bl-menu-item[data-danger] { color: var(--danger); }
.bl-menu-item[data-danger] > svg { color: var(--danger); }
.bl-menu-item[aria-disabled="true"] { color: var(--crema-ink-muted); cursor: default; }
.bl-menu-item[aria-disabled="true"]:hover { background: transparent; }
.bl-menu-item[aria-disabled="true"] > svg { color: var(--crema-ink-muted); }
.bl-menu-sep { height: 1px; margin: var(--space-2) var(--space-3); background: var(--line); }
@media (forced-colors: active) {
  .bl-menu-item:hover { outline: 1px solid Highlight; outline-offset: -1px; }
  .bl-menu-item[aria-disabled="true"] { color: GrayText; }
  .bl-menu-sep { background: CanvasText; }
}

/* ── Pagination.css ── */
.bl-pagination { display: flex; align-items: center; gap: var(--space-1); font-family: var(--font-sans); }
.bl-pagination-list { display: flex; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.bl-pagination .bl-icon-btn { width: 40px; height: 40px; }
.bl-pagination .bl-icon-btn:disabled { color: var(--ink-subtle); cursor: not-allowed; }
.bl-page {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 var(--space-3);
  border-radius: var(--radius-full); border: 1px solid transparent; background: transparent; color: var(--ink); cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-label-size); line-height: var(--text-label-line); font-weight: 500; font-variant-numeric: tabular-nums;
  transition: background-color .12s ease;
}
.bl-page[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; border-color: var(--accent); cursor: default; }
.bl-page:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bl-page-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 40px; color: var(--ink-subtle); font-size: var(--text-label-size); user-select: none; }
@supports (color: color-mix(in srgb, red, blue)) {
  .bl-page[aria-current="page"] { border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
}
@media (hover: hover) {
  .bl-page:not([aria-current="page"]):hover { background: var(--paper-sunken); }
}
/* 좁은 화면(xs): 1 … 9 10 11 … 20이 한 줄에 들어가도록 캡슐을 조금 좁힙니다(350px 폭 기준) */
@media (max-width: 599px) {
  .bl-pagination, .bl-pagination-list { gap: 2px; }
  .bl-page { min-width: 36px; padding: 0 var(--space-2); }
  .bl-page-gap { min-width: 20px; }
}
/* 터치 기기: 높이는 44px로 키우고, 폭은 보이는 크기를 두고 보이지 않는 ::before로 누르는 영역만 44px까지 넓힙니다(아이콘 버튼은 bundle.css의 같은 규칙) */
@media (pointer: coarse) {
  .bl-page, .bl-page-gap { height: 44px; }
  .bl-page { position: relative; }
  .bl-page::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--touch-min)); height: max(100%, var(--touch-min)); transform: translate(-50%, -50%); }
}
@media (forced-colors: active) {
  .bl-page[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .bl-pagination .bl-icon-btn:disabled { color: GrayText; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-page { transition: none; }
}

/* ── Popover.css ── */
.bl-popover-anchor { display: contents; }
.bl-popover { display: none; position: fixed; inset: auto; margin: 0; min-width: 200px; max-width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 16px);
  padding: var(--space-4); border-radius: var(--radius-lg); overflow: auto; overscroll-behavior: contain; color: var(--ink);
  font-family: var(--font-sans); font-size: var(--text-body-size); line-height: var(--text-body-line); }
.bl-popover:popover-open { display: block; animation: bl-rise .2s cubic-bezier(.2,.8,.2,1); }
.bl-popover[data-open] { display: block; animation: bl-rise .2s cubic-bezier(.2,.8,.2,1); }   /* popover API가 없는 브라우저 */
.bl-popover:focus { outline: none; }
.bl-popover-title { margin: 0 0 var(--space-2); font-size: var(--text-label-size); line-height: var(--text-label-line); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-tracking); color: var(--ink); }
.bl-popover-body { margin: 0; color: var(--crema-ink-muted); }
.bl-popover-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-4); }
@media (prefers-reduced-motion: reduce) {
  .bl-popover:popover-open { animation: bl-fade .15s ease; }
  .bl-popover[data-open] { animation: bl-fade .15s ease; }
}

/* ── Tabs.css ── */
.bl-tabs { display: block; min-width: 0; contain: inline-size; }   /* 긴 탭 줄이 부모(grid·flex 칸)를 넓히지 않게: 가로 크기는 부모가 정하고 안에서 스크롤 */
.bl-tabs-list { display: flex; gap: var(--space-1); max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.bl-tabs-list::-webkit-scrollbar { display: none; }
.bl-tabs-tab { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4);
  border: 0; background: transparent; cursor: pointer; white-space: nowrap; color: var(--ink-muted);
  font-family: var(--font-sans); font-size: var(--text-body-size); line-height: var(--text-body-line); font-weight: 500; }
.bl-tabs-tab svg { width: 18px; height: 18px; }
.bl-tabs-tab:disabled { color: var(--ink-subtle); cursor: not-allowed; }
.bl-tabs-tab[aria-selected="true"] { color: var(--accent-ink); font-weight: 700; }
.bl-tabs-tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-sm); }
/* line: 목록 아래 hairline, 지금 탭 아래 2px 강조색 밑줄이 hairline 위에 겹칩니다 */
.bl-tabs-line .bl-tabs-list { border-bottom: 1px solid var(--line); }
.bl-tabs-line .bl-tabs-tab { margin-bottom: -1px; border-bottom: 2px solid transparent; }
.bl-tabs-line .bl-tabs-tab[aria-selected="true"] { border-bottom-color: var(--accent); }
/* pill: .bl-seg와 같은 캡슐. 지금 탭은 불투명한 accent-soft */
.bl-tabs-pill .bl-tabs-list { gap: 2px; width: max-content; padding: 3px; border-radius: var(--radius-full); background: var(--paper-sunken); }
.bl-tabs-pill .bl-tabs-tab { min-height: 34px; border-radius: var(--radius-full); font-size: var(--text-body-sm-size); line-height: var(--text-label-line); font-weight: 600; transition: background-color .15s ease; }
.bl-tabs-pill .bl-tabs-tab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.bl-tabs-pill .bl-tabs-tab:focus-visible { outline-offset: 1px; border-radius: var(--radius-full); }
.bl-tabs-panel { padding-top: var(--space-4); color: var(--ink); font-size: var(--text-body-size); line-height: var(--text-body-line); }
.bl-tabs-panel[hidden] { display: none; }
.bl-tabs-panel:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (pointer: coarse) {
  .bl-tabs-tab { min-height: var(--touch-min); }
  /* pill 캡슐은 38px로 두고 누르는 영역만 44px로 넓힙니다(.bl-seg-item과 같은 방식) */
  .bl-tabs-pill .bl-tabs-tab { min-height: 38px; position: relative; }
  .bl-tabs-pill .bl-tabs-tab::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--touch-min)); height: max(100%, var(--touch-min)); transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) { .bl-tabs-pill .bl-tabs-tab { transition: none; } }
@media (forced-colors: active) {
  .bl-tabs-line .bl-tabs-list { border-bottom-color: CanvasText; }
  .bl-tabs-tab[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .bl-tabs-line .bl-tabs-tab[aria-selected="true"] { border-bottom-color: Highlight; }
  .bl-tabs-tab:disabled { color: GrayText; }
}

/* ── Textarea.css ── */
.bl-field-input.bl-textarea {
  height: auto; min-height: calc(var(--text-body-line) * 2 + var(--space-3) * 2 + 2px);
  padding: var(--space-3) var(--space-4); box-sizing: border-box; resize: vertical; overflow-y: auto;
  font-family: var(--font-sans); font-size: var(--text-body-size); line-height: var(--text-body-line); word-break: keep-all;
}
/* autoResize: 높이는 JS가 내용에 맞추므로 손잡이를 숨깁니다 */
.bl-field-input.bl-textarea-auto { resize: none; overflow-y: hidden; }
.bl-field-input.bl-textarea:disabled { background: var(--paper-sunken); color: var(--ink-subtle); cursor: not-allowed; resize: none; }
.bl-field-input.bl-textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (forced-colors: active) {
  .bl-field[data-invalid="true"] .bl-textarea { border-style: dashed; }
}

/* ── 접근성: 투명도 줄이기 ───────────────────────────────
   파일 끝에 두고 선택자 명시도를 크레마 규칙과 맞춰, 크레마 버튼·아이콘 버튼·데스크톱 모드까지 모두 불투명하게 바꿉니다. */
@media (prefers-reduced-transparency: reduce) {
  .bl-crema, .bl-crema-thick, .bl-btn-crema, .bl-icon-btn:not(.bl-icon-btn-plain), .bl-crema-lite,
  [data-crema="rich"] .bl-crema, [data-crema="rich"] .bl-crema-thick, [data-crema="rich"] .bl-btn-crema, [data-crema="rich"] .bl-icon-btn:not(.bl-icon-btn-plain),
  .bl-crema .bl-icon-btn:not(.bl-icon-btn-plain), .bl-crema-thick .bl-icon-btn:not(.bl-icon-btn-plain), .bl-crema-lite .bl-icon-btn:not(.bl-icon-btn-plain) {
    background-color: var(--paper-raised); background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ── 접근성: 동작 줄이기 ── */
@media (prefers-reduced-motion: reduce) {
  .bl-btn, .bl-switch, .bl-switch::after, .bl-progress-fill, .bl-seg-item, .bl-check input, .bl-tooltip { transition: none; }
  .bl-btn:active { transform: none; }
}

/* ── 접근성: 고대비(강제 색상) 모드 ───────────────────────────────
   Windows 고대비처럼 색을 시스템 색으로 바꾸는 모드에서는 배경색과 그림자가 사라집니다.
   선택·켜짐 상태를 시스템 색(Highlight 등)으로 다시 그려 보이게 합니다. */
@media (forced-colors: active) {
  .bl-crema, .bl-crema-thick, .bl-crema-lite, .bl-btn-crema, .bl-icon-btn:not(.bl-icon-btn-plain) { border: 1px solid CanvasText; }
  .bl-check input { forced-color-adjust: none; background: Canvas; border-color: CanvasText; }
  .bl-check input:checked { background: Highlight; border-color: Highlight; }
  .bl-check input[type="checkbox"]:checked::after { border-color: HighlightText; }
  .bl-check input[type="radio"]:checked { box-shadow: inset 0 0 0 5px Canvas; }
  .bl-switch { forced-color-adjust: none; background: Canvas; border-color: CanvasText; }
  .bl-switch::after { background: CanvasText; box-shadow: none; }
  .bl-switch[aria-checked="true"] { background: Highlight; border-color: Highlight; }
  .bl-switch[aria-checked="true"]::after { background: HighlightText; }
  .bl-seg-item[aria-checked="true"], .bl-tab[aria-current="page"], .bl-tab[aria-selected="true"], .bl-navbar-link[aria-current="page"],
  .bl-chip[aria-pressed="true"], .bl-palette[aria-checked="true"], .bl-icon-btn[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .bl-cal-day[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .bl-cal-day[data-today="true"] { outline: 1px solid CanvasText; outline-offset: -2px; }
  .bl-progress-track { border: 1px solid CanvasText; }
  .bl-progress-fill { forced-color-adjust: none; background: Highlight; }
  .bl-skel { border: 1px solid GrayText; }
}

/* ── 접근성: 대비 높이기 ── 크레마를 불투명하게, 구분선을 진하게 */
@media (prefers-contrast: more) {
  .bl-crema, .bl-crema-thick, .bl-btn-crema, .bl-icon-btn:not(.bl-icon-btn-plain), .bl-crema-lite { background-color: var(--paper-raised); background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--line-strong); }
  .bl-card, .bl-list, .bl-table-wrap, .bl-cal, .bl-field-input { border-color: var(--line-strong); }
}

/* ── 생성: 그리드 칸 (xs는 4열이므로 .bl-span-1~4, 단계별은 .bl-span-md-6 처럼) ── */
.bl-span-1 { grid-column: span 1 / span 1; }
.bl-span-2 { grid-column: span 2 / span 2; }
.bl-span-3 { grid-column: span 3 / span 3; }
.bl-span-4 { grid-column: span 4 / span 4; }
.bl-span-5 { grid-column: span 5 / span 5; }
.bl-span-6 { grid-column: span 6 / span 6; }
.bl-span-7 { grid-column: span 7 / span 7; }
.bl-span-8 { grid-column: span 8 / span 8; }
.bl-span-9 { grid-column: span 9 / span 9; }
.bl-span-10 { grid-column: span 10 / span 10; }
.bl-span-11 { grid-column: span 11 / span 11; }
.bl-span-12 { grid-column: span 12 / span 12; }
@media (min-width: 600px) {
  .bl-span-sm-1 { grid-column: span 1 / span 1; }
  .bl-span-sm-2 { grid-column: span 2 / span 2; }
  .bl-span-sm-3 { grid-column: span 3 / span 3; }
  .bl-span-sm-4 { grid-column: span 4 / span 4; }
  .bl-span-sm-5 { grid-column: span 5 / span 5; }
  .bl-span-sm-6 { grid-column: span 6 / span 6; }
  .bl-span-sm-7 { grid-column: span 7 / span 7; }
  .bl-span-sm-8 { grid-column: span 8 / span 8; }
  .bl-span-sm-9 { grid-column: span 9 / span 9; }
  .bl-span-sm-10 { grid-column: span 10 / span 10; }
  .bl-span-sm-11 { grid-column: span 11 / span 11; }
  .bl-span-sm-12 { grid-column: span 12 / span 12; }
  .bl-span-sm-full { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  .bl-span-md-1 { grid-column: span 1 / span 1; }
  .bl-span-md-2 { grid-column: span 2 / span 2; }
  .bl-span-md-3 { grid-column: span 3 / span 3; }
  .bl-span-md-4 { grid-column: span 4 / span 4; }
  .bl-span-md-5 { grid-column: span 5 / span 5; }
  .bl-span-md-6 { grid-column: span 6 / span 6; }
  .bl-span-md-7 { grid-column: span 7 / span 7; }
  .bl-span-md-8 { grid-column: span 8 / span 8; }
  .bl-span-md-9 { grid-column: span 9 / span 9; }
  .bl-span-md-10 { grid-column: span 10 / span 10; }
  .bl-span-md-11 { grid-column: span 11 / span 11; }
  .bl-span-md-12 { grid-column: span 12 / span 12; }
  .bl-span-md-full { grid-column: 1 / -1; }
}
@media (min-width: 1120px) {
  .bl-span-lg-1 { grid-column: span 1 / span 1; }
  .bl-span-lg-2 { grid-column: span 2 / span 2; }
  .bl-span-lg-3 { grid-column: span 3 / span 3; }
  .bl-span-lg-4 { grid-column: span 4 / span 4; }
  .bl-span-lg-5 { grid-column: span 5 / span 5; }
  .bl-span-lg-6 { grid-column: span 6 / span 6; }
  .bl-span-lg-7 { grid-column: span 7 / span 7; }
  .bl-span-lg-8 { grid-column: span 8 / span 8; }
  .bl-span-lg-9 { grid-column: span 9 / span 9; }
  .bl-span-lg-10 { grid-column: span 10 / span 10; }
  .bl-span-lg-11 { grid-column: span 11 / span 11; }
  .bl-span-lg-12 { grid-column: span 12 / span 12; }
  .bl-span-lg-full { grid-column: 1 / -1; }
}
@media (min-width: 1440px) {
  .bl-span-xl-1 { grid-column: span 1 / span 1; }
  .bl-span-xl-2 { grid-column: span 2 / span 2; }
  .bl-span-xl-3 { grid-column: span 3 / span 3; }
  .bl-span-xl-4 { grid-column: span 4 / span 4; }
  .bl-span-xl-5 { grid-column: span 5 / span 5; }
  .bl-span-xl-6 { grid-column: span 6 / span 6; }
  .bl-span-xl-7 { grid-column: span 7 / span 7; }
  .bl-span-xl-8 { grid-column: span 8 / span 8; }
  .bl-span-xl-9 { grid-column: span 9 / span 9; }
  .bl-span-xl-10 { grid-column: span 10 / span 10; }
  .bl-span-xl-11 { grid-column: span 11 / span 11; }
  .bl-span-xl-12 { grid-column: span 12 / span 12; }
  .bl-span-xl-full { grid-column: 1 / -1; }
}
/* ── 생성: 보이기·숨기기 (.bl-hide-from-lg = lg부터 숨김, .bl-hide-below-md = md 미만에서 숨김) ── */
@media (min-width: 600px) { .bl-hide-from-sm { display: none !important; } }
@media (max-width: 599px) { .bl-hide-below-sm { display: none !important; } }
@media (min-width: 768px) { .bl-hide-from-md { display: none !important; } }
@media (max-width: 767px) { .bl-hide-below-md { display: none !important; } }
@media (min-width: 1120px) { .bl-hide-from-lg { display: none !important; } }
@media (max-width: 1119px) { .bl-hide-below-lg { display: none !important; } }
@media (min-width: 1440px) { .bl-hide-from-xl { display: none !important; } }
@media (max-width: 1439px) { .bl-hide-below-xl { display: none !important; } }
}