/* 포털 통합 회원 화면 — Figma 03 F-05 로그인 · F-06 가입 · F-07 찾기 · F-08~F-10 마이페이지 (M5 레인C).
 * 전 선택자 body.portal-site 접두(래칫 PortalCssScopeRatchetTest) — 캠프 사이트는 이 파일을 받지 않는다.
 * 로그인·가입·찾기는 기존 마크업(im_board.css 의 apply_wrap/applyWrite_form 계열)을 그대로 두고
 * .pm-auth/.pm-join 래퍼 아래에서만 시안 모양으로 다시 입힌다(기능·필드 불변).
 * 색은 assets/ds/tokens.css 토큰만 쓴다. 시안 안내박스(#eaf4fb·#fff4e5)는 DS 토큰에 없어
 * portal-pages.css 와 같은 결정으로 --ds-surface 로 대체했다. */

/* ── 인증 카드(F-05 로그인 · F-07 찾기): 가운데 520 카드 ───────────────────── */
body.portal-site .pm-auth {
	max-width: 520px;
	margin: 96px auto 120px;
	padding: 40px;
	background: var(--ds-bg);
	border: 1px solid var(--ds-border);
	border-radius: 16px;
	box-sizing: border-box;
}
body.portal-site .pm-join {
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 80px 80px;
	box-sizing: border-box;
}
body.portal-site .pm-auth fieldset,
body.portal-site .pm-join fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
body.portal-site .pm-auth legend,
body.portal-site .pm-join legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 레거시 2단(좌 500px) 배치·둥근 회색 머리를 걷어낸다 */
body.portal-site .pm-auth .apply_wrap,
body.portal-site .pm-join .apply_wrap {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	overflow: visible;
}
body.portal-site .pm-auth .apply_wrap .section,
body.portal-site .pm-join .apply_wrap .section { padding: 0; }
body.portal-site .pm-auth .apply_wrap .section .apply_header,
body.portal-site .pm-join .apply_wrap .section .apply_header {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0 0 20px;
}
body.portal-site .pm-auth .apply_wrap .section .apply_header h2 {
	font-size: 28px;
	font-weight: 700;
	color: var(--ds-text-strong);
}
body.portal-site .pm-join .apply_wrap .section .apply_header h2 {
	font-size: 17px;
	font-weight: 700;
	color: var(--ds-text-strong);
}
body.portal-site .pm-auth .apply_wrap .section .apply_header .applyHeader_info { display: none; }
body.portal-site .pm-join .apply_wrap .section .apply_header .applyHeader_info {
	position: static;
	margin-top: 4px;
	font-size: var(--ds-font-caption-size);
	color: var(--ds-text-muted);
}
body.portal-site .pm-auth .compel_item,
body.portal-site .pm-join .compel_item { color: var(--ds-danger); }

/* 입력 묶음 카드(시안: 테두리 12px 카드 안 라벨-위 입력) */
body.portal-site .pm-auth .apply_wrap .section .apply_body,
body.portal-site .pm-join .apply_wrap .section .apply_body {
	border: 1px solid var(--ds-border);
	border-radius: 12px;
	padding: 20px;
	background: var(--ds-bg);
}
body.portal-site .pm-auth .applyWrite_form .item,
body.portal-site .pm-join .applyWrite_form .item {
	flex-direction: column;
	gap: 6px;
	padding: 0 0 14px;
}
body.portal-site .pm-auth .applyWrite_form .item:last-child { padding-bottom: 0; }
body.portal-site .pm-auth .applyWrite_form .item .form_title,
body.portal-site .pm-join .applyWrite_form .item .form_title {
	width: auto;
	padding: 0;
	font-size: var(--ds-font-label-size);
	font-weight: 500;
	color: var(--ds-text-strong);
}
body.portal-site .pm-auth .applyWrite_form .item .form_content,
body.portal-site .pm-join .applyWrite_form .item .form_content { width: 100%; padding: 0; font-size: var(--ds-font-body-m-size); }
body.portal-site .pm-auth .applyWrite_form .form_wrap input,
body.portal-site .pm-auth .applyWrite_form .form_wrap select,
body.portal-site .pm-join .applyWrite_form .form_wrap input[type="text"],
body.portal-site .pm-join .applyWrite_form .form_wrap input[type="password"],
body.portal-site .pm-join .applyWrite_form .form_wrap input[type="email"],
body.portal-site .pm-join .applyWrite_form .form_wrap select {
	height: 48px;
	padding: 0 16px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 8px;
	font-size: var(--ds-font-body-m-size);
	color: var(--ds-text-strong);
	box-sizing: border-box;
}
body.portal-site .pm-auth .applyWrite_form .form_wrap input.col50 { width: 100%; }
body.portal-site .pm-auth .applyWrite_form .form_wrap input:focus,
body.portal-site .pm-auth .applyWrite_form .form_wrap select:focus,
body.portal-site .pm-join .applyWrite_form .form_wrap input:focus,
body.portal-site .pm-join .applyWrite_form .form_wrap select:focus {
	outline: none;
	border: 2px solid var(--ds-primary);
}
body.portal-site .pm-auth .applyWrite_form .form_wrap.form_tel,
body.portal-site .pm-join .applyWrite_form .form_wrap.form_tel { gap: 6px; }
body.portal-site .pm-auth .applyWrite_form .form_wrap.form_tel select { width: auto; flex: 1; }
body.portal-site .pm-auth .applyWrite_form .form_wrap.form_tel span { display: none; }
body.portal-site .pm-auth .applyWrite_form .form_wrap.form_certify,
body.portal-site .pm-join .applyWrite_form .form_wrap.form_certify { gap: 8px; padding-top: 0; }
body.portal-site .pm-auth .applyWrite_form .form_wrap.form_certify input { width: auto; flex: 1; }
body.portal-site .pm-auth .applyWrite_form .form_wrap.form_certify .btn,
body.portal-site .pm-join .applyWrite_form .form_wrap.form_certify .btn,
body.portal-site .pm-join .applyWrite_form .form_wrap.form_tel .btn {
	width: auto;
	flex: none;
	margin: 0;
	height: 48px;
	line-height: 48px;
	padding: 0 16px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 8px;
	color: var(--ds-text-strong);
	font-size: 15px;
	font-weight: 700;
}
body.portal-site .pm-auth #phoneCertiArea { margin-top: 8px; }
body.portal-site .pm-auth .applyWrite_form .form_wrap.form_certify .time { right: 104px; color: var(--ds-danger); }

/* 버튼 줄: 시안은 [링크 줄] → [안내] → [주 버튼 전폭] 순. 마크업 순서를 바꾸지 않고 order 로 맞춘다 */
body.portal-site .pm-join .pm-title { margin-bottom: 16px; }
body.portal-site .pm-join .pm-note { margin: 0 0 24px; }
body.portal-site .pm-join .applyWrite_form .form_wrap input.col50 { width: 100%; max-width: 400px; }
body.portal-site .pm-auth .apply_wrap .m-boards-btns,
body.portal-site .pm-join .apply_wrap .m-boards-btns {
	float: none;
	display: flex;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
}
body.portal-site .pm-auth .apply_wrap .m-boards-btns.pm-primary-row { order: 10; }
body.portal-site .pm-auth .apply_wrap .m-boards-btn,
body.portal-site .pm-join .apply_wrap .m-boards-btn {
	flex: 1;
	margin: 0;
	height: 52px;
	padding: 0 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ds-border);
	border-radius: 8px;
	background: var(--ds-surface);
	color: var(--ds-text-strong);
	font-size: var(--ds-font-body-m-size);
	font-weight: 700;
	text-decoration: none;
}
body.portal-site .pm-auth .apply_wrap .m-boards-btn.bg-primary,
body.portal-site .pm-join .apply_wrap .m-boards-btn.bg-primary {
	flex: 2;
	background: var(--ds-primary);
	border-color: var(--ds-primary);
	color: var(--ds-on-primary);
}

/* 텍스트 링크 줄(아이디 찾기 | 비밀번호 찾기 | 회원가입) */
body.portal-site .pm-links {
	display: flex;
	justify-content: center;
	gap: 16px;
	font-size: var(--ds-font-label-size);
}
body.portal-site .pm-links a {
	color: var(--ds-text-muted);
	font-weight: 500;
	text-decoration: none;
}
body.portal-site .pm-links a + a::before {
	content: "|";
	margin-right: 16px;
	color: var(--ds-border);
	font-weight: 400;
}
body.portal-site .pm-links a:hover { color: var(--ds-text-strong); }

/* 안내 박스 */
body.portal-site .pm-note {
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--ds-surface);
	font-size: 13px;
	color: var(--ds-text);
}

/* 탭(F-07 찾기 · 마이페이지) — 선택 탭은 하단 2px 먹색 + Bold (Figma Tab 15:90) */
body.portal-site .pm-tabs {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
}
body.portal-site .pm-tabs a {
	padding: 14px 16px 12px;
	border-bottom: 2px solid transparent;
	font-size: var(--ds-font-body-m-size);
	font-weight: 500;
	color: var(--ds-text-muted);
	text-decoration: none;
}
body.portal-site .pm-tabs a:hover { color: var(--ds-text-strong); }
body.portal-site .pm-tabs a.is-selected {
	border-bottom-color: var(--ds-text-strong);
	color: var(--ds-text-strong);
	font-weight: 700;
}
body.portal-site .pm-auth .apply_header .pm-tabs { margin-top: 20px; }

/* ── 마이페이지 셸(F-08~F-10) ─────────────────────────────────────────── */
body.portal-site .pm-page {
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 80px 80px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24px;
	color: var(--ds-text);
}
body.portal-site .pm-page-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
body.portal-site .pm-title {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	color: var(--ds-text-strong);
}
body.portal-site .pm-card {
	padding: 20px;
	background: var(--ds-bg);
	border: 1px solid var(--ds-border);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
body.portal-site .pm-card-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--ds-text-strong);
}
body.portal-site .pm-section-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--ds-text-strong);
}

/* 요약 카드 3개(Figma Stat Card 33:368) */
body.portal-site .pm-stats {
	display: flex;
	gap: 16px;
}
body.portal-site .pm-stat {
	flex: 1 0 0;
	min-width: 0;
	padding: 20px;
	border: 1px solid var(--ds-border);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
body.portal-site .pm-stat-label { font-size: 13px; font-weight: 500; color: var(--ds-text-muted); }
body.portal-site .pm-stat-value { font-size: 28px; font-weight: 700; color: var(--ds-text-strong); }
body.portal-site .pm-stat-sub { min-height: 1em; font-size: var(--ds-font-caption-size); font-weight: 500; color: var(--ds-camping-text); }

/* 표 */
body.portal-site .pm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
body.portal-site .pm-table th {
	padding: 10px 12px;
	background: var(--ds-surface);
	border-bottom: 1px solid var(--ds-border);
	text-align: left;
	font-weight: 700;
	color: var(--ds-text-muted);
}
body.portal-site .pm-table td {
	padding: 12px;
	border-bottom: 1px solid var(--ds-border);
	color: var(--ds-text);
}
body.portal-site .pm-table td a { color: var(--ds-text); text-decoration: none; }
body.portal-site .pm-table td a:hover { color: var(--ds-text-strong); text-decoration: underline; }
body.portal-site .pm-page .blind {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
body.portal-site .pm-empty { padding: 32px 12px; text-align: center; color: var(--ds-text-muted); }

/* 상태 배지 — 색만으로 구분하지 않고 글자로도 쓴다 */
body.portal-site .pm-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: var(--ds-font-caption-size);
	font-weight: 700;
	color: var(--ds-on-primary);
	background: var(--ds-text);
	white-space: nowrap;
}
body.portal-site .pm-badge.is-plan { background: var(--ds-travel-text); }
body.portal-site .pm-badge.is-done { background: var(--ds-camping-text); }
body.portal-site .pm-badge.is-warn { background: var(--ds-accent); }

/* 버튼(마이페이지 머리 — 회원 탈퇴 / 저장) */
body.portal-site .pm-btn {
	height: 44px;
	padding: 0 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ds-border);
	border-radius: 8px;
	background: var(--ds-surface);
	color: var(--ds-text-strong);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
}
body.portal-site .pm-btn.is-primary {
	background: var(--ds-primary);
	border-color: var(--ds-primary);
	color: var(--ds-on-primary);
}
body.portal-site .pm-head-actions { display: flex; gap: 8px; }

/* 기존 마이페이지 본문(reserve.css .rsv-scope)을 포털 셸 안에서 쓸 때: 레거시 제목·탭은 셸이 대신한다 */
body.portal-site .pm-page .mypage-index-title,
body.portal-site .pm-page .mypage-index-tab,
body.portal-site .pm-page .mypage-title { display: none; }
body.portal-site .pm-page .opt-info-save,
body.portal-site .pm-page .opt-info-delete { display: none; } /* 머리의 [회원 탈퇴][저장]이 같은 핸들러를 부른다 */
body.portal-site .pm-page .sub-wrap,
body.portal-site .pm-page .inner-container,
body.portal-site .pm-page .sub-box { padding: 0; margin: 0; max-width: none; }

/* 스크랩 카드(F-09) */
body.portal-site .pm-scrap-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
body.portal-site .pm-scrap-list a { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
body.portal-site .pm-scrap-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 240 / 168;
	object-fit: cover;
	border-radius: 12px;
	background: var(--ds-surface);
}
body.portal-site .pm-scrap-addr { font-size: var(--ds-font-caption-size); color: var(--ds-text-muted); }
body.portal-site .pm-scrap-name { font-size: 16px; font-weight: 700; color: var(--ds-text-strong); }

@media (max-width: 767px) {
	body.portal-site .pm-auth { margin: 40px 16px 64px; padding: 24px 20px; }
	body.portal-site .pm-page,
	body.portal-site .pm-join { padding: 32px 16px 64px; }
	body.portal-site .pm-title { font-size: 24px; }
	body.portal-site .pm-stats { flex-direction: column; }
	body.portal-site .pm-table-wrap { overflow-x: auto; }
	body.portal-site .pm-table { min-width: 640px; }
}