/* 디자인 버전 2026-09-11 */
/* ------------------------------------------------------------------
   셸(헤더 · 푸터 · 페이지헤더 · 목록)만 쓰는 기본형.

   블록의 타이포·버튼·색은 전부 catalog-base.css 가 갖는다.
   여기 있는 건 .bk 바깥, 즉 우리가 만든 셸 부분뿐이다.
   둘을 섞지 않는 이유: 카탈로그는 재생성되는 파일이라 우리 것이 섞이면 날아간다.
   ------------------------------------------------------------------ */

:root {
  --brand: #1a5cff;
  --brand-ink: #ffffff;
  --radius: 12px;

  --font-heading: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;

  /* 밴드 기본 여백. 조립 규칙 R1~R7 이 여기에 배수를 곱한다. */
  --band-pad: 96px;

  --container: 1140px;
  --gutter: 46px;

  --shell-ink: #14161a;
  --shell-ink-soft: #3f444d;
  /* 목록·게시글 본문·페이지 머리글이 쓰던 --ink-soft 가 어디에도 정의돼 있지 않았다 — 우연히 상속된 색으로 나갔다(2026-10-21 형 지적 "오른쪽 내용글 안보인다") */
  --ink-soft: #3a3f48;
  --shell-line: rgba(20, 22, 26, 0.12);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--shell-ink);
  background: #fff;
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

/* 셸 전용 컨테이너. 블록은 카탈로그의 .in 을 쓴다. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/*
 * 카탈로그가 `.bk *{margin:0}` 으로 모든 자손의 margin 을 지운다.
 * 헤더·푸터는 `.bk` 안에 있어서 위의 `margin-inline:auto` 가 그 한 줄에 먹혀
 * **가운데로 안 붙고 왼쪽에 붙어 있었다**(2026-09-16 형이 가운데 로고 헤더에서 봄).
 */
.bk .container {
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 820px) {
  :root {
    --gutter: 22px;
  }
}

@media (max-width: 560px) {
  :root {
    --band-pad: 64px;
  }
}

/* 이 파일은 tools/extract-block-css.mjs 가 만듭니다. 직접 고치지 마세요. */
/* 카탈로그 아티팩트의 .bk 디자인 시스템 원본 — 75종 마크업이 전부 이 어휘 위에 쓰여 있습니다. */
/* 우리 쪽 조정(배경 모듈 연결, 밴드 여백 위임)은 catalog-bridge.css 에 있습니다. */

.bk{--ink:#101013; --ink-2:#3c3c44; --ink-3:#4d4d57;
  --line:#e7e7e3; --paper:#fff; --paper-2:#f7f7f4;
  --acc:#2f5d50; --acc-soft:#e9f1ed;
  font-family:Inter,"Noto Sans KR",system-ui,sans-serif;
  color:var(--ink);background:var(--paper);
  font-size:1.09375rem;line-height:1.68;letter-spacing:-.005em;position:relative;}
.bk *{box-sizing:border-box;margin:0}
.bk .in{max-width:1140px;margin:0 auto;padding-inline:46px}
.bk .eyebrow{font-size:0.875rem;
  letter-spacing:.02em;text-transform:uppercase;color:color-mix(in srgb,var(--acc) 72%,var(--ink));font-weight:600}
.bk h1{font-size:clamp(2.125rem,calc(5.4cqw * var(--fs-k, 1)),3.875rem);font-weight:700;letter-spacing:-.028em;line-height:1.18;text-wrap:balance}
.bk h3{font-size:clamp(1.0625rem,calc(1.7cqw * var(--fs-k, 1)),1.25rem);font-weight:600;letter-spacing:-.018em;line-height:1.34}
.bk p{line-height:1.72}
/* 우선순위 0 — 블록이 .s-xx-note{color} 처럼 한 클래스로 적은 글자색이 .bk p 에 져서 안 먹던 것을 먹게 한다(어두운 카드 위 보조 글자가 어두운 회색이었다, 2026-10-21) */
:where(.bk) p{color:var(--ink-2)}
.bk .lead{font-size:clamp(1.15625rem,calc(1.6cqw * var(--fs-k, 1)),1.3125rem);color:var(--ink-2);line-height:1.7;font-weight:400}
.bk .small{font-size:0.90625rem;color:var(--ink-3);line-height:1.62}
.bk a{color:inherit;text-decoration:none}
.bk .stack{display:flex;flex-direction:column}
.bk .g10{gap:10px}
.bk .g14{gap:14px}
.bk .g20{gap:20px}
.bk .g28{gap:28px}
.bk .row{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.bk .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 25px;border-radius:999px;
  font-size:1rem;font-weight:500;letter-spacing:-.01em;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);transition:.18s;white-space:nowrap}
.bk .btn:hover{opacity:.86}
.bk .btn.acc{background:var(--acc);border-color:var(--acc);color:#fff;color:oklch(from var(--acc) clamp(0,calc((l - .62) * -1000),1) 0 0)}
.bk .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.bk .btn.ghost:hover{background:var(--paper-2);opacity:1}
.bk .ar{font-size:1.0625rem;line-height:1}
.bk .ph{position:relative;overflow:hidden;background:#e9e9e4}
.bk .ph::after{content:attr(data-l);position:absolute;left:13px;bottom:11px;
  font-family:"JetBrains Mono",monospace;font-size:0.625rem;letter-spacing:.1em;
  color:rgba(255,255,255,.66);text-transform:uppercase}
.bk .p1{background:radial-gradient(120% 90% at 20% 10%,#5d7f72 0%,transparent 60%),linear-gradient(150deg,#406054,#1b332c)}
.bk .p2{background:radial-gradient(110% 80% at 75% 15%,#a9b0a4 0%,transparent 62%),linear-gradient(160deg,#6d7970,#333b36)}
.bk .p3{background:radial-gradient(120% 90% at 25% 20%,#cbb9a2 0%,transparent 60%),linear-gradient(140deg,#9b8871,#544838)}
.bk .p4{background:radial-gradient(110% 85% at 70% 10%,#93a3b2 0%,transparent 60%),linear-gradient(155deg,#5b6a78,#2c343c)}
.bk .p5{background:radial-gradient(120% 90% at 30% 15%,#d0a893 0%,transparent 58%),linear-gradient(145deg,#a2705a,#5a382c)}
.bk .p6{background:radial-gradient(115% 85% at 65% 18%,#8e7f9c 0%,transparent 60%),linear-gradient(150deg,#5f4f6b,#2f2637)}
.bk .p7{background:radial-gradient(120% 90% at 22% 12%,#8fa6c9 0%,transparent 58%),linear-gradient(148deg,#4a6390,#1f2a45)}
.bk .p8{background:radial-gradient(118% 88% at 72% 14%,#cfc49b 0%,transparent 60%),linear-gradient(152deg,#96895c,#4d4630)}
.t-forest{--acc:#2f5d50;--acc-soft:#e9f1ed}
.t-ink{--acc:#101013;--acc-soft:#f0f0ed}
.t-clay{--acc:#a94f35;--acc-soft:#f8ece7}
.t-cobalt{--acc:#1b3fae;--acc-soft:#e9edfa}
.t-plum{--acc:#6a2e4d;--acc-soft:#f6eaf0}
.t-sand{--acc:#7e6b3f;--acc-soft:#f3efe2}
.t-night{--paper:#0c0c0e;--paper-2:#141417;--ink:#f4f4f1;--ink-2:#c9c9d0;
          --ink-3:#aaaab3;--line:#26262b;--acc:#9be3c4;--acc-soft:#17251f}
@keyframes fill{
to{width:100%}
}
@keyframes slide{
to{transform:translateX(-50%)}
}
@container (max-width:820px){
.bk .in{padding-inline:22px}
}
.bk{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.bk .kdisp{font-family:"Black Han Sans","Noto Sans KR",sans-serif;font-weight:400}
.bk .kserif{font-family:"Noto Serif KR",Georgia,serif}
.bk .ldisp{font-family:Anton,Impact,sans-serif;font-weight:400}
.bk .lserif{font-family:"Instrument Serif",Georgia,serif;font-weight:400}
.bk .mono{font-family:"JetBrains Mono",monospace}
.h-q{--qink:#0a0a0a;--qsub:#5f6062;--qline:#e3e2dd;--qpaper:#fff;--qacc:#0a0a0a}
.h-q h1{letter-spacing:-.038em;line-height:1.05;font-weight:600;text-wrap:balance}
.h-q .qlead{font-size:clamp(1.09375rem,calc(1.62cqw * var(--fs-k, 1)),1.375rem);line-height:1.58;color:var(--qsub);
  font-weight:400;max-width:42ch;letter-spacing:-.011em}
.h-q .qlink{display:inline-flex;align-items:center;gap:7px;font-size:1.0625rem;font-weight:500;
  color:var(--qacc);letter-spacing:-.011em}
.h-q .qlink i{font-style:normal;font-size:1rem;transition:transform .22s}
.h-q .qlink:hover i{transform:translateX(4px)}
.h-q .qpill{display:inline-flex;align-items:center;justify-content:center;padding:13px 26px;
  border-radius:999px;background:var(--qink);color:#fff;font-size:1.03125rem;font-weight:500;letter-spacing:-.011em}
.h-q .qghost{display:inline-flex;align-items:center;justify-content:center;padding:13px 26px;
  border-radius:999px;border:1px solid var(--qline);color:var(--qink);font-size:1.03125rem;font-weight:500}
.filters{border-bottom:1px solid var(--sh-line);padding:16px 0 18px;margin-bottom:44px}
.frow{display:flex;align-items:baseline;gap:12px;margin-bottom:9px;flex-wrap:wrap}
.frow:last-of-type{margin-bottom:0}
.fkey{font-family:"JetBrains Mono",monospace;font-size:0.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:#5f5f68;width:52px;flex:none}
.fset{display:flex;gap:5px;flex-wrap:wrap}
.fset button{appearance:none;border:1px solid var(--sh-line);background:transparent;
  color:var(--sh-dim);font:400 14px/1 Inter,"Noto Sans KR",sans-serif;
  padding:6px 11px;border-radius:999px;cursor:pointer;transition:.14s}
.fset button:hover{color:var(--sh-fg);border-color:#3a3a42}
.fset button[aria-pressed="true"]{background:var(--sh-acc);border-color:var(--sh-acc);color:#0b0b0d;font-weight:500}
.fbar{display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--sh-line)}
.fcount{font-family:"JetBrains Mono",monospace;font-size:.875rem;color:var(--sh-dim)}
.fcount b{color:var(--sh-acc);font-weight:500}
.presets{display:flex;gap:6px;flex-wrap:wrap}
.presets button{appearance:none;border:1px dashed #34343c;background:transparent;
  color:var(--sh-dim);font:400 14px/1 Inter,"Noto Sans KR",sans-serif;
  padding:6px 12px;border-radius:6px;cursor:pointer;transition:.14s}
.presets button:hover{color:var(--sh-fg);border-color:var(--sh-acc);border-style:solid}
.tagrow{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 10px}
.tg{font-family:"JetBrains Mono",monospace;font-size:0.59375rem;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 7px;border-radius:3px;border:1px solid #26262c;color:#7a7a84}
.tg.tone-restraint{border-color:#2e5c4a;color:#8fd7bd}
.tg.tone-std{border-color:#2f4257;color:#8fb4d7}
.tg.tone-bold{border-color:#5c3c22;color:#e0a86a}
.tg.tone-exp{border-color:#5c2a3a;color:#e08aa0}
.item[hidden],h2.grp[hidden],.gnote[hidden]{display:none!important}
.empty{color:var(--sh-dim);font-size:0.9375rem;padding:44px 0;text-align:center;
  border:1px dashed #2a2a31;border-radius:12px}
@media (max-width:640px){
.fkey{width:100%}
}
@keyframes vdrift{
to{background-position:100% 100%}
}
.bk{--ink:#101013;--ink-2:#3c3c44;--ink-3:#4d4d57;--line:#e7e7e3;--line-2:#f2f2ef;
  --paper:#fff;--paper-2:#f7f7f4;--acc:#2f5d50;--acc-soft:#e9f1ed;--dark:#101013;
  font-family:Inter,"Noto Sans KR",system-ui,sans-serif;color:var(--ink);background:var(--paper);
  font-size:1.09375rem;line-height:1.68;letter-spacing:-.005em}
.bk *{box-sizing:border-box;margin:0}
.bk .in{max-width:1120px;margin:0 auto;padding-inline:46px}
.bk .sec{padding-block:96px}
.bk .sec-s{padding-block:72px}
.bk .eyebrow{font-size:0.875rem;letter-spacing:.02em;
  text-transform:uppercase;color:color-mix(in srgb,var(--acc) 72%,var(--ink));font-weight:600}
.bk h2{font-size:clamp(1.625rem,calc(3.4cqw * var(--fs-k, 1)),2.625rem);font-weight:650;letter-spacing:-.024em;line-height:1.26;text-wrap:balance}
.bk h3{font-size:clamp(1.09375rem,calc(1.7cqw * var(--fs-k, 1)),1.25rem);font-weight:600;letter-spacing:-.018em;line-height:1.34}
.bk h4{font-size:1.03125rem;font-weight:600;letter-spacing:-.014em}
.bk p{line-height:1.72}
/* 우선순위 0 — 블록이 .s-xx-note{color} 처럼 한 클래스로 적은 글자색이 .bk p 에 져서 안 먹던 것을 먹게 한다(어두운 카드 위 보조 글자가 어두운 회색이었다, 2026-10-21) */
:where(.bk) p{color:var(--ink-2)}
.bk .lead{font-size:clamp(1.15625rem,calc(1.6cqw * var(--fs-k, 1)),1.3125rem);color:var(--ink-2);line-height:1.7;font-weight:400}
.bk .small{font-size:0.90625rem;color:var(--ink-3);line-height:1.6}
.bk a{color:inherit;text-decoration:none}
.bk .stack{display:flex;flex-direction:column}
.bk .g8{gap:8px}
.bk .g12{gap:12px}
.bk .g16{gap:16px}
.bk .g24{gap:24px}
.bk .g40{gap:40px}
.bk .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.bk .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 25px;border-radius:999px;
  font-size:1rem;font-weight:500;background:var(--ink);color:var(--paper);border:1px solid var(--ink);transition:.18s}
.bk .btn:hover{opacity:.86}
.bk .btn.acc{background:var(--acc);border-color:var(--acc);color:#fff;color:oklch(from var(--acc) clamp(0,calc((l - .62) * -1000),1) 0 0)}
.bk .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.bk .lnk{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:600;color:color-mix(in srgb,var(--acc) 72%,var(--ink))}
.bk .lnk i{font-style:normal;transition:transform .2s}
.bk .lnk:hover i{transform:translateX(4px)}
.bk .ph{position:relative;overflow:hidden;background:#e9e9e4}
.bk .ph::after{content:attr(data-l);position:absolute;left:12px;bottom:10px;
  font-family:"JetBrains Mono",monospace;font-size:0.59375rem;letter-spacing:.1em;color:rgba(255,255,255,.62);text-transform:uppercase}
.bk .p1{background:radial-gradient(120% 90% at 20% 10%,#5d7f72,transparent 60%),linear-gradient(150deg,#406054,#1b332c)}
.bk .p2{background:radial-gradient(110% 80% at 75% 15%,#a9b0a4,transparent 62%),linear-gradient(160deg,#6d7970,#333b36)}
.bk .p3{background:radial-gradient(120% 90% at 25% 20%,#cbb9a2,transparent 60%),linear-gradient(140deg,#9b8871,#544838)}
.bk .p4{background:radial-gradient(110% 85% at 70% 10%,#93a3b2,transparent 60%),linear-gradient(155deg,#5b6a78,#2c343c)}
.bk .p5{background:radial-gradient(120% 90% at 30% 15%,#d0a893,transparent 58%),linear-gradient(145deg,#a2705a,#5a382c)}
.bk .p6{background:radial-gradient(115% 85% at 65% 18%,#8e7f9c,transparent 60%),linear-gradient(150deg,#5f4f6b,#2f2637)}
.bk .dark{background:var(--dark);color:#f4f4f1}
.bk .dark h2,.bk .dark h3{color:#f4f4f1}
.bk .dark p{color:#c4c4cc}
.t-clay{--acc:#a94f35;--acc-soft:#f8ece7}
.t-cobalt{--acc:#1b3fae;--acc-soft:#e9edfa}
.t-plum{--acc:#6a2e4d;--acc-soft:#f6eaf0}
.t-sand{--acc:#7e6b3f;--acc-soft:#f3efe2}
.t-warm{--paper:#f4f1ea;--paper-2:#ece8de;--ink:#191817;--ink-2:#403c36;--ink-3:#55493a;--line:#ddd7cb;--acc:#a15c3e}
@container (max-width:820px){
.bk .in{padding-inline:22px}
.bk .sec{padding-block:60px}
.bk .sec-s{padding-block:48px}
.scrollx{overflow-x:auto}
}
.t-navy{--acc:#1b4f8a;--acc-soft:#e8f0f9}
.bk .ic{width:46px;height:46px;border:1px solid var(--line);border-radius:12px;
  display:grid;place-items:center;color:var(--acc);flex:none;background:var(--paper)}
.bk .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.bk .bg{position:relative;isolation:isolate}
.bk .bg::before{content:"";position:absolute;inset:0;z-index:-1}
.bk .bg[data-contrast="dark"]{--ink:#f2f6fa;--ink-2:#c3d0de;--ink-3:#a6b6c8;
  --line:#22354f;--paper:transparent;--paper-2:rgba(255,255,255,.05)}
.bk .bg[data-contrast="dark"] h2,.bk .bg[data-contrast="dark"] h3,
.bk .bg[data-contrast="dark"] h4{color:#fff}
.bk .bg[data-contrast="dark"] .btn.ghost{color:#f2f6fa;border-color:#2b3f5c}
.bk .bg[data-contrast="dark"] .ic{background:rgba(255,255,255,.06);border-color:#2b3f5c}
.bg-paper::before{background:#fff}
.bg-tint::before{background:#f6f8fb}
.bg-warm::before{background:#f4f1ea}
.bg-ink::before{background:#0e1b2e}
.bg-night::before{background:#0b0b0d}
.bg-grid::before{background:#fff;
  background-image:repeating-linear-gradient(0deg,transparent 0 47px,#eceef2 47px 48px),
                   repeating-linear-gradient(90deg,transparent 0 47px,#eceef2 47px 48px)}
.bg-dots::before{background:#fbfbfd;
  background-image:radial-gradient(#dfe3ea 1.1px,transparent 1.2px);background-size:19px 19px}
.bg-aurora::before{background:#0a1220;
  background-image:radial-gradient(52% 48% at 18% 12%,rgba(64,110,220,.42),transparent 62%),
                   radial-gradient(46% 44% at 84% 26%,rgba(35,190,180,.30),transparent 64%),
                   radial-gradient(60% 50% at 50% 100%,rgba(120,60,190,.26),transparent 70%)}
.bg-mesh::before{background:#f7f5fb;
  background-image:radial-gradient(48% 44% at 12% 16%,rgba(120,150,255,.34),transparent 62%),
                   radial-gradient(44% 40% at 88% 20%,rgba(255,160,190,.30),transparent 64%),
                   radial-gradient(52% 46% at 60% 96%,rgba(150,235,215,.34),transparent 66%)}
.bg-photo::before{background:linear-gradient(150deg,#5b6a78,#232a32);}
.bg-photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to right,rgba(8,10,14,.9),rgba(8,10,14,.42) 62%,rgba(8,10,14,.18))}
.bgpick{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 10px}
.bgpick button{appearance:none;cursor:pointer;border:1px solid var(--sh-line);background:transparent;
  color:var(--sh-dim);border-radius:8px;padding:5px 5px 5px 6px;display:flex;align-items:center;gap:7px;
  font:400 14px/1 Inter,"Noto Sans KR",sans-serif;transition:.14s}
.bgpick button:hover{color:var(--sh-fg);border-color:#3a3a42}
.bgpick button[aria-pressed="true"]{border-color:var(--sh-acc);color:var(--sh-fg)}
.bgpick i{width:22px;height:22px;border-radius:5px;display:block;border:1px solid rgba(255,255,255,.12)}
.sw-paper{background:#fff}
.sw-tint{background:#f6f8fb}
.sw-warm{background:#f4f1ea}
.sw-ink{background:#0e1b2e}
.sw-night{background:#0b0b0d}
.sw-grid{background:#fff;background-image:repeating-linear-gradient(0deg,transparent 0 4px,#dfe3ea 4px 5px),repeating-linear-gradient(90deg,transparent 0 4px,#dfe3ea 4px 5px)}
.sw-dots{background:#fbfbfd;background-image:radial-gradient(#c9cfd9 1px,transparent 1.1px);background-size:5px 5px}
.sw-aurora{background:#0a1220;background-image:radial-gradient(60% 60% at 20% 20%,rgba(64,110,220,.8),transparent 70%),radial-gradient(60% 60% at 80% 70%,rgba(35,190,180,.6),transparent 70%)}
.sw-mesh{background:#f7f5fb;background-image:radial-gradient(60% 60% at 20% 20%,rgba(120,150,255,.7),transparent 70%),radial-gradient(60% 60% at 80% 80%,rgba(255,160,190,.7),transparent 70%)}
.sw-photo{background:linear-gradient(150deg,#5b6a78,#232a32)}

/* ------------------------------------------------------------------
   카탈로그 디자인 시스템(catalog-base.css)과 우리 렌더러를 잇는 층.

   원칙: catalog-base.css 는 절대 손대지 않는다. 그건 75종 마크업이
   의존하는 원본이고, 아티팩트가 바뀌면 통째로 다시 생성된다.
   우리 사정(테넌트 테마, 밴드 여백 규칙 R1~R7)은 전부 여기서 얹는다.
   ------------------------------------------------------------------ */

/* ---------------------------------------------------------- 밴드
   블록 하나 = 밴드 하나.
   위아래 여백은 조립 규칙이 계산해서 인라인 커스텀 프로퍼티로 꽂아준다.
   ---------------------------------------------------------- */
.blk-band {
  /* 카탈로그 블록은 cqw 단위와 @container 를 쓴다.
     밴드가 컨테이너가 되어야 원본과 같은 반응형이 나온다. */
  container-type: inline-size;
  position: relative;
}

.blk-band > .bg {
  padding-block: var(--pad-top, 96px) var(--pad-bottom, 96px);
}

/* 카탈로그의 .sec / .sec-s 는 자체 여백을 갖고 있다.
   여백은 조립 규칙이 정하므로 여기서 넘겨받고 원본 값은 죽인다. */
.bk .sec,
.bk .sec-s {
  padding-block: 0;
}

/* R3 — 다크가 연달아 붙어 경계가 사라질 때만 긋는 선 */
.blk-band[data-divider='true'] > .bg::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--line);
  z-index: 1;
}

/* ---------------------------------------------------------- 테넌트 테마
   카탈로그는 --acc 를 강조색으로 쓴다. 테넌트가 고른 브랜드 색을 여기 꽂는다.
   t-forest / t-clay 같은 카탈로그 테마 클래스는 쓰지 않는다 —
   색은 고객마다 다르고, 그건 테마 탭에서 정한다.
   ---------------------------------------------------------- */
.bk {
  --acc: var(--brand);
  --acc-soft: color-mix(in srgb, var(--brand) 10%, #fff);
  font-family: var(--font-body);
}

.bk h1,
.bk h2,
.bk h3,
.bk h4 {
  font-family: var(--font-heading);
}

.bk .bg[data-contrast='dark'] {
  --acc-soft: color-mix(in srgb, var(--brand) 22%, #0b0f18);
}

/* 원본은 색을 .bk 에서 한 번 정한다: `.bk { color: var(--ink) }`.
   다크 배경 모듈은 --ink 를 .bg 에서 다시 정의하는데, color 는 이미 .bk 에서
   밝은 값으로 계산돼 상속되므로 글자가 안 뒤집힌다.
   .bg 에서 color 를 다시 잡아줘야 재정의된 --ink 가 실제로 먹는다. */
.bk .bg {
  color: var(--ink);
}

/* 다크 배경에서 강조색이 너무 어두우면 안 읽힌다. 살짝 밝힌다. */
.bk .bg[data-contrast='dark'] .eyebrow,
.bk .bg[data-contrast='dark'] .lnk {
  color: color-mix(in srgb, var(--brand) 55%, white);
}

/* ---------------------------------------------------------- 사진
   카탈로그는 사진 자리를 .ph.p1~.p8 그라디언트로 채워 보여준다.
   실제 사이트에서는 그 자리에 <img> 가 들어간다.
   ---------------------------------------------------------- */
.bk .ph > img,
.bk .ph > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 사진이 실제로 들어오면 플레이스홀더 라벨은 지운다 */
.bk .ph:has(img)::after {
  content: none;
}

.bk .ph:has(img) {
  background: none;
}

/* ---------------------------------------------------------- 접근성 */
.bk a:focus-visible,
.bk button:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .bk * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}