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

/* 퍼블시작 */

/* ===== CON01: 앤티크 액자 인트로 ===== */
.con01 {
  justify-content: flex-start;
  align-items: center;
  padding-top: 15.5vw;
  padding-bottom: 17.6vw;
  background-image: url("/images/con01_01.jpg");
}

.con01_line_top {
  width: 32.336%;
  aspect-ratio: 616 / 94;
}

.con01_title {
  margin-top: 2.4vw;
  font-family: "SOGANG-UNIVERSITY";
  font-size: calc(var(--px) * 55);
  font-weight: 400;
  letter-spacing: -0.15vw;
  line-height: 3.4vw;
  text-align: center;
  color: #fff;
}

.con01_title_pt {
  color: #ceb291;
}

.con01_line_bot {
  margin-top: 2.3vw;
  width: 32.336%;
  aspect-ratio: 616 / 15;
}

.con01_frame_01 {
  width: 11.4436%;
  left: 4.9%;
  top: 2.8vw;
  aspect-ratio: 218 / 288;
}

.con01_frame_02 {
  width: 5.2493%;
  left: 19.4%;
  top: 15.3vw;
  aspect-ratio: 100 / 255;
}

.con01_frame_03 {
  width: 4.8819%;
  left: 90.3%;
  top: 10.4vw;
  aspect-ratio: 93 / 206;
}

.con01_frame_04 {
  width: 10.4462%;
  left: 75.3%;
  top: 5.1vw;
  aspect-ratio: 199 / 229;
}

.con01_frame_05 {
  width: 4.9344%;
  left: 85.1%;
  top: 21.2vw;
  aspect-ratio: 94 / 121;
}

.con01_frame_06 {
  width: 4.8819%;
  left: 12.7%;
  top: 25.1vw;
  aspect-ratio: 93 / 125;
}

.con01_frame_07 {
  width: 8.189%;
  left: 88.2%;
  top: 34.8vw;
  aspect-ratio: 156 / 204;
}

.con01_frame_08 {
  width: 7.4541%;
  left: 76.4%;
  top: 26.7vw;
  aspect-ratio: 142 / 240;
}

.con01_frame_09 {
  width: 6.6667%;
  left: 5.1%;
  top: 32.5vw;
  aspect-ratio: 127 / 247;
}

.con01_bird {
  width: 4.7769%;
  left: 17.5%;
  top: 37vw;
  aspect-ratio: 91 / 84;
}

/* ===== MAIN: 메인비주얼 ===== */
.main {
  padding-top: var(--hd-h);
  background-color: #f7f5ee;
  background-image: url("/images/main_06.jpg");
  background-size: 100.7874% auto;
  background-position: calc(var(--px) * -8) calc(var(--hd-h) - var(--px) * 144);
}

.main_frame {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 8.1vw;
}

.main_corner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 139);
  aspect-ratio: 139 / 139;
  top: 2.4vw;
}

.main_corner_l {
  left: 1.7%;
}

.main_corner_r {
  right: 1.7%;
}

.main_tag {
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 37);
  letter-spacing: -0.05vw;
  line-height: 2.2vw;
  text-align: center;
  color: #876945;
}

.main_head {
  margin-top: 1.2vw;
}

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

.main_swirl_l {
  margin-right: calc(var(--px) * 27);
}

.main_swirl_r {
  margin-left: calc(var(--px) * 28);
}

.main_logo {
  width: calc(var(--px) * 528);
  aspect-ratio: 528 / 88;
}

.main_desc {
  margin-top: 2vw;
  font-size: calc(var(--px) * 22);
  letter-spacing: -0.06vw;
  line-height: 1.7vw;
  color: #000;
  text-align: center;
}

.main_swiper {
  width: 100%;
  height: calc(var(--px) * 471);
  margin-top: -1.5vw;
}

.swiper-slide.main_slide {
  justify-content: flex-start;
  width: calc(var(--px) * 774);
}

.main_bowl {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 562);
  transition: width 0.7s ease, margin 0.7s ease;
}

.swiper-slide-active .main_bowl {
  width: calc(var(--px) * 678);
  margin-top: 3.7vw;
}

.swiper-slide-prev .main_bowl,
.swiper-slide-next .main_bowl {
  margin-left: calc(var(--px) * 7);
}

.main_bowl_01 {
  aspect-ratio: 670 / 671;
}

.main_bowl_05 {
  aspect-ratio: 675 / 674;
}

.main_bowl_02 {
  aspect-ratio: 668 / 666;
}

.main_bowl_03 {
  aspect-ratio: 669 / 670;
}

.main_bowl_04 {
  aspect-ratio: 664 / 668;
}

/* ===== CON02: 유럽의 감성을 담은 공간 ===== */
.con02 {
  padding-top: 6.8vw;
  padding-bottom: 4.2vw;
  background-image: linear-gradient(to bottom, #fff 45.6vw, var(--color-cream) 45.6vw);
}

.con02_txt {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  top: 36.8vw;
  left: -10.1%;
}

.con02_txt_move {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
  animation: marqueeX 40s infinite linear;
}

.con02_txt_item {
  padding-right: calc(var(--px) * 50);
  font-family: "Fraunces";
  font-weight: 600;
  font-size: calc(var(--px) * 200);
  line-height: 10.5vw;
  color: var(--color-cream);
  white-space: nowrap;
}

.con02_txt_dup {
  top: 0;
  left: 100%;
}

.con02_orn {
  width: calc(var(--px) * 317);
  aspect-ratio: 317 / 27;
}

.con02_title {
  margin-top: 1.7vw;
  font-family: "SOGANG-UNIVERSITY";
  font-weight: 400;
  font-size: calc(var(--px) * 55);
  line-height: 3.7vw;
  letter-spacing: -0.14vw;
  color: #111111;
}

.con02_title_pt {
  color: #876945;
}

.con02_desc {
  margin-top: 0.9vw;
  font-size: calc(var(--px) * 20);
  letter-spacing: -0.0525vw;
  color: #000000;
}

.con02_desc_b {
  font-weight: 700;
}

.con02_store {
  margin-top: 2.5vw;
  width: calc(var(--px) * 1029);
  aspect-ratio: 1029 / 537;
}

.con02_sd {
  margin-top: 1.6vw;
  width: 100%;
}

.con02_sd .swiper-wrapper {
  transition-timing-function: linear;
}

.con02_sd .swiper-slide {
  width: auto;
  margin-right: calc(var(--px) * 28);
}

.con02_sd_img {
  width: calc(var(--px) * 590);
  aspect-ratio: 585 / 350;
  border-radius: calc(var(--px) * 30);
  overflow: hidden;
}

/* ===== CON03: 이런 분들이 찾아옵니다 ===== */
.con03 {
  padding-top: 7.1vw;
  padding-bottom: 6.3vw;
  text-align: center;
  color: var(--color-ink);
  /* 시안 배경 격자: 15px 주기, 세로선 #f3f3f3 / 가로선 #fcfcfc, 시작 8px */
  background-color: #fff;
  background-image:
    linear-gradient(to right, #f3f3f3 1px, transparent 1px),
    linear-gradient(to bottom, #fcfcfc 1px, transparent 1px);
  background-size: calc(var(--px) * 15) calc(var(--px) * 15);
  background-position: calc(var(--px) * 8) calc(var(--px) * 8);
}

.con03_plate {
  width: 41.6798%;
  aspect-ratio: 794 / 515;
  left: -1%;
  top: 21.3vw;
}

.con03_fork {
  width: 36.5879%;
  aspect-ratio: 697 / 504;
  left: 68.4%;
  top: 1vw;
}

.con03_eyebrow {
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 30);
  letter-spacing: -0.08vw;
  line-height: 2.2vw;
}

.con03_title {
  margin-top: 0.7vw;
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.14vw;
  line-height: 3.7vw;
}

.con03_title_em {
  color: var(--color-olive);
}

.con03_desc {
  margin-top: 1.3vw;
  font-size: calc(var(--px) * 20);
  letter-spacing: -0.05vw;
  line-height: 1.6vw;
}

.con03_desc_b {
  font-weight: 700;
}

.con03_list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  column-gap: calc(var(--px) * 32.5);
  margin-top: 2.9vw;
}

.con03_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 328);
  aspect-ratio: 1 / 1;
  padding-top: calc(var(--px) * 33);
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 var(--color-olive), 0 calc(var(--px) * 12) calc(var(--px) * 40) rgba(0, 0, 0, 0.1);
  transition: background-color 0.9s var(--ease-soft), color 0.9s var(--ease-soft), box-shadow 0.9s var(--ease-soft);
}

/* 신호등 활성: 올리브 원 + 안쪽 흰 링 + 바깥 올리브 띠 4px */
.con03_card_on {
  background: var(--color-olive);
  color: #fff;
  box-shadow: 0 0 0 calc(var(--px) * 4) var(--color-olive), 0 calc(var(--px) * 12) calc(var(--px) * 40) rgba(0, 0, 0, 0.1);
}

.con03_card_num {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 26);
  letter-spacing: -0.07vw;
  line-height: 1.9vw;
  color: var(--color-olive);
  transition: color 0.9s var(--ease-soft);
}

.con03_card_on .con03_card_num {
  color: #fff;
}

.con03_card_tit {
  transition: color 0.9s var(--ease-soft);
  margin-top: calc(var(--px) * 31);
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 26);
  letter-spacing: -0.07vw;
  line-height: 1.9vw;
}

.con03_card_txt {
  transition: color 0.9s var(--ease-soft);
  margin-top: calc(var(--px) * 7);
  font-size: calc(var(--px) * 18);
  letter-spacing: -0.05vw;
  line-height: 1.5vw;
}

.con03_leaf {
  width: 25.3%;
  aspect-ratio: 82 / 57;
  left: 78.4%;
  top: 2.1vw;
  filter: drop-shadow(0 calc(var(--px) * 15) calc(var(--px) * 7) rgba(0, 0, 0, 0.22));
  opacity: 0;
  transition: opacity 0.9s var(--ease-soft);
}

.con03_card_on .con03_leaf {
  opacity: 1;
}

.con03_leaf img {
  transform-origin: left bottom;
}

.con03_card_on .con03_leaf img {
  animation: leaf_sway 1.8s ease-in-out;
}

/* ===== CON06: SALAD MAVIE 타이틀 + 음료 슬라이드 ===== */
.con06 {
  box-sizing: border-box;
  justify-content: flex-start;
  height: calc(var(--px) * 431);
  padding-top: 4.8vw;
  background-image: url('/images/con06_bg.jpg');
}

.con06_orn {
  width: calc(var(--px) * 339);
  aspect-ratio: 339 / 29;
}

.con06_title {
  width: calc(var(--px) * 407);
  aspect-ratio: 407 / 68;
  margin-top: 1vw;
}

.con06_sd {
  flex-shrink: 0;
  width: 100%;
  margin-top: 1.9vw;
}

.con06_sd .swiper-wrapper {
  align-items: flex-end;
  transition-timing-function: linear;
}

.con06_sd .swiper-slide {
  width: auto;
  justify-content: flex-end;
}

.con06_cup_03 {
  width: calc(var(--px) * 131);
  aspect-ratio: 131 / 231;
  margin-right: calc(var(--px) * 62);
}

.con06_cup_04 {
  width: calc(var(--px) * 166);
  aspect-ratio: 166 / 256;
  margin-right: calc(var(--px) * 38);
  margin-bottom: calc(var(--px) * 4);
}

.con06_cup_05 {
  width: calc(var(--px) * 133);
  aspect-ratio: 133 / 233;
  margin-right: calc(var(--px) * 66);
}

.con06_cup_06 {
  width: calc(var(--px) * 173);
  aspect-ratio: 173 / 268;
  margin-right: calc(var(--px) * 28);
}

.con06_cup_07 {
  width: calc(var(--px) * 142);
  aspect-ratio: 142 / 260;
  margin-right: calc(var(--px) * 63);
}

.con06_cup_08 {
  width: calc(var(--px) * 133);
  aspect-ratio: 133 / 234;
  margin-right: calc(var(--px) * 56);
}

.con06_cup_09 {
  width: calc(var(--px) * 142);
  aspect-ratio: 142 / 250;
  margin-right: calc(var(--px) * 72);
}

.con06_cup_10 {
  width: calc(var(--px) * 154);
  aspect-ratio: 154 / 261;
  margin-right: calc(var(--px) * 37);
  margin-bottom: calc(var(--px) * 2);
}

.con06_cup_11 {
  width: calc(var(--px) * 141);
  aspect-ratio: 141 / 235;
  margin-right: calc(var(--px) * 62);
}

.con06_cup_12 {
  width: calc(var(--px) * 131);
  aspect-ratio: 131 / 231;
  margin-right: calc(var(--px) * 70);
}

/* ===== CON04: 매출을 만드는 효율적인 운영 시스템 ===== */
/* 시안 943px = pin 프레임. 카드 4장은 시안 배치 그대로 세로로 놓고 프레임 밖은 section overflow:hidden 이 자른다.
   스크롤하면 js/animation.js 가 section 을 pin 하고 카드를 아래에서 올려 겹친다(con04-m01) */
.con04 {
  box-sizing: border-box;
  justify-content: flex-start;
  height: calc(var(--px) * 943);
  padding-top: 7.4vw;
  text-align: center;
  color: var(--color-ink);
  background-color: #3e3022;
  background-image: url('/images/con04_01.jpg');
  background-size: 100% auto;
  background-position: top center;
}

.con04_eyebrow {
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 30);
  letter-spacing: -0.08vw;
  line-height: 2.2vw;
  color: #fff;
}

.con04_title {
  margin-top: 0.8vw;
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.14vw;
  line-height: 3.4vw;
  color: #fff;
}

.con04_title_em {
  color: var(--color-gold);
}

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

.con04_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  margin-top: 2.2vw;
}

/* 스택 모션(con04-m01): 카드 y 이동은 js/animation.js. 프레임(943)보다 긴 list 가 줄지 않게 flex-shrink 0 */
.con04_card {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  width: 69.2913%;
  height: calc(var(--px) * 400);
  padding-top: 5vw;
  border-radius: calc(var(--px) * 30);
}

.con04_card_01 {
  padding-top: 3.6vw;
  background: #fefefe;
}

.con04_card_02 {
  margin-top: 1.5vw;
  background: #ebe7df;
}

.con04_card_03 {
  margin-top: 1.3vw;
  background: #000;
  color: #fff;
}

.con04_card_04 {
  margin-top: 1.2vw;
  background: #f1f1f1;
}

.con04_card_label {
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 18);
  letter-spacing: -0.05vw;
  line-height: 1.6vw;
}

.con04_card_tit {
  margin-top: 0.8vw;
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 26);
  letter-spacing: -0.07vw;
  line-height: 1.6vw;
}

.con04_card_em {
  color: var(--color-dark);
}

.con04_card_03 .con04_card_em {
  color: var(--color-gold);
}

.con04_card_txt {
  margin-top: 1vw;
  font-size: calc(var(--px) * 18);
  letter-spacing: -0.05vw;
  line-height: 1.5vw;
}

.con04_card_01 .con04_card_txt {
  margin-top: 0.9vw;
}

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

.con04_card_01 .con04_pills {
  margin-top: 1.6vw;
}

.con04_pill {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: calc(var(--px) * 51);
  border: 1px solid var(--color-line);
  border-radius: 50vw;
  background: #fefefe;
  font-family: var(--font-nanum);
  font-weight: 700;
  font-size: calc(var(--px) * 16);
  letter-spacing: -0.04vw;
  line-height: 1.5vw;
  color: var(--color-dark);
}

.con04_pill_01a,
.con04_pill_01b {
  width: calc(var(--px) * 146);
}

.con04_pill_01c {
  width: calc(var(--px) * 171);
}

.con04_pill_a {
  width: calc(var(--px) * 167);
}

.con04_pill_b {
  width: calc(var(--px) * 166);
}

.con04_pill_c {
  width: calc(var(--px) * 173);
}

.con04_deco_01 {
  width: 24.3939%;
  aspect-ratio: 322 / 319;
  left: -1.4%;
  top: -5.7vw;
}

.con04_deco_02 {
  width: 29.3939%;
  aspect-ratio: 388 / 387;
  left: 13.5%;
  top: 10.2vw;
}

.con04_deco_03 {
  width: 28.8636%;
  aspect-ratio: 381 / 378;
  left: 73.4%;
  top: -3.8vw;
}

.con04_deco_04 {
  width: 35.6818%;
  aspect-ratio: 471 / 338;
  left: 68.8%;
  top: -3.6vw;
}

.con04_deco_05 {
  width: 39.5455%;
  aspect-ratio: 522 / 340;
  left: -12.9%;
  top: 1.4vw;
}

.con04_deco_07 {
  width: 12.8788%;
  aspect-ratio: 170 / 460;
  left: 8.7%;
  top: -8.2vw;
}

.con04_deco_08 {
  width: 47.5758%;
  aspect-ratio: 628 / 404;
  left: 52.5%;
  top: -0.1vw;
}

.con04_deco_09 {
  width: 33.7121%;
  aspect-ratio: 445 / 548;
  left: -6.4%;
  top: 2.5vw;
}

/* ===== CON05: 압도적인 매출이 증명합니다 ===== */
.con05 {
  padding-bottom: calc(var(--px) * 112);
  text-align: center;
  background-color: var(--color-sage);
  /* 시안 배경 세로선: 피치 16, 시작 1px, #e5e7dc (가로선 없음) */
  background-image: linear-gradient(to right, #e5e7dc 1px, transparent 1px);
  background-size: calc(var(--px) * 16) 100%;
  background-position: calc(var(--px) * 1) 0;
}

/* 히어로 프레임: 올리브 8px + 흰 링 2px, 상단은 섹션 밖 */
.con05_hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 76.7454%;
  padding: 0 calc(var(--px) * 8) calc(var(--px) * 8);
  background: var(--color-olive);
  border-radius: 0 0 calc(var(--px) * 110) calc(var(--px) * 110);
}

.con05_stage {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  padding-top: calc(var(--px) * 84);
  padding-bottom: calc(var(--px) * 64.5);
  background: #000;
  border: 2px solid #fff;
  border-top: 0;
  border-radius: 0 0 calc(var(--px) * 102) calc(var(--px) * 102);
  color: #fff;
}

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

/* 시안 실측: 영상 밝기 ×0.20 균일 */
.con05_cctv > img,
.con05_cctv > video {
  filter: brightness(0.2);
}

.con05_eyebrow {
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 30);
  letter-spacing: -0.08vw;
  line-height: calc(var(--px) * 65);
}

.con05_title {
  margin-top: calc(var(--px) * 2.5);
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 55);
  font-weight: 400;
  letter-spacing: -0.14vw;
  line-height: calc(var(--px) * 65);
}

.con05_title_em {
  color: var(--color-sage-em);
}

.con05_desc {
  margin-top: calc(var(--px) * 16.5);
  font-size: calc(var(--px) * 20);
  letter-spacing: -0.05vw;
  line-height: calc(var(--px) * 30);
}

.con05_desc_b {
  font-weight: 700;
}

.con05_pill {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 314);
  height: calc(var(--px) * 59);
  margin-top: calc(var(--px) * 48);
  background: #fff;
  border-radius: 50vw;
  font-family: 'NanumSquareNeo', sans-serif;
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  letter-spacing: -0.06vw;
  color: var(--color-olive);
}

.con05_count {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  width: fit-content;
  margin-top: calc(var(--px) * 15);
}

.con05_count_num {
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 100);
  letter-spacing: 0;
  line-height: calc(var(--px) * 93);
  color: var(--color-sage-em);
}

.con05_count_unit {
  left: calc(100% + calc(var(--px) * 3));
  bottom: 0.7vw;
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 30);
  letter-spacing: -0.06vw;
  line-height: calc(var(--px) * 30);
}

.con05_caption {
  margin-top: calc(var(--px) * 12.5);
  font-size: calc(var(--px) * 16);
  letter-spacing: -0.05vw;
  line-height: calc(var(--px) * 30);
}

/* 프레임 밖으로 걸친 타원 말풍선 */
.con05_bubble {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 18.5827%;
  aspect-ratio: 354 / 222;
  top: 12vw;
  padding: calc(var(--px) * 8);
  background: var(--color-olive);
  border-radius: 50%;
}

.con05_bubble_l {
  left: 5.3%;
}

.con05_bubble_r {
  right: 5.4%;
}

.con05_bubble_in {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  border-radius: 50%;
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 26);
  letter-spacing: -0.07vw;
  line-height: calc(var(--px) * 34);
  color: #fff;
}

/* 매출 카드 슬라이드 (게시판 main_sales) */
.con05_sales {
  width: 100%;
  margin-top: calc(var(--px) * 49);
}

.con05_sales .swiper-wrapper {
  transition-timing-function: linear;
}

.con05_sales .swiper-slide {
  width: auto !important;
}

.con05_sale {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 322);
  height: calc(var(--px) * 180);
  background: #fff;
}

.con05_sale_name {
  margin-top: calc(var(--px) * 32);
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 24);
  letter-spacing: -0.06vw;
  line-height: calc(var(--px) * 30);
  color: #000;
}

.con05_sale_month {
  margin-top: calc(var(--px) * 3);
  font-size: calc(var(--px) * 16);
  letter-spacing: -0.05vw;
  line-height: calc(var(--px) * 25);
  color: #000;
}

.con05_sale_amt {
  margin-top: calc(var(--px) * 13);
  font-size: calc(var(--px) * 34);
  font-weight: 700;
  letter-spacing: -0.05vw;
  line-height: calc(var(--px) * 42);
  color: var(--color-olive);
}

/* 수익 구조 흰 카드 */
.con05_board {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 88.399%;
  margin-top: calc(var(--px) * 97);
  padding: calc(var(--px) * 115) 0 calc(var(--px) * 66);
  background: #fff;
  border-radius: calc(var(--px) * 50);
}

.con05_orn {
  top: 2.7vw;
  width: 8.2542%;
}

.con05_orn_l {
  left: 3.0285%;
}

.con05_orn_r {
  right: 3.2%;
}

.con05_head {
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 55);
  font-weight: 400;
  letter-spacing: -0.14vw;
  line-height: calc(var(--px) * 65);
  color: var(--color-ink);
}

.con05_head_em {
  color: var(--color-olive);
}

.con05_sub {
  margin-top: calc(var(--px) * 15);
  font-size: calc(var(--px) * 20);
  letter-spacing: -0.05vw;
  line-height: calc(var(--px) * 30);
  color: var(--color-ink);
}

.con05_sub_b {
  font-weight: 700;
}

.con05_body {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  width: 62.4703%;
  margin-top: calc(var(--px) * 64);
}

.con05_pie {
  box-sizing: border-box;
  width: calc(var(--px) * 519);
  aspect-ratio: 1 / 1;
  border: 1px solid #c5cca2;
  border-radius: 50%;
}

.con05_pie > img {
  width: 94.027%;
}

.con05_lb {
  font-size: calc(var(--px) * 17);
  letter-spacing: -0.07vw;
  line-height: calc(var(--px) * 23.3);
  white-space: nowrap;
  color: #000;
}

.con05_lb_01 {
  left: 71.2%;
  top: 9.3vw;
}

.con05_lb_02 {
  left: 59.4%;
  top: 20.1vw;
}

.con05_lb_03 {
  left: 38.7%;
  top: 22.6vw;
}

.con05_lb_04 {
  left: 26.5%;
  top: 20.9vw;
}

.con05_margin {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  left: 13.7%;
  top: 8.8vw;
  color: #fff;
}

.con05_margin_lb {
  font-family: 'NanumSquareNeo', sans-serif;
  font-size: calc(var(--px) * 21.5);
  font-weight: 700;
  letter-spacing: -0.05vw;
  line-height: calc(var(--px) * 21.5);
}

.con05_margin_num {
  margin-top: calc(var(--px) * 21);
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 67);
  letter-spacing: -0.03vw;
  line-height: calc(var(--px) * 50);
}

.con05_tbl {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 451);
  margin-top: calc(var(--px) * 12.5);
  margin-left: 7%;
}

.con05_table {
  width: 100%;
}

.con05_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--px) * 49);
  border-bottom: 1px solid #eee;
  font-size: calc(var(--px) * 18);
  letter-spacing: -0.05vw;
  line-height: calc(var(--px) * 49);
  color: #000;
}

.con05_row_head {
  align-items: flex-start;
  height: calc(var(--px) * 56.5);
  border-bottom: 0;
  font-weight: 700;
  line-height: calc(var(--px) * 50);
}

.con05_row_on {
  background: var(--color-sage);
  border-bottom: 0;
}

.con05_row_total {
  height: calc(var(--px) * 80);
  border-bottom: 0;
  background: var(--color-olive);
  font-size: calc(var(--px) * 24);
  font-weight: 700;
  line-height: calc(var(--px) * 80);
  color: #fff;
}

.con05_cell {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  white-space: nowrap;
}

.con05_cell_1 {
  width: calc(var(--px) * 163);
}

.con05_cell_2 {
  width: calc(var(--px) * 132);
}

.con05_cell_3 {
  width: calc(var(--px) * 156);
  padding-left: calc(var(--px) * 17);
}

.con05_note {
  margin-top: calc(var(--px) * 11.5);
  font-family: 'Suit', sans-serif;
  font-size: calc(var(--px) * 14);
  font-weight: 400;
  letter-spacing: -0.05vw;
  line-height: calc(var(--px) * 21);
  text-align: left;
  color: #000;
}

.con05_bowl {
  left: -6.7%;
  top: 82.1vw;
  width: 36.6929%;
}

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

/* ===== CON07: 왜 샐러드마비에일까요? ===== */
.con07 {
  padding-top: 7.3vw;
  padding-bottom: 5vw;
  text-align: center;
  color: var(--color-ink);
  background-color: #fbf8ec;
  background-image: url("/images/con07_bg.png");
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
}

/* 배경 글자 마퀴: 원본 + 복제(absol) 2벌 */
.con07_txt {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  top: 33.4vw;
  left: -22.9%;
}

.con07_txt_move {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
  animation: marqueeX 40s infinite linear;
}

.con07_txt_item {
  padding-right: calc(var(--px) * 40);
  font-family: "Fraunces";
  font-weight: 600;
  font-size: calc(var(--px) * 160);
  letter-spacing: 0.02vw;
  line-height: 1;
  color: #efead9;
  white-space: nowrap;
}

.con07_txt_dup {
  top: 0;
  left: 100%;
}

.con07_title {
  font-family: var(--font-sogang);
  font-weight: 400;
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.14vw;
  line-height: 3.4vw;
}

.con07_em {
  color: var(--color-brown);
}

.con07_desc {
  margin-top: 0.9vw;
  font-size: calc(var(--px) * 20);
  letter-spacing: -0.05vw;
  line-height: 1.6vw;
}

.con07_desc_b {
  font-weight: 700;
}

.con07_list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  column-gap: calc(var(--px) * 30);
  margin-top: 6vw;
}

.con07_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 342);
  aspect-ratio: 342 / 222;
  padding-top: calc(var(--px) * 73.5);
  background: #fff url("/images/con07_frame.svg") center / 100% 100% no-repeat;
  box-shadow: 0 0 0 calc(var(--px) * 3) rgba(255, 255, 255, 0.15), 0 calc(var(--px) * 10) calc(var(--px) * 18) rgba(0, 0, 0, 0.11);
  transition: transform 1.1s cubic-bezier(0.34, 1.25, 0.5, 1);
}

/* 신호등 활성: 카드 중심 기준으로 기울어짐(집게 동행) */
.con07_card_on {
  transform: rotate(-4.65deg);
}

.con07_card_tit {
  font-family: var(--font-sogang);
  font-weight: 400;
  font-size: calc(var(--px) * 26);
  letter-spacing: -0.07vw;
  line-height: 2vw;
}

.con07_card_txt {
  margin-top: calc(var(--px) * 8);
  font-size: calc(var(--px) * 18);
  letter-spacing: -0.07vw;
  line-height: 1.5vw;
}

.con07_photo {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 305);
  aspect-ratio: 305 / 422;
  padding-top: calc(var(--px) * 25);
  background: #fff;
  box-shadow: 0 calc(var(--px) * 10) calc(var(--px) * 18) rgba(0, 0, 0, 0.11);
}

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

.con07_sign {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  width: calc(var(--px) * 266);
  margin-top: calc(var(--px) * 17);
}

.con07_sign_img {
  width: calc(var(--px) * 219);
  aspect-ratio: 219 / 47;
}

.con07_pin {
  top: -3.8vw;
  width: calc(var(--px) * 37);
  aspect-ratio: 37 / 125;
}

/* ===== CON08: 운영은 더 간편하게, 서비스는 더 빠르게! ===== */
.con08 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("/images/con08_bg.jpg");
}

.con08_dim_l {
  left: 0;
  top: 0;
  bottom: 0;
  width: 49.9738%;
  background-color: rgba(0, 0, 0, 0.5);
}

.con08_dim_r {
  right: 0;
  top: 0;
  bottom: 0;
  width: 50.0262%;
}

.con08_fade {
  left: 0;
  right: 0;
  bottom: 0;
  top: 55.4%;
  background: linear-gradient(to bottom, rgba(229, 218, 203, 0) 0%, rgba(229, 218, 203, 0.0026) 12.5%, rgba(229, 218, 203, 0.0093) 25%, rgba(229, 218, 203, 0.0214) 37.5%, rgba(229, 218, 203, 0.0439) 50%, rgba(229, 218, 203, 0.0827) 62.5%, rgba(229, 218, 203, 0.1403) 75%, rgba(229, 218, 203, 0.219) 87.5%, rgba(229, 218, 203, 0.3103) 100%);
}

.con08_mid {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  order: 2;
  width: 41.2073%;
  text-align: center;
}

.con08_side {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: 29.3963%;
  padding-top: 10.2vw;
}

.con08_side_l {
  order: 1;
  padding-left: calc(var(--px) * 140);
}

.con08_side_r {
  align-items: flex-end;
  order: 3;
  padding-right: calc(var(--px) * 114);
  text-align: right;
}

.con08_frame {
  margin-top: calc(var(--px) * 77);
  width: calc(var(--px) * 785);
  aspect-ratio: 785 / 674;
}

.con08_title {
  margin-top: calc(var(--px) * -460.5);
  font-family: var(--font-sogang);
  font-weight: 400;
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.14vw;
  line-height: 3.4vw;
  color: var(--color-ink);
}

.con08_em {
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.14vw;
  line-height: 3.4vw;
  color: var(--color-brown);
}

.con08_desc {
  margin-top: calc(var(--px) * 21);
  font-weight: 300;
  font-size: calc(var(--px) * 20);
  letter-spacing: -0.05vw;
  line-height: 1.6vw;
  color: var(--color-ink);
}

.con08_desc_b {
  font-weight: 700;
  font-size: calc(var(--px) * 20);
  letter-spacing: -0.05vw;
  line-height: 1.6vw;
  color: var(--color-ink);
}

.con08_plate {
  margin-top: calc(var(--px) * 43);
  margin-bottom: calc(var(--px) * -276);
  width: calc(var(--px) * 779);
  aspect-ratio: 779 / 628;
}

.con08_num {
  font-family: var(--font-sogang);
  font-weight: 400;
  font-size: calc(var(--px) * 30);
  letter-spacing: -0.08vw;
  line-height: 3.4vw;
  color: #ffffff;
}

.con08_tit {
  margin-top: 0.7vw;
  font-family: var(--font-sogang);
  font-weight: 400;
  font-size: calc(var(--px) * 30);
  letter-spacing: -0.08vw;
  line-height: 2.1vw;
  color: #ffffff;
}

.con08_em_g {
  font-size: calc(var(--px) * 30);
  letter-spacing: -0.08vw;
  line-height: 2.1vw;
  color: var(--color-gold);
}

.con08_pills {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 1.1vw;
  row-gap: 0.6vw;
}

.con08_pill {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 301);
  height: calc(var(--px) * 61);
  box-sizing: border-box;
  border: 1px solid var(--color-beige);
  border-radius: 50vw;
  font-family: var(--font-nanum);
  font-weight: 700;
  font-size: calc(var(--px) * 21);
  letter-spacing: -0.06vw;
  line-height: 1.8vw;
  color: var(--color-beige);
}

.con08_txt {
  margin-top: 1.3vw;
  font-weight: 300;
  font-size: calc(var(--px) * 20);
  letter-spacing: -0.07vw;
  line-height: 1.6vw;
  color: #ffffff;
}

/* ===== CON09: 수익을 뒷받침하는 탄탄한 공급망 ===== */
/* 프레임 900 = section 높이. 카드 리스트는 프레임 밖으로 넘치며 section overflow:hidden 이 자른다.
   js/animation.js initCon09Pin 이 section 을 pin 하고 리스트만 위로 이동 */
.con09 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 47.2vw;
  background-color: var(--color-dark);
  background-image: url("/images/con09_bg.jpg");
}

.con09_stick {
  position: relative;
  display: flex;
  flex-shrink: 0;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 47.2vw;
}

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

.con09_side_l {
  left: 1.8%;
}

.con09_side_r {
  right: 1.8%;
}

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

.con09_star {
  margin-top: 1vw;
  width: calc(var(--px) * 37);
  aspect-ratio: 37 / 37;
}

.con09_line_b {
  margin-top: 1.1vw;
}

.con09_txt {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 15.3%;
  padding-top: calc(var(--px) * 6);
}

.con09_title {
  font-family: var(--font-sogang);
  font-weight: 400;
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.14vw;
  line-height: 3.4vw;
  color: #fff;
  white-space: nowrap;
}

.con09_title_em {
  color: var(--color-gold);
}

.con09_desc {
  margin-top: 1vw;
  font-size: calc(var(--px) * 20);
  letter-spacing: -0.05vw;
  line-height: 1.6vw;
  color: #fff;
  white-space: nowrap;
}

.con09_desc_b {
  font-weight: 700;
}

/* 카드 리스트: 프레임 위로 겹쳐 올림(카드 1 top 99) */
.con09_list {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: -42vw;
  margin-left: 52%;
  width: 41.9948%;
  row-gap: calc(var(--px) * 9);
}

.con09_card {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  aspect-ratio: 800 / 320;
  background-color: #fff;
}

.con09_tab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-left: calc(var(--px) * -90);
  padding-top: calc(var(--px) * 16);
  padding-bottom: calc(var(--px) * 16);
  width: calc(var(--px) * 180);
  background-color: var(--color-beige);
  box-shadow: 4.5px 7.8px 5px rgba(0, 0, 0, 0.14);
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 22);
  letter-spacing: -0.06vw;
  line-height: 1.5vw;
  color: var(--color-dark);
  white-space: nowrap;
}

.con09_body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  margin-left: calc(var(--px) * 74);
  padding-top: calc(var(--px) * 4);
}

.con09_card_tit {
  font-family: var(--font-sogang);
  font-weight: 400;
  font-size: calc(var(--px) * 24);
  letter-spacing: -0.06vw;
  line-height: 1.5vw;
  color: var(--color-ink);
  white-space: nowrap;
}

.con09_card_em {
  color: var(--color-brown);
}

.con09_card_txt {
  margin-top: 0.9vw;
  font-size: calc(var(--px) * 18);
  letter-spacing: -0.05vw;
  line-height: 1.5vw;
  color: var(--color-ink);
  white-space: nowrap;
}

.con09_orn {
  flex-shrink: 0;
  margin-right: calc(var(--px) * 30);
  width: calc(var(--px) * 61);
  aspect-ratio: 61 / 226;
}

/* ===== CON09Bot: 하단 띠 ===== */
.con09Bot {
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: calc(var(--px) * 27);
  padding-bottom: calc(var(--px) * 29);
  background-color: var(--color-beige);
}

/* 시안 문구 띠(주기 223.6px × 8 = 1789px)를 2벌 이은 타일 3578px + 복제(absol)로 이음새 없이 흐름 */
.con09Bot_move {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
  margin-left: calc(var(--px) * -11.5);
  animation: marqueeX 40s infinite linear;
}

.con09Bot_img {
  flex-shrink: 0;
  width: calc(var(--px) * 3578);
  aspect-ratio: 3578 / 23;
}

.con09Bot_dup {
  top: 0;
  left: 100%;
}

/* ===== CON10: 메뉴 4분할 호버 타일 ===== */
.con10 {
  background-image: url('/images/con10_bg.jpg');
}

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

/* 타일 = 구분선(1px) 포함 치수. 상단 행 448 / 하단 행 450 (시안 구분선 y=447·897) */
.con10_tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  width: 50%;
  height: calc(var(--px) * 448);
  border-bottom: 1px solid var(--color-line);
}

.con10_tile_salad,
.con10_tile_poke {
  border-right: 1px solid var(--color-line);
}

.con10_tile_poke,
.con10_tile_pasta {
  height: calc(var(--px) * 450);
}

.con10_tile_salad {
  --con10-bg: var(--color-dark);
  --con10-fg: var(--color-gold);
  --con10-dx: -4;
  --con10-dy: 1;
}

.con10_tile_diet {
  --con10-bg: var(--color-olive);
  --con10-fg: var(--color-sage-em);
  --con10-dx: 3;
  --con10-dy: -7;
}

.con10_tile_poke {
  --con10-bg: var(--color-terra);
  --con10-fg: var(--color-peach);
  --con10-dx: -4;
  --con10-dy: 4;
}

.con10_tile_pasta {
  --con10-bg: var(--color-beige);
  --con10-fg: var(--color-brown);
  --con10-dx: 1;
  --con10-dy: 4;
}

/* 기본 상태: 사진 위 검정 0.8 */
.con10_dim {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

/* 호버 상태: 단색 배경 + 접시 2장 (타일 hover 시 페이드 인) */
.con10_on {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--con10-bg);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.con10_tile:hover .con10_on {
  opacity: 1;
}

.con10_dish_01 {
  left: -18.4%;
  top: -4.5vw;
  width: 52.1785%;
  aspect-ratio: 497 / 291;
}

.con10_dish_02 {
  left: 60.5%;
  top: 12.8vw;
  width: 48.399%;
  aspect-ratio: 461 / 296;
}

.con10_dish_03 {
  left: -12.3%;
  top: -5.9vw;
  width: 43.9895%;
  aspect-ratio: 419 / 349;
}

.con10_dish_04 {
  left: 70.1%;
  top: 11.3vw;
  width: 41.3648%;
  aspect-ratio: 394 / 331;
}

.con10_dish_05 {
  left: -10.2%;
  top: -7.3vw;
  width: 40.8399%;
  aspect-ratio: 389 / 388;
}

.con10_dish_06 {
  left: 69.3%;
  top: 10.7vw;
  width: 39.0551%;
  aspect-ratio: 372 / 374;
}

.con10_dish_07 {
  left: -11.5%;
  top: -4.4vw;
  width: 43.9895%;
  aspect-ratio: 419 / 356;
}

.con10_dish_08 {
  left: 66.3%;
  top: 9.9vw;
  width: 48.294%;
  aspect-ratio: 460 / 386;
}

/* 타일별 시안 실측 오차(dx 가로·dy 호버 시 세로, PSD 수동 배치)를 변수로 흡수 */
.con10_txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateX(calc(var(--px) * var(--con10-dx)));
  transition: transform 0.5s ease;
}

.con10_tile:hover .con10_txt {
  transform: translate(calc(var(--px) * var(--con10-dx)), calc(var(--px) * var(--con10-dy)));
}

.con10_title {
  font-family: "Fraunces";
  font-weight: 600;
  font-size: calc(var(--px) * 100);
  line-height: calc(var(--px) * 100);
  letter-spacing: 0;
  color: #858585;
  white-space: nowrap;
  transition: color 0.5s ease;
}

.con10_tile:hover .con10_title {
  color: var(--con10-fg);
}

/* 부제: 기본은 접혀 있다가 호버 시 펼쳐져 타이틀을 아래로 민다 */
.con10_sub {
  overflow: hidden;
  max-height: 0;
  font-family: var(--font-nanum);
  font-weight: 800;
  font-size: calc(var(--px) * 23);
  line-height: calc(var(--px) * 41);
  letter-spacing: -0.06vw;
  color: var(--con10-fg);
  white-space: nowrap;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.5s ease;
}

.con10_tile:hover .con10_sub {
  max-height: calc(var(--px) * 41);
  opacity: 1;
}

/* ===== CON11: 메뉴안내 (분류 탭 + 메뉴 슬라이드) ===== */
.con11 {
  justify-content: flex-start;
  align-items: center;
  padding-top: 9.1vw;
  padding-bottom: 7.9vw;
  background-image: url('/images/con11_bg.svg');
  background-size: 100% 100%;
}

.con11_sub {
  font-family: var(--font-sogang);
  font-weight: 400;
  font-size: calc(var(--px) * 30);
  letter-spacing: -0.08vw;
  line-height: 3.7vw;
  color: var(--color-ink);
}

.con11_title {
  font-family: var(--font-sogang);
  font-weight: 400;
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.14vw;
  line-height: 3.4vw;
  color: var(--color-ink);
}

.con11_title_em {
  color: var(--color-brown);
}

.con11_tab {
  margin-top: 2.1vw;
  width: 69.1339%;
  height: calc(var(--px) * 69);
  background: var(--color-brown);
  border-radius: calc(var(--px) * 10);
}

.con11_tab_item {
  margin: 0 calc(var(--px) * 37.5);
}

.con11_dot {
  width: calc(var(--px) * 9);
  height: calc(var(--px) * 8);
  background: #ffffff;
  border-radius: 50%;
}

.con11_leaf {
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  top: calc(var(--px) * -37.4);
  left: calc(var(--px) * 7);
  width: calc(var(--px) * 46);
  aspect-ratio: 46 / 33;
  filter: drop-shadow(0 calc(var(--px) * 6) calc(var(--px) * 7) rgba(0, 0, 0, 0.22));
}

.con11_tab_item.on .con11_leaf {
  display: flex;
}

.con11_used .con11_tab_item.on .con11_leaf {
  animation: con11LeafIn 0.4s ease backwards;
}

.con11_tab_btn {
  font-family: var(--font-nanum);
  font-weight: 400;
  font-size: calc(var(--px) * 19.4);
  letter-spacing: -0.05vw;
  line-height: 1.6vw;
  color: #ffffff;
}

.con11_tab_item.on .con11_tab_btn {
  font-weight: 900;
}

.con11_stage {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  margin-top: 1vw;
  width: 76.6404%;
}

.con11_arr {
  width: calc(var(--px) * 50);
  height: calc(var(--px) * 50);
  background: var(--color-dark);
}

.con11_arr svg {
  width: calc(var(--px) * 15);
  height: calc(var(--px) * 24);
}

.con11_prev {
  top: 6.9vw;
  left: 0;
}

.con11_next {
  top: 6.9vw;
  right: 0;
}

.con11_panel {
  display: none;
}

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

.con11_used .con11_panel.on {
  animation: con11PanelIn 0.5s ease backwards;
}

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

.con11_slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 431);
  margin-right: calc(var(--px) * 14);
}

.con11_card {
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--px) * 312);
  background: #ffffff;
  border: 1px solid #dddddd;
}

.con11_card_img {
  width: 62.645%;
}

.con11_name {
  margin-top: 1.2vw;
  width: 100%;
  font-weight: 700;
  font-size: calc(var(--px) * 21.34);
  letter-spacing: -0.06vw;
  line-height: 1.6vw;
  color: #000000;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== CON1213 (큰틀): 배경 질감은 큰틀 section 에 — 영역 div 는 배경 없음 ===== */
.con1213 {
  background-image: url('/images/con1213_bg.jpg');
}

/* ===== CON12: 계절을 타지 않는, 일상의 한 끼 ===== */
.con12 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 3.2vw;
}

.con12_photo {
  width: 27.5066%;
  aspect-ratio: 524 / 760;
  top: calc(var(--px) * 152);
}

.con12_photo_l {
  left: 0;
}

.con12_photo_r {
  right: 0;
  width: 27.5591%;
  aspect-ratio: 525 / 760;
}

.con12_photo img {
  width: 100%;
}

.con12_panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  width: 45.1444%;
  padding-bottom: 5.7vw;
  overflow: hidden;
  background-color: var(--color-olive);
}

.con12_orn {
  width: calc(var(--px) * 350);
  aspect-ratio: 350 / 30;
  margin-top: 5vw;
}

.con12_orn img {
  width: 100%;
}

.con12_title {
  margin-top: 1.8vw;
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.14vw;
  line-height: calc(var(--px) * 65);
  text-align: center;
  color: #ffffff;
}

.con12_em {
  color: var(--color-sage-em);
}

.con12_desc {
  margin-top: 1.5vw;
  font-size: calc(var(--px) * 20);
  font-weight: 300;
  letter-spacing: -0.05vw;
  line-height: calc(var(--px) * 30);
  text-align: center;
  color: #ffffff;
}

.con12_desc_2 {
  margin-top: 1.6vw;
}

.con12_desc_b {
  font-weight: 700;
}

.con12_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 3vw;
  row-gap: 0.9vw;
}

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

.con12_btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 467);
  height: calc(var(--px) * 71);
  border: 1px solid transparent;
  border-radius: 50vw;
  background-color: #ffffff;
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 20);
  letter-spacing: -0.05vw;
  line-height: calc(var(--px) * 30);
  color: var(--color-olive);
  transition: background-color 0.8s var(--ease-soft), border-color 0.8s var(--ease-soft), color 0.8s var(--ease-soft);
}

/* 신호등 on (js/animation.js startInterval) */
.con12_row_on .con12_btn {
  border-color: var(--color-sage-em);
  background-color: #4f523c;
  color: var(--color-sage-em);
}

/* 버튼 뒤 문구 마퀴 — on 행만 노출 (좌→우) */
.con12_mq {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.8s var(--ease-soft);
}

.con12_row_on .con12_mq {
  opacity: 1;
}

.con12_mq_move {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  animation: marqueeX_r 40s infinite linear;
}

.con12_mq_txt {
  flex-shrink: 0;
  font-family: 'FrauncesSeason', serif;
  font-size: calc(var(--px) * 30);
  font-weight: 600;
  line-height: calc(var(--px) * 70);
  white-space: nowrap;
  color: var(--color-sage-em);
}

.con12_mq_dup {
  top: 0;
  right: 100%;
}

/* ===== CON13: 오늘도 다시 찾는 이유 ===== */
.con13 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: -5vw;
  padding-top: 11.6vw;
  padding-bottom: 4.4vw;
}

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

.con13_bubble_l {
  top: 16.3vw;
  left: 18.4%;
  width: calc(var(--px) * 265);
}

.con13_bubble_r {
  top: 14.5vw;
  left: 66.7%;
  width: calc(var(--px) * 293);
}

.con13_bubble_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 72);
  border-radius: calc(var(--px) * 10);
  background-color: var(--color-olive);
}

.con13_bubble_txt {
  font-family: var(--font-nanum);
  font-size: calc(var(--px) * 16);
  letter-spacing: -0.04vw;
  line-height: calc(var(--px) * 26);
  text-align: center;
  color: #ffffff;
}

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

.con13_title {
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.14vw;
  line-height: calc(var(--px) * 65);
  text-align: center;
  color: var(--color-ink);
}

.con13_em {
  color: var(--color-olive);
}

.con13_desc {
  margin-top: 0.8vw;
  font-size: calc(var(--px) * 20);
  font-weight: 300;
  letter-spacing: -0.05vw;
  line-height: calc(var(--px) * 30);
  text-align: center;
  color: var(--color-ink);
}

.con13_desc_b {
  font-weight: 700;
}

/* 리뷰 슬라이드 — 마퀴형 무한 흐름 (첫 카드 x=-87 → slidesOffsetBefore, 카드 303 + 간격 52.2) */
.con13_sd {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
  width: 100%;
  margin-top: 6.2vw;
}

.con13_sd .swiper-wrapper {
  align-items: flex-start;
  transition-timing-function: linear;
}

.con13_sd .swiper-slide {
  width: auto;
  justify-content: flex-start;
}

.con13_card {
  width: calc(var(--px) * 303);
  aspect-ratio: 303 / 426;
  margin-right: calc(var(--px) * 52.2);
}

.con13_card img {
  width: 100%;
}

/* 폰 — .swiper(z-index:1) 위로 올림 (공통 .btn_arr 와 같은 층) */
.con13_phone {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  top: 22vw;
  z-index: 2;
}

.con13_phone_screen {
  align-items: flex-start;
  width: calc(var(--px) * 325);
  aspect-ratio: 325 / 644;
  overflow: hidden;
}

/* 세로형 영상 — 공통 video{cover} 로 폭 맞춤, 위 기준 정렬이라 하단(앱 하단 바) 62px 가 잘림 */
.con13_phone_video {
  display: block;
  object-position: top center;
}

/* 영상 상단의 다이나믹 아일랜드가 프레임 노치 밑으로 비쳐서 시안 포스터의 상태바(상단 52px)를 덮음 */
.con13_phone_bar {
  align-items: flex-start;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--px) * 52);
  overflow: hidden;
}

.con13_phone_bar img {
  width: 100%;
}

.con13_phone_frame {
  top: -0.4vw;
  left: -6vw;
  width: calc(var(--px) * 515);
  aspect-ratio: 515 / 726;
}

.con13_phone_frame img {
  width: 100%;
}

/* ===== CON14: 오래도록 성장할 수 있는 지속 가능한 건강식 브랜드 ===== */
.con14 {
  padding-bottom: 5.2vw;
  background-color: #fff;
  background-image: url('/images/con14_bg.png');
  background-size: 100% auto;
  background-position: top 36.7vw center;
}

.con14_txt {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  top: 22vw;
  left: -10.1%;
}

.con14_txt_move {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
  animation: marqueeX 40s infinite linear;
}

.con14_txt_item {
  padding-right: calc(var(--px) * 50);
  font-family: "Fraunces";
  font-weight: 600;
  font-size: calc(var(--px) * 200);
  line-height: 10.5vw;
  color: var(--color-cream);
  white-space: nowrap;
}

.con14_txt_dup {
  top: 0;
  left: 100%;
}

.con14_plate {
  width: calc(var(--px) * 1403);
  aspect-ratio: 1403 / 724;
  margin-right: calc(var(--px) * 4);
}

.con14_plate img {
  width: 100%;
}

.con14_title {
  margin-top: 6vw;
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.14vw;
  line-height: calc(var(--px) * 65);
  text-align: center;
  color: var(--color-ink);
}

.con14_em {
  color: var(--color-brown);
}

.con14_desc {
  margin-top: 1.1vw;
  font-size: calc(var(--px) * 20);
  font-weight: 300;
  letter-spacing: -0.05vw;
  line-height: calc(var(--px) * 30);
  text-align: center;
  color: var(--color-ink);
}

.con14_desc_b {
  font-weight: 700;
}

.con14_row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: calc(var(--px) * 45);
  margin-top: 2.8vw;
}

.con14_cctv {
  width: calc(var(--px) * 530);
  aspect-ratio: 530 / 317;
}

.con14_cctv img {
  width: 100%;
}

/* ===== CON15 — MA VIE, MY LIFE ===== */
.con15 {
  padding-top: 3vw;
  padding-bottom: 3.4vw;
  background-image: url('/images/con15_bg.jpg');
}

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

.con15_corner img {
  width: 100%;
}

.con15_corner_tl {
  top: 3vw;
  left: 2.8%;
}

.con15_corner_tr {
  top: 3vw;
  right: 2.8%;
}

.con15_corner_bl {
  bottom: 3.4vw;
  left: 2.8%;
}

.con15_corner_br {
  bottom: 3.4vw;
  right: 2.8%;
}

.con15_plate {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 18.3vw;
  left: 66.6%;
  width: calc(var(--px) * 745);
  aspect-ratio: 745 / 629;
}

.con15_plate img {
  width: 100%;
}

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

.con15_line {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1px;
  background: var(--color-beige);
}

.con15_line_top {
  margin-top: calc(var(--px) * 10);
}

.con15_line_bot {
  margin-bottom: calc(var(--px) * 7);
}

.con15_line_l {
  width: calc(var(--px) * 470);
}

.con15_line_r {
  width: calc(var(--px) * 469);
}

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

.con15_orn img {
  width: 100%;
}

.con15_title {
  margin-top: 5.3vw;
  font-family: var(--font-fraunces);
  font-weight: 600;
  font-size: calc(var(--px) * 90);
  line-height: calc(var(--px) * 90);
  letter-spacing: -0.24vw;
  color: var(--color-beige);
  white-space: nowrap;
}

.con15_desc {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  row-gap: 1.6vw;
  margin-top: 2.8vw;
}

.con15_desc_p {
  font-weight: 300;
  font-size: calc(var(--px) * 20);
  line-height: calc(var(--px) * 30);
  letter-spacing: -0.05vw;
  text-align: center;
  color: var(--color-beige);
}

.con15_deco_bot {
  align-items: flex-end;
  margin-top: 4.8vw;
}

/* ===== CON16 — 창업비용 · 창업절차 ===== */
.con16 {
  padding-top: 6.8vw;
  padding-bottom: 6.4vw;
  background-image: url('/images/con16_01.jpg');
}

/* con15 접시 하단 77px 걸침 — con15 와 같은 이미지·같은 left, top 만 con15 기준(349−901)으로 올림 */
.con16_plate {
  display: flex;
  justify-content: center;
  align-items: center;
  top: -29vw;
  left: 66.6%;
  width: calc(var(--px) * 745);
  aspect-ratio: 745 / 629;
}

.con16_plate img {
  width: 100%;
}

.con16_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 88.3465%;
  padding-top: 6.8vw;
  padding-bottom: 5.3vw;
  background: #fff;
  border-radius: calc(var(--px) * 50);
  box-shadow: 0 0 38px rgba(62, 48, 34, 0.07);
}

.con16_title {
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 55);
  line-height: calc(var(--px) * 55);
  letter-spacing: -0.14vw;
  color: var(--color-ink);
  white-space: nowrap;
}

.con16_title_step {
  margin-top: 6.7vw;
}

.con16_note {
  align-self: flex-end;
  margin-top: 0.6vw;
  margin-right: 21.8%;
  font-size: calc(var(--px) * 15);
  line-height: calc(var(--px) * 22);
  color: var(--color-ink);
}

.con16_table {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 57.2193%;
  margin-top: 0.3vw;
}

.con16_head {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: calc(var(--px) * 62);
  background: var(--color-cream);
  font-weight: 700;
  color: var(--color-dark);
}

.con16_rows {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  margin-top: 0.7vw;
}

.con16_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: calc(var(--px) * 45);
  color: var(--color-ink);
}

.con16_cell {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  white-space: nowrap;
}

.con16_cell_1 {
  width: 16.1994%;
}

.con16_cell_2 {
  width: 64.5899%;
}

.con16_cell_3 {
  width: 19.2108%;
  padding-right: calc(var(--px) * 50);
}

.con16_row .con16_cell_2 {
  justify-content: flex-start;
  padding-left: calc(var(--px) * 13);
}

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

.con16_row del {
  text-decoration: line-through;
}

.con16_sale {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  left: 96.2%;
  width: calc(var(--px) * 185);
  height: calc(var(--px) * 39);
  border: 2px solid #111;
  border-radius: calc(var(--px) * 6);
  background: #111;
  box-shadow: inset 0 0 0 1px var(--color-cream);
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 18);
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}

.con16_total {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: calc(var(--px) * 62);
  margin-top: 0.5vw;
  background: var(--color-dark);
  color: var(--color-cream);
}

.con16_total_label {
  margin-right: calc(var(--px) * 13);
}

.con16_total_num {
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 30);
  font-weight: 400;
  letter-spacing: -0.1vw;
}

.con16_foot {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 57.2193%;
  margin-top: 0.7vw;
}

.con16_foot_p {
  font-size: calc(var(--px) * 15);
  line-height: calc(var(--px) * 22);
  color: var(--color-ink);
  white-space: nowrap;
}

.con16_steps_wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 3.7vw;
}

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

.con16_steps + .con16_steps {
  margin-top: 2.3vw;
}

.con16_step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 20.7157%;
  height: calc(var(--px) * 151);
  padding-top: calc(var(--px) * 4);
  border: 1px solid var(--color-line);
  border-radius: calc(var(--px) * 20);
  background: #fff;
  color: var(--color-ink);
}

.con16_step_on {
  border-color: var(--color-dark);
  background: var(--color-dark);
  color: var(--color-cream);
}

.con16_step_no {
  display: flex;
  justify-content: center;
  align-items: center;
  top: calc(var(--px) * -20);
  width: calc(var(--px) * 51);
  height: calc(var(--px) * 36);
  background: var(--color-dark);
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 20);
  font-weight: 400;
  color: #fff;
}

.con16_step_on .con16_step_no {
  background: var(--color-cream);
  color: var(--color-dark);
}

.con16_step_tt {
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 22);
  font-weight: 400;
  line-height: calc(var(--px) * 32);
}

.con16_step_dd {
  margin-top: calc(var(--px) * 4);
  line-height: calc(var(--px) * 28);
}

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

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

/* ===== con18 창업 문의 폼 ===== */
.con18 {
  padding-top: 6.5vw;
  padding-bottom: 5.5vw;
  background-color: #fff;
  background-image: url('/images/con18_01.jpg');
  background-size: 100% auto;
  background-position: 0 calc(var(--px) * 4);
}

.con18_card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 77.7428%;
  aspect-ratio: 1481 / 603;
}

.con18_flourish {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  top: -1.3vw;
  left: 11.4112%;
  width: calc(var(--px) * 502);
  aspect-ratio: 502 / 98;
}

.con18_info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 8.2vw;
  margin-left: 17.2856%;
}

.con18_title {
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 50);
  line-height: calc(var(--px) * 60);
  letter-spacing: -0.18vw;
  color: var(--color-ink);
  white-space: nowrap;
}

.con18_point {
  color: var(--color-brown);
}

.con18_desc {
  margin-top: 1.1vw;
  font-size: calc(var(--px) * 20);
  line-height: calc(var(--px) * 30);
  letter-spacing: -0.05vw;
  color: var(--color-ink);
  white-space: nowrap;
}

.con18_form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 34.3011%;
  margin-top: 5.2vw;
  margin-right: 12.154%;
}

.con18_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 58.25);
  border-bottom: 1px solid #e5dcd3;
}

.con18_label {
  flex-shrink: 0;
  width: calc(var(--px) * 157);
  padding-left: calc(var(--px) * 18);
  font-weight: 700;
  font-size: calc(var(--px) * 18);
  letter-spacing: -0.05vw;
  color: var(--color-ink);
}

.con18_input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-weight: 300;
  font-size: calc(var(--px) * 18);
  letter-spacing: -0.07vw;
  color: var(--color-ink);
}

.con18_select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url('/images/con18_04.png');
  background-repeat: no-repeat;
  background-position: right calc(var(--px) * 6) center;
  background-size: calc(var(--px) * 15) calc(var(--px) * 10);
}

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

.con18_radio {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: calc(var(--px) * 7);
  cursor: pointer;
}

.con18_radio_btn {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: calc(var(--px) * 27);
  aspect-ratio: 27 / 26;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 3px rgba(62, 48, 34, 0.25);
  cursor: pointer;
}

.con18_radio_btn:checked {
  background-image: radial-gradient(circle closest-side, var(--color-dark) 0 63%, transparent 64%);
}

.con18_radio_txt {
  font-weight: 300;
  font-size: calc(var(--px) * 18);
  letter-spacing: -0.07vw;
  color: var(--color-ink);
}

.con18_agree {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: calc(var(--px) * 7);
  width: 100%;
  margin-top: 0.4vw;
  padding-right: calc(var(--px) * 3);
}

.con18_agree_txt {
  font-weight: 300;
  font-size: calc(var(--px) * 16);
  color: var(--color-ink);
  cursor: pointer;
}

.con18_submit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 306);
  height: calc(var(--px) * 66);
  margin-top: 1.7vw;
  border: 0;
  border-radius: 50vw;
  background: var(--color-dark);
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 28);
  letter-spacing: -0.07vw;
  color: var(--color-cream);
  cursor: pointer;
}

/* ===== CON17 매장안내 ===== */
.con17 {
  padding-top: 7.2vw;
  padding-bottom: 3.8vw;
}

.con17_bowl {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 2.3vw;
  left: -5.5%;
  width: calc(var(--px) * 532);
  aspect-ratio: 532 / 592;
}

.con17_bowl img {
  width: 100%;
}

.con17_title {
  font-family: var(--font-sogang);
  font-size: calc(var(--px) * 55);
  line-height: calc(var(--px) * 51);
  letter-spacing: -0.14vw;
  color: var(--color-ink);
  white-space: nowrap;
}

.con17_title_em {
  color: var(--color-brown);
}

.con17_search {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  z-index: 1;
  width: 42.0472%;
  height: calc(var(--px) * 71);
  margin-top: 3.1vw;
  margin-right: calc(var(--px) * 4);
  padding-left: calc(var(--px) * 42);
  padding-right: calc(var(--px) * 9);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 50vw;
}

.con17_input {
  width: calc(var(--px) * 640);
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: calc(var(--px) * 20);
  line-height: calc(var(--px) * 28);
  letter-spacing: -0.05vw;
  color: #131313;
}

.con17_input::placeholder {
  color: #8a8a8a;
}

.con17_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 53);
  height: calc(var(--px) * 53);
  padding: 0;
  background: var(--color-dark);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

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

.con17_btn_icon img {
  width: 100%;
}

.con17_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  width: 81.9423%;
  height: calc(var(--px) * 651);
  margin-top: -1.9vw;
  margin-right: calc(var(--px) * 6);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: calc(var(--px) * 40);
}

.con17_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
  width: calc(var(--px) * 399);
  background: #fff;
}

.con17_scroll {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
  width: calc(var(--px) * 394);
  height: calc(var(--px) * 649);
  overflow-y: auto;
}

.con17_scroll::-webkit-scrollbar {
  width: calc(var(--px) * 5);
}

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

.con17_scroll::-webkit-scrollbar-thumb {
  background: var(--color-dark);
  border-radius: 50vw;
}

.con17_stores {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
}

.con17_store {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  flex-shrink: 0;
  box-sizing: border-box;
  width: calc(var(--px) * 329);
  margin-left: calc(var(--px) * 39);
  margin-bottom: calc(var(--px) * 4);
  padding: calc(var(--px) * 42) calc(var(--px) * 23) calc(var(--px) * 42) calc(var(--px) * 18);
  border-bottom: 1px solid var(--color-line);
  cursor: pointer;
}

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

.con17_store_name {
  font-family: var(--font-suit);
  font-weight: 700;
  font-size: calc(var(--px) * 20);
  line-height: calc(var(--px) * 19);
  letter-spacing: -0.07vw;
  color: #131313;
}

.con17_store_addr {
  margin-top: 0.8vw;
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: calc(var(--px) * 18);
  line-height: calc(var(--px) * 17);
  letter-spacing: -0.07vw;
  color: #131313;
}

.con17_store_tel {
  margin-top: 0.5vw;
  font-family: var(--font-suit);
  font-weight: 100;
  font-size: calc(var(--px) * 16);
  line-height: calc(var(--px) * 13);
  letter-spacing: -0.06vw;
  color: #131313;
}

.con17_plus {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 38);
  height: calc(var(--px) * 38);
  padding: 0;
  background: var(--color-beige);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.con17_plus span {
  font-family: var(--font-suit);
  font-weight: 700;
  font-size: calc(var(--px) * 20);
  line-height: 1;
  letter-spacing: -0.07vw;
  color: #352f26;
}

.con17_noshop {
  display: none;
  margin-top: 2vw;
  margin-left: calc(var(--px) * 57);
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: calc(var(--px) * 18);
  color: #131313;
}

.con17_map {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  isolation: isolate;
  width: calc(var(--px) * 1160);
  height: calc(var(--px) * 649);
}

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

/* 카카오 CustomOverlay 말풍선 (js/map.js 가 마크업 주입) */
.map_marker {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.map_marker_text {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(var(--px) * 8) calc(var(--px) * 20);
  background: #fff;
  border: 2px solid var(--color-dark);
  border-radius: 50vw;
  font-family: var(--font-suit);
  font-weight: 700;
  font-size: calc(var(--px) * 16);
  color: var(--color-dark);
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(62, 48, 34, 0.18);
}

/* 매장 상세 팝업 (.map_plus 클릭) — 시안 없음, 브랜드 토큰 최소 구성 */
.con17_pop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.con17_pop_card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: calc(var(--px) * 520);
  padding: calc(var(--px) * 48) calc(var(--px) * 48) calc(var(--px) * 44);
  background: #fff;
  border-radius: calc(var(--px) * 20);
  font-family: var(--font-suit);
}

.con17_pop_close {
  position: absolute;
  top: calc(var(--px) * 16);
  right: calc(var(--px) * 20);
  padding: 0;
  background: transparent;
  border: 0;
  font-size: calc(var(--px) * 36);
  line-height: 1;
  color: var(--color-dark);
  cursor: pointer;
}

.con17_pop_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 1.6vw;
}

.con17_pop_img img {
  width: 100%;
}

.con17_pop_name {
  font-weight: 700;
  font-size: calc(var(--px) * 30);
  line-height: calc(var(--px) * 38);
  letter-spacing: -0.07vw;
  color: #131313;
}

.con17_pop_addr {
  margin-top: 1.2vw;
  font-weight: 400;
  font-size: calc(var(--px) * 20);
  line-height: calc(var(--px) * 28);
  color: #131313;
}

.con17_pop_tel {
  margin-top: 0.4vw;
  font-weight: 400;
  font-size: calc(var(--px) * 20);
  line-height: calc(var(--px) * 28);
  color: #131313;
}

.con17_pop_link {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2vw;
  padding: calc(var(--px) * 12) calc(var(--px) * 32);
  background: var(--color-dark);
  border-radius: 50vw;
  font-weight: 700;
  font-size: calc(var(--px) * 18);
  color: #fff;
}

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