/* ============================================================
   kynhaus 홈페이지형 통합 테마 — 2026-08-12
   랜딩(파주 하우스)의 다크+골드 팔레트를 시공사례·텍스처·대외인증 등
   템플릿 페이지에 적용해 하나의 사이트로 보이게 하는 오버라이드.
   (마스터 정본: client_custom/kynhaus.co.kr/css/site-custom.css —
    수정은 마스터/클로드코드에서, 배포로 반영)
   ============================================================ */
:root {
    --site-bg: #0b0b0d;
    --site-surface: #131316;
    --site-surface-2: #1b1b1f;
    --site-text: #f2f0ed;
    --site-text-soft: #c9c5be;
    --site-text-muted: #9a968f;
    --site-border: rgba(255, 255, 255, .14);
    --accent: #c8a06a;
}

/* ── 기본 배경/글자 ── */
body {
    background-color: var(--site-bg) !important;
    color: var(--site-text) !important;
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
}

/* ── 표면(카드·헤더·패널) ── */
.bg-white { background-color: var(--site-surface) !important; }
.bg-gray-50 { background-color: var(--site-bg) !important; }
.bg-gray-100, .bg-gray-200 { background-color: var(--site-surface-2) !important; }

/* ── 텍스트 계층 ── */
.text-gray-900, .text-gray-800, .text-black { color: var(--site-text) !important; }
.text-gray-700, .text-gray-600 { color: var(--site-text-soft) !important; }
.text-gray-500, .text-gray-400, .text-gray-300 { color: var(--site-text-muted) !important; }

/* ── 테두리/구분선 ── */
.border-gray-100, .border-gray-200, .border-gray-300, .border, .divide-gray-100 > *, .divide-gray-200 > * {
    border-color: var(--site-border) !important;
}
hr { border-color: var(--site-border) !important; }

/* ── 그림자: 다크에 맞는 깊은 톤 ── */
.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl {
    box-shadow: 0 12px 34px rgba(0, 0, 0, .5) !important;
}

/* ── 네비게이션: 골드 포인트 ── */
.nav-menu-link { color: var(--site-text-soft) !important; }
.nav-menu-link:hover, .nav-menu-link.active { color: var(--site-text) !important; }
.nav-menu-link::after { background: var(--accent) !important; }

/* ── 버튼/포인트 컬러 → 골드 ── */
.bg-blue-600, .bg-indigo-600, .bg-cyan-600 {
    background-color: var(--accent) !important;
    color: #151310 !important;
}
.hover\:bg-gray-800:hover, .hover\:bg-blue-700:hover, .hover\:bg-indigo-700:hover {
    background-color: #d6b078 !important;
    color: #151310 !important;
}
.text-blue-600, .text-indigo-600, .text-cyan-600 { color: var(--accent) !important; }

/* ── 입력/검색창 ── */
input[type="text"], input[type="search"], select, textarea {
    background-color: rgba(255, 255, 255, .06) !important;
    border-color: var(--site-border) !important;
    color: var(--site-text) !important;
}
input::placeholder, textarea::placeholder { color: var(--site-text-muted) !important; }

/* ── 필터 칩/태그류 ── */
.bg-gray-100.rounded-full, .rounded-full.bg-gray-200 { background-color: var(--site-surface-2) !important; }

/* ── 폼 빌더(sf-form)가 템플릿 페이지에 삽입될 때도 동일 테마 ── */
.sf-form .sf-label { color: var(--site-text-muted); }
.sf-form .sf-input { background: rgba(255, 255, 255, .06); border-color: var(--site-border); color: var(--site-text); }
.sf-form .sf-input:focus { border-color: var(--accent); }
.sf-form select.sf-input option { color: #111; }
.sf-form .sf-submit { background: var(--accent); color: #151310; }
.sf-form .sf-msg.ok { color: var(--accent); }

/* ── 헤더 통일: 랜딩(.nav/.navlinks/.navcta)과 동일한 룩 — 2026-08-12 ── */
header, .site-header { background-color: rgba(11, 11, 13, .86) !important; backdrop-filter: blur(10px); border-bottom: 1px solid var(--site-border) !important; }
/* 메뉴 링크 = 랜딩 .navlinks */
.nav-menu-link {
    font-size: 13px !important;
    letter-spacing: .06em !important;
    font-weight: 400 !important;
    color: var(--site-text-muted) !important;
}
.nav-menu-link:hover, .nav-menu-link.active { color: var(--site-text) !important; }
/* '방문 예약' 메뉴 = 랜딩 .navcta 골드 pill */
.nav-menu-link[href="/#visit"] {
    border: 1px solid var(--site-border) !important;
    padding: 8px 18px !important;
    border-radius: 100px !important;
    transition: .3s !important;
}
.nav-menu-link[href="/#visit"]:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #000 !important;
}
.nav-menu-link[href="/#visit"]::after { display: none !important; }
/* 타이틀 블록 슬림화 — 랜딩 브랜드 스케일에 맞춤 */
#page-main-title { font-size: 1.15rem !important; letter-spacing: .08em !important; }
#page-sub-title { font-size: .72rem !important; color: var(--site-text-muted) !important; letter-spacing: .14em !important; text-transform: uppercase; }
.site-logo { height: 2.4rem !important; }

/* ── 풋터: 메인 톤(다크)과 통일 — 2026-08-12 ── */
footer {
    background-color: #0b0b0d !important;
    border-top: 1px solid var(--site-border) !important;
    color: var(--site-text-muted) !important;
}
footer .text-white, footer .font-bold { color: var(--site-text) !important; }
footer a { color: var(--site-text-soft) !important; }
footer a:hover { color: var(--accent) !important; }
footer .border-gray-800, footer .border-t { border-color: var(--site-border) !important; }

/* ── 필터·카드 다크 재스킨 (마스터 모노빌드의 반투명 다크 + 포인트 활성 패턴, 골드 버전) — 2026-08-12 ── */
/* 텍스처: 카테고리 칩 */
.cat-chip {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    color: var(--site-text-muted) !important;
}
.cat-chip.active {
    background: rgba(200, 160, 106, .14) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 4px 14px rgba(200, 160, 106, .22) !important;
}
.cat-chip:not(.active):hover {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .22) !important;
    color: var(--site-text) !important;
}
/* 텍스처: 국내재고 체크 라벨 */
.stock-filter-label { color: var(--site-text-muted) !important; }
.stock-filter-label:hover { color: var(--site-text) !important; }
.stock-filter-label input { accent-color: var(--accent) !important; }
/* 텍스처: 카드 */
.texture-card {
    background: var(--site-surface) !important;
    border-color: rgba(255, 255, 255, .08) !important;
}
.texture-card:hover {
    border-color: rgba(200, 160, 106, .45) !important;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .55) !important;
}
/* 대외인증: 인증서 카드 */
.cert-card {
    background: var(--site-surface) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4) !important;
}
.cert-card:hover {
    border-color: rgba(200, 160, 106, .45) !important;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .6) !important;
}
.cert-card .cert-thumb { background: var(--site-surface-2) !important; border-bottom-color: rgba(255, 255, 255, .08) !important; }
.cert-card .cert-name { color: var(--site-text) !important; }
.cert-card .cert-type { color: var(--site-text-muted) !important; }

/* ── 프로젝트 상세: 본문(prose) 기본 글자를 밝은 회색톤으로 (색 미지정 콘텐츠 대비 확보) — 2026-08-12 ── */
.prose { color: #d9d6d0 !important; }
.prose p, .prose ul, .prose ol, .prose li { color: #cfccc5 !important; }
.prose h2 { color: var(--site-text) !important; border-bottom-color: rgba(255, 255, 255, .14) !important; }
.prose h3 { color: var(--site-text) !important; border-left-color: var(--accent) !important; }
.prose h4, .prose strong, .prose b { color: var(--site-text) !important; }
.prose blockquote { background: rgba(255, 255, 255, .04) !important; border-left-color: var(--accent) !important; color: var(--site-text-soft) !important; }
.prose a { color: var(--accent) !important; }
.prose a:hover { color: #d6b078 !important; }
.prose th { background: var(--site-surface-2) !important; color: var(--site-text) !important; }
.prose th, .prose td { border-color: rgba(255, 255, 255, .12) !important; }

/* ── 파랑 강조(primary #2563eb) → 사이트 강조색으로 통일 (강조선·해시태그·호버 테두리) ── */
.text-primary { color: var(--accent) !important; }
.bg-primary { background-color: var(--accent) !important; }
.bg-primary\/10 { background-color: color-mix(in srgb, var(--accent) 12%, transparent) !important; }
.border-primary\/20 { border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important; }
.hover\:border-primary:hover { border-color: var(--accent) !important; }
.text-blue-500 { color: var(--accent) !important; }

/* ── 대외인증: 강조 카드(검증된 품질) · 신문 기사 · CTA 다크 ── */
.cert-main-card { background: var(--site-surface) !important; border-color: rgba(255, 255, 255, .08) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .4) !important; }
.cert-main-card:hover { border-color: rgba(200, 160, 106, .45) !important; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .6) !important; }
.cert-main-card h3 { color: var(--site-text) !important; }
.cert-main-card p { color: var(--site-text-muted) !important; }
.cert-main-card .badge { background: var(--accent) !important; color: #151310 !important; }
.cert-main-card img { border-color: rgba(255, 255, 255, .1) !important; }
.cert-article { background: var(--site-surface) !important; border-left-color: var(--accent) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .4) !important; }
.cert-article:hover { background: var(--site-surface-2) !important; }
.cert-article p { color: var(--site-text-soft) !important; }
.cert-article .source { color: var(--site-text-muted) !important; }
.cert-cta { background: var(--site-surface) !important; border-color: rgba(255, 255, 255, .08) !important; color: var(--site-text) !important; }
.cert-cta p { color: var(--site-text-muted) !important; }

/* ── 프로젝트 상세: 워드/한글 붙여넣기 콘텐츠의 인라인 흰 배경·검정 글자 중화 — 2026-08-12 ──
   에디터에서 붙여넣은 본문에 background-color:#fff, color:#000 인라인 스타일이 섞여 들어와
   다크 테마에서 흰 박스/안 보이는 글자가 생기는 것을 페이지 배경에 맞게 강제 보정 */
.prose [style*="background-color"] , .prose [style*="background:"] { background-color: transparent !important; background-image: none !important; }
.prose [style*="color: rgb(0, 0, 0)"], .prose [style*="color:#000"], .prose [style*="color: #000"],
.prose [style*="color: black"], .prose [style*="color: windowtext"],
.prose [style*="color: rgb(31, 31, 31)"], .prose [style*="color: rgb(51, 51, 51)"], .prose [style*="color: rgb(34, 34, 34)"] {
    color: #cfccc5 !important;
}

/* 한국어 조판: 단어 중간 줄바꿈 금지 — 2026-08-12 */
body { word-break: keep-all; overflow-wrap: break-word; }