/* 이 페이지 및 소스는 3EA Networks에 저작권이 귀속됩니다.
무단 사용시에 저작권법 및 부정경쟁방지법에 의거하여 법적 처벌 및 손해 배상 책임을 질 수 있습니다.

This page and its source are copyrighted by 3EA Networks. Unauthorized use may result in legal punishment and damages under the Copyright Act and the Unfair Competition Prevention Act. */
:root{
  /* 브랜드 색상 */
  --brand: #667eea;
  --brand-hov: #764ba2;
  --brand-light: #eef2ff;

  /* 그레이 스케일 - 라이트 테마 */
  --g900:#18181b; --g700:#374151; --g500:#6b7280;
  --g300:#d4d4d8; --g200:#e5e7eb; --g100:#f3f4f6; --g50:white;

  /* 호환성 결과 색상 */
  --high-bg: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --medium-bg: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
  --low-bg: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);

  /* 타이포그래피 */
  --fs-h1: 2.5rem; --fs-h2: 2rem; --fs-h3: 1.6rem;
  --fs-h4: 1.25rem; --fs-p: 1.05rem; --fs-meta: .95rem;

  /* 여백 */
  --sp2: 10px; --sp3: 14px; --sp4: 18px;
  --sp5: 24px; --sp6: 32px; --sp8: 48px; --gap-sec: 64px;

  /* 반경 & 그림자 */
  --radius-card: 1.5rem;
  --shadow: 0 4px 32px rgba(0,0,0,.06), 0 2px 12px rgba(99,102,241,.10);

  /* 글래스모피즘 */
  --glass-bg: rgba(255,255,255,.65);
  --glass-bg-dark: rgba(24,24,27,.55);
  --blur: 20px;
}

[data-theme="dark"]{
  /* 그레이 스케일 - 다크 테마 */
  --g900:#fafafa; --g700:#e5e5e5; --g500:#c5c5c5;
  --g300:#52525b; --g200:#3f3f46; --g100:#27272a; --g50:#18181b;
  background: #18181b;
}

/* 기본 스타일 */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font: 500 var(--fs-p)/1.6 Pretendard, system-ui, sans-serif;
  color: var(--g500);
  background: var(--g50);
  transition: background .3s, color .3s;
  min-height: 100vh;
}
main { max-width: 800px; margin: 0 auto; padding: var(--sp8) var(--sp4); }

/* 타이포그래피 */
h1, h2, h3, h4 {
  font-weight: 700;
  color: var(--g900);
  margin-bottom: var(--sp5);
  transition: color .3s;
}
h1 { font-size: var(--fs-h1); color: var(--brand); text-align: center; }
h1 .year { font-weight: 400; }
h2 {
  font-size: var(--fs-h2);
  border-bottom: 1px solid var(--g200);
  padding-bottom: var(--sp2);
}
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; color: var(--g700); }
p { font-size: var(--fs-p); margin-bottom: var(--sp4); }
label {
  display: block;
  margin-bottom: var(--sp2);
  font-size: var(--fs-meta);
  color: var(--g700);
}

/* 레이아웃 */
.flex { display: flex; }
.items-c { align-items: center; }
.justify-b { justify-content: space-between; }
.gap-3 { gap: var(--sp3); }
.text-center { text-align: center; }
section + section { margin-top: var(--gap-sec); }

/* 설정 행 (언어 & 테마) */
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp5);
  padding-bottom: var(--sp4);
  border-bottom: 1px solid var(--g200);
}
.toggle-label {
  margin-right: var(--sp3);
  font-size: var(--fs-meta);
}

/* 카드 */
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: var(--sp6);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.card.visible { opacity: 1; transform: none; }

/* 버튼 */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp3) var(--sp5);
  font: 500 var(--fs-p)/1 Pretendard;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: transform .15s, background .2s;
  background: var(--g200);
  color: var(--g700);
}
.btn:active { transform: scale(.97); }
.btn-primary {
  padding: var(--sp3) var(--sp8);
  margin-top: var(--sp6);
  background-image: linear-gradient(135deg, var(--brand) 0%, var(--brand-hov) 100%);
  color: #fff;
}
.btn-primary:hover { opacity: 0.9; }
.btn-sm {
  padding: var(--sp2) var(--sp4);
  font-size: var(--fs-meta);
}
.btn-container { display: flex; justify-content: center; }
.btn.active {
  background: var(--brand);
  color: white;
}

/* 버튼 물결 효과 */
.btn:not(.no-ripple)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  padding-top: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: .35;
  background: #fff;
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: transform .5s, opacity .5s;
}
.btn:not(.no-ripple):hover::after {
  transform: translate(-50%, -50%) scale(1.9);
  opacity: 0;
}

/* 입력 필드 */
.name-inputs {
  margin: var(--sp5) 0;
}
.input-group {
  margin-bottom: var(--sp4);
}
.input {
  width: 100%;
  padding: var(--sp3) var(--sp4);
  background: var(--g100);
  border: none;
  border-radius: 8px;
  transition: background .3s, border-color .3s;
  color: var(--g900);
  border: 2px solid transparent;
  font-size: var(--fs-p);
}
.input:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand-light);
}
[data-theme="dark"] .input {
  background: var(--g300);
  border-color: var(--g300);
  color: var(--g900);
}
[data-theme="dark"] .input:focus { background: var(--g200); }

/* 토글 스위치 */
.toggle {
  display: block;
  position: relative;
  width: 51px;
  height: 27px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--g200);
  transition: .2s;
}
.toggle-thumb {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 19px;
  height: 19px;
  background: #fff;
  border-radius: 50%;
  transition: .25s;
}
.toggle input:checked + .toggle-track { background: var(--brand); }
.toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(24px); }

/* 언어 토글 */
.language-toggle {
  display: flex;
  gap: var(--sp2);
}

/* 계산 모드 */
.calculator-modes {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--sp5);
  padding-bottom: var(--sp4);
  border-bottom: 1px solid var(--g200);
}
.calculator-mode {
  flex: 1;
  text-align: center;
  padding: var(--sp3) var(--sp4);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
}
.calculator-mode.active {
  border-color: var(--brand);
  background-color: rgba(102, 126, 234, 0.1);
}
.calculator-mode-icon { font-size: 24px; margin-bottom: var(--sp2); }

/* 결과 스타일 */
.result { text-align: center; }
.heart-icon {
  font-size: 40px;
  margin-bottom: var(--sp4);
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.compatibility-score {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: var(--sp4);
  background-image: linear-gradient(135deg, var(--brand) 0%, var(--brand-hov) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.compatibility-message {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: var(--sp6);
  color: var(--g900);
}
.alert {
  padding: var(--sp4);
  border-radius: 12px;
  background: var(--g100);
  color: var(--g700);
  line-height: 1.6;
}

/* 결과 색상 */
.result.high .compatibility-message { color: #fa709a; }
.result.medium .compatibility-message { color: #f6d365; }
.result.low .compatibility-message { color: #a1c4fd; }

/* 다크테마 조정 */
[data-theme="dark"] .card { background: var(--glass-bg-dark); }
[data-theme="dark"] .alert { background: var(--g200); color: var(--g500); }
[data-theme="dark"] .settings-row { border-color: var(--g300); }
[data-theme="dark"] .calculator-modes { border-color: var(--g300); }
/* 이 페이지 및 소스는 3EA Networks에 저작권이 귀속됩니다.
무단 사용시에 저작권법 및 부정경쟁방지법에 의거하여 법적 처벌 및 손해 배상 책임을 질 수 있습니다.

This page and its source are copyrighted by 3EA Networks. Unauthorized use may result in legal punishment and damages under the Copyright Act and the Unfair Competition Prevention Act. */