/* ===========================================================================
   글로벌 네트워크 (contents/company/network.html) 페이지 전용 스타일
   시안: "MEW 홈페이지 글로볼 네트워크 시안.pdf"
   데이터는 pages/network.js가 salesServiceCenter API로 렌더하고, 우측 지도는
   국가 블록마다가 아니라 페이지에 하나만 두어(.network-cols가 페이지 레벨)
   필터 결과 전체의 마커를 표시한다.
   토큰은 tokens.css, 공통 부품(.section-title/.section-lede/.news-search/
   .news-empty)은 styles.css 를 그대로 쓴다. 여기는 .network-* 만 정의한다.
   =========================================================================== */

/* ---------- 리드(골드 세로바 제목) + 검색 ---------- */
.page-network .page-body {
  padding-bottom: clamp(6rem, 8vw, 10rem);
}

.network-lede {
  margin-top: 5.2rem;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem;
  flex-wrap: wrap;
}
.network-lede .section-lede { margin-bottom: 0; }

/* ---------- 1차 필터: 시안형 권역 탭 ---------- */
.network-regions {
  --network-tab-line-w: 2px;
  margin-top: 4.2rem;
  display: flex; align-items: stretch;
  border: 0;
  box-shadow: none;
}
.network-regions button {
  flex: 1; min-width: 0;
  min-height: 5.2rem; padding: 1rem .7rem;
  margin-bottom: 0;
  border: 0;
  border-bottom: var(--network-tab-line-w) solid #9c948a;
  font-family: var(--font-en); font-size: 1.15rem; line-height: 1.25;
  color: #777; text-align: center;
  transition: background-color .18s, border-color .18s, color .18s;
}
.network-regions button:hover,
.network-regions button:focus-visible {
  border-bottom-color: var(--color-gold);
  background: #f2e9de;
  color: #4a4038;
}
.network-regions button[aria-pressed="true"] {
  border-bottom: var(--network-tab-line-w) solid var(--color-gold);
  background: #f2e9de;
  color: #222; font-weight: 700;
}

/* ---------- 2차 필터: 네트워크 구분 ---------- */
.network-filters {
  margin-top: 2.4rem;
  padding: 2.2rem 3rem;
  border: 1px solid #e1e3e5;
  background: #fafafa;
}
.network-filter {
  display: grid; grid-template-columns: 8.4rem minmax(0, 1fr);
  gap: 2rem; align-items: start;
}
.network-filter + .network-filter {
  margin-top: 2.2rem; padding-top: 2.2rem;
  border-top: 1px solid #e2e4e6;
}
.network-filter__label {
  padding-top: .9rem;
  font-size: 1.4rem; color: #222;
}
.network-types { display: flex; flex-wrap: wrap; gap: .8rem; }
.network-types button {
  min-height: 3.8rem; padding: .7rem 1.4rem;
  border: 1px solid #d7dade; border-radius: 999px;
  background: #fff;
  font-size: 1.3rem; line-height: 1.25; color: #62676d;
  transition: border-color .2s, background-color .2s, color .2s;
}
/* 데스크톱 구분 버튼은 CI 다운로드 버튼처럼 좌우 여백을 넉넉히 준다. */
.network-types button {
  min-width: 8rem;
  padding-right: 2.4rem;
  padding-left: 2.4rem;
}
.network-types button:hover,
.network-types button:focus-visible {
  border-color: var(--color-gold); color: #222;
}
.network-types button[aria-pressed="true"] {
  border-color: var(--color-gold); background: #f7f2eb; color: #222; font-weight: 600;
}

/* ---------- 결과 카운트 + 초기화 ---------- */
.network-results-head {
  margin-top: 4rem;
  display: flex; justify-content: space-between; align-items: center; gap: 2rem;
}
.network-count { margin: 0; font-size: 1.5rem; color: #333; }
.network-count b { font-weight: 700; }
.network-reset {
  padding-bottom: .25rem;
  border-bottom: 1px solid #8b9095;
  font-size: 1.25rem; color: #686d72;
}

/* ---------- 페이지 2컬럼: (국가 블록 목록 | 지도) ---------- */
.network-cols {
  --network-panel-h: clamp(48rem, 62vh, 68rem);
  margin-top: 1.6rem;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 5rem; align-items: start;
}
.network-list {
  min-width: 0;
  height: var(--network-panel-h);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #b7bbc0 #f0f1f2;
  border: 1px solid #dfe2e4;
  background: #fff;
}
.network-list::-webkit-scrollbar { width: .7rem; }
.network-list::-webkit-scrollbar-track { background: #f0f1f2; }
.network-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #b7bbc0;
}

/* ---------- 시안형 3열 결과 목록: 명칭 | 주소 | 연락처 ---------- */
.network-rows {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.network-row {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(8.5rem, 24fr) minmax(0, 54fr) minmax(12rem, 22fr);
  gap: 1.6rem;
  align-items: center;
  min-height: 6.2rem;
  padding: 1.3rem 1.8rem;
  border-bottom: 1px dotted #cfd2d5;
  font-size: 1.25rem; line-height: 1.45;
  cursor: pointer;
  transition: background-color .25s, box-shadow .25s;
}
.network-row[hidden] { display: none; }
.network-row:first-child { border-top: 1px dotted #cfd2d5; }
.network-row:hover { background: #fcfaf7; }
.network-row:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: -2px;
}
.network-row.is-selected {
  background: #f8f3ec;
}
/* 지도 마커 클릭으로 위치를 찾은 행 — 잠깐 샌드 배경으로 표시 */
.network-row.is-located { background: #f7f3ec; }
.network-row__name {
  min-width: 0;
  font-size: 1.3rem; font-weight: 700; color: #3b3b3b;
  overflow-wrap: anywhere;
}
.network-row__address {
  min-width: 0;
  margin: 0;
  font-style: normal; color: #606469; font-weight: 300;
  overflow-wrap: anywhere;
}
.network-row__tel {
  color: #555; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ---------- 지도 — 로드 전/실패 시 placeholder, 성공 시 .is-live ---------- */
.network-map {
  /* sticky는 containing block 역할도 하므로 내부 absolute(핀·노트) 기준이 된다 */
  position: sticky; top: calc(var(--header-h) + 2.4rem);
  height: var(--network-panel-h);
  border: 1px solid #e3e6e9;
  background:
    repeating-linear-gradient(0deg,   transparent 0 4.6rem, #e6eaee 4.6rem calc(4.6rem + 1px)),
    repeating-linear-gradient(90deg,  transparent 0 5.8rem, #e6eaee 5.8rem calc(5.8rem + 1px)),
    linear-gradient(115deg, #f2f4f6 0 58%, #e9eef2 58% 63%, #f2f4f6 63% 100%);
}
.network-map svg {
  position: absolute; top: 50%; left: 50%;
  width: 3rem; height: 4rem;
  transform: translate(-50%, -92%);
  color: var(--color-gold);
}
.network-map__note {
  position: absolute; left: 1.2rem; bottom: 1.2rem;
  padding: .5rem 1rem;
  background: rgba(255, 255, 255, .88);
  font-size: 1.15rem; color: #8d949b; letter-spacing: .02em;
}
.network-map__canvas { position: absolute; inset: 0; }
.network-map-info {
  max-width: 24rem;
  padding: 0 .1rem .2rem;
  color: #222;
}
.network-map-info__title {
  display: block;
  font-size: 1.4rem;
  line-height: 1.35;
  color: #222;
}
.network-map-info span {
  display: block;
  font-size: 1.15rem;
  line-height: 1.5;
  color: #656a70;
}
.network-map.is-live { background: none; }
.network-map.is-live > svg,
.network-map.is-live .network-map__note { display: none; }

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
  .network-regions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .network-regions button {
    width: 100%;
    min-width: 0;
  }
  .network-cols {
    --network-panel-h: clamp(44rem, 58vh, 58rem);
    grid-template-columns: 1fr; gap: 3.6rem;
  }
  /* sticky 해제 — 내부 absolute(핀·노트) 기준은 유지해야 하므로 static이 아닌 relative */
  .network-map { position: relative; top: auto; }
}
@media (max-width: 768px) {
  .network-filters { padding: 2.2rem 2rem; }
  .network-filter { grid-template-columns: 1fr; gap: 1rem; }
  .network-filter__label { padding-top: 0; }
}
@media (max-width: 640px) {
  .network-cols { --network-panel-h: clamp(40rem, 55vh, 50rem); }
  .network-lede .news-search { width: 100%; }
  .network-lede .news-search input { flex: 1; min-width: 0; }
  .network-filters {
    margin-right: 0; margin-left: 0;
    padding: 2rem 0;
    border: 0;
    background: #fff;
  }
  .network-filter + .network-filter {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top-color: #e7e8ea;
  }
  .network-regions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .network-regions button { min-height: 4.8rem; }
  .network-regions button:first-child { grid-column: 1 / -1; }
  .network-types {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
    overflow: visible;
  }
  .network-types button {
    width: 100%;
    min-width: 0;
    min-height: 3.8rem;
    padding-right: .8rem;
    padding-left: .8rem;
  }
  .network-list { padding: 0; }
  .network-rows { width: 100%; }
  .network-row {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 45%);
    grid-template-areas:
      "name tel"
      "address address";
    gap: .55rem 1.2rem;
    min-height: 0;
    padding: 1.6rem 1.2rem;
  }
  .network-row__name { grid-area: name; font-size: 1.4rem; }
  .network-row__address { grid-area: address; }
  .network-row__tel { grid-area: tel; align-self: start; text-align: right; }
}