@charset "utf-8";

/* 사이트 테마 컬러
 * 사이트마다 --theme-color 값만 수정한다.
 * 파생 색상은 기준 색에서 자동 계산되므로 수정하지 않는다.
 *
 * 쓰는 곳에 따라 두 가지로 나눈다.
 * - 배경(버튼, 선택 칩 등) : --theme-color + 위 글자 --theme-color-text
 * - 글자 · 선 · 그래프(강조 글자, 링크, 활성 메뉴, 막대 등) : --theme-color-accent
 *   테마 컬러가 너무 어둡거나(예: 남색) 밝으면(예: 노랑) 글자로 썼을 때 본문 글자 · 배경과 구분되지 않으므로,
 *   색 계열은 두고 밝기만 읽기 좋은 범위로 맞춘 색이다. (주황 #F45F00 처럼 이미 적당한 색은 그대로)
 */
:root {
    /* 사이트별로 이 값만 수정 */
    --theme-color: #253c2b;

    /* 글자 · 선 색을 자동 대신 직접 정하려면 아래 주석을 풀고 값을 넣는다. (라이트 화면 / 다크 화면) */
    /* --theme-color-accent-custom: #3375b5; */
    /* --theme-color-accent-dark-custom: #68a9ed; */

    /* 파생 색상 (수정 불필요) */
    --theme-color-hover: color-mix(in srgb, var(--theme-color) 85%, #000);
    --theme-color-light: color-mix(in srgb, var(--theme-color) 15%, #fff);
    --theme-color-lighter: color-mix(in srgb, var(--theme-color) 6%, #fff);
    --theme-color-border: color-mix(in srgb, var(--theme-color) 40%, #fff);
    --theme-color-alpha: color-mix(in srgb, var(--theme-color) 20%, transparent);
    --theme-color-text: #fff; /* 테마 컬러 배경 위 글자색 */

    /* 글자 · 선 색 : 아래 @supports 에서 자동 계산, 지원하지 않는 브라우저는 테마 컬러 그대로 */
    --theme-color-accent-auto: var(--theme-color);
    --theme-color-accent-dark-auto: var(--theme-color);
    --theme-color-accent: var(--theme-color-accent-custom, var(--theme-color-accent-auto));
    --theme-color-accent-dark: var(--theme-color-accent-dark-custom, var(--theme-color-accent-dark-auto)); /* 어두운 배경(IST 콘솔 다크 모드) */

    /* 보색 (차트 등 테마 컬러와 대비가 필요한 요소) */
    --theme-color-complement: hsl(from var(--theme-color) calc(h + 180) s l);

    /* 정삼각 배색 중 오른쪽 색 (색상환 시계 방향 120°, 테마 컬러와 어울리는 강조 색) */
    --theme-color-triad: hsl(from var(--theme-color) calc(h + 120) s l);
}

/* 밝기 자동 보정 (OKLCH : 사람 눈 기준 밝기 l 0~1, 채도 c, 색상 h)
 * - accent : 흰 배경용 밝기 0.55~0.68, 어두운 배경용 0.72~0.85 로 맞춘다.
 *   채도가 낮은 색(남색 등)은 흐린 회색이 되지 않게 채도를 최대 0.12 까지 올린다. (무채색은 그대로 회색)
 * - hover : 어두운 색(밝기 0.45 미만)은 밝게, 나머지는 어둡게 0.08 만큼 바꾼다. (어두운 색을 더 어둡게 하면 차이가 보이지 않음)
 * - text : 테마 컬러가 밝으면(밝기 0.75 이상, 예: 노랑 · 연두) 검정, 아니면 흰색
 * clamp(0, (기준 - l) * 1000, 1) 은 l 이 기준보다 작으면 1, 크면 0 이 되는 조건 계산이다.
 */
@supports (color: oklch(from red l c h)) {
    :root {
        --theme-color-accent-auto: oklch(from var(--theme-color) clamp(0.55, l, 0.68) max(c, min(c * 3, 0.12)) h);
        --theme-color-accent-dark-auto: oklch(from var(--theme-color) clamp(0.72, l, 0.85) max(c, min(c * 3, 0.12)) h);
        --theme-color-hover: oklch(from var(--theme-color) calc(l - 0.08 + 0.16 * clamp(0, (0.45 - l) * 1000, 1)) c h);
        --theme-color-text: oklch(from var(--theme-color) clamp(0, (0.75 - l) * 1000, 1) 0 0);
    }
}