@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

/* ============================================================
   funeral-hall · 공유 디자인 테마 (tokens + base + components)
   품격 있고 차분한 톤: 아이보리 지면 · 딥 슬레이트 · 은은한 브론즈
   ============================================================ */
:root {
    /* 색 — 본문 글자색을 로고(강릉아나병원) 회색 톤에 맞춰 전역 통일 */
    --ink:        #5a5a5a;   /* 로고 글자색과 동일한 중간 회색 */
    --ink-soft:   #767676;
    --muted:      #9a9a9a;
    --paper:      #f7f4ee;   /* 따뜻한 아이보리 배경 */
    --surface:    #ffffff;
    --surface-2:  #fbf9f5;
    --line:       #e7e2d8;
    --line-soft:  #efebe3;
    --primary:    #2f4858;   /* 딥 슬레이트/네이비 */
    --primary-d:  #22333f;
    --primary-ink:#ffffff;
    --accent:     #9a7b4f;   /* 뮤트 브론즈 */
    --accent-soft:#c7b490;
    --accent-d:   #876b43;
    --danger:     #b14136;
    --danger-d:   #8f3129;
    --ok:         #2f7d55;

    /* 폰트 — 전역 단일 글꼴(고딕)로 통일. 로고 이미지의 글씨체와 맞춤. */
    --font-sans: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
                 "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Segoe UI", sans-serif;
    --font-serif: var(--font-sans);   /* 과거 명조체 → 고딕으로 통일 */

    /* 그림자 / 반경 */
    --r-sm: 10px;  --r-md: 14px;  --r-lg: 22px;  --r-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(47,72,88,.05), 0 2px 8px rgba(47,72,88,.06);
    --shadow-md: 0 10px 28px rgba(47,72,88,.09), 0 3px 8px rgba(47,72,88,.05);
    --shadow-lg: 0 24px 60px rgba(47,72,88,.14);
    --ring: 0 0 0 3px rgba(199,180,144,.35);
    --maxw: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--ink);
    background:
        radial-gradient(1100px 560px at 100% -8%, rgba(199,180,144,.10), transparent 55%),
        radial-gradient(900px 500px at -10% 8%, rgba(47,72,88,.045), transparent 52%),
        var(--paper);
    background-attachment: fixed;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
::selection { background: rgba(154,123,79,.22); color: var(--primary-d); }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; color: var(--primary-d); }
a { color: var(--primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img { max-width: 100%; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
.muted { color: var(--muted); }
.center { text-align: center; }

/* 국화 모티프 (제목 위 장식) */
.flower-mark { display:block; font-size: 1.5rem; line-height:1; color: var(--accent); margin-bottom:.4rem; }

/* 브랜드 구분선 (로고 | 장례식장) */
.brand-sep { display: inline-block; width: 1px; height: .92em; margin: 0 .4em; align-self: center;
    background: currentColor; opacity: .38; vertical-align: -.1em; border-radius: 1px; }
/* 로고 자리(flex)에서는 flex gap이 간격을 담당하므로 구분선 자체 여백 제거 */
.brand .brand-sep, .admin-brand .brand-sep { margin: 0; height: 1.4em; }

/* 브랜드 로고 이미지 — '장례식장' 글자와 균형 맞춘 높이, 살짝 위로 */
.brand-logo { height: 1.95em; width: auto; display: inline-block; vertical-align: middle; transform: translateY(-3px); }
/* '장례식장' 글자만 조금 키움 (로고 크기와 분리) */
.brand-word { font-size: 1.15em; }
/* 어두운 배경(푸터)에서는 로고를 흰색으로 반전 */
.site-footer .brand-logo { filter: brightness(0) invert(1); opacity: .95; }

/* ---- 버튼 ---- */
.btn {
    --b: var(--line);
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .66rem 1.2rem; border: 1px solid var(--b); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink); font: inherit; font-size: .92rem; font-weight: 600;
    letter-spacing: -.01em; cursor: pointer;
    transition: transform .14s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
    white-space: nowrap; text-decoration: none;
}
.btn:hover { box-shadow: var(--shadow-sm); border-color: var(--accent-soft); color: var(--ink); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary { background: linear-gradient(180deg, #37576b, var(--primary)); color: var(--primary-ink); border-color: var(--primary-d); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: linear-gradient(180deg, var(--primary), var(--primary-d)); color: #fff; border-color: var(--primary-d); box-shadow: var(--shadow-md); }
.btn-accent { background: linear-gradient(180deg, #a98a5c, var(--accent)); color: #fff; border-color: var(--accent-d); box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: linear-gradient(180deg, var(--accent), var(--accent-d)); color: #fff; box-shadow: var(--shadow-md); }
.btn-danger { background: transparent; color: var(--danger); border-color: #e4c6c2; }
.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: rgba(0,0,0,.04); color: var(--ink); }
.btn-sm { padding: .4rem .7rem; font-size: .82rem; }
.btn-block { width: 100%; }

/* ---- 뱃지 ---- */
.badge { display: inline-flex; align-items:center; gap:.4rem; padding: .22rem .72rem; border-radius: var(--r-pill); font-size: .74rem; font-weight: 600; line-height: 1.6; }
.badge::before { content:""; width:.42rem; height:.42rem; border-radius:50%; background: currentColor; }
.badge-on  { background: rgba(47,125,85,.12);  color: var(--ok); }
.badge-off { background: rgba(139,146,157,.15); color: var(--muted); }

/* ---- 카드 ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }