@charset "utf-8";
/* DF TECH — 본문(문서) 스타일
 *
 * 원본의 style_product.css / style_company.css / style_gallery.css /
 * style_contact.css 를 하나로 합친 것이다. 본문 마크업의 클래스 이름은
 * 그대로 두었으므로 원본 HTML 이 손대지 않고 그대로 들어온다.
 *
 * 원본에서 고친 것
 *  1) 전역 리셋 제거 — 원본은 body/`*` 를 다시 정의해 테마와 충돌했다.
 *     여기서는 전부 .doc 아래로 스코프를 한정한다.
 *  2) 색 통일 — 원본은 페이지마다 팔레트가 달랐다
 *     (제품 #1e3a8a·#2563eb / 회사 #3498db·#2c3e50 / 연락처 #1a365d).
 *     전부 브랜드색 --navy(#002188) 계열로 맞췄다.
 *  3) 정의되지 않은 변수 수정 — style_gallery.css 는 --max/--line/--muted 를,
 *     style_company.css 는 --df-secondary/--df-dark 를 정의 없이 참조하고 있었다.
 *  4) 외부 CDN 폰트(NanumSquare, 구글 Noto Sans KR) import 제거.
 *     본문 서체는 사이트 공통 폰트를 그대로 쓴다.
 */

.doc { color: var(--body); }

/* 본문 안쪽에 다시 나타나는 .container (원본 마크업이 쓰던 것)는
   바깥 .page-inner 가 이미 좌우 여백을 갖고 있으므로 폭만 채운다.
   ※ 예전에는 이 규칙이 페이지 최상위 래퍼에도 걸려 좌우 여백이 0이 됐고,
      모바일에서 글자가 화면 가장자리에 붙었다. 래퍼를 .page-inner 로 분리해 해결했다. */
.doc .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0; }

/* ── 문서 상단 (제품·게시판 공통) ─────────────────────────── */
.doc .product__hero { clear: both; padding: 0 0 40px; border-bottom: 1px solid var(--line); }
.doc .product__eyebrow {
  margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--navy);
}
.doc .product__title { margin: 0 0 12px; font-size: clamp(28px, 3vw, 40px); font-weight: 800; }
.doc .product__subtitle { margin: 14px 0 0; max-width: 900px; color: var(--body); font-size: 16px; }

.doc .product__badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.doc .badge {
  padding: 8px 15px; border-radius: 999px; font-size: 13px;
  background: var(--navy-100); border: 1px solid #d3daf3; color: var(--navy);
}

/* ── 상단 이미지 그리드 ──────────────────────────────────── */
.doc .hero-gallery { margin-top: 26px; }
.doc .hero-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.doc .hero-gallery__item {
  margin: 0; overflow: hidden; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}
.doc .hero-gallery__item img { display: block; width: 100%; height: 300px; object-fit: cover; }
.doc .hero-gallery__note { margin: 12px 0 0; font-size: 13px; color: var(--muted); }

/* ── 본문 섹션 ──────────────────────────────────────────── */
.doc .product__body { padding: 46px 0 0; }
.doc .section { padding: 40px 0; }
.doc .section + .section { border-top: 1px solid var(--line); }
.doc .section__head { display: grid; gap: 10px; margin-bottom: 20px; }
.doc .section__title { margin: 0; font-size: 22px; font-weight: 700; }
.doc .section__desc { margin: 0; max-width: 1100px; color: var(--body); }
.doc .section--accent {
  padding: 30px; background: var(--wash);
  border: 1px solid var(--line); border-radius: 14px;
}

.doc .grid { display: grid; gap: 22px; }
.doc .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.doc .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.doc .card {
  padding: 22px; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}
.doc .card__title { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.doc .card__text { margin: 0; font-size: 14px; color: var(--body); }

.doc .pill-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.doc .pill {
  padding: 9px 15px; border-radius: 999px; font-size: 13px;
  background: var(--wash); border: 1px solid var(--line); color: var(--ink);
}

.doc .checklist { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.doc .checklist li {
  position: relative; padding: 12px 14px 12px 40px; font-size: 14px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.doc .checklist li::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 6px; height: 11px;
  margin-top: -7px; border: solid var(--navy); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.doc .product__footer { padding: 34px 0 0; margin-top: 20px; border-top: 1px solid var(--line); }
.doc .footnote { margin: 0; font-size: 13px; color: var(--muted); }

/* ── 회사 소개 계열 (df-*) ─────────────────────────────────── */
.doc .df-company-wrapper { line-height: 1.75; color: var(--body); word-break: keep-all; }
.doc .df-container { max-width: 1100px; margin: 0 auto; padding: 0 0 40px; }

.doc .df-section-title { margin-bottom: 46px; text-align: center; }
.doc .df-main-title {
  position: relative; margin: 0; padding-bottom: 18px;
  font-size: clamp(26px, 3vw, 38px); font-weight: 800; color: var(--ink);
}
.doc .df-main-title::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 60px; height: 4px; background: var(--navy);
}
.doc .df-sub-title { margin-top: 15px; font-size: 1.15rem; font-weight: 300; color: var(--muted); }
.doc .df-intro-desc { max-width: 900px; margin: 0 auto 54px; text-align: center; font-size: 1.1rem; }

.doc .df-intro-grid,
.doc .df-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 30px; }
.doc .df-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 36px; }

.doc .df-intro-card,
.doc .df-card {
  padding: 36px 30px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05); transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.doc .df-intro-card:hover,
.doc .df-card:hover { transform: translateY(-6px); border-color: var(--navy); }
.doc .df-card-title,
.doc .df-highlight-title { margin: 0 0 15px; font-size: 1.35rem; font-weight: 700; color: var(--navy); }
.doc .df-card-text,
.doc .df-desc-text { margin: 0; font-size: 1rem; color: var(--body); }

.doc .df-competency-dark,
.doc .df-bg-dark {
  padding: 46px 30px; margin: 40px 0; border-radius: 12px;
  background: var(--dark); color: #fff;
}
.doc .df-comp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 36px; }
.doc .df-comp-item { padding: 10px; text-align: center; }
.doc .df-comp-label {
  display: block; margin-bottom: 14px; font-size: 1.2rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: #8fa6ff;
}
.doc .df-comp-desc { margin: 0; font-size: .95rem; font-weight: 300; color: rgba(255, 255, 255, .9); }

.doc .df-flex-center,
.doc .df-vm-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 46px; }
.doc .df-info-box,
.doc .df-vm-box {
  flex: 1; min-width: 300px; max-width: 520px; padding: 46px 30px;
  background: var(--wash); border-radius: 10px; text-align: center;
}
.doc .df-vm-title { margin-bottom: 18px; font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.doc .df-vm-text { margin: 0; font-size: 1.08rem; color: var(--body); }

.doc .df-check-list { margin: 0; padding: 0; list-style: none; }
.doc .df-check-list li { position: relative; margin-bottom: 10px; padding-left: 26px; color: var(--ink); }
.doc .df-check-list li::before {
  content: ""; position: absolute; left: 4px; top: .62em; width: 6px; height: 11px;
  margin-top: -7px; border: solid var(--navy); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* 두 장 나란히. 사진·도면·오려낸 컷이 섞여 있어 잘라내지 않고(contain)
   높이만 맞춘다. 원본 비율이 제각각이라 그냥 두면 아래가 크게 들쭉날쭉해진다. */
.doc .dual-image { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.doc .dual-image img {
  display: block; width: 100%; height: 380px; object-fit: contain;
  padding: 8px; background: var(--wash); border-radius: 10px;
}
@media (max-width: 767px) { .doc .dual-image img { height: 260px; } }

/* 사진 여러 장을 같은 크기로 나란히 놓을 때. 원본 비율이 제각각이라
   높이를 고정하고 cover 로 맞춘다(그렇지 않으면 아래가 들쭉날쭉해진다). */
.doc .photo-grid { display: grid; gap: 20px; margin-top: 18px; }
.doc .photo-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.doc .photo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.doc .photo-grid figure { margin: 0; }
.doc .photo-grid img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 10px; background: var(--wash);
}
.doc .photo-grid figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* 흰 배경으로 오려낸 제품 컷. 꽉 채우면 너무 커서 폭을 제한한다. */
.doc .cutout { margin: 22px 0 0; text-align: center; }
.doc .cutout img { max-width: 640px; width: 100%; height: auto; }
.doc .cutout figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }

@media (max-width: 767px) {
  .doc .photo-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 연락처 ────────────────────────────────────────────── */
.doc .contact-container { max-width: 1200px; margin: 0 auto; }
.doc .contact-header { margin-bottom: 46px; text-align: center; }
.doc .contact-header h1 { margin: 0 0 10px; font-size: clamp(26px, 3vw, 36px); font-weight: 800; color: var(--navy); }
.doc .contact-header p { font-size: 17px; color: var(--muted); }
.doc .contact-content { display: flex; flex-wrap: wrap; gap: 36px; }
.doc .contact-info {
  flex: 1 1 380px; padding: 30px; background: var(--wash);
  border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, .05);
}
.doc .contact-info h2 {
  margin-bottom: 20px; padding-bottom: 10px; font-size: 22px;
  border-bottom: 2px solid var(--navy);
}
.doc .contact-info ul { margin: 0; padding: 0; list-style: none; }
.doc .contact-info li { display: flex; gap: 12px; margin-bottom: 14px; font-size: 16px; line-height: 1.8; }
.doc .contact-info li strong { flex: none; width: 74px; color: var(--navy); }
.doc .contact-info a:hover { color: var(--navy); text-decoration: underline; }
.doc .contact-map { flex: 2 1 420px; }
.doc .contact-map img { width: 100%; border-radius: 10px; }

.doc .map-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.doc .map-links a {
  padding: 11px 20px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: #fff;
}
.doc .map-links a:hover { border-color: var(--navy); color: var(--navy); }

/* ── 게시판을 펼친 목록 (Shot Accessory / Service) ─────────── */
.doc .doc-list { display: grid; gap: 40px; margin-top: 44px; }
.doc .doc-item { padding-top: 40px; border-top: 1px solid var(--line); }
.doc .doc-item:first-child { padding-top: 0; border-top: 0; }
.doc .doc-item > h2 {
  margin: 0 0 18px; font-size: 24px; font-weight: 700;
  padding-left: 14px; border-left: 4px solid var(--navy);
}
.doc .doc-item h4 { margin: 0 0 12px; font-size: 19px; }
.doc .doc-item img { border-radius: 10px; }

.doc .download-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  margin-top: 20px; padding: 22px 24px;
  background: var(--wash); border: 1px solid var(--line); border-radius: 12px;
}
.doc .download-card__icon { flex: none; width: 42px; height: 42px; color: var(--navy); }
.doc .download-card__meta { flex: 1 1 240px; }
.doc .download-card__name { font-weight: 700; color: var(--ink); }
.doc .download-card__size { font-size: 13px; color: var(--muted); }

/* ── 본문 안의 일반 요소 ─────────────────────────────────── */
.doc h2, .doc h3, .doc h4 { word-break: keep-all; }

/* 회사 소개 계열 본문은 소제목을 <h4> 로 쓴다. 브라우저 기본값(약 16px)으로
   두면 본문과 구분이 안 될 만큼 작아 보인다. 제품 페이지의 .section__title(22px)에
   맞춰 크기를 준다. 원본 style_company.css 에도 h4 { font-size:21px } 이 있었는데
   CSS 를 통합하면서 빠졌던 것을 되살린 것이다. */
.doc h4:not([class]) {
  margin: 34px 0 12px; font-size: 22px; font-weight: 700; color: var(--ink);
}
.doc .product__hero + .product__body > h4:not([class]):first-child,
.doc h4:not([class]):first-child { margin-top: 0; }
@media (max-width: 767px) { .doc h4:not([class]) { font-size: 19px; margin-top: 28px; } }
.doc img { border-radius: 6px; }
.doc table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.doc th, .doc td { padding: 12px 14px; border: 1px solid var(--line); text-align: left; }
.doc th { background: var(--wash); font-weight: 700; color: var(--ink); }

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .doc .hero-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc .hero-gallery__item img { height: 280px; }
  .doc .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  /* 원본 본문에 align="justify" 가 붙은 문단이 있는데, 폭이 좁아지면
     한글 어절 사이가 크게 벌어져 오히려 읽기 나쁘다. 모바일에서는 왼쪽 정렬. */
  .doc [align="justify"], .doc [style*="justify"] { text-align: left !important; }
  .doc .hero-gallery__grid { grid-template-columns: 1fr; }
  .doc .hero-gallery__item img { height: 240px; }
  .doc .grid--2, .doc .grid--3, .doc .df-grid-2 { grid-template-columns: 1fr; }
  .doc .dual-image { grid-template-columns: 1fr; }
  .doc .section { padding: 30px 0; }
  .doc .product__body { padding-top: 32px; }
  .doc .df-competency-dark, .doc .df-bg-dark { padding: 32px 20px; }
  .doc .contact-info li { flex-direction: column; gap: 2px; }
  .doc .contact-info li strong { width: auto; }
}