/* ── 헤더: 메타(날짜·슬롯) — 조용하게 ── */
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-modal-panel {
    background: var(--card);
    border-radius: var(--shell-r-dialog);
    border: 1px solid var(--line);
    box-shadow: 0 12px 40px rgba(36, 31, 28, 0.14);
    will-change: transform;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-modal-header {
    background: var(--entry-surface);
    border-bottom: 1px solid var(--entry-border-soft);
    border-radius: var(--shell-r-dialog) var(--shell-r-dialog) 0 0;
}
.entry-header-controls {
    min-width: 0;
    gap: 0.375rem;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-header-date,
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-header-slot {
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
    background: var(--entry-surface-muted);
    border: 1px solid var(--entry-border-soft);
    border-radius: var(--entry-radius);
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
/* 본식 슬롯: 타임라인 아이콘 톤 계열, 한 단계 짙은 배경 */
#entryModal .entry-header-controls[data-entry-slot-theme="morning"] .entry-header-date,
#entryModal .entry-header-controls[data-entry-slot-theme="morning"] .entry-header-slot,
#entryModal .entry-header-controls[data-entry-slot-theme="morning"] .entry-form-mode-switch {
    background: #fef3c7;
}
#entryModal .entry-header-controls[data-entry-slot-theme="lunch"] .entry-header-date,
#entryModal .entry-header-controls[data-entry-slot-theme="lunch"] .entry-header-slot,
#entryModal .entry-header-controls[data-entry-slot-theme="lunch"] .entry-form-mode-switch {
    background: #d4efe3;
}
#entryModal .entry-header-controls[data-entry-slot-theme="dinner"] .entry-header-date,
#entryModal .entry-header-controls[data-entry-slot-theme="dinner"] .entry-header-slot,
#entryModal .entry-header-controls[data-entry-slot-theme="dinner"] .entry-form-mode-switch {
    background: #e0f2fe;
}
/* 하루 소감: 보라 계열 헤더 칩 */
#dailyJournalModal .entry-header-controls[data-entry-slot-theme="daily_journal"] .entry-header-date,
#dailyJournalModal .entry-header-controls[data-entry-slot-theme="daily_journal"] .entry-header-slot {
    background: #ede9fe;
}
#entryModal .entry-header-controls[data-entry-slot-theme="morning"] .entry-header-date:focus,
#entryModal .entry-header-controls[data-entry-slot-theme="morning"] .entry-header-slot:focus,
#entryModal .entry-header-controls[data-entry-slot-theme="morning"] button.entry-header-date:focus {
    background: #fef3c7;
    border-color: var(--entry-border-soft);
    box-shadow: 0 0 0 3px var(--entry-accent-ring);
}
#entryModal .entry-header-controls[data-entry-slot-theme="lunch"] .entry-header-date:focus,
#entryModal .entry-header-controls[data-entry-slot-theme="lunch"] .entry-header-slot:focus,
#entryModal .entry-header-controls[data-entry-slot-theme="lunch"] button.entry-header-date:focus {
    background: #d4efe3;
    border-color: var(--entry-border-soft);
    box-shadow: 0 0 0 3px var(--entry-accent-ring);
}
#entryModal .entry-header-controls[data-entry-slot-theme="dinner"] .entry-header-date:focus,
#entryModal .entry-header-controls[data-entry-slot-theme="dinner"] .entry-header-slot:focus,
#entryModal .entry-header-controls[data-entry-slot-theme="dinner"] button.entry-header-date:focus {
    background: #e0f2fe;
    border-color: var(--entry-border-soft);
    box-shadow: 0 0 0 3px var(--entry-accent-ring);
}
#entryModal .entry-header-date:focus,
#entryModal .entry-header-slot:focus {
    outline: none;
    background: var(--entry-surface);
    border-color: var(--entry-border-soft);
    box-shadow: 0 0 0 3px var(--entry-accent-ring);
    color: #0f172a;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-header-date {
    flex: 0 1 auto;
    min-width: 6.5rem;
    max-width: 8.25rem;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    text-align: center;
}
#dailyJournalModal .entry-header-date {
    cursor: default;
}
#entryModal button.entry-header-date:focus {
    outline: none;
    background: var(--entry-surface);
    border-color: var(--entry-border-soft);
    box-shadow: 0 0 0 3px var(--entry-accent-ring);
    color: #0f172a;
}
#entryModal .entry-header-slot {
    flex: 1 1 0;
    min-width: 6.75rem;
    text-align: center;
    text-align-last: center;
    padding-left: 0.375rem;
    padding-right: 1.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.35rem center;
    background-size: 0.875rem;
}
#dailyJournalModal .entry-header-slot {
    flex: 1 1 auto;
    min-width: 8.75rem;
    max-width: 12rem;
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
    background-image: none;
    cursor: default;
}
.entry-form-mode-switch {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    flex: 0 0 auto;
    padding: 3px;
    min-width: 0;
    border: 1px solid #ddd4c8;
    border-radius: 9999px;
    background: #ebe4da;
}
#entryModal .entry-header-controls[data-entry-slot-theme="morning"] .entry-form-mode-switch,
#entryModal .entry-header-controls[data-entry-slot-theme="lunch"] .entry-form-mode-switch,
#entryModal .entry-header-controls[data-entry-slot-theme="dinner"] .entry-form-mode-switch {
    background: #ebe4da;
    border-color: #ddd4c8;
}
#entryModal .entry-form-mode-switch button.entry-form-mode-btn {
    flex: 1 1 50%;
    min-width: 2.75rem;
    padding: 0.35rem 0.7rem;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: #b0a89e;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
#entryModal .entry-form-mode-switch button.entry-form-mode-btn.entry-form-mode-btn--active {
    background: #ffffff;
    color: #1f1a17;
    font-weight: 700;
    box-shadow: 0 1px 3px rgb(36 31 28 / 0.12);
}
#entryModal .entry-form-mode-switch button.entry-form-mode-btn:not(.entry-form-mode-btn--active):hover {
    color: #8a8076;
    background: rgb(255 255 255 / 0.35);
}

/* ── 본문 영역 ── */

/* ── 기록 시트 단계: 상단 현재 단계 + 하단 이전/다음 유도 ── */
#entryModal .entry-sheet-step-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    margin: 0.45rem 1rem 0.85rem;
    padding: 0.35rem 0 0.2rem;
    box-sizing: border-box;
    flex-shrink: 0;
}
#entryModal .entry-sheet-step-label {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.3;
    color: var(--ink, #241f1c);
    text-align: left;
}
#entryModal .entry-sheet-step-dots {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.2rem 0;
    /* 가로 스와이프 탭 전환은 JS, 브라우저는 세로만 네이티브 처리 */
    touch-action: pan-y;
}
#entryModal .entry-sheet-step-dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d0c6ba;
    cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
#entryModal .entry-sheet-step-dot--active,
#entryModal .entry-sheet-step-dot[aria-selected="true"] {
    width: 1.25rem;
    background: var(--green, #3cb889);
}
#entryModal .entry-sheet-step-dot--disabled,
#entryModal .entry-sheet-step-dot:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
#entryModal .entry-sheet-nav-bar {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    margin: 0.35rem 1rem 0.55rem;
    flex-shrink: 0;
}
#entryModal .entry-sheet-nav-bar.hidden {
    display: none !important;
}
#entryModal .entry-sheet-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 0;
    min-height: 2.35rem;
    padding: 0.4rem 0.65rem;
    border-radius: 12px;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#entryModal .entry-sheet-nav-btn.hidden {
    display: none !important;
}
#entryModal .entry-sheet-nav-btn--prev {
    flex: 0 1 36%;
    border: 1px solid transparent;
    background: transparent;
    color: #7a7268;
}
#entryModal .entry-sheet-nav-btn--prev:hover,
#entryModal .entry-sheet-nav-btn--prev:active {
    background: rgba(36, 31, 28, 0.04);
    color: #4f4841;
}
#entryModal .entry-sheet-nav-btn--next {
    flex: 1 1 auto;
    border: 1.5px solid var(--green-mute, #b4e2cd);
    background: transparent;
    color: var(--green-deep, #1f8a62);
}
#entryModal .entry-sheet-nav-btn--next:hover,
#entryModal .entry-sheet-nav-btn--next:active {
    background: var(--green-soft, #eaf8f2);
    border-color: var(--green, #3cb889);
}
#entryModal .entry-sheet-nav-bar--single .entry-sheet-nav-btn--prev,
#entryModal .entry-sheet-nav-bar--single .entry-sheet-nav-btn--next {
    flex: 1 1 auto;
}
#entryModal .entry-sheet-nav-btn__hint {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.75;
    flex-shrink: 0;
}
#entryModal .entry-sheet-nav-btn--next .entry-sheet-nav-btn__hint {
    color: var(--green, #3cb889);
    opacity: 0.9;
}
#entryModal .entry-sheet-nav-btn__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#entryModal .entry-sheet-nav-btn__icon {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
}
#entryModal .entry-sheet-tabpanel.hidden,
#entryModal .entry-sheet-tabpanel[hidden] {
    display: none !important;
}
/*
 * 기준 높이 측정용 프로브:
 * - 무엇을 메인 태그 1행 + 사용자 태그 1행이 보이는 상태
 * - 메모는 접힌 1줄 (포커스 시 확장은 syncEntrySheetHeightLock으로 시트 성장)
 */
#entryModal.entry-sheet-height-probe #entryWhatChips {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.375rem !important;
    margin-bottom: 0 !important;
    min-height: 2rem;
    box-sizing: border-box;
}
#entryModal.entry-sheet-height-probe #entryWhatChips.hidden {
    visibility: hidden;
    pointer-events: none;
}
#entryModal.entry-sheet-height-probe #entryWhatSuggestions,
#entryModal.entry-sheet-height-probe #entryWhatSuggestions:empty {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
    margin-top: 0.25rem !important;
    min-height: 4.25rem;
    padding-bottom: 2px;
    box-sizing: border-box;
}
#entryModal.entry-sheet-height-probe #entryWhatSuggestions:empty {
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
}
#entryModal.entry-sheet-height-probe #entryCommentSectionMeal:not(.hidden) .entry-comment-textarea,
#entryModal.entry-sheet-height-probe #entryCommentSectionSnack:not(.hidden) .entry-comment-textarea {
    min-height: calc(2em * var(--entry-comment-line, 1.35) + 0.9rem) !important;
    max-height: calc(2em * var(--entry-comment-line, 1.35) + 0.9rem) !important;
    height: calc(2em * var(--entry-comment-line, 1.35) + 0.9rem) !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}
/* 탭 스와이프/슬라이드 전환 */
#entryModal #modalScrollArea.entry-sheet-dragging,
#entryModal #modalScrollArea.entry-sheet-animating {
    overflow-x: hidden;
    overflow-y: hidden;
    touch-action: none;
}
#entryModal #modalScrollArea.entry-sheet-animating {
    position: relative;
}
#entryModal .entry-sheet-tabpanel--dragging,
#entryModal .entry-sheet-tabpanel--leaving,
#entryModal .entry-sheet-tabpanel--entering {
    backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
    #entryModal .entry-sheet-tabpanel--dragging,
    #entryModal .entry-sheet-tabpanel--leaving,
    #entryModal .entry-sheet-tabpanel--entering {
        transition: none !important;
    }
}
/* entry-detail-record-bar removed — 상세보기 칩 UI 삭제 */

:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-sheet-body {
    background: var(--entry-surface-body);
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-sheet-zone--media {
    background: var(--entry-surface);
    padding: 0;
    border-bottom: none;
}
#entryModal .entry-sheet-zone--core {
    background: var(--entry-surface);
    padding: 0;
}
#entryModal #entryAxisFields + #entryMealExtras,
#entryModal #entryAxisFields + #entrySnackExtras {
    margin-top: 0;
}
#entryModal .entry-sheet-zone--metrics {
    background: var(--entry-surface-muted);
    padding: 0;
    border-top: 1px solid var(--entry-border-soft);
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-sheet-zone--memo {
    background: var(--entry-surface-band);
    border-top: 1px solid var(--entry-border-soft);
}

/* ── 항목별 빠른 입력 — 화살표 토글 ── */
#entryModal .entry-axis-label-group {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: var(--entry-form-label-w);
    flex-wrap: nowrap;
    white-space: nowrap;
    grid-column: 1;
}
#entryModal .entry-axis-label-group .entry-axis-label {
    min-width: 0;
    white-space: nowrap;
}
#entryModal .entry-field-quick-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    padding: 0;
    border: 1px solid var(--entry-border);
    border-radius: 9999px;
    background: var(--entry-surface-muted);
    color: var(--entry-text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#entryModal .entry-field-quick-toggle:hover {
    color: var(--entry-text-secondary);
    border-color: var(--entry-border-row);
}
#entryModal .entry-field-quick-toggle--open,
#entryModal .entry-field-quick-toggle[aria-expanded="true"] {
    color: var(--entry-accent-dark);
    border-color: var(--green-mute);
    background: var(--entry-accent-soft);
}
#entryModal .entry-field-quick-toggle__icon {
    font-size: 0.5625rem;
    line-height: 1;
    transition: transform 0.2s ease;
}
#entryModal .entry-field-quick-toggle--open .entry-field-quick-toggle__icon,
#entryModal .entry-field-quick-toggle[aria-expanded="true"] .entry-field-quick-toggle__icon {
    transform: rotate(90deg);
}
/* 어디서·무엇을·누구와: 입력란과 화살표 간격 + 입력란보다 조금 작은 화살표 */
#entryModal .entry-sheet-zone--core .entry-axis-input-row > .entry-field-quick-toggle,
#entryModal .entry-sheet-zone--core .entry-axis-label-row > .entry-field-quick-toggle {
    width: calc(var(--entry-form-row-h) - 0.75rem);
    height: calc(var(--entry-form-row-h) - 0.75rem);
    margin-left: 0.5rem;
}
#entryModal .entry-sheet-zone--core .entry-axis-input-row > .entry-field-quick-toggle .entry-field-quick-toggle__icon,
#entryModal .entry-sheet-zone--core .entry-axis-label-row > .entry-field-quick-toggle .entry-field-quick-toggle__icon {
    font-size: 0.9rem;
    width: 0.9rem;
    height: 0.9rem;
}
#entryModal .entry-sheet-zone--core .entry-axis-input-row > .entry-field-quick-toggle .entry-field-quick-toggle__icon svg,
#entryModal .entry-sheet-zone--core .entry-axis-label-row > .entry-field-quick-toggle .entry-field-quick-toggle__icon svg {
    width: 0.9rem;
    height: 0.9rem;
}

#entryFormFieldStack {
    display: flex;
    flex-direction: column;
    margin: 0;
}
#entryFormFieldStack > #entryAxisFields,
#entryFormFieldStack > #entryMealExtras,
#entryFormFieldStack > #entrySnackExtras {
    margin: 0;
}

/* ── 필드 행 ── */
:is(#entryModal, #memoRecordModal) .entry-form-field-section {
    margin: 0;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--entry-border-row);
    background: transparent;
}
#entryModal .entry-sheet-zone--core .entry-form-field-section:last-child,
#entryModal .entry-sheet-zone--metrics .entry-form-field-section:last-child {
    border-bottom: 1px solid var(--entry-border-row);
}
#entryModal .entry-form-field-chips:not(.hidden) {
    margin-top: 0.375rem;
    margin-bottom: 0;
}
#entryModal .entry-form-field-subtags {
    margin-top: 0.25rem;
}
#entryModal .entry-form-field-subtags:empty {
    display: none;
    margin: 0;
    padding: 0;
}
#entryModal #entryWhereChips:not(.hidden),
#entryModal #entryWhatChips:not(.hidden),
#entryModal #entryWithChips:not(.hidden),
#entryModal #entryWhereSuggestions,
#entryModal #entryWhatSuggestions,
#entryModal #entryWithSuggestions {
    padding-left: calc(var(--entry-form-label-w) + var(--entry-form-core-gap) + var(--entry-form-core-input-pl));
}

/* ── 어디서·무엇을·누구와: 타이틀↔입력 간격 50% ── */
#entryModal .entry-sheet-zone--core .entry-axis-input-row {
    gap: var(--entry-form-core-gap) !important;
}
#entryModal .entry-sheet-zone--core .entry-axis-input-col {
    padding-left: var(--entry-form-core-input-pl) !important;
}

/* ── 라벨: 14px·검정 통일 ── */
:is(#entryModal, #memoRecordModal) .entry-axis-label {
    min-width: var(--entry-form-label-w);
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
}
:is(#entryModal, #memoRecordModal) .entry-axis-label-with-icon {
    display: inline-flex;
    align-items: center;
    gap: calc(0.375rem + 0.5em);
    min-width: auto;
}
:is(#entryModal, #memoRecordModal) .entry-axis-icon {
    width: 1.05rem;
    font-size: 0.9rem;
    line-height: 1;
    text-align: center;
    flex-shrink: 0;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-header .entry-axis-icon {
    color: #8b5cf6;
}
#entryModal #entryWhereSection .entry-axis-icon {
    color: var(--green);
}
#entryModal #entryWhatSection .entry-axis-icon {
    color: #f97316;
}
#entryModal #entryWithSection .entry-axis-icon {
    color: #6366f1;
}
#entryModal #ratingSection .entry-axis-icon,
#entryModal #snackRatingSection .entry-axis-icon {
    color: #f59e0b;
}
#entryModal #satietySection .entry-axis-icon,
#entryModal #snackSatietySection .entry-axis-icon {
    color: #ec4899;
}
#entryModal #entryMealTimeSectionMain .entry-axis-icon,
#entryModal #entryMealTimeSectionSnack .entry-axis-icon {
    color: #0ea5e9;
}

:is(#entryModal, #memoRecordModal) .entry-axis-input-row {
    width: 100%;
    gap: var(--entry-form-row-gap);
    align-items: center;
    display: grid;
    grid-template-columns: var(--entry-form-label-w) minmax(0, 1fr);
}
#entryModal .entry-axis-input-row:has(> .entry-field-quick-toggle) {
    grid-template-columns: var(--entry-form-label-w) minmax(0, 1fr) auto;
}
#entryModal .entry-axis-input-row > .entry-axis-label.entry-axis-label-with-icon {
    grid-column: 1;
}
:is(#entryModal, #memoRecordModal) .entry-axis-input-col {
    grid-column: 2;
    min-width: 0;
    padding-left: var(--entry-form-input-pl);
    width: 100%;
}
#entryModal .entry-axis-input-row > .entry-field-quick-toggle {
    grid-column: 3;
    justify-self: end;
}

/* ── 입력 필드 (핵심 강조) ── */
:is(#entryModal, #memoRecordModal) .entry-axis-input-col input[type="text"],
#entryModal .entry-axis-input-area input[type="text"],
#entryModal #entryWhatSection .entry-what-textarea,
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-comment-textarea {
    background: var(--entry-input-bg);
    border: 1px solid transparent;
    border-radius: var(--entry-radius);
    color: var(--entry-text-primary);
    font-weight: 400;
    font-size: 0.875rem;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, min-height 0.2s ease, padding 0.2s ease;
}
/* 어디서·무엇을·누구와: 초기 빈 입력란도 윤곽이 보이도록 */
#entryModal #entryWhereSection input[type="text"],
#entryModal #entryWhatSection input[type="text"],
#entryModal #entryWhatSection .entry-what-textarea,
#entryModal #entryWithSection input[type="text"] {
    border-color: var(--entry-border, #d0c6ba);
}
#entryModal .entry-sheet-zone--core #entryWhereSection input[type="text"],
#entryModal .entry-sheet-zone--core #entryWhatSection input[type="text"],
#entryModal .entry-sheet-zone--core #entryWhatSection .entry-what-textarea,
#entryModal .entry-sheet-zone--core #entryWithSection input[type="text"] {
    font-size: 0.9375rem;
}
:is(#entryModal, #memoRecordModal) .entry-axis-input-col input[type="text"]::placeholder,
#entryModal .entry-axis-input-area input[type="text"]::placeholder,
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-comment-textarea::placeholder,
#entryModal #entryWhatSection .entry-what-textarea::placeholder {
    color: var(--entry-placeholder);
    font-weight: 500;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-comment-textarea::placeholder {
    font-size: 0.875rem;
}
#entryModal #entryWhereSection input[type="text"]::placeholder,
#entryModal #entryWhatSection input[type="text"]::placeholder,
#entryModal #entryWhatSection .entry-what-textarea::placeholder,
#entryModal #entryWithSection input[type="text"]::placeholder {
    font-size: 0.875rem;
}
#entryModal .entry-axis-input-col input[type="text"]:focus,
#entryModal .entry-axis-input-area input[type="text"]:focus,
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-comment-textarea:focus,
#entryModal #entryWhatSection .entry-what-textarea:focus {
    outline: none;
    background: var(--entry-input-bg-focus);
    border-color: var(--entry-accent);
    box-shadow: 0 0 0 3px var(--entry-accent-ring);
}
/* .entry-inline-action-btn 규칙은 2026-09-08 에 걷어냈다 — 유일하게 쓰던 자리가
   어디서 칸의 돋보기(#entryWhereKakaoBtn)였고, 그 버튼이 사라지면서 클래스도 죽었다.
   장소 검색은 맥락 줄의 어디서 피커가 맡는다. */

/* ── 사진 (보조) ── */
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section {
    margin-bottom: 0;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--entry-border-row);
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-header {
    margin-bottom: 0;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-preview-row {
    padding: 0;
    margin: 0;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos .entry-photo-preview-row {
    margin: 0;
    padding: 0;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .record-photo-add-btn {
    border: 1px solid var(--entry-border, #e2e8f0);
    background: #ffffff;
    color: var(--entry-action-icon);
    box-sizing: border-box;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .record-photo-add-btn i {
    font-size: 1.125rem;
    color: var(--entry-action-icon);
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .record-photo-add-btn:hover {
    background: #ffffff;
    border-color: #cbd5e1;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .record-photo-add-btn:active {
    background: #f8fafc;
    border-color: var(--entry-action-icon);
}
/*
 * 비율 드롭다운은 사진 유무와 상관없이 늘 보인다.
 * 예전에는 has-photos 일 때만 띄웠는데, 사진을 고르는 순간 스피너 단계가 has-photos 를
 * 먼저 붙이고 선택이 취소·실패하면 떼지 않아, 등록 전에도 떴다 안 떴다 했다.
 * 사진 전에 비율을 정해 두는 흐름도 있어 조건을 없앴다.
 */
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-aspect-tools {
    display: inline-flex;
    opacity: 1;
}
/*
 * 사진 비율 — 버튼 셋(1:1·3:4·4:3)을 드롭다운 하나로 접었다.
 * 기록 전체에 한 번 정하는 값이라 선택지를 늘 펼쳐 둘 이유가 없고,
 * 펼쳐 두면 사진 칸 도구 줄에서 가장 넓은 자리를 차지했다.
 */
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-aspect-tools .photo-aspect-select {
    box-sizing: border-box;
    /* 옆의 카메라·앨범 버튼(w-10 h-10 rounded-xl)과 같은 높이·모서리 */
    height: 2.5rem;
    margin: 0;
    padding: 0 1.5rem 0 0.75rem;
    border: 1px solid var(--entry-border);
    border-radius: 0.75rem;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857b70' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.45rem center / 0.75rem 0.75rem;
    box-shadow: 0 1px 2px rgba(36, 31, 28, 0.06);
    color: var(--entry-text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-aspect-tools .photo-aspect-select:focus-visible {
    border-color: var(--green-mute);
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-count {
    margin-left: 0.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--entry-text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-transform: none;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-count.text-emerald-600 {
    color: var(--entry-accent-dark);
}

/*
 * ── 사진 등록 후: 머리 줄은 등록 전 모양 그대로, 그 아래에 썸네일 띠만 붙는다 ──
 *
 * 예전에는 첨부하는 순간 머리 줄이 사진 아래로 내려가 베이지 띠·작은 라벨·
 * 32px 버튼으로 바뀌었다. 같은 칸이 첨부 전후로 다른 칸처럼 읽혀서, 바탕·
 * 라벨·버튼 크기·위치를 모두 등록 전(다른 항목 줄과 같은 규칙)에 맞췄다.
 * 사진이 붙어서 새로 생기는 것은 썸네일 띠뿐이다(비율 드롭다운은 등록 전부터 있다).
 */
/* :not(.hidden) — has-photos의 display:flex가 Tailwind .hidden을 덮지 않도록 */
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos:not(.hidden) {
    position: relative;
    display: flex;
    flex-direction: column;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section.hidden {
    display: none !important;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos .entry-photo-preview-row {
    order: 2;
    margin: 0;
    padding: 0;
    overflow: visible;
    display: block;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos .entry-photo-header {
    order: 1;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos #photoPreviewContainer,
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos #snackPhotoPreviewContainer {
    display: block;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    min-width: 0;
}
/* 등록 사진 썸네일 스트립 — 편집·좌우 이동은 사진 내 하단 오버레이 */
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos .entry-photo-thumb-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0;
    /* 좌우 여백은 사진 칸(1rem)이 이미 준다 — 머리 줄 라벨과 첫 장의 왼쪽 선을 맞춘다 */
    padding: 0.625rem 0 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    box-sizing: border-box;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos .photo-preview-thumb-card {
    display: block;
    width: 10.2rem;
    min-width: 10.2rem;
    flex: 0 0 auto;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos .photo-preview-item--thumb {
    position: relative;
    width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    border-radius: 12px;
    border: 1.5px solid #d8cfc3;
    background: #f1f5f9;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos .photo-preview-item--thumb .photo-remove-btn {
    width: 24px;
    height: 24px;
    top: 6px;
    right: 6px;
    font-size: 12px;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos .photo-preview-item--thumb .photo-remove-btn [data-lucide],
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos .photo-preview-item--thumb .photo-remove-btn .lucide {
    width: 12px;
    height: 12px;
}
/* 사진 내 하단: ‹ 편집 › — 아래 패딩으로 살짝 올림 */
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos .photo-preview-thumb-controls.photo-preview-bottom-bar {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.25rem 0.35rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.28) 55%, transparent);
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos .photo-preview-thumb-controls .photo-order-btn,
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos .photo-preview-thumb-controls .photo-edit-btn {
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    height: 22px;
    min-height: 22px;
    max-height: 22px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    box-shadow: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos .photo-preview-thumb-controls .photo-order-btn:active:not(:disabled),
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos .photo-preview-thumb-controls .photo-edit-btn:active {
    background: rgba(0, 0, 0, 0.78);
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos .photo-preview-thumb-controls .photo-order-btn:disabled {
    opacity: 0.32;
    cursor: not-allowed;
    pointer-events: none;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos .photo-preview-thumb-controls .photo-order-btn--arrow {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-section--has-photos .photo-preview-thumb-controls .photo-edit-btn--text {
    padding: 0 0.25rem;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: #fff;
}

/* ── 만족도·포만감·시간 ── */
#entryModal .entry-gauge-band {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}
#entryModal #ratingSection .entry-axis-input-row,
#entryModal #snackRatingSection .entry-axis-input-row {
    min-height: var(--entry-form-row-h);
}
#entryModal .entry-gauge-stars {
    width: 100%;
    justify-content: flex-end !important;
    gap: 0.625rem;
}
#entryModal .entry-gauge-stars .star-btn {
    padding: 2px;
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1;
}
#entryModal .entry-gauge-stars .star-btn .lucide,
#entryModal .entry-gauge-stars .star-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 1.25;
}
#entryModal .entry-gauge-satiety {
    width: 100%;
    max-width: 100%;
    gap: 0.625rem;
    justify-content: flex-end !important;
}
#entryModal .entry-gauge-satiety-btn {
    flex: 0 0 auto !important;
    min-width: 0;
    padding-left: 0.125rem;
    padding-right: 0.125rem;
}
#entryModal #satietySection .entry-axis-input-row,
#entryModal #snackSatietySection .entry-axis-input-row {
    align-items: center;
}
/*
 * 평가 구역의 라벨 열을 좁힌다 — 7.25rem → 5rem.
 *
 * "🕐 시간" 두 자에 116px 이 배정돼 있었다. 375px 기기에서 그 행의 전체 폭이
 * 301px 이니 라벨이 40% 를 쥐고 시작한 셈이고, 남은 167px 을 세 칸이 나눠
 * 가지려니 시각이 밀려났다.
 *
 * 같은 구역의 별점·포만감은 이 변화가 보이지 않는다 — 두 게이지 모두
 * `justify-content: flex-end` 라 **오른쪽 끝에 붙어 있고**, 감싼 띠는 배경도
 * 테두리도 없다. 열이 넓어지면 왼쪽에 투명한 빈자리가 늘 뿐이다. 라벨 자체는
 * 열 안에서 왼쪽 정렬이라 제자리에 그대로 선다.
 */
#entryModal .entry-sheet-zone--metrics {
    /* 만족도·포만감은 라벨 옆에 초기화 버튼을 달고 있다 — 실측 96.4px 이 그 행의 하한이다 */
    --entry-form-label-w: 6.25rem;
    /* 이 구역에서 눈에 보이는 왼쪽 모서리는 시각 칸 하나뿐이라(게이지는 오른쪽 정렬) 여백을 걷는다 */
    --entry-form-input-pl: 0rem;
}

/*
 * 시각 복합칸의 너비 배분 — [출처 ▾][오전/오후][시:분]
 *
 * 좁은 화면에서 시:분이 통째로 잘려 나가던 자리다. 실측(375px 기기): 칸 전체가
 * 167px 인데 출처 버튼 88.5 + 오전/오후 select 76 = 164.5 를 먼저 가져가 시각에
 * 0.5px 만 남았다. 셋 다 `shrink-0` 이었고, 유일하게 줄어들 수 있는 것이 하필
 * 제일 중요한 시각 칸이었기 때문이다.
 *
 * 그래서 양보의 순서를 뒤집는다.
 *  - 시:분: 최소 폭을 못 박는다. 어떤 폭에서도 "12:34" 는 온전히 보인다.
 *  - 오전/오후: 글자 두 자 + 여백만큼 고정. 줄지도 늘지도 않는다.
 *  - 출처: 가장 먼저 양보한다 — 셋 중 유일하게 글자를 줄여도 뜻이 남는 칸이다
 *    (…으로 잘려도 옆의 시트를 열면 무엇이 골라져 있는지 다시 보인다).
 */
:is(#entryModal, #memoRecordModal) .entry-meal-time-source-btn {
    flex: 0 1 auto;
    min-width: 2.25rem;
    gap: 0.125rem;
    padding-left: 0.5rem;
    padding-right: 0.375rem;
}
/* 12px 글자 옆에 18px(lucide 기본) 화살표가 서 있었다 — 글자에 맞춰 낮춘다 */
:is(#entryModal, #memoRecordModal) .entry-meal-time-source-btn > svg {
    width: 0.6875rem;
    height: 0.6875rem;
}
:is(#entryModal, #memoRecordModal) .entry-meal-time-source-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:is(#entryModal, #memoRecordModal) .entry-meal-clock-value {
    /*
     * '오전 09:45' 한 덩어리가 들어가는 최소 폭 — 실측 84.4px 에 여유 한 줌.
     * 상자에 상한이 걸린 뒤로 이 값이 커지면 그만큼 **출처 버튼에서 뺏어 온다**
     * (이 칸만 flex-grow 를 갖는다). 필요한 만큼만 잡아 둔다.
     */
    flex: 1 1 5.5rem;
    min-width: 5.5rem;
}
/*
 * 시각 칸은 「고쳐 쓰는 자리」가 아니라 「캐러셀을 여는 자리」다.
 *
 * 예전에는 여기만 자판으로 치고 출처▾ 의 '직접 입력'은 휠을 띄워, 같은 값을 같은
 * 시트 안에서 두 가지 방법으로 고치게 돼 있었다. 그리고 그 옆에는 오전/오후를
 * 따로 뒤집는 칸이 또 있었다 — 만질 곳이 셋이었다. 지금은 하나다.
 *
 * 값은 이 버튼의 `data-clock24` 가 쥔다. 안의 두 조각은 그 값을 그린 것뿐이라
 * 표시와 저장값이 어긋날 자리가 없다.
 */
:is(#entryModal, #memoRecordModal) .entry-meal-clock-value__btn {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
}
/*
 * 오전/오후는 컨트롤이 아니라 시:분에 붙은 **단위 글자**다 — 숫자보다 한 걸음
 * 물러서게 두어, 눈이 시각부터 읽고 오전/오후를 확인하게 한다.
 */
:is(#entryModal, #memoRecordModal) .entry-meal-clock-value .entry-meal-ampm {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--entry-text-muted, #64748b);
    white-space: nowrap;
}
/* 이 행에서 가장 자주 읽히는 글자다 — 옆 라벨(12px)보다 크게 둬야 먼저 눈에 든다 */
:is(#entryModal, #memoRecordModal) .entry-meal-clock-text {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--entry-text-primary, #1e293b);
    white-space: nowrap;
}
:is(#entryModal, #memoRecordModal) .entry-meal-clock-text--placeholder {
    font-weight: 500;
    color: var(--entry-placeholder, #94a3b8);
}
/*
 * 상자는 열을 다 채우지 않는다 — 내용만큼만 쥐고 오른쪽에 붙는다.
 *
 * 오전/오후가 제 칸을 갖고 있을 때는 셋이 열을 꽉 채웠지만, 시:분과 한 덩어리가
 * 된 뒤로는 값이 오른쪽에 붙고 왼쪽에 흰 여백만 길게 남았다. 넓은 기기일수록
 * 심했다(430px 에서 246px 상자에 내용은 162px). 상한을 두고 오른쪽에 붙이면
 * 위의 만족도·포만감 게이지와 오른쪽 끝이 나란해진다 — 그쪽도 오른쪽 정렬이다.
 *
 * 상한은 최악의 조합(출처 '현재 시각' + '오전 09:01')의 실측 161.9px 에 여유 한 줌.
 * 좁은 기기에서는 상한에 닿지 않으니 지금까지의 폭 배분이 그대로 산다.
 */
:is(#entryModal, #memoRecordModal) .entry-meal-clock-compound {
    width: 100%;
    max-width: 10.5rem;
    margin-left: auto;
    background: #ffffff;
    border: 1px solid var(--entry-border-row);
    border-radius: var(--entry-radius);
    box-sizing: border-box;
}
#entryModal #entryMealTimeSectionMain .entry-meal-clock-compound,
#entryModal #entryMealTimeSectionSnack .entry-meal-clock-compound {
    height: var(--entry-form-row-h);
    min-height: var(--entry-form-row-h);
}
#entryModal #entryMealTimeSectionMain .entry-meal-time-source-btn,
#entryModal #entryMealTimeSectionSnack .entry-meal-time-source-btn {
    min-height: var(--entry-form-row-h);
    background: #ffffff;
    border-color: var(--entry-border-soft);
    font-size: 12px;
}
#entryModal .entry-meal-clock-compound .entry-meal-time-off-display {
    background: #ffffff;
    justify-content: flex-end;
    text-align: right;
    padding-right: 0.75rem;
    font-size: 12px;
}
:is(#entryModal, #memoRecordModal) .entry-meal-clock-compound:focus-within {
    background: #ffffff;
    border-color: var(--entry-accent);
    box-shadow: 0 0 0 3px var(--entry-accent-ring);
}

#entryModal #modalScrollArea > #entryCommentDetailFooter {
    margin-top: 0 !important;
}

/* 빠른 입력 OFF: 텍스트·시간 행 높이 통일 */
#entryModal #entryWhereSection.entry-field-quick-off .entry-axis-label-row,
#entryModal #entryWhatSection.entry-field-quick-off .entry-axis-label-row,
#entryModal #entryWithSection.entry-field-quick-off .entry-axis-label-row,
#entryModal #entryMealTimeSectionMain .entry-axis-input-row,
#entryModal #entryMealTimeSectionSnack .entry-axis-input-row,
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-header {
    min-height: var(--entry-form-row-h);
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-header {
    display: grid;
    grid-template-columns: var(--entry-form-label-w) minmax(0, 1fr);
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-header > .entry-axis-label {
    grid-column: 1;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-photo-header > .entry-axis-input-col {
    grid-column: 2;
    padding-left: var(--entry-form-input-pl);
}
#entryModal #entryWhereSection.entry-field-quick-off .entry-axis-input-area > input,
#entryModal #entryWhereSection.entry-field-quick-off .entry-axis-input-area .relative > input,
#entryModal #entryWhatSection.entry-field-quick-off #deliveryVendorInput,
#entryModal #entryWithSection.entry-field-quick-off .entry-axis-input-area > input {
    height: var(--entry-form-row-h);
    min-height: var(--entry-form-row-h);
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
}
/* 무엇을 textarea는 태그 on/off와 무관하게 아래 .entry-what-textarea 패딩으로만 세로 유지
   (quick-off 시 padding:0 이 적용되면 placeholder가 위로 붙음) */

/* 어디서·무엇을·누구와: 라벨 위 · 입력란 아래 */
:is(#entryModal, #memoRecordModal) .entry-form-field-section.entry-axis-stack {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
:is(#entryModal, #memoRecordModal) .entry-axis-stack .entry-axis-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: var(--entry-form-row-h);
}
#entryModal .entry-axis-stack .entry-axis-label-row .entry-axis-label-group {
    min-width: 0;
    grid-column: auto;
}
#entryModal .entry-axis-stack .entry-axis-label-row .entry-field-quick-toggle {
    width: calc(var(--entry-form-row-h) - 0.75rem);
    height: calc(var(--entry-form-row-h) - 0.75rem);
    margin-left: 0;
}
#entryModal .entry-axis-stack .entry-axis-label-row .entry-field-quick-toggle .entry-field-quick-toggle__icon {
    font-size: 0.9rem;
    width: 0.9rem;
    height: 0.9rem;
}
#entryModal .entry-axis-stack .entry-axis-label-row .entry-field-quick-toggle .entry-field-quick-toggle__icon svg {
    width: 0.9rem;
    height: 0.9rem;
}
:is(#entryModal, #memoRecordModal) .entry-axis-stack .entry-axis-input-area {
    width: 100%;
}
/* 끼니 어디서 보조 라벨 (어떻게 칩 아래·장소 입력 위) — 본 라벨 행보다 낮게, 행 높이 강제 없음 */
#entryModal .entry-axis-sublabel-row {
    display: flex;
    align-items: center;
    min-height: 0;
    margin-top: 0.125rem;
}
#entryModal #entryWhatSection .entry-what-textarea,
#entryModal #entryWhatSection.entry-field-quick-off .entry-what-textarea,
#entryModal #entryWhatSection:not(.entry-field-quick-off) .entry-what-textarea {
    display: block;
    width: 100%;
    /* 2줄 placeholder(무엇을 + 구분 안내)가 잘리지 않도록 */
    min-height: 3.75rem;
    height: 3.75rem;
    font-size: 0.9375rem;
    line-height: 1.35;
    box-sizing: border-box;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    overflow-x: hidden;
    overflow-y: hidden;
    resize: none;
    white-space: pre-wrap;
    word-break: break-word;
    /* py·height transition이 태그 토글 시 placeholder가 움직이는 것처럼 보이게 함 */
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#entryModal #entryWhatSection .entry-what-textarea::placeholder {
    white-space: pre-wrap;
}
#entryModal .entry-axis-stack #entryWhereChips:not(.hidden),
#entryModal .entry-axis-stack #entryWhatChips:not(.hidden),
#entryModal .entry-axis-stack #entryWithChips:not(.hidden),
#entryModal .entry-axis-stack #entryWhereSuggestions,
#entryModal .entry-axis-stack #entryWhatSuggestions,
#entryModal .entry-axis-stack #entryWithSuggestions {
    /* 라벨이 위인 스택 레이아웃: 칩/서브태그에 옆라벨용 들여쓰기 제거 */
    padding-left: 0;
}
#entryModal #entryWhereSection.entry-field-quick-off input[type="text"],
#entryModal #entryWithSection.entry-field-quick-off input[type="text"] {
    line-height: var(--entry-form-row-h);
}

/* ── 메모·더 적기 (하단 보조) ── */
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-comment-detail-footer {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border-top: none;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-comment-section {
    padding: 0.625rem 1rem;
    margin: 0;
    border-bottom: 1px solid var(--entry-border-row);
    background: transparent;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-comment-heading {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    color: #0f172a;
    line-height: 1.25;
    margin-bottom: 0.375rem;
    text-transform: none;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-comment-heading-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-comment-icon {
    font-size: 1.05rem;
    line-height: 1;
    color: var(--entry-action-icon);
    flex-shrink: 0;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-comment-textarea {
    --entry-comment-line: 1.35;
    /* 무엇을·어디서·누구와(15px)와 맞춘다 — 메모만 14px 이라 같은 시트에서 한 단계 작아 보였다.
       안내 문구는 다른 칸처럼 14px 그대로 */
    font-size: 0.9375rem;
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    line-height: var(--entry-comment-line);
    /* 빈 칸: 2줄. 내용/포커스 시 확장 — 넘치는 분은 #modalScrollArea 세로 스크롤.
       한 줄로 접었더니 "여기에 적는 칸"이라는 게 눈에 덜 들어와, 비어 있을 때도
       두 줄만큼 자리를 잡아 둔다. 접힘 상태의 한 줄 표시(nowrap+말줄임)는 그대로다. */
    min-height: calc(2em * var(--entry-comment-line) + 0.9rem);
    max-height: calc(2em * var(--entry-comment-line) + 0.9rem);
    height: calc(2em * var(--entry-comment-line) + 0.9rem);
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: min-height 0.18s ease, padding 0.18s ease;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-comment-textarea:focus,
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-comment-textarea.entry-comment-textarea--expanded {
    max-height: none;
    height: auto;
    min-height: calc(2em * var(--entry-comment-line) + 0.9rem);
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: pre-wrap;
    text-overflow: clip;
    word-break: break-word;
    overflow-wrap: anywhere;
}
#entryModal .entry-detail-record-panel {
    margin: 0;
    padding: 0.625rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--entry-border-row);
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
}
#entryModal .entry-detail-record-header-static {
    display: grid;
    grid-template-columns: var(--entry-form-label-w, 7.25rem) minmax(0, 1fr);
    gap: 0;
    align-items: center;
    flex-wrap: nowrap;
    min-height: var(--entry-form-row-h);
}
#entryModal .entry-detail-record-title {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #0f172a;
    line-height: 1.25;
    flex-shrink: 0;
    min-width: 0;
    white-space: nowrap;
    grid-column: 1;
}
#entryModal .entry-detail-record-chips {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0;
    margin-left: 0;
    padding-left: var(--entry-form-core-input-pl, 0);
    padding-bottom: 2px;
    justify-content: flex-start;
    flex: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-column: 2;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}
#entryModal .entry-detail-record-chips::-webkit-scrollbar {
    display: none;
}
#entryModal .entry-detail-record-chips.entry-hscroll-strip--dragging {
    cursor: grabbing;
    user-select: none;
}
@media (max-width: 380px) {
    #entryModal .entry-detail-record-header-static {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.375rem;
    }
    #entryModal .entry-detail-record-chips {
        grid-column: 1;
        padding-left: 0;
    }
}
#entryModal .entry-detail-record-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--entry-border-soft);
    border-radius: 9999px;
    background: var(--entry-surface);
    color: var(--entry-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
#entryModal .entry-detail-record-chip i {
    font-size: 0.75rem;
    opacity: 0.9;
}
#entryModal .entry-detail-record-chip[data-field="with"] i {
    color: #6366f1;
}
#entryModal .entry-detail-record-chip[data-field="rating"] i {
    color: #f59e0b;
}
#entryModal .entry-detail-record-chip[data-field="satiety"] i {
    color: #ec4899;
}
#entryModal .entry-detail-record-chip[data-field="time"] i {
    color: #0ea5e9;
}
#entryModal .entry-detail-record-chip:hover {
    border-color: var(--entry-border);
    color: var(--entry-text-secondary);
}
#entryModal .entry-detail-record-chip--active {
    border-color: #6ee7b7;
    background: var(--entry-accent-soft);
    color: var(--entry-accent-dark);
}

/* ── 헤더 날짜 캘린더 (중앙 오버레이) ── */
.entry-header-date-picker {
    position: fixed;
    inset: 0;
    z-index: var(--z-picker-sheet);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}
.entry-header-date-picker.hidden {
    display: none !important;
}
.entry-header-date-picker__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgb(15 23 42 / 0.5);
    cursor: pointer;
}
.entry-header-date-picker__panel {
    position: relative;
    width: min(21rem, 92vw);
    padding: 1.25rem 1rem 1rem;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 20px 48px rgb(15 23 42 / 0.2);
}
.entry-header-date-picker__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}
.entry-header-date-picker__month {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
.entry-header-date-picker__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--entry-border-soft, #e2e8f0);
    border-radius: 9999px;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.entry-header-date-picker__nav-btn:hover:not(:disabled):not(.entry-header-date-picker__nav-btn--disabled) {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.entry-header-date-picker__nav-btn:disabled,
.entry-header-date-picker__nav-btn.entry-header-date-picker__nav-btn--disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
.entry-header-date-picker__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
    margin-bottom: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94a3b8;
    text-align: center;
}
.entry-header-date-picker__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
}
.entry-header-date-picker__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: #0f172a;
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.entry-header-date-picker__day--empty {
    pointer-events: none;
}
.entry-header-date-picker__day:hover:not(.is-selected):not(.is-disabled) {
    background: #f1f5f9;
}
.entry-header-date-picker__day.is-today:not(.is-selected):not(.is-disabled) {
    color: var(--green);
    background: var(--green-soft);
}
.entry-header-date-picker__day.is-disabled,
.entry-header-date-picker__day:disabled {
    color: #cbd5e1;
    cursor: not-allowed;
    pointer-events: none;
}
.entry-header-date-picker__day.is-selected {
    background: var(--green);
    color: #ffffff;
    border-radius: 9999px;
}

/* ── 칩 (빠른 입력) ── */
#entryModal .chip {
    margin-right: 2px;
    margin-bottom: 2px;
    padding: 0.375rem 0.625rem;
    /* 12px 은 폰에서 누르는 버튼으로는 작았다 (2026-09-18) */
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 9999px;
    border-color: var(--entry-border-soft);
    color: var(--entry-text-secondary);
    background: var(--entry-surface);
}
/* 고른 값 = 옅은 초록 채움 + 초록 실선 — 입력시트의 선택 칩은 모두 이 문법이다
   (분류 칸·제안 칩·「자주」 칩). 진한 초록 채움+흰 글자는 대비 3.3:1 이라 걷었다 (2026-09-15) */
#entryModal .chip.active {
    background: var(--entry-accent-soft);
    border-color: var(--entry-accent);
    color: #0f5132;
}
/* 위 제안 줄이 밀고 있는 값 — 그리드에서도 같은 생김새(녹색 점선 테두리 + 녹색 글자)로 둔다.
   14개 중 어디인지 보여야 비교가 된다.

   **`.active` 를 쓰면 안 된다**: active 는 "사용자가 골랐다"는 뜻이고 저장 시
   `categorySource='user'` 로 이어진다(entry-save-record.js). 제안은 아직 선택이 아니다.
   `#entryModal .chip` 이 id 를 끼고 색을 정하므로 여기서도 같은 범위로 덮어야 한다. */
#entryModal .chip--suggested {
    border-style: dashed;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
/* 사용자가 실제로 고르면 선택 표시가 이긴다 (동시에 걸릴 일은 없지만 못 박아 둔다) */
#entryModal .chip.active.chip--suggested {
    border-style: solid;
    border-color: var(--entry-accent);
    color: #0f5132;
}
/* 기록 시트: 선택 상태 즉시 반영 (transition all 0.2s 지연감 제거) */
#entryModal .chip,
#entryModal .sub-chip,
#entryModal .entry-subtag-suggestions .sub-chip,
#entryModal .entry-detail-record-chip,
#entryModal .entry-gauge-stars .star-btn,
#entryModal .entry-gauge-satiety-btn {
    transition: none;
}

/* ── 하단 액션 (기록 완료 강조) — 기록시트·하루 소감 공통 ── */
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-modal-actions {
    background: var(--entry-surface);
    border-top: 1px solid var(--entry-border-soft);
    box-shadow: 0 -4px 16px rgb(15 23 42 / 0.04);
    border-radius: 0 0 var(--shell-r-dialog) var(--shell-r-dialog);
    padding: 16px 16px 16px;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-modal-actions > .flex {
    gap: 8px;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn {
    transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
    border-radius: var(--shell-r-btn);
    min-height: 46px;
}
/* 버튼 배경은 영역 전체 유지, 내부 콘텐츠만 축소 → 주변 하얀 여백 방지 */
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn__inner {
    display: flex;
    flex-direction: inherit;
    align-items: inherit;
    justify-content: inherit;
    gap: inherit;
    min-width: 0;
    transition: transform 0.1s ease;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn__inner--loading {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn:active:not(:disabled) .entry-action-btn__inner,
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn.btn-is-pressed:not(:disabled) .entry-action-btn__inner {
    transform: scale(0.92);
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn--save {
    background: var(--cta-mint-grad);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    border-radius: var(--cta-btn-r);
    min-height: var(--cta-btn-h);
    box-shadow: var(--cta-mint-shadow);
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn--save:hover:not(:disabled) {
    filter: brightness(1.02);
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn--save:active:not(:disabled),
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn--save.btn-is-pressed:not(:disabled) {
    filter: brightness(0.96);
    box-shadow: inset 0 1px 6px rgb(0 0 0 / 0.1), 0 1px 4px rgba(45, 159, 116, 0.22);
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn--save:disabled {
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.55;
    filter: none;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn--delete {
    background: #fff1f2;
    color: #e11d48;
    border-right: 0;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn--delete:hover:not(:disabled) {
    background: #ffe4e6;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn--delete:active:not(:disabled),
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn--delete.btn-is-pressed:not(:disabled) {
    background: #fda4af;
    color: #9f1239;
    box-shadow: inset 0 2px 10px rgb(159 18 57 / 0.22);
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn--share {
    background: var(--entry-surface-muted);
    color: var(--entry-text-muted);
    border-left: 0;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn--share:not(:disabled):not(.entry-action-btn--share-on):hover {
    background: var(--entry-border-soft);
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn--share:not(:disabled):not(.entry-action-btn--share-on):active,
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn--share:not(:disabled):not(.entry-action-btn--share-on).btn-is-pressed {
    background: #cbd5e1;
    color: #334155;
    box-shadow: inset 0 2px 10px rgb(15 23 42 / 0.14);
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn--share.entry-action-btn--share-on:not(:disabled):active,
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn--share.entry-action-btn--share-on:not(:disabled).btn-is-pressed {
    background: var(--green-deep);
    color: #fff;
    box-shadow: inset 0 2px 10px rgb(4 120 87 / 0.28);
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn--share.entry-action-btn--share-on {
    background: var(--green);
    color: #fff;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn--share.entry-action-btn--share-on i {
    color: #fff;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn--share.entry-action-btn--share-banned {
    background: #fff1f2;
    color: #f87171;
    border-left-color: #fecaca;
    cursor: not-allowed;
    pointer-events: none;
}
:is(#entryModal, #dailyJournalModal, #memoRecordModal) .entry-action-btn--share:disabled {
    opacity: 1;
}

/* 사진 편집 모달 — 저장 버튼 눌림 */
#photoEditModal .photo-edit-save-btn {
    transition: background 0.14s ease, box-shadow 0.14s ease;
}
#photoEditModal .photo-edit-save-btn .entry-action-btn__inner {
    display: inline-flex;
    transition: transform 0.1s ease;
}
#photoEditModal .photo-edit-save-btn:active,
#photoEditModal .photo-edit-save-btn.btn-is-pressed {
    filter: brightness(0.96);
    box-shadow: inset 0 2px 10px rgb(0 0 0 / 0.12), 0 4px 12px rgba(45, 159, 116, 0.28);
}
#photoEditModal .photo-edit-save-btn:active .entry-action-btn__inner,
#photoEditModal .photo-edit-save-btn.btn-is-pressed .entry-action-btn__inner {
    transform: scale(0.94);
}

/* ═══════════════════════════════════════════════════════════
   팝업 셸 v2 — Soft Mint Air (시안 popup-shells-v2)
   Dialog · Sheet · Action · Search · Media · Banner/Toast
   ═══════════════════════════════════════════════════════════ */

/* —— 공통 딤 (ink-2 45%) —— */
#contentPopupModal,
#entryModal,
#dailyJournalModal,
#dietReportModal,
#logoutConfirmModal,
#deleteAccountConfirmModal,
#emailAuthModal,
#termsModal,
#profileSetupModal,
#passwordResetConfirmModal,
#passwordResetSuccessModal,
#demoIntroModal,
#characterSelectPopup,
#characterSelectModal,
#bestSharePeriodNoticeModal,
#bestShareModal,
#insightShareModal,
#photoEditModal,
#accountAvatarModal,
#profileFieldEditModal,
#notificationModal,
#timelineSearchModal,
#momentSearchModal,
#boardSearchModal,
#trackerMonthCalendarModal,
#domainErrorModal,
#detailModal,
#desktopShortcutGuideModal,
#reportModal {
    background-color: var(--shell-dim) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
/* 설치 가이드: 뒤 화면이 축소·후퇴되어 보이지 않도록 blur 없이 딤만 */
#pwaInstallGuideModal {
    background-color: var(--shell-dim) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
#entrySlotPickerBackdrop,
#entryModalBackdrop,
#dailyJournalModalBackdrop,
#dietReportBackdrop,
#successPopupBackdrop,
#attendancePopupBackdrop,
#trackerMonthCalendarBackdrop,
#pwaInstallGuideBackdrop,
#desktopShortcutGuideBackdrop,
#reportModal > .absolute.inset-0,
#feedOptionsMenu > .absolute,
#feedOptionsMenu > .fixed.inset-0,
#boardPostOptionsMenu > .fixed.inset-0,
#feedBubbleActionSheet > .absolute,
.search-filter-modal__backdrop,
.mealog-dialog-backdrop {
    background-color: var(--shell-dim) !important;
}

/* —— Center Dialog 패널 —— */
#contentPopupModalInner,
#logoutConfirmModal > div,
#deleteAccountConfirmModal > div,
#emailAuthModal > div,
#termsModal > div,
#profileSetupModal > div,
#passwordResetConfirmModal > div,
#passwordResetSuccessModal > div,
#demoIntroModal > div,
#characterSelectPopup > div,
#bestSharePeriodNoticeModal > div,
#domainErrorModal > div,
#pwaInstallGuideModal .pwa-install-guide-panel,
#desktopShortcutGuideModal > div,
#entrySlotPickerModal .entry-slot-picker,
#slotPlanSettingsModal .entry-slot-picker,
#entryModal .entry-modal-panel,
#dailyJournalModal .daily-journal-modal-panel,
#dietReportModal .diet-report-modal,
#detailModal > div,
#bestShareModal > div,
#insightShareModal > div,
#timelineSearchModal > .search-filter-modal__panel,
#momentSearchModal > .search-filter-modal__panel,
#boardSearchModal > .search-filter-modal__panel,
#notificationModal > .notification-modal,
#trackerMonthCalendarModal .tracker-month-calendar-panel,
#photoEditModal > div {
    border-radius: var(--shell-r-dialog) !important;
    border: 1px solid var(--line);
    box-shadow: 0 12px 40px rgba(36, 31, 28, 0.14);
    background: var(--card);
    width: var(--shell-float-width) !important;
    max-width: var(--shell-float-width) !important;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
/* 설치 가이드: 공통 float보다 조금 좁게 (패널만 — backdrop에는 적용하지 않음) */
#pwaInstallGuideModal .os-install-guide-panel,
#pwaInstallGuideModal .pwa-install-guide-panel {
    width: min(21rem, calc(100vw - (var(--shell-float-gutter) * 2))) !important;
    max-width: min(21rem, calc(100vw - (var(--shell-float-gutter) * 2))) !important;
}
/* 이메일 로그인: Soft Mint 공통 폭 대신 화면 80%(최대 20rem) */
#emailAuthModal > div {
    width: 80% !important;
    max-width: 20rem !important;
}
/* 알림·찾기: 앱 컬럼(max-w-md)의 약 90% — 웹에서 브라우저 폭 90%로 커지지 않음 */
#timelineSearchModal > .search-filter-modal__panel,
#momentSearchModal > .search-filter-modal__panel,
#boardSearchModal > .search-filter-modal__panel,
#notificationModal > .notification-modal {
    width: var(--shell-dialog-width-90) !important;
    max-width: var(--shell-dialog-width-90) !important;
}
/* 키보드(IME) 열림: 센터 정렬 대신 상단 고정 — 입력란이 키보드와 함께 통째로 올라가는 체감 완화 */
#timelineSearchModal.is-ime-open,
#momentSearchModal.is-ime-open,
#boardSearchModal.is-ime-open,
#notificationModal.is-ime-open,
#profileFieldEditModal.is-ime-open,
#feedBubbleEditOverlay.is-ime-open,
#reportModal.is-ime-open,
/* adjustResize: VV가 안 줄어도 포커스만으로 상단 도킹 (검색 3종) */
#timelineSearchModal:has(input:focus, textarea:focus),
#momentSearchModal:has(input:focus, textarea:focus),
#boardSearchModal:has(input:focus, textarea:focus) {
    align-items: flex-start !important;
    padding-top: max(0.25rem, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 0.25rem !important;
    box-sizing: border-box;
}
#profileFieldEditModal.is-ime-open {
    align-items: flex-end !important;
}
#profileFieldEditModal.is-ime-open .profile-field-edit-panel {
    max-height: calc(100% - 0.5rem);
}
#feedBubbleEditOverlay.is-ime-open .feed-bubble-edit-panel,
#reportModal.is-ime-open > .relative {
    max-height: calc(100% - 0.75rem);
    overflow-y: auto;
}
/* 검색 필터: 헤더(·그랩바)만 고정, 본문+CTA는 스크롤 — IME 때도 CTA를 키보드 위에 고정하지 않음 */
.search-filter-modal .mealog-dialog-grabber,
.search-filter-modal .search-filter-modal__head {
    flex-shrink: 0;
}
.search-filter-modal .search-filter-modal__body > .mealog-dialog-actions {
    flex-shrink: 0;
    margin-top: 0.25rem;
    margin-left: calc(-1 * var(--mealog-dialog-pad-x, 1rem));
    margin-right: calc(-1 * var(--mealog-dialog-pad-x, 1rem));
    width: calc(100% + 2 * var(--mealog-dialog-pad-x, 1rem));
    margin-bottom: 0;
}
/*
 * 검색 포커스/IME: 가용 높이를 채워 헤더 고정 + 본문 스크롤.
 * 모바일 웹은 is-ime-open 전이라도 포커스만으로 동일 높이 잠금 (height:auto면 본문이 안 줄어 스크롤 불가).
 */
#timelineSearchModal:has(input:focus, textarea:focus) .search-filter-modal__panel,
#momentSearchModal:has(input:focus, textarea:focus) .search-filter-modal__panel,
#boardSearchModal:has(input:focus, textarea:focus) .search-filter-modal__panel,
#timelineSearchModal.is-ime-open .search-filter-modal__panel,
#momentSearchModal.is-ime-open .search-filter-modal__panel,
#boardSearchModal.is-ime-open .search-filter-modal__panel {
    height: calc(100% - 0.35rem);
    max-height: calc(100% - 0.35rem);
    margin-top: 0;
    overflow: hidden;
    min-height: 0;
}
/* 모바일 웹: VV 높이 토큰이 있으면 패널을 보이는 영역에 맞춤(JS 핀과 이중 안전) */
html.platform-web #timelineSearchModal.is-ime-open .search-filter-modal__panel,
html.platform-web #momentSearchModal.is-ime-open .search-filter-modal__panel,
html.platform-web #boardSearchModal.is-ime-open .search-filter-modal__panel {
    max-height: min(calc(100% - 0.35rem), var(--ime-vv-height, 100%));
}
#timelineSearchModal.is-ime-open .search-filter-modal__body,
#momentSearchModal.is-ime-open .search-filter-modal__body,
#boardSearchModal.is-ime-open .search-filter-modal__body,
#timelineSearchModal:has(input:focus, textarea:focus) .search-filter-modal__body,
#momentSearchModal:has(input:focus, textarea:focus) .search-filter-modal__body,
#boardSearchModal:has(input:focus, textarea:focus) .search-filter-modal__body {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}
/* 알림 등 기타 is-ime-open 패널(검색 제외) */
.search-filter-modal.is-ime-open:not(#timelineSearchModal):not(#momentSearchModal):not(#boardSearchModal) .search-filter-modal__panel {
    height: calc(100% - 0.5rem);
    max-height: calc(100% - 0.5rem);
    overflow: hidden;
}
/* 프로필 필드 시트: IME 중 CTA를 스크롤 body 끝으로 */
#profileFieldEditModal.is-ime-open .profile-field-edit-body > .mealog-dialog-actions {
    flex-shrink: 0;
    margin-top: 0.75rem;
    margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem);
}
/* 모먼트 댓글 시트: IME 중 시트·컴포저 safe 여백 */
body > .moment-v2-social-comments-panel.moment-v2-social-comments-panel--sheet-in-body.is-ime-open {
    justify-content: flex-end;
}
body > .moment-v2-social-comments-panel.moment-v2-social-comments-panel--sheet-in-body.is-ime-open .moment-v2-social-comments-sheet-root {
    max-height: 100%;
    padding-top: max(0.25rem, env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--ime-fixed-bottom, 0px) + 6px);
}
body > .moment-v2-social-comments-panel.moment-v2-social-comments-panel--sheet-in-body.is-ime-open .moment-v2-social-comments-composer {
    padding-bottom: 2px;
}
#contentPopupModalInner {
    overflow: hidden;
}
/* 축하/웰컴·로딩 박스도 동일 폭 토큰 */
#attendancePopupContent,
#successPopupContent,
#loadingOverlayBox {
    width: var(--shell-float-width) !important;
    max-width: var(--shell-float-width) !important;
}
#contentPopupLandingBtn {
    color: var(--green-deep) !important;
    border-color: var(--green-mute) !important;
    background: var(--green-soft);
    border-radius: var(--shell-r-btn);
    font-weight: 700;
}
#contentPopupLandingBtn:hover {
    background: var(--green-mute) !important;
}

/* 하루 소감 하단 액션 — 기록시트 entry-modal-actions 와 동일 토큰 사용 */
/* AI 식단분석 — Soft Mint Center Dialog */
#dietReportModal .diet-report-modal {
    /* 고정 높이가 없으면 flex body(flex-basis:0)가 0px로 줄어 콘텐츠가 안 보임 */
    height: min(85vh, 40rem);
    max-height: min(85vh, 40rem);
    min-height: 0;
    border-radius: var(--shell-r-dialog) !important;
    border: 1px solid var(--line) !important;
    background: var(--card) !important;
    box-shadow: 0 12px 40px rgba(36, 31, 28, 0.14);
}
#dietReportModal .diet-report-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
    /* mealog-dialog-head와 동일 pad-x → 본문 카드 좌측과 정렬 */
    padding: 14px var(--mealog-dialog-pad-x) 12px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
    text-align: left;
}
#dietReportModal .diet-report-modal__head.mealog-dialog-head {
    /* 공통 head 패딩과 충돌 없이 pad-x만 공유 */
    padding-left: var(--mealog-dialog-pad-x);
    padding-right: var(--mealog-dialog-pad-x);
}
#dietReportModal .diet-report-modal__titles {
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
}
#dietReportModal .diet-report-modal__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.25;
    text-align: left;
}
#dietReportModal .diet-report-modal__subtitle {
    margin: 4px 0 0;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.35;
}
#dietReportModal .diet-report-modal__subtitle.hidden {
    display: none;
}
#dietReportModal .diet-report-modal__body {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* 헤더 타이틀과 콘텐츠 박스 좌측 정렬 (동일 pad-x) */
    padding: 14px var(--mealog-dialog-pad-x) 8px;
    background: var(--page-deep, #faf6f2);
    display: block;
}
#dietReportModal #dietReportModalActions {
    flex-shrink: 0;
}
#dietReportModal #dietReportModalActions.mealog-dialog-actions--single {
    flex-direction: column;
}
#dietReportModal #dietReportModalActions.mealog-dialog-actions--single > #dietReportShareBtn.hidden,
#dietReportModal #dietReportModalActions.mealog-dialog-actions--single > #dietReportSnsShareBtn.hidden,
#dietReportModal #dietReportModalActions.mealog-dialog-actions--pair > #dietReportShareBtn.hidden,
#dietReportModal #dietReportModalActions.mealog-dialog-actions--pair > #dietReportSnsShareBtn.hidden {
    display: none !important;
}
#dietReportModal #dietReportModalActions.mealog-dialog-actions--single > #dietReportCloseBtn {
    width: 100%;
    flex: none;
}
#dietReportModal #dietReportModalActions.mealog-dialog-actions--pair {
    flex-direction: row;
}
/* mealog-btn의 display:grid가 아이콘·라벨을 세로로 쌓아 비행기가 안 보임 → 가로 정렬 */
#dietReportModal #dietReportShareBtn,
#bestShareModal #bestShareSubmitBtn,
#dailySharePreviewModal #dailyShareConfirmBtn {
    display: inline-flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: #fff;
}
/**
 * 나란히 선 SNS 버튼 — 아이콘·라벨 가로 정렬은 위와 같게 두되 색은 건드리지 않는다.
 * 이쪽은 secondary(흰 바탕)라 color:#fff 를 물려받으면 글자가 배경에 묻힌다.
 */
#dietReportModal #dietReportSnsShareBtn:not(.hidden),
#bestShareModal #bestShareSnsBtn,
#dailySharePreviewModal #dailyShareSnsBtn {
    display: inline-flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
#dietReportModal #dietReportShareBtn.mealog-btn-danger,
#bestShareModal #bestShareSubmitBtn.mealog-btn-danger {
    color: #fff;
}
/* SNS 버튼의 inner 는 이 규칙에서 빠져 있어 아이콘과 라벨이 맞붙었다 — 모먼트 쪽과 같은 gap 을 준다. */
#dietReportModal #dietReportSnsShareBtn .diet-report-share-btn__inner,
#bestShareModal #bestShareSnsBtn .mealog-share-btn__inner,
#dailySharePreviewModal #dailyShareSnsBtn .mealog-share-btn__inner,
#dietReportModal #dietReportShareBtn .diet-report-share-btn__inner,
#bestShareModal #bestShareSubmitBtn .mealog-share-btn__inner,
#dailySharePreviewModal #dailyShareConfirmBtn .mealog-share-btn__inner {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
#dietReportModal #dietReportSnsShareBtn i,
#dietReportModal #dietReportSnsShareBtn svg,
#bestShareModal #bestShareSnsBtn i,
#bestShareModal #bestShareSnsBtn svg,
#dailySharePreviewModal #dailyShareSnsBtn i,
#dailySharePreviewModal #dailyShareSnsBtn svg,
#dietReportModal #dietReportShareBtn i,
#dietReportModal #dietReportShareBtn svg,
#bestShareModal #bestShareSubmitBtn i,
#bestShareModal #bestShareSubmitBtn svg,
#dailySharePreviewModal #dailyShareConfirmBtn i,
#dailySharePreviewModal #dailyShareConfirmBtn svg {
    width: 1.1rem !important;
    height: 1.1rem !important;
    flex-shrink: 0;
    stroke: currentColor;
    color: inherit;
}