/* ============================================================
 * simtech 스킨 헤더 — 전용 스타일 슬롯
 *
 * 기본 스타일은 /assets/css/intro.css (Lovable/Tailwind 컴파일본) 가 책임진다.
 *
 * 이 파일은 simtech 헤더에서만 필요한 추가/오버라이드 규칙을 위한 자리.
 * 예) 레거시 페이지(/edu, /mapia 등)에 simtech 헤더를 얹었을 때
 *     자체 CSS와 충돌하는 부분 보정.
 *
 * 새 규칙을 추가할 때는 #introHeader 또는 .skin-simtech 셀렉터로
 * 스코프를 좁혀 다른 페이지 스타일을 침범하지 않도록 한다.
 * ============================================================ */

/* mapia 페이지(#wrap)의 본문 컨테이너 — classic 은 1200px, simtech 은 1400px 로 확장 */
body.skin-simtech #wrap {
	max-width: 1400px;
}

/* mapia_view 본문 메인 + 사이드바 가로 layout 복원.
   mapia.css 의 `body:not(.edu):not(.skin-simtech) .container { display: flex; ... }` 가
   simtech 일 때 차단되어 사이드바가 아래로 떨어지는 문제 복원.
   실제 구조는 #wrap > #viewcontents > .mapcontent > .container 라 descendant 로 매치. */
body.skin-simtech .mapcontent > .container {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	max-width: 1400px;
	margin: 0 auto;
	gap: 10px;
}

/* /edu 페이지(body.edu) — simtech 일 때 .container 오버라이드.
   - 헤더 내부 .container: padding 좌우 30px, align center
   - 본문 .container: padding-top 80px(fixed 헤더 공간) + 좌우 30px, align flex-start
   specificity 덕분에 헤더 룰(0,0,3,2) > 본문 룰(0,0,3,1) > mapia.css 기본(0,0,2,1) */
body.skin-simtech.edu header .container {
	padding: 0 30px !important;
	align-items: center;
	max-width: 1400px;
	margin: 0 auto;
}

body.skin-simtech.edu .container {
	padding: 80px 30px 0 30px !important;
	align-items: flex-start;
	max-width: 1400px;
	margin: 0 auto;
}

/* /coaching 페이지 본문 래퍼 — simtech 일 때 폭/여백 조정 + background 제거 */
body.skin-simtech .coaching-page-wrap {
	max-width: 1400px;
	margin: 0 auto;
	padding: 80px 30px 0 30px;
	background: none;
}

/* /coop 페이지 본문 래퍼 — simtech 일 때 background 제거, padding 80px 0, full width */
body.skin-simtech .coop-page {
	background: none;
	padding: 80px 0;
	width: 100%;
}

/* /coop 페이지 리스트 그리드 — simtech 일 때 폭/상하 여백 확장 */
body.skin-simtech .coop-list-wrap {
	max-width: 1400px;
	padding: 80px 0;
}

/* mapia.css 의 `section { width:100%; background-color:#fff; }` 중
   simtech 일 때는 width 만 유지하고 margin-top / background-color 무력화. */
body.skin-simtech section {
	margin-top: 0;
	background-color: transparent;
}

/* mapia.css 의 `#menu_se` 룰 중 simtech 에서는 background 제거 + margin-top 85px (auto 대신). */
body.skin-simtech #menu_se {
	background-color: transparent;
	margin-top: 85px;
}

/* mapia.css 의 `#listtitle` 룰 중 simtech 에서는 margin-top 제거. */
body.skin-simtech #listtitle {
	margin-top: 0;
}

/* community 서브메뉴(#menu_se_community > #listtitle) 는 margin-top 85px 부여. */
body.skin-simtech #menu_se_community #listtitle {
	margin-top: 85px;
}

/* mapia.css `#listtitle>a:nth-child(1){color:#0057ff}` 가
   community 메뉴의 첫 링크(공지사항)를 항상 파란색으로 만드는 것을 무력화.
   대신 현재 게시판에 해당하는 .active 만 파란색으로 표시. */
body.skin-simtech #menu_se_community #listtitle > a {
	color: #2f2f2f;
}
body.skin-simtech #menu_se_community #listtitle > a.active {
	color: #0057ff;
	font-weight: 700;
}
body.skin-simtech #menu_se_community #listtitle > a:hover {
	color: #0057ff;
}

/* mapia.css 의 `.main-content { background: white; ... }` 중 simtech 에서는 background 제거. */
body.skin-simtech .main-content {
	background: transparent;
}

/* mapia.css 의 `.recommend-item` 중 simtech 에서는 background 제거. */
body.skin-simtech .recommend-item {
	background: transparent;
}

/* simtech 사이드바 — fixed, main-content 우측 끝(viewport center + 700px) 옆에 20px 여백 두고 고정.
   .container max-width: 1400px, 중앙 정렬 기준. */
body.skin-simtech .sidebar {
	position: fixed;
	left: calc(50% + 720px);
	top: 200px;
	width: 360px;
	max-height: calc(100vh - 220px);
	overflow-y: auto;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	padding: 24px 20px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	z-index: 10;
}

/* Sticky footer — 콘텐츠가 짧아도 footer 가 viewport 하단에 붙도록.
   simtech 헤더의 .min-h-screen 을 flex column 으로 만들고,
   footer 에 margin-top: auto 를 줘서 자동으로 아래쪽으로 밀어낸다. */
body.skin-simtech > .min-h-screen {
	display: flex;
	flex-direction: column;
}
body.skin-simtech > .min-h-screen > footer {
	margin-top: auto;
}

/* =====================================================================
   wiseboard 글쓰기/글수정 폼 — simtech 스킨 전용 스타일
   #wrap.write-form 로 specificity 를 높여 simtech의 #wrap 1400px 룰을 덮어쓴다.
   ===================================================================== */
body.skin-simtech #wrap.write-form,
body.skin-simtech .write-form {
	max-width: 1400px;
	margin: 80px auto 80px;
	padding: 40px 48px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 20px;
	box-shadow: 0 4px 24px -6px rgba(15, 23, 42, 0.06), 0 2px 6px -2px rgba(15, 23, 42, 0.04);
}

body.skin-simtech .write-form h2 {
	margin: 0 0 28px;
	padding: 0 0 16px;
	border-bottom: 1px solid #e5e7eb;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.3px;
	color: #0f172a;
}

body.skin-simtech .write-form form > div,
body.skin-simtech .write-form form > label {
	margin: 0;
}

body.skin-simtech .write-form label {
	display: block;
	margin: 22px 0 8px;
	font-size: 13px;
	font-weight: 700;
	color: #374151;
	letter-spacing: 0.02em;
}

body.skin-simtech .write-form input[type="text"],
body.skin-simtech .write-form input[type="password"],
body.skin-simtech .write-form input[type="email"],
body.skin-simtech .write-form textarea {
	width: 100%;
	padding: 12px 14px;
	font-size: 14px;
	color: #111827;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	font-family: inherit;
}

body.skin-simtech .write-form input[readonly] {
	background: #f9fafb;
	color: #6b7280;
}

body.skin-simtech .write-form input[type="text"]:focus,
body.skin-simtech .write-form input[type="password"]:focus,
body.skin-simtech .write-form input[type="email"]:focus,
body.skin-simtech .write-form textarea:focus {
	outline: 0;
	border-color: #2563eb;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
	background: #fff;
}

body.skin-simtech .write-form textarea {
	min-height: 220px;
	resize: vertical;
	line-height: 1.6;
}

/* 비밀글 체크박스 */
body.skin-simtech .write-form input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: #2563eb;
	vertical-align: middle;
	cursor: pointer;
}

/* 파일 input */
body.skin-simtech .write-form input[type="file"] {
	display: block;
	width: 100%;
	padding: 10px;
	font-size: 13px;
	border: 1px dashed #cbd5e1;
	border-radius: 10px;
	background: #f9fafb;
	cursor: pointer;
}
body.skin-simtech .write-form input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	color: #2563eb;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease;
}
body.skin-simtech .write-form input[type="file"]::file-selector-button:hover {
	background: #dbeafe;
}

body.skin-simtech .write-form small {
	display: block;
	margin-top: 6px;
	color: #6b7280;
	font-size: 12px;
}

/* 파일 선택 미리보기 ul */
body.skin-simtech .write-form #bd_file_preview {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}
body.skin-simtech .write-form #bd_file_preview li {
	padding: 6px 12px;
	background: #f0f9ff;
	border: 1px solid #bae6fd;
	border-radius: 8px;
	margin-bottom: 4px;
	font-size: 13px;
	color: #0c4a6e;
}

/* 기존 첨부파일 ul (modify 페이지) — #bd_file_preview 는 제외 */
body.skin-simtech .write-form > form > div > ul:not(#bd_file_preview) {
	list-style: none;
	padding: 0 !important;
	margin: 0 !important;
	background: #f9fafb !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 10px !important;
	overflow: hidden;
}
body.skin-simtech .write-form > form > div > ul:not(#bd_file_preview) > li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px !important;
	border-bottom: 1px solid #e5e7eb !important;
	background: transparent !important;
}
body.skin-simtech .write-form > form > div > ul:not(#bd_file_preview) > li:last-child {
	border-bottom: 0 !important;
}

/* 버튼 영역 */
body.skin-simtech .write-form button[type="submit"],
body.skin-simtech .write-form .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 28px;
	padding: 12px 28px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
	box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.35);
}
body.skin-simtech .write-form button[type="submit"]:hover,
body.skin-simtech .write-form .btn:not(.btn-cancel):hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -2px rgba(37, 99, 235, 0.45);
}

body.skin-simtech .write-form .btn-cancel,
body.skin-simtech .write-form a.btn-cancel {
	margin-left: 8px;
	color: #475569;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	box-shadow: none;
}
body.skin-simtech .write-form .btn-cancel:hover {
	background: #e2e8f0;
	transform: none;
	box-shadow: none;
}

/* 게시판 메뉴 (#listtitle) 와 폼 사이 여백 보정 */
body.skin-simtech #menu_se_community + .write-form,
body.skin-simtech .write-form {
	margin-top: 60px;
}

/* 모바일 */
@media (max-width: 720px) {
	body.skin-simtech .write-form {
		margin: 30px 12px 40px;
		padding: 24px 18px;
		border-radius: 14px;
	}
	body.skin-simtech .write-form h2 {
		font-size: 22px;
	}
}