/**
 * Suanming 紫微斗数星盘图样式 · 墨印风
 * （PC/mobile 共享，经 /template/plugins/suanming/skin/css/ziwei.css 引入）
 *
 * 视觉规范：纸色底、墨色字、赭红宫名、金线宫格；传统排盘的内部分区：
 *   宫头 = 干支(左) · 宫名(中，◆身宫/来因) · 大限(右)
 *   宫身 = 主星(墨黑/庙旺着色) → 辅星(吉星青绿/煞星赭红) → 杂耀小字
 *   宫底 = 长生·博士十二神(左) · 小限虚岁(右)
 * 布局：4×4 CSS Grid，十二宫环抱中宫（palaces[0]=寅宫，位于底行左一，顺时针排布）
 */

.zw-chart {
    max-width: 760px;
    margin: 0 auto;
    --zw-paper: #fbf7ee;
    --zw-ink: #2b241c;
    --zw-red: #9e2b25;
    --zw-gold: #8c6d3f;
    --zw-line: #d8c9a8;
    --zw-muted: #97897a;
    --zw-auspicious: #2e6b4f;
    --zw-inauspicious: #b03a2e;
}

/* ---------- 图层工具条（对宫线 / 飞星 / 设置）与 SVG 叠加层 ---------- */
.zw-tools {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    position: relative;
}
.zw-tool-btn {
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    color: #6e5b3e;
    background: var(--zw-paper);
    border: 1px solid var(--zw-line);
    border-radius: 10px;
    padding: 2px 10px;
    cursor: pointer;
}
.zw-tool-btn:hover { color: var(--zw-red); border-color: var(--zw-gold); }
.zw-tool-btn.on { color: #fff; background: var(--zw-red); border-color: var(--zw-red); }
.zw-tool-gear { padding: 2px 8px; }
.zw-layer-pop {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 10;
    background: var(--zw-paper);
    border: 1px solid var(--zw-gold);
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(60, 40, 10, .15);
    padding: 8px 10px;
    display: grid;
    gap: 4px;
    min-width: 110px;
}
.zw-layer-pop[hidden] { display: none; }
.zw-layer-pop label {
    font-size: 12px;
    color: #5b5246;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.zw-layer-pop input { accent-color: var(--zw-red); }

.zw-stage { position: relative; }
.zw-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}
/* 对宫线：浅灰细虚线；飞星线：四化色 + 箭头（vector-effect 保证粗细不随缩放变化） */
.zw-opp-layer line { stroke: #b9ad99; stroke-width: 1; stroke-dasharray: 5 4; opacity: .4; }
/* 三方四正线：金点线，跟随聚焦宫画三合三角（与对宫虚线、飞星实线三者线型可辨） */
.zw-tri-layer line { stroke: var(--zw-gold); stroke-width: 1.1; stroke-dasharray: 2 3; opacity: .55; }
.zw-fly-layer line { stroke-width: 1.6; opacity: .65; }
.zw-fly-layer line.lu { stroke: var(--zw-auspicious); }
.zw-fly-layer line.quan { stroke: var(--zw-inauspicious); }
.zw-fly-layer line.ke { stroke: #2f5f8a; }
.zw-fly-layer line.ji { stroke: #6b4a2f; }

.zw-flying-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--zw-muted);
}
.zw-flying-legend[hidden] { display: none; }
.zw-fl-item { white-space: nowrap; color: #5b5246; }
.zw-fl-tip-desktop { color: var(--zw-muted); }
.zw-fl-tip-mobile { display: none; color: var(--zw-muted); }
.zw-self-tag {
    font-style: normal;
    color: var(--zw-red);
    border: 1px solid var(--zw-red);
    border-radius: 2px;
    padding: 0 3px;
    font-size: 10px;
    margin-left: 6px;
    white-space: nowrap;
}

.zw-grid {
    display: grid;
    /* minmax(0,1fr) 防止宫头/宫脚 nowrap 文本的 min-content 撑破容器（移动端溢出 bug） */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 1px;
    padding: 2px;
    background: var(--zw-line);
    border: 3px double var(--zw-gold);
    aspect-ratio: 1 / 1;
    font-family: "SimSun", "Songti SC", "STSong", "Noto Serif SC", serif;
    color: var(--zw-ink);
}

/* 宫位 → 网格坐标（顶行巳午未申，右列酉戌，底行亥子丑寅，左列卯辰） */
.zw-grid .r1c1 { grid-row: 1; grid-column: 1; }
.zw-grid .r1c2 { grid-row: 1; grid-column: 2; }
.zw-grid .r1c3 { grid-row: 1; grid-column: 3; }
.zw-grid .r1c4 { grid-row: 1; grid-column: 4; }
.zw-grid .r2c1 { grid-row: 2; grid-column: 1; }
.zw-grid .r2c4 { grid-row: 2; grid-column: 4; }
.zw-grid .r3c1 { grid-row: 3; grid-column: 1; }
.zw-grid .r3c4 { grid-row: 3; grid-column: 4; }
.zw-grid .r4c1 { grid-row: 4; grid-column: 1; }
.zw-grid .r4c2 { grid-row: 4; grid-column: 2; }
.zw-grid .r4c3 { grid-row: 4; grid-column: 3; }
.zw-grid .r4c4 { grid-row: 4; grid-column: 4; }

/* ---------- 宫位 ---------- */

.zw-palace {
    background: var(--zw-paper);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    cursor: pointer;
}

.zw-palace-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    padding: 3px 5px;
    background: #f7f0e2;
    border-bottom: 1px solid var(--zw-line);
    line-height: 1.2;
    white-space: nowrap;
}

.zw-palace-gz { color: #6e5b3e; font-size: 12px; }
.zw-palace-name {
    flex: 1;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: var(--zw-red);
    letter-spacing: 1px;
}
.zw-body-mark { color: var(--zw-red); font-size: 10px; margin-left: 2px; font-weight: 400; }
.zw-yin-mark {
    display: inline-block;
    font-size: 9px;
    font-weight: 400;
    color: var(--zw-gold);
    border: 1px solid var(--zw-gold);
    border-radius: 2px;
    padding: 0 2px;
    margin-left: 3px;
    vertical-align: 1px;
    line-height: 1.3;
}
.zw-decadal { color: var(--zw-gold); font-size: 11px; }

/* 星曜区 */
.zw-stars { flex: 1; padding: 6px 8px; line-height: 1.75; overflow: hidden; }

/* 主星块 / 辅星块之间的渐变分隔线 */
.zw-divider {
    height: 1px;
    margin: 3px 0;
    background: linear-gradient(to right, transparent, var(--zw-line) 20%, var(--zw-line) 80%, transparent);
}

.zw-star.major { font-weight: 700; color: var(--zw-ink); font-size: 15px; }
.zw-star.minor { color: #4a4238; font-size: 12.5px; }
.zw-star.auspicious { color: var(--zw-auspicious); }
.zw-star.inauspicious { color: var(--zw-inauspicious); }

/* 亮度：庙旺金褐、得利中性、平不陷赭红 */
.zw-br { font-style: normal; font-size: 10px; margin-left: 2px; color: #6e5b3e; }
.zw-star.major .zw-br { color: #8a6d3b; }
.zw-br.flat { color: var(--zw-inauspicious); }

/* 四化：禄绿 / 权红 / 科蓝 / 忌褐（小方印样式；.hollow 为流年四化空心印） */
.zw-mu {
    display: inline-block;
    font-style: normal;
    font-size: 10px;
    line-height: 1.2;
    margin-left: 2px;
    padding: 0 2px;
    border-radius: 2px;
    color: #fff;
    vertical-align: 1px;
}
.zw-mu.lu { background: var(--zw-auspicious); }
.zw-mu.quan { background: var(--zw-inauspicious); }
.zw-mu.ke { background: #2f5f8a; }
.zw-mu.ji { background: #6b4a2f; }
.zw-mu.hollow { background: transparent; }
.zw-mu.hollow.lu { color: var(--zw-auspicious); border: 1px solid var(--zw-auspicious); }
.zw-mu.hollow.quan { color: var(--zw-inauspicious); border: 1px solid var(--zw-inauspicious); }
.zw-mu.hollow.ke { color: #2f5f8a; border: 1px solid #2f5f8a; }
.zw-mu.hollow.ji { color: #6b4a2f; border: 1px solid #6b4a2f; }

/* 运限印章：限=当前大限宫、年=流年命宫 */
.zw-luck-mark {
    display: inline-block;
    font-size: 9px;
    font-weight: 400;
    color: var(--zw-red);
    border: 1px solid var(--zw-red);
    border-radius: 2px;
    padding: 0 2px;
    margin-left: 3px;
    line-height: 1.3;
    vertical-align: 1px;
}
.zw-luck-year { color: #2f5f8a; border-color: #2f5f8a; }

/* 运限宫位标记（描边打印也可辨） */
.zw-palace.current-decadal { outline: 2px solid var(--zw-gold); outline-offset: -2px; }
.zw-palace.current-yearly .zw-palace-head { background: #f7e3e0; }

/* 交互：悬停高亮三方四正；点击聚焦 + 脉冲 */
.zw-palace.zw-focus { outline: 2px solid var(--zw-red); outline-offset: -2px; }
/* 三方四正联动高亮：较原 #f8f1e0 加深约 5%，仍保持低饱和不抢主星 */
.zw-palace.zw-relate { background: #f5eeda; }
.zw-palace.zw-pulse { outline: 2px dashed var(--zw-red); outline-offset: -2px; }

/* 空宫借对宫 */
.zw-borrow { font-size: 11px; color: #7a6a52; margin-top: 2px; }
.zw-borrow-tag {
    display: inline-block;
    font-size: 9px;
    color: var(--zw-gold);
    border: 1px solid var(--zw-gold);
    border-radius: 2px;
    padding: 0 2px;
    margin-right: 3px;
    line-height: 1.3;
    vertical-align: 1px;
}

/* 杂耀小字（桌面完整显示；移动端折叠为 +N） */
.zw-adjline { font-size: 10px; color: #8a7c6a; line-height: 1.5; margin-top: 2px; }
.zw-more { display: none; color: var(--zw-muted); font-size: 10px; }

/* 宫底：长生·博士 / 小限 */
.zw-palace-foot {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    padding: 2px 5px;
    border-top: 1px dashed var(--zw-line);
    font-size: 10px;
    color: var(--zw-muted);
    white-space: nowrap;
    overflow: hidden;
}
.zw-ages { overflow: hidden; text-overflow: ellipsis; }

/* 中宫 */
.zw-center {
    grid-row: 2 / 4;
    grid-column: 2 / 4;
    background: var(--zw-paper);
    border: 1px solid var(--zw-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px;
    text-align: center;
    overflow: hidden;
    /* 关键：grid 项 min-width:auto 会被长行内容撑宽、压到相邻宫位 */
    min-width: 0;
}
.zw-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--zw-red);
    letter-spacing: 6px;
    text-indent: 6px;
}
.zw-pillars {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #3a2f24;
}
.zw-center-row { font-size: 13px; color: #5b5246; }
.zw-center-row span { margin-right: 6px; color: var(--zw-muted); }
.zw-center-row b { color: var(--zw-ink); font-weight: 600; }
.zw-gap { margin-left: 14px; }
.zw-mutagen-row { line-height: 2; }
.zw-mutagen-row .zw-mu { margin-right: 2px; }
.zw-luck-row b { letter-spacing: 1px; }
.zw-legend { font-size: 10px; color: var(--zw-muted); margin-top: 2px; line-height: 1.7; }

/* ---------- 大限一览：12 步横排大限条（桌面 12 列，窄屏 3×4） ---------- */
.zw-decadal-wrap { margin-top: 10px; }
.zw-decadal-title {
    font-size: 12px;
    color: #6e5b3e;
    letter-spacing: 2px;
    padding: 2px 2px 6px;
}
.zw-decadal-strip {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1px;
    background: var(--zw-line);
    border: 1px solid var(--zw-line);
}
.zw-decadal-cell {
    background: var(--zw-paper);
    padding: 6px 3px 7px;
    text-align: center;
    cursor: pointer;
    min-width: 0;
}
.zw-decadal-cell:hover { background: #f8f1e0; }
.zw-decadal-cell.current { background: #f6ecdc; outline: 2px solid var(--zw-gold); outline-offset: -2px; }
.zw-dc-head {
    font-size: 12px;
    font-weight: 700;
    color: var(--zw-ink);
    letter-spacing: 1px;
    line-height: 1.3;
    white-space: nowrap;
}
.zw-dc-head .zw-cur-tag { margin-left: 2px; }
.zw-dc-ages { font-size: 10px; color: var(--zw-muted); line-height: 1.4; }
.zw-dc-palace {
    font-size: 10px;
    color: var(--zw-red);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zw-dc-mu { margin-top: 3px; display: grid; grid-template-columns: 1fr; }
.zw-dc-mu-item { font-size: 10px; color: #4a4238; line-height: 1.55; white-space: nowrap; }
.zw-dc-mu-item .zw-mu { margin-left: 0; margin-right: 1px; }
.zw-cur-tag {
    display: inline-block;
    font-style: normal;
    font-size: 9px;
    color: var(--zw-red);
    border: 1px solid var(--zw-red);
    border-radius: 2px;
    padding: 0 2px;
    line-height: 1.3;
}

/* ---------- 宫位详情面板（星盘下方，移动端友好） ---------- */
.zw-detail {
    margin-top: 10px;
    border: 1px solid var(--zw-line);
    background: var(--zw-paper);
    font-size: 13px;
    color: #4a4238;
}
.zw-detail[hidden] { display: none; }
.zw-detail-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f7f0e2;
    border-bottom: 1px solid var(--zw-line);
}
.zw-detail-head b { color: var(--zw-red); font-size: 15px; letter-spacing: 1px; }
.zw-detail-gz { color: #6e5b3e; font-size: 12px; }
.zw-detail-tag {
    font-style: normal;
    font-size: 10px;
    color: var(--zw-gold);
    border: 1px solid var(--zw-gold);
    border-radius: 2px;
    padding: 0 3px;
    line-height: 1.4;
}
.zw-detail-close {
    margin-left: auto;
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    color: var(--zw-muted);
    cursor: pointer;
    padding: 2px 6px;
}
.zw-detail-close:hover { color: var(--zw-red); }
.zw-detail-body { padding: 8px 10px; }
.zw-detail-sec { display: flex; gap: 8px; line-height: 1.9; }
.zw-detail-label {
    flex: 0 0 60px;
    color: var(--zw-muted);
    font-size: 12px;
    padding-top: 3px;
    white-space: nowrap;
}
.zw-detail-adj { color: #7a6a52; font-size: 12px; }
.zw-detail-foot {
    padding: 4px 10px 6px;
    border-top: 1px dashed var(--zw-line);
    font-size: 11px;
    color: var(--zw-muted);
}

/* ---------- 移动端（仅屏幕；A4 打印宽度会误触发窄屏断点） ---------- */
@media screen and (max-width: 767px) {
    .zw-chart { max-width: 100%; }
    .zw-palace-head { padding: 2px 3px; background: #f7f0e2; }
    .zw-palace-gz { font-size: 9px; }
    .zw-palace-name { font-size: 11px; letter-spacing: 0; }
    .zw-yin-mark { font-size: 8px; margin-left: 2px; }
    .zw-decadal { font-size: 9px; }
    .zw-stars { padding: 2px 3px; line-height: 1.4; }
    .zw-star.major { font-size: 11px; }
    .zw-star.minor { font-size: 10px; }
    .zw-br, .zw-mu { font-size: 9px; }
    .zw-borrow { font-size: 9px; }
    .zw-adjline { display: none; }
    .zw-more { display: inline; }
    .zw-palace-foot { padding: 1px 3px; font-size: 9px; }
    .zw-ages { display: none; }
    .zw-luck-mark { font-size: 8px; padding: 0 1px; margin-left: 2px; }
    .zw-center { padding: 4px; gap: 3px; justify-content: flex-start; }
    .zw-title { font-size: 13px; letter-spacing: 2px; text-indent: 2px; }
    .zw-pillars { font-size: 12px; letter-spacing: 1px; }
    .zw-center-row { font-size: 10px; line-height: 1.7; }
    .zw-mutagen-row { line-height: 1.8; }
    .zw-legend { display: none; }
    /* 工具条与图例：窄屏收紧；提示改为点击口径 */
    .zw-tools { gap: 4px; margin-bottom: 4px; }
    .zw-tool-btn { font-size: 11px; padding: 2px 8px; }
    .zw-fl-tip-desktop { display: none; }
    .zw-fl-tip-mobile { display: inline; }
    /* 大限条：窄屏 3×4 网格，四化 2×2 排布 */
    .zw-decadal-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .zw-decadal-cell { padding: 7px 4px 8px; }
    .zw-dc-mu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zw-detail { font-size: 12px; }
    .zw-detail-label { flex-basis: 54px; font-size: 11px; }
}

/* ---------- 打印 / 导出 PDF ---------- */
@media print {
    /* 强制按屏幕样式输出颜色与背景（浏览器默认不打印背景，星盘会变黑白） */
    .zw-chart, .zw-chart * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .zw-chart { max-width: 165mm; margin: 0 auto 6mm; }
    .zw-grid { page-break-inside: avoid; border-color: #7a5c31; }
    .zw-palace { background: #fffdf6; }
    /* 宫头带与分隔线加深：不同打印驱动（系统 PDF/缩放下）也能清晰输出 */
    .zw-palace-head { background: #f1e5cb !important; border-bottom: 1px solid #c2a97c !important; }
    .zw-palace-foot { border-top: 1px dashed #c2a97c !important; }
    /* 导出时隐藏交互详情面板，运限/高亮走描边（打印可辨） */
    .zw-detail { display: none !important; }
    /* 图层：打印保留对宫线，隐藏工具条/图例/弹层/三方线与飞星层 */
    .zw-tools, .zw-flying-legend, .zw-layer-pop { display: none !important; }
    .zw-fly-layer { display: none !important; }
    .zw-tri-layer { display: none !important; }
    .zw-decadal-wrap { page-break-inside: avoid; }
    .zw-decadal-strip { border-color: #b9a882; }
}