@charset "utf-8";

/* ==========================================================================
   모인날 디자인 시스템
   관리자 · 업체 · 고객 · 접수 화면이 이 파일 하나를 공유합니다.

   ── 방향 ──────────────────────────────────────────────────────────────
   이 서비스는 결혼식과 장례식을 같은 화면 체계로 다룹니다.
   화려한 쪽에 맞추면 장례 화면이 무례해지고,
   가라앉은 쪽에 맞추면 돌잔치가 침울해집니다.
   그래서 기본 화면은 어느 쪽으로도 기울지 않게 중립으로 두고,
   행사 성격은 배지 색으로만 드러냅니다.

   형태는 '장부'에서 가져왔습니다.
   가로 괘선, 오른쪽으로 정렬된 금액, 폭이 일정한 숫자.
   카드를 쌓지 않고 줄을 긋습니다. 접수대장이 원래 그런 물건입니다.

   ── 하지 않은 것 ──────────────────────────────────────────────────────
   blur · backdrop-filter · 상시 애니메이션 · 그림자 겹치기.
   기존 모인날의 성능 문제가 여기서 나왔습니다. (기획 76장)
   ========================================================================== */

:root {
    /* ── 뉴 브랜드 색상 (Deep Navy + Champagne Gold) ───────────────── */
    --primary:    #17212B;    /* Deep Navy */
    --secondary:  #53616B;    /* Slate */
    --accent:     #B99A6B;    /* Champagne Gold */

    /* ── 배경 & 서피스 ────────────────────────────────────────────── */
    --bg-warm:    #F7F5F1;    /* Warm Ivory */
    --surface:    #FFFFFF;    /* White */

    /* ── 텍스트 & 라인 ───────────────────────────────────────────── */
    --text-primary:   #1C2329;    /* Text */
    --text-secondary: #727A80;    /* Sub Text */
    --border-color:   #E2DED7;    /* Border */

    /* ── 상태 색상 (3단계 각, 새 팔레트) ────────────────────────── */
    --success-900: #3D5F57;
    --success-500: #567C6F;
    --success-200: #BCDCC9;   /* 상태 면의 테두리(배지 · 접수대 안내) */
    --success-100: #E8F0ED;

    --warning-900: #8B7D4F;
    --warning-500: #C9A96B;
    --warning-200: #E5D3A3;
    --warning-100: #F9F4EB;

    --error-900:   #8B5450;
    --error-500:   #C66A6A;
    --error-200:   #E8C2BC;
    --error-100:   #F5E5E5;

    --info-900:    #3D5A72;
    --info-500:    #5B7A91;
    --info-100:    #E5ECEF;

    /* ── 기존 변수 (호환성 유지) ──────────────────────────────── */
    --ink:        var(--text-primary);
    --ink-soft:   var(--text-secondary);
    --ink-faint:  var(--neutral-500);   /* 보조 글자(.muted · 빈 상태 · 메뉴 묶음 이름). 예전 #A0A8B0 은 흰 바탕 대비 2.4:1 로 작은 글씨가 잘 안 읽혀 3.6:1 로 올림 */
    --paper:      var(--surface);
    --field:      var(--bg-warm);
    --line:       var(--border-color);
    --line-soft:  #F0E9E3;

    /* ── 브랜드 (Deep Navy 기반) ────────────────────────────────── */
    --brand-900:  #0F1419;
    --brand-800:  #17212B;
    --brand-500:  #17212B;
    --brand-100:  #E8EBF0;
    --brand-50:   #F3F5F8;

    --brand:      var(--brand-500);
    --brand-deep: var(--brand-800);
    --brand-wash: var(--brand-100);

    /* ── 포인트 컬러 (Champagne Gold, 제한적 사용) ───────────────── */
    --accent-900: #8B7D4F;
    --accent-500: var(--accent);
    --accent-100: #F9F7F2;

    /* ── 상태 별칭 ────────────────────────────────────────────────── */
    --ok:         var(--success-500);
    --warn:       var(--warning-500);
    --danger:     var(--error-500);
    --danger-wash:var(--error-100);
    --overlay:    rgba(23, 33, 43, .4);   /* 모달 · 알림 창 뒤 덮개(브랜드 네이비 계열, 너무 어둡지 않게) */

    /* ── 타이포그래피 (8단계) ──────────────────────────────────── */
    --text-xs:    12px;
    --text-sm:    13px;
    --text-base:  15px;
    --text-lg:    17px;
    --text-xl:    20px;
    --text-2xl:   24px;
    --text-3xl:   28px;
    --text-4xl:   32px;

    --lh-xs:      1.5;
    --lh-sm:      1.54;
    --lh-base:    1.65;
    --lh-lg:      1.65;
    --lh-xl:      1.5;
    --lh-2xl:     1.4;
    --lh-3xl:     1.3;
    --lh-4xl:     1.2;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold: 600;

    /* ── 간격 (8px 기반) ───────────────────────────────────────── */
    --space-1:    4px;
    --space-2:    8px;
    --space-3:    12px;
    --space-4:    16px;
    --space-5:    20px;
    --space-6:    24px;
    --space-7:    28px;
    --space-8:    32px;
    --space-10:   40px;
    --space-12:   48px;

    /* ── 모양 ──────────────────────────────────────────────────── */
    --radius:     4px;
    --radius-lg:  8px;

    /* ── 레이아웃 ──────────────────────────────────────────────── */
    --shell:      264px;
    --measure:    68ch;

    /* ── 뉴트럴 (warm 톤, 브랜드 팔레트와 조화) ─────────────── */
    --neutral-50:  #FAFAF8;
    --neutral-100: #F5F4F1;
    --neutral-200: #ECEAE5;
    --neutral-300: #E2DED7;
    --neutral-400: #B5B0A8;
    --neutral-500: #8A8680;
    --neutral-600: #6B6760;
    --neutral-700: #4A4742;
    --neutral-900: #1C2329;
}

/* ── 기본 ──────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--field);
    color: var(--ink);
    font: var(--text-base)/var(--lh-base) 'Pretendard Variable', Pretendard, -apple-system,
          BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
    font-feature-settings: "tnum";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 한국어는 낱말 중간에서 끊지 않습니다("기록은 유 / 지됩니다" 방지). 칸보다 긴 낱말(주소 · 영문 이름)만 끊습니다.
       공개 초대장(.card-invite) · 홈(.hp)과 같은 기준입니다. */
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 제목 크기 (기존과 호환) */
h1 { font-size: var(--text-2xl); font-weight: var(--fw-semibold); }
h2 { font-size: var(--text-lg); font-weight: var(--fw-semibold); }
h3 { font-size: var(--text-base); font-weight: var(--fw-semibold); }

h1, h2, h3 { margin: 0; letter-spacing: -0.01em; }
p  { margin: 0 0 12px; max-width: var(--measure); }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ── 셸 ────────────────────────────────────────────────────────────── */

.shell { display: flex; min-height: 100vh; }

.side {
    width: var(--shell);
    flex: 0 0 var(--shell);
    background: var(--paper);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
}

.side__brand {
    padding: 22px 22px 18px;
    border-bottom: 2px solid var(--accent);
}
.side__brand strong { display: block; font-size: 17px; letter-spacing: -0.02em; color: var(--primary); }
.side__brand span   { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-faint); }

.side__brand-logout {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--accent-100);
}

.side__nav { padding: 12px 0; flex: 1; overflow-y: auto; }

.side__group {
    padding: 14px 22px 6px;
    font-size: 12px;
    color: var(--ink-faint);
}

.side__link {
    display: block;
    padding: 9px 22px;
    color: var(--ink-soft);
    border-left: 3px solid transparent;
    font-size: 14px;
}
.side__link:hover { background: var(--neutral-50); text-decoration: none; }
.side__link[aria-current="page"] {
    border-left-color: var(--accent);
    background: var(--accent-100);
    color: var(--primary);
    font-weight: 600;
}

.side__foot {
    display: none;
    padding: 16px 22px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-faint);
}

.main { flex: 1; min-width: 0; }

.topbar {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4) var(--space-8);
    background: var(--paper);
    border-bottom: 1px solid var(--neutral-200);
}
.topbar h1 { letter-spacing: -0.01em; }
.topbar__spacer { flex: 1; }
/* 머리 막대의 단추 묶음 — 좁은 화면에서는 묶음째 다음 줄로 내려가고, 단추 글자는 줄바꿈하지 않습니다 */
.topbar__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.topbar__actions .btn { white-space: nowrap; }

.content { padding: var(--space-8); }
.content > * + * { margin-top: var(--space-6); }

/* 여러 구역(.panel)을 form 하나로 감쌀 때 — form 안의 구역 사이도 .content 와 같은 간격입니다.
   숨은 칸(@csrf · hidden)은 세지 않습니다. 화면마다 margin-top 을 덧대지 않습니다. */
.sections > :not([type="hidden"]):not([hidden]) ~ :not([type="hidden"]):not([hidden]) { margin-top: var(--space-6); }

/* ── 구역 ──────────────────────────────────────────────────────────── */

.panel {
    background: var(--paper);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.panel__head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--neutral-200);
    background: var(--neutral-50);
}
.panel__head .spacer { flex: 1; }
.panel__head h2 { font-size: var(--text-lg); font-weight: var(--fw-semibold); }
.panel__body { padding: 20px; }
/* 본문의 마지막 요소(문단 · 입력 칸 · 2열 묶음)가 가진 아래 여백은 쓰지 않습니다 — 구역 아래 여백이 위(20px)보다 12~16px 커지지 않게 */
.panel__body > :last-child { margin-bottom: 0; }

/* 한 구역 안에서 덩어리(본문 · 지표)가 이어지면 사이에 구분선 하나 — 화면마다 border 를 덧대지 않습니다 */
:is(.panel, .modal__box) > :not(.panel__head):not([hidden]):not([type="hidden"]):not(script) + :is(.panel__body, .figures, .modal__foot) {
    border-top: 1px solid var(--neutral-200);
}
/* 본문에서 블록 뒤에 오는 문단은 위를 띄웁니다(문단끼리는 기본 아래 여백과 겹쳐 그대로입니다) */
.panel__body > * + p { margin-top: var(--space-3); }

/* ── 지표 ──────────────────────────────────────────────────────────── */
/* 카드를 늘어놓지 않고 괘선으로 나눕니다. 장부의 합계란처럼 읽히도록. */

.figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    background: var(--paper);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
/* 셀 사이 괘선은 오른쪽 · 아래로 1px 그림자로 긋고, 바깥쪽은 .figures 의 overflow:hidden 이 잘라 냅니다.
   화면 폭에 따라 줄 수 · 칸 수가 바뀌어도 외곽선과 겹치거나 빠지는 선이 없습니다. */
.figure {
    padding: 18px 20px;
    box-shadow: 1px 0 0 var(--neutral-200), 0 1px 0 var(--neutral-200);
}
/* 구역(.panel) · 모달 안의 지표는 외곽선을 따로 갖지 않습니다 — 바깥 상자의 외곽선 하나만 */
:is(.panel, .modal__box) .figures { border: 0; border-radius: 0; }
.figure__label {
    font-size: var(--text-xs);
    color: var(--neutral-500);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.figure__value {
    margin-top: 8px;
    font-size: var(--text-3xl);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.02em;
    color: var(--neutral-900);
}
.figure__value small {
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    color: var(--neutral-500);
    margin-left: 6px;
}

/* ── 표 ────────────────────────────────────────────────────────────── */

.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--neutral-200);
    vertical-align: middle;
}
.table th {
    font-size: 13px; font-weight: 500; color: var(--neutral-500);
    background: var(--neutral-50);
    border-bottom: 1px solid var(--neutral-300);
    white-space: nowrap;
}
.panel .table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--neutral-50); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* 여러 칸을 묶는 머리글(대시보드 수량 추이의 발급 · 충전 …)은 묶은 칸들의 가운데 — 오른쪽이면 마지막 칸 머리글로 보입니다 */
.table th[colspan] { text-align: center; }
.table .shrink { width: 1%; white-space: nowrap; }
/* 한 줄에 이름-값 두 쌍(th td th td)을 두는 상세 표 — 좁은 화면에서는 한 줄에 한 쌍(날짜 · 업체명이 여러 줄로 접히지 않게) */
@media (max-width: 560px) {
    .table--pairs tr { display: grid; grid-template-columns: 88px 1fr; }
    .table--pairs th, .table--pairs td { display: block; }
    .table--pairs .shrink { width: auto; }
}
/* 표 안의 버튼 묶음은 한 줄로(좁으면 .table__scroll 이 가로로 넘깁니다) — Tabulator 칸과 같은 규칙 */
.table .btn-row { flex-wrap: nowrap; }
.table__scroll { overflow-x: auto; }
/* 표 안 글자 입력칸(측 이름 · 대표자 이름)이 좁은 화면에서 몇 px 로 찌그러지지 않게 — 넘치면 .table__scroll 이 가로로 넘깁니다 */
.table input[type="text"] { min-width: 120px; }

/* ── 배지 ──────────────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    line-height: 1.6;
    border: 1px solid var(--neutral-300);
    color: var(--neutral-700);
    background: var(--neutral-100);
    white-space: nowrap;
    gap: 4px;
}
/* 줄바꿈(<br>) 다음 줄 맨 앞에 오는 배지는 글자와 띄울 일이 없어 왼쪽 여백 없이 윗줄 글자와 맞춥니다(목록의 날짜 아래 '종료' 등) */
br + .badge { margin-left: 0; }
.badge--on     {
    border-color: var(--success-200);
    background: var(--success-100);
    color: var(--success-500);
}
.badge--off    {
    border-color: var(--neutral-300);
    background: var(--neutral-100);
    color: var(--neutral-500);
}
.badge--warn   {
    border-color: var(--warning-200);
    background: var(--warning-100);
    color: var(--warning-500);
}
.badge--danger {
    border-color: var(--error-200);
    background: var(--error-100);
    color: var(--error-500);
}
.badge--info   {
    border-color: var(--info-100);
    background: var(--info-100);
    color: var(--info-900);
}

/* 행사 성격은 여기서만 드러냅니다.
   클래스 이름은 App\Domain\Event\EventType::badge() 가 돌려주는 값과 같아야 합니다.
   돌잔치 키가 dohl → birthday 로 바뀌었는데 여기만 옛 이름으로 남아 있었습니다. */
.badge--wedding  { border-color: #d8c3cd; background: #faf2f5; color: #8a4a63; }
.badge--birthday { border-color: #cfdcc6; background: #f3f7ef; color: #55703f; }
.badge--funeral  { border-color: #d2d5d9; background: #f3f4f6; color: #464b52; }
.badge--custom   { border-color: #cfd6de; background: #f1f4f7; color: #3f5468; }

/* ── 버튼 ──────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
    padding: 12px 20px;
    min-height: 40px;
    font: inherit; font-size: var(--text-base); font-weight: var(--fw-medium);
    color: var(--neutral-900); background: var(--paper);
    border: 1px solid var(--neutral-300); border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 200ms ease-out;
}
.btn:hover { background: var(--neutral-200); text-decoration: none; }
.btn:active { background: var(--neutral-300); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary {
    background: var(--brand); border-color: var(--brand); color: #fff;
}
.btn--primary:hover { background: var(--brand-800); border-color: var(--brand-800); }
.btn--primary:active { opacity: .85; }

.btn--danger {
    border-color: var(--error-500); color: var(--error-500);
    background: var(--error-100);
}
.btn--danger:hover { background: var(--error-100); border-color: var(--error-500); }
.btn--danger:active { background: var(--error-500); color: #fff; }

.btn--sm { padding: 6px 11px; font-size: var(--text-sm); min-height: auto; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ── 입력 ──────────────────────────────────────────────────────────── */

.field { margin-bottom: var(--space-4); max-width: 480px; }
.field--wide { max-width: none; }

.field > label {
    display: block;
    margin-bottom: 8px;
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--neutral-700);
}
/* 입력 안내 — 전역 p 의 읽기 폭(--measure)과 .field 의 480px 제한을 받지 않고 구역 폭만큼 펴서 한두 줄로 읽히게 합니다.
   글자색은 흰 바탕에서 읽히는 대비(neutral-600), 여백은 위 6px 하나만(아래는 다음 요소가 정합니다). */
.field__hint { margin: 6px 0 0; max-width: none; font-size: var(--text-xs); color: var(--neutral-600); }
.field__hint + .field__hint { margin-top: 4px; }
.panel__body > .field__hint:has(+ :not(.field__hint)) { margin-bottom: var(--space-3); }
/* 안내가 있는 칸은 칸 자체의 480px 제한을 풀고, 입력 칸만 480px 로 둡니다(.input--sm · --md 는 그대로 이깁니다) */
:where(.field:has(> .field__hint)) { max-width: none; }
:where(.field:has(> .field__hint)) > :where(input, select, textarea) { max-width: 480px; }

input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=number], input[type=date], input[type=time], input[type=url], select, textarea {
    width: 100%;
    padding: 12px 16px;
    min-height: 44px;
    font: inherit;
    font-size: 16px;            /* iOS 에서 16px 미만이면 입력할 때 화면이 확대됩니다 */
    color: var(--neutral-900);
    background: var(--paper);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-lg);
    transition: all 200ms ease-out;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: inset 0 0 0 2px var(--brand-100);
}
textarea { min-height: 120px; resize: vertical; }
input:disabled, select:disabled {
    background: var(--neutral-100);
    color: var(--neutral-400);
    cursor: not-allowed;
}

.checkline { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.checkline input { width: auto; }

/* 라벨 텍스트 클릭으로 체크 상태 변경 방지 (업체 계정 활성화 등) */
.checkline--no-label-click { pointer-events: none; }
.checkline--no-label-click input { pointer-events: auto; }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
/* 2열 안의 칸 사이는 grid 간격 하나만 — 칸 아래 여백까지 더해져 두 배로 벌어지지 않게 */
.grid2 > .field { margin-bottom: 0; }
/* 2열 칸 중 체크 한 줄만 있는 칸은 옆 칸의 입력창과 높이를 맞춥니다(라벨 한 줄 + 아래 여백만큼 내림) */
.grid2 > .field > .checkline:only-child { min-height: 44px; margin-top: calc(var(--text-sm) * var(--lh-base) + 8px); }

/* 칸 안 · 본문 안에서 체크 줄 다음은 띄우고, 바로 아래 안내는 체크 줄에 붙여 글자 시작에 맞춥니다 */
:is(.field, .panel__body) > .checkline:not(:last-child) { margin-bottom: var(--space-3); }
:is(.field, .panel__body) > .checkline:has(+ .field__hint) { margin-bottom: var(--space-1); }
.checkline + .field__hint { margin-top: 0; padding-left: 26px; }
.field__hint + .btn { margin-top: var(--space-2); }

/* 입력 칸 폭 — 값이 짧은 칸에만. 높이 · 여백은 공통 그대로입니다. */
.input--sm  { max-width: 160px; }
.input--md  { max-width: 260px; }
.input--lg  { max-width: 480px; }
input.input--num { width: 104px; }

/* 한 줄 도구 막대 — 검색 · 거르기 · 줄 안의 작은 폼. 자리가 모자라면 아래 줄로 넘깁니다. */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.toolbar select, .toolbar input[type=date], .toolbar input[type=time] { width: auto; }
.toolbar input[type=text], .toolbar input[type=search], .toolbar input[type=password] { width: 100%; max-width: 260px; }
/* 막대 바로 안의 글자 칸은 160px 까지 줄어 옆 단추와 한 줄에 놓입니다(좁은 화면에서 [검색]만 다음 줄로 떨어지지 않게).
   넓은 화면은 지금처럼 260px. :where 라 줄 안 폼 · 입력 묶음 · 이력 검색줄의 규칙이 그대로 이깁니다. */
.toolbar > :where(input[type=text], input[type=search]) { flex: 1 1 160px; }
.toolbar .spacer { flex: 1; }
/* 이력 검색줄 — 넓은 화면에서는 선택 · 입력 · 버튼이 한 줄에 놓이고, 좁은 화면에서는 줄바꿈합니다 */
@media (min-width: 640px) {
    .toolbar--history { flex-wrap: nowrap; }
    .toolbar--history input[type=text] { flex: 1 1 160px; min-width: 120px; width: auto; }
    .toolbar--history .btn { flex: 0 0 auto; white-space: nowrap; }
}
fieldset.toolbar { min-width: 0; margin: 0; padding: 0; border: 0; }

/* 기간(시작 ~ 끝) — ~ 가 혼자 줄바꿈되지 않게 한 묶음으로 */
.toolbar__range { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: nowrap; }

/* ── 알림 ──────────────────────────────────────────────────────────── */

.flash {
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius);
    background: var(--brand-wash);
    font-size: 14px;
}
.flash--danger { border-left-color: var(--danger); background: var(--danger-wash); }
.flash:not(:last-child) { margin-bottom: var(--space-3); }

/* ── 모달 ──────────────────────────────────────────────────────────── */
/* 화면 위에 뜨는 입력 창. 안쪽은 .panel__head / .panel__body / .modal__foot 로 구역과 같은 모양입니다.
   열고 닫기는 JS 가 style.display = 'flex' / 'none'. <dialog> 는 그 요소에 .modal__box 만 붙입니다. */
.modal {
    position: fixed; inset: 0; z-index: 9999; margin: 0;
    display: none; align-items: center; justify-content: center;
    padding: var(--space-4);
    background: var(--overlay);
}
.modal__box {
    width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
    background: var(--paper);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
}
.modal__foot {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--neutral-200);
}
dialog.modal__box { max-width: 520px; width: calc(100% - 32px); padding: 0; border: 0; }
dialog.modal__box::backdrop { background: var(--overlay); }

/* ── 알림 창 (jAlert / jConfirm — partials/_jalert) ───────────────────────
   모든 화면이 같은 모양을 씁니다. 상자는 .modal__box, 단추는 .btn / .btn--primary(위험한 확인은 .btn--danger).
   구분선 없이 여백과 글자 위계로 나눕니다: 제목(--text-lg) → 본문(--text-base) → 단추.
   유형(info · success · warning · error)이 있으면 제목 앞에 같은 색의 아이콘만 붙고 구조는 같습니다.
   모달(9999) 위에 뜨도록 z-index 10000. */
.jalert__overlay {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-4);
    background: var(--overlay);
}
.jalert {
    max-width: 420px;
    display: flex; flex-direction: column;
    overflow: hidden;                 /* 긴 글은 본문만 스크롤, 단추는 늘 보임 */
}
.jalert__body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: var(--space-6) var(--space-6) var(--space-5);
}
.jalert__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.jalert__icon { flex: none; width: 20px; height: 20px; }
.jalert--info    .jalert__icon { color: var(--info-500); }
.jalert--success .jalert__icon { color: var(--success-500); }
.jalert--warning .jalert__icon { color: var(--warning-500); }
.jalert--error   .jalert__icon { color: var(--error-500); }
.jalert__title {
    margin: 0;
    font-size: var(--text-lg); font-weight: var(--fw-semibold); line-height: 1.4;
    color: var(--text-primary);
}
.jalert__msg {
    font-size: var(--text-base); line-height: 1.65;
    color: var(--neutral-700);
    white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere;   /* 줄바꿈 · 항목 들여쓰기를 그대로 */
}
.jalert__foot {
    display: flex; justify-content: flex-end; gap: var(--space-2);
    padding: 0 var(--space-6) var(--space-6);
}
.jalert__foot .btn { min-width: 88px; }
@media (max-width: 480px) {
    .jalert__body { padding: var(--space-5) var(--space-5) var(--space-4); }
    .jalert__foot { padding: 0 var(--space-5) var(--space-5); }
    .jalert__foot .btn { flex: 1 1 0; }    /* 엄지로 누르기 쉽게 단추를 폭에 맞춤 */
}

/* 저장이 거절된 칸 — jAlert 가 붙입니다 */
.is-invalid { border-color: var(--danger) !important; box-shadow: 0 0 0 2px var(--danger-wash) !important; }

/* ── 비어 있을 때 ──────────────────────────────────────────────────── */
/* 빈 화면은 안내가 아니라 다음 행동을 권하는 자리입니다 */

.empty { padding: 44px 20px; text-align: center; }
.empty h3 { margin-bottom: 6px; }
.empty p  { margin: 0 auto 16px; color: var(--ink-faint); font-size: 14px; }
.empty > :last-child { margin-bottom: 0; }   /* 위아래 여백을 같게(문단만 있을 때 아래가 16px 더 넓던 것) */

/* ── 쪽 넘김 ───────────────────────────────────────────────────────── */

.pager { display: flex; gap: 4px; padding: 14px 18px; justify-content: center; }
.pager a, .pager span {
    min-width: 34px; padding: 6px 9px;
    text-align: center; font-size: 14px;
    border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--ink-soft); background: var(--paper);
}
.pager .is-current { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager .is-disabled { color: var(--neutral-400); background: var(--field); }
/* 모바일: 쪽 번호가 많아도 화면 밖으로 밀리지 않게 줄바꿈하고 여백을 줄입니다(접수 내역 목록) */
@media (max-width: 560px) {
    .pager { flex-wrap: wrap; padding: 10px; }
    .pager a, .pager span { min-width: 32px; padding: 6px 7px; }
}

/* ── 로그인 ────────────────────────────────────────────────────────── */

.gate { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px 16px; background: var(--neutral-50); }
.gate__card {
    width: 100%; max-width: 360px;
    background: var(--paper);
    border: 1px solid var(--neutral-200);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.gate__title { margin-bottom: 2px; color: var(--primary); }
.gate__sub { margin-bottom: 22px; font-size: 13px; color: var(--ink-faint); }

/* ── 보조 ──────────────────────────────────────────────────────────── */

.muted  { color: var(--ink-faint); }
.small  { font-size: 13px; }
.nowrap { white-space: nowrap; }
.right  { text-align: right; }
.stack > * + * { margin-top: var(--space-3); }
.large    { font-size: var(--text-lg); }
.pre-line { white-space: pre-line; }
/* 안내 글 안의 파일 이름 예시(접수대장 사진 파일명) — 고정폭 글꼴은 한글 간격이 벌어지므로 본문 글꼴 그대로, 옅은 면으로만 구분합니다 */
code { padding: 1px 4px; font-family: inherit; font-size: inherit; background: var(--neutral-100); border-radius: var(--radius); }
/* 길어질 수 있는 목록(확인 창 안의 대상 목록 등) — 정해진 높이 안에서 스크롤 */
.scroll-list { max-height: 180px; overflow: auto; margin: var(--space-2) 0 var(--space-3); padding-left: 18px; }
.text-ok     { color: var(--ok); }
.text-danger { color: var(--danger); }

/* 작은 사진 — 크기는 width/height 속성으로, 모양만 여기서 */
.thumb { display: block; object-fit: cover; border-radius: var(--radius); }
.preview-img { display: block; max-width: 300px; max-height: 200px; margin-bottom: var(--space-2); border-radius: var(--radius-lg); }

/* 측 입력 한 줄 — company/_side-row 와 계정 화면 JS 가 같은 모양으로 그립니다 */
.side-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); margin-bottom: var(--space-2); }
.side-row > .field { flex: 1; min-width: 150px; margin: 0; }

/* 주소 · 지도 (partials/_kakao-picker) */
.kakao-picker { margin: var(--space-2) 0 var(--space-4); }
.kakao-picker > * + * { margin-top: var(--space-2); }
.kakao-picker__map { width: 100%; height: 260px; border: 1px solid var(--neutral-300); border-radius: var(--radius-lg); }
.inline-form { display: inline; }

/* ── 모바일 요소 (기본: 숨김) ────────────────────────────────────── */
.mobile-menu-toggle {
    display: none;
    padding: 8px 12px;
    margin-right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: var(--neutral-700);
}
.mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 40;
}
.mobile-menu-overlay.is-open { display: block; }

/* ── 모바일 (768px 이하) ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .side {
        position: fixed;
        top: 0;
        left: 0;
        width: 75vw;
        max-width: 320px;
        height: 100dvh;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 50;
        flex: none;
        border-right: none;
    }
    .side.is-open { transform: translateX(0); }

    .side__brand {
        flex-shrink: 0;
        padding: 16px 12px;
        border-bottom: 1px solid var(--neutral-200);
    }
    .side__brand strong {
        font-size: 14px;
        font-weight: 600;
        color: var(--neutral-900);
        margin-bottom: 2px;
    }
    .side__brand span {
        color: var(--neutral-500);
        margin-top: 0;
    }

    .side__nav {
        display: flex;
        flex-direction: column;
        padding: 8px 0;
    }

    .side__link {
        padding: 10px 12px;
        font-size: 13px;
        color: var(--neutral-500);
    }
    .side__link:hover { color: var(--neutral-900); }
    .side__link[aria-current="page"] { font-weight: 500; }

    .side__group {
        padding: 12px 12px 6px;
        font-size: 11px;
        font-weight: 600;
        color: var(--neutral-500);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .side__brand-logout { display: none; }

    .side__foot {
        display: flex;
        flex-shrink: 0;
        padding: 12px;
        border-top: 1px solid var(--neutral-200);
        color: var(--neutral-900);
    }
    .side__foot form { margin: 0; }

    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .topbar { padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
    /* 구역 제목 옆의 긴 안내 글은 다음 줄로(제목이 좁아지지 않게) */
    .panel__head { flex-wrap: wrap; }
    .content { padding: var(--space-4); }
    .field { max-width: none; }
}

@media print {
    .side, .topbar, .btn, .pager { display: none; }
    body { background: #fff; }
    .panel { border: 0; }
}

/* ==========================================================================
   접수 화면
   행사 당일 현장에서 한 손으로, 서서, 급하게 쓰는 화면입니다.
   관리 화면과 기준이 다릅니다. 정보 밀도보다 오조작을 막는 것이 우선입니다.

   - 버튼은 엄지로 눌러도 빗나가지 않을 크기 (최소 48px)
   - 중요한 것은 화면 아래쪽. 위쪽은 엄지가 닿지 않습니다.
   - 금액은 크게. 잘못 찍은 자릿수가 눈에 보여야 합니다.
   - 애니메이션 없음. 한 건이라도 더 빨리 받는 게 낫습니다.
   ========================================================================== */

.desk {
    max-width: 620px;            /* 고객 화면(.mine)과 같은 폭 */
    margin: 0 auto;
    padding: 0 0 120px;          /* 아래 고정 버튼에 가리지 않게 */
    min-height: 100vh;
    background: var(--paper);
}
/* 접수 화면도 고객 화면(.mine)처럼 바깥은 기본 바탕(--field, Warm Ivory), 가운데 열만 흰색입니다.
   body.desk-page 는 이 화면 전용으로 바탕을 따로 덮던 자리였고, 지금은 공통 바탕을 그대로 씁니다(hook 으로만 남김). */

/* 위 막대 — 고객 화면(.mine__bar)과 같은 흰 바탕 + 아래 구분선 + 같은 안쪽 여백 */
.desk__bar {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: var(--space-3);
    padding: 14px var(--space-4);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}
.desk__bar a { color: var(--ink); }
.desk__bar strong { font-size: var(--text-base); font-weight: var(--fw-semibold); }
.desk__bar .spacer { flex: 1; }
.desk__bar .desk__side {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: var(--text-sm);
}
/* 글자 링크처럼 보이는 버튼 — 바 안의 "로그아웃"처럼 <form><button> 이어야 하는 자리에 씁니다 */
.desk__bar button.linklike {
    background: none; border: 0; padding: 0;
    color: var(--ink); font: inherit; font-size: 14px; cursor: pointer;
}

/* 테스트 접수 안내 — 상태 면 --warning-100 · 테두리 --warning-200 · 진한 상태 글씨 --warning-900(26.8, .badge--warn 과 같은 계열) */
.desk__test {
    padding: 10px 16px;
    background: var(--warning-100);
    border-bottom: 1px solid var(--warning-200);
    color: var(--warning-900);
    font-size: 14px;
}

.desk__body { padding: var(--space-5) var(--space-4); }   /* 고객 화면 .mine__body 와 같은 여백 */
/* 접수 입력 첫 줄('봉투 사진')이 맨 위일 때만 위 여백을 라벨 아래 여백(--space-2)과 같게 줄입니다 */
.desk__body > #entryForm:first-child { margin-top: calc(var(--space-2) - var(--space-5)); }

/* 방금 등록된 건 — 다음 접수를 받는 동안 확인용으로 남습니다 */
.desk__done {
    display: flex; align-items: baseline; gap: 10px;
    padding: 8px 14px;
    margin-bottom: 12px;
    line-height: 1.3;
    background: var(--success-100);
    border: 1px solid var(--success-200);
    border-radius: var(--radius-lg);
}
.desk__done b { font-size: 18px; color: var(--ok); }
.desk__done span { color: var(--neutral-700); font-size: var(--text-base); }

.desk__notice {
    padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5);
    background: var(--error-100);
    border: 1px solid var(--error-200);
    border-radius: var(--radius-lg);
    color: var(--error-500);
    font-size: var(--text-base);
}

.desk__label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
    color: var(--ink-soft);
}

/* 제목 줄 — 오른쪽에 보조 버튼(.btn btn--sm)을 둘 수 있습니다 */
.desk__labelRow {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: var(--space-4); margin-bottom: var(--space-2);
}
.desk__labelRow .desk__label { margin: 0; }

/* 금액 입력칸 — 직접 입력하거나 아래 버튼으로 더합니다.
   테두리 · radius 는 입력창 공통값(1px --line, --radius-lg) */
.desk__amount {
    width: 100%;
    padding: 14px 16px;
    font-size: 34px;
    font-weight: 600;
    text-align: right;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
}
.desk__amount:focus { border-color: var(--brand); box-shadow: none; outline: none; }

/* 금액 한 줄 — 라벨 · 입력칸 · 전체 지우기. 입력칸이 남는 폭을 쓰고(min-width:0), 라벨·버튼은 줄바꿈 없이 제 크기 */
.desk__amountRow {
    display: flex; align-items: center; gap: var(--space-2);
    margin-top: var(--space-4);
}
.desk__amountRow .desk__label { margin: 0; flex: none; white-space: nowrap; }
.desk__amountRow .desk__amount { flex: 1 1 0; min-width: 0; width: auto; font-size: 22px; padding: 8px 12px; }
.desk__amountRow .desk__amount::placeholder { font-size: 15px; font-weight: 400; letter-spacing: 0; }
.desk__amountRow .btn { flex: none; white-space: nowrap; }
@media (max-width: 380px) { .desk__amountRow .desk__req { display: none; } }

/* 금액 버튼 — 공통 .btn 그대로, 네 칸에 고르게 */
.desk__quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* 사진 — 첫 동작이라 화면에서도 맨 위입니다.
   봉투를 받아 들고 찍고, 그 봉투를 보면서 금액을 넣습니다. */
.desk__photo {
    border: 2px dashed var(--line);
    border-radius: var(--radius-lg);
    padding: 8px;
    text-align: center;
    background: var(--field);
}
.desk__photo.is-ready {
    border-style: solid;
    border-color: var(--success-200);
    background: var(--success-100);
}

/* 사진 칸 — 세로 3:4.
   촬영 전 카메라 · 촬영 후 사진 · 접수 내역의 사진이 모두 같은 비율이라
   상태가 바뀌어도 칸의 크기가 그대로입니다.
   높이는 화면의 40% 까지만 써서 금액 · 등록 버튼을 밀어내지 않습니다(--frame-h).
   사진은 자르거나 늘리지 않고 칸 안에 맞춥니다(object-fit: contain). */
.desk__frame {
    position: relative;
    width: min(100%, calc(var(--frame-h, 40vh) * 3 / 4));
    aspect-ratio: 3 / 4;
    margin: 0 auto;
    background: var(--brand-900);
    border-radius: var(--radius);
    overflow: hidden;
}
/* 화면이 낮은 폰(SE 등)은 조금 더 줄여서 금액 칸이 등록 버튼 위에 오게 합니다 */
@media (max-height: 700px) {
    .desk__frame { --frame-h: 36vh; }
}
.desk__cam,
.desk__shot {
    position: absolute; inset: 0;
    display: block; width: 100%; height: 100%;
    object-fit: contain;
}

.desk__photoActions {
    display: flex; gap: 6px;
    justify-content: center; align-items: stretch;
    margin-top: 8px;
}
.desk__photoActions .desk__pick { flex: 1 1 0; min-width: 0; }
.desk__hint { color: var(--ink-faint); font-size: 13px; margin-top: 8px; }

/* 메모 — 처음에는 제목 줄만 보입니다. 누르면 입력칸이 펼쳐지고, 줄은 평범한 제목으로 바뀝니다. */
.desk__memo { margin-top: 10px; }
.desk__memoBar {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 44px; padding: 0 14px;
    font: inherit; font-size: 14px; color: var(--ink-soft); text-align: left;
    background: var(--field); border: 1px solid var(--line); border-radius: var(--radius);
    cursor: pointer;
}
.desk__memoMark { font-size: 16px; color: var(--ink-faint); }
.desk__memoBar.is-open {
    min-height: 0; padding: 0; margin-bottom: 8px;
    background: none; border: 0; cursor: default; pointer-events: none;
}
.desk__memoBar.is-open .desk__memoMark { display: none; }

.desk__req {
    display: inline-block; margin-left: 6px;
    padding: 1px 7px; border-radius: 999px;
    background: var(--danger-wash); color: var(--danger);
    font-size: 12px;
}

/* 파일 입력은 display:none 으로 감추지 않습니다.
   숨겨진 필수 항목이 있으면 브라우저가 "포커스할 수 없다" 며 제출을 조용히 막습니다.
   지금은 required 도 떼었지만, 자리만 없애는 방식으로 감춥니다. */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

.desk__notice--test {
    background: var(--warning-100);
    border-color: var(--warning-200);
    color: var(--warning-900);
}

/* 접수 화면 맨 아래 테스트 안내 — 사용 현황과 삭제 버튼은 한 줄로 */
.desk__testFoot {
    margin-top: var(--space-5);
    padding: 10px var(--space-3);
    background: var(--warning-100);
    border: 1px solid var(--warning-200);
    border-radius: var(--radius-lg);
    color: var(--warning-900);
    font-size: 13px; line-height: 1.45;
}
.desk__testFoot p { margin: 0 0 6px; }
.desk__testFoot__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.desk__testFoot__row form { margin: 0; flex: none; }
.desk__testFoot__row .btn { white-space: nowrap; }
/* 고정 등록 버튼에 가려지지 않게 */
body:has(> .desk__submit) .desk__body { padding-bottom: calc(56px + 24px + var(--space-5) + env(safe-area-inset-bottom)); }

.desk__pick {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; padding: 0 10px;
    font-size: 14px; font-weight: 600; line-height: 1.2;
    color: #fff; background: var(--brand);
    border: 0; border-radius: var(--radius);
    cursor: pointer;
}
.desk__pick--ghost {
    color: var(--brand);
    background: var(--paper);
    border: 1px solid var(--brand);
}

/* 아래 고정 등록 버튼 — 엄지가 닿는 자리 */
.desk__submit {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
    max-width: 620px; margin: 0 auto;   /* 가운데 열(.desk)과 같은 폭으로 맞춥니다 */
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--line);
}
.desk__submit button {
    width: 100%; min-height: 56px;
    font-size: 18px; font-weight: 600;
    color: #fff; background: var(--brand);
    border: 0; border-radius: var(--radius-lg);
    cursor: pointer;
}
.desk__submit button:disabled { background: var(--neutral-400); cursor: progress; }

/* 큰 선택 버튼 — 측 고르기, 행사 고르기 */
.desk__choice {
    display: block; width: 100%;
    min-height: 68px; padding: 16px 18px;
    margin-bottom: 12px;
    font-size: 18px; font-weight: 600;
    text-align: left;
    color: var(--ink); background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    cursor: pointer;
}
.desk__choice:hover { text-decoration: none; }
.desk__choice:active { background: var(--brand-wash); }
.desk__choice small { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--ink-faint); }

/* 지금 고른 측 — 누르고 있는 동안만 잠깐 켜지는 :active 와 다르게, 골라 둔 동안 계속 켜져 있습니다.
   서버가 다시 그릴 때는 이 클래스로 표시하고(선택된 측을 기억한 채 이 화면으로 돌아온 경우),
   JS 로 서버 왕복 없이 대표자 이름을 확인할 때도 같은 클래스를 그대로 씁니다. */
.desk__choice.is-selected,
.desk__choice.is-selected:active {
    border-color: var(--brand);
    background: var(--brand-wash);
}

/* 접수내역 한 줄 */
.desk__row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
}
.desk__row img { width: 48px; height: 48px; border-radius: var(--radius); object-fit: cover; flex: none; }
.desk__row .no { width: 42px; flex: none; color: var(--ink-faint); font-size: 14px; font-variant-numeric: tabular-nums; }
.desk__row .body { flex: 1; min-width: 0; }
.desk__row .amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.desk__row.is-canceled { opacity: .55; }
.desk__row.is-canceled .amt { text-decoration: line-through; }

/* 접수 내역 상세 창
   한 줄을 누르면 목록 아래로 펼치지 않고 <dialog> 가 위에 뜹니다.
   내용이 길면 창 안에서만 스크롤되고, 뒤 화면은 잠깁니다(html.is-locked). */
/* 한 줄에서 눌러서 하는 일은 둘: 썸네일 = 사진 확대, 나머지 = 상세 · 수정 창 */
.desk__thumb {
    flex: none; padding: 0; margin: 0;
    background: none; border: 0; border-radius: var(--radius);
    cursor: zoom-in; -webkit-tap-highlight-color: transparent;
}
.desk__rowMain {
    flex: 1; min-width: 0; margin: 0; padding: 6px 0;
    display: flex; align-items: center; gap: 12px;
    font: inherit; color: inherit; text-align: left;
    background: none; border: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.desk__rowMain:active { background: var(--brand-wash); }

/* 접수 화면 맨 아래 — 이전 등록 건 */
.desk__recent { margin-top: 28px; padding-top: 6px; }
.desk__recentHead {
    display: flex; align-items: baseline; justify-content: space-between;
    padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.desk__recentHead h2 { margin: 0; font-size: 15px; font-weight: 600; }
.desk__recentHead a { font-size: 13px; }

html.is-locked,
html.is-locked body { overflow: hidden; }

/* --vvh · --vvt 는 키보드가 올라와 줄어든 "보이는 영역" (JS 가 채웁니다) */
.desk__sheet {
    position: fixed;
    top: calc(var(--vvt, 0px) + 8px); bottom: auto; left: 8px; right: 8px;
    width: auto; max-width: 520px; margin: 0 auto;
    max-height: calc(var(--vvh, 100vh) - 16px);
    padding: 0;
    color: var(--ink); background: var(--paper);
    border: 0; border-radius: var(--radius-lg);
    overflow-y: auto; overscroll-behavior: contain;
}
.desk__sheet::backdrop { background: var(--overlay); }   /* 모달 · 알림 창과 같은 덮개 */

.desk__sheetHead {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 6px 4px 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--line-soft);
    font-size: 16px;
}
.desk__sheetClose {
    width: 44px; height: 44px;
    font-size: 20px; line-height: 1; color: var(--ink-soft);
    background: none; border: 0; border-radius: var(--radius);
    cursor: pointer;
}
.desk__sheetBody { padding: 16px; }

/* 사진은 촬영 화면과 같은 세로 3:4 칸 */
.desk__sheetPhotoLink {
    display: block;
    width: min(100%, calc(40vh * 3 / 4)); aspect-ratio: 3 / 4;
    margin: 0 auto 16px;
    background: var(--brand-900); border-radius: var(--radius);
    overflow: hidden;
}
.desk__sheetPhoto { display: block; width: 100%; height: 100%; object-fit: contain; }

.desk__sheet .btn-row .btn { flex: 1; min-height: 48px; }

/* 사진 확대 — 원본 비율 그대로 화면 안에 맞춥니다. 보기만 하는 창이라 어디를 눌러도 닫힙니다. */
.desk__zoom {
    position: fixed; top: var(--vvt, 0px); left: 0; right: 0; bottom: auto;
    width: 100%; max-width: none; height: var(--vvh, 100vh); max-height: none;
    margin: 0; padding: 0; border: 0; background: transparent;
}
.desk__zoom[open] { display: flex; align-items: center; justify-content: center; }
.desk__zoom::backdrop { background: rgba(14, 17, 20, .88); }
.desk__zoom img {
    display: block; max-width: 100%; max-height: 100%;
    object-fit: contain;
}
.desk__zoomClose {
    position: absolute; top: 8px; right: 8px;
    width: 44px; height: 44px;
    font-size: 20px; line-height: 1; color: #fff;
    background: rgba(0, 0, 0, .45); border: 0; border-radius: 999px;
    cursor: pointer;
}
.desk__sheetFoot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.desk__sheetFoot p { margin-top: 10px; }

/* ==========================================================================
   고객 화면
   행사 후 정리를 소파에 앉아 휴대폰으로 합니다.
   관리 화면처럼 사이드바를 두지 않고, 아래에 탭을 둡니다.
   ========================================================================== */

.mine { max-width: 620px; margin: 0 auto; padding: 0; min-height: 100vh; background: var(--paper); }

.mine__bar {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}
.mine__bar h1 { font-size: 17px; }
.mine__bar .spacer { flex: 1; }

.mine__body { padding: var(--space-5) var(--space-4); }
.mine__body > * + * { margin-top: var(--space-5); }
/* 아래 고정 버튼(.desk__submit — 이름 정리 화면)이 있으면 마지막 내용이 막대에 가리지 않게 막대 높이만큼 더 비웁니다.
   모든 폭에 적용합니다(예전 화면 전용 style 은 767px 이하에서만 비워 PC 에서 [건너뛰기] · [목록]이 가렸습니다). */
body:has(> .desk__submit) .mine__body { padding-bottom: calc(56px + var(--space-3) * 2 + var(--space-5) + env(safe-area-inset-bottom)); }

/* 탭은 화면 위에 붙입니다.
   아래 고정이 휴대폰 관례이긴 하지만, 이 화면은 정리하다 스크롤을 오래 하는 곳이라
   손이 닿는 자리보다 "지금 어디인지" 가 늘 보이는 편이 낫습니다. */
.mine__tabs {
    position: sticky; top: 0; z-index: 6;
    display: flex;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.mine__tabs a {
    flex: 1;
    padding: 13px 4px 12px;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--neutral-500);
    border-bottom: 3px solid transparent;
    transition: all 200ms ease-out;
}
.mine__tabs a:hover { text-decoration: none; color: var(--neutral-700); }
.mine__tabs a[aria-current="page"] {
    color: var(--primary);
    border-bottom-color: var(--accent);
    font-weight: var(--fw-semibold);
}

/* 접수대장 안의 두 번째 탭(접수 내역 · 이름 정리) — 위 .mine__tabs 아래에 붙지 않고 본문 안에 놓입니다.
   현재 탭은 aria-current="page". 정리 진행 막대는 공통 .stat-bar 를 씁니다. */
.mine__subtabs { display: flex; border-bottom: 1px solid var(--line); }
.mine__subtabs a {
    flex: 1; padding: var(--space-3) 0;
    text-align: center; font-size: 14px;
    color: var(--ink-faint);
    border-bottom: 3px solid transparent;
}
.mine__subtabs a:hover { text-decoration: none; color: var(--neutral-700); }
.mine__subtabs a[aria-current="page"] {
    color: var(--brand-deep); font-weight: var(--fw-semibold);
    border-bottom-color: var(--brand);
}

/* 한 건씩 정리하는 화면 */
.organize__photo {
    display: block;
    width: 100%;
    max-height: 46vh;
    object-fit: contain;
    background: var(--brand-900);
    border-radius: var(--radius-lg);
}
.organize__no {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--brand-100);
    color: var(--brand-800);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
}
.organize__name {
    width: 100%;
    padding: 14px 16px;
    font-size: 22px;
    border: 2px solid var(--neutral-300);
    border-radius: var(--radius-lg);
    transition: all 200ms ease-out;
}
.organize__name:focus { border-color: var(--brand); outline: none; box-shadow: inset 0 0 0 2px var(--brand-100); }

.organize__chips { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.organize__chips button {
    padding: 9px 16px;
    font-size: var(--text-sm);
    color: var(--neutral-700);
    background: var(--paper);
    border: 1px solid var(--neutral-300);
    border-radius: 999px;
    cursor: pointer;
    transition: all 200ms ease-out;
}
.organize__chips button:hover {
    border-color: var(--neutral-400);
    background: var(--neutral-100);
}
.organize__chips button[aria-pressed="true"] {
    background: var(--brand-100);
    border-color: var(--brand);
    color: var(--brand-800);
    font-weight: var(--fw-semibold);
}

/* ==========================================================================
   공개 초대장
   하객이 카카오톡에서 열어 몇 초 보고 닫는 페이지입니다.
   행사 성격에 따라 색만 갈아 끼우고 구조는 같습니다.
   장례식 초대장이 결혼식과 같은 색이면 그 자체로 실례입니다.
   ========================================================================== */

.card-invite {
    --accent: #8a4a63;
    --accent-wash: #faf2f5;
    --paper-invite: #fffdfb;

    max-width: 480px;
    margin: 0 auto;
    background: var(--paper-invite);
    min-height: 100vh;
    color: var(--invite-ink, #221d20);
    font-size: 16px;
    /* 바탕 행간은 한 줄짜리 라벨 · 값 · 단추 기준(1.6). 여러 줄 문단(인사말 · 상단 문구 · 맺음말 · 방명록 글)은 각 class 가 1.85 를 줍니다.
       예전엔 1.85 가 모든 줄에 물려 내려가 한 줄 행(연락처 등)이 56px 이 됐습니다. */
    line-height: 1.6;
    /* 한국어는 낱말 중간에서 끊지 않습니다(주소 · 안내 문구가 "상리2 / 길" 처럼 갈라지지 않게). 너무 긴 낱말만 끊습니다. */
    word-break: keep-all; overflow-wrap: break-word;
    /* 글자 기준 — 섹션이 달라도 같은 종류의 글자는 같은 값을 씁니다
       라벨(일시 · 연락처 · 참석 여부 칸 이름) 13px · 본문 값 15px · 보조 14px · 안내 13px · 작은 표시 12px */
    --invite-label-w: 72px;
    /* 간격 — 섹션 위아래 · 섹션 이름 아래 · 목록 한 줄 위아래 */
    --invite-sec-pad: 28px;
    --invite-title-gap: 16px;
    --invite-row-pad: 10px;
    /* 선 — 섹션 사이에는 긋지 않고(여백과 섹션 이름으로 나눔), 목록 줄과 입력 칸 밑줄만 이 한 가지 옅은 선을 씁니다.
       단추와 선택 칸은 테두리 대신 옅은 면(--accent-wash, --invite-track)으로 구분합니다. */
    --invite-hairline: color-mix(in srgb, var(--invite-line, #ddd) 45%, transparent);
    --invite-track: color-mix(in srgb, var(--invite-line, #ddd) 25%, transparent);
}
/* 관리 화면용 문단 기본값(아래 12px · 폭 제한)을 초대장에서는 끕니다. 간격은 각 class 가 정합니다(:where 라 class 규칙이 이깁니다) */
:where(.card-invite) p { margin: 0; max-width: none; }
/* 단추 · 입력 칸은 브라우저 기본 글꼴(Arial)로 빠지지 않고 초대장 글꼴을 따릅니다 */
.card-invite :is(button, input, select, textarea) { font-family: inherit; }
/* ── 스타일 (색과 글꼴만) ─────────────────────────────────────────
   행사 종류와 무관합니다. 결혼식 '모던' 과 돌잔치 '모던' 은 같은 색입니다.
   무엇을 보여 줄지는 섹션 목록이, 어떻게 배치할지는 레이아웃이 정합니다. */

.card-invite { --invite-title: 'Nanum Myeongjo', 'Apple SD Gothic Neo', serif; }
.card-invite .invite__names,
.card-invite .invite__thanksLine { font-family: var(--invite-title); }

/* ── 컬러 테마 6가지 (결혼식 · 돌잔치 공통) ───────────────────────
   메인 · 보조 · 배경 · 포인트가 한 세트입니다(원본: InvitationTemplates::themes()).
   아래 --theme-* 가 그 네 색이고, 나머지는 읽기 좋게 파생한 값입니다.
     --accent        메인 — 제목 · 이름 · 선 · 단추 · 아이콘
     --paper-invite  배경
     --accent-wash   연한 면 — 메인 글씨가 올라가도 읽히는 포인트 톤(포인트 32% + 배경)
     --accent-text   작은 글씨용 메인(배경 위 4.6:1 이상으로 어둡게)
     --invite-ink / -ink-soft / -sub / -faint   본문 · 인사말 · 보조 글씨(4.5:1 이상)
     --invite-line / -field-line               구분선 · 입력칸 테두리(보조색 기반)
     --on-accent     메인 바탕 위 글씨(흰색 또는 어두운색 중 대비가 큰 쪽)
   이 변수를 정하지 않는 스타일(장례식 'calm' · 예전 스타일)은 var() 의 대체값으로 예전 색 그대로입니다. */
/* 클래식 네이비 */
.card-invite--navy {
    --theme-main: #30465F; --theme-sub: #71859A; --theme-bg: #F7F5F0; --theme-point: #B9A47C;
    --accent: #30465F; --paper-invite: #F7F5F0; --accent-wash: #e3dbcb;
    --accent-text: #30465F; --on-accent: #ffffff;
    --invite-ink: #1d1f22; --invite-ink-soft: #283747; --invite-sub: #51606f; --invite-sub-text: #51606f; --invite-faint: #51606f;
    --invite-line: #bbc3c9; --invite-field-line: #b8c2cd;
}
.card-invite--navy { --invite-backdrop: #dadcdd; }
/* 세이지 그린 */
.card-invite--sage {
    --theme-main: #526B57; --theme-sub: #8C9D89; --theme-bg: #F7F5EF; --theme-point: #D8DCCF;
    --accent: #526B57; --paper-invite: #F7F5EF; --accent-wash: #edede5;
    --accent-text: #526B57; --on-accent: #ffffff;
    --invite-ink: #212421; --invite-ink-soft: #38473b; --invite-sub: #5f6b5d; --invite-sub-text: #5f6b5d; --invite-faint: #5f6b5d;
    --invite-line: #c7cdc1; --invite-field-line: #c6cec4;
}
.card-invite--sage { --invite-backdrop: #dfe2d9; }
/* 로즈 베이지 */
.card-invite--rose {
    --theme-main: #B77E78; --theme-sub: #D8AAA2; --theme-bg: #FAF5F1; --theme-point: #E8D9D2;
    --accent: #B77E78; --paper-invite: #FAF5F1; --accent-wash: #f4ece7;
    --accent-text: #875d59; --on-accent: #1d1b1b;
    --invite-ink: #2d2625; --invite-ink-soft: #543c39; --invite-sub: #7d635e; --invite-sub-text: #7d635e; --invite-faint: #7d635e;
    --invite-line: #ebd3cd; --invite-field-line: #ecd5d1;
}
.card-invite--rose { --invite-backdrop: #f3e5e0; }
/* 더스티 블루 */
.card-invite--dusty {
    --theme-main: #5D788D; --theme-sub: #9EAFBB; --theme-bg: #F5F6F5; --theme-point: #D8E0E3;
    --accent: #5D788D; --paper-invite: #F5F6F5; --accent-wash: #ecefef;
    --accent-text: #546c7f; --on-accent: #ffffff;
    --invite-ink: #222528; --invite-ink-soft: #37444f; --invite-sub: #626c74; --invite-sub-text: #626c74; --invite-faint: #626c74;
    --invite-line: #ced6db; --invite-field-line: #cfd7dd;
}
.card-invite--dusty { --invite-backdrop: #e2e6e8; }
/* 라벤더 그레이 */
.card-invite--lavender {
    --theme-main: #8B809B; --theme-sub: #B9AEC5; --theme-bg: #F7F5F8; --theme-point: #E2DDE8;
    --accent: #8B809B; --paper-invite: #F7F5F8; --accent-wash: #f0edf3;
    --accent-text: #6f667c; --on-accent: #1d1b1b;
    --invite-ink: #282629; --invite-ink-soft: #45404d; --invite-sub: #6f6876; --invite-sub-text: #6f6876; --invite-faint: #6f6876;
    --invite-line: #dbd5e1; --invite-field-line: #dcd7e2;
}
.card-invite--lavender { --invite-backdrop: #e9e5ed; }
/* 모카 브라운 */
.card-invite--mocha {
    --theme-main: #806252; --theme-sub: #AE9584; --theme-bg: #F8F4EE; --theme-point: #DED1C4;
    --accent: #806252; --paper-invite: #F8F4EE; --accent-wash: #f0e9e1;
    --accent-text: #806252; --on-accent: #ffffff;
    --invite-ink: #262321; --invite-ink-soft: #4f3f35; --invite-sub: #76655a; --invite-sub-text: #76655a; --invite-faint: #76655a;
    --invite-line: #d7c9be; --invite-field-line: #d7cac2;
}
.card-invite--mocha { --invite-backdrop: #e8dfd7; }
.template-card__swatch.template-card__swatch--set { display: flex; overflow: hidden; border: 1px solid rgba(0,0,0,.08); }
.template-card__swatch--set > span { display: block; flex: 1 1 0; height: 100%; }

.card-invite--classic { --accent: #8a4a63; --accent-wash: #faf2f5; --paper-invite: #fffdfb; }

.card-invite--modern {
    --accent: #2f4661; --accent-wash: #eef2f6; --paper-invite: #fdfdfe;
    --invite-title: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
.card-invite--gentle { --accent: #b9705a; --accent-wash: #fbf2ee; --paper-invite: #fffcfa; }

.card-invite--fresh {
    --accent: #55703f; --accent-wash: #f3f7ef; --paper-invite: #fdfefb;
    --invite-title: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
.card-invite--warm {
    --accent: #b8873a; --accent-wash: #fbf6ea; --paper-invite: #fffdf7;
    --invite-title: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

.card-invite--calm {
    --accent: #464b52; --accent-wash: #f3f4f6; --paper-invite: #fbfbfc; color: #23262a;
}


.invite__hero { position: relative; }
.invite__hero img { width: 100%; display: block; }
.invite__hero--none { padding: 56px 24px 0; text-align: center; }

.invite__head { padding: var(--invite-sec-pad) 26px; text-align: center; }
.invite__type {
    font-size: 13px; letter-spacing: .18em;
    color: var(--accent-text, var(--accent));
}
.invite__names {
    margin: 10px 0 6px;
    font-size: 27px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.5;
}
.invite__when { color: var(--invite-sub-text, #6a6468); font-size: 15px; line-height: 1.75; }
/* 상단 문구(결혼식 안내 · 첫돌 축하) — 편집 칸(.inv-input)도 같은 규칙을 씁니다 */
.invite__heroText,
.inv-stage .invite__heroText.inv-input { margin-top: 16px; text-align: center; font-size: 15px; line-height: 1.85; }
.invite__head .invite__heroText,
.inv-stage .invite__head .invite__heroText.inv-input { color: var(--invite-ink-soft, #3c3539); }

/* 섹션 — 위아래 · 섹션 이름 아래 간격은 위 변수 */
.invite__section { padding: var(--invite-sec-pad) 26px; }
.invite__section h2 {
    margin-bottom: var(--invite-title-gap);
    font-size: 13px; font-weight: 600; letter-spacing: .12em; line-height: 1.5;
    color: var(--accent-text, var(--accent));
    text-align: center;
}
/* 섹션 이름 위 아이콘 — 일시 · 오시는 길 · 갤러리 · 계좌 네 곳에만. Lucide 1.48.0(25.4) 모양을 가는 선(1.5)으로 옮겨 메인색으로 칠합니다(테마 색을 따라감).
   공개 초대장에 아이콘 스크립트를 싣지 않으려고 _lucide 대신 CSS mask 로 넣었습니다(calendar-days · cake · building · map-pin · camera · mail).
   행사 분위기: 돌잔치 일시는 케이크, 부고 빈소 안내는 건물, 나머지는 같은 모양. 편집 · 미리보기 · 공유 화면이 같은 섹션 blade 를 쓰므로 함께 바뀝니다. */
.invite__schedule   { --invite-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2v3M16 2v3'/><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M3 9h18M8 13h.01M12 13h.01M16 13h.01M8 17h.01M12 17h.01M16 17h.01'/></svg>"); }
.invite__schedule--birthday { --invite-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1M2 21h20M7 8v3M12 8v3M17 8v3M7 4h.01M12 4h.01M17 4h.01'/></svg>"); }
.invite__mourning   { --invite-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 10h.01M12 14h.01M12 6h.01M16 10h.01M16 14h.01M16 6h.01M8 10h.01M8 14h.01M8 6h.01M9 22v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3'/><rect x='4' y='2' width='16' height='20' rx='2'/></svg>"); }
.invite__location   { --invite-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/><circle cx='12' cy='10' r='3'/></svg>"); }
.invite__gallery    { --invite-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z'/><circle cx='12' cy='13' r='3'/></svg>"); }
.invite__accounts   { --invite-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/><rect x='2' y='4' width='20' height='16' rx='2'/></svg>"); }
.invite__section:is(.invite__schedule, .invite__mourning, .invite__location, .invite__gallery, .invite__accounts) > h2::before {
    content: ''; display: block; width: 24px; height: 24px; margin: 0 auto 8px;
    background: var(--accent-text, var(--accent)); opacity: .8;
    -webkit-mask: var(--invite-icon) center / contain no-repeat; mask: var(--invite-icon) center / contain no-repeat;
}
/* 인사말 — 제목은 명조 21px, 본문은 다른 문단(상단 문구 · 맺음말)과 같은 15px */
.invite__greeting,
.inv-stage .invite__greeting.inv-input { white-space: pre-line; text-align: center; font-size: 15px; line-height: 1.85; color: var(--invite-ink-soft, #3c3539); }
.invite__greetingTitle,
.inv-stage .invite__greetingTitle.inv-input { margin-bottom: 18px; font-family: var(--invite-title); font-size: 21px; line-height: 1.5; text-align: center; }


/* 실제 갤러리(여러 장)는 카드 폭(480px 고정)에 맞춰 자동으로 3~4열이 되고, 화면이 좁으면 스스로 줄어듭니다 */
.invite__galleryGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.invite__galleryGrid img {
    width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
    border-radius: 2px; cursor: zoom-in;
}

/* ── 라벨 | 값 목록 (일시 · 오시는 길 · 연락처 · 빈소) ───────────────
   라벨 폭 · 글자 · 줄 간격 · 구분선을 한 벌로 씁니다. 편집 줄([data-row])은 아래 편집 규칙이 따로 그립니다. */
.invite__fact, .invite__line {
    display: flex; gap: 14px; align-items: baseline;
    padding: var(--invite-row-pad) 0;
}
.invite__fact, .invite__line:not([data-row]) { border-bottom: 1px solid var(--invite-hairline); }
.invite__fact:last-child, .invite__line:last-child { border-bottom: 0; }
.invite__fact dt, .invite__line dt {
    width: var(--invite-label-w); flex: none;
    font-size: 13px; letter-spacing: .02em; white-space: nowrap;
    color: var(--invite-sub, #857c81);
}
.invite__fact dd, .invite__line dd { margin: 0; flex: 1; min-width: 0; font-size: 15px; }
.invite__lines { margin: 0; }
.invite__pre { white-space: pre-line; }

/* 작은 알약 단추(전화 · 지도 · 계좌 복사) — 한 모양 */
.invite__call, .invite__copy {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    padding: 3px 14px;
    font-size: 13px; line-height: 1.6; letter-spacing: .02em; white-space: nowrap;
    color: var(--accent-text, var(--accent)); background: var(--accent-wash);
    border: 0; border-radius: 999px;
    cursor: pointer;
}
.invite__call:hover, .invite__copy:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 14%, var(--paper-invite)); }
.invite__copy.is-done { background: var(--accent); color: var(--on-accent, #fff); }

/* ── 입력 칸(참석 여부 · 방명록) — 신청서처럼 보이지 않게 칸 대신 얇은 밑줄만 씁니다.
   한 줄형은 '라벨 | 입력', 여러 줄 · 긴 라벨은 --stack(라벨 위). 입력 글자는 16px(아이폰이 칸을 누를 때 화면을 확대하지 않게). */
.invite__field {
    display: grid; grid-template-columns: var(--invite-label-w) minmax(0, 1fr); align-items: center; column-gap: 14px;
    min-height: 44px; padding: 4px 0;
    border-bottom: 1px solid var(--invite-hairline);
    transition: border-color .15s;
}
.invite__field--stack { grid-template-columns: minmax(0, 1fr); align-items: stretch; padding-top: 10px; }
.invite__field:focus-within { border-bottom-color: var(--accent); }
.invite__field > label { margin: 0; font-size: 13px; line-height: 1.4; letter-spacing: .02em; color: var(--invite-sub-text, #6a6468); }
.invite__field input[type=text], .invite__field input[type=number], .invite__field select, .invite__field textarea {
    width: 100%; min-width: 0; min-height: 0; padding: 4px 0;
    font-size: 16px; line-height: 1.5; color: var(--invite-ink, #221d20);
    background: transparent; border: 0; border-radius: 0; outline: 0; box-shadow: none;
}
.invite__field textarea { resize: none; }
.invite__field select {
    padding-right: 18px; appearance: none; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 2px center;
}
.invite__field input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.invite__field input[type=number]::-webkit-inner-spin-button,
.invite__field input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.invite__field--count { grid-template-columns: var(--invite-label-w) minmax(0, 1fr) 36px minmax(0, 1fr); }

/* 참석 · 식사 선택 — 얇은 테두리 하나에 두 칸, 고른 쪽만 연한 메인색 */
.invite__radio { display: flex; padding: 3px; background: var(--invite-track); border-radius: 999px; }
.invite__radio label {
    flex: 1; position: relative; margin: 0; padding: 5px 4px;
    text-align: center; font-size: 14px; line-height: 1.6; white-space: nowrap;
    color: var(--invite-sub-text, #6a6468); border-radius: 999px; cursor: pointer;
    transition: background .15s, color .15s;
}
.invite__radio input { position: absolute; opacity: 0; pointer-events: none; }
.invite__radio label:has(input:checked) { font-weight: 600; color: var(--accent-text, var(--accent)); background: var(--paper-invite); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.invite__radio label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 큰 단추(참석 보내기 · 방명록 남기기 · 화환 보내기) — 한 모양: 가운데 알약 */
.invite__submit, .invite__wreathBtn {
    display: flex; align-items: center; justify-content: center;
    width: fit-content; min-width: 200px; margin: 20px auto 0; padding: 10px 40px;
    font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: .08em;
    color: var(--on-accent, #fff); background: var(--accent);
    border: 0; border-radius: 999px; cursor: pointer;
}
.invite__wreathBtn:hover { text-decoration: none; opacity: .92; }
/* 맨 아래 화환 보내기 — 푸터 바로 위, 가운데 */
.invite__wreathBar { padding: 8px 26px 28px; text-align: center; }
.invite__wreathBar .invite__wreathBtn { margin-top: 0; }

/* 안내 · 작은 표시 */
.invite__note, .invite__deadline { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--invite-faint, #a49aa0); }
.invite__note--center, .invite__deadline { text-align: center; }
.invite__optional { font-size: 12px; color: var(--invite-faint, #a49aa0); }

.invite__done {
    padding: 18px; text-align: center; font-size: 15px;
    background: var(--accent-wash); border-radius: 6px;
    color: var(--accent-text, var(--accent));
}
.invite__done--error { background: #fbeeec; color: #a33a2e; }

@media (max-width: 359px) {
    .card-invite { --invite-label-w: 62px; }
    .invite__field, .invite__fact, .invite__line { column-gap: 10px; gap: 10px; }
    .invite__field--count { grid-template-columns: var(--invite-label-w) minmax(0, 1fr) 32px minmax(0, 1fr); }
    .invite__radio label { font-size: 13px; }
    .invite__fact dt, .invite__line dt { font-size: 12px; }
    .invite__call, .invite__copy { padding: 3px 10px; font-size: 12px; }
}

.invite__foot {
    padding: 26px; text-align: center;
    font-size: 12px; color: var(--invite-faint, #a49aa0);
}


.lightbox {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: rgba(20,24,29,.88); align-items: center; justify-content: center;
    padding: 24px; cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 4px; display: block; }


/* ── 템플릿 고르기 ────────────────────────────────────────────────
   라디오 버튼을 숨기고 카드 전체를 누르게 합니다.
   작은 동그라미를 정확히 겨냥하게 하면 휴대폰에서 자꾸 빗나갑니다. */

.template-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.template-card { display: block; cursor: pointer; margin: 0; }
.template-card input {
    position: absolute; width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}

.template-card__body {
    display: block;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
}
.template-card:hover .template-card__body { background: var(--field); }

.template-card input:checked + .template-card__body {
    border-color: var(--brand);
    background: var(--brand-wash);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.template-card__swatch {
    display: block; width: 100%; height: 34px;
    border-radius: var(--radius);
    margin-bottom: 10px;
}
.template-card__name    { display: block; font-weight: 600; font-size: 15px; }
.template-card__note    { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-faint); }

/* ══════════════════════════════════════════════════════════════════
   레이아웃 — 감싸는 HTML 이 달라질 때 필요한 것만
   ══════════════════════════════════════════════════════════════════ */

/* 초대장 바깥(PC 에서 가운데 열 양옆 · 편집 틀 안)은 흰 바탕입니다. 테마 색은 초대장 안쪽에서만 씁니다.
   카드 배치의 카드 사이 바탕(--invite-backdrop, 테마별 위 값)은 초대장 디자인이라 .invite--card 가 직접 칠합니다. */
.invite-body { background: var(--surface); margin: 0; }

.invite-preview-bar {
    position: sticky; top: 0; z-index: 10;
    padding: 10px 16px; text-align: center;
    background: #8a6410; color: #fff; font-size: 13px;
}

/* 카드 — 항목마다 따로 떼어 놓습니다 */
.invite--card { background: var(--invite-backdrop, #f2eeef); }
.invite--card .invite__cardbox {
    margin: 12px;
    background: var(--paper-invite);
    border-radius: 14px;
    overflow: hidden;
}
.invite--card .invite__head {
    margin: 12px; border-radius: 14px; background: var(--paper-invite);
}

/* 풀스크린 — 첫 사진이 화면을 채우고 글이 그 위에 올라갑니다 */
.invite__hero--full { position: relative; height: 100svh; min-height: 480px; }
.invite__hero--full img { width: 100%; height: 100%; object-fit: cover; }

.invite__heroOver {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 40px 26px 46px;
    text-align: center; color: #fff;
    /* 사진이 밝으면 흰 글씨가 묻힙니다. 아래쪽에만 어둡게 깔아 줍니다. */
    background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
}
.invite__heroOver .invite__type,
.invite__heroOver .invite__when,
.invite__heroOver .invite__heroText,
.inv-stage .invite__heroOver .invite__heroText.inv-input { color: rgba(255,255,255,.88); }
.invite__heroOver .invite__names { color: #fff; }

.invite--fullscreen .invite__sheet {
    position: relative;
    margin-top: -22px;
    border-radius: 22px 22px 0 0;
    background: var(--paper-invite);
    padding-top: 10px;
}

/* ══════════════════════════════════════════════════════════════════
   섹션 공통 요소
   ══════════════════════════════════════════════════════════════════ */

.invite__amp { margin: 0 .38em; color: var(--accent-text, var(--accent)); }

/* 일시 · 장소 · 빈소 표 — 값은 굵게 16px, 그 아래 줄은 보조 14px */
.invite__factlist { margin: 0; }
.invite__fact dd b { display: block; font-size: 16px; font-weight: 600; }
.invite__fact dd span { display: block; font-size: 14px; color: var(--invite-sub-text, #6a6468); }

.invite__mapRow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* 오시는 길 — 장소 · 주소는 구분선 없이 붙여 두고, 주소 바로 아래에 섹션 폭 그대로 지도, 그 아래 오른쪽에 길찾기 */
.invite__lines--plain .invite__line { padding: 3px 0; border-bottom: 0; }
.invite__map {
    display: block; position: relative; height: 220px; margin-top: 12px;
    border-radius: 10px; overflow: hidden; background: var(--invite-track);
}
.invite__map[hidden] { display: none; }
/* 지도는 보기 전용 — 위에 투명한 막을 덮어 누르면 지도 SDK 가 아니라 링크(카카오맵 크게 보기)가 받습니다 */
.invite__map::after { content: ''; position: absolute; inset: 0; z-index: 10; }
.invite__location .invite__mapRow { justify-content: flex-end; margin-top: 8px; }
.invite__location .invite__mapRow + .invite__lines { margin-top: 6px; }

/* 연락처 — 이름 왼쪽, 전화 단추 오른쪽(좁으면 단추가 다음 줄 오른쪽으로) */
.invite__contacts .invite__line { align-items: center; }
.invite__contactRow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.invite__contactRow > span { white-space: nowrap; }
.invite__contactRow > .invite__call { margin-left: auto; }

/* 계좌 — 연락처와 같은 줄 모양. 은행 · 번호는 굵게 15px, 구분 · 예금주는 보조 14px */
.invite__account { display: flex; align-items: center; gap: 10px; }
.invite__account > div { flex: 1; min-width: 0; }
.invite__account:not([data-row]) { padding: var(--invite-row-pad) 0; border-bottom: 1px solid var(--invite-hairline); }
.invite__account:not([data-row]):last-child { border-bottom: 0; }
.invite__account:not([data-row]) b { display: block; font-size: 15px; font-weight: 600; }
.invite__account:not([data-row]) span { font-size: 14px; color: var(--invite-sub-text, #6a6468); }
.invite__accountNo { font-style: normal; white-space: nowrap; }

/* 신랑·신부 (결혼식 전용 섹션) */
.invite__coupleRow { display: flex; align-items: center; justify-content: center; gap: 20px; }
.invite__person { flex: 1; text-align: center; min-width: 0; }
.invite__person img {
    width: 100%; aspect-ratio: 3/4; object-fit: cover;
    border-radius: 999px 999px 8px 8px;
    display: block; margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.invite__personRole { font-size: 13px; color: var(--invite-sub, #857c81); letter-spacing: .02em; margin-bottom: 2px; }
.invite__personName { font-size: 17px; font-weight: 600; }
.invite__coupleMark { flex: none; color: var(--accent-text, var(--accent)); font-size: 20px; }

/* 부고 */
.invite__honorific { font-size: .72em; color: var(--invite-sub, #857c81); margin-right: .18em; }
.invite__lifespan { margin-top: 8px; font-size: 14px; color: var(--invite-sub, #857c81); letter-spacing: .02em; }

/* 조화·추모 문구 */
.invite__condolence,
.inv-stage textarea.invite__condolence {
    text-align: center; font-size: 16px; line-height: 2;
    color: var(--accent, #666); padding: 28px 20px 8px;
    font-family: var(--invite-title);
}

.invite__deceased { text-align: center; }
.invite__portrait {
    width: 140px; height: 140px; object-fit: cover;
    border-radius: 999px; display: block; margin: 0 auto 14px;
    box-shadow: 0 0 0 3px var(--paper-invite, #fff), 0 0 0 5px var(--accent, #666);
}
.invite__deceased .invite__personName { margin-bottom: 4px; }

.invite__familyTable { width: 100%; border-collapse: collapse; font-size: 15px; }
.invite__familyTable th {
    width: var(--invite-label-w); padding: var(--invite-row-pad) 14px var(--invite-row-pad) 0; text-align: left; vertical-align: baseline; white-space: nowrap;
    font-weight: 400; color: var(--invite-sub, #857c81); font-size: 13px; letter-spacing: .02em;
    border-bottom: 1px solid var(--invite-hairline);
}
.invite__familyTable td { padding: var(--invite-row-pad) 0; vertical-align: baseline; border-bottom: 1px solid var(--invite-hairline); }
.invite__familyTable tr:last-child th,
.invite__familyTable tr:last-child td { border-bottom: 0; }
.invite__familyTel { text-align: right; white-space: nowrap; }
.invite__familyTel a { color: var(--accent-text, var(--accent)); }

/* 맺음말 */
.invite__thanks { text-align: center; padding: 36px 26px; }
.invite__thanksMark {
    font-family: var(--invite-title);
    font-size: 26px; color: var(--accent-text, var(--accent)); margin-bottom: 18px;
}
.invite__thanksLine,
.inv-stage .invite__thanksLine.inv-input { margin-bottom: 16px; font-family: var(--invite-title); font-size: 19px; line-height: 1.7; }
.invite__thanksNote,
.inv-stage .invite__thanksNote.inv-input { color: var(--invite-sub-text, #6a6468); font-size: 15px; line-height: 1.85; }
/* 편집 칸은 리셋이 정렬을 지우므로 가운데 정렬을 다시 줍니다(장례 맺음말은 왼쪽 — 아래 mthanks 규칙) */
.inv-stage .invite__thanks:not(.invite__thanks--mourn) .inv-input { text-align: center; }
.invite__thanksNames,
.inv-stage .invite__thanksNames.inv-input { font-size: 17px; font-weight: 600; margin-top: 18px; }
.invite__thanksDate { margin-top: 6px; font-size: 14px; color: var(--invite-sub, #857c81); }
/* 돌잔치 맺음말 — 축복 문구는 Thank you 위, 가족 문구는 날짜 아래 */
.invite__thanks .invite__thanksLine + .invite__thanksMark { margin-top: 26px; }
.invite__thanksFamily,
.inv-stage .invite__thanksFamily.inv-input { margin-top: 18px; font-size: 15px; color: var(--invite-sub-text, #6a6468); }
.invite__thanks--mourn { background: #1d2024; color: #e9eaec; padding: 40px 26px; }
.invite__thanks--mourn .invite__thanksNote { color: #adb2b8; }

/* 부고 — 조화 이미지 위에 글자가 얹히는 머리말·맺음말.
   이미지가 밝든 어둡든 읽히도록 이미지 위에 어두운 막을 깔고 글자는 흰색으로 둡니다. */
.invite__mhero, .invite__mthanks { position: relative; overflow: hidden; background: linear-gradient(160deg, #3a3f46, #1d2024); color: #fff; }
.invite__mheroImg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.invite__mhero.has-image::after, .invite__mthanks.has-image::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,.42), rgba(0,0,0,.12) 45%, rgba(0,0,0,.5));
}
.invite__mhero { min-height: 480px; display: flex; }
.invite__mheroBody {
    position: relative; z-index: 2; width: 100%; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
    padding: 38px 28px 34px; text-align: left;
}
.invite__mhero .invite__condolence,
.inv-stage .invite__mhero textarea.invite__condolence {
    color: #fff; text-align: left; padding: 0; font-size: 15px; line-height: 1.95;
    text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.invite__mheroRule { width: 30px; height: 1px; background: rgba(255,255,255,.75); margin-bottom: 18px; }
.invite__mhero .invite__names { font-size: 30px; line-height: 1.3; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.invite__mhero .invite__honorific { color: rgba(255,255,255,.85); }
.invite__mhero .invite__lifespan { color: rgba(255,255,255,.88); margin-top: 10px; text-shadow: 0 1px 6px rgba(0,0,0,.35); }

.invite__mthanks { min-height: 360px; padding: 0; display: flex; align-items: flex-end; text-align: left; }
.invite__mthanksBody { position: relative; z-index: 2; width: 100%; box-sizing: border-box; padding: 56px 28px 40px; }
.invite__mthanks .invite__thanksLine,
.inv-stage .invite__mthanks .invite__thanksLine.inv-input { color: #fff; font-size: 21px; line-height: 1.75; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.invite__mthanks .invite__thanksNote,
.inv-stage .invite__mthanks .invite__thanksNote.inv-input { color: rgba(255,255,255,.88); text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.invite__mthanks .invite__thanksNames,
.inv-stage .invite__mthanks .invite__thanksNames.inv-input { color: #fff; margin-top: 26px; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
@media (min-width: 560px) { .invite__mhero { min-height: 540px; } }

/* 배치 고르기 미리보기 조각 */
.template-card__figure {
    display: block; height: 34px; margin-bottom: 10px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--field);
    position: relative; overflow: hidden;
}
.template-card__figure--standard::before {
    content: ''; position: absolute; inset: 4px;
    background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 8px);
}
.template-card__figure--card::before {
    content: ''; position: absolute; inset: 4px;
    background:
        linear-gradient(var(--line), var(--line)) 0 0 / 100% 8px no-repeat,
        linear-gradient(var(--line), var(--line)) 0 12px / 100% 8px no-repeat;
}
.template-card__figure--fullscreen::before {
    content: ''; position: absolute; inset: 4px 4px 14px;
    background: var(--line);
}


/* ── 방명록 ──────────────────────────────────────────────────────
   공개 초대장 쪽과 관리 화면 쪽 둘 다입니다. */

/* 함정 칸 — 사람 눈에는 없고 자동 등록기만 채웁니다.
   display:none 은 일부 등록기가 알아채므로 화면 밖으로 밀어냅니다. */
.invite__trap {
    position: absolute !important;
    left: -9999px; width: 1px; height: 1px;
    overflow: hidden;
}

.invite__gbList { margin-top: 24px; }

.invite__gbItem {
    padding: var(--invite-row-pad) 0;
    border-top: 1px solid var(--invite-hairline);
}
.invite__gbHead {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 2px;
}
.invite__gbHead b { font-size: 15px; font-weight: 600; }
.invite__gbHead span { font-size: 12px; color: var(--invite-faint, #a49aa0); }
.invite__gbBody { margin: 0; white-space: pre-line; font-size: 15px; line-height: 1.85; }

.invite__gbDelete { margin-top: 8px; }
.invite__gbDelete summary {
    font-size: 12px; color: var(--invite-faint, #a49aa0); cursor: pointer; list-style: none;
}
.invite__gbDeleteRow { display: flex; gap: 6px; margin-top: 8px; }
.invite__gbDeleteRow input { flex: 1; min-height: 0; padding: 6px 12px; font-size: 16px; border-radius: 999px; }
.invite__gbDeleteRow button {
    flex: none; padding: 4px 14px; font-size: 13px;
    color: var(--accent-text, var(--accent)); background: var(--accent-wash);
    border: 0; border-radius: 999px; cursor: pointer;
}


/* ── 화환 ────────────────────────────────────────────────────────
   우리가 파는 것이 아니라서 버튼 하나와 짧은 안내만 둡니다.
   상품이나 값을 여기서 말하면 "적힌 것과 다르다" 는 문의가 우리에게 옵니다. */

.invite__wreath { text-align: center; }

.invite__wreathNote {
    margin: 0;
    color: var(--invite-sub-text, #6a6468);
    font-size: 15px;
}
.invite__wreathBtn { margin-top: 16px; }

/* 부고에서는 버튼 색을 낮춥니다. 눈에 먼저 들어오면 안 되는 자리입니다. */
.card-invite--calm .invite__wreathBtn { background: var(--accent-wash); color: var(--accent-text, var(--accent)); }



/* 발급된 서비스 한 줄 — 배지와 취소 버튼을 나란히 */
.svc-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0;
}
.svc-row + .svc-row { border-top: 1px solid var(--line-soft); }

/* ── 통계 ────────────────────────────────────────────────────────
   숫자만 늘어놓으면 읽히지 않습니다.
   막대 하나로 크기를 같이 보여 줍니다. 눈이 먼저 크기를 읽습니다. */

.stat-bar {
    height: 8px; border-radius: 999px;
    background: var(--line-soft);
    overflow: hidden;
}
.stat-bar span { display: block; height: 100%; background: var(--brand); }
.stat-bar__head { display: flex; justify-content: space-between; margin-bottom: var(--space-2); }

.stat-cell { min-width: 120px; }
.stat-cell__num { font-variant-numeric: tabular-nums; }


/* ── 배경음악 버튼 ───────────────────────────────────────────────
   화면에 떠 있습니다. 스크롤을 내려도 따라옵니다.

   오른쪽 위에 둔 이유: 아래쪽은 참석 응답·방명록 입력 칸이 오는 자리라
   키보드가 올라오면 겹칩니다. 위쪽은 사진이라 가려도 덜 아쉽습니다. */

.invite-music {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: 14px;
    z-index: 9;
}

.invite-music__btn {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 52vw;
    padding: 9px 14px;
    font-size: 13px;
    color: #2a2529;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.invite-music__icon { font-size: 15px; line-height: 1; }

.invite-music__label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 재생 중일 때만 음표가 움직입니다.
   멈춰 있을 때도 흔들리면 눌린 줄 알고 다시 누릅니다. */
.invite-music.is-playing .invite-music__btn {
    background: var(--accent);
    color: var(--on-accent, #fff);
    border-color: transparent;
}
.invite-music.is-playing .invite-music__icon {
    animation: invite-music-beat 1.1s ease-in-out infinite;
}

@keyframes invite-music-beat {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.25); }
}

/* 움직임을 줄이는 설정이면 맨 위 전역 규칙(prefers-reduced-motion)이 음표 움직임도 멈춥니다 */

/* 편집 화면의 음원 칸 */
.music-current {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.music-current audio { max-width: 100%; }

/* ── Tabulator 테마 오버라이드 ──────────────────────────────────────── */
.tabulator {
    font-family: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
    font-size: var(--text-sm); border: none; background: transparent;
}

/* 헤더 */
.tabulator .tabulator-header {
    background: var(--neutral-50, #F8F7F5);
    border-bottom: 2px solid var(--neutral-300, #E2DED7);
    font-weight: 600;
}
.tabulator .tabulator-header .tabulator-col {
    background: transparent; border-right: none;
    font-size: 14px; color: var(--neutral-500, #8A8680);
    height: 40px !important;
}
.tabulator .tabulator-header .tabulator-headers {
    height: 40px !important;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    padding: 0 16px;
    height: 40px;
    display: flex;
    align-items: center;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable { cursor: pointer; }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
    background: var(--neutral-100, #F5F4F1);
}

/* 정렬 아이콘 — 기본 텍스트 화살표 제거, CSS 삼각형 사용 */
.tabulator .tabulator-col .tabulator-col-sorter {
    display: inline-flex; align-items: center; margin-left: 6px; position: relative;
    width: 10px; height: 14px;
}
/* Tabulator 기본(top: 0 · bottom: 0)에 높이 14px 를 주면 위에 붙어 글자보다 4px 높음 — 위아래 여백 auto 로 머리글 글자 세로 가운데(가로 자리는 그대로) */
.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter { margin-top: auto; margin-bottom: auto; }
.tabulator .tabulator-col .tabulator-col-sorter .tabulator-arrow {
    display: none !important;
}
.tabulator .tabulator-col.tabulator-sortable .tabulator-col-sorter::before,
.tabulator .tabulator-col.tabulator-sortable .tabulator-col-sorter::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    border-left: 4px solid transparent; border-right: 4px solid transparent;
}
.tabulator .tabulator-col.tabulator-sortable .tabulator-col-sorter::before {
    top: 0; border-bottom: 4px solid var(--neutral-400, #B5B0A8);
}
.tabulator .tabulator-col.tabulator-sortable .tabulator-col-sorter::after {
    bottom: 0; border-top: 4px solid var(--neutral-400, #B5B0A8);
}
.tabulator .tabulator-col[aria-sort="ascending"] .tabulator-col-sorter::before {
    border-bottom-color: var(--ink, #1B1916);
}
.tabulator .tabulator-col[aria-sort="ascending"] .tabulator-col-sorter::after {
    border-top-color: var(--neutral-200, #ECEAE5);
}
.tabulator .tabulator-col[aria-sort="descending"] .tabulator-col-sorter::before {
    border-bottom-color: var(--neutral-200, #ECEAE5);
}
.tabulator .tabulator-col[aria-sort="descending"] .tabulator-col-sorter::after {
    border-top-color: var(--ink, #1B1916);
}

/* 머리글 정렬 = 본문 정렬 — partials/_grid 의 moinalGrid 가 hozAlign 이 right · center 인 칸에 moinal-col-right · moinal-col-center 를 붙입니다.
   글자 묶음(title-holder)이 글자 폭으로 줄어 있어 text-align 만으로는 움직이지 않으므로 묶음째 옮깁니다.
   정렬 화살표는 모든 칸에서 글자 오른쪽(기본 자리 — 글자 뒤 25px 안). 정렬되는 오른쪽 칸(moinal-col-sort)은 본문 끝에도 같은 25px 를 비워
   머리글 글자 끝이 숫자 끝과 같은 선에 옵니다. 칸 여백(16 · 12 · 8px)과 상관없이 맞도록 여백 대신 칸 끝 빈 칸(::after)으로 비웁니다. */
.tabulator .tabulator-header .tabulator-col.moinal-col-right .tabulator-col-content { justify-content: flex-end; }
.tabulator .tabulator-header .tabulator-col.moinal-col-center .tabulator-col-content { justify-content: center; }
.tabulator .tabulator-row .tabulator-cell.moinal-col-sort::after { content: ""; flex: 0 0 25px; }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable.moinal-col-center .tabulator-col-title { padding-left: 25px; }   /* 화살표 자리만큼 왼쪽도 비워 글자가 칸 가운데 */
/* 칸 맨 앞 배지(_grid 가 is-lead 를 붙임)는 머리글 글자와 같은 선에서 시작 */
.tabulator .tabulator-cell .badge.is-lead { margin-left: 0; }

/* 데이터 행 */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
    border-bottom: 1px solid var(--neutral-200, #ECEAE5);
    background: transparent; min-height: auto;
}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover {
    background: var(--neutral-50, #F8F7F5);
}
.tabulator .tabulator-row .tabulator-cell {
    padding: 14px 16px; border-right: none; line-height: 1.6;
}

/* 액션 버튼 셀 */
.tabulator .tabulator-cell .btn-row {
    display: flex; gap: 6px; align-items: center; flex-wrap: nowrap;
}
.tabulator .tabulator-cell .inline-form { display: inline; }
/* 줄 안의 작은 폼(.toolbar)도 한 줄로 — 칸이 좁으면 반응형 접기로 줄 아래에 펼쳐집니다 */
.tabulator .tabulator-cell .toolbar { flex-wrap: nowrap; }
.tabulator .tabulator-cell .toolbar input[type=text] { flex: 1; min-width: 80px; }
.tabulator .tabulator-cell .btn { white-space: nowrap; }

/* 페이지네이션 — 모든 그리드 공통(partials/_grid: 기본 한 쪽 10건, 선택 10 · 20 · 50)
   전역 select/button 스타일(너비 100% · 높이 44px)이 쪽 이동 단추와 쪽당 건수 선택을 늘리지 않게 되돌립니다. */
.tabulator .tabulator-footer {
    background: transparent;
    border-top: 1px solid var(--neutral-200, #ECEAE5);
    padding: 10px 16px;
}
.tabulator .tabulator-footer .tabulator-footer-contents,
.tabulator .tabulator-footer .tabulator-paginator {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: 6px 10px; width: 100%; text-align: right; color: var(--neutral-500, #8A8680);
}
.tabulator .tabulator-footer .tabulator-page-counter { margin-right: auto; font-size: 13px; }
.tabulator .tabulator-footer .tabulator-paginator label { margin: 0; font-size: 13px; }
.tabulator .tabulator-footer .tabulator-page-size {
    width: auto; min-height: 32px; padding: 4px 28px 4px 10px;
    font-size: 13px; border-radius: 6px;
}
.tabulator .tabulator-footer .tabulator-pages { display: inline-flex; gap: 2px; margin: 0; }
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page {
    min-width: 32px; min-height: 32px; margin: 0; padding: 4px 10px;
    font-size: 13px; color: var(--ink, #333); background: var(--paper, #fff);
    border: 1px solid var(--neutral-300, #E2DED7); border-radius: 6px; cursor: pointer;
}
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page:hover:not(:disabled) { background: var(--neutral-100, #F5F4F1); }
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page.active { background: var(--brand, #24506b); border-color: var(--brand, #24506b); color: #fff; }
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page:disabled { opacity: .4; cursor: default; }

/* 대시보드 [업체별 수량] — 고정한 업체명 칸 오른쪽의 굵은 세로선만 없앱니다(다른 칸 · 다른 표는 그대로) */
#companyCreditsGrid .tabulator-frozen.tabulator-frozen-left { border-right: 0; }
/* 고정한 업체명 칸은 바탕을 채워, 옆으로 밀린 칸이 비쳐 겹쳐 보이지 않게 합니다 */
#companyCreditsGrid .tabulator-frozen { background: var(--paper); z-index: 2; }
#companyCreditsGrid .tabulator-col.tabulator-frozen { background: var(--neutral-50); }
#companyCreditsGrid .tabulator-cell.tabulator-frozen { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 대시보드 기간 — 직접 고르기는 PC 에서 버튼 줄에 이어 붙고, 좁은 화면에서는 한 줄(시작 ~ 종료 · 보기)로 */
.period-custom { display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 560px) {
    .period-custom { flex-wrap: wrap; width: 100%; }
    .period-custom > .small { flex: 0 0 100%; }
    .period-custom { gap: 4px; }
    .period-custom input[type=date] { flex: 1 1 0; min-width: 0; width: auto; padding: 8px 4px; font-size: 13px; }
    .period-custom .btn { flex: 0 0 auto; }
    #companyCreditsGrid .tabulator-frozen { min-width: 84px; }
}
@media (max-width: 359px) {
    .period-custom .btn { flex: 1 0 100%; }
}

/* 업체 등록 · 수정 화면 [서비스 수량] — 남은 수량 한 줄 + 입력 칸을 촘촘히(PC 3칸 한 줄, 모바일은 유형 한 줄 · 수량 2칸) */
.credit-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; padding: 16px 20px; }
.credit-fields > * { margin: 0; max-width: none; min-width: 0; }
.credit-fields .field > label { margin-bottom: 4px; }
.credit-fields__reason, .credit-fields__hint { grid-column: 1 / -1; }
.credit-fields .field__hint { margin-top: -4px; }
@media (max-width: 560px) {
    .credit-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 16px; }
    .credit-fields__type { grid-column: 1 / -1; }
}

/* 업체 등록 · 수정 화면 — 구역을 세로로 차례로, 구역 안 입력 칸은 구역 폭을 다 씁니다 */
.company-form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.company-form__grid > .panel { margin: 0; min-width: 0; }
/* 업체 폼 · 고객 계정 화면 공통 — 칸은 구역 폭을 쓰고 2열 묶음은 좁은 화면에서 1열로 */
:is(.company-form, .account-form) .field { max-width: none; }
:is(.company-form, .account-form) .field > :where(input, select, textarea) { max-width: none; }
:is(.company-form, .account-form) .grid2 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.account-form > p.small { max-width: none; }
.checkline-group { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-bottom: var(--space-2); }
.checkline-group .checkline { margin-bottom: 0; }
.credit-now { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    padding-bottom: 12px; border-bottom: 1px dashed var(--neutral-300); }
.credit-now__item { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px;
    background: var(--neutral-100); border-radius: var(--radius-lg); }
.credit-now__label { font-size: var(--text-sm); color: var(--neutral-500); }
.credit-now__value { font-size: var(--text-lg, 18px); font-weight: 700; color: var(--ink, #1B1916); }
.credit-fields__title { grid-column: 1 / -1; margin: 0; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--neutral-700); }
.company-form .kakao-picker__map { height: 320px; }
/* 비밀번호 칸 공통 — <x-password-input>: 입력 오른쪽 안쪽에 눈동자 단추(표시 ↔ 숨김) */
.pw-field { position: relative; width: 100%; }
.pw-field input { padding-right: 48px; }
.pw-field__toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; color: var(--neutral-500); background: transparent; border: 0; border-radius: var(--radius); cursor: pointer; }
.pw-field__toggle:hover { color: var(--neutral-700); }
.pw-field__toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.pw-field__eye-off, .pw-field__toggle[aria-pressed="true"] .pw-field__eye { display: none; }
.pw-field__toggle[aria-pressed="true"] .pw-field__eye-off { display: block; }
.toolbar .pw-field { max-width: 260px; }
.pw-field:has(> .input--sm) { max-width: 160px; }
.pw-field:has(> .input--md) { max-width: 260px; }
.pw-field:has(> .input--lg) { max-width: 480px; }
.pw-field > .input--sm, .pw-field > .input--md, .pw-field > .input--lg { max-width: none; }
/* 저장 · 취소 — 배경 · 테두리 없이 페이지 흐름 그대로. 위 · 아래 간격은 폼의 .sections 가 정합니다(구역 사이와 같은 24px) */
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.form-actions .btn { min-height: 44px; min-width: 96px; }
.form-actions .btn:disabled { opacity: .6; cursor: progress; }
@media (max-width: 560px) {
    .company-form .kakao-picker__map { height: 240px; }
    .form-actions .btn { flex: 1; }
}

/* 반응형 접기 — 화면이 좁아 줄 아래로 내려온 칸(이름-값). 한 줄의 일부이므로 위아래 선을 긋지 않고(줄 구분선은 줄의 아래 선 하나),
   왼쪽 여백은 칸 여백과 같게 둡니다(PC 16px · 768px 이하 12px — 아래 모바일 규칙). Tabulator 기본 선(#ddd)은 토큰 밖 색이라 지웁니다. */
.tabulator .tabulator-row .tabulator-responsive-collapse {
    padding: 0 16px 14px;
    border: 0;
}
.tabulator .tabulator-row .tabulator-responsive-collapse table {
    font-size: var(--text-sm);
}
.tabulator .tabulator-row .tabulator-responsive-collapse td:first-child {
    font-weight: 500; color: var(--neutral-500, #8A8680);
    padding-right: 14px; white-space: nowrap;
}
.tabulator .tabulator-row .tabulator-responsive-collapse td {
    padding: 4px 0;
}
/* 접힌 줄의 [상세 보기] · 단추 줄(partials/_grid moinalCollapsedRows) — 왼쪽 [상세 보기], 오른쪽 단추. 펼친 보조 정보는 이 줄 아래.
   [상세 보기]는 단추가 아니라 펼침 표시라 글자 모양(밑줄 없음 + 꺾쇠)이고, 손가락으로 누르기 쉽게 높이 40px. */
.tabulator .tabulator-responsive-collapse .grid-collapse__bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
.tabulator .tabulator-responsive-collapse table + .grid-collapse__bar { margin-top: var(--space-1); }
.tabulator .tabulator-responsive-collapse .grid-more + .grid-collapse__actions { margin-left: auto; }
.tabulator .tabulator-responsive-collapse .grid-collapse__actions .btn-row { flex-wrap: wrap; }
.tabulator .tabulator-responsive-collapse .grid-more {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--brand);
}
.tabulator .tabulator-responsive-collapse .grid-more::after {
    content: ""; width: 6px; height: 6px; margin-top: -3px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.tabulator .tabulator-responsive-collapse .grid-more[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
.tabulator .tabulator-responsive-collapse .grid-collapse__more { margin-top: var(--space-1); }

/* 모바일 */
@media (max-width: 768px) {
    .tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: 0 12px; }
    .tabulator .tabulator-row .tabulator-cell { padding: 12px 12px; }
    .tabulator .tabulator-row .tabulator-responsive-collapse { padding: 0 12px 12px; }
}
/* 이름 · 설명 글자 칸(행사명 · 업체명 · 작업 · 내용 · 측)은 끝이 잘리지 않게 칸 안에서 줄을 바꿉니다(배지 · 행사장 줄 포함).
   칸 폭은 그대로라 표가 넓어지지 않습니다 — 칸이 많은 목록의 긴 업체명이 넓은 화면(1280 · 1920)에서도 잘리던 것. 고객 이름 칸(아래 #accountsGrid)과 같은 방식 */
.tabulator .tabulator-row .tabulator-cell:is([tabulator-field="title"], [tabulator-field="event_title"], [tabulator-field="name"], [tabulator-field="company_name"], [tabulator-field="company"], [tabulator-field="type"], [tabulator-field="detail"], [tabulator-field="sides"], [tabulator-field="relations"]) { flex-wrap: wrap; align-content: center; white-space: normal; overflow-wrap: anywhere; }

/* 모바일 페이지네이션 — 두 줄로 고정: ① 전체 N건(왼쪽) · 페이지당 선택(오른쪽) ② 처음 · 이전 · 쪽 번호 · 다음 · 마지막(가운데).
   PC 는 한 줄 그대로. 번호 칸 수(3)는 partials/_grid 의 paginationButtonCount 가 좁은 화면에서 줄입니다.
   .tabulator-paginator 를 display: contents 로 풀어 안쪽 요소를 바깥 줄에 함께 배치하고, ::after 가 줄을 나눕니다. */
@media (max-width: 560px) {
    .tabulator .tabulator-footer { padding: 8px 10px; }
    .tabulator .tabulator-footer .tabulator-footer-contents {
        gap: 0 4px; justify-content: center; text-align: left;   /* 줄 사이 간격은 첫 줄 요소의 margin-bottom(줄 나눔 ::after 양옆에 gap 이 두 번 붙지 않게) */
    }
    .tabulator .tabulator-footer .tabulator-footer-contents::after { content: ''; order: 3; flex: 0 0 100%; height: 0; }
    .tabulator .tabulator-footer .tabulator-paginator { display: contents; }
    .tabulator .tabulator-footer .tabulator-page-counter { order: 1; flex: 1 1 auto; margin: 0 0 8px; font-size: 12px; }
    .tabulator .tabulator-footer .tabulator-paginator label { order: 2; margin: 0 0 8px 4px; font-size: 12px; white-space: nowrap; }
    .tabulator .tabulator-footer .tabulator-page-size { order: 2; min-height: 36px; margin-bottom: 8px; padding: 4px 22px 4px 8px; }
    .tabulator .tabulator-footer .tabulator-pages { order: 4; gap: 4px; }
    .tabulator .tabulator-footer .tabulator-paginator .tabulator-page {
        order: 4; min-width: 30px; min-height: 36px; padding: 0 4px; font-size: 12px;
    }
}
@media (max-width: 359px) {   /* 320px 폭 — 두 번째 줄(처음~마지막)이 한 줄에 들어가도록 조금 더 줄입니다 */
    .tabulator .tabulator-footer .tabulator-footer-contents { column-gap: 2px; }
    .tabulator .tabulator-footer .tabulator-pages { gap: 2px; }
    .tabulator .tabulator-footer .tabulator-paginator .tabulator-page { min-width: 28px; padding: 0 3px; font-size: 11px; }
}


/* ══════════════════════════════════════════════════════════════════
   초대장 편집 화면
   실제 초대장(위의 .card-invite)을 그대로 쓰고, 편집에 필요한 것만 얹습니다.
   ① .inv-editor / .inv-phone  관리자 화면 쪽 — 설정 칸과 초대장 틀의 배치
   ② .inv-stage ...            틀 안쪽 — 초대장 위에 붙는 점선 칸과 사진 버튼
   초대장 자체의 글꼴·크기·여백은 건드리지 않습니다(점선은 outline 이라 자리를 차지하지 않습니다).
   ══════════════════════════════════════════════════════════════════ */

.inv-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.inv-editor__stage { min-width: 0; }

.inv-phone {
    max-width: 430px; margin: 0 auto;
    border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
    background: var(--surface); box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
.inv-phone iframe { display: block; width: 100%; height: min(78vh, 860px); border: 0; }
.inv-phone__note { text-align: center; margin: 10px auto 0; }

.inv-savebar {
    position: sticky; bottom: 0; z-index: 20;
    display: flex; gap: 8px; padding: 12px 0;
    background: var(--field); border-top: 1px solid var(--line);
}
/* 고객 화면은 가운데 흰 열(.mine)이라 막대도 흰색 — 바탕(아이보리)색이면 흰 열 위에 띠로 보입니다 */
.mine .inv-savebar { background: var(--paper); }

/* PC — 설정은 왼쪽, 초대장은 오른쪽에 붙어 따라옵니다. 초대장 안은 그대로 모바일 화면입니다. */
@media (min-width: 1100px) {
    .inv-editor--wide { grid-template-columns: minmax(0, 1fr) 450px; align-items: start; }
    .inv-editor--wide > .inv-editor__stage {
        grid-column: 2; grid-row: 1 / span 12;
        position: sticky; top: 16px; align-self: start;
    }
    .inv-editor--wide > .inv-savebar { grid-column: 1 / -1; }
}

/* ── 틀 안쪽 ─────────────────────────────────────────────────── */

.inv-stage .inv-sec { display: contents; }
.inv-stage [hidden] { display: none !important; }
.inv-stage.is-busy::after { content: ''; position: fixed; inset: 0; z-index: 50; background: rgba(255,255,255,.4); cursor: progress; }

/* 글자 칸 — 초대장 글자와 같은 모양, 점선만 다릅니다 */
.inv-stage .inv-input {
    display: block; width: 100%; min-height: 0; margin: 0; padding: 0;
    font: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; text-align: inherit;
    background: transparent; border: 0; border-radius: 0; box-shadow: none; transition: none;
    resize: none; field-sizing: content;
    outline: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px;
}
.inv-stage .inv-input:focus {
    outline: 2px solid var(--accent); box-shadow: none; border: 0;
    background: color-mix(in srgb, var(--accent-wash) 70%, transparent);
}
.inv-stage .inv-input::placeholder { color: rgba(0,0,0,.3); opacity: 1; }
/* 글자 칸은 위 리셋이 글꼴 · 여백을 지우므로, 자리 class 의 모양은 공개 규칙 쪽 선택자 목록에
   '.inv-stage .… .inv-input' 을 함께 적어 한 곳에서 정합니다(상단 문구 · 인사말 · 맺음말 · 추모 문구). */

.inv-stage .inv-w-date { display: inline-block; width: 9.6em; text-align: center; }
.inv-stage .invite__contactRow > span:first-child { flex: 1; min-width: 0; }

/* ─────────────────────────────────────────────────────────────
   편집 틀의 연락처 · 계좌(유가족 표 포함) — 줄마다 − , 목록 아래 + 추가
   [data-rows] 안에서만 적용됩니다. 공개 초대장 · 다른 화면에는 닿지 않습니다.
   칸 높이 · 테두리 · 글자 크기는 한 벌로 통일하고, 줄은 은은한 배경 + 둥근 모서리로 묶습니다.
   ───────────────────────────────────────────────────────────── */
.inv-stage .invite__section:has([data-rows]) { padding-left: 10px; padding-right: 10px; }
.inv-stage .invite__section:has([data-rows]) > h2 { padding-left: 0; padding-right: 0; }

.inv-stage [data-rows] .inv-input {
    display: block; width: 100%; height: 36px; padding: 0 6px;
    font-size: 14px; font-weight: 400; line-height: 34px; text-align: left; field-sizing: fixed;
    color: var(--invite-ink, #221d20); background: #fff;
    border: 1px solid var(--invite-line-strong, rgba(0,0,0,.16)); border-radius: 8px; outline: 0;
}
.inv-stage [data-rows] .inv-input:focus {
    background: #fff; border: 1px solid var(--accent); outline: 0;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* 줄 − 단추: 작고 차분하게(마우스를 올리면 붉은 기운) */
.inv-stage .inv-btn.inv-row-del {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0; font-size: 15px; line-height: 1;
    color: var(--invite-sub, #857c81); background: #fff;
    border: 1px solid var(--invite-line-strong, rgba(0,0,0,.16)); border-radius: 50%;
}
.inv-stage .inv-btn.inv-row-del:hover { color: #a33a2e; border-color: #a33a2e; background: #fff; }

/* + 추가 단추: 목록 폭 전체의 점선 단추 */
.inv-stage .inv-row-add { margin-top: 4px; }
.inv-stage .inv-row-add .inv-btn {
    display: block; width: 100%; height: 40px; padding: 0;
    font-size: 14px; font-weight: 600; letter-spacing: 0;
    color: var(--accent-text, var(--accent)); background: transparent;
    border: 1px dashed var(--accent); border-radius: 10px;
}
.inv-stage .inv-row-add .inv-btn:hover:not(:disabled) { background: var(--accent-wash); }

/* 연락처 줄: 관계 · 이름 · 전화번호 · 감춤 · − 가 한 줄(아주 좁은 폰은 아래 @media 로 두 줄) */
.inv-stage .invite__line[data-row] {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 112px auto 22px; gap: 6px; align-items: center;
    margin-bottom: 8px; padding: 10px 6px; background: var(--accent-wash); border-radius: 10px;
}
.inv-stage .invite__line[data-row] > dt { width: auto; font-size: inherit; }
.inv-stage .invite__line[data-row] > dd,
.inv-stage .invite__line[data-row] .invite__contactRow,
.inv-stage .invite__line[data-row] .inv-call { display: contents; }
.inv-stage .inv-hide {
    display: inline-flex; align-items: center; gap: 4px; margin: 0;
    font-size: 12px; line-height: 1; color: var(--invite-sub-text, #6a6468); white-space: nowrap;
}
.inv-stage .inv-hide input { width: 16px; height: 16px; margin: 0; }
@media (max-width: 339px) {
    .inv-stage .invite__line[data-row] { grid-template-columns: 44px minmax(0, 1fr) auto; }
    .inv-stage .invite__line[data-row] > dd .inv-call .inv-input { grid-column: 1 / 3; }
    .inv-stage .invite__line[data-row] > .inv-row-del { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* 계좌 줄: 은행 | 계좌번호 / 구분 | 예금주 의 2×2 칸 + 오른쪽 가운데 − */
.inv-stage .invite__account[data-row] {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 22px; gap: 6px; align-items: center;
    margin-bottom: 8px; padding: 10px 6px; background: var(--accent-wash); border-radius: 10px;
}
.inv-stage .invite__account[data-row] > div,
.inv-stage .invite__account[data-row] b,
.inv-stage .invite__account[data-row] span { display: contents; }
.inv-stage .invite__account[data-row] > .inv-row-del { grid-column: 3; grid-row: 1 / span 2; }

/* 유가족 표(장례): 칸 폭을 고정해 줄이 늘어도 정렬이 같음 */
.inv-stage .invite__familyTable { table-layout: fixed; }
.inv-stage .invite__familyTable th { width: 15%; padding: 6px 4px 6px 0; }
.inv-stage .invite__familyTable td { padding: 6px 4px; }
.inv-stage .invite__familyTable td:nth-child(2) { width: 25%; }
.inv-stage .invite__familyTable td.invite__familyDel { width: 30px; padding: 6px 0 6px 4px; text-align: right; }
.inv-stage .invite__familyTel .inv-input { display: inline-block; width: calc(100% - 48px); vertical-align: middle; }
.inv-stage .invite__familyTel .inv-hide { vertical-align: middle; margin-left: 4px; }
@media (max-width: 339px) {   /* 아주 좁은 폰: 감춤을 번호 칸 아래로 */
    .inv-stage .invite__familyTel .inv-input { width: 100%; }
    .inv-stage .invite__familyTel .inv-hide { display: flex; justify-content: flex-end; margin: 4px 0 0; }
}

/* 사진 자리 — 사진이 있으면 모서리 버튼, 없으면 "등록" 칸 */
.inv-stage .invite__person, .inv-stage .inv-tile, .inv-stage .inv-person-photo { position: relative; }
.inv-stage .inv-tile { display: block; }
.inv-stage .inv-tile picture { display: block; }
.inv-stage .inv-tile--add { aspect-ratio: 1; }

.inv-stage .inv-photo-ui { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; gap: 6px; }
.inv-stage .inv-btn {
    margin: 0; padding: 7px 11px; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.2;
    color: #fff; background: rgba(20,24,29,.74); border: 0; border-radius: 999px; cursor: pointer;
}
.inv-stage .inv-btn--del { background: rgba(163,58,46,.92); }
.inv-stage .inv-btn:disabled { opacity: .35; cursor: default; }
.inv-stage .inv-tile .inv-photo-ui { top: 4px; right: 4px; gap: 3px; }
.inv-stage .inv-tile .inv-btn { padding: 5px 8px; font-size: 11px; }
.inv-stage .inv-photo-move { position: absolute; left: 50%; bottom: 4px; z-index: 3; display: flex; gap: 3px; transform: translateX(-50%); }
.inv-stage .inv-photo-move .inv-btn { padding: 4px 9px; }

.inv-stage .inv-photo-ui--empty {
    position: static; top: auto; right: auto;
    display: flex; align-items: center; justify-content: center;
    width: 100%; aspect-ratio: 4 / 3; border-radius: 8px;
    border: 2px dashed var(--accent); background: var(--accent-wash);
}
.inv-stage .inv-photo-ui--empty .inv-btn { background: transparent; color: var(--accent); font-size: 14px; }
.inv-stage .inv-photo-ui--person { aspect-ratio: 3 / 4; border-radius: 999px 999px 8px 8px; margin-bottom: 12px; }
.inv-stage .inv-photo-ui--tile { height: 100%; aspect-ratio: auto; border-radius: 2px; }

/* 고인 사진 — 둥근 자리를 눌러 등록·변경합니다 */
.inv-stage .inv-portrait-box { position: relative; width: 140px; margin: 0 auto 14px; }
.inv-stage .inv-portrait-box .invite__portrait { margin: 0; cursor: pointer; }
.inv-stage .inv-photo-ui--portrait { width: 140px; height: 140px; aspect-ratio: 1; border-radius: 999px; margin: 0 auto; }
.inv-stage .inv-portrait-box .inv-photo-ui:not(.inv-photo-ui--empty) { top: -4px; right: -64px; flex-direction: column; }

/* 조화 이미지 영역 — 이미지(또는 빈 바탕)를 누르면 선택 창이 열립니다. 글자 칸 밖은 눌림이 이미지로 갑니다. */
.inv-stage [data-deco-pick] { cursor: pointer; }
.inv-stage .invite__mheroBody, .inv-stage .invite__mthanksBody { pointer-events: none; }
.inv-stage .invite__mheroBody .inv-input, .inv-stage .invite__mthanksBody .inv-input { pointer-events: auto; }
.inv-stage .invite__mhero .inv-input, .inv-stage .invite__mthanks .inv-input { color: #fff; }
.inv-stage .invite__mhero .inv-input::placeholder, .inv-stage .invite__mthanks .inv-input::placeholder { color: rgba(255,255,255,.5); }
.inv-stage .invite__mthanks .inv-input { text-align: left; }
.inv-stage .inv-deco-btn { position: absolute; top: 10px; right: 10px; z-index: 3; }
.inv-stage .invite__mhero .inv-input, .inv-stage .invite__mthanks .inv-input { outline-color: rgba(255,255,255,.55); }
.inv-stage .invite__mhero .inv-input:focus, .inv-stage .invite__mthanks .inv-input:focus { background: rgba(0,0,0,.35); outline-color: #fff; }

/* 조화 이미지 선택 창 (편집 화면 바깥쪽) */
.deco-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--overlay); }
.deco-modal[hidden] { display: none; }
/* 상자 · 머리는 .modal__box · .panel__head 그대로(blade). 이미지 목록이라 폭만 넓고, 본문만 스크롤합니다 */
.deco-modal .modal__box { max-width: 760px; display: flex; flex-direction: column; overflow: hidden; }
.deco-modal__body { overflow: auto; }
.deco-modal__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-3); }
.deco-modal__item { display: block; width: 100%; margin: 0; padding: 6px; font: inherit; text-align: center; background: var(--paper); border: 2px solid var(--neutral-300); border-radius: var(--radius-lg); cursor: pointer; }
.deco-modal__item img, .deco-modal__none { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--neutral-100); color: var(--neutral-500); font-size: var(--text-sm); }
.deco-modal__item span:not(.deco-modal__none) { display: block; margin-top: 6px; font-size: var(--text-xs); color: var(--neutral-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deco-modal__item.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.deco-modal__empty { padding: 28px 0; text-align: center; color: var(--ink-faint); font-size: 14px; }

/* ══════════════════════════════════════════════════════════════════
   고객 계정 · 업체 계정 — 좁은 화면 정리 (이 두 화면의 표 · 이력 검색줄 · 일괄 단추에만 적용)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* 고객 이름 아래에 연락처를 내려 잘리지 않게 */
    #accountsGrid .tabulator-cell[tabulator-field="customer_name"] { flex-wrap: wrap; align-content: center; overflow-wrap: anywhere; white-space: normal; }
    #accountsGrid .tabulator-cell[tabulator-field="customer_name"] .small { flex: 0 0 100%; margin: 0; }
    /* 이력 표 — 내용이 긴 칸은 줄바꿈해 끝이 잘려 보이지 않게 */
    #accountHistoryGrid .tabulator-cell,
    #creditHistoryGrid .tabulator-cell { white-space: normal; overflow-wrap: anywhere; }
    #accountHistoryGrid .tabulator-cell .nowrap { white-space: nowrap; }
}
@media (max-width: 560px) {
    /* 목록 검색줄(행사 관리) — 선택 칸은 나란히, 기간 · 검색어는 한 줄씩, 검색 · 초기화는 반반 */
    .toolbar--filter select { flex: 1 1 40%; min-width: 0; }
    .toolbar--filter .toolbar__range { flex: 1 1 100%; min-width: 0; }
    .toolbar--filter .toolbar__range input[type=date] { flex: 1 1 0; min-width: 0; width: auto; }
    .toolbar--filter input[type=text] { flex: 1 1 100%; max-width: none; }
    .toolbar--filter .btn { flex: 1 1 0; }
    /* 이력 검색줄 — 선택 칸은 나란히, 업체명은 한 줄, 검색 · 초기화는 반반 */
    .toolbar--history { padding: 12px; }
    .toolbar--history select { flex: 1 1 40%; min-width: 0; }
    .toolbar--history input[type=text] { flex: 1 1 100%; max-width: none; }
    .toolbar--history .btn { flex: 1 1 0; }
    /* 선택 활성화 · 비활성화 — 한 줄에 반반, 선택 수는 아래 줄 */
    #bulkStatusForm .toolbar { padding: 12px; }
    #bulkStatusForm .toolbar .btn { flex: 1 1 0; min-height: 40px; padding: 6px 8px; white-space: nowrap; }
    #bulkStatusForm .toolbar .muted { flex: 0 0 100%; }
    #accountsGrid .tabulator-row .tabulator-cell,
    #accountHistoryGrid .tabulator-row .tabulator-cell,
    #creditHistoryGrid .tabulator-row .tabulator-cell { padding: 10px 8px; }
    /* 머리글도 같은 좌우 여백 — 다르면 머리글 글자와 본문이 어긋납니다 */
    #accountsGrid .tabulator-header .tabulator-col .tabulator-col-content,
    #accountHistoryGrid .tabulator-header .tabulator-col .tabulator-col-content,
    #creditHistoryGrid .tabulator-header .tabulator-col .tabulator-col-content { padding: 0 8px; }
    #accountsGrid .tabulator-row .tabulator-responsive-collapse,
    #accountHistoryGrid .tabulator-row .tabulator-responsive-collapse,
    #creditHistoryGrid .tabulator-row .tabulator-responsive-collapse { padding: 0 8px 10px; }
}

/* ── 관리자 화면 컴팩트 정리 ─────────────────────────────────────────
   body.is-admin(layouts/app — 슈퍼관리자 화면)에서만 적용합니다. 업체·고객 화면은 그대로입니다.
   검색 영역 · 카드 · 표의 위아래 여백과 입력 · 버튼 높이만 줄이고, 글자 크기와 색은 건드리지 않습니다. */
body.is-admin .topbar { padding: var(--space-3) var(--space-6); }
body.is-admin .content { padding: var(--space-5) var(--space-6); }
body.is-admin .content > * + *,
body.is-admin .sections > :not([type="hidden"]):not([hidden]) ~ :not([type="hidden"]):not([hidden]) { margin-top: var(--space-4); }
body.is-admin .panel__head { padding: 12px 16px; }
body.is-admin .panel__body { padding: 16px; }
body.is-admin .panel__body.toolbar { padding: 12px 16px; }                    /* 검색 영역 */
body.is-admin .toolbar select,
body.is-admin .toolbar input[type=text], body.is-admin .toolbar input[type=search],
body.is-admin .toolbar input[type=date], body.is-admin .toolbar input[type=time] { min-height: 38px; padding: 6px 12px; }
body.is-admin .toolbar .btn { min-height: 38px; padding: 6px 16px; }
body.is-admin .toolbar .btn--sm { min-height: auto; padding: 6px 11px; }
/* 위아래만 줄입니다 — 좌우 여백은 머리글(16px · 모바일 12px)과 같아야 머리글 글자와 본문이 같은 선에서 시작합니다 */
body.is-admin .tabulator .tabulator-row .tabulator-cell { padding-top: 10px; padding-bottom: 10px; }
@media (min-width: 641px) {
    body.is-admin .toolbar select, body.is-admin .toolbar input[type=text], body.is-admin .toolbar input[type=date] { font-size: 15px; }
}
@media (max-width: 640px) {
    body.is-admin .topbar { padding: var(--space-3) var(--space-4); }
    body.is-admin .content { padding: var(--space-3) var(--space-4); }
}