/* PC BG 위 타이틀 - 메탈골드 + 엠보싱 + 샤인 */
@media (min-width: 769px) {
  body { position: relative; }
  body::before{
    content:"Season 21 1-3  크루세이더";
    position:absolute;
    top: 110px;                 /* 캐릭터 얼굴/가슴 위치 맞춰서 조절 */
    left:50%;
    transform:translateX(-50%);

    font-family: "Open Sans", system-ui, sans-serif;
    font-size: 54px;            /* 크면 48~56 사이로 */
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
	padding:200px; 0px;

    /* 메탈 골드 */
    background: linear-gradient(180deg,
      #fffbe6 0%,
      #ffeaa6 12%,
      #ffd35a 25%,
      #ffb300 45%,
      #ffd35a 62%,
      #b8860b 82%,
      #5a3a00 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* 엠보싱/깊이감 */
    text-shadow:
      0 2px 0 rgba(0,0,0,0.65),
      0 10px 18px rgba(0,0,0,0.65),
      0 0 14px rgba(255, 200, 60, 0.55),
      0 0 40px rgba(255, 170, 0, 0.25);

    /* 약간의 외곽선 느낌(지원되는 브라우저에서만) */
    -webkit-text-stroke: 1px rgba(40, 20, 0, 0.55);
  }

  /* 위에 "빛이 한 번 쓱 지나가는" 샤인 레이어 */
  body::after{
    content:"Season 21 1-3  크루세이더";
    position:absolute;
    top: 110px;
    left:50%;
    transform:translateX(-50%);
    font-family: "Open Sans", system-ui, sans-serif;
    font-size: 54px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events:none;
    z-index: 6;
	padding:200px; 0px;

    /* 샤인 */
    background: linear-gradient(110deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 35%,
      rgba(255,255,255,0.95) 50%,
      rgba(255,255,255,0) 65%,
      rgba(255,255,255,0) 100%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: blur(0.2px);
    opacity: 0.55;
    animation: titleShine 3.8s linear infinite;
    mix-blend-mode: screen;
  }

  @keyframes titleShine{
    0%   { background-position: -120% 0; opacity: 0.15; }
    20%  { opacity: 0.65; }
    40%  { opacity: 0.55; }
    100% { background-position: 120% 0; opacity: 0.15; }
  }
}

/* Mobile BG 위 타이틀 */
@media (max-width: 768px) {
  body { position: relative; }

  body::before{
    content:"Season 21 1-3 크루세이더";
    position:absolute;
    top: 80px;                 /* 모바일은 조금 위로 */
    left:50%;
    transform:translateX(-50%);
	padding:50px;

    font-family: "Open Sans", system-ui, sans-serif;
    font-size: 25px;           /* 모바일은 작게 */
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;

    background: linear-gradient(180deg,
      #fffbe6 0%,
      #ffeaa6 12%,
      #ffd35a 25%,
      #ffb300 45%,
      #ffd35a 62%,
      #b8860b 82%,
      #5a3a00 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow:
      0 2px 0 rgba(0,0,0,0.65),
      0 6px 12px rgba(0,0,0,0.65),
      0 0 10px rgba(255, 200, 60, 0.55);
  }

  body::after{
    content:"Season 21 1-3 크루세이더";
    position:absolute;
    top: 80px;
    left:50%;
    transform:translateX(-50%);
    font-family: "Open Sans", system-ui, sans-serif;
    font-size: 25px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events:none;
    z-index: 6;
	padding:50px;

    background: linear-gradient(110deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 35%,
      rgba(255,255,255,0.95) 50%,
      rgba(255,255,255,0) 65%,
      rgba(255,255,255,0) 100%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.55;
    animation: titleShine 4s linear infinite;
    mix-blend-mode: screen;
  }

  @keyframes titleShine{
    0%   { background-position: -120% 0; opacity: 0.2; }
    100% { background-position: 120% 0; opacity: 0.2; }
  }
}

/* ================================
   DARK INPUT FULL UNIFIED STYLE
   ================================ */
/* 입력 라인 전체 */
/* ============================
   Registration Modal 통일 스타일
   기존 템플릿 구조 유지
============================ */

/* 모든 input wrap 박스 공통 디자인 */
#registration-modal .input-wrap {
    width: 100%;
    height: 48px;                         /* ★ 통일된 높이 */
    background: #151515 !important;        /* ★ 검정 박스 통일 */
    border: 1px solid #303030 !important;  /* ★ 동일 테두리색 */
    border-radius: 4px;
    margin: 10px 0 22px 0;                 /* ★ 통일된 간격 */
    padding: 0 !important;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* input 필드 공통 스타일 */
#registration-modal .input-wrap input {
    width: 100%;
    height: 100%;
    background: transparent !important;  /* 내부 배경 제거 */
    border: none !important;
    outline: none !important;
    padding: 0 14px 0 54px !important;   /* ★ 아이콘 고려한 동일 패딩 */
    color: #ffffff !important;
    font-size: 15px;
}

/* Focus/hover 효과 */
#registration-modal .input-wrap:hover,
#registration-modal .input-wrap:focus-within {
    border-color: #f0c86d !important;    /* Gold highlight */
    background: #1f1f1f !important;
}

/* 아이콘 위치 보정 (기존 템플릿 방식 유지) */
#registration-modal .input-wrap.name input,
#registration-modal .input-wrap.password input {
    padding-left: 54px !important;        /* 아이콘 공간 확보 */
}

/* Email도 동일하게 적용 */
#registration-modal .input-wrap.email input {
    padding-left: 54px !important;
}

/* 모바일 최적화 */
@media (max-width: 480px) {
    #registration-modal .input-wrap {
        height: 44px;
    }
    #registration-modal .input-wrap input {
        font-size: 14px;
        padding-left: 50px !important;
    }
}