@charset "utf-8";
/* ============================================================
   대상 : 로그인·회원가입·비밀번호찾기 등 인증 화면 (/login 등)
   출처 : simple 테마 overrides/auth.css 를 가져와 KTDI 색으로 치환
   이유 : 인증 화면은 테마 무관 공유 템플릿(auth-* 클래스)을 쓰는데
          KTDI 테마엔 그 클래스 정의가 없어 화면이 깨졌다(카드·필드 레이아웃 없음).
          auth-nav.css 는 이름만 auth 일 뿐 auth-* 를 정의하지 않는다.
   변경 : simple 주색 #0076ff → KTDI --main-color #344DCF 계열로 치환.
          그 외 회색·상태색은 그대로 둔다(중립색이라 테마 무관).
   ⚠ 제품 auth 템플릿이 바뀌면 클래스가 어긋날 수 있다 → 로그인/회원가입 화면 재확인.
   ============================================================ */


/* 카드 컨테이너 */
.auth-wrap {
	max-width: 600px;
	margin: 4rem auto 6rem;
	padding: 0 1rem;
}
.auth-wrap.auth-wide { max-width: 640px; }

.auth-card {
	background: #fff;
	border: 1px solid #edf0f5;
	border-radius: 18px;
	padding: 3rem 2.8rem 2.6rem;
	box-shadow: 0 20px 50px rgba(45, 52, 86, 0.10);
}

.auth-title {
	font-size: 1.75rem;
	font-weight: 800;
	color: #1a1f36;
	margin: 0 0 0.45rem;
	text-align: center; 
	letter-spacing: -0.02em;
}

/* 스크린리더 전용(라벨 숨김) */
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 아이콘 붙은 입력 필드 (로그인 등) */
.auth-form .auth-field { position: relative; }
.auth-form .auth-field .auth-field-ic {
	position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%);
	color: #9aa2b1; font-size: 1.25rem; pointer-events: none;
}
.auth-form .auth-field input {
	height: 52px; border-radius: 8px; padding-left: 2.7rem !important;
}
.auth-form .auth-field input[type="password"],
.auth-form .auth-field:has(.auth-pw-toggle) input { padding-right: 2.7rem; }
.auth-pw-toggle {
	position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
	border: 0; background: none; color: #9aa2b1; font-size: 1.3rem;
	cursor: pointer; padding: 0.25rem; line-height: 1;
}
.auth-pw-toggle:hover { color: #5f697e; }
.auth-sub {
	color: #8a90a0;
	font-size: 0.92rem;
	text-align: center;
	margin: 0 0 2rem;
}

/* 폼 */
.auth-form .form-row {
	margin-bottom: 1rem;
}
.auth-form label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.9rem;
	color: #333;
	font-weight: 500;
}
.auth-form label .req { color: #d32f2f; }
.auth-form label .opt { color: #999; font-weight: normal; font-size: 0.85rem; }

/* 🔴 입력 타입을 열거하는 선택자다 — 새 타입을 쓰면 여기 빠져 그 칸만 브라우저 기본 모양이 된다.
   실제로 회원가입 전화번호(type="tel")가 누락돼 폭·테두리가 혼자 달랐다. */
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="tel"],
.auth-form input[type="number"],
.auth-form input[type="date"],
.auth-form select,
.auth-form textarea {
	width: 100%;
	padding: 0.65rem 0.8rem;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	font-size: 0.95rem;
	color: #222;
	background: #fff;
	box-sizing: border-box;
}
.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
	outline: none;
	border-color: #344DCF;
	box-shadow: 0 0 0 3px rgba(0,118,255,0.1);
}
/* select 커스텀 화살표 복원 — 위 background:#fff 가 공통 select 의 화살표(background-image)를 덮어써서 재지정.
   (reset.css 가 네이티브 화살표를 제거하므로 SVG 화살표 필수) */
.auth-form select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2rem;
	/* 파일(select_arrow.svg)이 테마에 없어 404 였다(2026-11-10) → 같은 모양을 data URI 로 (CSP img-src 에 data: 허용) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23666' stroke-width='2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
	background-size: 18px;
	cursor: pointer;
}

/* input 옆 버튼 (중복확인, 인증코드 발송 등) */
.auth-form .input-group {
	display: flex;
	gap: 0.4rem;
}
.auth-form .input-group input { flex: 1; }

.auth-form .form-help {
	margin-top: 0.4rem;
	font-size: 0.82rem;
	line-height: 1.45;
	color: #8a90a0;
}
.auth-form .form-help.is-error   { color: #d32f2f; font-weight: 500; }
.auth-form .form-help.is-success { color: #2e7d32; font-weight: 500; }

/* 이메일 인증코드 입력 — 강조 패널 (가입/비번찾기) */
.auth-verify-box {
	padding: 1.2rem 1.3rem !important;
	background: #f2f7ff;
	border: 1px solid #d7e4fb;
	border-radius: 12px;
}
.auth-verify-box > label {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	color: #1a1f36;
	font-weight: 700;
}
.auth-verify-box > label .material-symbols-outlined {
	font-size: 1.15rem;
	color: var(--main-color, #2e9fff);
}
.auth-verify-desc {
	margin: 0.1rem 0 0.7rem;
	font-size: 0.85rem;
	color: #6b7280;
}
.auth-verify-box .auth-verify-input {
	text-align: center;
	letter-spacing: 0.35em;
	font-size: 1.15rem !important;
	font-weight: 700;
}
.auth-verify-box .auth-verify-input::placeholder {
	letter-spacing: 0.25em;
	font-weight: 400;
	color: #c3c9d4;
}

/* 버튼 */
.auth-btn {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	border: 1px solid transparent;
	border-radius: 4px;
	font-size: 0.95rem;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	font-weight: 500;
	transition: background-color 0.15s, color 0.15s;
}
.auth-btn-primary  { background: #344DCF; color: #fff; }
.auth-btn-primary:hover { background: #005ec8; }
.auth-btn-outline  { background: #fff; color: #344DCF; border-color: #344DCF; }
.auth-btn-outline:hover { background: #f0f7ff; }
.auth-btn-secondary{ background: #f5f5f5; color: #333; border-color: #d1d5db; }
.auth-btn-secondary:hover { background: #e5e7eb; }
.auth-btn-danger   { background: #fff; color: #d32f2f; border-color: #d32f2f; }
.auth-btn-danger:hover { background: #fef0f0; }
.auth-btn-full     { display: block; width: 100%; }

.auth-actions {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 1.5rem;
}
.auth-actions.auth-actions-stack {
	flex-direction: column;
	gap: 0.6rem;
}

/* 알림 박스 */
.auth-alert {
	padding: 0.7rem 0.9rem;
	border-radius: 4px;
	font-size: 0.88rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
}
.auth-alert.is-info    { background: #e3f2fd; color: #1565c0; border-color: #bbdefb; }
.auth-alert.is-warn    { background: #fff8e1; color: #b45309; border-color: #fde68a; }
.auth-alert.is-danger  { background: #fde8e8; color: #c62828; border-color: #f8b9b9; }
.auth-alert.is-success { background: #e8f5e9; color: #2e7d32; border-color: #c8e6c9; }

/* 푸터 링크 (회원가입 안내, 비번찾기 등) */
.auth-foot {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3rem 0.9rem;
	text-align: center;
	font-size: 0.88rem;
	color: #9aa0ad;
	margin-top: 1.8rem;
	padding-top: 1.5rem;
	border-top: 1px solid #eef0f4;
}
.auth-foot span{
	width: 100%;
}
.auth-foot a {
	color: #5f697e;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
}
.auth-foot a:hover { color: #344DCF; text-decoration: underline; }

/* 소셜 로그인 — 구분선 + provider 별 버튼
   🔴 2026-09-06 수정 — 그전에는 .auth-social-btn 하나에 네이버 초록·'N' 배지를 박아 두어
      구글 버튼까지 네이버처럼 보였다. 제품 템플릿이 버튼에 provider 구분 class 를 안 붙이기 때문이다.
      → login.html 에 data-provider(=rid) 를 심고, 색·로고를 provider 규칙으로 분리했다.
      base 는 레이아웃과 미등록 provider 폴백(중립 흰 버튼)만 맡는다. */
.auth-social-divider {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 1.6rem 0 1rem;
	color: #aab0bd;
	font-size: 0.85rem;
}
.auth-social-divider::before,
.auth-social-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #eceef2;
}
.auth-social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.85rem;
	margin-bottom: 0.5rem;
	border: 1px solid #dadce0;
	border-radius: 8px;
	background: #fff;
	color: #1f1f1f;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: filter 0.15s ease;
}
.auth-social-btn:hover { filter: brightness(0.96); }
/* 로고·배지 자리 — 크기와 정렬만 공통. 내용(content/background-image)은 provider 규칙에서 채운다. */
.auth-social-btn::before {
	content: '';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 4px;
	font-weight: 800;
	font-size: 0.8rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* 네이버 — 브랜드 그린 + N 배지 (기존 모양 유지) */
.auth-social-btn[data-provider="naver"] {
	background: #03c75a;
	border-color: #03c75a;
	color: #fff;
}
.auth-social-btn[data-provider="naver"]::before {
	content: 'N';
	background-color: rgba(255, 255, 255, 0.22);
}

/* 구글 — 흰 버튼 + 4색 G 마크 (구글 브랜드 가이드: 흰 배경 + #747775 테두리).
   🔴 CDN 금지 규약 — 로고는 외부에서 불러오지 않고 인라인 SVG(data-URI) 로 심는다.
      SVG 안의 색상 '#' 은 CSS url() 에서 %23 으로 인코딩해야 한다(안 하면 경로가 끊긴다). */
.auth-social-btn[data-provider="google"] {
	background: #fff;
	/* border-color: #747775; */
	color: #1f1f1f;
}
.auth-social-btn[data-provider="google"]::before {
	border-radius: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24s.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E");
}

/* 카카오 — 현재 관리자에 등록돼 있지 않지만(t_social_config 에 구글·네이버뿐),
   켜는 순간 바로 브랜드 색이 붙도록 미리 둔다. */
.auth-social-btn[data-provider="kakao"] {
	background: #fee500;
	border-color: #fee500;
	color: rgba(0, 0, 0, 0.85);
}
/* 2026-10-20 'K' 글자 배지 → 카카오 가이드의 말풍선 심볼(검정). 구글과 같은 인라인 SVG 방식 */
.auth-social-btn[data-provider="kakao"]::before {
	border-radius: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3C6.48 3 2 6.48 2 10.8c0 2.78 1.86 5.22 4.66 6.6l-.95 3.48c-.08.3.26.54.52.37l4.13-2.73c.53.06 1.08.1 1.64.1 5.52 0 10-3.48 10-7.82S17.52 3 12 3z'/%3E%3C/svg%3E");
}

/* 약관 동의 */
.auth-section-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1.8rem 0 0.9rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: #1a1f36;
	letter-spacing: -0.01em;
}
.auth-section-title::before {
	content: '';
	width: 3px;
	height: 1.05rem;
	border-radius: 2px;
	background: var(--main-color, #4f7bff);
}

/* 🔴 KTDI 추가 (2026-09-04) — 약관 전체 동의 바.
   약관이 4종이라 하나씩 누르게 두면 이탈 지점이 된다. 개별 항목보다 시각적으로 한 단계 위로
   보이게 진하게(주색 테두리 + 굵은 글씨) 처리해 '묶음' 임을 드러낸다. */
.auth-terms-all {
	margin-bottom: 0.9rem;
	padding: 1rem 1.1rem;
	border: 1.5px solid var(--main-color, #4f7bff);
	border-radius: 10px;
	background: #f7f9ff;
}
.auth-terms-all label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	cursor: pointer;
	margin: 0;
}
/* 체크박스 모양은 개별 약관과 동일하게 — 별도 정의 없이 같은 규칙을 재사용한다 */
.auth-terms-all label input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--main-color, #4f7bff);
}
.auth-terms-all .terms-all-txt {
	font-size: 1.02rem;
	font-weight: 700;
	color: #23283a;
}
.auth-terms-all .terms-all-desc {
	margin: 0.45rem 0 0 1.6rem;
	font-size: 0.86rem;
	color: #6b7280;
	line-height: 1.5;
}

.auth-terms-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 0.6rem;
	padding: 0.9rem 1rem;
	border: 1px solid #e8ebf1;
	border-radius: 10px;
	background: #fbfcfe;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.auth-terms-item:hover {
	border-color: #d4dbf5;
	background: #fff;
	box-shadow: 0 3px 10px rgba(45, 52, 86, 0.05);
}
.auth-terms-item label {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 0.55rem;
	cursor: pointer;
	margin: 0;
	font-weight: 500;
	color: #2b3040;
	font-size: 0.95rem;
}
/* 체크박스 — common.css .checkbox 스타일(원형 + Material 체크 글리프)을 약관 체크박스에 적용 */
.auth-terms-item label input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 100%;
	background-color: var(--grayLight, #e7eaf0);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease;
}
.auth-terms-item label input[type="checkbox"]::before {
	content: "\e5ca";                        /* check — Material Symbols */
	font-family: "Material Symbols Outlined";
	font-size: 18px;
	font-weight: 600;
	color: var(--gray, #989898);
}
.auth-terms-item label input[type="checkbox"]:checked {
	background-color: var(--input-color, #2e9fff);
}
.auth-terms-item label input[type="checkbox"]:checked::before {
	color: #fff;
}
/* [필수]/[선택] 배지 — pill */
.auth-terms-item .terms-tag-req,
.auth-terms-item .terms-tag-opt {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
}
.auth-terms-item .terms-tag-req {
	color: #d32f2f;
	background: #fdecec;
}
.auth-terms-item .terms-tag-opt {
	color: #6b7280;
	background: #eef0f4;
}
/* details 박스는 flex 흐름에서 사라지고, summary·내용이 부모(item)의 flex 아이템으로 참여
   → summary 는 오른쪽 자리 그대로, 내용만 전체 폭으로 아래에 펼쳐짐 */
.auth-terms-item details {
	display: contents;
}
.auth-terms-item details summary {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: auto;          /* 라벨 오른쪽 끝으로 */
	cursor: pointer;
	font-size: 0.82rem;
	color: #8a90a0;
	list-style: none;
	user-select: none;
	transition: color 0.15s ease;
}
.auth-terms-item details summary::-webkit-details-marker { display: none; }
.auth-terms-item details summary .material-symbols-outlined {
	font-size: 1.15rem;
	line-height: 1;
	transition: transform 0.2s ease;
}
.auth-terms-item details[open] summary .material-symbols-outlined { transform: rotate(180deg); }
.auth-terms-item details summary:hover { color: var(--main-color, #4f7bff); }
.auth-terms-item details .terms-content {
	flex-basis: 100%;
	width: 100%;
	max-height: 200px;
	overflow: auto;
	border: 1px solid #e8ebf1;
	border-radius: 8px;
	background: #fff;
	padding: 0.8rem;
	margin-top: 0.7rem;
	font-size: 0.82rem;
	line-height: 1.6;
	color: #4b5162;
}

/* 모바일 — 전역 @900 규칙 `input{width:99%!important}` 이 input-group(중복확인/인증코드 발송/확인)
   레이아웃을 깨므로 !important + 높은 specificity 로 무력화. input 은 남는 공간, 버튼은 자기 크기 유지. */
@media (max-width: 900px) {
	.auth-form .input-group { flex-wrap: nowrap; }
	.auth-form .input-group input[type="text"],
	.auth-form .input-group input[type="email"],
	.auth-form .input-group input[type="password"] {
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
	}
	.auth-form .input-group select {
		flex: 0 0 auto;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
	}
	.auth-form .input-group .btn {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

@media (max-width: 600px) {
	.auth-wrap { margin: 2rem auto 4rem; }
	.auth-card { padding: 1.6rem 1.3rem; }
	.auth-actions { flex-direction: column-reverse; }
	.auth-actions .btn { width: 100%; }

	/* 좁은 화면 — input 옆 버튼을 아래로 내려 전체 폭 */
	.auth-form .input-group { flex-wrap: wrap; gap: 0.5rem; }
	.auth-form .input-group input[type="text"],
	.auth-form .input-group input[type="email"],
	.auth-form .input-group input[type="password"] {
		flex: 1 1 100% !important;
	}
	.auth-form .input-group .btn {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* 통합검색 highlight (회차 5) — Lucene Highlighter 가 <mark> 태그로 wrap */
.auth-card mark {
	background: #fff59d;
	color: inherit;
	padding: 0 2px;
	border-radius: 2px;
	font-weight: 600;
}

/* 자동완성 dropdown (회차 5-B 2단계) */
.search-suggest-dd li:hover {
	background: #eef5ff !important;
}

/* ===== 통합검색 페이지 (/search) — 검색 패널 + 좌측 필터 + 우측 결과 =====
   2026-09-22 — 게시판 목록(/board/**)과 룩을 통일했다.
      이전엔 색·굵기가 전부 하드코딩이라(#1a1f36 / #eef0f4 / #0076ff, weight 700~800)
      같은 사이트로 안 보였다. 특히 결과 제목이 1.1rem/700 이라 목록(1.25rem/500)보다 굵었다.

      기준은 시안 원본 sub.css 의 두 블록이다:
        .search_wrap (296~399)  — 검색 패널. **마크업을 시안 구조로 바꿔서** 그 규칙을 직접 물린다
                                   (search.html 참고). 그래서 여기에 패널 CSS 는 한 줄도 없다.
        .board_list (1807~1978) — 목록 타이포·테두리·여백. 아래 값의 출처:
          제목 1.25rem/500 var(--sub-tit-color) · 분류칩 0.9rem/400 var(--main-color) on #eef1f8
          날짜·발췌 1rem (#999 / #888) · 행 padding 1.6rem 2rem
          목록 border-top 2px var(--sub-tit-color) · 행 border-bottom 1px var(--line-color)
          행 hover #f0f1f4 · 제목 hover var(--main-color) · 칩 hover #fff

   주의 — 검색 결과는 게시판과 달리 [분류+날짜] / 제목 / 발췌 3단이다. .board_list 의 flex 1줄 구조는
     쓰지 않는다. 타이포·테두리·여백·hover 만 맞춘다. 색은 전부 common.css :root 변수로 받는다.
   주의 — 반응형 분기도 시안에 맞췄다: 1200 / 900 / 500 (이전엔 900 / 600 이라 게시판과 어긋났다).
   컨테이너는 공통 .wFix(좌우 여백만). 페이지 타이틀은 서브 레이아웃(테마)에서 렌더. */

/* 패널-본문 간격 — 시안은 `.board_list { margin-top: 2rem }` 이 준다.
   검색은 결과/랜딩/안내문 세 갈래라 공통 부모에서 한 번만 준다.
   여기에 주고 .search-results 에도 주면 4rem 이 된다. 게시판에서 똑같이 당했다(bbs.css 19~22행). */
.search-content { margin-top: 2rem; }
.search-content > .auth-alert:first-child { margin-top: 0; }

/* 2단 그리드 */
.search-body {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 2.5rem;
	align-items: start;
}

/* ---- 좌측 필터 사이드바 ---- */
.search-filter {
	/* border-right: 1px solid var(--line-color); */
	padding-right: 1.6rem;
}
/* 제목 밑줄은 시안 목록의 border-top 과 같은 톤(2px var(--sub-tit-color)) */
.search-filter-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--sub-tit-color);
	margin: 0 0 1.2rem;
	padding-bottom: 0.9rem;
	border-bottom: 2px solid var(--sub-tit-color);
}
.filter-group { margin-bottom: 1.6rem; }
.filter-group-title {
	font-size: 1rem;
	font-weight: 500;
	color: var(--sub-tit-color);
	margin-bottom: 0.6rem;
}
.facet-list { display: flex; flex-direction: column; gap: 0.1rem; }
/* facet 링크 — 템플릿 인라인 th:style(가로탭용)을 세로 리스트로 재정의.
   색·굵기는 인라인에 남아 CSS 로 못 덮는다. 바꾸려면 search.html 의 th:style 을 고쳐야 한다
   (2026-09-22 에 #0076ff → var(--main-color) 로 이미 교체함). */
.search-filter .facet-item {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.5rem !important;
	padding: 0.55rem 0.6rem !important;
	border-bottom: 0 !important;
	border-radius: 4px !important;
	white-space: normal !important;
	font-size: 1rem;
}
.search-filter .facet-item:hover { background: #f0f1f4; }
.facet-count { font-size: 0.9rem; font-weight: 400; color: #999; }
/* 기간 select — 시안 `.search_wrap .search_form .select_box select`(sub.css 326)와 같은 룩.
   그 선택자는 검색 패널 안에서만 걸리므로 화살표 SVG 까지 여기 한 번 더 적는다. */
.filter-period {
	width: 100%;
	height: 3rem;
	padding: 0 2.4rem 0 1rem;
	border: 1px solid var(--line-color);
	border-radius: 6px;
	font-size: 1rem;
	color: var(--sub-tit-color);
	background: #fff
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
		no-repeat right 1rem center;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

/* ---- 우측 결과 ---- */
.search-main { min-width: 0; }
/* 요약줄 — 건수(전체 N건)는 검색 패널 p.total 로 옮겼다(시안 위치). 여기는 검색어 + 정렬만. */
.search-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font-size: 1rem;
	color: var(--txt-color);
}
.search-summary strong { color: var(--main-color); font-weight: 600; }
.search-sorts { display: flex; align-items: center; gap: 0.5rem; }
.search-sorts-label { font-size: 1rem; color: #999; }
.search-sorts select {
	height: 3rem;
	padding: 0 2.4rem 0 1rem;
	border: 1px solid var(--line-color);
	border-radius: 6px;
	font-size: 1rem;
	color: var(--sub-tit-color);
	background: #fff
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
		no-repeat right 1rem center;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

/* 결과 목록 — 시안 .board_list 톤 */
.search-results {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 2px solid var(--sub-tit-color);
}
.search-results li {
	padding: 1.6rem 2rem;
	border-bottom: 1px solid var(--line-color);
	transition: background 0.2s;
}
.search-results li:hover { background: #f0f1f4; }
.result-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.7rem; }
/* 분류칩 — 시안 .board_list .cat 그대로 */
.result-cate {
	flex-shrink: 0;
	display: inline-flex; align-items: center;
	font-size: 0.9rem;
	font-weight: 400;
	color: var(--main-color);
	background: #eef1f8;
	border-radius: 4px;
	padding: 0.4rem 0.6rem;
	line-height: 1;
}
.search-results li:hover .result-cate { background: #fff; }
.result-date { flex-shrink: 0; font-size: 1rem; color: #999; }
/* 제목 — 시안 .board_list .cont .tit (1.25rem / 500).
   시안은 line-height:1 + 1줄 clamp 이지만, 검색 제목은 하이라이트가 섞이고 길어서 1.45 로 둔다. */
.search-result-link {
	display: block;
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--sub-tit-color);
	line-height: 1.45;
	text-decoration: none;
	transition: color 0.2s;
}
.search-results li:hover .search-result-link,
.search-result-link:hover { color: var(--main-color); text-decoration: none; }
/* 발췌 — 시안 .board_list .cont .txt (1rem / #888). 검색은 2줄까지 */
.search-result-snippet {
	margin-top: 0.5rem;
	font-size: 1rem;
	color: #888;
	line-height: 1.65;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* 하이라이트 <mark> — 발췌는 노란 배경, 제목 안에서는 메인컬러로만.
   제목(1.25rem)에 노란 배경이 들어가면 줄이 얼룩져 보여서 배경을 뺐다.
   굵기는 inherit — 여기서 600 을 주면 목록 제목(500)보다 굵어진다. */
.search-page mark {
	background: #fff59d;
	color: inherit;
	padding: 0 2px;
	border-radius: 2px;
	font-weight: inherit;
}
.search-result-link mark {
	background: none;
	padding: 0;
	color: var(--main-color);
	font-weight: 500;
}

/* 연관검색어 */
.search-related {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line-color);
}
.search-related .label { font-size: 1rem; color: #999; margin-right: 0.6rem; }
.search-related a {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	margin: 0.2rem 0.15rem;
	background: #eef1f8;
	color: var(--main-color);
	border-radius: 4px;
	font-size: 0.9rem;
	font-weight: 400;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}
.search-related a:hover { background: var(--main-color); color: #fff; }

/* 페이징 — 마크업은 게시판과 같은 `ul.paging_wrap.paging_st3.mt40` 이다.
   그런데 게시판의 슬림한 룩은 overrides/bbs.css(.bbs_paging …)가 만들고,
   그 파일은 `css/bbs/bbs-basic.css` 의 @import 로만 로드된다 → 이 페이지엔 안 들어온다.
   그래서 common.css 의 .paging_st3(54px 사각 + 테두리)가 그대로 나온다.
   같은 모양을 내려고 여기서 한 번 더 그린다. 값은 bbs.css 87~197 과 동일.
   선택자를 .search-main 으로 좁혀 다른 페이지에 새지 않게 한다(특이도도 common 보다 높아진다).
   템플릿 ul 의 .mt40 은 margin-top:4rem !important 라 !important 로만 이긴다. */
.search-main .paging_wrap.paging_st3 {
	display: flex; align-items: center; justify-content: center;
	gap: 0.4rem;
	list-style: none;
	padding: 0;
	margin-top: 3rem !important;
}
.search-main .paging_wrap.paging_st3 li a {
	display: flex; align-items: center; justify-content: center;
	width: 2.6rem; height: 2.6rem;
	margin: 0; padding: 0;
	border: 0; border-radius: 6px;
	background: transparent;
	font-size: 1.05rem;
	color: #888;
	transition: 0.2s all;
}
.search-main .paging_wrap.paging_st3 li a:hover {
	background: #f0f1f4;
	color: var(--sub-tit-color);
	font-weight: 400;
}
.search-main .paging_wrap.paging_st3 li.active a,
.search-main .paging_wrap.paging_st3 li.active a:hover {
	background: var(--main-color);
	color: #fff;
	font-weight: 600;
}
.search-main .paging_wrap.paging_st3 li a .material-symbols-outlined {
	font-size: 1.4rem;
	color: inherit;
}

/* 초기 랜딩 — 인기/최근 검색어. 카드 톤은 검색 패널(--bg-sub-light, radius 12px)과 맞춘다 */
.search-landing .cols { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.search-landing .col {
	flex: 1; min-width: 240px;
	padding: 1.5rem;
	background: var(--bg-sub-light);
	border-radius: 12px;
}
.search-landing h5 {
	display: flex; align-items: center;
	font-size: 1.1rem; font-weight: 600;
	color: var(--sub-tit-color);
	margin: 0 0 0.9rem;
}
.search-landing ol, .search-landing ul { list-style: none; padding: 0; margin: 0; }
.search-landing .empty-msg { font-size: 1rem; color: #999; padding: 0.4rem 0; }

/* 인기 검색어 — 순위 리스트 (상위 3위 강조) */
#popularList { display: flex; flex-direction: column; }
.pop-item {
	display: flex; align-items: center; gap: 0.7rem;
	padding: 0.6rem 0.2rem;
	border-bottom: 1px solid var(--line-color);
	transition: padding-left 0.15s ease;
}
.pop-item:last-child { border-bottom: 0; }
.pop-item:hover { padding-left: 0.5rem; }
.pop-rank {
	flex: 0 0 auto; width: 1.6rem; height: 1.6rem;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 4px;
	font-size: 0.85rem; font-weight: 500;
	background: #fff; color: #999;
}
.pop-item:nth-child(-n+3) .pop-rank { background: var(--main-color); color: #fff; }
.pop-link {
	flex: 1 1 auto; min-width: 0;
	font-size: 1rem; color: var(--sub-tit-color); text-decoration: none;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	transition: color 0.15s ease;
}
.pop-item:hover .pop-link { color: var(--main-color); font-weight: 500; }
.pop-pin { flex: 0 0 auto; font-size: 0.8rem; }

/* 최근 검색어 — 칩. 연관검색어 칩과 같은 모양(radius 4px)으로 통일 */
#recentList { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.recent-chip {
	display: inline-block; padding: 0.4rem 0.9rem;
	background: #fff; border: 1px solid var(--line-color); border-radius: 4px;
	color: var(--sub-tit-color); font-size: 0.9rem; font-weight: 400; text-decoration: none;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.recent-chip:hover { background: var(--main-color); color: #fff; border-color: var(--main-color); }
.search-landing .clear-recent {
	font-size: 0.9rem; font-weight: 400; color: #999;
	margin-left: 0.5rem; text-decoration: none;
}
.search-landing .clear-recent:hover { color: var(--main-color); }
.search-tip {
	margin-top: 2rem; padding: 1rem 1.2rem;
	background: var(--bg-sub-light); border-radius: 12px;
	font-size: 1rem; color: var(--txt-color);
}
.search-tip strong { font-weight: 600; color: var(--sub-tit-color); }
.search-tip code { background: #fff; padding: 0.1rem 0.4rem; border-radius: 4px; }

/* ---- 반응형 — 시안 분기(1200 / 900 / 500)에 맞춤 ---- */
@media screen and (max-width: 1200px) {
	.search-body { grid-template-columns: 200px 1fr; gap: 2rem; }
	.search-results li { padding: 1.6rem 1rem; }
}
@media screen and (max-width: 900px) {
	/* 필터를 결과 위로. 시안 목록이 세로로 전환되는 지점과 같다 */
	.search-body { grid-template-columns: 1fr; gap: 1.5rem; }
	.search-filter {
		border-right: 0; padding-right: 0;
		border-bottom: 1px solid var(--line-color); padding-bottom: 1.2rem;
	}
	.search-filter-title { font-size: 1rem; margin-bottom: 0.9rem; padding-bottom: 0.7rem; }
	/* facet 은 가로로 감싸 흘린다 — 세로로 6개 쌓이면 결과가 화면 밖으로 밀린다 */
	.facet-list { flex-direction: row; flex-wrap: wrap; gap: 0.3rem; }
	.search-filter .facet-item {
		justify-content: flex-start !important;
		padding: 0.4rem 0.7rem !important;
		background: #eef1f8;
		font-size: 0.9rem;
	}
	.filter-period { height: 2.8rem; }
	/* 목록 — 시안 `.board_list li a { padding: 1.2rem 0 }` */
	.search-results li { padding: 1.2rem 0; }
	.result-head { gap: 0.6rem; margin-bottom: 0.5rem; }
	.result-cate { font-size: 0.8rem; padding: 0.25rem 0.6rem; }
	.result-date { font-size: 0.85rem; }
	.search-result-link { font-size: 1.1rem; }
	.search-result-snippet { font-size: 0.9rem; margin-top: 0.4rem; }
	.search-summary { font-size: 0.9rem; }
	.search-sorts-label { font-size: 0.9rem; }
	.search-sorts select { height: 2.8rem; font-size: 0.9rem; }
	.search-related .label { font-size: 0.9rem; }
	.search-landing h5 { font-size: 1rem; }
	.search-tip { font-size: 0.9rem; }
	/* 페이징 — bbs.css @900 과 동일 */
	.search-main .paging_wrap.paging_st3 li a { width: 2.2rem; height: 2.2rem; font-size: 1rem; }
}
@media screen and (max-width: 500px) {
	.search-landing .cols { flex-direction: column; gap: 1rem; }
	.search-landing .col { min-width: 0; padding: 1.2rem; }
	/* 검색어 줄과 정렬 select 를 위아래로 */
	.search-summary { flex-direction: column; align-items: flex-start; }
	.search-sorts { width: 100%; }
	.search-sorts select { flex: 1 1 auto; width: 100%; }
	/* 페이징 — bbs.css @500 과 동일 */
	.search-main .paging_wrap.paging_st3 { gap: 0.2rem; }
	.search-main .paging_wrap.paging_st3 li a { width: 1.8rem; height: 1.8rem; font-size: 0.8rem; }
	.search-main .paging_wrap.paging_st3 li a .material-symbols-outlined { font-size: 1.1rem; }
}

/* ===== 마이페이지 하위 목록 페이지 공통 (내 글 / 댓글 / 알림) ===== */
.mel-page { margin: 4rem auto 6rem; }
/* 상단 뒤로가기 */
.mel-back { margin: 0 0 1rem; }
.mel-back .btn_text { color: #8a90a0; font-size: 0.9rem; }
.mel-back .btn_text .material-symbols-outlined { font-size: 18px; }
/* 목록 영역 — 박스(카드) 없이 wFix 안에서 그대로 (배경/테두리/그림자/패딩 없음) */
.mel-card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.mel-head {
	display: flex; align-items: center; justify-content: space-between; gap: .8rem;
	margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 2px solid #1a1f36;
}
.mel-tit { font-size: 1.2rem; font-weight: 800; color: #1a1f36; margin: 0; }
.mel-count { font-size: .9rem; color: #8a90a0; }
.mel-count b { color: #6c5ce7; font-weight: 800; }
.mel-empty { padding: 3rem 0; text-align: center; color: #aab0bd; font-size: .95rem; }
/* 헤더 우측 액션(모두 읽음 등) */
.mel-action {
	display: inline-flex; align-items: center; gap: .25rem;
	background: none; border: 0; cursor: pointer;
	color: #6c5ce7; font-size: .88rem; font-weight: 600;
	padding: .3rem .55rem; border-radius: 6px;
}
.mel-action:hover { background: #f4f2fe; }
.mel-action .material-symbols-outlined { font-size: 18px; }
@media (max-width: 600px) {
	.mel-page { margin: 2.5rem auto 4rem; }
	.mel-tit { font-size: 1.05rem; }
	.mel-head { padding-bottom: .8rem; margin-bottom: .9rem; }
}

/* ============================================================================
 * 이관 회원 비밀번호 재설정 안내 모달 (auth-reset.js)
 *   로그인 실패 시 textopia 이관 회원이면 재설정 팝업. 2026-08-10
 * ==========================================================================*/
.ktdi-reset-dim {
	position: fixed; inset: 0; z-index: 9999;
	background: rgba(20, 24, 35, .55);
	display: flex; align-items: center; justify-content: center;
	padding: 2rem;
}
.ktdi-reset-box {
	background: #fff; border-radius: 12px; max-width: 460px; width: 100%;
	padding: 3rem 2.6rem 2.4rem; box-shadow: 0 12px 40px rgba(0,0,0,.25);
	text-align: center;
}
.ktdi-reset-tit { font-size: 1.25rem; font-weight: 700; color: #1a1a1a; margin-bottom: 1.2rem; }
.ktdi-reset-msg { font-size: 0.95rem; line-height: 1.7; color: #555; margin-bottom: 2rem; }
.ktdi-reset-msg strong { color: #344dcf; }
.ktdi-reset-btns { display: flex; gap: 1rem; justify-content: center; }
.ktdi-reset-btns .btn { min-width: 9rem; }


/* ============================================================
   🔴 KTDI 회원가입 UX 개편 (2026-09-04)
   제품 원본은 모든 검증을 alert() 로만 알려 줘서 어느 칸이 문제인지
   화면에 남지 않았다. 인라인 메시지 중심으로 바꾸면서 필요한 요소들.
   (.form-help.is-error/.is-success 와 .auth-pw-toggle 은 위쪽에 이미 정의돼 있어 재사용)
   ============================================================ */

/* 비밀번호 강도 막대 — 3단계(약함/보통/강함). 폭+색으로 표현.
   ⚠ 입력칸에 바짝 붙으면 인풋 밑줄처럼 보인다 → 위쪽 간격을 넉넉히 준다 */
.auth-pw-meter {
	height: 4px;
	margin: 0.6rem 0 0.15rem;
	border-radius: 2px;
	background: #e9ecf3;
	overflow: hidden;
}
.auth-pw-meter > span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 2px;
	transition: width 0.25s ease, background-color 0.25s ease;
}
.auth-pw-meter.lv0 > span { width: 33%;  background: #d32f2f; }
.auth-pw-meter.lv1 > span { width: 66%;  background: #f0a020; }
.auth-pw-meter.lv2 > span { width: 100%; background: #2e7d32; }

/* 인증코드 만료 타이머 — 30초 이하로 남으면 붉게 */
.auth-verify-timer {
	margin-left: 0.5rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;   /* 숫자가 흔들리지 않게 */
	color: var(--main-color, #4f7bff);
}
.auth-verify-timer.is-warn { color: #d32f2f; }

/* 인증코드 재발송 — 부가 동작이라 링크형(테두리 없는 텍스트 버튼) */
.auth-verify-resend {
	margin-top: 0.55rem;
	padding: 0;
	border: 0;
	background: none;
	font-size: 0.88rem;
	color: #5f697e;
	text-decoration: underline;
	cursor: pointer;
}
.auth-verify-resend:hover:not(:disabled) { color: var(--main-color, #4f7bff); }
.auth-verify-resend:disabled { opacity: 0.5; cursor: default; }

/* 제출 실패 요약 — alert() 를 대체한다. role=alert 로 스크린리더도 즉시 읽는다 */
.auth-form-error {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding: 0.85rem 1rem;
	border: 1px solid #f5c6c6;
	border-left: 3px solid #d32f2f;
	border-radius: 8px;
	background: #fdf4f4;
	font-size: 0.92rem;
	line-height: 1.55;
	color: #b3261e;
}
.auth-form-error::before {
	content: 'error';
	font-family: 'Material Symbols Outlined';
	font-size: 1.1rem;
	line-height: 1.3;
	flex: 0 0 auto;
}
/* [hidden] 은 display:flex 에 지므로 명시적으로 눌러 준다 */
.auth-form-error[hidden] { display: none; }

/* 가입 버튼 비활성 — 왜 못 누르는지 아래 안내(#submit_hint)로 알려 준다.
   버튼만 흐리게 하고 이유가 없으면 "고장" 처럼 보인다. */
.auth-actions .btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;   /* hover 색 변화까지 막아 '눌리는 것' 처럼 보이지 않게 */
}
.auth-submit-hint {
	margin: 0.6rem 0 0;
	text-align: center;
	font-size: 0.85rem;
	color: #8a90a0;
	min-height: 1.2em;      /* 문구가 생겼다 없어질 때 버튼이 튀지 않도록 자리 확보 */
}
.auth-submit-hint:empty { min-height: 0; }

/* 비밀번호 찾기 — 인증코드가 input-group 없이 단독으로 놓인다(가입 화면은 [확인] 버튼과 한 줄).
   가입 화면의 .auth-verify-input 규칙은 폭을 flex 로 잡으므로 여기선 전체 폭을 명시한다. */
.auth-verify-box > .auth-verify-input { width: 100%; }

/* 2026-10-20 auth-card radius 통일 — 입력창 4px(사이트 input 규칙) / 로그인 버튼 0(.btn) / 소셜 8px 로 제각각이던 것을 8px 로.
   사이트 공통 규칙이 !important 라 여기도 !important. 로그인·회원가입·아이디/비번 찾기(.auth-card) 전부 같이 적용된다. */
.auth-card input:is([type="text"], [type="password"], [type="email"], [type="tel"], [type="number"]),
.auth-card select,
.auth-card .btn,
.auth-card .auth-social-btn {
	border-radius: 8px !important;
}