/* ==========================================================================
   LearnToday 창호 (Korean Traditional Window) Design System
   한국 전통 창호 문양을 모던하게 재해석한 디자인 시스템
   ========================================================================== */

:root {
  /* ============================================
     창호 Color Palette
     ============================================ */

  /* 전통 목재색 (Traditional Wood Colors) */
  --changho-wood: #B8956A;
  --changho-wood-dark: #8B7355;
  --changho-wood-light: #D4B896;
  --changho-wood-accent: #9A7B4F;

  /* 한지색 (Hanji Korean Paper Colors) */
  --changho-paper: #F5F1E8;
  --changho-paper-dark: #E8E0D0;
  --changho-paper-light: #FDFBF7;

  /* 모던 컬러 (Modern Accent Colors - Redefined) */
  --changho-dark: #2C3E50;
  --changho-dark-light: #34495E;
  --changho-light: #ECF0F1;
  /* Deep Navy for primary actions - replaces generic blue/purple */
  --changho-accent: #1a365d;
  --changho-accent-dark: #0f2442;
  /* Terracotta for warm highlights */
  --changho-highlight: #c05621;

  /* Pattern Opacity Variables */
  --changho-pattern-opacity: 0.12;
  --changho-pattern-opacity-light: 0.08;
  --changho-pattern-opacity-strong: 0.18;

  /* Frame Variables */
  --changho-frame-width: 2px;
  /* Reduced from 3px for elegance */
  --changho-frame-radius: 4px;
  --changho-frame-shadow: 0 4px 20px rgba(26, 54, 93, 0.08);
  /* Softer shadow */

  /* Typography */
  --font-serif: 'Noto Serif KR', serif;
  --font-sans: 'Noto Sans KR', sans-serif;

  /* Motion - Sliding Door Effect */
  --changho-ease: cubic-bezier(0.25, 1, 0.5, 1);

  /* Texture - Hanji Noise */
  --changho-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ============================================
   SVG Pattern Definitions (Inline Data URIs)
   ============================================ */

/* 정사각 창살 패턴 (Square Grid Pattern) */
.changho-pattern-square {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%23B8956A' stroke-width='2' fill='none' opacity='0.12'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 60px 60px;
}

/* 마름모 창살 패턴 (Diamond Pattern) */
.changho-pattern-diamond {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' stroke='%23B8956A' stroke-width='2' fill='none' opacity='0.12'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 60px 60px;
}

/* 십자 창살 패턴 (Cross Pattern) */
.changho-pattern-cross {
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40h80M40 0v80M20 20h40M20 60h40M20 20v40M60 20v40' stroke='%23B8956A' stroke-width='1.5' fill='none' opacity='0.10'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 80px 80px;
}

/* 복합 창호 패턴 (Traditional Changho Pattern with octagon) */
.changho-pattern-traditional {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23B8956A' stroke-width='1.5' fill='none' opacity='0.12'%3E%3Crect x='0' y='0' width='100' height='100'/%3E%3Cpath d='M0 50h100M50 0v100'/%3E%3Cpath d='M50 20L80 50L50 80L20 50Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 100px 100px;
}

/* ============================================
   Section Backgrounds with Patterns
   ============================================ */

/* 기본 창호 섹션 배경 */
.changho-section {
  position: relative;
  background: var(--changho-paper);
}

.changho-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--changho-noise), url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%23B8956A' stroke-width='2' fill='none' opacity='0.12'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: auto, 60px 60px;
  pointer-events: none;
  z-index: 0;
}

.changho-section>* {
  position: relative;
  z-index: 1;
}

/* 마름모 패턴 섹션 */
.changho-section-diamond {
  position: relative;
  background: var(--changho-paper-light);
}

.changho-section-diamond::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' stroke='%23B8956A' stroke-width='2' fill='none' opacity='0.10'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

.changho-section-diamond>* {
  position: relative;
  z-index: 1;
}

/* Hero 전용 배경 (그라디언트 + 패턴) */
.changho-hero-bg {
  position: relative;
  background: linear-gradient(135deg, var(--changho-paper) 0%, var(--changho-paper-dark) 50%, var(--changho-paper-light) 100%);
}

.changho-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23B8956A' stroke-width='1.5' fill='none' opacity='0.12'%3E%3Crect x='0' y='0' width='100' height='100'/%3E%3Cpath d='M0 50h100M50 0v100'/%3E%3Cpath d='M50 20L80 50L50 80L20 50Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 100px 100px;
  pointer-events: none;
  z-index: 0;
}

.changho-hero-bg>* {
  position: relative;
  z-index: 1;
}

/* ============================================
   Traditional Frame Styles (창호 프레임)
   ============================================ */

/* 기본 창호 프레임 */
.changho-frame {
  border: var(--changho-frame-width) solid var(--changho-wood);
  border-radius: var(--changho-frame-radius);
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 0 0 1px var(--changho-paper),
    var(--changho-frame-shadow);
  transition: all 0.4s var(--changho-ease);
}

.changho-frame:hover {
  border-color: var(--changho-wood-dark);
  box-shadow:
    inset 0 0 0 1px var(--changho-paper),
    0 12px 40px rgba(44, 62, 80, 0.18);
  transform: translateY(-2px);
  /* Subtle variation for 'heavy' object feel */
}

/* 두꺼운 프레임 (Featured 카드용) */
.changho-frame-thick {
  border: 4px solid var(--changho-wood);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    inset 0 0 0 2px var(--changho-paper),
    0 12px 48px rgba(44, 62, 80, 0.15);
}

/* 이중 프레임 (특별 강조용) */
.changho-frame-double {
  border: var(--changho-frame-width) solid var(--changho-wood);
  border-radius: var(--changho-frame-radius);
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 0 0 4px var(--changho-paper),
    inset 0 0 0 6px var(--changho-wood-light),
    var(--changho-frame-shadow);
}

/* 글래스 + 창호 프레임 */
.changho-frame-glass {
  border: var(--changho-frame-width) solid var(--changho-wood);
  border-radius: var(--changho-frame-radius);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    var(--changho-frame-shadow);
  transition: all 0.3s ease;
}

.changho-frame-glass:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 16px 48px rgba(44, 62, 80, 0.2);
}

/* ============================================
   Partner Card Styles (파트너 카드)
   ============================================ */

/* 독점 파트너 카드 */
.partner-exclusive {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border: var(--changho-frame-width) solid var(--changho-wood);
  border-radius: var(--changho-frame-radius);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 241, 232, 0.95) 100%);
  box-shadow:
    inset 0 0 0 1px var(--changho-paper),
    0 8px 32px rgba(44, 62, 80, 0.1);
  text-decoration: none;
  color: var(--changho-dark);
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}

.partner-exclusive::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--changho-wood) 0%, var(--changho-wood-light) 50%, var(--changho-wood) 100%);
}

.partner-exclusive:hover {
  border-color: var(--changho-wood-dark);
  transform: translateY(-8px);
  box-shadow:
    inset 0 0 0 1px var(--changho-paper),
    0 20px 60px rgba(44, 62, 80, 0.18);
}

.partner-exclusive:hover::before {
  background: linear-gradient(90deg, var(--changho-wood-dark) 0%, var(--changho-wood) 50%, var(--changho-wood-dark) 100%);
}

/* 특별 파트너 카드 */
.partner-special {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 2px solid var(--changho-wood-light);
  border-radius: var(--changho-frame-radius);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 20px rgba(44, 62, 80, 0.08);
  text-decoration: none;
  color: var(--changho-dark);
  transition: all 0.3s ease;
}

.partner-special:hover {
  border-color: var(--changho-wood);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(44, 62, 80, 0.12);
}

/* 리셀러 파트너 아이템 */
.reseller-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--changho-dark);
  transition: all 0.25s ease;
}

.reseller-item:hover {
  background: rgba(184, 149, 106, 0.1);
  transform: translateY(-2px);
}

.reseller-logo {
  font-size: 2rem;
}

.reseller-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--changho-dark-light);
}

/* ============================================
   Badge Styles (뱃지)
   ============================================ */

.changho-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.changho-badge-exclusive {
  background: linear-gradient(135deg, var(--changho-wood) 0%, var(--changho-wood-dark) 100%);
  color: white;
}

.changho-badge-special {
  background: var(--changho-accent);
  color: white;
}

.changho-badge-own {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.changho-badge-reseller {
  background: var(--changho-light);
  color: var(--changho-dark);
}

/* ============================================
   Typography with Traditional Touch
   ============================================ */

.changho-heading {
  color: var(--changho-dark);
  font-weight: 700;
  position: relative;
  display: inline-block;
}

.changho-heading::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--changho-wood) 0%, transparent 100%);
}

.changho-subheading {
  color: var(--changho-dark-light);
  font-weight: 500;
}

.changho-text {
  color: var(--changho-dark);
  line-height: 1.7;
}

/* ============================================
   Button Styles
   ============================================ */

.changho-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: 2px solid var(--changho-wood);
  border-radius: var(--changho-frame-radius);
  background: transparent;
  color: var(--changho-wood-dark);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.changho-btn:hover {
  background: var(--changho-wood);
  color: white;
}

.changho-btn-primary {
  background: var(--changho-wood);
  color: white;
  border-color: var(--changho-wood);
}

.changho-btn-primary:hover {
  background: var(--changho-wood-dark);
  border-color: var(--changho-wood-dark);
}

.changho-btn-accent {
  background: var(--changho-accent);
  color: white;
  border-color: var(--changho-accent);
}

.changho-btn-accent:hover {
  background: var(--changho-accent-dark);
  border-color: var(--changho-accent-dark);
}

/* ============================================
   Value Proposition Cards
   ============================================ */

.value-card {
  padding: 2rem;
  border: 2px solid var(--changho-wood-light);
  border-radius: var(--changho-frame-radius);
  background: white;
  text-align: center;
  transition: all 0.3s ease;
}

.value-card:hover {
  border-color: var(--changho-wood);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(44, 62, 80, 0.1);
}

.value-card-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.value-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--changho-dark);
  margin-bottom: 0.5rem;
}

.value-card-desc {
  font-size: 0.9375rem;
  color: var(--changho-dark-light);
  line-height: 1.6;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
  :root {
    --changho-frame-width: 2px;
    --changho-pattern-opacity: 0.08;
  }

  .partner-exclusive {
    padding: 1.5rem;
  }

  .partner-special {
    padding: 1.25rem;
  }

  .changho-heading::after {
    width: 40px;
    height: 2px;
  }

  .value-card {
    padding: 1.5rem;
  }

  .value-card-icon {
    font-size: 2.5rem;
  }
}

/* ============================================
   Animation Utilities
   ============================================ */

@keyframes changho-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.changho-animate-in {
  animation: changho-fade-in 0.6s ease forwards;
}

.changho-animate-delay-1 {
  animation-delay: 0.1s;
}

.changho-animate-delay-2 {
  animation-delay: 0.2s;
}

.changho-animate-delay-3 {
  animation-delay: 0.3s;
}

.changho-animate-delay-4 {
  animation-delay: 0.4s;
}