/* =========================================================
   FOODTRUCK1 — 세계 푸드트럭 우수사례 (case-*.html · 홈/허브 카드)
   해외 푸드트럭·스트리트푸드 운영 우수사례 코너.
   styles.css 의 토큰·유틸과 trend.css 의 기사 뼈대(.article-head/.article-col/
   .trend-apply/.issue-nav)를 그대로 쓰고, 이 파일은 「사례」에만 필요한 것을 더한다.

   접두사는 .bp- (best practice) 다. 홈의 「대표 사례」가 이미 .case 를 쓰고 있고,
   그것은 **우리가 한 일**이다. 이 코너는 **남이 한 일**이라 이름부터 갈라 둔다 —
   두 개가 같은 클래스를 나눠 쓰면 언젠가 한쪽 스타일이 다른 쪽으로 새고,
   그 순간 남의 사례가 우리 실적처럼 보이게 된다.

   원칙 두 가지 — 지키지 않으면 코너의 존재 이유가 사라진다.
   1) 사례마다 출처(매체·확인일·원문 링크)를 반드시 노출한다.
   2) 표지는 **사진 + 활자 오버레이**다(2026-08-20). 활자만으로는 격이 떨어져
      주제를 환기하는 무료 라이선스 사진을 깔았다. 다만 국가 코드·원어명·유형은
      그대로 얹어 둔다 — 사진은 그 현장이 아니지만 이 셋은 전부 사실이고,
      이것이 사라지면 카드가 우리 실적처럼 보인다. 사진이 없으면 활자판으로 폴백.
   ========================================================= */

/* ---------- 카드 (홈 섹션 · 허브 목록 공용) ---------- */
.bp-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line-card);
  transition: border-color 0.2s ease;
}
.bp-card:hover { border-color: var(--ink); }
.bp-card:hover .issue-more { opacity: 0.55; }

/* 활자판 표지 — 트렌드의 사진 표지(.issue .shot, 208px)와 같은 높이로 맞춰
   홈에서 두 코너가 나란히 서도 카드 윗줄이 어긋나지 않게 한다. */
.bp-plate {
  height: 208px; background: var(--ink); color: var(--paper);
  padding: 22px 24px; display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
}
.bp-plate::after {
  /* 오른쪽 아래 사분원 — 사진 없는 면이 허전해 보이지 않게 하는 최소한의 장치 */
  content: ""; position: absolute; right: -70px; bottom: -70px;
  width: 190px; height: 190px; border-radius: 50%;
  border: 1px solid rgba(245, 242, 236, 0.14);
}
.bp-plate-flag {
  align-self: flex-start;
  font: 600 12px 'Inter', sans-serif; letter-spacing: 0.16em;
  border: 1px solid rgba(245, 242, 236, 0.45); padding: 4px 9px;
}
.bp-plate-en {
  margin-top: auto;
  font: 300 24px/1.3 'Inter', sans-serif; letter-spacing: -0.01em;
  color: var(--paper); position: relative; z-index: 1;
}
.bp-plate-type {
  font: 400 13px 'Pretendard', sans-serif; color: rgba(245, 242, 236, 0.62);
  position: relative; z-index: 1;
}

.bp-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
/* 한글이 섞이는 줄이라 .kick(자간 0.26em)을 쓰지 않는다 —
   한글은 자간을 벌리면 낱글자로 흩어져 읽히지 않는다. 날짜만 Inter. */
.bp-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font: 400 13px 'Inter', sans-serif; letter-spacing: 0.06em; color: var(--muted);
}
.bp-meta .loc {
  font-family: 'Pretendard', sans-serif; letter-spacing: 0; color: var(--teal); font-weight: 600;
}
.bp-card h3 {
  font: 600 19px/1.5 'Pretendard', sans-serif; color: var(--ink);
  letter-spacing: -0.01em; margin-top: 10px;
}
.bp-card p {
  font: 400 14px/1.75 'Pretendard', sans-serif; color: var(--body); margin-top: 10px;
}
.bp-card .bp-tags { margin-top: 14px; }
.bp-card .issue-more { margin-top: auto; padding-top: 16px; }
/* 밑줄을 border-bottom 대신 ::after 로 긋는다 — 글자 폭이 아니라 고정 폭이라
   카드마다 밑줄 길이가 들쭉날쭉해 보이지 않는다. */
.bp-card .issue-more, .bp-row .issue-more { border-bottom: 0; }
.bp-card .issue-more::after, .bp-row .issue-more::after {
  content: ""; display: block; width: 74px; height: 1px; background: var(--ink); margin-top: 3px;
}

/* 사진 표지 — 활자판 위에 사진을 깔고 그 위에 다시 활자를 얹는다.
   그라디언트는 위(국가 코드)와 아래(원어명·유형) 양쪽에 건다. 사진 한가운데는
   덜 덮어 사진이 탁해지지 않게 한다 — 트렌드 히어로에서 배운 것과 같은 이유다. */
.bp-plate--photo::after { display: none; }        /* 사분원 장식은 사진에서 지운다 */
.bp-plate--photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 0.5s ease;
}
.bp-plate--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(22, 20, 15, 0.94) 0px, rgba(22, 20, 15, 0.72) 96px, rgba(22, 20, 15, 0) 156px),
    linear-gradient(to bottom, rgba(22, 20, 15, 0.55) 0px, rgba(22, 20, 15, 0) 74px);
}
.bp-plate--photo > span { position: relative; z-index: 2; text-shadow: 0 1px 3px rgba(22, 20, 15, 0.45); }
.bp-plate--photo .bp-plate-flag { border-color: rgba(245, 242, 236, 0.75); }
.bp-card:hover .bp-plate--photo img { transform: scale(1.03); }

/* ---------- 행 (허브 목록 전용) ----------
   홈은 카드, 허브는 행 — 트렌드의 「발행한 호」(.issue-row)와 같은 규칙이다(2026-08-20).
   코너에 들어온 사람에게는 표지보다 «이 사례에 무슨 이야기가 있는지»가 먼저라,
   표지 옆에 절 제목을 편다. 표지(.bp-plate)는 카드와 같은 것을 그대로 쓴다. */
.bp-rows { border-top: 1px solid var(--ink); }
.bp-row {
  display: grid; grid-template-columns: 372px 1fr; gap: 40px; align-items: start;
  padding: 34px 0; border-bottom: 1px solid var(--line);
}
.bp-row .bp-plate { height: 209px; }          /* 372px 폭의 16:9 */
.bp-row:hover .bp-plate--photo img { transform: scale(1.03); }
.bp-row:hover .issue-more { opacity: 0.55; }
.bp-row-body { display: flex; flex-direction: column; }
.bp-row .bp-meta { margin-top: 2px; justify-content: flex-start; gap: 14px; }
.bp-row h3 {
  font: 600 25px/1.4 'Pretendard', sans-serif; color: var(--ink);
  letter-spacing: -0.01em; margin-top: 10px;
}
/* 절 제목 목록 — 번호(.ir-no)는 트렌드와 같은 글자를 쓴다(trend.css).
   호의 행과 달리 국가 깃발은 없다. 사례는 한 건이 곧 한 나라라 줄마다 반복할 이유가 없다. */
.bp-row-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.bp-row-list li {
  display: grid; grid-template-columns: 22px 1fr; align-items: baseline; gap: 10px;
  font: 400 15.5px/1.6 'Pretendard', sans-serif; color: var(--body);
}
.bp-row .bp-tags { margin-top: 18px; }
.bp-row .issue-more { margin-top: 20px; }

/* ---------- 운영 영역 칩 ----------
   카드에서는 <span>(분류), 본문에서는 <a>(그 영역을 맡는 서비스 페이지로 가는 길). */
.bp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-chip {
  font: 500 12.5px 'Pretendard', sans-serif; color: var(--body);
  border: 1px solid var(--line); padding: 5px 10px; white-space: nowrap;
}
a.bp-chip { transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
a.bp-chip:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- 사례 본문 ---------- */
.bp-head { padding-top: 60px; }
.bp-crumb {
  font: 400 13px 'Pretendard', sans-serif; color: var(--muted); margin-bottom: 20px;
}
.bp-crumb a { border-bottom: 1px solid var(--line); }
.bp-crumb a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.bp-flag {
  font: 600 12px 'Inter', sans-serif; letter-spacing: 0.14em;
  color: var(--ink); border: 1px solid var(--ink); padding: 3px 8px;
}
/* .article-kicker 의 .no 는 원래 호수 자리다. 사례에서는 개최지가 그 자리에 온다. */
.bp-head .article-kicker .no { color: var(--teal); }
.bp-en {
  font: 300 15px 'Inter', sans-serif; color: var(--muted); margin-top: 10px; letter-spacing: 0;
}
.bp-head .lead b { color: var(--ink); font-weight: 600; }
.bp-head .bp-tags { margin-top: 26px; }
.bp-tags-note { font: 400 13px 'Pretendard', sans-serif; color: var(--muted); margin-top: 10px; }

/* 핵심 수치 — 사례를 «좋더라»가 아니라 숫자로 붙잡는 자리 */
.bp-stats { padding: 44px 0 0; }
.bp-stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-top: 14px;
}
.bp-stat { background: var(--card); padding: 24px 20px; }
.bp-stat .v {
  font: 300 27px/1.2 'Inter', sans-serif; color: var(--terra); letter-spacing: -0.02em;
}
.bp-stat .l {
  font: 400 13.5px/1.7 'Pretendard', sans-serif; color: var(--body); margin-top: 10px;
}

/* 절 */
.bp-sec { border-top: 1px solid var(--ink); padding: 46px 0 0; margin-top: 52px; }
.bp-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 16px; }
.bp-sec h2 {
  font: 600 27px/1.45 'Pretendard', sans-serif; color: var(--ink); letter-spacing: -0.01em;
}
.bp-sec-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-sec-tags .bp-chip { font-size: 12px; padding: 4px 8px; color: var(--muted); }
.bp-sec .body { margin-top: 20px; }
.bp-sec .body p {
  font: 400 16px/1.95 'Pretendard', sans-serif; color: var(--body); margin-top: 16px;
}
.bp-sec .body p:first-child { margin-top: 0; }
.bp-sec .body b { color: var(--ink-2); font-weight: 600; }

/* 현장에 주는 함의 — 사례를 우리 현장으로 끌어오는 한 문단.
   트렌드의 .tr-take(흰 면)와 반대로 잉크 면을 쓴다. 사례 페이지에서 여기가
   유일하게 «우리 판단»인 자리라, 인용문임을 면 색으로 구분한다. */
.bp-take {
  margin-top: 56px; background: var(--ink); color: var(--paper); padding: 34px 36px;
}
.bp-take .kick {
  font-family: 'Pretendard', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 0.02em; text-transform: none; color: var(--ember);
}
.bp-take p {
  font: 400 16.5px/1.9 'Pretendard', sans-serif; color: rgba(245, 242, 236, 0.9); margin-top: 12px;
}
.bp-take b { color: var(--paper); font-weight: 600; }

/* 근거·출처 */
.bp-sources { padding: 56px 0 0; }
.bp-sources h2 { font: 600 20px 'Pretendard', sans-serif; color: var(--ink); }
.bp-sources .note { font: 400 13.5px/1.7 'Pretendard', sans-serif; color: var(--muted); margin-top: 8px; }
.bp-sources ul { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.bp-sources li {
  padding: 15px 0; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 5px;
}
.bp-sources li a {
  font: 500 15px/1.6 'Pretendard', sans-serif; color: var(--ink-2);
  border-bottom: 1px solid var(--line); align-self: flex-start;
}
.bp-sources li a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.bp-sources li span { font: 400 13px 'Pretendard', sans-serif; color: var(--muted); }

/* ---------- 반응형 ---------- */
@media (max-width: 960px) {
  .bp-row { grid-template-columns: 300px 1fr; gap: 28px; }
  .bp-row .bp-plate { height: 169px; }
  .bp-row h3 { font-size: 22px; }
  .bp-stat-grid { grid-template-columns: 1fr 1fr; }
  .bp-stat-grid .bp-stat:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 860px) {
  .bp-plate { height: 178px; padding: 18px 20px; }
  /* 표지 위, 제목 아래로 쌓는다(트렌드 행과 같다) */
  .bp-row { grid-template-columns: 1fr; gap: 18px; padding: 28px 0; }
  .bp-row .bp-plate { height: 178px; }
  .bp-row h3 { font-size: 21px; }
  .bp-row-list li { font-size: 15px; grid-template-columns: 20px 1fr; gap: 8px; }
  .bp-plate-en { font-size: 21px; }
  .bp-head { padding-top: 44px; }
  .bp-sec { padding-top: 34px; margin-top: 38px; }
  .bp-sec h2 { font-size: 22px; }
  .bp-sec .body p { font-size: 15px; line-height: 1.9; }
  .bp-take { padding: 26px 22px; margin-top: 44px; }
  .bp-take p { font-size: 15.5px; }
  .bp-stats { padding-top: 34px; }
}
@media (max-width: 460px) {
  .bp-stat-grid { grid-template-columns: 1fr; }
  .bp-stat-grid .bp-stat:last-child:nth-child(odd) { grid-column: auto; }
  .bp-plate-en { font-size: 19px; }
  .bp-card h3 { font-size: 18px; }
}