/* ============================================================
   가온길 에듀 — 전역 프리미엄 다크 셸
   모든 하위 페이지에 공통 로드되어, 페이지별로 남아있는
   밝은(백색) 배경을 가온길 다크 톤으로 통일합니다.
   ============================================================ */


/* ──────────────────────────────────────────────────────────
   수업자료 보드(sooup*.html) 및 전역 다크 테마 변수 오버라이드
   페이지 렌더링 또는 DOM 동적 갱신 시 흰색 잔상이 남지 않도록
   모든 백색/연파스텔 관련 CSS 변수 및 컴포넌트 클래스를 즉시 다크 톤으로 고정합니다.
   ────────────────────────────────────────────────────────── */

:root {
  --paper: #081321 !important;
  --paper-deep: #050b14 !important;
  --paper-soft: #0d1626 !important;
  --card: #0d1626 !important;
  --ink: #edf5ff !important;
  --ink-2: #d5e1f2 !important;
  --muted: #aab6c9 !important;
  --faint: #78879c !important;
  --line: rgba(214,173,99,.22) !important;
  --line-soft: rgba(255,255,255,.08) !important;
  --shadow-card: 0 4px 20px rgba(0,0,0,.45) !important;
  --shadow-lift: 0 10px 30px rgba(0,0,0,.55) !important;
}

/* 수업설계 보드 컴포넌트 0ms 즉시 다크화 오버라이드 */
.browser,
.detail,
.detail-hd,
.std-full,
.tabbar,
.panel,
.card,
.filters,
.side,
.list-meta,
.std-item,
.lesson-hd,
.lesson-row,
.q,
.std-card,
.rubric-table th,
.rubric-table td,
.matrix,
.matrix table,
.matrix th,
.matrix td {
  background-color: var(--gg-panel) !important;
  color: var(--gg-text) !important;
  border-color: var(--gg-line) !important;
}

.browser {
  background: var(--gg-bg-0) !important;
  border-color: var(--gg-line) !important;
}

.side {
  background: var(--gg-bg-1) !important;
  border-right-color: var(--gg-line) !important;
}

.filters {
  background: var(--gg-bg-1) !important;
  border-bottom-color: var(--gg-line) !important;
}

.filters input,
.filters select {
  background-color: var(--gg-bg-0) !important;
  color: var(--gg-text) !important;
  border-color: var(--gg-line) !important;
}

.list-meta {
  background-color: var(--gg-bg-0) !important;
  color: var(--gg-text-muted) !important;
  border-bottom-color: var(--gg-line) !important;
}

.std-item {
  border-bottom-color: var(--gg-line-soft) !important;
}

.std-item:hover,
.std-item.on {
  background-color: var(--gg-panel-2) !important;
}

.std-item.on .std-title {
  color: var(--gg-gold) !important;
}

.detail-hd {
  background: linear-gradient(180deg, var(--gg-bg-1), var(--gg-panel)) !important;
  border-bottom-color: var(--gg-line) !important;
}

.std-full {
  background-color: var(--gg-panel-2) !important;
  color: var(--gg-text) !important;
}

.tabbar {
  background-color: var(--gg-bg-1) !important;
  border-bottom-color: var(--gg-line) !important;
}

.tabbar button {
  color: var(--gg-text-muted) !important;
  border-right-color: var(--gg-line) !important;
  background-color: transparent !important;
}

.tabbar button:hover {
  color: var(--gg-gold) !important;
  background-color: var(--gg-panel-2) !important;
}

.tabbar button.on {
  background: linear-gradient(180deg, #f0d99b 0%, #d6ad63 56%, #b98532 100%) !important;
  color: #071221 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(214,173,99,.25) !important;
  border-bottom-color: transparent !important;
}

.tabbar button.on .t-n {
  color: #071221 !important;
}

.lesson-hd {
  background-color: var(--gg-bg-1) !important;
  color: var(--gg-gold) !important;
  border-bottom-color: var(--gg-line) !important;
}

.lesson-row {
  border-bottom-color: var(--gg-line-soft) !important;
}

.lesson-row div {
  color: var(--gg-text-muted) !important;
}

.lesson-row div b {
  color: var(--gg-text) !important;
}

:root{
  --gg-bg-0:#050b14;
  --gg-bg-1:#081321;
  --gg-panel:#0d1626;
  --gg-panel-2:#111f34;
  --gg-line:rgba(214,173,99,.22);
  --gg-line-soft:rgba(255,255,255,.08);
  --gg-gold:#f0d99b;
  --gg-gold-strong:#d6ad63;
  --gg-text:#edf5ff;
  --gg-text-muted:#aab6c9;
  --gg-shadow: 0 18px 48px rgba(0,0,0,.34);
}

html{
  background: var(--gg-bg-0) !important;
}

html, body{
  color-scheme: dark;
}

body{
  background:
    linear-gradient(rgba(214,173,99,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,173,99,.04) 1px, transparent 1px),
    radial-gradient(circle at 9% 18%, rgba(214,173,99,.10), transparent 28rem),
    linear-gradient(180deg, var(--gg-bg-0) 0%, var(--gg-bg-1) 45%, var(--gg-bg-0) 100%) !important;
  background-size: 64px 64px, 64px 64px, auto, auto !important;
}

/* scrollbar */
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background: var(--gg-bg-0); }
::-webkit-scrollbar-thumb{ background: rgba(214,173,99,.32); border-radius: 8px; border: 3px solid var(--gg-bg-0); }
::-webkit-scrollbar-thumb:hover{ background: rgba(214,173,99,.5); }

::selection{ background: rgba(214,173,99,.32); color:#fff; }

a{ text-decoration-color: rgba(214,173,99,.4); }

body [class*="wrap"],
body [class*="container"],
body [class*="content"],
body [class*="panel"],
body [class*="card"]:not([class*="badge"]),
body [class*="box"]:not([class*="checkbox"]),
body [class*="section"],
body main,
body table{
  scrollbar-color: rgba(214,173,99,.35) transparent;
}

/* ============================================================
   전역 인터랙션 다듬기 — 탐구주제 도구(tamgu)의 골드 호버 톤을
   사이트 전체에 안전하게 확장합니다. 각 페이지가 이미 고유한
   :hover 규칙을 갖고 있으면 그대로 우선 적용되고, 여기서는
   부드러운 전환(transition)과 포커스 표시만 보강합니다.
   ============================================================ */
a, button, summary, .resource-card, .feature-card, [class*="card"], [class*="btn"], [class*="Btn"]{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}

:focus-visible{
  outline: 2px solid rgba(240,217,155,.85) !important;
  outline-offset: 2px;
}

/* dark-shell 스크립트가 새로 어둡게 바꾼 요소는 아직 자체 hover가
   없을 가능성이 높으므로, 이 요소들에 한해 골드 리프트 효과를 추가합니다. */
[data-gaongil-dark]:hover{
  box-shadow: 0 18px 44px rgba(0,0,0,.38), inset 0 0 0 1px rgba(214,173,99,.22);
}

/* 클래스가 없는 순수 버튼 요소를 위한 기본 골드 호버 (이미 스타일이
   지정된 버튼은 자체 class 규칙이 우선 적용되어 영향 없음) */
button:not([class]):hover,
button:not([class]):focus-visible{
  background: linear-gradient(180deg,#f0d99b 0%,#d6ad63 56%,#b98532 100%);
  color: #071221;
}

/* ============================================================
   공지사항 및 하단 푸터 로고 크기 최적화
   ============================================================ */
.gaongil-footer-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  padding: 8px 0 12px !important;
  border-bottom: 1px solid rgba(214, 173, 99, 0.22) !important;
}

.gaongil-footer-brand img,
footer img,
.footer img,
.site-footer img,
.home-footer img,
.notice img,
.gaongil-notice-modal img,
.gaongil-notice-popup img,
header img,
.header img,
.site-header img,
.topbar img,
.app-header img,
.masthead img,
.brand img,
.brand-lockup img,
.brand-logo-card img {
  max-height: 42px !important;
  max-width: 240px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

body.gaongil-linked-page header:not(.gaongil-portal-bar),
body.gaongil-linked-page .app-header,
body.gaongil-linked-page .masthead,
body.gaongil-linked-page .topbar:not(.gaongil-portal-bar) {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  box-shadow: none !important;
}

body.gaongil-linked-page .app-header .topline,
body.gaongil-linked-page header .topline {
  display: none !important;
}