/* zeo's work house — Metaphysics / 자미두수 (紫微斗數)
   standalone: --zeo-* + 사화 4색 (학파 관행 보존) */

:root {
  /* ===== zeo base (외장 v2 동일) ===== */
  --zeo-bg: #FFFFFF;
  --zeo-fg: #111111;
  --zeo-accent: #6B3FA0;
  --zeo-muted: #767676;
  --zeo-border: #E5E5E5;
  /* ===== case (외장 v2 결 매핑) ===== */
  --case-bg: #EBE2CE;
  --case-fg: #2A2620;
  --case-line: #C8BFA8;
  --case-ink: #6E6859;
  --inset: #161310;
  --inset-fg: #E8E1CC;
  --inset-soft: #D7CCB3;
  --raise: #F2EBD9;
  --accent-glow: rgba(107,63,160,.5);
  --led-off: #B3A98F;
  /* ===== 사화 4색 (학파 관행 정체성) ===== */
  --zw-lu:  #2e7d32; /* 화록 — 재물 */
  --zw-quan:#f57f17; /* 화권 — 권력 */
  --zw-ke:  #1565c0; /* 화과 — 명예 */
  --zw-ji:  #c62828; /* 화기 — 집착 */
  /* ===== 보조 강조 ===== */
  --zw-soul: #6B3FA0;  /* 명궁 = accent 톤 */
  --zw-body: #C49B5F;  /* 신궁 = 흙 톤 */
  --zw-current: #D9534F; /* 현재 대한 강조 */
}

:root[data-theme="dark"] {
  --zeo-bg: #0F0F12;
  --zeo-fg: #EDEDED;
  --zeo-accent: #B69CE0;
  --zeo-muted: #9B9B9B;
  --zeo-border: #2A2A2E;
  --case-bg: #221F1A;
  --case-fg: #E8E1CC;
  --case-line: #3A352D;
  --case-ink: #9B948A;
  --inset: #0B0A08;
  --inset-fg: #E8E1CC;
  --inset-soft: #15130F;
  --raise: #2D2822;
  --accent-glow: rgba(182,156,224,.55);
  --led-off: #4A4640;
  --zw-lu:  #66bb6a;
  --zw-quan:#ffa726;
  --zw-ke:  #42a5f5;
  --zw-ji:  #ef5350;
  --zw-soul: #B69CE0;
  --zw-body: #DDBB80;
  --zw-current: #FF6F69;
}

:root[data-theme="blue"] {
  --zeo-bg: #232C40;
  --zeo-fg: #DCE3F0;
  --zeo-accent: #B69CE0;
  --zeo-muted: #8995AA;
  --zeo-border: #3A4358;
  --case-bg: #232C40;
  --case-fg: #DCE3F0;
  --case-line: #3A4358;
  --case-ink: #8995AA;
  --inset: #0E121C;
  --inset-fg: #DCE3F0;
  --inset-soft: #1A2233;
  --raise: #2D3852;
  --accent-glow: rgba(182,156,224,.55);
  --led-off: #51596D;
  --zw-lu:  #66bb6a;
  --zw-quan:#ffa726;
  --zw-ke:  #42a5f5;
  --zw-ji:  #ef5350;
  --zw-soul: #B69CE0;
  --zw-body: #DDBB80;
  --zw-current: #FF6F69;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--case-bg);
  color: var(--case-fg);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  line-height: 1.6;
}

code, pre, kbd, samp, .markdown, .hanja, .zw-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.zeo-toggle {
  position: fixed;
  top: 48px;
  right: 16px;
  z-index: 9999;
  font-size: 1.4rem;
  padding: 6px 10px;
  border: 1px solid var(--zeo-border);
  border-radius: 8px;
  background: var(--zeo-bg);
  color: var(--zeo-fg);
  cursor: pointer;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.2rem 3rem;
}

.zw-header { text-align: center; margin-bottom: 1.5rem; position: relative; }
.zw-header h1 {
  margin: 0 0 0.3rem;
  font-size: 1.8rem;
  color: var(--zeo-fg);
}
.zw-header h1 .accent { color: var(--zeo-accent); }
.zw-header p { margin: 0; color: var(--zeo-muted); font-size: 0.92rem; }
.zw-btn-info {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.35rem 0.9rem;
  background: transparent;
  color: var(--zeo-accent);
  border: 1px solid var(--zeo-accent);
  border-radius: 20px;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
}
.zw-btn-info:hover { background: var(--zeo-accent); color: #fff; }

/* 입력 */
.zw-inputs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem auto;
  max-width: 720px;
}

.zw-input-row {
  display: flex;
  gap: 1.2rem;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: center;
}

.zw-input-group { display: flex; flex-direction: column; gap: 0.3rem; }

.zw-input-group label {
  font-size: 0.82rem;
  color: var(--zeo-muted);
  letter-spacing: 0.05em;
}

.zw-ymd, .zw-hm { display: flex; gap: 0.4rem; align-items: center; }
.zw-ymd input { width: 5.2rem; text-align: center; }
.zw-hm input { width: 3.6rem; text-align: center; }

.zw-inputs input[type="text"],
.zw-inputs input[type="number"],
.zw-inputs input[type="tel"],
.zw-inputs select {
  padding: 0.5rem 0.6rem;
  background: var(--inset-soft);
  color: var(--case-fg);
  border: 1px solid var(--case-line);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  box-shadow: inset 0 1px 2px color-mix(in oklab, var(--inset-soft) 70%, #000000 30%);
}

.zw-inputs input:focus,
.zw-inputs select:focus {
  outline: none;
  border-color: var(--zeo-accent);
}

.zw-inputs input:disabled { opacity: 0.5; cursor: not-allowed; }

.zw-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border: 1px dashed var(--zeo-border);
  border-radius: 8px;
}

.zw-options .zw-radios {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.zw-options .zw-radios > span {
  color: var(--zeo-muted);
  font-size: 0.86rem;
  margin-right: 0.4rem;
}

.zw-options label {
  font-size: 0.92rem;
  color: var(--zeo-fg);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.zw-action { text-align: center; margin-top: 0.5rem; }

.zw-btn-primary {
  background: var(--zeo-accent);
  color: #fff;
  border: none;
  padding: 0.7rem 2rem;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.zw-btn-primary:hover { filter: brightness(1.1); }
.zw-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.zw-btn-secondary {
  background: var(--raise);
  color: var(--case-fg);
  border: 1px solid var(--case-line);
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--raise) 60%, #FFFFFF 40%),
    inset 0 -1px 0 color-mix(in oklab, var(--raise) 80%, #000000 20%),
    0 1px 0 color-mix(in oklab, var(--case-bg) 70%, #000000 30%);
  transition: color 0.15s, border-color 0.15s;
}

.zw-btn-secondary:hover { border-color: var(--zeo-accent); color: var(--zeo-accent); }

.zw-status { font-size: 0.88rem; color: var(--zeo-muted); margin-top: 0.5rem; min-height: 1.2em; }
.zw-status.err { color: var(--zw-current); }
.zw-status.ok { color: var(--zw-lu); }

/* 결과 */
#zw-result { margin-top: 1.5rem; display: none; }
#zw-result.show { display: block; }

.zw-info-card, .zw-chart-section {
  background: var(--raise);
  border: 1px solid var(--case-line);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--raise) 60%, #FFFFFF 40%),
    0 1px 2px color-mix(in oklab, var(--case-bg) 80%, #000000 20%);
}

.zw-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--zeo-accent);
  margin: 0 0 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed var(--zeo-border);
}

.zw-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.5rem;
}

.zw-info-item {
  background: var(--zeo-bg);
  border: 1px solid var(--zeo-border);
  border-radius: 8px;
  padding: 0.5rem;
  text-align: center;
}

.zw-ii-label { font-size: 0.72rem; color: var(--zeo-muted); letter-spacing: 0.05em; }
.zw-ii-value { font-size: 1rem; font-weight: 700; color: var(--zeo-fg); margin-top: 0.15rem; }
.zw-ii-sub { font-size: 0.74rem; color: var(--zeo-muted); margin-top: 0.1rem; }

/* 명반 그리드 4×4 */
.ziwei-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 4px;
  aspect-ratio: 1 / 1;
  max-width: 720px;
  margin: 0.8rem auto;
  background: var(--zeo-border);
  padding: 4px;
  border-radius: 10px;
}

@media (max-width: 700px) { .ziwei-board { font-size: 0.72rem; } }
@media (max-width: 500px) { .ziwei-board { font-size: 0.62rem; } }

.palace {
  background: var(--zeo-bg);
  border: 1px solid var(--zeo-border);
  border-radius: 6px;
  padding: 0.4rem 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.palace.soul {
  background: color-mix(in srgb, var(--zw-soul) 8%, var(--zeo-bg));
  border-color: var(--zw-soul);
}

.palace.body {
  background: color-mix(in srgb, var(--zw-body) 10%, var(--zeo-bg));
  border-color: var(--zw-body);
}

.palace.current-daeun {
  box-shadow: inset 0 0 0 2px var(--zw-current);
}

.palace-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78em;
  border-bottom: 1px dashed var(--zeo-border);
  padding-bottom: 2px;
  margin-bottom: 2px;
}

.palace-name { color: var(--zw-soul); font-weight: 700; }
.palace.soul .palace-name { color: var(--zw-body); }
.palace.body .palace-name { color: var(--zw-body); }
.palace-gz { color: var(--zeo-muted); font-size: 0.96em; }

.palace-stars { display: flex; flex-direction: column; gap: 1px; flex: 1; }

.star-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2px;
  font-size: 0.92em;
}

.star-major { color: var(--zw-body); font-weight: 700; }
.star-minor { color: var(--zeo-fg); font-size: 0.92em; }
.star-adj   { color: var(--zeo-muted); font-size: 0.86em; }
.star-bright { color: var(--zeo-muted); font-size: 0.78em; margin-left: 2px; }

.star-mutagen {
  display: inline-block;
  padding: 0 3px;
  margin-left: 2px;
  border-radius: 3px;
  font-size: 0.72em;
  font-weight: 700;
  color: #fff;
}
.mut-록 { background: var(--zw-lu); }
.mut-권 { background: var(--zw-quan); }
.mut-과 { background: var(--zw-ke); }
.mut-기 { background: var(--zw-ji); }

.palace-foot {
  font-size: 0.7em;
  color: var(--zeo-muted);
  border-top: 1px dashed var(--zeo-border);
  padding-top: 2px;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
}
.palace-age { color: var(--zw-current); }
.palace-decadal { color: var(--zw-soul); }

.center-info {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  background: color-mix(in srgb, var(--zeo-accent) 5%, var(--zeo-bg));
  border: 1px solid var(--zeo-border);
  border-radius: 8px;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
}

.ci-row {
  font-size: 0.86em;
  color: var(--zeo-fg);
  display: flex;
  gap: 0.4rem;
}
.ci-label { color: var(--zeo-accent); font-weight: 700; min-width: 4rem; }
.ci-name { font-size: 1.05em; font-weight: 700; color: var(--zw-body); margin-bottom: 0.2rem; }

.zw-board-hint {
  text-align: center;
  font-size: 0.78rem;
  color: var(--zeo-muted);
  margin-top: 0.4rem;
}

/* 대운 타임라인 */
.daeun-tl {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 6px 0;
  margin-top: 6px;
}

.du-item {
  min-width: 80px;
  text-align: center;
  padding: 0.5rem 0.4rem;
  background: var(--zeo-bg);
  border: 2px solid transparent;
  border-radius: 8px;
  flex-shrink: 0;
}

.du-item.curr {
  border-color: var(--zw-current);
  background: color-mix(in srgb, var(--zw-current) 6%, var(--zeo-bg));
}

.du-age { font-size: 0.74rem; color: var(--zeo-muted); }
.du-gz { font-size: 0.95rem; font-weight: 700; color: var(--zw-body); margin: 0.1rem 0; }
.du-palace { font-size: 0.74rem; color: var(--zeo-accent); }
.du-item.curr .du-age { color: var(--zw-current); }

.zw-yearly {
  margin-top: 0.6rem;
  padding: 0.6rem;
  background: var(--zeo-bg);
  border: 1px solid var(--zeo-border);
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--zeo-fg);
}

.zw-yearly strong { color: var(--zw-body); }

/* 마크다운 */
.markdown-section { margin-top: 1.5rem; }
.markdown-section h2 {
  font-size: 1rem;
  color: var(--zeo-muted);
  margin-bottom: 0.5rem;
  letter-spacing: 0.06em;
}

.markdown {
  width: 100%;
  min-height: 420px;
  background: var(--inset);
  color: var(--inset-fg);
  border: 1px solid var(--case-line);
  border-radius: 8px;
  padding: 0.9rem;
  font-size: 0.86rem;
  line-height: 1.7;
  resize: vertical;
  white-space: pre;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}

.markdown-actions {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.copy-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-30px);
  background: var(--zeo-accent);
  color: #fff;
  padding: 0.5rem 1.2rem;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 10000;
  font-size: 0.92rem;
}
.copy-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 모달 — 자미두수 백과 */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}

.modal-overlay.show { display: flex; }

.modal {
  background: var(--raise);
  color: var(--case-fg);
  border: 1px solid var(--case-line);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 660px;
  width: 100%;
  margin: auto;
  position: relative;
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--raise) 60%, #FFFFFF 40%),
    0 6px 28px rgba(0, 0, 0, 0.4);
}

.modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 32px;
  height: 32px;
  background: transparent;
  color: var(--zeo-muted);
  border: 1px solid var(--zeo-border);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  font-family: inherit;
}
.modal-close:hover { background: var(--zw-current); color: #fff; border-color: var(--zw-current); }

.modal h2 {
  font-size: 1.4rem;
  color: var(--zeo-accent);
  margin: 0 0 0.6rem;
}
.modal h3 { font-size: 1rem; color: var(--zw-body); margin: 0.8rem 0 0.4rem; }
.modal p { font-size: 0.9rem; color: var(--zeo-fg); margin-bottom: 0.5rem; line-height: 1.7; }
.modal ul { margin: 0.2rem 0 0.6rem 1.2rem; font-size: 0.88rem; line-height: 1.65; color: var(--zeo-fg); }
.modal strong { color: var(--zw-body); }
.modal em { color: var(--zeo-accent); font-style: normal; font-weight: 600; }

.zw-footer {
  text-align: center;
  color: var(--zeo-muted);
  font-size: 0.82rem;
  margin-top: 2.5rem;
  line-height: 1.7;
}

/* 인쇄 */
@media print {
  body { background: #fff; color: #111; }
  .zeo-toggle, .zw-action, .zw-options, .markdown-actions, .zw-btn-info, .modal-overlay, .copy-toast { display: none !important; }
  .container { max-width: 100%; padding: 0; }
  .zw-info-card, .zw-chart-section { background: #fff; border-color: #ccc; }
  .palace { background: #fff; border-color: #999; color: #111; }
  .ziwei-board { background: #fff; }
}

/* 모바일 ≤600px */
@media (max-width: 600px) {
  .container { padding: 1.2rem 0.8rem 2rem; }
  .zw-header h1 { font-size: 1.4rem; }
  .zw-input-row { flex-direction: column; align-items: stretch; }
  .zw-input-group { width: 100%; }
  .zw-ymd input, .zw-hm input { width: 100%; }
  .zw-info-grid { grid-template-columns: repeat(2, 1fr); }
  .markdown { font-size: 0.78rem; }
}