/* =========================================================================
   맛있는 스트리트푸드 이야기 — 코너 전용 스타일
   -------------------------------------------------------------------------
   이 코너는 trend.css(커버·적용 블록)와 cases.css(.bp-*: 머리·절·카드·행·출처)를
   그대로 쓴다. 세 코너가 한 사이트 안에서 같은 얼굴을 하고 있어야 하기 때문이다.
   여기 있는 것은 「음식이 주어」라는 이 코너만의 차이를 만드는 최소한이다.
     · .st-food   — 제목 아래 음식 이름 (우수사례의 원어명 자리에 대응)
     · .st-no     — 절 번호. 사업 사례가 아니라 이야기라 번호를 작게 붙인다
     · .st-taste  — 「맛의 자리」. 이 코너의 약속을 지키는 블록
   ========================================================================= */

/* ---------- 제목 아래 음식 이름 ---------- */
.st-food {
  font: 500 15px/1.6 'Pretendard', sans-serif;
  color: var(--terra);
  letter-spacing: .01em;
  margin: 10px 0 0;
  word-break: keep-all;
}

/* ---------- 절 번호 ---------- */
.bp-sec-head h2 .st-no {
  display: inline-block;
  margin-right: 12px;
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
  vertical-align: 2px;
}

/* ---------- 맛의 자리 ----------
   함의(.bp-take)와 같은 자리에 놓이지만 성격이 다르다. 함의는 일 이야기고
   이것은 음식 이야기다. 그래서 테두리 대신 왼쪽 굵은 선 하나로 「인용된
   목소리」처럼 세운다 — 읽는 사람이 여기서 속도를 늦추게 하려는 것이다. */
.st-taste {
  margin: 44px 0 0;
  padding: 30px 34px 32px;
  background: var(--section-soft);
  border-left: 3px solid var(--terra);
}
.st-taste .kick {
  font: 600 11px 'Pretendard', sans-serif;
  letter-spacing: .12em;
  color: var(--terra);
}
.st-taste p {
  margin: 14px 0 0;
  font: 400 17px/1.9 'Pretendard', sans-serif;
  color: var(--ink-2);
  word-break: keep-all;
}

/* ---------- 표지판 ----------
   우수사례 표지는 「국가 / 원어명 / 유형」 세 줄이라 원어명이 아래쪽 진한 스크림
   위에 앉는다. 이 코너는 원어명이 없어 음식 이름이 위쪽으로 올라붙고, 그 자리는
   스크림이 옅어 사진이 밝으면 글자가 묻힌다. 아래로 내려 앉힌다. */
.bp-plate-type { margin-top: auto; }
.bp-plate--photo .bp-plate-type {
  font: 500 14px/1.5 'Pretendard', sans-serif;
  color: rgba(245, 242, 236, 0.92);
  word-break: keep-all;
}

/* ---------- 허브 머리 ---------- */
.st-hero {
  padding: 84px 0 0;
}
.st-hero-inner { max-width: 820px; }
.st-hero h1 {
  font: 200 52px/1.2 'Pretendard', sans-serif;
  color: var(--ink);
  letter-spacing: -0.04em;
  margin: 20px 0 0;
}
.st-hero h1 span { font-weight: 500; }
.st-hero-lead {
  font: 400 17px/1.85 'Pretendard', sans-serif;
  color: var(--body);
  margin: 22px 0 0;
  word-break: keep-all;
}
.st-hero-note {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font: 400 14px/1.8 'Pretendard', sans-serif;
  color: var(--muted);
  word-break: keep-all;
}

/* ---------- 반응형 ---------- */
@media (max-width: 860px) {
  .st-hero { padding-top: 64px; }
  .st-hero h1 { font-size: 38px; }
  .st-taste { padding: 26px 24px 28px; }
  .st-taste p { font-size: 16px; }
}

@media (max-width: 560px) {
  .st-hero h1 { font-size: 32px; }
  .st-hero-lead { font-size: 16px; }
  .bp-sec-head h2 .st-no { display: block; margin: 0 0 6px; }
}