@charset "utf-8";
/* ===========================================================================
 * mature-modern 팔레트
 *
 * 미색 종이 바탕에 짙은 남색 잉크, 흙빛·이끼빛 보조색. 차분한 쪽이다.
 *
 * 규칙은 theme-base.css 에 있다. 이 파일은 색만 정한다.
 * ======================================================================== */

:root {
	/* 따뜻한 종이색 바탕에 짙은 남색 잉크, 그리고 흙빛·이끼빛 보조색.
	 *
	 * 앞서 쓰던 남보라(#4F46E5) 한 색 계열은 화면이 차고 단단해 보였다.
	 * 문제풀이 판처럼 색 칸이 빽빽한 자리에서는 그 채도가 그대로 소음이
	 * 된다. 그래서 채도를 전반적으로 내리고 바탕을 흰색에서 미색으로
	 * 옮겼다. 색이 적게 튀는 만큼 표의 숫자가 먼저 읽힌다.
	 *
	 * 값은 눈대중이 아니라 사용자가 준 시안에서 뽑았다. 화면 영역만 잘라
	 * 18색으로 줄여 보니 미색(#F5F2E3), 짙은 남색(#193551·#2B3747),
	 * 이끼색(#85989A·#5D7172), 흙색(#AA9184·#814E51)이 뼈대였다. */
	/* 2026-09-07 전체적으로 한 단계 밝혔다.
	 *
	 * "색이 너무 대비된다"는 말이 맞았다. 재어 보니 흰 글씨를 인 칸들이
	 * 11:1~15:1 에 앉아 있었다. WCAG AA 가 요구하는 것은 4.5:1 이고, 그 위는
	 * 눈이 치르는 값이지 규격이 바라는 값이 아니다. 특히 짙은 남색 띠와
	 * 새까만 칠판이 미색 바탕 위에서 검은 널빤지처럼 보였다.
	 *
	 * 색상은 그대로 두고 밝기만 올렸다. 4.5:1 바닥까지 내리지는 않았다 -
	 * 그러면 남색이 아니라 그냥 파랑이 된다. 7:1 은 AA 를 두 배 가까이
	 * 넘기고 본문 기준 AAA 도 만족하면서, 띠와 칠판이 눈에 띄게 눅어진다.
	 *
	 *   강조색   11.7:1 -> 7.1:1      원리 칠판  12.4:1 -> 7.0:1
	 *   진한색   15.0:1 -> 9.0:1      실전 칠판  10.1:1 -> 7.0:1
	 *   본문먹   14.7:1 -> 9.0:1
	 *
	 * 본문 먹색만 9:1 에 세운 것은 읽는 글자라서다. 띠나 칠판처럼 7:1 까지
	 * 내리면 본문이 흐려진다. */
	--gsu-accent:        #345B84;   /* 강조색. 링크·버튼·선택된 것 */
	--gsu-accent-rgb:    52, 91, 132; /* 위와 같은 색. 투명도를 섞을 때 쓴다 */
	--gsu-accent-deep:   #294B6E;   /* 눌렀을 때, 진한 배경 */
	--gsu-accent-soft:   #EDE7D8;   /* 아주 옅은 배경 */
	--gsu-accent-line:   #CFC5B0;   /* 강조색 계열 테두리 */

	/* 강조색·먹색으로 칠한 칸 위에 얹는 글자색.
	 *
	 * theme-base.css 에 #fff 로 박아 두었던 것을 변수로 뺐다. 지금 두 스킨은
	 * 강조색이 다 어두워서 흰 글씨가 맞지만, 그것은 이 두 스킨의 사정이지
	 * 규칙이 아니다. 밝은 강조색을 쓰는 스킨이 생기면 이 한 줄만 바꾸면 된다.
	 * 규칙 파일에 색을 남겨 두지 않는다는 원칙도 이것으로 지켜진다. */
	--gsu-on-accent:     #fff;

	/* 강조색 칸 위에서 한 낱말만 도드라지게 할 때(리포트 단추의 "원리"·"실전").
	 *
	 * 여기 있던 것은 --gsu-sand 였는데, sand 는 표의 칸을 칠하는 색이지 글자색이
	 * 아니다. 강조색이 어두울 때는 우연히 맞아떨어졌을 뿐이라, 이번에 강조색을
	 * 밝히자마자 4.2:1 로 떨어졌다. 쓰임이 다른 색을 빌려 쓰면 이렇게 된다.
	 *
	 * 흰색으로 바꾸면 대비는 넉넉하지만 나머지 글자와 같아져서 도드라지는
	 * 뜻이 사라진다. 그래서 흰색과 구별되면서(1.4:1) 바탕과는 충분히 벌어지는
	 * (5.2:1) 값을 따로 둔다. */
	--gsu-on-accent-2:   #E7DCCA;

	--gsu-ink:           #4C493E;   /* 본문 글자. 검정 대신 따뜻한 먹색 */
	--gsu-ink-2:         #615A4D;   /* 흐린 글자. 순위표 옅은 줄에서도 5.0:1 */
	--gsu-ink-3:         #9C9384;   /* 더 흐린 글자 */

	--gsu-line:          #DCD5C4;   /* 기본 테두리 */
	--gsu-line-2:        #EBE6D8;   /* 옅은 구분선 */
	--gsu-surface:       #FCFAF2;   /* 카드 바탕. 종이 흰색 */
	--gsu-canvas:        #F5F2E3;   /* 페이지 바탕. 미색 */

	/* 레일의 "문제풀이 리포트" 단추 색.
	 *
	 * 골라 놓은 급수 딱지(입문/초급/...)의 오각형 색이다. 그 딱지는 CSS 가
	 * 아니라 그림이라(make_img/theme_<이름>/sub02/btn_on.png) 그림에서 뽑아
	 * 옮겨 적었다. 그림을 갈면 이 값도 같이 고쳐야 한다. 지금은 두 모던
	 * 스킨이 같은 그림을 쓰므로 둘이 같다.
	 *
	 * 한동안 5성진단의 분홍(#D367A3)을 썼다가 이 색으로 돌아왔다.
	 *
	 * 흰 글씨 대비는 3.5:1 로 AA(4.5:1)에 못 미친다. 같은 색 딱지가 이미
	 * 흰 글씨를 얹고 있어 화면 안에서 겉돌지는 않지만, 대비를 올릴 일이
	 * 생기면 여기가 아니라 딱지 그림부터 손봐야 한다. */
	--gsu-rail-report:   #AB7A97;
	/* 문제풀이 판 전용. 뜻이 있는 색이라 따로 이름을 준다. */
	--gsu-clay:          #92675B;   /* "푼 문제" 칸. 원래 새빨강(#fa4238) */
	--gsu-clay-soft:     #B1897A;   /* 같은 계열 옅은 쪽 */
	--gsu-sage:          #5D7172;   /* 아래 단 머리글 */
	--gsu-sand:          #D9C6A9;   /* 보조 바탕 */
	/* 판 위 눈금.
	 *
	 * 한동안 흰색이었다. 옅은 파스텔 칸 위에서는 흰 줄이 가장 또렷하게 칸을
	 * 갈라서 골랐던 값인데, 흰 칸에서는 줄이 통째로 사라진다는 문제가 있다.
	 * 실전 표는 자료가 없는 자리가 흰 칸으로 남아서, 한 줄에 흰 칸이 여럿
	 * 이어지면 어디까지가 한 칸인지 알 수 없었다.
	 *
	 * 그래서 흰색과 칸 색 사이, 양쪽 모두에서 보이는 자리로 옮겼다. 흰 칸
	 * 위에서는 옅은 미색 줄로, 파스텔 칸 위에서는 밝은 줄로 읽힌다. */
	--gsu-chalk:         #E3D9BE;

	/* 문제풀이 판.
	 *
	 * 2026-09-07 판에서 나무틀과 남색 바탕을 걷어냈다. 남색은 칠판 그림
	 * (blackboard_*.png)에 맞춘 색이었는데, 그 그림을 안 쓰기로 했으니
	 * 남을 까닭이 없다. 이제 판은 종이빛 카드다.
	 *
	 * 한동안 두 판을 반 톤 어긋나게 두었다 - 원리는 서늘하게(#FBFAF4),
	 * 실전은 따뜻하게(#F7F3EA). 두 사다리를 색으로도 가르려던 것인데,
	 * 위아래로 나란히 놓고 보면 그 차이가 "따로 정한 색"이 아니라 "한쪽만
	 * 빛바랜 것"으로 읽혔다. 가르는 일은 제목 글씨 색(--gsu-board-title)이
	 * 이미 하고 있으므로, 판 색은 따뜻한 쪽 하나로 합쳤다.
	 *
	 * 이름 둘은 그대로 둔다. cute 처럼 두 판을 정말 다른 색으로 쓰는 스킨이
	 * 있고, header_popup.php 가 이 두 이름으로 갈아 끼우기 때문이다. */
	--gsu-board:         #F7F3EA;   /* 원리 판 */
	--gsu-board-r:       #F7F3EA;   /* 실전 판. 같은 값 */

	/* 판 둘레 선. 판 색이 바탕(--gsu-canvas)과 반 톤밖에 차이가 안 나서
	 * 카드가 어디서 끝나는지 흐렸다. 안쪽 표 테두리(--gsu-board-frame)와
	 * 같은 계열에서 한 단 짙은 쪽이다 - 표보다 바깥선이 옅으면 안쪽이 더
	 * 도드라져 카드가 액자처럼 보인다. 판 색이 하나이니 선도 하나다. */
	--gsu-board-edge:    #C6BCA6;   /* 원리 판 둘레 */
	--gsu-board-edge-r:  #C6BCA6;   /* 실전 판 둘레. 같은 값 */

	/* 판 위의 글씨. 판이 밝아졌으니 셋 다 어두운 쪽이다.
	 * 예전에는 흰색·분필색이었다 - 어두운 칠판을 전제한 값이었다. */
	--gsu-board-ink:     #4C493E;   /* 판 위 본문. 종이빛 위 8.5:1 */
	--gsu-board-title:   #3C5471;   /* 원리 판 제목. 판 색과 같은 계열로 8.0:1 */
	--gsu-board-title-r: #6A4F3C;   /* 실전 판 제목. 따뜻한 쪽으로 7.6:1 */
	--gsu-board-link:    #2F5578;   /* 판 위 링크("퍼즐보기"). 7.4:1 */
	--gsu-board-frame:   #CBC6B8;   /* 표 바깥 테두리. 종이 위에서 눈에 걸릴 만큼만 */
	--gsu-board-shadow:  0 1px 3px rgba(42, 40, 34, .12);

	--gsu-radius:        10px;
	--gsu-shadow:        0 1px 2px rgba(42,40,34,.05), 0 6px 20px rgba(42,40,34,.07);

	/* 주간 학생순위 열 줄. home_rank.php 가 hsla() 로 찍는 값이다.
	 *
	 * 밝기를 44% 올려 35~53% 이던 줄 바탕을 79~97% 로 밀어 올린다. 원래는
	 * 어두운 빨강에 흰 글씨였는데, 밝은 바탕 스킨에서는 글씨가 어두워야
	 * 하므로 바탕도 밝은 쪽이어야 앞뒤가 맞는다.
	 *
	 * 색상은 강조색(#1F3A56, H 209)에서 가져왔다. 채도는 그보다 낮게 잡는다 -
	 * 열 줄이 세로로 쌓이는 자리라 강조색만큼 진하면 목록이 아니라 벽으로
	 * 보인다. */
	--gsu-rank-h:        211;   /* 강조색(#345B84)의 색상 */
	--gsu-rank-s:        30%;
	--gsu-rank-l-add:    44%;

	/* -------------------------------------------------------------------
	 * 갈래색: 뜻이 다른 묶음은 색도 달라야 한다
	 * -------------------------------------------------------------------
	 * 여기까지의 색은 모두 강조색 한 줄기에서 나왔다. 그래서 표의 다섯 분야
	 * 머리띠가 다 같은 남색이었고, 어느 칸이 어느 분야에 속하는지는 세로줄을
	 * 눈으로 좇아야만 알 수 있었다.
	 *
	 * 이 site 에는 다섯 갈래짜리 분류가 둘 있는데 서로 다른 축이다.
	 *
	 *   분야(f) 양·질·시간·공간·대상   -- 표의 열 묶음. 차례가 늘 같다.
	 *   유형(t) 정서성·방향성·동작성·가능성·가치성
	 *                                  -- 문제풀이 순서 동그라미. 차례가
	 *                                     학생마다 다르다(g5_member.mb_2).
	 *
	 * 둘은 겹치지 않는다. 그래서 자리(첫째·둘째…)가 아니라 이름에 색을 맨다.
	 * 유형은 home_solve.php 가 이름을 보고 gsu-ot1..5 를 붙인다. 그래야
	 * 가능성이 어느 학생 화면에서나 같은 색으로 나온다.
	 *
	 * 한 갈래마다 세 단이 필요하다.
	 *
	 *   기본  머리띠와 "푼 것" 칸.   먹색 대비 5.4:1 이상
	 *   -mid  아래 단 머리글.        먹색 대비 9.9:1 이상
	 *   -pale "안 푼 것" 칸.         먹색 대비 12.8:1 이상
	 *
	 * 2026-09-07 세 단을 모두 밝은 쪽으로 옮겼다. 처음에는 머리띠를 흰색
	 * 대비 7:1 로 잡았는데, 시안과 나란히 놓고 보니 시안 쪽이 훨씬 옅었다.
	 * 시안의 머리띠를 재어 보면 흰색 대비 2.5:1 언저리다.
	 *
	 * 진하기를 낮추면 글자색이 따라 뒤집힌다. 흰 글씨는 이 정도 바탕에서
	 * 3:1 도 못 넘기므로, 이제 세 단 모두 먹색 글씨를 인다. 그 글자색이
	 * --gsu-on-fill 이다. 세 단이 다 밝으니 한 색으로 족하다.
	 *
	 * 덤으로 오래 끌던 흠 하나가 같이 없어졌다. 실전 표는 한 칸에 조각이
	 * 여럿 들어가고, 그중 하나만 풀어도 칸 전체가 "푼 것"이 된다. 예전에는
	 * 그 진한 칸 안에 아직 안 푼 조각이 먹색으로 남아 2.7:1 로 묻혔다.
	 * 이제 바탕이 밝으므로 조각이 푼 것이든 아니든 먹색으로 읽힌다.
	 *
	 * 채도는 시안보다 한 단 낮췄다 - 다섯 색이 가로로 붙어 서는 자리라,
	 * 시안만큼 선명하면 표가 아니라 색표본이 된다. */

	/* 갈래색 위의 글자. 세 단이 모두 밝아져서 한 색으로 두루 쓴다. */
	--gsu-on-fill: #2B2A26;

	/* 이름표 칸(구분 / 가능성(초급)). 분야가 아니라 표의 뼈대라서
	 * 다섯 갈래 어디에도 딸리지 않는 중립색을 쓴다. */
	--gsu-f0:      #CFCABF;

	/* 분야 5색: 양(量)·질(質)·시간(時間)·공간(空間)·대상(對象) */
	--gsu-f1:      #8EA2B9;  --gsu-f1-mid: #D1D7DE;  --gsu-f1-pale: #F1F3F4;
	--gsu-f2:      #BD9989;  --gsu-f2-mid: #E0D4CF;  --gsu-f2-pale: #F5F2F0;
	--gsu-f3:      #7DA9AB;  --gsu-f3-mid: #CCD9DA;  --gsu-f3-pale: #EFF2F3;
	--gsu-f4:      #8AA97E;  --gsu-f4-mid: #D0DACC;  --gsu-f4-pale: #F0F3EF;
	--gsu-f5:      #B998A4;  --gsu-f5-mid: #DED4D8;  --gsu-f5-pale: #F4F1F3;

	/* 유형 5색: 가능성·방향성·동작성·정서성·가치성 */
	--gsu-t1:      #425B78;  /* 가능성 */
	--gsu-t2:      #7B4F35;  /* 방향성 */
	--gsu-t3:      #685729;  /* 동작성 */
	--gsu-t4:      #26625D;  /* 정서성 */
	--gsu-t5:      #86426A;  /* 가치성 */
}

/* ---------------------------------------------------------------------------
 * 색을 css 로 못 바꾸는 그림 두 가지
 * ------------------------------------------------------------------------
 * png 안에 색이 박혀 있어 규칙으로는 손댈 수 없다. ops/recolor_theme.py 가
 * 스킨마다 한 벌씩 다시 뽑아 두었고, 여기서 그쪽을 가리킨다. 모양·크기가
 * 같은 파일이라 배치는 흔들리지 않는다.
 *
 * url() 은 변수로 조립할 수 없다. 그래서 이 네 줄만 규칙 쪽(theme-base.css)이
 * 아니라 팔레트에 있다.
 *
 * 무게는 원본(home_solve.css, 1,1,0)과 같고 이 파일이 뒤에 실리므로 이긴다.
 * ------------------------------------------------------------------------ */

/* "01 가능성" 오각형 (home_solve.css:88).
 *
 * 유형마다 색이 다르므로 다섯 벌이다. 어느 벌을 쓸지는 home_solve.php 가
 * 유형 이름을 보고 붙이는 gsu-ot1~5 가 정한다. 색은 --gsu-t1~5 와 같은
 * 값으로 구워져 있다(ops/recolor_theme.py 의 THEMES['mature']['types']). */
#gsu_home_solve .gsu-order-item.gsu-ot1 {
	background-image: url(/cham/make_img/theme_mature/sub02/order_bg_1.png);
}
#gsu_home_solve .gsu-order-item.gsu-ot2 {
	background-image: url(/cham/make_img/theme_mature/sub02/order_bg_2.png);
}
#gsu_home_solve .gsu-order-item.gsu-ot3 {
	background-image: url(/cham/make_img/theme_mature/sub02/order_bg_3.png);
}
#gsu_home_solve .gsu-order-item.gsu-ot4 {
	background-image: url(/cham/make_img/theme_mature/sub02/order_bg_4.png);
}
#gsu_home_solve .gsu-order-item.gsu-ot5 {
	background-image: url(/cham/make_img/theme_mature/sub02/order_bg_5.png);
}

/* 초급 / 중급 / 고급 단추 (home_solve.css:230, :251) */
#gsu_home_solve .gsu-pair-level {
	background-image: url(/cham/make_img/theme_mature/sub02/btn_off.png);
}
#gsu_home_solve .gsu-pair-level.is-on {
	background-image: url(/cham/make_img/theme_mature/sub02/btn_on.png);
}