/* 에디터로 짠 화면에서만 쓰는 블록들 (ContentsDoc/10).
   손으로 쓴 화면에는 없던 블록 — 사진 한 장 · 아코디언 · 출처 표기.
   색은 새로 만들지 않는다. style.css 가 정한 변수만 쓴다. */

/* ── 사진 한 장 ─────────────────────────────────────────────────── */
.gl-figure { margin: 0; }
.gl-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.gl-figure figcaption {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
}

/* ── 아코디언 ────────────────────────────────────────────────── */
/* 브라우저 기본 기능(details)이라 자바스크립트가 죽어도 열린다.
   낭독기가 «접힘/펼침» 을 스스로 읽어 주는 것도 그래서다. */
.gl-acc { display: grid; gap: 12px; }

.gl-acc-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.gl-acc-item summary {
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 700;
  font-size: 16px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
.gl-acc-item summary::-webkit-details-marker { display: none; }

/* 펼침 표시는 글자가 아니라 도형으로 둔다 — 글꼴이 바뀌어도 모양이 유지된다. */
.gl-acc-item summary::after {
  content: "";
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.gl-acc-item[open] summary::after { transform: rotate(-135deg); }

.gl-acc-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.gl-acc-body {
  padding: 0 22px 20px;
  color: var(--muted-2);
  line-height: 1.75;
}

/* 「동작 줄이기」를 켠 분에게는 화살표도 움직이지 않는다. */
@media (prefers-reduced-motion: reduce) {
  .gl-acc-item summary::after { transition: none; }
}

/* ── 출처 표기 ──────────────────────────────────────────────────── */
.gl-source {
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--muted);
}

/* ══════════ 섹션 설정 — 배경 · 여백 · 폭 (ContentsDoc/10) ══════════
   아임웹의 «섹션 설정» 과 같은 자리. 블록 종류와 무관하게 모든 섹션이 갖는다.
   🔴 여기에 새 색을 만들지 않는다. 역할 토큰만 쓴다 — 그래야 어두운 화면에서도
      함께 뒤집히고, 톤앤매너를 한 곳에서 바꿀 수 있다. */

.gl-bg-soft { background: var(--surface-2); }

/* 🔴 레드팀 2차(2026-09-25 · check:contrast 실기) — 「.gl-bg-dark 는 --bg 를 쓰면
   저절로 뒤집힌다」는 밝은 화면에서만 참이었다. 어두운 화면에서는 --bg 자체가 이미
   어두워서(다크 테마의 페이지 바탕), --chip(어두운 덮개) 위에 --bg(어두운 글자)를
   칠하면 검정 위에 거의 검정 — 1.07~1.31:1. --chip 은 «모드와 무관하게 늘 어두운
   덮개» 이므로, 그 위 글자는 --bg/--line 이 아니라 **늘 그 덮개용인 --ondark-fg ·
   --ondark-muted** 를 써야 두 모드 다 맞는다(레드팀 col.js 실측으로 확인). */
.gl-bg-dark {
  background: var(--chip);
  color: var(--ondark-fg);
}
/* 어두운 바탕 위에서는 글자 색이 통째로 뒤집혀야 한다.
   제목만 바꾸고 본문을 두면 «흰 바탕에 흰 글자» 가 생긴다. */
.gl-bg-dark h1, .gl-bg-dark h2, .gl-bg-dark h3, .gl-bg-dark .stat-num { color: var(--ondark-fg); }
.gl-bg-dark p, .gl-bg-dark .stat-label, .gl-bg-dark figcaption { color: var(--ondark-muted, var(--ondark-fg)); }
/* 대표 결정(2026-09-25 H1) — 꼬리표 글자는 역할 색, 주황은 점·선만. 기본값(.gl-bg-dark 의
   color: var(--ondark-fg))을 그대로 쓴다 — 여기서 따로 accent 를 칠하지 않는다. */
.gl-bg-dark .eyebrow, .stats.gl-t-band .eyebrow { color: var(--ondark-fg); }

/* check:contrast 실기(2026-09-25) — M2 로 .why-num 을 fg-strong 으로 고치면서
   같은 함정(H-n1)을 새로 만들었다 — 자기 바탕이 없는 글자라 늘 어두운 자리(섹션
   배경 어둡게)에 들어가면 검정/검정 1:1 이 된다. 같은 방식으로 되짚는다. */
.gl-bg-dark .why-num { color: var(--ondark-fg); }
.gl-bg-dark .btn-ghost { color: var(--ondark-fg); border-color: var(--ondark-muted, var(--ondark-fg)); }
.gl-bg-dark .gl-acc-item { background: transparent; border-color: color-mix(in srgb, var(--ondark-fg) 22%, transparent); }
.gl-bg-dark .gl-acc-item summary { color: var(--ondark-fg); }

.gl-pad-tight { padding-top: 34px !important; padding-bottom: 34px !important; }
.gl-pad-wide  { padding-top: 132px !important; padding-bottom: 132px !important; }
/* 위를 붙인다 — 앞 섹션과 한 덩어리로 읽히게 (운영 가드랩의 소식 · 영상) */
.gl-pad-flush { padding-top: 0 !important; }
/* 위아래를 모두 붙인다 — 제목만 따로 있고 내용은 다음 섹션이 이어 갈 때 */
.gl-pad-none  { padding-top: 0 !important; padding-bottom: 0 !important; }

/* 폭은 안쪽 container 가 쥐고 있다. 섹션에 표시를 붙이고 안쪽을 좁힌다. */
.gl-w-narrow > .container { max-width: 780px; }
.gl-w-wide   > .container { max-width: 1480px; }

@media (max-width: 760px) {
  .gl-pad-wide { padding-top: 72px !important; padding-bottom: 72px !important; }
}

/* ── 게시판 진열 · 목록 줄 (listStyle: row) ─────────────────────────
   공지·자료실처럼 «제목과 날짜만» 보면 되는 것. 카드로 세우면 사진이 없는
   글이 빈 네모를 달고 나와, 아직 안 만든 것처럼 보인다.

   🔴 색을 새로 짓지 않는다. 역할 토큰만 쓴다 —
      밝은 화면·어두운 화면 양쪽에서 저절로 뒤집히게 하는 길은 이것뿐이다. */
.grows { display: flex; flex-direction: column; }

.grow {
  display: flex; align-items: center; gap: 12px;
  padding: 17px 4px; border-bottom: 1px solid var(--line);
  color: var(--fg); text-decoration: none;
  transition: background .18s ease, padding-left .18s ease;
}
.grow:first-child { border-top: 1px solid var(--line); }
.grow:hover { background: var(--surface-2); padding-left: 12px; }
.grow:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.grow-pin {
  flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px;
  /* 대표 결정(2026-09-25 H1) — 흰 글자 · 주황 바탕은 4.5 를 못 넘는다(accent-dark 로도 4.15).
     바탕을 검정(chip)으로 — «주황은 점·선만» 이므로 바탕 자체를 주황으로 두지 않는다. */
  background: var(--chip); color: var(--ondark-fg);
}
.grow-cat {
  flex: none; font-size: 12.5px; font-weight: 700;
  color: var(--muted-2); min-width: 66px;
}
/* 🔴 말줄임 칸은 왼쪽 여백 2px 을 두고 같은 만큼 당긴다 — 글자 줄은 그대로다.
   overflow: hidden 은 여백 끝에서 자르는데, 배율이 소수일 때(화면 배율 125 · 150% 같은)
   그 선이 픽셀에 맞춰지며 칸 끝에 붙은 한글 첫 획을 깎는다 (에디터에서 「차수판」 이 「사수판」 으로 보였다 · 2026-09-14). */
.grow-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-left: 2px; margin-left: -2px;
}
.grow-date { flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 사진 자리 · 제목 묶음 · 화살표 — 공지 화면이 쓰던 모양을 그대로 옮겼다
   (2026-09-20 통일). 사진이 없으면 「글」이라고 적는다. */
.grow-th {
  flex: none; position: relative;
  width: 74px; height: 52px; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface-2);
}
.grow-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grow-th.none { display: flex; align-items: center; justify-content: center; }
.grow-th-none { font-size: 11px; font-weight: 700; color: var(--muted-2); }
.grow-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgb(0 0 0 / .32);
}
.grow-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.grow-body .grow-title { flex: 0 1 auto; display: flex; align-items: center; gap: 8px; }
.grow-meta {
  display: flex; gap: 10px; align-items: center;
  font-size: 12.5px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.grow-go { flex: none; font-size: 18px; font-weight: 700; color: var(--muted-2); }

@media (max-width: 560px) {
  .grow { gap: 10px; padding: 14px 4px; }
  .grow-th { width: 60px; height: 44px; }
  .grow-cat { min-width: 0; }
  .grow-go { display: none; }
}

/* ── 게시판 진열 · 사진첩 (listStyle: grid) ─────────────────────────
   사진이 주인공이다. 제목은 사진 위에 얹지 않고 아래에 둔다 —
   얹으면 사진마다 밝기가 달라 어떤 칸은 글자가 안 보인다. */
.gtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gtiles > * { min-width: 0; }

.gtile { display: flex; flex-direction: column; gap: 10px; color: var(--fg); text-decoration: none; }
.gtile-visual {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 1 / 1; border-radius: var(--r-md, 18px); background: var(--surface-2);
}
.gtile-visual img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.gtile:hover .gtile-visual img { transform: scale(1.045); }
.gtile:focus-visible .gtile-visual { outline: 3px solid var(--accent); outline-offset: 3px; }

/* 사진이 아직 없는 글. 빈 네모보다 «자리»로 보이게 둔다. */
.gtile-empty { display: block; width: 100%; height: 100%; background: var(--chip); }

/* 표지가 영상일 때. 사진첩에도 영상이 섞일 수 있다 —
   재생 표시가 없으면 눌러 보기 전에는 영상인 줄 모른다. */
.gtile-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgb(0 0 0 / .32); pointer-events: none;
}

.gtile-count {
  position: absolute; right: 10px; bottom: 10px;
  font-size: 12px; font-weight: 700; line-height: 1;
  padding: 5px 9px; border-radius: 999px;
  background: rgb(0 0 0 / .6); color: #fff;
}
.gtile-title {
  font-size: 14.5px; font-weight: 700; line-height: 1.5; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-left: 2px; margin-left: -2px;   /* 첫 글자 여백 — 위 .grow-title 주석 */
}

@media (max-width: 900px) { .gtiles { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* ── 사례 목록 «사진 격자» (ContentsDoc/22 2단계 · 2026-09-25) ──
   위젯: case-list. gl-t-grid · gl-d-cols-* · gl-d-cap-off 는 같은 section 에 함께 붙는다
   (gl-render.js typeClasses) — 검사(check:types 4절)가 같은 칸에 함께 있는지 센다. */
.gl-t-grid .gtiles { grid-template-columns: repeat(3, 1fr); }
.gl-t-grid.gl-d-cols-2 .gtiles { grid-template-columns: repeat(2, 1fr); }
.gl-t-grid.gl-d-cols-4 .gtiles { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  /* 레드팀 H2(2026-09-25) — .gl-t-grid .gtiles(0,2,0)가 위 900px 미디어 규칙(0,1,0)보다
     선택자 무게가 세서, 미디어 규칙 안에서도 밖의 규칙이 이겨 휴대폰에서 3열·4열이
     그대로 남았다. 같은 무게(0,2,0)의 규칙을 이 미디어 규칙 «안에» 다시 적어
     소스 순서로 이기게 한다 — cols-2 · cols-4 규칙(0,3,0)은 이미 더 세서 그대로 둔다. */
  .gl-t-grid .gtiles { grid-template-columns: repeat(2, 1fr); }
  .gl-t-grid.gl-d-cols-2 .gtiles, .gl-t-grid.gl-d-cols-4 .gtiles { grid-template-columns: repeat(2, 1fr); }
}
.gl-t-grid.gl-d-cap-off .gtile-title { display: none; }
.gl-t-grid.gl-d-big-on .gtiles .gtile:first-child {
  grid-column: span 2; grid-row: span 2;
}
@media (max-width: 900px) {
  .gl-t-grid.gl-d-big-on .gtiles .gtile:first-child { grid-column: span 1; grid-row: span 1; } /* 2열에서는 첫 칸도 보통 크기 — 2×2 를 다 차지하면 남는 칸이 안 보인다 */
}

/* ── 소식 목록 «줄 목록» — 위젯: notice-list. row 진열(.grow)을 그대로 쓴다.
   레드팀 L3·L4(2026-09-25) — 날짜만 숨기면(.grow-meta time{display:none}) 사진 개수 표시가
   없는 글에서는 빈 줄(meta 칸의 gap·줄높이)만 남았다. 그 줄 전체를 접는다 — 사진 개수는
   날짜 옆에 곁들던 보조 정보라 날짜 없이 혼자 남겨 둘 만큼 중요하지 않다. */
.gl-t-list.gl-d-date-off .grow-meta { display: none; }
.gl-t-list.gl-d-cat-off .grow-cat { display: none; }

@media (prefers-reduced-motion: reduce) {
  .grow, .gtile-visual img { transition: none; }
  .gtile:hover .gtile-visual img { transform: none; }
}

/* ── 긴 글 · 표 (privacy-doc 등 「손으로 쓴 페이지를 블록으로」 2026-09-19) ──
   🔴 2026-09-20 발견 — 개인정보처리방침을 블록(privacy-doc)으로 옮기면서
   화면은 .prose 구조(제목 · 문단 · 표)를 그대로 가져왔는데, 그 구조를
   입히던 색은 옛 site.css 에만 있었다. 블록 화면은 site.css 를 더 안 부르고
   이 파일(gl-blocks.css)만 부르므로, 표·문단이 테두리도 배경도 없이
   맨 글자로만 나왔다 — 사용자가 실제 미리보기에서 이 모습을 보고 물어서 찾았다.
   site.css 의 .prose 규칙을 옮겨 오되, 색은 이 파일의 규칙대로(style.css 의
   역할 토큰만) 다시 썼다 — 그래서 옛 site.css 와 달리 어둡게 보기도 따라온다.
   강조는 *글자* → <em> 으로 나온다(gl-inline.js) — <strong> 이 아니다. */
.prose { font-size: 15.5px; line-height: 1.85; color: var(--muted-2); }
.prose h2 { font-size: 20px; font-weight: 700; color: var(--fg); margin: 38px 0 12px; letter-spacing: -.01em; }
.prose h3 { font-size: 16px; font-weight: 700; color: var(--fg); margin: 26px 0 8px; }
.prose ul { padding-left: 20px; margin: 0 0 16px; }
.prose li { margin-bottom: 7px; }
.prose p { margin: 0 0 14px; }
.prose em, .prose strong { color: var(--fg); font-weight: 700; font-style: normal; }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; }
.prose th, .prose td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--surface-2); font-weight: 700; color: var(--fg); }

/* ══════════════════════════════════════════════════════════════════════
   「손으로 쓴 페이지를 블록으로」(2026-09-19) 옮긴 나머지 짜임 —
   2026-09-20 소유자 「여백이 없어서 없어보여」로 찾음.

   🔴 privacy-doc 뿐 아니라 case-board · case-detail · notice-board ·
      notice-list · notice-detail · inquiry-form · review-board · branch-list
      전부 옛 site.css 의 .wrap · h1.page · .sub · .form-card · .grid · .list
      같은 짜임을 그대로 물려받아 쓰는데, site.css 는 이 12개 화면 중
      어디에서도 더 이상 불리지 않는다(renderDocument 가 부르는 것은 늘
      style.css · gl-blocks.css 뿐). 그래서 표만이 아니라 화면 전체가
      테두리 · 간격 없이 맨 글자로 붙어 나왔다 — 온라인문의는 칸과 글자가
      겹쳐 보이기까지 했다.

   색은 site.css 의 고정값이 아니라 style.css 의 역할 토큰으로 다시 옮긴다
   (아래 옮김표) — 그래야 어둡게 보기도 따라온다. site.css 는 그대로
   두었다 — 아직 이 파일을 부르는 다른 자리가 있을 수 있어 지우지 않는다.
     --gray-500 → --muted   --gray-700 → --muted-2   --black/--ink → --fg-strong/--fg
     --gray-300 → --line    --gray-200 → --line(가장 가까운 역할 토큰)
     --gray-100 → --surface-2   --r-lg/md/sm → --radius-lg/md/sm   --shadow → --shadow-soft
   ══════════════════════════════════════════════════════════════════════ */

/* ── 공통 조판 — 페이지 하나짜리 화면의 «칸» ─────────────────────────
   옛 .view{padding:56px 0 100px} 을 대신한다 — 이제 화면을 감싸는 <main>이
   없어(각 블록이 바로 <nav> 다음에 온다), 그 자리를 이 화면들의 공통
   바깥 칸인 .wrap 자체에 준다. */
.wrap { max-width: 1180px; margin: 0 auto; padding: 56px 32px 100px; }
/* 🔴 읽기 칸도 «한 선» 에 선다 (2026-09-21 소유자 결정 — 용어정리집 1-8).
   종전에는 .wrap 자체를 900px 로 좁혀 가운데 두었다. 그러면 개인정보처리방침·
   지점 목록·소식 전체·문의 양식만 382px 에서 시작하고, 나머지 위젯은 242px 에서
   시작해 한 화면에 «선이 둘» 이 된다(1600px 전체 화면 기준).
   기둥은 다른 위젯과 똑같이 두고(1180px · 여백 32px), 안쪽 글 폭만 묶는다.
   900 − 32×2 = 836 — 읽는 폭은 종전과 같다. 가운데가 아니라 왼쪽 선에 붙는다. */
.wrap.narrow > * { max-width: 836px; }
h1.page { font-size: 36px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.sub { color: var(--muted-2); margin: 0 0 36px; font-size: 15.5px; }
.empty { padding: 70px 0; text-align: center; color: var(--muted); font-size: 15px; }
.loading { padding: 70px 0; text-align: center; color: var(--muted); font-size: 14px; }
.back {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700;
  color: var(--muted-2); margin-bottom: 24px; background: none; border: none; padding: 0;
}
.back:hover { color: var(--fg-strong); }

/* ── 시공사례 목록 ────────────────────────────────────────────────── */
.tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.tab {
  padding: 10px 18px; border-radius: 100px; border: 1.5px solid var(--line); font-size: 14px;
  font-weight: 700; color: var(--muted-2); background: transparent; transition: .2s;
}
.tab.on, .tab:hover { background: var(--chip); border-color: var(--fg-strong); color: #fff; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card {
  border-radius: var(--radius-md); overflow: hidden; background: var(--surface-2); aspect-ratio: 4 / 5;
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); border: none; padding: 0;
  text-align: left; width: 100%;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 🔴 2026-09-25 레드팀 M3 — 그라데이션 대신 한 색의 투명도(레퍼런스 §9-2 ①), gcard-body 와 같은 값 */
.card .meta { position: relative; z-index: 1; background: rgba(10,10,11,.72); padding: 22px 16px 16px; }
.card .cat { font-size: 11px; font-weight: 700; color: var(--ondark-fg); display: block; margin-bottom: 5px; } /* 대표 결정(2026-09-25 H1) — 검정 덮개(.card .meta) 위라 onDark 역할 색 */
.card .ttl { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.4; }
.card .badge {
  position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(10,10,11,.75);
  backdrop-filter: blur(6px); color: #fff; font-size: 11.5px; font-weight: 700; padding: 5px 10px;
  border-radius: 100px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.card .badge svg { width: 13px; height: 13px; flex-shrink: 0; }
.card .draft { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--chip); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 100px; }
.grid .empty { grid-column: 1 / -1; }

/* ── 시공사례 상세 ────────────────────────────────────────────────── */
.detail { display: grid; grid-template-columns: 1fr 340px; gap: 36px; align-items: start; }
.detail > * { min-width: 0; }
.stage { background: #000; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16 / 10; position: relative; }
.stage img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.stage iframe { width: 100%; height: 100%; border: 0; display: block; }
.stage .caption {
  position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  /* 🔴 2026-09-25 레드팀 M3 — 그라데이션 대신 한 색의 투명도 */
  background: rgba(0,0,0,.72);
  color: #fff; font-size: 13.5px; padding: 26px 18px 14px; font-weight: 700;
}
.cap-below { font-size: 13.5px; font-weight: 700; color: var(--muted-2); padding: 10px 4px 0; line-height: 1.6; }
.thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.thumb {
  width: 104px; height: 66px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden;
  border: 2px solid transparent; position: relative; background: var(--surface-2); transition: border-color .2s; padding: 0;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.on { border-color: var(--accent); }
.thumb .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4); }
.thumb .play svg { width: 26px; height: 26px; }
.desc-embed { margin: 16px 0 0; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.desc-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.side { position: sticky; top: 96px; }
.side h1 { font-size: 24px; font-weight: 700; line-height: 1.35; margin: 0 0 16px; letter-spacing: -.01em; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px;
  align-items: center;
}
.tag { background: var(--accent-soft); color: var(--fg-strong); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 100px; } /* 대표 결정(2026-09-25 H1) — accentSoft 는 모드마다 뒤집히므로 fg-strong 이 두 모드 다 통과 */
.facts { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px 0; margin-bottom: 22px; }
.fact { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
.fact:last-child { border-bottom: 0; }
.fact .k { color: var(--muted); font-weight: 700; flex-shrink: 0; }
.fact .v { font-weight: 700; text-align: right; }
.desc { font-size: 14.5px; line-height: 1.8; color: var(--muted-2); white-space: pre-line; }
/* 🔴 2026-09-20 소유자 발견 — 시공사례 상세의 이 작은 사이드바 버튼이 .cta 였는데,
   cta 블록(큰 문의 섹션, style.css)과 이름이 같아 나중에 실리는 이 규칙이 그 큰
   섹션까지 덮어써(같은 특이도라 나중 파일이 이긴다) 알약(pill) 모양으로 보였다.
   이 버튼만 case-cta 로 이름을 나눴다. */
.case-cta { display: block; width: 100%; text-align: center; background: var(--chip); color: #fff; font-weight: 700; font-size: 15px; padding: 15px; border-radius: 100px; margin-top: 24px; border: none; transition: background .25s; }
.case-cta:hover { background: var(--accent); color: var(--on-accent, var(--black)); } /* 대표 결정(2026-09-25) */
.draft-banner { background: var(--chip); color: #fff; border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13.5px; font-weight: 700; margin-bottom: 20px; }
.draft-banner b { color: var(--accent); }

/* ── 공지 목록 ────────────────────────────────────────────────────── */
.list { border-top: 2px solid var(--fg-strong); }
.row {
  display: grid; grid-template-columns: 74px 1fr auto; gap: 18px; align-items: center; width: 100%;
  text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 20px 6px; transition: background .2s;
}
.row:hover { background: var(--surface-2); }
.row .th { width: 74px; height: 52px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); position: relative; }
.row .th img { width: 100%; height: 100%; object-fit: cover; }
.row .th.none { display: flex; align-items: center; justify-content: center; color: var(--line); font-size: 11px; font-weight: 700; }
.row .t { min-width: 0; }
.row .ttl { font-size: 16px; font-weight: 700; line-height: 1.45; letter-spacing: -.01em; }
.row .m { display: flex; gap: 10px; align-items: center; margin-top: 5px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.pin { display: inline-flex; align-items: center; gap: 4px; background: var(--chip); color: var(--ondark-fg); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 100px; flex-shrink: 0; margin-right: 8px; vertical-align: 2px; } /* 대표 결정(2026-09-25 H1) — M2, 흰 글자·주황 바탕 3.12:1 → chip */
.row .go { color: var(--line); font-size: 18px; font-weight: 700; }

/* ── 공지 상세 ────────────────────────────────────────────────────── */
.nhead { border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 30px; }
.nhead h1 { font-size: 27px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; margin: 0 0 12px; }
.nhead .m { display: flex; gap: 14px; font-size: 13.5px; color: var(--muted); font-weight: 700; flex-wrap: wrap;
  align-items: center;
}
.body { font-size: 16px; line-height: 1.85; color: var(--muted-2); white-space: pre-line; }
.shots { display: flex; flex-direction: column; gap: 16px; margin-top: 30px; }
.shots figure { margin: 0; }
.shots img { width: 100%; border-radius: var(--radius-md); background: var(--surface-2); }
.shots figcaption { font-size: 13px; color: var(--muted); font-weight: 700; padding-top: 9px; line-height: 1.6; }
.nav2 { display: flex; justify-content: space-between; gap: 12px; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line);
  align-items: center;
}
.nav2 a, .nav2 span {
  background: none; border: 1.5px solid var(--line); border-radius: 100px; padding: 11px 20px; font-size: 14px;
  font-weight: 700; color: var(--fg); transition: .18s; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav2 a:hover { border-color: var(--fg-strong); }
.nav2 span { opacity: .35; }

/* ── 문의 폼 ──────────────────────────────────────────────────────── */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 30px 30px 34px; }
.field { margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }
label.f { display: block; font-size: 13px; font-weight: 700; color: var(--muted-2); margin: 0 0 7px; }
label.f .req { color: var(--accent); margin-left: 3px; }
.form-card input[type=text], .form-card input[type=tel], .form-card input[type=email], .form-card textarea {
  width: 100%; padding: 12px 14px; font-size: 15px; font-family: inherit; color: var(--fg);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: border-color .18s;
}
.form-card textarea { min-height: 160px; resize: vertical; line-height: 1.75; }
.form-card input:focus, .form-card textarea:focus { border-color: var(--accent); outline: none; }
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted-2); line-height: 1.6; }
.agree input { width: 17px; height: 17px; accent-color: var(--accent); margin: 2px 0 0; flex-shrink: 0; }
.agree a { text-decoration: underline; color: var(--fg); font-weight: 700; }
.submit { width: 100%; background: var(--chip); color: #fff; border: none; border-radius: 100px; padding: 15px; font-size: 15px; font-weight: 700; margin-top: 8px; transition: background .25s; }
.submit:hover:not(:disabled) { background: var(--accent); color: var(--on-accent, var(--black)); } /* 대표 결정(2026-09-25) — 주황 바탕 위 흰 글자(상속) 3.12:1 → 검정 */
.submit:disabled { opacity: .5; cursor: default; }
.msg { font-size: 13.5px; font-weight: 700; margin-top: 12px; display: none; line-height: 1.6; }
.msg.on { display: block; }
.msg.bad { color: #d63b2a; }
.msg.good { color: #1f8a5f; }
/* 사람 눈에 보이지 않는 칸. 자동 프로그램 거르기용이라 화면에서 완전히 뺀다. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── 상담에서 고르고 넘어온 조건 (문의 화면) ────────────────────── */
.ctx-box { background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 16px 18px; margin-bottom: 24px; }
.ctx-title { font-size: 12.5px; font-weight: 700; color: var(--fg-strong); margin: 0 0 10px; letter-spacing: .04em; } /* 대표 결정(2026-09-25 H1) — M2 */
.ctx-box ul { list-style: none; margin: 0; padding: 0; }
.ctx-box li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.ctx-box li:last-child { border-bottom: 0; }
.ctx-box li span { color: var(--muted-2); flex-shrink: 0; }
.ctx-box li b { font-weight: 700; text-align: right; }
.ctx-note { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; line-height: 1.6; }

@media (max-width: 980px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .detail { grid-template-columns: 1fr; }
  .side { position: static; }
}
@media (max-width: 600px) {
  .wrap { padding: 36px 20px 72px; }
  h1.page { font-size: 27px; }
  .grid { gap: 12px; }
  .thumb { width: 88px; height: 56px; }
  .row { grid-template-columns: 60px 1fr; gap: 13px; padding: 16px 4px; }
  .row .th { width: 60px; height: 44px; }
  .row .go { display: none; }
  .nhead h1 { font-size: 22px; }
  .form-card { padding: 22px 20px 26px; }
  .ctx-box li { flex-direction: column; gap: 2px; }
  .ctx-box li b { text-align: left; }
}

/* ── 짜임 · 사진 폭 (2026-09-23 소유자 「AI 로 만든 게 너무 티가 난다」) ────────
   재어 보니 가드랩 홈 여덟 섹션 중 넷이 「제목 + 균등 격자」 한 틀이었고, 그 넷 모두
   칸 크기가 똑같았다. 사람이 만든 브랜드 사이트는 섹션마다 짜임이 다르다.
   🔴 격자마다 새로 적지 않는다 — 엔진의 격자 넷에 한 번에 건다. 새 격자를 만들면
      이 목록에 이름만 더한다. */
:is(.biz-grid, .why-grid, .stats-grid, .gallery-grid){ --gl-cells: 1fr; }

/* 첫 칸 크게 — 맨 앞 것이 두 칸을 먹고 둘째 줄부터 보통 크기로 간다.
   «무엇이 대표인가» 가 눈에 먼저 들어온다. */
.gl-gr-lead :is(.biz-grid, .why-grid, .stats-grid, .gallery-grid) > *:first-child{
  grid-column: span 2;
}
@media (min-width: 981px){
  .gl-gr-lead :is(.biz-grid, .why-grid, .stats-grid, .gallery-grid) > *:first-child{
    grid-row: span 2;
  }
}

/* 2 : 1 갈라짐 — 왼쪽이 넓고 오른쪽이 좁다. 칸이 둘일 때 쓴다. */
@media (min-width: 981px){
  .gl-gr-split :is(.biz-grid, .why-grid, .stats-grid, .gallery-grid){
    grid-template-columns: 2fr 1fr;
  }
}

/* 사진이 화면 끝까지 — 안내선(--container) 을 벗어난다. Peak Design 의 «사진이
   말하게 하는» 자리다. 🔴 글까지 끝까지 늘리지 않는다 — 한 줄이 길어져 안 읽힌다. */
.gl-bl-full > .container{ max-width: none; padding-left: 0; padding-right: 0; }
.gl-bl-full > .container > :not(:is(figure, picture, img, video, .gallery-grid, [class*="-visual"])){
  max-width: var(--container, 1180px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}
.gl-bl-full :is(img, video, picture){ border-radius: 0; }


/* ── 사진 한 장 (2026-09-23) ──────────────────────────────────────────
   사진 · 한 문장 · 버튼 하나. 글이 사진을 설명하지 않고, 사진이 먼저 말한다.
   🔴 사진 비율을 정하지 않는다 — 올린 그대로 쓴다. Peak Design 도 섹션마다
      1:1 · 4:5 · 3:2 · 16:9 를 섞어 쓴다(2026-09-23 실측). 비율을 한 벌로 묶으면
      어느 섹션이나 같아 보여, 없애려던 «찍어낸 느낌» 이 그대로 돌아온다.
   문장은 섹션 제목(--t-h2)보다 한 단계 작다 — 제목이 아니라 «말» 이기 때문이다. */
.stmt .container{ display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 981px){
  .stmt .container{ grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
  /* 🔴 사진을 왼쪽·오른쪽 어디에 둘지는 엔진의 공용 장치(gl-mp-left/right)가 이미
     맡고 있다 — 여기서 따로 만들지 않는다(규격화). 스타일 판의 「사진·영상 자리」로 고른다.
     종전에는 :nth-of-type(even) 으로 «저절로 번갈아» 서게 했는데, 그 셈은 화면의
     «모든 섹션» 을 세기 때문에 사이에 다른 위젯이 끼면 엉뚱한 것이 뒤집혔다
     (2026-09-23 화면 검수가 잡았다). */
}
/* 🔴 사진이 아직 없거나 못 불러와도 칸은 자리를 지킨다 — 무너지면 글이 왼쪽 선을
   벗어나 «정렬이 틀어진 화면» 이 된다 (화면 검수 4번 규칙). */
.stmt-visual{ margin: 0; min-height: 200px; background: var(--surface-2); }
.stmt-visual img{ width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
.stmt-line{
  margin: 0;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: var(--lh-h2, 1.12);
  letter-spacing: var(--ls-h2, -0.03em);
  font-weight: var(--w-display, 700);
  color: var(--fg-strong);
  /* 한 줄에 스무 글자 안쪽으로 끊어 읽히게 — 길면 «문장» 이 아니라 문단이 된다 */
  max-width: 18em;
}
.stmt-actions{ margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap;
  align-items: center;
}


/* ══ 위젯 타입 · 세부 표기 (ContentsDoc/22 · 2026-09-24 소유자) ═══════════════
   위젯 하나 · 데이터 한 벌 · 모양은 고른다. 렌더러(gl-render.js)가 위젯 상자에
     gl-t-<타입>          고른 타입 (기본 타입은 붙지 않는다 — 지금 모양 그대로)
     gl-d-<열쇠>-<값>      고른 세부 표기 (기본값은 붙지 않는다)
   를 붙이고, 모양은 여기서 맡는다. 무엇을 고를 수 있는지는 blocks.json 의 types.
   🔴 색은 역할 토큰만 쓴다. «어두운 띠» 는 화면의 밝게/어둡게와 무관하게 늘 어둡다 —
      --chip(일부러 어두운 바탕) 과 --ondark-fg 로 칠한다.
   🔴 세부 표기는 늘 타입과 함께 적는다(.gl-t-x.gl-d-…) — 타입을 바꿔도 앞 타입의
      세부 값이 데이터에 남아 있으므로, 타입 없이 적으면 엉뚱한 타입에 번진다.
      (칸 수처럼 기본 타입에도 있는 세부만 타입 없이 적는다) */

/* ── 첫 화면 공용 — 요약 줄 · 사진 ───────────────────────────────── */
.hero-points{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  max-width: 560px; }
.hero-points li{ position: relative; padding-left: 20px; font-size: 15px; line-height: 1.6;
  color: var(--muted-2); }
.hero-points li::before{ content: ""; position: absolute; left: 0; top: .72em;
  width: 10px; height: 2px; background: var(--accent); }
.hero-photo{ margin: 0; overflow: hidden; background: var(--surface-2); }
.hero-photo img{ display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── 현장 전면 — 사진이 화면 가득 · 글은 사진 위 구석 ─────────────── */
.hero.gl-t-scene{ padding: 0; background: var(--chip); display: grid;
  /* 🔴 높이는 «최소» 로만 잡는다 — 비율을 고정하면 긴 제목 · 태블릿 · 21:9 에서 글이 넘쳐
     .hero{overflow:hidden} 에 버튼이 잘린다(레드팀 M7). 내용이 길면 그만큼 늘어난다. */
  min-height: clamp(520px, 56.25vw, 100vh); }
.hero.gl-t-scene.gl-d-ratio-cinema{ min-height: clamp(460px, 42.86vw, 100vh); }
.hero.gl-t-scene.gl-d-ratio-full{ min-height: 100vh; }
/* 상단바 자리 그늘 — 사진 위쪽이 아무리 밝아도 상단바 글자가 묻히지 않게 (레드팀 H1 · 2차 M1).
   🔴 상단바가 서는 높이(0 ~ 88px)는 «한결같이» 진하게 깐다 — 흐려지기 시작하는 자리가 글자 위에
      오면 흰 사진에서 흰 글자가 3.7 : 1 로 묻힌다. check:types 7절이 이 진하기로 대비를 센다. */
.hero.gl-t-scene::before{ content: ""; grid-area: 1 / 1; align-self: start; z-index: 1; height: 200px;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--chip) 82%, transparent) 0,
    color-mix(in srgb, var(--chip) 82%, transparent) 88px, transparent 200px); }
.hero.gl-t-scene > *{ grid-area: 1 / 1; }
.hero.gl-t-scene .hero-photo{ position: relative; z-index: 0; }
.hero.gl-t-scene .hero-veil{ position: relative; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, var(--chip) 84%, transparent) 0%,
    color-mix(in srgb, var(--chip) 40%, transparent) 55%, transparent 88%); }
.hero.gl-t-scene.gl-d-veil-full .hero-veil{ background: color-mix(in srgb, var(--chip) 55%, transparent); }
.hero.gl-t-scene.gl-d-veil-none .hero-veil{ display: none; }
.hero.gl-t-scene .container{ position: relative; z-index: 2; display: flex; flex-direction: column;
  justify-content: flex-end; width: 100%; padding-top: 120px; padding-bottom: clamp(40px, 6vw, 88px); }
.hero.gl-t-scene .hero-inner{ max-width: 640px; }
.hero.gl-t-scene.gl-d-place-center .container{ justify-content: center; align-items: center; text-align: center; }
.hero.gl-t-scene.gl-d-place-center .hero-actions{ justify-content: center; }
.hero.gl-t-scene.gl-d-place-br .container{ align-items: flex-end; text-align: right; }
.hero.gl-t-scene.gl-d-place-br .hero-actions{ justify-content: flex-end; }
.hero.gl-t-scene h1,
.hero.gl-t-scene .eyebrow{ color: var(--ondark-fg); }
.hero.gl-t-scene p.lead{ color: var(--ondark-muted, var(--ondark-fg)); }
.hero.gl-t-scene .hero-actions{ margin-bottom: 0; }
.hero.gl-t-scene .btn-ghost{ color: var(--ondark-fg); border-color: var(--ondark-muted, var(--ondark-fg)); }
.hero.gl-t-scene .btn-primary{ background: var(--ondark-fg); color: var(--chip); }
/* 휴대폰 — 구석 글은 사진 아래로 내려온다(사진 위에 글을 얹으면 좁은 폭에서 읽히지 않는다) */
@media (max-width: 640px){
  .hero.gl-t-scene{ display: block; min-height: 0;
    background: var(--bg); padding: 88px 0 56px; }
  .hero.gl-t-scene::before{ display: none; }
  .hero.gl-t-scene .hero-photo{ aspect-ratio: 4 / 3; }
  .hero.gl-t-scene .hero-veil{ display: none; }
  .hero.gl-t-scene .container{ padding-top: 28px; padding-bottom: 0; align-items: stretch; text-align: left; }
  .hero.gl-t-scene h1{ color: var(--fg-strong); }
  /* 레드팀 3차(2026-09-25) — 이 폭에서는 사진이 아래로 내려가 바탕이 밝다(style.css
     의 늘 어두운 em 색은 위 「사진 위」 자리 몫이다) — 흰/흰 1:1 이 됐다. 밝은 바탕에서는
     원래 accent 원색으로 되돌린다(style.css 기본 .hero h1 em 과 같다). */
  .hero.gl-t-scene h1 em{ color: var(--accent); }
  .hero.gl-t-scene .eyebrow{ color: var(--fg-strong); } /* 대표 결정(2026-09-25 H1) — 밝은 바탕 위 주황 글자 금지 */
  .hero.gl-t-scene p.lead{ color: var(--muted-2); }
  .hero.gl-t-scene .btn-ghost{ color: var(--fg-strong); border-color: var(--line); }
  .hero.gl-t-scene .btn-primary{ background: var(--chip); color: var(--ondark-fg); }
  .hero.gl-t-scene .hero-actions{ justify-content: flex-start; }
}

/* ── 좌우 분할 — 글 왼쪽 · 사진 오른쪽 ─────────────────────────────── */
.hero.gl-t-split .hero-split{ display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero.gl-t-split .hero-inner{ max-width: 600px; }
.hero.gl-t-split .hero-actions{ margin-bottom: 36px; }
.hero.gl-t-split .hero-photo{ aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.hero.gl-t-split.gl-d-ratio-square .hero-photo{ aspect-ratio: 1 / 1; }
.hero.gl-t-split.gl-d-points-off .hero-actions{ margin-bottom: 0; }
@media (min-width: 981px){
  .hero.gl-t-split .hero-split{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero.gl-t-split.gl-d-side-left .hero-photo{ order: -1; }
}

/* ── 숫자 우선 — 사진 없이 제목 아래 숫자가 가로로 ─────────────────── */
.hero.gl-t-numbers .hero-inner{ max-width: 760px; }
.hero.gl-t-numbers .hero-nums{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); }
.hero.gl-t-numbers.gl-d-count-3 .hero-nums{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-num{ padding: 24px 20px 0 0; }
.hero-num + .hero-num{ border-left: 1px solid var(--line); padding-left: 20px; }
.hero-num-v{ display: flex; align-items: baseline; gap: 4px; font-size: var(--t-h2, 40px);
  font-weight: var(--w-display, 700); letter-spacing: var(--ls-h2, -0.03em); color: var(--fg-strong);
  font-variant-numeric: tabular-nums; }
.hero-num-v .unit{ font-size: 18px; color: var(--fg-strong); } /* 대표 결정(2026-09-25 H1) — M2 전수 grep에서 찾음 */
.hero.gl-t-numbers.gl-d-tone-band .hero-num-v .unit{ color: var(--ondark-fg); } /* 어두운 띠 자리 — 자기 바탕이 없어 H-n1 과 같은 함정 */
.hero-num-l{ margin-top: 6px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.hero.gl-t-numbers.gl-d-tone-band{ background: var(--chip); }
.hero.gl-t-numbers.gl-d-tone-band .hero-stripe{ display: none; }
.hero.gl-t-numbers.gl-d-tone-band :is(h1, .hero-num-v){ color: var(--ondark-fg); }
.hero.gl-t-numbers.gl-d-tone-band :is(p.lead, .hero-num-l){ color: var(--ondark-muted, var(--ondark-fg)); }
.hero.gl-t-numbers.gl-d-tone-band :is(.hero-nums, .hero-num + .hero-num){ border-color: color-mix(in srgb, var(--ondark-fg) 22%, transparent); }
.hero.gl-t-numbers.gl-d-tone-band .btn-ghost{ color: var(--ondark-fg); border-color: var(--ondark-muted, var(--ondark-fg)); }
.hero.gl-t-numbers.gl-d-tone-band .btn-primary{ background: var(--ondark-fg); color: var(--chip); }
@media (max-width: 640px){
  .hero.gl-t-numbers .hero-nums{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 셋이면 한 줄씩 — 둘씩 놓으면 셋째가 혼자 남는다 */
  .hero.gl-t-numbers.gl-d-count-3 .hero-nums{ grid-template-columns: minmax(0, 1fr); }
  .hero-num + .hero-num{ border-left: 0; padding-left: 0; }
  .hero.gl-t-numbers.gl-d-count-3 .hero-num + .hero-num{ border-top: 1px solid var(--line); margin-top: 16px; }
  .hero.gl-t-numbers.gl-d-count-3.gl-d-tone-band .hero-num + .hero-num{ border-top-color: color-mix(in srgb, var(--ondark-fg) 22%, transparent); }
}

/* ── 타이포 전면 — 사진 없이 큰 제목 ─────────────────────────────── */
.hero.gl-t-type .hero-inner{ max-width: 980px; }
.hero.gl-t-type h1{ font-size: clamp(44px, 7.4vw, 104px); }
.hero.gl-t-type.gl-d-size-huge h1{ font-size: clamp(52px, 10vw, 148px); line-height: .98; }
.hero.gl-t-type.gl-d-align-center .hero-inner{ margin: 0 auto; text-align: center; }
.hero.gl-t-type.gl-d-align-center :is(p.lead, .hero-points){ margin-left: auto; margin-right: auto; }
.hero.gl-t-type.gl-d-align-center .hero-actions{ justify-content: center; }
.hero.gl-t-type.gl-d-align-center .hero-points li{ padding-left: 0; }
.hero.gl-t-type.gl-d-align-center .hero-points li::before{ display: none; }
.hero.gl-t-type.gl-d-line-on h1{ margin: 0; }

/* ── 세로 쌓기 — 글이 위 · 넓은 띠 사진이 아래 ────────────────────── */
.hero.gl-t-stack{ padding-bottom: 0; }
.hero.gl-t-stack .hero-actions{ margin-bottom: 48px; }
.hero.gl-t-stack .hero-photo{ aspect-ratio: 21 / 9; border-radius: var(--radius-lg); position: relative; z-index: 1; }
.hero.gl-t-stack.gl-d-ratio-wide .hero-photo{ aspect-ratio: 16 / 9; }
.hero.gl-t-stack.gl-d-width-full .hero-photo{ border-radius: 0; }
@media (max-width: 640px){
  .hero.gl-t-stack .hero-photo{ aspect-ratio: 4 / 3; }
}

/* ── 강점 목록 — 선 구분 ─────────────────────────────────────────── */
.why.gl-t-line .why-grid{ gap: 0; }
.why.gl-t-line .why-item{ padding: 8px 32px 8px 0; }
.why.gl-t-line .why-item + .why-item{ border-left: 1px solid var(--line); padding-left: 32px; }
.why.gl-t-line.gl-d-num-off .why-item h3{ margin-top: 0; }
@media (min-width: 981px){
  .why.gl-t-line.gl-d-cols-2 .why-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why.gl-t-line.gl-d-cols-2 .why-item:nth-child(2n+1){ border-left: 0; padding-left: 0; }
  .why.gl-t-line:not(.gl-d-cols-2) .why-item:nth-child(3n+1){ border-left: 0; padding-left: 0; }
  .why.gl-t-line:not(.gl-d-cols-2) .why-item:nth-child(n+4),
  .why.gl-t-line.gl-d-cols-2 .why-item:nth-child(n+3){ margin-top: 32px; }
}
@media (max-width: 980px){
  .why.gl-t-line .why-grid{ grid-template-columns: 1fr; }
  .why.gl-t-line .why-item,
  .why.gl-t-line .why-item + .why-item{ border-left: 0; padding: 22px 0; }
  .why.gl-t-line .why-item + .why-item{ border-top: 1px solid var(--line); }
}

/* ── 강점 목록 — 사진 카드 (제품) ─────────────────────────────────── */
.why.gl-t-card .why-grid{ gap: clamp(16px, 2.4vw, 32px); }
.why-photo{ margin: 0 0 18px; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius-md); background: var(--surface-2); }
.why-photo img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.why.gl-t-card.gl-d-ratio-square .why-photo{ aspect-ratio: 1 / 1; }
.why.gl-t-card .why-item h3{ font-size: 19px; margin-bottom: 8px; }
.why.gl-t-card.gl-d-body-off .why-item h3{ margin-bottom: 0; }
@media (min-width: 981px){
  .why.gl-t-card.gl-d-cols-2 .why-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why.gl-t-card.gl-d-cols-4 .why-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── 숫자 세기 — 칸 수 · 어두운 띠 ─────────────────────────────────── */
@media (min-width: 981px){
  .stats.gl-d-cols-3 .stats-grid,
  .stats.gl-t-band.gl-d-cols-3 .stats-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.stats.gl-t-band{ background: var(--chip); color: var(--ondark-fg); }
.stats.gl-t-band .stat-card{ background: transparent; border-color: color-mix(in srgb, var(--ondark-fg) 22%, transparent); }
.stats.gl-t-band :is(.stat-num, .section-head h2){ color: var(--ondark-fg); }
.stats.gl-t-band :is(.stat-label, .section-head p){ color: var(--ondark-muted, var(--ondark-fg)); }

/* ── 한 문장 — 문장만 ─────────────────────────────────────────────── */
.stmt.gl-t-text .container{ grid-template-columns: minmax(0, 1fr); }
.stmt.gl-t-text.gl-d-width-wide .stmt-line{ max-width: 28em; }
.stmt.gl-t-text.gl-d-align-center .stmt-body{ text-align: center; }
.stmt.gl-t-text.gl-d-align-center .stmt-line{ margin-left: auto; margin-right: auto; }
.stmt.gl-t-text.gl-d-align-center .stmt-actions{ justify-content: center; }


/* ── 첫 화면이 어두운 모양일 때 상단바 (레드팀 H1 · 2026-09-24) ─────────────────
   상단바는 맨 위에서 투명하다(.nav — 굴리면 .scrolled 가 유리 바탕을 깐다). 밝은 화면인데
   첫 화면이 어두우면(현장 전면 · 숫자 우선 «어두운 띠») 메뉴 글자(--muted-2)와 로고가
   어두운 바탕에 묻힌다(약 2.6 : 1). 렌더러가 그때만 상단바에 표시를 붙인다(gl-render.js
   heroOnDark) — gl-nav-dark 는 모든 폭, gl-nav-dark-wide 는 휴대폰을 뺀 폭
   (휴대폰의 현장 전면은 사진이 글 위로 올라가 바탕이 밝다).
   🔴 색은 역할 토큰만 — 어두운 바탕 위 글자(--ondark-fg · --ondark-muted). check:types 가 대비를 센다. */
.nav.gl-nav-dark:not(.scrolled) :is(.nav-links a, .logo-mark .logo-text, .nav-lang, .nav-mode){ color: var(--ondark-fg); }
.nav.gl-nav-dark:not(.scrolled) .logo-mark .logo-en{ color: var(--ondark-fg); }
.nav.gl-nav-dark:not(.scrolled) .nav-burger{ background: transparent; border-color: color-mix(in srgb, var(--ondark-fg) 40%, transparent); }
.nav.gl-nav-dark:not(.scrolled) .nav-burger span,
.nav.gl-nav-dark:not(.scrolled) .nav-burger span::before,
.nav.gl-nav-dark:not(.scrolled) .nav-burger span::after{ background: var(--ondark-fg); }
.nav.gl-nav-dark:not(.scrolled) .nav-cta{ background: var(--ondark-fg); color: var(--chip); }
/* 밝은 바탕색을 직접 칠한 첫 위젯 — 어두운 화면에서도 상단바 글자를 어두운 색으로 */
.nav.gl-nav-light:not(.scrolled) :is(.nav-links a, .logo-mark .logo-text, .nav-lang, .nav-mode){ color: var(--chip); }
.nav.gl-nav-light:not(.scrolled) .logo-mark .logo-en{ color: color-mix(in srgb, var(--chip) 75%, transparent); }
.nav.gl-nav-light:not(.scrolled) .nav-burger{ background: transparent; border-color: color-mix(in srgb, var(--chip) 35%, transparent); }
.nav.gl-nav-light:not(.scrolled) .nav-burger span,
.nav.gl-nav-light:not(.scrolled) .nav-burger span::before,
.nav.gl-nav-light:not(.scrolled) .nav-burger span::after{ background: var(--chip); }
/* 반전한 첫 위젯 — 상단바도 «반대 모드» 색을 입는다. 값은 gl-theme.js 가 .gl-iv-on 과 같은 규칙에 넣는다
   (브랜드 테마가 없을 때의 대체값은 gl-style.css). 색을 여기 새로 적지 않는다. */
@media (min-width: 641px){
  .nav.gl-nav-dark-wide:not(.scrolled) :is(.nav-links a, .logo-mark .logo-text, .nav-lang, .nav-mode){ color: var(--ondark-fg); }
  .nav.gl-nav-dark-wide:not(.scrolled) .logo-mark .logo-en{ color: var(--ondark-fg); }
  .nav.gl-nav-dark-wide:not(.scrolled) .nav-burger{ background: transparent; border-color: color-mix(in srgb, var(--ondark-fg) 40%, transparent); }
  .nav.gl-nav-dark-wide:not(.scrolled) .nav-burger span,
  .nav.gl-nav-dark-wide:not(.scrolled) .nav-burger span::before,
  .nav.gl-nav-dark-wide:not(.scrolled) .nav-burger span::after{ background: var(--ondark-fg); }
  .nav.gl-nav-dark-wide:not(.scrolled) .nav-cta{ background: var(--ondark-fg); color: var(--chip); }
}