/* ═══════════════════════════════════════════════════════════════════════
   배경 패턴 — engine/layout/patterns.json 이 정한 것을 실제로 그린다

   🔴 이름은 patterns.json 의 id 와 «글자 그대로» 같아야 한다.
      한쪽만 고치면 선택 메뉴에는 나오는데 화면은 안 바뀐다.

   🔴 색을 여기서 정하지 않는다. 두 값만 실려 온다 —
        --gl-pat-ink   패턴 색 (기본은 글자색 계열 — 모드를 따라감. 모드마다 colorLight · colorDark)
        --gl-pat-size  패턴 크기
      진하기는 opacity 로 따로 준다. 그래야 어떤 색에서도 «옅게» 가 유지된다.

   패턴는 «장식» 이다. 화면을 소리로 읽는 분에게는 아무 뜻이 없으므로
   내용이 아니라 배경으로만 둔다(aria-hidden · pointer-events:none).
   ═══════════════════════════════════════════════════════════════════════ */

.hero-stripe,
[data-gl-pat] {
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: none;
  opacity: calc(var(--gl-pat-op, 0.035) * var(--gl-pat-k, 1));
  /* 기본은 글자색 계열 — 밝은 화면은 옅은 회색, 어두운 화면은 옅은 흰색으로 모드를 저절로 따라간다.
     (2026-09-25 소유자 「기본색이 강조색이라서 … 너무 촌스러워」 — 강조색을 쓰려면 브랜드 · 에디터에서 고른다) */
  --gl-pat-ink: var(--fg-strong, #0a0a0b);
  --gl-pat-size: 42px;
  /* 굵기와 각도도 고를 수 있다. 패턴마다 «간격(size)» 만으로는
     원하는 느낌이 안 나온다 — 같은 간격이라도 굵기에 따라 전혀 다르다. */
  --gl-pat-w: 2px;
  --gl-pat-angle: 135deg;
}

/* ── 밝은 화면에서는 진하기를 두 배로 ─────────────────────────────────
   2026-09-24 소유자 제보 — 「패턴이 밝은 화면에서는 보이지 않음」.
   같은 불투명도라도 흰 바탕 위의 옅은 색은 어두운 바탕 위보다 훨씬 덜 보인다.
   «아주 옅게»(0.035)가 어두운 화면에서는 보이는데 밝은 화면에서는 사라졌다.
   진하기 값(patterns.json · gl-theme.js STRENGTH)은 그대로 두고, 밝은 화면에서만
   배율을 건다 — 값을 바꾸면 어두운 화면이 함께 진해진다. */
:root { --gl-pat-k: 2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --gl-pat-k: 1; }
}
:root[data-theme="dark"] { --gl-pat-k: 1; }
/* 빛 · 번짐 계열은 이미 넓게 칠하는 패턴이라 배율을 걸지 않는다. 걸면 «진하게» 에서
   1 을 넘어 잘리고, vignette 는 흰 첫 화면 가장자리가 검게 덮인다(2026-09-24 레드팀). */
[data-gl-pat="glow"], [data-gl-pat="glow-corner"], [data-gl-pat="beam"],
[data-gl-pat="mesh"], [data-gl-pat="vignette"], [data-gl-pat="spotlight"] { --gl-pat-k: 1; }

/* ── 어디에 깔리나 ─────────────────────────────────────────────────── */
.hero-stripe,
[data-gl-pat-where="right"] { right: -10%; width: 55%; }
[data-gl-pat-where="left"]  { left: -10%;  width: 55%; }
[data-gl-pat-where="full"]  { left: 0;     width: 100%; }

/* ══════════════════════════════════════════════════════════════════════
   패턴 — 이름(id)은 layout/patterns.json 과 «글자 그대로» 같아야 한다.
   check:pattern 이 두 파일을 견준다.

   전부 순수 CSS 다. 그림 파일을 쓰지 않는 까닭 —
     · 패턴 하나마다 파일 하나면 40개가 40번의 내려받기가 된다
     · 색을 브랜드마다 바꿀 수 없다 (그림은 색이 박혀 있다)
     · 어두운 화면에서 뒤집히지 않는다
   ══════════════════════════════════════════════════════════════════════ */

[data-gl-pat="none"] { background: none; }

/* ── 선 ────────────────────────────────────────────────────────────── */
[data-gl-pat="line"] {
  background: repeating-linear-gradient(var(--gl-pat-angle),
    transparent 0 calc(var(--gl-pat-size) - var(--gl-pat-w)),
    var(--gl-pat-ink) calc(var(--gl-pat-size) - var(--gl-pat-w)) var(--gl-pat-size));
}
[data-gl-pat="line-back"] {
  background: repeating-linear-gradient(calc(180deg - var(--gl-pat-angle)),
    transparent 0 calc(var(--gl-pat-size) - var(--gl-pat-w)),
    var(--gl-pat-ink) calc(var(--gl-pat-size) - var(--gl-pat-w)) var(--gl-pat-size));
}
[data-gl-pat="line-wide"] {
  background: repeating-linear-gradient(var(--gl-pat-angle),
    transparent 0 calc(var(--gl-pat-size) - var(--gl-pat-w) * 4),
    var(--gl-pat-ink) calc(var(--gl-pat-size) - var(--gl-pat-w) * 4) var(--gl-pat-size));
}
[data-gl-pat="line-v"] {
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(var(--gl-pat-size) - var(--gl-pat-w)),
    var(--gl-pat-ink) calc(var(--gl-pat-size) - var(--gl-pat-w)) var(--gl-pat-size));
}
[data-gl-pat="line-h"] {
  background: repeating-linear-gradient(180deg,
    transparent 0 calc(var(--gl-pat-size) - var(--gl-pat-w)),
    var(--gl-pat-ink) calc(var(--gl-pat-size) - var(--gl-pat-w)) var(--gl-pat-size));
}
/* 끊긴 사선 — 사선 위에 «지우는 가로줄» 을 겹쳐 점선으로 만든다 */
[data-gl-pat="line-dash"] {
  background-image:
    repeating-linear-gradient(135deg, var(--gl-pat-ink) 0 2px, transparent 2px var(--gl-pat-size));
  -webkit-mask-image: repeating-linear-gradient(135deg, #000 0 8px, transparent 8px 16px);
          mask-image: repeating-linear-gradient(135deg, #000 0 8px, transparent 8px 16px);
}
[data-gl-pat="hatch"] {
  background:
    repeating-linear-gradient(var(--gl-pat-angle), transparent 0 calc(var(--gl-pat-size) - var(--gl-pat-w)),
      var(--gl-pat-ink) calc(var(--gl-pat-size) - var(--gl-pat-w)) var(--gl-pat-size)),
    repeating-linear-gradient(calc(180deg - var(--gl-pat-angle)), transparent 0 calc(var(--gl-pat-size) - var(--gl-pat-w)),
      var(--gl-pat-ink) calc(var(--gl-pat-size) - var(--gl-pat-w)) var(--gl-pat-size));
}
[data-gl-pat="grid"],
[data-gl-pat="grid-fine"] {
  background:
    linear-gradient(var(--gl-pat-ink) var(--gl-pat-w), transparent var(--gl-pat-w)) 0 0 / 100% var(--gl-pat-size),
    linear-gradient(90deg, var(--gl-pat-ink) var(--gl-pat-w), transparent var(--gl-pat-w)) 0 0 / var(--gl-pat-size) 100%;
}
/* 청사진 — 잔 모눈 위에 굵은 모눈 */
[data-gl-pat="blueprint"] {
  --f: calc(var(--gl-pat-size) / 5);
  background:
    linear-gradient(var(--gl-pat-ink) 1.6px, transparent 1.6px) 0 0 / 100% var(--gl-pat-size),
    linear-gradient(90deg, var(--gl-pat-ink) 1.6px, transparent 1.6px) 0 0 / var(--gl-pat-size) 100%,
    linear-gradient(var(--gl-pat-ink) 0.6px, transparent 0.6px) 0 0 / 100% var(--f),
    linear-gradient(90deg, var(--gl-pat-ink) 0.6px, transparent 0.6px) 0 0 / var(--f) 100%;
}
/* 경고 빗금 — 색 띠와 빈 띠가 반씩. 빈 띠를 검정으로 칠하면 밝은 화면에서 패턴 색이
   검정일 때 두 띠가 같은 색이 되어 줄무늬가 통째로 사라진다(2026-09-25 소유자 「빗금이 이상한데?」). */
[data-gl-pat="warn"] {
  background: repeating-linear-gradient(var(--gl-pat-angle),
    transparent 0 calc(var(--gl-pat-size) / 2),
    var(--gl-pat-ink) calc(var(--gl-pat-size) / 2) var(--gl-pat-size));
}
[data-gl-pat="warn-thin"] {
  background: repeating-linear-gradient(var(--gl-pat-angle),
    transparent 0 calc(var(--gl-pat-size) * 0.62),
    var(--gl-pat-ink) calc(var(--gl-pat-size) * 0.62) var(--gl-pat-size));
}
/* 카본 — 아주 잔 격자 두 방향이 어긋나 짜인 것처럼 보인다 */
[data-gl-pat="carbon"] {
  --h: calc(var(--gl-pat-size) / 2);
  background:
    linear-gradient(45deg, var(--gl-pat-ink) 25%, transparent 25% 75%, var(--gl-pat-ink) 75%)
      0 0 / var(--gl-pat-size) var(--gl-pat-size),
    linear-gradient(45deg, var(--gl-pat-ink) 25%, transparent 25% 75%, var(--gl-pat-ink) 75%)
      var(--h) var(--h) / var(--gl-pat-size) var(--gl-pat-size);
}

/* ── 점 ────────────────────────────────────────────────────────────── */
[data-gl-pat="dot"],
[data-gl-pat="dot-fine"],
[data-gl-pat="dot-big"] {
  background: radial-gradient(var(--gl-pat-ink) 1.6px, transparent 1.7px)
              0 0 / var(--gl-pat-size) var(--gl-pat-size);
}
[data-gl-pat="dot-big"] { background-image: radial-gradient(var(--gl-pat-ink) 3px, transparent 3.2px); }
[data-gl-pat="dot-fine"] { background-image: radial-gradient(var(--gl-pat-ink) 0.9px, transparent 1px); }
/* 엇갈린 점 — 반 칸 밀린 한 벌을 겹친다 */
[data-gl-pat="dot-stagger"] {
  --h: calc(var(--gl-pat-size) / 2);
  background:
    radial-gradient(var(--gl-pat-ink) 1.6px, transparent 1.7px) 0 0 / var(--gl-pat-size) var(--gl-pat-size),
    radial-gradient(var(--gl-pat-ink) 1.6px, transparent 1.7px) var(--h) var(--h) / var(--gl-pat-size) var(--gl-pat-size);
}
[data-gl-pat="dot-diag"] {
  --h: calc(var(--gl-pat-size) / 3);
  background:
    radial-gradient(var(--gl-pat-ink) 1.5px, transparent 1.6px) 0 0 / var(--gl-pat-size) var(--gl-pat-size),
    radial-gradient(var(--gl-pat-ink) 1.5px, transparent 1.6px) var(--h) var(--h) / var(--gl-pat-size) var(--gl-pat-size),
    radial-gradient(var(--gl-pat-ink) 1.5px, transparent 1.6px)
      calc(var(--h) * 2) calc(var(--h) * 2) / var(--gl-pat-size) var(--gl-pat-size);
}
[data-gl-pat="dot-ring"] {
  background: radial-gradient(circle,
    transparent 0 3px, var(--gl-pat-ink) 3px 4.2px, transparent 4.2px)
    0 0 / var(--gl-pat-size) var(--gl-pat-size);
}

/* ── 도형 ──────────────────────────────────────────────────────────── */
[data-gl-pat="cross"],
[data-gl-pat="plus"] {
  --c: var(--gl-pat-size);
  background-image:
    linear-gradient(to bottom, transparent 30%, var(--gl-pat-ink) 30% 70%, transparent 70%),
    linear-gradient(to right,  transparent 30%, var(--gl-pat-ink) 30% 70%, transparent 70%);
  background-size: 1.5px var(--c), var(--c) 1.5px;
  background-position: calc(var(--c) / 2) 0, 0 calc(var(--c) / 2);
  background-repeat: repeat;
}
[data-gl-pat="plus"] { background-size: 3px var(--c), var(--c) 3px; }

[data-gl-pat="checker"],
[data-gl-pat="checker-fine"] {
  --h: calc(var(--gl-pat-size) / 2);
  background:
    conic-gradient(var(--gl-pat-ink) 0 25%, transparent 0 50%,
                   var(--gl-pat-ink) 0 75%, transparent 0)
    0 0 / var(--gl-pat-size) var(--gl-pat-size);
}
[data-gl-pat="diamond"] {
  --h: calc(var(--gl-pat-size) / 2);
  background:
    linear-gradient(45deg,  var(--gl-pat-ink) 25%, transparent 25%) 0 0 / var(--h) var(--h),
    linear-gradient(-45deg, var(--gl-pat-ink) 25%, transparent 25%) 0 0 / var(--h) var(--h),
    linear-gradient(45deg,  transparent 75%, var(--gl-pat-ink) 75%) 0 0 / var(--h) var(--h),
    linear-gradient(-45deg, transparent 75%, var(--gl-pat-ink) 75%) 0 0 / var(--h) var(--h);
}
[data-gl-pat="triangle"] {
  background:
    conic-gradient(from 90deg at 50% 0, transparent 0 90deg, var(--gl-pat-ink) 0 180deg, transparent 0)
    0 0 / var(--gl-pat-size) calc(var(--gl-pat-size) * 0.55);
}
[data-gl-pat="zigzag"] {
  --h: calc(var(--gl-pat-size) / 2);
  background:
    linear-gradient(135deg, var(--gl-pat-ink) 25%, transparent 25%) 0 0 / var(--h) var(--h),
    linear-gradient(225deg, var(--gl-pat-ink) 25%, transparent 25%) 0 0 / var(--h) var(--h);
}
[data-gl-pat="chevron"] {
  --h: calc(var(--gl-pat-size) / 2);
  background:
    linear-gradient(135deg, var(--gl-pat-ink) 0 2px, transparent 2px) 0 0 / var(--h) var(--h),
    linear-gradient(225deg, var(--gl-pat-ink) 0 2px, transparent 2px) 0 0 / var(--h) var(--h);
}
[data-gl-pat="brick"] {
  --h: calc(var(--gl-pat-size) / 2);
  background:
    linear-gradient(var(--gl-pat-ink) 1.2px, transparent 1.2px) 0 0 / 100% var(--h),
    linear-gradient(90deg, var(--gl-pat-ink) 1.2px, transparent 1.2px) 0 0 / var(--gl-pat-size) var(--h),
    linear-gradient(90deg, var(--gl-pat-ink) 1.2px, transparent 1.2px)
      calc(var(--gl-pat-size) / 2) var(--h) / var(--gl-pat-size) var(--h);
}
[data-gl-pat="scale"] {
  --h: calc(var(--gl-pat-size) / 2);
  background:
    radial-gradient(circle at 50% 100%,
      transparent calc(var(--h) - 1.2px), var(--gl-pat-ink) calc(var(--h) - 1.2px) var(--h), transparent var(--h))
      0 0 / var(--gl-pat-size) var(--h),
    radial-gradient(circle at 50% 100%,
      transparent calc(var(--h) - 1.2px), var(--gl-pat-ink) calc(var(--h) - 1.2px) var(--h), transparent var(--h))
      var(--h) var(--h) / var(--gl-pat-size) var(--h);
}
[data-gl-pat="wave"] {
  --w: var(--gl-pat-size);
  --h: calc(var(--gl-pat-size) / 2);
  background:
    radial-gradient(circle at 50% 100%,
      transparent calc(var(--h) - 1.2px), var(--gl-pat-ink) calc(var(--h) - 1.2px) var(--h), transparent var(--h))
      0 0 / var(--w) var(--h),
    radial-gradient(circle at 50% 0,
      transparent calc(var(--h) - 1.2px), var(--gl-pat-ink) calc(var(--h) - 1.2px) var(--h), transparent var(--h))
      var(--h) calc(var(--h) / 2) / var(--w) var(--h);
}
[data-gl-pat="arrow"] {
  --h: calc(var(--gl-pat-size) / 2);
  background:
    linear-gradient(135deg, var(--gl-pat-ink) 0 1.6px, transparent 1.6px) 0 0 / var(--h) var(--h),
    linear-gradient(45deg,  var(--gl-pat-ink) 0 1.6px, transparent 1.6px) 0 var(--h) / var(--h) var(--h);
}
[data-gl-pat="stitch"] {
  background:
    repeating-linear-gradient(90deg, var(--gl-pat-ink) 0 6px, transparent 6px 12px)
      0 0 / 100% 1.4px,
    repeating-linear-gradient(90deg, var(--gl-pat-ink) 0 6px, transparent 6px 12px)
      6px var(--gl-pat-size) / 100% 1.4px;
  background-repeat: repeat-y, repeat-y;
  background-size: 100% var(--gl-pat-size), 100% var(--gl-pat-size);
}
[data-gl-pat="weave"] {
  --h: calc(var(--gl-pat-size) / 2);
  background:
    linear-gradient(90deg, var(--gl-pat-ink) 50%, transparent 50%) 0 0 / var(--gl-pat-size) var(--h),
    linear-gradient(var(--gl-pat-ink) 50%, transparent 50%) 0 0 / var(--h) var(--gl-pat-size);
  opacity: calc(var(--gl-pat-op, 0.035) * var(--gl-pat-k, 1) * 0.8);
}

/* ── 빛과 번짐 ─────────────────────────────────────────────────────── */
[data-gl-pat="glow"] {
  background: radial-gradient(70% 60% at 70% 20%, var(--gl-pat-ink), transparent 62%);
  opacity: calc(var(--gl-pat-op, 0.035) * var(--gl-pat-k, 1) * 2.2);
}
[data-gl-pat="glow-corner"] {
  background: radial-gradient(60% 70% at 100% 0, var(--gl-pat-ink), transparent 65%);
  opacity: calc(var(--gl-pat-op, 0.035) * var(--gl-pat-k, 1) * 2.4);
}
[data-gl-pat="beam"] {
  background: linear-gradient(115deg, transparent 30%, var(--gl-pat-ink) 50%, transparent 70%);
  opacity: calc(var(--gl-pat-op, 0.035) * var(--gl-pat-k, 1) * 2.2);
}
[data-gl-pat="mesh"] {
  background:
    radial-gradient(40% 50% at 20% 20%, var(--gl-pat-ink), transparent 60%),
    radial-gradient(45% 55% at 80% 10%, var(--gl-pat-ink), transparent 60%),
    radial-gradient(50% 60% at 60% 90%, var(--gl-pat-ink), transparent 60%);
  opacity: calc(var(--gl-pat-op, 0.035) * var(--gl-pat-k, 1) * 2.4);
}
[data-gl-pat="vignette"] {
  /* 의도 — 가장자리를 «어둡게» 하는 패턴다. 어두운 화면에서 밝은 색으로
     뒤집히면 가장자리가 하얗게 떠서 패턴의 뜻이 반대가 된다. */
  background: radial-gradient(70% 70% at 50% 50%, transparent 40%, var(--black, #0a0a0b) 100%);
  opacity: calc(var(--gl-pat-op, 0.035) * var(--gl-pat-k, 1) * 3);
}
[data-gl-pat="spotlight"] {
  background: radial-gradient(28% 45% at 72% 12%, var(--gl-pat-ink), transparent 70%);
  opacity: calc(var(--gl-pat-op, 0.035) * var(--gl-pat-k, 1) * 3);
}

/* ── 직접 넣는 것 두 가지 ──────────────────────────────────────────── */

/* 올린 그림을 타일처럼 반복한다. 크기로 촘촘함을 정한다. */
[data-gl-pat="image"] {
  background-image: var(--gl-pat-img, none);
  background-size: var(--gl-pat-size) auto;
  background-repeat: var(--gl-pat-repeat, repeat);
}
/* 엇갈리게 — 같은 그림을 반 칸 밀어 한 벌 더 깐다. 벽돌처럼 어긋난다.
   같은 그림이 줄 맞춰 반복되면 «격자» 가 눈에 먼저 들어와 패턴가 안 보인다. */
[data-gl-pat="image"][data-gl-pat-repeat="stagger"] {
  background-image: var(--gl-pat-img, none), var(--gl-pat-img, none);
  background-size: var(--gl-pat-size) auto, var(--gl-pat-size) auto;
  background-position: 0 0, calc(var(--gl-pat-size) / 2) calc(var(--gl-pat-size) / 2);
  background-repeat: repeat, repeat;
}

/* CSS 배경 한 줄을 그대로 쓴다.
   🔴 사람이 적은 글이 여기로 온다. gl-theme.js 가 걸러 낸 것만 실린다. */
[data-gl-pat="custom"] {
  background: var(--gl-pat-css, none);
}


/* ── 그라데이션 — 패턴 위에 색이 번진다 ─────────────────────────────
   패턴와 «따로» 다. 겹쳐 쓰면 패턴가 한쪽에서 사라지듯 흐려져 깊이가 생긴다.

   🔴 패턴 칸과 opacity 를 나눠 갖는다. 한 칸에 넣으면 패턴를 옅게 할 때
      그라데이션까지 함께 사라진다. */
.hero-grad,
[data-gl-grad] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--gl-grad-op, 0.14);
  background: linear-gradient(var(--gl-grad-angle, 160deg),
    var(--gl-grad-from, transparent), var(--gl-grad-to, transparent));
}
[data-gl-grad="none"] { display: none; }
/* 한쪽으로 사라지게 — 패턴가 글 쪽에서 옅어져 글이 잘 읽힌다 */
[data-gl-grad="fade"] {
  background: linear-gradient(var(--gl-grad-angle, 90deg),
    var(--gl-grad-from, transparent) 0%, transparent 55%);
}
/* 가운데서 번짐 */
[data-gl-grad="radial"] {
  background: radial-gradient(60% 60% at 70% 20%,
    var(--gl-grad-from, transparent), var(--gl-grad-to, transparent) 70%);
}