/* ========================================================================== bw-2026-09.css — 부산어디? 2026-09 고도화 공통 스타일 (공통 헤더에서 로드: 언어 메뉴 · 숙박 가격 필터 · SOS · 주변정보/주차 · AI 코스) ========================================================================== */ /* ---------- 1) 10개 언어 선택 메뉴 ---------- */ .bw-lang-menu { position: absolute; right: 0; top: 42px; z-index: 200; width: 332px; max-width: calc(100vw - 24px); grid-template-columns: 1fr 1fr; gap: 2px; padding: 8px; background: #fff; border: 1px solid var(--bw-line, #E8E6DE); border-radius: 14px; box-shadow: 0 12px 32px rgba(11, 14, 20, .12); } .bw-lang-menu__item { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--bw-ink-900, #0B0E14); line-height: 1.25; transition: background .15s ease; } .bw-lang-menu__item:hover, .bw-lang-menu__item:focus-visible { background: var(--bw-ink-50, #F4F4F0); outline: none; } .bw-lang-menu__item.is-active { background: var(--bw-brand-persimmon-50, #FFF4ED); color: var(--bw-brand-persimmon, #FF5A1F); } .bw-lang-menu__native { font-size: 14px; font-weight: 700; } .bw-lang-menu__en { font-size: 11px; font-weight: 500; color: var(--bw-ink-500, #6B7280); } .bw-lang-menu__item.is-active .bw-lang-menu__en { color: inherit; opacity: .75; } .bw-drawer__langs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px !important; } .bw-drawer__lang { text-align: center; } /* 태국어·힌디어·베트남어 글꼴 폴백 (Pretendard 미지원 글리프) */ html[lang="th"] body { font-family: "Pretendard Variable", Pretendard, "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif; } html[lang="hi"] body { font-family: "Pretendard Variable", Pretendard, "Noto Sans Devanagari", "Nirmala UI", "Mangal", sans-serif; } html[lang="vi"] body { font-family: "Pretendard Variable", Pretendard, "Noto Sans", "Segoe UI", Arial, sans-serif; } html[lang="th"] body, html[lang="hi"] body { line-height: 1.7; } /* ---------- 2) 숙박 가격 필터 (상한 해제 + 직접 입력) ---------- */ .bw-price-hint { margin: 0 0 14px; font-size: 13px; color: var(--bw-ink-500, #6B7280); line-height: 1.5; } .bw-price-inputs { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 10px; } .bw-price-inputs__sep { padding-bottom: 12px; color: var(--bw-ink-500, #6B7280); font-weight: 700; } .bw-price-field { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .bw-price-field .lbl { font-size: 12px; font-weight: 700; color: var(--bw-ink-500, #6B7280); } .bw-price-field__box { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 12px; border: 1px solid var(--bw-line, #E8E6DE); border-radius: 10px; background: #fff; } .bw-price-field__box:focus-within { border-color: var(--bw-brand-persimmon, #FF5A1F); box-shadow: 0 0 0 3px rgba(255, 90, 31, .12); } .bw-price-field__box em { font-style: normal; font-weight: 700; color: var(--bw-ink-500, #6B7280); } .bw-price-field__box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1; color: var(--bw-ink-900, #0B0E14); font-variant-numeric: tabular-nums; } .bw-price-field__box input::placeholder { color: var(--bw-ink-400, #9CA3AF); font-weight: 600; } .bw-price-nolimit { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 14px; font-size: 13px; font-weight: 600; color: var(--bw-ink-700, #374151); cursor: pointer; } .bw-price-nolimit input { width: 18px; height: 18px; accent-color: var(--bw-brand-persimmon, #FF5A1F); } .bw-price-presets small { font-size: 11px; font-weight: 700; color: var(--bw-brand-persimmon, #FF5A1F); } .bw-price-display .val { font-size: 16px; } @media (max-width: 480px) { .bw-price-inputs { gap: 6px; } .bw-price-field__box { padding: 0 10px; } } /* ---------- 3) 비상상황 긴급 SOS ---------- */ /* 위치: '문의' 위젯(.wwc-fab, 우하단) 바로 위에 항상 노출. FAB 그룹은 그 위로 올린다. */ .bw-sos-fab { position: fixed; right: 18px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 2147482990; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: #D42A25; color: #fff; font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif; font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: .04em; box-shadow: 0 10px 24px rgba(229, 50, 45, .38), 0 0 0 3px #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s ease, box-shadow .15s ease; } .bw-sos-fab svg { width: 18px; height: 18px; } .bw-sos-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(229, 50, 45, .45), 0 0 0 3px #fff; } .bw-sos-fab:focus-visible { outline: 3px solid #FFB4B1; outline-offset: 3px; } .bw-sos-fab::after { /* 은은한 파동 — 주의 환기 */ content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgba(229, 50, 45, .55); animation: bw-sos-ring 2.6s ease-out infinite; pointer-events: none; } @keyframes bw-sos-ring { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.45); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .bw-sos-fab::after { animation: none; display: none; } } body.has-sos .bw-fab-group { bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important; } @media (max-width: 720px) { .bw-sos-fab { right: 14px; width: 52px; height: 52px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } html body.has-tabbar .bw-sos-fab { bottom: calc(57px + 14px + 42px + 10px + env(safe-area-inset-bottom, 0px)); } body.has-sos .bw-fab-group { bottom: calc(57px + 14px + 42px + 72px + env(safe-area-inset-bottom, 0px)) !important; } body.has-sos:not(.has-tabbar) .bw-fab-group { bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important; } } html.bw-sos-open body { overflow: hidden; } .bw-sos { position: fixed; inset: 0; z-index: 2147483100; display: flex; align-items: flex-end; justify-content: flex-end; } .bw-sos[hidden] { display: none; } .bw-sos__backdrop { position: absolute; inset: 0; background: rgba(11, 14, 20, .55); opacity: 0; transition: opacity .18s ease; } .bw-sos.is-open .bw-sos__backdrop { opacity: 1; } .bw-sos__panel { position: relative; display: flex; flex-direction: column; width: min(440px, 100vw); height: min(760px, calc(100dvh - 32px)); margin: 0 16px 16px 0; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); transform: translateY(16px); opacity: 0; transition: transform .2s ease, opacity .2s ease; } .bw-sos.is-open .bw-sos__panel { transform: none; opacity: 1; } @media (max-width: 560px) { .bw-sos__panel { width: 100vw; height: 92dvh; margin: 0; border-radius: 20px 20px 0 0; } } .bw-sos__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 12px; background: #FFF1F0; } .bw-sos__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 20px; font-weight: 800; color: #0B0E14; } .bw-sos__badge { display: inline-block; padding: 3px 8px; border-radius: 6px; background: #D42A25; color: #fff; font-size: 13px; letter-spacing: .06em; } .bw-sos__sub { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #4B5563; } .bw-sos__close { flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(11, 14, 20, .06); color: #111827; cursor: pointer; display: grid; place-items: center; } .bw-sos__close svg { width: 20px; height: 20px; } .bw-sos__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px 12px; border-bottom: 1px solid #F1F1EE; background: #fff; } .bw-sos__tab { padding: 10px 6px; border: 0; border-radius: 10px; background: transparent; font-size: 13.5px; font-weight: 700; color: #4B5563; cursor: pointer; line-height: 1.25; } .bw-sos__tab.is-active { background: #0B0E14; color: #fff; } .bw-sos__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px 20px; } .bw-sos__pane[hidden] { display: none; } .bw-sos__calls { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .bw-sos__call { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #E8E6DE; border-radius: 14px; text-decoration: none; color: #0B0E14; background: #fff; } .bw-sos__call:active { transform: scale(.99); } .bw-sos__call.is-urgent { border-color: #F7B3B0; background: #FFF6F5; } .bw-sos__num { min-width: 64px; font-size: 26px; font-weight: 900; letter-spacing: -.01em; color: #D42A25; font-variant-numeric: tabular-nums; } .bw-sos__call:not(.is-urgent) .bw-sos__num { color: #0A2342; font-size: 22px; } .bw-sos__call-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .bw-sos__call-txt strong { font-size: 15px; } .bw-sos__call-txt small { font-size: 12.5px; line-height: 1.45; color: #6B7280; } .bw-sos__phone { flex-shrink: 0; width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: #D42A25; color: #fff; } .bw-sos__call:not(.is-urgent) .bw-sos__phone { background: #0A2342; } .bw-sos__tips { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: #F7F7F4; font-size: 13px; line-height: 1.6; color: #374151; } .bw-sos__tips p { margin: 0 0 6px; } .bw-sos__tips ul { margin: 0; padding-left: 18px; } .bw-sos__select { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 12.5px; font-weight: 700; color: #6B7280; } .bw-sos__select select { height: 46px; padding: 0 12px; border: 1px solid #D9D6CC; border-radius: 12px; font-size: 15px; font-weight: 600; background: #fff; color: #0B0E14; } .bw-sos__missions { display: grid; gap: 10px; } .bw-sos__country { display: grid; gap: 10px; } .bw-sos__country[hidden] { display: none; } .bw-sos__mission { padding: 14px 16px; border: 1px solid #E8E6DE; border-radius: 14px; } .bw-sos__mission-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bw-sos__mission-head strong { font-size: 15px; line-height: 1.35; } .bw-sos__chip { display: inline-block; padding: 3px 8px; border-radius: 999px; background: #EEF2FF; color: #3730A3; font-size: 11.5px; font-weight: 700; } .bw-sos__addr { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: #6B7280; } .bw-sos__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .bw-sos__btn { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 12px; border-radius: 10px; background: #0A2342; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; } .bw-sos__btn.is-red { background: #D42A25; } .bw-sos__btn.is-ghost { background: #fff; color: #0A2342; border: 1px solid #D9D6CC; } .bw-sos__empty { margin: 8px 0; padding: 14px; border-radius: 12px; background: #F7F7F4; font-size: 13px; color: #4B5563; } .bw-sos__empty[hidden] { display: none; } .bw-sos__note { margin: 14px 0 0; font-size: 12px; line-height: 1.55; color: #6B7280; } .bw-sos__note a { color: #D42A25; font-weight: 700; } .bw-sos__maptools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .bw-sos__locate { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border: 0; border-radius: 999px; background: #0A2342; color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; } .bw-sos__locate svg { width: 18px; height: 18px; } .bw-sos__filters { display: flex; gap: 4px; flex-wrap: wrap; } .bw-sos__filters button { min-height: 36px; padding: 6px 12px; border: 1px solid #D9D6CC; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; color: #374151; cursor: pointer; } .bw-sos__filters button.is-active { background: #D42A25; border-color: #D42A25; color: #fff; } .bw-sos__status { margin: 10px 0; font-size: 13px; color: #374151; } .bw-sos__map { display: none; height: 240px; border-radius: 14px; overflow: hidden; background: #EEF1F4; margin-bottom: 10px; } .bw-sos__map.is-ready { display: block; } .bw-sos__places { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .bw-sos__place { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid #E8E6DE; border-radius: 14px; transition: box-shadow .2s; } .bw-sos__place.is-flash { box-shadow: 0 0 0 3px rgba(229, 50, 45, .35); } .bw-sos__pin { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #D42A25; color: #fff; font-size: 12.5px; font-weight: 800; display: grid; place-items: center; } .bw-sos__place-main { min-width: 0; flex: 1; } .bw-sos__place-main > strong { display: block; font-size: 14.5px; line-height: 1.35; } .bw-sos__dist { display: inline-block; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: #D42A25; } .bw-sos__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .bw-sos-mk { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: system-ui, sans-serif; font-size: 12px; font-weight: 800; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); border: 2px solid #fff; } .bw-sos-me { width: 18px; height: 18px; border-radius: 50%; background: #2563EB; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(37, 99, 235, .25); } /* ---------- 4) 관광지 상세: 주변 추천 맛집·숙소 / 주차장 ---------- */ .bw-np__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .bw-np__head h2 { display: flex; align-items: center; gap: 8px; margin: 0; } .bw-np__head h2 .bw-icon { width: 20px; height: 20px; color: var(--bw-brand-persimmon, #FF5A1F); } .bw-np__sub { font-size: 12.5px; color: var(--bw-ink-500, #6B7280); } .bw-np__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(176px, 1fr); gap: 12px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; } .bw-np__card { scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid var(--bw-line, #E8E6DE); border-radius: 14px; overflow: hidden; background: #fff; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; } .bw-np__card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 14, 20, .08); } .bw-np__img { position: relative; display: block; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; background: #F1F1EE; } .bw-np__img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; } .bw-np__rail { align-items: start; } .bw-np__body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; } .bw-np__name { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bw-np__meta { font-size: 12px; color: var(--bw-ink-500, #6B7280); } .bw-np__rate { color: var(--bw-brand-persimmon, #FF5A1F); font-weight: 700; } .bw-np__dist { font-size: 12px; font-weight: 700; color: #0A2342; } .bw-np__price { font-size: 12.5px; font-weight: 800; color: #0B0E14; } @media (min-width: 1024px) { .bw-np__rail { grid-auto-columns: calc((100% - 36px) / 4); } } .bw-np__p { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #2563EB; color: #fff; font-size: 14px; font-weight: 900; } .bw-np__spotpark { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: #EFF6FF; font-size: 13.5px; line-height: 1.55; color: #1E3A8A; } .bw-np .bw-np__plist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .bw-np__park { padding: 12px 14px; border: 1px solid var(--bw-line, #E8E6DE); border-radius: 14px; background: #fff; } .bw-np__park-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .bw-np__park-top strong { font-size: 14px; line-height: 1.35; } .bw-np__chip { padding: 2px 8px; border-radius: 999px; background: #F3F4F6; color: #374151; font-size: 11.5px; font-weight: 800; } .bw-np__chip.is-public { background: #DBEAFE; color: #1D4ED8; } .bw-np__pdist { margin-left: auto; font-size: 12px; font-weight: 700; color: #0A2342; white-space: nowrap; } .bw-np__park-fee { margin-top: 6px; font-size: 13px; font-weight: 700; color: #0B0E14; line-height: 1.45; } .bw-np__park-info { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 12px; color: var(--bw-ink-500, #6B7280); } .bw-np__park-actions { display: flex; gap: 6px; margin-top: 10px; } .bw-np__btn { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; border-radius: 9px; border: 1px solid var(--bw-line, #E8E6DE); background: #fff; color: #0A2342; font-size: 12.5px; font-weight: 700; text-decoration: none; } .bw-np__btn.is-primary { background: #2563EB; border-color: #2563EB; color: #fff; } .bw-np__empty { margin: 0; padding: 12px 14px; border-radius: 12px; background: #F7F7F4; font-size: 13px; color: #4B5563; } .bw-np .bw-np__src { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--bw-ink-400, #9CA3AF); } .bw-np .bw-np__spotpark, .bw-np .bw-np__empty { font-size: 13.5px; } .bw-np__park-fee.is-unknown { font-weight: 600; color: var(--bw-ink-500, #6B7280); } /* ---------- QA 2026-09: 모바일에서 카드 사진이 상자를 못 채우던 문제 ---------- responsive.css 의 @media(max-width:720px){ img:not(.bw-icon):not(.no-stretch){height:auto} } (0,2,1) 가 .bw-card__media img{height:100%} (0,1,1) 를 이겨, 가로 사진 아래로 회색 띠가 생겼다. */ @media (max-width: 720px) { .bw-card__media img:not(.bw-icon):not(.no-stretch) { height: 100%; object-fit: cover; } } /* ---------- QA 2026-09: 모바일 줄바꿈 정리 ---------- 목록 상단 통계 칩 사이의 '·' 는 칩끼리 이미 구분돼 불필요하고, 줄이 바뀌면 줄 끝에 홀로 남았다. 홈 히어로 통계 4개는 모바일에서 마지막 하나('16 지역구')만 다음 줄로 떨어졌다 → 2×2. */ .list-hero__stats > .list-hero__sep { display: none !important; } @media (max-width: 560px) { html body .hero26__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- QA 2026-09: 작은 글씨 색 대비 (WCAG AA 4.5:1) ---------- 브랜드 주황 #FF5A1F 는 흰 배경에서 3.1:1 이라 11~14px 글씨가 읽기 어렵다. 같은 계열의 더 진한 색(#C2410C ≈ 4.9:1)으로, 회색 보조 텍스트는 #6B7280(4.6:1)으로. */ :root { --bw-brand-persimmon-text: #C2410C; /* 정의 없이 쓰이던 토큰 별칭(2026-09-25) — 없으면 색·테두리 선언이 통째로 무효가 됐다 */ --bw-ink-600: #424954; --bw-ink-800: #1A1E26; --bw-text-primary: var(--bw-ink-900); --bw-text-secondary: var(--bw-ink-500); --bw-text-muted: var(--bw-ink-400); --bw-border: var(--bw-line); } /* CV-13(2026-09-25): 언어 메뉴 native/en 을 목록에서 뺐다 — 모든 항목이 주황이 돼 활성 언어가 구분되지 않았다. 활성 항목만 진한 주황, 비활성은 원래 규칙(ink-900 / #6B7280)으로 */ .bw-drawer__quick, .editorial-ticker__label, .rank-mini, .bw-np__rate, .bw-footer a.bw-foot-link--accent { color: var(--bw-brand-persimmon-text) !important; } .bw-lang-menu__item.is-active .bw-lang-menu__native, .bw-lang-menu__item.is-active .bw-lang-menu__en { color: var(--bw-brand-persimmon-text) !important; } .bw-card__tag, .stay-card__type { color: #9A3412; } .ds, .bw-search-modal__sd .hdr, .bw-district-card__count, .bw-r10 { color: #6B7280 !important; } /* 어두운 배경 위의 보조 회색은 반대로 밝게 (위 규칙이 히어로 배지에서 4:1 로 떨어졌다) */ .hero26 .bw-r10, .hero26__badge .bw-r10, [data-theme="dark"] .bw-r10 { color: #CBD2DB !important; } /* 모바일 탭바 비활성 라벨 3.1:1 → 4.6:1 */ .bw-tabbar a:not(.active) span, .bw-tabbar__inner a:not(.active) { color: #6B7280 !important; } /* ---------- 9) 모바일 상세 마감 (2026-09-20) ---------- */ @media (max-width: 560px) { /* 제목과 부제가 한 줄에 붙어 답답했다 — 부제를 아랫줄로 */ .bw-np__head { gap: 2px 10px; } .bw-np__sub { flex-basis: 100%; } } @media (max-width: 720px) { /* 13px 높이라 누르기 어려웠던 푸터 링크 */ .bw-footer__legal a { display: inline-flex; align-items: center; min-height: 24px; } } /* ========================================================================== 2026-09-25 CSS 전수 교정 responsive.min.css / components.min.css 는 ?v= 링크가 불변 캐시(약 60파일)라 원본 대신 여기서 덮는다. 로드 순서와 무관하게 이기도록 선택자마다 html body 접두사(+필요 시 !important)를 붙였다. ========================================================================== */ /* CV-01 flex 행의 input 이 min-width:auto(모바일 16px 규칙으로 고유폭 ~310px) 때문에 부모를 넘쳐 옆 버튼·⌘K 를 화면 밖으로 밀어냈다 (spot/food/event 목록, faq 등) */ html body .bw-input input { min-width: 0; } /* CV-02 모바일: 쿠키 배너가 하단 고정 스택(탭바·SOS·문의) 자리라 SOS FAB 가 '모두 동의' 버튼을 덮었다 → SOS 가 있는 페이지에서는 배너를 헤더 바로 아래(상단)로 옮긴다. (2,2,2) 라 R17·footer 규칙을 이긴다 */ @media (max-width: 720px) { html body:has(#bw-sos-fab):has(#bw-cookie:not([hidden])) .bw-cookie { top: calc(var(--bw-header-h-mobile, 56px) + 8px) !important; bottom: auto !important; } } /* CV-04 · CV-18 721~820px 관광지·맛집 상세: 바닥 밀착 dd-stickybar(z950, 65px)가 문의 FAB 를 완전히 가리고 쿠키 배너와도 겹쳤다 → 문의·SOS·FAB 그룹·쿠키 배너를 바 위로 쌓는다. (FAB 그룹은 위 3) 의 body.has-sos 규칙(0,2,1)을 이겨야 해서 html 접두사로 0,2,2) */ @media (min-width: 721px) and (max-width: 820px) { html body:has(.dd-stickybar) .wwc-fab { bottom: calc(65px + 14px + env(safe-area-inset-bottom, 0px)) !important; } html body:has(.dd-stickybar) .wwc-card { bottom: calc(65px + 66px + env(safe-area-inset-bottom, 0px)) !important; } html body:has(.dd-stickybar) .bw-sos-fab { bottom: calc(65px + 14px + 43px + 12px + env(safe-area-inset-bottom, 0px)) !important; } html body:has(.dd-stickybar) .bw-fab-group { bottom: calc(65px + 14px + 43px + 12px + 56px + 12px + env(safe-area-inset-bottom, 0px)) !important; } html body:has(.dd-stickybar):has(#bw-cookie:not([hidden])) .bw-cookie { bottom: calc(65px + 12px + env(safe-area-inset-bottom, 0px)) !important; } } /* CV-07 모바일 홈 지도: responsive 의 '.map-block a[href*="map.php"]'(!important, 가운데 절대배치 + 어두운 알약) 규칙이 오버레이 안 '큰 지도 열기' 버튼까지 잡아 제목(ja/en)을 덮었다. → 오버레이 안 버튼은 정적 배치로 되돌리고, 원래 의도한 소형 accent 스타일(.map-overlay .bw-btn)을 복원 */ @media (max-width: 720px) { html body .map-block .map-overlay a[href*="map.php"] { position: static !important; left: auto !important; bottom: auto !important; transform: none !important; background-color: var(--bw-brand-persimmon-text, #C2410C) !important; color: #fff !important; padding: 6px 12px !important; font-size: 12px !important; font-weight: 600 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; z-index: auto !important; } /* 같은 구간의 '.map-block > div{width:100% !important}'(0,1,1)가 오버레이의 width:auto 를 이겨 left/right 12px 에 폭 100% 가 더해져 오른쪽 12px 가 잘렸다 → 버튼이 잘린 모서리에 붙음 */ html body .map-block > .map-overlay { width: auto !important; } } /* CV-14 ≥721px: 최대 스크롤에서 푸터 법정 링크 마지막 항목이 우하단 FAB 열(문의·SOS·FAB 그룹) 밑에 깔렸다. 아래 여백으로는 FAB 열을 피할 수 없어(SOS·FAB 그룹이 더 위에 있음) FAB 열 폭만큼 오른쪽 여백을 둔다 */ @media (min-width: 721px) { html body .bw-footer .bw-footer__legal { padding-right: 136px !important; } } /* M1 ≤360px: responsive 의 '.su-field>div{display:flex;flex-direction:column}' 이 입력 줄뿐 아니라 비밀번호 강도 막대(.su-strength, 4칸 grid)까지 잡아 막대 4개가 세로로 쌓였다 → grid 복원. ※ register.php 는 공통 헤더를 쓰지 않아 이 파일을 로드하지 않는다 — register.php 가 이 파일을 링크하거나 같은 규칙을 자체