@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); }

/* 항목 사이 간격을 고르게 한다 (CL-0131).
 *
 * common.css:320-328 은 칸마다 폭을 박아 두었다 - 보통 70px, .rong1 80px,
 * .rong2 105px, 그리고 마지막 칸만 폭이 없어 글자 길이를 따라간다. 글자는
 * 그 안에서 가운데 맞춤이라, 글자 수가 다르면 남는 자리가 달라지고 그것이
 * 그대로 간격 차이로 보인다 - '개인정보수정'(6자)은 80px 을 거의 채워 양옆이
 * 좁고, '로그아웃'(4자)은 70px 안에서 헐거워진다.
 *
 * 폭을 없애고 좌우 안여백만 같게 준다. 그러면 이웃한 두 칸 사이는 언제나
 * 안여백 두 몫(12+12=24px)이라 글자 수와 상관없이 일정하다. */
header .top_menu li a {
	color: var(--gsu-ink-2);
	background-color: transparent;
	width: auto;
	padding: 0 12px;
}
header .top_menu li a.rong1 { width: auto; }
header .top_menu li a:hover { color: var(--gsu-accent); }
header .top_menu li:last-child a { color: var(--gsu-ink-2); }

/* 양 끝은 안여백을 지워 차림표가 로고·화면 가장자리와 나란히 선다. */
header .top_menu li:first-child a { padding-left: 0; }
header .top_menu li:last-child a  { padding-right: 0; }

/* 잠시 닫아 둔 차림표 항목 (CL-0135).
 *
 * 수강신청을 당분간 받지 않는다. 페이지(cham/sub05/sub01.php)는 그대로 두고
 * 차림표에서만 흐리게, 누를 수 없게 한다 - 항목을 지우면 자리가 밀려 이웃
 * 칸들이 움직이고, 다시 열 때 되돌릴 것이 많아진다.
 *
 * 마크업에서는 <a> 의 href 를 뺐다. href 없는 <a> 는 눌리지도, 탭으로 옮겨
 * 가지도 않는다. pointer-events 는 그 위에 한 겹 더 두는 빗장이다. */
header .top_menu li a.gsu-menu-off {
	color: var(--gsu-ink-3) !important;
	text-shadow: none;
	cursor: default;
	pointer-events: none;
}

/* 펼쳐지는 칸은 검정 판이라 흐린 색이 다르다. 그쪽 글자가 #999 이므로
 * 한 단계 더 어두운 #666 을 쓴다 - 안 그러면 잠긴 것이 안 보인다. */
#dropdown_menu ul a.gsu-menu-off {
	color: #666 !important;
	cursor: default;
	pointer-events: none;
}

/* 레일 타일도 같은 뜻으로 흐려 둔다 (panes/quicklinks.php). */
#quick_menu div p.gsu-tile-off { opacity: .45; }
#quick_menu div p.gsu-tile-off a { cursor: default; pointer-events: none; }

/* 학습DNA진단평가 하나만 알약 모양으로 띄워 눈에 걸리게 한다. */
header .top_menu li a.rong2 {
	background: var(--gsu-accent);
	color: var(--gsu-on-accent);
	border-radius: 999px;
	/* 알약이라 좌우 안여백이 글자를 감싸는 자리이기도 하다. 위 규칙과 같은
	 * 12px 을 쓰므로 이웃과의 간격은 다른 칸과 같다. */
	width: auto;
	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); }


/* 큰 메뉴는 2018년 그대로 둔다 - 검정 알약(#444→#111 그러데이션, 모서리
 * 50px)에 회색 글자다 (CL-0138).
 *
 * 한동안 이 자리를 밝은 바탕에 먹색 글자로 바꿔 두었고, 2026-09-20 에는
 * 테두리만 두른 알약으로도 만들어 봤다. 둘 다 물렸다 - 원래 모양으로
 * 돌아간다. 그래서 여기에는 dropdown.css 를 덮는 규칙이 없다 - 칸 수도
 * 손님·회원 구별 없이 여섯 개 그대로다.
 *
 * 펼쳐지는 칸도 함께 되돌렸다(아래). */
#dropdown_menu > li > a.selected { color: #fafafa; }
header .top_menu li a { font-size: 13px; }
header nav > ul > li > a.selected { color: var(--gsu-accent); }

/* 큰 차림표에서 펼쳐지는 칸도 2018년 그대로 둔다 - 검정 판(#444->#111)에
 * 회색 글자다 (CL-0139). 한동안 흰 카드로 바꿔 두었는데 알약과 따로 놀아서
 * 물렸다. 그래서 #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);
}
header .dropdown-content a:hover {
	background: var(--gsu-accent-soft);
	background-image: none;
	color: var(--gsu-accent);
}

/* 흐르는 공지 띠 */
#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.css 는 세 칸을 모두 float:left 로 흘리고, 단추에 margin-top:-52px 를
 * 주어 두 줄을 가로지르는 모양을 낸다. 그러려면 둘째 줄에 비밀번호 칸과
 * 단추가 함께 들어가야 한다.
 *
 *     비밀번호  180 + 안여백 20 + 테두리 2 = 202px   (글상자는 content-box)
 *     단추                             115px        (누름단추는 border-box)
 *     ---------------------------------------------
 *                                      317px  =  칸 너비 317px
 *
 * 남는 자리가 0px 이다. 글상자와 누름단추의 box-sizing 이 브라우저 기본
 * 스타일시트에서 서로 다르다는 점까지 계산에 넣어야 딱 맞는 수라서, 원래
 * 화면에서는 제대로 나온다. 다만 1px 이라도 어긋나면 - 브라우저 확대,
 * 윈도우 배율(125%, 150%), 소수점 반올림 - 단추가 셋째 줄로 밀려나고
 * -52px 이 그것을 비밀번호 칸 위로 끌어올린다. "해상도에 따라 단추가
 * 어긋난다"는 말이 정확히 이것이다.
 *
 * ── 어떻게 고쳤나 ─────────────────────────────────────────────────────
 *
 * 수를 다시 맞추는 대신 격자로 바꿔 -52px 과 float 를 아예 없앴다. 칸 나눔은
 * 원래와 같은 202 + 115 이므로 보이는 크기는 그대로고, 반올림으로 줄이
 * 바뀌는 일이 없다. main.css 는 2024 운영 스냅숏이라 건드리지 않는다
 * (CHANGELOG 집안 규칙 3). */
/* 크기는 원래 화면 그대로다 - 글상자 202x52.5 두 줄, 단추 115x105. */
#main_cont01 .main_cont01in .main_left .login .main-login-box {
	display: grid;
	grid-template-columns: 1fr 115px;
	grid-template-rows: 52.5px 52.5px;
}
#main_cont01 .main_cont01in .main_left .login .main-login-box input {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	float: none;
}
#main_cont01 .main_cont01in .main_left .login .main-login-box input.btn {
	grid-column: 2;
	grid-row: 1 / 3;
	margin-top: 0;
}
#main_cont01 .main_cont01in .main_left .login .main-login-box .id_save {
	grid-column: 1 / 3;
	grid-row: 3;
	float: none;
}
/* 로그인 상자는 각진 모양 그대로 두되, 파랑은 스킨 강조색을 쓴다.
 *
 * 이 상자는 비회원에게만 나온다(cham/main/index.php 의 !$is_member).
 * 한동안 상자 전체를 2018년 남색(#2662a8)으로 두었는데, 바로 아래 학교
 * 순위 판이 스킨 강조색(#345B84)이라 같은 화면에 파랑이 둘이었다
 * (CL-0140). 파랑만 맞추고 둥근 모서리는 여전히 되돌린다 - 위쪽
 * 191~203 줄이 입히던 값이다. */
#main_cont01 .main_cont01in .main_left .login .main-login-box input {
	border: 1px solid #cdcdcd;
	border-radius: 0;
}
#main_cont01 .main_cont01in .main_left .login .main-login-box input:first-child {
	border-bottom: 0;
}
#main_cont01 .main_cont01in .main_left .login .main-login-box input.btn {
	background: var(--gsu-accent);
	border: 1px solid var(--gsu-accent);
	border-radius: 0;
	color: #fff;
}
#main_cont01 .main_cont01in .main_left .login .main-login-box input:focus {
	border-color: var(--gsu-accent);
	box-shadow: 0 0 0 3px rgba(52, 91, 132, .18);
}
/* 상자 아래 작은 링크도 같은 파랑으로 - main.css:15 가 2018년 남색을 준다. */
#main_cont01 .main_cont01in .main_left .login .main-login-box p a { color: var(--gsu-accent); }

/* 저장 칸의 네모는 격자 칸을 채우면 안 된다. */
#main_cont01 .main_cont01in .main_left .login .main-login-box .id_save input {
	width: 15px;
	height: 15px;
	border: 0;
}

/* 학교 순위 */
#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); }

/* 아직 열리지 않은 칸(cham/include/solve_gate.php).
 *
 * 잠긴 번호는 바탕을 비워 둔다 - 열린 번호는 --gsu-line-2 로 채워져 있으므로
 * "채워진 것 / 빈 것" 으로 갈린다. 글씨는 --gsu-ink-3 을 쓴다. 옅은 글씨용
 * 먹색이라 이 자리에서 딱 맞고, 스킨을 바꿔도 따라온다. */
#gsu_home_solve .gsu-pair-dot.is-locked {
	background: transparent;
	border-color: var(--gsu-line);
	color: var(--gsu-ink-3);
}

/* 잠긴 까닭을 적는 줄. 조작 줄과 같은 계열로 두어 경고가 아니라 안내로
 * 읽히게 한다. 왼쪽 굵은 선만 강조색이다. */
#gsu_home_solve .gsu-pair-lock {
	background: var(--gsu-accent-soft);
	border-bottom-color: var(--gsu-accent-line);
	border-left-color: var(--gsu-accent);
	color: var(--gsu-ink);
}
#gsu_home_solve .gsu-pair-lock b { color: var(--gsu-accent); }
#gsu_home_solve .gsu-pair-lock.is-hit {
	background: rgba(var(--gsu-accent-rgb), .16);
}

/* 문제풀이 순서 띠 */
#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-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); }

/* 문제풀이 리포트 단추. 원래는 파란 단추였고, 감싸던 액자 두 겹은
 * sidepane.css 에서 걷어냈다. 여기서 칠할 것은 단추 하나뿐이다.
 *
 * 색은 강조색(남색)이 아니라 급수 딱지의 자주색(--gsu-rail-report)이다.
 * 레일에서 이 단추만 첫 화면 본문과 다른 곳으로 데려가는 문이라, 본문 판
 * 제목들과 같은 남색이면 그 판들의 일부처럼 보였다. 화면에 이미 있는 색
 * 중에서 고른 것이라 겉돌지도 않는다.
 *
 * 눌렀을 때 색은 팔레트에 짝이 없으므로 여기서 어둡게 섞는다.
 *
 * 흰 글씨 대비는 3.5:1 로, 남색(7.1:1)보다 낮고 AA 기준(4.5:1)에 못 미친다.
 * 급수 딱지가 이미 같은 바탕에 흰 글씨를 얹고 있어 화면 안에서 어긋나 보이지
 * 는 않는다. 대비를 올릴 일이 생기면 딱지 그림부터 손봐야 한다. */
#quick_menu .gsu-report-link {
	background: var(--gsu-rail-report);
	border-color: var(--gsu-rail-report);
	border-radius: 8px;
}
#quick_menu .gsu-report-link:hover {
	background: color-mix(in srgb, var(--gsu-rail-report) 82%, #000);
	border-color: color-mix(in srgb, var(--gsu-rail-report) 82%, #000);
}
/* 두 줄 다 흰색이다. 남색 단추였을 때는 첫 줄만 크림색으로 띄워 두었는데,
 * 자주색 위에서는 그 크림색이 바탕과 명도가 가까워 첫 줄이 오히려 흐려졌다. */
#quick_menu .gsu-report-link b { color: var(--gsu-on-accent); }

#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)에 둔다.
 * 이 파일에 그림 경로는 없다. */
/* ---------------------------------------------------------------------------
 * 8. 문제풀이 리포트 (cham/report/total.php)
 * ------------------------------------------------------------------------
 * 팝업으로 뜨는 통합 리포트다. 첫 화면의 리포트 판(위 7번)과 같은 자료를
 * 같은 클래스로 그리는데, 거기에는 #gsu_home_report 라는 아이디가 붙어
 * 있어서 7번 규칙이 여기까지 닿지 않는다.
 *
 * 그래서 이 쪽에도 표를 하나 준다. total.php 의 <body class="gsu-report-total">
 * 다. 마이페이지의 원리·실전 리포트(cham/mypage/sub02.php, sub03.php)가
 * 같은 클래스를 그대로 쓰므로, 표 없이 클래스만 적으면 그 두 장까지 같이
 * 물든다. 마이페이지는 건드리지 않기로 한 자리라 표로 울타리를 친다.
 *
 * 무게는 sub.css 원문보다 클래스 하나만큼 무겁다(예: 0,2,0 -> 0,3,0).
 * ------------------------------------------------------------------------ */

/* 페이지 제목과 그 아래 밑줄 */
.gsu-report-total .title-contents {
	color: var(--gsu-ink);
	border-bottom-color: var(--gsu-line);
}

/* 기간 고르는 줄. 마이페이지의 달력 두 개를 대신하는 자리다. */
.gsu-report-total .search-calendar-area .btn-search01 {
	background: var(--gsu-accent);
	color: var(--gsu-on-accent);
	border-radius: 4px;
}
.gsu-report-total .search-calendar-area .btn-search01:hover {
	background: var(--gsu-accent-deep);
}

/* 전국 내 순위표.
 *
 * 원래는 짙은 남색(#001d53) 바탕에 흰 글씨·노란 숫자였다. 첫 화면의 같은
 * 판을 이미 종이빛으로 뒤집어 두었으므로(7번) 여기서도 같게 맞춘다. 바탕만
 * 갈아엎으면 흰 종이에 흰 글씨가 되니 글자색까지 함께 뒤집는다.
 *
 * 아래 그래프 칸과 하나의 카드로 이어 붙인다 - 둘 다 종이색이 되고 나면
 * 사이에 선을 두 겹 그을 까닭이 없다. */
.gsu-report-total .report-result-wrapper .report-result-area {
	background: var(--gsu-surface);
	border: 1px solid var(--gsu-line);
	border-bottom: 0;
}
.gsu-report-total .report-result-wrapper .report-result-area .tit01,
.gsu-report-total .report-result-wrapper .report-result-area .user-info li {
	color: var(--gsu-ink);
}
.gsu-report-total .report-result-wrapper .report-result-area .user-info li strong {
	color: var(--gsu-accent);
}
.gsu-report-total .report-result-wrapper .report-result-area .ranking-info {
	color: var(--gsu-ink-2);
}
.gsu-report-total .report-result-wrapper .report-result-area .ranking-info strong {
	color: var(--gsu-accent);
}
.gsu-report-total .report-result-wrapper .report-result-area .ranking-info strong.type01 {
	color: var(--gsu-accent-deep);
}
/* 계급 딱지(성운 ... 북극성)는 뜻이 있는 색이라 첫 화면과 마찬가지로
 * 손대지 않는다. */

.gsu-report-total .report-result-wrapper .report-graph-result-area {
	background: var(--gsu-surface);
	border-color: var(--gsu-line);
}

/* 진단표 다섯 개의 제목 띠 */
.gsu-report-total .result-title {
	background-color: var(--gsu-accent);
	border-color: var(--gsu-accent);
	color: var(--gsu-on-accent);
}
.gsu-report-total .result-title02 {
	color: var(--gsu-on-accent-2);
}

/* 진단표 본문 */
.gsu-report-total .result-information-area01,
.gsu-report-total .result-information-area01b {
	border-color: var(--gsu-line);
	background: var(--gsu-surface);
}
.gsu-report-total .result-information-area01a {
	border-color: var(--gsu-line);
	background-color: var(--gsu-canvas);
}

/* table.area01a 는 자료를 담은 표가 아니라 "더보기" 단추 하나만 들어 있는
 * 껍데기다(이 화면에 다섯 군데). 그런데 그 단추가 <table> 바로 밑의
 * <center> 안에 있다 - <center> 는 표 안에 놓일 수 없는 요소라 브라우저가
 * 표 밖으로 끌어내 앞에 놓는다(foster parenting). 그래서 화면에는 단추가
 * 표 위에 찍히고 표는 정말로 빈 채로 남는다.
 *
 * 비어 있어도 report_total.css:11 이 바탕(#f9f9f9)과 위아래 37px 패딩을
 * 주고 있어서, 여기에 카드 차림(바탕·테두리·둥근 귀)까지 얹으면 진단표
 * 마다 빈 상자가 하나씩 생긴다 - 화면에서 본 그 빈 칸들이다.
 *
 * 그래서 이 표에는 아무 차림도 입히지 않고, report_total.css 의 패딩과
 * 바탕도 여기서 걷어낸다. 높이가 0 으로 접히면서 아래쪽 여백
 * (margin-bottom:40px)만 남아 진단표 사이 간격은 그대로다.
 *
 * 마이페이지 쪽 같은 표는 mypage-modern.css:323-343 이 같은 까닭으로 카드
 * 규칙에서 빼 두었다. 그쪽은 report_total.css 를 안 실어서 바탕·패딩이
 * 애초에 없었고, 이 화면은 그것을 싣기 때문에 지워 주는 일이 더 필요하다. */
.gsu-report-total table.area01a {
	background: none;
	border: 0;
	padding: 0;
}
.gsu-report-total .title0202 { color: var(--gsu-ink); }
.gsu-report-total .result-information-area01 .word-type01 { color: var(--gsu-ink-2); }
/* 문장 속에서 도드라뜨리는 낱말. 원래 새빨강(#ff3333)이라 미색 바탕에서
 * 혼자 튀었다. 강조색 계열로 옮기되 본문보다는 진하게 둔다. */
.gsu-report-total .result-information-area01 .word-type01 strong { color: var(--gsu-accent-deep); }

/* 계급표 말풍선. report_total.css 가 sub03.php 원문 그대로 주황·빨강을
 * 쓴다. 흰 판 위에 뜨는 작은 표라 강조색 한 줄기로 충분하다. */
.gsu-report-total .sp_bu_th {
	border-color: var(--gsu-accent);
	background-color: var(--gsu-accent);
	color: var(--gsu-on-accent);
}
.gsu-report-total .sp_bu_td {
	border-color: var(--gsu-accent-line);
	color: var(--gsu-accent-deep);
}
.gsu-report-total .speech_bubble1 { border-bottom-color: var(--gsu-line); }
.gsu-report-total .speech_bubble1 .speech_bubble1_text {
	background-color: var(--gsu-surface);
	color: var(--gsu-accent-deep);
	border: 1px solid var(--gsu-line);
	box-shadow: var(--gsu-shadow);
}


/* ---------------------------------------------------------------------------
 * 12. 판 모서리
 * ------------------------------------------------------------------------
 * 첫 화면 오른쪽의 진도율 판(.main_banner03)과 학교 순위 판, 후기 카드는
 * 진작부터 --gsu-radius 로 귀가 둥글다. 그런데 로그인한 학생이 실제로 오래
 * 보는 판 - 리포트 판, 문제풀이 판, 그 안의 원리·실전 카드 - 은 각진 채로
 * 남아 있었다. 한 화면에 둥근 판과 각진 판이 섞여 있으면 각진 쪽이 덜
 * 만들어진 것처럼 보인다.
 *
 * 그래서 바깥 판은 모두 같은 --gsu-radius 를 쓴다. 값을 여기 적지 않고
 * 이름만 쓰는 까닭은, 스킨마다 둥근 정도를 달리 가져갈 수 있어서다.
 * original 스킨은 이 변수 자체가 없으므로 아래 규칙이 전부 무효가 되어
 * 예전 그대로 각지게 남는다. 그래서 따로 빼 둘 것이 없다.
 *
 * 판이 머리줄과 몸통 두 조각으로 나뉘어 있는 곳이 많다. 그럴 때는 조각마다
 * 바깥으로 향한 귀만 둥글린다. 머리줄은 위 두 귀, 몸통은 아래 두 귀다.
 * 두 조각 모두에 네 귀를 주면 맞닿는 자리가 잘록해진다.
 *
 * 표는 각진 채로 둔다. 위 "바깥 테두리" 주석에 적어 둔 그대로, 실전 표는
 * 좌우로 미는 상자 안에 있어서 둥근 귀가 곧 둥근 오려내기가 된다. */

/* 리포트 판. 접혀 있을 때는 머리줄 하나만 남으므로 네 귀를 다 둥글린다. */
#gsu_home_report .gsu-report-title {
	border-radius: var(--gsu-radius) var(--gsu-radius) 0 0;
}
#gsu_home_report .is-closed .gsu-report-title {
	border-radius: var(--gsu-radius);
}
#gsu_home_report .report-result-area {
	border-radius: 0 0 var(--gsu-radius) var(--gsu-radius);
}

/* 리포트 팝업(cham/report/total.php)의 판들.
 *
 * 첫 화면과 같은 손님이 같은 흐름에서 여는 창이라 모서리도 같이 간다.
 *
 * 가운데 큰 카드는 세 조각이 위아래로 맞붙어 하나로 보인다 - 회원정보,
 * 그래프, 진단결과 순이다. 실제로도 가운데 두 조각은 아래 선을 비워 두고
 * 이어 붙인 것이다. 그러니 맨 위 조각의 위 두 귀와 맨 아래 조각의 아래 두
 * 귀만 둥글린다.
 *
 * 다섯 개의 진단표는 다르다. 제목 띠와 몸통 사이에 "더보기" 단추가 흰 바탕
 * 위로 끼어 있어서 둘이 떨어져 있다. 맞붙지 않았으니 각자 네 귀를 다 가진다.
 * 마주 보는 쪽만 둥글리면 흰 틈을 사이에 두고 각진 변이 서로를 보게 된다. */
.gsu-report-total .contents-area fieldset {
	border-radius: var(--gsu-radius);
}
.gsu-report-total .report-result-wrapper .report-result-area {
	border-radius: var(--gsu-radius) var(--gsu-radius) 0 0;
}
.gsu-report-total .result-information-area01 {
	border-radius: 0 0 var(--gsu-radius) var(--gsu-radius);
}
/* 진단표 제목 띠는 td 다. 감싸는 표가 border-collapse:separate 라 칸에도
 * 둥근 귀가 먹는다. collapse 였다면 무시됐을 것이다.
 *
 * table.area01a 는 여기서 뺐다 - 위에 적은 대로 늘 비어 있는 껍데기라,
 * 둥근 귀를 주면 빈 상자만 더 또렷해진다. */
.gsu-report-total td.result-title {
	border-radius: var(--gsu-radius);
}
/* "더보기" 단추는 진단표 제목 띠 바로 밑에 매달려 있다(접혀 있을 때는
 * 속살이 없으므로 띠와 맞닿는다). 띠와 닿는 윗변은 각지게 두고 아래 두
 * 귀퉁이만 둥글린다 - 네 귀를 다 둥글리면 띠에서 떨어져 나온 별개의
 * 단추처럼 보인다. theme-base.css:165 의 기본값(8px)을 덮는다.
 *
 * 마이페이지 쪽 같은 단추도 같은 값이다(mypage-modern.css:289). */
.gsu-report-total .btn_new02 {
	border-radius: 0 0 6px 6px;
}

/* 띠와 단추 사이의 틈 없애기.
 *
 * 각지게 맞물리라고 해 놓고도 둘 사이에 몇 픽셀이 떠 있었다. 두 군데에서
 * 왔다. 둘 다 눈에 안 보이는 기본값이라 마크업만 봐서는 안 보인다.
 *
 *   1) 제목 띠를 담은 표. 띠는 <td> 이고 그 표는 border-collapse 가
 *      separate(기본값)이다. separate 인 표는 칸 둘레에 border-spacing
 *      만큼 여백을 두는데, 이 값의 기본이 2px 이다. 그래서 띠 아래로
 *      표 바탕(투명)이 2px 깔린다. 이 페이지의 어느 스타일시트도 그
 *      값을 되돌리지 않고 있었다.
 *   2) 껍데기 표에서 끌려 나온 <center>. 이것은 블록이라 줄상자를 하나
 *      만들고, 그 줄상자에는 글자가 없어도 부모의 글꼴·줄높이로 잰
 *      보이지 않는 기둥(strut)이 선다. 단추는 display:inline-block +
 *      vertical-align:middle (common.css:445-446) 이라 그 기둥을 기준으로
 *      가운데 맞춤이 되고, 기둥이 단추보다 높으면 위아래로 빈 자리가
 *      남는다.
 *
 * 1) 은 표에서 border-spacing 을 걷어 없앤다. 2) 는 <center> 의 글꼴
 * 크기와 줄높이를 0 으로 만들어 기둥 자체를 지운다 - 단추는 제 font-size
 * (12px)와 line-height 를 따로 가지고 있어(common.css:440,447) 영향을
 * 받지 않는다.
 *
 * 두 규칙 모두 total.php 에 새로 붙인 이름으로만 걸린다. <center> 를
 * 통째로 잡으면 안 된다 - 이 화면에는 그래프 설명에 쓰인 <center> 가 네
 * 개 더 있고(total.php:590,704,764,765), 거기에 font-size:0 이 닿으면
 * 설명 글이 통째로 사라진다. */
.gsu-report-total table.gsu-title-band {
	border-spacing: 0;
}

.gsu-report-total center.gsu-more-slot {
	font-size: 0;
	line-height: 0;
}

/* "더보기" 로 펼쳐지는 속살. 접혀 있을 때는 없는 셈이고, 펼치면 제목 띠
 * 바로 아래에 틈 없이 붙는다. 그래도 네 귀를 다 준다 - 제목은 남색,
 * 속살은 미색이라 색이 확연히 달라서, 둥근 두 판이 맞닿아 있는 것으로
 * 읽힌다. 같은 색 두 조각을 이어 붙일 때처럼 잘록해 보이지 않는다. */
.gsu-report-total table.result-information-area01a,
.gsu-report-total .result-information-area01b {
	border-radius: var(--gsu-radius);
}

/* 주간 학생순위 판. 남색 제목줄 + 아래 열 줄.
 *
 * 몸통(.ranking_login_1)은 위 "학교 순위" 규칙에서 이미 네 귀가 둥글다.
 * 그 규칙은 로그아웃 화면의 .ranking 과 함께 쓰는데, 그쪽은 제목줄 없이
 * 홀로 서는 판이라 네 귀가 맞다. 여기 로그인 판만 위에 제목줄이 얹혀서,
 * 몸통의 위 두 귀가 제목줄 밑에서 반달로 파여 보였다.
 *
 * 그래서 공용 규칙은 두고 #gsu_home_rank 안에서만 뒤집는다. 제목줄이
 * 위 두 귀를, 몸통이 아래 두 귀를 맡는다. */
#main_cont01 .main_cont01in .main_left #gsu_home_rank .gsu-home-rank-title {
	border-radius: var(--gsu-radius) var(--gsu-radius) 0 0;
}
#main_cont01 .main_cont01in .main_left #gsu_home_rank .ranking_login_1 {
	border-radius: 0 0 var(--gsu-radius) var(--gsu-radius);
}

/* 문제풀이 순서 띠. 홀로 서는 판이라 네 귀 모두. */
#gsu_home_solve .gsu-order {
	border-radius: var(--gsu-radius);
}

/* 문제풀이 판. 남색 제목줄 + 아래 무대.
 *
 * 이 둘을 감싸는 .gsu-solve-block 도 함께 둥글린다. 제 바탕색(#FCFAF2)이
 * 있어서, 안쪽만 둥글리면 그 색이 각진 채로 둥근 귀 바깥에 반달처럼 남는다.
 * 종이색과 반 톤 차이라 눈에 잘 안 띄지만 귀마다 네 번 남는다. */
#gsu_home_solve .gsu-solve-block {
	border-radius: var(--gsu-radius);
}
#gsu_home_solve .gsu-solve-title {
	border-radius: var(--gsu-radius) var(--gsu-radius) 0 0;
}
#gsu_home_solve .is-closed .gsu-solve-title {
	border-radius: var(--gsu-radius);
}
#gsu_home_solve .gsu-pair-stage {
	border-radius: 0 0 var(--gsu-radius) var(--gsu-radius);
}
/* 무대 맨 아래 쪽지 번호 줄은 제 바탕색(#eef2f8)이 있어서, 무대만 둥글리면
 * 그 색이 각진 채로 귀 밖에 남는다. 같이 둥글린다. overflow:hidden 으로
 * 잘라내지 않는 까닭은 좌우 이전·다음 단추가 무대 가장자리에 걸쳐 있어
 * 함께 잘려 나가기 때문이다. */
#gsu_home_solve .gsu-pair-stage > .gsu-pair-dots:last-child {
	border-radius: 0 0 var(--gsu-radius) var(--gsu-radius);
}

/* 원리·실전 카드(iframe 안)는 여기서 손대지 않는다.
 *
 * 그 카드는 규칙 하나로 그려지는 판이 아니라 세 조각(.type + .part_txt > div
 * + .bot_txt)을 이어 붙여 만든 것이고, 그 조립은 cham/include/header_popup.php
 * 가 <style> 로 직접 짠다. 조각마다 어느 변에 선을 두는지, 아랫조각이 얼마나
 * 눌려 있는지를 아는 것은 그 파일뿐이라 귀도 거기서 함께 둥글린다.
 *
 * 여기에 같은 규칙을 한 벌 더 두었다가 걷어냈다. header_popup.php 쪽이
 * (0,4,1) 이라 이 파일의 (0,3,1) 은 어차피 지고, 남겨 두면 왜 안 먹는지
 * 찾느라 시간만 버린다. */
/* ---------------------------------------------------------------------------
 * 13. 사다리판 글씨 크기
 * ---------------------------------------------------------------------------
 * 색 대비는 문제가 아니었다. 화면에서 실제 화소를 재어 보니 칸 글씨 10.2:1,
 * 아래 설명 8.1:1, 제목 7.0:1 로 모두 WCAG AAA(7:1)를 넘는다. 읽기 힘든
 * 까닭은 크기다 - 표 안이 13px, 설명이 15px 인데 제목만 24px 이라 제목만
 * 또렷하게 읽혔다.
 *
 * 그래서 색은 그대로 두고 크기와 굵기만 올린다. 칸 너비가 4% 로 박혀 있는
 * 표라 마음대로 키울 수 없어서, 자리에 여유가 있는 원리 표(세 자리 번호가
 * 32px 칸에 들어간다)와 설명 글만 키우고, 네 자리 번호에 분야 이름까지
 * 두 줄로 들어가는 실전 표(.gsu-mx, 한 칸 36px)는 굵기만 올린다.
 *
 * sub.css 보다 뒤에 오므로 같은 무게로 적어도 이긴다. */

/* 머리글 두 줄: 양(量)/질(質)... 과 개인/사회/상대/절대... */
.layer-table table thead th { font-size: 14px; }

/* 줄 이름표: 가능성(초급), 회차 */
.layer-table table tbody th { font-size: 14px; }

/* 원리 표 칸. 번호가 곧 누를 곳이라 굵게 둔다. */
.layer-table:not(.gsu-mx) table tbody td { font-size: 15px; }
.layer-table:not(.gsu-mx) table tbody td a { font-weight: 700; }

/* 실전 표는 칸이 좁다(36px). 크기 대신 굵기로 또렷하게 한다. */
.solve_wrap .gsu-mx table tbody td { font-size: 13px; }
.solve_wrap .gsu-mx .gsu-mx-chip b { font-weight: 700; }

/* 판 아래 설명 글.
 *
 * 글자 크기는 15px 그대로 두고 줄 간격만 넓힌다. 이 글 끝에는 "퍼즐보기"
 * 링크가 그냥 인라인으로 붙어 있어서(sub02/sub01_A.php, &nbsp; 일곱 개 뒤에
 * <a>), 글자를 1px 만 키워도 마지막 줄에 자리가 모자라 링크가 다음 줄로
 * 떨어진다. 오른쪽에 붙어 있던 것이 왼쪽으로 내려가 보이는 것이 그것이다.
 * 줄 간격은 줄바꿈에 영향을 주지 않으므로 이쪽만 손본다. */
.solve_wrap div .part_txt > div.open p.txt {
	line-height: 1.7;
}

/* 실전 시급 칸의 회 번호 (CL-0148). 한 자리 = 원리 입문 단원 하나, 1~4회 =
 * 그 단원의 네 단계(지문 이해 1 · 2, 문법, 어휘). cham/include/solve_matrix.php */
.gsu-mx-multi .gsu-mx-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 48px; margin: 2px auto 0; } /* 좁은 칸(36px~)에 넷이 한 줄로 안 들어가 옆 칸을 덮었다 - 2x2 */
.gsu-mx-multi .gsu-mx-step {
	display: inline-block;
	min-width: 16px;
	padding: 0 2px;
	border: 1px solid rgba(0, 0, 0, .35);
	border-radius: 3px;
	background: rgba(255, 255, 255, .7);
	color: #111;
	font-size: 11px;
	font-weight: bold;
	line-height: 15px;
	text-decoration: none;
}
.gsu-mx-multi .gsu-mx-step:hover { background: #fff; border-color: #111; }


/* ---------------------------------------------------------------------------
 * 20. 화면 전체 다듬기 (CL-0163)
 *
 * 메뉴의 모든 화면을 찍어 보고(학생·관리자·손님) 테마와 어긋난 곳을 한데
 * 모아 고친다. 색은 팔레트 변수만 쓴다 - 스킨을 바꾸면 같이 바뀐다.
 *   - 본문 흰 판: 네모 → 둥근 판(--gsu-radius) + 옅은 그림자
 *   - 게시판 목록 머리줄: 원래의 밝은 파랑(#2287d0) → 강조색, 위 모서리 둥글게
 *   - 검색 칸·검색 단추(분홍 #ff3061)·글쓰기·쪽 번호: 둥근 단추, 강조색
 *   - 오늘의 학습미션 갈피(밝은 파랑 #3258eb), 수강신청 단추(#4385e3),
 *     통계 화면의 회색 막대·초록 단추: 강조색 계열로
 * 글자 크기·칸 배치는 건드리지 않는다.
 * ------------------------------------------------------------------------ */

/* 본문 판 */
#container .contents {
	border-radius: var(--gsu-radius);
	box-shadow: var(--gsu-shadow);
	background: #fff;
}
/* 판 위에 갈피가 붙어 있는 화면(스터디그룹·회원가입·마이페이지)은 위 모서리를
 * 갈피와 이어지게 네모로 둔다. */
#container #leftmenu + .contents,
#container .lnb_mynote + .contents,
#container .gsu-mytabs + .contents { border-top-left-radius: 0; border-top-right-radius: 0; }

/* 게시판 목록 머리줄 */
.board-list01 table thead th {
	background: var(--gsu-accent);
	color: var(--gsu-on-accent);
	font-weight: 600;
}
.board-list01 table thead th:first-child { border-top-left-radius: var(--gsu-radius); }
.board-list01 table thead th:last-child  { border-top-right-radius: var(--gsu-radius); }
.board-list01 table tbody tr:hover td { background: var(--gsu-accent-soft); }

/* 단추 - 그누보드 기본(분홍 확인, 진회색 글쓰기, 흰 보조) */
.btn_submit,
a.btn_b02, button.btn_b02,
#bo_sch .btn_submit, #bo_sch input[type=submit], #bo_sch button {
	background: var(--gsu-accent);
	border: 0;
	border-radius: 999px;
	color: var(--gsu-on-accent) !important;
	padding-left: 14px;
	padding-right: 14px;
	cursor: pointer;
}
.btn_submit:hover, a.btn_b02:hover, button.btn_b02:hover,
#bo_sch input[type=submit]:hover, #bo_sch button:hover { background: var(--gsu-accent-deep); }
a.btn_b01, button.btn_b01, a.btn_admin {
	background: var(--gsu-surface);
	border: 1px solid var(--gsu-line);
	border-radius: 999px;
	color: var(--gsu-ink) !important;
	padding-left: 14px;
	padding-right: 14px;
}
a.btn_b01:hover, button.btn_b01:hover { border-color: var(--gsu-accent-line); background: var(--gsu-accent-soft); }

/* 게시판 검색 칸 */
#bo_sch select,
#bo_sch input[type=text] {
	height: 30px;
	padding: 0 10px;
	border: 1px solid var(--gsu-line);
	border-radius: 8px;
	background: #fff;
	color: var(--gsu-ink);
	vertical-align: middle;
}
#bo_sch input[type=submit], #bo_sch button, #bo_sch .btn_submit { height: 30px; vertical-align: middle; }
#bo_sch input[type=text]:focus, #bo_sch select:focus { outline: 0; border-color: var(--gsu-accent); box-shadow: 0 0 0 3px rgba(var(--gsu-accent-rgb), .15); }

/* 쪽 번호 */
.pg_page, .pg_current {
	min-width: 30px;
	height: 30px;
	line-height: 30px;
	padding: 0 6px;
	margin: 0 2px;
	border-radius: 8px;
	box-sizing: border-box;
	text-align: center;
}
.pg_page { background: var(--gsu-surface); border: 1px solid var(--gsu-line); color: var(--gsu-ink); }
.pg_page:hover { border-color: var(--gsu-accent-line); background: var(--gsu-accent-soft); text-decoration: none; }
.pg_current { background: var(--gsu-accent); color: var(--gsu-on-accent); font-weight: 600; }

/* 오늘의 학습미션 · 원리/실전 전체보기 갈피 (sub.css .result-tabmenu3) */
.result-tabmenu3 li a {
	border-radius: var(--gsu-radius) var(--gsu-radius) 0 0;
}
.result-tabmenu3 li a.on,
.result-tabmenu3 li a:hover {
	background: var(--gsu-accent) !important;
	color: var(--gsu-on-accent) !important;
}
.result-tabmenu3 { border-bottom-color: var(--gsu-accent) !important; }

/* 수강신청 큰 단추 */
#next_new {
	background: var(--gsu-accent) !important;
	border-radius: 999px !important;
	color: var(--gsu-on-accent) !important;
}
#next_new:hover { background: var(--gsu-accent-deep) !important; }

/* 통계 화면 (stats/*.php 인라인 스타일보다 앞서도록 한 단계 무겁게) */
body td.ql_summary_top {
	background: var(--gsu-accent) !important;
	border-color: #fff !important;
	border-radius: var(--gsu-radius);
	text-shadow: none !important;
	color: var(--gsu-on-accent);
}
body a.button, body a.button1 {
	border-radius: 999px;
	padding: 4px 12px;
	text-shadow: none;
}
body a.button1 { background: var(--gsu-accent) !important; border-color: var(--gsu-accent) !important; }