/* Soft Mint Center Dialog — 상단 스와이프 핸들 */
.mealog-dialog-grabber,
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-modal-grabber {
    flex: 0 0 auto;
    align-self: center;
    width: 100%;
    max-width: 100%;
    height: 1.35rem;
    margin: 0;
    padding: 0;
    border: 0;
    background:
        linear-gradient(rgba(15, 23, 42, 0.22), rgba(15, 23, 42, 0.22))
        center 0.55rem / 2.5rem 0.28rem no-repeat;
    touch-action: none;
    cursor: grab;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.mealog-dialog-grabber:active,
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-modal-grabber:active {
    cursor: grabbing;
    background:
        linear-gradient(rgba(15, 23, 42, 0.34), rgba(15, 23, 42, 0.34))
        center 0.55rem / 2.5rem 0.28rem no-repeat;
}
.mealog-dialog-grabber:focus-visible,
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-modal-grabber:focus-visible {
    background:
        linear-gradient(rgba(15, 23, 42, 0.34), rgba(15, 23, 42, 0.34))
        center 0.55rem / 2.5rem 0.28rem no-repeat;
    box-shadow: inset 0 0 0 2px rgba(60, 184, 137, 0.45);
}
#entryModal.entry-modal-saving .entry-modal-grabber,
#entryModal.entry-modal-saving .mealog-dialog-grabber {
    pointer-events: none;
    opacity: 0.4;
}

/* Soft Mint Dialog Footer — 버튼 영역 높이 통일 (패딩 16/20 + CTA 52) */
/* 센터 팝업 헤더: 타이틀이 있을 때 좌측 들여쓰기·좌정렬 */
.mealog-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
    padding: 14px var(--mealog-dialog-pad-x) 12px;
    text-align: left;
    box-sizing: border-box;
}
.mealog-dialog-head__title,
.mealog-dialog-head h2,
.mealog-dialog-head h3 {
    margin: 0;
    text-align: left;
}

.mealog-dialog-actions {
    --mealog-dialog-actions-pad-y: 36px; /* 16 + 20 */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px var(--mealog-dialog-pad-x) 20px;
    min-height: calc(var(--mealog-dialog-actions-pad-y) + var(--cta-btn-h));
    box-sizing: border-box;
    background: transparent;
    flex-shrink: 0;
    align-items: stretch;
    justify-content: center;
}
.mealog-dialog-actions--pair,
.mealog-dialog-actions--stack,
.mealog-dialog-actions:has(> :nth-child(2)) {
    flex-direction: row;
    align-items: stretch;
}
.mealog-dialog-actions--pair > .mealog-btn,
.mealog-dialog-actions--stack > .mealog-btn,
.mealog-dialog-actions:has(> :nth-child(2)) > .mealog-btn {
    flex: 1;
    min-width: 0;
}
/* 취소(보조) + 실행(주요) 나란히일 때 실행 버튼을 좌우로 더 넓게 */
.mealog-dialog-actions--pair > .mealog-btn-secondary,
.mealog-dialog-actions--stack > .mealog-btn-secondary,
.mealog-dialog-actions:has(> .mealog-btn-primary):has(> .mealog-btn-secondary) > .mealog-btn-secondary {
    flex: 1 1 0;
}
.mealog-dialog-actions--pair > .mealog-btn-primary,
.mealog-dialog-actions--stack > .mealog-btn-primary,
.mealog-dialog-actions:has(> .mealog-btn-primary):has(> .mealog-btn-secondary) > .mealog-btn-primary {
    flex: 1.65 1 0;
}
.mealog-dialog-actions--border {
    border-top: 1px solid var(--line);
    background: var(--page);
    padding-top: 16px;
}
.mealog-dialog-actions--column,
.mealog-dialog-actions--column:has(> :nth-child(2)) {
    flex-direction: column;
}
.mealog-dialog-actions--column > .mealog-btn {
    flex: none;
    width: 100%;
}
/* 공유 모달 등 세그먼트형 액션바: 패딩/갭 없이 높이 토큰만 공유 */
.mealog-dialog-actions--flush {
    padding: 0;
    gap: 0;
    overflow: hidden;
}
.mealog-dialog-actions--flush > button {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 0;
    height: auto;
    min-height: var(--cta-btn-h);
}
.mealog-btn {
    border: 0;
    border-radius: var(--cta-btn-r);
    height: var(--cta-btn-h);
    padding: 0 14px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.12s ease, filter 0.14s ease;
}
.mealog-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
    filter: none;
}
.mealog-btn-primary {
    background: var(--cta-mint-grad);
    color: #fff;
    box-shadow: var(--cta-mint-shadow);
}
.mealog-btn-primary:hover:not(:disabled) {
    filter: brightness(1.02);
}
.mealog-btn-primary:active:not(:disabled) {
    filter: brightness(0.96);
    transform: scale(0.98);
}
.mealog-btn-secondary {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(36, 31, 28, 0.04);
}
.mealog-btn-secondary:hover:not(:disabled),
.mealog-btn-secondary:active:not(:disabled) {
    background: var(--line);
}
.mealog-btn-ghost {
    background: transparent;
    color: var(--muted);
    font-weight: 600;
    height: 40px;
}
.mealog-dialog-actions--pair > .mealog-btn-ghost,
.mealog-dialog-actions--stack > .mealog-btn-ghost,
.mealog-dialog-actions:has(> :nth-child(2)) > .mealog-btn-ghost {
    height: var(--cta-btn-h);
}
.mealog-btn-ghost:hover:not(:disabled),
.mealog-btn-ghost:active:not(:disabled) {
    color: var(--ink-2);
    background: rgba(255, 255, 255, 0.7);
}
.mealog-btn-danger {
    background: var(--cta-danger-grad);
    color: #fff;
    box-shadow: var(--cta-danger-shadow);
}
.mealog-btn-danger:hover:not(:disabled) {
    filter: brightness(1.02);
}
.mealog-btn-danger:active:not(:disabled) {
    filter: brightness(0.96);
    transform: scale(0.98);
}

/* —— Bottom Sheet 공통 —— */
#dailyJournalModal > div,
#profileFieldEditModal > div,
#accountAvatarModal > div,
#photoEditModal > div {
    border-radius: var(--shell-r-sheet) var(--shell-r-sheet) 0 0 !important;
    border-top: 1px solid var(--line);
    background: var(--page);
}
/*
 * 하단 밀착 시트(items-end): 시트 바닥이 뷰포트 끝에 붙어 기기 네비/제스처 바 밑으로 들어가
 * CTA가 시스템 바에 가렸다. 배경은 끝까지 채우되 콘텐츠만 gesture inset 위로 올린다.
 * (--safe-bottom-gesture: 실제 홈 인디케이터/네비 inset. nav-slot의 최소 48px 강제는 여기 쓰지 않음)
 */
#accountAvatarModal > div,
#profileFieldEditModal > div {
    padding-bottom: var(--safe-bottom-gesture);
}
/*
 * IME 열림: 그 inset 을 도로 없앤다. 키보드가 제스처 바를 덮고 있으므로 시트가 피할
 * 대상이 사라졌고, 남겨두면 CTA 아래 빈 띠로만 보인다 (같은 처리: 512행 body.ime-open).
 *
 * 판정을 `.is-ime-open` 이 아니라 body 로 하는 이유 — 그 클래스는 개별 VV 핀이 붙을 때만
 * 달리고, 핀은 overlay 모드 전용이라 **앱(Capacitor resize)에서는 아예 안 붙는다**
 * (js/utils/ime-viewport.js applyOverlayImePin). 정작 문제가 보이는 쪽이 앱이다.
 */
body.ime-open #accountAvatarModal > div,
body.ime-open #profileFieldEditModal > div {
    padding-bottom: 0;
}
@media (min-width: 640px) {
    #profileFieldEditModal > div,
    #accountAvatarModal > div,
    #photoEditModal > div,
    #reportModal > .relative {
        border-radius: var(--shell-r-dialog) !important;
        border: 1px solid var(--line);
    }
    /* 센터 다이얼로그로 전환 — 시스템 바와 겹치지 않으므로 inset 불필요 */
    #accountAvatarModal > div,
    #profileFieldEditModal > div {
        padding-bottom: 0;
    }
}
#entryModal {
    background-color: var(--shell-dim) !important;
}

/* —— Action Sheet (JS 생성) —— */
.mealog-action-dim {
    background: var(--shell-dim) !important;
}
[data-time-source-dismiss].mealog-action-dim,
.feed-bubble-popup-backdrop.mealog-action-dim {
    background: var(--shell-dim) !important;
}
.mealog-action-wrap {
    position: fixed;
    left: var(--shell-float-gutter, 1.25rem);
    right: var(--shell-float-gutter, 1.25rem);
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    z-index: var(--z-action-menu);
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: auto;
    max-width: var(--shell-float-width, 28rem);
    margin-left: auto;
    margin-right: auto;
}
.mealog-action-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--shell-r-dialog);
    overflow: hidden;
}
.mealog-action-card button,
.mealog-action-btn {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.85rem 1rem;
    transition: background 0.12s;
}
.mealog-action-card button:last-child,
.mealog-action-btn:last-child {
    border-bottom: 0;
}
.mealog-action-card button:active,
.mealog-action-btn:active {
    background: var(--page);
}
.mealog-action-card button .lucide,
.mealog-action-btn .lucide,
.mealog-action-card button [data-lucide],
.mealog-action-btn [data-lucide] {
    width: 1rem;
    height: 1rem;
    color: var(--muted);
}
.mealog-action-btn--danger,
.mealog-action-card button.mealog-action-btn--danger {
    color: var(--shell-danger);
}
.mealog-action-btn--danger .lucide,
.mealog-action-btn--danger [data-lucide],
.mealog-action-btn--danger i {
    color: var(--shell-danger) !important;
}
.mealog-action-cancel {
    min-height: 52px;
    border-radius: var(--shell-r-dialog);
    border: 1px solid var(--line);
    background: var(--card);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-2);
    cursor: pointer;
}
.mealog-action-cancel:active {
    background: var(--page);
}
.mealog-action-center-panel {
    border-radius: var(--shell-r-dialog) !important;
    border: 1px solid var(--line) !important;
    background: var(--card) !important;
    box-shadow: 0 12px 32px rgba(36, 31, 28, 0.14);
}

/* 레거시 액션시트(미마이그레이션) 보정 */
#feedOptionsMenu .fixed.bottom-0,
#boardPostOptionsMenu .fixed.bottom-0 {
    border-radius: var(--shell-r-sheet) var(--shell-r-sheet) 0 0;
    border-top: 1px solid var(--line);
    background: var(--page);
}
#feedOptionsMenu .w-12.h-1,
#boardPostOptionsMenu .w-12.h-1 {
    background: var(--line) !important;
}

/* —— Search / List —— */
#timelineSearchModal > .search-filter-modal__panel,
#momentSearchModal > .search-filter-modal__panel,
#boardSearchModal > .search-filter-modal__panel,
#notificationModal > .notification-modal,
#trackerMonthCalendarModal .tracker-month-calendar-panel {
    border-radius: var(--shell-r-dialog) !important;
    border: 1px solid var(--line) !important;
    background: var(--card) !important;
    box-shadow: 0 12px 40px rgba(36, 31, 28, 0.12);
}

/* 밀로그·모먼트·게시판 찾기 팝업 — Soft Mint */
.search-filter-modal__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: default;
    background: transparent;
}
.search-filter-modal__panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--card);
    max-height: min(85vh, 36rem);
}
.search-filter-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
    padding: 14px var(--mealog-dialog-pad-x) 12px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
    text-align: left;
}
.search-filter-modal__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.25;
    text-align: left;
}
.search-filter-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid #ddd4c8;
    border-radius: 9999px;
    background: #ffffff;
    color: #1f1a17;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.search-filter-modal__close:hover {
    background: #f3efe8;
    border-color: #cfc5b8;
}
.search-filter-modal__close i,
.search-filter-modal__close svg {
    width: 1.05rem;
    height: 1.05rem;
    stroke: currentColor;
}
.search-filter-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px var(--mealog-dialog-pad-x) 0;
    background: var(--page-deep, #faf6f2);
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}
.search-filter-modal__section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.search-filter-modal__label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted, #8a8076);
    letter-spacing: -0.01em;
}
.search-filter-modal__sublabel {
    display: block;
    margin: 0 0 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--muted, #8a8076);
}
.search-filter-modal__dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.125rem;
}
.search-filter-modal__input {
    width: 100%;
    box-sizing: border-box;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid #d8cfc3;
    border-radius: 0.75rem;
    background: #ffffff;
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 600;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-filter-modal__input:focus {
    border-color: var(--green, #3cb889);
    box-shadow: 0 0 0 3px rgb(60 184 137 / 0.18);
}
.search-filter-modal__input:disabled {
    background: #f3efe8;
    color: var(--ink-2);
}
.search-filter-modal__input--search {
    background: #ffffff;
}
.search-filter-modal__keyword {
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.search-filter-modal__hint {
    margin: 0.125rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--muted, #8a8076);
}
.search-chip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.search-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd4c8;
    border-radius: 9999px;
    background: #ebe4da;
    color: #8a8076;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.search-chip i,
.search-chip svg {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
    stroke: currentColor;
}
.search-chip:hover:not(.is-active) {
    color: #4a433c;
    background: rgb(255 255 255 / 0.55);
}
.search-chip.is-active,
.search-chip[aria-pressed="true"] {
    background: #ffffff;
    color: #1f1a17;
    font-weight: 700;
    border-color: #d4cbc0;
    box-shadow: 0 1px 3px rgb(36 31 28 / 0.1);
}
.search-chip--like:not(.is-active) {
    color: #e11d48;
}
.search-chip--like.is-active {
    color: #e11d48;
}
#timelineSearchModal .mealog-dialog-actions,
#momentSearchModal .mealog-dialog-actions,
#boardSearchModal .mealog-dialog-actions {
    flex-shrink: 0;
}

/* 알림 팝업 — Soft Mint Search/List (검색 팝업과 동일 셸) */
#notificationModal .notification-modal {
    /* 고정 높이로 목록 스크롤 영역을 확보 (내용 수에 따라 리스트가 짧아지던 문제 방지) */
    height: min(90vh, 42rem);
    max-height: min(90vh, 42rem);
    min-height: 0;
}
#notificationModal .notification-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
    padding: 14px var(--mealog-dialog-pad-x) 12px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
    text-align: left;
}
#notificationModal .notification-modal-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.25;
    text-align: left;
}
#notificationModal .notification-modal-head-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
#notificationModal .notification-mark-all-btn {
    border: 0;
    background: transparent;
    color: var(--green);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, opacity 0.14s ease;
}
#notificationModal .notification-mark-all-btn:hover {
    background: var(--green-soft);
    color: var(--green-deep);
}
#notificationModal .notification-mark-all-btn:active {
    opacity: 0.85;
}
#notificationModal .notification-mark-all-btn.invisible {
    visibility: hidden;
    pointer-events: none;
}
#notificationModal .notification-modal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    padding: 14px var(--mealog-dialog-pad-x) 8px;
    background: var(--page-deep, #faf6f2);
}
#notificationModal .notification-tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
    margin-bottom: 10px;
}
#notificationModal .notification-tab-btn {
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 999px;
    padding: 7px 12px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-2);
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
    -webkit-tap-highlight-color: transparent;
}
#notificationModal .notification-tab-btn:hover {
    background: var(--green-soft);
    border-color: var(--green-mute);
    color: var(--ink);
}
#notificationModal .notification-tab-btn.active,
#notificationModal .notification-tab-btn[aria-selected="true"] {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
#notificationModal .notification-tab-btn.active:hover,
#notificationModal .notification-tab-btn[aria-selected="true"]:hover {
    background: var(--green-deep);
    border-color: var(--green-deep);
    color: #fff;
}
#notificationModal .notification-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 0 4px;
    /* block: flex column이면 행이 shrink 되어 스크롤 대신 압축되며 일부만 보임 */
    display: block;
}
/* display 규칙이 Tailwind .hidden 보다 특이도가 높아 숨김이 무시되던 문제 보정 */
#notificationModal .notification-list.hidden {
    display: none;
}
#notificationModal .notification-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    flex-shrink: 0;
    text-align: left;
    padding: 10px 12px;
    margin: 0 0 6px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--card);
    color: inherit;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(36, 31, 28, 0.03);
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
#notificationModal .notification-row:last-child {
    margin-bottom: 0;
}
#notificationModal .notification-row:hover {
    background: var(--green-soft);
    border-color: var(--green-mute);
}
#notificationModal .notification-row:active {
    transform: scale(0.99);
}
#notificationModal .notification-row--dimmed {
    opacity: 0.88;
}
#notificationModal .notification-row--dimmed .notification-row-title {
    color: var(--ink-2);
    font-weight: 600;
}
#notificationModal .notification-row-thumb {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--green-soft);
    border: 1px solid var(--green-mute);
}
#notificationModal .notification-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#notificationModal .notification-row-ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--green-soft);
    border: 1px solid var(--green-mute);
    color: var(--green-deep);
}
#notificationModal .notification-row-ico i,
#notificationModal .notification-row-ico svg {
    width: 1.05rem;
    height: 1.05rem;
}
#notificationModal .notification-row-body {
    flex: 1 1 auto;
    min-width: 0;
}
#notificationModal .notification-row-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#notificationModal .notification-row-sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.35;
}
#notificationModal .notification-empty {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 16px 12px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.45;
}
#notificationModal .notification-empty.hidden {
    display: none;
}
#notificationModal .notification-list-loading {
    padding: 28px 12px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
}
#notificationModal .notification-read-hint {
    flex-shrink: 0;
    margin: 4px 0 0;
    padding: 8px 4px 12px;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--muted);
}
#notificationModal .notification-read-hint.hidden {
    display: none;
}
#notificationModal .mealog-dialog-actions {
    flex-shrink: 0;
    background: var(--card);
}

/* —— 좋아요 누른 사람 목록 —— */
#postLikesModal > .post-likes-modal {
    height: min(70vh, 32rem);
    max-height: min(70vh, 32rem);
    min-height: 0;
}
#postLikesModal .post-likes-modal-head {
    flex-shrink: 0;
    padding: 14px var(--mealog-dialog-pad-x) 12px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
    text-align: left;
}
#postLikesModal .post-likes-modal-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.25;
}
#postLikesModal .post-likes-modal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    padding: 10px var(--mealog-dialog-pad-x) 8px;
    background: var(--page-deep, #faf6f2);
}
#postLikesModal .post-likes-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 4px 0;
    display: block;
}
#postLikesModal .post-likes-list.hidden {
    display: none;
}
#postLikesModal .post-likes-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 4px;
}
#postLikesModal .post-likes-row-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--green-soft);
    border: 1px solid var(--green-mute);
    font-size: 16px;
    color: var(--green-deep);
    font-weight: 700;
}
#postLikesModal .post-likes-row-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#postLikesModal .post-likes-row-avatar--emoji {
    font-size: 18px;
}
#postLikesModal .post-likes-row-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#postLikesModal .post-likes-empty {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 16px 12px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.45;
}
#postLikesModal .post-likes-empty.hidden {
    display: none;
}
#postLikesModal .post-likes-loading {
    padding: 28px 12px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
}
#postLikesModal .mealog-dialog-actions {
    flex-shrink: 0;
    background: var(--card);
}

/* —— Fullscreen Media —— */
#momentImageLightbox,
#feedImageLightbox {
    background: var(--shell-ink) !important;
    backdrop-filter: none !important;
}
/* 원형 배경 없이 X만 노출 — 사진 배경이 밝아도 묻히지 않도록 아이콘에 그림자만 */
#momentImageLightbox [data-moment-lb-close] {
    background: transparent !important;
    border: none;
}
#feedImageLightbox button[aria-label="닫기"] {
    background: rgba(255, 255, 255, 0.14) !important;
    border-radius: 9999px;
}
#momentImageLightbox .moment-lb-main-img,
#feedImageLightbox img {
    border-radius: 12px !important;
}

/* —— Banner / Toast —— */
#toastContainer {
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: min(34rem, calc(100% - 1rem));
    padding: 0;
}
#toastContainer .mealog-toast {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1.15rem;
    border-radius: 9999px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    background: #000;
    box-shadow: 0 4px 16px rgba(36, 31, 28, 0.18);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#toastContainer .mealog-toast--success,
#toastContainer .mealog-toast--info,
#toastContainer .mealog-toast--error {
    background: #000;
}

#appUpdateRestartBanner.mealog-update-banner {
    left: 12px !important;
    right: 12px !important;
    top: calc(env(safe-area-inset-top, 0px) + 56px) !important;
    bottom: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 14px !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: var(--ink) !important;
    border: 1px solid var(--line);
    box-shadow: 0 2px 8px rgba(36, 31, 28, 0.06) !important;
    font-size: 13px !important;
}
#appUpdateRestartBanner.mealog-update-banner::before {
    content: "";
    width: 3px;
    align-self: stretch;
    border-radius: 3px;
    background: var(--green);
    flex-shrink: 0;
}
#appUpdateRestartBanner.mealog-update-banner button {
    background: var(--green-soft) !important;
    color: var(--green-deep) !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    padding: 8px 12px !important;
}

#loadingOverlay {
    background: rgba(255, 252, 249, 0.72) !important;
}
#loadingOverlay > div {
    border-radius: var(--shell-r-dialog) !important;
    border: 1px solid var(--line) !important;
    background: var(--card) !important;
    box-shadow: 0 8px 28px rgba(36, 31, 28, 0.1);
}

/* emerald-600 Tailwind → Mint Glow (주요 CTA) */
#accountAvatarModal .bg-emerald-600,
#profileFieldEditModal .bg-emerald-600,
#emailAuthModal .bg-emerald-600,
#bestShareModal .bg-emerald-600,
#insightShareModal .bg-emerald-600 {
    background-image: var(--cta-mint-grad) !important;
    background-color: transparent !important;
    box-shadow: var(--cta-mint-shadow);
}
#accountAvatarModal .hover\:bg-emerald-700:hover,
#emailAuthModal .hover\:bg-emerald-700:hover {
    filter: brightness(0.96);
    background-image: var(--cta-mint-grad) !important;
    background-color: transparent !important;
}

@keyframes mealogFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
    animation: mealogFadeUp 0.22s ease-out both;
}

/* ═══════════════════════════════════════════════════════════
   카카오 장소 검색 하단 시트
   ═══════════════════════════════════════════════════════════ */
.kakao-place-sheet {
    position: fixed;
    inset: 0;
    z-index: var(--z-picker-sheet);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow-x: hidden;
    background: rgba(36, 31, 28, 0.48);
    padding: 0;
}
.kakao-place-sheet__panel {
    width: 100%;
    max-width: 28rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: min(82vh, 100%);
    background: #fffdf9;
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: 0 -10px 36px rgba(36, 31, 28, 0.16);
    animation: mealogFadeUp 0.22s ease-out both;
}
.kakao-place-sheet__handle {
    width: 2.5rem;
    height: 0.25rem;
    margin: 0.625rem auto 0;
    border-radius: 9999px;
    background: #ddd4c8;
    flex-shrink: 0;
}
.kakao-place-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1.125rem 0.625rem;
    flex-shrink: 0;
}
.kakao-place-sheet__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1f1a17;
}
.kakao-place-sheet__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: #f3efe8;
    color: #6b6258;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.kakao-place-sheet__close:hover {
    background: #ebe4da;
    color: #1f1a17;
}
.kakao-place-sheet__close i,
.kakao-place-sheet__close svg {
    width: 1.05rem;
    height: 1.05rem;
}
.kakao-place-sheet__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0.25rem 1.125rem 1.25rem;
}
.kakao-place-sheet__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.875rem;
    padding: 0.375rem 0.375rem 0.375rem 0.375rem;
    background: #ffffff;
    border: 1.5px solid #d8cfc3;
    border-radius: 0.875rem;
    box-shadow: 0 1px 2px rgba(36, 31, 28, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kakao-place-sheet__search:focus-within {
    border-color: var(--green, #3cb889);
    box-shadow: 0 0 0 3px rgb(60 184 137 / 0.18);
}
.kakao-place-sheet__search-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    border: 1px solid var(--green-mute, #b4e2cd);
    border-radius: 0.625rem;
    background: var(--green-soft, #eaf8f2);
    color: var(--green-deep, #2d9f74);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kakao-place-sheet__search-btn:hover {
    background: var(--green-mute, #b4e2cd);
    border-color: var(--green-mute, #b4e2cd);
}
.kakao-place-sheet__search-btn:active {
    background: var(--green-mute, #b4e2cd);
    border-color: var(--green, #3cb889);
}
.kakao-place-sheet__search-btn i,
.kakao-place-sheet__search-btn svg {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--green-deep, #2d9f74);
    stroke: currentColor;
}
.kakao-place-sheet__input {
    flex: 1;
    min-width: 0;
    height: 2.125rem;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1f1a17;
}
.kakao-place-sheet__input::placeholder {
    color: #9a9084;
    font-weight: 500;
    font-size: 0.8125rem;
}
.kakao-place-sheet__apply-btn {
    flex-shrink: 0;
    height: 2.125rem;
    padding: 0 0.75rem;
    border: none;
    border-radius: 0.625rem;
    background: var(--green-soft, #eaf8f2);
    color: var(--green-deep, #2d9f74);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.kakao-place-sheet__apply-btn:hover {
    background: var(--green-mute, #b4e2cd);
    color: var(--green-deep, #2d9f74);
}
.kakao-place-sheet__apply-btn:active {
    filter: brightness(0.97);
}
.kakao-place-sheet__hint {
    margin: 0.5rem 0 0.75rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #8a8076;
}
.kakao-place-sheet__hint strong {
    color: var(--green-deep, #2d9f74);
    font-weight: 700;
}
.kakao-place-sheet__results {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
    max-height: 50vh;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.kakao-place-sheet__result {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid #e6ddd2;
    border-radius: 0.875rem;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.kakao-place-sheet__result:hover {
    background: #faf6f2;
    border-color: var(--green-mute, #b4e2cd);
}
.kakao-place-sheet__result:active {
    background: var(--green-soft, #eaf8f2);
}
.kakao-place-sheet__result-name {
    margin-bottom: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1f1a17;
}
.kakao-place-sheet__result-addr {
    font-size: 0.75rem;
    line-height: 1.35;
    color: #7a7167;
}
/* 결과 행 카테고리 꼬리표 ("냉면"·"카페"…) — 선택 전에 placeType 파생 근거를 보여준다 */
.kakao-place-sheet__result-cat {
    margin-left: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #0f766e;
    background: #f0fdf9;
    border: 1px solid #ccfbf1;
    border-radius: 0.375rem;
    padding: 0.0625rem 0.375rem;
    vertical-align: 1px;
}
/*
 * 거리 배지 — 좌표를 함께 보냈을 때만 카카오가 distance 를 채우므로, 이 배지가 보이는 것이
 * 곧 「근처 우선 정렬이 걸렸다」는 표시다. 주소 옆에 붙여 한 줄로 읽히게 둔다.
 */
.kakao-place-sheet__result-dist {
    margin-left: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #8a8076;
}
/*
 * 위치 권한 사전 안내 — OS 팝업을 바로 띄우지 않고 여기서 한 번 거른다.
 * Android 는 두 번 거부당하면 다시 물을 수 없어, 맥락 없이 뜬 팝업 하나가 기회를 영영 태운다.
 */
.kakao-place-sheet__anchor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0.25rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid #ccfbf1;
    border-radius: 0.75rem;
    background: #f0fdf9;
}
.kakao-place-sheet__anchor-text {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #0f766e;
}
.kakao-place-sheet__anchor-allow,
.kakao-place-sheet__anchor-deny {
    flex-shrink: 0;
    padding: 0.3125rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}
.kakao-place-sheet__anchor-allow {
    border: none;
    background: var(--green-deep, #2d9f74);
    color: #ffffff;
}
.kakao-place-sheet__anchor-deny {
    border: none;
    background: transparent;
    color: #8a8076;
    font-weight: 600;
}
.kakao-place-sheet__empty {
    padding: 2rem 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: #9a9084;
}

/* 주민등록번호 앞자리 숫자 칸 */
.rrn-digits {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
}
/* 앞자리(생년월일)는 칸을 쪼개지 않고 한 입력란으로 받는다 (js/utils.js mountRrnDigitGroup) */
.rrn-front {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.75rem;
    padding: 0 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #f8fafc;
    color: #1e293b;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.16em;
    text-align: center;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.rrn-front::placeholder {
    color: #cbd5e1;
    font-weight: 600;
    letter-spacing: 0.08em;
}
.rrn-front:focus {
    border-color: #34d399;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
/* 뒤 한 자리만 남았으므로 늘어나지 않고 고정 폭 */
.rrn-digit {
    flex: 0 0 auto;
    min-width: 0;
    width: 2.75rem;
    max-width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #f8fafc;
    color: #1e293b;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.rrn-digit:focus {
    border-color: #34d399;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.rrn-digits__hyphen {
    flex: 0 0 auto;
    padding: 0 0.1rem;
    color: #94a3b8;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}
.rrn-digits__mask {
    flex: 0 0 auto;
    margin-left: 0.15rem;
    color: #94a3b8;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    user-select: none;
}
#profileFieldEditPanelBirthdate .rrn-digit,
#profileFieldEditPanelBirthdate .rrn-front {
    background: #fff;
    height: 2.9rem;
}