@charset "utf-8";

/* KAIIA 회원가입 — 약관 화면(register.skin.php) · 가입 폼(register_form.skin.php)
 *
 * 구성(어떤 칸을 받는지)은 운영 사이트 kaiia.co.kr/bbs/register.php 그대로,
 * 생김새만 시안(Figma 475:2068)에 맞춘다.
 *
 * 시안은 가로 1920 기준이라 길이는 모두 var(--u) 로 적는다.
 * (--u 는 theme/kaiia/css/style.css 에서 정한 '시안 1px' 이고,
 *  1024 이하에서는 1px 로 바뀌어 아래 모바일 규칙이 그대로 픽셀값이 된다.)
 *
 * 색은 다른 서브페이지와 같은 것을 쓴다 —
 *   상자 #f9fbfc / 테두리 rgba(36,36,36,.1) / 포인트 파랑 #0069b4 / 점 #2eadf1
 */

/* 그누보드 기본 스킨(style.css)이 먼저 읽히므로, 겹치는 규칙은 여기서 되돌린다 */
.rg #register_form,
.rg .register_form_inner,
.rg .tbl_frm01{background:none;border:0;border-radius:0;margin:0;padding:0}
/* 기본 스킨의 `#fregisterform .form_01 div{margin:0 0 20px}` 이 폼 안 모든 상자의
   여백을 정해 버려, 우리가 준 섹션 간격이 통째로 죽는다.
   아이디(#)가 들어간 규칙이라 이기려면 우리도 아이디를 적어야 한다. */
.rg #fregisterform .form_01 div{margin:0}
.rg #fregisterform .rg-sec + .rg-sec{margin-top:var(--sec-gap)}
.rg #fregisterform .rg-sec > .rg-box{margin-top:var(--title-gap)}
/* 기본 스킨의 `#fregister h2` · `#register_form h2` 가 제목마다 밑줄과 안쪽 여백을
   넣는다. 아이디(#)로 적힌 규칙이라 클래스만으로는 못 이겨 같이 아이디를 적는다. */
.rg h2,
.rg #fregister h2,
.rg #register_form h2{padding:0 0 0 0;border:0;background:none;text-align:left}
/* 파란 점이 놓일 왼쪽 자리는 지우지 않는다 (지우면 점이 글자 위로 겹친다) */
.rg h2.kaiia-dot-title,
.rg #fregister h2.kaiia-dot-title,
.rg #register_form h2.kaiia-dot-title{padding-left:0.47em}

/* ---------- 틀 ---------- */
.rg{width:var(--content);margin:0 auto;
    padding:var(--sub-top) 0 var(--sub-bottom);
    /* 섹션 사이 · 제목과 상자 사이 간격. 제목은 아래 상자에 딸린 것이라 위가 더 넓다. */
    --sec-gap:calc(60 * var(--u));
    --title-gap:calc(16 * var(--u))}
.rg *{box-sizing:border-box}

/* 약관 화면 맨 위 두 줄 안내 — 좌우로 나란히 */
.rg-leads{display:flex;gap:calc(20 * var(--u));margin-bottom:calc(60 * var(--u))}
.rg-lead{flex:1;display:flex;align-items:center;justify-content:center;
    min-height:calc(55 * var(--u));padding:calc(14 * var(--u)) calc(20 * var(--u));
    background:rgba(127,0,0,.1);border:1px solid rgba(36,36,36,.1);border-radius:calc(10 * var(--u));
    font-size:calc(17 * var(--u));line-height:1.5;color:#222;text-align:center;word-break:keep-all}

/* ---------- 섹션 ---------- */
.rg-sec + .rg-sec{margin-top:var(--sec-gap)}
/* 점은 .kaiia-dot-title 규격(sub.css)을 그대로 쓴다 */
.rg-sec-title{font-size:calc(30 * var(--u));font-weight:700;color:#222}
.rg-box{margin-top:var(--title-gap);padding:calc(40 * var(--u));
    background:#f9fbfc;border:1px solid rgba(36,36,36,.1);border-radius:calc(20 * var(--u))}


/* ---------- 입력 항목 ---------- */
.rg-list{display:flex;flex-wrap:wrap;gap:calc(100 * var(--u)) calc(32 * var(--u));
    list-style:none;margin:0;padding:0}
/* 세로로 쌓되 순서를 정해 둔다.
   그누보드의 검사 스크립트(js/wrest.js)는 오류 문구를 '입력칸 바로 앞'에 끼워 넣는데,
   그대로 두면 라벨과 입력칸 사이가 벌어져 줄이 밀린다.
   그래서 자리를 order 로 못 박아 문구가 언제 생기든 입력칸 아래에 오게 한다. */
.rg-list > li{width:100%;position:relative;display:flex;flex-direction:column}
.rg-list > li > label{order:1}
.rg-list > li > input,
.rg-list > li > .rg-chkbox,
.rg-list > li > fieldset{order:2}
.rg-list > li > .rg-msg,
.rg-list > li > .msg_sound_only,
.rg-list > li > span[id^="msg_"]{order:3}
/* 비밀번호 · 비밀번호 확인처럼 둘씩 나란히 놓는 칸 */
.rg-list > li.is-half{width:calc((100% - 32 * var(--u)) / 2)}

/* ---------- 입력 조건 안내 · 오류 문구 ----------
   같은 자리에 같은 모양으로 나오게 한 규칙으로 묶는다.
   .is-bad 빨강(조건 미충족) · .is-good 파랑(확인됨) · 기본 회색(안내) */
.rg-list .rg-msg,
.rg-list .msg_sound_only,
.rg-list span[id^="msg_"]{display:block;
    margin-top:calc(10 * var(--u));
    font-size:calc(15 * var(--u));font-weight:400;line-height:1.5;color:#777;
    word-break:keep-all}
.rg-list .rg-msg.is-bad,
.rg-list .msg_sound_only{color:#e02020}
.rg-list .rg-msg.is-good{color:#0069b4}
/* 비어 있으면 자리도 차지하지 않는다 */
.rg-list .rg-msg:empty,
.rg-list span[id^="msg_"]:empty{display:none}
/* 우리 안내 문구가 이미 있는 칸이라면, 제출할 때 그누보드가 덧붙이는 문구는 감춘다
   (같은 말이 두 줄로 겹쳐 보인다) */
.rg-list > li:has(.rg-msg) > .msg_sound_only{display:none}

.rg-list label{display:block;margin:0 0 calc(14 * var(--u));
    font-size:calc(20 * var(--u));font-weight:700;line-height:calc(26 * var(--u));color:#222}
/* 필수 표시는 라벨 오른쪽 위에 붙는 빨간 점 */
.rg-req{display:inline-block;width:calc(7 * var(--u));height:calc(7 * var(--u));
    margin-left:calc(4 * var(--u));vertical-align:super;
    border-radius:50%;background:#ff2929}

.rg-box .frm_input,
.rg-box input[type="text"],
.rg-box 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}
.rg-box .frm_input::placeholder{color:#b5b8bb}
.rg-box .frm_input:focus{border-color:#2eadf1}

/* 물음표 도움말 — 라벨 옆 작은 아이콘 */
.rg-list .tooltip_icon{margin-left:calc(4 * var(--u));padding:0;
    font-size:calc(18 * var(--u));vertical-align:middle}

/* 가입비·계좌 안내 */
.rg-info-list{list-style:none;margin:0;padding:0}
.rg-info-list li{display:flex;gap:calc(20 * var(--u));
    font-size:calc(18 * var(--u));line-height:calc(32 * var(--u));color:#222}
.rg-info-list li + li{margin-top:calc(10 * var(--u))}
.rg-info-list .rg-info-key{flex:none;width:calc(120 * var(--u));font-weight:700}
.rg-info-sub{white-space:nowrap}
.rg-info-note{margin-top:calc(24 * var(--u));
    font-size:calc(16 * var(--u));line-height:1.6;color:#555;word-break:keep-all}

/* ---------- 파일 올리기 (사업자등록증) ---------- */
/* 브라우저마다 기본 모양이 제각각이라, 입력칸과 같은 상자 안에 넣어 결을 맞춘다 */
.rg-file{width:100%;padding:calc(14 * var(--u));
    background:#fff;border:1px solid rgba(36,36,36,.1);border-radius:calc(10 * var(--u));
    font-size:calc(16 * var(--u));color:#555;cursor:pointer}
.rg-file:focus{border-color:#2eadf1;outline:0}
/* '파일 선택' 단추 — 곁들이는 단추 규격을 따른다 */
.rg-file::file-selector-button{
    margin-right:calc(14 * var(--u));padding:calc(9 * var(--u)) calc(16 * var(--u));
    background:var(--btn-sub);border:1px solid var(--btn-line);border-radius:calc(8 * var(--u));
    font-family:inherit;font-size:calc(15 * var(--u));color:var(--btn-text);cursor:pointer;
    transition:border-color .2s,color .2s}
.rg-file::file-selector-button:hover{border-color:var(--btn);color:var(--btn)}

/* 이미 올려 둔 것이 있을 때 (정보 수정 화면) */
.rg-file-now{display:flex;align-items:center;gap:calc(10 * var(--u));
    margin-bottom:calc(10 * var(--u));
    font-size:calc(16 * var(--u));color:#555}
.rg-file-now a{font-weight:700;color:var(--btn);
    text-decoration:underline;text-underline-offset:calc(4 * var(--u))}

/* ---------- 체크 상자 ---------- */
/* 시안에서는 체크 항목들이 흰 상자 하나에 묶여 있다 */
.rg-chkbox{padding:calc(20 * var(--u)) calc(14 * var(--u));
    background:#fff;border:1px solid rgba(36,36,36,.1);border-radius:calc(10 * var(--u))}
/* 글이 두 줄로 넘어가도 네모는 첫 줄에 맞춰 둔다 */
.rg-chkbox li{display:flex;align-items:flex-start;list-style:none}
.rg-chkbox li + li{margin-top:calc(20 * var(--u))}

/* 진짜 체크박스는 감추고 라벨 안의 네모를 대신 그린다 */
.rg-chk{position:absolute;width:0;height:0;opacity:0;z-index:-1}
.rg-chk + label{display:flex !important;align-items:flex-start;margin:0 !important;
    font-size:calc(18 * var(--u));font-weight:500;line-height:calc(25 * var(--u));
    color:#222;cursor:pointer}
/* 테두리는 눌러야 하는 칸임을 알 만큼 진하고 굵어야 한다.
   예전 값(1px #e8e8e8)은 흰 바탕에서 네모가 있는지조차 보이지 않았다.
   특히 화면 배율을 줄이거나 고해상도 화면에서는 1px 이 더 얇게 그려져 아예 사라진다. */
.rg-chk + label::before{content:'';flex:none;
    width:calc(25 * var(--u));height:calc(25 * var(--u));margin-right:calc(10 * var(--u));
    background:#fff;border:calc(2 * var(--u)) solid #9aa1a8;border-radius:calc(6 * var(--u));
    transition:border-color .2s,background-color .2s}
.rg-chk + label:hover::before{border-color:var(--btn)}
.rg-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")}

/* ---------- 자동등록방지 ---------- */
/* 그누보드가 내보내는 마크업(img + input + 버튼 두 개)을 한 줄로 세운다 */
.rg-captcha #captcha{display:flex;flex-wrap:wrap;align-items:center;gap:calc(6 * var(--u));
    border:0;padding:0}
.rg-captcha #captcha legend{position:absolute;width:0;height:0;overflow:hidden;font-size:0}
.rg-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}
.rg-captcha #captcha_key{flex:none;width:calc(154 * 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}
/* 두 버튼은 시안처럼 아이콘만 남긴다 — 안의 글자('숫자음성듣기' 등)는 읽어 주기용으로만 둔다 */
.rg-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}
.rg-captcha #captcha button span{display:none}
.rg-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))}
.rg-captcha #captcha_mp3::after{content:"\f028"}      /* 스피커 */
.rg-captcha #captcha_reload::after{content:"\f021"}   /* 새로고침 */
.rg-captcha #captcha button:hover{border-color:#0069b4;color:#0069b4}
/* 안내 문구는 줄을 바꿔 아래에 작게 */
.rg-captcha #captcha_info{width:100%;margin-top:calc(10 * var(--u));
    font-size:calc(15 * var(--u));line-height:1.5;color:#777}

/* ---------- 약관 화면 ---------- */
.rg-terms-field + .rg-terms-field{margin-top:calc(100 * var(--u))}
.rg-terms-label{margin:0 0 calc(14 * var(--u));
    font-size:calc(20 * var(--u));font-weight:700;line-height:calc(26 * var(--u));color:#222}
.rg-terms-text{height:calc(415 * var(--u));padding:calc(20 * var(--u)) calc(14 * var(--u));
    background:#fff;border:1px solid rgba(36,36,36,.1);border-radius:calc(10 * var(--u));
    font-size:calc(16 * var(--u));line-height:1.7;color:#333;
    overflow-y:auto;white-space:pre-line;word-break:keep-all}

/* 개인정보 수집 표 */
.rg-privacy{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;
    background:#fff;
    border-top:1px solid rgba(36,36,36,.1);border-left:1px solid rgba(36,36,36,.1);
    border-radius:calc(10 * var(--u));overflow:hidden}
.rg-privacy th,
.rg-privacy td{padding:calc(16 * var(--u)) calc(14 * var(--u));
    border-right:1px solid rgba(36,36,36,.1);border-bottom:1px solid rgba(36,36,36,.1);
    font-size:calc(16 * var(--u));line-height:1.6;color:#222;text-align:center;
    word-break:keep-all}
.rg-privacy th{background:#fdfeff;font-weight:700}
.rg-privacy caption{position:absolute;width:0;height:0;overflow:hidden;font-size:0}

/* 동의 체크 — 상자 오른쪽 끝에 붙는다 */
.rg-agree{display:flex;justify-content:flex-end;margin-top:calc(40 * var(--u))}

/* 모두 동의 — 흰 띠 하나에 가운데 정렬 */
.rg-agree-all{display:flex;align-items:center;justify-content:center;
    height:calc(74 * var(--u));margin-top:calc(60 * var(--u));
    background:#fff;border:1px solid rgba(36,36,36,.1);border-radius:calc(10 * var(--u))}
.rg-agree-all .rg-chk + label{flex-direction:row-reverse;align-items:center;
    font-size:calc(18 * var(--u));font-weight:500}
.rg-agree-all .rg-chk + label::before{width:calc(26 * var(--u));height:calc(26 * var(--u));
    margin:0 0 0 calc(14 * var(--u))}

/* ---------- 아래 버튼 ---------- */
.rg-btns{display:flex;gap:calc(20 * var(--u));margin-top:calc(60 * var(--u))}
.rg-btns a,
.rg-btns button{flex:1;display:flex;align-items:center;justify-content:center;
    height:calc(74 * var(--u));border-radius:calc(10 * var(--u));
    font-size:calc(22 * var(--u));font-weight:700;cursor:pointer}
.rg-btn-cancel{background:var(--btn-sub);border:1px solid var(--btn-line);color:var(--btn-text)}
.rg-btn-cancel:hover{border-color:var(--btn);color:var(--btn)}
.rg-btn-submit{background:var(--btn);border:1px solid var(--btn);color:#fff}
.rg-btn-submit:hover{background:var(--btn-on);border-color:var(--btn-on)}
.rg-btn-submit:disabled{opacity:.5;cursor:default}

/* ---------- 좁은 화면 ---------- */
@media (max-width:1024px){
    .rg{width:100%;padding:var(--sub-top) 20px var(--sub-bottom);--sec-gap:28px;--title-gap:12px}

    .rg-leads{flex-direction:column;gap:10px;margin-bottom:32px}
    .rg-lead{min-height:0;padding:14px;font-size:14px;border-radius:10px}

    .rg-sec-title{font-size:20px}
    .rg-box{padding:20px;border-radius:14px}

    /* 좁은 화면에서는 두 칸으로 나누지 않고 위아래로 쌓는다 */
    .rg-list{gap:24px}
    .rg-list > li.is-half{width:100%}
    .rg-list label{margin-bottom:8px;font-size:15px;line-height:22px}
    .rg-req{width:5px;height:5px;margin-left:3px}
    .rg-box .frm_input,
    .rg-box input[type="text"],
    .rg-box input[type="password"]{height:48px;padding:0 12px;font-size:15px;border-radius:8px}
    /* 파일 칸은 안의 단추 때문에 높이를 고정하지 않는다 */
    .rg-file{padding:10px;font-size:14px;border-radius:8px}
    .rg-file::file-selector-button{margin-right:10px;padding:8px 12px;font-size:14px;border-radius:6px}
    .rg-file-now{font-size:14px}
    .rg-list .rg-msg,
    .rg-list .msg_sound_only,
    .rg-list span[id^="msg_"]{margin-top:6px;font-size:12px}

    .rg-info-list li{display:block;font-size:15px;line-height:1.6}
    .rg-info-list li + li{margin-top:14px}
    /* flex 를 풀면 라벨과 값이 한 줄에 붙어 '가입비50,000원' 처럼 보인다 */
    .rg-info-list .rg-info-key{display:block;width:auto;margin-bottom:2px}
    .rg-info-sub{display:block}
    .rg-info-note{margin-top:16px;font-size:13px}

    .rg-chkbox{padding:14px 12px;border-radius:8px}
    .rg-chkbox li + li{margin-top:14px}
    .rg-chk + label{font-size:14px;line-height:20px}
    .rg-chk + label::before{width:20px;height:20px;margin-right:8px;border-radius:5px}
    .rg-chk:checked + label::before{background-size:12px auto}

    /* 좁은 화면에서는 [그림][소리][새로고침] 을 한 줄에 두고,
       입력칸은 그 아래 한 줄을 다 쓰게 순서를 바꾼다 */
    .rg-captcha #captcha{flex-wrap:wrap;gap:6px}
    .rg-captcha #captcha_img{order:1;width:120px;height:44px}
    .rg-captcha #captcha_mp3{order:2}
    .rg-captcha #captcha_reload{order:3}
    .rg-captcha #captcha_key{order:4;width:100%;height:44px;padding:0 12px;font-size:15px}
    .rg-captcha #captcha_info{order:5}
    .rg-captcha #captcha button{width:44px;height:44px}
    .rg-captcha #captcha button::after{font-size:16px}
    .rg-captcha #captcha_info{margin-top:8px;font-size:12px}

    .rg-terms-field + .rg-terms-field{margin-top:40px}
    .rg-terms-label{margin-bottom:8px;font-size:15px;line-height:22px}
    .rg-terms-text{height:220px;padding:14px 12px;font-size:13px;border-radius:8px}
    .rg-privacy th,
    .rg-privacy td{padding:10px 8px;font-size:12px}
    .rg-agree{margin-top:16px}
    .rg-agree-all{height:56px;margin-top:24px;border-radius:8px}
    .rg-agree-all .rg-chk + label{font-size:14px}
    .rg-agree-all .rg-chk + label::before{width:20px;height:20px;margin-left:10px}

    .rg-btns{gap:10px;margin-top:32px}
    .rg-btns a,
    .rg-btns button{height:52px;font-size:16px;border-radius:8px}
}

/* ── 기업 가입폼: 라디오 묶음(회원구분·회원사 규모·가입경로) ──
   .rg-list 는 자식에 order 를 주어 라벨(1)·입력(2)·안내(3) 순으로 세운다.
   .rg-radios 에는 order 가 없어 라벨보다 먼저 떠서, order:2 로 맞춘다.
   기본은 한 줄에 인라인으로 늘어놓고, .rg-radio-group(정회원/특별회원)만 한 줄을 차지한다. */
.rg-list > li > .rg-radios{order:2;display:flex;flex-wrap:wrap;align-items:center;
    gap:calc(10 * var(--u)) calc(20 * var(--u))}
.rg-radios .rg-radio-group{flex:0 0 100%;display:flex;flex-wrap:wrap;align-items:center;
    gap:calc(8 * var(--u)) calc(18 * var(--u))}
.rg-radios .rg-radio-lead{min-width:calc(64 * var(--u));color:#0069b4;font-weight:700}
.rg-radios .rg-radio{display:inline-flex;align-items:center;gap:calc(6 * var(--u));
    margin:0;font-weight:400;cursor:pointer}
.rg-radios .rg-radio input{width:auto;height:auto;margin:0}
.rg-radios input[type="text"]{width:auto;flex:0 1 calc(220 * var(--u));
    min-width:calc(140 * var(--u));height:calc(52 * var(--u))}