/*
 * 공개 신청 폼(/apply). 설계서 docs/테넌트_신청승인_설계.md §9.1
 * approval.css 와 같은 사상(모바일 우선, 카드 기반 재배치)을 따르되 네임스페이스는 분리합니다
 * — 전자결재와 이 폼은 서로 다른 화면이라 같은 클래스를 공유하면 한쪽 CSS 변경이 다른 쪽에 샙니다.
 */

.apply-shell {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

/* 필수 표시. 관리자 테마(Tabler)와 달리 공개 프론트 테마엔 이 규칙이 없을 수 있어 자체 포함합니다. */
.apply-shell .form-label.required::after {
    content: " *";
    color: #e5484d;
}

/* ── 진행 표시 ─────────────────────────────────────────────────────────── */

.apply-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 28px;
    counter-reset: apply-step;
}

.apply-step {
    flex: 1;
    text-align: center;
    position: relative;
    font-size: 13px;
    color: #8a94a6;
}

.apply-step::before {
    counter-increment: apply-step;
    content: counter(apply-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0 auto 6px;
    border-radius: 50%;
    background: #eef1f5;
    color: #6b7684;
    font-weight: 700;
}

.apply-step.is-active { color: #191f28; font-weight: 700; }
.apply-step.is-active::before { background: var(--bs-primary, #2f6fed); color: #fff; }
.apply-step.is-done::before { background: #19c37d; color: #fff; content: "\2713"; }

/* ── 플랜 카드 ─────────────────────────────────────────────────────────── */

.apply-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 640px) {
    .apply-plans { grid-template-columns: 1fr; }
}

.apply-plan-card {
    border: 2px solid #e5e8eb;
    border-radius: 12px;
    padding: 20px 16px;
    cursor: pointer;
    text-align: left;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.apply-plan-card:hover { border-color: #c7d2e0; }

.apply-plan-card.is-selected {
    border-color: var(--bs-primary, #2f6fed);
    box-shadow: 0 0 0 3px rgba(47, 111, 237, .12);
}

.apply-plan-card h3 { font-size: 17px; margin: 0 0 6px; }
.apply-plan-card .price { font-size: 20px; font-weight: 700; margin: 8px 0; }
.apply-plan-card .desc { font-size: 13px; color: #6b7684; min-height: 36px; }

/* ── 약관 아코디언 ─────────────────────────────────────────────────────── */

.apply-agreement {
    border: 1px solid #e5e8eb;
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}

.apply-agreement-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #f8f9fb;
    cursor: pointer;
    user-select: none;
}

.apply-agreement-head .title { flex: 1; font-weight: 600; font-size: 14px; }
.apply-agreement-head .caret { transition: transform .15s; color: #8a94a6; }
.apply-agreement.is-open .caret { transform: rotate(180deg); }

.apply-agreement-body {
    max-height: 320px;
    overflow-y: auto;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.65;
    color: #333;
    border-top: 1px solid #eef1f5;
}

.apply-agreement-body h3 { font-size: 15px; margin: 18px 0 8px; }
.apply-agreement-body h4 { font-size: 14px; margin: 14px 0 6px; }
.apply-agreement-body ol, .apply-agreement-body ul { padding-left: 20px; }
.apply-agreement-body table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0; }
.apply-agreement-body th, .apply-agreement-body td { border: 1px solid #e5e8eb; padding: 6px 8px; }

/* 허니팟 — 실제 사용자에게는 보이지 않습니다(auth-register.js 와 같은 방식) */
.apply-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
}

/* ── 결과 화면(접수완료·확인랜딩) ──────────────────────────────────────── */

.apply-result {
    text-align: center;
    padding: 48px 16px;
}

.apply-result .icon { font-size: 48px; margin-bottom: 16px; }
.apply-result .icon.ok { color: #19c37d; }
.apply-result .icon.fail { color: #e5484d; }
.apply-result .appno { font-size: 22px; font-weight: 700; margin: 12px 0; letter-spacing: .02em; }

/* 반려 사유·자료요청 내용. 운영자가 줄바꿈으로 항목을 나눠 적는 경우가 많아 그대로 살립니다
   (한 줄로 뭉치면 "1. … 2. …" 같은 요청 목록이 읽히지 않습니다). */
.apply-result .apply-reason {
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 480px) {
    .apply-shell { padding: 16px 12px 48px; }
    .apply-step { font-size: 11px; }
}