미디어위키:Common.css

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

• 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
• 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
• 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.

/* ---- 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;         /* 슬라이드 모드는 불투명 */
}


/* ====== 학과 그리드 카드 ====== */
.kdmw-dept-toolbar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0 16px;
}
.kdmw-chip{border:1px solid #ddd; padding:6px 10px; border-radius:999px; cursor:pointer; font-size:.9rem; user-select:none}
.kdmw-chip.is-active{background:#111;color:#fff;border-color:#111}

.kdmw-grid{
  display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:14px;
}
@media(min-width:600px){ .kdmw-grid{ grid-template-columns:repeat(2,1fr);} }
@media(min-width:960px){ .kdmw-grid{ grid-template-columns:repeat(3,1fr);} }
@media(min-width:1280px){ .kdmw-grid{ grid-template-columns:repeat(4,1fr);} }

.kdmw-card{
  border:1px solid #e6e6e6; border-radius:12px; overflow:hidden; background:#fff; display:flex; flex-direction:column
}
.kdmw-card .thumb{aspect-ratio:16/9; background:#f3f3f3; display:block; overflow:hidden}
.kdmw-card .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.kdmw-card .body{padding:12px 14px}
.kdmw-card h3{margin:.2rem 0 .4rem; font-size:1.05rem}
.kdmw-card .meta{color:#666; font-size:.85rem; display:flex; gap:10px; flex-wrap:wrap}
.kdmw-card .tags{margin-top:6px; display:flex; gap:6px; flex-wrap:wrap}
.kdmw-tag{background:#f2f4f7; border:1px solid #e3e7ee; padding:2px 8px; border-radius:999px; font-size:.8rem}

.kdmw-empty{padding:24px; border:1px dashed #ccc; border-radius:12px; text-align:center; color:#777}

/* ====== 탭(학부 9개 전공) ====== */
.kdmw-tabs{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 16px}
.kdmw-tab{padding:8px 12px; border-radius:10px; border:1px solid #ddd; cursor:pointer}
.kdmw-tab.is-active{background:#111; color:#fff; border-color:#111}

/* ====== 타임라인(간단) ====== */
.kdmw-timeline{position:relative; margin:18px 0; padding-left:18px;}
.kdmw-timeline::before{content:""; position:absolute; left:6px; top:0; bottom:0; width:2px; background:#e5e7eb}
.kdmw-tl-item{position:relative; margin:12px 0}
.kdmw-tl-item::before{content:""; position:absolute; left:-1px; top:.35rem; width:10px; height:10px; border-radius:50%; background:#111}

/* ====== 유틸 ====== */
.kdmw-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.kdmw-search{flex:1; min-width:220px}
.kdmw-search input{width:100%; padding:8px 10px; border:1px solid #ddd; border-radius:10px}
.kdmw-muted{color:#666; font-size:.9rem}