/* bw-home-dp.css — 홈 첫 화면: 낮아진 히어로 + 얇아진 검색 카드 + '구별 인기'(bw-dp) + 장소 카드(bw-pc) (2026-09-27) index.php 에서 bwh_head() 바로 다음에 링크 — bw-hero-slider.css 뒤라서 같은 우선순위면 이 파일이 이긴다. 원본(bw-hero-slider.css·_hero_slides.php)은 건드리지 않고 #bw-hero / #bw-home-search 로만 덮어쓴다. 목표(첫 화면에 목록): 1440x900 = 히어로 396 · 검색 카드 364–488 · 구 칩 ≈564–604 · 카드 1줄 ≤900 390x844 = 히어로 304 · 카드 284–404 · 구 칩 ≈500–544 · 목록 2줄이 하단 탭바(787) 위 모바일 글자 크기는 responsive.min.css 가 h2·p 를 !important 로 강제 → 여기서도 html body … !important. */ /* ───────── 1. 히어로 — 슬라이드는 그대로, 높이·글자만 줄임 ───────── */ #bw-hero.bwh { height: clamp(340px, 45vh, 450px); height: clamp(340px, 45svh, 450px); --bwh-ovl: 32px; --bwh-bar-b: calc(var(--bwh-ovl) + 16px); } #bw-hero .bwh-slide__inner, #bw-hero .bwh-slide--center .bwh-slide__inner { padding: calc(var(--bwh-hdr) + 10px) var(--bwh-gut) calc(var(--bwh-bar-b) + 56px); } #bw-hero .bwh-slide__eyebrow { font-size: 13px; padding: 5px 12px; } #bw-hero .bwh-slide__title { margin-top: 8px; font-size: clamp(26px, 2.5vw, 38px); line-height: 1.14; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } #bw-hero .bwh-slide__title .l1, #bw-hero .bwh-slide__title .l2 { display: inline; -webkit-line-clamp: unset; } #bw-hero .bwh-slide--center .bwh-slide__title { font-size: clamp(30px, 2.8vw, 44px); line-height: 1.12; min-height: 0; } #bw-hero .bwh-slide__sub, #bw-hero .bwh-slide__tags { margin-top: 8px; font-size: 16px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bw-hero .bwh-slide__tags span { display: inline; } #bw-hero .bwh-slide__tags span + span { margin-left: 12px; } #bw-hero .bwh-slide__cta { margin-top: 14px; gap: 10px; } #bw-hero .bwh-btn { min-height: 44px; padding: 0 22px; font-size: 15px; } #bw-hero .bwh-btn--outline { min-height: 44px; padding: 0 24px; } #bw-hero .bwh-btn--text { min-height: 44px; padding: 0 6px; } #bw-hero .bwh-slide--center .bwh-slide__cta .bwh-btn { width: 240px; } #bw-hero .bwh-slide__poster { top: calc(var(--bwh-hdr) + 16px); bottom: calc(var(--bwh-bar-b) + 56px); } #bw-hero .bwh-slide__credit { bottom: calc(var(--bwh-bar-b) + 58px); } #bw-hero .bwh__scroll { display: none !important; } /* 태블릿 */ @media (min-width: 768px) and (max-width: 1023px) { #bw-hero.bwh { height: clamp(300px, 38vh, 400px); height: clamp(300px, 38svh, 400px); --bwh-ovl: 28px; --bwh-bar-b: calc(var(--bwh-ovl) + 14px); } #bw-hero .bwh-slide__title { font-size: clamp(26px, 3.6vw, 34px); } #bw-hero .bwh-slide--center .bwh-slide__title { font-size: clamp(30px, 4.4vw, 40px); } #bw-hero .bwh-slide__sub { display: none; } } @media (min-width: 768px) and (max-width: 1023px) and (max-height: 900px) { #bw-hero .bwh-slide__tags { display: none; } } @media (min-width: 768px) and (max-width: 1023px) { #bw-hero .bwh-slide--event .bwh-slide__cta .bwh-btn ~ .bwh-btn { display: none; } /* 포스터 옆 좁은 글자 칸에서 버튼 두 줄 방지 */ #bw-hero .bwh-slide__credit { right: 24px; max-width: 30%; } } /* 낮은 화면(태블릿 가로·노트북, 높이 ≤820 — 히어로 300~340): 머리표·부제·태그 줄 숨김, 제목 조금 작게(제목 2줄 + 버튼만) */ @media (min-width: 768px) and (max-height: 820px) { #bw-hero .bwh-slide__eyebrow, #bw-hero .bwh-slide__sub, #bw-hero .bwh-slide__tags { display: none; } #bw-hero .bwh-slide__title { margin-top: 0; font-size: clamp(26px, 2.4vw, 36px); } #bw-hero .bwh-slide--center .bwh-slide__title { font-size: clamp(30px, 3vw, 44px); } } /* 휴대폰 */ @media (max-width: 767px) { #bw-hero.bwh { height: clamp(248px, 36vh, 320px); height: clamp(248px, 36svh, 320px); --bwh-ovl: 20px; --bwh-bar-b: calc(var(--bwh-ovl) + 10px); } #bw-hero .bwh-slide__inner, #bw-hero .bwh-slide--center .bwh-slide__inner { padding: calc(var(--bwh-hdr) + 10px) 16px calc(var(--bwh-bar-b) + 58px); } #bw-hero .bwh-slide__eyebrow, #bw-hero .bwh-slide__sub, #bw-hero .bwh-slide__preview { display: none; } #bw-hero .bwh-slide__title { margin-top: 0; } html body #bw-hero.bwh .bwh-slide__title { font-size: clamp(22px, 6.2vw, 27px) !important; line-height: 1.2 !important; } html body #bw-hero.bwh .bwh-slide--center .bwh-slide__title { font-size: clamp(24px, 7vw, 30px) !important; line-height: 1.15 !important; min-height: 2.3em; } /* 휴대폰: 두 줄 자리 고정 — 웹글꼴이 늦게 와 한 줄↔두 줄로 바뀌어도 아래가 밀리지 않게(CLS) */ html body #bw-hero.bwh .bwh-slide__tags { font-size: 14px !important; line-height: 1.4 !important; margin-top: 6px; } #bw-hero .bwh-slide__cta { margin-top: 12px; flex-wrap: nowrap; } #bw-hero .bwh-slide__cta .bwh-btn ~ .bwh-btn { display: none; } #bw-hero .bwh-btn, #bw-hero .bwh-btn--outline { min-height: 40px; padding: 0 18px; font-size: 14px; } #bw-hero .bwh-slide--center .bwh-slide__cta .bwh-btn { flex: 0 0 auto; width: min(220px, 100%); max-width: none; min-width: 0; padding: 0 16px; } /* 고정 폭: 글꼴이 늦게 와도 버튼 위치 그대로 */ /* 사진 출처: 오른쪽 아래(첫 버튼 옆, 막대 바로 위) — 위쪽에 두면 두 줄 제목 첫 줄과 겹쳤다 */ #bw-hero .bwh-slide__credit, #bw-hero .bwh-slide--event .bwh-slide__credit { top: auto; bottom: calc(var(--bwh-bar-b) + 60px); right: 12px; max-width: calc(100% - 196px); text-align: right; } /* 행사 포스터: 막대 위 오른쪽 작은 썸네일(72×96) — 글자는 그 왼쪽까지만 */ #bw-hero .bwh-slide--event .bwh-slide__text { max-width: calc(100% - 88px); } #bw-hero .bwh-slide--event .bwh-slide__poster, #bw-hero .bwh-slide--event.is-noposter .bwh-slide__poster { display: flex; top: auto; left: auto; right: 16px; bottom: calc(var(--bwh-bar-b) + 60px); width: 72px; height: 96px; align-items: flex-end; justify-content: flex-end; } #bw-hero .bwh-slide--event .bwh-slide__poster img { border-radius: 8px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.18); } } @media (max-width: 767px) and (max-height: 760px) { #bw-hero .bwh-slide__tags { display: none; } } /* 좁은 폰(≤380): 제목 두 줄이 오른쪽 위 사진 출처 줄에 닿지 않게 조금 작게 */ @media (max-width: 380px) { html body #bw-hero.bwh .bwh-slide__title { font-size: 21px !important; line-height: 1.2 !important; } html body #bw-hero.bwh .bwh-slide--center .bwh-slide__title { font-size: 22px !important; line-height: 1.15 !important; } #bw-hero .bwh-slide__cta { margin-top: 10px; } } /* 아주 낮은 폰(높이 ≤700, iPhone SE 등): 36svh 가 248 밑으로 → 두 줄 제목 + 버튼이 들어갈 만큼만 */ @media (max-width: 767px) and (max-height: 700px) { #bw-hero.bwh { height: 268px; } } /* ───────── 2. 검색 카드 — 같은 DOM, 더 얇게 ───────── */ #bw-home-search.bwh-search { margin-top: -32px; } #bw-home-search .bwh-search__label { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #bw-home-search .bwh-search__card { padding: 14px 18px 12px; gap: 10px 24px; } #bw-home-search .bwh-search__form { height: 52px; } #bw-home-search .bwh-search__go { height: 42px; } #bw-home-search .bwh-search__row { min-height: 32px; } #bw-home-search .bwh-search__chips { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); } #bw-home-search .bwh-search__chips::-webkit-scrollbar { display: none; } /* 한 줄 고정: 언어·글꼴 늦게 와도 카드 높이 그대로(아래 목록 밀림 방지) */ #bw-home-search .bwh-search__chips a { flex: none; min-height: 32px; padding: 0 12px; font-size: 13.5px; } #bw-home-search .bwh-search__ai { min-height: 36px; padding: 0 14px; font-size: 13.5px; } #bw-home-search .bwh-search__stats { min-width: 0; overflow: hidden; } #bw-home-search .bwh-search__stats li { flex: 0 1 auto; min-width: 0; max-width: none; } #bw-home-search .bwh-search__stats b { font-size: 20px; } #bw-home-search .bwh-search__stats span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 긴 언어에서 두세 줄로 늘어나 카드가 커지던 것 방지 */ @media (min-width: 1024px) and (max-width: 1531.98px) { #bw-home-search .bwh-search__card { padding-right: calc(18px + clamp(0px, 146px - (100vw - 1240px) / 2, 146px)); } } @media (min-width: 768px) and (max-width: 1023px) { #bw-home-search.bwh-search { margin-top: -28px; } #bw-home-search .bwh-search__row { flex-direction: row; align-items: center; } #bw-home-search .bwh-search__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } } @media (max-width: 767px) { #bw-home-search.bwh-search { margin-top: -20px; padding: 0 16px; } #bw-home-search .bwh-search__card { padding: 12px 14px 10px; gap: 10px; border-radius: 18px; } #bw-home-search .bwh-search__form { height: 50px; } #bw-home-search .bwh-search__row { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 8px; } #bw-home-search .bwh-search__chips { flex: 1 1 auto; min-width: 0; margin: 0 0 0 -14px; padding: 0 0 0 14px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); } #bw-home-search .bwh-search__chips a { min-height: 36px; } html body #bw-home-search .bwh-search__chips .lbl { display: none; } /* AI 링크: 줄 끝 작은 알약(반짝이 + AI) — 전체 문구는 그대로 남아 화면 낭독기가 읽는다 */ #bw-home-search .bwh-search__ai { flex: none; justify-content: center; min-height: 36px; padding: 0 12px; gap: 4px; font-size: 0 !important; } #bw-home-search .bwh-search__ai::after { content: "AI"; content: "AI" / ""; font-size: 13px; font-weight: 800; letter-spacing: .02em; } } /* ───────── 3. 구별 인기 섹션 ───────── */ .bw-dp { position: relative; max-width: var(--bw-container, 1240px); margin: 24px auto 0; padding: 0 var(--bw-gutter, 24px); color: #0B0E14; font-family: var(--bw-font-sans, "Pretendard Variable", Pretendard, system-ui, sans-serif); } .bw-dp *, .bw-dp *::before, .bw-dp *::after { box-sizing: border-box; } .bw-dp__head { display: flex; align-items: center; gap: 12px; min-height: 40px; margin: 0 0 12px; } .bw-dp__hl { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; } .bw-dp__eyebrow { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: #FFF1E8; color: #9A3412; font-size: 12.5px; font-weight: 800; white-space: nowrap; } html body .bw-dp .bw-dp__title { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 0; font-size: 24px; font-weight: 800; line-height: 1.25; letter-spacing: -.025em; color: #0B0E14; } .bw-dp__tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bw-dp__hint { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: #F2F3F5; color: #4B5563; font-size: 12.5px; font-weight: 600; letter-spacing: 0; white-space: nowrap; } .bw-dp__hint[hidden] { display: none; } .bw-dp__all { display: none; align-items: center; gap: 2px; min-height: 40px; padding: 0 2px 0 8px; color: #C2410C; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; } .bw-dp__all .bw-icon { width: 16px; height: 16px; } .bw-dp__tabs { flex: none; display: flex; gap: 6px; } .bw-dp__tab { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border-radius: 999px; background: #F2F3F5; color: #1F2430; font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; } .bw-dp__tab:hover { background: #E6E8EB; color: #0B0E14; text-decoration: none; } .bw-dp__tab.is-active, .bw-dp__tab.is-active:hover { background: #0B0E14; color: #fff; } .bw-dp__tab:focus-visible, .bw-dp__all:focus-visible, .bw-dp__more:focus-visible, .bw-dp__bt:focus-visible, .bw-dp button:focus-visible { outline: 3px solid #C2410C; outline-offset: 2px; } #bw-dp-dbar { margin: 0 0 14px; } .bw-dp__panel { position: relative; } .bw-dp__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; transition: opacity .15s; } .bw-dp__panel.is-loading .bw-dp__grid { opacity: .5; pointer-events: none; } .bw-dp__item { margin: 0; padding: 0; min-width: 0; list-style: none; } .bw-dp__item::before, .bw-dp__item::marker { content: none; } .bw-dp__empty { grid-column: 1 / -1; padding: 28px 12px; text-align: center; color: #5B6470; font-size: 14px; } .bw-dp__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; } .bw-dp__foot:empty { display: none; } .bw-dp__more, .bw-dp__bt { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid #FBCDB4; background: #FFF7F2; color: #9A3412; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; } .bw-dp__more:hover, .bw-dp__bt:hover { background: #FFEADB; color: #7C2D12; text-decoration: none; } .bw-dp__more .bw-icon { width: 16px; height: 16px; } .bw-dp__bt b { color: #C2410C; font-weight: 800; font-variant-numeric: tabular-nums; } html body .bw-dp .bw-dp__basis { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #5B6470; } .bw-dp__sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 상태 줄(내 주변·오류) */ .bw-dp__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; font-size: 13.5px; color: #374151; } .bw-dp__status[hidden] { display: none; } .bw-dp__loc { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #0B0E14; } .bw-dp__loc .bw-icon { width: 16px; height: 16px; color: #C2410C; } .bw-dp__acc { font-weight: 600; color: #5B6470; } .bw-dp__btn, .bw-dp__seg button, .bw-dp__tog { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; min-height: 36px; margin: 0; padding: 0 12px; border: 1px solid #E3E5E8; border-radius: 999px; background: #fff; color: #1F2430; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .bw-dp__btn:hover, .bw-dp__seg button:hover, .bw-dp__tog:hover { background: #F6F7F8; } .bw-dp__seg { display: inline-flex; gap: 4px; } .bw-dp__seg button[aria-pressed="true"] { background: #0B0E14; border-color: #0B0E14; color: #fff; } .bw-dp__tog[aria-pressed="true"] { background: #C2410C; border-color: #C2410C; color: #fff; } .bw-dp__rad { color: #5B6470; font-size: 12.5px; } .bw-dp__warn { padding: 4px 10px; border-radius: 8px; background: #FFF4EE; color: #9A3412; font-size: 12.5px; font-weight: 600; } .bw-dp__err { color: #B42318; font-weight: 700; } /* ───────── 4. 장소 카드 bw-pc (데스크톱: 세로 카드 4×2) ───────── */ .bw-pc { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 16px; background: #fff; border: 1px solid #ECEEF1; overflow: hidden; color: #0B0E14; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: box-shadow .2s, transform .2s, border-color .2s; } .bw-pc:hover { color: #0B0E14; text-decoration: none; border-color: #E1E4E8; box-shadow: 0 16px 32px -20px rgba(11,14,20,.4); transform: translateY(-2px); } .bw-pc:focus-visible { outline: 3px solid #C2410C; outline-offset: 2px; } .bw-pc__media { position: relative; flex: none; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #EEF1F3; } .bw-pc__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none !important; object-fit: cover; transition: transform .4s; } .bw-pc:hover .bw-pc__img { transform: scale(1.04); } html body .bw-pc .bw-pc__ph { position: absolute; inset: 0; width: 100%; height: 100%; } .bw-pc__rank { position: absolute; left: 10px; top: 10px; z-index: 1; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 8px; background: rgba(11,14,20,.8); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .bw-dp__item:nth-child(-n+3) .bw-pc__rank { background: #C2410C; } .bw-pc__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px 12px; } .bw-pc__name { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bw-pc__meta { display: block; font-size: 12.5px; line-height: 1.4; color: #5B6470; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bw-pc__dist { color: #0B0E14; font-weight: 700; } .bw-pc__row { display: flex; align-items: center; gap: 8px; min-height: 18px; font-size: 12.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; } .bw-pc__rate { flex: none; display: inline-flex; align-items: center; gap: 3px; color: #C2410C; font-weight: 800; } .bw-pc__n { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 1px; border-radius: 3px; background: #E6F6EC; color: #047A38; font-size: 9.5px; font-weight: 800; line-height: 1; } .bw-pc__rev { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #5B6470; } .bw-pc__open { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #5B6470; } .bw-pc__open.is-open { color: #047857; } .bw-pc__open.is-open::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #10B981; } /* 2026-09-28 QA: 칸이 좁으면 리뷰 수가 먼저 0까지 줄고(아주 큰 flex-shrink — 영업 상태 몫은 1/64px 미만이라 말줄임이 생기지 않음), 그래도 넘치면 영업 상태를 글자 중간에서 자르지 않고 말줄임(…) */ .bw-pc__rev { flex-shrink: 100000; } .bw-pc__open { flex: 0 1 auto; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; } .bw-pc__open.is-open::before { display: inline-block; margin-right: 4px; vertical-align: 1px; } /* 태블릿: 가로 줄 2열(썸네일 96) */ @media (min-width: 768px) and (max-width: 1023px) { .bw-dp { margin-top: 20px; } .bw-dp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; } .bw-pc { flex-direction: row; align-items: center; gap: 12px; padding: 6px; border-radius: 16px; } .bw-pc__media { width: 96px; height: 96px; aspect-ratio: auto; border-radius: 12px; } .bw-pc__body { flex: 1 1 auto; padding: 0 6px 0 0; } .bw-pc__rank { left: 6px; top: 6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 7px; font-size: 12px; } .bw-dp__head { flex-wrap: wrap; } } /* 휴대폰: 한 줄 목록(썸네일 72, 줄 높이 84 / 좁은 폰 80) */ @media (max-width: 767px) { .bw-dp { max-width: none; margin: 16px calc(50% - 50vw) 0; padding: 0 16px; } .bw-dp__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 8px; min-height: 0; margin-bottom: 8px; } .bw-dp__eyebrow, .bw-dp__hint { display: none !important; } html body .bw-dp .bw-dp__title { font-size: 19px !important; line-height: 26px !important; } .bw-dp__all { display: inline-flex; min-height: 44px; margin: -9px -4px -9px 0; padding: 0 4px 0 10px; } /* 누르는 영역 44px, 줄 높이는 26 그대로 */ .bw-dp__tabs { grid-column: 1 / -1; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; } .bw-dp__tabs::-webkit-scrollbar { display: none; } .bw-dp__tab { flex: none; padding: 0 14px; } html body .bw-dp .bw-dp__tab { font-size: 14px !important; } #bw-dp-dbar { max-width: none; margin: 0 -16px 10px; padding: 0 16px; } .bw-dp__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } .bw-pc { flex-direction: row; align-items: center; gap: 12px; height: 84px; padding: 6px; border-radius: 14px; } .bw-pc:hover { transform: none; } .bw-pc__media { width: 72px; height: 72px; aspect-ratio: auto; border-radius: 12px; } .bw-pc__body { flex: 1 1 auto; gap: 2px; padding: 0 6px 0 0; } html body .bw-pc .bw-pc__name { font-size: 15px !important; line-height: 1.3 !important; } .bw-pc__rank { left: 4px; top: 4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; font-size: 11.5px; } html body .bw-dp .bw-dp__basis { font-size: 12px !important; line-height: 1.5 !important; } .bw-dp__status { font-size: 13px; } .bw-dp__more, .bw-dp__bt { min-height: 44px; } } @media (max-width: 380px) { .bw-pc { height: 80px; } .bw-pc__media { width: 68px; height: 68px; } .bw-pc__row { gap: 6px; } } @media (max-width: 1023px) { html body .bw-pc .bw-pc__ph { font-size: 0 !important; padding: 0; gap: 0; } html body .bw-pc .bw-pc__ph::after { display: none; } html body .bw-pc .bw-pc__ph::before { width: 26px; height: 26px; } } @media (pointer: coarse) { .bw-dp__tab { min-height: 44px; } .bw-dp__btn, .bw-dp__seg button, .bw-dp__tog { min-height: 40px; } } @media (prefers-reduced-motion: reduce) { .bw-pc, .bw-pc__img, .bw-dp__grid, .bw-dp__tab { transition: none; } .bw-pc:hover { transform: none; } .bw-pc:hover .bw-pc__img { transform: none; } }