/* ══ op 공용 UI 개선 레이어 (대표 2026-08-18 「전체 화면 구조를 아주 멋지게 · 웹·태블릿·모바일」) ══
   원칙 — 마크업·JS 는 건드리지 않고 «보이는 것»만 바꾼다. id/class 계약 불변.
     ② 목록의 한 줄 = 「상태 레일 + 이름 · 사실 한 문장 + 행동」. 페이지가 달라도 줄 모양이 같다.
     ③ 색은 상태에만 쓴다 — 빨강=밀림 · 골드=오늘 · 초록=끝남 · 회색=대기.
   ⚠️ 이 파일은 <head> «맨 끝»에 링크한다(페이지 <style> 뒤여야 이긴다). !important 는 쓰지 않는다.
   전환 경계 = 1240px(카드형) · 1023px(압축) — `orders.html` 주석의 근거와 같은 규약.
   (2026-10-05 — ① 옛 KPI 세 계열(요약 띠 · 넓은 화면 글자 · 시그니처 숫자·떠오름)은 걷었다. 쓰는 화면이 0 이다: KPI 줄은 `HawkDash.kpis`(/asset/hk-dash)·`hk-kpi` 가 그린다.) ── */

/* ══ ② 작업 줄 — 목록 한 줄의 표준 ═════════════════════════════════════════
   왼쪽 3px 레일이 상태를 말한다. 색은 여기 하나뿐이라 줄이 조용해진다. */
html .qrow {
  position: relative;
  padding-left: 20px;
  min-height: 56px;
}

html .qrow::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--ink-4, #4E5057);          /* 기본 = 대기(회색) */
}

html .qrow[data-kind="overdue"]::before,
html .qrow[data-kind="expired"]::before { background: var(--alarm, #F5453D) }      /* 밀림 */

html .qrow[data-kind="expiring"]::before,
html .qrow[data-kind="followup"]::before { background: var(--accent, var(--hk-brand)) }    /* 오늘 */

html .qrow.dim::before { background: var(--online, #41BE78) }                      /* 끝남 */

/* 상태 칩 — 레일과 색이 겹치므로 «칠하지 않는다». 한 줄에 색 있는 것은 하나. */
html .qrow .qtag {
  background: none;
  padding: 0;
  font-size: 11.5px;
  letter-spacing: .04em;
  opacity: .9;
}

/* ══ ③ 좁은 화면 — 이름은 위, 행동은 아래 한 줄 ══════════════════════════ */
@media (max-width: 1023px) {
html .qrow {
    flex-wrap: wrap;
    row-gap: 9px;
    padding: 13px 16px 13px 20px;
  }
html .qrow .qname { flex: 1 1 60%; min-width: 0 }
html .qrow .qsp { display: none }
html .qrow .act {
    flex: 1 1 auto;
    min-height: 44px;                 /* 손가락 기준 */
    justify-content: center;
  }
html .qrow .act.paynow { flex: 1 1 100%; order: 9 }   /* 주 행동 = 아랫줄 전체폭 */
}

/* ══ ④ 카드형 목록(<1240px) 마감 통일 ══════════════════════════════════════
   1240px 아래에서는 전 화면이 표 대신 «줄 카드»를 그린다. 그 카드의 모서리·행동 버튼을
   한 규약으로 맞춘다. 색·구조는 페이지 것을 그대로 둔다(뜻이 페이지마다 다르므로). */
@media (max-width: 1240px) {
html tbody tr { border-radius: 14px }
  td.c-act .act,
  td[data-label] .act,
html tbody tr .act { min-height: 44px }        /* 손가락 기준 */
  td.c-act .act.primary { flex-basis: 100% }  /* 주 행동은 한 줄 전체 */
}

/* ══ ⑤ 시트가 덮는 만큼 아래 여백 ══ */
@media (max-width: 1023px) {
html main { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) }
}

/* ══ ④ 버튼 «한 벌» — op 콘솔 공용 (대표 2026-08-27 「중성 드롭도 없애고 공용 CSS로 빼라」) ══
   왜 필요한가 — `.tbtn` 정의가 **26개 화면에 각자** 있었다(실측 10종). 한 곳을 고쳐도 나머지는
   안 따라오므로 반드시 어긋난다. 실제로 그림자만 세 갈래(노란 글로우·중성 드롭·없음)로 갈렸고,
   그 갈래는 «화면»이 아니라 «테마»별로도 달랐다(라이트 --luxe-shadow-sm / 다크 --accent-glow).
   ⇒ 여기 한 곳이 단일 소스다. 화면 쪽에는 «그 화면만의 사정»(터치 타깃 min-height·정렬 등)만 남긴다.

   규격(2026-10-04 밤 · 19_ui §5 의 버튼 결로 — 종전 13px/700 · 옅은 선 · 흐린 글자):
     padding 8px 14px · font 13px/500 · 보더 1px var(--hk-border-strong) · 배경 투명 · 글자 var(--hk-on-btn-soft)   (= hk-btn is-line 의 결)
     primary = var(--hk-primary) 배경 + var(--hk-on-primary) 글자 · 500                                      (= hk-btn is-main 의 결)
     크기(안쪽 여백·글자 크기)는 그대로 둔다 — 26개 화면의 도구줄이 이 치수로 줄을 맞춰 놓았다. 새 화면은 hk-btn 을 쓴다.
   ⚠️ **border-radius 는 토큰이 아니라 값(8px)으로 못박는다** — `--r-2` 가 화면마다 8px(33)·
      12px(2)·6px(2)로 달라서, 토큰을 쓰면 «공용»인데도 반경이 갈린다.
   ⚠️ **그림자는 넣지 않는다**(대표 지시). 다크·라이트 어느 쪽에도.
   ⚠️ `html ` 접두사 = 이 파일의 기존 규약(페이지 <style> 뒤에 링크되지만 특이도까지 확보). ── */
html .tbtn, html .btn-secondary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 1px solid var(--hk-border-strong); border-radius: 8px;
  background: transparent; color: var(--hk-on-btn-soft);
  font-size: 13px; font-weight: 500; text-decoration: none;
  cursor: pointer; box-shadow: none;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
html .tbtn:hover:not(:disabled), html .btn-secondary:hover:not(:disabled) {
  border-color: var(--hk-border-strong); color: var(--hk-heading); background: var(--hk-surface-2);
}
html .tbtn.primary, html .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border: 1px solid var(--hk-primary); border-radius: 8px;
  background: var(--hk-primary); color: var(--hk-on-primary);
  font-size: 13px; font-weight: 500; text-decoration: none;
  cursor: pointer; box-shadow: none;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
html .tbtn.primary:hover:not(:disabled), html .btn-primary:hover:not(:disabled) {
  background: var(--hk-primary-hover); border-color: var(--hk-primary-hover); box-shadow: none;
}
html .tbtn:disabled, html .btn-primary:disabled, html .btn-secondary:disabled {
  opacity: .45; cursor: default;
}


/* ══ ⑤ 애플 «Fluid Interfaces» 1차 적용 — 눌림 반응·감각 설정 존중 (대표 2026-08-27) ══
   근거 = WWDC 2018 «Designing Fluid Interfaces» + apple-design 스킬(Emil Kowalski, MIT).

   🔴 **1장 Response 가 이 문서의 토대다** — "지연이 보이는 순간 직접성은 절벽에서 떨어진다".
      규칙은 «누르는 순간»(pointer-down) 반응이지 «떼는 순간»(click)이 아니다.
      실측(2026-08-27): `/crm`·`/orders`·`/tickets`·`/promo` 의 기본 버튼이 **눌림 반응 0/5** —
      호버와 클릭만 있고 «누르고 있는 동안»은 아무 일도 안 났다. 그게 「죽은 느낌」의 정체다.
   ⇒ `:active` = 누르는 즉시 적용되는 상태다(뗄 때가 아니라). 여기서 **전환시간을 0 으로** 둔다 —
     눌림에 이징을 걸면 그 자체가 지연이다. 되돌아올 때만 스프링 곡선을 탄다.
   ⚠️ `scale(.97)` 은 «작아지는» 것이 아니라 «눌린다»는 물리 신호다. 3장(중단 가능성)에 따라
      transform 만 쓴다 — 레이아웃을 흔들지 않고 언제든 되돌릴 수 있다.
   ⚠️ `touch-action: manipulation` = 문서가 명시한 **~300ms 탭 지연** 제거(더블탭 확대 대기).
   ⚠️ 14장 — 감각 설정은 «독립된 세 신호»다. 우리는 reduced-motion 만 34/41 화면에서 보고
      **reduced-transparency·contrast 는 0/41** 이었는데, backdrop-filter 는 20화면이 쓴다.
      투명도를 낮춰 달라는 사람에게 유리판을 계속 보여 주고 있었다. ── */

/* 4장 — 기본은 «임계 감쇠»(damping 1.0 · response 0.3~0.4). 튐은 «던진» 동작에만 준다.
   CSS 근사: 오버슈트 없는 감속 곡선 + 0.3s. 제스처가 아닌 UI 는 이걸로 충분하다. */
html { --spring-1: cubic-bezier(.2, 0, 0, 1); --spring-t: .3s; }

html .tbtn, html .btn-primary, html .btn-secondary {
  touch-action: manipulation;                 /* ~300ms 탭 지연 제거 */
  -webkit-tap-highlight-color: transparent;   /* 우리 눌림 표현으로 대체한다 */
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast),
              transform var(--spring-t) var(--spring-1);
}
/* 🔴 눌린 «즉시» — 전환 0s. 여기에 이징을 걸면 그게 곧 지연이다. */
html .tbtn:active:not(:disabled),
html .btn-primary:active:not(:disabled),
html .btn-secondary:active:not(:disabled) { transform: scale(.97); transition-duration: 0s; }

/* 14장 — 움직임을 줄여 달라면 «되돌아오는 스프링»만 끈다(눌림 신호 자체는 남긴다:
   피드백을 없애는 게 아니라 전정기관을 자극하는 움직임을 없애는 것이다). */
@media (prefers-reduced-motion: reduce) {
  html .tbtn, html .btn-primary, html .btn-secondary { transition-duration: .01ms }
  html .tbtn:active:not(:disabled),
  html .btn-primary:active:not(:disabled),
  html .btn-secondary:active:not(:disabled) { transform: none; filter: brightness(.92) }
}
/* 14장 — 투명도를 줄여 달라면 유리판을 «서리»로: 블러를 끄고 배경을 불투명하게. */
@media (prefers-reduced-transparency: reduce) {
  html [style*="backdrop-filter"], html .glass, html .hero, html .sheet, html .card,
  html .chan-card, html .clip-card, html .dm-card {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    background-color: var(--surface-1, #14161a);
  }
}
/* 14장 — 대비를 높여 달라면 «거의 불투명한 배경 + 뚜렷한 보더». */
@media (prefers-contrast: more) {
  html .tbtn, html .btn-secondary { border-color: var(--ink-3, #6b6f76); color: var(--ink-hi) }
  html .tbtn.primary, html .btn-primary { border-color: var(--accent-ink) }
}


/* ══ ⑥ 「진행 중」 표시 — Feedback 4종 중 «상태» (대표 2026-08-27) ══
   `data-busy` 는 sidenav.js 가 «누른 버튼 ↔ 그 직후의 쓰기 요청»에 단다.
   ⚠️ 글자를 가리지 않는다 — 스피너를 글자 위에 얹으면 좁은 버튼에서 겹친다.
      버튼 «아래쪽 2px» 막대라 어떤 크기에서도 안 겹친다.
   ⚠️ `pointer-events:none` 이 재클릭을 막는다 — 이게 «두 번 발송»을 실제로 끊는 자리다. */
html [data-busy] { position: relative; pointer-events: none; cursor: progress; opacity: .78 }
html [data-busy]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: currentColor; opacity: .55; transform-origin: left;
  animation: hawk-busy 1.05s ease-in-out infinite;
}
@keyframes hawk-busy {
  0%   { transform: scaleX(0);   transform-origin: left }
  50%  { transform: scaleX(1);   transform-origin: left }
  50.1%{ transform: scaleX(1);   transform-origin: right }
  100% { transform: scaleX(0);   transform-origin: right }
}
@media (prefers-reduced-motion: reduce) {
  html [data-busy]::after { animation: none; transform: scaleX(1); opacity: .38 }
}