@charset "UTF-8";
/* =============================================================================
 * 방수119 (yagood.co.kr) — 사이트 고유 디자인
 * -----------------------------------------------------------------------------
 * 디자인 컨셉 (Design Concept)
 *   Abstract premium background for website hero section, flowing aurora
 *   gradients, holographic mesh, liquid chrome waves, dreamy pastel lighting,
 *   soft iridescent reflections, spatial depth, futuristic minimalism, premium
 *   startup landing page aesthetic, elegant editorial composition,
 *   ultra smooth lighting.
 *
 * 톤 & 무드 : 몽환적 파스텔 오로라 / 홀로그래픽 / 리퀴드 크롬 / 미래적 미니멀
 * 주조색    : violet-indigo (primary) · aurora-cyan (secondary) · iridescent-pink (accent)
 * 라운드    : 크게(부드럽고 프리미엄) — box 1.5rem / field 0.9rem
 * 보더      : 얇게(1px), 유리질 반투명 경계
 * 타이포    : 굵은 헤드라인 + 이리데슨트 그라디언트 강조, 넉넉한 본문 여백
 *
 * 수정 규약 : 이 파일(웹루트 /css/style.css)과 웹루트 /main.php 만 수정한다.
 *            theme/daisyui/ 폴더는 건드리지 않는다(테마 덮어쓰기 시 소실).
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. daisyUI 디자인 토큰 재정의 — 사이트 전체 리스킨
 * ------------------------------------------------------------------------- */
:root {
    /* 색 (시맨틱) — 몽환적 파스텔 오로라 */
    --color-primary:          oklch(62% 0.185 285);   /* violet-indigo */
    --color-primary-content:  oklch(99% 0.01 285);
    --color-secondary:        oklch(74% 0.115 215);   /* aurora cyan-blue */
    --color-secondary-content:oklch(24% 0.04 240);
    --color-accent:           oklch(76% 0.135 340);   /* iridescent pink */
    --color-accent-content:   oklch(24% 0.05 340);
    --color-neutral:          oklch(34% 0.035 280);
    --color-neutral-content:  oklch(97% 0.01 285);

    --color-base-100:         oklch(99.2% 0.004 285); /* 표면(카드) — 라벤더 힌트 화이트 */
    --color-base-200:         oklch(96.8% 0.012 288); /* 본문 배경 */
    --color-base-300:         oklch(91.5% 0.02 288);  /* 보더/구분선 */
    --color-base-content:     oklch(29% 0.03 282);

    --color-info:    oklch(72% 0.12 230);
    --color-success: oklch(72% 0.14 165);
    --color-warning: oklch(80% 0.14 80);
    --color-error:   oklch(66% 0.19 22);

    /* 형태 — 부드럽고 프리미엄 */
    --radius-box:      1.5rem;
    --radius-field:    0.9rem;
    --radius-selector: 0.6rem;
    --border:          1px;
    --depth:           0;
}

/* ---------------------------------------------------------------------------
 * 2. 오로라 팔레트 (사이트 전용 변수)
 * ------------------------------------------------------------------------- */
:root {
    --aurora-1: oklch(66% 0.19 285);  /* violet  */
    --aurora-2: oklch(74% 0.15 235);  /* blue    */
    --aurora-3: oklch(78% 0.12 200);  /* cyan    */
    --aurora-4: oklch(80% 0.13 335);  /* pink    */
    --aurora-5: oklch(85% 0.10 165);  /* mint    */
}

/* 부드러운 스크롤 & 본문 렌더 보정 */
html { scroll-behavior: smooth; }
#site-main { scroll-margin-top: 5rem; }

/* ---------------------------------------------------------------------------
 * 3. 헤더 — 유리질 반투명 (sticky navbar)
 * ------------------------------------------------------------------------- */
#site-header {
    background: color-mix(in oklab, var(--color-base-100) 72%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid color-mix(in oklab, var(--color-base-300) 70%, transparent);
    box-shadow: 0 4px 24px -18px oklch(50% 0.15 285 / 0.5);
}

/* ---------------------------------------------------------------------------
 * 4. 오로라 배경 유틸 (hero / CTA 등)
 * ------------------------------------------------------------------------- */
.aurora {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(60% 90% at 12% 8%,  color-mix(in oklab, var(--aurora-1) 85%, transparent), transparent 60%),
        radial-gradient(55% 80% at 88% 12%, color-mix(in oklab, var(--aurora-4) 80%, transparent), transparent 62%),
        radial-gradient(70% 90% at 80% 92%, color-mix(in oklab, var(--aurora-2) 82%, transparent), transparent 60%),
        radial-gradient(60% 85% at 20% 95%, color-mix(in oklab, var(--aurora-5) 70%, transparent), transparent 62%),
        linear-gradient(135deg, var(--aurora-1), var(--aurora-2) 55%, var(--aurora-3));
}
/* 홀로그래픽 메쉬 + 리퀴드 크롬 물결 오버레이 */
.aurora::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -1;
    background:
        radial-gradient(40% 55% at 30% 30%, color-mix(in oklab, var(--aurora-4) 60%, transparent), transparent 60%),
        radial-gradient(45% 60% at 70% 60%, color-mix(in oklab, var(--aurora-3) 55%, transparent), transparent 62%),
        conic-gradient(from 210deg at 60% 40%,
            transparent, color-mix(in oklab, var(--aurora-5) 45%, transparent), transparent 40%);
    mix-blend-mode: screen;
    filter: blur(8px);
    animation: aurora-drift 22s ease-in-out infinite alternate;
}
/* 부드러운 상단 하이라이트(리퀴드 크롬 광택) */
.aurora::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        oklch(100% 0 0 / 0.28), transparent 32%,
        transparent 72%, oklch(30% 0.06 285 / 0.22));
    pointer-events: none;
}
@keyframes aurora-drift {
    0%   { transform: translate3d(-4%, -2%, 0) rotate(0deg)   scale(1.05); }
    50%  { transform: translate3d(3%, 2%, 0)  rotate(6deg)    scale(1.12); }
    100% { transform: translate3d(-2%, 4%, 0) rotate(-4deg)   scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .aurora::before { animation: none; }
}

/* 오로라 위 텍스트 — 밝은 대비 */
.aurora .on-aurora,
.aurora .on-aurora * { color: oklch(99% 0.01 285); }

/* ---------------------------------------------------------------------------
 * 5. 유리질 카드(글래스모피즘)
 * ------------------------------------------------------------------------- */
.glass {
    background: color-mix(in oklab, var(--color-base-100) 62%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid oklch(100% 0 0 / 0.35);
    box-shadow:
        0 1px 0 0 oklch(100% 0 0 / 0.5) inset,
        0 20px 50px -30px oklch(45% 0.12 285 / 0.6);
}
.glass-dark {
    background: oklch(30% 0.04 285 / 0.28);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid oklch(100% 0 0 / 0.22);
    color: oklch(99% 0.01 285);
}

/* ---------------------------------------------------------------------------
 * 6. 이리데슨트 그라디언트 텍스트 & 유틸
 * ------------------------------------------------------------------------- */
.text-iri {
    background: linear-gradient(100deg,
        var(--aurora-1), var(--aurora-4) 40%, var(--aurora-2) 72%, var(--aurora-3));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.divider-iri {
    height: 3px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg,
        var(--aurora-1), var(--aurora-4), var(--aurora-2), var(--aurora-3));
}

/* ---------------------------------------------------------------------------
 * 7. 본문 카드 — 부드러운 리프트 + 이리데슨트 상단선
 * ------------------------------------------------------------------------- */
#site-main .card {
    border: 1px solid color-mix(in oklab, var(--color-base-300) 60%, transparent);
    box-shadow: 0 18px 40px -34px oklch(45% 0.1 285 / 0.55);
    transition: transform .3s ease, box-shadow .3s ease;
}
.card-lift { transition: transform .3s ease, box-shadow .3s ease; }
.card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 60px -30px oklch(45% 0.14 285 / 0.5);
}

/* 아이콘 배지 — 오로라 필 */
.icon-orb {
    display: inline-grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    color: oklch(99% 0.01 285);
    background: linear-gradient(140deg, var(--aurora-1), var(--aurora-4));
    box-shadow: 0 10px 24px -12px oklch(60% 0.18 300 / 0.7);
}
.icon-orb.orb-2 { background: linear-gradient(140deg, var(--aurora-2), var(--aurora-3)); }
.icon-orb.orb-3 { background: linear-gradient(140deg, var(--aurora-4), var(--aurora-5)); }

/* ---------------------------------------------------------------------------
 * 8. 주요 작업 스텝 번호 (01~04)
 * ------------------------------------------------------------------------- */
.step-num {
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 2.75rem);
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(120deg, var(--aurora-1), var(--aurora-4) 60%, var(--aurora-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------------------------------------------------------------------------
 * 9. 시공 분야 칩(작은 유리 카드)
 * ------------------------------------------------------------------------- */
.field-item {
    border: 1px solid color-mix(in oklab, var(--color-base-300) 70%, transparent);
    background: linear-gradient(160deg,
        color-mix(in oklab, var(--color-base-100) 96%, var(--aurora-3) 4%),
        var(--color-base-100));
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.field-item:hover {
    transform: translateY(-3px);
    border-color: color-mix(in oklab, var(--aurora-1) 45%, transparent);
    box-shadow: 0 18px 40px -28px oklch(55% 0.16 300 / 0.6);
}
.field-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: linear-gradient(140deg, var(--aurora-1), var(--aurora-4));
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--aurora-1) 14%, transparent);
}

/* ---------------------------------------------------------------------------
 * 10. 게시판(free) 최신글 — 중립 유지, 여백만 보정
 * ------------------------------------------------------------------------- */
#site-main .latest li { line-height: 1.9; }

/* ---------------------------------------------------------------------------
 * 11. 오로라 버튼(hero CTA 강조)
 * ------------------------------------------------------------------------- */
.btn-aurora {
    color: oklch(99% 0.01 285);
    border: 0;
    background: linear-gradient(120deg, var(--aurora-1), var(--aurora-4) 55%, var(--aurora-2));
    box-shadow: 0 14px 30px -14px oklch(55% 0.18 300 / 0.8);
}
.btn-aurora:hover {
    background: linear-gradient(120deg, var(--aurora-4), var(--aurora-1) 55%, var(--aurora-3));
}

/* ---------------------------------------------------------------------------
 * 12. 사이트 푸터 (#site-footer) — 오로라 / 이리데슨트
 * ------------------------------------------------------------------------- */
#site-footer {
    position: relative;
    background:
        radial-gradient(60% 120% at 100% 0%, color-mix(in oklab, var(--aurora-4) 14%, transparent), transparent 60%),
        radial-gradient(60% 120% at 0% 0%,   color-mix(in oklab, var(--aurora-2) 14%, transparent), transparent 60%),
        var(--color-base-100);
    border-top: 1px solid color-mix(in oklab, var(--color-base-300) 70%, transparent);
}
/* 상단 이리데슨트 라인(.divider-iri 톤) */
#site-footer::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--aurora-1), var(--aurora-4), var(--aurora-2), var(--aurora-3));
}
/* 회사명 — 이리데슨트 그라디언트 텍스트 */
#site-footer address p:first-child {
    font-weight: 700;
    background: linear-gradient(100deg, var(--aurora-1), var(--aurora-4) 40%, var(--aurora-2) 72%, var(--aurora-3));
    -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; }