@charset "utf-8";

/* ==============================
   RESET & FONTS
   ============================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; list-style: none;word-break: keep-all; }
body {
    /* Noto Sans KR을 기본으로 하되, 로드 실패 시 시스템 폰트 적용 */
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	word-break: keep-all;
}


.pc_img {
    display:block;
}
.mo_img {
    display:none;
}


@media screen and (max-width:1240px){
.pc_img {
	display:none;
	visibility:hidden;
	height:0px
}
.mo_img {
	display:block;
}

}


/* 기본(PC): 줄바꿈 안 함 */

.mo-br{ display:none; }



/* 모바일에서만 줄바꿈 강제 */

@media (max-width:768px){

  .mo-br{

    display:block;

    height:0;            /* 여백 생기지 않도록 */

    line-height:0;

    margin:0;

  }

}

/* 기본(모바일 등): 줄바꿈 안 함 */

.pc-br{ display:none; }



/* PC에서만 줄바꿈 강제 */

@media (min-width:769px){

  .pc-br{

    display:block;

    height:0; line-height:0; margin:0;   /* 여백 없이 깔끔하게 */

  }

}

/* 레이아웃 크기 지정 */
#hd, #wrapper, #ft {/* min-width:1200px */}

#hd_pop,
#hd_wrapper,
#tnb .inner,

#gnb .gnb_wrap,
#container_wr,
#ft_wr {width:100%}

/* 팝업레이어 */
#hd_pop {z-index:10;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:0px solid #e9e9e9;}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}
.hd_pops_con br {display:none;}

@media only screen and (max-width: 960px) {

.hd_pops {position:absolute;border:0px solid #e9e9e9;background:#000;width: 80%;left: 10%!important;margin-top: 5% !important;z-index:99999999999999999999999999999999999}
.hd_pops_con {width: auto!important;height: auto!important}
.hd_pops_con img {width: 100%;height: auto}
.hd_pops_con br {display:none;}
}


/* 1. SF 함박눈체 (이름을 하단 호출과 동일하게 SF_HambakSnow 로 수정) */
@font-face {
    font-family: 'SF_HambakSnow';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/SF_HambakSnow.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

/* 2. SBAggro (어그로체 - 잘난체 대체용) */
@font-face {
    font-family: 'SBAggro';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'SBAggro';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'SBAggro';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

/* 3. Gmarket Sans (기존에 쓰지 않던 Aggravo 대신 본문에서 주로 쓰는 Gmarket Sans로 교체) */
@font-face {
    font-family: 'Gmarket Sans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Gmarket Sans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Gmarket Sans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}


.ka-topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  height: var(--ka-topbar-h);
  display: flex;
  align-items: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ka-topbar__inner{
  width: min(1480px, calc(100% - 48px));
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* 좌측 로고 */
.ka-topbar__brand{
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  min-width: 0;
}

.ka-topbar__logo{
  font-weight: 900;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ka-topbar__sub{
  font-size: 14px;
  opacity: .85;
  letter-spacing: .04em;
  line-height: 1;
}

/* 우측 */
.ka-topbar__right{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.ka-topbar__tel{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.ka-topbar__telLabel{
  font-size: 16px;
  opacity: .9;
}

.ka-topbar__telNum{
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.ka-topbar__cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: #c8212f;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}

.ka-topbar__cta i{
  font-size: 18px;
  line-height: 1;
}

/* ====== Mobile ====== */
@media (max-width: 768px){
  .ka-topbar{
    height: var(--ka-topbar-h-mo);
  }

  .ka-topbar__inner{
    width: calc(100% - 28px);
    gap: 10px;
  }

  .ka-topbar__logo{
    font-size: 22px;
  }
  .ka-topbar__sub{
    display: none; /* 모바일에서는 숨겨서 공간 확보 */
  }

  .ka-topbar__telLabel{
    display: none; /* 모바일에선 라벨 숨기고 번호만 */
  }
  .ka-topbar__telNum{
    font-size: 18px;
  }

  .ka-topbar__cta{
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
    gap: 8px;
  }
}

/* ====== Very small devices ====== */
@media (max-width: 390px){
  .ka-topbar__cta span{
    display: none;           /* 버튼 텍스트 숨기고 아이콘만 */
  }
  .ka-topbar__cta{
    width: 40px;
    justify-content: center;
    padding: 0;
  }
}



.ka-topbar.is-scrolled{
  background: rgba(0,0,0,.78);
}

.ka-topbar__brand{ flex: 0 1 auto; }
.ka-topbar__logoImg{ max-width: 160px; } /* 필요 시 조절 */
@media (max-width: 768px){
  .ka-topbar__logoImg{ max-width: 120px; }
}



/* ==============================
   COMMON CONTAINER
   ============================== */
.katsubaek-container{
  width:100%;
  max-width:1480px;
  margin:0 auto;
  padding:0 24px;
  box-sizing:border-box;
}

/* ==============================
   SECTION 01 : ka100-hero
   ============================== */
.ka100-hero{
  position:relative;
  width:100%;
  min-height:900px;
  overflow:hidden;
  padding:80px 0 164px;
  color:#fff;

}

/* Background & Overlay */
.ka100-hero__bg.ka100-heroVegas{
  position:absolute;
  inset:0;
  background:none !important;
  z-index:0;
}
.ka100-hero__overlay{ z-index:1; }
.ka100-hero__inner{ position:relative; z-index:2; }

/* Top Area */
.ka100-hero__top{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  margin-bottom:48px;
}
.ka100-hero__top-left,
.ka100-hero__top-right{
  display:flex;
  align-items:center;
  gap:14px;
  opacity:.95;
}
.ka100-hero__top-left{ justify-content:flex-end; }
.ka100-hero__top-right{ justify-content:flex-start; }

.ka100-hero__top-text{
  font-family:"Noto Sans KR", "Gmarket Sans", sans-serif;
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.02em;
  margin:0;
  white-space:nowrap;
}
.ka100-hero__stars{
  display:flex;
  gap:4px;
  font-size:18px;
  line-height:1;
  color:#f6d37a;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}

/* Logo Area */
.ka100-hero__brand{ display:flex; justify-content:center; }
.ka100-hero__logo{
  width:150px;
  height:150px;
  border-radius:24px;
  margin:50px;
}
.ka100-hero__logo img{ width:100% }
.ka100-hero__logo-text{
  font-family:"Gmarket Sans", "Noto Sans KR", sans-serif;
  font-weight:800;
  font-size:28px;
  letter-spacing:-0.03em;
}
.ka100-hero__logo-sub{
  font-family:"Noto Sans KR", "Gmarket Sans", sans-serif;
  font-size:12px;
  opacity:.85;
}

/* Main Headline */
.ka100-hero__headline{
  margin:0 auto 46px;
  text-align:center;
}
.ka100-hero__title{
  font-family:"SBAggro", "UhBee", "Gmarket Sans", "Noto Sans KR", sans-serif;
  font-size:88px;
  line-height:1.03;
  letter-spacing:-0.04em;
  margin:0;
  color:#f6d37a;
  text-shadow: 0 10px 30px rgba(0,0,0,.45), 0 1px 0 rgba(0,0,0,.35);
}

/* Hero Cards Grid */
.ka100-hero__cards{
  margin-top: 14px;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap: 26px;
  align-items:stretch;
}

/* Card Common Style */
.ka100-hero__card{
  position:relative;
  border-radius: 22px;
  padding: 30px 22px 26px;
  text-align:center;
  border: 4px solid rgba(231, 205, 147, 0.95);
  box-shadow: 0 14px 34px rgba(0,0,0,.30), inset 0 0 0 3px rgba(255,255,255,.55);
  background:#ffffff;
  color:#141414;
  overflow:hidden;
}
.ka100-hero__card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(90% 70% at 50% 20%, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(90% 80% at 50% 110%, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 65%);
  pointer-events:none;
}
.ka100-card--tall{
  min-height: 310px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 10px;
}

/* Typography in Cards */
.ka100-card__big{
  margin:0;
  font-family:"Gmarket Sans","Noto Sans KR",sans-serif;
  font-weight:900;
  letter-spacing:-0.05em;
  line-height:0.92;
}
.ka100-card__big--red{ font-size: 76px; color:#dc2d2d; }
.ka100-card__big--brown{ font-size: 76px; color:#2f1a16; }

.ka100-card__rating{
  margin:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap: 6px;
  font-family:"Gmarket Sans","Noto Sans KR",sans-serif;
  font-weight:900;
  letter-spacing:-0.04em;
  line-height:1;
  color:#dc2d2d;
  font-size: 72px;
}
.ka100-card__star{ font-size: 52px; line-height:1; position:relative; top:-4px; }

.ka100-card__line{
  margin:0;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 36px;
  font-weight:900;
  letter-spacing:-0.04em;
  line-height:1.18;
  color:#2f1a16;
}
.ka100-card__line b{ color:#dc2d2d; font-weight:900; }
.ka100-card__line--lg{ font-size: 32px; }

.ka100-card__desc{
  margin: 4px 0 0;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 16px;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.35;
  color:#2a2a2a;
}
.ka100-card__foot{
  margin: 8px 0 0;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 12px;
  font-weight:700;
  color: rgba(20,20,20,.55);
}
.ka100-card__miniTitle{
  margin:0 0 4px;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 14px;
  font-weight:800;
  letter-spacing: .34em;
  color: rgba(20,20,20,.55);
}
.ka100-card__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: fit-content;
  margin: 10px auto 0;
  padding: 10px 18px;
  border-radius: 999px;
  background:#2f1a16;
  color:#fff;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-weight:900;
  font-size: 14px;
  letter-spacing:-0.02em;
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
}

/* Specific Card: 01 */
.ka100-card--01{
  padding: 34px 22px 28px;
  justify-content: flex-start;
  gap: 0;
}
.ka100-card01__top{
  margin: 6px 0 10px;
  font-family: "Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #2f1a16;
  line-height: 1.05;
}
.ka100-card01__big{
  margin: 0;
  font-family: "Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 72px;
  font-weight: 900;
  letter-spacing: -0.1em;
  line-height: 0.98;
  color: #dc2d2d;
}
.ka100-card01__big + .ka100-card01__big{ margin-top: 4px; }
.ka100-card01__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin: 18px auto 0;
  padding: 12px 18px;
  border-radius: 6px;
  background: #2f1a16;
  color: #fff;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.03em;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

/* Responsive: Hero */
@media (max-width: 1280px){
  .ka100-hero__cards{ 
    /* grid 대신 flex를 사용하여 떨어지는 요소들을 가운데로 모아줍니다 */
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 18px; 
  }
  .ka100-hero__card {
    /* 한 줄에 딱 3개씩 들어가도록 너비와 여백(18px) 계산 */
    width: calc(33.333% - 12px);
  }
  .ka100-card--tall{ min-height: 290px; }
  .ka100-card__big--red,
  .ka100-card__big--brown{ font-size: 66px; }
  .ka100-card__rating{ font-size: 58px; }
  .ka100-card__line{ font-size: 26px; }
}

@media (max-width: 860px){
  .ka100-hero__cards{ 
    gap: 14px; 
  }
  .ka100-hero__card{
    /* 화면이 좁아지면 한 줄에 2개씩 들어가도록 변경 (2-2-1 배열, 1은 가운데 정렬) */
    width: calc(50% - 7px);
    padding: 22px 16px 18px;
    border-radius: 18px;
    border-width: 3px;
  }
  .ka100-card--tall{ min-height: 240px; }
  .ka100-card__big--red,
  .ka100-card__big--brown{ font-size: 44px; }
  .ka100-card__rating{ font-size: 44px; }
  .ka100-card__star{ font-size: 40px; top:-3px; }
  .ka100-card__line{ font-size: 22px; }
  .ka100-card__desc{ font-size: 12px; }
  .ka100-card__foot{
    margin: 8px 0 0;
    font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
    font-size: 10px;
    font-weight:700;
    color: rgba(20,20,20,.55);
  }

  /* Card 01 Mobile */
  .ka100-card01__top{ font-size: 18px; margin: 4px 0 10px; }
  .ka100-card01__big{ font-size: 44px; }
  .ka100-card01__badge{ font-size: 14px; padding: 11px 16px; }
}

@media (max-width: 420px){
  .katsubaek-container{ padding:0 16px; }
  .ka100-hero__title{ font-size:38px; }
  
  /* 만약 420px 이하에서 카드를 한 줄에 1개씩 꽉 차게 
     바꾸고 싶으시다면 아래 주석을 해제하세요! */
  /*
  .ka100-hero__card {
    width: 100%;
  }
  */
}




/* ==============================
   SECTION 02 : ka100-sales
   ============================== */
.ka100-sales{
  position:relative;
  width:100%;
  padding: 180px 0 120px;
  overflow:hidden;
  color:#fff;
}
.ka100-sales__bg{
  position:absolute;
  inset:0;
  background-image:url("./img/sales-bg.jpg"); /* ★ 교체 */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter: contrast(1.05) saturate(0.9);
  transform: scale(1.02);
}
.ka100-sales__overlay{
  position:absolute;
  inset:0;
  /*background:
    radial-gradient(1200px 500px at 50% 0%, rgba(0,0,0,.35) 0%, rgba(0,0,0,.72) 70%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.78) 100%);*/
}
.ka100-sales__inner{ position:relative; z-index:2; }

/* Head */
.ka100-sales__head{ text-align:center; margin-bottom: 58px; }
.ka100-sales__kicker{
  margin:0 0 16px;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing:-0.03em;
  color:#f6d37a;
  text-shadow:0 6px 24px rgba(0,0,0,.35);
}
.ka100-sales__title{
  margin:0 0 18px;
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 90px;
  line-height: 1.06;
  letter-spacing:-0.05em;
  text-shadow:0 12px 34px rgba(0,0,0,.45);
}
.ka100-sales__title-gold{ color:#f6d37a; }
.ka100-sales__title-white{ color:#ffffff; }

.ka100-sales__sub{
  margin:0;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing:-0.03em;
  color: #f6d37a;
  text-shadow:0 10px 26px rgba(0,0,0,.35);
}

/* Chart */
.ka100-sales__chartWrap{ display:flex; justify-content:center; }
.ka100-sales__chartBox{
  width: min(1180px, 100%);
  background: #fff;
  border-radius: 42px;
  padding: 42px;
  box-shadow: 0 26px 60px rgba(0,0,0,.40), 0 2px 0 rgba(255,255,255,.25) inset;
}
.ka100-sales__chartImg{
  width:100%;
  height:auto;
  display:block;
  border-radius: 26px;
}

/* Responsive: Sales */
@media (max-width: 1280px){
  .ka100-sales{ padding: 96px 0 100px; }
  .ka100-sales__title{ font-size: 68px; }
  .ka100-sales__sub{ font-size: 20px; }
  .ka100-sales__chartBox{ padding: 32px; border-radius: 36px; }
}
@media (max-width: 860px){
  .ka100-sales{ padding: 76px 0 84px; }
  .ka100-sales__head{ margin-bottom: 28px; }
  .ka100-sales__kicker{ font-size: 18px; margin-bottom: 12px; }
  .ka100-sales__title{ font-size: 42px; line-height: 1.15; margin-bottom: 14px; }
  .ka100-sales__sub{ font-size: 15px; line-height: 1.5; padding: 0 6px; }
  .ka100-sales__chartBox{ padding: 16px; border-radius: 24px; }
  .ka100-sales__chartImg{ border-radius: 16px; }
}


/* ==============================
   SECTION 03 : ka100-profit
   ============================== */
.ka100-profit{
  position:relative;
  width:100%;
  padding: 210px 0 100px;
  overflow:hidden;
  color:#fff;
}
.ka100-profit__bg{
  position:absolute;
  inset:0;
  background-image:url("./img/profit-bg.jpg"); /* ★ 교체 */
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  transform:scale(1.02);
}
.ka100-profit__overlay{
  position:absolute;
  inset:0;
 /* background:
    radial-gradient(1200px 600px at 50% 0%, rgba(0,0,0,.35) 0%, rgba(0,0,0,.80) 70%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.85) 100%);*/
}
.ka100-profit__inner{ position:relative; z-index:2; }

/* Head */
.ka100-profit__head{ text-align:center; margin-bottom: 56px; }
.ka100-profit__title{
  margin:0 0 18px;
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 86px;
  line-height: 1.06;
  letter-spacing:-0.05em;
  color:#f6d37a; /* fallback */
  background: linear-gradient(45deg, #f6d37a 0%, #fdf2c8 35%, #fff 70%, #f6d37a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: #f6d37a4d;
 /* text-shadow: 0 12px 32px rgba(0,0,0,.45);*/
}
.ka100-profit__sub{
  margin:0;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing:-0.03em;
  line-height: 1.55;
  color: rgb(255 235 184);
  text-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* Cards Grid */
.ka100-profit__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  align-items:stretch;
}
.ka100-profitCard{
  border-radius: 22px;
  overflow:hidden;
  border: 3px solid rgba(231, 205, 147, 0.95);
  box-shadow: 0 18px 44px rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.12);
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(255,255,255,.08) 0%, rgba(0,0,0,0) 55%),
    rgba(20,10,8,.30);
}
.ka100-profitCard__media{
  position:relative;
  height: 250px;
  background:#111;
}
.ka100-profitCard__media img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.ka100-profitCard__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.10) 55%, rgba(0,0,0,.22) 100%);
  pointer-events:none;
}
.ka100-profitCard__body{
  background: rgba(245,245,245,.96);
  padding: 18px 18px 20px;
  text-align:center;
}
.ka100-profitCard__title{
  margin: 2px 0 8px;
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 36px;
  font-weight: 900;
  letter-spacing:-0.05em;
  color:#2f1a16;
}
.ka100-profitCard__desc{
  margin:0;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing:-0.02em;
  line-height: 1.45;
  color: rgba(47,26,22,.78);
}

/* Responsive: Profit */
@media (max-width: 1280px){
  .ka100-profit{ padding: 96px 0 104px; }
  .ka100-profit__title{ font-size: 60px; }
  .ka100-profit__sub{ font-size: 18px; }
  .ka100-profit__grid{ grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .ka100-profitCard__media{ height: 240px; }
}
@media (max-width: 860px){
  .ka100-profit{ padding: 76px 0 86px; }
  .ka100-profit__head{ margin-bottom: 28px; }
  .ka100-profit__title{ font-size: 38px; line-height: 1.18; margin-bottom: 12px; padding: 0 6px; }
  .ka100-profit__sub{ font-size: 12px; line-height: 1.55; padding: 0 10px; }
  .ka100-profitCard__media{ height: 200px; }
  .ka100-profitCard__title{ font-size: 30px; }
  .ka100-profitCard__desc{
  margin:0;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing:-0.02em;
  line-height: 1.45;
  color: rgba(47,26,22,.78);
}
}


/* ==============================
   SECTION 04 : ka100-multishop
   ============================== */
.ka100-multishop{
  position:relative;
  width:100%;
  padding:0px 0 120px;
  overflow:hidden;
  color:#fff;
}
.ka100-multishop__bg{
  position:absolute;
  inset:0;
  background:url("./img/multishop-bg.jpg") center/cover no-repeat;
  transform:scale(1.02);
}
.ka100-multishop__overlay{
  position:absolute;
  inset:0;
 /* background:
    radial-gradient(1200px 650px at 50% 0%, rgba(0,0,0,.35) 0%, rgba(0,0,0,.85) 75%),
    linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.9));*/
}
.ka100-multishop__inner{ position:relative; z-index:2; }

/* Head */
.ka100-multishop__head{ text-align:center; margin-bottom:42px; }
.ka100-multishop__kicker{
  font-size:16px;
  letter-spacing:.4em;
  font-weight:900;
  color:#f6d37a;
  margin-bottom:14px;
}
.ka100-multishop__title{
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size:80px;
  line-height:1.15;
  letter-spacing:-0.05em;
  margin-bottom:18px;
  font-weight:200;
  text-shadow:0 14px 36px rgba(0,0,0,.5);
}
.ka100-multishop__title .is-gold{
  color:#f0bf88;
  font-weight:900;
  font-size:88px;
}
.ka100-multishop__sub{ font-size:18px; font-weight:700; color:rgba(255,255,255,.9); }

/* Brands */
.ka100-multishop__brands{ margin:36px 0 68px; display:flex; justify-content:center; }
.ka100-multishop__brandGrid{
  display:grid;
  grid-template-columns:repeat(5, 130px);
  gap:18px;
}
.ka100-multishop__brandGrid img{
  width:130px; height:130px; object-fit:cover; box-shadow:0 16px 34px rgba(0,0,0,.4);
}
.ka100-multishop__brandsImg{ max-width:900px; width:100%; }

/* Compare Image */
.ka100-multishop__compare{ max-width:1200px; margin:0 auto; text-align:center; }
.ka100-multishop__compareImg{
  width:100%; height:auto; filter:drop-shadow(0 22px 44px rgba(0,0,0,.45));
}
.ka100-multishop__note{
  margin-top:10px; font-size:12px; color:rgba(255,255,255,.7); text-align:right;
}

/* Bottom */
.ka100-multishop__bottom{ margin-top:80px; text-align:center; }
.ka100-multishop__bottomText{
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size:62px;
  line-height:1.15;
  letter-spacing:-0.05em;
  text-shadow:0 16px 40px rgba(0,0,0,.6);
}

/* Responsive: Multishop */
@media (max-width: 860px){
  .ka100-multishop{ padding:70px 0 80px; }
  .ka100-multishop__title{ font-size:38px; }
  .ka100-multishop__sub{ font-size:12px; }
  .ka100-multishop__brandGrid{ grid-template-columns:repeat(3, 96px); gap:12px; }
  .ka100-multishop__brandGrid img{ width:96px; height:96px; }
  .ka100-multishop__note{ text-align:center; font-size:11px; }
  .ka100-multishop__bottom{ margin-top:42px; }
  .ka100-multishop__bottomText{ font-size:30px; }
.ka100-multishop__title .is-gold{
  color:#f0bf88;
  font-weight:900;
  font-size:38px;}

}

@media (max-width: 860px){
  .ka100-multishop{ padding:70px 0 80px; }
  .ka100-multishop__title{ font-size:38px; }
  .ka100-multishop__sub{ font-size:12px; }

  /* ▼ 1. 그리드 컨테이너: 3-2 배열 및 가운데 정렬 ▼ */
  .ka100-multishop__brandGrid {
    display: flex;             /* Grid를 Flex로 변경하여 자유로운 줄바꿈 유도 */
    flex-wrap: wrap;           /* 자리가 모자라면 다음 줄로 넘김 */
    justify-content: center;   /* 남은 2개를 화면 가운데로 정렬 (핵심) */
    gap: 12px;                 /* 이미지 사이 간격 */
    width: 100%;
    max-width: 312px;          /* 96px 3개 + 12px 간격 2개 = 한 줄에 무조건 3개만 허용 */
    margin: 0 auto;            /* 컨테이너 자체를 중앙 정렬 */
  }

  /* ▼ 2. 개별 이미지: 크기 자동 조절 및 비율 유지 ▼ */
  .ka100-multishop__brandGrid img {
    /* 가로 3등분(33.333%)에서 간격이 차지하는 공간(8px)을 뺀 정확한 계산식 */
    width: calc(33.333% - 8px); 
    max-width: 96px;           /* 화면이 커도 최대 96px까지만 커지도록 제한 */
    height: auto;              /* 데스크톱의 130px 고정 높이를 무시하고 자동 조절 (잘림 방지) */
    aspect-ratio: 1 / 1;       /* 가로세로 완벽한 1:1 정사각형 강제 유지 */
    object-fit: cover;         /* 이미지가 찌그러지지 않고 박스 안에 꽉 차게 */
  }

  /* 나머지 기존 속성 유지 */
  .ka100-multishop__note{ text-align:center; font-size:11px; }
  .ka100-multishop__bottom{ margin-top:42px; }
  .ka100-multishop__bottomText{ font-size:30px; }
  .ka100-multishop__title .is-gold{
    color:#f0bf88;
    font-weight:900;
    font-size:38px;
  }
}

/* ==============================
   SECTION 05 : ka100-switchcase
   ============================== */
.ka100-switchcase{
  position:relative;
  width:100%;
  padding: 210px 0 120px;
  overflow:hidden;
  color:#1a1a1a;
}
.ka100-switchcase__bg{
  position:absolute;
  inset:0;
  background:
    /*radial-gradient(1200px 600px at 50% 0%, rgba(255,255,255,.65) 0%, rgba(245,245,245,.92) 60%, rgba(238,238,238,.95) 100%),*/
    url("./img/switchcase_bg.jpg") center/cover no-repeat; /* ★ 교체 */
  opacity: 1;
}
.ka100-switchcase__inner{ position:relative; z-index:2; }

/* Head */
.ka100-switchcase__head{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 34px;
  align-items:end;
  margin-bottom: 34px;
}
.ka100-switchcase__bigTitle{ margin:0; }
.ka100-switchcase__bigTitle-main{
  display:inline-block;
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 74px;
  line-height: 0.98;
  letter-spacing:-0.06em;
  color:#b35d25;
}
.ka100-switchcase__title{
  margin:0 0 10px;
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing:-0.05em;
  color:#b35d25;
}
.ka100-switchcase__desc{
  margin:0;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 16px;
  font-weight:700;
  line-height: 1.55;
  letter-spacing:-0.02em;
  color: rgba(0,0,0,.55);
}

/* Body */
.ka100-switchcase__body{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 38px;
  align-items:stretch;
}

/* Photo */
.ka100-switchcase__photo{
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
  background:#fff;
}
.ka100-switchcase__photo img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Chart Box */
.ka100-switchcase__chart{ padding: 0px 6px 50px; }
.ka100-switchcase__chartTitle{
  margin: 8px 0 14px;
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 34px;
  letter-spacing:-0.05em;
  color: rgba(0,0,0,.60);
}
.ka100-switchcase__chartTitle--red{ color:#e02722; margin-top: 20px; }

/* Bars */
.ka100-switchcase__barRow{ margin-bottom: 8px; }
.ka100-switchcase__bar{
  position:relative;
  height: 64px;
  border-radius: 16px;
  overflow:hidden;
  background: rgba(0,0,0,.08);
}
.ka100-switchcase__barFill{
  position:absolute;
  inset:0 auto 0 0;
  width: 0%;
  border-radius: 16px;
  transform: translateZ(0);
}
.ka100-switchcase__bar--gray .ka100-switchcase__barFill{
  background: linear-gradient(90deg, #6f6f6f 0%, #9a9a9a 60%, #b8b8b8 100%);
}
.ka100-switchcase__bar--red .ka100-switchcase__barFill{
  background: linear-gradient(90deg, #cf1810 0%, #e02722 55%, #ff4b3f 100%);
}
.ka100-switchcase__barValue{
  position:absolute;
  right: 18px;
  top:50%;
  transform: translateY(-50%);
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 34px;
  letter-spacing:-0.04em;
  color: rgba(0,0,0,.55);
}
.ka100-switchcase__bar--red .ka100-switchcase__barValue{ color:#fff; }

/* Summary */
.ka100-switchcase__summary{
  margin: 18px 0 6px;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 22px;
  font-weight:800;
  letter-spacing:-0.03em;
  color: rgba(0,0,0,.68);
}
.ka100-switchcase__summary b{ color:#e02722; font-weight:900; }
.ka100-switchcase__impact{
  margin: 0 0 10px;
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 58px;
  letter-spacing:-0.06em;
  color:#e02722;
}
.ka100-switchcase__impact b{ font-weight:900; }
.ka100-switchcase__note{
  margin: 8px 0 0;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 12px;
  font-weight:700;
  color: rgba(0,0,0,.45);
}

/* Animation Trigger */
.ka100-switchcase.is-anim .ka100-switchcase__barFill{
  animation: ka100SwitchFill 1100ms ease-out forwards;
}
@keyframes ka100SwitchFill{
  from { width: 0%; }
  to   { width: calc(var(--bar) * 1%); }
}

/* Responsive: Switchcase */
@media (max-width: 1280px){
  .ka100-switchcase__head{ grid-template-columns: 280px 1fr; }
  .ka100-switchcase__bigTitle-main{ font-size: 62px; }
  .ka100-switchcase__title{ font-size: 38px; }
  .ka100-switchcase__impact{ font-size: 50px; }
}

@media (max-width: 860px){
  .ka100-switchcase{ padding: 152px 0 6px; }
  .ka100-switchcase__head{ grid-template-columns: 1fr; gap: 16px; margin-bottom: 18px; text-align:left; }
  .ka100-switchcase__bigTitle-main{ font-size: 76px; line-height: 1.02; }
  .ka100-switchcase__title{ font-size: 26px; line-height: 1.15; }
  .ka100-switchcase__body{ grid-template-columns: 1fr; gap: 18px; }
  .ka100-switchcase__bar{ height: 54px; border-radius: 14px; }
  .ka100-switchcase__barFill{ border-radius: 14px; }
  .ka100-switchcase__barValue{ font-size: 24px; right: 14px; }
  .ka100-switchcase__chartTitle{ font-size: 22px; }
  .ka100-switchcase__summary{ font-size: 16px; }
  .ka100-switchcase__impact{ font-size: 38px; }
.ka100-switchcase__desc{
  margin:0;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 14px;
  font-weight:700;
  line-height: 1.55;
  letter-spacing:-0.02em;
  color: rgba(0,0,0,.55);
}

}


/* ==============================
   SECTION 06 : ka100-receipt
   ============================== */
.ka100-receipt{
  position:relative;
  width:100%;
  padding: 0px 0 120px;
  overflow:hidden;
  color:#2a1a10;
}
.ka100-receipt__bg{
  position:absolute;
  inset:0;
  background:
/*     radial-gradient(1200px 700px at 50% 0%, rgba(255,255,255,.75) 0%, rgba(245,245,245,.96) 60%, rgba(240,240,240,.98) 100%), */
    url("./img/switchcase_bg.jpg") center/cover no-repeat; /* ★ 교체 */
}
.ka100-receipt__inner{ position:relative; z-index:2; }

/* Head */
.ka100-receipt__head{ text-align:center; margin-bottom: 44px; }
.ka100-receipt__title{
  margin:0;
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 90px;
  line-height: 1.06;
  letter-spacing:-0.06em;
  color:#6a3b1f;
}
.ka100-receipt__title-bold{ font-weight: 900; color:#6a3b1f; }
.ka100-receipt__title-thin{
  font-family:"SBAggro","Gmarket Sans",sans-serif;
  font-weight: 700;
  color: rgba(106,59,31,.72);
  letter-spacing:-0.05em;
}

/* Image */
.ka100-receipt__receipts{
  width: min(1480px, 100%);
  margin: 0 auto;
  text-align:center;
}
.ka100-receipt__receiptsImg{
  width:100%; height:auto; display:block; margin:0 auto;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.18));
}
.ka100-receipt__note{
  margin: 14px 0 0;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: rgba(0,0,0,.55);
}

/* Bottom Copy */
.ka100-receipt__bottom{ margin-top: 84px; text-align:center; }
.ka100-receipt__bottomCopy{
  margin:0;
  font-family:"SF_HambakSnow","SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 62px;
  line-height: 1.12;
  letter-spacing:-0.04em;
  color:#d8352a;
  text-shadow: 0 12px 26px rgba(0,0,0,.10);
}

/* Responsive: Receipt */
@media (max-width: 1280px){
  .ka100-receipt{ padding: 96px 0 104px; }
  .ka100-receipt__title{ font-size: 58px; }
  .ka100-receipt__bottomCopy{ font-size: 50px; }
  .ka100-receipt__bottom{ margin-top: 64px; }
}

@media (max-width: 860px){
  .ka100-receipt{ padding: 72px 0 86px; }
  .ka100-receipt__head{ margin-bottom: 22px; }
  .ka100-receipt__title{ font-size: 30px; line-height: 1.16; padding: 0 8px; }
  .ka100-receipt__note{ font-size: 12px; margin-top: 10px; }
  .ka100-receipt__bottom{ margin-top: 42px; }
  .ka100-receipt__bottomCopy{ font-size: 30px; line-height: 1.22; padding: 0 10px; }
}


/* ==============================
   SECTION 07 : ka100-promise
   ============================== */
.ka100-promise{
  position:relative;
  width:100%;
  padding: 180px 0 0 0px;
  overflow:hidden;
  color:#fff;
  background-image:url("./img/promise-bg.jpg"); /* ★ 교체 */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.ka100-promise::before{
  content:"";
  position:absolute;
  inset:0;
  /*background: radial-gradient(1000px 600px at 40% 20%, rgba(0,0,0,.20) 0%, rgba(0,0,0,.70) 70%),
              linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.78) 100%);*/
  pointer-events:none;
}
.ka100-promise__inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 44% 56%;
  gap: 30px;
  align-items: end;
}

/* Person */
.ka100-promise__person{
  position:relative;
  align-self: end;
  z-index:2;
  transform: translateX(38px);
}
.ka100-promise__personImg{
  width:100%; height:auto; display:block; max-width: 620px;
  margin-left:auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,.55));
}

/* Content */
.ka100-promise__content{
  position:relative;
  z-index:1;
  padding-left: 10px;
}
.ka100-promise__logoRow{ display:flex; align-items:center; gap: 14px; margin-bottom: 14px; }
.ka100-promise__logo{ width: 44px; height:auto; display:block; }
.ka100-promise__badge{
  margin:0; font-family:"SF_HambakSnow","Gmarket Sans",sans-serif;
  font-size: 24px; font-weight: 900; color: #fff;
}
.ka100-promise__title{
  margin: 0 0 12px;
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 64px;
  line-height: 1.12;
  letter-spacing:-0.06em;
  color:#f6d37a;
  text-shadow: 0 16px 38px rgba(0,0,0,.55);
}
.ka100-promise__quote{
  margin:0 0 22px;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
}

/* List */
.ka100-promise__list{ display:flex; flex-direction:column; gap: 16px; padding-bottom:150px; }
.ka100-promiseCard{
  display:grid;
  grid-template-columns: 118px 1fr;
  gap: 16px;
  align-items:center;
  border-radius: 16px;
  background: rgba(76, 41, 20, .78);
  border: 1px solid rgba(246,211,122,.24);
  box-shadow: 0 18px 36px rgba(0,0,0,.35);
  padding: 16px 18px;
}
.ka100-promiseCard__num{
  text-align:center;
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 18px;
  line-height: 1.15;
  color:#f6d37a;
  zoom: 1.3;
}
.ka100-promiseCard__num b{ font-size: 26px; font-weight: 900; }
.ka100-promiseCard__title{
  margin:0 0 6px;
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 32px;
  letter-spacing:-0.05em;
  color:#f6d37a;
}
.ka100-promiseCard__desc{
  margin:0;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
}

/* Responsive: Promise */
@media (max-width: 1280px){
  .ka100-promise__inner{ grid-template-columns: 42% 58%; }
  .ka100-promise__title{ font-size: 44px; }
  .ka100-promise__person{ transform: translateX(20px); }
}

@media (max-width: 860px){
	.ka100-promise__list{ display:flex; flex-direction:column; gap: 16px; padding-bottom:50px; }
  .ka100-promise{ padding: 72px 0 0px; background-position: center top; }
  .ka100-promise__inner{ grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .ka100-promise__content{ order: 1; }
  .ka100-promise__person{ order: 2; transform:none; display:flex; justify-content:center; }
  .ka100-promise__personImg{ max-width: 360px; }
  .ka100-promise__title{ font-size: 24px; line-height: 1.18; }
  .ka100-promiseCard{ grid-template-columns: 92px 1fr; padding: 14px 14px; }
  .ka100-promiseCard__num b{ font-size: 22px; }
  .ka100-promiseCard__title{ font-size: 18px; }
  .ka100-promiseCard__desc{ font-size: 12px; }
.ka100-promise__quote{
  margin:0 0 22px;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
}

}


/* ==============================
   SECTION 08 : ka100-operate
   ============================== */
.ka100-operate{
  position:relative;
  width:100%;
  padding: 210px 0 120px;
  overflow:hidden;
  color:#fff;
}
.ka100-operate__bg{
  position:absolute;
  inset:0;
  background:url("./img/operate-bg.jpg") center/cover no-repeat; /* ★ 교체 */
  transform:scale(1.03);
}
.ka100-operate__overlay{
  position:absolute;
  inset:0;
 /* background:
    radial-gradient(1100px 700px at 50% 15%, rgba(0,0,0,.25) 0%, rgba(0,0,0,.78) 70%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.85) 100%);*/
}
.ka100-operate__inner{ position:relative; z-index:2; }

/* Head */
.ka100-operate__head{ text-align:center; margin-bottom: 44px; }
.ka100-operate__eyebrow{
  margin:0 0 12px;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing:-0.02em;
  color:#f6d37a;
}
.ka100-operate__title{
  margin:0 0 14px;
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 86px;
  letter-spacing:-0.06em;
  line-height:1.1;
  color:#f6d37a;
  text-shadow: 0 18px 40px rgba(0,0,0,.6);
}
.ka100-operate__desc{
  margin:0;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height:1.7;
  color: rgba(255,255,255);
}

/* Cards */
.ka100-operate__cards{
  display:flex; flex-direction:column; gap: 24px;
  max-width: 1100px; margin: 0 auto;
}
.ka100-operateCard{
  display:grid;
  grid-template-columns: 1fr 1fr;
  background:#fff;
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 26px 58px rgba(0,0,0,.38);
}
.ka100-operateCard--reverse{ direction: rtl; }
.ka100-operateCard--reverse > *{ direction: ltr; }

.ka100-operateCard__media{ position:relative; min-height: 220px; }
.ka100-operateCard__media img{ width:100%; height:100%; object-fit:cover; display:block; }

.ka100-operateCard__text{
  padding: 28px 34px;
  color:#111;
  display:flex; flex-direction:column; justify-content:center;
}
.ka100-operateCard__title{
  margin:0 0 10px;
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 40px;
  letter-spacing:-0.05em;
  color:#b11f1a;
}
.ka100-operateCard__sub{
  margin:0 0 12px;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 18px;
  font-weight: 900;
  color:#111;
}
.ka100-operateCard__desc{
  margin:0;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(0,0,0,.70);
  letter-spacing:-0.05em;
}

/* Responsive: Operate */
@media (max-width: 1280px){
  .ka100-operate__title{ font-size: 52px; }
}

@media (max-width: 860px){
  .ka100-operate{ padding: 72px 0 86px; }
  .ka100-operate__head{ margin-bottom: 26px; padding: 0 6px; }
  .ka100-operate__eyebrow{ font-size: 15px; }
  .ka100-operate__title{ font-size: 48px; }
  .ka100-operate__desc{ font-size: 12px; }
  .ka100-operateCard{ grid-template-columns: 1fr; }
  .ka100-operateCard--reverse{ direction: ltr; }
  .ka100-operateCard__text{ padding: 18px 18px; }
  .ka100-operateCard__title{ font-size: 22px; }
  .ka100-operateCard__sub{ font-size: 13px; }
  .ka100-operateCard__desc{ font-size: 12px; }
}


/* ==============================
   SECTION 09 : ka100-recipe
   ============================== */
.ka100-recipe{
  position:relative;
  width:100%;
  padding: 180px 0 120px;
  overflow:hidden;
  color:#4a2a18;
}
.ka100-recipe__bg{
  position:absolute;
  inset:0;
  background:
    /*radial-gradient(1200px 700px at 50% 0%, rgba(255,255,255,.85) 0%, rgba(248,244,238,.95) 65%, rgba(245,241,235,.98) 100%),*/
    url("./img/recipe-bg.jpg") center/cover no-repeat; /* ★ 교체 */
}
.ka100-recipe__inner{ position:relative; z-index:2; }

/* Head */
.ka100-recipe__head{ text-align:center; margin-bottom: 56px; }
.ka100-recipe__title{
  margin:0 0 20px;
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 100px;
  line-height: 1;
  letter-spacing:-0.06em;
  color:#c4281c;
}
.ka100-recipe__title .is-strong{ display:inline-block;  font-size: 48px; }
.ka100-recipe__desc{
  margin:0;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 24px;
  font-weight:700;
  line-height: 1.65;
  color: rgba(120,70,40,.75);
}

/* Icons Grid */
.ka100-recipe__icons{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  max-width: 1100px;
  margin: 0 auto;
  text-align:center;
}
.ka100-recipeItem__icon{
  width: 200px; height: 200px; margin: 0 auto 18px;
  display:flex; align-items:center; justify-content:center;
}
.ka100-recipeItem__icon img{ width:100%; height:100%; object-fit:contain; }
.ka100-recipeItem__title{
  margin:0 0 10px;
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 24px;
  letter-spacing:-0.04em;
  color:#3a2416;
}
.ka100-recipeItem__text{
  margin:0;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 16px;
  font-weight:700;
  line-height: 1.6;
  color: rgba(0,0,0,.55);
}

/* Responsive: Recipe */
@media (max-width: 1280px){
  .ka100-recipe__title{ font-size: 52px; }
  .ka100-recipe__icons{ gap: 32px; }
}

@media (max-width: 860px){
  .ka100-recipe{ padding: 72px 0 86px; }
  .ka100-recipe__head{ margin-bottom: 32px; padding: 0 10px; }
  .ka100-recipe__title{ font-size: 34px; line-height: 1.1; }
  .ka100-recipe__desc{ font-size: 16px; }
  .ka100-recipe__icons{ grid-template-columns: 1fr; gap: 28px; }
  .ka100-recipeItem__icon{ width: 96px; height: 96px; }
  .ka100-recipeItem__title{ font-size: 32px; }
  .ka100-recipeItem__text{ font-size: 16px; }
}


/* ==============================
   SECTION 10 : ka100-menuMarquee
   ============================== */
.ka100-menuMarquee{
  position:relative;
  width:100%;
  padding: 0px 0 110px;
  overflow:hidden;
}
.ka100-menuMarquee__bg{
  position:absolute;
  inset:0;
  background:
   /* linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(245,240,233,.96) 100%),*/
    url("./img/menu-bg.jpg") center/cover no-repeat; /* ★ 교체 */
}
.ka100-menuMarquee__inner{ position:relative; z-index:2; max-width:100% }

/* Title Row */
.ka100-menuMarquee__titleRow{
  display:flex; align-items:center; gap: 18px; margin: 0 0 24px;
}
.ka100-menuMarquee__line{ flex:1; height:1px; background: rgba(0,0,0,.22); }
.ka100-menuMarquee__line--gold{ background: #ffcd00 }
.ka100-menuMarquee__title{
  margin:0;
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 44px;
  letter-spacing:-0.05em;
  color:#171717;
}
.ka100-menuMarquee__title--gold{ color:#ffcd00; }

/* Slider */
.ka100-menuMarquee__block{ margin-bottom: 54px; }
.ka100-menuMarquee__block--side{ margin-bottom: 0; }
.ka100-menuMarquee__item{
  width: 360px;
  padding: 0 18px;
  box-sizing:border-box;
  text-align:center;
}
.ka100-menuMarquee__thumb{
  width:100%; aspect-ratio: 16/11;
  display:flex; align-items:center; justify-content:center;
}
.ka100-menuMarquee__thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.ka100-menuMarquee__name{
  margin: 12px 0 0;
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 22px;
  letter-spacing:-0.04em;
  color:#ffffff;
  text-shadow: 0 10px 20px rgba(0,0,0,.55);
}

/* Slick Custom */
.ka100-menuMarquee .slick-arrow,
.ka100-menuMarquee .slick-dots{ display:none !important; }
.ka100-menuMarquee .slick-track{ display:flex !important; align-items:center; }
.ka100-menuMarquee__slider--side{ transform: scaleX(-1); }
.ka100-menuMarquee__slider--side .ka100-menuMarquee__item{ transform: scaleX(-1); }

/* Responsive: MenuMarquee */
@media (max-width: 860px){
  .ka100-menuMarquee__inner {width:100% !important;}
  .ka100-menuMarquee{ padding: 60px 0 72px; }
  .ka100-menuMarquee__title{ font-size: 26px; }
  .ka100-menuMarquee__item{ width: 260px; padding: 0 12px; }
  .ka100-menuMarquee__name{ font-size: 16px; }
  .katsubaek-container {
    width: 90%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 50px 0 0 0;
    box-sizing: border-box;
}

}


/* ==============================
   SECTION 11 : ka100-review
   ============================== */
.ka100-review{
  position:relative;
  width:100%;
  padding: 188px 0 192px;
  overflow:hidden;
  color:#fff;
}
.ka100-review__bg{
  position:absolute;
  inset:0;
  background:url("./img/review-bg.jpg") center/cover no-repeat; /* ★ 교체 */
  transform: scale(1.02);
}
.ka100-review__overlay{
  position:absolute;
  inset:0;
 /* background:
    radial-gradient(1100px 700px at 50% 10%, rgba(0,0,0,.15) 0%, rgba(0,0,0,.75) 70%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.82) 100%);*/
}
.ka100-review__inner{ position:relative; z-index:2;max-width:1680px;  }

/* Head */
.ka100-review__head{ display:flex; justify-content:center; margin-bottom: 86px; }
.ka100-review__titleImg{
  width:min(980px, 92%); height:auto; display:block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.55));
}

/* Slider Wrap */
.ka100-review__sliderWrap{ width:100%;}
.ka100-review__slide{
  padding: 0 12px;
  box-sizing:border-box;
  transition: transform .45s ease, opacity .45s ease;
}

/* Review Card Wrapper & Card */
.ka100-reviewCard-wrap{
  transition: transform .45s ease, box-shadow .45s ease;
}
.ka100-reviewCard{
  display:block;
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 18px 42px rgba(0,0,0,.35);
  transform: translateZ(0);
}
.ka100-reviewCard img{ width:100%; height:auto; display:block; padding:15px;}

/* Slick States */
.ka100-review .slick-slide{ opacity: .45; transform: scale(.9); }
.ka100-review .slick-center{ opacity: 1; transform: scale(1); z-index: 3; }
.ka100-review .slick-center .ka100-reviewCard-wrap{
  transform: scale(1.08); /* Central Highlight */
  box-shadow: 0 28px 70px rgba(0,0,0,.55);
}

/* Slick Dots & Arrows */
.ka100-review .slick-dots{ position:static; margin-top: 38px; }
.ka100-review .slick-dots li{ margin: 0 6px; }
.ka100-review .slick-dots li button:before{ font-size: 20px; opacity: .35; color:#ffffff; }
.ka100-review .slick-dots li.slick-active button:before{ opacity: .95; }
.ka100-review .slick-arrow{ display:none !important; }

/* Responsive: Review */
@media (max-width: 860px){
  .ka100-review{ padding: 62px 0 66px; }
  .ka100-review__titleImg{ width: min(520px, 92%); }
  .ka100-review__slide{ padding: 0 8px; }
.slick-dotted.slick-slider {
    margin-bottom: 30px; width:90%; margin:0 auto;
}
.ka100-review .slick-dots li button:before{ font-size: 14px; opacity: .35; color:#ffffff; }

}


/* ==============================
   SECTION 12 : ka100-spread
   ============================== */
.ka100-spread{
  position:relative;
  width:100%;
  padding: 180px 0 180px;
  overflow:hidden;
}
.ka100-spread__bg{
  position:absolute;
  inset:0;
  background:
    /*linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,241,236,.96)),*/
    url("./img/switchcase_bg.jpg") center/cover no-repeat; /* ★ 교체 */
}
.ka100-spread__inner{ position:relative; z-index:2; max-width:1280px }

/* Head */
.ka100-spread__head{ text-align:center; margin-bottom: 54px; }
.ka100-spread__title{
  margin:0 0 14px;
  font-family:"SBAggro","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 72px;
  line-height:1.15;
  letter-spacing:-0.05em;
  color:#5a2f0f;
}
.ka100-spread__desc{
  margin:0;
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-size: 24px;
  font-weight:700;
  color:#c05614;
}

/* Content */
.ka100-spread__content{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.ka100-spreadCard{
  background:#ffffff;
  border-radius: 22px;
  padding:40px;
  box-shadow: 0 22px 50px rgba(0,0,0,.18);
}
.ka100-spreadCard__label{
  display:inline-block;
  margin-bottom: 18px;
  padding: 6px 18px;
  border-radius: 999px;
  background:#b45309;
  color:#fff;
  font-family:"Gmarket Sans","Noto Sans KR",sans-serif;
  font-size: 15px;
  font-weight:700;
}
.ka100-spreadCard__image{ width:100%; }
.ka100-spreadCard__image img{ width:100%; height:auto; display:block; }

/* Responsive: Spread */
@media (max-width: 1280px){
  .ka100-spread__title{ font-size: 46px; }
}

@media (max-width: 860px){
  .ka100-spread{ padding: 72px 0 86px; }
  .ka100-spread__title{ font-size: 32px; }
  .ka100-spread__desc{ font-size: 14px; }
  .ka100-spread__content{ grid-template-columns: 1fr; gap: 26px; width:90%; margin:0 5% }
  .ka100-spreadCard{ padding: 22px 18px 24px; }
}


/* ==============================
   SECTION 13 : ka100-step
   ============================== */
.ka100-step{
  position: relative;
  overflow: hidden;
  padding: 196px 0 190px;
  color: #fff;

}
.ka100-step__bg{
  position: absolute;
  inset: 0;
  background-image: url("./img/step-bg.jpg"); /* ★ 교체 */
  background-size: cover;
  background-position: center;
  filter: saturate(.9);
  transform: scale(1.02);
}
.ka100-step__overlay{
  position: absolute;
  inset: 0;
 
}
.ka100-step__inner{ position: relative; z-index: 2; }

/* Head */
.ka100-step__head{ text-align: center; }
.ka100-step__eyebrow{
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: rgba(241, 213, 155, .9);
  letter-spacing: -0.02em;
}
.ka100-step__title{
  margin: 0;
  font-size: 82px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #f2d89c;
  text-shadow: 0 12px 30px rgba(0,0,0,.45);
}

/* Flow */
.ka100-step__flow{
  margin-top: 154px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
.ka100-step__arrow{ display: none; }
.ka100-step__item{
  position: relative;
  text-align: center;
  padding: 10px 10px 0;
}
.ka100-step__icon{
  width: 62px; height: 62px; margin: 0 auto 14px;
  display: grid; place-items: center; color: #fff; opacity: .95;
}
.ka100-step__icon i{
  font-size: 66px; /* xeicon */
  line-height: 1;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.ka100-step__step{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,.85);
  margin-bottom: 8px;
}
.ka100-step__name{
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 900;
  color: #f2d89c;
  letter-spacing: -0.03em;
  text-shadow: 0 10px 18px rgba(0,0,0,.35);
}
.ka100-step__desc{
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
}

/* Desktop Arrow Separator */
@media (min-width: 961px){
  .ka100-step__flow{ position: relative; }
  .ka100-step__item:not(:last-child)::after{
    content: "›";
    position: absolute;
    right: -22px;
    top: 124px;
    font-size: 34px;
    color: rgba(255,255,255,.65);
    transform: translateX(50%);
    text-shadow: 0 10px 18px rgba(0,0,0,.35);
    pointer-events: none;
  }
}

/* Responsive: Step */
@media (max-width: 960px){
  .ka100-step{ padding: 152px 0 158px; }
  .ka100-step__title{ font-size: 32px; }
  .ka100-step__eyebrow{ font-size: 13px; }

  /* 2 Column Grid */
  .ka100-step__flow{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    margin-top: 28px;
  }
  .ka100-step__item{
    padding: 14px 12px;
    border-radius: 16px;
    background: rgba(0,0,0,.28);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    backdrop-filter: blur(2px);
  }
  .ka100-step__icon{ width: 54px; height: 54px; margin-bottom: 10px; }
  .ka100-step__icon i{ font-size: 46px; }
  .ka100-step__name{ font-size: 20px; }
  .ka100-step__desc{ font-size: 11px; }

  /* Remove Arrow */
  .ka100-step__item::after{ display: none !important; content: none !important; }
}

@media (max-width: 480px){
  .ka100-step__flow{  grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==============================
   ka100-cost
   ============================== */
.ka100-cost{
  position: relative;
  padding: 180px 0 180px;
  overflow: hidden;
  color: #fff;
}

/* background */
.ka100-cost__bg{
  position: absolute;
  inset: 0;
  background-image: url("./img/cost-bg.jpg"); /* 나중에 교체 */
  background-size: cover;
  background-position: center;
  filter: saturate(.9);
  transform: scale(1.03);
}

.ka100-cost__overlay{
  position: absolute;
  inset: 0;
  /*background:
    radial-gradient(60% 55% at 50% 25%, rgba(0,0,0,.35) 0%, rgba(0,0,0,.75) 60%, rgba(0,0,0,.9) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.85));*/
}

.ka100-cost__inner{
  position: relative;
  z-index: 2;
}

/* head */
.ka100-cost__head{
  text-align: center;
  margin-bottom: 46px;
}

.ka100-cost__eyebrow{
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: rgba(242,216,156,.85);
  letter-spacing: -0.02em;
}

.ka100-cost__title{
  margin: 0 0 14px;
  font-size: 82px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #f2d89c;
  text-shadow: 0 14px 32px rgba(0,0,0,.45);
}

.ka100-cost__desc{
  margin: 0;
  font-size: 18px;
  color: rgba(255,255,255,.75);
}

/* image area */
.ka100-cost__imageWrap{
  display: flex;
  justify-content: center;
}

.ka100-cost__imagePlaceholder{
  width: 100%;
  max-width: 1282px;
  border-radius: 18px;
  padding:30px 0
}

/* 반응형 */
@media (max-width: 1024px){
  .ka100-cost{
    padding: 90px 0 100px;
  }
  .ka100-cost__title{
    font-size: 44px;
  }
  .ka100-cost__imagePlaceholder{
    height: 460px;
  }
}

@media (max-width: 640px){
  .ka100-cost{
    padding: 72px 0 80px;
  }
  .ka100-cost__title{
    font-size: 34px;
  }
  .ka100-cost__eyebrow{
    font-size: 18px;
  }
  .ka100-cost__desc{
    font-size: 16px;
  }
  .ka100-cost__imagePlaceholder{
    height: 320px;
    border-radius: 14px;
  }
}



.ka-footer{
  background:#6b371c;
  color:#fff;
  text-align:center;
  padding:60px 20px 50px;
}

.ka-footer-inner{
  max-width:900px;
  margin:0 auto;
}

.ka-footer-logo img{
  width:120px;
  margin-bottom:25px;
}

.ka-footer-info p{
  margin:6px 0;
  font-size:15px;
  line-height:1.6;
  opacity:0.9;
}

.ka-footer-info strong{
  font-weight:700;
  color:#fff;
}

.ka-footer-copy{
  margin-top:25px;
  font-size:14px;
  opacity:0.8;
  letter-spacing:0.5px;
}

.ka-footer{
  background:linear-gradient(180deg,#6b371c 0%, #5a2d16 100%);
}


@media (max-width:768px){

  .ka-footer{
    padding:40px 16px;
	font-size:11px;
  }

  .ka-footer-logo img{
    width:90px;
  }

  .ka-footer-info p{
    font-size:11px;
    line-height:1.7;
  }

  .ka-footer-copy{
    font-size:10px;
  }
}


  /* 차트 박스: 겹치기 컨테이너 */
  .ka100-sales__chartBox{
    position: relative;
    max-width: 1340px;  /* 필요하면 조절 */
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;  /* 밖으로 나가면 잘림 */
  }

  /* 이미지 공통 */
  .ka100-sales__chartBox img{
    display: block;
    width: 100%;
    height: auto;
  }

  /* 바탕 차트 */
  .ka100-sales__chartBase{
    position: relative;
    z-index: 1;
  }

  /* 화살표 오버레이 */
  .ka100-sales__chartArrow{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
	padding:47px;
  }


.ka100-multishop__compareBox{
  position:relative;
  max-width:900px;
  margin:0 auto;
}

.ka100-multishop__compareBase{
  width:100%;
  display:block;
}

/* 화살표 Reveal */
.ka100-multishop__reveal{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:100%;
  overflow:hidden;
  will-change:width;
}

/* 실제 이미지 */
.ka100-multishop__compareArrow{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* AOS 실행 후 애니메이션 */
[data-aos].aos-animate .ka100-multishop__reveal{
  animation: multishopRevealBounce 1.9s cubic-bezier(.2,.9,.2,1) forwards;
  animation-delay:.5s;
}

/* 왼쪽부터 등장 + 살짝 튕김 */
@keyframes multishopRevealBounce{
  0%   { width:0; }
  70%  { width:100%; }
  82%  { width:103%; }
  92%  { width:100%; }
  100% { width:101%; }
}

/* --- 창업비용 표 코딩화 --- */
.ka100-cost-table-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  padding: 40px 20px;
  border-radius: 20px;
  position: relative;
  background: rgba(0, 0, 0, .78);
}

.ka100-cost-unit {
  text-align: right;
  font-size: 14px;
  color: #ccc;
  margin-bottom: 10px;
}

.ka100-cost-table {
  width: 100%;
  border-collapse: separate; 
  border-spacing: 0 10px;

}

/* 상단 빨간색 바 헤더 */
.ka100-cost-table thead tr th {
  background: #c8212f;
  color: #f6d37a;
  padding: 18px 10px;
  font-size: 20px;
  font-weight: 900;
  border: none;
}

.ka100-cost-table thead tr th:first-child { border-top-left-radius: 25px; border-bottom-left-radius: 25px; }
.ka100-cost-table thead tr th:last-child { border-top-right-radius: 25px; border-bottom-right-radius: 25px; }

.ka100-cost-table tbody td {
  padding: 20px 10px;
  border-bottom: 1px solid #333;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight:900
}

.ka100-cost-table .content { text-align: left; opacity: 0.8; font-size: 15px; }

/* 금액 및 도장 효과 */
.ka100-cost-table .price {
  position: relative;
  min-width: 180px;
  font-size: 32px;
  font-weight: 900;
  color: #f6d37a;
}

.del-price {
  text-decoration: line-through;
  text-decoration-color: #c8212f;
  text-decoration-thickness: 3px;
  opacity: 0.9;
}


.stamp-badge.is-small { font-size: 18px; }

.ka100-cost-total {
  margin-top: 40px;
  text-align: center;
  background: #fff;
  color: #000;
  padding: 20px 0;
  border-radius: 50px;
  font-size: 34px;
  font-weight: 900;
}

.ka100-cost-total span { color: #c8212f; }

/* 카운트업 숫자 강조 */
.count-num {
  font-family: "Gmarket Sans", sans-serif;
  font-weight: 900;
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .ka100-cost-table thead { display: none; }
  .ka100-cost-table tbody td { display: block; width: 100%; border-bottom: none; text-align: center !important; }
  .ka100-cost-table .cate{ font-size: 24px !important; }

  .ka100-cost-table tbody tr { border-bottom: 1px solid #333; display: block; padding: 20px 0; }
  .stamp-badge { position: relative; top: 0; right: 0; transform: rotate(-5deg); display: inline-block; margin-left: 10px; }
}



/* --- 도장 기본 디자인 (중복 제거 및 !important 삭제) --- */
.stamp-badge {
  position: absolute;
  top: 50%;
  right: -35px;
  border: 3px solid #c8212f;
  color: #fff;
  background: rgba(200, 33, 47, 0.85); /* 이미지 느낌대로 농도 조절 */
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 22px;
  font-weight: 900;
  white-space: nowrap;
  z-index: 10;
  /* 아래 transform에서 !important를 빼야 애니메이션이 먹습니다 */
  transform: translateY(-50%) rotate(-12deg); 
}

/* --- 애니메이션 제어 --- */

/* 1. 초기 상태: 투명 + 블러 + 줌인(대기) */
#ka100-cost-trigger .stamp-badge.stamp-ani {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-50%) rotate(-30deg) scale(4); 
    transition: none;
}

/* 2. 실행 상태: 클래스가 붙으면 애니메이션 가동 */
#ka100-cost-trigger.is-anim .stamp-badge.stamp-ani {
    animation: naturalStamp 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards !important;
}

@keyframes naturalStamp {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(-50%) rotate(-30deg) scale(4);
    }
    70% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(-50%) rotate(-12deg) scale(0.9); /* 바닥에 닿는 순간의 충격 */
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(-50%) rotate(-12deg) scale(1); /* 최종 안착 */
    }
}

/* 기존 AOS 관련 충돌 방지 코드 (제거하거나 아래처럼 무력화) */
[data-aos="zoom-in-down"].stamp-badge.aos-animate {
  transform: none !important;
}

/* --- 3 NO! 섹션 레이아웃 --- */
.ka100-cost-no-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 60px;
  text-align: center;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.ka100-cost-no-item {
  color: #fff;
  font-family: 'Gmarket Sans', sans-serif;
}

.ka100-cost-no-item p {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 10px;
  letter-spacing: -0.05em;
}

.ka100-cost-no-item strong {
  font-size: 110px; /* NO! 강조 크기 */
  font-weight: 900;
  color: #ffcd00; /* 노란색 강조 */
  line-height: 1;
  display: block;
}



/* 모바일 대응 */
@media (max-width: 768px) {
  .ka100-cost-no-wrap {
    grid-template-columns: 1fr; /* 모바일은 한 줄씩 */
    gap: 40px;
    margin-top: 40px;
  }
  .ka100-cost-no-item p { font-size: 22px; }
  .ka100-cost-no-item strong { font-size: 80px; }
}


/* ==============================
   모바일 최적화 보강 코드
   ============================== */
@media (max-width: 768px) {
  /* 1. 히어로 섹션 타이틀 이미지 최적화 */
  .ka100-hero__title img {
    max-width: 100%;
    height: auto;
  }

  /* 2. 매출 섹션 화살표 패딩 조정 (어긋남 방지) */
  .ka100-sales__chartArrow {
    padding: 5px !important; /* 모바일에서는 패딩을 줄여야 차트와 맞습니다 */
	margin: 3px;
  }

  /* 3. 비용 안내 표 도장 위치 조정 */
  .ka100-cost-table tbody td {
    position: relative; /* 도장 배치를 위해 기준점 설정 */
    padding: 5px 10px;
  }
  
  /* 모바일에서 도장이 금액 바로 옆에 자연스럽게 붙도록 수정 */
  .stamp-badge {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: rotate(-7deg) scale(0.9) !important; /* 크기를 살짝 줄임 */
    display: inline-block !important;
    margin: 10px 0 0 0 !important;
    opacity: 1 !important; /* 모바일은 성능상 페이드보다 바로 보여주는게 깔끔할 수 있음 */
  }

  /* 4. 3 NO! 섹션 텍스트 크기 미세 조정 */
  .ka100-cost-no-item p {
    font-size: 20px !important; /* 글자가 넘치지 않게 조정 */
    word-break: keep-all; /* 단어 단위 줄바꿈 */
  }
  .ka100-cost-no-item strong {
    font-size: 60px !important; /* NO! 크기 조정 */
  }

  /* 5. 하단 총 개설비용 바 크기 조정 */
  .ka100-cost-total {
    font-size: 22px !important;
    padding: 15px 0 !important;
  }
}

/* 아주 작은 기기 (390px 이하) 추가 대응 */
@media (max-width: 390px) {
  .ka100-cost-no-item strong {
    font-size: 50px !important;
  }
  .ka100-cost-unit {
    font-size: 11px;
  }
}
/* ==============================
   HERO TOP 모바일 최적화
   ============================== */
@media (max-width: 860px) {
  .ka100-hero__top {
    /* 3단 그리드를 1단으로 변경하여 세로로 쌓음 */
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 30px;
  }

  .ka100-hero__brand {
    /* 로고를 가장 위로 올림 */
    order: 0; 
  }

  .ka100-hero__logo {
    /* 모바일에서는 로고 크기를 줄이고 마진을 조정 */
    width: 150px;
    height: 180px;
    margin: 10px auto 20px;
  }

  .ka100-hero__top-left,
  .ka100-hero__top-right {
    /* 좌우 정렬을 해제하고 중앙 정렬로 변경 */
    justify-content: center;
    text-align: center;
    gap: 8px;
	padding-top:15px;
  }

  .ka100-hero__top-text {
    font-size: 15px; /* 글자 크기 축소 */
    white-space: normal; /* 줄바꿈 허용 */
  }

  .ka100-hero__stars {
    font-size: 14px; /* 별 크기 축소 */
  }
}

/* 아주 작은 모바일 화면 (420px 이하) 추가 대응 */
@media (max-width: 420px) {
  .ka100-hero__top-text {
    font-size: 14px;
  }
  .ka100-hero__logo {
    width: 80px;
    height: 80px;
  }
}

/* ==============================
   온라인 상담 팝업 (Right Slide)
   ============================== */
.ka-cs-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.3s, opacity 0.3s ease;
}

.ka-cs-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* 어두운 배경 */
.ka-cs-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
}

/* 우측 슬라이드 패널 */
.ka-cs-modal__panel {
  position: absolute;
  top: 0;
  right: -500px; /* 초기 위치: 화면 밖 */
  width: 100%;
  max-width: 480px;
  height: 100%;
  background: #c8212f; /* 짙은 검정 배경 */
  color: #fff;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  transition: right 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow-y: auto;
  opacity:0.9
}

.ka-cs-modal.is-open .ka-cs-modal__panel {
  right: 0; /* 열렸을 때 위치 */
}

/* 상단 헤더 */
.ka-cs-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid #fff;
}

.ka-cs-modal__header-title {
  font-size: 14px;
  color: #fff;
  font-weight: 700;
}

.ka-cs-modal__close {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
}

/* 타이틀 영역 */
.ka-cs-modal__title-area {
  padding: 30px 30px 20px;
}

.ka-cs-modal__title-area h2 {
  font-family: 'yg-jalnan', 'Gmarket Sans', sans-serif;
  color: #fff;
  font-size: 26px;
  margin: 0 0 15px;
  letter-spacing: -0.05em;
}

.ka-cs-modal__title-area p {
  font-size: 13px;
  color: #fff;
  line-height: 1.6;
  margin: 0;
}

/* 폼 영역 */
.ka-cs-modal__form-area {
  padding: 0 30px 40px;
}

.ka-cs-modal__form-title {
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid #c8212f;
  padding-bottom: 10px;
  margin-bottom: 25px;
}

/* 폼 그룹 */
.ka-cs-form-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.ka-cs-form-group label {
  width: 90px;
  font-size: 14px;
  font-weight: 700;
  color: #ccc;
}

.ka-cs-form-group input[type="text"] {
  flex: 1;
  height: 44px;
  background: #fff;
  border: none;
  border-radius: 4px;
  padding: 0 15px;
  font-size: 14px;
  color: #000;
  outline: none;
  padding: 10px;
}

.ka-cs-radio-group {
  display: flex;
  gap: 20px;
}

.ka-cs-radio-group label {
  width: auto;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 개인정보 동의 */
.ka-cs-privacy {
  margin-top: 30px;
}

.ka-cs-privacy-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #fff;
  margin-bottom: 10px;
}

.ka-cs-agree {
  color: #fff;
  cursor: pointer;
}

.ka-cs-privacy-box {
  background: #fff;
  color: #333;
  padding: 15px;
  font-size: 12px;
  height: 100px;
  overflow-y: auto;
  border-radius: 4px;
  line-height: 1.5;
}

/* 제출 버튼 */
.ka-cs-submit-btn {
  width: 100%;
  height: 56px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 900;
  margin-top: 25px;
  cursor: pointer;
  transition: background 0.3s;
}

.ka-cs-submit-btn:hover {
  background: #a81a25;
}

/* 모바일 대응 */
@media (max-width: 480px) {
  .ka-cs-modal__panel { max-width: 100%; right: -100%; }
  .ka-cs-modal__header { padding: 15px 20px; }
  .ka-cs-modal__title-area { padding: 20px 20px 15px; }
  .ka-cs-modal__form-area { padding: 0 20px 30px; }
  .ka-cs-form-group { flex-direction: column; align-items: flex-start; }
  .ka-cs-form-group label { margin-bottom: 8px; }
  .ka-cs-form-group input[type="text"] { width: 100%; }
  .ka-cs-privacy-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}