/* 밀당 헤더: 분석 | 참견 pill 탭 (시안 v2) */
.mealdang-header-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    margin-left: 8px;
    background: var(--page, #fffcfa);
    border: 1px solid var(--line, #d0c6ba);
    border-radius: 999px;
    flex-shrink: 0;
}
.mealdang-header-tabs.hidden {
    display: none !important;
}
.mealdang-header-tab {
    position: relative;
    border: 0;
    background: transparent;
    color: var(--muted, #7a7268);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.2;
    letter-spacing: -0.01em;
    opacity: 0.55;
}
.mealdang-header-tab.active,
.mealdang-header-tab[aria-selected="true"] {
    background: var(--green-soft, #eaf8f2);
    color: var(--ink, #241f1c);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    opacity: 1;
}
#dashboardView.dashboard-view-v2 .mealdang-view.hidden,
#dashboardView.dashboard-view-v2 .mealdang-view[hidden] {
    display: none !important;
}
#dashboardView.dashboard-view-v2.dashboard-view--comment .dashboard-comment-zone {
    border-bottom: none;
    /* 짧은 콘텐츠일 때 뷰포트 높이로 하단을 억지로 채우지 않음 */
    min-height: 0;
}
#dashboardView.dashboard-view-v2 .dashboard-insight-period-shared {
    background: #fff;
    border-bottom: none;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    box-sizing: border-box;
}
#dashboardView.dashboard-view-v2 .dashboard-insight-period-shared .dashboard-insight-period-wrap {
    width: 100%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#mainAppHeader {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: none;
}
header .mealog-title {
    color: var(--green, #3cb889) !important;
}

#dashboardView.dashboard-view-v2 .card {
    border-radius: 16px;
}
/* 밀당: 모먼트·밀로그와 동일하게 캔버스 전 층 page-deep */
body[data-main-tab='dashboard'] {
    --app-page-bg: var(--page-deep, #faf6f2);
    background-color: var(--page-deep, #faf6f2) !important;
}
body[data-main-tab='dashboard'] #mainApp,
body[data-main-tab='dashboard'] #dashboardView {
    background-color: var(--page-deep, #faf6f2) !important;
}
#dashboardView:not(.hidden) {
    padding-top: 0;
    background: var(--page-deep, #faf6f2);
}
#dashboardView.dashboard-view-v2 > .dashboard-insight-chrome {
    flex-shrink: 0;
}
/* 기간 서브탭: 라운지·마이와 동일 soft-green · 검정 선택 텍스트 */
#dashboardView.dashboard-view-v2 .dashboard-chrome-subtabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 4px 14px;
    box-sizing: border-box;
    overflow-x: auto;
    align-items: stretch;
}
#dashboardView.dashboard-view-v2 .dashboard-chrome-subtabs .app-chrome-subtab {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 2rem;
    height: 100%;
    padding: 6px 6px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    background: transparent;
    color: var(--muted, #7a7268);
    box-sizing: border-box;
}
#dashboardView.dashboard-view-v2 .dashboard-chrome-subtabs .app-chrome-subtab.active,
#dashboardView.dashboard-view-v2 .dashboard-chrome-subtabs .app-chrome-subtab[aria-selected="true"] {
    background: var(--green-soft, #eaf8f2);
    color: var(--ink, #241f1c);
    font-weight: 600;
}
#dashboardView.dashboard-view-v2 .dashboard-chrome-subtabs .app-chrome-subtab:hover {
    background: transparent;
    color: var(--ink-2, #4f4841);
}
#dashboardView.dashboard-view-v2 .dashboard-chrome-subtabs .app-chrome-subtab.active:hover,
#dashboardView.dashboard-view-v2 .dashboard-chrome-subtabs .app-chrome-subtab[aria-selected="true"]:hover {
    background: var(--green-soft, #eaf8f2);
    color: var(--ink, #241f1c);
}

/* 참견 구역 — 시안: 다른 탭과 같은 page-deep 메뉴 캔버스 */
#dashboardView.dashboard-view-v2 .dashboard-comment-zone {
    background: var(--page-deep, #faf6f2);
    border-bottom: none;
    /* 네비 여백은 body padding — 존 하단 100px 이중 여백 제거 */
    padding: 16px 14px 12px;
}
#dashboardView.dashboard-view-v2.dashboard-view--comment {
    background: var(--page-deep, #faf6f2);
}
#dashboardView.dashboard-view-v2.dashboard-view--comment .mealdang-view--comment {
    background: var(--page-deep, #faf6f2);
}

/* 리포트 탭 = 주간·월간 리포트 목록 (js/analytics/period-reports.js).
   헤더 아래 서브탭 줄은 두 탭이 같이 쓴다 — 분석이면 기간 탭, 리포트면 종류 탭(전체·주간·월간).
   기간 이동 줄은 분석 전용이라 리포트에서는 걷는다 */
#dashboardView.dashboard-view-v2.dashboard-view--comment #insightPeriodTabs,
#dashboardView.dashboard-view-v2:not(.dashboard-view--comment) #reportKindTabs,
#dashboardView.dashboard-view-v2.dashboard-view--comment .dashboard-insight-period-shared {
    display: none;
}
#dashboardView.dashboard-view-v2 .period-report-zone {
    padding: 14px 14px 16px;
}
/* 안내 칸 — 한 상자, 종류마다 한 줄. 목록(표지 카드)보다 먼저 눈에 걸리지 않게 작고 옅게 */
#dashboardView.dashboard-view-v2 .period-report-guide {
    margin-bottom: 12px;
    border: 1px solid var(--line, #ebe4dc);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.72);
    overflow: hidden;
}
#dashboardView.dashboard-view-v2 .period-report-guide:empty {
    display: none;
}
#dashboardView.dashboard-view-v2 .period-report-guide__item {
    position: relative;
    padding: 9px 12px 9px 14px;
    color: var(--muted, #7a7268);
}
#dashboardView.dashboard-view-v2 .period-report-guide__item + .period-report-guide__item {
    border-top: 1px solid var(--line, #ebe4dc);
}
/* 책등 — 표지 카드와 같은 색으로 주간 적갈색, 월간 초록 */
#dashboardView.dashboard-view-v2 .period-report-guide__item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: #a8341f;
}
#dashboardView.dashboard-view-v2 .period-report-guide__item--monthly {
    background: #f1f6f2;
}
#dashboardView.dashboard-view-v2 .period-report-guide__item--monthly::before {
    background: #2f6f4f;
}
#dashboardView.dashboard-view-v2 .period-report-guide__title {
    flex: none;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    color: #a8341f;
}
#dashboardView.dashboard-view-v2 .period-report-guide__item--monthly .period-report-guide__title {
    color: #2f6f4f;
}
#dashboardView.dashboard-view-v2 .period-report-guide__meta {
    min-width: 0;
    font-size: 11px;
    line-height: 1.4;
    word-break: keep-all;
}
#dashboardView.dashboard-view-v2 .period-report-guide__meta i {
    margin: 0 5px;
    font-style: normal;
    opacity: 0.5;
}
#dashboardView.dashboard-view-v2 .period-report-guide__item b {
    color: var(--ink-2, #4a4741);
    font-weight: 800;
}
/* 전체 보기 — 「주간  매주 화요일 새벽 5시 · 지난주 4일 이상 기록」 한 줄 */
#dashboardView.dashboard-view-v2 .period-report-guide--split .period-report-guide__item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
}
#dashboardView.dashboard-view-v2 .period-report-guide--split .period-report-guide__meta {
    flex: 1;
}
#dashboardView.dashboard-view-v2 .period-report-guide__item.is-generation-off .period-report-guide__meta {
    opacity: 0.58;
}
/* 전체 탭의 구독 opt-out — 조건 문장 오른쪽 끝에 작게 두되 터치 영역은 40px 이상 유지 */
#dashboardView.dashboard-view-v2 .period-report-generation-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-height: 40px;
    margin: -8px -2px -8px 0;
    padding-left: 4px;
    color: var(--ink-2, #4a4741);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}
#dashboardView.dashboard-view-v2 .period-report-generation-toggle > span {
    min-width: 43px;
    text-align: right;
    white-space: nowrap;
}
#dashboardView.dashboard-view-v2 .period-report-generation-toggle input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}
#dashboardView.dashboard-view-v2 .period-report-generation-toggle i {
    position: relative;
    display: block;
    width: 30px;
    height: 18px;
    border-radius: 999px;
    background: #cfc8bf;
    transition: background 160ms ease;
}
#dashboardView.dashboard-view-v2 .period-report-generation-toggle i::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(36, 31, 28, 0.22);
    transition: transform 160ms ease;
}
#dashboardView.dashboard-view-v2 .period-report-generation-toggle input:checked + i {
    background: #2f8f67;
}
#dashboardView.dashboard-view-v2 .period-report-generation-toggle input:checked + i::after {
    transform: translateX(12px);
}
#dashboardView.dashboard-view-v2 .period-report-generation-toggle input:focus-visible + i {
    outline: 2px solid #0f766e;
    outline-offset: 2px;
}
#dashboardView.dashboard-view-v2 .period-report-generation-toggle:has(input:disabled) {
    cursor: default;
    opacity: 0.55;
}
/* 칩 보기 — 제목 | 일정이 한 줄, 그 아래 막대(없으면 조건 문장) */
#dashboardView.dashboard-view-v2 .period-report-guide__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
#dashboardView.dashboard-view-v2 .period-report-guide__head .period-report-guide__meta {
    text-align: right;
}
#dashboardView.dashboard-view-v2 .period-report-guide__rule {
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.4;
    word-break: keep-all;
}
#dashboardView.dashboard-view-v2 .period-report-guide__rule--off {
    color: #a8341f;
    font-weight: 700;
}

/* 새 리포트 레드닷 — 하단 밀당 → 헤더 리포트 → 종류 칩 순서로 안내 */
.period-report-update-dot {
    position: absolute;
    z-index: 12;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #ef4444;
    pointer-events: none;
}
.mealdang-header-tab .period-report-update-dot {
    top: 3px;
    right: 5px;
}
#reportKindTabs .period-report-update-dot {
    top: 4px;
    right: calc(50% - 20px);
}
#dashboardView.dashboard-view-v2 .period-report-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* 표지 카드 — 누르면 잡지 리더(.pr-reader)가 열린다 */
#dashboardView.dashboard-view-v2 .pr-cover {
    display: flex;
    gap: 14px;
    width: 100%;
    padding: 12px;
    text-align: left;
    background: #fffdf8;
    border: 1px solid #d8d2c4;
    /* 목록에서 한 권씩 끊어 읽히게 — 왼쪽 책등처럼 진하게. 위 선은 카드끼리 이어져 가로줄로 읽혔다 */
    border-left: 3px solid #1c1a17;
    border-radius: 2px;
    cursor: pointer;
    color: #1c1a17;
}
#dashboardView.dashboard-view-v2 .pr-cover__photo {
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    background: #e8e3d8;
    overflow: hidden;
    display: grid;
    place-items: center;
}
#dashboardView.dashboard-view-v2 .pr-cover__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#dashboardView.dashboard-view-v2 .pr-cover__mark {
    font-family: 'Noto Serif KR', ui-serif, Georgia, serif;
    font-weight: 900;
    font-size: 15px;
    color: #a8341f;
}
#dashboardView.dashboard-view-v2 .pr-cover__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
#dashboardView.dashboard-view-v2 .pr-cover__mast {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #a8341f;
}
/* 모먼트에 올린 리포트 — 타임라인 「게시됨」 표시와 같은 종이비행기. 머리글 줄 높이를 늘리지 않게 작게 */
#dashboardView.dashboard-view-v2 .pr-cover__shared {
    width: 16px;
    height: 16px;
    margin-left: 6px;
    margin-top: -3px;
}
#dashboardView.dashboard-view-v2 .pr-cover__shared svg,
#dashboardView.dashboard-view-v2 .pr-cover__shared i {
    width: 10px !important;
    height: 10px !important;
}
/* 종류는 책등 색으로 가른다 — 주간 적갈색, 월간 초록 종이. 머리글 글자색만으로는 한눈에 안 갈렸다 */
#dashboardView.dashboard-view-v2 .pr-cover--weekly {
    border-left-color: #a8341f;
}
#dashboardView.dashboard-view-v2 .pr-cover--monthly {
    background: #f1f6f2;
    border-color: #c9d8cd;
    border-left-color: #2f6f4f;
}
/* 월간은 큰 표지 — 사진이 위로 가로 전체. 크기가 달라야 색보다 먼저 「이건 다른 물건」으로 읽힌다 */
#dashboardView.dashboard-view-v2 .pr-cover--monthly {
    flex-direction: column;
    gap: 12px;
}
/* 사진은 제 비율대로 — 16:9 로 자르면 세로 사진(끼니 사진 대부분이 1:1·4:5)의 가운데 띠만 남아
   무엇을 찍었는지 안 보였다. 아주 긴 사진만 높이 상한에서 잘린다 */
#dashboardView.dashboard-view-v2 .pr-cover--monthly .pr-cover__photo {
    flex: none;
    width: 100%;
    height: auto;
    min-height: 120px;
    max-height: 360px;
    background: #dde8df;
}
#dashboardView.dashboard-view-v2 .pr-cover--monthly .pr-cover__photo img {
    height: auto;
    max-height: 360px;
}
#dashboardView.dashboard-view-v2 .pr-cover--monthly .pr-cover__mark {
    font-size: 22px;
}
#dashboardView.dashboard-view-v2 .pr-cover--monthly .pr-cover__title {
    font-size: 19px;
}
#dashboardView.dashboard-view-v2 .pr-cover__genre {
    align-self: flex-start;
    padding: 2px 7px;
    border: 1px solid #2f6f4f;
    border-radius: 2px;
    font-family: 'Noto Serif KR', ui-serif, Georgia, serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    color: #2f6f4f;
}
#dashboardView.dashboard-view-v2 .pr-cover--monthly .pr-cover__range {
    margin-top: 2px;
}
/* 안내 칸의 이번 주·이번 달 진행 (주간·월간 칩에서만) — 받기 전에 존재를 알아야 보상이 된다.
   막대와 숫자를 한 줄에 — 숫자가 막대 끝에 붙어야 「얼마 남았나」가 한 번에 읽힌다 */
#dashboardView.dashboard-view-v2 .period-report-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 7px;
}
#dashboardView.dashboard-view-v2 .period-report-progress__bar {
    flex: 1;
    display: block;
    height: 4px;
    border-radius: 2px;
    background: #d3e0d6;
    overflow: hidden;
}
#dashboardView.dashboard-view-v2 .period-report-progress__bar i {
    display: block;
    height: 100%;
    background: #2f6f4f;
}
#dashboardView.dashboard-view-v2 .period-report-progress__text {
    flex: none;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--muted, #7a7268);
}
#dashboardView.dashboard-view-v2 .period-report-progress--done .period-report-progress__text {
    color: #2f6f4f;
}
#dashboardView.dashboard-view-v2 .period-report-progress--done .period-report-progress__text b {
    color: #2f6f4f;
}
#dashboardView.dashboard-view-v2 .period-report-progress--weekly .period-report-progress__bar {
    background: #eddcd6;
}
#dashboardView.dashboard-view-v2 .period-report-progress--weekly .period-report-progress__bar i {
    background: #a8341f;
}
#dashboardView.dashboard-view-v2 .period-report-progress--weekly.period-report-progress--done .period-report-progress__text,
#dashboardView.dashboard-view-v2 .period-report-progress--weekly.period-report-progress--done .period-report-progress__text b {
    color: #a8341f;
}
#dashboardView.dashboard-view-v2 .pr-cover--monthly .pr-cover__mark,
#dashboardView.dashboard-view-v2 .pr-cover--monthly .pr-cover__mast {
    color: #2f6f4f;
}
#dashboardView.dashboard-view-v2 .pr-cover__title {
    font-family: 'Noto Serif KR', ui-serif, Georgia, serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: -0.02em;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#dashboardView.dashboard-view-v2 .pr-cover__owner {
    font-size: 11px;
    font-weight: 700;
    color: #6f695f;
}
#dashboardView.dashboard-view-v2 .pr-cover__range {
    margin-top: auto;
    font-size: 11px;
    color: #8b857a;
}
#dashboardView.dashboard-view-v2 .period-report-more {
    align-self: center;
    border: 0;
    background: transparent;
    color: var(--muted, #7a7268);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 16px;
    cursor: pointer;
}
#dashboardView.dashboard-view-v2 .period-report-loading {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}
#dashboardView.dashboard-view-v2 .period-report-empty {
    background: #fff;
    border: 1px dashed var(--line, #ebe4dc);
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
}
#dashboardView.dashboard-view-v2 .period-report-empty__title {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--ink, #241f1c);
}
#dashboardView.dashboard-view-v2 .period-report-empty__desc {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted, #7a7268);
    word-break: keep-all;
}

/* @period-report-render:start — 여기부터 끝 표시까지는 서버 공유 이미지 렌더러가 그대로 가져다 쓴다.
   고친 뒤 node scripts/sync-period-report-render.mjs (docs/ai-period-reports.md 「공유」) */
/* 잡지 리더 — dev/weekly-report/pipeline/design-html.mjs 시안을 옮겼다. body 에 붙는 전체 화면 */
/* 잡지 색·서체 */
.pr-reader,
.mg-capture {
    --mg-paper: #f4f1ea;
    --mg-card: #fffdf8;
    --mg-ink: #1c1a17;
    --mg-ink-2: #4a4741;
    --mg-dim: #8b857a;
    --mg-rule: #d8d2c4;
    --mg-accent: #a8341f;
    --mg-accent-soft: rgba(168, 52, 31, 0.13);
    --mg-accent-line: rgba(168, 52, 31, 0.35);
    --mg-photo: #e8e3d8;
    --mg-avatar: #eeeae0;
    --mg-serif: 'Noto Serif KR', ui-serif, Georgia, 'Batang', serif;
}
/* 공유 캡처용 화면 밖 받침(period-report-share.js) — 카드만 기준 폭 400 으로 세운다 */
.mg-capture {
    position: fixed;
    left: -10000px;
    top: 0;
    z-index: -1;
    pointer-events: none;
}
/* 관리자에서는 관리자 모달 층으로 — 사이드바·상단바 위에 뜬다.
   넓은 화면에서 위아래 끝까지 찬 기둥이 되지 않게 폰 크기 팝업으로 가운데 둔다(transform 은 스냅 기준을 흔들어 안 쓴다) */
body:has(#adminPage) .pr-reader {
    z-index: var(--z-admin-modal, 600);
    top: max(20px, calc(50vh - 430px));
    bottom: auto;
    height: min(860px, calc(100vh - 40px));
    border-radius: 20px;
    overflow: hidden;
}
.pr-reader {
    position: fixed;
    top: 0;
    bottom: 0;
    /* 웹에서는 앱 열(body max-w-md)과 같은 폭 — 하단 메뉴와 같은 변수. 양옆은 그림자로 가린다.
       transform 으로 가운데 두지 않는다: 안쪽 가로 스크롤 스냅 기준이 흔들린다 */
    left: 50%;
    width: var(--app-bottom-bar-width, min(28rem, 100vw));
    margin-left: calc(var(--app-bottom-bar-width, min(28rem, 100vw)) / -2);
    box-shadow: 0 0 0 100vmax rgba(28, 26, 23, 0.55);
    z-index: var(--z-detail-modal, 350);
    background: var(--mg-paper);
    color: var(--mg-ink);
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pr-reader.hidden {
    display: none;
}
.pr-reader__bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 8px 12px 8px 20px;
}
.pr-reader__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--mg-dim);
}
/* 넘기기 줄 — 밀어서 넘기는 걸 모르는 사람·마우스로는 못 미는 웹을 위한 기본 동선.
   카드 바로 밑에 붙는 작은 줄이다(‹ · 점 · ›). 버튼 줄과 섞지 않는다 — 공유는 맨 아래 공유 줄 */
.pr-reader__nav {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 2px 14px 10px;
    margin-bottom: auto;
}
.pr-reader__prev,
.pr-reader__next {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--mg-rule);
    border-radius: 50%;
    background: var(--mg-card);
    color: var(--mg-ink);
    cursor: pointer;
}
.pr-reader__prev svg,
.pr-reader__next svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}
.pr-reader__prev:disabled,
.pr-reader__next:disabled {
    opacity: 0.3;
    cursor: default;
}
.pr-reader__page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 64px;
}
.pr-reader__count {
    font-size: 11px;
    font-weight: 700;
    color: var(--mg-dim);
    letter-spacing: 0.06em;
}
.pr-reader__dots {
    display: flex;
    gap: 6px;
}
.pr-reader__dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mg-rule);
    transition: width 0.2s ease, background 0.2s ease;
}
.pr-reader__dots i.is-on {
    width: 16px;
    border-radius: 3px;
    background: var(--mg-ink);
}
/* 버튼 줄 — 식단분석 리포트 모달과 같은 순서·버튼(닫기 · SNS · 모먼트). 공유 둘은 앱에서만 보인다 */
.pr-reader__actions {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--mg-rule);
    background: var(--mg-paper);
}
.pr-reader__actions > .mealog-btn {
    flex: 1 1 0;
    min-width: 0;
}
.pr-reader__actions > .hidden {
    display: none;
}
.pr-reader__btn-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.pr-reader__btn-inner svg {
    width: 18px;
    height: 18px;
}
.pr-reader__deck {
    /* 카드 높이만큼만 차지하고(폭 기준 4:5 + 위아래 여백 20) 넘기기 줄과 한 덩어리로 가운데 선다.
       flex:1 로 늘리면 카드는 가운데, 넘기기 줄은 맨 아래로 벌어져 둘이 따로 논다. 자리가 모자라면 줄어든다 */
    flex: 0 1 calc(var(--app-bottom-bar-width, min(28rem, 100vw)) * 1.25 - 15px);
    margin-top: auto;
    min-height: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.pr-reader__deck::-webkit-scrollbar {
    display: none;
}
/* 한 장 = 공유 이미지 한 장(4:5). 슬라이드가 크기 컨테이너, 그 안의 카드가 화면에 맞춰 줄어든다 */
.mg-slide {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    container-type: size;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mg-frame {
    width: min(calc(100cqw - 28px), calc((100cqh - 20px) * 0.8));
    aspect-ratio: 4 / 5;
    container-type: inline-size;
}
/* 크기는 전부 기준 폭 400 에서의 px 값 × --px. 글씨만 --fit(넘침 맞춤 배수)을 한 번 더 곱한다 */
.mg-page {
    --px: calc(100cqw / 400);
    --f: calc(var(--px) * var(--fit, 1));
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--mg-card);
    border: 1px solid var(--mg-rule);
    box-shadow: 0 6px 24px rgba(28, 26, 23, 0.08);
    color: var(--mg-ink);
}
.mg-mast {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: calc(var(--px) * 8);
    padding: calc(var(--px) * 12) calc(var(--px) * 20) calc(var(--px) * 10);
    border-bottom: 1px solid var(--mg-ink);
}
.mg-mast-t {
    font-family: var(--mg-serif);
    font-weight: 900;
    font-size: calc(var(--px) * 12.5);
    letter-spacing: 0.2em;
    white-space: nowrap;
}
.mg-mast-d {
    font-size: calc(var(--px) * 12);
    color: var(--mg-dim);
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.mg-pg {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--px) * 12);
    padding: calc(var(--px) * 9) calc(var(--px) * 20);
    border-top: 1px solid var(--mg-rule);
    font-size: calc(var(--px) * 11.5);
    color: var(--mg-dim);
    letter-spacing: 0.05em;
}
.mg-pg span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mg-pg span:last-child {
    flex-shrink: 0;
    font-family: var(--mg-serif);
    font-weight: 700;
    font-size: calc(var(--px) * 13);
    color: var(--mg-ink);
}
/* 본문 칸: 남는 높이를 다 쓰고, 내용은 세로 가운데. justify-content:center 는 넘칠 때 위가 잘려
   scrollHeight 로 잴 수 없어서 첫·끝 자식의 auto 여백으로 가운데를 만든다 */
.mg-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: calc(var(--px) * 18) calc(var(--px) * 22);
}
.mg-body > :first-child {
    margin-top: auto;
}
.mg-body > :last-child {
    margin-bottom: auto;
}

/* 1 · 표지 */
.mg-ph {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    background: var(--mg-photo);
}
.mg-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mg-ph figcaption {
    position: absolute;
    left: calc(var(--px) * 12);
    bottom: calc(var(--px) * 10);
    max-width: calc(100% - var(--px) * 24);
    padding: calc(var(--px) * 3) calc(var(--px) * 8);
    background: rgba(28, 26, 23, 0.72);
    color: #fff;
    font-size: calc(var(--px) * 11.5);
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mg-cover-title {
    flex-shrink: 0;
    padding: calc(var(--px) * 14) calc(var(--px) * 20) calc(var(--px) * 14);
}
.mg-owner {
    display: block;
    margin-bottom: calc(var(--px) * 5);
    color: var(--mg-dim);
    font-size: calc(var(--px) * 11.5);
    font-weight: 700;
    letter-spacing: 0.08em;
}
.mg-page--nophoto .mg-cover-title {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mg-thumbs {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--px) * 6);
    padding: calc(var(--px) * 10) calc(var(--px) * 20) calc(var(--px) * 12);
}
.mg-sh {
    margin: 0;
    min-width: 0;
}
.mg-sh img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    border: 1px solid var(--mg-rule);
}
.mg-sh figcaption {
    margin-top: calc(var(--px) * 3);
    font-size: calc(var(--px) * 11);
    color: var(--mg-dim);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mg-head {
    margin: 0;
    font-family: var(--mg-serif);
    font-weight: 900;
    font-size: calc(var(--px) * 23);
    line-height: 1.28;
    letter-spacing: -0.02em;
    word-break: keep-all;
    color: var(--mg-ink);
}
/* 시안의 괘선 — 가로 전체 얇은 선 위에 왼쪽만 붉게 겹친다.
   붉은 막대만 따로 두면 선이 아니라 떠 있는 조각으로 보인다 */
.mg-head::after {
    content: "";
    display: block;
    height: calc(var(--px) * 3);
    margin-top: calc(var(--px) * 11);
    background:
        linear-gradient(var(--mg-accent), var(--mg-accent)) left center / calc(var(--px) * 46) 100% no-repeat,
        linear-gradient(var(--mg-rule), var(--mg-rule)) center / 100% 1px no-repeat;
}
.mg-page--nophoto .mg-head {
    font-size: calc(var(--px) * 32);
}

/* 2 · 본문 */
.mg-story {
    margin: 0;
    font-family: var(--mg-serif);
    font-weight: 500;
    font-size: calc(var(--f) * 15);
    line-height: 1.85;
    color: var(--mg-ink-2);
    word-break: keep-all;
}
/* 문단 — 본문(2)·칼럼(4)을 두 문단으로 나눈다(period-report-pages.js splitParagraphs). 들여쓰기 없이 한 줄 반쯤 띄운다 */
.mg-story p,
.mg-col p {
    margin: 0;
}
.mg-story p + p,
.mg-col p + p {
    margin-top: 0.85em;
}
/* 첫 문단이 짧아도 드롭캡이 둘째 문단으로 번지지 않게 */
.mg-story p + p {
    clear: left;
}
.mg-q {
    font-style: italic;
    color: var(--mg-accent);
    font-weight: 500;
    background: linear-gradient(transparent 62%, var(--mg-accent-soft) 62%);
}
.mg-nm {
    font-weight: 900;
    color: var(--mg-ink);
    letter-spacing: -0.01em;
    border-bottom: calc(var(--px) * 1.5) solid var(--mg-accent-line);
}
.mg-dc {
    float: left;
    font-family: var(--mg-serif);
    font-weight: 900;
    font-size: calc(var(--f) * 40);
    line-height: 0.86;
    padding: calc(var(--f) * 5) calc(var(--f) * 7) 0 0;
    color: var(--mg-accent);
}

/* 3 · 숫자 */
.mg-lead {
    text-align: center;
    padding-bottom: calc(var(--f) * 12);
    border-bottom: 1px solid var(--mg-rule);
}
.mg-lead-val {
    font-family: var(--mg-serif);
    font-weight: 900;
    font-size: calc(var(--f) * 46);
    line-height: 1;
    letter-spacing: -0.03em;
}
.mg-lead-lab {
    margin-top: calc(var(--f) * 6);
    font-size: calc(var(--f) * 13);
    letter-spacing: 0.14em;
    color: var(--mg-dim);
}
.mg-lead-sub {
    margin-top: calc(var(--f) * 3);
    font-size: calc(var(--f) * 13);
    color: var(--mg-ink-2);
}
.mg-lead-bd {
    display: inline-block;
    margin-top: calc(var(--f) * 7);
    padding: calc(var(--f) * 2) calc(var(--f) * 9);
    border-radius: 999px;
    font-size: calc(var(--f) * 11);
    font-weight: 800;
}
/* 식사·간식 두 숫자 — 가운데 세로 괘선으로 나눈다 */
.mg-lead-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.mg-lead-cell + .mg-lead-cell {
    border-left: 1px solid var(--mg-rule);
}
.mg-lead--split .mg-lead-val {
    font-size: calc(var(--f) * 42);
}
.mg-lead-val small {
    margin-left: calc(var(--f) * 2);
    font-size: 0.42em;
    font-weight: 700;
    letter-spacing: 0;
}
.mg-lead-total {
    margin-top: calc(var(--f) * 12);
    padding-top: calc(var(--f) * 9);
    border-top: 1px dotted var(--mg-rule);
}
.mg-nums {
    list-style: none;
    margin: 0;
    padding: calc(var(--f) * 4) 0 0;
}
.mg-nums li {
    display: grid;
    grid-template-columns: calc(var(--px) * 108) 1fr;
    column-gap: calc(var(--px) * 8);
    align-items: baseline;
    padding: calc(var(--f) * 7) 0;
    border-bottom: 1px dotted var(--mg-rule);
}
.mg-n-lab {
    font-size: calc(var(--f) * 13);
    color: var(--mg-dim);
}
.mg-n-val {
    font-family: var(--mg-serif);
    font-weight: 700;
    font-size: calc(var(--f) * 17);
}
.mg-n-sub {
    grid-column: 2;
    margin-top: calc(var(--f) * 2);
    font-size: calc(var(--f) * 12);
    color: var(--mg-dim);
}
.mg-n-bd {
    margin-left: calc(var(--f) * 6);
    padding: calc(var(--f) * 1.5) calc(var(--f) * 7);
    border-radius: 999px;
    font-family: inherit;
    font-size: calc(var(--f) * 10.5);
    font-weight: 800;
    vertical-align: middle;
    white-space: nowrap;
}
.mg-bd-record { background: #f3e8ff; color: #6b21a8; }
.mg-bd-best { background: #e7f6ee; color: #2f6f4f; }

/* 4 · 칼럼 */
.mg-byline {
    display: flex;
    align-items: center;
    gap: calc(var(--px) * 12);
    padding-bottom: calc(var(--f) * 12);
    margin-bottom: calc(var(--f) * 14);
    border-bottom: 1px solid var(--mg-rule);
}
.mg-av {
    width: calc(var(--px) * 46);
    height: calc(var(--px) * 46);
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--mg-rule);
    background: var(--mg-avatar);
}
.mg-by-n {
    font-family: var(--mg-serif);
    font-weight: 700;
    font-size: calc(var(--f) * 15);
}
.mg-by-s {
    margin-top: calc(var(--f) * 2);
    font-size: calc(var(--f) * 12);
    color: var(--mg-dim);
}
.mg-col {
    position: relative;
    margin: 0;
    padding-top: calc(var(--f) * 22);
    font-family: var(--mg-serif);
    font-weight: 500;
    font-size: calc(var(--f) * 14.5);
    line-height: 1.9;
    color: var(--mg-ink-2);
    word-break: keep-all;
}
.mg-col::before {
    content: "\201C";
    position: absolute;
    top: calc(var(--f) * -10);
    left: calc(var(--f) * -4);
    font-family: var(--mg-serif);
    font-size: calc(var(--f) * 50);
    line-height: 1;
    color: var(--mg-rule);
}
/* 월간 — 문체마다 종이·잉크·강조색 (period-report-formats.js). 배치는 그대로, 색과 머리글 장식만.
   주간은 기본 잡지. 형식을 모르는 월간은 초록 강조 */
.mg-page.mg-monthly {
    --mg-accent: #2f6f4f;
    --mg-accent-soft: rgba(47, 111, 79, 0.13);
    --mg-accent-line: rgba(47, 111, 79, 0.35);
}
/* 표지 제목 위의 문체 도장 */
.mg-genre {
    display: inline-block;
    margin-bottom: calc(var(--px) * 8);
    padding: calc(var(--px) * 2) calc(var(--px) * 8);
    border: 1px solid var(--mg-accent);
    font-family: var(--mg-serif);
    font-weight: 700;
    font-size: calc(var(--px) * 11.5);
    letter-spacing: 0.08em;
    color: var(--mg-accent);
}
/* 옛이야기(설화·신화·동화·수라간) — 한지. 머리글은 두 줄 괘선 */
.mg-page.mg-theme-hanji {
    --mg-card: #f6efdf;
    --mg-ink: #33261a;
    --mg-ink-2: #4e3d2b;
    --mg-dim: #8c7a5e;
    --mg-rule: #dccdae;
    --mg-accent: #9c3b22;
    --mg-accent-soft: rgba(156, 59, 34, 0.12);
    --mg-accent-line: rgba(156, 59, 34, 0.35);
    --mg-photo: #e6dac0;
    --mg-avatar: #ece2cc;
}
.mg-page.mg-theme-hanji .mg-mast {
    border-bottom: calc(var(--px) * 3) double var(--mg-ink);
}
.mg-page.mg-theme-hanji .mg-mast-t {
    color: var(--mg-accent);
}
/* 문서(수사·법정·발굴·도슨트) — 서류철. 머리글 제목은 도장처럼 네모 안에 */
.mg-page.mg-theme-dossier {
    --mg-card: #f4f2eb;
    --mg-ink: #1f242b;
    --mg-ink-2: #39404a;
    --mg-dim: #7b8089;
    --mg-rule: #cfd2d6;
    --mg-accent: #2c4770;
    --mg-accent-soft: rgba(44, 71, 112, 0.12);
    --mg-accent-line: rgba(44, 71, 112, 0.35);
    --mg-photo: #dfe1e3;
    --mg-avatar: #e4e6e8;
}
.mg-page.mg-theme-dossier .mg-mast {
    border-bottom: calc(var(--px) * 2) solid var(--mg-ink);
}
.mg-page.mg-theme-dossier .mg-mast-t {
    padding: calc(var(--px) * 1) calc(var(--px) * 6);
    border: calc(var(--px) * 1.5) solid var(--mg-accent);
    color: var(--mg-accent);
}
.mg-page.mg-theme-dossier .mg-pg {
    border-top-style: dashed;
}
/* 편지·일기(편지·일기·로맨스·여행) — 편지지. 머리글 아래는 점선 */
.mg-page.mg-theme-letter {
    --mg-card: #fcf6f3;
    --mg-ink: #3a2c31;
    --mg-ink-2: #54434a;
    --mg-dim: #9a8489;
    --mg-rule: #ecd9d9;
    --mg-accent: #b04a64;
    --mg-accent-soft: rgba(176, 74, 100, 0.12);
    --mg-accent-line: rgba(176, 74, 100, 0.35);
    --mg-photo: #f0e1e1;
    --mg-avatar: #f3e6e6;
}
.mg-page.mg-theme-letter .mg-mast {
    border-bottom: 1px dashed var(--mg-accent);
}
.mg-page.mg-theme-letter .mg-mast-t {
    color: var(--mg-accent);
}
/* 방송(뉴스·중계·예보·오디션·인터뷰) — 화면 자막 띠. 머리글이 강조색 띠 */
.mg-page.mg-theme-broadcast {
    --mg-card: #ffffff;
    --mg-ink: #121418;
    --mg-ink-2: #2e3238;
    --mg-dim: #7a7f87;
    --mg-rule: #dcdfe3;
    --mg-accent: #d2261c;
    --mg-accent-soft: rgba(210, 38, 28, 0.1);
    --mg-accent-line: rgba(210, 38, 28, 0.35);
    --mg-photo: #e6e8eb;
    --mg-avatar: #eceef0;
}
.mg-page.mg-theme-broadcast .mg-mast {
    background: var(--mg-accent);
    border-bottom: none;
}
.mg-page.mg-theme-broadcast .mg-mast-t,
.mg-page.mg-theme-broadcast .mg-mast-d {
    color: #fff;
}
/* 밤(무협·하드보일드·우주·서사시) — 어두운 종이에 금빛 */
.mg-page.mg-theme-night {
    --mg-card: #1c1e23;
    --mg-ink: #efe8da;
    --mg-ink-2: #d4ccbd;
    --mg-dim: #9a9387;
    --mg-rule: #3a3d45;
    --mg-accent: #deb052;
    --mg-accent-soft: rgba(222, 176, 82, 0.16);
    --mg-accent-line: rgba(222, 176, 82, 0.45);
    --mg-photo: #2a2d34;
    --mg-avatar: #2a2d34;
}
.mg-page.mg-theme-night .mg-mast {
    border-bottom-color: var(--mg-accent);
}
.mg-page.mg-theme-night .mg-mast-t {
    color: var(--mg-accent);
}
/* 들판(자연 다큐) — 옅은 풀빛 */
.mg-page.mg-theme-field {
    --mg-card: #f2f4ec;
    --mg-ink: #1f2a1f;
    --mg-ink-2: #3a4638;
    --mg-dim: #7b8573;
    --mg-rule: #d2d9c5;
    --mg-accent: #3e6b35;
    --mg-accent-soft: rgba(62, 107, 53, 0.13);
    --mg-accent-line: rgba(62, 107, 53, 0.35);
    --mg-photo: #dfe5d4;
    --mg-avatar: #e4e9da;
}
.mg-page.mg-theme-field .mg-mast {
    border-bottom-color: var(--mg-accent);
}
.mg-page.mg-theme-field .mg-mast-t {
    color: var(--mg-accent);
}
/* 테마 배경 그림(옅게 · 가장자리와 아래쪽) — 옛이야기 산·소나무·구름 / 문서 모눈·도장·클립 / 편지 소인·꽃가지 /
   방송 주사선·전파 / 밤 별·달·먼 산 / 들판 풀·고사리. viewBox 400×500 = 카드 비율이라 카드 크기를 따라 준다.
   만든 곳: dev/period-report-theme-art/theme-art.js — 고친 뒤 출력을 이 자리에 붙이고 sync-period-report-render */
.mg-page.mg-theme-hanji {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20500%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cpath%20d%3D%27M0%20395%20L35%20370%20L70%20382%20L118%20336%20L160%20372%20L205%20350%20L250%20381%20L300%20330%20L345%20366%20L400%20342%20L400%20500%20L0%20500%20Z%27%20fill%3D%27%2333261a%27%20fill-opacity%3D%270.045%27%2F%3E%20%3Cpath%20d%3D%27M0%20440%20Q55%20398%20105%20428%20Q150%20386%20205%20432%20Q255%20404%20305%20438%20Q352%20414%20400%20432%20L400%20500%20L0%20500%20Z%27%20fill%3D%27%2333261a%27%20fill-opacity%3D%270.06%27%2F%3E%20%3Cpath%20d%3D%27M300%20330%20Q296%20360%20306%20392%27%20fill%3D%27none%27%20stroke%3D%27%2333261a%27%20stroke-opacity%3D%270.08%27%20stroke-width%3D%271.2%27%2F%3E%20%3Cg%20transform%3D%27translate(52%20486)%20scale(1.3)%27%3E%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%2333261a%27%20stroke-opacity%3D%270.144%27%20stroke-linecap%3D%27round%27%3E%20%3Cpath%20d%3D%27M0%200%20C-6%20-28%2010%20-52%203%20-82%20C-2%20-104%208%20-118%205%20-138%27%20stroke-width%3D%275%27%2F%3E%20%3Cpath%20d%3D%27M2%20-60%20Q-14%20-66%20-30%20-62%20M4%20-86%20Q20%20-92%2036%20-88%20M3%20-110%20Q-10%20-118%20-22%20-114%20M5%20-130%20Q14%20-136%2020%20-134%27%20stroke-width%3D%272.2%27%2F%3E%3C%2Fg%3E%20%3Cg%20fill%3D%27%2333261a%27%20fill-opacity%3D%270.12%27%3E%3Cpath%20d%3D%27M-54%20-60%20Q-51.8%20-65.236%20-44.1%20-65.61%20Q-39.7%20-68.976%20-32%20-67.48%20Q-24.3%20-69.35%20-18.8%20-65.236%20Q-11.759999999999998%20-64.488%20-10%20-60%20Q-32%20-57.756%20-54%20-60%20Z%27%2F%3E%3Cpath%20d%3D%27M14%20-86%20Q16.4%20-91.712%2024.799999999999997%20-92.12%20Q29.6%20-95.792%2038%20-94.16%20Q46.4%20-96.2%2052.4%20-91.712%20Q60.08%20-90.896%2062%20-86%20Q38%20-83.552%2014%20-86%20Z%27%2F%3E%3Cpath%20d%3D%27M-41%20-112%20Q-39.1%20-116.522%20-32.45%20-116.845%20Q-28.65%20-119.752%20-22%20-118.46000000000001%20Q-15.350000000000001%20-120.075%20-10.6%20-116.522%20Q-4.52%20-115.876%20-3%20-112%20Q-22%20-110.062%20-41%20-112%20Z%27%2F%3E%3Cpath%20d%3D%27M3%20-133%20Q4.5%20-136.57%209.75%20-136.825%20Q12.75%20-139.12%2018%20-138.1%20Q23.25%20-139.375%2027%20-136.57%20Q31.8%20-136.06%2033%20-133%20Q18%20-131.47%203%20-133%20Z%27%2F%3E%3Cpath%20d%3D%27M-7%20-144%20Q-5.9%20-146.618%20-2.0500000000000007%20-146.805%20Q0.15000000000000036%20-148.488%204%20-147.74%20Q7.85%20-148.675%2010.6%20-146.618%20Q14.120000000000001%20-146.244%2015%20-144%20Q4%20-142.878%20-7%20-144%20Z%27%2F%3E%3C%2Fg%3E%3C%2Fg%3E%20%3Cg%20transform%3D%27translate(366%20470)%20scale(0.8)%27%3E%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%2333261a%27%20stroke-opacity%3D%270.108%27%20stroke-linecap%3D%27round%27%3E%20%3Cpath%20d%3D%27M0%200%20C-6%20-28%2010%20-52%203%20-82%20C-2%20-104%208%20-118%205%20-138%27%20stroke-width%3D%275%27%2F%3E%20%3Cpath%20d%3D%27M2%20-60%20Q-14%20-66%20-30%20-62%20M4%20-86%20Q20%20-92%2036%20-88%20M3%20-110%20Q-10%20-118%20-22%20-114%20M5%20-130%20Q14%20-136%2020%20-134%27%20stroke-width%3D%272.2%27%2F%3E%3C%2Fg%3E%20%3Cg%20fill%3D%27%2333261a%27%20fill-opacity%3D%270.09%27%3E%3Cpath%20d%3D%27M-54%20-60%20Q-51.8%20-65.236%20-44.1%20-65.61%20Q-39.7%20-68.976%20-32%20-67.48%20Q-24.3%20-69.35%20-18.8%20-65.236%20Q-11.759999999999998%20-64.488%20-10%20-60%20Q-32%20-57.756%20-54%20-60%20Z%27%2F%3E%3Cpath%20d%3D%27M14%20-86%20Q16.4%20-91.712%2024.799999999999997%20-92.12%20Q29.6%20-95.792%2038%20-94.16%20Q46.4%20-96.2%2052.4%20-91.712%20Q60.08%20-90.896%2062%20-86%20Q38%20-83.552%2014%20-86%20Z%27%2F%3E%3Cpath%20d%3D%27M-41%20-112%20Q-39.1%20-116.522%20-32.45%20-116.845%20Q-28.65%20-119.752%20-22%20-118.46000000000001%20Q-15.350000000000001%20-120.075%20-10.6%20-116.522%20Q-4.52%20-115.876%20-3%20-112%20Q-22%20-110.062%20-41%20-112%20Z%27%2F%3E%3Cpath%20d%3D%27M3%20-133%20Q4.5%20-136.57%209.75%20-136.825%20Q12.75%20-139.12%2018%20-138.1%20Q23.25%20-139.375%2027%20-136.57%20Q31.8%20-136.06%2033%20-133%20Q18%20-131.47%203%20-133%20Z%27%2F%3E%3Cpath%20d%3D%27M-7%20-144%20Q-5.9%20-146.618%20-2.0500000000000007%20-146.805%20Q0.15000000000000036%20-148.488%204%20-147.74%20Q7.85%20-148.675%2010.6%20-146.618%20Q14.120000000000001%20-146.244%2015%20-144%20Q4%20-142.878%20-7%20-144%20Z%27%2F%3E%3C%2Fg%3E%3C%2Fg%3E%20%3Cg%20transform%3D%27translate(262%20118)%20scale(1.3)%27%20fill%3D%27none%27%20stroke%3D%27%2333261a%27%20stroke-opacity%3D%270.14%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%3E%20%3Cpath%20d%3D%27M0%200%20Q6%20-14%2020%20-8%20Q26%20-22%2042%20-14%20Q56%20-20%2060%20-6%20Q74%20-4%2070%208%20L2%208%20Q-8%206%200%200%20Z%27%2F%3E%20%3Cpath%20d%3D%27M18%20-2%20q6%20-6%2012%200%20M40%20-4%20q5%20-5%2010%201%27%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%27translate(30%20190)%20scale(0.9)%27%20fill%3D%27none%27%20stroke%3D%27%2333261a%27%20stroke-opacity%3D%270.11%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%3E%20%3Cpath%20d%3D%27M0%200%20Q6%20-14%2020%20-8%20Q26%20-22%2042%20-14%20Q56%20-20%2060%20-6%20Q74%20-4%2070%208%20L2%208%20Q-8%206%200%200%20Z%27%2F%3E%20%3Cpath%20d%3D%27M18%20-2%20q6%20-6%2012%200%20M40%20-4%20q5%20-5%2010%201%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        radial-gradient(circle at 20% 30%, rgba(140, 110, 60, 0.05) 0 1px, transparent 1.5px),
        radial-gradient(circle at 70% 80%, rgba(140, 110, 60, 0.05) 0 1px, transparent 1.5px);
    background-size: 100% 100%, calc(var(--px) * 9) calc(var(--px) * 9), calc(var(--px) * 13) calc(var(--px) * 13);
    background-repeat: no-repeat, repeat, repeat;
}
.mg-page.mg-theme-dossier {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20500%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20transform%3D%27translate(318%20420)%20rotate(-14)%27%20fill%3D%27none%27%20stroke%3D%27%232c4770%27%20stroke-opacity%3D%270.14%27%3E%20%3Ccircle%20r%3D%2746%27%20stroke-width%3D%273%27%2F%3E%3Ccircle%20r%3D%2738%27%20stroke-width%3D%271.2%27%2F%3E%20%3Cpath%20d%3D%27M-24%20-4%20L24%20-4%20M-24%206%20L24%206%27%20stroke-width%3D%272.4%27%2F%3E%3C%2Fg%3E%20%3Cpath%20transform%3D%27translate(318%20420)%20rotate(-14)%27%20d%3D%27M0%20-30%20l3%208%20h8%20l-6.5%205%20l2.5%208%20l-7%20-5%20l-7%205%20l2.5%20-8%20l-6.5%20-5%20h8%20z%27%20fill%3D%27%232c4770%27%20fill-opacity%3D%270.14%27%2F%3E%20%3Cpath%20d%3D%27M26%2070%20L26%2030%20Q26%2018%2036%2018%20Q46%2018%2046%2030%20L46%2082%20Q46%2094%2036%2094%20Q26%2094%2026%2082%20L26%2044%27%20fill%3D%27none%27%20stroke%3D%27%232c4770%27%20stroke-opacity%3D%270.16%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E"),
        linear-gradient(rgba(44, 71, 112, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(44, 71, 112, 0.05) 1px, transparent 1px);
    background-size: 100% 100%, calc(var(--px) * 16) calc(var(--px) * 16), calc(var(--px) * 16) calc(var(--px) * 16);
    background-repeat: no-repeat, repeat, repeat;
}
.mg-page.mg-theme-letter {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20500%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20transform%3D%27translate(328%2092)%27%20fill%3D%27none%27%20stroke%3D%27%23b04a64%27%20stroke-opacity%3D%270.16%27%3E%20%3Ccircle%20r%3D%2730%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20r%3D%2723%27%20stroke-width%3D%270.9%27%2F%3E%20%3Cpath%20d%3D%27M-80%20-12%20q10%20-6%2020%200%20t20%200%20t20%200%20M-80%200%20q10%20-6%2020%200%20t20%200%20t20%200%20M-80%2012%20q10%20-6%2020%200%20t20%200%20t20%200%27%20stroke-width%3D%271.4%27%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%27translate(356%20486)%20rotate(-28)%27%20stroke%3D%27%23b04a64%27%20stroke-opacity%3D%270.15%27%20fill%3D%27%23b04a64%27%20fill-opacity%3D%270.07%27%3E%20%3Cpath%20d%3D%27M0%200%20L0%20-120%27%20fill%3D%27none%27%20stroke-width%3D%271.6%27%2F%3E%20%3Cpath%20d%3D%27M0%20-30%20Q-22%20-38%20-26%20-58%20Q-6%20-52%200%20-30%20Z%20M0%20-54%20Q20%20-62%2026%20-82%20Q4%20-78%200%20-54%20Z%20M0%20-78%20Q-18%20-88%20-20%20-104%20Q-3%20-98%200%20-78%20Z%27%2F%3E%20%3Ccircle%20cx%3D%270%27%20cy%3D%27-126%27%20r%3D%277%27%2F%3E%3Ccircle%20cx%3D%27-9%27%20cy%3D%27-120%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%27-120%27%20r%3D%275%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.mg-page.mg-theme-broadcast {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20500%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cg%20transform%3D%27translate(400%20500)%27%20fill%3D%27none%27%20stroke%3D%27%23d2261c%27%20stroke-opacity%3D%270.1%27%20stroke-width%3D%273%27%3E%20%3Cpath%20d%3D%27M-60%200%20A60%2060%200%200%201%200%20-60%27%2F%3E%3Cpath%20d%3D%27M-110%200%20A110%20110%200%200%201%200%20-110%27%2F%3E%3Cpath%20d%3D%27M-160%200%20A160%20160%200%200%201%200%20-160%27%2F%3E%3C%2Fg%3E%20%3Ccircle%20cx%3D%27376%27%20cy%3D%27476%27%20r%3D%278%27%20fill%3D%27%23d2261c%27%20fill-opacity%3D%270.12%27%2F%3E%3C%2Fsvg%3E"),
        repeating-linear-gradient(rgba(18, 20, 24, 0.025) 0 1px, transparent 1px 3px);
    background-size: 100% 100%, auto;
    background-repeat: no-repeat, repeat;
}
.mg-page.mg-theme-night {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20500%27%20preserveAspectRatio%3D%27none%27%3E%20%3Ccircle%20cx%3D%2740%27%20cy%3D%2770%27%20r%3D%272.08%27%20fill%3D%27%23deb052%27%20fill-opacity%3D%270.35%27%2F%3E%3Ccircle%20cx%3D%2792%27%20cy%3D%27120%27%20r%3D%271.4400000000000002%27%20fill%3D%27%23deb052%27%20fill-opacity%3D%270.35%27%2F%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%2758%27%20r%3D%271.7600000000000002%27%20fill%3D%27%23deb052%27%20fill-opacity%3D%270.35%27%2F%3E%3Ccircle%20cx%3D%27210%27%20cy%3D%27104%27%20r%3D%271.2800000000000002%27%20fill%3D%27%23deb052%27%20fill-opacity%3D%270.35%27%2F%3E%3Ccircle%20cx%3D%27262%27%20cy%3D%2762%27%20r%3D%271.92%27%20fill%3D%27%23deb052%27%20fill-opacity%3D%270.35%27%2F%3E%3Ccircle%20cx%3D%27118%27%20cy%3D%27190%27%20r%3D%271.2800000000000002%27%20fill%3D%27%23deb052%27%20fill-opacity%3D%270.35%27%2F%3E%3Ccircle%20cx%3D%27330%27%20cy%3D%27170%27%20r%3D%271.6%27%20fill%3D%27%23deb052%27%20fill-opacity%3D%270.35%27%2F%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%27250%27%20r%3D%271.4400000000000002%27%20fill%3D%27%23deb052%27%20fill-opacity%3D%270.35%27%2F%3E%3Ccircle%20cx%3D%27370%27%20cy%3D%27240%27%20r%3D%271.2800000000000002%27%20fill%3D%27%23deb052%27%20fill-opacity%3D%270.35%27%2F%3E%3Ccircle%20cx%3D%27240%27%20cy%3D%27210%27%20r%3D%271.1199999999999999%27%20fill%3D%27%23deb052%27%20fill-opacity%3D%270.35%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%27150%27%20r%3D%271.1199999999999999%27%20fill%3D%27%23deb052%27%20fill-opacity%3D%270.35%27%2F%3E%3Ccircle%20cx%3D%27300%27%20cy%3D%27120%27%20r%3D%271.1199999999999999%27%20fill%3D%27%23deb052%27%20fill-opacity%3D%270.35%27%2F%3E%20%3Cpath%20d%3D%27M342%2044%20A26%2026%200%201%200%20366%2084%20A20%2020%200%201%201%20342%2044%20Z%27%20fill%3D%27%23deb052%27%20fill-opacity%3D%270.22%27%2F%3E%20%3Cpath%20d%3D%27M0%20420%20L50%20388%20L95%20404%20L150%20360%20L200%20396%20L250%20372%20L300%20404%20L350%20366%20L400%20390%20L400%20500%20L0%20500%20Z%27%20fill%3D%27%23ffffff%27%20fill-opacity%3D%270.035%27%2F%3E%20%3Cpath%20d%3D%27M0%20456%20Q70%20420%20130%20448%20Q190%20418%20250%20452%20Q320%20426%20400%20450%20L400%20500%20L0%20500%20Z%27%20fill%3D%27%23ffffff%27%20fill-opacity%3D%270.045%27%2F%3E%3C%2Fsvg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.mg-page.mg-theme-field {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20500%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cpath%20d%3D%27M0%20500%20Q-5%20487%20-8%20474%20M19%20500%20Q16%20483.5%2014.2%20467%20M38%20500%20Q37%20480%2036.4%20460%20M48%20500%20Q49%20476.5%2049.6%20453%20M67%20500%20Q70%20473%2071.8%20446%20M86%20500%20Q91%20484.5%2094%20469%20M96%20500%20Q92%20481%2089.6%20462%20M115%20500%20Q113%20477.5%20111.8%20455%20M134%20500%20Q134%20474%20134%20448%20M144%20500%20Q146%20485.5%20147.2%20471%20M163%20500%20Q167%20482%20169.4%20464%20M182%20500%20Q177%20478.5%20174%20457%20M192%20500%20Q189%20475%20187.2%20450%20M211%20500%20Q210%20486.5%20209.4%20473%20M230%20500%20Q231%20483%20231.6%20466%20M240%20500%20Q243%20479.5%20244.8%20459%20M259%20500%20Q264%20476%20267%20452%20M278%20500%20Q274%20472.5%20271.6%20445%20M288%20500%20Q286%20484%20284.8%20468%20M307%20500%20Q307%20480.5%20307%20461%20M326%20500%20Q328%20477%20329.2%20454%20M336%20500%20Q340%20473.5%20342.4%20447%20M355%20500%20Q350%20485%20347%20470%20M374%20500%20Q371%20481.5%20369.2%20463%20M384%20500%20Q383%20478%20382.4%20456%20M403%20500%20Q404%20474.5%20404.6%20449%27%20fill%3D%27none%27%20stroke%3D%27%233e6b35%27%20stroke-opacity%3D%270.14%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%2F%3E%20%3Cg%20transform%3D%27translate(34%20500)%20rotate(14)%20scale(1)%27%20fill%3D%27none%27%20stroke%3D%27%233e6b35%27%20stroke-opacity%3D%270.13%27%3E%20%3Cpath%20d%3D%27M0%200%20Q4%20-60%200%20-120%27%20stroke-width%3D%271.6%27%2F%3E%20%3Cpath%20d%3D%27M1%20-12%20Q15.6%20-20%2026.0%20-16%20M-1%20-12%20Q-15.6%20-20%20-26.0%20-16%27%20stroke-width%3D%271.3%27%2F%3E%3Cpath%20d%3D%27M1%20-24%20Q14.3%20-32%2023.8%20-28%20M-1%20-24%20Q-14.3%20-32%20-23.8%20-28%27%20stroke-width%3D%271.3%27%2F%3E%3Cpath%20d%3D%27M1%20-36%20Q13.0%20-44%2021.6%20-40%20M-1%20-36%20Q-13.0%20-44%20-21.6%20-40%27%20stroke-width%3D%271.3%27%2F%3E%3Cpath%20d%3D%27M1%20-48%20Q11.6%20-56%2019.4%20-52%20M-1%20-48%20Q-11.6%20-56%20-19.4%20-52%27%20stroke-width%3D%271.3%27%2F%3E%3Cpath%20d%3D%27M1%20-60%20Q10.3%20-68%2017.2%20-64%20M-1%20-60%20Q-10.3%20-68%20-17.2%20-64%27%20stroke-width%3D%271.3%27%2F%3E%3Cpath%20d%3D%27M1%20-72%20Q9.0%20-80%2015.0%20-76%20M-1%20-72%20Q-9.0%20-80%20-15.0%20-76%27%20stroke-width%3D%271.3%27%2F%3E%3Cpath%20d%3D%27M1%20-84%20Q7.7%20-92%2012.8%20-88%20M-1%20-84%20Q-7.7%20-92%20-12.8%20-88%27%20stroke-width%3D%271.3%27%2F%3E%3Cpath%20d%3D%27M1%20-96%20Q6.4%20-104%2010.6%20-100%20M-1%20-96%20Q-6.4%20-104%20-10.6%20-100%27%20stroke-width%3D%271.3%27%2F%3E%3Cpath%20d%3D%27M1%20-108%20Q5.0%20-116%208.4%20-112%20M-1%20-108%20Q-5.0%20-116%20-8.4%20-112%27%20stroke-width%3D%271.3%27%2F%3E%3C%2Fg%3E%20%3Cpath%20d%3D%27M330%2070%20Q360%2040%20392%2052%20Q376%2088%20330%2070%20Z%20M330%2070%20L392%2052%27%20fill%3D%27%233e6b35%27%20fill-opacity%3D%270.07%27%20stroke%3D%27%233e6b35%27%20stroke-opacity%3D%270.13%27%20stroke-width%3D%271.2%27%2F%3E%3C%2Fsvg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
/* @period-report-render:end */

/* 리포트 리더 → 모먼트 코멘트 창. 서버 렌더러가 가져가는 구간 밖에 둔다 — 안에 두면 공유 이미지 버전이 바뀐다.
   리더 안에 붙는 층이라 리더 폭·색(--mg-*)을 그대로 따른다. 바텀시트가 아니라 가운데 뜨는 창이다.
   키보드가 올라오면(웹) 그만큼 아래를 띄워 남은 높이의 가운데에 선다 */
.pr-composer {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 12px calc(12px + var(--ime-fixed-bottom, 0px));
    background: rgba(28, 26, 23, 0.45);
}
.pr-composer.hidden {
    display: none;
}
.pr-composer__sheet {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 400px;
    max-height: 100%;
    overflow-y: auto;
    /* 바깥 여백(배경 12 + 창 14)이 두꺼우면 입력칸이 좁아져 답답해 보인다 — 옆은 얇게 */
    padding: 20px 14px 14px;
    border-radius: 20px;
    background: var(--mg-paper);
    box-shadow: 0 12px 32px rgba(28, 26, 23, 0.25);
    color: var(--mg-ink);
}
.pr-composer__title {
    font-size: 17px;
    font-weight: 700;
}
.pr-composer__hint {
    margin-top: -6px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--mg-dim);
}
/* 하루기록 소감칸(7rem)보다 조금 넉넉하게 — 88px·14px 일 때 서너 단어만 적어도 꽉 차 보였다 */
.pr-composer__input {
    width: 100%;
    min-height: 132px;
    padding: 12px 14px;
    border: 1px solid var(--mg-rule);
    border-radius: 14px;
    background: #fff;
    color: #1e293b;
    font-size: 15px;
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: anywhere;
    resize: none;
    outline: none;
}
.pr-composer__input::placeholder {
    color: #a8a295;
}
.pr-composer__input:focus {
    border-color: var(--mg-ink);
}
.pr-composer__count {
    margin-top: -6px;
    text-align: right;
    font-size: 12px;
    color: var(--mg-dim);
}
.pr-composer__actions {
    display: flex;
    gap: 8px;
}
.pr-composer__actions > .mealog-btn {
    flex: 1 1 0;
    min-width: 0;
}
/* 모먼트 「수정하기」 코멘트 창 — 리더 밖에 body 로 붙으므로 화면 전체를 덮고 잡지 색을 스스로 갖는다
   (period-report-comment-edit.js). 피드 ⋮ 메뉴(z-report-sheet)보다 위 */
.pr-composer--standalone {
    --mg-paper: #f4f1ea;
    --mg-ink: #1c1a17;
    --mg-dim: #8b857a;
    --mg-rule: #d8d2c4;
    position: fixed;
    z-index: calc(var(--z-report-sheet, 580) + 10);
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--ime-fixed-bottom, 0px));
}

#dashboardView.dashboard-view-v2 .dashboard-comment-zone__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--green-deep, #2d9f74);
    margin-bottom: 10px;
}
#dashboardView.dashboard-view-v2 .dashboard-insight-period-shared .dashboard-insight-period-wrap,
#dashboardView.dashboard-view-v2 .dashboard-comment-zone .dashboard-insight-period-wrap {
    margin-bottom: 0;
}
#dashboardView.dashboard-view-v2 .dashboard-insight-period-shared .dashboard-period-nav,
#dashboardView.dashboard-view-v2 .dashboard-insight-period-shared #periodNavigator,
#dashboardView.dashboard-view-v2 .dashboard-comment-zone .dashboard-period-nav,
#dashboardView.dashboard-view-v2 .dashboard-comment-zone #periodNavigator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    background: transparent;
    border: none;
    padding: 0;
    min-height: 2rem;
    width: 100%;
}
#dashboardView.dashboard-view-v2 .dashboard-insight-period-shared #periodNavigator.hidden,
#dashboardView.dashboard-view-v2 .dashboard-comment-zone #periodNavigator.hidden {
    display: none;
}
#dashboardView.dashboard-view-v2 .dashboard-insight-period-shared .dashboard-period-nav button,
#dashboardView.dashboard-view-v2 .dashboard-insight-period-shared #periodNavigator #periodPrevBtn,
#dashboardView.dashboard-view-v2 .dashboard-insight-period-shared #periodNavigator #periodNextBtn,
#dashboardView.dashboard-view-v2 .dashboard-comment-zone .dashboard-period-nav button,
#dashboardView.dashboard-view-v2 .dashboard-comment-zone #periodNavigator #periodPrevBtn,
#dashboardView.dashboard-view-v2 .dashboard-comment-zone #periodNavigator #periodNextBtn {
    width: 28px;
    height: 28px;
    border: 0;
    background: rgba(255, 255, 255, 0.7);
    color: var(--muted, #7a7268);
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 12px;
}
#dashboardView.dashboard-view-v2 .dashboard-insight-period-shared #periodDisplay,
#dashboardView.dashboard-view-v2 .dashboard-insight-period-shared .dashboard-period-nav__label,
#dashboardView.dashboard-view-v2 .dashboard-comment-zone #periodDisplay,
#dashboardView.dashboard-view-v2 .dashboard-comment-zone .dashboard-period-nav__label {
    flex: 1;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink, #241f1c);
    min-height: 0;
}
#dashboardView.dashboard-view-v2 .dashboard-comment-main {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
#dashboardView.dashboard-view-v2 .dashboard-comment-aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-shrink: 0;
    width: 72px;
}
/* 참견 캐릭터 버튼: 56×72 카드. MEALOG만 내부 아이콘 박스, 선택 캐릭터는 풀블리드 */
#dashboardView.dashboard-view-v2 .dashboard-comment-char.insight-character-btn,
#dashboardView.dashboard-view-v2 .dashboard-comment-char {
    width: 56px;
    height: 72px;
    min-width: 56px;
    min-height: 72px;
    max-width: 56px;
    max-height: 72px;
    border-radius: 16px;
    background: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    cursor: pointer;
    border: 1px solid rgba(167, 243, 208, 0.8);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}
#dashboardView.dashboard-view-v2 .dashboard-comment-char__icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    overflow: hidden;
    border-radius: inherit;
}
/* 기본 MEALOG만 내부 아이콘 박스 표시 */
#dashboardView.dashboard-view-v2 .dashboard-comment-char--mealog .insight-character-icon-box,
#dashboardView.dashboard-view-v2 .dashboard-comment-char #insightCharacterIcon.mealog-character-m .insight-character-icon-box {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
    flex-shrink: 0;
    background: #fff;
    border: 0;
    box-sizing: border-box;
}
#dashboardView.dashboard-view-v2 .dashboard-comment-char--mealog #insightCharacterIcon img,
#dashboardView.dashboard-view-v2 .dashboard-comment-char #insightCharacterIcon.mealog-character-m img {
    object-fit: contain;
    border-radius: 0;
    filter: none;
}
/* 캐릭터 선택 후: 아이콘 박스 숨김 · 이미지/이모지가 카드 전체 */
#dashboardView.dashboard-view-v2 .dashboard-comment-char--picked .insight-character-icon-box,
#dashboardView.dashboard-view-v2 .dashboard-comment-char #insightCharacterIcon:not(.mealog-character-m) .insight-character-icon-box {
    display: none !important;
}
#dashboardView.dashboard-view-v2 .dashboard-comment-char--picked #insightCharacterIcon,
#dashboardView.dashboard-view-v2 .dashboard-comment-char #insightCharacterIcon:not(.mealog-character-m) {
    width: 100%;
    height: 100%;
}
#dashboardView.dashboard-view-v2 .dashboard-comment-char--picked img,
#dashboardView.dashboard-view-v2 .dashboard-comment-char #insightCharacterIcon:not(.mealog-character-m) img,
#dashboardView.dashboard-view-v2 .dashboard-comment-char__icon:not(.mealog-character-m) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    filter: none;
    display: block;
}
#dashboardView.dashboard-view-v2 .dashboard-comment-bubble-wrap {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#dashboardView.dashboard-view-v2 .dashboard-comment-zone #insightBubble.insight-bubble,
#dashboardView.dashboard-view-v2 .dashboard-comment-zone .insight-bubble {
    background: #fff !important;
    border: 1px solid rgba(167, 243, 208, 0.9) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    border-radius: 14px !important;
    width: 100%;
    min-height: 72px;
    padding: 10px 12px;
}
#dashboardView.dashboard-view-v2 .dashboard-comment-zone .insight-bubble-header {
    border-bottom: none;
    margin-bottom: 4px;
    padding: 0;
}
#dashboardView.dashboard-view-v2 .dashboard-comment-zone #insightCharacterName.insight-character-name {
    color: var(--green-deep, #2d9f74);
    font-size: 12px;
    font-weight: 700;
}
#dashboardView.dashboard-view-v2 .dashboard-comment-zone #insightTextContent.insight-text-content,
#dashboardView.dashboard-view-v2 .dashboard-comment-zone .insight-text-content {
    color: var(--ink-2, #4f4841) !important;
    font-size: 13.5px;
    line-height: 1.5;
}
#dashboardView.dashboard-view-v2 .dashboard-comment-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 0;
    padding-left: 0;
    width: 100%;
}
#dashboardView.dashboard-view-v2 .dashboard-mini-btn {
    border: 1px solid rgba(167, 243, 208, 0.9);
    background: #fff;
    color: var(--ink-2, #4f4841);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 8px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: auto;
    min-width: 64px;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
}
#dashboardView.dashboard-view-v2 .dashboard-mini-btn [data-lucide],
#dashboardView.dashboard-view-v2 .dashboard-mini-btn .lucide {
    width: 0.85rem;
    height: 0.85rem;
}
#dashboardView.dashboard-view-v2 .dashboard-mini-btn--primary {
    background: var(--green, #3cb889);
    border-color: var(--green, #3cb889);
    color: #fff;
}
#dashboardView.dashboard-view-v2 .dashboard-mini-btn.hidden,
#dashboardView.dashboard-view-v2 .dashboard-comment-actions .insight-share-btn.hidden {
    display: none;
}
#dashboardView.dashboard-view-v2 .dashboard-kpi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}
#dashboardView.dashboard-view-v2 .dashboard-kpi {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(167, 243, 208, 0.7);
    border-radius: 12px;
    padding: 10px 12px;
}
#dashboardView.dashboard-view-v2 .dashboard-kpi__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted, #7a7268);
    margin-bottom: 4px;
}
#dashboardView.dashboard-view-v2 .dashboard-kpi__value {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink, #241f1c);
    line-height: 1.2;
}
#dashboardView.dashboard-view-v2 .dashboard-kpi__value span:not(#mealRecordCount):not(#snackRecordCount) {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted, #7a7268);
}
#dashboardView.dashboard-view-v2 .dashboard-kpi__bar {
    height: 4px;
    background: #d1fae5;
    border-radius: 999px;
    margin-top: 8px;
    overflow: hidden;
}
#dashboardView.dashboard-view-v2 .dashboard-kpi__bar i {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--green, #3cb889);
    border-radius: 999px;
    transition: width 0.25s ease;
}

/* 분석 구역 — page-deep 메뉴 캔버스 + 흰 카드 */
#dashboardView.dashboard-view-v2 .dashboard-analysis-zone {
    /* 네비 여백은 body padding — 존 하단 5.5rem 이중 여백 제거 */
    padding: 14px 14px 12px;
    background: var(--page-deep, #faf6f2);
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-zone__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--muted, #7a7268);
    margin: 0 2px 8px;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-tab-card {
    background: #fff !important;
    border: 1px solid var(--line, #d0c6ba) !important;
    box-shadow: 0 1px 0 rgba(43, 40, 37, 0.06) !important;
    border-radius: 14px !important;
    padding: 4px !important;
    margin-top: 0;
    margin-bottom: 8px;
}
/* 식사/간식 슬롯 필터 — 타입 탭과 분리, 우측 정렬·콘텐츠 폭 */
#dashboardView.dashboard-view-v2 .dashboard-analysis-slot-filter-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: -2px 0 10px;
    min-height: 0;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-slot-filter-wrap.hidden {
    display: none;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-slot-tabs {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 2px;
    box-sizing: border-box;
    background: transparent;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-slot-tabs.hidden {
    display: none;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-slot-tab {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 5px 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--muted, #7a7268);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-slot-tab.active,
#dashboardView.dashboard-view-v2 .dashboard-analysis-slot-tab[aria-selected="true"] {
    background: var(--green, #3cb889);
    border-color: var(--green-deep, #2d9f74);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(45, 159, 116, 0.28);
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-slot-tab:hover {
    color: var(--ink-2, #4f4841);
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-slot-tab.active:hover {
    background: var(--green-deep, #2d9f74);
    border-color: var(--green-deep, #2d9f74);
    color: #fff;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-top-icons-card {
    background: #fff !important;
    border: 1px solid var(--line, #d0c6ba) !important;
    box-shadow: 0 1px 0 rgba(43, 40, 37, 0.06) !important;
    border-radius: 14px !important;
    /* 아래 분석 카드(ui-card-pad)와 동일 좌우 여백 */
    padding: 0.625rem 1rem 0.625rem !important;
    margin-top: 0;
    margin-bottom: 12px;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-top-icons-title {
    margin: 0 0 10px;
    /* analytics-card-head 와 동일 좌측 인셋 → "어떻게/무엇을" 라벨과 정렬 */
    padding-left: 12px;
    padding-right: 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--ink, #241f1c);
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-top-icons-card.hidden,
#dashboardView.dashboard-view-v2 .dashboard-analysis-top-icons-card[hidden] {
    display: none !important;
}
/* 분석: 식사·간식 기록 KPI (패턴 박스 아래) */
#dashboardView.dashboard-view-v2 .dashboard-analysis-kpi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 12px;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-kpi {
    background: #fff;
    border: 1px solid var(--line, #d0c6ba);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 1px 0 rgba(43, 40, 37, 0.06);
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-kpi__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-kpi__label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted, #7a7268);
    letter-spacing: -0.01em;
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: 6px;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-kpi--count-only {
    display: flex;
    align-items: center;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-kpi--count-only .dashboard-analysis-kpi__line {
    width: 100%;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-kpi--count-only .dashboard-analysis-kpi__value {
    margin-left: auto;
    text-align: right;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-kpi__value {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink, #241f1c);
    line-height: 1.2;
    white-space: nowrap;
    text-align: right;
    min-width: 0;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-kpi__value span:not(#mealRecordCount):not(#snackRecordCount) {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted, #7a7268);
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-kpi__bar {
    height: 4px;
    background: #e8f5ef;
    border-radius: 999px;
    margin-top: 8px;
    overflow: hidden;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-kpi__bar i {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--green, #3cb889);
    border-radius: 999px;
    transition: width 0.25s ease;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-top-icons {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 4px;
    margin: 0;
    padding: 0;
    border-top: 0;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-top-icons.hidden,
#dashboardView.dashboard-view-v2 .dashboard-analysis-top-icons[hidden] {
    display: none !important;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-top-icon {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-top-icon__badge {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: transparent;
    flex-shrink: 0;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-top-icon__badge > img {
    width: 42px;
    height: 42px;
    display: block;
    object-fit: contain;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-top-icon__badge > svg {
    width: 42px;
    height: 42px;
    display: block;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-top-icon__badge--fa {
    background: #f1f5f9;
    font-size: 16px;
    line-height: 1;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-top-icon__cat {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted, #7a7268);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-top-icon__val {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink, #241f1c);
    letter-spacing: -0.02em;
    line-height: 1.2;
    max-width: 100%;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    min-width: 0;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-top-icon__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-top-icon__sep {
    color: var(--muted, #7a7268);
    font-weight: 600;
    flex-shrink: 0;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-top-icon__count {
    color: var(--muted, #7a7268);
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-top-icon--empty .dashboard-analysis-top-icon__badge {
    background: #f1f5f9;
    border: 1px dashed #e2e8f0;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-top-icon--empty .dashboard-analysis-top-icon__val {
    color: var(--muted, #7a7268);
    font-weight: 600;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 0;
    border-radius: 0;
    background: transparent;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-tab {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    border-radius: 10px;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    min-height: 2rem;
    color: var(--muted, #7a7268);
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-tab:hover {
    color: var(--ink-2, #4f4841);
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-tab--active,
#dashboardView.dashboard-view-v2 .dashboard-analysis-tab.dashboard-analysis-tab--active {
    background: var(--green-soft, #eaf8f2);
    color: var(--ink, #241f1c);
    font-weight: 600;
}
#dashboardView.dashboard-view-v2 .dashboard-analysis-tab--active:hover {
    color: var(--ink, #241f1c);
}
#dashboardView.dashboard-view-v2 #bestAnalysisSection,
#dashboardView.dashboard-view-v2 #mainAnalysisSection,
#dashboardView.dashboard-view-v2 #snackAnalysisSection,
#dashboardView.dashboard-view-v2 #healthAnalysisSection {
    margin-top: 0;
}
#dashboardView.dashboard-view-v2 #mainAnalysisSection .card,
#dashboardView.dashboard-view-v2 #snackAnalysisSection .card,
#dashboardView.dashboard-view-v2 #healthAnalysisSection .card,
#dashboardView.dashboard-view-v2 #bestAnalysisSection .card {
    border: 1px solid var(--line, #d0c6ba);
    border-radius: 16px;
    box-shadow: 0 1px 0 rgba(43, 40, 37, 0.06), 0 6px 18px rgba(43, 40, 37, 0.07);
    margin-top: 0;
    margin-bottom: 10px;
    background: #fff;
}
/* 베스트: 하단 편향 대신 사방으로 고른 그림자 */
#dashboardView.dashboard-view-v2 #bestAnalysisSection .card {
    box-shadow: 0 0 12px rgba(43, 40, 37, 0.1);
}
#dashboardView.dashboard-view-v2 #mainAnalysisSection .card:first-child,
#dashboardView.dashboard-view-v2 #snackAnalysisSection .card:first-child,
#dashboardView.dashboard-view-v2 #healthAnalysisSection .card:first-child {
    border-top: 1px solid rgba(226, 232, 240, 0.7);
}
#dashboardView.dashboard-view-v2 .dashboard-card-hint {
    font-weight: 500;
    color: var(--muted, #7a7268);
    font-size: 12px;
    margin-left: 6px;
}
/* 분석 상세 공통 팝업 — 어떻게/무엇을/함께 탭 */
#detailModal .detail-modal-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin: 4px 16px 0;
    padding: 4px;
    border-radius: 14px;
    border: 1px solid var(--line, #d0c6ba);
    background: #fff;
    box-shadow: 0 1px 0 rgba(43, 40, 37, 0.06);
    box-sizing: border-box;
    flex-shrink: 0;
}
#detailModal .detail-modal-tabs.hidden {
    display: none !important;
}
#detailModal .detail-modal-tab {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    border-radius: 10px;
    padding: 8px 4px;
    min-height: 2rem;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--muted, #7a7268);
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
#detailModal .detail-modal-tab:hover {
    color: var(--ink-2, #4f4841);
}
#detailModal .detail-modal-tab--active,
#detailModal .detail-modal-tab[aria-selected="true"] {
    background: var(--green-soft, #eaf8f2);
    color: var(--ink, #241f1c);
}
#detailModal #detailContent {
    padding-top: 0.75rem;
}

/* 분석 '무엇을' 카드의 축 전환 (형태 ↔ 종류) — 라벨과 한 덩어리로 왼쪽에 붙는다.
   ui-card-head 가 space-between 이라 라벨·스위치를 감싸지 않으면 스위치가 가운데로 뜬다. */
#dashboardView.dashboard-view-v2 .analysis-axis-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
#dashboardView.dashboard-view-v2 .analysis-axis-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: var(--bg-soft, #f1efe9);
}
#dashboardView.dashboard-view-v2 .analysis-axis-switch__btn {
    border: 0;
    background: transparent;
    color: var(--muted, #7a7268);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 9px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
#dashboardView.dashboard-view-v2 .analysis-axis-switch__btn.is-active {
    background: #fff;
    color: var(--green, #3cb889);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* 자동 분류라는 사실은 종류 모드에서만 말한다 — 형태 축은 사용자가 고른 값이다 */
#dashboardView.dashboard-view-v2 .analysis-axis-note {
    margin-top: 6px;
    padding-left: 12px;
    padding-right: 22px;
    font-size: 11px;
    color: var(--muted, #7a7268);
}

#dashboardView.dashboard-view-v2 .dashboard-detail-link {
    border: 0;
    background: transparent;
    color: var(--green, #3cb889);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
#dashboardView.dashboard-view-v2 .dashboard-more-charts {
    border: 1px dashed var(--line, #d0c6ba);
    background: #fff;
    border-radius: 14px;
    padding: 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted, #7a7268);
    cursor: pointer;
    width: 100%;
    margin-bottom: 8px;
}
#dashboardView.dashboard-view-v2 .dashboard-more-charts.is-open {
    margin-bottom: 10px;
}
#dashboardView.dashboard-view-v2 .dashboard-extra-charts[hidden] {
    display: none;
}
#dashboardView.dashboard-view-v2 .analytics-chart-wrap .dashboard-stack-bar {
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
}
#dashboardView.dashboard-view-v2 .analytics-chart-wrap .dashboard-stack-bar > div {
    height: 100%;
}
#dashboardView.dashboard-view-v2 .dashboard-chart-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    align-items: start;
}
#dashboardView.dashboard-view-v2 .dashboard-chart-legend-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
#dashboardView.dashboard-view-v2 .dashboard-chart-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-2, #4f4841);
    min-width: 0;
}
#dashboardView.dashboard-view-v2 .dashboard-chart-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
#dashboardView.dashboard-view-v2 .dashboard-chart-legend-row .name {
    flex: 1;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#dashboardView.dashboard-view-v2 .dashboard-chart-legend-row .pct {
    font-weight: 700;
    color: var(--ink, #241f1c);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    /* 항목(이름)은 왼쪽 유지, 이름↔% 간격은 기존 대비 90% */
    margin-right: 10%;
}
#dashboardView.dashboard-view-v2 .dashboard-vital-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 8px;
}
#dashboardView.dashboard-view-v2 .dashboard-vital-val {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ink, #241f1c);
    line-height: 1.2;
}
#dashboardView.dashboard-view-v2 .dashboard-vital-val span:not([id]) {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted, #7a7268);
    margin-left: 4px;
}
#dashboardView.dashboard-view-v2 .dashboard-vital-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
#dashboardView.dashboard-view-v2 .dashboard-vital-delta {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--green, #3cb889);
}
#dashboardView.dashboard-view-v2 .dashboard-vital-val .dashboard-vital-delta {
    margin-left: 8px;
    letter-spacing: 0;
}
#dashboardView.dashboard-view-v2 .dashboard-vital-delta.is-up {
    color: #e11d48;
}
#dashboardView.dashboard-view-v2 .health-vitals-view-bar {
    margin-top: 2px;
}
#dashboardView.dashboard-view-v2 .dashboard-best-card .dashboard-best-card-head {
    justify-content: flex-end;
    margin-bottom: 0.375rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line, #d0c6ba);
}
#dashboardView.dashboard-view-v2 .dashboard-best-list .dashboard-best-item {
    display: grid;
    grid-template-columns: 22px 56px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line, #d0c6ba);
}
#dashboardView.dashboard-view-v2 .dashboard-best-list .dashboard-best-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
#dashboardView.dashboard-view-v2 .dashboard-best-list .dashboard-best-item:first-child {
    padding-top: 0;
}
#dashboardView.dashboard-view-v2 .dashboard-best-rank {
    display: block;
    width: 22px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink, #241f1c);
}
#dashboardView.dashboard-view-v2 .dashboard-best-thumb {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    background: #e2e8f0;
}
#dashboardView.dashboard-view-v2 .dashboard-best-thumb--empty {
    display: grid;
    place-items: center;
    color: var(--muted, #7a7268);
    font-size: 18px;
}
#dashboardView.dashboard-view-v2 .dashboard-best-meta .slot {
    font-size: 12px;
    color: var(--muted, #7a7268);
    font-weight: 500;
    margin-bottom: 2px;
}
#dashboardView.dashboard-view-v2 .dashboard-best-meta .name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink, #241f1c);
}
#dashboardView.dashboard-view-v2 .dashboard-best-stars {
    color: #fbbf24;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
/*
 * 베스트 순서 손잡이 — 설정 시트와 같은 부품·같은 낯(⠿).
 * 손가락이 닿는 넓이는 36px x 행 높이로, 글리프는 작게(HIG 44pt 권고에 맞춰
 * 영역만 넓힌다). 늘어난 만큼은 음수 마진으로 되돌려 별점이 안 밀리게 한다.
 */
#dashboardView.dashboard-view-v2 .dashboard-best-drag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 2.25rem;
    margin: -10px -0.5rem -10px 0;
    border-radius: 0.625rem;
    color: #475569;
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}
#dashboardView.dashboard-view-v2 .dashboard-best-drag:active {
    background: rgba(15, 23, 42, 0.06);
}
#dashboardView.dashboard-view-v2 .dashboard-best-drag:focus-visible {
    outline: 2px solid var(--green, #059669);
    outline-offset: 2px;
}
#dashboardView.dashboard-view-v2 .dashboard-best-drag [data-lucide],
#dashboardView.dashboard-view-v2 .dashboard-best-drag svg {
    width: 15px;
    height: 15px;
    stroke-width: 2;
}
/* 끄는 동안은 목록 배경 위로 살짝 떠 보이게 */
#dashboardView.dashboard-view-v2 .dashboard-best-item--dragging {
    background: var(--card, #fff);
    border-radius: 0.75rem;
}

/* 레거시 선택자 유지 (비-v2 또는 공유 블록) */
#dashboardView > .dashboard-chrome-subtabs + .card,
#dashboardView .dashboard-insight-chrome .dashboard-insight-card {
    margin-top: 0 !important;
}
#dashboardView .dashboard-insight-chrome .dashboard-insight-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}
#dashboardView .dashboard-insight-chrome .dashboard-chrome-subtabs {
    background: transparent !important;
}
#dashboardView .dashboard-insight-chrome .dashboard-insight-period-wrap {
    margin-bottom: 0.25rem;
}
#dashboardView .dashboard-insight-chrome #periodNavigator {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    min-height: 0;
    margin-top: 0.1875rem;
    gap: 0.375rem;
}
#dashboardView .dashboard-insight-chrome #periodNavigator #periodPrevBtn,
#dashboardView .dashboard-insight-chrome #periodNavigator #periodNextBtn {
    width: 1.375rem;
    height: 1.375rem;
}
#dashboardView .dashboard-insight-chrome #periodDisplay {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink-2);
    min-height: 0.875rem;
}
#dashboardView .dashboard-insight-chrome .insight-area {
    align-items: stretch;
}
#dashboardView .dashboard-insight-chrome .insight-area > .flex-1 {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#dashboardView .dashboard-insight-chrome #insightBubble.insight-bubble,
#dashboardView .dashboard-insight-chrome .insight-bubble {
    background: var(--green-soft);
    border: 1px solid var(--green-mute);
    box-shadow: none;
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    min-height: 0;
}
#dashboardView .dashboard-insight-chrome .insight-character-btn:has(#insightCharacterIcon.mealog-character-m) .insight-character-icon-box {
    background: var(--page);
}
#dashboardView .dashboard-insight-chrome .sticker-badge {
    background: var(--page);
    border: 1px solid var(--line);
    border-radius: 1rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    margin-top: 0.875rem;
    margin-bottom: 0;
}
#dashboardView .dashboard-insight-chrome #mealRecordPercent {
    color: var(--green-deep);
    opacity: 1;
}
#dashboardView .dashboard-analysis-tab-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
#dashboardView .dashboard-analysis-tabs {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 9999px;
    background: #e8ecf3;
}
#dashboardView .dashboard-analysis-tab {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    border-radius: 9999px;
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #94a3b8;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
#dashboardView .dashboard-analysis-tab:hover {
    color: #64748b;
}
#dashboardView .dashboard-analysis-tab--active,
#dashboardView .dashboard-analysis-tab.dashboard-analysis-tab--active {
    background: var(--green);
    color: #ffffff;
    font-weight: 700;
}
#dashboardView .dashboard-analysis-tab--active:hover {
    color: #ffffff;
}
#dashboardView .dashboard-insight-card.ui-card-pad-lg {
    padding-top: 0.1875rem;
    padding-bottom: 0.5rem;
}
/* 베스트/식사/간식 탭과 식사카드 컨테이너 간격 (0.1125rem) */
#dashboardView #bestAnalysisSection,
#dashboardView #mainAnalysisSection,
#dashboardView #snackAnalysisSection {
    margin-top: 0.1125rem;
}
/* 식사/간식 분석 섹션 카드들 같은 박스처럼 보이게 */
#mainAnalysisSection .card,
#snackAnalysisSection .card {
    border-top: 1px solid #f1f5f9;
    margin-top: 0;
    margin-bottom: 0;
}
#mainAnalysisSection .card:first-child,
#snackAnalysisSection .card:first-child {
    border-top: none;
}
/* 베스트 식사/간식 카드 좌우 꽉 차게 */
#bestMealsContainer .best-meal-item {
    border-radius: 0 !important;
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    width: calc(100% + 2rem) !important;
}
/* 시안 v2: Best 항목도 카드 인셋 유지 */
#dashboardView.dashboard-view-v2 #bestMealsContainer .best-meal-item {
    border-radius: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}
/* 인사이트 영역 (트위터 스타일: 깔끔한 카드·타이포 위주) */
#insightBubble.insight-bubble,
.insight-bubble {
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    min-height: fit-content;
    padding: 0.5rem 1.25rem;
    background: var(--green-deep);
    border: none;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.insight-bubble-header {
    margin-bottom: 0.375rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
#insightCharacterName.insight-character-name {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
}
.insight-share-btn {
    padding: 0.25rem 0.5rem;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: transparent;
    transition: opacity 0.15s;
}
/* 밀당 말풍선 내 공유 버튼: 박스 없이 텍스트만 흰색 */
.insight-share-btn.insight-share-btn--default {
    background: transparent;
    color: #ffffff;
}
.insight-share-btn.insight-share-btn--default:hover {
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
}
.insight-share-btn.insight-share-btn--shared {
    background: #ffffff;
    color: var(--green);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.insight-share-btn.insight-share-btn--shared:hover {
    background: #f8fafc;
    color: var(--green-deep);
}
/* insight-share-btn 기본값 (다른 곳에서 클래스만 사용할 때) */
.insight-share-btn:not(.insight-share-btn--default):not(.insight-share-btn--shared) {
    color: #fff;
    background: var(--green);
}
.insight-share-btn:not(.insight-share-btn--default):not(.insight-share-btn--shared):hover {
    background: var(--green-deep);
}
.insight-share-btn:not(.insight-share-btn--default):not(.insight-share-btn--shared):active {
    background: #065f46;
}
#insightTextContent.insight-text-content,
.insight-text-content {
    line-height: 1.55;
    font-size: 13px;
    font-weight: 400;
    color: #ffffff;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    white-space: pre-line;
    overflow: visible;
    display: block;
}
.insight-character-btn {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}
/* 밀로그(MEALOG) 선택 시: 캐릭터 창 크기를 아이콘 박스에 맞춤
   (참견 v2 `.dashboard-comment-char` 는 아래 규칙에서 제외) */
.insight-character-btn:has(#insightCharacterIcon.mealog-character-m):not(.dashboard-comment-char) {
    width: 70px;
    height: 70px;
    min-width: 70px;
    min-height: 70px;
    border: none;
    box-sizing: border-box;
}
.insight-character-btn #insightCharacterIcon {
    color: var(--green-deep);
    overflow: visible;
}
/* MEALOG M: Fredoka 폰트, 흰색 텍스트 */
.insight-character-btn #insightCharacterIcon.mealog-character-m {
    font-family: 'Fredoka', sans-serif;
    color: #ffffff;
}
/* 캐릭터 아이콘: 밀로그 정사각형 70x70px 박스 (참견 v2는 별도 오버라이드) */
.insight-character-btn:not(.dashboard-comment-char) .insight-character-icon-box {
    width: 70px;
    height: 70px;
}
/* 밀로그 선택 시: 보더는 아이콘 박스 주변에만 1px 흰색 적용 (참견 v2 제외) */
.insight-character-btn:has(#insightCharacterIcon.mealog-character-m):not(.dashboard-comment-char) .insight-character-icon-box {
    border: 1px solid #ffffff;
    border-radius: 1rem;
    box-sizing: border-box;
    width: 70px;
    height: 70px;
}
.insight-character-btn:not(.dashboard-comment-char) #insightCharacterIcon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 1rem;
    filter: drop-shadow(1px 0 0 #fff)
            drop-shadow(-1px 0 0 #fff)
            drop-shadow(0 1px 0 #fff)
            drop-shadow(0 -1px 0 #fff)
            drop-shadow(1px 1px 0 #fff)
            drop-shadow(-1px 1px 0 #fff)
            drop-shadow(1px -1px 0 #fff)
            drop-shadow(-1px -1px 0 #fff);
}
.insight-comment-trigger {
    font-size: 12px;
    padding: 0.1875rem 0.5rem;
    color: #1e293b;
    background: #ffca2c;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.insight-comment-trigger:hover {
    background: #e6b828;
    border-color: rgba(0, 0, 0, 0.12);
}
.insight-comment-trigger:active {
    background: #d4a024;
}
.insight-page-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s;
}
.insight-page-dot.active {
    background: var(--color-primary);
    width: 8px;
    height: 8px;
}