/* ==========================================================================
   수풍정 디자인 토큰 — 임시 값
   색 · 글꼴 · 크기 · 간격 · 둥글기는 전부 여기서만 정의한다.
   다른 CSS/JS 는 var(--…) 로만 참조하므로 이 파일만 바꾸면 디자인이 바뀐다.
   ========================================================================== */
:root {
  /* 바탕 · 글자 · 선 */
  --color-bg: #FBFAF7;
  --color-surface: #FFFFFF;
  --color-ink: #1E2326;
  --color-ink-2: #5A5F63;
  --color-ink-3: #646A6E;   /* 보조 글씨 — 밝은 바탕 명암비 4.8:1 */
  --color-line: #D6D4CD;
  --color-line-2: #B9B7AF;
  --color-hover: rgba(127, 127, 127, 0.08);
  --color-primary: #1E2326;       /* 주 버튼 배경 */
  --color-primary-ink: #FBFAF7;   /* 주 버튼 글자 */
  --color-hex-dim: #D6D4CD;       /* 아직 뽑히지 않은 효 */
  --color-danger: #B3261E;
  --color-todo-bg: #FFE58A;      /* 초안에서 채워야 할 값 표시 */
  --color-todo-ink: #1E2326;

  /* 태극 아이콘 (효 변화) */
  --color-taiji-dark: #1E2326;
  --color-taiji-light: #FFFFFF;
  --color-taiji-rim: #1E2326;
  --taiji-in: 0.35s;    /* 태극 무늬가 나타나는 시간 */
  --taiji-spin: 1.4s;   /* 제자리에서 도는 시간 */
  --taiji-turns: 3;     /* 도는 바퀴 수 */
  --taiji-out: 0.35s;   /* 태극 무늬가 사라지는 시간 */

  /* 팔괘 — bg: 괘판 칸 배경 / line: 괘상 선 · 괘 이름 글자 (밝은 바탕 명암비 4.8:1 이상) / ink: 칸 위 3효 기호 */
  --tri-geon-bg: #E6F1FB; --tri-geon-line: #1F6AB5; --tri-geon-ink: #0C447C;  /* 건 하늘 */
  --tri-tae-bg:  #9FE1CB; --tri-tae-line:  #167758; --tri-tae-ink:  #04342C;  /* 태 못 */
  --tri-ri-bg:   #F0997B; --tri-ri-line:   #B34622; --tri-ri-ink:   #4A1B0C;  /* 리 불 */
  --tri-jin-bg:  #AFA9EC; --tri-jin-line:  #6056D5; --tri-jin-ink:  #26215C;  /* 진 우레 */
  --tri-son-bg:  #C0DD97; --tri-son-line:  #4B731A; --tri-son-ink:  #173404;  /* 손 바람 */
  --tri-gam-bg:  #185FA5; --tri-gam-line:  #0C447C; --tri-gam-ink:  #0C447C;  /* 감 물 */
  --tri-gan-bg:  #B4B2A9; --tri-gan-line:  #5F5E5A; --tri-gan-ink:  #2C2C2A;  /* 간 산 */
  --tri-gon-bg:  #FAC775; --tri-gon-line:  #935D12; --tri-gon-ink:  #412402;  /* 곤 땅 */

  /* 괘판 칸 그림 — 칸 모양대로 잘려 배경으로 깔린다. none 이면 bg 색만 */
  --tri-geon-img: url("/assets/img/trigram/geon.webp");  /* 하늘 */
  --tri-tae-img:  url("/assets/img/trigram/tae.webp");   /* 못 */
  --tri-ri-img:   url("/assets/img/trigram/ri.webp");    /* 불 */
  --tri-jin-img:  url("/assets/img/trigram/jin.webp");   /* 우레 */
  --tri-son-img:  url("/assets/img/trigram/son.webp");   /* 바람 */
  --tri-gam-img:  url("/assets/img/trigram/gam.webp");   /* 물 */
  --tri-gan-img:  url("/assets/img/trigram/gan.webp");   /* 산 */
  --tri-gon-img:  url("/assets/img/trigram/gon.webp");   /* 땅 */
  /* 메인 주역 안내 버튼 — 반투명 */
  --chip-bg: rgba(251, 250, 247, 0.55);
  --chip-blur: 6px;

  /* 광고 자리 안내 — 앉아 있는 설(강아지), 배경이 투명한 그림 */
  --mascot-img: url("/assets/img/seol-sit.webp");

  /* 메인 화면 바탕 그림 — 화면에 고정. veil = 그림 위에 덮는 바탕색 진하기 */
  --home-bg-img: url("/assets/img/home-bg.webp");
  --home-bg-position: center bottom;
  --home-bg-veil: 0;

  /* 결과 페이지 바탕 — 태극 곡선으로 나눠 왼쪽 상괘 · 오른쪽 하괘 그림 (더 큰 파일) */
  --tri-geon-bgimg: url("/assets/img/trigram/bg/geon.webp");
  --tri-tae-bgimg:  url("/assets/img/trigram/bg/tae.webp");
  --tri-ri-bgimg:   url("/assets/img/trigram/bg/ri.webp");
  --tri-jin-bgimg:  url("/assets/img/trigram/bg/jin.webp");
  --tri-son-bgimg:  url("/assets/img/trigram/bg/son.webp");
  --tri-gam-bgimg:  url("/assets/img/trigram/bg/gam.webp");
  --tri-gan-bgimg:  url("/assets/img/trigram/bg/gan.webp");
  --tri-gon-bgimg:  url("/assets/img/trigram/bg/gon.webp");
  --result-bg-veil: 0.5;           /* 그림 위에 덮는 바탕색 진하기 (0 = 그림 그대로, 1 = 그림 안 보임) */
  --text-halo: 0 0 2px var(--color-bg), 0 0 6px var(--color-bg), 0 0 12px var(--color-bg);  /* 그림 위 글씨 둘레 번짐 */
  --scene-outline-color: var(--color-bg);   /* 결과 풍경 문장 — 글자 윤곽선 (밝은 테두리) */
  --scene-outline-width: 4px;
  --scene-glow: 0 0 10px var(--color-bg), 0 0 18px var(--color-bg);
  --result-bg-soft: 5;             /* 태극 경계를 흐리게 하는 정도 (0 = 또렷, 클수록 번짐) */
  --result-bg-eyes: 1;             /* 태극의 두 눈(작은 원) 1 = 보임, 0 = 없음 */
  --hex-outline: rgba(30, 35, 38, 0.3);            /* 괘상 막대 테두리 — 그림 · 비슷한 색 위에서 윤곽 */
  --hex-outline-width: 0.8;
  --wheel-glyph-halo: rgba(251, 250, 247, 0.85);        /* 그림 위 3효 기호 윤곽선 색 */
  --wheel-glyph-halo-width: 1.4;                          /* 윤곽선 두께 (0 이면 없음) */

  /* 글꼴 */
  --font-serif: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", serif;
  --font-sans: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --fw-regular: 400;
  --fw-bold: 600;

  /* 글자 크기 */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 21px;
  --fs-2xl: 26px;
  --lh-tight: 1.3;
  --lh-body: 1.65;

  /* 간격 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* 둥글기 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* 레이아웃 */
  --content-max: 480px;
  --header-h: 48px;
  --ad-w: 320px;
  --ad-h: 50px;
  --ad-rect-w: 300px;
  --ad-rect-h: 250px;
  --wheel-max: 380px;
  --focus-ring: 2px solid var(--color-ink);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1E2124;
    --color-surface: #25292C;
    --color-ink: #EDEBE6;
    --color-ink-2: #B3B1AB;
    --color-ink-3: #A8A6A1;
    --color-line: #34383C;
    --color-line-2: #4A4F54;
    --color-primary: #EDEBE6;
    --color-primary-ink: #1E2124;
    --color-hex-dim: #3E4347;
    --color-danger: #F2B8B5;
    --color-taiji-rim: #B3B1AB;
    --result-bg-veil: 0.6;
    --home-bg-veil: 0.62;
    --chip-bg: rgba(30, 33, 36, 0.5);
    /* 팔괘 선 · 이름 색 — 어두운 바탕 명암비 4.8:1 이상 (하늘은 옅게, 물은 또렷하게 구분) */
    --tri-geon-line: #B8D5F5;
    --tri-tae-line: #22BA8A;
    --tri-ri-line: #E58F73;
    --tri-jin-line: #A29CE6;
    --tri-son-line: #76B628;
    --tri-gam-line: #62A9F0;
    --tri-gan-line: #A5A4A0;
    --tri-gon-line: #E49223;
    --hex-outline: rgba(255, 255, 255, 0.22);
  }
}