/* �ΰ� ��Ʈ */
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');
/* �ٵ� & ���̵�� ��Ʈ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=Nanum+Gothic:wght@400;700&display=swap');

:root {
  --bg-dark: #0a0001;        /* ���� */
  --bg-gray: #2a2a2a;        /* £�� ȸ�� */
  --bg-red: #1b0002;         /* �� ���� */

  --header-bg: linear-gradient(-45deg, #0a0001, #1b0002, #2a2a2a); 
  --sidebar-bg: linear-gradient(-45deg, #0a0001, #1b0002, #2a2a2a);

  --card-dark: #0c0000;
  --card-mid: #200000;

  --ink: #eaeaea;
  --muted: #888;

  /* ����Ʈ �÷� */
  --accent: #9c8347;       /* Firebrick Red */
  --accent-hover: #e5e1c9; /* ���� ���� hover */
  --accent-soft: #8B0000;  /* Dark Red */

  --border: #330000;
}




/* === ���� === */
body {
  margin: 0;
  font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif;

  /* ���� + ȸ�� + ���� ���ζ� �ִϸ��̼� */
  background: linear-gradient(-45deg, var(--bg-dark), var(--bg-gray), var(--bg-red), #000);
  background-size: 400% 400%;
  animation: auroraFlow 30s ease infinite;

  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
}

@keyframes auroraFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

a {
  text-decoration: none;
  color: var(--ink);
  transition: color 0.3s;
}
a:hover { color: var(--accent-hover); }



/* === ī��/���� === */
main {
  margin-left: 270px;
  margin-top: 90px;
  padding: 2em;
  max-width: 1200px;
}
section {
  background: 
    radial-gradient(circle at 70% 30%, rgba(230, 220, 170, 0.15), transparent 60%), /* ���̺���/���ο� �� �Ȱ� */
    radial-gradient(circle at 20% 80%, rgba(200, 190, 150, 0.12), transparent 70%), /* �帰 �Ȱ� �߰� */
    linear-gradient(160deg, #0a0d14, #1b1f26 70%); /* ��ο� ���׷��� ��� */
  padding: 1.5em 2em;
  margin-bottom: 2em;
  border-radius: 10px;
  border: 1px solid #14161a;
  box-shadow: 0 0 25px rgba(15, 20, 30, 0.8);
  transition: transform 0.3s, box-shadow 0.3s;
}

section:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 35px rgba(230, 220, 170, 0.25); /* hover �� �Ȱ��� ���� */
}

section h2 {
  border-bottom: 2px solid var(--accent); /* ����Ʈ�� ���� ���� */
  padding-bottom: 0.3em;
  margin-bottom: 1em;
  
  /* ���� ���� ���׷��� ������ */
  color: #bbb;
  
  font-weight: 700;
  text-shadow: none; /* ���� ���� */
  animation: none;   /* glow ȿ�� ���� */
}



/* === �׸��� ���̾ƿ� === */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2em;
  margin-top: 2em;
}
@media (max-width: 768px) {
  .grid-layout { grid-template-columns: 1fr; }
}

/* === �� ���� === */
#rice-calculator {
  background: linear-gradient(
      160deg,
      rgba(15, 15, 25, 1) 0%,     /* ���׷��� ��ũ */
      rgba(25, 25, 35, 0.95) 40%,     /* �� ���� ���׷��� */
      rgba(240, 220, 160, 0.09) 100% /* ���̺���/���ο� �Ȱ� */
  );
  padding: 2em;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 0 25px rgba(240, 220, 160, 0.15), /* ���̺��� �� */
              0 0 15px rgba(0, 0, 0, 0.6) inset; /* ���� ���� */
  margin-bottom: 2em;
  transition: transform 0.3s, box-shadow 0.3s;
}
.calc-container {
  display: flex; align-items: center; gap: 1em; flex-wrap: wrap;
}
.calc-container .input-group {
  display: flex; flex-direction: column; flex: 1 1 200px;
}
.calc-container input {
  padding: 8px; border-radius: 4px;
  border: 1px solid var(--border);
  background: #0c0000;
  color: var(--ink);
}
#swapBtn {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer; font-size: 1.2em;
  transition: background 0.3s, border 0.3s, box-shadow 0.3s;
}
#rice-calculator:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 35px rgba(240, 220, 160, 0.25),
              0 0 20px rgba(0, 0, 0, 0.7) inset;
}