/* ===========================================================================
 * 스터디그룹 — CL-0122
 * ===========================================================================
 *
 * 이 화면들은 2018 년 그대로라 초록(#00a820) 갈피와 각진 표를 쓰고 있었다.
 * 나머지 화면은 CL-0038 이후 --gsu-* 팔레트와 둥근 판으로 옮겼으므로, 여기도
 * 같은 규칙을 따르게 한다. 마이페이지(mypage-modern.css)와 같은 방식이다 -
 * 바깥 상자에 이름표(.gsu-studygroup)를 하나 달고, 그 안에서만 덮어쓴다.
 *
 * 쓰는 화면
 *   cham/sub08/sub01.php   내가 개설한 방관리
 *   cham/sub08/sub02.php   가입된 스터디 방 목록
 *   cham/sub08/sub03.php   전체(이름순) - 관리자 전용
 *   cham/sub08/sub04.php   이벤트 방 목록
 *   cham/center/studygroup.php  학원 관리자의 이벤트 방
 *   head.bbs3.php          전체 스터디 방 목록(게시판 화면)
 *
 * 색은 하나도 직접 적지 않는다. 전부 팔레트 이름(--gsu-*)으로 쓰므로 스킨을
 * 바꾸면 이 화면도 따라간다. original 스킨에서는 팔레트가 없으므로, 색이
 * 필요한 자리마다 var(--이름, 예전값) 으로 예전 값을 뒤에 적어 둔다.
 * ======================================================================== */

/* --------------------------------------------------------------- 갈피줄 -
 * 예전에는 lnb.php 안의 <style> 이 li 마다 249.5px / 332.6px 를 직접 박아
 * 두었다. 갈피가 넷에서 다섯으로 늘면 그 수를 또 고쳐야 한다. flex 로 두면
 * 갈피 수가 몇이든 고르게 나뉜다. */
.gsu-studygroup .result-tabmenu {
	display: flex;
	overflow: visible;
	margin: 20px 0 0;
	padding: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--gsu-line, #cdcdcd);
	list-style: none;
}

.gsu-studygroup .result-tabmenu li {
	flex: 1 1 0;
	float: none;
	width: auto !important;
	height: auto;
	min-width: 0;
}

/* width 를 다시 적는 까닭: 옛 규칙(sub.css/common.css)이 이 a 에 고정 폭을
 * 준다. li 를 flex 로 고르게 나눠 놔도 안쪽 a 가 제 폭을 고집하면 첫 갈피가
 * 넘쳐서 옆 갈피를 덮는다 - "전체 스터디 방 목록"이 사라져 보이던 것이
 * 그것이다. */
.gsu-studygroup .result-tabmenu li a {
	display: block;
	width: 100%;
	height: auto;
	padding: 13px 8px;
	border: 1px solid var(--gsu-line, #cdcdcd);
	border-bottom: 0;
	border-radius: var(--gsu-radius, 10px) var(--gsu-radius, 10px) 0 0;
	margin-left: -1px;               /* 이웃한 갈피끼리 테두리를 겹쳐 한 줄로 */
	background: var(--gsu-surface, #fff);
	color: var(--gsu-ink-2, #615a4d);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-shadow: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-sizing: border-box;
}

.gsu-studygroup .result-tabmenu li:first-child a { margin-left: 0; }

.gsu-studygroup .result-tabmenu li a:hover {
	background: var(--gsu-accent-soft, #eef3f8);
	border-color: var(--gsu-accent-line, #b9cbdd);
	color: var(--gsu-accent, #2662a8);
}

.gsu-studygroup .result-tabmenu li a.on {
	background: var(--gsu-accent, #2662a8);
	border-color: var(--gsu-accent, #2662a8);
	color: var(--gsu-on-accent, #fff);
	position: relative;
	z-index: 1;                      /* 겹쳐 놓은 테두리 위로 올라오게 */
}

/* ------------------------------------------------------------------ 판 -
 * 사이트의 다른 화면과 같은 둥근 흰 판. 갈피 바로 아래에 붙으므로 위쪽
 * 모서리는 둥글리지 않는다 - 갈피줄이 이미 그 자리를 맡고 있다. */
.gsu-studygroup .gsu-sg-panel {
	margin: 0 0 24px;
	padding: 24px 26px;
	background: var(--gsu-surface, #fff);
	border: 1px solid var(--gsu-line, #cdcdcd);
	border-top: 0;
	border-radius: 0 0 var(--gsu-radius, 10px) var(--gsu-radius, 10px);
}

/* 판이 여러 장 이어지는 화면(학원 관리자 화면)에서는 두 번째 판부터
 * 네 모서리를 모두 둥글린다 - 위에 갈피줄이 없기 때문이다. */
.gsu-studygroup .gsu-sg-panel + .gsu-sg-panel {
	border-top: 1px solid var(--gsu-line, #cdcdcd);
	border-radius: var(--gsu-radius, 10px);
}

.gsu-studygroup .gsu-sg-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.gsu-studygroup .gsu-sg-title,
.gsu-studygroup .title-contents {
	margin: 0;
	color: var(--gsu-ink, #4c493e);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.gsu-studygroup .gsu-sg-subtitle {
	margin: 0 0 4px;
	color: var(--gsu-ink, #4c493e);
	font-size: 18px;
	font-weight: 700;
}

.gsu-studygroup .gsu-sg-note {
	margin: 0 0 18px;
	color: var(--gsu-ink-2, #615a4d);
	font-size: 14px;
	line-height: 1.7;
}

.gsu-studygroup .gsu-sg-msg {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-left: 4px solid var(--gsu-accent, #2662a8);
	background: var(--gsu-accent-soft, #eef3f8);
	border-radius: 0 6px 6px 0;
	color: var(--gsu-ink, #4c493e);
	font-size: 14px;
}

/* ----------------------------------------------------------------- 표 -
 * 테두리를 칸마다 두르는 대신 가로줄 하나로 나눈다. 사이트의 다른 목록표
 * (mypage-modern.css)와 같은 차림이다. */
.gsu-studygroup .gsu-sg-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--gsu-line, #cdcdcd);
	border-radius: var(--gsu-radius, 10px);
}

.gsu-studygroup .gsu-sg-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.gsu-studygroup .gsu-sg-table th,
.gsu-studygroup .gsu-sg-table td {
	padding: 13px 14px;
	border-bottom: 1px solid var(--gsu-line, #e7e3d8);
	text-align: center;
	vertical-align: middle;
	color: var(--gsu-ink, #4c493e);
}

.gsu-studygroup .gsu-sg-table thead th {
	background: var(--gsu-accent-soft, #eef3f8);
	color: var(--gsu-accent-deep, #294b6e);
	font-weight: 700;
	white-space: nowrap;
}

.gsu-studygroup .gsu-sg-table tbody tr:last-child th,
.gsu-studygroup .gsu-sg-table tbody tr:last-child td { border-bottom: 0; }

.gsu-studygroup .gsu-sg-table tbody tr:hover td { background: var(--gsu-accent-soft, #f6f8fc); }

.gsu-studygroup .gsu-sg-subject { text-align: left; }

.gsu-studygroup .gsu-sg-subject a {
	color: var(--gsu-ink, #4c493e);
	font-weight: 600;
	text-decoration: none;
}
.gsu-studygroup .gsu-sg-subject a:hover {
	color: var(--gsu-accent, #2662a8);
	text-decoration: underline;
}

.gsu-studygroup .gsu-sg-empty {
	padding: 40px 0;
	color: var(--gsu-ink-2, #615a4d);
	font-size: 15px;
}

/* ----------------------------------------------------------- 단추·딱지 */
.gsu-studygroup .gsu-sg-btn {
	display: inline-block;
	padding: 9px 16px;
	border: 1px solid var(--gsu-accent, #2662a8);
	border-radius: 6px;
	background: var(--gsu-accent, #2662a8);
	color: var(--gsu-on-accent, #fff);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.gsu-studygroup .gsu-sg-btn:hover { background: var(--gsu-accent-deep, #294b6e); border-color: var(--gsu-accent-deep, #294b6e); }

/* 지우기처럼 되돌릴 수 없는 일은 앞으로 나서지 않게 둔다. */
.gsu-studygroup .gsu-sg-btn.is-quiet {
	background: var(--gsu-surface, #fff);
	border-color: var(--gsu-line, #cdcdcd);
	color: var(--gsu-ink-2, #615a4d);
	font-weight: 600;
}
.gsu-studygroup .gsu-sg-btn.is-quiet:hover {
	background: var(--gsu-accent-soft, #eef3f8);
	border-color: var(--gsu-accent-line, #b9cbdd);
	color: var(--gsu-accent, #2662a8);
}

.gsu-studygroup .gsu-sg-chip {
	display: inline-block;
	min-width: 88px;
	padding: 7px 12px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.gsu-studygroup .gsu-sg-chip.is-go {
	background: var(--gsu-accent, #2662a8);
	border-color: var(--gsu-accent, #2662a8);
	color: var(--gsu-on-accent, #fff);
	cursor: pointer;
}
.gsu-studygroup .gsu-sg-chip.is-go:hover { background: var(--gsu-accent-deep, #294b6e); }

/* 이미 참여 중 / 기다리는 중은 누를 것이 없으므로 단추처럼 보이지 않게
 * 테두리만 남긴다. 색을 흐리게 하는 대신 모양으로 가른다. */
.gsu-studygroup .gsu-sg-chip.is-in {
	background: var(--gsu-accent-soft, #eef3f8);
	border-color: var(--gsu-accent-line, #b9cbdd);
	color: var(--gsu-accent-deep, #294b6e);
}
.gsu-studygroup .gsu-sg-chip.is-wait {
	background: var(--gsu-surface, #fff);
	border-color: var(--gsu-line, #cdcdcd);
	border-style: dashed;
	color: var(--gsu-ink-2, #615a4d);
}

/* ----------------------------------------------------------------- 서식 */
.gsu-studygroup .gsu-sg-form {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 20px;
	margin: 0;
}

.gsu-studygroup .gsu-sg-field {
	flex: 0 0 calc(50% - 10px);
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.gsu-studygroup .gsu-sg-field-wide { flex: 0 0 100%; }

.gsu-studygroup .gsu-sg-field label {
	color: var(--gsu-ink-2, #615a4d);
	font-size: 14px;
	font-weight: 700;
}

.gsu-studygroup .gsu-sg-field input[type="text"],
.gsu-studygroup .gsu-sg-field select,
.gsu-studygroup .gsu-sg-field textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--gsu-line, #cdcdcd);
	border-radius: 6px;
	background: var(--gsu-surface, #fff);
	color: var(--gsu-ink, #4c493e);
	font-family: inherit;
	font-size: 15px;
}

.gsu-studygroup .gsu-sg-field textarea { resize: vertical; line-height: 1.6; }

.gsu-studygroup .gsu-sg-field input[type="text"]:focus,
.gsu-studygroup .gsu-sg-field select:focus,
.gsu-studygroup .gsu-sg-field textarea:focus {
	border-color: var(--gsu-accent, #2662a8);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(var(--gsu-accent-rgb, 38, 98, 168), .18);
}

.gsu-studygroup .gsu-sg-actions {
	flex: 0 0 100%;
	display: flex;
	justify-content: flex-end;
}

/* ------------------------------------------------- 옛 화면 손보기 -
 * sub01/sub02/sub03 과 게시판 목록은 아직 2018 년 표(.wTable, .layer-table06)
 * 를 쓴다. 그 표들까지 새로 짜는 것은 이번 일의 범위가 아니므로, 눈에 띄게
 * 어긋나는 것만 - 초록색과 각진 모서리 - 맞춰 둔다. */
.gsu-studygroup .layer-table06 {
	padding-top: 24px !important;
}

.gsu-studygroup .wTable {
	border-collapse: collapse;
	font-size: 15px;
}

.gsu-studygroup .wTable th,
.gsu-studygroup .wTable td {
	padding: 12px 10px;
	border: 0;
	border-bottom: 1px solid var(--gsu-line, #e7e3d8);
	color: var(--gsu-ink, #4c493e);
}

.gsu-studygroup .wTable thead th {
	background: var(--gsu-accent-soft, #eef3f8);
	color: var(--gsu-accent-deep, #294b6e);
	font-weight: 700;
}

.gsu-studygroup .wTable thead th.color_cyan { color: var(--gsu-accent, #2662a8); }

.gsu-studygroup .wTable tr:hover td { background: var(--gsu-accent-soft, #f6f8fc) !important; }

.gsu-studygroup a.btn_b01 {
	padding: 8px 14px !important;
	border: 1px solid var(--gsu-line, #cdcdcd) !important;
	border-radius: 6px;
	background: var(--gsu-surface, #fff) !important;
	color: var(--gsu-ink-2, #615a4d) !important;
	font-weight: 600;
}
.gsu-studygroup a.btn_b01:hover {
	background: var(--gsu-accent-soft, #eef3f8) !important;
	border-color: var(--gsu-accent-line, #b9cbdd) !important;
	color: var(--gsu-accent, #2662a8) !important;
}

/* ------------------------------------------------ 게시판 목록의 단추들 -
 * "전체 스터디 방 목록"은 그누보드 게시판 화면(skin/board/interest)이라
 * 위 규칙이 닿지 않는 자리가 몇 군데 남는다. 세 가지를 맞춘다. */

/* 1) "가입신청". 글자가 아니라 그림(study_ok.png)이었다. 줄 높이에 걸려
 *    위가 잘려 나오고, 스킨 색이 바뀌어도 그림은 파란색 그대로다.
 *    그림을 감추고 같은 자리에 글자 딱지를 세운다.
 *
 *    href 로 시작하는 것만 짚는 까닭: 이 스킨은 studyIns() 를 세 군데에서
 *    부른다. 방 제목과 그림은 <a href="#none" onClick="studyIns(...)"> 이고,
 *    진짜 단추만 <a href="javascript:studyIns(...)"> 다. onclick 까지 같이
 *    짚었더니 방 제목과 그림에도 딱지가 씌워져 제목 뒤에 "가입 신청"이
 *    덧붙고 nowrap 때문에 판 밖으로 삐져나갔다. */
.gsu-studygroup a[href^="javascript:studyIns"] img { display: none; }

.gsu-studygroup a[href^="javascript:studyIns"] {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--gsu-accent, #2662a8);
	border-radius: 999px;
	background: var(--gsu-accent, #2662a8);
	color: var(--gsu-on-accent, #fff);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.gsu-studygroup a[href^="javascript:studyIns"]:hover {
	background: var(--gsu-accent-deep, #294b6e);
	border-color: var(--gsu-accent-deep, #294b6e);
}

.gsu-studygroup a[href^="javascript:studyIns"]::after { content: "가입 신청"; }

/* 2) "방만들기". default.css:187 의 a.btn_b02 가 숯빛(#4b545e)이라 팔레트
 *    밖이다. 마이페이지가 같은 단추를 고친 방식(mypage-modern.css:486)을
 *    그대로 따른다. */
.gsu-studygroup .btn_bo_user a.btn_b02,
.gsu-studygroup a.btn_b02 {
	padding: 9px 18px;
	border: 1px solid var(--gsu-accent, #2662a8);
	border-radius: 6px;
	background: var(--gsu-accent, #2662a8);
	color: var(--gsu-on-accent, #fff);
	font-weight: 700;
	line-height: 1.2;
}
.gsu-studygroup .btn_bo_user a.btn_b02:hover,
.gsu-studygroup a.btn_b02:hover {
	background: var(--gsu-accent-deep, #294b6e);
	border-color: var(--gsu-accent-deep, #294b6e);
	color: var(--gsu-on-accent, #fff);
}

.gsu-studygroup .btn_bo_user {
	margin: 18px 0 0;
	padding: 0;
	text-align: right;
	list-style: none;
}
.gsu-studygroup .btn_bo_user li { display: inline-block; margin-left: 6px; }

/* 3) 쪽 번호. default.css:295-300 은 지금 쪽을 새까만(#333) 네모로, 나머지를
 *    흐린 하늘색(#e4eaec) 네모로 칠한다. 둘 다 팔레트 밖이다. */
.gsu-studygroup .pg_page,
.gsu-studygroup .pg_current {
	height: auto;
	min-width: 34px;
	margin: 0 3px;
	padding: 8px 10px;
	border: 1px solid var(--gsu-line, #cdcdcd);
	border-radius: 6px;
	box-sizing: border-box;
	line-height: 1.2;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	vertical-align: middle;
}

.gsu-studygroup .pg_page {
	background: var(--gsu-surface, #fff);
	color: var(--gsu-ink-2, #615a4d);
}
.gsu-studygroup .pg_page:hover {
	background: var(--gsu-accent-soft, #eef3f8);
	border-color: var(--gsu-accent-line, #b9cbdd);
	color: var(--gsu-accent, #2662a8);
}

.gsu-studygroup .pg_current {
	background: var(--gsu-accent, #2662a8);
	border-color: var(--gsu-accent, #2662a8);
	color: var(--gsu-on-accent, #fff);
}

.gsu-studygroup .pg_wrap { margin: 26px 0 10px; text-align: center; }