@charset "utf-8";

/* =========================================================================
   방수119 (help119.co.kr) — 사이트 고유 디자인 CSS
   위치: 웹루트 /css/style.css (테마가 order 10, 최후순위로 자동 로드 → 항상 우선)
   ※ 테마 폴더(theme/daisyui/)는 건드리지 않는다. 사이트 스타일은 이 파일에만.

   ── 디자인 컨셉 (Liquid Glass / Premium Mobile UI) ──────────────────────────
   Premium mobile UI design, liquid glass interface, ultra transparent frosted
   glass panels, layered depth, soft bloom lighting, floating translucent cards,
   pastel gradient background of pink, lavender and sky blue, subtle chrome
   reflections, minimal typography, elegant spatial interface, premium Apple
   inspired design language, futuristic yet playful, high fidelity UI concept
   --ar 9:16 --v 6

   핵심: 파스텔(핑크·라벤더·스카이블루) 그라디언트 배경 위에 반투명 프로스티드
   글래스 패널(backdrop-blur)이 부유하는 레이어드 뎁스. 크롬 하이라이트, 소프트 블룸.
   ========================================================================= */

/* ── 1. daisyUI 디자인 토큰 재정의 (시맨틱 리스킨) ───────────────────────── */
:root {
    /* 색 — 파스텔 계열 (라벤더 primary, 핑크 secondary, 스카이 accent) */
    --color-primary:         oklch(60% 0.16 300);   /* 라벤더-바이올렛 */
    --color-primary-content:  oklch(100% 0 0);
    --color-secondary:       oklch(74% 0.14 350);   /* 핑크 */
    --color-secondary-content: oklch(100% 0 0);
    --color-accent:          oklch(72% 0.12 240);   /* 스카이 블루 */
    --color-accent-content:   oklch(100% 0 0);
    --color-neutral:         oklch(38% 0.03 290);
    --color-neutral-content:  oklch(100% 0 0);

    /* 표면 — 반투명 화이트(글래스). backdrop-filter 와 함께 프로스티드 효과 */
    --color-base-100:        oklch(99% 0.01 320 / 0.62);  /* 카드/헤더 표면 */
    --color-base-200:        oklch(97% 0.01 320 / 0.35);  /* 본문 배경(그라디언트가 비침) */
    --color-base-300:        oklch(90% 0.02 300 / 0.55);  /* 보더/구분선 */
    --color-base-content:    oklch(32% 0.035 290);        /* 본문 글자(딥 슬레이트-바이올렛) */

    --color-info:            oklch(70% 0.12 235);
    --color-info-content:     oklch(100% 0 0);

    /* 형태 — 크게 라운드된 부유 패널 + 알약형 버튼 */
    --radius-box:      1.5rem;   /* 카드·모달 */
    --radius-field:    2rem;     /* 버튼·입력(알약) */
    --radius-selector: 1rem;     /* 뱃지·체크박스 */
    --border:          1px;
    --depth:           0;        /* 버튼 평면 */
}

/* ── 2. 파스텔 그라디언트 배경 + 소프트 블룸 ────────────────────────────── */
/* body 는 head.def.php 가 .bg-base-200 클래스를 부여 → 이를 이기려고 body.bg-base-200 */
body.bg-base-200 {
    background:
        radial-gradient(1200px 800px at 12% -10%, rgba(255, 194, 224, 0.55), transparent 60%),
        radial-gradient(1000px 720px at 100% 8%,  rgba(196, 224, 255, 0.55), transparent 55%),
        radial-gradient(900px 760px at 50% 115%,  rgba(219, 202, 255, 0.50), transparent 55%),
        linear-gradient(160deg, #ffe6f1 0%, #f1e6ff 46%, #e3f1ff 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* 본문 래퍼는 배경을 투명하게 → 뒤 그라디언트가 그대로 비치도록 */
.drawer-content { background: transparent; }

/* ── 3. 글래스 패널 공통 (frosted glass) ─────────────────────────────────── */
.card,
.lg-glass {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 10px 40px rgba(150, 120, 200, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);   /* 상단 크롬 하이라이트 */
}

/* 좀 더 진한(강조) 글래스 */
.lg-glass-strong {
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(26px) saturate(1.5);
    -webkit-backdrop-filter: blur(26px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        0 16px 50px rgba(150, 120, 200, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* ── 4. 헤더 / 푸터 글래스 (안정 앵커) ───────────────────────────────────── */
#site-header {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(22px) saturate(1.5);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 4px 30px rgba(150, 120, 200, 0.12);
}

#site-footer {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

/* 모바일 우측 드로어도 글래스 */
#site-drawer > div { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

/* ── 5. 버튼 — 알약형 + 소프트 블룸 그림자 ──────────────────────────────── */
.btn-primary {
    box-shadow: 0 8px 24px rgba(120, 90, 200, 0.32);
    border: none;
}
.btn-primary:hover { box-shadow: 0 10px 30px rgba(120, 90, 200, 0.42); }

.btn-ghost { border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.4); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.6); }

/* ── 6. 유틸 클래스 (main.php 랜딩용) ───────────────────────────────────── */
/* 그라디언트 텍스트 (핑크→라벤더→스카이) */
.lg-gradient-text {
    background: linear-gradient(100deg, #ff7ab6 0%, #a78bfa 50%, #60a5fa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 번호 뱃지(주요 작업) — 크롬/글래스 원형 */
.lg-num {
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(226,214,255,0.7));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 6px 18px rgba(150,120,200,0.25);
}

/* 아이콘 원형 표면 */
.lg-ico {
    background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(224,224,255,0.55));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

a { text-decoration: none; }
html { scroll-padding-top: 5rem; scroll-behavior: smooth; }

/* ---------------------------------------------------------------------------
 * 사이트 푸터 (#site-footer) — Liquid Glass / 프로스티드 + 크롬 하이라이트
 * ------------------------------------------------------------------------- */
#site-footer {
    background: rgba(255, 255, 255, 0.45);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    backdrop-filter: blur(24px) saturate(1.5);
    border-top: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);   /* 상단 크롬 하이라이트 */
}
/* 회사명 — 핑크→라벤더→스카이 그라디언트 텍스트(.lg-gradient-text 와 동일 톤) */
#site-footer address p:first-child {
    font-weight: 700;
    background: linear-gradient(100deg, #ff7ab6 0%, #a78bfa 50%, #60a5fa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
#site-footer nav a { transition: color .2s ease; }
#site-footer nav a:hover { color: #a78bfa; text-decoration: none; }