/* site/pages/partner-school.css — 한국어 채택교 현황 화면 전용
   색·간격·글자·라운드·그림자는 토큰만 쓴다. 디자인 시스템 카드 components/school-card.html의 학교 카드(.school-card)·뷰 전환 토글·
   좌측 패널·학교 목록·4열 격자를 가져와 이 화면에 맞췄다 — 학교 카드에서 시안의 「자세히 보기」 줄은 학교별 상세 화면이 없어 뺐고,
   시안의 번호 배지와 핀 5색은 걷어 지도 핀을 협업대학 지도와 같은 기본 마커로 둔다. 지도 자체의 높이·테두리는 map.css가 갖고 여기서는 놓임만 정한다. */

/* ── 탭(뷰 전환 토글) ── */
.ps-tabs { display: inline-flex; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.ps-tab {
  height: 40px; padding: 0 var(--sp-5);
  border: var(--bd); border-radius: var(--r-md); background: var(--c-white);
  font-family: inherit; font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--c-text);
  cursor: pointer;
}
.ps-tab.is-active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.ps-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ── 지도 탭 — 왼쪽 학교 목록 + 오른쪽 지도 ── */
.ps-map-view { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.ps-map-view[hidden], .ps-grid-view[hidden] { display: none; }
.ps-aside { min-width: 0; }
.ps-side {
  border: var(--bd); border-radius: var(--r-xl); background: var(--c-white);
  padding: var(--sp-3) var(--sp-6);
  max-height: 560px; overflow-y: auto;
}
.ps-list { list-style: none; margin: 0; padding: 0; }
.ps-list li + li { border-top: var(--bd-soft); }
.ps-list__item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-3) 0; border: 0; background: none;
  font-family: inherit; font-size: var(--fs-15); color: var(--c-text); text-align: left;
  cursor: pointer;
}
.ps-list__item:hover .ps-list__name, .ps-list__item[aria-current="true"] .ps-list__name { color: var(--c-primary); font-weight: var(--fw-semibold); }
.ps-list__item:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-sm); }
.ps-list__name { flex: 1; min-width: 0; line-height: var(--lh-snug); word-break: keep-all; }
.ps-list__chev { color: var(--c-text-cap); flex-shrink: 0; }
.ps-empty { margin: 0; padding: var(--sp-6) 0; font-size: var(--fs-15); color: var(--c-text-mute); text-align: center; }

/* ── 지도와 정보 패널 ── */
.ps-map-wrap { position: relative; }
.ps-map-wrap .map { aspect-ratio: 4 / 3; border-radius: var(--r-xl); }
.ps-panel {
  position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: var(--z-raised);
  width: 300px; max-width: calc(100% - var(--sp-8));
}
.ps-panel[hidden] { display: none; }
.ps-panel .school-card { border: none; box-shadow: var(--shadow-lg); padding-right: var(--sp-10); }
.ps-panel__close {
  position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 1;
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 0; border-radius: var(--r-full); background: none; color: var(--c-text-mute); cursor: pointer;
}
.ps-panel__close:hover { background: var(--c-surface-mute); color: var(--c-text); }
.ps-panel__close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* 지도 핀 — 모양·커서·초점은 협업대학 지도와 같은 기본 마커(map.css의 .map-marker)다.
   카드는 마우스를 올리거나 초점이 오면 핀 위(가장자리 가까이면 아래)에 뜬다 */
.ps-pin:hover, .ps-pin:focus-within { z-index: var(--z-raised); }
.ps-pin__card {
  display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  width: 260px; padding-bottom: var(--sp-2);
  color: var(--c-text); font-weight: var(--fw-regular); text-align: left; cursor: default;
}
.ps-pin.is-card-below .ps-pin__card { bottom: auto; top: 100%; padding-bottom: 0; padding-top: var(--sp-2); }
.ps-pin:hover .ps-pin__card, .ps-pin:focus-within .ps-pin__card { display: block; }
.ps-pin__card .school-card { border: none; box-shadow: var(--shadow-lg); padding: var(--sp-5); }

/* ── 학교 카드 — 채택교 목록 탭의 격자·정보 패널·핀 카드가 같은 카드다 ── */
.school-card { background: var(--c-white); border: var(--bd); border-radius: var(--r-lg); padding: var(--sp-6); }
.school-card__head {
  display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding-bottom: var(--sp-4);
  border-bottom: var(--bd-soft);
  font-size: var(--fs-18); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--c-text); word-break: keep-all;
}
.school-card__head svg { color: var(--c-primary); flex-shrink: 0; }
.school-card__head a { color: inherit; text-decoration: none; }
.school-card__head a:hover { color: var(--c-primary); text-decoration: underline; }
.school-card__logo { display: flex; align-items: center; height: 44px; margin-bottom: var(--sp-4); }
.school-card__logo img { max-width: 100%; max-height: 44px; object-fit: contain; }
.school-card__rows { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; }
.school-card__row { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-14); line-height: var(--lh-snug); color: var(--c-text-soft); }
.school-card__row dt { display: flex; align-items: center; height: calc(var(--fs-14) * var(--lh-snug)); color: var(--c-text-cap); }
.school-card__row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.school-card__row a { color: var(--c-accent); text-decoration: none; }
.school-card__row a:hover { text-decoration: underline; }

/* ── 채택교 목록 탭 — 카드 4열 격자 ── */
.ps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }

@media (max-width: 1100px) {
  .ps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .ps-map-view { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .ps-side { max-height: 320px; }
  .ps-map-wrap { order: -1; }
  .ps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 좁은 폭 — 정보 패널은 지도를 가리지 않게 지도 아래로 내려온다 */
@media (max-width: 767px) {
  .ps-tabs { display: flex; }
  .ps-tab { flex: 1; }
  .ps-panel { position: static; width: auto; max-width: none; margin-top: var(--sp-3); }
  .ps-panel .school-card { box-shadow: none; border: var(--bd); }
  .ps-grid { grid-template-columns: minmax(0, 1fr); }
}