@charset "utf-8";
/* 갓성비 지도 위젯 */
.gfmap { position: relative; width: 100%; height: 70vh; min-height: 280px; overflow: hidden; background: #e5e7eb; font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; -webkit-tap-highlight-color: transparent; }
.gfmap-stage { position: absolute; inset: 0; }
.gfmap-canvas-box { position: absolute; inset: 0; }
.gfmap-canvas { width: 100%; height: 100%; }
.gfmap-msg { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 0 16px; color: #6b7280; font-size: 14px; text-align: center; background: #f3f4f6; }
.gfmap-msg[hidden] { display: none; }
.gfmap-error { padding: 16px; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 14px; }

/* 전체 화면 (full): 머리말 아래부터 화면 끝까지 고정 - top 은 스크립트가 머리말 높이로 맞춤
   ink 레이아웃 PC 틀(휴대폰 크기)에서는 틀 기준, 창 높이 틀에서는 --ink-frame-side · --ink-frame-cw 로 틀 폭에 맞춤 */
.gfmap.gfmap-full { position: fixed; left: var(--ink-frame-side, 0px); width: var(--ink-frame-cw, 100%); top: var(--gfmap-top, 56px); bottom: var(--ink-tabbar-h, 0px); height: auto; min-height: 0; z-index: 90; }
body.ink_pcframe_device .gfmap.gfmap-full { left: 0; width: 100%; }
html.gfmap-lock, html.gfmap-lock body, html.gfmap-lock #ink_frame_scroll { overflow: hidden !important; }
/* [전체 화면] 버튼 (fill · fixed): 화면 전체 */
.gfmap.is-max { position: fixed !important; left: var(--ink-frame-side, 0px) !important; width: var(--ink-frame-cw, 100%) !important; top: 0 !important; bottom: 0 !important; height: auto !important; z-index: 100000 !important; }
body.ink_pcframe_device .gfmap.is-max { left: 0 !important; width: 100% !important; }

/* 위 왼쪽: 업소 수 */
.gfmap-badge { position: absolute; left: 10px; top: 10px; z-index: 20; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .96); color: #111827; font-size: 13px; font-weight: 700; line-height: 1.2; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.gfmap-badge b { color: #16a34a; }
/* 오른쪽: 전체 화면 · 내 위치 · 확대 · 축소 */
.gfmap-tools { position: absolute; right: 10px; top: 10px; z-index: 20; display: flex; flex-direction: column; gap: 8px; }
.gfmap-tool { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .97); color: #111827; font-size: 22px; font-weight: 500; line-height: 40px; text-align: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.gfmap-tool[hidden] { display: none; }
.gfmap-tool:hover { background: #f3f4f6; }
.gfmap-tool svg { width: 20px; height: 20px; vertical-align: middle; }
.gfmap-tool.is-on { background: #16a34a; color: #fff; }
.gfmap-zin { margin-top: 6px; }

/* 업소 마커 · 묶음 · 내 위치 */
.gfmap-pin { position: relative; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; background: #16a34a; border: 2px solid #fff; transform: rotate(-45deg); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); cursor: pointer; }
.gfmap-pin::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; }
.gfmap-pin-name { position: absolute; left: 50%; top: 32px; transform: translateX(-50%); padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .95); color: #111827; font-size: 11px; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); pointer-events: none; }
/* 단독 업소: 원형 마커 + 업소명 (is-r 오른쪽 · is-l 왼쪽 · is-t 위 · is-b 아래 - 겹치면 스크립트가 자리를 바꿈) */
.gfmap-dot { position: relative; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: #16a34a; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); cursor: pointer; }
.gfmap-dot-name { position: absolute; max-width: 140px; height: 20px; padding: 0 7px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; border-radius: 10px; background: rgba(255, 255, 255, .96); color: #111827; font-size: 12px; font-weight: 700; line-height: 20px; white-space: nowrap; letter-spacing: -.02em; box-shadow: 0 1px 3px rgba(0, 0, 0, .28); pointer-events: none; }
.gfmap-dot-name.is-r { left: calc(100% + 7px); top: 50%; transform: translateY(-50%); }
.gfmap-dot-name.is-l { right: calc(100% + 7px); top: 50%; transform: translateY(-50%); }
.gfmap-dot-name.is-t { bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); }
.gfmap-dot-name.is-b { top: calc(100% + 7px); left: 50%; transform: translateX(-50%); }
html.gfmap-dark .gfmap-dot-name { background: rgba(36, 38, 43, .95); color: #e5e7eb; }
html.gfmap-dark .gfmap-dot { border-color: #24262b; }
.gfmap-cluster { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(22, 163, 74, .88); color: #fff; font-size: 13px; font-weight: 800; border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); cursor: pointer; }
.gfmap-me { width: 16px; height: 16px; border-radius: 50%; background: #2563eb; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(37, 99, 235, .25); }

/* 정보창 */
.gfmap-info { position: relative; min-width: 190px; max-width: 250px; padding: 11px 13px 10px; border-radius: 12px; background: #fff; color: #111827; font-size: 12px; line-height: 1.55; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
.gfmap-info b { display: block; padding-right: 18px; font-size: 14px; line-height: 1.4; }
.gfmap-info .c { display: inline-block; margin: 3px 0 2px; padding: 0 6px; border-radius: 4px; background: #dcfce7; color: #166534; font-size: 11px; font-weight: 700; }
.gfmap-info .a { color: #6b7280; }
.gfmap-info .m { margin-top: 2px; font-weight: 600; }
.gfmap-info a.go { display: inline-block; margin-top: 6px; color: #16a34a; font-weight: 800; text-decoration: none; }
.gfmap-info .x { position: absolute; right: 6px; top: 4px; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: #9ca3af; font-size: 18px; line-height: 22px; cursor: pointer; }
.gfmap-toast { position: absolute; left: 50%; bottom: 40px; z-index: 30; transform: translateX(-50%); padding: 8px 14px; border-radius: 8px; background: rgba(17, 24, 39, .85); color: #fff; font-size: 13px; white-space: nowrap; opacity: 0; transition: opacity .25s; pointer-events: none; }
.gfmap-toast.is-show { opacity: 1; }

/* 다크모드: 지도 그림만 어둡게, 바탕 · 버튼 · 정보창도 어둡게 */
html.gfmap-dark .gfmap { background: #34373d; }
html.gfmap-dark .gfmap-canvas img { filter: invert(0.85) hue-rotate(180deg) brightness(1.15) contrast(0.85) saturate(0.8); }
html.gfmap-dark .gfmap-msg { background: #24262b; color: #9ca3af; }
html.gfmap-dark .gfmap-badge, html.gfmap-dark .gfmap-tool { background: rgba(36, 38, 43, .95); color: #e5e7eb; }
html.gfmap-dark .gfmap-info { background: #24262b; color: #e5e7eb; }
html.gfmap-dark .gfmap-info .a { color: #9ca3af; }
html.gfmap-dark .gfmap-info .c { background: #14532d; color: #bbf7d0; }
html.gfmap-dark .gfmap-pin-name { background: rgba(36, 38, 43, .95); color: #e5e7eb; }

/* ===== 업소 화면: 아래에서 올라오는 시트 (학원 지역 지도와 같은 모양) =====
   처음(peek): 업소명 · 주소 · 연락처 · 별점 · 리뷰 · 버튼 · 사진 / 위로 올리면(full): 전체 화면 + 소개 · 리뷰 · 사진 탭
   ink 레이아웃 PC 틀에서는 틀 폭에 맞춤 (휴대폰 크기 틀은 body 기준) */
.gfs-sheet { position: fixed; left: var(--ink-frame-side, 0px); width: var(--ink-frame-cw, 100%); top: 0; bottom: 0; z-index: 1000; display: none; pointer-events: none; font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; -webkit-tap-highlight-color: transparent; }
body.ink_pcframe_device .gfs-sheet { left: 0; width: 100%; }
.gfs-sheet.is-open { display: block; }
.gfs-sheet *, .gfs-sheet *::before, .gfs-sheet *::after { box-sizing: border-box; }
.gfs-panel { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 18px rgba(0, 0, 0, .18); pointer-events: auto; transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1), border-radius .2s; will-change: transform; color: #374151; }
.gfs-panel.is-drag { transition: none; }
.gfs-sheet[data-state="full"] .gfs-panel { border-radius: 0; }
.gfs-grab { display: flex; justify-content: center; align-items: center; height: 22px; cursor: grab; touch-action: none; }
.gfs-grab span { width: 38px; height: 4px; border-radius: 2px; background: #d1d5db; }
.gfs-close { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #f3f4f6; color: #4b5563; cursor: pointer; }
.gfs-close svg { width: 18px; height: 18px; }
.gfs-scroll { height: calc(100% - 22px); overflow: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.gfs-sheet[data-state="full"] .gfs-scroll { overflow-y: auto; }
.gfs-peek { cursor: pointer; }
.gfs-sheet[data-state="full"] .gfs-peek { cursor: default; }
.gfs-head { padding: 2px 52px 0 16px; font-size: 14px; line-height: 1.5; }
.gfs-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 6px; }
.gfs-name b { font-size: 19px; font-weight: 800; color: #111827; letter-spacing: -0.02em; word-break: keep-all; }
.gfs-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); background: #16a34a; }
.gfs-badge svg { width: 13px; height: 13px; }
.gfs-cat { color: #6b7280; font-size: 13px; }
.gfs-row { display: flex; align-items: flex-start; gap: 6px; margin-top: 3px; }
.gfs-ico { flex: none; width: 15px; height: 15px; margin-top: 3px; fill: #9ca3af; }
.gfs-row a { color: #2563eb; text-decoration: none; font-weight: 600; }
.gfs-score { align-items: center; white-space: nowrap; }
.gfs-score .gfs-ico { margin-top: 0; }
.gfs-score .gfs-ico-star { fill: #f59e0b; }
.gfs-score b { color: #111827; font-weight: 700; }
.gfs-score a b { color: inherit; }
.gfs-sep { margin: 0 4px; color: #d1d5db; font-style: normal; }
.gfs-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gfs-act { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 15px; background: #fff; color: #374151; font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.gfs-act-main { border-color: #16a34a; background: #16a34a; color: #fff; }
.gfs-more { display: inline-block; margin-top: 8px; color: #2563eb; font-size: 13px; font-weight: 600; text-decoration: none; }
.gfs-more-b { display: block; margin-top: 18px; text-align: center; }
.gfs-strip { display: flex; gap: 6px; padding: 12px 16px 16px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.gfs-strip::-webkit-scrollbar { display: none; }
.gfs-ph { flex: none; width: 136px; height: 136px; border-radius: 10px; overflow: hidden; background: #f3f4f6; scroll-snap-align: start; }
.gfs-ph:first-child { width: 200px; }
.gfs-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gfs-strip.is-loading span { flex: none; width: 136px; height: 136px; border-radius: 10px; background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%); background-size: 200% 100%; animation: gfsShimmer 1.2s linear infinite; }
.gfs-strip.is-loading span:first-child { width: 200px; }
@keyframes gfsShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.gfs-peek:not(:has(.gfs-strip)) .gfs-head { padding-bottom: 16px; }
.gfs-tabs { position: sticky; top: 0; z-index: 2; display: flex; border-top: 8px solid #f3f4f6; border-bottom: 1px solid #e5e7eb; background: #fff; }
.gfs-tab { position: relative; flex: 1; height: 48px; padding: 0; border: 0; background: none; color: #6b7280; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.gfs-tab.is-on { color: #111827; }
.gfs-tab.is-on::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: -1px; height: 2px; border-radius: 1px; background: #111827; }
.gfs-panes { min-height: calc(100% - 56px); padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); font-size: 14px; line-height: 1.7; }
.gfs-pane[hidden] { display: none; }
.gfs-empty { padding: 48px 0; text-align: center; color: #9ca3af; font-size: 14px; }
.gfs-empty a { color: #2563eb; font-weight: 600; text-decoration: none; }
.gfs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: -16px -16px 0; }
.gfs-grid a { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #f3f4f6; }
.gfs-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 소개 */
.gfs-intro p { margin: 0 0 10px; color: #1f2937; word-break: keep-all; }
.gfs-sec { margin-top: 20px; }
.gfs-sec h4 { margin: 0 0 8px; color: #111827; font-size: 15px; font-weight: 800; }
.gfs-text { color: #374151; word-break: keep-all; }
.gfs-menu { margin: 0; padding: 0; list-style: none; }
.gfs-menu li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f3f4f6; }
.gfs-menu li span { flex: 1; min-width: 0; color: #1f2937; }
.gfs-menu li b { flex: none; color: #111827; font-weight: 800; }
.gfs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gfs-chips span { padding: 3px 10px; border-radius: 14px; background: #f3f4f6; color: #374151; font-size: 13px; }
.gfs-links { margin: 0; padding: 0; list-style: none; }
.gfs-links a { color: #2563eb; word-break: break-all; text-decoration: none; }
/* 리뷰 */
.gfs-rv-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding-bottom: 14px; border-bottom: 1px solid #e5e7eb; }
.gfs-rv-sum > b { font-size: 26px; font-weight: 800; color: #111827; line-height: 1; }
.gfs-rv-sum > span { color: #6b7280; font-size: 13px; }
.gfs-rv-sum .gfs-act-main { margin-left: auto; }
.gfs-stars { position: relative; display: inline-block; color: #e5e7eb; font-size: 14px; letter-spacing: 1px; line-height: 1; }
.gfs-stars-on { position: absolute; left: 0; top: 0; overflow: hidden; color: #f59e0b; white-space: nowrap; }
.gfs-rv { margin: 0; padding: 0; list-style: none; }
.gfs-rv li { padding: 14px 0; border-bottom: 1px solid #f3f4f6; }
.gfs-rv-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.gfs-rv-top b { color: #111827; font-size: 14px; }
.gfs-rv-top > span:last-child { margin-left: auto; color: #9ca3af; font-size: 12px; }
.gfs-rv-text { color: #374151; word-break: break-word; }
.gfs-rv-imgs { display: flex; gap: 4px; margin-top: 8px; overflow-x: auto; }
.gfs-rv-imgs img { flex: none; width: 88px; height: 88px; border-radius: 8px; object-fit: cover; }
.gfs-toast { position: absolute; left: 50%; bottom: 40px; z-index: 5; padding: 10px 16px; border-radius: 20px; background: rgba(33, 37, 41, .92); color: #fff; font-size: 13px; opacity: 0; transform: translate(-50%, 10px); transition: opacity .25s, transform .25s; pointer-events: none; }
.gfs-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
/* 다크모드 */
.gfs-sheet.is-dark .gfs-panel { background: #1c1e22; box-shadow: 0 -4px 18px rgba(0, 0, 0, .5); color: #d1d5db; }
.gfs-sheet.is-dark .gfs-grab span { background: #4b5058; }
.gfs-sheet.is-dark .gfs-close { background: #2a2d33; color: #d1d5db; }
.gfs-sheet.is-dark .gfs-name b, .gfs-sheet.is-dark .gfs-tab.is-on, .gfs-sheet.is-dark .gfs-score b, .gfs-sheet.is-dark .gfs-sec h4, .gfs-sheet.is-dark .gfs-menu li b, .gfs-sheet.is-dark .gfs-rv-sum > b, .gfs-sheet.is-dark .gfs-rv-top b { color: #f3f4f6; }
.gfs-sheet.is-dark .gfs-intro p, .gfs-sheet.is-dark .gfs-text, .gfs-sheet.is-dark .gfs-menu li span, .gfs-sheet.is-dark .gfs-rv-text { color: #d1d5db; }
.gfs-sheet.is-dark .gfs-tab.is-on::after { background: #f3f4f6; }
.gfs-sheet.is-dark .gfs-badge { border-color: #1c1e22; }
.gfs-sheet.is-dark .gfs-row a, .gfs-sheet.is-dark .gfs-more, .gfs-sheet.is-dark .gfs-links a, .gfs-sheet.is-dark .gfs-empty a { color: #8fb0ff; }
.gfs-sheet.is-dark .gfs-tabs { background: #1c1e22; border-top-color: #26292e; border-bottom-color: #33363c; }
.gfs-sheet.is-dark .gfs-ph, .gfs-sheet.is-dark .gfs-grid a { background: #2a2d33; }
.gfs-sheet.is-dark .gfs-act { background: #24262b; border-color: #33363c; color: #e5e7eb; }
.gfs-sheet.is-dark .gfs-act-main { background: #16a34a; border-color: #16a34a; color: #fff; }
.gfs-sheet.is-dark .gfs-chips span { background: #2a2d33; color: #d1d5db; }
.gfs-sheet.is-dark .gfs-menu li, .gfs-sheet.is-dark .gfs-rv li { border-bottom-color: #2a2d33; }
.gfs-sheet.is-dark .gfs-rv-sum { border-bottom-color: #33363c; }
.gfs-sheet.is-dark .gfs-stars { color: #3a3d44; }
.gfs-sheet.is-dark .gfs-strip.is-loading span { background: linear-gradient(90deg, #2a2d33 25%, #33363c 50%, #2a2d33 75%); background-size: 200% 100%; }
@media (prefers-reduced-motion: reduce) { .gfs-panel { transition: none; } .gfs-strip.is-loading span { animation: none; } }