/* src/public/css/regex-tester.css … 正規表現（RegEx）インタラクティブ・テスター
   ダークモードは theme-dark.css の末尾（=== 正規表現テスター ===）にあります */

.rx-box { background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; padding: 18px; margin-top: 18px; }
.rx-box [hidden] { display: none; }
.rx-h2 { font-size: 1.05rem; color: #2a5298; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.rx-label { display: block; font-weight: bold; color: #2a5298; margin: 0 0 6px; font-size: 0.95rem; }
.rx-hint { font-size: 0.85rem; color: #64748b; margin: 6px 0 0; line-height: 1.6; }
.rx-mono,
.rx-pattern,
.rx-text,
.rx-highlight,
.rx-literal,
.rx-table td { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; }

.rx-pattern-row { display: flex; align-items: center; gap: 4px; border: 2px solid #cbd5e1; border-radius: 8px; padding: 0 10px; background: #fff; }
.rx-pattern-row:focus-within { border-color: #3498db; }
.rx-slash { color: #94a3b8; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 1.2rem; white-space: nowrap; }
#rx-flags-view { color: #2a5298; }
.rx-pattern { flex: 1; min-width: 0; border: none; outline: none; padding: 10px 2px; font-size: 1.1rem; background: transparent; color: inherit; }
.rx-replace { border: 2px solid #cbd5e1; border-radius: 8px; padding: 10px 12px; width: 100%; box-sizing: border-box; margin-top: 8px; font-size: 1rem; }

.rx-flags { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 0.85rem; color: #334155; }
.rx-flag { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.rx-flag code { font-weight: bold; color: #2a5298; }
.rx-error { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 0.9rem; overflow-wrap: anywhere; }
.rx-literal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.rx-literal { background: #f1f5f9; padding: 4px 8px; border-radius: 6px; font-size: 0.85rem; overflow-wrap: anywhere; max-width: 100%; }
.rx-mini { padding: 5px 10px; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 0.8rem; font-weight: bold; color: #475569; cursor: pointer; }
.rx-mini:hover { background: #e2e8f0; }
.rx-copy-status { font-size: 0.8rem; color: #16a34a; }

.rx-text { width: 100%; box-sizing: border-box; padding: 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 0.95rem; line-height: 1.6; resize: vertical; }
.rx-text:focus { outline: none; border-color: #3498db; }
.rx-summary { margin: 12px 0 8px; font-weight: bold; color: #1e3a8a; }
.rx-highlight {
    margin: 0;
    padding: 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.95rem;
    line-height: 1.7;
    max-height: 420px;
    overflow: auto;
    min-height: 3em;
}
.rx-mark { border-radius: 3px; padding: 1px 0; color: inherit; }
.rx-mark-0 { background: #fde68a; }
.rx-mark-1 { background: #a5f3fc; }
.rx-mark-empty { display: inline-block; width: 2px; height: 1.1em; vertical-align: text-bottom; background: #f97316; padding: 0; }

.rx-table-wrap { overflow-x: auto; }
.rx-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.rx-table th, .rx-table td { padding: 6px 8px; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
.rx-table th { background: #f8fafc; color: #475569; white-space: nowrap; }
.rx-table td { white-space: pre-wrap; overflow-wrap: anywhere; }
.rx-null { color: #94a3b8; font-style: italic; }
.rx-cheat td:first-child { white-space: nowrap; width: 9em; }
.rx-cheat code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; }
.rx-check { display: inline-flex; align-items: center; gap: 6px; font-weight: bold; color: #2a5298; cursor: pointer; }

.rx-samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.rx-sample { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px; cursor: pointer; text-align: left; color: #334155; min-width: 0; }
.rx-sample:hover { background: #e2e8f0; }
.rx-sample span { font-weight: bold; font-size: 0.9rem; }
.rx-sample code { font-size: 0.75rem; color: #475569; overflow-wrap: anywhere; max-width: 100%; }

@media (max-width: 600px) {
    .rx-flag span { display: none; }
    .rx-flags { gap: 6px 12px; }
}