/* ══════════════════════════════════════════════════════════
   메모 기록 시트 — 끼니 시트와 같은 필드 마감 (docs/user-memo-items.md §4.4)

   라벨·구분선·입력칸·사진 줄 규칙은 위 공유 선택자
   `:is(#entryModal, #dailyJournalModal, #memoRecordModal)` 가 이미 준다.
   여기 남는 것은 (1) 끼니가 `#entryMealTimeSectionMain` 같은 id 로 받던 시간
   행 마감과 (2) 좁은 시트에 맞춘 라벨 칸 폭뿐이다. **공유 규칙 뒤에 와야**
   이 마감이 이기므로 파일 끝에 둔다.
   ══════════════════════════════════════════════════════════ */
#memoRecordModal .memo-record__body {
    background: var(--entry-surface, #fff);
    /* 사진 줄이 넘쳐도 시트가 가로로 밀리지 않게 */
    overflow-x: hidden;
    /*
     * 라벨 칸만 좁힌다. 끼니는 '어디서/무엇을/누구와'처럼 긴 라벨이 있어
     * 7.25rem 이 필요하지만 메모 라벨은 두 글자뿐이다. 시트 폭은 끼니와 같은
     * 28rem 이 됐지만(2026-09-12) 이 칸은 그대로 둔다 — 남는 폭은 입력칸이
     * 가져가는 편이 낫다. 7.25rem 을 쓰면 시각 복합칸([출처][오전/오후][시:분])이
     * 밀려 좁은 폰에서 시:분이 잘린다.
     */
    --entry-form-label-w: 5rem;
}
#memoRecordModal .entry-form-field-section:last-child {
    border-bottom: 0;
}
#memoRecordModal .entry-axis-label {
    white-space: nowrap;
}
#memoRecordModal .entry-axis-label-with-icon {
    gap: 0.375rem;
}

/* ── 라벨 아이콘 색: 끼니와 같은 규칙(항목마다 다른 색) ── */
#memoRecordModal .entry-axis-icon {
    color: #8b5cf6;
}
#memoRecordModal #memoRecordValueRow .entry-axis-icon {
    color: #f59e0b;
}
#memoRecordModal #memoRecordCommentSection .entry-axis-icon {
    color: var(--entry-action-icon, #76a797);
}
#memoRecordModal #memoRecordTimeSection .entry-axis-icon {
    color: #0ea5e9;
}

/* ── 시각 복합칸 — 끼니 시간 행과 같은 높이·글자 ── */
#memoRecordModal #memoRecordTimeSection .entry-meal-clock-compound {
    height: var(--entry-form-row-h);
    min-height: var(--entry-form-row-h);
}
#memoRecordModal #memoRecordTimeSection .entry-meal-time-source-btn {
    min-height: var(--entry-form-row-h);
    padding-left: 0.5rem;
    padding-right: 0.375rem;
    background: #ffffff;
    border-color: var(--entry-border-soft);
    font-size: 11px;
}

/* ── 값 칸 (숫자 메모) ── */
#memoRecordModal #memoRecordValue {
    text-align: right;
    padding: 0.5rem 0.75rem;
    border-color: var(--entry-border, #d0c6ba);
    font-variant-numeric: tabular-nums;
}
#memoRecordModal .memo-record__unit {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--entry-text-secondary, #64748b);
}

/* ── 내용 — 흰 바탕이라 윤곽이 있어야 입력칸으로 읽힌다 ── */
#memoRecordModal .memo-record__body .entry-comment-textarea {
    border-color: var(--entry-border, #d0c6ba);
    min-height: 3.5rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

/*
 * 내용 칸이 자라도 시트는 화면을 넘지 않는다.
 *
 * 패널이 `overflow:hidden` 이라 넘친 만큼이 **위아래에서 잘린다** — 제목과
 * 저장 버튼이 사라진다(기록 항목 설정 시트가 같은 자리에서 먼저 겪었다).
 * 머리·발치는 고정이고 남는 높이는 본문이 갖는다. `.memo-record__body` 는
 * 이미 `flex:1 1 auto; min-height:0; overflow-y:auto` 다.
 */
#memoRecordModal .entry-slot-picker {
    max-height: 100%;
}
#memoRecordModal .mealog-dialog-grabber,
#memoRecordModal .entry-slot-picker__head {
    flex-shrink: 0;
}

/* 사진이 없으면 미리보기 줄이 빈 칸으로 남지 않게 */
#memoRecordModal .entry-photo-preview-row:not(:has(.photo-preview-item)) {
    display: none;
}
/*
 * 끼니는 큰 사진 한 장을 두고 좌우 버튼으로 넘기지만(히어로), 메모는 장수가
 * 적어 띠로 늘어놓는다. 공유 규칙이 overflow:visible 로 덮으므로 되돌린다 —
 * 안 그러면 셋째 장부터 잘린 채 손이 닿지 않는다.
 */
#memoRecordModal .entry-photo-section--has-photos .entry-photo-preview-row {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
#memoRecordModal .entry-photo-preview-row::-webkit-scrollbar {
    display: none;
}

/* ── 밀로그 타임라인 「같이 먹자」 앱 소개 배너 (js/render/promo-banner.js) ────────
   기록 카드(.home-feed-card)와 **톤을 일부러 다르게** 둔다. 폭·모서리·그림자만 맞추고
   바탕은 아트의 베이지를 그대로 받는다 — 흰 카드로 두면 스크롤하는 눈에 기록으로 읽힌다.
   높이는 가로 배열(아트 · 문구 · 배지)이라 메모 카드 한 장과 같은 줄에 선다.            */
.mealog-promo-banner {
    /* 바탕은 아주 연한 크림. 아트의 베이지(#fce6c9)는 아트 칩 안에만 남겨, 주황이
       배너 전체를 덮지 않게 한다 — 기록 사이에 끼는 광고라 존재감은 낮을수록 좋다 */
    --promo-bg: #fff7ec;
    --promo-line: #e9c9a2;
    --promo-art-bg: #fce6c9;
    /* 이 바탕 위에서 대비 6.1 — 4.5 를 넘겨야 작은 글씨가 읽힌다 */
    --promo-lead: #6f5a4a;
/* 제목은 크림 바탕과 색상 계열이 겹쳐 어두운 주황을 쓰면 뭉개져 보인다 —
       명도를 올린 orange-500 이라야 또렷하다. 대비 2.9 는 4.5 에 못 미치지만 18px 800
       이고, 같은 뜻을 위 안내 줄(대비 6.1)이 이미 회색으로 전하고 있다 */
    --promo-title: #f97316;
    /* 배지 하나만 솔리드로 남긴다 — 바탕과 제목에서 주황을 눕힌 만큼, 누를 곳은 또렷해야
       배너가 「읽고 마는 것」이 되지 않는다. 흰 글씨 대비는 2.9 로 낮지만 배지는 보조 표시이고
       배너 전체가 클릭 대상이라 여기서 놓치는 정보는 없다 */
    --promo-cta-bg: #f2711c;
    --promo-cta-line: #e6650f;
    --promo-cta-text: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding: 11px 14px;
    background: var(--promo-bg);
    border: 1px solid var(--promo-line);
    border-radius: 1.5rem;
    box-shadow: 0 1px 0 rgba(43, 40, 37, 0.06), 0 6px 18px rgba(43, 40, 37, 0.07);
    cursor: pointer;
    transition: transform 0.15s ease;
    /* 일간보기 좌우 스와이프가 배너 위에서도 이어지게 — 세로 스크롤만 브라우저에 넘긴다 */
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.mealog-promo-banner:active {
    transform: scale(0.98);
}
.mealog-promo-banner:focus-visible {
    outline: 2px solid var(--promo-cta-line);
    outline-offset: 2px;
}
.mealog-promo-banner__art {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 16px;
    object-fit: cover;
    /* 아트 자체의 바탕색 — 칩 모서리가 배너 바탕 위에 또렷하게 선다 */
    background: var(--promo-art-bg);
}
.mealog-promo-banner__text {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* 기록 카드는 모두 왼쪽 정렬이다 — 배너만 가운데로 두어 「기록이 아닌 것」이
       한 번 더 갈린다. 두 줄 길이가 크게 달라(안내 15자 / 제목 4자) 왼쪽에 붙이면
       제목이 허전하게 뜬다 */
    text-align: center;
}
.mealog-promo-banner__lead {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--promo-lead);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mealog-promo-banner__title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--promo-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mealog-promo-banner__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 5px 8px 5px 10px;
    border-radius: 999px;
    background: var(--promo-cta-bg);
    border: 1px solid var(--promo-cta-line);
    color: var(--promo-cta-text);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
}
.mealog-promo-banner__cta i,
.mealog-promo-banner__cta svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}
/* 좁은 화면에서는 문구가 먼저 줄고 배지는 유지된다 */
@media (max-width: 360px) {
    .mealog-promo-banner {
        gap: 10px;
        padding: 9px 12px;
    }
    .mealog-promo-banner__art {
        width: 46px;
        height: 46px;
    }
    .mealog-promo-banner__title {
        font-size: 16.5px;
    }
}
.profile-level-up-notice { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; margin-top: 12px; border-radius: 12px; color: #276348; background: #e8f5ec; border: 1px solid #a9d5b9; animation: profile-level-rise .65s ease-out both; }
.profile-level-up-notice strong { font-size: 16px; }
.profile-level-up-notice span { font-size: 13px; }
.profile-character-level-up .profile-character-bust { animation: profile-level-glow 1.4s ease-out both; }
@keyframes profile-level-rise { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes profile-level-glow { 0% { transform: scale(1); box-shadow: 0 0 0 0 #8ecda600; } 35% { transform: translateY(-5px) scale(1.04); box-shadow: 0 0 0 10px #8ecda64d, 0 0 28px #8ecda6; } 100% { transform: scale(1); box-shadow: 0 0 0 18px #8ecda600; } }
@media (prefers-reduced-motion: reduce) { .profile-level-up-notice, .profile-character-level-up .profile-character-bust { animation: none; } }
.profile-level-badge-up { position: relative; display: inline-block; overflow: visible; color: #8c4b08; background: #fff1cf; border-radius: 6px; animation: profile-badge-pop 1.2s ease-out both; }
.profile-level-badge-up::after { content: ''; position: absolute; pointer-events: none; left: 50%; top: 50%; }
.profile-level-badge-up::after { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 2px; background: #ffb331; box-shadow: 0 -25px #ffb331, 22px -17px #ed8842, 30px 0 #ffcc58, 22px 17px #ed8842, 0 25px #ffb331, -22px 17px #ffcc58, -30px 0 #ed8842, -22px -17px #ffcc58; animation: profile-badge-sparks 1s .15s ease-out both; }
@keyframes profile-badge-pop { 0% { transform: scale(1); } 30% { transform: scale(1.22); box-shadow: 0 0 16px #efad4280; } 65% { transform: scale(.97); } 100% { transform: scale(1); } }
@keyframes profile-badge-sparks { 0% { opacity: 0; transform: scale(.2) rotate(-12deg); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .profile-level-badge-up { animation: none; } .profile-level-badge-up::after { display: none; } }