/* src/public/css/svg-viewer.css … SVG パス ビューア ＆ 簡易エディター
   ダークモードは theme-dark.css の末尾（=== SVGビューア ===）にあります */

.svg-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; }
.svg-box { background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; padding: 18px; min-width: 0; }
.svg-box [hidden] { display: none; }
.svg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.svg-label { font-weight: bold; color: #2a5298; }
.svg-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.8rem; color: #64748b; }
.svg-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
}
.svg-input:focus { outline: none; border-color: #3498db; }
.svg-error { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 0.9rem; }
.svg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.svg-btn { padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; color: #334155; font-weight: bold; font-size: 0.85rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.svg-btn:hover { background: #e2e8f0; }
.svg-mini { padding: 4px 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: #f8fafc; color: #475569; font-size: 0.8rem; font-weight: bold; cursor: pointer; }
.svg-mini.is-active { background: #2a5298; border-color: #2a5298; color: #fff; }
.svg-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #334155; }
.svg-inline select, .svg-inline input[type="number"] { padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 6px; width: 4.5em; }
.svg-inline input[type="color"] { width: 36px; height: 28px; padding: 0; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; }
.svg-status { min-height: 1.2em; font-size: 0.85rem; color: #16a34a; margin: 8px 0 0; }
.svg-status.is-error { color: #b91c1c; }
.svg-hint { font-size: 0.8rem; color: #64748b; margin: 8px 0 0; overflow-wrap: anywhere; }

.svg-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    max-height: 420px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    overflow: auto;
}
.svg-stage[data-bg-mode="checker"] {
    background-color: #fff;
    background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%), linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e5e7eb 75%), linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.svg-stage[data-bg-mode="white"] { background: #fff; }
.svg-stage[data-bg-mode="dark"] { background: #111827; }
.svg-stage img { width: 80%; height: auto; max-height: 100%; object-fit: contain; }
.svg-zoom { margin-top: 10px; }
.svg-path-tools { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e2e8f0; }
.svg-measure { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }

@media (max-width: 760px) {
    .svg-layout { grid-template-columns: minmax(0, 1fr); }
}