/* Home: the two core food tasks first, then editorial and Babdoduk's own story.
   Colors come from the semantic tokens in site.css; the warm canvas is the
   home page's named exception (see DESIGN_SYSTEM.md). */
.page-home {
  background: #f5f1e8;
  color: var(--color-ink);
  padding-bottom: 0;
}

.page-home::before {
  background:
    radial-gradient(ellipse 70% 50% at 8% -10%, rgba(236, 72, 153, 0.08), transparent 52%),
    radial-gradient(ellipse 55% 40% at 96% 8%, rgba(232, 215, 177, 0.5), transparent 58%);
}

.home {
  width: min(var(--container-editorial), calc(100% - 32px));
  margin: 0 auto;
  padding-bottom: 32px;
}

/* ── The 먹방 월드컵 promo (owner 2026-10-14): a pink-to-blue band in the world cup's own lettering (Jua,
   the letters the sync asks Google Fonts for) with two of its dish photos. Before the launch it counts
   down and opens the news page; while it runs its button starts the game; after the end
   js/worldcup-gate.js hides it (data-wc-show). It is the first thing of .home-top: on a phone above the
   copy, on a wide screen under it inside the paper band, where it costs the calendar below only a few
   pixels (tests/test_home_calendar.py keeps the whole month on the first screen). ── */
.home-wc {
  --wc-display: 'Jua', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  grid-area: promo;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  margin: 0 0 6px;
  padding: 4px 8px 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: linear-gradient(115deg, #be185d, #a21caf 50%, #4f46e5);
  box-shadow: 0 10px 26px rgba(126, 34, 206, 0.2), 0 2px 6px rgba(190, 24, 93, 0.16);
  color: #fff;
}

.home-wc[hidden],
.home-wc [hidden] {
  display: none;
}

/* Until js/worldcup-gate.js has decided (it sets html[data-wc-phase] in the same step as it shows the
   band), the band keeps its place, invisible, so the copy and the calendar below do not jump when it
   appears (owner 2026-10-16, layout shift). Without scripting it stays out, as before. */
@media (scripting: enabled) {
  html:not([data-wc-phase]) .home-wc[hidden] {
    display: grid;
    visibility: hidden;
  }
}

.home-wc::before {                        /* a soft light in the corner, behind the photos */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(ellipse 40% 90% at 4% 0%, rgba(255, 255, 255, 0.22), transparent 70%);
  pointer-events: none;
}

.home-wc-photos {
  position: relative;
  width: 46px;
  height: 36px;
}

.home-wc-photo {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 9px;
  object-fit: cover;
  background: #fce7f3;
  box-shadow: 0 6px 14px rgba(30, 29, 26, 0.28);
}

.home-wc-photo--a { top: 0; left: 0; rotate: -8deg; }
.home-wc-photo--b { top: 5px; right: 0; rotate: 7deg; }

/* Before the launch the two photos are blurred placeholders with no `src` (js/worldcup-gate.js sets it
   from data-wc-src once the world cup is live): owner 2026-10-14, nothing of the draw is revealed. */
html[data-wc-phase="soon"] .home-wc-photo {
  filter: blur(3px) saturate(0.6);
  background:
    radial-gradient(circle at 28% 30%, #fbbf24 0 22%, transparent 55%),
    radial-gradient(circle at 72% 64%, #fb7185 0 24%, transparent 58%),
    radial-gradient(circle at 40% 82%, #818cf8 0 20%, transparent 56%),
    #fbcfe8;
}

.home-wc-body {
  min-width: 0;
}

.home-wc-title,
.home-wc-state,
.home-wc-cta {
  font-family: var(--wc-display);
  font-weight: 400;                       /* Jua has one weight */
  font-synthesis: none;
  letter-spacing: 0;
}

.home-wc-title {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.2;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.home-wc-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin: 0;
}

.home-wc-state {
  font-size: 0.85rem;
  line-height: 1.25;
  color: #fde68a;                         /* warm yellow on the gradient: 6.9:1 on the pink end */
}

.home-wc-count {
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.6;
  white-space: nowrap;
}

.home-wc-count:empty {
  display: none;
}

.home-wc-count .wc-cd-rest {
  display: none;                          /* a phone keeps just "D-2" */
}

/* The link is a 44 px tap target (owner 2026-10-16); the white pill inside it (.home-wc-pill) stays 36 px
   on a phone, and the negative margin keeps the band as slim as the pill. The whole band is the link
   as well (::after). */
.home-wc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: -4px 0;
  color: #9d174d;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms ease;
}

.home-wc-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 0 rgba(30, 27, 75, 0.35), 0 6px 12px rgba(30, 27, 75, 0.2);
}

.home-wc-cta::after {                     /* the whole band is the link */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
}

.home-wc-cta:hover {
  transform: translateY(-1px);
}

.home-wc-cta:focus-visible {
  outline: none;
}

.home-wc-cta:focus-visible::after {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .home-wc-cta {
    transition: none;
  }

  .home-wc-cta:hover {
    transform: none;
  }
}

@media (forced-colors: active) {
  .home-wc {
    border-color: CanvasText;
  }

  .home-wc-pill {
    border: 1px solid ButtonText;
  }
}

/* A phone: the band is one slim row, so the soon button (the longer words) is a little tighter and its
   title keeps to one line next to it. */
@media (max-width: 440px) {
  .home-wc-cta--soon {
    font-size: 0.82rem;
  }

  .home-wc-cta--soon .home-wc-pill {
    gap: 4px;
    padding: 0 10px;
  }
}

/* A very narrow phone: the button is its emoji or arrow (its words stay for screen readers), so the band
   stays a single slim row. */
@media (max-width: 379px) {
  .home-wc-cta {
    width: 44px;
    margin: -4px -2px;                    /* a 40 px button in a 44 px target */
  }

  .home-wc-cta .home-wc-pill {
    padding: 0;
    width: 40px;
  }

  .home-wc-cta [data-i18n] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Room enough (a big phone, or the paper band of a wide screen): the whole countdown, bigger lettering. */
@media (min-width: 441px) and (max-width: 720px), (min-width: 861px) {
  .home-wc {
    column-gap: 16px;
    padding: 10px 14px 10px 12px;
  }

  .home-wc-photos {
    width: 70px;
    height: 54px;
  }

  .home-wc-photo {
    width: 46px;
    height: 46px;
    border-radius: 13px;
  }

  .home-wc-line {
    margin-top: 2px;
  }

  .home-wc-photo--b { top: 5px; }

  .home-wc-title {
    font-size: 1.3rem;
  }

  .home-wc-state {
    font-size: 1.05rem;
  }

  .home-wc-count {
    font-size: 12px;
  }

  .home-wc-count .wc-cd-rest {
    display: inline;
  }

  .home-wc-cta {
    margin: 0;
    font-size: 1rem;
  }

  .home-wc-pill,
  .home-wc-cta--soon .home-wc-pill {
    min-height: 44px;
    padding: 0 16px;
  }
}

/* Side by side (above 720 px): under the copy in the paper band, in line with it; the copy gives up the
   bottom padding the promo now provides. */
@media (min-width: 721px) {
  .home-wc {
    margin: 0 0 20px 40px;
    align-self: start;
  }

  .home-top:has(.home-wc:not([hidden])) .home-hero {
    padding-bottom: 0;
  }
}

@media (min-width: 721px) and (scripting: enabled) {
  html:not([data-wc-phase]) .home-top:has(.home-wc) .home-hero {
    padding-bottom: 0;                    /* the band's reserved place, as above */
  }
}

/* ── Top: who we are, the free-food calendar, the cafeteria line, then the collage. On wide
   screens a paper band sits behind the copy and the collage; the calendar has its own surface. ── */
.home-top {
  --hero-paper: #eee3cf;
  --hero-ink-soft: #5a534a;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  grid-template-areas:
    "hero collage"
    "promo collage"
    "cal cal"
    "menu menu";
  column-gap: var(--space-12);
  margin-top: var(--space-4);
}

.home-top::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1 / 3;
  border-radius: var(--radius-xl);
  background: var(--hero-paper);
  border: 1px solid rgba(30, 29, 26, 0.08);
}

.home-hero {
  grid-area: hero;
  position: relative;
  align-self: center;
  min-width: 0;
  padding: var(--space-8) 0 var(--space-8) 40px;
}

.home-hero-copy {
  min-width: 0;
}

.home-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--hero-ink-soft);
}

.home-kicker img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-divider);
  object-fit: cover;
  background: var(--color-surface);
}

.home-title {
  margin: var(--space-4) 0 0;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.055em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* A marker stroke under the question, not a gradient on the letters. */
.home-title-mark {
  background: linear-gradient(transparent 66%, rgba(236, 72, 153, 0.26) 66%, rgba(236, 72, 153, 0.26) 90%, transparent 90%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-6);
}

.home-actions .btn {
  height: auto;
  min-height: 52px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 700;
}

.home-actions .btn-secondary {
  background: var(--color-surface);
  border-color: rgba(30, 29, 26, 0.24);
}

/* Atmosphere collage: framed crops, no dish labels. */
.home-collage {
  grid-area: collage;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(10, minmax(0, 1fr));
  height: 300px;
  min-width: 0;
  margin: var(--space-8) 40px var(--space-8) 0;
}

.home-photo {
  position: relative;
  container-type: inline-size;
  min-width: 0;
  min-height: 0;
  padding: 6px;
  border-radius: 20px;
  background: var(--color-surface);
  border: 1px solid rgba(30, 29, 26, 0.1);
}

.home-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

.home-photo--main {
  grid-column: 3 / 11;
  grid-row: 1 / 11;
}

.home-photo--side,
.home-photo--low {
  z-index: 2;
  box-shadow: 0 10px 24px rgba(30, 29, 26, 0.14);
}

.home-photo--side {
  grid-column: 10 / 13;
  grid-row: 2 / 5;
  transform: rotate(2.5deg);
}

.home-photo--low {
  grid-column: 1 / 7;
  grid-row: 7 / 11;
  transform: rotate(-2deg);
}

/* ── 오늘의 꽁밥: one restrained surface. Answer line, month grid, the selected day and what
   comes next. One accent (today, food markers, links); ink marks the chosen date. No shadows,
   no inner cards, no cell borders. ── */
.home-cal {
  grid-area: cal;
  min-width: 0;
  margin-top: var(--space-4);
  padding: var(--space-6) 28px 18px;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid rgba(30, 29, 26, 0.1);
}

.home-cal-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-4);
}

.home-cal-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.035em;
}

.home-cal-date {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.home-cal-answer {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.02em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.home-cal[data-state="loading"] .home-cal-answer {
  font-weight: 500;
  color: var(--color-ink-muted);
}

.home-cal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "month"
    "day"
    "next";
  gap: var(--space-4);
}

.home-cal-month {
  grid-area: month;
  min-width: 0;
}

/* Before js/home-calendar.js draws the month: the height of a five-week month (header, weekday row and
   five 48 px rows), so the page below does not jump when it does. */
.home-cal-month:empty {
  min-height: 304px;
}

.home-cal-day {
  grid-area: day;
  min-width: 0;
}

.home-cal-next {
  grid-area: next;
  min-width: 0;
}

.home-cal-day[hidden],
.home-cal-next[hidden] {
  display: none;
}

/* Month header: the month on the left, then 오늘 (only away from this month) and the arrows. */
.hc-month {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 6px;
}

.hc-month-title {
  margin: 0 auto 0 4px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hc-nav,
.hc-today {
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  cursor: pointer;
  transition: background-color 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hc-nav {
  width: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.hc-nav svg {
  width: 18px;
  height: 18px;
  display: block;
}

.hc-nav[aria-disabled="true"] {
  color: #c5c0b6;
  cursor: default;
}

.hc-today {
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
}

.hc-today[hidden] {
  display: none;
}

.hc-nav:focus-visible,
.hc-today:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* The grid: Sunday first, seven even columns, 48px rows with the marker slot always reserved. */
.hc-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.hc-grid th {
  padding: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-ink-muted);
  text-align: center;
}

.hc-grid abbr {
  text-decoration: none;
}

.hc-cell {
  position: relative;
  height: 48px;
  padding: 0;
  text-align: center;
  vertical-align: top;
  cursor: pointer;
}

.hc-cell:focus {
  outline: none;
}

.hc-cell.is-off {
  cursor: default;
}

.hc-num {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: 2px;
  border: 1.5px solid transparent;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  transition: background-color 140ms cubic-bezier(0.22, 1, 0.36, 1), color 140ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hc-cell.is-other .hc-num {
  font-weight: 400;
  color: var(--color-ink-muted);
}

.hc-cell.is-off .hc-num {
  font-weight: 400;
  color: #c5c0b6;
}

.hc-cell.is-today .hc-num {
  font-weight: 800;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.hc-cell[aria-selected="true"] .hc-num {
  font-weight: 800;
  color: var(--color-surface);
  background: var(--color-ink);
  border-color: var(--color-ink);
}

.hc-cell.is-today[aria-selected="true"] .hc-num {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

@media (hover: hover) {
  .hc-cell:not(.is-off):not([aria-selected="true"]):hover .hc-num,
  .hc-nav:not([aria-disabled="true"]):hover,
  .hc-today:hover {
    background: rgba(30, 29, 26, 0.06);
  }

  .hc-ev-btn:hover .hc-ev-title,
  .hc-next-row:hover .hc-next-name {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

.hc-cell:not(.is-off):not([aria-selected="true"]):active .hc-num {
  background: rgba(30, 29, 26, 0.1);
}

.hc-cell:focus-visible .hc-num {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.hc-marks {
  display: flex;
  justify-content: center;
  gap: 3px;
  height: 5px;
  margin-top: 3px;
}

.hc-dot {
  box-sizing: border-box;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* A past event: hollow and muted, so what is still ahead stays dominant. */
.hc-dot.is-past {
  background: transparent;
  border: 1px solid var(--color-ink-muted);
}

/* A giveaway-only listing (owner decision 2026-10-14): a small 🎁 on the date's upper right,
   outside the free-food marker slot, so it never takes a dot's place or shifts the grid. */
.hc-gift {
  position: absolute;
  top: 0;
  left: min(calc(50% + 8px), calc(100% - 12px));
  width: 12px;
  height: 12px;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  pointer-events: none;
}

.hc-gift.is-past {
  opacity: 0.45;
  filter: grayscale(1);
}

.hc-ev-gift {
  white-space: nowrap;
}

/* The selected day: its events, each one tap from its details. */
.hc-day-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hc-rel {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--color-accent);
}

.hc-empty {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink-muted);
}

.hc-events {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hc-ev + .hc-ev {
  border-top: 1px solid var(--color-divider);
}

.hc-ev-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-height: 72px;
  padding: 12px 36px 12px 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hc-ev-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.hc-ev-meta {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-ink-muted);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.hc-ev-who {
  font-size: 12px;
  line-height: 1.45;
}

.hc-ev-time {
  font-weight: 700;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.hc-ev-chev {
  position: absolute;
  top: 15px;
  right: 6px;
  width: 18px;
  height: 18px;
  color: var(--color-ink-muted);
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hc-ev-btn[aria-expanded="true"] .hc-ev-chev {
  transform: rotate(180deg);
}

.hc-ev-btn:focus-visible,
.hc-next-row:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.hc-ev.is-past .hc-ev-title,
.hc-ev.is-past .hc-ev-time {
  color: var(--color-ink-muted);
}

.hc-ev-detail {
  padding: 0 0 14px;
}

.hc-ev-detail[hidden] {
  display: none;
}

.hc-ev-line {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.hc-ev-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 10px 0 0;
}

.hc-ev-apply.btn {
  gap: 4px;
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
}

.hc-ev-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
}

.hc-ev-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hc-ev-src {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--color-ink-muted);
}

/* 다가오는 꽁밥: later dates only, at most four rows, one tap to the day and its details. */
.hc-next-title {
  margin: 0 0 4px;
  padding-top: 14px;
  border-top: 1px solid var(--color-divider);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.hc-next-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hc-next-row {
  display: grid;
  grid-template-columns: 92px 44px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 7px 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hc-next-date,
.hc-next-time {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hc-next-date {
  color: var(--color-ink-muted);
}

.hc-next-name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-cal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-top: var(--space-4);
  padding-top: 14px;
  border-top: 1px solid var(--color-divider);
}

.home-cal-all {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
}

.home-cal-all:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.home-cal-pub {
  margin: 0;
  font-size: 12px;
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.home-cal-pub:empty {
  display: none;
}

/* Phones: in 다가오는 꽁밥 the date takes its own line, so a title keeps its width. */
@media (max-width: 640px) {
  .hc-next-row {
    grid-template-columns: 44px minmax(0, 1fr);
    row-gap: 0;
  }

  .hc-next-date {
    grid-column: 1 / -1;
  }

  .hc-next-date:empty {
    display: none;
  }
}

/* Wide enough for the split: the day and what is next on the left, the month on the right. */
@media (min-width: 768px) {
  .home-cal-body {
    grid-template-columns: minmax(0, 1fr) 364px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "day month"
      "next month";
    align-items: start;
    column-gap: 28px;
    row-gap: var(--space-6);
  }

  .home-cal-month {
    padding-left: 28px;
    border-left: 1px solid var(--color-divider);
  }
}

@media (forced-colors: active) {
  .hc-cell.is-today .hc-num {
    border-color: CanvasText;
  }

  .hc-cell[aria-selected="true"] .hc-num {
    forced-color-adjust: none;
    background: Highlight;
    border-color: Highlight;
    color: HighlightText;
  }

  .hc-dot {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .hc-dot.is-past {
    background: Canvas;
    border-color: CanvasText;
  }
}

/* Cafeteria line: outside the calendar, one row on the page. */
.home-menu-line {
  grid-area: menu;
  min-width: 0;
  margin-top: var(--space-3);
}

.home-status {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}

.home-status-label {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--color-accent-wash);
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 800;
}

.home-status[data-state="stale"] .home-status-label,
.home-status[data-state="error"] .home-status-label {
  background: #fff1e6;
  color: #9a3412;
}

.home-status-body {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  min-width: 0;
}

.home-status strong {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.02em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.home-status-meta {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-ink-muted);
  overflow-wrap: anywhere;
}

.home-status-meta:empty {
  display: none;
}

.home-status-cta {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
}

.home-status:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.home-status:hover strong {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.home-status[data-state="loading"] strong {
  color: var(--color-ink-muted);
}

/* ── Below the hero: three groups, each with one job. 01 바로가기 (act),
   02 읽어보기 (read), 03 밥도둑 소식 (catch up). Utility is heaviest. ── */
.home-group {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(30, 29, 26, 0.12);
}

.home-group.home-shelf {
  margin-top: var(--space-6);
  padding-top: 0;
  border-top: 0;
}

.home-group-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.home-group-copy {
  min-width: 0;
}

.home-group-head h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.035em;
}

.home-group-num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.home-group-purpose {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink-muted);
  word-break: keep-all;
}

/* Shelf: native horizontal scroll, never automatic. Level 2 (오늘의 꽁밥,
   메뉴 고르기) is wider and heavier than level 3 (map). */

.home-shelf-nav {
  display: flex;
  gap: 8px;
}

.home-shelf-nav[hidden] {
  display: none;
}

.home-shelf-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(30, 29, 26, 0.18);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}

.home-shelf-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.home-shelf-btn:hover {
  border-color: rgba(30, 29, 26, 0.4);
}

.home-shelf-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}

.home-shelf-track {
  --banner-primary: 400px;
  --banner-secondary: 280px;
  display: flex;
  gap: var(--space-4);
  margin: 0 -6px;
  padding: 6px 6px 14px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 6px;
  -webkit-overflow-scrolling: touch;
}

.home-banner {
  flex: 0 0 var(--banner-secondary);
  min-width: 0;
  scroll-snap-align: start;
}

.home-banner--primary {
  flex-basis: var(--banner-primary);
}

@media (min-width: 641px) {
  .home-banner {
    flex: 1 1 0;
  }

  .home-banner--primary {
    flex-grow: 1.45;
  }
}

.home-banner-link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 236px;
  padding: 20px 22px 18px;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid rgba(30, 29, 26, 0.1);
  color: var(--color-ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--ease), border-color var(--ease);
}

.home-banner-link:hover {
  transform: translateY(-2px);
  border-color: rgba(30, 29, 26, 0.24);
}

.home-banner-label {
  position: relative;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.14em;
  color: var(--color-ink-muted);
}

.home-banner-label b {
  margin-right: 4px;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}

.home-banner-title {
  position: relative;
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.035em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.home-banner--primary .home-banner-title {
  font-size: clamp(1.375rem, 2.1vw, 1.625rem);
  line-height: 1.24;
}

.home-banner-copy {
  position: relative;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #4a453e;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.home-banner-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-accent);
}

.home-banner-media {
  position: absolute;
  overflow: hidden;
}

.home-banner-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-banner-link:hover .home-banner-media img {
  transform: scale(1.02);
}

/* 메뉴 고르기: warm wash with a food crop on the right. */
.home-banner--pick .home-banner-link {
  padding-right: 46%;
  background: var(--color-accent-wash);
  border-color: rgba(190, 24, 93, 0.18);
}

.home-banner--pick .home-banner-media {
  top: 10px;
  right: 10px;
  bottom: 10px;
  width: calc(44% - 10px);
  border-radius: 14px;
}

/* Map: an illustrated strip across the top. */
.home-banner--map .home-banner-link {
  padding-top: 92px;
}

.home-banner--map .home-banner-media {
  top: 0;
  left: 0;
  right: 0;
  height: 76px;
}

.home-banner-media--map svg {
  width: 100%;
  height: 100%;
  display: block;
}

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

/* ── 02 읽어보기: featured story, the four desks, the photo record ── */
.home-more {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
}

.home-more:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Story and desks on the left, the photo record beside them. */
.home-read-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-template-areas:
    "feature photo"
    "desks photo";
  grid-template-rows: auto 1fr;
  gap: var(--space-4) var(--space-6);
  align-items: start;
}

.home-read-grid .home-feature {
  grid-area: feature;
}

.home-read-grid .home-desks-block {
  grid-area: desks;
}

.home-read-grid .explore-card {
  grid-area: photo;
  align-self: stretch;
  min-height: 340px;
}

/* The card takes the column's height; its photos fill it instead of setting it. */
.home-read-grid .explore-media {
  position: absolute;
  inset: 0;
}

.home-read-grid .explore-collage {
  min-height: 0;
  height: 100%;
}

.home-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  color: inherit;
  text-decoration: none;
}

.home-feature[hidden] {
  display: none;
}

.home-feature-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}

.home-feature-meta {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.home-feature-title {
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.home-feature-summary {
  font-size: 15px;
  line-height: 1.6;
  color: #4a453e;
  overflow-wrap: anywhere;
}

.home-feature:hover .home-feature-title {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.home-desks-block {
  min-width: 0;
}

.home-read-sub {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
}

.home-desks {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-divider);
}

.home-desks a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 52px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.home-desk-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-ink-muted);
}

.home-desks a:hover span:last-child {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── 03 밥도둑 소식: who we are, then current information above a quiet record.
   Only the current block is a card with the accent; past activity is muted text
   with one link, so the record never competes with what is open now. ── */
.home-news-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-8);
  align-items: start;
}

.home-news-name {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.home-news-name .title-en {
  font-size: 0.6em;
  font-weight: 600;
  color: var(--color-ink-muted);
}

.home-news-sub {
  margin: var(--space-2) 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink-muted);
}

.home-news-story {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: var(--space-2);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
}

.home-news-story:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.home-news-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.home-news-block {
  min-width: 0;
}

.home-news-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  word-break: keep-all;
}

.home-news-block--current {
  padding: 16px 20px 10px;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  box-shadow: inset 4px 0 0 var(--color-accent);
}

.home-news-block--current .home-news-kicker {
  color: var(--color-accent);
}

.home-news-block--record {
  padding: var(--space-4) 4px 0;
  border-top: 1px dashed rgba(30, 29, 26, 0.22);
}

.home-news-block--record .home-news-kicker {
  color: var(--color-ink-muted);
}

.home-news-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  color: var(--color-ink);
  text-decoration: none;
}

.home-news-row--current {
  justify-content: space-between;
  min-height: 52px;
}

.home-news-row--record {
  display: inline-flex;
  gap: 6px;
  margin-top: 2px;
}

.home-news-text {
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.home-news-row--current .home-news-text {
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.03em;
}

.home-news-row--record .home-news-text {
  font-size: 15px;
  font-weight: 700;
}

.home-news-arrow {
  flex: 0 0 auto;
  color: var(--color-ink-muted);
  transition: transform var(--ease);
}

.home-news-row--current .home-news-arrow {
  color: var(--color-accent);
  font-size: 18px;
}

.home-news-row:hover .home-news-text {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.home-news-row:hover .home-news-arrow {
  transform: translateX(3px);
}

.home-actions .btn:focus-visible,
.home-banner-link:focus-visible,
.home-shelf-btn:focus-visible,
.home-more:focus-visible,
.home-feature:focus-visible,
.home-desks a:focus-visible,
.home-news-row:focus-visible,
.home-news-story:focus-visible,
.explore-card:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.home-status:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -4px;
  border-radius: 14px;
}

/* ── Photo record card (existing editorial treatment) ── */
.explore-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 320px;
  border-radius: 24px;
  background: #fcfaf5;
  border: 1px solid rgba(25, 23, 20, 0.09);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.explore-card:hover,
.explore-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(25, 23, 20, 0.16);
}

.explore-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.explore-media {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.explore-collage {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-rows: 1.12fr 0.88fr;
  gap: 3px;
  height: 100%;
  min-height: 280px;
  background: #191714;
}

.explore-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #fcfaf5;
  border: 1px solid rgba(25, 23, 20, 0.08);
}

.explore-badge svg {
  width: 16px;
  height: 16px;
  display: block;
}

.explore-copy {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  padding: 12px 14px 13px;
  border-radius: 16px;
  background: rgba(25, 23, 20, 0.86);
  color: #fcfaf5;
}

.explore-copy h3 {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.25;
  margin-bottom: 4px;
}

.explore-copy p {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(252, 250, 245, 0.84);
  max-width: 34ch;
}

.explore-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #e8d7b1;
}

.explore-cta .arr {
  display: inline-block;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.explore-card:hover .explore-cta .arr,
.explore-card:focus-visible .explore-cta .arr {
  transform: translateX(4px);
}

/* ── Responsive: one task-first column on phones ── */
@media (max-width: 1100px) {
  .home-top {
    column-gap: var(--space-8);
  }

  .home-wc {
    margin-left: 28px;
  }

  .home-hero {
    padding: 28px 0 28px 28px;
  }

  .home-collage {
    height: 280px;
    margin: 28px 28px 28px 0;
  }
}

@media (max-width: 960px) {
  .home-hero {
    padding: 28px 0 28px 24px;
  }

  .home-wc {
    margin-left: 24px;
  }

  .home-collage {
    height: 260px;
    margin: 28px 24px 28px 0;
  }

  .home-shelf-track {
    --banner-primary: 44%;
    --banner-secondary: 34%;
  }

  .home-read-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "feature"
      "desks"
      "photo";
    grid-template-rows: auto;
  }

  .home-news-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}

/* One task-first column once the copy and the collage no longer fit side by side. */
/* Phones and narrow tablets: copy on its own paper, then the calendar, the cafeteria line and,
   last, the decorative collage. The schedule is never behind the pictures. */
@media (max-width: 720px) {
  .home-top {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "promo"
      "hero"
      "cal"
      "menu"
      "collage";
  }

  .home-top::before {
    display: none;
  }

  .home-wc {
    margin: 0 0 6px;
    align-self: auto;
  }

  .home-hero {
    padding: 28px 24px;
    border-radius: var(--radius-xl);
    background: var(--hero-paper);
    border: 1px solid rgba(30, 29, 26, 0.08);
  }

  .home-collage {
    height: 250px;
    margin: var(--space-6) 0 0;
  }
}

/* Touch widths swipe the shelf; the buttons are a desktop convenience. */
@media (max-width: 767px) {
  .home-shelf-nav {
    display: none;
  }
}

@media (max-width: 640px) {
  .home {
    width: calc(100% - 32px);
  }

  .home-hero {
    padding: 22px 18px 20px;
    border-radius: var(--radius-lg);
  }

  .home-cal {
    margin-top: var(--space-3);
    padding: 18px 12px 12px;
  }

  .home-cal-head,
  .home-cal-day,
  .home-cal-next,
  .home-cal-foot {
    padding-inline: 4px;
  }

  .home-title {
    font-size: clamp(2.1rem, 10.4vw, 2.6rem);
  }

  /* Side by side when both labels fit (390px), stacked on narrower phones. */
  .home-actions {
    margin-top: var(--space-4);
  }

  .home-actions .btn {
    flex: 1 1 auto;
    min-height: 48px;
    padding: 10px 14px;
  }

  .home-collage {
    height: 196px;
  }

  .home-photo {
    padding: 4px;
    border-radius: 16px;
  }

  .home-photo img {
    border-radius: 12px;
  }

  .home-photo--main {
    grid-column: 1 / 8;
    grid-row: 1 / 11;
  }

  .home-photo--side {
    grid-column: 8 / 13;
    grid-row: 1 / 6;
    transform: rotate(2deg);
  }

  .home-photo--low {
    grid-column: 7 / 13;
    grid-row: 6 / 11;
    transform: rotate(-1.5deg);
  }

  /* Edge-to-edge shelf so the next card visibly peeks past the screen edge. */
  .home-shelf-track {
    --banner-primary: 84%;
    --banner-secondary: 70%;
    gap: var(--space-3);
    margin: 0 -16px;
    padding: 6px 16px 14px;
    scroll-padding-inline: 16px;
    scroll-snap-type: x mandatory;
  }

  .home-banner-link {
    min-height: 224px;
    padding: 18px 18px 16px;
  }

  .home-banner--pick .home-banner-link {
    padding-right: 44%;
  }

  .home-group {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
  }

  .home-group-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .home-desks {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-read-grid .explore-card {
    min-height: 280px;
  }

  .home-news-block--current {
    padding: 14px 16px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .explore-card,
  .explore-cta .arr,
  .home-banner-link,
  .home-banner-media img,
  .home-shelf-btn,
  .home-news-arrow,
  .hc-num,
  .hc-nav,
  .hc-today,
  .hc-ev-chev {
    transition: none;
  }

  .home-banner-link:hover,
  .home-banner-link:hover .home-banner-media img,
  .home-news-row:hover .home-news-arrow {
    transform: none;
  }

  .explore-card:hover,
  .explore-card:focus-visible,
  .explore-card:hover .explore-cta .arr,
  .explore-card:focus-visible .explore-cta .arr {
    transform: none;
  }
}