/*
 * 오시는 길 (UT-12) — CRFF-46
 * 히어로(sub-hero 재사용, 사이트맵과 동일 이미지) + 지도 영역(플레이스홀더) + 정보 2단(본부·교통안내).
 * PC/태블릿: 2단 유지 / 모바일: 지도 세로·정보 1단·연락처 1열·교통 flag위 text아래.
 * 타이포는 페이지 스코프 명시 사이즈 — 시안 태블릿이 PC 사이즈를 유지해 type-* 유틸의 ≤1023 축소와 불일치.
 */

/* 히어로 = 사이트맵과 동일 #ee3124 배경 + 투명 일러스트 (서브텍스트 없음) */
.directions-page .sub-hero-inner {
  background: url('/images/sitemap/hero-illust.png') right center / cover no-repeat #ee3124;
}
.directions-page .sub-hero-sub {
  display: none;
}

.directions-body {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: var(--spacing-80) var(--spacing-40) var(--spacing-120);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}

/* ── 지도 (CRFF-224 — 카카오맵 임베드. CRFF-205 의 구글 지도 iframe 을 대체) ── */
.directions-map {
  display: flex;             /* 폴백('지도 영역') 중앙 정렬 */
  align-items: center;
  justify-content: center;
  height: 640px;
  border-radius: var(--radius-xxlarge);   /* 48 */
  overflow: hidden;   /* 지도 타일 모서리를 라운드로 클리핑 */
  background-color: var(--color-background-section);   /* 로딩 전 배경 */
}
/* 카카오맵 로드 성공 시 — 폴백 중앙정렬(flex)을 지도용 블록 레이아웃으로 되돌린다 */
.directions-map.is-map-loaded {
  display: block;
}
/* 앱키 미주입·지도 로드 실패 시에만 보이는 폴백 라벨 */
.directions-map-label {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1.35;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
}

/* ── 정보 2단 ── */
.directions-info {
  display: flex;
  gap: var(--spacing-24);
}
.directions-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  padding: var(--spacing-40);
  border: 2px solid var(--color-gray-10);   /* #222 */
  border-radius: var(--radius-xlarge);   /* 40 */
  background-color: var(--color-background);
}
.directions-card-title {
  font-family: var(--font-family-display);   /* Paperlogy */
  font-weight: 800;
  font-size: 32px;
  line-height: 1.35;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);   /* 시안 #1c1c1c ≈ #222 */
  word-break: keep-all;   /* 한글 어절 단위 줄바꿈 — "세이브더칠드런 본/부" 중간 끊김 방지 (CRFF-423) */
}

/* 본부 카드: 이름블록 → 연락처 간격 40 */
.directions-card--office {
  gap: var(--spacing-40);
}
.directions-office-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}
.directions-address {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-body);   /* #555 */
}

/* ── 연락처 (2열 그리드) ── */
.directions-contact {
  display: grid;
  /* auto-fit: 셀이 170 미만으로 좁아지면 자동 1열 — 2-up 카드가 좁아지는 768~810 에서
   * Tel·Fax 겹침·Fax 값 넘침 방지(CRFF-423). 넓으면 2열 유지, ≤767 은 아래 1fr 로 스택. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--spacing-16);
  list-style: none;
}
.directions-contact-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}
.directions-contact-label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
}
.directions-contact-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background-color: var(--color-cta);   /* 시안 point #d73026 */
  color: var(--color-text-inverse);   /* 아이콘(mask currentColor) 흰색 */
}
.directions-contact-ico .icon {
  width: 16px;
  height: 16px;
}
.directions-contact-term {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);   /* #222 */
  white-space: nowrap;
}
.directions-contact-value {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-secondary);   /* #6e6e6e */
  white-space: nowrap;
  text-decoration: none;
}

/* ── 교통안내 ── */
.directions-traffic {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  list-style: none;
}
.directions-traffic-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
}
/* flag: 공유 .flag 재사용 — 단 이 시안은 3종 모두 #222 보더 + 버스=green(컴포넌트 미제공) + 고정폭(공유 .flag 는 콘텐츠폭)이라 페이지 스코프로 지정 */
.directions-page .flag {
  flex-shrink: 0;
  width: 104px;   /* 시안 PC/태블릿 고정폭 */
  border-color: var(--color-gray-10);   /* 시안: 3종 모두 검정 보더 */
}
.directions-flag--bus {
  background-color: var(--color-green-60);   /* #daf069 */
}
.directions-flag--subway {
  background-color: var(--color-pink-60);   /* #ffb1ed */
}
.directions-flag--car {
  background-color: var(--color-background-section);   /* #f3f3f3 */
}
.directions-traffic-text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-body);   /* #555 */
}

/* ── 태블릿(≤1023): 2단·PC 폰트 유지, flag 40h(PC) 유지, 상단 간격 24 ── */
@media (max-width: 1023px) {
  .directions-body {
    padding-top: var(--spacing-24);
  }
  /* 공유 .flag 는 ≤1023 에서 32h 로 줄지만 이 시안 태블릿은 PC_flag(40h) 유지 */
  .directions-page .flag {
    height: 40px;
    padding: 0 var(--spacing-24);
    font-size: 16px;
  }
}

/* ── 모바일(≤767): 지도 세로, 정보 1단, 연락처 1열, 교통 flag위·text아래 ── */
@media (max-width: 767px) {
  .directions-page .sub-hero-inner {
    background: url('/images/sitemap/hero-illust-mo.png') center / cover no-repeat #ee3124;
  }
  .directions-body {
    padding: var(--spacing-40) var(--spacing-16) var(--spacing-80);
  }
  .directions-map {
    height: 400px;   /* MO: 세로 화면에서 지도가 과점유하지 않도록 축소 */
  }
  .directions-info {
    flex-direction: column;
  }
  .directions-card {
    padding: var(--spacing-40) var(--spacing-24);   /* 시안 MO py40 px24 */
  }
  .directions-card-title {
    font-size: 30px;   /* 시안 MO 30 */
  }
  .directions-address {
    font-size: 16px;   /* 시안 MO 16 */
  }
  .directions-contact {
    grid-template-columns: 1fr;   /* 1열 스택 */
  }
  .directions-traffic-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8);
  }
  /* MO_flag 80×32/12 */
  .directions-page .flag {
    width: 80px;   /* 시안 모바일 고정폭 */
    height: 32px;
    padding: 0 var(--spacing-16);
    font-size: 12px;
  }
}