/**
 * 파일명: bugo-common.css
 * 파일경로: /home/freebugocokr/public_html/css/bugo-common.css
 * 기능: 부고장 서비스 공통 레이아웃, 폼, 카드, 기본 UI 스타일 정의
 * 작성일: 2026-05-09
 *
 * @version   1.1.2
 * @updated   2026-07-30
 * @shared    복제사이트 공용 파일 — 여기서 고치면 다른 사이트에도 이식해야 한다
 * @changelog
 *   1.1.2 (2026-07-30) .location-card__actions--single 신설 — 장례식장 상세에서
 *                      중복 버튼을 지워 하나만 남을 때 2열 그리드가 반쪽만 채워지지 않게 한다
 *   1.1.1 (2026-07-30) [hidden]{display:none !important} 추가 — UA 스타일인 [hidden] 이
 *                      .form-grid{display:grid} 에 밀려 무시되던 문제. 무빈소를 체크해도
 *                      장례식장 입력이 사라지지 않았다(JS 는 정상, 원인은 CSS 우선순위)
 *   1.1.0 (2026-07-30) .pw-field/.pw-toggle 신설 — 비밀번호 표시/숨김 눈 아이콘.
 *                      공통 CSS 에 두는 이유는 로그인·관리 화면에서도 같은 규칙을
 *                      그대로 쓰기 위해서다(전역 코딩 표준: 모든 password 필드에 필수)
 *   1.0.0 (2026-07-07) 이 시점까지의 부고 서비스 공통 스타일 일체
 *                      (레이아웃·폼·카드·위치 카드 포함)
 */

:root{
    --bugo-btn-bg:       var(--color-primary-soft);
    --bugo-btn-bg-hover: var(--color-primary-soft-hover);
    --bugo-btn-color:    var(--color-primary);
    --bugo-btn-border:   var(--color-primary-border);
}
/* 배경은 home.css 의 --page-bg 가 정본이다(정책 문서 페이지와 같은 값).
   흰 배경 위에 흰 카드를 얹으면 카드 경계가 안 보여 회색 한 톤을 깐다.
   --page-bg 가 없는 환경(구 브라우저 등)에서는 기존 흰색으로 떨어진다. */
body{margin:0;background:var(--page-bg,var(--color-bg));color:#1a1a1a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.page{max-width:1080px;margin:0 auto;padding:34px 18px 110px}
.intro{margin-bottom:22px}
.eyebrow{margin:0 0 8px;color:var(--color-primary);font-weight:800;letter-spacing:.04em}
h1{font-size:30px;line-height:1.22;margin:0 0 10px}
h2{font-size:20px;margin:0 0 12px}
p{line-height:1.65}
.muted{color:#666}
.section-card,.form-card,.bugo-card{background:#fff;border:1px solid var(--color-border);border-radius:18px;padding:20px;margin:16px 0;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.section-head{margin-bottom:16px}
.section-head p{margin:0;color:#666}
.image-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.select-card{position:relative;display:block;border:1px solid var(--color-border);border-radius:16px;background:#fafafa;padding:12px;cursor:pointer;transition:.18s ease}
.select-card:hover{border-color:var(--color-primary);transform:translateY(-1px)}
/* [선택 강조] `.is-selected` 는 bugo-template.js 가 붙인다. 그런데 부고장 **수정 화면**은
   그 JS 를 싣지 않아(대신 bugo-create.js) 클릭해도 강조가 옮겨가지 않았다(2026-08-06).
   template.js 를 수정 화면에 실으면 로드 시 **첫 이미지를 강제 선택**해 저장된 선택을
   덮어쓰므로 쓸 수 없다. 그래서 `:has(input:checked)` 로 CSS 만으로도 따라오게 한다. */
.select-card.is-selected,
.select-card:has(input:checked){border-color:var(--color-primary);background:var(--color-primary-soft);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent)}
.select-card input{position:absolute;opacity:0;pointer-events:none}
.check{position:absolute;top:10px;right:10px;background:#fff;border:1px solid var(--color-border);border-radius:999px;padding:5px 9px;font-size:12px;font-weight:800;color:#666;z-index:2}
.select-card.is-selected .check,
.select-card:has(input:checked) .check{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.thumb{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--color-border-light)}
.text-grid .thumb{aspect-ratio:4/3}
.thumb img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.title{display:block;margin-top:10px;font-size:14px;font-weight:700;line-height:1.45}
.empty{grid-column:1/-1;color:#666}
.form-grid{display:grid;grid-template-columns:1fr;gap:14px}
label{display:block;font-weight:800;font-size:14px}
label b{color:var(--color-danger)}
input,select,textarea{width:100%;box-sizing:border-box;margin-top:7px;border:1px solid var(--color-border);border-radius:12px;background:#fff;padding:12px 13px;font-size:16px;font-family:inherit}
textarea{resize:vertical}

/* ── [hidden] 속성을 신뢰할 수 있게 만든다 ───────────────────────────────────
   브라우저 기본 스타일의 `[hidden]{display:none}` 은 **UA 스타일**이라
   `.form-grid{display:grid}` 같은 작성자 스타일에 **항상 밀린다.**
   그래서 JS 로 `el.hidden = true` 를 걸어도 요소가 그대로 보인다.

   2026-07-30 실제 사고: 무빈소를 체크해도 장례식장 입력(.form-grid)이 사라지지
   않았다. JS 는 정상 동작했고 원인은 이 우선순위였다. 화면에는 아무 오류도 없어
   "체크가 안 먹는다"로만 보인다.

   hidden 은 프로젝트 전체에서 쓰이므로(상주 관계 select, 사진 삭제 버튼 등)
   개별 규칙을 만들지 않고 여기서 한 번 못박는다. 폼 컨트롤은 display:none 이어도
   값이 그대로 전송되므로 hidden select 의 동작은 바뀌지 않는다. */
[hidden]{ display:none !important; }

/* ── [주소 복사] 아이콘 버튼 ────────────────────────────────────────────────
   부고장 「오시는 길」·장례식장 검색 결과·장례식장 상세가 함께 쓴다. 동작은 copy-address.js.
   주소 글자 바로 옆에 붙으므로 줄 안에서 흐르도록 inline-flex 로 두고, 글자 크기에
   휘둘리지 않게 크기를 고정한다. 복사되면 JS 가 `is-copied` 를 잠깐 붙인다. */
.copy-addr{
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; margin-left:6px; padding:0;
    vertical-align:middle;
    border:1px solid var(--color-border); border-radius:8px;
    background:#fff; color:#888;
    cursor:pointer;
    transition:color .15s, border-color .15s, background .15s;
}
.copy-addr:hover{ background:var(--color-primary-soft); border-color:var(--color-primary-border); color:var(--color-primary); }
.copy-addr svg{ width:15px; height:15px; display:block; }

/* 복사 완료 — 아이콘 버튼은 글자를 바꿀 수 없으므로 색과 말풍선으로 알린다. */
.copy-addr.is-copied{ background:var(--color-primary-soft); border-color:var(--color-primary-border); color:var(--color-primary); position:relative; }
.copy-addr.is-copied::after{
    content:"복사됨";
    position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
    padding:3px 8px; border-radius:6px;
    background:#1a1a2e; color:#fff; font-size:11px; font-weight:700; white-space:nowrap;
}

/* ── [비밀번호] 표시/숨김 눈 아이콘 ─────────────────────────────────────────
   전역 코딩 표준: type="password" 필드에는 눈 아이콘 토글을 반드시 붙인다.
   여기(공통 CSS)에 두는 이유는 로그인·관리 화면 등 다른 화면에서도 같은 규칙을
   그대로 재사용하기 위해서다. 동작은 bugo-create.js 참조.
   input 의 margin-top:7px 을 래퍼로 옮겨야 버튼 세로 중앙이 맞는다.

   ⚠️ 선택자를 `.pw-toggle` 로 줄이지 말 것 — 반드시 `.pw-field button.pw-toggle` 로 쓴다.
   이 버튼은 거의 항상 폼 안에 있고, 폼마다 `.어떤폼 button { 배경·높이 }` 같은 제출버튼
   규칙이 있다. 그 규칙은 특이도 0-1-1 이라 `.pw-toggle`(0-1-0)을 **소스 순서와 무관하게**
   이겨서, 눈 아이콘이 골드 제출버튼 모양(배경+테두리+52px)으로 변한다.
   2026-08-06 상주 관리 로그인에서 실제로 그렇게 보였고, 확인해 보니 조문 메시지 폼·
   관리자 로그인도 같은 상태였다. `.pw-field button.pw-toggle`(0-2-1)이면 전부 이긴다. */
.pw-field{ position:relative; margin-top:7px; }
.pw-field input{ margin-top:0; padding-right:46px; }

.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; }
.sticky-cta{position:fixed;left:0;right:0;bottom:0;background:color-mix(in srgb, var(--page-bg, #e8e8e0) 92%, transparent);backdrop-filter:blur(10px);border-top:1px solid var(--color-border);padding:12px 16px}
.sticky-cta button{display:block;width:min(1040px,100%);height:52px;margin:0 auto;border:1.5px solid var(--bugo-btn-border);border-radius:14px;background:var(--bugo-btn-bg);color:var(--bugo-btn-color);font-weight:600;font-size:16px;cursor:pointer}
.sticky-cta button:hover{background:var(--bugo-btn-bg-hover)}
.back-link{display:inline-flex;margin-top:10px;color:var(--color-primary);font-weight:800;text-decoration:none}
.bugo-card{max-width:620px;margin:0 auto;text-align:center}
.bugo-visual{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:20px;min-height:110px}
.profile-symbol{max-width:110px;max-height:110px}
.text-symbol{max-width:180px;max-height:110px}
.info-list{margin:24px 0;text-align:left;border-top:1px solid var(--color-border-light)}
.info-list div{display:grid;grid-template-columns:74px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--color-border-light)}
dt{font-weight:900;color:var(--color-primary)}
dd{margin:0;line-height:1.6}
.sub-section{text-align:left;margin-top:22px;padding-top:18px;border-top:1px solid var(--color-border-light)}
.sub-section ul{margin:0;padding-left:20px;line-height:1.8}
.share-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:26px}
.share-actions button,.share-actions a{height:48px;border-radius:12px;border:0;background:var(--color-primary);color:#fff;font-weight:900;font-size:16px;text-decoration:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
.share-actions a{background:#fff;color:var(--color-primary);border:1px solid var(--color-primary)}
@media (min-width:720px){
    .page{padding-top:54px}
    h1{font-size:38px}
    .image-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── 위치 카드 — 카카오맵 SDK 대체 (지도 API 유료화 대비, 2026-07-07) ── */
.location-card{background:#fff;border:1px solid var(--color-border);border-radius:16px;padding:20px}
.location-card__badge{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--bugo-btn-bg);color:var(--color-primary);font-size:12px;font-weight:800;margin-bottom:10px}
.location-card__name{display:block;font-size:18px;margin-bottom:6px}
.location-card__address{margin:0 0 16px;color:var(--color-text-light,#666);line-height:1.6}
.location-card__actions{display:grid;grid-template-columns:1fr;gap:10px}
/* 버튼이 하나뿐일 때(장례식장 상세 — 카카오맵 중복 버튼 제거 후) 2열 그리드에서
   반쪽만 채워지는 것을 막는다. PHP가 버튼 개수를 세어 이 클래스를 붙인다. */
.location-card__actions--single{grid-template-columns:1fr!important}
.location-card__btn{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:12px;border:1px solid var(--color-primary);background:#fff;color:var(--color-primary);font-weight:800;font-size:15px;text-decoration:none;cursor:pointer;font-family:inherit}
.location-card__btn:hover,.location-card__btn:focus{text-decoration:none;background:var(--color-primary-soft);color:var(--color-primary)}
.location-card__btn--primary{background:var(--color-primary);color:#fff}
.location-card__btn--primary:hover,.location-card__btn--primary:focus{background:var(--color-primary-dark);color:#fff;text-decoration:none}
@media (min-width:720px){.location-card__actions{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── OSM 무료 지도 (kakao_map=false 사이트, Leaflet 자체 호스팅) ── */
.osm-map{position:relative;z-index:0;width:100%;height:340px;border-radius:12px;border:1px solid var(--color-border-light);background:var(--color-surface-soft);overflow:hidden}
.osm-map--bugo{height:260px;margin-top:14px}
.location-card--split{display:grid;grid-template-columns:0.95fr 1.25fr;gap:20px;align-items:stretch}
.location-card--split .location-card__info{display:flex;flex-direction:column;justify-content:center;min-width:0}
.location-card--split .location-card__map{min-width:0}
.location-card--split .osm-map{height:100%;min-height:320px}
@media (max-width:720px){
    .location-card--split{grid-template-columns:1fr}
    .location-card--split .osm-map{min-height:280px;height:280px}
}