/* ==========================================================================
   명반 격자 — 전자책(PDF)과 같은 그림을 웹페이지에서 그립니다

   원본: src/render/report.css 의 「명반 격자 (4×4)」 절 (190~362행)
   HTML: src/render/grid.js → site/assets/js/engine/grid.js

   ⚠️ 왜 그대로 복사하지 않았나
     · report.css 는 A5 인쇄용이라 `*{margin:0}`·`@page`·`.page` 가 들어 있습니다.
       그대로 붙이면 사이트 전체 여백이 무너집니다.
     · `.grid`·`.s`·`.sh`·`.br` 은 style.css 에도 있는 흔한 이름입니다.
       그래서 **모든 선택자에 `.hs-mingban` 을 붙였습니다.**
     · 색·글꼴 변수는 report.css 에서 `:root` 에 있었습니다.
       여기서는 `.hs-mingban` 에 답니다 — 사이트 전체에 새어 나가면 안 됩니다.
       (변수가 없으면 테두리가 검게 나오고 배지 배경이 투명해져서
        별 글자가 배지 뒤로 비칩니다. 예전에 실제로 났던 문제입니다.)

   ⚠️ 크기를 바꾸지 마세요
     칸 여백은 손으로 잰 값이고, 별이 10개 앉는 전택궁은 여유가 0.5mm뿐입니다.
     `.g-cell` 이 `overflow:hidden` 이라 넘치면 **별이 소리 없이 사라집니다.**
     좁은 화면에서는 폭을 줄이지 않고 `transform: scale()` 로 통째로 축소합니다
     (site/assets/js/instant.js 가 배율을 계산합니다).
   ========================================================================== */

/* 바깥 상자 — 축소 배율을 재고 잘린 부분이 안 보이게 감쌉니다.
   ⚠️ **너비를 반드시 줍니다.** 예전엔 `margin-inline:auto` 만 있었는데,
      블록이라 부모 폭을 다 먹어 auto 가 아무 일도 하지 않았습니다.
      격자는 `transform-origin: top left` 라 왼쪽에 붙어 버립니다.
      실제 그려지는 폭(116mm × 배율)을 줘야 가로 가운데에 옵니다. */
.hs-mingban-box {
  --g-scale: 1;
  position: relative;
  overflow: hidden;
  width: calc(116mm * var(--g-scale));
  max-width: 100%;
  margin-inline: auto;
}

/* 격자 본체 — A5 본문 폭(148 − 16 × 2 = 116mm) 그대로 그립니다 */
.hs-mingban {
  /* report.css 의 :root 를 여기로 옮겨 담습니다 */
  --ink: #1b1b1b;
  --dim: #6b6b6b;
  --rule: #d8d4cc;
  --paper: #fffdf9;

  width: 116mm;
  transform: scale(var(--g-scale));
  transform-origin: top left;

  /* .g-center 의 0.72em · .g-name 의 1.35em 이 이 값을 물려받습니다.
     report.css 에서는 body{12.5pt} 였습니다 — 없으면 가운데 블록만 크기가 틀어집니다. */
  font-family: "Noto Serif KR", "본명조", "Apple SD Gothic Neo", "맑은 고딕", serif;
  font-size: 12.5pt;
  line-height: 1.98;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.hs-mingban *,
.hs-mingban *::before,
.hs-mingban *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── 이하 report.css 190~362행과 같은 규칙 (선택자에 접두만 붙였습니다) ── */

.hs-mingban .g-wrap { position: relative; }
.hs-mingban .grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 0;
  width: 100%;
  height: var(--grid-h, 152mm);
  border: 0.5pt solid var(--rule);
}
.hs-mingban .g-cell {
  position: relative;
  border: 0.3pt solid var(--rule);
  padding: 1.4mm 2.2mm 4.7mm 1.1mm;   /* 오른쪽 2.2mm 는 세로 글씨(장생12신) 자리 */
  overflow: hidden;
  font-size: 7.6pt;
}
.hs-mingban .g-cell.has-tag { padding-bottom: 7.8mm; }

.hs-mingban .g-js {
  position: absolute; right: 0.25mm; bottom: 4.6mm;
  writing-mode: vertical-rl; text-orientation: upright;
  font-size: 5.0pt; line-height: 1; letter-spacing: 0.15mm; color: #3d3a33;
}
.hs-mingban .g-bs {
  position: absolute; left: 1.1mm; bottom: 4.6mm;
  font-size: 5.0pt; line-height: 1.12; color: #0f6e56;
}
.hs-mingban .g-lim { font-size: 5.6pt; color: var(--dim); font-weight: 600; }
.hs-mingban .g-lim.cur {
  color: #c00; font-style: italic; text-decoration: underline; font-weight: 700;
}

.hs-mingban .g-stars {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 0 .5mm; line-height: 1.06;
}
.hs-mingban .s { display: flex; flex-direction: column; align-items: center; }
.hs-mingban .s .nm {
  display: flex; flex-direction: column; align-items: center; font-weight: 700;
}
.hs-mingban .s .br {
  font-style: normal; font-size: .76em; font-weight: 400; color: #555;
  margin-top: .25mm; min-height: 1em;
}
.hs-mingban .s .shw {
  display: flex; flex-direction: column; align-items: center; gap: .15mm; margin-top: .2mm;
}

/* 색 (운영자 확정 2026-07-31)
   빨강 14주성 + 화성·영성 / 검정 경양·타라·지공·지겁
   보라 길성 8 / 파랑 잡성 */
.hs-mingban .s.c-red    { color: #d40000; }
.hs-mingban .s.c-black  { color: #111111; }
.hs-mingban .s.c-blue   { color: #0033cc; }
.hs-mingban .s.c-purple { color: #9900cc; }
.hs-mingban .s.thin .nm { font-weight: 500; }
.hs-mingban .s.empty    { color: var(--dim); }

/* 사화 — 그 별의 열 바로 아래. 층을 배경색으로 가릅니다 */
.hs-mingban .sh {
  display: block; font-style: normal; font-size: .72em; font-weight: 700;
  color: #fff; border-radius: .6mm; padding: 0 .5mm; line-height: 1.4;
  white-space: nowrap; margin-top: .25mm;
}
.hs-mingban .sh.l-natal { background: #d40000; }
.hs-mingban .sh.l-dae   { background: #0033cc; }
.hs-mingban .sh.l-year  { background: #1e7a3c; }

.hs-mingban .g-foot {
  position: absolute;
  left: 1.2mm; right: 1.2mm; bottom: 1.2mm;
  display: flex; justify-content: space-between; align-items: baseline;
  line-height: 1.15;
}
.hs-mingban .g-pal { color: #a33; font-weight: 700; font-size: 7.4pt; }
.hs-mingban .g-gz  { color: var(--ink); font-weight: 600; font-size: 7.4pt; }

.hs-mingban .g-tag {
  position: absolute; bottom: 4.6mm; right: 1.2mm;
  font-size: 5.6pt; line-height: 1.05; color: #8a7a55;
  background: var(--paper);
  border: 0.3pt solid #b9ab86; border-radius: 0.8mm;
  padding: 0.15mm 0.7mm;
  max-width: calc(100% - 2.4mm);
  white-space: nowrap;
}

/* 이 대목의 자리 · 삼방사정에 드는 자리 */
.hs-mingban .g-cell.self { background: #f3ede0; border: 1.1pt solid #8a7a55; }
.hs-mingban .g-cell.lit  { background: #f8f5ee; }

/* 삼방사정 — 선은 가운데 블록의 변에서만 그려집니다 */
.hs-mingban .g-rays {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}
.hs-mingban .g-rays line {
  stroke-width: .45; stroke-dasharray: 2.2 1.5;
  vector-effect: non-scaling-stroke; fill: none;
}
.hs-mingban .g-rays line.sam   { stroke: #0033cc; opacity: .75; }
.hs-mingban .g-rays line.jeong { stroke: #d40000; opacity: .75; }

.hs-mingban .g-center {
  grid-area: 2 / 2 / 4 / 4;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 0.35em;
  border: 0.3pt solid var(--rule);
  text-align: center;
  font-size: 0.72em; line-height: 1.5;
}
.hs-mingban .g-name { font-size: 1.35em; font-weight: 600; }
.hs-mingban .g-meta { color: var(--dim); }