/* ===== 로그인 전 서비스 가이드 (풀스크린 → 로그인) ===== */
.service-guide-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-service-guide);
    display: flex;
    align-items: stretch;
    justify-content: center;
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(95, 212, 168, 0.28), transparent 55%),
        radial-gradient(70% 50% at 85% 90%, rgba(242, 168, 180, 0.16), transparent 50%),
        linear-gradient(165deg, #f7fffb 0%, #fffcfa 48%, #f3efe9 100%);
    pointer-events: auto;
}
.service-guide-overlay.hidden {
    display: none !important;
}
.service-guide-overlay[data-slide="analysis"] {
    background:
        radial-gradient(70% 55% at 85% 15%, rgba(158, 196, 224, 0.32), transparent 50%),
        radial-gradient(60% 50% at 10% 80%, rgba(60, 184, 137, 0.14), transparent 50%),
        linear-gradient(180deg, #f5f9fc 0%, #fffcfa 50%, #f3efe9 100%);
}
.service-guide-overlay[data-slide="moment"] {
    background:
        radial-gradient(70% 55% at 70% 0%, rgba(242, 168, 180, 0.26), transparent 50%),
        radial-gradient(55% 45% at 10% 90%, rgba(212, 174, 224, 0.16), transparent 50%),
        linear-gradient(180deg, #fff8f9 0%, #fffcfa 48%, #f3efe9 100%);
}
.service-guide-stage {
    width: min(520px, 100%);
    margin: 0 auto;
    padding: calc(28px + env(safe-area-inset-top, 0px)) 20px calc(18px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 7px;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.service-guide-visuals {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.service-guide-visual {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-guide-visual.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.sg-hero-mark {
    width: min(154px, 39vw);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 40px;
    background: transparent;
    border: none;
    box-shadow: none;
}
.sg-hero-mark img {
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    max-width: none;
    object-fit: cover;
    margin: -3px;
}
.sg-hero-mark--sketch {
    width: min(220px, 56vw);
    overflow: visible;
    border-radius: 0;
}
.sg-hero-mark--sketch img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
}
.sg-shot {
    width: min(320px, 86vw);
    height: 100%;
    max-height: min(52dvh, 480px);
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(208, 198, 186, 0.7);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 18px 40px rgba(36, 31, 28, 0.14);
}
.sg-shot img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: min(52dvh, 480px, 100%);
    object-fit: cover;
    object-position: top center;
}
/* 밀로그: 헤더 고정 + 본문 자동 스크롤 (폭 기준으로 원본 비율 유지) */
.sg-shot--mealog-scroll {
    /* 원본 296×1024 — 고정은 로고~캘린더만(≈108). 날짜/AI/공유·카드는 스크롤 */
    --sg-mealog-src-w: 296;
    --sg-mealog-src-header-h: 108;
    position: relative;
    width: min(320px, 86vw);
    height: 100%;
    max-height: min(52dvh, 520px);
    aspect-ratio: unset;
}
.sg-mealog-scroll-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    container-type: size;
}
.sg-mealog-scroll-img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: unset !important;
    object-position: top center !important;
    display: block;
    transform: translateY(0);
    will-change: transform;
}
.service-guide-visual.is-active .sg-mealog-scroll-img {
    animation: sg-mealog-scroll 14s cubic-bezier(0.4, 0.05, 0.2, 1) infinite alternate;
}
.service-guide-visual:not(.is-active) .sg-mealog-scroll-img {
    animation: none;
    transform: translateY(0);
}
.sg-mealog-header-pin {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* 프레임 폭에 맞춰 헤더 높이 = 원본 헤더 비율 */
    aspect-ratio: var(--sg-mealog-src-w) / var(--sg-mealog-src-header-h);
    height: auto;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
    background: #f5f1eb;
    box-shadow: 0 8px 16px -12px rgba(36, 31, 28, 0.35);
}
.sg-mealog-header-pin img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: unset !important;
    display: block;
}
@keyframes sg-mealog-scroll {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(calc(-100% + 100cqh));
    }
}
@media (prefers-reduced-motion: reduce) {
    .service-guide-visual.is-active .sg-mealog-scroll-img {
        animation: none;
    }
}
.service-guide-copy {
    flex: 0 0 auto;
    text-align: center;
    padding-top: 4px;
}
.service-guide-copy--enter .service-guide-eyebrow,
.service-guide-copy--enter .service-guide-title,
.service-guide-copy--enter .service-guide-body,
.service-guide-copy--enter .service-guide-install-cta:not(.hidden) {
    animation: service-guide-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.service-guide-copy--enter .service-guide-title { animation-delay: 0.06s; }
.service-guide-copy--enter .service-guide-body { animation-delay: 0.14s; }
.service-guide-copy--enter .service-guide-install-cta:not(.hidden) { animation-delay: 0.2s; }
@keyframes service-guide-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.service-guide-eyebrow {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2d9f74;
}
.service-guide-title {
    margin: 0 0 10px;
    font-family: "Yeon Sung", "Nanum Pen Script", cursive;
    font-size: clamp(1.65rem, 5.2vw, 2.05rem);
    font-weight: 400;
    line-height: 1.28;
    letter-spacing: -0.01em;
    color: #241f1c;
    white-space: pre-line;
}
.service-guide-body {
    margin: 0 auto 5px;
    max-width: 22rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: #4f4841;
    white-space: pre-line;
}
.service-guide-cta-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
/* CTA가 실제로 보일 때만 자리 예약 → 없는 슬라이드에서는 그 공간을 사진 쪽으로 돌려줌 */
.service-guide-cta-slot:has(.service-guide-install-cta:not(.hidden)) {
    min-height: 3.25rem;
    margin-bottom: 2px;
}
.service-guide-install-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: 20rem;
    margin: 0 auto;
    padding: 11px 14px;
    border: 1.5px solid #3cb889;
    border-radius: 14px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 800;
    color: #1f8a62;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.service-guide-install-cta:hover,
.service-guide-install-cta:active {
    background: rgba(234, 248, 242, 0.95);
    border-color: #2d9f74;
    color: #187a56;
}
.service-guide-install-cta.hidden {
    display: none !important;
}
.service-guide-footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}
.service-guide-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-height: 10px;
}
.service-guide-dots i {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #d0c6ba;
    transition: width 0.25s ease, background 0.25s ease;
}
.service-guide-dots i.on {
    width: 18px;
    background: #3cb889;
}
.service-guide-nav {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 8px;
    width: min(100%, 20rem);
}
.service-guide-btn {
    appearance: none;
    border: 0;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 800;
    border-radius: 14px;
    padding: 12px 14px;
    cursor: pointer;
    width: 100%;
}
.service-guide-btn--ghost {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #d0c6ba;
    color: #4f4841;
}
.service-guide-btn--ghost:disabled {
    opacity: 0.35;
    cursor: default;
}
.service-guide-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #5fd4a8 0%, #3cb889 55%, #2d9f74 100%);
    box-shadow: 0 6px 14px rgba(60, 184, 137, 0.25);
}
.service-guide-skip {
    appearance: none;
    border: 0;
    background: transparent;
    color: #9a9187;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 4px 8px;
    cursor: pointer;
    text-align: center;
}
.service-guide-skip.invisible {
    visibility: hidden;
    pointer-events: none;
}
/* 설치·바로가기 안내: Tailwind z-* 없이도 서비스 가이드(10040) 위에 표시 */
#pwaInstallGuideModal {
    position: fixed;
    inset: 0;
    z-index: var(--z-install-guide);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}
@media (min-width: 640px) {
    #pwaInstallGuideModal {
        align-items: center;
    }
}
#pwaInstallGuideModal.hidden {
    display: none !important;
}
#pwaInstallGuideBackdrop {
    position: absolute;
    inset: 0;
    background: transparent;
}
#pwaInstallGuideModal .pwa-install-guide-panel {
    position: relative;
    z-index: 1;
    width: min(24rem, 100%) !important;
    max-width: min(24rem, 100%) !important;
    overflow: hidden;
}
.os-install-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 3px;
    background: #f5f3f0;
    border-radius: 999px;
}
.os-install-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: #8a837a;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 8px 6px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, font-weight 0.15s ease;
}
.os-install-tab.is-active,
.os-install-tab[aria-selected="true"] {
    background: #fff;
    color: #166534;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(36, 31, 28, 0.06);
}
.os-install-step-num {
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    margin-top: 0.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid #86c5a8;
    background: transparent;
    color: #166534;
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.os-install-inline-icon {
    color: #166534;
    display: inline;
    vertical-align: -0.125em;
}
.os-install-guide-figure {
    margin: 0.75rem 0 0;
    padding: 0;
}
.os-install-guide-img {
    display: block;
    width: 100%;
    max-width: 15.5rem;
    margin: 0 auto;
    border-radius: 0.875rem;
    border: 1px solid #e8e4de;
    box-shadow: 0 2px 10px rgba(36, 31, 28, 0.07);
    background: #f5f5f7;
}
.os-install-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.os-install-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0.7rem 0.85rem;
    border: 0;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    box-sizing: border-box;
}
.os-install-btn--secondary {
    flex: 0 0 30%;
    max-width: 30%;
    background: #f1f5f9;
    color: #334155;
}
.os-install-btn--secondary:hover {
    background: #e2e8f0;
}
.os-install-btn--secondary:active {
    background: #cbd5e1;
}
.os-install-btn--primary {
    flex: 1 1 auto;
    min-width: 0;
    background: #059669;
    color: #fff;
}
.os-install-btn--primary:hover {
    background: #047857;
}
.os-install-btn--primary:active {
    background: #065f46;
}
.os-install-btn.hidden {
    display: none !important;
}
/* 확인만 있을 때: 전체 폭 */
.os-install-actions:not(.os-install-actions--dual) .os-install-btn--secondary {
    flex: 1 1 auto;
    max-width: none;
}
.os-install-panel.hidden {
    display: none !important;
}
.os-install-step-num {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: #3cb889;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.os-install-share-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 0.15em;
    vertical-align: -0.12em;
    color: #3cb889;
}
#pwaInstallGuideCloseBtn {
    background: #eef1f4;
    color: #5b6470;
}
#pwaInstallGuideCloseBtn:hover,
#pwaInstallGuideCloseBtn:active {
    background: #e4e8ed;
    color: #3f4752;
}
html.service-guide-active #landingPage {
    visibility: hidden;
}


/*
 * AI 리포트 점수 내역 — summary 를 점수 줄 자체로 쓰므로 기본 디스클로저 삼각형을 지운다.
 * Tailwind list-none 은 Chromium 에서만 먹고, iOS Safari 는 ::-webkit-details-marker 를
 * 따로 꺼야 한다. 앱이 iOS PWA 로도 돌아가므로 두 경로를 모두 막는다.
 */
.ai-meal-report-score-detail > summary {
    list-style: none;
}
.ai-meal-report-score-detail > summary::-webkit-details-marker {
    display: none;
}
/* 펼침 여부를 캐럿 방향으로 알린다 — 라벨은 그대로 두고 방향만 뒤집는다 */
.ai-meal-report-score-caret {
    transition: transform 0.15s ease;
}
.ai-meal-report-score-detail[open] > summary .ai-meal-report-score-caret {
    transform: rotate(180deg);
}
/* '무엇을' 회상 줄 (entry-what-recall.js) — 자주 먹는 것 · 타이핑 자동완성.
   분류 제안 칩과 일부러 다르게 생겼다: 점선+프라이머리는 "시스템의 추측"이라는 뜻이고,
   이 칩은 사용자가 전에 직접 적은 자기 어휘라 중립 회색 실선으로 둔다. */
/* 입력 중에 잠깐 뜨는 줄이라 **한 줄을 넘기지 않는다** — 두 줄이 되면 시트가 출렁인다.
   칩은 아래 스크롤 영역 안에서 가로로 흐르고, 아이콘과 닫기는 양 끝에 고정된다. */
.entry-recall-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    margin-top: 6px;
    min-height: 30px;
}
.entry-recall-scroll {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
/* 스크롤바는 숨긴다 — 잘린 칩 자체가 "옆으로 더 있다"는 신호다 */
.entry-recall-scroll::-webkit-scrollbar {
    display: none;
}
/* 분류 제안과 같은 규칙 — 빈 상태는 자리를 차지하지 않고, 생길 때 growthPx 로 통지한다 */
.entry-recall-row--empty {
    min-height: 0;
    margin-top: 0;
}
/* 아이콘만 — '자주' 글자는 뺐다. 시계 아이콘이 이미 그 뜻이고, 한 줄 폭이 아깝다 */
.entry-recall-label {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: #94a3b8;
}
.entry-recall-label svg {
    width: 13px;
    height: 13px;
}
.entry-recall-chip {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}
.entry-recall-chip:active {
    background: #e2e8f0;
}

/* 카테고리 자동 분류 제안 칩 (entry-category-suggest.js) — 점선+반짝이, 확정 시 실선 */
.entry-suggest-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    min-height: 30px;
}
/* 빈 상태는 자리를 차지하지 않는다 — 텍스트를 넣어 제안이 뜰 때 그만큼 펼쳐진다.
   자리를 미리 비워두면 늘 빈 띠가 보였다. 키보드가 열린 동안에는 시트 높이 재측정이
   막혀 있으므로(entry-sheet-tabs.js), 칩이 생기는 순간 늘어난 높이를 growthPx로
   따로 통지해 시트가 그만큼 커지게 한다. */
.entry-suggest-row--empty {
    min-height: 0;
    margin-top: 0;
}
.entry-suggest-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
    background: white;
    border: 1px dashed var(--color-primary);
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.15s;
}
.entry-suggest-chip svg {
    width: 13px;
    height: 13px;
}
/* 확정 = 옅은 초록 채움 + 실선 — 분류 칸(.entry-context-seg--confirmed)과 같은 문법.
   초록 채움+흰 글자는 대비가 2.5:1 이라 걷었다 (2026-09-15) */
.entry-suggest-chip--confirmed {
    background: var(--green-soft, #eaf8f2);
    border-style: solid;
    color: #0f5132;
}
.entry-suggest-chip--confirmed svg {
    color: var(--green-deep, #2d9f74);
}
/* 요리 종류 꼬리표 — 고르는 값이 아니라 붙는 값이라 버튼이 아닌 라벨 모양으로 */
.entry-suggest-cuisine {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    background: #eef2f7;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}
.entry-suggest-hint {
    font-size: 11px;
    color: #94a3b8;
}
/* 행동 버튼 묶음('다른 구분' · '분류 안 함' · '되돌리기') — 오른쪽 끝에 붙인다.
   왼쪽은 값(칩·요리 종류), 오른쪽은 조작. 같은 줄에서 둘이 섞이면 뭘 고르는 건지 흐려진다. */
.entry-suggest-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* 셋 다 같은 생김새 — 값이 아니라 조작이라는 표시라, 칩과도 서로와도 구분이 명확해야 한다 */
.entry-suggest-action {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: white;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.entry-suggest-action:active {
    background: #f1f5f9;
}

/* 타임라인 카드의 「무엇을」 앞에 붙는 표시 — 이 값은 사진이 적어 준 것이고 아직
   사용자가 확정하지 않았다(docs/photo-autofill.md §5.2). 텍스트 흐름 안에 들어가므로
   inline-block 으로 두고 밑선을 글자에 맞춘다 — truncate 된 줄 안에서도 잘리지 않는다. */
.photo-auto-menu-icon {
    display: inline-block;
    /* 메뉴 줄이 14px 굵은 글씨라 11px 은 눈에 안 걸렸다. 글자 높이에 가깝게 키운다 */
    width: 14px;
    height: 14px;
    margin-right: 4px;
    vertical-align: -2px;
    color: #94a3b8;
    flex-shrink: 0;
}

/* 사진으로 채운 「무엇을」의 꼬리표 (js/modals/entry-photo-menu.js · docs/photo-autofill.md §5).

   입력란 **우하단 안쪽**에 얹는다. 아래에 별도 층으로 두면 선이 하나 더 생겨 시트가
   그만큼 더 번잡해진다 — 이 줄은 독립된 항목이 아니라 「이 칸의 값이 어디서 왔는지」다.
   겹치지 않게 textarea 아래쪽에 그만큼 여백을 두고, 그 자리에 띄운다. */
/* id 가 아니라 클래스로 잡는다 — 이 규칙은 「꼬리표가 붙은 입력란」에 대한 것이지
   특정 요소에 대한 것이 아니다. absolute 의 기준이 여기라, 안 걸리면 꼬리표가
   엉뚱한 조상 기준으로 떠 화면 한복판에 뜬다. */
.has-photo-menu {
    position: relative;
}
.has-photo-menu .entry-what-textarea {
    padding-bottom: 22px;
}
.entry-photo-menu-row {
    position: absolute;
    right: 11px;
    bottom: 7px;
    display: flex;
    align-items: center;
    gap: 5px;
    /* 긴 입력이 밑에 깔려도 읽히게 — 입력란과 같은 바탕이라 얹힌 티가 나지 않는다 */
    background: #fff;
    padding-left: 6px;
    border-radius: 8px;
}
.entry-photo-menu__label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    white-space: nowrap;
}
.entry-photo-menu__label svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}
/* 버튼은 하나뿐이다. 「확정」은 뒀다가 걷었다 — 저장이 곧 확정이라 기능이 없는데,
   버튼이 있으면 누르지 않으면 저장이 안 되는 줄로 읽힌다.
   ✕ 아이콘만 두었다가 텍스트를 되살렸다: 무엇이 지워지는지가 아이콘만으로는 안 읽힌다. */
.entry-photo-menu__clear {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}
.entry-photo-menu__clear svg {
    width: 11px;
    height: 11px;
}
.entry-photo-menu__clear:active {
    background: #f1f5f9;
}



.entry-suggest-action svg {
    width: 12px;
    height: 12px;
}
/* 분류 안 함이 적용된 뒤의 표시 — 결정이 화면에 남아야 되돌릴 수 있다 */
.entry-suggest-hint--off {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.entry-suggest-hint--off svg {
    width: 12px;
    height: 12px;
}

/* 맥락 한 줄 (entry-context-predict.js) — 1페이지 '무엇을' 아래.
   세그먼트 = 축 하나. 탭하면 아래 피커가 인라인으로 열린다(오버레이 없음).
   점선 = 아직 추측(미확인), 실선 = 확인됨. 확인 없이는 저장되지 않는다. */
.entry-context-predict {
    padding: 8px 1rem 0;
    font-size: 12px;
}
/* 헤더 행: 리드 텍스트(좌) ↔ 액션 맞아요·✕(우) — 값 행과 행위를 분리 */
.entry-context-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 26px;
}
/* 세그먼트 행: 축 값들만 */
.entry-context-segs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.entry-predict-lead {
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}
/*
 * 세그먼트 상태 문법 (구분되는 세 신호를 서로 다른 채널에 배정):
 *   채움  = 확정 여부  (점선 흰 배경 = 추측/빈 · 프라이머리 채움+흰 글자 = 확정)
 *   링    = 열림 여부  (바깥 링 + 실선 테두리 — 어느 상태에든 겹쳐지는 독립 신호)
 * 캐럿은 뺐다 (2026-08-21): 좁은 폭에서 값 텍스트를 (…)로 잘라먹었고, 열림 신호는
 * 링과 바로 아래 열리는 피커가 이미 하고 있어 중복이었다.
 * 피커(하위 선택지)는 회색 트레이 안의 흰 칩 — 세그먼트(상위 값)와 색 층위가 다르다.
 */
.entry-context-seg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* 폭 고정: 값이 바뀌어도 칸 크기가 흔들리지 않게 세 축이 행을 균등 분할한다 */
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 9px;
    /* 테두리는 칩의 경계선이자 상태 신호라 또렷해야 한다 (1px #cbd5e1 은 배경에 묻혔고,
       1.5px 는 1x 디스플레이에서 1px 로 반내림된다) */
    border: 2px dashed #a3b0c2;
    /* 각진 모서리 — 피커의 알약형 선택지와 층위를 다르게 한다 */
    border-radius: 8px;
    /* 시트 배경과 같은 흰색이면 칩으로 안 읽힌다 — 옅은 회색 바탕을 기본으로 */
    background: #f8fafc;
    color: #475569;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.entry-context-seg > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.entry-context-seg svg {
    width: 17px;
    height: 17px;
    color: #94a3b8;
    flex-shrink: 0;
}
/* 사용자가 직접 고름 — 옅은 초록 채움 + 실선.
   진한 초록 채움+흰 글자였다가 걷었다 (2026-09-15): 세 칸이 다 차면 저장 버튼과 같은 무게로
   읽혔고, 흰 글자 대비가 2.5:1 이라 14px 글씨에 모자랐다. 채움 = 확정 문법은 그대로다. */
.entry-context-seg--confirmed {
    border-style: solid;
    border-color: var(--color-primary);
    background: var(--green-soft, #eaf8f2);
    color: #0f5132;
}
.entry-context-seg--confirmed svg {
    color: var(--green-deep, #2d9f74);
}
/* 추천 + 사용 ON — 채움 없이 초록 점선. 채움은 확정의 신호라 추천에는 주지 않는다
   (그리드의 `.chip--suggested` 와 같은 생김새) */
.entry-context-seg--auto {
    border-color: var(--color-primary);
    background: #ffffff;
    color: var(--green-deep, #2d9f74);
}
.entry-context-seg--auto svg {
    color: var(--color-primary);
}
/* 값이 없는 트리거 — 채워진 칩보다 약해야 하므로 배경 없이 테두리만 */
.entry-context-seg--empty {
    background: transparent;
    border-color: #c2ccd9;
    color: #94a3b8;
}
/* 열린 세그먼트 = 아래 피커의 주인. 채움을 바꾸지 않고 링만 두른다 */
.entry-context-seg--open {
    box-shadow: 0 0 0 2px var(--green-mute, #b4e2cd);
    border-style: solid;
    border-color: var(--color-primary);
}
/* 인라인 피커 — 회색 트레이가 "하위 선택지" 층위를 만든다 (세그먼트와 색으로 구분) */
.entry-context-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 8px 10px;
    background: #f1f5f9;
    border-radius: 12px;
}
.entry-context-picker__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
.entry-context-picker__empty {
    color: #94a3b8;
}
/* 어디서에 두 번 이상 간 곳이 없으면 칩 줄이 빈다(js/utils/place-chips.js).
   빈 줄이 flex gap 을 먹고 그 아래 점선이 허공을 가르지 않게 줄째 접는다. */
.entry-context-picker__chips:empty {
    display: none;
}
.entry-context-picker__chips:empty + .entry-context-picker__foot {
    padding-top: 0;
    border-top: 0;
}
/* 패널 바닥의 별도 칸 — 칩 목록(고르는 자리)과 자유 입력(새로 적는 자리)을 갈라놓는다.
   flex-basis 100% 로 반드시 제 줄을 차지해, 칩이 적을 때도 칩 옆에 붙어 흐르지 않는다. */
.entry-context-picker__foot {
    flex: 1 0 100%;
    min-width: 0;
    /* 패널의 flex gap(6px)이 이미 위쪽 여백이다 — margin 을 더하면 알약 아래가 뜬다.
       구분선 위 6px(gap) · 아래 6px 로 맞춰 대칭으로 둔다. */
    margin-top: 0;
    padding-top: 6px;
    border-top: 1px dashed #cbd5e1;
}
.entry-context-opt {
    padding: 4px 10px;
    /* 회색 트레이(#f1f5f9) 위의 흰 칩이라 slate-200 은 경계가 묻혔다 — 한 단 진하게 */
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: white;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.entry-context-opt--on {
    border-color: var(--color-primary);
    background: var(--green-soft, #eaf8f2);
    color: #0f5132;
}
/* 지도에서 찾은 곳 — **입력칸 아래 제 층**이다.
   위 칩 줄은 「내가 간 곳」이라 자리를 뺏지 않고, 늦게 오는 지도 결과가 이미 손이 가던
   칩을 밀지도 않는다(응답이 빨라야 0.5초, 앱에서는 몇 초 뒤에 온다). */
.entry-context-place-found {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #cbd5e1;
}
.entry-context-place-found.hidden {
    display: none;
}
/* 라벨은 아이콘만 — 핀 하나가 "지도에서 왔다"를 이미 말한다 ('무엇을' 회상 줄과 같은 수) */
.entry-context-place-found__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}
.entry-context-place-found__label svg {
    width: 14px;
    height: 14px;
}
.entry-context-place-found__empty {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
}
/* 지도에서 찾아온 칩 — 층이 갈렸어도 모양을 한 단 낮춘다.
   내 것은 이미 쓰던 표기라 그냥 고르면 되지만, 이쪽은 주소·업종까지 함께 붙는 값이다. */
.entry-context-opt--found {
    border-style: dashed;
    border-color: #94a3b8;
}
/* 「근처 먼저」 — 위치 권한을 아직 안 물었을 때만, 지도 결과 끝에 붙는다.
   장소 칩이 아니라 **동작**이라 색으로 갈라 둔다. 무심코 장소인 줄 알고 누르면 안 된다. */
.entry-context-opt--anchor {
    border-style: solid;
    border-color: #ccfbf1;
    background: #f0fdf9;
    color: #0f766e;
    font-weight: 700;
}
/* 어느 지점인지를 말하는 꼬리 — '스타벅스'는 열 개라 이름만으로는 못 가른다.
   이름보다 작고 흐리게 둬서 고르는 눈이 이름을 먼저 읽게 한다. */
.entry-context-opt__sub {
    margin-left: 5px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
}
/* 3단 뎁스 — 2단계에서 고른 값에 종속된 상세('친구' → 친구 이름들).
   같은 패널 안에서 한 단 들여 붙여, 위 칩을 고르면 아래가 따라 바뀐다는 걸 위치로 보여준다. */
.entry-context-sub {
    /* 자유 입력 칸과 같은 이유로 제 줄을 차지한다 — 칩이 몇 개 없으면 칩 옆에 나란히
       붙어 구분선이 반 토막 난 채 "칩 하나 더"처럼 보였다. */
    flex: 1 0 100%;
    min-width: 0;
    /* 자유 입력 칸과 같은 간격 규칙 (위 6px = 패널 gap · 아래 6px) */
    margin-top: 0;
    padding-top: 6px;
    border-top: 1px dashed #cbd5e1;
}
.entry-context-sub__label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
}
.entry-context-sub__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
/* 3단 뎁스 알약 — 2단계(구분)와 **일부러 다르게** 생겼다.
   2단계는 각진 흰 칩(값을 고르는 자리), 3단계는 완전히 둥근 회색 알약(이름을 담는 자리).
   같은 패널에 두 층이 함께 있으므로 모양이 겹치면 어느 층을 고르는지 헷갈린다. */
.entry-context-sub-opt {
    display: inline-flex;
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
}
.entry-context-sub-opt__label {
    padding: 4px 4px 4px 10px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.entry-context-sub-opt__del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    align-self: stretch;
    padding-right: 2px;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.entry-context-sub-opt__del:hover {
    color: #ef4444;
}
.entry-context-sub-opt--on {
    border-color: var(--color-primary);
    background: var(--green-soft, #eaf8f2);
}
.entry-context-sub-opt--on .entry-context-sub-opt__label {
    color: #0f5132;
    font-weight: 700;
}
.entry-context-sub-opt--on .entry-context-sub-opt__del {
    color: #4c9c7d;
}
/* 목록에 없는 새 이름 — 이 자리에서 바로 받는다(축 섹션을 통째로 열지 않는다) */
/* 입력칸도 알약 — 옆의 이름 알약들과 같은 줄·같은 높이로 흐른다(점선으로 "아직 안 굳음") */
.entry-context-sub-input {
    flex: 0 1 110px;
    min-width: 80px;
    padding: 4px 10px;
    border: 1px dashed var(--color-primary);
    border-radius: 999px;
    background: white;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    outline: none;
}
.entry-context-sub-input::placeholder {
    color: #cbd5e1;
    font-weight: 500;
}
/* 눌렀을 때 바뀌는 입력칸과 **같은 생김새의 알약**이다 — 밑줄 텍스트였을 때는 옆의
   이름 알약들과 층이 달라 보여 "여기도 누르는 자리"라는 게 읽히지 않았다.
   점선은 이름 알약(실선)과 달리 "아직 값이 아니다"를 말한다. */
.entry-context-sub-more {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px dashed var(--color-primary);
    border-radius: 999px;
    background: white;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
/* 어디서 자유 입력 — 칸 하나에 돋보기가 들어앉은 꼴.
   적으면 곧 검색이라 누를 버튼이 없다. 돋보기는 **표시**일 뿐이고, 하는 일은
   "여기 적으면 찾아 준다"를 말하는 것뿐이다 (js/modals/entry-context-predict.js).
   위 추천 칩보다 한 치수 크다 — 고르는 자리가 아니라 **적는 자리**라 손이 먼저 가야 한다. */
.entry-context-place-free {
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 0;
}
.entry-context-place-free__mark {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    /* 크기를 박아 둔다 — 안 주면 아이콘이 제 몫보다 넓은 상자 안에서 가운데로 밀려
       입력 글자와 붙는다(실측 33px). */
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    /* 입력칸이 제 배경(흰색)으로 아이콘을 덮는다 — 한 겹 올려야 보인다 */
    z-index: 1;
    /* 표시일 뿐이라 손가락을 받지 않는다 — 눌러도 칸에 커서가 간다 */
    pointer-events: none;
}
.entry-context-place-free__mark svg {
    width: 15px;
    height: 15px;
}
.entry-context-place-free__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 14px 7px 34px;
    /* 누구와 상세 칸(.entry-context-sub-input)과 같은 알약 꼴 — 완전히 둥근 점선 테두리.
       점선은 두 곳 모두 "아직 굳지 않은 값"을 뜻한다. 크기만 한 치수 크다(적는 자리라서). */
    border: 1px dashed var(--color-primary);
    border-radius: 999px;
    background: white;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    outline: none;
}
.entry-context-place-free__input::placeholder {
    color: #94a3b8;
    font-weight: 500;
}
.entry-context-place-free__input:focus {
    border-style: solid;
}
/* 사용 토글 — 라벨(좌) + 스위치(우). '사용'(기본 ON) ↔ '사용 안함'.
   어느 쪽이든 사라지지 않고 언제든 되돌릴 수 있다.
   상자(배경·테두리)는 두지 않는다 — 헤더 줄 안에서 리드 텍스트와 같은 층위로 읽히고,
   켜짐/꺼짐은 오직 스위치가 말한다. */
.entry-predict-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
    /* 폭 고정 — 라벨('사용'↔'사용 안함') 길이가 달라도 헤더가 흔들리지 않게 */
    width: 5.5rem;
    /* 오른쪽 끝에 딱 붙으면 시트 가장자리와 부딪힌다 — 손가락 자리만큼만 띄운다 */
    padding: 4px 4px 4px 0;
    font-size: 12px;
    font-weight: 700;
    background: none;
    border: 0;
    color: #475569;
    cursor: pointer;
}
/* 라벨이 남는 폭을 다 먹고 스위치는 오른쪽 끝에 못박힌다 —
   '사용'↔'사용 안함'으로 글자 수가 바뀌어도 스위치가 움직이지 않게 */
.entry-predict-toggle__label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    white-space: nowrap;
}
.entry-predict-toggle__track {
    position: relative;
    display: inline-block;
    margin-left: auto;
    width: 26px;
    height: 15px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.15s;
    flex-shrink: 0;
}
.entry-predict-toggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: white;
    transition: transform 0.15s;
}
.entry-predict-toggle--on .entry-predict-toggle__track {
    background: var(--color-primary);
}
.entry-predict-toggle--on .entry-predict-toggle__knob {
    transform: translateX(11px);
}
/*
 * 사용 OFF인 추천 세그먼트.
 * opacity 로 흐리게 했더니 값이 든 칸이 빈 칸보다 더 약해 보였다 —
 * 값은 또렷하게 두고 "지금은 안 쓴다"는 것만 무채색으로 말한다.
 */
.entry-context-seg--muted {
    background: #f1f5f9;
    border-color: #9aa7b8;
    color: #64748b;
}
.entry-context-seg--muted svg {
    color: #94a3b8;
}