/* ============================================================================
   theme-bugoshare.css — bugoshare.com 디자인 시스템 (블랙 + 골드)
   ============================================================================
   - 서브 페이지: 밝은 뉴트럴 배경 + 블랙 버튼 + 다크골드 링크·포인트
   - 메인 페이지(블랙 전면 + 골드 아웃라인 카드)는 home-bugoshare.css가 구성
   - theme-cokr.css와 동일한 변수 계약 유지
   - 2026-09-14: 데스크톱 네비게이션 글라이더와 CTA 호버 움직임 보강
   ============================================================================ */

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

    /* ── 브랜드 (블랙) ── */
    --color-primary:        #141414;
    --color-primary-light:  #2e2e2e;
    --color-primary-dark:   #000000;

    /* ── 링크 (다크 골드) ── */
    --color-link:           #8a6d1e;
    --color-link-dark:      #6d5615;

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

    /* ── 브랜드 파생 ── */
    --color-primary-soft:        #f1efe8;
    --color-primary-soft-hover:  #e8e4d6;
    --color-primary-soft-border: #d2c9ab;
    --color-primary-border:      #bfb187;

    /* ── 표면 ── */
    --color-surface-soft:   #f2f1ed;
    --color-surface-mute:   #eae8e2;

    /**
     * ── 공용 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:           #191919;
    --color-text-light:     #55534d;
    --color-text-muted:     #75726a;
    --color-placeholder:    #a5a29a;

    /* ── 테두리 ── */
    --color-border:         #d9d6cd;
    --color-border-light:   #e8e6df;

    /* ── 시맨틱 ── */
    --color-danger:         #c0362c;
    --color-warning:        #b07d1e;
    --color-warning-bg:     #f8f0d8;
    --color-sold:           #737064;
    --color-success:        #3f7048;

    /* ── 그림자 ── */
    --shadow-sm:  0 2px 8px rgba(15, 14, 10, 0.06);
    --shadow-md:  0 6px 22px rgba(15, 14, 10, 0.09);
    --shadow-lg:  0 12px 40px rgba(15, 14, 10, 0.13);
    --focus-glow: 0 0 0 3px rgba(201, 162, 39, 0.22);

    /* ── 모서리 ── */
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  18px;
    --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;

    /* ── Bootstrap 5 매핑 ── */
    --bs-body-bg:           var(--color-bg);
    --bs-body-color:        var(--color-text);
    --bs-primary:           var(--color-primary);
    --bs-primary-rgb:       20, 20, 20;
    --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.6;
    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-weight: 800;
    line-height: 1.3;
    margin: 0 0 0.5em;
    letter-spacing: -0.02em;
}

::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: border-color 0.2s ease;
}
.card-base:hover { border-color: var(--color-primary-border); }

.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.72); }
.hero-primary .hero-badge {
    display: inline-block;
    background: rgba(201, 162, 39, 0.14);
    border: 1px solid rgba(201, 162, 39, 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: 700;
    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: #c8c6be; color: var(--color-white); border-color: #c8c6be; 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: #0d0d0d;
    color: rgba(255, 255, 255, 0.55);
    padding: 2rem 1rem 1.5rem;
    margin-top: 3rem;
}
.site-footer a { color: rgba(255, 255, 255, 0.55); }
.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.32); font-size: var(--fs-sm); }

/* ── 배지 ── */
.badge-pill {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-pill);
    background: rgba(201, 162, 39, 0.12);
    border: 1px solid rgba(201, 162, 39, 0.4);
    color: var(--color-link-dark);
    font-size: var(--fs-sm);
    font-weight: 700;
}

/* ── 네비게이션 ── */
.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-weight: 800;
    font-size: var(--fs-2xl);
    text-decoration: none;
    letter-spacing: -0.03em;
}
.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-bugoshare.css 에서 이관.

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

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

body .site-header {
    background: rgba(14, 14, 14, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(201, 162, 39, 0.22);
}

/* ★ 모바일에서는 backdrop-filter 를 끈다 — 켜져 있으면 position:fixed 인 모바일 메뉴의
   컨테이닝 블록이 헤더가 되어 메뉴가 65px 띠로 찌그러진다(이관 전 실측된 실제 버그). */
@media (max-width: 768px) {
    body .site-header {
        background: #0e0e0e;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

body .site-logo { color: #f2ecd9; }
body .site-logo:hover { color: #ffffff; }

body .site-logo::before {
    border: 2px solid var(--color-gold);
    border-radius: 50%;
    transform: none;
}

body .site-nav__primary a { color: #cfcabb; }
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: #8d897d; }
body .site-nav__secondary a:hover,
body .site-nav__secondary a.active { color: #e6e1d2; }

@media (min-width: 769px) {
    body .site-nav__glider {
        background: linear-gradient(
            110deg,
            rgba(201, 162, 39, 0.08),
            rgba(201, 162, 39, 0.22),
            rgba(201, 162, 39, 0.10)
        );
        box-shadow:
            inset 0 0 0 1px rgba(201, 162, 39, 0.20),
            0 5px 18px rgba(201, 162, 39, 0.08);
    }

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

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

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

body .btn-header-cta:not(.btn-header-cta--ghost) {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: #171304;
    box-shadow: 0 0 0 rgba(201, 162, 39, 0);
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.28s ease,
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
body .btn-header-cta:not(.btn-header-cta--ghost):hover {
    background: #d9b433;
    border-color: #d9b433;
    color: #171304;
    box-shadow: 0 7px 20px rgba(201, 162, 39, 0.20);
    transform: translateY(-2px);
}

/* 보조 CTA(부고장 관리)는 아웃라인 유지 */
body .btn-header-cta--ghost {
    background: transparent;
    border-color: var(--color-gold);
    color: var(--color-gold);
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.28s ease,
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
body .btn-header-cta--ghost:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: #171304;
    box-shadow: 0 7px 20px rgba(201, 162, 39, 0.16);
    transform: translateY(-2px);
}

body .btn-header-cta:active { transform: translateY(0) scale(0.98); }

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

/* ============================================================================
   [꽃으로 마음을 보내신 분들] 크림·금색 토큰 (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:     1040px;
    --lp-nav-height:    88px;
    --lp-section-gap:        104px;
    --lp-section-gap-mobile: 64px;
}