/* ═══════════════════════════════════════════════════════════
   기계 페이지 공통 스타일 (machine.css)
   — m-*.html 9개 페이지가 같이 씀
   ═══════════════════════════════════════════════════════════ */
/* 기본 글꼴·색·드래그 막기는 공통 css/common.css */
@import url('board.css');   /* 흑판 모달 공통 (상세보기 모달이 씀) — 흑판 모양은 board.css 에서만 고침 */

/* 헤더는 공통 파일 css/header.css (높이 --hd 도 거기서 정함) */

/* 배경 — 히어로(공장 사진)는 홈에서만, 기계 페이지는 단색 */
.page { position: relative; height: 100vh; overflow: hidden; background: var(--bg); }   /* 바탕색은 common.css */

/* 헤더 아래 한 화면을 흑판 18개(6 x 3)가 꽉 채움 */
.wrap { position: absolute; z-index: 1; top: var(--hd); left: 0; right: 0; bottom: 0; padding: 6px; }
.title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* 제목은 화면에 안 보이게 (검색용으로만 남김) */
.grid { width: 100%; height: 100%; display: grid;
  grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; }
/* 사진만 깔끔하게 (흑판 프레임 없음) */
.slot { position: relative; border: 1px solid #c3cbd3; border-radius: 12px;
  background: linear-gradient(180deg, #e3e7eb 0%, #d4dae0 100%);   /* 사진 배경 톤 다운 (흰색 → 연회색) */
  overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.slot:hover { border-color: #0b1f4b; box-shadow: 0 6px 16px rgba(11,31,75,.12); }
.slot img { position: absolute; left: 4%; top: 4%; width: 92%; height: 92%;
  object-fit: contain; cursor: pointer; display: block; transition: transform .25s;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.12)); }
.slot img:hover { transform: scale(1.06); }
/* 상세보기 사각 뱃지 */
.badge { position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 15px; font-weight: 800; color: #0b1f4b; letter-spacing: -.3px;
  padding: 6px 12px; border: 1.5px solid #0b1f4b; border-radius: 4px; background: rgba(255,255,255,.92);
  cursor: pointer; transition: background .2s, color .2s; }
.badge:hover { background: #0b1f4b; color: #fff; }

/* ═══ 찜하기 하트 (사진 위 오른쪽 · 모달) ═══ */
.heart { position: absolute; top: 8px; right: 8px; z-index: 2; width: 40px; height: 40px; padding: 8px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.92); cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.12); transition: transform .15s; }
.heart svg { display: block; width: 100%; height: 100%; fill: none; stroke: #0b1f4b; stroke-width: 2; transition: fill .15s, stroke .15s; }
.heart:hover { transform: scale(1.1); }
.heart.on svg { fill: #e2453c; stroke: #e2453c; }
.heart.on { animation: heartPop .3s; }@keyframes heartPop { 50% { transform: scale(1.25); } }

/* 헤더 찜 목록 버튼 */
.like-btn { position: relative; display: flex; align-items: center; gap: 6px; flex-shrink: 0; height: 40px; padding: 0 14px 0 12px;
  border: 1.5px solid rgba(255,255,255,.5); border-radius: 20px; background: transparent; color: #fff;
  font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: background .2s; }
.like-btn:hover { background: rgba(255,255,255,.12); }
.like-btn svg { width: 20px; height: 20px; fill: #e2453c; stroke: #e2453c; stroke-width: 2; }
.like-count { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: #e2453c; color: #fff; font-size: 15px; line-height: 22px; text-align: center; }

/* 상세보기 모달 */
.md { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center;
  background: rgba(10,14,22,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 20px; }
.md.on { display: flex; }
.md-box { position: relative; width: min(1100px, 96vw); max-height: 90vh; display: grid; grid-template-columns: 1.4fr 1fr; }   /* 흑판 모양은 board.css (bd-box) */
.md-x { position: absolute; top: 12px; right: 14px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #eef1f4; color: #0b1f4b; font-size: 26px; line-height: 1; cursor: pointer; }
.md-x:hover { background: #0b1f4b; color: #fff; }
.md-photo { position: relative; background: #f3f5f7; display: flex; align-items: center; justify-content: center;
  padding: 28px; min-height: 520px; }
.md-photo img { max-width: 100%; max-height: 70vh; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.14)); }
.md-info { padding: 34px 30px 30px; overflow-y: auto; }
.md-top { display: flex; align-items: center; gap: 12px; margin: 6px 50px 22px 0; }
.md-name { flex: 1; font-size: 26px; font-weight: 800; color: #0b1f4b; letter-spacing: -.5px; }
.md-heart { position: static; flex-shrink: 0; width: 44px; height: 44px; padding: 9px; background: #f1f3f6; box-shadow: none; }
.md-name.empty { color: #9aa5b1; }
.md-cap { font-size: 16px; font-weight: 700; color: #0b1f4b; padding-bottom: 8px; border-bottom: 2px solid #0b1f4b; }
.md-spec { width: 100%; border-collapse: collapse; font-size: 16px; }
.md-spec th, .md-spec td { padding: 13px 10px; border-bottom: 1px solid #e3e7ec; text-align: left; }
.md-spec th { width: 38%; background: #f6f8fa; color: #4a5768; font-weight: 600; }
.md-spec td { color: #1f2a37; white-space: nowrap; }   /* 값은 한 줄로 */
.md-spec th small { display: block; margin-top: 2px; font-size: 15px; font-weight: 500; color: #7a8796; white-space: nowrap; }
.md-spec tr.ph th, .md-spec tr.ph td { color: #b3bcc6; }   /* 제원 입력 전 빈 줄 */
/* 전화상담 버튼 */
.md-call { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px;
  height: 56px; border-radius: 10px; background: #0b1f4b; color: #fff; font-size: 18px; font-weight: 800;
  box-shadow: 0 6px 16px rgba(11,31,75,.25); transition: background .2s, transform .2s; }
.md-call:hover { background: #16306b; transform: translateY(-2px); }
.md-call em { font-style: normal; font-size: 16px; font-weight: 600; opacity: .8; }

/* ═══ 찜 목록 모달 ═══ */
.lk-box { position: relative; width: min(560px, 94vw); max-height: 84vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.3); padding: 28px 26px 22px; }
.lk-title { font-size: 24px; font-weight: 800; color: #0b1f4b; padding-bottom: 12px; border-bottom: 2px solid #0b1f4b; margin-right: 50px; }
.lk-list { overflow-y: auto; margin-top: 6px; }
.lk-item { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid #e3e7ec; }
.lk-item img { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; background: #f3f5f7; border-radius: 10px; padding: 6px; }
.lk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lk-txt b { font-size: 17px; color: #1f2a37; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-txt span { font-size: 15px; color: #7a8796; }
.lk-go { flex-shrink: 0; font-size: 15px; font-weight: 700; color: #0b1f4b; padding: 8px 12px;
  border: 1.5px solid #0b1f4b; border-radius: 6px; transition: background .2s, color .2s; }
.lk-go:hover { background: #0b1f4b; color: #fff; }
.lk-del { flex-shrink: 0; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f1f3f6;
  color: #7a8796; font-size: 22px; line-height: 1; cursor: pointer; }
.lk-del:hover { background: #e2453c; color: #fff; }
.lk-none { text-align: center; color: #7a8796; font-size: 16px; line-height: 1.7; padding: 50px 0; }

/* ═══════════════════════════════════════════════════════════
   상세보기 모달 — 흑판 (모양은 공통 css/board.css, 여기는 배치·표·버튼 줄만)
   (위 기본 모양을 덮어씀)
   ═══════════════════════════════════════════════════════════ */
.md-box { width: min(1160px, 96vw); gap: 26px; padding: 3.4% 4.4% 3.8%; }
/* 닫기 X — 모양·위치 모두 board.css (bd-x) */
/* 사진 — 칠판에 붙인 사진 카드 */
.md-photo { min-height: 470px; padding: 22px; border-radius: 10px; background: #f3f5f7;
  box-shadow: 0 8px 18px rgba(0,0,0,.4); }
.md-photo img { max-height: 62vh; }
/* 오른쪽 — 분필 글씨 */
.md-info { padding: 6px 4px 4px; }
.md-top { margin: 4px 56px 18px 0; }
.md-name { font-size: 32px; word-break: keep-all; }   /* 분필체는 board.css (bd-title) */
.md-name.empty { color: rgba(255,255,255,.5); }
.md-heart { background: rgba(255,255,255,.12); }
.md-heart svg { stroke: #fff; }
.md-heart.on svg { stroke: #e2453c; }
/* 제원 소제목 — 노란 분필 + 점선 밑줄 (board.css bd-chalk · bd-line) */
.md-spec th, .md-spec td { border-bottom: 1px dashed rgba(255,255,255,.25); }
.md-spec th { background: transparent; color: rgba(255,255,255,.65); }   /* 항목 칸 회색 바탕 없음 — 글자색으로만 구분 */
.md-spec td { color: #fff; }
.md-spec th small { color: rgba(255,255,255,.5); }
.md-spec tr.ph th, .md-spec tr.ph td { color: rgba(255,255,255,.35); }
/* 견적문의(노랑 bd-btn-yellow) · 전화상담(메탈릭 블루 bd-btn-blue) 두 버튼 나란히 — 색은 board.css */
.md-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 12px; }
.md-btns .md-call { margin-top: 0; padding: 0 10px; white-space: nowrap; }
.md-photo { cursor: zoom-in; }

/* 제품 크게보기 · 매뉴얼 · 사양서 버튼 (분필 테두리) */
.md-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.md-act { display: flex; align-items: center; justify-content: center; gap: 6px; height: 48px; padding: 0 8px;
  border: 1.5px solid rgba(255,255,255,.55); border-radius: 10px; background: rgba(255,255,255,.06);
  font-family: inherit; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.md-act:hover { background: rgba(255,255,255,.15); border-color: #fff; }
.md-act svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: #ffe27a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.md-act small { font-size: 15px; font-weight: 800; color: #ffe27a; }
/* PDF 아직 없음 (어드민에서 링크 넣기 전) — 점선 테두리, 눌러도 아무 일 없음 */
.md-act { position: relative; }
.md-act.off { border-style: dashed; color: rgba(255,255,255,.65); cursor: default; }
.md-act.off small { color: rgba(255,226,122,.6); }

/* 크게보기 화면 */
.zm { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center;
  background: rgba(8,10,16,.92); }
.zm.on { display: flex; }
.zm .md-x { position: absolute; top: 20px; right: 24px; z-index: 2; width: 52px; height: 52px; background: rgba(255,255,255,.92); }
.zm-in { width: 92vw; height: 86vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.zm-in img { height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: 10px; background: #f3f5f7; padding: 20px;
  cursor: grab; touch-action: none; transform-origin: center; transition: transform .05s; }
.zm-tip { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); padding: 6px 16px; border-radius: 999px;
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); font-size: 15px; }

@media (max-width: 768px) {
  .md-box { padding: 26px 22px 30px; }
  .md-photo { transform: none; }
  .md-box { grid-template-columns: 1fr; overflow-y: auto; }
  .md-photo { min-height: 260px; }
}