/* ⑭ 리뷰 — 검정 배경 (시안 y 12638~13694, 높이 1056)
   PC: 1920 기준 무대(.s14-stage) 안에 시안 좌표 그대로 배치. 화면이 1920보다 좁으면 --u 로 같은 비율로 줄인다.
   휴대폰·태블릿(1279 이하): 제목 → 알약 → 말풍선 → 배지 → 리뷰 카드(옆으로 넘기기) → 찜 순서로 한 줄.
   (태블릿 769~1279는 맨 아래 블록에서 배지를 카드 위 빈 원 자리에 올리고, 찜을 가운데로 놓는다) */
.s14 {
  --s14-gold: #dbc87b;
  --s14-green: #005633;
  background: #121212 url(../assets/s14/bg.jpg) center top / 1920px auto repeat;
  color: var(--c-white);
  container-type: inline-size;
}
.s14-stage {
  --u: min(1px, calc(100cqw / 1920));
  position: relative;
  width: calc(1920 * var(--u));
  height: calc(1056 * var(--u));
  margin: 0 auto;
}

/* 제목: 본가왕뼈감자탕에 [맛] 바람이 분다~ */
.s14-title { position: absolute; inset: 0 0 auto 0; height: 0; font-size: calc(62 * var(--u)); line-height: 1; letter-spacing: -0.06em; text-wrap: nowrap; white-space: nowrap; }
.s14-t-l, .s14-t-r { position: absolute; top: calc(213 * var(--u)); }
.s14-t-l { left: calc(448 * var(--u)); }
.s14-t-r { left: calc(1122 * var(--u)); }
.s14-mat { position: absolute; left: calc(944 * var(--u)); top: calc(124 * var(--u)); width: calc(180 * var(--u)); height: calc(180 * var(--u)); font-size: calc(170 * var(--u)); line-height: 1; letter-spacing: 0; text-align: center; }
.s14-mat-txt { position: relative; z-index: 2; color: var(--s14-gold); text-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.55); }
.s14-mat-echo { position: absolute; z-index: 1; left: calc(-26 * var(--u)); top: calc(10 * var(--u)); width: 100%; font-size: 1.12em; color: rgba(219,200,123,.14); pointer-events: none; }
.s14-mat-echo--2 { left: 0; top: 0; font-size: 1em; color: rgba(219,200,123,.5); opacity: 0; transform-origin: 50% 55%; }
/* 메아리: 금색 '맛'에서 같은 글자가 퍼져 나가며 사라진다 */
.js .s14-mat.in .s14-mat-echo--2 { animation: s14-echo 2.6s ease-out .5s infinite; }
@keyframes s14-echo {
  0% { opacity: .55; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.65); }
  100% { opacity: 0; transform: scale(1.65); }
}

/* 초록 알약 */
.s14-pill {
  position: absolute; left: calc(783 * var(--u)); top: calc(317 * var(--u));
  width: calc(354 * var(--u)); height: calc(58 * var(--u));
  border-radius: calc(12 * var(--u)); background: var(--s14-green);
  font-size: calc(24 * var(--u)); line-height: calc(58 * var(--u)); font-weight: 700; letter-spacing: -0.05em; text-align: center;
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.35);
}

/* 말풍선 2개 — 톡 튀어나온 뒤 살짝 둥실둥실 */
.s14-bub {
  position: absolute; z-index: 4;
  width: calc(363 * var(--u)); height: calc(50 * var(--u));
  border-radius: calc(25 * var(--u)); background: var(--s14-gold); color: #151515;
  font-size: calc(19 * var(--u)); line-height: calc(50 * var(--u)); font-weight: 700; letter-spacing: -0.06em; text-align: center; white-space: nowrap;
}
.s14-bub::after { content: ""; position: absolute; top: calc(100% - 1px); width: calc(20 * var(--u)); height: calc(18 * var(--u)); background: var(--s14-gold); }
.s14-bub--l { left: calc(217 * var(--u)); top: calc(337 * var(--u)); }
.s14-bub--l::after { left: calc(306 * var(--u)); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.s14-bub--r { left: calc(1307 * var(--u)); top: calc(368 * var(--u)); }
.s14-bub--r::after { left: calc(62 * var(--u)); clip-path: polygon(0 0, 100% 0, 0 100%); }
.js .s14-bub.in { animation: pop .55s ease-out both, s14-bob 3.2s ease-in-out .6s infinite; }
.js .s14-bub--r.in { animation-delay: .25s, 1.1s; }
@keyframes s14-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-7 * var(--u))); } }

/* 리뷰 카드 줄 (옆으로 넘기기) */
.s14-reviews { position: absolute; z-index: 1; left: 0; top: calc(453 * var(--u)); width: 100%; height: calc(478 * var(--u)); }
.s14-track {
  display: flex; height: 100%; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.s14-track::-webkit-scrollbar { display: none; }
.s14-track:focus-visible { outline: 3px solid var(--s14-gold); outline-offset: 4px; }
.s14-card { flex: 0 0 auto; height: 100%; scroll-snap-align: start; }
.s14-card img { width: 100%; height: 100%; object-fit: cover; }
.s14-card--1 { width: calc(221 * var(--u)); }
.s14-card--2 { width: calc(336 * var(--u)); margin-left: calc(22 * var(--u)); }
.s14-card--3 { width: calc(336 * var(--u)); margin-left: calc(34 * var(--u)); }
.s14-card--4 { width: calc(336 * var(--u)); margin-left: calc(28 * var(--u)); }
.s14-card--5 { width: calc(336 * var(--u)); margin-left: calc(20 * var(--u)); }
.s14-card--6 { width: calc(220 * var(--u)); margin-left: calc(31 * var(--u)); }

/* 재방문율 83% 금색 배지 — 숫자가 올라간 뒤 반짝 강조 */
.s14-badge {
  --bu: var(--u);
  position: absolute; z-index: 3;
  left: calc(778 * var(--u)); top: calc(518 * var(--u));
  width: calc(364 * var(--bu)); height: calc(364 * var(--bu));
  text-align: center;
  filter: drop-shadow(0 calc(10 * var(--bu)) calc(22 * var(--bu)) rgba(0,0,0,.55));
}
.s14-seal { position: absolute; inset: 0; width: 100%; height: 100%; }
.s14-badge-k { position: absolute; left: 0; right: 0; top: calc(101 * var(--bu)); font-size: calc(24 * var(--bu)); line-height: calc(30 * var(--bu)); font-weight: 700; letter-spacing: -0.04em; }
.s14-badge-v {
  position: absolute; left: 0; right: 0; top: calc(128 * var(--bu));
  font-size: calc(136 * var(--bu)); line-height: calc(150 * var(--bu)); letter-spacing: -0.06em;
  background: linear-gradient(180deg, #fff6c9 8%, #f2cf6c 38%, #c48a2a 66%, #f6dd94 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.s14-stars { position: absolute; left: 0; right: 0; top: calc(280 * var(--bu)); font-size: calc(26 * var(--bu)); line-height: 1; color: #e9c260; letter-spacing: calc(8 * var(--bu)); }
.s14-stars span:nth-child(2) { font-size: 1.35em; }
.js .s14-badge.in { animation: pop .6s ease-out both, s14-glow 1.1s ease-in-out 1.35s 2; }
@keyframes s14-glow {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 calc(10 * var(--bu)) calc(22 * var(--bu)) rgba(0,0,0,.55)); }
  50% { transform: scale(1.07); filter: drop-shadow(0 0 calc(34 * var(--bu)) rgba(246,214,120,.75)); }
}

/* 오른쪽 아래 매운 찜 + 김 */
.s14-pan { position: absolute; z-index: 2; left: calc(1280 * var(--u)); top: calc(462 * var(--u)); width: calc(640 * var(--u)); height: calc(594 * var(--u)); pointer-events: none; }
.s14-pan img { width: 100%; height: 100%; }
.s14-smoke { position: absolute; width: calc(170 * var(--u)); height: calc(170 * var(--u)); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.5) 0%, rgba(255,255,255,.18) 45%, rgba(255,255,255,0) 70%); filter: blur(calc(10 * var(--u))); opacity: 0; animation: s14-smoke 7s ease-in-out infinite; }
.s14-smoke--1 { left: calc(250 * var(--u)); top: calc(40 * var(--u)); }
.s14-smoke--2 { left: calc(380 * var(--u)); top: calc(-20 * var(--u)); animation-delay: 1.8s; }
.s14-smoke--3 { left: calc(160 * var(--u)); top: calc(110 * var(--u)); animation-delay: 3.5s; width: calc(130 * var(--u)); height: calc(130 * var(--u)); }
.s14-smoke--4 { left: calc(470 * var(--u)); top: calc(70 * var(--u)); animation-delay: 5.1s; }
@keyframes s14-smoke {
  0% { opacity: 0; transform: translate(0, calc(40 * var(--u))) scale(.7); }
  30% { opacity: .8; }
  100% { opacity: 0; transform: translate(calc(-40 * var(--u)), calc(-170 * var(--u))) scale(1.8); }
}

/* 검토 표시(.review [data-note])가 position 을 relative 로 바꾸지 않도록 같은 세기로 다시 지정 */
.s14 .s14-bub, .s14 .s14-reviews, .s14 .s14-badge { position: absolute; }

/* ---------- 휴대폰 (태블릿 1279 이하도 같은 한 줄 쌓기) ---------- */
@media (max-width: 1279px) {
  .s14-stage { --u: 1px; width: auto; height: auto; padding: 64px 16px 0; display: flex; flex-direction: column; align-items: center; }
  .s14-title { position: relative; inset: auto; height: auto; display: block; text-align: center; font-size: clamp(26px, 7.6vw, 40px); line-height: 1.3; white-space: normal; }
  .s14-t-l, .s14-t-r { position: static; }
  .s14-mat { position: relative; left: auto; top: auto; display: inline-block; vertical-align: middle; width: 1.25em; height: 1.25em; margin: 0 .05em; font-size: 2.1em; line-height: 1.2; }
  .s14-mat-echo { left: -.15em; top: .05em; }
  .s14-mat-echo--2 { left: 0; top: 0; }
  .s14-pill { position: static; width: auto; height: auto; margin-top: 14px; padding: 10px 22px; border-radius: 12px; font-size: 16px; line-height: 1.4; }
  .s14-bub { position: relative; left: auto; top: auto; width: auto; max-width: 100%; height: auto; margin-top: 22px; padding: 11px 20px; border-radius: 26px; font-size: 15px; line-height: 1.4; white-space: normal; }
  .s14-bub::after { width: 16px; height: 14px; }
  .s14-bub--l { align-self: flex-start; }
  .s14-bub--l::after { left: auto; right: 30px; }
  .s14-bub--r { align-self: flex-end; margin-top: 16px; }
  .s14-bub--r::after { left: 30px; }
  .s14-badge { --bu: 0.55px; position: relative; left: auto; top: auto; order: 5; margin-top: 30px; }
  .s14-reviews { position: relative; order: 6; left: auto; top: auto; width: calc(100% + 32px); height: auto; margin: 22px -16px 0; }
  .s14-track { gap: 12px; height: auto; padding: 0 16px 6px; scroll-padding-left: 16px; }
  .s14-card { height: auto; width: 240px !important; margin-left: 0 !important; border-radius: 6px; overflow: hidden; }
  .s14-card--1 { display: none; } /* 시안에서 왼쪽이 잘린 채 잘라 온 카드라 휴대폰 첫 장에선 글이 잘려 보인다 → 휴대폰에선 빼고, 태블릿·PC 는 화면 왼쪽 끝에 붙여 보인다(10-28) */
  .s14-card img { height: auto; }
  .s14-card--5, .s14-card--6 { display: none; }
  .s14-pan { position: relative; order: 7; left: auto; top: auto; align-self: flex-end; width: min(100% + 16px, 520px); height: auto; margin: 6px -16px 0 0; }
  .s14-pan img { height: auto; }
  .s14 .s14-bub, .s14 .s14-reviews, .s14 .s14-badge { position: relative; }
}

/* ---------- 태블릿(769~1279): 위 한 줄 쌓기에 폭 상한 — 글은 가운데 760px 안 ----------
   리뷰 카드 1~4는 시안 비율 그대로 화면 폭에 꽉 차게 한 줄로 놓는다(--k = 시안 1px 의 크기, 10-28 양옆 17px 없앰 — 카드 1 의 잘린 왼쪽이 화면 끝에 붙게).
   배지는 시안 위치(카드 3·4 사이)에 그대로 올린다(10-28 카드 3·4 를 잘리지 않은 실제 캡처로 바꿔 흰 원은 없어짐).
   찜은 가운데에 놓고 윗부분을 카드 뒤로 넣는다. 그림의 오른쪽 잘린 끝과 위쪽 잘린 자국은 흐리게 지운다. */
@media (min-width: 769px) and (max-width: 1279px) {
  .s14-stage { --s14-pad: max(16px, calc((100cqw - 760px) / 2)); --k: calc(100cqw / 1313); padding: 80px var(--s14-pad) 0; }
  .s14-title { font-size: 44px; }
  .s14-pill { margin-top: 18px; padding: 12px 28px; font-size: 18px; }
  .s14-bub { margin-top: 28px; padding: 12px 26px; font-size: 17px; }
  .s14-bub--r { margin-top: 18px; }
  /* 배지: 시안처럼 카드 줄 윗변에서 65 아래·카드1 왼쪽에서 778(×k) 자리. 아래 여백을 음수로 줘서 카드 줄이 배지 윗변보다 65k 위에서 시작하게 한다 */
  .s14-badge { --bu: var(--k); left: calc(960 * var(--k) - 50cqw); margin: calc(34px + 65 * var(--k)) 0 calc(-429 * var(--k)); }
  .s14-reviews { width: calc(100% + 2 * var(--s14-pad)); margin: 0 calc(-1 * var(--s14-pad)); }
  .s14-track { gap: 0; padding: 0; overflow: hidden; } /* 카드 1(왼쪽이 잘린 캡처)이 PC 처럼 화면 왼쪽 끝에 붙어 잘려 보이게 — 양옆 17px 를 없애고 카드 1~4 가 화면 폭을 꽉 채우게(--k = 화면 폭/1313), 배지도 같이(10-28) */
  .s14-card--1 { display: block; width: calc(221 * var(--k)) !important; }
  .s14-card--2 { width: calc(336 * var(--k)) !important; margin-left: calc(22 * var(--k)) !important; }
  .s14-card--3 { width: calc(336 * var(--k)) !important; margin-left: calc(34 * var(--k)) !important; }
  .s14-card--4 { width: calc(336 * var(--k)) !important; margin-left: calc(28 * var(--k)) !important; }
  .s14-pan {
    z-index: 0; align-self: center; width: min(100%, 640px); margin: -130px 0 0;
    -webkit-mask-image: radial-gradient(farthest-side at 40% 100%, #000 64%, transparent 100%);
    mask-image: radial-gradient(farthest-side at 40% 100%, #000 64%, transparent 100%);
  }
}