@charset "utf-8";

/* KAIIA 회원 짧은 화면 — 로그인 · 아이디/비밀번호 찾기 · 비밀번호 확인 · 가입 완료
 *
 * 회원가입(kaiia-register.css)에서 쓰는 부품을 그대로 가져다 쓴다.
 *   상자 #f9fbfc / 테두리 rgba(36,36,36,.1) / 포인트 파랑 #0069b4 / 점 #2eadf1
 *   입력칸 65u · 버튼 74u · 상자 안 여백 40u (좁은 화면 48px · 52px · 20px)
 *
 * 회원가입은 칸이 많아 화면 폭을 다 쓰지만, 이 넷은 물어보는 게 한둘이라
 * 가운데 좁은 상자 하나로 둔다. 길이는 모두 var(--u) — 시안 1920 기준 1px.
 */

/* 그누보드 기본 스킨(style.css)이 먼저 읽히므로 겹치는 규칙을 되돌린다 */
.ma h1,
.ma h2,
.ma h3{margin:0;padding:0;border:0;background:none;text-align:left;color:#222}
/* 파란 점이 놓일 왼쪽 자리는 지우지 않는다 (지우면 점이 글자 위로 겹친다) */
.ma h1.kaiia-dot-title,
.ma h2.kaiia-dot-title,
.ma h3.kaiia-dot-title{padding-left:0.47em}
.ma fieldset{margin:0;padding:0;border:0}
.ma legend{position:absolute;width:0;height:0;overflow:hidden;font-size:0}
/* p 의 여백은 아래에서 칸마다 따로 정한다.
   여기서 `.ma p{margin:0}` 처럼 한꺼번에 지우면 클래스보다 힘이 세서
   설명글·안내글의 위 여백까지 같이 죽는다 (제목에 글이 달라붙는다). */

/* ---------- 틀 ---------- */
.ma{width:var(--content);margin:0 auto;
    padding:var(--sub-top) 0 var(--sub-bottom)}
.ma *{box-sizing:border-box}

/* 가운데 상자 — 회원가입 상자(.rg-box)와 같은 규격 */
.ma-card{width:calc(620 * var(--u));margin:0 auto;padding:calc(40 * var(--u));
    background:#f9fbfc;border:1px solid rgba(36,36,36,.1);border-radius:calc(20 * var(--u))}
/* 찾기 화면처럼 상자가 둘 이상일 때 */
.ma-card + .ma-card{margin-top:calc(40 * var(--u))}

/* 상자 안 위아래 간격은 폼 바깥에서 준다.
   입력칸은 form → fieldset 안에 들어 있어 제목·설명과 형제가 아니라서,
   칸 쪽에 여백을 주면 제목을 안 쓰는 화면(로그인)에서 위만 벌어진다. */
.ma-card > form{margin-top:calc(30 * var(--u))}
.ma-card > form:first-child{margin-top:0}
.ma-card > :first-child{margin-top:0}

/* 상자 제목 — 점은 .kaiia-dot-title 규격(sub.css)을 그대로 쓴다 */
.ma-title{font-size:calc(26 * var(--u));font-weight:700;line-height:1.4}
.ma-desc{margin-top:calc(16 * var(--u));
    font-size:calc(17 * var(--u));line-height:1.7;color:#555;word-break:keep-all}
.ma-desc strong{display:block;font-weight:700;color:#222}

/* ---------- 입력칸 ---------- */
.ma-fields{margin-top:0}
.ma-field + .ma-field{margin-top:calc(20 * var(--u))}
.ma-field label{display:block;margin:0 0 calc(10 * var(--u));
    font-size:calc(17 * var(--u));font-weight:700;line-height:1.4;color:#222}
.ma-card .frm_input,
.ma-card input[type="text"],
.ma-card input[type="password"]{width:100%;height:calc(65 * var(--u));
    padding:0 calc(14 * var(--u));
    background:#fff;border:1px solid rgba(36,36,36,.1);border-radius:calc(10 * var(--u));
    font-size:calc(18 * var(--u));color:#222;outline:0}
.ma-card .frm_input::placeholder{color:#b5b8bb}
.ma-card .frm_input:focus{border-color:#2eadf1}

/* 아이디처럼 고쳐 쓸 수 없는 값 — 입력칸과 같은 자리에 회색으로 */
.ma-static{display:flex;align-items:center;height:calc(65 * var(--u));
    margin:0;padding:0 calc(14 * var(--u));
    background:#f2f4f6;border:1px solid rgba(36,36,36,.1);border-radius:calc(10 * var(--u));
    font-size:calc(18 * var(--u));color:#555}

/* ---------- 버튼 ---------- */
.ma-btns{display:flex;gap:calc(14 * var(--u));margin-top:calc(30 * var(--u))}
.ma-btns a,
.ma-btns button,
.ma-btns input[type="submit"]{flex:1;display:flex;align-items:center;justify-content:center;
    height:calc(74 * var(--u));border-radius:calc(10 * var(--u));
    font-size:calc(20 * var(--u));font-weight:700;text-decoration:none;cursor:pointer}
.ma-btn{background:var(--btn-sub);border:1px solid var(--btn-line);color:var(--btn-text)}
.ma-btn:hover{border-color:var(--btn);color:var(--btn)}
.ma-btn.is-main{background:var(--btn);border:1px solid var(--btn);color:#fff}
.ma-btn.is-main:hover{background:var(--btn-on);border-color:var(--btn-on)}
.ma-btn:disabled{opacity:.5;cursor:default}
/* 버튼을 세로로 쌓는 곳 (본인인증 수단 고르기) */
.ma-btns.is-stack{flex-direction:column}

/* ---------- 상자 아래 잔줄 ---------- */
/* 자동로그인 체크와 '아이디/비밀번호 찾기' 를 한 줄 양끝에 */
.ma-sub{display:flex;align-items:center;justify-content:space-between;gap:calc(14 * var(--u));
    margin-top:calc(20 * var(--u))}
.ma-sub a{font-size:calc(16 * var(--u));color:#555;text-decoration:underline;
    text-underline-offset:calc(4 * var(--u))}
.ma-sub a:hover{color:#0069b4}

/* 체크 상자 — 회원가입(.rg-chk)과 같은 모양 */
.ma-chk{position:absolute;width:0;height:0;opacity:0;z-index:-1}
.ma-chk + label{display:flex;align-items:center;margin:0;
    font-size:calc(16 * var(--u));font-weight:400;color:#555;cursor:pointer}
.ma-chk + label::before{content:'';flex:none;
    width:calc(22 * var(--u));height:calc(22 * var(--u));margin-right:calc(8 * var(--u));
    background:#fff;border:calc(2 * var(--u)) solid #9aa1a8;border-radius:calc(6 * var(--u));
    transition:border-color .2s,background-color .2s}
.ma-chk + label:hover::before{border-color:var(--btn)}
.ma-chk:checked + label::before{border-color:#0069b4;background:#0069b4 no-repeat 50% 50%;
    background-size:60% auto;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}

/* 상자 밖 안내 한 줄 — '아직 회원이 아니신가요?' */
.ma-foot{margin-top:calc(24 * var(--u));
    font-size:calc(17 * var(--u));line-height:1.6;color:#555;text-align:center}
.ma-foot a{margin-left:calc(8 * var(--u));font-weight:700;color:#0069b4;
    text-decoration:underline;text-underline-offset:calc(4 * var(--u))}

/* ---------- 자동등록방지 ---------- */
/* 회원가입(.rg-captcha)과 같은 규격 — 그누보드가 내보내는 마크업을 한 줄로 세운다 */
.ma-captcha{margin-top:calc(20 * var(--u))}
.ma-captcha #captcha{display:flex;flex-wrap:wrap;align-items:center;gap:calc(6 * var(--u));
    border:0;padding:0}
.ma-captcha #captcha_img{width:calc(140 * var(--u));height:calc(54 * var(--u));
    border:1px solid rgba(36,36,36,.1);border-radius:calc(6 * var(--u));background:#fff}
.ma-captcha #captcha_key{flex:1;min-width:calc(120 * var(--u));height:calc(54 * var(--u));
    padding:0 calc(14 * var(--u));
    background:#fff;border:1px solid rgba(36,36,36,.1);border-radius:calc(10 * var(--u));
    font-size:calc(18 * var(--u));color:#222;outline:0}
.ma-captcha #captcha button{position:relative;flex:none;
    width:calc(54 * var(--u));height:calc(54 * var(--u));
    background:#fff;border:1px solid rgba(36,36,36,.1);border-radius:calc(10 * var(--u));
    font-size:0;color:#222;cursor:pointer;overflow:hidden}
.ma-captcha #captcha button span{display:none}
.ma-captcha #captcha button::after{position:absolute;top:0;left:0;
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    font-family:FontAwesome;font-size:calc(20 * var(--u))}
.ma-captcha #captcha_mp3::after{content:"\f028"}      /* 스피커 */
.ma-captcha #captcha_reload::after{content:"\f021"}   /* 새로고침 */
.ma-captcha #captcha button:hover{border-color:#0069b4;color:#0069b4}
.ma-captcha #captcha_info{width:100%;margin-top:calc(10 * var(--u));
    font-size:calc(15 * var(--u));line-height:1.5;color:#777}

/* ---------- 가입 완료 ---------- */
.ma-done{text-align:center}
.ma-done .ma-title{text-align:center;padding-left:0}
/* 완료 화면 제목에는 점을 쓰지 않는다 — 가운데 정렬이라 점이 글자에서 떨어져 보인다 */
.ma-done .ma-title::before{display:none}
.ma-done-mark{display:flex;align-items:center;justify-content:center;
    width:calc(72 * var(--u));height:calc(72 * var(--u));margin:0 auto calc(24 * var(--u));
    border-radius:50%;background:#0069b4}
.ma-done-mark svg{width:calc(34 * var(--u));height:calc(34 * var(--u))}
.ma-done .ma-desc{text-align:center}
.ma-done-info{margin-top:calc(30 * var(--u));padding:calc(24 * var(--u));
    background:#fff;border:1px solid rgba(36,36,36,.1);border-radius:calc(10 * var(--u));
    text-align:left}
.ma-done-info li{display:flex;gap:calc(20 * var(--u));list-style:none;
    font-size:calc(17 * var(--u));line-height:calc(30 * var(--u));color:#222}
.ma-done-info li + li{margin-top:calc(8 * var(--u))}
.ma-done-info .ma-done-key{flex:none;width:calc(110 * var(--u));font-weight:700}
.ma-done-note{margin-top:calc(24 * var(--u));
    font-size:calc(15 * var(--u));line-height:1.7;color:#777;word-break:keep-all}

/* ---------- 좁은 화면 ---------- */
@media (max-width:1024px){
    .ma{width:100%;padding:var(--sub-top) 20px var(--sub-bottom)}
    .ma-card{width:100%;padding:20px;border-radius:14px}
    .ma-card + .ma-card{margin-top:20px}

    .ma-title{font-size:20px}
    .ma-desc{margin-top:10px;font-size:15px;line-height:1.6}

    .ma-card > form{margin-top:20px}
    .ma-card > form:first-child{margin-top:0}
    .ma-field + .ma-field{margin-top:14px}
    .ma-field label{margin-bottom:8px;font-size:15px}
    .ma-card .frm_input,
    .ma-card input[type="text"],
    .ma-card input[type="password"],
    .ma-static{height:48px;padding:0 12px;font-size:15px;border-radius:8px}

    .ma-btns{gap:10px;margin-top:20px}
    .ma-btns a,
    .ma-btns button,
    .ma-btns input[type="submit"]{height:52px;font-size:16px;border-radius:8px}

    .ma-sub{margin-top:14px}
    .ma-sub a{font-size:13px}
    .ma-chk + label{font-size:13px}
    .ma-chk + label::before{width:18px;height:18px;margin-right:6px;border-radius:5px}
    .ma-chk:checked + label::before{background-size:11px auto}
    .ma-foot{margin-top:16px;font-size:14px}

    .ma-captcha{margin-top:14px}
    .ma-captcha #captcha{gap:6px}
    .ma-captcha #captcha_img{order:1;width:120px;height:44px}
    .ma-captcha #captcha_mp3{order:2}
    .ma-captcha #captcha_reload{order:3}
    .ma-captcha #captcha_key{order:4;width:100%;flex:none;height:44px;padding:0 12px;font-size:15px}
    .ma-captcha #captcha_info{order:5;margin-top:8px;font-size:12px}
    .ma-captcha #captcha button{width:44px;height:44px}
    .ma-captcha #captcha button::after{font-size:16px}

    .ma-done-mark{width:56px;height:56px;margin-bottom:16px}
    .ma-done-mark svg{width:26px;height:26px}
    .ma-done-info{margin-top:20px;padding:16px;border-radius:8px}
    .ma-done-info li{display:block;font-size:14px;line-height:1.6}
    .ma-done-info li + li{margin-top:10px}
    .ma-done-info .ma-done-key{display:block;width:auto;margin-bottom:2px}
    .ma-done-note{margin-top:16px;font-size:13px}
}