/* =========================================================
   MeetBack mobile responsive layer

   Loaded after page and dark-mode styles so every screen uses
   one mobile rhythm without changing Thymeleaf or feature JS.
   ========================================================= */

@media (max-width: 767px) {
    html {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
        scroll-padding-top: 1rem;
    }

    body.mb-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        overflow-x: hidden;
    }

    .mb-page *,
    .mb-page *::before,
    .mb-page *::after {
        box-sizing: border-box;
    }

    .mb-page :where(img, video, iframe) {
        max-width: 100%;
        height: auto;
    }

    .mb-page :where(h1, h2, h3, p, strong, span, a, button, label) {
        overflow-wrap: anywhere;
    }

    .mb-page :where(h1, h2, h3) {
        word-break: keep-all;
        text-wrap: balance;
    }

    .mb-page :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        width: 100%;
        max-width: 100%;
        min-height: 48px;
        font-size: 16px !important;
    }

    .mb-page :where(
        button:not(.mb-theme-toggle):not(.feed-menu-button):not(.feed-summary-menu-button):not(.feed-detail-close):not(.feed-indicator),
        a.primary,
        a.primary-button,
        a.home-button,
        a.back-button
    ) {
        min-height: 44px;
    }

    /* The mobile header remains in document flow while scrolling. */
    .mb-site-header {
        position: relative;
        inset: auto;
        height: auto;
        min-height: 104px;
    }

    .mb-site-header__inner {
        min-height: 104px;
        padding-right: max(14px, env(safe-area-inset-right));
        padding-left: max(14px, env(safe-area-inset-left));
    }

    .mb-site-brand__name {
        display: inline;
        max-width: 7rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mb-site-nav {
        width: calc(100% + 28px);
        margin-inline: -14px;
    }

    .mb-site-nav a {
        font-size: 0.75rem;
    }

    .mb-site-header .mb-theme-toggle,
    .page-home .mb-theme-toggle,
    .page-login .login-container > .mb-theme-toggle {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        border-radius: 12px;
    }

    .mb-page .mb-theme-toggle:focus-visible {
        outline: 2px solid var(--mb-primary);
        outline-offset: 2px;
        box-shadow: none;
    }

    .mb-has-site-header.page-quick-meetings,
    .mb-has-site-header.page-location,
    .mb-has-site-header.page-meeting-room,
    .mb-has-site-header.page-vote,
    .mb-has-site-header.page-result,
    .mb-has-site-header.page-quick-fixed,
    .mb-has-site-header.page-quick-fixed-check {
        padding-top: 0;
    }

    /* Home */
    .page-home .home-container {
        width: 100%;
        padding: 0 0 calc(3.5rem + env(safe-area-inset-bottom));
    }

    .page-home .home-header {
        position: relative;
        top: auto;
        min-height: 104px;
        margin: 0;
        border-width: 0 0 1px;
        border-radius: 0;
        box-shadow: none;
    }

    .page-home .home-primary-nav a {
        min-width: 0;
        font-size: 0.75rem;
    }

    .page-home .home-hero {
        min-height: 0;
        margin: 0 0 1rem;
        padding: 2.25rem 1rem;
        border-width: 0 0 1px;
        border-radius: 0;
    }

    .page-home .home-hero h2 {
        max-width: 12em;
        font-size: clamp(2rem, 10.5vw, 2.75rem);
        line-height: 1.12;
    }

    .page-home .home-hero p {
        max-width: 34rem;
        font-size: 0.875rem;
        line-height: 1.65;
    }

    .page-home .home-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .page-home .home-hero-actions a {
        width: 100%;
    }

    .page-home .home-hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .page-home .home-hero-stats > div {
        padding: 0.75rem 0.4rem;
        text-align: center;
    }

    .page-home #homeMessage,
    .page-home .section,
    .page-home #meetingStartSection {
        width: calc(100% - 24px);
    }

    .page-home .section,
    .page-home .meeting-card,
    .page-home .meeting-card--create {
        padding: 1.125rem;
        border-radius: 1rem;
    }

    .page-home .meeting-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.875rem;
    }

    .page-home .quick-meeting-list {
        grid-auto-columns: min(17rem, 84vw);
        scroll-padding-inline: 0.25rem;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
    }

    .page-home .quick-meeting-card {
        scroll-snap-align: start;
    }

    .page-home .my-meeting-list {
        position: fixed;
        top: 4.75rem;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: min(62dvh, 30rem);
    }

    /* Quick-meeting directory */
    .page-quick-meetings .home-container {
        width: 100%;
        padding: 1rem 12px calc(3.5rem + env(safe-area-inset-bottom));
    }

    .page-quick-meetings .section {
        width: 100%;
        min-height: 0;
        padding: 1.125rem;
        border: 1px solid var(--mb-border);
        border-radius: 1rem;
        background: var(--mb-card);
    }

    .page-quick-meetings .quick-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }

    .page-quick-meetings .quick-home-link {
        align-self: flex-start;
    }

    .page-quick-meetings .quick-search-area {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.625rem;
    }

    .page-quick-meetings .quick-search-button {
        width: 100%;
    }

    .page-quick-meetings .quick-meeting-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.875rem;
    }

    /* Shared app pages */
    .page-location,
    .page-meeting-room,
    .page-vote,
    .page-result {
        width: 100%;
        padding: 1.25rem 0 calc(3.5rem + env(safe-area-inset-bottom));
    }

    .page-location > h1,
    .page-location > p,
    .page-location > .card,
    .page-meeting-room > .room-header,
    .page-meeting-room > .room-card,
    .page-vote > h1,
    .page-vote > p,
    .page-vote > button,
    .page-vote > hr,
    .page-vote > .vote-progress-area,
    .page-vote > #rankingArea,
    .page-vote > .abstain-area,
    .page-vote > .host-area,
    .page-result > .result-header,
    .page-result > .result-card {
        width: calc(100% - 24px);
        max-width: 100%;
    }

    .page-location > .card,
    .page-meeting-room > .room-header,
    .page-meeting-room > .room-card,
    .page-vote .candidate,
    .page-vote .vote-progress-area,
    .page-vote .abstain-area,
    .page-vote .host-area,
    .page-result .result-header,
    .page-result .result-card {
        padding: 1.125rem;
        border-radius: 1rem;
    }

    .page-location .search-row,
    .page-meeting-room .chat-row,
    .page-result .header-actions,
    .page-vote .candidate-buttons,
    .page-vote .confirm-buttons {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-location .search-row button,
    .page-meeting-room .chat-row button,
    .page-result .header-actions button,
    .page-vote .candidate-buttons button,
    .page-vote .confirm-buttons button {
        width: 100%;
    }

    .page-location .results {
        max-height: min(48dvh, 25rem);
    }

    .page-location .result {
        padding: 0.875rem;
        border-radius: 0.75rem;
    }

    .page-meeting-room .room-header,
    .page-meeting-room .meeting-title-row,
    .page-meeting-room .my-place-title-row,
    .page-meeting-room .chat-title-row,
    .page-result .result-header,
    .page-result .section-title,
    .page-result .participant-result-header,
    .page-result .final-header-info,
    .page-vote .abstain-area {
        align-items: stretch;
        flex-direction: column;
    }

    .page-meeting-room .room-header-actions,
    .page-result .header-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        gap: 0.625rem;
    }

    .page-meeting-room .my-place-info,
    .page-meeting-room #participantList,
    .page-meeting-room #kickedParticipantList,
    .page-result .summary-grid,
    .page-result .participant-info-grid,
    .page-vote #rankingArea,
    .page-vote .info-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-meeting-room .chat-messages {
        height: clamp(15rem, 42dvh, 25rem);
        min-height: 15rem;
        padding: 0.875rem;
    }

    .page-meeting-room .participant-card,
    .page-result .participant-result,
    .page-vote .participant-result {
        min-width: 0;
    }

    .page-vote .abstain-button,
    .page-vote .host-area .primary {
        width: 100%;
        min-width: 0;
    }

    .page-result .final-place-name {
        font-size: clamp(1.35rem, 7vw, 1.75rem);
    }

    /* Fixed and fixed-check room pages */
    .page-quick-fixed .page,
    .page-quick-fixed-check .page {
        width: calc(100% - 24px);
        gap: 0.75rem;
        padding: 0.75rem 0 calc(3.5rem + env(safe-area-inset-bottom));
    }

    .page-quick-fixed .page > .card,
    .page-quick-fixed .meeting-summary-card,
    .page-quick-fixed-check .page > .card,
    .page-quick-fixed-check .meeting-summary-card,
    .page-quick-fixed-check .result-card {
        min-width: 0;
        padding: 1.125rem;
        border-radius: 1rem;
    }

    .page-quick-fixed .info-grid,
    .page-quick-fixed .participant-list,
    .page-quick-fixed .place-actions,
    .page-quick-fixed .chat-row,
    .page-quick-fixed-check .info-grid,
    .page-quick-fixed-check .result-grid,
    .page-quick-fixed-check .action-row,
    .page-quick-fixed-check .search-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-quick-fixed .meeting-summary-card :where(button, a),
    .page-quick-fixed .place-actions :where(button, a),
    .page-quick-fixed .chat-row button,
    .page-quick-fixed-check .action-row :where(button, a),
    .page-quick-fixed-check .search-row button {
        width: 100%;
    }

    /* Auth */
    body.mb-auth-page {
        display: flex;
        min-height: 100dvh;
        padding:
                max(12px, env(safe-area-inset-top))
                max(12px, env(safe-area-inset-right))
                max(12px, env(safe-area-inset-bottom))
                max(12px, env(safe-area-inset-left));
        align-items: flex-start;
        justify-content: center;
    }

    /*
     * 로그인 페이지 내부의 .kakao-login-container는
     * 카카오 버튼 래퍼이므로 전체 화면 높이를 적용하지 않는다.
     *
     * 실제 카카오 로그인 처리 페이지의 컨테이너만
     * .page-kakao-login > .kakao-login-container 로 지정한다.
     */
    .mb-auth-page :where(
        .login-container,
        .signup-container,
        .find-email-container,
        .forgot-password-container,
        .reset-password-container
    ),
    .page-kakao-login > .kakao-login-container {
        width: 100%;
        min-height: calc(100dvh - 24px);
        margin: 0;
        padding: 2.5rem 1.25rem 2rem;
        border: 1px solid var(--auth-border);
        border-radius: 1.25rem;
        box-shadow: 0 1rem 2.75rem color-mix(
                in srgb,
                var(--auth-foreground) 9%,
                transparent
        );
    }

    .mb-auth-page h1 {
        max-width: calc(100% - 2.75rem);
        font-size: clamp(1.65rem, 8vw, 2rem);
        line-height: 1.2;
    }

    .page-login .login-container > h1 {
        max-width: calc(100% - 3rem);
        padding-right: 0;
        font-size: clamp(1.4rem, 6.4vw, 1.65rem);
        white-space: nowrap;
    }

    .mb-auth-page form,
    .mb-auth-page :where(.social-login-container, #socialSignupContainer, #kakaoSignupContainer) {
        min-width: 0;
    }

    .mb-auth-page form > div:has(> label + input + button),
    .mb-auth-page #socialSignupContainer > div:has(> label + input + button),
    .mb-auth-page #kakaoSignupContainer > div:has(> label + input + button) {
        grid-template-columns: minmax(0, 1fr);
    }

    .mb-auth-page form > div:has(> label + input + button) > button,
    .mb-auth-page #socialSignupContainer > div:has(> label + input + button) > button,
    .mb-auth-page #kakaoSignupContainer > div:has(> label + input + button) > button {
        width: 100%;
    }

    .mb-auth-page .login-container > div:not(.social-login-container):not(#socialSignupContainer) {
        white-space: normal;
        line-height: 1.75;
    }

    .mb-auth-page :where(#loginForm, #signupForm, #findEmailForm, #forgotPasswordForm, #resetPasswordForm) > button[type="submit"] {
        width: 100%;
        min-height: 48px;
    }

    /* Feed and content pages */
    .mb-has-site-header.page-feed-list .feed-page,
    .page-feed-list .feed-page {
        width: 100%;
        padding: 1.25rem 12px calc(3.5rem + env(safe-area-inset-bottom));
    }

    .page-feed-list .feed-page-header {
        align-items: stretch;
        flex-direction: column;
        gap: 0.875rem;
    }

    .page-feed-list .feed-navigation {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .page-feed-list .feed-navigation a {
        justify-content: center;
    }

    .page-feed-list #feedContainer {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.875rem;
    }

    .page-feed-list .feed-summary-card {
        min-width: 0;
        border-radius: 1rem;
    }

    .page-feed-list .feed-detail-modal {
        padding: 0;
    }

    .page-feed-list .feed-detail-dialog {
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .page-feed-list .feed-comment-form,
    .page-feed-list .feed-edit-buttons {
        align-items: stretch;
        flex-direction: column;
    }

    .page-feed-list .feed-comment-submit,
    .page-feed-list .feed-edit-buttons button {
        width: 100%;
    }

    .page-feed-write {
        padding:
                max(12px, env(safe-area-inset-top))
                max(12px, env(safe-area-inset-right))
                max(12px, env(safe-area-inset-bottom))
                max(12px, env(safe-area-inset-left));
    }

    .page-feed-write > div {
        min-height: calc(100dvh - 24px);
        padding: 1.5rem 1rem;
        border: 1px solid var(--content-border);
        border-radius: 1.25rem;
        box-shadow: 0 1rem 2.75rem color-mix(
                in srgb,
                var(--content-foreground) 8%,
                transparent
        );
    }

    .page-feed-write h1 {
        padding-right: 3rem;
        font-size: clamp(1.6rem, 8vw, 2rem);
    }

    .page-feed-write input[type="file"] {
        min-height: 52px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .page-feed-write #feedForm > button,
    .page-feed-write #feedForm > a {
        width: 100%;
        margin-left: 0;
    }

    .page-admin-term {
        width: 100%;
        padding: 1.25rem 12px calc(3.5rem + env(safe-area-inset-bottom));
    }

    .page-admin-term #termForm {
        grid-template-columns: minmax(0, 1fr);
        padding: 1rem;
    }

    .page-admin-term #termForm > div:has(#content) {
        grid-column: auto;
    }

    .page-admin-term #termForm > button {
        width: 100%;
    }

    .page-admin-term table {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Dialogs stay reachable on short mobile screens. */
    .mb-page :where(.confirm-modal, .kick-modal-box) {
        width: calc(100% - 24px);
        max-width: 30rem;
        max-height: calc(100dvh - 24px);
        padding: 1.25rem;
        overflow-y: auto;
        border-radius: 1rem;
    }
}


@media (max-width: 380px) {
    .mb-site-brand__name {
        display: none;
    }

    .page-home .home-hero-stats {
        gap: 0.35rem;
    }

    .page-home .home-hero-stats > div {
        padding-inline: 0.2rem;
    }

    .page-home .home-hero-stats strong {
        font-size: 0.75rem;
    }

    /*
     * 위와 동일하게 로그인 페이지 내부 카카오 버튼 래퍼는 제외한다.
     */
    .mb-auth-page :where(
        .login-container,
        .signup-container,
        .find-email-container,
        .forgot-password-container,
        .reset-password-container
    ),
    .page-kakao-login > .kakao-login-container {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .page-feed-list .feed-navigation {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =========================================================
   Home header: tablet / half-width desktop
   ========================================================= */

@media (min-width: 560px) and (max-width: 1040px) {
    .page-home .home-header-actions {
        display: flex !important;
        min-width: 0;
        align-items: center;
        justify-content: flex-end;
        flex-flow: row nowrap;
        gap: 4px;
    }

    .page-home .home-header-actions .my-meeting-menu {
        display: block !important;
        width: auto !important;
        min-width: 0;
        flex: 0 0 auto;
    }

    .page-home .home-header-actions .my-meeting-toggle-button,
    .page-home .home-header-logout-button,
    .page-home .home-create-link {
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 34px;
        height: 34px;
        padding: 0 8px;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        line-height: 1;
        white-space: nowrap;
    }

    .page-home .home-user-session {
        display: flex !important;
        width: auto;
        min-width: 0;
        align-items: center;
        gap: 0;
    }

    .page-home .home-user-session {
        display: flex !important;
        width: auto;
        min-width: 0;
        align-items: center;
        gap: 4px;
    }

    .page-home .home-user-session .user-info {
        display: flex !important;
        width: auto;
        min-width: 0;
        align-items: center;
        gap: 4px;
        padding: 0;
    }

    .page-home .home-user-avatar {
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
    }

    .page-home #homeNickname {
        display: block;
        max-width: 70px;
        overflow: hidden;
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-home .mb-theme-toggle {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px;
        min-height: 34px;
        flex: 0 0 34px;
    }

    .page-home .home-create-link {
        order: 20;
    }
}


@media (min-width: 560px) and (max-width: 760px) {
    .page-home .my-meeting-list {
        top: 108px;
    }
}


/* =========================================================
   Home header: mobile
   내 정보 + 내 모임/내 번개방
   로그아웃/모임 만들기는 아래 줄
   ========================================================= */

@media (max-width: 559px) {

    .page-home .home-header {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: 44px 36px 36px 42px;

        min-height: 158px;

        padding: 0 10px;

        gap: 0 4px;
    }


    /* =====================================================
       1줄 - 로고
       ===================================================== */

    .page-home .home-header-title {
        grid-column: 1;
        grid-row: 1;

        align-self: center;

        width: auto;
        min-width: 0;

        padding: 0;
    }

    .page-home .home-header-title h1 {
        font-size: 0;
    }

    .page-home .home-header-title h1::before {
        width: 32px;
        height: 32px;

        flex: 0 0 32px;

        margin: 0;
    }


    /* home-header-actions의 자식들을
       home-header grid에 직접 배치 */
    .page-home .home-header-actions {
        display: contents !important;
    }


    /* =====================================================
       1줄 - 다크모드
       ===================================================== */

    .page-home .mb-theme-toggle {
        grid-column: 2;
        grid-row: 1;

        justify-self: start;

        width: 32px !important;
        min-width: 32px !important;

        height: 32px;
        min-height: 32px;

        padding: 0;
    }


    /* =====================================================
       사용자 정보 / 로그아웃을 각각 배치하기 위해
       home-user-session 컨테이너를 풀어줌
       ===================================================== */

    .page-home .home-user-session {
        display: contents !important;
    }


    /* =====================================================
       1줄 - 사용자 정보
       ===================================================== */

    .page-home .user-info,
    .page-home .home-user-session .user-info {
        grid-column: 3 / 7;
        grid-row: 1;

        justify-self: end;

        display: flex !important;

        width: auto;
        min-width: 0;

        align-items: center;

        gap: 5px;

        padding: 0;
    }

    .page-home .home-user-avatar {
        width: 28px;
        height: 28px;

        flex: 0 0 28px;
    }

    .page-home #homeNickname {
        display: block;

        max-width: 88px;

        overflow: hidden;

        font-size: 10px;

        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /* =====================================================
       2줄 - 내 모임 / 내 번개방
       ===================================================== */

    .page-home .home-header-actions .my-meeting-menu {
        display: block !important;

        width: 100% !important;
        min-width: 0;

        margin: 0;
    }

    .page-home .home-header-actions .my-meeting-menu:first-of-type {
        grid-column: 1 / 4;
        grid-row: 2;
    }

    .page-home .home-header-actions .my-meeting-menu:nth-of-type(2) {
        grid-column: 4 / 7;
        grid-row: 2;
    }

    .page-home .home-header-actions .my-meeting-toggle-button {
        width: 100% !important;
        min-width: 0 !important;

        height: 32px;
        min-height: 32px;

        padding: 0 6px;

        font-size: 10px;
        line-height: 1;

        white-space: nowrap;
    }


    /* =====================================================
       3줄 - 로그아웃 / 모임 만들기
       ===================================================== */

    .page-home .home-header-logout-button {
        grid-column: 1 / 4;
        grid-row: 3;

        display: inline-flex !important;

        width: 100% !important;
        min-width: 0 !important;

        height: 32px;
        min-height: 32px;

        padding: 0 6px;

        align-items: center;
        justify-content: center;

        font-size: 10px;

        white-space: nowrap;
    }

    .page-home .home-create-link {
        grid-column: 4 / 7;
        grid-row: 3;

        display: inline-flex !important;

        width: 100% !important;
        min-width: 0 !important;

        height: 32px;
        min-height: 32px;

        padding: 0 6px;

        align-items: center;
        justify-content: center;

        font-size: 10px;

        white-space: nowrap;

        order: 0;
    }


    /* =====================================================
       4줄 - 홈 / 번개 / 자유
       ===================================================== */

    .page-home .home-primary-nav {
        grid-column: 1 / -1;
        grid-row: 4;

        display: flex;

        width: calc(100% + 20px);
        height: 42px;

        margin: 0 -10px;

        padding: 0;

        border-top: 1px solid var(--_mb-border);
    }

    .page-home .home-primary-nav a {
        display: grid;
        place-items: center;

        flex: 1;

        height: 41px;

        padding: 0;

        border-radius: 0;

        font-size: 10px;
    }


    /* =====================================================
       내 모임 드롭다운
       ===================================================== */

    .page-home .my-meeting-list {
        position: fixed;

        top: 162px;

        right: 10px;
        left: 10px;

        width: auto !important;
        min-width: 0;

        max-height: 55vh;

        overflow-y: auto;

        z-index: 9999;
    }
}