/*
 * mobile2 헬스리스트 의료시설 — 휴대폰(≤767px) 전용 모양
 * 승인 목업: docs/projects/mobile2/mockups/03-healthlist.html (sha256 3134137c…aca8)
 *
 * 범위 규칙
 *  - 모든 규칙은 .hl2(healthcare.php 가 여는 래퍼) 안에서만 맞는다.
 *  - 래퍼 밖(공통 상단·하단·theme CSS)은 건드리지 않는다.
 *  - 이 파일에서 @media 밖에 두는 규칙은 아래 두 줄뿐이다(PC 모양을 바꾸지 않는다).
 *  - 휴대폰 규칙은 전부 @media (max-width:767px) 안에 있다. 768 이상은 변경 전과 같다.
 *  - 예외 하나: 폭 767.02~768px 구간의 머리 영역 좌우 여백(파일 맨 끝). 공통 CSS 가 768 이하에서 .container 여백을 0 으로 만들어 머리 글자가 가장자리에 붙는 것을, 이 화면 머리 영역에서만 휴대폰과 같은 16px 로 되돌린다. 769 이상은 변경 전과 같다.
 */
.hl2{display:contents}
.hl2 .hl2-only{display:none}

@media (max-width:767px){
/* ---- 래퍼 · 토큰 ---- */
/* 사이트 공통 CSS(res.css, 폭 860 이하)가 html·body 에 overflow-x:hidden 을 걸어 body 가 스크롤 상자가 되면 sticky 종류 막대가 화면에 붙지 못한다.
   이 화면(.hl2 가 있는 페이지)에서만 body 를 clip 으로 바꾼다 — 가로 넘침은 똑같이 잘리고 스크롤 상자만 아니게 된다.
   theme/ige_2025/skin/board/mt_story/mobile-board.css:95-96 의 확인된 선례와 같은 처리 */
html:root body:has(.hl2){overflow-x:clip}
.hl2{display:block;background:var(--mist);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;
 --ink:#13232b;--sub:#5d6c73;--teal:#0b4f54;--teal2:#0e6a70;--mist:#f4f8f7;--line:#e3e9ea;--mint:#e4f1f0;--yolk:#ffd24a;
 --prov:#1f5f9e;--prov-deep:#0b3a52;--prov-tint:#e6eff8}
.hl2[data-prov=on]{--prov:#2f7d46;--prov-deep:#0b4a2e;--prov-tint:#e7f2ea}

/* ---- 헤더 ---- */
.hl2 .health-header{position:relative;padding:12px 0 14px;background:linear-gradient(135deg,var(--prov-deep) 0%,var(--teal) 100%);box-shadow:none;color:#fff}
.hl2 .health-header .container{max-width:none !important;margin:0;padding:0 16px !important}
.hl2 .health-header .back-district{margin:0}
.hl2 .health-header .back-district a{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 9px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-size:12px;font-weight:700;line-height:1;text-decoration:none}
.hl2 .health-header .back-district a:hover{background:rgba(255,255,255,.08);color:#fff;transition:none}
.hl2 .health-header .back-district a::before{content:"";width:6px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);margin-left:3px}
.hl2 .health-header .hl2-pill{display:block;position:absolute;right:16px;top:19px;padding:2px 9px;border-radius:7px;background:var(--yolk);color:#2b2200;font-size:12px;font-weight:800;line-height:1.5}
.hl2 .health-header h1{display:block;margin:10px 0 2px;font-size:19px;line-height:1.3;letter-spacing:-.02em;font-weight:800;word-break:keep-all;overflow-wrap:anywhere}
.hl2 .health-header h1>span:first-child{display:none}
.hl2 .health-header p{margin:0;font-size:12.5px;line-height:1.5;color:#cfe3e2;opacity:1;word-break:keep-all}

/* ---- 종류 막대(위쪽 고정) ---- */
.hl2 .category-tabs{position:sticky;top:0;z-index:100;background:var(--mist);box-shadow:none;border-bottom:1px solid var(--line);transition:top .5s ease}
/* 공통 상단 검색 막대(.fixed-top-search, 높이 61, top 전환 0.5s ease)가 내려와 있는 동안 아래로 비킨다 */
:root:has(.fixed-top-search.on) .hl2 .category-tabs{top:61px}
.hl2 .category-tabs>.container{max-width:none !important;margin:0;padding:10px 12px !important}
.hl2 .tabs-container{position:relative;scrollbar-width:none}
.hl2 .tabs-container::-webkit-scrollbar{display:none}
.hl2 .tabs-container .tab{display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);font-family:inherit;font-size:12.5px;font-weight:700;line-height:1.15;white-space:nowrap;transition:none}
.hl2 .tabs-container .tab:hover{background:#fff;color:var(--ink)}
.hl2 .tabs-container .tab span{margin:0;padding:1px 6px;border-radius:7px;background:var(--mint);color:var(--teal);font-size:12px;font-weight:700;text-align:center;min-width:20px}
.hl2 .tabs-container .tab .upcc-info{display:none}
.hl2 .tabs-container .tab.active,.hl2 .tabs-container .tab.active:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.hl2 .tabs-container .tab.active span{background:var(--yolk);color:#2b2200}
.hl2 .tabs-container .tab:focus-visible{outline:2px solid var(--teal2);outline-offset:2px}
/* BC — 네 칸 균등 격자(한 줄) */
.hl2 .tabs-container:not(.hl2-edge){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.hl2 .tabs-container:not(.hl2-edge) .tab{flex-direction:column;gap:0;min-width:0;height:50px;padding:0 4px}
.hl2 .tabs-container:not(.hl2-edge) .tab span{margin-top:2px}
/* ON — 가로로 넘기는 한 줄, 오른쪽을 흐리게(더 있음을 보임). 인라인 스타일이 .css() 로 들어와 !important 로 덧씌운다 */
.hl2 .tabs-container.hl2-edge{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto !important;overflow-y:hidden !important;gap:8px;padding-right:30px;-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
.hl2 .tabs-container.hl2-edge .tab{flex-direction:row;flex:0 0 auto !important;width:auto !important;min-width:0 !important;height:38px;padding:0 11px !important;gap:6px;font-size:13px}

/* ---- 교육청 · 도시 선택 ---- */
.hl2 .filters-section{max-width:none;margin:0;padding:10px 12px 0;border-radius:0;background:transparent;box-shadow:none}
.hl2 .filters-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0}
.hl2 .filter-group{display:block;position:relative;min-width:0}
.hl2 .filter-label{display:block;margin:0 0 3px 2px;color:var(--sub);font-size:12px;font-weight:700}
.hl2 .filter-select{display:block;width:100%;min-width:0;height:42px;padding:0 34px 0 12px;border:1px solid var(--line);border-radius:11px;color:var(--ink);font-size:14px;text-overflow:ellipsis;transition:none;-webkit-appearance:none;appearance:none;
 background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%235d6c73' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center/12px 12px}
.hl2 .filter-select:focus{outline:none;border-color:var(--teal2);box-shadow:0 0 0 2px rgba(14,106,112,.18)}

/* ---- 결과 개수 ---- */
.hl2 .results-section{max-width:none;margin:0;padding:0}
.hl2 .results-header{display:flex;align-items:baseline;justify-content:space-between;gap:0;margin:0;padding:14px 16px 0}
.hl2 .results-count{color:var(--sub);font-size:13px}
.hl2 .results-count strong{color:var(--ink);font-size:14.5px}

/* ---- 의료시설 카드(줄 목록) ---- */
.hl2 #facilityList.facility-list{margin:10px 12px 14px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:none;overflow:hidden}
.hl2 #facilityList .facility-item{position:relative;border-top:1px solid var(--line);border-bottom:0;transition:none}
.hl2 #facilityList .facility-item:first-child{border-top:0}
.hl2 #facilityList .facility-item::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:4px;border-radius:0 4px 4px 0;background:var(--prov)}
.hl2 #facilityList .facility-header{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 5px;padding:14px 14px 12px 18px;transition:none}
.hl2 #facilityList .facility-header:hover{background:transparent}
/* 기관명은 위의 작은 줄, 이름은 큰 제목(변경 전: 기관명 글자 + 회색 상자 안 이름) */
.hl2 #facilityList .facility-header>.facility-name{flex:0 0 100%;min-width:0;margin:0;color:var(--prov);font-size:12px;font-weight:700;line-height:1.35}
.hl2 #facilityList .facility-name span{display:block;margin:0;padding:0;border-radius:0;background:none;color:var(--ink);font-size:15.5px;font-weight:800;line-height:1.35;letter-spacing:-.01em;overflow-wrap:anywhere;word-break:keep-all}
.hl2 #facilityList .facility-header>.hl2-ad{display:block;flex:0 0 100%;margin:3px 0 0;color:var(--sub);font-size:12.8px;line-height:1.45;overflow-wrap:anywhere}
.hl2 #facilityList .facility-header>.facility-badge{display:inline-block;margin:8px 0 0;padding:2px 8px;border-radius:8px;font-size:12px;font-weight:700;line-height:1.5;overflow-wrap:anywhere}
.hl2 #facilityList .facility-header>.badge-city{background:var(--prov-tint);color:var(--prov-deep)}
.hl2 #facilityList .facility-header>.badge-phone{background:#fbe9f1;color:#8a1f55}
.hl2 #facilityList .facility-header>.badge-korean{background:#fff8e1;color:#f57c00}
/* 펼침 단추: 원형 「+ / ×」 대신 「자세히 / 접기」 + 화살표 하나 */
.hl2 #facilityList .facility-header>.toggle-btn{position:static;display:flex;flex:0 0 100%;align-items:center;justify-content:flex-end;gap:6px;width:auto;height:38px;margin:10px 0 0;padding:0 4px 0 10px;border:0;border-radius:0;background:none;color:var(--teal);font-size:0;transform:none;transition:none}
.hl2 #facilityList .facility-header>.toggle-btn::before{content:"자세히";font-size:13px;font-weight:700;line-height:1}
.hl2 #facilityList .facility-header>.toggle-btn.active::before{content:"접기"}
.hl2 #facilityList .facility-header>.toggle-btn::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.hl2 #facilityList .facility-header>.toggle-btn.active::after{transform:rotate(-135deg) translate(-1px,-1px)}
.hl2 #facilityList .facility-header>.toggle-btn:hover,.hl2 #facilityList .facility-header>.toggle-btn.active,.hl2 #facilityList .facility-header>.toggle-btn.active:hover{border:0;background:none;color:var(--teal);transform:none}

/* ---- 펼침 ---- */
.hl2 #facilityList .facility-details{display:none;max-height:none;margin:0 14px 14px 18px;padding-top:12px;border-top:1px dashed #cfdadc;background:none;overflow:visible;transition:none}
.hl2 #facilityList .facility-details.open{display:block}
.hl2 #facilityList .details-content{padding:0}
.hl2 #facilityList .description-section{margin:0;padding:0;border-radius:0;background:none}
.hl2 #facilityList .description-en{margin:0 0 10px;color:#2b3b43;font-size:13px;line-height:1.6}
.hl2 #facilityList .description-kr{margin:0 0 12px;padding:9px 11px;border-left:3px solid var(--prov);border-radius:0 9px 9px 0;background:#f1f5f6;color:#2b3b43;font-size:13px;line-height:1.62}
.hl2 #facilityList .description-kr strong{color:var(--prov-deep)}
.hl2 #facilityList .details-grid{display:block;margin:0}
.hl2 #facilityList .detail-section{margin:0 0 12px;padding:0;border-radius:0;background:none}
.hl2 #facilityList .detail-section h4{display:block;margin:0 0 3px;color:var(--teal);font-size:12px;font-weight:800;line-height:1.5}
.hl2 #facilityList .detail-item{display:block;margin:0;font-size:13px}
.hl2 #facilityList .detail-item:has(>.detail-label){display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 10px;margin:0 0 5px}
.hl2 #facilityList .detail-label{min-width:0;color:var(--sub);font-weight:700}
.hl2 #facilityList .detail-value{min-width:0;color:var(--ink);overflow-wrap:anywhere}
.hl2 #facilityList .detail-value a{color:var(--teal2);overflow-wrap:anywhere;word-break:break-all}
.hl2 #facilityList .wheelchair-status{padding:1px 8px;border-radius:8px;font-size:12px;font-weight:700}
.hl2 #facilityList .wheelchair-accessible{background:var(--prov-tint);color:var(--prov-deep)}
.hl2 #facilityList .detail-item.hl2-nohttp,.hl2 #facilityList .detail-item.hl2-nohttp:has(>.detail-label){display:none}
/* 운영 시간: 요일 · 시간 두 칸, 요일 없는 안내문은 한 줄 */
.hl2 #facilityList .hl2-hours br{display:none}
.hl2 #facilityList .hl2-hl{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 8px;padding:2px 0;font-size:13px}
.hl2 #facilityList .hl2-hl .hl2-day{color:var(--sub);font-weight:700}
.hl2 #facilityList .hl2-hl.hl2-note{display:block;padding-top:4px;color:var(--sub);font-size:12.5px}
/* 구글맵 · *811 단추 */
.hl2 #facilityList .action-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.hl2 #facilityList .action-buttons .btn{height:38px;padding:0 13px;border-radius:10px;font-size:12.8px;font-weight:700;line-height:1.2;transition:none}
.hl2 #facilityList .action-buttons .btn-primary,.hl2 #facilityList .action-buttons .btn-primary:hover{background:var(--teal);color:#fff;transform:none;box-shadow:none}
.hl2 #facilityList .action-buttons .btn-secondary,.hl2 #facilityList .action-buttons .btn-secondary:hover{border:1px solid var(--teal);background:#fff;color:var(--teal);transform:none;box-shadow:none}
.hl2 #facilityList .action-buttons .btn:focus-visible{outline:2px solid var(--teal2);outline-offset:2px}

/* ---- 빈 목록 ---- */
.hl2 #facilityList.facility-list:has(.no-results){margin:0;border:0;border-radius:0;background:transparent;overflow:visible}
.hl2 .no-results{margin:12px;padding:26px 18px 22px;border:1px dashed #bccacd;border-radius:16px;background:#fff;color:var(--sub);text-align:center}
.hl2 .no-results h3{display:none}
.hl2 .no-results .hl2-empty{display:block}
.hl2 .hl2-empty b{display:block;margin-bottom:4px;color:var(--ink);font-size:15px}
.hl2 .hl2-empty p{margin:0;color:var(--sub);font-size:13px}

/* ---- 쪽 이동 ---- */
.hl2 .pagination{flex-wrap:wrap;gap:6px;margin:0;padding:2px 12px 18px}
.hl2 .pagination.hl2-hide{display:none}
.hl2 .pagination .page-btn{min-width:38px;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:13px;font-weight:700;line-height:1;transition:none}
.hl2 .pagination .page-btn.active{background:var(--teal);border-color:var(--teal);color:#fff}
.hl2 .pagination .page-btn:disabled{opacity:1;background:#f3f6f6;color:#a3aeb2;cursor:default}
.hl2 .pagination .page-btn:focus-visible{outline:2px solid var(--teal2);outline-offset:2px}

/* ---- 맨 아래 돌아가기 ---- */
.hl2 .results-section>.back-district{display:flex;align-items:center;justify-content:center;width:auto;height:auto;padding:2px 12px 22px;overflow:visible}
.hl2 .results-section>.back-district a{display:inline-flex;align-items:center;height:36px;padding:0 13px;border:1px solid var(--teal);border-radius:10px;background:#fff;color:var(--teal);font-size:13px;font-weight:700;line-height:1;text-decoration:none}
.hl2 .results-section>.back-district a:hover{background:#fff;color:var(--teal);transition:none}
.hl2 .results-section>.back-district a:focus-visible,.hl2 .health-header .back-district a:focus-visible{outline:2px solid var(--teal2);outline-offset:2px}
}

/* 종류 막대의 top 전환은 끄지 않는다 — 공통 검색 막대(공통 CSS 불변)가 동작 줄이기에서도 0.5초 움직이므로 같은 속도로 따라가야 전환 중 겹치지 않는다 */
@media (max-width:767px) and (prefers-reduced-motion:reduce){
.hl2 #facilityList .facility-header>.toggle-btn::after{transition:none}
}

/* 폭 768 구간(767.02~768): 공통 CSS(res.css 768 이하 .container{padding:0 !important})가 머리 영역 여백을 없애므로 이 화면 머리 영역만 휴대폰과 같은 16px */
@media (min-width:767.02px) and (max-width:768px){
.hl2 .health-header .container{padding:0 16px !important}
}