/* ==========================================================================
   KISA 2026 Theme — Figma Make 원본 1:1 정밀 복원 CSS
   App.tsx 원본 Tailwind 값 직독 변환
   Background #faf7f2 | Primary #7a1528 | Accent #c5a55a | Foreground #1c1410
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  --background: #faf7f2;
  --foreground: #1c1410;
  --card: #ffffff;
  --card-foreground: #1c1410;
  --primary: #7a1528;
  --primary-hover: #661220;
  --secondary: #f5ede8;
  --muted: #f0e8e2;
  --muted-foreground: #8a7060;
  --accent: #c5a55a;
  --border: rgba(28, 20, 16, 0.09);
  --border-light: rgba(28, 20, 16, 0.06);
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Noto Sans KR', sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; }
button { cursor: pointer; }
img { display: block; }

/* ============================================================
   HEADER — App.tsx lines 297-353 exact match
   fixed top-0 | transition-all duration-400
   Topbar: border-b border-border/40 → max-w-7xl px-6 h-9
   Mainbar: max-w-7xl px-6 → h-16 flex items-center justify-between gap-6
   ============================================================ */

.figma-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}
.figma-header.scrolled,
.figma-header.sub-page-header {
  background: rgba(250, 247, 242, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 20px rgba(28, 20, 16, 0.06);
}

/* ============================================================
   TOP BANNER — Rolling Announcement Bar
   Fade In / Out 5s Interval
   Wine Burgundy Background & Champagne Gold Accents
   ============================================================ */

.header-top-banner {
  background: linear-gradient(90deg, #3d0c15 0%, #2a080f 50%, #3d0c15 100%);
  border-bottom: 1px solid rgba(197, 165, 90, 0.25);
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  z-index: 1001;
}

.top-banner-inner {
  max-width: 80rem; /* 1280px */
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.top-banner-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-banner-item {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 92%;
  color: #fdfbf7;
  text-decoration: none;
  font-size: 0.8125rem; /* 13px */
  font-weight: 500;
  letter-spacing: 0.015em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
  cursor: pointer;
}

.top-banner-item.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.top-banner-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.top-banner-arrow {
  color: #c5a55a;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform 0.25s ease, color 0.2s ease;
}

.top-banner-item:hover .top-banner-text {
  color: #c5a55a;
}

.top-banner-item:hover .top-banner-arrow {
  transform: translateX(4px);
  color: #e5c97a;
}

@media (max-width: 640px) {
  .header-top-banner {
    height: 34px;
  }
  .top-banner-item {
    font-size: 0.75rem; /* 12px */
    gap: 0.35rem;
    max-width: 96%;
  }
}

/* Topbar — border-b border-border/40 */
.header-topbar {
  border-bottom: 1px solid rgba(28, 20, 16, 0.04);
}
.topbar-inner {
  max-width: 80rem; /* 7xl = 1280px */
  margin: 0 auto;
  padding: 0 1.5rem; /* px-6 */
  height: 2.25rem; /* h-9 = 36px */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem; /* gap-5 = 20px */
}
/* text-xs text-foreground/40 hover:text-primary */
.topbar-link {
  font-size: 0.75rem;
  color: rgba(28, 20, 16, 0.4);
  transition: color 0.2s;
}
.topbar-link:hover { color: var(--primary); }
.topbar-link.admin-link { color: var(--primary); font-weight: 700; }

/* Mainbar — max-w-7xl px-6 h-16 flex items-center justify-between gap-6 */
.header-mainbar {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 4rem; /* h-16 = 64px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem; /* gap-6 */
}

/* Logo — flex items-center gap-3 shrink-0 */
.logo-block {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* gap-3 */
  flex-shrink: 0;
  text-decoration: none;
}
.logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.logo-text-wrap {
  line-height: 1.15;
}
/* text-[10px] text-accent tracking-[0.12em] uppercase font-medium */
.logo-title-en {
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.2;
}
/* text-[12px] text-foreground/70 tracking-wider font-serif */
.logo-title-ko {
  font-size: 12px;
  color: rgba(28, 20, 16, 0.7);
  letter-spacing: 0.05em;
  font-family: var(--font-serif);
  line-height: 1.2;
}

@media (max-width: 768px) {
  .logo-text-wrap {
    display: none !important;
  }
  .logo-img {
    height: 36px;
  }
}

/* GNB nav — hidden xl:flex items-stretch gap-1 h-full */
.figma-gnb {
  display: flex;
  align-items: stretch;
  gap: 0.25rem; /* gap-1 = 4px */
  height: 100%;
}
.gnb-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 0.25rem; /* px-1 */
}
/* button: flex items-center gap-1 text-sm py-1 px-0.5 relative group */
.gnb-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem; /* gap-1 */
  font-size: 0.875rem; /* text-sm */
  color: rgba(28, 20, 16, 0.65);
  background: none;
  border: none;
  padding: 0.25rem 0.125rem; /* py-1 px-0.5 */
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
  white-space: nowrap;
}
.gnb-nav-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 0;
  background: var(--primary);
  transition: width 0.2s;
}
.gnb-nav-item:hover .gnb-nav-btn { color: var(--primary); }
.gnb-nav-item:hover .gnb-nav-btn::after { width: 100%; }

/* Dropdown hit area expansion */
.gnb-dropdown-box::after {
  content: '';
  position: absolute;
  top: -30px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  z-index: -1;
}

/* Dropdown — position absolute top calc(100% + 16px) left 50% */
.gnb-dropdown-box {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 148px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 4px 0; /* pt-1 pb-1 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 100;
}
/* Arrow caret — absolute -top-1.5 left-1/2 w-3 h-3 bg-card border-l border-t border-border rotate-45 */
.gnb-dropdown-box::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--card);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.gnb-nav-item:hover .gnb-dropdown-box {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* dropdown items: w-full block px-4 py-2.5 text-sm text-foreground/70 hover:text-primary hover:bg-secondary/50 */
.gnb-dropdown-box a {
  display: block;
  padding: 0.625rem 1rem; /* py-2.5 px-4 */
  font-size: 0.875rem;
  color: rgba(28, 20, 16, 0.7);
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.gnb-dropdown-box a:hover {
  color: var(--primary);
  background: rgba(245, 237, 232, 0.5);
}
.gnb-nav-btn.active {
  color: var(--primary);
  font-weight: 600;
}
.gnb-nav-btn.active::after {
  width: 100%;
}
.gnb-dropdown-box a.active {
  color: var(--primary);
  font-weight: 600;
  background: rgba(147, 51, 64, 0.07);
}

/* Header right actions — flex items-center gap-2 shrink-0 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* gap-2 */
  flex-shrink: 0;
}

/* Search icon button — hidden lg:flex w-9 h-9 items-center justify-center */
.btn-search {
  display: none;
  width: 2.25rem; /* w-9 */
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  color: rgba(28, 20, 16, 0.45);
  background: none;
  border: none;
  transition: color 0.2s;
}
@media (min-width: 1024px) { .btn-search { display: flex; } }
.btn-search:hover { color: var(--primary); }

/* "과정 신청" button — hidden md:inline-flex items-center gap-2 px-4 py-2 bg-primary text-white text-xs font-medium */
.btn-apply-cta {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem; /* py-2 px-4 */
  background: var(--primary);
  color: #fff;
  font-size: 0.75rem; /* text-xs */
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s;
  border: none;
}
@media (min-width: 768px) { .btn-apply-cta { display: inline-flex; } }
.btn-apply-cta:hover { background: rgba(122, 21, 40, 0.9); }

/* "전체메뉴" button — flex items-center gap-1.5 px-3 py-2 border border-border hover:border-primary */
.btn-mega-menu {
  display: flex;
  align-items: center;
  gap: 0.375rem; /* gap-1.5 */
  padding: 0.5rem 0.75rem; /* py-2 px-3 */
  border: 1px solid var(--border);
  color: rgba(28, 20, 16, 0.5);
  background: none;
  font-size: 0.75rem;
  transition: border-color 0.2s, color 0.2s;
}
.btn-mega-menu:hover {
  border-color: var(--primary);
  color: var(--primary);
}
/* hamburger lines: flex flex-col gap-[4px] */
.hamburger-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hamburger-lines span {
  display: block;
  height: 1px;
  background: currentColor;
}
.hamburger-lines span:nth-child(1) { width: 16px; } /* w-4 */
.hamburger-lines span:nth-child(2) { width: 12px; transition: width 0.2s; } /* w-3 → group-hover:w-4 */
.hamburger-lines span:nth-child(3) { width: 16px; }
.btn-mega-menu:hover .hamburger-lines span:nth-child(2) { width: 16px; }

/* Mega Menu Side Panel */
.mega-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 20, 16, 0.4);
  backdrop-filter: blur(4px);
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.mega-overlay.open { opacity: 1; pointer-events: auto; }
.mega-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 520px;
  background: var(--card);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(0,0,0,0.12);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s ease-out;
}
.mega-panel.open { transform: translateX(0); }
.mega-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem; /* py-6 px-8 */
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mega-panel-close {
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  color: rgba(28,20,16,0.4);
  background: none; border: none;
  border-radius: 4px;
  transition: color 0.2s;
}
.mega-panel-close:hover { color: var(--primary); }
.mega-panel-body { flex: 1; padding: 1.5rem 2rem; }
.mega-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2rem; } /* gap-x-8 gap-y-6 */
.mega-section-title {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: var(--primary);
  font-weight: 500;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mega-section-title::before {
  content: '';
  display: block;
  width: 4px; height: 16px;
  background: rgba(122, 21, 40, 0.7);
  flex-shrink: 0;
}
.mega-section-links { list-style: none; }
.mega-section-links li + li { margin-top: 0; }
.mega-section-links a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0; /* py-1.5 */
  font-size: 0.875rem;
  color: rgba(28, 20, 16, 0.6);
  transition: color 0.15s, padding-left 0.15s;
}
.mega-section-links a::before {
  content: '';
  display: block;
  width: 6px; height: 6px;
  border-right: 1.5px solid rgba(197, 165, 90, 0.5);
  border-bottom: 1.5px solid rgba(197, 165, 90, 0.5);
  transform: rotate(-45deg);
  flex-shrink: 0;
}
.mega-section-links a:hover,
.mega-section-links a.active {
  color: var(--primary);
  padding-left: 0.25rem;
  font-weight: 500;
}
.mega-panel-footer {
  padding: 1.25rem 2rem; /* py-5 px-8 */
  border-top: 1px solid var(--border);
  background: rgba(245, 237, 232, 0.3);
  flex-shrink: 0;
}

/* Sub-page hero bar (shown on non-index pages) */
.sub-hero-bar {
  padding: 120px 24px 60px;
  background: var(--secondary);
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.sub-hero-bar-inner { max-width: 80rem; margin: 0 auto; }
.sub-hero-label {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 8px;
}
.sub-hero-title {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--foreground);
}

/* ============================================================
   HERO — App.tsx lines 642-688 exact match
   section: relative min-h-screen flex flex-col justify-center overflow-hidden
   ============================================================ */

.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* absolute inset-0 grid grid-cols-[1fr_1fr] */
.hero-split-bg {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.hero-left-bg { background-color: var(--background); }
.hero-right-bg {
  position: relative;
  overflow: hidden;
  background-color: var(--secondary);
}
/* absolute inset-0 w-full h-full object-cover */
.hero-right-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* gradient: to right #faf7f2 0% → rgba(250,247,242,0.12) 40% → transparent 100% */
.hero-right-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #faf7f2 0%, rgba(250, 247, 242, 0.12) 40%, transparent 100%);
}

/* relative max-w-7xl mx-auto px-6 w-full pt-32 pb-20 */
.hero-content-wrapper {
  position: relative;
  max-width: 80rem;
  margin: 0 auto;
  padding: 8rem 1.5rem 5rem; /* pt-32 pb-20 px-6 */
  width: 100%;
}

/* max-w-[520px] */
.hero-text-block { max-width: 520px; }

/* flex items-center gap-3 mb-7 */
.hero-tag {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* gap-3 */
  margin-bottom: 1.75rem; /* mb-7 = 28px */
}
/* w-7 h-px bg-accent */
.hero-tag-line {
  width: 1.75rem; /* w-7 = 28px */
  height: 1px;
  background-color: var(--accent);
  flex-shrink: 0;
}
/* text-accent text-[11px] tracking-[0.3em] uppercase font-medium */
.hero-tag-text {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
}

/* h1: font-serif clamp(2.8rem,5.5vw,4.6rem) font-weight-400 leading-[1.15] mb-6 */
.hero-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 5.5vw, 4.6rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--foreground);
  margin-bottom: 1.5rem; /* mb-6 */
}
.hero-headline i {
  color: var(--foreground);
  font-style: italic;
}
/* em: text-primary italic */
.hero-headline em {
  color: var(--primary);
  font-style: italic;
}

/* text-foreground/55 text-[0.95rem] leading-relaxed mb-9 font-light max-w-[420px] */
.hero-subtext {
  color: rgba(28, 20, 16, 0.55);
  font-size: 0.95rem;
  line-height: 1.625; /* leading-relaxed */
  margin-bottom: 2.25rem; /* mb-9 = 36px */
  font-weight: 300;
  max-width: 420px;
}

/* CTA buttons: flex flex-wrap gap-3 mb-12 */
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem; /* gap-3 */
  margin-bottom: 3rem; /* mb-12 = 48px */
}
/* inline-flex items-center gap-2.5 px-7 py-3.5 bg-primary text-white text-sm font-medium */
.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem; /* gap-2.5 */
  padding: 0.875rem 1.75rem; /* py-3.5 px-7 */
  background: var(--primary);
  color: #fff;
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;
  border: none;
  transition: background 0.2s;
  white-space: nowrap;
}
.hero-btn-primary:hover { background: rgba(122, 21, 40, 0.9); }

/* inline-flex items-center gap-2.5 px-7 py-3.5 border border-foreground/18 text-foreground/65 text-sm */
.hero-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.75rem;
  border: 1px solid rgba(28, 20, 16, 0.18);
  color: rgba(28, 20, 16, 0.65);
  font-size: 0.875rem;
  background: none;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.hero-btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Stats: grid grid-cols-4 gap-0 divide-x divide-border border border-border bg-card/80 backdrop-blur-sm */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* text-center py-4 px-2 */
.stats-cell {
  text-align: center;
  padding: 1rem 0.5rem; /* py-4 px-2 */
  border-right: 1px solid var(--border);
}
.stats-cell:last-child { border-right: none; }
/* font-serif text-[1.45rem] font-light */
.stats-val {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 300;
  color: var(--foreground);
  line-height: 1;
}
/* text-sm text-accent (suffix) */
.stats-val .suf {
  font-size: 0.875rem;
  color: var(--accent);
}
/* text-foreground/40 text-[10px] tracking-wide mt-0.5 */
.stats-label {
  font-size: 10px;
  color: rgba(28, 20, 16, 0.4);
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* ============================================================
   MAIN CARDS SECTION — 메인 히어로 하단 카드섹션
   Wine / Champagne Gold Premium Minimal Grid Cards
   ============================================================ */

.main-cards-section {
  position: relative;
  padding: 4.5rem 1.5rem 5rem;
  background-color: var(--background);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}

.main-cards-inner {
  max-width: 80rem;
  margin: 0 auto;
  width: 100%;
}

.main-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.main-card-item {
  background-color: var(--card);
  border: 1px solid var(--border);
  padding: 2.25rem 1.85rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
  box-shadow: 0 2px 12px rgba(28, 20, 16, 0.03);
}

.main-card-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.main-card-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(28, 20, 16, 0.08);
  border-color: rgba(197, 165, 90, 0.45);
}

.main-card-item:hover::before {
  transform: scaleX(1);
}

.main-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.main-card-top {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
}

.main-card-num {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.08em;
}

.main-card-line {
  flex: 1;
  height: 1px;
  background-color: var(--border);
  margin-left: 0.85rem;
  opacity: 0.7;
}

.main-card-title {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 0.75rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.main-card-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(28, 20, 16, 0.65);
  margin-bottom: 1.75rem;
  font-weight: 400;
  flex: 1;
}

.main-card-footer {
  margin-top: auto;
  padding-top: 1.15rem;
  border-top: 1px dashed rgba(28, 20, 16, 0.1);
}

.main-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  transition: all 0.25s ease;
}

.main-card-btn .main-card-arrow {
  color: var(--primary);
  transition: transform 0.25s ease;
}

.main-card-btn:hover {
  color: var(--primary-hover);
  gap: 0.75rem;
}

.main-card-btn:hover .main-card-arrow {
  transform: translateX(4px);
}

.main-card-btn.is-disabled {
  opacity: 0.45;
  cursor: default;
}

@media (max-width: 1024px) {
  .main-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 640px) {
  .main-cards-section {
    padding: 3rem 1.25rem 3.5rem;
  }
  .main-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .main-card-item {
    padding: 1.75rem 1.5rem 1.5rem;
  }
}

/* ============================================================
   ABOUT — App.tsx lines 691-735 exact match
   section: py-24 bg-card
   grid grid-cols-[1:1] gap-14 items-center
   ============================================================ */

.about-section {
  padding: 6rem 1.5rem; /* py-24 px-6 */
  background-color: var(--card);
}
.about-inner {
  max-width: 80rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem; /* gap-14 = 56px */
  align-items: center;
}

/* SectionHeader: mb-10 */
.section-hdr { margin-bottom: 2.5rem; /* mb-10 */ }
/* flex items-center gap-2.5 mb-2 */
.section-hdr-tag {
  display: flex;
  align-items: center;
  gap: 0.625rem; /* gap-2.5 */
  margin-bottom: 0.5rem; /* mb-2 */
}
/* w-6 h-px bg-accent */
.section-hdr-line {
  width: 1.5rem; /* w-6 */
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}
/* text-accent text-xs tracking-[0.28em] uppercase font-medium */
.section-hdr-en {
  color: var(--accent);
  font-size: 0.75rem; /* text-xs */
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
}
/* h2: font-serif clamp(1.65rem,2.8vw,2.3rem) font-weight-400 */
.section-hdr-ko {
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 2.8vw, 2.3rem);
  font-weight: 400;
  color: var(--foreground);
}

/* About body text: text-foreground/58 leading-relaxed mb-4 font-light text-[0.94rem] */
.about-body-p {
  color: rgba(28, 20, 16, 0.58);
  line-height: 1.625;
  margin-bottom: 1rem;
  font-weight: 300;
  font-size: 0.94rem;
}
.about-body-p + .about-body-p { margin-bottom: 2rem; }

/* Icon grid: grid grid-cols-2 gap-3 mb-8 */
.about-icon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem; /* gap-3 */
  margin-bottom: 2rem; /* mb-8 */
}
/* flex items-center gap-3 p-3.5 bg-secondary/50 rounded */
.about-icon-item {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* gap-3 */
  padding: 0.875rem; /* p-3.5 */
  background: rgba(245, 237, 232, 0.5);
  border-radius: 4px;
}
/* icon: size={14} text-primary shrink-0 */
.about-icon-item svg {
  width: 14px;
  height: 14px;
  color: var(--primary);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  flex-shrink: 0;
}
/* span: text-foreground/65 text-sm */
.about-icon-item span {
  font-size: 0.875rem;
  color: rgba(28, 20, 16, 0.65);
}

/* "협회 더 알아보기" link: inline-flex items-center gap-2 text-primary text-sm hover:gap-4 */
.about-more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary);
  font-size: 0.875rem;
  transition: gap 0.2s;
}
.about-more-link:hover { gap: 1rem; }

/* Right image box: aspect-[4/5] overflow-hidden bg-secondary */
/* padding to let the -bottom-5 -left-5 badge overflow outside */
.about-img-wrap {
  position: relative;
  padding-bottom: 1.25rem; /* space for -bottom-5 badge */
  padding-left: 1.25rem;   /* space for -left-5 badge */
}
.about-img-box {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--secondary);
}
.about-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Since badge: absolute -bottom-5 -left-5 bg-primary text-white p-6 shadow-xl */
/* positioned relative to .about-img-wrap, sits outside .about-img-box */
.since-badge {
  position: absolute;
  bottom: 0;       /* bottom of padded area = -1.25rem from image */
  left: 0;         /* left of padded area = -1.25rem from image */
  background: var(--primary);
  color: #fff;
  padding: 1.5rem; /* p-6 */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  z-index: 2;
}
/* text-[10px] tracking-widest uppercase mb-1 opacity-60 */
.since-badge-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 4px;
}
/* font-serif text-[2.4rem] font-weight-400 line-height-1 */
.since-badge-year {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
}

/* ============================================================
   LATEST NEWS — App.tsx lines 549-596 exact match
   section: py-24 bg-background
   ============================================================ */

.news-section {
  padding: 6rem 1.5rem; /* py-24 */
  background-color: var(--background);
}
.news-inner { max-width: 80rem; margin: 0 auto; }

/* flex items-end justify-between mb-10 */
.news-hdr-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.5rem; /* mb-10 */
}
/* "전체보기" link: hidden sm:flex items-center gap-1.5 text-sm text-foreground/40
   pb-1 border-b border-foreground/15 hover:border-primary mb-3 whitespace-nowrap */
.news-viewall-link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: rgba(28, 20, 16, 0.4);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(28, 20, 16, 0.15);
  margin-bottom: 0.75rem; /* mb-3 */
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.news-viewall-link:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* grid grid-cols-3 gap-6 mb-8 */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; /* gap-6 */
  margin-bottom: 2rem; /* mb-8 */
}
/* bg-card border border-border hover:border-primary/30 hover:shadow-sm
   transition-all duration-250 flex flex-col h-full p-6 */
.news-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 1.5rem; /* p-6 */
  display: flex;
  flex-direction: column;
  min-height: 220px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.news-card:hover {
  border-color: rgba(122, 21, 40, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* text-foreground/40 text-xs tracking-widest mb-3 font-light uppercase */
.news-cat {
  color: rgba(28, 20, 16, 0.4);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  font-weight: 300;
}
/* h3: font-serif text-[1rem] font-medium leading-[1.55] mb-5 flex-1 */
.news-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--foreground);
  margin-bottom: 1.25rem; /* mb-5 */
  flex: 1;
  transition: color 0.2s;
}
.news-card:hover .news-title { color: var(--primary); }
/* text-primary text-sm font-medium mb-4 */
.news-date {
  color: var(--primary);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1rem; /* mb-4 */
}
/* MORE button: inline-flex items-center gap-3 border border-border
   text-foreground/45 text-xs px-4 py-2 hover:border-primary hover:text-primary */
.news-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem; /* gap-3 */
  border: 1px solid var(--border);
  color: rgba(28, 20, 16, 0.45);
  font-size: 0.75rem;
  padding: 0.5rem 1rem; /* py-2 px-4 */
  width: fit-content;
  transition: border-color 0.2s, color 0.2s;
}
.news-more-btn .more-dash { color: rgba(28, 20, 16, 0.25); transition: color 0.2s; }
.news-card:hover .news-more-btn {
  border-color: var(--primary);
  color: var(--primary);
}
.news-card:hover .news-more-btn .more-dash { color: var(--primary); }

/* Pager row: flex items-center justify-between */
.news-pager-row { display: flex; align-items: center; justify-content: space-between; }
/* pager: flex items-center gap-1 ml-auto */
.news-pager {
  display: flex;
  align-items: center;
  gap: 0.25rem; /* gap-1 */
  margin-left: auto;
}
.news-pager-info {
  font-size: 0.75rem;
  color: rgba(28, 20, 16, 0.3);
  margin-right: 0.5rem;
}
/* pager btn: w-8 h-8 flex items-center justify-center border border-border */
.news-pager-btn {
  width: 2rem; /* w-8 */
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  color: rgba(28, 20, 16, 0.4);
  background: none;
  transition: border-color 0.2s, color 0.2s;
  font-size: 0.75rem;
}
.news-pager-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}
.news-pager-btn:disabled { opacity: 0.25; cursor: not-allowed; }

/* ============================================================
   PARTNER ROLLER — App.tsx lines 601-634 exact match
   section: py-16 bg-card border-y border-border overflow-hidden
   ============================================================ */

.partner-section {
  padding: 4rem 0; /* py-16 */
  background-color: var(--card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
/* max-w-7xl mx-auto px-6 mb-8 */
.partner-hdr {
  max-width: 80rem;
  margin: 0 auto 2rem;
  padding: 0 1.5rem;
}
/* flex items-center gap-3 */
.partner-hdr-row {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* gap-3 */
}
/* w-6 h-px bg-accent */
.partner-hdr-line { width: 1.5rem; height: 1px; background: var(--accent); flex-shrink: 0; }
/* text-accent text-xs tracking-[0.28em] uppercase font-medium */
.partner-hdr-en { color: var(--accent); font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500; }
/* flex-1 h-px bg-border */
.partner-hdr-divider { flex: 1; height: 1px; background: var(--border); }
/* text-foreground/30 text-xs font-light */
.partner-hdr-ko { color: rgba(28, 20, 16, 0.3); font-size: 0.75rem; font-weight: 300; }

/* Marquee container: relative overflow-hidden */
.partner-roller-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}
/* Left/right fade: absolute top-0 bottom-0 w-20 z-10 */
.partner-fade-left {
  position: absolute; left: 0; top: 0; bottom: 0; width: 5rem; /* w-20 */
  z-index: 10; pointer-events: none;
  background: linear-gradient(to right, var(--card), transparent);
}
.partner-fade-right {
  position: absolute; right: 0; top: 0; bottom: 0; width: 5rem;
  z-index: 10; pointer-events: none;
  background: linear-gradient(to left, var(--card), transparent);
}

/* Scroll Container for Swiping & Infinite Loop */
.partner-scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.partner-scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
  width: 0;
  height: 0;
}
.partner-scroll-container.is-dragging {
  cursor: grabbing;
}

/* marquee track: flex items-center gap-12 width:max-content */
.marquee-track {
  display: flex;
  align-items: center;
  gap: 3rem; /* gap-12 = 48px */
  width: max-content;
}
/* each item: flex items-center justify-center h-14 px-4 opacity-60 hover:opacity-100 cursor-pointer shrink-0 */
.partner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem; /* h-14 = 56px */
  padding: 0 1.25rem;
  opacity: 0.65;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--foreground);
  transition: opacity 0.25s ease;
  user-select: none;
  -webkit-user-select: none;
}
.partner-item:hover { opacity: 1; }

.partner-logo-img {
  height: 38px;
  max-height: 38px;
  max-width: 150px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(12%) contrast(95%);
  transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.partner-item:hover .partner-logo-img {
  filter: none;
  transform: scale(1.05);
}

.partner-name-text {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  color: rgba(28, 20, 16, 0.7);
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: color 0.2s ease;
  user-select: none;
  pointer-events: none;
}
.partner-item:hover .partner-name-text {
  color: var(--primary);
}

/* ============================================================
   FOOTER — App.tsx lines 360-408 exact match
   footer: bg-foreground pt-16 pb-10
   grid-cols-4 lg:col-span-2 gap-10 mb-10
   ============================================================ */

.figma-footer {
  background-color: var(--foreground); /* #1c1410 */
  padding: 4rem 1.5rem 2.5rem; /* pt-16 pb-10 */
}
.footer-inner {
  max-width: 80rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* grid-cols-4 */
  gap: 2.5rem; /* gap-10 */
  margin-bottom: 2.5rem; /* mb-10 */
}
/* col-span-2 for brand column */
.footer-brand { grid-column: span 2; }
/* flex items-center gap-3 mb-5 */
.footer-logo-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem; /* mb-5 */
}
/* text-[10px] text-accent tracking-widest uppercase font-medium */
.footer-logo-en {
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
/* text-base text-white/70 tracking-widest font-serif */
.footer-logo-ko {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.1em;
  font-family: var(--font-serif);
}
/* text-white/35 text-sm leading-relaxed mb-4 max-w-xs font-light */
.footer-desc {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.875rem;
  line-height: 1.625;
  margin-bottom: 1rem;
  max-width: 20rem;
  font-weight: 300;
}
/* text-white/28 text-xs space-y-1.5 font-light */
.footer-info { color: rgba(255, 255, 255, 0.28); font-size: 0.75rem; font-weight: 300; line-height: 1.8; }
/* section head: text-white/50 text-xs tracking-widest uppercase mb-5 */
.footer-col-title {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
/* links: space-y-2.5 */
.footer-links { list-style: none; }
.footer-links li + li { margin-top: 0.625rem; /* space-y-2.5 */ }
/* text-white/35 text-sm hover:text-accent font-light */
.footer-links a {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.875rem;
  font-weight: 300;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--accent); }

/* footer bottom: border-t border-white/8 pt-8 flex sm:flex-row justify-between items-center gap-4 */
.footer-bottom {
  max-width: 80rem;
  margin: 0 auto;
  padding-top: 2rem; /* pt-8 */
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
/* text-white/22 text-xs font-light */
.footer-copy { color: rgba(255, 255, 255, 0.22); font-size: 0.75rem; font-weight: 300; }
/* flex gap-5 */
.footer-bottom-links { display: flex; gap: 1.25rem; }
/* text-white/25 text-xs hover:text-accent font-light */
.footer-bottom-links a {
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.75rem;
  font-weight: 300;
  transition: color 0.2s;
}
.footer-bottom-links a:hover { color: var(--accent); }

/* ============================================================
   SUB-PAGE COMMON LAYOUT
   ============================================================ */
.page-wrap { max-width: 80rem; margin: 0 auto; padding: 4rem 1.5rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1280px) {
  .figma-gnb { display: none; }
  .btn-search { display: none !important; }
}
@media (max-width: 1024px) {
  .hero-split-bg { grid-template-columns: 1fr; }
  .hero-right-bg { display: none; }
  .about-inner { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}
@media (max-width: 768px) {
  .figma-header {
    background: rgba(250, 247, 242, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 12px rgba(28, 20, 16, 0.05);
  }

  .header-topbar {
    border-bottom: 1px solid rgba(28, 20, 16, 0.04);
  }
  .topbar-inner {
    padding: 0 1rem;
    height: 1.875rem; /* 30px */
    gap: 0.875rem;
    justify-content: flex-end;
  }
  .topbar-link {
    font-size: 0.7rem;
  }

  .header-mainbar {
    height: auto;
    padding: 0.65rem 1rem 0.6rem 1rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
  }

  .logo-block {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    margin: 0 auto;
    gap: 0.55rem;
    max-width: 100%;
  }
  .logo-img {
    height: 36px;
  }
  .logo-title-en {
    font-size: 9.5px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
  .logo-title-ko {
    font-size: 11.5px;
    white-space: nowrap;
  }

  .header-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
  }

  .btn-mega-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.35rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(28, 20, 16, 0.65);
    box-shadow: none;
    transition: all 0.2s ease;
  }
  .btn-mega-menu:hover,
  .btn-mega-menu:active {
    border-color: var(--primary);
    color: var(--primary);
    background: #ffffff;
  }
  .btn-mega-menu .hamburger-lines {
    gap: 3px;
  }
  .btn-mega-menu .hamburger-lines span {
    height: 1px;
  }
  .btn-mega-menu .hamburger-lines span:nth-child(1) { width: 14px; }
  .btn-mega-menu .hamburger-lines span:nth-child(2) { width: 10px; }
  .btn-mega-menu .hamburger-lines span:nth-child(3) { width: 14px; }
  .btn-mega-menu:hover .hamburger-lines span:nth-child(2),
  .btn-mega-menu:active .hamburger-lines span:nth-child(2) { width: 14px; }

  /* Page top offsets for mobile */
  .sub-hero-banner {
    padding-top: 156px !important;
    padding-bottom: 2.25rem !important;
  }
  .figma-header.has-top-banner ~ .sub-hero-banner,
  .figma-header.has-top-banner + * .sub-hero-banner,
  body:has(.figma-header.has-top-banner) .sub-hero-banner {
    padding-top: 190px !important;
    padding-bottom: 2.25rem !important;
  }

  .hero-content-wrapper {
    padding-top: 10rem;
  }
  body:has(.figma-header.has-top-banner) .hero-content-wrapper {
    padding-top: 12.5rem;
  }

  .sub-nav-bar {
    top: var(--kisa-header-height, 148px);
  }
  .figma-header.has-top-banner ~ * .sub-nav-bar,
  body:has(.figma-header.has-top-banner) .sub-nav-bar {
    top: var(--kisa-header-height, 182px);
  }

  .login-page-wrap {
    margin-top: 120px;
  }
  body:has(.figma-header.has-top-banner) .login-page-wrap {
    margin-top: 154px;
  }
  .kisa-subpage-wrap {
    padding-top: 8.5rem;
  }
}
@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .news-viewall-link { display: none; }
  .hero-headline { font-size: 2.4rem; }
}
@media (max-width: 380px) {
  .header-mainbar {
    padding: 0.5rem 0.75rem 0.5rem;
    gap: 0.35rem;
  }
  .logo-block {
    gap: 0.45rem;
  }
  .logo-img {
    height: 30px;
  }
  .logo-title-en {
    font-size: 8px;
    letter-spacing: 0.04em;
  }
  .logo-title-ko {
    font-size: 10.5px;
  }
  .btn-mega-menu {
    padding: 0.28rem 0.8rem;
    font-size: 0.68rem;
    border-radius: 0;
  }
}

/* ==========================================================================
   SUB-PAGE COMMON
   ========================================================================== */
.sub-hero-banner {
  position: relative;
  padding-top: 144px;
  padding-bottom: 2.75rem;
  overflow: hidden;
  background-color: var(--secondary);
  border-bottom: 1px solid var(--border);
}
/* When top banner is present: header is 138px -> padding-top 182px gives equal 44px top & bottom space */
.figma-header.has-top-banner ~ * .sub-hero-banner,
body:has(.figma-header.has-top-banner) .sub-hero-banner {
  padding-top: 182px;
  padding-bottom: 2.75rem;
}

.sub-hero-banner-bg{position:absolute;inset:0;}
.sub-hero-banner-bg img{width:100%;height:100%;object-fit:cover;opacity:.15;}
.sub-hero-banner-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(250,247,242,.97) 0%,rgba(250,247,242,.85) 100%);}
.sub-hero-content{position:relative;max-width:80rem;margin:0 auto;padding:0 1.5rem;}
.sub-breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:rgba(28,20,16,.35);margin-bottom:1rem;}
.sub-breadcrumb a{color:inherit;text-decoration:none;}
.sub-breadcrumb a:hover{color:var(--primary);}
.sub-breadcrumb .bc-active{color:var(--primary);font-weight:500;}
.sub-hero-title-row{display:flex;align-items:center;gap:1rem;}
.sub-hero-accent-bar{width:4px;height:2rem;background:var(--primary);flex-shrink:0;}
.sub-hero-cat{color:var(--accent);font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;margin-bottom:2px;}
.sub-hero-h1{font-family:var(--font-serif);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:400;color:var(--foreground);}

.sub-nav-bar{background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:var(--kisa-header-height, 100px);z-index:20;box-shadow:0 1px 4px rgba(0,0,0,.04);}
.figma-header.has-top-banner ~ * .sub-nav-bar,
body:has(.figma-header.has-top-banner) .sub-nav-bar {
  top: var(--kisa-header-height, 138px);
}
.figma-header.has-top-banner ~ * .greeting-sticky,
body:has(.figma-header.has-top-banner) .greeting-sticky {
  top: 182px;
}
.figma-header.has-top-banner ~ * .about-side-img-wrap,
body:has(.figma-header.has-top-banner) .about-side-img-wrap {
  top: 182px;
}
.sub-nav-inner{max-width:80rem;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;overflow-x:auto;gap:0;scrollbar-width:none;}
.sub-nav-inner::-webkit-scrollbar{display:none;}
.sub-nav-tab{position:relative;flex-shrink:0;padding:1rem 1.25rem;font-size:.875rem;font-weight:500;border-bottom:2px solid transparent;color:rgba(28,20,16,.5);background:none;border-top:none;border-left:none;border-right:none;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s;text-decoration:none;display:inline-block;}
.sub-nav-tab:hover{color:var(--foreground);border-bottom-color:rgba(28,20,16,.2);}
.sub-nav-tab.active{color:var(--primary);border-bottom-color:var(--primary);}
.sub-main{min-height:60vh;background:var(--background);}
.sub-page-wrap{max-width:80rem;margin:0 auto;padding:4rem 1.5rem;}
.sub-page-wrap-5xl{max-width:64rem;margin:0 auto;padding:3.5rem 1.5rem;}
.sub-page-wrap-6xl{max-width:72rem;margin:0 auto;padding:3.5rem 1.5rem;}
.sp-tag-row{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;}
.sp-tag-line{width:1.5rem;height:1px;background:var(--accent);flex-shrink:0;}
.sp-tag-en{color:var(--accent);font-size:10px;letter-spacing:.32em;text-transform:uppercase;font-weight:500;}
.sp-h2{font-family:var(--font-serif);font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:400;color:var(--foreground);}
.sp-h2 em{color:var(--primary);font-style:italic;}
.sp-section-hdr{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;}
.sp-section-bar{width:4px;height:1.25rem;background:var(--primary);flex-shrink:0;}
.sp-section-title{font-family:var(--font-serif);font-size:1.1rem;font-weight:500;color:var(--foreground);}
.sp-body-p{color:rgba(28,20,16,.65);font-size:.94rem;line-height:2;font-weight:300;}
.sp-body-p+.sp-body-p{margin-top:1.25rem;}
/* Fade-in 효과 전면 제거: 스크롤 지연 없이 모든 컨텐츠 즉시 노출 */
.fade-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
.fade-in.visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* GREETING */
.greeting-grid{display:grid;grid-template-columns:340px 1fr;gap:3.5rem;}
.greeting-sticky{position:sticky;top:144px;}
.greeting-photo{aspect-ratio:3/4;background:var(--secondary);overflow:hidden;margin-bottom:1.5rem;position:relative;}
.greeting-photo img{width:100%;height:100%;object-fit:cover;object-position:top;}
.greeting-photo-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(122,21,40,.7) 0%,transparent 50%);}
.greeting-photo-info{position:absolute;bottom:0;left:0;right:0;padding:1.25rem;color:#fff;}
.greeting-photo-role{font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-bottom:4px;}
.greeting-photo-name{font-family:var(--font-serif);font-size:1.25rem;font-weight:300;}
.greeting-info-card{background:var(--card);border:1px solid var(--border);padding:1.5rem;}
.greeting-info-row{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;}
.greeting-info-line{width:1rem;height:1px;background:var(--accent);}
.greeting-info-label{color:var(--accent);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;}
.greeting-info-name{font-family:var(--font-serif);font-size:1.15rem;font-weight:500;color:var(--foreground);margin-bottom:4px;}
.greeting-info-titles{color:rgba(28,20,16,.5);font-size:.75rem;line-height:1.6;margin-bottom:1.25rem;}
.greeting-info-divider{border-top:1px solid var(--border);padding-top:1rem;}
.greeting-assoc-label{color:var(--primary);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;margin-bottom:6px;}
.greeting-assoc-name{color:rgba(28,20,16,.6);font-size:.75rem;}
.greeting-quote{margin-top:1.25rem;padding-left:1rem;border-left:2px solid rgba(122,21,40,.3);}
.greeting-quote p{font-family:var(--font-serif);color:rgba(28,20,16,.55);font-size:.875rem;font-style:italic;line-height:1.75;font-weight:300;}
.greeting-title-block{margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:1px solid var(--border);}
.greeting-title-en{font-family:var(--font-serif);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:400;color:var(--foreground);margin-bottom:.75rem;}
.greeting-title-italic{font-family:var(--font-serif);color:var(--primary);font-weight:300;line-height:1.6;font-style:italic;font-size:1rem;}
.greeting-body{display:flex;flex-direction:column;gap:1.25rem;}
.greeting-para{line-height:1.95;color:rgba(28,20,16,.7);font-weight:300;font-size:.94rem;}
.greeting-para.lead{font-size:1rem;font-weight:500;color:var(--foreground);}
.greeting-closing{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border);display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right;}
.greeting-closing-line{color:rgba(28,20,16,.5);font-size:.875rem;font-weight:300;}
.greeting-closing-divider{width:4rem;height:1px;background:var(--border);margin:1rem 0;}
.greeting-closing-role{color:rgba(28,20,16,.4);font-size:.75rem;letter-spacing:.05em;}
.greeting-closing-name{font-family:var(--font-serif);font-size:1.25rem;font-weight:500;color:var(--foreground);}

/* HISTORY */
.history-grid{display:grid;grid-template-columns:1fr 160px;gap:3rem;}
.history-intro-bar{display:flex;align-items:center;gap:1rem;margin-bottom:3.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--border);}
.history-intro-accent{width:4px;height:3rem;background:var(--primary);flex-shrink:0;}
.history-intro-label{color:var(--accent);font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;margin-bottom:4px;}
.history-intro-desc{color:rgba(28,20,16,.55);font-size:.875rem;font-weight:300;line-height:1.65;max-width:32rem;}
.history-timeline{position:relative;}
.history-vline{position:absolute;left:78px;top:0;bottom:0;width:1px;background:var(--border);}
.history-year-block{display:flex;gap:2rem;margin-bottom:2.5rem;}
.history-year-label{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;width:70px;padding-top:4px;}
.history-year-num{font-family:var(--font-serif);font-size:clamp(1.3rem,2vw,1.7rem);font-weight:300;color:var(--primary);line-height:1;user-select:none;}
.history-dot-wrap{display:flex;align-items:flex-start;flex-shrink:0;padding-top:8px;}
.history-dot{width:12px;height:12px;border-radius:50%;background:rgba(122,21,40,.2);border:2px solid var(--primary);position:relative;z-index:1;}
.history-events{flex:1;padding-bottom:2.5rem;border-bottom:1px solid rgba(28,20,16,.06);}
.history-event+.history-event{margin-top:1rem;}
.history-event-row{display:flex;gap:.75rem;align-items:baseline;}
.history-date-badge{flex-shrink:0;font-size:11px;font-weight:500;color:rgba(122,21,40,.7);background:rgba(122,21,40,.06);padding:2px 8px;line-height:1.5;white-space:nowrap;}
.history-event-text{color:rgba(28,20,16,.7);font-size:.9rem;line-height:1.65;font-weight:300;}
.history-sub-list{margin-top:.5rem;margin-left:1rem;padding-left:.75rem;border-left:2px solid rgba(197,165,90,.2);display:flex;flex-direction:column;gap:.375rem;list-style:none;padding-top:0;margin-top:.5rem;}
.history-sub-item{color:rgba(28,20,16,.45);font-size:.82rem;font-weight:300;line-height:1.65;display:flex;gap:.5rem;list-style:none;}
.history-sub-item::before{content:'·';color:rgba(197,165,90,.5);flex-shrink:0;margin-top:2px;}
.history-foundation{display:flex;align-items:center;gap:1rem;margin-top:1rem;padding-left:86px;}
.history-foundation-line{flex:1;height:1px;background:var(--border);}
.history-foundation-badge{flex-shrink:0;display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:1px solid rgba(28,20,16,.09);background:rgba(245,237,232,.5);}
.history-foundation-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);}
.history-foundation-text{color:rgba(28,20,16,.4);font-size:.75rem;letter-spacing:.05em;white-space:nowrap;}
.history-sidebar{position:sticky;top:144px;align-self:start;}
.history-sidebar-label{color:rgba(28,20,16,.3);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;margin-bottom:1rem;}
.history-sidebar-btn{display:block;width:100%;text-align:left;padding:6px 12px;font-size:.875rem;border-left:2px solid transparent;border-top:none;border-right:none;border-bottom:none;background:none;color:rgba(28,20,16,.35);cursor:pointer;transition:color .15s,border-color .15s,background .15s;}
.history-sidebar-btn:hover{color:var(--primary);border-left-color:rgba(122,21,40,.4);}
.history-sidebar-btn.active{border-left-color:var(--primary);color:var(--primary);font-family:var(--font-serif);font-weight:500;background:rgba(122,21,40,.04);}

/* ABOUT */
.about-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.about-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding-top:1rem;border-top:1px solid var(--border);}
.about-stat-cell{text-align:center;}
.about-stat-val{font-family:var(--font-serif);font-size:1.6rem;font-weight:300;color:var(--primary);}
.about-stat-lbl{color:rgba(28,20,16,.4);font-size:11px;letter-spacing:.05em;margin-top:2px;}
.about-hero-img-wrap{position:relative;padding-bottom:1.25rem;padding-right:1.25rem;}
.about-hero-img-box{aspect-ratio:3/4;overflow:hidden;}
.about-hero-img-box img{width:100%;height:100%;object-fit:cover;}
.about-hero-img-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(28,20,16,.5) 0%,transparent 60%);pointer-events:none;}
.about-float-badge{position:absolute;bottom:0;right:0;background:var(--primary);color:#fff;padding:1.5rem;box-shadow:0 20px 40px rgba(0,0,0,.2);}
.about-float-badge-label{font-size:9px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:4px;}
.about-float-badge-year{font-family:var(--font-serif);font-size:2.2rem;font-weight:400;line-height:1;}
.about-float-badge-sub{font-size:9px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;margin-top:4px;}
.parallax-banner{position:relative;overflow:hidden;width:100%;background-color:#1c1410;}
.parallax-banner-bg{position:absolute;top:-30%;left:0;right:0;bottom:-30%;height:160%;width:100%;background-size:cover;background-position:center;will-change:transform;}
.parallax-banner-overlay{position:absolute;inset:0;pointer-events:none;}
.parallax-banner-body{position:relative;height:100%;display:flex;align-items:center;justify-content:center;}
.parallax-inner-txt{text-align:center;padding:0 1.5rem;max-width:42rem;}
.parallax-en-label{color:var(--accent);font-size:10px;letter-spacing:.4em;text-transform:uppercase;font-weight:500;margin-bottom:1rem;}
.parallax-quote{font-family:var(--font-serif);font-style:italic;color:rgba(255,255,255,.85);font-size:clamp(1.3rem,2.5vw,1.9rem);font-weight:300;line-height:1.65;margin-bottom:1rem;}
.parallax-date-row{display:flex;align-items:center;justify-content:center;gap:.75rem;}
.parallax-date-line{width:2rem;height:1px;background:rgba(197,165,90,.6);}
.parallax-date-text{color:rgba(255,255,255,.4);font-size:.75rem;letter-spacing:.1em;}
.about-body-grid{display:grid;grid-template-columns:1fr 380px;gap:4rem;}
.about-side-img-wrap{display:flex;flex-direction:column;gap:1rem;position:sticky;top:144px;}
.about-side-img-box{aspect-ratio:4/5;overflow:hidden;}
.about-side-img-box img{width:100%;height:100%;object-fit:cover;}
.about-side-card{background:var(--card);border:1px solid var(--border);padding:1.25rem;}
.about-side-card-label{color:var(--accent);font-size:9px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;margin-bottom:.5rem;}
.about-side-card-text{color:rgba(28,20,16,.55);font-size:.75rem;line-height:1.65;font-weight:300;}
.div-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.div-card{background:var(--background);border:1px solid var(--border);padding:1.5rem;text-align:center;transition:border-color .25s,box-shadow .25s;}
.div-card:hover{border-color:rgba(122,21,40,.3);box-shadow:0 2px 8px rgba(0,0,0,.04);}
.div-icon{font-size:1.875rem;margin-bottom:.75rem;}
.div-en{color:rgba(28,20,16,.35);font-size:9px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem;}
.div-ko{color:var(--foreground);font-size:.875rem;font-weight:500;line-height:1.25;}
.academy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.academy-card{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:var(--background);border:1px solid var(--border);transition:border-color .25s;}
.academy-card:hover{border-color:rgba(122,21,40,.3);}
.academy-dot-wrap{width:2rem;height:2rem;background:rgba(122,21,40,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.academy-dot{width:8px;height:8px;background:var(--primary);border-radius:50%;}
.academy-en{color:rgba(28,20,16,.35);font-size:9px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px;}
.academy-ko{color:var(--foreground);font-size:.875rem;font-weight:500;}
.vision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem;}
.vision-pillar{padding-left:1rem;border-left:2px solid rgba(197,165,90,.3);}
.vision-en{color:var(--accent);font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px;}
.vision-ko{color:rgba(28,20,16,.7);font-size:.875rem;font-weight:500;line-height:1.35;}
.about-page-bg{background:var(--background);}
.about-card-bg{background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding-top:5rem;padding-bottom:5rem;}

/* ORG */
.org-chart{display:flex;flex-direction:column;align-items:center;}
.org-title-node{padding:1rem 3.5rem;border:2px solid var(--primary);border-radius:9999px;background:rgba(122,21,40,.05);text-align:center;}
.org-title-node-main{font-family:var(--font-serif);font-size:1.125rem;font-weight:500;color:var(--foreground);}
.org-title-node-sub{color:rgba(28,20,16,.4);font-size:11px;letter-spacing:.05em;margin-top:2px;}
.org-vline{background:rgba(122,21,40,.22);margin:0 auto;}
.org-hline{background:rgba(122,21,40,.22);flex-shrink:0;}
.org-row{display:flex;align-items:center;}
.org-circle{border-radius:50%;border:2px solid;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:500;line-height:1.2;flex-shrink:0;padding:4px;}
.org-circle-sm{width:3.5rem;height:3.5rem;font-size:.75rem;}
.org-circle-md{width:4.5rem;height:4.5rem;font-size:.875rem;}
.org-circle-lg{width:5.5rem;height:5.5rem;font-size:.82rem;}
.org-filled{border-color:var(--primary);background:var(--primary);color:#fff;}
.org-outlined{border-color:var(--primary);background:rgba(122,21,40,.06);color:var(--foreground);}
.org-ghost{border-color:rgba(122,21,40,.45);background:var(--background);color:rgba(28,20,16,.65);}
.org-circle small{font-size:9px;opacity:.6;margin-top:2px;display:block;}
.org-sep-row{display:flex;align-items:center;gap:.75rem;width:100%;}
.org-sep-line{flex:1;height:1px;background:rgba(122,21,40,.18);}
.org-sep-label{color:rgba(28,20,16,.3);font-size:9px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;white-space:nowrap;}
.branch-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;}
.branch-card{display:flex;flex-direction:column;border:1px solid var(--border);background:var(--card);height:100%;transition:border-color .2s;}
.branch-card:hover{border-color:rgba(122,21,40,.35);}
.branch-card-hdr{display:flex;flex-direction:column;align-items:center;padding:1.25rem 1rem;border-bottom:1px solid var(--border);background:rgba(245,237,232,.3);}
.branch-circle{width:3.5rem;height:3.5rem;border-radius:50%;border:2px solid var(--primary);display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:.75rem;background:#fff;}
.branch-circle-text{font-size:11px;font-weight:500;color:var(--primary);text-align:center;line-height:1.25;padding:0 4px;}
.branch-circle-sub{font-size:9px;color:rgba(122,21,40,.6);}
.branch-card-en{font-size:9px;color:rgba(28,20,16,.35);letter-spacing:.05em;text-align:center;line-height:1.3;}
.branch-items{padding:1rem;flex:1;list-style:none;margin:0;}
.branch-items li{display:flex;align-items:flex-start;gap:.5rem;font-size:.8rem;color:rgba(28,20,16,.6);line-height:1.4;margin-bottom:.375rem;}
.branch-items li::before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:rgba(122,21,40,.45);flex-shrink:0;margin-top:5px;}
.org-note{text-align:center;color:rgba(28,20,16,.25);font-size:.75rem;margin-top:2.5rem;font-weight:300;}

/* RULES */
.rules-grid{display:grid;grid-template-columns:200px 1fr;gap:2.5rem;}
.rules-sidebar{position:sticky;top:144px;align-self:start;}
.rules-sidebar-label{color:rgba(28,20,16,.3);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;margin-bottom:.75rem;}
.rules-sidebar-btn{display:flex;flex-direction:column;width:100%;text-align:left;padding:10px 12px;font-size:.875rem;border-left:2px solid transparent;border-top:none;border-right:none;border-bottom:none;background:none;color:rgba(28,20,16,.4);cursor:pointer;white-space:normal;transition:color .15s,border-color .15s,background .15s;}
.rules-sidebar-btn:hover{color:var(--primary);border-left-color:rgba(122,21,40,.4);}
.rules-sidebar-btn.active{border-left-color:var(--primary);color:var(--primary);font-weight:500;background:rgba(122,21,40,.04);}
.rules-sidebar-ch{font-size:10px;color:rgba(28,20,16,.3);display:block;}
.rules-doc-title{text-align:center;padding-bottom:2.5rem;margin-bottom:2.5rem;border-bottom:2px solid rgba(122,21,40,.2);}
.rules-doc-en{color:var(--accent);font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;margin-bottom:.75rem;}
.rules-doc-h2{font-family:var(--font-serif);font-size:clamp(1.3rem,2.5vw,1.8rem);font-weight:400;color:var(--foreground);}
.rules-chapter{margin-bottom:3.5rem;}
.rules-chapter-hdr{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;}
.rules-chapter-badge{background:var(--primary);color:#fff;padding:.5rem 1rem;font-size:.875rem;font-weight:500;letter-spacing:.05em;flex-shrink:0;}
.rules-chapter-title{font-family:var(--font-serif);font-size:1.125rem;font-weight:500;color:var(--foreground);}
.rules-chapter-line{flex:1;height:1px;background:var(--border);}
.rules-article{border-left:2px solid var(--border);padding-left:1.25rem;margin-bottom:2rem;transition:border-color .2s;}
.rules-article:hover{border-left-color:rgba(122,21,40,.4);}
.rules-article-title{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.75rem;}
.rules-article-no{color:var(--primary);font-weight:500;font-size:.875rem;flex-shrink:0;}
.rules-article-name{font-weight:500;color:var(--foreground);}
.rules-body-p{color:rgba(28,20,16,.7);font-size:.9rem;line-height:1.9;font-weight:300;margin-bottom:.75rem;}
.rules-items{display:flex;flex-direction:column;gap:.5rem;margin-top:4px;}
.rules-item{display:flex;gap:.75rem;color:rgba(28,20,16,.65);font-size:.87rem;line-height:1.9;font-weight:300;}
.rules-item-num{flex-shrink:0;color:rgba(28,20,16,.4);font-weight:500;min-width:1.4rem;}
.rules-subsec{margin-bottom:.75rem;}
.rules-subsec-label{color:rgba(28,20,16,.8);font-size:.9rem;font-weight:500;margin-bottom:.375rem;}
.rules-subsec-items{display:flex;flex-direction:column;gap:4px;padding-left:1rem;}
.rules-subsec-item{display:flex;gap:.5rem;color:rgba(28,20,16,.65);font-size:.87rem;line-height:1.8;font-weight:300;}
.rules-subsec-num{flex-shrink:0;color:rgba(28,20,16,.35);}
.rules-endnote{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--border);text-align:center;}
.rules-endnote p{color:rgba(28,20,16,.3);font-size:.75rem;font-weight:300;letter-spacing:.05em;}

/* MAP */
.map-container{width:100%;border:1px solid var(--border);overflow:hidden;margin-bottom:2rem;min-height:300px;}
.map-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.map-contact-card{display:flex;gap:1rem;padding:1.5rem;background:var(--card);border:1px solid var(--border);}
.map-contact-icon{width:2rem;height:2rem;background:rgba(122,21,40,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.map-contact-label{color:rgba(28,20,16,.35);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;margin-bottom:6px;}
.map-contact-text{color:rgba(28,20,16,.8);font-size:.875rem;line-height:1.7;}

/* RESPONSIVE */
@media(max-width:1024px){
  .greeting-grid{grid-template-columns:1fr;}
  .greeting-sticky{position:static;}
  .history-grid{grid-template-columns:1fr;}
  .history-vline{display:none;}
  .history-sidebar{display:none;}
  .about-intro-grid{grid-template-columns:1fr;}
  .about-body-grid{grid-template-columns:1fr;}
  .about-side-img-wrap{position:static;}
  .about-float-badge{bottom:0;right:0;}
  .branch-grid{grid-template-columns:repeat(2,1fr);}
  .rules-grid{grid-template-columns:1fr;}
  .rules-sidebar{position:static;}
  .map-contact-grid{grid-template-columns:1fr;}
  .div-grid{grid-template-columns:repeat(2,1fr);}
  .academy-grid{grid-template-columns:1fr 1fr;}
  .vision-grid{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .org-title-node{padding:.75rem 1.5rem;}
  .branch-grid{grid-template-columns:1fr;}
  .about-stats-row{grid-template-columns:1fr 1fr;}
  .sub-page-wrap{padding:2.5rem 1rem;}
  .sub-page-wrap-5xl{padding:2rem 1rem;}
}

/* ==========================================================================
   ASI SUBPAGES
   ========================================================================== */
.asi-intro-hero{display:flex;flex-direction:column;gap:2rem;padding-bottom:3rem;margin-bottom:3rem;border-bottom:1px solid var(--border);}
@media(min-width:640px){.asi-intro-hero{flex-direction:row;align-items:flex-start;}}
.asi-intro-logo{flex-shrink:0;padding-top:.5rem;overflow:visible;}
.asi-intro-logo img{width:11rem;height:auto;display:block;}
@media(min-width:640px){.asi-intro-logo img{width:14rem;}}
.asi-tag-line{display:flex;align-items:center;gap:.625rem;margin-bottom:.75rem;}
.asi-tag-line-bar{width:1.5rem;height:1px;background-color:var(--accent);}
.asi-tag-line-text{color:var(--accent);font-size:.625rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500;}
.asi-intro-title{color:var(--foreground);margin-bottom:.5rem;line-height:1.2;font-family:'Playfair Display',serif;font-size:clamp(1.2rem,2.5vw,1.9rem);font-weight:400;}
.asi-intro-subtitle{color:rgba(28,20,16,.45);font-size:.875rem;letter-spacing:.05em;font-weight:300;}
.asi-stats-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.25rem;}
.asi-stat-box{text-align:center;padding:.5rem 1rem;border:1px solid var(--border);}
.asi-stat-val{color:var(--primary);font-weight:300;font-family:'Playfair Display',serif;font-size:1.4rem;}
.asi-stat-label{color:rgba(28,20,16,.35);font-size:.625rem;letter-spacing:.05em;}

/* --- ASI About Hero (ASI Official Style 1:1 Restoration) --- */
.asi-about-hero,
.asi-contest-hero,
.asi-exams-hero {
  position: relative;
  background-color: #ffffff;
  box-shadow: 0 16px 40px -12px rgba(28, 20, 16, 0.12), 0 2px 8px rgba(28, 20, 16, 0.04);
  margin-bottom: 2.5rem;
  overflow: hidden;
  border-radius: 3px;
}
.asi-hero-top-line {
  height: 4px;
  background-color: #c3a370;
  width: 100%;
}
.asi-hero-body {
  display: flex;
  flex-direction: column;
}
@media (min-width: 900px) {
  .asi-hero-body {
    flex-direction: row;
    align-items: stretch;
  }
}
.asi-hero-media {
  position: relative;
  background-color: #100f0d;
  overflow: hidden;
  height: 280px;
  min-height: 280px;
}
@media (min-width: 900px) {
  .asi-hero-media {
    flex: 0 0 38%;
    height: auto;
    min-height: 440px;
  }
}
.asi-hero-medal-img,
.asi-members-hero-img,
.asi-contest-hero-img,
.asi-exams-hero-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.asi-hero-medal-img {
  object-position: center 58%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.asi-members-hero-img {
  object-position: center 50%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.asi-about-hero:hover .asi-hero-medal-img,
.asi-members-hero:hover .asi-members-hero-img,
.asi-members-hero:hover .asi-hero-medal-img {
  transform: scale(1.025);
}
.asi-contest-hero-img {
  object-position: center center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.asi-contest-hero:hover .asi-contest-hero-img {
  transform: scale(1.025);
}
.asi-exams-hero-img {
  object-position: center 35%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.asi-exams-hero:hover .asi-exams-hero-img {
  transform: scale(1.025);
}
.asi-hero-content-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffffff;
}
.asi-hero-content {
  padding: 2.25rem 1.75rem 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 900px) {
  .asi-hero-content {
    padding: 3.5rem 3.5rem 2.5rem;
  }
}
.asi-hero-category {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: #100f0d;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.asi-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.16;
  color: #c3a370;
  margin-bottom: 1.5rem;
  word-break: keep-all;
}
.asi-title-br {
  display: none;
}
@media (min-width: 900px) {
  .asi-title-br {
    display: inline;
  }
}
.asi-hero-desc {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.asi-hero-desc-ko {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.85;
  color: rgba(28, 20, 16, 0.82);
  font-weight: 400;
  word-break: keep-all;
  letter-spacing: -0.015em;
  margin: 0;
}
.asi-hero-desc-en {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.65;
  color: rgba(28, 20, 16, 0.45);
  font-weight: 300;
  word-break: keep-all;
  border-top: 1px solid rgba(28, 20, 16, 0.08);
  padding-top: 0.875rem;
  margin: 0;
}
.asi-hero-para-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.asi-hero-para-group + .asi-hero-para-group {
  margin-top: 1.125rem;
  padding-top: 1.125rem;
  border-top: 1px dashed rgba(28, 20, 16, 0.12);
}
.asi-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.asi-hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: #c3a370;
  color: #ffffff !important;
  padding: 0.75rem 1.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid #c3a370;
  border-radius: 2px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.asi-hero-btn-primary:hover {
  background-color: #100f0d;
  border-color: #100f0d;
  color: #ffffff !important;
  transform: translateY(-1px);
}
.asi-hero-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: transparent;
  color: #100f0d !important;
  padding: 0.75rem 1.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(28, 20, 16, 0.3);
  border-radius: 2px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.asi-hero-btn-outline:hover {
  border-color: #c3a370;
  color: #c3a370 !important;
  transform: translateY(-1px);
}
.asi-hero-accent-strip {
  display: flex;
  height: 28px;
  width: 100%;
}
@media (min-width: 900px) {
  .asi-hero-accent-strip {
    height: 36px;
  }
}
.asi-strip-gold {
  width: 32%;
  background-color: #c3a370;
}
.asi-strip-dark {
  flex: 1;
  background-color: #100f0d;
}

/* --- Quick Stats Bar --- */
.asi-quick-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #ffffff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.25rem 2rem;
  margin-bottom: 3.5rem;
  box-shadow: 0 4px 16px rgba(28, 20, 16, 0.03);
}
@media (max-width: 640px) {
  .asi-quick-stats {
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem 1rem;
  }
}
.asi-quick-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}
.asi-quick-stat-val {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #c3a370;
  line-height: 1.2;
}
.asi-quick-stat-lbl {
  font-size: 0.75rem;
  color: rgba(28, 20, 16, 0.5);
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
  font-weight: 500;
}
.asi-quick-stat-divider {
  width: 1px;
  height: 2.25rem;
  background-color: var(--border);
}
@media (max-width: 640px) {
  .asi-quick-stat-divider {
    width: 4rem;
    height: 1px;
  }
}
.asi-body-paras{display:flex;flex-direction:column;gap:2rem;margin-bottom:4rem;}
.asi-para-flex{display:flex;gap:1rem;}
.asi-para-bar{width:4px;flex-shrink:0;background-color:rgba(122,34,44,.15);margin-top:.25rem;align-self:stretch;}
.asi-para-text{color:rgba(28,20,16,.7);line-height:1.95;font-weight:300;font-size:.93rem;}
.asi-para-text.lead{font-size:1rem;font-weight:500;color:rgba(28,20,16,.8);}

.asi-member-sec{border-top:1px solid var(--border);padding-top:3rem;}
.asi-member-title{color:var(--foreground);margin-bottom:.25rem;font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:400;}
.asi-member-desc{color:rgba(28,20,16,.55);font-size:.875rem;line-height:1.6;font-weight:300;margin-top:.5rem;}

/* --- Members Hero (1:1 Restoration of ASI our-members Header) --- */
.asi-members-hero {
  position: relative;
  background-color: #ffffff;
  box-shadow: 0 16px 40px -12px rgba(28, 20, 16, 0.12), 0 2px 8px rgba(28, 20, 16, 0.04);
  margin-bottom: 2.5rem;
  overflow: hidden;
  border-radius: 3px;
}
.asi-members-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.asi-members-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(195, 163, 112, 0.12);
  color: #8c6833;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.asi-members-stat-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #c3a370;
}
.asi-continent-jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(28, 20, 16, 0.08);
}
.asi-jump-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.45rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: rgba(28, 20, 16, 0.75);
  background-color: #faf7f2;
  transition: all 0.2s ease;
  text-decoration: none;
}
.asi-jump-link:hover {
  border-color: #c3a370;
  color: #100f0d;
  background-color: #ffffff;
  transform: translateY(-1px);
}
.asi-jump-link .count {
  font-size: 0.6875rem;
  color: #c3a370;
  font-weight: 600;
}

/* --- Continent Filter Bar --- */
.asi-continent-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  padding: 0.5rem;
  background-color: #ffffff;
  border: 1px solid var(--border);
  border-radius: 4px;
  position: sticky;
  top: calc(var(--kisa-header-height, 80px) + 8px);
  z-index: 30;
  box-shadow: 0 4px 12px rgba(28, 20, 16, 0.04);
}
.asi-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(28, 20, 16, 0.65);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  background: transparent;
  text-decoration: none;
}
.asi-filter-btn:hover {
  color: #100f0d;
  background-color: rgba(195, 163, 112, 0.1);
}
.asi-filter-btn.active {
  color: #ffffff;
  background-color: #100f0d;
  font-weight: 600;
}
.asi-filter-btn .badge {
  font-size: 0.6875rem;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  background-color: rgba(28, 20, 16, 0.08);
}
.asi-filter-btn.active .badge {
  background-color: #c3a370;
  color: #100f0d;
  font-weight: 700;
}

/* --- Continent Section Styling --- */
.asi-continent-sec {
  margin-bottom: 3.5rem;
  scroll-margin-top: 140px;
}
.asi-continent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.875rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid #100f0d;
}
.asi-continent-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.asi-continent-name-en {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #100f0d;
  letter-spacing: -0.01em;
}
.asi-continent-name-ko {
  font-size: 0.875rem;
  color: rgba(28, 20, 16, 0.5);
  font-weight: 400;
}
.asi-continent-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: #8c6833;
  background-color: rgba(195, 163, 112, 0.15);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}

/* --- Member Card Enhancements --- */
.asi-member-name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.asi-member-name-ko {
  font-size: 0.75rem;
  color: rgba(28, 20, 16, 0.45);
  font-weight: 400;
}
.asi-member-since {
  font-size: 0.6875rem;
  color: rgba(28, 20, 16, 0.4);
  font-weight: 300;
  margin-bottom: 0.25rem;
}
.asi-badge-kisa {
  font-size: 0.625rem;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--primary);
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  letter-spacing: 0.02em;
}
.asi-badge-founder {
  font-size: 0.625rem;
  font-weight: 600;
  color: #8c6833;
  background-color: rgba(195, 163, 112, 0.2);
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
}
.asi-badge-applicant {
  font-size: 0.625rem;
  font-weight: 600;
  color: rgba(28, 20, 16, 0.65);
  background-color: rgba(28, 20, 16, 0.08);
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
}

.asi-member-grid{display:grid;grid-template-columns:1fr;gap:0;border-left:1px solid var(--border);border-top:1px solid var(--border);margin-bottom:1.5rem;}
@media(min-width:640px){.asi-member-grid{grid-template-columns:repeat(2,1fr);}}
.asi-member-card{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background-color .2s ease;}
.asi-member-card:hover{background-color:rgba(250,247,242,.3);}
.asi-member-card.highlight{background-color:rgba(122,34,44,.05);}
.asi-member-card.highlight:hover{background-color:rgba(122,34,44,.08);}
.asi-member-flag{font-size:1.5rem;line-height:1;flex-shrink:0;margin-top:.125rem;}
.asi-member-name{font-size:.85rem;font-weight:500;line-height:1.2;margin-bottom:.125rem;color:rgba(28,20,16,.8);}
.asi-member-card.highlight .asi-member-name{color:var(--primary);}
.asi-member-assoc{color:rgba(28,20,16,.45);font-size:.75rem;line-height:1.2;margin-bottom:.25rem;font-weight:300;}
.asi-member-link{color:rgba(146,126,98,.7);font-size:.7rem;text-decoration:none;transition:color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.asi-member-link:hover{color:var(--accent);}
.asi-observer-label{color:rgba(28,20,16,.35);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;margin-bottom:.75rem;}
.asi-member-card.observer{background-color:rgba(248,249,250,.5);}
.asi-member-card.observer:hover{background-color:rgba(250,247,242,.3);}
.asi-badge{font-size:.5625rem;background-color:rgba(28,20,16,.1);color:rgba(28,20,16,.4);padding:.125rem .375rem;border-radius:2px;letter-spacing:.05em;}

.asi-contest-list-sec{padding:3.5rem 0;}
.asi-contest-list-flex{display:flex;flex-direction:column;gap:2.5rem;}
@media(min-width:768px){.asi-contest-list-flex{flex-direction:row;align-items:flex-start;}}
.asi-contest-ul{flex:1;display:flex;flex-direction:column;gap:1.75rem;}
.asi-contest-li{display:flex;align-items:flex-start;gap:1rem;}
.asi-contest-li-img{margin-top:.25rem;width:2.5rem;height:2.5rem;flex-shrink:0;}
.asi-contest-li-en{font-weight:600;color:var(--foreground);font-size:.9375rem;line-height:1.3;}
.asi-contest-li-ko{font-size:.875rem;color:rgba(28,20,16,.55);margin-top:.125rem;}
.asi-btn-outline{display:inline-block;border:1px solid rgba(28,20,16,.3);color:rgba(28,20,16,.8);font-size:.875rem;padding:.75rem 1.5rem;text-decoration:none;transition:all .2s ease;}
.asi-btn-outline:hover{border-color:var(--accent);color:var(--accent);}
.asi-btn-outline-sm{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(28,20,16,.4);}

/* --- ASI Exam Types Grid (4 Levels, 4 Audiences 1:1 Matching) --- */
.asi-exam-types-sec {
  margin-top: 1rem;
  margin-bottom: 4.5rem;
}
.asi-exam-types-header {
  margin-bottom: 2rem;
  text-align: left;
}
.asi-exam-types-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--foreground);
  margin-top: 0.35rem;
  margin-bottom: 0.5rem;
}
.asi-exam-types-sub {
  color: rgba(28, 20, 16, 0.6);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.asi-exam-cards-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .asi-exam-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .asi-exam-cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.asi-exam-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 2px;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  box-shadow: 0 4px 16px rgba(28, 20, 16, 0.05);
}
.asi-exam-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(28, 20, 16, 0.12);
}
.asi-exam-card-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

/* Card 1 (ASI PREP EXAM) & Card 2 (CERT 1): Elegant double frame */
.asi-exam-card.card-prep,
.asi-exam-card.card-cert1 {
  border: 1px solid #c3a370;
  background: #ffffff;
}
.asi-exam-card.card-prep .asi-exam-card-inner,
.asi-exam-card.card-cert1 .asi-exam-card-inner {
  margin: 6px;
  border: 1px solid #1a273b;
  padding: 2.25rem 1.25rem 1.75rem;
}
.asi-exam-card.card-prep .asi-exam-card-icon,
.asi-exam-card.card-cert1 .asi-exam-card-icon {
  color: #100f0d;
}
.asi-exam-card.card-prep .asi-exam-card-title,
.asi-exam-card.card-cert1 .asi-exam-card-title {
  color: #100f0d;
}
.asi-exam-card.card-prep .asi-exam-card-desc-en,
.asi-exam-card.card-cert1 .asi-exam-card-desc-en {
  color: #2b2825;
}

/* Card 3 (CERT 2): Dark solid background */
.asi-exam-card.card-cert2 {
  background-color: #100f0d;
  color: #ffffff;
  border: 1px solid #100f0d;
}
.asi-exam-card.card-cert2 .asi-exam-card-inner {
  margin: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-color: #100f0d;
  padding: 2.25rem 1.25rem 1.75rem;
}
.asi-exam-card.card-cert2 .asi-exam-card-icon {
  color: #ffffff;
}
.asi-exam-card.card-cert2 .asi-exam-card-title {
  color: #ffffff;
}
.asi-exam-card.card-cert2 .asi-exam-card-desc-en {
  color: rgba(255, 255, 255, 0.9);
}
.asi-exam-card.card-cert2 .asi-exam-card-desc-ko {
  color: rgba(255, 255, 255, 0.55);
}

/* Card 4 (ASI DIPLOMA): Solid Gold Background */
.asi-exam-card.card-diploma {
  border: 1px solid #c3a370;
  background-color: #ffffff;
}
.asi-exam-card.card-diploma .asi-exam-card-inner {
  margin: 6px;
  border: 1px solid #c3a370;
  background-color: #b59a6d;
  color: #ffffff;
  padding: 2.25rem 1.25rem 1.75rem;
}
.asi-exam-card.card-diploma .asi-exam-card-icon {
  color: #ffffff;
}
.asi-exam-card.card-diploma .asi-exam-card-title {
  color: #ffffff;
}
.asi-exam-card.card-diploma .asi-exam-card-desc-en {
  color: #ffffff;
}
.asi-exam-card.card-diploma .asi-exam-card-desc-ko {
  color: rgba(255, 255, 255, 0.75);
}

/* Icons & Typography */
.asi-exam-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.asi-exam-card-icon svg {
  width: 100%;
  height: 100%;
}
.asi-exam-card-title {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  line-height: 1.2;
}
.asi-exam-card-desc-en {
  font-size: 0.8125rem;
  line-height: 1.65;
  margin-bottom: 0.625rem;
  word-break: keep-all;
  flex: 1;
}
.asi-exam-card-desc-ko {
  font-size: 0.75rem;
  line-height: 1.55;
  color: rgba(28, 20, 16, 0.55);
  margin-bottom: 1.5rem;
  word-break: keep-all;
}
.asi-exam-card-btn-wrap {
  margin-top: auto;
  padding-top: 1rem;
}
.asi-card-btn {
  display: inline-block;
  padding: 0.55rem 1.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s ease;
  border-radius: 2px;
}
.asi-card-btn.gold {
  background-color: #b59a6d;
  color: #ffffff !important;
  border: 1px solid #b59a6d;
}
.asi-card-btn.gold:hover {
  background-color: #9e8255;
  border-color: #9e8255;
  transform: translateY(-1px);
}
.asi-card-btn.dark {
  background-color: #000000;
  color: #ffffff !important;
  border: 1px solid #ffffff;
}
.asi-card-btn.dark:hover {
  background-color: #ffffff;
  color: #100f0d !important;
  transform: translateY(-1px);
}
.asi-card-btn.gold-inv {
  background-color: #ffffff;
  color: #b59a6d !important;
  border: 1px solid #ffffff;
}
.asi-card-btn.gold-inv:hover {
  background-color: #100f0d;
  color: #ffffff !important;
  border-color: #100f0d;
  transform: translateY(-1px);
}
.asi-steel-sec{background-color:#f5f0e8;padding:4.5rem 1.5rem;}
.asi-steel-title{font-size:1.875rem;font-weight:700;color:var(--foreground);margin-bottom:.35rem;font-family:'Playfair Display',serif;}
@media(min-width:768px){.asi-steel-title{font-size:2.25rem;}}
.asi-steel-subtitle{font-size:1rem;color:rgba(28,20,16,.55);margin-bottom:2.25rem;}
.asi-steel-text{display:flex;flex-direction:column;gap:1.5rem;}
.asi-steel-item{display:flex;flex-direction:column;gap:0.35rem;}
.asi-steel-item + .asi-steel-item{padding-top:1.25rem;border-top:1px dashed rgba(28,20,16,.15);}
.asi-steel-ko{font-size:0.95rem;color:rgba(28,20,16,.82);line-height:1.85;margin:0;word-break:keep-all;}
.asi-steel-en{font-size:0.85rem;color:rgba(28,20,16,.5);line-height:1.65;margin:0;font-weight:300;word-break:keep-all;}

.asi-diploma-acc-sec{padding-bottom:4rem;}
.asi-diploma-acc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;}
.asi-diploma-acc-title{font-size:1.125rem;font-weight:600;color:var(--foreground);font-family:'Playfair Display',serif;}
.asi-diploma-acc-btn{font-size:.75rem;color:rgba(28,20,16,.5);border:1px solid var(--border);padding:.375rem .75rem;background:none;cursor:pointer;transition:all .2s ease;}
.asi-diploma-acc-btn:hover{border-color:var(--accent);color:var(--accent);}
.asi-diploma-list{border-top:1px solid var(--border);}
.asi-diploma-item{border-bottom:1px solid var(--border);}
.asi-diploma-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.75rem .25rem;background:none;border:none;cursor:pointer;text-align:left;}
.asi-diploma-toggle-text{font-size:.875rem;font-weight:600;color:rgba(28,20,16,.7);transition:color .2s ease;}
.asi-diploma-toggle:hover .asi-diploma-toggle-text{color:var(--foreground);}
.asi-diploma-toggle-count{margin-left:.5rem;font-size:.75rem;font-weight:400;color:rgba(28,20,16,.4);}
.asi-diploma-icon{width:1rem;height:1rem;fill:none;stroke:rgba(28,20,16,.4);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease;}
.asi-diploma-item.active .asi-diploma-icon{transform:rotate(180deg);}
.asi-diploma-content{display:none;padding-bottom:1.5rem;padding-left:.25rem;padding-right:.25rem;}
.asi-diploma-item.active .asi-diploma-content{display:block;}
.asi-diploma-empty{font-size:.875rem;color:rgba(28,20,16,.35);font-style:italic;padding:.5rem 0;}

/* Diploma Level Groups */
.asi-diploma-level-groups {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  padding-top: 0.75rem;
}
.asi-diploma-level-row {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.asi-diploma-level-row + .asi-diploma-level-row {
  border-top: 1px dashed rgba(28, 20, 16, 0.12);
  padding-top: 2rem;
}
.asi-diploma-level-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.asi-level-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.asi-level-title-badge .asi-level-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.asi-level-title-badge .asi-level-count {
  font-weight: 500;
  font-size: 0.75rem;
  opacity: 0.8;
  margin-left: 2px;
}
.asi-level-title-badge.gold {
  background: rgba(180, 140, 40, 0.15);
  color: #855b00;
  border: 1px solid rgba(180, 140, 40, 0.35);
}
.asi-level-title-badge.gold .asi-level-dot {
  background: #b48c28;
}
.asi-level-title-badge.silver {
  background: rgba(120, 130, 145, 0.15);
  color: #374151;
  border: 1px solid rgba(120, 130, 145, 0.35);
}
.asi-level-title-badge.silver .asi-level-dot {
  background: #6b7280;
}
.asi-level-title-badge.bronze {
  background: rgba(165, 95, 50, 0.15);
  color: #7c3a1e;
  border: 1px solid rgba(165, 95, 50, 0.35);
}
.asi-level-title-badge.bronze .asi-level-dot {
  background: #b86237;
}

/* Grid: 5 columns on desktop, responsive */
.asi-diploma-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
}
@media (min-width: 640px) {
  .asi-diploma-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem 1.25rem;
  }
}
@media (min-width: 860px) {
  .asi-diploma-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 1.5rem;
  }
}
@media (min-width: 1080px) {
  .asi-diploma-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 2.25rem 1.75rem;
  }
}

/* Person Card */
.asi-diploma-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  transition: transform 0.2s ease;
}
.asi-diploma-person:hover {
  transform: translateY(-3px);
}

/* Avatar: 2x size (120px on desktop, 96px on mobile) */
.asi-diploma-avatar {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: rgba(28, 20, 16, 0.05);
  border: 2px solid rgba(28, 20, 16, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(28, 20, 16, 0.08);
  transition: all 0.3s ease;
}
@media (min-width: 640px) {
  .asi-diploma-avatar {
    width: 7.5rem;
    height: 7.5rem;
  }
}
.asi-diploma-person:hover .asi-diploma-avatar {
  border-color: var(--primary);
  box-shadow: 0 6px 16px rgba(139, 29, 39, 0.18);
}
.asi-diploma-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.asi-diploma-avatar-txt {
  color: rgba(28, 20, 16, 0.35);
  font-size: 2rem;
  font-weight: 700;
  font-family: serif;
}

/* Typography */
.asi-diploma-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.3;
  margin: 0;
}
.asi-diploma-org {
  font-size: 0.8125rem;
  color: rgba(28, 20, 16, 0.58);
  line-height: 1.3;
  margin: 0;
  max-width: 160px;
  word-break: keep-all;
}
.asi-diploma-level {
  font-size: 0.6875rem;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background-color: rgba(28, 20, 16, 0.08);
  color: rgba(28, 20, 16, 0.6);
  margin-top: 0.125rem;
}
.asi-diploma-level.gold {
  background-color: rgba(180, 140, 40, 0.15);
  color: #855b00;
  border: 1px solid rgba(180, 140, 40, 0.3);
}
.asi-diploma-level.silver {
  background-color: rgba(120, 130, 145, 0.15);
  color: #374151;
  border: 1px solid rgba(120, 130, 145, 0.3);
}
.asi-diploma-level.bronze {
  background-color: rgba(165, 95, 50, 0.15);
  color: #7c3a1e;
  border: 1px solid rgba(165, 95, 50, 0.3);
}

/* ==========================================================================
   MEMBER PAGES (회원 등급 안내)
   ========================================================================== */
.member-sec {
  margin-bottom: 2.5rem;
}
.member-sec-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  border-left: 4px solid var(--primary);
  padding-left: 0.75rem;
  margin-bottom: 1rem;
}
.member-sec-body {
  font-size: 0.875rem;
  color: rgba(28, 20, 16, 0.75);
  line-height: 1.625;
  padding-left: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.member-sub-title {
  font-weight: 600;
  color: rgba(28, 20, 16, 0.85);
  margin-bottom: 0.25rem;
}
.member-sub-title.mt {
  margin-top: 1rem;
}
.member-list {
  padding-left: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.member-note {
  color: rgba(28, 20, 16, 0.5);
  margin-left: 0.25rem;
}
.member-box {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  color: rgba(28, 20, 16, 0.6);
}

.member-inst-ul {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.member-inst-li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.member-inst-dot {
  margin-top: 0.375rem;
  width: 0.375rem; height: 0.375rem;
  border-radius: 50%;
  background-color: var(--accent);
  flex-shrink: 0;
}
.member-step-ol {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.member-step-li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.member-step-badge {
  flex-shrink: 0;
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  background-color: rgba(122, 34, 44, 0.1);
  color: var(--primary);
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.125rem;
}

/* ==========================================================================
   EXAM PAGES (자격시험)
   ========================================================================== */
.exam-table-wrap {
  overflow-x: auto;
  border-radius: 0.25rem;
  border: 1px solid var(--border);
}
.exam-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.exam-th {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  background-color: rgba(28, 20, 16, 0.05);
  color: rgba(28, 20, 16, 0.65);
  font-weight: 600;
  white-space: nowrap;
}
.exam-th.center { text-align: center; }
.exam-th.left { text-align: left; }
.exam-td {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  font-size: 0.75rem;
  vertical-align: top;
  line-height: 1.625;
}
.exam-td.center { text-align: center; vertical-align: middle; }
.exam-td.cat { font-weight: 600; color: rgba(28,20,16,0.8); background-color: rgba(28,20,16,0.03); text-align: center; vertical-align: middle; }
.exam-td.level { color: rgba(28,20,16,0.65); text-align: center; vertical-align: middle; white-space: nowrap; background-color: var(--background); }
.exam-qlist {
  margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.125rem; list-style: none;
}
.exam-qlist-item { display: flex; gap: 0.375rem; }
.exam-qlist-num { color: rgba(28,20,16,0.4); flex-shrink: 0; }

.exam-round-card {
  position: relative; background-color: var(--card); border: 1px solid var(--border);
  transition: all 0.25s; display: flex; align-items: stretch;
}
.exam-round-card:hover {
  border-color: rgba(122,34,44,0.25); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
.exam-round-strip { width: 0.375rem; flex-shrink: 0; background-color: var(--primary); }
.exam-round-body { flex: 1; padding: 1.75rem; }
.exam-round-hdr {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border);
}
.exam-round-title { color: var(--foreground); font-weight: 600; font-size: 1.125rem; font-family: var(--font-serif); line-height: 1.25; }
.exam-lvl-badge {
  padding: 0.125rem 0.5rem; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.025em;
  border: 1px solid rgba(122,34,44,0.25); color: rgba(122,34,44,0.8); background-color: rgba(122,34,44,0.05); white-space: nowrap;
}
.exam-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media(min-width:640px){ .exam-grid { grid-template-columns: 1fr 1fr; } }
.exam-date-box { display: flex; gap: 0.75rem; }
.exam-date-badge { display: inline-block; padding: 0.125rem 0.5rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.exam-date-badge.written { background-color: rgba(28,20,16,0.08); color: rgba(28,20,16,0.55); }
.exam-date-badge.practical { background-color: rgba(146,126,98,0.15); color: var(--accent); }
.exam-date-time { color: var(--foreground); font-weight: 500; font-size: 0.875rem; margin-bottom: 0.25rem; }
.exam-date-loc { color: rgba(28,20,16,0.5); font-size: 0.75rem; line-height: 1.625; }
.exam-subj-row { display: flex; align-items: center; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid rgba(228,228,231,0.6); }
.exam-subj-label { font-size: 0.625rem; color: rgba(28,20,16,0.35); letter-spacing: 0.1em; text-transform: uppercase; flex-shrink: 0; }
.exam-subj-badge { padding: 0.125rem 0.5rem; font-size: 0.6875rem; color: rgba(28,20,16,0.6); background-color: var(--secondary); border-radius: 0.125rem; }

/* ==========================================================================
   CONTEST PAGES (경기대회)
   ========================================================================== */
.contest-tab-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.25rem;
  margin-bottom: 2.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.contest-tab-label {
  font-size: 0.625rem;
  color: rgba(28,20,16,0.35);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 0.5rem;
  flex-shrink: 0;
  font-weight: 600;
}
.contest-tab {
  flex-shrink: 0;
  padding: 0.4rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s ease-in-out;
  border-bottom: 2px solid transparent;
  color: rgba(28,20,16,0.45);
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.contest-tab:hover {
  color: var(--foreground);
  border-bottom-color: rgba(28,20,16,0.25);
}
.contest-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}
@media (max-width: 640px) {
  .contest-tab-wrap {
    gap: 0.375rem 0.25rem;
    margin-bottom: 2rem;
  }
  .contest-tab {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
  }
}

.winner-card { display: flex; flex-direction: column; }
.winner-photo {
  aspect-ratio: 3/4; background-color: var(--secondary); overflow: hidden; margin-bottom: 1rem; position: relative; border-radius: 10px;
}
.winner-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.winner-photo-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
}
.winner-initials {
  color: rgba(28,20,16,0.2); font-weight: 300; font-family: var(--font-serif); font-size: clamp(2.5rem, 5vw, 3.5rem);
}
.winner-info { display: flex; flex-direction: column; gap: 0.375rem; }
.award-badge {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; align-self: flex-start;
}
.award-gold { background-color: rgba(146,126,98,0.15); color: var(--accent); border: 1px solid rgba(146,126,98,0.4); }
.award-silver { background-color: rgba(28,20,16,0.08); color: rgba(28,20,16,0.55); border: 1px solid rgba(28,20,16,0.18); }
.award-bronze { background-color: rgba(122,34,44,0.1); color: rgba(122,34,44,0.75); border: 1px solid rgba(122,34,44,0.2); }
.award-other { background-color: rgba(28,20,16,0.06); color: rgba(28,20,16,0.6); border: 1px solid rgba(28,20,16,0.15); }
.winner-name { color: var(--foreground); font-weight: 600; font-size: 1rem; line-height: 1.25; font-family: var(--font-serif); margin-top: 0.5rem; }
.winner-affil { color: rgba(28,20,16,0.45); font-size: 0.75rem; line-height: 1.625; }

/* Apply Form */
.form-section { margin-bottom: 2.5rem; }
.form-section-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.form-section-title { font-size: 1rem; font-weight: 600; color: var(--primary); border-left: 4px solid var(--primary); padding-left: 0.75rem; }
.form-section-body { display: flex; flex-direction: column; gap: 1rem; padding-left: 0.25rem; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 0.375rem; align-items: start; }
@media(min-width:640px){ .form-row { grid-template-columns: 160px 1fr; gap: 1rem; } }
.form-label { font-size: 0.875rem; color: rgba(28,20,16,0.6); font-weight: 500; }
@media(min-width:640px){ .form-label { padding-top: 0.625rem; text-align: right; } }
.form-req { color: var(--primary); margin-left: 0.125rem; }
.form-input {
  width: 100%; padding: 0.625rem 0.75rem; background-color: var(--card); border: 1px solid var(--border);
  font-size: 0.875rem; color: var(--foreground); transition: border-color 0.2s; outline: none; box-sizing: border-box;
}
.form-input::placeholder { color: rgba(28,20,16,0.25); }
.form-input:focus { border-color: var(--primary); }
.form-select {
  padding: 0.625rem 0.75rem; background-color: var(--card); border: 1px solid var(--border);
  font-size: 0.875rem; color: var(--foreground); transition: border-color 0.2s; outline: none; box-sizing: border-box;
}
.form-select:focus { border-color: var(--primary); }

.apply-list-card {
  border: 1px solid var(--border); background-color: var(--card); transition: all 0.2s;
  display: flex; align-items: stretch; margin-bottom: 1.25rem;
}
.apply-list-card:hover { border-color: rgba(122,34,44,0.25); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.apply-list-strip { width: 0.375rem; flex-shrink: 0; background-color: var(--primary); }
.apply-list-body {
  flex: 1; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; justify-content: space-between;
}
@media(min-width:640px){ .apply-list-body { flex-direction: row; align-items: center; } }

/* ==========================================================================
   EDUCATION PAGES (교육)
   ========================================================================== */
.edu-feature-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; border: 1px solid var(--border); background-color: var(--card); }
.edu-feature-no { color: var(--primary); font-weight: 300; font-size: 1.25rem; line-height: 1; margin-top: 0.125rem; flex-shrink: 0; font-family: var(--font-serif); }
.edu-feature-text { font-size: 0.875rem; color: rgba(28,20,16,0.75); line-height: 1.625; }

.edu-sec-hdr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.5rem; }
.edu-sec-title { font-size: 1rem; font-weight: 600; color: var(--foreground); border-left: 4px solid var(--primary); padding-left: 0.75rem; }
.edu-btn { font-size: 0.75rem; color: #fff; background-color: var(--primary); padding: 0.5rem 1rem; cursor: pointer; transition: background-color 0.2s; border: none; outline: none; }
.edu-btn:hover { background-color: rgba(122,34,44,0.9); }

.edu-grid-3 { display: grid; grid-template-columns: 1fr; border: 1px solid var(--border); }
@media(min-width:768px){ .edu-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.edu-grid-col { border-bottom: 1px solid var(--border); }
@media(min-width:768px){ .edu-grid-col { border-bottom: none; border-right: 1px solid var(--border); } .edu-grid-col:last-child { border-right: none; } }
.edu-grid-head { background-color: var(--primary); color: #fff; font-size: 0.875rem; font-weight: 500; text-align: center; padding: 0.875rem 1rem; }
.edu-grid-body { padding: 1.25rem; }
.edu-grid-sub { font-size: 0.75rem; color: rgba(28,20,16,0.5); margin-bottom: 1rem; }

.inst-card {
  text-align: left; background: none; border: none; padding: 0; width: 100%; cursor: pointer; outline: none;
  display: flex; flex-direction: column; justify-content: flex-start; height: 100%;
}
.inst-card-img-wrap {
  overflow: hidden; border: 1px solid var(--border); aspect-ratio: 3/4; background-color: rgba(28,20,16,0.03); position: relative;
}
.inst-card-img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.5s; display: block; }
.inst-card:hover .inst-card-img { transform: scale(1.05); }
.inst-card-info { padding: 0.75rem 0 0.25rem 0.5rem; border-left: 2px solid transparent; transition: border-color 0.2s; }
.inst-card:hover .inst-card-info { border-left-color: var(--primary); }

.inst-panel-backdrop {
  position: fixed; inset: 0; background-color: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 2000; display: none; opacity: 0; transition: opacity 0.3s;
}
.inst-panel {
  position: fixed; top: 0; right: 0;
  width: 82vw; max-width: 320px; height: 100%;
  background-color: var(--background);
  z-index: 2001;
  box-shadow: -10px 0 35px rgba(0,0,0,0.28);
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease;
  display: flex; flex-direction: column;
  overflow: visible;
}
@media (min-width: 640px) {
  .inst-panel {
    width: 380px; max-width: 80vw;
  }
}
@media (min-width: 1024px) {
  .inst-panel {
    width: 400px;
  }
}
.inst-panel.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}
.inst-panel-backdrop.open { display: block; opacity: 1; }

.inst-panel-inner {
  height: 100%; width: 100%;
  overflow-y: auto; display: flex; flex-direction: column;
  background-color: var(--background);
  position: relative;
}

/* Floating Close button in dimmed backdrop area (middle of left side) */
.inst-panel-side-close {
  position: absolute;
  left: -50px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  padding: 0;
}
.inst-panel.open .inst-panel-side-close {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.25s ease 0.2s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.inst-panel-side-close:hover,
.inst-panel-side-close:active {
  background: #8b1d27;
  border-color: #8b1d27;
  transform: translateY(-50%) scale(1.12);
  color: #ffffff;
}
@media (max-width: 360px) {
  .inst-panel { width: 80vw; max-width: 270px; }
  .inst-panel-side-close { left: -42px; width: 34px; height: 34px; }
}

/* Close button on top-right of instructor photo */
.inst-photo-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}
.inst-photo-close-btn:hover,
.inst-photo-close-btn:active {
  background: #8b1d27;
  border-color: #8b1d27;
  color: #ffffff;
  transform: scale(1.05);
}


/* ==========================================================================
   LOGIN PAGE (App.tsx LoginPage 1:1 복원)
   ========================================================================== */
.login-page-wrap {
  min-height: calc(100vh - 100px);
  margin-top: 100px;
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--background);
}
@media (min-width: 1024px) {
  .login-page-wrap {
    grid-template-columns: 1fr 1fr;
  }
}

/* Left panel — branding */
.login-left-panel {
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background-color: var(--foreground);
  min-height: calc(100vh - 100px);
}
@media (min-width: 1024px) {
  .login-left-panel {
    display: flex;
  }
}
.login-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.login-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(122,21,40,0.55) 0%, rgba(28,20,16,0.85) 100%);
}
.login-quote-wrap {
  position: relative;
  z-index: 10;
  padding: 4rem 3rem 2rem 3rem;
  margin-top: auto;
  margin-bottom: auto;
}
.login-quote-bar {
  width: 2rem;
  height: 1px;
  background-color: var(--accent);
  margin-bottom: 1.5rem;
}
.login-quote-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 1rem;
  font-family: 'Playfair Display', serif;
  font-style: italic;
}
.login-quote-author {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}
.login-bottom-wrap {
  position: relative;
  z-index: 10;
  padding: 3rem;
}
.login-copyright {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.75rem;
}

/* Right panel — form */
.login-right-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 3rem 2rem 5rem 2rem;
  background-color: var(--background);
  min-height: calc(100vh - 100px);
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .login-right-panel {
    padding: 3.5rem 4rem 5rem 4rem;
  }
}
@media (min-width: 1024px) {
  .login-right-panel {
    padding: 3.5rem 5rem 5rem 5rem;
  }
}
.login-form-container {
  max-width: 24rem; /* 384px */
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .login-form-container {
    margin: 0;
  }
}

.login-heading-wrap {
  margin-bottom: 2.5rem;
}
.login-tag-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}
.login-tag-bar {
  width: 1.25rem;
  height: 1px;
  background-color: var(--accent);
}
.login-tag-text {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
}
.login-title {
  color: var(--foreground);
  margin-bottom: 0.5rem;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
}
.login-subtitle {
  color: rgba(28, 20, 16, 0.45);
  font-size: 0.875rem;
  font-weight: 300;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.login-field {
  display: flex;
  flex-direction: column;
}
.login-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(28, 20, 16, 0.55);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.login-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--card);
  border: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--foreground);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.login-input::placeholder {
  color: rgba(28, 20, 16, 0.25);
}
.login-input:focus {
  border-color: var(--primary);
}

.login-pw-wrapper {
  position: relative;
  width: 100%;
}
.login-input-pw {
  padding-right: 2.75rem;
}
.login-pw-toggle {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  color: rgba(28, 20, 16, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.login-pw-toggle:hover {
  color: rgba(28, 20, 16, 0.6);
}

.login-opts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.25rem;
}
.login-chk-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.login-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  accent-color: var(--primary);
  cursor: pointer;
}
.login-chk-text {
  font-size: 0.75rem;
  color: rgba(28, 20, 16, 0.45);
  transition: color 0.2s;
}
.login-chk-label:hover .login-chk-text {
  color: rgba(28, 20, 16, 0.65);
}
.login-find-pw {
  font-size: 0.75rem;
  color: rgba(28, 20, 16, 0.4);
  border-bottom: 1px dashed rgba(28, 20, 16, 0.2);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.login-find-pw:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.login-submit-btn {
  width: 100%;
  padding: 0.875rem;
  background-color: var(--primary);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  transition: background-color 0.2s;
}
.login-submit-btn:hover {
  background-color: rgba(122, 21, 40, 0.9);
}
.login-submit-btn:active {
  background-color: rgba(122, 21, 40, 0.8);
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.75rem 0;
}
.login-divider-line {
  flex: 1;
  height: 1px;
  background-color: var(--border);
}
.login-divider-text {
  color: rgba(28, 20, 16, 0.25);
  font-size: 0.75rem;
}

.login-signup-box {
  text-align: center;
}
.login-signup-prompt {
  font-size: 0.875rem;
  color: rgba(28, 20, 16, 0.45);
  margin-bottom: 0.75rem;
}
.login-signup-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  border: 1px solid var(--border);
  font-size: 0.875rem;
  color: rgba(28, 20, 16, 0.6);
  background-color: transparent;
  transition: border-color 0.2s, color 0.2s;
}
.login-signup-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.login-terms-notice {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(28, 20, 16, 0.25);
  line-height: 1.6;
}
.login-terms-link {
  text-decoration: underline;
  color: inherit;
  transition: color 0.2s;
}
.login-terms-link:hover {
  color: rgba(28, 20, 16, 0.5);
}


/* ==========================================================================
   KISA MEMBERSHIP & REGISTER PAGES (회원가입 프로세스 스타일)
   ========================================================================== */
.kisa-subpage-wrap {
  min-height: 100vh;
  padding-top: 5rem; /* Header offset */
  padding-bottom: 6rem;
  background-color: var(--background);
}

/* Sub banner */
.kisa-sub-banner {
  background-color: var(--foreground);
  color: #ffffff;
  padding: 4rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.kisa-sub-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(122,21,40,0.4) 0%, rgba(28,20,16,0.9) 100%);
  pointer-events: none;
}
.kisa-sub-banner-inner {
  position: relative;
  z-index: 1;
  max-width: 48rem;
  margin: 0 auto;
}
.kisa-sub-banner-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.kisa-sub-banner-tag .tag-bar {
  width: 1.25rem;
  height: 1px;
  background-color: var(--accent);
}
.kisa-sub-banner-tag .tag-text {
  color: var(--accent);
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  font-weight: 600;
  text-transform: uppercase;
}
.kisa-sub-banner-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #ffffff;
}
.kisa-sub-banner-desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.6;
}

/* Step Navigation */
.kisa-sub-content {
  max-width: 56rem; /* 896px */
  margin: -2rem auto 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 10;
}
.kisa-step-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 1.25rem 2rem;
  box-shadow: 0 4px 20px rgba(28,20,16,0.04);
  margin-bottom: 2rem;
  gap: 1.5rem;
}
.kisa-step-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  opacity: 0.35;
  transition: opacity 0.3s;
}
.kisa-step-item.active {
  opacity: 1;
}
.kisa-step-item .step-num {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary);
}
.kisa-step-item .step-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
}
.kisa-step-divider {
  width: 2rem;
  height: 1px;
  background-color: var(--border);
}
@media (max-width: 640px) {
  .kisa-step-nav { gap: 0.75rem; padding: 1rem; }
  .kisa-step-divider { width: 1rem; }
  .kisa-step-item .step-name { font-size: 0.75rem; }
}

/* Register Card */
.kisa-register-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 2.5rem;
  box-shadow: 0 4px 25px rgba(28,20,16,0.03);
}
@media (max-width: 640px) {
  .kisa-register-card { padding: 1.5rem; }
}

/* Section */
.kisa-reg-section {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.kisa-reg-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.kisa-reg-sec-header {
  margin-bottom: 1.25rem;
}
.kisa-reg-sec-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.kisa-reg-sec-desc {
  display: block;
  font-size: 0.8125rem;
  color: rgba(28, 20, 16, 0.45);
  margin-top: 0.25rem;
}
.req-badge {
  display: inline-block;
  background-color: var(--primary);
  color: #ffffff;
  font-size: 0.6875rem;
  padding: 0.125rem 0.375rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Textarea & Table */
.kisa-textarea-box textarea.kisa-term-textarea,
.kisa-textarea-box div.kisa-term-textarea,
.kisa-term-textarea {
  font-family: var(--font-sans);
  width: 100%;
  height: 140px;
  background-color: var(--background);
  border: 1px solid var(--border);
  padding: 1rem;
  font-size: 0.8125rem;
  color: rgba(28,20,16,0.7);
  line-height: 1.6;
  box-sizing: border-box;
}
.kisa-textarea-box textarea.kisa-term-textarea {
  resize: vertical;
  outline: none;
}
.kisa-textarea-box div.kisa-term-textarea {
  overflow-y: auto;
  word-break: break-all;
}
.kisa-table-box {
  overflow-x: auto;
  border: 1px solid var(--border);
}
.kisa-term-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  text-align: left;
}
.kisa-term-table th {
  background-color: var(--secondary);
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: var(--foreground);
  border-bottom: 1px solid var(--border);
}
.kisa-term-table td {
  padding: 0.75rem 1rem;
  color: rgba(28,20,16,0.75);
  border-bottom: 1px solid var(--border);
}
.kisa-term-table tr:last-child td {
  border-bottom: none;
}

/* Agree line */
.kisa-agree-line {
  margin-top: 0.875rem;
  display: flex;
  justify-content: flex-end;
}
.kisa-chk-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.kisa-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
  cursor: pointer;
}
.kisa-chk-text {
  font-size: 0.84375rem;
  color: rgba(28, 20, 16, 0.7);
  transition: color 0.2s;
}
.kisa-chk-label:hover .kisa-chk-text {
  color: var(--primary);
}

/* Agree all box */
.kisa-agree-all-box {
  background-color: var(--secondary);
  border: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.kisa-chk-all-text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--foreground);
}

/* Buttons */
.kisa-reg-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}
.kisa-btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  border: 1px solid var(--border);
  color: rgba(28, 20, 16, 0.6);
  background: var(--card);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
}
.kisa-btn-cancel:hover {
  border-color: var(--foreground);
  color: var(--foreground);
}
.kisa-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2.5rem;
  background-color: var(--primary);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  transition: background-color 0.2s;
  cursor: pointer;
}
.kisa-btn-primary:hover {
  background-color: var(--primary-hover);
}

/* Form Grid */
.kisa-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .kisa-form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .col-span-2 {
    grid-column: span 2;
  }
}
.kisa-form-row {
  display: flex;
  flex-direction: column;
}
.kisa-field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(28, 20, 16, 0.65);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.kisa-field-label .req {
  color: var(--primary);
}
.kisa-form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--card);
  border: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--foreground);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.kisa-form-input:focus {
  border-color: var(--primary);
}
.kisa-form-input[readonly] {
  background-color: var(--background);
  cursor: not-allowed;
}
.kisa-field-msg {
  font-size: 0.75rem;
  margin-top: 0.25rem;
  display: block;
}
.kisa-field-msg.reg_msg_red { color: #d4183d; }
.kisa-field-msg.reg_msg_green { color: #16a34a; }

.kisa-form-textarea {
  width: 100%;
  height: 90px;
  padding: 0.75rem 1rem;
  background-color: var(--card);
  border: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--foreground);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
  resize: vertical;
}
.kisa-form-textarea:focus {
  border-color: var(--primary);
}

/* Address & Cert */
.kisa-addr-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.kisa-addr-zip-row {
  display: flex;
  gap: 0.5rem;
}
.kisa-zip-input {
  max-width: 140px;
}
.kisa-btn-zip {
  padding: 0.75rem 1.25rem;
  background-color: var(--secondary);
  border: 1px solid var(--border);
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.kisa-btn-zip:hover {
  background-color: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.kisa-cert-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.kisa-btn-cert {
  padding: 0.625rem 1.25rem;
  background-color: var(--secondary);
  border: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--foreground);
  cursor: pointer;
  transition: all 0.2s;
}
.kisa-btn-cert:hover {
  background-color: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}
.kisa-cert-status-msg {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: #16a34a;
}

.kisa-consent-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Captcha */
.kisa-captcha-wrap {
  background-color: var(--background);
  border: 1px solid var(--border);
  padding: 1rem;
  display: inline-block;
}

/* Result Page */
.kisa-result-card {
  text-align: center;
  padding: 4rem 2rem;
}
.kisa-result-icon-box {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background-color: rgba(122, 21, 40, 0.08);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem auto;
}
.kisa-result-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
.kisa-result-subtitle {
  color: rgba(28, 20, 16, 0.55);
  font-size: 0.9375rem;
  max-width: 32rem;
  margin: 0 auto 2.5rem auto;
  line-height: 1.6;
}
.kisa-result-info-box {
  max-width: 28rem;
  margin: 0 auto 2.5rem auto;
  border: 1px solid var(--border);
  background-color: var(--background);
  padding: 1.25rem 1.5rem;
  text-align: left;
}
.kisa-result-info-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  border-bottom: 1px solid rgba(28,20,16,0.06);
}
.kisa-result-info-row:last-child {
  border-bottom: none;
}
.kisa-result-info-row .label {
  color: rgba(28, 20, 16, 0.45);
}
.kisa-result-info-row .val {
  color: var(--foreground);
}
.kisa-result-alert-box {
  max-width: 32rem;
  margin: 0 auto 2.5rem auto;
  background-color: var(--secondary);
  border-left: 3px solid var(--accent);
  padding: 1rem 1.25rem;
  text-align: left;
}
.kisa-result-alert-box .alert-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--foreground);
  margin-bottom: 0.25rem;
}
.kisa-result-alert-box .alert-desc {
  font-size: 0.8125rem;
  color: rgba(28, 20, 16, 0.65);
  line-height: 1.5;
}
.kisa-result-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* SNS Login styling sync */
#sns_login, #sns_register {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
#sns_login h3, #sns_register h2 {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(28, 20, 16, 0.7);
  margin-bottom: 1rem;
}
#sns_login .sns-wrap, #sns_register .sns-wrap {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.sns-icon.social_link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1.25rem;
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s;
}
.sns-icon.social_link:hover {
  opacity: 0.9;
}
.sns-icon.sns-naver {
  background-color: #03c75a;
  color: #ffffff;
}
.sns-icon.sns-kakao {
  background-color: #fee500;
  color: #191919;
}