/*
 * file name : tag_cleaner.css
 * 作成: 2026-05-04
 * 更新: 2026-08-05 v2.2.2 clean rebuild - remove duplication & JS contamination
 * 対象: tag_cleaner.html
 */
:root {
    --c-primary:#007bff; --c-primary-dark:#0056b3; --c-primary-deep:#003087;
    --c-bg:#e0f7fa; --c-border:#ddd; --c-text:#333; --c-text-muted:#555; --c-text-dim:#666; --c-heading:#222;
    --c-input-bg:#f7fcff; --c-input-border:#b2ebf2;
    --c-result-bg:#fff3e0; --c-result-border:#ffe0b2;
    --c-nega-bg:#f1f8e9; --c-nega-border:#dbedc8;
    --c-log-bg:#f3e5f5; --c-log-border:#e1bee7;
    --c-btn-main:#007bff; --c-btn-copy:#43a047; --c-btn-dl:#7b1fa2; --c-btn-danger:#c62828; --c-btn-sub:#757575;
    --c-warn-bg:#ffebee; --c-warn-border:#ffcdd2; --c-warn-text:#c62828; --c-error:#d32f2f;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body {
    max-width: 900px !important;
    margin: 20px auto !important;
    text-align: left; /* テキスト自体は左寄せを維持 */
    padding: 0 12px 40px;
}
header{margin-top:16px;margin-bottom:.8em;padding:.5em 0.8em;background:#fff;border-bottom:2px solid var(--c-primary);border-radius:4px}
h1{font-size:1.4em;margin-bottom:.25em;color:var(--c-heading)}
nav[aria-label="関連リンク"]{font-size:.88em;color:var(--c-text-muted)}
nav[aria-label="関連リンク"] a{color:var(--c-primary-dark);text-decoration:none;padding:0.2em}
nav[aria-label="関連リンク"] a:hover{color:var(--c-primary-deep);text-decoration:underline}
h2{font-size:1.1em;margin:1.2em 0.4em;color:var(--c-text);border-left:3px solid var(--c-primary);padding-left:.5em}
h3{font-size:.95em;margin:.8em 0.3em;color:var(--c-text-muted)}
.input-output-wrapper{display:flex;flex-wrap:wrap;gap:20px;margin:12px 0}
.input-output-wrapper>section{flex:1;min-width:280px}
section[aria-labelledby="input-section"]{background:var(--c-input-bg);border:1px solid var(--c-input-border);padding:16px;border-radius:8px}
#result-section,.dep-section{background:var(--c-result-bg);border:1px solid var(--c-result-border);padding:16px;border-radius:8px}
.result-actions{text-align:right;margin-top:4px}
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.controls label{font-size:.88em;color:var(--c-text-muted);white-space:nowrap}
.log-controls{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
label{display:block;font-size:.88em;color:var(--c-text-muted);margin-bottom:4px}
textarea{width:100%;padding:.5em;border:1px solid #ccc;border-radius:4px;background:#fff;color:var(--c-text);font-family:'Consolas','Monaco',monospace;font-size:.9em;resize:vertical}
textarea:focus{outline:2px solid var(--c-primary);border-color:var(--c-primary)}
textarea[readonly]{background:#f8f8f8;cursor:default}
select{padding:.3em.5em;border:1px solid #ccc;border-radius:4px;font-size:.88em;background:#fff;color:var(--c-text)}
.error{color:var(--c-error);font-size:.85em;min-height:1.4em;width:100%}
.action-btn{display:inline-block;padding:.4em.9em;border:none;border-radius:4px;font-size:.88em;font-family:inherit;cursor:pointer;color:#fff;background-color:var(--c-btn-main);margin-top:6px;transition:filter.18s ease,transform.1s ease}
.action-btn:hover:not(:disabled){filter:brightness(.88);transform:translateY(-1px)}
.action-btn:focus{outline:2px solid var(--c-primary-deep);outline-offset:2px}
.action-btn:disabled{background:#bdbdbd;cursor:not-allowed;transform:none;filter:none}
.action-btn.btn-copy,button[data-target]{background-color:var(--c-btn-copy)}
.btn-sub{background-color:var(--c-btn-sub);font-size:.82em;padding:.3em.7em}
.copy-wide{width:100%;margin-top:8px;text-align:center}
#warning-area,.warning{background:var(--c-warn-bg);border:1px solid var(--c-warn-border);color:var(--c-warn-text);padding:12px 16px;border-radius:6px;margin-bottom:16px;font-size:.88em}
#warning-area a,.warning a{color:#e65100}
.loading{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.72);color:#fff;padding:.8em 1.8em;border-radius:6px;font-size:1em;z-index:1000}
#id-search-container{padding:8px;background:#fff3cd;border:1px solid #ffeeba;border-radius:4px;margin-top:10px}
#id-search-container a{display:inline-block;padding:3px 8px;margin:2px;background:#fff;border:1px solid #dee2e6;text-decoration:none;border-radius:3px;font-size:.8em;color:#007bff;transition:background-color.15s ease}
#id-search-container a:hover{background:#e2e6ea;color:#0056b3}
#kv-status{padding:6px 10px;background:#fff3cd;border:1px solid #ffeeba;border-radius:4px;margin-top:8px;font-size:.85em}
section[aria-labelledby="nega-section"]{background:var(--c-nega-bg);border:1px solid var(--c-nega-border);padding:16px;border-radius:8px;margin-top:20px}
.negative-prompt-wrapper{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px}
.negative-prompt-item{flex:1;min-width:240px;display:flex;flex-direction:column}
.negative-prompt-item textarea{flex-grow:1;margin-bottom:6px}
.negative-prompt-item.action-btn{align-self:flex-end;margin-top:0}
.neg-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
@media(max-width:767px){.neg-grid{grid-template-columns:1fr!important}}
section[aria-labelledby="log-section"]{background:var(--c-log-bg);border:1px solid var(--c-log-border);padding:16px;border-radius:8px;margin-top:20px}
.log-list{margin-top:.5em;max-height:320px;overflow-y:auto;border:1px solid var(--c-border);border-radius:4px;padding:.5em;background:#fff;font-size:.85em}
.log-item{padding:.4em.5em;border-bottom:1px solid #eee;color:#444;word-break:break-all;margin-bottom:.8em}
.log-item:last-child{border-bottom:none}
.log-item p{margin:0 0.4em 0;word-break:break-all}
.log-meta{font-size:.8em;color:#888}
.log-text{white-space:pre-wrap;font-size:.85em}
.zip-suggestion{font-size:.88em;color:var(--c-text-muted);margin-bottom:6px}
.log-list::-webkit-scrollbar{width:5px}
.log-list::-webkit-scrollbar-track{background:#f0f0f0}
.log-list::-webkit-scrollbar-thumb{background:var(--c-primary);border-radius:3px}
footer{margin-top:2em;text-align:center;font-size:.88em;color:var(--c-text-dim)}
footer a{color:var(--c-primary);text-decoration:none}
footer a:hover{text-decoration:underline}
.hidden{display:none!important}
@media(max-width:600px){
 body {
    max-width: 900px !important;
    margin: 20px auto !important;
    text-align: left; /* テキスト自体は左寄せを維持 */
    padding: 0 12px 40px;
} h1{font-size:1.2em} h2{font-size:1em}
.input-output-wrapper{flex-direction:column;gap:10px}
.input-output-wrapper>section{min-width:auto;width:100%}
.negative-prompt-wrapper{flex-direction:column}
.action-btn{font-size:.85em;padding:.35em.8em}
}