/* Editorial UI. One design layer over the existing functional layout.
   The root scope intentionally outranks legacy mobile patches. */
html#recodateApp {
  color-scheme: only light;
  --bg: #fff;
  --surface: #fff;
  --surface-soft: #f7f7f8;
  --text: #171719;
  --muted: #717176;
  --line: #e4e4e7;
  --primary: #f32965;
  --primary-dark: #d51d55;
  --primary-soft: #fff1f5;
  --blue: #316cba;
  --blue-soft: #eff5ff;
  --teal: #26836b;
  --shadow: none;
  --shadow-soft: none;
  --page-width: 760px;
  --nav-height: 68px;
  background: #fff !important;
  scroll-padding-top: 80px;
}
#recodateApp body {
  margin: 0 !important;
  background: #fff !important;
  color: var(--text) !important;
  font: 400 15px/1.55 Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
#recodateApp :where(*) { box-sizing: border-box; letter-spacing: 0 !important; }
#recodateApp [hidden] { display: none !important; }
#recodateApp :where(h1,h2,h3,p,figure) { margin-top: 0; }
#recodateApp :where(h1,h2,h3,strong,b) { color: var(--text); }
#recodateApp :where(h1,h2,h3) { font-family: inherit !important; line-height: 1.4 !important; word-break: keep-all; overflow-wrap: anywhere; }
#recodateApp h1 { font-size: 25px !important; font-weight: 750 !important; }
#recodateApp h2 { font-size: 20px !important; font-weight: 700 !important; }
#recodateApp h3 { font-size: 17px !important; font-weight: 700 !important; }
#recodateApp :where(button,input,select,textarea,a) { font-family: inherit !important; -webkit-tap-highlight-color: transparent; }
#recodateApp :where(button,a) { touch-action: manipulation; }
#recodateApp :where(button) { font-size: 14px; border-radius: 6px; box-shadow: none !important; }
#recodateApp :where(button,a,input,select,textarea):focus-visible { outline: 2px solid var(--primary) !important; outline-offset: 3px !important; }
#recodateApp :where(button):disabled { cursor: not-allowed; opacity: .48; }
#recodateApp :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea) {
  min-width: 0 !important; max-width: 100% !important; min-height: 46px; border: 1px solid #d9d9dd !important;
  border-radius: 6px !important; background: #fff !important; color: var(--text) !important;
  font-size: 16px !important; line-height: 1.5 !important; padding: 10px 12px !important; box-shadow: none !important;
}
#recodateApp textarea { resize: vertical; }
#recodateApp input::placeholder, #recodateApp textarea::placeholder { color: #929296; }
#recodateApp input:is([type=checkbox],[type=radio]) {
  appearance: auto !important; -webkit-appearance: auto !important; accent-color: var(--primary) !important;
  position: static !important; opacity: 1 !important; width: 20px !important; height: 20px !important;
  min-width: 20px !important; flex: 0 0 20px !important; padding: 0 !important; margin: 0 !important;
  box-shadow: none !important; background: #fff !important; border-radius: 3px !important;
}
#recodateApp input:is([type=checkbox],[type=radio])::before { content: none !important; }
#recodateApp input[type=range] { accent-color: var(--primary); width: 100%; }
#recodateApp :where(.primary-button,.recodate-cta,.browse-detail-recommend-button,.tripti-home-button) {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 16px !important; border: 1px solid var(--primary) !important;
  background: var(--primary) !important; color: #fff !important; border-radius: 6px !important;
  font-size: 15px !important; font-weight: 650 !important; box-shadow: none !important; text-align: center;
  white-space: normal !important; overflow-wrap: anywhere; line-height: 1.45 !important;
}
#recodateApp :where(.secondary-button,.step-navigation-button,.region-select-button,.travel-date-button,.inline-option-button,.custom-course-open-button,.community-compose-button) {
  min-height: 44px; padding: 10px 14px !important; border: 1px solid #d7d7dc !important;
  background: #fff !important; color: var(--text) !important; border-radius: 6px !important;
  font-size: 14px !important; font-weight: 550 !important; line-height: 1.5 !important;
}
#recodateApp :where(.primary-button,.secondary-button,.recodate-cta)::before,
#recodateApp :where(.primary-button,.secondary-button,.recodate-cta)::after { content: none !important; }
#recodateApp .rd-icon { display: inline-block; width: 22px; height: 22px; flex: 0 0 22px; background: currentColor; mask: var(--rd-icon) center/contain no-repeat; -webkit-mask: var(--rd-icon) center/contain no-repeat; }

/* Application chrome stays in normal flow; the bottom navigation never becomes a header. */
#recodateApp .app-masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: min(100%, var(--page-width)); min-height: 68px; margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top)) 20px 10px; background: #fff;
}
#recodateApp .editorial-brand { border: 0; background: none; padding: 0; color: var(--primary); font-size: 23px; font-weight: 750; }
#recodateApp .masthead-actions { display: flex; align-items: center; gap: 4px; }
#recodateApp .masthead-actions :is(.home-profile-chip,.home-notif-button,.masthead-guest) { position: relative !important; inset: auto !important; margin: 0 !important; width: 40px !important; min-width: 40px !important; height: 40px !important; padding: 5px !important; border: 0 !important; border-radius: 50% !important; background: #fff !important; color: var(--text) !important; display: inline-flex; align-items: center; justify-content: center; box-shadow: none !important; transform: none !important; }
#recodateApp .home-profile-chip { order: 2; }
#recodateApp .home-profile-nickname { display: none; }
#recodateApp .home-profile-avatar { width: 30px; height: 30px; font-size: 13px; }
#recodateApp .masthead-actions:has(.home-profile-chip:not([hidden])) .masthead-guest { display: none; }
#recodateApp .portal-view {
  width: min(100%, var(--page-width)) !important; min-width: 0 !important; max-width: var(--page-width) !important;
  margin: 0 auto !important; padding: 12px 20px calc(32px + var(--nav-height) + env(safe-area-inset-bottom)) !important;
  background: #fff !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
#recodateApp .portal-view::before, #recodateApp .portal-view::after { content: none !important; }
#recodateApp .back-home-button {
  position: static !important; inset: auto !important; display: inline-flex !important; align-items: center;
  min-height: 40px !important; width: auto !important; max-width: 100%; margin: 0 0 16px !important;
  padding: 4px 0 !important; border: 0 !important; border-radius: 0 !important; background: #fff !important;
  font-size: 13px !important; font-weight: 500 !important; color: #53535a !important; box-shadow: none !important; transform: none !important;
}
#recodateApp :where(.browse-heading,.topbar,.tripti-hero,.map-explore-title) { position: static !important; margin: 0 0 24px !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
#recodateApp :where(.browse-heading,.topbar,.tripti-hero) h1 { margin-bottom: 8px !important; }
#recodateApp :where(.browse-heading,.tripti-hero) p { color: var(--muted) !important; font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 12px; }
#recodateApp .home-kicker, #recodateApp .eyebrow { font-size: 12px !important; font-weight: 500 !important; color: #626268 !important; margin: 0 0 8px !important; text-transform: none !important; }
#recodateApp .saved-course-floating-button { display: none !important; }
#recodateApp .portal-header { position: fixed !important; inset: auto 0 0 !important; z-index: 100 !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; transform: none !important; }
#recodateApp .portal-logo { display: none !important; }
#recodateApp .portal-nav { display: grid !important; grid-template-columns: repeat(5,minmax(0,1fr)) !important; gap: 0 !important; width: min(100%, var(--page-width)) !important; margin: 0 auto !important; padding: 0 6px env(safe-area-inset-bottom) !important; }
#recodateApp .portal-nav button { position: relative; display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 4px !important; min-width: 0 !important; min-height: var(--nav-height) !important; height: auto !important; padding: 8px 2px !important; border: 0 !important; background: #fff !important; color: #303035 !important; border-radius: 0 !important; font-size: 11px !important; font-weight: 500 !important; }
#recodateApp .portal-nav button::before, #recodateApp .portal-nav button::after { content: none !important; }
#recodateApp .portal-nav button.active { color: var(--primary) !important; }
#recodateApp .portal-nav button:is([data-show-view=recommendation],[data-show-view=tripti],[data-show-view=profile],[data-show-view=login]) { display: none !important; }
#recodateApp .portal-nav .rd-icon { width: 24px; height: 24px; flex-basis: 24px; }

/* Home and managed banners. No autoplay: reading and assistive focus remain stable. */
#recodateApp .home-hero { display: block !important; padding: 0 !important; min-height: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
#recodateApp .home-hero::before, #recodateApp .home-hero::after { content: none !important; }
#recodateApp .tripti-hero::before, #recodateApp .tripti-hero::after, #recodateApp .home-tripti-card::after { content: none !important; }
#recodateApp .home-hero h1 { font-size: 26px !important; line-height: 1.35 !important; margin: 0 0 6px !important; }
#recodateApp .home-hero > p { font-size: 14px !important; color: var(--muted) !important; margin: 0 0 20px !important; }
#recodateApp .home-cta-row { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px !important; margin: 0 0 24px !important; }
#recodateApp .home-cta-row > button { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 8px; min-width: 0; width: 100% !important; min-height: 44px !important; padding: 10px !important; border-radius: 6px !important; font-size: 15px !important; }
#recodateApp .nearby-cta { background: #fff !important; color: var(--text) !important; border: 1px solid #bcbcc3 !important; box-shadow: none !important; }
#recodateApp .nearby-cta-icon { display: inline-flex !important; position: static !important; width: 19px !important; height: 19px !important; padding: 0 !important; margin: 0 !important; background: none !important; }
#recodateApp .nearby-cta-icon { color: var(--text) !important; box-shadow: none !important; }
#recodateApp .nearby-cta-icon svg { width: 100%; height: 100%; color: var(--text) !important; }
#recodateApp .nearby-cta-title { font-size: 15px !important; }
#recodateApp .home-banners { margin: 0 -20px 12px; }
#recodateApp .home-banner-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
#recodateApp .home-banner-track::-webkit-scrollbar { display: none; }
#recodateApp .home-banner { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; text-decoration: none; color: var(--text); }
#recodateApp .home-banner img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
#recodateApp .home-banner-copy { padding: 16px 20px 8px; }
#recodateApp .home-banner-copy small { display: block; color: var(--primary-dark); font-weight: 650; font-size: 10px; margin-bottom: 5px; }
#recodateApp .home-banner-copy h2 { font-size: 19px !important; margin: 0 0 4px !important; }
#recodateApp .home-banner-copy p { font-size: 13px; margin: 0; color: var(--muted); }
#recodateApp .home-banner.image-unavailable .home-banner-copy { min-height: 170px; display: flex; flex-direction: column; justify-content: center; background: var(--surface-soft); }
#recodateApp .home-banner-controls { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 8px; font-size: 11px; color: var(--muted); }
#recodateApp .home-banner-dots { display: flex; }
#recodateApp .home-banner-dots button { position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; }
#recodateApp .home-banner-dots button::before { content: ""; position: absolute; left: 11px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: #d4d4d8; }
#recodateApp .home-banner-dots button[aria-current=true]::before { background: var(--primary); }
#recodateApp .home-map-explore-card { display: block !important; margin: 0 0 24px !important; padding: 0 !important; border: 0 !important; border-block: 1px solid var(--line) !important; background: #fff !important; border-radius: 0 !important; box-shadow: none !important; }
#recodateApp .map-explore-open-button { display: flex !important; align-items: center; gap: 12px; width: 100%; padding: 16px 0 !important; background: none !important; border: 0 !important; color: var(--text) !important; font-size: 16px; }
#recodateApp .map-explore-open-button > :last-child { margin-left: auto; }
#recodateApp .home-section { padding: 0 !important; margin: 0 0 28px !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
#recodateApp .home-section-heading { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px !important; }
#recodateApp .home-section-heading h2 { font-size: 17px !important; margin: 0 !important; }
#recodateApp .region-picker-trigger { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; border: 0; background: #fff; min-height: 40px; padding: 4px 0; font-size: 12px; }
#recodateApp .region-picker-trigger .rd-icon { width: 16px; height: 16px; flex-basis: 16px; }
#recodateApp .region-grid { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 10px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
#recodateApp .region-button { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100% !important; min-width: 0 !important; min-height: 78px !important; padding: 10px 4px !important; border: 1px solid #d3d3d8 !important; border-radius: 6px !important; background: #fff !important; color: var(--text) !important; text-align: center !important; }
#recodateApp .region-button span { font-size: 14px !important; font-weight: 500; }
#recodateApp .region-button .rd-icon { width: 27px; height: 27px; flex-basis: 27px; }
#recodateApp .region-button.selected { border-color: var(--primary) !important; color: var(--primary-dark) !important; background: var(--primary-soft) !important; }
#recodateApp .all-regions-button { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 42px; padding: 10px 0; border: 0; background: #fff; font-size: 12px; color: var(--muted); }
#recodateApp .category-grid { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 8px !important; }
#recodateApp .category-button { min-width: 0 !important; min-height: 44px !important; padding: 10px 6px !important; border: 1px solid var(--line) !important; background: #fff !important; border-radius: 6px !important; text-align: center !important; }
#recodateApp .category-button b, #recodateApp .category-button small { display: none !important; }
#recodateApp .category-button span { display: block; font-size: 13px !important; line-height: 1.4; }
#recodateApp .home-tripti-card { display: flex !important; align-items: center; flex-wrap: wrap; gap: 16px; padding: 20px 0 !important; margin: 0 0 24px !important; background: #fff !important; border: 0 !important; border-block: 1px solid var(--line) !important; border-radius: 0 !important; }
#recodateApp .home-tripti-card > div { flex: 1 1 210px; }
#recodateApp .home-tripti-card h2 { font-size: 18px !important; margin: 0 0 6px; }
#recodateApp .home-tripti-card p:not(.home-kicker) { font-size: 13px !important; color: var(--muted); margin: 0; }
#recodateApp .tripti-home-button { font-size: 13px !important; min-height: 40px; }

/* Lists: explicit, non-overlapping rank / image / text tracks. */
#recodateApp .browse-place-grid { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 0 !important; }
#recodateApp .browse-category-tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin: 0 0 4px; gap: 18px; }
#recodateApp .browse-category-tabs button { flex: 0 0 auto; min-height: 44px; padding: 10px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); background: #fff; font-size: 13px; }
#recodateApp .browse-category-tabs button.active { border-bottom-color: var(--primary); color: var(--primary-dark); }
#recodateApp .browse-place-card { display: block !important; width: 100% !important; min-width: 0 !important; padding: 18px 0 !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; background: #fff !important; border-radius: 0 !important; overflow: visible !important; box-shadow: none !important; }
#recodateApp .browse-place-card::before, #recodateApp .browse-place-card::after { content: none !important; }
#recodateApp .browse-place-main { display: grid !important; grid-template-columns: 22px 72px minmax(0,1fr) !important; grid-template-areas: "rank media copy" "rank media actions" !important; align-items: start !important; gap: 6px 12px !important; width: 100% !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; }
#recodateApp .browse-place-rank { grid-area: rank; position: static !important; inset: auto !important; display: block !important; min-width: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--primary) !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.6 !important; transform: none !important; }
#recodateApp .browse-place-media { grid-area: media; position: static !important; display: block !important; width: 72px !important; max-width: 72px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; }
#recodateApp .browse-place-photo-frame { position: relative !important; inset: auto !important; display: block !important; width: 72px !important; height: 72px !important; min-height: 0 !important; aspect-ratio: 1; border: 0 !important; border-radius: 4px !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; background: #f3f3f4 !important; transform: none !important; }
#recodateApp .browse-place-photo-frame img { width: 100% !important; height: 100% !important; object-fit: cover !important; position: static !important; margin: 0 !important; border-radius: 4px !important; }
#recodateApp .browse-place-content { grid-area: copy; position: static !important; min-width: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
#recodateApp .browse-place-content h3 { display: block !important; width: auto !important; max-width: none !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; -webkit-line-clamp: unset !important; margin: 0 0 4px !important; font-size: 17px !important; line-height: 1.45 !important; word-break: keep-all !important; overflow-wrap: anywhere !important; }
#recodateApp .browse-place-content > p { margin: 0 0 6px !important; font-size: 12px !important; color: var(--muted) !important; white-space: normal !important; overflow-wrap: anywhere; }
#recodateApp .browse-place-badges { display: flex !important; flex-wrap: wrap !important; gap: 4px 8px !important; margin: 0 !important; width: auto !important; }
#recodateApp .browse-place-badges > *, #recodateApp .browse-place-badges :is(.google-review-badge,.review-count-badge) { position: static !important; display: inline !important; width: auto !important; max-width: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 11px !important; line-height: 1.6 !important; white-space: normal !important; }
#recodateApp .browse-place-actions { grid-area: actions; display: flex !important; position: static !important; inset: auto !important; gap: 4px !important; align-items: center !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
#recodateApp .browse-place-actions :is(button,a) { display: inline-flex !important; align-items: center; justify-content: center; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 7px !important; border: 0 !important; background: #fff !important; color: var(--text) !important; border-radius: 4px !important; }
#recodateApp .browse-place-actions .selected { color: var(--primary) !important; }
#recodateApp :is(.browse-photo-credit,.browse-place-photo-credit,.place-photo-credit) { display: block; font-size: 9px !important; line-height: 1.4 !important; white-space: normal !important; overflow-wrap: anywhere; color: #808086 !important; }
#recodateApp :is(.browse-loading,.browse-empty-state,.community-empty-state) { background: #fafafa !important; border: 1px solid var(--line) !important; border-radius: 6px !important; color: var(--muted) !important; padding: 26px 18px !important; font-size: 14px !important; line-height: 1.7 !important; }
#recodateApp .browse-recodate-button { margin-top: 12px !important; width: auto !important; max-width: 100%; }

/* Recommendation form and itinerary. */
#recodateApp .layout { display: block !important; padding: 0 !important; }
#recodateApp .panel { background: #fff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
#recodateApp .section-title { padding: 0 !important; margin: 0 0 20px !important; }
#recodateApp .section-title h2 { font-size: 18px !important; margin-bottom: 6px !important; }
#recodateApp .section-title p { color: var(--muted); font-size: 13px !important; line-height: 1.6; }
#recodateApp .controls-panel .section-title h2 { display: none; }
#recodateApp .form { gap: 20px !important; }
#recodateApp .field { display: grid; min-width: 0; gap: 8px !important; }
#recodateApp .field > span { font-size: 14px !important; font-weight: 650 !important; }
#recodateApp .optional-label { color: var(--muted) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.6 !important; }
#recodateApp .search-row { display: grid !important; grid-template-columns: minmax(0,1fr) 64px !important; gap: 8px !important; }
#recodateApp .search-row button { border: 1px solid var(--line) !important; border-radius: 6px !important; background: #fff !important; color: var(--text) !important; font-size: 14px !important; min-width: 0 !important; padding: 10px 8px !important; }
#recodateApp .check-row { display: flex !important; align-items: flex-start !important; gap: 10px !important; min-height: 42px; padding: 10px 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
#recodateApp .check-row > span { min-width: 0; font-size: 14px !important; font-weight: 500 !important; line-height: 1.55 !important; }
#recodateApp .check-row .optional-label { display: block; margin-top: 3px; }
#recodateApp .segmented { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 8px !important; padding: 0 !important; background: none !important; border: 0 !important; }
#recodateApp .segmented label { position: relative; min-width: 0; }
#recodateApp .segmented input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; min-width: 0 !important; }
#recodateApp .segmented label > span { display: flex !important; align-items: center; justify-content: center; min-height: 46px; padding: 10px 6px !important; background: #fff !important; border: 1px solid #ccc !important; border-radius: 6px !important; color: var(--text) !important; font-size: 14px !important; text-align: center !important; }
#recodateApp .segmented input:checked + span { color: var(--primary-dark) !important; border-color: var(--primary) !important; background: var(--primary-soft) !important; }
#recodateApp .segmented input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 3px; }
#recodateApp .meal-options { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px 12px !important; border-block: 1px solid var(--line); padding: 14px 0; }
#recodateApp .detail-options { gap: 22px !important; padding: 20px 0 0 !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; background: #fff !important; }
#recodateApp :is(.selected-place,.place-result.selected,.start-place-empty,.selected-start-place) { background: var(--primary-soft) !important; border: 0 !important; border-radius: 6px !important; padding: 14px !important; }
#recodateApp .course-list { padding: 0 !important; }
#recodateApp .course-card { display: flex !important; flex-direction: column; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; overflow: visible !important; box-shadow: none !important; }
#recodateApp body:is([data-recommendation-step=results],[data-recommendation-step=flow]) #recommendationView > .topbar { display: none !important; }
#recodateApp .course-photo-strip { position: static !important; display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 6px !important; width: 100% !important; margin: 0 0 20px !important; padding: 0 !important; background: none !important; border-radius: 0 !important; }
#recodateApp .course-photo-slot { position: relative; min-width: 0; aspect-ratio: 1; height: auto !important; min-height: 0 !important; border-radius: 5px !important; background: #f1f1f3 !important; overflow: hidden; }
#recodateApp .course-photo-slot img { width: 100%; height: 100%; object-fit: cover; }
#recodateApp .course-photo-slot > span { position: absolute !important; inset: auto 4px 18px !important; padding: 3px 5px !important; font-size: 10px !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; text-align: left; max-height: 34px; background: #0008 !important; color: #fff !important; border-radius: 3px !important; }
#recodateApp .course-photo-strip { grid-template-rows: auto !important; }
#recodateApp .course-card-body { min-width: 0; padding: 0 !important; }
#recodateApp .course-card-body > h3 { font-size: 20px !important; margin: 0 0 10px !important; }
#recodateApp .course-meta { display: flex !important; flex-wrap: wrap !important; gap: 6px 10px !important; margin: 0 0 20px !important; }
#recodateApp .course-meta span { flex: 0 1 auto !important; width: auto !important; max-width: 100%; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; background: #f5f5f6 !important; border-radius: 4px !important; padding: 4px 7px !important; font-size: 12px !important; font-weight: 500 !important; color: #55555d !important; }
#recodateApp .course-meta span:last-child { color: var(--primary-dark) !important; background: var(--primary-soft) !important; }
#recodateApp .place-chain { display: grid !important; gap: 0 !important; padding: 0 !important; margin: 0 0 20px !important; list-style: none !important; }
#recodateApp .place-chain > li { position: relative !important; display: grid !important; grid-template-columns: 24px minmax(0,1fr) 36px !important; align-items: start !important; gap: 10px !important; min-height: 60px !important; padding: 14px 0 !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: #fff !important; overflow: visible !important; }
#recodateApp .place-chain > li::before, #recodateApp .place-chain > li::after { content: none !important; }
#recodateApp .course-stop-number { display: flex; grid-column: 1 !important; grid-row: 1 !important; align-items: center; justify-content: center; width: 23px; height: 23px; margin-top: 2px; background: var(--primary-soft); border-radius: 50%; color: var(--primary-dark); font-size: 12px; }
#recodateApp .course-stop-copy { grid-column: 2 !important; grid-row: 1 !important; }
#recodateApp .place-mobile-menu-button { grid-column: 3 !important; grid-row: 1 !important; }
#recodateApp .mobile-actions-open .place-edit-buttons { grid-row: 2 !important; }
#recodateApp .course-stop-copy { min-width: 0 !important; display: block !important; padding: 0 !important; margin: 0 !important; font-size: 15px !important; line-height: 1.55 !important; white-space: normal !important; overflow-wrap: anywhere; }
#recodateApp .course-stop-copy > b { display: block; font-weight: 650; }
#recodateApp .course-stop-copy small { display: inline; font-size: 11px !important; color: var(--muted); }
#recodateApp .course-stop-copy :is(.google-review-badge,.opening-status-badge) { font-size: 10px !important; white-space: normal !important; padding: 2px 4px !important; }
#recodateApp .place-mobile-menu-button { position: static !important; display: flex !important; align-items: center; justify-content: center; width: 36px !important; min-width: 36px !important; height: 36px !important; padding: 6px !important; border: 0 !important; background: #fff !important; border-radius: 4px !important; }
#recodateApp .place-edit-buttons { display: none !important; }
#recodateApp .mobile-actions-open .place-edit-buttons { display: flex !important; grid-column: 2 / -1; position: static !important; inset: auto !important; width: auto !important; min-width: 0 !important; padding: 0 !important; gap: 8px !important; background: none !important; border: 0 !important; box-shadow: none !important; }
#recodateApp .place-edit-buttons button { flex: 1; min-height: 40px !important; background: #fff !important; border: 1px solid var(--line) !important; border-radius: 5px !important; color: var(--text) !important; padding: 8px !important; font-size: 13px !important; }
#recodateApp .place-chain .drag-handle { position: absolute; left: -17px; top: 18px; width: 14px; font-size: 15px; color: var(--muted); }
#recodateApp .course-edit-actions { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; margin-top: 18px; }
#recodateApp .course-edit-actions > button { width: 100% !important; min-width: 0; min-height: 44px !important; font-size: 12px !important; padding: 10px 6px !important; }
#recodateApp .course-edit-actions > button:first-child { grid-column: 1 / -1; }
#recodateApp .course-carousel-controls { display: flex !important; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 20px !important; }
#recodateApp .course-carousel-controls > span { font-size: 15px !important; font-weight: 650; }
#recodateApp .course-carousel-controls small { font-size: 11px !important; font-weight: 400 !important; color: var(--muted); }
#recodateApp :is(.course-add-editor,.course-replacement-editor) { background: #fafafa !important; border: 1px solid var(--line) !important; border-radius: 6px !important; padding: 14px !important; }

/* Overlays and place detail retain their original controls and scroll containers. */
#recodateApp .modal-backdrop { background: rgba(0,0,0,.28) !important; backdrop-filter: none !important; }
#recodateApp .modal-backdrop > section { background: #fff !important; color: var(--text) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; box-shadow: 0 10px 48px #0002 !important; }
#recodateApp :is(.quick-condition-card,.community-share-card,.auth-card,.avatar-crop-card,.profile-account-card,.liked-posts-card,.notif-card,.report-card,.policy-card) { padding: 24px !important; }
#recodateApp :is(.modal-close-button,.browse-detail-close-button,.quick-condition-close,.chat-close-button) { width: 36px !important; height: 36px !important; border: 0 !important; border-radius: 4px !important; background: #fff !important; color: var(--text) !important; box-shadow: none !important; }
#recodateApp .browse-detail-card { padding: 0 !important; max-width: 640px !important; overflow: hidden !important; gap: 0 !important; }
#recodateApp .browse-detail-header { flex-shrink: 0; padding: 16px 20px !important; margin: 0 !important; border-bottom: 1px solid var(--line); background: #fff !important; align-items: flex-start; }
#recodateApp .browse-detail-header > div { min-width: 0; flex: 1; }
#recodateApp .browse-detail-header h2 { font-size: 22px !important; margin: 4px 0 !important; overflow-wrap: anywhere; }
#recodateApp .browse-detail-header p { margin: 0 !important; font-size: 12px !important; line-height: 1.5; }
#recodateApp .browse-detail-header .modal-close-button { flex-shrink: 0; }
#recodateApp #browsePlaceDetailBody { display: block !important; padding: 0 20px 20px !important; overflow-x: hidden; }
#recodateApp .browse-detail-visuals { display: flex !important; flex-direction: column-reverse; gap: 16px !important; margin: 0 -20px 20px !important; }
#recodateApp .browse-detail-photo { display: block !important; width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; min-height: 0 !important; aspect-ratio: auto !important; border: 0 !important; border-radius: 0 !important; }
#recodateApp .browse-detail-photo-gallery { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory; gap: 4px !important; }
#recodateApp .browse-detail-photo-item { flex: 0 0 88%; min-width: 0; margin: 0 !important; border-radius: 0 !important; scroll-snap-align: start; }
#recodateApp .browse-detail-photo-gallery.count-1 .browse-detail-photo-item { flex-basis: 100%; }
#recodateApp .browse-detail-photo-item img { width: 100% !important; height: auto !important; aspect-ratio: 4/3; object-fit: cover; border-radius: 0 !important; }
#recodateApp .browse-detail-photo-item figcaption { padding: 4px 12px; font-size: 10px !important; }
#recodateApp .browse-detail-map { width: auto !important; max-width: none !important; aspect-ratio: auto !important; height: 140px !important; min-height: 140px !important; margin: 0 20px !important; border: 1px solid var(--line) !important; border-radius: 6px !important; }
#recodateApp .browse-detail-map-unavailable { display: grid; place-content: center; height: 100%; margin: 0; padding: 20px; color: var(--muted); font-size: 13px; line-height: 1.6; text-align: center; }
#recodateApp .browse-detail-info { border-block: 1px solid var(--line); background: #fff !important; border-radius: 0 !important; padding: 12px 0 !important; }
#recodateApp .browse-detail-info-row { display: grid !important; grid-template-columns: 66px minmax(0,1fr); gap: 12px; font-size: 13px !important; line-height: 1.6; padding: 7px 0; }
#recodateApp .browse-detail-info-row > * { min-width: 0; overflow-wrap: anywhere; }
#recodateApp :is(.browse-detail-hours,.place-review-panel) { padding: 18px 0 !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; background: #fff !important; }
#recodateApp .browse-detail-description { font-size: 13px !important; color: var(--muted); }
#recodateApp .browse-detail-actions { position: sticky !important; bottom: 0 !important; display: grid !important; grid-template-columns: 42px minmax(0,1fr) minmax(0,1.5fr) !important; gap: 8px !important; padding: 12px 0 !important; margin: 0 !important; background: #fff !important; border-top: 1px solid var(--line) !important; z-index: 4; }
#recodateApp .browse-detail-actions > * { width: 100% !important; min-width: 0 !important; min-height: 44px !important; height: auto !important; padding: 8px 4px !important; border-radius: 6px !important; font-size: 12px !important; white-space: normal !important; line-height: 1.4 !important; text-align: center; display: flex; align-items: center; justify-content: center; }
#recodateApp .browse-detail-search-button { border: 1px solid var(--line) !important; background: #fff !important; color: var(--text) !important; }
#recodateApp .place-review-stars { display: inline-flex !important; gap: 2px !important; padding: 6px 10px !important; background: var(--surface-soft) !important; border: 1px solid var(--line) !important; border-radius: 6px !important; }
#recodateApp .place-review-stars button { width: 36px !important; height: 40px !important; min-width: 0 !important; border: 0 !important; background: none !important; padding: 0 !important; color: var(--primary) !important; font-size: 28px !important; }
#recodateApp .place-review-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Map stays interactive, with a compact draggable sheet below the title. */
#recodateApp #mapExploreView:not([hidden]) { display: flex !important; flex-direction: column; height: calc(100dvh - 68px - var(--nav-height) - 1px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding-bottom: 0 !important; }
#recodateApp #mapExploreView > :not(.map-explore-stage) { flex-shrink: 0; }
#recodateApp .map-explore-title { margin: 0 0 14px !important; }
#recodateApp .map-explore-title h1 { font-size: 22px !important; margin: 0 !important; }
#recodateApp .map-explore-stage { position: relative !important; flex: 1; height: auto !important; min-height: 240px !important; margin: 0 -20px !important; border: 0 !important; border-radius: 0 !important; overflow: hidden; }
#recodateApp .map-explore-map-shell, #recodateApp .map-explore-map { width: 100% !important; height: 100% !important; border-radius: 0 !important; }
#recodateApp .map-explore-live-map { width: 100% !important; height: 100% !important; border-radius: 0 !important; }
#recodateApp .map-explore-live-map .leaflet-bottom.leaflet-right { top: 0; bottom: auto; }
#recodateApp .map-explore-live-map .leaflet-control-attribution { margin-top: 4px; }
#recodateApp .map-explore-legend { display: none !important; }
#recodateApp .map-explore-sheet-summary-btn { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px; padding: 12px 18px !important; min-height: 56px !important; background: #fff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--text) !important; }
#recodateApp .map-explore-sheet-summary-btn strong { font-size: 17px !important; color: var(--text) !important; }
#recodateApp .map-filter-icons { display: flex; align-items: center; gap: 16px; }
#recodateApp .map-explore-sheet { max-height: 90% !important; padding: 0 !important; background: #fff !important; border-radius: 18px 18px 0 0 !important; border: 1px solid var(--line) !important; box-shadow: 0 -3px 16px #0001 !important; }
#recodateApp .map-explore-sheet[data-state=collapsed] { height: 88px !important; overflow: hidden !important; transform: none !important; }
#recodateApp .map-explore-sheet[data-state=collapsed] :is(.map-explore-panel,.map-explore-results) { visibility: hidden; }
#recodateApp .map-explore-sheet-handle { height: 30px !important; min-height: 30px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; }
#recodateApp .map-explore-form { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 8px; }
#recodateApp .map-explore-results { padding: 0 12px 16px; }
#recodateApp .map-explore-sheet-grip { background: #fff !important; color: var(--text) !important; border: 0 !important; }
#recodateApp .map-explore-panel { background: #fff !important; border: 0 !important; border-radius: 0 !important; padding: 12px !important; }
#recodateApp .map-explore-filters { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 8px !important; }
#recodateApp .map-explore-filters label { grid-column: auto !important; display: flex !important; gap: 6px !important; align-items: center !important; padding: 9px 5px !important; min-width: 0 !important; background: #fff !important; border: 1px solid var(--line) !important; border-radius: 5px !important; font-size: 11px !important; }
#recodateApp .map-explore-filters input { width: 16px !important; height: 16px !important; min-width: 16px !important; flex-basis: 16px !important; }
#recodateApp .map-explore-status { font-size: 12px !important; }
#recodateApp .map-explore-place-card { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 6px !important; padding: 12px !important; }
#recodateApp .map-title-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#recodateApp .route-detail-scroll { border-radius: 18px 18px 0 0 !important; background: #fff !important; border: 1px solid var(--line) !important; box-shadow: 0 -3px 16px #0001 !important; }
#recodateApp .route-detail-scroll.sheet-overlay { width: auto !important; max-width: none !important; }
#recodateApp .route-detail-content { padding: 16px !important; }
#recodateApp :is(.route-summary-card,.route-navigation-card,.route-leg-card) { border-radius: 6px !important; box-shadow: none !important; background: #fff !important; }

/* Community, conversations and saved content. */
#recodateApp :is(.community-seg,.follow-subtabs,.chat-hub-segments) { display: flex !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; padding: 0 !important; gap: 0 !important; box-shadow: none !important; }
#recodateApp :is(.community-seg-btn,.follow-subtab,.chat-hub-seg) { flex: 1; min-height: 44px; background: #fff !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; color: var(--muted) !important; font-size: 14px !important; }
#recodateApp :is(.community-seg-btn,.follow-subtab,.chat-hub-seg).active { color: var(--text) !important; border-bottom-color: var(--primary) !important; font-weight: 650 !important; }
#recodateApp .community-filters { margin: 12px 0 !important; gap: 10px !important; }
#recodateApp .community-filter { border: 0 !important; background: #fff !important; padding: 8px 10px !important; font-size: 12px !important; border-radius: 4px !important; }
#recodateApp .community-filter.active { background: var(--primary-soft) !important; color: var(--primary-dark) !important; }
#recodateApp .community-compose-button { width: 100%; margin: 14px 0 !important; }
#recodateApp .community-post-card { background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; padding: 18px 0 !important; margin: 0 !important; box-shadow: none !important; }
#recodateApp .threads-post { display: grid !important; grid-template-columns: 36px minmax(0,1fr) !important; gap: 10px !important; }
#recodateApp .threads-body { min-width: 0; }
#recodateApp .threads-top { display: flex; flex-wrap: wrap; min-width: 0; gap: 6px !important; }
#recodateApp .threads-nick { font-size: 14px !important; overflow-wrap: anywhere; }
#recodateApp .threads-time, #recodateApp .threads-meta { font-size: 11px !important; color: var(--muted) !important; }
#recodateApp .community-post-comment { font-size: 14px !important; line-height: 1.65 !important; overflow-wrap: anywhere; }
#recodateApp .community-post-title { font-size: 16px !important; }
#recodateApp .community-post-images { border-radius: 4px !important; margin: 12px 0 !important; }
#recodateApp .community-post-images img { border-radius: 4px !important; max-height: 380px; object-fit: cover; }
#recodateApp .threads-actions { display: flex; gap: 18px !important; padding: 6px 0 !important; }
#recodateApp .threads-actions button { min-height: 36px; background: #fff !important; border: 0 !important; padding: 4px 0 !important; }
#recodateApp .community-avatar { background: #f1f1f3 !important; color: #555 !important; border: 1px solid #ececef; border-radius: 50% !important; overflow: hidden; }
#recodateApp :is(.friend-item,.friend-card,.community-friend-item,.chat-list-item) { background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; padding: 14px 0 !important; box-shadow: none !important; }
#recodateApp .chat-card { padding: 0 !important; background: #fff !important; }
#recodateApp .chat-head { background: #fff !important; border-bottom: 1px solid var(--line) !important; padding: 16px !important; }
#recodateApp .chat-messages { background: #fff !important; padding: 16px !important; }
#recodateApp .chat-bubble { background: #f2f2f4 !important; border: 0 !important; border-radius: 8px !important; color: var(--text) !important; font-size: 14px !important; line-height: 1.6 !important; padding: 10px 13px !important; overflow-wrap: anywhere; box-shadow: none !important; }
#recodateApp .mine .chat-bubble { background: var(--primary-soft) !important; }
#recodateApp .chat-input-row { background: #fff !important; border-top: 1px solid var(--line) !important; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important; gap: 6px !important; }
#recodateApp .chat-input-row input { min-height: 42px !important; border-radius: 6px !important; }
#recodateApp .chat-input-row button { min-width: 36px !important; padding: 6px !important; border-radius: 5px !important; }
#recodateApp .comments-sheet-backdrop { background: rgba(0,0,0,.22) !important; }
#recodateApp .comments-sheet { background: #fff !important; border-radius: 18px 18px 0 0 !important; color: var(--text) !important; }
#recodateApp .comments-sheet-head { padding: 12px 18px !important; border-bottom: 1px solid var(--line) !important; }
#recodateApp .comments-sheet-list { padding: 12px 18px !important; }
#recodateApp .comments-sheet-form { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important; border-top: 1px solid var(--line) !important; background: #fff !important; }
#recodateApp .comments-sheet-form input { border-radius: 6px !important; }
#recodateApp .saved-course-card { display: block !important; background: #fff !important; border: 1px solid var(--line) !important; border-radius: 6px !important; padding: 16px !important; margin: 0 0 14px !important; }
#recodateApp .saved-course-card h3 { margin: 0 0 8px; }
#recodateApp .saved-course-actions { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
#recodateApp .saved-course-actions button { min-width: 0 !important; min-height: 40px; font-size: 12px !important; border-radius: 5px !important; padding: 8px !important; }
#recodateApp #savedBookmarkList { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 14px !important; }
#recodateApp .saved-bookmark-card { position: relative; min-width: 0; background: #fff !important; padding: 0 0 14px !important; border: 1px solid var(--line) !important; border-radius: 6px !important; overflow: hidden; }
#recodateApp .saved-bookmark-card > :not(.saved-bookmark-photo) { margin-left: 10px !important; margin-right: 10px !important; }
#recodateApp .saved-bookmark-card h3 { margin-block: 12px 5px; font-size: 15px !important; }
#recodateApp .saved-bookmark-card p { font-size: 12px !important; color: var(--muted); }
#recodateApp .saved-bookmark-photo { display: block; width: 100%; border: 0; background: #f3f3f4; padding: 0; }
#recodateApp .saved-bookmark-photo .browse-place-photo-frame { width: 100% !important; height: auto !important; aspect-ratio: 1; border-radius: 0 !important; }
#recodateApp .saved-bookmark-select { position: static !important; display: flex; gap: 6px; align-items: center; margin-block: 10px !important; font-size: 11px !important; }
#recodateApp .saved-bookmark-remove { position: absolute !important; right: 0 !important; top: 5px !important; border: 0 !important; background: #fffffff2 !important; border-radius: 4px !important; padding: 6px !important; }

/* Profile and authentication. */
#recodateApp .profile-card { padding: 0 !important; border: 0 !important; background: #fff !important; border-radius: 0 !important; box-shadow: none !important; }
#recodateApp .profile-hero-row { display: flex !important; gap: 20px !important; align-items: center; padding: 4px 0 24px; }
#recodateApp .profile-title-block { flex: 1; min-width: 0; }
#recodateApp .profile-avatar-button { flex: 0 0 88px !important; width: 88px !important; height: 88px !important; border: 1px solid var(--line) !important; border-radius: 50% !important; background: #f4f4f5 !important; }
#recodateApp .profile-avatar-button img { border-radius: 50% !important; }
#recodateApp #profileView > .browse-heading, #recodateApp .profile-title-block > .home-kicker { display: none !important; }
#recodateApp .profile-edit-message:empty { display: none; }
#recodateApp .profile-main-stats { margin: 0 !important; }
#recodateApp .profile-stat b { font-size: 21px !important; color: var(--text) !important; }
#recodateApp .profile-stat small { font-size: 12px !important; color: var(--muted) !important; }
#recodateApp .profile-stat { min-height: 0 !important; }
#recodateApp .profile-nickname-view { display: flex; align-items: center; gap: 8px; }
#recodateApp .profile-nickname-view h2 { min-width: 0; overflow-wrap: anywhere; font-size: 22px !important; margin: 0; }
#recodateApp .profile-pencil-button { flex-shrink: 0; background: #fff !important; border: 0 !important; }
#recodateApp .profile-community-stats { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 0 !important; padding: 16px 0 !important; border-block: 1px solid var(--line); }
#recodateApp .profile-community-stats > * { min-width: 0; padding: 4px !important; background: #fff !important; border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important; text-align: center; }
#recodateApp .profile-community-stats > :last-child { border-right: 0 !important; }
#recodateApp .profile-community-stats strong { font-size: 21px !important; color: var(--text) !important; }
#recodateApp .profile-community-stats span { font-size: 11px !important; }
#recodateApp .profile-quick-actions { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
#recodateApp .profile-liked-feed-button { background: #fff !important; color: var(--text) !important; border: 1px solid var(--line) !important; border-radius: 5px !important; padding: 10px !important; font-size: 13px !important; }
#recodateApp .profile-more-button { display: none !important; position: static !important; float: none; order: 3; margin: 0 !important; background: #fff !important; border: 0 !important; width: 40px !important; height: 40px !important; padding: 10px !important; }
#recodateApp body[data-portal-view=profile] .profile-more-button { display: flex !important; }
#recodateApp body[data-portal-view=profile] .home-profile-chip { display: none !important; }
#recodateApp .profile-nickname-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#recodateApp .profile-nickname-form input { grid-column: 1 / -1; }
#recodateApp .profile-account-list { display: grid !important; gap: 0 !important; }
#recodateApp .profile-account-card { align-content: start !important; gap: 16px !important; }
#recodateApp .profile-account-card > .home-kicker { padding-top: 24px; }
#recodateApp .profile-account-card h2 { margin: 0 !important; padding-right: 32px; }
#recodateApp .profile-account-logout-button { min-height: 46px; padding: 12px !important; border: 1px solid var(--line) !important; border-radius: 6px !important; background: #fff !important; color: var(--primary-dark) !important; }
#recodateApp .profile-account-list > div { display: grid !important; grid-template-columns: 64px minmax(0,1fr); gap: 12px; padding: 18px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; background: #fff !important; border-radius: 0 !important; }
#recodateApp .profile-account-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
#recodateApp .profile-community-section { margin-top: 24px !important; }
#recodateApp .profile-tripti-row { display: flex; gap: 12px; align-items: center; width: 100%; padding: 16px 0; background: #fff; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; text-align: left; }
#recodateApp .profile-tripti-row > span:first-child { flex: 0 0 auto; font-size: 12px; }
#recodateApp .profile-tripti-row strong { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
#recodateApp .profile-feed-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
#recodateApp .profile-feed-tabs button { flex: 1; padding: 12px 6px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: #fff; font-size: 12px; }
#recodateApp .profile-feed-tabs button[aria-pressed=true] { border-bottom-color: var(--primary); }
#recodateApp .profile-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; }
#recodateApp .profile-gallery .community-post-card { display: block !important; padding: 0 !important; border: 0 !important; aspect-ratio: 1; overflow: hidden !important; background: #f6f6f7 !important; position: relative; }
#recodateApp .profile-gallery .threads-body { height: 100%; }
#recodateApp .profile-gallery :is(.threads-avatar,.threads-top,.threads-meta,.threads-actions,.community-post-stops,.community-course-open-hint) { display: none !important; }
#recodateApp .profile-gallery .community-post-images { margin: 0 !important; display: block !important; height: 100%; border-radius: 0 !important; }
#recodateApp .profile-gallery .community-post-images img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0 !important; }
#recodateApp .profile-gallery .community-post-images img:not(:first-child) { display: none; }
#recodateApp .profile-gallery .community-post-card:has(.community-post-images) :is(.community-post-title,.community-post-comment) { display: none; }
#recodateApp .profile-gallery .community-post-card:not(:has(.community-post-images)) :is(.community-post-title,.community-post-comment) { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin: 12px !important; font-size: 12px !important; }
#recodateApp .profile-gallery > .browse-loading { grid-column: 1 / -1; }
#recodateApp .auth-card { width: min(100%,420px) !important; margin: 0 auto !important; padding: 24px 0 !important; background: #fff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
#recodateApp .auth-card::before, #recodateApp .auth-card::after { content: none !important; }
#recodateApp .auth-logo { display: flex !important; justify-content: flex-start !important; color: var(--primary) !important; font-size: 30px !important; margin: 20px 0 38px !important; font-family: inherit !important; }
#recodateApp .auth-form { display: grid !important; gap: 14px !important; }
#recodateApp .auth-card > p { font-size: 14px !important; color: var(--muted); }
#recodateApp .auth-links { justify-content: center; gap: 20px; }
#recodateApp .auth-links button { background: none !important; border: 0 !important; color: var(--muted) !important; font-size: 13px; }
#recodateApp .remember-login-option { display: flex; gap: 8px; align-items: center; font-size: 13px; }
#recodateApp .signup-agreements { background: #fff !important; border: 0 !important; border-radius: 0 !important; padding: 12px 0 !important; }
#recodateApp .signup-agreements label { align-items: start; gap: 8px; font-size: 12px !important; }
#recodateApp .password-visibility-button { background: none !important; border: 0 !important; padding: 6px !important; }

/* TripTI uses one question per screen; all answers remain in the form. */
#recodateApp .tripti-board, #recodateApp .tripti-result-card { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; }
#recodateApp .tripti-intro-photo { display: block; width: calc(100% + 40px); max-width: none; height: auto !important; margin: 20px -20px; aspect-ratio: 3/2; object-fit: cover; border-radius: 0 !important; }
#recodateApp #triptiView:has([data-tripti-question]:not([hidden])) .tripti-hero,
#recodateApp #triptiView:has(#triptiResultCard:not([hidden])) .tripti-hero { display: none; }
#recodateApp .tripti-intro-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin: 22px 0; }
#recodateApp .tripti-intro-steps > div { display: grid; justify-items: center; gap: 8px; padding: 6px; border-right: 1px solid var(--line); font-size: 12px; }
#recodateApp .tripti-intro-steps > :last-child { border: 0; }
#recodateApp .tripti-progress { padding: 0 !important; margin: 0 0 24px !important; border: 0 !important; background: none !important; border-radius: 0 !important; box-shadow: none !important; }
#recodateApp .tripti-progress > span { font-size: 13px !important; color: var(--primary); }
#recodateApp .tripti-progress > div { height: 3px !important; background: #eee !important; }
#recodateApp .tripti-progress b { background: var(--primary) !important; }
#recodateApp .tripti-question-card { display: grid; gap: 14px !important; padding: 0 !important; border: 0 !important; background: #fff !important; border-radius: 0 !important; margin: 0 !important; min-width: 0; }
#recodateApp .tripti-question-card legend { font-size: 22px !important; font-weight: 700; line-height: 1.6 !important; padding: 0 0 28px !important; margin: 0 !important; }
#recodateApp .tripti-question-card legend span { display: block !important; padding: 0 !important; margin: 0 0 12px !important; width: auto !important; height: auto !important; background: none !important; color: var(--primary) !important; font-size: 14px !important; }
#recodateApp .tripti-question-card label { display: grid !important; grid-template-columns: 20px 28px minmax(0,1fr) !important; align-items: center; gap: 12px; min-height: 92px !important; padding: 18px 14px !important; border: 1px solid #ccc !important; background: #fff !important; border-radius: 6px !important; }
#recodateApp .tripti-question-card label:has(input:checked) { border-color: var(--primary) !important; background: var(--primary-soft) !important; }
#recodateApp .tripti-question-card label b { width: 28px; height: 28px; padding: 0 !important; background: none !important; color: var(--text) !important; font-size: 17px !important; text-align: center; }
#recodateApp .tripti-question-card label span { font-size: 15px !important; line-height: 1.6 !important; overflow-wrap: anywhere; }
#recodateApp .tripti-actions { display: flex !important; justify-content: space-between; flex-wrap: wrap; gap: 10px !important; margin-top: 28px !important; }
#recodateApp .tripti-actions button { flex: 1 1 auto; }
#recodateApp .tripti-result-layout { display: block !important; }
#recodateApp .tripti-result-code { background: none !important; border: 0 !important; padding: 0 !important; color: var(--text) !important; font-size: 21px !important; margin-bottom: 8px; }
#recodateApp .tripti-result-name { font-size: 26px !important; margin-bottom: 18px !important; }
#recodateApp .tripti-keyword-chips { gap: 8px !important; }
#recodateApp .tripti-keyword-chips span { font-size: 12px !important; font-weight: 500; background: #f5f5f6 !important; color: #555 !important; border-radius: 4px !important; }
#recodateApp .tripti-result-desc { font-size: 14px !important; color: #555 !important; line-height: 1.75 !important; }
#recodateApp .tripti-result-photo { display: block; width: 100%; height: auto !important; aspect-ratio: 3/2; object-fit: cover; margin: 20px 0; border-radius: 0 !important; }
#recodateApp .tripti-axis-bar { border: 0 !important; padding: 14px 0 !important; background: none !important; border-radius: 0 !important; }
#recodateApp .tripti-axis-labels { font-size: 12px !important; }
#recodateApp .tripti-axis-labels :is(span,em,b) { color: var(--text) !important; }
#recodateApp .tripti-bar-track { height: 5px !important; }
#recodateApp .tripti-bar-left { background: var(--primary) !important; }
#recodateApp .tripti-bar-right { background: #e8e8eb !important; }
#recodateApp .tripti-course-suggestion { border: 0 !important; border-top: 1px solid var(--line) !important; background: #fff !important; border-radius: 0 !important; padding: 20px 0 !important; }

/* Nationwide region selection and smaller dialogs. */
#recodateApp .region-picker-card { padding: 0 !important; }
#recodateApp .region-picker-header { padding: 16px !important; background: #fff !important; border-bottom: 1px solid var(--line) !important; }
#recodateApp .region-picker-layout { grid-template-columns: 90px minmax(0,1fr) !important; }
#recodateApp .region-province-list { background: #fafafa !important; }
#recodateApp .region-province-list button { border: 0 !important; border-radius: 0 !important; background: none !important; font-size: 13px !important; padding: 14px 6px !important; min-height: 44px; }
#recodateApp .region-province-list button.selected { color: var(--primary-dark) !important; background: #fff !important; }
#recodateApp .region-district-panel { min-width: 0; padding: 12px !important; background: #fff !important; }
#recodateApp .region-district-list > button, #recodateApp .region-whole-button { width: 100%; min-width: 0; border: 1px solid var(--line) !important; border-radius: 5px !important; padding: 13px 10px !important; background: #fff !important; color: var(--text) !important; font-size: 14px !important; }
#recodateApp .region-district-list small { font-size: 11px !important; color: var(--muted); }
#recodateApp .region-district-list .selected { background: var(--primary-soft) !important; border-color: var(--primary) !important; }
#recodateApp :is(.community-share-actions,.profile-account-actions,.quick-condition-actions) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px !important; }
#recodateApp :is(.community-share-actions,.quick-condition-actions) > button { min-width: 0; }
#recodateApp :is(.notif-item,.blocked-user-item) { background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; padding: 14px 0 !important; }

@media (max-width: 600px) {
  #recodateApp { --page-width: 100%; }
  #recodateApp .modal-backdrop { padding: 16px !important; }
  #recodateApp .modal-backdrop > section { max-width: 100% !important; max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; }
  #recodateApp :is(#regionPickerModal,#browsePlaceDetailModal,#chatModal,#roomChatModal,#profileAccountModal,#likedPostsModal,#startPlaceModal,#userProfileModal) { padding: 0 !important; }
  #recodateApp :is(#regionPickerModal,#browsePlaceDetailModal,#chatModal,#roomChatModal,#profileAccountModal,#likedPostsModal,#startPlaceModal,#userProfileModal) > section { position: relative !important; inset: auto !important; transform: none !important; flex-shrink: 0; width: 100% !important; max-width: 100% !important; height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; padding-top: env(safe-area-inset-top) !important; padding-bottom: env(safe-area-inset-bottom) !important; }
  #recodateApp .browse-detail-card { display: flex !important; flex-direction: column; }
  #recodateApp #browsePlaceDetailBody { flex: 1; min-height: 0; overflow-y: auto !important; }
  #recodateApp .region-picker-card { display: flex !important; flex-direction: column; }
  #recodateApp .region-picker-layout { flex: 1; min-height: 0; }
  #recodateApp .start-place-modal-card { padding-inline: 20px !important; }
  #recodateApp .start-place-modal-layout { grid-template-columns: minmax(0,1fr) !important; }
  #recodateApp .start-place-map { min-height: 160px !important; height: 180px !important; }
  #recodateApp .chat-card { height: var(--chat-viewport-height,100dvh) !important; max-height: var(--chat-viewport-height,100dvh) !important; }
  #recodateApp .auth-card { padding-top: 20px !important; }
}
@media (max-width: 360px) {
  #recodateApp .portal-view { padding-inline: 16px !important; }
  #recodateApp .app-masthead { padding-inline: 16px; }
  #recodateApp .browse-place-main { grid-template-columns: 18px 60px minmax(0,1fr) !important; column-gap: 9px !important; }
  #recodateApp .browse-place-media, #recodateApp .browse-place-photo-frame { width: 60px !important; max-width: 60px !important; }
  #recodateApp .browse-place-photo-frame { height: 60px !important; }
  #recodateApp .home-section-heading { gap: 8px; }
  #recodateApp .home-section-heading h2 { font-size: 15px !important; }
  #recodateApp .home-banners, #recodateApp .map-explore-stage { margin-inline: -16px !important; }
  #recodateApp .tripti-intro-photo { width: calc(100% + 32px); margin-inline: -16px; }
  #recodateApp .region-grid { gap: 7px !important; }
}
@media (min-width: 900px) {
  #recodateApp .portal-view { padding-top: 20px !important; }
  #recodateApp .home-banner img { aspect-ratio: 2.1; }
  #recodateApp .home-hero h1 { font-size: 32px !important; }
  #recodateApp .browse-place-main { grid-template-columns: 32px 88px minmax(0,1fr) !important; column-gap: 18px !important; }
  #recodateApp .browse-place-media, #recodateApp .browse-place-photo-frame { width: 88px !important; max-width: 88px !important; }
  #recodateApp .browse-place-photo-frame { height: 88px !important; }
  #recodateApp .browse-place-content h3 { font-size: 19px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #recodateApp *, #recodateApp *::before, #recodateApp *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* === 브랜드 로고 (recodate-logo.png) ===
   헤더·로그인 화면 로고를 실제 브랜드 워드마크로 표시한다.
   부모 높이(%)에 기대면 flex 안에서 폭이 0이 되는 경우가 있어
   이미지 자체에 높이를 주고 폭은 비율로 자동 계산되게 한다. */
#recodateApp .brand-logo-img {
  display: block;
  width: auto;
  height: 26px;
  aspect-ratio: 1192 / 249;
  object-fit: contain;
}
#recodateApp :is(.editorial-brand, .portal-logo) {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0;
  line-height: 0;
  height: auto;
}
#recodateApp .auth-logo {
  display: flex !important;
  justify-content: flex-start !important;
  margin: 20px 0 38px !important;
  font-size: 0 !important;
  height: auto !important;
}
#recodateApp .auth-logo .brand-logo-img { height: 40px; }
@media (max-width: 380px) {
  #recodateApp .brand-logo-img { height: 23px; }
  #recodateApp .auth-logo .brand-logo-img { height: 34px; }
}

/* === 홈 버튼·TripTI 정리 =========================================
   기존 styles.css(구 디자인)에 .recodate-cta span / .tripti-home-button span
   같은 규칙이 남아 있고, 이 계층은 :where()라 특이도가 0이라 덮이지 않았다.
   그래서 '코스 추천'만 Jua 21px/900으로 튀고, TripTI 버튼 글자가 25px로
   커져 버튼을 넘치고 카드가 벌어졌다. 여기서 명시적으로 되돌린다. */

/* 홈 상단 두 버튼: 같은 글꼴·크기·두께 */
#recodateApp .home-cta-row > button,
#recodateApp .home-cta-row > button > span:not(.rd-icon),
#recodateApp .nearby-cta-title {
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
}
#recodateApp .home-cta-row .rd-icon { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; }
#recodateApp .nearby-cta-icon { width: 18px !important; height: 18px !important; }

/* TripTI 카드: 제목·설명 위아래로, 버튼은 그 아래 한 줄. 여백이 벌어지지 않게 고정 */
#recodateApp .home-tripti-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  align-items: start !important;
  justify-content: stretch !important;
  gap: 14px !important;
  padding: 20px 0 !important;
  margin: 0 0 24px !important;
}
#recodateApp .home-tripti-card > div { flex: none !important; width: 100% !important; }
#recodateApp .tripti-home-button {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  height: auto !important;
  padding: 11px 16px !important;
  gap: 8px !important;
  border-radius: 6px !important;
}
#recodateApp .tripti-home-button > span:not(.rd-icon) {
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  opacity: 1 !important;
  color: #fff !important;
}
#recodateApp .tripti-home-button .rd-icon { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; color: #fff !important; }

/* 넓은 화면에서는 제목과 버튼을 한 줄로 */
@media (min-width: 620px) {
  #recodateApp .home-tripti-card {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }
  #recodateApp .tripti-home-button { width: auto !important; min-width: 180px !important; }
}

/* === TripTI 결과 분석표 · 카테고리 패널 =========================
   분석표가 축마다 두 줄(라벨/퍼센트)로 늘어져 세로로 길고 허전했다.
   한 축을 '왼쪽라벨 %  …  % 오른쪽라벨' 한 줄로 모으고 간격을 좁힌다. */
#recodateApp .tripti-score-bars { gap: 4px !important; margin: 16px 0 !important; }
#recodateApp .tripti-axis-bar { padding: 9px 0 !important; }
#recodateApp .tripti-axis-labels {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin-bottom: 7px !important;
  font-size: 13px !important;
}
#recodateApp .tripti-axis-labels span { order: 1; font-weight: 700 !important; }
#recodateApp .tripti-axis-labels b:nth-of-type(1) { order: 2; margin-right: auto; }
#recodateApp .tripti-axis-labels b:nth-of-type(2) { order: 3; }
#recodateApp .tripti-axis-labels em { order: 4; font-weight: 700 !important; text-align: right !important; }
#recodateApp .tripti-axis-labels b {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  font-variant-numeric: tabular-nums;
}
/* 우세한 쪽을 분홍으로 강조해 한눈에 읽히게 */
#recodateApp .tripti-axis-bar.is-left .tripti-axis-labels span,
#recodateApp .tripti-axis-bar.is-left .tripti-axis-labels b:nth-of-type(1),
#recodateApp .tripti-axis-bar.is-right .tripti-axis-labels em,
#recodateApp .tripti-axis-bar.is-right .tripti-axis-labels b:nth-of-type(2) {
  color: var(--primary) !important;
}
#recodateApp .tripti-bar-track { height: 6px !important; border-radius: 999px !important; overflow: hidden; }
#recodateApp .tripti-result-photo { aspect-ratio: 16/9 !important; margin: 16px 0 !important; }

/* 카테고리 선택 패널: 닫기(X) 버튼 + 글자 가운데 정렬 */
#recodateApp .region-category-section .home-section-heading {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
#recodateApp .region-category-close {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--text) !important;
  cursor: pointer;
}
#recodateApp .region-category-close:hover { background: var(--surface-soft, #f6f6f8) !important; }
#recodateApp .region-category-close .rd-icon { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; }
#recodateApp .category-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
#recodateApp .category-button span { text-align: center !important; width: 100%; }

/* ===================================================================
   A-DESIGN v58 — 완성도 레이어 (구조 무변경, 색·깊이·리듬만)
   진단: editorial 레이어가 --shadow를 none으로 덮어 깊이가 전부 사라졌고,
        브랜드 핑크가 네 갈래(#e83f6f/#ff2f73/#ff2f7d/#f32965)로 갈라져 있었다.
   =================================================================== */

html#recodateApp {
  /* 1) 핑크 하나로. :root에 흩어져 있던 값들을 여기서 모은다(우선순위가 더 높다). */
  --primary: #f32965;
  --primary-dark: #d51d55;
  --primary-soft: #fff1f5;
  --rd-pink: #f32965;
  --rd-pink-2: #ff6f9d;
  --rd-pink-3: #fff1f5;
  --launch-pink: #f32965;
  --launch-pink-strong: #d51d55;
  --launch-pink-soft: #fff1f5;
  --launch-pink-line: #ffd3e2;

  /* 2) 깊이 복원. 회색이 아니라 브랜드가 섞인 그림자라 앱 톤과 자연스럽게 붙는다.
        styles.css의 var(--shadow) 사용처 21곳이 한 번에 살아난다. */
  --shadow: 0 2px 4px rgba(120, 60, 90, 0.06), 0 12px 28px rgba(120, 60, 90, 0.10);
  --shadow-soft: 0 1px 2px rgba(120, 60, 90, 0.05), 0 4px 12px rgba(120, 60, 90, 0.06);
  --rd-shadow: var(--shadow);

  /* 3) 바탕만 아주 살짝 내린다. 흰 카드가 저절로 떠오른다.
        시스템 다크모드는 따르지 않는다 — 항상 밝은 화면, 검은 글씨. */
  --bg: #faf7f9;
  background: #faf7f9 !important;
}
#recodateApp body { background: #faf7f9 !important; }

/* --- v58-2 : 바탕이 보이게 하고, '카드로 읽혀야 하는 것'에만 깊이를 준다 --------
   editorial 레이어는 button 전체에 box-shadow:none !important 를 걸어두었다.
   :where(button)은 특정도 0이라 .region-button 같은 클래스 선택자로 이길 수 있다.
   전부에 그림자를 주면 지저분해지므로, 눌러야 하는 것과 카드에만 준다. */

#recodateApp .portal-view { background: transparent !important; }

/* 도시·카테고리 카드 */
#recodateApp :is(.region-button, .category-button) {
  background: #fff !important;
  border: 1px solid #efe9ee !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-soft) !important;
}

/* 주요 행동 — 눌러보고 싶어야 한다 */
#recodateApp .recodate-cta {
  box-shadow: 0 1px 2px rgba(195, 20, 70, 0.22), 0 6px 16px rgba(243, 41, 101, 0.26) !important;
}
#recodateApp .nearby-cta {
  border: 1px solid #ead9e2 !important;
  box-shadow: var(--shadow-soft) !important;
}

/* 하단 탭바는 바탕 위에 떠 있어야 경계가 읽힌다 */
#recodateApp .portal-header {
  box-shadow: 0 -1px 0 var(--line), 0 -6px 20px rgba(120, 60, 90, 0.06) !important;
}

/* --- v58-3 : 바탕을 깐 뒤 드러난 것들 정리 ------------------------------------
   흰 페이지 위에서는 안 보이던 background:#fff 들이 이제 흰 덩어리로 보인다.
   진짜 카드가 아닌 것은 배경을 없애고, 카드인 것에만 표면과 깊이를 준다. */

/* 텍스트 버튼이어야 하는 것들 — 배경 없음 */
#recodateApp :is(.region-picker-trigger, .all-regions-button, .home-feed-more) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* "더 보기"는 앱 전체에서 한 가지 모양으로: 분홍 텍스트 + 화살표 */
#recodateApp :is(.all-regions-button, .home-feed-more) {
  color: var(--primary-dark) !important;
  font-weight: 600 !important;
  padding-inline: 0 !important;
}

/* TripTI는 진짜 카드다 */
#recodateApp .home-tripti-card {
  background: #fff !important;
  border: 1px solid #efe9ee !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-soft) !important;
  padding: 18px 16px !important;
}

/* 보조 버튼의 라벨은 먹색. 분홍은 주요 행동 하나에만 쓴다.
   (핑크 통일 과정에서 --launch-pink-strong 을 따라 분홍으로 딸려 들어갔다) */
#recodateApp .nearby-cta-title { color: var(--text) !important; }

/* --- v58-4 : 머리말과 빈 상태 ------------------------------------------------
   머리말은 전부 한국어로 통일했다(index.html). 이제 모양도 한 가지로 맞춘다.
   분홍은 '주요 행동'에만 쓰기로 했으므로 머리말은 조용한 회색으로 둔다. */

#recodateApp .home-kicker {
  margin: 0 0 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  /* editorial의 :where(*) letter-spacing:0 을 이기되, 한글이라 아주 조금만 벌린다 */
  letter-spacing: 0.02em !important;
}

/* 빈 상태: 회색 상자에 문장만 두면 다음에 뭘 해야 할지 알 수 없다.
   흰 표면 + 점선 테두리로 '아직 채워지지 않은 자리'라는 걸 형태로 알린다. */
#recodateApp :is(.browse-empty-state, .community-empty-state, .browse-loading) {
  background: #fff !important;
  border: 1px dashed #ead9e2 !important;
  border-radius: 14px !important;
  color: var(--muted) !important;
  padding: 28px 20px !important;
  text-align: center !important;
}

/* --- v58-5 : 커뮤니티 ---------------------------------------------------------
   글쓰기 진입이 '큰 빈 테두리 상자'라 입력칸처럼 보였고,
   필터(전체·친구)와 정렬(최신·인기)이 같은 칩이라 넷이 동시에 선택된 것처럼 읽혔다. */

/* 텍스트 버튼·탭은 배경 없음 */
#recodateApp :is(.back-home-button, .community-seg-btn) { background: transparent !important; }

/* 글쓰기: 프로필에 말 거는 바. 오른쪽 원형 ⊕ 로 '쓰는 곳'임을 형태로 알린다 */
#recodateApp .community-compose-button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 10px !important;
  padding: 9px 10px 9px 16px !important;
  border: 1px solid #efe9ee !important;
  border-radius: 999px !important;
  box-shadow: var(--shadow-soft) !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
}
#recodateApp .community-compose-button::after {
  content: "+";
  margin-left: auto;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
}

/* 필터와 정렬은 모양 자체를 다르게 — 구분선 없이도 역할이 읽힌다 */
#recodateApp .community-filters { display: flex !important; align-items: center !important; gap: 8px !important; }
#recodateApp .community-filter-divider { display: none !important; }

#recodateApp [data-feed-scope] {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  color: var(--muted) !important;
}
#recodateApp [data-feed-scope].active {
  background: var(--primary-soft) !important;
  border-color: #ffd3e2 !important;
  color: var(--primary-dark) !important;
  font-weight: 600 !important;
}

#recodateApp .community-filter-group:has([data-feed-sort]) {
  margin-left: auto !important;
  background: #f2eef1 !important;
  border-radius: 999px !important;
  padding: 3px !important;
  gap: 2px !important;
}
#recodateApp [data-feed-sort] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--muted) !important;
}
#recodateApp [data-feed-sort].active {
  background: #fff !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(120, 60, 90, 0.13) !important;
}

/* --- v58-6 : 바탕을 깔면서 카드가 되어야 하는 것들 --------------------------
   흰 페이지 위에서는 경계가 안 보였지만, 바탕이 생기면 테두리 없는 흰 판이
   '중간에서 잘린 것'처럼 보인다. 카드로 마무리한다. */
#recodateApp .auth-card {
  border: 1px solid #efe9ee !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-soft) !important;
  padding: 26px 20px !important;
}