@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;700&family=IBM+Plex+Mono:wght@400;600&display=swap');
/* =============================================================================
 * 방수119 (bangsoo114.co.kr) — 사이트 디자인
 * -----------------------------------------------------------------------------
 * 컨셉      : "시공 도면 / 블루프린트" — 감청색 청사진 위 흰 선 도면.
 *             모눈 바탕, 도면 시트(모서리 재단 표시), 표제란(title block),
 *             단면 상세도·치수선·번호 콜아웃, 고정폭 주석 라벨.
 * 팔레트    : base      = 청사진 #0d2c52(지면) / #12396a(시트) / 선 rgba(220,236,255,.4)
 *             primary   = 형광 앰버(마킹) oklch(82% 0.16 80)
 *             secondary = 시안 라인 oklch(82% 0.10 225)
 *             accent    = 레드라인(수정 표시) oklch(68% 0.19 30)
 * 폰트      : 본문·제목 = IBM Plex Sans KR, 주석·라벨·숫자 = IBM Plex Mono
 * 형태      : 라운드 0~2px, 1px 흰 선, 그림자 없음(평면 도면)
 * -----------------------------------------------------------------------------
 * 규약(STYLE.md): 디자인 수정은 이 파일에서만. 테마(theme/daisyui) 폴더 수정 금지.
 *                 마크업 커스텀은 웹루트 main.php / hero.php 에서만.
 * ============================================================================= */

:root {
    color-scheme: dark;
    --line: rgba(220, 236, 255, .42);
    --line-strong: rgba(232, 243, 255, .85);
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
    --sans: 'IBM Plex Sans KR', system-ui, sans-serif;

    --color-primary: oklch(82% 0.16 80);
    --color-primary-content: oklch(22% 0.05 255);
    --color-secondary: oklch(82% 0.10 225);
    --color-secondary-content: oklch(22% 0.05 255);
    --color-accent: oklch(68% 0.19 30);
    --color-accent-content: oklch(98% 0 0);
    --color-neutral: oklch(26% 0.07 255);
    --color-neutral-content: oklch(95% 0.02 240);

    --color-base-100: #12396a;
    --color-base-200: #0d2c52;
    --color-base-300: rgba(220, 236, 255, .35);
    --color-base-content: #e6f0ff;

    --radius-box: 2px;
    --radius-field: 2px;
    --radius-selector: 2px;
    --border: 1px;
    --depth: 0;
}

body { font-family: var(--sans); }

/* ===== 배경: 청사진 모눈 ===== */
.drawer-content {
    background-color: #0d2c52;
    background-image:
        linear-gradient(rgba(200,225,255,.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,225,255,.13) 1px, transparent 1px),
        linear-gradient(rgba(200,225,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,225,255,.06) 1px, transparent 1px),
        radial-gradient(120% 90% at 50% 0%, #15457d 0%, #0b2546 100%);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px, 100% 100%;
    background-attachment: fixed;
}

#site-header { background: rgba(10, 36, 68, .92); border-bottom: 1px solid var(--line-strong); backdrop-filter: blur(6px); }
#site-footer { background: #0a2444; border-top: 1px solid var(--line-strong); font-family: var(--mono); font-size: .85rem; }

/* ===== 도면 시트 ===== */
.sheet {
    position: relative;
    border: 1px solid var(--line-strong);
    outline: 1px solid var(--line); outline-offset: 6px;
    background: rgba(18, 57, 106, .72);
    padding: 1.5rem 1.25rem 1.75rem;
    margin-left: 7px; margin-right: 7px;
}
@media (min-width: 768px) { .sheet { padding: 2rem 2.25rem 2.25rem; } }
.corner { position: absolute; width: 14px; height: 14px; border-color: var(--color-primary); border-style: solid; }
.corner.tl { top: -8px; left: -8px; border-width: 2px 0 0 2px; }
.corner.tr { top: -8px; right: -8px; border-width: 2px 2px 0 0; }
.corner.bl { bottom: -8px; left: -8px; border-width: 0 0 2px 2px; }
.corner.br { bottom: -8px; right: -8px; border-width: 0 2px 2px 0; }

.mono-label { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; color: var(--color-secondary); text-transform: uppercase; }

.sheet-head { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1.5rem; padding-bottom: .75rem; border-bottom: 1px dashed var(--line); }
.sheet-head h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -.01em; }

/* Hero */
.bp-title { font-weight: 700; font-size: clamp(2.1rem, 5.4vw, 3.6rem); line-height: 1.15; letter-spacing: -.02em; }
.bp-title .hl { color: var(--color-primary); }
.bp-lead { font-size: 1.05rem; line-height: 1.8; opacity: .85; }
.detail { color: var(--line-strong); border: 1px solid var(--line); padding: .75rem; background: rgba(10, 36, 68, .5); }
.detail .layer-hl { stroke: var(--color-primary); fill: rgba(255, 200, 60, .18); }
.svg-note { fill: #dcebff; font-family: var(--mono); }
.svg-note .note-hl { fill: var(--color-primary); }

#site-main .btn { font-family: var(--mono); letter-spacing: .02em; box-shadow: none; }
#site-main .btn-ghost-line { background: transparent; border: 1px solid var(--line-strong); color: var(--color-base-content); }
#site-main .btn-ghost-line:hover { background: rgba(255,255,255,.08); }

/* 표제란 */
.title-block { width: 100%; border-collapse: collapse; font-size: .88rem; }
.title-block th, .title-block td { border: 1px solid var(--line-strong); padding: .5rem .7rem; text-align: left; }
.title-block th { font-family: var(--mono); font-weight: 600; font-size: .72rem; color: var(--color-secondary); width: 1%; white-space: nowrap; background: rgba(10,36,68,.55); }
.title-block a { color: var(--color-primary); font-family: var(--mono); }
@media (max-width: 639px) { .title-block { font-size: .78rem; } .title-block th, .title-block td { padding: .4rem .45rem; } }

/* 콜아웃 (증상·노트) */
.callout, .note { position: relative; border: 1px solid var(--line); padding: 1.1rem 1rem 1rem; background: rgba(10, 36, 68, .45); }
.callout-no {
    position: absolute; top: -14px; left: 12px; width: 28px; height: 28px; border-radius: 999px;
    display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: .85rem;
    background: #0d2c52; border: 1.5px solid var(--color-primary); color: var(--color-primary);
}
.callout-title { font-size: 1.15rem; font-weight: 700; margin: .25rem 0 .4rem; }
.note { border-left: 3px solid var(--color-accent); }

/* 공종 일람 */
.spec-grid { background: var(--line); border: 1px solid var(--line); }
.spec { background: #103460; padding: 1rem 1.1rem; transition: background .15s; }
.spec:hover { background: #164377; }
.spec-title { font-size: 1.25rem; font-weight: 700; margin: .2rem 0 .25rem; }

/* 공정 흐름 */
.flow { display: grid; grid-template-columns: 1fr; gap: 1.2rem; counter-reset: flow; }
@media (min-width: 768px) { .flow { grid-template-columns: repeat(5, 1fr); gap: 0; } }
.flow-node { position: relative; border: 1px solid var(--line-strong); padding: .9rem .8rem; background: rgba(10,36,68,.55); text-align: center; }
@media (min-width: 768px) {
    .flow-node { margin-right: 26px; }
    .flow-node:not(:last-child)::after {
        content: ""; position: absolute; top: 50%; right: -27px; width: 26px; border-top: 1px dashed var(--color-primary);
    }
    .flow-node:not(:last-child)::before {
        content: ""; position: absolute; top: calc(50% - 4px); right: -27px; border: 4px solid transparent; border-left-color: var(--color-primary); transform: translateX(4px);
    }
    .flow-node:last-child { margin-right: 0; }
}
.flow-no { font-family: var(--mono); font-size: .7rem; color: var(--color-primary); letter-spacing: .1em; }
.flow-title { font-weight: 700; font-size: 1.05rem; margin: .2rem 0; }

/* 게시판 */
.board-bp { border: 1px solid var(--line); padding: .5rem 1rem; background: rgba(10,36,68,.45); }

/* CTA */
.cta-bp { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .8rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
.cta-tel {
    font-family: var(--mono); font-weight: 600; font-size: clamp(2rem, 7vw, 3.6rem); color: var(--color-primary);
    border: 1px solid var(--color-primary); padding: .2rem 1.25rem; margin: .5rem 0; letter-spacing: .03em;
}
.cta-tel:hover { background: var(--color-primary); color: var(--color-primary-content); }

/* 한글 제목은 어절 단위로 줄바꿈 */
.bp-title, .sheet-head h2, .callout-title, .spec-title, .flow-title { word-break: keep-all; }