/* 맛랭 화면 다듬기 (2026-10 미리보기안)
   style.css 위에 덧씌우는 파일이라, 빼면 예전 화면으로 그대로 돌아가요.
   목표: 첫 화면에서 바로 매장이 보이게 위쪽을 줄이고, 카드는 한눈에 읽히게, 손에 닿는 반응은 부드럽게 */

:root {
  --r-card: 20px;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 18px rgba(40, 20, 5, .16);
  --shadow-pop: 0 12px 28px rgba(40, 20, 5, .28);
  --ease: cubic-bezier(.2, .8, .2, 1)
}

/* ── 위쪽 머리: 한 줄로 줄이고 스크롤해도 따라오게 ── */
header {
  position: sticky;
  top: 0;
  z-index: 7;
  padding: 10px 16px;
  transition: background .25s, box-shadow .25s, backdrop-filter .25s
}

header.scrolled {
  background: rgba(74, 45, 25, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22)
}

.hdr-id>div:first-child {
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important
}

.hdr-id svg {
  width: 31px;
  height: 34px
}

h1 {
  font-size: 20px
}

h1 small {
  font-size: 10.5px
}

.hdr-bar {
  display: none
}

.hdr-actions {
  align-items: center;
  gap: 6px
}

.hdr-actions .sub-btn {
  padding: 7px 13px;
  font-size: 12.5px;
  box-shadow: 0 3px 10px rgba(242, 196, 122, .35)
}

.icon-chip {
  backdrop-filter: blur(6px)
}

/* ── 오늘 볼 동네 제목 ── */
.hero {
  padding: 6px 18px 2px;
  color: #fff
}

.hero .hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--acc);
  letter-spacing: .2px
}

.hero .hero-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ee08a;
  box-shadow: 0 0 0 3px rgba(126, 224, 138, .25);
  animation: livePulse 2s ease-in-out infinite
}

@keyframes livePulse {
  50% { box-shadow: 0 0 0 6px rgba(126, 224, 138, 0) }
}

.hero h2 {
  margin-top: 4px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.8px;
  line-height: 1.2
}

.hero h2 em {
  font-style: normal;
  color: var(--acc)
}

/* ── 카페/맛집 탭: 작고 또렷하게 ── */
.tabs {
  margin: 12px 16px 6px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(31, 20, 9, .45);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25)
}

.tabs button {
  padding: 9px;
  font-size: 15px;
  border-radius: 12px;
  transition: background .25s var(--ease), color .25s, transform .15s
}

.tabs button.on {
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18)
}

/* ── 지역 칩: 줄 간격을 줄이고 고른 것이 확 보이게 ── */
.chips {
  padding: 4px 16px 6px;
  gap: 7px
}

.chips button {
  padding: 6px 13px;
  font-size: 13.5px;
  border-color: rgba(255, 255, 255, .28);
  transition: background .2s, color .2s, transform .15s, box-shadow .2s
}

.chips button.on {
  box-shadow: 0 4px 12px rgba(242, 196, 122, .35)
}

.chips.small button {
  padding: 4px 11px;
  font-size: 12.5px
}

/* 구 목록은 접어 두고 필요할 때 펼침 */
.chips.gus.folded {
  display: none
}

.gu-toggle {
  flex: none;
  border: 1.5px dashed rgba(255, 255, 255, .35) !important;
  color: #f0e2d0 !important;
  background: none
}

.meta {
  font-size: 11px;
  color: rgba(240, 226, 208, .7);
  padding: 2px 18px 10px;
  line-height: 1.5
}

/* ── 로그인 안내 + 리뷰어 랭킹: 두 칸 타일로 나란히 ── */
.quick-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 14px 14px
}

.quick-row .lead-entry,
.quick-row .banner {
  margin: 0;
  width: auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 0;
  padding: 12px 14px;
  border-radius: 18px;
  text-align: left
}

.quick-row .lead-entry .le-ic {
  width: 34px;
  height: 34px;
  font-size: 18px
}

.quick-row .lead-entry .le-title {
  white-space: normal;
  font-size: 14px
}

.quick-row .lead-entry .le-sub {
  font-size: 11.5px
}

.quick-row .lead-entry .le-arrow {
  display: none
}

.quick-row .banner {
  font-size: 11.5px;
  background: linear-gradient(150deg, #ffe2a8, var(--acc) 60%, #e9ad55);
  box-shadow: 0 6px 16px rgba(233, 173, 85, .35)
}

.quick-row .banner b {
  font-size: 14px;
  margin-bottom: 2px
}

.quick-row .banner button {
  padding: 7px 12px;
  font-size: 12px
}

.quick-row .banner[hidden],
.quick-row .banner[style*="none"] {
  display: none
}

/* 로그인 안내가 숨겨지면 리뷰어 랭킹이 한 줄을 다 씀 */
.quick-row.solo {
  grid-template-columns: 1fr
}

.quick-row.solo .lead-entry {
  flex-direction: row;
  align-items: center;
  min-height: 0
}

/* ── 매장 카드 ── */
.list {
  gap: 10px;
  padding: 0 14px 130px
}

.item {
  border-radius: var(--r-card);
  padding: 14px 14px 14px 12px;
  box-shadow: var(--shadow-card);
  transition: transform .18s var(--ease), box-shadow .25s
}

.item:active {
  transform: scale(.985)
}

.item.open {
  box-shadow: var(--shadow-pop)
}

/* 처음 보이는 카드는 아래에서 살짝 올라오며 나타남 */
.item.rv {
  opacity: 0;
  transform: translateY(14px)
}

.item.rv.in {
  opacity: 1;
  transform: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease)
}

.row {
  gap: 12px
}

/* 순위 동그라미 → 분류 아이콘 타일 / 1~3위 메달 */
.rank {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  font-size: 17px
}

.rank.emo {
  font-size: 24px;
  background: var(--emo-bg, #f3e7d8)
}

.rank.medal {
  font-size: 30px;
  background: linear-gradient(145deg, #fff3cf, #ffd978);
  box-shadow: 0 4px 12px rgba(242, 183, 5, .35)
}

.item.top .rank.medal {
  color: inherit
}

.name {
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.3px
}

/* 주소가 두 줄로 넘치지 않게 한 줄로 */
.tag {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 12px
}

.tag .cat-pill {
  flex: none;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--emo-bg, #f3e7d8);
  color: #6b4428;
  font-weight: 700;
  font-size: 11px
}

.tag .addr {
  overflow: hidden;
  text-overflow: ellipsis
}

/* 리뷰 모집: 숫자 대신 3칸 진행 막대 */
.score.recruit {
  min-width: 62px;
  text-align: center
}

.prog {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-bottom: 5px
}

.prog i {
  width: 14px;
  height: 6px;
  border-radius: 3px;
  background: #eadfd2
}

.prog i.on {
  background: linear-gradient(90deg, #f2b705, #f2c47a)
}

.score.recruit small {
  font-size: 10.5px;
  font-weight: 700;
  color: #a2846a;
  white-space: nowrap
}

.score.recruit.first small {
  color: #c0781f
}

.favbtn {
  transition: transform .2s var(--ease)
}

.favbtn:active {
  transform: scale(1.35)
}

.favbtn.on {
  animation: favPop .35s var(--ease)
}

@keyframes favPop {
  40% { transform: scale(1.45) }
}

/* 펼친 카드 */
.item.open .detail {
  animation: detailIn .3s var(--ease)
}

@keyframes detailIn {
  from { opacity: 0; transform: translateY(-4px) }
}

.reviewbtn {
  border-radius: 14px !important;
  background: linear-gradient(135deg, #8a5a34, #6b4428) !important;
  box-shadow: 0 6px 14px rgba(107, 68, 40, .35)
}

/* ── 아직 순위가 없을 때: 응원하는 큰 카드 ── */
.pempty.hero-empty {
  position: relative;
  overflow: hidden;
  padding: 22px 20px 20px;
  border: 0;
  border-radius: 22px;
  text-align: left;
  background: linear-gradient(140deg, #fff8ea 0%, #ffe9bf 100%);
  box-shadow: var(--shadow-card)
}

.pempty.hero-empty::after {
  content: "🏆";
  position: absolute;
  right: -6px;
  bottom: -14px;
  font-size: 92px;
  opacity: .9;
  transform: rotate(-12deg);
  filter: drop-shadow(0 6px 10px rgba(180, 120, 20, .3))
}

.pempty.hero-empty b {
  font-size: 18px;
  letter-spacing: -.4px;
  padding-right: 70px
}

.pempty.hero-empty span {
  padding-right: 80px;
  color: #8a6a48
}

.pempty.hero-empty .he-steps {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  padding-right: 80px
}

.pempty.hero-empty .he-steps i {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(107, 68, 40, .14)
}

/* 리뷰 모집 중 제목 */
.list-sub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 16px 4px 4px;
  font-size: 17px
}

.list-sub small {
  display: inline;
  font-size: 11.5px
}

.more-btn {
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px)
}

/* 불러오는 중: 회색 카드가 반짝이며 자리를 잡음 */
.skel {
  height: 76px;
  border-radius: var(--r-card);
  background: linear-gradient(100deg, rgba(255, 250, 243, .55) 30%, rgba(255, 250, 243, .9) 50%, rgba(255, 250, 243, .55) 70%);
  background-size: 300% 100%;
  animation: shimmer 1.3s linear infinite
}

@keyframes shimmer {
  to { background-position: -150% 0 }
}

/* ── 아래 메뉴: 굵은 테두리를 빼고 떠 있는 유리판처럼 ── */
.bottomnav {
  border: 0;
  border-radius: 24px;
  background: rgba(255, 250, 243, .9);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 10px 30px rgba(31, 20, 9, .35), inset 0 0 0 1px rgba(255, 255, 255, .6);
  padding: 5px
}

.bn-item+.bn-item {
  border-left: 0
}

.bn-item {
  border-radius: 19px;
  padding: 8px 0 6px;
  transition: background .25s var(--ease), color .2s
}

.bn-item.on {
  background: #6b4428;
  color: #fff
}

.bn-item.on .bn-label {
  color: #fff
}

/* 맨 위로 버튼 */
.to-top {
  position: fixed;
  right: max(16px, calc(50% - 204px));
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  z-index: 8;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 250, 243, .95);
  color: #6b4428;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(31, 20, 9, .3);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(.9);
  pointer-events: none;
  transition: opacity .25s, transform .25s var(--ease)
}

.to-top.show {
  opacity: 1;
  transform: none;
  pointer-events: auto
}

/* 움직임 줄이기를 켠 사람에게는 애니메이션을 끔 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important
  }

  .item.rv {
    opacity: 1;
    transform: none
  }
}

/* 2차 다듬기: 첫 화면에 매장이 더 빨리 보이게 */
.hero h2 { font-size: 24px; margin-top: 2px }
.tabs { margin: 10px 16px 4px }
.tabs button { padding: 8px; font-size: 14.5px }
.quick-row { margin-bottom: 12px }
.quick-row .lead-entry { flex-direction: row; align-items: center; gap: 10px }
.quick-row .lead-entry .le-ic { flex: none }
.quick-row .banner { flex-direction: row; align-items: center; flex-wrap: wrap }
.quick-row .banner > div { flex: 1 1 100% }
.quick-row .banner button { margin-top: 2px }
.pempty.hero-empty { padding: 18px 18px 16px }
.pempty.hero-empty::after { font-size: 76px; bottom: -12px }
.pempty.hero-empty b { font-size: 16.5px }
.pempty.hero-empty span { font-size: 12.5px }
.score.recruit { min-width: 0 }
.score.recruit small { font-size: 10px }
.prog i { width: 11px; height: 5px }

/* 아래 메뉴: 고른 칸은 금색, 아이콘이 잘 보이게 */
.bn-item.on { background: var(--acc); color: #3a2213 }
.bn-item.on .bn-label { color: #3a2213 }