/* ============================================================================
   theme-bugocard.css — bugocard.com 디자인 시스템 (차콜 + 골드 + 세리프)
   ============================================================================
   - 서브 페이지: 따뜻한 종이 톤 배경 + 차콜 버튼 + 골드브라운 링크 + 명조 제목
   - 메인 페이지(다크 차콜 히어로)는 home-bugocard.css가 별도 구성
   - theme-cokr.css와 동일한 변수 계약을 유지 — 이 파일만 교체되면 전 페이지 전환
   - 2026-09-14: 금색 네비게이션 글라이더·CTA 움직임과 동작 줄이기 대응 보강
   ============================================================================ */

:root {
    /* ── 배경 ── */
    --color-bg:             #f4f2ed;
    --color-white:          #ffffff;

    /* ── 브랜드 (웜 차콜) ── */
    --color-primary:        #2b2a27;
    --color-primary-light:  #403e39;
    --color-primary-dark:   #171614;

    /* ── 링크 (골드 브라운) ── */
    --color-link:           #8a6d3b;
    --color-link-dark:      #6f5730;

    /* ── 골드 포인트 (메인 페이지·뱃지) ── */
    --color-gold:           #c9a96a;
    --color-gold-soft:      #e8d9b8;

    /* ── 브랜드 파생 ── */
    --color-primary-soft:        #f0ebe0;
    --color-primary-soft-hover:  #e6decd;
    --color-primary-soft-border: #cfc4a8;
    --color-primary-border:      #b3a583;

    /* ── 표면 ── */
    --color-surface-soft:   #f1eee7;
    --color-surface-mute:   #e9e5db;

    /**
     * ── 공용 CSS 가 요구하는 파생 토큰 (2026-08-14 추가) ──
     *
     * 아래 3개는 모든 사이트가 로드하는 home.css·bugo-public.css 가 쓰는데
     * 1·2·4·5호 테마에 정의가 없어 계산이 무효로 떨어지고 있었다(3호만 먼저 막아 뒀다).
     *   --color-bg-light    home.css 의 --page-bg = color-mix(primary 6%, 이 값).
     *                       정의가 없으면 color-mix 가 무효 → 부고장 본문·장례정보·정책
     *                       페이지 배경이 transparent 로 떨어진다. .privacy-table th 배경도 이 값
     *   --color-accent-deep 정책 문서 eyebrow 라벨 색
     *   --color-accent-text 부고장 샘플 배너 텍스트 색(--color-primary-soft 배경 위)
     *
     * ⚠️ --color-accent 는 일부러 정의하지 않는다. bugo-public.css 의 호실 텍스트가
     *    **어두운 배경 위**에서 흰색 폴백에 의존한다 — 브랜드 색을 주면 안 보인다.
     */
    --color-bg-light:       var(--color-surface-soft);
    --color-accent-deep:    var(--color-primary);
    --color-accent-text:    var(--color-text);

    /* ── 텍스트 ── */
    --color-text:           #211f1b;
    --color-text-light:     #5c574d;
    --color-text-muted:     #7a7466;
    --color-placeholder:    #a9a396;

    /* ── 테두리 ── */
    --color-border:         #d9d3c6;
    --color-border-light:   #e8e3d8;

    /* ── 시맨틱 ── */
    --color-danger:         #b3402e;
    --color-warning:        #b07d1e;
    --color-warning-bg:     #f6ecd8;
    --color-sold:           #78715f;
    --color-success:        #4a6741;

    /* ── 그림자 ── */
    --shadow-sm:  0 2px 8px rgba(33, 31, 27, 0.06);
    --shadow-md:  0 6px 22px rgba(33, 31, 27, 0.09);
    --shadow-lg:  0 12px 40px rgba(33, 31, 27, 0.13);
    --focus-glow: 0 0 0 3px rgba(138, 109, 59, 0.18);

    /* ── 모서리 (클래식 — 낮은 라운드) ── */
    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-pill: 999px;

    /* ── 타이포 스케일 ── */
    --fs-xs:  12px;  --fs-sm:  13px;  --fs-md:  14px;  --fs-lg:  15px;
    --fs-xl:  16px;  --fs-2xl: 18px;  --fs-3xl: 22px;  --fs-4xl: 28px;
    --fs-5xl: 32px;  --fs-hero: 42px;

    /* ── 폰트 — 제목은 명조(세리프), 본문은 고딕 ── */
    --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --font-serif: "Noto Serif KR", "Nanum Myeongjo", AppleMyungjo,
                  Batang, "Batangche", serif;

    /* ── Bootstrap 5 매핑 ── */
    --bs-body-bg:           var(--color-bg);
    --bs-body-color:        var(--color-text);
    --bs-primary:           var(--color-primary);
    --bs-primary-rgb:       43, 42, 39;
    --bs-border-color:      var(--color-border);
    --bs-border-radius:     var(--radius-sm);
    --bs-border-radius-lg:  var(--radius-md);
    --bs-link-color:        var(--color-link);
    --bs-link-hover-color:  var(--color-link-dark);
}

/* ── 기본 리셋 + 타이포 ── */

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

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--fs-xl);
    line-height: 1.65;
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: var(--color-link-dark);
    text-decoration: none /* 2026-09-07 호버 밑줄 제거 — 사용자 선호 */;
}

/* 세리프 제목 — 이 사이트의 성격을 만드는 핵심 규칙 (전 페이지 적용) */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text);
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.5em;
    letter-spacing: -0.01em;
}

::placeholder { color: var(--color-placeholder); }
::-webkit-input-placeholder { color: var(--color-placeholder); }

/* ── 패턴 A: 기본 카드 ── */
.card-base {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    transition: box-shadow 0.2s ease;
}
.card-base:hover { box-shadow: var(--shadow-md); }

.card-soft {
    background: var(--color-surface-soft);
    border: none;
    border-radius: var(--radius-md);
    padding: 1.5rem;
}

/* ── 패턴 C: 히어로 / CTA ── */
.hero-primary {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 2.5rem 1.5rem;
}
.hero-primary h1, .hero-primary h2 { color: var(--color-white); }
.hero-primary .hero-sub { color: rgba(255, 255, 255, 0.78); }
.hero-primary .hero-badge {
    display: inline-block;
    background: rgba(201, 169, 106, 0.16);
    border: 1px solid rgba(201, 169, 106, 0.5);
    color: var(--color-gold);
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.8rem;
    font-size: var(--fs-sm);
}

/* ── 패턴 D: 폼 입력 ── */
.form-control, .form-select,
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="date"],
textarea, select {
    width: 100%;
    background: var(--color-white);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.625rem 0.875rem;
    font-size: var(--fs-lg);
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus, .form-select:focus,
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-link);
    box-shadow: var(--focus-glow);
}
.form-control[readonly], input[readonly] {
    background: var(--color-surface-soft);
    color: var(--color-text-light);
}
.form-control.is-invalid, input.is-invalid { border-color: var(--color-danger); }
.form-error { color: var(--color-danger); font-size: var(--fs-sm); margin-top: 0.25rem; }
.form-label {
    display: block;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.4rem;
}
.form-required::after { content: '*'; color: var(--color-danger); margin-left: 2px; }

/* ── 버튼 ── */
.btn, button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.625rem 1.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.btn-primary:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
    color: var(--color-white);
}
.btn-primary:active { background: var(--color-primary-dark); }
.btn-outline {
    background: transparent;
    color: var(--color-link);
    border-color: var(--color-primary-border);
}
.btn-outline:hover { background: var(--color-primary-soft); color: var(--color-link-dark); }
.btn-secondary {
    background: var(--color-white);
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-surface-soft); }
.btn-disabled, .btn:disabled {
    background: #c9c5bb; color: var(--color-white); border-color: #c9c5bb; cursor: not-allowed;
}
.btn-lg { padding: 0.85rem 1.7rem; font-size: var(--fs-2xl); }

/* ── 경고 배너 ── */
.alert-warning-banner {
    background: var(--color-warning-bg);
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius-sm);
    padding: 0.875rem 1rem;
    color: var(--color-text);
    font-size: var(--fs-md);
}
.alert-warning-banner .icon { color: var(--color-warning); margin-right: 0.4rem; }

/* ── 다크 푸터 ── */
.site-footer {
    background: var(--color-primary-dark);
    color: rgba(255, 255, 255, 0.6);
    padding: 2rem 1rem 1.5rem;
    margin-top: 3rem;
}
.site-footer a { color: rgba(255, 255, 255, 0.6); }
.site-footer a:hover { color: var(--color-gold); text-decoration: none; }
.site-footer .footer-divider {
    border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 1.5rem 0;
}
.site-footer .footer-copyright { color: rgba(255, 255, 255, 0.35); font-size: var(--fs-sm); }

/* ── 배지 ── */
.badge-pill {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary-soft-border);
    color: var(--color-link-dark);
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* ── 네비게이션 ── */
.site-nav {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border-light);
    padding: 0.75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-nav .brand {
    color: var(--color-primary);
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: var(--fs-2xl);
    text-decoration: none;
}
.site-nav .brand:hover { color: var(--color-primary-dark); text-decoration: none; }

/* ── 유틸리티 ── */
.container-app { max-width: 720px; margin: 0 auto; padding: 0 1rem; }
.text-muted { color: var(--color-text-muted); }
.text-light { color: var(--color-text-light); }
.fs-hero { font-size: var(--fs-hero); }
.fs-stat { font-size: var(--fs-5xl); }
.section-title { font-size: var(--fs-4xl); margin-bottom: 1rem; }
.mt-section { margin-top: 2.5rem; }
.mb-section { margin-bottom: 2.5rem; }

@media (max-width: 576px) {
    .fs-hero { font-size: 32px; }
    .fs-stat { font-size: 24px; }
    .section-title { font-size: 22px; }
    .hero-primary { padding: 2rem 1.25rem; }
}

/* ============================================================================
   공용 헤더 — 다크 차콜 오버라이드
   ============================================================================
   2026-07-31 home-bugocard.css 에서 이관.

   헤더·로고·네비·CTA 는 공용 partial(header.php)에서 나오므로 모든 페이지에 있다.
   home-bugocard.css 는 홈에서만 로드되므로, 거기 두는 동안 **홈만 다크 헤더**였고
   나머지 페이지는 공용 흰 헤더로 나왔다.

   ★ `body ` 접두사가 필요한 이유: 이 파일은 home.css **앞에** 로드된다.
     접두사 없이 `.site-header` 로 쓰면 home.css 의 같은 선택자(뒤에 로드)에 밀린다.
   ============================================================================ */

body .site-header {
    background: rgba(38, 37, 35, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ★ 모바일에서는 backdrop-filter 를 반드시 끈다.
   backdrop-filter 가 걸린 요소는 position:fixed 자손의 컨테이닝 블록이 된다.
   모바일 메뉴 .site-nav 는 .site-header 의 자손이면서 fixed/top:64px/bottom:0 이라,
   블러가 살아 있으면 좌표가 화면이 아니라 헤더 높이 기준으로 잡혀 **65px 띠로
   찌그러진다.** 이때 JS 가 body 에 overflow:hidden 을 걸어 두므로 "메뉴는 안 보이는데
   스크롤도 안 되는" 상태가 된다. 이관 전 실측으로 확인된 실제 버그다. */
@media (max-width: 768px) {
    body .site-header {
        /* 블러가 없으면 0.92 알파로 뒤 내용이 비쳐 지저분하다 — 불투명으로 */
        background: #262523;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

body .site-logo {
    color: #f3efe6;
    font-family: var(--font-serif);
}
body .site-logo:hover { color: #ffffff; }

body .site-logo::before {
    border: 2px solid var(--color-gold);
    border-radius: 2px;
    transform: rotate(45deg);
}

body .site-nav__primary a { color: #d8d3c8; }
body .site-nav__primary a:hover,
body .site-nav__primary a.active { color: var(--color-gold); }
body .site-nav__primary a::after { background: var(--color-gold); }

body .site-nav__secondary a { color: #98938a; }
body .site-nav__secondary a:hover,
body .site-nav__secondary a.active { color: #e8e3d8; }

body .site-nav__sep { background: rgba(255, 255, 255, 0.15); }

/* 차콜 헤더에서는 공용 글라이더의 어두운 주색이 묻혀 금색 면으로 드러낸다. */
@media (min-width: 769px) {
    body .site-nav__glider {
        background: color-mix(in srgb, var(--color-gold) 18%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-gold) 30%, transparent);
    }

    body .site-nav__secondary a {
        transition: color 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    }

    body .site-nav__secondary a:hover,
    body .site-nav__secondary a:focus-visible {
        color: #ffffff;
        transform: translateY(-2px);
    }

    body .site-nav:not(.has-glider) .site-nav__secondary a:hover,
    body .site-nav:not(.has-glider) .site-nav__secondary a:focus-visible {
        background: color-mix(in srgb, var(--color-gold) 18%, transparent);
    }

    body .btn-header-cta {
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
            box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    }

    body .btn-header-cta:hover,
    body .btn-header-cta:focus-visible {
        box-shadow: 0 6px 18px color-mix(in srgb, var(--color-gold) 18%, transparent);
        transform: translateY(-2px);
    }

    body .btn-header-cta:active { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    body .site-nav.is-glider-ready .site-nav__glider,
    body .site-nav__secondary a,
    body .btn-header-cta { transition: none; }
    body .site-nav__secondary a:hover,
    body .site-nav__secondary a:focus-visible,
    body .btn-header-cta:hover,
    body .btn-header-cta:focus-visible { transform: none; }
}

body .btn-header-cta:not(.btn-header-cta--ghost) {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: #26251f;
}
body .btn-header-cta:not(.btn-header-cta--ghost):hover {
    background: #d9bc82;
    border-color: #d9bc82;
    color: #26251f;
}

/* 보조 CTA(부고장 관리)는 아웃라인을 유지한다 — 싸잡아 덮으면 주 버튼과 똑같아 보인다 */
body .btn-header-cta--ghost {
    background: transparent;
    border-color: var(--color-gold);
    color: var(--color-gold);
}
body .btn-header-cta--ghost:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: #26251f;
}

body .nav-toggle { border-color: rgba(255, 255, 255, 0.25); }
body .nav-toggle span { background: #e8e3d8; }

/* ============================================================================
   [꽃으로 마음을 보내신 분들] 크림·금색 토큰 (2026-08-30)
   ============================================================================
   bugo-public.css 의 .fw-* 블록이 쓰는 값이다. 정의가 없으면 그 선언이 통째로
   무효가 되어 카드 머리와 배너가 흰 배경으로 떨어진다.

   ⛔ `:root` 에 넣지 말 것 — `.public-bugo-hall-head__room` 이
      `var(--color-accent, rgba(255,255,255,.82))` 로 **흰색 폴백에 기대고 있고**,
      `flower-store.css` 도 같은 변수를 뱃지·테두리에 쓴다. 이 섹션 안으로만
      내려보낸다(CSS 변수는 자손에게 상속된다).

   금색은 이 사이트가 이미 쓰는 --color-gold 를 그대로 쓴다.
   ============================================================================ */
.fw-senders-section {
    --color-cream:        #fff8e7;
    --color-cream-start:  #fdf6e3;
    --color-cream-end:    #fef3d0;
    --color-cream-border: #f0e0b0;
    --color-accent:       var(--color-gold);
    /* 배너 CTA 테두리 — :root 값이 브랜드 색이라 버튼 배경과 겹쳐 윤곽이 사라진다 */
    --color-accent-deep:  var(--color-gold);
}

/* ============================================================================
   랜딩 토큰 계약 (--lp-*) — 2026-09-07 추가
   ============================================================================
   이 사이트의 랜딩 CSS 는 --lp-* 34개만 쓴다(랜딩 재설계 4단계). 샘플에서 아홉 색을
   고르면 theme-a.css ~ theme-i.css 가 채우지만, **이 사이트를 자기 테마로 띄우면
   채울 사람이 없어 랜딩의 테두리·배경이 통째로 사라진다.**

   그래서 이 파일이 자기 --color-* 값으로 계약을 채운다. var() 로 연결했으므로
   위쪽에서 --color-* 를 바꾸면 랜딩도 자동으로 따라온다.

   ⛔ 34개를 다 채운다. 빠진 토큰은 나중에 그것을 쓰는 순간 조용히 무효가 되고,
      에러가 안 나서 안 잡힌다.
   ============================================================================ */

:root {
    --lp-scheme:        light;
    --lp-accent:        var(--color-primary);
    --lp-accent-dark:   var(--color-primary-dark);
    --lp-accent-soft:   var(--color-primary-soft);
    --lp-on-accent:     var(--color-white);
    --lp-accent-text:   var(--color-primary-dark);
    --lp-accent-alt:    var(--color-accent);

    --lp-bg:            var(--color-bg);
    --lp-bg-alt:        var(--color-bg-light);
    --lp-surface:       var(--color-white);
    --lp-surface-2:     var(--color-surface-soft);

    /* 어두운 무대 — 히어로·마감 띠가 쓴다 */
    --lp-ink:           var(--color-text);
    --lp-on-ink:        var(--color-white);

    --lp-text:          var(--color-text);
    --lp-text-soft:     var(--color-text-light);
    --lp-text-muted:    var(--color-text-muted);

    --lp-border:        var(--color-border);
    --lp-border-soft:   var(--color-border-light);

    --lp-success:       var(--color-success);
    --lp-warning:       var(--color-warning);
    --lp-danger:        var(--color-danger);

    --lp-radius-sm:     var(--radius-sm);
    --lp-radius-md:     var(--radius-md);
    --lp-radius-lg:     var(--radius-lg);
    --lp-radius-pill:   var(--radius-pill);
    --lp-shadow:        var(--shadow-md);
    --lp-shadow-lift:   var(--shadow-lg);
    --lp-focus:         var(--focus-glow);

    --lp-font-heading:  var(--font-sans);
    --lp-font-body:     var(--font-sans);
    --lp-container:     1080px;
    --lp-nav-height:    88px;
    --lp-section-gap:        104px;
    --lp-section-gap-mobile: 64px;
}