/* 공구콕 — 모바일(390px) 우선, 태블릿(768~)·데스크톱(1024~, 최대 1200px)으로 넓힌다.
   크림 배경 + 흰 카드 + 코랄 포인트 하나. 코랄은 "오늘 마감"과 구매·등록 버튼에만 쓴다. */
:root {
  --bg: #FBF7F2;
  --bg-deep: #F4EDE4;
  --surface: #FFFFFF;
  --ink: #3A332E;
  --ink-2: #6E655E;
  --ink-3: #A0968E;
  --line: #EEE6DC;
  --coral: #F4623F;
  --coral-soft: #FFF0EB;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(58, 51, 46, 0.04);
  --shadow-lift: 0 6px 16px rgba(58, 51, 46, 0.08);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --header-h: 56px;
  --header-visible: 48px;
  --gutter: 16px;
  --section-gap: 32px;
  --head-gap: 12px;

  /* 관리자 화면용 별칭 */
  --paper: var(--surface);
  --paper-2: var(--bg-deep);
  --rule: var(--line);
  --accent: var(--ink);
  --hot: var(--coral);
  --serif: var(--sans);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-visible) + 8px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.text-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.app { min-height: 100vh; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
main.wrap.narrow { max-width: 760px; }
main.wrap.form-wide { max-width: 1080px; }

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn--outline { border: 1.5px solid var(--coral); color: var(--coral); background: var(--surface); }
.btn--solid { height: 44px; padding: 0 18px; border: 0; background: var(--ink); color: #fff; font-size: 14px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer;
}

/* 헤더: 스크롤하면 위쪽 8px가 가려지며 얇아진 채 고정 */
.site-header {
  position: sticky; top: calc(var(--header-visible) - var(--header-h)); z-index: 30;
  height: var(--header-h); background: var(--bg);
}
.site-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line);
  opacity: 0; transition: opacity 0.25s var(--ease);
}
.site-header.is-scrolled::after { opacity: 1; }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; height: 100%;
  transition: transform 0.25s var(--ease);
}
.site-header.is-scrolled .site-header__inner { transform: translateY(4px); }
.logo { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.logo__svg { display: block; height: 24px; width: auto; }
.logo--small .logo__svg { height: 18px; }
.site-header__actions { display: flex; align-items: center; gap: 2px; }

.search-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  padding: 2px 0 10px; background: var(--bg);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.search-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.search {
  display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-3);
}
.search__input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--ink); -webkit-appearance: none; appearance: none;
}
.search__input:focus { outline: none; }
.search:focus-within { border-color: var(--ink); }

/* 푸터 */
.site-footer { margin-top: 40px; padding: 24px 0 calc(32px + env(safe-area-inset-bottom)); background: var(--bg-deep); color: var(--ink-2); font-size: 12.5px; }
.site-footer p { margin: 0 0 8px; }
.site-footer__brand { margin-bottom: 10px !important; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; }
.site-footer__nav a { color: var(--ink); text-decoration: none; font-weight: 600; }

/* 섹션 공통: 섹션 사이 32px, 제목과 내용 사이 12px */
.section { margin-top: var(--section-gap); }
.section__head { margin-bottom: var(--head-gap); }
.section__title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.3; }
.section__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }
.empty { margin: 0; padding: 32px 0; text-align: center; color: var(--ink-3); font-size: 13.5px; }
.empty--soft { padding: 20px 16px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); }

/* 히어로 */
.hero { padding-top: 12px; }
.hero__date { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.hero__title { margin: 4px 0 12px; font-size: 22px; font-weight: 800; line-height: 1.32; letter-spacing: -0.04em; }
.hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.stat {
  display: flex; flex-direction: column; gap: 1px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.stat strong { font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 11.5px; color: var(--ink-2); line-height: 1.3; }
.stat--hot strong { color: var(--coral); }

/* 공구 카드 */
.card { list-style: none; min-width: 0; }
.card__link {
  position: relative; display: block; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: transform 0.25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.card__link::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow-lift);
  opacity: 0; transition: opacity 0.25s var(--ease); pointer-events: none;
}
.card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-deep); }
.card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s var(--ease); }
@media (hover: hover) {
  .card__link:hover { transform: translateY(-2px); }
  .card__link:hover::after { opacity: 1; }
  .card__link:hover .card__img { transform: scale(1.03); }
}
.card__link:active { transform: translateY(-1px); }
.card__link:active .card__img { transform: scale(1.03); }
.card__body { padding: 12px; }
.card__title {
  margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__who { margin: 4px 0 0; font-size: 12px; line-height: 1.3; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; margin-top: 8px; }
.card__price { margin: 0; font-size: 12px; font-weight: 700; white-space: nowrap; }
.card__price strong { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* 이미지 아래 전체 폭 3px: 마감까지 남은 시간 */
.card__progress { display: block; height: 3px; background: var(--line); }
.card__progress span { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; }

/* 기본 일러스트: 파스텔 배경 위 가운데 60%, 잘리지 않게 */
img.is-fallback { padding: 20%; object-fit: contain; background: var(--fb, var(--bg-deep)); }

/* 마감 배지 (가격 오른쪽) */
.due {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 6px;
  font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tag--hot { background: var(--coral); color: #fff; }
.tag--dark { background: var(--ink); color: #fff; }
.tag--light { background: var(--bg-deep); color: var(--ink-2); }
.tag--muted { background: var(--bg-deep); color: var(--ink-3); }

/* 원본 확인 배지 (이미지 왼쪽 아래 / 개별 페이지 인라인) */
.verified {
  position: absolute; left: 8px; bottom: 8px;
  display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px 0 5px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: 10.5px; font-weight: 700; line-height: 1; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--line);
}
.verified--inline { position: static; flex: none; height: 22px; font-size: 11.5px; background: var(--surface); }
.dp__verified { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); }
.preview__note { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-3); }

/* 이미지 위 배지·카운트다운 */
.tag, .countdown {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.countdown { background: var(--ink); color: #fff; transition: background-color 0.3s var(--ease); }
.countdown.is-urgent { background: var(--coral); }
.countdown__label { font-weight: 600; opacity: 0.85; }
.countdown__time { display: inline-flex; overflow: hidden; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.countdown__time span { display: inline-block; }
.countdown__time .tick { animation: tick 0.22s var(--ease); }
@keyframes tick { from { transform: translateY(-55%); opacity: 0; } }

/* 가로 스크롤 줄: 카드 약 42% → 2.3장 보임 */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 43%; gap: 10px; align-items: start;
  margin: 0 calc(var(--gutter) * -1); padding: 1px var(--gutter) 4px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > .card { scroll-snap-align: start; }
/* 가로 스크롤 줄은 카드 높이를 맞추고 가격 줄을 아래에 붙인다 (상품명 1줄·2줄이 섞여도 가격 위치가 같다) */
.rail { align-items: stretch; }
.rail .card__link { display: flex; flex-direction: column; height: 100%; }
.rail .card__body { display: flex; flex-direction: column; flex: 1; }
.rail .card__row { margin-top: auto; padding-top: 8px; }

/* 이번 주 공구 달력 */
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-bottom: 10px; }
.day {
  display: flex; flex-direction: column; align-items: center; padding: 6px 0 5px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  transition: transform 0.2s var(--ease);
}
.day:active { transform: scale(0.96); }
.day__week { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.day__date { font-size: 16px; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; }
.day__count { font-size: 10.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.day.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.day.is-active .day__week, .day.is-active .day__count { color: rgba(255, 255, 255, 0.8); }
.js .day-panel:not(.is-active) { display: none; }
.day-panel { animation: fade-up 0.3s var(--ease); }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }

/* 인기 공구 순위: 한 줄 64px, 썸네일 48px */
.rank { margin: 0; padding: 0 12px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.rank__item + .rank__item { border-top: 1px solid var(--line); }
.rank__link { display: grid; grid-template-columns: 18px 48px 1fr; align-items: center; gap: 10px; height: 64px; text-decoration: none; }
.rank__no { font-size: 16px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.rank__thumb { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--bg-deep); }
.rank__img { width: 100%; height: 100%; object-fit: cover; }
.rank__img.is-fallback { padding: 10%; }
.rank__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rank__title { font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__meta { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__meta em { font-style: normal; font-weight: 700; color: var(--coral); }

/* 카테고리: 7개 + 전체 = 4열 2줄, 아이콘 박스 56px */
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cat {
  display: flex; flex-direction: column; align-items: center; padding: 10px 4px 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  text-decoration: none; transition: transform 0.2s var(--ease);
}
.cat:active { transform: scale(0.97); }
@media (hover: hover) { .cat:hover { transform: translateY(-2px); } }
.cat__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 14px; }
.cat__icon img { width: 70%; height: auto; }
.cat__icon--all { background: var(--bg-deep); }
.cat__label { font-size: 12px; font-weight: 700; line-height: 1.3; text-align: center; }
.cat__count { font-size: 11px; color: var(--ink-3); }

/* 전체 공구: 상단 고정 필터 바 */
.filterbar {
  position: sticky; top: var(--header-visible); z-index: 20;
  margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); background: var(--bg);
}
.filterbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.filterbar__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tabs { position: relative; display: flex; border-bottom: 1px solid var(--line); }
.filterbar .tabs { border-bottom: 0; }
.tab {
  display: inline-flex; align-items: baseline; gap: 3px; padding: 10px 8px 9px;
  border: 0; background: none; font-size: 14.5px; font-weight: 700; color: var(--ink-3);
  text-decoration: none; cursor: pointer; transition: color 0.2s var(--ease);
}
.tab:first-child { padding-left: 0; }
.tab.is-active { color: var(--ink); }
.tab__count { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tabs:not(.has-indicator) .tab.is-active,
.tabs.has-indicator:not(.is-ready) .tab.is-active { box-shadow: inset 0 -2px 0 var(--ink); }
.tabs__indicator {
  position: absolute; left: 0; bottom: 0; width: 100px; height: 2px; background: var(--ink);
  transform-origin: 0 50%; opacity: 0; transition: transform 0.3s var(--ease);
}
.tabs.is-ready .tabs__indicator { opacity: 1; }
.sort select {
  height: 30px; padding: 0 26px 0 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%236E655E' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); -webkit-appearance: none; appearance: none; cursor: pointer;
}
.chips {
  display: flex; gap: 6px; overflow-x: auto; padding: 4px var(--gutter) 10px;
  margin: 0 calc(var(--gutter) * -1); scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.result-note { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-2); }
.result-note button { margin-left: 6px; padding: 0; border: 0; background: none; font-size: 12.5px; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* 2열 그리드, 간격 12px. 카드는 내용만큼만 높이를 차지한다 */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; margin: 12px 0 0; padding: 0; }
.js .grid > [data-initial-hidden] { display: none; }
.grid > .card { transition: opacity 0.15s var(--ease); }
.grid.is-leaving > .card { opacity: 0; }
/* 마감 시각이 지나 목록에서 빠지는 카드 */
.card.is-expiring, .rank__item.is-expiring { opacity: 0; transform: scale(0.96); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.grid > .card.is-in { animation: fade-up 0.3s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }

/* 인플루언서 안내 배너 */
.banner {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  margin-top: var(--section-gap); padding: 18px 16px; background: var(--bg-deep); border-radius: var(--radius-lg);
}
.banner__title { margin: 0 0 4px; font-size: 17px; font-weight: 800; letter-spacing: -0.03em; }
.banner p { margin: 0; font-size: 13px; color: var(--ink-2); }

/* 토스트 */
.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 50;
  max-width: calc(100vw - 32px);
  padding: 11px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.toast.is-shown { transform: translate(-50%, 0); opacity: 1; }
@media (max-width: 767px) { body:has(.buybar) .toast { bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* 스크롤 등장 */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* 개별 공구 페이지 */
main.wrap.detail { padding-bottom: 80px; }
.dp__ended-notice { margin: 8px 0 4px; padding: 10px 12px; border-radius: var(--radius); background: var(--bg-deep); font-size: 13px; color: var(--ink-2); }
.dp__ended-notice strong { color: var(--ink); }
.dp__crumb { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: 12.5px; color: var(--ink-3); }
.dp__crumb a { color: var(--ink-2); text-decoration: none; }
.dp__media { position: relative; margin: 0 calc(var(--gutter) * -1); aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-deep); }
.dp__img { width: 100%; height: 100%; object-fit: cover; }
.dp__media.is-ended .dp__img { opacity: 0.55; }
.dp__ended {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 7px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 700;
}
.dp__summary { padding-top: 14px; }
.dp__status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tag--inline, .countdown--inline { position: static; }
.countdown--inline { height: 24px; font-size: 12px; }
.dp__note { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.dp__title { margin: 8px 0 0; font-size: 20px; font-weight: 800; line-height: 1.38; letter-spacing: -0.03em; }
.dp__who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: 6px 0 0; font-size: 13.5px; }
.dp__who a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.dp__who .dp__source { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.dp__price { margin: 10px 0 0; font-size: 15px; font-weight: 700; }
.dp__price strong { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dp__info { margin: 12px 0 0; padding: 2px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.dp__info > div { display: grid; grid-template-columns: 72px 1fr; gap: 8px; padding: 10px 0; font-size: 13.5px; }
.dp__info > div + div { border-top: 1px solid var(--line); }
.dp__info dt { color: var(--ink-3); }
.dp__info dd { margin: 0; font-weight: 600; }
.dp__buy { display: none; }

.buy {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 50px;
  border-radius: var(--radius); background: var(--coral); color: #fff;
  font-size: 16px; font-weight: 800; text-decoration: none; letter-spacing: -0.02em;
  transition: transform 0.2s var(--ease);
}
.buy:active { transform: scale(0.98); }
.buy--ended { background: var(--bg-deep); color: var(--ink-3); }
.buy--soon { background: var(--ink); font-size: 15px; }

.share { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.share__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  font-size: 13.5px; font-weight: 700; color: var(--ink); cursor: pointer; transition: transform 0.2s var(--ease);
}
.share__btn:active { transform: scale(0.97); }

.grid--four { margin-top: 0; }
.dp__notice { margin-top: var(--section-gap); padding: 14px 16px; background: var(--bg-deep); border-radius: var(--radius); }
.dp__notice h2 { margin: 0 0 6px; font-size: 14px; font-weight: 800; }
.dp__notice ul { margin: 0; padding-left: 16px; font-size: 12.5px; color: var(--ink-2); }
.dp__notice li + li { margin-top: 3px; }

/* 모바일: 하단 고정 구매 바 */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; align-items: center; gap: 12px;
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(58, 51, 46, 0.05);
}
.buybar__price { margin: 0; flex: none; font-size: 12.5px; font-weight: 700; }
.buybar__price strong { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.buybar .buy { flex: 1; height: 48px; }

.notice-page { padding: 56px 0; text-align: center; }
.notice-page h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.notice-page p { color: var(--ink-2); }
.notice-page__links { display: flex; justify-content: center; gap: 20px; }

/* 등록 폼 */
.page-title { margin: 12px 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -0.04em; }
.page-lead, .submit-page__lead { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.promise { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; padding: 0; list-style: none; }
.promise li { padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.promise strong { color: var(--ink); }
.form-alert { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--coral-soft); color: #C2401F; font-size: 13.5px; font-weight: 700; }

.submit-page__layout { display: flex; flex-direction: column; gap: 20px; }
.deal-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.step {
  margin: 0; padding: 14px 14px 16px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.step.has-error { border-color: #F3B6A6; }
.step__head { display: flex; align-items: center; gap: 8px; padding: 0; margin-bottom: 12px; float: left; width: 100%; }
.step__no {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800;
}
.step__title { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
.step__sub { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-3); }
.step__body { display: flex; flex-direction: column; gap: 12px; clear: both; }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field__label { font-size: 13px; font-weight: 700; }
.field__label em { margin-left: 4px; font-style: normal; font-weight: 600; color: var(--ink-3); }
.field__hint { margin: 0; font-size: 11.5px; color: var(--ink-3); }
.field__hint--block { margin-top: -4px; }
.field__error { margin: 0; font-size: 12.5px; color: #C2401F; font-weight: 600; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.deal-form input[type="text"], .deal-form input[type="url"], .deal-form input[type="date"], .deal-form input[type="time"], .deal-form select,
.afield input, .afield select {
  width: 100%; min-width: 0; height: 44px; padding: 0 12px;
  border: 1px solid #E3DAD0; border-radius: 10px; background: var(--surface);
  font: inherit; font-size: 16px; color: var(--ink);
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.2s var(--ease);
}
.deal-form select, .afield select {
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%236E655E' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;
  padding-right: 30px;
}
.deal-form input:focus, .deal-form select:focus, .afield input:focus, .afield select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(58, 51, 46, 0.08); }
.deal-form [aria-invalid="true"], .afield [aria-invalid="true"] { border-color: var(--coral); }
.input-prefix, .input-suffix { position: relative; display: flex; align-items: center; }
.input-prefix span, .input-suffix span { position: absolute; color: var(--ink-3); pointer-events: none; font-weight: 600; }
.input-prefix span { left: 12px; }
.input-prefix input { padding-left: 28px !important; }
.input-suffix span { right: 12px; }
.input-suffix input { padding-right: 30px !important; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent { padding: 12px; border-radius: 10px; background: var(--bg); }
.consent__title { margin: 0 0 6px; font-size: 13px; font-weight: 800; }
.consent__table { margin: 0; font-size: 12.5px; }
.consent__table > div { display: grid; grid-template-columns: 64px 1fr; gap: 6px; padding: 2px 0; }
.consent__table dt { color: var(--ink-3); }
.consent__table dd { margin: 0; }
.consent__note { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-2); }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.submit {
  height: 50px; border: 0; border-radius: var(--radius); background: var(--coral); color: #fff;
  font-size: 16px; font-weight: 800; cursor: pointer; transition: transform 0.2s var(--ease);
}
.submit:active { transform: scale(0.98); }
.cf-turnstile { min-height: 65px; }

.preview__label { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.card--preview { max-width: 50%; }
.card--preview .card__link { cursor: default; }

/* ───────── 태블릿 (768px~) ───────── */
@media (min-width: 768px) {
  :root { --gutter: 24px; --section-gap: 40px; --header-h: 64px; --header-visible: 56px; }
  body { font-size: 15px; }
  .logo__svg { height: 26px; }
  .btn { height: 36px; padding: 0 14px; font-size: 14px; }
  .hero { padding-top: 24px; }
  .hero__title { font-size: 30px; }
  .stat { padding: 14px 18px; }
  .stat strong { font-size: 32px; }
  .stat span { font-size: 13px; }
  .section__title { font-size: 20px; }
  .rail { grid-auto-columns: 28%; gap: 14px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; }
  .cats { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .day { padding: 10px 0 8px; }
  .banner { flex-direction: row; align-items: center; justify-content: space-between; padding: 28px 32px; }

  main.wrap.detail { padding-bottom: 0; }
  .buybar { display: none; }
  .dp__buy { display: block; margin-top: 14px; }
  .dp__media { margin: 0; border-radius: var(--radius-lg); border: 1px solid var(--line); }
  .grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .step { padding: 20px 22px 22px; }
  .card--preview { max-width: 240px; }
}

/* ───────── 개별 페이지·등록 폼 2열 (900px~) ───────── */
@media (min-width: 900px) {
  .dp__layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: 'media side' 'more side'; column-gap: 40px; }
  .dp__media { grid-area: media; }
  .dp__side { grid-area: side; align-self: stretch; }
  .dp__more { grid-area: more; min-width: 0; }
  .dp__summary {
    position: sticky; top: calc(var(--header-visible) + 16px);
    padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  }
  .dp__title { font-size: 24px; }
  .dp__price strong { font-size: 32px; }
  .dp__info { background: var(--bg); border-color: transparent; }
  .dp__more .rail { margin: 0; padding-left: 0; padding-right: 0; scroll-padding: 0; grid-auto-columns: calc((100% - 2 * 14px) / 3.3); }
  .dp__more .grid--four { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .submit-page__layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; }
  .preview { position: sticky; top: calc(var(--header-visible) + 16px); }
  .card--preview { max-width: none; }
}

/* ───────── 데스크톱 (1024px~, 최대 1200px) ───────── */
@media (min-width: 1024px) {
  :root { --gutter: 32px; --section-gap: 48px; }
  .hero { display: grid; grid-template-columns: 1fr 1.15fr; align-items: end; gap: 40px; padding-top: 40px; }
  .hero__date { grid-column: 1 / -1; margin-bottom: -28px; }
  .hero__title { margin: 0; font-size: 38px; }
  .stat strong { font-size: 40px; }
  .rail { grid-auto-columns: calc((100% - 4 * 16px) / 4.6); gap: 16px; margin: 0; padding-left: 0; padding-right: 0; scroll-padding: 0; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
  .split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: start; }
  .split .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filterbar { margin: 0; padding-left: 0; padding-right: 0; }
  .chips { margin: 0; padding-left: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}


/* 개인정보처리방침 */
.policy { padding-bottom: 8px; }
.policy h2 { margin: 32px 0 10px; font-size: 17px; }
.policy p, .policy li { font-size: 14px; color: var(--ink-2); }
.policy ul, .policy ol { padding-left: 20px; }
.policy li + li { margin-top: 4px; }
.policy table { width: 100%; border-collapse: collapse; font-size: 13px; }
.policy th, .policy td { padding: 8px; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
.policy th { width: 30%; background: var(--paper-2); font-weight: 600; color: var(--ink); }
.policy__date { margin-top: 32px; color: var(--ink-3) !important; }

/* 관리자: 한 줄 카드 목록 */
body.admin { font-size: 14px; }
.admin .wrap { max-width: 1040px; }
.ad-brand { display: flex; align-items: center; gap: 8px; }
.ad-brand__tag { padding: 3px 8px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 700; }
.ad { padding-bottom: 48px; }
.ad__today { margin: 12px 0 8px; font-size: 12.5px; color: var(--ink-3); }
.ad-retention {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--coral-soft); font-size: 13px; color: var(--ink-2);
}
.ad-retention p { margin: 0; }
.ad-toolbar { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.ad-search {
  flex: 1; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-3);
}
.ad-search:focus-within { border-color: var(--ink); }
.ad-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); outline: none; }
.ad-toolbar .sort select { height: 38px; }
.ad__flash { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600; }
.ad__flash.is-error { background: var(--coral); }

.ad-list { display: flex; flex-direction: column; gap: 8px; }
.ad-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.ad-row.is-open { border-color: var(--ink-3); }
.ad-row__main { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px; }
.ad-thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--bg-deep); }
.ad-thumb.is-fallback { padding: 14%; }
.ad-info { min-width: 0; }
.ad-info p { margin: 0; }
.ad-info__top { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.ad-info__no { margin-left: auto; font-variant-numeric: tabular-nums; }
.ad-info__title { margin-top: 4px !important; font-size: 15px; font-weight: 700; line-height: 1.35; }
.ad-info__meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px !important; font-size: 13px; color: var(--ink-2); }
.ad-info__meta a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.ad-info__meta strong { color: var(--ink); }
.ad-info__links { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 6px !important; font-size: 12.5px; }
.ad-info__links a { color: var(--ink-3); }
.ad-info__links a.is-key { color: var(--ink); font-weight: 700; }
.ad-info__warn { color: var(--coral); font-weight: 700; }

.ad-side { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ad-clicks { display: flex; align-items: baseline; gap: 3px; margin: 0; }
.ad-clicks strong { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ad-clicks span { font-size: 12px; color: var(--ink-3); }
.ad-reg { margin: 0; font-size: 12px; color: var(--ink-3); }
.ad-actions { display: flex; gap: 6px; margin-left: auto; }
.ad-btn {
  height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  font-size: 13.5px; font-weight: 700; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.ad-btn--primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.ad-btn--danger { color: var(--coral); border-color: #F6C9BD; }
.ad-btn--ghost { border-color: transparent; background: none; color: var(--ink-3); }
.ad-btn.is-on { background: var(--bg-deep); }
.ad-btn:disabled { opacity: 0.5; cursor: default; }

.ad-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; border-top: 1px dashed var(--line); background: var(--bg); border-radius: 0 0 var(--radius) var(--radius); }
.afield { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.afield span { font-size: 12px; color: var(--ink-3); }
.afield input, .afield select { height: 40px; font-size: 15px; }
.afield--wide, .ad-edit__errors, .ad-edit__actions { grid-column: 1 / -1; }
.ad-edit__errors { margin: 0; color: #C2401F; font-size: 13px; font-weight: 600; }
.ad-edit__actions { display: flex; gap: 6px; }

@media (min-width: 768px) {
  /* 넓은 화면: 썸네일 | 정보 | 클릭·버튼 한 줄 */
  .ad-row__main { grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 16px; }
  .ad-thumb { width: 72px; height: 72px; }
  .ad-side { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 6px; padding: 0; border: 0; }
  .ad-actions { margin-left: 0; }
  .ad-edit { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px 16px; }
  .afield--wide { grid-column: 1 / -1; }
}