/* rem-converted: base 16px=1rem; keep 1px hairlines + font-size:16px iOS */
/* support.css — 1:1 문의(/tools/support) + 관리자 인박스(/tools/admin) 공유 UI.
 * tools.css 토큰(--t-*)만 사용. 다크테마 일관. */

.s-state { text-align:center; padding:2.25rem 1.5rem; background:#fff; border:1px solid var(--t-line); border-radius:var(--t-radius); max-width:32.5rem; margin:0.625rem auto; }
.s-state-title { font-size:16px; font-weight:700; margin:0 0 0.375rem; }
.s-state-sub { font-size:0.875rem; color:var(--t-sub); margin:0 auto 1rem; max-width:32.5rem; line-height:1.7; }

/* 탭 (관리자) */
.s-tabs { display:flex; gap:0.375rem; margin:0 0 1.125rem; border-bottom:1px solid var(--t-line); }
.s-tab { appearance:none; background:none; border:0; border-bottom:0.125rem solid transparent; margin-bottom:-1px;
  padding:0.5625rem 0.875rem; font-size:0.875rem; font-weight:600; color:var(--t-faint); cursor:pointer; display:inline-flex; align-items:center; gap:0.4375rem; }
.s-tab[aria-selected="true"] { color:var(--t-ink); border-bottom-color:var(--t-mint); }
.s-tab:focus-visible { outline:0.125rem solid var(--t-mint); outline-offset:0.125rem; }
.s-badge { min-width:1.125rem; height:1.125rem; padding:0 0.3125rem; border-radius:0.5625rem; background:var(--t-short); color:#fff;
  font-size:0.6875rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.s-badge.is-zero { background:var(--t-line-2); color:var(--t-faint); }

/* 필터 */
.s-filters { display:flex; gap:0.375rem; margin:0 0 0.875rem; flex-wrap:wrap; }
.s-filter { appearance:none; background:var(--t-panel); border:1px solid var(--t-line); border-radius: 999rem;
  padding:0.3125rem 0.8125rem; font-size:0.78125rem; color:var(--t-sub); cursor:pointer; }
.s-filter[aria-pressed="true"] { border-color:var(--t-mint); color:var(--t-ink); background:var(--t-mint-soft); }

/* 목록 */
.s-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.5rem; }
.s-item { width:100%; text-align:left; background:var(--t-panel); border:1px solid var(--t-line); border-radius:var(--t-radius);
  padding:0.8125rem 0.9375rem; cursor:pointer; display:block; color:inherit; }
.s-item:hover { border-color:var(--t-line-2); }
.s-item:focus-visible { outline:0.125rem solid var(--t-mint); outline-offset:0.125rem; }
.s-item-top { display:flex; align-items:center; gap:0.5625rem; margin:0 0 0.25rem; }
.s-item-subj { font-size:0.90625rem; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.s-dot { flex:none; width:0.5rem; height:0.5rem; border-radius:50%; background:var(--t-short); }
.s-item-prev { font-size:0.8125rem; color:var(--t-faint); margin:0; line-height:1.6;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.s-item-meta { font-size:0.71875rem; color:var(--t-faint); margin:0.3125rem 0 0; display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }

.s-chip { font-size:0.6875rem; font-weight:700; padding:0.125rem 0.5rem; border-radius:0.25rem; line-height:1.5; flex:none; }
.s-chip.is-open { color:var(--t-warn); background:var(--t-warn-soft); }
.s-chip.is-answered { color:var(--t-long); background:var(--t-long-soft); }
.s-chip.is-closed { color:var(--t-faint); background:var(--t-line); }
.s-chip.is-pending { color:var(--t-warn); background:var(--t-warn-soft); }
.s-chip.is-resolved { color:var(--t-long); background:var(--t-long-soft); }

/* 대화 뷰 */
.s-thread-head { display:flex; align-items:flex-start; gap:0.625rem; margin:0 0 0.25rem; }
.s-back { appearance:none; background:none; border:0; color:var(--t-faint); font-size:0.8125rem; cursor:pointer; padding:0.25rem 0; margin:0 0 0.5rem; }
.s-back:hover { color:var(--t-ink); }
.s-thread-subj { font-size:1.1875rem; font-weight:700; margin:0; line-height:1.35; min-width:0; flex:1; }
.s-thread-meta { font-size:0.75rem; color:var(--t-faint); margin:0.125rem 0 1.125rem; display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }

.s-msgs { display:flex; flex-direction:column; gap:0.75rem; margin:0 0 1.25rem; }
.s-msg { max-width:82%; }
.s-msg.is-user { align-self:flex-end; }
.s-msg.is-admin { align-self:flex-start; }
.s-msg-who { font-size:0.6875rem; color:var(--t-faint); margin:0 0 0.1875rem; }
.s-msg.is-user .s-msg-who { text-align:right; }
.s-bubble { border:1px solid var(--t-line); border-radius:0.75rem; padding:0.6875rem 0.875rem; font-size:0.875rem; line-height:1.72;
  white-space:pre-wrap; word-break:break-word; }
.s-msg.is-user .s-bubble { background:var(--t-mint-soft); border-color:transparent; border-bottom-right-radius:0.1875rem; }
.s-msg.is-admin .s-bubble { background:var(--t-panel); border-bottom-left-radius:0.1875rem; }
.s-msg-time { font-size:0.65625rem; color:var(--t-faint); margin:0.1875rem 0.125rem 0; }
.s-msg.is-user .s-msg-time { text-align:right; }

/* 폼 */
.s-form { display:flex; flex-direction:column; gap:0.625rem; }
.s-form-row { display:flex; flex-direction:column; gap:0.3125rem; }
.s-form label { font-size:0.78125rem; color:var(--t-sub); font-weight:600; }
.s-textarea { width:100%; min-height:6rem; resize:vertical; background:var(--t-panel); color:var(--t-ink);
  border:1px solid var(--t-line); border-radius:var(--t-radius); padding:0.6875rem 0.8125rem; font-size:0.875rem; line-height:1.7; font-family:inherit; }
.s-textarea:focus, .s-input:focus { outline:none; border-color:var(--t-mint); }
.s-input { width:100%; background:var(--t-panel); color:var(--t-ink); border:1px solid var(--t-line);
  border-radius:var(--t-radius); padding:0.625rem 0.8125rem; font-size:0.875rem; font-family:inherit; }
.s-count { font-size:0.6875rem; color:var(--t-faint); text-align:right; }
.s-reply-box { border-top:1px solid var(--t-line); padding-top:1rem; margin-top:0.25rem; }
.s-actions { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; margin-top:0.125rem; }
.s-formerror { color:var(--t-short); font-size:0.8125rem; margin:0; }
.s-ok { color:var(--t-long); font-size:0.8125rem; margin:0; }
.s-hint { font-size:0.75rem; color:var(--t-faint); margin:0; line-height:1.6; }
.s-closed-note { font-size:0.8125rem; color:var(--t-faint); background:var(--t-panel); border:1px solid var(--t-line);
  border-radius:var(--t-radius); padding:0.75rem 0.875rem; text-align:center; }

/* 정밀분석 스냅샷 */
.s-snap { background:var(--t-panel); border:1px solid var(--t-line); border-radius:var(--t-radius); padding:0.875rem 1rem; margin:0 0 0.875rem; }
.s-snap h4 { font-size:0.8125rem; margin:0 0 0.625rem; color:var(--t-sub); }
.s-snap-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr)); gap:1px; background:var(--t-line);
  border:1px solid var(--t-line); border-radius:var(--t-radius); overflow:hidden; }
.s-snap-cell { background:var(--t-panel); padding:0.5625rem 0.6875rem; }
.s-snap-cell dt { font-size:0.6875rem; color:var(--t-faint); margin:0 0 0.125rem; }
.s-snap-cell dd { margin:0; font-size:0.9375rem; font-weight:700; font-variant-numeric:tabular-nums; }

.s-spin { display:inline-block; width:0.9375rem; height:0.9375rem; border:0.125rem solid var(--t-line-2); border-top-color:var(--t-mint);
  border-radius:50%; animation:s-spin .7s linear infinite; vertical-align:-0.125rem; }
@keyframes s-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .s-spin { animation:none; } }

@media (max-width:35rem) {
  .s-msg { max-width:92%; }
  .s-thread-subj { font-size:1.0625rem; }
}