/* /tools/ 共通スタイル（base.css の変数を利用） */
[hidden] { display: none !important; }
.tool-wrap { max-width: 1040px; margin: 0 auto; padding: 0 1.25rem 3rem; }
.tool-wrap.narrow { max-width: 820px; }
.tool-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; }
.tool-card h2 { font-size: 1.05rem; margin: 0 0 .9rem; }
.tool-card h3 { font-size: .95rem; margin: 1.1rem 0 .5rem; }
.tool-note { font-size: .82rem; color: var(--muted); line-height: 1.75; margin: .4rem 0 0; }
.tool-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.tool-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.tool-field.grow { flex: 1 1 220px; }
.tool-field > label, .tool-label { font-size: .78rem; font-weight: 700; color: var(--muted); }
.t-input, .t-select, .t-textarea {
  width: 100%; box-sizing: border-box; padding: .55rem .7rem; font: inherit; font-size: .9rem; color: var(--text);
  background: var(--surface2, rgba(255,255,255,.04)); border: 1px solid var(--border-strong); border-radius: 8px;
}
.t-input:focus, .t-select:focus, .t-textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.t-textarea { font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: .8rem; line-height: 1.6; min-height: 160px; resize: vertical; }
.t-select option, .t-select optgroup { background: #181a23; color: #eef0fa; }
.t-btn { padding: .55rem 1.1rem; font: inherit; font-size: .85rem; font-weight: 700; border-radius: 8px; cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface2, rgba(255,255,255,.06)); color: var(--text); text-decoration: none; display: inline-block; }
.t-btn:hover { border-color: var(--accent); }
.t-btn.primary { background: var(--accent); color: #06130b; border-color: transparent; }
.t-btn.primary:hover { opacity: .88; }
.t-btn.small { padding: .3rem .65rem; font-size: .75rem; }
.t-btn:disabled { opacity: .45; cursor: not-allowed; }
.t-badge { display: inline-block; font-size: .68rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; background: var(--accent-dim); color: var(--accent); border: 1px solid var(--border-strong); vertical-align: middle; }
.t-badge.warn { background: rgba(240,178,50,.14); color: #f0b232; border-color: rgba(240,178,50,.4); }
.t-badge.bad { background: rgba(237,66,69,.14); color: #ff7b7d; border-color: rgba(237,66,69,.4); }
.t-badge.info { background: rgba(88,101,242,.16); color: #9aa3ff; border-color: rgba(88,101,242,.4); }
.t-out { position: relative; }
.t-out pre { margin: 0; padding: 1rem; background: #0a0b10; color: #d6e4ff; border-radius: 8px; border: 1px solid var(--border); overflow: auto; max-height: 460px; font-family: 'Share Tech Mono', ui-monospace, monospace; font-size: .8rem; line-height: 1.6; white-space: pre; }
.t-out-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.t-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.t-tab { padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700; }
.t-tab.on { background: var(--accent); color: #06130b; border-color: transparent; }
.t-check { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; cursor: pointer; }
.t-check input { accent-color: var(--accent); width: 1rem; height: 1rem; }
.t-switch { position: relative; width: 44px; height: 24px; flex: none; }
.t-switch input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; z-index: 1; }
.t-switch span { position: absolute; inset: 0; background: #3a3d4d; border-radius: 999px; transition: background .15s; }
.t-switch span::after { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; }
.t-switch input:checked + span { background: var(--accent); }
.t-switch input:checked + span::after { transform: translateX(20px); }
.t-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.t-error { color: #ff7b7d; font-size: .78rem; margin-top: .25rem; }
.t-hint { color: var(--muted); font-size: .76rem; }
.t-mono { font-family: 'Share Tech Mono', ui-monospace, monospace; }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.tools-card { display: block; padding: 1.3rem; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s; }
.tools-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.tools-card .ic { font-size: 1.7rem; margin-bottom: .5rem; }
.tools-card h3 { font-size: 1rem; margin: 0 0 .4rem; }
.tools-card p { font-size: .82rem; color: var(--muted); line-height: 1.7; margin: 0; }
.t-faq h3 { font-size: .95rem; margin: 1.1rem 0 .3rem; }
.t-faq p { font-size: .85rem; color: var(--muted); line-height: 1.8; margin: 0; }
.t-crumb { font-size: .78rem; color: var(--muted); max-width: 1040px; margin: 0 auto; padding: 1rem 1.25rem 0; }
.t-crumb a { color: var(--muted); }
@media (max-width: 640px) { .tool-wrap { padding: 0 .85rem 2rem; } .tool-card { padding: 1rem; } }

.tool-card a:not(.t-btn), .tool-note a { color: var(--accent); }
.t-faq a { color: var(--accent); }

/* ツール一覧: カテゴリ */
.tools-catnav { display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 1.2rem; }
.tools-catnav a { padding:.35rem .9rem; border-radius:999px; border:1px solid var(--border-strong); color:var(--muted); text-decoration:none; font-size:.82rem; font-weight:700; }
.tools-catnav a:hover { border-color:var(--accent); color:var(--text); }
.tools-cat { margin:0 0 2rem; scroll-margin-top:5rem; }
.tools-cat-h { font-size:1.15rem; margin:0 0 .3rem; display:flex; gap:.5rem; align-items:center; }
.tools-cat > .tool-note { margin:0 0 .9rem; }
.tools-soon { padding:1.2rem; border:1px dashed var(--border-strong); border-radius:var(--radius); color:var(--muted); font-size:.85rem; }

/* 使い方・解説（t-guide） */
.t-guide h2 { font-size: 1.15rem; margin: 0 0 .8rem; }
.t-guide p { margin: .5rem 0; }
.t-guide ul, .t-guide ol { margin: .4rem 0 .6rem; padding-left: 1.4rem; font-size: .85rem; color: var(--muted); line-height: 1.85; }
.t-guide li { margin: .25rem 0; }
.t-guide li b, .t-guide p b { color: var(--ink, inherit); }
.t-guide code { font-family: 'Share Tech Mono', monospace; font-size: .85em; padding: .05rem .3rem; border-radius: 4px; background: rgba(127,127,127,.18); }