/* okimsmedical static mirror — custom overrides (replaces imweb runtime JS behaviour) */

/* keep inline nav visible without imweb JS */
._inline_menu_container,
.nav.navbar-nav { visibility: visible !important; }

/* desktop dropdown: reveal submenu on hover (was imweb-JS driven).
   .mo-open is toggled by _site.js; :hover kept as a no-JS fallback. */
li.mo-open > .dropdown-menu,
li.mo-open > ul,
._inline_menu_container li:hover > .dropdown-menu,
.navbar-nav li:hover > .dropdown-menu,
._inline_menu_container li:hover > ul,
.nav.navbar-nav > li:hover > ul { visibility: visible !important; opacity: 1 !important; }

/* hide imweb JS-only drawers we can't drive (notification bell drawer) */
#site_alarm_slidemenu_container { display: none !important; }

/* mobile slide menu — driven by our _site.js (body.mmenu-open).
   transform-based slide so imweb's mobile media queries can't fight it. */
#mobile_slide_menu_wrap {
  position: fixed !important;
  top: 0 !important; right: 0 !important; left: auto !important; bottom: 0 !important;
  height: 100vh !important;
  width: min(82vw, 320px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #fff !important;
  box-shadow: -6px 0 24px rgba(0,0,0,.18) !important;
  z-index: 99999 !important;
  transform: translateX(100%) !important;
  transition: transform .28s ease !important;
}
body.mmenu-open #mobile_slide_menu_wrap { transform: translateX(0) !important; }

/* dark overlay behind the mobile menu */
#mmenu-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transition: opacity .25s ease; z-index: 9990;
}
body.mmenu-open #mmenu-overlay { opacity: 1; visibility: visible; }

/* 관련 영상 (home page youtube section replacement) */
.okims-related-videos{max-width:1200px;margin:0 auto;padding:70px 20px;}
.okims-related-videos .rv-label{text-align:center;color:#8a8f98;font-size:14px;letter-spacing:4px;margin:0 0 6px;font-weight:600;}
.okims-related-videos h2.rv-title{text-align:center;font-size:32px;font-weight:700;color:#1a1a1a;margin:0 0 40px;letter-spacing:-1px;}
.okims-related-videos .rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.okims-related-videos .rv-item{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.10);background:#000;}
.okims-related-videos .rv-item iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
@media(max-width:768px){
  .okims-related-videos{padding:44px 18px;}
  .okims-related-videos h2.rv-title{font-size:24px;margin-bottom:26px;}
  .okims-related-videos .rv-grid{grid-template-columns:1fr;gap:16px;}
}

/* login prompt row inside menus — not used on a static mirror */
.mobile_slide_menu_container .login_need,
.mobile_slide_menu_container [class*="login"],
._inline_menu_container [class*="login_need"] { display: none !important; }

/* imweb board / "최신글" card grids (type_grid).
   imweb's board JS normally groups cards into .post_row rows AND strips their
   inline display:none. We removed that JS, so the cards stayed hidden (보도자료
   showed empty) or unlaid-out. Reveal them and lay the flat _card_wrap cards
   directly as a responsive grid. */
.widget .type_grid.grid_02,
.widget .type_grid.grid_03,
.widget .type_grid.grid_04 { display: grid !important; gap: 22px; visibility: visible !important; }
/* newest/board list containers start visibility:hidden (imweb JS reveals them) */
.widget .list-style-gallery,
.widget .type_grid,
.widget .type_grid .list-style-card._card_wrap { visibility: visible !important; }
.widget .type_grid.grid_02 { grid-template-columns: repeat(2, 1fr); }
.widget .type_grid.grid_03 { grid-template-columns: repeat(3, 1fr); }
.widget .type_grid.grid_04 { grid-template-columns: repeat(4, 1fr); }
.widget .type_grid .list-style-card._card_wrap { display: block !important; width: auto !important; margin: 0 !important; }
.widget .type_grid .list-style-card._card_wrap .card { height: 100%; }
/* thumbnail: imweb JS sets a square (1:1) inline height matching card width — replicate it */
.widget .type_grid .card_wrapper { position: relative; width: 100%; aspect-ratio: 1 / 1; background-size: cover; background-position: 50% 50%; }
.widget .type_grid .card_wrapper .card-head { height: 100%; }
.widget .type_grid .okims-news-card .okims-news-meta {
  display: block;
  margin-bottom: 5px;
  color: #6f7782;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}
@media (max-width: 768px) {
  .widget .type_grid.grid_02,
  .widget .type_grid.grid_03,
  .widget .type_grid.grid_04 { grid-template-columns: 1fr !important; gap: 16px; }
}

/* ===== 패밀리사이트 링크 (오상신경외과 · 연세오상병원) — site.js가 헤더/푸터에 주입 ===== */
.okims-family { font-size: 13px; display: flex; align-items: center; gap: 8px; line-height: 1; }
.okims-family a { color: inherit; text-decoration: none; }
.okims-family a:hover { text-decoration: underline; }
.okims-family .okims-family-label { opacity: .55; font-weight: 600; }
.okims-family .okims-family-sep { opacity: .4; }
#inline_header_normal { position: relative; }
.okims-family-header { position: absolute; right: 22px; top: 0; bottom: 0; color: #444; white-space: nowrap; }
.okims-family-header a { color: #444; }
@media (max-width: 1180px) { .okims-family-header { display: none; } }
.okims-family-footer { width: 100%; box-sizing: border-box; justify-content: center; flex-wrap: wrap;
  gap: 10px; padding: 13px 16px; background: #1a1a1a; color: #cfd3da; }
.okims-family-footer a { color: #f0f0f0; }
.okims-family-footer .okims-family-label { color: #8f8f8f; }

/* ===== 인증서 팝업 (홈: 기업부설연구소 인정서 · 벤처기업확인서) ===== */
#okims-cert-popups { position: fixed; inset: 0; z-index: 10000; pointer-events: none; }
#okims-cert-popups .okims-cert { position: fixed; top: 88px; left: 50%; width: min(360px, 92vw);
  background: #fff; border-radius: 8px; box-shadow: 0 14px 46px rgba(0,0,0,.38);
  display: flex; flex-direction: column; overflow: hidden; pointer-events: auto; }
#okims-cert-popups .okims-cert[data-key="cert-rnd"] { transform: translateX(calc(-100% - 10px)); }
#okims-cert-popups .okims-cert[data-key="cert-venture"] { transform: translateX(10px); }
.okims-cert .cert-head { display: flex; align-items: center; justify-content: space-between;
  background: #26374f; color: #fff; padding: 9px 14px; font-size: 14px; font-weight: 600; }
.okims-cert .cert-head .cert-x { background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; }
.okims-cert .cert-body { overflow: auto; max-height: 64vh; background: #eee; }
.okims-cert .cert-body img { display: block; width: 100%; height: auto; }
.okims-cert .cert-foot { display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; font-size: 13px; background: #fafafa; border-top: 1px solid #eaeaea; }
.okims-cert .cert-foot label { display: flex; align-items: center; gap: 6px; color: #555; cursor: pointer; margin: 0; font-weight: 400; }
.okims-cert .cert-foot .cert-close { background: none; border: 0; color: #333; font-size: 13px; cursor: pointer; }
@media (max-width: 820px) {
  #okims-cert-popups .okims-cert { left: 50%; width: 92vw; }
  #okims-cert-popups .okims-cert[data-key="cert-rnd"] { transform: translateX(-50%); top: 14px; z-index: 2; }
  #okims-cert-popups .okims-cert[data-key="cert-venture"] { transform: translate(-46%, 0); top: 34px; z-index: 1; }
}