/**
 * 파일명: bugo-public.css
 * 파일경로: /home/freebugocokr/public_html/css/bugo-public.css
 * 기능: 부고장 미리보기, 공유, 완료, 관리, 감사장 등 공개 화면 전용 스타일 정의
 * 작성일: 2026-05-08
 *
 * @version   1.5.3
 * @updated   2026-09-04
 * @shared    복제사이트 공용 파일 — 여기서 고치면 다른 사이트에도 이식해야 한다
 *            (⚠️ 6호는 2026-07-31 전파 세트에서 분리됐다 — 자동 전파 대상이 아니다)
 * @changelog
 *   1.5.3 (2026-09-04) .fw-banner-desc 14px→15px · 굵기 500→700 (클라이언트 3차 요청).
 *                      430px 이하 14px 구간 신설 — <br> 고정 줄바꿈이 접히는 것을 막는다.
 *                      15px 이 <br> 를 유지한 채 쓸 수 있는 한계값이다(주석에 근거)
 *   1.5.2 (2026-09-04) .fw-banner-desc 12px→14px(380px 이하 13px). 색·굵기만으로는
 *                      여전히 안 보인다는 클라이언트 재지적 — 크기까지 올렸다
 *   1.5.1 (2026-09-04) .fw-banner-desc 가독성 — 크림 배경에서 대비 3.65:1 이라 글씨가
 *                      연해 보인다는 클라이언트 지적. #333333 + 굵기 500 으로 11.7:1 확보
 *   1.5.0 (2026-08-14) 화환 주문 마감 상태 신설 — .fw-closed(배너를 대신하는 안내 블록) ·
 *                      하단 고정메뉴 .fixed-menu-btn--flower.is-closed
 *   1.4.0 (2026-08-07) 샘플 페이지 블록 신설(.public-bugo-sample-banner/-cta).
 *                      폐기한 sample.php 에 1호 초록(#4a7c59)이 인라인으로 박혀 있어 6호에서도
 *                      초록 버튼이 나왔다 - 테마 변수(var(--color-primary))로 바꿨다
 *   1.3.0 (2026-08-07) 공유 모달 재배치 — 보내기 3종을 전체폭 세로 버튼으로, QR 은
 *                      버튼이 아닌 안내 블록(.public-bugo-share-qr)으로 분리.
 *                      2열 격자에서 QR 만 2행을 차지해 오른쪽 아래가 비고, 가장 덜 쓰는
 *                      QR 이 가장 크게 보이던 문제. 하단 '닫기' 버튼과 __footer 제거
 *   1.2.0 (2026-07-30) 조문 작성/삭제 비밀번호 눈 아이콘 .pw-field/.pw-toggle 스타일 추가
 *                      (전역 코딩 표준 §0-A)
 *   1.1.0 (2026-07-30) .public-bugo-fixed-menu.is-one 신설 — 무빈소에서 화환이 빠지고
 *                      부의금까지 사양하면 하단 버튼이 '부고전달' 하나만 남는다.
 *                      기본 3열을 그대로 두면 버튼이 1/3 폭만 차지하고 나머지가 빈칸이 된다
 *   1.0.0 (2026-05-08) 이 시점까지의 공개 화면 스타일 일체
 *
 * 주의: 기존 BugoController.php 안의 inline CSS와 충돌을 줄이기 위해
 *       public-bugo-* prefix를 사용한다.
 */

/* [부고 미리보기] 전체 래퍼 */
.public-bugo-page {
    padding-bottom: 130px;
}

.public-bugo-wrap {
    max-width: 620px;
    margin: 0 auto;
}

/* [부고 미리보기] 상단 안내 */
.public-bugo-preview-head {
    margin-bottom: 22px;
}

.public-bugo-preview-head h1 {
    margin-bottom: 10px;
}

.public-bugo-preview-head p {
    margin-top: 0;
    color: #555;
}

/* [부고 미리보기] 대표 카드 */
/* [빈소 머리글] 부고장 맨 위 — 장례식장명 + 빈소(호실).
   글자만 있으면 눈에 안 들어온다는 요청(2026-08-06)으로 **어두운 띠**로 바꿨다.
   색은 테마 변수라 사이트마다 자기 색이 나온다(6호 네이비 / 1호 등은 각자 테마).

   ⚠️ 명조 계열 글꼴 스택은 **사이트별 홈 CSS(home-{사이트}.css)** 에도 있지만, 그 파일은
      홈에서만 로드된다. 부고장 화면에서 쓰려면 반드시 여기(부고장이 읽는 CSS)에 적어야
      하고, 홈 CSS 의 것을 믿으면 조용히 기본 고딕으로 떨어진다.

   ⚠️ 어두운 배경 위에서는 글자색을 **직접** 지정해야 한다. 기본값은 어두운 색이라
      배경과 같아져 글자가 사라진다(6호 네이비에서 실제로 그렇게 된다). */
.public-bugo-hall-head {
    margin: 0 0 20px;
    padding: 20px 18px;
    border-radius: 16px;
    background: var(--color-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    text-align: center;
    font-family: Georgia, "Noto Serif KR", "Nanum Myeongjo", Batang, serif;
    color: #fff;
}

.public-bugo-hall-head__name {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    word-break: keep-all;
    color: #fff;
}

/* 호실은 이름 아래 한 단계 — 색을 낮춰 두 줄의 위계를 만든다.
   ⚠️ `--color-accent` 는 **6호에만 있다**(1~5호 테마에는 없다). 폴백을 빼면 1~5호에서
      선언 자체가 무효가 되어 색이 부모(흰색)로 떨어지고 위계가 사라진다. */
.public-bugo-hall-head__room {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    word-break: keep-all;
    color: var(--color-accent, rgba(255, 255, 255, .82));
}

/* 미정은 확정 정보가 아니므로 한 톤 더 낮춘다(어두운 배경이라 흰색 계열로 낮춘다 —
   기존 --color-accent-text 는 짙은 갈색이라 여기서는 보이지 않는다). */
.public-bugo-hall-head__room.is-undecided {
    color: rgba(255, 255, 255, .72);
    font-weight: 600;
}

@media (max-width: 480px) {
    .public-bugo-hall-head { padding: 17px 14px; }
    .public-bugo-hall-head__name { font-size: 22px; }
    .public-bugo-hall-head__room { font-size: 19px; }
}

/* [배경] 국화 문양 배경지(bugo_profile_bg.webp 887x1774, 세로 1:2).
   카드 높이가 내용에 따라 달라지므로 cover 로 채우고 위쪽을 기준으로 앉힌다.
   배경이 밝은 아이보리라 본문 글자색(#111)은 그대로 두어도 대비가 유지된다.
   ⚠️ 이미지가 없을 때를 대비해 background-color 를 먼저 둔다 — 안 그러면 흰 카드가
      아니라 투명이 되어 페이지 배경이 그대로 비친다. */
/* [무빈소] 장례식장명 대신 안내 문구가 들어간다. 문장이 길어 같은 크기로 두면 두 줄로
   접혀 띠가 뚱뚱해지므로 한 단계 줄인다. 내용이 안내라서 시각적 무게도 낮추는 편이 맞다. */
.public-bugo-hall-head.is-notice .public-bugo-hall-head__name { font-size: 21px; }
.public-bugo-hall-head.is-notice .public-bugo-hall-head__room { font-size: 16px; }

@media (max-width: 480px) {
    .public-bugo-hall-head.is-notice .public-bugo-hall-head__name { font-size: 18px; }
    .public-bugo-hall-head.is-notice .public-bugo-hall-head__room { font-size: 14px; }
}

.public-bugo-hero-card {
    background-color: #fffdf7;
    background-image: url('/assets/images/bugo_profile_bg.webp');
    /* ⚠️ cover 를 쓰면 안 된다. 이 배경지에는 **테두리 장식이 그려져 있어서**, 카드 비율이
       이미지 비율(887:1774)과 다르면 넘치는 쪽이 잘려 테두리 아래가 사라진다
       (2026-08-06 실제로 하단 테두리가 잘렸다). 100% 100% 로 카드에 맞춰 늘린다 —
       장식 테두리라 약간의 늘어남은 눈에 띄지 않고, 사면이 온전히 남는 것이 더 중요하다. */
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--color-border);
    border-radius: 22px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
    padding: 34px 22px;
    margin-bottom: 22px;
    text-align: center;
}

/* [부고 미리보기] 프로필 이미지 + 부고 텍스트 이미지 영역 */
.public-bugo-symbols {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin-bottom: 28px;
}

/* [프로필 심볼] 텍스트 이미지와 같은 이유로 흰 배경을 지운다(2026-08-06).
   라이브러리 이미지가 투명 PNG 가 아니라 **흰 바탕**이라, 국화 배경지 위에 흰 사각형으로
   떠 보였다. multiply 는 흰색을 곱해도 아래 색이 그대로 남으므로 배경만 사라진다.
   ⚠️ 6호 전용이다 — 배경지를 깐 사이트가 6호뿐이고, 어두운 배경에서는 이 방법이 성립하지
      않는다(그때는 이미지를 투명 PNG 로 다시 만들어야 한다). 같은 규칙이
      .public-bugo-text-symbol 에도 걸려 있으니 한쪽만 고치지 말 것. */
.public-bugo-profile-symbol {
    mix-blend-mode: multiply;
    display: block;
    max-width: 180px;
    max-height: 150px;
    object-fit: contain;
}

/* ── [영정사진] 금색 액자 ────────────────────────────────────────────────────
   goin_frame_02.webp(757x903, 알파 있음)를 **사진 위에 덮는다**.
   액자 가운데가 실제로 뚫려 있어(alpha 0) 사진이 그 구멍으로 비친다.

   ⚠️ 예전 goin_frame_01(국화 화환)은 배경이 불투명해서 사진을 액자 '위에' 얹고
      가장자리를 radial-gradient 마스크로 지웠다. 지금 방식은 반대다 — 사진이 아래,
      액자가 위다. 그래서 사진이 구멍보다 조금 커도 액자가 가려 준다(오차에 강하다).

   아래 %는 눈대중이 아니라 PNG 알파를 픽셀로 훑어 얻은 값이다(중앙에서 사방으로
   걸어 나가며 첫 불투명 지점을 찾음). 구멍 = x 47~701, y 45~850 / 751x896 기준.
   **액자 이미지를 바꾸면 이 값을 다시 재야 한다** — 2026-08-06 얇은 액자로 교체하면서
   실제로 다시 쟀다(이전 757x903 / 구멍 66%x73% -> 지금 751x896 / 구멍 87%x90%). */
.public-bugo-portrait {
    position: relative;
    margin: 0;
    /* 액자가 카드에서 차지하는 비중 — 여기 한 곳만 고치면 된다.
       320px -> 250px -> 190px 로 줄여 왔다(2026-08-06).
       ⚠️ 마지막 축소는 얇은 액자로 교체한 결과다. 상자 대비 사진이 66% -> 87% 로 커져서
          같은 250px 라도 사진이 훨씬 크게 보였다. 액자를 바꾸면 이 값도 함께 봐야 한다.
       높이는 aspect-ratio 가 알아서 따라온다. */
    width: min(190px, 48vw);
    aspect-ratio: 751 / 896;
}

/* 액자를 사진 위에 덮는 층. img 보다 뒤에 그려지므로 z-index 없이도 위에 온다. */
.public-bugo-portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/assets/images/goin_frame_02.webp') center / contain no-repeat;
    pointer-events: none;
}

.public-bugo-portrait img {
    position: absolute;
    left: 6.26%;
    top: 5.02%;
    width: 87.22%;
    height: 89.96%;
    object-fit: cover;
}

/* [텍스트 이미지] 訃告 등 라이브러리 이미지는 **흰 배경**으로 만들어져 있어(투명 아님)
   아이보리 배경지 위에 흰 사각형으로 떠 보였다(2026-08-06).
   multiply 는 흰색(1.0)을 곱해도 아래 색이 그대로 남으므로 흰 배경만 사라진다.
   ⚠️ 이 방식은 배경이 **밝을 때만** 성립한다. 어두운 배경으로 바꾸면 글자가 묻히므로
      그때는 이미지 자체를 투명 PNG 로 다시 만들어야 한다.
   이미지 수십 장을 일괄 투명화하는 대신 CSS 한 줄로 푼 것이다. */
.public-bugo-text-symbol {
    mix-blend-mode: multiply;
    display: block;
    max-width: 200px;
    max-height: 100px;
    object-fit: contain;
}

/* [부고 미리보기] 메인 부고 문구 */
.public-bugo-main-copy {
    margin: 0;
    color: #111;
    font-size: 18px;
    line-height: 1.9;
    word-break: keep-all;
}

/* [부고 미리보기] 섹션 공통 */
.public-bugo-section {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
    padding: 22px;
    margin-bottom: 18px;
}

.public-bugo-section h2 {
    margin: 0 0 16px;
    font-size: 20px;
    line-height: 1.35;
}

/* [부고 미리보기] 목록 */
.public-bugo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.public-bugo-list li {
    padding: 11px 0;
    border-bottom: 1px solid var(--color-surface-mute);
    line-height: 1.6;
}

.public-bugo-list li:last-child {
    border-bottom: 0;
}

.public-bugo-list-box {
    margin: 0;
    background: var(--color-surface-soft);
    border-radius: 14px;
    overflow: hidden;
    text-align: left;
}

.public-bugo-list-box .public-bugo-list li {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 14px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--color-border-light);
    align-items: start;
}

.public-bugo-list-label {
    color: var(--color-primary);
    font-weight: 900;
    display: block;
    min-width: 92px;
}

.public-bugo-list-value {
    color: #111;
    line-height: 1.6;
    word-break: keep-all;
    display: flex;
    align-items: center;
    gap: 10px;
}

.public-bugo-account-no {
    justify-content: space-between;
}

.public-bugo-copy-account {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    background: #444;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.public-bugo-copy-account:hover {
    background: #222;
}

.public-bugo-list-box .public-bugo-list li:last-child {
    border-bottom: 0;
}

/* [부고 미리보기] 일정/정보 테이블 */
.public-bugo-table {
    margin: 0;
    background: var(--color-surface-soft);
    border-radius: 14px;
    overflow: hidden;
}

.public-bugo-table div {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 14px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--color-border-light);
    text-align: left;
}

.public-bugo-table div:last-child {
    border-bottom: 0;
}

.public-bugo-table dt {
    color: var(--color-primary);
    font-weight: 900;
}

.public-bugo-table dd {
    margin: 0;
    color: #111;
    line-height: 1.6;
}

/* [부고 미리보기] 안내 박스 */
.public-bugo-message-box {
    margin: 0;
    background: var(--color-surface-soft);
    border-radius: 14px;
    padding: 16px;
    color: #222;
    line-height: 1.75;
    text-align: left;
    word-break: keep-all;
}

.public-bugo-map-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.public-bugo-map-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
}

/* [지도] 카카오맵 SDK 지도 — kakao_map=true 사이트(1호)에서만 렌더링됨 */
.public-bugo-kakao-map {
    width: 100%;
    height: 260px;
    margin-top: 14px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    background: var(--color-surface-soft);
}

.public-bugo-map-note {
    margin: 10px 0 0;
    color: #666;
    font-size: 13px;
    line-height: 1.5;
}

.public-bugo-support-section {
    text-align: center;
}

.public-bugo-support-section h2 {
    margin-bottom: 12px;
}

.public-bugo-support-section p {
    margin: 0;
    color: #555;
    font-size: 15px;
    line-height: 1.7;
}

.public-bugo-support-warning {
    margin-top: 10px !important;
    color: #999 !important;
    font-weight: 400;
    font-size: 13px;
}

.public-bugo-support-actions {
    margin-top: 20px;
    text-align: center;
}

.public-bugo-flower-cta {
    display: inline-block;
    width: auto;
    box-sizing: border-box;
    padding: 10px 36px;
    background: transparent;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border: 1.5px solid var(--color-primary);
    border-radius: 20px;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.public-bugo-flower-cta:hover {
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
}

.public-bugo-flower-cta:active {
    background: var(--color-primary-dark);
    color: #fff;
}

/* [스팸 방어] 허니팟 — 사람에게는 보이지 않고 자동 폼 채움 봇만 채우는 함정 필드 */
.public-bugo-hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* [부고 미리보기] 조문 메시지 UI */
.public-bugo-guestbook-form label {
    display: block;
    margin: 0 0 7px;
    font-size: 14px;
    font-weight: 800;
    text-align: left;
}

.public-bugo-guestbook-form input,
.public-bugo-guestbook-form textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
    padding: 12px;
    font-size: 15px;
    font-family: inherit;
}

.public-bugo-guestbook-form textarea {
    min-height: 96px;
    resize: vertical;
}

.public-bugo-guestbook-form button {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 10px;
    background: #22282b;
    color: #fff;
    font-weight: 900;
    font-size: 15px;
}

.public-bugo-preview-note {
    margin: 12px 0 0;
    color: #777;
    font-size: 13px;
    line-height: 1.55;
}

.public-bugo-empty-message {
    background: #fff;
    border: 1px dashed var(--color-border);
    border-radius: 18px;
    padding: 28px 18px;
    margin-bottom: 18px;
    text-align: center;
    color: #666;
}


.public-bugo-content-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 8px;
}

.public-bugo-content-head label {
    margin: 0;
}

.public-bugo-content-head button {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

/* [부고 미리보기] 최종 확정 버튼 */
.public-bugo-confirm-form {
    margin-top: 18px;
}

.public-bugo-preview-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.public-bugo-preview-actions button {
    height: 52px;
    border-radius: 14px;
    border: 0;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
}

.public-bugo-preview-actions .secondary {
    background: #fff;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.public-bugo-preview-actions button[type="submit"] {
    background: var(--bugo-btn-bg);
    color: var(--bugo-btn-color);
    border: 1.5px solid var(--bugo-btn-border);
    font-weight: 600;
}
.public-bugo-preview-actions button[type="submit"]:hover { background: var(--bugo-btn-bg-hover); }

/* [부고 공유] 하단 고정 메뉴 */
.public-bugo-fixed-menu {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 80;
    width: min(620px, 100%);
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
}

.public-bugo-fixed-menu.is-two {
    grid-template-columns: repeat(2, 1fr);
}

/* [무빈소] 화환이 빠지고 부의금도 사양하면 버튼이 '부고전달' 하나만 남는다.
   기본값(3열)을 그대로 두면 버튼이 화면 1/3만 차지하고 나머지가 빈칸이 된다. */
.public-bugo-fixed-menu.is-one {
    grid-template-columns: 1fr;
}

.public-bugo-fixed-menu .fixed-menu-btn {
    min-height: 60px;
    border: 0;
    border-right: 1px solid rgba(0, 0, 0, .08);
    border-radius: 0;
    background: #fff;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    padding: 0 6px;
    -webkit-tap-highlight-color: transparent;
}

.public-bugo-fixed-menu .fixed-menu-btn:last-child {
    border-right: 0;
}

.public-bugo-fixed-menu .fixed-menu-btn--donation {
    background: #f0c040;
    color: #3a2800;
}

.public-bugo-fixed-menu .fixed-menu-btn--donation:active {
    background: #e0b030;
}

.public-bugo-fixed-menu .fixed-menu-btn--share {
    background: #fff;
    color: #444;
}

.public-bugo-fixed-menu .fixed-menu-btn--share:active {
    background: var(--color-surface-mute);
}

.public-bugo-fixed-menu .fixed-menu-btn--flower {
    background: #4a90d9;
    color: #fff;
}

.public-bugo-fixed-menu .fixed-menu-btn--flower:active {
    background: #3a80c9;
}

/* [주문 마감] 발인예정일 전날 18시가 지난 상태.
   버튼을 없애지 않고 **회색으로 죽여** 자리만 지킨다 — 개수가 줄면 열 수가 바뀌어
   남은 버튼들이 폭을 다시 나눠 갖는다(위 is-one/is-two 계산). 눌리기는 하되
   상점으로 가지 않고 이유를 알린다. */
.public-bugo-fixed-menu .fixed-menu-btn--flower.is-closed {
    background: var(--color-surface-mute);
    color: var(--color-text-muted);
}
.public-bugo-fixed-menu .fixed-menu-btn--flower.is-closed:active {
    background: var(--color-surface-mute);
}

.fixed-menu-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* [부고 공유] 조의금 팝업 */
.public-bugo-donation-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 120;
}

.public-bugo-donation-modal.is-open {
    display: block;
}

.public-bugo-donation-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .42);
}

.public-bugo-donation-modal__dialog {
    position: absolute;
    left: 50%;
    bottom: 96px;
    width: min(520px, calc(100% - 28px));
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 22px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .22);
    overflow: hidden;
}

.public-bugo-donation-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    background: var(--color-primary);
    color: #fff;
}

.public-bugo-donation-modal__header h3 {
    margin: 0;
    font-size: 18px;
    color: #fff;
}

.public-bugo-donation-modal__header button {
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.public-bugo-donation-modal__body {
    padding: 14px 16px;
    background: var(--color-surface-soft);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* [근조화환] 사전 안내 모달 본문 + 보낸 분 명단 */
.public-bugo-flower-modal-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    text-align: center;
}

.public-bugo-flower-modal-preview {
    display: flex;
    justify-content: center;
    padding: 4px 0;
}

.public-bugo-flower-modal-go {
    align-self: center;
}

/* [구분] 위쪽 '조의금 및 근조화환 안내'와 한 덩어리로 보여 어디까지가 안내이고
   어디부터가 명단인지 읽히지 않았다(2026-08-06 사용자 지적). 구분선 + 여백으로 끊고,
   라벨을 소제목 무게로 올려 두 블록이 다른 내용임을 드러낸다. */
.public-bugo-flower-senders {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border-light);
}

/* 위 섹션 제목(.public-bugo-section h2 — 20px / line-height 1.35)과 같은 모양으로 맞춘다.
   색·굵기는 지정하지 않는다 — h3 기본값이 h2 와 같은 계열이라 손대면 오히려 어긋난다. */
.public-bugo-flower-senders-label {
    margin: 0 0 16px;
    font-size: 20px;
    line-height: 1.35;
    text-align: center;
}

.public-bugo-flower-senders-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* [빈 상태] 이 목록은 flex 라, 안에 든 빈 안내가 **내용만큼만** 좁아진다.
   조문 메시지 쪽(블록 요소)과 폭이 달라 보이던 원인이 이것이다 — 한 줄을 통째로 쓰게 한다.
   아래 여백은 카드 안쪽이라 필요 없다(조문 메시지 쪽은 뒤에 폼이 이어져 필요하다). */
.public-bugo-flower-senders-list .public-bugo-empty-message {
    flex: 1 1 100%;
    margin-bottom: 0;
}

.public-bugo-flower-sender-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 30px;
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: 600;
}

.public-bugo-flower-sender-chip em {
    font-style: normal;
    color: #999;
    font-weight: 400;
}

/* ══════════════════════════════════════════════════════════════════════════
   [꽃으로 마음을 보내신 분들] 2026-08-14 클라이언트 지정 구성

   예전에는 이름만 칩으로 나열했다(.public-bugo-flower-sender-chip — 위 규칙들은
   미리보기 화면이 아직 쓰고 있어 남겨 둔다). 이제 화환 사진 + 보낸 분 + 조의문구를
   한 줄로 보여 준다.
   ══════════════════════════════════════════════════════════════════════════ */

.fw-senders-section { padding-top: 18px; }

.fw-senders-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-light);
}

.fw-senders-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

/* 머리글 — 안내 문구(가운데)와 간편구매 버튼(오른쪽) */
/* 머리글에 은은한 크림 바탕을 깐다 — 흰 카드에 흰 머리글이라 명단과 구분이 안 됐다.
   아래 배너와 같은 계열 색이라 두 블록이 한 세트로 읽힌다. */
.fw-senders-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 14px 16px 18px;
    background: linear-gradient(180deg, var(--color-cream-start), var(--color-cream));
    border-bottom: 1px solid var(--color-cream-border);
}
.fw-senders-head p {
    flex: 1 1 auto;
    margin: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-primary);
    letter-spacing: -0.01em;
}
.fw-quickbuy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 6px;
    background: var(--color-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.fw-quickbuy:hover { background: var(--color-primary-light); }

/* 명단 */
.fw-senders-list { margin: 0; padding: 0; list-style: none; }

.fw-sender {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-light);
}
.fw-sender:last-child { border-bottom: 0; }

.fw-sender-thumb {
    flex: 0 0 44px;
    width: 44px;
    height: 60px;
    object-fit: contain;
    background: transparent;
}

.fw-sender-body { min-width: 0; }
.fw-sender-body strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.4;
    word-break: keep-all;
}
.fw-sender-body span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--color-text-light);
    line-height: 1.4;
}

.fw-senders-empty {
    margin: 0;
    padding: 26px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--color-text-muted);
}

/* 전체보기 / 접기 */
.fw-senders-more { text-align: center; margin-top: -13px; }
.fw-senders-more button {
    height: 28px;
    padding: 0 18px;
    border: 1px solid var(--color-border);
    border-radius: 30px;
    background: #fff;
    color: var(--color-text-light);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.fw-senders-more button:hover { border-color: var(--color-primary-border); color: var(--color-primary); }

/* ── 근조화환 보내기 배너 ─────────────────────────────────────────────────
   2026-08-14 클라이언트 지정 디자인. 크림 바탕 + 명조 계열 굵은 문구 +
   금색 장식선 + 어두운 알약 버튼. 화환은 **배경이 투명한 전용 이미지**를 쓴다
   (상품 썸네일은 흰 배경이라 크림 위에 네모가 비친다).
   ────────────────────────────────────────────────────────────────────────── */

.fw-banner {
    display: flex;
    /* 화환을 세로 가운데에 둔다. 예전엔 바닥에 붙여(flex-end) 카드 아래쪽에
       쏠려 보였다. */
    align-items: center;
    gap: 4px;
    margin-top: 18px;
    padding: 22px 12px 22px 24px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-cream-start), var(--color-cream-end));
    border: 1px solid var(--color-cream-border);
    color: inherit;
    overflow: hidden;
}

/* ⛔ 링크 안의 글자에 밑줄이 생기지 않게 **상태를 전부** 못박는다.
   기본 상태만 none 으로 두면 브라우저·확장 프로그램에 따라 hover 에서 다시 그어진다.
   이 배너는 블록 전체가 링크라, 밑줄이 한 번 뜨면 카드가 통째로 그어진 것처럼 보인다. */
.fw-banner,
.fw-banner:hover,
.fw-banner:focus,
.fw-banner:active,
.fw-banner:visited,
.fw-banner * { text-decoration: none; }

.fw-banner-text {
    flex: 1 1 auto;
    min-width: 0;
    /* 참고 화면의 명조 계열 느낌. 시스템에 없으면 기본 sans 로 떨어진다. */
    font-family: "Nanum Myeongjo", "Noto Serif KR", serif;
}

.fw-banner-lead {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--color-primary);
}

/* 금색 장식선 — 참고 화면의 문양 자리. 이미지 대신 CSS 로 그려 파일을 늘리지 않는다. */
.fw-banner-orn {
    display: block;
    width: 128px;
    height: 9px;
    margin: 0 0 14px;
    background:
        linear-gradient(var(--color-accent), var(--color-accent)) left 4px / 52px 1px no-repeat,
        linear-gradient(var(--color-accent), var(--color-accent)) right 4px / 52px 1px no-repeat;
    position: relative;
}
.fw-banner-orn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 1px;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    background: var(--color-accent);
    transform: rotate(45deg);
}

.fw-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 20px;
    border: 1px solid var(--color-accent-deep);
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-accent);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
}
.fw-banner-cta em { font-style: normal; font-size: 18px; }
.fw-banner:hover .fw-banner-cta { background: var(--color-primary-light); }

/* ⛔ 이 문단은 **--color-text-muted 로 되돌리지 말 것**(2026-09-04 클라이언트 지적).
   크림 배경(#fdf6e3) 위의 #7b8188 은 명도 대비가 3.65:1 로 작은 글자 기준(4.5:1)에
   못 미쳤다. 게다가 .fw-banner-text 가 명조 계열이라 12px 에서 획이 더 가늘어 보인다.
   #333333 으로 11.7:1 을 확보하고 굵기를 500 으로 올려 획을 세운다.
   제목(.fw-banner-lead)은 네이비 17px/700 이라 색·크기·굵기 모두 달라 위계는 유지된다. */
/* ⚠️ 줄바꿈이 마크업의 <br> 로 고정돼 있다(share.php). 가장 긴 줄 "번거로운 주소 입력 없이"
   가 텍스트 칸보다 길어지면 그 줄만 한 번 더 접혀 배너가 세로로 늘어난다.
   360px 화면 기준 텍스트 칸은 약 164px 이라 **15px 이 한계**다(한글 10자+공백 ≒ 160px).
   16px 이상으로 올리려면 <br> 을 걷어내 자연 줄바꿈에 맡기거나 화환 폭을 줄여야 한다.
   좁은 화면은 단계적으로 낮춘다. */
.fw-banner-desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text);
    font-weight: 700;
    font-family: inherit;
}

/* 화환은 카드 폭을 실제로 채우도록 키운다. 작게 두면 글과 그림 사이가 벌어져
   오른쪽에 따로 떨어져 있는 것처럼 보인다(2026-08-14 클라이언트 지적). */
.fw-banner-img {
    flex: 0 0 auto;
    width: 48%;
    max-width: 260px;
    align-self: center;
    margin: 0;
    object-fit: contain;
    object-position: center;
}

/* ⛔ 「간편구매」 글자색까지 못박는다.
   theme-*.css 에 `a:hover { color: var(--color-link-dark) }` 가 있는데 그 값이
   **버튼 배경과 같은 네이비**라, 색을 지정하지 않으면 호버하는 순간 글자가
   배경에 묻혀 사라진다(2026-08-14 실제로 그렇게 보였다).
   `.fw-quickbuy:hover`(0,2,0)가 `a:hover`(0,1,1)보다 우선해 이긴다. */
.fw-quickbuy,
.fw-quickbuy:hover,
.fw-quickbuy:focus,
.fw-quickbuy:active,
.fw-quickbuy:visited { color: #fff; text-decoration: none; }

/* 배너는 블록 전체가 링크다 — 안쪽 글자들이 저마다 색을 갖고 있지만,
   색이 없는 요소가 추가될 때를 대비해 링크 자체의 호버 색도 고정한다. */
.fw-banner:hover,
.fw-banner:focus,
.fw-banner:active,
.fw-banner:visited { color: inherit; }

/* ── 주문 마감 안내 ────────────────────────────────────────────────────────
   발인예정일 전날 18시가 지나면 배너(.fw-banner)가 통째로 빠지고 이 블록이
   그 자리에 온다(2026-08-14 클라이언트 지시).

   ⛔ 배너의 크림 바탕·화환 그림·알약 버튼을 물려받지 않는다. 팔지 않는 시점에
      상품 사진이 같이 보이면 아직 주문할 수 있다는 뜻으로 읽힌다.
      그래서 클래스를 .fw-banner 계열과 아예 분리했다 — 나중에 배너 디자인을
      고쳐도 마감 안내가 딸려 바뀌지 않게. */
.fw-closed {
    margin-top: 18px;
    padding: 18px 16px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface-mute);
    text-align: center;
}

.fw-closed-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.fw-closed-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-text-muted);
}

/* 화환과 나란히 놓인 설명글이 접히지 않도록 폭에 따라 한 단계씩 낮춘다.
   (기본 15px — 위 .fw-banner-desc 주석의 계산 근거 참조) */
@media (max-width: 430px) {
    .fw-banner-desc { font-size: 14px; }
}

@media (max-width: 380px) {
    .fw-senders-head { flex-direction: column; align-items: stretch; gap: 10px; }
    .fw-quickbuy { width: 100%; }
    .fw-banner { padding: 18px 8px 18px 16px; }
    .fw-banner-img { width: 44%; }
    .fw-banner-lead { font-size: 15px; }
    .fw-banner-desc { font-size: 13px; }
    .fw-banner-cta { font-size: 15px; padding: 9px 16px; }
    .fw-banner-orn { width: 104px; }
    .fw-banner-orn { background-size: 40px 1px, 40px 1px; }
}

/* [부고 공유] 계좌 카드 */
.public-bugo-account-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 14px 16px;
}

.public-bugo-account-card__meta {
    margin: 0 0 10px;
    font-size: 13px;
    color: #777;
}

.public-bugo-account-card__sep {
    color: #bbb;
}

.public-bugo-account-card__num-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.public-bugo-account-empty {
    margin: 0;
    color: #999;
    font-size: 14px;
    text-align: center;
    padding: 10px 0;
}

/* [부고 미리보기] 모바일 보정 */
@media (max-width: 640px) {
    .public-bugo-page {
        padding-left: 14px;
        padding-right: 14px;
    }

    .public-bugo-hero-card {
        padding: 30px 18px;
    }

    .public-bugo-symbols {
        min-height: 200px;
    }

    .public-bugo-section {
        padding: 20px 18px;
    }

    .public-bugo-table div {
        grid-template-columns: 78px 1fr;
        gap: 12px;
        padding: 14px;
    }

    .public-bugo-main-copy {
        font-size: 17px;
    }
}

/*
|--------------------------------------------------------------------------
| [부고 공유] 공유 화면 하단 일반 버튼
|--------------------------------------------------------------------------
| /bugo/share/{id} 화면에서 링크 복사, 새 부고장 만들기 버튼에 사용한다.
|--------------------------------------------------------------------------
*/

.public-bugo-share-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 18px;
}

.public-bugo-share-actions button,
.public-bugo-share-actions a {
    height: 52px;
    border-radius: 14px;
    border: 1.5px solid var(--bugo-btn-border);
    background: var(--bugo-btn-bg);
    color: var(--bugo-btn-color);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.public-bugo-share-actions a {
    background: #fff;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

/**
 * [조문 메시지] 공유 부고장 조문 메시지 목록
 */
.public-bugo-guestbook-item {
    padding: 16px;
    margin-bottom: 12px;
    border: 0;
    border-radius: 14px;
    background: #f1eadf;
    text-align: left;
}

.public-bugo-guestbook-item:last-child {
    margin-bottom: 0;
}

.public-bugo-guestbook-item strong {
    display: block;
    margin-bottom: 6px;
    color: #222;
    font-size: 15px;
}

.public-bugo-guestbook-item p {
    margin: 0 0 8px;
    color: #333;
    line-height: 1.65;
    word-break: keep-all;
}

.public-bugo-guestbook-item time {
    display: block;
    color: #888;
    font-size: 12px;
}

.public-bugo-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.public-bugo-section-title-row h2 {
    margin: 0;
}

.public-bugo-section-title-row h2 span {
    color: var(--color-primary);
    font-size: 16px;
}

/**
 * [조문 메시지 예문] 조문 메시지 입력 편의를 위한 예문 선택 버튼
 */
.public-bugo-example-box {
    margin: 0 0 12px;
    padding: 14px;
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    background: var(--color-surface-soft);
}

.public-bugo-example-box p {
    margin: 0 0 10px;
    color: #555;
    font-size: 14px;
    font-weight: 800;
}

.public-bugo-example-box button {
    display: block;
    width: 100%;
    min-height: 42px;
    height: auto;
    margin: 6px 0;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    line-height: 1.45;
    cursor: pointer;
}

.public-bugo-example-box button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-soft);
}


/**
 * [조문 메시지 삭제] 공유 부고장 조문 메시지 삭제 폼
 */
.public-bugo-guestbook-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.public-bugo-guestbook-delete {
    margin-top: 10px;
    text-align: left;
}

.public-bugo-guestbook-delete summary {
    display: inline-flex;
    color: #888;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.public-bugo-guestbook-delete form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: end;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--color-surface-mute);
    border-radius: 12px;
    background: #fafafa;
}

.public-bugo-guestbook-delete label {
    margin: 0;
}

.public-bugo-guestbook-delete label span {
    display: block;
    margin-bottom: 4px;
    color: #777;
    font-size: 12px;
    font-weight: 800;
}

.public-bugo-guestbook-delete input {
    margin-top: 0;
    height: 40px;
    font-size: 14px;
}

.public-bugo-guestbook-delete button {
    height: 40px;
    border: 1px solid var(--color-danger);
    border-radius: 10px;
    background: #fff;
    color: var(--color-danger);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

/* [비밀번호] 표시/숨김 눈 아이콘 — 전역 코딩 표준 §0-A. 동작은 pw-toggle.js 참조.
   .public-bugo-guestbook-form(조문 작성)/.public-bugo-guestbook-delete(조문 삭제) 양쪽 스코프. */
.public-bugo-guestbook-form .pw-field,
.public-bugo-guestbook-delete .pw-field {
    position: relative;
}

.public-bugo-guestbook-form .pw-field input,
.public-bugo-guestbook-delete .pw-field input {
    padding-right: 46px;
}

/* ⚠️ 선택자를 .pw-toggle 로 줄이면 같은 폼의 `.어떤폼 button`(0-1-1)에 져서
   눈 아이콘이 제출버튼 모양이 된다(2026-08-06). 근거는 bugo-common.css 주석 참조. */
.pw-field button.pw-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #8a8a8a;
    cursor: pointer;
}

.pw-field button.pw-toggle:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.pw-field button.pw-toggle svg { width: 20px; height: 20px; display: block; }

/**
 * [조문 메시지 예문] 팝업형 예문 선택
 */

.public-bugo-example-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1300;
}

.public-bugo-example-modal.is-open {
    display: block;
}

.public-bugo-example-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
}

.public-bugo-example-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(520px, calc(100% - 32px));
    margin: 80px auto;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    overflow: hidden;
}

.public-bugo-example-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-border-light);
}

.public-bugo-example-modal__header h3 {
    margin: 0;
    font-size: 18px;
}

.public-bugo-example-modal__header button {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
    padding: 7px 10px;
    font-weight: 800;
    cursor: pointer;
}

.public-bugo-example-modal__body {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.public-bugo-example-modal__body button {
    display: block;
    width: 100%;
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    background: #fff;
    padding: 14px;
    color: #333;
    font-size: 15px;
    font-weight: 800;
    text-align: left;
    line-height: 1.5;
    cursor: pointer;
}

.public-bugo-example-modal__body button:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

@media (max-width: 520px) {
    .public-bugo-guestbook-delete form {
        grid-template-columns: 1fr;
    }

    .public-bugo-guestbook-delete button {
        width: 100%;
    }
}

/**
 * [감사장] 조문 감사장 화면
 */
.public-bugo-thanks-wrap {
    max-width: 680px;
    margin: 0 auto;
}

.public-bugo-thanks-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: 44px 28px;
    box-shadow: 0 12px 34px rgba(0,0,0,.07);
    text-align: center;
}

.public-bugo-thanks-eyebrow {
    margin: 0 0 8px;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .12em;
}

.public-bugo-thanks-card h1 {
    margin: 0;
    font-size: 36px;
    line-height: 1.25;
}

.public-bugo-thanks-divider {
    width: 42px;
    height: 2px;
    margin: 24px auto;
    background: var(--color-primary);
    opacity: .55;
}

.public-bugo-thanks-main {
    margin: 0 0 22px;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.75;
    word-break: keep-all;
}

.public-bugo-thanks-body {
    margin: 0;
    color: #444;
    font-size: 16px;
    line-height: 1.9;
    word-break: keep-all;
}

.public-bugo-thanks-info {
    max-width: 420px;
    margin: 30px auto 0;
    border-top: 1px solid var(--color-border-light);
    text-align: left;
}

.public-bugo-thanks-info div {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.public-bugo-thanks-info dt {
    color: var(--color-primary);
    font-weight: 900;
}

.public-bugo-thanks-info dd {
    margin: 0;
    line-height: 1.6;
}

.public-bugo-thanks-from {
    margin: 30px 0 0;
    font-size: 18px;
    font-weight: 900;
}

.public-bugo-thanks-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.public-bugo-thanks-actions a,
.public-bugo-thanks-actions button {
    min-height: 50px;
    border: 1px solid var(--color-primary);
    border-radius: 14px;
    background: #fff;
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

.public-bugo-thanks-actions .primary {
    background: var(--bugo-btn-bg);
    color: var(--bugo-btn-color);
    border-color: var(--bugo-btn-border);
}
.public-bugo-thanks-actions .primary:hover { background: var(--bugo-btn-bg-hover); }

@media (max-width: 560px) {
    .public-bugo-thanks-card {
        padding: 34px 20px;
        border-radius: 20px;
    }

    .public-bugo-thanks-card h1 {
        font-size: 30px;
    }

    .public-bugo-thanks-main {
        font-size: 19px;
    }

    .public-bugo-thanks-body {
        font-size: 15px;
    }

    .public-bugo-thanks-info div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .public-bugo-thanks-actions {
        grid-template-columns: 1fr;
    }
}


/* [부고 공유] 조문예문 버튼 뱃지형 최종 보정 */
.public-bugo-guestbook-form .public-bugo-content-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 8px;
}

.public-bugo-guestbook-form .public-bugo-content-head label {
    margin: 0;
    flex: 0 0 auto;
}

.public-bugo-guestbook-form .public-bugo-content-head button {
    width: auto;
    min-width: auto;
    max-width: none;
    height: 30px;
    min-height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* [부고 공유] 모바일 계좌/상주 정보 박스 압축 보정 */
@media (max-width: 640px) {
    .public-bugo-list-box .public-bugo-list li {
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 8px;
        padding: 12px 10px;
    }

    .public-bugo-list-label {
        min-width: 0;
        font-size: 14px;
    }

    .public-bugo-list-value {
        min-width: 0;
        gap: 6px;
        font-size: 14px;
        word-break: break-all;
    }

    .public-bugo-account-no {
        justify-content: space-between;
    }

    .public-bugo-copy-account {
        min-height: 28px;
        padding: 0 9px;
        font-size: 12px;
    }

    .public-bugo-donation-modal__body {
        padding: 12px;
    }
}

.public-bugo-phone-link {
    color: #111;
    text-decoration: none;
    font-weight: 800;
}


.public-bugo-account-number {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 16px;
    font-weight: 600;
    color: #111;
    letter-spacing: 0.03em;
}


/* [부고 공유] 부고장 전달 모달 */
.public-bugo-share-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 140;
}

.public-bugo-share-modal.is-open {
    display: block;
}

.public-bugo-share-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

.public-bugo-share-modal__dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(520px, calc(100% - 32px));
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
    overflow: hidden;
}

.public-bugo-share-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--color-surface-mute);
}

.public-bugo-share-modal__header h3 {
    margin: 0;
    color: #222;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.public-bugo-share-modal__header button {
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: #777;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

/* ── 샘플 페이지(/bugo/sample) 전용 ────────────────────────────────────────
 * 부고장 본문은 실제 공유 화면(share.php)을 그대로 쓰고, 아래 두 블록만 덧붙는다.
 *
 * ⚠️ 색은 반드시 테마 변수를 쓴다. 예전 sample.php 에는 1호 초록(#4a7c59)이 인라인
 *    <style> 로 박혀 있어, 네이비 골드인 6호에서도 초록 버튼이 나왔다(2026-08-07 수정).
 *    사이트마다 다른 값을 파일에 박으면 공용 파일이 될 수 없다.
 */
.public-bugo-sample-banner {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 20px;
    background: var(--color-primary-soft);
    border-bottom: 1px solid var(--color-primary-soft-border);
    font-size: 14px;
    color: var(--color-accent-text);
    flex-wrap: wrap;
    text-align: center;
}

.public-bugo-sample-banner strong {
    font-weight: 700;
}

.public-bugo-sample-banner a {
    display: inline-block;
    padding: 5px 14px;
    background: var(--color-primary);
    border-radius: 20px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.public-bugo-sample-cta {
    /* 하단 고정 메뉴에 가리지 않도록 여백을 넉넉히 준다 */
    margin: 32px auto 120px;
    padding: 28px 20px;
    max-width: 480px;
    text-align: center;
}

.public-bugo-sample-cta p {
    margin: 0 0 16px;
    color: #5f6975;
    font-size: 15px;
}

.public-bugo-sample-cta a {
    display: inline-block;
    padding: 14px 36px;
    background: var(--color-primary);
    border-radius: 999px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.public-bugo-sample-cta a:hover {
    background: var(--color-primary-light);
}

/*
 * 공유 모달 본문 — '보내는 버튼 3개'는 전체폭 세로 배치, QR 은 아래에 분리한다.
 * 예전에는 2열 격자에 QR 만 grid-row: span 2 였는데, 항목이 4개라 격자가 어긋나
 * 오른쪽 아래가 비었고, 가장 덜 쓰는 QR 이 가장 크게 보였다.
 */
.public-bugo-share-modal__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 22px 26px;
}

.public-bugo-share-option {
    width: 100%;
    min-height: 62px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: #f7f8fa;
    color: #222;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.04em;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    text-align: left;
}

/* ── QR: 누르는 것이 아니라 보여주는 것 — 버튼이 아니다 ────────────────── */
.public-bugo-share-qr {
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--color-surface-mute);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.public-bugo-share-qr__label {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #333;
}

.public-bugo-share-qr img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
}

.public-bugo-share-qr__hint {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #6f7780;
    text-align: center;
    word-break: keep-all;
}

.public-bugo-share-symbol {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-weight: 900;
}

.public-bugo-share-symbol--kakao {
    background: #fee500;
    color: #3c1e1e;
    font-size: 13px;
}

.public-bugo-share-symbol--kakao::before {
    content: "TALK";
}

.public-bugo-share-symbol--message {
    background: var(--color-primary);
    color: #fff;
    font-size: 13px;
    letter-spacing: 0;
    padding-right: 0;
}

.public-bugo-share-symbol--message::before {
    content: "SMS";
}

/* 연회색(#eef0f2 + #555)이면 옆의 카카오톡·문자 심볼 대비 비활성처럼 읽힌다.
   셋 다 '누를 수 있는 것'이므로 채도만 낮추고 대비는 유지한다. */
.public-bugo-share-symbol--link {
    background: #6f7780;
    color: #fff;
    font-size: 13px;
}

.public-bugo-share-symbol--link::before {
    content: "URL";
}

/* 하단 '닫기' 버튼은 걷어냈다 — 아무 기능도 없는 버튼이 화면에서 가장 무거웠다.
   닫기는 머리글의 × 와 배경 클릭 두 가지로 충분하다. */

@media (max-width: 480px) {
    .public-bugo-share-modal__dialog {
        width: calc(100% - 28px);
    }

    .public-bugo-share-modal__header {
        padding: 18px 18px;
    }

    .public-bugo-share-modal__header h3 {
        font-size: 19px;
    }

    .public-bugo-share-modal__body {
        gap: 9px;
        padding: 18px 18px 22px;
    }

    .public-bugo-share-option {
        min-height: 58px;
        padding: 0 15px;
        font-size: 17px;
        gap: 12px;
    }

    .public-bugo-share-qr img {
        width: 132px;
        height: 132px;
    }
}