@charset "UTF-8";
/* ==========================================================================
   with동심 파트너스 - 기관교육 프로그램 / 프로그램 공급약정
   - style.css 이후 로드 (/resources/partner/css/program-supply.css)
   - .program-supply : 기관교육 프로그램(programMain.jsp) - supply-status.jsp 교재 탭 이식
   - .supply-agree   : 프로그램 공급약정(programSupplyAgreement.jsp)
   ========================================================================== */

/* ---------- 공통 ---------- */
.program-supply, .supply-agree { word-break: keep-all; overflow-wrap: break-word; }
.program-supply .br-pc, .supply-agree .br-pc { display: inline; }

/* ==========================================================================
   1. 기관교육 프로그램 (.program-supply)
   ========================================================================== */
.program-supply { padding: 48px 0 80px; }
.program-supply .container { max-width: 1280px; }

/* 상단 안내문구 : 박스형 대신 일반 텍스트로 노출 */
.program-supply .supply-notice-text { margin: 0 0 28px; text-align: center; }
.program-supply .supply-notice-text .notice-strong {
    margin: 0; font-size: 22px; line-height: 1.4; font-weight: 700; color: #1F2022;
}
.program-supply .supply-notice-text .notice-desc {
    margin: 10px 0 0; font-size: 14px; line-height: 1.8; color: #4B4F55;
}

/* 지역별 담당 연락처 : 첨부 이미지처럼 박스 + 가운데 정렬 */
.program-supply .supply-notice-text .notice-contact-box {
    margin-top: 14px; padding: 18px 20px; background: #fff;
    border: 1px solid #F3B4BB; border-radius: 12px; text-align: center;
}
.program-supply .supply-notice-text .notice-contact-box .notice-desc {
    margin: 0; font-size: 14px; line-height: 1.7; font-weight: 600; color: #E5484D;
}
.program-supply .supply-notice-text .notice-contact-box .contact-line {
    margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: #4B4F55;
}

.program-supply .supply-group-head { margin-bottom: 28px; }
.program-supply .supply-group-head .tit { font-size: 22px; font-weight: 700; color: #1F2022; }
.program-supply .supply-group-head .tit .font-blue3 { color: #0B57D0; }
.program-supply .supply-group-head .desc { margin-top: 8px; font-size: 15px; line-height: 1.6; color: #686B73; }

/* 그룹 배너 (사회정서교육 / 기타프로그램) */
.program-supply .supply-intro,
.program-supply .supply-band-banner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
    border-left: 4px solid #2563EB; border-radius: 12px; padding: 20px 24px 20px 20px; margin-bottom: 24px;
    background: #E6F0FA;
}
.program-supply .supply-intro .intro-txt { flex: 1 1 420px; min-width: 0; }
.program-supply .supply-intro .badge,
.program-supply .supply-band-banner .badge { display: none; }
.program-supply .supply-intro h4,
.program-supply .supply-band-banner h4 { font-size: 17px; font-weight: 800; color: #1F2022; margin: 0 0 6px; }
.program-supply .supply-intro p,
.program-supply .supply-band-banner p { font-size: 13px; line-height: 1.7; color: #686B73; margin: 0; }
.program-supply .supply-intro .intro-link,
.program-supply .supply-band-banner .intro-link {
    flex: 0 0 auto; display: inline-flex; align-items: center;
    color: #0B57D0; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.program-supply .supply-band-banner { background: #E7F5EC; border-left-color: #15803D; margin-top: 44px; }
.program-supply .supply-band-banner .intro-link { color: #15803D; }

/* 프로그램 카드 */
.program-supply .program-card {
    display: flex; gap: 26px; border: 1px solid #E6E9F3; border-radius: 16px;
    padding: 24px; margin-bottom: 18px; background: #fff;
}
.program-supply .program-thumb { flex: 0 0 200px; }
.program-supply .program-thumb .thumb {
    aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #F6F6F6; position: relative;
}
.program-supply .program-thumb .thumb a { display: block; width: 100%; height: 100%; }
.program-supply .program-thumb .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.program-supply .program-thumb .thumb a:hover img { transform: scale(1.05); }
.program-supply .program-thumb .thumb .fallback {
    position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: #0B57D0; opacity: .45;
}
.program-supply .program-thumb .thumb .fallback svg { width: 34%; height: 34%; }
.program-supply .program-body { flex: 1; min-width: 0; position: relative; padding-right: 204px; }

.program-supply .program-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.program-supply .badge-pill { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.program-supply .badge-pill.badge-eligible { background: #fff; border: 1px solid #86EFAC; color: #15803D; }
.program-supply .badge-pill.badge-partner-only { background: #fff; border: 1px solid #93C5FD; color: #0B57D0; }
.program-supply .badge-pill.badge-highlight { background: #E6E9F3; color: #0B57D0; }
.program-supply .badge-pill.badge-highlight.orange { background: #FFEDD5; color: #C2410C; }
.program-supply .badge-pill.badge-region { background: #F1F2F4; color: #686B73; }

.program-supply .program-title { font-size: 19px; font-weight: 800; color: #1F2022; }
.program-supply .program-title .age { font-size: 13px; font-weight: 700; color: #0B57D0; margin-left: 6px; }
.program-supply .program-desc { font-size: 13px; color: #686B73; margin-top: 6px; }

.program-supply .price-box-row { display: flex; flex-wrap: wrap; border: 1px solid #E6E9F3; border-radius: 10px; overflow: hidden; margin-top: 16px; }
.program-supply .price-box { flex: 1 1 0; min-width: 140px; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.program-supply .price-box + .price-box { border-left: 1px solid #E6E9F3; }
.program-supply .price-box .pb-label { order: 1; font-size: 12px; font-weight: 700; color: #1F2022; white-space: nowrap; }
.program-supply .price-box .pb-sub { order: 3; flex: 1 1 100%; font-size: 11px; color: #9AA0A6; margin-top: 2px; }
.program-supply .price-box .pb-value { order: 2; margin-left: auto; font-size: 18px; font-weight: 800; color: #1F2022; white-space: nowrap; }
.program-supply .price-box .pb-value .unit { font-size: 12px; font-weight: 600; margin-left: 2px; }
.program-supply .price-box .pb-value.is-muted { color: #B4B7BD; font-weight: 600; font-size: 15px; }

.program-supply .program-note { margin-top: 12px; font-size: 12px; line-height: 1.7; color: #686B73; }
.program-supply .program-note strong { color: #0B57D0; font-weight: 700; }
.program-supply .program-note .sub { display: block; margin-top: 2px; color: #9AA0A6; }

/* PC: 버튼 영역을 우측에 세로 배치 + 구분선 */
.program-supply .program-actions {
    position: absolute; top: 0; right: 0; bottom: 0; width: 180px;
    display: flex; flex-direction: column; justify-content: center; gap: 10px;
    padding-left: 24px; border-left: 1px solid #E6E9F3;
}
.program-supply .program-actions a {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    padding: 12px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.program-supply .program-actions .btn-detail { background: #0B57D0; color: #fff; }
.program-supply .program-actions .btn-agreement { background: #EAF1FE; color: #0B57D0; border: 1px solid #BFD3FA; }
/* 교재(프로그램) 공급 기준 : 다이렉트 공급 개편(27_다이렉트공급.pptx)으로 추가된 3번째 액션 버튼.
   브로슈어 보기(파랑 채움)/다이렉트 공급 신청(연파랑 아웃라인)과 구분되는 중립 회색 아웃라인 */
.program-supply .program-actions .btn-guide { background: #F1F2F4; color: #4B4F55; border: 1px solid #E0E2E6; }

/* 기타프로그램(그린 테마) */
.program-supply .supply-band-banner ~ .program-card .program-note strong { color: #15803D; }
.program-supply .supply-band-banner ~ .program-card .badge-pill.badge-highlight { background: #E7F5EC; color: #15803D; }
.program-supply .supply-band-banner ~ .program-card .program-actions .btn-detail { background: #15803D; }
.program-supply .supply-band-banner ~ .program-card .program-actions .btn-agreement { background: #E7F5EC; color: #15803D; border-color: #BBE8CB; }

/* ==========================================================================
   2. 프로그램 공급약정 (.supply-agree)
   ========================================================================== */
.supply-agree { background: #F7F9FC; padding: 56px 0 100px; color: #1F2022; }
.supply-agree .container { max-width: 1280px; }

/* 상단 타이틀 */
.supply-agree .sa-hero { text-align: center; }
.supply-agree .sa-hero .sa-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; border-radius: 999px;
    background: #E3ECFB; color: #0B57D0; font-size: 13px; font-weight: 700;
}
.supply-agree .sa-hero .sa-chip:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6B9BE6; }
.supply-agree .sa-hero h2 { margin-top: 18px; font-size: 40px; font-weight: 800; line-height: 1.35; letter-spacing: -0.02em; }
.supply-agree .sa-hero h2 em {
    font-style: normal; color: #0B57D0;
    background: linear-gradient(transparent 88%, #F5B400 88%);
}
.supply-agree .sa-hero .sa-desc { margin-top: 20px; font-size: 17px; line-height: 1.75; color: #686B73; }

/* 작성 방법 안내 */
.supply-agree .sa-guide {
    display: flex; align-items: center; gap: 24px; margin-top: 52px; padding: 36px 40px;
    border: 1px solid #DCE6F5; border-radius: 20px;
    background: linear-gradient(90deg, #EEF4FD 0%, #F7F9FD 60%, #FFF9EC 100%);
}
.supply-agree .sa-guide .sa-guide-ico {
    flex: 0 0 56px; width: 56px; height: 56px; border-radius: 14px; background: #0B57D0; color: #fff;
    display: flex; align-items: center; justify-content: center; align-self: flex-start;
    box-shadow: 0 6px 14px -4px rgba(11, 87, 208, .45);
}
.supply-agree .sa-guide .sa-guide-ico svg { width: 26px; height: 26px; }
.supply-agree .sa-guide .sa-guide-txt { flex: 1; min-width: 0; }
.supply-agree .sa-guide .sa-guide-tit { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; }
.supply-agree .sa-guide .sa-guide-tit .must {
    padding: 2px 8px; border-radius: 4px; background: #FDECEC; color: #E5484D; font-size: 12px; font-weight: 700;
}
.supply-agree .sa-guide .sa-guide-txt p { margin-top: 10px; font-size: 15px; line-height: 1.75; color: #686B73; }
.supply-agree .sa-guide .sa-guide-txt p a { color: #0B57D0; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.supply-agree .sa-guide .sa-guide-txt p strong { color: #3F4247; font-weight: 700; }
.supply-agree .sa-guide .sa-guide-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 20px 32px; border-radius: 12px;
    background: #0B57D0; color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; white-space: nowrap;
    box-shadow: 0 8px 18px -6px rgba(11, 87, 208, .5); transition: background .2s ease;
}
.supply-agree .sa-guide .sa-guide-btn:hover { background: #0947AD; }

/* 진행 절차 */
.supply-agree .sa-steps { margin-top: 72px; }
.supply-agree .sa-sec-head { text-align: center; }
.supply-agree .sa-sec-head h3 { font-size: 24px; font-weight: 800; }
.supply-agree .sa-sec-head p { margin-top: 8px; font-size: 15px; color: #898A8E; }
.supply-agree .sa-step-list, .supply-agree .sa-rule-list { list-style: none; padding: 0; margin-left: 0; }
.supply-agree .sa-step-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 36px; }
.supply-agree .sa-step {
    position: relative; padding: 32px 30px 36px; background: #fff; border: 1px solid #E6E9F3; border-radius: 18px;
}
.supply-agree .sa-step .step-top { display: flex; align-items: center; justify-content: space-between; }
.supply-agree .sa-step .step-badge {
    padding: 4px 12px; border-radius: 6px; background: #EEF3FB; color: #0B57D0; font-size: 13px; font-weight: 800; letter-spacing: .02em;
}
.supply-agree .sa-step .step-num {
    width: 40px; height: 40px; border-radius: 50%; background: #F1F2F4; color: #3F4247;
    display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800;
}
.supply-agree .sa-step h4 { margin-top: 26px; font-size: 19px; font-weight: 800; }
.supply-agree .sa-step p { margin-top: 12px; font-size: 15px; line-height: 1.75; color: #686B73; }
.supply-agree .sa-step.is-current { border: 2px solid #5B9BEA; box-shadow: 0 10px 24px -12px rgba(11, 87, 208, .35); }
.supply-agree .sa-step.is-current .step-badge { background: #FDECEC; color: #E5484D; }
.supply-agree .sa-step.is-current .step-num { background: #0B57D0; color: #fff; }
.supply-agree .sa-step:not(.is-current):not(:first-child) .step-badge { background: #F1F2F4; color: #3F4247; }

/* 우리 기관 약정 내역 */
.supply-agree .sa-history {
    margin-top: 48px; padding: 44px 44px 48px; background: #fff; border: 1px solid #E6E9F3; border-radius: 20px;
}
.supply-agree .sa-history-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
    padding-bottom: 28px; border-bottom: 1px solid #EEF0F4;
}
.supply-agree .sa-history-head h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 24px; font-weight: 800; }
.supply-agree .sa-history-head .cnt {
    padding: 3px 10px; border-radius: 6px; background: #E7F5EC; color: #15803D; font-size: 13px; font-weight: 700;
}
.supply-agree .sa-history-head p { margin-top: 8px; font-size: 15px; color: #898A8E; }
.supply-agree .sa-history-head .agency-code { flex: 0 0 auto; font-size: 13px; color: #9AA0A6; white-space: nowrap; }
.supply-agree .sa-history-head .agency-code strong { color: #686B73; font-weight: 700; }

.supply-agree .sa-table { margin-top: 32px; border: 1px solid #E6E9F3; border-radius: 14px; overflow: hidden; }
/* 사이트 공통 box-sizing 이 content-box 라 padding + width:100% 가 넘치는 문제 방지 */
.supply-agree .sa-history, .supply-agree .sa-history *,
.supply-agree .sa-table, .supply-agree .sa-table * { box-sizing: border-box; }
.supply-agree .sa-table table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: auto; }
.supply-agree .sa-table th {
    padding: 20px 16px; background: #F7F8FA; border-bottom: 1px solid #E6E9F3;
    font-size: 15px; font-weight: 700; color: #3F4247; text-align: left;
}
.supply-agree .sa-table td { padding: 22px 16px; font-size: 15px; color: #686B73; border-bottom: 1px solid #EEF0F4; vertical-align: middle; }
.supply-agree .sa-table tr:last-child td { border-bottom: none; }
/* PC : 약정 프로그램 칸만 남는 폭을 쓰고, 나머지 칸은 줄바꿈 없이 내용 폭만큼 */
.supply-agree .sa-table th, .supply-agree .sa-table td { white-space: nowrap; }
.supply-agree .sa-table th:first-child, .supply-agree .sa-table td:first-child { padding-left: 30px; width: 100%; white-space: normal; }
.supply-agree .sa-table th:last-child, .supply-agree .sa-table td:last-child { padding-right: 30px; text-align: right; }
.supply-agree .sa-table .pgm-name { display: flex; align-items: center; gap: 12px; font-weight: 700; color: #1F2022; }
.supply-agree .sa-table .pgm-name:before { content: ""; flex: 0 0 10px; height: 10px; border-radius: 50%; background: #0B57D0; }
.supply-agree .sa-table .qty { color: #0B57D0; font-weight: 700; }
.supply-agree .sa-table .status {
    display: inline-block; white-space: nowrap; padding: 4px 12px; border-radius: 999px; background: #E6EFFC; color: #4F7FCB; font-size: 13px; font-weight: 700;
}
.supply-agree .sa-table .status.is-wait { background: #FFF4E0; color: #C77700; }
.supply-agree .sa-table .status.is-writing { background: #F1F2F4; color: #686B73; }
.supply-agree .sa-table .btn-print.is-line { background: #fff; color: #0B57D0; border: 1px solid #BFD3FA; }
.supply-agree .sa-table .btn-print.is-line:hover { background: #EAF1FE; }
.supply-agree .sa-table .btn-print {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px;
    background: #1F2A37; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.supply-agree .sa-table .btn-print svg { width: 15px; height: 15px; }
.supply-agree .sa-table .btn-print:hover { background: #111827; }
.supply-agree .sa-table .m-label { display: none; }

.supply-agree .sa-empty { margin-top: 32px; padding: 48px 20px; border: 1px dashed #D6DBE4; border-radius: 14px; text-align: center; }
.supply-agree .sa-empty p { font-size: 15px; line-height: 1.7; color: #898A8E; }
.supply-agree .sa-empty a {
    display: inline-flex; margin-top: 18px; padding: 12px 22px; border-radius: 10px;
    background: #EAF1FE; color: #0B57D0; border: 1px solid #BFD3FA; font-size: 14px; font-weight: 700; text-decoration: none;
}

/* 공급 및 출고 안내 기준 */
.supply-agree .sa-rule {
    margin-top: 40px; padding: 48px 44px; background: #F1F4F9; border: 1px solid #E3E8F0; border-radius: 20px;
}
.supply-agree .sa-rule h3 { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; }
.supply-agree .sa-rule h3 svg { width: 24px; height: 24px; color: #0B57D0; flex: 0 0 auto; }
.supply-agree .sa-rule-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 28px; }
.supply-agree .sa-rule-item { padding: 26px 24px; background: #fff; border: 1px solid #E6E9F3; border-radius: 14px; }
.supply-agree .sa-rule-item h4 { font-size: 16px; font-weight: 800; color: #1F2022; }
.supply-agree .sa-rule-item p { margin-top: 10px; font-size: 14px; line-height: 1.75; color: #686B73; }
.supply-agree .sa-rule-item.is-point h4 { color: #0B57D0; }

/* ==========================================================================
   반응형
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .supply-agree .sa-hero h2 { font-size: 34px; }
    .supply-agree .sa-guide { flex-wrap: wrap; }
    .supply-agree .sa-guide .sa-guide-btn { width: 100%; justify-content: center; }
    .supply-agree .sa-step-list { gap: 16px; }
    .supply-agree .sa-step { padding: 26px 22px 28px; }
}

@media screen and (max-width: 860px) {
    /* 약정 내역: 테이블 → 카드형 */
    .supply-agree .sa-table { border: none; border-radius: 0; }
    .supply-agree .sa-table thead { display: none; }
    .supply-agree .sa-table table, .supply-agree .sa-table tbody,
    .supply-agree .sa-table tr, .supply-agree .sa-table td { display: block; width: 100% !important; max-width: 100%; white-space: normal; }
    .supply-agree .sa-table tr { padding: 18px 20px; margin-bottom: 12px; border: 1px solid #E6E9F3; border-radius: 14px; }
    .supply-agree .sa-table td,
    .supply-agree .sa-table td:first-child,
    .supply-agree .sa-table td:last-child {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 8px 0; border-bottom: none; text-align: right;
    }
    .supply-agree .sa-table td:first-child { padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid #EEF0F4; }
    .supply-agree .sa-table td:last-child { padding-top: 14px; }
    .supply-agree .sa-table td:last-child .btn-print { width: 100%; justify-content: center; padding: 12px 16px; }
    .supply-agree .sa-table .m-label { display: inline; font-size: 13px; color: #9AA0A6; }
    .supply-agree .sa-step-list { grid-template-columns: 1fr; }
    .supply-agree .sa-rule-list { grid-template-columns: 1fr; }
}

@media screen and (max-width: 720px) {
    .program-supply { padding: 28px 0 56px; }
    .program-supply .br-pc, .supply-agree .br-pc { display: none; }
    .program-supply .program-card { flex-direction: column; padding: 20px; }
    .program-supply .program-thumb { flex: 0 0 auto; width: 220px; max-width: 100%; margin: 0 auto; }
    .program-supply .program-body { position: static; padding-right: 0; }
    .program-supply .program-actions {
        position: static; flex-direction: row; width: auto; margin-top: 16px; padding-left: 0; border-left: none;
    }
    .program-supply .supply-band-banner { padding: 20px; }
    .program-supply .supply-group-head .tit { font-size: 18px; }

    .supply-agree { padding: 36px 0 64px; }
    .supply-agree .sa-hero h2 { font-size: 26px; }
    .supply-agree .sa-hero .sa-desc { font-size: 14px; }
    .supply-agree .sa-guide { margin-top: 32px; padding: 24px 20px; gap: 16px; }
    .supply-agree .sa-guide .sa-guide-ico { flex-basis: 44px; width: 44px; height: 44px; border-radius: 12px; }
    .supply-agree .sa-guide .sa-guide-tit { font-size: 17px; }
    .supply-agree .sa-guide .sa-guide-txt p { font-size: 14px; }
    .supply-agree .sa-guide .sa-guide-btn { padding: 16px 20px; font-size: 15px; }
    .supply-agree .sa-steps { margin-top: 48px; }
    .supply-agree .sa-sec-head h3, .supply-agree .sa-history-head h3 { font-size: 20px; }
    .supply-agree .sa-sec-head p, .supply-agree .sa-history-head p { font-size: 14px; }
    .supply-agree .sa-step h4 { margin-top: 18px; font-size: 17px; }
    .supply-agree .sa-step p { font-size: 14px; }
    .supply-agree .sa-history { padding: 28px 20px 24px; border-radius: 16px; }
    .supply-agree .sa-history-head { flex-direction: column; align-items: flex-start; padding-bottom: 20px; }
    .supply-agree .sa-table { margin-top: 20px; }
    .supply-agree .sa-rule { padding: 28px 20px; border-radius: 16px; }
    .supply-agree .sa-rule h3 { font-size: 18px; }
}

@media screen and (max-width: 540px) {
    .program-supply .price-box-row { flex-direction: column; }
    .program-supply .price-box + .price-box { border-left: none; border-top: 1px solid #E6E9F3; }
    .program-supply .program-actions { flex-direction: column; }
}

/* 인쇄 시 약정 내역만 깔끔하게 */
@media print {
    .supply-agree .sa-guide, .supply-agree .sa-steps, .supply-agree .btn-print { display: none !important; }
}