@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 -- */

#quick_menu .gsu-rail-widgets {
	background: #fff;
	margin-bottom: 6px;
}

#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 폭 양쪽에서 읽히도록 폭을 채운다.
 *
 * 색은 퀵메뉴 타일을 그대로 따른다. make_img/common/Qmenu04.jpg 의 노랑
 * #ffca18 을 카드 바탕으로 깔고, 링크 상자는 Qmenu01.jpg 의 파랑 #2662a8 에
 * 흰 글씨를 쓴다. 앞의 "원리"/"실전" 두 글자만 노랑으로 되짚어 준다.
 * 굵기는 메인 로그인 박스(main.css:13-17 .hello-user)와 같은 600.
 * 링크 한 줄에 리포트 이름이 그대로 들어가도록 white-space:nowrap 을 건다.
 *
 * #quick_menu 는 폭이 없는 position:fixed 라 가장 넓은 자식만큼 벌어진다.
 * nowrap 을 걸어 둔 채로 두면 글자 길이가 그대로 패널 폭이 되어 레일 전체가
 * 오른쪽으로 밀려나므로, 기본 단계에서는 .gsu-rail-reports 를 레일과 같은
 * 118px 에 고정한다. 안쪽 여백을 빼면 글자가 쓸 수 있는 폭은 102px 이고,
 * "원리문제풀이 리포트" 9글자는 11px 에 자간을 좁혀야 들어간다.
 * 1480px 이상에서 카드가 230px 로 넓어지면 아래 미디어쿼리에서 폭을 풀고
 * 로그인 박스와 같은 18px 로 키운다.
 */

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

/* 카드 제목은 아래 퀵메뉴 타일(make_img/common/Qmenu04.jpg "사용자 매뉴얼")과
 * 같은 크기로 맞춘다. 그 글자는 이미지에 구워져 있어 CSS 로 알 수 없으므로
 * 픽셀을 재서 값을 얻었다. 글자 폭 92px, 잉크 높이 14px 이고, Malgun Gothic
 * Bold 로 "사용자 매뉴얼" 이 92px 가 되는 크기는 15px 이다. */
#quick_menu .gsu-rail-reports .gsu-rail-head {
	margin-bottom: 6px;
	font-size: 15px;
	color: #121212;
}

#quick_menu .gsu-report-link {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 6px 3px;
	border: 1px solid #2662a8;
	border-radius: 3px;
	background: #2662a8;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
}

#quick_menu .gsu-report-link + .gsu-report-link { margin-top: 6px; }

#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;
}

/* -------------------------------------------------- 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.
 */

@media screen and (min-width: 1480px) {
	/* A white card, not a transparent one: the gutter shows the site's
	 * patterned grey background, which the chart is hard to read against. */
	#quick_menu .gsu-rail-widgets {
		width: 230px;
		box-sizing: border-box;
		border: 1px solid #e3e3e3;
		border-radius: 4px;
		background: #fff;
		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 로 넓어지면 폭 고정을 풀고, 글자도 메인 로그인 박스와 같은
	 * 18px/600 으로 키운다. 안쪽 폭 190px 에 9글자 x 18px 는 여유 있게 한 줄로
	 * 들어간다. 노란 바탕이 카드 흰 배경을 덮도록 폭은 100% 로 둔다. */
	#quick_menu .gsu-rail-reports {
		width: 100%;
		padding: 9px 8px 12px;
	}

	#quick_menu .gsu-rail-reports .gsu-rail-head {
		font-size: 15px;
		margin-bottom: 8px;
	}

	#quick_menu .gsu-report-link {
		padding: 9px 10px;
		font-size: 18px;
		letter-spacing: -0.5px;
	}
}

/* --------------------------------------------------------- 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.
 */

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

	#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; }
}

/* The bottom-bar layout has no room for a chart, and cham/m has its own UI. */
@media screen and (max-width: 1255px) {
	#quick_menu .gsu-rail-widgets { display: none; }
	#quick_menu .gsu-drawer { width: 100%; }
}