/*
 * still-cup — style.css (4단계 · 구현)
 * 값은 전부 tokens.css 의 var() 다(raw 색 금지 — G2 ⑨). 설계 근거는 _design/DESIGN.md, 배치는 _design/wireframe.md.
 * 원칙: 첫 세 줄이 답이다 · 칼럼은 하나, 넘는 것은 셋(이름 · 원두 산지 표 · 지도) · 사진 대신 조판.
 */

/* ── 바탕 ─────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--color-bg);
  color: var(--color-ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 건너뛰기 링크로 내려간 제목이 화면 맨 위에 딱 붙지 않게 */
  scroll-padding-top: var(--spacing-block);
  scrollbar-color: var(--color-ink-soft) var(--color-band);
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

main {
  flex: 1;
}

:where(h1, h2, h3, p, ul, ol, dl, dd, figure, table) {
  margin: 0;
}

:where(ul[role="list"], ol[role="list"]) {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

abbr[title] {
  text-decoration: none;
}

code {
  font-family: var(--font-body);
  font-size: 0.9em;
  font-weight: 600;
  padding: 0.05em 0.35em;
  border-radius: 0.35em;
  background: var(--color-surface);
  white-space: nowrap;
}

::selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.num,
.row__price,
.hours td {
  font-variant-numeric: tabular-nums;
}

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

.skip {
  position: absolute;
  left: var(--spacing-page-x);
  top: 0;
  z-index: 10;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-bg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-120%);
}

.skip:focus-visible {
  transform: translateY(var(--spacing-nav-top));
}

/* ── 격자 — 칼럼 하나 + 방주 칸 (wireframe 0) ─────────────────────────────
 * 1024 미만: [여백][칼럼 ≤36rem][남는 폭][여백] — 칼럼이 왼쪽에 붙고, 넘는 것(wide)은 오른쪽 여백까지 쓴다.
 * 1024 이상: [여백 1fr][칼럼 36rem][거터 3rem][방주 14rem][여백 1.6fr] — 칼럼이 왼쪽으로 치우친다. */

.grid {
  display: grid;
  grid-template-columns:
    [full-start] max(var(--spacing-page-x), env(safe-area-inset-left))
    [col-start] minmax(0, var(--spacing-column))
    [col-end] minmax(0, 1fr)
    [note-end] max(var(--spacing-page-x), env(safe-area-inset-right))
    [full-end];
}

.grid > * {
  grid-column: col;
  min-width: 0;
}

.grid > .wide {
  grid-column: col-start / note-end;
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns:
      [full-start] minmax(var(--spacing-page-x), 1fr)
      [col-start] minmax(0, var(--spacing-column))
      [col-end] var(--spacing-gutter)
      [note-start] var(--spacing-note)
      [note-end] minmax(var(--spacing-page-x), 1.6fr)
      [full-end];
  }
}

/* ── 글자 부품 ─────────────────────────────────────────────────────────── */

.eyebrow,
.tag {
  font-family: var(--font-body);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.tag--accent {
  color: var(--color-accent);
}

.block__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-bottom: var(--spacing-block);
}

.link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-line);
  text-underline-offset: 0.3em;
  transition: text-decoration-color 220ms var(--ease-fluid), color 220ms var(--ease-fluid);
}

/* 혼자 선 글자 링크는 터치 과녁 44px — 보이는 간격은 음수 여백으로 그대로 둔다 */
:is(.where__more, .season__more, .menu-sec__after) .link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  margin-block: -0.75rem;
}

@media (hover: hover) {
  .link:hover {
    color: var(--color-accent);
    text-decoration-color: currentColor;
  }
}

/* 방주 — 바리스타의 펜 메모. 1024 이상은 옆 칸, 미만은 그 줄 바로 아래로 접힌다 */
.note {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-note);
  line-height: var(--text-note--line-height);
  color: var(--color-ink-soft);
  padding-left: 1.1em;
  text-indent: -1.1em;
  margin-top: 0.75rem;
  max-width: 34ch;
  text-wrap: balance;
  transition: color 220ms var(--ease-fluid);
}

.note::before {
  content: "— " / "";
}

.note--desk {
  display: none;
}

@media (min-width: 1024px) {
  .grid > .note {
    grid-column: note;
    align-self: start;
    margin-top: 0;
    /* 옆 줄의 첫 글자선에 맞춘다 — 본문(17px/1.6)과 방주(15px/1.45)의 반행간 차 */
    padding-top: 0.25rem;
  }

  .note--desk {
    display: block;
  }

  .note--hand {
    display: none;
  }
}

/* ── 머리 — 오늘의 칠판 띠(ticker) + 글자 줄. 박스·알약 없이 1px 선으로만 나눈다, 따라오지 않는다 ── */

.top {
  padding-top: env(safe-area-inset-top);
  background: var(--color-surface);
}

.ticker {
  display: flex;
  align-items: stretch;
  height: 2rem;
  padding-inline: max(var(--spacing-page-x), env(safe-area-inset-left)) max(var(--spacing-page-x), env(safe-area-inset-right));
  border-bottom: 1px solid var(--color-line);
  font-size: 0.8125rem;
  line-height: 1;
}

.ticker__state {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  padding-right: 0.875rem;
  margin-right: 0.875rem;
  border-right: 1px solid var(--color-line);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-ink);
}

[data-shop="open"] .ticker__state .dot,
[data-shop="soon"] .ticker__state .dot {
  background: var(--color-accent);
}

.ticker__window {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.ticker__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
}

.ticker__item {
  display: block;
  white-space: nowrap;
  padding-right: 2.5rem;
}

.ticker__item::before {
  content: "◆" / "";
  margin-right: 0.75rem;
  font-size: 0.4375rem;
  vertical-align: 0.2em;
  color: var(--color-line);
}

.ticker__track > .ticker__item:first-child::before {
  content: none;
}

/* 흐를 때만 창 양끝을 마스크로 흐린다 — 글자가 칼같이 잘리지 않게(배경 그라데이션 아님) */
.ticker[data-run] .ticker__window {
  mask-image: linear-gradient(90deg, transparent, var(--color-ink) 1.5rem, var(--color-ink) calc(100% - 1.5rem), transparent);
}

/* 흐르지 않을 때(글자 없음 · reduced-motion · 아직 준비 전)는 첫 소식 하나만 */
.ticker:not([data-run]) .ticker__item + .ticker__item {
  display: none;
}

.ticker__toggle {
  flex: none;
  margin-left: 0.875rem;
  padding: 0 0 0 0.875rem;
  border: 0;
  border-left: 1px solid var(--color-line);
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.ticker__toggle[hidden] {
  display: none;
}

@media (hover: hover) {
  .ticker__toggle:hover {
    text-decoration: underline;
    text-underline-offset: 0.3em;
  }
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-inline: max(var(--spacing-page-x), env(safe-area-inset-left)) max(var(--spacing-page-x), env(safe-area-inset-right));
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
}

.bar__mark {
  display: inline-flex;
  align-items: center;
  min-height: 3.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  text-decoration: none;
  white-space: nowrap;
}

.bar__links {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 1.75rem;
}

.bar__links a {
  display: inline-flex;
  align-items: center;
  height: 100%;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
  transition: box-shadow 220ms var(--ease-fluid);
}

.bar__links a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--color-ink);
}

@media (hover: hover) {
  .bar__links a:hover {
    box-shadow: inset 0 -2px 0 var(--color-line);
  }

  .bar__links a[aria-current="page"]:hover {
    box-shadow: inset 0 -2px 0 var(--color-ink);
  }
}

@media (max-width: 719px) {
  .ticker {
    height: 45px; /* 선 1px 를 빼고도 멈춤 단추가 44px */
  }

  .ticker__state {
    padding-right: 0.625rem;
    margin-right: 0.625rem;
  }

  .ticker__toggle {
    min-width: 44px;
    margin-left: 0.625rem;
    padding-left: 0.625rem;
  }

  .bar__mark {
    min-height: 3rem;
    font-size: 1.3125rem;
  }

  .bar__home,
  .bar__long {
    display: none;
  }

  .bar__links a {
    justify-content: center;
    min-width: 44px;
  }
}

/* ── 히어로 — 이름 · 지금 열었나 · 오늘의 원두 ─────────────────────────── */

.hero {
  padding-top: clamp(2rem, 1rem + 2.6vw, 3.25rem);
  padding-bottom: clamp(3rem, 2rem + 2.6vw, 4.5rem);
}

/* 눈썹을 대문자·자간 라벨로 두지 않는다 — 큰 제목 위의 추적 대문자는 SaaS 히어로의 버릇이다. 주소 한 줄로 읽히게 */
.hero__eyebrow {
  font-size: var(--text-note);
  line-height: var(--text-note--line-height);
  font-weight: 500;
  color: var(--color-ink-soft);
}

.hero__name {
  grid-column: col-start / note-end;
  margin-top: clamp(0.75rem, 0.5rem + 0.6vw, 1rem);
  margin-left: -0.035em; /* 이탤릭 S 의 곁여백 — 눈썹 글자와 세로선을 맞춘다 */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--text-name);
  line-height: var(--text-name--line-height);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.hero__name-in {
  display: inline-block;
}

.status {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 0.6rem + 0.8vw, 1.25rem);
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
}

.status__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 인디고는 펜으로 적어 넣은 말 — "Open now" · 오늘의 원두 이름 */
.status__word {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.12em;
  letter-spacing: -0.005em;
  color: var(--color-accent);
}

[data-shop="closed"] .status__word {
  color: var(--color-ink);
}

.status__left {
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  color: var(--color-ink-soft);
}

.hero__bean + .note {
  padding-top: 0.25rem;
}

@media (min-width: 1024px) {
  /* 상태 줄의 방주는 둘째 줄("… of coffee left")에 선다 — 첫 줄 높이엔 이름의 p 내림획이 내려와 있다 */
  .grid > .hero__status + .note {
    align-self: end;
    padding-top: 0;
    padding-bottom: 0.2rem;
  }

  /* 원두 줄의 방주는 원두 줄 첫 글자선에 — 같은 윗여백 + 반행간 차 */
  .grid > .hero__bean + .note {
    margin-top: clamp(1.25rem, 0.75rem + 1.2vw, 1.75rem);
    padding-top: 0.35rem;
  }
}

.bean {
  margin-top: clamp(1.25rem, 0.75rem + 1.2vw, 1.75rem);
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
  text-wrap: pretty;
}

.bean__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent);
}

.hero__cta {
  margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}

/* ── 잔이 시계 — 커피 높이 = 오늘 남은 영업시간 비율 ─────────────────────
 * 수위는 height 가 아니라 transform 으로(합성 레이어만): 커피 판을 (1 − fill) 만큼 아래로 내리고 몸통이 자른다.
 * 그래서 크레마 줄은 늘 1px 그대로다. */

.cup {
  --h: var(--spacing-cup);
  --fill: 0.6;
  position: relative;
  flex: none;
  display: block;
  width: calc(var(--h) * 1.22);
  height: var(--h);
}

/* 손잡이 — 몸통 뒤에서 오른쪽으로 나온 고리 */
.cup::before {
  content: "";
  position: absolute;
  left: calc(var(--h) * 0.66);
  top: 16%;
  width: calc(var(--h) * 0.52);
  height: calc(var(--h) * 0.5);
  border: calc(var(--h) * 0.1) solid var(--color-surface);
  border-radius: 50%;
  box-shadow: var(--shadow-cup);
}

.cup__body {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--h) * 0.9);
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-cup);
  background: var(--color-surface);
  box-shadow: var(--shadow-cup), var(--shadow-slip);
}

.cup__coffee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84%;
  background: var(--color-espresso);
  border-top: 2px solid var(--color-crema);
  transform: translateY(calc((1 - var(--fill)) * 100%));
  transition: transform 900ms var(--ease-reveal);
}

/* 김 — 두 가닥, 열려 있을 때만 떠오른다. 유일한 반복 */
/* 한 가닥 = 위 반쪽 ")" + 아래 반쪽 "(" 을 이은 S — 테두리 곡선이라 끝이 붓끝처럼 가늘어진다 */
.cup__steam {
  position: absolute;
  bottom: calc(100% + 3px);
  left: calc(var(--h) * 0.34);
  width: calc(var(--h) * 0.09);
  height: calc(var(--h) * 0.42);
  opacity: 0.4;
}

.cup__steam::before,
.cup__steam::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  border: 0 solid var(--color-ink-soft);
}

.cup__steam::before {
  left: 0;
  top: 0;
  border-right-width: 1.5px;
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
}

.cup__steam::after {
  left: -100%;
  bottom: 0;
  border-left-width: 1.5px;
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
}

.cup__steam + .cup__steam {
  left: calc(var(--h) * 0.58);
  height: calc(var(--h) * 0.34);
}

.cup[data-state="open"] .cup__steam {
  animation: steam 3.6s var(--ease-steam) infinite alternate;
}

.cup[data-state="open"] .cup__steam + .cup__steam {
  animation-delay: 1.2s;
}

.cup[data-state="closed"] .cup__steam,
.cup[data-state="soon"] .cup__steam {
  opacity: 0;
}

@keyframes steam {
  from {
    transform: translateY(0);
    opacity: 0.22;
  }
  to {
    transform: translateY(-3px);
    opacity: 0.5;
  }
}

/* ── 단추 속 단추 ────────────────────────────────────────────────────── */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 3.25rem;
  padding: 0.375rem 1.25rem 0.375rem 1.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 260ms var(--ease-fluid);
}

.cta__arrow {
  display: inline-block;
  font-size: 1.0625rem;
  transition: transform 260ms var(--ease-fluid);
}

@media (hover: hover) {
  .cta:hover .cta__arrow {
    transform: translateX(3px);
  }
}

.cta:active {
  transform: scale(0.98);
}

/* ── 블록 ─────────────────────────────────────────────────────────────── */

.block {
  padding-top: var(--spacing-section);
}

/* 오늘의 원두 쪽지는 히어로 바로 뒤 — 첫 화면 아래 끝에 윗 모서리가 비쳐 스크롤을 부른다 */
.block--slip {
  padding-top: 0;
}

/* 쪽지 — double-bezel: 겉테(짙은 유약) 안에 속면(우유 유리) */
.slip {
  padding: 0.5rem;
  border-radius: var(--radius-slip);
  background: var(--color-band);
  box-shadow: var(--shadow-slip);
}

.slip__core {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-slip-core);
  background: var(--color-surface);
  box-shadow: var(--shadow-pill);
}

.slip__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-weight: 400;
}

.slip__bean {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
  letter-spacing: -0.015em;
  color: var(--color-accent);
}

.slip__bean--ink {
  color: var(--color-ink);
}

.slip__sub {
  margin-top: 0.625rem;
  color: var(--color-ink-soft);
  text-wrap: pretty;
}

/* 정의 표 — 라벨(대문자) / 값 */
.spec,
.recipe {
  display: grid;
  grid-template-columns: max-content 1fr;
}

.spec {
  margin-top: 1.5rem;
}

.spec > div,
.recipe > div {
  display: contents;
}

.spec dt,
.recipe dt,
.spec dd,
.recipe dd {
  padding-block: 0.625rem;
  border-top: 1px solid var(--color-line);
}

.spec dt,
.recipe dt {
  padding-right: 1.5rem;
  font-size: var(--text-micro);
  line-height: var(--text-body--line-height);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  padding-top: calc(0.625rem + 0.16em);
}

.recipe {
  margin-top: 1.5rem;
}

.recipe dd {
  font-weight: 500;
}

.spec > div:last-child > *,
.recipe > div:last-child > * {
  border-bottom: 1px solid var(--color-line);
}

.slip__foot {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-note);
  line-height: var(--text-note--line-height);
  color: var(--color-ink-soft);
}

/* 시간표 */
.hours {
  width: 100%;
  border-collapse: collapse;
}

.hours th,
.hours td {
  padding: 0.6875rem 0 0.6875rem 0.875rem;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: baseline;
}

.hours tr:first-child > * {
  border-top: 1px solid var(--color-line);
}

.hours th {
  font-weight: 600;
}

.hours td {
  padding-left: 0;
  text-align: right;
}

.hours .tag {
  margin-left: 0.625rem;
}

.hours tr[data-today] th {
  box-shadow: inset 2px 0 0 var(--color-accent);
}

.hours .tag--today {
  color: var(--color-accent);
}

/* 어디 */
.where__addr {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
}

.where__how {
  margin-top: 0.75rem;
  max-width: 44ch;
  text-wrap: pretty;
}

.where__more {
  margin-top: 1.25rem;
}

/* ── 지시선 줄 — 메뉴 표 · 시즌 띠가 같은 부품을 쓴다 ─────────────────── */

.rows {
  display: grid;
}

.row {
  padding-block: var(--spacing-row);
}

.row__line {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}

.row__name {
  font-weight: 500;
}

/* 점선 지시선 — 빈 칸의 바닥이 글자 기준선에 앉는다(flex baseline). 점 색은 currentColor 라 hover 로 짙어진다 */
.row__lead {
  flex: 1;
  min-width: 1.5rem;
  height: 4px;
  color: var(--color-line);
  background-image: radial-gradient(circle at center, currentColor 0 1.2px, transparent 1.7px);
  background-size: 7px 4px;
  background-repeat: repeat-x;
  background-position: left center;
  transition: color 220ms var(--ease-fluid);
}

.row__price {
  font-weight: 500;
  transition: transform 220ms var(--ease-fluid);
}

.row__desc {
  margin-top: 0.125rem;
  max-width: 40ch;
  font-size: var(--text-note);
  line-height: var(--text-note--line-height);
  color: var(--color-ink-soft);
}

.mark {
  margin-left: 0.25rem;
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-ink-soft);
}

@media (hover: hover) {
  .row:hover .row__lead {
    color: var(--color-ink-soft);
  }

  .row:hover .row__price {
    transform: translateX(-2px);
  }

  /* 줄 ↔ 방주 연결 — 그 표의 줄에 올리면 방주도 짙어진다 */
  .grid:has(.row:hover) > .note {
    color: var(--color-ink);
  }
}

/* 시즌 띠 */
.season {
  margin-top: var(--spacing-section);
  padding-block: var(--spacing-section);
  background: var(--color-surface);
}

.season .rows {
  grid-column: col-start / note-end;
}

@media (min-width: 1024px) {
  .season .rows {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--spacing-gutter);
  }
}

.season__more {
  grid-column: col-start / note-end;
  margin-top: 1.5rem;
}

/* 이야기 — 첫 글자 드롭캡(3줄) */
.story {
  max-width: 36rem;
  text-wrap: pretty;
}

.story + .story,
.note + .story {
  margin-top: 1em;
}

.story__first::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
  margin-right: 0.3rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: normal;
  color: var(--color-ink);
}

/* ── 메뉴 & 오시는 길 ────────────────────────────────────────────────── */

.page-head {
  padding-top: clamp(2rem, 1rem + 2.6vw, 3.25rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 2.6vw, 4rem);
}

.page-head__title {
  grid-column: col-start / note-end;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  letter-spacing: -0.02em;
  margin-left: -0.03em;
  white-space: nowrap;
}

/* 건너뛰기 링크 — 넓으면 한 줄, 좁으면 가로로 미는 칩 줄(스냅) */
.jump {
  grid-column: col-start / note-end;
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.5rem);
}

.jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.125rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 220ms var(--ease-fluid), color 220ms var(--ease-fluid);
}

@media (hover: hover) {
  .jump a:hover {
    background: var(--color-ink);
    color: var(--color-bg);
  }
}

@media (max-width: 767px) {
  .jump {
    grid-column: full;
  }

  .jump ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--spacing-page-x);
    padding: 0.25rem var(--spacing-page-x) 0.5rem;
    scrollbar-width: none;
  }

  .jump ul::-webkit-scrollbar {
    display: none;
  }

  .jump li {
    flex: none;
    scroll-snap-align: start;
  }
}

/* 메뉴 분류 — 한 장의 메뉴 카드처럼 촘촘히(블록 사이보다 좁게) */
.menu-sec {
  padding-top: var(--spacing-block);
}

.page-head + .menu-sec {
  padding-top: 0;
}

.menu-sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-ink);
}

.menu-sec__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
}

.menu-sec .rows {
  margin-top: 0.25rem;
}

@media (min-width: 1024px) {
  .grid > .menu-sec__head + .rows + .note {
    /* 첫 줄(이름)의 글자선에 맞춘다 — 줄 위 여백 + 방주·본문 반행간 차 */
    padding-top: calc(var(--spacing-row) + 0.5rem);
  }
}

.menu-sec__after {
  margin-top: 0.75rem;
}

/* 원두 산지 표 — 칼럼을 넘는 두 번째 것 */
.origins {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.origins thead th {
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.origins thead th:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding-left: 1.5rem;
}

.origins thead th:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.origins tbody th,
.origins td {
  padding: 1rem;
  border-bottom: 1px solid var(--color-line);
  vertical-align: baseline;
}

.origins tbody th {
  padding-left: 1.5rem;
  font-weight: 600;
  position: relative;
}

.origins td.num {
  white-space: nowrap;
}

.origins td[data-label="Notes"] {
  font-family: var(--font-display);
  font-style: italic;
}

.origins__dot {
  position: absolute;
  left: 0.375rem;
  top: 1.55rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.origins .tag {
  display: block;
  margin-top: 0.125rem;
}

@media (max-width: 759px) {
  .origins,
  .origins tbody,
  .origins tr {
    display: block;
  }

  .origins thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .origins tr {
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--color-line);
  }

  .origins tbody tr:first-child {
    border-top: 1px solid var(--color-line);
  }

  .origins tbody th {
    display: block;
    padding: 0 0 0.5rem 1rem;
    border: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-h3);
    line-height: var(--text-h3--line-height);
  }

  .origins__dot {
    left: 0;
    top: 0.6rem;
  }

  .origins .tag {
    font-family: var(--font-body);
  }

  .origins td {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 1rem;
    padding: 0.25rem 0 0.25rem 1rem;
    border: 0;
  }

  .origins td::before {
    content: attr(data-label);
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--text-micro);
    line-height: var(--text-body--line-height);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
  }
}

/* 픽업 쪽지 — 표현만 */
.order__group {
  margin-top: 1.5rem;
}

.order__label {
  margin-bottom: 0.625rem;
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  min-height: 44px;
  padding: 0 1.125rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 200ms var(--ease-fluid), color 200ms var(--ease-fluid), transform 200ms var(--ease-fluid);
}

.chip:active {
  transform: scale(0.97);
}

.chip[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

@media (hover: hover) {
  .chip[aria-pressed="false"]:hover {
    background: var(--color-band);
  }
}

.order__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

.order__msg {
  flex: 1 1 14rem;
  font-size: var(--text-note);
  line-height: var(--text-note--line-height);
}

.order__msg small {
  display: block;
  font-size: var(--text-micro);
  color: var(--color-ink-soft);
}

/* 지도 — 칼럼을 넘는 세 번째 것. 모든 글자는 HTML 텍스트, 틀 전체가 role="img" */
#find-us .where__addr {
  margin-bottom: 1.5rem;
}

.map__core {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.map__canvas {
  position: relative;
  height: clamp(18.75rem, 12rem + 20vw, 26.5rem);
}

.map__canvas > span {
  position: absolute;
}

.map__river {
  left: -25%;
  width: 150%;
  top: 80%;
  height: 90%;
  border-radius: 50%;
  border-top: clamp(1.25rem, 0.8rem + 1.2vw, 1.875rem) solid var(--color-bg);
}

.map__road {
  background: var(--color-band);
}

.map__road--alder {
  left: 0;
  right: 0;
  top: 30%;
  height: 18px;
  margin-top: -9px;
}

.map__road--north {
  left: 40%;
  right: 0;
  top: 8%;
  height: 10px;
}

.map__road--quay {
  left: 0;
  right: 0;
  top: 72%;
  height: 14px;
  margin-top: -7px;
}

.map__road--station {
  left: 40%;
  top: 0;
  height: 72%;
  width: 14px;
  margin-left: -7px;
}

.map__road--east {
  left: 84%;
  top: 0;
  height: 72%;
  width: 12px;
  margin-left: -6px;
}

.map__road--mill {
  left: 58%;
  top: 72%;
  width: 60%;
  height: 12px;
  margin-top: -6px;
  transform-origin: 0 50%;
  transform: rotate(-34deg);
}

/* 역에서 가게까지 걷는 길 — 먹색 점선(강조색은 가게 점 하나뿐) */
.map__route {
  border-color: var(--color-ink-soft);
  border-style: dotted;
  border-width: 0;
  opacity: 0.7;
}

.map__route--up {
  left: 40%;
  top: 30%;
  height: 32%;
  border-left-width: 2px;
  margin-left: -1px;
}

.map__route--along {
  left: 40%;
  top: 30%;
  width: 20%;
  border-top-width: 2px;
  margin-top: -1px;
}

.map__station {
  right: 60%;
  top: 72%;
  margin-right: 1rem;
  transform: translateY(-50%);
  max-width: 8.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.625rem;
  background: var(--color-band);
  box-shadow: 0 0 0 3px var(--color-surface);
  font-size: var(--text-micro);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.map__label {
  padding: 0 0.375rem;
  background: var(--color-band);
  font-size: 0.6875rem;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(-50%);
}

.map__label--alder {
  left: 8%;
  top: 30%;
}

.map__label--station {
  left: 40%;
  top: 51%;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.map__label--quay {
  left: 62%;
  top: 72%;
}

.map__label--mill {
  left: 66%;
  top: 60%;
  transform-origin: 0 50%;
  transform: translateY(-50%) rotate(-34deg);
}

.map__label--river {
  right: 10%;
  top: 88%;
  background: none;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-note);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink-soft);
}

.map__north {
  right: 1.25rem;
  top: 1.25rem;
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.map__scale {
  left: 1.25rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-micro);
  font-weight: 600;
  color: var(--color-ink-soft);
}

.map__scale-bar {
  display: block;
  width: 4rem;
  height: 6px;
  border: 2px solid var(--color-ink-soft);
  border-top: 0;
}

/* 가게 — 인디고 점 하나(쪽지 안의 유일한 강조색). 올리면 입구 쪽지가 Scale in */
.map__pin {
  position: absolute;
  left: 60%;
  top: 30%;
  display: block;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  text-decoration: none;
}

.map__dot {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-surface), var(--shadow-pill);
}

.map__tag,
.map__hint {
  position: absolute;
  left: 50%;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-pill);
  white-space: nowrap;
  translate: -50% 0;
}

.map__tag {
  bottom: calc(100% - 4px);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
}

.map__hint {
  top: calc(100% - 2px);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-note);
  color: var(--color-ink);
  opacity: 0;
  transform: scale(0.96);
  transform-origin: 50% 0;
  transition: opacity 180ms var(--ease-fluid), transform 180ms var(--ease-fluid);
}

.map__pin:focus-visible .map__hint {
  opacity: 1;
  transform: none;
}

@media (hover: hover) {
  .map__pin:hover .map__hint {
    opacity: 1;
    transform: none;
  }
}

.how {
  margin-top: var(--spacing-block);
}

.how li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--color-line);
}

.how li:first-child {
  border-top: 1px solid var(--color-line);
}

.how__k {
  font-size: var(--text-micro);
  line-height: var(--text-body--line-height);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  padding-top: 0.1em;
}

@media (max-width: 639px) {
  .map__label--quay {
    left: 44%;
  }

  .map__label--alder {
    left: 4%;
  }

  .map__tag {
    font-size: 0.75rem;
  }
}

/* 이 사이트에 대해 */
.about p + p {
  margin-top: 1em;
}

.about__notice {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h3);
  line-height: var(--text-lead--line-height); /* 두세 줄로 감기는 문장이라 제목 행간(1.2)보다 연다 */
  text-wrap: balance;
}

/* ── 꼬리 ─────────────────────────────────────────────────────────────── */

.foot {
  margin-top: var(--spacing-section);
  padding-top: var(--spacing-block);
  padding-bottom: calc(var(--spacing-block) * 0.75 + env(safe-area-inset-bottom));
  background: var(--color-band);
  font-size: var(--text-note);
  line-height: var(--text-note--line-height);
}

.foot__main {
  grid-column: col-start / note-end;
  display: grid;
  gap: 0.25rem 2rem;
}

.foot__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
  letter-spacing: -0.015em;
  margin-bottom: 0.75rem;
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  margin-top: 0.75rem;
  margin-left: -0.75rem;
}

.foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.75rem;
  font-weight: 600;
  text-decoration: none;
}

.foot__links a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

.foot__base {
  grid-column: col-start / note-end;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: var(--spacing-block);
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-ink-soft);
  color: var(--color-ink-soft);
}

.foot__notice {
  max-width: 40ch;
}

.foot__credit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -0.75rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

@media (hover: hover) {
  .foot__links a:hover,
  .foot__credit:hover {
    color: var(--color-accent);
  }
}

@media (min-width: 1024px) {
  .foot__main {
    grid-template-columns: auto auto 1fr;
    align-items: end;
  }

  .foot__name {
    grid-row: 1 / 3;
    margin-bottom: 0;
    margin-right: 2rem;
  }

  .foot__links {
    grid-column: 3;
    grid-row: 1 / 3;
    justify-content: flex-end;
    margin: 0;
  }
}

/* ── 드러남 — 로드 1회(이름 Reveal + Stagger)만 CSS 로. 블록 Scroll reveal 은 main.js 가
 * 화면에 들어오는 순간에만 막을 씌우고 같은 순간 걷는다(lessons #26 — 미리 숨겨 두지 않는다). ── */

@keyframes name-in {
  from {
    transform: translateY(40%);
    clip-path: inset(100% -10% -40% -10%);
  }
  to {
    transform: translateY(0);
    clip-path: inset(-20% -10% -40% -10%);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html.js .hero__name-in {
  animation: name-in 800ms var(--ease-reveal) both;
}

/* .note--desk 는 빠진다 — 미디어 쿼리로 display 가 바뀌는 요소는 창 크기가 1024 를 넘나들 때(전체 높이 캡처가 그렇게 한다)
 * 애니메이션이 처음부터 다시 돌아 투명한 채 찍힌다. 방주 하나는 처음부터 서 있어도 된다 */
html.js :is(.hero__eyebrow, .hero__status, .hero__bean, .hero__note:not(.note--desk), .hero__cta, .page-head__status, .jump) {
  animation: rise 560ms var(--ease-reveal) both;
}

html.js .hero__eyebrow {
  animation-delay: 60ms;
}

html.js :is(.hero__status, .page-head__status) {
  animation-delay: 300ms;
}

html.js :is(.hero__bean, .jump) {
  animation-delay: 380ms;
}

html.js .hero__bean + .note {
  animation-delay: 420ms;
}

html.js .hero__cta {
  animation-delay: 460ms;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.js :is(.hero__name-in, .hero__eyebrow, .hero__status, .hero__bean, .hero__note, .hero__cta, .page-head__status, .jump),
  .cup__steam {
    animation: none !important;
  }

  .cup__coffee,
  .row__price,
  .cta,
  .cta__arrow,
  .chip,
  .map__hint {
    transition-property: color, background-color, opacity;
  }

  .row:hover .row__price,
  .cta:hover .cta__arrow,
  .cta:active,
  .chip:active {
    transform: none;
  }

  .map__hint {
    transform: none;
  }
}