/* Footer 레이아웃을 유연하게 하고, 회사정보를 오른쪽으로 */
footer .footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

/* 회사 정보 블록을 오른쪽 끝으로 밀기 + 우측 정렬 */
footer .footer .company-info {
  margin-left: auto;     /* 핵심: 오른쪽으로 밀기 */
  text-align: right;     /* 텍스트도 오른쪽 정렬 */
  min-width: 280px;      /* 너무 좁아지지 않게 */
}

/* 카피라이트는 전체 너비 중앙 정렬 유지 */
footer .footer .copy {
  width: 100%;
  text-align: center;
  margin-top: 8px;
}

/* 모바일에서는 세로로 쌓고 좌측 정렬로 자연스럽게 */
@media (max-width: 640px) {
  footer .footer {
    display: block;
  }
  footer .footer .company-info {
    margin-left: 0;
    text-align: left;
    margin-top: 8px;
  }
}
/* === 제품 소개 페이지 스타일 === */
section[aria-label="제품소개"] h1 {
  margin-bottom: 8px;
}
section[aria-label="제품소개"] .lead {
  color: #475569;
  margin-bottom: 16px;
}

/* 필터 칩 */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}
.chip {
  border: 1px solid #dbeafe;
  background: #f0f7ff;
  color: #1d4ed8;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
}
.chip[aria-pressed="true"],
.chip:focus {
  outline: none;
  border-color: #93c5fd;
  background: #e6f0ff;
}

/* 카드 그리드 */
#productGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 960px) {
  #productGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #productGrid { grid-template-columns: 1fr; }
}

.product-card {
  border: 1px solid var(--border, #e5e7eb);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.product-card img {
  width: 100%;
  height: 200px;
  object-fit: container;
  background: #f8fafc;
}
.product-card .body {
  padding: 12px 14px;
}
.product-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}
.product-card p {
  margin: 0;
  color: #475569;
  font-size: 13px;
}
.product-card .tags {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.product-card .tag {
  font-size: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 4px 8px;
  background: #f8fafc;
}

/* 빈 상태 */
#productGrid .empty {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  text-align: center;
  color: #64748b;
  background: #f8fafc;
}
/* 상단 헤더(제품소개와 동일 톤) */
.site-header{ background:#fff; border-bottom:1px solid #eaeef2; }
.site-header .container{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:16px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#111; font-weight:700; }
.brand img{ height:28px; width:auto; display:block; }
.brand-text{ letter-spacing:-0.2px; }
.menu{ margin-left:auto; display:flex; gap:24px; }
.menu a{ color:#111; text-decoration:none; padding:8px 0; font-weight:600; }
.menu a[aria-current="page"]{ color:#5b47d8; }

/* 페이지 헤더(제목 + 탭) */
.page-hd{ max-width:1200px; margin:24px auto 12px; padding:0 16px; }
.page-hd h1{ margin:0 0 12px; font-size:28px; font-weight:800; letter-spacing:-.3px; }
.tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.tabs a{ padding:6px 12px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; color:#333; text-decoration:none; }
.tabs a.active{ background:#ece8ff; color:#4a2dbf; border-color:#e2ddff; }

/* 모바일 메뉴 토글 */
.burger{ margin-left:8px; width:40px; height:40px; background:transparent; border:0; display:none; }
.burger span{ display:block; height:2px; margin:6px 8px; background:#111; }
@media (max-width:900px){
  .menu{ display:none; position:absolute; right:16px; top:56px; background:#fff;
         border:1px solid #eee; border-radius:12px; padding:12px; flex-direction:column; gap:10px; }
  .menu.open{ display:flex; }
  .burger{ display:inline-block; }
}

/* 제품 소개 전용 컨테이너 */
.dm-products .wrap{
  max-width:1200px;
  margin-inline:auto;
  padding:24px 16px 48px;
}

/* 페이지 헤더(제목+탭) 간격 */
.page-hd{
  max-width:1200px;
  margin:24px auto 12px;
  padding:0 16px;
}

/* 카드 그리드(인라인 스타일 대체) */
.cards{ display:grid; gap:16px; }
@media (min-width: 960px){ .cards-4{ grid-template-columns:repeat(4, 1fr); } }
@media (max-width: 959.98px){ .cards-4{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 640px){ .cards-4{ grid-template-columns:1fr; } }

/* ===== 제품 페이지 컨테이너 공통 (두 페이지 동일) ===== */
.dm-products .wrap{
  max-width:1200px;
  margin:0 auto;
  padding:24px 16px 48px;   /* ← 상단 24px, 좌우 16px로 고정 */
}

.dm-products .wrap > .page-hd {
  margin:0 0 12px;
  padding:0 16px;   
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.dm-products .wrap > .page-hd h1{
  margin:0;                 /* ← h1의 기본 마진 제거 (가장 중요) */
  line-height:1.2;
  padding:0 16px;   
  font-size:28px;
  font-weight:800;
  letter-spacing:-.3px;
}

/* (선택) crumbs로 높이가 달라지지 않게 — 필요 시 둘 다 숨김 */
.dm-products .wrap .crumbs{ display:none; }

/* 카드 그리드가 위쪽 간격을 밀지 않게 보호 (혹시 모를 reset 충돌 대비) */
.dm-products .wrap .cards,
.dm-products .wrap #productGrid{ margin-top:0; }

/* 오른쪽 로고를 워터마크 톤으로 */
.about-aside { 
  /* 박스는 유지하고 싶으면 이 줄들은 생략 가능 */
  background: transparent;
  box-shadow: none;
  border-color: var(--border);
  display:flex;align-items:center;justify-content:center;
  min-height: 220px;
}

.about-logo{
  width: 500px;          /* 크기 조절은 여기서 */
  height: auto;
  object-fit: contain;

  /* 워터마크 핵심 */
  opacity: 0.5;          /* 0.06~0.15 사이로 취향 조절 */
  /* filter: grayscale(1);  회색조 */
  mix-blend-mode: multiply; /* 배경과 자연스럽게 섞이게 (배경색 있으면 생략해도 OK) */
  pointer-events: none;
  user-select: none;
  transition: none;
}

/* 다크 테마에서 조금 더 보이게 하고 싶다면 */
@media (prefers-color-scheme: dark){
  .about-logo{ opacity: .14; filter: grayscale(1) contrast(1.05); }
}

#main.section.dm-products {
  border-top: none !important;
  padding-top: 0 !important;
}

.dm-products .wrap > h1 {
  margin: 0 0 12px;
  padding:0 16px;   
  line-height: 1.2;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.dm-products .wrap > .cards,
.dm-products .wrap > #productGrid {
  margin-top: 0;
}

.product-card img {
  object-fit: cover;
}

/* === Unified Page Padding (forced) === */
:root {
  --page-gutter-x: 24px;
  --section-pad-y: 48px;
}

/* contact & products 공통 최상위 섹션을 강제 통일 */
main#main, main.section.container, .section.container, .container.section {
  padding-left: var(--page-gutter-x) !important;
  padding-right: var(--page-gutter-x) !important;
}

.section, section.section {
  padding-top: var(--section-pad-y) !important;
  padding-bottom: var(--section-pad-y) !important;
}

/* 내부 래퍼가 좌우 padding을 다시 주는 경우 무력화 */
main#main > .content,
main#main > .container,
.section > .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* products-page.css에서 여백을 추가로 주는 경우 방어막 */
.products .section, body.products .section,
.products .container, body.products .container {
  padding: initial !important;
}