﻿/* ============================================================
   오시는 길 (회사소개)
   · 공통 제목 · 여백은 ../research/research.css 를 씀
   · 본사 · 서울사무소를 한 페이지에 차례로 — 사진(또는 지도) + 연락처 · 지도 버튼
   ============================================================ */
/* 제목 → (대표 사진) → 첫 사업장 사이 여백 */
.loc-body .r-hero { margin-top: 40px; }
.loc-body .r-sec:first-of-type { padding-top: 104px; }
@media (max-width: 1920px) { .loc-body .r-sec:first-of-type { padding-top: 96px; } }
/* 마지막 내용과 푸터 사이 여백 */
.loc-body .r-main { padding-bottom: 140px; }
@media (max-width: 1920px) { .loc-body .r-main { padding-bottom: 120px; } }

/* 공통 — 분류 글자 · 연락처 · 지도 버튼 */
.loc-tag { font-size: 15px; font-weight: 700; color: var(--r-g); }
.loc-info { display: grid; gap: 12px; margin-top: 24px; }
.loc-info > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; font-size: 18px; line-height: 1.6; }
.loc-info dt { font-weight: 700; color: var(--r-ink); }
.loc-info dd { font-weight: 500; color: var(--r-txt); word-break: keep-all; }
/* 지도 버튼 — 연회색 면(#f2f2f2, 지속가능경영 탭 버튼과 같은 색), 두 개가 가로를 절반씩 나눠 가짐 */
.loc-maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.loc-maplink {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 52px;
  border: 0;
  border-radius: 10px;
  background: #f2f2f2;
  font-size: 16px;
  font-weight: 600;
  color: var(--r-ink);
  transition: background 0.2s, color 0.2s;
}
.loc-maplink::after { content: "arrow_outward"; font-family: "Material Symbols Rounded"; font-size: 18px; color: var(--r-sub); transition: color 0.2s; }
.loc-maplink:hover { background: var(--r-ink); color: #fff; }
.loc-maplink:hover::after { color: rgba(255, 255, 255, 0.75); }

/* ---------- 사업장 ---------- */
.loc-panel .loc-maps { margin-top: 32px; }
.loc-panel .loc-maplink { height: 56px; font-size: 17px; }
.loc-panel + .loc-panel { margin-top: 100px; }   /* 사업장 사이 — 선 없이 여백으로만 구분 */
.loc-panel__tag { font-size: 18px; font-weight: 700; color: var(--r-g); }
.loc-panel__tag small { margin-left: 6px; font-size: 15px; font-weight: 600; color: var(--r-sub); }
.loc-panel__tag + .loc-panel__ttl { margin-top: 10px; }
.loc-panel__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: stretch; }
.loc-panel__img { border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--r-soft); }
/* 사진 · 지도 높이를 오른쪽 글 높이에 맞춤 */
.loc-panel__top > .loc-panel__img { position: relative; aspect-ratio: auto; min-height: 360px; }
.loc-panel__top > .loc-panel__img > img,
.loc-panel__top > .loc-panel__img > iframe { position: absolute; inset: 0; }
.loc-panel__body { display: flex; flex-direction: column; justify-content: center; }
.loc-panel__img img { width: 100%; height: 100%; object-fit: cover; }
/* 사진이 없는 사무소는 사진 자리에 지도 */
.loc-panel__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.loc-panel__img--none { display: grid; place-items: center; }
.loc-panel__img--none em { font-size: 96px; font-style: normal; color: #cfd8d2; }
.loc-panel__ttl { font-size: 40px; font-weight: 700; color: var(--r-ink); }
.loc-rows { margin-top: 28px; border-top: 1px solid var(--r-ink); list-style: none; }
.loc-rows li { display: grid; grid-template-columns: 30px 84px minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 24px 0; border-bottom: 1px solid var(--r-line); font-size: 21px; line-height: 1.55; }
.loc-rows li:last-child { border-bottom: 0; }   /* 마지막 줄은 선 없이 */
.loc-rows em { font-size: 28px; font-style: normal; color: var(--r-g); }
.loc-rows b { font-weight: 700; color: var(--r-ink); }
.loc-rows span { font-weight: 500; color: var(--r-txt); word-break: keep-all; }
@media (max-width: 1024px) {
  .loc-body .r-hero { margin-top: 24px; }
  .loc-body .r-sec:first-of-type { padding-top: 56px; }
  .loc-panel + .loc-panel { margin-top: 64px; }
  .loc-panel__tag { font-size: 15px; }
  .loc-panel__tag small { font-size: 13px; }
  .loc-panel__top { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .loc-panel__img { border-radius: 16px; }
  .loc-panel__top > .loc-panel__img { aspect-ratio: 16 / 10; min-height: 0; }
  .loc-panel .loc-maps { margin-top: 24px; }
  .loc-panel .loc-maplink { height: 40px; padding: 0 16px; font-size: 14px; }
  .loc-panel__img--none { display: none; }
  .loc-panel__ttl { font-size: 24px; }
  .loc-rows li { grid-template-columns: 22px 48px minmax(0, 1fr); padding: 14px 0; font-size: 15px; }
  .loc-rows em { font-size: 20px; }
}

/* 대표 사진 — 주요 연혁 시대 배너와 같은 높이 */
.loc-body .r-hero__img { aspect-ratio: auto; height: 300px; }
@media (max-width: 1024px) { .loc-body .r-hero__img { height: 180px; } }
