/* ═══════════════════════════════════════════════════════════════════════
   계절표 (GYEJEOL PYO) — 꽃 작업실
   위쪽 절반은 공통 뼈대(kit.css) 그대로. 아래쪽이 이 벌의 생김새다.
   ─────────────────────────────────────────────────────────────────────
   이 벌의 축: 「꽃 입고 일정표가 홈인 예약형」.
   그래서 카드·그림자·둥근 모서리를 쓰지 않고, 장부처럼 가로선과
   왼쪽 모노 번호 칸으로 정렬축을 고정했다. 사진은 「무엇이 들어왔는가」를
   보여줄 때만 나온다(홈 1장 · 입고표 1+4장). 나머지 면은 고르기와 시간만 다룬다.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 공통 뼈대 ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

img, video { max-width: 100%; height: auto; }
img { -webkit-user-drag: none; user-select: none; }

.frame { display: block; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .75rem 1rem; background: Canvas; color: CanvasText;
}
.skip-link:focus { left: 0; }

@media (max-width: 767px) {
  .site-header a, .site-header button,
  .drawer a, .drawer button,
  .dots button, .pager button, .tab {
    min-width: 44px; min-height: 44px;
  }
}

.scroll-x { overflow-x: auto; position: relative; -webkit-overflow-scrolling: touch; }
.clip { overflow: clip; }

.acc-item .acc-panel { display: block; }
.js .acc-item .acc-panel { display: none; }
.js .acc-item.open .acc-panel { display: block; }

.js [role="tabpanel"][hidden] { display: none; }
[role="tabpanel"][hidden] { display: block; }

.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.in { opacity: 1; transform: none; }

html:not(.js) .js-only { display: none !important; }

:where([hidden]):not([role="tabpanel"]) { display: none !important; }

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

.menu-btn { display: none; }
@media (max-width: 767px) { .menu-btn { display: inline-flex; } }

.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px);
  transform: translateX(100%); transition: transform .28s ease;
  z-index: 60; overflow-y: auto;
  visibility: hidden;
}
.drawer.open { transform: none; visibility: visible; }

.scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgb(38 50 41 / .5);
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.scrim.open { opacity: 1; pointer-events: auto; }

@media (min-width: 768px) { .drawer, .scrim { display: none; } }

.toast {
  position: fixed; left: 50%; bottom: 24px; translate: -50% 0;
  z-index: 80; pointer-events: none;
  opacity: 0; transition: opacity .25s ease, translate .25s ease;
}
.toast.show { opacity: 1; translate: -50% -6px; }

.agree input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.agree input:focus-visible + label .box { outline: 2px solid currentColor; outline-offset: 2px; }

.spinner {
  display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: kit-spin .7s linear infinite;
}
@keyframes kit-spin { to { rotate: 360deg; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.section { padding-block: calc(var(--section, 96px) / 2); }
.section-lead { padding-top: var(--section, 96px); }
.section-last { padding-bottom: var(--section, 96px); }

/* ═══════════════════════════════════════════════════════════════════════
   여기부터 계절표의 생김새
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 토큰 ────────────────────────────────────────────────────────────
   색은 00-디자인보드.png 에서 픽셀로 읽은 값이다.
   Primary #F04E3E · Ground #EDE6D7 · Ink #263229 이 정본이고,
   괘선 #BCB9AB · 연괘선 #D4D0C1 은 같은 그림에서 함께 뽑았다.
   #898C80 은 바탕 대비 2.6:1 이라 글자에 쓰지 않고 괘선에만 쓴다. */
:root {
  --ground: #EDE6D7;
  --ink: #263229;
  --primary: #F04E3E;
  --primary-deep: #C93A29;   /* 작은 흰 글자가 얹히는 자리에만 (대비 5.0:1) */
  --rule: #BCB9AB;
  --rule-soft: #D4D0C1;
  --muted: #5B6257;          /* 바탕 대비 5.0:1 — 보조 글자의 하한 */
  --on-primary: #FFFFFF;

  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(1.9rem, 7.6vw, 3.55rem);
  --fs-h2: clamp(1.45rem, 2.6vw, 2.05rem);
  --fs-h3: 1.0625rem;
  --fs-meta: .6875rem;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px;

  --section: 88px;
  --wrap: 1240px;
  --pad: clamp(20px, 4.4vw, 56px);
  --header-h: 62px;

  --z-header: 40; --z-scrim: 50; --z-drawer: 60; --z-toast: 80;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.028em; line-height: 1.16; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
a { color: inherit; }

/* 시안의 줄바꿈은 폭에 따라 달라진다 — 넓은 화면에서만 한 줄 더 끊는다. */
.br-lg { display: none; }
@media (min-width: 1024px) { .br-lg { display: inline; } }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }

/* 머리가 붙박이라 앵커로 뛰면 제목이 그 밑에 깔린다 — 미리 자리를 비워 둔다. */
main [id], .gp-done { scroll-margin-top: calc(var(--header-h) + 20px); }

/* 모노 메타 — 번호·시각·라벨. 이 벌의 정렬축을 만드는 활자다. */
.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
.meta-ink { color: var(--ink); }
.num {
  font-family: var(--font-mono);
  font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.tnum { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ── 헤더 ────────────────────────────────────────────────────────────
   가로선 한 줄만 남긴 장부식 머리. 그림자·반투명 흐림 없음. */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}
.site-header.is-stuck { border-bottom-color: var(--ink); }
.header-inner {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding-inline: var(--pad);
  min-height: var(--header-h);
  display: flex; align-items: center; gap: var(--s5);
}
.brand {
  font-weight: 800; font-size: 1.18rem; letter-spacing: -.03em;
  text-decoration: none; white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: clamp(10px, 1.5vw, 22px); margin-left: auto; }
.nav a {
  font-size: .8125rem; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; color: var(--muted);
  padding: 6px 0; white-space: nowrap;
  border-bottom: 1.5px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--primary); }
.header-cta {
  font-size: .8125rem; font-weight: 700; text-decoration: none;
  padding: 9px 16px; border: 1.5px solid var(--ink);
  white-space: nowrap;
}
.header-cta:hover { background: var(--ink); color: var(--ground); }

.menu-btn {
  margin-left: auto;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--rule); color: inherit;
  width: 44px; height: 44px; cursor: pointer; padding: 0;
}
.menu-bar, .menu-bar::before, .menu-bar::after {
  display: block; width: 18px; height: 1.5px; background: currentColor; content: "";
}
.menu-bar { position: relative; }
.menu-bar::before { position: absolute; top: -6px; }
.menu-bar::after { position: absolute; top: 6px; }

/* ── 서랍 ───────────────────────────────────────────────────────────── */
.drawer {
  background: var(--ground);
  border-left: 1px solid var(--ink);
  padding: var(--s4) var(--s5) var(--s7);
}
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--s4); border-bottom: 1px solid var(--rule);
}
.drawer-close {
  background: none; border: 1px solid var(--rule); color: inherit;
  font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
  padding: 8px 14px;
}
.drawer-nav { display: block; margin-top: var(--s2); }
.drawer-nav a {
  display: flex; align-items: center;
  padding: 14px 0; text-decoration: none;
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em;
  border-bottom: 1px solid var(--rule-soft);
}
.drawer-nav a[aria-current="page"] { color: var(--primary-deep); }
.drawer-cta {
  display: flex; align-items: center; justify-content: center;
  margin-top: var(--s5); padding: 15px 18px;
  background: var(--primary); color: var(--on-primary);
  font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em;
  text-decoration: none;
}
.drawer-tel { margin-top: var(--s4); }
.drawer-tel a {
  display: inline-block; padding: 8px 0;
  font-family: var(--font-mono); font-size: .875rem; font-weight: 600;
  text-decoration: none; border-bottom: 1.5px solid var(--rule);
}

/* ── 단추 ────────────────────────────────────────────────────────────
   빨강 solid 는 「주요 행동」 한 자리에만 쓴다(디자인보드 03/ACTION).
   그 밖의 행동은 잉크 테두리나 밑줄 + ↗ 로 무게를 낮춘다. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-weight: 700; letter-spacing: -.02em;
  text-decoration: none; cursor: pointer; border: none;
  min-height: 48px; padding: 12px 22px;
}
.btn-main {
  background: var(--primary); color: var(--on-primary);
  font-size: 1.1875rem; font-weight: 800;
  min-height: 56px; width: 100%;
  transition: background .18s ease;
}
.btn-main:hover { background: var(--primary-deep); }
.btn-main[aria-disabled="true"] { background: var(--muted); cursor: progress; }
.btn-line {
  background: none; color: var(--ink);
  border: 1.5px solid var(--ink); font-size: .9375rem;
  transition: background .18s ease, color .18s ease;
}
.btn-line:hover { background: var(--ink); color: var(--ground); }
.btn-quiet {
  background: none; color: var(--ink);
  border: 1px solid var(--rule); font-size: .875rem; min-height: 44px;
  padding: 10px 16px;
}
.btn-quiet:hover { border-color: var(--ink); }
.btn-w { width: 100%; }

/* 화살표 링크 — 시안의 ↗ */
.arrow::after { content: "↗"; font-family: var(--font-mono); font-size: .9em; opacity: .8; }

/* ── 상태 표시 ───────────────────────────────────────────────────────
   색만으로 상태를 말하지 않는다(원자료 §상태). 모양(●/○/×/―)과 글자를 함께 둔다. */
.st { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.st::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid currentColor; flex: none;
}
.st-on { color: var(--primary-deep); }
.st-on::before { background: currentColor; }
.st-wait { color: var(--muted); }
.st-off { color: var(--muted); }
.st-off::before {
  content: "✕"; border: none; border-radius: 0; width: auto; height: auto;
  font-size: .8em; line-height: 1;
}
.st-none { color: var(--muted); }
.st-none::before { border: none; width: 10px; height: 1.5px; background: currentColor; }

/* ── 구획 머리 ───────────────────────────────────────────────────────── */
.head {
  display: flex; align-items: baseline; gap: var(--s4);
  padding-bottom: var(--s3); border-bottom: 1.5px solid var(--ink);
  margin-bottom: var(--s5);
}
.head h2 { font-size: var(--fs-h2); }
.head .meta { margin-left: auto; }
.lede {
  font-size: 1.0625rem; color: var(--muted); max-width: 62ch;
}

/* 규칙: 이 벌은 카드 대신 「가로선으로 나눈 줄」을 기본 단위로 쓴다. */
.rows { border-top: 1px solid var(--ink); }
.row {
  display: grid; grid-template-columns: 44px 1fr auto;
  align-items: center; gap: var(--s4);
  padding: var(--s4) 0; border-bottom: 1px solid var(--rule-soft);
}
.row-txt { min-width: 0; }
.row-title { display: block; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; }
.row-sub { display: block; font-size: .875rem; color: var(--muted); margin-top: 2px; }
a.row { text-decoration: none; }
a.row:hover { background: rgb(38 50 41 / .045); }

/* ═══════════════ 홈 ═══════════════════════════════════════════════════
   시안 01-home.png 의 3단 구조: 왼쪽 제목 · 가운데 입고 시각표 · 오른쪽 사진.
   화면 첫 장의 주인공은 업종 소개가 아니라 이 표다. */
.hero {
  border-bottom: 1px solid var(--ink);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1920px; margin-inline: auto;
}
.hero-say {
  padding: var(--s7) var(--pad) var(--s6);
  display: flex; flex-direction: column; gap: var(--s4);
}
.hero-say h1 {
  font-size: clamp(1.85rem, 7.4vw, 2.45rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1.08;
}
.hero-say .lede { font-size: 1rem; }
.hero-act { margin-top: var(--s3); max-width: 340px; }
.hero-sign { margin-top: auto; padding-top: var(--s5); }

/* 가운데 — 입고 시각표 */
.hero-tt {
  padding: var(--s6) var(--pad) var(--s6);
  border-top: 1px solid var(--rule);
}
.tt-head {
  display: flex; align-items: baseline; gap: var(--s3);
  padding-bottom: var(--s3); border-bottom: 1.5px solid var(--ink);
}
.tt-head h2 { font-size: 1.0625rem; }
.tt-head .meta { margin-left: auto; }
.tt-day {
  margin-top: var(--s3); font-size: .875rem; color: var(--muted);
}
.tt { position: relative; margin-top: var(--s3); }
.tt-list { border-top: 1px solid var(--rule-soft); }
.tt-row { border-bottom: 1px solid var(--rule-soft); }
.tt-row a {
  display: grid; grid-template-columns: 30px 54px 1fr 18px;
  align-items: center; gap: var(--s3);
  padding: 15px 0; text-decoration: none;
}
.tt-row a:hover .tt-name { border-bottom-color: var(--ink); }
.tt-time { font-family: var(--font-mono); font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tt-name { font-size: .9375rem; font-weight: 700; letter-spacing: -.02em; border-bottom: 1.5px solid transparent; justify-self: start; }
.tt-go { font-family: var(--font-mono); font-size: .8125rem; color: var(--muted); text-align: right; }
.tt-state { grid-column: 2 / -1; margin-top: 2px; }
.tt-row.is-past .tt-time, .tt-row.is-past .tt-name { color: var(--muted); }
.tt-row.is-now { background: rgb(240 78 62 / .07); }

/* 시그니처 — 지금 시각선. 하루의 어디쯤인지를 표 위에 직접 긋는다.
   장식이 아니라 정보라서 하나만 둔다(원자료 §고급 기술). */
.tt-now {
  position: absolute; left: 0; right: 0; top: 0;
  border-top: 1.5px solid var(--primary);
  opacity: 0; pointer-events: none;
  transition: top .42s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.tt-now.on { opacity: 1; }
.tt-now::before {
  content: ""; position: absolute; left: 0; top: -4px;
  width: 7px; height: 7px; background: var(--primary); border-radius: 50%;
}
.tt-note { margin-top: var(--s4); font-size: .8125rem; color: var(--muted); }
.tt-live { margin-top: var(--s3); font-size: .8125rem; font-weight: 700; }

/* 오른쪽 — 사진. 시안대로 화면 끝까지 흘려 자른다. */
.hero-photo { position: relative; overflow: clip; background: var(--rule-soft); }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s4) var(--s4);
  background: linear-gradient(to top, rgb(38 50 41 / .78), rgb(38 50 41 / 0));
  color: #F3EFE6;
}

/* 이번 주 입고일 */
.week { border-top: 1px solid var(--ink); }
.week-rail { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.week-cell {
  padding: var(--s4) var(--s3) var(--s5);
  border-right: 1px solid var(--rule-soft);
  min-width: 0;
}
.week-cell:last-child { border-right: none; }
.week-dow { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
.week-date { display: block; margin-top: 2px; }
.week-date { min-height: 1.2em; }
.week-mark { margin-top: var(--s3); }
.week-cell .st { white-space: normal; }
.week-cell.is-today { background: rgb(240 78 62 / .09); }
.week-cell.is-today .week-dow::after {
  content: "오늘"; display: inline-block; margin-left: 6px;
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em;
  color: var(--primary-deep); vertical-align: 2px;
}

/* 다음 세 걸음 (디자인보드 03/ACTION) */
.steps3 .row { grid-template-columns: 44px 1fr auto; }

/* 이용 안내 — 습관적 FAQ 아코디언을 쓰지 않고 정의 목록으로 편다 */
.notes { border-top: 1px solid var(--ink); }
.notes dl { margin: 0; }
.note-item {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--s4) var(--s6);
  padding: var(--s5) 0; border-bottom: 1px solid var(--rule-soft);
}
.note-item dt { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.025em; }
.note-item dd { margin: 0; color: var(--muted); }

/* ═══════════════ 입고표 ═══════════════════════════════════════════════ */
.page-head { padding-top: var(--s8); }
.page-head h1 { font-size: var(--fs-display); letter-spacing: -.042em; line-height: 1.1; max-width: 16ch; }
.page-head .lede { margin-top: var(--s5); }
.band { margin-top: var(--s6); }
.band img { display: block; width: min(100%, 751px); height: auto; }
.band figcaption { margin-top: var(--s3); }
/* 사진은 시안 화소가 천장이라 751px 이 상한이다. 넓은 화면에서는 억지로 늘리지 않고
   남는 자리에 설명을 붙여 여백이 의도로 읽히게 한다. */
@media (min-width: 1180px) {
  .band { display: grid; grid-template-columns: 751px minmax(0, 1fr); gap: var(--s5); align-items: end; }
  .band figcaption { margin-top: 0; padding-bottom: 4px; }
}

.strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4); margin-top: var(--s6);
  border-top: 1px solid var(--rule); padding-top: var(--s4);
}
.strip figure { margin: 0; min-width: 0; }
.strip img { display: block; width: 100%; height: auto; }
.strip figcaption { margin-top: var(--s2); font-size: .8125rem; font-weight: 700; }
.strip figcaption .meta { display: block; margin-top: 2px; font-weight: 500; }

/* 검색·선택 상태 — 원자료 §핵심 기능의 「검색 또는 선택 상태 보존」 */
.filter {
  border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule);
  padding: var(--s4) 0; margin-top: var(--s7);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4);
}
.search-box { display: flex; align-items: stretch; border: 1.5px solid var(--ink); min-width: min(100%, 300px); }
.search-box input {
  font: inherit; font-size: .9375rem; border: none; background: none; color: inherit;
  padding: 10px 12px; min-width: 0; flex: 1 1 auto; min-height: 44px;
}
.search-box input::placeholder { color: var(--muted); opacity: 1; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer;
  background: none; color: var(--muted); border: 1px solid var(--rule);
  padding: 9px 14px; min-height: 44px;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.filter-count { margin-left: auto; font-size: .8125rem; font-weight: 700; }

.empty {
  padding: var(--s7) 0; border-bottom: 1px solid var(--rule-soft);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4);
}
.empty p { color: var(--muted); max-width: 46ch; }

/* 품목 줄 — 열면 손질·기간·주의가 나온다(습관적 FAQ 가 아니라 품목 상세다) */
.ledger { border-top: 1px solid var(--ink); }
.item { border-bottom: 1px solid var(--rule-soft); }
.item-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 120px 116px 132px;
  align-items: center; gap: var(--s4);
  padding: var(--s3) 0;
}
.acc-trigger {
  font: inherit; text-align: left; background: none; border: none; color: inherit;
  cursor: pointer; padding: 10px 0; min-height: 44px; display: block; width: 100%;
}
.item-h { font-size: 1rem; font-weight: inherit; letter-spacing: normal; min-width: 0; }
.item-name { display: block; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.025em; }
.item-name .caret { font-family: var(--font-mono); font-size: .8125rem; color: var(--muted); margin-left: 8px; }
.item-name .caret::after { content: "＋"; }
.item.open .item-name .caret::after { content: "－"; }
.item.open .item-name .caret { color: var(--primary-deep); }
.item-spec { display: block; font-size: .8125rem; color: var(--muted); margin-top: 1px; font-weight: 500; }
.item-when { font-size: .875rem; font-weight: 600; }
.item-left { font-family: var(--font-mono); font-size: .875rem; font-variant-numeric: tabular-nums; }
.acc-panel { padding: 0 0 var(--s5) 34px; }
.acc-panel .kv {
  display: grid; grid-template-columns: minmax(0, 92px) minmax(0, 1fr);
  gap: 6px var(--s4); font-size: .9375rem;
}
.acc-panel .kv dt { color: var(--muted); font-size: .8125rem; font-weight: 700; padding-top: 3px; }
.acc-panel .kv dd { margin: 0; }
.pick-wrap { margin-top: var(--s4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.pick-btn[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.pick-note { font-size: .8125rem; color: var(--muted); }

/* 주간 표 */
.wk-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.wk-table caption { text-align: left; padding-bottom: var(--s3); color: var(--muted); font-size: .875rem; }
.wk-table th, .wk-table td {
  text-align: left; padding: 12px var(--s4) 12px 0;
  border-bottom: 1px solid var(--rule-soft); font-size: .9375rem; vertical-align: top;
}
.wk-table thead th {
  border-bottom: 1.5px solid var(--ink);
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.wk-table tbody th { font-weight: 800; white-space: nowrap; }

/* ═══════════════ 꽃 조합 ═══════════════════════════════════════════════
   왼쪽 목록에서 고르면 오른쪽에 근거가 한 화면으로 펼쳐진다. */
.pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); margin-top: var(--s6); }
.idx { border-top: 1.5px solid var(--ink); }
.idx .tab {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center; gap: var(--s3);
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: none; border: none; border-bottom: 1px solid var(--rule-soft);
  color: inherit; padding: var(--s4) 0; min-height: 56px;
}
.idx .tab:hover { background: rgb(38 50 41 / .045); }
.idx .tab[aria-selected="true"] { background: rgb(240 78 62 / .09); }
.idx .tab[aria-selected="true"] .idx-name { color: var(--primary-deep); }
.idx-txt { min-width: 0; }
.idx-name { display: block; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.025em; }
.idx-sub { display: block; font-size: .8125rem; color: var(--muted); margin-top: 1px; }
.idx-go { font-family: var(--font-mono); font-size: .8125rem; color: var(--muted); text-align: right; }

.detail { border-top: 1.5px solid var(--ink); padding-top: var(--s5); }
.detail + .detail { margin-top: var(--s6); }
.detail h2 { font-size: var(--fs-h2); margin-top: var(--s2); }
.detail .price {
  font-family: var(--font-mono); font-size: 1.125rem; font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: var(--s2);
}
.detail .lede { margin-top: var(--s3); font-size: 1rem; }
.mix { margin-top: var(--s5); border-top: 1px solid var(--rule-soft); }
.mix li {
  display: flex; align-items: baseline; gap: var(--s4);
  padding: 10px 0; border-bottom: 1px solid var(--rule-soft); font-size: .9375rem;
}
.mix li .q { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.why {
  margin-top: var(--s5); border-left: 2px solid var(--primary);
  padding: var(--s2) 0 var(--s2) var(--s4);
}
.why .meta { margin-bottom: 4px; }
.detail .kv2 {
  display: grid; grid-template-columns: minmax(0, 100px) minmax(0, 1fr);
  gap: 8px var(--s4); margin-top: var(--s5); font-size: .9375rem;
}
.detail .kv2 dt { color: var(--muted); font-size: .8125rem; font-weight: 700; padding-top: 3px; }
.detail .kv2 dd { margin: 0; }
.detail-act { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* 담아 둔 것 — 면을 넘어와도 남아 있는 선택 */
.kept {
  border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule);
  padding: var(--s4) 0; margin-top: var(--s6);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4);
}
.kept-list { display: flex; flex-wrap: wrap; gap: var(--s2); }
.kept-list li {
  font-size: .8125rem; font-weight: 700;
  border: 1px solid var(--rule); padding: 5px 10px;
}
.kept .meta { flex: none; }

/* ═══════════════ 픽업 시간 ═══════════════════════════════════════════
   시안 03: 빨간 원 01–04 를 가로선이 꿰는 진행 순서. */
.flow { margin-top: var(--s7); }
.flow-line {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4);
  --colw: calc((100% - 3 * var(--s4)) / 4);
}
/* 원 네 개의 한가운데를 꿰는 선 — 첫 원 중심에서 마지막 원 중심까지만 긋는다. */
.flow-line::before {
  content: ""; position: absolute; left: 23px; right: calc(var(--colw) - 23px); top: 22px;
  border-top: 1.5px solid var(--ink);
}
.flow-step { position: relative; text-align: left; min-width: 0; }
.flow-dot {
  position: relative; z-index: 1;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 1.0625rem; font-weight: 600;
}
.flow-step h3 { margin-top: var(--s4); font-size: var(--fs-h3); }
.flow-step p { margin-top: 6px; font-size: .875rem; color: var(--muted); }
.flow-step .meta { margin-top: var(--s2); }

.slots { margin-top: var(--s8); }
.daytabs { display: flex; flex-wrap: wrap; gap: var(--s2); border-bottom: 1.5px solid var(--ink); padding-bottom: var(--s3); }
.daytabs .tab {
  font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer;
  background: none; border: 1px solid var(--rule); color: var(--muted);
  padding: 10px 16px; min-height: 48px;
}
.daytabs .tab[aria-selected="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.daypanel { padding-top: var(--s5); }
.daypanel > h3 { font-size: var(--fs-h3); margin-bottom: var(--s4); }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--s3); max-width: 860px; }
.slot {
  font: inherit; text-align: left; cursor: pointer;
  background: none; color: var(--ink); border: 1.5px solid var(--rule);
  padding: 12px 14px; min-height: 76px;
  display: flex; flex-direction: column; gap: 4px;
}
.slot:hover { border-color: var(--ink); }
.slot .t { font-family: var(--font-mono); font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.slot .n { font-size: .8125rem; color: var(--muted); font-weight: 600; }
.slot[aria-pressed="true"] { border-color: var(--primary); background: rgb(240 78 62 / .1); }
.slot[aria-pressed="true"] .n { color: var(--primary-deep); }
.slot[disabled] { border-style: dashed; color: var(--muted); cursor: not-allowed; }
.slot[disabled] .t { text-decoration: line-through; }

.statepanel {
  margin-top: var(--s6); border-top: 1.5px solid var(--ink);
  padding-top: var(--s4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4);
}
.statepanel .sp-msg { font-size: 1rem; font-weight: 700; }
.statepanel .sp-sub { font-size: .875rem; color: var(--muted); width: 100%; }

/* ═══════════════ 예약 ═══════════════════════════════════════════════ */
.recap { border-top: 1.5px solid var(--ink); margin-top: var(--s6); }
.recap-row {
  display: grid; grid-template-columns: 34px minmax(0, 150px) minmax(0, 1fr) auto;
  gap: var(--s4); align-items: baseline;
  padding: var(--s4) 0; border-bottom: 1px solid var(--rule-soft);
}
.recap-key { font-size: .9375rem; font-weight: 800; }
.recap-val { font-size: .9375rem; }
.recap-val.is-empty { color: var(--muted); }
.recap-row a { font-size: .8125rem; font-weight: 700; text-decoration: none; border-bottom: 1.5px solid var(--rule); white-space: nowrap; }
.recap-row a:hover { border-bottom-color: var(--ink); }

.inquiry-form { margin-top: var(--s7); max-width: 720px; }
.field { margin-bottom: var(--s5); }
.field label { display: block; font-size: .875rem; font-weight: 800; margin-bottom: var(--s2); }
.field .control {
  font: inherit; font-size: 1rem; color: inherit; background: none;
  border: 1.5px solid var(--rule); width: 100%;
  padding: 13px 14px; min-height: 52px;
}
.field .control:focus { border-color: var(--ink); outline-offset: 1px; }
.field .err { display: none; margin-top: 6px; font-size: .8125rem; font-weight: 700; color: var(--primary-deep); }
.field.invalid .control { border-color: var(--primary-deep); border-width: 2px; }
.field.invalid .err { display: block; }
.field-hint { margin-top: 6px; font-size: .8125rem; color: var(--muted); }

.agree { position: relative; margin-bottom: var(--s5); }
.agree label { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; cursor: pointer; padding: 6px 0; }
.agree .box { flex: none; width: 22px; height: 22px; border: 1.5px solid var(--ink); margin-top: 2px; }
.agree input:checked + label .box { background: var(--ink); }
.agree input:checked + label .box::after {
  content: "✓"; display: block; color: var(--ground); font-size: .875rem;
  line-height: 19px; text-align: center;
}
.agree .err { display: none; margin-top: 6px; font-size: .8125rem; font-weight: 700; color: var(--primary-deep); }
.agree.invalid .err { display: block; }
.agree.invalid .box { border-color: var(--primary-deep); border-width: 2px; }

/* 완료 결과 — 접수 뒤에만 펼친다 */
.gp-done {
  margin-top: var(--s7); border: 1.5px solid var(--ink);
  padding: var(--s5) var(--s5) var(--s6);
}
.gp-done h2 { font-size: var(--fs-h2); margin-top: var(--s2); }
.gp-done .code {
  font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600;
  letter-spacing: .04em; margin-top: var(--s3);
}
.gp-done .kv3 { display: grid; grid-template-columns: minmax(0, 110px) minmax(0, 1fr); gap: 6px var(--s4); margin-top: var(--s5); font-size: .9375rem; }
.gp-done .kv3 dt { color: var(--muted); font-size: .8125rem; font-weight: 700; padding-top: 3px; }
.gp-done .kv3 dd { margin: 0; }
.gp-done .after { margin-top: var(--s5); color: var(--muted); font-size: .9375rem; }
.gp-done .done-act { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ── 모바일 과업 시퀀스 표시 ───────────────────────────────────────────
   06-mobile.png 의 「1 / 3」. 좁은 폭에서만 나온다 —
   모바일은 PC 축소가 아니라 입고표 → 꽃 조합 → 픽업 시간의 한 줄 순서다. */
.seq { display: none; }
@media (max-width: 767px) {
  .seq {
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s3) 0; border-bottom: 1px solid var(--rule);
  }
  .seq .step { margin-left: auto; }
}
.seq-next { border-top: 1px solid var(--ink); padding-top: var(--s4); margin-top: var(--s6); }
.seq-next a { display: flex; align-items: center; gap: var(--s3); padding: 12px 0; text-decoration: none; font-weight: 800; letter-spacing: -.02em; min-height: 48px; }
.seq-next .meta { margin-left: auto; }

/* ── 푸터 ───────────────────────────────────────────────────────────── */
.site-footer { border-top: 1.5px solid var(--ink); margin-top: var(--s7); }
.footer-inner {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: var(--s7) var(--pad) var(--s7);
}
.footer-brand { font-size: 1.18rem; font-weight: 800; letter-spacing: -.03em; }
.footer-brand .en { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 500; letter-spacing: .14em; color: var(--muted); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.footer-desc { margin-top: var(--s3); font-size: .875rem; color: var(--muted); max-width: 40ch; }
.footer-col h2 { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.footer-nav { display: flex; flex-direction: column; margin-top: var(--s3); }
.footer-nav a { padding: 7px 0; font-size: .875rem; font-weight: 600; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-biz {
  margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--rule-soft);
  font-style: normal; font-size: .8125rem; color: var(--muted); line-height: 1.9;
}
.footer-biz a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.footer-legal { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s4); }
.footer-legal a { font-size: .8125rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--rule); padding: 4px 0; }
.footer-copy { margin-top: var(--s4); font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: .12em; color: var(--muted); }

/* ── 토스트 ─────────────────────────────────────────────────────────── */
.toast {
  background: var(--ink); color: var(--ground);
  padding: 14px 20px; font-size: .9375rem; font-weight: 700;
  max-width: min(92vw, 460px); text-align: center;
}

/* ═══════════════ 반응형 ═══════════════════════════════════════════════
   내비 숨김은 767px 고정(§4-C 15). 그 밖의 배치 층은 1024 / 1180 에 둔다. */
@media (min-width: 768px) {
  .footer-top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); }
  .pair { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--s7); align-items: start; }
  .detail + .detail { margin-top: var(--s7); }
}

@media (min-width: 1024px) {
  :root { --section: 104px; }
  .hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.06fr) minmax(0, .92fr);
    min-height: calc(100svh - var(--header-h));
  }
  .hero-say { padding: var(--s8) var(--s6) var(--s7) var(--pad); }
  .hero-say h1 { font-size: clamp(2.2rem, 3.35vw, 3.4rem); }
  .hero-tt {
    border-top: none; border-left: 1px solid var(--rule);
    padding: var(--s8) var(--s6) var(--s7);
  }
  .hero-photo { min-height: 100%; }
  .hero-photo img { position: absolute; inset: 0; }
  .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .note-item { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}

/* 좁은 화면에서는 06-mobile.png 순서대로 — 제목 → 사진 → 시각표.
   PC 를 줄인 것이 아니라 한 화면에 한 과업씩 다시 세운다(원자료 §반응형). */
@media (max-width: 1023px) {
  .hero-say { order: 1; }
  .hero-photo { order: 2; aspect-ratio: 16 / 10; }
  .hero-photo img { height: 100%; }
  .hero-tt { order: 3; border-top: 1.5px solid var(--ink); }
}
/* 06-mobile.png 의 사진은 거의 정사각이다. 세로로 긴 원본을 가운데보다
   조금 아래에서 잘라 꽃이 든 자리를 남긴다. */
@media (max-width: 767px) {
  .hero-photo { aspect-ratio: 1 / 1; }
  .hero-photo img { object-position: center 58%; }
}

@media (max-width: 860px) {
  .item-row { grid-template-columns: 34px minmax(0, 1fr); row-gap: var(--s2); }
  .item-row .item-when, .item-row .item-left, .item-row .st { grid-column: 2; }
  .item-row .item-when, .item-row .item-left { font-size: .8125rem; }
  .flow-line { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .flow-line::before { left: 22px; right: auto; top: 10px; bottom: 30px; width: 0; border-top: none; border-left: 1.5px solid var(--ink); }
  .flow-step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: var(--s4); padding-bottom: var(--s5); }
  .flow-step h3 { margin-top: 10px; }
  .flow-step .flow-dot { grid-row: 1; }
  .flow-step h3, .flow-step p, .flow-step .meta { grid-column: 2; }
  .recap-row { grid-template-columns: 34px minmax(0, 1fr); row-gap: 4px; }
  .recap-row .recap-val, .recap-row a { grid-column: 2; }
  .recap-row a { justify-self: start; }
}

@media (max-width: 767px) {
  :root { --section: 64px; --header-h: 58px; }
  .nav, .header-cta { display: none; }
  .hero-say { padding: var(--s6) var(--pad) var(--s5); }
  .hero-say h1 { letter-spacing: -.038em; }
  .hero-tt { padding: var(--s6) var(--pad); }
  .week-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .week-cell { padding: var(--s3) var(--s2) var(--s4); border-bottom: 1px solid var(--rule-soft); }
  .week-cell:nth-child(4n) { border-right: none; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .note-item { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .filter-count { margin-left: 0; width: 100%; }
  .search-box { width: 100%; }
  .slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-head { padding-top: var(--s6); }
  .footer-inner { padding-block: var(--s6); }
}

@media (max-width: 400px) {
  .tt-row a { grid-template-columns: 26px 50px 1fr 16px; gap: var(--s2); }
  .item-row { grid-template-columns: 28px minmax(0, 1fr); }
  .acc-panel { padding-left: 28px; }
  .idx .tab { grid-template-columns: 28px minmax(0, 1fr) 16px; }
  .recap-row { grid-template-columns: 28px minmax(0, 1fr); }
}