:root {
  --c1: #1a9850; --c2: #91cf60; --c3: #e8d27a; --c4: #fc8d59; --c5: #d73027;
  --ink: #17181b; --sub: #5b6475; --line: #e4e7ee; --bg: #f7f8fb; --acc: #2457d6;
  --panel: 400px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: "IBM Plex Sans KR", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; color: var(--ink); background: var(--bg); }

.brand { display: flex; align-items: center; gap: 10px; }
.brand h1 { margin: 0; line-height: 0; }
.brand img { height: 44px; width: auto; display: block; }
button, input, select, textarea { font-family: inherit; }
.brand span { font-size: 12px; color: var(--sub); line-height: 1.3; }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 12px 0 10px; padding: 4px; background: var(--bg); border-radius: 10px; }
.tabs button { border: 0; background: none; padding: 8px 4px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 600; color: var(--sub); cursor: pointer; line-height: 1.2; }
.tabs button.on { background: var(--ink); color: #fff; }
.tabs button.soon { opacity: .6; }
.tabs small { display: block; font-size: 10px; }

.layout { display: flex; height: 100%; }
#map { flex: 1; }
.panel { width: var(--panel); flex: none; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 2; box-shadow: 2px 0 8px rgba(0,0,0,.06); }
.phead { padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
.pbody { flex: 1; overflow-y: auto; padding: 6px 16px 24px; }
.search { position: relative; }
.search input[type=search] { padding-left: 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6475' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 11px center; border-width: 1.5px; border-color: var(--ink); }
.panel section { display: none; }
.panel section.on { display: block; }
.panel h2 { font-size: 15px; margin: 18px 0 8px; }

/* 달력 */
.cal { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 10px; }
.calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; font-size: 14px; }
.calhead .nav { border: 0; background: none; font-size: 20px; line-height: 1; padding: 2px 10px; cursor: pointer; color: var(--ink); border-radius: 6px; }
.calhead .nav:hover:not(:disabled) { background: var(--bg); }
.calhead .nav:disabled { color: var(--line); cursor: default; }
.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.grid em { font-style: normal; font-size: 11px; color: var(--sub); padding: 2px 0; }
.grid button, .grid span { font: inherit; font-size: 13px; height: 30px; border: 0; border-radius: 8px; background: none; padding: 0; }
.grid button { cursor: pointer; font-weight: 600; }
.grid button:hover { background: var(--bg); }
.grid span.off { color: #c9cdd6; line-height: 30px; }
.grid .out { opacity: .55; }
.grid .sun { color: #d0453a; }
.grid .sat { color: #2f64d8; }
.grid .today { box-shadow: inset 0 0 0 1px var(--sub); }
.grid button.on { background: var(--ink); color: #fff; opacity: 1; }
.picked { margin-top: 6px; font-size: 13px; font-weight: 700; text-align: center; }

/* 필터 칩 · 유종 버튼 */
.filt { margin-top: 12px; }
.flabel { font-size: 12px; font-weight: 700; color: var(--sub); margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chips button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink); }
.chips button i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
.chips button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.note .gray { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #6c7a96; margin-right: 5px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.seg button { flex: 1; border: 0; background: #fff; padding: 10px 0; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--sub); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--ink); color: #fff; }
.oil .sel { background: #fff4b8; border-radius: 4px; padding: 0 4px; }
.list .val small.none { color: #b5bac4; font-weight: 400; }

.note { font-size: 12px; color: var(--sub); line-height: 1.5; margin: 6px 0 10px; }

input[type=search], select { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; }
.qres { position: relative; }
.qres ul { position: absolute; z-index: 1000; left: 0; right: 0; margin: 2px 0 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.08); max-height: 260px; overflow-y: auto; }
.qres li { padding: 7px 11px; font-size: 14px; cursor: pointer; }
.qres li:hover { background: var(--bg); }
.qres li small { color: var(--sub); margin-left: 6px; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.list li:hover { background: var(--bg); }
.list .dot { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(23,24,27,.75); box-sizing: border-box; }
.list .nm { flex: 1; min-width: 0; }
.list .nm b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .nm small { color: var(--sub); font-size: 12px; }
.list .val { font-size: 13px; font-weight: 600; white-space: nowrap; }

.sel { display: block; font-size: 13px; color: var(--sub); }
.sel select { margin-top: 4px; }
.cheap { margin-top: 12px; font-size: 13px; line-height: 1.6; background: var(--bg); border-radius: 8px; padding: 10px 12px; }
.cheap:empty { display: none; }

.src { margin-top: 28px; font-size: 11px; color: var(--sub); line-height: 1.6; border-top: 1px solid var(--line); padding-top: 12px; }

/* 팝업 */
/* 카카오맵 위 우리 층: 바탕(카카오) → 점 캔버스 → 팝업·카드 → 조작 버튼 */
.kmap { position: relative; overflow: hidden; }
.kmap-base { position: absolute; inset: 0; }
.kmap-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(255,255,255,.28);   /* 10-16 처음 .5 → '뿌옇다'로 .28 */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 240px) calc(100% - 30px), calc(100% - 240px) 100%, 0 100%); }
.kmap-pts { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; }
.kmap-ov { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none; }
.kmap-ov > * { position: absolute; left: 0; top: 0; }
.kctl { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 8px; }
.kctl-topleft { top: 10px; left: 10px; } .kctl-topright { top: 10px; right: 10px; align-items: flex-end; }
.kctl-bottomleft { bottom: 10px; left: 10px; } .kctl-bottomright { bottom: 30px; right: 10px; align-items: flex-end; }
.kpop { pointer-events: auto; padding-bottom: 12px; width: max-content; }  /* 부모 층 폭이 0 이라 안 주면 최소폭으로 쪼그라든다 */
.kpop-c { background: #fff; border-radius: 12px; box-shadow: 0 3px 14px rgba(0,0,0,.25); padding: 12px 14px; min-width: 240px; overflow-y: auto; font-size: 13px; line-height: 1.4; }
.kpop-x { position: absolute; top: 4px; right: 4px; z-index: 1; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--sub); font-size: 18px; line-height: 1; cursor: pointer; }
.kpop-tail { position: absolute; left: 50%; bottom: 2px; width: 14px; height: 14px; margin-left: -7px; background: #fff; transform: rotate(45deg); box-shadow: 3px 3px 6px rgba(0,0,0,.12); }
.kpop .pop h3 { padding-right: 22px; }
.ktip { pointer-events: none; padding-bottom: 10px; }
.pop h3 { margin: 0 0 2px; font-size: 16px; }
.pop .area { color: var(--sub); font-size: 12px; }
.pop .big { margin: 10px 0 6px; font-size: 15px; font-weight: 700; }
.pop .tip { font-size: 12px; color: var(--sub); margin: 6px 0 0; line-height: 1.5; }
.pop svg { display: block; margin-top: 6px; }
.pop .img { width: 100%; height: 110px; object-fit: cover; border-radius: 6px; margin-bottom: 8px; }
.menu { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.menu td { padding: 4px 0; border-bottom: 1px solid var(--line); }
.menu td:last-child { text-align: right; white-space: nowrap; }
.badge { display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 4px; margin-left: 4px; background: #fff1d6; color: #9a5b00; vertical-align: 1px; }
.badge.rec { background: #e3edff; color: var(--acc); }
.oil { display: flex; gap: 12px; font-size: 13px; margin: 6px 0; }
.oil b { font-size: 14px; }
.more { font-size: 12px; color: var(--acc); cursor: pointer; margin-top: 6px; display: inline-block; }



/* 지도 배경: 지형색을 빼서 깔끔하게 */

/* 내 위치 버튼 · 정렬 버튼 */
.zoombar .locbtn { background: #fff; color: #5b6475; display: flex; align-items: center; justify-content: center; }
.zoombar .locbtn.on { color: #2f7cf6; }
.zb-sep { width: 1px; height: 20px; background: var(--line); }
.locbtn.busy svg { animation: locspin 1s linear infinite; }
@keyframes locspin { to { transform: rotate(360deg); } }
.sortseg { margin: 16px 0 0; }
.sortseg button { padding: 8px 0; font-size: 13px; }

/* 배율 막대(왼쪽 아래) */
.zoombar { display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 10px; padding: 5px 10px 5px 6px; box-shadow: 0 1px 5px rgba(0,0,0,.25); }
.zoombar button { width: 28px; height: 28px; border: 0; border-radius: 6px; background: var(--bg); font-size: 18px; line-height: 1; cursor: pointer; color: var(--ink); padding: 0; }
.zoombar button:hover { background: var(--line); }
.zoombar input[type=range] { -webkit-appearance: none; appearance: none; width: 180px; height: 6px; border-radius: 3px; cursor: pointer; margin: 0;
  background: linear-gradient(to right, var(--ink) var(--p, 0%), var(--line) var(--p, 0%)); }
.zoombar input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.zoombar input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); }
.zoombar .zb-lab { min-width: 34px; font-size: 12px; font-weight: 700; color: var(--sub); }

/* 예상 인원 */
.pop .ppl { font-size: 13px; margin: -2px 0 6px; }
.pop .ppl b { font-size: 15px; }
.pop .ppl small { display: block; color: var(--sub); font-size: 11px; }
.list .val small { display: block; font-size: 11px; font-weight: 400; color: var(--sub); text-align: right; }

/* 서울 실시간 */
.pop .live { background: #f3f7ff; border-radius: 8px; padding: 8px 10px; margin: 4px 0 8px; }
.pop .live.stale { background: var(--bg); }
.pop .lhead { font-size: 13px; }
.pop .lhead b { font-size: 14px; }
.pop .lhead small { display: block; color: var(--sub); font-size: 11px; margin-top: 1px; }
.pop .ldot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 3px; animation: lpulse 1.6s ease-in-out infinite; }
.pop .live.stale .ldot { animation: none; }
@keyframes lpulse { 50% { opacity: .35; } }
.pop .src2 { font-size: 10px; color: var(--sub); margin: 4px 0 0; }
.pop .tip.region small { display: block; font-size: 10px; }
.cheap small.at { color: var(--sub); font-size: 11px; }
.toidx { font-size: 13px; margin: 20px 0 0; }

/* 이 장소 더 알아보기(크게) · 바깥 링크(맨 아래, 작게) */
.pop .more-page { display: block; margin: 8px 0 10px; padding: 11px 12px; border-radius: 10px; background: var(--acc); color: #fff !important; text-decoration: none; font-size: 15px; font-weight: 700; text-align: center; }
.pop .more-page::after { content: " →"; }
.pop .more-page small { display: block; font-size: 11px; font-weight: 400; opacity: .85; margin-top: 2px; }
.pop .more-page small::after { content: none; }
.out { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--line); }
.orow { display: flex; align-items: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.orow span { font-size: 11px; color: var(--sub); width: 52px; flex: none; }
.orow a { font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink) !important; text-decoration: none; background: #fff; }
.orow a:hover { background: var(--bg); }

/* 범례(지도 오른쪽 위) */
.legend { background: #fff; border-radius: 10px; box-shadow: 0 1px 5px rgba(0,0,0,.25); font-size: 12px; color: var(--ink); max-width: 250px; }
.legend.hide { display: none; }
.legend .lg-open { display: none; border: 0; background: #fff; border-radius: 10px; padding: 7px 12px; font: 700 12px/1 inherit; cursor: pointer; color: var(--ink); }
.legend.shut .lg-open { display: block; }
.legend.shut .lg-body { display: none; }
.legend .lg-body { padding: 8px 10px 9px; }
.legend .lg-head { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 5px; }
.legend .lg-head b { font-size: 12px; line-height: 1.35; flex: 1; }
.legend .lg-close { border: 0; background: none; font-size: 17px; line-height: 1; cursor: pointer; color: var(--sub); padding: 0 2px; }
.legend .lg-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.legend .lg-row i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(23,24,27,.75); flex: none; box-sizing: border-box; }
.legend .lg-row span { font-weight: 700; min-width: 64px; }
.legend .lg-row small { color: var(--sub); }
.legend .lg-gray { margin-top: 3px; padding-top: 5px; border-top: 1px dashed var(--line); }
.legend .lg-gray i { background: #6c7a96; }
.legend .lg-why, .legend .lg-foot { margin: 4px 0 0; color: var(--sub); line-height: 1.45; font-size: 11px; }
@media (max-width: 760px) { .legend { max-width: 210px; } .legend .lg-row small { display: none; } }

/* 마우스오버 카드 */
.ktip.hov .hv { background: #fff; border-radius: 10px; box-shadow: 0 3px 14px rgba(0,0,0,.22); color: var(--ink); }
.hv { display: flex; gap: 9px; padding: 8px 10px; width: 260px; align-items: flex-start; }
.hv img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex: none; }
.hv b { display: block; font-size: 14px; line-height: 1.3; }
.hv small { display: block; font-size: 11px; color: var(--sub); }
.hv .hl { font-size: 13px; font-weight: 700; margin-top: 4px; }
.hv .hp { font-size: 12px; margin-top: 1px; }
.hv .hp b { display: inline; font-size: 13px; }
.hv .hc { margin-top: 4px; color: #9aa1ad; }

/* 가는곳 비교 — 팝업 담기 버튼 */
.pop .addcart { display: block; width: 100%; margin: -2px 0 10px; padding: 9px 10px; border-radius: 10px; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.pop .addcart small { font-weight: 400; color: var(--sub); }
.pop .addcart.on { background: var(--ink); color: #fff; }
/* 지도 오른쪽 아래 버튼 */
.cartbtn { border: 0; border-radius: 22px; padding: 11px 16px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.cartbtn b { display: inline-block; min-width: 20px; margin-left: 4px; padding: 1px 6px; border-radius: 10px; background: #ff3e8e; font-size: 12px; }
.cartbtn.hide { display: none; }
/* 비교 화면 */
.cmp-back { position: fixed; inset: 0; z-index: 2000; background: rgba(23,24,27,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cmp { background: #fff; border-radius: 14px; width: min(980px, 100%); max-height: 100%; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.cmp-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px 8px; }
.cmp-head b { font-size: 18px; }
.cmp-head small { color: var(--sub); }
.cmp-x { margin-left: auto; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--sub); }
.cmp-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 0 18px 10px; font-size: 13px; border-bottom: 1px solid var(--line); }
.cmp-opts select { margin-left: 4px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.cmp-loc { border: 0; border-radius: 8px; padding: 7px 12px; background: var(--acc); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.cmp-me { color: var(--sub); }
.cmp-scroll { overflow: auto; padding: 0 6px; }
.cmp table { border-collapse: collapse; width: 100%; font-size: 13px; }
.cmp th, .cmp td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp th { width: 112px; min-width: 112px; font-weight: 700; color: var(--ink); position: sticky; left: 0; background: #fff; z-index: 1; }
.cmp th small, .cmp td small { display: block; font-size: 11px; color: var(--sub); font-weight: 400; margin-top: 2px; }
.cmp td { min-width: 150px; }
.cmp td b { font-size: 15px; }
.cmp thead td { border-bottom: 2px solid var(--line); }
.cmp-spot img, .cmp-spot .noimg { display: block; width: 100%; height: 84px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; background: var(--bg); }
.cmp-spot b { display: block; font-size: 14px; line-height: 1.3; }
.cmp-rm { margin-top: 6px; border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 3px 9px; font-size: 12px; color: var(--sub); cursor: pointer; }
.cmp .lvl { display: inline-block; padding: 2px 8px; border-radius: 10px; color: #fff; font-weight: 700; font-size: 12px; text-shadow: 0 0 2px rgba(0,0,0,.35); }
.cmp .muted { color: #9aa1ad; font-size: 12px; }
.cmp .badge { margin-left: 6px; }
.cmp-links a { margin-right: 10px; font-size: 12px; color: var(--acc); }
.cmp-empty { padding: 24px 18px; color: var(--sub); }
.cmp-note { margin: 0; padding: 10px 18px 14px; font-size: 11px; color: var(--sub); line-height: 1.5; }
@media (max-width: 760px) {
  .cmp-back { padding: 0; align-items: stretch; }
  .cmp { border-radius: 0; }
  .cmp th { width: 84px; min-width: 84px; }
  .cmp td { min-width: 132px; }
}

/* 전기차 충전 */
.pop .ev { font-size: 13px; margin: 6px 0; padding: 7px 9px; border-radius: 8px; background: #eef6ff; }
.pop .ev b { font-size: 15px; color: #1a7f37; }
.pop .ev small { display: block; font-size: 10px; color: var(--sub); margin-top: 2px; }

/* 휴게소: 음식 메뉴 리본 · 순위 */
.chips.ribbon { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.chips.ribbon button { flex: none; }
.filt + .flabel, #menuChips + .flabel { margin-top: 10px; }
#fuel button { font-size: 13px; }
.list .rank { flex: none; min-width: 38px; font-size: 12px; font-weight: 700; color: var(--sub); }
.list .rank.top { color: #17181b; }
.list .rank.r1, .list .rank.r2, .list .rank.r3 { display: inline-block; text-align: center; border-radius: 10px; padding: 1px 0; border: 1.5px solid #17181b; }
.list .rank.r1 { background: #fab005; } .list .rank.r2 { background: #ced4da; } .list .rank.r3 { background: #d9804a; }
.pop .rk { color: #fff; border-radius: 8px; padding: 6px 9px; font-size: 12.5px; margin: 8px 0 4px; }
.pop .rk b { font-size: 14px; }
.menu tr.hit td { background: #fff8db; font-weight: 600; }
.brand h1 a { display: block; line-height: 0; }
.list .km { flex: none; min-width: 46px; font-size: 13px; font-weight: 700; color: var(--acc); }
.flabel small { font-weight: 400; margin-left: 4px; }
#routeChips { margin-bottom: 4px; }
#fuel + .flabel { margin-top: 10px; }
/* 휴게소 메뉴 전체 보기 — 촘촘한 두 칸 */
.menu2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; margin-top: 6px; font-size: 11.5px; line-height: 1.3; }
.menu2 div { display: flex; justify-content: space-between; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.menu2 span { min-width: 0; }
.menu2 b { font-weight: 600; white-space: nowrap; }
.menu2 i { font-style: normal; font-size: 9.5px; margin-left: 3px; padding: 0 3px; border-radius: 3px; background: #fff1d6; color: #9a5b00; }
.menu2 i.rec { background: #e3edff; color: var(--acc); }
.menu2 .hit { background: #fff8db; font-weight: 600; }
@media (max-width: 760px) { .menu2 { grid-template-columns: 1fr; font-size: 13px; } .menu2 div { padding: 6px 0; } }
/* 혼잡 예측 전(30일 뒤) 날 */
.legend .lg-far { display: none; }
.legend.far .lg-far { display: flex; }
.legend .lg-far i { background: #adb5bd; }
.grid .far:not(.on) { color: #868e96; background: repeating-linear-gradient(135deg, #fff 0 4px, #f1f3f5 4px 8px); }
.far #lvChips { opacity: .4; pointer-events: none; }
.legend .lg-none i { background: #fff; border: 1.5px solid #495057; box-shadow: none; }
.chips button[data-k="x"] i { border: 1.5px solid #868e96; box-sizing: border-box; }
/* 지역(시군구) 고름 */
.regionbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 12px 0 0; padding: 9px 11px; border-radius: 10px; background: #eaf0ff; font-size: 13px; }
.regionbar button { margin-left: auto; border: 0; background: #fff; border-radius: 8px; padding: 5px 9px; font-size: 12px; cursor: pointer; color: var(--ink); }
.regionbar[hidden] { display: none; }
.qres li.reg { background: #f3f6ff; }
.qres li.reg b { font-weight: 700; }

/* ── 휴대폰(가로 760px 이하): 지도는 화면 가득, 위에 검색줄, 정보는 아래에서 끌어올리는 시트 (10-16 모바일 우선 개편) ──
   PC 화면은 위의 규칙 그대로(백업: git 태그 pc-v1). 시트 높이·끌기는 app.js 의 sheet 가 정한다. */
.grab, .dstrip, .dmonth, .detail { display: none; }
@media (max-width: 760px) {
  html, body { overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
  .layout { display: block; height: 100dvh; }
  .panel { display: contents; }

  /* 위: 로고 · 검색 / 탭 */
  .phead { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 10px;
    padding: calc(env(safe-area-inset-top) + 8px) 10px 8px; background: #fff; border-bottom: 0; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
  .brand { grid-column: 1; grid-row: 1; }
  .search { grid-column: 2; grid-row: 1; }
  .brand span { display: none; }
  .brand img { height: 30px; }
  .tabs { grid-column: 1 / -1; grid-row: 2; margin: 0; padding: 3px; gap: 3px; }
  .tabs button { min-height: 40px; padding: 6px 2px; font-size: 14px; }
  .tabs small { font-size: 9.5px; font-weight: 500; }
  .search input[type=search] { height: 42px; font-size: 16px; border-radius: 21px; padding-left: 36px; }   /* 16px 밑이면 아이폰이 확대해 버린다 */
  .qres ul { position: fixed; left: 8px; right: 8px; top: var(--top, 110px); max-height: 60vh; border-radius: 12px; }
  .qres li { padding: 12px 14px; font-size: 15px; border-bottom: 1px solid var(--line); }
  .qres li small { display: block; margin: 2px 0 0; font-size: 12px; }

  /* 지도: 시트가 접혀 있을 때 보이는 부분 위까지(카카오 로고·저작권이 시트에 가리지 않게) */
  #map { position: fixed; left: 0; right: 0; top: 0; bottom: var(--peek, 150px); }
  .kctl-topleft, .kctl-topright { top: calc(var(--top, 110px) + 8px); }
  .kctl-bottomright { bottom: 26px; }
  .zoombar { padding: 4px; gap: 4px; }
  .zoombar input[type=range], .zoombar .zb-lab { display: none; }
  .zoombar button { width: 40px; height: 40px; font-size: 22px; }
  .legend .lg-open { padding: 11px 14px; font-size: 13px; }
  .cartbtn { padding: 12px 16px; }

  /* 아래 시트 */
  .pbody { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(100dvh - var(--top, 110px) - 6px);
    background: #fff; border-top: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -3px 16px rgba(0,0,0,.16);
    padding: 0 14px calc(env(safe-area-inset-bottom) + 28px); overflow: hidden; overscroll-behavior: contain;
    transform: translateY(calc(100% - var(--peek, 150px))); transition: transform .3s cubic-bezier(.2,.8,.2,1); will-change: transform; }
  .pbody.full { overflow-y: auto; }
  .pbody.drag { transition: none; }
  .grab { display: block; position: sticky; top: 0; z-index: 6; margin: 0 -14px; padding: 9px 0 8px; background: #fff; touch-action: none; cursor: pointer; }
  .grab i { display: block; width: 42px; height: 5px; margin: 0 auto; border-radius: 3px; background: #cdd2da; }

  /* 혼잡 예측: 날짜 띠 → 지역 → 필터(옆으로 밀기) → 정렬 → 목록 → 안내 */
  .panel section[data-pane=crowd].on { display: flex; flex-direction: column; }
  #cal { display: none; }
  .dstrip { order: 1; display: flex; gap: 6px; position: relative; overflow-x: auto; margin: 0 -14px; padding: 0 14px 8px; scrollbar-width: none; }
  .dstrip::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; }
  .dstrip button { flex: none; width: 50px; height: 58px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: inherit; }
  .dstrip small { font-size: 11px; color: var(--sub); }
  .dstrip b { font-size: 16px; font-weight: 700; }
  .dstrip .sun small, .dstrip .sun b { color: #d0453a; }
  .dstrip .sat small, .dstrip .sat b { color: #2f64d8; }
  .dstrip button.far:not(.on) { border-style: dashed; background: #f8f9fa; }
  .dstrip button.far:not(.on) b { color: #868e96; }
  .dstrip .mlab.fend { background: #fff4e6; color: #d9480f; font-size: 11px; }
  .dstrip button.on { background: var(--ink); border-color: var(--ink); }
  .dstrip button.on small, .dstrip button.on b { color: #fff; }
  .dstrip .mlab { flex: none; align-self: stretch; display: flex; align-items: center; justify-content: center; width: 30px; border-radius: 10px;
    background: var(--bg); color: var(--ink); font-size: 12px; font-weight: 700; line-height: 1.1; writing-mode: vertical-rl; letter-spacing: 1px; }
  /* 달 버튼 줄: [10월][11월]  예측 11/14까지  [📅 달력] */
  .dmonth { order: 1; display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
  .mtabs { flex: 1; min-width: 0; display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--bg); overflow-x: auto; scrollbar-width: none; }
  .mtabs::-webkit-scrollbar { display: none; }
  .mtabs button { flex: none; border: 0; background: none; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 14px; font-weight: 700; color: var(--sub); }
  .mtabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
  .calbtn { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 18px; padding: 7px 11px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); }
  .calbtn.on { background: var(--ink); border-color: var(--ink); color: #fff; }
  .calopen #cal { display: block; order: 1; margin-bottom: 8px; }
  .calopen .dstrip { display: none; }
  .calopen .grid button, .calopen .grid span { height: 40px; font-size: 15px; }
  .calopen .grid span.off { line-height: 40px; }
  .calopen .calhead .nav { font-size: 26px; padding: 4px 14px; }
  #regionBar { order: 2; margin: 0 0 8px; }
  [data-pane=crowd] .filt { order: 3; display: flex; align-items: center; gap: 6px; margin-top: 4px; }
  .filt .flabel { flex: none; width: 36px; margin: 0; font-size: 11px; line-height: 1.25; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -14px; padding: 0 14px 2px 0; scrollbar-width: none; }
  .chips button { flex: none; min-height: 38px; padding: 8px 13px; font-size: 13.5px; }
  [data-pane=crowd] .sortseg { order: 5; margin-top: 12px; }
  #listTitle { order: 6; }
  #list { order: 7; }
  [data-pane=crowd] .note { order: 9; }
  .seg button, .sortseg button { padding: 12px 0; font-size: 14px; }
  #fuel button { padding: 11px 0; font-size: 13.5px; }
  .m-hide { display: none; }   /* 칩에 그림·이름이 있어 제목 없이도 알아본다 — 접힌 시트를 낮게 */
  #menuChips { margin-bottom: 8px; }
  .panel h2 { margin: 14px 0 6px; font-size: 15px; line-height: 1.4; }
  .list li { min-height: 56px; padding: 11px 2px; }
  .list li:hover { background: none; }
  .list .nm b { font-size: 15px; }

  /* 점을 누르면 말풍선 대신 시트에 자세히 */
  .pbody.det section, .pbody.det .toidx, .pbody.det .src { display: none !important; }
  .detail:not([hidden]) { display: block; }
  .dethead { position: sticky; top: 22px; z-index: 5; display: flex; padding: 0 0 8px; background: #fff; }
  .detback { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); }
  .detail .pop { font-size: 14px; line-height: 1.5; }
  .detail .pop h3 { font-size: 20px; padding-right: 0; }
  .detail .pop .area { font-size: 13px; }
  .detail .pop .big { font-size: 17px; }
  .detail .pop .img { height: 190px; border-radius: 12px; }
  .detail .pop svg { width: 100%; height: auto; }
  .detail .pop .tip { font-size: 13px; }
  .detail .pop .addcart { padding: 12px; font-size: 15px; }
  .detail .orow { gap: 6px; margin-top: 8px; }
  .detail .orow span { width: 60px; font-size: 12px; }
  .detail .orow a { padding: 8px 13px; font-size: 13px; }
  .detail .more { padding: 10px 0; font-size: 14px; }
  .detail .menu { font-size: 14px; }
  .detail .menu td { padding: 8px 0; }
  .detail .oil { flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
}

/* 물때·휴양림(10-16) — 날짜 줄, 물때 표, 7일 간조 */
.dbar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.dbar button { flex: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); }
.dbar button:disabled { opacity: .3; cursor: default; }
.dbar .dlab { flex: 1; text-align: center; font-size: 16px; }
.dbar .dlab small { margin-left: 6px; padding: 2px 7px; border-radius: 9px; background: var(--ink); color: #fff; font-size: 11px; vertical-align: 2px; }
.dbar .dpick { position: relative; flex: none; border: 1px solid var(--line); border-radius: 18px; padding: 8px 11px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dbar .dpick input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.list .dot.sq { border-radius: 3px; border: 0; }
.pop table.tide { border-collapse: collapse; margin: 8px 0 2px; font-size: 13px; }
.pop table.tide td { padding: 2px 10px 2px 0; }
.pop table.tide tr.hi td:first-child { color: #0b7285; font-weight: 700; }
.pop table.tide tr.lo td:first-child { color: #e8590c; font-weight: 700; }
.pop .warn { color: #c92a2a; }
.pop .twk { margin-top: 10px; font-size: 12px; }
.pop .twh { font-weight: 700; margin-bottom: 4px; }
.pop .twr { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.pop .twr.big { font-weight: 700; }
.pop .twd { width: 64px; flex: none; }
.pop .twl { flex: 1; }
.pop .twb { width: 54px; height: 6px; background: #e9ecef; border-radius: 3px; overflow: hidden; flex: none; }
.pop .twb i { display: block; height: 100%; background: #0b7285; }
.pop .twv { width: 44px; text-align: right; flex: none; color: var(--sub); }
.pop .twk small { display: block; color: var(--sub); margin-top: 4px; }
.pop .flabel { margin-top: 10px; }

/* 홈 화면에 추가(10-16) — 시트/패널 맨 위 띠, 안내 창 */
.a2hs { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 8px 8px 10px; border-radius: 12px; background: #fff4f8; border: 1px solid #ffd0e2; }
.a2hs[hidden] { display: none; }
.a2hs img { border-radius: 9px; flex: none; }
.a2hs span { flex: 1; font-size: 14px; line-height: 1.3; }
.a2hs small { display: block; font-size: 12px; color: var(--sub); }
.a2hs .go { flex: none; border: 0; border-radius: 18px; padding: 8px 14px; background: var(--ink); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.a2hs .x { flex: none; border: 0; background: none; color: var(--sub); font-size: 16px; padding: 6px; cursor: pointer; }
.a2guide { position: fixed; inset: 0; z-index: 3000; background: rgba(23,24,27,.5); display: flex; align-items: flex-end; justify-content: center; }
.a2guide .box { width: min(440px, 100%); background: #fff; border-radius: 16px 16px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }
.a2guide h3 { margin: 0 0 10px; font-size: 18px; }
.a2guide ol { margin: 0 0 14px; padding-left: 22px; line-height: 1.8; font-size: 15px; }
.a2guide p { font-size: 13px; color: var(--sub); margin: 0 0 12px; }
.a2guide .btns { display: flex; gap: 8px; }
.a2guide .btns button, .a2guide .btns a { flex: 1; text-align: center; border: 1px solid var(--line); border-radius: 10px; padding: 11px; font: inherit; font-size: 15px; font-weight: 600; background: #fff; color: var(--ink); text-decoration: none; cursor: pointer; }
.a2guide .btns .pri { background: var(--ink); border-color: var(--ink); color: #fff; }
.a2guide .ico { display: inline-block; padding: 0 5px; border: 1px solid var(--line); border-radius: 5px; font-size: 13px; }
@media (min-width: 761px) { .a2guide { align-items: center; } .a2guide .box { border-radius: 16px; } }

/* 첫 방문 사용법 창(10-16) — 홈 화면 추가 안내 창(.a2guide)과 같은 틀 */
.intro .tips { list-style: none; margin: 0 0 16px; padding: 0; }
.intro .tips li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--sub); }
.intro .tips li:last-child { border-bottom: 0; }
.intro .tips li b:first-child { display: block; color: var(--ink); font-size: 15px; margin-bottom: 1px; }
.intro .btns .skip { color: var(--sub); font-weight: 500; font-size: 14px; }

/* 공유하기(10-16) */
.phead { position: relative; }
.sharebtn { position: absolute; top: 18px; right: 16px; display: flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: #fff; border-radius: 18px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.sharepop { display: block; width: 100%; margin: 6px 0 4px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 4000; background: rgba(23,24,27,.92); color: #fff; padding: 10px 16px; border-radius: 20px; font-size: 14px; max-width: 90vw; text-align: center; }
@media (max-width: 760px) {
  .phead { grid-template-columns: auto 1fr auto; }
  .sharebtn { position: static; grid-column: 3; grid-row: 1; width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 50%; }
  .sharebtn span { display: none; }
}