/* --------------------------------
      Section: sub__location
--------------------------------- */
.sub__location {
  background: linear-gradient(to right, transparent 300px, #fafafa 300px);
  color: #333333;
}

.sub__location_wrap {
  max-width: 1024px;
  margin: 0 auto;
  padding: 3rem;
  padding-bottom: 12rem;
}

.sub__location_wrap h3 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 3rem;
}

.sub__location_text {
  display: flex;
  margin-bottom: 0.5rem;
  /* line-height 대신 margin 살짝만 확대 */
  align-items: center;
}

.sub__location_text p:nth-child(1) {
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 아이콘 중앙 정렬 */
}

.sub__location_text p:nth-child(2) {
  width: 130px;
  font-weight: 800;
}

.sub__location_text p:nth-child(3) {
  font-weight: 700;
}

.sub__location_map {
  margin-top: 3rem;
}

.sub__location_map iframe {
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

@media screen and (max-width: 1024px) {
  .sub__location {
    background: #fafafa;
    /* fallback, linear-gradient 대신 */
    color: #333333;
  }

  .sub__location_text {
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
  }

  .sub__location_text p:nth-child(2) {
    width: auto;
    /* 모바일에서 label 줄어듦 */
  }
}


/* ===== 오시는 길 (location) ===== */
.location-section {
  position: relative;
  background: #fff;
}

.location__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) 20px 80px;
}

.location__eyebrow {
  font-size: 12px;
  letter-spacing: .06em;
  color: #888;
  margin-bottom: 4px;
}

.location__title {
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 24px;
  color: #111;
}

/* 지도 섹션 */
.location__mapwrap {
  margin-top: 28px;
}

.location__caption {
  font-size: 13px;
  font-weight: 800;
  color: #666666;
  text-align: right;
  margin: 6px 0 8px;
}

.map-embed {
  position: relative;
  width: 100%;
  /* 16:9 비율 */
  padding-top: 56.25%;
  border-radius: 10px;
  overflow: hidden;
  background: #f2f2f2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 카드 3분할 */
.location__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}

.location-card {
  background: #111;
  /* 스샷처럼 어두운 바탕 */
  color: #fff;
  border-radius: 8px;
  padding: 22px 20px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.location-card__title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 12px;
  opacity: .95;
}

.location-card__text,
.location-card__list {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

.location-card__list li+li {
  margin-top: 8px;
}

.location-card a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Fax/E-mail 카드만 밝은 톤으로 분화 */
.location-card:nth-child(2),
.location-card:nth-child(3) {
  background: #f7f7f7;
  color: #111;
  box-shadow: inset 0 0 0 1px #eee;
}

.location-card:nth-child(2) a,
.location-card:nth-child(3) a {
  color: #111;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .location__cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .location__caption {
    text-align: left;
    font-size: 10px;
  }

  .location__cards {
    grid-template-columns: 1fr;
  }

  .location-card {
    padding: 18px 16px;
  }

  .location__inner {
    padding-bottom: 56px;
  }
}

/* 카드 공통 트랜지션 */
.location-card {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Address 카드 (첫 번째) - 기본은 검정 유지, hover 시에만 파랑 */
.location-card:nth-child(1) {
  background: #F7F7F7;
  /* 기본 검정 */
  color: #000000;
}

.location-card:nth-child(1):hover {
  background: #000000;
  /* hover 시 파랑 */
  color: #fff;
}

.location-card:nth-child(1):hover a {
  color: #fff;
}

/* Fax, Email 카드 (2,3번째) */
.location-card:nth-child(2),
.location-card:nth-child(3) {
  background: #f7f7f7;
  /* 기본 밝은 회색 */
  color: #111;
}

.location-card:nth-child(2):hover,
.location-card:nth-child(3):hover {
  background: #000000;
  /* hover 시 진한 회색 */
  color: #FFFFFF;
}

.location-card:nth-child(2):hover a,
.location-card:nth-child(3):hover a {
  color: #FFF;
}