/* 게임분석기 회원 기능(F84 4단계 · 2026-10-24) — 내 분석기 줄 · 보조 탭 · 펼침 상자
   베픽 화면 규칙: 탭 줄 7칸(.pk_tab 규격 그대로) · 데이터 줄 흰 바탕 · 빈 상태 480 · 차트는 흐린 팔레트(브랜드 빨강 · 파랑 안 씀) */

/* 선택 칸 왼쪽 흰 줄 방지 — 칸 구분선 색을 채움색과 같게 */
.gm_tools li > a.selected,
.gm_fav li > a.selected {
	border-left-color: #f1e2f6;
}

.gm_fav li > a.gm_fav_on::before {
	content: '★ ';
	color: #d6ad55;
}

.gm_fav li > a.gm_recent {
	color: #666;
}

.gm_fav li > a.gm_star {
	font-weight: 700;
	color: #333;
}

.gm_fav li > a.gm_star.on {
	color: #9025b0;
	background: #f1e2f6;
	border-left-color: #f1e2f6;
}

/* 펼침 상자 */
.gm_panel {
	margin-top: 10px;
	background: #fff;
}

.gm_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 54px;
	padding: 0 16px;
	border-bottom: 1px solid #e5e5e5;
}

.gm_head h2 {
	font-size: 15px;
	font-weight: 700;
	color: #333;
}

.gm_head h2 small {
	margin-left: 8px;
	font-size: 12px;
	font-weight: 400;
	color: #999;
}

.gm_ctrl {
	display: flex;
	align-items: center;
	gap: 6px;
}

.gm_ctrl select {
	height: 30px;
	padding: 0 6px;
	border: 1px solid #d1d1d1;
	background: #fff;
	color: #333;
}

.gm_seg {
	display: inline-flex;
	border: 1px solid #d1d1d1;
	border-radius: 4px;
	overflow: hidden;
}

.gm_seg button {
	height: 28px;
	padding: 0 12px;
	border: 0;
	border-left: 1px solid #d1d1d1;
	background: #fff;
	color: #555;
	cursor: pointer;
}

.gm_seg button:first-child {
	border-left: 0;
}

.gm_seg button.on {
	background: #f1e2f6;
	color: #9025b0;
	font-weight: 700;
}

.gm_body {
	padding: 16px;
}

/* 빈 상태 · 불러오는 중 · 오류 — 480 하나로 */
.gm_null {
	min-height: 480px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	box-sizing: border-box;
	color: #666;
	text-align: center;
	line-height: 1.8;
}

.gm_null strong {
	color: #333;
	font-size: 15px;
}

.gm_btn {
	display: inline-block;
	margin-top: 14px;
	padding: 0 18px;
	line-height: 34px;
	border: 1px solid #d1d1d1;
	border-radius: 4px;
	background: #fff;
	color: #333;
	cursor: pointer;
}

.gm_btn:hover {
	border-color: #888;
}

.gm_btn.main {
	border-color: #9025b0;
	color: #9025b0;
	font-weight: 700;
}

/* 요약 카드 */
.gm_cards {
	display: flex;
	gap: 10px;
}

.gm_card {
	flex: 1;
	padding: 12px 14px;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	background: #fff;
}

.gm_card dt {
	font-size: 12px;
	color: #888;
}

.gm_card dd {
	margin-top: 6px;
	font-size: 20px;
	font-weight: 700;
	color: #2f3743;
}

.gm_card dd small {
	margin-left: 4px;
	font-size: 12px;
	font-weight: 400;
	color: #888;
}

.gm_sub {
	margin-top: 14px;
	font-size: 13px;
	color: #555;
}

.gm_sub b {
	color: #2f3743;
}

/* 최근 흐름(작은 막대) — 적중 세이지 · 미적중 회색 · 적특 모래 · 미판정 점선 */
.gm_flow {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	margin-top: 8px;
	height: 26px;
}

.gm_flow i {
	display: inline-block;
	width: 14px;
	height: 22px;
	border-radius: 2px;
	background: #d5d9df;
}

.gm_flow i.w {
	height: 26px;
	background: #9dbf93;
}

.gm_flow i.l {
	height: 14px;
	background: #d5d9df;
}

.gm_flow i.r {
	height: 18px;
	background: #d6ad55;
}

.gm_flow i.p {
	height: 22px;
	background: #fff;
	border: 1px dashed #c7ccd3;
	box-sizing: border-box;
}

.gm_legend {
	margin-top: 6px;
	font-size: 11px;
	color: #888;
}

.gm_legend em {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 3px 0 10px;
	border-radius: 2px;
	vertical-align: -1px;
}

/* 표 — 데이터 줄 흰 바탕 · 열 이름 줄만 #fafafa */
.gm_tbl {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
}

.gm_tbl th {
	height: 36px;
	background: #fafafa;
	border-bottom: 1px solid #e5e5e5;
	font-weight: 400;
	color: #666;
}

.gm_tbl td {
	height: 40px;
	border-bottom: 1px solid #efefef;
	text-align: center;
	color: #333;
	background: #fff;
}

.gm_tbl td.l {
	text-align: left;
	padding-left: 12px;
}

.gm_tbl td .icon_level {
	margin-right: 4px;
}

.gm_tbl tr.me td:first-child {
	box-shadow: inset 3px 0 0 #9025b0;
}

.gm_note {
	margin-top: 10px;
	font-size: 12px;
	color: #999;
}

/* 비교 분석 — 두 칸 나란히 */
.gm_cmp {
	display: flex;
	gap: 16px;
}

.gm_cmp_side {
	flex: 1;
	min-width: 0;
}

.gm_cmp_side h3 {
	font-size: 14px;
	font-weight: 700;
	color: #2f3743;
}

.gm_cmp_side h3 small {
	margin-left: 6px;
	font-weight: 400;
	color: #999;
}

.gm_cmp_pick {
	display: flex;
	gap: 6px;
	margin: 8px 0 12px;
}

.gm_cmp_pick select {
	height: 30px;
	border: 1px solid #d1d1d1;
	background: #fff;
}

.gm_cmp_pick select:first-child {
	flex: 1;
	min-width: 0;
}

.gm_fd {
	margin-bottom: 12px;
}

.gm_fd p {
	margin-bottom: 4px;
	font-size: 12px;
	color: #666;
}

.gm_bar {
	display: flex;
	height: 26px;
	border-radius: 4px;
	overflow: hidden;
	background: #e6e9ed;
}

.gm_bar span {
	display: block;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 26px;
	font-size: 11px;
	text-align: center;
	color: #2f3743;
}

.gm_c1 { background: #e8957f; }
.gm_c2 { background: #86aacb; }
.gm_c3 { background: #9dbf93; }
.gm_c4 { background: #d6ad55; }
.gm_c5 { background: #a3c2dd; }
.gm_c6 { background: #d5d9df; }
.gm_c7 { background: #c7b8d8; }
.gm_c8 { background: #b9c7a5; }
.gm_c9 { background: #e6c9a8; }

/* 패턴 알림 */
.gm_form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 12px;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	background: #fafafa;
}

.gm_form select {
	height: 30px;
	border: 1px solid #d1d1d1;
	background: #fff;
}

.gm_form .gm_btn {
	margin-top: 0;
	line-height: 28px;
}

.gm_tbl .gm_mini {
	padding: 0 10px;
	line-height: 26px;
	border: 1px solid #d1d1d1;
	border-radius: 4px;
	background: #fff;
	color: #555;
	cursor: pointer;
}

.gm_tbl .gm_mini.on {
	border-color: #9dbf93;
	color: #4f7a45;
}

.gm_warn {
	margin-top: 10px;
	padding: 10px 12px;
	border: 1px solid #ecd9a8;
	border-radius: 4px;
	background: #fffaf0;
	font-size: 12px;
	color: #8a6a1f;
}

.gm_toast {
	position: fixed;
	left: 50%;
	bottom: 30px;
	z-index: 1000;
	transform: translateX(-50%);
	padding: 10px 18px;
	border-radius: 6px;
	background: #191f28;
	color: #fff;
	font-size: 13px;
}