/* 히어로 김치찜 누끼 — 옹기(묵은지)가 자리 잡자마자 완성 메뉴가 올라옴 (hero.js 타임라인 ganziLabel02)
   B: 5종 일렬, 가운데(고기) 크게 · 안쪽(삼겹·우삼겹) · 바깥(스팸·꽁치)  /  A: 옹기 앞 고기 1개 */
:root { --hb-shadow: drop-shadow(0 calc(26 * var(--u)) calc(26 * var(--u)) rgba(0, 0, 0, .55)); }
.hero_bowls { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(-40 * var(--u)); height: 0; pointer-events: none; }
.hb { position: absolute; bottom: 0; height: auto; max-width: none; translate: -50% 0; filter: var(--hb-shadow); }
.js .hb { opacity: 0; }

/* B — 옹기 몸통(650~1560u, 중심 1105) 안에 V자: 가운데 고기 맨 아래·크게, 바깥일수록 작고 위로 */
[data-bowls="b"] .hb_c { left: calc(1105 * var(--u)); width: calc(380 * var(--u)); z-index: 3; }
[data-bowls="b"] .hb_i { width: calc(290 * var(--u)); z-index: 2; bottom: calc(110 * var(--u)); }
[data-bowls="b"] .hb_i:nth-child(2) { left: calc(905 * var(--u)); }
[data-bowls="b"] .hb_i:nth-child(4) { left: calc(1305 * var(--u)); }
[data-bowls="b"] .hb_o { width: calc(220 * var(--u)); z-index: 1; bottom: calc(230 * var(--u)); }
[data-bowls="b"] .hb_o:nth-child(1) { left: calc(755 * var(--u)); }
[data-bowls="b"] .hb_o:nth-child(5) { left: calc(1455 * var(--u)); }

/* A — 옹기 앞 왼쪽 아래, 옹기 폭의 45% */
[data-bowls="a"] .hb:not(.hb_c) { display: none; }
[data-bowls="a"] .hb_c { left: calc(900 * var(--u)); width: calc(420 * var(--u)); bottom: calc(70 * var(--u)); }

@media (max-width: 768px) {
  /* 모바일: 옹기 아래에 걸쳐 놓음 (옹기가 흐름 안에 있으니 묶음도 흐름 안 맨 아래 기준) */
  .hero_bowls { bottom: calc(40 * var(--u)); }
  [data-bowls="b"] .hb_c { left: 50%; width: calc(280 * var(--u)); }
  [data-bowls="b"] .hb_i { width: calc(210 * var(--u)); bottom: calc(85 * var(--u)); }
  [data-bowls="b"] .hb_i:nth-child(2) { left: calc(219 * var(--u)); }
  [data-bowls="b"] .hb_i:nth-child(4) { left: calc(549 * var(--u)); }
  [data-bowls="b"] .hb_o { width: calc(160 * var(--u)); bottom: calc(175 * var(--u)); }
  [data-bowls="b"] .hb_o:nth-child(1) { left: calc(89 * var(--u)); }
  [data-bowls="b"] .hb_o:nth-child(5) { left: calc(679 * var(--u)); }
  [data-bowls="a"] .hb_c { left: calc(250 * var(--u)); width: calc(340 * var(--u)); bottom: calc(20 * var(--u)); }
}

/* T — 항공뷰 고기김치찜 1개만 옹기 앞 가운데에 크게 */
[data-bowls="t"] .hb:not(.hb_c) { display: none; }
[data-bowls="t"] .hb_c { left: calc(1105 * var(--u)); width: calc(420 * var(--u)); bottom: calc(60 * var(--u)); }
@media (max-width: 768px) {
  [data-bowls="t"] .hb_c { left: 50%; width: calc(330 * var(--u)); bottom: calc(10 * var(--u)); }
}

/* D — 옹기가 사라진 자리에 고기김치찜이 뚝: 옹기 틀(.main_jar_wrap) 안에서 폭 100%·바닥 맞춤 = 옹기와 같은 자리·크기 */
[data-bowls="d"] .hero_bowls { display: none; }
.main_dish { display: none; }
[data-bowls="d"] .main_dish { display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: auto; max-width: none; pointer-events: none; }
.js [data-bowls="d"] .main_dish { opacity: 0; }