@charset "utf-8";
/* ==========================================================================
   회원 영역 PC 레이아웃 (member/*)
   - 모바일 스킨(css/member/member.css)을 그대로 두고 1024px 이상에서만 덮어쓴다
   - 대상: 로그인 / 회원가입 / 아이디 찾기 / 비밀번호 찾기
   - 페이지를 PC로 전환할 때는 outline/_header.html 의 pcReady 목록과
     .pcSubHeader 조건에도 같은 페이지명을 추가해야 500px 기둥이 풀린다
   @entwiz 2026-08-27
   ========================================================================== */

@media (min-width: 1024px) {

    /* ----------------------------------------------------------------------
       공통 — 회원 페이지는 좁은 폼이라 화면 가운데 한 단으로 세운다
       ---------------------------------------------------------------------- */
    #wrap.pcReady .login,
    #wrap.pcReady .find_id,
    #wrap.pcReady .find_password,
    #wrap.pcReady .user_certification,
    #wrap.pcReady .find_password_reset,
    #wrap.pcReady .find_password_complete {width:100%; max-width:400px; margin:0 auto; padding:64px 0 120px; box-sizing:border-box;}

    /* ----------------------------------------------------------------------
       로그인 | member/login.html
       ---------------------------------------------------------------------- */
    /* 로고는 PC GNB 에도 있으므로 페이지 안쪽은 한 단계 작게 */
    #wrap.pcReady .login .login_logo {padding:0 0 40px;}
    #wrap.pcReady .login .login_logo img {width:180px;}

    #wrap.pcReady .login .login_box dl + dl {margin-top:8px;}
    #wrap.pcReady .login .login_box dl dd input {height:52px; padding:0 16px; font-size:15px;}
    #wrap.pcReady .login .login_box dl dd input:focus {border-color:var(--color-green-40, #00B373); outline:0;}

    #wrap.pcReady .login .login_box .inp_chk {padding:12px 0 0;}
    #wrap.pcReady .login .login_box .inp_chk label {font-size:14px; color:var(--color-neutral-20, #555); cursor:pointer;}
    #wrap.pcReady .login .login_box .inp_chk input {cursor:pointer;}

    #wrap.pcReady .login .login_box .submit {padding:20px 0 0;}
    #wrap.pcReady .login .login_box .submit .member_login_order_btn {height:52px; margin:0; font-size:16px;}

    /* 회원가입 / 아이디찾기 / 비밀번호찾기 */
    #wrap.pcReady .login .login_find {padding:16px 0 0;}
    #wrap.pcReady .login .login_find li a {font-size:14px;}
    #wrap.pcReady .login .login_find li a:hover {color:var(--color-neutral-10, #333); text-decoration:underline;}

    /* SNS 로그인 — 모바일은 위 여백 50px, PC는 구분선 없이 붙이기엔 멀어서 32px */
    #wrap.pcReady .login .login_box .sns_login {margin-top:32px;}
    #wrap.pcReady .login .login_box .sns_login li {height:52px; cursor:pointer;}

    /* 비회원 주문 — 로그인 카드와 같은 폭으로 이어 붙인다 */
    #wrap.pcReady .login .guest_order_box {margin-top:0;}
    #wrap.pcReady .login .guest_order_box .guest_line {margin:32px 0 24px;}
    #wrap.pcReady .login .guest_order_box .guest_txt {padding:32px 0 12px;}   /* [비회원 주문하기] 버튼과 붙지 않게 */
    #wrap.pcReady .login .guest_order_box dl dd input {height:52px; padding:0 16px; font-size:15px;}
    #wrap.pcReady .login .guest_order_box dl dd input:focus {border-color:var(--color-green-40, #00B373); outline:0;}
    #wrap.pcReady .login .guest_order_box .member_login_order_btn,
    #wrap.pcReady .login .guest_order_box .member_login_order_btn2 {height:52px; font-size:16px;}

    /* ----------------------------------------------------------------------
       통합회원 안내 레이어 (#layerOneID) — login.html
       gd_layout.css 의 PC 규칙이 .layerWrap 의 내장 딤(::before)을 지우는데,
       이 레이어는 .ly_pop 안에 있지 않아 딤을 대신 그려 줄 요소가 없다.
       → 여기서 되살리고, 카드 폭만 PC 크기로 키운다.
       ---------------------------------------------------------------------- */
    #wrap.pcReady #layerOneID {padding:0 !important;}
    #wrap.pcReady #layerOneID::before {content:'' !important; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, .45);}
    #wrap.pcReady #layerOneID .layerBody {max-width:400px !important;}
    #wrap.pcReady #layerOneID .layerTit {height:64px; line-height:64px; font-size:20px;}
    #wrap.pcReady #layerOneID .layerCont {padding:28px 24px;}
    #wrap.pcReady #layerOneID .layerBtn {padding:0 24px 28px;}
    #wrap.pcReady #layerOneID .layerBtn a {height:52px; cursor:pointer;}

    /* ======================================================================
       회원가입 (oneid 계열 마크업)
       흐름: join_method → join_check → join → join_ok
       ====================================================================== */

    /* 공통 래퍼 — 좌우 20px 이던 모바일 패딩을 걷고 가운데 한 단으로 세운다.
       (이 파일은 gThisDirName == 'member' 일 때만 실리므로 마이페이지에는 영향 없음) */
    #wrap.pcReady .oneId_content {width:100%; max-width:560px; margin:0 auto; padding:0 0 120px; box-sizing:border-box;}
    /* 모바일은 화면 높이를 채워 버튼을 바닥에 붙였다(margin-top:auto) — PC는 내용만큼만 */
    #wrap.pcReady .oneId_content.fullContent {display:block; min-height:0;}

    #wrap.pcReady .oneId_content .tabCont {padding:40px 0 0;}
    #wrap.pcReady .oneId_content .tabCont._agree {padding-top:0;}
    #wrap.pcReady .tabCont .titBox {font-size:24px; line-height:32px;}
    #wrap.pcReady .tabCont .titBox p {font-size:16px; line-height:24px;}

    /* 입력/선택 — 모바일 48px 기준을 PC 52px 로 */
    #wrap.pcReady .oneId_content ul.formBox li input[type=text],
    #wrap.pcReady .oneId_content ul.formBox li input[type=number],
    #wrap.pcReady .oneId_content ul.formBox li input[type=password],
    #wrap.pcReady .oneId_content select {height:52px; font-size:15px;}
    #wrap.pcReady .oneId_content ul.formBox li input[type=text]:focus,
    #wrap.pcReady .oneId_content ul.formBox li input[type=number]:focus,
    #wrap.pcReady .oneId_content ul.formBox li input[type=password]:focus,
    #wrap.pcReady .oneId_content select:focus {border-color:var(--color-green-40, #00B373); outline:0;}
    #wrap.pcReady .oneId_content .chkBoxForm input[type="checkbox"],
    #wrap.pcReady .oneId_content .chkBoxForm label,
    #wrap.pcReady .oneId_content button {cursor:pointer;}

    /* 하단 고정 버튼 해제 — PC 는 문서 흐름 안에 둔다 */
    #wrap.pcReady .btBtns {position:static; margin-top:40px; padding:0; background:none;}
    #wrap.pcReady .btBtns.fixed {position:static; padding:0; background:none;}
    #wrap.pcReady .btBtns button {height:52px; font-size:16px; cursor:pointer;}
    #wrap.pcReady .oneId_content .btn_box {position:static; align-self:auto; margin-top:32px; padding:0; background:none;}
    #wrap.pcReady .oneId_content .btn_box.fixed {padding:0;}
    #wrap.pcReady .oneId_content .btn_box .ok_btn,
    #wrap.pcReady .oneId_content .btn_box .btnLine {height:52px;}

    /* ----- 1) 가입 방법 선택 | member/join_method.html ----- */
    #wrap.pcReady .join_method {padding:40px 0 0; text-align:center;}
    /* 혜택 안내 이미지 — 시안 폭(375px) 이상으로 늘리면 흐려진다 */
    #wrap.pcReady .join_method .join_benefit {max-width:375px;}
    /* 버튼 두 개를 카드 폭에 맞춰 세로로 (모바일과 동일하되 위 여백만 확보) */
    #wrap.pcReady .join_method + .btBtns {max-width:400px; margin:40px auto 0;}

    /* 휴대폰 본인인증(PASS) — 새 창이 떠 있는 동안 뒤 화면을 덮는 딤.
       member/join_check.html 의 gdOpenAuthWindow() 가 만들고 창이 닫히면 지운다.
       (iframe 레이어는 인증사가 결과 페이지를 최상위 창으로 밀어내 쓸 수 없었다) */
    #gdAuthDim {position:fixed; left:0; top:0; z-index:9000; width:100%; height:100%; background:rgba(0, 0, 0, .45);}

    /* ----- 2) 가입여부 확인 · 약관 | member/join_check.html ----- */
    /* 모바일은 앱 헤더(56px) 아래 붙는 sticky 탭 — PC 헤더는 높이가 달라 그대로 두면 뜬다 */
    #wrap.pcReady ul.fullTab {position:static; top:auto; border-bottom:1px solid var(--color-neutral-80, #EBEBEB);}
    #wrap.pcReady ul.fullTab li a {cursor:pointer;}
    #wrap.pcReady .agreeDetail {max-height:320px;}
    /* '본인인증' 라벨 — 시안 색상 */
    #wrap.pcReady .join_check ul.formBox li label {color:var(--color-neutral-10, #333);}
    #wrap.pcReady .oneId_content .infoBox {padding:16px 16px 16px 44px; background-position:16px 16px;}

    /* ----- 3) 정보 입력 | member/join.html (_join_view*.html) ----- */
    #wrap.pcReady .join_business .box {padding:32px 0;}
    /* 섹션 구분: 모바일은 8px 회색 띠(좌우 꽉 참) — PC 카드 폭에서는 얇은 선이 맞다 */
    #wrap.pcReady .join_business .box.line {border-top:1px solid var(--color-neutral-80, #EBEBEB);}
    #wrap.pcReady .join_business ul.formBox li button.search {height:52px; min-width:120px; cursor:pointer;}
    #wrap.pcReady .join_business ul.formBox li input[type=file] {width:120px; height:52px;}
    #wrap.pcReady .join_business ul.formBox li .radioWrap > span {cursor:pointer;}

    /* ----- 4) 가입 완료 | member/join_ok.html
             + 이미 통합회원 안내 | member/join_pass.html (같은 .join_coplete 구조) ----- */
    #wrap.pcReady .join_coplete .completeInfo table th {width:160px;}
    #wrap.pcReady .join_coplete .btn_box {margin-top:32px;}
    #wrap.pcReady .join_coplete .btn_box ~ .btn_box {margin-top:12px;}
    /* 결과 안내 화면은 가운데 정렬 (표는 항목-값 대조라 왼쪽 정렬 유지) */
    #wrap.pcReady .join_coplete .titBox,
    #wrap.pcReady .join_coplete .infoTxt {text-align:center;}
    #wrap.pcReady .join_coplete .completeInfo {text-align:left;}
    #wrap.pcReady .join_coplete .infoTxt {line-height:26px;}
    #wrap.pcReady .join_coplete button.btnTxt {cursor:pointer;}
    #wrap.pcReady .join_coplete button.btnTxt:hover {text-decoration:underline;}

    /* ----------------------------------------------------------------------
       선택 레이어 (.selectLayerWrap) — 이메일 도메인 / 매장 지역 / 매장명 / 업종
       모바일은 아래에서 올라오는 바텀시트, PC 는 화면 중앙 카드로 바꾼다.
       show 상태 transform 이 !important 라 여기서도 !important 로 덮어야 한다.
       ---------------------------------------------------------------------- */
    #wrap.pcReady .selectLayerWrap .layerBody {left:50%; top:50%; bottom:auto; width:400px; max-width:calc(100% - 40px); transform:translate(-50%, -40%); border-radius:var(--radius-3, 12px); box-shadow:var(--shadow-strong, 0 2px 12px rgba(0, 0, 0, .15));}
    #wrap.pcReady .selectLayerWrap.show .layerBody {transform:translate(-50%, -50%) !important;}
    #wrap.pcReady .selectLayerWrap .layerBody .layerHead {height:60px; border-bottom:1px solid var(--color-neutral-80, #EBEBEB); font-size:18px; font-weight:600;}
    #wrap.pcReady .selectLayerWrap .layerBody .layerHead .close {top:18px; cursor:pointer;}
    #wrap.pcReady .selectLayerWrap .layerBody .selectItem {max-height:420px; padding:16px 20px 20px;}
    #wrap.pcReady .selectLayerWrap .layerBody .selectItem button {height:52px; border-radius:var(--radius-1, 4px); cursor:pointer;}
    #wrap.pcReady .selectLayerWrap .layerBody .selectItem button:hover {border-color:var(--color-green-40, #00B373); background:var(--color-green-90, #E6F7F1);}

    /* ======================================================================
       아이디 찾기 / 비밀번호 찾기
       흐름: find_id
             find_password → user_certification(본인인증) → find_password_reset → find_password_complete
       ====================================================================== */

    /* ----- 아이디 찾기 | member/find_id.html ----- */
    #wrap.pcReady .find_id .find_txt {margin-bottom:32px; font-size:16px; line-height:24px;}
    #wrap.pcReady .find_id .find_txt strong {display:block; margin-bottom:8px; font-size:24px; line-height:32px;}
    /* 이메일 / 휴대폰번호 선택 — 모바일과 같은 라디오지만 PC 는 클릭 영역을 넓게 */
    #wrap.pcReady .find_id .inp_rdo {display:flex; gap:24px; margin-bottom:16px;}
    #wrap.pcReady .find_id .inp_rdo label {cursor:pointer;}
    #wrap.pcReady .find_id .inp_rdo input {cursor:pointer;}
    #wrap.pcReady .find_id fieldset dl dd input {height:52px; padding:0 16px; font-size:15px;}
    #wrap.pcReady .find_id fieldset dl dd input:focus {border-color:var(--color-green-40, #00B373); outline:0;}
    #wrap.pcReady .find_id fieldset dl dd.mailForm {gap:4px;}
    #wrap.pcReady .find_id .find_id_btn {height:52px; margin-top:32px; cursor:pointer;}
    /* 결과(#templateFindIdResult) — 안내문 가운데 정렬 */
    #wrap.pcReady .find_id .find_id_msg {padding:24px 0; text-align:center; line-height:32px;}

    /* ----- 비밀번호 찾기 | member/find_password.html ----- */
    #wrap.pcReady .find_password .find_txt {font-size:16px; line-height:24px;}
    #wrap.pcReady .find_password .find_txt strong {margin-bottom:8px; font-size:24px; line-height:32px;}
    #wrap.pcReady .find_password fieldset {margin-top:32px;}
    #wrap.pcReady .find_password fieldset dl dd input {height:52px; padding:0 16px; border-radius:var(--radius-1, 4px); font-size:15px;}
    #wrap.pcReady .find_password fieldset dl dd input:focus {border-color:var(--color-green-40, #00B373); outline:0;}
    #wrap.pcReady .find_password .notice_txt .find_id_btn1 {cursor:pointer;}
    #wrap.pcReady .find_password .notice_txt .find_id_btn1:hover {color:var(--color-neutral-10, #333);}
    #wrap.pcReady .find_password .find_password_btn {height:52px; cursor:pointer;}

    /* ----- 본인인증 | member/user_certification.html ----- */
    #wrap.pcReady .user_certification .tit strong {font-size:24px; line-height:32px;}
    #wrap.pcReady .user_certification .tit span {margin-top:8px; line-height:24px;}
    #wrap.pcReady .user_certification fieldset {margin-top:32px;}
    #wrap.pcReady .user_certification .inp_tx {cursor:pointer;}
    #wrap.pcReady .user_certification .inp_tx:hover {border-color:var(--color-neutral-70, #DFDFDF);}
    #wrap.pcReady .user_certification .pw_find_next_btn {height:52px; cursor:pointer;}

    /* ----- 비밀번호 변경 | member/find_password_reset.html ----- */
    #wrap.pcReady .find_password_reset .inp_tx input {height:52px; padding:0 16px; border:1px solid var(--color-neutral-70, #DFDFDF); border-radius:var(--radius-1, 4px); font-size:15px; box-sizing:border-box;}
    #wrap.pcReady .find_password_reset .inp_tx input:focus {border-color:var(--color-green-40, #00B373); outline:0;}
    #wrap.pcReady .find_password_reset .pw_find_confirm_btn {height:52px; margin-top:32px; cursor:pointer;}

    /* ----- 비밀번호 변경 완료 | member/find_password_complete.html ----- */
    #wrap.pcReady .find_password_complete {text-align:center;}
    #wrap.pcReady .find_password_complete .tit {padding:0 0 32px; font-size:20px; line-height:28px;}
    #wrap.pcReady .find_password_complete .login_ok_btn {height:52px; line-height:28px; cursor:pointer;}

    /* ----------------------------------------------------------------------
       알림 레이어 (.alertWrap) — 아이디/비밀번호 찾기 실패 안내
       fixed 중앙이라 PC 에서도 자리는 맞지만 290px 은 좁다.
       (.layerWrap 과 달리 gd_layout.css 가 딤을 지우지 않으므로 딤은 그대로 둔다)
       ---------------------------------------------------------------------- */
    #wrap.pcReady .alertWrap .alertBody {width:340px;}
    #wrap.pcReady .alertWrap .alertBody .alertTit {padding:28px 28px 0; font-size:18px;}
    #wrap.pcReady .alertWrap .alertBody .alertCont {padding:8px 28px 28px; font-size:15px; line-height:22px;}
    #wrap.pcReady .alertWrap .alertBody .alertBtn button {height:52px; cursor:pointer;}

}