/* assets/style.css — 보훈 위탁병원 찾기 (공통 + 상세/FAQ/지도 고도화) */
/* =============================================================== */
/* 색상 변수 */
:root{
  --bg:#ffffff; --fg:#0f172a; --muted:#475569; --border:#e5e7eb;
  --brand:#2563eb; --brand-strong:#1d4ed8; --brand-weak:#eff6ff;
  --chip:#f1f5f9; --ok:#16a34a; --warn:#ea580c; --danger:#dc2626;
}

/* 타이포그래피 */
html,body{height:100%}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,Malgun Gothic,'Noto Sans KR',sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{margin:0 0 .6em 0; line-height:1.25}
h1{font-size:28px;font-weight:800}
h2{font-size:22px;font-weight:800}
h3{font-size:18px;font-weight:700}
h4{font-size:16px;font-weight:700}
p{margin:0 0 1em 0}
small,.muted{color:var(--muted)}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* 레이아웃 */
.container{max-width:1080px; margin:0 auto; padding:0 16px}
.section{padding:16px 0}
.wrap{max-width:1080px}
.pt-0{padding-top:0!important}
.grid{display:grid; gap:12px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* 두열 상세 */
.detail-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:12px}

/* 카드 */
.card{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.card:hover{box-shadow:0 4px 16px rgba(0,0,0,.04)}
.card.elevated{box-shadow:0 8px 28px rgba(2,6,23,.06)}
.rounded-xl{border-radius:16px}
.card-header{padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px}
.card-title{font-weight:700}
.card-subtitle{color:var(--muted); font-size:13px}
.card-body{padding:14px 16px}
.card-footer{padding:12px 16px; border-top:1px solid var(--border); display:flex; gap:8px; flex-wrap:wrap}

/* 헤더/브레드크럼 */
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:8px}
.breadcrumb .current{color:var(--fg); font-weight:600}
.breadcrumb .sep{opacity:.45}
.head-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.head-left{display:flex; flex-direction:column; gap:8px; min-width:0}
.detail-title{font-size:22px; font-weight:800; line-height:1.3; margin:0}
.detail-addr{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:14px}
.tagbar{margin-top:2px}
.pill{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:12px; background:var(--chip); border:1px solid var(--border)}
.actions{display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:flex-end}
.iconbtn{
  width:34px; height:34px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:#fff; text-decoration:none;
}
.iconbtn[disabled]{opacity:.5; pointer-events:none}
.mini-icon{border:0; background:transparent; cursor:pointer; padding:0 4px; font-size:14px; line-height:1}

/* KPI */
.stat-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.stat{padding:12px; border-radius:12px; border:1px solid var(--border); background:#fff}
.stat .label{font-size:12px; color:var(--muted)}
.stat .value{font-size:18px; font-weight:800; margin-top:2px}

/* 섹션 타이틀 */
.section-title{display:flex; align-items:center; gap:8px; margin-bottom:16px}
.section-title .dot{width:4px; height:20px; background:var(--brand); border-radius:2px}
.section-title h2{margin:0; font-size:18px; font-weight:700}

/* key-value */
.kv{display:grid; grid-template-columns:140px 1fr; gap:8px; padding:8px 0; border-top:1px dashed var(--border)}
.kv:first-of-type{border-top:0}
.kv > div:first-child{color:var(--muted); font-size:14px}
.kv > div:last-child{font-weight:500}

/* 주변 기관 그리드 */
.rel-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.rel-item{display:block; padding:12px; border:1px solid var(--border); border-radius:12px; background:#fff; text-decoration:none; color:inherit}
.rel-name{font-weight:700; margin-bottom:2px}
.distance-chip{display:inline-block; margin-top:4px; background:var(--chip); padding:2px 8px; border-radius:12px; font-size:12px}
.small{font-size:13px; color:var(--muted)}
.tag{display:inline-block; padding:2px 6px; background:var(--chip); border-radius:6px}

/* 버튼 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 12px; border:1px solid var(--border); border-radius:10px;
  background:#fff; color:var(--fg); cursor:pointer; text-decoration:none; transition:.15s ease-in-out;
}
.btn:hover{background:#fafafa; text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.disabled{opacity:.6; pointer-events:none}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-strong); border-color:var(--brand-strong)}
.btn-outline{background:#fff; border-color:var(--brand); color:var(--brand)}
.btn-ghost{background:transparent; border-color:transparent; color:#var(--brand)}
.btn-sm{padding:6px 10px; font-size:13px; border-radius:8px}
.btn-lg{padding:12px 16px; font-size:16px; border-radius:12px}
.btn-row{display:flex; gap:8px; flex-wrap:wrap}

/* 입력 폼 */
.field{margin:0 0 12px 0}
.label{display:block; font-weight:600; margin:0 0 6px 0}
.input,.select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; color:#var(--fg);
}
.input:focus,.select:focus,textarea:focus{outline:2px solid #dbeafe; border-color:#bfdbfe}
.input-group{display:flex; gap:8px; align-items:stretch}
.input-group .input{flex:1}
.help{color:var(--muted); font-size:12px; margin-top:6px}
.checkbox,.radio{display:inline-flex; align-items:center; gap:8px; cursor:pointer}
.checkbox input,.radio input{width:16px; height:16px}

/* 배지/칩/태그 */
.badge{display:inline-block; padding:3px 8px; border-radius:999px; background:var(--chip); color:#0f172a; font-size:12px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:var(--chip); color:#0f172a; border:1px solid var(--border); font-size:13px}

/* 테이블 */
.table{width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--border); border-radius:12px; overflow:hidden}
.table th,.table td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left}
.table thead th{background:#f8fafc; font-weight:700}
.table tr:last-child td{border-bottom:none}

/* 알림 & 토스트 */
.alert{border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:#fff; display:flex; gap:10px; align-items:flex-start}
.alert-info{border-color:#bfdbfe; background:#eff6ff; color:#1e3a8a}
.alert-success{border-color:#bbf7d0; background:#f0fdf4; color:#14532d}
.alert-warning{border-color:#fed7aa; background:#fff7ed; color:#7c2d12}
.alert-danger{border-color:#fecaca; background:#fef2f2; color:#7f1d1d}
.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(20px);
  background:#111827; color:#fff; padding:10px 14px; border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.2); opacity:0; transition:all .2s ease; z-index:60; font-size:13px;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* 유틸리티 */
.mt-0{margin-top:0}.mt-4{margin-top:16px}.mt-6{margin-top:24px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.p-0{padding:0}.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}.p-6{padding:24px}
.py-2{padding-top:8px;padding-bottom:8px}.py-3{padding-top:12px;padding-bottom:12px}.py-4{padding-top:16px;padding-bottom:16px}
.px-2{padding-left:8px;padding-right:8px}.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.row.right{justify-content:flex-end}
.row.between{justify-content:space-between}
.center{display:grid; place-items:center}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
.hidden{display:none!important}

/* 스켈레톤 */
.skeleton{position:relative; overflow:hidden; background:#f1f5f9; border-radius:8px}
.skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
  transform:translateX(-100%); animation:skeleton 1.2s infinite;
}
@keyframes skeleton{to{transform:translateX(100%)}}

/* Hover 공통 */
.hover-card{transition:transform .12s ease, box-shadow .12s ease}
.hover-card:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(2,6,23,.08)}

/* ========= 지도 (Leaflet) ========= */
.mapbox{
  width:100%; height:350px !important; min-height:350px;
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  position:relative; background:#f5f5f5; display:block !important;
}
#map{width:100% !important; height:100% !important; position:relative !important; display:block !important}
.leaflet-container{
  width:100% !important; height:100% !important; position:relative !important;
  font-family:inherit !important; font-size:inherit !important; line-height:inherit !important;
  touch-action:pan-x pan-y; -webkit-tap-highlight-color:transparent;
}
.leaflet-container img{max-width:none !important; max-height:none !important; width:auto !important; height:auto !important}
.leaflet-tile-container img{width:256px !important; height:256px !important}
.leaflet-pane{z-index:400 !important}
.leaflet-tile-pane{z-index:200 !important}
.leaflet-overlay-pane{z-index:400 !important}
.leaflet-shadow-pane{z-index:500 !important}
.leaflet-marker-pane{z-index:600 !important}
.leaflet-tooltip-pane{z-index:650 !important}
.leaflet-popup-pane{z-index:700 !important}
.leaflet-control{z-index:800 !important}

/* 스켈레톤 로딩 상태 */
.mapbox.skeleton::before{
  content:'🗺️ 지도 로딩중...';
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:var(--muted); font-size:14px; z-index:1;
}

/* ===== FAQ 아코디언 & 탭 ===== */
.card button.card-header,
.card [data-accordion="trigger"]{
  width:100%; background:transparent; border:0;
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--border);
  cursor:pointer; text-align:left;
}
.card [data-accordion="trigger"]:hover{background:#f8fafc; text-decoration:none}
.card [data-accordion="trigger"]:focus-visible{outline:2px solid #bfdbfe; border-radius:10px}
.card [data-accordion="trigger"] .caret{transition:transform .2s ease}
.card [data-accordion="trigger"][aria-expanded="true"] .caret{transform:rotate(180deg)}
.faq-item .card-body.hidden{display:none !important}
.chip[data-cat]{cursor:pointer; user-select:none}
.chip[aria-selected="true"]{
  background:var(--brand-weak);
  border-color:#dbeafe;
  color:#1e3a8a;
  font-weight:700;
}
.chip[aria-selected="false"]:hover{filter:brightness(0.98)}

/* 반응형 - 태블릿 */
@media (max-width:960px){
  .grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-grid{grid-template-columns:1fr}
  .actions{justify-content:flex-start}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 반응형 - 모바일 */
@media (max-width:720px){
  h1{font-size:22px} h2{font-size:19px}
  .btn-lg{padding:10px 14px}
  .grid.cols-3,.grid.cols-2,.grid.cols-4{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr}
  .rel-grid{grid-template-columns:1fr}
  .kv{grid-template-columns:100px 1fr}

  /* 모바일 지도 높이 조정 */
  .mapbox{height:280px !important; min-height:280px}

  /* 모바일 헤더 조정 */
  .head-top{flex-direction:column}
  .actions{width:100%; justify-content:space-between}
}

/* 아주 작은 화면 */
@media (max-width:480px){
  .mapbox{height:250px !important; min-height:250px}
  .container{padding:0 12px}
  .detail-title{font-size:20px}
  .iconbtn{width:32px; height:32px}
}

/* 프린트 */
@media print{
  .actions, .iconbtn, .btn, .breadcrumb{display:none!important}
  .mapbox{height:300px !important; page-break-inside:avoid}
  #map{display:block !important}
}

/* ===============================================================
 * 추가: 공유 컴포넌트 (히어로/배지/메트릭/필터바/내비)
 * =============================================================== */
.hero{
  background: radial-gradient(1200px 600px at 10% 0%, var(--brand-weak), transparent 60%),
              linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%);
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px;
}
.hero h1{ font-size:28px; font-weight:900; letter-spacing:-.2px; }
.kicker{ font-size:13px; color:var(--muted); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.filter-bar .input, .filter-bar .select { height:42px; }
.hospital-card .metrics{ display:flex; gap:8px; flex-wrap:wrap; margin:.5rem 0 0; }
.metric{ display:inline-flex; align-items:center; gap:6px; background:#f8fafc; border:1px solid var(--border); padding:6px 10px; border-radius:10px; font-size:12px; }
.badge-cat{ display:inline-flex; align-items:center; gap:6px; background:#f1f5f9; padding:6px 10px; border-radius:999px; font-size:12px; }
.addr{ color:var(--muted); font-size:14px; }

/* Pill 네비게이션 */
.pill-nav{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:12px; margin-top:12px; }
@media (max-width:920px){ .pill-nav{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
.pill-nav .pill{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border:1px solid var(--border); border-radius:999px;
  text-decoration:none; color:var(--fg); background:#fff;
  transition:transform .08s ease, box-shadow .08s ease, background .2s ease;
  font-size:14px;
}
.pill-nav .pill:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(2,6,23,.06); background:#fcfdff; text-decoration:none; }
.pill-nav .pill .i{ font-size:18px; line-height:1; }
.pill-nav .pill .cnt{ font-size:12px; padding:4px 8px; border-radius:999px; background:#f1f5f9; color:#334155; }
.pill-nav .pill[aria-current="true"]{ background:var(--brand); color:#fff; border-color:var(--brand); }
.pill-nav .pill[aria-current="true"] .cnt{ background:rgba(255,255,255,.2); color:#fff; }

/* ===============================================================
 * search 기준 병원 카드 (h-card) — 전역 공용
 * =============================================================== */
.h-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
@media (max-width:920px){ .h-grid{ grid-template-columns:1fr; } }

.h-card{
  position:relative;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  padding:14px;
  transition:transform .06s ease, box-shadow .12s ease, border-color .12s ease;
  cursor:pointer;
}
.h-card:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(2,6,23,.07);
  border-color:#e2e8f0;
}
.h-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.h-title{ margin:0; font-size:18px; font-weight:800; line-height:1.35; }
.h-card .badge-cat{ display:inline-flex; align-items:center; gap:6px; background:#f1f5f9; padding:6px 10px; border-radius:999px; font-size:12px; white-space:nowrap; }
.h-addr{ color:var(--muted); font-size:14px; margin-top:6px; }
.h-card .meta{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.h-card .meta .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:#fff; font-size:12px;
}
.h-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.h-actions .btn{ padding:8px 12px; }
.h-card:focus{ outline:3px solid #bfdbfe; outline-offset:2px; }
.h-card [data-stretched]{ position:absolute; inset:0; opacity:0; pointer-events:none; }

/* ===============================================================
 * 모바일 카드 안정화 보강 (추천병원/검색 카드 공통)
 * =============================================================== */
.h-head > *{ min-width:0; }
.h-title{
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.h-addr{ word-break:break-word; overflow-wrap:anywhere; line-height:1.45; }
.h-card .meta .chip{ line-height:1.35; }
.h-card .badge-cat{ max-width:50vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:720px){
  .h-actions{ display:flex; gap:8px; flex-wrap:wrap; }
  .h-actions .btn{ flex:1 1 140px; min-height:38px; }
}

/* ===============================================================
 * iOS(WebKit) 보강: flex-gap 폴백 & 오버플로우 수축
 * =============================================================== */
@supports (-webkit-touch-callout: none){
  /* flex-gap 없는 환경 대비(사파리 구버전 포함) */
  .h-actions{ gap:0; margin:-4px; }
  .h-actions .btn{ margin:4px; }

  .h-card .meta{ gap:0; margin:-3px; }
  .h-card .meta .chip{ margin:3px; }

  /* 수축 허용으로 제목/칩 끼임 방지 */
  .h-head > *, .h-card .meta, .h-addr{ min-width:0; }
}