/* ===== OTP PAGE LAYOUT ===== */
    .otp-page{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:32px 16px;
      background:#0b1220;
    }
    .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;
    }