/* 가보까 공통 스타일 — 토큰은 :root. 화면별 규칙은 아래 섹션 주석 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 화면엔 안 보이고 검색엔진·스크린리더만 읽는 글 */
:root {
        --bg: #FFFFFF; --text: #1A1A1A; --sub: #767676; --muted: #A0A0A0;
        --line: #F0F0F0; --surface: #F6F6F7; --thumb: #F2F2F3;
        --accent: #E8442A; --link: #E0401F;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { -webkit-text-size-adjust: 100%; }
    body {
        background: var(--bg); color: var(--text);
        font-family: 'Pretendard Variable', Pretendard, 'IBM Plex Sans KR', -apple-system, sans-serif;
        font-size: 15px; line-height: 1.45; letter-spacing: -0.01em;
    }
    a { color: inherit; text-decoration: none; }
    .app { max-width: 480px; margin: 0 auto; padding-bottom: 76px; background: var(--bg); min-height: 100vh; }
    .jua { font-family: 'Jua', sans-serif; font-weight: 400; letter-spacing: 0; }

    /* 상단 */
    .top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; }
    .logo { font-family: 'Jua', sans-serif; font-size: 25px; color: var(--accent); flex: none; line-height: 1; }
    .search { flex: 1; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 21px; background: var(--surface); color: var(--muted); font-size: 15px; }
    .search svg { width: 18px; height: 18px; flex: none; }

    /* 배너 */
    .banners { display: flex; gap: 10px; overflow-x: auto; padding: 4px 16px 0; scroll-snap-type: x mandatory; scroll-padding-left: 16px; scrollbar-width: none; }
    .banners::-webkit-scrollbar { display: none; }
    .banner { position: relative; flex: none; width: calc(100% - 0px); scroll-snap-align: start; height: 132px; padding: 20px 20px; border-radius: 18px; background: #FFF0EC; overflow: hidden; color: inherit; display: block; }
    .banners .banner + .banner { background: #EAF7EE; }
    .banners .banner + .banner .tag { background: #26713F; }
    .banner .tag { display: inline-block; padding: 3px 10px; border-radius: 12px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; }
    .banner h2 { margin-top: 8px; font-size: 21px; line-height: 1.32; }
    .banner .art { position: absolute; right: 18px; bottom: 16px; width: 76px; height: 76px; }
    .banner .art svg { width: 100%; height: 100%; }
    .banner .page { position: absolute; top: 12px; right: 12px; padding: 2px 9px; border-radius: 11px; background: rgba(26,26,26,.45); color: #fff; font-size: 12px; font-weight: 600; }

    /* 카테고리 */
    /* 홈 카테고리: 5개씩 줄바꿈 격자 (메뉴가 늘면 다음 줄로). 목록 화면은 .cats.small 로 한 줄 가로 스크롤 */
    .cats { display: grid; grid-template-columns: repeat(5, 1fr); row-gap: 14px; padding: 20px 8px 22px; }
    .cat { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; }
    .cat .box { width: 54px; height: 54px; border-radius: 17px; background: var(--surface); display: flex; align-items: center; justify-content: center; border: 1.5px solid transparent; }
    .cat .box svg { width: 34px; height: 34px; }
    .cat.on .box { background: #FFF1EC; border-color: var(--accent); }
    .cat.on span { font-weight: 700; }

    .gap { height: 8px; background: var(--surface); }
    section + .gap { margin-top: 10px; }

    /* 목록 */
    .head { display: flex; align-items: baseline; justify-content: space-between; padding: 22px 16px 6px; }
    .head h3 { font-size: 21px; }
    .head h3 small { font-family: 'Pretendard Variable', Pretendard, 'IBM Plex Sans KR', sans-serif; font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 2px; }
    .head a { font-size: 13px; color: var(--sub); }
    .head .reset { color: var(--link); }
    .head .hint-right { font-size: 12px; color: var(--muted); }
    .card { display: flex; gap: 14px; padding: 12px 16px; color: inherit; }
    .thumb { flex: none; width: 84px; height: 84px; border-radius: 12px; background: var(--thumb); color: var(--muted); font-size: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .thumb img { width: 100%; height: 100%; object-fit: cover; }
    .info { min-width: 0; flex: 1; padding-top: 1px; }
    .badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 5px; }
    .b { padding: 2px 7px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.5; background: var(--surface); color: var(--sub); }
    .b-free { background: #E8F6EC; color: #1B7A3E; }
    .b-fest { background: #FFF0EC; color: #C43A1C; }
    .b-kid { background: #EFF1FB; color: #3B4A9E; }
    .b-book { background: #FFF6E5; color: #8A6212; }
    .b-exp { background: #EAF7EE; color: #26713F; }
    .b-dist { background: #EFF1FB; color: #3B4A9E; }
    .b-hot { background: #FFEBE6; color: #E0401F; }
    .b.st-on { background: var(--accent); color: #fff; }      /* 진행 중 (구석구석식 상태 뱃지) */
    .b.st-soon { background: #EFF1FB; color: #3B4A9E; }
    .b.st-end { background: #333; color: #fff; }
    .b.wx { background: #fff; border: 1px solid #FFD3C4; color: var(--sub); } .b.wx em { font-style: normal; color: #3B7DD8; font-weight: 700; } .b.wx em.hi { color: #E0401F; }
    .share-acts .sbtn svg.ic { width: 26px; height: 26px; }  /* 요즘 인기 — 네이버 블로그 언급 빈도 상위 */  /* 차로 N분 — 마맵 '도보 5분' 뱃지처럼 */
    .title { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .meta { margin-top: 2px; font-size: 13px; color: var(--sub); }
    .meta .dist { color: var(--muted); }
    .line { margin-top: 2px; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .line.addr { color: var(--muted); }
    .empty { padding: 40px 16px; text-align: center; color: var(--muted); font-size: 14px; }

    /* 하단 네비 */
    .nav { position: fixed; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; bottom: 0; background: var(--bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
    .nav ul { list-style: none; max-width: 480px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); height: 62px; }
    .nav a { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--muted); }
    .nav svg { width: 24px; height: 24px; }
    .nav .on { color: var(--text); font-weight: 700; }


/* ── 상단 바 (목록) ── */
.bar { display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 10px; }
.bar .back, .bar .icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--text); }
.bar .back svg, .bar .icon svg { width: 24px; height: 24px; }
.bar h1 { flex: 1; font-size: 22px; }
.bar .icon { color: var(--sub); }

/* ── 목록 ── */
.cats.small { display: flex; gap: 2px; overflow-x: auto; padding: 4px 10px 12px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cats.small::-webkit-scrollbar { display: none; }
.cats.small .cat { flex: none; width: 62px; font-size: 12px; scroll-snap-align: start; }
.cats.small .box { width: 46px; height: 46px; border-radius: 14px; }
.cats.small .box svg { width: 28px; height: 28px; }
.cats.small .box.all { font-family: 'Jua', sans-serif; font-size: 14px; color: var(--sub); }
.cats.small .cat.on .box.all { color: var(--accent); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.chip.on { background: var(--text); color: #fff; border-color: var(--text); }
.chip.sort b { font-weight: 400; font-size: 11px; color: var(--sub); }
.chip.fbtn { width: 40px; padding: 0; justify-content: center; position: relative; }
.chip.fbtn svg { width: 18px; height: 18px; }
.chip.fbtn i { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; font-style: normal; display: flex; align-items: center; justify-content: center; }
.chips .vsep { flex: none; width: 1px; height: 22px; background: var(--line); align-self: center; margin: 0 2px; }
.chip.accent { border-color: var(--accent); color: var(--link); }
.chip.accent b { color: var(--link); }
.sheet .fgrp { margin-bottom: 16px; }
.sheet .fgrp h5 { font-size: 14px; font-weight: 700; color: var(--sub); margin: 0 0 8px; }
.sheet .fgrp .hint { margin: 8px 0 0; }
.sheet-foot a.close { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.count { padding: 8px 16px 6px; font-size: 14px; color: var(--sub); }
.count em { font-style: normal; color: var(--link); font-weight: 600; }
.hero { display: block; padding: 6px 16px 14px; color: inherit; border-bottom: 8px solid var(--surface); margin-bottom: 4px; }
.hero .photo { position: relative; height: 190px; border-radius: 16px; background: var(--thumb); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.hero .photo img { width: 100%; height: 100%; object-fit: cover; }
.hero .photo .tag { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 4px 10px; border-radius: 8px; background: rgba(26,26,26,.7); color: #fff; font-size: 12px; font-weight: 600; }
.hero .badges { margin-bottom: 6px; }
.hero .meta + .badges { margin: 6px 0 0; }
.hero .title { font-size: 19px; font-weight: 700; white-space: normal; }
.hero .meta { margin-top: 3px; font-size: 13px; color: var(--sub); }
.hero .line { margin-top: 6px; font-size: 14px; white-space: normal; }
.more { display: block; margin: 10px 16px 20px; padding: 13px; border-radius: 12px; background: var(--surface); text-align: center; font-size: 14px; font-weight: 600; color: var(--text); }

/* ── 상세 ── */
.detail { padding-bottom: 96px; }
.gallery { position: relative; height: 260px; background: var(--thumb); overflow: hidden; }
.gallery .track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery .track::-webkit-scrollbar { display: none; }
.gallery .photo { flex: none; width: 100%; height: 100%; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; background: var(--thumb); }
.gallery .photo img { width: 100%; height: 100%; object-fit: cover; }
.credit { padding: 6px 16px 0; font-size: 11px; color: var(--muted); text-align: right; }
/* 반응 줄: 좋아요 · 저장 · 공유 */
.react { display: flex; gap: 6px; padding: 10px 16px 0; }
.react .rb { height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.react .rb svg { width: 18px; height: 18px; }
.react .rb b { font-weight: 700; color: var(--sub); }
.react .rb.like.on { color: #E0401F; border-color: #FFC9B8; background: #FFF3EF; } .react .rb.like.on svg { fill: #E0401F; }
.react .rb.save.on { color: var(--text); border-color: var(--text); } .react .rb.save.on svg { fill: var(--text); }
.cta .save.on svg { fill: var(--text); }
.share-acts { display: flex; gap: 10px; }
.share-acts .sbtn { flex: 1; height: 72px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.share-acts .sbtn .ic { font-size: 22px; }
.share-acts .sbtn.kakao { background: #FEE500; border-color: #FEE500; }
.toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); padding: 10px 16px; border-radius: 12px; background: rgba(26,26,26,.9); color: #fff; font-size: 13.5px; z-index: 60; white-space: nowrap; }
.gallery .back { position: absolute; z-index: 5; top: 12px; left: 12px; width: 40px; height: 40px; border-radius: 20px; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; color: var(--text); }
.gallery .back svg { width: 22px; height: 22px; }
.gallery .page { position: absolute; z-index: 5; right: 12px; bottom: 12px; padding: 3px 10px; border-radius: 12px; background: rgba(26,26,26,.55); color: #fff; font-size: 12px; font-weight: 600; }
.detail .dhead { padding: 16px 16px 4px; }
.detail .dhead h1 { font-size: 26px; line-height: 1.25; margin-top: 8px; }
.detail .summary { margin-top: 8px; font-size: 15px; line-height: 1.5; }
.detail .when { margin-top: 10px; font-size: 15px; color: var(--sub); }
.detail .where { margin-top: 2px; font-size: 14px; color: var(--sub); }
.tiles { display: flex; gap: 8px; padding: 14px 16px 4px; overflow-x: auto; scrollbar-width: none; }
.tiles::-webkit-scrollbar { display: none; }
.tile { flex: 1 0 84px; background: var(--surface); border-radius: 14px; padding: 12px 8px; text-align: center; }
.tile span { display: block; font-size: 12px; color: var(--sub); }
.tile b { display: block; margin-top: 4px; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map { position: relative; display: block; margin: 14px 16px 0; height: 120px; border-radius: 16px; background: #E9F1E6 linear-gradient(115deg, transparent 46%, #F4F8F1 46%, #F4F8F1 52%, transparent 52%); overflow: hidden; }
.map .pin { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 22px; background: #fff; border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; }
.map .pin svg { width: 26px; height: 26px; }
.map .label { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 5px 12px; border-radius: 12px; background: var(--text); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.map .label small { font-weight: 400; color: #ccc; }
/* AI 가이드 카드 (상세) */
.aiguide { margin: 14px 16px 0; padding: 16px 16px 12px; border-radius: 16px; background: linear-gradient(180deg, #FFF4F0 0%, #FFFAF8 100%); border: 1px solid #FFE1D6; }
.aiguide .ag-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.aiguide .ag-icon { width: 24px; height: 24px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.aiguide h2 { font-size: 15px; font-weight: 800; }
.aiguide .ag-headline { font-size: 17px; font-weight: 700; line-height: 1.4; margin-bottom: 10px; }
.aiguide .ag-grp { margin-top: 8px; }
.aiguide .ag-grp h3 { font-size: 12.5px; font-weight: 700; color: var(--link); margin-bottom: 4px; }
.aiguide ul { list-style: none; padding: 0; margin: 0; }
.aiguide li { position: relative; padding-left: 14px; font-size: 14px; line-height: 1.55; color: var(--text); }
.aiguide li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 3px; background: var(--accent); }
.aiguide .ag-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #FFD3C4; }
.aiguide .ag-helpful { height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid #FFC9B8; background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); }
.aiguide .ag-helpful b { color: var(--link); margin-left: 2px; }
.aiguide .ag-helpful.done { background: var(--accent); border-color: var(--accent); color: #fff; }
.aiguide .ag-helpful.done b { color: #fff; }
.aiguide .ag-note { font-size: 11.5px; color: var(--muted); }
.about, .near { padding: 22px 16px 0; }
.about h2, .near h2 { font-size: 19px; margin-bottom: 10px; }
.about .text { font-size: 14.5px; line-height: 1.65; color: var(--text); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.about .text.open { display: block; }
.about .expand { margin-top: 8px; background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--link); }
.near .row { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: inherit; }
.near .thumb { width: 52px; height: 52px; border-radius: 10px; }
.near .title { font-size: 15px; }
.near .meta { margin-top: 1px; font-size: 13px; color: var(--sub); }
.source { padding: 22px 16px 10px; font-size: 12px; color: var(--muted); }
.cta { position: fixed; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; bottom: 0; background: var(--bg); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 10px; }
.cta .save { flex: none; width: 56px; height: 56px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--text); display: flex; align-items: center; justify-content: center; }
.cta .save svg { width: 24px; height: 24px; }
.cta .primary { flex: 1; height: 56px; border-radius: 14px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.cta .primary svg { width: 20px; height: 20px; }

/* ── 홈 레일 (카테고리별 가로 슬라이딩) ── */
.rail { padding: 18px 0 6px; }
.rail-head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 10px; }
.rail-head h3 { font-size: 21px; }
.rail-head .all { width: 32px; height: 32px; border-radius: 16px; background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--text); }
.rail-head .all svg { width: 18px; height: 18px; }
.rail-track { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 8px; scroll-snap-type: x mandatory; scroll-padding-left: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rail-track::-webkit-scrollbar { display: none; }
.tile-card { flex: none; width: 210px; scroll-snap-align: start; color: inherit; }
.tile-card .photo { position: relative; width: 210px; height: 200px; border-radius: 14px; background: var(--thumb); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.tile-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.tile-card .photo .tag { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 7px; background: rgba(255,255,255,.92); color: var(--text); font-size: 12px; font-weight: 700; }
.tile-card .title { margin-top: 9px; font-size: 15px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.tile-card .meta { margin-top: 2px; font-size: 13px; color: var(--sub); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-card .badges { margin: 6px 0 0; }
.tile-card .line { margin-top: 5px; font-size: 13px; line-height: 1.4; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-card .line.sub { color: var(--sub); }
.tile-card .line .addr { color: var(--muted); }
.tile-more { flex: none; width: 110px; height: 200px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--sub); font-size: 13px; font-weight: 600; }
.tile-more .circle { width: 44px; height: 44px; border-radius: 22px; background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--text); }
.tile-more .circle svg { width: 20px; height: 20px; }
.home { padding-bottom: 84px; }

/* ── 홈 간편 필터 칩 + 바텀시트 ── */
.home-chips { padding: 14px 16px; }
.home .cats { padding-bottom: 18px; }
.chip.place svg { width: 16px; height: 16px; margin-right: 2px; }
.chip.on b { color: #ddd; }
.notice { margin: 16px; padding: 22px 16px; border-radius: 16px; background: var(--surface); text-align: center; font-size: 15px; line-height: 1.5; }
.notice .btn, .rail-empty .btn { display: inline-block; margin-top: 12px; padding: 9px 16px; border-radius: 10px; background: var(--text); color: #fff; font-size: 14px; font-weight: 600; }
.rail-empty { margin: 0 16px; padding: 22px 16px; border-radius: 14px; background: var(--surface); text-align: center; color: var(--sub); font-size: 14px; }
.rail-empty span { display: block; }
.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet[hidden] { display: none; }
.sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.sheet-body { position: absolute; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; max-height: 82vh; overflow-y: auto; background: var(--bg); border-radius: 20px 20px 0 0; padding: 8px 20px calc(36px + env(safe-area-inset-bottom)); }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 14px; }
.sheet h4 { font-size: 17px; font-weight: 700; margin: 14px 0 14px; }
.sheet .geo { width: 100%; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); font: inherit; font-size: 15px; font-weight: 600; color: var(--text); text-align: left; }
.sheet .geo svg { width: 20px; height: 20px; color: var(--accent); }
.sheet .geo small { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); }
.sheet .geo.busy { opacity: .5; }
.pick { display: grid; grid-template-columns: 96px 1fr; gap: 8px; height: 240px; margin-top: 10px; }
.pick .col { overflow-y: auto; border-radius: 12px; background: var(--surface); padding: 6px; }
.pick .col.gu { background: var(--bg); border: 1px solid var(--line); }
.sheet .opt { display: block; width: 100%; padding: 9px 10px; border-radius: 9px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text); text-align: left; }
.sheet .opt.on { background: var(--text); color: #fff; font-weight: 700; }
.pick .other p { padding: 14px 10px; font-size: 14px; line-height: 1.5; color: var(--sub); }
.dists, .whens, .opts { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 4px; }
.dists .opt, .whens .opt, .opts .opt { width: auto; padding: 12px 16px; border-radius: 12px; border: 0; background: var(--surface); font-size: 15px; }
.dists .opt input { position: absolute; opacity: 0; pointer-events: none; }
.dists .opt.on, .whens .opt.on, .opts .opt.on { background: var(--text); color: #fff; }
.sheet-foot { display: flex; gap: 10px; margin-top: 22px; }
.sheet .close { flex: 0 0 100px; height: 52px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; font-weight: 600; }
.sheet .apply { flex: 1; height: 52px; border-radius: 14px; border: 0; background: var(--accent); color: #fff; font: inherit; font-size: 16px; font-weight: 700; }
body.noscroll { overflow: hidden; }
.sheet .apply:disabled { background: var(--surface); color: var(--muted); }
.chip.place:not(.on) { border-color: var(--accent); color: var(--link); }
.chip.off { color: var(--muted); border-style: dashed; }
.sheet .hint { margin: -4px 0 10px; font-size: 13px; color: var(--sub); }

/* 상세 이용 안내 */
.guide { padding: 22px 16px 0; }
.guide h2 { font-size: 19px; margin-bottom: 8px; }
.guide dl div { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.guide dt { flex: none; width: 60px; color: var(--sub); }
.guide dd { white-space: pre-line; }

/* ── 검색 ── */
.sbar { gap: 8px; }
.sfield { flex: 1; cursor: text; }
.sfield input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--text); outline: none; }
.sfield input::placeholder { color: var(--muted); }
.search-page .empty small { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }

/* ── 내 주변 (지도) ── */
body.has-map { overflow: hidden; }
.mapapp { position: fixed; inset: 0; bottom: 62px; max-width: 480px; margin: 0 auto; padding: 0; overflow: hidden; min-height: 0; height: auto; } /* .app 의 min-height 100vh 가 카드를 화면 밖으로 밀었다 */
.mapcanvas { width: 100%; height: 100%; background: #E9F1E6; } /* 네이버 SDK 가 컨테이너를 position:relative 로 바꾸므로 크기는 %로 */
.map-notice { position: absolute; left: 16px; right: 16px; top: 40%; z-index: 5; }
/* 핀 (네이버 마커 content) */
.pin.sel .dot { transform: scale(1.18); }
.pin.sel .lbl { background: var(--accent); color: #fff; }
/* ---------- 내 주변: 위 검색·칩, 번호 핀, 반 지도/반 목록 시트 (2026-10-01) ---------- */
.map-top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; padding: 12px 0 0; pointer-events: none; }
.map-top > * { pointer-events: auto; }
.map-search { margin: 0 16px; height: 46px; border-radius: 23px; background: var(--bg); box-shadow: 0 2px 10px rgba(0,0,0,.12); display: flex; align-items: center; gap: 8px; padding: 0 16px; color: var(--muted); font-size: 15px; }
.map-search svg { width: 18px; height: 18px; }
.map-chips { display: flex; gap: 8px; padding: 10px 16px 0; overflow-x: auto; scrollbar-width: none; }
.map-chips.cats { padding-top: 8px; }
.map-chips::-webkit-scrollbar { display: none; }
.mchip { flex: none; height: 34px; padding: 0 13px; border-radius: 17px; border: 0; background: var(--bg); box-shadow: 0 1px 6px rgba(0,0,0,.12); font: inherit; font-size: 14px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.mchip i { width: 8px; height: 8px; border-radius: 4px; display: inline-block; }
.mchip.on { background: var(--text); color: #fff; }
.cats .mchip { height: 30px; font-size: 13px; padding: 0 11px; }
.locate { position: absolute; right: 16px; bottom: calc(var(--sheet, 50%) + 14px); width: 44px; height: 44px; border-radius: 22px; border: 0; background: var(--bg); box-shadow: 0 2px 10px rgba(0,0,0,.15); display: flex; align-items: center; justify-content: center; color: var(--text); z-index: 5; transition: bottom .25s; }
.locate svg { width: 22px; height: 22px; }
.sheet-map { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: var(--bg); border-radius: 20px 20px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,.14); z-index: 6; display: flex; flex-direction: column; transition: height .25s ease; }
.sheet-map .grab { flex: none; padding: 8px 16px 10px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.sheet-map .bar { display: block; width: 40px; height: 4px; border-radius: 2px; background: #D9D9DE; margin: 0 auto 10px; }
.sheet-map .shead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sheet-map .shead h2 { font-size: 17px; font-weight: 800; white-space: nowrap; }
.sheet-map .shead p { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-map .slist { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; }
.mcard { position: relative; }
.mcard .thumb { position: relative; }
.mcard .rk { position: absolute; left: 0; top: 0; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 12px 0 10px 0; background: var(--text); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.mcard.sel { background: var(--surface); }
.mcard.sel .rk { background: var(--accent); }
/* 번호 핀 — 카테고리 색 테두리, 1~3위는 크게, 선택은 주황. 상세 미니맵은 아래 .pin 을 쓴다 */
.npin { position: relative; width: 36px; text-align: center; }
.npin .num { width: 36px; height: 36px; border-radius: 18px; background: #fff; border: 2.5px solid var(--c); box-shadow: 0 2px 6px rgba(0,0,0,.2); font-size: 15px; font-weight: 800; color: var(--text); display: flex; align-items: center; justify-content: center; }
.npin .lbl { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); max-width: 150px; padding: 3px 8px; border-radius: 8px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.npin .lbl em { font-style: normal; color: var(--accent); margin-left: 2px; }
.npin.big .num { width: 42px; height: 42px; border-radius: 21px; margin-left: -3px; font-size: 17px; border-width: 3px; }
.npin.big .lbl { top: 46px; font-size: 13px; }
.npin.plain .num { background: var(--surface); color: var(--muted); border-color: #999; }
.npin.sel .num { background: var(--accent); border-color: var(--accent); color: #fff; }
.npin.sel .lbl { background: var(--accent); color: #fff; }
.npin.sel .lbl em { color: #fff; }
.pin { position: relative; width: 44px; text-align: center; }
.pin .dot { width: 44px; height: 44px; border-radius: 22px; background: #fff; border: 2.5px solid var(--c); box-shadow: 0 2px 6px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; }
.pin .dot svg { width: 26px; height: 26px; }
.pin .dot::after { content: ''; position: absolute; left: 50%; top: 42px; transform: translateX(-50%); border: 6px solid transparent; border-top: 8px solid var(--c); }
.me { width: 18px; height: 18px; border-radius: 9px; background: #2F80ED; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(47,128,237,.2); }

.headline { padding: 18px 16px 4px; font-size: 22px; line-height: 1.3; }
.home-chips { padding-top: 10px; }

/* 상세 위치 블록 (마맵·캐치테이블식) */
.loc { padding: 22px 16px 0; }
.loc h2 { font-size: 19px; margin-bottom: 10px; }
.minimap { position: relative; display: block; height: 180px; border-radius: 16px; overflow: hidden; background: #E9F1E6; }
.minimap #minimap { width: 100%; height: 100%; }
.minimap .zoom { position: absolute; right: 10px; top: 10px; padding: 5px 10px; border-radius: 10px; background: rgba(255,255,255,.95); box-shadow: 0 1px 4px rgba(0,0,0,.15); font-size: 12px; font-weight: 600; color: var(--text); z-index: 5; }
.minimap .pin .lbl { display: none; }
.addr-row { display: flex; align-items: flex-start; gap: 6px; margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--text); }
.addr-row svg { width: 18px; height: 18px; flex: none; color: var(--sub); margin-top: 2px; }
.loc .badges { margin-top: 8px; }
.loc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.lbtn { height: 48px; border-radius: 12px; background: var(--surface); border: 0; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; }
.lbtn.wide { width: 100%; margin-top: 8px; }
.lbtn svg { width: 18px; height: 18px; }
.lbtn .appic { width: 22px; height: 22px; border-radius: 6px; flex: none; }

/* ── 데스크톱: 캐치테이블처럼 가운데 480px 틀 + 좌우 그림자 ── */
@media (min-width: 481px) {
    body { background: #F3F4F6; }
    .app, .nav, .cta, .sheet-body, .mapapp { box-shadow: 0 0 28px rgba(0, 0, 0, .10); }
    .nav, .cta { box-shadow: 0 -2px 0 var(--line), 0 0 28px rgba(0, 0, 0, .10); border-top: 0; }
    .mapapp { left: 50%; right: auto; width: 480px; transform: translateX(-50%); }
}

/* 검색 화면 */
.sfield .clear { border: 0; background: var(--line); color: var(--sub); width: 22px; height: 22px; border-radius: 11px; font-size: 12px; line-height: 22px; text-align: center; padding: 0; }
.sfield .clear[hidden] { display: none; }
.sblock { padding: 14px 16px 6px; }
.shead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.shead h3 { font-size: 15px; font-weight: 700; }
.shead button { border: 0; background: none; font: inherit; font-size: 13px; color: var(--sub); }
.schips { display: flex; flex-wrap: wrap; gap: 8px; }
.schip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 14px; }
.schip.recent { background: var(--surface); border-color: transparent; }
.schip button { border: 0; background: none; padding: 0; color: var(--muted); font-size: 11px; line-height: 1; }
.stip { margin-top: 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.spick { padding-top: 10px; }
.spick .rail-head h3 { font-size: 18px; }
.stip.sub { margin: -6px 16px 10px; }

/* ── 요즘 많이 찾는 곳 티커 ── */
.ticker { margin: 0 16px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); overflow: hidden; }
.ticker-line { width: 100%; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text); text-align: left; }
.ticker .fire { flex: none; font-size: 14px; }
.ticker .roll { flex: 1; min-width: 0; }
.ticker .roll .item { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker .roll .item[hidden] { display: none; }
.ticker b { color: var(--accent); font-weight: 800; min-width: 14px; }
.ticker i { font-style: normal; font-size: 11px; font-weight: 700; }
.ticker i.new { color: var(--accent); } .ticker i.up { color: #E0401F; } .ticker i.down { color: #3B4A9E; } .ticker i.same { color: var(--muted); }
.ticker .caret { flex: none; color: var(--sub); font-size: 12px; transition: transform .15s; }
.ticker.open .caret { transform: rotate(180deg); }
.ticker-panel { border-top: 1px solid var(--line); padding: 12px 14px 8px; }
.ticker-panel[hidden] { display: none; }
.ticker-head { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.ticker-head small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); }
.ticker-panel ol { list-style: none; }
.ticker-panel li a { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--text); }
.ticker-panel li .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker-panel li .c { font-size: 12px; color: var(--sub); }

/* 상세: 바깥 링크·블로그 후기 */
.outlinks { display: flex; gap: 8px; padding: 14px 16px 0; }
.outlinks .lbtn { flex: 1; }
.posts { padding: 22px 16px 0; }
.posts h2 { font-size: 19px; margin-bottom: 8px; }
.posts h2 small { font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 13px; font-weight: 600; color: var(--sub); margin-left: 4px; }
.posts ul { list-style: none; }
.posts li a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.posts li .t { display: block; font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.posts li .m { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.posts .stip { margin-top: 8px; }
/* 제3유형 사진은 카드에서도 자르지 않는다 */
/* 공공누리 제3유형(변경 금지): 사진은 자르지 않고(contain) 빈 자리는 같은 사진을 흐리게 깔아 채운다 (10-02) */
/* 제3유형(변경 금지) 사진도 화면에선 칸에 꽉 채워 보여준다 — 파일을 바꾸는 게 아니라 보이는 범위만 (10-02 사용자 결정). .keep 은 표시만 남김 */