@charset "utf-8";
/*
 * 글사유 side pane.
 *
 * Loads after common.css. The pane reuses #quick_menu so that every existing
 * rule there (gutter position, the <=1000px bottom bar) still applies; this
 * file only adds the widget rail and the slide-out drawer, and neutralises the
 * broad `#quick_menu div` / `#quick_menu div p` rules inside the new markup.
 */

/* ------------------------------------------------------------------ rail --
 *
 * .gsu-rail-widgets 는 판이 아니라 자리다.
 *
 * 한동안 흰 카드였다. 그 자리에 5각형 그림(panes/pentagon.php)이 있었고,
 * 홈통에는 사이트의 무늬 있는 회색 바탕이 비쳐서 그림을 그 위에 바로 얹으면
 * 읽기 어려웠기 때문이다. 그림이 빠지고 리포트 단추 하나만 남은 지금은
 * 그 카드가 단추를 한 겹 더 감싸는 액자 노릇밖에 하지 않는다.
 *
 * 그래서 배경을 걷고 폭도 타일과 같은 118px 로 맞췄다. 테두리는 이 파일이
 * 그린 것이 아니라 common.css:374 의 #quick_menu div 가 rail 안의 모든 div 에
 * 1px 씩 두르는 것이라, 배경만 지우면 빈 상자 윤곽이 그대로 남는다.
 *
 * 다만 border:0 으로 지우면 안 된다. 아래 타일 칸(.gsu-rail-links)은 그
 * 1px 테두리를 그대로 지니고 있어서, 이쪽만 없애면 단추가 타일보다 1px
 * 왼쪽으로 밀린다. 투명한 1px 을 남겨 상자 크기는 그대로 두고 선만 지운다.
 *
 * 자리는 자리로 두고, 보이는 모양은 그 안에 들어가는 위젯이 저마다 정한다.
 */

#quick_menu .gsu-rail-widgets {
	width: 118px;
	box-sizing: content-box;
	border: 1px solid transparent;
	background: none;
	margin-bottom: 6px;
}

/* 맨 위 단추가 있는 레일은 그만큼 위에서 시작한다.
 *
 * common.css:389 의 top:167px 은 위젯 칸이 비어 있던 시절 값이다. 66px 짜리
 * 단추가 그 자리에 들어오면 아래 그림 타일 줄이 통째로 밀려 내려간다.
 *
 * 단추를 음수 여백으로 위로 잡아당겨 봤지만 그 방법은 두 군데서 어긋났다.
 * 하나, 위젯 칸은 손님에게도 (빈 채로) 그려지므로 손님 레일의 타일까지
 * 같이 올라갔다. 둘, 스크롤하면 헤더의 오래된 스크립트가 레일을 top:10px 에
 * 붙이는데, 음수 여백은 레일 상자 밖으로 삐져나온 것이라 단추 윗머리가
 * 화면 위로 잘려 나갔다.
 *
 * 그래서 상자를 그대로 두고 레일 자체를 12px 올린다. 레일 상자의 윗변이
 * 곧 단추의 윗변이 되므로 삐져나오는 것이 없고, 스크롤했을 때의 top:10px
 * 도 그대로 뜻이 통한다(단추 위 11px - 단추와 첫 타일 사이 간격과 같다).
 *
 * 이 클래스는 위젯 칸에 실제로 무언가 들어갈 때만 붙는다(sidepane.php).
 * 손님 레일은 예전 167px 자리에 그대로 있다. */
#quick_menu.gsu-rail-lift { top: 155px; }

#quick_menu .gsu-rail-btn {
	display: block;
	width: 118px;
	padding: 7px 0 6px;
	border: 0;
	background: #fff;
	cursor: pointer;
	text-align: center;
	font-family: inherit;
	line-height: 1;
}

#quick_menu .gsu-rail-btn:hover { background: #fff7f3; }

/* The full chart needs gutter room the narrow desktops do not have, so the
 * 118px summary button is the default and the chart replaces it further down
 * this file, at the width where it actually fits. */
#quick_menu .gsu-rail-full { display: none; }
#quick_menu .gsu-rail-mini { display: block; }

#quick_menu .gsu-rail-head {
	display: block;
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 700;
	color: #333;
	text-align: left;
}

#quick_menu .gsu-rail-chart { display: block; width: 100%; }

#quick_menu .gsu-mini {
	display: block;
	width: 62px;
	margin: 0 auto 3px;
}

#quick_menu .gsu-mini-num {
	display: block;
	font-size: 19px;
	font-weight: 700;
	color: #ff5d24;
	letter-spacing: -0.5px;
}

#quick_menu .gsu-mini-num i { font-size: 11px; font-style: normal; }

#quick_menu .gsu-rail-cap {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: #777;
}

/* --------------------------------------------------- 문제풀이 리포트 단추 --
 * panes/reportlinks.php. 5각형이 있던 자리(.gsu-rail-widgets)에 들어가고,
 * 118px 폭과 1480px 이상의 230px 폭 양쪽에서 읽히도록 폭을 채운다.
 *
 * 액자는 없다. 한동안 노란 카드(#ffca18) 안에 남색 단추를 넣고 그 카드를
 * 다시 흰 판이 감쌌는데, 링크가 둘일 때 그 둘을 한 묶음으로 보이게 하려던
 * 것이었다. 하나만 남으니 두 겹 다 단추를 감싸는 액자일 뿐이라 걷어냈다.
 * 이 자리에 보이는 것은 이제 남색 단추 하나다.
 *
 * 색은 퀵메뉴 타일을 그대로 따른다. make_img/common/Qmenu01.jpg 의 파랑
 * #2662a8 에 흰 글씨를 쓰고, 앞의 "문제풀이" 네 글자만 Qmenu04.jpg 의 노랑
 * #ffca18 으로 되짚어 준다.
 * 굵기는 메인 로그인 박스(main.css:13-17 .hello-user)와 같은 600.
 * 링크 한 줄에 리포트 이름이 그대로 들어가도록 white-space:nowrap 을 건다.
 *
 * 글자는 가운데로 모은다. 단추가 자리 폭을 다 쓰는데(width:100%) 글자는
 * 그보다 짧아서, 왼쪽으로 붙여 두면 넓은 단계에서 오른쪽에 파란 여백이
 * 80px 넘게 남았다. 어긋난 여백은 상자가 잘린 것처럼 보인다.
 *
 * #quick_menu 는 폭이 없는 position:fixed 라 가장 넓은 자식만큼 벌어진다.
 * nowrap 을 걸어 둔 채로 두면 글자 길이가 그대로 패널 폭이 되어 레일 전체가
 * 오른쪽으로 밀려나므로, 기본 단계에서는 자리를 레일과 같은 118px 에
 * 고정한다. "문제풀이 리포트" 8글자는 11px 에 자간을 좁히면 넉넉히 들어간다.
 * 1480px 이상에서 자리가 230px 로 넓어지면 아래 미디어쿼리에서 글자를
 * 로그인 박스와 같은 18px 로 키운다.
 */

#quick_menu .gsu-rail-reports {
	width: 118px;
	box-sizing: border-box;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

/* 높이는 정수로 떨어뜨린다.
 *
 * line-height 를 배수(1.3)로 두면 13px x 1.3 = 16.9px 이 되고, 이 0.9px 이
 * 단추 아래에 쌓인 그림 타일 전부를 소수점 좌표로 밀어낸다. 브라우저는
 * 정수 격자에 걸치지 않은 그림을 다시 샘플링하므로 118x118 원본이 그대로
 * 118px 로 놓여도 글자와 그림이 뿌옇게 뭉갠 것처럼 보였다.
 *
 * 20 x 2 + 12 + 12 + 1 + 1 = 66px. 아래 여백 6px 을 더해도 정수라 타일은
 * 예전처럼 정수 좌표에서 시작한다. 옆의 가로 반 픽셀은 common.css:373 의
 * left:50% 에서 오는 것으로, 2018년부터 있던 원래 성질이다.
 *
 * 위아래 12px 은 글자를 띄우려고 준 것이 아니라 단추를 키우려고 준 것이다.
 * 늘어난 12px 만큼 레일 전체가 위에서 시작하므로(.gsu-rail-lift, 위)
 * 아래 타일 줄은 제자리에 남는다. 두 값은 한 쌍이다 - 여기 여백을 고치면
 * 레일의 top 도 같은 만큼 고쳐야 타일이 움직이지 않는다.
 *
 * 글자는 두 줄이다 - "문제풀이" / "리포트". 한 줄로 두면 118px 안에
 * 들어가느라 13px 까지 내려가야 했는데, 레일에서 제일 먼저 읽혀야 할 것이
 * 제일 작은 글씨가 되는 셈이었다. 접으면 같은 폭에서 17px 을 쓸 수 있다.
 * 첫 화면 판 제목(home_report.css .gsu-report-title, 16px)보다 한 단계 큰
 * 값이다. 레일은 곁다리지만 이 단추만은 본문으로 들어가는 문이라 먼저
 * 읽혀야 한다.
 *
 * 15px 에서 올렸다. 줄높이는 20px 그대로 둔다. 위의 66px 셈과 레일의
 * .gsu-rail-lift 가 한 쌍이라, 줄높이를 건드리면 아래 그림 타일이 통째로
 * 내려간다. 17px 글자는 20px 줄 안에 잘리지 않고 들어간다(재어 확인). */
#quick_menu .gsu-report-link {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 12px 3px;
	border: 1px solid #2662a8;
	border-radius: 3px;
	background: #2662a8;
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.5px;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
}

/* 두 낱말을 위아래로 세운다. 사이에 공백이 없으므로(panes/reportlinks.php)
 * 블록으로 세우는 것만으로 줄이 나뉜다. */
#quick_menu .gsu-report-link b,
#quick_menu .gsu-report-link span {
	display: block;
}

#quick_menu .gsu-report-link:hover {
	border-color: #1d4e86;
	background: #1d4e86;
}

#quick_menu .gsu-report-link b {
	font-weight: 600;
	color: #ffca18;
}

#quick_menu .gsu-report-link span { color: #fff; }

/* ---------------------------------------------------------------- drawer -- */

#quick_menu .gsu-drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: 340px;
	height: 100%;
	z-index: 120;
	border: 0;
	border-left: 1px solid #d8d8d8;
	background: #fff;
	box-shadow: -4px 0 18px rgba(0, 0, 0, 0.13);
	overflow-y: auto;
	text-align: left;
	cursor: default;
}

#quick_menu .gsu-drawer[hidden] { display: none; }

#quick_menu .gsu-drawer-head {
	position: relative;
	border: 0;
	padding: 0;
	height: 44px;
	background: #ff5d24;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

#quick_menu .gsu-drawer-close {
	position: absolute;
	top: 7px;
	right: 8px;
	width: 30px;
	height: 30px;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 25px;
	line-height: 1;
	cursor: pointer;
}

#quick_menu .gsu-drawer-body { border: 0; padding: 4px 0 24px; }

#quick_menu .gsu-card { border: 0; padding: 14px 16px 18px; }
#quick_menu .gsu-card + .gsu-card { border-top: 1px solid #ececec; }

#quick_menu .gsu-card-title {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	color: #333;
}

#quick_menu .gsu-card-chart { border: 0; margin: 0 0 10px; }

#quick_menu .gsu-card-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

#quick_menu .gsu-card-table th,
#quick_menu .gsu-card-table td {
	padding: 5px 4px;
	border-bottom: 1px solid #efefef;
	text-align: left;
	color: #444;
}

#quick_menu .gsu-card-table th {
	color: #888;
	font-weight: 400;
	border-bottom: 1px solid #ddd;
}

#quick_menu .gsu-card-table .gsu-num { text-align: right; }
#quick_menu .gsu-card-table .gsu-row-empty td { color: #b3b3b3; }

#quick_menu .gsu-card-sub {
	border: 0;
	margin: 16px 0 6px;
	font-size: 12px;
	font-weight: 700;
	color: #555;
}

#quick_menu .gsu-card-foot {
	border: 0;
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #777;
}

/* ------------------------------------------------------------------- svg -- */

#quick_menu .gsu-svg { display: block; overflow: visible; }
#quick_menu .gsu-bg { fill: #fff; }
#quick_menu .gsu-grid { fill: none; stroke: #e2e2e2; stroke-width: 1; }
#quick_menu .gsu-spoke { stroke: #e2e2e2; stroke-width: 1; }

#quick_menu .gsu-series {
	fill: rgba(255, 93, 36, 0.22);
	stroke: #ff5d24;
	stroke-width: 2;
	stroke-linejoin: round;
}

#quick_menu .gsu-dot { fill: #ff5d24; }
#quick_menu .gsu-dot-empty { fill: #fff; stroke: #ffb599; stroke-width: 1.5; }

#quick_menu .gsu-axis-label {
	fill: #5a4fcf;
	font-size: 12px;
	font-family: inherit;
}

/* the 0 / 5 / 10 / 15 value scale up the top spoke */
#quick_menu .gsu-vaxis { stroke: #cfcfcf; stroke-width: 1; }

#quick_menu .gsu-axis-tick {
	fill: #999;
	font-size: 10px;
	font-family: inherit;
}

/* hover balloon, mirroring amCharts' balloonText on the 마이페이지 chart */
#quick_menu .gsu-hit { fill: #fff; fill-opacity: 0; cursor: pointer; }
#quick_menu .gsu-balloon { pointer-events: none; }

#quick_menu .gsu-balloon-box {
	fill: #fff;
	stroke: #ff5d24;
	stroke-width: 1;
}

#quick_menu .gsu-balloon-text {
	fill: #333;
	font-size: 11px;
	font-family: inherit;
}

/* ---------------------------------------------- login-page tile colour -----
 * panes/quicklinks.php forces the original (pre-theme) Qmenu*.jpg art on
 * bbs/login.php only, regardless of the site's current skin, and tags the
 * three blue tiles (Qmenu01-03) with this class so they can be nudged a
 * shade darker than the stock #2662a8 - the two yellow tiles (Qmenu04/05)
 * are left exactly as they are. filter:brightness keeps this a one-line,
 * asset-free change instead of baking a new darker jpg. Once logged in the
 * user leaves this page entirely, so the site's normal skin colours take
 * over everywhere else untouched. */
#quick_menu .gsu-login-blue-tile { filter: brightness(0.82); }

/* -------------------------------------------------- neutralise legacy rules -
 * common.css:374-380 styles every div/p/a under #quick_menu for the old image
 * button column. Undo that inside the new containers only.
 */

#quick_menu .gsu-rail-widgets p,
#quick_menu .gsu-drawer p {
	float: none;
	width: auto;
	height: auto;
	border: 0;
	background: none;
}

#quick_menu .gsu-drawer a {
	width: auto;
	display: inline;
	text-align: left;
}

/* ------------------------------------------------------- full rail chart -
 * The gutter starts at 50% + 510px, so a chart of width W needs a viewport of
 * 2 * (510 + W). At 230px that is 1480px. Below it the 118px summary button
 * from the top of this file stays.
 *
 * 이 단계는 5각형 그림(panes/pentagon.php)을 위한 것이다. 그림이 크게 그려질
 * 만한 화면에서만 .gsu-rail-btn 을 230px 로 벌린다. 지금 켜져 있는 위젯은
 * 리포트 단추 하나뿐이고 단추는 넓힐 까닭이 없으므로, 자리(.gsu-rail-widgets)
 * 자체는 여기서 넓히지 않는다. 예전에는 자리를 230px 로 벌려 놓았는데,
 * 그러면 안에 든 118px 단추 오른쪽으로 빈 상자가 112px 남아 테두리만 뜬
 * 판때기처럼 보였다. 5각형을 다시 켜는 사람은 그때 이 자리를 넓히면 된다.
 */

@media screen and (min-width: 1480px) {
	#quick_menu .gsu-rail-widgets {
		margin-bottom: 10px;
	}

	/* Horizontal padding keeps the axis labels, which the svg draws outside its
	 * viewBox, clear of the card border. */
	#quick_menu .gsu-rail-btn {
		width: 228px;
		box-sizing: border-box;
		padding: 9px 8px 12px;
		background: #fff;
		text-align: left;
	}

	#quick_menu .gsu-rail-btn:hover { background: #fff; }
	#quick_menu .gsu-rail-btn:hover .gsu-rail-chart { opacity: .85; }

	#quick_menu .gsu-rail-full { display: block; }
	#quick_menu .gsu-rail-mini { display: none; }

	/* common.css:377 sizes only the anchor (118px); the div around it is
	 * shrink-to-fit and now follows the 230px chart, which would leave the
	 * image tiles sitting in a half-empty bordered box. Pin the column back
	 * to its original width so the buttons stay exactly where they were. */
	#quick_menu .gsu-rail-links { width: 118px; }

	/* 단추는 넓어진 자리를 따라가지 않는다.
	 *
	 * 자리가 230px 로 벌어지면 단추도 같이 늘어나 글자 양옆에 남색 여백이
	 * 40px 넘게 남았다. 아래 그림 타일은 118px 이라 단추만 오른쪽으로 튀어
	 * 나오기까지 했다. 레일은 한 줄기여야 읽힌다.
	 *
	 * 그래서 타일과 같은 118px 로 고정한다. 그러면 글자도 그 폭에 맞춰야
	 * 하므로 크기는 기본 단계와 같이 둔다. */
	#quick_menu .gsu-rail-reports {
		width: 118px;
		padding: 0;
	}
}

/* ------------------------------------------------- 레일은 화면 밖으로 못 나간다 -
 *
 * common.css:373 의 left:50% + margin-left:510px 는 "화면이 이만큼 넓다"를
 * 전제로 한 자리다. 그 전제가 깨지는 폭에서는 아래 하단 바로 갈아타게
 * 해 뒀는데, 그 갈아타는 지점을 px 로 적어 두는 방식은 두 번 어긋났다.
 *
 *   하나. 레일은 118px 이 아니라 120px 이다(타일 118 + common.css:374 가
 *   두르는 좌우 테두리 1px 씩). 그래서 실제로 필요한 폭은 2 x (510 + 120)
 *   = 1260px 인데 아래 갈아타기는 1255px 에서 끝난다 - 1256~1259px 이 빈다.
 *
 *   둘. 미디어쿼리의 폭에는 세로 스크롤바가 들어가지만 실제로 배치에 쓸 수
 *   있는 폭에는 안 들어간다. 창이 1270px 이면 미디어쿼리는 1270 으로 보고
 *   "넓다"고 판단하지만 내용이 쓸 수 있는 자리는 1255px 남짓이라 레일이
 *   오른쪽으로 삐져나간다.
 *
 * 그래서 숫자를 하나 더 고치는 대신, 자리 자체가 화면을 벗어날 수 없게
 * 한다. 평소에는 예전 그대로 홈통(50% + 510px)에 놓이고, 그 자리가 화면
 * 밖으로 나가려 할 때만 오른쪽 끝에 붙는다. 경계를 손으로 적지 않으므로
 * 폭이 얼마든, 스크롤바가 있든 없든 잘려 나가지 않는다.
 *
 * 이 규칙이 아래 하단 바 규칙보다 먼저 온다 - 1001~1255px 에서는 아래
 * 것이 이겨서 예전처럼 하단 바가 된다. 이것은 그 바깥 폭을 맡는다.
 */
/* @supports 로 감싼 이유: min() 을 모르는 브라우저에서는 left 한 줄만
 * 버려지고 margin-left:0 은 그대로 남는다. 그러면 common.css 의 left:50%
 * 에 여백이 사라진 꼴이라 레일이 본문 한가운데로 들어온다 - 지금보다 더
 * 나쁘다. 둘은 한 쌍이므로 같이 적용되거나 같이 빠져야 한다. */
@supports (left: min(1px, 2px)) {
	@media screen and (min-width: 1001px) {
		#quick_menu {
			left: min(50% + 510px, 100% - 126px) !important;
			margin-left: 0 !important;
		}
	}
}

/* --------------------------------------------------------- viewport fixes -
 * common.css:373 puts the rail at left:50% + margin-left:510px, so it needs
 * 50% + 510 + 118 <= 100%, i.e. a viewport of at least 1256px, to be visible.
 * But common.css:395 only switches to the bottom bar at <=1000px, so from
 * 1001px to 1255px the rail is pushed off the right edge - at 1024px just 2px
 * of it is on screen.
 *
 * Anchoring it to the right edge instead would overlap the content, because
 * .container is a fixed 1000px and there is almost no gutter at these widths.
 * Use the site's own answer for a narrow viewport - the bottom bar from
 * common.css:399-416 - across the rest of the band.
 *
 * !important 가 붙은 까닭 (CL-0135).
 *
 * 게시판 화면은 common.css 를 한 번 더 읽어들인다 - sidepane.css 보다
 * 나중에. 그래서 같은 무게(#quick_menu)로 적은 이 자리의 left/margin 은
 * 뒤에 온 common.css:373 의 left:50% + margin-left:510px 에 덮여 버렸다.
 * 그러면 폭이 1001~1255px 일 때 레일이 화면 오른쪽 밖으로 밀려나 끄트머리
 * 한 조각만 보인다 - 하단 바가 아예 그려지지 않는다.
 *
 * position 도 같이 박는다. header_bbs.php 의 스크롤 처리가 인라인 style 로
 * position:absolute 를 얹기 때문이다.
 */

@media screen and (min-width: 1001px) and (max-width: 1255px) {
	#quick_menu {
		position: fixed !important;
		left: 0 !important;
		top: inherit !important;
		bottom: 0 !important;
		margin: 0 !important;
		width: 100% !important;
		min-width: 1000px !important;
	}

	#quick_menu div:after { content: ""; display: block; clear: both; }

	#quick_menu div p {
		float: left;
		width: 118px;
		height: 118px;
		background: #2662a8;
		border: 0;
		border-left: 1px solid #cdcdcd;
	}

	#quick_menu div p:first-child { background: #c12f3a; }
	#quick_menu div p a { width: 100%; height: 100% !important; }
	#quick_menu div p.btn_top a { line-height: 118px; font-size: 24px; }

	footer { padding-bottom: 190px; }
}

/* ------------------------------------------- 좁은 화면의 하단 바 (CL-0134)
 *
 * 창을 좁히면 레일이 화면 아래 가로 바로 바뀐다. 예전에는 그때 위젯 자리
 * (.gsu-rail-widgets)를 통째로 감췄다 - 그 자리에 5각형 그래프가 있던 시절
 * 얘기로, 가로 바에는 그래프가 들어갈 자리가 없었기 때문이다.
 *
 * 지금 그 자리에 있는 것은 "내 포인트"와 "문제풀이 리포트"다. 둘 다 118px
 * 타일 하나에 들어가므로 감출 까닭이 없고, 감추면 창 폭에 따라 메뉴가
 * 달라져 보인다 - 넓을 때는 있던 것이 좁히면 사라진다.
 *
 * 그래서 감추는 대신 다른 타일과 같은 118x118 로 눕혀 같은 줄에 세운다.
 * 서랍(.gsu-drawer)만 폭을 화면에 맞춘다. */
@media screen and (max-width: 1255px) {
	#quick_menu .gsu-drawer { width: 100%; }

	/* 위젯 자리와 링크 자리를 한 줄에 나란히 */
	#quick_menu .gsu-rail-widgets,
	#quick_menu .gsu-rail-links {
		float: left;
		width: auto;
		margin: 0;
		border: 0;
		background: none;
	}

	/* 내 포인트 - 타일 크기에 맞춘다. 두 겹 테두리는 그대로 두되 모서리는
	 * 옆 타일과 맞춰 각지게 한다. */
	#quick_menu .gsu-rail-points {
		float: left;
		box-sizing: border-box;
		width: 118px;
		height: 118px;
		margin: 0;
		padding: 10px 6px;
		border-radius: 0;
	}
	#quick_menu .gsu-rail-points::before { border-radius: 0; }
	#quick_menu .gsu-rail-points-label { font-size: 11px; }
	#quick_menu .gsu-rail-points-value { font-size: 19px; }
	#quick_menu .gsu-rail-points-split { font-size: 10px; }
	#quick_menu .gsu-rail-gift { margin-top: 3px; padding: 3px 4px; font-size: 10px; }

	/* 문제풀이 리포트 - 같은 타일 크기 */
	#quick_menu .gsu-rail-reports {
		float: left;
		box-sizing: border-box;
		width: 118px;
		margin: 0;
		padding: 0;
	}
	#quick_menu .gsu-report-link {
		box-sizing: border-box;
		width: 118px;
		height: 118px;
		padding: 0 4px;
		border-radius: 0;
		font-size: 15px;
		line-height: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

}

/* ---------------------------------------------------------------- 내 점수 -
 * 문제풀이 리포트 단추 바로 위 칸(panes/points.php, CL-0123).
 *
 * 레일은 118px 이다. 숫자가 주인공이므로 그것만 크게 두고 나머지는 작게
 * 눕힌다. 네 자리(9,999)까지는 20px 로 들어가고, 다섯 자리가 되면 글자가
 * 칸을 넘기 전에 스스로 줄도록 폭에 맞춘 크기를 쓴다. */
/* 테두리가 두 겹이다 (CL-0130).
 *
 *   바깥  1px
 *   안쪽  5px (= 바깥의 5배), 바깥에서 2px (= 바깥의 2배) 들어온 자리
 *
 * 두 겹 모두 평소에는 연한 빨강(#FF8080)이고, 포인터가 얹히면 둘 다 순수
 * 빨강(#FF0000)이 된다.
 *
 * 안쪽 테두리는 가상요소로 그린다 - 한 상자에 테두리를 두 개 그릴 수는
 * 없고, box-shadow 로 하면 모서리 둥글기가 바깥과 어긋난다.
 * pointer-events:none 이라 그 위를 눌러도 단추가 눌린다. */
#quick_menu .gsu-rail-points {
	position: relative;
	display: block;
	width: 118px;
	box-sizing: border-box;
	margin-bottom: 6px;
	/* 세로로 20% 길게 - 위아래 안여백을 9+8 에서 18+17 로 늘렸다. 칸 높이는
	 * 내용이 정하므로 높이를 직접 박지 않고 여백으로 늘린다(사은품 딱지가
	 * 있고 없고에 따라 내용 높이가 달라진다). */
	padding: 18px 8px 17px;
	border: 1px solid #FF8080;
	border-radius: 8px;
	background: var(--gsu-surface, #fff);
	text-align: center;
	line-height: 1.2;
}

#quick_menu .gsu-rail-points::before {
	content: "";
	position: absolute;
	top: 2px;
	right: 2px;
	bottom: 2px;
	left: 2px;
	border: 5px solid #FF8080;
	border-radius: 6px;
	pointer-events: none;
}

/* 포인터가 얹히면 두 겹 모두 순수 빨강. */
#quick_menu .gsu-rail-points:hover { border-color: #FF0000; }
#quick_menu .gsu-rail-points:hover::before { border-color: #FF0000; }

#quick_menu .gsu-rail-points-label {
	display: block;
	color: var(--gsu-ink-2, #615a4d);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

#quick_menu .gsu-rail-points-value {
	display: inline-block;
	margin-top: 2px;
	color: var(--gsu-accent, #2662a8);
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.03em;
	/* 다섯 자리가 넘어가면 칸 폭에 맞춰 줄어든다. */
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: baseline;
}

#quick_menu .gsu-rail-points-unit {
	color: var(--gsu-ink-2, #615a4d);
	font-size: 12px;
	font-weight: 700;
}

#quick_menu .gsu-rail-points-split {
	display: block;
	margin-top: 3px;
	color: var(--gsu-ink-2, #615a4d);
	font-size: 11px;
	letter-spacing: -0.03em;
	white-space: nowrap;
}

/* 숫자가 바뀌었을 때 한 번 반짝인다. 움직임을 싫어하는 설정이면 건너뛴다. */
@keyframes gsu-points-bump {
	0%   { transform: scale(1);    }
	40%  { transform: scale(1.12); }
	100% { transform: scale(1);    }
}

#quick_menu .gsu-rail-points.is-bumped .gsu-rail-points-value {
	animation: gsu-points-bump .5s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	#quick_menu .gsu-rail-points.is-bumped .gsu-rail-points-value { animation: none; }
}

/* 하단 바 차림(좁은 화면)에서는 레일 위젯 자리가 통째로 감춰진다
 * (sidepane.css 의 max-width:1255px 규칙). 점수 칸도 그 안에 있으므로
 * 따로 적을 것이 없다. */

/* 사은품 딱지 (CL-0128). 5,000점을 넘겼을 때만 나온다. 누르는 것은
 * 바깥 포인트 칸이므로 여기는 단추가 아니라 표시일 뿐이다. */
#quick_menu .gsu-rail-gift {
	display: block;
	/* 양 끝이 빨간 테두리에 닿을 듯해서 좌우로 6px 씩 띄운다 */
	width: calc(100% - 12px);
	box-sizing: border-box;
	margin: 5px auto 0;
	padding: 4px 4px;
	border-radius: 999px;
	background: var(--gsu-accent, #2662a8);
	color: var(--gsu-on-accent, #fff);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

#quick_menu .gsu-rail-gift[hidden] { display: none; }

/* 포인트 칸을 누를 수 있게 (CL-0129). 원래 <div> 이던 것을 <button> 으로
 * 바꿨으므로 브라우저가 단추에 기본으로 주는 테두리·바탕·글꼴을 지운다. */
#quick_menu button.gsu-rail-points {
	font-family: inherit;
	cursor: pointer;
	text-align: center;
	-webkit-appearance: none;
	appearance: none;
}

/* 바깥 테두리는 포인터가 얹혀도 빨강 그대로다 - 바뀌는 것은 안쪽
 * 테두리뿐이다(위 ::before). */


/* ------------------------------------------------------ 포인트 안내 패널 -
 * 레일 왼쪽에 뜬다(CL-0129). 어둡게 덮는 막이 없어 본 화면이 그대로 보이고
 * 누를 수도 있다 - 딴 창으로 띄우면 브라우저가 주소 표시줄을 지우지 못하게
 * 막기 때문에 같은 문서 안의 패널로 두었다.
 *
 * 레일이 z-index:90 이므로 그보다 위에 있어야 하고, 오른쪽 끝을 레일 왼쪽에
 * 맞춘다 - 레일을 가리면 포인트 숫자를 보면서 읽을 수 없다. */
#quick_menu .gsu-point-help {
	position: absolute;
	top: 0;
	right: calc(100% + 12px);
	z-index: 100;
	box-sizing: border-box;
	width: 340px;
	max-height: 80vh;
	overflow-y: auto;
	padding: 18px 20px 20px;
	border: 1px solid var(--gsu-line, #cdcdcd);
	border-radius: var(--gsu-radius, 12px);
	background: var(--gsu-surface, #fff);
	color: var(--gsu-ink, #4c493e);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
	text-align: left;
	font-size: 13px;
	line-height: 1.6;
	white-space: normal;
}

#quick_menu .gsu-point-help[hidden] { display: none; }

#quick_menu .gsu-point-help-close {
	position: absolute;
	top: 8px;
	right: 10px;
	border: 0;
	background: none;
	color: var(--gsu-ink-2, #615a4d);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

#quick_menu .gsu-point-help-h1 {
	margin: 0 0 2px;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

#quick_menu .gsu-point-help-now {
	margin: 0 0 14px;
	color: var(--gsu-ink-2, #615a4d);
	font-size: 12px;
}
#quick_menu .gsu-point-help-now b { color: var(--gsu-accent, #2662a8); font-size: 16px; }

#quick_menu .gsu-point-help h3 {
	margin: 16px 0 6px;
	font-size: 13px;
	font-weight: 800;
}

#quick_menu .gsu-point-help table { width: 100%; border-collapse: collapse; }

#quick_menu .gsu-point-help th,
#quick_menu .gsu-point-help td {
	padding: 6px 4px;
	border-bottom: 1px solid var(--gsu-line, #e7e3d8);
	text-align: left;
	vertical-align: top;
	font-weight: 400;
	font-size: 12px;
}

#quick_menu .gsu-point-help th { width: 34%; font-weight: 700; white-space: nowrap; }
#quick_menu .gsu-point-help td.up   { width: 20%; color: var(--gsu-accent, #2662a8); font-weight: 800; white-space: nowrap; }
#quick_menu .gsu-point-help td.down { width: 20%; color: #9E4A45;                    font-weight: 800; white-space: nowrap; }

#quick_menu .gsu-point-help p { margin: 7px 0; }

#quick_menu .gsu-point-help-ok {
	padding: 8px 10px;
	border-left: 3px solid var(--gsu-accent, #2662a8);
	border-radius: 0 6px 6px 0;
	background: var(--gsu-accent-soft, #eef3f8);
}

#quick_menu .gsu-point-help-dim { color: var(--gsu-ink-2, #615a4d); font-size: 12px; }

/* 좁은 화면에서는 레일이 화면 아래 가로 바가 된다. 그때 패널을 레일 왼쪽에
 * 두면 화면 밖으로 나가므로 화면 가운데에 띄운다. */
@media screen and (max-width: 1255px) {
	#quick_menu .gsu-point-help {
		position: fixed;
		top: 50%;
		left: 50%;
		right: auto;
		transform: translate(-50%, -50%);
		width: min(340px, calc(100vw - 32px));
	}
}

/* ------------------------------------------------------- rail fit (짧은 화면) */

/* 창 세로가 레일보다 짧을 때 sidepane.js fitRail() 이 레일에 max-height 를
 * 걸고 이 클래스를 붙인다. 포인트 칸·리포트 단추·타일이 한꺼번에 굴러간다.
 * 스크롤 막대는 숨긴다 - 118px 레일에 막대가 들어서면 타일 그림이 그만큼
 * 잘린다. 휠·터치로 굴릴 수 있고, 아래에 더 있다는 것은 맨 아래 타일이
 * 잘려 보이는 것으로 드러난다. */
#quick_menu.gsu-rail-scroll {
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

#quick_menu.gsu-rail-scroll::-webkit-scrollbar { display: none; }

/* 레일이 굴러가는 동안에는 레일 밖으로 펼쳐지는 도움말 판이 잘리므로 화면에
 * 붙인다. 자리(top/right/max-height)는 fitRail() 이 레일 왼쪽에 맞춰 적는다. */
#quick_menu.gsu-rail-scroll .gsu-point-help { position: fixed; }