/* ============================================================================
   theme-g.css — G 딥틸 코랄 (Design System 07)
   ============================================================================
   @version   1.1.0
   @updated   2026-09-07
   @shared    복제사이트 공용 파일 — 여기서 고치면 다른 사이트에도 이식해야 한다

   색 토큰만 담는다. 컴포넌트는 theme-base.css 가 갖는다.
   값의 출처는 docs/design/design_system_07-teal-coral-commerce.md 의 :root 다.

   플랫 계열이다. docs/design/README §6 경고대로 배경색이 가까운 두 면을 겹치면 요소가 사라진다 —
   그래서 --color-bg-light 를 회색(#FAFAFA) 대신 웜톤(#F7F6F2)으로 잡아 흰 표면과 갈라 두었다.

   [이 파일에서 정한 값(원본에 없던 것)]
   --color-primary-soft 계열 4개(원본 --color-mint 는 채도가 높아 옅은 틴트로 만듦) · --color-placeholder · --color-border-light · --color-warning-bg · --color-sold · --shadow-md/lg

   ⚠️ --color-accent / --color-accent-dark 는 **일부러 정의하지 않는다.**
      bugo-public.css 의 호실 텍스트가 흰색 폴백에 기대고 있어, 전역에 값을 주면
      어두운 빈소 머리글 위 위계가 무너진다. 금색 계열은 theme-base.css 의
      .fw-senders-section 안에서만 정의한다.
   ============================================================================ */

:root {
    /* ── 배경·표면 ── */
    --color-bg:             #ffffff;
    --color-bg-light:       #f7f6f2;
    --color-white:          #ffffff;
    --color-surface-soft:   #f7f6f2;
    --color-surface-mute:   #f3f3f3;

    /* ── 브랜드 ── */
    --color-primary:        #477a7b;
    --color-primary-light:  #72c4ac;
    --color-primary-dark:   #3b6667;
    --color-primary-rgb:    71, 122, 123;
    --color-on-primary:     #ffffff;

    /* ── 브랜드 파생 (버튼·뱃지 배경과 테두리) ── */
    --color-primary-soft:        #e8f1ee;
    --color-primary-soft-hover:  #d6e7e1;
    --color-primary-soft-border: #a9c8c0;
    --color-primary-border:      #7fafae;

    /* ── 정책 문서·배너용 파생 ── */
    --color-accent-deep:    var(--color-primary);
    --color-accent-text:    var(--color-text);

    /* ── 텍스트 ── */
    --color-text:           #333333;
    --color-text-light:     #6a6a6a;
    --color-text-muted:     #b3b3b3;
    --color-placeholder:    #c4c4c4;

    /* ── 링크 ── */
    --color-link:           var(--color-primary-dark);
    --color-link-dark:      #2c4e4f;

    /* ── 테두리 ── */
    --color-border:         #e6e6e6;
    --color-border-light:   #f0f0f0;

    /* ── 시맨틱 ── */
    --color-danger:         #ef172f;
    --color-warning:        #ff7600;
    --color-warning-bg:     #fff1e3;
    --color-success:        #458e15;
    --color-sold:           #8a8a8a;
    --color-disabled-bg:    #e0e0e0;
    --color-disabled-text:  #9a9a9a;

    /* ── 그림자 ── */
    --shadow-sm:  0 3px 6px rgba(0, 0, 0, 0.10);
    --shadow-md:  0 8px 18px rgba(0, 0, 0, 0.12);
    --shadow-lg:  0 16px 36px rgba(0, 0, 0, 0.14);

    /* ── 모서리 ── */
    --radius-sm:   5px;
    --radius-md:   10px;
    --radius-lg:   24px;
    --radius-pill: 60px;

    /* ── 타이포 스케일 ── */
    --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: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    --font-heading: var(--font-sans);
}


/* ============================================================================
   레이아웃 토큰 매핑 (--lp-*) — 2026-09-07 추가
   ============================================================================
   랜딩(홈)이 쓰는 토큰 계약이다. 위의 --color-* 는 부고장 화면들이 쓰고, 이 34개는
   **랜딩 전용**이다. 둘은 이름이 겹치지 않으므로 서로 간섭하지 않는다.

   ■ 왜 따로 두나
     랜딩마다 색을 받는 이름이 제각각이라(3호는 --ds-*, 4·5호는 리터럴 하드코딩)
     구조를 바꾸면 색이 안 따라왔다. 아홉 색이 **같은 이름 34개를 빠짐없이** 채우게
     만드는 것이 해결책이고, 그 계약이 이것이다.

   ■ 값의 출처 (사람이 옮긴 값이다 — 여기서 새로 만들지 말 것)
     {OneDrive}\WEB\Projects\docs\design\layouts\tokens\theme-g.css
     계약 정본: docs/design/layouts/LAYOUT-TOKEN-CONTRACT.md

   ⚠️ **34개를 하나라도 빼지 말 것.** CSS 변수는 없어도 에러가 안 난다 —
      배경이면 transparent, 색이면 부모 색으로 조용히 떨어진다.
      확인은 눈이 아니라 docs/design/layouts/check-layout.mjs 로 한다.

   ⚠️ 1호(freebugo.co.kr)는 이 파일을 **로드하지 않는다.** site.php 에 theme_palette
      키가 없어 theme-cokr.css 한 장으로 가기 때문이다(2026-09-07 실측).
   ============================================================================ */

:root {
  --lp-scheme:light;
  --lp-accent:#477A7B; --lp-accent-dark:#3B6667; --lp-accent-soft:#B9DCD2;
  --lp-on-accent:#FFFFFF; --lp-accent-text:#3B6667; --lp-accent-alt:#E64E00;
  --lp-bg:#FFFFFF; --lp-bg-alt:#F7F6F2; --lp-surface:#FFFFFF; --lp-surface-2:#F3F3F3;
  --lp-ink:#3B6667; --lp-on-ink:#FFFFFF;
  --lp-text:#333333; --lp-text-soft:#6A6A6A; --lp-text-muted:#B3B3B3;
  --lp-border:#E6E6E6; --lp-border-soft:#E1E1E1;
  --lp-success:#458E15; --lp-warning:#FF7600; --lp-danger:#EF172F;
  --lp-radius-sm:5px; --lp-radius-md:10px; --lp-radius-lg:24px; --lp-radius-pill:60px;
  --lp-shadow:0 3px 6px rgba(0,0,0,.10);
  --lp-shadow-lift:0 10px 24px rgba(0,0,0,.12); /* 파생 */
  --lp-focus:0 0 0 3px rgba(71,122,123,.20); /* 파생 */
  --lp-font-heading:'Pretendard','Noto Sans KR',-apple-system,'Malgun Gothic',sans-serif;
  --lp-font-body:'Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif;
  --lp-container:1200px; --lp-nav-height:88px; --lp-section-gap:104px; --lp-section-gap-mobile:64px;
}