/* ================================================================ 디자인 토큰
   색·간격·모서리·그림자는 여기 이름으로만 정하고, 아래 규칙에서는 var(--이름) 으로 쓴다.
   분홍 분위기(사용자 결정: 바꾸지 말 것)를 이루는 색도 여기서 한 번에 본다. 달력 색은 바꾸지 않는다. */
:root {
    /* 바탕 */
    --bg: #fff5f8;               /* 페이지 바탕 */
    --card: #ffffff;             /* 카드·입력칸·버튼 바탕 */
    --tint: #fff9fb;             /* 아주 옅은 분홍 — 표 머리 */
    --soft: #fcedf2;             /* 옅은 분홍 칸 — 빈 막대, 비교표 첫 칸 */
    --track: #fbe5ec;            /* 진행 막대의 빈 부분 */
    /* 글자 */
    --text: #2e2a2c;
    /* 흐린 글자 — 예전 #9a8b90 은 분홍 바탕에서 대비 3:1 남짓이라 잘 안 읽혔다. 같은 색조로 어둡게 해
       바탕·흰 카드·칩·안내 상자·회색 배지·일별/월별 전환 바탕 모두 4.5:1 이상 (2026-09-26, 09-27 조금 더) */
    --muted: #71666a;
    /* 선 */
    --line: #f5dfe6;
    /* 선분홍 */
    --accent: #e05c86;           /* 채우기·테두리 */
    /* 분홍 글자 — 흰 바탕뿐 아니라 옅은 분홍 바탕(칩·안내 상자) 위에서도 4.5:1 이상 (예전 #c7426e 는 칩 위에서 4.0).
       글자에는 --accent 가 아니라 이것을 쓴다 */
    --accent-strong: #b63c65;
    --accent-soft: #fde6ee;      /* 옅은 분홍 바탕 — 칩·안내 상자 */
    --accent-light: #f08aac;     /* 입력칸 포커스 테두리, 오늘 표시 */
    --accent-pale: #f7a8c1;      /* 사진 포커스 테두리, 로그인 카드 윗줄 */
    --accent-grad: linear-gradient(135deg, #f794b3 0%, #e05c86 100%);   /* 장식 — 진행 막대·D-day·탭 밑줄 */
    /* 흰 글자·✓ 가 얹히는 분홍(버튼·체크·고른 날·오늘) — 장식보다 한 단계 진하게. 흰 글자 대비 예전 2.1~3.5 → 2.7~4.2 */
    --button-grad: linear-gradient(135deg, #ec789c 0%, #ca5379 100%);
    /* 상태 */
    --danger: #c0392b;
    --success: #1f795b;          /* 초록 글자 (옅은 초록 배지 위 4.5:1) */
    --info: #2f5f96;
    --info-soft: #e2eefb;
    /* 배지: 옅은 바탕 + 진한 글자 (모두 4.5:1 이상). 분홍은 --accent-soft/--accent-strong, 파랑은 --info-soft/--info */
    --badge-gray-bg: #eeeaeb;
    --badge-gray: #6d686a;
    --badge-green-bg: #ddf2e9;
    --badge-orange-bg: #fdf0d8;
    --badge-orange: #926511;
    --badge-red-bg: #fdecea;
    /* 신랑·신부 */
    --groom: #3d6fb6;
    --bride: #e05c86;
    /* 달력 색 (바꾸지 않는다) */
    --c-wed: #e05c86;
    --c-ev: #3d6fb6;
    --c-todo: #d08a1e;
    --c-pay: #2e8b57;
    --sun: #d0453a;              /* 일요일 */
    --sat: #3d6fb6;              /* 토요일 */

    /* 간격 (4px 단위) — 카드 안쪽 여백은 --space-4 이고, 저장줄(.form-actions)이 그만큼 바깥으로 나간다 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    /* 글자 크기 (rem 은 16px 기준, 본문은 15px). 가장 작은 글씨도 11px 이상 — 예전 달력 공휴일 글씨는 약 9.9px.
       메모 편집기·메모 본문(.rich)과 장식(D-day·하트)은 따로 정한 크기를 그대로 쓴다 */
    --font-xs: 0.72rem;          /* 11.5px 배지·아주 작은 보조 글씨 */
    --font-sm: 0.85rem;          /* 작은 글씨 */
    --font-md: 0.9rem;           /* 입력칸 이름표·설명 */
    --font-lg: 1rem;             /* 소제목 */
    --font-xl: 1.15rem;          /* 강조 숫자·날짜 */
    --font-2xl: 1.4rem;          /* 화면 제목·큰 금액 */
    --font-3xl: 1.8rem;          /* 로그인 제목 */

    /* 모서리 */
    --radius: 12px;              /* 카드 */
    --radius-sm: 8px;            /* 입력칸·버튼 */
    --radius-pill: 999px;        /* 칩·배지·막대 */

    /* 그림자 */
    --shadow: 0 2px 12px rgba(224, 92, 134, .07);           /* 카드 */
    --shadow-button: 0 3px 10px rgba(224, 92, 134, .28);    /* 분홍 버튼 */
}

* { box-sizing: border-box; }
/* hidden 속성은 display 를 준 요소(label 등)에서도 항상 숨김 */
[hidden] { display: none !important; }

/* 바탕: 위쪽에 은은한 분홍빛 */
body {
    margin: 0;
    background:
        radial-gradient(900px 360px at 15% -80px, rgba(255, 196, 214, .45), transparent 70%),
        radial-gradient(800px 320px at 95% -60px, rgba(255, 214, 226, .5), transparent 70%),
        var(--bg);
    background-repeat: no-repeat;
    color: var(--text);
    /* Pretendard: templates/fragments.html 에서 불러온다. 조각이 오기 전·못 받으면 기기 기본 글꼴 */
    font: 15px/1.5 "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    -webkit-text-size-adjust: 100%;
    /* 한글은 낱말 단위로 줄을 바꾼다 ("날/짜를" 처럼 끊기지 않게). 한 낱말이 칸보다 길면 그때만 끊는다 */
    word-break: keep-all;
    overflow-wrap: break-word;
    /* 누를 때 번쩍이는 회색 대신 옅은 분홍 */
    -webkit-tap-highlight-color: rgba(224, 92, 134, .12);
}

a { color: var(--accent-strong); text-decoration: none; }
/* 선 아이콘 (templates/icons.html) — 옆 글자의 크기·색을 따라간다 */
.icon {
    width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon.solid { fill: currentColor; stroke: none; }
h1 { font-size: var(--font-2xl); margin: 0 0 var(--space-4); }
h3 { margin: 0; font-size: var(--font-lg); }

/* ---------------------------------------------------------------- 상단 메뉴 */
/* 반투명 흰색 + 분홍 밑줄. 앱으로 설치해 실행하면 아이폰 상단(노치) 영역만큼 여백 */
.nav {
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid #f7d9e3;
    position: sticky; top: 0; z-index: 10;
    padding-top: env(safe-area-inset-top);
}
.nav-inner { max-width: 960px; margin: 0 auto; }
.nav-top { display: flex; justify-content: space-between; align-items: center; padding: 10px var(--space-4) 0; }
.nav .brand { font-weight: 700; color: var(--accent-strong); letter-spacing: -0.2px; }
.env-badge {
    font-size: var(--font-xs); font-weight: 700; vertical-align: middle; margin-left: 6px;
    padding: 2px var(--space-2); border-radius: var(--radius-pill); background: #f0a020; color: #fff;
}
.nav-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; white-space: nowrap; }
.nav-actions button.link { font-size: inherit; }
.notice-card { background: var(--accent-soft); }   /* 테두리는 카드와 같은 옅은 선 */
.notice-card p { margin: 6px 0 0; }
.flash { background: #eaf6ee; border: 1px solid #b9dfc5; color: #276b3d; border-radius: var(--radius); padding: 10px 14px; margin-bottom: var(--space-4); }
.tabs { display: flex; gap: 2px; overflow-x: auto; padding: 0 var(--space-2); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
    padding: 10px var(--space-3); white-space: nowrap; color: var(--muted);
    border-bottom: 2px solid transparent;
}
.tabs a.on { color: var(--accent-strong); font-weight: 600; border-bottom: 3px solid transparent; border-image: var(--accent-grad) 1; }
/* 탭이 화면보다 길면(휴대폰) 가려진 쪽 끝을 흐리게 — 옆으로 넘기면 더 있다는 표시 (js/scroll-hint.js 가 붙인다) */
.tabs.more-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.tabs.more-left {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
}
.tabs.more-left.more-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

/* ---------------------------------------------------------------- 레이아웃 */
.container { max-width: 960px; margin: 0 auto; padding: var(--space-4); }
.container.narrow { max-width: 480px; }

.page-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.page-head h1 { margin: 0; }
.section-title { font-size: var(--font-lg); margin: var(--space-5) 0 var(--space-2); }
.card > .section-title:first-child { margin-top: 0; }

.card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4);
}
/* 카드류: 은은한 분홍 그림자 */
.card, .stat, .table-wrap, .cal, .memo, .month-card, .week-day, .photo-tile { box-shadow: var(--shadow); }
details.card summary, details.plain summary { cursor: pointer; font-weight: 600; }
details.card[open] summary { margin-bottom: var(--space-3); }
details.plain { margin-top: var(--space-3); }
details.plain[open] summary { margin-bottom: var(--space-2); }

.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 160px; }
.row.compact > * { flex: 0 1 auto; }
/* 짧은 칸 둘(셋)은 휴대폰에서도 한 줄에 나란히 (대관료·식대, 월세·관리비 등) */
.row.pair > *, .row.trio > * { flex: 1 1 0; min-width: 0; }
/* 긴 폼의 묶음 제목 (웨딩홀·집 후보) */
.form-section {
    margin: var(--space-2) 0 0; padding-top: var(--space-3); border-top: 1px dashed var(--line);
    font-size: var(--font-md); color: var(--accent-strong);
}
.row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }

/* ---------------------------------------------------------------- 폼 */
label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-md); color: var(--muted); }
label.check, label.radio { flex-direction: row; align-items: center; gap: 6px; color: var(--text); padding-bottom: 10px; }
.radio-group { display: flex; gap: var(--space-5); }
/* 체크박스·라디오도 분홍 */
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

/* 입력칸 글자는 16px — 아이폰은 그보다 작은 칸을 누르면 화면을 확대해 버린다.
   url·datetime-local 칸은 예전에 스타일이 없어 브라우저 기본 모양(13px)이었다. */
input[type=text], input[type=password], input[type=tel], input[type=number], input[type=url],
input[type=email], input[type=search], input[type=date], input[type=time], input[type=month],
input[type=datetime-local], textarea {
    font: inherit; font-size: 16px; color: var(--text); width: 100%;
    padding: 10px var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
}
textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
select {
    font: inherit; font-size: 16px; color: var(--text); width: 100%;   /* 16px: 아이폰 확대 방지 */
    padding: 10px var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
}
input:focus, textarea:focus { outline: 2px solid var(--accent-light); outline-offset: -1px; }
select:focus { outline-color: var(--accent-light); }
/* 금액 입력칸 아래의 '230만 원' (js/money.js) */
.money-hint { font-size: var(--font-sm); color: var(--muted); }
.money-hint:empty { display: none; }

button, .button {
    font: inherit; cursor: pointer; text-align: center; display: inline-block;
    padding: 10px var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--line);
    background: var(--card); color: var(--text);
    transition: transform .08s ease-out;
}
.button.small, button.small { padding: 6px var(--space-3); font-size: var(--font-sm); }
.button.tiny { padding: 3px var(--space-2); font-size: var(--font-xs); border-radius: 6px; }
/* 분홍 버튼: 화면의 대표 버튼 하나에만. 글자 그림자는 흰 글자를 조금 더 또렷하게 */
button.primary, .button.accent {
    background: var(--button-grad); border: 0; color: #fff; font-weight: 600;
    box-shadow: var(--shadow-button); text-shadow: 0 1px 1px rgba(140, 30, 70, .25);
}
button.primary:hover, .button.accent:hover { filter: brightness(1.04); }
/* 가벼운 분홍 버튼: 목록의 줄마다 되풀이되는 동작 (축의금 장부 '기록' 등) */
button.soft, .button.soft {
    background: var(--accent-soft); border: 1px solid #f3c3d3; color: var(--accent-strong); font-weight: 600;
}
button.soft:hover, .button.soft:hover { border-color: var(--accent); }
/* 누를 때 반응 (터치 화면): 버튼이 살짝 눌린다 */
@media (hover: none) {
    button:active, .button:active { transform: scale(.97); }
    a.card:active, a.stat:active, a.week-day:active, .month-jump a:active { filter: brightness(.97); }
    /* 메모 편집기의 버튼은 예전 그대로 (사용자 결정: 편집기 동작은 바꾸지 않는다) */
    [class^="ed-"]:active, [class*=" ed-"]:active { transform: none; }
}
button.link { border: 0; background: none; padding: 0; color: var(--accent-strong); }
button.link.danger { color: var(--danger); }
button.link.muted { color: var(--muted); }
form.inline { display: inline; }

.error { color: var(--danger); margin: 0; font-size: var(--font-md); }
.notice { color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: var(--font-sm); }
.danger-text { color: var(--danger); }

/* ---------------------------------------------------------------- 요약 카드 */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
.stats.four { grid-template-columns: repeat(4, 1fr); }
.stat {
    background: var(--card); border: 1px solid var(--line); border-top: 3px solid #fbd0de; border-radius: var(--radius);
    padding: var(--space-3); display: flex; flex-direction: column; color: var(--text); min-width: 0;
}
.stat strong { font-size: var(--font-lg); overflow-wrap: anywhere; }
.stat-label { font-size: var(--font-sm); color: var(--muted); }
.stat.total { border-color: var(--accent); }
a.stat:hover { border-color: var(--accent); }

/* ---------------------------------------------------------------- 홈 꾸미기 사진 */
.home-photo { margin-bottom: var(--space-4); }
.photo-tile {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius);
    background: var(--soft); cursor: zoom-in; outline: none;
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;   /* 아이폰 기본 길게 누르기 메뉴 끄기 */
    touch-action: manipulation; transition: transform .15s;
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.photo-tile.pressing { transform: scale(.98); }          /* 꾹 누르는 중 살짝 눌림 */
.photo-tile.busy { opacity: .6; pointer-events: none; }
.photo-tile:focus-visible { box-shadow: 0 0 0 3px var(--accent-pale); }

/* 전체 화면 보기 */
.photo-viewer {
    position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
    background: rgba(28, 16, 22, .94); opacity: 0; transition: opacity .18s; cursor: zoom-out;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.photo-viewer.open { opacity: 1; }
.photo-viewer img { max-width: 100vw; max-height: 100vh; object-fit: contain; }
.photo-viewer-close {
    position: absolute; top: calc(env(safe-area-inset-top) + 12px); right: 12px;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .18); color: #fff; font-size: var(--font-xl);
}
body.no-scroll { overflow: hidden; }

/* 꾹 눌렀을 때 아래에서 올라오는 메뉴 */
.photo-sheet-backdrop {
    position: fixed; inset: 0; z-index: 90; background: rgba(40, 20, 30, .35);
    display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .15s;
}
.photo-sheet-backdrop.open { opacity: 1; }
.photo-sheet {
    width: min(420px, 100%); margin: 0 var(--space-2) calc(env(safe-area-inset-bottom) + 10px);
    display: flex; flex-direction: column; gap: var(--space-2); transform: translateY(20px); transition: transform .18s;
}
.photo-sheet-backdrop.open .photo-sheet { transform: none; }
.sheet-btn {
    padding: 15px; border: 0; border-radius: 14px; background: var(--card); font-size: var(--font-lg); font-weight: 600;
    color: var(--text); box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.sheet-btn.danger { color: var(--danger); }
.sheet-btn.cancel { color: var(--muted); font-weight: 500; }
.photo-add {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
    min-height: 64px; padding: 0; border: 2px dashed #f3c3d3; border-radius: var(--radius);
    background: #fffafc; color: var(--muted); cursor: pointer;
}
.photo-add:hover { border-color: var(--accent); color: var(--accent-strong); }
.photo-add .plus { font-size: 1.8rem; line-height: 1; font-weight: 300; }
.photo-add.empty { aspect-ratio: 16 / 6; }
.photo-add-label { font-size: var(--font-md); }
@media (min-width: 700px) {   /* PC: 꾸미기 사진이 화면을 너무 차지하지 않도록 더 납작하게 */
    .photo-tile { aspect-ratio: 3 / 1; }
    .photo-add.empty { aspect-ratio: 21 / 5; }
}
.photo-add.busy { pointer-events: none; opacity: .7; }
.photo-add.busy .plus, .photo-add.busy .photo-add-label { display: none; }
.photo-add.busy::before { content: '올리는 중…'; font-size: var(--font-sm); color: var(--accent-strong); }

/* 홈: D-day 카드 */
.hero {
    position: relative; overflow: hidden; text-align: center; padding: var(--space-6) var(--space-4);
    background: linear-gradient(135deg, #ffe1ea 0%, #fff4f7 55%, #ffffff 100%);
    border-color: #f8d0dd;
}
.hero::before, .hero::after {           /* 은은한 하트 장식 */
    content: "♥"; position: absolute; color: rgba(224, 92, 134, .10); pointer-events: none;
}
.hero::before { font-size: 90px; left: -10px; top: -26px; transform: rotate(-18deg); }
.hero::after { font-size: 60px; right: 6px; bottom: -18px; transform: rotate(14deg); }
.dday {
    font-size: 2.7rem; font-weight: 800; line-height: 1.1;
    background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero details.plain { display: inline-block; }
.hero form { justify-content: center; margin-top: var(--space-1); }

.progress { height: 10px; background: var(--track); border-radius: var(--radius-pill); overflow: hidden; margin-top: var(--space-2); }
.progress .bar { height: 100%; background: var(--accent-grad); border-radius: var(--radius-pill); transition: width .3s; }

/* ---------------------------------------------------------------- 표 */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--space-4); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px var(--space-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; }
th { font-size: var(--font-sm); color: var(--muted); font-weight: 600; background: var(--tint); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.wrap { white-space: normal; min-width: 120px; }
td.actions { display: flex; gap: var(--space-3); }
tr.row-done td { color: var(--muted); }

/* ---------------------------------------------------------------- 배지 (분류 칩·상태·종류 표시)
   모양은 하나: 옅은 바탕 + 진한 글자, 같은 크기. 색만 종류마다 다르다 (모두 4.5:1 이상).
   예전에는 여섯 가지 모양이 섞여 있었고 웨딩홀 상태처럼 흰 글자가 흐린 것(후보 2.9)도 있었다.
   달력 칸 안의 색 막대(.cal-entry)와 점(.dot)은 달력 색 그대로 */
.chip, .badge, .status, .state, .side-tag, .deal-tag, .holiday-tag, .tag {
    display: inline-block; padding: 1px var(--space-2); border-radius: var(--radius-pill);
    font-size: var(--font-xs); font-weight: 700; line-height: 1.5; white-space: nowrap;
    background: var(--badge-gray-bg); color: var(--badge-gray);   /* 회색: 미정·제외·보류 등 */
}
/* 분홍 */
.chip, .badge.wed, .status.st-contract, .side-tag.bride, .tag.bride { background: var(--accent-soft); color: var(--accent-strong); }
/* 파랑 */
.badge.ev, .status.st-planned, .state.booked, .side-tag.groom, .tag.groom, .deal-tag.jeonse { background: var(--info-soft); color: var(--info); }
/* 초록 */
.badge.pay, .status.st-visited, .state.done, .deal-tag.monthly { background: var(--badge-green-bg); color: var(--success); }
/* 주황 */
.badge.todo, .status.st-candidate, .state.looking, .deal-tag.sale { background: var(--badge-orange-bg); color: var(--badge-orange); }
/* 빨강 */
.holiday-tag { background: var(--badge-red-bg); color: var(--danger); }
/* 보류한 할 일의 칩은 회색 — 예전에는 뒤쪽에 다시 정의된 .chip 규칙에 덮여 분홍으로 보였다 */
.chip.held-chip { background: var(--badge-gray-bg); color: var(--badge-gray); }

/* ---------------------------------------------------------------- 체크박스 버튼 */
button.checkbox {
    width: 26px; height: 26px; padding: 0; border-radius: 7px; flex: none;
    border: 2px solid #cfc7c1; background: var(--card); color: #fff; font-weight: 700; line-height: 1;
}
button.checkbox.checked { background: var(--button-grad); border-color: transparent; }

/* ---------------------------------------------------------------- 체크리스트 */
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list.card { padding: var(--space-1) var(--space-4); }
.check-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.check-item:last-child { border-bottom: 0; }
.check-main { flex: 1; min-width: 0; }
.check-title { overflow-wrap: anywhere; }
.check-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) 10px; margin-top: 2px; color: var(--muted); }
.check-item.done .check-title { text-decoration: line-through; color: var(--muted); }
.check-item.held .check-title, .check-item.held .check-meta { color: var(--muted); }   /* 예전 #a8a29d 는 대비 2.5:1 */
.held-chip { margin-right: var(--space-1); }
.check-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); flex: none; }
.hold-btn {
    border: 1px solid var(--line); background: var(--card); color: var(--muted);
    font-size: var(--font-xs); padding: 2px var(--space-2); border-radius: var(--radius-pill); white-space: nowrap;
}
.hold-btn:hover { border-color: #b8b2ad; color: var(--text); }
.hold-btn.on { background: #f3f1ef; color: var(--text); }

/* ---------------------------------------------------------------- 체크리스트 일별 / 월별 */
.progress-card .progress-counts { display: flex; gap: 14px; margin-top: var(--space-2); color: var(--muted); }
.progress-counts b { color: var(--text); }
/* 탭 모양 버튼 (체크리스트 일별/월별/전체) */
.seg-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1); padding: var(--space-1); margin-bottom: 14px;
    background: #fbe4ec; border-radius: 10px;
}
.seg-tabs a { text-align: center; padding: var(--space-2) 0; border-radius: var(--radius-sm); color: var(--muted); font-weight: 600; }
.seg-tabs a.on { background: var(--card); color: var(--accent-strong); box-shadow: 0 2px 8px rgba(224, 92, 134, .15); }

.date-nav { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 10px; }
.date-nav .button { padding: 6px 14px; }
.date-title { flex: 1; text-align: center; display: flex; flex-direction: column; line-height: 1.3; }
.date-title strong { font-size: var(--font-xl); }

.week-strip { display: flex; align-items: stretch; gap: var(--space-1); margin-bottom: var(--space-4); }
.week-arrow { display: flex; align-items: center; padding: 0 var(--space-1); color: var(--muted); font-size: var(--font-xl); }
.week-day {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 0; border-radius: 10px; background: var(--card); border: 1px solid var(--line); color: var(--text);
}
.week-day .wd { font-size: var(--font-xs); color: var(--muted); }
.week-day .dn { font-weight: 700; }
.week-day.sun .wd, .week-day.sun .dn { color: var(--sun); }
.week-day.sat .wd, .week-day.sat .dn { color: var(--sat); }
/* 고른 날이 오늘이면 오늘 테두리가 보이게 .today 를 .sel 뒤에 둔다 */
.week-day.sel { background: var(--button-grad); border-color: transparent; }
.week-day.today { border-color: var(--accent-light); }
.week-day.sel .wd, .week-day.sel .dn { color: #fff; }
.week-day .dots { height: 8px; display: flex; gap: 2px; }
.week-day .dot { margin: 0; width: 6px; height: 6px; }
.week-day .dot.open { background: var(--c-todo); }
.week-day .dot.done { background: var(--c-pay); }
.week-day.sel .dot { background: #fff; }

.overdue-box .check-list { border-color: #f1c9c5; }
.empty-note { padding: 18px 0; text-align: center; }
.done-note { margin: -6px 0 10px; }
.details.group, details.group { margin-top: var(--space-1); }
.held-group summary { color: #6f6a65; }

.add-card { margin-top: 18px; }

/* 할 일 종류 고르기 (날짜 / 월 / 없음) */
.kind-picker { border: 1px solid var(--line); border-radius: 10px; padding: 10px var(--space-3); margin: 0; display: flex; flex-direction: column; gap: 10px; }
.kind-picker legend { font-size: var(--font-sm); color: var(--muted); padding: 0 var(--space-1); }
.kind-options { display: flex; gap: 6px; flex-wrap: wrap; }
.kind-option {
    flex-direction: row; align-items: center; gap: 6px; padding: 6px var(--space-3); cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--text); font-size: var(--font-sm);
}
.kind-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.kind-option input { accent-color: var(--accent); }

/* 일별 화면의 '이번 달 할 일' 안내 */
.month-hint {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
    padding: 10px 14px; border-radius: var(--radius); background: #fde9f0; color: var(--accent-strong); font-weight: 600; font-size: var(--font-md);
}

/* 월별: 모든 달을 한 페이지에 */
.container.wide { max-width: 1240px; }
.month-jump {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: var(--space-3);
    position: sticky; top: calc(env(safe-area-inset-top) + 86px); z-index: 4; padding: 6px 0; background: var(--bg);
}
.month-jump::-webkit-scrollbar { display: none; }
.month-jump a {
    flex: none; display: flex; align-items: center; gap: var(--space-1); padding: 5px var(--space-3); border-radius: var(--radius-pill);
    background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: var(--font-sm);
}
.month-jump a.current { border-color: var(--accent); color: var(--accent-strong); font-weight: 700; }
.month-jump a b { background: var(--badge-orange-bg); color: var(--badge-orange); border-radius: var(--radius-pill); font-size: var(--font-xs); padding: 0 6px; }
.month-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--space-3); align-items: start; }
.month-card { margin: 0; padding: 14px; scroll-margin-top: 140px; }
.month-card.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow); }
.month-card.wedding { background: linear-gradient(180deg, #fff0f5, #ffffff 60%); }
.month-card.past { background: #fbfaf9; }
.month-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: 6px; }
.month-card-head strong { font-size: var(--font-xl); margin-right: var(--space-1); }
.month-year { display: block; font-size: var(--font-xs); color: var(--muted); }
.progress.thin { height: 5px; margin: 2px 0 6px; }
.check-list.compact .check-item { padding: var(--space-2) 0; gap: 10px; }
/* 달 카드 안: 월 할 일의 '10월 중' 은 반복이라 숨기고, 날짜 할 일은 날짜를 보여준다 */
.check-list.compact .is-monthly .due { display: none; }
.check-list.compact .check-actions { flex-direction: row; align-items: center; }
.month-empty { margin: 6px 0 var(--space-2); }
.quick-add { display: flex; gap: 6px; margin-top: var(--space-2); }
.quick-add input { flex: 1; min-width: 0; padding: var(--space-2) 10px; font-size: 16px; }   /* 16px: 아이폰 확대 방지 */
.quick-add button { flex: none; width: 38px; padding: 0; font-size: var(--font-xl); font-weight: 700; color: var(--accent-strong); }

/* ---------------------------------------------------------------- 달력 항목 (공통) */
.badge { flex: none; }   /* 모양·색은 위 '배지' */
.dot.wed { background: var(--c-wed); }
.dot.ev { background: var(--c-ev); }
.dot.todo { background: var(--c-todo); }
.dot.pay { background: var(--c-pay); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--space-1); }

.entry-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.entry-list li { display: flex; align-items: center; gap: var(--space-2); padding: 6px 0; }
.entry-list li.done a { text-decoration: line-through; color: var(--muted); }
.entry-list a { color: var(--text); overflow-wrap: anywhere; }

.upcoming-day { display: flex; gap: var(--space-3); border-bottom: 1px solid var(--line); padding: 6px 0; }
.upcoming-day:last-of-type { border-bottom: 0; margin-bottom: var(--space-2); }
.upcoming-date { flex: none; width: 72px; padding-top: 6px; font-weight: 600; font-size: var(--font-md); }

/* ---------------------------------------------------------------- 달력 */
.cal-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.cal-head h1 { margin: 0 var(--space-1); font-size: var(--font-2xl); flex: 1; text-align: center; }
.cal-head .button { padding: 6px 14px; }
.cal-legend { display: flex; gap: var(--space-3); color: var(--muted); margin-bottom: var(--space-2); flex-wrap: wrap; }

.cal {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    background: var(--line); gap: 1px; border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-4);
}
.cal-dow { background: #fdf0f4; text-align: center; font-size: var(--font-sm); padding: 6px 0; color: var(--muted); }
.cal-dow.sun, .cal-cell.sun .cal-num { color: var(--sun); }
.cal-dow.sat, .cal-cell.sat .cal-num { color: var(--sat); }
.cal-cell {
    background: var(--card); min-height: 92px; padding: var(--space-1); color: var(--text);
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.cal-cell.out { background: #fcfbfa; }
.cal-cell.out > * { opacity: .45; }
.cal-cell.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-num { font-size: var(--font-sm); font-weight: 600; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; }
.cal-cell.today .cal-num { background: var(--button-grad); color: #fff !important; }
.cal-entry {
    font-size: var(--font-xs); line-height: 1.35; padding: 0 var(--space-1); border-radius: 4px; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-entry.wed { background: var(--c-wed); }
.cal-entry.ev { background: var(--c-ev); }
.cal-entry.todo { background: var(--c-todo); }
.cal-entry.pay { background: var(--c-pay); }
.cal-entry.done { opacity: .45; text-decoration: line-through; }
.cal-more { font-size: var(--font-xs); color: var(--muted); padding-left: var(--space-1); }

/* ---------------------------------------------------------------- 메모 */
.memo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.memo { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); color: var(--text); }
.memo.pinned { border-color: #f3b3c8; background: #fff8fb; }
.memo-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.memo-head h3 { overflow-wrap: anywhere; }
.memo-body {
    margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #555; font-size: var(--font-md);
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.memo-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
/* 고정 핀(압정 아이콘): 안 고정이면 흐린 색, 고정하면 분홍으로 채운다 */
button.pin { border: 0; background: none; padding: 0 2px; font-size: var(--font-lg); color: var(--muted); opacity: .55; }
button.pin.on { color: var(--accent-strong); opacity: 1; }
button.pin.on .icon { fill: var(--accent-soft); }
.memo-head h3 a { color: var(--text); }
/* 목록의 서식 있는 메모 미리보기: 일정 높이까지만 보이고 아래는 흐리게 */
.memo-body.rich {
    display: block; white-space: normal; max-height: 11.5em; position: relative; font-size: 0.9rem;
    -webkit-line-clamp: unset;
}
.memo-body.rich::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5em;
    background: linear-gradient(transparent, var(--card));
}
.memo.pinned .memo-body.rich::after { background: linear-gradient(transparent, #fff8fb); }   /* 고정 메모 바탕색과 같게 */
.memo-body.rich h1 { font-size: 1.1rem; margin: 0.4em 0 0.2em; }
.memo-body.rich h2 { font-size: 1.02rem; margin: 0.4em 0 0.2em; }
.memo-body.rich h3 { font-size: 0.95rem; margin: 0.3em 0 0.15em; }
.memo-body.rich input[type=checkbox] { pointer-events: none; }

/* ---------------------------------------------------------------- 서식 있는 글 (편집기·미리보기 공통) */
.rich { line-height: 1.65; overflow-wrap: anywhere; }
.rich > :first-child { margin-top: 0; }
.rich p { margin: 0 0 0.35em; min-height: 1em; }
.rich h1 { font-size: 1.6rem; margin: 0.8em 0 0.3em; line-height: 1.3; }
.rich h2 { font-size: 1.3rem; margin: 0.7em 0 0.3em; line-height: 1.3; }
.rich h3 { font-size: 1.1rem; margin: 0.6em 0 0.25em; }
.rich ul, .rich ol { padding-left: 1.5em; margin: 0.2em 0 0.5em; }
.rich li > p { margin: 0.1em 0; }
.rich blockquote { border-left: 3px solid var(--text); margin: 0.4em 0; padding: 0.1em 0 0.1em 0.9em; }
.rich hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
.rich code { background: #f2eeeb; color: #eb5757; padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.88em;
             font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.rich pre { background: #f7f6f3; border-radius: 6px; padding: 0.8em 1em; overflow-x: auto; }
.rich pre code { background: none; color: inherit; padding: 0; }
.rich mark { border-radius: 3px; padding: 0 0.1em; }
.rich a { color: var(--accent-strong); text-decoration: underline; }
.rich ul[data-type="taskList"] { list-style: none; padding-left: 0.2em; }
.rich ul[data-type="taskList"] li { display: flex; align-items: flex-start; gap: 0.5em; }
.rich ul[data-type="taskList"] li > label { flex: none; margin-top: 0.3em; user-select: none; }
.rich ul[data-type="taskList"] li > label input { width: 16px; height: 16px; accent-color: var(--accent); }
.rich ul[data-type="taskList"] li > div { flex: 1; }
.rich ul[data-type="taskList"] li[data-checked="true"] > div { color: var(--muted); text-decoration: line-through; }
/* 사진: 저장된 너비(width)를 쓰되 화면보다 크면 줄어든다, 가운데 정렬 */
.rich img { display: block; max-width: 100%; height: auto; margin: 0.6em auto; border-radius: 6px; }
.memo-body.rich img { max-height: 140px; width: auto; margin: 0.4em 0; }

/* ---------------------------------------------------------------- 편집기 안의 사진 */
.ed-image { margin: 0.6em 0; display: flex; justify-content: center; }
.ed-image-frame { position: relative; max-width: 100%; line-height: 0; }
.ed-image-frame img { width: 100%; margin: 0; border-radius: 6px; display: block; }
.ed-image.selected .ed-image-frame img, .ed-image.resizing .ed-image-frame img { outline: 3px solid #7ab8f5; outline-offset: 1px; }
.ed-image-handle {
    position: absolute; top: 50%; width: 8px; height: 48px; margin-top: -24px; border-radius: 4px;
    background: rgba(40, 40, 40, .55); border: 1px solid #fff; cursor: ew-resize; touch-action: none;
    opacity: 0; transition: opacity .15s;
}
.ed-image-handle.left { left: 6px; }
.ed-image-handle.right { right: 6px; }
.ed-image-del {
    position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0; line-height: 26px;
    border: 0; border-radius: 6px; background: rgba(40, 40, 40, .65); color: #fff; font-size: 0.85rem;
    opacity: 0; transition: opacity .15s;
}
.ed-image:hover .ed-image-handle, .ed-image:hover .ed-image-del,
.ed-image.selected .ed-image-handle, .ed-image.selected .ed-image-del,
.ed-image.resizing .ed-image-handle { opacity: 1; }
@media (hover: none) {   /* 휴대폰: 사진을 누르면(선택) 손잡이와 ✕ 가 보인다. 손잡이를 더 크게 */
    .ed-image-handle { width: 14px; height: 60px; margin-top: -30px; }
    .ed-image-del { width: 34px; height: 34px; line-height: 32px; }
}
.ed-status { align-self: center; margin-left: auto; font-size: 0.8rem; color: var(--accent-strong); white-space: nowrap; }
.ed-status:empty { display: none; }

/* ---------------------------------------------------------------- 메모 편집기 */
.memo-page { max-width: 760px; }
.memo-page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.memo-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
             padding: var(--space-5) var(--space-5) var(--space-3); margin-bottom: var(--space-3); }
.memo-title-input {
    width: 100%; border: 0 !important; outline: none !important; padding: 0 !important; margin-bottom: var(--space-2);
    font: inherit; font-size: 1.8rem !important; font-weight: 700; color: var(--text); background: transparent !important;
}
.memo-title-input::placeholder { color: #cfc9c4; }
.editor { position: relative; }
.editor-toolbar {
    position: sticky; top: calc(env(safe-area-inset-top) + 88px); z-index: 5;
    display: flex; flex-wrap: wrap; gap: var(--space-1); padding: 6px 0; margin-bottom: var(--space-2);
    background: var(--card); border-bottom: 1px solid var(--line);
}
.editor:not(.ready) .editor-toolbar { display: none; }
.ed-group { display: inline-flex; gap: 2px; padding-right: 6px; margin-right: 2px; border-right: 1px solid var(--line); }
.ed-group:last-child { border-right: 0; }
.ed-btn {
    min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: 6px; background: none;
    color: var(--text); font-size: 0.9rem; font-weight: 600; line-height: 32px;
}
.ed-btn:hover { background: var(--soft); }
.ed-btn.on { background: var(--accent-soft); color: var(--accent-strong); }
.ed-btn.i { font-style: italic; font-family: Georgia, serif; }
.ed-btn.u { text-decoration: underline; }
.ed-btn.s { text-decoration: line-through; }
.ed-btn.code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; }
.ed-color-btn { text-decoration: underline; text-decoration-color: #d44c47; text-decoration-thickness: 3px; }
.ed-color { position: relative; display: inline-block; }
.ed-palette {
    position: absolute; top: 36px; left: 0; z-index: 20; width: 292px; max-width: calc(100vw - 16px); padding: 10px;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.ed-palette-head { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-1); }
.ed-palette-title { display: block; font-size: 0.75rem; color: var(--muted); margin: var(--space-1) 0; }
.ed-palette-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-bottom: var(--space-2); }
.ed-swatch {
    aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: 5px;
    background: var(--card); font-weight: 700; font-size: 0.8rem; line-height: 1;
}
.ed-swatch:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.ed-swatch.none { color: var(--muted); background: repeating-linear-gradient(135deg, #fff 0 4px, #f1eeeb 4px 6px); }
.ed-custom {
    display: inline-flex; flex-direction: row; align-items: center; gap: var(--space-1); cursor: pointer;
    font-size: 0.72rem; color: var(--text); padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px;
}
.ed-custom input[type=color] { width: 22px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.editor-content .ProseMirror { min-height: 50vh; outline: none; padding-bottom: 2em; }
.editor-content .ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder); color: #c4bdb7; float: left; height: 0; pointer-events: none;
}
.editor textarea { width: 100%; font: inherit; }

.ed-bubble, .ed-slash {
    position: absolute; z-index: 30; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: 0 6px 20px rgba(0,0,0,.14);
}
.ed-bubble { display: flex; gap: 2px; padding: var(--space-1); white-space: nowrap; }
.ed-bubble[hidden], .ed-slash[hidden], .ed-palette[hidden] { display: none; }
.ed-slash { width: 250px; max-height: 300px; overflow-y: auto; padding: var(--space-1); }
.ed-slash-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px var(--space-2); border: 0; border-radius: 6px;
    background: none; text-align: left; color: var(--text);
}
.ed-slash-item.on, .ed-slash-item:hover { background: var(--soft); }
.ed-slash-icon {
    flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 6px; font-weight: 700; font-size: 0.85rem; background: var(--card);
}
.ed-slash-label { font-weight: 600; }
.ed-slash-hint { margin-left: auto; font-size: 0.75rem; color: var(--muted); }
.ed-slash-empty { padding: var(--space-2); color: var(--muted); font-size: 0.85rem; }
.memo-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
                border-top: 1px solid var(--line); padding-top: 10px; margin-top: var(--space-2); }
.memo-actions button { flex: none; white-space: nowrap; }
.memo-buttons { display: flex; gap: var(--space-2); margin-left: auto; }
/* 저장 충돌 안내 — 먼저 저장된 내용은 카드 안에 흰 상자로 */
.memo-conflict ul { margin: 6px 0 0; padding-left: 1.2em; }
.memo-conflict-other { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
                       padding: var(--space-3) 14px; max-height: 60vh; overflow: auto; }
.memo-conflict-other > p:first-child { margin: 0 0 var(--space-2); }
@media (max-width: 640px) {
    .memo-form { padding: var(--space-4) 14px 10px; }
    .memo-title-input { font-size: 1.5rem !important; }
    .memo-actions .muted { display: none; }   /* 단축키 안내는 PC 에서만 */
    .memo-actions { justify-content: flex-end; }
    .editor-content .ProseMirror { min-height: 40vh; }
}

/* ---------------------------------------------------------------- 웨딩홀 */
.head-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }


.compare { min-width: 100%; }
.compare th, .compare td { min-width: 150px; vertical-align: top; }
.compare td.wrap { white-space: normal; }
.compare td.pre { white-space: pre-wrap; }
.compare .sticky {
    position: sticky; left: 0; z-index: 1; background: var(--soft);
    min-width: 96px; max-width: 110px; white-space: normal; color: var(--muted); font-size: var(--font-sm);
}
.compare thead .sticky { z-index: 2; }
.compare .hall-col { background: var(--card); color: var(--text); font-size: var(--font-md); }
.compare .hall-col.excluded { opacity: .5; }
.hall-name { font-weight: 700; font-size: var(--font-lg); margin-bottom: var(--space-1); white-space: normal; }
.hall-actions { display: flex; gap: var(--space-1); margin-top: 6px; }
/* 휴대폰: 항목 칸 옆에 웨딩홀 두 곳이 한 번에 보이게 칸을 줄이고, 옆에 더 있으면 오른쪽 끝을 흐리게
   (js/scroll-hint.js). 예전에는 150px 칸이라 한 곳 반만 보였다 */
@media (max-width: 640px) {
    .compare th, .compare td { min-width: 128px; padding: var(--space-2) 10px; }
    .compare .sticky { min-width: 80px; max-width: 88px; }
}
.compare-wrap.more-right {
    -webkit-mask-image: linear-gradient(to left, transparent, #000 36px);
    mask-image: linear-gradient(to left, transparent, #000 36px);
}
.compare td.stars { color: #e0a100; letter-spacing: 1px; }
/* 예상 총액 줄: 금액 아래에 '가장 적음'·'대관료 빼고' */
.compare tr.total-row td, .compare tr.total-row th { background: var(--tint); }
.compare tr.total-row th.sticky { background: var(--soft); }
.compare tr.total-row td { white-space: normal; }
.compare tr.total-row strong { display: block; font-size: var(--font-lg); }
.compare tr.total-row .chip { margin-top: 2px; }
.compare .total-note { display: block; font-size: var(--font-xs); }
.compare .total-note:empty { display: none; }
.compare tr.custom th .remove { color: var(--muted); font-size: var(--font-lg); margin-left: 2px; }
.add-criterion { display: flex; gap: var(--space-2); }
.add-criterion input { flex: 1; min-width: 0; }
.add-criterion button { flex: none; }
.add-criterion-card p { margin: var(--space-2) 0 0; }

.place-list { list-style: none; margin: var(--space-2) 0; padding: 0; }
.place-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
                 padding: 10px 0; border-bottom: 1px solid var(--line); }
.place-list li:last-child { border-bottom: 0; }
.search-row input { flex: 1 1 200px; }
.located { color: var(--success); margin: 0; }   /* 달력 초록(--c-pay)은 글자로는 흐리다 */
.add-criterion-box { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 10px var(--space-3); margin: 0; }

.hall-map { height: 65vh; min-height: 320px; border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: var(--space-2); }
.map-popup { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-sm); }
.map-popup .status { align-self: flex-start; }
.popup-links { display: flex; gap: 10px; margin-top: var(--space-1); }

/* ---------------------------------------------------------------- 휴대폰 */
@media (max-width: 640px) {
    .stats, .stats.four { grid-template-columns: 1fr 1fr; }
    .stats:not(.four) .stat.total { grid-column: span 2; }
    .cal-cell { min-height: 64px; padding: 2px; }
    .cal-entry { font-size: 0; height: 6px; padding: 0; border-radius: 3px; }   /* 좁은 화면에선 색 막대만 */
    .cal-more { font-size: var(--font-xs); padding: 0; }
}

/* ---------------------------------------------------------------- 로그인 화면 */
.login-page { padding-top: 48px; }
.login-title { text-align: center; margin-bottom: var(--space-5); }
.login-title .ring { font-size: 2.6rem; display: block; line-height: 1.2; }
.login-title h1 {
    margin: 6px 0 var(--space-1); font-size: var(--font-3xl);
    background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-title p { margin: 0; color: var(--muted); font-size: var(--font-md); }
.login-title .heart { color: var(--accent); font-family: Arial, sans-serif; }
.login-page form.card { border-top: 4px solid var(--accent-pale); padding: var(--space-5); }

/* 서버에 새 버전이 올라갔을 때 화면 맨 위에 뜨는 안내 */
.update-bar {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; background: #ffe3ec; color: #7a2941; font-size: var(--font-md); text-align: center;
    border-bottom: 1px solid #f4c2d2;
}
.update-bar button {
    padding: 5px var(--space-3); border: 0; border-radius: 7px;
    background: var(--button-grad); color: #fff; font: inherit; font-weight: 600;
}

/* 메모 보기 화면 (편집기 없이 내용만) */
.memo-view h1 { margin: 0 0 2px; font-size: var(--font-2xl); overflow-wrap: anywhere; }
.memo-view > .rich { margin-top: 14px; }
.memo-links { display: inline-flex; gap: var(--space-3); }

/* 새 버전이 올라왔을 때 메뉴에 나타나는 버튼 */
.update-notice {
    flex: 0 0 auto; padding: 3px 9px; border: 0; border-radius: var(--radius-pill);
    background: var(--button-grad); color: #fff; font: inherit; font-size: var(--font-xs); font-weight: 700;
    white-space: nowrap; animation: update-pop .3s ease-out;
}
@keyframes update-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 저장·추가·삭제 뒤 화면 아래에 잠깐 뜨는 알림 (ToastInterceptor → fragments.html). 누르는 것을 막지 않는다 */
.toast {
    position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 150;
    padding: 10px 18px; border-radius: var(--radius-pill); max-width: calc(100vw - 32px);
    background: var(--accent-strong); color: #fff; font-size: var(--font-md); font-weight: 600; white-space: nowrap;
    box-shadow: 0 6px 20px rgba(120, 30, 60, .25); pointer-events: none;
    opacity: 0; transform: translate(-50%, 8px); animation: toast 2.8s ease-out forwards;
}
@keyframes toast {
    8%, 82% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .toast { transform: translate(-50%, 0); }
}

/* 휴대폰 폭에서는 메뉴 글씨를 줄여 한 줄에 들어가게 */
@media (max-width: 460px) {
    .nav-actions { gap: var(--space-2); font-size: var(--font-xs); }
    .update-notice { padding: 3px var(--space-2); font-size: var(--font-xs); }
}

/* ---------------------------------------------------------------- 예산 */
/* 예산 항목: 넓은 화면은 표, 좁은 화면(휴대폰)은 카드로 */
.budget-table td.title { font-weight: 600; }
.budget-table td.strong { font-weight: 600; }
.budget-table td.due { color: var(--accent-strong); }

@media (max-width: 760px) {
    .budget-table thead, .budget-table tfoot { display: none; }
    .budget-table, .budget-table tbody, .budget-table tr, .budget-table td { display: block; width: auto; }
    .budget-table { border: 0; }
    .budget-table tr {
        position: relative; margin-bottom: 10px; padding: 10px var(--space-3);
        border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
    }
    .budget-table tr.row-done { background: #fbf7f8; }
    .budget-table td { border: 0; padding: 1px 0; text-align: left; }
    .budget-table td:empty { display: none; }
    .budget-table td[data-label]::before {
        content: attr(data-label); display: inline-block; min-width: 66px;
        color: var(--muted); font-size: var(--font-xs); margin-right: 6px;
    }
    .budget-table td.title { font-size: var(--font-lg); font-weight: 700; margin-bottom: var(--space-1); padding-right: 96px; }
    .budget-table td.strong { font-size: var(--font-lg); color: var(--accent-strong); }
    .budget-table td.strong::before { color: var(--muted); font-weight: 400; }
    /* 체크 버튼과 수정 링크는 카드 오른쪽 위에 */
    .budget-table td:first-child { position: absolute; top: 10px; right: 46px; padding: 0; }
    .budget-table td.edit { position: absolute; top: var(--space-3); right: var(--space-3); padding: 0; }
    /* 자세한 값은 수정 화면에서 — 카드에는 핵심만 */
    .budget-table td.wide-only { display: none; }
}

/* 예산 현황 카드 */
.budget-hero { padding: var(--space-4); }
.budget-hero .hero-head { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); justify-content: space-between; }
.budget-hero .hero-head > div { display: flex; flex-direction: column; gap: 2px; }
.budget-hero .hero-amount { font-size: var(--font-2xl); letter-spacing: -0.3px; }
.budget-hero .hero-meal { text-align: right; }
.budget-hero .hero-meal strong { font-size: var(--font-lg); color: var(--accent-strong); }

/* 기준 값(총예산·여행 예산·집 자금)을 아직 안 정했을 때: 큰 금액 자리에 '아직 정하지 않음', 아래에 안내 한 줄 */
.hero-amount.unset { font-size: var(--font-xl); color: var(--muted); font-weight: 600; }
.unset-note {
    margin: var(--space-3) 0 0; padding: 10px var(--space-3); border-radius: var(--radius-sm);
    background: var(--accent-soft); color: var(--accent-strong); font-size: var(--font-sm);
}

/* 총예산을 낸 돈 / 낼 잔금 / 남은 예산으로 나눠 보여주는 막대 */
.budget-bar {
    display: flex; height: 14px; margin: 14px 0 10px;
    background: var(--soft); border-radius: var(--radius-pill); overflow: hidden;
}
.budget-bar .seg { height: 100%; transition: width .3s; }
.budget-bar .seg.paid { background: var(--accent); }
.budget-bar .seg.due { background: #f8b9cd; }

.hero-legend { display: flex; flex-wrap: wrap; gap: 6px var(--space-4); font-size: var(--font-sm); }
.hero-legend b { margin-left: 2px; }
.hero-legend .key { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
.hero-legend .key.paid { background: var(--accent); }
.hero-legend .key.due { background: #f8b9cd; }
.hero-legend .key.left { background: var(--soft); border: 1px solid var(--line); }

/* 분류별 접이식 묶음 — 왼쪽 색 띠는 분류마다 다르게 */
.budget-group { position: relative; overflow: hidden; padding-left: var(--space-4); }
.budget-group::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent);
}
.budget-group[data-i="1"]::before { background: #f2a13c; }
.budget-group[data-i="2"]::before { background: #5aa6d6; }
.budget-group[data-i="3"]::before { background: #8d7ad8; }
.budget-group[data-i="4"]::before { background: #3fae8e; }
.budget-group[data-i="5"]::before { background: #d8a13f; }
.budget-group[data-i="6"]::before { background: #d76a9c; }
.budget-group[data-i="7"]::before { background: #7a8fa6; }
.budget-group > summary { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; font-weight: 600; }
.budget-group > summary .muted { font-weight: 400; }
.budget-group[open] > summary { margin-bottom: var(--space-2); }
.budget-group .group-name { font-weight: 700; }
.budget-group .group-figures b { font-size: var(--font-lg); }
.budget-total { margin-top: var(--space-1); }
.progress .bar.over { background: var(--danger); }

/* 분류 묶음의 막대 — 총예산 막대를 그대로 작게 */
.budget-bar.mini { grid-column: 1 / -1; height: 8px; margin: 7px 0 0; }
.budget-bar.over .seg.paid { background: var(--danger); }
.budget-bar.over .seg.due { background: #e8a49c; }

/* 총예산 카드 안에 들어간 기준 금액 설정 */
.hero-settings { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--line); }
.hero-settings > summary { font-size: var(--font-md); color: var(--accent-strong); font-weight: 600; }
.hero-settings .stack { margin-top: 10px; }
.add-item { margin-top: 14px; }

/* ---------------------------------------------------------------- 하객 */
.guest-hero .hero-amount { font-size: var(--font-2xl); }
.guest-compare { margin: 14px 0 var(--space-1); display: flex; flex-direction: column; gap: 7px; }
.compare-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: center; font-size: var(--font-sm); }
.compare-row .compare-label { white-space: nowrap; color: var(--muted); }
.compare-row .budget-bar { height: 10px; margin: 0; }
.budget-bar .seg.gift { background: var(--accent); }
.budget-bar .seg.meal { background: #8aa9c9; }
.compare-result { margin: var(--space-2) 0 0; font-size: var(--font-md); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline; }

/* 상태를 눌러 바꾸는 배지 (모양·색은 위 '배지') */
.state.as-button { border: 0; cursor: pointer; font-family: inherit; }
.guest-table td.title { font-weight: 600; }

@media (max-width: 760px) {
    /* 하객 카드: 첫 칸이 이름이므로 예산 카드처럼 오른쪽 위로 띄우지 않는다 */
    .guest-table td:first-child { position: static; padding: 1px 0; }
    .guest-table td.title { padding-right: 58px; }
}

/* 축의금 장부 */
.ledger { padding: var(--space-1) var(--space-3); }
.ledger-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    padding: 10px 0; border-top: 1px solid var(--line);
}
.ledger-row:first-child { border-top: 0; }
.ledger-row.has-gift { background: linear-gradient(90deg, var(--accent-soft) 0%, transparent 40%); }
.ledger-who { flex: 1 1 140px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ledger-form { display: flex; gap: 6px; align-items: center; position: relative; }
.ledger-form input[type=number] { width: 110px; padding: 6px var(--space-2); }
.ledger-form select { padding: 6px var(--space-2); }
.ledger-form button { padding: 6px var(--space-3); white-space: nowrap; }
/* 장부는 한 줄에 칸·버튼이 나란히 있어서, 금액을 적는 동안에만 칸 바로 아래에 '10만 원' 을 띄운다
   (줄바꿈을 허용하면 선택칸이 한 줄을 다 차지해 줄이 셋으로 갈라진다) */
.ledger-form .money-hint { display: none; position: absolute; left: 2px; top: 100%; font-size: var(--font-xs); white-space: nowrap; }
.ledger-form:focus-within .money-hint:not(:empty) { display: block; }

/* ---------------------------------------------------------------- 신혼여행 */
.trip-hero .hero-amount { font-size: var(--font-2xl); }
.trip-hero .hero-meal strong { font-size: var(--font-2xl); color: var(--accent-strong); }

.trip-day { padding: var(--space-3) 14px; }
.trip-day + .trip-day { margin-top: -4px; }
.trip-day-head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: 6px; }
.trip-day-head strong { color: var(--accent-strong); font-size: var(--font-sm); letter-spacing: 0.5px; }
.trip-day-head span { font-weight: 600; }

.trip-plan-list, .trip-prep-list { list-style: none; margin: 0; padding: 0; }
.trip-plan-list li, .trip-prep-list li {
    display: flex; align-items: flex-start; gap: var(--space-2); padding: 6px 0;
    border-top: 1px solid var(--line);
}
.trip-plan-list li:first-child, .trip-prep-list li:first-child { border-top: 0; }
.trip-plan-list .plan-time { min-width: 52px; color: var(--accent-strong); font-size: var(--font-sm); padding-top: 1px; }
.trip-plan-list .plan-body, .trip-prep-list .prep-body { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.trip-prep-list li.done .prep-body b { color: var(--muted); text-decoration: line-through; }
.trip-table td.title a { font-weight: 600; }

/* 현지 통화 환산 줄 */
.fx-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 10px 0 0; }

/* ---------------------------------------------------------------- 신혼집 */
.house-hero .hero-amount { font-size: var(--font-2xl); }
.house-card { display: flex; flex-direction: column; gap: 7px; }
.house-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.house-head > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.house-links { display: flex; gap: 10px; white-space: nowrap; }
.house-name { font-weight: 700; font-size: var(--font-lg); color: var(--text); }
a.house-name { color: var(--accent-strong); }
.house-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.house-price strong { font-size: var(--font-xl); }
.house-price .rate { color: #e8a33d; letter-spacing: 1px; }
.house-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.house-commute { display: flex; flex-wrap: wrap; gap: 10px; }
.house-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.house-points .good { color: var(--success); font-weight: 600; margin-right: var(--space-1); }
.house-points .bad { color: #b4594a; font-weight: 600; margin-right: var(--space-1); }
.house-gap { margin: 0; }

/* 주소 찾기 버튼 */
label.with-address-search { position: relative; }
.address-search { margin-top: 6px; }

/* ---------------------------------------------------------------- 그 밖 */
/* 달력의 공휴일 */
.cal-holiday {
    display: block; font-size: var(--font-xs); line-height: 1.2; color: var(--danger);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.holiday-tag { margin-left: 6px; }   /* 모양·색은 위 '배지' */

.fill-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) 10px; margin: 0 0 10px; }

/* 알림 카드 */
.push-card .push-buttons { display: flex; gap: var(--space-2); align-items: center; margin: 10px 0 6px; }

/* 날씨 표시 */
.weather-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.weather-line.rainy { border-color: #8ab4f8; }
.weather-tag { display: block; color: var(--groom); }

/* 추천 */
.advice-list { display: grid; gap: 10px; margin-top: 14px; }
.advice { display: grid; gap: var(--space-1); text-decoration: none; color: inherit; border-left: 4px solid var(--line); }
.advice:hover { border-color: var(--accent); }
.advice.urgent { border-left-color: var(--accent); }
.advice.soon { border-left-color: #f0a500; }
.advice.tip { border-left-color: #8ab4f8; }
.advice-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.advice-level { font-size: var(--font-xs); font-weight: 700; letter-spacing: .02em; }
/* 등급 글자는 띠 색과 같은 색조로 조금 진하게 (작은 굵은 글씨라 4.5:1) */
.advice.urgent .advice-level { color: var(--accent-strong); }
.advice.soon .advice-level { color: #a26a00; }
.advice.tip .advice-level { color: #4576c1; }
.advice-title { font-size: var(--font-lg); }
.advice-detail { color: var(--muted); line-height: 1.5; }
.home-advice .advice { border: none; border-left: 4px solid var(--line); border-radius: 0; padding: var(--space-2) 0 var(--space-2) 10px; background: none; box-shadow: none; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.section-head .section-title { margin: 0; }

/* 매매 / 전월세 같은 두 갈래 전환 */
.switch-line { display: inline-flex; gap: 2px; margin: 10px 0 var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px; }
.switch-line a { padding: 5px var(--space-4); border-radius: var(--radius-pill); font-size: var(--font-sm); text-decoration: none; color: var(--muted); }
.switch-line a.on { background: var(--button-grad); color: #fff; font-weight: 600; }

/* ---------------------------------------------------------------- 누르는 영역 (휴대폰) */
/* 작은 버튼은 보이는 크기는 그대로 두고, 손가락으로 누르는 영역만 44px 이상으로 넓힌다 (애플 권장 최소 크기).
   예전 체크 버튼은 26px, 보류·작은 버튼은 20~33px, 글자 버튼은 글자 높이뿐이었다. */
@media (pointer: coarse) {
    button.checkbox, .hold-btn, .check-actions a, button.small, .button.small, .button.tiny,
    button.link, button.pin {
        position: relative;
    }
    button.checkbox::after, .hold-btn::after, .check-actions a::after, button.small::after,
    .button.small::after, .button.tiny::after, button.link::after, button.pin::after {
        content: ""; position: absolute; left: 50%; top: 50%;
        width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
    }
    /* 보류 버튼과 '수정' 링크, 메모 제목과 고정 핀은 붙어 있어서
       넓힌 영역이 옆의 보이는 부분까지 덮지 않게 사이를 벌린다 */
    .check-actions, .memo-head { gap: 14px; }
    /* 위쪽 메뉴의 '로그아웃' 은 넓히면 바로 아래 탭(웨딩홀·식예산) 윗부분을 덮어, 탭을 누르다 로그아웃된다 */
    .nav button.link::after { content: none; }
}

/* ---------------------------------------------------------------- 오류 화면 (templates/error.html) */
.error-page { padding-top: 48px; }
.error-page h1 { margin-bottom: var(--space-1); }
.error-page p { margin: 0; }

/* ---------------------------------------------------------------- 수정 화면의 저장·취소 (휴대폰) */
/* 긴 폼(웨딩홀·집 후보 등)에서도 저장·취소가 늘 손 닿는 곳에 있게 화면 아래에 붙인다.
   카드 안쪽 여백(--space-4)만큼 바깥으로 나가 카드 폭을 꽉 채운다 */
@media (max-width: 760px) {
    .form-actions {
        position: sticky; bottom: 0; z-index: 5;
        flex-wrap: nowrap; align-items: center;   /* 두 버튼을 한 줄로 — 위아래로 쌓이면 화면을 너무 많이 가린다 */
        margin: var(--space-1) calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
        padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
        background: var(--card); border-top: 1px solid var(--line);
        border-radius: 0 0 var(--radius) var(--radius);
    }
    .form-actions > * { flex: 1 1 0; min-width: 0; }
    /* 다음 입력칸으로 옮겨 갈 때 브라우저가 그 칸을 저장줄 위까지 올려 보여 주게 */
    html:has(.form-actions) { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------- 전체 검색 (/search) */
/* 위쪽 오른쪽 돋보기. 아래 탭을 덮지 않게 누르는 영역은 넓히지 않고 아이콘만 조금 크게 */
.nav-search { display: inline-flex; align-items: center; padding: 2px 4px; color: var(--muted); font-size: 1.15rem; }
.nav-search:hover, .nav-search.on { color: var(--accent-strong); }
.search-form { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.search-form input { flex: 1; min-width: 0; }
.search-form button { flex: none; padding: 0 var(--space-4); font-size: 1.15rem; }
.search-summary { margin: 0 0 var(--space-3); }
.search-group { padding-top: var(--space-3); padding-bottom: var(--space-1); }
.search-group .section-title { margin: 0 0 var(--space-1); display: flex; align-items: baseline; gap: var(--space-2); }
.search-list { list-style: none; margin: 0; padding: 0; }
.search-list li + li { border-top: 1px solid var(--line); }
.search-list a { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; color: var(--text); }
.search-title { font-weight: 600; overflow-wrap: anywhere; }
.search-sub { font-size: var(--font-sm); color: var(--muted); }
.search-snippet { font-size: var(--font-sm); color: var(--muted); overflow-wrap: anywhere; }
.search-list mark { background: var(--accent-soft); color: var(--accent-strong); border-radius: 3px; padding: 0 1px; }

/* ---------------------------------------------------------------- 업체 (식예산 › 업체) */
.vendor-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0 var(--space-4); }
.vendor-card { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.vendor-card.excluded { opacity: .6; }
.vendor-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.vendor-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.vendor-name { font-weight: 700; font-size: var(--font-lg); color: var(--text); overflow-wrap: anywhere; }
.vendor-contact, .vendor-money { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.vendor-contact a { display: inline-flex; align-items: center; gap: 3px; }
.vendor-money .due, .vendor-items .due { color: var(--accent-strong); }
.vendor-memo {
    margin: 0; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vendor-items { list-style: none; margin: 0; padding: 0; }
.vendor-items li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) 0; }
.vendor-items li + li { border-top: 1px solid var(--line); }
.vendor-items a { font-weight: 600; margin-right: 6px; }
.vendor-items li.past a, .vendor-items li.past .due-date { color: var(--muted); font-weight: 400; }
.vendor-items .due-date { display: inline-block; width: auto; margin-right: 6px; }
.vendor-next { display: flex; align-items: center; gap: 6px; color: var(--info); }
.vendor-next b { margin-right: 4px; }

/* 예산표 항목 이름 옆 '사진 몇 장' */
.photo-count {
    display: inline-flex; align-items: center; gap: 1px; margin-left: var(--space-1); vertical-align: middle;
    font-size: var(--font-xs); font-weight: 600; color: var(--muted);
}

/* ---------------------------------------------------------------- 계약서·영수증 사진 (templates/photos/attachments.html) */
.attach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-2); }
.attach-tile {
    position: relative; margin: 0; aspect-ratio: 1; overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--soft);
}
.attach-view { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; cursor: zoom-in; }
.attach-view img { display: block; width: 100%; height: 100%; object-fit: cover; }
.attach-tile form { position: absolute; top: 4px; right: 4px; margin: 0; }
.attach-del {
    width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; line-height: 30px;
    background: rgba(40, 20, 30, .6); color: #fff; font-size: var(--font-sm);
}
.photo-add.attach-add { aspect-ratio: 1; min-height: 0; border-radius: var(--radius-sm); }
.attach-card > p { margin: 0; }

/* ---------------------------------------------------------------- 달마다 낼 돈 (식예산, BudgetPlan.dueGroups) */
.due-card { padding-bottom: var(--space-3); }
.due-card .section-title { margin-bottom: var(--space-1); }
.due-card > p { margin: var(--space-2) 0 0; }
.due-group + .due-group { border-top: 1px solid var(--line); }
.due-group > summary { display: flex; align-items: baseline; gap: var(--space-2); padding: 10px 0; cursor: pointer; list-style: none; }
.due-group > summary::-webkit-details-marker { display: none; }
.due-group > summary::before { content: "▸"; flex: none; color: var(--muted); font-size: var(--font-sm); transition: transform .15s; }
.due-group[open] > summary::before { transform: rotate(90deg); }
.due-label { font-weight: 600; }
.due-count { font-size: var(--font-sm); color: var(--muted); }
.due-total { margin-left: auto; font-size: var(--font-lg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.due-group.overdue .due-label, .due-group.overdue .due-total { color: var(--danger); }
.due-group.undated .due-label, .due-group.undated .due-total { color: var(--muted); }
.due-items { list-style: none; margin: 0 0 var(--space-2); padding: 0 0 0 var(--space-4); }
.due-items li { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--font-md); }
.due-date { flex: none; width: 72px; color: var(--muted); font-size: var(--font-sm); }
.due-date:empty { display: none; }
.due-what { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.due-what a { color: var(--text); }
.due-items b { flex: none; font-variant-numeric: tabular-nums; }
.stat .due-soon { color: var(--accent-strong); }

/* ---------------------------------------------------------------- 하객 명단 가져오기 (/guests/import) */
.import-summary p { margin: 0 0 var(--space-1); }
.import-summary p:last-child { margin-bottom: 0; }
.import-table input[type=checkbox] { width: 22px; height: 22px; margin: 0; vertical-align: middle; }
.import-actions { margin-bottom: var(--space-4); }
@media (max-width: 760px) {
    /* 휴대폰 카드: 체크는 오른쪽 위 (수정 링크가 없으므로 예산 카드보다 오른쪽으로) */
    .import-table td:first-child { right: var(--space-3); }
    .import-table td.title { padding-right: 40px; }
    /* 저장줄처럼 화면 아래에 붙지만 카드 안이 아니라서 바깥 여백은 없다 */
    .import-actions.form-actions { margin: 0 0 var(--space-4); border-radius: var(--radius); border: 1px solid var(--line); }
}

/* ---------------------------------------------------------------- 휴대폰 달력 구독 (달력 화면 아래) */
.feed-card > p { margin: 0 0 var(--space-3); }
.feed-card label { margin-bottom: var(--space-2); }
.feed-card input[readonly] { background: var(--tint); }   /* 글자는 16px 그대로 — 아이폰은 더 작은 칸을 고르면 화면을 확대한다 */
.feed-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.feed-buttons form { margin: 0; }
.feed-steps { margin: var(--space-2) 0 var(--space-3); padding-left: 1.3em; line-height: 1.6; }