/* ═══════════════════════════════════════════════════════════════════════
   블록 꾸미기 — engine/layout/style.json 이 정한 것을 실제로 그리는 규칙

   🔴 여기 이름은 style.json 의 prefix·var 와 «글자 그대로» 같아야 한다.
      한쪽만 고치면 에디터에서는 골라지는데 화면은 안 바뀐다.

   🔴 색을 새로 정하지 않는다. 값은 전부 블록에 실려 오거나(--gl-…)
      토큰(theme.config.js)에서 온다.

   휴대폰에서는 자리 잡기를 전부 풀어 위아래로 쌓는다. 좁은 화면에서
   왼쪽·오른쪽을 지키면 글이 한 줄에 두세 글자씩 들어간다.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 글 정렬 ─────────────────────────────────────────────────────── */
.gl-al-left   { text-align: left; }
.gl-al-center { text-align: center; }
.gl-al-right  { text-align: right; }
/* 가운데 정렬일 때는 폭이 제한된 문단도 함께 가운데로 온다 —
   글만 가운데 오고 덩어리가 왼쪽에 붙어 있으면 어긋나 보인다. */
.gl-al-center :is(p, .lead, .sec-desc) { margin-left: auto; margin-right: auto; }
.gl-al-center :is(.hero-actions, .sec-actions, .cta-actions) { justify-content: center; }
.gl-al-right  :is(p, .lead, .sec-desc) { margin-left: auto; }
.gl-al-right  :is(.hero-actions, .sec-actions, .cta-actions) { justify-content: flex-end; }

/* ── 사진·영상 자리 ──────────────────────────────────────────────
   블록 안에서 «그림 쪽» 과 «글 쪽» 을 나란히 두거나 위아래로 쌓는다.
   블록마다 안쪽 이름이 달라서, 그림 쪽으로 볼 만한 것을 모두 잡는다. */
:is(.gl-mp-left, .gl-mp-right, .gl-mp-top, .gl-mp-bottom) > .container {
  display: grid;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}
.gl-mp-left  > .container,
.gl-mp-right > .container { grid-template-columns: 1fr 1fr; }

/* 무엇이 «그림» 인가 — 블록마다 이름이 다르므로 한 줄에 모아 둔다.
   여기 없는 블록은 자리 바꾸기가 안 먹는다(그때는 그냥 원래대로 나온다). */
:is(.gl-mp-left, .gl-mp-right) > .container > :is(.gl-pin-visual, .visual, figure, picture, img, video, .gl-media) { grid-column: 1; grid-row: 1; }
.gl-mp-right > .container > :is(.gl-pin-visual, .visual, figure, picture, img, video, .gl-media) { grid-column: 2; }
.gl-mp-right > .container > :not(.gl-pin-visual, .visual, figure, picture, img, video, .gl-media) { grid-column: 1; grid-row: 1; }

.gl-mp-bottom > .container > :is(.gl-pin-visual, .visual, figure, picture, img, video, .gl-media) { order: 2; }
.gl-mp-top    > .container > :is(.gl-pin-visual, .visual, figure, picture, img, video, .gl-media) { order: -1; }

/* 배경으로 깔기 — 그림을 블록 전체 뒤로 보내고 글을 그 위에 올린다 */
.gl-mp-behind { position: relative; overflow: hidden; isolation: isolate; }
.gl-mp-behind > .container > :is(.gl-pin-visual, .visual, figure, picture, img, video, .gl-media) {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
}
.gl-mp-behind :is(img, video) { width: 100%; height: 100%; object-fit: cover; }

/* ── 사진·영상 크기 ──────────────────────────────────────────────── */
.gl-ms-s    > .container { grid-template-columns: minmax(0, 1fr) 2.2fr; }
.gl-ms-m    > .container { grid-template-columns: minmax(0, 1fr) 1.4fr; }
.gl-ms-l    > .container { grid-template-columns: minmax(0, 1.6fr) 1fr; }
.gl-ms-full > .container { grid-template-columns: 1fr; }
.gl-ms-full :is(img, video, .gl-media) { width: 100%; }
/* 오른쪽에 둔 경우 칸 순서가 뒤집히므로 비율도 뒤집는다 */
.gl-mp-right.gl-ms-s > .container { grid-template-columns: 2.2fr minmax(0, 1fr); }
.gl-mp-right.gl-ms-m > .container { grid-template-columns: 1.4fr minmax(0, 1fr); }
.gl-mp-right.gl-ms-l > .container { grid-template-columns: 1fr minmax(0, 1.6fr); }

/* ── 쌓임 순서 ───────────────────────────────────────────────────── */
.gl-z-back  :is(img, video, .gl-media, .gl-pin-visual) { z-index: 0; }
.gl-z-front :is(img, video, .gl-media, .gl-pin-visual) { position: relative; z-index: 2; }

/* ── 모서리 ──────────────────────────────────────────────────────── */
.gl-rd-none :is(img, video, .gl-media, .gl-pin-visual) { border-radius: 0; }
.gl-rd-md   :is(img, video, .gl-media, .gl-pin-visual) { border-radius: var(--r-md, 18px); overflow: hidden; }
.gl-rd-full :is(img, video, .gl-media, .gl-pin-visual) { border-radius: 999px; overflow: hidden; }

/* ── 실려 오는 값 ────────────────────────────────────────────────
   블록 상자에 --gl-… 로 붙는다. 안 붙으면 아래 기본값이 그대로 쓰인다. */
/* ── 반전 (2026-09-21 소유자 「간혹 반전으로 표기하는 게 좋을 것 같다」) ──
   역할 색(--bg · --fg …)을 이 위젯 안에서만 «반대 모드» 값으로 바꿔 끼운다.
   값은 gl-theme.js 가 <style id="gl-invert-colors"> 로 넣는다 — 브랜드가 정한 반대
   모드 한 벌을 그대로 옮긴 것이라, 여기에 색을 새로 적지 않는다.
   아래는 브랜드 테마가 없을 때의 대체값 — 늘 어두운 칸(--chip · --ondark-*)으로
   밝은 화면 위의 어두운 띠를 만든다. 테마가 있으면 뒤에 붙는 규칙이 이긴다.
   위젯 안의 글·카드는 역할 색을 쓰므로 따로 손대지 않아도 함께 뒤집힌다. */
.gl-iv-on {
  --bg: var(--chip); --surface: var(--chip); --surface-2: var(--chip);
  --fg: var(--ondark-fg); --fg-strong: var(--ondark-fg);
  --muted: var(--ondark-muted); --muted-2: var(--ondark-muted); --line: var(--ondark-muted);
  background-color: var(--bg);
  color: var(--fg);
  --gl-pat-k: 1;   /* 대체값은 늘 어두운 띠 — 패턴 밝기 배율도 어두운 화면 값 */
}
/* 첫 위젯이 반전일 때 상단바 — 대체값(테마가 없을 때). 바탕은 칠하지 않는다(상단바는 맨 위에서 투명) */
.nav.gl-nav-inv:not(.scrolled) {
  --bg: var(--chip); --surface: var(--chip); --surface-2: var(--chip);
  --fg: var(--ondark-fg); --fg-strong: var(--ondark-fg);
  --muted: var(--ondark-muted); --muted-2: var(--ondark-muted); --line: var(--ondark-muted);
}
[style*="--gl-bg"]  { background: var(--gl-bg) !important; }
[style*="--gl-ink"] { color: var(--gl-ink); }
[style*="--gl-ink"] :is(h1, h2, h3, h4, p, li, span, a):not(.btn):not(.nav-cta) { color: inherit; }

[style*="--gl-op"] :is(img, video) { opacity: calc(var(--gl-op, 100) / 100); }
[style*="--gl-focus"] :is(img, video) { object-position: var(--gl-focus, 50% 50%); }

/* 사진 위 덮기 — 사진이 밝아 글이 안 읽힐 때. 막은 사진 위, 글 아래에 깔린다. */
[style*="--gl-veil"] { position: relative; isolation: isolate; }
[style*="--gl-veil"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(0, 0, 0, calc(var(--gl-veil, 0) / 100));
}

/* ── 자유롭게 놓기 ───────────────────────────────────────────────
   요소마다 «어디에 · 얼마나 크게» 를 블록이 직접 들고 있다.
   화면 크기마다 따로 잡을 수 있고, 안 잡은 크기는 바로 위 것을 물려받는다. */
.gl-free > .container { position: relative; min-height: var(--gl-free-h, 420px); }
.gl-free [data-gl-at] {
  position: absolute;
  left: var(--x, 0%);
  top: var(--y, 0%);
  width: var(--w, auto);
  z-index: var(--z, 1);
  margin: 0;
}

@media (max-width: 900px) {
  /* 🔴 좁은 화면에서는 자리 잡기를 전부 푼다.
     왼쪽·오른쪽을 지키면 글이 한 줄에 두세 글자씩 들어간다.
     「자유롭게」로 잡은 것도, 휴대폰 자리를 따로 안 잡았으면 여기로 온다. */
  :is(.gl-mp-left, .gl-mp-right, .gl-mp-top, .gl-mp-bottom) > .container,
  :is(.gl-ms-s, .gl-ms-m, .gl-ms-l) > .container { grid-template-columns: 1fr; }
  .gl-mp-right > .container > * { grid-column: 1 !important; grid-row: auto !important; }
  .gl-al-right { text-align: left; }

  .gl-free:not(.gl-free-phone) > .container { position: static; min-height: 0; }
  .gl-free:not(.gl-free-phone) [data-gl-at] { position: static; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  /* 여기서 움직이는 것은 없다. 그래도 배경 영상은 멈춘다 —
     움직임을 원하지 않는 분에게 배경이 계속 흐르면 그것이 곧 움직임이다. */
  .gl-media video[autoplay] { display: none; }
  .gl-media video[autoplay] + .gl-media-poster { display: block; }
}