/* ═══════════════════════════════════════════════
     메인 등록 모달
  ═══════════════════════════════════════════════ */
  #reg-modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 10000;
    justify-content: center; align-items: center;
    backdrop-filter: blur(8px);
  }
  #reg-modal-overlay.active { display: flex; }

  #reg-modal {
    background: #eeeeee;
    width: 480px; border-radius: 35px; padding: 35px;
    position: relative; text-align: center;
    box-shadow: 0 30px 70px rgba(0,0,0,0.6);
    transform: scale(0.8); opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  #reg-modal-overlay.active #reg-modal { transform: scale(1); opacity: 1; }

  /* 닫기 버튼 */
  .modal-close-x {
    position: absolute; top: 15px; right: 18px;
    background: transparent; border: none;
    color: #999; font-size: 26px; font-weight: bold; cursor: pointer;
  }
  .modal-close-x:hover { color: #333; }

  /* 헤더 */
  .modal-header { margin-bottom: 5px; }
  .modal-header h2 { font-size: 22px; font-weight: 900; color: #222; margin: 0 0 4px; }
  .modal-header p  { font-size: 13px; color: #888; margin: 0; }

  /* 번호 표시 */
  #phone-display {
    font-size: 40px; font-weight: 900; color: #333;
    margin: 15px 0; letter-spacing: 6px;
  }

  /* 키패드 3열 */
  #keypad {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; width: 260px; margin: 0 auto 25px;
  }
  #keypad button {
    height: 55px; background: #888; color: white;
    border: none; border-radius: 12px; font-size: 22px; font-weight: bold;
    cursor: pointer; box-shadow: 0 3px 0 #666; transition: transform 0.1s;
  }
  #keypad button:active { transform: scale(0.94); box-shadow: none; }
  .key-danger { background: var(--accent-red) !important; box-shadow: 0 3px 0 #b71c1c !important; }
  .key-dark   { background: #333 !important; box-shadow: 0 3px 0 #000 !important; color: #fff !important; }

  /* ═══════════════════════════════════════════════
     종목 선택 영역
  ═══════════════════════════════════════════════ */
  .select-area { margin-top: 5px; }

  .select-title {
    font-size: 13px; font-weight: 900; color: #999;
    text-align: center; margin-bottom: 14px; letter-spacing: 1px;
  }

  /* 회원 목록 숨김 — 상단 phone-display에서 이름 표시 */
  .select-names { display: none; }

  .select-row { display: flex; justify-content: center; }
  .select-sports { width: 100%; }
  .select-sub {
    font-size: 12px; font-weight: 700; color: #aaa;
    margin: 0 0 10px; letter-spacing: 1px; text-align: center;
  }

  /* 종목 버튼 공통 */
  .sport-btns { display: flex; flex-direction: column; gap: 10px; }
  .sport-btns button {
    width: 100%; padding: 14px 0;
    border: none; border-radius: 14px;
    font-size: 16px; font-weight: 900; letter-spacing: 0.5px;
    cursor: pointer; transition: all 0.15s;
    box-shadow: 0 4px 0 rgba(0,0,0,0.2);
    color: #fff;
  }
  .sport-btns button:active { transform: translateY(3px); box-shadow: none; }

  /* 진도/자세 — 그린 */
  .btn-green { background: linear-gradient(135deg, #43a047, #1b5e20); }
  .btn-green:hover { background: linear-gradient(135deg, #66bb6a, #2e7d32); box-shadow: 0 6px 16px rgba(67,160,71,0.5); }

  /* 미트 — 레드 */
  .btn-red { background: linear-gradient(135deg, #ff5252, #b71c1c); }
  .btn-red:hover { box-shadow: 0 6px 16px rgba(255,82,82,0.5); }

  /* 스파링 — 옐로 */
  .btn-yellow { background: linear-gradient(135deg, #fbc02d, #e65100); }
  .btn-yellow:hover { box-shadow: 0 6px 16px rgba(251,192,45,0.5); }

  /* ═══════════════════════════════════════════════
     동명이인 서브 모달
  ═══════════════════════════════════════════════ */
  .sub-modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 11000;
    justify-content: center; align-items: center; backdrop-filter: blur(10px);
  }
  .sub-modal-overlay.active { display: flex; }

  .sub-modal {
    background: #1f1f1f; border: 2px solid #4fc3f7;
    border-radius: 25px; padding: 30px; width: 400px;
    text-align: center; color: white;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  }
  .sub-modal h3 { font-size: 20px; font-weight: 900; margin: 0 0 8px; }
  .sub-modal p  { font-size: 14px; color: #aaa; margin: 0 0 20px; }

  .name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 16px; }
  .name-item {
    background: #333; color: #fff; padding: 15px;
    border-radius: 12px; font-size: 22px; font-weight: bold;
    cursor: pointer; border: 1px solid #444; transition: 0.2s;
  }
  .name-item:hover { background: #4fc3f7; color: #000; transform: scale(1.05); }

  .btn-close-sub {
    background: #444; color: #aaa; border: none;
    padding: 10px 24px; border-radius: 10px;
    font-size: 14px; font-weight: 700; cursor: pointer;
  }
  .btn-close-sub:hover { background: #555; color: #fff; }

  /* 펄스 애니메이션 */
  .highlight-text { animation: pulse 1s infinite alternate; }
  @keyframes pulse {
    from { transform: scale(1);    text-shadow: 0 0 5px var(--point-color); }
    to   { transform: scale(1.05); text-shadow: 0 0 20px var(--point-color); }
  }