/* 맨즈벳 — 디자인 원본 위에 백엔드 연결에 필요한 요소만 최소 추가 */

/* 로그인 팝업 보안숫자 */
.ess-captcha-row{display:flex;align-items:center;gap:8px;margin:0 0 14px;width:100%;box-sizing:border-box}
.ess-captcha-row .ess-captcha-img{width:110px;height:40px;flex:0 0 110px;object-fit:cover;border:1px solid #cda968;background:#1a140f;cursor:pointer}
.ess-captcha-row input.out_login_ip{flex:1 1 auto;min-width:0;margin:0!important;height:40px;box-sizing:border-box}

/* 로그인 결과 메시지 */
.ess-login-msg{display:none;margin:12px 0 0;padding:9px 10px;border-radius:4px;font:13px/1.5 'Malgun Gothic',sans-serif;text-align:center;word-break:keep-all}
.ess-login-msg.err{display:block;color:#ffdcdc;background:#3a1717;border:1px solid #a33}
.ess-login-msg.ok{display:block;color:#ddffe3;background:#123a1c;border:1px solid #2e8b46}

/* 로그인 상태 표시 */
/* 상단 계정 영역: 아이디 / 보유금액 / 보유포인트 / 로그아웃 */
.ess-user-box{display:inline-flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:2px;line-height:1.15;white-space:nowrap;cursor:default}
.ess-user-idline{display:inline-flex;align-items:center;gap:5px}
.ess-user-box .ess-user-grade{color:#9fd8ff;font-size:10px;line-height:1;padding:1px 4px;border:1px solid rgba(159,216,255,.35);border-radius:3px}
.ess-user-box .ess-user-nick{color:#f0d49b;font-size:11px;font-weight:700;max-width:96px;overflow:hidden;text-overflow:ellipsis}
.top_right_box .ess-user-box .ess-user-logout,.ess-user-box .ess-user-logout{display:inline-block;padding:1px 6px !important;margin:0;border:1px solid rgba(203,213,225,.35);border-radius:3px;background:transparent;color:#cbd5e1 !important;font-size:9px !important;font-weight:700;line-height:1.5;text-decoration:none}
.top_right_box .ess-user-box .ess-user-logout:hover,.ess-user-box .ess-user-logout:hover{border-color:#f0d49b;color:#f0d49b !important}
.ess-user-cash{display:inline-flex;align-items:baseline;gap:7px}
.ess-cash{display:inline-flex;align-items:baseline;gap:3px}
.ess-cash em{font-style:normal;color:#8d9aa8;font-size:9px;letter-spacing:-.02em}
.ess-cash b{color:#ffd76a;font-size:11px;font-weight:800}
.ess-cash i{font-style:normal;color:#8d9aa8;font-size:9px}

/* 모바일 로그인 상태 바 */
.contents_join_box.ess-user-bar{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;padding:6px 4px;box-sizing:border-box;height:auto !important}
.contents_join_box.ess-user-bar .ess-user-box{align-items:center}
.contents_join_box.ess-user-bar .ess-user-nick{font-size:12px;max-width:none}
.contents_join_box.ess-user-bar .ess-cash em,.contents_join_box.ess-user-bar .ess-cash i{font-size:10px}
.contents_join_box.ess-user-bar .ess-cash b{font-size:13px}
.contents_join_box.ess-user-bar .ess-user-logout{font-size:10px !important;padding:2px 8px !important}

/* 프로토타입 표기 제거 */
.local-preview-tag{display:none!important}

/* 아이콘 메뉴 무한 슬라이드
   카드 폭이 화면 폭에 따라 달라지므로 이동 거리를 CSS 에 고정할 수 없다.
   ess-bridge.js 가 실제 "한 세트" 폭을 재서 --ess-marq-set 에 넣는다. */
@media(min-width:769px){
 .slider-container{overflow:hidden}
 .main_middle_box2{overflow:visible}
 .main_middle_box2.ess-marq-ready{
   animation:ess-marquee var(--ess-marq-dur,32s) linear infinite;
   animation-play-state:running;
   will-change:transform;
 }
 .slider-container:hover .main_middle_box2.ess-marq-ready{animation-play-state:paused}
}
@keyframes ess-marquee{
 from{transform:translate3d(0,0,0)}
 to{transform:translate3d(calc(-1 * var(--ess-marq-set,0px)),0,0)}
}

@media(max-width:768px){
 .ess-captcha-row .ess-captcha-img{flex:0 0 100px;width:100px;height:38px}
 .ess-captcha-row input.out_login_ip{height:38px}
}

/* ?뚯썝媛€????(ess-join.js) */
.ess-reg-code{margin:10px 0 12px;padding:8px 10px;border:1px solid #4a3a1a;background:#0b0906;font-size:12px;text-align:center;color:#c9b183}
.ess-reg-code b{color:#ffd76a;letter-spacing:.04em}
.ess-reg-code em{margin-left:6px;font-style:normal;color:#8d9aa8}
.ess-reg-form{display:flex;flex-direction:column;gap:10px}
.ess-reg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ess-reg-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.ess-reg-field>span{color:#c9b183;font-size:11px;font-weight:700}
.ess-reg-field>span em{font-style:normal;color:#7f8a9d;font-weight:400}
.ess-reg-input{width:100%;box-sizing:border-box;height:38px;border:1px solid #4a3a1a;background:#0a0805;color:#f2e6cd;padding:0 10px;font-size:13px;font-family:inherit}
.ess-reg-input:focus{outline:none;border-color:#cda968}
.ess-reg-input::placeholder{color:#6f6552}
.ess-reg-captcha{display:flex;gap:8px;align-items:center;margin-top:2px}
.ess-reg-captcha .ess-captcha-img{height:38px;width:auto;border:1px solid #4a3a1a;background:#120d08;cursor:pointer;flex:none}
.ess-reg-captcha .ess-reg-input{flex:1}
.ess-reg-hint{margin:0;color:#7f8a9d;font-size:11px;line-height:1.5;text-align:center}
.ess-reg-submit{height:44px;border:1px solid #d4a34f;background:linear-gradient(180deg,#f5d184,#9d6b22);color:#130b02;font-size:15px;font-weight:900;cursor:pointer;font-family:inherit}
.ess-reg-submit:disabled{opacity:.5;cursor:not-allowed}
.ess-reg-back{align-self:center;margin-top:2px;padding:2px 6px;border:0;background:transparent;color:#8d9aa8;font-size:11px;text-decoration:underline;cursor:pointer;font-family:inherit}
.ess-reg-back:hover{color:#cda968}
.ess-reg-msg{min-height:16px;font-size:12px;line-height:1.5;text-align:center;color:#c9b183;word-break:break-all}
.ess-reg-msg.err{color:#ff8f8f}
.ess-reg-msg.ok{color:#8ee89b}
.next_step.is-busy{opacity:.55;pointer-events:none}
@media(max-width:480px){
  .ess-reg-grid{grid-template-columns:1fr}
  .ess-reg-input{height:40px;font-size:14px}
}

/* ── 좁은 데스크톱(769~1023px) 레이아웃 보정 ─────────────────────────
   원인: #quickFoot 은 max-width:768px 에서만 position:fixed 로 모바일 하단바가 되고,
        min-width:1024px 에서만 display:none 이 된다.
        그래서 769~1023px 구간에서는 두 규칙이 모두 적용되지 않아
        하단바가 position:static 인 채 본문 아래에 세로로 늘어서고
        아이콘 5개가 한 줄씩 쌓여 페이지가 깨져 보였다.
   수정: 데스크톱 레이아웃이 시작되는 769px 부터는 모바일 하단바를 숨긴다. */
@media (min-width:769px){
  #quickFoot{display:none!important}
}

/* 상단 계정 영역 (로그인 후)
   이전 수정의 문제: .ess-user-cash 에 space-between 을 걸어 360px 폭 양 끝으로
   보유금액·보유포인트가 갈라져 가운데가 텅 비어 보였다(깨진 것처럼 보임).
   수정: 계정 정보는 오른쪽에 한 덩어리로 모으고(safe-right), 폭은
        글자 크기 + 항목 구분선 + 안쪽 여백으로 확보한다. */
.top_info_box > .top_right_box{flex:0 1 auto;min-width:0}
.top_right_box > .ess-user-box{
  flex:0 0 auto;
  min-width:0;
  gap:5px;
  margin-left:6px;
  padding:5px 11px 5px 12px;
  border:1px solid rgba(205,169,104,.22);
  border-radius:6px;
  background:linear-gradient(180deg,rgba(205,169,104,.10),rgba(205,169,104,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.top_right_box > .ess-user-box .ess-user-idline{justify-content:flex-end;gap:7px}
.top_right_box > .ess-user-box .ess-user-grade{font-size:10px;padding:2px 5px}
.top_right_box > .ess-user-box .ess-user-nick{font-size:12px;max-width:130px}
.top_right_box > .ess-user-box .ess-user-logout{font-size:10px !important;padding:2px 7px !important}
/* 보유금액 | 보유포인트 를 가운데 구분선으로 묶어 한 덩어리로 보이게 */
.top_right_box > .ess-user-box .ess-user-cash{justify-content:flex-end;gap:0}
.top_right_box > .ess-user-box .ess-cash{flex:0 0 auto;padding:0 9px}
.top_right_box > .ess-user-box .ess-cash:first-child{padding-left:0}
.top_right_box > .ess-user-box .ess-cash:last-child{padding-right:0}
.top_right_box > .ess-user-box .ess-cash + .ess-cash{border-left:1px solid rgba(255,255,255,.14)}
.top_right_box > .ess-user-box .ess-cash em,
.top_right_box > .ess-user-box .ess-cash i{font-size:10px}
.top_right_box > .ess-user-box .ess-cash b{font-size:13px;font-variant-numeric:tabular-nums}

/* 769~1179px: 링크 9개 + 계정 박스가 한 줄에 들어가야 하므로 계정 박스만 압축
   (보유금액·보유포인트는 이 구간에서도 반드시 보여야 하므로 숨기지 않는다) */
@media (min-width:769px) and (max-width:1179px){
  .top_right_box > .ess-user-box{padding:3px 8px;gap:3px}
  .top_right_box > .ess-user-box .ess-user-nick{font-size:11px;max-width:92px}
  .top_right_box > .ess-user-box .ess-user-grade{font-size:9px;padding:1px 4px}
  .top_right_box > .ess-user-box .ess-user-logout{font-size:9px !important;padding:1px 5px !important}
  .top_right_box > .ess-user-box .ess-cash{padding:0 6px}
  .top_right_box > .ess-user-box .ess-cash em,
  .top_right_box > .ess-user-box .ess-cash i{font-size:9px}
  .top_right_box > .ess-user-box .ess-cash b{font-size:12px}
}

/* 상단 아이디를 마이페이지 링크로 (클릭 가능 표시) */
.ess-user-box .ess-user-mypage{display:inline-flex;align-items:center;gap:5px;padding:0!important;margin:0;color:inherit!important;text-decoration:none;border-radius:3px;cursor:pointer}
.top_right_box .ess-user-box .ess-user-mypage{padding:1px 4px!important}
.ess-user-box .ess-user-mypage:hover .ess-user-nick,
.ess-user-box .ess-user-mypage:focus-visible .ess-user-nick{color:#ffe6a8!important;text-decoration:underline;text-underline-offset:2px}
.ess-user-box .ess-user-mypage:hover .ess-user-grade,
.ess-user-box .ess-user-mypage:focus-visible .ess-user-grade{border-color:rgba(255,230,168,.7)}
.ess-user-box .ess-user-mypage:focus-visible{outline:1px solid #ffd76a;outline-offset:2px}