/* ============================================================================
   pungs119.com — 방수119 (대한민국 대표 방수전문업체)  사이트 디자인
   ----------------------------------------------------------------------------
   [디자인 컨셉]  Modern bento grid UI, AI-native interface
     · rounded modular cards / bento grid layout
     · colorful pastel gradients · floating widgets · intelligent dashboard
     · glassmorphism mixed with soft shadows · playful micro-interactions
     · premium productivity-app feel · clean spacing · 2026 web trends
   [팔레트]  soft pink · lavender · mint  (oklch 기반 파스텔)
     · primary   = lavender  (브랜드 주조색 / 신뢰)
     · secondary = soft pink (강조 / 따뜻함)
     · accent    = mint      (포인트 / 상쾌함)
   [형태]  라운드 크게(bento) · 보더 얇게 · 버튼 평면(depth 0)
   [타이포]  기본 시스템 산세리프 · 굵은 헤드라인 + 파스텔 그라디언트 텍스트
   ----------------------------------------------------------------------------
   ※ 이 파일은 웹루트 /css/style.css 로, 테마가 항상 최후순위로 로드한다.
     테마 폴더(theme/daisyui)는 재배포 시 덮어써지므로 절대 수정하지 않는다.
     디자인 작업은 이 파일과 웹루트 /main.php 두 곳에서만 한다.
   ============================================================================ */

/* ── 1. daisyUI 디자인 토큰 재정의 (파스텔 리스킨) ───────────────────────── */
:root {
    --color-primary:          oklch(63% 0.145 300);   /* lavender */
    --color-primary-content:  oklch(99% 0.005 300);
    --color-secondary:        oklch(74% 0.125 355);   /* soft pink */
    --color-secondary-content: oklch(32% 0.06 355);
    --color-accent:           oklch(80% 0.105 168);   /* mint */
    --color-accent-content:   oklch(33% 0.06 168);
    --color-neutral:          oklch(38% 0.035 300);
    --color-neutral-content:  oklch(98% 0.005 300);

    --color-base-100: oklch(99.5% 0.004 320);         /* 카드 표면(거의 흰색) */
    --color-base-200: oklch(97.2% 0.014 315);         /* 본문 배경(연한 라벤더) */
    --color-base-300: oklch(92.5% 0.02 312);          /* 보더/구분선 */
    --color-base-content: oklch(32% 0.035 300);

    --color-info:    oklch(74% 0.11 235);
    --color-success: oklch(78% 0.11 165);
    --color-warning: oklch(83% 0.12 85);
    --color-error:   oklch(70% 0.16 20);

    /* 형태 — bento 라운드 크게 */
    --radius-box:      1.5rem;   /* 카드·모달 */
    --radius-field:    0.9rem;   /* 버튼·입력 */
    --radius-selector: 1rem;     /* 뱃지·토글 */
    --border: 1px;
    --depth: 0;
}

/* ── 2. 파스텔 그라디언트 메시 배경 (본문 뒤 고정 장식) ──────────────────── */
body {
    position: relative;
    background-color: var(--color-base-200);
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(42rem 42rem at 8% -6%,  oklch(88% 0.09 355 / 0.55), transparent 60%),
        radial-gradient(38rem 38rem at 100% 0%, oklch(86% 0.09 300 / 0.5),  transparent 58%),
        radial-gradient(40rem 40rem at 50% 108%, oklch(88% 0.08 168 / 0.5), transparent 60%);
}
/* 본문/푸터를 배경 위로 (헤더는 아래에서 별도 z-index 지정) */
#site-main, #site-footer, #site-drawer { position: relative; z-index: 1; }

/* ── 3. 헤더: 반투명 글래스 (sticky, 본문보다 위 → outlogin 팝업이 가려지지 않음) ── */
#site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background-color: oklch(99.5% 0.004 320 / 0.72);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid oklch(92% 0.02 312 / 0.7);
    box-shadow: 0 4px 24px oklch(60% 0.1 300 / 0.06);
}

/* ── 4. 커스텀 유틸리티 (main.php 에서 사용) ────────────────────────────── */

/* 글래스 카드 표면 */
.glass {
    background-color: oklch(99.5% 0.004 320 / 0.62);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid oklch(100% 0 0 / 0.55);
    box-shadow:
        0 10px 30px -12px oklch(55% 0.1 300 / 0.28),
        inset 0 1px 0 oklch(100% 0 0 / 0.6);
}

/* 파스텔 그라디언트 표면들 */
.grad-lavender { background: linear-gradient(135deg, oklch(90% 0.07 305), oklch(82% 0.11 285)); }
.grad-pink     { background: linear-gradient(135deg, oklch(92% 0.06 350), oklch(84% 0.1 355)); }
.grad-mint     { background: linear-gradient(135deg, oklch(92% 0.06 168), oklch(85% 0.1 172)); }
.grad-hero     { background: linear-gradient(140deg,
                    oklch(90% 0.075 350) 0%,
                    oklch(88% 0.08 305) 45%,
                    oklch(89% 0.075 175) 100%); }

/* 그라디언트 텍스트 */
.grad-text {
    background: linear-gradient(120deg, oklch(60% 0.16 355), oklch(58% 0.17 295), oklch(60% 0.13 185));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* bento 카드 공통: 부드러운 그림자 + 라운드 + 미세 인터랙션 */
.bento {
    border-radius: var(--radius-box);
    box-shadow: 0 12px 34px -18px oklch(55% 0.1 300 / 0.35);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
    will-change: transform;
}
.bento:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -20px oklch(52% 0.12 300 / 0.45);
}

/* 아이콘 필 */
.icon-pill {
    display: inline-grid;
    place-items: center;
    border-radius: 1rem;
    box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.6);
}

/* 떠다니는 위젯 애니메이션 */
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}
.floaty      { animation: floaty 5.5s ease-in-out infinite; }
.floaty-slow { animation: floaty 8s   ease-in-out infinite; }

/* 번호 워터마크(주요 작업 카드) */
.step-num {
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(120deg, oklch(72% 0.13 355), oklch(66% 0.15 295));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 접근성: 모션 최소화 선호 시 애니메이션 정지 */
@media (prefers-reduced-motion: reduce) {
    .floaty, .floaty-slow { animation: none; }
    .bento { transition: none; }
    .bento:hover { transform: none; }
}

/* ── 5. 게시판(free) 최신글 리스트 — 본문 위에서 자연스럽게 ──────────────── */
#site-main .latest {
    background: transparent;
    border: 0;
}
#site-main .latest li { border-radius: 0.75rem; }

/* ---------------------------------------------------------------------------
 * 사이트 푸터 (#site-footer) — 벤토 글래스 / 파스텔(lavender·pink·mint)
 * ------------------------------------------------------------------------- */
#site-footer {
    background-color: oklch(99.5% 0.004 320 / 0.62);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border-top: 1px solid oklch(100% 0 0 / 0.55);
    box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.6);
}
/* 회사명 — 파스텔 그라디언트 텍스트(.grad-text 톤) */
#site-footer address p:first-child {
    font-weight: 800;
    background: linear-gradient(120deg, oklch(60% 0.16 355), oklch(58% 0.17 295), oklch(60% 0.13 185));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
#site-footer nav a { transition: color .2s ease; }
#site-footer nav a:hover { color: var(--color-primary); text-decoration: none; }