@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@700&display=swap');   /* 분필체 */
/* ═══════════════════════════════════════════════════════════
   흑판 모달 공통 (board.css)
   — 견적문의(quote.html) · 오시는길(location.html) · 제품 상세보기(machine.css 가 불러옴)
   — 흑판 모양은 여기만 고치면 세 모달이 같이 바뀜
   — 쓰는 법: 모달 상자에 class="bd-box", 안쪽 요소에 아래 bd- 클래스
       bd-title  분필 제목          bd-line    분필 점선 밑줄
       bd-x      닫기 X             bd-panel   칠판 위 반투명 판
       bd-chalk  노란 분필 글씨      bd-btn-blue / bd-btn-yellow / bd-btn-ghost  버튼
   (안쪽 요소는 .bd-box 안에서만 적용 — 페이지 css 보다 우선)
   ═══════════════════════════════════════════════════════════ */

/* 흑판 틀 — 나무 테두리 흑판 그림 (분필 지운 사본) */
.bd-box { background: url('../img/blackboard-clean.png') center / 100% 100% no-repeat; border-radius: 6px;
  box-shadow: 0 24px 50px rgba(0,0,0,.45); color: #fff; }

/* 분필 제목 */
.bd-box .bd-title { font-family: 'Gaegu', cursive; font-weight: 700; color: #fff; letter-spacing: .5px; line-height: 1.1;
  text-shadow: 0 0 1px rgba(255,255,255,.7), 0 0 6px rgba(255,255,255,.2); }
/* 분필 점선 밑줄 */
.bd-box .bd-line { border-bottom: 2px dashed rgba(255,255,255,.55); }
/* 노란 분필 글씨 (소제목) */
.bd-box .bd-chalk { color: #ffe27a; }
/* 칠판 위 반투명 판 */
.bd-box .bd-panel { background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.3); border-radius: 12px; }

/* 닫기 X — 칠판에 묻히는 분필 동그라미 · 위치도 공통 (흑판 안쪽 오른쪽 위) */
.bd-box { position: relative; }
.bd-box .bd-x { position: absolute; top: 6.4%; right: 5.4%; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 1.5px solid rgba(255,255,255,.45);
  color: rgba(255,255,255,.85); font-size: 24px; line-height: 1; cursor: pointer; transition: background .15s, border-color .15s; }
.bd-box .bd-x:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

/* 버튼 — 메탈릭 블루 (접수·전화) */
.bd-box .bd-btn-blue { color: #fff; border: 0;
  background: linear-gradient(180deg, #5b8fd9 0%, #2c63b8 45%, #1d4c97 55%, #2a5fb0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 16px rgba(29,76,151,.4); text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.bd-box .bd-btn-blue:hover { background: linear-gradient(180deg, #6a9be0 0%, #3570c4 45%, #2456a3 55%, #326abc 100%); transform: translateY(-2px); }
/* 버튼 — 노란 분필 (견적문의) */
.bd-box .bd-btn-yellow { color: #1d2a44; border: 0; text-shadow: none;
  background: linear-gradient(180deg, #ffe98f 0%, #ffd84d 50%, #f5c83a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px rgba(0,0,0,.3); }
.bd-box .bd-btn-yellow:hover { background: linear-gradient(180deg, #fff0ad 0%, #ffe06a 50%, #f8cf4f 100%); transform: translateY(-2px); }
/* 버튼 — 반투명 (취소·닫기) */
.bd-box .bd-btn-ghost { color: #fff; border: 0; background: rgba(255,255,255,.15); box-shadow: none; }
.bd-box .bd-btn-ghost:hover { background: rgba(255,255,255,.25); }