/* ============================================================
   리프트 — 플레이스·쇼핑 셀프 마케팅 플랫폼
   공통 토큰 · 리셋 · 기본 컴포넌트
   레이아웃 아이디어: 화이트 캔버스 + 헤어라인 보더, 모든 강조는 타이포 무게와
   블루 한 곳에만. 애니메이션은 transform/opacity만 사용.
   ============================================================ */

@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/PretendardVariable.woff2") format("woff2-variations");
}

:root {
  color-scheme: light;
  /* 색 토큰 */
  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --bg-sunken: #fafafa;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #9a9aa0;
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.16);
  --accent: #0a6cdf;
  --accent-deep: #0857b4;
  --accent-soft: #eef4fd;
  --good: #2f8a5d;
  --good-soft: #e9f6ef;
  --warn: #b25e00;
  --warn-soft: #fdf3e4;
  --bad: #c05252;
  --bad-soft: #fceeee;
  /* 차트 (dataviz 레퍼런스 팔레트) */
  --chart-1: #2a78d6;
  --chart-grid: #e7e6e1;
  --chart-axis: #c3c2b7;
  --chart-muted: #898781;
  /* 모양 */
  --radius-s: 8px;
  --radius: 12px;
  --radius-l: 18px;
  --shadow-float: 0 20px 60px rgba(0, 0, 0, 0.1), 0 4px 14px rgba(0, 0, 0, 0.05);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.08);
  /* 글꼴 */
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", sans-serif;
}

/* ---------- 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -0.02em; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::placeholder { color: var(--ink-3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 22px;
  border-radius: 10px; /* 둥근 네모 버튼 */
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-align: center;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--ink); background: var(--bg); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-soft { background: var(--bg-soft); color: var(--ink); }
.btn-soft:hover { background: #ececef; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 52px; padding: 0 30px; font-size: 16px; }
.btn[disabled] { opacity: 0.4; cursor: default; }

/* 텍스트 링크 (애플식 화살표) */
.tlink { color: var(--accent); font-weight: 500; }
.tlink::after { content: " ›"; }
.tlink:hover { text-decoration: underline; }

/* ---------- 폼 ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field .req { color: var(--bad); }
.input, .select, .textarea {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--bg);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.textarea { height: auto; padding: 10px 12px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(10, 108, 223, 0.15);
}
.select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.hint { font-size: 12px; color: var(--ink-3); }
.hint.error { color: var(--bad); }

/* ---------- 체크박스 (공용 커스텀) ---------- */
input.ckb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px; margin: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--bg) center / 11px no-repeat;
  cursor: pointer;
  vertical-align: middle;
  flex: none;
  transition: background-color 0.18s, border-color 0.18s, transform 0.15s cubic-bezier(0.2, 0.7, 0.3, 1);
}
input.ckb:hover { border-color: var(--ink-3); }
input.ckb:active { transform: scale(0.88); }
input.ckb:checked {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.5 2.5 2.5 4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- 상태 표시 (색상 텍스트만, 마커 없음) ---------- */
.chip {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.chip-run  { color: var(--accent); }
.chip-wait { color: var(--ink-2); font-weight: 500; }
.chip-end  { color: var(--ink-3); font-weight: 500; }
.chip-stop { color: var(--bad); }

/* ---------- 카드 ---------- */
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

/* ---------- 테이블 ---------- */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.tbl th, .tbl td { vertical-align: middle; }
.tbl td {
  padding: 14px 16px;
  border-bottom: 1px dashed #dcdce1; /* 점선 그리드 */
  white-space: nowrap;
}
.tbl tbody tr { transition: background-color 0.12s; }
.tbl tbody tr:hover { background: var(--bg-sunken); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .r { text-align: right; }
/* 내부 세로 그리드가 필요한 테이블용 변형 */
.tbl-grid th + th, .tbl-grid td + td { border-left: 1px dashed #e4e4e9; }

/* ---------- 스크롤 리빌 (JS가 .js를 달았을 때만 숨김 → no-JS에서도 완전함) ---------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.65, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.65, 0.3, 1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
html.js .reveal.in { opacity: 1; transform: none; will-change: auto; }

/* ---------- 상단 이동 FAB ---------- */
.fab-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 60;
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 0.35s, transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
              background-color 0.2s, color 0.2s, border-color 0.2s;
}
.fab-top.show { opacity: 1; transform: none; pointer-events: auto; }
.fab-top:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.fab-top:active { transform: scale(0.94); }
@media (max-width: 860px) { .fab-top { right: 16px; bottom: 16px; } }

/* ---------- 먹번짐 페이지 전환 ---------- */
.ink { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.ink-blob {
  position: absolute; left: 50%; top: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  background: #0e0f12;
  border-radius: 44% 56% 48% 52% / 57% 44% 56% 43%;
  transform: scale(0);
  filter: blur(5px);
  will-change: transform;
}
.ink .b2 { background: #191c22; border-radius: 58% 42% 55% 45% / 42% 58% 44% 56%; }
.ink.out { pointer-events: auto; }
.ink.out .ink-blob { transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1); transform: scale(var(--s, 60)) rotate(16deg); }
.ink.out .b2 { transition-duration: 0.78s; transition-delay: 0.04s; }
.ink-veil { position: absolute; inset: 0; background: #0e0f12; opacity: 0; }
.ink.cover { pointer-events: auto; }
.ink.cover .ink-veil { opacity: 1; }
.ink.enter .ink-veil { transition: opacity 0.55s ease 0.1s; opacity: 0; }
.ink.enter { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ink { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .btn:active { transition: none; transform: none; }
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}