/* Tab layout primitives (main app) */
.ui-tab-view {
    min-height: 60vh;
    padding: 0.75rem 1rem; /* py-3 px-4 */
}
/* 일간 하루 기록: 타임라인 탭 좌우 패딩을 상쇄해 가로를 꽉 채우되, 본문·제목은 양쪽에 한 글자씩 여백 */
#timelineView .daily-journal-section {
    margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem);
    max-width: none;
    box-sizing: border-box;
    padding-left: max(0.75rem, 1em);
    padding-right: max(0.75rem, 1em);
}
/* 일간 좌우 스와이프: 현재·다음 날짜 패널이 함께 이동 */
.timeline-daily-swipe-viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    touch-action: pan-y;
    min-height: 30vh;
}
.timeline-daily-swipe-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    min-height: 30vh;
    will-change: transform;
}
.timeline-daily-swipe-panel--current {
    z-index: 1;
}
.timeline-daily-swipe-panel--incoming {
    z-index: 0;
    background: var(--page-deep, #faf6f2);
}
.timeline-daily-swipe-panel > #timelineContainer,
.timeline-daily-swipe-panel > #timelineContainerOutgoing {
    width: 100%;
    box-sizing: border-box;
}
/* meals 리스너 degraded: 일부만 표시 / 인덱스·재시도 안내 */
.meals-load-degraded-banner {
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid #fcd34d;
    background: #fffbeb;
    color: #92400e;
}
.meals-load-degraded-banner__inner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.meals-load-degraded-banner__text {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.45;
}
.meals-load-degraded-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.meals-load-degraded-banner__link {
    font-size: 0.75rem;
    font-weight: 700;
    color: #b45309;
    text-decoration: underline;
}
.meals-load-degraded-banner__retry {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.35rem 0.65rem;
    border-radius: 0.5rem;
    border: 1px solid #f59e0b;
    background: #fff;
    color: #b45309;
}
.daily-journal-summary-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.625;
    max-height: calc(1.625em * 5);
    text-overflow: ellipsis;
}
.daily-journal-summary-row .flex.items-start {
    align-items: flex-start;
}
/* 하루 기록 모달 — 체중·혈당 number 입력 스피너 숨김 */
.daily-journal-metric-no-spin {
    -moz-appearance: textfield;
    appearance: textfield;
}
.daily-journal-metric-no-spin::-webkit-outer-spin-button,
.daily-journal-metric-no-spin::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* 모먼트 좌우: #galleryView 단일 규칙(아래)에서 처리 — .ui-tab-view 기본 padding과 중복되지 않게 둠 */
.ui-surface-soft { background: var(--app-page-bg); }
.ui-stack-lg > * + * { margin-top: 1rem; }       /* space-y-4 */
.ui-stack-md > * + * { margin-top: 0.75rem; }    /* space-y-3 */
.ui-stack-sm > * + * { margin-top: 0.5rem; }     /* space-y-2 */
.ui-stack-tight > * + * { margin-top: 0.375rem; }/* space-y-1.5 */
/* 모먼트2: 게시물 간격 = 카드 `mb-1.5` 등. 부모 .ui-stack-sm의 인접 margin-top(0.5rem) 끄기(직접 자식 래퍼·헤더용) */
#galleryContainer.moment-feed-layout-v2.ui-stack-sm > * + * {
    margin-top: 0;
}
/* 갤러리 화면2: 게시물 열 — 간격은 `gap`만 (자식 margin-bottom으로 간격 내지 않음) */
#galleryContainer.moment-feed-layout-v2 #galleryPostsInsertPoint {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--moment-v2-gallery-post-gap, 14px);
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    /* 시안 .feed: 좌우 여백으로 카드가 화면을 꽉 채우지 않게 */
    padding: 14px 14px calc(100px + var(--safe-bottom, 0px)) !important;
}

/* 모먼트 초기 로딩 스켈레톤(풀폭 슬롯 + 쉬머) */
@keyframes moment-feed-skel-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}
.moment-feed-skel-base {
    position: relative;
    overflow: hidden;
    background-color: #e2e8f0;
    background-image: linear-gradient(
        90deg,
        #e2e8f0 0%,
        #f1f5f9 16%,
        #f1f5f9 38%,
        #f1f5f9 58%,
        #e2e8f0 100%
    );
    background-size: 240% 100%;
    background-position: 200% 0;
    animation: moment-feed-skel-shimmer 1.25s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .moment-feed-skel-base {
        animation: none;
        background-image: none;
    }
}
#galleryContainer .moment-feed-skeleton-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
/* JS 앵커용 `.instagram-post`: 시각 박스 없음(투명 래퍼) */
#galleryContainer.moment-feed-layout-v2 .instagram-post.moment-v2-gallery-post-shell[data-moment-card-layout='2'] {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none;
    outline: none;
    overflow: visible;
}
/* 시각 카드: 스코프 한 덩어리만 — 바깥 간격은 부모 gap */
#galleryContainer.moment-feed-layout-v2
    .instagram-post.moment-v2-gallery-post-shell[data-moment-card-layout='2']
    .moment-feed-v2-scope[data-moment-v2-root] {
    /* 시안 v2: 화이트 카드 — 라운드는 카드 외곽만, 사진은 overflow로 클립 */
    background-color: #ffffff;
    border: 1px solid var(--line, #d0c6ba);
    border-radius: 18px;
    box-shadow:
        0 1px 0 rgba(43, 40, 37, 0.06),
        0 6px 18px rgba(43, 40, 37, 0.07) !important;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
}
/* 시안: 사진 뒤 블러 앰비언트 제거 */
#galleryContainer.moment-feed-layout-v2 .moment-v2-hpost-bg-wrap,
#galleryContainer.moment-feed-layout-v2 .moment-v2-v-unit-bg-wrap {
    display: none !important;
}
/* 시안 v2 본문: 작성자 → 슬롯·장소 → 메뉴 → 코멘트 → 소셜 */
#galleryContainer.moment-feed-layout-v2 .moment-v2-body[data-moment-v2-caption] {
    /* 하단 여백 = 소셜 상단(4px)과 맞춤 */
    padding: 14px 16px 4px !important;
    margin: 0 !important;
    gap: 0;
    background: #ffffff;
}
#galleryContainer.moment-feed-layout-v2 .moment-v2-author-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
#galleryContainer.moment-feed-layout-v2 .moment-v2-avatar {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--avatar-fallback-bg, #e2e8f0);
    background-size: cover;
    background-position: center;
    display: grid;
    place-items: center;
    box-shadow: var(--avatar-shadow);
}
#galleryContainer.moment-feed-layout-v2 .moment-v2-avatar--fallback {
    color: var(--avatar-fallback-fg, #334155);
    font-family: var(--avatar-fallback-font);
    font-size: 17px !important;
    font-weight: 700;
    line-height: 1;
}
#galleryContainer.moment-feed-layout-v2 .moment-v2-author-name {
    font-family: 'Pretendard', sans-serif;
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0f172a;
    line-height: 1.25;
}
#galleryContainer.moment-feed-layout-v2 .moment-v2-author-sub {
    font-family: 'Pretendard', sans-serif;
    font-size: 12px !important;
    font-weight: 500;
    color: #94a3b8;
    margin-top: 1px;
    line-height: 1.3;
}
#galleryContainer.moment-feed-layout-v2 .moment-v2-author-row .timeline-meal-photo-meatball-btn {
    width: 32px;
    height: 32px;
    color: #94a3b8;
}
#galleryContainer.moment-feed-layout-v2 .moment-v2-author-row .moment-v2-more-icon {
    color: #94a3b8 !important;
    font-size: 16px;
    filter: none !important;
}
#galleryContainer.moment-feed-layout-v2 .moment-v2-body .timeline-meal-photo-moment-social-icon {
    color: #64748b !important;
    filter: none !important;
    font-size: calc(17px * 1.25) !important;
}
/* 장소·메뉴·코멘트 밴드: 위·아래 보더라인 사이 = Paper (본문 패딩 밖으로 좌우 full-bleed) */
#galleryContainer.moment-feed-layout-v2 .moment-v2-body-caption {
    background: var(--page, #fffcfa);
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}
#galleryContainer.moment-feed-layout-v2 .moment-v2-meal-heading {
    border-top: 1px solid var(--line, #d0c6ba);
    /* 코멘트 박스(.moment-v2-meal-note) 내부 좌측(12px)과 텍스트 열 정렬 */
    padding: 10px 12px 0;
}
#galleryContainer.moment-feed-layout-v2 .moment-v2-meal-meta {
    font-family: 'Pretendard', sans-serif;
    font-size: 12.5px !important;
    font-weight: 500;
    color: #94a3b8;
    margin-bottom: 3px;
    line-height: 1.35;
}
#galleryContainer.moment-feed-layout-v2 .moment-v2-meal-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: #0f172a;
    margin-bottom: 0; /* 코멘트와의 간격은 .moment-v2-meal-note 의 위 패딩(8px) 하나로 잡는다 */
}
#galleryContainer.moment-feed-layout-v2 .moment-v2-body-caption:not(:has(.moment-v2-meal-note)) .moment-v2-meal-title {
    margin-bottom: 12px;
}
#galleryContainer.moment-feed-layout-v2 .moment-v2-meal-note {
    font-family: 'Pretendard', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    margin-bottom: 12px;
    /* 위 8px 가 제목과의 간격 전부 — 예전엔 제목 여백 6 + 패딩 10 = 16px 이라 벌어 보였다 */
    padding: 8px 12px 10px !important;
    max-height: none !important;
    overflow: visible !important;
    text-indent: 0 !important;
    -webkit-text-fill-color: #64748b;
    /* 밴드(.moment-v2-body-caption) Paper를 그대로 노출 */
    background: transparent;
    border-radius: 12px;
}
/* 빈 캡션 블록은 JS에서 미렌더 — 남아도 높이 0 */
#galleryContainer.moment-feed-layout-v2 .moment-v2-body-caption:empty {
    display: none;
}
#galleryContainer.moment-feed-layout-v2 .moment-v2-body .moment-v2-social-below-photo {
    /* 소셜 영역 높이 ≈ 이전(확대 시)의 80%: 상단 패딩 축소 */
    padding: 4px 0 0 !important;
    margin-top: 0;
    border-top: 1px solid var(--line, #d0c6ba);
    background: transparent;
}
#galleryContainer.moment-feed-layout-v2
    .instagram-post.moment-v2-gallery-post-shell[data-moment-card-layout='2']
    .moment-v2-media-wrap {
    margin: 0;
    padding: 0;
}
/* 갤러리: 다음 글 사진까지 gap만 쓰려면 스택 상단 패딩 제거 */
#galleryView:not(.hidden)
    #galleryContainer.moment-feed-layout-v2
    .instagram-post.moment-v2-gallery-post-shell[data-moment-card-layout='2']
    .moment-v2-wheel-center-stack {
    padding-top: 0 !important;
}
/* 프로필 뒤로가기 줄: 세로 패딩 제거(게시물 간에 끼는 여백 방지) */
#galleryContainer.moment-feed-layout-v2
    .instagram-post.moment-v2-gallery-post-shell[data-moment-card-layout='2']
    > div.px-2.pt-2 {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* 베스트/일간 등 카드 아래 보조 블록 — 래퍼와 gap 사이 추가 여백 제거 */
#galleryContainer.moment-feed-layout-v2 .instagram-post.moment-v2-gallery-post-shell .moment-v2-gallery-post-aux {
    margin: 0;
    padding: 0;
    max-width: 100%;
    box-sizing: border-box;
}
#galleryContainer.moment-feed-layout-v2
    .instagram-post.moment-v2-gallery-post-shell
    .moment-v2-gallery-post-aux
    > .px-3.pt-2 {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* 푸터·댓글 패널: 카드 밑으로 새는 margin 제거(게시물 간 = 열 gap). 본문 패딩은 .moment-v2-body 규칙 */
#galleryContainer.moment-feed-layout-v2
    .instagram-post.moment-v2-gallery-post-shell
    .moment-v2-caption-footer[data-moment-v2-caption]:not(.moment-v2-body) {
    margin: 0 !important;
    padding: 0 !important;
}
#galleryContainer.moment-feed-layout-v2
    .instagram-post.moment-v2-gallery-post-shell
    .moment-v2-social-comments-panel {
    margin: 0 !important;
    padding-bottom: 0 !important;
}
#galleryContainer.moment-feed-layout-v2
    .instagram-post.moment-v2-gallery-post-shell
    .moment-v2-caption-footer--social-only {
    margin-bottom: 0 !important;
}
.mealog-title { 
    font-family: 'Fredoka', sans-serif; 
    font-weight: 600; 
}
/* 헤더 타이틀: 시안 v2 — Fredoka 600 · 28px · brand green */
header .mealog-title { 
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--green);
}
/* 서브 타이틀 (INSIGHT, MEAL TALK, 게시글, 글쓰기) – Pretendard, 700, 대문자 */
.sub-title { 
    font-family: 'Pretendard', sans-serif; 
    font-weight: 700; 
    text-transform: uppercase; 
}
/* INSIGHT, MEAL TALK 타이틀 - Fredoka, 얇게, 소문자 */
.insight-title,
.meal-talk-title {
    font-family: 'Fredoka', sans-serif;
    font-weight: 300;
    text-transform: lowercase;
}
.card { 
    background: white; 
    border-radius: 1.5rem; 
    box-shadow: 0 1px 0 rgba(43, 40, 37, 0.06), 0 6px 18px rgba(43, 40, 37, 0.07); 
    border: 1px solid var(--line, #d0c6ba); 
}

/* 주간베스트 코멘트 입력창: 포커스 시 보더 진한 회색 1px */
#bestShareComment:focus {
    outline: none;
    border-width: 1px;
    border-color: #475569; /* slate-600, 진한 회색 */
}

#generalCommentInput,
#snackCommentInput,
#dailyCommentInput {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    -webkit-tap-highlight-color: transparent;
}
#generalCommentInput:focus,
#generalCommentInput:focus-visible,
#generalCommentInput:active,
#snackCommentInput:focus,
#snackCommentInput:focus-visible,
#snackCommentInput:active,
#dailyCommentInput:focus,
#dailyCommentInput:focus-visible,
#dailyCommentInput:active {
    border-color: #e2e8f0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 메뉴@장소 손글씨: 나눔손글씨 가람연꽃 (눈누 CDN) */
@font-face {
    font-family: '나눔손글씨 가람연꽃';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_04@1.0/Garam.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* 타임라인 사진 팝업 하단 메뉴@장소 */
.timeline-meal-photo-menu-bar {
    font-family: '나눔손글씨 가람연꽃', 'Nanum Garam Yeonkot', 'Nanum Pen Script', cursive;
    font-size: 18px;
    font-weight: normal;
    line-height: 1.35;
}
.calendar-scroll { 
    display: flex; 
    overflow-x: auto; 
    cursor: grab;
    /* 하단 여백은 #trackerSection padding-bottom에서 통일 */
    padding: 2px 16px 0; 
    gap: 4px; 
    scroll-padding-inline: 16px; 
}
.calendar-scroll.calendar-scroll-dragging {
    cursor: grabbing;
    user-select: none;
}
.calendar-scroll .calendar-item,
.calendar-scroll .calendar-dot {
    cursor: grab;
}
.calendar-scroll.calendar-scroll-dragging .calendar-item,
.calendar-scroll.calendar-scroll-dragging .calendar-dot {
    cursor: grabbing;
}
.calendar-scroll::-webkit-scrollbar { 
    display: none; 
}
/* 시안 v2 트래커: 숫자 원형(상) + 요일(하) */
.calendar-item.cal-day {
    flex: 0 0 auto;
    min-width: 40px;
    gap: 6px;
    padding: 4px 0 2px;
    color: var(--ink, #241f1c);
}
.calendar-dow {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted, #7a7268);
    line-height: 1;
}
.calendar-item.cal-day.weekend .calendar-dow,
.calendar-dow.text-rose-400 {
    color: #fb7185 !important;
}
.calendar-dot { 
    position: relative;
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    display: grid; 
    place-items: center; 
    font-size: 15px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; 
    background: transparent; 
    color: var(--ink, #241f1c);
    border: 0;
}
.calendar-density {
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--green-mute, #b4e2cd);
    pointer-events: none;
}
.dot-none .calendar-density {
    background: transparent;
}
.dot-low .calendar-density {
    background: var(--green-mute, #b4e2cd);
    opacity: 0.55;
}
.dot-mid .calendar-density {
    background: var(--green-mute, #b4e2cd);
    opacity: 1;
}
.dot-partial .calendar-density {
    background: var(--green-mute, #b4e2cd);
}
.dot-full .calendar-density {
    background: var(--green, #3cb889);
}
.dot-selected .calendar-density {
    display: none;
}
.dot-full,
.dot-mid,
.dot-low,
.dot-partial,
.dot-none { 
    background: transparent; 
    color: var(--ink, #241f1c);
    border: 0;
}
.dot-selected { 
    transform: none; 
    border: 0; 
    background: var(--green, #3cb889) !important; 
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(45, 159, 116, 0.35);
}
.calendar-item.cal-day.selected .calendar-dow {
    color: var(--green-deep, #2d9f74) !important;
    font-weight: 700;
}
/* 하단 메뉴 라벨 배경 50% 불투명 — 휠 전역 캡션 줄은 아래 짙은 회색·흰 글자 규칙 */
#timelineMealPhotosOverlay .timeline-meal-photo-menu-bar:not(.timeline-meal-photos-slide-caption-inner) {
    background-color: rgba(0, 0, 0, 0.5) !important;
}
#timelineMealPhotosOverlay {
    --meal-wheel-viewport-h: 30px;
    --meal-wheel-item-h: 30px;
    --meal-photo-overlay-content-pad-x: 10px;
}
/* 모먼트 화면2: 카드에서 연 휠 팝업 — 캐러셀 셀을 위쪽 정렬(사진이 항상 상단), 하단 휠 라벨은 JS로 이미지 실제 높이에 맞춤 */
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--moment-feed:not(.hidden) .timeline-meal-photos-vslide-stage--wheel-only {
    justify-content: flex-start;
    align-items: stretch;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--moment-feed:not(.hidden) .timeline-meal-photos-carousel-frame {
    justify-content: flex-start;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--moment-feed:not(.hidden) .timeline-meal-photos-hstrip .timeline-meal-photo-cell.justify-center {
    justify-content: flex-start;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--moment-feed:not(.hidden) .timeline-meal-photos-hstrip .timeline-meal-photo-cell .items-end {
    align-items: flex-start;
    justify-content: flex-start;
}
/* 전체 화면 덮는 레이어 — 사진·라벨은 좌우 10px(노치는 safe-area와 병행). 닫기 버튼이 사진 밖으로 나와도 잘리지 않도록 루트는 visible, 본문만 클립 */
#timelineMealPhotosOverlay:not(.hidden) .meal-photos-overlay-body {
    box-sizing: border-box;
    overflow: hidden;
    padding-left: max(var(--meal-photo-overlay-content-pad-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--meal-photo-overlay-content-pad-x), env(safe-area-inset-right, 0px));
}
/* 댓글 열림: flex 세로 가운데 정렬(overflow hidden으로 상·하 클립) 금지. JS 측정값(--meal-overlay-post-comments-reserve)으로 하단만 예약, 패널은 그 영역에 absolute */
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--post-comments-open:not(.hidden) .meal-photos-overlay-body {
    min-height: 0;
    overflow: visible; /* stage는 absolute 푸터로 overflow visible — 기본 body overflow:hidden이 라벨 하단을 잘리지 않게 */
    /* 예약: 첫 측정 전 min(40vh,300px) — JS가 px로 덮어씀 */
    padding-bottom: calc(1px + var(--meal-overlay-post-comments-reserve, min(40vh, 300px)));
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--post-comments-open:not(.hidden) .timeline-meal-photos-stage--with-footer {
    min-height: 0;
    /* 휠 기본 overflow:visible — 댓글 열릴 때 overflow:hidden 쓰면 absolute 푸터(하단라벨)가 잘림 */
    overflow: visible;
}
/* 댓글 패널: 하단 예약(padding) 위에 겹쳐 올림. 너비·톤 = 하단라벨 열 + 코멘트 밴드 */
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--post-comments-open:not(.hidden) [data-meal-overlay-post-comments-panel]:not(.hidden) {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-feed-overlay-panel);
    width: var(--meal-wheel-caption-inner-w, 100%);
    max-width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-height: min(48vh, 360px);
    border-radius: 0;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    padding: 0.375rem 0.375rem;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
    color: #fff;
}
/* 소셜 댓글 목록 — `data-meal-overlay-comment-band` 본문과 동일 서체·크기(라운드 없음, 패널은 위와 동일 border/bg) */
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photos-overlay-post-comments-list-text {
    padding-left: 1ch;
    font-family: '나눔손글씨 가람연꽃', 'Nanum Garam Yeonkot', 'Nanum Pen Script', cursive;
    font-size: 18px;
    font-weight: normal;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.9);
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-post-comments-panel:not(.hidden) .meal-overlay-post-comments-list {
    max-height: min(5lh, calc(18px * 1.35 * 5));
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.38) transparent;
    -webkit-overflow-scrolling: touch;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel
    .timeline-meal-photos-post-comments-panel:not(.hidden)
    .meal-overlay-post-comments-list::-webkit-scrollbar {
    width: 2px;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel
    .timeline-meal-photos-post-comments-panel:not(.hidden)
    .meal-overlay-post-comments-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.38);
    border-radius: 1px;
}
/* 사진 팝업 열림: 뒤로 스크롤 전달 억제. 세로=vtrack(pan-y), 캐러셀=pan-x pan-y(세로 스와이프가 vtrack으로 전달) */
#timelineMealPhotosOverlay:not(.hidden) {
    overscroll-behavior: contain;
    touch-action: none;
}
/* 루트는 max-w-md 컬럼 폭만 쓰고, 좌우 끝까지 덮는 밝은 스크림(JS로 visualViewport 맞춤) */
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photos-overlay-backdrop {
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photos-vtrack {
    touch-action: pan-y;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photos-carousel-zone,
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photos-carousel-frame {
    touch-action: pan-x pan-y;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photos-carousel-viewport {
    touch-action: pan-x pan-y;
}
/* 가로 스트립 + 세로는 상위 vtrack(게시물 간) */
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photos-hstrip,
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photos-hstrip .timeline-meal-photo-img {
    touch-action: pan-x pan-y;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-img {
    touch-action: pan-y;
    transition: opacity 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* 모먼트 사진 팝업(라이트박스): 타임라인 사진 팝업과 동일한 전환 곡선·시간 */
#momentImageLightbox:not(.hidden) .moment-lb-main-img {
    transition: opacity 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* 가로 스트립 안 이미지: 일반 .timeline-meal-photo-img 규칙보다 우선 — 마우스 드래그·터치 가로 허용 */
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photos-hstrip .timeline-meal-photo-img {
    -webkit-user-drag: none;
    user-select: none;
}
/* 현재/전체 뱃지: 사진 하단 중앙(JS로 translateX(-50%)) — 하단 라벨(메뉴바)과 동일 서체, 테두리 없음 */
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photos-carousel-badge {
    font-family: '나눔손글씨 가람연꽃', 'Nanum Garam Yeonkot', 'Nanum Pen Script', cursive;
    font-weight: 400;
    border: none !important;
}
/* 모먼트 휠 팝업: 사진 위 프로필 칩 / 소셜은 배경 없이 아이콘만 그림자로 대비 */
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-chrome {
    pointer-events: none;
}
/* 프로필+닉 칩: 아이콘(h-8=32px) + 4px = 36px → h-9 */
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-chrome-chip {
    box-shadow: 0 1px 8px rgba(15, 23, 42, 0.2);
    box-sizing: border-box;
    min-height: calc(2rem + 4px);
    height: calc(2rem + 4px);
}
/* 모먼트 팝업 프로필 아이콘: 1px 흰색 링 */
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-avatar {
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-nick {
    font-family: '나눔손글씨 가람연꽃', 'Nanum Garam Yeonkot', 'Nanum Pen Script', cursive;
    font-weight: 700;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-btn {
    box-sizing: border-box;
    border: none !important;
    background-color: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-btn:active {
    background-color: transparent !important;
}
/* 소셜 3열: 히트(2rem)에 맞춤 — 행 gap 0(버튼끼리 맞닿이듯 좁힘) */
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-row {
    gap: 0;
    align-items: center;
}
/* 상단(크롬) / 예전 하단: 미트볼(세로 ⋮) — 배경 없음, 아이콘 그림자 */
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-meatball-btn {
    box-sizing: border-box;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-meatball-icon {
    font-size: calc(17px * 0.7);
    line-height: 1;
}
/* 모먼트 오버레이 ⋮ 메뉴: 너비 절반 + 유리 느낌(투명도) — 패널은 JS에서 class 부여 */
.feed-options-center-panel button[type='button'] {
    padding: 0.65rem 0.5rem;
    font-size: 0.8125rem;
    text-align: center;
    background-color: rgba(241, 245, 249, 0.92) !important;
}
.feed-options-center-panel button[type='button']:active {
    background-color: rgba(226, 232, 240, 0.96) !important;
}
.feed-options-center-panel button[type='button'] .font-bold {
    font-size: 0.8125rem;
}
.feed-options-center-panel button[type='button'] .fa-solid,
.feed-options-center-panel button[type='button'] .fa-regular {
    font-size: 0.875rem;
}
.feed-options-center-panel button[type='button'] .flex.items-center {
    gap: 0.45rem;
    justify-content: center;
    width: 100%;
}
/* 좋아요·북마크: 전체·숫자 약 115% (기본 2rem·17px/0.75rem 대비) */
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-row .post-bookmark-btn {
    margin-right: 10px;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-hit {
    box-sizing: border-box;
    min-width: calc(2rem * 1.25);
    width: calc(2rem * 1.25);
    max-width: min(100%, 12rem);
    padding: 0;
    overflow: visible;
    transition: width 0.18s ease, min-width 0.18s ease, padding 0.18s ease;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-icon-slot {
    flex: 0 0 calc(2rem * 1.25);
    width: calc(2rem * 1.25);
    min-width: calc(2rem * 1.25);
    height: calc(2rem * 1.25);
    box-sizing: border-box;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-row .post-like-btn,
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-row .post-comment-btn,
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-row .post-bookmark-btn {
    min-height: calc(2rem * 1.25);
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-row .post-comment-btn,
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-row .post-bookmark-btn {
    width: calc(2rem * 1.25);
    height: calc(2rem * 1.25);
    min-width: calc(2rem * 1.25);
    flex-shrink: 0;
}
#timelineMealPhotosOverlay:not(.hidden) .post-like-btn.timeline-meal-photo-moment-social-hit:has(.post-like-count:not(:empty)) {
    width: auto;
    min-width: calc(2rem * 1.25);
    padding-left: 0;
    padding-right: calc(0.125rem * 1.25);
    gap: calc(0.125rem * 1.25);
    justify-content: flex-start;
}
#timelineMealPhotosOverlay:not(.hidden)
    .post-like-btn.timeline-meal-photo-moment-social-hit:has(.post-like-count:not(:empty))
    .timeline-meal-photo-moment-social-icon-slot {
    flex: 0 0 calc(1.5rem * 1.25);
    width: calc(1.5rem * 1.25);
    min-width: calc(1.5rem * 1.25);
    justify-content: flex-end;
    padding-right: 0;
}
/* 소셜 FA: `-webkit-text-stroke` 쓰지 않음(이중 획처럼 됨) — 아이콘 실루엣은 `fa-regular`/`fa-solid` 글리프. 사진 대비는 그림자만 */
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-icon {
    display: inline-block;
    -webkit-text-stroke: 0;
    paint-order: normal;
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.62)) drop-shadow(0 0 1px rgba(15, 23, 42, 0.48));
    font-size: calc(17px * 1.25);
    line-height: 1;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-meatball-icon {
    display: inline-block;
    -webkit-text-stroke: 0 transparent;
    paint-order: normal;
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.62)) drop-shadow(0 0 1px rgba(15, 23, 42, 0.48));
}
/* 휠: 좌하단 comment — off: 흰 윤곽 + 안 흰 글자 / on: 흰 채움 + 짙은 회색 글자 */
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-comment-toggle {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-comment-toggle--off {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.95);
    color: rgba(255, 255, 255, 0.98);
    filter: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.98);
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-comment-toggle--on {
    background: #ffffff;
    border: 2px solid #ffffff;
    color: #64748b;
    -webkit-text-fill-color: #64748b;
    filter: none;
    box-shadow: none;
    backdrop-filter: none;
}
/* 모멘트 피드 v2(휠 팝업과 동일): comment — off 흰 보더+흰 글 / on 흰 채움+회색 글 */
[data-moment-v2-root] .timeline-meal-photo-comment-toggle {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}
[data-moment-v2-root] .timeline-meal-photo-comment-toggle--off {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.95);
    color: rgba(255, 255, 255, 0.98);
    filter: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.98);
}
[data-moment-v2-root] .timeline-meal-photo-comment-toggle--on {
    background: #ffffff;
    border: 2px solid #ffffff;
    color: #64748b;
    -webkit-text-fill-color: #64748b;
    filter: none;
    box-shadow: none;
    backdrop-filter: none;
}
/* 좋아요·댓글·북마크: 앞(regular 윤곽) + 뒤(solid 채움, 레이어 불투명도 70%) */
#timelineMealPhotosOverlay:not(.hidden) .post-like-btn.timeline-meal-photo-moment-social-btn.timeline-meal-photo-moment-social-hit {
    overflow: visible;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-icon-stack {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    font-size: calc(17px * 1.25);
    line-height: 1;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-icon-stack > i,
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-icon-stack > svg {
    grid-area: 1 / 1;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: inherit;
    line-height: 1;
    width: 1em;
    height: 1em;
    min-width: 1em;
    min-height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-icon-stack > .timeline-meal-photo-moment-social-icon-fill {
    position: relative;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    filter: none;
    transition: opacity 0.15s ease;
    fill: currentColor;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-icon-stack > i.timeline-meal-photo-moment-social-icon,
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-icon-stack > svg.timeline-meal-photo-moment-social-icon {
    position: relative;
    z-index: 1;
    font-size: inherit;
    fill: none;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-icon-stack > i::before {
    display: block;
    line-height: 1;
}
#timelineMealPhotosOverlay:not(.hidden) .post-like-btn.post-social-state-on .post-like-fill.timeline-meal-photo-moment-social-icon-fill {
    opacity: 0.7;
    color: #ef4444;
}
#timelineMealPhotosOverlay:not(.hidden) .post-comment-btn.post-social-state-on .post-comment-fill.timeline-meal-photo-moment-social-icon-fill {
    opacity: 0.7;
    color: #facc15;
}
#timelineMealPhotosOverlay:not(.hidden) .post-bookmark-btn.post-social-state-on .post-bookmark-fill.timeline-meal-photo-moment-social-icon-fill {
    opacity: 0.7;
    color: #ffffff;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-count {
    font-size: calc(0.75rem * 1.25);
    font-weight: 700;
    line-height: 1;
    min-width: 0.65rem;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.45);
}
/* 카운트 없을 때는 숨겨 레이아웃 폭 0 — 숫자 생기면 아이콘 옆 슬롯만 가로 확장 */
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-moment-social-count:empty {
    display: none;
    width: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
/* 휠 하단: 작성자 기록 코멘트 — 하단 라벨(.timeline-meal-photo-menu-bar)과 동일 글꼴·크기·줄간격 */
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photos-overlay-comment-body {
    padding-left: 1ch;
    font-family: '나눔손글씨 가람연꽃', 'Nanum Garam Yeonkot', 'Nanum Pen Script', cursive;
    font-size: 18px;
    font-weight: normal;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.9);
    overflow: visible;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photos-carousel-badge .carousel-badge-num {
    font-size: 1rem;
    line-height: 1;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photos-carousel-badge .carousel-badge-sep {
    font-size: 0.5625rem;
    opacity: 0.9;
    padding: 0 0.1em;
    font-family: inherit;
    font-weight: 400;
}
body:has(#timelineMealPhotosOverlay:not(.hidden)) {
    overscroll-behavior: none;
}
#timelineMealPhotosOverlay:not(.hidden) button {
    touch-action: manipulation;
}
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photos-caption-footer {
    touch-action: manipulation;
}
/* 루트 touch-action:none 아래서 날짜·슬롯 휠 스트립 세로 스크롤 허용 */
#timelineMealPhotosOverlay:not(.hidden) .meal-photo-wheel-inner {
    touch-action: pan-y;
}
/* 휠 모드: 세로 스냅으로 한 기록(한 장)만 뷰포트 중앙 / 라벨은 스크롤 밖·absolute — 사진+푸터 합이 세로 중앙(JS translateY) */
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-stage--with-footer {
    overflow: visible;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-vtrack {
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-caption-footer {
    display: flex;
    justify-content: center;
    z-index: 12;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
    /* 바 전체는 투과 — 사진·가로 스와이프가 가려지지 않게. 휠/라벨만 다시 받음 */
    pointer-events: none;
    transition: top 0.02s ease-out;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-caption-footer .timeline-meal-photos-slide-caption-inner {
    pointer-events: auto;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-slide-caption-inner.timeline-meal-photo-menu-bar {
    width: var(--meal-wheel-caption-inner-w, 100%);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
/* 휠: 코멘트 5줄 초과 시 내부 스크롤 — 얇은 스크롤바, 스크롤/터치 수신 */
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-overlay-comment-band:not(.hidden) {
    pointer-events: auto;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-overlay-comment-body {
    max-height: min(5lh, calc(18px * 1.35 * 5));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.38) transparent;
    -webkit-overflow-scrolling: touch;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-overlay-comment-body::-webkit-scrollbar {
    width: 2px;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-overlay-comment-body::-webkit-scrollbar-track {
    background: transparent;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-overlay-comment-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.38);
    border-radius: 1px;
}
/* 사진 팝업 라벨 행(공통): 휠 모드에서만 아래 휠 규칙으로 덮어씀 */
#timelineMealPhotosOverlay .timeline-meal-photos-slide-caption-inner.timeline-meal-photo-menu-bar {
    padding: 4px 0.5rem;
}
/* 휠 라벨 한 줄: 숫자 뷰포트(30px) — 짙은 회색 바·흰 글자 18px */
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-slide-caption-inner.timeline-meal-photo-menu-bar {
    padding: 2px 0.5rem;
    gap: 1ch;
    align-items: center;
    line-height: 1;
    font-size: 18px;
    background-color: rgba(38, 40, 46, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-slide-caption-inner .meal-photo-wheel-item,
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-slide-caption-inner .meal-photo-wheel-label-line {
    color: rgba(255, 255, 255, 0.95);
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-slide-caption-inner [data-wheel-menu-caption] {
    color: rgba(255, 255, 255, 0.95);
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-slide-caption-inner .meal-photo-wheel-sep--colon {
    color: rgba(255, 255, 255, 0.45);
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel [data-wheel-menu-caption] {
    align-self: center;
    box-sizing: border-box;
    background: transparent;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    min-width: 0;
    text-align: right;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    line-height: 1.25;
    text-overflow: ellipsis;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-wheelbar-inner {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-vslide--photo-only {
    height: 100%;
    min-height: 100%;
    flex-shrink: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}
/* 모먼트 피드: 게시물 간 세로 전환(타임라인 다슬롯 스크롤과 비슷한 느낌) */
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-vslide.timeline-meal-photos-slide--moment-leave-next {
    transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.32s ease-out;
    will-change: transform, opacity;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel
    .timeline-meal-photos-vslide.timeline-meal-photos-slide--moment-leave-next.is-moment-leave-active {
    transform: translateY(calc(-1 * min(36%, 280px)));
    opacity: 0.18;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-vslide.timeline-meal-photos-slide--moment-leave-prev {
    transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.32s ease-out;
    will-change: transform, opacity;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel
    .timeline-meal-photos-vslide.timeline-meal-photos-slide--moment-leave-prev.is-moment-leave-active {
    transform: translateY(min(36%, 280px));
    opacity: 0.18;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-vslide.timeline-meal-photos-slide--moment-enter-next {
    transform: translateY(min(38%, 300px));
    opacity: 0.22;
    transition: none;
    will-change: transform, opacity;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel
    .timeline-meal-photos-vslide.timeline-meal-photos-slide--moment-enter-next.is-moment-enter-ready {
    transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.36s ease-out;
    transform: none;
    opacity: 1;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-vslide.timeline-meal-photos-slide--moment-enter-prev {
    transform: translateY(calc(-1 * min(38%, 300px)));
    opacity: 0.22;
    transition: none;
    will-change: transform, opacity;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel
    .timeline-meal-photos-vslide.timeline-meal-photos-slide--moment-enter-prev.is-moment-enter-ready {
    transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.36s ease-out;
    transform: none;
    opacity: 1;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-vslide-stage--wheel-only {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-carousel-zone {
    width: var(--meal-wheel-caption-inner-w, 100%);
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-carousel-frame {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 0 1 auto;
    max-height: min(72vh, 520px);
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}
/* 가로 스트립 셀·뷰포트: 하단 라벨(--meal-wheel-caption-inner-w)과 같은 열 너비 — Tailwind p-1로 줄던 가로 여백 제거 */
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-carousel-viewport {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-hstrip {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photo-cell {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-vslide-stage--wheel-only .timeline-meal-photo-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(72vh, 520px);
    object-fit: contain;
    transition: opacity 0.48s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* 기록 사진 비율(1:1·3:4·4:3) 슬롯: 프레임 채우기 — 휠 모드 위 contain 규칙 덮어씀. 모서리·그림자는 슬롯만(이중 라운드/섀도 방지) */
#timelineMealPhotosOverlay:not(.hidden) .timeline-meal-photo-aspect-slot .timeline-meal-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    object-fit: cover;
}
/* 휠 라벨 안: 피커 열 너비·구분 간격만 축소 — 숫자칸·요일·슬롯 뷰포트 높이 동일(30px) */
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .timeline-meal-photos-caption-footer .meal-photo-wheel-viewport {
    height: var(--meal-wheel-viewport-h);
    min-height: var(--meal-wheel-viewport-h);
    max-height: var(--meal-wheel-viewport-h);
    box-sizing: border-box;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .meal-photo-wheel-viewport:not(.meal-photo-wheel-viewport--label) {
    width: 2.125rem;
    flex: 0 0 2.125rem;
    touch-action: pan-y;
    background: rgba(255, 255, 255, 0.2);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 0.5%, #000 99.5%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 0.5%, #000 99.5%, transparent 100%);
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .meal-photo-wheel-viewport:not(.meal-photo-wheel-viewport--label) .meal-photo-wheel-inner {
    max-height: var(--meal-wheel-viewport-h);
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .meal-photo-wheel-inner {
    touch-action: pan-y;
    scroll-snap-type: y mandatory;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .meal-photo-wheel-item {
    scroll-snap-align: center;
    scroll-snap-stop: always;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .meal-photo-wheel-col--year .meal-photo-wheel-viewport:not(.meal-photo-wheel-viewport--label) {
    width: 2.625rem;
    flex: 0 0 2.625rem;
}
/* 요일·슬롯: 숫자 휠과 동일 높이 — 좌우 0.45em(약 반 글자씩) 여백 */
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .meal-photo-wheel-viewport--label {
    width: auto;
    min-width: 0.875rem;
    flex: 0 0 auto;
    touch-action: none;
    -webkit-mask-image: none;
    mask-image: none;
    padding-left: 0.45em;
    padding-right: 0.45em;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    box-sizing: border-box;
    overflow: hidden;
    height: var(--meal-wheel-viewport-h);
    min-height: var(--meal-wheel-viewport-h);
    max-height: var(--meal-wheel-viewport-h);
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .meal-photo-wheel-viewport--label .meal-photo-wheel-label-strip {
    flex: 1 1 auto;
    min-height: 0;
    justify-content: center;
}
/* 슬롯: 상한 9rem·축소 가능 — 메뉴@장소 열과 겹치지 않게 */
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .meal-photo-wheel-viewport--slot {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 9rem;
    align-self: center;
    align-items: center;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .meal-photo-wheel-label-strip {
    display: flex;
    flex-direction: column;
    width: 100%;
    will-change: transform;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .meal-photo-wheel-viewport--slot .meal-photo-wheel-label-strip {
    width: max-content;
    max-width: 100%;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .meal-photo-wheel-label-line {
    box-sizing: border-box;
    height: var(--meal-wheel-item-h);
    min-height: var(--meal-wheel-item-h);
    line-height: var(--meal-wheel-item-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .meal-photo-wheel-viewport--slot .meal-photo-wheel-label-line {
    justify-content: center;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    width: max-content;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .meal-photo-wheel-sep--colon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--meal-wheel-viewport-h);
    min-height: var(--meal-wheel-viewport-h);
    line-height: 1;
    box-sizing: border-box;
    align-self: center;
    padding: 0 1px;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .meal-photo-wheel-col:not(.meal-photo-wheel-col--slot) {
    justify-content: center;
}
#timelineMealPhotosOverlay.timeline-meal-photos-overlay--wheel .meal-photo-wheel-col--slot {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 9rem;
}
#timelineMealPhotosOverlay .timeline-meal-photos-vslide--legacy .timeline-meal-photos-carousel-zone {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#timelineMealPhotosOverlay .timeline-meal-photos-vslide--legacy .timeline-meal-photos-carousel-frame {
    flex: 1 1 auto;
    min-height: 0;
}
/* 사진 팝업: 날짜 휠 뷰포트 — 숫자 수직·가로 중앙 */
#timelineMealPhotosOverlay .meal-photo-wheel-viewport {
    height: var(--meal-wheel-viewport-h);
    width: 2.5rem;
    flex: 0 0 2.5rem;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.07);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%);
}
#timelineMealPhotosOverlay .meal-photo-wheel-col--year .meal-photo-wheel-viewport:not(.meal-photo-wheel-viewport--label) {
    width: 3rem;
    flex: 0 0 3rem;
}
#timelineMealPhotosOverlay .meal-photo-wheel-viewport--label .meal-photo-wheel-label-line {
    font-size: inherit;
    font-weight: 400;
}
#timelineMealPhotosOverlay .meal-photo-wheel-sep--colon,
#timelineMealPhotosOverlay .meal-photo-wheel-sep--pipe {
    line-height: var(--meal-wheel-viewport-h);
    align-self: center;
}
#timelineMealPhotosOverlay .meal-photo-wheel-col--slot {
    min-width: 0;
    flex: 1 1 auto;
    max-width: 9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}
#timelineMealPhotosOverlay .timeline-meal-photos-wheelbar-inner {
    flex-wrap: nowrap;
    align-items: center;
}
#timelineMealPhotosOverlay .timeline-meal-photos-slide-caption-inner {
    align-items: center;
}
#timelineMealPhotosOverlay .meal-photo-wheel-item {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: var(--meal-wheel-item-h);
    min-height: var(--meal-wheel-item-h);
    line-height: var(--meal-wheel-item-h);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#timelineMealPhotosOverlay .meal-photo-wheel-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    align-items: stretch;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
}
#timelineMealPhotosOverlay .meal-photo-wheel-inner::-webkit-scrollbar {
    display: none;
}
/* 트래커 월 팝업: Soft Mint — 원형 채움(1·2·3+건) · X 없음 */
.tracker-month-calendar-nav {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 8px;
}
.tracker-month-calendar-heading {
    margin: 0;
    min-width: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.tracker-month-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 9999px;
    background: var(--page-deep);
    color: var(--ink-2);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tracker-month-nav-btn:hover {
    background: var(--green-soft);
    border-color: var(--green-mute);
    color: var(--green-deep);
}
.tracker-month-nav-btn:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 1px;
}
.tracker-month-nav-btn [data-lucide],
.tracker-month-nav-btn .lucide {
    width: 1rem;
    height: 1rem;
    stroke-width: 1.25;
}
.tracker-month-weekday {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--muted);
}
.tracker-month-weekday--sun {
    color: var(--coral, #f2a8b4);
}
.tracker-month-cell {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 9999px;
    transition: background 0.15s ease;
}
.tracker-month-cell:not(.tracker-month-cell--empty):hover {
    background: color-mix(in srgb, var(--green-soft) 70%, transparent);
}
.tracker-month-cell--empty {
    min-height: 2.75rem;
    pointer-events: none;
}
.tracker-month-cell .calendar-dot.tracker-month-dot {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    box-shadow: none;
    border: 0;
    font-variant-numeric: tabular-nums;
}
.tracker-month-cell .calendar-dot.tracker-month-dot .calendar-density {
    display: none;
}
.tracker-month-cell .calendar-dot.tracker-month-dot.dot-none {
    background: transparent;
    color: var(--ink);
}
.tracker-month-cell .calendar-dot.tracker-month-dot.dot-none.tracker-month-dot--weekend {
    color: var(--coral, #f2a8b4);
}
/* 1건 */
.tracker-month-cell .calendar-dot.tracker-month-dot.dot-low {
    background: var(--green-soft);
    color: var(--green-deep);
    font-weight: 700;
    box-shadow: inset 0 0 0 1.5px var(--green-mute);
}
/* 2건 */
.tracker-month-cell .calendar-dot.tracker-month-dot.dot-mid {
    background: var(--green-mute);
    color: var(--green-deep);
    font-weight: 700;
}
/* 3건+ */
.tracker-month-cell .calendar-dot.tracker-month-dot.dot-full {
    background: var(--green);
    color: #ffffff;
    font-weight: 700;
}
.tracker-month-cell .calendar-dot.tracker-month-dot.dot-selected {
    background: var(--green, #3cb889) !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(60, 184, 137, 0.32);
}
.tracker-calendar-icon-btn:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 1px;
}
/* 전체/일간: 연회색 통 하나, active=흰색 팩+#1e293b 테두리/글자, inactive=배경 없이 회색 글자만 */
.view-tab { 
    padding: 4px 10px; 
    border-radius: 6px; 
    font-size: 11px; 
    font-weight: 700; 
    border: 1px solid transparent; 
    transition: all 0.2s; 
}
.view-tab.active { 
    background: #fff; 
    border-color: #1e293b; 
    color: #1e293b; 
}
.view-tab.inactive { 
    background: transparent; 
    border-color: transparent; 
    color: #94a3b8; 
}
/* 선택 탭과 연회색 배경 간격 최소화 */
#trackerTabs { 
    padding: 2px; 
    gap: 2px; 
}
.chip { 
    padding: 8px 14px; 
    border-radius: 6px; 
    font-size: 12px; 
    font-weight: 700; 
    background: white;
    border: 1px solid #e2e8f0; 
    color: #475569; 
    cursor: pointer; 
    transition: all 0.2s; 
    margin-right: 4px; 
    margin-bottom: 4px; 
}
.chip.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
/* 기록 모달(끼니·간식 입력): 메인/서브 칩 간격 절반 — flex gap-1과 맞춤 */
#entryModal .chip {
    margin-right: 2px;
    margin-bottom: 2px;
    padding: 6px 10px;
}
#entryModal .sub-chip {
    margin-right: 2px;
    margin-bottom: 2px;
    padding: 5px 8px;
}
#entryModal .sub-chip-wrapper {
    margin-right: 2px;
    margin-bottom: 2px;
}
#entryModal .sub-chip-wrapper .sub-chip {
    margin-right: 0;
    margin-bottom: 0;
}
/* 기록 모달 서브태그: 사용자 / 최근 2행 (식사·간식·어디서·무엇을·누구와 공통) */
#entryModal .entry-tag-stage {
    width: 100%;
    min-width: 0;
    margin-top: 0.35rem;
}
#entryModal .entry-tag-stage__viewport {
    width: 100%;
    overflow: hidden;
}
#entryModal .entry-tag-stage__track {
    display: flex;
    width: 200%;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}
#entryModal .entry-tag-stage--sub .entry-tag-stage__track {
    transform: translateX(-50%);
}
#entryModal .entry-tag-stage__panel {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    min-width: 0;
    box-sizing: border-box;
}
#entryModal .entry-tag-stage__panel--sub {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
#entryModal .entry-tag-stage__back {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 2rem;
    height: 2rem;
    margin-top: 0;
    border: 1px solid var(--entry-border, #d0c6ba);
    border-radius: 0.65rem;
    background: #fff;
    color: #4f4841;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#entryModal .entry-tag-stage__back:hover,
#entryModal .entry-tag-stage__back:active {
    background: #f7f4ef;
}
#entryModal .entry-tag-stage__back [data-lucide],
#entryModal .entry-tag-stage__back .lucide {
    width: 1rem;
    height: 1rem;
}
#entryModal .entry-tag-stage:not(.entry-tag-stage--sub) .entry-tag-stage__panel--sub {
    visibility: hidden;
    pointer-events: none;
}
#entryModal .entry-tag-stage--sub .entry-form-field-chips {
    /* 슬라이드 후에도 폭 유지 */
    visibility: hidden;
    pointer-events: none;
}
#entryModal .entry-tag-stage__panel--sub .entry-subtag-suggestions {
    margin-top: 0;
}
#entryModal .entry-subtag-suggestions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
    margin-top: 0.25rem;
    padding-bottom: 2px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    cursor: default;
}
#entryModal .entry-subtag-block {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    width: 100%;
}
#entryModal .entry-subtag-label {
    flex: 0 0 auto;
    width: 2.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--entry-text-muted, #7a7268);
    line-height: 1.2;
}
#entryModal .entry-subtag-chips {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    cursor: grab;
    padding-bottom: 1px;
    /* 하단 스크롤바 숨김 — 넘치는 경우 우측 힌트로 안내 */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* 마우스 드래그 스크롤 시 텍스트/칩 선택 방지 */
    user-select: none;
    -webkit-user-select: none;
}
#entryModal .entry-subtag-chips.entry-hscroll-strip--dragging {
    cursor: grabbing;
}
#entryModal .entry-subtag-chips .sub-chip {
    /* 드래그 중 네이티브 이미지/텍스트 드래그 방지 */
    -webkit-user-drag: none;
}
#entryModal .entry-subtag-chips::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
#entryModal .entry-subtag-chips-shell {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}
#entryModal .entry-subtag-chips-shell .entry-subtag-chips {
    flex: 1 1 auto;
    width: 100%;
}
#entryModal .entry-subtag-chips-shell--empty {
    overflow: visible;
}
#entryModal .entry-subtag-chips-shell--scrollable::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1.75rem;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--entry-surface, #fff) 70%);
    z-index: 1;
}
#entryModal .entry-subtag-scroll-hint {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--entry-surface, #fff);
    color: var(--entry-text-muted, #7a7268);
    box-shadow: 0 0 0 1px var(--entry-border-soft, #e8e2da);
    pointer-events: none;
}
#entryModal .entry-subtag-scroll-hint[hidden] {
    display: none !important;
}
#entryModal .entry-subtag-scroll-hint [data-lucide],
#entryModal .entry-subtag-scroll-hint .lucide {
    width: 0.75rem;
    height: 0.75rem;
    stroke-width: 2;
}
#entryModal .entry-subtag-chips.entry-subtag-chips--empty {
    cursor: default;
    overflow: visible;
}
#entryModal .entry-subtag-chips.entry-hscroll-strip--dragging,
#entryModal .entry-subtag-suggestions.entry-subtag-suggestions--dragging .entry-subtag-chips {
    cursor: grabbing;
    user-select: none;
}
#entryModal .entry-subtag-empty {
    margin: 0;
    padding: 0;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--entry-text-secondary, #4f4841);
    background: transparent;
    white-space: nowrap;
}
#entryModal .entry-subtag-empty--muted {
    color: var(--entry-text-muted, #7a7268);
    font-weight: 500;
    background: transparent;
    padding: 0;
    border-radius: 0;
}
#entryModal .entry-subtag-suggestions .sub-chip,
#entryModal .entry-subtag-suggestions .sub-chip-delete-btn {
    cursor: pointer;
}
#entryModal .entry-subtag-suggestions .sub-chip-wrapper {
    flex-shrink: 0;
    margin-right: 0;
    margin-bottom: 0;
}
#entryModal .entry-subtag-suggestions .sub-chip {
    flex-shrink: 0;
    white-space: nowrap;
    max-width: none;
    margin-right: 0;
    margin-bottom: 0;
    color: #1e293b;
    border-color: #cbd5e1;
    background: #f1f5f9;
}
#entryModal .sub-chip {
    color: #1e293b;
    /* 전역 .sub-chip 10px 을 그대로 받고 있었다 — 어디서·누구와의 이름 칩이 시트에서 가장 작은 글자였다.
       위 칸 칩(.chip)과 같은 13px·여백으로 */
    font-size: 0.8125rem;
    padding: 6px 10px;
}
#entryModal .entry-subtag-suggestions .sub-chip .sub-chip-favorite-star {
    color: #eab308;
    margin-left: 3px;
    font-size: 9px;
    line-height: 1;
    width: 0.7rem;
    height: 0.7rem;
    flex-shrink: 0;
    fill: currentColor;
    stroke: currentColor;
}
/* 기록 모달 서브태그 선택 — 회색(slate 600) 채움이었다가 입력시트 선택 칩 문법
   (옅은 초록 채움 + 초록 실선)으로 맞췄다 (2026-09-15) */
#entryModal .entry-subtag-suggestions .sub-chip.active {
    background: var(--green-soft, #eaf8f2) !important;
    color: #0f5132 !important;
    border-color: var(--green, #3cb889) !important;
}
#entryModal .entry-subtag-suggestions .sub-chip.active .sub-chip-favorite-star,
#entryModal .entry-subtag-suggestions .sub-chip.active .fa-star {
    color: #facc15 !important;
}
.sub-chip { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    padding: 6px 12px; 
    border-radius: 6px; 
    font-size: 10px; 
    font-weight: 600; 
    background: #f1f5f9; 
    color: #94a3b8; 
    border: 1px solid #cbd5e1;
    margin-right: 4px; 
    margin-bottom: 4px; 
    cursor: pointer; 
    transition: all 0.2s; 
}
.sub-chip.active { 
    background: #6366f1; 
    color: white; 
    border-color: #6366f1;
}
/* 나만의 태그가 active일 때 스타일 */
.sub-chip.bg-emerald-100.active {
    background: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}
.sub-chip.bg-emerald-100.active .fa-star {
    color: white !important;
}
.snack-tag { 
    display: inline-flex; 
    align-items: center; 
    padding: 5px 8px 5px 12px; 
    background: white; 
    border: 1px solid #e2e8f0; 
    border-radius: 10px; 
    font-size: 11px; 
    font-weight: 700; 
    color: #475569; 
    white-space: nowrap; 
}
/* 앱 모드: 상단 chrome — #appTopChrome 단일 sticky, 상태바는 #statusBarOverlay */
#appTopChrome {
    position: sticky;
    top: var(--safe-top);
    z-index: var(--z-app-chrome);
    /* 스크롤 중 그라데이션 배경이 매 프레임 repaint되며 생기던 떨림(덜덜) 방지: 독립 GPU 레이어로 승격 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}
/* 상태바·네비 오버레이도 동일 레이어 승격 (sticky 헤더와 함께 부드럽게) */
#statusBarOverlay,
#navigationBarOverlay {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* 라운지·밀당·설정: 헤더와 아래 영역 사이 seam fill (시안 v2: 흰색) */
#appTopChromeFill {
    display: none;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    width: min(100vw, 28rem);
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-color: transparent;
}
body:has(#mainApp:not(.hidden) #boardListView:not(.hidden)) #appTopChromeFill,
body:has(#mainApp:not(.hidden) #settingsView:not(.hidden)) #appTopChromeFill {
    display: block;
    height: var(--app-chrome-gradient-subtabs-span);
    background-image: none;
    background-color: #ffffff;
    background-size: auto;
    background-position: 0 0;
}
body:has(#mainApp:not(.hidden) #dashboardView:not(.hidden)) #appTopChromeFill {
    display: block;
    height: calc(var(--safe-top) + var(--app-chrome-header-h));
    background-image: none;
    background-color: #ffffff;
    background-size: auto;
    background-position: 0 0;
}
/* 헤더 숨김 시: 서브탭이 상단으로 올라오므로 fill 높이도 그만큼만 (라운지·설정) */
body:has(#mainAppHeader.header-scroll-hidden):has(#boardListView:not(.hidden)) #appTopChromeFill,
body:has(#mainAppHeader.header-scroll-hidden):has(#settingsView:not(.hidden)) #appTopChromeFill {
    height: calc(var(--safe-top) + var(--app-chrome-subtabs-h));
}
/* 라운지·밀당: 빠르게 위로 스크롤(fling) 시 오버스크롤 rubber-band가 상단 흰 바탕을 노출하는 것 방지 */
html:has(#mainApp:not(.hidden) #dashboardView:not(.hidden)),
body:has(#mainApp:not(.hidden) #dashboardView:not(.hidden)) {
    overscroll-behavior-y: contain;
}
#boardLoungeScrollArea {
    overscroll-behavior-y: contain;
}

/* 스크롤 시 헤더 숨김 (인스타/페이스북 스타일)
   핵심: 숨김(아래로 스크롤)은 0.3s 부드럽게, 등장(위로 스크롤)은 즉시(transition 없음).
   → 위로 빠르게 스크롤할 때 헤더가 천천히 내려오며 콘텐츠와의 사이에 흰 틈이 생기던 문제 제거.
   (HTML의 transition-transform duration-300 클래스를 여기서 덮어씀) */
#mainAppHeader { transition: none !important; }
#mainAppHeader.header-scroll-hidden {
    transition: transform 0.3s ease-out !important;
    transform: translateY(-100%);
}
/* 밀로그: 헤더만 슬라이드·레이아웃 접힘 → 트래커가 wrapper 안에서 자연스럽게 올라옴 (별도 sticky 불필요) */
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #appTopChrome #mainAppHeader.header-scroll-hidden {
    margin-bottom: calc(-1 * var(--app-chrome-header-h));
}
#trackerSection { transition: none; }
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #trackerSection.tracker-header-hidden {
    top: auto !important;
    padding-top: 0 !important;
}

/* =========================
   메인 앱 헤더: 화이트 크롬 + 초록 워드마크 (시안 v2)
   ========================= */
body:has(#mainApp:not(.hidden)) {
    --timeline-chrome-green-deep: #ffffff;
    --timeline-chrome-green-mid: #ffffff;
    --timeline-chrome-green-base: #ffffff;
    --timeline-chrome-green-light: #ffffff;
    --app-chrome-header-h: 3.5rem;
    --app-chrome-subtabs-h: 2.75rem;
    --app-chrome-gradient-subtabs-span: calc(var(--safe-top) + var(--app-chrome-header-h) + var(--app-chrome-subtabs-h));
    --app-chrome-gradient-timeline-span: calc(var(--safe-top) + var(--app-chrome-header-h) + 7.5rem);
    --app-chrome-gradient-dashboard-span: calc(var(--safe-top) + var(--app-chrome-header-h) + var(--app-chrome-subtabs-h) + 24rem);
    --app-chrome-gradient-dashboard-fill: #ffffff;
    --app-chrome-gradient: #ffffff;
}
body:has(#mainApp:not(.hidden)) #statusBarOverlay {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-size: auto !important;
    background-image: none !important;
}
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #statusBarOverlay {
    background-size: auto !important;
}
/* 밀로그: 헤더+트래커 단일 sticky wrapper — 흰 면 */
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #appTopChrome {
    background: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid var(--line);
}
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #appTopChrome #mainAppHeader,
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #appTopChrome #trackerSection {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
}
/* 웹: 상태바 오버레이를 max-w-md 본문 폭에만 맞춤 */
html.platform-web body:has(#mainApp:not(.hidden)) #statusBarOverlay {
    left: 50%;
    right: auto;
    width: min(100vw, 28rem);
    transform: translateX(-50%);
}
body:has(#mainApp:not(.hidden)) #mainAppHeader {
    background: #ffffff !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    /* 시안: 로고 헤더 직하 보더 없음 — 트래커·서브탭·기간 행 하단에만 */
    border-bottom: none;
}
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #mainAppHeader {
    border-bottom: none;
}
body:has(#mainApp:not(.hidden) #dashboardView:not(.hidden)) #statusBarOverlay {
    background: #ffffff !important;
    background-image: none !important;
}
body:has(#mainApp:not(.hidden) #dashboardView:not(.hidden)) #mainAppHeader {
    background: #ffffff !important;
    background-image: none !important;
}
body:has(#mainApp:not(.hidden)) #headerAppTitle {
    color: var(--green) !important;
}
body:has(#mainApp:not(.hidden)) .header-right .notification-trigger,
body:has(#mainApp:not(.hidden)) .header-right .timeline-search-toggle,
body:has(#mainApp:not(.hidden)) .header-right .gallery-trace-btn {
    color: var(--ink-2) !important;
}
body:has(#mainApp:not(.hidden)) .header-right .notification-trigger {
    border-radius: 9999px;
    background: transparent;
}
body:has(#mainApp:not(.hidden)) .header-right .notification-trigger:hover,
body:has(#mainApp:not(.hidden)) .header-right .timeline-search-toggle:hover,
body:has(#mainApp:not(.hidden)) .header-right .gallery-trace-btn:hover {
    color: var(--ink) !important;
    background: var(--page);
    border-radius: 9999px;
}
/* 헤더 흔적 필터 활성 */
body:has(#mainApp:not(.hidden)) #mainAppHeader .gallery-trace-btn.gallery-trace-btn--active {
    background: var(--green-soft) !important;
    color: var(--green) !important;
    border-radius: 9999px;
}
/* 헤더 우측 FA 아이콘: 종(bell)과 동일하게 text-stroke 없이 글리프 두께 통일 */
body:has(#mainApp:not(.hidden)) #mainAppHeader .header-right .timeline-search-toggle i,
body:has(#mainApp:not(.hidden)) #mainAppHeader .header-right .gallery-trace-btn i,
body:has(#mainApp:not(.hidden)) #mainAppHeader .header-right .notification-trigger .fa-bell {
    -webkit-text-stroke: 0;
    paint-order: normal;
}
/* 모먼트·밀당·라운지 헤더 돋보기: 화이트 헤더에서는 stroke 제거 */
body:has(#mainApp:not(.hidden) #galleryView:not(.hidden)) #mainAppHeader .gallery-trace-btn[data-trace="collapse"] .fa-magnifying-glass,
body:has(#mainApp:not(.hidden) #dashboardView:not(.hidden)) #mainAppHeader .gallery-trace-btn[data-trace="collapse"] .fa-magnifying-glass,
body:has(#mainApp:not(.hidden) #boardListView:not(.hidden)) #mainAppHeader .gallery-trace-btn[data-trace="collapse"] .fa-magnifying-glass {
    -webkit-text-stroke: 0 !important;
    paint-order: normal;
}
body:has(#mainApp:not(.hidden)) #galleryView:not(.hidden) #mainAppHeader .gallery-trace-btn[data-trace="collapse"]:hover .fa-magnifying-glass,
body:has(#mainApp:not(.hidden)) #dashboardView:not(.hidden) #mainAppHeader .gallery-trace-btn[data-trace="collapse"]:hover .fa-magnifying-glass,
body:has(#mainApp:not(.hidden)) #boardListView:not(.hidden) #mainAppHeader .gallery-trace-btn[data-trace="collapse"]:hover .fa-magnifying-glass {
    -webkit-text-stroke: 0 !important;
}
body:has(#mainApp:not(.hidden)) .timeline-search-wrapper.expanded .timeline-search-panel {
    background: var(--page) !important;
    border-color: var(--line) !important;
}
body:has(#mainApp:not(.hidden)) #searchInput {
    color: var(--ink);
}
body:has(#mainApp:not(.hidden)) #searchInput::placeholder {
    color: var(--muted);
}

/* 라운지·사용자: 화이트 헤더 + soft green pill 서브탭 */
.app-chrome-subtabs {
    flex-shrink: 0;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--app-chrome-subtabs-h);
    height: var(--app-chrome-subtabs-h);
    padding: 0 1.5rem;
}
.app-chrome-subtab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 9999px;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1rem;
    white-space: nowrap;
    cursor: pointer;
    background: var(--page);
    color: var(--muted);
    transition: background 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.app-chrome-subtab.active,
.app-chrome-subtab[aria-selected="true"] {
    background: var(--green-soft);
    color: var(--green-deep);
    font-weight: 600;
}
.app-chrome-subtab:hover {
    color: var(--ink-2);
    background: #f1f5f9;
}
.app-chrome-subtab.active:hover,
.app-chrome-subtab[aria-selected="true"]:hover {
    background: var(--green-mute);
    color: var(--green-deep);
}
body:has(#mainApp:not(.hidden) #boardListView:not(.hidden)) #boardLoungeFrame .board-mealtalk-subtabs,
body:has(#mainApp:not(.hidden) #settingsView:not(.hidden)) .settings-subtab-row {
    background: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid var(--line) !important;
}
body:has(#mainApp:not(.hidden) #dashboardView:not(.hidden)) .dashboard-insight-chrome {
    background-color: #ffffff !important;
    background-image: none !important;
    box-sizing: border-box;
    padding-bottom: 0;
    border-bottom: 1px solid var(--line);
}
body:has(#mainApp:not(.hidden) #dashboardView:not(.hidden)) .dashboard-insight-chrome .dashboard-chrome-subtabs {
    background: transparent !important;
}
body:has(#mainAppHeader.header-scroll-hidden) #boardListView:not(.hidden) .board-mealtalk-subtabs,
body:has(#mainAppHeader.header-scroll-hidden) #settingsView:not(.hidden) .settings-subtab-row {
    background-position: 0 0 !important;
}
body:has(#mainAppHeader.header-scroll-hidden) #dashboardView:not(.hidden) #statusBarOverlay,
body:has(#mainAppHeader.header-scroll-hidden) #dashboardView:not(.hidden) #mainAppHeader {
    background-position: 0 calc(-1 * var(--safe-top)) !important;
}
body:has(#mainAppHeader.header-scroll-hidden) #dashboardView:not(.hidden) .dashboard-insight-chrome {
    background-position: 0 0 !important;
}
/* 밀로그: wrapper 안 헤더·트래커만 개별 gradient 제거 */
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #appTopChrome #mainAppHeader,
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #appTopChrome #trackerSection {
    background: transparent !important;
    background-image: none !important;
}

/* 밀로그 전용: 트래커·미니 캘린더 (화이트 크롬) */
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #trackerSection {
    border-bottom: none !important;
    box-shadow: none !important;
}
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #trackerTitle {
    color: var(--ink) !important;
}
/* 시안 tracker: 하단 14px, 월 행·캘린더 리듬 */
#trackerSection {
    padding: 0 0 14px;
}
.tracker-v2-row {
    padding: 2px 16px 12px;
}
.tracker-v2-month-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
/* 연속 기록 pill */
.tracker-streak-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 5px;
    border-radius: 9999px;
    border: 1px solid #fdba74;
    background: #fff7ed;
    font-size: 12px;
    font-weight: 700;
    color: #ea580c;
    line-height: 1;
}
.tracker-streak-pill__icon {
    font-size: 13px;
    line-height: 1;
    color: #ea580c;
    margin-left: 1px;
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}
.tracker-streak-pill__icon.lucide,
.tracker-streak-pill__icon svg,
.tracker-streak-pill [data-lucide="flame"],
.tracker-streak-pill .lucide-flame {
    width: 0.875rem !important;
    height: 0.875rem !important;
    stroke-width: 2;
}
.tracker-streak-pill__emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: transparent;
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}
.tracker-streak-pill__text {
    padding-right: 1px;
}
/* 실행 환경 배지 — 화이트 헤더 */
.mealog-env-badge--dev {
    color: #854d0e;
    background: #fef9c3;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid #fde047;
    text-shadow: none;
    box-shadow: none;
}
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) .tracker-calendar-icon-btn,
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) .tracker-go-today-btn {
    color: var(--ink-2) !important;
}
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) .tracker-calendar-icon-btn:hover,
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) .tracker-go-today-btn:hover {
    color: var(--ink) !important;
    background: var(--page) !important;
}
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) .tracker-calendar-icon-btn:focus-visible,
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) .tracker-go-today-btn:focus-visible {
    outline-color: var(--green);
}
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #trackerTabs {
    background: var(--page) !important;
}
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #trackerTabs .view-tab.active {
    background: #ffffff !important;
    border-color: transparent !important;
    color: var(--green-deep) !important;
}
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #trackerTabs .view-tab.inactive {
    color: var(--muted) !important;
}
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-dow {
    color: var(--muted, #7a7268) !important;
}
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-dow.text-rose-400,
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-item.weekend .calendar-dow {
    color: #fb7185 !important;
}
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-dot {
    background: transparent !important;
    color: var(--ink) !important;
    border: 0 !important;
}
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-dot.dot-full,
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-dot.dot-mid,
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-dot.dot-low,
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-dot.dot-partial,
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-dot.dot-none {
    background: transparent !important;
    color: var(--ink) !important;
    border: 0 !important;
}
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-dot.dot-selected {
    transform: none;
    border: 0 !important;
    background: var(--green) !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(45, 159, 116, 0.35);
}
body:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-item.selected .calendar-dow {
    color: var(--green-deep) !important;
    font-weight: 700;
}

/* 밀로그·모먼트 리디자인: 공통 녹색 크롬은 다른 탭에 남기고 두 탭만 밝은 일기장 톤 */
body[data-main-tab='timeline'] #statusBarOverlay,
body[data-main-tab='gallery'] #statusBarOverlay {
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}
/* 모먼트만 헤더 하단 hairline (시안 moment-feed) */
body[data-main-tab='gallery'] #mainAppHeader {
    background: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid var(--line, #d0c6ba) !important;
    box-shadow: none !important;
}
/* 밀로그: 헤더 개별 보더 제거 — #appTopChrome(헤더+트래커) 하단 한 줄만 */
body[data-main-tab='timeline'] #mainAppHeader {
    background: #ffffff !important;
    background-image: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
body[data-main-tab='timeline'] #appTopChrome,
body[data-main-tab='gallery'] #appTopChrome {
    background: #ffffff !important;
    background-image: none !important;
}
body[data-main-tab='timeline'] #headerAppTitle,
body[data-main-tab='gallery'] #headerAppTitle {
    color: var(--green) !important;
}
body[data-main-tab='timeline'] .header-right .notification-trigger,
body[data-main-tab='timeline'] .header-right .timeline-search-toggle,
body[data-main-tab='gallery'] .header-right .notification-trigger,
body[data-main-tab='gallery'] .header-right .timeline-search-toggle,
body[data-main-tab='gallery'] .header-right .gallery-trace-btn {
    color: #334155 !important;
    background: transparent !important;
}
body[data-main-tab='timeline'] .header-right .notification-trigger:hover,
body[data-main-tab='timeline'] .header-right .timeline-search-toggle:hover,
body[data-main-tab='gallery'] .header-right .notification-trigger:hover,
body[data-main-tab='gallery'] .header-right .timeline-search-toggle:hover,
body[data-main-tab='gallery'] .header-right .gallery-trace-btn:hover,
body[data-main-tab='gallery'] #mainAppHeader .gallery-trace-btn.gallery-trace-btn--active {
    color: var(--green-deep) !important;
    background: #f0fdf4 !important;
}
body[data-main-tab='gallery'] #mainAppHeader .gallery-trace-btn[data-trace='collapse'] .fa-magnifying-glass,
body[data-main-tab='gallery'] #mainAppHeader .gallery-trace-btn[data-trace='collapse']:hover .fa-magnifying-glass {
    -webkit-text-stroke: 0 !important;
}
body[data-main-tab='timeline'] .timeline-search-wrapper.expanded .timeline-search-panel {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
body[data-main-tab='timeline'] #searchInput {
    color: #1e293b;
}
body[data-main-tab='timeline'] #searchInput::placeholder {
    color: #94a3b8;
}

body[data-main-tab='timeline'] #appTopChrome #trackerSection {
    background: #ffffff !important;
    background-image: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
body[data-main-tab='timeline'] #trackerTitle,
body[data-main-tab='timeline'] .tracker-v2-month-label {
    color: var(--ink, #241f1c) !important;
    font-weight: 700;
}
body[data-main-tab='timeline'] .tracker-calendar-icon-btn,
body[data-main-tab='timeline'] .tracker-go-today-btn {
    color: var(--muted, #7a7268) !important;
}
body[data-main-tab='timeline'] .tracker-calendar-icon-btn:hover,
body[data-main-tab='timeline'] .tracker-go-today-btn:hover {
    color: var(--green) !important;
    background: var(--green-soft) !important;
}
body[data-main-tab='timeline'] .tracker-streak-pill {
    border: 1px solid #fdba74;
    background: #fff7ed;
    color: #ea580c;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px 3px 5px;
}
body[data-main-tab='timeline'] .tracker-streak-pill__icon {
    color: #ea580c;
    font-size: 13px;
    width: 0.875rem;
    height: 0.875rem;
}
body[data-main-tab='timeline'] .tracker-streak-pill__emoji {
    width: auto;
    height: auto;
    background: transparent;
}
body[data-main-tab='timeline'] #trackerTabs {
    background: #f1f5f9 !important;
}
body[data-main-tab='timeline'] #trackerTabs .view-tab.active {
    background: #ffffff !important;
    border-color: transparent !important;
    color: var(--green-deep) !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}
body[data-main-tab='timeline'] #trackerTabs .view-tab.inactive {
    color: #94a3b8 !important;
}
body[data-main-tab='timeline'] #miniCalendar .calendar-dow {
    color: var(--muted, #7a7268) !important;
}
body[data-main-tab='timeline'] #miniCalendar .calendar-dow.text-rose-400,
body[data-main-tab='timeline'] #miniCalendar .calendar-item.weekend .calendar-dow {
    color: #fb7185 !important;
}
body[data-main-tab='timeline'] #miniCalendar .calendar-dot,
body[data-main-tab='timeline'] #miniCalendar .calendar-dot.dot-full,
body[data-main-tab='timeline'] #miniCalendar .calendar-dot.dot-mid,
body[data-main-tab='timeline'] #miniCalendar .calendar-dot.dot-low,
body[data-main-tab='timeline'] #miniCalendar .calendar-dot.dot-partial,
body[data-main-tab='timeline'] #miniCalendar .calendar-dot.dot-none {
    background: transparent !important;
    border: 0 !important;
    color: var(--ink, #241f1c) !important;
    border-radius: 9999px;
}
body[data-main-tab='timeline'] #miniCalendar .calendar-dot.dot-selected {
    transform: none;
    background: var(--green) !important;
    border: 0 !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(45, 159, 116, 0.35);
}
body[data-main-tab='timeline'] #miniCalendar .calendar-item.selected .calendar-dow {
    color: var(--green-deep) !important;
    font-weight: 700;
}
body[data-main-tab='timeline'] #nav-timeline,
body[data-main-tab='gallery']:not([data-gallery-filter-nav='board']) #nav-gallery {
    color: var(--ink, #241f1c) !important;
}
/* 내 게시물 > 게시판 탭: 라운지 네비만 강조 (모먼트와 동시 강조 방지) */
body[data-main-tab='gallery'][data-gallery-filter-nav='board'] #nav-board {
    color: var(--ink, #241f1c) !important;
}
body[data-main-tab='gallery'][data-gallery-filter-nav='board'] #nav-gallery {
    color: #cbd5e1 !important;
}
/* 기존 :has()+ID 녹색 크롬 규칙보다 높은 우선순위로 밝은 탭 스킨을 확정 */
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #statusBarOverlay,
body[data-main-tab='gallery']:has(#mainApp:not(.hidden) #galleryView:not(.hidden)) #statusBarOverlay,
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #appTopChrome,
body[data-main-tab='gallery']:has(#mainApp:not(.hidden) #galleryView:not(.hidden)) #appTopChrome,
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #appTopChrome #mainAppHeader,
body[data-main-tab='gallery']:has(#mainApp:not(.hidden) #galleryView:not(.hidden)) #appTopChrome #mainAppHeader,
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #appTopChrome #trackerSection {
    background: #ffffff !important;
    background-image: none !important;
}
/* 모먼트 헤더 숨김: 위 흰 sticky 크롬 규칙을 덮어 레이아웃·배경을 접음 (순서·특이도 중요) */
body[data-main-tab='gallery']:has(#mainAppHeader.header-scroll-hidden):has(#mainApp:not(.hidden) #galleryView:not(.hidden)) #appTopChrome {
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}
body[data-main-tab='gallery']:has(#mainAppHeader.header-scroll-hidden):has(#mainApp:not(.hidden) #galleryView:not(.hidden)) #appTopChrome #mainAppHeader {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-bottom-color: transparent !important;
}
html:has(#galleryView:not(.hidden) #galleryContainer.moment-feed-layout-v2):has(#mainAppHeader.header-scroll-hidden) {
    scroll-padding-top: var(--safe-top);
}
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #headerAppTitle,
body[data-main-tab='gallery']:has(#mainApp:not(.hidden) #galleryView:not(.hidden)) #headerAppTitle {
    color: var(--green) !important;
}
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #trackerTitle,
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) .tracker-v2-month-label {
    color: var(--ink, #241f1c) !important;
    font-weight: 700;
}
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) .tracker-calendar-icon-btn,
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) .tracker-go-today-btn {
    color: var(--muted, #7a7268) !important;
}
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #trackerTabs {
    background: #f1f5f9 !important;
}
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #trackerTabs .view-tab.active {
    background: #ffffff !important;
    color: var(--green-deep) !important;
}
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #trackerTabs .view-tab.inactive {
    color: #94a3b8 !important;
}
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-dow {
    color: var(--muted, #7a7268) !important;
}
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-dow.text-rose-400,
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-item.weekend .calendar-dow {
    color: #fb7185 !important;
}
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-dot,
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-dot.dot-full,
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-dot.dot-mid,
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-dot.dot-low,
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-dot.dot-partial,
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-dot.dot-none {
    background: transparent !important;
    border: 0 !important;
    color: var(--ink, #241f1c) !important;
}
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-dot.dot-selected {
    background: var(--green) !important;
    border: 0 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(45, 159, 116, 0.35);
}
body[data-main-tab='timeline']:has(#mainApp:not(.hidden) #timelineView:not(.hidden)) #miniCalendar .calendar-item.selected .calendar-dow {
    color: var(--green-deep) !important;
    font-weight: 700;
}
/* 월 캘린더 팝업: 기록 없는 날은 원 없이 숫자만 (가로 스크롤 미니캘 density와 별도) */
#trackerMonthCalendarModal .tracker-month-dot.dot-none {
    background: transparent;
    color: var(--ink);
}
#trackerMonthCalendarModal .tracker-month-dot.dot-none.tracker-month-dot--weekend {
    color: var(--coral, #f2a8b4);
}