/*
  RecoDate mobile redesign layer.
  Scope: mobile-only visual refinements. Existing IDs, data attributes,
  event flows, API calls, and storage behavior remain untouched.
*/

:root {
  --rd-primary: #e43f7b;
  --rd-primary-dark: #c92f68;
  --rd-primary-soft: #fff0f6;
  --rd-primary-soft-2: #ffe6f0;
  --rd-text: #20242c;
  --rd-subtext: #8b93a1;
  --rd-border: #e8ebf0;
  --rd-bg: #fbfcff;
  --rd-card: #ffffff;
  --rd-success: #27ae60;
  --rd-warning: #f2a93b;
  --rd-shadow: 0 12px 30px rgba(24, 31, 45, 0.08);
}

@media (max-width: 768px) {
  * {
    box-sizing: border-box;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 12% -8%, rgba(255, 230, 240, 0.92), transparent 30%),
      linear-gradient(180deg, #ffffff 0%, var(--rd-bg) 100%) !important;
    color: var(--rd-text) !important;
    font-family: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif !important;
    letter-spacing: 0 !important;
  }

  body {
    padding: 0 !important;
    min-height: 100dvh;
  }

  body,
  input,
  select,
  textarea,
  button {
    font-family: inherit !important;
  }

  input,
  select,
  textarea {
    min-height: 44px;
    font-size: 16px !important;
  }

  button,
  a,
  label {
    -webkit-tap-highlight-color: transparent;
  }

  .portal-view,
  .app-shell {
    width: 100% !important;
    max-width: 430px !important;
    min-height: 100dvh !important;
    margin: 0 auto !important;
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(104px + env(safe-area-inset-bottom)) !important;
    background: transparent !important;
    overflow-x: hidden !important;
  }

  .login-view {
    padding-top: calc(46px + env(safe-area-inset-top)) !important;
  }

  .portal-header {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    width: min(100%, 430px) !important;
    height: calc(72px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    z-index: 800 !important;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom)) !important;
    border: 1px solid rgba(225, 229, 236, 0.96) !important;
    border-bottom: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(18px);
    box-shadow: 0 -10px 28px rgba(32, 36, 44, 0.08) !important;
  }

  .portal-header .portal-logo {
    display: none !important;
  }

  .portal-nav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 2px !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  .portal-nav button {
    position: relative !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 5px 2px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: var(--rd-subtext) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  .portal-nav button[data-show-view="recommendation"],
  .portal-nav button[data-show-view="tripti"] {
    display: none !important;
  }

  .portal-nav button[hidden] {
    display: none !important;
  }

  .portal-nav button::before {
    display: block;
    font-size: 21px;
    line-height: 1;
    color: currentColor;
  }

  .portal-nav button[data-show-view="home"]::before { content: "⌂"; }
  .portal-nav button[data-show-view="community"]::before { content: "✦"; }
  .portal-nav button[data-show-view="bookmarks"]::before { content: "♡"; }
  .portal-nav button[data-show-view="myCourses"]::before { content: "▣"; }
  .portal-nav button[data-show-view="login"]::before { content: "♙"; }
  .portal-nav button[data-show-view="profile"]::before { content: "♙"; }

  .portal-nav button[data-show-view="login"],
  .portal-nav button[data-show-view="profile"] {
    font-size: 0 !important;
  }

  .portal-nav button[data-show-view="login"]::after,
  .portal-nav button[data-show-view="profile"]::after {
    content: "마이" !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: currentColor !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }

  .portal-nav button.active,
  .portal-nav button:hover {
    background: transparent !important;
    color: var(--rd-primary) !important;
  }

  .portal-nav button.active::after {
    content: "";
    position: absolute;
    bottom: 3px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--rd-primary);
  }

  .home-view::before,
  .browse-view::before,
  .tripti-view::before,
  .login-view::before,
  .app-shell::before {
    content: "Rec❤Date";
    position: static !important;
    display: block;
    height: 30px;
    margin: 0 0 10px 14px;
    color: var(--rd-primary);
    font-size: 22px;
    font-weight: 900;
    line-height: 30px;
    letter-spacing: -0.04em;
  }

  .back-home-button,
  .tripti-back-button,
  .step-navigation-button {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 0 12px 14px !important;
    padding: 7px 13px !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #5f6876 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(24, 31, 45, 0.04) !important;
  }

  .browse-view > .browse-heading,
  .tripti-view > .tripti-hero,
  #recommendationView > .topbar {
    margin-top: 0 !important;
  }

  .home-kicker,
  .eyebrow {
    margin: 0 0 8px !important;
    color: #8c95a3 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.16em !important;
    text-transform: none !important;
  }

  h1,
  h2,
  h3 {
    color: var(--rd-text) !important;
    letter-spacing: -0.035em !important;
    word-break: keep-all;
  }

  p,
  small,
  span,
  li {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .primary-button,
  .recodate-cta,
  .browse-recodate-button,
  .flow-save-course-button,
  .chat-send-button {
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #ec4a83 0%, #d72f70 100%) !important;
    color: #fff !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 24px rgba(228, 63, 123, 0.24) !important;
  }

  .secondary-button,
  .compact-button,
  .community-filter,
  .community-seg-btn {
    min-height: 44px !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #495160 !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }

  .home-hero,
  .home-tripti-card,
  .home-section,
  .panel,
  .auth-card,
  .tripti-hero,
  .tripti-board,
  .tripti-result-card,
  .profile-card,
  .saved-course-card,
  .browse-place-card,
  .community-post-card,
  .quick-condition-card {
    width: 100% !important;
    max-width: 100% !important;
    border: 1px solid rgba(224, 229, 237, 0.94) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: var(--rd-shadow) !important;
    overflow: hidden;
  }

  .home-hero {
    position: relative !important;
    min-height: auto !important;
    padding: 30px 20px 22px !important;
    display: grid !important;
    gap: 14px !important;
  }

  .home-hero::before,
  .home-hero::after,
  .home-tripti-card::after {
    display: none !important;
  }

  .home-hero h1 {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.18 !important;
    font-weight: 950 !important;
  }

  .home-hero h1::first-letter {
    color: inherit;
  }

  .home-hero > p:not(.home-kicker) {
    max-width: 290px !important;
    margin: 0 !important;
    color: #6e7786 !important;
    font-size: 14px !important;
    line-height: 1.58 !important;
  }

  .recodate-cta {
    width: 100% !important;
    margin-top: 8px !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
  }

  .recodate-cta span {
    font-size: 15px !important;
  }

  .recodate-cta small {
    color: #fff !important;
    opacity: 0.95;
  }

  .home-tripti-card {
    margin-top: 14px !important;
    padding: 18px !important;
    display: grid !important;
    gap: 14px !important;
  }

  .home-tripti-card h2,
  .home-section-heading h2 {
    margin: 0 0 5px !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
  }

  .home-tripti-card p:last-child,
  .home-section-heading p:not(.home-kicker) {
    color: #747d8b !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .tripti-home-button {
    width: 100% !important;
    min-height: 58px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--rd-primary-soft), #fff8fb) !important;
    color: var(--rd-primary-dark) !important;
    box-shadow: none !important;
  }

  .home-section {
    margin-top: 16px !important;
    padding: 18px !important;
  }

  .region-grid,
  .category-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px 12px !important;
    grid-template-columns: none !important;
  }

  .region-button,
  .category-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 1 auto !important;
    min-height: 42px !important;
    min-width: 72px !important;
    padding: 9px 14px !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: none !important;
    text-align: center !important;
  }

  .category-button {
    min-width: calc(50% - 5px) !important;
    border-radius: 16px !important;
    text-align: center !important;
  }

  .region-button.selected,
  .region-button:hover,
  .category-button:hover {
    border-color: rgba(228, 63, 123, 0.45) !important;
    background: var(--rd-primary-soft) !important;
    color: var(--rd-primary-dark) !important;
  }

  .region-button span,
  .category-button span {
    display: block !important;
    width: 100% !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-align: center !important;
  }

  .region-button small,
  .category-button small {
    display: none !important;
  }

  .category-button b {
    margin-right: 5px !important;
    color: var(--rd-primary) !important;
    font-size: 11px !important;
  }

  .home-view .region-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-items: center !important;
    gap: 12px 10px !important;
  }

  .home-view .region-button {
    width: 100% !important;
    max-width: 112px !important;
  }

  .home-view .category-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .home-view .category-button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .browse-heading,
  .topbar,
  .section-title {
    margin: 0 0 16px !important;
    padding: 0 !important;
  }

  .browse-heading h1,
  .topbar h1,
  .section-title h2 {
    margin: 0 0 7px !important;
    font-size: 23px !important;
    line-height: 1.24 !important;
    font-weight: 950 !important;
  }

  .browse-heading p:last-child,
  .section-title p {
    color: #727b89 !important;
    font-size: 13px !important;
    line-height: 1.52 !important;
  }

  .layout {
    display: block !important;
    width: 100% !important;
  }

  .panel {
    padding: 18px !important;
  }

  .controls-panel {
    display: block;
  }

  .recommendationView,
  #recommendationView {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .form,
  .detail-options,
  .meal-options {
    display: grid !important;
    gap: 13px !important;
  }

  .field,
  .check-row,
  .tripti-apply-option,
  .open-now-option {
    width: 100% !important;
    min-width: 0 !important;
  }

  .field > span,
  .check-row > span {
    color: #242a35 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
  }

  .search-row,
  .time-option-row,
  .friend-search-row,
  .start-place-modal-search {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .search-row input,
  .search-row button,
  .field input,
  .field select,
  .field textarea,
  .auth-form input,
  .start-place-modal-search input,
  .chat-input-row input {
    width: 100% !important;
    min-width: 0 !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: 13px !important;
    background: #fff !important;
    color: var(--rd-text) !important;
    box-shadow: none !important;
  }

  .search-row button,
  .start-place-modal-search button {
    min-width: 66px !important;
    padding: 0 14px !important;
    border-color: var(--rd-primary-soft-2) !important;
    color: var(--rd-primary-dark) !important;
    background: #fff !important;
  }

  .segmented,
  .transport-segmented {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .segmented label,
  .transport-segmented label {
    min-width: 0 !important;
  }

  .segmented label span,
  .transport-segmented label span {
    min-height: 46px !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: 13px !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  .segmented input:checked + span,
  .transport-segmented input:checked + span {
    border-color: rgba(228, 63, 123, 0.55) !important;
    background: var(--rd-primary-soft) !important;
    color: var(--rd-primary-dark) !important;
  }

  .check-row {
    min-height: 54px !important;
    padding: 12px !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .check-row input[type="checkbox"],
  .remember-login-option input[type="checkbox"],
  .auth-form input[type="checkbox"] {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 7px !important;
    border-color: #d9dee8 !important;
  }

  .check-row input[type="checkbox"]:checked,
  .remember-login-option input[type="checkbox"]:checked,
  .auth-form input[type="checkbox"]:checked {
    background: var(--rd-primary) !important;
    border-color: var(--rd-primary) !important;
  }

  .results-panel {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .results-panel .section-title {
    text-align: center !important;
  }

  .course-carousel-controls {
    display: grid !important;
    grid-template-columns: 44px 1fr 44px !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 0 0 10px !important;
  }

  .course-carousel-controls span {
    grid-column: 2;
    justify-self: center;
    color: var(--rd-text) !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    letter-spacing: 0.12em !important;
  }

  .course-carousel-controls small {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    color: var(--rd-subtext) !important;
    font-size: 11px !important;
  }

  .course-carousel-controls button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid var(--rd-border) !important;
    background: #fff !important;
    color: var(--rd-primary-dark) !important;
  }

  .course-list {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .course-card {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 1px solid rgba(228, 63, 123, 0.32) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(228, 63, 123, 0.08) !important;
    overflow: visible !important;
  }

  .course-photo-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    height: 82px !important;
    padding: 10px 10px 0 !important;
    overflow: hidden !important;
  }

  .course-photo-slot {
    height: 72px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #ffe8f1, #e9f3ff) !important;
  }

  .course-photo-slot span {
    padding: 5px !important;
    color: #fff !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  }

  .course-photo-slot img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .course-card-body {
    padding: 12px 10px 12px !important;
  }

  .course-card h3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 7px !important;
    font-size: 16.5px !important;
    line-height: 1.25 !important;
    font-weight: 950 !important;
  }

  .course-meta {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin: 0 0 9px !important;
    overflow: hidden !important;
  }

  .course-meta span {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    padding: 5px 7px !important;
    border-radius: 999px !important;
    background: #f6f8fb !important;
    color: #4d5665 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
  }

  .place-chain {
    display: grid !important;
    gap: 2px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    list-style: none !important;
    counter-reset: course-place-step !important;
  }

  .place-chain li {
    position: relative !important;
    min-height: 43px !important;
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) 34px !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 6px 4px 6px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #f1f3f7 !important;
    background: transparent !important;
    touch-action: pan-y;
    counter-increment: course-place-step !important;
  }

  .place-chain li::before {
    content: counter(course-place-step);
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--rd-primary-soft);
    color: var(--rd-primary);
    font-size: 11px;
    font-weight: 950;
  }

  .place-chain li > .drag-handle {
    display: none !important;
  }

  .place-chain li > span:not(.place-edit-buttons):not(.drag-handle) {
    min-width: 0 !important;
    display: block !important;
    color: var(--rd-text) !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .place-chain li small {
    margin-left: 4px !important;
    color: #9aa2af !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
  }

  .place-mobile-menu-button {
    position: static !important;
    grid-column: 3 !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #8b93a1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    z-index: 2 !important;
  }

  .place-chain li.mobile-actions-open {
    z-index: 20 !important;
    background: #fff7fb !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 22px rgba(228, 63, 123, 0.14) !important;
  }

  .place-edit-buttons {
    position: absolute !important;
    right: 8px !important;
    top: calc(100% - 2px) !important;
    display: none !important;
    grid-template-columns: repeat(3, auto) !important;
    gap: 6px !important;
    min-width: max-content !important;
    padding: 8px !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 14px 30px rgba(24, 31, 45, 0.15) !important;
    z-index: 60 !important;
  }

  .mobile-actions-open .place-edit-buttons {
    display: grid !important;
  }

  .replace-place-button {
    min-width: 48px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #566071 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  .place-chain li.dragging,
  .flow-step-card.dragging {
    transform: scale(1.015) translateY(-2px) !important;
    background: #fff4f8 !important;
    box-shadow: 0 14px 26px rgba(228, 63, 123, 0.16) !important;
    z-index: 50 !important;
  }

  .place-chain li.drop-before,
  .place-chain li.drop-after {
    border-color: var(--rd-primary) !important;
  }

  .course-edit-actions,
  .saved-course-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  .course-edit-actions button,
  .saved-course-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }

  .course-edit-actions [data-view-course-flow] {
    grid-column: span 2 !important;
    min-height: 46px !important;
  }

  .course-replacement-editor,
  .course-add-editor {
    margin-top: 12px !important;
    padding: 12px !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #fff6fa, #fff) !important;
  }

  .course-add-editor .search-row,
  .course-replacement-editor .search-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .replacement-option,
  .replacement-option-row {
    width: 100% !important;
  }

  .map-panel {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .map-title {
    display: grid !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .map-title-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  #map {
    min-height: calc(100dvh - 180px) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid var(--rd-border) !important;
    box-shadow: var(--rd-shadow) !important;
  }

  .course-flow-board,
  .tmap-static-board,
  .tmap-interactive-board {
    min-height: calc(100dvh - 180px) !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  .route-map-sticky,
  .tmap-static-map,
  .tmap-interactive-map {
    min-height: 330px !important;
    border-radius: 18px !important;
    margin: 10px !important;
    background: linear-gradient(135deg, #f8fbff, #fff4f8) !important;
  }

  .route-detail-scroll {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: var(--route-detail-height, 208px) !important;
    max-height: calc(100dvh - 130px) !important;
    padding: 10px 12px calc(18px + env(safe-area-inset-bottom)) !important;
    border-radius: 24px 24px 0 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 -18px 36px rgba(24, 31, 45, 0.12) !important;
    overflow-y: auto !important;
    z-index: 30 !important;
    transition: height 0.2s ease;
  }

  .route-detail-grip {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
    width: 100% !important;
    min-height: 46px !important;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--rd-text) !important;
    font-weight: 900 !important;
  }

  .route-detail-grip span {
    width: 44px !important;
    height: 4px !important;
    margin: 0 auto 7px !important;
    display: block !important;
    border-radius: 999px !important;
    background: #d6dce5 !important;
  }

  .route-detail-content {
    padding-bottom: 16px !important;
  }

  .route-summary-stats,
  .route-metric-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .flow-step-card {
    min-height: 72px !important;
    padding: 9px !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .flow-step-copy strong {
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px !important;
  }

  .flow-step-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .flow-action-button,
  .flow-naver-button {
    min-height: 34px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
  }

  .browse-place-grid,
  .saved-course-list,
  #communityFeedList,
  #profileFeedList,
  .liked-posts-list {
    display: grid !important;
    gap: 12px !important;
  }

  .browse-place-card:not(.saved-bookmark-card) {
    position: relative !important;
    min-height: 72px !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 38px 38px !important;
    grid-template-areas:
      "rank title bookmark search"
      "rank category bookmark search"
      "rank meta bookmark search" !important;
    gap: 4px 8px !important;
    align-items: center !important;
    padding: 12px 8px !important;
    border-radius: 16px !important;
    box-shadow: none !important;
  }

  .browse-place-card:not(.saved-bookmark-card) > b {
    grid-area: rank !important;
    color: var(--rd-primary) !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    justify-self: center !important;
  }

  .browse-place-card:not(.saved-bookmark-card) h3 {
    grid-area: title !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .browse-place-card:not(.saved-bookmark-card) > p,
  .browse-place-card:not(.saved-bookmark-card) > small {
    grid-column: auto !important;
    margin: 0 !important;
    color: #7a8391 !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  .browse-place-card:not(.saved-bookmark-card) > small {
    grid-area: rank !important;
    justify-self: center !important;
    align-self: start !important;
  }

  .browse-place-card:not(.saved-bookmark-card) > p {
    grid-area: category !important;
  }

  .browse-place-card .naver-review-rank-badge,
  .browse-place-card [data-browse-review-count],
  .browse-place-card [data-browse-opening-status] {
    grid-area: meta !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 5px 0 0 !important;
    white-space: nowrap !important;
  }

  .browse-bookmark-button,
  .browse-naver-search-button {
    position: static !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1px solid var(--rd-border) !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .browse-bookmark-button {
    grid-area: bookmark !important;
  }

  .browse-naver-search-button {
    grid-area: search !important;
  }

  .browse-detail-card,
  .start-place-modal-card,
  .region-picker-card,
  .comments-sheet,
  .community-share-card {
    width: min(calc(100vw - 24px), 430px) !important;
    max-width: min(calc(100vw - 24px), 430px) !important;
    max-height: calc(100dvh - 28px) !important;
    margin: auto !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 24px 60px rgba(24, 31, 45, 0.22) !important;
    overflow: hidden !important;
  }

  .browse-detail-card,
  .start-place-modal-card,
  .region-picker-card {
    overflow-y: auto !important;
  }

  .browse-detail-body {
    padding-bottom: 18px !important;
  }

  .browse-detail-photo,
  .browse-detail-photo-placeholder,
  .browse-detail-map {
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .browse-detail-actions,
  .browse-detail-bottom-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 0.9fr) minmax(0, 1.2fr) !important;
    gap: 8px !important;
    padding: 10px 0 0 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 30%) !important;
  }

  .browse-detail-actions > *,
  .browse-detail-bottom-actions > * {
    min-width: 0 !important;
    min-height: 38px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  .browse-detail-bookmark-button {
    width: 42px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .place-review-panel {
    border-radius: 18px !important;
    background: #fff9fc !important;
  }

  .place-review-stars {
    justify-content: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 8px 0 !important;
    padding: 7px 9px !important;
    border-radius: 16px !important;
    background: #fff !important;
  }

  .place-review-stars button {
    min-width: 34px !important;
    min-height: 34px !important;
  }

  .community-seg {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
    padding: 3px !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: 999px !important;
    background: #f6f8fb !important;
  }

  .community-seg-btn {
    border-radius: 999px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .community-seg-btn.active {
    background: #fff !important;
    color: var(--rd-text) !important;
    box-shadow: 0 4px 10px rgba(24, 31, 45, 0.08) !important;
  }

  .community-compose-button {
    min-height: 48px !important;
    border: 1px dashed rgba(228, 63, 123, 0.45) !important;
    border-radius: 14px !important;
    background: #fff6fa !important;
    color: var(--rd-primary-dark) !important;
  }

  .community-filters {
    gap: 7px !important;
  }

  .community-filter {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
  }

  .community-filter.active {
    border-color: rgba(228, 63, 123, 0.35) !important;
    background: var(--rd-primary-soft) !important;
    color: var(--rd-primary-dark) !important;
  }

  .community-post-card {
    padding: 14px !important;
  }

  .community-post-actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .community-like-button,
  .community-comment-button,
  .community-report-button,
  .community-post-actions button {
    min-height: 38px !important;
    border-radius: 999px !important;
  }

  .community-friend-row,
  .friend-course-share-row {
    min-height: 58px !important;
    padding: 10px 4px !important;
  }

  .chat-card {
    height: min(680px, calc(100dvh - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  .chat-input-row {
    display: grid !important;
    grid-template-columns: 42px 42px minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  .chat-attach-button {
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  .comments-sheet-backdrop {
    align-items: end !important;
  }

  .comments-sheet {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    height: min(72dvh, 680px) !important;
    margin: 0 auto !important;
    border-radius: 26px 26px 0 0 !important;
  }

  .comments-reaction-bar {
    overflow-x: auto !important;
    padding-bottom: 4px !important;
  }

  .comments-reaction-bar button {
    min-width: 42px !important;
    min-height: 42px !important;
    flex: 0 0 auto !important;
  }

  .comments-sheet-form {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  .auth-card {
    padding: 24px 18px !important;
  }

  .auth-logo {
    justify-content: flex-start !important;
    color: var(--rd-primary) !important;
    font-size: 26px !important;
    font-weight: 950 !important;
  }

  .auth-card h1,
  .auth-card h2 {
    font-size: 21px !important;
  }

  .auth-form {
    display: grid !important;
    gap: 10px !important;
  }

  .password-field {
    position: relative !important;
  }

  .password-visibility-button {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    transform: translateY(-50%) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .remember-login-option,
  .signup-agreements label {
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: #5d6674 !important;
    font-size: 13px !important;
  }

  .tripti-progress {
    position: static !important;
    margin-bottom: 14px !important;
    padding: 13px !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .tripti-progress span {
    color: var(--rd-primary) !important;
    font-size: 17px !important;
    font-weight: 950 !important;
  }

  .tripti-question-card {
    padding: 16px !important;
    border-radius: 18px !important;
    border: 1px solid var(--rd-border) !important;
    background: #fff !important;
  }

  .tripti-question-card label {
    min-height: 62px !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
  }

  .tripti-question-card label:has(input:checked) {
    border-color: rgba(228, 63, 123, 0.45) !important;
    background: var(--rd-primary-soft) !important;
  }

  .tripti-result-layout,
  .tripti-score-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .saved-course-card {
    padding: 14px !important;
  }

  .saved-course-card ol {
    margin: 8px 0 12px !important;
    padding-left: 20px !important;
  }

  .profile-more-button {
    position: fixed !important;
    top: calc(18px + env(safe-area-inset-top)) !important;
    right: max(16px, calc((100vw - 430px) / 2 + 16px)) !important;
    z-index: 120 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid var(--rd-border) !important;
    box-shadow: 0 8px 20px rgba(24, 31, 45, 0.08) !important;
  }

  .profile-hero-row {
    display: flex !important;
    gap: 14px !important;
    align-items: center !important;
  }

  .profile-avatar-button {
    width: 74px !important;
    height: 74px !important;
    flex: 0 0 74px !important;
    border: 3px solid #fff !important;
    box-shadow: 0 8px 22px rgba(228, 63, 123, 0.18) !important;
  }

  .profile-nickname-view h2 {
    font-size: 22px !important;
    line-height: 1.22 !important;
  }

  .profile-community-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .profile-stat {
    border-radius: 15px !important;
    background: #fff !important;
    border: 1px solid var(--rd-border) !important;
  }

  .profile-quick-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .region-picker-layout {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    min-height: min(70dvh, 620px) !important;
  }

  .region-province-list {
    overflow-y: auto !important;
    border-right: 1px solid var(--rd-border) !important;
    background: #f7f9fc !important;
  }

  .region-province-list button,
  .region-district-list button,
  .region-whole-button {
    min-height: 48px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    text-align: left !important;
  }

  .start-place-modal-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .start-place-candidate-map {
    min-height: 180px !important;
    border-radius: 18px !important;
  }

  .modal-backdrop {
    padding: 12px !important;
    z-index: 1200 !important;
  }

  .modal-close-button,
  .region-picker-close-button,
  .comments-sheet-close {
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: #f1f3f7 !important;
    color: #5d6674 !important;
  }

  .saved-course-floating-button {
    display: none !important;
  }

  .browse-place-card:not(.saved-bookmark-card) {
    display: block !important;
    min-height: 86px !important;
    padding: 14px 92px 14px 48px !important;
    text-align: left !important;
  }

  .browse-place-card:not(.saved-bookmark-card) > small {
    position: absolute !important;
    left: 12px !important;
    top: 16px !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: var(--rd-primary-soft) !important;
    color: var(--rd-primary-dark) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
  }

  .browse-place-card:not(.saved-bookmark-card) h3,
  .browse-place-card:not(.saved-bookmark-card) > p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  .browse-place-card:not(.saved-bookmark-card) h3 {
    margin: 0 0 5px !important;
    font-size: 15px !important;
    line-height: 1.28 !important;
  }

  .browse-place-card:not(.saved-bookmark-card) > p {
    margin: 0 0 7px !important;
    color: #7a8391 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .browse-place-card .naver-review-rank-badge,
  .browse-place-card [data-browse-review-count],
  .browse-place-card [data-browse-opening-status] {
    position: static !important;
    display: inline-flex !important;
    vertical-align: middle !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 5px 4px 0 !important;
    white-space: nowrap !important;
  }

  .browse-place-card:not(.saved-bookmark-card) .browse-bookmark-button,
  .browse-place-card:not(.saved-bookmark-card) .browse-naver-search-button {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .browse-place-card:not(.saved-bookmark-card) .browse-bookmark-button {
    right: 50px !important;
  }

  .browse-place-card:not(.saved-bookmark-card) .browse-naver-search-button {
    right: 8px !important;
  }
}

@media (max-width: 390px) {
  .portal-view,
  .app-shell {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .home-hero h1 {
    font-size: 29px !important;
  }

  .course-photo-strip {
    height: 72px !important;
  }

  .course-photo-slot {
    height: 62px !important;
  }

  .course-card h3 {
    font-size: 15.5px !important;
  }

  .place-chain li {
    min-height: 40px !important;
  }

  .course-edit-actions button {
    font-size: 11.5px !important;
  }
}