/**
 * 파일명: bugo-public.css
 * 파일경로: /home/freebugocokr/public_html/css/bugo-public.css
 * 기능: 부고장 미리보기, 공유, 완료, 관리, 감사장 등 공개 화면 전용 스타일 정의
 * 작성일: 2026-05-08
 *
 * @version   1.6.2
 * @updated   2026-09-06
 * @shared    복제사이트 공용 파일 — 여기서 고치면 다른 사이트에도 이식해야 한다
 * @changelog
 *   1.6.2 (2026-09-06) 세로로 쌓은 배너의 글 덩어리를 가운데 정렬했다(장식선은 블록이라
 *                      margin auto 로 따로 맞춘다). 배송 안내 문구를 12px·#888(대비 3.2:1,
 *                      AA 미달)에서 14px(모바일 15px)·#4a4a4a(8.0:1)로 올렸다.
 *   1.6.1 (2026-09-06) 근조화환 배너를 좁은 화면(≤480px)에서 위아래로 나눴다.
 *                      좌우 배치는 글 열이 138px 밖에 안 남아 「근조화환 보내기」가
 *                      「보 / 내기」로 갈라졌다(181px 필요). 그림은 그대로 두고 폭 문제만
 *                      풀었다. 기준선을 380px → 480px 로 올렸다 — 요즘 폰(390·412·430px)이
 *                      전부 380px 조건에서 빠져 PC 값을 받고 있었다.
 *   1.6.0 (2026-08-30) 버튼 글자가 뚱뚱하고 번져 보이는 것을 고쳤다(사용자 지적).
 *                      버튼 규칙 7곳의 font-weight 900 → 700, 화환 섹션 버튼 2곳은 600.
 *                      900(Black)은 한글에서 획 사이가 메워져 색 배경 위에서 뭉개진다.
 *                      ⚠️ 라벨·제목의 900 은 그대로 뒀다 — 지적은 「버튼 텍스트」였고,
 *                         그쪽은 배경이 밝아 같은 증상이 없다.
 *                      「근조화환 보내기」 글자를 금색 → **흰색**으로 바꿨다. 금색은
 *                      브랜드 색 배경과 명도 차가 작아 가장자리가 번졌다. 금색은
 *                      테두리와 장식선에만 남겼다.
 *   1.5.0 (2026-08-30) 「꽃으로 마음을 보내신 분들」 블록 신설(.fw-*) — 6호에서 이식.
 *                      명단 카드·간편구매·전체보기·근조화환 배너·주문 마감 안내.
 *                      옛 이름 칩(.public-bugo-flower-sender-chip)은 **남겨 둔다** —
 *                      안내 모달의 예시 문구가 아직 그 규칙을 쓴다.
 *   1.4.0 (2026-08-07) 샘플 페이지 블록 신설(.public-bugo-sample-banner/-cta).
 *                      폐기한 sample.php 에 초록(#4a7c59)이 인라인으로 박혀 있어 테마와
 *                      무관한 색이 나왔다 - 테마 변수(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)으로 **어두운 띠**로 바꿨다.
   색은 테마 변수라 사이트마다 자기 색이 나온다.

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

   ⚠️ 어두운 배경 위에서는 글자색을 **직접** 지정해야 한다. 기본값은 어두운 색이라
      배경과 같아져 글자가 사라진다(어두운 테마에서 실제로 그렇게 된다). */
.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` 는 **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; }
}

/* [무빈소] 장례식장명 대신 안내 문구가 들어간다. 문장이 길어 같은 크기로 두면 두 줄로
   접혀 띠가 뚱뚱해지므로 한 단계 줄인다. 내용이 안내라서 시각적 무게도 낮추는 편이 맞다. */
.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: #fff;
    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;
}

.public-bugo-profile-symbol {
    display: block;
    max-width: 180px;
    max-height: 150px;
    object-fit: contain;
}

/* ── [영정사진] 국화 화환 액자 ──────────────────────────────────────────────
   goin_frame_01.webp(1200x1200)를 배경으로 깔고 그 빈 타원 안에 사진을 앉힌다.

   아래 %값은 눈대중이 아니라 실제 이미지를 픽셀 단위로 훑어 얻은 값이다.
   빈 타원은 y=45%에서 가장 넓고(가로 50%), 아래로 갈수록 꽃이 파고들어 좁아진다
   (y=65%에서 32%, y=70%에서 21%). 그 안쪽에 들어가면서 영정사진 규격인
   증명사진 비율(3:4)을 지키는 크기가 45% x 60%다.
   프레임 이미지를 교체하면 이 값도 다시 재야 한다. */
.public-bugo-portrait {
    position: relative;
    margin: 0;
    width: min(320px, 78vw);
    aspect-ratio: 1 / 1;
    background: url('/assets/images/goin_frame_01.webp') center / contain no-repeat;

    /* 프레임 배경(#fffaf5)이 흰 카드 위에 사각형으로 드러나므로 바깥을 부드럽게 지운다.
       꽃은 중심에서 최대 83%까지만 뻗어 있어 88%부터 흐려도 잘리지 않는다. */
    -webkit-mask-image: radial-gradient(closest-side, #000 88%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 88%, transparent 100%);
}

.public-bugo-portrait img {
    position: absolute;
    left: 49.6%;
    top: 42.5%;
    width: 45%;
    height: 60%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    object-fit: cover;
}

/* ── [영정사진] 금색 액자 (photo_frame = 'gold') ────────────────────────────
   goin_frame_02.webp(757x903, 알파 있음). **위의 국화 화환과 합성 방식이 정반대다.**

     국화 화환 : 배경이 불투명 -> 사진을 액자 '위에' 얹고 가장자리를 마스크로 지운다
     금색 액자 : 가운데가 뚫림 -> 사진을 액자 '뒤에' 깔고 액자가 위를 덮는다

   그래서 이미지 URL 만 바꿔 끼우면 깨진다. 이 클래스가 배치까지 통째로 갈아끼운다.
   아래 %는 PNG 알파를 픽셀로 훑어 얻은 값이다(구멍 x 47~701, y 45~850 / 751x896).
   2026-08-06 얇은 액자로 교체하며 다시 쟀다(이전 구멍 66%x73% -> 지금 87%x90%).
   ⚠️ 액자 이미지를 바꾸면 이 값과 aspect-ratio 를 다시 재야 한다. */
.public-bugo-portrait.is-gold {
    /* ⚠️ 폭은 **국화 화환 쪽 사진 크기에 맞춘 값**이다. 한 부고장에서 둘 중 하나를 고르는데
       사진 크기가 달라 보이면 액자를 바꿨을 뿐인데 사진이 커졌다/작아졌다로 읽힌다.
       국화 화환: 320px * 45% = 144px / 금색 액자: 165px * 87.22% = 144px 로 맞췄다.
       액자 이미지를 바꾸면 구멍 비율이 달라지므로 이 값도 다시 계산해야 한다. */
    width: min(165px, 42vw);
    aspect-ratio: 751 / 896;
    background: none;                 /* 국화 화환 배경을 끈다 */
    -webkit-mask-image: none;         /* 가운데가 뚫려 있어 마스크가 필요 없다 */
    mask-image: none;
}

.public-bugo-portrait.is-gold::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/assets/images/goin_frame_02.webp') center / contain no-repeat;
    pointer-events: none;             /* 액자가 위를 덮지만 클릭은 통과시킨다 */
}

/* 국화 화환은 사진이 위에 있어 좌표가 다르다(위 블록). 여기서 전부 덮어쓴다. */
.public-bugo-portrait.is-gold img {
    left: 6.26%;
    top: 5.02%;
    width: 87.22%;
    height: 89.96%;
    transform: none;
    border-radius: 0;
    object-fit: cover;
}

.public-bugo-text-symbol {
    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: 700;
}

/* [지도] 카카오맵 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: 700;
    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: 700;
    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: 700;
    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;
}

.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;
    /* 굵은 한글은 작은 크기에서 획이 붙어 번져 보인다 — 600 으로 낮춘다 */
    font-weight: 600;
    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);
    /**
     * 흰색이다 (2026-08-30 사용자 지시). 금색 글자는 브랜드 색 배경과 명도 차이가
     * 작아 글자 가장자리가 번져 보였다 — 특히 굵은 한글에서 획 사이가 메워진다.
     * 금색은 테두리와 장식선에만 남긴다.
     */
    color: #fff;
    font-size: 17px;
    /* 900·700 은 한글에서 획이 붙어 뭉개진다. 600 이 같은 크기에서 훨씬 또렷하다. */
    font-weight: 600;
    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`(#888) 로 되돌리지 말 것 — 크림색 배경(#fef3d0) 위에서 대비가
      **3.2:1** 밖에 안 돼 WCAG AA(4.5:1)에 못 미쳤고, 12px 과 겹쳐 읽기 어려웠다
      (2026-09-06 사용자 지적). #4a4a4a 는 같은 배경에서 **8.0:1** 이다.
      부고 사이트는 이용 연령대가 높아 이 문구가 흐리면 배송 조건을 못 읽고 지나간다. */
.fw-banner-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #4a4a4a;
    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);
}

@media (max-width: 380px) {
    .fw-senders-head { flex-direction: column; align-items: stretch; gap: 10px; }
    .fw-quickbuy { width: 100%; }
}

/* ── 근조화환 배너 — 좁은 화면에서는 위아래로 나눈다 ─────────────────────────
   ⛔ 좁은 화면에서 글과 그림을 좌우로 놓지 말 것. 390px 폰 기준으로 배너 안쪽 폭이
      274px 인데 그림이 48%(약 132px)를 가져가면 글 열에 **138px** 밖에 안 남는다.
      「근조화환 보내기 ›」 버튼은 좌우 여백 40 + 글자 7자×17px 119 + 띄어쓰기 4 +
      화살표·간격 18 = **약 181px** 이 필요하다. 43px 이 모자라 줄바꿈이 일어나고,
      한글은 기본적으로 글자 단위로 끊기므로 「보내기」가 「보 / 내기」로 갈라졌다.
      (2026-09-06 사용자 지적. 원인은 그림이 아니라 폭이라 그림을 지우지 않았다.)

   ⚠️ 기준선이 480px 인 이유 — 예전에는 이 배너 대응이 `max-width: 380px` 이었는데,
      요즘 폰은 390(아이폰 12~15)·412(갤럭시)·430(프로맥스)px 라 **거의 다 조건에서
      빠져 PC 값을 그대로 받고 있었다.** 380px 으로 되돌리지 말 것.

   ⚠️ 그림을 지우거나 다시 줄이지 말 것 — 2026-08-14 사용자가 「작으면 글과 따로
      떨어져 보인다」고 지적해 키운 것이다(.fw-banner-img 주석 참고). */
@media (max-width: 480px) {
    .fw-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 20px 18px;
    }
    /* 글이 폭을 다 쓰므로 버튼이 한 줄에 들어간다 — 글자 크기를 줄일 필요가 없다.
       세로로 쌓으면 글 덩어리가 폭 전체를 쓰게 되므로 가운데로 모은다. 왼쪽 정렬로 두면
       그림만 가운데에 있어 축이 둘로 갈린다(2026-09-06 사용자 지적). */
    .fw-banner-text { width: 100%; text-align: center; }
    /* 장식선은 블록이라 text-align 으로는 안 움직인다 — 좌우 auto 로 가운데 둔다 */
    .fw-banner-orn { margin-left: auto; margin-right: auto; }
    .fw-banner-desc { font-size: 15px; }
    .fw-banner-img {
        width: 100%;
        max-width: 200px;
        align-self: center;
    }
}
/* [부고 공유] 계좌 카드 */
.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: 700;
    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: 700;
    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: 700;
    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> 로 박혀 있어, 테마 색과 무관하게 초록 버튼이 나왔다(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;
    }
}