@import "tailwindcss";

/* ── 자연 친화 팔레트 ── */
:root {
  --background: #f6eeda;
  --foreground: #3f2c14;
  --wood-dark: #6b4220;
  --wood: #8a5a2b;
  --wood-light: #b57f42;
  --cream: #f6eeda;
  --cream-bright: #fffdf6;
  --ink: #3f2c14;
  --ink-soft: #6f5c39;
  --gold-line: rgba(236, 215, 166, 0.28);
  --leaf: #7fb539;
  --leaf-dark: #4f8420;
  --leaf-bright: #b6e05e;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-gowun);
  --font-mono: var(--font-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-gowun), sans-serif;
}

.font-jua {
  font-family: var(--font-jua), sans-serif;
}
.font-gowun {
  font-family: var(--font-gowun), sans-serif;
}
.font-num {
  font-family: var(--font-mono), monospace;
}

/* ── 공통 컴포넌트 스타일 ── */

/* 상단 어두운 나무 바 */
.nature-topbar {
  background: linear-gradient(rgba(30, 20, 8, 0.92), rgba(30, 20, 8, 0.72));
  border-bottom: 1px solid var(--gold-line);
}

/* 매달린 나무 판자 (타이틀) */
.wood-plank {
  border-radius: 14px 20px 14px 20px;
  background: linear-gradient(#8a5a2b, #6b4220);
  border: 1px solid rgba(48, 30, 12, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 196, 0.35),
    inset 0 -3px 8px rgba(0, 0, 0, 0.35),
    0 6px 14px rgba(30, 20, 8, 0.35);
  color: #fbf1d9;
}

/* 어두운 우드 pill (자원·보조 버튼) */
.wood-pill {
  border-radius: 999px;
  background: linear-gradient(rgba(44, 30, 14, 0.86), rgba(28, 19, 8, 0.9));
  border: 1px solid var(--gold-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 205, 0.18),
    0 4px 10px rgba(20, 14, 4, 0.3);
  color: #f4e9cf;
}
.wood-pill-icon {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #f6ecd2, #d8c39a);
  box-shadow: inset 0 -2px 4px rgba(120, 95, 50, 0.35);
}

/* 초록 자연 버튼 (주 액션) */
.nature-btn {
  border-radius: 999px;
  background: linear-gradient(#a3d24f, #5d8f22);
  border: 1px solid #3f6a13;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 235, 0.5),
    0 6px 14px rgba(50, 80, 20, 0.4);
  color: #26400c;
  font-family: var(--font-jua), sans-serif;
}
.nature-btn:hover:not(:disabled) {
  background: linear-gradient(#b0dc60, #6a9e2c);
}

/* 앰버 우드 버튼 (구매·건설) */
.amber-btn {
  border-radius: 999px;
  background: linear-gradient(#d6a43c, #a87a1e);
  border: 1px solid #7a5510;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.5),
    0 5px 12px rgba(90, 60, 10, 0.35);
  color: #3d2c07;
  font-family: var(--font-jua), sans-serif;
}
.amber-btn:hover:not(:disabled) {
  background: linear-gradient(#e2b34e, #b78829);
}

/* 패널: 바깥 나무 프레임 */
.panel-wood {
  border-radius: 30px;
  background-image:
    repeating-linear-gradient(
      118deg,
      rgba(255, 232, 186, 0.22) 0 3px,
      rgba(0, 0, 0, 0) 3px 9px,
      rgba(52, 28, 8, 0.4) 9px 15px,
      rgba(0, 0, 0, 0) 15px 24px
    ),
    repeating-linear-gradient(
      62deg,
      rgba(255, 232, 186, 0.1) 0 2px,
      rgba(0, 0, 0, 0) 2px 11px
    ),
    linear-gradient(160deg, #b57f42, #8a5a2b 45%, #6d4420);
  box-shadow:
    inset 0 2px 0 rgba(255, 238, 200, 0.35),
    inset 0 -4px 10px rgba(34, 18, 4, 0.4),
    0 12px 28px rgba(20, 14, 4, 0.4);
}

/* 패널: 안쪽 크림 종이 */
.panel-paper {
  border-radius: 22px;
  background-image:
    radial-gradient(
      140% 90% at 50% 0%,
      rgba(255, 252, 240, 0.9),
      rgba(246, 238, 218, 0.94)
    ),
    repeating-linear-gradient(
      90deg,
      rgba(140, 110, 60, 0.05) 0 2px,
      rgba(0, 0, 0, 0) 2px 7px
    );
  background-color: #f6eeda;
  box-shadow:
    inset 0 0 0 1px rgba(120, 90, 45, 0.25),
    inset 0 6px 18px rgba(140, 110, 60, 0.18);
}

/* 크림 카드 (잎모양 비대칭 모서리) */
.card-nature {
  position: relative;
  border-radius: 6px 22px 6px 22px;
  background: linear-gradient(#fffdf6, #f3e9d0);
  border: 1px solid rgba(126, 95, 48, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 250, 0.9),
    0 4px 10px rgba(120, 95, 50, 0.14);
}
.card-accent {
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(#9ccc48, #4f8420);
}

/* 연두 칩 (적성 등) */
.chip-nature {
  border-radius: 3px 10px 3px 10px;
  background: rgba(126, 181, 57, 0.14);
  border: 1px solid rgba(94, 140, 42, 0.3);
  color: #4d6b21;
}

/* 잎사귀 장식 */
.leaf {
  position: absolute;
  border-radius: 0 100% 0 100%;
  background: linear-gradient(140deg, #a8d95c, #59902a);
  pointer-events: none;
}
.leaf-bright {
  background: linear-gradient(140deg, #bde36f, #6aa233);
}

/* 진행 바 (포만도 등) */
.bar-track {
  border-radius: 999px;
  background: rgba(126, 95, 48, 0.16);
  box-shadow: inset 0 1px 2px rgba(100, 75, 35, 0.28);
  overflow: hidden;
}
.bar-fill-green {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7fc23a, #b6e05e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 230, 0.6);
}
.bar-fill-amber {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d6a43c, #eec767);
  box-shadow: inset 0 1px 0 rgba(255, 255, 230, 0.6);
}
.bar-fill-red {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d66a4a, #ee9367);
}