/* 오늘의 인천 — 중장년·모바일 우선
   원칙: 본문 18px 이상 · 터치 48px 이상 · 대비 4.5:1 이상 · 색 단독 금지(색+아이콘+글자)
   등급 색은 이 파일에만 정의한다. JS는 색상 코드를 갖지 않는다. */

:root{
  --ink:#1a1c1e; --ink-2:#4b5157; --ink-3:#6b7280;
  --line:#e2e5e9; --bg:#ffffff; --bg-2:#f6f7f9;

  /* 등급 7상태 */
  --g-closed:#5F6368;   /* 오늘 닫힘 */
  --g-calm:#2E7FB8;     /* 여유   (원안 #9CCDEA는 흰 배경 대비 부족 → 어둡게) */
  --g-normal:#1E6FB8;   /* 보통 */
  --g-busy:#C2691F;     /* 약간 붐빔 */
  --g-crowd:#A81E12;    /* 붐빔 */
  --g-open:#3F7A52;     /* 오늘 열림 */
  --g-tidal:#00707D;    /* 물때에 따라 (풀등 등 썰물에만 드러나는 곳) */
  --g-unknown:#7A8087;  /* 확인 안 됨 */

  --sheet-h:46svh;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{
  font:400 18px/1.55 -apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-text-size-adjust:100%;
}
button{font:inherit;color:inherit}

/* 지도 ---------------------------------------------------- */
#map{position:fixed; inset:0; bottom:var(--sheet-h); background:#dfe6ec}
.leaflet-container{font:inherit}

/* 상단 고정 ------------------------------------------------ */
#top{
  position:fixed; top:0; left:0; right:0; z-index:800;
  background:rgba(255,255,255,.96); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line); padding:10px 14px 8px;
}
.bar{display:flex; align-items:baseline; gap:10px}
h1{margin:0; font-size:20px; font-weight:700; letter-spacing:-.02em}
.stamp{margin-left:auto; font-size:14px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.scope{margin:4px 0 8px; font-size:15px; color:var(--ink-2)}

.gateway{
  display:block; width:100%; min-height:48px; text-align:left; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
  padding:8px 12px;
}
.gw-title{display:block; font-size:14px; color:var(--ink-3)}
.gw-body{display:block; font-size:16px; font-weight:600; margin-top:2px}

/* 목록 시트 ------------------------------------------------ */
#sheet{
  position:fixed; left:0; right:0; bottom:0; height:var(--sheet-h); z-index:900;
  background:var(--bg); border-top:1px solid var(--line);
  border-radius:16px 16px 0 0; box-shadow:0 -6px 24px rgba(0,0,0,.10);
  display:flex; flex-direction:column;
}
.grab{
  height:28px; flex:none; cursor:ns-resize; touch-action:none;
  display:flex; align-items:center; justify-content:center;
}
.grab::before{content:""; width:44px; height:5px; border-radius:3px; background:#c9ced4}

.controls{flex:none; padding:0 14px 8px; display:flex; flex-direction:column; gap:8px}
#q{
  width:100%; min-height:48px; padding:0 14px; border:1px solid var(--line);
  border-radius:10px; font-size:16px;           /* iOS 자동확대 방지 하한 */
  background:var(--bg-2);
}
.sorts{display:flex; gap:6px}
.sort{
  flex:1; min-height:48px; border:1px solid var(--line); background:var(--bg);
  border-radius:9px; font-size:15px; cursor:pointer; padding:0 4px;
}
.sort.on{background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600}

.chips{display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none; min-height:48px; padding:0 16px; border-radius:24px;
  border:1px solid var(--line); background:var(--bg); font-size:15px; cursor:pointer;
  white-space:nowrap;
}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600}

/* 카드 ---------------------------------------------------- */
.list{list-style:none; margin:0; padding:0 14px 8px; overflow-y:auto; flex:1; -webkit-overflow-scrolling:touch}
.card{
  display:grid; grid-template-columns:auto 1fr auto; gap:2px 10px;
  align-items:start; width:100%; text-align:left;
  padding:12px 4px; border:0; border-bottom:1px solid var(--line);
  background:none; cursor:pointer; min-height:48px;
}
.card:hover{background:var(--bg-2)}
.mark{grid-row:1/4; font-size:20px; line-height:1.3; width:24px; text-align:center}
.nm{font-size:18px; font-weight:600; letter-spacing:-.01em}
.sub{grid-column:2 / -1; font-size:16px; color:var(--ink-2)}
.fact{grid-column:2 / -1; font-size:16px; color:var(--ink)}
.why{grid-column:2 / -1; font-size:14px; color:var(--ink-3); margin-top:3px}
.badge{
  grid-row:1; grid-column:3; align-self:start;
  font-size:14px; font-weight:700; white-space:nowrap;
  padding:3px 9px; border-radius:7px; border:1.5px solid currentColor;
}

/* 등급별 색 — 색만으로 구분하지 않는다(마커 모양 + 글자 병기) */
.s-closed  {color:var(--g-closed)}
.s-calm    {color:var(--g-calm)}
.s-normal  {color:var(--g-normal)}
.s-busy    {color:var(--g-busy)}
.s-crowd   {color:var(--g-crowd)}
.s-open    {color:var(--g-open)}
.s-tidal   {color:var(--g-tidal)}
.s-unknown {color:var(--g-unknown)}

/* 안전 안내 — 스크롤 없이 눈에 들어와야 한다. 색만으로 알리지 않고 ⚠ 기호와 굵은 테두리를 함께 쓴다. */
.caution{
  margin:10px 0; padding:12px 14px; border-radius:10px;
  background:#FDF3F1; border:1.5px solid var(--g-crowd);
  color:#7A1A10; font-size:15px; line-height:1.6;
}

.empty{padding:24px 14px; color:var(--ink-3); font-size:16px}
.src{flex:none; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg-2)}
.src p{margin:2px 0; font-size:13px; color:var(--ink-3)}
.disclaimer{margin-top:6px !important; color:var(--ink-2) !important}

/* 상세 ---------------------------------------------------- */
.detail{
  position:fixed; left:0; right:0; bottom:0; height:76svh; z-index:1000;
  background:var(--bg); border-radius:16px 16px 0 0; box-shadow:0 -8px 32px rgba(0,0,0,.18);
  overflow-y:auto; padding:18px 16px calc(24px + env(safe-area-inset-bottom));
}
.d-close{
  position:sticky; top:0; float:right; width:48px; height:48px;
  border:1px solid var(--line); border-radius:24px; background:var(--bg); cursor:pointer; font-size:18px;
}
.detail h2{margin:4px 0 2px; font-size:22px}
.detail h3{margin:18px 0 4px; font-size:15px; color:var(--ink-3); font-weight:600}
.detail p{margin:2px 0; font-size:17px}
.kv{display:flex; gap:10px; padding:5px 0; border-bottom:1px solid var(--line); font-size:16px}
.kv b{flex:none; width:96px; font-weight:600; color:var(--ink-2)}

/* 지도 마커 ------------------------------------------------ */
.pin{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; font-size:15px; font-weight:700;
  background:#fff; border:2.5px solid currentColor; box-shadow:0 1px 4px rgba(0,0,0,.3);
}

@media (min-width:900px){
  :root{--sheet-h:100svh}
  #map{inset:0; left:440px; bottom:0}
  #sheet{right:auto; width:440px; top:0; border-radius:0; border-right:1px solid var(--line)}
  #top{left:0; width:440px; border-right:1px solid var(--line)}
  #sheet{padding-top:152px}
  .grab{display:none}
  .detail{left:440px; right:0; height:100svh; border-radius:0}
}

/* 좌표를 지역 중심점으로만 아는 곳은 테두리를 점선으로 구분한다.
   정확한 척하지 않기 위한 표시이며, 카드 근거 줄에도 '지도 위치 대략'을 적는다. */
.pin.approx{border-style:dashed; opacity:.85}

/* 오늘 열리는 축제 마커. 관광지 등급 마커와 섞이지 않게 색·모양을 분리한다. */
.pin.fest{
  color:#7A3FA0; border-color:#7A3FA0; border-style:solid;
  font-size:13px; width:28px; height:28px;
}
.pin.fest.soon{border-style:dashed; opacity:.7}
.gw-src{display:block; font-size:13px; color:var(--ink-3); margin-top:3px}

/* 날짜 시뮬레이션 배너 — 실제 값과 혼동하지 않도록 눈에 띄게 둔다 */
.simbar{
  position:fixed; left:0; right:0; bottom:0; z-index:1200;
  background:#3B2A55; color:#fff; padding:8px 14px calc(8px + env(safe-area-inset-bottom));
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; font-size:14px;
}
.simbar b{font-size:15px}
.simbar span{opacity:.85; flex:1 1 auto}
.simbar a{color:#fff; text-decoration:underline; white-space:nowrap; min-height:44px; display:inline-flex; align-items:center}


/* Leaflet 기본 컨트롤이 30x30이라 중장년 손가락에는 작다. 터치 기준(44px)으로 키운다. */
.leaflet-touch .leaflet-bar a,
.leaflet-bar a{
  width:44px !important; height:44px !important;
  line-height:44px !important; font-size:22px !important;
}
.leaflet-control-attribution{font-size:12px; line-height:1.6}
.leaflet-control-attribution a{display:inline-block; padding:4px 2px}

/* 상세 하단 동작 버튼 — 공유·신고 */
.acts{display:flex; gap:8px; margin-top:20px; flex-wrap:wrap}
.act{
  flex:1 1 auto; min-height:52px; min-width:140px; padding:0 18px;
  border:0; border-radius:10px; background:var(--ink); color:#fff;
  font-size:17px; font-weight:600; cursor:pointer;
}
.act.ghost{background:var(--bg); color:var(--ink-2); border:1px solid var(--line); font-weight:500}