/*
 * simple 테마 — 서브 페이지 공통 (인증 / 마이페이지 / 검색 / 에러).
 * 회차 4 Phase E (2026-06-10) + 회차 5 통합검색 (2026-06-10).
 *   디자이너 원본 main.css / sub.css 수정 X.
 *   페이지: login / join / pw-find / me/* / search
 */

/* 카드 컨테이너 */
.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; }

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.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: #0076ff;
	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;
	background-image: url("../../img/common/select_arrow.svg");
	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: #0076ff; color: #fff; }
.auth-btn-primary:hover { background: #005ec8; }
.auth-btn-outline  { background: #fff; color: #0076ff; border-color: #0076ff; }
.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 a {
	color: #5f697e;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
}
.auth-foot a:hover { color: #0076ff; text-decoration: underline; }

/* 소셜 로그인 — 구분선 + 네이버 버튼 */
.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-radius: 8px;
	background: #03c75a;
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: filter 0.15s ease;
}
.auth-social-btn:hover { filter: brightness(0.94); }
.auth-social-btn::before {
	content: 'N';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.22);
	font-weight: 800;
	font-size: 0.8rem;
}

/* 약관 동의 */
.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);
}

.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) — 2단 레이아웃(검색 히어로 + 필터 사이드바 + 결과) =====
   컨테이너는 공통 .wFix(좌우 여백만, 박스/카드 없음) 사용. 페이지 타이틀은 서브 레이아웃(테마)에서 렌더 */

/* 상하 여백·검색 패널 간격은 CSS 지정 없이 HTML 에서 공통 mt/mb 유틸(common.css)로 적용.
   예) <div class="wFix search-page mt40 mb50">, <form class="search_wrap search_st5 search_center mb20"> */
.search-content > .auth-alert:first-child { margin-top: 0; }

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

/* ---- 좌측 필터 사이드바 ---- */
.search-filter { border-right: 1px solid #eef0f4; padding-right: 1.6rem; }
.search-filter-title {
	font-size: 1.15rem; font-weight: 800; color: #1a1f36; margin: 0 0 1.2rem;
	padding-bottom: 0.9rem; border-bottom: 2px solid #1a1f36;
}
.filter-group { margin-bottom: 1.6rem; }
.filter-group-title { font-size: 0.95rem; font-weight: 700; color: #2b3040; margin-bottom: 0.6rem; }
.facet-list { display: flex; flex-direction: column; gap: 0.1rem; }
/* facet 링크 — 인라인 th:style(가로탭용)을 세로 리스트로 재정의. 색/굵기(활성표시)는 인라인 유지 */
.search-filter .facet-item {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.5rem !important;
	padding: 0.5rem 0.6rem !important;
	border-bottom: 0 !important;
	border-radius: 8px !important;
	white-space: normal !important;
	font-size: 0.92rem;
}
.search-filter .facet-item:hover { background: #f4f6fb; }
.facet-count { font-size: 0.8rem; color: #9aa0ad; font-weight: 500; }
.filter-period {
	width: 100%; height: 42px; padding: 0 0.8rem;
	border: 1px solid #d4d9e0; border-radius: 8px; font-size: 0.9rem; color: #333;
}

/* ---- 우측 결과 ---- */
.search-main { min-width: 0; }
.search-summary {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.1rem;
	padding-bottom: 1rem; border-bottom: 1px solid #eef0f4;
	color: #5f697e; font-size: 0.92rem;
}
.search-summary strong { color: #1a1f36; }
.search-sorts { display: flex; align-items: center; gap: 0.5rem; }
.search-sorts-label { color: #8a90a0; font-size: 0.88rem; }
.search-sorts select {
	height: 36px; padding: 0 1.7rem 0 0.7rem;
	border: 1px solid #d4d9e0; border-radius: 8px; font-size: 0.86rem; color: #333;
}

/* 결과 목록 카드 */
.search-results { list-style: none; padding: 0; margin: 0; }
.search-results li { padding: 1.3rem 0; border-bottom: 1px solid #eef0f4; }
.search-results li:first-child { padding-top: 0.2rem; }
.result-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.result-cate {
	display: inline-flex; align-items: center;
	padding: 0.15rem 0.55rem; border-radius: 6px;
	background: #eef4ff; color: #1a1f36;
	font-size: 0.76rem; font-weight: 600;
}
.result-date { font-size: 0.82rem; color: #9aa0ad; }
.search-result-link {
	display: inline-block;
	color: #1a1f36; font-size: 1.1rem; font-weight: 700; line-height: 1.45; text-decoration: none;
}
.search-result-link:hover { color: #1a1f36; text-decoration: underline; }
.search-result-snippet { color: #5f697e; font-size: 0.92rem; line-height: 1.65; margin-top: 0.4rem; }
/* 하이라이트 <mark> — 본문은 노란 배경, 제목 안에서는 메인컬러 강조 */
.search-page mark { background: #fff59d; color: inherit; padding: 0 2px; border-radius: 2px; font-weight: 600; }
.search-result-link mark { background: #fff59d; color: inherit; padding: 0 2px; border-radius: 2px; }

/* 연관검색어 */
.search-related { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid #eef0f4; }
.search-related .label { color: #8a90a0; font-size: 0.9rem; margin-right: 0.4rem; }
.search-related a {
	display: inline-block; padding: 0.3rem 0.85rem; margin: 0.2rem 0.15rem;
	background: #eef4ff; color: #1a1f36; border-radius: 999px;
	font-size: 0.85rem; text-decoration: none; transition: background 0.15s ease;
}
.search-related a:hover { background: #dce8ff; }

/* 페이징 — 공통 paging_wrap paging_st3(common.css) 사용 */

/* 초기 랜딩 — 인기/최근 검색어 */
.search-landing .cols { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.search-landing .col {
	flex: 1; min-width: 240px;
	padding: 1.4rem 1.5rem;
	background: #fff;
	border: 1px solid #e8ebf1;
	border-radius: 12px;
	box-shadow: 0 3px 12px rgba(45, 52, 86, 0.04);
}
.search-landing h5 { display: flex; align-items: center; font-size: 1rem; font-weight: 700; color: #1a1f36; margin: 0 0 0.7rem; }
.search-landing ol, .search-landing ul { list-style: none; padding: 0; margin: 0; }
.search-landing .empty-msg { color: #aab0bd; font-size: 0.9rem; padding: 0.4rem 0; }

/* 인기 검색어 — 순위 리스트 (상위 3위 강조) */
#popularList { display: flex; flex-direction: column; }
/* 행 사이 구분선 + hover 시 담백하게(배경 없이 살짝 밀림 + 텍스트 강조) */
.pop-item {
	display: flex; align-items: center; gap: 0.7rem;
	padding: 0.6rem 0.2rem;
	border-bottom: 1px solid #eef0f4;
	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.5rem; height: 1.5rem;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 6px; font-size: 0.8rem; font-weight: 800;
	background: #eef0f4; color: #9aa0ad;
}
.pop-item:nth-child(-n+3) .pop-rank { background: #1a1f36; color: #fff; }
.pop-link { flex: 1 1 auto; min-width: 0; color: #2b3040; text-decoration: none; font-size: 0.93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s ease; }
.pop-item:hover .pop-link { color: #1a1f36; font-weight: 700; }
.pop-pin { flex: 0 0 auto; font-size: 0.75rem; }

/* 최근 검색어 — 칩 */
#recentList { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.recent-chip {
	display: inline-block; padding: 0.4rem 0.9rem;
	background: #f1f4fa; border: 1px solid #e8ebf1; border-radius: 999px;
	color: #4b5162; font-size: 0.88rem; text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.recent-chip:hover { background: #e6edfb; color: #1a1f36; border-color: #cdddfb; }
.search-landing .clear-recent { font-size: 0.8rem; color: #9aa0ad; font-weight: 400; margin-left: 0.5rem; text-decoration: none; }
.search-landing .clear-recent:hover { color: #1a1f36; }
.search-tip {
	margin-top: 1.8rem; padding: 0.9rem 1.1rem;
	background: #f7f9fc; border: 1px solid #eef0f4; border-radius: 10px;
	color: #5f697e; font-size: 0.9rem;
}
.search-tip code { background: #eef2f8; padding: 0.05rem 0.35rem; border-radius: 4px; }

/* 반응형 */
@media (max-width: 900px) {
	.search-body { grid-template-columns: 1fr; gap: 1.5rem; }
	.search-filter { border-right: 0; padding-right: 0; border-bottom: 1px solid #eef0f4; padding-bottom: 1.2rem; }
}
@media (max-width: 600px) {
	.search-landing .cols { gap: 1.4rem; }
}

/* ===== 마이페이지 하위 목록 페이지 공통 (내 글 / 댓글 / 알림) ===== */
.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; }
}