@charset "utf-8";
/* ============================================================
회원 모달 (.modal > .modal_cont.member) + 알림/확인 레이어(.msg_layer) — KO 프론트 공용
로그인(login_1) / 회원가입(join_1·join_2·join_3) / 아이디·비밀번호 찾기(findIdPass·결과) / 비밀번호 변경(passChange)
inc/footer.php 에서 자체 로드(common.css 보다 뒤) — 공용 common.css 의 잔존 규칙을 같은 셀렉터로 이긴다.
★ 2026-10-13 크기·반응형을 동탄제일병원(dongtan-dev.soijeong.com, 같은 회원 모달 이식 원본) 과 똑같이 맞췄다(사용자 지시
「크기도 똑같이, css 를 거의 가져오고 색상만 엘레브 색으로」). 동탄은 카드 400px(2561↑ 500) · 입력 48→45(768)→40(600) 처럼
rem + 크기 변수로 줄어드는데, 이 파일은 메인·서브의 rem 기준값이 달라(main.css 재정의) rem 을 그대로 쓸 수 없다 —
그래서 동탄의 html font-size 를 모달 전용 변수 --lmr 로, 동탄 :root 의 글자·입력 높이 변수를 --lm-p*·--lm-h8·--lm-inpH 로
옮겨 두고 동탄 규칙의 `Nrem` → `calc(N * var(--lmr))` 로 환산했다. 동탄 값이 바뀌면 아래 변수 표만 고치면 된다.
색은 엘레브 팔레트(--lm-*) — 동탄 point01(로즈) → 엘레브 보라, gray90 → 잉크, 체크 전체동의 박스 → #F6F6F6.
============================================================ */
.modal,
.msg_layer {
/* 엘레브 팔레트 — common.css 가 아직 로드되지 않은 문서에서도 모달만 단독으로 그려지게 리터럴로 둔다 */
--lm-purple: #493C75; /* 보라 — 체크 채움·활성 테두리·아이콘·배지 글자·hover */
--lm-purple-light: #B5A0F9; /* 연한 보라 — 필수(*) 표시 */
--lm-brown: #A37E73; /* 브라운 — STEP 라벨 */
--lm-ink: #1C1C1C; /* Gray900 — 버튼·본문 진한색 */
--lm-black: #000;
--lm-line: #CFCFCF; /* Gray200 — 입력창·라인 버튼 테두리 */
--lm-gray: #B5B5B5; /* Gray300 — 플레이스홀더·보조 링크·설명 */
--lm-gray-dark: #828282; /* Gray500 — 약관 항목 텍스트 */
--lm-cool: #9AA5B1; /* Cool Gray300 — 체크박스 테두리·구분선 */
--lm-bg: #F6F6F6; /* BG 1 — 전체동의 박스·아이디 박스·배지 */
--lm-btn-gray: #E8E8E8; /* Gray100 — 구글·틱톡 버튼 */
/* 동탄 크기 체계 — html font-size(--lmr) · :root 변수(동탄 common.css 1·2001~2560·1640·1240·768·600 구간) */
--lmr: 7.5px;
--lm-inpH: max(calc(5.5 * var(--lmr)), 48px);
--lm-h8: max(calc(2.5 * var(--lmr)), 21px);
--lm-p1: max(calc(2.2 * var(--lmr)), 20px);
--lm-p2: max(calc(2 * var(--lmr)), 18px);
--lm-p3: max(calc(1.8 * var(--lmr)), 15px);
--lm-p4: max(calc(1.6 * var(--lmr)), 14px);
--lm-p5: max(calc(1.5 * var(--lmr)), 13px);
--lm-p6: max(calc(1.4 * var(--lmr)), 12px);
--lm-p7: max(calc(1.3 * var(--lmr)), 11px);
--lm-inPd: 20px;
}
@media screen and (min-width: 2561px) { .modal, .msg_layer { --lmr: 10px; } }
@media screen and (min-width: 2001px) and (max-width: 2560px) { .modal, .msg_layer { --lmr: clamp(8.5px, 3.1424px + 0.2679vw, 10px); } }
@media screen and (max-width: 1640px) { .modal, .msg_layer { --lmr: 7px; } }
@media screen and (max-width: 1240px) {
.modal, .msg_layer {
--lmr: 6.5px;
--lm-h8: 18px; --lm-p1: 16px; --lm-p2: 15px; --lm-p3: 14px; --lm-p4: 13px; --lm-p5: 13px; --lm-p6: 12px; --lm-p7: 11px;
}
}
@media screen and (max-width: 768px) {
.modal, .msg_layer { --lmr: 6px; --lm-inpH: 45px; --lm-p5: 12px; --lm-inPd: 15px; }
}
@media screen and (max-width: 600px) {
.modal, .msg_layer {
--lm-inpH: 40px;
--lm-h8: 16px; --lm-p1: 14px; --lm-p2: 13px; --lm-p3: 12px; --lm-p4: 12px; --lm-p5: 11px; --lm-p6: 11px; --lm-p7: 10px;
}
}
.modal {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%;
padding: 60px 0;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
pointer-events: none;
overflow-x: hidden; overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
transition: opacity 0.3s ease-in-out;
z-index: 9999;
}
.modal.open { opacity: 1; pointer-events: auto; }
/* display:table + table-cell 은 내용 높이가 뷰포트를 넘어도 세로 가운데 정렬이 깨지지 않는다
(flex + align-items:center 는 넘칠 때 위쪽이 잘려 스크롤로 접근이 안 된다). */
.modal .modal_wrap { display: table; table-layout: fixed; width: 100%; height: 100%; padding: 0 var(--lm-inPd); }
.modal .modal_wrap .scroll_box { display: table-cell; vertical-align: middle; }
/* ── 회원 모달 공통 껍데기 ────────────────────────────── */
/* 카드 폭 — 동탄: 로그인·가입·찾기·결과 모두 max(50rem, 400px) (2561↑ 500, 그 아래 400) */
.modal .modal_wrap .modal_cont.member,
.modal .modal_wrap .modal_cont.member.join,
.modal .modal_wrap .modal_cont.member.narrow { position: relative; width: max(calc(50 * var(--lmr)), 400px); max-width: 100%; margin: 0 auto; padding: 0; }
.modal .modal_cont.member { font-family: 'Pretendard', sans-serif; letter-spacing: -0.02em; }
.modal .modal_cont.member * { box-sizing: border-box; }
/* 닫기 — 동탄: 카드 안 top 3.5rem / right 3rem / 4rem 정사각(40 뷰박스 X, 선 2). 색만 엘레브 연회색(#B5B5B5).
⚠️ common.css `.page_wrap .modal_wrap .modal_cont .modal_close` 가 검정 40px X 배경을 깔고
특이도가 (0,4,0)이라 여기도 .modal_wrap 을 붙여 같은 특이도 + 로드 순서로 이긴다. */
.modal .modal_wrap .modal_cont.member .modal_close {
position: absolute;
top: calc(3.5 * var(--lmr)); right: calc(3 * var(--lmr));
display: block;
width: calc(4 * var(--lmr)); height: calc(4 * var(--lmr));
padding: 0;
border: 0;
background: url('data:image/svg+xml,') no-repeat center / contain;
cursor: pointer;
transition: transform 0.25s, opacity 0.25s;
z-index: 3;
}
@media (min-width: 1241px) {
.modal .modal_wrap .modal_cont.member .modal_close:hover { transform: rotate(90deg); opacity: 0.75; }
}
/* ── 로그인 ───────────────────────────────────────────── */
.modal .member .login_wrap { padding: calc(7 * var(--lmr)) calc(4.5 * var(--lmr)); background: #fff; border-radius: calc(2 * var(--lmr)); }
.modal .member .login_wrap .logo { width: 50%; margin: 0 auto; text-align: center; }
.modal .member .login_wrap .logo img { display: block; width: 100%; }
/* headerLogoImgs 는 무채색+컬러를 함께 출력한다 — 흰 배경 모달에서는 컬러만 쓴다. */
.modal .member .login_wrap .logo .logo_mono { display: none; }
.modal .member .login_wrap .input_wrap { margin-top: 40px; }
.modal .member .login_wrap .input_wrap .inp { position: relative; margin-bottom: 10px; }
.modal .member .login_wrap .input_wrap .inp + .inp { margin-top: 0; }
.modal .member .login_wrap .input_wrap input {
width: 100%; height: var(--lm-inpH);
padding: 0 calc(2 * var(--lmr));
background-color: #fff;
border: 1px solid var(--lm-line); border-radius: 5px;
font-size: max(var(--lm-p5), 14px); font-weight: 400; line-height: calc(var(--lm-inpH) - 2px); letter-spacing: -0.02em; color: var(--lm-ink);
transition: border-color 0.25s, box-shadow 0.25s;
}
.modal .member .login_wrap .input_wrap input::placeholder { color: var(--lm-gray); font-weight: 400; opacity: 1; }
/* 활성 입력창 — 1px 테두리 + 1px 안쪽 그림자(두께 변화로 흔들리지 않게) */
.modal .member .login_wrap .input_wrap input:focus { border-color: var(--lm-purple); box-shadow: inset 0 0 0 1px var(--lm-purple); outline: none; }
.modal .member .login_wrap .input_wrap .inp.has_pw_toggle input { padding-right: calc(5 * var(--lmr)); }
.modal .member .login_wrap .input_wrap .pw_toggle {
position: absolute; top: 50%; right: calc(1.2 * var(--lmr)); transform: translateY(-50%);
display: flex; align-items: center; justify-content: center;
width: calc(3.2 * var(--lmr)); height: calc(3.2 * var(--lmr)); padding: 0;
border: none; background: none; color: var(--lm-cool);
cursor: pointer; transition: color 0.2s; z-index: 2;
}
.modal .member .login_wrap .input_wrap .pw_toggle.on { color: var(--lm-purple); background: none; }
@media (min-width: 1241px) {
.modal .member .login_wrap .input_wrap .pw_toggle:hover { color: var(--lm-purple); background: none; }
}
.modal .member .login_wrap .input_wrap .pw_toggle svg { display: block; }
.modal .member .login_wrap .input_wrap button[type="submit"] {
width: 100%; height: calc(var(--lm-inpH) + 0.5 * var(--lmr)); margin-top: calc(1 * var(--lmr)); padding: 0;
background: var(--lm-ink); color: #fff;
border: none; border-radius: 5px;
font-size: var(--lm-p3); font-weight: 600; line-height: normal; letter-spacing: -0.02em; text-align: center;
cursor: pointer; transition: background-color 0.25s;
}
@media (min-width: 1241px) {
.modal .member .login_wrap .input_wrap button[type="submit"]:hover { background-color: var(--lm-purple); }
}
/* 회원가입 | 아이디·비밀번호 찾기 — 구분선은 글자 높이(1em) 세로선 */
.modal .member .login_wrap .util_wrap { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: calc(2.5 * var(--lmr)); }
.modal .member .login_wrap .util_wrap a {
position: relative;
padding: 0; margin: 0; border: 0;
font-size: var(--lm-p6); font-weight: 500; line-height: 1; letter-spacing: -0.02em;
color: var(--lm-gray);
transition: color 0.3s;
}
.modal .member .login_wrap .util_wrap a + a { padding-left: calc(1.5 * var(--lmr)); margin-left: calc(1.5 * var(--lmr)); border-left: 0; }
.modal .member .login_wrap .util_wrap a + a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 1em; background-color: var(--lm-cool); opacity: 0.5; }
@media (min-width: 1241px) {
.modal .member .login_wrap .util_wrap a:hover { color: var(--lm-ink); }
}
/* SNS 버튼 — 네이버·카카오 브랜드색 / 구글·틱톡 회색 */
.modal .member .login_wrap .sns_wrap { margin-top: 40px; }
.modal .member .login_wrap .sns_wrap .btn {
position: relative;
display: flex; align-items: center; justify-content: center; gap: 0;
height: var(--lm-inpH); padding: 0;
border: none; border-radius: 5px;
font-size: max(var(--lm-p6), 13px); font-weight: 600; line-height: normal; letter-spacing: -0.02em; color: var(--lm-ink);
transition: background-color 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.modal .member .login_wrap .sns_wrap .btn + .btn { margin-top: 10px; }
.modal .member .login_wrap .sns_wrap .btn .sns-txt { margin: 0; }
.modal .member .login_wrap .sns_wrap .btn .icon-sns { display: flex; align-items: center; justify-content: center; flex: none; width: auto; height: auto; margin: 0 0.5em 0 0; }
.modal .member .login_wrap .sns_wrap .btn .icon-sns svg { display: block; width: 1.7em; height: auto; flex-shrink: 0; }
.modal .member .login_wrap .sns_wrap .btn .icon-sns.icon-google svg { width: 1.8em; }
.modal .member .login_wrap .sns_wrap .btn.naver { background-color: #2EB400; color: #fff; }
.modal .member .login_wrap .sns_wrap .btn.naver svg path { fill: #fff; }
.modal .member .login_wrap .sns_wrap .btn.kakao { background-color: #FFDC16; color: #391B1B; }
.modal .member .login_wrap .sns_wrap .btn.kakao svg path { fill: #391B1B; }
.modal .member .login_wrap .sns_wrap .btn.google,
.modal .member .login_wrap .sns_wrap .btn.tiktok { background-color: var(--lm-btn-gray); color: var(--lm-ink); }
@media (min-width: 1241px) {
.modal .member .login_wrap .sns_wrap .btn.naver:hover { background-color: #29A100; color: #fff; }
.modal .member .login_wrap .sns_wrap .btn.kakao:hover { background-color: #F5D200; color: #391B1B; }
.modal .member .login_wrap .sns_wrap .btn.google:hover, .modal .member .login_wrap .sns_wrap .btn.tiktok:hover { background-color: #DCDCDC; color: var(--lm-ink); }
}
/* 최근 로그인 배지 — 버튼 위쪽에 걸친 잉크 말풍선 */
.modal .member .login_wrap .is_last_login { position: relative; }
.modal .member .login_wrap .last_login_badge {
position: absolute; top: -35%; bottom: auto; right: calc(1.5 * var(--lmr)); margin: 0;
display: inline-flex; align-items: center; justify-content: center;
width: auto; height: 2.7em; padding: 0 calc(1.2 * var(--lmr));
background-color: var(--lm-ink); border-radius: 100px;
font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: -0.02em;
color: #fff;
white-space: nowrap; pointer-events: none; z-index: 2;
animation: lastLoginFloat 2.4s ease-in-out infinite;
}
/* ::after 는 common.css 의 구(로즈 말풍선 SVG) 규칙을 전부 되돌려야 한다 — background/크기 포함 */
.modal .member .login_wrap .last_login_badge::after {
content: ''; position: absolute; top: 100%; bottom: auto; left: 50%; right: auto;
transform: translateX(-50%);
width: 0; height: 0; background: none; z-index: auto;
border: 5px solid transparent; border-top-color: var(--lm-ink); border-bottom: 0;
}
@keyframes lastLoginFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
/* ── 회원가입 / 찾기 공통 카드 ─────────────────────────── */
/* 스크롤은 바깥 오버레이(.modal, overflow-y:auto)가 담당한다 — 카드 자체에 max-height/overflow 를 주지 말 것(휠이 카드 위에서만 먹는 문제). */
.modal .member .join_wrap { padding: calc(5.5 * var(--lmr)) calc(4.5 * var(--lmr)) calc(4.5 * var(--lmr)); background: #fff; border-radius: calc(2 * var(--lmr)); }
.modal .member .join_wrap .txt_box { margin-bottom: calc(3.5 * var(--lmr)); }
.modal .member .join_wrap .txt_box .step { margin: 0; font-size: var(--lm-p4); font-weight: 700; line-height: 1.7; letter-spacing: -0.02em; color: var(--lm-brown); }
.modal .member .join_wrap .txt_box .tit { margin: calc(1.4 * var(--lmr)) 0 0; font-size: var(--lm-h8); font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: var(--lm-black); }
/* 간편로그인 가입 안내(join_1 sns=1) — 동탄 .txt_box .desc 와 같은 자리·크기 */
.modal .member .join_wrap .txt_box .sns_note { margin: calc(1 * var(--lmr)) 0 0; font-size: var(--lm-p5); font-weight: 400; line-height: 1.5; letter-spacing: -0.02em; color: var(--lm-gray-dark); }
/* 체크박스 공통 — 네이티브 input 은 숨기고 라벨 안 SVG(둥근 사각 + 체크)로 표현 */
.modal .member .join_wrap input[type="checkbox"],
.modal .member .join_wrap input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.modal .member .join_wrap label { display: flex; align-items: center; gap: calc(1 * var(--lmr)); cursor: pointer; }
.modal .member .join_wrap .chk_ico,
.modal .member .join_wrap .chk_wrap svg.chk_ico { flex: none; width: max(calc(2.5 * var(--lmr)), 20px); height: max(calc(2.5 * var(--lmr)), 20px); }
.modal .member .join_wrap .chk_ico .box { fill: #fff; stroke: var(--lm-cool); transition: fill 0.2s, stroke 0.2s; }
.modal .member .join_wrap .chk_ico .tick { fill: none; stroke: var(--lm-line); transition: stroke 0.2s; }
.modal .member .join_wrap input[type="checkbox"]:checked + label .chk_ico .box { fill: var(--lm-purple); stroke: var(--lm-purple); }
.modal .member .join_wrap input[type="checkbox"]:checked + label .chk_ico .tick { stroke: #fff; }
.modal .member .join_wrap input[type="checkbox"]:focus-visible + label .chk_ico { outline: 2px solid var(--lm-purple); outline-offset: 2px; border-radius: 6px; }
/* 전체 동의 — 높이 4em(라벨 글자 p3 기준) / 라벨 왼쪽 정렬(common.css 의 space-between 을 되돌린다) */
.modal .member .join_wrap .chk_all_wrap { background-color: var(--lm-bg); border-radius: calc(0.5 * var(--lmr)); }
.modal .member .join_wrap .chk_all_wrap label {
display: flex; align-items: center; justify-content: flex-start; gap: calc(1.5 * var(--lmr));
height: 4em; padding: 0 calc(2 * var(--lmr)); margin: 0;
background: none; border-radius: calc(0.5 * var(--lmr));
font-size: var(--lm-p3);
cursor: pointer;
}
.modal .member .join_wrap .chk_all_wrap .chk_ico { width: max(calc(3.5 * var(--lmr)), 25px); height: max(calc(3.5 * var(--lmr)), 25px); }
.modal .member .join_wrap .chk_all_wrap label .txt { font-size: var(--lm-p2); font-weight: 600; line-height: normal; color: var(--lm-black); margin: 0; }
/* 개별 약관 */
.modal .member .join_wrap .agree_list { margin-top: calc(2 * var(--lmr)); padding: 0 calc(2 * var(--lmr)); }
.modal .member .join_wrap .chk_wrap { display: flex; align-items: center; gap: calc(1 * var(--lmr)); padding: calc(1 * var(--lmr)) 0; }
.modal .member .join_wrap .chk_wrap label { flex: 1 1 auto; min-width: 0; }
.modal .member .join_wrap .chk_wrap label .txt { font-size: var(--lm-p4); font-weight: 500; line-height: 1.4; color: var(--lm-gray-dark); margin: 0; }
.modal .member .join_wrap .chk_wrap label .txt em { font-style: normal; color: inherit; }
.modal .member .join_wrap .chk_wrap .view { flex: none; margin-left: auto; padding: 0; border: 0; background: none; font-size: var(--lm-p7); font-weight: 500; line-height: normal; color: var(--lm-gray); letter-spacing: -0.02em; cursor: pointer; transition: color 0.2s; }
@media (min-width: 1241px) {
.modal .member .join_wrap .chk_wrap .view:hover { color: var(--lm-ink); text-decoration: underline; text-underline-offset: 3px; }
}
/* ── STEP 02 / 찾기 입력 폼 ───────────────────────────── */
.modal .member .join_wrap .inp_wrap { margin-top: 0; }
.modal .member .join_wrap .inp_wrap + .inp_wrap { margin-top: calc(3 * var(--lmr)); }
.modal .member .join_wrap .inp_tit { display: block; margin-bottom: calc(1.2 * var(--lmr)); }
.modal .member .join_wrap .inp_tit p { display: flex; align-items: center; gap: calc(0.5 * var(--lmr)); margin: 0; font-size: var(--lm-p4); font-weight: 700; line-height: 1.7; letter-spacing: -0.02em; color: var(--lm-ink); }
.modal .member .join_wrap .inp_tit .ess { margin: 0; font-size: inherit; font-weight: 600; line-height: inherit; color: var(--lm-purple-light); }
.modal .member .join_wrap .inp_wrap input[type="text"],
.modal .member .join_wrap .inp_wrap input[type="tel"],
.modal .member .join_wrap .inp_wrap input[type="password"] {
width: 100%; height: var(--lm-inpH);
padding: 0 calc(2 * var(--lmr));
background-color: #fff;
border: 1px solid var(--lm-line); border-radius: calc(0.5 * var(--lmr));
font-size: var(--lm-p5); font-weight: 400; line-height: calc(var(--lm-inpH) - 2px); letter-spacing: -0.02em; color: var(--lm-ink);
transition: border-color 0.25s, box-shadow 0.25s;
}
.modal .member .join_wrap .inp_wrap input::placeholder { color: var(--lm-gray); font-weight: 400; opacity: 1; }
.modal .member .join_wrap .inp_wrap input:focus { border-color: var(--lm-purple); box-shadow: inset 0 0 0 1px var(--lm-purple); outline: none; }
.modal .member .join_wrap .inp_wrap input[readonly] { background-color: #fff; }
/* 중복확인 등 pill 버튼 */
.modal .member .join_wrap .flex_wrap { display: flex; align-items: center; gap: calc(1 * var(--lmr)); }
.modal .member .join_wrap .flex_wrap > input { flex: 1 1 auto; min-width: 0; }
.modal .member .join_wrap .inp_wrap .flex_wrap button,
.modal .member .join_wrap .inp_wrap .pill {
flex: none; margin: 0; width: auto; height: 3.2em; padding: 0 calc(2.2 * var(--lmr));
border: 1px solid var(--lm-ink); border-radius: 600px; background: #fff;
font-size: var(--lm-p6); font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--lm-ink);
white-space: nowrap; cursor: pointer; transition: background-color 0.25s, color 0.25s;
}
@media (min-width: 1241px) {
.modal .member .join_wrap .inp_wrap .flex_wrap button:hover, .modal .member .join_wrap .inp_wrap .pill:hover { background-color: var(--lm-ink); color: #fff; }
}
.modal .member .join_wrap .inp { position: relative; }
.modal .member .join_wrap .inp_wrap .inp.has_pw_toggle input { padding-right: calc(5 * var(--lmr)); }
/* 비밀번호 규칙/일치 검증 아이콘 — 인접형제(input + .ico). .enable = 통과(보라 원 + 흰 체크) / .unable = 실패(회색 원 + X).
⚠️ common.css 잔존 규칙이 .inp_wrap .inp 경로로 더 특이해 — 여기도 .inp_wrap 을 붙여 이긴다. */
.modal .member .join_wrap .inp_wrap .inp input + .ico { position: absolute; top: 50%; right: calc(1.8 * var(--lmr)); transform: translateY(-50%); width: max(calc(2 * var(--lmr)), 18px); height: max(calc(2 * var(--lmr)), 18px); display: none; }
.modal .member .join_wrap .inp_wrap .inp input + .ico.checked { display: block; }
.modal .member .join_wrap .inp_wrap .inp input + .ico.checked.enable { border-radius: 50%; background: var(--lm-purple) url('data:image/svg+xml,') no-repeat center / contain; }
.modal .member .join_wrap .inp_wrap .inp input + .ico.checked.unable { background: url('data:image/svg+xml,') no-repeat center / contain; }
/* 검증 아이콘 + 표시 토글이 함께 있으면 아이콘을 토글 왼쪽으로 밀고 입력 여백을 늘린다 */
.modal .member .join_wrap .inp_wrap .inp.has_pw_toggle.has_chk_ico input { padding-right: calc(8.5 * var(--lmr)); }
.modal .member .join_wrap .inp_wrap .inp.has_chk_ico input + .ico { right: calc(5.2 * var(--lmr)); }
.modal .member .join_wrap .inp_wrap .pw_toggle { position: absolute; top: 50%; right: calc(1.2 * var(--lmr)); transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: calc(3.2 * var(--lmr)); height: calc(3.2 * var(--lmr)); padding: 0; border: none; background: none; color: var(--lm-cool); cursor: pointer; transition: color 0.2s; z-index: 2; }
.modal .member .join_wrap .inp_wrap .pw_toggle.on { color: var(--lm-purple); }
@media (min-width: 1241px) {
.modal .member .join_wrap .inp_wrap .pw_toggle:hover { color: var(--lm-purple); }
}
.modal .member .join_wrap .inp_wrap .pw_toggle svg { display: block; }
/* 안내 문구(·) */
.modal .member .join_wrap .inp_wrap .dot_list,
.modal .member .join_wrap .dot_list { margin-top: calc(1 * var(--lmr)); padding: 0; color: var(--lm-gray); font-size: var(--lm-p6); }
.modal .member .join_wrap .dot_txt { position: relative; padding-left: calc(1 * var(--lmr)); font-size: var(--lm-p6); font-weight: 500; line-height: 1.5; letter-spacing: -0.02em; color: var(--lm-gray); }
.modal .member .join_wrap .dot_txt::before { content: '·'; position: absolute; left: 0; top: 0; width: auto; height: auto; border-radius: 0; background: none; color: var(--lm-gray); }
/* 이메일 — 입력창 하나 + 입력 중 도메인 자동완성 목록(엘레브 전용, _email-field.php).
목록은 입력창 기준 절대 위치 — 스크롤은 바깥 오버레이(.modal)가 맡아 모달 끝에서도 잘리지 않는다. */
.modal .member .join_wrap .email_field { position: relative; }
/* 공용 모달 카드 규칙(common.css .page_wrap .modal_wrap .modal_cont — 라운드용 overflow:hidden)이 카드 아래로
내려가는 목록을 자른다 → 이메일 입력이 있는 카드(STEP 02)만 풀어 준다. */
.page_wrap .modal_wrap .modal_cont.member.join:has(.email_field) { overflow: visible; }
.modal .member .join_wrap .email_suggest {
position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
max-height: 240px; overflow-y: auto; overscroll-behavior: contain;
margin: 0; padding: 6px 0; list-style: none;
background-color: #fff; border: 1px solid var(--lm-line); border-radius: calc(0.5 * var(--lmr));
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.modal .member .join_wrap .email_suggest[hidden] { display: none; }
.modal .member .join_wrap .email_suggest li {
display: block; margin: 0; padding: 9px calc(2 * var(--lmr));
font-size: var(--lm-p5); font-weight: 400; line-height: 1.4; letter-spacing: -0.02em; color: var(--lm-ink);
cursor: pointer; overflow-wrap: anywhere;
}
.modal .member .join_wrap .email_suggest li.active { background-color: var(--lm-bg); }
@media (min-width: 1241px) {
.modal .member .join_wrap .email_suggest li:hover { background-color: var(--lm-bg); }
}
.modal .member .join_wrap .email_suggest::-webkit-scrollbar { display: inherit; width: 10px; }
.modal .member .join_wrap .email_suggest::-webkit-scrollbar-thumb { background: #BFBFBF; border-right: 5px solid #fff; border-radius: 3px; border-top-right-radius: 8px 3px; border-bottom-right-radius: 8px 3px; }
.modal .member .join_wrap .email_suggest::-webkit-scrollbar-track { background: #fff; }
.modal .member .join_wrap .email_suggest::-webkit-scrollbar-button:vertical:decrement,
.modal .member .join_wrap .email_suggest::-webkit-scrollbar-button:vertical:increment { height: 5px; }
.modal .member .join_wrap .inp_msg { margin: calc(0.8 * var(--lmr)) 0 0; font-size: var(--lm-p7); line-height: 1.5; }
.modal .member .join_wrap .inp_msg:empty { display: none; }
.modal .member .join_wrap .inp_msg.ok { color: var(--lm-purple); }
.modal .member .join_wrap .inp_msg.fail { color: #EC4A3E; }
/* 셀렉트(nice-select) */
.modal .member .join_wrap .nice-select {
float: none; width: 100%; height: var(--lm-inpH); line-height: calc(var(--lm-inpH) - 2px); padding: 0 calc(4 * var(--lmr)) 0 calc(1.8 * var(--lmr)); margin: 0;
background-color: #fff; border: 1px solid var(--lm-line); border-radius: calc(0.5 * var(--lmr));
font-size: var(--lm-p5); font-weight: 500; letter-spacing: -0.02em; color: var(--lm-ink);
}
.modal .member .join_wrap .nice-select.open,
.modal .member .join_wrap .nice-select:focus { border-color: var(--lm-purple); }
/* :after 는 다른 시트(sub.css 계열)가 SVG 배경 화살표를 깔아 두어 체브런과 겹친다 — 배경 제거 필수 */
.modal .member .join_wrap .nice-select:after { width: calc(0.8 * var(--lmr)); height: calc(0.8 * var(--lmr)); background: none; border-top: 0; border-left: 0; border-bottom: calc(0.15 * var(--lmr)) solid var(--lm-ink); border-right: calc(0.15 * var(--lmr)) solid var(--lm-ink); right: calc(1.8 * var(--lmr)); margin-top: calc(-0.6 * var(--lmr)); transform: rotate(45deg); transform-origin: 66% 66%; transition: transform 0.2s; }
.modal .member .join_wrap .nice-select.open:after { transform: rotate(-135deg); }
/* overscroll-behavior — 목록 끝까지 굴려도 스크롤이 모달(오버레이)로 번지지 않게. 휠은 모달 컨테이너의 data-lenis-prevent 로 Lenis 를 피한다. */
.modal .member .join_wrap .nice-select .list { max-height: calc(21 * var(--lmr)); overflow-y: auto; overscroll-behavior: contain; width: 100%; border-radius: calc(0.5 * var(--lmr)); }
.modal .member .join_wrap .nice-select .option { min-height: calc(4 * var(--lmr)); line-height: calc(4 * var(--lmr)); padding-left: calc(1.8 * var(--lmr)); font-size: var(--lm-p5); }
/* 연락처 — [국번 셀렉트][번호][중복확인] */
.modal .member .join_wrap .tel_box { display: flex; align-items: center; gap: calc(1 * var(--lmr)); }
.modal .member .join_wrap .inp_wrap .tel_box .nice-select { flex: none; width: calc(11.6 * var(--lmr)); margin: 0; }
.modal .member .join_wrap .tel_box input { flex: 1 1 auto; min-width: 0; }
/* 이메일 — [아이디] @ [도메인] + 도메인 셀렉트(레거시 마크업) */
.modal .member .join_wrap .inp_wrap .email_box { display: flex; align-items: center; gap: calc(1 * var(--lmr)); }
.modal .member .join_wrap .inp_wrap .email_box input { flex: 1 1 0; min-width: 0; }
.modal .member .join_wrap .inp_wrap .email_box .at { flex: none; margin: 0; font-size: var(--lm-p4); font-weight: 400; line-height: 1; color: rgba(0, 0, 0, 0.5); }
.modal .member .join_wrap .email_sel { margin-top: calc(1 * var(--lmr)); }
.modal .member .join_wrap .email_sel .nice-select { width: 100%; }
/* 생년월일(레거시 호환) — 음/양력 라디오 + 년/월/일 셀렉트 */
.modal .member .join_wrap .radio_wrap { display: flex; align-items: center; gap: calc(3 * var(--lmr)); margin-bottom: calc(1.5 * var(--lmr)); }
.modal .member .join_wrap .radio_wrap label { gap: calc(1 * var(--lmr)); }
.modal .member .join_wrap .radio_ico { flex: none; position: relative; width: max(calc(2.3 * var(--lmr)), 20px); height: max(calc(2.3 * var(--lmr)), 20px); border: 1px solid var(--lm-line); border-radius: 50%; background: #fff; transition: border-color 0.2s; box-sizing: border-box; }
.modal .member .join_wrap input[type="radio"]:checked + label .radio_ico { border: calc(0.2 * var(--lmr)) solid var(--lm-purple); }
.modal .member .join_wrap input[type="radio"]:checked + label .radio_ico::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(0.9 * var(--lmr)); height: calc(0.9 * var(--lmr)); border-radius: 50%; background-color: var(--lm-purple); }
.modal .member .join_wrap .radio_wrap .txt { font-size: var(--lm-p5); font-weight: 500; color: var(--lm-black); }
.modal .member .join_wrap .birth_sel { display: flex; gap: calc(1 * var(--lmr)); }
.modal .member .join_wrap .birth_sel .nice-select { flex: 1 1 0; min-width: 0; }
/* 하단 버튼 — 높이 3.125em / 최소 10em / 글자 p3 / 잉크 채움, 취소는 흰 배경 + 라인 */
.modal .member .join_wrap .btn_wrap { display: flex; justify-content: center; gap: calc(1 * var(--lmr)); margin-top: calc(4 * var(--lmr)); }
.modal .member .join_wrap .btn_wrap button,
.modal .member .join_wrap .btn_wrap.two button {
display: flex; align-items: center; justify-content: center;
flex: 1; min-width: 10em; max-width: none; height: 3.125em; padding: 0;
border: 1px solid var(--lm-ink); border-radius: calc(0.5 * var(--lmr));
font-size: var(--lm-p3); font-weight: 600; letter-spacing: -0.02em; line-height: 1;
cursor: pointer; transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.modal .member .join_wrap .btn_wrap .btn_next { background-color: var(--lm-ink); color: #fff; }
.modal .member .join_wrap .btn_wrap .btn_prev { background-color: #fff; color: var(--lm-ink); border-color: var(--lm-line); }
@media (min-width: 1241px) {
.modal .member .join_wrap .btn_wrap .btn_next:hover,
.modal .member .join_wrap .btn_wrap .btn_prev:hover { background-color: var(--lm-purple); border-color: var(--lm-purple); color: #fff; }
}
/* ── 아이디 찾기 결과 / 임시비밀번호 발급 안내 ─────────── */
.modal .member .join_wrap.result_wrap,
.modal .modal_cont.member.has_close .join_wrap.result_wrap { padding-top: calc(6.5 * var(--lmr)); }
.modal .member .join_wrap .find_result { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0; background: none; }
.modal .member .join_wrap .find_result .rs_badge {
display: inline-flex; align-items: center; justify-content: center;
height: calc(3.4 * var(--lmr)); padding: 0 calc(1.8 * var(--lmr));
background-color: var(--lm-bg); border-radius: 600px;
font-size: var(--lm-p5); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--lm-purple);
word-break: break-all;
}
.modal .member .join_wrap .find_result .rs_badge + .rs_tit { margin-top: calc(1.5 * var(--lmr)); }
.modal .member .join_wrap .find_result .rs_ico { display: flex; justify-content: center; }
.modal .member .join_wrap .find_result .rs_ico svg { width: calc(6 * var(--lmr)); height: calc(6 * var(--lmr)); }
.modal .member .join_wrap .find_result .rs_tit { margin: calc(1.5 * var(--lmr)) 0 0; font-size: var(--lm-p1); font-weight: 700; line-height: 1.5; letter-spacing: -0.02em; color: var(--lm-ink); }
.modal .member .join_wrap .find_result .rs_desc { margin: calc(0.7 * var(--lmr)) 0 0; font-size: var(--lm-p4); font-weight: 400; line-height: 1.7; letter-spacing: -0.02em; color: var(--lm-gray); }
.modal .member .join_wrap .find_result .id_box {
display: flex; align-items: center; justify-content: center; gap: calc(1.2 * var(--lmr));
width: 100%; height: 3.5em; margin-top: calc(3.5 * var(--lmr)); padding: calc(1 * var(--lmr));
background-color: var(--lm-bg); border-radius: calc(0.5 * var(--lmr));
font-size: var(--lm-p3);
}
.modal .member .join_wrap .find_result .id_box + .id_box { margin-top: 10px; }
.modal .member .join_wrap .find_result .id_box svg { flex: none; width: calc(2 * var(--lmr)); height: calc(2 * var(--lmr)); }
.modal .member .join_wrap .find_result .id_box .id { margin: 0; font-size: var(--lm-p3); font-weight: 700; line-height: 1; color: var(--lm-black); word-break: break-all; }
.modal .member .join_wrap .find_result .rs_note { margin: calc(1 * var(--lmr)) 0 0; font-size: var(--lm-p7); font-weight: 400; line-height: 1.5; color: rgba(0, 0, 0, 0.5); }
/* 버튼 행 — 동탄 .modal_cont .btn_row(높이 3.125em · 최소 10em · 글자 p4) + 결과 카드는 좌우 균등(flex 1) */
.modal .member .join_wrap .find_result .btn_row { display: flex; justify-content: center; gap: calc(1 * var(--lmr)); width: 100%; margin-top: calc(3 * var(--lmr)); }
.modal .member .join_wrap .find_result .btn_row button {
display: flex; align-items: center; justify-content: center;
flex: 1; width: auto; min-width: 10em; height: 3.125em; padding: 0;
border-radius: calc(0.5 * var(--lmr)); font-size: var(--lm-p4); font-weight: 600; letter-spacing: -0.02em; line-height: 1;
cursor: pointer; transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.modal .member .join_wrap .find_result .btn_row .line { background: #fff; border: 1px solid var(--lm-line); color: var(--lm-ink); }
.modal .member .join_wrap .find_result .btn_row .fill { background: var(--lm-ink); border: 1px solid var(--lm-ink); color: #fff; }
@media (min-width: 1241px) {
.modal .member .join_wrap .find_result .btn_row button:hover { background-color: var(--lm-purple); border-color: var(--lm-purple); color: #fff; }
}
@media screen and (max-width: 768px) {
.modal .member .login_wrap .logo { width: calc(18 * var(--lmr)); }
.modal .member .join_wrap .chk_wrap { padding: calc(1.5 * var(--lmr)) 0; }
/* 동탄 768: 하단 버튼은 최대 반폭(버튼 하나면 가운데 반폭) */
.modal .member .join_wrap .btn_wrap button,
.modal .member .join_wrap .btn_wrap.two button,
.modal .member .join_wrap .find_result .btn_row button { max-width: 50%; min-width: 0; flex: 1; }
}
@media screen and (max-width: 600px) {
.modal .member .join_wrap .inp_wrap .email_box { flex-wrap: wrap; }
.modal .member .join_wrap .inp_wrap .email_box .nice-select { flex: unset; width: 100%; }
}
/* ============================================================
알림/확인 레이어 (.msg_layer — common.js alertLayer / confirmLayer / promptLayer)
동탄과 같은 크기: 카드 45rem · 라운드 2rem · 본문 p4 · 버튼 3.125em(최소 10em, 768 이하 최대 반폭).
common.css 의 옛 「알랏레이어」 규칙(같은 셀렉터)을 로드 순서로 덮는다.
============================================================ */
.msg_layer {
display: block;
position: fixed;
inset: 0;
z-index: 10000;
width: 100%; height: 100%;
padding: 20px 0;
overflow-x: hidden; overflow-y: auto;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
visibility: hidden;
pointer-events: none;
overscroll-behavior: contain;
transition: none;
}
.msg_layer.open { opacity: 1; visibility: visible; pointer-events: auto; }
.msg_layer .modal_wrap { display: table; position: relative; width: 100%; height: 100%; padding: 0 calc(2 * var(--lmr)); margin: 0 auto; table-layout: fixed; }
.msg_layer .modal_wrap .scroll_box { display: table-cell; vertical-align: middle; }
.msg_layer .modal_wrap .modal_cont {
position: relative;
width: calc(45 * var(--lmr)); max-width: 100%;
margin: 0 auto; padding: 0;
background-color: #fff;
border-radius: calc(2 * var(--lmr));
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
overflow: hidden;
}
.msg_layer .modal_wrap .modal_cont .cont { padding: calc(4.5 * var(--lmr)) calc(3 * var(--lmr)) calc(3 * var(--lmr)); text-align: center; }
.msg_layer .modal_wrap .modal_cont .cont > p,
.msg_layer .modal_wrap .modal_cont .cont p {
font-size: var(--lm-p4); font-weight: 500; line-height: 1.65; letter-spacing: -0.02em;
color: var(--lm-ink); text-align: center; word-break: keep-all;
}
.msg_layer .modal_cont .cont .tit_wrap { margin-bottom: calc(1 * var(--lmr)); font-weight: 700; }
.msg_layer .btn_wrap { display: flex; align-items: center; justify-content: center; gap: calc(1 * var(--lmr)); width: 100%; margin-top: calc(3 * var(--lmr)); }
.msg_layer .btn_wrap > * + * { margin-left: 0; }
.msg_layer .btn_wrap .btm_btn {
display: flex; align-items: center; justify-content: center;
flex: none; min-width: 10em; max-width: none; height: 3.125em; padding: 0;
border: 1px solid var(--lm-ink); border-radius: calc(0.5 * var(--lmr));
background-color: var(--lm-ink); box-shadow: none;
font-size: var(--lm-p4); font-weight: 600; line-height: normal; letter-spacing: -0.02em; color: #fff;
white-space: nowrap; cursor: pointer; transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.msg_layer .btn_wrap .btm_btn.wh { border-color: var(--lm-line); background-color: #fff; color: var(--lm-ink); }
@media (min-width: 1241px) {
.msg_layer .btn_wrap .btm_btn:hover { background-color: var(--lm-purple); border-color: var(--lm-purple); color: #fff; }
}
@media screen and (max-width: 768px) {
.msg_layer .btn_wrap .btm_btn { flex: 1; max-width: 50%; min-width: 0; }
}
/* ── 마이페이지 예약 신청 내역 상세 (resv-detail, 시안 1354:17887) ──────────────
2026-10-02 사용자 수정: 로고 삭제 → 제목(26 Bold) 좌측 정렬, 카드 600→760 · 좌우 여백 45→30 · 행 패딩 15·25→12·15 ·
사이 간격 35→25 로 세로 길이를 줄임, 닫기는 우상단 모서리에 더 붙임(20·20), 라벨과 값은 상단 정렬(메모가 길어도 첫 줄이 나란히).
→ 관리자 답변 박스(#F8F8F8 — 답변이 있을 때만) → 확인 160×50.
라벨 열은 언어마다 글자 길이가 달라 폭을 따로 준다(한 언어 안에서는 값의 시작선이 같아야 한다). */
.modal .modal_wrap .modal_cont.member.resv_detail { width: min(760px, 100%); }
.modal .modal_wrap .modal_cont.member.resv_detail .modal_close { top: 20px; right: 20px; }
.modal .member .resv_detail_wrap { display: flex; flex-direction: column; align-items: stretch; gap: 25px; padding: 40px 30px 30px; background: #fff; border-radius: 20px; color: var(--lm-ink); }
.modal .member .resv_detail_wrap .tit { margin: 0; padding-right: 40px; font-size: 26px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; text-align: left; } /* 오른쪽 40 = 닫기 버튼 자리 */
.modal .member .resv_detail_wrap .detail_list { width: 100%; margin: 0; border-bottom: 1px solid var(--lm-btn-gray); }
.modal .member .resv_detail_wrap .detail_list .row { display: flex; align-items: flex-start; gap: 30px; padding: 12px 15px; border-top: 1px solid var(--lm-btn-gray); font-size: 16px; letter-spacing: -0.02em; }
.modal .member .resv_detail_wrap .detail_list dt { flex: none; width: 94px; margin: 0; font-weight: 700; line-height: 1.7; white-space: nowrap; } /* 줄높이를 값(dd)과 같게 — 상단 정렬 시 첫 줄 글자 선이 맞는다 */
.modal .member .resv_detail_wrap .detail_list dd { flex: 1; min-width: 0; margin: 0; font-weight: 400; line-height: 1.7; word-break: break-word; }
.modal .member .resv_detail_wrap .detail_list dd.pre { white-space: pre-line; }
/* 메모(희망일정)는 긴 글이라 라벨 위 · 내용 아래로 세로 배치(2026-10-15 사용자 지시) — 좌우 배치면 라벨 칸만큼 글 폭이 줄어 줄이 길게 늘어졌다 */
.modal .member .resv_detail_wrap .detail_list .row.stack { flex-direction: column; gap: 6px; }
.modal .member .resv_detail_wrap .detail_list .row.stack dt,
body.en .modal .member .resv_detail_wrap .detail_list .row.stack dt,
body.ja .modal .member .resv_detail_wrap .detail_list .row.stack dt,
body.zh_cn .modal .member .resv_detail_wrap .detail_list .row.stack dt { width: auto; }
.modal .member .resv_detail_wrap .detail_list .row.stack dd { width: 100%; }
.modal .member .resv_detail_wrap .answer_box { width: 100%; padding: 22px 20px; border-radius: 5px; background: #F8F8F8; font-size: 16px; font-weight: 500; line-height: 1.7; letter-spacing: -0.02em; white-space: pre-line; word-break: break-word; }
.modal .member .resv_detail_wrap .empty { margin: 0; font-size: 16px; line-height: 1.7; color: var(--lm-gray-dark); text-align: center; }
.modal .member .resv_detail_wrap .btn_row { display: flex; justify-content: center; }
.modal .member .resv_detail_wrap .btn_row button { width: 160px; height: 50px; padding: 0; border: 1px solid var(--lm-ink); border-radius: 5px; background: var(--lm-ink); font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: #fff; cursor: pointer; transition: background-color 0.25s, border-color 0.25s; }
@media (min-width: 1241px) {
.modal .member .resv_detail_wrap .btn_row button:hover { background-color: var(--lm-purple); border-color: var(--lm-purple); }
}
/* 라벨 열 — 영·일문은 길어 두 줄까지 허용, 중문은 한 줄 */
body.en .modal .member .resv_detail_wrap .detail_list dt { width: 120px; white-space: normal; }
body.ja .modal .member .resv_detail_wrap .detail_list dt { width: 128px; white-space: normal; }
body.zh_cn .modal .member .resv_detail_wrap .detail_list dt { width: 128px; }
@media screen and (max-width: 768px) {
.modal .modal_wrap .modal_cont.member.resv_detail .modal_close { top: 12px; right: 12px; }
.modal .member .resv_detail_wrap { gap: 20px; padding: 28px 16px 24px; border-radius: 16px; }
.modal .member .resv_detail_wrap .tit { font-size: 21px; }
.modal .member .resv_detail_wrap .detail_list .row { gap: 15px; padding: 10px 8px; font-size: 15px; }
.modal .member .resv_detail_wrap .detail_list dt,
body.en .modal .member .resv_detail_wrap .detail_list dt,
body.ja .modal .member .resv_detail_wrap .detail_list dt,
body.zh_cn .modal .member .resv_detail_wrap .detail_list dt { width: 90px; white-space: normal; }
.modal .member .resv_detail_wrap .answer_box { padding: 20px 16px; font-size: 15px; }
.modal .member .resv_detail_wrap .btn_row { width: 100%; }
.modal .member .resv_detail_wrap .btn_row button { flex: 1; width: auto; }
}