/* 19-4 (10/19 총괄·사용자): 모든 화면 공통 상호작용 — 관리자·심사위원·출품·IDOL·위촉자료·이의 신청 등
   각 화면 CSS 뒤에 불러옴. 색은 테마 토큰(theme.css의 --hover-bg·--hover-line·--rail-hover·--row-hover·--tip-*), 없으면 중립 대체값
   ① 호버(배경 한 단계·테두리 진하게·주 버튼 밝기 +6%) ② 누름(1px 내려감·밝기 −4%) ③ 키보드 포커스 링 ④ 비활성(호버 없음·not-allowed)
   ⑤ 분야·필터 칩 테두리 약하게 ⑥ 버튼·칩·탭 글자 한 줄 ⑦ 휴대폰 터치 크기·입력 글자 16px ⑧ 툴팁 (ux.js) */
:root {
  --ux-hover-bg: var(--hover-bg, rgba(127,127,127,.10));
  --ux-hover-line: var(--hover-line, rgba(127,127,127,.55));
  --ux-row-hover: var(--row-hover, rgba(127,127,127,.06));
  --ux-ring: var(--accent, var(--gold, #1257E0));
  --ux-chip: var(--accent, var(--gold, #1257E0));
}

/* ── 누를 수 있는 것: 손가락 모양 · 120ms 전환 ── */
button, .btn, a.btn, [role="button"], [role="tab"], summary, select, label.check, label.chk, .chips label, input[type="checkbox"], input[type="radio"],
th.sortable, .fchip, .fmore, .fc2, .flagbtn, .opt, .jitem, .todo-row, .still, .pg, .thopt, .thbtn, .qi, .tc, .vsave, .vx, .elist tbody tr, .maillist tbody tr {
  cursor: pointer;
}
button, .btn, a, [role="tab"], summary, .fchip, .fmore, .fc2, .flagbtn, .opt, .jitem, .todo-row, .still, .pg, .thopt, .qi, table.list tbody tr > td, nav.tabs a, .botnav a {
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, filter .12s ease, box-shadow .12s ease, transform .12s ease;
}
:disabled, [aria-disabled="true"], .btn.disabled { cursor: not-allowed !important; }

@media (hover: hover) {
  /* 주 버튼: 밝기 +6% */
  .btn:not(.ghost):not(.link):not(:disabled):hover, .jbar .btn:not(.ghost):not(:disabled):hover { filter: brightness(1.06); }
  /* 테두리 있는 보조 단추·칩: 바탕 한 단계 + 테두리 진하게 */
  .btn.ghost:not(:disabled):hover, .thbtn:hover, #langsw button:not(.on):hover, .lang button:not(.on):not(:disabled):hover, .lang .btn.ghost:hover, #aihelp:not(.on):hover, #logout:hover, #svk-logout:hover,
  .iconbtn:hover, .fchip:hover, .fmore:hover, .fc2:not(.on):hover, .flagbtn:not(.on):hover, .opt:not(.sel):not(:disabled):hover, .pg:not(.on):not(:disabled):hover,
  .seg button:not(.on):hover, .thopt:not(.on):hover, .still:hover, .qbtn:hover, .jdocbtn:not(:disabled):hover, .chips label:hover, .cand:not(.sel):hover, .gsearch:hover {
    background-color: var(--ux-hover-bg); border-color: var(--ux-hover-line);
  }
  /* 테두리 없는 탭·드롭다운 항목·추천 질문·글자 단추 */
  .subtabs a:not(.on):hover, .subtabs button:not(.on):hover, .views button:not(.on):hover, .dtabs button:not(.on):hover, .fpop button:hover, .bpop button:hover,
  .expdd .menu button:hover, .sugg button:hover, .dock .iconbtn:hover, .threset:hover, #railfold:hover, #railopen:hover, .mailnav a:not(.on):hover {
    background-color: var(--ux-hover-bg); color: var(--ink, inherit);
  }
  .subtabs a.btn.ghost:hover { background-color: var(--ux-hover-bg); border-color: var(--ux-hover-line); }
  /* 왼쪽 메뉴·하단 메뉴 */
  nav.tabs a:not(.on):hover { background-color: var(--rail-hover, var(--ux-hover-bg)); color: var(--rail-ink, inherit); }
  .botnav a:not(.on):hover { background-color: var(--rail-hover, var(--ux-hover-bg)); }
  /* 표 행: 행 전체 옅은 바탕 (고른 행과 구분) */
  table.list tbody tr:hover > td { background-color: var(--ux-row-hover); }
  table.list tbody tr.sel:hover > td, table.list tbody tr.nowrow:hover > td { background-color: color-mix(in srgb, var(--row-selected, var(--ux-hover-bg)) 88%, var(--ink, #000) 4%); }
  th.sortable:hover { color: var(--ink, inherit); background-color: var(--ux-hover-bg); }
  /* 카드형 링크 */
  .todo-row:hover, .jitem:not(.on):hover, .qi:hover, a.kpi:hover, .maillist tbody tr:hover > td, .tpl-list .btn.ghost:hover { background-color: var(--ux-hover-bg); border-color: var(--ux-hover-line); }
  /* 글자 링크 */
  a:not(.btn):not([role]):not(.todo-row):not(.jitem):not(.still):hover, .link:hover, .clr:hover, .vsave:hover, .tc:hover { text-decoration: underline; text-underline-offset: 3px; }
  nav.tabs a:hover, .botnav a:hover, .subtabs a:hover, .crumb a:hover { text-decoration: none; }
  label.check:hover, label.chk:hover { color: var(--ink, inherit); }
  label.check:hover input, label.chk:hover input { outline: 1px solid var(--ux-hover-line); outline-offset: 1px; }
}
/* 누를 때: 1px 내려가고 밝기 −4% */
:is(.btn, button, .pg, .fchip, .fc2, .flagbtn, .opt, .thopt, .still, .todo-row, .jitem, nav.tabs a, .botnav a):not(:disabled):active { transform: translateY(1px); filter: brightness(.96); }
:is(button, .btn):disabled { filter: none; transform: none; }
/* 키보드 포커스 (호버와 별개) */
:focus-visible { outline: 2px solid var(--ux-ring); outline-offset: 2px; }
:is(button, .btn, a, [role="tab"], summary, input, select, textarea):focus:not(:focus-visible) { outline: none; }

/* ── 분야·필터 칩 테두리 약하게 (각본·극작·연출 등): 기본 = 옅은 선 1px, 고름 = 옅은 강조 바탕 + 테두리 50% ── */
.flagbtn { border: 1px solid color-mix(in srgb, var(--c, var(--ux-chip)) 28%, transparent); background: var(--card, transparent); color: var(--ink2, inherit); }
.flagbtn.on { background: color-mix(in srgb, var(--c, var(--ux-chip)) 16%, var(--card, transparent)); border-color: color-mix(in srgb, var(--c, var(--ux-chip)) 50%, transparent); color: var(--ink, inherit); font-weight: 700; }
.fc2 { border-color: var(--line, color-mix(in srgb, var(--ux-chip) 28%, transparent)); }
.fc2.on, .fchip.set, .fchips select.set { border-color: color-mix(in srgb, var(--ux-chip) 50%, transparent); }
.opt { border-color: var(--line2, var(--line, rgba(127,127,127,.35))); }
.opt.sel { background: color-mix(in srgb, var(--ux-chip) 16%, transparent); border-color: color-mix(in srgb, var(--ux-chip) 50%, transparent); color: var(--ink, inherit); font-weight: 700; }
.chips label:has(input:checked) { background: color-mix(in srgb, var(--ux-chip) 14%, transparent); border-color: color-mix(in srgb, var(--ux-chip) 50%, transparent); }

/* ── 버튼·칩·탭·배지 글자는 한 줄 (한 글자씩 세로로 쪼개지지 않게) ── */
:is(button, .btn, a.btn, .chip, .fchip, .fmore, .fc2, .flagbtn, .opt, .subtabs a, .subtabs button, .views button, .dtabs button, .seg button, .pg, .nb, .nc, .vn, .badge, .js, [role="tab"]) { white-space: nowrap; word-break: keep-all; }
table :is(button, .btn, a.btn) { min-width: max-content; }
table td:has(> :is(button, .btn, a.btn)) { white-space: nowrap; }
:is(.btn, button) { max-width: 100%; text-overflow: ellipsis; overflow: hidden; }
.sugg button, .fpop button, .bpop button, .expdd .menu button, .thopt, .cand, .scene, .jitem, .msg-a button { white-space: normal; word-break: keep-all; overflow: visible; }

/* ── 휴대폰: 터치 44px · 간격 8px · 입력 글자 16px(아이폰 확대 방지) · 좁으면 여백·글자 한 단계 줄임 ── */
@media (max-width: 767px), (pointer: coarse) {
  :is(.btn, a.btn, .fchip, .fmore, .pg, .seg button, .opt, .fc2, .flagbtn, .iconbtn, .thbtn, #logout, #svk-logout, .jdocbtn) { min-height: 44px; }
  .seg button, #langsw button, .lang button, .lang .btn { min-height: 44px; min-width: 40px; }
  :is(.btns, .filters, .fchips, .fchips2, .flagpick, .opts, .bulkbar, .pager) { gap: 8px; }
}
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
  :is(.btn, a.btn, button) { padding-left: max(8px, min(14px, 2.6vw)); padding-right: max(8px, min(14px, 2.6vw)); }
}
@media (max-width: 400px) {
  :is(.btn, a.btn) { font-size: max(12px, 13px); }
}

/* ── 툴팁 (ux.js가 그림): 테마 색, 아이콘 오른쪽·아래 말풍선 ── */
.ux-tip { position: fixed; z-index: 10000; max-width: min(320px, calc(100vw - 24px)); padding: 6px 10px; border-radius: 8px; background: var(--tip-bg, #121722); color: var(--tip-ink, #fff);
  font: 600 12.5px/1.4 var(--font, inherit); white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.22); opacity: 0; transform: translateY(2px); transition: opacity .12s ease, transform .12s ease; }
.ux-tip.on { opacity: 1; transform: none; }
.ux-tip::before { content: ""; position: absolute; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); }
.ux-tip[data-side="right"]::before { left: -4px; top: calc(50% - 4px); }
.ux-tip[data-side="bottom"]::before { top: -4px; left: calc(50% - 4px); }
.ux-tip[data-side="top"]::before { bottom: -4px; left: calc(50% - 4px); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
/* 휴대폰: 화면 안의 모든 단추·탭 44px (글자 단추·표 안 단추 포함, 물음표·지우기 같은 작은 기호는 제외) */
@media (max-width: 767px) {
  main :is(button, .btn, a.btn, [role="tab"], .subtabs a):not(.qbtn):not(.vx):not(.tc):not(.orb):not(.orb0) { min-height: 44px; }
  main :is(.link, button.link) { display: inline-flex; align-items: center; }
  .views button, .dtabs button, .subtabs a, .subtabs button { min-height: 44px; display: inline-flex; align-items: center; }
  .sugg button, #dock .btn, #dock button { min-height: 44px; }
}
label.btn > input[type="file"] { display: none; } /* 파일 고르기 단추: 안의 파일 칸은 숨김(라벨을 누르면 열림) */

/* 19-4 (10/19 총괄·사용자): 메뉴 아이콘 약 30% 크게 (18 → 24px, 하단 메뉴 20 → 26px) · 줄 높이·간격도 비례 */
nav.tabs a { gap: 12px; min-height: 44px; padding: 9px 11px; font-size: 14.5px; }
nav.tabs a .ic { width: 24px; height: 24px; stroke-width: 1.6; }
:root.rail-c nav.tabs a { min-height: 46px; padding: 10px 0; }
:root.rail-c nav.tabs a .ic { width: 25px; height: 25px; }
@media (max-width: 959px) { nav.tabs a { min-height: 46px; } nav.tabs a .ic { width: 25px; height: 25px; } }
@media (max-width: 767px) { .botnav a { min-height: 56px; gap: 3px; font-size: 11.5px; } .botnav .ic { width: 26px; height: 26px; } }
/* 한 줄에 입력 칸과 단추가 함께 있으면 단추는 줄지 않고 입력 칸이 줄어듦 (글자 잘림 방지) */
:is(.btn, button):not(.sugg button):not(.thopt) { flex-shrink: 0; }
:is(input, select, textarea) { min-width: 0; }
/* 작은 기호 단추(기준 설명 '?'·지우기 ×)는 여백·잘림 규칙에서 뺌 */
.qbtn, .vx { padding: 0 !important; overflow: visible !important; text-overflow: clip; }
/* 19-6 (D5-12): 키보드가 올라와 있는 동안 아래 고정 막대 숨김 */
html.kb-open .botnav, html.kb-open #mhelp, html.kb-open .jbar { display: none !important; }

/* 19-6 (D5-15): 휴대폰 — 머리글·메뉴·표 안까지 누를 수 있는 모든 것 44px (채점 구슬·물음표·지우기 같은 작은 기호, 글 속 링크는 제외) */
@media (max-width: 767px) {
  button:not(.orb):not(.orb0):not(.qbtn):not(.vx):not(.tc):not(.chipx), [role="button"], summary, select, .mbrand, .brand, header a, nav a, .langs button, .lang button, #langsw button, td a, .acts a { min-height: 44px; }
  .langs button, .lang button, #langsw button, .iconbtn, .topmore, .railopen { min-width: 44px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), textarea { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  label.chk, label.check, .chk { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
  .mbrand, .brand, header a, nav a { display: inline-flex; align-items: center; }
}
/* 19-6 (디버깅5 재점검 4): 남은 작은 단추 — 행 높이·기간 고르기·테마·단계 이전/다음·표 행 선택 칸도 폭 44px */
@media (max-width: 767px) {
  .seg button, .density button, .rng button, .thbtn, .jthemebtn, button[data-density], .stepnav button, .navbtns button, .steps-nav button { min-width: 44px; }
  td input.rowchk, th input.allchk { min-width: 44px; }
}