@charset "utf-8";
/* ============================================================
   자동등록방지(kcaptcha) 전용 CSS
   ------------------------------------------------------------
   왜 필요한가
     captcha_html() (plugin/kcaptcha/kcaptcha.lib.php:240)이 뱉는
     #captcha 마크업의 스타일은 css/default.css 212~227 행에만 있는데,
     그 파일은 Tailwind 신규 화면(body.op-tw)에서 로드되지 않는다.
     게다가 op-tw 스코프 리셋의
         :where(.op-tw) * { border-width: 0 }
     때문에 입력칸의 브라우저 기본 테두리까지 지워져서
     "테두리가 하얘서 안 보이는" 상태가 된다.
     → 필요한 규칙만 여기 다시 쓴다.

   색은 문의폼의 다른 입력칸과 동일한 토큰을 쓴다.
     테두리 #e5e7eb (surface-bright) / 포커스 #ff6b00 (primary)
     글자   #1f2937 (content)        / 보조   #6b7280 (content-muted)

   버튼 배경 스프라이트 경로 주의
     이 파일은 /css/ 에 있으므로 ../img/captcha2.png = /img/captcha2.png
   ============================================================ */

#captcha {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
}

/* <legend>자동등록방지</legend> - 스크린리더 전용 */
#captcha legend {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    font-size: 0;
    line-height: 0;
}

/* 숫자 이미지 : 리셋이 img 를 display:block 으로 바꿔놔서 되돌려야
   입력칸과 한 줄에 놓인다 */
#captcha #captcha_img {
    display: inline-block;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    vertical-align: top;
}

/* ★ 입력칸 - 테두리가 사라져 안 보이던 부분 */
#captcha #captcha_key {
    width: 90px;
    height: 40px;
    margin: 0 0 0 4px;
    padding: 0 5px;
    border: 1px solid #e5e7eb;
    border-radius: 0.25rem;
    background: #fff;
    color: #1f2937;
    font-size: 1.125rem;
    font-weight: 700;
    text-align: center;
    vertical-align: top;
}

#captcha #captcha_key:focus {
    border-color: #ff6b00;
    outline: 0;
}

/* 음성듣기 · 새로고침 버튼 (스프라이트) */
#captcha #captcha_mp3,
#captcha #captcha_reload {
    width: 40px;
    height: 40px;
    margin: 0 0 0 2px;
    padding: 0;
    border: 0;
    overflow: hidden;
    cursor: pointer;
    vertical-align: top;
    text-indent: -999px;
    border-radius: 0.25rem;
    background: url('../img/captcha2.png') no-repeat 0 0;
}

#captcha #captcha_reload {
    background-position: 0 -40px;
}

#captcha #captcha_info {
    display: block;
    margin: 6px 0 0;
    color: #6b7280;
    font-size: 0.8125rem;
    letter-spacing: -0.02em;
}

/* ------------------------------------------------------------
   모바일 : captcha_html() 이 is_mobile() 일 때 m_captcha 클래스와
   <audio> 를 덧붙인다 (kcaptcha.lib.php 243·250 행)
   ------------------------------------------------------------ */
#captcha.m_captcha {
    display: block;
}

#captcha.m_captcha audio {
    display: block;
    margin: 0 0 6px;
    width: 100%;
    max-width: 240px;
}

#captcha.m_captcha #captcha_img {
    display: block;
    width: 160px;
    height: 60px;
    margin: 0 0 6px;
}

#captcha.m_captcha #captcha_key {
    margin-left: 0;
}

#captcha.m_captcha #captcha_mp3,
#captcha.m_captcha #captcha_reload {
    position: static;
}

#captcha.m_captcha #captcha_reload span {
    display: none;
}