/* Layout */
.contact-locations{width: 80%;max-width:1600px;margin:0 auto;padding:20px;}
.cl-head h2{font-size:27px;line-height:30px;margin:0 0 12px;color:#1f2a39;font-weight:800;font-family: 'Pretendard_B';margin-bottom: 2em;}
.cl-aside{width:20%;float:left;box-sizing: border-box;}
.cl-item{padding:14px 0;border-bottom:1px solid #f0f2f6;}
.cl-item__label{display:block;cursor:pointer}
.cl-item__label strong{display:block;color:#1f2a39;margin-bottom:6px}
.cl-item__label small{display:block;color:#8893a1;line-height:1.5}
.btn-more{display:inline-block;margin-top:10px;padding:8px 12px;border:1px solid #e6ebf1;border-radius:4px;color:#7b8593;cursor:pointer}

.cl-map{margin-right:0;}
.worldmap{width:100%;height:auto;display:block}
.worldmap-bg{fill:#eef1f5}
.region{fill:#cfd5dd} /* 기본 회색 */

/* 탭 활성 스타일(좌측 강조선/버튼색) */
#tab-intl:checked  ~ .cl-aside .cl-item:nth-child(1){--accent:#f5a700}
#tab-na:checked    ~ .cl-aside .cl-item:nth-child(2){--accent:#49b149}
#tab-eu:checked    ~ .cl-aside .cl-item:nth-child(3){--accent:#3f6fd1}
.cl-aside .cl-item{position:relative}
.cl-aside .cl-item::before{
  content:"";position:absolute;left:0x;top:0;width:100%;height:2px;background:var(--accent,transparent);
}
#tab-intl:checked  ~ .cl-aside .cl-item:nth-child(1) .btn-more{border-color:#f5a700;color:#f5a700}
#tab-na:checked    ~ .cl-aside .cl-item:nth-child(2) .btn-more{border-color:#49b149;color:#49b149}
#tab-eu:checked    ~ .cl-aside .cl-item:nth-child(3) .btn-more{border-color:#3f6fd1;color:#3f6fd1}

/* 지도 하이라이트 */
#tab-intl:checked  ~ .cl-map .region--intl{fill:#f5a700}
#tab-na:checked    ~ .cl-map .region--na{fill:#49b149}
#tab-eu:checked    ~ .cl-map .region--eu{fill:#3f6fd1}

/* 패널 & 폼 */
.cl-panels{clear:both;display:block;}
.cl-panel{display:none;width: 100%;}
#tab-intl:checked  ~ .cl-panels #panel-intl{display:block}
#tab-na:checked    ~ .cl-panels #panel-na{display:block}
#tab-eu:checked    ~ .cl-panels #panel-eu{display:block}
.cl-panel div:first-child{width: 40%;}
.cl-panel div:last-child{width: 60%;}

.cl-title{font-size:20px;font-weight:800;margin:24px 0 6px}
.cl-title.intl{color:#f5a700}.cl-title.na{color:#49b149}.cl-title.eu{color:#3f6fd1}
.cl-desc{color:#6c7685;margin:0 0 16px}

.cl-form{margin-top:8px}
.cl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cl-grid .span2{grid-column:1 / -1}
.cl-grid label{display:flex;flex-direction:column;gap:6px}
.cl-grid span{font-size:13px;color:#6c7685}
.cl-grid input,.cl-grid select,.cl-grid textarea{
  width:100%;padding:10px 12px;border:1px solid #e6ebf1;border-radius:3px;background:#fff;color:#2b3442
}
.cl-grid textarea{resize:vertical;min-height:120px}

.agree{display:block;margin:14px 0;color:#6c7685}
.policy{height:140px;border:1px solid #e6ebf1;border-radius:3px;padding:10px;overflow:auto;background:#fafbfd;color:#8090a3;font-size:13px}

.btn-send{
  margin-top:12px;padding:10px 18px;border:0;border-radius:4px;background:#2f3644;color:#fff;font-weight:700
}

/* Responsive */
@media (max-width:1024px){
  .cl-aside{float:none;width:auto;border:0;padding:0;margin-bottom:16px}
  .cl-map{margin:0}
  .cl-panels{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cl-grid{grid-template-columns:1fr}
}


/* 기본: 전부 회색 */
.region { fill: #cfd5dd; }

/* 특정 탭일 때만 하이라이트 */
#tab-intl:checked  ~ .cl-map .region--intl { fill:#f5a700; }
#tab-na:checked    ~ .cl-map .region--na   { fill:#49b149; }
#tab-eu:checked    ~ .cl-map .region--eu   { fill:#3f6fd1; }

/* 패널도 특정 탭에서만 보이기 (기본은 display:none) */
.office-panel, .cl-panel { display: none; }
#tab-intl:checked  ~ .cl-panels #panel-intl { display:block; }
#tab-na:checked    ~ .cl-panels #panel-na   { display:block; }
#tab-eu:checked    ~ .cl-panels #panel-eu   { display:block; }

/* 좌측 강조선/버튼색도 해당 탭에서만 */
#tab-intl:checked  ~ .cl-aside .cl-item:nth-child(1) .btn-more { border-color:#f5a700; color:#f5a700; }
#tab-na:checked    ~ .cl-aside .cl-item:nth-child(2) .btn-more { border-color:#49b149; color:#49b149; }
#tab-eu:checked    ~ .cl-aside .cl-item:nth-child(3) .btn-more { border-color:#3f6fd1; color:#3f6fd1; }


/* 지도 컨테이너 */
.cl-map{
  position: relative;
  width: 70%;
  aspect-ratio: 16/9;    
  overflow: hidden;
  top:-100px
}

/* 지도 이미지 겹치기 */
.cl-map .map{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;                  /* 기본은 안 보이게 */
  transition: opacity .25s ease;
  pointer-events: none;        /* 클릭 방지 */
}

/* 회색 기본지도는 항상 보이도록 */
.cl-map .map--base{ opacity: 1; }

/* 탭 선택 시 해당 컬러지도만 보이게 */
#tab-intl:checked  ~ .cl-map .map--intl{ opacity: 1; }
#tab-na:checked    ~ .cl-map .map--na{   opacity: 1; }
#tab-eu:checked    ~ .cl-map .map--eu{   opacity: 1; }

/* (옵션) 탭이 선택되면 전체를 더 선명하게 */
.cl-map{ opacity:.9; transition:opacity .2s; }
#tab-intl:checked ~ .cl-map,
#tab-na:checked   ~ .cl-map,
#tab-eu:checked   ~ .cl-map{ opacity:1; }


/* Contact form용 체크박스 강제 노출 */
.agree{
  display:flex;
  align-items:center;
  gap:6px;
  margin:14px 0;
  color:#6c7685;
  font-size:13px;
}

.agree input[type="checkbox"]{
  position:static !important;
  opacity:1 !important;
  width:16px;
  height:16px;
  margin:0;
  margin-right:6px;
  /* 브라우저 기본 체크박스 스타일 사용 */
  -webkit-appearance:auto;
  appearance:auto;
}



.contact-admin-list{
  width: 80%;max-width: 1600px;margin: 60px auto;;
}



@media screen and (max-width: 1440px) {
.cl-panel div:first-child{width: 100%;}
.cl-panel div:last-child{width: 100%;}
}