/* ===== OTP PAGE LAYOUT ===== */

.device-notice{
   margin:40px 0;
padding:32px 24px;

    line-height:1.8;
}

.social-login-wrap{
    width:100%;
    margin-top:30px;   /* 위 공백 */
}

/* 제목 */
.social-title{
    text-align:center; /* 가운데 정렬 */
    margin-bottom:20px;
}xp


.social-login-wrap,
.social-login-wrap a {
    width:100%;
}

.gsi-material-button {
    display:flex !important;
    width:100% !important;
}
.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: WHITE;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #1f1f1f;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
    letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
   width: 100% !important;
  max-width: 100% !important;
  height: 56px;
  min-width: 100%;
}

.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 10px;
  min-width: 20px;
  width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: center;
  gap:12px;
  position: relative;
  width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 0;
  flex-grow: 0;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gsi-material-button:disabled {
  cursor: default;
  background-color: #ffffff61;
  border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state, 
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: #303030;
  opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: #303030;
  opacity: 8%;
}



   /* 공통 버튼 */
.social-btn{
    width:100%;
min-height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    border-radius:12px;
    text-decoration:none;

    margin-bottom:12px;

    overflow:hidden;
}

/* 일반 아이콘 */
.naver-btn img,
.google-btn img{
    width:22px;
    height:22px;
}



.kakao-btn{
    width:100%;
    height:56px;
    min-height:56px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
 padding-left:20px;   /* 오른쪽으로 살짝 이동 */
    background:#FEE500;
    border-radius:12px;
    text-decoration:none;
}

.kakao-full-img{
    width:22px !important;
    height:22px !important;
    object-fit:contain !important;
    margin-right:0;
}

.kakao-btn span{
    font-size:16px;
    font-weight:600;
    color:#191919;
}


/* 버튼 색상 */
.naver-btn{
    background:#03C75A;
    color:#fff;
}

.google-btn{
    background:#fff;
    color:#111;
   border:none;

    display:flex !important;
    width:100% !important;
}

.otp-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
  background:#ffffff;
}
    .otp-wrap{
      width:100%;
      max-width:760px;
      padding:32px 36px;
      background:linear-gradient(180deg,#111f3b,#0f1b32);
      border-radius:20px;
      box-shadow:0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
      color:#e8eefc;
      border:1px solid rgba(122,167,255,.18);
    }
    .otp-wrap h2{
      text-align:center;
      margin-bottom:6px;
      font-weight:800;
    }
    .otp-desc{
      text-align:center;
      font-size:14px;
      color:#a9b6da;
      margin-bottom:18px;
    }
    .otp-wrap input,
    .otp-wrap select{
      width:100%;
      padding:12px;
      border-radius:12px;
      border:1px solid #2a3a63;
      background:#0b1220;
      color:#e8eefc;
      outline:none;
    }
    .otp-wrap input::placeholder{
      color: rgba(233,238,252,.45);
    }
    .otp-wrap input:focus,
    .otp-wrap select:focus{
      border-color:#7aa7ff;
      box-shadow:0 0 0 2px rgba(122,167,255,.15);
    }
    .otp-wrap button{
      padding:12px 16px;
      border-radius:12px;
      border:none;
      background:#7aa7ff;
      color:#0b1220;
      font-weight:800;
      cursor:pointer;
      white-space:nowrap;
    }
    .otp-wrap button:hover{ opacity:.92; }

    .otp-row{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
    }
    .otp-row > input,
    .otp-row > select{
      flex: 1 1 220px;
      min-width: 200px;
    }
    .otp-row .otp-send-btn,
    .otp-row button{
      flex: 0 0 auto;
      min-width: 120px;
    }

    .otp-section{
      border:1px solid #2a3a63;
      border-radius:14px;
      padding:16px;
      margin-top:18px;
      background:rgba(255,255,255,.02);
    }
    .otp-section h3{
      margin:0 0 10px;
      font-size:15px;
      font-weight:800;
    }

    .otp-state{
      margin-top:8px;
      font-size:13px;
      color:#a9b6da;
      min-height: 18px;
    }

    /* ✅ OTP 상태 경고 표시 */
    .otp-state.warn{
      color:#fbbf24;
      font-weight:800;
    }
    .otp-state.danger{
      color:#fb7185;
      font-weight:900;
      text-shadow:0 0 10px rgba(251,113,133,.25);
    }

    /* ✅ 만료/재발송 안내 */
    .otp-hint{
      margin-top:8px;
      font-size:13px;
      color:#c7d2fe;
      line-height:1.35;
    }
    .otp-hint strong{ color:#fff; }

    /* ===== NOTICE ===== */
    .device-notice{
      border:1px solid #f0c36d;
      background:#fff8e1;
      color:#333;
      padding:14px;
      border-radius:12px;
      font-size:14px;
    }
    .device-notice h3{
      margin:0 0 6px;
      font-size:14px;
      font-weight:800;
    }
    .device-notice label{ cursor:pointer; }

    .device-check{
      margin-top:8px;
      display:flex;
      align-items:center;
      gap:8px;
    }
    .device-label{
      margin:0;
      cursor:pointer;
    }
    .device-check input[type="checkbox"]{
      width:18px;
      height:18px;
      margin:0;
    }

    /* ===== TERMS ROW ===== */
    .terms-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:8px 0;
    }
    .terms-left{
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
      cursor:pointer;
    }
    .terms-left input[type="checkbox"]{
      width:18px;
      height:18px;
      margin:0;
      flex:0 0 auto;
      vertical-align:middle;
    }
    .terms-text{
      display:inline-block;
      line-height:1.2;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .terms-btn{
      font-size:12px;
      padding:4px 10px;
      border-radius:10px;
      background-color:#ffffff !important;
      color:#111111;
      border:1px solid #ddd;
      opacity:1;
      box-shadow:none;
      flex:0 0 auto;
    }

    #msg{
      margin-top:10px;
      font-size:14px;
      min-height:18px;
    }

    .otp-send-btn{
      min-width:120px;
      white-space:nowrap;
    }

    /* ✅ disabled UI */
    button:disabled{
      opacity:.55;
      cursor:not-allowed;
    }
    input:disabled{
      opacity:.7;
      cursor:not-allowed;
    }

    @media (max-width: 520px){
      .otp-wrap{ padding:22px 18px; }
    }

    /* ======================================================
       ✅ 약관 모달
       ====================================================== */
    .terms-modal{ position:fixed; inset:0; z-index:9999; }
    .terms-modal.d-none{ display:none; }
    .terms-backdrop{
      position:absolute;
      inset:0;
      background:rgba(0,0,0,.55);
    }
    .terms-box{
      position:relative;
      width:min(980px, 96vw);
      height:92vh;
      margin:4vh auto 0;
      background:#0f1b32;
      border-radius:16px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.12);
      display:flex;
      flex-direction:column;
    }
    .terms-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      border-bottom:1px solid rgba(255,255,255,.12);
    }
    .terms-frame{
      flex:1;
      width:100%;
      border:0;
      background:#fff;
    }
    .terms-close{
      background:#111f3b;
      color:#e8eefc;
      padding:8px 12px;
      border-radius:10px;
      border:none;
      cursor:pointer;
      font-weight:800;
    }
    .terms-agree{
      background:#7aa7ff;
      color:#0b1220;
      padding:8px 12px;
      border-radius:10px;
      border:none;
      cursor:pointer;
      font-weight:900;
    }