미디어위키:Common.css: 두 판 사이의 차이

2025년 10월 6일 (월) 15:42 판

/* ---- Portal cards ---- */
.kdmw-wrap { max-width: 1280px; margin: 0 auto; padding: 12px 16px; }
.kdmw-h2 { font-size: 1.6rem; font-weight: 800; margin: 18px 0 8px; }
.kdmw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1100px){ .kdmw-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 800px){ .kdmw-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 520px){ .kdmw-grid{ grid-template-columns: 1fr;} }
.kdmw-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,.08); transition:.2s; }
.kdmw-card:hover{ transform: translateY(-3px); }
.kdmw-thumb { width:100%; height:160px; object-fit:cover; display:block; }
.kdmw-body { padding:10px 12px; }
.kdmw-title { font-weight:700; font-size:1rem; line-height:1.25; margin-bottom:6px; }
.kdmw-meta { color:#666; font-size:.85rem; }

/* ---- 3열 가로 리스트 (뉴스·Q&A) ---- */
.kdmw-3col { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.kdmw-list-item{ background:#fff; border-radius:10px; padding:10px 12px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.kdmw-list-item a{ font-weight:700; }


/* 연구 50년 3단 섹션 스타일 */
.research-50-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 40px auto;
  max-width: 1200px;
}

.research-50-column {
  flex: 1;
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.research-50-column:hover {
  transform: translateY(-5px);
}

.research-50-title {
  font-size: 1.4em;
  font-weight: bold;
  color: #004080;
  margin-bottom: 10px;
  border-bottom: 2px solid #004080;
  padding-bottom: 5px;
}

.research-50-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}

.research-50-text {
  font-size: 0.95em;
  color: #333;
  line-height: 1.5em;
}



/* 컨테이너 기본 */
.km-slideshow {
  position: relative;
  width: 100%;
  max-width: 1200px;    /* 필요시 조정 */
  aspect-ratio: 16 / 9; /* 원하는 비율로 */
  overflow: hidden;
  margin: 0 auto 1rem;
  background: #0000000d;
}

/* 각 슬라이드 래퍼(스크립트에서 자동 부여) */
.km-slide-item {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 900ms ease;
}

/* 활성화된 슬라이드(페이드 모드) */
.km-slideshow[data-transition="fade"] .km-slide-item.active {
  opacity: 1;
}

/* 이미지가 컨테이너에 맞게 보이도록 */
.km-slide-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 네비게이션 버튼 */
.km-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: #00000066;
  color: #fff;
  border: 0;
  padding: .4rem .6rem;
  cursor: pointer;
  font-size: 14px;
  border-radius: .5rem;
}
.km-nav:hover { background: #00000099; }
.km-prev { left: .5rem; }
.km-next { right: .5rem; }

/* 도트 인디케이터 */
.km-dots {
  position: absolute;
  left: 50%;
  bottom: .5rem;
  transform: translateX(-50%);
  display: flex;
  gap: .4rem;
  z-index: 6;
}
.km-dot {
  width: .6rem; height: .6rem; border-radius: 50%;
  background: #ffffff88; cursor: pointer;
  border: 1px solid #ffffffaa;
}
.km-dot.active { background: #ffffff; }

/* 슬라이드 모드 전환용 레이아웃 */
.km-slideshow[data-transition="slide"] .km-track {
  position: absolute;
  inset: 0;
  display: flex;
  height: 100%;
  transition: transform 700ms ease;
}
.km-slideshow[data-transition="slide"] .km-slide-item {
  position: relative; /* 트랙 플렉스 아이템으로 동작 */
  flex: 0 0 100%;
  opacity: 1;         /* 슬라이드 모드는 불투명 */
}