@charset "utf-8";

/**
 * 충남아이키움포털 — 회원 인증 (ik_auth 스킨)
 * Figma: 메가파크 공유 문서 / 00-1 로그인 · 00-2 회원가입 · 00-3 아이디·비밀번호 찾기
 *
 * 공용 토큰(--color-*)은 _layout/bootstrap/css/style.css 에,
 * 세그먼트 탭(.segment)의 배경·활성 표시는 ui.css 에 있습니다.
 * 폼 부품은 마이페이지(ik_mypage)와 같은 디자인이며 클래스만 스킨별로 둡니다.
 */

.app {
    background: #fff;
}

/* ===== 페이지 ===== */
.au {
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--topbar-h) - var(--bnb-h));
    padding-bottom: 24px;
}

.au__title {
    color: var(--color-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    padding: 16px 24px 8px;
}

/* 가운데 안내 문구 (본인인증 · 결과 화면) */
.au__lead {
    color: var(--color-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    padding: 40px 24px 0;
    text-align: center;
}

.au__lead--result {
    padding-top: 24px;
}

.au__lead strong {
    font-weight: 700;
}

/* 폼도 세로 flex 로 둬야 안쪽의 .au__spacer 가 버튼을 바닥으로 밀 수 있습니다. */
.au-form {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

/* 화면 아래쪽 버튼을 바닥으로 밀어 주는 여백 */
.au__spacer {
    flex: 1 0 24px;
    min-height: 24px;
}

/* ===== 필드 ===== */
.au-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 20px;
}

.au-field__label {
    align-items: center;
    color: var(--color-text);
    display: flex;
    flex-wrap: wrap;
    font-size: 16px;
    font-weight: 700;
    gap: 8px;
    line-height: 24px;
    padding: 0 4px;
}

.au-field__label::before {
    background: url('../img/bullet.svg') no-repeat center / 12px 13px;
    content: '';
    flex: 0 0 auto;
    height: 13px;
    width: 12px;
}

.au-field__hint,
.au-field__help {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    opacity: .5;
}

.au-field__help {
    padding: 0 4px;
    text-align: right;
}

/* 아이디 확인 결과처럼 상태에 따라 색이 바뀌는 안내 */
.au-field__help.is-ok {
    color: var(--color-primary);
    opacity: 1;
}

.au-field__help.is-error {
    color: #d64545;
    opacity: 1;
}

.au-field__row {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

/* ===== 입력 ===== */
.au-input {
    align-items: center;
    background: #fff;
    border-radius: 16px;
    border: 2px solid var(--color-border);
    color: var(--color-text);
    display: flex;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    height: 52px;
    line-height: 20px;
    min-width: 0;
    padding: 14px 20px;
    width: 100%;
}

.au-input::placeholder {
    color: var(--color-text);
    opacity: .3;
}

.au-input:focus {
    border-color: var(--color-text);
    outline: none;
}

/* input · select 는 flex 컨테이너가 될 수 없어 블록으로 둡니다.
   (p.au-input 만 값·설명을 나란히 두려고 flex 를 씁니다) */
input.au-input,
select.au-input {
    display: block;
}

.au-input--readonly {
    background: #f6f6f6;
    opacity: .8;
}

.au-input--child {
    gap: 8px;
    justify-content: flex-start;
}

.au-input--muted {
    opacity: .6;
}

/* 화살표는 caret 이미지 대신 그라디언트로 그립니다. */
.au-select {
    -webkit-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #9a9a9a 50%),
        linear-gradient(135deg, #9a9a9a 50%, transparent 50%);
    background-position: calc(100% - 22px) 24px, calc(100% - 16px) 24px;
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
    padding-right: 40px;
}

.au-inputs {
    align-items: center;
    display: flex;
    gap: 8px;
}

.au-inputs--phone .au-input {
    text-align: center;
}

.au-inputs__sep {
    color: var(--color-text);
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 700;
}

/* ===== 라디오 · 체크 ===== */
.au-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.au-radios--end {
    justify-content: flex-end;
}

.au-radio,
.au-check {
    align-items: center;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
    line-height: 24px;
    opacity: .8;
}

.au-radio input,
.au-check input {
    accent-color: var(--color-primary);
    flex: 0 0 auto;
    height: 20px;
    width: 20px;
}

/* ===== 버튼 ===== */
.au-actions {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
}

.au-actions--stack {
    flex-direction: column;
}

.au-actions--stack .au-btn {
    flex: 0 0 auto;
    width: 100%;
}

.au-btn {
    align-items: center;
    border-radius: 16px;
    display: inline-flex;
    flex: 1 0 0;
    font-size: 16px;
    font-weight: 700;
    height: 60px;
    justify-content: center;
    line-height: 20px;
    min-width: 0;
    padding: 16px;
    text-align: center;
}

.au-btn--primary {
    background: var(--color-primary);
    color: #fff;
}

.au-btn--ghost {
    background: #f6f6f6;
    color: var(--color-text);
    opacity: .8;
}

.au-btn--sm {
    font-size: 14px;
    font-weight: 600;
    height: 52px;
}

.au-btn--fixed {
    flex: 0 0 108px;
    width: 108px;
}

.au-btn--wide {
    width: 100%;
}

.au-btn[disabled] {
    opacity: .4;
}

/* 작은 회색 버튼 (무자녀 초기화) */
.au-chip {
    align-items: center;
    background: #f6f6f6;
    border-radius: 12px;
    color: var(--color-text);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    height: 32px;
    justify-content: center;
    line-height: 20px;
    opacity: .8;
    padding: 8px 12px;
    white-space: nowrap;
}

/* ===== 오류 문구 ===== */
.au-error {
    color: #d64545;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    padding: 8px 24px 0;
}

/* ===== 로그인 (00-1) ===== */
.au-forgot {
    display: flex;
    justify-content: center;
    padding: 0 24px 4px;
}

.au-forgot a {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    opacity: .8;
    text-decoration: underline;
}

/* ===== 본인인증 (00-2-1 · 00-3-1 · 00-3-3) =====
   도안에는 휴대폰·아이핀 두 장이었지만 아이핀을 빼서 한 장이 폭을 다 씁니다. */
.au-certs {
    display: flex;
    gap: 12px;
    padding: 24px 20px 0;
}

.au-cert {
    align-items: center;
    background: #fff;
    border-radius: 24px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 12px;
    height: 280px;
    justify-content: center;
    min-width: 0;
    padding: 16px;
}

.au-cert__icon {
    flex: 0 0 auto;
}

/* 아이콘은 도안 크기 그대로 둡니다. (선 굵기까지 포함한 실제 크기) */
.au-cert__icon--phone {
    height: 36px;
    width: 24px;
}

.au-cert__label {
    color: var(--color-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
}

/* 세그먼트 탭 (아이디 찾기 · 비밀번호 찾기) — 뼈대는 ui.css 의 .segment */
.au-tabs {
    margin: 16px 20px 0;
}

.au-tabs .segment__btn {
    align-items: center;
    border-radius: 12px;
    color: var(--color-text);
    display: flex;
    flex: 1 0 0;
    font-size: 16px;
    font-weight: 700;
    height: 48px;
    justify-content: center;
    opacity: .4;
}

/* ===== 약관 동의 (00-2-2) ===== */
.au-term {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.au-term__body {
    border-radius: 16px;
    border: 2px solid var(--color-border);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    height: 200px;
    line-height: 20px;
    margin: 0 20px;
    overflow-y: auto;
    padding: 16px 20px;
    -webkit-overflow-scrolling: touch;
}

.au-term__agree {
    display: flex;
    justify-content: flex-end;
    padding: 0 24px;
}

/* 약관 본문은 레거시(html/080200.php · 080100.php) 마크업을 그대로 씁니다.
   모바일 폭에 맞도록 최소한만 다듬습니다. */
.au-term__body h6 {
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    margin: 16px 0 4px;
}

.au-term__body h6:first-child {
    margin-top: 0;
}

.au-term__body p,
.au-term__body li,
.au-term__body div {
    font-size: 13px;
    line-height: 20px;
}

.au-term__body ul {
    list-style: none;
    padding-left: 8px;
}

.au-term__body ul.dep {
    padding-left: 12px;
}

.au-term__body table {
    border-collapse: collapse;
    font-size: 12px;
    margin: 8px 0;
    width: 100%;
}

.au-term__body th,
.au-term__body td {
    border: 1px solid var(--color-border-strong);
    line-height: 18px;
    padding: 6px;
    text-align: left;
    word-break: break-all;
}

.au-term__body img {
    height: auto;
    max-width: 100%;
}

/* ===== 결과 화면 (00-2-4 · 00-3-2 · 00-3-5) ===== */
.au-result {
    display: flex;
    justify-content: center;
    padding-top: 120px;
}

/* 도안의 172x116 자리에 153x118 그림을 그대로 놓습니다. */
.au-result__illust {
    height: 116px;
    position: relative;
    width: 172px;
}

.au-result__illust img {
    height: 118px;
    left: 20px;
    position: absolute;
    top: 0;
    width: 153px;
}