/* ─────────────────────────────────────────────────────────────
   공용 토큰

   관리자 화면(p_style.css)과 학생·강사 앱(common.css)이 함께 씁니다.
   두 레이아웃이 서로 다른 CSS 를 불러서, 여기 두지 않으면 값이 양쪽에
   복사되고 결국 어긋납니다.
   ───────────────────────────────────────────────────────────── */
/* ###### 화면 색 (C · 부드러운 안개) ############

   학생 앱(common.css)과 관리자(p_style.css)가 함께 씁니다. 예전에는 앱만
   이 색을 쓰고 관리자는 학원 색을 따로 썼는데, 같은 제품인데 두 화면이
   다른 규칙으로 칠해지고 있었습니다.

   강조색은 학원과 무관하게 고정합니다. 예전에는 학원이 고른 색
   (Agent.main_color)을 앱 전체 강조색으로 썼는데, 실제로는 28개 학원 중 색을
   정한 곳이 5곳뿐이고 그중 실제 학원은 하나였습니다. 나머지 23곳은 아무도
   고르지 않은 초록(#77b59e)을 보고 있었습니다 -- "학원마다 다른 얼굴" 이
   실제로 일어나지 않고 있었던 셈입니다.

   고정하면 안전해집니다. 밝은 바탕에서 임의의 색은 위험합니다. 흰 바탕에서
   글자로 썼을 때 멜로디 분홍 2.6:1, 기본 초록 2.4:1, 형광 노랑 1.3:1 로
   읽히지 않습니다(4.5:1 이 기준). 이 남색은 5.6:1 이라 글자로도 채움으로도
   씁니다 -- "학원 색은 채움에만" 이라는 규칙 자체가 필요 없어집니다.

   학원 정체성은 색이 아니라 홈 상단의 로고가 담당합니다. 관리자는 애초에
   학원 직원만 보는 도구라 "어느 학원인가" 를 색으로 말할 이유가 없습니다.

   강조색을 바꾸려면 --app-accent 한 줄만 고치면 됩니다(옅은 배경
   --app-accent-tint 와 그림자 --app-shadow-cta 도 같이 맞춰야 합니다).

   상태(출석·미출석·취소)는 아래 --state-* 를 씁니다. */
:root {
    --app-bg: #EEF1F5;        /* 화면 바탕 */
    --app-surface: #FFFFFF;   /* 카드 */
    --app-sunken: #E6EAEF;    /* 못 고르는 칸, 보조 버튼 */
    --app-ink: #16202B;       /* 본문 */
    --app-mid: #5C6B7A;       /* 보조 글자. 흰 바탕 5.5:1 · 회색 바탕 4.6:1 */
    /* C 안 시안은 회색을 세 단계(#8494A2 · #9AA7B4 · #A6B2BE)로 두었는데,
       흰 카드에서 3.1:1 · 2.7:1 · 2.4:1 이라 본문으로 쓸 수 없습니다.
       밝은 바탕에서 4.5:1 을 넘는 회색은 사실상 한 개뿐이라 글자는
       --app-mid 하나로 모았습니다. 단계는 크기와 굵기로 냅니다. */
    --app-faint: #75838F;     /* 비활성 버튼 글자 전용. 회색 칸 위 3.2:1 */
    --app-line: #DFE5EB;
    --app-line2: #E8ECF1;
    --app-accent: #4A62B8;    /* 강조 · 주 동작 */
    /* 강조색을 옅게 깐 배경. 칩처럼 강조색 글자를 얹는 자리에 씁니다.
       반투명(rgba 12%)이 아니라 흰 카드 위 합성 결과를 그대로 적었습니다 --
       반투명이면 뒤가 무엇이냐에 따라 대비가 달라져서 검사도 못 합니다.
       이 위의 --app-accent 글자가 4.8:1 입니다. */
    --app-accent-tint: #E9ECF6;
    --app-on-accent: #FFFFFF; /* 강조색 위 글자 */
    --app-r: 22px;            /* 카드 */
    --app-rs: 16px;           /* 작은 카드·버튼 */
    --app-shadow: 0 4px 18px rgba(22, 32, 43, 0.05);
    --app-shadow-nav: 0 -4px 18px rgba(22, 32, 43, 0.07);
    /* 주 동작 버튼의 그림자. 무채색 그림자는 버튼을 그냥 얹어 놓은 것처럼
       보이는데, 강조색이 번지면 그 버튼이 화면에서 떠 보입니다. */
    --app-shadow-cta: 0 8px 20px rgba(74, 98, 184, 0.28);
}

/* ###### 관리자 화면이 쓰던 이름 ############

   p_style.css 는 곳곳에서 var(--main-color) / var(--on-main) 을 읽습니다.
   예전에는 이 값을 학원 색(Agent.main_color)으로 채웠습니다. 이제 화면
   색은 학원과 무관하게 고정이라, 이름만 남기고 값은 위 강조색을 가리킵니다.

   덕분에 p_style.css 의 var(--main-color, #59A397) 같은 초록 폴백은 더
   이상 쓰이지 않습니다(변수가 항상 정의되어 있으므로).

   이 별칭을 남겨두는 이유는 두 가지입니다. 33곳을 한 번에 고치면서 놓치는
   곳이 생기면 그 자리만 초록으로 남는데, 여기서 막으면 그런 자리가
   없습니다. 그리고 나중에 관리자만 다른 색으로 가려면 여기 한 줄입니다. */
:root {
    --main-color: var(--app-accent);
    --on-main: var(--app-on-accent);
    /* 강조색 위에 얹는 흐린 글자(부제·보조 라벨). */
    --on-main-soft: rgba(255, 255, 255, 0.75);
}

/* ###### 상태 색 ############
   학원이 고르는 색(Agent.main_color)과 분리합니다.

   이 앱은 색으로 상태를 말합니다. 출석은 초록, 미출석은 빨강, 예약 없이 온
   방문은 주황, 취소는 회색입니다. 이 색이 학원마다 달라지면 뜻이 사라집니다.
   빨강을 고른 학원에서 [예약완료] 가 빨갛게 나오면 오류로 읽힙니다.
   (실제로 운영에 main_color 가 #d32222 빨강, #e3e723 형광 노랑인 학원이 있습니다)

   그래서 학원 색은 "여기가 어느 학원인가" 에만 씁니다 — 상단바, 활성 메뉴,
   주요 버튼. 상태·경고·표 테두리는 아래 값으로 고정합니다.

   값이 세 벌씩인 이유는 배지가 배경·글자·테두리를 함께 쓰기 때문입니다.
   대비를 맞춰 고른 조합이라 하나만 바꾸면 어긋납니다. */
:root {
    /* 출석 · 정상 · 완료 */
    --state-ok-bg: #E4EFE9;
    --state-ok: #2F6B54;
    --state-ok-line: #BFDCCD;

    /* 미출석 · 만료 · 오류 · 조치 필요 */
    --state-no-bg: #FBE7EC;
    --state-no: #A6153A;
    --state-no-line: #F0C4D0;

    /* 곧 만료 · 예약 없이 온 방문. 잘못은 아니지만 알아둘 것 */
    --state-warn-bg: #FDF1DF;
    --state-warn: #8A5A12;
    --state-warn-line: #F0DCBB;

    /* 예약됨 같은 중립 정보 */
    --state-info-bg: #EEF3F8;
    --state-info: #40566E;
    --state-info-line: #DBE4EE;

    /* 취소 · 꺼진 것 */
    --state-off-bg: #F1F1F1;
    /* #777777 은 --state-off-bg(#F1F1F1) 위에서 3.96:1 이라 기준(4.5:1)에
       못 미쳤습니다. 배지 글자는 읽어야 하는 값이라 한 단계 낮춥니다. */
    --state-off: #6B6B6B;
    --state-off-line: #DDDDDD;

    /* 아직 판정되지 않음. 정보가 없다는 뜻이지 문제가 아닙니다 */
    --state-muted: #A8AFAC;

    /* 조치가 필요한 줄의 아주 옅은 배경 */
    --state-no-tint: #FDF7F8;
    --state-no-tint2: #FDF3F5;

    /* 자리가 찼는지 비었는지.
       좋고 나쁨이 아니라 점유 상태라서 무채색입니다. 예약완료를 초록으로 두면
       "잘됐다" 로 읽히는데 실제로는 "이 자리는 찼다" 는 뜻이고, 무엇보다 학원
       색이 초록·빨강일 때 부딪힙니다. 무채색은 어떤 학원 색과도 어울립니다.
       한 칸에 예약과 레슨이 같이 오지 않으므로 채움/외곽선으로 구분합니다. */
    --slot-taken-bg: #3F4652;
    --slot-taken-fg: #FFFFFF;
    --slot-line: #C9CDD4;
    --slot-tint: #F4F5F7;
    --slot-tint-soft: #FAFAFB;
}

/* ###### 달력(v-calendar) ############

   학생 예약하기와 관리자 휴일 설정이 같은 v-calendar 를 씁니다. 라이브러리가
   자기 회색을 쓰는데, 흰 카드에서 요일 머리글(#A0AEC0)이 2.3:1, 못 고르는
   날(#CBD5E0)이 1.5:1 이라 요일은 읽히지 않고 막힌 날은 숫자인지도 안
   보였습니다. 못 고르는 날은 "날짜는 있지만 못 고른다" 가 보여야 합니다. */
.vc-weekday {
    color: var(--app-mid) !important;
}

.vc-title {
    color: var(--app-ink) !important;
}

/* !important 를 걸지 않습니다. 고른 날은 attr 의 contentStyle 로 흰 글자를
   넣는데, 여기서 !important 를 쓰면 그 인라인 색까지 이겨서 강조색 원 위에
   같은 색 글자(2.9:1)가 됩니다. 선택자를 하나 더 붙여 무게만 올립니다. */
.vc-container .vc-day-content {
    color: var(--app-ink);
}

.vc-container .vc-day-content.is-disabled {
    color: var(--app-faint) !important;
}

.vc-arrow {
    color: var(--app-mid) !important;
}

.vc-highlight {
    background-color: var(--app-accent) !important;
}