/* ============================================================
   minimal.css — 홈페이지 디자인 (미니멀, 2026-11-11 확정)
   base.html 의 <html class="minimal"> 로 모든 화면에 적용.
   마지막에 읽히는 CSS 라 앞의 tokens · layout · components · pages 를 덮어씀.
   ============================================================ */

/* ============================================================
   미니멀 : 흰 여백과 작품만 남긴 가장 절제된 안 (미드저니 시안 17-4 · 18 참고)
   · 메인 영상은 화면 끝까지 채우지 않고 여백 안에 액자처럼, 문구는 영상 아래 한 줄
   · 대표작 10편 목록 — 왼쪽 큰 포스터 + 오른쪽 번호 목록, 마우스를 올리면 포스터 전환
   · 그 아래 다음 10편을 5열로, 제목은 이미지 아래 작게 (모두 세로 포스터 비율)
   · 색 · 장식 · 겹침 없음, 서체는 프리텐다드 하나
   ============================================================ */
html.minimal { --ink: #FFFFFF; --panel: #FFFFFF; }
html.minimal body { background: #FFFFFF; }

/* 메인 영상 — 액자형 */
html.minimal .hero {
  height: auto;
  min-height: 0;
  display: block;
  overflow: visible;
  padding: clamp(24px, 3.4vw, 52px) var(--pad) 0;
  background: #FFFFFF;
}
html.minimal .hero > .hv,
html.minimal .hero > .hero-vid {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  max-width: 1440px;
  height: auto;
  aspect-ratio: 2.2 / 1;
  margin: 0 auto;
  overflow: hidden;
  object-fit: cover;
}

/* 영상 전환 — 한 편씩 교차 전환, 네 편마다 열두 편 영상 벽 (static/js/hero.js)
   옛 CCTV 격자의 어두운 테두리 · 주사선 · REC 표시 대신, 칸 사이를 바탕과 같은 흰 틈으로만 나눔.
   칸은 왼쪽 위에서부터 물결처럼 차례로 열림 */
html.minimal .hv { background: #F2F2F2; }
html.minimal .hv-single,
html.minimal .hv-wall { position: absolute; inset: 0; }
html.minimal .hv-single video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}
html.minimal .hv-single video.on { opacity: 1; }
html.minimal .hv-wall {
  display: grid;
  grid-template-columns: repeat(var(--wc, 4), minmax(0, 1fr));
  grid-template-rows: repeat(var(--wr, 3), minmax(0, 1fr));
  gap: clamp(3px, .35vw, 6px);
  background: #FFFFFF;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
html.minimal .hv.wall-on .hv-wall { opacity: 1; }
html.minimal .hv-cell {
  position: relative;
  overflow: hidden;
  background: #EDEDED;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .9s var(--ease);
  transition-delay: 0s;
}
html.minimal .hv.wall-on .hv-cell { clip-path: inset(0); transition-delay: var(--d, 0ms); }
html.minimal .hv-cell video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 영상 아래 — 진행 막대(작품 한 편당 한 칸, 피아노 건반처럼 가늘게) + 작품명 · 앞뒤 이동 */
html.minimal .hv-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 24px;
  max-width: 1440px;
  margin: 12px auto 0;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--dim);
}
html.minimal .hv-keys { grid-column: 1 / -1; display: flex; gap: 3px; height: 14px; }
html.minimal .hv-key { position: relative; flex: 1 1 0; min-width: 0; height: 14px; padding: 0; border: 0; background: none; cursor: pointer; }
html.minimal .hv-key i {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: block;
  height: 2px;
  overflow: hidden;
  background: #E3E3E3;
  transition: height .2s var(--ease), background .2s ease;
}
html.minimal .hv-key i b { display: block; height: 100%; background: var(--paper); transform: scaleX(0); transform-origin: left; }
html.minimal .hv-key.wall i { background: #A8A8A8; }
html.minimal .hv-key:hover i,
html.minimal .hv-key:focus-visible i { height: 6px; background: #C8C8C8; }
html.minimal .hv-key.on i { height: 3px; }
html.minimal .hv-key:focus-visible { outline: none; }
html.minimal .hv-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1.5em; color: var(--paper); }
html.minimal .hv-title.peek { color: var(--dim); }
html.minimal .hv-nav { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
html.minimal .hv-nav button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
html.minimal .hv-nav button:hover { color: var(--paper); background: #F2F2F2; }
html.minimal .hv-nav .hv-all { margin-left: 4px; }
html.minimal .hv-nav .hv-all svg { width: 11px; height: 11px; fill: currentColor; vertical-align: middle; }
html.minimal .hv-nav .hv-all.on { color: var(--paper); }
@media (max-width: 900px) {
  html.minimal .hv-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  html.minimal .hv-cell:nth-child(n+10) { display: none; }
}
@media (max-width: 560px) {
  html.minimal .hv-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  html.minimal .hv-cell:nth-child(n+7) { display: none; }
  html.minimal .hv-keys { gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  html.minimal .hv-cell { transition: none; }
}
html.minimal .hero-copy {
  position: static;
  margin: 0 auto;
  padding: clamp(22px, 2.4vw, 34px) 0 0;
  max-width: 1440px;
  text-align: center;
  color: var(--paper);
}
html.minimal .hero-ttl {
  color: var(--paper);
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-shadow: none;
}
html.minimal .hero-cta {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dim);
  font-size: 13px;
  letter-spacing: .06em;
}
html.minimal .hero-cta:hover { color: var(--paper); background: none; }

/* 대표작 목록 */
html.minimal .gidx {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: stretch;
  max-width: calc(1440px + var(--pad) * 2);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 132px) var(--pad) 0;
}
html.minimal .gidx-media {
  position: relative;
  aspect-ratio: var(--poster);
  width: min(42vw, calc(76vh * 2 / 3), 560px);
  overflow: hidden;
  background: #F2F2F2;
}
html.minimal .gidx-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity .7s ease, transform 1.4s var(--ease);
}
html.minimal .gidx-media img.on { opacity: 1; transform: none; }
html.minimal .gidx-head {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--dim);
}
/* 목록 높이를 포스터 높이에 맞춤 — 제목줄은 포스터 위쪽 끝, 10줄이 포스터 아래쪽 끝까지 고르게 나뉨 */
html.minimal .gidx-side { display: flex; flex-direction: column; }
html.minimal .gidx-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
html.minimal .gidx-list li { flex: 1; display: flex; }
html.minimal .gidx-list a {
  flex: 1;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 0;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-size: 15px;
  transition: color .25s ease, padding-left .35s var(--ease);
}
html.minimal .gidx-list a.on,
html.minimal .gidx-list a:hover { color: var(--paper); padding-left: 6px; }
html.minimal .gidx-no,
html.minimal .gidx-y { font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
html.minimal .gidx-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 다음 10편 — 5열, 제목은 이미지 아래 */
html.minimal .rail-sec:not(.scenes) { display: none; }
html.minimal .scenes {
  display: block;
  max-width: calc(1440px + var(--pad) * 2);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 112px) var(--pad) 0;
}
html.minimal .scenes .rail-head { padding: 0 0 16px; }
html.minimal .scenes .rail-ttl { display: none; }
html.minimal .scenes .rail-more { margin-left: auto; }
html.minimal .scene-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(30px, 3vw, 46px) clamp(16px, 1.6vw, 24px);
}
html.minimal .scene:nth-child(-n+10) { display: none; }
html.minimal .scene .frame { aspect-ratio: auto; overflow: visible; background: none; }
html.minimal .scene .frame > img { display: block; height: auto; aspect-ratio: var(--poster); background: #F2F2F2; }
html.minimal .scene:hover .frame > img { transform: none; opacity: .86; }
html.minimal .scene .tile-clip { inset: 0 0 auto 0; height: auto; aspect-ratio: var(--poster); }
html.minimal .scene .tile-veil { display: none; }
html.minimal .scene .tile-meta { position: static; padding: 12px 0 0; color: var(--paper); }
html.minimal .scene .tile-ttl { font-size: 14px; font-weight: 500; color: var(--paper); }
html.minimal .scene .tile-sub { color: var(--dim); font-size: 12px; }

/* 제작 과정 · 문의 — 여백만으로 구분 */
html.minimal .pipe {
  max-width: calc(1440px + var(--pad) * 2);
  margin: clamp(72px, 9vw, 132px) auto 0;
  border-top: 1px solid var(--line);
}
html.minimal .cta-band { background: none; border-top: 0; text-align: center; }
html.minimal .cta-inner { justify-content: center; flex-direction: column; align-items: center; gap: 20px; }
html.minimal .cta-txt { font-size: clamp(22px, 2.6vw, 34px); font-weight: 400; letter-spacing: -0.02em; }
html.minimal .cta-btn { background: none; color: var(--paper); border: 1px solid var(--paper); border-radius: 100px; }
html.minimal .cta-btn:hover { background: var(--paper); color: #fff; }
html.minimal .ftr { border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  html.minimal .gidx { grid-template-columns: 1fr; }
  html.minimal .gidx-media { width: min(100%, 420px); margin: 0 auto; }
  html.minimal .gidx-list a { padding: 13px 0; }
  html.minimal .scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   하위 화면 — 회사소개 · 뉴스 · 채용 · 문의 · 글 보기 (2026-11-11)
   홈과 같은 폭(1440)과 여백, 머리글은 작은 분류명 + 큰 제목 + 오른쪽 숫자,
   구간은 번호와 가는 선으로만 구분 (미드저니 레퍼런스: 스위스 편집 디자인)
   ============================================================ */
html.minimal .sub {
  max-width: calc(1440px + var(--pad) * 2);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(96px, 11vw, 160px);
}
html.minimal .sub-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  padding: clamp(56px, 8vw, 120px) 0 clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}
html.minimal .sub-eb { margin: 0 0 18px; font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--dim); }
html.minimal .sub-ttl {
  margin: 0;
  font-size: clamp(36px, 5.2vw, 76px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--paper);
  word-break: keep-all;
}
html.minimal .sub-lead {
  max-width: 34em;
  margin: clamp(24px, 3vw, 40px) 0 0;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.8;
  color: var(--paper);
  word-break: keep-all;
}
html.minimal .sub-meta { margin: 0; font-size: 13px; letter-spacing: .04em; color: var(--dim); font-variant-numeric: tabular-nums; }

/* 구간 머리 — 번호 · 이름 · (오른쪽) 더 보기 */
html.minimal .sec { padding-top: clamp(72px, 9vw, 132px); }
html.minimal .sec-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: clamp(28px, 3.4vw, 48px);
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}
html.minimal .sec-no { font-size: 12px; letter-spacing: .06em; color: var(--dim); font-variant-numeric: tabular-nums; }
html.minimal .sec-ttl { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--paper); }
html.minimal .sec-more { margin-left: auto; font-size: 13px; color: var(--dim); transition: color .25s ease; }
html.minimal .sec-more:hover { color: var(--paper); }

/* 회사소개 머리 — 왼쪽 글, 오른쪽 세로 포스터 */
html.minimal .about-head { align-items: stretch; gap: clamp(32px, 6vw, 120px); }
html.minimal .about-txt { display: flex; flex-direction: column; justify-content: flex-end; }
html.minimal .about-media {
  position: relative;
  aspect-ratio: var(--poster);
  width: min(30vw, 420px);
  overflow: hidden;
  background: #F2F2F2;
}
html.minimal .about-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 1s ease, transform 1.6s var(--ease);
}
html.minimal .about-media img.on { opacity: 1; transform: none; }

/* 숫자 띠 */
html.minimal .facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
html.minimal .fact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(28px, 3.4vw, 48px) 0 clamp(28px, 3.4vw, 48px) clamp(16px, 2vw, 32px);
  border-left: 1px solid var(--line);
}
html.minimal .fact:first-child { padding-left: 0; border-left: 0; }
html.minimal .fact-v {
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
html.minimal .fact-k { font-size: 13px; color: var(--dim); }

/* 하는 일 — 아홉 공정 3열 */
html.minimal .stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}
html.minimal .stage { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; }
html.minimal .stage-no { grid-row: 1 / 3; padding-top: 3px; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
html.minimal .stage-name { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .06em; color: var(--paper); }
html.minimal .stage-sub { margin-left: 10px; font-weight: 400; letter-spacing: 0; color: var(--dim); }
html.minimal .stage-desc { margin: 10px 0 0; font-size: 14px; line-height: 1.75; color: var(--dim); word-break: keep-all; }
html.minimal .sides {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px clamp(24px, 3vw, 48px);
  margin: clamp(44px, 5vw, 72px) 0 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
html.minimal .sides li { display: flex; flex-direction: column; gap: 6px; }
html.minimal .side-name { font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--paper); }
html.minimal .side-desc { font-size: 13px; line-height: 1.7; color: var(--dim); word-break: keep-all; }

/* 걸어온 길 */
html.minimal .hist { margin: 0; padding: 0; list-style: none; }
html.minimal .hist li {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
html.minimal .hist-y { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
html.minimal .hist-t { font-size: 16px; color: var(--paper); }
html.minimal .hist-note { margin: 16px 0 0; font-size: 13px; color: var(--dim); }

/* 대표 작품 — 세로 포스터 5열 */
html.minimal .pgrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(30px, 3vw, 46px) clamp(16px, 1.6vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
html.minimal .pgrid a { display: flex; flex-direction: column; gap: 4px; color: var(--paper); }
html.minimal .pgrid img {
  display: block;
  width: 100%;
  aspect-ratio: var(--poster);
  object-fit: cover;
  background: #F2F2F2;
  margin-bottom: 8px;
  transition: opacity .3s ease;
}
html.minimal .pgrid a:hover img { opacity: .86; }
html.minimal .pgrid-t { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.minimal .pgrid-y { font-size: 12px; color: var(--dim); }

/* 뉴스 — 쇼릴 영상 띠 */
html.minimal .band {
  margin-top: clamp(40px, 5vw, 72px);
  aspect-ratio: 2.8 / 1;
  overflow: hidden;
  background: #F2F2F2;
}
html.minimal .band video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 채용 — 함께 만든 작품 포스터 띠 (6장, 가장자리까지 꽉) */
html.minimal .pstrip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(6px, .6vw, 10px);
  margin: clamp(40px, 5vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}
html.minimal .pstrip img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #F2F2F2; }

/* 뉴스 · 채용 목록 */
html.minimal .lrows { margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
html.minimal .lrows a {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto 24px;
  gap: 20px;
  align-items: center;
  padding: clamp(20px, 2vw, 28px) 0;
  border-bottom: 1px solid var(--line);
  color: var(--paper);
  transition: padding-left .35s var(--ease);
}
html.minimal .lrows a:hover { padding-left: 8px; }
html.minimal .lr-d { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
html.minimal .lr-t { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.45; word-break: keep-all; }
html.minimal .lr-m { font-size: 13px; color: var(--dim); text-align: right; white-space: nowrap; }
html.minimal .lr-img { width: 120px; aspect-ratio: 16 / 10; object-fit: cover; background: #F2F2F2; }
html.minimal .lr-x { font-size: 15px; color: var(--dim); text-align: right; transition: transform .35s var(--ease), color .25s ease; }
html.minimal .lrows a:hover .lr-x { color: var(--paper); transform: translateX(4px); }
html.minimal .lr-tag {
  justify-self: start;
  padding: 4px 10px;
  border: 1px solid var(--paper);
  border-radius: 100px;
  font-size: 12px;
  color: var(--paper);
}
html.minimal .lrows .is-closed .lr-tag { border-color: var(--line); color: var(--dim); }
html.minimal .lrows .is-closed .lr-t { color: var(--dim); }
html.minimal .lr-empty { padding: 48px 0; color: var(--dim); border-bottom: 1px solid var(--line); }

/* 문의 — 왼쪽 안내 · 연락처, 오른쪽 양식 */
html.minimal .contact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 7vw, 140px);
  padding-top: clamp(56px, 8vw, 120px);
}
html.minimal .cinfo { margin: clamp(36px, 4vw, 56px) 0 0; border-top: 1px solid var(--line); }
html.minimal .cinfo div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
html.minimal .cinfo dt { font-size: 13px; color: var(--dim); }
html.minimal .cinfo dd { margin: 0; font-size: 15px; color: var(--paper); word-break: keep-all; }
html.minimal .cinfo a { color: var(--paper); border-bottom: 1px solid var(--line); }
html.minimal .cinfo a:hover { border-bottom-color: var(--paper); }
html.minimal .contact-form { padding-top: 34px; }
html.minimal .cf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 28px; }
html.minimal .cf label { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--dim); }
html.minimal .cf label i { font-style: normal; color: var(--paper); }
html.minimal .cf .cf-wide { grid-column: 1 / -1; }
html.minimal .cf input,
html.minimal .cf textarea {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--paper);
  transition: border-color .25s ease;
}
html.minimal .cf textarea { resize: vertical; min-height: 160px; line-height: 1.7; }
html.minimal .cf input:focus,
html.minimal .cf textarea:focus { outline: none; border-bottom-color: var(--paper); }
html.minimal .cf button {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 14px 30px;
  border: 1px solid var(--paper);
  border-radius: 100px;
  background: var(--paper);
  color: #FFFFFF;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
html.minimal .cf button:hover { background: transparent; color: var(--paper); }
html.minimal .cf-ok,
html.minimal .cf-err { margin: 0 0 24px; padding: 18px 0; border-top: 1px solid var(--paper); border-bottom: 1px solid var(--line); font-size: 16px; color: var(--paper); }
html.minimal .cf-ok { margin: 0; font-size: clamp(18px, 1.6vw, 22px); }

/* 글 보기 */
html.minimal .post-ttl { font-size: clamp(28px, 3.6vw, 52px); }
html.minimal .post-img { margin: clamp(40px, 5vw, 72px) 0 0; }
html.minimal .post-img img { display: block; width: 100%; max-height: 78vh; object-fit: cover; background: #F2F2F2; }
html.minimal .post-body { max-width: 760px; padding-top: clamp(40px, 5vw, 64px); }
html.minimal .post-body p { margin: 0 0 1.4em; font-size: 17px; line-height: 1.9; color: var(--paper); word-break: keep-all; white-space: pre-line; }
html.minimal .post-back { margin: clamp(40px, 5vw, 64px) 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; }
html.minimal .post-back a { color: var(--dim); }
html.minimal .post-back a:hover { color: var(--paper); }

@media (max-width: 900px) {
  html.minimal .about-head { grid-template-columns: 1fr; }
  html.minimal .about-media { width: min(100%, 360px); }
  html.minimal .stages,
  html.minimal .sides { grid-template-columns: 1fr; }
  html.minimal .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.minimal .pstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.minimal .pstrip li:nth-child(n+4) { display: none; }
  html.minimal .contact { grid-template-columns: 1fr; }
  html.minimal .contact-form { padding-top: 0; }
  html.minimal .lrows a { grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 14px; }
  html.minimal .lr-d, html.minimal .lr-tag, html.minimal .lr-m { grid-column: 1; text-align: left; }
  html.minimal .lr-img { display: none; }
  html.minimal .lr-x { grid-column: 2; grid-row: 1 / span 3; }
}
@media (max-width: 640px) {
  html.minimal .sub-head { grid-template-columns: 1fr; }
  html.minimal .fact { padding-left: 12px; }
  html.minimal .fact-v { font-size: 30px; }
  html.minimal .fact-k { font-size: 12px; }
  html.minimal .cf { grid-template-columns: 1fr; }
}

/* ============================================================
   언어별 글꼴 · 줄바꿈 (2026-11-11 일본어 추가)
   한국어는 단어 단위 줄바꿈(keep-all)을 쓰지만, 띄어쓰기가 없는 일본어 · 중국어에
   그대로 두면 줄이 넘쳐 화면 밖으로 나가므로 글자 단위로 바꿈
   ============================================================ */
html[lang="ja"] body,
html[lang="ja"] button,
html[lang="ja"] input,
html[lang="ja"] textarea { font-family: "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable", system-ui, sans-serif; }
html[lang="zh-Hans"] body,
html[lang="zh-Hans"] button,
html[lang="zh-Hans"] input,
html[lang="zh-Hans"] textarea { font-family: "Pretendard Variable", "Noto Sans SC Variable", system-ui, sans-serif; }
html[lang="ja"] body *,
html[lang="zh-Hans"] body * { word-break: normal !important; overflow-wrap: break-word; line-break: strict; }

/* ============================================================
   문의 — 오시는 길 (직접 그린 약도 + 역별 안내, 2026-11-11)
   ============================================================ */
html.minimal .sec-head .way-alt { margin-left: 18px; }
html.minimal .way { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
html.minimal .way-map { margin: 0; }
html.minimal .way-map svg { display: block; width: 100%; height: auto; }
html.minimal .way-map figcaption { margin-top: 12px; font-size: 12px; color: var(--dim); }
html.minimal .m-bg { fill: #F6F6F4; }
html.minimal .m-park { fill: #E6EEE0; }
html.minimal .m-lake { fill: #DCE8F0; }
html.minimal .m-area { font-size: 12px; fill: #6F8A62; letter-spacing: .02em; }
html.minimal .m-road { fill: none; stroke: #FFFFFF; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
html.minimal .m-line3 { fill: none; stroke: #EF7C1C; stroke-width: 3; stroke-linejoin: round; opacity: .85; }
html.minimal .m-road-t { font-size: 11px; fill: #9A9A9A; letter-spacing: .04em; }
html.minimal .m-walk { fill: none; stroke: #141414; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
html.minimal .m-walk-alt { stroke: #8C8C8C; stroke-dasharray: 2 7; }
html.minimal .m-stn circle { fill: #FFFFFF; stroke: #EF7C1C; stroke-width: 4; }
html.minimal .m-stn text { font-size: 14px; font-weight: 600; fill: #141414; }
html.minimal .m-sub { font-size: 11px; font-weight: 400; fill: #8C8C8C; }
html.minimal .m-exit circle { fill: #141414; }
html.minimal .m-exit text { font-size: 11px; font-weight: 700; fill: #FFFFFF; text-anchor: middle; }
html.minimal .m-poi rect { fill: #BDBDBD; }
html.minimal .m-poi text { font-size: 11px; fill: #6E6E6E; }
html.minimal .m-us rect { fill: #141414; }
html.minimal .m-us-t { font-size: 13px; font-weight: 700; letter-spacing: .08em; fill: #141414; text-anchor: middle; }
html.minimal .m-us .m-us-s { text-anchor: start; }
html.minimal .way-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
html.minimal .way-list li { padding: 24px 0 26px; border-bottom: 1px solid var(--line); }
html.minimal .way-tag { margin: 0 0 10px; font-size: 12px; color: var(--dim); letter-spacing: .04em; }
html.minimal .way-t { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 18px; font-weight: 600; color: var(--paper); }
html.minimal .way-key { flex: none; width: 26px; height: 0; border-top: 3px solid #141414; }
html.minimal .way-key-alt { border-top: 3px dotted #8C8C8C; }
html.minimal .way-m { margin: 8px 0 0 38px; font-size: 13px; color: var(--dim); }
html.minimal .way-d { margin: 12px 0 0 38px; font-size: 14px; line-height: 1.8; color: var(--paper); word-break: keep-all; }
@media (max-width: 900px) {
  html.minimal .way { grid-template-columns: 1fr; }
}

/* ============================================================
   오시는 길 화면 — 건물 안내(상가동 ✕ / 오피스동 ✓ → 일반동 · 섹션동), 2026-11-11
   ============================================================ */
html.minimal .cinfo-more { display: inline-block; margin-top: 18px; margin-left: 0; }
html.minimal .loc-info { margin-top: clamp(32px, 4vw, 48px); }
html.minimal .bd-tower { margin: 0 0 14px; font-size: 13px; color: var(--dim); letter-spacing: .04em; }
html.minimal .bd-wings { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(10px, 1vw, 16px); }
html.minimal .bd-wing { position: relative; padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--line); }
html.minimal .bd-wing h3 { margin: 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; color: var(--paper); }
html.minimal .bd-wing > p { margin: 8px 0 0; font-size: 14px; color: var(--dim); }
html.minimal .bd-mark {
  position: absolute;
  top: clamp(18px, 2vw, 28px);
  right: clamp(18px, 2vw, 28px);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
}
html.minimal .bd-no { background: #F6F6F4; }
html.minimal .bd-no h3 { color: #8C8C8C; }
html.minimal .bd-no > p { color: #9A9A9A; }
html.minimal .bd-yes { border-color: var(--paper); }
html.minimal .bd-pill {
  position: absolute;
  top: clamp(18px, 2vw, 28px);
  right: clamp(18px, 2vw, 28px);
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--paper);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
html.minimal .bd-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
html.minimal .bd-blocks div { padding: 16px 18px; background: #F4F4F2; }
html.minimal .bd-blocks h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--paper); }
html.minimal .bd-blocks p { margin: 6px 0 0; font-size: 14px; color: var(--paper); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  html.minimal .bd-wings { grid-template-columns: 1fr; }
}
html.minimal .loc-info { margin-top: 0; border-top: 0; }

/* 줄 끝에 한 글자 · 한 단어만 남는 어색한 줄바꿈을 줄임 (제목은 줄 길이를 고르게) */
html.minimal p, html.minimal li, html.minimal dd, html.minimal figcaption { text-wrap: pretty; }
html.minimal h1, html.minimal h2, html.minimal h3 { text-wrap: balance; }
html.minimal .m-poi-key rect { fill: #141414; }
html.minimal .m-poi-key text { fill: #141414; font-weight: 600; text-anchor: end; }
html.minimal .sub-lead { max-width: 48em; }

/* ============================================================
   공개 전 점검 (2026-11-12) — 웹 접근성 · 개인정보
   ============================================================ */
/* 보조 글자 대비를 4.5:1 이상으로 (흰 바탕 기준) */
html.minimal { --dim: rgba(20, 22, 26, .66); }
html.minimal .bd-no h3, html.minimal .bd-no > p, html.minimal .m-sub, html.minimal .m-road-t { fill: #6B6B6B; color: #6B6B6B; }
html.minimal .m-area { fill: #4F6B43; }
html.minimal :focus-visible { outline: 2px solid #141414; outline-offset: 2px; }

/* 일시 정지 단추 — 메인 영상 · 뉴스 영상 띠 */
html.minimal .hv-pause svg, html.minimal .band-pause svg { width: 11px; height: 11px; fill: currentColor; vertical-align: middle; }
html.minimal .hv-pause .i-play, html.minimal .band-pause .i-play { display: none; }
html.minimal [aria-pressed="true"] .i-play { display: inline; }
html.minimal [aria-pressed="true"] .i-pause { display: none; }
html.minimal .band { position: relative; }
html.minimal .band-pause {
  position: absolute; right: 14px; bottom: 14px;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .88); color: #141414; cursor: pointer;
}

/* 하단 — 개인정보 처리방침은 다른 안내와 구분되게 굵게 */
html.minimal .ftr-links { margin: 8px 0 0; }
html.minimal .ftr-privacy { font-weight: 700; color: var(--paper); }

/* 문의 — 개인정보 수집 · 이용 동의 */
html.minimal .cf-consent { margin: 0; padding: 18px 20px; border: 1px solid var(--line); }
html.minimal .cf-consent legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--paper); }
html.minimal .cf-consent p { margin: 0 0 14px; font-size: 13px; line-height: 1.8; color: var(--dim); }
html.minimal .cf .cf-check { flex-direction: row; align-items: center; gap: 10px; font-size: 14px; color: var(--paper); }
html.minimal .cf .cf-check input { width: 18px; height: 18px; padding: 0; accent-color: #141414; }
html.minimal .cf-policy { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--dim); }
html.minimal .cf-policy:hover { color: var(--paper); }

/* 개인정보 처리방침 화면 */
html.minimal .pv { margin: 0; padding: 0; list-style: none; }
html.minimal .pv > li { padding: clamp(24px, 3vw, 36px) 0; border-bottom: 1px solid var(--line); }
html.minimal .pv-h { display: flex; gap: 16px; align-items: baseline; margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--paper); }
html.minimal .pv-p, html.minimal .pv-l { margin: 0; padding-left: 34px; font-size: 15px; line-height: 1.85; color: var(--paper); }
html.minimal .pv-l { list-style: disc; padding-left: 52px; }

/* 꼬리말 — 회사 정보(왼쪽) · 메뉴(오른쪽) · 저작권과 개인정보 처리방침(아래 줄 양 끝) (2026-11-12) */
html.minimal .ftr { padding: 52px var(--pad) 34px; font-size: 13px; color: var(--dim); }
html.minimal .ftr-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px 64px;
  flex-wrap: wrap; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
html.minimal .ftr-logo { display: inline-block; margin-bottom: 16px; }
html.minimal .ftr-logo img { display: block; height: 22px; width: auto; }
html.minimal .ftr-brand p { margin: 0; line-height: 1.9; }
html.minimal .ftr-zip { margin-left: 10px; white-space: nowrap; }
html.minimal .ftr-mail a { color: var(--dim); text-decoration: none; }
html.minimal .ftr-mail a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
html.minimal .ftr-nav { display: grid; grid-template-columns: repeat(3, auto); gap: 12px 44px; padding-top: 4px; }
html.minimal .ftr-nav a { color: var(--paper); text-decoration: none; font-size: 13.5px; white-space: nowrap; }
html.minimal .ftr-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
html.minimal .ftr-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px;
  flex-wrap: wrap; padding-top: 22px; font-size: 12px; }
html.minimal .ftr-bottom p { margin: 0; }
html.minimal .ftr-bottom .ftr-links { margin: 0; }
@media (max-width: 700px) {
  html.minimal .ftr-nav { grid-template-columns: repeat(3, auto); gap: 10px 24px; }
  html.minimal .ftr-zip { display: block; margin-left: 0; }
}