/* 뉴모피즘 바탕 — 바탕과 같은 회색 판이 양각(튀어나옴)·음각(눌림) 그림자로 구분됨
 * 색은 회색 + 먹색, 오행 다섯 색은 글자·점에만. 글씨 대비는 회색 바탕 위 4.6:1 이상 */
:root {
  --bg-flat: #e4e4e8;
  --ink: #1c1c20;          /* 13.4:1 */
  --ink-soft: #3a3a42;
  --sub: #58566a;          /* 5.6:1 */
  --faint: #5e5c70;        /* 5.1:1 — 흐린 글씨도 읽히게 */
  --line: rgba(28, 28, 32, .10);
  --err: #a8304a;
  --paper: var(--bg-flat);
  --hi: #ffffff;           /* 왼쪽 위 빛 */
  --lo: #bebec6;           /* 오른쪽 아래 그림자 */
  --raised: 9px 9px 20px var(--lo), -9px -9px 20px var(--hi);
  --raised-sm: 5px 5px 11px var(--lo), -5px -5px 11px var(--hi);
  --inset: inset 6px 6px 12px var(--lo), inset -6px -6px 12px var(--hi);
  --inset-sm: inset 3px 3px 7px var(--lo), inset -3px -3px 7px var(--hi);
  --r: 32px;
  /* 다섯 기운 — 회색 위 글자색으로 4.6:1 이상 */
  --목: #1d6b48; --화: #a8304a; --토: #8c5a06; --금: #4c5266; --수: #2c3f86;
  --bg: var(--bg-flat);
}
* { 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; background: var(--bg-flat); min-height: 100vh; }
.han { font-family: 'Noto Serif KR', 'Noto Serif CJK KR', serif; }
.serif { font-family: Pretendard, -apple-system, sans-serif; font-weight: 500 !important; letter-spacing: -.02em; }
.num-font { font-family: 'Lexend', Pretendard, sans-serif; }

/* 양각 판 (예전 이름 glass 그대로 씀) */
.glass { background: var(--bg-flat); border-radius: var(--r); box-shadow: var(--raised); border: 0; }
.inset { background: var(--bg-flat); border-radius: var(--r); box-shadow: var(--inset); }

/* 글자 타일: 회색 양각 + 오행 색 글자 */
.tile { display: inline-grid; place-items: center; border-radius: 16px; background: var(--bg-flat); box-shadow: var(--raised-sm); color: var(--ink); }
.tile.목 { color: var(--목); } .tile.화 { color: var(--화); } .tile.토 { color: var(--토); }
.tile.금 { color: var(--금); } .tile.수 { color: var(--수); }
.tile.ink { background: var(--ink); color: #fff; box-shadow: 4px 4px 10px var(--lo), -4px -4px 10px var(--hi); }
.chip { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--bg-flat); box-shadow: var(--inset-sm); font-size: 12px; font-weight: 600; color: var(--sub); }

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