/*
 * burnkim-signature/theme.css — 시그니처 CSS 추출본(v1).
 * base.css에서 꿀렁면·메탈 포일·계기판 키트·이미지 이펙트·Pretendard @font-face를 추린 것.
 * (컷오버 supervised 단계에서 base.css→core.css로 정밀 분리 시 이 목록을 기준으로 삼는다.)
 * 지금은 additive: base.css가 그대로라 burn.kim은 무영향, 이 파일은 판매용 아티팩트.
 */

.wriggle-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.hero-wriggle { position: absolute; inset: 0; }
.divider-wriggle { height: 40px; }
.wriggle-frame { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.sh-ink { box-shadow: 7px 7px 0 var(--ink); }
.h-wiggle:hover { animation: bk-wiggle 0.45s ease; }
@keyframes bk-wiggle { 25% { rotate: 0.9deg; } 75% { rotate: -0.9deg; } }
.t-metal {
  background: linear-gradient(115deg, var(--metal-a), var(--metal-b) 45%, var(--metal-c));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.panel-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--ink-faint);
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1;
}
.panel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.panel-index { color: var(--accent); letter-spacing: 0.08em; }
.panel-label { text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); }
.panel-title { margin-left: auto; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; color: var(--ink); }
.panel-body { padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.panel-body > .blk { padding-left: 0; padding-right: 0; max-width: none; margin-left: 0; margin-right: 0; }
.ro-value-row, .ro-meter { display: flex; align-items: center; gap: var(--sp-3); }
.ro-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); flex: none; }
.ro-meter .ro-label { width: 72px; }
.ro-value { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.ro-meter .ro-value { min-width: 3ch; text-align: right; }
.ro-unit { color: var(--ink-soft); font-weight: 400; margin-left: 2px; }
.ro-bar { flex: 1; height: 8px; background: color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 1px; overflow: hidden; }
.ro-bar > span { display: block; height: 100%; background: var(--accent); transition: width var(--mo-dur, 0.15s) var(--mo-ease, ease); }
.ro-index { display: flex; align-items: baseline; gap: var(--sp-3); }
.ro-num { font-size: var(--text-xxl); font-weight: 700; letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.ro-cap { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); }
.blk-rule .rl-line { flex: 1; height: 0; border-top: var(--stroke-w) solid var(--ink); }
.blk-rule.rl-w-thin .rl-line { border-top-width: 1px; }
.rl-dotted .rl-line { border-top-style: dotted; border-top-width: 2px; }
.rl-double .rl-line { height: 4px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.rl-label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); flex: none; }
.blk-rule.rl-vertical { display: inline-flex; height: 1.4em; vertical-align: middle; max-width: none; }
.rl-vertical .rl-line { flex: none; width: 0; height: 100%; border-top: 0; border-left: var(--stroke-w) solid var(--ink); }
.rl-vertical.rl-w-thin .rl-line { border-left-width: 1px; }
.fx-dither img { filter: grayscale(1) contrast(1.25) url(#bk-fx-dither); }
.fx-halftone img { filter: grayscale(1) contrast(1.18); }
.fx-halftone::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.85) 22%, transparent 24%);
  background-size: 4px 4px; mix-blend-mode: screen;
}
.fx-duotone img { filter: grayscale(1) contrast(1.25) brightness(1.02); }
.ap-draw > .ap-draw-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.ap-draw > .ap-draw-svg rect {
  fill: none; stroke: var(--ink); stroke-width: var(--stroke-w);
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
.ap-draw.ap-in > .ap-draw-svg rect { animation: bk-draw 0.9s cubic-bezier(0.4, 0.7, 0.3, 1) forwards; }
.metal:hover, a:hover .metal { background-position: 100% 0; }