@charset "utf-8";

/* ============================================================
   회원 (로그인 / 회원가입 / 모달) — style.css 컨벤션을 따릅니다.
   1rem = 10px, 모바일 분기 880px, 포인트 컬러 var(--fcp)

   구성
     1. 헤더 우측 로그인 영역
     2. .loginBox  — 로그인 카드 (login.php 본문 + 로그인 모달 공용)
     3. #login     — 로그인 페이지 (서브비주얼 + 타이틀)
     4. .mPop      — 모달 공통 (딤 + 가운데 정렬)
     5. .lockBox   — 회원전용 안내 모달 카드
     6. #member    — 회원가입 페이지 (기존 유지)
     7. .termsBox  — 약관 보기 모달 카드
   ============================================================ */


/* ------------------------------------------------------------
   1. 헤더 우측 로그인 영역
   .gnb 가 gap:5rem 인 flex 라, 로그인 후에도 항목 수가 늘지 않도록
   이름 + 로그아웃을 li 하나 안에 담습니다.
   ------------------------------------------------------------ */
#header .gnb .userMenu {gap: 1.4rem;}
#header .gnb .userMenu .uname {color: #fff; line-height: 2.4rem; transition: color 0.4s;}
#header .gnb .userMenu a {position: relative; padding-left: 1.6rem;}
#header .gnb .userMenu a::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 1.4rem; background: currentColor; opacity: 0.4;
}
#header.act .gnb .userMenu .uname,
#header.sub .gnb .userMenu .uname {color: #222;}

/* GNB 의 로그인/회원가입은 페이지 이동이 아니라 모달을 엽니다 */
#header .gnb .loginBtn {cursor: pointer;}


/* ------------------------------------------------------------
   2. 로그인 카드 (.loginBox)
   login.php 본문과 로그인 모달이 같은 마크업을 씁니다.
   ------------------------------------------------------------ */
.loginBox {
    width: 55rem; padding: 5rem 4rem 4rem;
    background: #fff; border-radius: 3rem;
    box-shadow: 0 0 1.5rem rgba(0,0,0,0.08);
}
.loginBox .logo {width: 11.6rem; height: 7.2rem; margin: 0 auto;}
.loginBox .logo img {width: 100%; height: 100%; object-fit: contain;}

.loginBox .bTit {
    margin-top: 3rem; text-align: center;
    font-size: 3.8rem; font-weight: 700; color: #222; line-height: 3.8rem;
}
.loginBox .bSub {
    margin-top: 2rem; text-align: center;
    font-size: 1.8rem; font-weight: 400; color: #444; line-height: 2.6rem;
}

/* 알림 메시지 */
.loginBox .msg {
    margin-top: 2.4rem; padding: 1.4rem 1.8rem; border-radius: 1rem;
    font-size: 1.5rem; font-weight: 500; line-height: 1.5;
}
.loginBox .msg.error {background: #fdeeee; color: #c0392b;}
.loginBox .msg.info  {background: #eef5eb; color: var(--fcp);}
.loginBox .msg + .msg {margin-top: 1rem;}

.loginBox form {margin-top: 3.5rem;}

/* 입력 필드 — 라벨이 테두리 안쪽 왼편에 들어갑니다 */
.loginBox .fld {
    display: flex; align-items: center; height: 6rem; margin-bottom: 1rem;
    border: 1px solid #ddd; border-radius: 1rem; background: #fff;
    transition: border-color 0.2s;
}
.loginBox .fld:focus-within {border-color: var(--fcp);}
.loginBox .fld label {
    flex-shrink: 0; width: 12.5rem; padding-left: 3rem;
    font-size: 1.6rem; font-weight: 500; color: #000;
    line-height: 1.8rem; letter-spacing: -0.02em;
}
.loginBox .fld input {
    flex: 1; min-width: 0; height: 100%; padding-right: 3rem;
    border: 0; background: none; font-family: inherit;
    font-size: 1.6rem; font-weight: 400; color: #222; letter-spacing: -0.02em;
}
.loginBox .fld input:focus {outline: none;}
.loginBox .fld input::placeholder {color: #999;}

/* 로그인 유지 / 비밀번호 찾기 · 회원가입 */
.loginBox .opts {display: flex; align-items: center; justify-content: space-between; margin-top: 2rem;}
.loginBox .opts .keep {display: flex; align-items: center; gap: 0.8rem; cursor: pointer;}
.loginBox .opts .keep input {
    width: 1.2rem; height: 1.2rem; margin: 0; flex-shrink: 0;
    accent-color: #4a8537; cursor: pointer;
}
.loginBox .opts .keep span {font-size: 1.4rem; font-weight: 400; color: #3b3b3b; line-height: 1.8rem; letter-spacing: -0.02em;}
.loginBox .opts .links {display: flex; align-items: center; gap: 3rem;}
.loginBox .opts .links a {font-size: 1.4rem; line-height: 1.8rem; letter-spacing: -0.02em;}
.loginBox .opts .links .findpw {position: relative; color: #3b3b3b; font-weight: 400;}
.loginBox .opts .links .findpw::after {
    content: ''; position: absolute; right: -1.5rem; top: 50%; transform: translateY(-50%);
    width: 1px; height: 1rem; background: #ddd;
}
.loginBox .opts .links .join {color: var(--fcp); font-weight: 600;}

/* 버튼 */
.loginBox .btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 6rem; margin-top: 3.9rem;
    border: 0; border-radius: 1rem; font-family: inherit;
    font-size: 2.2rem; font-weight: 700; cursor: pointer; transition: opacity 0.2s;
}
.loginBox .btn:hover {opacity: 0.88;}
.loginBox .btn.primary {background: var(--fcp); color: #fff;}

/* 간편로그인 — 디자인의 회색 버튼 형태에 제공자별 브랜드 컬러를 입힙니다 */
.loginBox .social {display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1.2rem;}
.loginBox .social a,
.loginBox .social span {
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    width: 100%; height: 6rem; border-radius: 1rem;
    font-size: 2.2rem; font-weight: 600; transition: opacity 0.2s;
}
.loginBox .social a:hover {opacity: 0.88;}
.loginBox .social .ico {width: 2.4rem; height: 2.4rem; flex-shrink: 0;}

.loginBox .social .kakao  {background: #FEE500; color: #191600;}
.loginBox .social .naver  {background: #03C75A; color: #fff;}
.loginBox .social .google {background: #e5e5e5; color: #444;}

/* API 키 미설정 상태 */
.loginBox .social .ready {background: #f2f2f2; color: #aaa; cursor: not-allowed;}
.loginBox .social .ready .tag {font-size: 1.6rem; font-weight: 400;}


/* ------------------------------------------------------------
   3. 로그인 / 회원가입 페이지 (#login, #join)
   서브비주얼과 타이틀은 inc/sub_visual.php 로 같은 마크업을 씁니다.
   ------------------------------------------------------------ */
#login,
#join {padding-bottom: 12rem;}

/* 서브 비주얼 */
#login .visual,
#join .visual {position: relative; height: 64rem; overflow: hidden;}
#login .visual .bg,
#join .visual .bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#login .visual .bg img,
#join .visual .bg img {width: 100%; height: 100%; object-fit: cover;}
#login .visual .dim,
#join .visual .dim {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.4;}
#login .visual .grad,
#join .visual .grad {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 19.444%);
}
/* padding-top 은 시안의 문구 위치(pc 288px / mo 192px)에 맞추기 위한 보정입니다 */
#login .visual .txt,
#join .visual .txt {
    position: relative; z-index: 1; height: 100%; padding-top: 3.2rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
}
#login .visual .lb,
#join .visual .lb {font-size: 2rem; font-weight: 400; color: #fff; line-height: 1.5; letter-spacing: 0.02em;}
#login .visual h2,
#join .visual h2 {margin-top: 0.2rem; font-size: 4.6rem; font-weight: 700; color: #fff; line-height: 1.4; letter-spacing: 0.02em;}

/* 타이틀 */
#login .titArea,
#join .titArea {margin-top: 12.4rem; text-align: center;}
#login .titArea .icon,
#join .titArea .icon {width: 7rem; height: 3.5rem; margin: 0 auto;}
#login .titArea h2,
#join .titArea h2 {margin-top: 2.9rem; font-size: 4rem; font-weight: 700; color: #26282b; line-height: 1.4;}
#login .titArea h2 span,
#join .titArea h2 span {color: var(--fcp);}
#login .titArea p,
#join .titArea p {margin-top: 2.6rem; font-size: 1.8rem; font-weight: 400; color: #26282b; line-height: 1.6;}

/* 페이지 본문의 로그인 카드
   제목은 위 .titArea 가 맡으므로 카드 머리(로고·타이틀·설명)와 그림자를 뺍니다.
   머리 마크업 자체는 inc/login_card.php 가 $cardHead = false 로 출력하지 않습니다. */
#login .loginBox {margin: 6rem auto 0; padding-top: 0; box-shadow: none;}
/* 오류 문구가 있으면 그것이, 없으면 form 이 첫 요소가 되므로 첫 요소만 위 여백을 없앱니다 */
#login .loginBox > :first-child {margin-top: 0;}

/* 회원가입 폼은 기존 #member 스타일을 그대로 쓰되 위 여백만 줄입니다 */
#join #member {padding: 6rem 0 0;}


/* ------------------------------------------------------------
   4. 모달 공통 (.mPop)
   #docPop 과 같은 방식으로 jQuery fadeIn/fadeOut 으로 여닫습니다.
   ------------------------------------------------------------ */
.mPop {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 200;}
.mPop .popBg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.5;}
.mPop .popWrap {
    position: relative; height: 100%; padding: 2rem;
    display: flex; justify-content: center; overflow-y: auto;
}
/* margin:auto 로 세로 가운데 정렬 — 카드가 화면보다 길어도 위가 잘리지 않습니다 */
.mPop .loginBox,
.mPop .lockBox,
.mPop .termsBox {flex-shrink: 0; margin: auto 0;}


/* ------------------------------------------------------------
   5. 회원전용 안내 모달 (.lockBox)
   ------------------------------------------------------------ */
.lockBox {
    width: 55rem; padding: 5rem 4rem 4rem;
    background: #fff; border-radius: 3rem;
    box-shadow: 0 0 1.5rem rgba(0,0,0,0.08); text-align: center;
}
.lockBox .ico {width: 8rem; height: 8rem; margin: 0 auto;}
.lockBox .bTit {margin-top: 3rem; font-size: 3.5rem; font-weight: 700; color: #222; line-height: 3.5rem;}
.lockBox .bTit span {color: var(--fcp);}
.lockBox .bSub {margin-top: 2rem; font-size: 1.8rem; font-weight: 400; color: #444; line-height: 2.6rem;}

.lockBox .benefit {
    width: 30rem; margin: 2rem auto 0; padding: 3rem 4.3rem 3.2rem;
    background: #f2f2f2; border-radius: 1rem; text-align: left;
}
.lockBox .benefit li {display: flex; align-items: center; gap: 1rem; font-size: 1.8rem; font-weight: 400; color: #222; line-height: 1.8rem;}
.lockBox .benefit li + li {margin-top: 1.4rem;}
.lockBox .benefit li .chk {width: 2rem; height: 2rem; flex-shrink: 0;}

.lockBox .btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 6rem; margin-top: 4rem;
    border: 0; border-radius: 1rem; font-family: inherit;
    font-size: 2.2rem; font-weight: 700; cursor: pointer; transition: opacity 0.2s;
}
.lockBox .btn:hover {opacity: 0.88;}
.lockBox .btn.primary {background: var(--fcp); color: #fff;}
.lockBox .btn.gray {margin-top: 1.2rem; background: #e5e5e5; color: #444; font-weight: 600;}

.lockBox .secure {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    margin-top: 2.5rem; font-size: 1.4rem; font-weight: 400; color: #777; line-height: 1.4rem;
}
.lockBox .secure .ic {width: 1.2rem; height: 1.4rem; flex-shrink: 0;}


/* ------------------------------------------------------------
   6. 회원가입 페이지 (#member) — 디자인 시안 없어 기존 형태 유지
   ------------------------------------------------------------ */
#member {padding: 25rem 0 17rem;}
#member .mInner {width: 100%; max-width: 52rem; margin: 0 auto;}

#member .msg {
    padding: 1.6rem 2rem; margin-bottom: 2.4rem; border-radius: 0.8rem;
    font-size: 1.6rem; font-weight: 500; line-height: 1.5;
}
#member .msg.error {background: #fdeeee; color: #c0392b;}
#member .msg.info  {background: #eef5eb; color: var(--fcp);}

#member .fld {margin-bottom: 1.8rem;}
#member .fld label {display: block; margin-bottom: 0.9rem; font-size: 1.6rem; font-weight: 600; color: #222;}
#member .fld label .req {color: var(--fcp);}
#member .fld input[type="text"],
#member .fld input[type="email"],
#member .fld input[type="tel"],
#member .fld input[type="password"] {
    width: 100%; height: 5.6rem; padding: 0 1.8rem;
    border: 1px solid #ddd; border-radius: 0.8rem; background: #fff;
    font-family: inherit; font-size: 1.6rem; color: #222;
    transition: border-color 0.2s;
}
#member .fld input:focus {outline: none; border-color: var(--fcp);}
#member .fld input::placeholder {color: #bbb;}
#member .fld .hint {margin-top: 0.8rem; font-size: 1.4rem; color: #999;}

#member .agree {margin: 2.6rem 0 2rem; padding: 2rem; background: #fafafa; border-radius: 0.8rem;}
#member .agree .chk {display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem;}
#member .agree .chk:last-child {margin-bottom: 0;}
#member .agree .chk input {width: 1.9rem; height: 1.9rem; margin-top: 0.2rem; flex-shrink: 0; accent-color: #4a8537;}
#member .agree .chk label {font-size: 1.5rem; font-weight: 400; color: #555; line-height: 1.5; cursor: pointer;}
#member .agree .chk label .req {color: var(--fcp); font-weight: 600;}
#member .agree .chk label .opt {color: #aaa;}

/* 약관 "보기" — 모달을 여는 버튼입니다 */
#member .agree .chk .termsView {
    flex-shrink: 0; margin-left: auto; padding: 0 0 0.2rem;
    border: 0; border-bottom: 1px solid #bbb; background: none;
    font-family: inherit; font-size: 1.4rem; font-weight: 400; color: #888;
    line-height: 1.5; cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
#member .agree .chk .termsView:hover {color: var(--fcp); border-color: var(--fcp);}

#member .btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 5.8rem; border: 0; border-radius: 0.8rem;
    font-family: inherit; font-size: 1.7rem; font-weight: 700;
    cursor: pointer; transition: opacity 0.2s;
}
#member .btn:hover {opacity: 0.88;}
#member .btn.primary {background: var(--fcp); color: #fff;}

#member .divider {display: flex; align-items: center; gap: 1.6rem; margin: 3.4rem 0 2.4rem;}
#member .divider::before,
#member .divider::after {content: ''; flex: 1; height: 1px; background: #e5e5e5;}
#member .divider span {font-size: 1.5rem; color: #999;}

#member .social {display: flex; flex-direction: column; gap: 1.2rem;}
#member .social a,
#member .social span {
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    width: 100%; height: 5.8rem; border-radius: 0.8rem;
    font-size: 1.7rem; font-weight: 600; transition: opacity 0.2s;
}
#member .social a:hover {opacity: 0.88;}
#member .social .ico {width: 2.2rem; height: 2.2rem; flex-shrink: 0;}

#member .social .kakao  {background: #FEE500; color: #191600;}
#member .social .naver  {background: #03C75A; color: #fff;}
#member .social .google {background: #fff; color: #333; border: 1px solid #ddd;}
#member .social .ready {background: #f2f2f2; color: #444; cursor: not-allowed;}
#member .social .ready .tag {font-size: 1.4rem; font-weight: 400;}

#member .foot {margin-top: 3rem; text-align: center; font-size: 1.6rem; color: #888;}
#member .foot a {color: var(--fcp); font-weight: 600; text-decoration: underline; text-underline-offset: 0.3rem;}


/* ------------------------------------------------------------
   7. 약관 보기 모달 (.termsBox)
   본문(.tBody)만 스크롤되도록 제목/버튼은 위아래에 고정합니다.
   ------------------------------------------------------------ */
.termsBox {
    display: flex; flex-direction: column;
    width: 68rem; max-height: calc(100vh - 8rem);
    background: #fff; border-radius: 2rem; overflow: hidden;
    box-shadow: 0 0 1.5rem rgba(0,0,0,0.08);
}

.termsBox .tHead {
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    flex-shrink: 0; padding: 3rem 3.5rem 2rem; border-bottom: 1px solid #eee;
}
.termsBox .tHead .tTit {font-size: 2.4rem; font-weight: 700; color: #222; line-height: 1.4;}

/* 닫기(X) — 아이콘 파일 없이 가상요소 두 줄로 그립니다 */
.termsBox .tClose {
    position: relative; flex-shrink: 0; width: 3.2rem; height: 3.2rem;
    border: 0; background: none; cursor: pointer;
}
.termsBox .tClose::before,
.termsBox .tClose::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 2rem; height: 2px; margin: -1px 0 0 -1rem;
    background: #888; transition: background 0.2s;
}
.termsBox .tClose::before {transform: rotate(45deg);}
.termsBox .tClose::after  {transform: rotate(-45deg);}
.termsBox .tClose:hover::before,
.termsBox .tClose:hover::after {background: var(--fcp);}

.termsBox .tBody {flex: 1; min-height: 0; padding: 2.6rem 3.5rem; overflow-y: auto;}
.termsBox .tBody .tDoc {display: none; font-size: 1.5rem; font-weight: 400; color: #555; line-height: 1.8;}
.termsBox .tBody .tDoc.on {display: block;}
.termsBox .tBody .tDoc .ready {color: #aaa; text-align: center; padding: 4rem 0;}

/* 약관 본문 — 조 제목(h3) / 항(p) / 호(ul.dot) */
.termsBox .tDoc h3 {
    margin: 3rem 0 1rem; font-size: 1.7rem; font-weight: 700;
    color: #222; line-height: 1.5;
}
.termsBox .tDoc > :first-child {margin-top: 0;}
.termsBox .tDoc p {margin-top: 0.8rem;}
.termsBox .tDoc p:first-of-type {margin-top: 0;}

.termsBox .tDoc ul.dot {margin-top: 1rem;}
.termsBox .tDoc ul.dot li {position: relative; padding-left: 1.4rem;}
.termsBox .tDoc ul.dot li + li {margin-top: 0.5rem;}
.termsBox .tDoc ul.dot li::before {
    content: ''; position: absolute; left: 0.2rem; top: 1.1rem;
    width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #aaa;
}

/* 수집 항목 표 — 칸이 좁아 한글이 낱자로 끊기지 않게 keep-all 을 씁니다 */
.termsBox .tDoc .tTbl {
    width: 100%; margin-top: 1.4rem;
    table-layout: fixed; border-collapse: collapse; border-top: 1px solid #999;
}
.termsBox .tDoc .tTbl th,
.termsBox .tDoc .tTbl td {
    padding: 1.2rem 1.4rem; border-bottom: 1px solid #e5e5e5;
    font-size: 1.4rem; line-height: 1.6; text-align: left;
    vertical-align: middle; word-break: keep-all;
}
.termsBox .tDoc .tTbl th {background: #f5f5f5; font-weight: 600; color: #333;}
.termsBox .tDoc .tTbl td {color: #555;}
.termsBox .tDoc .tTbl th + th,
.termsBox .tDoc .tTbl td + td {border-left: 1px solid #e5e5e5;}
.termsBox .tDoc .tTbl + p {margin-top: 1.4rem;}

/* 동의 거부 권리 안내 */
.termsBox .tDoc .note {
    margin-top: 2rem; padding: 1.6rem 1.8rem;
    background: #fafafa; border-radius: 0.8rem;
    font-size: 1.4rem; color: #666; word-break: keep-all;
}

.termsBox .tFoot {flex-shrink: 0; padding: 2rem 3.5rem 3rem;}
.termsBox .tFoot .btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 5.4rem; border: 0; border-radius: 0.8rem;
    background: var(--fcp); color: #fff; font-family: inherit;
    font-size: 1.7rem; font-weight: 700; cursor: pointer; transition: opacity 0.2s;
}
.termsBox .tFoot .btn:hover {opacity: 0.88;}


/* ------------------------------------------------------------
   모바일
   헤더의 .gnb 가 880px 이하에서 숨겨지므로 로그인 진입점도 함께 사라집니다.
   모바일 메뉴 작업 시 로그인 링크를 반드시 포함해 주세요.
   ------------------------------------------------------------ */
@media all and (max-width: 880px){

    /* 로그인 카드 */
    .loginBox {width: 33.5rem; padding: 4rem 2rem; border-radius: 2rem;}
    .loginBox .logo {width: 8.7rem; height: 5.4rem;}
    .loginBox .bTit {margin-top: 2.5rem; font-size: 3.2rem; line-height: 3.2rem;}
    .loginBox .bSub {margin-top: 1.5rem; font-size: 1.5rem; line-height: 1.5rem;}
    .loginBox .msg {margin-top: 2rem; padding: 1.2rem 1.5rem; font-size: 1.4rem;}
    .loginBox form {margin-top: 3rem;}

    .loginBox .fld {height: 4.5rem; border-radius: 0.8rem;}
    .loginBox .fld label {width: 8.8rem; padding-left: 2rem; font-size: 1.4rem; line-height: 1.4rem;}
    .loginBox .fld input {padding-right: 2rem; font-size: 1.4rem;}

    .loginBox .opts {margin-top: 1.5rem;}
    .loginBox .opts .keep {gap: 0.6rem;}
    .loginBox .opts .links {gap: 2.4rem;}
    .loginBox .opts .links .findpw::after {right: -1.2rem;}

    .loginBox .btn {height: 4.5rem; margin-top: 3.5rem; border-radius: 0.8rem; font-size: 1.7rem;}
    .loginBox .social {gap: 1rem; margin-top: 1rem;}
    .loginBox .social a,
    .loginBox .social span {height: 4.5rem; border-radius: 0.8rem; font-size: 1.7rem;}
    .loginBox .social .ico {width: 2rem; height: 2rem;}
    .loginBox .social .ready .tag {font-size: 1.3rem;}

    /* 로그인 / 회원가입 페이지 */
    #login,
    #join {padding-bottom: 8rem;}
    #login .visual,
    #join .visual {height: 44rem;}
    #login .visual .lb,
    #join .visual .lb {font-size: 1.8rem;}
    #login .visual h2,
    #join .visual h2 {font-size: 4.2rem;}

    #login .titArea,
    #join .titArea {margin-top: 7rem;}
    #login .titArea h2,
    #join .titArea h2 {margin-top: 1.4rem; font-size: 2.8rem;}
    #login .titArea p,
    #join .titArea p {margin-top: 1.4rem; font-size: 1.4rem;}

    #login .loginBox {margin-top: 4rem;}
    #join #member {padding: 4rem 0 0;}

    /* 모달 */
    .mPop .popWrap {padding: 2rem 0;}

    /* 회원전용 안내 모달 */
    .lockBox {width: 33.5rem; padding: 4rem 2rem; border-radius: 2rem;}
    .lockBox .ico {width: 6.4rem; height: 6.4rem;}
    .lockBox .bTit {margin-top: 2.5rem; font-size: 2.6rem; line-height: 2.6rem;}
    .lockBox .bSub {margin-top: 1.5rem; font-size: 1.4rem; line-height: 2.2rem;}

    .lockBox .benefit {width: 25.5rem; padding: 2.5rem 0 2.5rem 3.9rem;}
    .lockBox .benefit li {gap: 0.7rem; font-size: 1.5rem; line-height: 1.7rem;}
    .lockBox .benefit li + li {margin-top: 1rem;}
    .lockBox .benefit li .chk {width: 1.7rem; height: 1.7rem;}

    .lockBox .btn {height: 4.5rem; margin-top: 3rem; border-radius: 0.8rem; font-size: 1.7rem;}
    .lockBox .btn.gray {margin-top: 1rem;}
    .lockBox .secure {margin-top: 2rem; font-size: 1.3rem; line-height: 1.3rem;}
    .lockBox .secure .ic {width: 1.1rem; height: 1.3rem;}

    /* 회원가입 페이지 */
    #member {padding: 16rem 0 10rem;}
    #member .mInner {max-width: var(--innerMo);}

    #member .fld input[type="text"],
    #member .fld input[type="email"],
    #member .fld input[type="tel"],
    #member .fld input[type="password"] {height: 5.2rem; font-size: 1.6rem;}

    #member .btn,
    #member .social a,
    #member .social span {height: 5.4rem;}

    #member .agree .chk .termsView {font-size: 1.3rem;}

    /* 약관 보기 모달 */
    .termsBox {width: 33.5rem; max-height: calc(100vh - 4rem); border-radius: 1.6rem;}
    .termsBox .tHead {padding: 2.4rem 2rem 1.6rem;}
    .termsBox .tHead .tTit {font-size: 1.9rem;}
    .termsBox .tClose {width: 2.8rem; height: 2.8rem;}
    .termsBox .tClose::before,
    .termsBox .tClose::after {width: 1.7rem; margin-left: -0.85rem;}

    .termsBox .tBody {padding: 2rem;}
    .termsBox .tBody .tDoc {font-size: 1.4rem; line-height: 1.75;}
    .termsBox .tBody .tDoc .ready {padding: 3rem 0;}
    .termsBox .tDoc h3 {margin: 2.4rem 0 0.8rem; font-size: 1.55rem;}
    .termsBox .tDoc ul.dot li::before {top: 1rem;}

    .termsBox .tDoc .tTbl th,
    .termsBox .tDoc .tTbl td {padding: 1rem 0.7rem; font-size: 1.3rem; line-height: 1.5;}
    .termsBox .tDoc .note {padding: 1.4rem; font-size: 1.3rem;}

    .termsBox .tFoot {padding: 1.6rem 2rem 2.4rem;}
    .termsBox .tFoot .btn {height: 4.8rem; font-size: 1.6rem;}
}