/* ===== Design Tokens ===== */
:root {
  color-scheme: light;

  /* Palette — Warm Wood Tones */
  --bg: #FAF6F1;
  --surface: #FFFDF9;
  --surface-hover: #F3EDE4;
  --border: #E8DFD3;
  --border-strong: #D4C8B8;
  --text-primary: #2C2420;
  --text-secondary: #5C4F43;
  --text-tertiary: #9B8E80;
  --accent: #B5651D;
  --accent-light: #FDF0E2;
  --accent-dark: #8B4513;
  --success: #5D8A3C;
  --error: #C0392B;
  --error-light: #FDEDEB;
  --warning: #D4880F;

  /* Spacing */
  --header-height: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Shadows — Warm Brown */
  --shadow-sm: 0 1px 3px rgba(60, 40, 20, 0.07), 0 1px 2px rgba(60, 40, 20, 0.05);
  --shadow-md: 0 4px 12px rgba(60, 40, 20, 0.09);
  --shadow-lg: 0 12px 40px rgba(60, 40, 20, 0.12);
  --shadow-xl: 0 20px 60px rgba(60, 40, 20, 0.14);

  /* Transition */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Reset ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== Base ===== */
body {
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, sans-serif;
  color: var(--text-primary);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Serif Display (warm accent typography) ===== */
.login-card__title,
.brand__name,
.review-modal__title,
.tutorial__title,
.review-detail__name {
  font-family: "Noto Serif KR", Georgia, serif;
}

/* ===== Login Screen ===== */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 400ms var(--ease);
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}

.login-screen[hidden] {
  display: none;
}

.login-screen.is-visible {
  opacity: 1;
}

.login-screen.is-leaving {
  opacity: 0;
  pointer-events: none;
}

/* ── Background ── */
.login-screen__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(181, 101, 29, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(93, 138, 60, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(212, 136, 15, 0.06) 0%, transparent 50%),
    var(--bg);
}

.login-screen__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(181, 101, 29, 0.04) 0%, rgba(255, 255, 255, 0) 60%);
}

/* ── Login Card ── */
.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  margin: 0 1.5rem;
  padding: 2.5rem 2rem 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  text-align: center;
  animation: cardEnter 600ms var(--ease) both;
}

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.login-card__header {
  margin-bottom: 1.75rem;
}

.login-card__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 4px 16px rgba(181, 101, 29, 0.3);
}

.login-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 0.375rem;
}

.login-card__subtitle {
  font-size: 0.9rem;
  color: var(--text-tertiary);
  font-weight: 400;
}

/* ── Features ── */
.login-card__features {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 2rem;
  text-align: left;
}

.login-card__feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.login-card__feature svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* ── Google Button ── */
.login-card__actions {
  margin-bottom: 1.5rem;
}

.login-card__google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1.5rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 160ms var(--ease), box-shadow 200ms var(--ease),
    background 160ms var(--ease), transform 120ms var(--ease);
}

.login-card__google-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
  background: var(--surface-hover);
}

.login-card__google-btn:active {
  transform: scale(0.98);
}

.login-card__google-btn.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.login-card__google-btn svg {
  flex-shrink: 0;
}

/* ── Footer ── */
.login-card__footer {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  line-height: 1.5;
}

.login-card__footer a {
  color: var(--accent);
  text-decoration: none;
}

.login-card__footer a:hover {
  text-decoration: underline;
}

/* ===== 이용약관 / 개인정보처리방침 모달 ===== */
.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 10003;
  display: flex;
  align-items: center;
  justify-content: center;
}

.legal-modal[hidden] {
  display: none;
}

.legal-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.legal-modal__content {
  position: relative;
  background: var(--surface);
  border-radius: 16px;
  width: 90%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.legal-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.legal-modal__header h2 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.legal-modal__close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--surface-hover);
  color: var(--text-secondary);
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.legal-modal__close:hover {
  background: var(--border);
}

.legal-modal__body {
  padding: 16px 20px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.legal-modal__body h3 {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 20px 0 8px;
}

.legal-modal__body h3:first-of-type {
  margin-top: 8px;
}

.legal-modal__body p {
  margin: 0 0 8px;
}

.legal-modal__body ul {
  margin: 0 0 8px;
  padding-left: 20px;
}

.legal-modal__body li {
  margin-bottom: 4px;
}

.legal-modal__date {
  font-size: 12px;
  color: var(--text-tertiary);
}

.legal-modal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 8px 0;
}

.legal-modal__table th,
.legal-modal__table td {
  border: 1px solid var(--border);
  padding: 6px 8px;
  text-align: left;
}

.legal-modal__table th {
  background: var(--surface-hover);
  font-weight: 600;
  color: var(--text-primary);
}

/* ── Loading Spinner ── */
.login-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.login-loading[hidden] {
  display: none;
}

.login-loading__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== App (로그인 후) ===== */
.app {
  display: grid;
  grid-template-rows: var(--header-height) 1fr;
  min-height: 100vh;
  opacity: 0;
  transition: opacity 300ms var(--ease);
  padding-top: env(safe-area-inset-top, 0px);
}

.app[hidden] {
  display: none;
}

.app.is-visible {
  opacity: 1;
}

/* ===== Header ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem;
  height: var(--header-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 9000;
  overflow: visible;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--text-primary);
  flex-shrink: 0;
}

.brand__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
}

.brand__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand__name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ===== Search ===== */
.search-wrapper {
  position: relative;
  flex: 1;
  max-width: 480px;
}

.search {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0 0.25rem 0 0.875rem;
  height: 42px;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}

.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.search__icon {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.search input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--text-primary);
  padding: 0 0.5rem;
  outline: none;
  min-width: 0;
}

.search input::placeholder {
  color: var(--text-tertiary);
}

/* 크롬 기본 search 취소 버튼 숨기기 */
.search input::-webkit-search-cancel-button {
  display: none;
}

.search button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms var(--ease), transform 120ms var(--ease);
}

.search button:hover {
  background: var(--accent-dark);
  transform: scale(1.05);
}

.search button:active {
  transform: scale(0.95);
}

/* ===== Suggestions Dropdown ===== */
.suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  max-height: 420px;
  overflow-y: auto;
  display: none;
  z-index: 9999;
}

.suggestions.is-open {
  display: block;
  animation: dropIn 180ms var(--ease);
}

@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.suggestions__header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.suggestions__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 100ms var(--ease);
  border-bottom: 1px solid var(--border);
}

.suggestions__item:last-child {
  border-bottom: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.suggestions__item:hover,
.suggestions__item.is-active {
  background: var(--accent-light);
}

.suggestions__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--accent);
  flex-shrink: 0;
}

.suggestions__info {
  flex: 1;
  min-width: 0;
}

.suggestions__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestions__category {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-light);
  padding: 0.125rem 0.4rem;
  border-radius: 4px;
  margin-left: 0.375rem;
  vertical-align: middle;
}

.suggestions__address {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 0.125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestions__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem;
  font-size: 0.8rem;
  color: var(--text-tertiary);
}

.suggestions__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1.5rem;
  text-align: center;
}

.suggestions__empty-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.suggestions__empty-sub {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

/* ===== Auth (로그인·유저 메뉴) ===== */
.auth {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.auth__login-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease),
    background 160ms var(--ease);
  white-space: nowrap;
}

.auth__login-btn:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  background: var(--surface-hover);
}

.auth__login-btn:active {
  transform: scale(0.97);
}

.auth__login-btn svg {
  flex-shrink: 0;
}

/* ── User Menu ── */
.user-menu {
  position: relative;
}

.user-menu__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.625rem 0.25rem 0.25rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
  font-family: inherit;
}

.user-menu__toggle:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.user-menu__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}

.user-menu__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu__caret {
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: transform 160ms var(--ease);
}

.user-menu__toggle[aria-expanded="true"] .user-menu__caret {
  transform: rotate(180deg);
}

/* ── Dropdown ── */
.user-menu__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  animation: dropIn 150ms var(--ease);
  overflow: hidden;
}

.user-menu__dropdown[hidden] {
  display: none;
}

.user-menu__info {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.user-menu__email {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  word-break: break-all;
}

.user-menu__logout {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  color: var(--error);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms var(--ease);
}

.user-menu__logout:hover {
  background: var(--error-light);
}

/* ===== Map Shell ===== */
.map-shell {
  position: relative;
  padding: 0;
}

#map {
  width: 100%;
  height: calc(100vh - var(--header-height));
  min-height: 480px;
}

/* ===== Info Window (카카오맵 위 커스텀) ===== */
.iw-card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.875rem 1rem;
  width: max-content; /* 콘텐츠 폭에 맞게 자동 수축 */
  max-width: 260px;   /* 상한선 */
  font-family: "Noto Sans KR", sans-serif;
}

.iw-card__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: break-word;
  padding-right: 1.75rem; /* 닫기 버튼 영역 확보 */
}

.iw-card__reviewed {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: -0.125rem;
}

.iw-card__category {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  width: fit-content;
}

.iw-card__address {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  line-height: 1.4;
}

.iw-card__phone {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.iw-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.iw-card__link:hover {
  text-decoration: underline;
}

/* ===== Toast ===== */
.toast {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%) translateY(12px);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
  z-index: 50;
  white-space: nowrap;
}

.toast.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.toast--info {
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.toast--info svg {
  color: var(--accent);
}

.toast--error {
  background: var(--error-light);
  color: var(--error);
  border: 1px solid rgba(250, 82, 82, 0.2);
}

.toast--error svg {
  color: var(--error);
}

/* ===== Responsive ===== */
@media (max-width: 840px) {
  .topbar {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 0.75rem 1rem;
    gap: 0.625rem;
  }

  .search-wrapper {
    max-width: none;
  }

  .auth {
    align-self: flex-end;
    position: absolute;
    top: 0.75rem;
    right: 1rem;
  }

  #map {
    height: calc(100vh - 120px);
    min-height: 400px;
  }

  .toast {
    left: 1rem;
    right: 1rem;
    transform: translateX(0) translateY(12px);
    white-space: normal;
    text-align: center;
    justify-content: center;
  }

  .toast.is-visible {
    transform: translateX(0) translateY(0);
  }
}

@media (max-width: 480px) {
  .brand__name {
    font-size: 0.9rem;
  }

  #map {
    height: calc(100vh - 130px);
    min-height: 320px;
  }

  .login-card {
    padding: 2rem 1.25rem 1.5rem;
    margin: 0 1rem;
  }

  .login-card__title {
    font-size: 1.25rem;
  }

  .login-card__google-btn {
    font-size: 0.875rem;
    padding: 0.75rem 1.25rem;
  }
}

/* ===== User Menu — 추가 아이템 (튜토리얼 다시보기 등) ===== */
.user-menu__divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

.user-menu__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms var(--ease);
}

.user-menu__item:hover {
  background: var(--surface-hover);
}

.user-menu__item svg {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* ===== Info Window Actions ===== */
.iw-card__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.iw-card__review-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-full);
  background: var(--accent-light);
  color: var(--accent-dark);
  font-size: 0.7rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms var(--ease), transform 120ms var(--ease);
  white-space: nowrap;
}

.iw-card__review-btn:hover {
  background: var(--accent);
  color: #fff;
}

.iw-card__review-btn:active {
  transform: scale(0.96);
}

.iw-card__review-btn svg {
  flex-shrink: 0;
}

/* ===== Review Overlay ===== */
.review-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(44, 36, 32, 0.40);
  backdrop-filter: blur(2px);
  animation: fadeIn 200ms var(--ease);
}

.review-overlay[hidden] {
  display: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== Review Modal ===== */
.review-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10002;
  width: 95%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  animation: modalSlideIn 300ms var(--ease);
  overflow: hidden;
}

.review-modal[hidden] {
  display: none;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ── Header ── */
.review-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.review-modal__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.review-modal__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}

.review-modal__close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* ── Body ── */
.review-modal__body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1;
}

/* ── Place info ── */
.review-place {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
}

.review-place__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  color: var(--accent);
  flex-shrink: 0;
}

.review-place__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
}

.review-place__meta {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 0.125rem;
}

/* ── Section label ── */
.review-section {
  margin-bottom: 1.25rem;
}

.review-section__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.review-section__required {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--error);
  background: var(--error-light);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  margin-left: 0.25rem;
  vertical-align: middle;
}

.review-section__hint {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  margin-bottom: 0.625rem;
}

/* ===== Rating Cards ===== */
.rating-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem;
}

.rating-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.875rem 0.5rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease),
    transform 120ms var(--ease), box-shadow 160ms var(--ease);
  font-family: inherit;
  text-align: center;
}

.rating-card:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.rating-card.is-active {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 0 0 3px rgba(181, 101, 29, 0.15);
}

.rating-card:active {
  transform: scale(0.97);
}

.rating-card__stars {
  font-size: 1.125rem;
  line-height: 1;
}

.rating-card__title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
}

.rating-card__desc {
  font-size: 0.625rem;
  color: var(--text-tertiary);
  line-height: 1.3;
}

/* ===== Photo Upload Zone ===== */
.photo-zone {
  position: relative;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
  overflow: hidden;
}

.photo-zone:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.photo-zone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-light);
  border-style: solid;
}

.photo-zone__prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 1.5rem;
  text-align: center;
}

.photo-zone__prompt svg {
  color: var(--border-strong);
}

.photo-zone__hint {
  font-size: 0.7rem;
  color: var(--text-tertiary);
}

.photo-zone__preview {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* ===== Textarea ===== */
.review-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--text-primary);
  resize: vertical;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
  line-height: 1.5;
}

.review-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.review-textarea::placeholder {
  color: var(--text-tertiary);
}

/* ===== Date Picker (scroll wheel) ===== */
.date-picker {
  position: relative;
  display: flex;
  height: 200px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg);
}

.date-picker__highlight {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 40px;
  transform: translateY(-50%);
  background: var(--accent-light);
  border-top: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  pointer-events: none;
  z-index: 1;
}

.date-picker__col {
  flex: 1;
  position: relative;
}

.date-picker__col + .date-picker__col {
  border-left: 1px solid var(--border);
}

.wheel {
  list-style: none;
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 2;
}

.wheel::-webkit-scrollbar {
  display: none;
}

.wheel__item {
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 100ms var(--ease);
  user-select: none;
}

.wheel__item[data-value=""] {
  color: transparent;
}

/* ===== Review Error ===== */
.review-error {
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-sm);
  background: var(--error-light);
  color: var(--error);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  margin-top: 0.5rem;
}

.review-error[hidden] {
  display: none;
}

/* ── Footer ── */
.review-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.review-modal__cancel {
  padding: 0.625rem 1.25rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 120ms var(--ease), background 120ms var(--ease);
}

.review-modal__cancel:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.review-modal__submit {
  padding: 0.625rem 1.5rem;
  border: none;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms var(--ease), transform 120ms var(--ease);
}

.review-modal__submit:hover {
  background: var(--accent-dark);
}

.review-modal__submit:active {
  transform: scale(0.97);
}

.review-modal__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===== Tutorial Overlay ===== */
.tutorial {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(44, 36, 32, 0.50);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 300ms var(--ease);
}

.tutorial[hidden] {
  display: none;
}

.tutorial.is-visible {
  opacity: 1;
}

.tutorial__card {
  width: 90%;
  max-width: 400px;
  padding: 2.5rem 2rem 2rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.tutorial__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, #40c057 50%, var(--warning) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.tutorial__card.slide-in {
  animation: tutorialSlide 300ms var(--ease);
}

@keyframes tutorialSlide {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.tutorial__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-light) 0%, rgba(64, 192, 87, 0.08) 100%);
  margin-bottom: 1.25rem;
  position: relative;
}

.tutorial__icon::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px dashed var(--border);
  opacity: 0.5;
}

.tutorial__icon svg {
  display: inline-block;
}

.tutorial__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.tutorial__body {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  white-space: pre-line;
}

/* ── Dots ── */
.tutorial__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tutorial-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--border-strong);
  transition: background 300ms var(--ease), width 300ms var(--ease), transform 200ms var(--ease);
}

.tutorial-dot.is-active {
  background: var(--accent);
  width: 24px;
  transform: scale(1);
}

/* ── Actions ── */
.tutorial__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.tutorial__btn {
  padding: 0.625rem 1.75rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms var(--ease), transform 120ms var(--ease);
}

.tutorial__btn:active {
  transform: scale(0.97);
}

.tutorial__btn--primary {
  border: none;
  background: var(--accent);
  color: #fff;
}

.tutorial__btn--primary:hover {
  background: var(--accent-dark);
}

.tutorial__btn--secondary {
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
}

.tutorial__btn--secondary:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.tutorial__btn--secondary[hidden] {
  display: none;
}

.tutorial__skip {
  border: none;
  background: none;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  padding: 0.375rem;
  transition: color 120ms var(--ease);
}

.tutorial__skip:hover {
  color: var(--text-secondary);
}

.tutorial__skip[hidden] {
  display: none;
}

/* ── Tutorial step number ── */
.tutorial__step-num {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-light);
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.75rem;
  letter-spacing: 0.03em;
}

/* ===== Review Modal Responsive ===== */
@media (max-width: 520px) {
  .review-modal {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px));
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    animation: modalSlideUp 300ms var(--ease);
    overflow-x: hidden;
  }

  @keyframes modalSlideUp {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .review-modal__body {
    padding: 1rem;
    overflow-x: hidden;
  }

  /* iOS Safari 자동 확대 방지: 포커스 시 font-size < 16px이면 zoom-in 발생 */
  .review-textarea {
    font-size: 1rem;
  }

  .rating-group {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
  }

  .rating-card {
    padding: 0.625rem 0.25rem;
  }

  .rating-card__desc {
    display: none;
  }

  .tutorial__card {
    margin: 0 0.75rem;
    padding: 2rem 1.5rem 1.5rem;
  }
}

/* ===== 내 맛집 토글 버튼 ===== */
.my-reviews-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 13px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.my-reviews-toggle svg {
  transition: fill 0.15s ease, stroke 0.15s ease;
}

.my-reviews-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

.my-reviews-toggle.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.my-reviews-toggle.is-active svg {
  fill: rgba(255, 255, 255, 0.85);
  stroke: #fff;
}

/* ===== 클러스터 오버레이 ===== */
.rv-cluster {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  filter: drop-shadow(0 3px 10px rgba(60, 40, 20, 0.22));
  will-change: transform, opacity;
  transition: filter 0.15s ease;
}

.rv-cluster:hover {
  filter: drop-shadow(0 5px 16px rgba(60, 40, 20, 0.32));
}

.rv-cluster__box {
  background: var(--surface);
  border-radius: 10px;
  padding: 3px;
  overflow: hidden;
}

.rv-cluster__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 2px;
  width: 86px;
  height: 86px;
  border-radius: 8px;
  overflow: hidden;
}

.rv-cluster__cell {
  overflow: hidden;
}

.rv-cluster__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transition: transform 0.2s ease;
}

.rv-cluster:hover .rv-cluster__cell img {
  transform: scale(1.04);
}

.rv-cluster__tail {
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 12px solid var(--surface);
}

.rv-cluster__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--surface);
  pointer-events: none;
}

/* ===== 개별 리뷰 핀 ===== */
.rv-pin {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  filter: drop-shadow(0 3px 10px rgba(60, 40, 20, 0.22));
  will-change: transform, opacity;
  transition: filter 0.15s ease;
}

.rv-pin:hover {
  filter: drop-shadow(0 5px 16px rgba(60, 40, 20, 0.32));
}

.rv-pin__photo-wrap {
  width: 74px; /* 사진(68px) + 좌우 마진(3px×2) 고정 — 긴 이름에 의한 폭 확장 방지 */
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

/* ── 식당명 바 ── */
.rv-pin__name {
  overflow: hidden;
  padding: 5px 5px 4px;
  border-bottom: 1px solid var(--border);
  text-align: left; /* 긴 이름: 왼쪽 기준 marquee */
}

/* 짧은 이름(≤5자): 가운데 정렬 */
.rv-pin--short-name .rv-pin__name {
  text-align: center;
}

.rv-pin__name span {
  display: inline-block;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 600;
  font-family: "Noto Sans KR", sans-serif;
  color: var(--text-primary);
  line-height: 1.2;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.01em;
}

/* hover 시 긴 이름만 슬라이드 (짧은 이름은 min()으로 0 고정) */
.rv-pin:hover .rv-pin__name span {
  animation: rv-name-scroll 2.4s ease-in-out 0.6s infinite alternate;
}

@keyframes rv-name-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(min(0px, calc(-100% + 64px))); }
}

.rv-pin__photo {
  width: 68px;
  height: 68px;
  object-fit: cover;
  display: block;
  margin: 3px 3px 0;
  pointer-events: none;
  transition: transform 0.2s ease;
}

.rv-pin:hover .rv-pin__photo {
  transform: scale(1.04);
}

.rv-pin__rating {
  font-size: 10px;
  color: #f59f00;
  text-align: center;
  padding: 2px 4px 4px;
  letter-spacing: 1px;
  pointer-events: none;
  user-select: none;
}

.rv-pin__tail {
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 12px solid var(--surface);
}

/* ===== 리뷰 상세 패널 (bottom sheet) ===== */
.review-detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(44, 36, 32, 0.40);
  z-index: 10004;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.review-detail-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.review-detail {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-xl);
  z-index: 10005;
  transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.review-detail.is-open {
  transform: translateX(-50%) translateY(0);
}

.review-detail__handle {
  width: 36px;
  height: 4px;
  background: var(--border-strong);
  border-radius: var(--radius-full);
  margin: 10px auto 0;
  flex-shrink: 0;
}

.review-detail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 20px 10px;
  gap: 12px;
  flex-shrink: 0;
}

.review-detail__info {
  min-width: 0;
}

.review-detail__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  word-break: keep-all;
}

.review-detail__address {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-detail__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface-hover);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.review-detail__close:hover {
  background: var(--border);
}

.review-detail__photo {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.review-detail__body {
  padding: 16px 20px calc(36px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  flex: 1 1 auto;
}

.review-detail__rating {
  font-size: 15px;
  font-weight: 700;
  color: #f59f00;
  margin-bottom: 5px;
}

.review-detail__date {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}

.review-detail__text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: keep-all;
}

.review-detail__delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
  padding: 8px 14px;
  min-height: 44px;
  border: 1px solid #C0392B;
  border-radius: 8px;
  background: transparent;
  color: #C0392B;
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.review-detail__delete-btn:hover {
  background: #C0392B;
  color: #fff;
}

.review-detail__delete-btn svg {
  flex-shrink: 0;
}

/* ===== 내 맛집 사이드 패널 ===== */
.my-reviews-panel {
  position: fixed;
  top: var(--header-height);
  right: 0;
  bottom: 0;
  width: 300px;
  background: var(--surface);
  box-shadow: -4px 0 24px rgba(60, 40, 20, 0.12);
  z-index: 8990; /* 헤더(9000)보다 아래 */
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s var(--ease);
  overflow: hidden;
}

.my-reviews-panel.is-open {
  transform: translateX(0);
}

.my-reviews-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 8px;
}

.my-reviews-panel__header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.my-reviews-panel__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.my-reviews-panel__title svg {
  color: var(--accent);
  fill: var(--accent-light);
  stroke: var(--accent);
}

.my-reviews-panel__count {
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--surface-hover);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  font-weight: 500;
}

/* ── 카테고리 필터 칩 ── */
.mrp-filter {
  display: flex;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}

.mrp-filter__chip {
  flex-shrink: 0;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}

.mrp-filter__chip.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.mrp-filter__count {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-left: 0.125rem;
}

.my-reviews-panel__list {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ===== 지역 그룹 아이템 ===== */
.mrp-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}

.mrp-group:last-child {
  border-bottom: none;
}

.mrp-group:hover {
  background: var(--surface-hover);
}

.mrp-group:hover .mrp-group__photos img {
  transform: scale(1.03);
}

.mrp-group__photos {
  display: flex;
  gap: 4px;
}

.mrp-group__photos img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  display: block;
}

.mrp-group__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mrp-group__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mrp-group__count {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 패널 열렸을 때 모바일 대응 */
@media (max-width: 400px) {
  .my-reviews-panel {
    width: 100%;
  }
}

/* ===== 사이드 패널: 지역 그룹 화살표 ===== */
.mrp-group {
  cursor: pointer;
  align-items: center;
}
.mrp-group__arrow {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--text-tertiary);
}

/* ===== 사이드 패널: 드릴다운 뒤로가기 ===== */
.mrp-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.mrp-back__btn {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.mrp-back__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== 사이드 패널: 장소 아이템 (Level 1) ===== */
.mrp-place {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 150ms ease;
}
.mrp-place:hover {
  background: var(--surface-hover);
}
.mrp-place__photo {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}
.mrp-place__info {
  flex: 1;
  min-width: 0;
}
.mrp-place__name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mrp-place__rating {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.mrp-place__count {
  display: block;
  font-size: 11px;
  color: var(--accent);
  margin-top: 2px;
}

/* ===== 리뷰 핀: 다중 방문 배지 ===== */
.rv-pin__multi {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  line-height: 1;
}

/* ===== 리뷰 모달: N번째 방문 뱃지 ===== */
.review-visit-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  padding: 3px 10px;
  background: #fef3c7;
  color: #b45309;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

/* ===== 리뷰 상세: 스와이프 내비게이션 ===== */
.review-detail__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 0 4px;
}
.review-detail__nav-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: border-color 150ms, color 150ms;
}
.review-detail__nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.review-detail__counter {
  font-size: 13px;
  color: var(--text-secondary);
  min-width: 36px;
  text-align: center;
}

/* ===== 인포윈도우 닫기 버튼 ===== */
.iw-card {
  position: relative;
}
.iw-card__close-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0;
  transition: background 150ms, color 150ms;
}
.iw-card__close-btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* ===== 바텀시트 백드롭 ===== */
.panel-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(44, 36, 32, 0.35);
  z-index: 8980;
  animation: backdropIn 0.2s ease;
}
.panel-backdrop.is-visible {
  display: block;
}
@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===== 모바일 (≤640px): 한 화면 레이아웃 ===== */
@media (max-width: 640px) {
  /* ── 뷰포트 고정: iOS 횡스크롤 완전 차단 ── */
  html {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  /* ── 앱 컨테이너: fixed 뷰포트를 flex column으로 채움 ── */
  .app {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    inset: 0;
    min-height: 0;
    /* PWA standalone: 노치/다이나믹 아일랜드 아래로 콘텐츠 밀기 */
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* CSS 변수 */
  :root {
    --header-height: 52px;
  }

  /* ── 헤더: 840px column 해제, 아이콘만 한 줄 ── */
  .topbar {
    flex-direction: row;
    align-items: center;
    height: 52px;
    padding: 0 0.75rem;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  /* 브랜드 텍스트 숨김 */
  .brand__name {
    display: none;
  }
  .brand__icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  /* 검색창: 남은 공간 전부, 최소 폭 0 보장 */
  .search-wrapper {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
  .search {
    height: 38px;
  }
  /* iOS Safari 자동 확대 방지: font-size < 16px이면 포커스 시 zoom-in 발생 */
  .search input {
    font-size: 1rem;
  }

  /* 내 맛집 버튼: 텍스트 숨기고 아이콘만 */
  .my-reviews-toggle {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    flex-shrink: 0;
    gap: 0;
  }
  .my-reviews-toggle svg {
    flex-shrink: 0;
  }
  .my-reviews-toggle__text {
    display: none;
  }

  /* 유저 메뉴: 이름·캐럿 숨기고 아바타만 */
  .user-menu__name,
  .user-menu__caret {
    display: none;
  }
  .user-menu__toggle {
    padding: 0;
    gap: 0;
    background: none;
    border: none;
    box-shadow: none;
  }
  .user-menu__avatar {
    width: 30px;
    height: 30px;
  }
  .auth {
    position: static;
    align-self: auto;
    flex-shrink: 0;
  }

  /* ── 맵 쉘: 헤더 아래 나머지 공간 전부 ── */
  .map-shell {
    flex: 1 1 0;
    min-height: 0;
    position: relative;
  }
  #map {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  /* ── 내 맛집 패널 → 바텀시트 ── */
  .my-reviews-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 72dvh;
    max-height: 72dvh;
    transform: translateY(100%);
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -4px 32px rgba(60, 40, 20, 0.18);
  }
  .my-reviews-panel.is-open {
    transform: translateY(0);
  }

  /* 드래그 핸들 + 헤더 */
  .my-reviews-panel__header {
    flex-direction: column;
    padding-top: 8px;
    gap: 0;
    cursor: grab;
  }
  .my-reviews-panel__header::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 0 auto 10px;
  }
  .my-reviews-panel__header-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* 모바일: X 버튼 숨김 (스와이프로 닫기) */
  .my-reviews-panel__close-btn {
    display: none;
  }
}

/* 데스크톱에서도 닫기 버튼 숨김 */
@media (min-width: 641px) {
  .my-reviews-panel__close-btn {
    display: none;
  }
}

/* ===== Language Selector ===== */
.lang-selector {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
}

.lang-selector__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  min-height: 36px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.lang-selector__btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.lang-selector__globe {
  flex-shrink: 0;
}

.lang-selector__label {
  letter-spacing: 0.5px;
}

.lang-selector__dropdown {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  min-width: 120px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  animation: langDropIn 150ms var(--ease);
}

.lang-selector__dropdown[hidden] {
  display: none;
}

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

.lang-selector__option {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  min-height: 44px;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.875rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 150ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.lang-selector__option:hover {
  background: var(--surface-hover);
}

.lang-selector__option.is-active {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-light);
}

.lang-selector__option + .lang-selector__option {
  border-top: 1px solid var(--border);
}

/* ── User Menu Language Item ── */
.user-menu__lang {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.user-menu__lang-current {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
}

.user-menu__lang-submenu {
  padding: 0.25rem 0;
  border-top: 1px solid var(--border);
}

.user-menu__lang-submenu[hidden] {
  display: none;
}

.user-menu__lang-option {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem 0.5rem 2.5rem;
  min-height: 40px;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 150ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.user-menu__lang-option:hover {
  background: var(--surface-hover);
}

.user-menu__lang-option.is-active {
  color: var(--accent);
  font-weight: 600;
}

/* ==================== 광고 슬롯 ==================== */

.ad-slot {
  text-align: center;
  background: var(--gray-50, #f8f9fa);
}

.ad-slot[hidden] {
  display: none;
}

.ad-slot__label {
  display: block;
  font-size: 0.625rem;
  color: var(--text-tertiary, #adb5bd);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.125rem 0;
}

.ad-slot--banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8999;
  border-top: 1px solid var(--border);
  padding: 0.125rem 0 calc(0.25rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  max-height: 60px;
  overflow: hidden;
}

.ad-slot--banner .adsbygoogle {
  max-height: 50px;
}

.ad-slot--panel {
  padding: 0.75rem;
  border-top: 1px solid var(--border);
}

.ad-slot--modal {
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

/* 배너 광고 표시 시 지도/패널 하단 여백 확보 */
body.has-ads .map-shell {
  padding-bottom: 60px;
}

body.has-ads .my-reviews-panel {
  bottom: 60px;
}

@media (max-width: 640px) {
  body.has-ads .map-shell {
    padding-bottom: 50px;
  }

  body.has-ads .my-reviews-panel {
    bottom: 50px;
  }
}