/* Grid & Card */
.grid{max-width:1160px;margin:-3rem auto 4.5rem;padding:0 1.5rem;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2rem}
  .card{background:var(--pri-800);border-radius:var(--radius);
    box-shadow:0 12px 28px rgba(0,0,0,.45);overflow:hidden;color:inherit;
    transition:transform .35s,box-shadow .35s;perspective:800px}
  .card-inner{transform-style:preserve-3d;transition:inherit}
  .card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.6)}
  .card img{width:100%;height:180px;object-fit:cover;filter:brightness(.85);display:block}
  .card-body{padding:1.25rem 1.25rem 1.75rem}
  .card h3{font-size:1.2rem;font-weight:700;margin-bottom:.4rem;color:var(--pri-100)}
  .card p{font-size:.9rem;color:var(--gray-200)}
  
  /* Detail card */
  .detail-card{display:flex;flex-wrap:wrap;gap:2rem;background:var(--pri-800);
    border-radius:var(--radius);padding:2rem;box-shadow:0 10px 24px rgba(0,0,0,.5)}
  .detail-card img{width:370px;max-width:100%;border-radius:.75rem;object-fit:cover;
    filter:brightness(.9)}
  .detail-card li{margin-bottom:.7rem;font-size:1.05rem;color:var(--pri-100)}
  .detail-card ul{flex:1;list-style:disc inside}
  
  /* Buttons & Ripple */
  .btn{position:relative;overflow:hidden;display:inline-block;
    padding:.65rem 1.3rem;border-radius:999px;font-weight:600;
    background:var(--pri-700);color:var(--white);text-decoration:none;transition:background .25s}
  .btn:hover,.btn:focus{background:var(--pri-500);outline:none}
  .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.3);
    transform:scale(0);animation:ripple .6s ease-out}
  @keyframes ripple{to{transform:scale(4);opacity:0}}
  
  /* 1️⃣  제목 아래 공간 강제 확보  */
.content-box > h2{
  margin:0 0 1rem;     /* 위 0, 아래 1rem */
}

/* 2️⃣  리스트가 제목을 침범하지 않도록 여백 초기화 */
.content-box ul{
  margin:0 0 0 1.2rem; /* 위쪽 마진 0 으로 */
  padding:0 0 0 1.2rem;/* 들여쓰기 유지용 padding */
}

/* content-box 안에서만 .grid 의 -3rem 을 없앰 */
.content-box .grid,
.normal-gap{              /* inline class 이용하면 어디서든 재사용 */
  margin-top:0;
}

/* 1. flex-container가 중앙 정렬을 지원하도록 수정 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;  /* ← 핵심: 이미지+텍스트 그룹을 가운데 정렬 */
}

/* 2. 이미지에 margin:auto를 줘서 단독으로도 중앙 배치 */
.responsive-img {
  width: 100%;
  max-width: 600px;         /* 필요에 따라 조정 */
  border-radius: var(--radius);
  object-fit: cover;
  display: block;
  margin: 0 auto;           /* ← 핵심: 좌우 여백 자동 */
}

/* 3. 모바일 뷰에서 세로 정렬 시에도 중앙 정렬 유지 */
@media (max-width: 768px) {
  .flex-container {
    flex-direction: column;
    align-items: center;    /* ← 세로 방향으로도 중앙 정렬 */
  }
}

/* Directions Map */
.directions h2 {
  margin-top: 0;
}
.map-container {
  margin-top: 2rem;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
}
.responsive-iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}
@media (max-width: 768px) {
  .responsive-iframe {
    height: 300px;  /* 모바일에서 높이 축소 */
  }
}

/* === Spec Table 스타일 복원 =========================================== */
.table-responsive {
  width: 100%;
  overflow-x: auto;            /* 가로스크롤 허용 */
  margin-top: 1rem;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.spec-table th,
.spec-table td {
  border: 1px solid rgba(255, 255, 255, .25);
  padding: .6rem;
}

.spec-table th {
  text-align: left;
  background: rgba(255, 255, 255, .05);
}


/* ── 카드 텍스트 중앙 정렬 ───────────────────────────── */
.modules-grid .card-body {
  text-align: center;
}

/* ── 카드 호버(마우스 올렸을 때) 효과 ───────────────────────────── */
.modules-grid .card:hover {
  background: rgba(10, 71, 117, 0.3);
}

/* ── content-box 내 리스트 중앙 배치, 내부 항목은 왼쪽 정렬 ───────────────────────────── */
.content-box ul,
.content-box ol {
  display: inline-block;   /* 블록 형태를 줄 안에서 가운데 배치 */
  text-align: left;        /* 리스트 항목은 왼쪽 정렬 */
  margin: 0 auto;          /* inline-block 요소 가운데 정렬 */
}

/* ── content-box 바로 아래, grid3(panels) 에만 패널 적용 ── */
.content-box > .grid3 {
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1rem 0;                     /* content-box 의 위아래 여백 */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
}

/* ── grid3 안의 카드 스타일 ── */
.content-box > .grid3 .card {
  background: var(--pri-800);         /* 카드 배경색 (패널보다 한톤 밝게) */
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: none;                   /* 그림자 제거 */
  transition: transform .3s, background .3s;
}

/* 카드 내부 텍스트 중앙 정렬 */
.content-box > .grid3 .card h3,
.content-box > .grid3 .card p {
  text-align: center;
  color: var(--pri-100);
}

/* ── Hover 효과 ── */
.content-box > .grid3 .card:hover {
  background: rgba(10,71,117,0.3);
  transform: translateY(-4px);
}

/* ── 탭 네비게이션 ───────────────────────────────────── */
.tab-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 2rem 0;
}
.tab-btn {
  background: none;
  border: 2px solid #09c0d1;
  color: #09c0d1;
  padding: .55rem 1.55rem;
  border-radius: 28px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: .25s;
}
.tab-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #09c0d1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease-out;
  z-index: -1;
}
.tab-btn:hover::after {
  transform: scaleX(1);
}
.tab-btn:hover {
  color: #041927;
}
.tab-btn.active {
  color: #041927;
  border-color: #09c0d1;
}
.tab-btn.active::after {
  transform: scaleX(1);
}

/* ── 탭 패널 ───────────────────────────────────────── */
.panel {
  display: none;
  animation: fade .35s ease;
}
.panel.active {
  display: block;
}
@keyframes fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);  }
}


.model-frame {
  overflow: hidden;       /* iframe element 자체의 오버플로우 숨기기 */
  /* 필요하면 height/width 재조정 */
}

/* 모든 이미지에 반응형 적용 */
img {
  max-width: 100%;
  height: auto;
  display: block; /* 여유가 있으면 필요에 따라 */
}

/* UAM 페이지 전용 반응형 유틸리티 */
.uam .grid.auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap: 2rem;
  text-align: center;
}

/* 콘텐츠박스 중앙 정렬, 내부 텍스트 폭 제한 */
.uam .content-box p,
.uam .content-box ul {
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
}
.uam .content-box ul {
  list-style: disc inside;
  padding-left: 1.2rem;
}

/* 파트너 로고 섹션 */
.uam .partners-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
}
.uam .partners-logos img {
  height: 200px;
  max-width: 100%;
}

/* 작은 화면에서 그리드 하나씩 나열 */
@media (max-width: 768px) {
  .uam .grid.auto-fit {
    grid-template-columns: 1fr;
  }
}


/* === 반응형 공통 그리드 & 이미지 & 테이블 & 리스트 === */

/* 그리드: auto-fit / minmax 으로 반응형 카드 레이아웃 */
.grid2,
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem;
}

/* 반응형 이미지 */
.responsive-img {
  display: block;
  width: 100%;
  max-width: 500px;  /* 필요에 따라 조정 */
  margin: 0 auto 1.5rem;
  border-radius: var(--radius);
  object-fit: cover;
}

/* content-box 제목 아래 본문 / 리스트 중앙 정렬, 리스트 내부는 좌측 정렬 */
.content-box h2 + p,
.content-box h2 + ul,
.content-box h2 + ol {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 1.5rem;
}
.content-box ul,
.content-box ol {
  display: inline-block;
  text-align: left;
  padding-left: 1.2rem;
  list-style: disc inside;
}

/* 테이블: 전체폭 사용, border-collapse */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}
.spec-table th,
.spec-table td {
  border: 1px solid rgba(255,255,255,.25);
  padding: 0.6rem;
}
.spec-table th {
  background: rgba(255,255,255,.05);
  text-align: left;
}

/* 모바일(≤768px) 에서는 1열 레이아웃 */
@media (max-width: 768px) {
  .grid2,
  .grid {
    grid-template-columns: 1fr;
  }
}