/* ================================================================
 * community.css - 게시판/지원 페이지
 *   테이블, 페이지네이션, 문의폼, 제품소개 서브, 사업소개, 통계
 * Homepage CSS Module
 * ================================================================ */

/* ── 사업소개 서브페이지 ──────────────────────── */
.biz-page-wrap {
  max-width: 1200px;
  margin: 0 auto;
}
.biz-slides {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.biz-slide-img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  border: 1px solid var(--surface-line);
}
/* ── 사업소개 텍스트 섹션 (슬라이드 대체) ──────── */
.biz-text-section {
  background: var(--surface-card);
  border: 1px solid var(--surface-line);
  border-radius: 16px;
  padding: 48px 52px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
  font-family: 'Pretendard', sans-serif;
}
.biz-text-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--surface-text);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.biz-text-title .highlight {
  color: #ef4444;
}
.biz-text-badge {
  display: inline-block;
  background: linear-gradient(135deg, #0ea5e9, #06b6d4);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 10px 28px;
  border-radius: 28px;
  margin-bottom: 28px;
  letter-spacing: 0.02em;
}
.biz-text-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.biz-text-list li {
  position: relative;
  padding-left: 20px;
  font-size: 1.05rem;
  color: var(--subtle);
  line-height: 1.9;
  font-weight: 500;
}
.biz-text-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #0ea5e9;
  font-weight: 700;
}
.biz-text-list li strong {
  color: var(--surface-text);
  font-weight: 700;
}

/* ── GPU 클라우드 히어로 섹션 ────────────────── */
.gpu-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 56px;
  font-family: 'Pretendard', sans-serif;
}
.gpu-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15,23,42,0.92) 0%, rgba(30,41,59,0.85) 50%, rgba(37,99,235,0.7) 100%);
  z-index: 1;
}
.gpu-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 60px 32px;
  max-width: 800px;
}
.gpu-hero-badge {
  display: inline-block;
  background: rgba(14,165,233,0.2);
  border: 1px solid rgba(14,165,233,0.4);
  color: #7dd3fc;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 20px;
  border-radius: 24px;
  margin-bottom: 20px;
  letter-spacing: 0.04em;
}
.gpu-hero h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.gpu-hero h2 .accent {
  color: #38bdf8;
}
.gpu-hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  margin-bottom: 36px;
}
.gpu-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.gpu-stat-item {
  text-align: center;
}
.gpu-stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: #38bdf8;
  line-height: 1;
  margin-bottom: 6px;
}
.gpu-stat-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}

/* ── GPU 핵심 가치 카드 ─────────────────────── */
.gpu-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
  font-family: 'Pretendard', sans-serif;
}
.gpu-feature-card {
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border: 1px solid rgba(56,189,248,0.15);
  border-radius: 16px;
  padding: 36px 28px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.gpu-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(14,165,233,0.15);
  border-color: rgba(56,189,248,0.35);
}
.gpu-feature-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(14,165,233,0.12);
}
.gpu-feature-icon svg {
  width: 28px;
  height: 28px;
  stroke: #38bdf8;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gpu-feature-card h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 12px;
}
.gpu-feature-card p {
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.7;
}

/* ── GPU 클라우드 비교표 ──────────────────────── */
.biz-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--surface-line);
  font-family: 'Pretendard', sans-serif;
}
.biz-compare-table thead th {
  padding: 18px 24px;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
}
.biz-compare-table thead th:first-child {
  width: 100px;
  background: #f8fafc;
}
.biz-compare-table thead th.col-legacy {
  background: #1e293b;
  color: #fff;
}
.biz-compare-table thead th.col-gpu {
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  color: #fff;
  box-shadow: inset 0 -3px 12px rgba(56,189,248,0.2);
}
.biz-compare-table tbody td {
  padding: 24px;
  vertical-align: middle;
  border-top: 1px solid var(--surface-line);
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--subtle);
  text-align: center;
}
.biz-compare-table tbody td:first-child {
  background: #f1f5f9;
  font-weight: 700;
  color: #1e293b;
  font-size: 1.05rem;
  width: 100px;
}
.biz-compare-table tbody td:nth-child(2) {
  background: #f8fafc;
}
.biz-compare-table tbody td:nth-child(3) {
  background: linear-gradient(180deg, #eff6ff 0%, #e0f2fe 100%);
  position: relative;
}
.biz-compare-table .gpu-highlight {
  color: #2563eb;
  font-weight: 600;
}
.biz-compare-table .gpu-label {
  color: #ea580c;
  font-weight: 700;
}

/* ── GPU 클라우드 제품 소개 ───────────────────── */
.gpu-product-section {
  font-family: 'Pretendard', sans-serif;
}
.gpu-product-section .section-heading {
  text-align: center;
  margin-bottom: 40px;
}
.gpu-product-section .section-heading h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--surface-text);
  margin-bottom: 12px;
}
.gpu-product-section .section-heading p {
  font-size: 1rem;
  color: var(--surface-muted);
}
.biz-product-intro {
  font-family: 'Pretendard', sans-serif;
}
.biz-product-intro .biz-text-list {
  margin-bottom: 40px;
}
.biz-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.biz-product-card {
  position: relative;
  background: var(--surface-card);
  border-radius: 16px;
  padding: 36px 32px;
  text-align: center;
  border: 1px solid transparent;
  background-image: linear-gradient(var(--surface-card), var(--surface-card)), linear-gradient(135deg, #2563eb, #0ea5e9, #2563eb);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: transform 0.3s, box-shadow 0.3s;
}
.biz-product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(37,99,235,0.12);
}
.biz-product-card-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #eff6ff, #e0f2fe);
}
.biz-product-card-icon svg {
  width: 26px;
  height: 26px;
  stroke: #2563eb;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.biz-product-card h4 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--surface-text);
  margin-bottom: 20px;
}
.biz-product-card img.biz-product-card-img {
  width: calc(100% + 64px);
  max-width: none;
  margin: -36px -32px 24px;
  border-radius: 16px 16px 0 0;
  object-fit: cover;
  height: 280px;
}
/* GPU 제품 카드 테마 */
.gpu-product-cards .biz-product-card {
  overflow: hidden;
}
.gpu-product-cards .biz-product-card:first-child {
  background-image: linear-gradient(var(--surface-card), var(--surface-card)), linear-gradient(135deg, #7c3aed, #a78bfa, #7c3aed);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.gpu-product-cards .biz-product-card:first-child:hover {
  box-shadow: 0 12px 36px rgba(124,58,237,0.18);
}
.gpu-product-cards .biz-product-card:first-child h4 {
  color: #7c3aed;
}
.gpu-product-cards .biz-product-card:first-child ul li::before {
  background: #7c3aed;
}
.gpu-product-cards .biz-product-card:last-child {
  background-image: linear-gradient(var(--surface-card), var(--surface-card)), linear-gradient(135deg, #2563eb, #60a5fa, #2563eb);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.gpu-product-cards .biz-product-card:last-child:hover {
  box-shadow: 0 12px 36px rgba(37,99,235,0.18);
}
.gpu-product-cards .biz-product-card:last-child h4 {
  color: #2563eb;
}
.gpu-product-cards .biz-product-card:last-child ul li::before {
  background: #2563eb;
}
.biz-product-card img {
  width: 100%;
  max-width: 360px;
  border-radius: 12px;
  margin-bottom: 20px;
}
.biz-product-card ul {
  list-style: none;
  padding: 0;
  display: table;
  margin: 0 auto;
  text-align: left;
}
.biz-product-card ul li {
  position: relative;
  padding-left: 18px;
  font-size: 0.95rem;
  color: var(--subtle);
  line-height: 1.8;
}
.biz-product-card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0ea5e9;
}

/* ── PPT 다이어그램 재현 (공통) ──────────────── */
.ppt { font-family: 'Pretendard', sans-serif; }
.ppt-2col { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; }
.ppt-3col { display: grid; grid-template-columns: 5fr 4fr 5fr; gap: 20px; align-items: start; }
.ppt-hc  { display: grid; grid-template-columns: 2fr auto 3fr; gap: 16px; align-items: start; }
.ppt-bar {
  background: #1e3a5f; color: #fff; font-size: 0.88rem; font-weight: 700;
  padding: 8px 14px; border-radius: 6px; text-align: center; margin-bottom: 10px;
}
.ppt-bar.blue { background: #2563eb; }
.ppt-bar.teal { background: #0d9488; }
.ppt-box {
  background: #f0f7ff; border: 1px solid #c7daf5; border-radius: 10px;
  padding: 16px 18px; margin-bottom: 12px; font-size: 0.88rem; color: #334155; line-height: 1.65;
}
.ppt-box:last-child { margin-bottom: 0; }
.ppt-box-title {
  font-size: 0.9rem; font-weight: 700; color: #1e3a5f; margin-bottom: 6px;
  border-bottom: 1px solid #bdd4f0; padding-bottom: 6px;
}
.ppt-arrow { color: #2563eb; font-weight: 700; margin: 0 4px; }
.ppt-arrow-col {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 40px; font-size: 2rem; color: #93c5fd; padding: 0 8px;
}
.ppt-photo { border-radius: 10px; overflow: hidden; border: 1px solid var(--surface-line); background: var(--surface-alt); }
.ppt-photo img { width: 100%; height: auto; display: block; object-fit: contain; }
.ppt-flow-img { width: 100%; height: auto; display: block; border-radius: 6px; }
.ppt-label {
  font-size: 0.88rem; font-weight: 700; color: #fff;
  background: #1e3a5f; padding: 8px 12px; text-align: center;
}
.ppt-flow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  font-size: 0.82rem; color: #334155; padding: 8px 0;
}
.ppt-flow .node {
  background: #dbeafe; padding: 4px 10px; border-radius: 5px; font-weight: 600;
}
.ppt-branch {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.ppt-branch span {
  background: #dbeafe; padding: 3px 10px; border-radius: 5px;
  font-size: 0.78rem; color: #1e40af; font-weight: 600;
}
/* IoT 설비/장비/센서 rows */
.ppt-iot-row {
  display: flex; gap: 10px; margin-bottom: 12px; align-items: stretch;
}
.ppt-iot-row:last-child { margin-bottom: 0; }
.ppt-iot-bar {
  background: #1e3a5f; color: #fff; font-size: 0.82rem; font-weight: 700;
  padding: 10px 6px; border-radius: 8px; writing-mode: vertical-rl;
  text-orientation: mixed; display: flex; align-items: center; justify-content: center;
  min-width: 32px; letter-spacing: 0.12em;
}
.ppt-iot-content {
  flex: 1; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 14px;
}
.ppt-iot-content h5 { font-size: 0.88rem; font-weight: 700; color: #0ea5e9; margin-bottom: 4px; }
.ppt-iot-content li { font-size: 0.82rem; color: #475569; line-height: 1.55; list-style: disc inside; }
.ppt-iot-content .note { font-size: 0.75rem; color: #94a3b8; margin-top: 4px; }
/* IoT 아이콘 */
.ppt-iot-icon {
  display: flex; align-items: center; justify-content: center;
  min-width: 70px; max-width: 80px; padding: 4px;
}
.ppt-iot-icon img { width: 100%; height: auto; object-fit: contain; }
/* IoT 안테나 (가운데 컬럼) */
.ppt-iot-antenna {
  width: 80px; margin: 0 auto;
}
.ppt-iot-antenna img { width: 100%; height: auto; display: block; }
/* IoT 관제 인프라 (오른쪽 컬럼) */
.ppt-iot-infra {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 6px 0 10px; padding: 8px;
  background: var(--surface-alt); border-radius: 8px;
}
.ppt-iot-infra img { height: 60px; width: auto; object-fit: contain; }
.ppt-iot-infra span { font-size: 0.78rem; color: var(--surface-muted); line-height: 1.45; }
/* 통신방식 */
.ppt-comm {
  background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 10px;
  padding: 14px; text-align: left;
}
.ppt-comm li { font-size: 0.82rem; color: #334155; line-height: 1.55; list-style: disc inside; }
.ppt-comm .comm-note { font-size: 0.75rem; color: #64748b; margin-top: 6px; text-align: center; }
/* 헬스케어 use-case */
.ppt-hc-case {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 14px 16px; margin-bottom: 12px;
}
.ppt-hc-case:last-child { margin-bottom: 0; }
.ppt-hc-case .case-title {
  background: #94a3b8; color: #fff; font-weight: 700; font-size: 0.85rem;
  padding: 6px 12px; border-radius: 6px; display: inline-block; margin-bottom: 6px;
}
.ppt-hc-case .case-sub { font-size: 0.78rem; color: #64748b; margin-bottom: 6px; font-weight: 600; }
.ppt-hc-case li {
  font-size: 0.82rem; color: #475569; line-height: 1.55;
  list-style: disc inside;
}
.ppt-platform-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 12px; }
.ppt-platform-box {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px;
}
.ppt-platform-box h6 { font-size: 0.82rem; font-weight: 700; color: #0ea5e9; margin-bottom: 4px; }
.ppt-platform-box li { font-size: 0.78rem; color: #475569; line-height: 1.5; list-style: none; }

@media (max-width: 768px) {
  .biz-text-section { padding: 28px 20px; }
  .biz-text-title { font-size: 1.2rem; }
  .biz-text-list li { font-size: 0.95rem; }
  .biz-product-grid { grid-template-columns: 1fr; }
  .biz-compare-table thead th,
  .biz-compare-table tbody td { padding: 14px 12px; font-size: 0.85rem; }
  .ppt-2col, .ppt-3col, .ppt-hc { grid-template-columns: 1fr; }
  .ppt-arrow-col { flex-direction: row; font-size: 1.5rem; gap: 16px; padding: 8px 0; }
  .ppt-platform-row { grid-template-columns: 1fr; }
  .ppt-iot-icon { min-width: 50px; max-width: 60px; }
  .ppt-iot-infra { flex-direction: column; text-align: center; }
  .biz-text-section [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* GPU 클라우드 반응형 */
  .gpu-hero { min-height: 340px; border-radius: 14px; }
  .gpu-hero-inner { padding: 40px 20px; }
  .gpu-hero h2 { font-size: 1.6rem; }
  .gpu-hero-sub { font-size: 0.92rem; }
  .gpu-hero-stats { gap: 16px; }
  .gpu-stat-value { font-size: 1.5rem; }
  .gpu-stat-label { font-size: 0.78rem; }
  .gpu-features { grid-template-columns: 1fr; gap: 16px; }
  .gpu-feature-card { padding: 28px 24px; }
}
@media (max-width: 480px) {
  .gpu-hero { min-height: 280px; border-radius: 10px; margin-bottom: 32px; }
  .gpu-hero-inner { padding: 32px 16px; }
  .gpu-hero h2 { font-size: 1.3rem; }
  .gpu-hero-sub { font-size: 0.85rem; margin-bottom: 24px; }
  .gpu-hero-stats { grid-template-columns: 1fr; gap: 12px; }
  .gpu-stat-value { font-size: 1.3rem; }
  .gpu-features { margin-bottom: 32px; }
}

/* ── AI 방범관제 히어로 섹션 ────────────────── */
.safety-hero {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 56px;
  font-family: 'Pretendard', sans-serif;
}
.safety-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15,23,42,0.93) 0%, rgba(30,41,59,0.88) 50%, rgba(5,150,105,0.65) 100%);
  z-index: 1;
}
.safety-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 56px 32px;
  max-width: 800px;
}
.safety-hero-badge {
  display: inline-block;
  background: rgba(16,185,129,0.18);
  border: 1px solid rgba(16,185,129,0.4);
  color: #6ee7b7;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 20px;
  border-radius: 24px;
  margin-bottom: 20px;
  letter-spacing: 0.04em;
}
.safety-hero h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.safety-hero h2 .accent {
  color: #34d399;
}
.safety-hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  margin-bottom: 36px;
}
.safety-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.safety-stat-item { text-align: center; }
.safety-stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: #34d399;
  line-height: 1;
  margin-bottom: 6px;
}
.safety-stat-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}

/* ── AI 방범관제 서비스 카드 ─────────────────── */
.safety-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
  font-family: 'Pretendard', sans-serif;
}
.safety-service-card {
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border: 1px solid rgba(16,185,129,0.15);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.safety-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(16,185,129,0.15);
  border-color: rgba(16,185,129,0.35);
}
.safety-service-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid rgba(16,185,129,0.1);
}
.safety-service-card-body {
  padding: 24px;
}
.safety-service-card-body h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 10px;
  text-align: center;
}
.safety-service-card-body h4 .card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(16,185,129,0.18);
  color: #34d399;
  font-size: 0.8rem;
  font-weight: 800;
  flex-shrink: 0;
}
.safety-service-card-body p {
  font-size: 0.88rem;
  color: #94a3b8;
  line-height: 1.7;
}

/* ── AI 방범관제 시스템 아키텍처 ─────────────── */
.safety-arch {
  background: var(--surface-card);
  border: 1px solid var(--surface-line);
  border-radius: 20px;
  padding: 48px;
  margin-bottom: 48px;
  font-family: 'Pretendard', sans-serif;
}
.safety-arch-header {
  text-align: center;
  margin-bottom: 40px;
}
.safety-arch-header h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--surface-text);
  margin-bottom: 10px;
}
.safety-arch-header p {
  font-size: 0.95rem;
  color: var(--surface-muted);
}
.safety-arch-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  border: 1px solid #bbf7d0;
  border-radius: 12px;
}
.safety-arch-flow-node {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #d1fae5;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1e293b;
}
.safety-arch-flow-arrow {
  color: #10b981;
  font-size: 1.2rem;
  font-weight: 700;
  flex-shrink: 0;
}
.safety-arch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 24px;
}
.safety-arch-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
}
.safety-arch-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.safety-arch-card-label {
  padding: 14px 18px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #059669, #10b981);
  text-align: center;
}
.safety-response-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px;
  background: #f0fdf4;
}
.safety-response-tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #059669;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
}

/* ── AI 방범관제 역량 섹션 ──────────────────── */
.safety-capabilities {
  background: linear-gradient(145deg, #0f172a, #1e293b);
  border-radius: 20px;
  padding: 48px;
  font-family: 'Pretendard', sans-serif;
}
.safety-cap-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 32px;
}
.safety-cap-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
  color: #fca5a5;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
}
.safety-cap-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #f1f5f9;
}
.safety-cap-title .highlight {
  color: #34d399;
}
.safety-cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.safety-cap-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  transition: background 0.25s;
}
.safety-cap-item:hover {
  background: rgba(255,255,255,0.08);
}
.safety-cap-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(16,185,129,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.safety-cap-icon svg {
  width: 18px;
  height: 18px;
  stroke: #34d399;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.safety-cap-text {
  font-size: 0.95rem;
  color: #cbd5e1;
  line-height: 1.6;
}
.safety-cap-text strong {
  color: #f1f5f9;
  font-weight: 700;
}

/* ── AI 방범관제 반응형 ────────────────────── */
@media (max-width: 768px) {
  .safety-hero { min-height: 340px; border-radius: 14px; }
  .safety-hero-inner { padding: 40px 20px; }
  .safety-hero h2 { font-size: 1.6rem; }
  .safety-hero-sub { font-size: 0.92rem; }
  .safety-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .safety-stat-value { font-size: 1.5rem; }
  .safety-stat-label { font-size: 0.78rem; }
  .safety-services { grid-template-columns: 1fr; gap: 16px; }
  .safety-arch { padding: 28px 20px; }
  .safety-arch-flow { flex-direction: column; gap: 8px; }
  .safety-arch-flow-arrow { transform: rotate(90deg); }
  .safety-arch-grid { grid-template-columns: 1fr; }
  .safety-arch-card img { min-height: 160px; }
  .safety-capabilities { padding: 32px 20px; }
  .safety-cap-grid { grid-template-columns: 1fr; }
  .safety-cap-header { flex-direction: column; align-items: center; gap: 10px; }
}
@media (max-width: 480px) {
  .safety-hero { min-height: 280px; border-radius: 10px; margin-bottom: 32px; }
  .safety-hero-inner { padding: 32px 16px; }
  .safety-hero h2 { font-size: 1.3rem; }
  .safety-hero-sub { font-size: 0.85rem; margin-bottom: 24px; }
  .safety-hero-stats { grid-template-columns: 1fr; gap: 12px; }
  .safety-stat-value { font-size: 1.3rem; }
  .safety-services { margin-bottom: 32px; }
  .safety-arch { padding: 20px 16px; }
}

/* ── IoT 통합관제 히어로 섹션 ───────────────── */
.iot-hero {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 56px;
  font-family: 'Pretendard', sans-serif;
}
.iot-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15,23,42,0.93) 0%, rgba(30,41,59,0.88) 50%, rgba(245,158,11,0.6) 100%);
  z-index: 1;
}
.iot-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 56px 32px;
  max-width: 800px;
}
.iot-hero-badge {
  display: inline-block;
  background: rgba(245,158,11,0.18);
  border: 1px solid rgba(245,158,11,0.4);
  color: #fcd34d;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 20px;
  border-radius: 24px;
  margin-bottom: 20px;
  letter-spacing: 0.04em;
}
.iot-hero h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.iot-hero h2 .accent {
  color: #fbbf24;
}
.iot-hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  margin-bottom: 36px;
}
.iot-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.iot-stat-item { text-align: center; }
.iot-stat-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fbbf24;
  line-height: 1;
  margin-bottom: 6px;
}
.iot-stat-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}

/* ── IoT 3-Layer 카드 (설비/장비/센서) ──────── */
.iot-layers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
  font-family: 'Pretendard', sans-serif;
}
.iot-layer-card {
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border: 1px solid rgba(245,158,11,0.15);
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.iot-layer-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.35);
}
.iot-layer-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.iot-layer-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(245,158,11,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.iot-layer-icon svg {
  width: 24px;
  height: 24px;
  stroke: #fbbf24;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.iot-layer-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(245,158,11,0.12);
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: 0.06em;
}
.iot-layer-card h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 4px;
}
.iot-layer-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  text-align: left;
}
.iot-layer-card ul li {
  position: relative;
  padding-left: 18px;
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.8;
}
.iot-layer-card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
}
.iot-layer-note {
  margin-top: 12px;
  font-size: 0.8rem;
  color: #64748b;
  font-style: italic;
}

/* ── IoT 통신방식 + 관제센터 ────────────────── */
.iot-system {
  background: var(--surface-card);
  border: 1px solid var(--surface-line);
  border-radius: 20px;
  padding: 48px;
  margin-bottom: 48px;
  font-family: 'Pretendard', sans-serif;
}
.iot-system-header {
  text-align: center;
  margin-bottom: 40px;
}
.iot-system-header h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--surface-text);
  margin-bottom: 10px;
}
.iot-system-header p {
  font-size: 0.95rem;
  color: var(--surface-muted);
}
.iot-system-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 36px;
}
.iot-system-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.iot-system-card img {
  width: 100%;
  height: auto;
  display: block;
}
.iot-system-card-label {
  padding: 14px 18px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #d97706, #f59e0b);
  text-align: center;
}
.iot-comm-section {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid #fde68a;
  border-radius: 14px;
  padding: 28px;
}
.iot-comm-title {
  font-size: 1rem;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.iot-comm-title svg {
  width: 20px;
  height: 20px;
  stroke: #d97706;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.iot-comm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.iot-comm-chip {
  text-align: center;
  padding: 12px 8px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #fde68a;
  font-size: 0.85rem;
  font-weight: 600;
  color: #78350f;
}
.iot-comm-chip small {
  display: block;
  font-size: 0.72rem;
  color: #a16207;
  font-weight: 500;
  margin-top: 2px;
}

/* ── IoT 플랫폼 카드 ───────────────────────── */
.iot-platforms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
  font-family: 'Pretendard', sans-serif;
}
.iot-platform-card {
  background: var(--surface-card);
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  border: 1px solid transparent;
  background-image: linear-gradient(var(--surface-card), var(--surface-card)), linear-gradient(135deg, #f59e0b, #d97706, #f59e0b);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: transform 0.3s, box-shadow 0.3s;
}
.iot-platform-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(245,158,11,0.12);
}
.iot-platform-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.iot-platform-icon svg {
  width: 24px;
  height: 24px;
  stroke: #d97706;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.iot-platform-card h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--surface-text);
  margin-bottom: 14px;
}
.iot-platform-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  text-align: left;
}
.iot-platform-card ul li {
  position: relative;
  padding-left: 18px;
  font-size: 0.88rem;
  color: var(--subtle);
  line-height: 1.8;
}
.iot-platform-card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
}

/* ── IoT 기술역량 (다크 섹션) ───────────────── */
.iot-capabilities {
  background: linear-gradient(145deg, #0f172a, #1e293b);
  border-radius: 20px;
  padding: 48px;
  font-family: 'Pretendard', sans-serif;
}
.iot-cap-header {
  text-align: center;
  margin-bottom: 32px;
}
.iot-cap-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.3);
  color: #fcd34d;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.iot-cap-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #f1f5f9;
}
.iot-cap-title .highlight {
  color: #fbbf24;
}
.iot-cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.iot-cap-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  transition: background 0.25s;
}
.iot-cap-item:hover {
  background: rgba(255,255,255,0.08);
}
.iot-cap-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(245,158,11,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.iot-cap-icon svg {
  width: 18px;
  height: 18px;
  stroke: #fbbf24;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.iot-cap-text {
  font-size: 0.95rem;
  color: #cbd5e1;
  line-height: 1.6;
}
.iot-cap-text strong {
  color: #f1f5f9;
  font-weight: 700;
}

/* ── IoT 통합관제 반응형 ───────────────────── */
@media (max-width: 768px) {
  .iot-hero { min-height: 340px; border-radius: 14px; }
  .iot-hero-inner { padding: 40px 20px; }
  .iot-hero h2 { font-size: 1.6rem; }
  .iot-hero-sub { font-size: 0.92rem; }
  .iot-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .iot-stat-value { font-size: 1.4rem; }
  .iot-stat-label { font-size: 0.78rem; }
  .iot-layers { grid-template-columns: 1fr; gap: 16px; }
  .iot-system { padding: 28px 20px; }
  .iot-system-grid { grid-template-columns: 1fr; }
  .iot-comm-grid { grid-template-columns: repeat(2, 1fr); }
  .iot-platforms { grid-template-columns: 1fr; gap: 16px; }
  .iot-capabilities { padding: 32px 20px; }
  .iot-cap-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .iot-hero { min-height: 280px; border-radius: 10px; margin-bottom: 32px; }
  .iot-hero-inner { padding: 32px 16px; }
  .iot-hero h2 { font-size: 1.3rem; }
  .iot-hero-sub { font-size: 0.85rem; margin-bottom: 24px; }
  .iot-hero-stats { grid-template-columns: 1fr; gap: 12px; }
  .iot-stat-value { font-size: 1.3rem; }
  .iot-layers { margin-bottom: 32px; }
  .iot-system { padding: 20px 16px; }
  .iot-comm-grid { grid-template-columns: 1fr 1fr; }
  .iot-platforms { margin-bottom: 32px; }
}

/* ── 헬스케어 히어로 섹션 ───────────────────── */
.hc-hero {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 56px;
  font-family: 'Pretendard', sans-serif;
}
.hc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15,23,42,0.93) 0%, rgba(30,41,59,0.88) 50%, rgba(139,92,246,0.6) 100%);
  z-index: 1;
}
.hc-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 56px 32px;
  max-width: 800px;
}
.hc-hero-badge {
  display: inline-block;
  background: rgba(139,92,246,0.18);
  border: 1px solid rgba(139,92,246,0.4);
  color: #c4b5fd;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 20px;
  border-radius: 24px;
  margin-bottom: 20px;
  letter-spacing: 0.04em;
}
.hc-hero h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.hc-hero h2 .accent {
  color: #a78bfa;
}
.hc-hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  margin-bottom: 36px;
}
.hc-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.hc-stat-item { text-align: center; }
.hc-stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: #a78bfa;
  line-height: 1;
  margin-bottom: 6px;
}
.hc-stat-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}

/* ── 헬스케어 서비스 소개 ───────────────────── */
.hc-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 56px;
  font-family: 'Pretendard', sans-serif;
}
.hc-intro-img {
  overflow: hidden;
}
.hc-intro-img img {
  width: 100%;
  height: auto;
  display: block;
}
.hc-intro-text h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--surface-text);
  margin-bottom: 20px;
}
.hc-intro-text ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hc-intro-text li {
  position: relative;
  padding-left: 20px;
  font-size: 1rem;
  color: var(--subtle);
  line-height: 1.9;
}
.hc-intro-text li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8b5cf6;
}

/* ── 헬스케어 활용 분야 카드 ────────────────── */
.hc-usecases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
  font-family: 'Pretendard', sans-serif;
}
.hc-usecase-card {
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border: 1px solid rgba(139,92,246,0.15);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.hc-usecase-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(139,92,246,0.15);
  border-color: rgba(139,92,246,0.35);
}
.hc-usecase-card-img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid rgba(139,92,246,0.1);
}
.hc-usecase-card-body {
  padding: 24px;
  text-align: center;
}
.hc-usecase-card-body h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 6px;
}
.hc-usecase-card-body .hc-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #a78bfa;
  background: rgba(139,92,246,0.12);
  padding: 3px 12px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.hc-usecase-card-body ul {
  list-style: none;
  padding: 0;
  display: table;
  margin: 0 auto;
  text-align: left;
}
.hc-usecase-card-body li {
  position: relative;
  padding-left: 18px;
  font-size: 0.88rem;
  color: #94a3b8;
  line-height: 1.8;
}
.hc-usecase-card-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8b5cf6;
}

/* ── 헬스케어 기술역량 (다크 섹션) ──────────── */
.hc-capabilities {
  background: linear-gradient(145deg, #0f172a, #1e293b);
  border-radius: 20px;
  padding: 48px;
  font-family: 'Pretendard', sans-serif;
}
.hc-cap-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 32px;
}
.hc-cap-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(139,92,246,0.15);
  border: 1px solid rgba(139,92,246,0.3);
  color: #c4b5fd;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
}
.hc-cap-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #f1f5f9;
}
.hc-cap-title .highlight {
  color: #a78bfa;
}
.hc-cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.hc-cap-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  transition: background 0.25s;
}
.hc-cap-item:hover {
  background: rgba(255,255,255,0.08);
}
.hc-cap-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(139,92,246,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hc-cap-icon svg {
  width: 18px;
  height: 18px;
  stroke: #a78bfa;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hc-cap-text {
  font-size: 0.95rem;
  color: #cbd5e1;
  line-height: 1.6;
}
.hc-cap-text strong {
  color: #f1f5f9;
  font-weight: 700;
}

/* ── 헬스케어 반응형 ───────────────────────── */
@media (max-width: 768px) {
  .hc-hero { min-height: 340px; border-radius: 14px; }
  .hc-hero-inner { padding: 40px 20px; }
  .hc-hero h2 { font-size: 1.6rem; }
  .hc-hero-sub { font-size: 0.92rem; }
  .hc-hero-stats { gap: 16px; }
  .hc-stat-value { font-size: 1.5rem; }
  .hc-stat-label { font-size: 0.78rem; }
  .hc-intro { grid-template-columns: 1fr; gap: 24px; }
  .hc-usecases { grid-template-columns: 1fr; gap: 16px; }
  .hc-capabilities { padding: 32px 20px; }
  .hc-cap-grid { grid-template-columns: 1fr; }
  .hc-cap-header { flex-direction: column; align-items: center; gap: 10px; }
}
@media (max-width: 480px) {
  .hc-hero { min-height: 280px; border-radius: 10px; margin-bottom: 32px; }
  .hc-hero-inner { padding: 32px 16px; }
  .hc-hero h2 { font-size: 1.3rem; }
  .hc-hero-sub { font-size: 0.85rem; margin-bottom: 24px; }
  .hc-hero-stats { grid-template-columns: 1fr; gap: 12px; }
  .hc-stat-value { font-size: 1.3rem; }
  .hc-usecases { margin-bottom: 32px; }
}

.biz-detail-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 48px;
  align-items: start;
}
.biz-detail-img {
  border-radius: 16px;
  overflow: hidden;
}
.biz-detail-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}
.biz-img-placeholder {
  background: var(--bg-input);
  border-radius: 16px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa8bc;
  font-size: 1rem;
  border: 2px dashed #d0d8e4;
}
.biz-detail-text h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 20px;
}
.biz-detail-text ul {
  list-style: none;
  padding: 0;
}
.biz-detail-text li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 14px;
  font-size: 1rem;
  color: var(--subtle);
  line-height: 1.7;
}
.biz-detail-text li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}

/* ── 사업소개 상세 - 서비스 소개 영역 ──────────── */
.biz-intro {
  text-align: center;
  margin-bottom: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid #e2e8f0;
}
.biz-intro-desc {
  font-size: 1.1rem;
  color: var(--subtle);
  line-height: 1.8;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Pretendard', sans-serif;
}

/* ── 서비스 항목 카드 그리드 ──────────────────── */
.biz-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.biz-service-card {
  background: var(--surface-card);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  padding: 32px 28px;
  transition: box-shadow 0.25s, transform 0.25s;
}
.biz-service-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}
.biz-service-card .card-icon {
  font-size: 2rem;
  margin-bottom: 16px;
  display: block;
}
.biz-service-card h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 12px;
}
.biz-service-card p {
  font-size: 0.92rem;
  color: var(--subtle);
  line-height: 1.7;
}

/* ── 강점/특징 섹션 ──────────────────────────── */
.biz-strengths {
  margin-top: 64px;
  padding: 48px 40px;
  background: linear-gradient(135deg, var(--surface-alt) 0%, var(--surface) 100%);
  border-radius: 20px;
}
.biz-strengths h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 28px;
}
.biz-strengths ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 40px;
}
.biz-strengths li {
  position: relative;
  padding-left: 28px;
  font-size: 0.95rem;
  color: var(--subtle);
  line-height: 1.8;
}
.biz-strengths li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent, #ff6b00);
}

/* ── 이미지 갤러리 (2열) ────────────────────── */
.biz-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.biz-gallery img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

/* ── 비교 테이블 ─────────────────────────────── */
.biz-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 40px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.biz-compare-table th,
.biz-compare-table td {
  padding: 18px 24px;
  text-align: left;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.biz-compare-table thead th {
  background: var(--dark, #1a1a2e);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}
.biz-compare-table thead th:first-child {
  background: #3a3a5e;
}
.biz-compare-table tbody td:first-child {
  font-weight: 700;
  color: var(--dark);
  background: #f8fafc;
}
.biz-compare-table tbody tr:last-child td {
  border-bottom: none;
}
.biz-compare-table .highlight-col {
  background: rgba(255, 107, 0, 0.04);
}

/* ── 활용 분야 카드 ──────────────────────────── */
.biz-usecases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.biz-usecase-card {
  background: var(--surface-card);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  transition: transform 0.25s, box-shadow 0.25s;
}
.biz-usecase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.biz-usecase-card .usecase-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.biz-usecase-card .usecase-body {
  padding: 24px;
}
.biz-usecase-card h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 12px;
}
.biz-usecase-card p,
.biz-usecase-card li {
  font-size: 0.9rem;
  color: var(--subtle);
  line-height: 1.7;
}
.biz-usecase-card ul {
  list-style: none;
  padding: 0;
}
.biz-usecase-card li {
  padding-left: 16px;
  position: relative;
  margin-bottom: 6px;
}
.biz-usecase-card li::before {
  content: '>';
  position: absolute;
  left: 0;
  color: var(--accent, #ff6b00);
  font-weight: 700;
}

/* ── 아키텍처 다이어그램 ─────────────────────── */
.biz-architecture {
  margin-top: 56px;
}
.biz-architecture h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 28px;
}
.biz-arch-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.biz-arch-box {
  background: var(--surface-card);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
  position: relative;
}
.biz-arch-box .arch-icon {
  font-size: 2.2rem;
  margin-bottom: 12px;
  display: block;
}
.biz-arch-box h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 10px;
}
.biz-arch-box p {
  font-size: 0.85rem;
  color: var(--subtle);
  line-height: 1.6;
}
.biz-arch-box.arch-highlight {
  border-color: var(--accent, #ff6b00);
  background: rgba(255, 107, 0, 0.03);
}
.biz-arch-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--accent, #ff6b00);
  min-width: 40px;
}

/* ── 반응형 ──────────────────────────────────── */
@media (max-width: 768px) {
  .biz-detail-section { grid-template-columns: 1fr; gap: 32px; }
  .biz-strengths ul { grid-template-columns: 1fr; }
  .biz-gallery { grid-template-columns: 1fr; }
  .biz-usecases { grid-template-columns: 1fr; }
  .biz-strengths { padding: 32px 24px; }
  .biz-compare-table th,
  .biz-compare-table td { padding: 12px 16px; font-size: 0.85rem; }
}

/* ── 제품소개 서브페이지 ──────────────────────── */
.product-page-wrap {
  max-width: 1200px;
  margin: 0 auto;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 48px;
}
.prod-card {
  background: var(--surface-card);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform .25s, box-shadow .25s;
}
.prod-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.1);
}
.prod-card-img {
  position: relative;
  background: var(--bg-input);
  height: 220px;
  padding: 14px;
  overflow: hidden;
}
.prod-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-grid--cover .prod-card-img img {
  object-fit: cover;
  border-radius: 8px;
}
.prod-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  background: var(--teal);
}
.prod-badge.hot { background: #e53e3e; }
.prod-badge.new { background: #3182ce; }
.prod-item-id {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: .68rem;
  font-weight: 600;
  color: #fff;
  background: rgba(30, 41, 59, 0.82);
  border: 1px solid rgba(255,255,255,0.15);
  font-family: 'Pretendard', sans-serif;
  letter-spacing: .01em;
  backdrop-filter: blur(4px);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.prod-card-body {
  padding: 20px 24px;
}
.prod-card-body h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
}
.prod-card-body p {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.6;
  white-space: pre-line;
}

/* ── 제품 어드민 오버레이 ──────────────────────── */
.prod-admin-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  opacity: 0;
  transition: opacity .25s;
}
.prod-card:hover .prod-admin-overlay {
  opacity: 1;
}
.prod-admin-btn {
  padding: 6px 18px;
  border-radius: 6px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background .2s;
}
.prod-admin-btn.edit {
  background: var(--accent);
  color: #fff;
}
.prod-admin-btn.edit:hover {
  background: var(--accent2);
}
.prod-admin-btn.delete {
  background: #e53e3e;
  color: #fff;
}
.prod-admin-btn.delete:hover {
  background: #c53030;
}
.prod-admin-btn.toggle {
  background: #805ad5;
  color: #fff;
}
.prod-admin-btn.toggle:hover {
  background: #6b46c1;
}

/* 비활성 제품 */
.prod-inactive {
  opacity: 0.45;
  border: 2px dashed #a0aec0;
}
.prod-inactive:hover {
  opacity: 0.7;
}
.prod-hidden-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #e53e3e;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 4px;
  z-index: 5;
  font-family: 'Pretendard', sans-serif;
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
  .prod-card-img { height: 140px; padding: 10px; }
  .prod-card-img img { max-width: 100%; max-height: 100%; }
  .prod-card-body { padding: 10px 12px 14px; }
  .prod-card-body h4 { font-size: .85rem; }
  .prod-card-body p { font-size: .75rem; }
}
@media (max-width: 375px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* ── 제품 검색 + 페이징 ──────────────────────── */
.product-search {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid #dde1e8;
  margin-bottom: 32px;
}
.product-search-label {
  font-size: .95rem;
  font-weight: 600;
  color: var(--dark);
}
.product-search input {
  padding: 10px 16px;
  border: 1px solid var(--surface-line);
  border-radius: 8px;
  font-size: .92rem;
  width: 220px;
  color: var(--dark);
  background: var(--surface-card);
  transition: border-color .2s;
}
.product-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.1);
}
.product-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid #dde1e8;
  border-left: none;
  border-radius: 0 8px 8px 0;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background .2s;
}
.product-search-btn:hover {
  background: #e06000;
}

@media (max-width: 480px) {
  .product-search { flex-wrap: wrap; justify-content: flex-start; }
  .product-search input { width: 100%; }
}

/* ── 커뮤니티 서브페이지 ──────────────────────── */
.community-page-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── 공통: 빈 상태 ──────────────────────── */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: #9aa8bc;
  font-size: 1rem;
}

/* ── 게시판 스타일 ──────────────────────── */
.board-wrap {
  margin-top: 40px;
}
.board-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.board-total {
  font-size: .92rem;
  color: var(--muted);
}
.board-total strong {
  color: var(--dark);
  font-weight: 700;
}
.board-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--dark);
}
.board-table thead th {
  padding: 14px 12px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--dark);
  background: var(--bg-light);
  border-bottom: 1px solid var(--surface-line);
  text-align: center;
}
.board-table tbody td {
  padding: 14px 12px;
  font-size: .88rem;
  color: var(--subtle);
  border-bottom: 1px solid var(--surface-line-light);
  text-align: center;
}
.board-table tbody tr:hover {
  background: var(--bg-light);
}
.board-table .col-no { width: 80px; }
.board-table .col-title { text-align: left; }
.board-table .col-date { width: 120px; }
.board-table .col-views { width: 80px; }
.board-table .col-file { width: 100px; }
.board-table tbody td.col-title {
  text-align: left;
}
.board-table tbody tr.board-empty td {
  padding: 60px 12px;
  color: var(--surface-muted);
  text-align: center;
}
.board-table .col-writer { width: 100px; }
.board-table .col-chk { width: 40px; }
.board-table .col-chk input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #1e3a5f;
}

/* ── 페이지네이션 ──────────────────────── */
.board-pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 32px;
}
.page-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: all .2s;
}
.page-item:hover {
  background: var(--bg-input);
  color: var(--dark);
}
.page-item.active {
  background: var(--teal);
  color: #fff;
  font-weight: 700;
}

/* 읽음 표시 */
.board-table tbody tr.read td {
  color: #adb5c4;
}
.board-table tbody tr.read td.col-title span {
  color: #adb5c4;
}
.board-table tbody tr.read td.col-title a {
  color: #adb5c4 !important;
}
/* N 뱃지 (주황) */
.badge-new {
  display: inline-block;
  background: #ff6b00;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
  line-height: 1.4;
}

/* ── 고정글(PIN) 스타일 ──────────────────────── */
.pinned-row {
  background: #fffbe6 !important;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.pinned-row td:first-child {
  border-left: 3px solid #f59e0b;
}
.pinned-row td.col-title a {
  font-weight: 700 !important;
}
.pinned-row:hover {
  background: #fff8d0 !important;
}
/* 고정글 ↔ 일반글 구분선 */
.pinned-row + tr:not(.pinned-row) {
  border-top: 2px solid #d0d5dd;
}
.pin-badge {
  display: inline-block;
  background: #16a34a;
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .5px;
}
.pin-badge-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  object-fit: contain;
}
.board-table .col-pin { width: 50px; }
/* 슬라이드 스위치 */
.pin-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}
.pin-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.pin-slider {
  position: absolute;
  inset: 0;
  background: var(--surface-line);
  border-radius: 20px;
  transition: background .25s;
}
.pin-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform .25s;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.pin-switch input:checked + .pin-slider {
  background: #f59e0b;
}
.pin-switch input:checked + .pin-slider::before {
  transform: translateX(16px);
}
/* 체크박스 라벨 */
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--dark);
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #e53e3e;
  cursor: pointer;
}

/* ── 목록 썸네일 ────────────────────────── */
.board-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #e2e6ec;
  vertical-align: middle;
}

/* ── 첨부파일 아이콘 ──────────────────────── */
.attach-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.attach-icon svg {
  vertical-align: middle;
}
.attach-img svg {
  stroke: #3b82f6;
}
.attach-file svg {
  stroke: #6b7a99;
}
.attach-none {
  color: #d0d5dd;
}

/* ── 이전글/다음글 네비게이션 ──────────────────────── */
.board-nav {
  border-top: 1px solid var(--surface-line);
  margin-top: 24px;
}
.board-nav-item {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--surface-line-light);
  gap: 16px;
}
.board-nav-item.disabled .board-nav-link {
  color: #9aa8bc;
}
.board-nav-label {
  flex-shrink: 0;
  font-size: .85rem;
  font-weight: 700;
  color: var(--dark);
  min-width: 50px;
}
.board-nav-link {
  font-size: .88rem;
  color: var(--subtle);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.board-nav-link:hover {
  color: var(--accent);
}

/* ── 게시판 테이블 카드레이아웃 (태블릿 이하) ──────────────────────── */
@media (max-width: 768px) {
  .board-table thead { display: none; }
  .board-table,
  .board-table tbody,
  .board-table tr,
  .board-table td {
    display: block;
    width: 100%;
  }
  .board-table tbody tr.board-row {
    padding: 12px 14px;
    border-bottom: 1px solid var(--surface-line-light);
    position: relative;
  }
  .board-table tbody td {
    padding: 2px 0;
    border: none;
    text-align: left;
    font-size: .82rem;
  }
  .board-table tbody td.col-title {
    font-size: .9rem;
    font-weight: 600;
    white-space: normal;
    overflow: visible;
    margin-bottom: 4px;
  }
  .board-table tbody td.col-chk {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
  }
  .board-table td.col-no,
  .board-table td.col-views,
  .board-table td.col-file,
  .board-table td.col-writer,
  .board-table td.col-pin { display: none !important; }
  .board-table tbody tr.pinned-row td.col-no {
    display: inline-block !important;
    width: auto;
    padding: 0 0 4px 0;
  }
  .board-table td.col-date {
    font-size: .75rem;
    color: var(--surface-muted);
  }
  .board-toolbar { flex-wrap: wrap; gap: 8px; }
  .btn-board { padding: 8px 14px; font-size: .8rem; }
  .page-item { width: 30px; height: 30px; font-size: .8rem; }
}

/* ── 게시판 아코디언 ──────────────────────── */
.board-row {
  cursor: pointer;
  transition: background .2s;
}
.board-row:hover {
  background: var(--bg-input);
}
.board-arrow {
  display: inline-block;
  font-size: .75rem;
  color: #9aa8bc;
  margin-left: 6px;
  transition: transform .25s;
}
.board-row.open .board-arrow {
  transform: rotate(90deg);
}
.board-detail-inner {
  padding: 20px 24px;
  background: var(--bg-light);
  border-radius: 8px;
  font-size: .88rem;
  color: var(--subtle);
  line-height: 1.8;
  margin: 4px 0;
}
.board-download {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.board-download:hover {
  text-decoration: underline;
}

/* ── 첨부파일 미리보기 그리드 ──────────────────────── */
.board-attach-wrap {
  margin: 24px 0;
  padding: 20px;
  background: var(--surface-alt);
  border-radius: 10px;
}
.board-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.board-preview-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-line);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  cursor: pointer;
}
.board-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}
.board-file-list {
  border-top: 1px solid var(--surface-line);
  padding-top: 12px;
}
.board-file-item {
  padding: 3px 0;
}

@media (max-width: 768px) {
  .board-preview-grid { grid-template-columns: repeat(3, 1fr); }
  .board-preview-card { height: 150px; }
}
@media (max-width: 480px) {
  .board-preview-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .board-preview-card { height: 120px; }
}

/* ── 견적문의 폼 ──────────────────────── */
.inquiry-form-wrap {
  margin-top: 40px;
  background: var(--bg-light);
  border-radius: 16px;
  padding: 40px;
  border: 1px solid var(--surface-line-light);
}
.inquiry-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
}
.form-group .required {
  color: #e53e3e;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--surface-line);
  border-radius: 8px;
  font-size: .92rem;
  color: var(--dark);
  background: var(--surface-card);
  transition: border-color .2s;
  font-family: inherit;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.1);
}
.form-group.full {
  margin-bottom: 20px;
}
.inquiry-form-actions {
  text-align: center;
  margin-top: 12px;
}
.btn-inquiry-submit {
  padding: 14px 48px;
  background: var(--grad-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}
.btn-inquiry-submit:hover {
  opacity: .9;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .inquiry-form-grid { grid-template-columns: 1fr; }
  .inquiry-form-wrap { padding: 24px; }
}

/* ── 파일 업로드 영역 ──────────────────────── */
.file-upload-area {
  position: relative;
  border: 2px dashed var(--surface-line);
  border-radius: 12px;
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .25s, background .25s;
  background: var(--surface-alt);
}
.file-upload-area:hover,
.file-upload-area.drag-over {
  border-color: var(--accent);
  background: rgba(255,107,0,0.04);
}
.file-upload-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.file-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #8896ab;
  font-size: .92rem;
  pointer-events: none;
}
.file-upload-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,107,0,0.1);
  color: var(--accent);
  font-size: 1.6rem;
  font-weight: 700;
}
.file-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.file-preview-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--surface-line);
  background: var(--surface-card);
}
.file-preview-item img {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: cover;
}
.file-preview-item .file-icon {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  background: var(--bg-input);
}
.file-preview-item .file-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 2px 4px 2px 8px;
}
.file-preview-item .file-name {
  font-size: .75rem;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.existing-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.existing-file-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bg-input);
  border-radius: 6px;
  font-size: .85rem;
  color: var(--subtle);
}
.existing-file-item::before {
  content: '\1F4CE';
}
.file-remove-btn {
  background: none;
  border: none;
  color: #e53e3e;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
}
.file-remove-btn:hover {
  color: #c53030;
}
/* 기존 파일 그리드 (수정 페이지) */
.existing-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.existing-file-card {
  position: relative;
  border: 1px solid var(--surface-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-alt);
  text-align: center;
  padding-bottom: 8px;
}
.existing-file-thumb {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}
.existing-file-icon {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: var(--bg-input);
}
.existing-file-name {
  display: block;
  padding: 6px 8px 0;
  font-size: .75rem;
  color: var(--subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.existing-file-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.9);
  color: #fff;
  border: none;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
}
.existing-file-card:hover .existing-file-delete {
  opacity: 1;
}

@media (max-width: 480px) {
  .existing-file-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 문의 목록 자물쇠 */
.inquiry-row {
  cursor: pointer;
  transition: background .2s;
}
.inquiry-row:hover {
  background: var(--bg-light);
}
.lock-icon {
  font-size: .8rem;
  margin-right: 4px;
}

/* ── 게시판 버튼 ──────────────────────── */
.btn-board {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: background .2s, color .2s;
}
.btn-write {
  background: var(--accent);
  color: #fff;
}
.btn-write:hover { background: #e06000; }
.btn-delete-batch {
  background: #ef4444;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
}
.btn-delete-batch:hover { background: #dc2626; }
.btn-delete-batch svg { vertical-align: middle; }
.btn-list {
  background: var(--surface-alt);
  color: var(--dark);
}
.btn-list:hover { background: var(--surface-line); }
.btn-edit {
  background: #3b82f6;
  color: #fff;
  margin-right: 8px;
}
.btn-edit:hover { background: #2563eb; }
.btn-delete {
  background: #ef4444;
  color: #fff;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
}
.btn-delete:hover { background: #dc2626; }

/* ── 게시판 상세 뷰 ──────────────────────── */
.board-detail-view {
  background: var(--surface-card);
  border-radius: 12px;
  padding: 40px;
  border: 1px solid var(--surface-line);
}
.board-detail-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--dark);
}
.board-detail-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: .88rem;
  color: #8a92a6;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--surface-line);
}
.board-detail-meta em {
  font-style: normal;
  color: var(--dark);
}
.board-detail-content {
  min-height: 200px;
  line-height: 1.8;
  color: var(--surface-text);
  font-size: .95rem;
  margin-bottom: 32px;
  word-break: break-word;
}
.board-detail-content img {
  max-width: 100%;
  height: auto;
}
.board-detail-actions {
  display: flex;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--surface-line);
}
.detail-actions-left {
  flex: 1;
}
.detail-actions-center {
  flex: 0 0 auto;
}
.detail-actions-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

/* ── 커스텀 확인 다이얼로그 ──────────────── */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
  animation: confirmFadeIn .2s ease;
}
@keyframes confirmFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.confirm-dialog {
  background: var(--surface-card);
  border-radius: 14px;
  padding: 32px 28px 24px;
  min-width: 320px;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  animation: confirmSlideIn .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes confirmSlideIn {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.confirm-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fef2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.confirm-icon svg {
  width: 24px;
  height: 24px;
  color: #ef4444;
}
.confirm-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--surface-text);
  margin-bottom: 8px;
}
.confirm-msg {
  font-size: .9rem;
  color: var(--surface-muted);
  margin-bottom: 24px;
  line-height: 1.5;
}
.confirm-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.confirm-btn {
  padding: 10px 28px;
  border-radius: 8px;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background .2s;
}
.confirm-btn-cancel {
  background: var(--surface-alt);
  color: var(--surface-text);
}
.confirm-btn-cancel:hover { background: var(--surface-line); }
.confirm-btn-ok {
  background: #ef4444;
  color: #fff;
}
.confirm-btn-ok:hover { background: #dc2626; }

@media (max-width: 768px) {
  .board-detail-view { padding: 20px; }
  .board-detail-meta { flex-direction: column; gap: 8px; }
  .confirm-dialog { min-width: auto; margin: 0 16px; }
}

/* ── 통계 페이지 ──────────────────────── */
.stats-page-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

.stats-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.stats-card {
  background: var(--surface-card);
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border: 1px solid var(--surface-line);
}

.stats-card-label {
  font-size: 13px;
  font-weight: 600;
  color: #8896a6;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stats-card-row {
  display: flex;
  gap: 28px;
}

.stats-metric {
  display: flex;
  flex-direction: column;
}

.stats-value {
  font-size: 30px;
  font-weight: 800;
  color: #2563eb;
  line-height: 1;
}

.stats-unit {
  font-size: 12px;
  color: #8896a6;
  margin-top: 6px;
}

.stats-chart-card {
  background: var(--surface-card);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border: 1px solid var(--surface-line);
  margin-bottom: 24px;
}

.stats-chart-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--surface-text);
  margin: 0 0 20px 0;
}

.stats-chart-body {
  position: relative;
}

.stats-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.stats-grid-2col .stats-chart-card {
  margin-bottom: 0;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.stats-table thead th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  color: #64748b;
  border-bottom: 2px solid #e8ecf1;
  font-size: 13px;
}

.stats-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-line-light);
  color: var(--surface-text);
}

.stats-table tbody tr:hover {
  background: var(--surface-alt);
}

.stats-page-path {
  font-weight: 600;
  color: var(--surface-text);
  font-size: 13px;
}

.stats-page-title {
  font-size: 12px;
  color: var(--surface-muted);
  margin-top: 2px;
}

/* GA 미설정 안내 */
.stats-disabled {
  text-align: center;
  padding: 80px 20px;
}

.stats-disabled-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.stats-disabled h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--surface-text);
  margin-bottom: 12px;
}

.stats-disabled p {
  color: var(--surface-muted);
  font-size: 15px;
}

.stats-disabled code {
  background: var(--surface-alt);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--accent);
}

/* 로딩 스피너 */
.stats-loading {
  text-align: center;
  padding: 80px 20px;
}

.stats-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e8ecf1;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: statsSpin 0.8s linear infinite;
  margin: 0 auto 20px;
}

@keyframes statsSpin {
  to { transform: rotate(360deg); }
}

.stats-loading p {
  color: #64748b;
  font-size: 15px;
}

@media (max-width: 480px) {
  .stats-summary { grid-template-columns: 1fr; }
  .stats-grid-2col { grid-template-columns: 1fr; }
  .stats-value { font-size: 22px; }
}