/* BASIC css start */
/* 풍류 PC 로그인 좌우 2열 디자인 | CSS 전체 교체용.
   회원 로그인 / 주문조회 로그인 양쪽 CSS를 이 파일로 전체 교체하세요.
   연결 보정 JS는 login-page-html.txt 하단에 포함되어 있습니다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* 01. 본문 레이아웃 */
#wrap #contentWrapper,
#wrap #contentWrap,
#wrap #content {
    float:none;
    width:100%;
    max-width:none;
    min-width:0;
    margin:0 auto;
    padding:0;
    box-sizing:border-box;
}

/* 02. 사용자 설정: 폭, 여백, 색상 */
#loginWrap {
    --login-width:960px;
    --login-padding-top:72px;
    --login-padding-bottom:96px;
    --login-ink:#171717;
    --login-muted:#777;
    --login-border:#e3e3e3;
    --login-radius:8px;
    box-sizing:border-box;
    width:100%;
    margin:0;
    padding:var(--login-padding-top) 24px var(--login-padding-bottom);
    background:#fff;
    color:var(--login-ink);
    font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
    font-size:14px;
    line-height:1.5;
    text-align:left;
    -webkit-font-smoothing:antialiased;
}
#loginWrap *, #loginWrap *::before, #loginWrap *::after { box-sizing:border-box; }
#loginWrap * { font-family:inherit; }
#loginWrap a { color:inherit; text-decoration:none; }
#loginWrap .pr-login-panel { width:100%; min-width:0; max-width:var(--login-width); margin:0 auto; }

/* 03. 제목 */
#loginWrap .pr-login-heading { margin:0 0 40px; text-align:center; }
#loginWrap .pr-login-eyebrow { margin:0 0 14px; padding:0; color:#222; font-size:15px; font-weight:800; letter-spacing:2.4px; }
#loginWrap #pr-login-title { margin:0; padding:0; color:var(--login-ink); font-size:34px; font-weight:750; line-height:1.25; letter-spacing:-1.2px; }
#loginWrap .pr-login-intro { margin:14px 0 0; padding:0; color:var(--login-muted); font-size:14px; letter-spacing:-.3px; }

/* 좌측 회원 로그인 / 우측 비회원 주문조회 */
#loginWrap .pr-login-card { width:100%; min-width:0; padding:40px; border:1px solid #e7e7e7; border-radius:16px; background:#fff; }
#loginWrap .pr-login-columns { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:96px; align-items:start; }
#loginWrap .pr-login-columns::after { content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:#ededed; pointer-events:none; }
#loginWrap .pr-login-member,
#loginWrap .pr-login-guest { display:block; width:100%; min-width:0; margin:0; padding:0; }
#loginWrap .pr-login-section-head { min-height:84px; }
#loginWrap .pr-login-section-title { margin:0; padding:0; color:var(--login-ink); font-size:22px; font-weight:700; line-height:1.4; letter-spacing:-.6px; }
#loginWrap .pr-login-section-intro { margin:9px 0 0; padding:0; color:var(--login-muted); font-size:13px; line-height:1.6; word-break:keep-all; }

/* 04. 로그인·주문조회 입력창 */
#loginWrap .pr-login-form,
#loginWrap form,
#loginWrap fieldset { display:block; width:100%; min-width:0; margin:0; padding:0; border:0; background:none; }
#loginWrap .pr-login-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#loginWrap .pr-login-field { margin:0 0 18px; }
#loginWrap .pr-login-field > label { display:block; float:none; width:100%; margin:0; padding:0; }
#loginWrap .pr-login-label { display:block; margin:0 0 8px; color:#333; font-size:13px; font-weight:600; }
#loginWrap .pr-login-field input.txt-frm {
    display:block;
    float:none;
    width:100%;
    min-width:0;
    max-width:100%;
    height:54px;
    margin:0;
    padding:0 16px;
    border:1px solid var(--login-border);
    border-radius:var(--login-radius);
    outline:none;
    background:#fff;
    color:var(--login-ink);
    font-size:16px;
    font-weight:400;
    line-height:normal;
    text-align:left;
    box-shadow:none;
    transition:border-color .18s ease,box-shadow .18s ease;
}
#loginWrap .pr-login-field input.txt-frm:hover { border-color:#b5b5b5; }
#loginWrap .pr-login-field input.txt-frm:focus { border-color:#222; box-shadow:0 0 0 3px rgba(0,0,0,.06); }

/* 서버가 출력한 비회원 입력 두 칸: 입력 태그에 다른 클래스가 붙어도 동일하게 표시 */
#loginWrap [data-pr-guest-field] { display:block; position:static; width:100%; min-width:0; height:auto; }
#loginWrap [data-pr-guest-field] input:not([type="hidden"]) {
    appearance:none;
    display:block !important;
    position:static !important;
    float:none !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:54px !important;
    margin:0 !important;
    padding:0 16px !important;
    border:1px solid var(--login-border) !important;
    border-radius:var(--login-radius) !important;
    background:#fff !important;
    color:var(--login-ink) !important;
    font-family:inherit !important;
    font-size:16px !important;
    line-height:normal !important;
    text-align:left !important;
    text-indent:0 !important;
}
#loginWrap [data-pr-guest-field] input:not([type="hidden"]):focus { border-color:#222 !important; outline:0; box-shadow:0 0 0 3px rgba(0,0,0,.06); }
#loginWrap [data-pr-guest-field] input::placeholder { color:#999; font-size:14px; opacity:1; }

/* 05. 보안접속과 계정 찾기 */
#loginWrap .pr-login-options { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; min-height:28px; margin:0 0 18px; }
#loginWrap .pr-login-security { display:inline-flex; align-items:center; gap:7px; margin:0; padding:0; color:#666; font-size:12px; cursor:pointer; }
#loginWrap .pr-login-security input[type="checkbox"] { position:static; width:16px; height:16px; margin:0; padding:0; accent-color:var(--login-ink); cursor:pointer; }
#loginWrap a.pr-login-find { color:#666; font-size:12px; }
#loginWrap a.pr-login-find:hover { color:#111; text-decoration:underline; text-underline-offset:3px; }

/* 06. 로그인·회원가입·비회원 주문조회 */
#loginWrap a.pr-login-submit,
#loginWrap a.pr-login-join-button,
#loginWrap a.pr-login-guest-button {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:54px;
    margin:0;
    padding:14px 20px;
    border:1px solid #d4d4d4;
    border-radius:var(--login-radius);
    background:#fff;
    color:var(--login-ink);
    font-size:15px;
    font-weight:650;
    line-height:1.5;
    letter-spacing:-.2px;
    text-align:center;
    cursor:pointer;
    transition:background-color .18s ease,border-color .18s ease;
}
#loginWrap a.pr-login-submit { background:var(--login-ink); border-color:var(--login-ink); color:#fff; }
#loginWrap a.pr-login-submit:hover { background:#333; border-color:#333; }
#loginWrap a.pr-login-submit:active { background:#000; }
#loginWrap .pr-login-join { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:32px 0 0; padding:26px 0 0; border-top:1px solid #eee; }
#loginWrap .pr-login-join-copy { min-width:0; }
#loginWrap .pr-login-join p { margin:5px 0 0; padding:0; color:var(--login-muted); font-size:13px; line-height:1.6; }
#loginWrap .pr-login-join p.pr-login-join-title { margin:0; color:#333; font-size:14px; font-weight:600; }
#loginWrap a.pr-login-join-button { flex:0 0 152px; width:152px; min-height:48px; padding:11px 20px; font-size:14px; }
#loginWrap a.pr-login-join-button:hover,
#loginWrap a.pr-login-guest-button:hover { background:#f7f7f7; border-color:#999; }
#loginWrap .pr-login-guest-help { display:flex; align-items:center; min-height:28px; margin:0 0 18px; padding:0; color:#777; font-size:12px; line-height:1.6; word-break:keep-all; }
#loginWrap a.pr-login-guest-button { border-color:var(--login-ink); color:var(--login-ink); font-size:15px; font-weight:650; }
#loginWrap a:focus-visible,
#loginWrap input[type="checkbox"]:focus-visible { outline:2px solid var(--login-ink); outline-offset:4px; }

/* 07. 관리자에서 사용 중인 SNS만 표시 */
#loginWrap #simpleLogin.pr-login-social { display:block; width:100%; min-width:0; margin:26px 0 0; padding:0; border:0; background:none; }
#loginWrap .pr-login-social-title { display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:0; color:#888; font-size:12px; text-align:center; }
#loginWrap .pr-login-social-title::before,
#loginWrap .pr-login-social-title::after { content:""; flex:1; height:1px; background:#eee; }
#loginWrap .pr-login-social-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr)); gap:10px; }
#loginWrap a.pr-login-social-button { display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; margin:0; padding:12px; border:1px solid #dedede; border-radius:var(--login-radius); background:#fff; color:#222; font-size:13px; font-weight:600; line-height:1.5; text-align:center; }
#loginWrap a.pr-login-naver { border-color:#03c75a; background:#03c75a; color:#fff; }
#loginWrap a.pr-login-kakao { border-color:#fee500; background:#fee500; color:#251e00; }
#loginWrap a.pr-login-apple { border-color:#222; background:#222; color:#fff; }
#loginWrap a.pr-login-facebook { border-color:#d9e3f4; color:#185abc; }

/* 08. 작은 화면과 모션 설정 */
@media(max-width:1000px) {
    #loginWrap .pr-login-card { padding:32px; }
    #loginWrap .pr-login-columns { column-gap:64px; }
}
@media(max-width:800px) {
    #loginWrap { padding:48px 22px 72px; }
    #loginWrap .pr-login-panel { max-width:520px; }
    #loginWrap .pr-login-card { padding:28px; border-radius:12px; }
    #loginWrap .pr-login-columns { grid-template-columns:minmax(0,1fr); gap:32px; }
    #loginWrap .pr-login-columns::after { display:none; }
    #loginWrap .pr-login-guest { padding-top:28px; border-top:1px solid #eee; }
    #loginWrap .pr-login-section-head { min-height:0; margin-bottom:24px; }
    #loginWrap #pr-login-title { font-size:30px; }
    #loginWrap .pr-login-heading { margin-bottom:30px; }
    #loginWrap .pr-login-intro { font-size:13px; }
    #loginWrap .pr-login-join { flex-direction:column; align-items:stretch; gap:16px; }
    #loginWrap .pr-login-join-copy { text-align:center; }
    #loginWrap a.pr-login-join-button { flex:auto; width:100%; }
}
@media(max-width:420px) {
    #loginWrap { padding-right:16px; padding-left:16px; }
    #loginWrap .pr-login-card { padding:22px 18px; }
}
@media(prefers-reduced-motion:reduce) {
    #loginWrap .pr-login-field input.txt-frm,
    #loginWrap a.pr-login-submit,
    #loginWrap a.pr-login-join-button,
    #loginWrap a.pr-login-guest-button { transition:none; }
}

/* BASIC css end */