/* tuner 固有スタイル */
.tool-main { max-width: 680px; }
[hidden] { display: none !important; }

.tn-set { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; align-items: end; }
@media (max-width: 460px) { .tn-set { grid-template-columns: 1fr; } }
.tn-a4 { display: flex; align-items: center; gap: 0.35rem; }
.tn-a4 input { width: 5.2rem; text-align: center; font-variant-numeric: tabular-nums; }
.tn-a4 .btn { width: 2.4rem; margin: 0; padding: 0.55rem 0; }

.tn-meter { --tn-c: var(--text-sub); margin-top: 1rem; text-align: center; }
.tn-meter[data-state="ok"] { --tn-c: #16a34a; }
.tn-meter[data-state="near"] { --tn-c: #d97706; }
.tn-meter[data-state="far"] { --tn-c: #dc2626; }
html[data-theme="dark"] .tn-meter[data-state="ok"] { --tn-c: #4ade80; }
html[data-theme="dark"] .tn-meter[data-state="near"] { --tn-c: #fbbf24; }
html[data-theme="dark"] .tn-meter[data-state="far"] { --tn-c: #f87171; }
.tn-svg { width: 100%; max-width: 420px; height: auto; }
.tn-arc { fill: none; stroke: var(--border); stroke-width: 6; stroke-linecap: round; }
.tn-ok { fill: none; stroke: #16a34a; stroke-width: 6; opacity: 0.85; }
.tn-tick { stroke: var(--text-sub); stroke-width: 1.5; }
.tn-tick.zero { stroke: var(--text); stroke-width: 2.5; }
.tn-lab { fill: var(--text-sub); font-size: 11px; }
.tn-needle { transform-origin: 110px 110px; transition: transform 0.18s ease-out; }
.tn-needle line { stroke: var(--tn-c); stroke-width: 3; stroke-linecap: round; }
.tn-needle circle { fill: var(--tn-c); }
.tn-meter[data-state="idle"] .tn-needle, .tn-meter[data-state="listen"] .tn-needle { opacity: 0.45; }

.tn-read { margin-top: -0.5rem; }
.tn-note { font-size: 3.6rem; font-weight: 700; line-height: 1.1; color: var(--tn-c); font-variant-numeric: tabular-nums; }
.tn-note small { font-size: 1.5rem; font-weight: 500; margin-left: 0.1rem; }
.tn-sol { color: var(--text-sub); min-height: 1.4em; }
.tn-cents { font-size: 1.3rem; font-weight: 700; min-height: 1.5em; font-variant-numeric: tabular-nums; }
.tn-hint { font-weight: 700; color: var(--tn-c); min-height: 1.6em; }
.tn-freq { font-size: 0.85rem; color: var(--text-sub); min-height: 1.4em; font-variant-numeric: tabular-nums; }

.tn-strings { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
.tn-str { display: flex; flex-direction: column; align-items: center; min-width: 4.4rem; padding: 0.4rem 0.6rem; margin: 0; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--pt-r); cursor: pointer; }
.tn-str b { font-size: 1.3rem; }
.tn-sn, .tn-sf { font-size: 0.7rem; color: var(--text-sub); }
.tn-str:hover { border-color: var(--pt-accent); }
.tn-str.is-active { border-color: var(--pt-ok-line); background: var(--pt-ok-soft); }
.tn-str[aria-pressed="true"] { border-color: var(--pt-accent); box-shadow: inset 0 0 0 1px var(--pt-accent); }