/* ============================================================
   FNB-APP-055 · 픽업덱 · 3DM 3D·인터랙티브
   배달·포장 매장 운영 대시보드 (웹앱) — 다크 지면
   ============================================================ */

:root {
  --brand:       #14bcd2;
  --brand-ink:   #04141a;
  --accent:      #6ff0d8;
  --accent-ink:  #06181c;
  --surface:     #0a1418;
  --surface-alt: #101f26;

  /* 다크 지면 — SPEC 4절 ★v1.2 에서 허용한 중립색 5개 재정의 */
  --ink:         #e6f2f5;
  --ink-2:       #9fb4bc;
  --ink-3:       #7b9099;
  --line:        #1c3038;
  --line-strong: #2c4750;

  --font-display: var(--font-sans);
  --r: var(--r-lg);
}

body { background: var(--surface); }

/* ── 공통 타입 ─────────────────────────────────────────────── */

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}
.h2 { font-size: var(--fs-xl); letter-spacing: var(--ls-tight); }
.h3 { font-size: var(--fs-lg); letter-spacing: var(--ls-tight); }
.body-sm { font-size: var(--fs-sm); color: var(--ink-2); }

/* ── 버튼 ──────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-md);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }
.btn--block { width: 100%; }

.btn--solid {
  background: linear-gradient(150deg, var(--accent), var(--brand));
  color: var(--brand-ink);
  box-shadow: 0 10px 26px color-mix(in oklab, var(--brand) 34%, transparent);
}
.btn--solid:hover { filter: brightness(1.08); }

.btn--line { border: 1px solid var(--line-strong); color: var(--ink); background: var(--surface-alt); }
.btn--line:hover { border-color: var(--brand); color: var(--brand); }

/* ── 앱 셸 ─────────────────────────────────────────────────── */
/* 모바일: 사이드바를 상단 가로 스크롤 줄로 눕힌다. JS 없이 전 메뉴가 항상 보인다. */

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100svh;
}

.side {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-4) var(--gutter);
  background: color-mix(in oklab, var(--surface-alt) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.side__brand {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight);
}
.side__mark {
  width: 26px; height: 26px; flex: none;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--accent), var(--brand) 52%, #1b6b8f);
  box-shadow: 0 6px 16px color-mix(in oklab, var(--brand) 46%, transparent),
              inset 0 1px 0 0 rgba(255,255,255,.36);
  transform: rotate(-8deg);
}

.side__nav {
  display: flex; gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.side__nav::-webkit-scrollbar { display: none; }
.side__nav a {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.side__nav a:hover { background: var(--surface); color: var(--ink); }
.side__nav a[aria-current="page"] {
  background: color-mix(in oklab, var(--brand) 20%, transparent);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 46%, transparent);
}
.side__nav span { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }

.side__foot { display: none; }

.main { padding: var(--sp-6) var(--gutter) var(--sp-8); display: grid; gap: var(--sp-6); align-content: start; }

@media (min-width: 1024px) {
  .app { grid-template-columns: minmax(0, 248px) minmax(0, 1fr); }
  .side {
    height: 100svh;
    border-bottom: 0;
    border-right: 1px solid var(--line);
    padding: var(--sp-6) var(--sp-5);
    gap: var(--sp-6);
  }
  .side__nav { flex-direction: column; gap: var(--sp-1); overflow: visible; }
  .side__nav a { justify-content: space-between; }
  .side__foot {
    display: grid; gap: var(--sp-3);
    margin-top: auto;
    padding: var(--sp-4);
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--line);
  }
  .main { padding: var(--sp-7) var(--sp-7) var(--sp-9); }
}

/* ── 상단 바 ───────────────────────────────────────────────── */

.topbar { display: grid; gap: var(--sp-4); }
.topbar__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.topbar h1 { font-size: var(--fs-2xl); letter-spacing: var(--ls-tight); }
.topbar__sub { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--sp-2); }
.topbar__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.livedot {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent);
}
.livedot::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 70%, transparent);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 70%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── 지표 카드 ─────────────────────────────────────────────── */

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }

.kpi {
  position: relative;
  display: grid; gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 120% 90% at 92% -10%,
      color-mix(in oklab, var(--brand) 22%, transparent), transparent 60%),
    linear-gradient(160deg, var(--surface-alt), var(--surface));
  box-shadow: 0 18px 34px rgba(0,0,0,.34), inset 0 1px 0 0 rgba(255,255,255,.05);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  transform-style: preserve-3d;
}
.kpi:hover {
  transform: translateY(-4px) rotateX(4deg) rotateY(-3deg);
  border-color: color-mix(in oklab, var(--brand) 50%, transparent);
  box-shadow: 0 26px 48px rgba(0,0,0,.44), 0 0 0 1px color-mix(in oklab, var(--brand) 26%, transparent);
}
.kpi dt { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-3); }
.kpi dd { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tighter); line-height: 1; }
.kpi dd span { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-3); margin-left: 3px; }
.kpi__delta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.kpi__delta--up { color: var(--accent); }
.kpi__delta--down { color: #ff8b7a; }
.kpi__delta em { font-style: normal; color: var(--ink-3); font-weight: var(--fw-normal); }

/* 스파크라인 */
.kpi svg { width: 100%; height: 34px; display: block; }

@media (min-width: 768px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── 패널 공통 ─────────────────────────────────────────────── */

.panel {
  display: grid; gap: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, var(--surface-alt), var(--surface) 74%);
  box-shadow: 0 14px 28px rgba(0,0,0,.28);
  min-width: 0;
}
.panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.panel__head h2 { font-size: var(--fs-lg); letter-spacing: var(--ls-tight); }
.panel__head p { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }

/* ── 차트 ──────────────────────────────────────────────────── */

.charts { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .charts { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }

/* 스파크라인(.kpi svg)과 본 차트(.chart)가 같은 규칙을 공유한다 */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
svg .grid { stroke: var(--line); stroke-width: 1; }
svg .axis { fill: var(--ink-3); font-family: var(--font-mono); font-size: 9px; }
svg .area { fill: url(#gradArea); }
svg .line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
svg .line--alt { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
svg .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.kpi svg .line { stroke-width: 2; }

/* 아이소메트릭 바 차트 — CSS 로만 그린다 */
.bars { display: grid; gap: var(--sp-3); }
.bar { display: grid; grid-template-columns: minmax(0, 2.6rem) minmax(0, 1fr) minmax(0, 3.4rem); gap: var(--sp-3); align-items: center; }
.bar__day { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.bar__track { height: 14px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.bar__fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, color-mix(in oklab, var(--brand) 62%, transparent), var(--accent));
  box-shadow: 0 0 16px color-mix(in oklab, var(--brand) 46%, transparent);
}
.bar__val { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-2); text-align: right; }

/* ── 필터 바 ───────────────────────────────────────────────── */

.filters { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.filters__search {
  flex: 1 1 200px; min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: var(--fs-sm);
}
.filters__search::placeholder { color: var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chips button {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  transition: all var(--dur) var(--ease);
}
.chips button:hover { border-color: var(--brand); color: var(--brand); }
.chips button[aria-pressed="true"] {
  background: color-mix(in oklab, var(--brand) 22%, transparent);
  border-color: var(--brand);
  color: var(--accent);
}

/* ── 테이블 ────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
table.orders {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
table.orders th, table.orders td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
table.orders thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-strong);
}
table.orders thead th button {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
table.orders thead th button:hover { color: var(--brand); }
table.orders thead th button::after { content: "\2195"; opacity: .5; }
table.orders thead th[aria-sort="ascending"] button::after { content: "\2191"; opacity: 1; color: var(--accent); }
table.orders thead th[aria-sort="descending"] button::after { content: "\2193"; opacity: 1; color: var(--accent); }

table.orders tbody tr { cursor: pointer; transition: background var(--dur-fast) var(--ease); }
table.orders tbody tr:hover { background: color-mix(in oklab, var(--brand) 10%, transparent); }
table.orders tbody tr.is-active { background: color-mix(in oklab, var(--brand) 18%, transparent); }
table.orders td.num { font-family: var(--font-mono); }

.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 2px var(--sp-3);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
}
.badge--cook { border-color: color-mix(in oklab, var(--brand) 60%, transparent); color: var(--brand); }
.badge--ready { border-color: color-mix(in oklab, var(--accent) 60%, transparent); color: var(--accent); }
.badge--done { border-color: var(--line-strong); color: var(--ink-3); }
.badge--late { border-color: #ff8b7a; color: #ff8b7a; }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.pager__pages { display: flex; gap: var(--sp-2); }
.pager__pages button {
  min-width: 34px; padding: var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--ink-2);
  transition: all var(--dur) var(--ease);
}
.pager__pages button:hover { border-color: var(--brand); color: var(--brand); }
.pager__pages button[aria-current="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.pager p { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }

/* ── 하단 2단 (테이블 + 상세) ──────────────────────────────── */

.split { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1280px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: start; } }

.detail { display: grid; gap: var(--sp-4); }
.detail__media { border-radius: var(--r-md); }
.detail__id { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); }
.detail__name { font-size: var(--fs-lg); letter-spacing: var(--ls-tight); }
.detail__rows { display: grid; gap: var(--sp-3); }
.detail__rows div {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.detail__rows dt { color: var(--ink-3); }
.detail__rows dd { color: var(--ink); font-family: var(--font-mono); }
.detail__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
.detail__total span { font-size: var(--fs-sm); color: var(--ink-3); }
.detail__total b { font-size: var(--fs-xl); letter-spacing: var(--ls-tight); }

/* ── 메뉴 카드 (3D) ────────────────────────────────────────── */

.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (min-width: 1024px) { .menu-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.mcard {
  display: grid; gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--surface-alt), var(--surface));
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mcard:hover {
  transform: translateY(-6px) rotateX(6deg);
  border-color: color-mix(in oklab, var(--brand) 46%, transparent);
  box-shadow: 0 24px 42px rgba(0,0,0,.42);
}
.mcard .img-slot { border-radius: var(--r-md); }
.mcard__body { display: grid; gap: var(--sp-2); padding: 0 var(--sp-2) var(--sp-2); }
.mcard__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.mcard__meta { display: flex; justify-content: space-between; gap: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.mcard__meta b { color: var(--accent); }

/* ── 배너 ──────────────────────────────────────────────────── */

.banner {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  isolation: isolate;
}
.banner .img-slot { border-radius: 0; aspect-ratio: 21 / 9; }
.banner__overlay {
  position: absolute; inset: 0; z-index: 4;
  display: grid; align-content: end; gap: var(--sp-3);
  padding: var(--sp-5);
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--surface) 94%, transparent) 0%,
    color-mix(in oklab, var(--surface) 72%, transparent) 46%,
    color-mix(in oklab, var(--surface) 20%, transparent) 100%);
}
.banner__overlay h2 { font-size: var(--fs-xl); letter-spacing: var(--ls-tight); max-width: 22ch; }
.banner__overlay p { font-size: var(--fs-sm); color: var(--ink-2); max-width: 40ch; }

/* ── 푸터 ──────────────────────────────────────────────────── */

.foot { padding-top: var(--sp-6); border-top: 1px solid var(--line); display: grid; gap: var(--sp-4); }
.foot__nav { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.foot__nav a { font-size: var(--fs-sm); color: var(--ink-2); }
.foot__nav a:hover { color: var(--brand); }
.foot__copy { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }

/* ============================================================
   브랜드 마크 · 아이콘 · 인터랙션 보강  ★SPEC 4-C
   레이아웃·색·타이포는 건드리지 않는다. 여기서는 더하기만 한다.
   ============================================================ */

/* .kpi svg / .chart 는 대시보드 차트라 크기 규칙이 따로 있다.
   아이콘은 .ico 로만 다루고 그 안에는 넣지 않는다. */
.ico { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }

/* ── 브랜드 마크 — 비스듬히 겹쳐 쌓인 주문 티켓 두 장 ────────
   26px 그라디언트 사각형을 인라인 SVG 로 교체했다. 다크 지면이라
   --brand(8.1:1) 로 그린다. */
.mark { flex: none; color: var(--brand); }
.mark__back  { transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease); opacity: .75; }
.mark__front { transition: transform var(--dur) var(--ease-out); }
.mark__lines { transition: opacity var(--dur) var(--ease); }
.side__brand:hover .mark__back  { transform: translate(1.6px, -1.6px); opacity: 1; }
.side__brand:hover .mark__front { transform: translate(-1.2px, 1.2px); }
.side__brand:hover .mark__lines { opacity: .55; }
.foot__brand { display: flex; align-items: flex-start; gap: var(--sp-3); }
.foot__brand .mark { margin-top: .1em; transition: transform var(--dur-slow) var(--ease-out); }
.foot__brand:hover .mark { transform: translate(1.6px, -1.6px); }
.side__brand { transition: color var(--dur) var(--ease); }
.side__brand:hover { color: var(--brand); }

/* ── 아이콘이 붙는 자리 ─────────────────────────────────────── */

.side__nav a .ico { font-size: var(--fs-md); opacity: .82; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out); }
.side__nav a:hover .ico { opacity: 1; transform: translateY(-1px); }
.side__nav a[aria-current="page"] .ico { opacity: 1; }

.topbar__sub { display: flex; align-items: center; gap: var(--sp-2); }
.topbar__sub .ico { font-size: var(--fs-base); }

/* 14px 버튼에서 1em 아이콘은 뭉개진다 */
.btn__arrow {
  font-size: 1.25em;
  margin-left: 1px;
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateY(2px); }

/* ── 지표 카드: 숫자와 델타가 함께 반응한다 ────────────────── */

.kpi dd { transition: color var(--dur) var(--ease); }
.kpi:hover dd { color: var(--brand); }
.kpi__delta { transition: transform var(--dur) var(--ease-out); }
.kpi:hover .kpi__delta { transform: translateX(3px); }
.kpi svg .line { transition: stroke-width var(--dur) var(--ease); }
.kpi:hover svg .line { stroke-width: 2.8; }

/* ── 패널 · 차트 · 막대 ────────────────────────────────────── */

.panel { transition: border-color var(--dur) var(--ease); }
.panel:hover { border-color: color-mix(in oklab, var(--brand) 34%, transparent); }
.bar__fill { transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease-out); transform-origin: left; }
.bar:hover .bar__fill { filter: brightness(1.18); transform: scaleY(1.18); }
.bar__val { transition: color var(--dur) var(--ease); }
.bar:hover .bar__val { color: var(--brand); }

/* ── 표 · 배지 · 페이저 · 필터 ─────────────────────────────── */

.orders tbody tr { transition: background var(--dur) var(--ease); }
.orders tbody tr:hover { background: color-mix(in oklab, var(--brand) 9%, transparent); }
.badge { transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease); }
.orders tbody tr:hover .badge { transform: translateY(-1px); }
.filters__search { transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.filters__search:hover { border-color: color-mix(in oklab, var(--brand) 48%, transparent); }
.chips button { transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.chips button:active { transform: translateY(1px); }
.pager__pages button { transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease); }

/* ── 상세 · 메뉴 카드 · 배너 ───────────────────────────────── */

.detail__rows div { transition: background var(--dur) var(--ease); }
.detail__rows div:hover { background: color-mix(in oklab, var(--brand) 8%, transparent); }
.detail__media { overflow: hidden; }
.detail__media img { transition: transform var(--dur-slow) var(--ease-out); }
.detail:hover .detail__media img { transform: scale(1.05); }
.mcard .img-slot { overflow: hidden; }
.mcard .img-slot img { transition: transform var(--dur-slow) var(--ease-out); }
.mcard:hover .img-slot img { transform: scale(1.07); }
.mcard__name { transition: color var(--dur) var(--ease); }
.mcard:hover .mcard__name { color: var(--brand); }
.banner .img-slot { overflow: hidden; }
.banner .img-slot img { transition: transform var(--dur-slow) var(--ease-out); }
.banner:hover .img-slot img { transform: scale(1.04); }

/* ── 푸터 링크: 밑줄이 한쪽에서 그어진다 ────────────────────── */

.foot__nav a { position: relative; transition: color var(--dur) var(--ease); }
.foot__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}
.foot__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── 대시보드 모션 ─────────────────────────────────────────── */

/* 스파크라인이 한 번 그어진다 */
@keyframes deckDraw {
  from { stroke-dashoffset: 260; }
  to   { stroke-dashoffset: 0; }
}
html.js .kpi svg .line {
  stroke-dasharray: 260;
  animation: deckDraw 1.6s var(--ease-out) both;
}

/* 막대가 왼쪽에서 차오른다 */
@keyframes deckFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
html.js .bar__fill { transform-origin: left; animation: deckFill var(--dur-slow) var(--ease-out) both; }
html.js .bars .bar:nth-child(2) .bar__fill { animation-delay: 90ms; }
html.js .bars .bar:nth-child(3) .bar__fill { animation-delay: 180ms; }
html.js .bars .bar:nth-child(4) .bar__fill { animation-delay: 270ms; }

/* 새 주문이 들어온 행이 한 번 번쩍인다 */
@keyframes deckFlash {
  0%   { background: color-mix(in oklab, var(--brand) 30%, transparent); }
  100% { background: transparent; }
}
html.js .orders tbody tr:first-child { animation: deckFlash 2.4s var(--ease) 1; }

/* ── 스크롤 등장에 계단식 지연 ─────────────────────────────── */

html.js .kpis .reveal:nth-child(2) { transition-delay: 60ms; }
html.js .kpis .reveal:nth-child(3) { transition-delay: 120ms; }
html.js .kpis .reveal:nth-child(4) { transition-delay: 180ms; }
html.js .menu-grid .reveal:nth-child(2) { transition-delay: 70ms; }
html.js .menu-grid .reveal:nth-child(3) { transition-delay: 140ms; }
html.js .menu-grid .reveal:nth-child(4) { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { transition-delay: 0s !important; }
  html.js .kpi svg .line { animation: none; stroke-dasharray: none; }
  html.js .bar__fill { animation: none; }
  html.js .bars .bar:nth-child(2) .bar__fill,
  html.js .bars .bar:nth-child(3) .bar__fill,
  html.js .bars .bar:nth-child(4) .bar__fill { animation-delay: 0s; }
  html.js .orders tbody tr:first-child { animation: none; }
  .mark__back, .mark__front, .side__nav a:hover .ico,
  .kpi:hover .kpi__delta, .bar:hover .bar__fill,
  .orders tbody tr:hover .badge, .detail:hover .detail__media img,
  .mcard:hover .img-slot img, .banner:hover .img-slot img,
  .btn:hover .btn__arrow { transform: none; }
}


/* ===== 획일성 제거 — 3DM 무드 어휘 =====================================
   160작품이 레퍼런스의 밑줄 draw·카드 리프트·대문자 킥커를 그대로 복사해
   같은 사이트 리스킨으로 보였다. 반응 방식을 무드에 맞게 갈아끼운다.
   ==================================================================== */
/* 세로 카덴스를 작품마다 다르게 — 전부 같은 --section-y 를 쓰는 게 구조적 tell 이었다 */
:root { --section-y: clamp(4.35rem, 2.7058rem + 7.0586vw, 8.71rem); }

/* 3D·인터랙티브 — 원근으로 살짝 눕는다. */
.foot__nav a::after { display: none !important; }
.foot__nav a { display: inline-block; transition: transform var(--dur) var(--ease-out); }
.foot__nav a:hover { transform: translateY(-2px); }
.kpi:hover, .mcard:hover, .side__nav a:hover .ico, .orders tbody tr:hover .badge { transform: none; }
.kpi:hover, .mcard:hover, .side__nav a:hover .ico, .orders tbody tr:hover .badge { transform: perspective(900px) rotateX(3deg) translateY(-4px); }

/* webit-touch */
@media (max-width: 767px) {
  .nav__inner { flex-wrap: wrap; overflow: visible; }
  .hero__actions, .hero__acts { flex-wrap: wrap; }
}
html.tier-premium .img-slot { transform-style: preserve-3d; }
html.tier-premium .hero__title { text-wrap: balance; }