@charset "UTF-8";

section {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: column;
}

section {
  font-family: "Pretendard Variable";
  font-weight: 300;
  font-size: calc(var(--px) * 18);
  letter-spacing: -0.04vw;
}

section img {
  width: 100%;
}

/* 마커디자인 */
.map_marker {
  position: relative;
  display: inline-block;
  /* 마커 핀은 좌표 위로 116px 솟아 있다(map.js 앵커). yAnchor:1 기준으로 그만큼 띄워
     말풍선이 핀과 겹치지 않게 한다. 꼬리가 8px 내려오므로 124px 지점이 꼬리 끝. */
  transform: translateY(-132px);
}

/* 말풍선 텍스트 박스 */
.map_marker_text {
  background: #000000;
  border: 1px solid #fff;
  padding: 9px 19px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.35);
}

/* 말풍선 꼬리 (삼각형 테두리) */
.map_marker_tail {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}

/* 말풍선 꼬리 내부 (검정 채우기) */
.map_marker_tail::after {
  content: "";
  position: absolute;
  top: -9px;
  left: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #000000;
}

/* 퍼블시작 */



/* ═══════════════════════ MAIN 메인비주얼 ═══════════════════════
   시안 1905x2794 = main_top 807 + 313 + main_hero 337 + 54 + main_sub 52 + 417 + main_rec 786 + pb 27
   ═══════════════════════════════════════════════════════════════ */
.main {
    padding-bottom: calc(var(--px) * 27);
    background-color: #050101;
    background-image: url('/images/main_01.webp');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    margin-top: 4vw;
}

/* ── 국그릇 · 연기 (영상 아래층) ── */
.main_bowl {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 814);
  aspect-ratio: 814 / 814;
  top: 15vw;
}

.main_smoke {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 937);
  aspect-ratio: 937 / 988;
  top: 14.8vw;
}

/* ── 세로문구 | 브랜드영상 | 세로문구 ── */
.main_top {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.main_side_l,
.main_side_r {
  position: absolute;
  font-family: var(--font-museum);
  font-weight: 700;
  font-size: calc(var(--px) * 40);
  letter-spacing: -0.11vw;
  color: #ffffff;
  text-align: center;
  margin: 0 !important;
}

.main_side_l {
  margin-left: 6.5%;
  margin-top: 7.6vw;
  line-height: 4vw;
  left: 9vw;
  top: 7vw;
}

.main_side_r {
  margin-right: 6.6%;
  margin-top: 5vw;
  line-height: 7.5vw;
  top: 5vw;
  right: 9vw;
}

.main_video {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 1330);
  /* padding: calc(var(--px) * 10) calc(var(--px) * 14) calc(var(--px) * 11); */
  background-image: url('/images/main_02.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.main_video_screen {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 1330 / 748;
  pointer-events: none;
}

.main_video_media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 소스 비율이 1330:748 과 달라도 화면을 꽉 채운다 */
  border: 0;
  background-color: #000;
}

.main_video_frame {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1300);
  aspect-ratio: 1300 / 746;
  pointer-events: none;
}

/* ── 육각 뱃지 | 대표 타이틀 | 육각 뱃지 ── */
.main_hero {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-top: 16.4vw;
}

.main_badge {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 261);
  padding-top: calc(var(--px) * 73);
  padding-bottom: calc(var(--px) * 78);
  background-image: url('/images/main_06.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.main_badge_l {
  margin-left: 20.6%;
}

.main_badge_r {
  margin-right: 20.9%;
}

.main_badge_label {
  font-weight: 600;
  font-size: calc(var(--px) * 19);
  line-height: 1.2vw;
  color: #ce0014;
}

.main_badge_num {
  margin-top: 0.4vw;
  font-family: var(--font-museum);
  font-weight: 700;
  font-size: calc(var(--px) * 45);
  line-height: 2.4vw;
  letter-spacing: -0.17vw;
  color: #ce0014;
}

.main_hero_txt {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 6.8vw;
}

.main_eyebrow {
  font-family: var(--font-museum);
  font-weight: 500;
  font-size: calc(var(--px) * 35);
  line-height: 2vw;
  letter-spacing: -0.13vw;
  color: #ce0014;
}

.main_tit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 448);
  aspect-ratio: 448 / 132;
  margin-top: 1.9vw;
}

.main_sub {
  margin-top: 2.9vw;
  font-family: var(--font-griun);
  font-size: calc(var(--px) * 38);
  line-height: 2.7vw;
  letter-spacing: 0.04vw;
  color: #ce0014;
}

/* ── 야수각 서예체 (효과 없는 원본 + CSS 글로우 + 박동 모션) ── */
.main_brand {
  --brand-glow: 0.6;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 781);
  aspect-ratio: 781 / 379;
  top: 83.7vw;
  pointer-events: none;
}

/* 뒤에서 퍼지는 파장 사본 — 좌표 없음(부모 flex center) */
.main_brand_wave {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.main_brand img {
  filter:
    drop-shadow(0 0 calc(var(--px) * 22) rgba(206, 0, 20, var(--brand-glow)))
    drop-shadow(0 0 calc(var(--px) * 60) rgba(206, 0, 20, calc(var(--brand-glow) * 0.6)));
}

/* ── 좌우 구름 (배경 플레이트에서 분리) ── */
.main_cloud {
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.main_cloud_l {
  width: calc(var(--px) * 1105);
  aspect-ratio: 1105 / 404;
  left: -31.1%;
  top: 67.9vw;
}

.main_cloud_r {
  width: calc(var(--px) * 1148);
  aspect-ratio: 1148 / 419;
  left: 75.6%;
  top: 62.9vw;
}

/* ── REC 프레임 ── */
.main_rec {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 94.3832%;
  margin-top: 22vw;
  padding-top: calc(var(--px) * 64);
  padding-bottom: calc(var(--px) * 52);
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(206, 0, 20, 0.7);
}

.main_rec_mark {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 67);
  aspect-ratio: 67 / 19;
  left: 2.7%;
  top: 1.6vw;
}

.main_rec_eyebrow {
  font-family: var(--font-museum);
  font-weight: 500;
  font-size: calc(var(--px) * 26);
  line-height: 2vw;
  letter-spacing: -0.1vw;
  color: #ce0014;
}

.main_rec_tit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 680);
  aspect-ratio: 680 / 107;
  margin-top: 1.1vw;
}

/* ── 가로 영상 슬라이드 ── */
.main_slide_wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin-top: 0.6vw;
}

.main_slide {
  width: calc(var(--px) * 774);
  overflow: visible;
}

.main_slide_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 774);
}

.main_slide_thumb {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 774 / 436;
  background: #000000;
  overflow: hidden;
  cursor: pointer;
}

.main_slide_play {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 72);
  height: calc(var(--px) * 72);
  border-radius: 50%;
  background: rgba(206, 0, 20, 0.85);
  opacity: 0;
  transition: opacity 0.3s;
}

.main_slide_play::before {
  content: '';
  border-left: calc(var(--px) * 20) solid #ffffff;
  border-top: calc(var(--px) * 12) solid transparent;
  border-bottom: calc(var(--px) * 12) solid transparent;
  margin-left: calc(var(--px) * 6);
}

.main_slide_thumb:hover .main_slide_play {
  opacity: 1;
}

.main_slide_info {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 0.5vw;
  overflow: hidden;
}

.main_slide_view {
  flex-shrink: 0;
  box-sizing: border-box;
  margin-left: calc(var(--px) * 8);
  padding: calc(var(--px) * 10) calc(var(--px) * 18);
  border: 1px solid #ce0014;
  border-radius: 50vw;
  background-color: rgba(206, 0, 20, 0.5);
  font-weight: 600;
  font-size: calc(var(--px) * 16);
  line-height: 1.1vw;
  color: #ffffff;
  white-space: nowrap;
}

.main_slide_name {
  min-width: 0;
  margin-left: calc(var(--px) * 30);
  font-weight: 500;
  font-size: calc(var(--px) * 18);
  line-height: 1.1vw;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main_slide_line {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 97.2868%;
  height: calc(var(--px) * 1);
  margin-top: 0.5vw;
  background: #ce0014;
}

/* 측면 슬라이드 딤 (PSD opacity .149).
   ★ 시안은 좌·우 각 1장씩만 보인다. loop + slidesPerView:auto 라 prev-prev / next-next 까지
     화면에 걸쳐 시안과 다르게 보였다 → prev/next 만 노출하고 나머지는 감춘다. */
.main_slide .swiper-slide {
  opacity: 0;
  transition: 0.5s;
}

.main_slide .swiper-slide-prev,
.main_slide .swiper-slide-next {
  opacity: 0.15;
}

/* 측면 패널 = 바깥이 위로 들린 기울어진 화면 (시안).
   perspective 를 요소 자체에 걸어 안쪽 모서리가 더 크게 보이도록 하고,
   skewY 로 시안의 기울기를, scale 로 크기를, translateX 로 중앙과의 간격을 잡는다. */
.main_slide .swiper-slide-prev {
  transform-origin: right center;
  transform: translateX(calc(var(--px) * -41)) scale(0.9) perspective(calc(var(--px) * 1400)) rotateY(-26deg) skewY(10deg);
}

.main_slide .swiper-slide-next {
  transform-origin: left center;
  transform: translateX(calc(var(--px) * 41)) scale(0.9) perspective(calc(var(--px) * 1400)) rotateY(26deg) skewY(-10deg);
}

.main_slide .swiper-slide-active {
  opacity: 1;
}

.main_slide_prev {
  left: 23.8%;
  top: 16.4vw;
}

.main_slide_next {
  right: 24.1%;
  top: 16.4vw;
}

/* ── 우하단 HUD (타임코드 · 볼륨) ── */
.main_rec_hud {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 2.3vw;
  right: 2.4%;
  bottom: 1.5vw;
}

.main_rec_time {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 119);
  aspect-ratio: 119 / 17;
}

.main_rec_volume {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 28);
  aspect-ratio: 28 / 101;
}
/* ═══════════════════════ MAIN end ═══════════════════════ */


/* ═══════════════════════ CON01 압도적인 화제성 ═══════════════════════ */
/* 시안 1905x1064 = con01_top 777 + con01_band 96 + con01_roof 191 */
.con01 {
  background-color: #060606;
}

/* ── 밝은 패널 ── */
.con01_top {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: calc(var(--px) * 135);
  padding-bottom: calc(var(--px) * 90);
  background-image: url('/images/con01_01.webp');
  background-repeat: no-repeat;
  background-size: cover;
}

.con01_yt {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 465);
  aspect-ratio: 465 / 474;
  left: -0.4%;
  top: 4.8vw;
}

.con01_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 28.6614%;
  margin-left: 12.1%;
  margin-top: 4vw;
}

/* ── 조회수 지표 카드 ── */
.con01_stat {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: calc(var(--px) * 24);
  padding-bottom: calc(var(--px) * 25);
  background: #ffffff;
  border-radius: calc(var(--px) * 20);
  border: 1px solid;
}

.con01_stat_list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.con01_stat_item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
}

.con01_stat_label {
  font-size: calc(var(--px) * 18);
  font-weight: 600;
  line-height: 1.2vw;
  color: #060606;
}

.con01_stat_num {
  margin-top: 0.3vw;
  font-family: var(--font-museum);
  font-weight: 700;
  font-size: calc(var(--px) * 40);
  line-height: 2.1vw;
  letter-spacing: -0.15vw;
  color: #ce0014;
}

.con01_stat_unit {
  font-size: calc(var(--px) * 35);
}

.con01_stat_line {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 48);
}

.con01_stat_bar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1);
  height: calc(var(--px) * 121);
  background: rgba(6, 6, 6, 0.15);
}

.con01_stat_plus {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 48);
  height: calc(var(--px) * 48);
  border-radius: 50%;
  background: #060606;
}

.con01_stat_plus span {
  font-size: calc(var(--px) * 45);
  font-weight: 300;
  line-height: 1;
  color: #ce0014;
  transform: translate(-1px, -3px);
}

/* ── HOT PLACE 카드 ── */
.con01_hot {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 0.2vw;
  padding-top: calc(var(--px) * 22);
  padding-bottom: calc(var(--px) * 30);
  background: #000000;
  border-radius: calc(var(--px) * 20);
}

.con01_hot_label {
  font-size: calc(var(--px) * 18);
  font-weight: 600;
  line-height: 1.2vw;
  color: #ffffff;
}

.con01_hot_tit {
  margin-top: 0.4vw;
  font-family: var(--font-museum);
  font-weight: 700;
  font-size: calc(var(--px) * 30);
  line-height: 1.9vw;
  letter-spacing: -0.11vw;
}

.con01_hot_point {
  color: #ce0014;
}

.con01_hot_white {
  color: #ffffff;
}

/* ── 카피 ── */
.con01_tit {
  margin-top: 2.9vw;
  margin-left: 1.6%;
  font-weight: 700;
  font-size: calc(var(--px) * 22);
  line-height: 1.4vw;
  letter-spacing: -0.06vw;
  color: #060606;
}

.con01_desc {
  margin-top: 1.3vw;
  margin-left: 1.6%;
  font-weight: 400;
  font-size: calc(var(--px) * 17);
  line-height: 1.1vw;
  color: #060606;
}

/* ── 세로 영상 슬라이드 ── */
.con01_slide {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 45.8268%;
  margin-left: 13.4%;
}
.con01_slide_img {
  border: 1px solid #000;
}
.con01_slide_item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 312);
  aspect-ratio: 312 / 552;
  background: #000000;
  overflow: hidden;
  cursor: pointer;
}

.con01_slide_play {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 62);
  height: calc(var(--px) * 62);
  border-radius: 50%;
  background: rgba(206, 0, 20, 0.85);
  opacity: 0;
  transition: opacity 0.3s;
}

.con01_slide_play::before {
  content: '';
  border-left: calc(var(--px) * 18) solid #ffffff;
  border-top: calc(var(--px) * 11) solid transparent;
  border-bottom: calc(var(--px) * 11) solid transparent;
  margin-left: calc(var(--px) * 5);
}

.con01_slide_item:hover .con01_slide_play {
  opacity: 1;
}

/* 세로 슬라이드 화살표 (시안 좌표) */
.con01_slide_prev {
  left: 48.7%;
  top: 17.8vw;
}

.con01_slide_next {
  left: 48.8%;
  top: 21.3vw;
}

/* ── 캘리 카피 띠 ── */
.con01_band {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 10.2vw;
  padding-top: calc(var(--px) * 28);
  padding-bottom: calc(var(--px) * 28);
  background: #ce0014;
}

.con01_band_l,
.con01_band_r {
  font-family: var(--font-griun);
  font-size: calc(var(--px) * 32);
  line-height: 2.1vw;
  letter-spacing: 0.1vw;
  color: #060606;
}

/* ── 기와 지붕 ── */
.con01_roof {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 105.0394%;
  aspect-ratio: 2001 / 191;
}

/* ── 등 ── */
.con01_lamp {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 124);
  aspect-ratio: 124 / 277;
  top: 38.8vw;
}
/* ═══════════════════════ CON01 end ═══════════════════════ */


/* ===== 모바일 지도 터치 잠금 오버레이 (md/map_zoom_control.md §3) ===== */
.map-touch-lock-parent {
  position: relative;
}

.map-touch-lock {
  position: absolute;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.58);
  border: 0;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

.map-touch-lock-text {
  display: block;
  padding: 0 calc(var(--px) * 20);
  font-size: calc(var(--px) * 16);
  font-weight: 700;
  line-height: 1.3;
  word-break: keep-all;
}

.is-map-touch-unlocked .map-touch-lock {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 599px) {
  .map-touch-lock-text {
    font-size: 4.3vw;
    padding: 0 4vw;
  }
}

/* ═══════════════════════════════════════════════════════════
   CON02 — BRAND STORY  (시안 1905x1596 / .planning/con02/plan.md)
   ═══════════════════════════════════════════════════════════ */
.con02 {
  isolation: isolate;
  padding-top: 0.4vw;
  padding-bottom: 5.5vw;
  background-color: var(--color-bg);
  background-image: linear-gradient(to bottom,
      rgba(49, 9, 13, 0) 26.5%,
      rgba(49, 9, 13, 0.004) 34%,
      rgba(49, 9, 13, 0.043) 41.5%,
      rgba(49, 9, 13, 0.212) 49.1%,
      rgba(49, 9, 13, 0.533) 56.6%,
      rgba(49, 9, 13, 0.824) 64.1%,
      rgba(49, 9, 13, 0.969) 71.6%,
      rgba(49, 9, 13, 1) 79.1%);
}

/* ── 하단 불영상 (PSD Layer 13 = hard light + 상단 페이드 마스크) ── */
.con02_fire {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 1280 / 720;
  left: 0;
  top: 27.7vw;
  mix-blend-mode: hard-light;
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.039) 10.9%,
      rgba(0, 0, 0, 0.176) 21.7%,
      rgba(0, 0, 0, 0.447) 32.6%,
      rgba(0, 0, 0, 0.753) 43.4%,
      rgba(0, 0, 0, 0.929) 54.3%,
      rgba(0, 0, 0, 1) 65.2%);
  mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.039) 10.9%,
      rgba(0, 0, 0, 0.176) 21.7%,
      rgba(0, 0, 0, 0.447) 32.6%,
      rgba(0, 0, 0, 0.753) 43.4%,
      rgba(0, 0, 0, 0.929) 54.3%,
      rgba(0, 0, 0, 1) 65.2%);
}

/* ── 웍 뒤 레드 글로우 (좌표=중앙 → 부모 flex center) ── */
.con02_glow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1440);
  aspect-ratio: 1440 / 916;
  top: -7.2vw;
}

/* ── 상단 검은 웍 ── */
.con02_wok {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 728);
  aspect-ratio: 728 / 476;
  left: 31.1%;
  top: 4.2vw;
}

/* ── 손님 요청 대사 4종 ── */
.con02_quote {
  font-size: calc(var(--px) * 17);
  font-weight: 400;
  line-height: 2.1vw;
  color: #fff;
  opacity: 0.9;
}

.con02_quote01 {
  left: 36%;
  top: 5.3vw;
}

.con02_quote02 {
  left: 28.5%;
  top: 11.7vw;
}

.con02_quote03 {
  left: 61.6%;
  top: 6.7vw;
}

.con02_quote04 {
  left: 63.1%;
  top: 15vw;
}

/* ── 좌우 세로 문구 (대세는 / 커스텀) ── */
/* 세로 그라데이션 + outerGlow 를 통이미지에 구워 넣었다 (텍스트로는 단색만 가능) */
.con02_side {
  display: flex;
  justify-content: center;
  align-items: center;
}

.con02_side_l {
  width: calc(var(--px) * 138);
  aspect-ratio: 138 / 407;
  left: 17.8%;
  top: 51.3vw;
}

.con02_side_r {
  width: calc(var(--px) * 138);
  aspect-ratio: 138 / 408;
  left: 75.1%;
  top: 50.9vw;
}

/* ── 세로 텍스트 체인 (전부 캔버스 정중앙 → 부모 flex center) ── */
.con02_eyebrow {
  font-family: var(--font-museum);
  font-size: calc(var(--px) * 24);
  font-weight: 700;
  line-height: 2vw;
  letter-spacing: -0.09vw;
  text-transform: uppercase;
  color: var(--color-point2);
}

.con02_title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 400);
  aspect-ratio: 400 / 87;
  margin-top: 8.3vw;
}

.con02_lead {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 381);
  aspect-ratio: 381 / 88;
  margin-top: 7.2vw;
}

.con02_desc {
  margin-top: 4.7vw;
  font-size: calc(var(--px) * 22);
  font-weight: 700;
  line-height: 1.4vw;
  letter-spacing: -0.06vw;
  color: #fff;
  text-align: center;
}

.con02_line {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1px;
  height: calc(var(--px) * 78);
  margin-top: 1.6vw;
  background-color: #fff;
}

.con02_slogan {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 678);
  aspect-ratio: 678 / 106;
  margin-top: 1.9vw;
  z-index: 5;
}

/* ── 그릇 (유저 지시: absol 미사용, 흐름 배치) ──
   margin-left = PNG bbox 가 젓가락 때문에 우측으로 치우쳐 생긴 16px 를 복원 (flex center 는 마진박스 기준이라 ×2) */
.con02_bowl {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 811);
  aspect-ratio: 811 / 530;
  margin-top: 2.7vw;
  margin-left: 1.7%;
}

/* ── 재료 9종 (부모 = .con02_bowl W:811px) ── */
.con02_ing {
  display: flex;
  justify-content: center;
  align-items: center;
}

.con02_ing01 {
  width: calc(var(--px) * 143);
  aspect-ratio: 143 / 142;
  left: 25.4%;
  top: 8.3vw;
}

.con02_ing02 {
  width: calc(var(--px) * 150);
  aspect-ratio: 150 / 156;
  left: 54.7%;
  top: 8.8vw;
}

.con02_ing03 {
  width: calc(var(--px) * 154);
  aspect-ratio: 154 / 146;
  left: 78.1%;
  top: 2.3vw;
}

.con02_ing04 {
  width: calc(var(--px) * 149);
  aspect-ratio: 149 / 143;
  left: 14.2%;
  top: -3.8vw;
}

.con02_ing05 {
  width: calc(var(--px) * 140);
  aspect-ratio: 140 / 123;
  left: 36.9%;
  top: 2.2vw;
}

.con02_ing06 {
  width: calc(var(--px) * 160);
  aspect-ratio: 160 / 134;
  left: 57.2%;
  top: -0.7vw;
}

.con02_ing07 {
  width: calc(var(--px) * 148);
  aspect-ratio: 148 / 153;
  left: 88.8%;
  top: -12.8vw;
}

.con02_ing08 {
  width: calc(var(--px) * 178);
  aspect-ratio: 178 / 146;
  left: 2.3%;
  top: 4.3vw;
}

.con02_ing09 {
  width: calc(var(--px) * 161);
  aspect-ratio: 161 / 151;
  left: -16.2%;
  top: -8.2vw;
}

/* ═══════════════════════════════════════════════════════════
   CON03 — 일석이조 다 잡은 똑똑한 구조 (시안 1905x816 / .planning/con03/plan.md)
   ═══════════════════════════════════════════════════════════ */
.con03 {
  padding-top: 5.5vw;
  padding-bottom: 5.1vw;
  background-color: #050101;
  background-image: url('/images/con03_01.webp');
  background-size: 100% auto;
}

/* ── 좌우 일석이조 리본 (배경 con03_01.webp 에서 분리) ── */
.con03_ribbon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 109);
  aspect-ratio: 109 / 183;
  top: 16.4vw;
}

.con03_ribbon_l {
  left: 9.4%;
}

.con03_ribbon_r {
  right: 9.3%;
}

.con03_sub {
  font-size: calc(var(--px) * 22);
  font-weight: 700;
  letter-spacing: -0.06vw;
  line-height: 2.1vw;
  color: #060606;
}

.con03_point {
  color: #ce0014;
}

/* ── 완성형 타이틀 (SDMokdan 미설치 → 이미지) ── */
.con03_tit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 621);
  aspect-ratio: 621 / 55;
  margin-top: 0.4vw;
}

/* ── 객단가 비교 row (시안 비대칭 — 시작점 고정) ── */
.con03_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-top: 2.1vw;
}

/* ── 좌: 타 중식집 ── */
.con03_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 1.7vw;
  margin-left: 26.4042%;
}

.con03_badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 127);
  height: calc(var(--px) * 39);
  border-radius: 50vw;
  background-color: #969696;
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  letter-spacing: -0.05vw;
  line-height: 2.1vw;
  color: #ffffff;
}

.con03_photo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 370);
  aspect-ratio: 370 / 222;
  margin-top: 0.3vw;
}

.con03_price {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 153);
  aspect-ratio: 153 / 27;
  margin-top: 0.7vw;
}

/* ── 가운데: VS ── */
.con03_vs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 7.7vw;
  margin-left: 1.9948%;
}

.con03_vs_label {
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  letter-spacing: -0.05vw;
  line-height: 1.9vw;
  color: #000000;
}

.con03_vs_txt {
  margin-top: -0.2vw;
  font-family: var(--font-museum);
  font-size: calc(var(--px) * 49);
  font-weight: 700;
  letter-spacing: -0.1vw;
  line-height: 2.6vw;
  color: #060606;
}

/* ── 우: 야수각 ── */
.con03_card2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-left: 2.5197%;
}

.con03_badge2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 128);
  height: calc(var(--px) * 39);
  border-radius: 50vw;
  background-color: #000000;
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  letter-spacing: -0.05vw;
  line-height: 2.1vw;
  color: #ffffff;
}

.con03_photo2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 456);
  aspect-ratio: 456 / 283;
  margin-top: 0.3vw;
  border-radius: calc(var(--px) * 23);
  overflow: hidden;
}

/* 사진 하단 밖으로 이탈 — absol 대신 음수 마진 (DOM 순서상 사진 위로 그려짐) */
.con03_brush {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 274);
  aspect-ratio: 274 / 70;
  margin-top: -1.4vw;
}

/* ── 하단 신호등 버튼 3종 ── */
.con03_btns {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.2vw;
  margin-top: 2.4vw;
}

.con03_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 192);
  height: calc(var(--px) * 60);
  border: 1px solid #d1d1d1;
  border-radius: calc(var(--px) * 11);
  background-color: #ffffff;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.13);
  font-family: var(--font-museum);
  font-size: calc(var(--px) * 25);
  font-weight: 700;
  letter-spacing: -0.09vw;
  line-height: 1.7vw;
  color: rgba(0, 0, 0, 0.59) !important;
  opacity: 0.3;
  transition: 0.3s;
}

.con03_btn.on {
  opacity: 1;
  color: #000000;
}
.con03_btn.on .con03_btn_point {
  opacity: 1;
  color: #ce0014;
}

/* ═══════════════════════════════════════════════════════════
   CON04 — CUSTOM SYSTEM  (시안 1905x1058 / .planning/con04/plan.md)
   ═══════════════════════════════════════════════════════════ */
.con04 {
  align-items: flex-start;
  padding-top: 11vw;
  padding-bottom: 8.8vw;
  background-color: #050101;
}

/* ── 전폭 1px 레드 라인 ── */
.con04_line {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 1px;
  left: 0;
  top: 26vw;
  background-color: rgba(206, 0, 20, 0.5);
}

/* ── 좌측 세로 흐름 칼럼 ── */
.con04_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 12%;
}

.con04_eyebrow {
  font-family: var(--font-museum);
  font-size: calc(var(--px) * 24);
  font-weight: 700;
  line-height: 2vw;
  letter-spacing: -0.09vw;
  text-transform: uppercase;
  color: var(--color-point2);
}

.con04_title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 475);
  aspect-ratio: 475 / 107;
  margin-top: 1.4vw;
  margin-left: 0.5%;
}

/* ── STEP 3단계 ── */
.con04_steps {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 673);
  margin-top: 2.8vw;
  background-color: #000;
}

.con04_step {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 1.5vw;
  padding-bottom: 1.8vw;
  background-color: #000;
  opacity: 0.39;
  transition: 0.3s;
}

.con04_step.on {
  opacity: 1;
  background-color: var(--color-point2);
}

.con04_step_badge {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: calc(var(--px) * 84);
  aspect-ratio: 84 / 59;
  left: 6.1%;
  top: 0;
  background-image: url('/images/con04_05.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-family: var(--font-museum);
  font-size: calc(var(--px) * 17);
  font-weight: 700;
  line-height: 1.1vw;
  letter-spacing: -0.06vw;
  text-transform: uppercase;
  color: #000;
}

.con04_step_badge span {
  margin-top: 0.8vw;
}

.con04_step_txt {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 24.7%;
}

.con04_step_tt {
  font-size: calc(var(--px) * 24);
  font-weight: 700;
  line-height: 2.1vw;
  letter-spacing: -0.06vw;
  color: #fff;
}

.con04_step_desc {
  font-size: calc(var(--px) * 18);
  line-height: 1.1vw;
  letter-spacing: -0.05vw;
  color: #fff;
}

/* ── 재료 마퀴 (트랙 폭 1030 + 8×83 = 1694) ── */

.con04_ing01,
.con04_ing02,
.con04_ing03,
.con04_ing04,
.con04_ing05,
.con04_ing06,
.con04_ing07,
.con04_ing08 {
  margin-right: calc(var(--px) * 83);
}

.con04_ing01 {
  width: calc(var(--px) * 134);
  aspect-ratio: 134 / 125;
}

.con04_ing02 {
  width: calc(var(--px) * 148);
  aspect-ratio: 148 / 121;
}

.con04_ing03 {
  width: calc(var(--px) * 124);
  aspect-ratio: 124 / 118;
}

.con04_ing04 {
  width: calc(var(--px) * 116);
  aspect-ratio: 116 / 102;
}

.con04_ing05 {
  width: calc(var(--px) * 124);
  aspect-ratio: 124 / 129;
}

.con04_ing06 {
  width: calc(var(--px) * 133);
  aspect-ratio: 133 / 111;
}

.con04_ing07 {
  width: calc(var(--px) * 128);
  aspect-ratio: 128 / 121;
}

.con04_ing08 {
  width: calc(var(--px) * 123);
  aspect-ratio: 123 / 127;
}

/* ── 쇼케이스 통이미지 · 연기 ── */
.con04_case {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 837);
  aspect-ratio: 837 / 925;
  left: 48.5%;
  top: 8vw;
}

.con04_smoke_l {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1148);
  aspect-ratio: 1148 / 419;
  left: -40.6%;
  top: 25.9vw;
}

.con04_smoke_r {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 974);
  aspect-ratio: 974 / 356;
  left: 66.4%;
  top: 2.7vw;
}

/* ═══════════════════════════════════════════════════════════
   CON06 — 실제 순수익표 (시안 1905x1140 / .planning/con06/plan.md)
   ═══════════════════════════════════════════════════════════ */
.con06 {
  padding-top: 8.9vw;
  padding-bottom: 6.1vw;
  background-color: #5a070f;
  background-image: url('/images/con06_01.webp');
  background-size: 100% auto;
}

.con06_tit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 556);
  aspect-ratio: 556 / 107;
}

.con06_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-top: 2.3vw;
}

/* ── 좌: 초경량 주방 설계 ── */
.con06_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 444);
  margin-left: 8.4514%;
}

.con06_info {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 348);
  aspect-ratio: 348 / 316;
  margin-left: 21.6216%;
  margin-top: 2.8vw;
}

.con06_stamp {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 118);
  aspect-ratio: 118 / 118;
  left: 0%;
  top: 0vw;
}

.con06_down {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 257);
  aspect-ratio: 257 / 70;
  left: 31.3063%;
  top: 11.9vw;
}

/* ── 중앙: 영수증 ── */
.con06_receipt {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 541);
  aspect-ratio: 541 / 601;
  margin-left: 4.1470%;
  margin-top: 0.4vw;
}

.con06_rate {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 87);
  aspect-ratio: 87 / 37;
  left: 71.7191%;
  top: 22.8vw;
}

/* ── 우: 원형그래프 ── */
.con06_chart {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 356);
  margin-left: 4.2520%;
  margin-top: 2.6vw;
}

.con06_chart_img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.con06_chart_brush {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 59.5506%;
  right: -19.9%;
  top: 1.8vw;
  z-index: 2;
  pointer-events: none;
}

.con06_chart_note {
  margin-left: 27.8090%;
  margin-top: 1vw;
  font-size: calc(var(--px) * 16);
  font-weight: 600;
  line-height: 1.1vw;
  color: #060606;
}

/* ── 도장 (영수증 합계바 위로 겹침) ── */
/* 도장 — 이미지에 dropShadow 까지 통으로 포함(234x248). 본체는 캔버스 내 +8,0 */
.con06_seal {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 214);
  aspect-ratio: 214 / 229;
  left: 61.1024%;
  top: 16.6vw;
}

.con06_desc {
  margin-top: 2.4vw;
  font-size: calc(var(--px) * 21);
  font-weight: 500;
  letter-spacing: -0.06vw;
  line-height: 1.3vw;
  color: #ffffff;
  text-align: center;
}

.con06_desc strong {
  font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════
   CON05 — 이미 매출로 증명되고 있습니다  (시안 1905x1566 / .planning/con05/plan.md)
   ═══════════════════════════════════════════════════════════ */
.con05 {
  padding-top: 11.9vw;
  padding-bottom: 4.8vw;
  background-image: url('/images/con05_01.png');
}

/* ── 검은 커튼 (con05-m01 펄럭임) ── */
.con05_curtain {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1690);
  aspect-ratio: 1690 / 1056;
  left: 5.2%;
  top: 5.8vw;
  transform-origin: 50% 0;
  transform-origin: top center;
  animation: con05_curtain 7s ease-in-out infinite;
}

/* ── 만석 CCTV 4개 ── */
.con05_cctv {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 439);
  aspect-ratio: 439 / 238;
  filter: brightness(0.9) contrast(1.05);
}

/* 시안 실측 — cctv 원본 평균밝기 106~113 vs 시안 52~64 → 계수 약 0.5 */
.con05_cctv video {
  filter: brightness(0.5);
}

.con05_cctv01 {
  left: 7.3%;
  top: 3.8vw;
}

.con05_cctv02 {
  left: 69.7%;
  top: 3.8vw;
}

.con05_cctv03 {
  left: 1%;
  top: 22.1vw;
}

.con05_cctv04 {
  left: 76%;
  top: 22.1vw;
}

/* ── 중앙 세로축 ── */
.con05_title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 658);
  aspect-ratio: 658 / 107;
}

.con05_sub {
  margin-top: 2.3vw;
  font-size: calc(var(--px) * 30);
  font-weight: 700;
  line-height: 2.1vw;
  letter-spacing: -0.08vw;
  color: #fff;
  text-align: center;
}

.con05_sub_point {
  color: var(--color-point2);
  animation: con05_blink 2.4s step-end infinite;
}

/* ── 매출 블록 3개 공통 ── */
.con05_store {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.con05_store_c {
  margin-top: 2vw;
}

.con05_store_l {
  width: calc(var(--px) * 329);
  left: 15.3%;
  top: 42.9vw;
}

.con05_store_r {
  width: calc(var(--px) * 287);
  left: 68.3%;
  top: 42.9vw;
}

.con05_grade {
  box-sizing: border-box;
  padding: 0 calc(var(--px) * 25);
  border: 1px solid #ce0014;
  border-radius: 50vw;
  background-color: rgba(206, 0, 20, 0.5);
  font-size: calc(var(--px) * 17);
  font-weight: 600;
  line-height: 2.2vw;
  color: #fff;
}

.con05_store_c .con05_grade {
  padding: 0 calc(var(--px) * 28);
  font-size: calc(var(--px) * 19);
  line-height: 2.4vw;
  letter-spacing: -0.05vw;
}

.con05_info {
  margin-top: 0.8vw;
  font-size: calc(var(--px) * 16);
  font-weight: 600;
  line-height: 0.8vw;
  color: #fff;
}

.con05_store_c .con05_info {
  margin-top: 0.7vw;
  font-size: calc(var(--px) * 18);
  line-height: 0.9vw;
  letter-spacing: -0.05vw;
}

/* 두 스위치가 위/아래 슬롯을 번갈아 차지한다.
   활성 = 위 슬롯 · 원래 크기 / 비활성 = 아래 슬롯 · 축소 + 흐림.
   transform 축소라 레이아웃 박스는 그대로 → 섹션 높이가 안 흔들린다. */
.con05_switch {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  order: 2;
  margin-top: 0.9vw;
  opacity: 0.45;
  filter: grayscale(0.5);
  transition: opacity 0.5s, filter 0.5s;
}

.con05_switch.on {
  order: 1;
  margin-top: 1.2vw;
  opacity: 1;
  filter: none;
}

.con05_store_c .con05_sales {
  margin-top: 0.8vw;
}

/* 라벨은 시안 크기 고정, 스케일은 숫자에만 건다 (유저 지시) */
.con05_num {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0.64);
  transition: transform 0.5s;
}

.con05_switch.on .con05_num {
  transform: scale(0.9);
}

/* 위로 올라오면 숫자가 커지므로 라벨과의 간격을 넓힌다.
   ★ 위/아래 상태의 블록 높이가 같아야 섹션 높이가 스위치마다 흔들리지 않는다
     → 늘어난 12px 을 아래 상태에서 margin-bottom 으로 되돌려 총합을 맞춘다 */
.con05_avg .con05_num {
  margin-top: calc(var(--px) * 6);
  margin-bottom: calc(var(--px) * 12);
}

.con05_avg.on .con05_num {
  margin-top: calc(var(--px) * 18);
  margin-bottom: 0;
}

.con05_avg_label {
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
}

.con05_store_c .con05_avg_label {
  font-size: calc(var(--px) * 18);
}

.con05_store_l .con05_avg_label,
.con05_store_r .con05_avg_label {
  font-size: calc(var(--px) * 16);
}

.con05_store_c .con05_avg {
  margin-top: 1vw;
}

.con05_store_c .con05_sales .con05_num {
  width: calc(var(--px) * 591);
  aspect-ratio: 591 / 101;
}

/* _avg 는 시안에서 아래 슬롯이라 이미 축소돼 잘려 있다. 위로 올라오면 위 슬롯과
   같은 크기로 보이도록 기본 폭을 1/0.8 로 되돌린다 — 아래로 갈 땐 scale(0.8) 이 줄인다 */
.con05_store_c .con05_num {
  width: calc(var(--px) * 416);
  aspect-ratio: 416 / 70;
}

.con05_store_l .con05_sales .con05_num {
  width: calc(var(--px) * 329);
  aspect-ratio: 329 / 55;
}

.con05_store_l .con05_avg .con05_num {
  width: calc(var(--px) * 300);
  aspect-ratio: 300 / 55;
}

.con05_store_r .con05_sales .con05_num {
  width: calc(var(--px) * 287);
  aspect-ratio: 287 / 55;
}

.con05_store_r .con05_avg .con05_num {
  width: calc(var(--px) * 291);
  aspect-ratio: 291 / 55;
}

/* ── 짬뽕 접시 · 하단 문구 ── */
.con05_dish {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 606);
  aspect-ratio: 606 / 478;
}

.con05_recover {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 469);
  aspect-ratio: 469 / 50;
  margin-top: 5.9vw;
}

.con05_after {
  margin-top: 1.3vw;
  font-family: var(--font-museum);
  font-size: calc(var(--px) * 30);
  font-weight: 700;
  line-height: 2vw;
  letter-spacing: -0.11vw;
  color: #fff;
  text-align: center;
}

.con05_after_mark {
  background-color: var(--color-point2);
}

/* ── 하단 매장 카드 마퀴 (트랙 4×353 + 4×29 = 1528) ── */
.con05_slide {
  left: 0;
  top: 65.4vw;
}

.con05_card {
  width: calc(var(--px) * 353);
  aspect-ratio: 353 / 263;
  margin-right: calc(var(--px) * 29);
}

.con05_slide_mask {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 41.9948%;
  left: 29.1%;
  top: 0;
  bottom: 0;
  background-image: linear-gradient(to right, rgba(90, 7, 15, 0), #5a070f 15%, #5a070f 85%, rgba(90, 7, 15, 0));
}

/* ═══════════════════════════════════════════════════════════
   CON0708 야수각 문(門) — 문 닫힘 모션 + 브랜드 카피
   시안 1905x761 (열림=con07_visual / 닫힘=con08_visual)
   ═══════════════════════════════════════════════════════════ */
.con0708 {
  position: relative;
  height: calc(var(--px) * 761);
  background-image: linear-gradient(180deg, #5a070f 0%, #5a070f 19.7%, #51070e 36.8%, #40070c 47.3%, #28060a 57.8%, #150608 68.3%, #0a0606 78.8%, #060606 89.4%);
}

/* ── 문짝 뒤 호랑이 엠블럼 (좌표=중앙 → 부모 flex center) ── */
.con0708_tiger {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1057);
  aspect-ratio: 1057 / 1050;
  top: 0.8vw;
}

/* ── 문짝 2짝 ── */
.con0708_door {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.con0708_door_l {
  left: 0;
  transform: translateX(-43.3071%);
}

.con0708_door_r {
  right: 0;
  transform: translateX(44.252%);
}

/* 문짝 사진 — 시안 좌표·원본크기 그대로 (부모 = .con0708_door W:952.5px) */
.con0708_photo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.con0708_photo_l {
  width: 122.3097%;
  aspect-ratio: 1165 / 777;
  left: -11.6%;
  top: calc(var(--px) * -10);
}

.con0708_photo_r {
  width: 120.9449%;
  aspect-ratio: 1152 / 768;
  left: -10.1%;
  top: calc(var(--px) * -5);
}

/* ── 문 닫힌 뒤 등장하는 딤 + 카피 ── */
.con0708_msg {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding-top: 2.5vw;
  background-color: rgba(0, 0, 0, 0.82);
  opacity: 0;
}

/* brand 와 동일하게 그라데이션+glow 를 구운 통이미지 (캔버스 안 잉크 top 60) */
.con0708_eyebrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 742);
  aspect-ratio: 742 / 144;
}

.con0708_tit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 556);
  aspect-ratio: 556 / 109;
  margin-top: 6.9vw;
}

.con0708_desc {
  font-weight: 600;
  font-size: calc(var(--px) * 21);
  line-height: 1;
  color: #ffffff;
  margin-top: 1.7vw;
}

.con0708_brand {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 502);
  aspect-ratio: 502 / 284;
  /* 캔버스 안 글자 잉크가 위에서 130px 지점 → 그만큼 마진에서 뺀다 */
  margin-top: 2.8vw;
}

/* ═══════════════════════ CON0708 end ═══════════════════════ */

/* ═══════════════════════════════════════════════════════════
   CON09 — 4WAY 매출 구조 (시안 1905x923 / .planning/con09/plan.md)
   ═══════════════════════════════════════════════════════════ */
.con09 {
    padding-top: 5.2vw;
    background-image: url('/images/con09_01.webp');
    background-size: 100.2% auto;
}

.con09_eyebrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 267);
  aspect-ratio: 267 / 55;
  margin-left: 1.4173%;
}

.con09_tit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 582);
  aspect-ratio: 582 / 107;
  margin-top: 1vw;
}

.con09_sub {
  margin-top: 1vw;
  font-size: calc(var(--px) * 21);
  font-weight: 600;
  letter-spacing: -0.06vw;
  line-height: 1.3vw;
  color: #060606;
  text-align: center;
}

.con09_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-top: 1.5vw;
}

/* ── 좌우 항목 리스트 ── */
.con09_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 3.6vw;
}

.con09_list_l {
  align-items: flex-end;
  width: calc(var(--px) * 315);
  margin-left: 18.0052%;
}

.con09_list_r {
  align-items: flex-start;
  width: calc(var(--px) * 261);
  margin-left: 2.8871%;
}

.con09_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.con09_list_l .con09_item {
  align-items: flex-end;
}

.con09_list_r .con09_item {
  align-items: flex-start;
}

.con09_item + .con09_item {
  margin-top: 2.1vw;
}

.con09_num {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 43);
  aspect-ratio: 43 / 38;
}

.con09_item_tit {
  margin-top: 0.7vw;
  font-size: calc(var(--px) * 24);
  font-weight: 700;
  letter-spacing: -0.06vw;
  line-height: 1.2vw;
  color: #060606;
}

.con09_item_desc {
  margin-top: 0.6vw;
  font-size: calc(var(--px) * 18);
  font-weight: 400;
  letter-spacing: -0.05vw;
  line-height: 1.1vw;
  color: #060606;
}

.con09_list_l .con09_item_desc {
  text-align: right;
}

/* ── 아치 매장 사진 ── */
.con09_arch {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--px) * 474);
    aspect-ratio: 474 / 545;
    margin-left: 3.0446%;
    margin-bottom: -0.1vw;
}

/* ── 매출 비율 위젯 ── */
.con09_stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 275);
  left: 20.2532%;
  top: 1.9vw;
}

.con09_stat_size {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0.7vw calc(var(--px) * 24);
  border: 1px solid #ce0014;
  border-radius: 50vw;
  background-color: rgba(206, 0, 20, 0.5);
  font-size: calc(var(--px) * 19);
  font-weight: 600;
  letter-spacing: -0.05vw;
  line-height: 1vw;
  color: #ffffff;
}

.con09_stat_label {
  margin-top: 1.3vw;
  font-size: calc(var(--px) * 21);
  font-weight: 600;
  letter-spacing: -0.06vw;
  line-height: 1.1vw;
  color: #ffffff;
}

.con09_stat_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.9vw;
}

.con09_stat_key {
  flex-shrink: 0;
  font-size: calc(var(--px) * 20);
  font-weight: 600;
  letter-spacing: -0.05vw;
  line-height: 1.1vw;
  color: #ffffff;
}

.con09_stat_num {
  flex-shrink: 0;
  font-family: var(--font-museum);
  font-size: calc(var(--px) * 58);
  font-weight: 700;
  letter-spacing: -0.09vw;
  line-height: 2.5vw;
  color: #ce0014;
}

.con09_stat_num_l {
  margin-left: calc(var(--px) * 25);
}

.con09_stat_num_r {
  margin-left: calc(var(--px) * 13);
}

.con09_stat_colon {
  flex-shrink: 0;
  margin-left: calc(var(--px) * 6);
  font-size: calc(var(--px) * 58);
  font-weight: 600;
  letter-spacing: -0.09vw;
  line-height: 2.5vw;
  color: #ffffff;
}

.con09_stat_key_r {
  margin-left: calc(var(--px) * 39);
}

/* ═══════════════════════ CON10 두 번째, 초간단 조리 ═══════════════════════
   시안 1905x1138 = pt127 + label54 + 18 + tit107 + 61 + dish324 + 31 + timer133 + 116 + bottom259 − 92
   absol 4개 : 세로 메뉴명 2 + 좌우 조리 슬라이드 2
   상태 : section.con10 에 .is_l / .is_r — 음식·프레임·슬라이드 자동재생이 함께 갈린다
   ═══════════════════════════════════════════════════════════════ */
.con10 {
  padding-top: calc(var(--px) * 127);
  background-color: #050101;
  background-image: url('/images/con10_01.webp');
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  overflow: visible;
}

/* ── 붓 라벨 ── */
.con10_label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 236);
  aspect-ratio: 236 / 54;
  margin-left: calc(var(--px) * 15);
  background-image: url('/images/con10_02.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.con10_label_txt {
  font-family: var(--font-griun);
  font-size: calc(var(--px) * 22);
  line-height: 2.1vw;
  color: #000000;
}

/* ── 타이틀 ── */
.con10_tit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 570);
  aspect-ratio: 570 / 107;
  margin-top: 0.9vw;
}

/* ── 음식 누끼 2장 (마이너스 마진 겹침) ── */
.con10_dish {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 599);
  margin-top: 3.2vw;
}

.con10_dish_item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: filter 0.4s;
}

.con10_dish_l {
  width: calc(var(--px) * 365);
  aspect-ratio: 365 / 324;
}

.con10_dish_r {
  width: calc(var(--px) * 361);
  aspect-ratio: 361 / 319;
  margin-left: calc(var(--px) * -127);
  margin-top: 0.1vw;
}

/* 활성 쪽이 컬러 + 위로 / 비활성 쪽이 흑백 + 아래로.
   ★ z-index 사용 사유 — 호버로 위아래가 런타임에 뒤집혀야 해서 마크업 순서로는 못 푼다 */
.con10.is_l .con10_dish_l,
.con10.is_r .con10_dish_r {
  z-index: 2;
  filter: grayscale(0);
}

.con10.is_l .con10_dish_r,
.con10.is_r .con10_dish_l {
  z-index: 1;
  filter: grayscale(1);
}

/* ── 타이머 ── */
.con10_timer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 384);
  margin-top: 1.6vw;
  padding: 0 calc(var(--px) * 9);
  background-image: url('/images/con10_06.webp');
  background-repeat: no-repeat;
  background-position: left calc(var(--px) * 4);
  background-size: 100% auto;
}

.con10_timer_hex {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: calc(var(--px) * 79);
    aspect-ratio: 79 / 133;
    background-image: url('/images/con10_07.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: -0.5vw;
}

.con10_timer_hex span {
  font-family: var(--font-museum);
  font-weight: 700;
  font-size: calc(var(--px) * 26);
  line-height: 1.4vw;
  color: #ffffff;
}

.con10_timer_time {
    font-family: var(--font-museum);
    font-weight: 700;
    font-size: calc(var(--px) * 61);
    line-height: 2.5vw;
    letter-spacing: -0.29vw;
    color: #ffffff;
    white-space: nowrap;
    margin-top: -0.6vw;
}

/* 카운트다운 진행 중에만 깜빡임 (js/animation.js 가 .on 토글) */
.con10_timer_time.on {
  animation: con10_blink 1s ease-in-out infinite;
}

/* ── 하단 V 배너 ── */
.con10_bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 98.0052%;
  margin-top: 6.1vw;
  margin-bottom: -4.8vw;
  padding: calc(var(--px) * 42) 0 calc(var(--px) * 137);
  background-image: url('/images/con10_13.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 5;
}

.con10_bottom_txt {
  font-weight: 700;
  font-size: calc(var(--px) * 24);
  line-height: 2.1vw;
  color: #ffffff;
  text-align: center;
}

.con10_bottom_point {
  color: #ce0014;
}

/* ── 세로 메뉴명 (번지는 글로우 포함 이미지) ── */
.con10_name {
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.con10_name_l {
  width: calc(var(--px) * 100);
  aspect-ratio: 100 / 235;
  left: 29%;
  top: 19.9vw;
}

.con10_name_r {
  width: calc(var(--px) * 97);
  aspect-ratio: 97 / 235;
  left: 65.8%;
  top: 19.9vw;
}

/* ── 좌우 조리 슬라이드 ── */
.con10_menu {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 492);
  height: calc(var(--px) * 790);
  padding: calc(var(--px) * 25) calc(var(--px) * 19) calc(var(--px) * 45) calc(var(--px) * 23);
  top: 18.3vw;
  cursor: pointer;
  transition: opacity 0.4s, background-color 0.4s;
}

.con10_menu_l {
  left: 3.1%;
}

.con10_menu_r {
  left: 71%;
}

.con10.is_l .con10_menu_l,
.con10.is_r .con10_menu_r {
  opacity: 1;
  background-color: rgba(206, 0, 20, 0.67);
}

.con10.is_l .con10_menu_r,
.con10.is_r .con10_menu_l {
  background-color: rgba(206, 0, 20, 0.09);
}

.con10_slide {
  width: calc(var(--px) * 448);
  height: calc(var(--px) * 720);
}

/* ★ common.css 의 div.swiper-slide (0,1,1) 를 이기려면 같은 특이도가 필요하다 */
div.con10_slide_item {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    box-sizing: border-box;
    width: calc(var(--px) * 450);
    height: calc(var(--px) * 240);
    padding: 0 calc(var(--px) * 33) calc(var(--px) * 34) 0;
    background-color: #12060a;
    border-bottom: 3px solid #8e0411;
}

/* 시안 실측: 활성 메뉴의 활성 슬라이드만 밝고(103) 나머지는 전부 딤(27~32) */
.con10_slide_item {
  filter: brightness(0.26);
  transition: filter 0.4s;
}

.con10.is_l .con10_menu_l .swiper-slide-active,
.con10.is_r .con10_menu_r .swiper-slide-active {
  filter: brightness(1);
}

/* 조리 스틸 → 조리 영상 교체 (좌 짜장1~3 / 우 짬뽕1~3) */
.con10_slide_vid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

.con10_slide_step {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 85);
  height: calc(var(--px) * 35);
  margin-right: calc(var(--px) * -10);
  border: 1px solid #ce0014;
  border-radius: 50vw;
  background-color: rgba(206, 0, 20, 0.5);
  font-weight: 600;
  font-size: calc(var(--px) * 14);
  line-height: 1.5vw;
  color: #ffffff;
}

/* 시안: 우측 메뉴는 사진은 그대로고 캡션만 좌하단으로 미러링된다
   ★ swiper-bundle 의 .swiper-backface-hidden .swiper-slide (0,2,0) 를 이겨야 해서 (0,2,1) 로 쓴다 */
div.con10_slide_item.con10_slide_item_r {
  align-items: flex-start;
  padding: 0 0 calc(var(--px) * 34) calc(var(--px) * 33);
}

.con10_slide_step_r {
  margin-right: 0;
  margin-left: calc(var(--px) * -10);
}

.con10_slide_txt {
  position: relative;
  z-index: 1;
  margin-top: 0.7vw;
  font-weight: 300;
  font-size: calc(var(--px) * 35);
  line-height: 1.9vw;
  color: #ffffff;
}
/* ═══════════════════════ CON10 end ═══════════════════════ */


/* ═══════════════════════════════════════════════════════════
   CON1112 (큰틀) — 중식 창업의 장벽 → 야수각은 없앴습니다
   시안 con11 1905x952 + con12 1905x945  /  .planning/con1112/plan.md
   ═══════════════════════════════════════════════════════════ */

/* ── 공유 (con11 ↔ con12 스크럽 이동) ── */
.con1112_dish {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 492);
  aspect-ratio: 698 / 693;
  top: 9.9vw;
}

.con1112_title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 465);
  aspect-ratio: 465 / 107;
  top: 37.7vw;
}

/* ═══ 영역 ① CON11 ═══ */
.con11 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 6.8vw;
  padding-bottom: 13.3vw;
  background-image: url('/images/con11_01.png');
}

.con11_smoke_l {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1105);
  aspect-ratio: 1105 / 404;
  left: -27.5%;
  top: 19.3vw;
}

.con11_smoke_r {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1148);
  aspect-ratio: 1148 / 419;
  left: 71%;
  top: 28.1vw;
}

.con11_q {
  opacity: 0.22;
}

.con11_q01 {
  width: calc(var(--px) * 144);
  aspect-ratio: 144 / 56;
  left: 31.2%;
  top: 12.5vw;
}

.con11_q02 {
  width: calc(var(--px) * 367);
  aspect-ratio: 367 / 57;
  left: 63%;
  top: 17.4vw;
}

.con11_q03 {
  width: calc(var(--px) * 398);
  aspect-ratio: 398 / 57;
  left: 15.1%;
  top: 22.5vw;
}

.con11_q04 {
  width: calc(var(--px) * 371);
  aspect-ratio: 371 / 58;
  left: 62.7%;
  top: 28.5vw;
}

/* 그라데이션 + outerGlow 를 이미지에 구워 넣었다 (캔버스가 glow 만큼 커서 음수 마진으로 상쇄) */
.con11_eyebrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 595);
  aspect-ratio: 595 / 103;
  margin-top: calc(var(--px) * -40);
  margin-bottom: calc(var(--px) * -40);
}

.con11_ring {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 527);
  aspect-ratio: 527 / 527;
  margin-top: 1vw;
}

.con1112_dish_dim {
  justify-content: center;
}

/* con12-m02 : 접시 제자리 무한회전.
   GSAP(con1112-m01)이 wrapper 의 transform 을 잡고 있어 자식 img 에 건다. */
.con1112_dish img {
  animation: spin 60s infinite linear;
}

.con1112_word {
  top: 20.3vw;
  font-family: var(--font-museum);
  font-size: calc(var(--px) * 121);
  font-weight: 700;
  line-height: 6.5vw;
  letter-spacing: -0.13vw;
  color: #fff;
  -webkit-text-stroke: 1px #000;
  paint-order: stroke fill;
}

/* ═══ 영역 ② CON12 ═══ */
.con12 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 4.7vw;
  padding-bottom: 14.9vw;
  background-image: url('/images/con12_01.png');
}

.con12_badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 267);
  aspect-ratio: 267 / 55;
  margin-left: 1%;
}

.con12_cards {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  column-gap: 0.8vw;
  margin-top: 8.5vw;
  z-index: 5;
}

.con12_card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 319);
  aspect-ratio: 319 / 266;
}

.con12_card01,
.con12_card03 {
  margin-top: 2.1vw;
}

.con12_bar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 168);
  aspect-ratio: 168 / 64;
  top: 5.1vw;
}

.con12_desc {
  margin-top: 0vw;
  font-size: calc(var(--px) * 21);
  font-weight: 600;
  line-height: 1.3vw;
  letter-spacing: -0.06vw;
  color: #060606;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   CON14 — SPACE MOOD  (시안 1905x867 / .planning/con14/plan.md)
   ═══════════════════════════════════════════════════════════ */
.con14 {
  align-items: flex-start;
  padding-top: 11.4vw;
  padding-bottom: 13.4vw;
  background-image: url('/images/con14_01.png');
}

/* ── 좌측 세로 흐름 ── */
.con14_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 16.1%;
}

.con14_eyebrow {
  font-family: var(--font-museum);
  font-size: calc(var(--px) * 24);
  font-weight: 700;
  line-height: 2vw;
  letter-spacing: -0.09vw;
  color: var(--color-point2);
}

.con14_title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 305);
  aspect-ratio: 305 / 107;
  margin-top: 1.5vw;
  margin-left: 0.5%;
}

/* ── 문구 슬라이드 트랙 (row-reverse : 우 = 현재/밝음, 좌 = 다음/흐림) ──
   pitch 329 = 슬라이드 250 + gap 79 (PSD 캡션 x 2 / 315 / 644 간격) */
.con14_caps {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: flex-start;
  column-gap: calc(var(--px) * 79);
  margin-top: 6.2vw;
  margin-left: calc(var(--px) * -329);
}

.con14_cap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 250);
  opacity: 0;
  transition: opacity 0.7s ease;
}

.con14_cap_prev {
  opacity: 0.15;
}

.con14_cap_now {
  opacity: 1;
}

.con14_cap_no {
  font-family: var(--font-griun);
  font-size: calc(var(--px) * 20);
  line-height: 0.9vw;
  letter-spacing: -0.03vw;
  color: #fff;
}

.con14_cap_now .con14_cap_no {
  color: var(--color-point2);
}

.con14_cap_tt {
  margin-top: 1.7vw;
  font-size: calc(var(--px) * 24);
  font-weight: 700;
  line-height: 1.2vw;
  letter-spacing: -0.06vw;
  color: #fff;
}

.con14_cap_desc {
  margin-top: 0.6vw;
  font-size: calc(var(--px) * 18);
  line-height: 0.9vw;
  letter-spacing: -0.05vw;
  color: #fff;
}

/* ── 우측 사진 세로 슬라이드 (pitch 499 = 487 + 12) ── */
.con14_photo {
  width: calc(var(--px) * 657);
  aspect-ratio: 657 / 487;
  left: 50.7%;
  top: 10.5vw;
}

.con14_photo_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  row-gap: calc(var(--px) * 12);
}

.con14_photo_item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 657);
  aspect-ratio: 657 / 487;
}

/* ── 우상단 기와 : con13 그룹이 con14 위 z-order — 사진 뒤 DOM 에 얹음 ── */
.con14_roof {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 677);
  aspect-ratio: 677 / 1128;
  left: 66.4%;
  top: -13.3vw;
}

/* ── 슬라이드 나브 : 공통 .btn_arr + .btn_arr_rot (원형은 호버 시 등장) ── */
.con14_nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 59);
  left: 87%;
  top: 29.7vw;
}

.con14_nav_ico {
  width: calc(var(--px) * 31);
}

.con14_nav_up .con14_nav_ico {
  margin-top: 0.5vw;
}

.con14_nav_down {
  margin-top: 0.6vw;
}

/* ── 하단 마퀴 ── */
.con14_marquee {
  left: 0;
  top: 40.7vw;
}

.con14_marquee_item {
  width: calc(var(--px) * 1602);
  aspect-ratio: 1602 / 116;
}


/* ═══════════════════════════════════════════════════════════
   CON13 — 야수각 시그니처 / 커스텀 식사 시스템 / 야수각 차림표
   시안 1905x1648  /  .planning/con13/plan.md
   ═══════════════════════════════════════════════════════════ */

.con13 {
  /* ★ 유저 지시 — 기와(.con13_roof)가 섹션 아래로 넘쳐 보여야 해서
     글로벌 section{overflow:hidden} 을 여기서만 푼다 */
  overflow: visible;
  padding-top: 4vw;
  padding-bottom: 4.1vw;
  background-image: url('/images/con13_01.webp');
}

/* ── 커튼 (좌우 펼침 모션 예정) ── */
.con13_curtain {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 2.7vw;
}

.con13_curtain_l {
  width: calc(var(--px) * 772);
  aspect-ratio: 772 / 910;
  left: 9.4488%;
}

.con13_curtain_r {
  width: calc(var(--px) * 768);
  aspect-ratio: 768 / 910;
  left: 49.9738%;
}

/* ── 커튼 뒤 붉은 창살 프레임 (left = 부모 중앙 ±1.5px → 좌표 없음) ── */
.con13_lattice {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1716);
  aspect-ratio: 1716 / 445;
  top: 24.1vw;
}

/* ── 우하단 기와 (섹션 아래로 875px 넘침) ── */
.con13_roof {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 647);
  aspect-ratio: 647 / 1128;
  left: 66.4042%;
  top: 73.2vw;
}

/* ── 상단 (엠블럼 + 타이틀 + 시그니처 3종) ── */
.con13_top {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.con13_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 373);
  aspect-ratio: 373 / 216;
}

.con13_tit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 524);
  aspect-ratio: 524 / 107;
  margin-top: 0.2vw;
}

/* 접시 높이가 제각각이라 하단(리본) 기준으로 정렬 */
.con13_menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  margin-top: 5.8vw;
}

.con13_menu_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: calc(var(--px) * 437);
}

.con13_dish {
  display: flex;
  justify-content: center;
  align-items: center;
}

.con13_dish_01 { width: calc(var(--px) * 405); aspect-ratio: 405 / 275; }
.con13_dish_02 { width: calc(var(--px) * 352); aspect-ratio: 352 / 316; }
.con13_dish_03 { width: calc(var(--px) * 349); aspect-ratio: 349 / 316; }

.con13_ribbon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -2.7vw;
}

.con13_ribbon_01 { width: calc(var(--px) * 208); aspect-ratio: 208 / 67; }
.con13_ribbon_02 { width: calc(var(--px) * 196); aspect-ratio: 196 / 67; }
.con13_ribbon_03 { width: calc(var(--px) * 287); aspect-ratio: 287 / 68; }

/* ── 하단 티켓 패널 2개 ── */
.con13_panels {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  margin-top: 10.7vw;
  gap: 0.7vw;
}

.con13_panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.con13_panel_l {
    width: calc(var(--px) * 846);
    height: calc(var(--px) * 519);
    padding-top: 2.8vw;
    background-image: url('/images/con13_12.webp');
    background-size: 101%;
}

.con13_panel_r {
  width: calc(var(--px) * 851);
  height: calc(var(--px) * 520);
  margin-left: calc(var(--px) * -7);
  padding-top: 2.8vw;
  background-image: url('/images/con13_13.webp');
  background-size: 101%;
  background-position: right;
}

.con13_panel_tit {
  font-family: var(--font-museum);
  font-weight: 700;
  font-size: calc(var(--px) * 35);
  letter-spacing: -0.13vw;
  line-height: 2.9vw;
  color: #060606;
}

/* ── 좌 패널 : 커스텀 식사 시스템 ── */
.con13_showcase {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 334);
  aspect-ratio: 334 / 270;
  margin-top: 0.6vw;
}

.con13_brush {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 182);
  aspect-ratio: 182 / 108;
  left: 62.5296%;
  top: 9.4vw;
}

.con13_marquee {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: -3.1vw;
  overflow: hidden;
}

/* 3벌 중 2번째 벌이 시안 위치(첫 접시 x164)에 오도록 1벌(777) − 43 만큼 당긴다 */
.con13_ing_track {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: calc(var(--px) * -1 * var(--con13-ing-offset, 734));
  /* ★ 흐르는 거리(unit = 111 × 재료수)는 등록 개수에 비례해 늘어나는데 duration 이 3s 로
     고정돼 있어서, 재료를 추가할수록 속도(px/s)가 그만큼 빨라졌다.
     시안 기준(7개 = 777px = 3s = 259px/s)에 비례시켜 개수와 무관하게 속도를 고정한다.
     위 shorthand 의 3s 는 calc 미지원 환경용 폴백으로 남겨둔다. */
  animation: con13_ing_flow 12s linear infinite;
  animation-duration: calc(12s * var(--con13-ing-n, 7) / 7);
}

.con13_ing_list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.con13_ing {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 111);
  height: calc(var(--px) * 143);
  padding-top: 1.2vw;
}

.con13_ing_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 86);
  aspect-ratio: 86 / 86;
}

/* 게시판(main_custom / main_menu) 이미지는 업로드 원본을 그대로 쓴다(썸네일러 흰 여백 회피).
   원본 비율이 슬롯(86:86 · 238:213)과 달라도 cover 로 꽉 채워 여백이 생기지 않게 한다. */
.con13_ing_img img,
.con13_card_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.con13_ing_txt {
  margin-top: 0.5vw;
  font-weight: 500;
  font-size: calc(var(--px) * 15);
  line-height: 1.6vw;
  color: #000000;
}

/* ── 우 패널 : 야수각 차림표 ── */
.con13_cards {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 720);
  margin-top: 2.1vw;
}

/* ★ common.css 의 div.swiper-slide (0,1,1) 를 이기려면 같은 특이도가 필요하다 */
div.con13_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.con13_card_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 238);
  aspect-ratio: 238 / 213;
}

.con13_card_name {
  margin-top: 0.7vw;
  font-family: var(--font-museum);
  font-weight: 700;
  font-size: calc(var(--px) * 17);
  letter-spacing: -0.05vw;
  line-height: 1.5vw;
  color: #060606;
}

.con13_arrows {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: 0.3vw;
  margin-top: 0.9vw;
}
/* ═══════════════════════ CON13 end ═══════════════════════ */

/* ═══════════════════════════════════════════════════════════
   CON15 — REVIEW / SNS 논란의 중국집! (시안 1905x885 / .planning/con15/plan.md)
   ═══════════════════════════════════════════════════════════ */
.con15 {
  padding-top: 5.1vw;
  padding-bottom: 4.2vw;
  background-color: #010101;
  background-image: url('/images/con15_01.webp');
  background-size: 100% auto;
}

.con15_eyebrow {
  font-family: var(--font-museum);
  font-size: calc(var(--px) * 24);
  font-weight: 700;
  letter-spacing: -0.09vw;
  line-height: 1.1vw;
  color: #ce0014;
}

.con15_tit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 429);
  aspect-ratio: 429 / 55;
  margin-top: 1vw;
}

/* ── 관심에서 ─ 카피 ─ 중심으로 ── */
.con15_lead {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-top: 1.5vw;
}

.con15_lead_word {
  flex-shrink: 0;
  margin-top: 0.1vw;
  margin-right: calc(var(--px) * -16);
  font-family: var(--font-museum);
  font-size: calc(var(--px) * 35);
  font-weight: 700;
  letter-spacing: 0.8vw;
  line-height: 1.9vw;
  color: #000000;
  opacity: 0.32;
  transition: opacity 0.5s;
}

.con15_lead_word.on {
  opacity: 1;
}

.con15_lead_point {
  color: #ce0014;
}

.con15_lead_from {
  margin-left: 23.2%;
}

.con15_lead_line {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 146);
  height: calc(var(--px) * 1);
  margin-top: 0.9vw;
  background-color: #050101;
}

.con15_lead_line1 {
  margin-left: 1.2%;
}

.con15_lead_line2 {
  margin-left: 1.2%;
}

.con15_lead_txt {
  flex-shrink: 0;
  margin-left: 1.1%;
  font-size: calc(var(--px) * 21);
  font-weight: 600;
  letter-spacing: -0.06vw;
  line-height: 1.2vw;
  color: #060606;
  text-align: center;
}

.con15_lead_to {
  margin-left: 1.3%;
}

/* ── 리뷰 이미지 마퀴 (정방향) ── */
.con15_sd {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 94.5407%;
  margin-top: 2.2vw;
}

.con15_sd .swiper-wrapper {
  transition-timing-function: linear !important;
  pointer-events: none;
}

.con15_sd .swiper-slide {
  width: auto !important;
  margin-right: calc(var(--px) * 6);
}

.con15_card {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 246);
  aspect-ratio: 246 / 352;
  border: 1px solid #aaaaaa;
  border-radius: calc(var(--px) * 22);
  background-color: #ffffff;
  overflow: hidden;
}

/* ── 리뷰 텍스트 마퀴 (역방향) ── */
.con15_sd_txt {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 94.5407%;
  margin-top: 1.6vw;
}

.con15_sd_txt .swiper-wrapper {
  transition-timing-function: linear !important;
  pointer-events: none;
  align-items: flex-start;
}

.con15_sd_txt .swiper-slide {
  width: auto !important;
  margin-right: calc(var(--px) * 50);
}

.con15_txt_item {
  font-size: calc(var(--px) * 16);
  font-weight: 600;
  letter-spacing: -0.05vw;
  line-height: 1vw;
  color: #060606;
  text-align: center;
  white-space: nowrap;
}

.con15_txt_id {
  color: #a69f9f;
}

/* ── 폰 목업 (좌우 마퀴 카드 양쪽 위로 겹침) ── */
.con15_phone {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 651);
  aspect-ratio: 651 / 579;
  top: 16.1vw;
  z-index: 5;
}

/* con15-m04: review_01~11 순차 교대 노출 */
.con15_review {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 234);
  aspect-ratio: 234 / 285;
  top: 3.4vw;
  overflow: hidden;
}

.con15_review_item {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.con15_review_item.on {
  opacity: 1;
}

/* ── 도장 · 배지 ── */
.con15_badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 234);
  aspect-ratio: 234 / 254;
  left: 53.4383%;
  top: 30.5vw;
    z-index: 5;
}

.con15_stamp {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.con15_stamp1 {
  width: calc(var(--px) * 122);
  aspect-ratio: 122 / 137;
  left: 33.6%;
  top: 3.9vw;
}

.con15_stamp2 {
  width: calc(var(--px) * 122);
  aspect-ratio: 122 / 137;
  left: 77.7%;
  top: 12.5vw;
}

.con15_stamp3 {
  width: calc(var(--px) * 122);
  aspect-ratio: 122 / 137;
  left: 13.2%;
  top: 23.1vw;
}

.con15_stamp4 {
  width: calc(var(--px) * 141);
  aspect-ratio: 122 / 137;
  left: 59.5%;
  top: 27.5vw;
}

/* ═══════════════════════════════════════════════════════════
   CON16 — INTERVIEW 점주 인터뷰 슬라이드
   (시안 1905x880 / .planning/con16/plan.md)
   ═══════════════════════════════════════════════════════════ */
.con16 {
  padding-top: 6.7vw;
  padding-bottom: 4.4vw;
  background-image: url('/images/con16_01.webp');
  background-size: 100% auto;
}

/* ── 모서리 창살 (1장 → rotate 로 4방향) ── */
.con16_deco {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 136);
  aspect-ratio: 136 / 137;
}

.con16_deco_lt {
  left: 2.7%;
  top: 3.4vw;
  transform: rotateY(180deg);
}

.con16_deco_rt {
  right: 2.7%;
  top: 3.4vw;
}

.con16_deco_lb {
  left: 2.7%;
  bottom: 2vw;
  transform: rotateY(180deg) rotateX(180deg);
}

.con16_deco_rb {
  right: 2.7%;
  bottom: 2vw;
  transform: rotateX(180deg);
}

/* ── 헤드 ── */
.con16_eyebrow {
  font-family: var(--font-museum);
  font-weight: 700;
  font-size: calc(var(--px) * 24);
  line-height: 1;
  letter-spacing: -0.1vw;
  color: var(--color-point2);
}

.con16_tit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 505);
  aspect-ratio: 505 / 55;
  margin-top: 1.2vw;
}

/* ── 영상 슬라이드 ── */
.con16_stage {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 2vw;
}

.con16_slide {
  width: calc(var(--px) * 851);
}

.con16_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.con16_video {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 849);
  aspect-ratio: 849 / 396;
  border: 1px solid #ce0014;
  background-color: #000000;
}

.con16_video iframe {
  width: 100%;
  height: 100%;
}

.con16_name {
  margin-top: 1vw;
  font-size: calc(var(--px) * 18);
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
}

.con16_prev {
  left: 22.2%;
  top: 9vw;
}

.con16_next {
  right: 23%;
  top: 9vw;
}

/* ── 구분선 ── */
.con16_line {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 851);
  height: 1px;
  margin-top: 0.9vw;
  background-color: #ce0014;
}

/* ── 하단 인터뷰 선택 탭 ── */
.con16_tabs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: calc(var(--px) * 7);
  margin-top: 1.2vw;
}

.con16_tab {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: calc(var(--px) * 52);
  border-radius: 50vw;
  font-size: calc(var(--px) * 18);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid #ffffff;
  background-color: #ffffff;
  color: #000000;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}

/* 활성 스타일은 .con09_stat_size 와 동일 (유저 지시) */
.con16_tab.on {
  border: 1px solid #ce0014;
  background-color: rgba(206, 0, 20, 0.5);
  color: #ffffff;
}

.con16_tab_01 {
  width: calc(var(--px) * 224);
}

.con16_tab_02 {
  width: calc(var(--px) * 236);
}

/* ═══════════════════════ CON16 end ═══════════════════════ */

/* ═══════════════════════════════════════════════════════════
   CON19 — STORE 매장 찾기 (카카오맵 연동)
   기능 훅 = js/map.js 계약 클래스 / 스타일 = con19_*
   (시안 1905x997 / .planning/con19/plan.md)
   ═══════════════════════════════════════════════════════════ */
.con19 {
  padding-top: 4.8vw;
  padding-bottom: 6vw;
  background-color: #ffffff;
}

.con19_eyebrow {
  font-family: var(--font-museum);
  font-weight: 700;
  font-size: calc(var(--px) * 24);
  line-height: 1;
  letter-spacing: -0.1vw;
  color: var(--color-point2);
}

.con19_tit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 202);
  aspect-ratio: 202 / 55;
  margin-top: 1.2vw;
}

/* ── 지도 박스 ── */
.con19_map_box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1559);
  height: calc(var(--px) * 649);
  margin-top: 2vw;
  border: 1px solid #000000;
}

#map {
  width: 100%;
  height: 100%;
}

#map img {
  pointer-events: auto;
}

/* ── 지도 위 검색 패널 ── */
.con19_panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: calc(var(--px) * 400);
  left: 2.5%;
  z-index: 2;
}

.con19_tabs {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  height: calc(var(--px) * 60);
}

.con19_tab {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 50%;
  font-size: calc(var(--px) * 19);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  background-color: #e6e6e3;
  color: #131313;
}

.con19_tab.on2 {
  background-color: #000000;
  color: #ffffff;
}

/* ── 검색창 ── */
.con19_search {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  height: calc(var(--px) * 80);
  background-color: #f6f6f5;
}

.con19_input {
  width: 100%;
  padding-left: calc(var(--px) * 34);
  padding-right: calc(var(--px) * 70);
  border: 0;
  background-color: transparent;
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1;
  color: #131313;
}

.con19_input::placeholder {
  color: #757575;
}

.con19_search_ico {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 28);
  aspect-ratio: 1 / 1;
  right: calc(var(--px) * 26);
  cursor: pointer;
}

/* ── 매장 리스트 ── */
.con19_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: calc(var(--px) * 450);
  background-color: #ffffff;
  overflow-y: auto;
}

.con19_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  padding-top: calc(var(--px) * 27);
  padding-left: calc(var(--px) * 33);
  cursor: pointer;
}

.con19_item_name {
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1;
  color: #131313;
}

.con19_item_addr {
    width: 70%;
    margin-top: 0.7vw;
    font-size: calc(var(--px) * 18);
    font-weight: 500;
    line-height: 1;
    color: #131313;
}

.con19_item_tel {
  margin-top: 0.4vw;
  font-size: calc(var(--px) * 16);
  font-weight: 500;
  line-height: 1;
  color: #131313;
}

.con19_naver {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 73);
  aspect-ratio: 73 / 34;
  right: calc(var(--px) * 30);
  top: calc(var(--px) * 67);
}

.con19_item_line {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 337);
  height: 1px;
  margin-top: 1.1vw;
  background-color: #ababab;
}

.con19_noshop {
  display: none;
  padding-top: calc(var(--px) * 40);
  font-size: calc(var(--px) * 18);
  font-weight: 500;
  line-height: 1;
  color: #757575;
  text-align: center;
}

/* ═══════════════════════ CON19 end ═══════════════════════ */


/* ═══════════════════════════════════════════════════════════
   CON18 — 창업 절차 (STEP 1~4 → GRAND OPEN)
   시안 1905x595  /  .planning/con18/plan.md
   ═══════════════════════════════════════════════════════════ */

.con18 {
  padding-top: 3vw;
  padding-bottom: 0.2vw;
  background-color: #000000;
}

.con18_tit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 311);
  aspect-ratio: 311 / 128;
}

/* 원 5개가 중심 pitch 212 로 19px 씩 겹친다 (231*5 - 19*4 = 1079) */
.con18_steps {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  margin-top: -0.1vw;
}

/* PSD: fillOpacity 0 + stroke 1px #ce0014 → 채움 없이 테두리만 */
.con18_step {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 231);
  aspect-ratio: 231 / 231;
  padding-top: 3.8vw;
  border: 1px solid #ce0014;
  border-radius: 50%;
  transition: box-shadow 0.4s, background-color 0.4s;
}

.con18_step_02,
.con18_step_03,
.con18_step_04,
.con18_step_05 {
  margin-left: calc(var(--px) * -19);
}

/* 활성 원 — PSD outerGlow #ff0019 op.2 size95. 시안 실측 프로파일(테두리 R51 → +75px 0)에
   맞춘 3중 box-shadow (단일 blur 는 테두리에서 절반만 나와 시안보다 흐렸다).
   box-shadow 는 요소 뒤에 깔리므로 배경이 투명하면 원 안쪽까지 붉어진다 → 검정으로 막는다. */
.con18_step.on {
  background-color: #000000;
  box-shadow: 0 0 calc(var(--px) * 22) rgba(255, 60, 80, 0.65),
              0 0 calc(var(--px) * 60) rgba(255, 0, 25, 0.55),
              0 0 calc(var(--px) * 150) rgba(255, 0, 25, 0.45),
              0 0 calc(var(--px) * 280) rgba(255, 0, 25, 0.22);
}

.con18_step_no {
  font-family: var(--font-museum);
  font-weight: 700;
  font-size: calc(var(--px) * 19);
  letter-spacing: 0.04vw;
  line-height: 1vw;
  color: #ce0014;
  text-shadow: 0 0 calc(var(--px) * 9) rgba(255, 0, 25, 0.85),
               0 0 calc(var(--px) * 20) rgba(255, 0, 25, 0.75),
               0 0 calc(var(--px) * 36) rgba(255, 0, 25, 0.55);
}

.con18_step_txt {
  margin-top: 1vw;
  font-weight: 500;
  font-size: calc(var(--px) * 20);
  line-height: 1.3vw;
  color: #ffffff;
  text-align: center;
}

/* ── GRAND OPEN ── */
.con18_step_05 {
  padding-top: 3.2vw;
}

.con18_grand_dish {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.con18_grand {
  font-family: var(--font-museum);
  font-weight: 700;
  font-size: calc(var(--px) * 25);
  letter-spacing: 0.24vw;
  line-height: 1.4vw;
  color: #ce0014;
  text-align: center;
  text-shadow: 0 0 calc(var(--px) * 9) rgba(255, 0, 25, 0.85),
               0 0 calc(var(--px) * 20) rgba(255, 0, 25, 0.75),
               0 0 calc(var(--px) * 36) rgba(255, 0, 25, 0.55);
}
.con18_rail {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 7.6vw;
}
/* ═══════════════════════ CON18 end ═══════════════════════ */


/* ═══════════════════════════════════════════════════════════
   CON17 — 창업 비용 / 가맹비 & 보증금 전액 면제
   시안 1905x1650  /  .planning/con17/plan.md
   ═══════════════════════════════════════════════════════════ */
.con17 {
  padding-bottom: 3.8vw;
  background-image: url('/images/con17_01.webp');
}

/* ── 상단 붉은 띠 ── */
.con17_band {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 91);
}

.con17_band_tt {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: calc(var(--px) * 194);
  font-family: var(--font-griun);
  font-size: calc(var(--px) * 32);
  letter-spacing: 0.06vw;
  line-height: 1.7vw;
  color: #060606;
}

/* ── 프로모 배너 ── */
.con17_banner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 1445);
  aspect-ratio: 1445 / 350;
  margin-top: 10.9vw;
  background-image: url('/images/con17_03.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 두 줄을 각각 이미지로 분리 — 모바일에서 줄별 중앙정렬이 가능해진다 */
.con17_head {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 15.4325%;
  margin-top: 4.4vw;
}

.con17_head_l1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 184);
  aspect-ratio: 184 / 30;
  margin-left: calc(var(--px) * 9);
}

.con17_head_l2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 566);
  aspect-ratio: 566 / 55;
  margin-top: 1.6vw;
}

.con17_note {
  margin-left: 15.4325%;
  margin-top: 1.5vw;
  font-size: calc(var(--px) * 15);
  font-weight: 600;
  line-height: 0.9vw;
  color: #fff;
  opacity: 0.24;
}

/* ── 창업 비용 타이틀 ── */
.con17_tit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 311);
  aspect-ratio: 311 / 128;
  margin-top: 5.4vw;
}

/* ── 흰 표 시트 (모서리 노치는 이미지 알파) ── */
.con17_sheet {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 1118);
  aspect-ratio: 1118 / 731;
  margin-top: -1.7vw;
  background-image: url('/images/con17_07.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.con17_table {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 786);
  margin-top: 2.4vw;
}

.con17_thead {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 62);
  background-color: #7c0a15;
}
.con17_thead span{
  color: #fff;
}

.con17_th {
  font-size: calc(var(--px) * 18);
  font-weight: 600;
  line-height: 1vw;
  color: #fff;
}

.con17_rows {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.con17_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.con17_row_01 { height: calc(var(--px) * 38); }
.con17_row_02 { height: calc(var(--px) * 41); }
.con17_row_03 { height: calc(var(--px) * 38); }
.con17_row_04 { height: calc(var(--px) * 42); }
.con17_row_05 { height: calc(var(--px) * 128); }
.con17_row_06 { height: calc(var(--px) * 62); }
.con17_row_07 { height: calc(var(--px) * 56); }

.con17_row_08 {
  height: calc(var(--px) * 56);
  border-bottom: 0;
}

.con17_c1 {
  width: calc(var(--px) * 240);
  font-size: calc(var(--px) * 16);
  font-weight: 500;
  line-height: 1.1vw;
  color: #000;
  text-align: center;
}

.con17_c2 {
  width: calc(var(--px) * 305);
  white-space: nowrap;
  font-size: calc(var(--px) * 16);
  font-weight: 300;
  line-height: 1.1vw;
  color: #000;
  text-align: center;
}

.con17_c3 {
  width: calc(var(--px) * 237);
  padding-left: calc(var(--px) * 4);
  font-size: calc(var(--px) * 16);
  font-weight: 700;
  line-height: 1.1vw;
  color: #000;
  text-align: center;
}

.con17_c3_cut {
  text-decoration: line-through;
}

.con17_barline {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 7);
  background-color: #000;
}

.con17_foot {
  margin-left: 2.6718%;
  margin-top: 1.8vw;
  font-size: calc(var(--px) * 15);
  font-weight: 500;
  line-height: 1.1vw;
  color: #7b7b7b;
}

/* ── absol 5종 ── */
.con17_lantern {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 124);
  aspect-ratio: 124 / 277;
  top: -2.2vw;
}

.con17_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 152);
  aspect-ratio: 152 / 166;
  left: 15.1%;
  top: 14vw;
}

.con17_stamp {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 124);
  aspect-ratio: 124 / 48;
  left: 66.7%;
}

.con17_stamp_01 { top: 49.9vw; }
.con17_stamp_02 { top: 56.3vw; }

.con17_badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 236);
  aspect-ratio: 236 / 250;
  left: 69.7%;
  top: 67vw;
}


/* ═══════════════════════════════════════════════════════════
   CON20 — 편식이 아니라 미식이다 / 얌전한 중식은 야수각답지 않습니다
   시안 1905x963  /  .planning/con20/plan.md
   ═══════════════════════════════════════════════════════════ */
.con20 {
    padding-top: 16.2vw;
    padding-bottom: 21.2vw;
    background-image: url('/images/con20_01.webp');
    background-size: 103%;
}

/* ── absol 7종 (DOM 순서 = PSD 쌓임 순서) ── */
.con20_dish {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 612);
  aspect-ratio: 612 / 612;
  top: 31.6vw;
  animation: spin 30s infinite linear;
}

.con20_smoke {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 719);
  aspect-ratio: 719 / 759;
  left: 30.9%;
  top: 22.6vw;
}

/* 세로 그라데이션 + outerGlow 를 이미지에 구워 넣었다 */
.con20_vl {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 121);
  aspect-ratio: 121 / 556;
  left: 4.4%;
  top: 10.3vw;
}

.con20_vr {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 120);
  aspect-ratio: 120 / 554;
  left: 89.2%;
  top: 10.4vw;
}

.con20_eave {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 1905 / 205;
    left: 0;
    top: 39.8vw;
}

.con20_light {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 454);
  aspect-ratio: 454 / 405;
  top: 7.6vw;
  animation: light 6s infinite;
}

.con20_lantern {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 94);
  aspect-ratio: 94 / 222;
  top: 1.2vw;
}

/* ── 좌/우 2단 텍스트 ── */
.con20_inner {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 1119);
  column-gap: calc(var(--px) * 107);
}

.con20_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.con20_tit {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.con20_tit_l1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 220);
  aspect-ratio: 220 / 40;
}

.con20_tit_l2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 450);
  aspect-ratio: 450 / 55;
  margin-top: 0.6vw;
  margin-left: 0.2%;
}

.con20_sub {
  margin-top: 2.8vw;
  font-family: var(--font-museum);
  font-size: calc(var(--px) * 30);
  font-weight: 700;
  letter-spacing: -0.07vw;
  line-height: 2.2vw;
  color: #fff;
}

.con20_right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.con20_txt {
  margin-top: 1.2vw;
  font-size: calc(var(--px) * 19);
  letter-spacing: -0.05vw;
  line-height: 1.2vw;
  color: #fff;
}

.con20_right p:first-child {
  margin-top: 0;
}

.con20_txt_bold {
  font-weight: 800;
}


/* ═══════════════════════════════════════════════════════════
   CON21 — 창업 문의 (가맹비 & 보증금 전액 면제 + QR 상담)
   시안 1905x803  /  .planning/con21/plan.md
   ═══════════════════════════════════════════════════════════ */
.con21 {
    padding-top: 10.5vw;
    padding-bottom: 9.4vw;
    background-image: url('/images/con21_01.webp');
    background-size: 101%;
}

.con21_inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: calc(var(--px) * 1350);
}

.con21_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.con21_eyebrow {
  margin-left: calc(var(--px) * 17);
  font-family: var(--font-museum);
  font-weight: 500;
  font-size: calc(var(--px) * 26);
  letter-spacing: -0.1vw;
  line-height: 2vw;
  color: #ce0014;
}

/* 모바일에서 행별 중앙정렬이 필요해 1행/2행을 따로 뽑았다 (유저 지시) */
.con21_tit {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 2.2vw;
  margin-left: calc(var(--px) * 10);
}

.con21_tit_l1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 274);
  aspect-ratio: 274 / 40;
}

.con21_tit_l2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 565);
  aspect-ratio: 565 / 55;
  margin-top: 0.6vw;
}

.con21_sub {
  margin-top: 1.9vw;
  margin-left: calc(var(--px) * 10);
  font-weight: 600;
  font-size: calc(var(--px) * 25);
  letter-spacing: -0.07vw;
  line-height: 2.1vw;
  color: #ffffff;
}

.con21_cta {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 248);
  aspect-ratio: 248 / 96;
  margin-top: 2.1vw;
  margin-left: calc(var(--px) * 5);
  transition: transform 0.3s;
}

.con21_cta:hover {
  transform: scale(1.06);
}

/* ── QR 패널 ── */
.con21_qr {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 469);
  height: calc(var(--px) * 425);
  padding-top: 2.8vw;
  border: 1px solid #ce0014;
  background-color: #ecebe6;
  background-image: url('/images/con21_04.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.con21_qr_tit {
  font-family: var(--font-museum);
  font-weight: 700;
  font-size: calc(var(--px) * 32);
  letter-spacing: -0.12vw;
  line-height: 2vw;
  color: #ce0014;
}

.con21_qr_box {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 204);
  aspect-ratio: 204 / 204;
  margin-top: 0.7vw;
  padding: calc(var(--px) * 17);
  background-color: #ffffff;
}

.con21_qr_desc {
  margin-top: 1vw;
  font-weight: 300;
  font-size: calc(var(--px) * 16);
  line-height: 1vw;
  color: #000000;
  text-align: center;
}
/* ═══════════════════════ CON21 end ═══════════════════════ */