/*
 * 충남아이키움포털 — 충남형 영유아 긍정행동발달 (ik_pbs 스킨)
 * Figma: 메가파크 공유 문서 / 04 충남형 영유아 긍정행동발달
 *
 * 교육 목록·상세 부품은 _layout/bootstrap/css/edu.css · ui.css 에 있습니다.
 * 여기에는 이 스킨 고유 화면과, 공용 값을 덮어쓰는 규칙만 둡니다.
 * 공용 토큰(--color-*)은 style.css 에 있습니다.
 */

/* ============================================================
 * 소개 / 안내 — 배너 & 본문 (04-1 · 04-4-1)
 * ============================================================ */
.pbs-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 248px;
    padding: 24px 24px 32px;
    background: #eef8f8;
    overflow: hidden;
}

.pbs-banner__title {
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 36px;
    color: var(--color-text);
}

.pbs-banner__desc {
    margin: auto 0 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text);
    opacity: .8;
    max-width: 70%;
}

.pbs-banner__deco {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 200px;
    height: auto;
    pointer-events: none;
}

.pbs-intro {
    background: #fff;
    padding: 8px 0 24px;
}

.pbs-intro__lead {
    margin: 0;
    padding: 12px 24px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text);
    opacity: .8;
}

.pbs-sec {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 24px;
}

.pbs-sec__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text);
}

.pbs-sec__bullet {
    width: 0;
    height: 0;
    flex: 0 0 auto;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid var(--color-primary);
}

.pbs-sec__subtitle {
    margin: 0;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text);
    opacity: .8;
}

.pbs-sec__text {
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-text);
    opacity: .8;
}

.pbs-list {
    margin: 0;
    padding-left: 21px;
    list-style: disc;
}

.pbs-list li {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-text);
    opacity: .8;
}

.pbs-infographic {
    padding: 8px 24px;
}

.pbs-infographic img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.pbs-note {
    margin: 0;
    padding: 8px 24px;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-text);
    opacity: .8;
}

/* 단계 카드 (지원 전략 및 추진 내용) */
.step-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 20px 8px;
}

.step-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .04);
}

.step-card__no {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: rgba(0, 145, 132, .2);
    color: var(--color-primary);
    font-weight: 800;
    font-size: 14px;
    line-height: 24px;
}

.step-card__no.is-accent {
    background: var(--color-primary);
    color: #fff;
}

.step-card__body {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    padding: 6px 0;
}

.step-card__title {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: var(--color-text);
}

.step-card__list {
    margin: 0;
    padding-left: 21px;
    list-style: disc;
}

.step-card__list li {
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-text);
    opacity: .6;
}

/* 단계 행 (신청 방법) */
.step-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 20px 8px;
}

.step-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .04);
}

.step-row__text {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: var(--color-text);
}

/* ============================================================
 * 신청 달력 (04-3 컨설팅 · 04-4-2 신청하기)
 * ============================================================ */
.pbs-apply {
    background: #fff;
    padding: 16px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.segment__btn {
    flex: 1 0 0;
    height: 48px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    color: var(--color-text);
    opacity: .4;
}

/* 연 / 월 선택 */
.appcal {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.appcal__selects {
    display: flex;
    gap: 12px;
}

.appcal__select {
    position: relative;
    flex: 1 0 0;
    min-width: 0;
}

.appcal__select-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 52px;
    padding: 14px 20px;
    border: 2px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: var(--color-text);
}

.appcal__select-caret {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-right: 2px solid #9a9a9a;
    border-bottom: 2px solid #9a9a9a;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s;
}

.appcal__select.is-open .appcal__select-caret {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.appcal__select-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 8px 20px;
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}

.appcal__select.is-open .appcal__select-menu { display: block; }

.appcal__select-option {
    font-weight: 600;
    font-size: 16px;
    line-height: 40px;
    color: var(--color-text);
    opacity: .3;
    cursor: pointer;
}

.appcal__select-option.is-selected { opacity: 1; }

/* 그리드 */
.appcal__grid {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 8px;
}

/* 레거시 달력과 같은 일~토 7열입니다. (일요일에 잡힌 일정도 있어 요일을 빼지 않습니다) */
.appcal__row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

/* 불러오는 중 · 오류 — 요일 머리글 아래 한 줄로 깝니다. */
.appcal__grid .ik-state {
    padding: 24px 0;
    text-align: center;
}

.appcal__dow {
    text-align: center;
    padding: 8px 0;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text);
    opacity: .5;
}

.appcal__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
}

.appcal__date {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text);
    opacity: .8;
}

.appcal__cell--muted .appcal__date { opacity: .25; }

.appcal__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12px;
    line-height: 20px;
}

.appcal__cell--avail .appcal__badge {
    background: var(--color-primary);
    color: #fff;
}

.appcal__cell--closed .appcal__badge {
    background: #f0f0f0;
    color: var(--color-text);
    opacity: .4;
}

/* 신청 건이 있는 날만 누를 수 있습니다. */
.appcal__cell[data-day] { cursor: pointer; }

/* 범례 */
.appcal__legend {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.appcal__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 12px;
    line-height: 20px;
    color: var(--color-text);
    opacity: .6;
}

.appcal__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.appcal__legend-dot--avail { background: var(--color-primary); }
.appcal__legend-dot--closed { background: #d0d0d0; }

/* ============================================================
 * 다운로드 / 링크 버튼
 * ============================================================ */
.dl-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dl-link {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 60px;
    padding: 0 24px;
    background: #f6f6f6;
    border-radius: 20px;
    color: var(--color-text);
}

.dl-link__name {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: var(--color-text);
    opacity: .8;
}

.dl-link__ico {
    position: relative;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    opacity: .7;
}

/* 다운로드 아이콘 (아래 화살표 + 받침) */
.dl-link__ico--down::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 11px;
    background: var(--color-text);
    transform: translateX(-50%);
}

.dl-link__ico--down::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 4px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-text);
    border-bottom: 2px solid var(--color-text);
    transform: translateX(-50%) rotate(45deg);
}

/* 링크 아이콘 (체인) */
.dl-link__ico--link::before,
.dl-link__ico--link::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 7px;
    border: 2px solid var(--color-text);
    border-radius: 6px;
}

.dl-link__ico--link::before { left: 0; top: 2px; }
.dl-link__ico--link::after { right: 0; bottom: 2px; }

.edu-detail__badge--status { background: var(--color-primary); color: #fff; }

/* 신청서 화면의 상태 배지 — 달력 카드와 같은 색을 씁니다. */
.edu-detail__badge--status.is-wait { background: var(--color-accent); }
.edu-detail__badge--status.is-ready,
.edu-detail__badge--status.is-full,
.edu-detail__badge--status.is-closed { background: #b0b0b0; }

/* ============================================================
 * 부모상담 — 선택 날짜 / 상담 시간대 (04-6)
 * ============================================================ */
.appcal__cell.is-selected {
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    padding: 6px 0;
}

.counsel-date {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    background: #eef8f8;
    border-radius: 20px;
}

.counsel-date__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.counsel-date__dow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 12px;
    background: rgba(0, 145, 132, .1);
    color: var(--color-primary);
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
}

.counsel-date__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 12px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
}

.counsel-date__label {
    margin: 0;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text);
}

.slot-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.slot-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .04);
}

.slot-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.slot-card__name {
    margin: 0;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text);
}

.slot-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
}

.slot-card__badge--open {
    background: rgba(0, 145, 132, .1);
    color: var(--color-primary);
}

.slot-card__badge--ready,
.slot-card__badge--closed,
.slot-card__badge--full {
    background: #f0f0f0;
    color: var(--color-text);
    opacity: .5;
}

/* 대기 신청 — 정원은 찼지만 대기로 받는 상태 */
.slot-card__badge--wait {
    background: rgba(255, 160, 0, .12);
    color: var(--color-accent);
}

.slot-card__meta {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.slot-card__row {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    font-size: 14px;
    line-height: 24px;
}

.slot-card__key {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--color-text);
    opacity: .5;
}

.slot-card__val {
    margin: 0;
    font-weight: 500;
    color: var(--color-text);
}

.slot-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    border-radius: 16px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
}

.slot-card__btn.is-disabled {
    background: #f0f0f0;
    color: var(--color-text);
    opacity: .4;
    cursor: default;
}

/* ============================================================
 * 자료실 — 목록 / 게시글 (04-7)
 * ============================================================ */
.archive { background: #fff; }

.archive-search {
    display: flex;
    gap: 12px;
    padding: 20px;
}

.archive-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.archive-item { border-top: 1px solid var(--color-border); }
.archive-item:last-child { border-bottom: 1px solid var(--color-border); }

.archive-item__link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 24px;
    color: inherit;
}

.archive-item__title {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text);
}

.archive-item__date {
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text);
    opacity: .4;
}

.archive-view { background: #fff; }

.archive-view__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--color-border);
}

.archive-view__title {
    margin: 0;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: var(--color-text);
}

.archive-view__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text);
    opacity: .5;
}

.archive-view__dot { opacity: .5; }

.archive-view__body { padding: 20px; }

.archive-view__placeholder {
    width: 100%;
    min-height: 480px;
    border-radius: 20px;
    background: #d9d9d9;
}

/* ===== 자료실 — API 연동 추가 스타일 ===== */

/* 공지 배지 */
.archive-item__notice {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 4px;
    border-radius: 8px;
    background: var(--color-primary, #2f7d68);
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    vertical-align: middle;
}

/* 게시글 본문 — 운영 DB 의 에디터 HTML 을 그대로 렌더링합니다. */
.archive-view__body {
    overflow-x: auto;
    font-size: 14px;
    line-height: 24px;
    word-break: break-word;
}
.archive-view__body img,
.archive-view__body video,
.archive-view__body iframe { max-width: 100%; height: auto; }
.archive-view__body table { max-width: 100%; border-collapse: collapse; }

/* 이전 · 다음 글 */
.archive-nav {
    display: flex;
    flex-direction: column;
    margin: 0 20px;
    border-top: 1px solid #e8e8e8;
}
.archive-nav__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #e8e8e8;
}
.archive-nav__label {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    color: #8b8b8b;
}
.archive-nav__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    color: var(--color-text, #222);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}