﻿/* 다크 테마(리뉴얼 2B 시안) — 프론트 _Layout 에서만 로드(관리자 _EmptyLayout 은 미로드).
   전역 배경/글자색/선택색 + 프론트 레이아웃 컴포넌트(상단 내비/배너/서브내비) + 페이저 다크 색상.
   구조/레이아웃(예: .pager 배치·모바일 토글)은 공용 site.css 에 두고, 여기서는 색상 테마만 담당한다.
   → 관리자는 site.css 의 구조만 받고 이 다크 색상은 받지 않으므로 라이트 테마와 충돌하지 않는다. */
body { background: #05070f; color: #e8ecf7; }
::selection { background: #f5c542; color: #0a1130; }

/* ══ 상단 내비게이션 · 푸터(_Layout) ══ */
.site-nav { background: #0c1230; border-bottom: 1px solid #23306a; }
.site-nav .navbar-brand { display: flex; align-items: center; gap: 12px; }
/* 로고 그림. 테두리와 바탕은 그림 안에 이미 그려져 있으므로 CSS 로 덧그리지 않는다
   (덧그리면 모서리가 두 겹으로 보인다). 크기는 글자 로고였을 때와 같은 38px 정사각. */
.brand-logo { width: 38px; height: 38px; border-radius: 9px; display: block; object-fit: cover; }
/* 이름은 흰색, ".NET" 만 골드로 뽑는다(.dot). 로고 그림과 함께 서는 자리라 글자까지
   단색이면 브랜드 색이 그림에만 남는다. */
.brand-text { font-family: 'Press Start 2P', monospace; font-size: 15px; color: #e8ecf7; }
.brand-text .dot { color: #f5c542; }
.site-nav .nav-link { color: #8da0d6 !important; font-weight: 600; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus, .site-nav .nav-link.active, .site-nav .show > .nav-link { color: #f5c542 !important; }
.site-nav .dropdown-menu { background: #0c1230; border: 1px solid #23306a; }
.site-nav .dropdown-item { color: #c3cdec; }
.site-nav .dropdown-item:hover, .site-nav .dropdown-item:focus { background: #16235e; color: #f5c542; }
/* 제품 차림표: 제품명은 누를 수 없는 머리글이라 항목보다 밝게 두어 계층을 보이게 하고,
   그 제품에 딸린 항목(.is-sub)은 들여써 소속을 드러낸다. 골드는 쓰지 않는다 — 누르는 것으로 보인다. */
.site-nav .dropdown-header { color: #e8ecf7; font-weight: 700; font-size: .8rem; }
.site-nav .dropdown-item.is-sub { padding-left: 2.25rem; }
/* 모바일 햄버거 토글러: 클릭/포커스 시 나타나는 테두리·포커스 링 제거 */
.site-nav .navbar-toggler { border: 0; }
.site-nav .navbar-toggler:focus, .site-nav .navbar-toggler:active { box-shadow: none; outline: none; }
/* 모바일(≤991.98px, navbar-expand-lg 의 접힘 구간): 펼친 메뉴를 레이어로 띄운다.
   Bootstrap 기본은 흐름 안에서 펼쳐져 본문 전체가 아래로 밀리고, 드롭다운을 열면 또 밀린다.
   메뉴는 잠깐 보고 닫는 것이라 배치를 흔들 이유가 없으므로 absolute 로 덮는다.
   기준은 .site-nav(relative) — 사이 .container 를 건너뛰어 화면 폭을 꽉 채운다. */
@media (max-width: 991.98px) {
	.site-nav { position: relative; }
	.site-nav .navbar-collapse {
		position: absolute;
		top: 100%; left: 0; right: 0;
		z-index: 1030;
		max-height: calc(100vh - 100%);
		overflow-y: auto;
		padding: 6px 18px 16px;
		background: #0c1230;
		border-bottom: 1px solid #23306a;
		box-shadow: 0 18px 34px rgba(0, 0, 0, .5);
	}
	/* 레이어 안에서 열리는 하위 메뉴는 배경을 한 단계 띄워 계층을 보이게 한다. */
	.site-nav .navbar-collapse .dropdown-menu { background: #101a3f; border-color: #2c3c7e; }
}
/* 사용자 메뉴 — 사진은 테두리로 배경에서 떼어 내고, 열었거나 손이 얹히면 골드로 바꿔
   지금 이 자리가 눌린 것임을 보인다. 레이어 안의 이름은 항목보다 밝게 두어 계층을 드러낸다. */
.site-nav .user-photo { border: 2px solid #2c3c7e; background: #0a1130; }
.site-nav .user-toggle:hover .user-photo,
.site-nav .user-toggle:focus .user-photo,
.site-nav .show > .user-toggle .user-photo { border-color: #f5c542; }
.site-nav .user-panel .user-name { color: #e8ecf7; font-weight: 700; }

/* 언어 전환 — 지금 쓰는 언어만 골드로 남기고 나머지는 눌러 볼 것으로 보이게 둔다. */
.site-lang .lang-link { color: #6f7ea8; }
.site-lang .lang-link:hover, .site-lang .lang-link:focus { color: #c3cdec; border-color: #23306a; }
.site-lang .lang-link.is-on { color: #f5c542; border-color: #f5c542; }

.site-footer { background: #080b1a; border-top: 1px solid #23306a; color: #6f7ea8; font-family: monospace; }

/* ══ 상단 픽셀 배너(_BannerPartial) ══ */
.banner { position: relative; height: 148px; background: linear-gradient(180deg, #1a2a6e 0%, #10193f 68%, #0a1028 100%); overflow: hidden; border-bottom: 1px solid #23306a; }
.banner .dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(245,197,66,0.16) 1.5px, transparent 1.5px); background-size: 26px 26px; }
.banner .scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,0.10) 2px 4px); }
.banner .caption { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.banner .caption .title { font-family: 'Press Start 2P'; font-size: 28px; color: #f5c542; text-shadow: 0 3px 0 #070b1f; text-transform: uppercase; }
.banner .caption .desc { font-size: 14px; color: #a9b6df; }
/* 모바일: 배너 높이·글자 축소 */
@media (max-width: 768px) {
	.banner { height: 92px; }
	.banner .caption { gap: 6px; padding: 0 16px; }
	.banner .caption .title { font-size: 18px; }
	.banner .caption .desc { font-size: 12px; text-align: center; }
}

/* ══ 서브 내비게이션(_NavigationPartial) ══ */
.sub-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 0 32px; background: #0a0e1f; border-bottom: 1px solid #23306a; }
.sub-nav .tabs { display: flex; flex-wrap: wrap; }
.sub-nav .tabs a { text-decoration: none; padding: 16px 20px; font-size: 15px; font-weight: 600; color: #8da0d6; border-bottom: 2px solid transparent; }
.sub-nav .tabs a:hover { color: #c3cdec; }
.sub-nav .tabs a.active { font-weight: 700; color: #f5c542; border-bottom-color: #f5c542; }
.sub-nav .crumb { font-size: 13px; font-family: monospace; color: #6f7ea8; display: flex; align-items: center; gap: 8px; }
.sub-nav .crumb a { text-decoration: none; color: #8da0d6; }
.sub-nav .crumb a:hover { color: #c3cdec; }
.sub-nav .crumb .cur { color: #f5c542; }
/* 모바일: 브레드크럼 숨김(탭만 노출, 공간 확보) */
@media (max-width: 768px) {
	.sub-nav { padding: 0 14px; flex-wrap: nowrap; }
	.sub-nav .crumb { display: none; }
	/* 탭: 가로 스와이프(스크롤). 줄바꿈 대신 넘치면 스크롤 */
	.sub-nav .tabs { flex-wrap: nowrap; min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.sub-nav .tabs::-webkit-scrollbar { display: none; }
	.sub-nav .tabs a { flex: 0 0 auto; white-space: nowrap; padding: 14px 16px; }
}

/* ══ 페이지네이션(.pager) 다크 색상 — 구조/모바일 토글은 site.css ══ */
.pager a { color: #8da0d6; }
.pager a:hover { color: #e8ecf7; }
.pager a.pg-num { border-color: #23306a; }
.pager a.pg-num:hover { border-color: #f5c542; color: #f5c542; }
.pager a.pg-cur { background: #f5c542; color: #0a1130; border-color: #f5c542; }
.pager a.pg-cur:hover { color: #0a1130; }
.pager a.pg-off { color: #4f5d85; border-color: transparent; }
.pager a.pg-mobile { border-color: #23306a; }
.pager a.pg-mobile:hover { border-color: #f5c542; color: #f5c542; }

/* 푸터의 법적 문서 링크 — 개인정보처리방침만 굵게 냅니다.
   개인정보보호법 시행령이 다른 고지사항과 구분해 표시하도록 정하고 있습니다. */
.site-footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px !important; font-size: 12px; }
.site-footer-links a { color: #8da0d6; text-decoration: none; }
.site-footer-links a:hover { color: #c3cdec; }
.site-footer-links a.is-strong { color: #c3cdec; font-weight: 700; }
.site-footer-links a.is-strong:hover { color: #f5c542; }
