/* 캐릭터 선택 팝업 */
.character-popup-item.active {
    background: var(--green-soft) !important;
    border: 1px solid var(--green);
}
.character-popup-item.active .text-slate-800 {
    color: var(--green);
    font-weight: 800;
}

/* 인스타그램 스타일 포스트 (앨범) - 선택 시 scale 효과 제거 */
.instagram-post {
    /* 클릭 시 작아졌다 커졌다 효과 없음 */
}

/* 앨범·밀톡 흔적 필터: FA regular/solid 글리프 그대로 (text-stroke 없음) */
.gallery-trace-btn .fa-heart,
.gallery-trace-btn .fa-comment,
.gallery-trace-btn .fa-bookmark {
    color: #64748b;
    -webkit-text-stroke: 0;
}
/* 메인 헤더(녹색 그라데이션): 흔적 필터 아이콘 흰색 */
body:has(#mainApp:not(.hidden)) #mainAppHeader .gallery-trace-btn .fa-heart,
body:has(#mainApp:not(.hidden)) #mainAppHeader .gallery-trace-btn .fa-comment,
body:has(#mainApp:not(.hidden)) #mainAppHeader .gallery-trace-btn .fa-bookmark {
    color: rgba(255, 255, 255, 0.95) !important;
    -webkit-text-stroke: 0 !important;
}
body:has(#mainApp:not(.hidden)) #mainAppHeader .gallery-trace-btn .fa-magnifying-glass {
    color: rgba(255, 255, 255, 0.95) !important;
}
body:has(#mainApp:not(.hidden)) #mainAppHeader .gallery-trace-btn[data-trace="like"].gallery-trace-btn--active .fa-heart {
    color: #fecaca !important;
}
body:has(#mainApp:not(.hidden)) #mainAppHeader .gallery-trace-btn[data-trace="like"]:hover .fa-heart {
    color: #fca5a5 !important;
}
body:has(#mainApp:not(.hidden)) #mainAppHeader .gallery-trace-btn[data-trace="comment"]:hover .fa-comment,
body:has(#mainApp:not(.hidden)) #mainAppHeader .gallery-trace-btn[data-trace="bookmark"]:hover .fa-bookmark {
    color: #ffffff !important;
}
.gallery-trace-btn[data-trace="like"]:hover .fa-heart {
    color: #ef4444;
}
.gallery-trace-btn[data-trace="comment"]:hover .fa-comment,
.gallery-trace-btn[data-trace="bookmark"]:hover .fa-bookmark {
    color: #475569;
}
.post-like-icon.fa-regular,
.post-bookmark-icon.fa-regular,
.post-comment-btn .fa-comment.fa-regular,
.post-comment-icon.fa-regular,
.board-post-like-btn .fa-heart.fa-regular,
.board-post-bookmark-btn .fa-bookmark.fa-regular,
.board-list-card .fa-heart,
.board-list-card .fa-comment.fa-regular,
.board-list-card .fa-bookmark {
    -webkit-text-stroke: 0.5px #ffffff;   /* white - 카드 배경 */
}

/* 댓글 단 게시물: 채워진 댓글 아이콘 (stroke 제거) */
.post-comment-icon.fa-solid,
.board-list-card .fa-comment.fa-solid {
    -webkit-text-stroke: 0;
}

/* 본문·댓글 없을 때 공유 게시글 본문 영역 숨김 */
.post-no-body .comment-section.comments-empty {
    display: none;
}
.post-no-body .comment-section.comments-empty.comment-input-open {
    display: block;
    padding-top: 0;
    margin-top: 0;
}

/* 좋아요, 북마크 버튼 애니메이션 */
.post-like-btn,
.post-bookmark-btn {
    transition: transform 0.15s ease;
}

.post-like-btn:active,
.post-bookmark-btn:active {
    transform: scale(0.9);
}

.post-like-btn.post-social-state-on .post-like-icon,
.post-like-icon.fa-solid {
    animation: heartBeat 0.5s ease;
}

@keyframes heartBeat {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* 댓글 입력 스타일 */
.post-comment-input:focus {
    outline: none;
}

.post-comment-input::placeholder {
    color: #cbd5e1;
}

.post-comment-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 댓글 목록 스타일 */
.post-comments-list {
    max-height: 200px;
    overflow-y: auto;
}

/* 앨범: 댓글이 없을 때 하단 영역 완전 제거 (댓글 입력 열림 시에만 표시) */
.comment-section.comments-empty {
    display: none !important;
}
.comment-section.comments-empty.comment-input-open {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}
.comment-section.comments-empty .post-comments-list {
    display: none !important;
}

.post-comments-list::-webkit-scrollbar {
    width: 4px;
}

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

.post-comments-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

.post-comments-list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* 댓글 더보기 버튼 */
.post-view-comments-btn {
    cursor: pointer;
    transition: color 0.2s;
}

.post-view-comments-btn:hover {
    color: #64748b;
}

.post-view-comments-btn:active {
    color: #475569;
}

/* 게시판 스타일 */
/* 글쓰기 버튼: 플로팅 FAB – 하단 네비 위에 배치 (safe-area 고려) */
#boardWriteBtn.board-write-fab {
    position: fixed;
    bottom: calc(var(--app-bottom-nav-h) + var(--safe-bottom) + var(--fab-above-nav-gap));
    right: calc(50% - min(46vw, 13rem) + 1.25rem);
    z-index: var(--z-fab);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cta-mint-grad) !important;
    color: white !important;
    box-shadow: var(--cta-mint-shadow);
    border: none;
    transition: box-shadow 0.2s, filter 0.2s;
}
#boardWriteBtn.board-write-fab:hover {
    filter: brightness(1.02);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 24px rgba(60, 184, 137, 0.42);
}
#boardWriteBtn.board-write-fab:active {
    filter: brightness(0.96);
}
#boardWriteBtn.board-write-fab.hidden {
    display: none !important;
    pointer-events: none;
}

/* 타임라인 기록 추가 — 슬롯 피커 (센터 팝업) */
.entry-slot-picker {
    background: var(--card);
    border-radius: var(--shell-r-dialog);
    border: 1px solid var(--line);
    box-shadow: 0 12px 40px rgba(36, 31, 28, 0.14);
}
/* entry-slot-picker grabber → .mealog-dialog-grabber 공통 스타일 사용 */
#entrySlotPickerModal .entry-slot-picker__head,
#slotPlanSettingsModal .entry-slot-picker__head {
    border-bottom: none;
    background: transparent;
}
#entrySlotPickerModal .entry-slot-picker__list,
#slotPlanSettingsModal .entry-slot-picker__list {
    padding-left: var(--mealog-dialog-pad-x);
    padding-right: var(--mealog-dialog-pad-x);
    box-sizing: border-box;
}
/* 두 열 카드 격자 (user-slot-plan §4.1) — 아이템 margin-bottom 은 gap 이 대신한다 */
.entry-slot-picker__group {
    margin-bottom: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}
.entry-slot-picker__group-title {
    margin: 0.35rem 0.5rem 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}
/* 아이콘 | (이름 / 건수) — 아이콘은 카드 높이의 중앙에 선다 */
.entry-slot-picker__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 0.875rem;
    background: #f8fafc;
    text-align: left;
    transition: background-color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.entry-slot-picker__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}
/* 하루 소감: 슬롯이 아니므로 전체 폭 한 줄 — 이름과 건수를 좌우로 벌린다 */
.entry-slot-picker__item--daily {
    grid-column: 1 / -1;
    gap: 0.625rem;
    margin-top: 0.25rem;
}
.entry-slot-picker__item--daily .entry-slot-picker__body {
    flex-direction: row;
    align-items: center;
}
.entry-slot-picker__item:active {
    background: #f1f5f9;
}
.entry-slot-picker__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    flex-shrink: 0;
    font-size: 0.875rem;
}
.entry-slot-picker__icon [data-lucide],
.entry-slot-picker__icon .lucide {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 1.75;
}
.entry-slot-picker__label {
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.25;
    /* 사용자 이름은 12자까지 — 좁은 기기에서 2줄 클램프 (user-slot-plan §4.1) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /*
     * 어절 단위로 접는다 — anywhere 만 두면 '저녁 후 간식'이 '저녁 후 간 / 식'
     * 으로 잘린다(375px 실측). anywhere 는 공백 없는 긴 이름('아침전간식먹고또먹기')
     * 의 넘침을 막는 뒷받침으로만 남긴다.
     */
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.entry-slot-picker__count {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--green);
    white-space: nowrap;
}
.entry-slot-picker__item--daily .entry-slot-picker__count {
    margin-left: auto;
}
.entry-slot-picker__item--daily .entry-slot-picker__count {
    margin-left: auto;
    text-align: right;
}
.entry-slot-picker__count--empty {
    color: #94a3b8;
    font-weight: 500;
}
.entry-slot-picker__settings-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;
    color: #94a3b8;
    -webkit-tap-highlight-color: transparent;
}
.entry-slot-picker__settings-btn:active {
    background: #f1f5f9;
    color: #475569;
}
.entry-slot-picker__settings-btn [data-lucide],
.entry-slot-picker__settings-btn .lucide {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 1.75;
}

/* ── 피커 메모 구역 (docs/user-memo-items.md §4.1) ── */
/*
 * 3열 · 중성 색 · 점선. 식사 슬롯은 base 색을 쓰고 2열이다 — 줄당 개수와 색이
 * 함께 달라야 소제목 없이도 두 구역이 갈린다.
 */
/*
 * 4열 — 같은 폭·같은 gap 이므로 **식사 카드 2칸 = 메모 카드 4칸**이 된다.
 * 위 구역과 한 뜼거로 붙지 않게 위 여백을 좀 더 벌린다.
 */
.entry-slot-picker__memo-group {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.15rem var(--mealog-dialog-pad-x) 0.5rem;
    margin-top: 0.5rem;
}
.entry-slot-picker__memo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 0.2rem 0.45rem;
    border-radius: 0.875rem;
    border: 1px dashed #cbd5e1;
    background: #fff;
    -webkit-tap-highlight-color: transparent;
}
.entry-slot-picker__memo:active {
    background: #f8fafc;
}
.entry-slot-picker__memo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: #64748b;
}
.entry-slot-picker__memo-icon [data-lucide],
.entry-slot-picker__memo-icon .lucide {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 1.75;
}
.entry-slot-picker__memo-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #334155;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-height: 1.25;
    /* 4열이라 칸이 좀다 — 긴 이름은 두 줄까지만 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.entry-slot-picker__memo-count {
    min-height: 0.9rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--green);
}

/* ── 메모 기록 시트 (§4.4) ── */
.memo-record__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.625rem;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    flex-shrink: 0;
}
.memo-record__icon [data-lucide],
.memo-record__icon .lucide {
    width: 1rem;
    height: 1rem;
    stroke-width: 1.75;
}
.memo-record__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* ── 체중 변동 팝업 (체중 메모 저장 직후) ──
 * 아이콘·값·증감·직전 기록·버튼을 전부 한 장의 카드에 담는다 — 기록 완료
 * 팝업(#successPopup)의 컨페티·Yeon Sung 흰 테두리 글자만 가져다 쓰고, 배치는
 * 보통 다이얼로그처럼 카드 하나로 묶었다(요소가 따로 떠 있으면 파편화돼
 * 보인다는 피드백). 체중계 아이콘은 원형 링·배경 없이 도안 그대로 쓴다
 * (링에 담으니 아이콘이 상대적으로 약해 보인다는 피드백). 전용 애니메이션
 * 트리거 클래스만 `.weight-diff-popup-anim`으로 따로 둔다 — body 전역
 * `.success-popup-anim`을 같이 쓰면 실제 식사·간식 기록 완료 팝업의
 * 타이머·상태와 얽힌다.
 */
#weightDiffPopupContent {
    --celebrate-popup-text-outline: calc(36px * 0.42);
}
/*
 * successPopupFade/Pop 은 800ms 뒤 opacity:0 으로 끝난다 — 원본 successPopup 이
 * 그 순간 display:none 으로 같이 숨기 때문에 문제가 안 됐던 것뿐이다. 이 팝업은
 * 수동으로 닫으므로 그 키프레임을 그대로 쓰면 애니메이션이 끝난 뒤 내용이 화면에
 * '남아 있지만 투명한' 상태가 된다. 끝나도 다 보이는 웰컴 팝업 쪽 키프레임을 쓴다.
 */
.weight-diff-popup-anim #weightDiffPopupBackdrop {
    animation: attendancePopupBackdropIn 380ms ease-out forwards;
}
.weight-diff-popup-anim #weightDiffPopupContent {
    animation: attendancePopupContentIn 500ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}
.weight-diff-popup-anim #weightDiffPopupConfetti .confetti-piece {
    animation: confettiBurst 800ms ease-out forwards;
}
/* 도안 그대로 — 원·링 없이 이미지 그대로, 카드 위에서 존재감을 갖게 크게 */
.weight-diff-popup__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.weight-diff-popup__badge img {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
}
#weightDiffPopupValueSvg {
    overflow: visible;
    margin-top: -0.25rem;
}
/* 카드 자체 — 아이콘부터 버튼까지 전부 이 안에 산다 (entry-slot-picker와 같은 결) */
.weight-diff-popup__card {
    box-sizing: border-box;
    gap: 0.5rem;
    padding: 1.125rem 1rem 1rem;
    border-radius: var(--shell-r-dialog);
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: 0 16px 48px rgba(36, 31, 28, 0.22);
}
.weight-diff-popup__delta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.95rem;
    border-radius: 9999px;
    font-size: 0.9375rem;
    font-weight: 800;
    background: #f1f5f9;
    color: #475569;
}
.weight-diff-popup__delta [data-lucide] {
    width: 1.05rem;
    height: 1.05rem;
    stroke-width: 2.25;
}
.weight-diff-popup__delta--up {
    background: #fff1e6;
    color: #ea580c;
}
.weight-diff-popup__delta--down {
    background: #eaf1fd;
    color: #2563eb;
}
.weight-diff-popup__delta--flat {
    background: #f1f5f9;
    color: #64748b;
}
/* 날짜·시각 줄과 상대 날짜 줄을 분리 — 한 줄로 붙이면 카드 폭에서 어중간하게 줄바꿈된다 */
.weight-diff-popup__when {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    text-align: center;
}
.weight-diff-popup__when span {
    display: block;
}
#weightDiffPopupWhenMain {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}
#weightDiffPopupWhenRel {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94a3b8;
}
.weight-diff-popup__close-btn {
    align-self: stretch;
    width: 100%;
    margin-top: 0.15rem;
}

/* 도움말이 열려 있는 동안은 버튼도 눌린 낯 — 어디서 열렸는지 보이게 */
.entry-slot-picker__settings-btn--on {
    background: #f1f5f9;
    color: #334155;
}

/* ── 기록 항목 설정 시트 (user-slot-plan §4.2) ── */
/*
 * 시트가 화면을 넘지 않게 못 박는다. 패널이 overflow:hidden 이라 넘친 만큼이
 * **위아래에서 잘려** 제목과 저장 버튼이 사라진다(360×640 실측 — 목록 70vh
 * 상한에 머리·날짜·바닥을 더하면 짧은 화면에서 이미 넘친다).
 * 머리·날짜·바닥은 고정, 남는 높이는 목록이 갖고 목록만 스크롤한다.
 */
#slotPlanSettingsModal .entry-slot-picker {
    max-height: 100%;
}
#slotPlanSettingsModal .mealog-dialog-grabber,
#slotPlanSettingsModal .entry-slot-picker__head,
#slotPlanSettingsModal .slot-plan-settings__footer {
    flex-shrink: 0;
}
#slotPlanSettingsModal .slot-plan-settings__list {
    flex: 1 1 auto;
    min-height: 4.5rem;
}

/*
 * 도움말 팝업 — 설정 시트 **위에** 겹친다 (user-slot-plan §4.2).
 * 시트 안에 접었다 펴는 안내로 두었더니 짧은 화면에서 목록을 밀어내 정작
 * 설명대로 해 볼 대상이 안 보였다. 겹치는 대신 설명 자체를 '무엇을 하고
 * 싶은지'로 묶어, 읽고 닫으면 바로 그 자리인 편이 낫다.
 */
/*
 * 딤을 옅게 — 아래 설정 시트가 이미 제 딤을 깔고 있어서, 여기에 같은 농도를
 * 또 얹으면 두 겹이 되어 시트가 통째로 사라진다. 설정 화면 위에 잠깐 뜬
 * 설명이라는 감각을 지키려면 시트가 비쳐 보여야 한다.
 */
.slot-plan-help__backdrop {
    background: rgba(79, 72, 65, 0.2);
    background: color-mix(in srgb, var(--ink-2) 20%, transparent);
}
.slot-plan-help {
    max-height: 100%;
    background: var(--card);
    border-radius: var(--shell-r-dialog);
    border: 1px solid var(--line);
    box-shadow: 0 12px 40px rgba(36, 31, 28, 0.14);
}
.slot-plan-help__head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem var(--mealog-dialog-pad-x) 0.5rem;
}
.slot-plan-help__title {
    min-width: 0;
    flex: 1;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #1e293b;
}
.slot-plan-help__x {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;
    color: #64748b;
    -webkit-tap-highlight-color: transparent;
}
.slot-plan-help__x:active {
    background: #f1f5f9;
    color: #334155;
}
.slot-plan-help__x [data-lucide],
.slot-plan-help__x .lucide {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 2;
}
.slot-plan-help__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 바닥 버튼이 없다 — 닫기는 우상단 X·바깥·ESC. 마지막 줄 여백은 본문이 진다 */
    padding: 0 var(--mealog-dialog-pad-x) 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.slot-plan-help__item h3 {
    margin: 0 0 0.2rem;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #334155;
}
.slot-plan-help__item p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.65;
    color: #64748b;
}
.slot-plan-help__item p + p {
    margin-top: 0.35rem;
}
/* 본문 속 아이콘 — 어느 버튼을 말하는지 글로만 설명하기 어렵다 */
.slot-plan-help__icon {
    display: inline;
    vertical-align: -0.15em;
    margin: 0 0.15rem;
    width: 0.9375rem;
    height: 0.9375rem;
    stroke-width: 2;
    color: #475569;
}

#slotPlanSettingsModal .slot-plan-settings__list {
    display: block;
}
.slot-plan-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid #f1f5f9;
}
.slot-plan-row--off .slot-plan-row__label-input,
.slot-plan-row--off .slot-plan-row__base {
    color: #94a3b8;
}
.slot-plan-row--off .slot-plan-row__icon {
    opacity: 0.45;
}
.slot-plan-row--dragging {
    background: #f8fafc;
    border-radius: 0.75rem;
}

/* ── 목록 순서 끌기 (js/utils/list-drag-reorder.js) ──
 *
 * 끄는 동안 DOM 순서는 그대로다. 비켜서는 연출이 전부 여기 있다.
 */
.list-drag__row {
    transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.3, 1);
    will-change: transform;
}
/*
 * 끄는 행만은 전환을 끊는다 — 손가락을 1:1로 따라야 하는데 0.16s 가 걸리면
 * 그만큼 뒤에서 따라오는 것처럼 보인다.
 */
.list-drag__row--lift {
    transition: none;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
    border-radius: 0.75rem;
}
/* 끄는 중에는 글자가 잡히지 않게 — 길게 눌러 선택되면 끌기가 끊긴다 */
.list-drag__row {
    -webkit-user-select: none;
    user-select: none;
}
/* 손잡이에 포커스가 가면 보인다 — 화살표 키로 옮기는 길이 있다는 신호 */
.slot-plan-row__drag:focus-visible {
    outline: 2px solid var(--green, #059669);
    outline-offset: 2px;
    border-radius: 0.375rem;
}
/* 손잡이·연필은 '만질 수 있다'는 유일한 신호다 — 흐리면 아무도 못 본다 (사용자 피드백) */
/*
 * 손가락이 닿는 넓이는 **44px**(HIG 44pt / Material 48dp). 예전엔 17x25 였고,
 * 47px 짜리 행에서 위아래 11px 씩이 죽은 공간이었다 — 조준해야 잡히는 손잡이는
 * 끌기가 아무리 부드러워도 불편하다.
 *
 * 글리프는 그대로 두고 **영역만** 넓힌다. 아이콘을 키우면 목록이 시끄러워진다.
 * 세로는 `align-self: stretch` 로 행 높이를 받고, 행 안쪽 여백은 아래 두 규칙이
 * 음수 마진으로 마저 먹는다. 가로로 늘어난 만큼은 좌우 음수 마진으로 되돌려
 * 이름 칸이 밀리지 않게 한다.
 */
.slot-plan-row__drag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 2.25rem;
    /*
     * 늘어난 폭은 좌우 음수 마진으로 되돌린다 — 왼쪽은 행·목록의 여백(죽은 공간)
     * 으로, 오른쪽은 아이콘과의 간격으로. 글리프는 제자리에 남고 이름 칸도
     * 3px 밖에 안 밀린다.
     */
    margin-left: -0.75rem;
    margin-right: -0.5rem;
    padding: 0;
    border-radius: 0.625rem;
    color: #64748b;
    touch-action: none;
    cursor: grab;
    -webkit-tap-highlight-color: transparent;
}
/* 눌린 낯 — 잡혔다는 신호가 있어야 끌지 말지 손이 정한다 */
.slot-plan-row__drag:active {
    background: #f1f5f9;
}
.slot-plan-row > .slot-plan-row__drag {
    margin-top: -0.5rem;
    margin-bottom: -0.5rem;
}
.memo-settings__row > .slot-plan-row__drag {
    margin-top: -0.35rem;
    margin-bottom: -0.35rem;
}
.slot-plan-row__drag [data-lucide],
.slot-plan-row__drag .lucide {
    width: 1.0625rem;
    height: 1.0625rem;
    stroke-width: 2;
}
.slot-plan-row__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.625rem;
}
.slot-plan-row__icon [data-lucide],
.slot-plan-row__icon .lucide {
    width: 1rem;
    height: 1rem;
    stroke-width: 1.75;
}
.slot-plan-row__main {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.slot-plan-row__label-input {
    min-width: 0;
    flex: 0 1 auto;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1e293b;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    border-bottom: 1px dashed #e2e8f0;
}
.slot-plan-row__label-input:focus {
    border-bottom-color: #94a3b8;
}
/*
 * 이름을 고칠 수 있다는 신호.
 *
 * 이름 바로 옆에 붙여 뒀더니 이름 길이만큼 행마다 좌우로 튀어 목록이 어수선했다
 * (사용자 피드백). `margin-left: auto` 로 이름 칸 오른쪽 끝에 세워 **한 열로**
 * 맞춘다. 점선 밑줄은 그대로 글자만큼만 — 그게 '고칠 수 있다'의 신호다.
 */
.slot-plan-row__pencil {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    color: #64748b;
    background: #f1f5f9;
    -webkit-tap-highlight-color: transparent;
}
.slot-plan-row__pencil:active {
    background: #e2e8f0;
    color: #334155;
}
.slot-plan-row__pencil [data-lucide],
.slot-plan-row__pencil .lucide {
    width: 0.875rem;
    height: 0.875rem;
    stroke-width: 2;
}
/*
 * 라벨이 상태다 — '사용 중' / '사용 안 함'. 두 글자 수가 달라 폭이 들썩이므로
 * 최소 폭을 잡아 삭제 버튼과 같은 열에 세운다.
 */
.slot-plan-row__toggle {
    flex-shrink: 0;
    min-width: 4.6rem;
    text-align: center;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.5rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #059669;
    -webkit-tap-highlight-color: transparent;
}
.slot-plan-row__toggle[aria-pressed="false"] {
    background: #f1f5f9;
    color: #64748b;
}
/* 확장 슬롯 자리 — 원본의 사용/해제와 같은 칸, 다른 의미 */
.slot-plan-row__del {
    flex-shrink: 0;
    min-width: 4.6rem;
    text-align: center;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: #fef2f2;
    color: #dc2626;
    -webkit-tap-highlight-color: transparent;
}
.slot-plan-row__del:active {
    background: #fee2e2;
}
.slot-plan-row__dup {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    color: #64748b;
    -webkit-tap-highlight-color: transparent;
}
.slot-plan-row__dup:active {
    background: #f1f5f9;
    color: #475569;
}
.slot-plan-row__dup [data-lucide],
.slot-plan-row__dup .lucide {
    width: 1rem;
    height: 1rem;
    stroke-width: 1.75;
}
/* ── 메모 설정 팝업 — 목록과 새 항목이 한 화면 (docs/user-memo-items.md §4.3) ── */
/* 시트로 전환해 열린다 — 기록 항목 설정과 같은 꺼데기 */
#memoSettingsModal .memo-settings {
    max-height: 100%;
}
#memoSettingsModal .mealog-dialog-grabber,
#memoSettingsModal .entry-slot-picker__head,
#memoSettingsModal .memo-settings__new {
    flex-shrink: 0;
}
/* ── 새 기능 안내 말풍선 (js/utils/feature-hint.js) ─────────── */
/*
 * body 에 fixed 로 붙는다 — 가리키는 버튼이 모달 안에 있고 그 모달이
 * overflow:hidden 이라, 같은 조상 안에 두면 말풍선이 잘린다.
 * z 는 Tailwind 임의값이 아니라 여기서 준다(빌드 산출물에 없는 클래스는 조용히
 * 무시된다 — «공유 항목» 팝업이 그 함정에 한 번 걸렸다).
 */
.feature-hint {
    position: fixed;
    z-index: var(--z-feature-hint);
    display: flex;
    align-items: flex-start;
    gap: 6px;
    max-width: min(17rem, calc(100vw - 32px));
    padding: 0.55rem 0.5rem 0.55rem 0.75rem;
    border-radius: 0.75rem;
    /*
     * 색은 `--ink` 다. 처음엔 slate-800(#1e293b)을 썼는데 그건 **차가운 청회색**이라
     * 이 앱의 팔레트 밖이다 — 여기는 ink #241f1c · muted #7a7268 · line #d0c6ba 로
     * 이어지는 따뜻한 먹색 체계고, 팝업 딤(`--shell-dim`)도 ink-2 에서 나온다.
     * 흰 카드 위에 떠도 겉돌지 않으려면 같은 온도여야 한다.
     *
     * 초록(`--green`)은 후보가 아니다. 토큰 주석이 「CTA·선택·활성만」이라 못박고
     * 있고, 안내는 누를 대상이 아니다 — 초록으로 칠하면 버튼처럼 읽힌다.
     */
    background: var(--ink, #241f1c);
    color: var(--page, #fffcfa);
    box-shadow: 0 8px 24px rgba(36, 31, 28, 0.3);
    font-size: 0.8125rem;
    line-height: 1.45;
    animation: feature-hint-in 0.18s ease-out;
}
/* 꼬리 — 왼쪽에서 --feature-hint-tail 만큼 떨어진 곳이 가리키는 지점이다 */
.feature-hint::after {
    content: '';
    position: absolute;
    top: -5px;
    left: var(--feature-hint-tail, 50%);
    margin-left: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--ink, #241f1c);
}
.feature-hint__text {
    min-width: 0;
    word-break: keep-all;
}
.feature-hint__close {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -0.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    color: rgba(255, 252, 250, 0.62);
    font-size: 1rem;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
.feature-hint__close:active {
    background: rgba(255, 252, 250, 0.16);
    color: var(--page, #fffcfa);
}
@keyframes feature-hint-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .feature-hint { animation: none; }
}

/* ── 하루 기록 공유 «공유 항목» 설정 (js/modals/daily-share-items.js) ── */
/* 공유 미리보기 모달(--z-onboarding) 위에 겹친다 — Tailwind 임의값을 쓰지 않는 이유는 그쪽 주석에 */
.daily-share-items-modal {
    z-index: var(--z-share-items);
}
.daily-share-items {
    background: var(--card);
    border-radius: var(--shell-r-dialog);
    border: 1px solid var(--line);
    box-shadow: 0 12px 40px rgba(36, 31, 28, 0.14);
}
.daily-share-items__hint {
    margin: 0;
    padding: 0 var(--mealog-dialog-pad-x) 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #94a3b8;
}
/*
 * 스크롤하는 것은 **항목 목록뿐이다.** 아래 표시 방식 두 줄은 밖에 고정돼 있으므로
 * 상한을 그만큼 낮춰 잡는다 — 예전 값(60vh·26rem) 그대로 두면 항목이 많은 사람의
 * 팝업이 두 줄만큼 더 커져 작은 화면에서 위아래가 잘린다.
 */
.daily-share-items__list {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    max-height: min(52vh, 22rem);
    padding: 0 var(--mealog-dialog-pad-x) 0.5rem;
}
/*
 * «표시 방식» 두 줄이 앉는 고정 자리 (js/modals/daily-share-items.js).
 *
 * 목록 **밖**이라는 것이 핵심이다. 안에 있던 시절에는 메모 항목이 몇 개만 켜져
 * 있어도 코멘트·태그가 스크롤 아래로 밀려, 있는 줄도 모르고 지나가는 설정이었다.
 *
 * 줄어들지 않게 못박는다(`flex-shrink: 0`) — 위 목록이 `flex: 0 1 auto` 로
 * 남는 자리를 다 쓰려 들기 때문에, 여기가 양보하면 고정한 의미가 없어진다.
 */
.daily-share-items__modes {
    flex-shrink: 0;
    padding: 0.25rem var(--mealog-dialog-pad-x) 0.75rem;
    border-top: 1px solid #e2e8f0;
}
.daily-share-items__row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.6rem 0;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    -webkit-tap-highlight-color: transparent;
}
.daily-share-items__row:last-child {
    border-bottom: none;
}
.daily-share-items__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;
    background: #f8fafc;
    color: #64748b;
}
.daily-share-items__icon [data-lucide],
.daily-share-items__icon .lucide {
    width: 1.0625rem;
    height: 1.0625rem;
    stroke-width: 1.9;
}
.daily-share-items__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 auto;
}
.daily-share-items__label {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1e293b;
}
/* 간식 줄의 슬롯 이름 나열은 길어질 수 있다 — 줄을 늘리지 말고 자른다 */
.daily-share-items__desc {
    font-size: 0.75rem;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.memo-settings__list {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    padding: 0 var(--mealog-dialog-pad-x);
}
.memo-settings__row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0;
}
/* 순서 끌기 — 피커 격자에 보이는 순서다(타임라인 자리는 시각이 정한다) */
.memo-settings__row-wrap--dragging {
    background: #f8fafc;
    border-radius: 0.75rem;
}
.memo-settings__row-wrap {
    border-bottom: 1px solid #f1f5f9;
}
.memo-settings__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    -webkit-tap-highlight-color: transparent;
}
/* 격자가 펼쳐진 대상은 누릀 낯 — 어느 줄의 격자인지 자리로 드러난다 */
.memo-settings__icon--on {
    background: #ecfdf5;
    border-color: var(--green, #059669);
    border-style: solid;
    color: #059669;
}
.memo-settings__icon [data-lucide],
.memo-settings__icon .lucide {
    width: 1.0625rem;
    height: 1.0625rem;
    stroke-width: 1.75;
}
.memo-settings__name {
    min-width: 0;
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1e293b;
    background: transparent;
    border: none;
    outline: none;
    padding: 0.2rem 0;
    border-bottom: 1px dashed #e2e8f0;
}
.memo-settings__name:focus {
    border-bottom-color: #94a3b8;
}
.memo-settings__grid {
    padding: 0.1rem 0 0.55rem;
}
.memo-settings__empty {
    margin: 0;
    padding: 0.2rem 0 0.6rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #94a3b8;
}
/* 새 항목 — 목록 바로 아래, 같은 행 모양으로 */
.memo-settings__row-wrap--off .memo-settings__name,
.memo-settings__row-wrap--off .memo-settings__unit {
    color: #94a3b8;
}
.memo-settings__row-wrap--off .memo-settings__icon {
    opacity: 0.5;
}
/* 단위 — 숫자 메모임을 이름 옆에서 조용히 알린다 (§2.7) */
.memo-settings__unit {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
}
.memo-settings__new {
    padding: 0.55rem var(--mealog-dialog-pad-x) 1rem;
    border-top: 1px solid #f1f5f9;
}
.memo-settings__new-head {
    margin: 0 0 0.1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
}
.memo-settings__new-hint {
    margin: 0.4rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #94a3b8;
}
/* 아이콘 판이 열려 있으면 안내는 제 할 일을 끝냈다 */
.memo-settings__new-hint.hidden {
    display: none;
}
.memo-settings__row--new .memo-settings__name::placeholder {
    font-weight: 600;
    color: #cbd5e1;
}
.memo-settings__make {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--green, #059669);
    color: #fff;
    -webkit-tap-highlight-color: transparent;
}
.memo-settings__make:active {
    filter: brightness(0.95);
}

/* ── 메모 항목 만들기·고치기 팝업 (§4.3) ── */
.slot-memo-edit__presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.slot-memo-edit__presets.hidden {
    display: none;
}
.slot-memo-edit__preset {
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 0.3rem 0.65rem;
    -webkit-tap-highlight-color: transparent;
}
.slot-memo-edit__preset:active {
    background: #e2e8f0;
}
/* 고른 칩은 상태가 남는다 — 이름칸을 직접 고치면 풀린다 (기록 시트 제안 줄과 같은 관용구) */
.slot-memo-edit__preset--on {
    background: var(--green, #059669);
    color: #fff;
}
.slot-memo-edit__field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.slot-memo-edit__field--icons {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.4rem;
}
.slot-memo-edit__field label {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
}
.slot-memo-edit__field input[type="text"] {
    flex: 1;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1e293b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.625rem;
    padding: 0.4rem 0.65rem;
}
.slot-memo-edit__field input[type="text"]:focus {
    outline: none;
    border-color: #94a3b8;
}
.slot-memo-edit__icons {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.35rem;
    width: 100%;
}
.slot-memo-edit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 0.625rem;
    border: 1px solid transparent;
    background: #f8fafc;
    color: #64748b;
    -webkit-tap-highlight-color: transparent;
}
.slot-memo-edit__icon--on {
    border-color: var(--green, #059669);
    background: #ecfdf5;
    color: #059669;
}
.slot-memo-edit__icon [data-lucide],
.slot-memo-edit__icon .lucide {
    width: 1.0625rem;
    height: 1.0625rem;
    stroke-width: 1.75;
}
.slot-memo-edit__error {
    margin: 0;
    min-height: 1.1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #dc2626;
}
.slot-memo-edit__foot {
    flex-shrink: 0;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem var(--mealog-dialog-pad-x) 1rem;
}

.slot-plan-settings__footer {
    padding: 0.5rem var(--mealog-dialog-pad-x) 1rem;
}
.slot-plan-settings__notice {
    margin: 0.4rem 0 0.75rem;
    font-size: 0.75rem;
    line-height: 1.55;
    color: #94a3b8;
    background: #f8fafc;
    border-radius: 0.625rem;
    padding: 0.5rem 0.65rem;
}
.slot-plan-settings__actions {
    display: flex;
    gap: 0.5rem;
}
.slot-plan-settings__btn {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.6rem 0;
    border-radius: 0.75rem;
    background: #f1f5f9;
    color: #475569;
    -webkit-tap-highlight-color: transparent;
}
.slot-plan-settings__btn--primary {
    background: var(--green, #059669);
    color: #fff;
}


/* 하루 소감 — 체중·혈당은 메모로 옴겼다는 안내 한 줄 (user-memo-items §7.1) */
.daily-journal-metrics-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0 1rem 0.25rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 0.75rem;
    line-height: 1.55;
    color: #64748b;
}
.daily-journal-metrics-notice b {
    color: #334155;
    font-weight: 700;
}
.daily-journal-metrics-notice [data-lucide],
.daily-journal-metrics-notice .lucide {
    flex-shrink: 0;
    width: 0.9375rem;
    height: 0.9375rem;
    margin-top: 0.15rem;
    stroke-width: 1.75;
}

/* 밀로그 퀵입력 FAB — 게시판 글쓰기와 동일 스타일·위치 */
#entryQuickInputFab.entry-quick-input-fab {
    position: fixed;
    bottom: calc(var(--app-bottom-nav-h) + var(--safe-bottom) + var(--fab-above-nav-gap));
    right: calc(50% - min(46vw, 13rem) + 1.25rem);
    z-index: var(--z-fab);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cta-mint-grad) !important;
    color: white !important;
    box-shadow: var(--cta-mint-shadow);
    border: none;
    transition: box-shadow 0.2s, filter 0.2s;
}
#entryQuickInputFab.entry-quick-input-fab:hover {
    filter: brightness(1.02);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 24px rgba(60, 184, 137, 0.42);
}
/* 배경(원형 버튼)은 고정, + 아이콘만 180° 회전 (밀로그·라운지 공통) */
#entryQuickInputFab.entry-quick-input-fab.cta-fab--spin,
#boardWriteBtn.board-write-fab.cta-fab--spin {
    pointer-events: none;
}
#entryQuickInputFab.entry-quick-input-fab.cta-fab--spin [data-lucide],
#entryQuickInputFab.entry-quick-input-fab.cta-fab--spin .lucide,
#boardWriteBtn.board-write-fab.cta-fab--spin [data-lucide],
#boardWriteBtn.board-write-fab.cta-fab--spin .lucide {
    animation: cta-fab-icon-spin 0.28s ease-out forwards;
}
@keyframes cta-fab-icon-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(180deg); }
}
#entryQuickInputFab.entry-quick-input-fab.hidden {
    display: none !important;
    pointer-events: none;
}

/* 초기 기록 로딩 스피너 — mealSyncResendBtn 과 동일 위치·크기(48px), 음식 아이콘만 */
#initialRecordsLoadFab.initial-records-load-fab,
#galleryMomentsRefreshFab.initial-records-load-fab,
#timelineRefreshFab.initial-records-load-fab {
    position: fixed;
    bottom: calc(var(--app-bottom-nav-h) + var(--safe-bottom) + var(--fab-above-nav-gap));
    right: calc(50% - min(46vw, 13rem) + 1.25rem);
    z-index: var(--z-fab);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a !important;
    color: #ffffff !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.35);
    border: 1px solid #020617;
    transition: box-shadow 0.2s, transform 0.12s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}
#initialRecordsLoadFab.initial-records-load-fab:active,
#galleryMomentsRefreshFab.initial-records-load-fab:active,
#timelineRefreshFab.initial-records-load-fab:active {
    transform: scale(0.94);
}
#initialRecordsLoadFab.initial-records-load-fab.hidden,
#galleryMomentsRefreshFab.initial-records-load-fab.hidden,
#timelineRefreshFab.initial-records-load-fab.hidden {
    display: none !important;
    pointer-events: none;
}
/* 갤러리·밀로그 새로고침 전용: 표시만, 탭 불가 */
#galleryMomentsRefreshFab.initial-records-load-fab,
#timelineRefreshFab.initial-records-load-fab {
    pointer-events: none;
    cursor: default;
    z-index: var(--z-fab-stacked);
}
/* 밀톡에서 글쓰기 FAB와 겹침 방지 — 동기화 FAB와 동일 규칙 */
#initialRecordsLoadFab.initial-records-load-fab.initial-records-load-fab--stacked {
    /* 네비 + 간격 + FAB(48) + FAB 간 간격(8) */
    bottom: calc(var(--app-bottom-nav-h) + var(--safe-bottom) + var(--fab-above-nav-gap) + 56px);
}

/* 식사 기록 미전송 일괄 재전송 FAB — bottom-nav 위·글쓰기 FAB와 동일 위치(밀톡 탭일 때는 위로 겹침) */
#mealSyncResendBtn.meal-sync-resend-fab {
    position: fixed;
    bottom: calc(var(--app-bottom-nav-h) + var(--safe-bottom) + var(--fab-above-nav-gap));
    right: calc(50% - min(46vw, 13rem) + 1.25rem);
    z-index: var(--z-fab-under);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a !important;
    color: #ffffff !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.35);
    border: 1px solid #020617;
    transition: box-shadow 0.2s, transform 0.12s, bottom 0.2s, background-color 0.2s, opacity 0.15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
#mealSyncResendBtn.meal-sync-resend-fab .meal-sync-resend-fab__icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.125rem;
    height: 1.125rem;
    display: none;
    align-items: center;
    justify-content: center;
}
#mealSyncResendBtn.meal-sync-resend-fab:not(.meal-sync-resend-fab--transport-offline) .meal-sync-resend-fab__icon--sync {
    display: flex;
}
#mealSyncResendBtn.meal-sync-resend-fab--transport-offline:not(.meal-sync-resend-fab--chain-relink) .meal-sync-resend-fab__icon--off {
    display: flex;
}
#mealSyncResendBtn.meal-sync-resend-fab--transport-offline.meal-sync-resend-fab--chain-relink .meal-sync-resend-fab__icon--on {
    display: flex;
    animation: mealSyncChainRelink 0.68s ease-out;
}
@keyframes mealSyncChainRelink {
    0% {
        transform: scale(0.82);
        opacity: 0.55;
    }
    45% {
        transform: scale(1.08);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    #mealSyncResendBtn.meal-sync-resend-fab--transport-offline.meal-sync-resend-fab--chain-relink .meal-sync-resend-fab__icon--on {
        animation: none;
    }
}
#mealSyncResendBtn.meal-sync-resend-fab--transport-offline {
    background: #334155 !important;
    border-color: #475569;
    box-shadow: 0 2px 12px rgba(51, 65, 85, 0.45);
}
#mealSyncResendBtn.meal-sync-resend-fab .meal-sync-resend-fab__spinner {
    display: none;
    position: absolute;
    inset: 0;
    margin: auto;
}
#mealSyncResendBtn.meal-sync-resend-fab.meal-sync-resend-fab--busy {
    cursor: wait;
    pointer-events: none;
    transform: scale(0.98);
    box-shadow: 0 2px 16px rgba(15, 23, 42, 0.5), 0 0 0 3px rgba(96, 165, 250, 0.35);
}
#mealSyncResendBtn.meal-sync-resend-fab.meal-sync-resend-fab--busy .meal-sync-resend-fab__icon--sync,
#mealSyncResendBtn.meal-sync-resend-fab.meal-sync-resend-fab--busy .meal-sync-resend-fab__icon--off,
#mealSyncResendBtn.meal-sync-resend-fab.meal-sync-resend-fab--busy .meal-sync-resend-fab__icon--on {
    display: none !important;
}
#mealSyncResendBtn.meal-sync-resend-fab.meal-sync-resend-fab--busy .meal-sync-resend-fab__spinner {
    display: flex !important;
}
#mealSyncResendBtn.meal-sync-resend-fab.meal-sync-resend-fab--busy .meal-sync-resend-fab__badge {
    opacity: 0.35;
}
@media (prefers-reduced-motion: reduce) {
    #mealSyncResendBtn.meal-sync-resend-fab.meal-sync-resend-fab--busy {
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.35);
    }
}
#mealSyncResendBtn.meal-sync-resend-fab:hover {
    background: #1e293b !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.45);
}
#mealSyncResendBtn.meal-sync-resend-fab:active:not(:disabled):not(.meal-sync-resend-fab--busy) {
    transform: scale(0.94);
}
#mealSyncResendBtn.meal-sync-resend-fab.hidden {
    display: none !important;
    pointer-events: none;
}
/* 밀톡·밀로그 화면에서 글쓰기/퀵입력 FAB( z-40 )와 겹치지 않도록 한 단 올림 */
#mealSyncResendBtn.meal-sync-resend-fab.meal-sync-resend-fab--stacked {
    bottom: calc(var(--app-bottom-nav-h) + var(--safe-bottom) + var(--fab-above-nav-gap) + 56px);
}
#mealSyncResendBtn.meal-sync-resend-fab .meal-sync-resend-fab__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 4px;
    border-radius: 9999px;
    background: #1e293b;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #fff;
}
#mealSyncResendBtn.meal-sync-resend-fab .meal-sync-resend-fab__badge.hidden {
    display: none !important;
}
/* 재시도·삭제실패만 남았을 때(주황 대기 0) — 배지 톤만 살짝 구분 */
#mealSyncResendBtn.meal-sync-resend-fab .meal-sync-resend-fab__badge.meal-sync-resend-fab__badge--retry-only {
    background: #b91c1c;
    box-shadow: 0 0 0 2px #fff;
}