/* ============================================================
   v4au — 마추 인증 화면 모바일 재스킨 (로그인 · 회원가입)
   시안 「로그인」「회원가입」 구도 그대로, 색은 사이트 v4 초록.

   ⚠ 전부 @media(max-width:900px) 안에서만 산다 — PC 스플릿 셸(v2au.css)은 한 줄도 안 건드린다.
   ⚠ v2au.css 다음에 로드되어야 이긴다 (add_stylesheet 순서 11).
   ⚠ 폼·입력칸 name/id 는 그대로다. 여기서 바꾸는 건 생김새뿐이라
     자동로그인·소셜·비회원구매·검증 JS 가 전부 그대로 돈다.
   ============================================================ */

.v4au-only { display: none; }            /* PC 에서는 시안 전용 요소를 숨긴다 */

@media (max-width: 900px) {

  :root { --v4a: #0E7C4C; --v4a2: #12945B; --v4a-dk: #0B3D2A;
          --v4a-bg: #F6F9F7; --v4a-tx: #0F2E20; --v4a-sub: #5E7A6C;
          --v4a-ln: #E3EBE6; --v4a-gold: #B45309; }

  html, body { background: var(--v4a-bg) !important; }
  .v4au-only { display: block; }

  /* ── 셸: 히어로가 화면 끝까지 닿도록 좌우 여백을 없앤다 ── */
  .v2au { background: var(--v4a-bg); }
  .v2au-brand { display: none; }                       /* 시안엔 좌측 브랜드 패널이 없다 */
  .v2au-pane  { padding: 0 0 40px !important; background: var(--v4a-bg); }
  .v2au-body, .v2au-body--wide { max-width: none; margin: 0; }
  .v2au-back, .v2au-title, .v2au-sub { display: none; }  /* 히어로가 대신한다 */

  /* ── 히어로 ─────────────────────────────────────────── */
  .v4au-hero {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 18px 20px 76px; color: #fff;
    background:
      radial-gradient(520px 300px at 88% -18%, rgba(28,168,112,.42), transparent 64%),
      linear-gradient(168deg, #062A1C 0%, #0B3D2A 52%, #12694A 100%);
  }
  .v4au-hero::after {                                  /* 말·기수 사진 (v4 화면들과 같은 컷) */
    content: ''; position: absolute; right: -24px; bottom: 22px; top: 4px; width: 58%;
    background: url('/img/v4/hero-cut.webp') right bottom / auto 100% no-repeat;
    opacity: .95; z-index: 0;
    -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 40%);
            mask-image: linear-gradient(100deg, transparent 0%, #000 40%);
  }
  .v4au-hero::before {                                 /* 글자가 사진 위에서도 읽히게 — 어둡게만 */
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(96deg, rgba(4,26,17,.90) 0%, rgba(4,26,17,.58) 46%, rgba(4,26,17,0) 76%);
  }
  .v4au-hero > * { position: relative; z-index: 2; }
  .v4au-hero .bk {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin-left: -6px; border-radius: 50%;
    color: #fff; text-decoration: none; font-size: 22px; line-height: 1;
    background: rgba(255,255,255,.12);
  }
  .v4au-hero .lg { display: block; height: 26px; width: auto; margin: 14px 0 16px; }
  .v4au-hero h1 {
    margin: 0; font-size: 30px; line-height: 1.24; font-weight: 900;
    letter-spacing: -.02em; text-shadow: 0 2px 14px rgba(0,0,0,.35);
  }
  .v4au-hero h1 span { color: #6FE0AC; }
  .v4au-hero p {
    margin: 12px 0 0; font-size: 13.5px; line-height: 1.62; font-weight: 600;
    color: rgba(233,246,239,.86); max-width: 15em;
  }

  /* ── 카드: 히어로를 살짝 물고 올라온다 ─────────────────
     로그인은 새로 감싼 .v4au-card, 회원가입은 원래 있던 .rb_login 을 그대로 쓴다 */
  .v4au-card, .v2au-body > .rb_login {
    position: relative; z-index: 2; margin: -56px 16px 0;
    /* ⚠ style.css 가 .rb_login 에 width:100% 를 줘서 좌우 여백만큼 넘쳤다(375→391). auto 로 못 박는다 */
    width: auto !important; max-width: none !important; box-sizing: border-box;
    padding: 20px 16px 18px; border-radius: 22px; background: #fff;
    box-shadow: 0 14px 34px rgba(8,42,28,.13), 0 2px 8px rgba(8,42,28,.06);
  }

  /* ── 입력칸 ──────────────────────────────────────────── */
  .v2au .v2au-field { margin: 0 0 11px; position: relative; }
  .v2au .v2au-field > label { display: none; }          /* 시안은 자리표시자만 쓴다 */
  /* ⚠ 리빌더 form.css 의 `.required { background: url(필수표시.gif) ... !important }` 가
     입력칸 배경을 차지하고 테두리까지 칠한다. 아이콘을 넣으려면 여기서 먼저 비워야 한다.
     그래서 이 묶음만 !important 를 쓴다 (모바일 한정). */
  .v2au .v2au-field input[type=text],
  .v2au .v2au-field input[type=password],
  .v2au .rb_login_box input.input,
  .v2au .rb_login_box input.full_input,
  .v2au .rb_login_box textarea {
    width: 100%; height: 56px; padding: 0 46px 0 48px;
    border: 1.5px solid #E6ECE8 !important; border-radius: 15px !important;
    background-color: #F1F5F2 !important; background-image: none !important;
    color: var(--v4a-tx); font-size: 15.5px; font-weight: 600; box-shadow: none !important;
  }
  .v2au .rb_login_box textarea { height: auto; min-height: 96px; padding: 13px 15px; }
  .v2au .v2au-field input::placeholder,
  .v2au .rb_login_box input.input::placeholder { color: #93A99C; font-weight: 500; }
  .v2au .v2au-field input:focus,
  .v2au .rb_login_box input.input:focus,
  .v2au .rb_login_box input.full_input:focus {
    outline: none; border-color: var(--v4a) !important; background-color: #fff !important;
    box-shadow: 0 0 0 4px rgba(14,124,76,.10) !important;
  }
  /* 아이콘 — 마크업을 안 건드리려고 배경으로 넣는다 */
  .v2au .v2au-field input[name=mb_id],
  .v2au .rb_login_box input#reg_mb_id,
  .v2au .rb_login_box input#reg_mb_nick {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E9A8B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M4.6 20.4c0-3.7 3.4-6 7.4-6s7.4 2.3 7.4 6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: 15px 50% !important;
    background-size: 21px 21px !important;
  }
  .v2au .v2au-field input[type=password],
  .v2au .rb_login_box input[type=password] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E9A8B' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='4.2' y='10' width='15.6' height='10.6' rx='3'/%3E%3Cpath d='M8 10V7.2a4 4 0 018 0V10'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: 15px 50% !important;
    background-size: 21px 21px !important;
  }
  .v2au .rb_login_box input#reg_mb_email {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E9A8B' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.6'/%3E%3Cpath d='M3.6 7l8.4 6 8.4-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: 15px 50% !important;
    background-size: 21px 21px !important;
  }
  /* 비밀번호 보기 토글 */
  .v4au-eye {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border: 0; border-radius: 12px; background: transparent;
    color: #7E9A8B; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  }
  .v4au-eye svg { width: 22px; height: 22px; }

  /* ── 기본 버튼 ───────────────────────────────────────── */
  .v2au .v2au-btn, .v4au-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 56px; margin-top: 4px; border: 0; border-radius: 15px;
    background: linear-gradient(135deg, var(--v4a2), var(--v4a));
    color: #fff; font-size: 16.5px; font-weight: 800; letter-spacing: -.01em;
    box-shadow: 0 8px 20px rgba(14,124,76,.28); cursor: pointer;
  }
  .v2au .v2au-btn::after, .v4au-cta::after { content: '→'; font-size: 17px; font-weight: 700; }

  /* 자동로그인 줄 */
  .v2au .v2au-row { margin-top: 12px; font-size: 13px; color: var(--v4a-sub); }
  .v2au .v2au-row a { color: var(--v4a); font-weight: 700; }

  /* ── 구분선 ──────────────────────────────────────────── */
  .v4au-div {
    display: flex; align-items: center; gap: 12px; margin: 18px 0 12px;
    font-size: 12.5px; font-weight: 700; color: #90A79A;
  }
  .v4au-div::before, .v4au-div::after {
    content: ''; flex: 1; height: 1px; background: var(--v4a-ln);
  }

  /* ── 간편 로그인 버튼 ───────────────────────────────── */
  .v4au-sns { display: flex; flex-direction: column; gap: 9px; }
  .v4au-sns a, .v4au-sns button {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    height: 54px; border-radius: 15px; border: 1.5px solid transparent;
    font-size: 15.5px; font-weight: 800; text-decoration: none; cursor: pointer;
  }
  .v4au-sns .kko { background: #FEE500; color: #191600; }
  .v4au-sns .nvr { background: #03C75A; color: #fff; }
  .v4au-sns .ggl { background: #fff; color: #2B3A33; border-color: #DCE5E0; }
  .v4au-sns i { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }

  /* ── 회원가입 / 비밀번호 찾기 ──────────────────────── */
  .v4au-join {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 54px; border-radius: 15px; border: 1.5px solid #BFDACB;
    background: #fff; color: var(--v4a); font-size: 16px; font-weight: 800; text-decoration: none;
  }
  .v4au-lost {
    display: block; margin-top: 12px; text-align: center;
    font-size: 13px; font-weight: 600; color: #8FA79A; text-decoration: none;
  }
  .v2au .v2au-joinbox { display: none; }                /* 시안의 회원가입 버튼이 대신한다 */

  /* ── 친구 추천 배너 ─────────────────────────────────── */
  .v4au-ref {
    margin: 16px 16px 0; padding: 16px 14px 14px; border-radius: 20px;
    background: linear-gradient(180deg, #FFFBF2, #FFF6E6);
    border: 1.5px solid #F0DDB8;
  }
  .v4au-ref h2 {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 0 0 12px; font-size: 18px; font-weight: 900; color: var(--v4a-tx); text-align: center;
  }
  .v4au-ref h2 b { color: var(--v4a-gold); }
  .v4au-ref .tiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .v4au-ref .tile {
    min-width: 0; padding: 12px 10px; border-radius: 14px; background: #fff;
    text-align: center; border: 1px solid #F2E5CB;
  }
  .v4au-ref .tile .k { display: block; font-size: 12.5px; font-weight: 700; color: var(--v4a-sub); }
  .v4au-ref .tile .v {
    display: block; margin-top: 3px; font-size: 24px; font-weight: 900; letter-spacing: -.02em;
    white-space: nowrap;
  }
  .v4au-ref .tile:nth-child(1) .v { color: var(--v4a); }
  .v4au-ref .tile:nth-child(2) .v { color: var(--v4a-gold); }
  .v4au-ref .note { margin: 11px 0 0; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--v4a-sub); }
  .v4au-ref .go {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    height: 50px; margin-top: 11px; border-radius: 14px;
    background: linear-gradient(135deg, #E8A33A, #D2831B);
    color: #fff; font-size: 15.5px; font-weight: 800; text-decoration: none;
    box-shadow: 0 7px 16px rgba(190,120,20,.24);
  }

  /* ══════════ 회원가입 폼 ══════════
     ⚠ 리빌더 style.css 가 .rb_login 과 .rb_login_box 에 자기 패딩(30px)을 박아 둬서
       입력칸이 카드 안에서 60px 이나 좁아졌다. 한 단계 더 센 선택자로 못 박는다. */
     이기려면 `.rb_member .rb_login .rb_login_box{padding:30px!important}`(rb.css/mobile.css:55) 보다
     선택자가 세야 한다 — 그래서 `.rb_login` 을 끼워 넣는다. */
  html body .v4au-card,
  html body .v2au-body > .rb_login { padding: 20px 16px 18px !important; }
  html body .v2au .rb_login .rb_login_box {
    width: auto !important; padding: 0 !important; margin: 0 !important;
    background: none !important; border-radius: 0 !important;
  }
  html body .v2au .rb_login .rb_login_box > li {
    padding: 0 !important; margin: 0 0 13px !important; border: 0 !important; list-style: none;
  }
  html body .v2au .rb_login .rb_login_box > li.rb_login_logo { display: none !important; }  /* 히어로에 로고가 있다 */
  html body .v2au .rb_login .rb_login_box > li > span:first-child {   /* 항목 이름 */
    display: block; margin: 0 0 7px 2px;
    font-size: 13.5px !important; font-weight: 800; color: var(--v4a-tx) !important;
    font-family: inherit;
  }
  .v2au .rb_login_box .help_text {
    display: block; margin: 6px 2px 0; font-size: 12px; line-height: 1.55;
    font-weight: 500; color: var(--v4a-sub);
  }
  .v2au .rb_login_box input.input.mt-10 { margin-top: 9px; }

  /* 추천 코드 묶음 — 시안의 강조 박스 */
  .v4au-refhd {
    display: flex; align-items: center; gap: 10px;
    margin: 18px 0 0; padding: 13px 14px; border-radius: 16px 16px 0 0;
    background: linear-gradient(180deg, #FFFBF2, #FFF6E6);
    border: 1.5px solid #F0DDB8; border-bottom: 0;
    font-size: 14px; font-weight: 800; color: var(--v4a-tx);
  }
  .v4au-refhd b { color: var(--v4a-gold); }
  .v4au-refhd .ic { flex: none; font-size: 20px; line-height: 1; }
  .v4au-refwrap {
    padding: 13px 14px 4px; border-radius: 0 0 16px 16px;
    background: #FFFDF8; border: 1.5px solid #F0DDB8; border-top: 0;
  }

  /* 가입 버튼 줄 — 테마의 .btn_submit 은 자기 색·크기를 갖고 있어 덮어쓴다 */
  html body .v2au .btn_confirm, html body .v2au .rb_btn_confirm { margin-top: 16px; }
  html body .v2au .btn_confirm button.btn_submit,
  html body .v2au .btn_confirm input[type=submit],
  html body .v2au button.btn_submit, html body .v2au input[type=submit] {
    width: 100% !important; height: 56px !important;
    border: 0 !important; border-radius: 15px !important;
    background: linear-gradient(135deg, var(--v4a2), var(--v4a)) !important;
    color: #fff !important; font-size: 16.5px !important; font-weight: 800 !important;
    box-shadow: 0 8px 20px rgba(14,124,76,.28) !important;
  }
  /* 입력칸 옆 [중복확인] 같은 작은 버튼 */
  html body .v2au .rb_login_box .btn_frmline, html body .v2au .rb_login_box .btn_confirm_sm {
    height: 56px; border-radius: 13px; padding: 0 14px;
    background: #E8F2EC; color: var(--v4a); border: 0; font-size: 13.5px; font-weight: 800;
  }

  /* ── v2au 의 파랑을 모바일에서만 초록으로 (PC 스플릿 셸은 파랑 그대로) ── */
  .v2au a { color: var(--v4a); }
  .v2au input[type=checkbox], .v2au input[type=radio] { accent-color: var(--v4a); }
  .v2au .v2au-agreeall {
    background: #EFF7F2 !important; border-color: #BFDACB !important; color: var(--v4a) !important;
  }
  .v2au .v2au-terms, .v2au .v2au-ta, .v2au .v2au-sec { border-color: var(--v4a-ln) !important; }
  .v2au .ck label::before, .v2au .v2au-check label::before { border-color: #C3D6CB !important; }
  .v2au .ck input:checked + label::before,
  .v2au .v2au-check input:checked + label::before,
  .v2au input[type=checkbox]:checked + label::before {
    background: var(--v4a) !important; border-color: var(--v4a) !important;
  }
  /* 입력칸 옆 작은 버튼들(중복확인 · 지역 찾기 · 인증) */
  html body .v2au .rb_login .rb_login_box .btn_frmline,
  html body .v2au .rb_login .rb_login_box button:not(.btn_submit),
  html body .v2au .rb_login .rb_login_box input[type=button] {
    height: 56px !important; min-width: 72px; padding: 0 14px !important;
    border: 0 !important; border-radius: 13px !important;
    background: #E8F2EC !important; color: var(--v4a) !important;
    font-size: 13.5px !important; font-weight: 800 !important;
  }

  /* 넘침 방지 — 좁은 기기에서 표·버튼이 폭을 밀지 않도록 */
  .v2au, .v2au * { min-width: 0; }
  .v2au img, .v2au table { max-width: 100%; }
}

@media (max-width: 380px) {
  .v4au-hero h1 { font-size: 26px; }
  .v4au-hero p { font-size: 12.5px; }
  .v4au-ref .tile .v { font-size: 21px; }
  .v4au-ref h2 { font-size: 16px; }
}

/* ── 입력칸 옆 버튼(중복확인·본인확인)이 아래로 떨어지던 것 ──
   `.full_input{width:100%}` 이라 버튼이 밀려 다음 줄로 내려가 왼쪽에 덩그러니 남았다.
   360px(Z플립)에서 특히 어색했다 → 한 줄 flex 로 못 박는다. */
@media (max-width:900px){
  /* ⚠ v2au.css(≤380px)가 `.v2au .rb_login_box .input_wrap{flex-wrap:wrap}` 와
     `… .input{flex:1 1 100%}` 로 버튼을 일부러 아래로 내린다. 그런데 내려간 버튼이
     왼쪽에 작게 남아 더 어색했다. 안내 문구를 줄였으니 한 줄로 되돌린다.
     이기려면 그쪽과 같은 자리에 `.rb_login_box` 를 끼워 선택자를 더 세게 만든다. */
  html body .v2au .rb_login_box .input_wrap{display:flex;align-items:center;gap:7px;flex-wrap:nowrap}
  html body .v2au .rb_login_box .input_wrap > .input{flex:1 1 auto;min-width:0}
  html body .v2au .rb_login_box .input_wrap > .btn_frmline{flex:0 0 auto;margin:0}
  /* 본인확인 버튼이 여럿 붙는 줄만 예외로 줄바꿈 */
  html body .v2au .rb_login_box .input_wrap.rb_sms_cert_wrap{flex-wrap:wrap}
}
@media (max-width:380px){
  html body .v2au .v2au-field input,
  html body .v2au .rb_login_box input.input{font-size:14px;padding-left:44px;padding-right:12px}
  html body .v2au .rb_login_box .btn_frmline{padding:0 11px !important;font-size:12.5px !important}
}

/* ── 도움말(?) 버튼이 항목 오른쪽 끝에 떠 있던 것 ──
   `.rb-help` 는 라벨 <span> 기준 `position:absolute; right:-10px; top:-13px` 이다.
   라벨을 폭 전체를 쓰는 블록으로 바꾸면서 버튼이 줄 오른쪽 끝(중복확인 위)까지 날아가
   회색 원이 카드 밖에 떠 있는 것처럼 보였다. 라벨 글자 바로 옆에 붙인다.
   ⚠ 말풍선(.rb-help-pop)이 .rb-help 기준으로 뜨므로 position 은 relative 로 남겨 둔다. */
@media (max-width:900px){
  html body .v2au .rb_login_box > li > span:first-child{
    display:flex;align-items:center;gap:5px}
  html body .v2au .rb_login_box .rb-help{
    position:relative;left:auto;right:auto;top:auto;
    width:auto;height:auto;display:inline-flex;align-items:center;flex:none}
  html body .v2au .rb_login_box .rb-help-btn{width:20px;height:20px;padding:0}
  /* 말풍선이 화면 밖으로 나가지 않게 (열었을 때 잘려 읽히던 것) */
  html body .v2au .rb_login_box .rb-help-pop{
    max-width:calc(100vw - 40px);left:0;right:auto}
}

/* ⚠ 그누보드 default.css 의 `p{word-break:break-all}` 때문에 한글이 단어 한가운데서 잘린다
   ('시작하 / 세요'). 인증 화면 전체에 어절 단위 줄바꿈을 다시 씌운다. */
html body .v2au p,
html body .v2au span,
html body .v2au b,
html body .v2au li,
html body .v2au label{word-break:keep-all;overflow-wrap:break-word}