@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%;
}

/* 마커디자인 — con18 말풍선(CustomOverlay). 도문장 톤: 흰 알약 + 금색 1px 선 + 나눔명조 */
.map_marker {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

/* 말풍선 텍스트 박스 */
.map_marker_text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: calc(var(--px) * 8) calc(var(--px) * 18);
  border: 1px solid #bda361;
  border-radius: 50vw;
  background-color: #fff;
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 15);
  font-weight: 700;
  letter-spacing: -0.04vw;
  line-height: calc(var(--px) * 22);
  color: var(--color-dark);
  white-space: nowrap;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* 말풍선 꼬리 — 회전한 흰 사각형(아래·오른쪽 금색 선) */
.map_marker_tail {
  width: calc(var(--px) * 12);
  height: calc(var(--px) * 12);
  margin-top: calc(var(--px) * -7);
  border-right: 1px solid #bda361;
  border-bottom: 1px solid #bda361;
  background-color: #fff;
  transform: rotate(45deg);
}

/* 퍼블시작 */

/* ===== main ===== */
.main {
  justify-content: flex-start;
  box-sizing: border-box;
  margin-top: var(--hd-h);
  padding-top: calc(var(--px) * 111);
  height: calc(var(--px) * 834);
  overflow: visible;
  z-index: 1;
  background-image: url("/images/main_04.jpg");
}

.main::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--hd-h) * -1);
  width: 100%;
  height: var(--hd-h);
  background-color: #1d1a19;
}

.main_frame {
  top: 0;
  width: 92.1785%;
  height: calc(var(--px) * 766);
  overflow: hidden;
  background-color: #050505;
  border-radius: 0 0 calc(var(--px) * 40) calc(var(--px) * 40);
}

.main_video {
  top: -4.5vw;
  width: 109.2825%;
  aspect-ratio: 4094 / 2160;
  opacity: 0.15;
}

.main_video video {
  width: 100%;
}

.main_rib {
  top: 11.1vw;
  left: calc(var(--px) * 470);
  width: 49.7113%;
  aspect-ratio: 947 / 764;
}

.main_shade {
  top: 0;
  width: 50.8661%;
  aspect-ratio: 969 / 524;
}

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

.main_seal {
  width: calc(var(--px) * 39);
  aspect-ratio: 39 / 86;
}

.main_title {
  margin-top: calc(var(--px) * 22);
  margin-right: calc(var(--px) * 7);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 75);
  font-weight: 400;
  letter-spacing: -0.2vw;
  line-height: 4.5vw;
  color: #fff;
  -webkit-text-stroke: calc(var(--px) * 1) currentColor;
  white-space: nowrap;
}

.main_title_point {
  color: #edcf82;
}

.main_desc {
  margin-top: calc(var(--px) * 11);
  font-size: calc(var(--px) * 20);
  font-weight: 400;
  letter-spacing: -0.02vw;
  line-height: 1.5vw;
  text-align: center;
  color: #fff;
}

/* ===== con01 ===== */
.con01 {
  justify-content: flex-start;
  box-sizing: border-box;
  padding-top: calc(var(--px) * 182);
  height: calc(var(--px) * 959);
  overflow: visible;
  background-image: url("/images/con01_04.jpg");
}

/* 상단 패턴 띠 — 배경 jpg 맨 위 30px 과 같은 모양(100px 주기)을 위에 덮어 흘린다. 2000px = 주기 20칸이라 끊김 없이 루프 */
.con01_flow {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

.con01_flow .image_sd {
  flex-shrink: 0;
  width: calc(var(--px) * 2000);
  animation-duration: 40s;
}

.con01_flow img {
  width: 100%;
}

.con01_roof {
  top: 38.7vw;
  left: 26.8%;
  width: 45.9318%;
  aspect-ratio: 875 / 222;
}

.con01_hand {
  top: -7.3vw;
  right: 0;
  z-index: 2;
  width: 36.5354%;
  aspect-ratio: 696 / 1205;
}

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

.con01_logo {
  margin-left: calc(var(--px) * 12);
  width: calc(var(--px) * 297);
  aspect-ratio: 297 / 112;
}

.con01_title {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: calc(var(--px) * 81);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 50);
  font-weight: 400;
  line-height: calc(var(--px) * 44);
  color: #fff;
  -webkit-text-stroke: calc(var(--px) * 1) currentColor;
  white-space: nowrap;
}

.con01_title_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 597.1);
  height: calc(var(--px) * 32);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-repeat: repeat-x;
  background-position: calc(var(--px) * 4) 0;
  background-size: calc(var(--px) * 83.86) 100%;
}

.con01_title_cell {
  width: calc(var(--px) * 85.3);
  text-align: center;
}

.con01_title_point {
  margin-top: calc(var(--px) * 20);
  line-height: calc(var(--px) * 57);
  color: #edcf80;
}

.con01_desc {
  margin-top: calc(var(--px) * 37);
  font-size: calc(var(--px) * 18);
  font-weight: 300;
  letter-spacing: -0.047vw;
  line-height: calc(var(--px) * 29);
  text-align: center;
  color: #fff;
}

.con01_desc_point {
  margin-top: calc(var(--px) * 30);
  font-weight: 600;
  color: var(--color-point);
}

/* ===== con02 ===== */
/* sticky 통로: theme basic_css.php 의 body / #content_wrap overflow:hidden 은 스크롤 컨테이너를 만들어 position:sticky 를 죽인다.
   가로 넘침 잘라내기는 html 로 올리고(뷰포트가 클립) 둘은 visible 로 푼다. */
html {
  overflow-x: hidden;
}

html body {
  overflow: visible;
}

div#content_wrap {
  overflow: visible;
}

.con02 {
  position: relative;
  z-index: 1;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  overflow: visible;
  background-color: #f8e8be;
}

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

.con02_panel {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--px) * 861);
  padding-top: calc(var(--px) * 215);
  overflow: hidden;
  background-image: url("/images/con02_03.jpg");
  background-size: 100% 100%;
}

.con02_vert {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  top: calc(var(--px) * 98);
  left: calc(var(--px) * 51);
  width: calc(var(--px) * 44);
  height: calc(var(--px) * 189);
  padding-right: calc(var(--px) * 2);
  border-left: 1px solid rgba(29, 26, 25, 0.2);
  border-right: 1px solid rgba(29, 26, 25, 0.2);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 21.6);
  font-weight: 700;
  line-height: calc(var(--px) * 77);
  color: #000;
}

.con02_vert span:first-child {
  margin-top: calc(var(--px) * -29.5);
}

.con02_vert::before,
.con02_vert::after {
  content: "";
  position: absolute;
  left: calc(var(--px) * 7);
  width: calc(var(--px) * 29);
  height: 1px;
  background-color: rgba(29, 26, 25, 0.2);
}

.con02_vert::before {
  top: calc(var(--px) * 49);
}

.con02_vert::after {
  top: calc(var(--px) * 130);
}

.con02_bowl {
  top: calc(var(--px) * 460);
  left: calc(var(--px) * 135);
  width: 74.8441%;
  aspect-ratio: 601 / 522;
}

.con02_txt {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-left: calc(var(--px) * 55);
}

.con02_title {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 55);
  font-weight: 700;
  letter-spacing: -0.142vw;
  line-height: calc(var(--px) * 61);
  color: var(--color-dark);
}

.con02_title_point {
  color: #cc3528;
}

.con02_desc {
  margin-top: calc(var(--px) * 10);
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  letter-spacing: -0.021vw;
  line-height: calc(var(--px) * 30);
  text-align: center;
  color: var(--color-dark);
}

/* 모바일 스와이퍼 래퍼 — PC 에서는 레이아웃에 영향 없게 풀고(contents), 좌우 화살표·점 내비는 모바일에서만 쓴다 */
.con02_sw {
  display: contents;
}

.con02_nav {
  display: none;
}

.con02_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: 57.8478%;
  padding-top: calc(var(--px) * 72);
  padding-bottom: calc(var(--px) * 58);
  row-gap: calc(var(--px) * 18);
  background-image: linear-gradient(#c6ba98, #c6ba98), linear-gradient(rgba(29, 26, 25, 0.2), rgba(29, 26, 25, 0.2)), linear-gradient(rgba(29, 26, 25, 0.2), rgba(29, 26, 25, 0.2));
  background-repeat: no-repeat;
  background-size: 1px 100%;
  background-position: 0 0, calc(var(--px) * 929) 0, calc(var(--px) * 1048) 0;
}

.con02_card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 930);
  height: calc(var(--px) * 352);
  padding: 0 calc(var(--px) * 69) 0 calc(var(--px) * 91);
  border: 1px solid #c6ba98;
  border-radius: calc(var(--px) * 20);
  background-color: #fff;
}

.con02_card_txt {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: calc(var(--px) * 2);
}

.con02_card_no {
  width: calc(var(--px) * 45);
  aspect-ratio: 45 / 36;
  font-family: var(--font-hambak);
  font-size: calc(var(--px) * 16);
  font-weight: 400;
  line-height: 1;
  color: #fff;
  background-image: url("/images/con02_01.png");
  background-size: 100% 100%;
}

.con02_card_title {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: calc(var(--px) * 9);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 28);
  font-weight: 700;
  letter-spacing: -0.152vw;
  line-height: calc(var(--px) * 32);
  color: var(--color-dark);
}

.con02_card_desc {
  margin-top: calc(var(--px) * 32);
  font-size: calc(var(--px) * 18);
  font-weight: 500;
  letter-spacing: -0.047vw;
  line-height: calc(var(--px) * 25);
  color: var(--color-dark);
}

.con02_card_img {
  width: calc(var(--px) * 370);
  aspect-ratio: 370 / 266;
  overflow: hidden;
  border-radius: calc(var(--px) * 20);
}

/* ===== con03 ===== */
.con03 {
  justify-content: flex-start;
  align-items: center;
  padding-top: calc(var(--px) * 92);
}

.con03_head {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-left: calc(var(--px) * 5);
}

.con03_title {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 55);
  font-weight: 700;
  letter-spacing: -0.06vw;
  line-height: calc(var(--px) * 60);
  color: #000;
}

.con03_title_point {
  letter-spacing: -0.15vw;
  color: #cc3528;
}

.con03_desc {
  margin-top: calc(var(--px) * 14);
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  letter-spacing: -0.021vw;
  line-height: calc(var(--px) * 30);
  color: var(--color-dark);
}

/* 모바일 스와이퍼 래퍼 — PC 는 레이아웃에 영향 없게 풀고(contents) 화살표·점은 모바일에서만 쓴다 */
.con03_sw {
  display: contents;
}

.con03_nav {
  display: none;
}

.con03_list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-top: calc(var(--px) * 31);
}

.con03_panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  height: calc(var(--px) * 615);
  overflow: hidden;
  --con03-on: 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.con03_panel_01 {
  width: 33.2283%;
  border-right: 1px solid #000;
}

.con03_panel_02 {
  width: 33.5958%;
  border-right: 1px solid #000;
}

.con03_panel_03 {
  width: 33.1759%;
}

/* OFF 상태 — 사진 배경 + 라벨 + 금색 제목. ON 레이어 아래에 깔리는 오버레이. */
.con03_off {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding-bottom: calc(var(--px) * 10);
  background-size: 100% 100%;
}

.con03_off_01 {
  padding-right: calc(var(--px) * 15);
  padding-bottom: calc(var(--px) * 13);
  background-image: url("/images/con03_04.jpg");
}

.con03_off_02 {
  padding-right: calc(var(--px) * 5);
  background-image: url("/images/con03_05.jpg");
}

.con03_off_03 {
  padding-right: calc(var(--px) * 7);
  background-image: url("/images/con03_06.jpg");
}

.con03_off_label {
  font-size: calc(var(--px) * 20);
  font-weight: 600;
  letter-spacing: -0.074vw;
  line-height: calc(var(--px) * 28);
  color: #fff;
}

.con03_off_label_01 {
  margin-left: calc(var(--px) * 3);
}

.con03_off_label_02 {
  margin-left: calc(var(--px) * 19);
}

.con03_off_label_03 {
  margin-left: calc(var(--px) * 17);
}

.con03_off_title {
  margin-top: calc(var(--px) * 14);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 43);
  font-weight: 700;
  letter-spacing: -0.16vw;
  line-height: calc(var(--px) * 51);
  text-align: center;
  color: var(--color-point);
}

/* ON 상태 — 질감 배경 + 알약 + 제목·설명 + 요리. 기본은 숨김(OFF 노출), .on 또는 :hover 로 노출. */
.con03_on {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: calc(var(--px) * 54);
  opacity: var(--con03-on);
  transition: opacity 0.4s ease;
  background-size: 100% 100%;
}

.con03_on_01 {
  background-image: url("/images/con03_01.jpg");
}

.con03_on_02 {
  padding-top: calc(var(--px) * 57.5);
  background-image: url("/images/con03_02.jpg");
}

.con03_on_03 {
  padding-top: calc(var(--px) * 57.5);
  background-image: url("/images/con03_03.jpg");
}

.con03_panel.on {
  --con03-on: 1;
}

.con03_panel:hover {
  --con03-on: 1;
}

.con03_list:hover .con03_panel.on:not(:hover) {
  --con03-on: 0;
}

/* 「불 영상」 자리 — 영상 미수령, 빈 슬롯. 요리 뒤(DOM 순서)에서 screen 합성. */
.con03_fire {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  top: calc(var(--px) * 158);
  left: calc(var(--px) * -82);
  width: calc(var(--px) * 876);
  height: calc(var(--px) * 471);
  mix-blend-mode: screen;
}

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

.con03_pill_row {
  width: 100%;
  height: calc(var(--px) * 73);
  background: linear-gradient(rgba(236, 204, 121, 0.1), rgba(236, 204, 121, 0.1)) 0 calc(var(--px) * 35) / 100% 1px no-repeat;
}

.con03_pill {
  width: calc(var(--px) * 358);
  height: calc(var(--px) * 73);
  border-radius: 50vw;
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 25);
  font-weight: 700;
  letter-spacing: -0.092vw;
  line-height: calc(var(--px) * 28);
  color: #000;
  background-color: var(--color-point);
}

.con03_pill_02 {
  margin-left: calc(var(--px) * 5);
}

.con03_pill_03 {
  margin-left: calc(var(--px) * 24);
}

.con03_on_txt {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: calc(var(--px) * 43);
  text-align: center;
}

.con03_on_txt_01 {
  margin-right: calc(var(--px) * 10);
}

.con03_on_txt_02 {
  margin-top: calc(var(--px) * 39.5);
  margin-right: calc(var(--px) * 5);
}

.con03_on_txt_03 {
  margin-top: calc(var(--px) * 39.5);
  margin-left: calc(var(--px) * 4);
}

.con03_on_title {
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 34);
  font-weight: 700;
  letter-spacing: -0.15vw;
  line-height: calc(var(--px) * 48);
  color: #fff;
}

.con03_on_title_dual {
  letter-spacing: -0.105vw;
}

.con03_on_desc {
  margin-top: calc(var(--px) * 10);
  font-size: calc(var(--px) * 18);
  font-weight: 300;
  letter-spacing: -0.057vw;
  line-height: calc(var(--px) * 25);
  color: #fff;
}

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

.con03_foods_01 {
  margin-top: calc(var(--px) * 33);
  margin-right: calc(var(--px) * 17);
}

.con03_foods_02 {
  margin-top: calc(var(--px) * 6);
  margin-left: calc(var(--px) * 16);
}

.con03_foods_03 {
  margin-top: calc(var(--px) * 70);
  margin-left: calc(var(--px) * 9);
}

.con03_food {
  flex-shrink: 0;
}

.con03_food_01 {
  width: calc(var(--px) * 523);
  aspect-ratio: 523 / 369;
}

.con03_food_02a {
  width: calc(var(--px) * 502);
  aspect-ratio: 502 / 406;
}

.con03_food_02b {
  width: calc(var(--px) * 522);
  aspect-ratio: 522 / 370;
  margin-top: calc(var(--px) * 21);
  margin-left: calc(var(--px) * -243);
}

.con03_food_03a {
  width: calc(var(--px) * 353);
  aspect-ratio: 353 / 314;
}

.con03_food_03b {
  width: calc(var(--px) * 362);
  aspect-ratio: 362 / 313;
  margin-top: calc(var(--px) * 14);
  margin-left: calc(var(--px) * -112);
}

/* con03 패널 전환 — ON 레이어가 페이드되는 동안 안쪽 요소가 --con03-on 값을 따라 순차로 올라오며 등장 */
.con03_panel {
  cursor: pointer;
}

.con03_pill,
.con03_on_title,
.con03_on_desc,
.con03_fire {
  opacity: var(--con03-on);
}

.con03_pill {
  transform: translateY(calc((1 - var(--con03-on)) * var(--px) * 24));
  transition: opacity 0.6s ease 0.05s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

.con03_on_title {
  transform: translateY(calc((1 - var(--con03-on)) * var(--px) * 28));
  transition: opacity 0.6s ease 0.12s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

.con03_on_desc {
  transform: translateY(calc((1 - var(--con03-on)) * var(--px) * 28));
  transition: opacity 0.6s ease 0.2s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.con03_fire {
  transition: opacity 0.8s ease 0.2s;
}

.con03_food img {
  opacity: var(--con03-on);
  transform: translateY(calc((1 - var(--con03-on)) * var(--px) * 50));
  transition: opacity 0.7s ease 0.28s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.28s;
}

.con03_food_02b img,
.con03_food_03b img {
  transition-delay: 0.38s;
}

@media (prefers-reduced-motion: reduce) {
  .con03_pill,
  .con03_on_title,
  .con03_on_desc,
  .con03_fire,
  .con03_food img {
    transition: none;
  }
}

/* ===== con04 ===== */
.con04 {
  justify-content: flex-start;
  align-items: center;
  padding-top: calc(var(--px) * 89);
  padding-bottom: calc(var(--px) * 48);
  background-image: url("/images/con04_01.jpg");
}

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

.con04_seal {
  width: calc(var(--px) * 39);
  aspect-ratio: 39 / 86;
}

.con04_eyebrow {
  margin-top: calc(var(--px) * 19);
  margin-right: calc(var(--px) * 4);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 30.7);
  font-weight: 700;
  letter-spacing: -0.075vw;
  line-height: calc(var(--px) * 36);
  color: #000;
}

.con04_title {
  margin-top: calc(var(--px) * 13);
  margin-left: calc(var(--px) * 8);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 55);
  font-weight: 700;
  letter-spacing: -0.06vw;
  line-height: calc(var(--px) * 60);
  color: #000;
  white-space: nowrap;
}

.con04_title_point {
  color: #cc3528;
}

.con04_desc {
  margin-top: calc(var(--px) * 9);
  margin-left: calc(var(--px) * 6);
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  letter-spacing: -0.021vw;
  line-height: calc(var(--px) * 30);
  color: var(--color-dark);
}

.con04_list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: calc(var(--px) * 14.3);
  width: 100%;
  margin-top: calc(var(--px) * 40);
}

/* 카드 — 기본(금색) / .on(다크). 「신호등 모션」은 .on 을 01→04 로 옮기는 순환(Animation Pass). 글자색은 카드에서 상속. */
.con04_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 362);
  height: calc(var(--px) * 333);
  padding-top: calc(var(--px) * 40);
  border: 1px solid #b6b2a8;
  border-radius: calc(var(--px) * 30);
  text-align: center;
  color: #000;
  background-color: var(--color-point);
  --con04-on: 0;
}

.con04_card.on {
  --con04-on: 1;
  color: #fff;
  background-color: #4a3e2b;
  transform: translateY(calc(var(--px) * -14));
  box-shadow: 0 14px 28px rgba(74, 62, 43, 0.28);
}

.con04_icon {
  width: calc(var(--px) * 79);
  height: calc(var(--px) * 80);
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 0 calc(var(--px) * 9 * var(--con04-on)) rgba(236, 204, 121, calc(0.35 * var(--con04-on)));
  transform: translateY(calc(var(--px) * -4 * var(--con04-on)));
}

.con04_icon_img_01 {
  width: calc(var(--px) * 49);
  aspect-ratio: 49 / 49;
}

.con04_icon_img_02 {
  width: calc(var(--px) * 49);
  aspect-ratio: 49 / 49;
}

.con04_icon_img_03 {
  width: calc(var(--px) * 38);
  aspect-ratio: 38 / 48;
}

.con04_icon_img_04 {
  width: calc(var(--px) * 52);
  aspect-ratio: 52 / 39;
}

.con04_card_title {
  margin-top: calc(var(--px) * 15);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 38);
  font-weight: 700;
  letter-spacing: -0.05vw;
  line-height: calc(var(--px) * 44);
  transform: translateY(calc(var(--px) * -2 * var(--con04-on)));
}

.con04_card_sub {
  margin-top: calc(var(--px) * 7);
  font-size: calc(var(--px) * 19);
  font-weight: 700;
  letter-spacing: -0.05vw;
  line-height: calc(var(--px) * 25);
  transform: translateY(calc(var(--px) * -2 * var(--con04-on)));
}

.con04_card_desc {
  margin-top: calc(var(--px) * 25);
  font-size: calc(var(--px) * 19);
  font-weight: 300;
  letter-spacing: -0.05vw;
  line-height: calc(var(--px) * 25);
  opacity: calc(0.72 + 0.28 * var(--con04-on));
  transform: translateY(calc(var(--px) * -2 * var(--con04-on)));
}

/* ===== con05 ===== */
/* 배경: con04 와 같은 배경 레이어의 이어짐 — 상단 300행만 이미지, 아래는 크림 단색. back_img 의 cover 를 덮어씀 */
.con05 {
  justify-content: flex-start;
  align-items: center;
  padding-top: calc(var(--px) * 51);
  background-color: #f9f7ea;
  background-image: url("/images/con05_01.jpg");
  background-size: 100% auto;
}

.con05_panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 94.8031%;
  overflow: hidden;
  padding-top: calc(var(--px) * 56);
  border-radius: calc(var(--px) * 40) calc(var(--px) * 40) 0 0;
  background-color: var(--color-dark);
}

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

.con05_dish_top {
  width: calc(var(--px) * 175);
  aspect-ratio: 175 / 140;
  margin-right: calc(var(--px) * 13);
}

.con05_eyebrow {
  margin-top: calc(var(--px) * 24);
  margin-right: calc(var(--px) * 5);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 30.7);
  font-weight: 700;
  letter-spacing: -0.075vw;
  line-height: calc(var(--px) * 36);
  color: #fff;
}

.con05_title {
  margin-top: calc(var(--px) * 12);
  margin-left: calc(var(--px) * 7);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 55);
  font-weight: 700;
  letter-spacing: -0.16vw;
  line-height: calc(var(--px) * 60);
  color: var(--color-point);
  white-space: nowrap;
}

.con05_desc {
  margin-top: calc(var(--px) * 17);
  margin-left: calc(var(--px) * 6);
  font-size: calc(var(--px) * 20);
  font-weight: 400;
  letter-spacing: -0.021vw;
  line-height: calc(var(--px) * 30);
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.con05_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  row-gap: calc(var(--px) * 18);
  width: calc(var(--px) * 1540);
  margin-top: calc(var(--px) * 41);
}

/* 카드 — 기본(금색) / .on(빨강). 「신호등모션」은 .on 을 01→04 로 옮기는 순환(Animation Pass). 상태색은 변수로만 교체 */
.con05_card {
  --c05-accent: #edcf80;
  --c05-wipe: 0;
  --c05-icon: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 758);
  height: calc(var(--px) * 232);
  padding-left: calc(var(--px) * 61);
  border-radius: calc(var(--px) * 20);
  background-color: #fff;
}

.con05_card.on {
  --c05-accent: #cc3528;
  --c05-wipe: 1;
  --c05-icon: brightness(0) invert(1);
}

.con05_card_r {
  justify-content: flex-end;
  padding-left: 0;
  padding-right: calc(var(--px) * 60);
}

.con05_icon {
  width: calc(var(--px) * 119);
  height: calc(var(--px) * 119);
  border-radius: 50%;
  background-color: var(--c05-accent);
}

.con05_icon_img {
  filter: var(--c05-icon);
}

.con05_icon_img_01 {
  width: calc(var(--px) * 58);
  aspect-ratio: 58 / 58;
}

.con05_icon_img_02 {
  width: calc(var(--px) * 60);
  aspect-ratio: 60 / 60;
}

.con05_icon_img_03 {
  width: calc(var(--px) * 56);
  aspect-ratio: 56 / 52;
}

.con05_icon_img_04 {
  width: calc(var(--px) * 65);
  aspect-ratio: 65 / 61;
}

.con05_body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: calc(var(--px) * 8);
  margin-left: calc(var(--px) * 24);
}

.con05_body_r {
  align-items: flex-end;
  margin-left: 0;
  margin-right: calc(var(--px) * 33);
  text-align: right;
}

.con05_card_title {
  padding: 0 calc(var(--px) * 8) 0 calc(var(--px) * 10);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 30);
  font-weight: 700;
  letter-spacing: -0.15vw;
  line-height: calc(var(--px) * 39);
  color: transparent;
  white-space: nowrap;
  /* 라벨 박스 — 금색 바탕 위에 빨강이 왼쪽→오른쪽으로 칠해지고, 글자도 같은 폭만큼 흰색으로 바뀐다(위 레이어부터: 흰 글자 / 검은 글자 / 빨강 박스 / 금색 박스) */
  background:
    linear-gradient(#fff, #fff) 0 0 / calc(100% * var(--c05-wipe)) 100% no-repeat text,
    linear-gradient(#1d1a19, #1d1a19) text,
    linear-gradient(#cc3528, #cc3528) 0 0 / calc(100% * var(--c05-wipe)) 100% no-repeat,
    #edcf80;
  -webkit-background-clip: text, text, border-box, border-box;
}

.con05_card_title_s {
  font-size: calc(var(--px) * 22);
  letter-spacing: -0.1vw;
  line-height: 1;
}

/* 시안 2행 카드는 라벨 박스가 글줄보다 3px 위 — 본문 전체 높이는 그대로 */
.con05_card_title_b {
  margin-top: calc(var(--px) * -3);
}

.con05_card_desc {
  margin-top: calc(var(--px) * 12);
  padding: 0 calc(var(--px) * 6) 0 calc(var(--px) * 11);
  font-size: calc(var(--px) * 19);
  font-weight: 400;
  letter-spacing: -0.05vw;
  line-height: calc(var(--px) * 25);
  color: #1d1a19;
  white-space: nowrap;
}

.con05_card_desc_b {
  margin-top: calc(var(--px) * 15);
}

.con05_dish {
  width: calc(var(--px) * 846);
  aspect-ratio: 846 / 450;
  margin-top: calc(var(--px) * -295);
  margin-right: calc(var(--px) * 28);
}

.con05_band {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: calc(var(--px) * 69);
  padding-bottom: calc(var(--px) * 60);
  background-color: #4a3e2b;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
  background-size: calc(var(--px) * 20) 100%;
  background-position: calc(var(--px) * 2) 0;
}

.con05_band_txt {
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 28);
  font-weight: 700;
  letter-spacing: -0.076vw;
  line-height: calc(var(--px) * 42);
  text-align: center;
  white-space: nowrap;
}

.con05_band_line {
  display: block;
  color: #fff;
}

.con05_band_point {
  display: block;
  color: #edcf80;
}

/* ===== con06 ===== */
.con06 {
  justify-content: flex-start;
  align-items: center;
  background-color: #edcf80;
}

.con06_top {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 94.8031%;
  margin-right: 1px;
  padding-top: calc(var(--px) * 103);
  padding-bottom: calc(var(--px) * 49);
  border-radius: 0 0 calc(var(--px) * 30) calc(var(--px) * 30);
  background-color: #fff;
}

.con06_eyebrow {
  margin-right: calc(var(--px) * 4);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 30.7);
  font-weight: 700;
  letter-spacing: -0.075vw;
  line-height: calc(var(--px) * 36);
  color: #000;
}

.con06_title {
  margin-top: calc(var(--px) * 12);
  margin-left: calc(var(--px) * 6);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 55);
  font-weight: 700;
  letter-spacing: -0.176vw;
  line-height: calc(var(--px) * 60);
  color: #000;
  white-space: nowrap;
}

.con06_title_point {
  color: #cc3528;
}

.con06_desc {
  margin-top: calc(var(--px) * 12);
  margin-left: calc(var(--px) * 7);
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  letter-spacing: -0.021vw;
  line-height: calc(var(--px) * 30);
  color: #000;
  text-align: center;
  white-space: nowrap;
}

/* 띠 — 점선(5on/5off, 첫 dash x−1) 은 배경, 아이콘 박스는 위아래 카드로 걸치며 띠 높이는 68 유지 */
.con06_band {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-image: linear-gradient(90deg, rgba(29, 26, 25, 0.5) calc(var(--px) * 5), transparent calc(var(--px) * 5));
  background-size: calc(var(--px) * 10) 1px;
  background-position: calc(var(--px) * -1) calc(var(--px) * 32);
  background-repeat: repeat-x;
}

.con06_flow {
  margin-right: calc(var(--px) * 2);
}

/* 아이콘 박스 — 기본(금색) / .on(다크). 「신호등모션」은 .on 을 01→04 로 옮기는 순환(Animation Pass). 상태색은 변수로만 교체 */
.con06_step {
  --c06-bg: #edcf80;
  --c06-line: #c9af6b;
  --c06-icon: none;
  box-sizing: border-box;
  width: calc(var(--px) * 94);
  height: calc(var(--px) * 94);
  margin: calc(var(--px) * -12) 0 calc(var(--px) * -14);
  border: 1px solid var(--c06-line);
  border-radius: calc(var(--px) * 20);
  background-color: var(--c06-bg);
}

.con06_step.on {
  --c06-bg: #2a221e;
  --c06-line: #edcf80;
  --c06-icon: brightness(0) invert(1);
}

.con06_step_img {
  filter: var(--c06-icon);
}

.con06_step_img_01 {
  width: calc(var(--px) * 41);
  aspect-ratio: 41 / 43;
}

.con06_step_img_02 {
  width: calc(var(--px) * 40);
  aspect-ratio: 40 / 45;
}

.con06_step_img_03 {
  width: calc(var(--px) * 49);
  aspect-ratio: 49 / 37;
}

.con06_step_img_04 {
  width: calc(var(--px) * 44);
  aspect-ratio: 44 / 44;
}

.con06_arrow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 15);
  height: calc(var(--px) * 15);
  margin-bottom: calc(var(--px) * 3);
  background-color: var(--color-dark);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.con06_arrow_01 {
  margin-left: calc(var(--px) * 136);
  margin-right: calc(var(--px) * 135);
}

.con06_arrow_02 {
  margin-left: calc(var(--px) * 132);
  margin-right: calc(var(--px) * 135);
}

.con06_arrow_03 {
  margin-left: calc(var(--px) * 131);
  margin-right: calc(var(--px) * 135);
}

.con06_bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 94.8031%;
  margin-right: 1px;
  padding-top: calc(var(--px) * 67);
  padding-bottom: calc(var(--px) * 94);
  border-radius: calc(var(--px) * 30) calc(var(--px) * 30) 0 0;
  background-color: #fff;
}

/* 모바일 스와이퍼 래퍼 — PC 는 레이아웃에 영향 없게 풀고(contents) 화살표는 모바일에서만 쓴다 */
.con06_sw {
  display: contents;
}

.con06_nav {
  display: none;
}

.con06_list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: calc(var(--px) * 1439);
  margin-left: 1px;
}

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

.con06_photo {
  width: calc(var(--px) * 310);
  aspect-ratio: 310 / 180;
  overflow: hidden;
  border-radius: calc(var(--px) * 20);
}

.con06_photo img {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.con06_item:hover .con06_photo img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .con06_photo img {
    transition: none;
  }
}

.con06_item_title {
  margin-top: calc(var(--px) * 32);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 30);
  font-weight: 700;
  letter-spacing: -0.09vw;
  line-height: calc(var(--px) * 40);
  color: #000;
  white-space: nowrap;
}

.con06_item_sub {
  margin-top: calc(var(--px) * 8);
  font-size: calc(var(--px) * 18);
  font-weight: 700;
  letter-spacing: -0.057vw;
  line-height: calc(var(--px) * 25);
  color: #a3271f;
  text-decoration: underline;
  text-decoration-thickness: calc(var(--px) * 2);
  text-underline-offset: calc(var(--px) * 4);
  white-space: nowrap;
}

.con06_item_desc {
  margin-top: calc(var(--px) * 25);
  font-size: calc(var(--px) * 18);
  font-weight: 500;
  letter-spacing: -0.057vw;
  line-height: calc(var(--px) * 25);
  color: #000;
  text-align: center;
  white-space: nowrap;
}

/* ===== con07 ===== */
.con07 {
  justify-content: center;
  align-items: center;
  height: calc(var(--px) * 458);
  padding-top: calc(var(--px) * 19);
  box-sizing: border-box;
  background-color: #000;
  clip-path: inset(0);
}

.con07_fix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url("/images/con07_01.jpg");
  background-repeat: no-repeat;
  background-size: calc(var(--px) * 1990) auto;
  background-position: calc(var(--px) * -43) calc((100vh - var(--px) * 458) / 2 - var(--px) * 1284);
}

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

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

.con07_line {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1px;
  height: calc(var(--px) * 101);
  background-color: #edcf80;
}

.con07_brand_txt {
  margin-top: calc(var(--px) * -1);
  margin-right: calc(var(--px) * 4);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 27.62);
  font-weight: 700;
  letter-spacing: 0.29vw;
  line-height: calc(var(--px) * 28);
  color: var(--color-point);
  writing-mode: vertical-rl;
  white-space: nowrap;
}

.con07_title {
  margin-left: calc(var(--px) * 24);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 39.41);
  font-weight: 700;
  letter-spacing: 0.14vw;
  line-height: calc(var(--px) * 43);
  color: #fff;
  writing-mode: vertical-rl;
  white-space: nowrap;
}

/* ===== con08 ===== */
.con08 {
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding-top: calc(var(--px) * 97);
  padding-bottom: calc(var(--px) * 95);
  border-top: 1px solid var(--color-point);
  background-image: url("/images/con08_01.jpg");
  background-origin: border-box;
}

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

.con08_eyebrow {
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 30.66);
  font-weight: 700;
  letter-spacing: -0.09vw;
  line-height: calc(var(--px) * 36);
  color: #000;
}

.con08_title {
  margin-top: calc(var(--px) * 19);
  margin-left: calc(var(--px) * 8);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 55.02);
  font-weight: 700;
  letter-spacing: -0.176vw;
  line-height: calc(var(--px) * 60);
  color: #000;
  text-align: center;
  white-space: nowrap;
}

.con08_title_point {
  color: #cc3528;
}

.con08_desc {
  margin-top: calc(var(--px) * 14);
  margin-left: calc(var(--px) * 7);
  font-size: calc(var(--px) * 20.01);
  font-weight: 500;
  letter-spacing: -0.021vw;
  line-height: calc(var(--px) * 30);
  color: #000;
  text-align: center;
  white-space: nowrap;
}

/* 두루마리 띠 — 뒤 블러 카드 3장은 띠 배경, 두루마리는 흐름 단독 자식 */
.con08_stage {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin-top: calc(var(--px) * 15);
  background-image: url("/images/con08_02.png"), url("/images/con08_06.png"), url("/images/con08_07.png");
  background-repeat: no-repeat;
  background-size: calc(var(--px) * 469) auto, calc(var(--px) * 468) auto, calc(var(--px) * 469) auto;
  background-position: calc(var(--px) * 225) calc(var(--px) * 12), calc(var(--px) * 719) calc(var(--px) * 12), calc(var(--px) * 1205) calc(var(--px) * 12);
}

.con08_scroll {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 875);
  height: calc(var(--px) * 497);
  padding-top: calc(var(--px) * 106);
  background-image: url("/images/con08_03.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}

/* con08-m01 두루마리 펼침 — js/animation.js 가 .unroll 을 붙인 동안만 적용(끝나면 제거 → 정지 상태 = 시안).
   --c08-open 0(말림: 롤러 2개가 가운데 맞붙음) → 1(펼침). 종이·문구는 clip-path 로, 양 끝 롤러는 ::before/::after 가 clip 가장자리를 따라간다. */
.con08_scroll.unroll {
  --c08-x: calc(var(--px) * 381.5 * (1 - var(--c08-open, 1)));
  /* 롤러 바깥 가장자리 픽셀이 반투명이라 뒤의 문구가 비친다 → 클립을 2px 안쪽에서 시작, 펼침이 끝날수록 0 */
  --c08-clip: calc(var(--c08-x) + var(--px) * 2 * (1 - var(--c08-open, 1)));
  clip-path: inset(0 var(--c08-clip) 0 var(--c08-clip));
}

.con08_scroll.unroll::before,
.con08_scroll.unroll::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 1;
  width: calc(var(--px) * 56);
  height: 100%;
  background-image: url("/images/con08_03.png");
  background-repeat: no-repeat;
  background-size: calc(var(--px) * 875) 100%;
}

.con08_scroll.unroll::before {
  left: var(--c08-x);
  background-position: left top;
}

.con08_scroll.unroll::after {
  right: var(--c08-x);
  background-position: right top;
}

.con08_secret {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: calc(var(--px) * 9.7);
  margin-left: calc(var(--px) * 20);
}

.con08_stamp {
  width: calc(var(--px) * 76);
  aspect-ratio: 76 / 94;
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 47.22);
  font-weight: 700;
  line-height: calc(var(--px) * 47);
  color: var(--color-point);
  background-image: url("/images/con08_04.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.con08_label {
  margin-top: calc(var(--px) * 28);
  margin-left: calc(var(--px) * 9);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 25.01);
  font-weight: 700;
  letter-spacing: -0.138vw;
  line-height: calc(var(--px) * 30);
  color: #000;
  white-space: nowrap;
}

.con08_call {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: calc(var(--px) * 10);
}

.con08_call_icon {
  width: calc(var(--px) * 48);
  aspect-ratio: 48 / 58;
}

.con08_call_num {
  margin-left: calc(var(--px) * 3);
  font-family: var(--font-hambak);
  font-size: calc(var(--px) * 61.71);
  letter-spacing: -0.081vw;
  line-height: calc(var(--px) * 50);
  color: var(--color-dark);
  white-space: nowrap;
}

.con08_note {
  margin-top: calc(var(--px) * 17);
  margin-right: calc(var(--px) * 8);
  font-size: calc(var(--px) * 18.01);
  font-weight: 500;
  letter-spacing: -0.057vw;
  line-height: calc(var(--px) * 25);
  color: #000;
  text-align: center;
  white-space: nowrap;
}

/* ===== con09 ===== */
/* overflow visible + z-index 1 — 감자탕(.con09_food)이 섹션 하단 아래(다음 섹션 상단)로 돌출한다. 이 이미지는 con09 소유 */
.con09 {
  position: relative;
  z-index: 1;
  overflow: visible;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: calc(var(--px) * 81);
  background-color: #f5f2e1;
}

.con09_band {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: calc(var(--px) * 9);
  padding-bottom: calc(var(--px) * 9);
  background-color: var(--color-dark);
}

.con09_band_line {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-top: 3px solid var(--color-point);
}

.con09_head {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: calc(var(--px) * 115);
}

.con09_eyebrow {
  margin-right: calc(var(--px) * 8);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 30.66);
  font-weight: 700;
  letter-spacing: -0.09vw;
  line-height: calc(var(--px) * 36);
  color: #000;
}

.con09_title {
  margin-top: calc(var(--px) * 16);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 55.02);
  font-weight: 700;
  letter-spacing: -0.176vw;
  line-height: calc(var(--px) * 60);
  color: #000;
  text-align: center;
  white-space: nowrap;
}

.con09_title_point {
  margin-left: calc(var(--px) * 6);
  color: #cc3528;
}

.con09_desc {
  margin-top: calc(var(--px) * 18);
  margin-left: calc(var(--px) * 7);
  font-size: calc(var(--px) * 20.01);
  font-weight: 500;
  letter-spacing: -0.021vw;
  line-height: calc(var(--px) * 30);
  color: #000;
  text-align: center;
  white-space: nowrap;
}

/* 통계 띠 — 게시판 con09_stat */
.con09_stats {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  margin-top: calc(var(--px) * 30);
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  background-color: #fff;
}

.con09_stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 29.8688%;
  padding-top: calc(var(--px) * 59);
  padding-bottom: calc(var(--px) * 66);
  color: var(--color-dark);
}

.con09_stat:first-child {
  padding-right: calc(var(--px) * 8);
}

.con09_stat:last-child {
  width: 29.8163%;
  padding-left: calc(var(--px) * 8);
}

.con09_stat_on {
  width: 40.315%;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  color: #000;
  background-color: var(--color-point);
  /* 샤인 — 흰 빛줄기가 왼쪽→오른쪽으로 한 번 훑고 쉰다(배경 레이어라 글자는 그대로) */
  background-image: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.25) 45%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.25) 55%, transparent 62%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  animation: shineSweep 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .con09_stat_on {
    animation: none;
  }
}

.con09_stat_label {
  font-size: calc(var(--px) * 24.01);
  font-weight: 600;
  letter-spacing: -0.063vw;
  line-height: calc(var(--px) * 30);
  color: #000;
  white-space: nowrap;
}

.con09_stat_num {
  margin-top: calc(var(--px) * 8);
  font-family: var(--font-hambak);
  font-size: calc(var(--px) * 85.37);
  letter-spacing: -0.112vw;
  line-height: calc(var(--px) * 90);
  white-space: nowrap;
}

.con09_stat_unit {
  font-size: calc(var(--px) * 51.22);
  letter-spacing: -0.067vw;
  line-height: 1;
}

.con09_stat_plus {
  margin-right: calc(var(--px) * -14);
  font-size: calc(var(--px) * 90.04);
  letter-spacing: -0.118vw;
  line-height: 0;
}

/* 월 매출 카드 롤링 레인 — 좌(→)·우(←), 게시판 con09_sales */
.con09_roll {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-top: calc(var(--px) * 50);
}

/* 롤링 swiper 2개 — 좌 레인(카드 →) x0~502 · 우 레인(카드 ←) x1403~1905. 가운데는 감자탕(.con09_food) */
.con09_lane {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 502);
  margin-left: 0;
  margin-right: 0;
}

/* 한 장씩 끊어 넘김(기본 ease) + 마우스/터치로 잡아 끌 수 있게 — 공통 .flow 는 linear + pointer-events:none 이라 쓰지 않는다 */
.con09_track {
  cursor: grab;
}

.con09_track:active {
  cursor: grabbing;
}

.con09_slide {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
  width: auto !important;
  margin-right: calc(var(--px) * 23);
}

.con09_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  width: calc(var(--px) * 395);
  height: calc(var(--px) * 238);
  overflow: hidden;
  border: 1px solid #000;
  border-radius: calc(var(--px) * 20);
  background-color: #fff;
}

.con09_card_tit {
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 23.4);
  font-weight: 700;
  letter-spacing: -0.078vw;
  line-height: calc(var(--px) * 61);
  color: #fff;
  text-align: center;
  background-color: #000;
}

.con09_card_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-left: calc(var(--px) * 45);
}

.con09_card_row_avg {
  height: calc(var(--px) * 88);
}

.con09_card_row_sum {
  box-sizing: border-box;
  height: calc(var(--px) * 87);
  padding-bottom: calc(var(--px) * 4);
  border-top: 1px solid #d9d9d9;
}

.con09_card_label {
  width: calc(var(--px) * 74);
  font-size: calc(var(--px) * 18.05);
  font-weight: 600;
  letter-spacing: -0.047vw;
  line-height: calc(var(--px) * 22);
  color: #000;
  white-space: nowrap;
}

.con09_card_bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 1px;
  height: calc(var(--px) * 14);
  background-color: #000;
}

.con09_card_num {
  flex-grow: 1;
  padding-right: calc(var(--px) * 49);
  font-family: var(--font-hambak);
  font-size: calc(var(--px) * 35.87);
  letter-spacing: -0.047vw;
  line-height: calc(var(--px) * 40);
  color: var(--color-dark);
  text-align: right;
  white-space: nowrap;
}

.con09_card_unit {
  font-size: calc(var(--px) * 22.83);
  letter-spacing: -0.03vw;
  line-height: 1;
}

/* 통계 띠 하단 금색 그라데이션 · 카드 상단 주황 줄 — 두 요소 위로 걸치는 장식 */
/* 감자탕 — 섹션 하단(y950)을 164px 넘어 다음 섹션 상단으로 돌출. 좌표 left 없음(부모 align-items:center) */
.con09_food {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index: 2; /* Swiper 가 .swiper 에 z-index:1 을 걸어(스택 컨텍스트) 롤링 카드 위로 올리려면 2 필요 — 공통 .btn_arr 와 같은 층 */
  top: calc(var(--px) * 544);
  width: calc(var(--px) * 815);
  aspect-ratio: 815 / 570;
}

/* ===== con10 ===== */
/* 쌓임 순서·position 미지정(auto) — con09 의 감자탕(.con09_food)이 이 섹션 상단 164px 위로 그려진다 */
.con10 {
  justify-content: flex-start;
  align-items: center;
  padding-top: calc(var(--px) * 217);
  padding-bottom: calc(var(--px) * 91);
  background-image: url("/images/con10_01.jpg");
}

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

.con10_eyebrow {
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 30.66);
  font-weight: 700;
  letter-spacing: -0.09vw;
  line-height: calc(var(--px) * 36);
  color: #fff;
  white-space: nowrap;
}

.con10_title {
  margin-top: calc(var(--px) * 13);
  margin-right: calc(var(--px) * 8);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 55.02);
  font-weight: 700;
  letter-spacing: -0.176vw;
  word-spacing: calc(var(--px) * 4);
  line-height: calc(var(--px) * 60);
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.con10_title_point {
  color: var(--color-point);
}

.con10_desc {
  margin-top: calc(var(--px) * 11);
  font-size: calc(var(--px) * 20.01);
  font-weight: 400;
  letter-spacing: -0.021vw;
  line-height: calc(var(--px) * 30);
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

/* 흰 라운드 카드 — 좌 도넛 · 우 비용 표. 높이는 링 460 + 상하 패딩으로 자연 결정 */
.con10_card {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: 66.1942%;
  margin-top: calc(var(--px) * 35);
  padding-top: calc(var(--px) * 48);
  padding-bottom: calc(var(--px) * 44);
  padding-left: calc(var(--px) * 111);
  border-radius: calc(var(--px) * 40);
  background-color: #fff;
}

.con10_donut {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 460);
  border-radius: 50%;
  background-color: #fff5db;
  box-shadow: inset 0 0 0 1px #f4d78b;
}

/* 금색 호 — 그래프 채움 모션 훅(pathLength 100). 중심 (230,230) 반지름 184.6, 12시→4:30 */
.con10_arc_svg {
  width: 100%;
}

.con10_arc {
  fill: none;
  stroke: var(--color-point);
  stroke-width: 58.2;
  stroke-linecap: round;
}

/* 검정 원+해장국+로고 합성 컷 — 좌표 없음, 부모 flex center */
.con10_pot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 286);
  aspect-ratio: 286 / 286;
}

/* 링 우하단에 걸쳐 튀어나온 뱃지 원 */
.con10_badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  left: calc(var(--px) * 335);
  top: calc(var(--px) * 143);
  width: calc(var(--px) * 162);
  height: calc(var(--px) * 162);
  padding-top: calc(var(--px) * 4);
  border-radius: 50%;
  background-color: var(--color-dark);
}

.con10_badge_lbl {
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 23.86);
  font-weight: 700;
  letter-spacing: -0.163vw;
  line-height: calc(var(--px) * 28);
  color: #fcdb84;
  white-space: nowrap;
}

.con10_badge_num {
  font-family: var(--font-hambak);
  font-size: calc(var(--px) * 51.05);
  letter-spacing: -0.067vw;
  line-height: calc(var(--px) * 51);
  color: #fcdb84;
  white-space: nowrap;
}

.con10_badge_pct {
  font-size: calc(var(--px) * 31.54);
}

.con10_cost {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  margin-top: calc(var(--px) * 3);
  margin-left: calc(var(--px) * 96);
}

.con10_note {
  font-size: calc(var(--px) * 17.01);
  font-weight: 500;
  letter-spacing: -0.045vw;
  line-height: calc(var(--px) * 22);
  color: #000;
  white-space: nowrap;
}

/* 비용 표 — 열 190/190/101, 선: 상·헤더하 검정 · 행 구분 회색 · 세로 회색 */
.con10_table {
  width: calc(var(--px) * 481);
  margin-top: calc(var(--px) * 6);
  border-collapse: collapse;
  table-layout: fixed;
}

.con10_th {
  height: calc(var(--px) * 45);
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  font-size: calc(var(--px) * 19.01);
  font-weight: 500;
  letter-spacing: -0.05vw;
  color: #000;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.con10_th:nth-child(1) {
  width: calc(var(--px) * 183.5);
  padding-left: calc(var(--px) * 6);
}

.con10_th:nth-child(2) {
  width: calc(var(--px) * 189);
}

.con10_th:nth-child(3) {
  width: calc(var(--px) * 100.5);
}

.con10_th:nth-child(n+2),
.con10_td:nth-child(n+2) {
  border-left: 1px solid #d9d9d9;
}

.con10_tr {
  border-bottom: 1px solid #d9d9d9;
}

.con10_tr_last {
  border-bottom: 0;
}

.con10_td {
  height: calc(var(--px) * 44.8);
  font-size: calc(var(--px) * 18.01);
  font-weight: 500;
  letter-spacing: -0.047vw;
  color: #000;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.con10_td:first-child {
  padding-left: calc(var(--px) * 6);
}

.con10_tr_sum {
  height: calc(var(--px) * 50);
}

.con10_sum_name {
  border-radius: calc(var(--px) * 10) 0 0 calc(var(--px) * 10);
  padding-left: calc(var(--px) * 2);
  background-color: var(--color-point);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 22.01);
  font-weight: 700;
  letter-spacing: -0.19vw;
  color: #000;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.con10_sum_amt {
  background-color: var(--color-point);
  font-family: var(--font-hambak);
  font-size: calc(var(--px) * 22.01);
  letter-spacing: -0.058vw;
  color: #000;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.con10_sum_rate {
  border-radius: 0 calc(var(--px) * 10) calc(var(--px) * 10) 0;
  padding-top: calc(var(--px) * 3);
  background-color: var(--color-dark);
  font-family: var(--font-hambak);
  font-size: calc(var(--px) * 22.01);
  letter-spacing: -0.058vw;
  color: var(--color-point);
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

/* ===== con11 ===== */
/* 폰 목업 센터 포커스 슬라이더. Swiper 가 .swiper 에 z-index:1 을 걸어 뒷줄 카드 swiper(.con11_cards)가 스택 컨텍스트가 된다
   → DOM 뒤쪽의 .con11_phone · .con11_finger 는 z-index:2 (화살표는 공통 .btn_arr z-index:2) 로 카드 위에 올린다 */
.con11 {
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  height: calc(var(--px) * 942);
  padding-top: calc(var(--px) * 110);
  background-image: url("/images/con11_01.jpg");
}

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

.con11_title {
  margin-right: calc(var(--px) * 5);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 50.02);
  font-weight: 400;
  -webkit-text-stroke: calc(var(--px) * 1) currentColor;
  letter-spacing: -0.125vw;
  word-spacing: calc(var(--px) * 2.5);
  line-height: calc(var(--px) * 60);
  color: #000;
  text-align: center;
  white-space: nowrap;
}

.con11_title_point {
  color: #cc3528;
}

.con11_desc {
  margin-top: calc(var(--px) * 7);
  font-size: calc(var(--px) * 20.01);
  font-weight: 500;
  letter-spacing: -0.021vw;
  line-height: calc(var(--px) * 30);
  color: #000;
  text-align: center;
  white-space: nowrap;
}

.con11_stage {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-top: calc(var(--px) * 33);
}

/* 양옆 카드 swiper 2개 — 폰 좌우로 (시안 카드 x218~547 / x1345~). 좌측은 dir=rtl 이라 활성 카드가 컨테이너 오른쪽 끝에 붙고, 우측은 왼쪽 끝에 붙는다.
   컨테이너 밖은 overflow hidden 으로 잘려 시안처럼 바깥 카드가 화면 모서리에서 잘려 보인다 */
.con11_cards {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  top: 3.6vw;
}

.con11_cards_l {
  left: 0;
  width: calc(var(--px) * 547);
}

.con11_cards_r {
  left: calc(var(--px) * 1345);
  width: calc(var(--px) * 560);
}

/* .swiper 가 position:relative 를 걸어 .absol 과 동률로 지므로 absol 래퍼(.con11_cards) 안쪽에 swiper 를 둔다 */
.con11_cards_sw {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.con11_slide {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-shrink: 0;
  width: calc(var(--px) * 329);
  cursor: pointer;
}

.con11_card {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  aspect-ratio: 329 / 549;
  border-radius: calc(var(--px) * 20) calc(var(--px) * 20) 0 0;
  overflow: hidden;
}

/* 게시판 썸네일이 어떤 비율로 와도 카드(329:549)를 꽉 채워 자른다 */
.con11_card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 센터 폰 화면 슬라이드 */
.con11_screen_slide {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* 활성 슬라이드의 video — 폰 화면(340×731)을 꽉 채운다(cover — 화면 밖으로 밀리거나 가장자리에 선이 비치지 않게). 좌표 없는 absol 이라 width/height 100% 가 곧 화면. 로딩 중엔 아래 썸네일이 보인다 */
.con11_screen_video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.con11_phone {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: calc(var(--px) * -8); /* con11_02.png 상단 투명 여백 8px — 시안의 폰 테두리 상단(y330)에 맞춘다 */
  margin-left: calc(var(--px) * 605);
  z-index: 2;
}

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

/* 폰 화면은 아래로 3px 내리고, 드러나는 상단 바탕은 screen_sw의 베젤 그림자로 덮는다. */
.con11_screen {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  top: calc(var(--px) * 18);
  left: calc(var(--px) * 177);
  width: calc(var(--px) * 344);
  height: calc(var(--px) * 734);
}

.con11_screen_sw {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--px) * 35); /* 프레임 구멍 모서리 반경(실측 ≈35) — 작으면 영상 모서리가 검은 테두리 위로 튀어나온다 */
  box-shadow: 0 calc(var(--px) * -3) 0 #111;
}

/* 화면보다 위 레이어인 손가락 3마디 */
.con11_finger {
  display: flex;
  justify-content: center;
  align-items: center;
  top: calc(var(--px) * 406);
  left: calc(var(--px) * 502);
  width: calc(var(--px) * 23);
  aspect-ratio: 23 / 256;
  z-index: 2;
  /* 같은 손가락 알파를 1px 안쪽으로 겹쳐 밝은 화면 바탕이 섞인 외곽선을 제거한다. */
  mask-image: url('/images/con11_05.png');
  mask-size: 100% 100%;
  mask-position: 1px 0;
  mask-repeat: no-repeat;
}

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

.con11_prev {
  top: 10.4vw;
  left: 32.8%;
}

.con11_next {
  top: 10.4vw;
  left: 63.5%;
}

/* ===== con12 ===== */
/* 평점 5막대 + 리뷰 카드 3레인(세로 Swiper) + 불꽃 고기. Swiper 가 .swiper 에 z-index:1 을 걸어 레인이 스택 컨텍스트가 된다
   → 레인 래퍼 .con12_lanes 에 isolation:isolate 를 걸어 Swiper z-index 를 래퍼 안에 가두고, DOM 뒤쪽 .con12_left(rltv)가 위에 오게 한다 */
.con12 {
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  height: calc(var(--px) * 875);
  padding-top: calc(var(--px) * 190);
  background-image: url("/images/con12_13.jpg");
}

.con12_lanes {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  isolation: isolate;
}

.con12_lane_wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  opacity: 0.2;
}

.con12_lane_wrap_l {
  top: calc(var(--px) * -110);
  left: 30.5%;
}

.con12_lane_wrap_r {
  top: calc(var(--px) * -299);
  right: 30.1%;
}

.con12_lane {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 310);
  height: calc(var(--px) * 1200);
}

.con12_lane_c {
  margin-top: calc(var(--px) * -205);
}

.con12_slide {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  height: auto;
}

.con12_card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 310);
  aspect-ratio: 310 / 420;
  border-radius: calc(var(--px) * 20);
  overflow: hidden;
}

.con12_fire {
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  bottom: 0;
  width: 43.622%;
  aspect-ratio: 831 / 800;
}

/* 독립 연기 PNG — 음식/토치 전경 뒤에서만 피어오름 */
.con12_smoke {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  aspect-ratio: 480 / 640;
}

.con12_smoke_01 {
  left: calc(var(--px) * 250);
  top: calc(var(--px) * -20);
  width: calc(var(--px) * 400);
  opacity: 0.18;
}

.con12_smoke_02 {
  left: calc(var(--px) * 470);
  top: calc(var(--px) * 115);
  width: calc(var(--px) * 260);
  opacity: 0.12;
}

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

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

.con12_eyebrow {
  margin-bottom: calc(var(--px) * 11);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 30.66);
  font-weight: 700;
  letter-spacing: -0.09vw;
  line-height: calc(var(--px) * 36);
  color: #fff;
  white-space: nowrap;
}

.con12_title_line {
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 55.02);
  font-weight: 700;
  letter-spacing: -0.176vw;
  word-spacing: calc(var(--px) * 4);
  line-height: calc(var(--px) * 60);
  color: #fff;
  white-space: nowrap;
}

.con12_title_point {
  color: var(--color-point);
}

.con12_desc {
  margin-top: calc(var(--px) * 15);
  font-size: calc(var(--px) * 20.01);
  font-weight: 500;
  letter-spacing: -0.021vw;
  line-height: calc(var(--px) * 30);
  color: #fff;
  white-space: nowrap;
}

.con12_bars {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  row-gap: calc(var(--px) * 7);
  margin-top: calc(var(--px) * 39);
}

.con12_bar {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 423);
  height: calc(var(--px) * 43);
}

.con12_bar_fill {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding-left: calc(var(--px) * 26);
  border-radius: calc(var(--px) * 5) 0 0 calc(var(--px) * 5);
  background-color: #4a3e2b;
}

.con12_bar_fill_01 {
  width: 81.3239%;
}

.con12_bar_fill_02 {
  width: 52.9551%;
}

.con12_bar_fill_03 {
  width: 50.591%;
}

.con12_bar_fill_04 {
  width: 43.4988%;
}

.con12_bar_fill_05 {
  width: 41.1348%;
}

.con12_bar_label {
  font-size: calc(var(--px) * 16.01);
  font-weight: 500;
  letter-spacing: -0.042vw;
  color: #fff;
  white-space: nowrap;
}

.con12_bar_num {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  border-radius: 0 calc(var(--px) * 5) calc(var(--px) * 5) 0;
  background-color: #fff;
  padding-right: calc(var(--px) * 27);
  font-size: calc(var(--px) * 15.01);
  font-weight: 700;
  letter-spacing: -0.016vw;
  color: #000;
}

/* ===== con13 ===== */
/* 메뉴안내 — 인장·제목·설명 + 분류 탭 + 카드 슬라이더. 게시판 con13_menu: 탭 = bo_category_list, 카드 = 글, 분류 패널마다 Swiper.
   absol 없음 — 화살표는 .con13_stage 흐름(카드 양옆) 안 형제라 Swiper z-index 와 겹치지 않는다 */
.con13 {
  justify-content: flex-start;
  align-items: center;
  padding-top: calc(var(--px) * 61);
  padding-bottom: calc(var(--px) * 108);
  background-color: #f9f9f9;
  background-image: url("/images/con13_01.png");
}

.con13_seal {
  width: calc(var(--px) * 39);
  aspect-ratio: 39 / 86;
}

.con13_title {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: calc(var(--px) * 24);
  margin-left: calc(var(--px) * 5);
  font-family: var(--font-myeongjo);
  font-weight: 700;
  color: #000;
  text-align: center;
  white-space: nowrap;
}

.con13_title_sub {
  font-size: calc(var(--px) * 40);
  letter-spacing: -0.21vw;
  line-height: calc(var(--px) * 44);
}

.con13_title_main {
  margin-top: calc(var(--px) * 8);
  font-size: calc(var(--px) * 55.02);
  letter-spacing: -0.1855vw;
  word-spacing: calc(var(--px) * 4);
  line-height: calc(var(--px) * 60);
}

.con13_title_point {
  color: #cb3228;
}

.con13_desc {
  margin-top: calc(var(--px) * 12);
  margin-left: calc(var(--px) * 6);
  font-size: calc(var(--px) * 20.01);
  font-weight: 500;
  letter-spacing: -0.021vw;
  line-height: calc(var(--px) * 30);
  color: #000;
  text-align: center;
  white-space: nowrap;
}

/* 탭바 — 분류 수(N)만큼 균등 분할: li 는 width 0 + flex-grow 1 */
.con13_tabs {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  width: 69.4488%;
  margin-top: calc(var(--px) * 31);
  border: 1px solid #fff;
  border-radius: calc(var(--px) * 15);
  overflow: hidden;
  background-color: var(--color-dark);
}

.con13_tabs_item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  flex-grow: 1;
  width: 0;
  min-width: 0;
}

.con13_tab {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 22.01);
  font-weight: 700;
  letter-spacing: -0.149vw;
  line-height: calc(var(--px) * 51);
  color: #fff;
  white-space: nowrap;
}

.con13_tabs_item:last-child .con13_tab {
  border-right: 0;
}

.con13_tab.on {
  border-right-color: #fff;
  background-color: var(--color-point);
  color: #000;
}

.con13_stage {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  column-gap: 1.1vw;
  width: 100%;
  margin-top: calc(var(--px) * 31);
}

.con13_arrow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 67);
  aspect-ratio: 67 / 55;
  margin-top: calc(var(--px) * 187);
}

.con13_prev {
  margin-right: calc(var(--px) * -1);
}

.con13_arrow_off {
  visibility: hidden;
}

/* 패널은 전부 같은 칸에 겹쳐 두고(grid 1칸) 선택된 것만 보인다 — 탭을 바꿔도 가장 큰 패널 높이로 고정돼 섹션 높이가 안 변한다 */
.con13_panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: start;
  align-items: start;
  width: 69.6063%;
}

.con13_panel {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  grid-area: 1 / 1;
  width: 100%;
  visibility: hidden;
}

.con13_panel.on {
  visibility: visible;
}

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

.con13_slide {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  height: auto;
}

.con13_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #c9c9c9;
  border-radius: calc(var(--px) * 20);
  overflow: hidden;
  background-color: #fff;
}

/* 메뉴 이미지 — 게시판 첨부가 어떤 크기·비율이어도(서버 썸네일이 안 만들어진 작은/특수 이미지 포함) 같은 프레임(426:299)에 꽉 채워 자른다.
   프레임에 overflow hidden + 이미지 w100 h100 object-fit cover. 이미지가 없으면 크림 배경만 보인다 */
.con13_card_img {
  width: 100%;
  aspect-ratio: 426 / 299;
  overflow: hidden;
  border-bottom: 1px solid #c9c9c9;
  background-color: #f5f2e1;
}

.con13_card_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.con13_card_body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: calc(var(--px) * 44);
  padding-bottom: calc(var(--px) * 35);
}

.con13_card_tit {
  font-size: calc(var(--px) * 25.03);
  font-weight: 700;
  letter-spacing: -0.0657vw;
  line-height: calc(var(--px) * 25);
  color: #000;
  text-align: center;
}

.con13_card_desc {
  margin-top: calc(var(--px) * 7);
  font-size: calc(var(--px) * 18.02);
  font-weight: 500;
  letter-spacing: -0.0473vw;
  line-height: calc(var(--px) * 25);
  color: var(--color-dark);
  opacity: 0.6;
  text-align: center;
}

/* 글 없는 분류 — 카드와 같은 높이의 빈 박스(탭 전환 시 섹션 높이가 뛰지 않게) */
.con13_empty {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--px) * 438);
  border: 1px solid #c9c9c9;
  border-radius: calc(var(--px) * 20);
  background-color: #fff;
}

.con13_empty_txt {
  font-size: calc(var(--px) * 25.03);
  font-weight: 500;
  letter-spacing: -0.0657vw;
  line-height: calc(var(--px) * 25);
  color: var(--color-dark);
  opacity: 0.6;
}

/* ===== con14 ===== */
/* 프랜차이즈 — 다크 마퀴 띠(flow_sd 트랙 + 복제, common.css marqueeX) + 서두르세요 타이틀 + 1,700만원 면제혜택 두루마리.
   absol = 좌우 격자 블리드 2개 + marquee 복제 트랙(item02) 뿐. z-index 선언 없음 */
.con14 {
  justify-content: flex-start;
  align-items: center;
  padding-bottom: calc(var(--px) * 75.53125);
  background-image: url("/images/con14_01.jpg");
}

.con14_lat {
  top: 3vw;
  width: calc(var(--px) * 329);
  aspect-ratio: 329 / 771;
}

.con14_lat_l {
  left: calc(var(--px) * -157);
}

.con14_lat_r {
  right: calc(var(--px) * -157);
}

.con14_band {
  width: 100%;
  height: calc(var(--px) * 58);
  background-image: url("/images/con14_02.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.con14_band_txt {
  margin-left: calc(var(--px) * 34);
  font-family: var(--font-myeongjo);
  font-weight: 700;
  font-size: calc(var(--px) * 19);
  letter-spacing: 1.699vw;
  line-height: calc(var(--px) * 30);
  color: #a6a59f;
  white-space: nowrap;
}

.con14_eyebrow {
  margin-top: 5.6vw;
  font-family: var(--font-myeongjo);
  font-weight: 700;
  font-size: calc(var(--px) * 30.66);
  letter-spacing: -0.0945vw;
  line-height: calc(var(--px) * 30);
  color: #000;
  white-space: nowrap;
}

.con14_title {
  margin-top: 0.6vw;
  font-family: var(--font-myeongjo);
  font-weight: 700;
  font-size: calc(var(--px) * 53.02);
  letter-spacing: -0.1vw;
  line-height: calc(var(--px) * 51);
  color: #000;
  white-space: nowrap;
}

.con14_title_point {
  color: #cc3528;
}

.con14_sub {
  margin-top: 0.5vw;
  font-size: calc(var(--px) * 20.01);
  font-weight: 500;
  letter-spacing: -0.021vw;
  line-height: calc(var(--px) * 30);
  color: #000;
  white-space: nowrap;
}

.con14_free {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.9vw;
  margin-left: calc(var(--px) * 2);
  font-family: var(--font-myeongjo);
  font-weight: 700;
  font-size: calc(var(--px) * 49.84);
  line-height: calc(var(--px) * 60);
  white-space: nowrap;
}

.con14_free_num {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 230);
  letter-spacing: -0.102vw;
  color: #fff;
  background-color: #cc3528;
}

.con14_free_txt {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: calc(var(--px) * 1);
  letter-spacing: -0.249vw;
  color: #000;
}

.con14_scroll {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 1198);
  height: calc(var(--px) * 330);
  margin-top: -0.7vw;
  margin-right: calc(var(--px) * 7);
  background-image: url("/images/con14_04.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.con14_list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: calc(var(--px) * 87);
  margin-left: calc(var(--px) * 41);
}

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

.con14_item_3 {
  margin-left: calc(var(--px) * 4);
}

.con14_item_name {
  font-size: calc(var(--px) * 28.01);
  font-weight: 700;
  letter-spacing: -0.0368vw;
  line-height: calc(var(--px) * 36);
  color: #000;
  white-space: nowrap;
}

.con14_item_old {
  margin-top: calc(var(--px) * 6.6);
  font-size: calc(var(--px) * 20.97);
  font-weight: 600;
  letter-spacing: -0.055vw;
  line-height: calc(var(--px) * 22);
  color: #000;
  text-decoration: line-through;
  white-space: nowrap;
}

.con14_stamp {
  margin-top: 0.2vw;
  margin-left: calc(var(--px) * 13);
  width: calc(var(--px) * 150);
  aspect-ratio: 150 / 94;
}

/* ===== con15 ===== */
/* 동종업계 최저 창업 비용 — 그라데이션 띠(배경 bake con15_01.jpg 상단 200) + 비교표 카드(흰 박스) + 한옥 지붕.
   absol = 지붕(.con15_roof) + 점 의사요소 2개(.con15_band_dots::before/::after). 지붕이 DOM 뒤라 카드 위에 그려지므로 .rltv 불필요. z-index 선언 없음 */
.con15 {
  justify-content: flex-start;
  align-items: center;
  padding-bottom: calc(var(--px) * 77);
  background-image: url("/images/con15_01.jpg");
}

.con15_band {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: calc(var(--px) * 59);
  padding-bottom: calc(var(--px) * 53.6875);
}

.con15_band_title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  line-height: calc(var(--px) * 65);
  white-space: nowrap;
  /* con15-m01 shine — 광택 줄기는 글자 모양으로만 보이게 background-clip:text (제목 박스 위 오버레이는 글자 밖 배경에도 번졌다).
     js/animation.js 가 --c15-shine(background-position X)을 100%→0% 로 움직여 1회 통과. 100% = 줄기가 왼쪽 밖(숨김).
     글자색은 자식(a·b)까지 transparent 여야 배경이 비친다 / 음수 letter-spacing 이 마지막 글자를 자르지 않게 오른쪽 박스를 넓히고 마진으로 되돌림 */
  padding-right: calc(var(--px) * 20);
  margin-right: calc(var(--px) * -20);
  color: transparent;
  background-image: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.7) 50%, transparent 62%), linear-gradient(var(--color-point), var(--color-point));
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: var(--c15-shine) 0;
  -webkit-background-clip: text;
  background-clip: text;
  --c15-shine: 100%;
}

.con15_band_a {
  font-family: var(--font-myeongjo);
  font-weight: 700;
  font-size: calc(var(--px) * 45.51);
  letter-spacing: -0.2245vw;
  color: transparent;
}

/* position:relative 자식은 부모 background-clip:text 에서 빠진다 → 위 점 2개를 가진 이 구간만 단색 본색(shine 제외) */
.con15_band_dots {
  position: relative;
  color: var(--color-point);
}

.con15_band_dots::before,
.con15_band_dots::after {
  content: "";
  position: absolute;
  top: calc(var(--px) * -9);
  width: calc(var(--px) * 9);
  height: calc(var(--px) * 9);
  border-radius: 50%;
  background-color: var(--color-point);
}

.con15_band_dots::before {
  left: calc(var(--px) * 20);
}

.con15_band_dots::after {
  left: calc(var(--px) * 57);
}

.con15_band_b {
  margin-left: calc(var(--px) * 15);
  font-family: var(--font-hambak);
  font-size: calc(var(--px) * 55.6);
  letter-spacing: -0.073vw;
  color: transparent;
}

.con15_band_sub {
  margin-top: calc(var(--px) * 2.3125);
  font-weight: 400;
  font-size: calc(var(--px) * 17.01);
  letter-spacing: -0.0223vw;
  line-height: calc(var(--px) * 20);
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

.con15_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 88.189%;
  padding-top: calc(var(--px) * 97);
  margin-right: 1px;
  border-left: 1px solid #c4c2aa;
  border-right: 1px solid #c4c2aa;
  border-bottom: 1px solid #c4c2aa;
  background-color: #fff;
}

.con15_title {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-family: var(--font-myeongjo);
  font-weight: 700;
  color: #000;
  white-space: nowrap;
}

.con15_title_l1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-left: calc(var(--px) * 8);
  font-size: calc(var(--px) * 30.66);
  letter-spacing: -0.0696vw;
  line-height: calc(var(--px) * 39);
}

.con15_title_l2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: calc(var(--px) * 8);
  margin-left: calc(var(--px) * 4);
  font-size: calc(var(--px) * 55.02);
  letter-spacing: -0.18vw;
  line-height: calc(var(--px) * 65);
}

.con15_title_txt_l2 {
  padding-top: calc(var(--px) * 4);
  line-height: calc(var(--px) * 61);
}

.con15_hl {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.con15_hl_dark {
  width: calc(var(--px) * 97);
  margin-left: calc(var(--px) * 2);
  background-color: #31221e;
}

.con15_hl_red {
  width: calc(var(--px) * 294);
  margin-left: calc(var(--px) * 9);
  background-color: #cc3528;
}

.con15_desc {
  margin-top: calc(var(--px) * 18);
  font-weight: 500;
  font-size: calc(var(--px) * 20.01);
  letter-spacing: -0.021vw;
  line-height: calc(var(--px) * 19);
  color: #000;
  white-space: nowrap;
}

.con15_wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: calc(var(--px) * 1178);
}

.con15_unit {
  font-weight: 500;
  font-size: calc(var(--px) * 15);
  letter-spacing: -0.0394vw;
  line-height: calc(var(--px) * 18.1875);
  text-align: right;
  color: #000;
  opacity: 0.7;
}

.con15_tbl {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  margin-top: calc(var(--px) * 9.8125);
  border-top: 1px solid #000;
  font-weight: 500;
  font-size: calc(var(--px) * 18);
  letter-spacing: -0.0473vw;
  color: #000;
}

.con15_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  line-height: calc(var(--px) * 44.875);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.con15_row_head {
  border-bottom-color: #000;
  background-color: #f3ede4;
  font-weight: 700;
  font-size: calc(var(--px) * 19);
  letter-spacing: -0.0499vw;
}

/* 비용 항목은 게시판 con15_cost - 마지막 줄은 개수와 상관없이 하단선 없이 끝나고, 합계 띠와의 간격만 둔다 */
.con15_row_last {
  border-bottom: 0;
  margin-bottom: calc(var(--px) * 8);
}

.con15_cell {
  text-align: center;
  white-space: nowrap;
}

.con15_cell_head_l {
  width: calc(var(--px) * 572);
  padding-right: calc(var(--px) * 29);
}

.con15_cell_head_r {
  width: calc(var(--px) * 574);
  padding-right: calc(var(--px) * 2);
  border-left: 1px solid rgba(0, 0, 0, 0.15);
}

.con15_cell_new {
  width: calc(var(--px) * 565);
  padding-right: calc(var(--px) * 11);
}

.con15_cell_c1 {
  width: calc(var(--px) * 273);
  padding-left: calc(var(--px) * 13);
}

.con15_cell_c2 {
  width: calc(var(--px) * 310);
  padding-left: calc(var(--px) * 4);
  border-left: 1px solid rgba(0, 0, 0, 0.15);
}

.con15_cell_c3 {
  width: calc(var(--px) * 574);
  padding-right: calc(var(--px) * 2);
  border-left: 1px solid rgba(0, 0, 0, 0.15);
}

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

.con15_old {
  color: #cc3528;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 55%;
  background-size: var(--c15-old-line, 100%) calc(var(--px) * 2);
}

.con15_badge {
  width: calc(var(--px) * 212);
  margin-right: calc(var(--px) * 6);
  border-radius: calc(var(--px) * 6);
  font-family: var(--font-myeongjo);
  font-weight: 700;
  font-size: calc(var(--px) * 18);
  letter-spacing: -0.0473vw;
  line-height: calc(var(--px) * 33);
  color: #fff;
  background-color: #cc3528;
}

.con15_sum {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 1177);
  margin-left: 1px;
  border: 1px solid #d1b467;
  border-radius: calc(var(--px) * 15);
  background-color: var(--color-point);
  font-weight: 700;
  line-height: calc(var(--px) * 59);
  color: var(--color-dark);
}

.con15_sum_col {
  width: calc(var(--px) * 296);
}

.con15_sum_label {
  font-size: calc(var(--px) * 22);
  letter-spacing: -0.0578vw;
}

.con15_sum_label_s {
  font-size: calc(var(--px) * 16);
  line-height: 1;
  letter-spacing: -0.042vw;
}

.con15_sum_val {
  font-size: calc(var(--px) * 22);
  letter-spacing: -0.0578vw;
}

.con15_foot {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: calc(var(--px) * 15);
  margin-left: 1px;
  font-weight: 500;
  font-size: calc(var(--px) * 16);
  letter-spacing: -0.042vw;
  line-height: calc(var(--px) * 24);
  color: #000;
  opacity: 0.7;
}

.con15_foot_item {
  white-space: nowrap;
}

.con15_floor {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 55);
  margin-top: calc(var(--px) * 101);
  border-top: 1px solid #ccc;
  background-color: #31221e;
  background-image: url("/images/con15_03.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.con15_roof {
  bottom: 0;
  left: 26.8241%;
  width: 45.9318%;
  aspect-ratio: 875 / 207;
}

/* ===== con16 ===== */
/* 창업절차 — 구분 띠(그라데이션)·파스타·배경색은 section 배경 3겹(요소·absol 없음). 8단계 카드 2행 + 단계 화살표 li.
   세로 값은 섹션 높이 873.000 유지를 위해 calc(var(--px)*정수) */
.con16 {
  justify-content: flex-start;
  align-items: center;
  padding-top: calc(var(--px) * 151);
  padding-bottom: calc(var(--px) * 130);
  background-color: #31221e;
  background-image: linear-gradient(#1d1a19 calc(var(--px) * 19), #eccc79 calc(var(--px) * 19) calc(var(--px) * 30), #1d1a19 calc(var(--px) * 30)), url("/images/con16_01.png");
  background-repeat: no-repeat;
  background-position: 0 0, calc(var(--px) * 286) calc(var(--px) * 561);
  background-size: 100% calc(var(--px) * 49), calc(var(--px) * 1333) calc(var(--px) * 312);
}

.con16_title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-myeongjo);
  font-weight: 700;
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.173vw;
  padding-right: calc(var(--px) * 8);
  line-height: calc(var(--px) * 60);
  color: #fff;
  white-space: nowrap;
}

.con16_title_point {
  color: var(--color-point);
}

.con16_sub {
  margin-top: calc(var(--px) * 1);
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  letter-spacing: -0.021vw;
  line-height: calc(var(--px) * 30);
  color: #fff;
  white-space: nowrap;
}

.con16_row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding-right: 1px;
  background-image: linear-gradient(#0c0c0c 1px, transparent 1px, transparent calc(100% - 1px), #0c0c0c calc(100% - 1px));
}

.con16_row_1 {
  margin-top: calc(var(--px) * 31);
}

.con16_row_2 {
  margin-top: calc(var(--px) * 30);
}

.con16_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 333);
  height: calc(var(--px) * 218);
  border: 1px solid #0c0c0c;
  border-radius: calc(var(--px) * 30);
  background-color: #fff;
}

.con16_card_hl {
  position: relative;
  overflow: hidden;
  background-color: var(--color-point);
}

/* 그랜드오픈 카드 호버 shine — gsap.md ⑪-B. 줄기 폭 30% → 끝값 400% (카드 폭 + skew 여유) */
.con16_card_hl::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 0;
  z-index: 2;
  width: 30%;
  height: 120%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-220%) skewX(-18deg);
  transition: transform 0s;
}

.con16_card_hl:hover::before {
  transform: translateX(400%) skewX(-18deg);
  transition: transform 0.7s ease;
}

.con16_no {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 45);
  height: calc(var(--px) * 36);
  margin-top: calc(var(--px) * 45);
  background-image: url("/images/con16_02.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.con16_card_hl .con16_no {
  background-image: url("/images/con16_03.png");
}

.con16_no_num {
  font-family: var(--font-hambak);
  font-size: calc(var(--px) * 16);
  line-height: calc(var(--px) * 16);
  color: #000;
}

.con16_card_hl .con16_no_num {
  color: #fff;
}

.con16_card_name {
  margin-top: calc(var(--px) * 8);
  font-family: var(--font-myeongjo);
  font-weight: 600;
  font-size: calc(var(--px) * 25);
  padding-right: calc(var(--px) * 4);
  letter-spacing: -0.186vw;
  line-height: calc(var(--px) * 26);
  color: #0c0c0c;
  white-space: nowrap;
}

.con16_card_desc {
  margin-top: calc(var(--px) * 18);
  font-size: calc(var(--px) * 17);
  font-weight: 500;
  letter-spacing: -0.0536vw;
  line-height: calc(var(--px) * 20);
  text-align: center;
  color: #000;
  opacity: 0.8;
  white-space: nowrap;
}

.con16_arrow {
  width: calc(var(--px) * 20);
  aspect-ratio: 20 / 24;
  margin-left: calc(var(--px) * 8);
  margin-right: calc(var(--px) * 7);
}

.con16_arrow_2 {
  margin-right: calc(var(--px) * 6);
}

.con16_arrow img {
  opacity: 0.2;
}

/* ===== con17 ===== */
/* 오픈이 끝이 아닌, 진짜 시작입니다 — 좌 다크(배경 영상 + 세로 탭 4) / 우 크림(카드 슬라이더 + 화살표) / 상단 찢어진 종이 띠.
   섹션 높이 858 = 우측 padding 183 + 카드 483 + nav 24 + 화살표 55 + padding 113 (세로는 calc(px*정수)).
   Swiper: common.css .swiper 가 swiper 기본 쌓임값(1)을 0 으로 덮는다 → 띠(.con17_band)는 DOM 마지막이라 쌓임값 지정 없이 위 */
.con17 {
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}

.con17_left {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 50.0262%;
  background-color: #000;
  overflow: hidden;
}

.con17_video_wrap {
  top: calc(var(--px) * 60);
  left: calc(var(--px) * -116);
  width: calc(var(--px) * 1602);
  height: calc(var(--px) * 845);
}

.con17_video {
  opacity: 0.2;
}

.con17_txt {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: calc(var(--px) * 338);
  margin-left: calc(var(--px) * 232);
  color: #fff;
}

.con17_head {
  font-family: var(--font-myeongjo);
  font-weight: 700;
  letter-spacing: -0.08vw;
  white-space: nowrap;
}

.con17_eyebrow {
  display: block;
  margin-left: calc(var(--px) * -1);
  font-size: calc(var(--px) * 31);
  line-height: calc(var(--px) * 40);
}

.con17_title {
  display: block;
  margin-top: calc(var(--px) * 3);
  margin-left: calc(var(--px) * -6);
  letter-spacing: -0.142vw;
  font-size: calc(var(--px) * 55);
  line-height: calc(var(--px) * 70);
}

.con17_title_point {
  color: var(--color-point);
}

.con17_desc {
  margin-top: calc(var(--px) * 10);
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  letter-spacing: -0.021vw;
  line-height: calc(var(--px) * 30);
  white-space: nowrap;
}

.con17_tabs {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: calc(var(--px) * 10);
  margin-top: calc(var(--px) * 354);
}

.con17_tabs_item {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.con17_tab {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 238);
  height: calc(var(--px) * 39);
  padding-right: calc(var(--px) * 39);
  background-color: var(--color-dark);
  font-size: calc(var(--px) * 18);
  font-weight: 500;
  letter-spacing: -0.0473vw;
  line-height: calc(var(--px) * 30);
  color: #fff;
  white-space: nowrap;
}

.con17_tab.on {
  width: calc(var(--px) * 270);
  background-color: #cc3528;
}

.con17_right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 49.9738%;
  padding-top: calc(var(--px) * 183);
  padding-bottom: calc(var(--px) * 113);
  background-color: #f5f2e1;
}

.con17_sw {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 90.7563%;
  margin-left: 9.2437%;
}

.con17_slide {
  width: calc(var(--px) * 405);
}

.con17_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--px) * 483);
  border: 1px solid #c4c2b4;
  border-radius: calc(var(--px) * 30);
  overflow: hidden;
  background-color: #fff;
}

.con17_card_img {
  width: 100%;
  aspect-ratio: 403 / 251;
  border-bottom: 1px solid #ccc;
}

.con17_card_body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: calc(var(--px) * 48);
  padding-left: calc(var(--px) * 49);
}

.con17_card_tit {
  font-family: var(--font-myeongjo);
  font-weight: 700;
  font-size: calc(var(--px) * 26);
  letter-spacing: -0.1432vw;
  line-height: calc(var(--px) * 34);
  color: #000;
  white-space: nowrap;
}

.con17_slide_01 .con17_card_tit {
  margin-left: calc(var(--px) * -7);
}

.con17_slide_02 .con17_card_tit {
  margin-left: calc(var(--px) * -4);
}

.con17_slide_03 .con17_card_tit {
  margin-left: calc(var(--px) * -5);
}

.con17_slide_04 .con17_card_tit {
  margin-left: calc(var(--px) * -3);
}

.con17_card_pt {
  color: #cc3528;
}

.con17_card_desc {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: calc(var(--px) * 15);
  font-size: calc(var(--px) * 17);
  font-weight: 500;
  letter-spacing: -0.0536vw;
  line-height: calc(var(--px) * 25);
  color: #000;
  white-space: nowrap;
}

.con17_card_desc p + p {
  margin-top: calc(var(--px) * 8);
}

.con17_nav {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-top: calc(var(--px) * 24);
  margin-left: 9.3487%;
}

.con17_arrow {
  width: calc(var(--px) * 67);
  aspect-ratio: 67 / 55;
}

.con17_next {
  margin-left: calc(var(--px) * 12);
}

.con17_band {
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1905 / 93;
}

/* ===== con18 ===== */
/* 매장안내 — 제목 + 통합 1박스(좌 검색·매장 리스트 / 우 카카오 지도). 게시판 main_shop(wr_1 순서·전부 출력), 좌표는 .store data-* → js/map.js.
   absol 없음 — 전부 flex 흐름. 상세 팝업(.fixed_popup)만 position:fixed 레이어 */
.con18 {
  justify-content: flex-start;
  align-items: center;
  padding-top: calc(var(--px) * 131);
  padding-bottom: calc(var(--px) * 82);
  background-image: url("/images/con18_01.jpg");
}

.con18_title {
  margin-left: calc(var(--px) * -2);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 55.02);
  font-weight: 700;
  letter-spacing: -0.21vw;
  word-spacing: calc(var(--px) * 6);
  line-height: calc(var(--px) * 60);
  color: #000;
  text-align: center;
  white-space: nowrap;
}

.con18_title_point {
  color: #cd382b;
}

.con18_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  width: 75.6955%;
  height: calc(var(--px) * 574);
  margin-top: calc(var(--px) * 21);
  margin-left: calc(var(--px) * -1);
  border: 1px solid #bda361;
  border-radius: calc(var(--px) * 40);
  overflow: hidden;
  background-color: #fff;
}

.con18_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  flex-shrink: 0;
  width: calc(var(--px) * 359);
  border-right: 1px solid #bda361;
}

.con18_search {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  flex-shrink: 0;
  height: calc(var(--px) * 66);
  border-bottom: 1px solid #bda361;
}

.con18_input {
  flex-grow: 1;
  width: 0;
  min-width: 0;
  padding: 0 0 0 calc(var(--px) * 39);
  border: 0;
  outline: 0;
  background-color: transparent;
  font-size: calc(var(--px) * 18);
  font-weight: 400;
  letter-spacing: -0.0472vw;
  color: rgba(0, 0, 0, 0.56);
}

.con18_input::placeholder {
  color: rgba(0, 0, 0, 0.56);
  opacity: 1;
}

.con18_search_btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0;
  width: calc(var(--px) * 61);
  padding: 0 0 0 calc(var(--px) * 3);
  border: 0;
  background-color: var(--color-dark);
  cursor: pointer;
}

.con18_search_icon {
  width: calc(var(--px) * 31);
  aspect-ratio: 31 / 31;
}

.con18_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex-grow: 1;
  min-height: 0;
  margin-top: calc(var(--px) * -2);
  overflow-x: hidden;
  overflow-y: auto;
}

.con18_store {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 0 calc(var(--px) * 36) calc(var(--px) * 35) calc(var(--px) * 45);
  border-bottom: 1px solid rgba(189, 163, 97, 0.4);
  cursor: pointer;
}

.con18_store_info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: calc(var(--px) * 39);
}

.con18_store_name {
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  letter-spacing: -0.0525vw;
  line-height: calc(var(--px) * 24);
  color: #000;
}

.con18_store_addr {
  margin-top: calc(var(--px) * 13);
  font-size: calc(var(--px) * 16);
  font-weight: 400;
  letter-spacing: -0.042vw;
  line-height: calc(var(--px) * 25);
  color: #000;
}

.con18_store_tel {
  font-size: calc(var(--px) * 16);
  font-weight: 400;
  letter-spacing: -0.042vw;
  line-height: calc(var(--px) * 26);
  color: #000;
}

.con18_arrow {
  flex-shrink: 0;
  width: calc(var(--px) * 40);
  aspect-ratio: 40 / 32;
  margin-top: calc(var(--px) * 35);
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

.con18_noshop {
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: calc(var(--px) * 40) 0;
  font-size: calc(var(--px) * 16);
  font-weight: 400;
  letter-spacing: -0.042vw;
  line-height: calc(var(--px) * 26);
  color: rgba(0, 0, 0, 0.56);
}

.con18_noshop.on {
  display: flex;
}

.con18_right {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  width: 0;
  min-width: 0;
  background-color: #f7f7f7;
}

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

/* 상세 팝업 — 시안에 없는 레이어(맵 레이아웃 §1 계약). 헤더(z 9999) 위 */
.fixed_popup,
.con19_pop {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10000;
}

.popup {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  width: calc(var(--px) * 640);
  padding: calc(var(--px) * 24) calc(var(--px) * 48) calc(var(--px) * 48);
  border: 1px solid #bda361;
  border-radius: calc(var(--px) * 20);
  background-color: #fff;
}

/* 닫기 — 글자 ×(폰트별로 두께·정렬이 흔들림) 대신 CSS 로 그린 X. 호버: 어두운 원 + 흰 X + 90° 회전 */
.popup_close {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  align-self: flex-end;
  flex-shrink: 0;
  width: calc(var(--px) * 40);
  height: calc(var(--px) * 40);
  margin-right: calc(var(--px) * -16);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #f4f1ea;
  color: var(--color-dark);
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, transform 0.3s ease;
}

.popup_close span {
  display: none;
}

.popup_close::before,
.popup_close::after {
  content: "";
  position: absolute;
  width: calc(var(--px) * 16);
  border-top: 2px solid currentColor;
  border-radius: 2px;
}

.popup_close::before {
  transform: rotate(45deg);
}

.popup_close::after {
  transform: rotate(-45deg);
}

.popup_close:hover {
  background-color: var(--color-dark);
  color: #fff;
  transform: rotate(90deg);
}

.popup_close:focus-visible {
  outline: 2px solid var(--color-point);
  outline-offset: 2px;
}

/* 매장 사진 — 어떤 크기·비율이 와도 같은 프레임(가로 꽉 · 16:9)에 꽉 채워 자른다(object-fit cover). 프레임 높이가 고정이라 세로로 긴 사진도 팝업이 화면을 넘지 않는다 */
.popup_photo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: calc(var(--px) * 24);
  border-radius: calc(var(--px) * 12);
  background-color: #f4f1ea;
}

.popup_photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popup_name {
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 30);
  font-weight: 700;
  letter-spacing: -0.1vw;
  line-height: calc(var(--px) * 36);
  color: #000;
}

.popup_line {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 1px;
  margin: calc(var(--px) * 18) 0;
  background-color: #bda361;
}

.popup_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: calc(var(--px) * 10);
  font-size: calc(var(--px) * 18);
  font-weight: 400;
  letter-spacing: -0.047vw;
  line-height: calc(var(--px) * 28);
  color: #000;
}

.popup_label {
  flex-shrink: 0;
  width: calc(var(--px) * 64);
  font-weight: 700;
}

.popup_val {
  word-break: keep-all;
}

.popup_link {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  margin-top: calc(var(--px) * 28);
  padding: calc(var(--px) * 12) calc(var(--px) * 28);
  border-radius: 50vw;
  background-color: var(--color-dark);
  font-size: calc(var(--px) * 16);
  font-weight: 700;
  letter-spacing: -0.042vw;
  line-height: calc(var(--px) * 24);
  color: #fff;
}

/* con19 연락처 팝업 — PC 전용(모바일은 tel:/mailto: 네이티브). 오버레이는 .fixed_popup 과 같은 규칙을 공유.
   absol 1개: 닫기 버튼(카드 우상단 모서리) */
.con19_pop_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  width: calc(var(--px) * 600);
  padding: calc(var(--px) * 64) calc(var(--px) * 48) calc(var(--px) * 56);
  border: 1px solid rgba(236, 204, 121, 0.4);
  border-radius: calc(var(--px) * 24);
  background-color: var(--color-dark);
  box-shadow: 0 calc(var(--px) * 24) calc(var(--px) * 64) rgba(0, 0, 0, 0.45);
}

.con19_pop:not(.hide) .con19_pop_box {
  animation: fs_fade_up 0.3s ease;
}

.con19_pop_close {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: calc(var(--px) * 20);
  right: calc(var(--px) * 20);
  width: calc(var(--px) * 40);
  height: calc(var(--px) * 40);
  padding: 0;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color 0.25s, background-color 0.25s;
}

.con19_pop_close::before,
.con19_pop_close::after {
  content: "";
  position: absolute;
  width: calc(var(--px) * 18);
  border-top: 2px solid currentColor;
  border-radius: 2px;
}

.con19_pop_close::before {
  transform: rotate(45deg);
}

.con19_pop_close::after {
  transform: rotate(-45deg);
}

.con19_pop_close:focus-visible {
  outline: 2px solid var(--color-point);
  outline-offset: 2px;
}

.con19_pop_tt {
  font-size: calc(var(--px) * 18);
  font-weight: 700;
  letter-spacing: 0.1vw;
  line-height: calc(var(--px) * 24);
  color: var(--color-point);
}

.con19_pop_val {
  margin-top: calc(var(--px) * 20);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 34);
  font-weight: 700;
  letter-spacing: -0.1vw;
  line-height: calc(var(--px) * 46);
  text-align: center;
  color: #fff;
  word-break: break-all;
}

.con19_pop_copy {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--px) * 56);
  margin-top: calc(var(--px) * 36);
  border-radius: 50vw;
  background-color: var(--color-point);
  font-size: calc(var(--px) * 18);
  font-weight: 700;
  letter-spacing: -0.05vw;
  color: var(--color-dark);
  cursor: pointer;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .con19_pop_close:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .con19_pop_copy:hover {
    opacity: 0.85;
  }
}

/* ===== con19 ===== */
/* 창업문의 — 상단 금줄 띠 + 좌 문구·전화/메일 링크 / 우 문의 폼(등록부 startup_inquiry · data-formmail="main").
   absol 1개: .con19_photo (사진이 카드·우측 패널을 가로질러 섹션 하단으로 잘려 나감 — 흐름 불가). 폼·문구는 .rltv 로 사진 위.
   z-index 1곳: 드롭다운이 열린 행(.con19_row.on)만 — 뒤 행(rltv)이 리스트를 덮지 않게. */
.con19 {
  justify-content: flex-start;
  align-items: center;
  padding-top: calc(var(--px) * 33.5);
  padding-bottom: calc(var(--px) * 34.2);
  background-image: url("/images/con19_01.jpg");
}

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

.con19_band_line {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  height: calc(var(--px) * 6);
  background-color: #d1b467;
}

.con19_band_txt {
  padding: 0 calc(var(--px) * 26);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 20);
  font-weight: 400;
  letter-spacing: -0.11vw;
  line-height: 1;
  color: var(--color-point);
  white-space: nowrap;
}

.con19_photo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 884);
  aspect-ratio: 884 / 627;
  left: calc(var(--px) * 502);
  top: calc(var(--px) * 390);
}

.con19_card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  box-sizing: border-box;
  width: 91.6535%;
  margin-top: calc(var(--px) * 25.5);
  padding: calc(var(--px) * 137.6) calc(var(--px) * 143) calc(var(--px) * 102) calc(var(--px) * 153.5);
}

.con19_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: calc(var(--px) * 59.4);
}

.con19_title {
  display: flex;
  margin-left: calc(var(--px) * -1.5);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: var(--font-myeongjo);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.con19_title_sub {
  font-size: calc(var(--px) * 30.66);
  letter-spacing: -0.07vw;
  line-height: 1;
}

.con19_title_main {
  margin-top: calc(var(--px) * 15.3);
  font-size: calc(var(--px) * 50.02);
  letter-spacing: -0.14vw;
  line-height: 1;
}

.con19_title_point {
  color: #e7c66d;
}

.con19_desc {
  margin-top: calc(var(--px) * 33);
  font-size: calc(var(--px) * 18);
  font-weight: 400;
  letter-spacing: -0.02vw;
  line-height: calc(var(--px) * 28);
  color: #fff;
}

.con19_links {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  column-gap: calc(var(--px) * 15.6);
  margin-top: calc(var(--px) * 38);
}

.con19_link {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  column-gap: calc(var(--px) * 9);
  box-sizing: border-box;
  width: calc(var(--px) * 167);
  height: calc(var(--px) * 51);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: calc(var(--px) * 14);
  background-clip: padding-box;
}

.con19_link_tel {
  column-gap: calc(var(--px) * 8);
  padding-left: calc(var(--px) * 25);
  background-color: #d1b467;
  color: #000;
}

.con19_link_mail {
  padding-left: calc(var(--px) * 28.5);
  background-color: var(--color-dark);
  color: #fff;
}

.con19_link_icon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 24);
  aspect-ratio: 24 / 22;
}

.con19_link_icon_mail {
  width: calc(var(--px) * 23);
  aspect-ratio: 23 / 19;
}

.con19_link_txt {
  margin-top: calc(var(--px) * 2);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 18);
  font-weight: 700;
  letter-spacing: -0.13vw;
  line-height: 1;
}

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

.con19_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: calc(var(--px) * 9.7) calc(var(--px) * 8) calc(var(--px) * 9.7) calc(var(--px) * 29);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.con19_row.on {
  z-index: 5;
}

.con19_req {
  flex-shrink: 0;
  width: calc(var(--px) * 12);
  margin-left: calc(var(--px) * -2);
  margin-right: calc(var(--px) * 10);
  font-size: calc(var(--px) * 27);
  font-weight: 700;
  line-height: 1;
  color: var(--color-point);
}

.con19_req_2 {
  margin-top: calc(var(--px) * -2.8);
}

.con19_req_3 {
  margin-top: calc(var(--px) * -6);
}

.con19_req_4 {
  margin-top: calc(var(--px) * -8.4);
}

.con19_req_5 {
  margin-top: calc(var(--px) * -11.2);
}

.con19_lb {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 134);
  margin-right: calc(var(--px) * 26.5);
  font-size: calc(var(--px) * 22);
  font-weight: 600;
  letter-spacing: -0.07vw;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.con19_lb_solo {
  margin-left: calc(var(--px) * 20);
}

.con19_inp {
  flex-grow: 1;
  min-width: 0;
  height: calc(var(--px) * 42);
  padding: 0;
  font-size: calc(var(--px) * 17);
  font-weight: 500;
  letter-spacing: -0.05vw;
  color: #fff;
}

.con19_inp::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.con19_inp:focus {
  outline: none;
}

.con19_area {
  flex-grow: 1;
  min-width: 0;
  box-sizing: border-box;
  height: calc(var(--px) * 42);
  padding: calc(var(--px) * 10.8) 0 0;
  font-size: calc(var(--px) * 17);
  font-weight: 500;
  letter-spacing: -0.05vw;
  line-height: 1.2;
  color: #fff;
  resize: none;
}

.con19_area::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.con19_area:focus {
  outline: none;
}

/* 스크롤바 — 화살표 버튼 제거, 가는 금색 알약 썸. 웹킷 외(파이어폭스)는 표준 속성으로 */
.con19_area::-webkit-scrollbar {
  width: calc(var(--px) * 6);
}

.con19_area::-webkit-scrollbar-track {
  background: transparent;
}

.con19_area::-webkit-scrollbar-thumb {
  border-radius: 50vw;
  background-color: rgba(236, 204, 121, 0.55);
}

.con19_area::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-point);
}

.con19_area::-webkit-scrollbar-button {
  display: none;
}

@supports not selector(::-webkit-scrollbar) {
  .con19_area {
    scrollbar-width: thin;
    scrollbar-color: rgba(236, 204, 121, 0.55) transparent;
  }
}

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

.con19_sel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: calc(var(--px) * 156);
}

.con19_sel_type {
  width: calc(var(--px) * 322);
}

.con19_sel_head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--px) * 42);
  padding: 0 calc(var(--px) * 16) 0 calc(var(--px) * 23);
  border-radius: calc(var(--px) * 13);
  background-color: #fff;
  color: #000;
  text-align: left;
}

.con19_sel_head_a {
  padding-right: calc(var(--px) * 20);
}

.con19_sel_head_b {
  padding-left: calc(var(--px) * 32);
}

.con19_sel_val {
  font-size: calc(var(--px) * 17);
  font-weight: 500;
  letter-spacing: -0.05vw;
  line-height: 1;
}

.con19_sel_arrow {
  flex-shrink: 0;
  width: calc(var(--px) * 14);
  height: calc(var(--px) * 8);
  margin-top: calc(var(--px) * 2);
  background: url("/images/con19_05.png") no-repeat center / 100% 100%;
}

.con19_sel_list {
  position: absolute;
  top: calc(100% + var(--px) * 4);
  left: 0;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  max-height: calc(var(--px) * 216);
  overflow-y: auto;
  padding: calc(var(--px) * 6);
  border-radius: calc(var(--px) * 13);
  background-color: #fff;
  box-shadow: 0 calc(var(--px) * 8) calc(var(--px) * 24) rgba(0, 0, 0, 0.35);
}

.con19_sel.on .con19_sel_list {
  display: flex;
}

.con19_sel_opt {
  flex-shrink: 0;
  padding: calc(var(--px) * 9) calc(var(--px) * 14);
  border-radius: calc(var(--px) * 8);
  font-size: calc(var(--px) * 16);
  font-weight: 500;
  line-height: 1.2;
  color: #000;
  cursor: pointer;
}

.con19_sel_opt:hover {
  background-color: #f2f2f1;
}

.con19_sel_opt:focus {
  outline: none;
  background-color: #f2f2f1;
}

.con19_sel_opt.on {
  background-color: var(--color-dark);
  color: #fff;
}

.con19_sel_opt_msg {
  color: #999;
  cursor: default;
}

.con19_agree {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: calc(var(--px) * 10);
  margin-top: calc(var(--px) * 18);
  margin-right: calc(var(--px) * 3);
}

.con19_agree_chk {
  flex-shrink: 0;
  width: calc(var(--px) * 22);
  height: calc(var(--px) * 22);
  margin: 0;
  border: 2px solid #fff;
  border-radius: calc(var(--px) * 5);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 76% auto;
  cursor: pointer;
}

/* 체크 표시 — 인풋엔 ::after 가 안 먹는 브라우저가 있어 배경 SVG 로 그린다 */
.con19_agree_chk:checked {
  background-color: var(--color-point);
  border-color: var(--color-point);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6.2 6 10.5 14.5 1.5' fill='none' stroke='%231d1a19' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.con19_agree_txt {
  font-size: calc(var(--px) * 16);
  font-weight: 400;
  letter-spacing: -0.03vw;
  line-height: 1;
  color: #fff;
}

.con19_agree_link {
  cursor: pointer;
}

.con19_submit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 388);
  height: calc(var(--px) * 80);
  margin-top: calc(var(--px) * 43);
  border-radius: 50vw;
  background-color: var(--color-dark);
  font-family: var(--font-myeongjo);
  font-size: calc(var(--px) * 30);
  font-weight: 700;
  letter-spacing: -0.17vw;
  line-height: 1;
  color: #fff;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.25, 0.6, 0.3, 1), filter 0.3s, box-shadow 0.3s;
}

/* 제출 CTA 샤인 스윕(폼 레이아웃.md §3) — 평상시 왼쪽 밖(숨김), 호버 시 대각선 흰 광택이 좌→우로 1회. 언호버 transition:0s 라 되돌림은 안 보인다. 눌림 = 쑥 */
.con19_submit::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 0;
  z-index: 2;
  width: 45%;
  height: 120%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-220%) skewX(-18deg);
  transition: transform 0s;
}

.con19_submit:hover {
  transform: translateY(calc(var(--px) * -3));
  filter: brightness(1.06);
  box-shadow: 0 calc(var(--px) * 12) calc(var(--px) * 30) rgba(0, 0, 0, 0.25);
}

.con19_submit:hover::before {
  transform: translateX(320%) skewX(-18deg);
  transition: transform 0.7s ease;
}

.con19_submit:active {
  transform: translateY(0) scale(0.985);
  transition: transform 0.1s ease;
}

/* ===== 모바일 지도 터치 잠금 오버레이 (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;
}

/* ===== 전환 효과 — 상태(.on/:focus/:hover) 가 바뀌는 곳에 부드러운 전환을 건다 =====
   기존 규칙의 값은 건드리지 않고 transition 만 모았다(이미 transition 이 있는 요소는 제외: con03_on · popup_close · 제출 CTA) */
.con05_card,
.con05_icon,
.con06_step {
  transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease;
}

.con05_card_title {
  transition: background-size 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

/* con04 카드 — 색 전환 + 들어올림, 안쪽 요소는 --con04-on 을 따라 시차를 두고 따라온다 */
.con04_card {
  transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.7s ease;
}

.con04_icon {
  transition: box-shadow 0.7s ease 0.05s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

.con04_card_title {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.con04_card_sub {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.con04_card_desc {
  transition: opacity 0.6s ease 0.2s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .con04_card,
  .con04_icon,
  .con04_card_title,
  .con04_card_sub,
  .con04_card_desc {
    transition: background-color 0.6s ease, color 0.6s ease;
  }
}

.con05_icon_img,
.con06_step_img {
  transition: filter 0.6s ease;
}

.con13_tab {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.con17_tab {
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease;
}

.con19_row,
.con19_sel_head,
.con19_sel_opt,
.con19_link,
.popup_link,
.con18_search_btn {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.con19_sel_arrow {
  transition: transform 0.3s ease;
}

.con19_sel.on .con19_sel_arrow {
  transform: rotate(180deg);
}

/* display 로 껐다 켜는 요소는 transition 이 안 걸리므로, 켜지는 순간 keyframe 으로 페이드·슬라이드 인 */
@keyframes fs_fade_up {
  from {
    opacity: 0;
    transform: translateY(calc(var(--px) * 12));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fs_fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.con13_panel.on {
  animation: fs_fade 0.5s ease;
}

.con18_noshop.on {
  animation: fs_fade 0.4s ease;
}

.con19_sel.on .con19_sel_list {
  animation: fs_fade_up 0.25s ease;
}

/* 호버 — 마우스 환경에서만(터치는 탭 뒤 :hover 가 눌러붙는다) */
@media (hover: hover) {
  .btn_arr,
  .con08_call,
  .con18_search_btn,
  .con19_link,
  .popup_link {
    transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }

  .btn_arr:hover,
  .con18_search_btn:hover {
    opacity: 0.75;
  }

  .con08_call:hover {
    opacity: 0.7;
  }

  .con19_link:hover {
    border-color: var(--color-point);
  }

  .popup_link:hover {
    background-color: #000;
  }

  .con13_tab:not(.on):hover {
    background-color: rgba(255, 255, 255, 0.12);
  }
}

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

  /* 제출 CTA — 모바일은 hover 불가: 자동 샤인 루프 + 탭 눌림, 터치로 눌러붙은 :hover 리프트 무력화 */
  .con19_submit::before {
    animation: fs_shine_auto 4s ease-in-out infinite;
  }

  .con19_submit:hover {
    transform: none;
    filter: none;
    box-shadow: none;
  }

  .con19_submit:active {
    transform: scale(0.96);
    transition: transform 0.12s ease;
  }
}