/*
 * 충남아이키움포털 — 365x24 어린이집 (ik_care 스킨)
 * Figma: 메가파크 공유 문서 / 07 365x24 어린이집
 * 공용 토큰(--color-*)은 _layout/bootstrap/css/style.css 에 정의되어 있습니다.
 */

/* ============================================================
 * 상단 탭 (365x24 보육 안내 · 예약 및 회원 관리 · 제공 기관 관리)
 * ============================================================ */
.ctabs {
	position: sticky;
	top: var(--topbar-h);
	z-index: 21;
	background: #fff;
	border-bottom: 1px solid var(--color-border);
}

.ctabs__scroll {
	display: flex;
	align-items: center;
	gap: 28px;
	height: 60px;
	padding: 0 24px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ctabs__scroll::-webkit-scrollbar { display: none; }

.ctabs__item {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: var(--color-text);
	opacity: .3;
	white-space: nowrap;
}

.ctabs__item.is-active { opacity: 1; }

/* 이용 조회 — 2단 서브 탭 */
.csubs {
	position: sticky;
	top: calc(var(--topbar-h) + 60px);
	z-index: 20;
	background: var(--color-submenu-bg);
	border-bottom: 1px solid #e8e8e8;
}

.csubs__scroll {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 56px;
	padding: 0 24px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.csubs__scroll::-webkit-scrollbar { display: none; }

.csubs__item {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: 15px;
	line-height: 24px;
	color: var(--color-text);
	opacity: .3;
	white-space: nowrap;
}

.csubs__item.is-active { opacity: 1; color: var(--color-primary); }

/* ============================================================
 * 페이지 골격
 * ============================================================ */
.care-page {
	background: #fff;
	display: flex;
	flex-direction: column;
	padding-bottom: 16px;
}

/* ============================================================
 * 인트로 카드 (청록 배경 + 데코 일러스트)
 * ============================================================ */
.care-intro {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 20px;
	padding: 20px 24px;
	background: #eef8f8;
	border-radius: 28px;
}

.care-intro__block { position: relative; z-index: 1; }

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

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

.care-intro__text {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	line-height: 24px;
	color: var(--color-text);
}

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

/* ============================================================
 * 섹션 (이용 안내 / 신청 방법)
 * ============================================================ */
.care-h2 {
	margin: 0;
	padding: 8px 24px;
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	color: var(--color-text);
}

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

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

/* 육각형 불릿 */
.care-sec__title::before {
	content: "";
	width: 12px;
	height: 13px;
	flex: 0 0 auto;
	background: url('../img/bullet.svg') no-repeat center / contain;
}

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

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

.care-list li + li { margin-top: 0; }

.care-list--muted li { opacity: .6; }

/* 인라인 강조 (청록) */
.care-em {
	font-style: normal;
	font-weight: 700;
	color: var(--color-primary);
}

/* ============================================================
 * 접수 시간 카드
 * ============================================================ */
.care-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.care-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 28px;
	box-shadow: var(--shadow-card);
}

.care-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.care-card__badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 12px;
	border-radius: 12px;
	background: var(--color-primary);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	line-height: 24px;
	white-space: nowrap;
}

.care-card__time {
	font-weight: 700;
	font-size: 18px;
	line-height: 20px;
	color: var(--color-text);
}

.care-card__rows {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0 4px;
}

.care-card__row {
	display: flex;
	gap: 8px;
	font-size: 14px;
	line-height: 20px;
}

.care-card__row dt {
	flex: 0 0 auto;
	font-weight: 500;
	color: var(--color-primary);
}

.care-card__row dd {
	margin: 0;
	font-weight: 500;
	color: var(--color-text);
	opacity: .5;
}

.care-card__row dd.is-warn {
	font-weight: 700;
	color: #ec6101;
	opacity: 1;
}

/* ============================================================
 * 벌점내역 표
 * ============================================================ */
.care-table {
	border: 1px solid var(--color-border);
	border-radius: 16px;
	overflow: hidden;
}

.care-table__row {
	display: flex;
	align-items: center;
	min-height: 52px;
}

.care-table__row:nth-child(even) { background: #fafafa; }

.care-table__row--head {
	min-height: 48px;
	background: #f8f8f8;
}

.care-table__cell {
	flex: 1 0 0;
	min-width: 0;
	padding: 8px 16px;
	font-weight: 500;
	font-size: 12px;
	line-height: 24px;
	color: var(--color-text);
	opacity: .8;
}

.care-table__row--head .care-table__cell {
	font-size: 14px;
	opacity: 1;
}

.care-table__cell--val {
	flex: 0 0 100px;
	text-align: right;
	font-size: 14px;
	opacity: 1;
}

/* ============================================================
 * 준비 중 화면
 * ============================================================ */
.care-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 80px 24px;
	text-align: center;
}

.care-empty__title {
	margin: 0;
	font-weight: 700;
	font-size: 18px;
	line-height: 24px;
	color: var(--color-text);
}

.care-empty__text {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	line-height: 24px;
	color: var(--color-text);
	opacity: .5;
}

/* ============================================================
 * 안내 콜아웃 (청록 카드 — 제목 + 본문 블록)
 * ============================================================ */
.care-callout {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 20px;
	padding: 16px 24px;
	background: #eef8f8;
	border-radius: 28px;
}

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

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

.care-callout__block { position: relative; z-index: 1; padding: 8px 0; }

.care-callout__sub {
	margin: 0 0 4px;
	font-weight: 700;
	font-size: 14px;
	line-height: 24px;
	color: var(--color-text);
}

.care-callout__text {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	line-height: 24px;
	color: var(--color-text);
}

.care-callout__note {
	margin: 0;
	font-weight: 500;
	font-size: 12px;
	line-height: 20px;
	color: var(--color-text);
	opacity: .8;
}

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

/* ============================================================
 * 리스트 카드 (신청자 / 기관 / 예약 등)
 * ============================================================ */
.care-cardlist {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 8px 20px;
}

.care-listcard {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 28px;
	box-shadow: var(--shadow-card);
}

.care-listcard__head {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

/* 아바타 (청록 라운드 + 아이콘) */
.care-avatar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 16px;
	background: var(--color-primary);
	color: #fff;
}

.care-avatar img { width: 24px; height: 24px; }

.care-listcard__body { flex: 1 0 0; min-width: 0; }

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

.care-listcard__desc {
	margin: 2px 0 0;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: var(--color-text);
	opacity: .5;
}

/* 라벨-값 행 (관계/상태/주소/전화 …) */
.care-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 8px 0 0;
}

.care-meta__row { display: flex; gap: 8px; font-size: 14px; line-height: 20px; }

.care-meta__row dt {
	flex: 0 0 auto;
	min-width: 36px;
	font-weight: 500;
	color: var(--color-primary);
}

.care-meta__row dd {
	margin: 0;
	font-weight: 500;
	color: var(--color-text);
	opacity: .5;
}

/* 태그 (국공립 등) */
.care-tag {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 8px;
	background: rgba(0, 145, 132, .1);
	color: var(--color-primary);
	font-weight: 700;
	font-size: 12px;
	line-height: 24px;
	white-space: nowrap;
}

/* 상태 배지 */
.care-state {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 13px;
	line-height: 24px;
	white-space: nowrap;
}

.care-state--done { background: rgba(0, 145, 132, .1); color: var(--color-primary); }
.care-state--cancel { background: rgba(236, 97, 1, .1); color: #ec6101; }
.care-state--wait { background: rgba(40, 40, 40, .08); color: var(--color-text); }
.care-state--penalty { background: rgba(183, 100, 163, .12); color: #b764a3; }

/* 시설 사진 배너 (정사각 플레이스홀더) */
.care-photo {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #f2f4f4 url('../img/ico-building.svg') no-repeat center / 64px;
	border-bottom: 1px solid var(--color-border);
}

/* 건수/합계 요약 행 */
.care-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 24px;
	font-weight: 700;
	font-size: 14px;
	color: var(--color-text);
}

.care-summary__total { color: var(--color-primary); }

/* ============================================================
 * 버튼
 * ============================================================ */
.care-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	padding: 16px;
	border: 0;
	border-radius: 16px;
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
	cursor: pointer;
}

.care-btn--primary { background: var(--color-primary); color: #fff; }
.care-btn--outline { background: #fff; border: 1px solid var(--color-primary); color: var(--color-primary); }
.care-btn--ghost { background: #f4f4f4; color: var(--color-text); }
.care-btn[disabled], .care-btn.is-disabled { background: #e8e8e8; color: #aaa; pointer-events: none; }

/* 본문 폭에 맞춘 버튼 영역 */
.care-btnbar { padding: 16px 20px; }
.care-btnbar .care-btn { width: 100%; }

/* 2개 버튼 가로 배치 (취소 / 신청하기 등) */
.care-btnbar--row { display: flex; gap: 8px; }
.care-btnbar--row .care-btn { flex: 1 0 0; min-width: 0; }

/* 작은 액션 버튼 (카드 우측 시설안내/신청하기) */
.care-actions { display: flex; gap: 8px; }

.care-btn-sm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 14px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 13px;
	line-height: 24px;
	white-space: nowrap;
	cursor: pointer;
}

.care-btn-sm--primary { background: var(--color-primary); color: #fff; border: 0; }
.care-btn-sm--outline { background: #fff; border: 1px solid var(--color-border-strong); color: var(--color-text); }

/* ============================================================
 * 어린이집 목록 (이용 조회 — 보육 신청)
 * ============================================================ */
.care-filters {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
}

.care-filters--between { justify-content: space-between; }

.care-select {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	height: 44px;
	padding: 0 16px;
	background: #fff;
	border: 1px solid var(--color-border-strong);
	border-radius: 12px;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-text);
	white-space: nowrap;
}

.care-select::after {
	content: "";
	width: 10px;
	height: 6px;
	flex: 0 0 auto;
	background: url('../img/chevron-down.svg') no-repeat center / contain;
}

.care-link {
	font-weight: 700;
	font-size: 14px;
	color: var(--color-primary);
	white-space: nowrap;
}

.care-centers { display: flex; flex-direction: column; }

.care-center {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--color-border);
}

.care-center__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: rgba(0, 145, 132, .1);
}

.care-center__icon img { width: 24px; height: 24px; }

.care-center__body { flex: 1 0 0; min-width: 0; }

.care-center__name {
	margin: 0;
	font-weight: 700;
	font-size: 15px;
	line-height: 22px;
	color: var(--color-text);
}

.care-center__cat {
	margin: 2px 0 0;
	font-weight: 500;
	font-size: 13px;
	line-height: 18px;
	color: var(--color-text);
	opacity: .5;
}

/* ============================================================
 * 폼 (회원/기관 신청 등록, 신청하기)
 * ============================================================ */
.care-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 16px 24px;
}

.care-field { display: flex; flex-direction: column; gap: 8px; }

.care-field__label {
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	color: var(--color-text);
}

.care-field__label .req { color: #ec6101; margin-left: 2px; }

.care-input,
.care-textarea,
.care-field select {
	width: 100%;
	min-height: 52px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--color-border-strong);
	border-radius: 12px;
	font-weight: 500;
	font-size: 14px;
	line-height: 24px;
	color: var(--color-text);
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.care-input::placeholder,
.care-textarea::placeholder { color: #aaa; }

.care-textarea { min-height: 120px; resize: vertical; }

.care-field select {
	background: #fff url('../img/chevron-down.svg') no-repeat right 16px center / 10px 6px;
	padding-right: 40px;
}

.care-field__row { display: flex; gap: 8px; }
.care-field__row > * { flex: 1 0 0; min-width: 0; }

.care-field__hint {
	font-weight: 500;
	font-size: 12px;
	line-height: 18px;
	color: var(--color-text);
	opacity: .5;
}

/* 라디오 / 체크 묶음 */
.care-choices { display: flex; flex-wrap: wrap; gap: 8px; }

.care-choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	background: #fff;
	border: 1px solid var(--color-border-strong);
	border-radius: 12px;
	font-weight: 500;
	font-size: 14px;
	color: var(--color-text);
	cursor: pointer;
}

.care-choice input { accent-color: var(--color-primary); }
.care-choice.is-active { border-color: var(--color-primary); color: var(--color-primary); font-weight: 700; }

/* ============================================================
 * 데이터 표 (이용시간 / 벌점 조회 등 — 다열)
 * ============================================================ */
.care-grid {
	margin: 8px 24px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	overflow: hidden;
}

.care-grid__row { display: flex; align-items: center; min-height: 52px; }
.care-grid__row:nth-child(even) { background: #fafafa; }
.care-grid__row--head { min-height: 48px; background: #f8f8f8; }

.care-grid__cell {
	flex: 1 0 0;
	min-width: 0;
	padding: 8px 16px;
	font-weight: 500;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-text);
	opacity: .8;
}

.care-grid__row--head .care-grid__cell { font-weight: 700; font-size: 13px; opacity: 1; }
.care-grid__cell--num { flex: 0 0 80px; text-align: right; }
.care-grid__cell--center { text-align: center; }

/* ============================================================
 * 상세 보기 (신청자 / 보육 신청 상세)
 * ============================================================ */
.care-detail { display: flex; flex-direction: column; }

.care-defrow {
	display: flex;
	gap: 12px;
	padding: 12px 24px;
	border-bottom: 1px solid var(--color-border);
}

.care-defrow__label {
	flex: 0 0 96px;
	font-weight: 700;
	font-size: 14px;
	line-height: 24px;
	color: var(--color-text);
}

.care-defrow__value {
	flex: 1 0 0;
	min-width: 0;
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	line-height: 24px;
	color: var(--color-text);
	opacity: .8;
}

/* ============================================================
 * 페이지네이션
 * ============================================================ */
.care-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 20px;
}

.care-pager a,
.care-pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 6px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	color: var(--color-text);
	opacity: .5;
}

.care-pager .is-active { background: var(--color-primary); color: #fff; opacity: 1; }

/* ============================================================
 * 폼 보조 — 오류 문구 · 단위 표기 · 선택 불가 항목
 * ============================================================ */
.care-error {
	margin: 0 24px;
	padding: 12px 16px;
	background: rgba(236, 97, 1, .08);
	border-radius: 12px;
	font-weight: 500;
	font-size: 13px;
	line-height: 20px;
	color: #ec6101;
}

/* 면적(㎡) 처럼 입력 칸 오른쪽에 단위를 붙일 때 */
.care-input-unit { position: relative; }
.care-input-unit .care-input { padding-right: 44px; }

.care-input-unit__suffix {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	font-weight: 500;
	font-size: 14px;
	color: var(--color-text);
	opacity: .5;
	pointer-events: none;
}

/* 고를 수 없는 자녀·시간대 */
.care-choice.is-disabled { background: #f4f4f4; color: #aaa; cursor: default; }
.care-choice.is-disabled input { pointer-events: none; }

/* 정원이 찬 시간대 — 신청하면 대기자로 등록됩니다. */
.care-grid__row.is-full { background: #fff4f6; }
.care-grid__row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--color-primary); }

/* ============================================================
 * 시설 사진 목록 (보육 신청 상세)
 * ============================================================ */
.care-photos {
	display: flex;
	gap: 12px;
	padding: 0 24px 8px;
	overflow-x: auto;
	scrollbar-width: none;
}

.care-photos::-webkit-scrollbar { display: none; }

.care-photos__item {
	flex: 0 0 200px;
	margin: 0;
}

.care-photos__item img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	border-radius: 12px;
	background: #f4f4f4;
}

.care-photos__item figcaption {
	margin-top: 6px;
	font-weight: 500;
	font-size: 12px;
	line-height: 18px;
	color: var(--color-text);
	opacity: .6;
}

/* 대표 사진이 없을 때도 자리를 지킵니다. */
.care-photo { background-size: cover; background-position: center; }

/* ============================================================
 * 필터 영역의 입력 칸 (기간 · 연월 · 지역 선택)
 * ============================================================ */
.care-filters .care-input {
	flex: 1 0 0;
	min-width: 0;
	min-height: 44px;
	padding: 10px 14px;
	font-size: 14px;
}

.care-filters select.care-input {
	background: #fff url('../img/chevron-down.svg') no-repeat right 14px center / 10px 6px;
	padding-right: 36px;
}

.care-filters__sep { flex: 0 0 auto; opacity: .5; }

/* ============================================================
   기관(제공기관) 화면 — 07-5 · 07-6
   ============================================================ */

/* 뒤로가기 헤더 ("‹ 교사 등록") */
.care-backhead {
	padding: 8px 20px 4px;
	background: #fff;
}

.care-backhead__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	color: var(--color-text);
	text-decoration: none;
}

.care-backhead__ico {
	flex: 0 0 auto;
	width: 8px;
	height: 14px;
	background: url('../img/ico-chevron-left.svg') no-repeat center / contain;
}

.care-backhead__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
}

/* 검색 상자 */
.care-search {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 20px 12px;
	padding: 0 16px;
	border: 1px solid var(--color-border);
	border-radius: 24px;
	background: #fff;
}

.care-search__input {
	flex: 1 0 0;
	min-width: 0;
	height: 48px;
	border: 0;
	background: transparent;
	font-size: 15px;
	color: var(--color-text);
}

.care-search__input:focus { outline: none; }
.care-search__input::placeholder { color: #aaa; }

.care-search__btn {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border: 0;
	padding: 0;
	background: url('../img/ico-search.svg') no-repeat center / 20px 20px;
	cursor: pointer;
}

/* 엑셀 다운로드 링크 */
.care-link--down {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.care-link--down::after {
	content: '';
	width: 14px;
	height: 14px;
	background: url('../img/ico-down.svg') no-repeat center / contain;
}

.care-hidden-form { display: none; }

/* 체크박스가 붙은 목록 카드 */
.care-listcard--check .care-listcard__head { align-items: flex-start; }

.care-check {
	flex: 0 0 auto;
	display: inline-flex;
	width: 20px;
	height: 20px;
	margin-top: 2px;
}

.care-check input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--color-primary);
}

.care-check--off { opacity: .25; border: 1.5px solid var(--color-border-strong); border-radius: 4px; }

/* 하단 상태 변경 바 */
.care-page--actionbar { padding-bottom: 132px; }

.care-actionbar {
	position: fixed;
	left: 50%;
	bottom: var(--bnb-h, 92px);
	z-index: 20;
	transform: translateX(-50%);
	width: 100%;
	max-width: 440px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 12px 20px 16px;
	border-radius: 16px 16px 0 0;
	background: #fff;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
}

.care-actionbar__btn {
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-primary);
	border-radius: 8px;
	background: #fff;
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.care-actionbar__btn[disabled] { opacity: .5; cursor: default; }

/* 한 줄 목록 (대리 등록 회원 검색) */
.care-rowlist { display: flex; flex-direction: column; }

.care-rowcard {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 20px;
	border-bottom: 1px solid var(--color-border);
}

.care-rowcard__body { flex: 1 0 0; min-width: 0; }

/* 작은 관리 버튼 (교사·휴일 카드 우측) */
.care-pill {
	flex: 0 0 auto;
	height: 28px;
	padding: 0 12px;
	border: 0;
	border-radius: 14px;
	background: #f0f0f0;
	color: var(--color-text);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.care-pill[disabled] { opacity: .5; cursor: default; }

/* 첨부 목록 */
.care-files { margin: 8px 0 0; padding: 0; list-style: none; }

.care-files li + li { margin-top: 4px; }

.care-files a { font-size: 13px; color: var(--color-primary); text-decoration: underline; }

/* 파일 업로드 칸 */
.care-file {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 52px;
	padding: 0 8px 0 16px;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background: #fff;
}

.care-file__name {
	flex: 1 0 0;
	min-width: 0;
	font-size: 15px;
	color: #aaa;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.care-file__name.is-filled { color: var(--color-text); }

.care-file__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 36px;
	padding: 0 12px;
	border-radius: 8px;
	background: #f4f4f4;
	font-size: 14px;
	cursor: pointer;
}

.care-file__btn::before {
	content: '';
	width: 16px;
	height: 16px;
	background: url('../img/ico-upload.svg') no-repeat center / contain;
}

/* 아이디 검색이 붙은 입력 줄 */
.care-field__row--btn { align-items: center; }
.care-field__row--btn .care-btn-sm { flex: 0 0 auto; height: 52px; white-space: nowrap; }

.care-field__hint.is-error { color: #ec6101; }

/* 이수 여부처럼 라디오 사이에 날짜가 끼는 묶음 */
.care-choices--date { align-items: center; }
.care-choices--date .care-input { flex: 1 0 140px; height: 44px; }

/* 벌점 합계 */
.care-em--penalty { color: #b764a3; }

/* 반 아이콘 색 (주중·주말) */
.care-avatar--weekend { background: #7cb342; }

/* ============================================================
   예약 스케줄 (07-5-2)
   ============================================================ */

.care-weeknav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 20px 16px;
}

.care-weeknav__btn {
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: var(--color-primary) url('../img/ico-chevron-left-w.svg') no-repeat center / 8px 14px;
	cursor: pointer;
}

.care-weeknav__btn--next { transform: rotate(180deg); }

.care-weeknav__btn[disabled] { opacity: .3; cursor: default; }

.care-weeknav__label { font-size: 16px; font-weight: 700; }

.care-gantt { padding: 0 0 16px; }

.care-gantt__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.care-gantt__table {
	min-width: 720px;
	border-top: 1px solid var(--color-border);
}

.care-gantt__row {
	display: flex;
	align-items: stretch;
	min-height: 46px;
	border-bottom: 1px solid var(--color-border);
}

.care-gantt__row--head { min-height: 36px; background: #f8f8f8; }

.care-gantt__row.is-active { background: rgba(0, 145, 132, .06); }

.care-gantt__label {
	flex: 0 0 76px;
	display: flex;
	align-items: center;
	padding: 0 8px;
	font-size: 13px;
	font-weight: 600;
	background: inherit;
}

.care-gantt__row--head .care-gantt__label { background: #f8f8f8; }

.care-gantt__cell {
	flex: 1 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: #999;
}

.care-gantt__track {
	position: relative;
	flex: 1 0 0;
	min-width: 0;
	margin: 6px 0;
	background:
		repeating-linear-gradient(to right, var(--color-border) 0 1px, transparent 1px calc(100% / 24));
}

.care-gantt__bar {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	padding: 0 8px;
	border-radius: 4px;
	background: rgba(0, 145, 132, .3);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
}

.care-gantt__bar.is-strong { background: var(--color-primary); }

.care-gantt__bar--solid { color: #fff; }

.care-gantt__table--day { min-width: 720px; }

.care-gantt__tick {
	position: absolute;
	top: 0;
	font-size: 12px;
	color: #999;
	transform: translateX(2px);
}

.care-gantt__table--day .care-gantt__row--head { background: transparent; min-height: 24px; }
.care-gantt__table--day .care-gantt__row { border-bottom: 0; min-height: 44px; }

/* ============================================================
   월별 실적 표 (07-5-5)
   ============================================================ */

.care-xscroll {
	margin: 0 20px 20px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background: #fff;
}

.care-stat {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 13px;
}

.care-stat th,
.care-stat td {
	padding: 10px 8px;
	border-right: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	text-align: center;
	white-space: nowrap;
}

.care-stat th { background: #f8f8f8; font-weight: 700; }

.care-stat tr:last-child th,
.care-stat tr:last-child td { border-bottom: 0; }

.care-stat th:last-child,
.care-stat td:last-child { border-right: 0; }