/* หน้า /tag/image/ — ใช้ตัวแปรจาก tokens.css ทั้งหมด · สีป้ายตัวอย่างมาจากสีม้วนของร้าน (ตั้งผ่าน --sw / style.fill) */

.it-drop {
  display: grid; place-items: center; gap: var(--space-3xs); text-align: center; cursor: pointer;
  padding: var(--space-lg) var(--space-sm); min-height: var(--tap);
  background: var(--color-paper-2); color: var(--color-ink);
  border: var(--rule-strong, 2px) dashed var(--color-rule-strong); border-radius: var(--radius-md);
}
.it-drop:hover, .it-drop--over { border-color: var(--color-accent); background: var(--color-accent-soft); }
.it-drop:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.it-drop__file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.it-drop__big { font-size: var(--text-xl, 1.5rem); color: var(--color-accent-ink); line-height: 1; }
.it-drop__t { font-weight: 600; }
.it-drop__s { font-size: var(--text-sm); color: var(--color-ink-3); }
.it-drop--small { padding: var(--space-xs) var(--space-sm); grid-auto-flow: column; justify-content: center; gap: var(--space-xs); }
.it-drop--small .it-drop__s { display: none; }

.it-note { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); min-height: 0; }
.it-note:empty { display: none; }
.it-note--bad { color: var(--color-warn-ink); background: var(--color-warn-soft); border: var(--rule-hair) solid var(--color-warn); border-radius: var(--radius-sm); padding: var(--space-2xs) var(--space-xs); }

.it-sub { display: flex; flex-direction: column; gap: var(--space-xs); }
.it-sub[hidden], .it-dl[hidden] { display: none; }
.it-range { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3xs) var(--space-xs); align-items: center; font-size: var(--text-sm); }
.it-range label { grid-column: 1 / -1; color: var(--color-ink-2); }
.it-range input[type="range"] { width: 100%; min-height: var(--tap); accent-color: var(--color-accent); }
.it-range output { font-variant-numeric: tabular-nums; min-width: 5ch; text-align: end; color: var(--color-ink); }

.it-ringpos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); }

.it-chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.it-chip { position: relative; width: var(--tap); height: var(--tap); border-radius: var(--radius-sm); border: 2px solid var(--color-rule-strong); background: var(--chip); cursor: pointer; padding: 0; }
.it-chip[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }
.it-chip__tag { position: absolute; inset-inline: 0; bottom: 0; font-size: var(--text-xs); background: var(--color-paper); color: var(--color-ink); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

.it-sw-row { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); }
.it-sw-row > span { min-width: 3ch; color: var(--color-ink-2); }
.it-sw { display: flex; flex-wrap: wrap; gap: var(--space-3xs); }
.it-sw__dot { width: 2rem; height: 2rem; border-radius: 50%; background: var(--sw); border: 2px solid var(--color-rule-strong); cursor: pointer; padding: 0; position: relative; }
.it-sw__dot::after { content: ""; position: absolute; inset: -0.4rem; }   /* ขยายพื้นที่แตะถึง 2.8rem */
.it-sw__dot[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }

.it-compare { margin: 0; display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); color: var(--color-ink-3); }
.it-thumb { max-width: 8rem; max-height: 6rem; width: auto; height: auto; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper-2); }

.it-dl { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.it-dl .hint { flex-basis: 100%; }
.it-dl .btn { min-height: var(--tap); }