/* 원국 표 공용 스타일 — manse-wonguk.js가 그리는 <table class="pillars">. 관리자 모바일 만세력의 인라인
   스타일에서 그대로 옮겨왔다(값 변경 없음). 컬러/흑백은 관리자 규약대로 body.color-mode / body.mono-mode. */

table.pillars { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.pillars td, table.pillars th { border: 1px solid #ccc; text-align: center; padding: 2px 1px; font-size: 11px; }
table.pillars th { background: #f0f0f2; color: #666; font-weight: 600; }
table.pillars:not(.no-label) td:first-child, table.pillars:not(.no-label) th:first-child { width: 15%; color: #888; background: #f7f7f8; font-size: 10px; }
.hanja { font-size: 19px; font-weight: 700; padding: 3px 0; color: #000; }
.hangul-sub { font-size: 9px; color: #888; }
.jj-line { font-size: 13px; letter-spacing: 1px; padding: 3px 0; }

/* 이름 칸 없는 4기둥 표(관리자 만세력·실전 3) — 첫 열이 빠진 만큼 타일·글자를 약 1.3배로 */
table.pillars.no-label td, table.pillars.no-label th { font-size: 14px; padding: 3px 1px; }
table.pillars.no-label .hanja { font-size: 25px; padding: 5px 0; }
table.pillars.no-label .jj-line { font-size: 17px; letter-spacing: 1px; padding: 4px 0; }

/* 오행 파스텔 — 관리자 화면은 같은 규칙을 표 밖(오행 줄·대운 등)에도 전역으로 따로 둔다. */
body.color-mode table.pillars .el-mok  { background: var(--el-mok, #d7edd0); }
body.color-mode table.pillars .el-hwa  { background: var(--el-hwa, #fbdfe4); }
body.color-mode table.pillars .el-to   { background: var(--el-to, #faf0c8); }
/* 金·水는 원광만세력처럼 확실히 벌린다: 金 거의 흰색 + 얇은 회색 테두리, 水 진한 회색. 퀴즈·암기표가 쓰는 --el-geum/--el-su는 건드리지 않으려고 --mx-* 를 따로 쓴다. */
body.color-mode table.pillars .el-geum { background: var(--mx-geum, #FAFAF7); border-color: #cfd0d4; }
body.color-mode table.pillars .el-su   { background: var(--mx-su, #B8BCC4); }
body.color-mode .col-day { background: #fff8e0; }

/* 흑백: 유채색 0, 일주는 테두리로만 */
body.mono-mode .hanja, body.mono-mode .jj-line { background: none !important; color: #000; }
body.mono-mode .col-day { background: none; outline: 2px solid #000; }

/* ── 카드 머리줄(관리자 만세력·/manse 공용) — 「닫기 ×」는 그 사람 카드 전체를 닫는 버튼. 컬러·흑백 같은 모양. ── */
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #333; color: #fff; padding: 4px 8px; font-size: 13px; font-weight: 700; }
.card-remove-btn { background: none; border: 1px solid #fff; color: #fff; border-radius: 4px; min-height: 36px; padding: 0 12px; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; flex: 0 0 auto; white-space: nowrap; }

/* 이름 칸 없는 4기둥 표(관리자·실전 3·/manse)는 일간 기둥 배경 강조 없음 — 「일간(나)」 글자만 (위 두 줄은 이름 칸 있는 연습실 표용) */
body.color-mode table.pillars.no-label .col-day { background: none; }
body.mono-mode table.pillars.no-label .col-day { outline: none; }

/* ── 표 선 — 원광만세력처럼 연한 회색 1줄(기둥 사이·기둥 안 가로·바깥 테두리 모두). 이름 칸 없는 표만. ── */
table.pillars.no-label { border-collapse: collapse; border-spacing: 0; }
table.pillars.no-label td, table.pillars.no-label th { border: 1px solid #e2e2e6; }

/* ── 타일 입체감 (되돌리려면 이 묶음 전체를 지운다 — 클래스 .tile3d는 원국 표 천간·지지와 대운·세운·월운 간지 칸에 붙어 있다) ──
   원광만세력 타일처럼: 정사각형(가로=세로)·모서리 4px·거의 안 보이는 테두리·오른쪽·아래로 부드럽게 번지는 연한 그림자.
   위는 거의 흰색, 아래로 갈수록 오행 색(배경)이 살짝 진해지는 아주 옅은 흰색 그라데이션을 ::before 덮개로 얹는다(흑백 모드에서도 입체감만 남는다). */
table.pillars.no-label .tile3d, .scroll-cell .gz.tile3d { position: relative; isolation: isolate; box-sizing: border-box; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 0; line-height: 1; min-height: 0; overflow: hidden; border: 1px solid rgba(0,0,0,.06); border-radius: 4px; box-shadow: 2px 3px 4px rgba(0,0,0,.2); }
table.pillars.no-label .tile3d::before, .scroll-cell .gz.tile3d::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,.82), rgba(255,255,255,.4) 55%, rgba(255,255,255,.05)); }
table.pillars.no-label .tile3d { width: var(--tile-wonguk, 56px); margin: 3px auto 5px; } /* 원국 칸(--tile-wonguk은 manse-un.css :root — 대운·세운·월운 칸 크기의 기준 1.0) — 글자 25px 그대로, 칸만 정사각형 */
.scroll-cell .gz.tile3d { margin: 0 0 2px; box-shadow: 1px 2px 3px rgba(0,0,0,.2); }

/* ── 「십성·신살·12운성·형충회합」 체크 줄과 그 줄들(관리자 만세력·/manse — manse-wonguk.js show 옵션). 글자 13px 이상, 한 가지 색(빨강 없음), 흑백도 같은 모양. ── */
.show-bar { padding: 3px 6px; border-bottom: 1px solid #bbb; font-size: 13px; color: #333; }
/* 접이 제목 — 「▶ 명식 수정」과 같은 모양·크기(기본 ▶/▼ 화살표, 16px 굵게), 띠 전체가 누르는 곳. 괄호 설명은 작은 회색, 좁은 화면에선 줄여 한 줄에 */
.show-bar summary { cursor: pointer; display: list-item; padding: 8px 2px; font-size: 16px; font-weight: 700; color: #1d1d1f; }
.show-bar summary .show-hint { font-size: 12px; font-weight: 400; color: #888; }
.show-bar .show-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 2px 0; }
.show-bar .show-name { width: 34px; font-weight: 600; color: #666; }
.show-bar label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; min-height: 28px; }
.show-bar input { width: 16px; height: 16px; margin: 0; }
table.pillars.no-label .jj-line.jj-tg { font-size: 14px; letter-spacing: 0; line-height: 1.45; }
table.pillars.no-label .jj-line.jj-tg .jj-han { font-size: 16px; font-weight: 600; }
table.pillars.no-label td.ex-cell { font-size: 13px; line-height: 1.4; color: #333; padding: 3px 1px; word-break: keep-all; vertical-align: top; }
body.mono-mode table.pillars td.ex-cell { color: #000; }

/* ── 일간 기둥의 십성 자리 「일간(나)」 — 글자 크기는 옆 기둥 십성과 같고(td 상속), 색만 남색 ── */
.jj-none { color: #aaa; font-size: 10px; font-weight: 400; letter-spacing: 0; }
.ilgan-me { color: #1f3a8a; font-weight: 700; }
body.mono-mode .ilgan-me { color: #000; }