@charset "utf-8";
/* ─────────────────────────────────────────────────────────────
   로그인 · 아이디/비밀번호 찾기 · 비밀번호 재확인 (국문·영문 공용) — 2026-10-31
   화면: theme/shared/login_rewrite.inc.php, password_lost_rewrite.inc.php, member_confirm_rewrite.inc.php

   사이트 디자인 규칙(theme/nero/css/speaker.css 머리말)을 따른다.
   - 주색 #495FA1 / 강조 #1A264B / 경계 #E5E5EC / 면 #F8F8FA, 본문 #111·#505050, 보조 #767676
   - 모서리 4px, 알약·이모지·부양 호버 없음, 단위 rem
   - 제목 .contents_title, 소제목 .sub_title2, 밑줄 탭 .event_menu 를 그대로 쓴다
   예전 로그인 화면은 따로 고른 남색(#183a5d)·파란 테두리, 찾기 화면은 부트스트랩 색과 ✓✗ 팝업이었다.
   ───────────────────────────────────────────────────────────── */

.ma [hidden]{display:none !important}   /* 사이트 CSS 가 section 등을 display:block 으로 덮어 hidden 이 안 먹는다 */
.ma .contents_title{margin-bottom:1.2rem}
.ma-intro{margin:0 0 4rem;color:#505050;font-size:1.9rem;line-height:1.6;word-break:keep-all}

.ma .ma-box{max-width:98rem;margin:0 auto}   /* 로그인: 예전 PC 화면 비율(980px 가운데, 두 칸 같은 폭) 그대로 */
.ma-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem;align-items:stretch}
.ma-narrow{max-width:56rem;margin:0 auto}

.ma-card{padding:3.6rem 4rem 4rem;border:1px solid #E5E5EC;border-radius:4px;background:#fff}
.ma-card.sub{background:#F8F8FA}
.ma-card .sub_title2{margin:0 0 .8rem}
.ma-lead{margin:0 0 2.8rem;color:#767676;font-size:1.7rem;line-height:1.6;word-break:keep-all}

.ma-field{margin-bottom:1.8rem}
.ma-field > label,.ma-field > .ma-label{display:block;margin-bottom:.8rem;color:#111;font-size:1.7rem;font-weight:600}
.ma input[type=text],.ma input[type=email],.ma input[type=password],.ma input[type=tel]{
  width:100%;height:5.2rem;padding:0 1.6rem;border:1px solid #D5D8E0;border-radius:4px;background:#fff;
  color:#111;font-size:max(1.8rem,16px);transition:border-color .2s}   /* 16px 아래면 아이폰이 입력할 때 화면을 확대한다 */
.ma input[type=text]:focus,.ma input[type=email]:focus,.ma input[type=password]:focus,.ma input[type=tel]:focus{
  border-color:#495FA1;outline:2px solid #495FA1;outline-offset:-1px}
.ma input::placeholder{color:#9A9AA6}
.ma-id{display:block;height:5.2rem;padding:0 1.6rem;border:1px solid #E5E5EC;border-radius:4px;background:#F8F8FA;color:#111;font-size:1.8rem;line-height:5.2rem}

.ma-check{display:flex;align-items:center;gap:.8rem;margin:.4rem 0 2.4rem;color:#505050;font-size:1.7rem}
.ma-check input{width:1.8rem;height:1.8rem;margin:0;accent-color:#495FA1}
.ma-check label{cursor:pointer}

.ma-btn{display:block;width:100%;height:5.6rem;padding:0 2rem;border:1px solid #495FA1;border-radius:4px;background:#495FA1;color:#fff;
  font-size:1.8rem;font-weight:600;text-align:center;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.ma-btn.line{background:#fff;color:#495FA1}
.ma-btn:disabled{opacity:.6;cursor:default}
.ma-btn:focus-visible,.ma-links a:focus-visible,.ma .event_menu button:focus-visible{outline:2px solid #1A264B;outline-offset:2px}
@media (hover:hover){
  .ma-btn:not(:disabled):hover{background:#1A264B;border-color:#1A264B;color:#fff}
  .ma-btn.line:not(:disabled):hover{background:#495FA1;border-color:#495FA1}
}

.ma-links{display:flex;justify-content:center;flex-wrap:wrap;margin-top:2.4rem;font-size:1.7rem}
.ma-links a{padding:0 1.4rem;color:#505050}
.ma-links a + a{border-left:1px solid #E5E5EC}
@media (hover:hover){.ma-links a:hover{color:#495FA1;text-decoration:underline}}

/* 찾기 화면 — 밑줄 탭은 사이트의 .event_menu 를 쓰되 누름 대상은 단추 */
.ma .event_menu{margin-bottom:4rem}
.ma .event_menu ul{justify-content:center}
.ma .event_menu li{flex:1 1 0;max-width:28rem;text-align:center}
.ma .event_menu button{display:block;width:100%;padding:1.6rem 0;border:0;background:none;color:#505050;font-size:2rem;font-weight:500;cursor:pointer}
.ma .event_menu .event_on button{color:#495FA1;font-weight:700}
.ma-inline{display:flex;gap:.8rem}
.ma-inline input{flex:1 1 auto;min-width:0}
.ma-inline .ma-btn{flex:0 0 auto;width:auto;height:5.2rem;font-size:1.7rem;white-space:nowrap}
.ma-hint{margin:.8rem 0 0;color:#767676;font-size:1.6rem;line-height:1.5}
.ma-wait{margin:0 0 1.2rem;color:#767676;font-size:1.6rem;text-align:center}
.ma-help{margin-top:3.2rem;padding:2rem 2.4rem;border-radius:4px;background:#F8F8FA;color:#505050;font-size:1.7rem;line-height:1.7;word-break:keep-all}
.ma-help a{color:#1A264B;font-weight:700}

/* 결과 안내 창 */
.ma-dim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:1.6rem;background:rgba(17,17,17,.5)}
.ma-dim.on{display:flex}
.ma-dialog{width:100%;max-width:42rem;padding:3.2rem 3.2rem 2.8rem;border-top:4px solid #495FA1;border-radius:4px;background:#fff}
.ma-dialog.err{border-top-color:#B3261E}
.ma-dialog h3{margin:0 0 1.2rem;color:#111;font-size:2.2rem;font-weight:700}
.ma-dialog p{margin:0 0 2.4rem;color:#505050;font-size:1.8rem;line-height:1.6;word-break:keep-all}
.ma-dialog .ma-btn{height:4.8rem}

@media screen and (max-width:768px){
  .ma-intro{margin-bottom:2.8rem;font-size:1.7rem}
  .ma-grid{grid-template-columns:minmax(0,1fr)}
  .ma-card{padding:2.4rem 2rem 2.8rem}
  .ma .event_menu{margin-bottom:2.8rem}
  .ma .event_menu button{font-size:1.7rem}
  .ma-help{padding:1.6rem 1.8rem}
}