/* 사주 보고서 — 흑백 만화 선 + 진한 노랑 포인트 + 크림슨 강조
 * 굵은 먹선 테두리, 번지지 않는 '딱딱한' 그림자, 종이 바탕에 망점 */
:root {
  --paper: #fbf9f3;        /* 종이 */
  --sheet: #ffffff;
  --ink: #111111;
  --ink-soft: #2b2b2b;
  --sub: #555555;          /* 종이 위 7.3:1 */
  --faint: #6b6b6b;        /* 5.2:1 */
  --yellow: #f2b400;
  --yellow-soft: #fff1c2;
  --crimson: #c8102e;
  --err: #c8102e;
  --line: 2px solid var(--ink);
  --line-thick: 3px solid var(--ink);
  --hard: 4px 4px 0 var(--ink);
  --hard-sm: 3px 3px 0 var(--ink);
  --r: 6px;
  /* 다섯 기운 */
  --목: #2e7d4f; --화: #c8102e; --토: #a87400; --금: #5d6270; --수: #1f3a93;
}
* { box-sizing: border-box; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body {
  margin: 0; color: var(--ink); font-family: Pretendard, -apple-system, sans-serif; min-height: 100vh;
  background-color: var(--paper);
  background-image: radial-gradient(rgba(17,17,17,.10) 1px, transparent 1.2px);
  background-size: 14px 14px;
}
.han { font-family: 'Noto Serif KR', 'Noto Serif CJK KR', serif; }
.display { font-family: 'Black Han Sans', Pretendard, sans-serif; font-weight: 400; letter-spacing: -.01em; }
.mono { font-family: 'Space Mono', ui-monospace, monospace; }

/* 만화 칸: 흰 판 + 굵은 선 + 딱딱한 그림자 */
.panel { background: var(--sheet); border: var(--line-thick); border-radius: var(--r); box-shadow: var(--hard); }

/* 글자 칸: 흰 칸 + 먹선, 위에 기운 색 띠 */
.tile { display: inline-grid; place-items: center; background: var(--sheet); border: var(--line); border-radius: 4px; color: var(--ink); position: relative; box-shadow: var(--hard-sm); }
.tile::before { content: ''; position: absolute; left: -2px; right: -2px; top: -2px; height: 6px; border-radius: 4px 4px 0 0; background: var(--ink); }
.tile.목::before { background: var(--목); } .tile.화::before { background: var(--화); } .tile.토::before { background: var(--토); }
.tile.금::before { background: var(--금); } .tile.수::before { background: var(--수); }
.tile.목 { color: var(--목); } .tile.화 { color: var(--화); } .tile.토 { color: var(--토); }
.tile.금 { color: var(--금); } .tile.수 { color: var(--수); }

mark, .hl { background: linear-gradient(transparent 55%, var(--yellow) 55%, var(--yellow) 92%, transparent 92%); color: inherit; padding: 0 2px; }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }