.zir-tools{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}.zir-tools button{border:1px solid #dce6dc;border-radius:6px;padding:7px 10px;color:#52725a;background:#fff;font-size:11px}.zir-tools button:hover{background:#eef5ed}.zir-evidence{font-size:11px;color:#7e9884;line-height:1.8;margin:13px 0 0;padding:10px 12px;background:#f5f8f3;border-radius:8px}.zir-download.zir-individual-btn{width:100%;border:0;text-align:left;font-family:inherit;cursor:pointer}.zir-download.zir-original-btn{margin-top:10px;background:#f2f5ef;color:#355645;border:1px solid #dce7da}.zir-download.zir-original-btn:hover{background:#e5eee5}.zir-download.zir-source-bundle-btn{width:100%;margin-top:10px;background:#f0e7d8;color:#60472d;border:1px solid #e7d8bb}.zir-source-bundle-btn:hover{background:#e9dec9}.zir-derive-notice{font-size:10px;color:#8d9a8e;line-height:1.8;margin:10px 0 0}@media(max-width:700px){.zir-preview-footer{flex-direction:column;align-items:stretch}.zir-tools{justify-content:flex-start}}

.zir-preview-holder{position:relative}
.zir-orientation{position:absolute;inset:0;pointer-events:none;font-family:"Noto Sans KR",sans-serif;z-index:2}
.zir-orientation[hidden]{display:none!important}
.zir-direction{position:absolute;display:block;border:1px solid #d9e4dc;background:rgba(250,253,249,.94);padding:6px 10px;border-radius:999px;color:#587c63;font-size:11px;font-weight:700;white-space:nowrap;box-shadow:0 2px 8px rgba(16,49,25,.04)}
.zir-dir-south{top:9px;left:50%;transform:translateX(-50%);color:#a36b51}
.zir-dir-north{bottom:9px;left:50%;transform:translateX(-50%);color:#336b7a;border-color:#d5e4e7}
.zir-dir-east{left:9px;top:50%;transform:translateY(-50%)}
.zir-dir-west{right:9px;top:50%;transform:translateY(-50%)}
.zir-compass-note{font-size:12px;line-height:1.8;color:#72917d;text-align:center;margin:12px auto 0;font-weight:600;max-width:350px}
@media(max-width:600px){.zir-direction{font-size:9px;padding:5px 7px}.zir-dir-east{left:4px}.zir-dir-west{right:4px}}

/* 五音 / 五行: only the live 17-consonant atlas is recolored; source-ZIR view stays intact. */
.zir-five-colors{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-2px 0 17px;}
.zir-five-colors[hidden]{display:none!important;}
.zir-five-colors>span{display:flex;align-items:center;gap:6px;white-space:nowrap;background:#fff;border:1px solid #e5ebe5;border-radius:999px;padding:8px 11px;color:#67756d;font-size:11px;font-weight:600}
.zir-five-colors i{height:12px;width:12px;flex:none;background:var(--zir-tone);border:1px solid rgba(0,0,0,.11);border-radius:50%}
.zir-glyph[data-element] .zir-letter{color:var(--zir-tone)}
.zir-glyph[data-element].selected{border-color:var(--zir-tone);box-shadow:inset 0 0 0 1px var(--zir-tone);background:color-mix(in srgb,var(--zir-tone) 9%,#fff)}
.zir-glyph[data-element]:hover{border-color:var(--zir-tone)}