/* 에디터로 짠 화면에서만 쓰는 블록들 (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; }
}

/* ══ 구역 간격 «고르게» — site.layout.spacing = "even" (2026-10-02) ══════════════
   클래스는 렌더러가 붙인다(gl-render.js evenClasses — 이웃의 «띠» 를 보고). 적지 않은 사이트에는
   이 클래스가 하나도 없다 — 아래 규칙은 한 줄도 걸리지 않는다.
     gl-ev       여백을 한 척도로 — 위아래 --sp-section (좁게 0.5배 · 넓게 1.5배)
     gl-ev-page  «고른 띠» 가 아닌 구역 — 위젯마다 다르던 기본 바탕을 페이지 바탕 하나로
     gl-ev-join  앞 구역과 같은 띠 — 위 여백을 접는다(구역 사이 = 한 칸)
     gl-ev-lead  제목 묶음이 같은 띠의 다음 구역에 붙는다(제목과 내용 사이 = --sp-head)
   🔴 띠가 바뀌는 경계에는 join · lead 가 붙지 않는다 — 글 · 카드 · 버튼이 띠 가장자리에 닿지 않는다. */
.gl-ev { padding-top: var(--sp-section) !important; padding-bottom: var(--sp-section) !important; }
.gl-ev.gl-pad-tight { padding-top: calc(var(--sp-section) * .5) !important; padding-bottom: calc(var(--sp-section) * .5) !important; }
.gl-ev.gl-pad-wide  { padding-top: calc(var(--sp-section) * 1.5) !important; padding-bottom: calc(var(--sp-section) * 1.5) !important; }
:is(section, header, div).gl-ev-page { background: var(--bg); }
.gl-ev.gl-ev-join { padding-top: 0 !important; }
/* 섹션 제목 — 안쪽 .section-head 의 아래 여백(--sp-head)이 제목과 내용 사이가 된다 */
.gl-ev.gl-ev-lead { padding-bottom: 0 !important; }
/* 첫 화면 — 위 여백은 상단바 자리라 그대로 두고, 아래만 제목과 내용 사이로 */
.hero.gl-ev-lead { padding-bottom: var(--sp-head) !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) {
  .gl-showcase[data-showcase-mode="story"] { position: relative; padding-left: 16px; }
  .gl-showcase[data-showcase-mode="story"] .gl-showcase-progress { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--line); pointer-events: none; }
  .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); word-break: keep-all; text-wrap: balance; }   /* 2026-10-03 — 한글이 음절 사이(«누구 / 나»)에서 끊기지 않게 · 넘치면 줄 길이를 고르게 */
/* 보통 — 긴 제목(세 낱말 이상 · 약 13em)이 한 줄에 들어가는 크기(2026-10-03 마르다 «언제나, 어디서든, 누구나»). 375 · 1000 · 1440 폭에서 980 기둥 안 */
.hero.gl-t-type.gl-d-size-medium h1{ font-size: clamp(24px, 5.6vw, 72px); line-height: 1.12; }
.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; }
/* 가운데 정렬의 요약 줄 — 세로 목록이 아니라 한 줄에 나란히(2026-10-04 · 요금 · 상품 첫 화면의 «요약 칩» 패턴). 좁으면 줄을 바꾼다 */
.hero.gl-t-type.gl-d-align-center .hero-points{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; max-width: 720px; }
.hero.gl-t-type.gl-d-align-center .hero-points li{ padding-left: 18px; }
.hero.gl-t-type.gl-d-align-center .hero-points li::before{ top: .55em; width: 9px; height: 5px; background: none;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.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-item :is(h3, p){ word-break: keep-all; overflow-wrap: break-word; }   /* 2026-10-03 — «있습 / 니다» 처럼 음절 사이에서 끊기지 않게(:775 · :826 과 같은 규칙) */
.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; }
/* 원본 비율 (2026-10-04) — 프로그램 화면처럼 잘리면 안 되는 사진(마르다 «상품» 카드의 앱 화면이 4:3 으로 잘려 왼쪽 메뉴가 사라졌다) */
.why.gl-t-card.gl-d-ratio-auto .why-photo{ aspect-ratio: auto; }
.why.gl-t-card.gl-d-ratio-auto .why-photo img{ height: auto; object-fit: contain; }
/* 번호 목록(기본 모양) 열 수 — 2026-10-03 · 넷을 셋 칸에 두면 넷째가 혼자 남는다(마르다 «주요 기능») */
@media (min-width: 981px){
  .why:not(.gl-t-line):not(.gl-t-card).gl-d-cols-2 .why-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why:not(.gl-t-line):not(.gl-t-card).gl-d-cols-4 .why-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.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)); }
}
/* 하나 (가운데 한 장) — 2026-10-03 · 상품이 하나뿐인 «상품» 구역(마르다). 셋 칸에 한 장을 두면 왼쪽 3분의 1 에만 선다 */
.why.gl-t-card.gl-d-cols-1 .why-grid{ grid-template-columns: minmax(0, 560px); justify-content: center; }
.why.gl-t-card.gl-d-cols-1 :is(.section-head, .why-item){ text-align: center; }
.why.gl-t-card.gl-d-cols-1 .section-head{ margin-left: auto; margin-right: auto; }   /* 제목도 카드와 같은 가운데 축에(2026-10-04) */
.why.gl-t-card.gl-d-cols-1 .why-item h3{ font-size: clamp(22px, 2.4vw, 26px); }
/* 눌렀을 때 갈 곳이 있는 카드 — 카드 전체가 링크(items.to). 사진이 살짝 커지고 제목에 밑줄 · 키보드 초점은 테두리로 */
a.why-item.why-link{ display: block; color: inherit; text-decoration: none; border-radius: var(--radius-md); }
a.why-item.why-link .why-photo img{ transition: transform .35s ease; }
a.why-item.why-link:hover .why-photo img{ transform: scale(1.03); }
a.why-item.why-link:hover h3{ text-decoration: underline; text-underline-offset: 5px; }
a.why-item.why-link:focus-visible{ outline: 3px solid var(--accent); outline-offset: 6px; }
/* 버튼 글(items.cta · 2026-10-04) — 카드가 무엇을 하러 가는지 버튼 모양으로(카드 전체가 링크라 안쪽은 글자). 가운데 한 장이면 가운데에 */
a.why-item.why-link .why-cta{ display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; min-height: 44px; padding: 10px 22px;
  border-radius: var(--radius-sm, 8px); background: var(--chip); color: var(--ondark-fg); font-size: 15px; font-weight: 700; line-height: 1.4; transition: background-color .2s ease; }
a.why-item.why-link .why-cta::after{ content: "→"; }
a.why-item.why-link:hover .why-cta{ background: var(--accent); }
a.why-item.why-link:has(.why-cta):hover h3{ text-decoration: none; }
@media (prefers-reduced-motion: reduce){
  a.why-item.why-link .why-photo img{ transition: none; }
  a.why-item.why-link:hover .why-photo img{ transform: none; }
  a.why-item.why-link .why-cta{ transition: none; }
}

/* ── 숫자 세기 — 칸 수 · 어두운 띠 ─────────────────────────────────── */
@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)); }
}
/* 아래 작은 안내 (2026-10-02) — 숫자에 딸린 조건 · 요약. 본문보다 한 단계 작고 흐리게 — 시선을 끌지 않는다.
   «정본은 약관» 같은 법무 요약을 숫자 바로 밑에 붙일 때 쓴다(따로 큰 제목 구역을 만들지 않는다).
   고도화 3차(2026-10-03 · martha-dev/docs/10) — 글 · 크기(13px) · 흐린 글자는 그대로 두고 자리만 맞춘다:
   · 숫자 칸과의 간격은 칸 사이 간격과 같은 24px — 종전 28px 는 «거의 같지만 다른» 값이라 안내가 칸 줄에서 살짝 떠 보였다
   · 읽는 폭은 제목 묶음(.section-head)과 같은 640px — 제목 · 설명 · 안내가 한 시작선 · 한 끝선에 선다(종전 760px 은 그 줄 혼자 길었다)
   · 줄간격은 본문 토큰(--lh-text) — 1.75 라는 네 번째 줄간격을 만들지 않는다 · 한글은 낱말 중간에서 줄을 바꾸지 않는다
   · 글자 링크는 흐린 밑줄 → 올리면 진하게 · 초점 고리 (구독 · 라이선스 화면의 글자 링크와 같은 반응) */
.stats.gl-d-cols-2 .stats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 한 상자로 — 가운데 한 장(테두리) 안에 숫자 칸 · 가는 선 · 작은 안내(2026-10-03). 칸마다의 테두리는 지우고 상자 하나만 */
.stats.gl-d-box-on .stats-box{ max-width: 760px; margin: 0 auto; padding: 32px 36px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.stats.gl-d-box-on .stat-card{ border: 0; background: none; padding: 0; text-align: center; }
.stats.gl-d-box-on .stat-num{ justify-content: center; }   /* 숫자 · 라벨이 같은 가운데 선에(2026-10-03 — 숫자만 왼쪽에 붙어 어긋났다) */
.stats.gl-d-box-on .section-head{ text-align: center; margin-left: auto; margin-right: auto; }
.stats.gl-d-box-on .stats-box-name{ margin: 0 0 6px; text-align: center; font-size: 22px; font-weight: 700; color: var(--fg-strong, var(--fg)); }
.stats.gl-d-box-on .stats-box-desc{ margin: 0 0 26px; text-align: center; color: var(--muted); }
.stats.gl-d-box-on .stats-box-actions{ display: flex; justify-content: center; margin: 26px 0 0; }
.stats.gl-d-box-on .stats-note{ max-width: none; margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
@media (max-width: 600px){ .stats.gl-d-box-on .stats-box{ padding: 24px 20px; } .stats.gl-d-box-on.gl-d-cols-2 .stats-grid{ grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.stats-note{ margin: 24px 0 0; max-width: 640px; font-size: 13px; line-height: var(--lh-text); color: var(--muted);
  word-break: keep-all; overflow-wrap: break-word; }
.stats-note strong{ color: var(--fg); font-weight: 700; }
.stats-note a{ color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color .16s ease; }
.stats-note a:hover{ text-decoration-color: currentColor; }
.stats-note a:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.stats.gl-t-band .stats-note{ color: var(--ondark-muted, var(--ondark-fg)); }
.stats.gl-t-band .stats-note strong{ color: var(--ondark-fg); }
@media (prefers-reduced-motion: reduce){
  .stats-note a{ transition: none; }
}
.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)); }

/* ── 다운로드 버튼 (2026-10-02 대표님 «누르면 동작할 것 같은데 버튼이 아니다») ─────────
   운영체제 아이콘 + 작은 글자(지원 판) + 굵은 글자(버튼 이름) — 원본 홈의 내려받기 버튼과 같은 짜임.
   버튼은 «눌리는 것» 으로 보여야 한다 — 테두리 · 바탕 · 올라옴(hover) · 초점 테두리(focus-visible).
   🔴 «준비 중» 버튼도 같은 모양이다(누르면 아래 안내가 떠오른다). 흐리게 죽여 두면 «눌러지지 않는 버튼» 이 다시 생긴다.
   🔴 색은 역할 토큰만 — 반전(어두운 띠) 안에서는 역할 색이 함께 뒤집혀 따로 칠할 것이 없다. */
/* 버튼 폭은 모두 같다 — 글 길이(«Windows용» · «macOS용»)에 따라 폭이 달라지면 두 버튼이 짝으로 안 읽힌다.
   고도화 3차(2026-10-03 · martha-dev/docs/10) — 글 · 동작(gl-download.js) · 마크업은 그대로. 바뀐 것:
   · 버튼 둘은 같은 폭(304px) · 같은 높이 — 줄(align-items: stretch)에서 가장 큰 것에 맞추고 바닥은 44px(입력칸 · 쇼핑 버튼과 같은 높이)
   · 반응 셋이 한 벌 · 같은 160ms — hover 테두리 강조색 + 2px 떠오름 · active(누르는 순간) 제자리로 내려앉음 · focus-visible 강조색 고리 2px
   · «준비 중» 안내는 주황 띠(강조색 테두리 + 바탕 + 0.9초 번지는 테두리)가 아니라 설계된 칸 — 구독 · 라이선스 화면의 상태 칸과 같은
     모양(선 테두리 · 바탕 · 왼쪽 24px 아이콘 칸 + 글). 아이콘은 시계(SVG 가림판 · 강조색) 하나뿐이라 주황은 거기에만 있다.
     펴질 때 4px 아래에서 180ms 떠오른다 · 움직임을 줄인 기기에서는 전환 없이 바로 선다
   🔴 check:dl-buttons 가 글자 그대로 보는 줄 — «.gl-dl-soon-note { display: none;» · «:target, .on { display: block; }» ·
      «.gl-dl-btn:focus-visible { outline: 2px solid var(--accent)» · 움직임 줄이기 블록의 첫 줄 «.gl-dl-btn { transition: none; }» */
.gl-dl-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.gl-dl-btn {
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 16px;
  flex: 0 1 304px; min-width: 248px; min-height: 44px; padding: 16px 20px;
  border: 1px solid color-mix(in srgb, var(--fg-strong) 22%, transparent);
  border-radius: var(--radius-md);
  background: var(--surface); color: var(--fg-strong);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease;
}
.gl-dl-btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.gl-dl-btn:active { transform: translateY(0); border-color: var(--accent); }
.gl-dl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gl-dl-ico { width: 24px; height: 24px; flex: none; }
.gl-dl-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; line-height: 1.3; text-align: left; }
.gl-dl-txt small { font-size: 13px; color: var(--muted); }
.gl-dl-txt strong { font-size: 16px; font-weight: 700; }
.gl-dl-badge { margin-left: auto; padding: 4px 8px; border-radius: calc(var(--radius-sm) / 2); background: var(--accent-soft);
  color: var(--fg-strong); font-size: 12px; font-weight: 700; white-space: nowrap; }
/* 버튼 아래 한 줄 — 안내 칸과 같은 읽는 폭(624px = 버튼 둘 + 사이 16px). 줄간격은 본문 토큰 */
.gl-dl-note { margin: 24px 0 0; max-width: 624px; font-size: 14px; line-height: var(--lh-text); color: var(--muted); word-break: keep-all; overflow-wrap: break-word; }
:is(.gl-dl-note, .gl-dl-soon-note) a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color .16s ease; }
:is(.gl-dl-note, .gl-dl-soon-note) a:hover { text-decoration-color: currentColor; }
:is(.gl-dl-note, .gl-dl-soon-note) a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
/* 준비 중 안내 — 누르기 전에는 접혀 있다(소리로 읽는 분께는 버튼의 설명(aria-describedby)으로 먼저 읽힌다).
   누르면 gl-download.js 가 .on 을 붙이고 초점을 옮긴다 · 스크립트가 없으면 #주소(:target)로 같은 모양.
   폭 624px = 버튼 둘(304 + 16 + 304) — 버튼 줄의 끝선과 안내의 끝선이 같다.
   왼쪽 여백 60px 은 «아이콘 칸»(24px 아이콘 + 12px 사이 + 24px 테두리 안 여백)이라 오른쪽(24px)과 일부러 다르다 —
   display 가 block 이어야 해서(위 🔴) 상태 칸처럼 grid 두 칸으로 못 가르고, 아이콘을 그 여백 안에 absolute 로 놓는다 */
.gl-dl-soon-note { display: none; position: relative; box-sizing: border-box; margin: 16px 0 0; max-width: 624px; padding: 20px 24px 20px 60px;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
  color: var(--fg); font-size: 15px; line-height: 1.6; text-align: left; word-break: keep-all; overflow-wrap: break-word; }
.gl-dl-soon-note::before { content: ""; position: absolute; left: 24px; top: 20px; width: 24px; height: 24px; background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='M12 7.25V12l3.25 2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='M12 7.25V12l3.25 2'/%3E%3C/svg%3E") center / contain no-repeat; }
.gl-dl-soon-note:target, .gl-dl-soon-note.on { display: block; }
.gl-dl-soon-note:focus { outline: none; }
/* 펴질 때 — 4px 아래에서 떠오르며 나타난다(180ms). 다시 누르면 gl-download.js 가 .gl-dl-flash 를 떼었다 붙여 한 번 더 떠오른다 */
.gl-dl-soon-note:target, .gl-dl-soon-note.gl-dl-flash { animation: gl-dl-flash .18s ease both; }
@keyframes gl-dl-flash { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* 가운데 정렬 — 버튼 줄 · 안내 칸 · 아래 한 줄이 한 축에 선다(안내 칸 안의 글은 아이콘 옆이라 왼쪽 정렬 그대로) */
.gl-al-center .gl-dl-row { justify-content: center; }
.gl-al-center :is(.gl-dl-soon-note, .gl-dl-note) { margin-left: auto; margin-right: auto; }
@media (max-width: 600px) {
  .gl-dl-btn { flex-basis: 100%; width: 100%; min-width: 0; }
  .gl-dl-soon-note { padding: 16px 16px 16px 52px; }
  .gl-dl-soon-note::before { left: 16px; top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .gl-dl-btn { transition: none; }
  .gl-dl-btn:hover { transform: none; }
  .gl-dl-btn:active { transform: none; }
  .gl-dl-soon-note:target, .gl-dl-soon-note.gl-dl-flash { animation: none; }
  :is(.gl-dl-note, .gl-dl-soon-note) a { transition: none; }
}

/* ── 한 문장 — 문장만 ─────────────────────────────────────────────── */
.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; }

/* 한 문장 «조각이 모여 준비되는 장면» — 문서 35 · 2026-10-17.
   흩어진 아홉 조각 → 정돈된 판. 글은 HTML 그대로, 장식만 별도이며 선택한 문장에만 적용한다. */
.stmt.gl-d-scene-geometry { position: relative; isolation: isolate; overflow: hidden; }
.stmt.gl-d-scene-geometry .container { position: relative; z-index: 1; min-height: clamp(400px, 43vw, 620px); align-items: center; }
.stmt.gl-d-scene-geometry .stmt-line { font-size: clamp(32px, 4.6vw, 68px); line-height: 1.35; }
.stmt-scene { position: absolute; inset: 0; container-type: size; --scene-x: 78cqw; --scene-y: 7cqh; --scene-step: clamp(32px, 4.5vw, 66px); pointer-events: none; color: var(--accent); }
.stmt-scene::before { content: ""; position: absolute; width: clamp(180px, 25vw, 380px); aspect-ratio: 1;
  left: -6%; bottom: -8%; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 50%;
  box-shadow: 0 0 0 28px color-mix(in srgb, var(--accent) 5%, transparent), 0 0 0 64px color-mix(in srgb, var(--accent) 3%, transparent);
  transition: transform 3.6s cubic-bezier(.2,.35,.3,1), opacity 2s ease; }
.js .stmt[data-gl="spin"]:not(.gl-in) .stmt-scene::before { transform: scale(1.25); opacity: .3; }
.stmt-piece { position: absolute; width: clamp(28px, 4vw, 58px); aspect-ratio: 1;
  left: calc(78% + var(--col) * clamp(32px, 4.5vw, 66px)); top: calc(7% + var(--row) * clamp(32px, 4.5vw, 66px));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transition: transform 2.8s cubic-bezier(.25,.45,.25,1);
  transition-delay: calc(350ms + var(--n) * 65ms); }
.stmt-piece-0 { --col: 0; --row: 0; --n: 0; --x: 9cqw; --y: 12cqh; --turn: -35deg; border-radius: 50% 50% 0 50%; }
.stmt-piece-1 { --col: 1; --row: 0; --n: 1; --x: 40cqw; --y: 3cqh; --turn: 75deg; border-radius: 50%; }
.stmt-piece-2 { --col: 2; --row: 0; --n: 2; --x: 86cqw; --y: 24cqh; --turn: -65deg; border-radius: 50% 0 0 0; }
.stmt-piece-3 { --col: 0; --row: 1; --n: 3; --x: 19cqw; --y: 74cqh; --turn: 120deg; border-radius: 0 50% 0 50%; }
.stmt-piece-4 { --col: 1; --row: 1; --n: 4; --x: 71cqw; --y: 82cqh; --turn: -90deg; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.stmt-piece-5 { --col: 2; --row: 1; --n: 5; --x: 90cqw; --y: 65cqh; --turn: 35deg; border-radius: 50%; }
.stmt-piece-6 { --col: 0; --row: 2; --n: 6; --x: 4cqw; --y: 52cqh; --turn: -130deg; border-radius: 0 0 0 50%; }
.stmt-piece-7 { --col: 1; --row: 2; --n: 7; --x: 52cqw; --y: 89cqh; --turn: 65deg; border-radius: 50% 0 50% 0; }
.stmt-piece-8 { --col: 2; --row: 2; --n: 8; --x: 65cqw; --y: 8cqh; --turn: -45deg; border-radius: 0 0 50% 0; }
.js .stmt[data-gl="spin"]:not(.gl-in) .stmt-piece { transform: translate(calc(var(--x) - var(--scene-x) - var(--col) * var(--scene-step)), calc(var(--y) - var(--scene-y) - var(--row) * var(--scene-step))) rotate(var(--turn)); }
@media (max-width: 720px) {
  .stmt.gl-d-scene-geometry .container { min-height: 460px; }
  .stmt-scene { --scene-x: 66cqw; --scene-y: 3cqh; --scene-step: 32px; }
  .stmt-piece { left: calc(66% + var(--col) * 32px); top: calc(3% + var(--row) * 32px); }
  .stmt-scene::before { left: -18%; bottom: 2%; }
}
@media (prefers-reduced-motion: reduce) {
  .stmt-piece, .stmt-scene::before { transition: none !important; }
  .js .stmt[data-gl="spin"]:not(.gl-in) .stmt-scene::before { transform: none; opacity: 1; }
  .js .stmt[data-gl="spin"]:not(.gl-in) .stmt-piece { transform: none; }
}


/* ── 도움말 — 문서 사이트 (2026-10-02 · 왼쪽 목차 · 본문 · 이 페이지 목차) ─────────────
   짜임 전체는 그 위젯만 데려오는 gl-guide.css 에 있다(이 파일은 모든 화면이 읽는다 — 문서 화면의 긴 규칙을 싣지 않는다).
   여기는 모양이 정하는 «틀의 폭» 한 줄 — 상단바와 같은 기둥(--container). 종전 1440px 은 목차가 상단바보다 바깥에서
   시작해 어긋나 보였다(2026-10-02 대표님 위임 «상단바 1180 에 맞춤»). 세 칸은 gl-guide.css 의 칸 폭을 줄여 맞춘다. */
.gl-guide.gl-t-docs > .container{ max-width: var(--container); }


/* ── 첫 화면이 어두운 모양일 때 상단바 (레드팀 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); }
/* 넓은 로고(CI) — 어두운 첫 화면 위 투명 상단바에서는 어두운 화면용 파일, 밝은 바탕색 첫 위젯 위에서는 밝은 화면용 파일 (style.css .logo-wide) */
.nav.gl-nav-dark:not(.scrolled) .logo-wide.has-dark .lw-light{ display: none; }
.nav.gl-nav-dark:not(.scrolled) .logo-wide.has-dark .lw-dark{ display: block; }
@media (min-width: 641px){
  .nav.gl-nav-dark-wide:not(.scrolled) .logo-wide.has-dark .lw-light{ display: none; }
  .nav.gl-nav-dark-wide:not(.scrolled) .logo-wide.has-dark .lw-dark{ display: block; }
}
.nav.gl-nav-light:not(.scrolled) .logo-wide.has-dark .lw-light{ display: block; }
.nav.gl-nav-light:not(.scrolled) .logo-wide.has-dark .lw-dark{ display: none; }
/* 밝은 바탕색을 직접 칠한 첫 위젯 — 어두운 화면에서도 상단바 글자를 어두운 색으로.
   🔴 «어두운 글자» 는 --chip-ink 로 읽는다. 어두운 칩 브랜드는 정의가 없어 --chip 그대로이고,
   버튼색이 밝은 브랜드(chip 이 onChip 보다 밝음)는 gl-theme.js 가 onChip 을 넣어 준다 — 밝은 바탕 위 주황 글자 2.73:1 방지 */
.nav.gl-nav-light:not(.scrolled) :is(.nav-links a, .logo-mark .logo-text, .nav-lang, .nav-mode){ color: var(--chip-ink, var(--chip)); }
.nav.gl-nav-light:not(.scrolled) .logo-mark .logo-en{ color: color-mix(in srgb, var(--chip-ink, var(--chip)) 75%, transparent); }
.nav.gl-nav-light:not(.scrolled) .nav-burger{ background: transparent; border-color: color-mix(in srgb, var(--chip-ink, 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-ink, 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); }
}

/* ── 강점 목록 — 제품 카드: 아이콘·이름을 상단에 묶고 설명과 링크를 아래로 분리. 카드 전체가 링크. ── */
.why.gl-t-product .why-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.why.gl-t-product.gl-d-cols-2 .why-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.why.gl-t-product.gl-d-cols-4 .why-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.why.gl-t-product.gl-d-cols-1 .why-grid{ grid-template-columns: minmax(0, 560px); }
.why.gl-t-product .why-item.why-prod{ position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; grid-template-rows: auto auto auto 1fr; align-items: start; gap: 0 13px; padding: 24px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--fg); text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease; }
.why.gl-t-product a.why-prod:hover{ border-color: color-mix(in srgb, var(--line) 65%, var(--muted)); box-shadow: 0 4px 16px color-mix(in srgb, var(--fg) 3%, transparent); transform: none; }
.why.gl-t-product a.why-prod:hover h3{ text-decoration: none; }
.why.gl-t-product a.why-prod:focus-visible{ outline: 3px solid var(--accent); outline-offset: 3px; }
.why.gl-t-product a.why-prod::after{ content: "↗"; grid-column: 3; grid-row: 1 / span 2; color: var(--muted); font-size: 18px; line-height: 1.4; }
.why-icon{ grid-column: 1; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm, 8px); overflow: hidden; }
.why-icon img{ display: block; width: 44px; height: 44px; object-fit: contain; }
.why-prod-text{ display: contents; }
/* 두 줄 제품 이름의 묶음 — 아이콘 높이 = 글자 묶음 전체 높이(이름 두 줄 + 부제), 위·아래 끝선 맞춤 (대표님 2026-10-19).
   글자 묶음 높이는 줄 높이로 정해져 있다: 이름 2줄 × 1.08 × 글자 크기 + 부제(여백 4px + 12px × 1.5). 아이콘 한 변이 그 값. */
.why.gl-t-product .why-item.why-prod:has(h3 br) { --lock-f: clamp(28px, 2.3vw, 34px); --lock-h: calc(var(--lock-f) * 2.16 + 22px); grid-template-columns: var(--lock-h) minmax(0, 1fr) 16px; column-gap: 16px; }
.why.gl-t-product .why-item.why-prod:has(h3 br) .why-icon,
.why.gl-t-product .why-item.why-prod:has(h3 br) .why-icon img { width: var(--lock-h); height: var(--lock-h); }
.why.gl-t-product .why-item.why-prod:has(h3 br) h3 { font-size: var(--lock-f); line-height: 1.08; letter-spacing: -.035em; font-weight: 700; }
.why-prod-head{ grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.why.gl-t-product .why-prod h3{ margin: 0; font-family: var(--font-family); font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--fg-strong, var(--fg)); }
.why-sub{ grid-column: 2; grid-row: 2; margin-top: 4px; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--muted); }
.why.gl-t-product .why-prod p{ grid-column: 1 / -1; grid-row: 3; margin: 27px 0 23px; font-size: 14px; line-height: 1.8; color: var(--muted); word-break: keep-all; }
.why-badge{ padding: 2px 10px; border-radius: 999px; background: var(--accent-soft, var(--surface-2)); color: var(--fg-strong, var(--fg)); font-size: 12px; font-weight: 700; line-height: 1.5; }
.why-more{ grid-column: 1 / -1; grid-row: 4; align-self: end; margin-top: auto; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--fg-strong, var(--fg)); }
.why-more > span{ display: inline-block; margin-left: 4px; transition: transform .18s ease; }
.why-arrow{ grid-column: 1 / -1; grid-row: 4; align-self: end; color: var(--muted); font-size: 18px; transition: transform .18s ease; }
.why.gl-t-product a.why-prod:hover .why-more > span{ transform: translateX(3px); }
@media (max-width: 980px){ .why.gl-t-product:not(.gl-d-cols-1) .why-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){ .why.gl-t-product .why-grid, .why.gl-t-product:not(.gl-d-cols-1) .why-grid{ grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px){ .why.gl-t-product .why-item.why-prod{ padding: 21px; } .why.gl-t-product .why-prod h3{ font-size: 16px; } }
@media (prefers-reduced-motion: reduce){
  .why.gl-t-product a.why-prod, .why-arrow, .why-more > span{ transition: none; }
  .why.gl-t-product a.why-prod:hover .why-more > span{ transform: none; }
}

/* ── 제품 메뉴 줄 (2026-10-04 · product-bar) ─────────────────────────────────────────
   상단바(.nav · fixed) 바로 아래에 붙는다 — sticky(스크립트 없이 붙는다 · 높이만 gl-nav.js 가 재어 준다).
   맨 위에서는 상단바 밑에 서고, 다음 첫 화면은 줄 높이만큼 덜 내려온다.
   앵커로 설 때 이 줄에 가리지 않게 scroll-margin 에 줄 높이(--gl-pbar-h)를 더한다 */
:root{ --gl-pbar-h: 56px; }
/* 상단바 높이 = 안쪽(--gl-nav-c · gl-nav.js 가 잰다 · 없으면 엔진 기본 40px) + 위아래 여백(맨 위 18+18 · 스크롤 뒤 12+12 · style.css .nav) + 밑줄 1 */
.gl-pbar{ position: sticky; top: calc(var(--gl-nav-c, 40px) + 2 * 12px + 1px); z-index: 90; background: var(--glass, var(--bg));
  backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); }
.nav + .gl-pbar{ margin-top: calc(var(--gl-nav-c, 40px) + 2 * 18px + 1px); }
.gl-pbar + .hero{ padding-top: 96px; }
html:has(.gl-pbar) [id]{ scroll-margin-top: calc(var(--gl-nav-c, 40px) + 2 * 12px + 1px + var(--gl-pbar-h) + var(--anchor-gap)); }
.gl-pbar .container{ display: flex; align-items: center; gap: 24px; min-height: var(--gl-pbar-h); }
.gl-pbar-name{ display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; }
.gl-pbar-icon{ width: 24px; height: 24px; object-fit: contain; }
.gl-pbar-name strong{ font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--fg-strong, var(--fg)); white-space: nowrap; }
.gl-pbar-badge{ padding: 2px 8px; border-radius: 999px; background: var(--accent-soft, var(--surface-2)); color: var(--fg-strong, var(--fg)); font-size: 12px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.gl-pbar-links{ display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.gl-pbar-links::-webkit-scrollbar{ display: none; }
.gl-pbar-links a{ flex: none; padding: 8px 12px; border-radius: var(--radius-sm, 8px); color: var(--muted-2, var(--muted)); font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap; text-decoration: none; }
.gl-pbar-links a:hover{ color: var(--fg-strong, var(--fg)); background: var(--surface-2); }
.gl-pbar-links a:focus-visible, .gl-pbar-acts .btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.gl-pbar-acts{ display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.gl-pbar-acts .btn{ min-height: 36px; padding: 6px 16px; font-size: 14px; white-space: nowrap; }
/* 요금제 유무 갈래(actions[].when) — 기본은 «있을 때» 쪽. 요금표 스크립트가 <html data-gl-plans="none"> 을 달면 «없을 때» 쪽 */
.gl-pbar-acts [data-gl-when="noplans"]{ display: none; }
:root[data-gl-plans="none"] .gl-pbar-acts [data-gl-when="plans"]{ display: none; }
:root[data-gl-plans="none"] .gl-pbar-acts [data-gl-when="noplans"]{ display: inline-flex; }
/* 휴대폰 폭 — 줄 하나(이름 + 메뉴 가로 밀기 · 줄바꿈 없음). 버튼은 줄에서 빠져 화면 아래 붙는 줄로(누르는 칸 44px 이상).
   아래 줄이 바닥글을 가리지 않게 화면 끝에 그만큼 여백 */
@media (max-width: 760px){
  :root{ --gl-pbar-h: 52px; }
  /* 흐림(backdrop-filter)은 안쪽 fixed 의 기준을 줄 자신으로 바꾼다 — 아래 붙는 버튼 줄이 화면 아래로 못 간다. 휴대폰 폭에서는 흐림 없이 바탕색 */
  .gl-pbar{ backdrop-filter: none; background: var(--bg); }
  .gl-pbar .container{ gap: 12px; }
  .gl-pbar-badge{ display: none; }
  .gl-pbar-links a{ padding: 8px 8px; }
  .gl-pbar-acts{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; margin: 0; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--glass, var(--bg)); backdrop-filter: blur(14px) saturate(140%); border-top: 1px solid var(--line); }
  .gl-pbar-acts .btn{ flex: 1; min-height: 44px; justify-content: center; font-size: 15px; }
  body:has(.gl-pbar-acts){ padding-bottom: 64px; }
  body:has(.gl-pbar-acts) .gl-tint{ bottom: calc(16px + 64px); }   /* 색 바꾸기 버튼이 아래 버튼 줄에 가리지 않게 */
  .gl-pbar + .hero{ padding-top: 64px; }
}


/* ═══ photo 의 다른 타입 — 전후 비교 · 화면 스크롤 보기 (문서 35 · 2026-10-13) ═══════════════════
   제이터(Jitter) «Before & After: Swipe» · «Website Promo» 의 움직임을 자체 구현했다(에셋은 쓰지 않는다).
   🔴 색은 역할 토큰만 쓴다(밝게/어둡게가 저절로 뒤집힌다) · 움직임은 transform · clip-path · opacity 로만 · 움직임 줄이기는 정지한 모양.
   🔴 gl-photo.js 가 안 돌아도 보인다: 전후 비교는 가운데 손잡이(입력 칸이라 스크립트 없이도 끌린다) · 화면 스크롤은 맨 위 화면. */

/* ── 전후 비교 — 위 사진(전)을 손잡이 왼쪽만 보이게 자른다. --p = 손잡이 자리(왼쪽에서 몇 %) ── */
.gl-compare-stage {
  position: relative; overflow: hidden; --p: 50%;
  aspect-ratio: 16 / 9; border-radius: var(--r-lg, 20px); background: var(--surface-2);
  touch-action: pan-y;               /* 세로로 넘기는 손은 페이지가 받고, 가로로 끄는 손은 손잡이가 받는다 */
}
.gl-t-compare.gl-d-ratio-photo  .gl-compare-stage { aspect-ratio: 4 / 3; }
.gl-t-compare.gl-d-ratio-square .gl-compare-stage { aspect-ratio: 1 / 1; }
.gl-t-compare.gl-d-start-before .gl-compare-stage { --p: 70%; }
.gl-t-compare.gl-d-start-after  .gl-compare-stage { --p: 30%; }
.gl-compare-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  user-select: none; -webkit-user-drag: none;
}
.gl-compare-before { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.gl-compare-tag {
  position: absolute; top: 14px; z-index: 2; pointer-events: none;
  padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.5;
  background: var(--surface); color: var(--fg); border: 1px solid var(--line);
}
.gl-compare-tag-before { left: 14px; }
.gl-compare-tag-after  { right: 14px; }
.gl-compare-range {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none;
}
.gl-compare-bar {
  position: absolute; top: 0; bottom: 0; left: var(--p); z-index: 2; width: 2px; margin-left: -1px;
  background: var(--surface); box-shadow: 0 0 0 1px rgb(0 0 0 / .16); pointer-events: none;
}
.gl-compare-knob {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 20px rgb(0 0 0 / .22);
}
/* 손잡이 안의 ◂ ▸ — 테두리로 그린 두 삼각형(왼쪽을 보는 것 · 오른쪽을 보는 것) */
.gl-compare-knob i { position: relative; display: block; width: 24px; height: 10px; }
.gl-compare-knob i::before, .gl-compare-knob i::after { content: ""; position: absolute; top: 0; border-style: solid; }
.gl-compare-knob i::before { left: 0;  border-width: 5px 7px 5px 0; border-color: transparent var(--fg) transparent transparent; }
.gl-compare-knob i::after  { right: 0; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var(--fg); }
.gl-compare-range:focus-visible ~ .gl-compare-bar .gl-compare-knob { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── 화면 스크롤 보기 — 긴 화면 캡처를 둥근 틀 안에서 맨 위 → 맨 아래로. 끝 자리는 틀 높이(cqh)로 계산한다 ── */
.gl-scrollview-frame {
  overflow: hidden; border-radius: var(--r-lg, 20px); border: 1px solid var(--line);
  background: var(--surface); box-shadow: 0 18px 48px rgb(0 0 0 / .14);
}
.gl-scrollview-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.gl-scrollview-bar i { width: 10px; height: 10px; border-radius: 999px; background: var(--line); display: block; }
.gl-scrollview-win { position: relative; overflow: hidden; aspect-ratio: 16 / 9; container-type: size; }
.gl-t-scroll.gl-d-ratio-photo .gl-scrollview-win { aspect-ratio: 4 / 3; }
.gl-scrollview-track { position: absolute; inset-inline: 0; top: 0; transform: translateY(0); }
.gl-scrollview-track img { display: block; width: 100%; height: auto; }
/* 이미지가 다 불러와져 높이를 안 뒤에 gl-photo.js 가 gl-play 를 붙인다. cqh 를 모르는 오래된 브라우저는 이 줄이 무시되어 맨 위 화면에 선다 */
.gl-scrollview.gl-play .gl-scrollview-track {
  transform: translateY(min(0px, calc(100cqh - 100%)));
  transition: transform var(--gl-scroll-dur, 3.6s) cubic-bezier(0.45, 0, 0.2, 1) .5s;
}
@media (prefers-reduced-motion: reduce) {
  /* 정지 대체 — 스스로 움직이지 않고, 틀 안을 손(키보드 포함)으로 스크롤한다 */
  .gl-scrollview-win { overflow-y: auto; }
  .gl-scrollview-track { position: static; }
  .gl-scrollview.gl-play .gl-scrollview-track { transform: none; transition: none; }
}


/* ═══ 대문의 새 타입 — 폰 화면 · 카드형 · 슬라이드쇼 (문서 35 · 2026-10-13) ═══════════════════════════
   제이터(Jitter) «Sliding Smartphones» · «Mobile Screens: Slider» · «Gradient Website» · «Mountains» 의 움직임을 자체 구현했다(에셋은 쓰지 않는다).
   🔴 색은 역할 토큰만 · 움직임은 transform · opacity 로만 · 움직임 줄이기는 정지한 모양(저절로 안 넘어감) · 스크립트가 없어도 첫 모양이 선다. */

/* ── 폰 화면 — 가운데 한 대가 크게(data-o="0") · 양옆은 작게 물러난다 · 두 칸 밖은 숨는다 ── */
.hero.gl-t-phones .hero-split { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero.gl-t-phones .hero-inner { max-width: 600px; }
.hero.gl-t-phones .hero-actions { margin-bottom: 36px; }
@media (min-width: 900px) { .hero.gl-t-phones .hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.hero-phones { position: relative; display: grid; gap: 16px; justify-items: center; }
.gl-phones-row { position: relative; width: 100%; aspect-ratio: 1.12 / 1; }
/* 휴대폰 틀 — 대문의 «폰 화면»(.gl-phone · 줄 안에 겹쳐 선다)과 영상의 «폰 틀»(.gl-phone-solo · 혼자 선다)이 같은 틀을 쓴다 */
.gl-phone, .gl-phone-solo {
  margin: 0; aspect-ratio: 9 / 19.5;
  /* 의도 — 휴대폰 테두리는 «기기» 라 밝게/어둡게와 상관없이 늘 검정이다(역할 색이 아니다) */
  border-radius: 9% / 4.2%; border: 6px solid #0b0b0c; background: #0b0b0c; overflow: hidden;
  box-shadow: 0 24px 48px -16px rgb(0 0 0 / .35);
}
/* 윗부분 카메라 자리(알약) — 장식이다 */
.gl-phone::after, .gl-phone-solo::after {
  content: ""; position: absolute; top: 2.2%; left: 50%; z-index: 6; width: 24%; height: 2.3%; transform: translateX(-50%);
  border-radius: 999px; background: #0b0b0c; pointer-events: none;
}
.gl-phone {
  position: absolute; top: 50%; left: 50%; width: 34%;
  transform: translate(-50%, -50%) translateX(calc(var(--x, 0) * 74%)) scale(var(--s, 1));
  opacity: var(--a, 1); z-index: var(--z, 1);
  transition: transform .9s cubic-bezier(0.22, 1, 0.36, 1), opacity .9s ease;
}
.gl-phone[data-o="0"]  { --x: 0;  --s: 1.18; --z: 5; }
.gl-phone[data-o="-1"] { --x: -1; --s: .94;  --z: 4; }
.gl-phone[data-o="1"]  { --x: 1;  --s: .94;  --z: 4; }
.gl-phone[data-o="-2"] { --x: -1.5; --s: .74; --z: 3; --a: .85; }
.gl-phone[data-o="2"]  { --x: 1.5;  --s: .74; --z: 3; --a: .85; }
.gl-phone:not([data-o="0"]):not([data-o="1"]):not([data-o="-1"]):not([data-o="2"]):not([data-o="-2"]) { --a: 0; --z: 0; pointer-events: none; }
.gl-phone-screen { position: absolute; inset: 0; background: var(--surface-2); }
.gl-phone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 폰 안의 영상(선택) — 그림 위에 겹쳐 있다가 실제로 뜨면(is-on) 드러난다. 작은 화면 · 움직임 줄이기에서는 아예 안 쓴다(그림만) */
.gl-phone-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.gl-phone-video.is-on { opacity: 1; }
@media (max-width: 720px), (prefers-reduced-motion: reduce) { .gl-phone-video { display: none; } }
.gl-phones-nav { display: flex; align-items: center; gap: 10px; }
.gl-phones-btn {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer;
  border-radius: 999px; background: transparent; color: var(--fg); border: 0;     /* 테두리 · 바탕 없는 아이콘 단추(대표님 2026-10-13) */
  opacity: .72; transition: opacity .2s ease, color .2s ease;
}
.gl-phones-btn:hover { opacity: 1; color: var(--accent); }
.gl-phones-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.gl-phones-btn svg { width: 22px; height: 22px; }
/* 멈춤 단추 — 움직이는 중에는 «멈춤»(두 줄), 멈추면 «재생»(삼각형) */
.gl-phones-pause i, .hero-slides-pause i { display: block; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.gl-phones-pause[aria-pressed="true"] i, .hero-slides-pause[aria-pressed="true"] i { width: 0; height: 0; border: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid currentColor; }
@media (max-width: 640px) {
  .gl-phone { width: 40%; border-width: 5px; }
  .gl-phone[data-o="-2"], .gl-phone[data-o="2"] { --a: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gl-phone { transition: none; }
  .gl-phones-pause { display: none; }       /* 저절로 안 넘어가니 멈춤 단추도 뜻이 없다 */
}

/* ── 카드형 — 둥근 색 판 + 아래로 번지는 같은 색 그림자 + 천천히 흐르는 그라데이션 ── */
.hero.gl-t-card .hero-card-panel {
  position: relative; display: grid; gap: clamp(20px, 3vw, 48px); align-items: end; overflow: hidden;
  padding: clamp(28px, 5vw, 64px); border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--accent), var(--accent-dark), var(--accent));
  background-size: 220% 220%; color: var(--ondark-fg, var(--on-chip, #fff));
  box-shadow: 0 30px 60px -18px rgb(0 0 0 / .32);
  animation: gl-card-flow 14s ease-in-out infinite alternate;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .hero.gl-t-card .hero-card-panel { box-shadow: 0 30px 60px -18px color-mix(in srgb, var(--accent) 58%, transparent); }
}
@keyframes gl-card-flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.hero.gl-t-card .hero-inner { max-width: 560px; }
.hero.gl-t-card h1, .hero.gl-t-card .eyebrow, .hero.gl-t-card p.lead { color: inherit; }
.hero.gl-t-card .eyebrow::before { background: currentColor; }   /* 윗줄 작은 막대가 포인트색이라 같은 색 판 위에서 사라진다 */
.hero.gl-t-card .hero-actions { margin-bottom: 0; }
.hero.gl-t-card .btn-primary { background: var(--ondark-fg, var(--on-chip, #fff)); color: var(--accent-dark); }
.hero.gl-t-card .btn-ghost { color: inherit; border-color: currentColor; }
.hero-card-visual { margin: 0 0 calc(clamp(28px, 5vw, 64px) * -1); align-self: end; }
.hero-card-visual img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: contain; object-position: bottom; }
@media (min-width: 900px) { .hero.gl-t-card .hero-card-panel { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.hero.gl-t-card.gl-d-flow-still .hero-card-panel { animation: none; background-size: 100% 100%; }
.hero.gl-t-card.gl-d-glow-off .hero-card-panel { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .hero.gl-t-card .hero-card-panel { animation: none; background-size: 100% 100%; } }

/* ── 슬라이드쇼 — 장면 사진이 화면 가득 서로 겹쳐 바뀌고, 아래 진행 막대가 찬다 ── */
.hero.gl-t-slides { padding: 0; background: var(--chip); display: grid; min-height: clamp(480px, 62vw, 100vh); }
.hero.gl-t-slides > * { grid-area: 1 / 1; }
.hero-slides-stage { position: relative; z-index: 0; overflow: hidden; background: var(--surface-2); }
.hero-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s ease; }
.hero-slide.is-on { opacity: 1; }
.hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); transition: transform 7s ease-out; }
.hero-slide.is-on img { transform: scale(1); }
.hero.gl-t-slides .hero-veil { position: relative; z-index: 1; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--chip) 78%, transparent), transparent 62%); }
.hero.gl-t-slides.gl-d-veil-full .hero-veil { background: color-mix(in srgb, var(--chip) 55%, transparent); }
.hero.gl-t-slides.gl-d-veil-none .hero-veil { display: none; }
.hero.gl-t-slides .container { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 96px; padding-bottom: 96px; }
.hero.gl-t-slides .hero-inner { max-width: 640px; }
.hero.gl-t-slides.gl-d-place-center .container { justify-content: center; align-items: center; text-align: center; }
.hero.gl-t-slides.gl-d-place-center .hero-actions { justify-content: center; }
.hero.gl-t-slides h1, .hero.gl-t-slides .eyebrow { color: var(--ondark-fg); }
.hero.gl-t-slides p.lead { color: var(--ondark-muted, var(--ondark-fg)); }
.hero.gl-t-slides .hero-actions { margin-bottom: 0; }
.hero.gl-t-slides .btn-ghost { color: var(--ondark-fg); border-color: var(--ondark-muted, var(--ondark-fg)); }
.hero.gl-t-slides .btn-primary { background: var(--ondark-fg); color: var(--chip); }
/* 진행 막대 — 장마다 한 칸 · 지금 장은 차오르고 지난 장은 가득 · 누르면 그 장으로 */
.hero-slides-bar { position: relative; z-index: 3; align-self: end; display: flex; align-items: center; gap: 8px; padding: 0 var(--gutter, 24px) 28px; max-width: var(--container, 1200px); width: 100%; margin: 0 auto; box-sizing: border-box; }
.hero-slides-seg { position: relative; flex: 1; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hero-slides-seg::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ondark-fg) 35%, transparent); }
.hero-slides-seg i { position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 999px; background: var(--ondark-fg); transform: scaleX(0); transform-origin: left center; }
.hero-slides-seg.is-done i { transform: scaleX(1); }
.hero-slides-seg.is-on i { animation: gl-slides-fill var(--dur, 5s) linear forwards; }
.hero[data-gl-slides].is-paused .hero-slides-seg.is-on i { animation-play-state: paused; }
@keyframes gl-slides-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-slides-seg:focus-visible, .hero-slides-pause:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hero-slides-pause { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; margin-left: 6px; border-radius: 999px; cursor: pointer; border: 0; background: transparent; color: var(--ondark-fg); opacity: .8; transition: opacity .2s ease; }
.hero-slides-pause:hover { opacity: 1; }
@media (max-width: 640px) {
  .hero.gl-t-slides { display: block; min-height: 0; }
  .hero.gl-t-slides .hero-slides-stage { aspect-ratio: 4 / 3; }
  .hero.gl-t-slides .hero-veil { display: none; }
  .hero.gl-t-slides .container { padding-top: 24px; padding-bottom: 8px; }
  .hero.gl-t-slides h1 { color: var(--fg-strong); }
  .hero.gl-t-slides .eyebrow { color: var(--fg-strong); }
  .hero.gl-t-slides p.lead { color: var(--muted-2); }
  .hero.gl-t-slides .btn-ghost { color: var(--fg-strong); border-color: var(--line); }
  .hero.gl-t-slides .btn-primary { background: var(--chip); color: var(--ondark-fg); }
  .hero-slides-bar { padding-top: 12px; padding-bottom: 20px; }
  .hero-slides-seg::before { background: var(--line); }
  .hero-slides-seg i { background: var(--fg-strong); }
  .hero-slides-pause { color: var(--fg-strong); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide img { transition: none; }
  .hero-slide img, .hero-slide.is-on img { transform: none; }
  .hero-slides-seg.is-on i { animation: none; transform: scaleX(1); }
  .hero-slides-pause { display: none; }
}


/* ═══ 영상의 새 타입 «폰 틀» (문서 35 · 2026-10-13) ══════════════════════════════════════════════
   영상 한 편(유튜브 · 올린 mp4)을 휴대폰 틀 안에 담는다. 틀은 위 .gl-phone 과 같은 것(.gl-phone-solo).
   🔴 영상이 틀을 꽉 채운다(object-fit: cover — 가로 영상이면 양옆이 잘린다. 세로 영상을 권한다). 유튜브는 누르면 그 자리에서 튼다(기존 그대로). */
.gl-media-phone { text-align: center; }
.gl-phone-solo { position: relative; width: min(100%, 300px); margin-inline: auto; transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1); }
.gl-t-phone.gl-d-size-lg .gl-phone-solo { width: min(100%, 380px); }
.gl-t-phone.gl-d-tilt-left  .gl-phone-solo { transform: rotate(-4deg); }
.gl-t-phone.gl-d-tilt-right .gl-phone-solo { transform: rotate(4deg); }
.gl-phone-solo .gl-phone-screen { position: absolute; inset: 0; background: var(--surface-2); }
/* 틀 안의 영상 · 정지 그림 · 유튜브 단추 · 유튜브 틀이 모두 화면을 꽉 채운다(gl-video.css 의 16:9 · 360px 규칙을 이 안에서 덮는다) */
.gl-media-phone .gl-phone-screen .gl-video-el,
.gl-media-phone .gl-phone-screen .gl-media-poster,
.gl-media-phone .gl-phone-screen .gl-video-yt,
.gl-media-phone .gl-phone-screen .gl-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; margin: 0; }
.gl-media-phone .gl-phone-screen .gl-video-yt img { width: 100%; height: 100%; object-fit: cover; }
/* 움직임 줄이기 · 휴대폰: 자동 영상 대신 정지 그림(gl-video.css) — 틀 안에서도 틀을 꽉 채운다 */
@media (prefers-reduced-motion: reduce) { .gl-media-phone .gl-phone-screen .gl-video-el[autoplay] + .gl-media-poster { position: absolute; inset: 0; height: 100%; } .gl-phone-solo { transition: none; } }
@media (max-width: 760px) { .gl-media-phone .gl-phone-screen .gl-video-el[autoplay] + .gl-media-poster { position: absolute; inset: 0; height: 100%; } }

/* ── 강점 목록 «궤도 카드» (문서 35 · 제이터 Orbit: Cards) ───────────────────────────────
   카드가 «큰 원» 위에 선다 — 카드 아래 R 만큼 아래에 원의 중심이 있고, 카드마다 그 중심을 기준으로 o × 각도만큼 돌린다.
   (삼각함수 없이 transform-origin 하나로 된다 — 옛 브라우저에서도 같다.) 가운데 카드(o=0)만 크게 서고 옆 카드는 작아진다.
   스크립트(gl-orbit.js)는 data-o 만 다시 매긴다 — 안 돌아도 첫 장이 가운데에 선 채 정지한다. */
/* 🔴 «쫀쫀한» 움직임 — 용수철(감쇠비 .65 · 고유진동 7rad/s)의 계단 응답을 그대로 옮겼다: 0.45초에 도착해 6.8% 넘어갔다가 1.1초에 자리를 잡는다.
   (제이터 «natural» 이 이런 맛이다 — 부드럽게 감속만 하면 «풀어진» 느낌이 난다.) linear() 를 못 읽는 브라우저는 비슷한 cubic-bezier(오버슈트 살짝)로 대신한다. */
.why.gl-t-orbit .why-orbit { --w: 300px; --h: 400px; --r: 1100px; --step: 14deg; --gl-spring: cubic-bezier(0.34, 1.32, 0.64, 1); position: relative; margin-top: 8px; }
@supports (transition-timing-function: linear(0, 1)) {
  .why.gl-t-orbit .why-orbit { --gl-spring: linear(0, 0.026, 0.093, 0.187, 0.296, 0.411, 0.524, 0.63, 0.726, 0.81, 0.88, 0.938, 0.983, 1.017, 1.041, 1.056, 1.065, 1.068, 1.067, 1.063, 1.057, 1.049, 1.042, 1.034, 1.026, 1.02, 1.014, 1.009, 1.005, 1.002, 0.999, 1, 1); }
}
.why-orbit-ring { position: relative; height: calc(var(--h) + var(--drop, 240px)); overflow: hidden; }
/* 링 아래쪽 60px 는 서서히 지운다 — overflow 로 기울어진 옆 카드의 그림자 · 모서리가 수평선처럼 «잘려» 보이는 것을 막는다(브로셔 세션 제안 · 2026-10-13) */
.why-orbit-ring { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 60px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 60px), transparent); }
@media (max-width: 720px) { .why-orbit-ring { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent); } }
.why-orbit-card {
  position: absolute; top: 24px; left: 50%; width: var(--w); height: var(--h); margin-left: calc(var(--w) / -2);
  transform-origin: 50% calc(var(--h) + var(--r));
  transform: rotate(calc(var(--o, 0) * var(--step)));
  opacity: var(--a, 1); z-index: var(--z, 1); cursor: pointer;
  transition: transform 1.1s var(--gl-spring), opacity .6s ease;
}
.why-orbit-card[data-o="0"]  { --o: 0;  --z: 5; cursor: default; }
.why-orbit-card[data-o="-1"] { --o: -1; --z: 4; }
.why-orbit-card[data-o="1"]  { --o: 1;  --z: 4; }
.why-orbit-card[data-o="-2"] { --o: -2; --z: 3; --a: .8; }
.why-orbit-card[data-o="2"]  { --o: 2;  --z: 3; --a: .8; }
.why-orbit-card:not([data-o="0"]):not([data-o="1"]):not([data-o="-1"]):not([data-o="2"]):not([data-o="-2"]) { --o: 3; --a: 0; pointer-events: none; }
.why-orbit-card[data-o="-3"] { --o: -3; }      /* 왼쪽 밖 — 투명 · 돌아 나가는 자리(gl-orbit.js 가 끝까지 보낸 뒤 반대편 +3 으로 옮겨 다시 들인다) */
.why-orbit-in {
  display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; padding: 0 0 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -20px rgb(0 0 0 / .28);
  transform: scale(.92); transform-origin: 50% 100%; transition: transform 1.1s var(--gl-spring);
}
.why-orbit-card[data-o="0"] .why-orbit-in { transform: scale(1.04); }
.why-orbit-in .why-photo { margin: 0 0 16px; aspect-ratio: 4 / 3; flex: none; }
.why-orbit-in h3, .why-orbit-in p { margin-inline: 22px; }
.why-orbit-in h3 { margin-top: 20px; margin-bottom: 6px; }
.why-orbit-in p { margin-top: 0; margin-bottom: 0; }
.why-orbit-in .why-photo + h3 { margin-top: 0; }
.why-orbit-in p { overflow: hidden; }
.why-orbit-nav { justify-content: center; margin-top: 8px; }
@media (max-width: 720px) {
  /* 🔴 휴대폰(2026-10-13 대표님 «카드가 너무 크게 나오고 움직이지도 않는 것 같다») — 가운데 카드가 화면의 76% 를 차지해 옆 카드가 거의 안 보이면 «도는 것» 으로 읽히지 않는다.
     카드를 작게(화면의 60%) · 원을 작게(반지름 560) · 칸 각도를 크게(21°)해 양옆 카드가 한 뼘씩 걸쳐 보이게 하고, 링 아래 빈칸도 줄인다(±2 는 숨김이라 아래로 떨어지는 폭이 작다). */
  .why.gl-t-orbit .why-orbit { --w: min(60vw, 240px); --h: 330px; --r: 560px; --step: 21deg; --drop: 110px; }
  .why-orbit-card[data-o="-2"], .why-orbit-card[data-o="2"] { --a: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .why-orbit-card, .why-orbit-in { transition: none; }
  .why-orbit .gl-phones-pause { display: none; }
}

/* ── 강점 목록 «펼침 사진» (문서 35 9단계 · 제이터 Photo Gallery · 2026-10-17) ─────────────────────
   세로 띠가 나란히 서고 한 장(is-on)이 넓게 펼쳐진다 — 원본 띠 360 → 펼침 1180(≈3.3배) · 1.4s smooth · 이웃은 밀려난다.
   기본 화면은 flex-grow로 펼친다. 스크립트가 있으면 사진 판의 폭을 고정하고 transform·clip-path로 같은 폭 변화를 재현한다. 사진 자체는 추가 확대하지 않고 photoFocus를 지킨다(그림 카드만 기존 시차).
   들어올 때: is-pre(스크립트가 붙임) → is-live — 띠 줄이 오른쪽에서 장마다 20ms 씩 어긋나 미끄러져 온다. 스크립트가 없으면 is-pre 가 없어 그냥 서 있다.
   그림 카드(is-art): 사진이 없는 항목 — 포인트 색이 번지는 어두운 판 · 큰 번호 · 둥근 선. 밝게/어둡게 모두 판은 어둡다 — 색은 역할 토큰만(--chip 바탕 · --ondark-fg 글자 · --accent). */
/* 처음 들어오는 띠가 화면 밖으로 밀려 있어도 가로 스크롤은 만들지 않는다. 초점 테두리 6px은 남긴다. */
.why-strips-wrap { overflow: clip; overflow-clip-margin: 6px; }
.why.gl-t-strips .why-strips { --strip-ease: cubic-bezier(0.65, 0, 0.35, 1); --strip-h: clamp(380px, 46vw, 560px);
  display: flex; gap: 12px; height: var(--strip-h); margin-top: 8px; }
.why-strip { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--radius-lg); cursor: pointer;
  background: var(--chip); color: var(--ondark-fg); isolation: isolate;
  transition: flex-grow 1.4s var(--strip-ease), transform 1.4s var(--strip-ease), opacity .8s ease;
  transition-delay: 0s, calc(var(--k, 0) * 20ms), calc(var(--k, 0) * 20ms); }
.why-strip.is-on { flex-grow: 3.3; cursor: default; }
.why-strip:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.why-strips.is-pre .why-strip { transform: translateX(60vw); opacity: 0; }
.why-strip-media { position: absolute; inset: 0; z-index: -1; }
.why-strip-media img, .why-strip-art { position: absolute; inset: 0 -30%; width: 160%; height: 100%; object-fit: cover;
  transform: translateX(-8%) scale(1); transition: transform 1.4s var(--strip-ease); }
.why-strip.is-on .why-strip-media img, .why-strip.is-on .why-strip-art { transform: translateX(0) scale(1.12); }

/* 사진은 photoFocus(object-position)의 대상이 그대로 남도록 판을 채운다.
   띠가 펼쳐지는 것만으로 시야가 넓어진다 — 사진 자체를 160%·1.12배로 또 확대하지 않는다. */
.why-strip-media img { inset: 0; width: 100%; max-width: none; transform: none; }
.why-strip.is-on .why-strip-media img { transform: none; }
/* 사진 위에서는 페이지의 밝은 역할색/어두운 역할색을 짝지어 쓴다.
   chip/onChip은 주황/먹색일 수도 있으므로 사진의 어두운 덮개에 그대로 쓰지 않는다. */
:root { --strip-photo-bg: var(--fg); --strip-photo-fg: var(--bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --strip-photo-bg: var(--bg); --strip-photo-fg: var(--fg); }
}
:root[data-theme="dark"] { --strip-photo-bg: var(--bg); --strip-photo-fg: var(--fg); }
.why-strip:not(.is-art) .why-strip-media::after { background: linear-gradient(to top, color-mix(in srgb, var(--strip-photo-bg) 92%, transparent), transparent 70%); }
.why-strip:not(.is-art) .why-num,
.why-strip:not(.is-art) .why-strip-text h3,
.why-strip:not(.is-art) .why-strip-text p { color: var(--strip-photo-fg); }

/* 사진 아래는 칩 바탕과 그 위 글자색 한 쌍으로 읽힌다 — onChip 이 먹색인 브랜드도 포함한다. */
.why-strip-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--chip), color-mix(in srgb, var(--chip) 92%, transparent) 28%, transparent 65%); }
/* 그림 카드 — 넷이 번갈아 선다(data-k 0~3) */
.why-strip-art { background:
    radial-gradient(60% 55% at 30% 28%, color-mix(in srgb, var(--accent) 92%, var(--ondark-fg)) 0%, color-mix(in srgb, var(--accent) 55%, transparent) 38%, transparent 70%),
    radial-gradient(70% 60% at 80% 90%, color-mix(in srgb, var(--accent) 45%, var(--chip)) 0%, transparent 70%),
    var(--chip); }
.why-strip[data-k="1"] .why-strip-art { background:
    radial-gradient(55% 50% at 72% 30%, color-mix(in srgb, var(--accent) 85%, var(--ondark-fg)) 0%, color-mix(in srgb, var(--accent) 50%, transparent) 40%, transparent 72%),
    linear-gradient(160deg, color-mix(in srgb, var(--chip) 94%, var(--ondark-fg)), var(--chip)); }
.why-strip[data-k="2"] .why-strip-art { background:
    radial-gradient(80% 45% at 50% 100%, var(--accent) 0%, color-mix(in srgb, var(--accent) 40%, transparent) 45%, transparent 75%),
    var(--chip); }
.why-strip[data-k="3"] .why-strip-art { background:
    conic-gradient(from 200deg at 40% 40%, color-mix(in srgb, var(--accent) 80%, var(--chip)), var(--chip) 40%, color-mix(in srgb, var(--accent) 60%, var(--chip)) 75%, color-mix(in srgb, var(--accent) 80%, var(--chip))); }
.why-strip-art i { position: absolute; left: 50%; top: 42%; width: min(70vh, 640px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .22); box-shadow: 0 0 0 60px rgb(255 255 255 / .03), 0 0 0 61px rgb(255 255 255 / .12), 0 0 0 140px rgb(255 255 255 / .02), 0 0 0 141px rgb(255 255 255 / .08); }
.why-strip-art b { position: absolute; left: 50%; top: 38%; translate: -50% -50%; font-size: clamp(120px, 16vw, 240px); font-weight: 700; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / .55); font-variant-numeric: tabular-nums; }
.why-strip-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px clamp(20px, 3vw, 36px); }
.why-strip:not(.is-on) .why-strip-text { top: 0; bottom: auto; }
.why-strip-text .why-num { color: var(--ondark-fg); opacity: .85; }
.why-strip-text h3, .why-strip-text p { color: var(--ondark-fg); margin: 0; max-width: 34em;
  opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .7s var(--strip-ease); }
.why-strip-text h3 { margin: 10px 0 8px; font-size: clamp(22px, 2.4vw, 32px); white-space: nowrap; }
.why-strip-text p { color: var(--ondark-fg); }
.why-strip.is-on .why-strip-text h3, .why-strip.is-on .why-strip-text p { opacity: 1; transform: none; transition-delay: .55s; }
/* 사진·문구 폭은 고정하고, 보이는 창과 위치만 움직인다. 번호의 위↔아래도
   top/bottom 교체 없이 같은 글 상자를 transform으로 옮겨 중간에 튀지 않는다. */
.why-strips.gl-strips-composite { position: relative; display: block; }
.gl-strips-composite .why-strip { position: absolute; top: 0; left: 0; height: 100%;
  contain: layout style; border-radius: 0;
  clip-path: inset(0 var(--strip-cut-right, 0px) 0 var(--strip-cut-left, 0px) round var(--radius-lg));
  transform: translate3d(var(--strip-x, 0px), 0, 0);
  transition: transform 1.4s var(--strip-ease), clip-path 1.4s var(--strip-ease), opacity .8s ease;
  will-change: transform, clip-path; }
.gl-strips-composite.is-pre .why-strip { transform: translate3d(calc(var(--strip-x, 0px) + 60vw), 0, 0); }
.gl-strips-composite .why-strip .why-strip-text { top: auto; bottom: 0; text-align: left;
  transform: translate3d(var(--strip-caption-x, 0px), var(--strip-caption-y, 0px), 0);
  transition: transform 1.4s var(--strip-ease); }
.gl-strips-composite .why-strip:focus-visible { outline: none; }
.gl-strips-composite .why-strip:focus-visible::after { content: ""; position: absolute; inset: 3px calc(var(--strip-cut-right) + 3px) 3px calc(var(--strip-cut-left) + 3px);
  border: 3px solid var(--accent); border-radius: var(--radius-lg); pointer-events: none; }
.why-strips-nav { justify-content: center; margin-top: 14px; }
@media (max-width: 720px) {
  /* 세 장을 함께 읽는 낮은 사진 줄. 문구 노드는 JS가 아래 판으로 옮긴다. */
  .why.gl-t-strips .why-strips {
    --strip-h: clamp(150px, 48vw, 220px);
    position: relative; height: var(--strip-h); gap: 10px; touch-action: pan-y pinch-zoom;
  }
  .gl-strips-composite .why-strip {
    transition-duration: .5s, .5s, .3s;
  }
  .why-strips-caption { margin-top: 18px; }
  .why-strips-caption .why-strip-text {
    position: static; padding: 0; transform: none; transition: none;
  }
  .why-strips-caption .why-strip-text[hidden] { display: none; }
  .why-strips-caption :is(.why-num, h3, p) {
    color: var(--fg); opacity: 1; transform: none; transition: none;
  }
  .why-strips-caption .why-num { color: var(--muted); }
  .why-strips-caption h3 { margin: 8px 0; white-space: normal; }
  .why-strips-caption p { line-height: 1.65; word-break: keep-all; }
  .why-strips .why-strip-media::after { display: none; }
  .why-strips-nav { justify-content: flex-start; margin-top: 8px; gap: 8px; }
  .why-strips-nav .gl-phones-btn { width: 44px; height: 44px; }
  /* 스크립트가 없으면 낮은 사진과 문구를 세로로 모두 표시한다. */
  .why.gl-t-strips .why-strips:not([data-gl-ready]) { display: grid; height: auto; }
  .why-strips:not([data-gl-ready]) ~ .why-strips-nav { display: none; }
  .why-strips:not([data-gl-ready]) .why-strip { background: transparent; color: var(--fg); }
  .why-strips:not([data-gl-ready]) .why-strip-media { position: relative; height: var(--strip-h); }
  .why-strips:not([data-gl-ready]) .why-strip-text { position: static; padding: 16px; }
  .why-strips:not([data-gl-ready]) .why-strip-text :is(.why-num, h3, p) { color: var(--fg); opacity: 1; transform: none; }

}
@media (prefers-reduced-motion: reduce) {
  .why-strip, .why-strip-media img, .why-strip-art, .why-strip-text, .why-strip-text h3, .why-strip-text p { transition: none !important; }
  .why-strips.is-pre .why-strip { transform: none; opacity: 1; }
  .gl-strips-composite.is-pre .why-strip { transform: translate3d(var(--strip-x, 0px), 0, 0); }
  .why-strips-wrap .gl-phones-pause { display: none; }
}

/* ═══ 대문 «슬라이드쇼» 의 둥근 판 모양 · 로고 묶음 «Ripple» · 가운데서 펼쳐지는 사진 (문서 35 · 제이터 Mountains + Round Logo: Ripple) ═══════════
   흰(표면색) 둥근 판 하나 — 왼쪽 위 로고 묶음 · 왼쪽 큰 제목 / 부제 / 알림 한 줄 · 오른쪽 사진 슬라이드쇼 · 아래 번호 막대(01 ── 02 ── …).
   사진 · 막대 · 넘김은 «화면 가득» 과 같은 것(.hero-slide · .hero-slides-seg · gl-hero.js)을 쓴다 — 데이터 한 벌.
   🔴 색은 역할 토큰만: 판 = --surface · 제목 = --accent-dark · 글 = --fg · 막대 바탕 = --line.
   🔴 움직임은 CSS 만 — 스크립트가 안 돌아도 첫 장이 놓인 모습으로 선다. 움직임 줄이기에서는 전부 끝난 모습(애니메이션 없음).
   🔴 끝난 움직임은 backwards — both 로 두면 변형 층이 남아 로고가 비트맵처럼 자글거린다. */
.hero.gl-t-slides.gl-d-shape-panel { --natural: cubic-bezier(.65, 0, .35, 1); --slow: cubic-bezier(.16, 1, .3, 1); display: block; min-height: 0; padding: clamp(96px, 10vw, 120px) 0 clamp(16px, 4vw, 56px); background: var(--bg); }
.hero.gl-t-slides.gl-d-shape-panel > .container { display: block; padding: 0 var(--gutter, 24px); }
.hero-panel {
  position: relative; max-width: 1180px; margin: 0 auto; min-height: min(720px, calc(100dvh - 140px));
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr auto; column-gap: clamp(24px, 5vw, 72px);
  padding: clamp(28px, 4.5vw, 64px) clamp(28px, 4.5vw, 64px) clamp(24px, 3.5vw, 48px);
  border-radius: clamp(18px, 2.4vw, 30px); background: var(--surface);
}
.hero-panel .hero-lock { grid-column: 1; grid-row: 1; align-self: center; justify-self: start; }
.hero-panel-copy { grid-column: 1; grid-row: 2; align-self: center; padding: 32px 0; }
.hero-panel .hero-inner { max-width: none; }
.hero.gl-t-slides.gl-d-shape-panel h1 { color: var(--accent-dark); font-weight: 800; font-size: clamp(40px, 5.6vw, 80px); line-height: 1.08; letter-spacing: -.03em; word-break: keep-all; }
.hero.gl-t-slides.gl-d-shape-panel .eyebrow { color: var(--accent-dark); }
.hero.gl-t-slides.gl-d-shape-panel p.lead { color: var(--fg); font-size: clamp(16px, 1.6vw, 20px); line-height: 1.6; word-break: keep-all; }
.hero-note { margin-top: clamp(28px, 3.4vw, 44px); font-size: 13.5px; color: var(--muted); }
.hero-note i { display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--accent-dark); vertical-align: 2px; animation: gl-note-pulse 2.2s ease-out infinite; }
@keyframes gl-note-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-dark) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.hero-panel .hero-slides-stage { grid-column: 2; grid-row: 2; position: relative; z-index: 0; margin: clamp(14px, 2vw, 24px) 0; border-radius: 4px; overflow: hidden; min-height: 300px; background: var(--surface-2); }
/* 번호 막대 — 01 ── 02 : 지금 장만 막대가 펴지고 차오른다 */
.hero-panel .hero-slides-bar { grid-column: 2; grid-row: 3; align-self: center; position: static; display: flex; align-items: center; gap: 14px; max-width: none; margin: 0; padding: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.hero-panel .hero-slides-seg { flex: none; display: inline-flex; align-items: center; gap: 14px; height: auto; padding: 0; color: var(--muted-2); font: inherit; }
.hero-panel .hero-slides-seg::before { display: none; }
.hero-panel .hero-slides-seg b { font-weight: 400; transition: color .3s ease; }
.hero-panel .hero-slides-seg.is-on b { color: var(--accent-dark); }
.hero-panel .hero-slides-seg .bar { position: relative; display: block; width: 0; height: 1px; background: var(--line); transition: width .5s var(--slow); }
.hero-panel .hero-slides-seg.is-on .bar { width: clamp(56px, 8vw, 96px); }
.hero-panel .hero-slides-seg i { position: absolute; left: 0; right: 0; top: 0; height: 1px; border-radius: 0; background: var(--accent-dark); transform: scaleX(0); transform-origin: left center; }
.hero-panel .hero-slides-seg.is-done i { transform: scaleX(1); }
.hero-panel .hero-slides-pause { margin-left: auto; color: var(--muted); }
.hero-panel .hero-slides-seg:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* 사진이 «가운데서 펼쳐진다» (reveal = open) — 새 장이 가운데에서 네 변으로 열리고, 나가는 장은 밑에 깔려 있다. 사진은 살짝 크게 시작해 천천히 제자리로. */
.hero.gl-t-slides.gl-d-reveal-open .hero-slide { transition: none; opacity: 0; }
.hero.gl-t-slides.gl-d-reveal-open .hero-slide.is-prev { opacity: 1; z-index: 1; }
.hero.gl-t-slides.gl-d-reveal-open .hero-slide.is-on { opacity: 1; z-index: 2; animation: gl-open 1.2s var(--natural, cubic-bezier(.65, 0, .35, 1)) backwards; }
.hero.gl-t-slides.gl-d-reveal-open:not(.is-live) .hero-slide.is-on { animation-delay: .2s; }
.hero.gl-t-slides.gl-d-reveal-open .hero-slide img { transform: none; transition: none; }
.hero.gl-t-slides.gl-d-reveal-open .hero-slide.is-on img { animation: gl-settle 4.2s var(--slow, cubic-bezier(.16, 1, .3, 1)) backwards; }
.hero.gl-t-slides.gl-d-reveal-open:not(.is-live) .hero-slide.is-on img { animation-delay: .2s; }
@keyframes gl-open { from { clip-path: inset(50% 50% 50% 50% round 4px); } to { clip-path: inset(0 0 0 0 round 4px); } }
@keyframes gl-settle { from { transform: scale(1.12); } to { transform: scale(1); } }

/* 로고 묶음 — 높이 · 가운데 맞춤은 렌더러가 계산해 변수로 준다(--ck 이름 높이 ÷ 아이콘 · --ia 아이콘 글자 가운데 · --nb 이름 글자 가운데 · --ratio 이름 가로÷세로 · --c1~3 글자 덩어리 경계) */
.hero-lock { --is: 72px; --ch: calc(var(--is) * var(--ck, .5)); position: relative; display: flex; align-items: flex-start; gap: calc(var(--is) * .25); }
.hero-lock-icon { position: relative; z-index: 1; flex: none; width: var(--is); height: var(--is); }
.hero-lock-icon img { display: block; width: 100%; height: 100%; }
.hero-lock-name { position: relative; flex: none; margin-top: calc(var(--is) * var(--ia, .5) - var(--ch) * var(--nb, .5)); width: calc(var(--ch) * var(--ratio, 3)); height: var(--ch); }
.hero-lock-name .ci { position: absolute; inset: 0; background: var(--fg-strong); -webkit-mask: var(--ci) center / 100% 100% no-repeat; mask: var(--ci) center / 100% 100% no-repeat; }
.hero-lock.has-cuts .c0 { clip-path: inset(-30% calc(100% - var(--c1)) -30% -5%); }
.hero-lock.has-cuts .c1 { clip-path: inset(-30% calc(100% - var(--c2)) -30% var(--c1)); }
.hero-lock.has-cuts .c2 { clip-path: inset(-30% calc(100% - var(--c3)) -30% var(--c2)); }
.hero-lock.has-cuts .c3 { clip-path: inset(-30% -5% -30% var(--c3)); }
.hero-lock-ripple { position: absolute; left: calc(var(--is) / 2); top: calc(var(--is) / 2); width: calc(var(--is) * 1.5); height: calc(var(--is) * 1.5); margin: calc(var(--is) * -.75) 0 0 calc(var(--is) * -.75); border-radius: 50%; border: 0 solid var(--accent-dark); pointer-events: none; transform: scale(0); }
/* 템플릿 수치 — 원 0→1 로 커지며 속이 비어 사라짐 0~1.2s · 아이콘 튀어나옴 0.2~0.8s · 둘이 왼쪽으로 비킴 1.0~1.8s · 이름은 덩어리마다 50ms 차로 0.3s */
.hero-panel .hero-lock-ripple { animation: gl-ripple 1.2s var(--natural, cubic-bezier(.65, 0, .35, 1)) backwards; }
.hero-panel .hero-lock-icon { animation: gl-grow .6s var(--natural, cubic-bezier(.65, 0, .35, 1)) .2s backwards; }
.hero-panel .hero-lock { animation: gl-lock-in .8s var(--natural, cubic-bezier(.65, 0, .35, 1)) 1s backwards; }
.hero-panel .hero-lock-name .ci { animation: gl-letter .3s var(--slow, cubic-bezier(.16, 1, .3, 1)) backwards; animation-delay: 1s; }
.hero-panel .hero-lock-name .c1 { animation-delay: 1.05s; } .hero-panel .hero-lock-name .c2 { animation-delay: 1.1s; } .hero-panel .hero-lock-name .c3 { animation-delay: 1.15s; }
@keyframes gl-ripple { from { transform: scale(0); border-width: calc(var(--is) * .75); } to { transform: scale(1); border-width: 0; } }
@keyframes gl-grow { from { transform: scale(0); } }
@keyframes gl-lock-in { from { transform: translateX(calc((var(--ch) * var(--ratio, 3) + var(--is) * .25) / 2)); } }
@keyframes gl-letter { from { opacity: 0; transform: translateX(50px); } }

@media (max-width: 820px) {
  .hero-panel { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; min-height: 0; row-gap: 0; }
  .hero-panel .hero-lock { grid-column: 1; }
  .hero-panel-copy { grid-column: 1; grid-row: 2; padding: 36px 0 8px; }
  .hero-panel .hero-slides-stage { grid-column: 1; grid-row: 3; min-height: 0; aspect-ratio: 4 / 3; margin: 24px 0 18px; }
  .hero-panel .hero-slides-bar { grid-column: 1; grid-row: 4; }
  .hero.gl-t-slides.gl-d-shape-panel .hero-veil { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-lock, .hero-lock-icon, .hero-lock-ripple, .hero-lock-name .ci, .hero-note i,
  .hero.gl-t-slides.gl-d-reveal-open .hero-slide.is-on, .hero.gl-t-slides.gl-d-reveal-open .hero-slide.is-on img { animation: none; }
  .hero-panel .hero-slides-seg .bar { transition: none; }
  .hero-panel .hero-slides-seg.is-on i { animation: none; transform: scaleX(1); }
}

/* 상단바 · 바닥글의 로고 묶음 — 대문의 것(.hero-lock)과 같은 맞춤 규칙을 쓰되 움직임은 없다(.hero-panel 안에서만 재생). 이름은 한 덩어리 */
.logo-mark.lk .nav-lock { --is: 44px; flex: none; }
.logo-mark.lk .nav-lock .hero-lock-name .ci { animation: none; }
footer .logo-mark.lk .nav-lock { --is: 36px; }

/* 끌어서 돌리기(gl-orbit.js) — 끄는 동안(is-free)은 전환을 끄고 카드마다 연속 위치(--q · --qa · --qs · --qz)를 직접 받는다.
   🔴 세로로 미는 손은 페이지가 받는다(pan-y) · 이미지가 끌려 나오지 않게 한다 */
.why-orbit-ring { cursor: grab; touch-action: pan-y; }
.why-orbit.is-drag .why-orbit-ring { cursor: grabbing; }
.why-orbit.is-drag { user-select: none; -webkit-user-select: none; }
.why-orbit-card img { -webkit-user-drag: none; user-select: none; }
.why-orbit.is-free .why-orbit-card { transition: none; transform: rotate(calc(var(--q, 0) * var(--step))); opacity: var(--qa, 1); z-index: var(--qz, 5); }
.why-orbit.is-free .why-orbit-in { transition: none; transform: scale(var(--qs, 1)); }

/* 장식 영상: 글과 버튼의 가독성을 남기는 오른쪽 시각 영역. */
/* Church board views reuse the same palette in editor, public pages and detail. */
.church-board { display:block; width:100%; min-width:0; }
.church-controls,.church-search,.church-pager { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-block:20px; }
.church-controls label { display:grid; gap:8px; font-size:.9rem; }
.church-controls input,.church-controls select { min-height:44px; min-width:0; max-width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); font:inherit; }
.church-board button,.church-board .btn { min-height:44px; }
.church-board a:focus-visible,.church-board button:focus-visible,.church-controls input:focus-visible { outline:3px solid var(--fg); outline-offset:4px; }
.church-meta { color:var(--muted); line-height:1.7; overflow-wrap:anywhere; }
.church-entry { padding:24px 0; border-bottom:1px solid var(--line); }
.church-table,.church-calendar { width:100%; border-collapse:collapse; table-layout:fixed; }
.church-table caption,.church-calendar caption { text-align:left; font-weight:700; padding:16px 0; }
.church-table td,.church-table th,.church-calendar td,.church-calendar th { text-align:left; vertical-align:top; padding:12px; border:1px solid var(--line); overflow-wrap:anywhere; }
.church-calendar td { height:110px; }
.church-calendar td a { display:block; font-size:.85rem; margin-top:8px; line-height:1.5; }
.church-calendar .church-other-month { color:var(--muted); }
.church-cover { max-width:240px; width:100%; display:block; margin:16px 0; }
.church-results .gl-vshell video,#gl-board-item .gl-vshell video { width:100%; height:100%; object-fit:contain; display:block; }
.church-location { display:grid; gap:16px; padding:24px 0; }
.church-document iframe { width:100%; height:75vh; border:1px solid var(--line); background:var(--bg); }
.church-pager { justify-content:center; align-items:center; }
@media(max-width:640px) {
  .church-search { width:100%; }
  .church-search label { width:100%; }
  .church-calendar td,.church-calendar th { padding:6px 3px; }
  .church-calendar td a { font-size:.75rem; }
  .church-table td,.church-table th { padding:9px; }
}
.hero-backdrop { position:absolute; inset:0 0 0 -5%; z-index:0; mix-blend-mode:multiply; mask-image:linear-gradient(to right, transparent 32%, #000 58%); }
.hero:has(.hero-backdrop) { background:var(--bg); min-height:var(--gl-backdrop-h, 85svh); display:flex; align-items:center; isolation:isolate; }
/* 영상은 독립된 첫 구간이다. 같은 바탕이라고 다음 제목의 위 여백까지 접지 않는다. */
.hero:has(.hero-backdrop) + .gl-ev.gl-ev-join { padding-top:clamp(64px, 7vw, 112px) !important; }
.hero-backdrop[data-tone="dark"] { mix-blend-mode:screen; }
.hero-backdrop picture, .hero-backdrop img, .hero-backdrop video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-backdrop video { opacity:0; pointer-events:none; }
.hero-backdrop.is-playing video { opacity:1; }
.hero-backdrop-pause { position:absolute; right:24px; bottom:24px; z-index:2; border:1px solid var(--line); border-radius:50%; width:36px; height:36px; background:var(--bg); color:var(--fg); cursor:pointer; }
@media (max-width:720px) { .hero-backdrop { mask-image:linear-gradient(to right,transparent 30%,#000 80%); opacity:.58; } }
@media (prefers-reduced-motion:reduce) { .hero-backdrop video, .hero-backdrop-pause { display:none; } }

/* 기능별 화면 — 실제 제품 화면을 자르지 않고, 한 번에 한 작업을 설명한다. */
.gl-showcase-tabs { display: flex; gap: 8px 28px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.gl-showcase-tabs[hidden] { display: none; }
.gl-showcase-tabs button { appearance: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 16px 0; min-height: 48px; background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.gl-showcase-tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.gl-showcase-tabs button:focus-visible, .gl-showcase-panel:focus-visible { outline: 2px solid var(--fg); outline-offset: 5px; }
.gl-showcase-panel { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.gl-showcase-panel[hidden] { display: none; }
.gl-showcase-panel + .gl-showcase-panel { margin-top: 48px; }
[data-showcase-ready] .gl-showcase-panel { margin-top: 0; }
.gl-showcase-step { display: block; font-size: 13px; color: var(--muted); margin-bottom: 24px; font-variant-numeric: tabular-nums; }
.gl-showcase-copy h3 { font-size: clamp(26px, 3vw, 42px); line-height: 1.25; margin: 0 0 20px; text-wrap: balance; }
.gl-showcase-copy p { color: var(--muted); line-height: 1.85; margin: 0 0 28px; }
.gl-showcase-link { color: var(--fg); font-weight: 600; text-underline-offset: 6px; }
.gl-showcase-panel figure { margin: 0; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md, 14px); padding: clamp(8px, 1.8vw, 24px); }
.gl-showcase-panel img { display: block; width: 100%; height: auto; max-height: 540px; object-fit: contain; }
@media (max-width: 720px) {
  .gl-showcase-tabs { gap: 4px 20px; margin-bottom: 24px; }
  .gl-showcase-tabs button { font-size: 14px; }
  .gl-showcase-panel { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .gl-showcase-step { margin-bottom: 12px; }
  .gl-showcase-copy p { margin-bottom: 18px; }
}

/* 원본 비율의 제품 화면 — 배경 영상이 있어도 그림은 내용 위에 선다. */
.hero.gl-t-split.gl-d-ratio-screen .hero-photo { aspect-ratio: auto; overflow: visible; background: transparent; }
.hero.gl-t-split.gl-d-ratio-screen .hero-photo img { display: block; position: static; width: 100%; height: auto; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius-md, 14px); box-shadow: 0 24px 80px color-mix(in srgb, var(--fg) 12%, transparent); }
.hero.gl-t-split.gl-d-ratio-screen h1 { font-size: clamp(44px, 5.6vw, 80px); line-height: 1.16; word-break: keep-all; text-wrap: balance; }
.hero.gl-t-split.gl-d-ratio-screen:has(.hero-backdrop) > .container { position: relative; z-index: 1; }
@media (min-width: 981px) { .hero.gl-t-split.gl-d-ratio-screen .hero-split { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 48px; } }
@media (max-width: 980px) { .hero.gl-t-split.gl-d-ratio-screen .hero-split { gap: 40px; } }
.why.gl-t-tabs { background: var(--bg); }

.hero.gl-t-split.gl-d-ratio-screen .hero-points { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.hero.gl-t-split.gl-d-ratio-screen .hero-points li { margin: 0; font-size: 13px; }

/* 스크롤 제품 설명 — 페이지 스크롤을 그대로 쓰고 그림만 옆에 고정한다. */
.why.gl-t-story { background: var(--bg); overflow: visible; }
.gl-showcase-title { appearance: none; display: block; background: transparent; color: inherit; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.gl-showcase-title:focus-visible { outline: 2px solid var(--fg); outline-offset: 7px; }
.gl-showcase-stage:empty { display: none; }
.gl-showcase[data-story-ready] { --showcase-top: calc(var(--nav-h, 64px) + var(--anchor-gap, 24px)); --showcase-height: calc(100svh - var(--showcase-top)); display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.5fr); gap: clamp(36px,6vw,88px); align-items: start; }
[data-story-ready] .gl-showcase-list { grid-area: 1 / 1; padding-bottom: 35svh; }
.gl-showcase-progress[hidden] { display: none; }
[data-story-ready] .gl-showcase-progress { grid-area: 1 / 1; position: sticky; top: calc(var(--showcase-top) + 24px); align-self: start; height: calc(var(--showcase-height) - 48px); width: 2px; background: var(--line); z-index: 1; pointer-events: none; }
.gl-showcase-progress span { position: absolute; inset: 0; background: var(--accent); transform: scaleY(0); transform-origin: top; }
[data-story-ready] .gl-showcase-panel { display: flex; align-items: center; min-height: var(--showcase-height); padding: 32px 0 32px 28px; box-sizing: border-box; margin: 0; }
[data-story-ready] .gl-showcase-panel h3 { color: var(--fg); font-size: clamp(24px,2.7vw,36px); }
[data-story-ready] .gl-showcase-stage { grid-area: 1 / 2; position: sticky; top: var(--showcase-top); align-self: start; min-width: 0; height: var(--showcase-height); display: grid; align-items: center; padding: 24px 0; box-sizing: border-box; }
.gl-showcase-stage figure { margin: 0; min-height: 340px; display: flex; align-items: center; }
.gl-showcase-stage figure[hidden] { display: none; }
/* Overlap pictures in the same fixed stage; CSS transitions reverse safely on rapid scrolling. */
[data-story-ready] .gl-showcase-stage figure { grid-area: 1 / 1; width: 100%; min-width: 0; opacity: 0; z-index: 0; pointer-events: none; transition: opacity 300ms ease; }
[data-story-ready] .gl-showcase-stage figure.is-visible { opacity: 1; z-index: 1; pointer-events: auto; }
[data-story-ready] .gl-showcase-stage.is-immediate figure { transition: none; }
@media (prefers-reduced-motion: reduce) { [data-story-ready] .gl-showcase-stage figure { transition: none; } }

.gl-showcase-stage img { display: block; width: 100%; height: auto; max-height: calc(var(--showcase-height, 100svh) - 48px); object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .gl-showcase-panel, .gl-showcase-stage { scroll-behavior: auto; transition: none; } }

html:has(.gl-pbar) .gl-showcase[data-story-ready] { --showcase-top: calc(var(--gl-nav-c, 40px) + 25px + var(--gl-pbar-h, 0px) + var(--anchor-gap, 24px)); }

/* 테마별 캡처도 원본 비율을 유지하며 한 장의 이미지처럼 배치한다. */
.hero-photo > picture[data-gl-theme-image], .gl-showcase picture[data-gl-theme-image] { display: block; width: 100%; min-width: 0; }

.gl-showcase[data-showcase-mode="story"]:not([data-story-ready]) img { max-height: none; }

/* On a phone each feature reads as one short story, with its guide after the image. */
@media (max-width: 980px) {
  .gl-showcase[data-showcase-mode="story"] .gl-showcase-panel { gap: 18px; }
  .gl-showcase[data-showcase-mode="story"] .gl-showcase-panel + .gl-showcase-panel { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); }
  .gl-showcase[data-showcase-mode="story"] .gl-showcase-step { margin-bottom: 12px; }
  .gl-showcase[data-showcase-mode="story"] .gl-showcase-copy h3 { margin-bottom: 14px; }
  .gl-showcase[data-showcase-mode="story"] .gl-showcase-copy p { margin-bottom: 0; line-height: 1.7; }
  .gl-showcase[data-showcase-mode="story"] .gl-showcase-panel figure { border: 0; padding: 0; overflow: visible; border-radius: 0; background: transparent; }
  .gl-showcase[data-showcase-mode="story"] .gl-showcase-panel > .gl-showcase-link { justify-self: start; font-size: 14px; padding: 8px 0; }
  .gl-showcase[data-showcase-mode="story"] .gl-showcase-title { cursor: default; }
  .gl-pbar-links a { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 10px; }
}
@media (max-width: 600px) {
  .gl-pbar-name strong { display: none; }
  .gl-pbar-links a { font-size: 13px; padding-inline: 9px; }
}

/* Framing belongs to the shared story widget, not to baked screenshot pixels. */
.gl-showcase[data-showcase-mode="story"] figure { position: relative; isolation: isolate; border: 0; padding: 0; background: transparent; overflow: visible; }
.gl-showcase[data-showcase-mode="story"] figure::before { content: ""; position: absolute; inset: 8% 3%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%), radial-gradient(ellipse at 70% 75%, color-mix(in srgb, var(--fg) 12%, transparent), transparent 70%); filter: blur(28px); transform: scale(1.08); opacity: .7; }
.gl-showcase[data-showcase-mode="story"] .gl-showcase-media { position: relative; z-index: 1; width: 100%; min-width: 0; overflow: hidden; border-radius: clamp(16px, 2vw, 24px); border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); box-sizing: border-box; background: var(--surface); box-shadow: 0 18px 48px color-mix(in srgb, var(--fg) 8%, transparent); }
.gl-showcase[data-showcase-mode="story"] .gl-showcase-media img { border: 0; border-radius: 0; box-shadow: none; }

.hero-backdrop-full { inset:0; mask-image:none; mix-blend-mode:normal; opacity:1; }
.hero-backdrop-full[data-tone="dark"] { mix-blend-mode:normal; }
.hero-backdrop-full::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, color-mix(in srgb, var(--black) 76%, transparent), color-mix(in srgb, var(--black) 20%, transparent)); } /* 의도: 사진 위 흰 글자를 읽는 고정 어두운 덮개 */
.hero:has(.hero-backdrop-full) { --fg:var(--onChip); --fgStrong:var(--onChip); --muted:var(--onChip); --muted2:var(--onChip); }
.hero:has(.hero-backdrop-full) > .container { position:relative; z-index:1; }
.hero:has(.hero-backdrop-full) .eyebrow { color:var(--onChip); }
.hero:has(.hero-backdrop-full) .btn-ghost { color:var(--onChip); border-color:color-mix(in srgb, var(--onChip) 60%, transparent); }
.hero:has(.hero-backdrop-full) .hero-backdrop-pause { color:var(--onChip); background:var(--black); } /* 의도: 영상 위 흰 재생 제어의 고정 대비 */
.church-results.gl-vfeature > :first-child { grid-column:1/-1; }
.church-history .church-entry { border-left:2px solid var(--accent); padding-left:28px; margin-left:8px; }
.church-year { color:var(--accent); font-size:28px; font-weight:700; margin:0 0 8px; }
.church-minister { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:24px; }
.church-education { list-style:none; padding:0; }
.church-education li { display:grid; gap:4px; padding:12px 0; border-top:1px solid var(--line); }
.church-education span { color:var(--muted); }
.hero-backdrop-pause { min-width:44px; min-height:44px; width:auto; padding:8px; border-radius:8px; }
.hero-inline-media video { display:block; width:100%; max-height:70vh; border-radius:16px; }
.hero-slide .gl-slide-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.hero-slide .gl-slide-video.is-playing { opacity:1; }
@media(prefers-reduced-motion:reduce) { .hero-slide .gl-slide-video { display:none; } }