/* =====================================================
   그룹 관리 UI
===================================================== */

.group-modal {
    width: min(980px, calc(100vw - 36px));
    max-height: min(760px, calc(100vh - 36px));
    padding: 0;
    overflow: hidden;
    border-radius: 24px;
}

.group-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 30px 22px;
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(
            135deg,
            #fffdf7 0%,
            #fff6d8 100%
        );
}

.group-modal-header h2,
.group-form-heading h2,
.shared-group-modal h2 {
    margin: 5px 0 4px;
    color: var(--text);
    font-size: 25px;
}

.group-modal-header p,
.group-form-heading p,
.shared-group-description {
    margin: 0;
    color: var(--gray-500);
    font-size: 13px;
}

.group-eyebrow {
    color: var(--cheese-deep);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.group-create-open {
    width: auto;
    min-width: 118px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

/* mr.eum수정부분 */
/* 기존 그룹 모달 크기를 유지하기 위해 레이아웃 높이를 고정 */
.group-layout {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    min-height: 520px;
    max-height: calc(100vh - 190px);
}

.group-list-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px 16px;
    border-right: 1px solid var(--line);
    background: #fbfaf7;
}

.group-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 12px;
    color: var(--text);
    font-size: 13px;
}

.group-panel-title span {
    display: grid;
    min-width: 25px;
    height: 25px;
    place-items: center;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--cheese-soft);
    color: var(--cheese-brown);
    font-size: 11px;
    font-weight: 800;
}

.group-list {
    display: grid;
    gap: 8px;
    padding: 3px;
    overflow-y: auto;
}

.group-list-item {
    width: 100%;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 15px;
    background: transparent;
    text-align: left;
    transition:
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease;
}

.group-list-item:hover {
    border-color: var(--line);
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(237, 194, 82, 0.08);
}

.group-list-item.active {
    border-color: #edc252;
    background: #fff2ba;
}

.group-list-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--cheese-brown);
    background: #ffffff;
    font-size: 19px;
}

.group-list-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.group-list-copy strong {
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.group-list-copy small {
    overflow: hidden;
    color: var(--gray-500);
    font-size: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.group-list-count {
    min-width: 34px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 7px;
    border: 1px solid rgba(166, 119, 22, 0.14);
    border-radius: 999px;
    color: var(--cheese-brown);
    background: rgba(255, 255, 255, 0.82);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.group-list-count i {
    font-size: 11px;
}

.group-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    /* 가져가기 영역과 저장된 장소 영역 사이 구분선 */
    margin: 0 0 18px;
    padding: 0 0 18px;
    border-bottom: 1px solid #e8e3d8;
}

.group-detail-meta-chip {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--gray-700);
    background: #fbfaf7;
    font-size: 11px;
    font-weight: 800;
}

.group-detail-meta-chip i {
    color: var(--cheese-brown);
    font-size: 13px;
}

.group-members-section {
    margin: 0 0 20px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fbfaf7;
}

.group-members-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.group-members-heading strong {
    color: var(--text);
    font-size: 12px;
}

.group-members-heading span {
    color: var(--gray-500);
    font-size: 10px;
    font-weight: 800;
}

.group-members-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.group-member-chip {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px 6px 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--gray-700);
    background: #ffffff;
    font-size: 10px;
    font-weight: 700;
}

.group-member-avatar {
    width: 24px;
    height: 24px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: var(--cheese-brown);
    background: var(--cheese-soft);
}

.group-share-save-open {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: auto;
    padding: 12px;
    border: 1px dashed #d6c58e;
    border-radius: 13px;
    color: var(--cheese-brown);
    background: #fffdf7;
    font-size: 12px;
    font-weight: 800;
}

/* mr.eum수정부분 */
/* 오른쪽 상세 패널 전체 스크롤 제거.
   저장된 장소 목록에서만 스크롤되도록 처리 */
.group-detail-panel {
    min-width: 0;
    overflow: hidden;
    padding: 26px 28px;
    background: #ffffff;
}

.group-empty-state {
    min-height: 430px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    color: var(--gray-500);
    text-align: center;
}

.group-empty-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 5px;
    border-radius: 18px;
    color: var(--cheese-brown);
    background: var(--cheese-soft);
    font-size: 27px;
}

.group-empty-state strong {
    color: var(--text);
    font-size: 16px;
}

.group-empty-state p {
    margin: 0;
    font-size: 12px;
}

.group-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.group-detail-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cheese-deep);
    font-size: 11px;
    font-weight: 800;
}

.group-detail-header h3 {
    margin: 9px 0 7px;
    color: var(--text);
    font-size: 24px;
}

.group-detail-header p {
    max-width: 520px;
    margin: 0;
    color: var(--gray-500);
    font-size: 12px;
    line-height: 1.65;
}

.group-detail-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.group-detail-actions button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--gray-700);
    background: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.group-detail-actions button:hover {
    border-color: #e7bd45;
    background: #fff9e7;
}

.group-detail-actions .danger {
    color: #b54848;
}

.group-place-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px 0 12px;
    color: var(--text);
    font-size: 13px;
}

.group-place-summary span {
    color: var(--gray-500);
    font-size: 11px;
}

/* mr.eum수정부분 */
/* 저장된 장소 목록만 세로 스크롤 */
.group-place-list {
    display: grid;
    gap: 10px;
    height: 310px;
    overflow-y: auto;
    align-content: start;
    padding-right: 6px;
    
    scrollbar-width: thin;
    scrollbar-color: #d8b85c transparent;
}

/* mr.eum수정부분 */
/* 치즈맵 스타일 스크롤바 */
.group-place-list::-webkit-scrollbar {
    width: 6px;
}

.group-place-list::-webkit-scrollbar-track {
    background: transparent;
}

.group-place-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d8b85c;
}

.group-place-list::-webkit-scrollbar-thumb:hover {
    background: #c99f35;
}

.group-place-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fffdfa;
}

.group-place-card-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--cheese-brown);
    font-size: 20px;
}

.group-place-card > div:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.group-place-card strong {
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.group-place-card span {
    color: var(--gray-500);
    font-size: 10px;
}

.group-place-card button {
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--cheese-brown);
    background: var(--cheese-soft);
    font-size: 10px;
    font-weight: 800;
}

.group-place-empty {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 40px 20px;
    border: 1px dashed var(--line);
    border-radius: 15px;
    color: var(--gray-400);
}

.group-place-empty i {
    font-size: 25px;
}

.group-place-empty p {
    margin: 0;
    font-size: 12px;
}

.group-list-empty {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 30px 10px;
    color: var(--gray-400);
    text-align: center;
}

.group-list-empty i {
    font-size: 25px;
}

.group-list-empty p {
    margin: 0;
    font-size: 11px;
}

.group-form-modal,
.shared-group-modal {
    width: min(600px, calc(100vw - 36px));
    max-height: calc(100vh - 36px);
    padding: 28px;
    overflow-y: auto;
    border-radius: 22px;
}

.group-form-heading {
    margin-bottom: 21px;
}

.group-form-modal form,
.shared-group-modal form {
    display: grid;
    gap: 15px;
}

.group-form-modal label,
.shared-group-modal label {
    display: grid;
    gap: 7px;
    color: var(--gray-700);
    font-size: 12px;
    font-weight: 800;
}

.group-form-modal em,
.shared-group-modal em {
    color: #d95a4e;
    font-style: normal;
}

.group-form-modal input,
.group-form-modal textarea,
.shared-group-modal input,
.shared-group-modal textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: none;
    color: var(--text);
    background: #ffffff;
    box-sizing: border-box;
    font: inherit;
}

.group-form-modal input:focus,
.group-form-modal textarea:focus,
.shared-group-modal input:focus,
.shared-group-modal textarea:focus {
    border-color: var(--cheese-deep);
    box-shadow: 0 0 0 3px rgba(246, 201, 69, 0.18);
}

.group-place-fieldset {
    margin: 2px 0 0;
    padding: 0;
    border: 0;
}

.group-place-fieldset legend {
    margin-bottom: 9px;
    color: var(--gray-700);
    font-size: 12px;
    font-weight: 800;
}

.group-place-options {
    max-height: 220px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow-y: auto;
    padding: 2px;
}

.group-place-option {
    position: relative;
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 9px !important;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fffdfa;
    cursor: pointer;
}

.group-place-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.group-place-check {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid #d6d1c8;
    border-radius: 7px;
    color: transparent;
    background: #ffffff;
}

.group-place-option input:checked + .group-place-check {
    border-color: var(--cheese-deep);
    color: var(--cheese-brown);
    background: var(--cheese-yellow);
}

.group-place-option > span:last-child {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.group-place-option strong {
    overflow: hidden;
    color: var(--text);
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.group-place-option small {
    color: var(--gray-500);
    font-size: 9px;
}

.group-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.group-form-actions button {
    width: auto;
    min-width: 95px;
}

.secondary-button {
    padding: 11px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--gray-700);
    background: #ffffff;
    font-weight: 800;
}

.shared-group-description {
    margin-bottom: 20px;
}

.shared-group-submit {
    margin-top: 4px;
}

body.dark .group-modal-header {
    background:
        linear-gradient(
            135deg,
            #2d2a24 0%,
            #383022 100%
        );
}

body.dark .group-list-panel,
body.dark .group-detail-panel,
body.dark .group-place-card,
body.dark .group-list-item:hover,
body.dark .group-form-modal input,
body.dark .group-form-modal textarea,
body.dark .shared-group-modal input,
body.dark .shared-group-modal textarea,
body.dark .group-place-option {
    background: #292722;
}

body.dark .group-list-item.active {
    background: #4a4029;
}

body.dark .group-list-count {
    border-color: rgba(255, 215, 104, 0.28);
    color: #fff1b8;
    background: #3c382f;
}

body.dark .group-list-item.active .group-list-count {
    border-color: rgba(255, 215, 104, 0.42);
    color: #fff5cf;
    background: #5a4d2d;
}

body.dark .group-detail-meta-chip,
body.dark .group-members-section {
    border-color: #4a463d;
    color: #e8e2d4;
    background: #292722;
}

body.dark .group-member-chip {
    border-color: #4a463d;
    color: #e8e2d4;
    background: #34312b;
}

body.dark .group-members-heading strong {
    color: #f3efe6;
}

body.dark .group-members-heading span {
    color: #b8b0a2;
}

body.dark .group-list-icon,
body.dark .group-detail-actions button,
body.dark .secondary-button {
    background: #34312b;
}

@media (max-width: 760px) {
    .group-modal {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

    .group-modal-header {
        align-items: flex-start;
        padding: 22px 20px 18px;
    }

    .group-modal-header p {
        display: none;
    }

    .group-layout {
        grid-template-columns: 1fr;
        max-height: calc(100vh - 150px);
    }

    .group-list-panel {
        max-height: 210px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .group-detail-panel {
        padding: 20px;
    }

    .group-detail-header {
        display: grid;
    }

    .group-detail-actions {
        justify-content: flex-start;
    }

    .group-place-options {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   Google Maps POI palette reference
===================================================== */
:root {
    --poi-attraction: #d6a62d;
    --poi-business: #df8647;
    --poi-medical: #d75a5a;
    --poi-school: #7768b8;
    --poi-government: #607987;
    --poi-worship: #9a6f4d;
    --poi-sports: #3d8bbd;
    --poi-park: #43975b;
    --poi-transit: #178c9d;
}


/* =====================================================
   그룹 모달 버튼 색상 보정
===================================================== */

/* + 새 그룹 */
.group-modal-header .group-create-open {
    width: auto;
    min-width: 118px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 17px;
    border: 1px solid var(--yellow-dark);
    border-radius: 12px;
    color: var(--brown-dark);
    background: var(--yellow);
    box-shadow: 0 5px 14px rgba(111, 79, 24, 0.12);
    font-size: 13px;
    font-weight: 800;
    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.group-modal-header .group-create-open:hover {
    transform: translateY(-1px);
    border-color: #c88f10;
    background: #f3c13c;
    box-shadow: 0 8px 18px rgba(111, 79, 24, 0.17);
}

.group-modal-header .group-create-open:active {
    transform: translateY(0);
}

/* 지도 보기 */
.group-place-card button[data-group-place] {
    min-width: 70px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #e4c56f;
    border-radius: 11px;
    color: var(--brown);
    background: #fff8df;
    box-shadow: none;
    font-size: 10px;
    font-weight: 800;
    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease;
}

.group-place-card button[data-group-place]:hover {
    transform: translateY(-1px);
    border-color: var(--yellow-dark);
    background: var(--yellow-light);
}

.group-place-card button[data-group-place]:active {
    transform: translateY(0);
}

body.dark .group-modal-header .group-create-open {
    border-color: #c99b2f;
    color: #30230f;
    background: #e8b936;
}

body.dark .group-place-card button[data-group-place] {
    border-color: #716239;
    color: #f1dfad;
    background: #3e3828;
}

body.dark .group-place-card button[data-group-place]:hover {
    border-color: #c99b2f;
    background: #4a4029;
}


/* =====================================================
   그룹 쪽지 기능 — 프론트 시연용
===================================================== */

.group-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 4px;
}

.group-message-open {
    position: relative;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 15px;
    border: 1px solid #e2bf63;
    border-radius: 12px;
    color: #664b22;
    background: #fff8dc;
    font-size: 12px;
    font-weight: 800;
}

.group-message-open:hover {
    border-color: #dfa818;
    background: #ffefad;
}

.group-message-badge {
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    color: #fff;
    background: #d95c3f;
    font-size: 10px;
    line-height: 1;
}

.group-message-badge[hidden] {
    display: none;
}

.group-message-modal {
    width: min(900px, calc(100vw - 32px));
    max-height: min(720px, calc(100vh - 32px));
    overflow: hidden;
}

.group-message-header {
    min-height: 138px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 30px 42px 24px;
    background: linear-gradient(135deg, #fffaf0 0%, #fff4cf 100%);
    border-bottom: 1px solid var(--gray-200);
}

.group-message-header h2,
.message-compose-modal h2 {
    margin: 8px 0 5px;
    color: var(--text);
    font-size: 24px;
}

.group-message-header p {
    margin: 0;
    color: var(--gray-600);
    font-size: 12px;
}

.message-tabs {
    display: flex;
    gap: 8px;
    padding: 14px 24px 0;
    background: var(--white);
}

.message-tabs button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--gray-600);
    background: transparent;
    font-size: 12px;
    font-weight: 800;
}

.message-tabs button span {
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--gray-100);
    font-size: 10px;
}

.message-tabs button.active {
    border-color: #e2bf63;
    color: #5b4026;
    background: #fff3bf;
}

.message-layout {
    height: 500px;
    display: grid;
    grid-template-columns: 310px 1fr;
    background: var(--white);
}

.message-list-panel {
    overflow-y: auto;
    padding: 14px;
    border-right: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.message-list {
    display: grid;
    gap: 8px;
}

.message-list-item {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: var(--text);
    background: var(--white);
    text-align: left;
}

.message-list-item:hover,
.message-list-item.active {
    border-color: #e2bf63;
    background: #fff8dc;
}

.message-list-item.unread {
    font-weight: 800;
}

.message-avatar {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #5b4026;
    background: #ffe7a0;
    font-weight: 800;
}

.message-list-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.message-list-copy strong,
.message-list-copy b,
.message-list-copy small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.message-list-copy strong {
    font-size: 12px;
}

.message-list-copy b {
    color: var(--gray-600);
    font-size: 11px;
    font-weight: 600;
}

.message-list-copy small {
    color: var(--gray-400);
    font-size: 9px;
}

.message-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e09d19;
}

.message-detail-panel {
    min-width: 0;
    overflow-y: auto;
    padding: 32px 36px;
}

.message-empty-state,
.message-list-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--gray-400);
    text-align: center;
}

.message-empty-state i,
.message-list-empty i {
    font-size: 32px;
}

.message-empty-state strong {
    color: var(--text);
}

.message-empty-state p,
.message-list-empty p {
    margin: 0;
    font-size: 12px;
}

.message-detail header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--gray-200);
}

.message-detail header div {
    display: grid;
    gap: 4px;
}

.message-detail header span,
.message-detail time {
    color: var(--gray-400);
    font-size: 10px;
}

.message-detail h3 {
    margin: 24px 0 18px;
    font-size: 20px;
}

.message-detail > p {
    min-height: 180px;
    margin: 0;
    color: var(--gray-600);
    font-size: 13px;
    line-height: 1.9;
}

.message-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 24px;
}

.message-detail-actions button {
    min-width: 90px;
    min-height: 40px;
}

.message-compose-modal {
    width: min(520px, calc(100vw - 28px));
    padding: 34px;
}

.message-compose-modal form {
    display: grid;
    gap: 15px;
    margin-top: 22px;
}

.message-compose-modal label {
    display: grid;
    gap: 7px;
    color: var(--gray-600);
    font-size: 12px;
    font-weight: 800;
}

.message-compose-modal em {
    color: var(--danger);
    font-style: normal;
}

.message-compose-modal input,
.message-compose-modal select,
.message-compose-modal textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    outline: none;
    color: var(--text);
    background: var(--white);
}

.message-compose-modal input:focus,
.message-compose-modal select:focus,
.message-compose-modal textarea:focus {
    border-color: var(--yellow-dark);
    box-shadow: 0 0 0 3px rgba(246, 201, 69, 0.18);
}

body.dark .group-message-header {
    background: linear-gradient(135deg, #2d2a24 0%, #383022 100%);
}

body.dark .group-message-open,
body.dark .message-list-item.active,
body.dark .message-tabs button.active {
    color: #f4dca4;
    background: #4a4029;
}

@media (max-width: 760px) {
    .group-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .group-message-header {
        align-items: flex-start;
        padding: 24px 20px 18px;
    }

    .message-layout {
        height: auto;
        max-height: calc(100vh - 220px);
        grid-template-columns: 1fr;
    }

    .message-list-panel {
        max-height: 220px;
        border-right: 0;
        border-bottom: 1px solid var(--gray-200);
    }

    .message-detail-panel {
        min-height: 300px;
        padding: 24px 20px;
    }
}

/* =====================================================
   쪽지함 치즈맵 디자인 보정
===================================================== */
.group-message-modal {
    border: 1px solid rgba(174, 132, 56, 0.18);
    border-radius: 26px;
    background: #fffdf7;
    box-shadow: 0 28px 70px rgba(72, 52, 25, 0.22);
}

.group-message-header {
    min-height: 142px;
    padding: 32px 42px 26px;
    background:
        radial-gradient(circle at 91% 18%, rgba(246, 201, 69, 0.22) 0 34px, transparent 35px),
        radial-gradient(circle at 84% 72%, rgba(239, 146, 69, 0.14) 0 18px, transparent 19px),
        linear-gradient(135deg, #fffaf0 0%, #fff1b9 100%);
    border-bottom: 1px solid rgba(190, 147, 60, 0.22);
}

.group-message-header .group-eyebrow {
    color: #c56f18;
    letter-spacing: 2.2px;
}

.group-message-header h2 {
    margin-top: 10px;
    color: #3d2b1f;
    font-size: 27px;
    letter-spacing: -0.5px;
}

.group-message-header p {
    color: #7a6a55;
}

.group-message-open,
#openMessageComposeButton {
    min-height: 43px;
    padding: 0 17px;
    border: 1px solid #d9a92b;
    border-radius: 13px;
    color: #4f371f;
    background: #f6c945;
    box-shadow: 0 5px 0 rgba(171, 120, 25, 0.16);
    font-weight: 800;
}

.group-message-open:hover,
#openMessageComposeButton:hover {
    border-color: #c98b19;
    background: #ffd75c;
    transform: translateY(-1px);
}

.message-tabs {
    padding: 16px 24px 10px;
    gap: 9px;
    background: #fffdf7;
}

.message-tabs button {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #7a6f60;
}

.message-tabs button:hover {
    background: #fff7dc;
}

.message-tabs button.active {
    border-color: #e1ad27;
    color: #4c351e;
    background: #ffedaa;
    box-shadow: inset 0 -2px 0 rgba(197, 137, 22, 0.1);
}

.message-tabs button span {
    color: #6c5837;
    background: rgba(255, 255, 255, 0.68);
}

.message-layout {
    background: #fffdf7;
}

.message-list-panel {
    padding: 16px 14px;
    border-right: 1px solid #e8dfcf;
    background: #fbf8f1;
}

.message-list {
    gap: 10px;
}

.message-list-item {
    grid-template-columns: 42px 1fr auto;
    gap: 11px;
    padding: 13px 12px;
    border: 1px solid #ece4d7;
    border-radius: 15px;
    background: #fffefb;
    box-shadow: 0 3px 10px rgba(79, 59, 30, 0.04);
}

/* mr.eum수정부분 */
/* 쪽지 대화목록은 hover 없이 기본 테두리 유지 */
.message-list-item {
    border: 1px solid #d8d0c2;
}

.message-list-item.active {
    border-color: #dda51a;
    background: #ffefb7;
    box-shadow: 0 7px 16px rgba(157, 106, 20, 0.09);
}

.message-avatar {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(210, 157, 39, 0.2);
    border-radius: 14px;
    color: #5a3d20;
    background:
        radial-gradient(circle at 27% 28%, rgba(173, 118, 23, 0.18) 0 3px, transparent 3.5px),
        radial-gradient(circle at 70% 67%, rgba(173, 118, 23, 0.14) 0 2.5px, transparent 3px),
        #ffd96b;
    box-shadow: inset 0 -3px 0 rgba(161, 107, 18, 0.08);
}

.message-list-copy strong {
    color: #3e3024;
    font-size: 12px;
}

.message-list-copy b {
    color: #6d6358;
}

.message-list-copy small {
    color: #9b9081;
}

.message-unread-dot {
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    background: #df8c2f;
    box-shadow: 0 0 0 1px rgba(189, 111, 24, 0.18);
}

.message-detail-panel {
    padding: 34px 38px;
    background: #fffdf9;
}

.message-detail header {
    padding: 0 0 18px;
    border-bottom: 1px solid #e8dfcf;
}

.message-detail header span,
.message-detail time {
    color: #9b8e7d;
}

.message-detail h3 {
    color: #3f3023;
    font-size: 22px;
}

.message-detail > p {
    color: #6f6559;
}

.message-detail-actions button,
.message-compose-modal .secondary-button {
    border: 1px solid #d8cfbf;
    border-radius: 12px;
    color: #635642;
    background: #fffaf0;
}

.message-detail-actions button:hover,
.message-compose-modal .secondary-button:hover {
    border-color: #d9a92b;
    background: #fff1be;
}

.message-detail-actions .primary-button,
.message-compose-modal .primary-button {
    border-color: #d49a17;
    color: #4b341d;
    background: #f6c945;
}

.message-detail-actions .danger-button {
    border-color: transparent;
    color: #c8533d;
    background: transparent;
}

.message-detail-actions .danger-button:hover {
    border-color: #e7b6ad;
    background: #fff1ed;
}

.message-compose-modal {
    border: 1px solid rgba(174, 132, 56, 0.2);
    border-radius: 24px;
    background: #fffdf7;
    box-shadow: 0 26px 64px rgba(72, 52, 25, 0.22);
}

.message-compose-modal h2 {
    color: #3d2b1f;
}

.message-compose-modal input,
.message-compose-modal select,
.message-compose-modal textarea {
    border-color: #ddd3c2;
    background: #fffefb;
}

.message-compose-modal input:focus,
.message-compose-modal select:focus,
.message-compose-modal textarea:focus {
    border-color: #dfa818;
    box-shadow: 0 0 0 4px rgba(246, 201, 69, 0.18);
}

body.dark .group-message-modal,
body.dark .message-layout,
body.dark .message-detail-panel,
body.dark .message-tabs,
body.dark .message-compose-modal {
    background: #292722;
}

body.dark .message-compose-modal {
    border-color: #4d4538;
}

body.dark .message-compose-modal h2 {
    color: #f5f2e9;
}

body.dark .message-compose-modal label {
    color: #e6ddcf;
}

body.dark .message-compose-modal input,
body.dark .message-compose-modal select,
body.dark .message-compose-modal textarea {
    border-color: #4b463c;
    color: #f5f2e9;
    background: #312e28;
}

body.dark .message-compose-modal input::placeholder,
body.dark .message-compose-modal textarea::placeholder {
    color: #aaa69b;
    opacity: 1;
}

body.dark .message-compose-modal input:focus,
body.dark .message-compose-modal select:focus,
body.dark .message-compose-modal textarea:focus {
    border-color: #dfa818;
    box-shadow: 0 0 0 4px rgba(246, 201, 69, 0.18);
}

body.dark .message-compose-modal .secondary-button {
    border-color: #514b40;
    color: #e4ddd2;
    background: #34312b;
}

body.dark .group-message-header {
    background:
        radial-gradient(circle at 91% 18%, rgba(246, 201, 69, 0.12) 0 34px, transparent 35px),
        linear-gradient(135deg, #302d26 0%, #413821 100%);
}

body.dark .message-list-panel {
    border-color: #4b463c;
    background: #24221e;
}

body.dark .message-list-item {
    border-color: #464138;
    background: #302e29;
}

body.dark .message-list-item:hover,
body.dark .message-list-item.active {
    color: #f4dca4;
    border-color: #b88a27;
    background: #4a4029;
}


/* =====================================================
   장소 → 그룹 저장 전용 모달
===================================================== */

.group-place-save-modal {
    width: min(570px, calc(100vw - 28px));
    max-height: min(780px, calc(100vh - 28px));

    padding: 0;

    border: 1px solid rgba(223, 168, 24, 0.14);
    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 28px 70px rgba(43, 35, 23, 0.2);

    overflow: hidden;
}

.group-place-save-modal > .modal-close {
    top: 16px;
    right: 16px;

    z-index: 5;
}

.group-save-step {
    max-height: min(780px, calc(100vh - 28px));

    overflow-y: auto;
}

.group-save-step[hidden] {
    display: none !important;
}

.group-save-heading {
    padding: 30px 30px 20px;
}

.group-save-heading h2 {
    margin: 6px 0 6px;

    color: var(--text);

    font-size: 24px;
    line-height: 1.25;
}

.group-save-heading p {
    margin: 0;

    color: var(--gray-500);

    font-size: 12px;
    line-height: 1.55;
}

.group-save-heading-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 12px;

    padding-right: 70px;
}

.group-save-back {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    margin-top: 3px;

    border: 1px solid var(--line);
    border-radius: 12px;

    color: var(--gray-700);
    background: #ffffff;

    font-size: 19px;
}

.group-save-back:hover {
    border-color: #e8b83f;
    background: #fff9e7;
}

.group-save-place-preview {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    gap: 16px;

    margin: 0 30px;
    padding: 18px;

    border: 1px solid #eee8dc;
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #fffdf8 0%,
            #fff9e8 100%
        );
}

.group-save-place-icon,
.group-save-mini-icon {
    display: grid;
    place-items: center;

    color: #5e4829;
    background: #fff0b4;
}

.group-save-place-icon {
    width: 62px;
    height: 62px;

    border-radius: 18px;

    font-size: 28px;
}

.group-save-mini-icon {
    width: 44px;
    height: 44px;

    border-radius: 13px;

    font-size: 21px;
}

/* 카테고리별 아이콘 톤 */
.group-save-place-icon[data-category="food"],
.group-save-mini-icon[data-category="food"],
.group-place-card-icon[data-category="food"] {
    background: #ffe0aa;
}

.group-save-place-icon[data-category="cafe"],
.group-save-mini-icon[data-category="cafe"],
.group-place-card-icon[data-category="cafe"] {
    background: #efc88f;
}

.group-save-place-icon[data-category="museum"],
.group-save-mini-icon[data-category="museum"],
.group-place-card-icon[data-category="museum"] {
    background: #ddd5ff;
}

.group-save-place-icon[data-category="transit"],
.group-save-mini-icon[data-category="transit"],
.group-place-card-icon[data-category="transit"] {
    background: #d8e7ff;
}

.group-save-place-icon[data-category="park"],
.group-save-mini-icon[data-category="park"],
.group-place-card-icon[data-category="park"] {
    background: #cde7c4;
}

.group-save-place-icon[data-category="education"],
.group-save-mini-icon[data-category="education"],
.group-place-card-icon[data-category="education"] {
    background: #d4ecff;
}

.group-save-place-icon[data-category="shopping"],
.group-save-mini-icon[data-category="shopping"],
.group-place-card-icon[data-category="shopping"] {
    background: #ffd9e4;
}

.group-save-place-icon[data-category="hotel"],
.group-save-mini-icon[data-category="hotel"],
.group-place-card-icon[data-category="hotel"] {
    background: #d7e0ff;
}

.group-save-place-icon[data-category="medical"],
.group-save-mini-icon[data-category="medical"],
.group-place-card-icon[data-category="medical"] {
    background: #ffd9d4;
}

.group-save-place-copy {
    min-width: 0;
}

.group-save-category {
    display: inline-flex;
    align-items: center;

    min-height: 24px;

    padding: 0 9px;

    border-radius: 999px;

    color: #765014;
    background: rgba(246, 201, 69, 0.24);

    font-size: 10px;
    font-weight: 900;
}

.group-save-place-copy h3 {
    margin: 8px 0 7px;

    overflow: hidden;

    color: var(--text);

    font-size: 19px;
    line-height: 1.35;

    text-overflow: ellipsis;
}

.group-save-place-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 12px;

    color: var(--gray-500);

    font-size: 11px;
}

.group-save-place-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.group-save-place-meta .ti-star-filled {
    color: #e4a617;
}

.group-save-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;

    padding: 16px 30px 0;
}

.group-save-info-item {
    min-width: 0;

    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 9px;

    padding: 11px 12px;

    border: 1px solid #eee9df;
    border-radius: 14px;

    background: #fbfaf7;
}

.group-save-info-item.wide {
    grid-column: 1 / -1;
}

.group-save-info-item > i {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: #775824;
    background: #fff0b4;

    font-size: 16px;
}

.group-save-info-item > div {
    min-width: 0;

    display: grid;
    gap: 3px;
}

.group-save-info-item small {
    color: var(--gray-400);

    font-size: 9px;
    font-weight: 800;
}

.group-save-info-item strong {
    overflow: hidden;

    color: var(--gray-700);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;

    text-overflow: ellipsis;
}

.group-save-memo-field {
    position: relative;

    display: grid;
    gap: 8px;

    margin: 18px 30px 0;
}

.group-save-memo-field > span {
    color: var(--gray-700);

    font-size: 12px;
    font-weight: 900;
}

.group-save-memo-field textarea {
    width: 100%;
    min-height: 96px;

    padding: 14px 14px 28px;

    border: 1px solid #ded8ce;
    border-radius: 15px;

    outline: none;

    color: var(--text);
    background: #ffffff;

    font: inherit;
    font-size: 12px;
    line-height: 1.55;

    resize: vertical;

    box-sizing: border-box;

    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}

.group-save-memo-field textarea:focus {
    border-color: #e8b024;

    box-shadow:
        0 0 0 3px rgba(246, 201, 69, 0.17);
}

.group-save-memo-field > small {
    position: absolute;

    right: 12px;
    bottom: 9px;

    color: var(--gray-400);

    font-size: 9px;
}

.group-save-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    margin-top: 22px;
    padding: 16px 30px 24px;

    border-top: 1px solid #f0ece4;

    background: #fffdfa;
}

.group-save-primary,
.group-save-secondary {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 0 17px;

    border-radius: 12px;

    font-size: 12px;
    font-weight: 900;
}

.group-save-secondary {
    border: 1px solid var(--line);

    color: var(--gray-700);
    background: #ffffff;
}

.group-save-primary {
    min-width: 185px;

    border: 1px solid #dfaa18;

    color: #4b351d;
    background: #f6c945;

    box-shadow:
        0 5px 12px rgba(223, 168, 24, 0.18);
}

.group-save-primary:hover:not(:disabled) {
    transform: translateY(-1px);

    background: #ffd45a;
}

.group-save-primary:disabled {
    opacity: 0.48;

    cursor: not-allowed;

    box-shadow: none;
}

.group-save-selected-place {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 11px;

    margin: 0 30px 18px;
    padding: 12px 14px;

    border: 1px solid #efe5c6;
    border-radius: 15px;

    background: #fffaf0;
}

.group-save-selected-place > div {
    min-width: 0;

    display: grid;
    gap: 4px;
}

.group-save-selected-place small {
    color: #a17a32;

    font-size: 9px;
    font-weight: 900;
}

.group-save-selected-place strong {
    overflow: hidden;

    color: var(--text);

    font-size: 12px;

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

.group-save-group-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 0 30px 10px;
}

.group-save-group-toolbar strong {
    color: var(--text);

    font-size: 13px;
}

.group-save-group-toolbar button {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 7px 10px;

    border: 1px solid #e2c160;
    border-radius: 10px;

    color: #765014;
    background: #fff9df;

    font-size: 10px;
    font-weight: 900;
}

.group-save-group-list {
    display: grid;
    gap: 8px;

    max-height: 330px;

    margin: 0 30px;
    padding: 2px;

    overflow-y: auto;
}

.group-save-group-option {
    position: relative;

    display: grid;
    grid-template-columns: 26px 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;

    min-height: 66px;

    padding: 10px 12px;

    border: 1px solid #ece6da;
    border-radius: 15px;

    background: #ffffff;

    cursor: pointer;

    transition:
        border-color 0.16s ease,
        background 0.16s ease,
        transform 0.16s ease;
}

.group-save-group-option:hover {
    transform: translateY(-1px);

    border-color: #e8c55b;
    background: #fffdf7;
}

.group-save-group-option.active {
    border-color: #e5b52f;
    background: #fff5c9;
}

.group-save-group-option input {
    position: absolute;

    opacity: 0;
    pointer-events: none;
}

.group-save-radio {
    width: 24px;
    height: 24px;

    display: grid;
    place-items: center;

    border: 1px solid #d8d1c6;
    border-radius: 50%;

    color: transparent;
    background: #ffffff;

    font-size: 14px;
}

.group-save-group-option.active .group-save-radio {
    border-color: #dba817;

    color: #594018;
    background: #f6c945;
}

.group-save-group-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: #755626;
    background: #fff3bf;

    font-size: 19px;
}

.group-save-group-copy {
    min-width: 0;

    display: grid;
    gap: 5px;
}

.group-save-group-copy strong {
    overflow: hidden;

    color: var(--text);

    font-size: 12px;

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

.group-save-group-copy small {
    color: var(--gray-500);

    font-size: 9px;
}

.group-save-loading,
.group-save-empty {
    min-height: 190px;

    display: grid;
    place-content: center;
    justify-items: center;
    gap: 7px;

    padding: 24px;

    color: var(--gray-500);

    text-align: center;
}

.group-save-empty > i {
    font-size: 30px;

    color: #a17a32;
}

.group-save-empty strong {
    color: var(--text);

    font-size: 13px;
}

.group-save-empty p {
    max-width: 300px;

    margin: 0;

    font-size: 10px;
    line-height: 1.5;
}

.group-save-button-spinner {
    width: 13px;
    height: 13px;

    border: 2px solid rgba(74, 53, 29, 0.25);
    border-top-color: #4a351d;
    border-radius: 50%;

    animation:
        groupSaveSpin
        0.7s
        linear
        infinite;
}

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


/* 내 그룹 장소 카드 메모 */

.group-place-card > div:nth-child(2) {
    align-content: center;
}

.group-place-card-memo {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    overflow: hidden;

    margin-top: 2px;

    color: #9a6e20;

    font-size: 9px;
    line-height: 1.35;

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


/* 다크모드 */

body.dark .group-place-save-modal {
    border-color: #49443b;
    background: #211f1a;
}

body.dark .group-save-place-preview,
body.dark .group-save-selected-place,
body.dark .group-save-info-item,
body.dark .group-save-group-option {
    border-color: #49443b;
    background: #29261f;
}

body.dark .group-save-group-option.active {
    border-color: #b38a2a;
    background: #3b321c;
}

body.dark .group-save-memo-field textarea,
body.dark .group-save-secondary,
body.dark .group-save-back {
    color: #fff4cf;
    border-color: #4d483f;
    background: #29261f;
}

body.dark .group-save-footer {
    border-color: #454038;
    background: #25221c;
}

body.dark .group-save-info-item strong,
body.dark .group-save-selected-place strong,
body.dark .group-save-group-copy strong,
body.dark .group-save-heading h2,
body.dark .group-save-memo-field > span {
    color: #fff4cf;
}


/* 모바일 */

@media (max-width: 620px) {
    .group-place-save-modal {
        width: calc(100vw - 18px);

        border-radius: 20px;
    }

    .group-save-heading {
        padding:
            26px
            20px
            17px;
    }

    .group-save-place-preview {
        grid-template-columns:
            52px
            minmax(0, 1fr);

        margin:
            0
            20px;

        padding: 14px;
    }

    .group-save-place-icon {
        width: 52px;
        height: 52px;

        border-radius: 15px;

        font-size: 23px;
    }

    .group-save-info-grid {
        grid-template-columns: 1fr;

        padding:
            14px
            20px
            0;
    }

    .group-save-info-item.wide {
        grid-column: auto;
    }

    .group-save-memo-field {
        margin:
            16px
            20px
            0;
    }

    .group-save-footer {
        padding:
            14px
            20px
            20px;
    }

    .group-save-primary {
        flex: 1;
        min-width: 0;
    }

    .group-save-selected-place,
    .group-save-group-list {
        margin-left: 20px;
        margin-right: 20px;
    }

    .group-save-group-toolbar {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* =====================================================
   실제 백엔드 쪽지 대화 표시
===================================================== */
.message-conversation-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
    max-height: 430px;
    overflow-y: auto;
    padding: 4px 2px 12px;
}

/* mr.eum수정부분 */
/* 쪽지 대화창 스크롤바 - 치즈맵 스타일 */
.message-conversation-thread {
    scrollbar-width: thin;
    scrollbar-color: #c9a45a transparent;
}

.message-conversation-thread::-webkit-scrollbar {
    width: 6px;
}

.message-conversation-thread::-webkit-scrollbar-track {
    background: transparent;
}

.message-conversation-thread::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c9a45a;
}

.message-conversation-thread::-webkit-scrollbar-thumb:hover {
    background: #a98232;
}

.message-conversation-row {
    display: flex;
}

.message-conversation-row.mine {
    justify-content: flex-end;
}

.message-conversation-row.theirs {
    justify-content: flex-start;
}

.message-conversation-bubble {
    width: min(82%, 430px);
    padding: 12px 14px;
    border: 1px solid #ece4d5;
    border-radius: 15px;
    background: #ffffff;
}

.message-conversation-row.mine .message-conversation-bubble {
    border-color: #efd98a;
    background: #fff6cf;
}

.message-conversation-bubble strong {
    display: block;
    margin-bottom: 6px;
    color: var(--brown-dark);
    font-size: 12px;
}

.message-conversation-bubble p {
    margin: 0;
    color: var(--text);
    font-size: 12px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.message-conversation-bubble small {
    display: block;
    margin-top: 8px;
    color: var(--gray-500);
    font-size: 9px;
}

/* =====================================================
   그룹 생성 / 공유 저장 폼 보강 스타일
   - 브라우저 기본 datetime/textarea/button 외형 제거
   - 장소 목록 가로 스크롤 방지
===================================================== */

.group-form-modal,
.shared-group-modal {
    position: relative;
    border: 1px solid rgba(178, 140, 64, 0.18);
    background: #fffdf8;
    box-shadow: 0 24px 70px rgba(70, 52, 29, 0.22);
}

.group-form-heading,
.shared-group-modal > .group-eyebrow,
.shared-group-modal > h2,
.shared-group-modal > .shared-group-description {
    position: relative;
    z-index: 1;
}

.group-form-modal form,
.shared-group-modal form {
    gap: 18px;
}

.group-form-modal label,
.shared-group-modal label,
.group-place-fieldset legend {
    color: #4a4034;
    font-size: 12px;
    font-weight: 800;
}

.group-form-modal input:not([type="hidden"]),
.group-form-modal textarea,
.shared-group-modal input,
.shared-group-modal textarea {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid #ddd3c2;
    border-radius: 13px;
    outline: none;
    color: #332c24;
    background: #fffefb;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.group-form-modal input::placeholder,
.group-form-modal textarea::placeholder,
.shared-group-modal input::placeholder,
.shared-group-modal textarea::placeholder {
    color: #9d958a;
    opacity: 1;
}

.group-form-modal input:not([type="hidden"]):hover,
.group-form-modal textarea:hover,
.shared-group-modal input:hover,
.shared-group-modal textarea:hover {
    border-color: #cdbd9f;
}

.group-form-modal input:not([type="hidden"]):focus,
.group-form-modal textarea:focus,
.shared-group-modal input:focus,
.shared-group-modal textarea:focus {
    border-color: #dfa818;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(246, 201, 69, 0.18);
}

.group-form-modal input[type="datetime-local"],
.shared-group-modal input[type="datetime-local"] {
    display: block;
    color-scheme: light;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
}

.group-form-modal input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.shared-group-modal input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    width: 18px;
    height: 18px;
    padding: 5px;
    margin-right: -4px;
    border-radius: 8px;
    cursor: pointer;
    opacity: .72;
}

.group-form-modal textarea,
.shared-group-modal textarea {
    min-height: 92px;
    resize: vertical;
}

.group-place-options {
    width: 100%;
    max-height: 220px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 3px 5px 3px 3px;
    scrollbar-gutter: stable;
}

.group-place-option {
    min-width: 0;
    overflow: hidden;
    border-color: #ece3d4;
    background: #fffefb;
    box-shadow: 0 2px 7px rgba(73, 54, 29, 0.035);
}

.group-place-option:hover {
    border-color: #e3c564;
    background: #fffaf0;
}

.group-place-option:has(input:checked) {
    border-color: #dfad26;
    background: #fff6cf;
    box-shadow: 0 0 0 2px rgba(246, 201, 69, 0.13);
}

.group-form-actions {
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 3px;
    padding-top: 17px;
    border-top: 1px solid #eee5d6;
}

.group-form-actions .secondary-button,
.group-form-actions .primary-button,
.shared-group-submit {
    min-height: 46px;
    padding: 0 20px;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 800;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.group-form-actions .secondary-button {
    border: 1px solid #ddd3c2;
    color: #62584b;
    background: #fffefb;
}

.group-form-actions .secondary-button:hover {
    border-color: #cdbb9a;
    background: #fff8e8;
}

.group-form-actions .primary-button,
.shared-group-submit {
    border: 1px solid #d69e16;
    color: #4b351d;
    background: linear-gradient(180deg, #f9d45e 0%, #f6c945 100%);
    box-shadow: 0 7px 16px rgba(196, 143, 18, 0.18);
}

.group-form-actions .primary-button:hover,
.shared-group-submit:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #ffdc68 0%, #f6c945 100%);
    box-shadow: 0 9px 20px rgba(196, 143, 18, 0.24);
}

.group-form-actions .primary-button:active,
.shared-group-submit:active,
.group-form-actions .secondary-button:active {
    transform: translateY(0);
}

.shared-group-submit {
    width: 100%;
    margin-top: 2px;
}

body.dark .group-form-modal,
body.dark .shared-group-modal {
    border-color: #4d4538;
    background: #292722;
}

body.dark .group-form-modal label,
body.dark .shared-group-modal label,
body.dark .group-place-fieldset legend {
    color: #e6ddcf;
}

body.dark .group-form-modal input:not([type="hidden"]),
body.dark .group-form-modal textarea,
body.dark .shared-group-modal input,
body.dark .shared-group-modal textarea,
body.dark .group-place-option {
    border-color: #4b463c;
    color: #f5f2e9;
    background: #312e28;
}

body.dark .group-form-actions {
    border-top-color: #49443b;
}

body.dark .group-form-actions .secondary-button {
    border-color: #514b40;
    color: #e4ddd2;
    background: #34312b;
}

@media (max-width: 640px) {
    .group-form-modal,
    .shared-group-modal {
        width: calc(100vw - 18px);
        padding: 22px 18px;
        border-radius: 20px;
    }

    .group-place-options {
        grid-template-columns: 1fr;
        max-height: 260px;
    }

    .group-form-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .group-form-actions button {
        width: 100%;
    }
}

/* POI 상세에서 새 그룹을 만들 때: 선택한 장소 1개만 정보 카드로 표시 */
.group-place-options--single {
    display: block;
    max-height: none;
    overflow: visible;
    padding: 0;
}

.group-create-selected-place {
    display: grid;
    gap: 12px;
}

.group-create-place-hero {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
    border: 1px solid #eadfc8;
    border-radius: 15px;
    background: linear-gradient(135deg, #fffdf8 0%, #fff8e8 100%);
}

.group-create-place-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #715b2f;
    background: #fff0b8;
    font-size: 23px;
}

.group-create-place-icon.category-tour,
.group-create-place-icon.category-culture {
    color: #61517d;
    background: #e9ddff;
}

.group-create-place-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.group-create-place-category {
    width: max-content;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    color: #6c5328;
    background: #fff1bd;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.group-create-place-copy > strong {
    overflow: hidden;
    color: #302820;
    font-size: 17px;
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.group-create-place-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #5e5549;
    font-size: 11px;
    font-weight: 700;
}

.group-create-place-rating .ti-star-filled {
    margin-right: 3px;
    color: #e6a500;
}

.group-create-place-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.group-create-place-detail {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 10px 11px;
    border: 1px solid #ece3d5;
    border-radius: 12px;
    background: #fffefb;
}

.group-create-place-detail.wide {
    grid-column: 1 / -1;
}

.group-create-place-detail-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #6d572b;
    background: #fff1bc;
    font-size: 17px;
}

.group-create-place-detail-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.group-create-place-detail-copy small {
    color: #918574;
    font-size: 9px;
    font-weight: 800;
}

.group-create-place-detail-copy strong {
    overflow-wrap: anywhere;
    color: #3c3329;
    font-size: 11px;
    line-height: 1.4;
}

body.dark .group-create-place-hero,
body.dark .group-create-place-detail {
    border-color: rgba(255,255,255,.09);
    background: #26231e;
}

body.dark .group-create-place-copy > strong,
body.dark .group-create-place-detail-copy strong {
    color: #f5efe4;
}

body.dark .group-create-place-rating,
body.dark .group-create-place-detail-copy small {
    color: #b9afa0;
}

body.dark .group-create-place-category,
body.dark .group-create-place-icon,
body.dark .group-create-place-detail-icon {
    color: #f0c75d;
    background: rgba(246, 201, 69, .14);
}

@media (max-width: 640px) {
    .group-create-place-details {
        grid-template-columns: 1fr;
    }

    .group-create-place-detail.wide {
        grid-column: auto;
    }
}


/* 쪽지 수정/삭제 */
.message-bubble-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.message-bubble-footer small {
    margin-top: 0;
}

.message-bubble-actions {
    display: inline-flex;
    gap: 5px;
    flex: 0 0 auto;
}

.message-mini-button {
    min-height: 26px;
    padding: 4px 9px;
    border: 1px solid #dfd6c7;
    border-radius: 8px;
    color: #665946;
    background: rgba(255, 255, 255, 0.72);
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}

.message-mini-button:hover {
    border-color: #d9a92b;
    background: #fff3c8;
}

.message-mini-button.primary {
    border-color: #d49a17;
    color: #47331d;
    background: #f6c945;
}

.message-mini-button.danger {
    color: #b84c3a;
}

.message-mini-button.danger:hover {
    border-color: #e3aaa0;
    background: #fff0ed;
}

.message-conversation-bubble.is-editing {
    width: min(90%, 470px);
    background: #fffdf7;
}

.message-translation {
    margin-top: 8px;
    margin-bottom: 2px;
}

.message-conversation-bubble .place-review-translate-toggle {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 11px;
}

.message-conversation-bubble .place-review-translated-box {
    margin-top: 8px;
}

.message-conversation-row.mine .place-review-translated-box {
    border-color: #efd98a;
    background: #fffbeb;
}

.message-source-text {
    display: none;
}

.message-inline-edit {
    display: grid;
    gap: 10px;
}

.message-inline-edit label {
    display: grid;
    gap: 5px;
}

.message-inline-edit label > span {
    color: #8b7b68;
    font-size: 9px;
    font-weight: 800;
}

.message-inline-edit input,
.message-inline-edit textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #ded4c4;
    border-radius: 9px;
    outline: none;
    color: #3f3428;
    background: #fff;
    font: inherit;
    font-size: 11px;
}

.message-inline-edit textarea {
    min-height: 86px;
    resize: vertical;
}

.message-inline-edit input:focus,
.message-inline-edit textarea:focus {
    border-color: #d9a92b;
    box-shadow: 0 0 0 3px rgba(246, 201, 69, 0.16);
}

.message-inline-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

body.dark .message-conversation-bubble,
body.dark .message-conversation-bubble.is-editing {
    border-color: var(--gray-200);
    background: var(--white);
}

body.dark .message-conversation-row.mine .message-conversation-bubble {
    border-color: rgba(246, 201, 69, 0.42);
    background: rgba(246, 201, 69, 0.13);
}

body.dark .message-inline-edit input,
body.dark .message-inline-edit textarea,
body.dark .message-mini-button {
    color: var(--text);
    border-color: var(--gray-200);
    background: var(--gray-50);
}

body.dark .message-conversation-row.mine .place-review-translated-box {
    border-color: rgba(246, 201, 69, 0.35);
    background: rgba(246, 201, 69, 0.08);
}

body.dark .message-conversation-bubble .place-review-translate-toggle {
    border-color: #4b463d;
    background: #2b2924;
    color: #ddd4c4;
}

body.dark .message-conversation-bubble .place-review-translate-toggle:hover {
    border-color: #8f7436;
    background: #373126;
}


/* =====================================================
   새 그룹 장소 선택
   - 기존 그룹에서 가져오기
   - Google Places 검색
===================================================== */

.group-form-modal {
    width: min(640px, calc(100vw - 36px));
}

.group-place-options {
    max-height: none;
    display: block;
    overflow: visible;
    padding: 0;
}

.group-place-options.group-place-options--single {
    display: block;
}

.group-picker {
    display: grid;
    gap: 14px;
}

.group-picker-section {
    display: grid;
    gap: 10px;
}

.group-picker-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.group-picker-section-heading > div {
    display: grid;
    gap: 3px;
}

.group-picker-section-heading strong {
    color: var(--text);
    font-size: 12px;
}

.group-picker-section-heading small {
    color: var(--gray-500);
    font-size: 10px;
    font-weight: 500;
}

.group-picker-existing-groups {
    max-height: 235px;
    display: grid;
    gap: 8px;
    overflow-y: auto;
    padding: 1px 3px 1px 1px;
}

.group-picker-existing-group {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fffdfa;
}

.group-picker-existing-group-toggle {
    width: 100%;
    min-height: 54px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 0;
    color: var(--text);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.group-picker-existing-group-toggle:hover {
    background: #fff8df;
}

.group-picker-existing-group-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--cheese-brown);
    background: #fff0b0;
    font-size: 17px;
}

.group-picker-existing-group-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.group-picker-existing-group-copy strong {
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.group-picker-existing-group-copy small {
    color: var(--gray-500);
    font-size: 10px;
    font-weight: 600;
}

.group-picker-chevron {
    color: var(--gray-500);
    transition: transform .18s ease;
}

.group-picker-existing-group-toggle[aria-expanded="true"]
.group-picker-chevron {
    transform: rotate(180deg);
}

/* mr.eum수정부분 */
/* 펼쳐진 그룹의 장소 목록만 독립적으로 스크롤 */
.group-picker-existing-places {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    max-height: 150px;
    overflow-y: auto;
    padding: 0 10px 10px;
    border-top: 1px solid #f2ecdf;

    scrollbar-width: thin;
    scrollbar-color: #d8b85c transparent;
}

/* mr.eum수정부분 */
/* 기존 그룹 내부 장소 목록 치즈맵 스크롤바 */
.group-picker-existing-places::-webkit-scrollbar {
    width: 5px;
}

.group-picker-existing-places::-webkit-scrollbar-track {
    background: transparent;
}

.group-picker-existing-places::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d8b85c;
}

.group-picker-existing-places::-webkit-scrollbar-thumb:hover {
    background: #c99f35;
}

.group-picker-existing-places[hidden] {
    display: none;
}

.group-picker-existing-places .group-place-option {
    margin-top: 8px;
}

.group-picker-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gray-400);
    font-size: 9px;
    font-weight: 800;
}

.group-picker-divider::before,
.group-picker-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--line);
}

.group-picker-search-bar {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 5px 6px 5px 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
}

.group-picker-search-bar:focus-within {
    border-color: var(--cheese-deep);
    box-shadow: 0 0 0 3px rgba(246, 201, 69, .18);
}

.group-picker-search-bar > i {
    color: #9b8662;
    font-size: 17px;
}

.group-picker-search-bar input {
    height: 38px;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: 12px;
}

.group-picker-search-bar button {
    min-width: 62px;
    height: 38px;
    padding: 0 13px;
    border: 1px solid #e2b747;
    border-radius: 10px;
    color: #5d421c;
    background: var(--cheese-yellow);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.group-picker-search-bar button:hover {
    background: #ffd85f;
}

/* mr.eum수정부분 */
/* 장소 검색 결과 영역만 독립적으로 스크롤 */
.group-picker-search-results {
    max-height: 225px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1px 6px 1px 1px;

    scrollbar-width: thin;
    scrollbar-color: #d8b85c transparent;
}

/* mr.eum수정부분 */
/* 장소 검색 결과 치즈맵 스크롤바 */
.group-picker-search-results::-webkit-scrollbar {
    width: 5px;
}

.group-picker-search-results::-webkit-scrollbar-track {
    background: transparent;
}

.group-picker-search-results::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d8b85c;
}

.group-picker-search-results::-webkit-scrollbar-thumb:hover {
    background: #c99f35;
}

.group-picker-search-empty,
.group-picker-empty-groups {
    grid-column: 1 / -1;
    padding: 18px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    color: var(--gray-500);
    background: #fffdfa;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
}

.group-picker-search-empty.error {
    color: #b84f42;
}

.group-picker-place-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.group-picker-place-copy strong {
    overflow: hidden;
    color: var(--text);
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.group-picker-place-copy small {
    overflow: hidden;
    color: var(--gray-500);
    font-size: 9px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.group-place-option.selected {
    border-color: #e3bb51;
    background: #fff8df;
}

body.dark .group-picker-existing-group,
body.dark .group-picker-search-bar,
body.dark .group-picker-search-empty,
body.dark .group-picker-empty-groups {
    background: #292722;
}

body.dark .group-picker-existing-group-toggle:hover,
body.dark .group-place-option.selected {
    background: #4a4029;
}

@media (max-width: 760px) {
    .group-picker-existing-places,
    .group-picker-search-results {
        grid-template-columns: 1fr;
    }
}



/* =====================================================
   쪽지함 UI - 그룹 모달과 동일한 레이아웃/톤으로 통일
===================================================== */

.group-message-modal {
    width: min(980px, calc(100vw - 36px)) !important;
    max-height: min(760px, calc(100vh - 36px)) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 60px rgba(54, 42, 24, 0.20) !important;
}

.group-message-header {
    min-height: 0 !important;
    padding: 28px 30px 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    border-bottom: 1px solid var(--line) !important;
    background:
        linear-gradient(
            135deg,
            #fffdf7 0%,
            #fff6d8 100%
        ) !important;
}

.group-message-header .group-eyebrow {
    color: var(--cheese-deep) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.16em !important;
}

.group-message-header h2 {
    margin: 5px 0 4px !important;
    color: var(--text) !important;
    font-size: 25px !important;
    letter-spacing: normal !important;
}

.group-message-header p {
    margin: 0 !important;
    color: var(--gray-500) !important;
    font-size: 13px !important;
}

#openMessageComposeButton {
    width: auto !important;
    min-width: 118px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    border: 1px solid #d49a17 !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    color: #4b341d !important;
    background: var(--yellow) !important;
    box-shadow: none !important;
    font-weight: 800 !important;
}

#openMessageComposeButton:hover {
    border-color: #c98b19 !important;
    background: #ffd75c !important;
    transform: translateY(-1px);
}

.message-detail [data-conversation-reply] {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 6px 9px !important;
    border: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: var(--brown-dark) !important;
    background: var(--yellow-light) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.message-detail [data-conversation-reply]:hover {
    border-color: transparent !important;
    background: #ffe9a5 !important;
    transform: none;
}

body.dark .message-detail [data-conversation-reply] {
    border-color: #5d574b !important;
    color: #eee7db !important;
    background: #34312b !important;
}

body.dark .message-detail [data-conversation-reply]:hover {
    border-color: #d6ad43 !important;
    color: #fff5d4 !important;
    background: #403b31 !important;
}

/* 기존 상단 탭은 사이드바 제목으로 대체 */
.message-tabs {
    display: none !important;
}

.message-tab-compat {
    display: none !important;
}

.message-layout {
    display: grid !important;
    grid-template-columns: 290px minmax(0, 1fr) !important;
    min-height: 520px !important;
    max-height: calc(100vh - 190px) !important;
    background: #ffffff !important;
}

.message-list-panel {
    min-width: 0 !important;
    padding: 20px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    border-right: 1px solid var(--line) !important;
    background: #fbfaf7 !important;
}

.message-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 12px;
    color: var(--text);
    font-size: 13px;
}

.message-panel-title strong {
    font-size: 13px;
    font-weight: 800;
}

.message-panel-title > span {
    display: grid;
    min-width: 25px;
    height: 25px;
    place-items: center;
    padding: 0 7px;
    border-radius: 999px;
    color: var(--cheese-brown);
    background: var(--cheese-soft);
    font-size: 11px;
    font-weight: 800;
}

.message-list {
    display: grid !important;
    gap: 8px !important;
    overflow-y: auto !important;
}

.message-list-item {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px !important;
    border: 1px solid transparent !important;
    border-radius: 15px !important;
    color: var(--text) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
    transition:
        border-color 0.16s ease,
        background 0.16s ease,
        transform 0.16s ease !important;
}

.message-list-item:hover {
    border-color: var(--line) !important;
    background: #ffffff;
}

.message-list-item.active {
    border-color: #edc252 !important;
    background: #fff2ba !important;
    box-shadow: none !important;
}

.message-avatar {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: var(--cheese-brown) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.message-list-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
}

.message-list-copy strong {
    overflow: hidden !important;
    color: var(--text) !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.message-list-copy b,
.message-list-copy small {
    overflow: hidden !important;
    color: var(--gray-500) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.message-detail-panel {
    min-width: 0 !important;
    overflow-y: auto !important;
    padding: 26px 28px !important;
    background: #ffffff !important;
}
/* mr.eum수정부분 */
/* 대화 상세 영역 전체를 입력창까지 세로로 사용 */
.message-detail {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* mr.eum수정부분 */
/* 메시지 영역만 남은 공간을 사용하고 입력창은 최하단으로 이동 */
.message-conversation-thread {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
}

.message-empty-state {
    min-height: 430px !important;
    display: grid !important;
    place-content: center !important;
    justify-items: center !important;
    gap: 8px !important;
    color: var(--gray-500) !important;
    text-align: center !important;
}

.message-empty-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 5px;
    border-radius: 18px;
    color: var(--cheese-brown);
    background: var(--cheese-soft);
    font-size: 27px;
}

.message-empty-state > i {
    display: none !important;
}

.message-empty-state strong {
    color: var(--text) !important;
    font-size: 17px !important;
}

.message-empty-state p {
    margin: 0 !important;
    color: var(--gray-500) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

.message-list-empty {
    min-height: 180px !important;
    display: grid !important;
    place-content: center !important;
    justify-items: center !important;
    gap: 7px !important;
    color: var(--gray-500) !important;
    text-align: center !important;
}

.message-list-empty i {
    color: #aaa59a !important;
    font-size: 28px !important;
}

.message-list-empty p {
    margin: 0 !important;
    color: var(--gray-500) !important;
    font-size: 11px !important;
}

body.dark .group-message-modal,
body.dark .message-layout,
body.dark .message-detail-panel {
    background: #2b2924 !important;
}

body.dark .group-message-header {
    border-color: rgba(255,255,255,.10) !important;
    background:
        linear-gradient(
            135deg,
            #302d26 0%,
            #413821 100%
        ) !important;
}

body.dark .message-list-panel {
    border-color: rgba(255,255,255,.10) !important;
    background: #24221e !important;
}

body.dark .message-list-item:hover {
    border-color: var(--yellow-dark) !important;
    color: var(--brown-dark) !important;
}

body.dark .message-list-item.active {
    border-color: #b88a27 !important;
    background: #4a4029 !important;
}

body.dark .message-avatar {
    color: #f1d278 !important;
    background: #34312b !important;
}

body.dark .message-panel-title,
body.dark .message-panel-title strong,
body.dark .message-empty-state strong,
body.dark .message-list-copy strong {
    color: #f2eee4 !important;
}

body.dark .message-empty-icon {
    color: #f1d278 !important;
    background: rgba(246, 201, 69, .12) !important;
}

@media (max-width: 720px) {
    .group-message-header {
        padding: 22px 20px 18px !important;
        align-items: flex-start !important;
    }

    .message-layout {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }

    .message-list-panel {
        max-height: 260px !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--line) !important;
    }

    .message-detail-panel {
        min-height: 330px !important;
    }
}

/* mr.eum수정부분 */
/* 대화목록 프로필 이미지를 원형 영역에 맞게 표시 */
.message-avatar {
    overflow: hidden !important;
}

.message-avatar img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: inherit !important;
}

/* mr.eum수정부분 */
/* 대화방 하단 바로 답장할 수 있는 입력창 */
.message-conversation-compose {
    display: flex !important;
    align-items: flex-end !important;
    gap: 10px !important;
    margin-top: auto !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--line) !important;
}

.message-conversation-compose textarea {
    flex: 1 !important;
    min-height: 46px !important;
    max-height: 120px !important;
    resize: vertical !important;
    box-sizing: border-box !important;
    padding: 13px 15px !important;
    border: 1px solid var(--line) !important;
    border-radius: 15px !important;
    color: var(--text) !important;
    background: var(--surface, #fffdf7) !important;
    font: inherit !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    outline: none !important;
}

.message-conversation-compose textarea:focus {
    border-color: #dca91e !important;
    box-shadow: 0 0 0 3px rgba(246, 201, 69, .14) !important;
}

.message-conversation-send {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #d49a17 !important;
    border-radius: 14px !important;
    color: #4b341d !important;
    background: var(--yellow) !important;
    cursor: pointer !important;
}

.message-conversation-send:hover {
    background: #ffd75c !important;
    transform: translateY(-1px) !important;
}

/* mr.eum수정부분 */
/* 다크모드 대화 입력창 */
body.dark .message-conversation-compose {
    border-color: rgba(255,255,255,.10) !important;
}

body.dark .message-conversation-compose textarea {
    border-color: #4b463c !important;
    color: #f2eee4 !important;
    background: #24221e !important;
}

body.dark .message-conversation-compose textarea::placeholder {
    color: #8f8a80 !important;
}

/* mr.eum수정부분 */
/* 대화 상세 영역을 입력창과 함께 세로로 배치 */
.message-detail {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* mr.eum수정부분 */
/* 메시지 목록이 남은 공간을 차지하도록 설정 */
.message-conversation-thread {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
}

/* =====================================================
   쪽지함 최종 UI 정리
   - 대화 메시지는 위, 입력창은 항상 아래
   - 왼쪽 대화목록 하단에 내 프로필 표시
   - 프로필 사진이 없거나 로딩 실패 시 기본 프로필 아이콘 사용
===================================================== */
.message-list-panel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.message-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    align-content: start !important;
    padding-right: 2px;
}

/* mr.eum수정부분 */
/* 쪽지함 대화목록 스크롤바 - 치즈맵 스타일 */
.message-list {
    scrollbar-width: thin;
    scrollbar-color: #c9a45a transparent;
}

.message-list::-webkit-scrollbar {
    width: 6px;
}

.message-list::-webkit-scrollbar-track {
    background: transparent;
}

.message-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c9a45a;
}

.message-list::-webkit-scrollbar-thumb:hover {
    background: #a98232;
}

.message-my-profile-wrap {
    flex: 0 0 auto;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e8dfcf;

    display: none !important;
}

.message-my-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid #e8dfcf;
    border-radius: 14px;
    background: #fffefb;
}

.message-my-profile-avatar {
    flex: 0 0 42px;
}

.message-my-profile-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.message-my-profile-copy strong {
    overflow: hidden;
    color: #3e3024;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.message-my-profile-copy span {
    color: #9b9081;
    font-size: 10px;
}

.message-avatar > i {
    font-size: 19px;
    line-height: 1;
}

.message-avatar.has-photo {
    background: transparent !important;
}

.message-detail-panel {
    overflow: hidden !important;
    min-height: 0 !important;
}

.message-detail {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.message-conversation-thread {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    margin-top: 18px !important;
    padding: 4px 6px 14px 2px !important;
}

.message-conversation-compose {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
}

body.dark .message-my-profile-wrap {
    border-color: rgba(255,255,255,.10) !important;
}

body.dark .message-my-profile {
    border-color: #4b463c !important;
    background: #302e29 !important;
}

body.dark .message-my-profile-copy strong {
    color: #f2eee4 !important;
}

body.dark .message-my-profile-copy span {
    color: #a8a296 !important;
}

@media (max-width: 720px) {
    .message-list-panel {
        overflow: hidden !important;
    }

    .message-my-profile-wrap {
        margin-top: 10px;
        padding-top: 10px;
    }
}

body.dark .group-detail-meta {
    border-bottom-color: #4a4740;
}

/* mr.eum수정부분 */
/* 그룹 생성 모달 전체 스크롤을 치즈맵 스타일로 변경 */
.group-form-modal {
    scrollbar-width: thin;
    scrollbar-color: #d8b85c transparent;
}

.group-form-modal::-webkit-scrollbar {
    width: 7px;
}

.group-form-modal::-webkit-scrollbar-track {
    background: transparent;
}

.group-form-modal::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d8b85c;
}

.group-form-modal::-webkit-scrollbar-thumb:hover {
    background: #c99f35;
}

/* mr.eum수정부분 */
/* 기존 그룹 선택 영역을 2열 카드로 변경 */
.group-picker-existing-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 235px;
    overflow-y: auto;
    padding: 1px 5px 1px 1px;
}

/* mr.eum수정부분 */
/* 그룹 카드를 버튼 형태로 사용 */
.group-picker-existing-group {
    width: 100%;
    min-width: 0;
    min-height: 64px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--text);
    background: #fffdfa;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        border-color .16s ease,
        background .16s ease,
        transform .16s ease;
}

.group-picker-existing-group:hover {
    border-color: #e3c564;
    background: #fff8df;
    transform: translateY(-1px);
}

/* mr.eum수정부분 */
/* 기존 그룹 아이콘 */
.group-picker-existing-group-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--cheese-brown);
    background: #fff0b0;
    font-size: 16px;
}

/* mr.eum수정부분 */
/* 그룹 이름/장소 수 */
.group-picker-existing-group-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.group-picker-existing-group-copy strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.group-picker-existing-group-copy small {
    color: var(--gray-500);
    font-size: 9px;
    font-weight: 600;
}

/* mr.eum수정부분 */
/* 기존 펼침용 화살표 대신 오른쪽 이동 아이콘 */
.group-picker-existing-group .group-picker-chevron {
    color: var(--gray-500);
    font-size: 15px;
}

/* mr.eum수정부분 */
/* 기존 인라인 장소 영역은 더 이상 사용하지 않음 */
.group-picker-existing-places {
    display: none !important;
}

/* =====================================================
   그룹 저장 장소 선택 팝업
===================================================== */

/* mr.eum수정부분 */
/* 그룹 카드 클릭 시 표시되는 장소 선택 팝업 배경 */
.group-picker-place-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(24, 20, 14, 0.52);
}

.group-picker-place-modal-backdrop[hidden] {
    display: none;
}

/* mr.eum수정부분 */
/* 저장 장소 팝업 */
.group-picker-place-modal {
    position: relative;
    width: min(560px, calc(100vw - 40px));
    max-height: min(620px, calc(100vh - 40px));
    display: flex;
    flex-direction: column;
    padding: 26px;
    border: 1px solid rgba(178, 140, 64, 0.22);
    border-radius: 22px;
    color: var(--text);
    background: #292722;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}

/* mr.eum수정부분 */
/* 팝업 닫기 */
.group-picker-place-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: #eee8dc;
    background: rgba(255, 255, 255, 0.08);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.group-picker-place-modal-close:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* mr.eum수정부분 */
/* 팝업 제목 */
.group-picker-place-modal-heading {
    padding-right: 40px;
    margin-bottom: 16px;
}

.group-picker-place-modal-heading .group-eyebrow {
    display: block;
    margin-bottom: 5px;
}

.group-picker-place-modal-heading h3 {
    margin: 0;
    color: #f7f2e8;
    font-size: 18px;
}

.group-picker-place-modal-heading p {
    margin: 5px 0 0;
    color: #aaa297;
    font-size: 10px;
}

/* mr.eum수정부분 */
/* 저장된 장소만 내부 스크롤 */
.group-picker-place-modal-list {
    min-height: 0;
    max-height: 390px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px 6px 4px 2px;
    scrollbar-width: thin;
    scrollbar-color: #c9a45a transparent;
}

/* mr.eum수정부분 */
/* 저장 장소 팝업 스크롤바 */
.group-picker-place-modal-list::-webkit-scrollbar {
    width: 6px;
}

.group-picker-place-modal-list::-webkit-scrollbar-track {
    background: transparent;
}

.group-picker-place-modal-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c9a45a;
}

.group-picker-place-modal-list::-webkit-scrollbar-thumb:hover {
    background: #a98232;
}

/* mr.eum수정부분 */
/* 팝업 장소 카드 */
.group-picker-place-modal-list .group-place-option {
    min-width: 0;
    min-height: 54px;
}

/* mr.eum수정부분 */
/* 팝업 하단 선택 완료 */
.group-picker-place-modal-actions {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.group-picker-place-modal-actions .primary-button {
    min-width: 110px;
    min-height: 42px;
    border-radius: 12px;
}

/* =====================================================
   장소 검색 결과 내부 스크롤
===================================================== */

/* mr.eum수정부분 */
/* 검색 결과 영역만 고정 높이 + 자체 스크롤 */
.group-picker-search-results {
    min-height: 0;
    height: 180px;
    max-height: 180px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px 6px 2px 2px;
    scrollbar-width: thin;
    scrollbar-color: #c9a45a transparent;
}

/* mr.eum수정부분 */
/* 장소 검색 결과 치즈 스크롤바 */
.group-picker-search-results::-webkit-scrollbar {
    width: 6px;
}

.group-picker-search-results::-webkit-scrollbar-track {
    background: transparent;
}

.group-picker-search-results::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c9a45a;
}

.group-picker-search-results::-webkit-scrollbar-thumb:hover {
    background: #a98232;
}

/* mr.eum수정부분 */
/* 다크모드 기존 그룹 카드 */
body.dark .group-picker-existing-group {
    border-color: #4b463c;
    background: #292722;
}

body.dark .group-picker-existing-group:hover {
    border-color: #8e7335;
    background: #3b3427;
}

/* mr.eum수정부분 */
/* 모바일에서는 그룹 카드와 장소를 1열로 */
@media (max-width: 760px) {
    .group-picker-existing-groups,
    .group-picker-place-modal-list,
    .group-picker-search-results {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   새 그룹 장소 검색
   - 기본 결과 4곳
   - 더보기는 별도 팝오버
   - 팝오버 내부 최대 10곳
===================================================== */

.group-picker-section {
    position: relative;
}

/* 기본 결과는 2 x 2 네 곳까지만 보여줌 */
.group-picker-search-results {
    max-height: none;
    overflow: visible;
    padding: 1px;
}

.group-picker-search-option.is-cheese-priority {
    border-color: rgba(224, 182, 65, .52);
    background:
        linear-gradient(
            135deg,
            #fffdfa 0%,
            #fff8df 100%
        );
}

.group-picker-more-trigger-wrap {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding-top: 2px;
}

.group-picker-more-trigger {
    width: auto;
    min-width: 132px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 13px;
    border: 1px solid #e3c66f;
    border-radius: 10px;
    color: #65491f;
    background: #fff9e8;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
    transition:
        background .16s ease,
        border-color .16s ease,
        transform .16s ease;
}

.group-picker-more-trigger:hover {
    transform: translateY(-1px);
    border-color: #d7aa2c;
    background: #fff1bd;
}

.group-picker-more-trigger[aria-expanded="true"] {
    border-color: #d7aa2c;
    background: #ffefad;
}

.group-picker-more-trigger i {
    font-size: 13px;
    transition: transform .16s ease;
}

.group-picker-more-trigger[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* 클릭해도 폼 아래가 밀리지 않는 독립 팝오버 */
.group-picker-more-popover {
    position: absolute;
    z-index: 80;
    max-height: 360px;
    overflow: hidden;
    border: 1px solid #e5d6ad;
    border-radius: 16px;
    background: #fffefb;
    box-shadow:
        0 18px 48px rgba(76, 58, 24, .18),
        0 4px 14px rgba(76, 58, 24, .08);
}

.group-picker-more-popover::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 12px;
    height: 12px;
    border-top: 1px solid #e5d6ad;
    border-left: 1px solid #e5d6ad;
    background: #fffefb;
    transform:
        translateX(-50%)
        rotate(45deg);
}

.group-picker-more-popover-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px 11px;
    border-bottom: 1px solid #eee4ca;
    background:
        linear-gradient(
            135deg,
            #fffdf8 0%,
            #fff6d6 100%
        );
}

.group-picker-more-popover-header > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.group-picker-more-popover-header strong {
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.group-picker-more-popover-header small {
    color: var(--gray-500);
    font-size: 9px;
    font-weight: 700;
}

.group-picker-more-close {
    width: 28px;
    height: 28px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 1px solid #e6dac0;
    border-radius: 9px;
    color: #79694e;
    background: rgba(255, 255, 255, .82);
    cursor: pointer;
}

.group-picker-more-close:hover {
    border-color: #d8b34a;
    color: #5d421c;
    background: #fff;
}

.group-picker-more-list {
    max-height: 300px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    overflow-y: auto;
    padding: 10px;

    scrollbar-width: thin;
    scrollbar-color: #d8b85c transparent;
}

.group-picker-more-list::-webkit-scrollbar {
    width: 5px;
}

.group-picker-more-list::-webkit-scrollbar-track {
    background: transparent;
}

.group-picker-more-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d8b85c;
}

.group-picker-more-list::-webkit-scrollbar-thumb:hover {
    background: #c99f35;
}

.group-picker-more-list .group-place-option {
    margin: 0;
}

body.dark .group-picker-search-option.is-cheese-priority {
    border-color: #716039;
    background: #383326;
}

body.dark .group-picker-more-trigger {
    border-color: #6e603d;
    color: #f0dfad;
    background: #3c372b;
}

body.dark .group-picker-more-trigger:hover,
body.dark .group-picker-more-trigger[aria-expanded="true"] {
    border-color: #a98a3a;
    background: #49402b;
}

body.dark .group-picker-more-popover {
    border-color: #514a3b;
    background: #292722;
    box-shadow:
        0 18px 48px rgba(0, 0, 0, .34),
        0 4px 14px rgba(0, 0, 0, .22);
}

body.dark .group-picker-more-popover::before {
    border-color: #514a3b;
    background: #292722;
}

body.dark .group-picker-more-popover-header {
    border-bottom-color: #4a4539;
    background:
        linear-gradient(
            135deg,
            #312e28 0%,
            #3d3525 100%
        );
}

body.dark .group-picker-more-close {
    border-color: #4f493d;
    color: #d8cfbd;
    background: #37332c;
}

@media (max-width: 760px) {
    .group-picker-more-popover {
        width: 100% !important;
        left: 0 !important;
    }

    .group-picker-more-list {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   GROUP EDITOR 안정화 최종
   DOM 구조는 건드리지 않고 취소/저장을 sticky 처리
===================================================== */

/* 날짜 입력 UI 제거 */
.group-form-modal label:has(#groupDate),
.group-form-modal .group-form-field:has(#groupDate),
.group-form-modal #groupDate {
    display: none !important;
}

/* 날짜 제거 후 기본 모달 크기/비율 */
.group-form-modal {
    width: min(640px, calc(100vw - 36px));
    max-height: min(820px, calc(100vh - 32px));
    padding: 30px 28px 26px;

    /* 검색 전에는 바깥 스크롤 없음 */
    overflow-y: hidden !important;
}

/*
   검색 결과가 생긴 이후에만 auto.
   실제 내용이 max-height를 넘는 경우에만 스크롤바가 나타납니다.
*/
.group-form-modal.has-search-results {
    overflow-y: auto !important;
}

/* 폼 원래 구조 유지 */
.group-form-modal #groupForm {
    display: grid !important;
    gap: 18px !important;
}

/* 그룹 이름 */
.group-form-modal #groupName {
    min-height: 48px;
}

/* 그룹 메모 */
.group-form-modal #groupMemo {
    min-height: 92px;
    max-height: 130px;
}

/* 날짜 제거 후 장소선택 쪽 간격 */
.group-form-modal .group-place-fieldset {
    margin-top: 2px;
}

.group-form-modal .group-place-fieldset > legend {
    margin-bottom: 10px;
}

/* 기존 그룹 목록은 너무 길어지지 않게 내부만 스크롤 */
.group-form-modal .group-picker-existing-groups {
    max-height: 170px;
    overflow-y: auto;
    gap: 8px;

    scrollbar-width: thin;
    scrollbar-color: #d8b85c transparent;
}

.group-form-modal .group-picker-existing-groups::-webkit-scrollbar {
    width: 5px;
}

.group-form-modal .group-picker-existing-groups::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d8b85c;
}

/* 장소 검색 */
.group-form-modal .group-picker-search-bar {
    min-height: 48px;
    padding: 5px 6px 5px 12px;
}

.group-form-modal .group-picker-search-bar input,
.group-form-modal .group-picker-search-bar button {
    height: 38px;
}

/*
   핵심:
   취소/저장 영역은 DOM을 옮기지 않고 원래 위치에서 sticky.
   그래서 폼 내용이 정상적으로 보이면서,
   검색 이후 스크롤 시에도 하단에 계속 붙어 있습니다.
*/
.group-form-modal .group-form-actions {
    position: sticky !important;
    bottom: -26px;
    z-index: 60;

    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    margin: 4px -28px -26px !important;
    padding: 14px 28px 18px !important;

    border-top: 1px solid #eee5d6;
    background:
        linear-gradient(
            180deg,
            rgba(255, 253, 248, .96) 0%,
            #fffdf8 22%,
            #fffdf8 100%
        );

    box-shadow:
        0 -8px 18px rgba(74, 55, 26, .035);
}

.group-form-modal .group-form-actions button {
    min-width: 96px;
}

/* 더보기 팝오버는 기존대로 자체 스크롤 */
.group-form-modal .group-picker-more-popover {
    overflow: hidden;
}

.group-form-modal .group-picker-more-list {
    overflow-y: auto;
}

/* 다크모드 */
body.dark .group-form-modal .group-form-actions {
    border-top-color: #49443b;
    background:
        linear-gradient(
            180deg,
            rgba(41, 39, 34, .96) 0%,
            #292722 22%,
            #292722 100%
        );
}

/* 모바일 */
@media (max-width: 760px) {
    .group-form-modal {
        width: calc(100vw - 18px);
        max-height: calc(100vh - 18px);
        padding: 22px 18px 20px;
    }

    .group-form-modal #groupForm {
        gap: 15px !important;
    }

    .group-form-modal .group-picker-existing-groups {
        max-height: 150px;
    }

    .group-form-modal .group-form-actions {
        bottom: -20px;
        grid-template-columns: 1fr 1fr;
        margin: 2px -18px -20px !important;
        padding: 12px 18px 16px !important;
    }
}


/* =====================================================
   GROUP EDITOR - 최신본 기준 최종 안정화
   1) 취소/저장 항상 보임
   2) 검색 전 스크롤 없음
   3) 검색 결과 생긴 뒤 장소 선택 영역만 스크롤
   4) 모달 전체는 스크롤하지 않음
===================================================== */

/*
   이전 sticky/footer 실험 규칙 무효화.
   액션 버튼은 원래 DOM 위치 그대로 사용한다.
*/
.group-form-modal .group-form-actions {
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;

    min-height: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    margin: 8px 0 0 !important;
    padding: 14px 0 0 !important;

    border-top: 1px solid #eee5d6;
    background: transparent !important;
    box-shadow: none !important;

    flex: 0 0 auto;
}

.group-form-modal .group-form-actions button {
    width: auto;
    min-width: 96px;
}

/*
   모달 자체에는 스크롤을 만들지 않는다.
   그래서 검색 전부터 오른쪽 스크롤바가 뜨지 않고,
   취소/저장 버튼도 모달 밖으로 밀리지 않는다.
*/
.group-form-modal,
.group-form-modal.has-search-results {
    overflow: hidden !important;
}

/*
   날짜 제거 후 전체 높이 안에
   이름 + 메모 + 장소선택 + 액션이 들어오도록 비율 정리.
*/
.group-form-modal {
    width: min(640px, calc(100vw - 36px));
    max-height: min(820px, calc(100vh - 32px));
    padding: 30px 28px 24px;
}

.group-form-modal #groupForm {
    display: grid !important;
    gap: 16px !important;
    min-height: 0;
}

.group-form-modal #groupName {
    min-height: 46px;
}

.group-form-modal #groupMemo {
    min-height: 88px;
    max-height: 110px;
}

/*
   핵심:
   스크롤 대상은 전체 모달이 아니라 '장소 선택' 내부(group-picker).
   검색 전에는 overflow:hidden이라 스크롤바 없음.
*/
.group-form-modal .group-picker {
    max-height: 300px;
    overflow-y: hidden;
    overflow-x: visible;
    padding-right: 2px;

    scrollbar-width: thin;
    scrollbar-color: #d8b85c transparent;
}

/*
   검색 결과가 실제로 생긴 뒤에만
   JS가 .has-search-results 클래스를 붙인다.
   그때부터 장소선택 내부만 스크롤 가능.
*/
.group-form-modal.has-search-results .group-picker {
    overflow-y: auto;
}

.group-form-modal .group-picker::-webkit-scrollbar {
    width: 6px;
}

.group-form-modal .group-picker::-webkit-scrollbar-track {
    background: transparent;
}

.group-form-modal .group-picker::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d8b85c;
}

.group-form-modal .group-picker::-webkit-scrollbar-thumb:hover {
    background: #c99f35;
}

/*
   기존 그룹 목록은 자체 높이 제한을 유지해서
   검색 전에도 아래 액션 버튼을 밀어내지 않는다.
*/
.group-form-modal .group-picker-existing-groups {
    max-height: 150px;
    overflow-y: auto;
}

/* 장소검색 결과 기본 4곳은 group-picker 안에서 표시 */
.group-form-modal .group-picker-search-results {
    max-height: none;
    overflow: visible;
}

/* 더보기는 기존 독립 팝오버 유지 */
.group-form-modal .group-picker-more-popover {
    overflow: hidden;
}

.group-form-modal .group-picker-more-list {
    overflow-y: auto;
}

/* 다크모드 */
body.dark .group-form-modal .group-form-actions {
    border-top-color: #49443b;
}

/* 모바일 */
@media (max-width: 760px) {
    .group-form-modal {
        width: calc(100vw - 18px);
        max-height: calc(100vh - 18px);
        padding: 22px 18px 18px;
    }

    .group-form-modal #groupForm {
        gap: 14px !important;
    }

    .group-form-modal .group-picker {
        max-height: 250px;
    }

    .group-form-modal .group-picker-existing-groups {
        max-height: 120px;
    }

    .group-form-modal .group-form-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 6px !important;
        padding-top: 12px !important;
    }

    .group-form-modal .group-form-actions button {
        width: 100%;
        min-width: 0;
    }
}


/* =====================================================
   그룹 장소검색 더보기 - 진짜 떠있는 토글 팝오버
   아래 레이아웃을 절대 밀지 않음
===================================================== */

.group-picker-more-popover {
    position: fixed !important;
    z-index: 12050 !important;

    width: min(500px, calc(100vw - 28px));
    max-height: min(390px, calc(100vh - 28px));

    overflow: hidden;

    border: 1px solid #e3cf98;
    border-radius: 16px;

    background: #fffefb;

    box-shadow:
        0 22px 60px rgba(65, 48, 19, .24),
        0 6px 18px rgba(65, 48, 19, .10);

    transform-origin: top center;
    animation: groupMorePopoverIn .14s ease-out;
}

/* fixed 팝오버라 기존 section 기준 화살표 위치값을 쓰지 않음 */
.group-picker-more-popover::before {
    display: none !important;
}

.group-picker-more-popover.opens-up {
    transform-origin: bottom center;
}

@keyframes groupMorePopoverIn {
    from {
        opacity: 0;
        transform: translateY(5px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.group-picker-more-popover-header {
    position: sticky;
    top: 0;
    z-index: 3;
}

.group-picker-more-list {
    max-height: 300px;
    overflow-y: auto;
}

/* 더보기 팝오버가 떠도 원래 검색결과/폼 높이는 변하지 않음 */
.group-picker-more-trigger-wrap {
    position: relative;
    z-index: 2;
}

/* 다크모드 떠있는 팝오버 */
body.dark .group-picker-more-popover {
    border-color: #5a523f;
    background: #292722;

    box-shadow:
        0 22px 60px rgba(0, 0, 0, .46),
        0 6px 18px rgba(0, 0, 0, .28);
}


/* =====================================================
   기존 그룹 저장 장소 팝업 - 선택 완료 버튼
   라이트 / 다크모드 별도 스타일
===================================================== */

/* 라이트모드 */
body:not(.dark)
.group-picker-place-modal-actions
#groupPickerPlaceModalDone {
    min-width: 112px;
    min-height: 42px;

    padding: 0 18px;

    border: 1px solid #d6a62b !important;
    border-radius: 12px;

    color: #4f3710 !important;
    background:
        linear-gradient(
            180deg,
            #ffd866 0%,
            #f5c443 100%
        ) !important;

    box-shadow:
        0 4px 10px rgba(154, 109, 23, .16);

    font-size: 12px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

body:not(.dark)
.group-picker-place-modal-actions
#groupPickerPlaceModalDone:hover {
    transform: translateY(-1px);

    border-color: #bd8913 !important;

    background:
        linear-gradient(
            180deg,
            #ffdc6f 0%,
            #efb82f 100%
        ) !important;

    box-shadow:
        0 7px 15px rgba(154, 109, 23, .22);
}

body:not(.dark)
.group-picker-place-modal-actions
#groupPickerPlaceModalDone:active {
    transform: translateY(0);
    box-shadow:
        0 2px 6px rgba(154, 109, 23, .16);
}


/* 다크모드 */
body.dark
.group-picker-place-modal-actions
#groupPickerPlaceModalDone {
    min-width: 112px;
    min-height: 42px;

    padding: 0 18px;

    border: 1px solid #d5aa42 !important;
    border-radius: 12px;

    color: #261c0b !important;

    background:
        linear-gradient(
            180deg,
            #f4cb5a 0%,
            #dcae38 100%
        ) !important;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, .24);

    font-size: 12px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

body.dark
.group-picker-place-modal-actions
#groupPickerPlaceModalDone:hover {
    transform: translateY(-1px);

    border-color: #f0ca62 !important;

    background:
        linear-gradient(
            180deg,
            #ffd96c 0%,
            #e6b944 100%
        ) !important;

    box-shadow:
        0 7px 17px rgba(0, 0, 0, .32);
}

body.dark
.group-picker-place-modal-actions
#groupPickerPlaceModalDone:active {
    transform: translateY(0);
    box-shadow:
        0 2px 7px rgba(0, 0, 0, .26);
}


/* 라이트모드에서 기존 그룹 장소 팝업의 하단선과 버튼이 자연스럽게 보이도록 */
body:not(.dark) .group-picker-place-modal-actions {
    border-top-color: #e9dfcd;
}

/*
   팝업 자체가 기존 CSS에서 항상 dark로 고정되어 있어도
   라이트모드의 선택완료 버튼은 명확하게 구분되도록 스타일링.
*/
@media (max-width: 760px) {
    .group-picker-more-popover {
        width: calc(100vw - 20px) !important;
        max-height: min(420px, calc(100vh - 20px));
    }

    .group-picker-more-list {
        grid-template-columns: 1fr;
        max-height: 330px;
    }
}


/* =====================================================
   기존 그룹 저장 장소 팝업 - 라이트/다크 테마 최종 보정
   기존 CSS가 .group-picker-place-modal 자체를 #292722로 고정해
   라이트모드에서도 검게 보이던 문제 수정
===================================================== */

/* ---------- LIGHT MODE ---------- */
body:not(.dark) .group-picker-place-modal {
    color: #2f2b24 !important;
    background: #fffdf8 !important;
    border-color: #e7dcc8 !important;
    box-shadow:
        0 24px 70px rgba(70, 52, 24, 0.20) !important;
}

body:not(.dark) .group-picker-place-modal-close {
    color: #6d665c !important;
    background: #f3f1ec !important;
}

body:not(.dark) .group-picker-place-modal-close:hover {
    color: #4f473d !important;
    background: #ebe7de !important;
}

body:not(.dark) .group-picker-place-modal-heading .group-eyebrow {
    color: #c98712 !important;
}

body:not(.dark) .group-picker-place-modal-heading h3 {
    color: #2c2822 !important;
}

body:not(.dark) .group-picker-place-modal-heading p {
    color: #8c8276 !important;
}

body:not(.dark) .group-picker-place-modal-list .group-place-option {
    border-color: #e5ddcf !important;
    background: #ffffff !important;
}

body:not(.dark) .group-picker-place-modal-list .group-place-option:hover {
    border-color: #dfbd61 !important;
    background: #fff9e8 !important;
}

body:not(.dark) .group-picker-place-modal-list .group-place-option.selected {
    border-color: #d5a832 !important;
    background: #fff3c5 !important;
}

body:not(.dark) .group-picker-place-modal-list .group-place-option strong {
    color: #302c26 !important;
}

body:not(.dark) .group-picker-place-modal-list .group-place-option small {
    color: #8d8378 !important;
}

body:not(.dark) .group-picker-place-modal-list .group-place-check {
    border-color: #d8d1c7 !important;
    background: #ffffff !important;
}

body:not(.dark)
.group-picker-place-modal-list
.group-place-option input:checked + .group-place-check {
    border-color: #d3a72f !important;
    color: #6c4b11 !important;
    background: #ffd95f !important;
}

body:not(.dark) .group-picker-place-modal-actions {
    border-top-color: #e9dfcd !important;
}


/* ---------- DARK MODE ---------- */
body.dark .group-picker-place-modal {
    color: #f2ede5 !important;
    background: #292722 !important;
    border-color: rgba(178, 140, 64, 0.22) !important;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.35) !important;
}

body.dark .group-picker-place-modal-close {
    color: #eee8dc !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body.dark .group-picker-place-modal-close:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

body.dark .group-picker-place-modal-heading h3 {
    color: #f7f2e8 !important;
}

body.dark .group-picker-place-modal-heading p {
    color: #aaa297 !important;
}

body.dark .group-picker-place-modal-list .group-place-option {
    border-color: #3b3832 !important;
    background: #34312c !important;
}

body.dark .group-picker-place-modal-list .group-place-option:hover {
    border-color: #6f603c !important;
    background: #3d382d !important;
}

body.dark .group-picker-place-modal-list .group-place-option.selected {
    border-color: #a8873a !important;
    background: #493f28 !important;
}

body.dark .group-picker-place-modal-list .group-place-option strong {
    color: #f0ebe3 !important;
}

body.dark .group-picker-place-modal-list .group-place-option small {
    color: #aaa297 !important;
}

body.dark .group-picker-place-modal-list .group-place-check {
    border-color: #5a554b !important;
    background: #2c2924 !important;
}

body.dark
.group-picker-place-modal-list
.group-place-option input:checked + .group-place-check {
    border-color: #d5aa42 !important;
    color: #2d210d !important;
    background: #e9bc45 !important;
}

body.dark .group-picker-place-modal-actions {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* mr.eum수정부분 */
/* 내 그룹 목록이 많아지면 해당 목록만 스크롤 */
.group-list {
    min-height: 0;
    max-height: 500px;
    overflow-y: auto;
    padding: 3px 6px 3px 3px;

    scrollbar-width: thin;
    scrollbar-color: #d8b85c transparent;
}

/* 그룹 목록 치즈맵 스타일 스크롤바 */
.group-list::-webkit-scrollbar {
    width: 6px;
}

.group-list::-webkit-scrollbar-track {
    background: transparent;
}

.group-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d8b85c;
}

.group-list::-webkit-scrollbar-thumb:hover {
    background: #c99f35;
}


/* =====================================================
   그룹 수정 - 현재 저장된 장소
   체크 해제 후 저장하면 그룹에서 삭제
===================================================== */

.group-picker-current-section {
    padding-bottom: 2px;
}

.group-picker-current-section
.group-picker-section-heading {
    align-items: flex-start;
}

.group-picker-current-section
.group-picker-section-heading > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.group-picker-current-section
.group-picker-section-heading small {
    color: var(--gray-500);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.45;
}

.group-picker-current-count {
    flex: 0 0 auto;
    min-width: 31px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 999px;
    color: var(--cheese-brown);
    background: var(--cheese-soft);
    font-size: 9px;
    font-weight: 900;
}

.group-picker-current-places {
    max-height: 176px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    overflow-y: auto;
    padding: 2px 5px 2px 2px;

    scrollbar-width: thin;
    scrollbar-color: #d8b85c transparent;
}

.group-picker-current-places::-webkit-scrollbar {
    width: 5px;
}

.group-picker-current-places::-webkit-scrollbar-track {
    background: transparent;
}

.group-picker-current-places::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d8b85c;
}

.group-picker-current-places::-webkit-scrollbar-thumb:hover {
    background: #c99f35;
}

.group-picker-current-place {
    border-color: #e8d6a5 !important;
    background: #fffaf0 !important;
}

.group-picker-current-place.selected {
    border-color: #e0b63e !important;
    background: #fff1b9 !important;
}

/* 체크 해제 상태는 삭제 예정임을 은은하게 표시 */
.group-picker-current-place:not(.selected) {
    opacity: .58;
}

.group-picker-current-empty {
    grid-column: 1 / -1;
    padding: 14px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    color: var(--gray-500);
    background: #fbfaf7;
    font-size: 10px;
    text-align: center;
}

/* 다크모드 */
body.dark .group-picker-current-count {
    color: #f1dfad;
    background: #4a4029;
}

body.dark .group-picker-current-place {
    border-color: #5d5135 !important;
    background: #332f26 !important;
}

body.dark .group-picker-current-place.selected {
    border-color: #a98735 !important;
    background: #493f28 !important;
}

body.dark .group-picker-current-empty {
    border-color: #4a463d;
    color: #aaa297;
    background: #292722;
}

@media (max-width: 760px) {
    .group-picker-current-places {
        grid-template-columns: 1fr;
        max-height: 190px;
    }
}


/* =====================================================
   GROUP EDITOR - 그룹 수정 장소선택 잘림 보정
   - 새 그룹: 기존처럼 검색 전 스크롤 없음
   - 그룹 수정: 현재 저장된 장소가 추가되므로 장소선택 영역 자체 스크롤
   - 취소/저장 버튼은 기존 위치 유지
===================================================== */

/*
   기본 새 그룹 화면은 기존 정책 유지:
   검색 결과가 생기기 전에는 group-picker 스크롤바를 만들지 않는다.
*/
.group-form-modal .group-picker {
    max-height: 300px;
    overflow-y: hidden;
}

/*
   그룹 수정 화면에는 "현재 저장된 장소" 섹션이 추가되기 때문에
   같은 300px에서 overflow:hidden이면
   기존 그룹/장소 검색 영역이 아래에서 잘려 버립니다.

   현재 저장 장소 섹션이 있을 때만
   group-picker 자체를 스크롤 영역으로 전환합니다.
*/
.group-form-modal
.group-picker:has(.group-picker-current-section) {
    max-height: min(370px, calc(100vh - 440px));
    min-height: 250px;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding-right: 6px;

    scrollbar-width: thin;
    scrollbar-color: #d8b85c transparent;
}

.group-form-modal
.group-picker:has(.group-picker-current-section)::-webkit-scrollbar {
    width: 6px;
}

.group-form-modal
.group-picker:has(.group-picker-current-section)::-webkit-scrollbar-track {
    background: transparent;
}

.group-form-modal
.group-picker:has(.group-picker-current-section)::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d8b85c;
}

.group-form-modal
.group-picker:has(.group-picker-current-section)::-webkit-scrollbar-thumb:hover {
    background: #c99f35;
}

/*
   현재 저장된 장소 자체도 너무 많은 경우
   이 목록이 모달 높이를 전부 먹지 않도록 내부 높이 제한.
*/
.group-form-modal .group-picker-current-places {
    max-height: 150px;
}

/*
   수정 화면에서 장소 검색 제목/검색창까지
   스크롤 끝에서 완전히 보이도록 하단 여유 추가.
*/
.group-form-modal
.group-picker:has(.group-picker-current-section) {
    padding-bottom: 10px;
}

/* 기존 그룹 목록도 수정 화면에서는 과하게 높아지지 않게 */
.group-form-modal
.group-picker:has(.group-picker-current-section)
.group-picker-existing-groups {
    max-height: 125px;
}

/* 모바일 */
@media (max-width: 760px) {
    .group-form-modal
    .group-picker:has(.group-picker-current-section) {
        max-height: min(330px, calc(100vh - 390px));
        min-height: 220px;
    }

    .group-form-modal .group-picker-current-places {
        max-height: 140px;
    }

    .group-form-modal
    .group-picker:has(.group-picker-current-section)
    .group-picker-existing-groups {
        max-height: 110px;
    }
}


/* =====================================================
   GROUP EDITOR - 수정/저장 버튼 잘림 최종 보정
   - 모달 전체는 고정 프레임
   - 폼 내부에서 장소 선택 영역만 남은 높이를 사용
   - 취소/저장 버튼은 항상 하단에 노출
===================================================== */

.group-form-modal {
    overflow: hidden !important;
}

/*
   헤더 아래의 실제 폼 높이를 화면 안에 제한.
   form 자체를 flex column으로 바꿔
   마지막 액션 버튼 영역이 항상 남도록 한다.
*/
.group-form-modal #groupForm {
    min-height: 0;
    max-height: calc(100vh - 205px);

    display: flex !important;
    flex-direction: column;
    gap: 14px !important;

    overflow: hidden;
}

/* 이름/메모는 고정 높이 유지 */
.group-form-modal #groupForm > label {
    flex: 0 0 auto;
}

/*
   장소 선택 영역만 남은 높이를 먹도록 함.
   내용이 길면 이 안에서만 스크롤.
*/
.group-form-modal .group-place-fieldset {
    min-height: 0;
    flex: 1 1 auto;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.group-form-modal .group-place-fieldset > legend {
    flex: 0 0 auto;
}

/* 실제 장소 선택 UI */
.group-form-modal .group-place-options {
    min-height: 0;
    flex: 1 1 auto;

    max-height: none !important;
    overflow: hidden !important;
}

/*
   수정 화면의 picker만 내부 스크롤.
   기존 '현재 저장된 장소 / 기존 그룹 / 장소 검색' 전부 이 안에서 스크롤된다.
*/
.group-form-modal .group-picker {
    min-height: 0 !important;
    max-height: none !important;
    height: 100%;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding-right: 6px;
    padding-bottom: 10px;

    scrollbar-width: thin;
    scrollbar-color: #d8b85c transparent;
}

.group-form-modal .group-picker::-webkit-scrollbar {
    width: 6px;
}

.group-form-modal .group-picker::-webkit-scrollbar-track {
    background: transparent;
}

.group-form-modal .group-picker::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d8b85c;
}

.group-form-modal .group-picker::-webkit-scrollbar-thumb:hover {
    background: #c99f35;
}

/*
   취소 / 저장 버튼은 flex에서 마지막 고정 영역.
   스크롤 대상이 아니므로 항상 보인다.
*/
.group-form-modal .group-form-actions {
    position: static !important;
    flex: 0 0 auto;

    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    margin: 0 !important;
    padding: 14px 0 0 !important;

    border-top: 1px solid #eee5d6;
    background: #fffefb !important;
    box-shadow: none !important;
}

.group-form-modal .group-form-actions button {
    min-width: 96px;
    min-height: 44px;
}

/* 다크모드 */
body.dark .group-form-modal .group-form-actions {
    border-top-color: #49443b;
    background: #292722 !important;
}

/* 모바일 */
@media (max-width: 760px) {
    .group-form-modal #groupForm {
        max-height: calc(100vh - 165px);
        gap: 12px !important;
    }

    .group-form-modal .group-form-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding-top: 12px !important;
    }

    .group-form-modal .group-form-actions button {
        width: 100%;
        min-width: 0;
    }
}


/* =====================================================
   GROUP EDITOR - 전체 모달 스크롤 최종 보정
   - 내용이 길면 모달 전체가 스크롤
   - 현재 저장 장소 / 기존 그룹 / 장소 검색이 잘리지 않음
   - 취소/저장 버튼은 하단 sticky로 항상 노출
===================================================== */

/*
   기존에 form / fieldset / group-picker 각각 높이를 나눠 갖게 하면서
   내용이 많은 수정 화면에서 중간 영역이 잘리는 문제가 있었습니다.

   이제 그룹 수정 모달은 "전체 내용 스크롤 + 하단 액션 sticky" 구조로 통일합니다.
*/
.group-form-modal {
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    scrollbar-width: thin;
    scrollbar-color: #d8b85c transparent;
}

.group-form-modal::-webkit-scrollbar {
    width: 6px;
}

.group-form-modal::-webkit-scrollbar-track {
    background: transparent;
}

.group-form-modal::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d8b85c;
}

.group-form-modal::-webkit-scrollbar-thumb:hover {
    background: #c99f35;
}

/* form 자체의 높이/overflow 제한 해제 */
.group-form-modal #groupForm {
    display: grid !important;
    gap: 16px !important;

    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;

    overflow: visible !important;
}

/* 장소 선택 fieldset도 전체 높이를 자연스럽게 사용 */
.group-form-modal .group-place-fieldset {
    display: block !important;

    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;

    overflow: visible !important;
}

/* 장소 선택 바깥 컨테이너 높이 제한 제거 */
.group-form-modal .group-place-options {
    display: block !important;

    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;

    overflow: visible !important;
}

/* group-picker도 화면을 잘라먹지 않게 전체 높이 사용 */
.group-form-modal .group-picker,
.group-form-modal
.group-picker:has(.group-picker-current-section) {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;

    overflow: visible !important;

    padding-right: 0 !important;
    padding-bottom: 0 !important;
}

/*
   현재 저장 장소는 9~10곳 이상이어도
   일단 모두 보이게 하고, 모달 전체 스크롤로 접근.
   너무 길어지는 걸 막기 위해 이 목록만 최대 높이 320px.
*/
.group-form-modal .group-picker-current-places {
    max-height: 320px !important;
    overflow-y: auto !important;
    padding-right: 5px;

    scrollbar-width: thin;
    scrollbar-color: #d8b85c transparent;
}

.group-form-modal
.group-picker-current-places::-webkit-scrollbar {
    width: 5px;
}

.group-form-modal
.group-picker-current-places::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d8b85c;
}

/* 기존 그룹 목록도 너무 길면 자체 스크롤 */
.group-form-modal .group-picker-existing-groups,
.group-form-modal
.group-picker:has(.group-picker-current-section)
.group-picker-existing-groups {
    max-height: 180px !important;
    overflow-y: auto !important;
}

/* 검색 결과는 기본 4개 그대로, 더보기는 플로팅 팝오버 유지 */
.group-form-modal .group-picker-search-results {
    max-height: none !important;
    overflow: visible !important;
}

/*
   취소 / 저장은 모달 스크롤 하단에 sticky.
   아래로 내려가도 항상 화면 하단에 붙어 있게 함.
*/
.group-form-modal .group-form-actions {
    position: sticky !important;
    bottom: -1px;
    z-index: 100;

    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    min-height: 72px;

    margin: 8px -28px -24px !important;
    padding: 14px 28px 18px !important;

    border-top: 1px solid #eee5d6;

    background:
        linear-gradient(
            180deg,
            rgba(255, 253, 248, .96) 0%,
            #fffdf8 24%,
            #fffdf8 100%
        ) !important;

    box-shadow:
        0 -8px 20px rgba(71, 53, 24, .05) !important;
}

.group-form-modal .group-form-actions button {
    min-width: 96px;
    min-height: 44px;
}

/* 다크모드 */
body.dark .group-form-modal .group-form-actions {
    border-top-color: #49443b;

    background:
        linear-gradient(
            180deg,
            rgba(41, 39, 34, .96) 0%,
            #292722 24%,
            #292722 100%
        ) !important;
}

/* 모바일 */
@media (max-width: 760px) {
    .group-form-modal {
        max-height: calc(100vh - 18px) !important;
    }

    .group-form-modal .group-picker-current-places {
        max-height: 280px !important;
    }

    .group-form-modal .group-form-actions {
        bottom: -1px;

        display: grid !important;
        grid-template-columns: 1fr 1fr;

        margin: 8px -18px -18px !important;
        padding: 12px 18px 16px !important;
    }

    .group-form-modal .group-form-actions button {
        width: 100%;
        min-width: 0;
    }
}


/* =====================================================
   그룹 수정 - 현재 저장된 장소 컴팩트 4열
   - 현재 저장된 장소에서 주소 숨김
   - 4열 배치로 세로 공간 절약
===================================================== */

/* 현재 저장된 장소 카드만 4열 */
.group-form-modal .group-picker-current-places {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;

    max-height: 220px !important;
}

/*
   현재 저장된 장소 카드 안의 보조 텍스트(주소/카테고리 줄) 숨김.
   장소명만 남겨 높이를 줄입니다.
*/
.group-form-modal
.group-picker-current-places
.group-picker-current-place
.group-picker-place-copy
small {
    display: none !important;
}

/* 카드 자체도 조금 더 낮고 촘촘하게 */
.group-form-modal
.group-picker-current-places
.group-picker-current-place {
    min-height: 46px;
    padding: 8px !important;
    gap: 7px !important;
}

/* 체크박스도 살짝 축소 */
.group-form-modal
.group-picker-current-places
.group-picker-current-place
.group-place-check {
    width: 20px;
    height: 20px;
    border-radius: 6px;
}

/* 장소명 한 줄 처리 */
.group-form-modal
.group-picker-current-places
.group-picker-current-place
.group-picker-place-copy {
    min-width: 0;
}

.group-form-modal
.group-picker-current-places
.group-picker-current-place
.group-picker-place-copy strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 10px;
}

/* 중간 폭에서는 3열 */
@media (max-width: 980px) {
    .group-form-modal .group-picker-current-places {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* 모바일에서는 2열 */
@media (max-width: 760px) {
    .group-form-modal .group-picker-current-places {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-height: 220px !important;
    }
}


/* =====================================================
   쪽지함 - 다크모드 삭제 버튼 hover 보정
   - hover 시 흰색/아이보리 배경으로 변하지 않음
===================================================== */

body.dark .message-mini-button.danger {
    color: #e08b7d !important;
    border-color: #6b4a45 !important;
    background: #2f2b27 !important;
}

body.dark .message-mini-button.danger:hover {
    color: #f09a8c !important;
    border-color: #8a5a52 !important;
    background: #3a2d2a !important;
}