@charset "utf-8";
/* ===========================================================================
 * 스킨 공통 규칙
 *
 * 색을 갈아입히는 규칙은 전부 여기 있다. 다만 색 자체는 여기 없다.
 * 전부 var(--gsu-*) 로만 적고, 실제 값은 스킨마다 따로 있는 팔레트 한 장
 * (theme-mature-modern.css, theme-cute-modern.css) 이 정한다.
 *
 * 왜 나눴나
 * ---------
 * 스킨이 둘이 되는 순간 이 600 줄을 복사할 것이냐가 문제가 된다. 복사하면
 * 반드시 갈라진다. 한쪽만 고치고 다른 쪽을 잊는 일이 생기고, 그때 어느
 * 쪽이 옳은지 알 길이 없다. 그래서 규칙은 한 장, 색은 스킨마다 한 장으로
 * 나눴다. 새 스킨을 더할 때 할 일은 :root 한 덩이를 쓰는 것뿐이다.
 *
 * 그래서 이 파일에는 색 값(#xxxxxx, rgb(...))이 없어야 한다. 있다면 그건
 * 어느 한 스킨에서만 맞는 값이 새어 든 것이다. 주석 안의 값은 예외로 둔다.
 *
 * 싣는 차례는 cham/include/theme.php 의 gsu_theme_css() 가 정한다.
 * 팔레트가 먼저, 이 파일이 나중이다.
 *
 * 규칙
 * ----
 * 1. 색과 테두리, 그림자만 바꾼다. width/height/position/float 은 손대지
 *    않는다. 이 사이트는 픽셀 단위로 맞춰 둔 자리가 많아서 뼈대를 건드리면
 *    바로 어긋난다.
 * 2. 뜻이 있는 색은 남긴다. 진단결과 5단계 색(level_red ... level_blue)은
 *    색 자체가 정보라서 바꾸면 안 된다.
 * 3. !important 는 되도록 안 쓴다. 이 파일이 맨 뒤에 오므로 같은 무게면
 *    이긴다. 원래 규칙이 더 무거운 곳에서만 쓴다.
 *
 * 이 파일을 안 실으면 original 로 완전히 돌아온다. 남는 흔적이 없다.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * 1. 바탕
 * ------------------------------------------------------------------------ */
/* #wrapper 에 깔린 타일 그림을 걷어낸다. 이 한 줄이 화면 인상의 절반이다. */
body,
#wrapper {
	background: var(--gsu-canvas);
	color: var(--gsu-ink);
}

#container { background: none; }

a { color: var(--gsu-ink); }
a:hover { color: var(--gsu-accent); }


/* ---------------------------------------------------------------------------
 * 2. 머리말
 * ------------------------------------------------------------------------ */
header {
	background: var(--gsu-surface);
	border-bottom: 1px solid var(--gsu-line);
}

header .hi {
	background: var(--gsu-accent-soft);
	border-color: var(--gsu-accent-line);
}
header .hi strong { color: var(--gsu-accent); }
header .hi b      { color: var(--gsu-accent-deep); }

header .top_menu li a {
	color: var(--gsu-ink-2);
	background-color: transparent;
}
header .top_menu li a:hover { color: var(--gsu-accent); }
header .top_menu li:last-child a { color: var(--gsu-ink-2); }

/* 학습DNA진단평가 하나만 알약 모양으로 띄워 눈에 걸리게 한다. */
header .top_menu li a.rong2 {
	background: var(--gsu-accent);
	color: var(--gsu-on-accent);
	border-radius: 999px;
	padding: 3px 12px;
}
header .top_menu li a.rong2:hover { background: var(--gsu-accent-deep); color: var(--gsu-on-accent); }

header .top_benner { background: var(--gsu-accent-soft); }


/* 큰 메뉴. 원래는 검정 알약(#444→#111 그러데이션)이었다. */
#dropdown_menu {
	background: transparent;
	background-image: none;
	box-shadow: none;
	border-radius: 0;
}
#dropdown_menu > li > a {
	color: var(--gsu-ink);
	text-shadow: none;
	border-radius: 6px;
	/* 12px 은 본문(15px)보다도 작아서 주 차림표치고 눈에 안 들어온다.
	 * 한 칸씩만 올린다. 칸 너비는 글자 길이를 따라가므로 배치는 그대로다. */
	font-size: 13.5px;
}
header .top_menu li a { font-size: 13px; }
#dropdown_menu > li:hover > a,
#dropdown_menu > li > a:hover,
#dropdown_menu > li > a.selected,
header nav > ul > li > a.selected { color: var(--gsu-accent); }

/* 펼쳐지는 칸은 흰 카드로 */
#dropdown_menu ul,
header nav > ul > li .nav02,
header .dropdown-content {
	background: var(--gsu-surface);
	background-image: none;
	border: 1px solid var(--gsu-line);
	border-radius: var(--gsu-radius);
	box-shadow: var(--gsu-shadow);
}
#dropdown_menu ul li { box-shadow: none; border-bottom: 1px solid var(--gsu-line-2); }
#dropdown_menu ul li:last-child { border-bottom: 0; }
#dropdown_menu ul a { color: var(--gsu-ink-2); text-shadow: none; }
#dropdown_menu ul a:hover,
header .dropdown-content a:hover {
	background: var(--gsu-accent-soft);
	background-image: none;
	color: var(--gsu-accent);
}
/* 말풍선 꼭지도 흰 카드에 맞춰 준다 */
#dropdown_menu ul li:first-child > a:after { border-bottom-color: var(--gsu-line); }
#dropdown_menu ul ul li:first-child a:after { border-right-color: var(--gsu-line); }
#dropdown_menu ul li:first-child a:hover:after { border-bottom-color: var(--gsu-accent-line); }
#dropdown_menu ul ul li:first-child a:hover:after { border-right-color: var(--gsu-accent-line); }

/* 흐르는 공지 띠 */
#tickerBox { background: var(--gsu-ink); }


/* ---------------------------------------------------------------------------
 * 3. 왼쪽 메뉴(속페이지)
 * ------------------------------------------------------------------------ */
.lnb, .lnb_mynote {
	background: var(--gsu-surface);
	border-bottom: 1px solid var(--gsu-line);
}
.lnb ul li a, .lnb_mynote ul li a, .lnb2 ul li a { color: var(--gsu-ink-2); }

.lnb ul li a:hover,      .lnb ul li a.on,      .lnb ul li a.selected,
.lnb_mynote ul li a:hover, .lnb_mynote ul li a.on, .lnb_mynote ul li a.selected,
.lnb2 ul li a:hover,     .lnb2 ul li a.on,     .lnb2 ul li a.selected {
	background: var(--gsu-accent);
	color: var(--gsu-on-accent);
	text-shadow: none;
}
.lnb ul li a.selected, .lnb_mynote ul li a.selected { font-weight: 600; }

.lnb2 ul { background: var(--gsu-surface); border-color: var(--gsu-line); }


/* ---------------------------------------------------------------------------
 * 4. 단추
 * ------------------------------------------------------------------------ */
/* 원래는 하늘색·연두색 그러데이션 알약이었다. 납작한 단색으로 바꾼다. */
.btn_new01, .btn_new02, .btn_link_tab10, .btn_link_tab11 {
	background: var(--gsu-accent);
	background-image: none;
	filter: none;
	border: 0;
	border-radius: 8px;
	color: var(--gsu-on-accent);
	text-shadow: none;
	box-shadow: none;
}
.btn_new01:hover, .btn_new02:hover,
.btn_link_tab10:hover, .btn_link_tab11:hover {
	background: var(--gsu-accent-deep);
	background-image: none;
	color: var(--gsu-on-accent);
}
/* 덜 중요한 쪽(tab10)은 테두리만 */
.btn_link_tab10 {
	background: var(--gsu-surface);
	color: var(--gsu-accent);
	border: 1px solid var(--gsu-accent-line);
}
.btn_link_tab10:hover { background: var(--gsu-accent-soft); color: var(--gsu-accent-deep); }


/* ---------------------------------------------------------------------------
 * 5. 첫 화면
 * ------------------------------------------------------------------------ */
#main_cont01 { background: none; }

/* 로그인 상자 */
#main_cont01 .main_cont01in .main_left .login input { border-color: var(--gsu-line); border-radius: 6px; }
#main_cont01 .main_cont01in .main_left .login input:focus {
	border-color: var(--gsu-accent);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(var(--gsu-accent-rgb), .18);
}
#main_cont01 .main_cont01in .main_left .login input.btn,
#main_cont01 .main_cont01in .main_left .login a.logout {
	background: var(--gsu-accent);
	color: var(--gsu-on-accent);
	border: 0;
	border-radius: 8px;
}
#main_cont01 .main_cont01in .main_left .login .main-login-box p {
	background: var(--gsu-surface);
	border-color: var(--gsu-line);
	border-radius: var(--gsu-radius);
}
#main_cont01 .main_cont01in .main_left .login .main-login-box p a { color: var(--gsu-accent); }

/* 학교 순위 */
#main_cont01 .main_cont01in .main_left .ranking,
#main_cont01 .main_cont01in .main_left .ranking_login_1 {
	background: var(--gsu-surface);
	border: 1px solid var(--gsu-line);
	border-radius: var(--gsu-radius);
	box-shadow: var(--gsu-shadow);
	overflow: hidden;
}
#main_cont01 .main_cont01in .main_left .ranking dl,
#main_cont01 .main_cont01in .main_left .ranking_login_1 dl {
	background: transparent;
	border-color: var(--gsu-line-2);
}
#main_cont01 .main_cont01in .main_left .ranking dl dt,
#main_cont01 .main_cont01in .main_left .ranking_login_1 dl dt { color: var(--gsu-ink-3); }
#main_cont01 .main_cont01in .main_left .ranking dl dd span,
#main_cont01 .main_cont01in .main_left .ranking_login_1 dl dd span { color: var(--gsu-ink-2); }
#main_cont01 .main_cont01in .main_left .ranking dl dd span.name,
#main_cont01 .main_cont01in .main_left .ranking_login_1 dl dd span.name { color: var(--gsu-ink); }

/* 1등 줄만 강조색으로. 왕관 그림은 그대로 둔다. */
#main_cont01 .main_cont01in .main_left .ranking dl.no01,
#main_cont01 .main_cont01in .main_left .ranking_login_1 dl.no_0 {
	background-color: var(--gsu-accent);
}
#main_cont01 .main_cont01in .main_left .ranking dl.no01 dt,
#main_cont01 .main_cont01in .main_left .ranking dl.no01 dd span,
#main_cont01 .main_cont01in .main_left .ranking_login_1 dl.no_0 dt,
#main_cont01 .main_cont01in .main_left .ranking_login_1 dl.no_0 dd span,
#main_cont01 .main_cont01in .main_left .ranking_login_1 dl.no_0 dd span.name { color: var(--gsu-on-accent); }

/* 글씨를 한 단계씩 낮춘다.
 *
 * main.css:24,26,27 의 50/25/18px 은 흰 상자에 짙은 글씨로 크게 보이라고
 * 잡은 값인데, 지금 줄 높이(80px)에 비해 글씨가 꽉 차서 답답하다. 줄 높이와
 * 줄간격(27px)은 그대로 두고 글자만 줄이므로 배치는 흔들리지 않는다. */
#main_cont01 .main_cont01in .main_left .ranking dl dt { font-size: 38px; }
#main_cont01 .main_cont01in .main_left .ranking dl dd span { font-size: 20px; }
#main_cont01 .main_cont01in .main_left .ranking dl dd span.name { font-size: 15px; }

/* 1등 줄 왕관이 글씨를 덮는 문제.
 *
 * main.css:28 이 school_no1.png(52x33)를 background-position 244px 에 놓는다.
 * 줄은 315px 이고 dd 는 x=73 부터 242px 이라 x=315 까지 간다. 즉 왕관이
 * 글씨 자리의 오른쪽 끝 52px 위에 그대로 얹힌다. 학교 이름이 짧을 때는
 * 티가 안 났는데 "종합점수 19160점" 처럼 길어지면 겹친다.
 *
 * 왕관을 옮기지 않고 글씨 쪽에 자리를 비운다. 왕관은 오른쪽 끝에 있어야
 * 1등 표시로 읽히기 때문이다. 78px = 왕관 52 + 사이 26. */
#main_cont01 .main_cont01in .main_left .ranking dl.no01 dd {
	box-sizing: border-box;
	padding-right: 78px;
}

/* 오른쪽 슬라이드 */
#main_cont01 .main_cont01in .main_right .slide,
#main_cont01 .main_cont01in .main_right .main_banner03,
#main_cont01 .main_cont01in .main_benner01 img {
	border-color: var(--gsu-line);
	border-radius: var(--gsu-radius);
}
.slide_ul { background: var(--gsu-surface); }
.slide_btn > li > a { background: var(--gsu-line); border-color: var(--gsu-line); }
.slide_btn > li > a.active { background: var(--gsu-accent); }

/* 띠 배너 */
#main_cont02 .full_benner01 { background: var(--gsu-accent); }
#main_cont02 .full_benner02 { background-color: var(--gsu-ink); }

/* 후기 카드 */
#main_cont03 { background: var(--gsu-canvas); }
#main_cont03 .review .review_box {
	background: var(--gsu-surface);
	border: 1px solid var(--gsu-line);
	border-radius: var(--gsu-radius);
	box-shadow: var(--gsu-shadow);
}
#main_cont03 .review .review_box .txt { border-color: var(--gsu-line-2); }
#main_cont03 .review .review_box .btn a,
#main_cont04 .board > div a.btn {
	background: var(--gsu-accent);
	color: var(--gsu-on-accent);
	border-radius: 6px;
}
#main_cont03 .review .review_box .name a { background: var(--gsu-ink); color: var(--gsu-on-accent); }

/* 아래 카드 */
#main_cont04 { background: var(--gsu-canvas); border-top: 1px solid var(--gsu-line); }
#main_cont04 .board > div {
	background: var(--gsu-surface);
	border: 1px solid var(--gsu-line);
	border-radius: var(--gsu-radius);
}
#main_cont04 .board > div ul li a { color: var(--gsu-ink-2); }
#main_cont04 .board > div ul li a:hover { color: var(--gsu-accent); }
#main_cont04 .board > div.tel > div p.tel { color: var(--gsu-accent); }

.popup_vedio a { background: var(--gsu-ink); color: var(--gsu-on-accent); border-radius: 8px; }
#start_view .view_in {
	background: var(--gsu-surface);
	border: 1px solid var(--gsu-line);
	border-radius: var(--gsu-radius);
	box-shadow: var(--gsu-shadow);
}


/* ---------------------------------------------------------------------------
 * 6. 옆 단추 · 꼬리말
 * ------------------------------------------------------------------------ */
#quick_menu div {
	border-color: var(--gsu-line);
	border-radius: var(--gsu-radius);
	background: var(--gsu-surface);
	box-shadow: var(--gsu-shadow);
	overflow: hidden;
}
#quick_menu div p { border-color: var(--gsu-line-2); background: var(--gsu-accent); }
#quick_menu div p:first-child { background: var(--gsu-accent-deep); }
#quick_menu div p:first-child a { color: var(--gsu-on-accent); }
#quick_menu div p.btn_top a { background: var(--gsu-ink); color: var(--gsu-on-accent); }

footer { background: var(--gsu-surface); border-top: 1px solid var(--gsu-line); }
footer .footer_wrap address,
footer .footer_wrap span { color: var(--gsu-ink-2); }
footer .footer_wrap span.line { color: var(--gsu-ink-3); }


/* ---------------------------------------------------------------------------
 * 7. 로그인 학생 첫 화면 - 리포트 판
 * ------------------------------------------------------------------------ */
/* 원래 규칙이 #gsu_home_report 처럼 아이디로 시작한다. 클래스만 적으면
 * 무게에서 져서 안 먹는다. 그래서 여기서도 같은 아이디를 앞에 붙인다. */
#gsu_home_report .gsu-report-title,
#gsu_home_solve  .gsu-solve-title {
	background: var(--gsu-accent);
	border-color: var(--gsu-accent);
	color: var(--gsu-on-accent);
}
#gsu_home_report .is-closed .gsu-report-title,
#gsu_home_solve  .is-closed .gsu-solve-title { border-bottom-color: var(--gsu-accent); }

#gsu_home_report .gsu-report-row,
#gsu_home_report .report-result-area,
#gsu_home_solve  .gsu-solve-block {
	background: var(--gsu-surface);
	border-color: var(--gsu-line);
}

/* 이 판은 원래 남색 바탕이라 글자가 전부 흰색·주황·노랑이었다. 바탕을
 * 희게 바꾸면 그 글자들이 흰 종이에 흰 글씨가 된다. 바탕만 갈아엎고 글자를
 * 두고 오면 안 되는 자리다. 아래에서 글자색까지 같이 뒤집는다. */
#gsu_home_report .report-result-area .tit01,
#gsu_home_report .report-result-area .user-info li { color: var(--gsu-ink); }
#gsu_home_report .report-result-area .user-info li strong { color: var(--gsu-accent); }
#gsu_home_report .report-result-area .ranking-info { color: var(--gsu-ink-2); }
#gsu_home_report .report-result-area .ranking-info strong { color: var(--gsu-accent); }
#gsu_home_report .report-result-area .ranking-info strong.type01 { color: var(--gsu-accent-deep); }

/* 진단결과 5단계 색(level_red ... level_blue)은 뜻이 있으므로 손대지 않는다. */

/* 주간 학생순위. 제목과, 아래로 옅어지는 열 줄의 색상 */
#main_cont01 .main_cont01in .main_left #gsu_home_rank .gsu-home-rank-title {
	background: var(--gsu-accent);
	border-color: var(--gsu-accent);
}
#main_cont01 .main_cont01in .main_left #gsu_home_rank .gsu-home-rank-sep {
	background: var(--gsu-line-2);
	border-color: var(--gsu-line);
	color: var(--gsu-ink-2);
}
/* 줄 색은 home_rank.php 가 인라인으로 찍는다. 바깥에서는 못 이기므로 거기서
 * 색상(H)·채도(S)·밝기 보정(L)을 변수로 빼 두었다. 값은 스킨의 팔레트
 * (:root)가 정하고, :root 는 여기까지 그대로 흘러 내려오므로 이 파일에서는
 * 따로 얹을 것이 없다. 위에서 아래로 옅어지는 단계도 그대로 살아 있다. */
#main_cont01 .main_cont01in .main_left #gsu_home_rank .ranking_login_1 dl dt { color: var(--gsu-accent); }
#main_cont01 .main_cont01in .main_left #gsu_home_rank .ranking_login_1 dl dd span { color: var(--gsu-ink-2); }
#main_cont01 .main_cont01in .main_left #gsu_home_rank .ranking_login_1 dl dd span.name { color: var(--gsu-ink); }
/* 1등 줄은 왕관 그림이 깔려 있어 그대로 두고 글자만 맞춘다. */
#main_cont01 .main_cont01in .main_left #gsu_home_rank .ranking_login_1 dl.no_0 dt,
#main_cont01 .main_cont01in .main_left #gsu_home_rank .ranking_login_1 dl.no_0 dd span { color: var(--gsu-accent-deep); }
#main_cont01 .main_cont01in .main_left #gsu_home_rank .ranking_login_1 dl.no_0 dd span.name { color: var(--gsu-ink); }

/* 그림자를 걷고 글씨를 줄인다.
 *
 * main.css:36,38,41,42 가 text-shadow: 2px 1px black 을 건다. 원래는 짙은
 * 빨강 줄에 흰 글씨였으니 검은 그림자가 글자를 띄워 주는 구실을 했는데,
 * 바탕이 밝아진 지금은 글자마다 검은 테두리가 붙어 도드라진 입체 글씨처럼
 * 보인다. 그림자를 지우면 평평하게 읽힌다.
 *
 * 크기도 한 단계씩 낮춘다. 등수 27/29px, 이름·점수 18/21px 는 짙은 바탕에
 * 흰 글씨로 멀리서 읽히라고 잡은 값이다. 밝은 바탕에 어두운 글씨는 같은
 * 크기라도 훨씬 두껍게 보여서, 줄여야 옆의 다른 상자들과 무게가 맞는다. */
#main_cont01 .main_cont01in .main_left #gsu_home_rank .ranking_login_1 dl dt,
#main_cont01 .main_cont01in .main_left #gsu_home_rank .ranking_login_1 dl dd span,
#main_cont01 .main_cont01in .main_left #gsu_home_rank .ranking_login_1 dl dd span.name,
#main_cont01 .main_cont01in .main_left #gsu_home_rank .ranking_login_1 dl.no_0 dt,
#main_cont01 .main_cont01in .main_left #gsu_home_rank .ranking_login_1 dl.no_0 dd span,
#main_cont01 .main_cont01in .main_left #gsu_home_rank .ranking_login_1 dl.no_0 dd span.name {
	text-shadow: none;
}
#main_cont01 .main_cont01in .main_left #gsu_home_rank .ranking_login_1 dl dt { font-size: 22px; }
#main_cont01 .main_cont01in .main_left #gsu_home_rank .ranking_login_1 dl dd span,
#main_cont01 .main_cont01in .main_left #gsu_home_rank .ranking_login_1 dl dd span.name { font-size: 15px; }
#main_cont01 .main_cont01in .main_left #gsu_home_rank .ranking_login_1 dl.no_0 dt { font-size: 23px; }
#main_cont01 .main_cont01in .main_left #gsu_home_rank .ranking_login_1 dl.no_0 dd span,
#main_cont01 .main_cont01in .main_left #gsu_home_rank .ranking_login_1 dl.no_0 dd span.name { font-size: 16px; }

/* 로그아웃 상자 */
#main_cont01 .main_cont01in .main_right #gsu_home_logout a.logout { background: var(--gsu-accent); }
#main_cont01 .main_cont01in .main_right #gsu_home_logout .main-login-box p {
	border-color: var(--gsu-line);
	border-radius: var(--gsu-radius);
}
#main_cont01 .main_cont01in .main_right #gsu_home_logout .main-login-box p a { color: var(--gsu-accent); }
#main_cont01 .main_cont01in .main_right #gsu_home_logout .main-login-box p .result strong { color: var(--gsu-accent-deep); }


/* ---------------------------------------------------------------------------
 * 8. 문제풀이 판(원리·실전 나란히 보기)
 * ------------------------------------------------------------------------ */
#gsu_home_solve .gsu-pair-bar {
	background: var(--gsu-accent-soft);
	border-bottom-color: var(--gsu-accent-line);
}
#gsu_home_solve .gsu-pair-nav {
	background: var(--gsu-accent);
	border-color: var(--gsu-accent);
}
/* 살짝 비쳐 보이게 두되 흰 글씨가 읽힐 만큼만 비친다. .84 는 밝은 바탕
 * 스킨에서 4.4:1 로 모자랐다. */
#gsu_home_solve .gsu-pair-next { background: rgba(var(--gsu-accent-rgb), .92); }
#gsu_home_solve .gsu-pair-frame,
#gsu_home_solve .gsu-pair-stage { border-color: var(--gsu-line); }
/* 안 고른 쪽지 번호. 글씨색은 home_solve.css 가 #445566 으로 못박아 두었다.
 * 바탕을 진한 --gsu-line 으로 두면 그 글씨가 4.3:1 로 모자라므로 옅은
 * 쪽을 쓴다. */
#gsu_home_solve .gsu-pair-dot { background: var(--gsu-line-2); }
#gsu_home_solve .gsu-pair-dot.is-on { background: var(--gsu-accent); }

/* 문제풀이 순서 띠 */
#gsu_home_solve .gsu-order-head { color: var(--gsu-accent); }
#gsu_home_solve .gsu-order-no   { color: var(--gsu-on-accent); }


/* ---------------------------------------------------------------------------
 * 9. 오른쪽 서랍(진도율 등)
 * ------------------------------------------------------------------------ */
#quick_menu .gsu-rail-widgets,
#quick_menu .gsu-rail-btn,
#quick_menu .gsu-drawer {
	background: var(--gsu-surface);
	border-color: var(--gsu-line);
}
#quick_menu .gsu-rail-btn:hover { background: var(--gsu-accent-soft); }
#quick_menu .gsu-rail-head  { color: var(--gsu-ink); }
#quick_menu .gsu-rail-cap   { color: var(--gsu-ink-2); }
#quick_menu .gsu-mini-num   { color: var(--gsu-accent); }

/* 학습 리포트 상자. 원래는 노란 바탕에 남색 단추였다. */
#quick_menu .gsu-rail-reports { background: var(--gsu-accent-soft); }
#quick_menu .gsu-rail-reports .gsu-rail-head { color: var(--gsu-accent-deep); }
#quick_menu .gsu-report-link {
	background: var(--gsu-accent);
	border-color: var(--gsu-accent);
	border-radius: 8px;
}
#quick_menu .gsu-report-link:hover {
	background: var(--gsu-accent-deep);
	border-color: var(--gsu-accent-deep);
}
#quick_menu .gsu-report-link b { color: var(--gsu-on-accent-2); }

#quick_menu .gsu-drawer-head { background: var(--gsu-accent); }
#quick_menu .gsu-card + .gsu-card { border-top-color: var(--gsu-line); }
#quick_menu .gsu-card-title { color: var(--gsu-ink); }
#quick_menu .gsu-card-sub   { color: var(--gsu-ink-2); }
#quick_menu .gsu-card-foot  { color: var(--gsu-ink-3); }
#quick_menu .gsu-card-table th, #quick_menu .gsu-card-table td { border-bottom-color: var(--gsu-line); }

/* 꺾은선 그래프 */
#quick_menu .gsu-series     { stroke: var(--gsu-accent); }
#quick_menu .gsu-dot        { fill: var(--gsu-accent); }
#quick_menu .gsu-dot-empty  { stroke: var(--gsu-accent-line); }
#quick_menu .gsu-balloon-box { stroke: var(--gsu-accent); }
#quick_menu .gsu-grid,
#quick_menu .gsu-spoke      { stroke: var(--gsu-line); }
#quick_menu .gsu-axis-label { fill: var(--gsu-accent); }


/* ---------------------------------------------------------------------------
 * 10. 표
 * ------------------------------------------------------------------------ */
/* 사다리표의 빨강·노랑 칸은 뜻이 있으므로 그대로 둔다. 테두리와 머리글만
 * 정리한다. */
.layer-table th, .layer-table02 th {
	background: var(--gsu-accent-soft);
	color: var(--gsu-accent-deep);
	border-color: var(--gsu-line);
}
.layer-table td, .layer-table02 td { border-color: var(--gsu-line); }

table.gsu-mx th { background: var(--gsu-accent-soft); color: var(--gsu-accent-deep); }


/* ---------------------------------------------------------------------------
 * 11. 문제풀이 사다리판 속(iframe 안)
 * ------------------------------------------------------------------------ */
/* 이 판은 별도 문서(iframe)다. 첫 화면의 원리·실전 슬라이더가 sub02/sub01.php
 * 와 sub03/sub01.php 를 각각 iframe 으로 물고 있고, 그 안에서도 footer.php 가
 * 돌기 때문에 이 파일이 똑같이 깔린다. 다만 그 문서의 규칙은 sub.css 와
 * header_popup.php 의 <style> 에서 오므로, 선택자를 글자 그대로 맞춰 줘야
 * 무게에서 지지 않는다.
 *
 * 칸 색(빨강=푼 것, 노랑=안 푼 것)은 정보라서 손대지 않는다. 바꾸는 것은
 * 머리글과 테두리, 단추뿐이다. */

/* 머리글 띠: 양(量)/질(質)/시간(時間)... */
.layer-table table thead th,
.layer-table02 table thead th,
.layer-table03 table thead th,
.layer-table05 table thead th {
	background: var(--gsu-accent-deep);
	border-color: var(--gsu-accent-deep);
	color: var(--gsu-on-accent);
}

/* 왼쪽 위 "구분" 칸 */
.layer-table table .bg01 { background: var(--gsu-accent-deep); }

/* 아래 단 머리글: 개인/사회/상대/절대... */
.layer-table table .bg02,
.layer-table02 table .bg02 { background: var(--gsu-sage); }

/* 줄 이름표: "가능성(초급)" */
.layer-table table tbody th,
.layer-table02 table tbody th {
	background: var(--gsu-accent);
	border-color: var(--gsu-accent-deep);
	color: var(--gsu-on-accent);
}

/* "푼 문제" 칸.
 *
 * sub.css 는 새빨강 #fa4238 을 쓴다. 원래 초록 칠판 위에서는 그 채도가
 * 필요했지만, 미색 종이 바탕에서는 칸이 스무 개 넘게 붙어 있어 벽처럼
 * 보인다. 뜻(푼 문제)은 그대로 두고 채도만 흙빛으로 내린다. 흰 글씨가
 * 얹히므로 4.9:1 이 나오는 #9A6353 까지만 내렸다.
 *
 * 실전 표는 같은 자리에 노란 칸(안 푼 것)도 있어서 함께 옮긴다. */
.layer-table table .current,
.layer-table02 table .current,
.layer-table table tbody td.current,
.layer-table02 table tbody td.current {
	background: var(--gsu-clay);
	color: var(--gsu-on-accent);
}
.layer-table table .current a,
.layer-table02 table .current a { color: var(--gsu-on-accent); }

/* 회차 줄. 원래는 노란 이름표에 회색 칸이었다. */
.layer-table table .order th {
	background: var(--gsu-accent-soft);
	color: var(--gsu-accent-deep);
}
.layer-table table .order td {
	background: var(--gsu-line);
	color: var(--gsu-ink);
}

/* ---------------------------------------------------------------------------
 * 분야마다 다른 색 (원리)
 * ---------------------------------------------------------------------------
 * 위 규칙들은 다섯 분야 머리띠를 모두 같은 남색으로 칠한다. 그래서 어느
 * 칸이 어느 분야에 딸린 것인지 알려면 세로줄을 눈으로 좇아야 했다. 스무 칸이
 * 붙어 있는 표에서 그것은 꽤 큰 일이다.
 *
 * 분야마다 색을 준다. 머리띠는 진하게, 아래 단 머리글은 옅게, 칸은 더 옅게.
 * 세 단이 같은 색상이라 세로로 한 덩어리로 읽힌다.
 *
 * 원리 표(sub02/sub01_A~E.php)는 손대지 않기로 한 옛 파일이라 칸에 이름표를
 * 달 수 없다. 대신 자리로 가른다. 다행히 이 표는 다섯 파일이 모두 같은 꼴이다.
 *
 *   머리띠      thead 첫 줄, 2~6번째 칸
 *   아래 단     thead 둘째 줄, 1~10번째 칸을 둘씩
 *   본문        tbody 줄머리(th)가 1번이므로 칸은 2~21번, 넷씩
 *   회차 줄     tr.order, colspan 4 짜리라 2~6번
 *
 * 회차 줄을 따로 빼는 것이 중요하다. 그 줄은 칸이 다섯 개뿐이라 본문 줄과
 * 자리 번호가 어긋난다. tr:not(.order) 로 갈라 두지 않으면 3번째 칸이 본문
 * 에서는 양(量), 회차 줄에서는 질(質)이 되어 색이 밀린다.
 *
 * .gsu-mx 를 빼는 것도 같은 이유다. 실전 표도 .layer-table 을 쓰지만 분야당
 * 칸 수가 자료에 따라 달라서 자리로는 가를 수 없다. 그쪽은 만드는 코드를
 * 우리가 쥐고 있으므로 이름표(gsu-g1~5)를 달고, 규칙은 header_popup.php 에 있다.
 *
 * 푼 것/안 푼 것 구별은 그대로 살아 있다. 빨강·노랑 대신 같은 분야 안에서
 * 진한 쪽(current)과 옅은 쪽으로 나눈다. 뜻은 남고 분야도 읽힌다. */

.layer-table:not(.gsu-mx) table thead tr:first-child th:nth-child(2),
.layer-table:not(.gsu-mx) table tbody tr.order td:nth-child(2) {
	background: var(--gsu-f1);
	border-color: var(--gsu-f1);
	color: var(--gsu-on-fill);
}
.layer-table:not(.gsu-mx) table thead tr:first-child th:nth-child(3),
.layer-table:not(.gsu-mx) table tbody tr.order td:nth-child(3) {
	background: var(--gsu-f2);
	border-color: var(--gsu-f2);
	color: var(--gsu-on-fill);
}
.layer-table:not(.gsu-mx) table thead tr:first-child th:nth-child(4),
.layer-table:not(.gsu-mx) table tbody tr.order td:nth-child(4) {
	background: var(--gsu-f3);
	border-color: var(--gsu-f3);
	color: var(--gsu-on-fill);
}
.layer-table:not(.gsu-mx) table thead tr:first-child th:nth-child(5),
.layer-table:not(.gsu-mx) table tbody tr.order td:nth-child(5) {
	background: var(--gsu-f4);
	border-color: var(--gsu-f4);
	color: var(--gsu-on-fill);
}
.layer-table:not(.gsu-mx) table thead tr:first-child th:nth-child(6),
.layer-table:not(.gsu-mx) table tbody tr.order td:nth-child(6) {
	background: var(--gsu-f5);
	border-color: var(--gsu-f5);
	color: var(--gsu-on-fill);
}

.layer-table:not(.gsu-mx) table thead tr:nth-child(2) th:nth-child(1),
.layer-table:not(.gsu-mx) table thead tr:nth-child(2) th:nth-child(2) {
	background: var(--gsu-f1-mid);
	color: var(--gsu-on-fill);
}
.layer-table:not(.gsu-mx) table thead tr:nth-child(2) th:nth-child(3),
.layer-table:not(.gsu-mx) table thead tr:nth-child(2) th:nth-child(4) {
	background: var(--gsu-f2-mid);
	color: var(--gsu-on-fill);
}
.layer-table:not(.gsu-mx) table thead tr:nth-child(2) th:nth-child(5),
.layer-table:not(.gsu-mx) table thead tr:nth-child(2) th:nth-child(6) {
	background: var(--gsu-f3-mid);
	color: var(--gsu-on-fill);
}
.layer-table:not(.gsu-mx) table thead tr:nth-child(2) th:nth-child(7),
.layer-table:not(.gsu-mx) table thead tr:nth-child(2) th:nth-child(8) {
	background: var(--gsu-f4-mid);
	color: var(--gsu-on-fill);
}
.layer-table:not(.gsu-mx) table thead tr:nth-child(2) th:nth-child(9),
.layer-table:not(.gsu-mx) table thead tr:nth-child(2) th:nth-child(10) {
	background: var(--gsu-f5-mid);
	color: var(--gsu-on-fill);
}

.layer-table:not(.gsu-mx) table tbody tr:not(.order) td:nth-child(n+2):nth-child(-n+5) {
	background: var(--gsu-f1-pale);
}
.layer-table:not(.gsu-mx) table tbody tr:not(.order) td:nth-child(n+6):nth-child(-n+9) {
	background: var(--gsu-f2-pale);
}
.layer-table:not(.gsu-mx) table tbody tr:not(.order) td:nth-child(n+10):nth-child(-n+13) {
	background: var(--gsu-f3-pale);
}
.layer-table:not(.gsu-mx) table tbody tr:not(.order) td:nth-child(n+14):nth-child(-n+17) {
	background: var(--gsu-f4-pale);
}
.layer-table:not(.gsu-mx) table tbody tr:not(.order) td:nth-child(n+18):nth-child(-n+21) {
	background: var(--gsu-f5-pale);
}

.layer-table:not(.gsu-mx) table tbody tr:not(.order) td.current:nth-child(n+2):nth-child(-n+5) {
	background: var(--gsu-f1);
	color: var(--gsu-on-fill);
}
.layer-table:not(.gsu-mx) table tbody tr:not(.order) td.current:nth-child(n+6):nth-child(-n+9) {
	background: var(--gsu-f2);
	color: var(--gsu-on-fill);
}
.layer-table:not(.gsu-mx) table tbody tr:not(.order) td.current:nth-child(n+10):nth-child(-n+13) {
	background: var(--gsu-f3);
	color: var(--gsu-on-fill);
}
.layer-table:not(.gsu-mx) table tbody tr:not(.order) td.current:nth-child(n+14):nth-child(-n+17) {
	background: var(--gsu-f4);
	color: var(--gsu-on-fill);
}
.layer-table:not(.gsu-mx) table tbody tr:not(.order) td.current:nth-child(n+18):nth-child(-n+21) {
	background: var(--gsu-f5);
	color: var(--gsu-on-fill);
}

/* 칸 속 글씨. 세 단이 모두 밝아진 뒤로는 푼 것이든 아니든 먹색이다.
 * 진하기 차이는 바탕이 말하므로 글자색까지 뒤집을 까닭이 없다. */
.layer-table:not(.gsu-mx) table tbody tr:not(.order) td a { color: var(--gsu-on-fill); }

/* 이름표 칸: 왼쪽 위 "구분", 줄머리 "가능성(초급)".
 *
 * 이 둘은 분야가 아니라 표의 뼈대다. 예전에는 강조색(짙은 남색)으로 칠해
 * 흰 글씨를 이었는데, 다섯 갈래를 밝은 쪽으로 옮기고 나니 이 두 칸만 혼자
 * 어두워 표에서 튀었다. 시안에서도 이 자리는 중립적인 잿빛이다.
 *
 * 회차 줄은 뺀다. 그 줄의 이름표는 따로 정해 둔 색이 있다.
 *
 * 무게는 위 원문 규칙(.layer-table table .bg01 / tbody th)과 같게 두고
 * 뒤에 놓아 이긴다. .layer-table02 계열은 건드리지 않는다 - 이 판이 아닌
 * 다른 표들이라 여기서 같이 바꿀 일이 아니다. */
.layer-table table .bg01,
.layer-table table tbody tr:not(.order) th {
	background: var(--gsu-f0);
	border-color: var(--gsu-f0);
	color: var(--gsu-on-fill);
}

/* 표 눈금.
 *
 * 원래 눈금은 #09546e 짙은 청록이다. 초록 칠판 위 밝은 칸에는 보이던 색인데,
 * 스킨에서는 칸 색이 달라져 눈금이 배경에 묻힌다. 화면에서 017|018|019 가
 * 한 덩어리로 뭉쳐 보이는 것이 그 탓이다.
 *
 * 값은 스킨이 정한다(--gsu-chalk). 2026-09-07 에 갈래색을 밝은 쪽으로
 * 옮기면서 두 스킨 모두 흰색으로 맞췄다 - 옅은 파스텔 칸 위에서는 흰 줄이
 * 가장 또렷하게 칸을 가른다. 그전에 쓰던 분필색(미색)은 어두운 칠판을
 * 전제한 값이라, 판이 종이빛이 된 지금은 칸과 구별되지 않는다.
 *
 * 무게는 sub.css 원문(.layer-table table thead th 등, 0,3,0)과 똑같이 맞췄고
 * 이 파일이 뒤에 실리므로 이긴다. */
.layer-table table thead th,
.layer-table table tbody th,
.layer-table table tbody td,
.layer-table02 table thead th,
.layer-table02 table tbody th,
.layer-table02 table tbody td {
	border-color: var(--gsu-chalk);
}

/* 회차 줄만 예외. 이 줄은 바탕이 밝아서 분필색이 그대로 사라진다.
 * 사라진다. 같은 계열에서 더 짙은 쪽으로 내린다. */
.layer-table table .order th,
.layer-table table .order td,
.layer-table02 table .order th,
.layer-table02 table .order td {
	border-color: var(--gsu-ink-3);
}

/* 바깥 테두리.
 *
 * 모서리는 각지게 둔다. 판에서 나무틀을 걷어내면서 한동안 판도 표도 귀를
 * 둥글렸는데, 실전 표는 좌우로 미는 상자 안에 들어 있어 둥근 귀가 곧 둥근
 * 오려내기가 된다. 미는 칸이 굽은 자리 밑으로 들어가면서 잘려 나갔다.
 * 한쪽만 각지게 하니 두 판이 따로 놀아, 판까지 모두 각으로 맞췄다. */
.layer-table table,
.layer-table02 table {
	border: 2px solid var(--gsu-board-frame);
	border-radius: 0;
}

.layer-table,
.layer-table02 {
	border-radius: 0;
}

/* 판 위에 바로 얹힌 글씨.
 *
 * sub.css 는 제목을 노랑(#ffdd0b), 본문을 흰색으로 박아 두었다. 판이
 * 어두운 초록이라는 전제가 깔린 값이다. cute-modern 처럼 판이 밝은
 * 스킨에서는 흰 글씨가 그대로 사라진다.
 *
 * 그래서 판 위 글씨를 스킨이 정하도록 이름 두 개로 뺐다. 여기서는 어느
 * 쪽이 밝은지 알 필요가 없다.
 *
 * 무게는 sub.css 원문과 똑같이 맞췄고(제목 0,3,1 / 본문 0,4,2 / 접힌 줄
 * 0,3,1) 이 파일이 뒤에 실리므로 이긴다. */
.solve_wrap div .part_top .type span { color: var(--gsu-board-title); }

.solve_wrap div .part_txt > div.open p.txt { color: var(--gsu-board-ink); }
.solve_wrap div .part_txt > div.close     { color: var(--gsu-board-ink); }

/* 펼치기 / 닫기 단추.
 * sub.css 쪽 선택자가 .solve_wrap div .part_bot .part_btn a (0,4,1) 라서
 * 클래스 이름만으로는 무게가 모자란다. 같은 선택자를 그대로 쓴다. */
.solve_wrap div .part_bot .part_btn a {
	background: var(--gsu-accent-deep);
	color: var(--gsu-on-accent);
	border-radius: 6px;
}

/* 퍼즐보기.
 *
 * 이 링크는 사다리 원본(cham/sub02/sub01_*.php)이 style="color:#FFE400" 를
 * 태그에 직접 박아 내보낸다. 인라인은 어떤 선택자보다 무거워서 !important
 * 말고는 이길 방법이 없다. 원본 파일은 손대지 않기로 한 것이라 여기서 받는다.
 *
 * 노랑은 어두운 판 위에서만 성립하는 색이다. cute 처럼 판이 밝은 스킨에서는
 * 1:1 로 사라진다. 그래서 스킨이 정하게 뺐다. */
.solve_wrap div .part_txt .txt a,
.solve_wrap .part_txt .txt a { color: var(--gsu-board-link) !important; }

/* 판 위에서 색을 못 바꾸는 그림 두 가지 - "01 가능성" 오각형과
 * 초급/중급/고급 단추 - 는 스킨마다 경로가 다르다. url() 은 변수로
 * 조립할 수 없으므로 그 두 줄만 팔레트 쪽(theme-<이름>.css)에 둔다.
 * 이 파일에 그림 경로는 없다. */