/* =========================================================
   파일명: /assets/css/base.css
   역할: 사이트 기본값 / 토큰 / 폰트 / 색상 / reset 보조
   기준: 2026-05-11 CSS ROLE STANDARD v1
========================================================= */
:root{
  /* 공통 본문 폭 기준: 모든 서브페이지는 이 값 하나를 기준으로 정렬합니다. */
  --nb-page-width: min(92vw, 1440px);
  --nb-wrap: var(--nb-page-width);
  --nb-wrap-wide: var(--nb-page-width);
  --nb-wrap-narrow: min(92vw, 1180px);
  --nb-header-height: 78px;
  --nb-subnav-height: 58px;
  --nb-section-gap: clamp(30px, 3.2vw, 56px);
  --nb-section-gap-tight: clamp(18px, 2vw, 30px);
  --nb-block-gap: clamp(16px, 1.8vw, 26px);
  --nb-content-pad: clamp(24px, 3vw, 48px);
  --nb-card-pad: clamp(20px, 2.2vw, 32px);
  --nb-ink: #0f172a;
  --nb-muted: #64748b;
  --nb-blue: #0f66bb;
  --nb-blue-dark: #0b355d;
  --nb-soft-bg: #f5f8fc;
  --nb-panel-bg: #ffffff;
  --nb-card-border: #dbe7f3;
  --nb-shadow-soft: 0 18px 45px rgba(15, 23, 42, .08);
}

html{scroll-behavior:smooth;}
body{overflow-x:hidden; color:var(--nb-ink);}
*,*::before,*::after{box-sizing:border-box;}
img,video,iframe,svg{max-width:100%;}
img{height:auto;}
a{text-decoration-thickness:1px; text-underline-offset:3px;}



/* =========================================================
   Hover Compact Relation UI
========================================================= */

.nb-relation-card,
.nb-series-card{
  position:relative;
  overflow:visible;
}

.nb-relation-card{
  min-height:auto !important;
  padding:12px 14px !important;
}

.nb-relation-card .nb-relation-card-desc{
  display:none;
}

.nb-relation-card .nb-hover-desc{
  position:absolute;
  left:12px;
  bottom:calc(100% + 10px);
  width:260px;
  background:#ffffff;
  border:1px solid #d7e3f4;
  border-radius:12px;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  font-size:13px;
  line-height:1.6;
  color:#475569;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:all .18s ease;
  z-index:50;
  pointer-events:none;
}

.nb-relation-card:hover .nb-hover-desc{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.nb-relation-card-title{
  font-size:16px !important;
  line-height:1.4 !important;
}

.nb-relation-card-thumb img{
  object-fit:contain;
}

.nb-series-section{
  margin-top:70px !important;
  padding-top:24px;
  border-top:1px solid #dbe7f5;
  opacity:.92;
}

.nb-series-section .nb-section-title{
  font-size:30px;
}

.nb-series-section .nb-series-card{
  transform:scale(.96);
}

.nb-series-section .nb-series-card:hover{
  transform:scale(1);
}

@media (max-width:768px){

  .nb-relation-card .nb-hover-desc{
    position:static;
    width:100%;
    margin-top:10px;
    opacity:1;
    visibility:visible;
    transform:none;
    display:none;
    pointer-events:auto;
  }

  .nb-relation-card:hover .nb-hover-desc{
    display:block;
  }
}