/* ==============================
   latest skin : ka100_area_tabs
   ============================== */

.ka100-area{ position:relative; width:100%; padding: 186px 0 180px; overflow:hidden; }
.ka100-area__bg{ position:absolute; inset:0; background:url("/img/promise-bg.jpg") center/cover no-repeat; /* ★ 교체 */ }
.ka100-area__overlay{ position:absolute; inset:0;  }
.ka100-area__inner{ position:relative; z-index:2; }

.ka100-area__head{ text-align:center; }
.ka100-area__title{
  margin:0;
  font-family:"yg-jalnan","Gmarket Sans","Noto Sans KR",sans-serif;
  font-size:72px; line-height:1.08; letter-spacing:-0.04em;
  color:#f1d59b;
  text-shadow: 0 14px 40px rgba(0,0,0,.45);
}

.ka100-area__tabs{
  margin-top: 26px;
  display:flex;
  justify-content:center;
  gap: 42px;
  flex-wrap:wrap;
}
.ka100-area__tab{
  background:transparent;
  border:0;
  padding: 8px 2px;
  cursor:pointer;
  font-family:"Gmarket Sans","Noto Sans KR",sans-serif;
  font-weight:800;
  font-size:18px;
  color: rgba(255,255,255,.55);
  transition: color .2s ease, transform .2s ease;
}
.ka100-area__tab:hover{ color: rgba(255,255,255,.85); transform: translateY(-1px); }
.ka100-area__tab.is-active{ color:#fff; }

.ka100-area__box{
  margin-top: 38px;
  background:#fff;
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow:hidden;
}

/* panel show/hide */
.ka100-area__panel{ display:none; grid-template-columns: 46% 54%; gap: 26px; align-items:stretch; }
.ka100-area__panel.is-active{ display:grid; }

.ka100-area__leftHead{ margin-bottom: 14px; }
.ka100-area__badge{
  display:inline-flex;
  align-items:center;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background:#2b1f1d;
  color:#fff;
  font-family:"Gmarket Sans","Noto Sans KR",sans-serif;
  font-weight:900;
  font-size:18px;
}

.ka100-area__map{
  width:100%;
  border-radius: 14px;
  overflow:hidden;
  background:#f6f6f6;
  min-height: 320px; /* 이미지 없을 때 자리 */
}
.ka100-area__map img{ width:100%; height:auto; display:block; }

.ka100-area__rightTitle{
  font-family:"Gmarket Sans","Noto Sans KR",sans-serif;
  font-weight:900;
  font-size:22px;
  color:#d62f2f;
  margin: 6px 0 14px;
}

/* 6 cards grid */
.ka100-area__cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ka100-areaCard{
  display:block;
  padding: 16px 18px;
  border-radius: 12px;
  background:#2b1f1d;
  color:#fff;
  text-decoration:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ka100-areaCard:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.12); }
.ka100-areaCard__subject{
  font-family:"Gmarket Sans","Noto Sans KR",sans-serif;
  font-weight:900;
  font-size:18px;
  margin-bottom: 6px;
}
.ka100-areaCard__desc{
  font-family:"Noto Sans KR","Gmarket Sans",sans-serif;
  font-weight:600;
  font-size:14px;
  color: rgba(255,255,255,.8);
}

.ka100-area__empty{
  grid-column: 1 / -1;
  padding: 14px;
  border-radius: 12px;
  background:#f3f3f3;
  color:#333;
  font-weight:700;
}

/* responsive */
@media (max-width: 1024px){
  .ka100-area__title{ font-size:44px; }
  .ka100-area__panel{ grid-template-columns: 1fr; }
  .ka100-area__map{ min-height: 240px; }
}
@media (max-width: 860px){
  .ka100-area{ padding: 66px 0 86px; }
  .ka100-area__title{ font-size:32px;word-break: auto-phrase; }
  .ka100-area__tab{ font-size:15px; gap:22px; }
  .ka100-area__box{ padding: 18px; }
  .ka100-area__cards{ grid-template-columns: 1fr 1fr; }
}
/* ==============================
   ka100-area : 디자인 보정(네 시안에 맞춤)
   ============================== */

/* 섹션 여백/배경 톤 */
.ka100-area{
  padding: 172px 0 170px;
}

/* 타이틀은 이미 위에서 했다고 치고, 탭 위치를 더 위로 올리고 간격 정리 */
.ka100-area__tabs{
  margin-top: 18px;
  gap: 52px;
}
.ka100-area__tab{
  font-size: 24px;
  font-weight: 800;
  color: rgba(255,255,255,.55);
}
.ka100-area__tab.is-active{
  color: #f1d59b;              /* 네 시안의 골드 느낌 */
  text-shadow: 0 8px 22px rgba(0,0,0,.45);
}

/* 흰 박스(컨테이너) : 더 크고 가운데 */
.ka100-area__box{
  margin: 40px auto 0;
  max-width: 1480px;           /* ✅ 시안처럼 가운데에 꽉 차지 않게 */
  padding: 48px 56px;          /* ✅ 내부 여백 넉넉하게 */
  border-radius: 22px;
}

/* 패널 레이아웃: 좌 52% / 우 48% 정도로 지도 영역 확보 */
.ka100-area__panel.is-active{
  grid-template-columns: 48% 48%;
  gap: 56px;
  align-items: center;
}

/* 왼쪽 뱃지 위치: 더 위쪽, 둥글고 진하게 */
.ka100-area__badge{
  height: 46px;
  padding: 0 22px;
  font-size: 20px;
  background: #221a18;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* 지도 영역: 시안처럼 "가운데" + "크게" 보이게 */
.ka100-area__map{
  min-height: 480px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ✅ 핵심: 지도 이미지가 왼쪽에 붙지 말고 중앙에 자연스럽게 */
.ka100-area__map img{
  width: 100%;
  max-width: 580px;
  height: auto;
  display: block;
}

/* 오른쪽 타이틀: 시안처럼 좀 더 크고 오른쪽 상단에 */
.ka100-area__rightTitle{
  margin: 0 0 22px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-align: left;
}

/* 카드 6개 : 시안처럼 박스가 더 크고 간격도 더 넓게 */
.ka100-area__cards{
  gap: 18px 18px;
}

/* 카드 자체: 더 두껍고 공간 넉넉 */
.ka100-areaCard{
  padding: 20px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2a201d 0%, #1e1715 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* 제목/본문 타이포 */
.ka100-areaCard__subject{
  font-size: 20px;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.ka100-areaCard__desc{
  font-size: 15px;
  color: rgba(255,255,255,.86);
  word-break: auto-phrase;
}

/* ✅ 모바일/태블릿 보정 */
@media (max-width: 1024px){
  .ka100-area__box{
    max-width: 92%;
    padding: 34px 26px;
  }
  .ka100-area__panel.is-active{
    grid-template-columns: 1fr ;
    gap: 22px;
  }
  .ka100-area__map{
    min-height: 260px;
  }
  .ka100-area__map img{
    width: 96%;
    max-width: 520px;
  }
  .ka100-area__rightTitle{
    font-size: 22px;
    margin: 10px 0 14px;
  }
}

@media (max-width: 860px){
.ka100-areaCard{
  padding: 10px 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2a201d 0%, #1e1715 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
  .ka100-area__tabs{
    gap: 6px;
  }
  .ka100-area__tab{
    font-size: 15px;
  }
  .ka100-area__cards{
    grid-template-columns: 1fr 1fr;
  }
/* 제목/본문 타이포 */
.ka100-areaCard__subject{
  font-size: 16px;
  margin-bottom: 0px;
  letter-spacing: -0.02em;
}
.ka100-areaCard__desc{
  font-size: 12px;
  color: rgba(255,255,255,.86);
  word-break: auto-phrase;
}

}