/* ========================================================
   WIFI - Women in Finance Institute
   Main Stylesheet
   ======================================================== */

:root {
  /* Color System - Deep Navy + Champagne Gold + Burgundy */
  --navy-900: #0A1628;
  --navy-800: #0E1B2E;
  --navy-700: #142238;
  --navy-600: #1B2D48;
  --navy-500: #26385A;
  --gold-500: #C9A86A;
  --gold-400: #D4B87A;
  --gold-300: #E0C88A;
  --gold-600: #B0955A;
  --burgundy-500: #6D1E36;
  --burgundy-400: #8B2A46;
  --burgundy-600: #521729;
  --ivory: #F7F1E8;
  --ivory-warm: #FAF6EE;
  --cream: #EDE4D3;
  --charcoal: #1C1C1C;
  --text-dim: #6B6B6B;
  --text-light: rgba(247, 241, 232, 0.85);
  --text-light-dim: rgba(247, 241, 232, 0.6);
  --border-gold: rgba(201, 168, 106, 0.3);
  --border-gold-strong: rgba(201, 168, 106, 0.6);

  /* Typography */
  --font-heading-en: 'Playfair Display', 'Noto Serif KR', Georgia, serif;
  --font-heading-ko: 'Noto Serif KR', 'Playfair Display', serif;
  --font-body: 'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body-ko: 'Noto Sans KR', 'Inter', sans-serif;

  /* Spacing */
  --container-max: 1400px;
  --container-narrow: 1100px;
  --container-wide: 1600px;
  --gutter: 24px;
  --section-py: 120px;
  --section-py-sm: 80px;
}

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--ivory);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.3s ease; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* Language visibility
   NOTE: 오직 <span> 같은 inline 요소만 display:inline 으로 강제한다.
   원래 block 요소(h1~h6, p, div, li, blockquote 등)에 data-lang-* 를 붙인
   경우 display:inline 로 덮어씌워지면 세로 margin이 무시되므로 별도 처리한다. */
span[data-lang-ko], span[data-lang-en],
strong[data-lang-ko], strong[data-lang-en],
em[data-lang-ko], em[data-lang-en],
a[data-lang-ko], a[data-lang-en] { display: inline; }

/* Block 요소는 block 유지 */
h1[data-lang-ko], h1[data-lang-en],
h2[data-lang-ko], h2[data-lang-en],
h3[data-lang-ko], h3[data-lang-en],
h4[data-lang-ko], h4[data-lang-en],
h5[data-lang-ko], h5[data-lang-en],
h6[data-lang-ko], h6[data-lang-en],
p[data-lang-ko], p[data-lang-en],
div[data-lang-ko], div[data-lang-en],
li[data-lang-ko], li[data-lang-en],
blockquote[data-lang-ko], blockquote[data-lang-en],
ul[data-lang-ko], ul[data-lang-en],
ol[data-lang-ko], ol[data-lang-en] { display: block; }

/* 언어별 숨김 규칙 (원래 규칙 유지) */
html[lang="en"] [data-lang-ko] { display: none !important; }
html[lang="ko"] [data-lang-en] { display: none !important; }
html[lang="en"] [data-lang-ko-block], html[lang="ko"] [data-lang-en-block] { display: none !important; }
html[lang="en"] [data-lang-en-block], html[lang="ko"] [data-lang-ko-block] { display: block !important; }

/* ============ SECTION RHYTHM — 3-part header spacing (전 페이지 공통) ============
   Eyebrow (영문 라벨) → H2 (한글 제목) → P (본문 설명) 세 블록 사이에 확실한
   여백을 두어 세 요소가 시각적으로 명확히 분리되도록 함. 사이트 전체 적용. */
.section-header { max-width: 900px; }
.section-header .eyebrow { margin-bottom: 40px; display: block; }
.section-header h2 { margin-bottom: 40px; }
.section-header h2 + h2 { margin-top: 0; }
.section-header p { margin-top: 40px; }
.section-header p + p { margin-top: 20px; }

/* 좌우 컬럼형 섹션의 텍스트 컬럼도 동일 리듬 적용 */
.why-content .eyebrow, .jass-content .eyebrow, .checkup-content .eyebrow,
.about-story .eyebrow, .about-mission-content .eyebrow, .about-values .eyebrow,
.founder-content .eyebrow, .contact-content .eyebrow, .program-content .eyebrow,
.ambassador-content .eyebrow, .events-content .eyebrow, .leadership-content .eyebrow,
[class$="-content"] .eyebrow { margin-bottom: 32px; display: block; }

.why-content h2, .jass-content h2, .checkup-content h2,
[class$="-content"] h2 { margin-bottom: 32px; }

.why-content h2 + p, .jass-content h2 + p, .checkup-content h2 + p,
[class$="-content"] h2 + p { margin-top: 0; }

.why-content p, .jass-content p, .checkup-content p,
[class$="-content"] p { margin-bottom: 20px; }

/* Page hero: breadcrumb → h1 → p 리듬 */
.page-hero-inner .breadcrumb { margin-bottom: 40px; }
.page-hero-inner h1 { margin-bottom: 32px; }
.page-hero-inner p { margin-top: 0; }

/* ============ Typography ============ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading-ko);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  text-wrap: balance;
}
/* Korean: never break inside a word — wrap on spaces only. Applies to
   headings, paragraphs, buttons, list items, etc. so single characters
   don't drop onto the next line. */
html[lang="ko"] body,
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3,
html[lang="ko"] h4, html[lang="ko"] h5, html[lang="ko"] h6,
html[lang="ko"] p, html[lang="ko"] li, html[lang="ko"] a,
html[lang="ko"] span, html[lang="ko"] div, html[lang="ko"] button,
html[lang="ko"] blockquote, html[lang="ko"] label {
  word-break: keep-all;
  overflow-wrap: break-word;
}
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3,
html[lang="en"] h4, html[lang="en"] h5, html[lang="en"] h6 {
  font-family: var(--font-heading-en);
  font-weight: 500;
}
h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); }
h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
p { line-height: 1.75; text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-500);
  font-weight: 600;
  margin-bottom: 20px;
  display: inline-block;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--gold-500);
  vertical-align: middle;
  margin-right: 12px;
}
.eyebrow::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--gold-500);
  vertical-align: middle;
  margin-left: 12px;
}
.eyebrow.left::after { display: none; }
.eyebrow.left::before { margin-right: 12px; }

.gold { color: var(--gold-500); }
.serif-ital { font-style: italic; font-family: var(--font-heading-en); }

/* ============ Layout ============ */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }

section { padding: var(--section-py) 0; }
section.compact { padding: var(--section-py-sm) 0; }

.section-navy { background: var(--navy-900); color: var(--ivory); }
.section-navy h1, .section-navy h2, .section-navy h3, .section-navy h4 { color: var(--ivory); }
.section-ivory { background: var(--ivory); }
.section-cream { background: var(--cream); }
.section-burgundy { background: var(--burgundy-500); color: var(--ivory); }
.section-burgundy h1, .section-burgundy h2, .section-burgundy h3 { color: var(--ivory); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}
.btn-gold {
  background: var(--gold-500);
  color: var(--navy-900);
  border-color: var(--gold-500);
}
.btn-gold:hover {
  background: var(--gold-400);
  border-color: var(--gold-400);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(201, 168, 106, 0.35);
}
.btn-outline-gold {
  background: transparent;
  color: var(--gold-500);
  border-color: var(--gold-500);
}
.btn-outline-gold:hover {
  background: var(--gold-500);
  color: var(--navy-900);
}
.btn-outline-ivory {
  background: transparent;
  color: var(--ivory);
  border-color: rgba(247, 241, 232, 0.5);
}
.btn-outline-ivory:hover {
  background: var(--ivory);
  color: var(--navy-900);
  border-color: var(--ivory);
}
.btn-burgundy {
  background: var(--burgundy-500);
  color: var(--ivory);
  border-color: var(--burgundy-500);
}
.btn-burgundy:hover {
  background: var(--burgundy-400);
  transform: translateY(-2px);
}
.btn-arrow::after {
  content: "→";
  transition: transform 0.3s ease;
}
.btn-arrow:hover::after { transform: translateX(4px); }

/* ============ Announcement Bar ============ */
.announce-bar {
  background: var(--navy-900);
  color: var(--gold-500);
  padding: 10px 0;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-align: center;
  border-bottom: 1px solid var(--border-gold);
}
.announce-bar strong { color: var(--ivory); font-weight: 600; }
.announce-bar .divider { color: var(--gold-500); margin: 0 12px; opacity: 0.5; }

/* ============ Header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* 로고가 잘 보이도록 밝은 아이보리 배경 */
  background: rgba(247, 241, 232, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(28, 28, 28, 0.08);
  transition: all 0.3s ease;
}
.site-header.header-light {
  background: rgba(247, 241, 232, 0.97);
  border-bottom: 1px solid rgba(28, 28, 28, 0.08);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  max-width: var(--container-wide);
  margin: 0 auto;
}
.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading-en);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy-900);
  letter-spacing: -0.02em;
}
.header-light .logo { color: var(--navy-900); }
.logo-img {
  height: 46px;
  width: auto;
}
.footer-brand .logo-img {
  height: 67px;
  margin-bottom: 16px;
  /* 다크 배경에서 검정 로고가 잘 보이도록 밝은 배경 박스 */
  background: var(--ivory, #f7f1e8);
  padding: 12px 18px;
  border-radius: 8px;
  display: block;
  width: fit-content;
  box-sizing: content-box;
}
.logo-mark {
  font-size: 1.25rem;
  color: var(--gold-500);
  letter-spacing: 0.02em;
}
.logo em { color: var(--gold-500); font-style: normal; font-weight: 800; }
.logo-tag {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.header-light .logo-tag { color: var(--text-dim); }

.main-nav {
  display: flex;
  gap: 36px;
  align-items: center;
}
.main-nav a {
  color: var(--charcoal);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  padding: 8px 0;
}
.header-light .main-nav a { color: var(--charcoal); }
.main-nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold-500);
  transition: width 0.3s ease;
}
.main-nav a:hover::after,
.main-nav a.active::after { width: 100%; }
.main-nav a:hover,
.main-nav a.active { color: var(--gold-500); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.lang-toggle button {
  color: var(--text-dim);
  padding: 6px 4px;
  transition: color 0.3s ease;
  font-weight: 500;
  letter-spacing: 0.1em;
  font-family: var(--font-body);
}
.header-light .lang-toggle button { color: var(--text-dim); }
.lang-toggle button.active {
  color: var(--gold-500);
  font-weight: 700;
}
.lang-toggle .divider {
  color: var(--text-dim);
  opacity: 0.4;
}

.btn-header {
  padding: 12px 24px;
  font-size: 0.75rem;
  border: 1px solid var(--gold-500);
  color: var(--gold-500);
  background: transparent;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.btn-header:hover {
  background: var(--gold-500);
  color: var(--navy-900);
}

.menu-toggle {
  display: none;
  color: var(--navy-900);
  font-size: 1.5rem;
}
.header-light .menu-toggle { color: var(--navy-900); }

/* ============ Hero (page hero) ============ */
.page-hero {
  background: var(--navy-900);
  color: var(--ivory);
  padding: 140px 0 100px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 40%, rgba(201, 168, 106, 0.12) 0%, transparent 60%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero-inner { text-align: center; max-width: 900px; margin: 0 auto; }
.page-hero h1 { color: var(--ivory); margin-bottom: 24px; }
.page-hero p { color: var(--text-light); font-size: 1.125rem; max-width: 700px; margin: 0 auto; }

.breadcrumb {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-light-dim);
  margin-bottom: 32px;
}
.breadcrumb a:hover { color: var(--gold-500); }
.breadcrumb .sep { color: var(--gold-500); }

/* ============ Footer ============ */
.site-footer {
  background: var(--navy-900);
  color: var(--text-light);
  padding: 80px 0 30px;
  border-top: 1px solid var(--border-gold);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}
.footer-brand h4 {
  font-family: var(--font-heading-en);
  color: var(--ivory);
  margin-bottom: 16px;
  font-size: 1.5rem;
}
.footer-tagline {
  font-family: var(--font-heading-en);
  font-style: italic;
  color: var(--gold-500);
  margin-bottom: 20px;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}
.footer-brand p { font-size: 0.875rem; line-height: 1.7; color: var(--text-light-dim); }
.footer-col h5 {
  color: var(--gold-500);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer-col ul li { margin-bottom: 12px; }
.footer-col a {
  color: var(--text-light);
  font-size: 0.875rem;
  transition: color 0.3s ease;
}
.footer-col a:hover { color: var(--gold-500); }
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.footer-social a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--gold-500);
  transition: all 0.3s ease;
}
.footer-social a:hover {
  background: var(--gold-500);
  color: var(--navy-900);
}
.footer-bottom {
  border-top: 1px solid var(--border-gold);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--text-light-dim);
  line-height: 1.7;
}
.disclaimer {
  max-width: 850px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-light-dim);
}

/* ============ Cards ============ */
.card {
  background: var(--ivory-warm);
  padding: 40px 32px;
  border: 1px solid rgba(201, 168, 106, 0.2);
  transition: all 0.4s ease;
  position: relative;
  height: 100%;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--gold-500);
  box-shadow: 0 20px 40px rgba(10, 22, 40, 0.08);
}
.card-dark {
  background: var(--navy-800);
  color: var(--text-light);
  border-color: var(--border-gold);
}
.card-dark:hover {
  background: var(--navy-700);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.card-num {
  font-family: var(--font-heading-en);
  font-size: 3rem;
  color: var(--gold-500);
  line-height: 1;
  font-weight: 400;
  margin-bottom: 20px;
  font-style: italic;
}
.card h3 {
  font-size: 1.375rem;
  margin-bottom: 16px;
  color: var(--charcoal);
}
.card-dark h3 { color: var(--ivory); }
.card p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-dim);
}
.card-dark p { color: var(--text-light); }

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }

/* Section headers */
.section-header {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 80px;
}
.section-header p {
  margin-top: 20px;
  font-size: 1.0625rem;
  color: var(--text-dim);
  line-height: 1.8;
}
.section-navy .section-header p { color: var(--text-light); }
.section-header.left { text-align: left; margin-left: 0; }

/* Divider */
.divider-gold {
  width: 60px;
  height: 2px;
  background: var(--gold-500);
  margin: 24px auto;
}
.divider-gold.left { margin-left: 0; margin-right: 0; }

/* CTA Section (reusable) */
.cta-section {
  background: var(--navy-900);
  color: var(--ivory);
  text-align: center;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(201, 168, 106, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(109, 30, 54, 0.2) 0%, transparent 50%);
}
.cta-section .container { position: relative; z-index: 1; }
.cta-section h2 { color: var(--ivory); margin-bottom: 24px; }
.cta-section p {
  font-size: 1.125rem;
  color: var(--text-light);
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Tweaks Panel positioning fix */
[data-tweaks-panel] { z-index: 200; }

/* ============ Responsive ============ */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  :root { --section-py: 80px; --section-py-sm: 60px; }
  .main-nav {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--navy-900);
    flex-direction: column;
    padding: 40px 24px;
    gap: 24px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    border-top: 1px solid var(--border-gold);
  }
  .main-nav.open { transform: translateX(0); }
  .menu-toggle { display: block; }
  .header-actions .btn-header {
    display: inline-flex;
    padding: 8px 14px;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
  }
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .header-inner { padding: 16px 20px; }
  .announce-bar { font-size: 0.75rem; padding: 8px 12px; }
  .announce-bar .divider { display: none; }
  .announce-bar span { display: block; }
}