/* ================================================
   IGE 파트너 가입폼 스타일시트
   파일: /partner/css/register-w2.css
   ================================================ */

/* ========================================
   전역 스타일
   ======================================== */
:root {
    --primary-color: #0d6efd;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --light-gray: #f8f9fa;
    --border-color: #e9ecef;
    --text-muted: #6c757d;
}

/* ========================================
   진행 표시기
   ======================================== */
.progress-container {
    padding: 20px 0;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
}

.step-line {
    flex: 1;
    height: 2px;
    background: var(--border-color);
    position: relative;
    top: -20px;
    z-index: 1;
}

.step-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 10px;
    transition: all 0.3s ease;
    border: 3px solid var(--border-color);
}

.step.active .step-circle {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

.step.completed .step-circle {
    background: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

.step.completed .step-circle::after {
    content: '\f26b';
    font-family: 'bootstrap-icons';
}

.step-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-align: center;
    margin-top: 5px;
}

.step.active .step-label {
    color: var(--primary-color);
    font-weight: 700;
}

.step.completed .step-label {
    color: var(--success-color);
}

/* ========================================
   폼 스텝
   ======================================== */
.form-step {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.form-step.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   카드
   ======================================== */
.card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
}

.card-title {
    font-weight: 700;
    color: #2c3e50;
}

/* ========================================
   필수 필드 표시
   ======================================== */
.form-label.required::after {
    content: ' *';
    color: var(--danger-color);
    font-weight: bold;
}

/* ========================================
   카테고리 카드
   ======================================== */
.category-card {
    position: relative;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 18px;
    transition: all 0.3s ease;
    cursor: pointer;
    background: white;
    height: 100%;
    min-height: 90px;
}

.category-card:hover {
    border-color: var(--primary-color);
    background-color: #f8f9ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
}

.category-card input[type="checkbox"] {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.category-card:has(input:checked) {
    border-color: var(--primary-color);
    background-color: #e7f1ff;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.category-card:has(input:checked) h6 {
    color: var(--primary-color);
    font-weight: 700;
}

.category-card h6 {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 15px;
}

.category-card small {
    font-size: 12px;
    line-height: 1.4;
}

/* ========================================
   카테고리 섹션 (Step 3 동적 필드)
   ======================================== */
.category-section {
    border-left: 4px solid var(--primary-color);
    margin-bottom: 24px;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.category-section .card-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, #0a58ca 100%);
    color: white;
    font-weight: 600;
}

.category-section h6 {
    font-weight: 700;
    color: #2c3e50;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

/* ========================================
   Select2 커스터마이징
   ======================================== */
.select2-container--default .select2-selection--multiple {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    min-height: 42px;
    padding: 4px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.select2-container--default .select2-selection--single {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    height: 42px;
    padding: 6px 12px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
}

/* ========================================
   버튼
   ======================================== */
.btn-lg {
    padding: 12px 32px;
    font-weight: 600;
    border-radius: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #0a58ca 100%);
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0a58ca 0%, #084298 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

.btn-success {
    background: linear-gradient(135deg, var(--success-color) 0%, #146c43 100%);
    border: none;
}

.btn-success:hover {
    background: linear-gradient(135deg, #146c43 0%, #0f5132 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
}

.btn-outline-secondary {
    border: 2px solid #6c757d;
    font-weight: 600;
}

.btn-outline-secondary:hover {
    transform: translateY(-1px);
}

/* ========================================
   폼 요소
   ======================================== */
.form-control:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* ========================================
   요약 테이블
   ======================================== */
#summaryContent table th {
    font-weight: 600;
    color: #495057;
    background-color: #f8f9fa;
}

#summaryContent table td {
    color: #212529;
}

#summaryContent .bi-check-circle {
    color: var(--success-color);
    margin-right: 8px;
}

/* ========================================
   Alert
   ======================================== */
.alert {
    border-radius: 8px;
    border: none;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
}

/* ========================================
   반응형
   ======================================== */
@media (max-width: 768px) {
    .step-label {
        font-size: 11px;
    }

    .step-circle {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .category-card {
        padding: 14px;
        min-height: 80px;
    }

    .category-card h6 {
        font-size: 14px;
    }

    .category-card small {
        font-size: 11px;
    }

    .btn-lg {
        padding: 10px 24px;
        font-size: 15px;
    }

    .card-body {
        padding: 20px !important;
    }
}

@media (max-width: 576px) {
    .progress-steps {
        padding: 0 10px;
    }

    .step-label {
        font-size: 10px;
        max-width: 60px;
    }

    .step-circle {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    h4.card-title {
        font-size: 18px;
    }

    .btn-lg {
        width: 100%;
        margin-bottom: 10px;
    }

    #btnPrev {
        order: 2;
    }

    #btnNext, #btnSubmit {
        order: 1;
    }

    .d-flex.justify-content-between {
        flex-direction: column-reverse;
    }
}

/* ========================================
   애니메이션
   ======================================== */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
    }
}

.step.active .step-circle {
    animation: pulse 2s infinite;
}

/* ========================================
   로딩 상태
   ======================================== */
.btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ========================================
   파일 입력
   ======================================== */
.form-control[type="file"] {
    padding: 8px 12px;
}

.form-control[type="file"]::-webkit-file-upload-button {
    padding: 6px 12px;
    margin-right: 12px;
    background-color: var(--light-gray);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
}

.form-control[type="file"]::-webkit-file-upload-button:hover {
    background-color: #e2e6ea;
}

/* ========================================
   체크박스 스타일 강화
   ======================================== */
.form-check-input {
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
}

.form-check-label {
    cursor: pointer;
}

/* ========================================
   프로그레스바
   ======================================== */
.progress {
    background-color: var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, var(--primary-color) 0%, #0a58ca 100%);
    transition: width 0.4s ease;
}

/* ========================================
   입력 그룹
   ======================================== */
.input-group .btn {
    border-radius: 0 0.375rem 0.375rem 0;
}

/* ========================================
   툴팁/도움말
   ======================================== */
.form-text {
    font-size: 12px;
    margin-top: 4px;
}

/* ========================================
   스크롤 부드럽게
   ======================================== */
html {
    scroll-behavior: smooth;
}

/* ========================================
   [FU-7 UX-01] 완료 안내 패널 + 상태 리본
   색·구조는 확정 목업 계약(docs/partner-followup-fu7-member-ux-20260808/mockups/CONTRACT.md)
   §2 색 토큰 · §3 리본 DOM · §4 패널 을 그대로 옮긴 것이다. 새 색을 만들지 않는다.
   ======================================== */
.fu7-panel {
    --fu7-ink: #1f2d3d;
    --fu7-ink-2: #6b7785;
    --fu7-ink-3: #93a1af;
    --fu7-line: #e2e6ea;
    --fu7-line-2: #eef1f4;
    --fu7-surface: #ffffff;
    --fu7-go: #1a7f37;
    --fu7-go-bg: #e8f5ec;
    --fu7-stop: #b3261e;
    --fu7-stop-bg: #fef2f2;
    --fu7-hold: #9a6700;
    --fu7-hold-bg: #fff8e6;
    --fu7-wait: #5b6b7f;
    --fu7-wait-bg: #eef2f7;

    background: var(--fu7-surface);
    border: 1px solid var(--fu7-line);
    border-radius: 8px;
    color: var(--fu7-ink);
}
.fu7-panel-hd {
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--fu7-line-2);
}
.fu7-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fu7-ink-2);
    margin-bottom: 8px;
}
.fu7-panel-hd h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
}
.fu7-panel-hd p {
    margin: 0;
    color: var(--fu7-ink-2);
    font-size: 13.5px;
    line-height: 1.6;
}
.fu7-panel-bd { padding: 20px 24px 24px; }

/* 상태 리본 — CONTRACT §3. 항상 3칸(제출/현재/다음). */
.fu7-ribbon {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--fu7-line);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
}
.fu7-ribbon .fu7-st {
    flex: 1;
    padding: 11px 12px 12px;
    position: relative;
    background: var(--fu7-surface);
}
.fu7-ribbon .fu7-st + .fu7-st { border-left: 1px solid var(--fu7-line-2); }
.fu7-ribbon .fu7-st .k {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--fu7-ink-3);
    margin-bottom: 5px;
}
.fu7-ribbon .fu7-st .v {
    font-size: 13px;
    font-weight: 600;
    color: var(--fu7-ink-3);
}
.fu7-ribbon .fu7-st[data-s="done"] .v { color: var(--fu7-ink-2); }
.fu7-ribbon .fu7-st[data-s="done"]::after {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 11px;
    color: var(--fu7-ink-3);
}
.fu7-ribbon .fu7-st[data-s="now"] { background: var(--fu7-wait-bg); }
.fu7-ribbon .fu7-st[data-s="now"] .v { color: var(--fu7-ink); }
.fu7-ribbon .fu7-st[data-s="now"] .k { color: var(--fu7-wait); }
.fu7-ribbon .fu7-st[data-s="now"]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--fu7-wait);
}
/* 보완 요청(revision_requested) — 승인 초록도 거절 빨강도 아닌 세 번째 색 */
.fu7-ribbon.hold .fu7-st[data-s="now"] { background: var(--fu7-hold-bg); }
.fu7-ribbon.hold .fu7-st[data-s="now"] .k { color: var(--fu7-hold); }
.fu7-ribbon.hold .fu7-st[data-s="now"]::before { background: var(--fu7-hold); }
/* 승인 */
.fu7-ribbon.go .fu7-st[data-s="now"] { background: var(--fu7-go-bg); }
.fu7-ribbon.go .fu7-st[data-s="now"] .k { color: var(--fu7-go); }
.fu7-ribbon.go .fu7-st[data-s="now"]::before { background: var(--fu7-go); }
/* 최종 거절 */
.fu7-ribbon.stop .fu7-st[data-s="now"] { background: var(--fu7-stop-bg); }
.fu7-ribbon.stop .fu7-st[data-s="now"] .k,
.fu7-ribbon.stop .fu7-st[data-s="now"] .v { color: var(--fu7-stop); }
.fu7-ribbon.stop .fu7-st[data-s="now"]::before { background: var(--fu7-stop); }

/* 요약 */
.fu7-summary {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px 16px;
    margin: 0 0 20px;
    font-size: 13.5px;
}
.fu7-summary dt { color: var(--fu7-ink-2); font-weight: 600; }
.fu7-summary dd {
    margin: 0;
    color: var(--fu7-ink);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* 다음에 일어나는 일 */
.fu7-next h3 {
    font-size: 13.5px;
    font-weight: 700;
    margin: 0 0 8px;
}
.fu7-next ol {
    margin: 0;
    padding-left: 20px;
    color: var(--fu7-ink-2);
    font-size: 13px;
    line-height: 1.7;
}

.fu7-btn-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* 제출 실패 안내 — CONTRACT §6 .errmsg 와 같은 색 체계 */
.fu7-submit-error {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid #e6b9b5;
    border-radius: 6px;
    background: #fef2f2;
    color: #b3261e;
    font-size: 13px;
    line-height: 1.6;
}
.fu7-submit-error ul { margin: 6px 0 0; padding-left: 18px; }

@media (max-width: 640px) {
    .fu7-panel-hd { padding: 18px 16px 14px; }
    .fu7-panel-bd { padding: 16px; }
    .fu7-panel-hd h2 { font-size: 17px; }
    .fu7-ribbon .fu7-st { padding: 9px 8px 10px; }
    .fu7-ribbon .fu7-st .k { font-size: 9.5px; letter-spacing: .06em; }
    .fu7-ribbon .fu7-st .v { font-size: 12px; }
    .fu7-ribbon .fu7-st[data-s="done"]::after { top: 8px; right: 8px; }
    .fu7-summary { grid-template-columns: 84px 1fr; font-size: 12.5px; }
    .fu7-btn-row .btn { flex: 1 1 100%; }
}

/* ================================================================
   [FU-7 Phase 7 / UI-02] 모바일 하단 고정 퀵바 가림 해소 — SC5 · SC6 · SC9
   ----------------------------------------------------------------
   실측(evidence/fu7_ui02_baseline.json · fu7_ui02_before.json):
     · 위저드를 덮는 고정 요소는 `.ige-lhc-fab` 이 아니라 테마 하단 퀵바 `.quick`
       (theme/ige_2025/tail.php:49 · res.css 에서 <=860px 하단 가로 바, 높이 71px, z-index 100)
     · 390x844 확인/제출 스텝에서 `#btnSubmit`(높이 35) 이 최대 35px = 전체가 가려졌다
     · 테마 res.css 가 <=860px 에서 `.container{padding:0 !important}` 로 여백을 없애
       계획서가 지시한 "컨테이너 아래 여백"이 기본값으로는 살아나지 않는다
   해법(2026-08-11 사용자 승인):
     · 퀵바 자체(.quick · z-index 포함)는 무접촉 — LHC/테마 소유
     · 컨테이너 아래 여백을 되살려 마지막 콘텐츠가 바에 잠기지 않게 한다
     · 확인/제출 스텝에서만 조작 버튼 행을 바 위에 고정한다.
       고정 바는 뷰포트에 붙어 있어 정적 요소는 어느 스크롤에서든 그 밑을 지나간다 —
       여백만으로는 겹침이 0 이 되지 않기 때문이다(실측 확인).
   PC(>=861px)는 이 블록에 들어오지 않는다 → SC9 회귀 0.
   ================================================================ */
@media (max-width: 860px) {
    :root {
        /* 테마 퀵바 실측 높이. 바 자체는 건드리지 않고 이 값만큼 비켜준다. */
        --fu7-quickbar-h: 71px;
        --fu7-quickbar-gap: calc(var(--fu7-quickbar-h) + env(safe-area-inset-bottom, 0px));
    }

    /* 테마 res.css 의 `.container{padding:0 !important}` 보다 특이도가 높아야 이긴다
       (.container.py-5 = 0,2,0 > .container = 0,1,0). 마지막 콘텐츠가 퀵바에 잠기지 않게 한다. */
    .container.py-5 {
        padding-bottom: calc(var(--fu7-quickbar-gap) + 16px) !important;
    }

    /* 조작 버튼 행(이전·다음·가입 신청)을 퀵바 바로 위에 둔다 — 위저드 전 스텝.
       버튼 행은 활성 스텝의 바로 다음 형제이고, 폼이 숨겨지면(제출 성공) 같이 사라진다.
       1~3 스텝의 `다음` 도 같은 구조로 최대 35px(버튼 전체) 가려지는 것을 실측했다
       (fu7_ui02_after.json wizard_steps_1_3) — 2026-08-11 사용자 승인으로 전 스텝 적용.

       ★ sticky 가 아니라 fixed 인 이유 (2026-08-11 실측)
         테마가 `html{overflow-y:scroll}` + `body{overflow-y:auto}` 를 걸어 두어 body 가
         자기 스크롤 컨테이너가 된다. 그 안의 `position:sticky` 는 뷰포트가 아니라 body
         스크롤포트를 기준으로 잡혀 사실상 static 처럼 동작했다(적용 후 실측: 겹침 35px 잔존).
         fixed 는 조상 overflow 의 영향을 받지 않아 전 스크롤 구간 겹침 0 이 나온다.
         html/body 는 테마 소유라 건드리지 않는다. */
    .form-step.active ~ .d-flex.justify-content-between {
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--fu7-quickbar-gap);
        z-index: 2;                 /* .quick(100) 을 넘기지 않는다 — 겹치지 않으므로 넘길 이유가 없다 */
        margin: 0;
        padding: 10px 12px;
        background: #fff;
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -6px 14px rgba(0, 0, 0, .06);
    }

    /* 버튼 행이 흐름에서 빠지므로 그만큼 아래 여백을 되돌려준다 —
       스텝의 마지막 콘텐츠가 고정 행·퀵바 뒤로 숨지 않게 한다. */
    .form-step.active {
        margin-bottom: calc(var(--fu7-quickbar-gap) + 96px);
    }
}

/* 묶음 D(F6): 모바일 폭(<=768)에서 테마 공통 「맨 위로」 단추(.quick .top_btn)가 하단 고정 조작 줄의
   「다음」/「가입 신청」 오른쪽 끝을 덮던 것을, 이 가입 마법사 화면 안에서만 고정 줄 위로 올린다.
   고정 줄 높이(2~4단계 실측 111px) + 여백 10px 만큼 퀵바 위로 띄운다. 공통 틀(theme res.css · style.css · tail.php)은
   건드리지 않고 이 파일(마법사 전용 CSS) 안에서만 덮는다. 769~860 폭은 테마가 단추를 static 으로 두므로 이 블록에 들어오지 않는다. */
@media (max-width: 768px) {
    body .quick .top_btn {
        bottom: calc(var(--fu7-quickbar-gap) + 111px + 10px);
    }
}

/* 묶음 D(F2): 769~860 폭에서 하단 상담 줄(.quick)이 글꼴 대체 등으로 두 줄로 접히면 높이가 위 71px 가정보다 커져
   (실측 86px) 고정 조작 줄(이전·다음)의 아래쪽을 덮었다. 이 구간에서만 조작 줄을 20px 더 띄워 상담 줄과 겹치지 않게 한다.
   맨 위로 단추는 이 폭에서 테마가 static(상담 줄 안)으로 두므로 좌표가 변하지 않고, 공통 틀은 건드리지 않는다.
   조작 줄 높이 56px + 20px 이 위 .form-step.active 아래 여백(gap + 96px) 안에 들어가므로 여백은 그대로 둔다. */
@media (min-width: 769px) and (max-width: 860px) {
    .form-step.active ~ .d-flex.justify-content-between {
        bottom: calc(var(--fu7-quickbar-gap) + 20px);
    }
}

/* 묶음 D(N6): PC 폭(769 이상)에서 「이전」 · 「다음 →」 · 「가입 신청」 글자가 단추 아래로 4~6px 삐져나왔다.
   테마 .btn 의 height:35px · line-height:35px 위에 이 화면의 .btn-lg 위아래 안쪽 여백 12px 가 더해져(border-box)
   글자 줄이 단추 가운데가 아니라 아래로 치우친 것이다. 이 세 단추의 위아래 안쪽 여백만 0 으로 되돌려 글자를 가운데에 둔다.
   단추 높이 35px · 조작 줄 높이 · 위치는 그대로이고, 768 이하(모바일 규칙)와 공통 테마 .btn 규칙은 건드리지 않는다. */
@media (min-width: 769px) {
    #btnPrev,
    #btnNext,
    #btnSubmit {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* W2 only: override the theme container padding:0 !important; retain Bootstrap gutters. */
#partnerRegisterPage {
    box-sizing: border-box;
    padding-left: 12px !important;
    padding-right: 12px !important;
    min-width: 0;
}
#partnerRegisterPage > .row > [class*="col-"] {
    min-width: 0;
}
#partnerRegisterPage .fu7-summary > dd,
#partnerRegisterPage #summaryContent {
    min-width: 0;
    overflow-wrap: anywhere;
}