@charset "utf-8";
/* ==========================================================================
   회원 인증 + 게시판 글쓰기 폼 (같은 클래스 체계를 쓰므로 한 파일로 관리)
   - /member/login.jsp · /member/write.jsp · /member/write_step02.jsp
   - /member/idFind.jsp · /member/pwFind.jsp · /board/reply/write.jsp 공용
   - 히어로 밴드(.sl-subhero)·헤더/푸터·토큰은 site_layout.css
   - 폼의 클래스명(login_input_form_box01 · pw_active_btn · id_save_btn 등)은
     기존 JS(비밀번호 토글·아이디 저장·validationBind)가 선택자로 쓰므로 그대로 두고,
     board.css 의 스타일만 이 파일에서 덮어쓴다. 선택자는 모두 .sl-au 로 스코프 한정.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 섹션 / 카드
   -------------------------------------------------------------------------- */
/* 인증 화면은 서브 히어로 밴드가 없다. 헤더(fixed) 바로 아래에서 시작하므로
   위 여백을 넉넉히 줘서 카드가 헤더에 붙어 보이지 않게 한다 */
.sl-au {
	background: #fff;   /* 배경은 흰색 유지 */
	padding: 140px 20px 120px;
	box-sizing: border-box;
}
/* 폼을 감싼 fieldset 의 브라우저 기본 테두리·여백 제거 */
.sl-au fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}
.sl-au .new_login_wrapper {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	padding: 48px 44px;
	border: 1px solid rgba(43, 43, 40, .12);
	border-radius: 12px;
	background: #fff;
	box-sizing: border-box;
}
/* 약관동의·회원정보 입력처럼 내용이 넓은 단계 */
.sl-au .new_login_wrapper.wide { max-width: 760px; }
/* wide 단계는 카드 자체가 길어서 로그인 폼과 같은 140px 상단 여백을 주면
   헤더와의 간격이 과하게 넓어 보인다 - 상단 여백만 줄인다 */
.sl-au:has(.new_login_wrapper.wide) { padding-top: 64px; }

.sl-au .login_tit_flex_box01 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.sl-au .login_tit01 {
	font-size: 26px;
	font-weight: 700;
	color: var(--sl-dark);
	letter-spacing: -.4px;
	line-height: 1.4;
	margin: 0 0 32px;
}
.sl-au .login_tit_flex_box01 .login_tit01 { margin-bottom: 32px; }

/* 제목 옆 보조 링크 (아이디찾기 ↔ 비밀번호찾기 전환) */
.sl-au .nonMember_link01,
.sl-au .nonMember_link01:link,
.sl-au .nonMember_link01:visited {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 32px;
	font-size: 14px;
	color: rgba(43, 43, 40, .6);
	text-decoration: none;
	white-space: nowrap;
}
.sl-au .nonMember_link01:hover { color: var(--sl-orange-dark); text-decoration: none; }
.sl-au .nonMember_link01 img { width: 12px; height: auto; }

/* --------------------------------------------------------------------------
   2. 입력 폼
   -------------------------------------------------------------------------- */
.sl-au .login_form_wrapper {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;   /* board.css 의 margin-top:40px 해제 — 제목과의 간격은 .login_tit01 이 정한다 */
}
/* label 로 감싸져 있어 기본이 inline 이다 → block 으로 되돌린다 */
.sl-au .login_form_box01 {
	display: block;
	width: 100%;
}
/* board.css 가 항목 사이에 margin-top:20px 을 또 준다 → gap 과 겹쳐 두 배로 벌어진다.
   간격은 위 gap 하나로만 관리한다 */
.sl-au .login_form_box01 + .login_form_box01 { margin-top: 0; }
.sl-au .login_label_tit01 {
	display: block;
	margin: 0 0 9px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sl-dark);
	letter-spacing: -.14px;
}
/* 필수 입력 표시(*) — 글자 흐름 밖(라벨 왼쪽 바깥)에 걸어 둔다.
   position:absolute 라 자리를 차지하지 않아 라벨 텍스트는 다른 항목들과 같은 선에 그대로 선다.
   (board.css 는 padding-left:10px 로 텍스트를 밀어내므로 그 padding 은 해제한다) */
.sl-au .login_label_tit01.key {
	position: relative;
	padding-left: 0;
}
.sl-au .login_label_tit01.key::after {
	content: '*';
	position: absolute;
	left: -11px;
	top: 0;
	color: var(--sl-orange);
	font-weight: 700;
}

/* board.css 가 이 래퍼에 회색 배경·테두리·안쪽 여백을 주고 있어
   input 테두리와 겹쳐 박스가 이중으로 보였다 → 래퍼는 위치만 잡는 껍데기로 되돌린다 */
.sl-au .login_input_form_box01 {
	position: relative;
	width: 100%;
	height: auto;   /* board.css 의 height:55px 해제 — 높이는 input 이 정한다 */
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	box-sizing: border-box;
}
.sl-au .login_input_form_box01 input,
.sl-au .login_input_form_box01 input[type="text"],
.sl-au .login_input_form_box01 input[type="password"] {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	border: 1px solid rgba(43, 43, 40, .18);
	border-radius: 8px;
	background: #fff;
	color: var(--sl-dark);
	font-family: inherit;
	font-size: 15px;
	line-height: 50px;
	box-sizing: border-box;
	transition: border-color .2s ease;
}
.sl-au .login_input_form_box01 input::placeholder { color: rgba(43, 43, 40, .38); }
.sl-au .login_input_form_box01 input:focus {
	border-color: var(--sl-orange);
	outline: none;
}
.sl-au .login_input_form_box01 input[readonly] {
	background: #f6f4f1;
	color: rgba(43, 43, 40, .72);
}
/* 크롬 자동완성이 입력칸을 연파랑으로 칠하는 것을 막는다 (배경은 흰색 유지) */
.sl-au .login_input_form_box01 input:-webkit-autofill,
.sl-au .login_input_form_box01 input:-webkit-autofill:hover,
.sl-au .login_input_form_box01 input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--sl-dark);
	-webkit-box-shadow: 0 0 0 1000px #fff inset;
	box-shadow: 0 0 0 1000px #fff inset;
	transition: background-color 9999s ease-out;
}

/* 비밀번호 보기(눈 모양) 버튼은 쓰지 않는다.
   토글 JS(login.jsp·write_step02.jsp)는 그대로 두고 버튼만 감춘다 — 클릭 대상이 없으면
   핸들러가 붙어도 실행되지 않으므로 스크립트 수정 없이 안전하게 사라진다 */
.sl-au .pw_active_btn { display: none; }

/* 입력칸 + 우측 버튼(중복확인·우편번호검색) */
.sl-au .duplicate_flex_box {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.sl-au .duplicate_flex_box .login_input_form_box01 { flex: 1 1 auto; min-width: 0; }

/* 전화번호 3분할 */
.sl-au .login_tel_flex_box01 {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}
.sl-au .login_tel_flex_box01 .login_input_form_box01 { flex: 1 1 0; min-width: 0; }
.sl-au .selectNum,
.sl-au .selecEmail {
	height: 52px;
	padding: 0 12px;
	border: 1px solid rgba(43, 43, 40, .18);
	border-radius: 8px;
	background: #fff;
	color: var(--sl-dark);
	font-family: inherit;
	font-size: 15px;
	box-sizing: border-box;
}

/* 두 번째 입력칸을 아래로 붙일 때 (비밀번호 확인·상세주소) */
.sl-au .mt10 { margin-top: 10px; }

/* 비밀번호 조건 안내 문구 */
.sl-au .login_form_box01 p[id^="password_"] {
	display: none;
	font-size: 13px;
	line-height: 1.5;
}
.sl-au .login_form_box01 p[id^="password_"] img { vertical-align: -2px; }

/* 이메일 자동완성 드롭다운 */
.sl-au .autocomplete-suggestions {
	border: 1px solid rgba(43, 43, 40, .18);
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   3. 체크박스 / 보조 링크
   -------------------------------------------------------------------------- */
.sl-au .id_save_box {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: rgba(43, 43, 40, .72);
	cursor: pointer;
}
.sl-au .id_save_box input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--sl-orange);
	cursor: pointer;
}
.sl-au .login_chk_wrapper01 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 18px;
}
.sl-au .login_find_box01 {
	display: flex;
	align-items: center;
	gap: 14px;
}
.sl-au .login_find_box01 a,
.sl-au .login_find_box01 a:link,
.sl-au .login_find_box01 a:visited {
	position: relative;
	font-size: 14px;
	color: rgba(43, 43, 40, .6);
	text-decoration: none;
}
/* 아이디찾기 / 비밀번호찾기 사이 구분선 — board.css 도 ::after 로 같은 선을 그리므로 그쪽은 끈다 */
.sl-au .login_find_box01 a + a { padding-left: 0; margin-left: 0; }
.sl-au .login_find_box01 a + a::after { display: none; }
.sl-au .login_find_box01 a + a::before {
	content: '';
	position: absolute;
	left: -7px;
	top: 50%;
	width: 1px;
	height: 11px;
	margin-top: -5px;
	background: rgba(43, 43, 40, .2);
}
.sl-au .login_find_box01 a:hover { color: var(--sl-orange-dark); text-decoration: none; }

/* --------------------------------------------------------------------------
   4. 버튼
   -------------------------------------------------------------------------- */
.sl-au .login_chk_btn_box01 { margin-top: 24px; }

/* 기본(주황 채움) — .sl-btn 과 같은 색·라운드를 쓰되 폼 버튼이라 폭을 채운다.
   a 태그라 basic.css 의 a:link{color:inherit} 를 이기도록 :link/:visited 를 함께 지정 */
.sl-au .login_chk_btn01,
.sl-au .login_chk_btn01:link,
.sl-au .login_chk_btn01:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 54px;
	padding: 0 20px;
	border: 1px solid var(--sl-orange);
	border-radius: 8px;
	background: var(--sl-orange);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	box-sizing: border-box;
	transition: background .2s ease, border-color .2s ease;
}
.sl-au .login_chk_btn01:hover,
.sl-au .login_chk_btn01:focus,
.sl-au .login_chk_btn01:active {
	background: var(--sl-orange-dark);
	border-color: var(--sl-orange-dark);
	color: #fff;
	text-decoration: none;
}
/* 보조(테두리형) — 중복확인·우편번호검색·이전단계 */
.sl-au .login_chk_btn01.type02,
.sl-au .login_chk_btn01.type02:link,
.sl-au .login_chk_btn01.type02:visited {
	width: auto;
	flex: 0 0 auto;
	height: 52px;
	padding: 0 18px;
	border: 1px solid rgba(43, 43, 40, .22);
	background: #fff;
	color: var(--sl-dark);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
}
.sl-au .login_chk_btn01.type02:hover,
.sl-au .login_chk_btn01.type02:focus,
.sl-au .login_chk_btn01.type02:active {
	border-color: var(--sl-orange);
	background: #fff;
	color: var(--sl-orange-dark);
}

/* 하단 [이전단계] [확인] 2단 버튼 */
.sl-au .login_submit_btn_box01 {
	display: flex;
	gap: 10px;
	margin-top: 32px;
}
.sl-au .login_submit_btn_box01 .login_chk_btn01 { flex: 1 1 0; }
.sl-au .login_submit_btn_box01 .login_chk_btn01.type02 { height: 54px; }

/* --------------------------------------------------------------------------
   5. 소셜 로그인
   -------------------------------------------------------------------------- */
.sl-au .login_social_wrapper {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 28px 0 0;
	padding-top: 28px;
	border-top: 1px solid rgba(43, 43, 40, .1);
	border-bottom: 0;   /* board.css 의 아래 구분선 해제 */
}
/* 기본형(흰 배경 + 테두리). 브랜드 색이 있는 버튼만 아래에서 덮어쓴다 */
.sl-au .login_social_btn,
.sl-au .login_social_btn:link,
.sl-au .login_social_btn:visited {
	position: relative;
	display: flex;
	/* board.css 가 이 버튼에 flex-direction:column 과 padding:40px 0 을 준다.
	   border-box 라도 위아래 40px 은 height 54px 를 밀어내 버튼이 배로 커진다 → 둘 다 해제 */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: 54px;
	padding: 0 56px;   /* 좌우는 로고 자리만큼 비워 글자가 로고와 겹치지 않게 한다 */
	border: 1px solid rgba(43, 43, 40, .14);
	border-radius: 8px;
	background: #fff;
	color: #191919;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.32px;
	text-decoration: none;
	box-sizing: border-box;
	transition: filter .2s ease, border-color .2s ease;
}
.sl-au .login_social_btn:hover { text-decoration: none; filter: brightness(.97); }
/* 로고는 버튼 왼쪽에 고정하고, 글자는 버튼 전체 기준으로 가운데 놓는다.
   (로고를 흐름 안에 두면 로고+글자 묶음이 가운데로 밀려 글자가 오른쪽으로 치우친다) */
.sl-au .login_social_btn .img {
	position: absolute;
	top: 50%;
	left: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	border: 0;
	border-radius: 0;   /* board.css 의 border-radius:50% (동그란 아이콘 틀) 해제 */
	background: no-repeat center / contain;
}
/* board.css 의 `#apple_login .img { background-color:#f9f9f9; border:1px solid #ddd }` 는
   ID 선택자라 위 클래스 규칙을 이겨 로고 뒤에 회색 원이 남는다 → ID 를 포함해 눌러 준다.
   애플 로고는 세로로 긴 형태라 같은 크기에서 다른 로고보다 작아 보인다 → 한 단계 더 키운다 */
.sl-au #apple_login .img {
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border: 0;
	background-color: transparent;
}
.sl-au .login_social_btn .img img { width: 100%; height: 100%; object-fit: contain; }

/* ── 브랜드별 ────────────────────────────────────────────────
   로고는 각 브랜드 배경 위에서 대비가 맞는 단색 SVG 를 CSS 배경으로 깔고,
   마크업의 <img>(board 모듈 기본 아이콘)는 감춘다.
   구글만은 다색 로고라 원본 이미지를 그대로 쓴다. */
.sl-au .login_social_btn.kakao .img img,
.sl-au .login_social_btn.naver .img img,
.sl-au .login_social_btn.apple .img img,
.sl-au .login_social_btn.facebook .img img { display: none; }

/* 카카오 — 브랜드 노랑 + 검정 말풍선 */
.sl-au .login_social_btn.kakao,
.sl-au .login_social_btn.kakao:link,
.sl-au .login_social_btn.kakao:visited {
	border-color: #fee500;
	background: #fee500;
	color: #191919;
}
.sl-au .login_social_btn.kakao .img {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919'%3E%3Cpath d='M12 3C6.9 3 2.8 6.3 2.8 10.3c0 2.6 1.7 4.9 4.3 6.2-.2.7-.7 2.6-.8 3-.1.5.2.5.4.4.2-.1 2.6-1.8 3.7-2.5.5.1 1.1.1 1.6.1 5.1 0 9.2-3.3 9.2-7.2S17.1 3 12 3z'/%3E%3C/svg%3E");
}

/* 네이버 — 브랜드 그린 + 흰 N */
.sl-au .login_social_btn.naver,
.sl-au .login_social_btn.naver:link,
.sl-au .login_social_btn.naver:visited {
	border-color: #03c75a;
	background: #03c75a;
	color: #fff;
}
.sl-au .login_social_btn.naver .img {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M14.2 12.6 9.6 6H5.5v12h4.3v-6.6l4.6 6.6h4.1V6h-4.3v6.6z'/%3E%3C/svg%3E");
}

/* 애플 — 흰 배경 + 검정 로고 (Apple 표기 가이드) */
.sl-au .login_social_btn.apple .img {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M16.4 12.7c0-2.2 1.8-3.3 1.9-3.4-1-1.5-2.6-1.7-3.2-1.7-1.4-.1-2.7.8-3.3.8-.7 0-1.7-.8-2.8-.8-1.5 0-2.8.8-3.6 2.1-1.5 2.6-.4 6.5 1.1 8.7.7 1 1.6 2.2 2.7 2.2 1.1 0 1.5-.7 2.8-.7 1.3 0 1.6.7 2.8.7 1.2 0 1.9-1.1 2.6-2.1.8-1.2 1.2-2.4 1.2-2.4-.1 0-2.2-.9-2.2-3.4zM14.3 5.9c.6-.7 1-1.7.9-2.7-.9 0-2 .6-2.6 1.3-.6.6-1.1 1.7-.9 2.6 1 .1 2-.5 2.6-1.2z'/%3E%3C/svg%3E");
}

/* 페이스북 — 브랜드 블루 + 흰 f */
.sl-au .login_social_btn.facebook,
.sl-au .login_social_btn.facebook:link,
.sl-au .login_social_btn.facebook:visited {
	border-color: #1877f2;
	background: #1877f2;
	color: #fff;
}
.sl-au .login_social_btn.facebook .img {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5H16.7V3.6c-.3 0-1.3-.1-2.5-.1-2.5 0-4.2 1.5-4.2 4.3v2.1H7.3V13h2.7v8h3.5z'/%3E%3C/svg%3E");
}

/* 이메일(일반) 회원가입 — 로고 없이 글자만 */
.sl-au .login_social_btn.join { color: rgba(43, 43, 40, .8); }

/* --------------------------------------------------------------------------
   7. 약관 동의 (write.jsp)
   -------------------------------------------------------------------------- */
.sl-au .login_etc_wrapper + .login_etc_wrapper { margin-top: 8px; }
.sl-au .login_etc_box01 {
	height: auto;   /* board.css 의 전역 .login_etc_box01{height:190px} 이 새어 들어와
	                   안쪽 .txt_box(220px)를 못 담고 넘치던 문제라 명시적으로 재선언 */
	overflow: hidden;
	margin: 0 0 12px;
	border: 1px solid rgba(43, 43, 40, .12);
	border-radius: 8px;
	background: var(--sl-cream);
	box-sizing: border-box;
}
.sl-au .login_etc_box01 .txt_box {
	height: 190px;   /* 넘치기 전 원래 보이던 박스 크기(board.css 190px)에 맞춤 */
	padding: 20px;
	overflow-y: auto;
	overflow-x: auto;   /* 표 등 폭이 넓은 원문은 박스 안에서 가로 스크롤 */
	font-size: 14px;
	line-height: 1.8;
	color: rgba(43, 43, 40, .72);
	box-sizing: border-box;
	word-break: break-all;
}
/* 약관 원문은 관리자에서 입력한 HTML 이라 고정폭·絶대배치·큰 글씨가 섞여 들어온다.
   박스를 넘어 겹쳐 보이던 원인이므로 안쪽 요소를 박스 폭에 맞춰 눌러 준다 */
.sl-au .login_etc_box01 .txt_box * {
	max-width: 100% !important;
	position: static !important;
	float: none !important;
	font-size: inherit !important;
	line-height: inherit !important;
	word-break: break-all;
	box-sizing: border-box;
}
.sl-au .login_etc_box01 .txt_box table { width: 100% !important; table-layout: fixed; }
.sl-au .login_etc_box01 .txt_box img { height: auto !important; }

/* 동의 체크(왼쪽) + 전문보기(오른쪽 끝) 한 행 */
.sl-au .sl-agree-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
}
.sl-au .sl-agree-row .id_save_box { flex: 1 1 auto; min-width: 0; }

/* --------------------------------------------------------------------------
   7-1. 게시판 글쓰기 전용 (board/reply/write.jsp)
        위 인증 폼과 클래스 체계가 같고, 아래 요소들만 추가로 쓰인다
   -------------------------------------------------------------------------- */
/* 내용 입력 textarea */
.sl-au .form_textarea01,
.sl-au textarea {
	width: 100%;
	min-height: 200px;
	padding: 14px 16px;
	border: 1px solid rgba(43, 43, 40, .18);
	border-radius: 8px;
	background: #fff;
	color: var(--sl-dark);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.7;
	resize: vertical;
	box-sizing: border-box;
	transition: border-color .2s ease;
}
.sl-au textarea::placeholder { color: rgba(43, 43, 40, .38); }
.sl-au textarea:focus { border-color: var(--sl-orange); outline: none; }

/* 지점·이메일 선택 등 select 한 줄 */
.sl-au .login_form_flex_box01 {
	display: flex;
	align-items: center;
	gap: 8px;
}
.sl-au .login_form_flex_box01 select {
	width: 100%;
	height: 52px;
	padding: 0 14px;
	border: 1px solid rgba(43, 43, 40, .18);
	border-radius: 8px;
	background: #fff;
	color: var(--sl-dark);
	font-family: inherit;
	font-size: 15px;
	box-sizing: border-box;
}

/* 공개 / 비공개 라디오 */
.sl-au .radio_type01_wrapper {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 10px;
}
.sl-au .radio_type01 {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: rgba(43, 43, 40, .72);
	cursor: pointer;
}
.sl-au .radio_type01 input[type="radio"] {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--sl-orange);
	cursor: pointer;
}
/* 제목 아래 라디오 사이에 들어 있는 <br> 은 여백만 벌린다 */
.sl-au .login_form_box01 > br { display: none; }

/* 증상 선택 — 항목이 여덟 개라 한 줄에 다 들어가지 않는다.
   줄바꿈을 허용하고, 칩처럼 테두리를 둘러 선택 상태가 눈에 들어오게 한다 */
.sl-au .sl-symptom-list {
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 0;
}
.sl-au .sl-symptom-list .radio_type01 {
	padding: 9px 14px;
	border: 1px solid rgba(43, 43, 40, .18);
	border-radius: 8px;
	background: #fff;
	transition: border-color .2s ease, background .2s ease;
}
.sl-au .sl-symptom-list .radio_type01:hover { border-color: rgba(43, 43, 40, .4); }
/* :has 를 지원하지 않는 브라우저에서는 테두리만 그대로 — 기능에는 영향이 없다 */
.sl-au .sl-symptom-list .radio_type01:has(input:checked) {
	border-color: var(--sl-orange);
	background: #fdf3ef;
	color: var(--sl-dark);
	font-weight: 600;
}

/* 첨부파일 — 라벨 전체가 클릭 영역이고 안쪽 input[type=file] 은 숨겨져 있다 */
.sl-au .add_input_box01 {
	display: flex;
	align-items: center;
	gap: 8px;
}
.sl-au .file_label01 {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	padding: 0 44px 0 16px;
	border: 1px solid rgba(43, 43, 40, .18);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	box-sizing: border-box;
}
.sl-au .file_label01 input[type="file"] { display: none !important; }
.sl-au .file_label01 .placeholder_txt01,
.sl-au .file_label01 .file_name01 {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 15px;
}
.sl-au .file_label01 .placeholder_txt01 { color: rgba(43, 43, 40, .38); }
.sl-au .file_label01 .file_name01 { color: var(--sl-dark); }
/* 첨부 추가·제거 버튼은 본문 제출 버튼만큼 클 필요가 없다 */
.sl-au .add_input_box01 .login_chk_btn01 {
	width: auto;
	flex: 0 0 auto;
	height: 52px;
	padding: 0 16px;
	font-size: 14px;
}

/* 개인정보처리방침 '전문보기' 링크 — 동의 문구보다 한 단계 작게 */
.sl-au .jeon_moon_btn,
.sl-au .jeon_moon_btn:link,
.sl-au .jeon_moon_btn:visited {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 400;
	color: rgba(43, 43, 40, .5);
	white-space: nowrap;
	text-decoration: underline;
	text-underline-position: under;
}
.sl-au .jeon_moon_btn:hover { color: var(--sl-orange-dark); }

.sl-au .login_etc_wrapper.mt20 { margin-top: 8px; }
.sl-au .mt20 { margin-top: 20px; }
.sl-au .pd_left10px { padding-left: 0; }
.sl-au .he_txt {
	margin: 0 0 8px;
	font-size: 13px;
	color: rgba(43, 43, 40, .55);
}

/* --------------------------------------------------------------------------
   7-2. 약관 문서 페이지 (member/policy.jsp · agree.jsp · agreement.jsp)
        서브 히어로 없이, 인증 화면과 같은 카드 한 장으로 통일한다.
        본문은 관리자(환경설정 > 약관관리)에서 입력한 HTML 이 그대로 들어온다
   -------------------------------------------------------------------------- */
/* 약관 원문은 줄이 길어 폼 카드(520px)보다 넓어야 읽힌다 */
.sl-au .new_login_wrapper.doc { max-width: 900px; }
.sl-au .stipulation_content {
	margin: 0;
	padding: 0;
	font-size: var(--sl-text);
	line-height: 2.1;
	color: rgba(43, 43, 40, .78);
	word-break: break-all;
}
/* 원문 HTML 에 고정폭·절대배치·float 가 섞여 들어와 카드를 뚫고 나오는 것을 막는다
   (글자 크기는 원문 계층을 살려 두고 폭 관련 속성만 눌러 준다)

   행간(line-height)도 여기서 함께 눌러야 한다 — 원문에 인라인으로 line-height:1.2 같은
   값이 박혀 들어와 위에서 정한 행간이 무시되고 줄이 붙어 보이던 원인이다 */
.sl-au .stipulation_content * {
	max-width: 100% !important;
	position: static !important;
	float: none !important;
	line-height: inherit !important;
	word-break: break-all;
	box-sizing: border-box;
}
/* 문단 사이는 행간과 별개로 한 칸 더 띄운다.
   원문이 <p> 없이 <br> 로만 이어진 경우에도 위 행간(2.1)이 그대로 적용된다 */
.sl-au .stipulation_content p { margin: 0 0 20px; }
.sl-au .stipulation_content div { margin-bottom: 6px; }
.sl-au .stipulation_content h1,
.sl-au .stipulation_content h2,
.sl-au .stipulation_content h3,
.sl-au .stipulation_content h4,
.sl-au .stipulation_content strong,
.sl-au .stipulation_content b { color: var(--sl-dark); }
.sl-au .stipulation_content h1,
.sl-au .stipulation_content h2,
.sl-au .stipulation_content h3,
.sl-au .stipulation_content h4 { margin: 32px 0 8px; line-height: 1.5 !important; }
/* 조항 제목(굵은 글씨)만 있는 원문도 많다 → 앞 문단과 붙지 않게 위쪽 여백을 준다 */
.sl-au .stipulation_content p > strong:only-child,
.sl-au .stipulation_content p > b:only-child { display: inline-block; margin-top: 10px; }
.sl-au .stipulation_content ul,
.sl-au .stipulation_content ol { margin: 0 0 20px; padding-left: 20px; }
.sl-au .stipulation_content li { margin-bottom: 4px; }
.sl-au .stipulation_content table {
	width: 100% !important;
	table-layout: fixed;
	border-collapse: collapse;
	margin: 6px 0 18px;
}
/* 표 안은 본문만큼 넓은 행간이 필요 없다 (위 * 규칙을 되돌린다) */
.sl-au .stipulation_content th,
.sl-au .stipulation_content td {
	padding: 10px;
	border: 1px solid rgba(43, 43, 40, .14);
	font-size: 14px;
	line-height: 1.75 !important;
}
.sl-au .stipulation_content th *,
.sl-au .stipulation_content td * { line-height: 1.75 !important; }
.sl-au .stipulation_content td p:last-child,
.sl-au .stipulation_content th p:last-child { margin-bottom: 0; }
.sl-au .stipulation_content th { background: #f6f4f1; font-weight: 600; }
.sl-au .stipulation_content img { height: auto !important; }
.sl-au .stipulation_content a { color: var(--sl-orange-dark); }

/* --------------------------------------------------------------------------
   8. 반응형 (본문은 var(--sl-text) : PC 16px / 640 이하 14px — site_layout.css 타이포 기준)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.sl-au { padding: 96px 20px 80px; }
	.sl-au .new_login_wrapper { padding: 40px 32px; }
	.sl-au .login_tit01 { font-size: 24px; margin-bottom: 28px; }
}

@media (max-width: 640px) {
	.sl-au { padding: 64px 20px 64px; }
	/* 화면이 좁으면 카드 테두리가 화면 가장자리에 붙어 답답하다 → 여백을 줄이고 폭을 채운다 */
	.sl-au .new_login_wrapper { padding: 30px 20px; }
	.sl-au .login_tit01 { font-size: 22px; margin-bottom: 24px; }

	.sl-au .login_input_form_box01 input,
	.sl-au .selectNum,
	.sl-au .selecEmail { height: 48px; font-size: 14px; line-height: 46px; }
	.sl-au .login_chk_btn01 { height: 50px; font-size: 15px; }
	.sl-au .login_chk_btn01.type02 { height: 48px; padding: 0 14px; font-size: 14px; }
	.sl-au .login_submit_btn_box01 .login_chk_btn01.type02 { height: 50px; }

	/* 전화번호 3분할은 좁은 폭에서 칸이 너무 작아진다 → 앞자리 선택만 고정폭으로 */
	.sl-au .login_tel_flex_box01 { gap: 6px; }
	.sl-au .selectNum { flex: 0 0 84px; padding: 0 8px; }

	.sl-au .login_etc_box01 .txt_box { height: 180px; padding: 16px; font-size: 13px; }
	.sl-au .login_chk_wrapper01 { margin-top: 16px; }

	/* 약관 문서 — 표가 있는 원문은 좁은 폭에서 칸이 뭉개진다 → 박스 안에서만 가로 스크롤.
	   글자가 작아지는 만큼 행간은 PC 와 비슷한 수준으로 유지한다 (한 줄이 짧아 더 촘촘해 보인다) */
	.sl-au .stipulation_content { line-height: 2; overflow-x: auto; }
	.sl-au .stipulation_content p { margin-bottom: 18px; }
	.sl-au .stipulation_content th,
	.sl-au .stipulation_content td { padding: 8px; font-size: 13px; line-height: 1.7 !important; }

	/* 글쓰기 폼 */
	.sl-au textarea { min-height: 160px; font-size: 14px; }
	.sl-au .login_form_flex_box01 select,
	.sl-au .file_label01 { height: 48px; font-size: 14px; }
	.sl-au .file_label01 .placeholder_txt01,
	.sl-au .file_label01 .file_name01 { font-size: 14px; }
	.sl-au .add_input_box01 .login_chk_btn01 { height: 48px; padding: 0 12px; font-size: 13px; }

	/* 소셜 버튼은 높이를 유지하고 로고만 살짝 줄여 좌우 여백을 확보한다 */
	.sl-au .login_social_btn { height: 50px; padding: 0 48px; font-size: 15px; }
	.sl-au .login_social_btn .img { left: 14px; width: 28px; height: 28px; margin-top: -14px; }
	.sl-au #apple_login .img { width: 34px; height: 34px; margin-top: -17px; }
}