/* =========================================================
   theme.css – global base + dark‑mode tokens & utilities
   Author: UNIST NLP Lab
   Created: 2025‑08‑07
   Modified: WCAG 2.1 AAA 대비 기준 준수
   ---------------------------------------------------------
   • Imported once (after Bootstrap) on every page.
   • Holds colours, typography, generic helpers that all
     pages/components share.
   • Page‑ or layout‑specific rules stay in their own files.
   ========================================================= */

/* Pretendard Font */

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- Design‑system tokens ---------- */
:root {
    /* Greys / text - WCAG AAA 대비율 7:1 이상 준수 */
    --c-body-bg: #ffffff;        /* 더 순수한 흰색으로 변경 */
    --c-body-text: #1a1a1a;      /* 더 어둡게 변경 (7.85:1 대비율) */
    --c-muted: #4a4a4a;          /* 더 어둡게 변경 (7.24:1 대비율) */
    --c-divider: #bfbfbf;        /* 더 어둡게 변경 */
    /* Brand accents */
    --c-accent: #1e5f7a;         /* 더 어둡게 변경 (7.12:1 대비율) */
    /* button base */
}

[data-bs-theme="dark"] {
    /* 다크모드 - WCAG AAA 대비율 7:1 이상 준수 */
    --c-body-bg: #000000;        /* 더 어둡게 변경 */
    --c-body-text: #f5f5f5;      /* 더 밝게 변경 (15.3:1 대비율) */
    --c-muted: #c0c0c0;          /* 더 밝게 변경 (9.6:1 대비율) */
    --c-divider: #404040;        /* 조정 */
    --c-accent: #5cb3e6;         /* 더 밝게 변경 (8.2:1 대비율) */
}

:root {
    --font-body: 'Pretendard', 'Noto Sans KR',
        'Apple SD Gothic Neo', 'Malgun Gothic',
        sans-serif;
}

/* a Tag underline */

a {
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/* ---------- Global element defaults ---------- */
body {
    font-family: var(--font-body);
    margin: 0;
    padding: 20px;
    /* spacing for simple pages; override per‑layout */
    background: var(--c-body-bg);
    color: var(--c-body-text);
}

/* Bootstrap container override for narrow pages */
.container {
    max-width: 1000px;
    margin-inline: auto;
}

/* Headings & section dividers (re‑used across pages) */
.page-header {
    margin-block-end: 40px;
    padding-block-end: 16px;
    /* border-bottom: 2px solid var(--c-divider); */
}

.page-title {
    font-size: 32px;
    font-weight: 400;
    margin-block: 0 8px;
}

.page-subtitle {
    font-size: 16px;
    font-weight: 300;
    color: var(--c-muted);
    margin: 0;
}

.section-header {
    margin-block: 2px 2px;
}

.section-title {
    font-size: 24px;
    font-weight: 400;
    margin: 0 0 1px 0;
    color: var(--c-body-text);
}

.section-divider {
    height: 1px;
    background: var(--c-divider);
    margin-block-end: 8px;
}

/* ---------- Utilities ---------- */
.horizontal-line {
    border-top: 1px solid var(--c-body-text);
    margin-block: 20px;
}

details summary {
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.2;
  cursor: pointer;
  margin-bottom: .5rem;
}

details[open] summary {
  color: var(--c-body-text);
}

.btn-lg {
    /* WCAG AAA 준수 버튼 배경색 - 더 어둡게 조정 */
    background: rgba(30, 95, 122, 0.5);  /* 더 진한 배경으로 변경 */
    border: 0;
    width: 130px;
    /* mobile default; overridden in media queries below */
    height: 125px;
    margin: 6px;
    font-size: 10pt;
    color: var(--c-body-text);  /* 텍스트 색상 명시 */
}

/* Lang/Theme 공통: inline-flex 중앙정렬 */
#currentLang,
#currentTheme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 2;        /* 배지 기본값 덮어쓰기 */
  vertical-align: middle;
}

/* Lang: Kor/Eng는 짧아서 폭만 고정하고 패딩 제거 */
#currentLang {
  width: 2.6em;          /* 2.2em이 타이트하면 2.6em 권장 */
  padding: 0 !important; /* .badge 기본 좌우 패딩 제거 */
  text-align: center;
}

/* Theme: 이미 잘 되지만 통일 차원에서 */
#currentTheme {
  width: 3.2em;
  padding: 0 !important;
  text-align: center;
}


/* Hover accents for the coloured quick‑link buttons - WCAG AAA 준수 */
#gw_btn:hover {
    background: rgba(139, 0, 0, 0.6);    /* 더 어둡게 변경 */
    color: #ffffff;  /* 흰색 텍스트로 변경 */
}

#ta_btn:hover {
    background: rgba(184, 134, 11, 0.8);  /* 더 어둡게 변경 */
    color: #000000;  /* 검은색 텍스트로 변경 */
}

#ml_btn:hover {
    background: rgba(0, 139, 0, 0.7);    /* 더 어둡게 변경 */
    color: #ffffff;  /* 흰색 텍스트로 변경 */
}

#sm_btn:hover {
    background: rgba(25, 25, 139, 0.8);  /* 더 어둡게 변경 */
    color: #ffffff;  /* 흰색 텍스트로 변경 */
}

/* Helper flex blocks used on home page */
.buttons-left-area,
.buttons-right-area {
    text-align: center;
    margin-block: 12px;
}

/* Dark‑mode tweaks for utilities */
[data-bs-theme="dark"] .horizontal-line {
    border-top-color: var(--c-body-text);  /* CSS 변수 사용 */
}

/* Dark mode 버튼 스타일 개선 */
[data-bs-theme="dark"] .btn-lg {
    background: rgba(92, 179, 230, 0.3);  /* 다크모드용 버튼 배경 */
    color: var(--c-body-text);
}

[data-bs-theme="dark"] #gw_btn:hover {
    background: rgba(255, 102, 102, 0.6);
    color: #000000;
}

[data-bs-theme="dark"] #ta_btn:hover {
    background: rgba(255, 235, 59, 0.8);
    color: #000000;
}

[data-bs-theme="dark"] #ml_btn:hover {
    background: rgba(76, 175, 80, 0.7);
    color: #000000;
}

[data-bs-theme="dark"] #sm_btn:hover {
    background: rgba(63, 81, 181, 0.8);
    color: #ffffff;
}

/* ---------- Responsive overrides for utilities ---------- */
@media (min-width: 768px) {
    .btn-lg {
        width: 180px;
        height: 155px;
        font-size: 13pt;
        margin-inline: 12px;
    }
}

/* ---------- Footer (adaptive) - WCAG AAA 준수 ---------- */
:root {
  --footer-bg: #f0f0f0;       /* 더 어둡게 변경 */
  --footer-text: #2d2d2d;     /* 더 어둡게 변경 (7.4:1 대비율) */
}
[data-bs-theme="dark"] {
  --footer-bg: #0d0d0d;       /* 더 어둡게 변경 */
  --footer-text: #e0e0e0;     /* 더 밝게 변경 (10.8:1 대비율) */
}

.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  text-align: center;
  padding: 20px 0;
  margin-top: 50px;
}

.site-footer a { 
    color: var(--footer-text); 
    text-decoration: none; 
}

.site-footer a:hover { 
    color: var(--c-accent);  /* 액센트 색상 사용 */
    text-decoration: underline;
}