@charset "utf-8";

/* =========================================================
기본 설정
========================================================= */
:root{
  --navy:#1A2B54;
  --text:#111;
  --muted:#666;
  --hint-navy:#1A2B54;

  --btn-call:#1c7cff;
  --btn-kakao:#ffda19;
  --btn-naver:#06be34;

  --footer-text:#989799;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:"Montserrat","Noto Sans KR",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#fff;
  overflow-x:hidden;
}

/* topbar */
.topbar{
  height:26px;
  width:100%;
  background:var(--navy);
}

/* containers */
.container,
.cl-container{
  width:min(1905px, 100%);
  margin:0 auto;
  padding-inline:clamp(16px, 3vw, 36px);
}

/* =========================================================
히어로
========================================================= */
/* hero */
.hero{ position:relative; overflow:hidden; }

.hero__bg{
  position:absolute;
  inset:0;
  background:url("../img/content/main-bg.jpg") center/cover no-repeat;
  opacity:1;
  z-index:0;
  pointer-events:none;
}

.container--hero{
  position:relative;
  padding-bottom:124px;
  text-align:center;
  z-index:1;
}

.hero__logo{
  display:block;
  margin:83px auto 0;
  height:auto;
}

.hero__headline{
  margin-top:75px;
  display:inline-block;
  transform:translateY(100px);
  opacity:0;
  will-change:transform, opacity;
}

.hero__headline.is-in{
  animation:slideUpFade 3000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay:0.2s;
}

@keyframes slideUpFade{
  0%{ opacity:0; transform:translateY(60px); filter:blur(6px); }
  60%{ opacity:1; filter:blur(0); }
  100%{ opacity:1; transform:translateY(0); filter:blur(0); }
}

.headline__title{
  margin:0;
  font-size:62px;
  font-weight:700;
  line-height:1.15;
}

.headline__desc{
  margin:18px 0 0;
  font-size:24px;
  font-weight:400;
  line-height:1.4;
}

.hero__hint{
  margin:172px 0 0;
  font-size:25px;
  font-weight:500;
  color:var(--hint-navy);
}

/* hero__cards (진료과 카드) */
.hero__cards{
  margin-top:74px;
  display:flex;
  justify-content:center;
  gap:48px;
}

.dept-card{
  width:616px;
  height:552px;
  display:block;
  border-radius:28px;
  border-top-right-radius:0;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,0.18);
}

.dept-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:bottom;
  display:block;
}

@media (max-width:1200px){
  .hero__cards{
    flex-direction:column;
    align-items:center;
  }
}

/* =========================================================
오시는길 (cl-*)
- 1905 -> 1201 구간: 배치는 유지, 지도/폰트/간격만 clamp로 축소
- <=1200: 지도 위 / 인포 아래(중앙)
========================================================= */
/* cl-contact */
.cl-contact{
  position:relative;
  background:url("../img/content/contact-bg.jpg") center/cover no-repeat;
}

.cl-container--contact{
  display:flex;
  align-items:flex-start;
  gap:100px;
  padding:0 0 0px;
  position:relative;
  z-index:1;

  /* ✅ 1200보다 큰데도 좁아지면 겹치는 경우 방지 */
  flex-wrap:wrap;
}

/* cl-map-area : LEFT MAP, 기준 박스(반드시 relative) */
.cl-map-area{
  position:relative;                 /* ✅ 필수 */
  width:min(580px, 100%);            /* ✅ 원복(638로 고정하지 말고) */
  height:auto;
  aspect-ratio: 580 / 350;           /* ✅ 문법/비율 정상 */
  flex: 0 1 auto;
}

/* cl-navy-backdrop : 네이비 박스(아래 영역만) */
.cl-navy-backdrop{
  position:absolute;
  left:0;
  top:44.4%;          /* ✅ 원복: 272/613 */
  width:100%;
  height:80%;       /* ✅ 원복: 300/613 */
  background:var(--navy);
  z-index:0;
}

/* ✅ 네이비 박스 왼쪽을 브라우저 끝까지 채움 */
.cl-navy-backdrop::before{
  content:"";
  position:absolute;
  top:0;
  right:100%;
  width:100vw;
  height:100%;
  background: var(--navy);
}

.cl-navy-backdrop__logo{
  position:absolute;
  right:16px;
  bottom:16px;
  height:44px;
  width:auto;
}

/* cl-map-link : 지도 카드 */
.cl-map-link{
  position:absolute;
  top:30.1%;                 /* 123/613 */
  left:calc(50% + 70px);                  /* ✅ 중앙 기준 */
  transform:translateX(-50%);/* ✅ 중앙 정렬 */
  width:88.4%;               /* ✅ 638/919 느낌 */
  aspect-ratio: 638 / 300;   /* ✅ 카드 비율 */
  border:1px solid #dcdbd9;
  background:#fff;
  z-index:1;
  display:block;
}

.cl-map-image{
  width:100%;      /* ✅ 130% 제거 */
  height:100%;
  object-fit:cover;
  display:block;
}

/* cl-info-area--dual : RIGHT, dual cards */
.cl-info-area--dual{
  flex:1 1 640px;   /* ✅ wrap 될 수 있게 최소 기준 */
  min-width:0;
  padding-top:90px;
  padding-bottom:90px;
}

.cl-info-dual{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap:15px;
  align-items:start;
  min-width:0;
}

.cl-info-card{ min-width:0; }

.cl-info-card__title{
  margin:0 ;
  font-weight:700;
  color: #1A2B54;
  font-size:40px; /* 30pt 근사 */
}

/* cl-phone-row : phone row + pill */
.cl-phone-row{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

/* mini row에서만 전체 스케일 다운 */
.cl-phone-row--mini{
  gap: clamp(8px, 1.1vw, 14px);
  flex-wrap:nowrap; /* ✅ 우선 한줄 유지(필요하면 나중에 wrap) */
}

.cl-phone-row__icon{
  width: clamp(28px, 3.2vw, 43px);
  height: clamp(28px, 3.2vw, 43px);
  object-fit: contain;
  flex: 0 0 auto;
}

.cl-phone-row__number{
  font-size:43px;
  font-weight:800;
  color:var(--navy);
  letter-spacing:.2px;
  white-space:nowrap;
  text-decoration: none;
}

.cl-callpill{
  margin-left:10px;
  width:117px;
  height:47px;
  border-radius:999px;
  background:var(--btn-call);
  color:#fff;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:29px;
  font-weight:700;
  white-space:nowrap;
  flex:0 0 auto;
}

/* mini에서만 더 작게 */
.cl-phone-row--mini .cl-phone-row__icon{
  width: clamp(22px, 2.2vw, 38px);
  height: clamp(22px, 2.2vw, 38px);
}

.cl-phone-row--mini .cl-phone-row__number{
  font-size: clamp(22px, 2.4vw, 40px);
  line-height: 1;
  letter-spacing: 0;
}

.cl-phone-row--mini .cl-callpill{
  width: clamp(88px, 7vw, 117px);
  height: clamp(34px, 3vw, 47px);
  font-size: clamp(14px, 1.3vw, 22px);
  padding: 0 clamp(10px, 1.2vw, 16px);
}

/* cl-info-table : table */
.cl-info-table{
  margin-top:18px;
  display:grid;
  grid-template-columns: max-content 1px max-content;
  row-gap:26px;
  align-items:start;
  position:relative;
  min-width:0;
}

.cl-info-table__divider{
  grid-column:2;
  grid-row:1 / 6;
  width:1px;
  background:#b5b5b5;
  justify-self:center;
  align-self:stretch;
}

.cl-info-row{ display:contents; }

.cl-info-label,
.cl-info-value{
  font-size: clamp(13px, 3.4vw, 22px);
  line-height: 1.45;
  padding-right: 0;
}

.cl-info-label{
  grid-column:1;
  padding-right:30px;
  white-space:nowrap;
  font-weight:600;
}

.cl-info-value{
  grid-column:3;
  padding-left:30px;
  font-weight:350;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:keep-all;
}

.cl-muted{ opacity:.75; }

.cl-info-note{
  font-size:23px;
  color:#517de6;
  font-weight:300;
  margin-top:-12px;
}

/* cl-cta-row : center 2 buttons */
.cl-cta-row{
  display:flex;
  align-items:center;
  gap:18px;
}

.cl-cta-row--center{
  justify-content:center;
  margin-top:52px;
  margin-right : 20px;
  flex-wrap:wrap;
}

.cl-cta{
  height:65px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  text-decoration:none;
  font-size:20px;
  font-weight:600;
  padding:0 10px;
  white-space:nowrap;
}

.cl-cta__icon{ width:24px; height:24px; }

.cl-cta--kakao{
  width:240px;
  background:var(--btn-kakao);
  color:#1b1b1b;
}

.cl-cta--naver{
  width:240px;
  background:var(--btn-naver);
  color:#fff;
}

/* PC FLUID SCALE (1905 -> 1201) */
@media (min-width:1201px){
  .cl-container--contact{
    gap: clamp(36px, 5vw, 100px);
 
  }

  .cl-map-area{
    width: clamp(480px, 32vw, 630px);
    flex: 0 0 clamp(480px, 32vw, 630px);
  }

  .cl-navy-backdrop__logo{
    height: clamp(32px, 2.2vw, 44px);
    bottom: clamp(14px, 1.4vw, 20px);
  }

  .cl-info-area--dual{
    padding-top: clamp(40px, 5vw, 90px);
    padding-bottom: clamp(40px, 5vw, 90px);
  }

  .cl-info-dual{
    column-gap: clamp(10px, 3vw, 54px);
  }

  .cl-info-card__title{
    font-size: clamp(22px, 1.7vw, 40px);
    margin-bottom:  7px;
  }

  .cl-phone-row__icon{
    width: clamp(40px, 3.2vw, 65px);
    height: clamp(40px, 3.2vw, 65px);
  }

  .cl-phone-row__number{
    font-size: clamp(28px, 2.6vw, 57px);
  }

  .cl-callpill{
    width: clamp(92px, 7vw, 117px);
    height: clamp(36px, 3vw, 47px);
    font-size: clamp(14px, 1.1vw, 29px);
  }

  .cl-info-table{ row-gap: clamp(16px, 1.6vw, 26px); }

  .cl-info-label,
  .cl-info-value{
    font-size: clamp(14px, 1.2vw, 26px);
  }

  .cl-info-label{ padding-right: clamp(10px, 2.6vw, 20px); }
  .cl-info-value{ padding-left:  clamp(10px, 2.6vw, 20px); }

  .cl-info-note{
    font-size: clamp(12px, 1.05vw, 23px);
  }

  .cl-cta-row--center{
    margin-top: clamp(24px, 3vw, 52px);
    gap: clamp(12px, 1.6vw, 18px);
  }

  .cl-cta{
    height: clamp(48px, 3.4vw, 65px);
    font-size: clamp(13px, 1.05vw, 24px);
    padding: 0 clamp(12px, 1.8vw, 12px);
  }

  .cl-cta--kakao,
  .cl-cta--naver{
    width: clamp(180px, 18vw, 200px);
  }
}

/* MOBILE */
@media (max-width:1200px){
  .cl-container--contact{
    display:block;
    padding:0 16px 40px;
  }

  .cl-map-area{
    width:min(919px, 100%);
    margin:0 auto 40px;
  }

  .cl-info-area--dual{
    width:min(760px, 100%);
    margin:0 auto;
    padding:24px;
    padding-top:24px;
    padding-bottom:24px;
  }

  .cl-info-dual{
    grid-template-columns: 1fr;
    row-gap:28px;
  }

  .cl-callpill{
    margin-left:0;
  }

  .cl-cta--kakao,
  .cl-cta--naver{
    width:min(200px, 100%);
    flex:1 1 200px;
  }
}

/* =========================================================
푸터
========================================================= */
/* site-footer */
.site-footer{
  background:#0f1114;
  color:var(--footer-text);
}

.footer-inner{
  width:min(1905px, 100%);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:44px clamp(16px, 3vw, 36px);
  gap:40px;
}

.footer-left{ min-width:0; }
.footer-links{ min-width:0; }

.footer-brand__logo{
  margin-top:4px;
  display:block;
  max-height:44px;
  width:auto;
  height:auto;
  margin-bottom:10px;
}

.footer-row{
  display:flex;
  align-items:baseline;
  gap:18px;
  margin-bottom:6px;
  flex-wrap:wrap;
}

.footer-row__title{
  font-size:18px;
  font-weight:600;
  min-width:110px;
}

.footer-row__items{
  font-size:18px;
  font-weight:300;
  line-height:1.25;
}

.footer-meta{
  margin-top:18px;
  font-size:16.5px;
  font-weight:400;
  line-height:1.5;
}

.footer-copy{
  margin-top:12px;
  font-size:15px;
  font-weight:300;
}

.footer-right{
  display:flex;
  align-items:center;
  gap:53px;
  flex:0 0 auto;
}

.sns img{
  width:44px;
  height:44px;
  display:block;
}

@media (max-width:1200px){
  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
    padding:28px 16px;
  }
  .footer-right{ gap:24px; }
}



/* =========================================================
히어로 모바일 보정
========================================================= */

/* 이미지 기본 안전장치 (넘침 방지) */
img { max-width: 100%; height: auto; }

/* hero가 모바일에서 너무 꽉 끼지 않게 */
.hero { overflow: hidden; } /* 유지 */

/* 로고가 모바일에서 화면 밖으로 나가지 않게 */
.hero__logo{
  width: min(520px, 80vw);
  height: auto;
}

/* 카드가 가로로 넘치지 않게 + 비율 유지 */
.dept-card{
  width: min(616px, 100%);
  height: auto;                 /* 고정 높이 제거 */
  aspect-ratio: 616 / 552;      /* 기존 디자인 비율 유지 */
}

/* 카드 안 이미지도 비율 유지 */
.dept-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile (<= 768) */
@media (max-width: 768px){

  /* Hero 컨테이너 상/하 여백 줄이기 */
  .container--hero{
    padding-bottom: 48px;
  }

  /* 로고/헤드라인/힌트 마진을 모바일에 맞게 축소 */
  .hero__logo{
    margin: 40px auto 0;
    width: min(420px, 78vw);
  }

  .hero__headline{
    margin-top: 32px;
  }

  /* 제목/설명 글자 크기: 화면폭에 따라 자동 조절 */
  .headline__title{
    font-size: clamp(26px, 7.2vw, 42px);
    line-height: 1.15;
    word-break: keep-all;
  }

  .headline__desc{
    font-size: clamp(14px, 4.2vw, 18px);
    line-height: 1.55;
    margin-top: 12px;
    padding: 0 6px;
    word-break: keep-all;
  }

  .hero__hint{
    margin-top: 28px; /* 기존 172px -> 축소 */
    font-size: clamp(14px, 4.2vw, 18px);
  }

  /* 카드 영역: 모바일 간격/폭 최적화 */
  .hero__cards{
    margin-top: 20px;
    gap: 16px;
    padding: 0 4px;
  }

  .dept-card{
    border-radius: 18px;
    border-top-right-radius: 0;
  }
}

/* 아주 작은 폰(<= 375)에서 한 번 더 촘촘하게 */
@media (max-width: 375px){
  .hero__logo{ width: min(380px, 82vw); }
  .hero__cards{ gap: 12px; }
}

/* iOS Safari 자동 글자 확대 방지 */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* =========================================================
오시는길 모바일 타이포 보정 (강제 적용)
========================================================= */
@media (max-width: 1200px){

  /* 진료정보 테이블 글자 강제 축소 */
  .cl-info-label,
  .cl-info-value{
    font-size: 14px !important;     /* 13~16px 사이로 취향 조절 */
    line-height: 1.5 !important;
  }

  /* 라벨/값 패딩 축소 */
  .cl-info-label{ padding-right: 12px !important; }
  .cl-info-value{ padding-left: 12px !important; }

  /* 표 간격 축소 */
  .cl-info-table{
    row-gap: 14px !important;
    margin-top: 12px !important;
  }

  /* 파란 안내문 축소 */
  .cl-info-note{
    font-size: 13px !important;
    margin-top: -6px !important;
  }

  /* 제목도 같이 축소 */
  .cl-info-card__title{
    font-size: 26px !important;
  }

  /* 작은 폰에서 라벨 컬럼 폭 줄여서 값 영역 확보 */
  .cl-info-table{
    grid-template-columns: 92px 1px 1fr !important;
  }

  .cl-info-label{
    white-space: normal !important;
  }
}