/* 영문판 규칙. 빌드가 dist\i18n-en.css 로 복사하고 한·영 양쪽 페이지가 부른다.
   한국어 쪽에는 .ko/.en 짝이 없으므로 언어 단추 규칙만 듣는다.

   고른 안: 큰 제목은 B(한글이 주인공, 영문은 부제) · 좌측 도면은 A(한·영 병기).
   사양표는 원래 마크업이 한·영 병기라 손대지 않는다 — 그게 B안이다. */

/* ── 언어 단추 ─────────────────────────────────────────────── */
.lang-switch {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 200;
  padding: 6px 14px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted-78, #c9c9cf);
  border: 1px solid var(--rule-card, #3a3a42);
  border-radius: 999px;
  background: oklch(0.14 0.005 264 / 0.72);
  backdrop-filter: blur(6px);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.lang-switch:hover,
.lang-switch:focus-visible {
  color: var(--heading, #fff);
  border-color: var(--rule, #6b6b76);
}
@media (max-width: 700px) {
  .lang-switch { top: 12px; right: 12px; padding: 5px 11px; font-size: 10.5px; }
}

/* 머리띠가 있는 페이지는 빌드가 단추를 메뉴 단추 바로 앞에 넣는다.
   화면 구석에 띄워 두면 좁은 화면에서 '도면'·메뉴 단추를 덮었다(2026-10-09 모바일).
   - 제품·견적: 늘 머리띠 안에 줄 세운다. 넓은 화면에서도 '컨택' 단추와 겹치던 자리였다.
   - 홈: 넓은 화면의 왼쪽 도면 칸(196px)에는 로고 옆에 들어갈 폭이 없어 구석에 띄운 채 두고,
     도면이 상단 바로 접히는 폭(1080px 이하)에서만 줄 세운다.
   404 는 머리띠가 없어 구석에 띄운 그대로다. */
.nav-inner .lang-switch { position: static; margin-left: 28px; }
.nav-inner .nav-links { margin-left: auto; }
@media (max-width: 768px) {
  .nav-inner .lang-switch { margin-left: auto; margin-right: 14px; }
}
@media (max-width: 1080px) {
  .plan-top .lang-switch { position: static; margin-left: auto; margin-right: 12px; }
}

/* ── 기본: 짝 지어진 한글·영문은 줄을 나눠 쌓는다 ──────────────── */
.ko { display: block; }
.en { display: block; }

/* ── B안 — 큰 제목: 한글 그대로, 영문은 아래 작은 부제 ─────────── */
h1 .en,
h2 .en {
  /* em 만 쓰면 제목이 작아지는 폭에서 부제가 8px 까지 내려간다. 아래를 막는다. */
  font-size: clamp(11px, 0.34em, 15px);
  line-height: 1.5;
  /* 0.14em 은 대문자 문장을 220px 넘게 부풀려 한 줄에 안 들어가게 만들었다.
     벽 라벨 특유의 벌어짐은 남기되 한 줄을 지킬 만큼만 준다. */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--muted-6, #8b8b95);
  margin-top: 14px;

  /* 폭은 제목이 쓰는 칸을 그대로 따라간다.
     ch 로 막았더니 부제 글자(11px)를 기준으로 셈해 220px 에서 잘렸고,
     정작 칸은 640px 이라 13줄 중 11줄이 둘째 줄에 28~98px 짜리 토막을 남겼다.
     한글 제목과 왼쪽 끝을 맞추려면 같은 칸을 쓰는 게 맞다. */
  max-width: 100%;
  /* 그래도 넘칠 만큼 긴 문장은 두 줄을 고르게 나눈다 — 토막 줄을 안 만든다 */
  text-wrap: balance;
}

/* ── 입구 전시정보: 라벨과 값을 한 줄에 ───────────────────────
   한글 '주최'·'상설' 은 두 글자라 그냥 붙었는데 'Presented by'·'Standing' 은
   원본은 grid-template-columns: 52px 1fr 이다. 한글 '주최'·'상설' 은 두 글자라
   52px 에 들어가는데 'Presented by' 는 안 들어가 값이 아래로 떨어졌다.
   flex 로 바꿔 봤더니 줄마다 라벨 길이가 달라 흰 글자 시작점이 제각각이 됐다 —
   칸을 공유해야 줄이 맞으므로 그리드를 그대로 두고 라벨 칸만 넓힌다.
   [lang=en] 으로 묶는다 — 이 파일은 한국어 쪽도 부르므로 거기까지 바꾸면 안 된다. */
html[lang="en"] .show-info > div { grid-template-columns: 104px 1fr; }
html[lang="en"] .show-info dt { white-space: nowrap; }

/* ── A안 — 좌측 도면: 한 줄에 한글·영문 나란히 ────────────────── */
.plan-list .ko,
.plan-list .en {
  display: inline;
}
.plan-list .en {
  margin-left: 7px;
  font-size: 0.85em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-6, #8b8b95);
}

/* ── 전시 목록 머리말도 한 줄 병기 ────────────────────────────── */
.roster-head .ko,
.roster-head .en {
  display: inline;
}
.roster-head .en {
  margin-left: 7px;
  color: var(--muted-6, #8b8b95);
  opacity: 0.75;
}

/* 영문 부제·목차는 본문 서체로 — 한글 서체가 라틴 글자를 잡으면
   같은 줄의 한글과 굵기가 어긋나 보인다. */
.en { font-family: var(--font, 'Gill Sans', 'Gill Sans MT', Cabin, sans-serif); }