/* ============================================================================
   theme-base.css — 색 선택형 테마의 공통 컴포넌트 레이어
   ============================================================================
   @version   1.1.1
   @updated   2026-09-14
   @shared    복제사이트 공용 파일 — 여기서 고치면 다른 사이트에도 이식해야 한다
   @changelog
     1.1.1 (2026-09-14) 버튼·히어로·CTA를 선택한 브랜드색으로 연결. 고정 차콜 헤더 버튼 수정.
     1.1.0 (2026-09-14) 색 선택형 랜딩 4종 가독성: 면과 버튼 색 역할 분리, 설명 글자 보정.
     1.0.1 (2026-09-07) --color-dot 추가. 2번 구조(bugolink) 랜딩이 쓰는데 색 선택형에서는
                        theme-bugolink.css 가 안 실려 점무늬가 사라졌다. 이 한 줄로 2번
                        구조가 9색 전부에서 정상 동작한다
     1.0.0 (2026-09-06) 최초 작성. theme-cokr.css 의 컴포넌트부를 색 없는 형태로
                        일반화했다. 색은 theme-{a~i}.css 가 채운다

   ────────────────────────────────────────────────────────────────────────────
   이 파일이 생긴 이유

   부고장 분양에서 고객이 색 9가지 중 하나를 고르게 하려면 테마가 9벌 필요하다.
   그런데 기존 theme-{사이트코드}.css 는 **토큰과 컴포넌트가 한 파일에 붙어** 있어,
   그대로 9벌을 만들면 컴포넌트 350줄이 9번 복제된다. 버튼 하나를 고칠 때 9곳을
   따라다녀야 한다는 뜻이다.

   그래서 갈랐다.
     theme-base.css      ← 이 파일. 컴포넌트 · 색 리터럴 없음 · 9색 공통
     theme-{a~i}.css     ← :root 토큰만. 색·모양·글꼴

   ⚠️ **이 파일에 색 리터럴을 쓰지 말 것.** 쓰는 순간 그 색은 9종 어디서도 안 바뀐다.
      예외는 둘뿐이다 — ① 짙은 면 위에 얹는 rgba(255,255,255,x)
      ② 맨 아래 .fw-senders-section 크림 블록(사이트 공통 구조이지 브랜드 색이 아니다)

   ⚠️ **로드 순서**: theme-{x}.css → theme-base.css → 공용 CSS(bugo-*.css·admin.css).
      토큰과 컴포넌트 사이 순서는 상관없다(변수는 사용 시점에 해석된다).
      다만 공용 CSS 가 뒤에 오므로, 같은 특이도면 공용 CSS 가 이긴다.
      덮어야 할 때는 `body ` 접두사를 붙인다(bugo-theme-contract.md §3-3).

   기존 5개 사이트(theme-cokr·bugolink·bugopage·bugoshare·bugocard)는 이 파일을
   쓰지 않는다. 각자 자기 테마 한 벌을 그대로 유지한다 — 건드리지 않는다.
   ============================================================================ */

/* ============================================================================
   토큰에서 파생되는 값 — 테마 파일이 아니라 여기서 계산한다
   ============================================================================ */

:root {
    /* 브랜드 색의 반투명 파생. 테마는 --color-primary-rgb 만 주면 된다 */
    --focus-glow:      0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
    --color-primary-fade: rgba(var(--color-primary-rgb), 0.10);

    /**
     * 도트 그리드 패턴 색 — 2번 구조(bugolink)의 랜딩이 쓰는 유일한 고유 토큰이다.
     *
     *   background-image: radial-gradient(var(--color-dot) 1px, transparent 1px);
     *
     * 원래는 theme-bugolink.css 가 #dcdde3 로 갖고 있었는데, 색 선택형에서는 그 파일이
     * 실리지 않아 **선언 하나가 통째로 무효**가 되어 점무늬가 사라졌다(2026-09-07 확인).
     * 테두리색에서 파생시키면 9색 어디서든 배경과 같은 톤으로 따라온다.
     * ⚠️ 변수는 **사용 시점에 해석**되므로 다크 2종에서도 그쪽 --color-border 를 집는다.
     */
    --color-dot: var(--color-border);

    /* Bootstrap 5 매핑 — 전부 우리 토큰을 가리킨다 */
    --bs-body-bg:          var(--color-bg);
    --bs-body-color:       var(--color-text);
    --bs-primary:          var(--color-primary);
    --bs-primary-rgb:      var(--color-primary-rgb);
    --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 에도 배경을 주는 이유 — **푸터 아래 빈 화면 색**이다.
 * body 에만 배경이 있으면 그 색이 캔버스로 전파되는데, 내용이 짧은 페이지에서는
 * 푸터 아래로 다른 색 띠가 남아 페이지가 잘린 것처럼 보인다.
 * (다크 테마는 theme-dark-extra.css 가 이 값을 푸터 색으로 덮는다)
 */
html {
    -webkit-text-size-adjust: 100%;
    background: var(--color-bg);
}

/**
 * ⚠️ `html body` 로 쓴다 — `body` 하나로는 못 이긴다.
 *
 * bugo-common.css:34 가 `body{color:#1a1a1a; font-family:-apple-system,…}` 를 박아 두었고
 * 그 파일은 테마보다 **뒤에** 로드된다. 특이도가 같으면(0,0,1) 뒤가 이기므로
 * `body{...}` 로는 밀린다. `html body`(0,0,2)라야 이긴다.
 *
 * ⛔ 빠뜨리면 두 가지가 조용히 깨진다.
 *    ① 다크 테마(E·I)에서 **부고장 본문이 통째로 사라진다** — 어두운 카드 위 검정 글자.
 *       상주 이름·일정·주소가 전부 안 보인다. HTTP 200 이라 절대 안 잡힌다
 *    ② 라이트에서도 --font-sans 가 안 먹는다. H(Inter)·F(시스템 스택)처럼 글꼴이
 *       테마의 성격인 경우 그 성격이 사라진다
 *    3호가 실제 렌더로 잡아낸 문제다(theme-bugopage.css §4 주석).
 */
html 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-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.5em;
}

::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);
}

/* ============================================================================
   패턴 B — 보조 카드 (눌린 느낌)
   ============================================================================ */

.card-soft {
    background: var(--color-bg);
    border: none;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    transition: box-shadow 0.2s ease;
}
.card-soft:hover {
    box-shadow: var(--shadow-md);
}

/* ============================================================================
   패턴 C — 히어로 / CTA
   ============================================================================ */

.hero-primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: var(--radius-lg);
    padding: 2.5rem 1.5rem;
}
.hero-primary h1, .hero-primary h2 { color: var(--color-on-primary); }
.hero-primary .hero-sub { color: rgba(255, 255, 255, 0.9); }
.hero-primary .hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.75rem;
    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-primary);
    box-shadow: var(--focus-glow);
}
.form-control[readonly],
input[readonly] {
    background: var(--color-bg);
    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.25rem;
    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, box-shadow 0.15s ease;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
}
.btn-primary:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
    color: var(--color-on-primary);
}
.btn-primary:active {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.btn-secondary {
    background: var(--color-white);
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn-secondary:hover {
    background: var(--color-border-light);
}

.btn-disabled,
.btn:disabled {
    background: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    border-color: var(--color-disabled-bg);
    cursor: not-allowed;
}

.btn-lg {
    padding: 0.85rem 1.6rem;
    font-size: var(--fs-2xl);
}

/* ============================================================================
   패턴 E — 경고 배너
   ============================================================================ */

.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; }

/* ============================================================================
   패턴 F — 다크 푸터
   ============================================================================ */

.site-footer {
    background: var(--color-text);
    color: var(--color-white);
    padding: 2rem 1rem 1.5rem;
    margin-top: 3rem;
}
.site-footer a {
    color: rgba(255, 255, 255, 0.8);
}
.site-footer a:hover {
    color: #ffffff;
}
.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.6);
    font-size: var(--fs-sm);
}

/* ============================================================================
   배지 (pill)
   ============================================================================ */

.badge-pill {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary-fade);
    color: var(--color-primary);
    font-size: var(--fs-sm);
    font-weight: 500;
}

/* ============================================================================
   네비게이션 바
   ============================================================================ */

.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-heading);
    font-weight: 700;
    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; }

/* 모바일 우선 — 작은 화면에서 hero 폰트 축소 */
@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; }
}

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

   ⛔ **`:root` 에 올리지 말 것.** 두 군데가 조용히 망가진다.
      ① `.public-bugo-hall-head__room` 이 `var(--color-accent, rgba(255,255,255,.82))`
         로 흰색 폴백에 기대고 있다. 어두운 빈소 머리글 위에 쓰는 색이라
         전역에 금색을 주면 위계가 무너진다
      ② `flower-store.css` 가 뱃지 배경·테두리에 같은 변수를 쓴다 — 상점 화면이 함께 바뀐다
      그래서 이 섹션 안으로만 내려보낸다. CSS 변수는 자손에게 상속되므로
      .fw-senders-card · .fw-banner 까지 그대로 닿는다.

   크림 바탕은 사이트 공통 구조라 9색과 무관하게 고정이다. 버튼 색은 일부러
   맞추지 않는다 — --color-primary 를 그대로 쓴다.
   ============================================================================ */
.fw-senders-section {
    --color-cream:        #fff8e7;
    --color-cream-start:  #fdf6e3;
    --color-cream-end:    #fef3d0;
    --color-cream-border: #f0e0b0;
    --color-accent:       #e2b04a;
    /* 배너 CTA 의 테두리. :root 값은 브랜드 색이라 같은 계열이 겹치면 윤곽이
       사라진다 — 여기서만 짙은 금색으로 고정한다. */
    --color-accent-deep:  #c8960e;
}

/* ============================================================================
   색 선택형 랜딩 4종 — 표면색과 버튼색을 분리한다
   ============================================================================
   ink/on-ink 는 버튼 안의 글자는 읽히지만 E·I 의 어두운 페이지에서는 버튼 자체가
   사라진다. surface/text 도 어두운 히어로에서는 같은 문제다. --landing-* 는 이 공통
   어댑터의 파생값이며, 원본 디자인의 --lp-* 34개 계약을 늘리지 않는다.
   브랜드 면은 읽기용 강조색을 따른다. F의 주색은 금색이 아니라 네이비이며 I는 무채색이다.
   헤더 버튼에도 같은 브랜드를 쓰고, 랜딩의 ink/on-ink 교체는 home-main 안에만 한정한다.
   body .home-main 접두사는 나중에 로드되는 home-사이트코드.css 보다 우선한다.
   ============================================================================ */
:root {
    --landing-copy: color-mix(in srgb, var(--lp-text-soft) 90%, var(--lp-text));
    --landing-brand-bg: var(--palette-brand-bg, var(--lp-accent-text));
    --landing-brand-text: var(--palette-brand-text, var(--lp-on-accent));
    --landing-action-bg: var(--landing-brand-bg);
    --landing-action-text: var(--landing-brand-text);
    --landing-action-hover: color-mix(in srgb, var(--landing-brand-bg) 92%, var(--lp-ink));
    --landing-inverse-bg: var(--landing-brand-text);
    --landing-inverse-text: var(--landing-brand-bg);
    --landing-inverse-hover: color-mix(in srgb, var(--landing-brand-text) 94%, var(--landing-brand-bg));
    --landing-callout-bg: var(--landing-brand-bg);
    --landing-panel-line: transparent;
    --landing-control-line: var(--landing-copy);
}

body .home-main {
    --lp-ink: var(--landing-brand-bg);
    --lp-on-ink: var(--landing-brand-text);
    /* root 에서 계산한 본문색을 상속한다. 캡션도 읽을 수 있는 대비를 유지한다. */
    --lp-text-soft: var(--landing-copy);
    --lp-text-muted: var(--landing-copy);
    background: var(--lp-bg);
    color: var(--lp-text);
}
body .site-header .btn-header-cta:not(.btn-header-cta--ghost) {
    background: var(--landing-action-bg);
    border-color: var(--landing-action-bg);
    color: var(--landing-action-text);
}
body .site-header .btn-header-cta:not(.btn-header-cta--ghost):hover {
    background: var(--landing-action-hover);
    border-color: var(--landing-action-hover);
    color: var(--landing-action-text);
}
body .site-header .btn-header-cta--ghost {
    border-color: var(--landing-action-bg);
    color: var(--landing-action-bg);
}
body .site-header .btn-header-cta--ghost:hover {
    background: var(--landing-action-bg);
    color: var(--landing-action-text);
}
/* 흰 표면을 20~26% 섞던 스튜디오 그라데이션은 유색 배경의 작은 흰 글자를 흐리게 한다. */
body .home-main .bp-hero,
body .home-main .bp-cta-band {
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--lp-ink) 92%, var(--lp-on-ink)),
        var(--lp-ink) 55%);
}
body .home-main .bl-btn {
    background: var(--landing-action-bg);
    color: var(--landing-action-text);
}
body .home-main .bl-btn:hover {
    background: var(--landing-action-hover);
    color: var(--landing-action-text);
}
body .home-main .bl-cta-band .bl-btn,
body .home-main .bp-btn-primary,
body .home-main .bs-hero .bs-btn-gold,
body .home-main .bc-btn-white {
    background: var(--landing-inverse-bg);
    color: var(--landing-inverse-text);
}
body .home-main .bl-cta-band .bl-btn:hover,
body .home-main .bp-btn-primary:hover,
body .home-main .bs-hero .bs-btn-gold:hover,
body .home-main .bc-btn-white:hover {
    background: var(--landing-inverse-hover);
    color: var(--landing-inverse-text);
}
body .home-main .bl-btn-ghost,
body .home-main .bl-intro-links a {
    border-color: var(--landing-control-line);
}
body .home-main .bl-btn-ghost:hover,
body .home-main .bl-intro-links a:hover {
    border-color: var(--lp-accent-text);
}
body .home-main .bl-intro-card {
    background: var(--landing-callout-bg);
    box-shadow: inset 0 0 0 1px var(--landing-panel-line), var(--lp-shadow-lift);
}
body .home-main .bl-intro-card li {
    color: var(--lp-on-ink);
}
body .home-main .bl-intro-card li::before {
    background: color-mix(in srgb, var(--lp-on-ink) 75%, var(--lp-accent));
}
body .home-main .bl-step::before {
    background: var(--landing-action-bg);
    color: var(--landing-action-text);
}
/* B·H 의 accent/on-accent 는 작은 번호에 부족하다. 읽기용 강조색을 사용한다. */
body .home-main .bl-step:last-child::before {
    background: var(--lp-accent-text);
    color: var(--lp-surface);
}
body .home-main .bl-cta-band,
body .home-main .bp-cta-band,
body .home-main .bc-cta-band,
body .home-main .bp-quick,
body .home-main .bp-stat,
body .home-main .bp-step,
body .home-main .bp-feature,
body .home-main .bp-faq details {
    outline: 1px solid var(--landing-panel-line);
    outline-offset: -1px;
}
/* 유색 면에서는 반투명 흰 글자가 대비를 잃는다. 밝은 E 면에서는 짙은 글자를 쓴다. */
body .home-main .bl-cta-band p,
body .home-main .bp-hero-sub,
body .home-main .bp-cta-band p,
body .home-main .bs-hero-sub,
body .home-main .bs-share-method:nth-child(2) p,
body .home-main .bc-hero-sub,
body .home-main .bc-hero-note,
body .home-main .bc-cta-band p,
body .home-main .bc-cta-band .bc-eyebrow {
    color: var(--lp-on-ink);
}
/* 본문 역할의 설명은 캡션색·12~13px 로 낮추지 않는다. 모바일에도 동일하게 적용한다. */
body .home-main .bl-feature p,
body .home-main .bl-step p,
body .home-main .bl-trust-item,
body .home-main .bl-find p,
body .home-main .bl-faq details p,
body .home-main .bl-intro-card li,
body .home-main .bp-section-head p,
body .home-main .bp-step p,
body .home-main .bp-feature span,
body .home-main .bp-faq details p {
    font-size: 16px;
    line-height: 1.8;
}
body .home-main .bp-section-head p,
body .home-main .bp-step p,
body .home-main .bp-feature span {
    color: var(--lp-text-soft);
}
body .home-main .bp-quick a,
body .home-main .bp-step-no,
body .home-main .bs-card small,
body .home-main .bs-fact span,
body .home-main .bs-feature-note,
body .home-main .bc-fact span,
body .home-main .bc-service small {
    font-size: 15px;
    line-height: 1.65;
}
body .home-main .bl-btn:focus-visible,
body .home-main .bl-btn-ghost:focus-visible,
body .home-main .bp-btn-primary:focus-visible,
body .home-main .bp-btn-ghost:focus-visible,
body .home-main .bs-btn-gold:focus-visible,
body .home-main .bs-btn-outline:focus-visible,
body .home-main .bc-btn-white:focus-visible,
body .home-main .bc-btn-ghost:focus-visible {
    outline: 2px solid var(--lp-on-ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--lp-ink);
}