@charset "utf-8";
/* 교육청 목록(/school-district/bc · /school-district/on) 모바일 전용 재배치 — 사이클 10 (mobile 프로젝트)
   확정 목업 「가안」: 짧은 상단 · 검색창 · 정렬 알약 3칸 · 지역 칩 가로 밀기 · 구간 머리 · 사진 행 목록 · 처음 8곳 + 「전체 N개 교육청 보기」.
   폭 767px 이하에서만 적용 — PC·태블릿(768px~)은 style.css · district-compare.css 그대로. 마크업·링크·정렬/검색 동작 무변경.
   감추는 것은 화면에서만 가리는 5종: 지역 배지 · 구분점 · 홈스테이/IGE 상담 줄 · 사진 위 주 표시 · "지역" 라벨 (DOM·글자는 그대로).
   카드는 district-compare.js 가 style="display:flex;gap:14px" 로 그리고 listing-search.js 가 display 를 ''/none 으로 바꾸므로
   줄 모양은 display 를 스스로 지정하고, 접힌 줄(.mc-over)만 !important 로 가린다. 접기 동작은 index.php 의 <script id="mc-fold">.
   모든 규칙은 .district-list-wrap(이 화면에만 붙는 래퍼)으로 시작한다. */
@media (max-width: 767px) {

  .district-list-wrap {
    --mdl-teal: #0b4f54; --mdl-teal2: #0e6a70; --mdl-ink: #13232b; --mdl-sub: #5d6c73; --mdl-line: #e3e9ea;
    --mdl-bg: #f4f8f7; --mdl-mint: #e4f1f0; --mdl-yel: #ffd24a;
    background: var(--mdl-bg); word-break: keep-all;
  }

  /* ── 소개 상단: 작은 영문 머리글, 제목, 소개 첫 문단 2줄, 「더보기」(열면 전부) ── */
  .district-list-wrap .district-list-top .district-list-top-inner {
    box-sizing: border-box; display: block; max-width: none; margin: 0; gap: 0; padding: 13px 16px 12px;
    background: linear-gradient(rgba(10, 35, 65, .58), rgba(10, 35, 65, .88));
  }
  .district-list-wrap.on .district-list-top .district-list-top-inner {
    background: linear-gradient(rgba(99, 33, 33, .58), rgba(99, 33, 33, .88));
  }
  .district-list-wrap .district-list-top .district-list-top-inner h3,
  .district-list-wrap.on .district-list-top .district-list-top-inner h3 {
    margin: 0; font-size: 11.5px; line-height: 1.3; font-weight: 700; letter-spacing: .14em; color: #a9c4e8; text-shadow: none;
  }
  .district-list-wrap.on .district-list-top .district-list-top-inner h3 { color: #f0c4be; }
  .district-list-wrap .district-list-top .district-list-top-inner h3:before,
  .district-list-wrap .district-list-top .district-list-top-inner h3.on:before { content: none; }
  .district-list-wrap .district-list-top .district-list-top-inner .district-list-top-info,
  .district-list-wrap.on .district-list-top .district-list-top-inner .district-list-top-info {
    width: auto; padding: 0; gap: 0; background: none; position: static;
  }
  .district-list-wrap .district-list-top .district-list-top-inner .district-list-top-info .district-list-top-info-title { display: block; }
  .district-list-wrap .district-list-top .district-list-top-inner .district-list-top-info .district-list-top-info-title h4 {
    margin: 3px 0 4px; font-size: 16px; line-height: 1.3; font-weight: 800; letter-spacing: -.02em; color: #fff;
  }
  .district-list-wrap .district-list-top .district-list-top-inner .district-list-top-info .district-list-top-info-desc {
    display: block; overflow: visible; font-size: 12px; line-height: 1.5; color: #dce8f3;
  }
  .district-list-wrap.on .district-list-top .district-list-top-inner .district-list-top-info .district-list-top-info-desc { color: #f6e3e0; }
  .district-list-wrap .district-list-top .district-list-top-inner .district-list-top-info .district-list-top-info-desc p { margin: 0; }
  .district-list-wrap .district-list-top .district-list-top-inner .district-list-top-info .district-list-top-info-desc p:first-child {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .district-list-wrap .district-list-top .district-list-top-inner .district-list-top-info .district-list-top-info-desc p:not(:first-child) { display: none; }
  .district-list-wrap .district-list-top .district-list-top-inner .district-list-top-info .district-list-top-info-desc.on p:first-child { display: block; overflow: visible; }
  .district-list-wrap .district-list-top .district-list-top-inner .district-list-top-info .district-list-top-info-desc.on p:not(:first-child) {
    display: block; margin-top: 8px; font-size: 11.5px; line-height: 1.65;
  }
  .district-list-wrap .district-list-top .district-list-top-inner .district-list-top-info .desc-more-btn,
  .district-list-wrap.on .district-list-top .district-list-top-inner .district-list-top-info .desc-more-btn {
    display: inline-block; position: static; width: auto; margin-top: 5px; padding: 3px 0; background: none;
    font-size: 12px; font-weight: 800; color: var(--mdl-yel); border: 0;
  }

  /* ── 검색창: 높이 40, 돋보기는 CSS 배경(새 이미지 요청 없음), 자동완성 드롭다운이 잘리지 않게 감싸개에 overflow 를 걸지 않음 ── */
  .district-list-wrap .uc-section { box-sizing: border-box; max-width: none; margin: 0; padding: 10px 14px 0; }
  .district-list-wrap .uc-search { margin: 0; }
  .district-list-wrap .uc-search .ige-listing-search-input.uc-search-input {
    box-sizing: border-box; width: 100%; height: 40px; padding: 0 12px 0 38px; font-size: 13px; color: var(--mdl-ink);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6c73' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center / 17px 17px;
    border: 1px solid var(--mdl-line); border-radius: 12px; box-shadow: none;
  }

  /* ── 정렬 알약 3칸 · 지역 칩(가로로 밀어 5개 모두 닿음) ── */
  .district-list-wrap .uc-filters { margin: 8px 0 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .district-list-wrap .uc-filters .uc-sort-tabs { gap: 0; padding: 3px; background: #e6eeed; border-radius: 999px; }
  .district-list-wrap .uc-filters .uc-sort-tabs .uc-sort-tab {
    box-sizing: border-box; height: 34px; padding: 0 4px; font-size: 12.5px; font-weight: 700; color: var(--mdl-sub); white-space: nowrap; border-radius: 999px;
  }
  .district-list-wrap .uc-filters .uc-sort-tabs .uc-sort-tab.on { color: var(--mdl-teal); background: #fff; box-shadow: 0 1px 4px rgba(11, 79, 84, .18); }
  .district-list-wrap .uc-filters .uc-filter-label { display: none; }
  .district-list-wrap .uc-filters .uc-region-chips {
    flex-wrap: nowrap; gap: 6px; margin: 8px -14px 0; padding: 0 14px 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .district-list-wrap .uc-filters .uc-region-chips::-webkit-scrollbar { display: none; }
  .district-list-wrap .uc-filters .uc-region-chips .dc-chip--region {
    box-sizing: border-box; flex: 0 0 auto; height: 34px; padding: 0 13px; font-size: 12.5px; font-weight: 700; color: var(--mdl-sub); white-space: nowrap;
    background: #fff; border: 1px solid var(--mdl-line); border-radius: 999px;
  }
  .district-list-wrap .uc-filters .uc-region-chips .dc-chip--region.on { color: #fff; background: var(--mdl-teal); border-color: var(--mdl-teal); }
  .district-list-wrap .uc-filters .uc-region-chips .dc-chip--region.on .check { stroke: #fff; }

  /* ── 구간 머리: 「BC주 교육청」 + 개수 알약 ── */
  .district-list-wrap .dc-sec-head { margin: 0; padding: 12px 2px 7px; }
  .district-list-wrap .dc-sec-head .dc-sec-title { font-size: 16px; font-weight: 800; color: var(--mdl-ink); }
  .district-list-wrap .dc-sec-head .dc-sec-meta {
    padding: 2px 9px; font-size: 12px; font-weight: 800; color: var(--mdl-teal2); background: var(--mdl-mint); border-radius: 999px;
  }

  /* ── 목록 상자: 보이는 줄 사이에만 1px 구분선(숨은 줄은 칸을 차지하지 않는다) ── */
  .district-list-wrap #uc-cards { grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0; background: var(--mdl-line); border-radius: 16px; overflow: hidden; }
  .district-list-wrap #uc-cards:has(> a.dc-card:not([style*="none"])),
  .district-list-wrap #uc-cards:has(> .dc-loading),
  .district-list-wrap #uc-cards:has(> .dc-empty) { box-shadow: 0 0 0 1px var(--mdl-line); }
  .district-list-wrap #uc-cards .dc-loading,
  .district-list-wrap #uc-cards .dc-empty { padding: 26px 10px; background: #fff; }

  /* ── 교육청 줄: 사진 52 · 이름(필요하면 두 줄) · 소개 한 줄 · 오른쪽 학교 수 + 학비 ── */
  .district-list-wrap #uc-cards a.dc-card {
    box-sizing: border-box; display: flex; align-items: center; margin: 0; padding: 10px 12px; min-height: 72px;
    background: #fff; border: 0; border-radius: 0; box-shadow: none; transform: none;
  }
  .district-list-wrap #uc-cards a.dc-card:hover,
  .district-list-wrap #uc-cards a.dc-card:active { box-shadow: none; transform: none; }
  .district-list-wrap #uc-cards a.dc-card.ige-listing-search-highlight { outline-offset: -2px; }
  .district-list-wrap #uc-cards a.dc-card.mc-over { display: none !important; }
  .district-list-wrap #uc-cards a.dc-card .uc-thumb {
    box-sizing: border-box; flex: 0 0 52px; width: 52px !important; height: 52px !important; background: #e1ebea; border-radius: 12px;
  }
  .district-list-wrap #uc-cards a.dc-card .uc-thumb .uc-prov { display: none; }
  .district-list-wrap #uc-cards a.dc-card .uc-thumb .uc-initials {
    font-family: inherit; font-size: 14px; font-weight: 800; color: var(--mdl-teal); background: #cfe0de;
  }
  .district-list-wrap #uc-cards a.dc-card .dc-card-body {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px; align-items: center; flex: 1 1 auto; min-width: 0;
  }
  .district-list-wrap #uc-cards a.dc-card .dc-card-head { grid-column: 1; grid-row: 1; gap: 0 6px; }
  .district-list-wrap #uc-cards a.dc-card .dc-card-name {
    font-size: 15px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; color: var(--mdl-ink);
  }
  .district-list-wrap #uc-cards a.dc-card .dc-card-name-kr { font-size: 11.5px; font-weight: 500; color: var(--mdl-sub); }
  .district-list-wrap #uc-cards a.dc-card .dc-badge-row { display: contents; }
  .district-list-wrap #uc-cards a.dc-card .dc-badge-sep,
  .district-list-wrap #uc-cards a.dc-card .dc-badge--region,
  .district-list-wrap #uc-cards a.dc-card .dc-meta-row { display: none; }
  .district-list-wrap #uc-cards a.dc-card .dc-badge--schools {
    grid-column: 2; grid-row: 1; justify-self: end; padding: 3px 9px; font-size: 12px; font-weight: 800; color: var(--mdl-teal2);
    background: var(--mdl-mint); border-radius: 999px;
  }
  .district-list-wrap #uc-cards a.dc-card .dc-badge--schools .val { font-family: inherit; font-weight: 800; color: inherit; }
  .district-list-wrap #uc-cards a.dc-card .dc-badge--tuition {
    grid-column: 2; grid-row: 2; justify-self: end; font-family: inherit; font-size: 11px; font-weight: 700; color: var(--mdl-sub);
  }
  .district-list-wrap #uc-cards a.dc-card .dc-badge--tuition .unit { font-size: 11px; color: inherit; font-weight: 500; }
  .district-list-wrap #uc-cards a.dc-card .dc-card-desc {
    grid-column: 1; grid-row: 2; display: block; margin: 0; font-size: 12px; line-height: 1.4; color: var(--mdl-sub);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset;
  }
  /* 소개가 없는 교육청: 목업처럼 지역 이름을 소개 자리에 보인다(:has 미지원 기기는 이름·학교 수·학비만) */
  .district-list-wrap #uc-cards a.dc-card .dc-card-body:not(:has(.dc-card-desc)) .dc-badge--region {
    display: inline-flex; grid-column: 1; grid-row: 2; justify-self: start; padding: 0; font-size: 12px; font-weight: 500;
    color: var(--mdl-sub); background: none; border-radius: 0;
  }

  /* ── 처음 8곳 아래 「전체 N개 교육청 보기」(index.php 의 <script id="mc-fold"> 가 넣고 숨기고 보인다) ── */
  .district-list-wrap .mc-more {
    box-sizing: border-box; display: block; width: 100%; height: 46px; margin: 10px 0 0; padding: 0 12px; font-size: 13.5px; font-weight: 800; color: var(--mdl-teal2);
    background: #fff; border: 1px solid var(--mdl-line); border-radius: 14px;
  }
  .district-list-wrap .mc-more[hidden] { display: none; }
}