/* ─────────────────────────────────────────────────────────────
   장비별 설정 (#config) — 터미널 컨셉: 왼쪽 코드 패널 · 오른쪽 세로 카테고리.
   색은 히어로(메인 이미지)와 같은 어두운 톤 + 시안 accent 를 그대로 쓴다
   (:root 의 --ink/--soft/--muted/--line/--accent — .film 의 밝은 override 를
   받지 않도록 이 섹션에는 .film 클래스를 넣지 않는다).
   ───────────────────────────────────────────────────────────── */
#config { background: #060606; color: var(--ink); padding-bottom: clamp(60px, 8vw, 120px); }
#config .band__meta p { color: var(--soft); }

.cfg-box {
  margin-top: clamp(8px, 2vw, 24px);
  display: flex; align-items: stretch;
  background: #060606; border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden;
}

.cfg-left {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch;
  padding: clamp(12px, 1.6vw, 20px);
}
.cfg-term {
  width: 100%; min-width: 0; display: flex; flex-direction: column;
  background: #0b0d10; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.cfg-term-bar {
  display: flex; align-items: center; gap: 8px; padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.cfg-dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.cfg-copy {
  margin-left: auto; appearance: none; border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
  color: var(--soft); font-family: var(--mono); font-size: 13px;
  padding: 8px 14px; border-radius: 6px; cursor: pointer;
}
.cfg-copy:hover { border-color: var(--accent); color: var(--ink); }
.cfg-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cfg-code {
  flex: 1; margin: 0; background: #0b0d10; color: #dce3ea;
  font-family: var(--mono); font-size: 15.5px; line-height: 1.75;
  max-height: clamp(480px, 74vh, 860px); overflow: auto; white-space: pre;
  /* 위쪽은 터미널 상단바(점 3개 · 복사 버튼)가 이미 공간을 차지하므로,
     그 바의 높이만큼 아래쪽 여백을 더 줘야 위아래 공백이 맞아 보인다. */
  padding: 28px 28px 95px;
}
.cfg-code:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.cfg-tabs {
  flex: 0 0 260px; display: flex; flex-direction: column;
  border-left: 1px solid var(--line); background: rgba(255, 255, 255, .02);
}
.cfg-tab {
  position: relative; overflow: hidden;
  appearance: none; border: 0; border-left: 2px solid transparent; background: none; cursor: pointer;
  text-align: left; padding: 18px 22px;
  font-family: var(--mono); font-size: 14px; letter-spacing: .02em; color: var(--muted);
}
.cfg-tab[aria-selected="true"],
.cfg-tab[aria-selected="true"]:hover {
  color: #060606; font-weight: 600;
  background: var(--accent); border-left-color: var(--accent);
}
.cfg-tab:hover { color: var(--ink); }
.cfg-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (prefers-reduced-motion: no-preference) {
  .cfg-tab { transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
  .cfg-copy { transition: border-color .15s ease, color .15s ease; }
  /* 카테고리 전환 시 코드·설명이 살짝 떠오르며 나타난다 (탭마다 재실행) */
  .cfg-code.is-swap { animation: cfg-swap-in .32s ease both; }
  .cfg-note.is-swap { animation: cfg-swap-in .32s ease .04s both; }
}
@keyframes cfg-swap-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.cfg-note { margin: 14px 2px 0; font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* 구문 강조 */
.cfg-c   { color: #7f8fa0; }
.cfg-ip  { color: #8fc9ff; }
.cfg-kw  { color: #f5b971; }
.cfg-str { color: #a8ddb5; }

@media (max-width: 768px) {
  .cfg-box { flex-direction: column; }
  .cfg-tabs {
    flex: 0 0 auto; flex-direction: row; overflow-x: auto;
    border-left: 0; border-top: 1px solid var(--line);
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .cfg-tabs::-webkit-scrollbar { display: none; }
  .cfg-tab { flex: 0 0 auto; white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
  .cfg-tab[aria-selected="true"] { border-left-color: transparent; border-bottom-color: var(--accent); }
}
@media (max-width: 640px) {
  .cfg-code { font-size: 13.5px; padding: 18px; }
  .cfg-tab { font-size: 12.5px; padding: 13px 16px; }
}