/*
 * 충남아이키움포털 — 장난감·도서 대여 (ik_toy 스킨)
 * Figma: 메가파크 공유 문서 / 06 장난감·도서 대여 (키움노리 · 키움노리카)
 * 공용 토큰(--color-*)은 _layout/bootstrap/css/style.css 에 정의되어 있습니다.
 */

/* ============================================================
 * 상단 탭 — 1단 서비스 / 2단 카테고리
 * ============================================================ */
.tservice {
	position: sticky;
	top: var(--topbar-h);
	z-index: 21;
	background: #fff;
	border-bottom: 1px solid var(--color-border);
}

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

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

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

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

.tcats {
	position: sticky;
	top: calc(var(--topbar-h) + 60px);
	z-index: 20;
	background: #fafafa;
	border-bottom: 1px solid #e8e8e8;
}

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

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

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

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

/* ============================================================
 * 공용 — 안내 섹션 / 리스트 / 텍스트
 * ============================================================ */
.toy-page {
	background: #fff;
	display: flex;
	flex-direction: column;
	padding-bottom: 16px;
}

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

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

/* 육각형 불릿 (Figma: Polygon 1, 청록 외곽선) */
.toy-sec__title::before {
	content: "";
	width: 12px;
	height: 13px;
	flex: 0 0 auto;
	background: url('../img/bullet.svg') no-repeat center / contain;
}

.toy-sec__title.no-bullet::before { display: none; }

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

.toy-list {
	margin: 0;
	padding-left: 20px;
	list-style: disc;
}

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

.toy-list li.is-accent { color: #ec6101; opacity: 1; }
.toy-list li.is-warn { color: #ec6101; opacity: 1; font-weight: 700; }

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

.toy-sub {
	margin: 4px 0 0;
	font-weight: 700;
	font-size: 14px;
	line-height: 24px;
	color: var(--color-primary);
}

/* 대여 품목 스펙 카드 (수량·기간·예약·대여·반납) */
.toy-specs {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 24px;
}

.toy-spec {
	padding: 16px 20px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 28px;
	box-shadow: 0 0 6px rgba(0, 0, 0, .04);
}

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

.toy-spec dl { margin: 0; }

.toy-spec__row { display: flex; gap: 8px; font-size: 14px; line-height: 20px; }
.toy-spec__row + .toy-spec__row { margin-top: 4px; }

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

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

/* 라벨-값 행 (이용 기간 등) */
.toy-deflist { display: flex; flex-direction: column; }

.toy-def {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 24px;
}

.toy-def__label {
	font-weight: 700;
	font-size: 14px;
	line-height: 24px;
	color: var(--color-text);
}

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

/* 번호 스텝 (이용 방법 1·2·3) */
.toy-steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 20px;
}

.toy-step {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.toy-step__no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: 10px;
	background: rgba(0, 145, 132, .1);
	color: var(--color-primary);
	font-weight: 700;
	font-size: 16px;
}

.toy-step__body { padding-top: 4px; }

.toy-step__body p {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	line-height: 22px;
	color: var(--color-text);
	opacity: .8;
}

.toy-step__body p + p { margin-top: 4px; }

/* 카드형 스텝 (대여 품목 이용 방법 — Figma 742:7077) */
.toy-stepcards {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 20px;
}

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

.toy-stepcard__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;
}

/* 마지막 스텝 — 청록 단색 강조 */
.toy-stepcard__no--last { background: var(--color-primary); color: #fff; }

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

.toy-stepcard__body p { margin: 0; }

.toy-stepcard__t {
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: var(--color-text);
}

.toy-stepcard__d {
	font-weight: 500;
	font-size: 14px;
	line-height: 24px;
	color: var(--color-text);
	opacity: .6;
}

/* ============================================================
 * 표 (변상 기준 등)
 * ============================================================ */
.toy-table {
	margin: 8px 24px;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	overflow: hidden;
}

.toy-table__row {
	display: flex;
	border-top: 1px solid var(--color-border);
}

.toy-table__row:first-child { border-top: 0; }

.toy-table__row--head { background: #f6f6f6; }

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

.toy-table__cell--w {
	flex: 0 0 110px;
	border-left: 1px solid var(--color-border);
	text-align: center;
}

.toy-table__row--head .toy-table__cell { font-weight: 700; opacity: 1; }

/* 변상 기준 표 (2열 균등 · zebra · 가운데정렬, Figma 742:7474) */
.vartable {
	margin: 8px 24px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	overflow: hidden;
}

.vartable__row { display: flex; min-height: 52px; }
.vartable__row--head { min-height: 48px; }

.vartable__cell {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	background: #fff;
	text-align: center;
	font-weight: 500;
	font-size: 12px;
	line-height: 24px;
	color: var(--color-text);
	opacity: .8;
}

.vartable__cell + .vartable__cell { border-left: 1px solid var(--color-border); }

.vartable__row--head .vartable__cell { background: #f8f8f8; opacity: 1; }
.vartable__row--alt .vartable__cell { background: #fafafa; }

/* 규정(변상 금액) 셀 강조 */
.vartable__cell--r { font-weight: 700; font-size: 14px; opacity: 1; }

/* ============================================================
 * 품목 갤러리 (돌백일상 대여 품목)
 * ============================================================ */
.toy-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 8px 20px;
}

.toy-gallery--2 { grid-template-columns: repeat(2, 1fr); }

.toy-gallery__item { display: flex; flex-direction: column; gap: 8px; }

.toy-gallery__thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	background: #f0f0f0;
}

.toy-gallery__cap {
	margin: 0;
	font-weight: 600;
	font-size: 13px;
	line-height: 18px;
	color: var(--color-text);
	text-align: center;
}

.toy-gallery__cap small {
	display: block;
	font-weight: 500;
	font-size: 12px;
	color: var(--color-text);
	opacity: .55;
}

/* ============================================================
 * 이용 안내 / 신청하기 토글 (대여 품목)
 * ============================================================ */
.segment {
	display: flex;
	gap: 4px;
	margin: 16px 20px 8px;
	padding: 4px;
	background: #f0f0f0;
	border-radius: 16px;
}

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

.toy-pane { display: none; }
.toy-pane.is-active { display: block; }

/* 신청 안내 박스 (민트 그라데이션) */
.applybox {
	position: relative;
	margin: 8px 20px;
	padding: 16px 24px;
	border-radius: 28px;
	background: #eef8f8;
	overflow: hidden;
}

.applybox__deco {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 0;
	width: 200px;
	height: 153px;
	opacity: .2;
	pointer-events: none;
	background: url('../img/applybox-deco.svg') no-repeat right bottom / contain;
}

.applybox > *:not(.applybox__deco) { position: relative; z-index: 1; }

.applybox__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);
}

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

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

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

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

/* ============================================================
 * 달력 (신청 / 예약)
 * ============================================================ */
.toycal {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 20px 16px;
}

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

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

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

.toysel__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);
}

.toycal__grid {
	border: 1px solid var(--color-border);
	border-radius: 16px;
	padding: 8px 4px;
	background: #fff;
}

.toycal__row { display: grid; grid-template-columns: repeat(6, 1fr); }
.toycal__row--5 { grid-template-columns: repeat(5, 1fr); }
.toycal__row--6 { grid-template-columns: repeat(6, 1fr); }
.toycal__row--7 { grid-template-columns: repeat(7, 1fr); }

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

.toycal__dow.is-sun { color: #e8554e; opacity: .8; }

.toycal__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-height: 56px;
	padding: 8px 0;
}

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

.toycal__cell--muted .toycal__date { opacity: .25; }

.toycal__cell.is-selected {
	border: 2px solid var(--color-primary);
	border-radius: 12px;
	padding: 6px 0;
}

/* 신청 가능/마감 카운트 배지 */
.toycal__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 13px;
	line-height: 24px;
}

.toycal__badge--open { background: var(--color-primary); color: #fff; }
.toycal__badge--close { background: #ededed; color: var(--color-text); opacity: .45; }

.toycal__legend {
	display: flex;
	justify-content: center;
	gap: 16px;
	padding-top: 4px;
}

.toycal__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;
}

.toycal__legend-dot { width: 10px; height: 10px; border-radius: 3px; }
.toycal__legend-dot--open { background: var(--color-primary); }
.toycal__legend-dot--close { background: #d6d6d6; }

/* ============================================================
 * 신청 달력 (키움노리 대여 품목 — 날짜 색상 구분형, Figma 742:16182)
 * ============================================================ */
.dcal {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 8px 20px 16px;
}

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

.dcal__grid {
	border: 1px solid var(--color-border);
	border-radius: 20px;
	overflow: hidden;
}

.dcal__head { display: flex; background: #f8f8f8; }

.dcal__head span {
	flex: 1 0 0;
	min-width: 0;
	padding: 16px 8px;
	text-align: center;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: var(--color-text);
	opacity: .6;
}

.dcal__row { display: flex; background: #fff; }

.dcal__cell {
	flex: 1 0 0;
	min-width: 0;
	padding: 8px 8px 12px;
	text-align: center;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: var(--color-text);
	opacity: .3; /* 기본 = 예약 불가(당월) */
}

.dcal__cell--open { color: var(--color-primary); opacity: 1; }      /* 예약 가능 */
.dcal__cell--off { background: #f8f8f8; opacity: .2; }              /* 타월 */

.dcal__legend {
	display: flex;
	gap: 16px;
	justify-content: center;
}

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

.dcal__legend-sq { width: 8px; height: 8px; border-radius: 2px; }
.dcal__legend-sq--open { background: var(--color-primary); }
.dcal__legend-sq--close { background: #ececec; }

/* ============================================================
 * 선택 회차/슬롯 카드 (키움노리카 예약하기)
 * ============================================================ */
.toy-slotday {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px 4px;
}

.toy-slotday__badge {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 12px;
	border-radius: 10px;
	background: rgba(0, 145, 132, .12);
	color: var(--color-primary);
	font-weight: 700;
	font-size: 13px;
}

.toy-slotday__date {
	font-weight: 700;
	font-size: 18px;
	line-height: 24px;
	color: var(--color-text);
}

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

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

.toy-slot__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

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

.toy-slot__state {
	font-weight: 700;
	font-size: 13px;
	color: var(--color-text);
	opacity: .45;
}

.toy-slot__info { margin: 0; display: flex; flex-direction: column; gap: 4px; }

.toy-slot__row { display: flex; gap: 12px; font-size: 14px; line-height: 22px; }

.toy-slot__row dt {
	flex: 0 0 auto;
	width: 36px;
	font-weight: 700;
	color: var(--color-text);
	opacity: .45;
}

.toy-slot__row dd { margin: 0; font-weight: 500; color: var(--color-text); opacity: .85; }

/* ============================================================
 * 버튼
 * ============================================================ */
.toy-cta { padding: 16px 20px; }

.toy-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 60px;
	border-radius: 16px;
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
}

.toy-btn--primary { background: var(--color-primary); color: #fff; }
.toy-btn--ghost { background: #f6f6f6; color: var(--color-text); opacity: .8; }
.toy-btn--outline { background: #fff; border: 1.5px solid var(--color-primary); color: var(--color-primary); }
.toy-btn[disabled], .toy-btn.is-disabled { background: #f0f0f0; color: var(--color-text); opacity: .35; pointer-events: none; }

.toy-btn-row { display: flex; gap: 12px; padding: 16px 20px; }
.toy-btn-row .toy-btn { flex: 1 0 0; min-width: 0; }

/* ============================================================
 * 희망 장난감·도서 신청 — 목록 / 상세
 * ============================================================ */
.toy-wishlist { display: flex; flex-direction: column; }

.toy-wishitem {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 24px;
	border-top: 1px solid var(--color-border);
}

.toy-wishitem:first-child { border-top: 0; }

.toy-wishitem__cat {
	font-weight: 700;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-primary);
}

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

.toy-wishitem__meta {
	font-weight: 500;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-text);
	opacity: .45;
}

.toy-detail { padding: 8px 0; }

.toy-detail__cat {
	padding: 8px 24px 0;
	font-weight: 700;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-primary);
}

.toy-detail__title {
	margin: 0;
	padding: 4px 24px;
	font-weight: 700;
	font-size: 20px;
	line-height: 28px;
	color: var(--color-text);
}

.toy-detail__meta {
	padding: 0 24px 16px;
	font-weight: 500;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-text);
	opacity: .45;
	border-bottom: 1px solid var(--color-border);
}

.toy-detail__body {
	padding: 16px 24px;
	font-weight: 500;
	font-size: 14px;
	line-height: 24px;
	color: var(--color-text);
	opacity: .85;
	border-bottom: 1px solid var(--color-border);
}

.toy-detail__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--color-border);
}

.toy-detail__field-label {
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	color: var(--color-primary);
}

.toy-detail__field a { color: var(--color-text); opacity: .85; font-weight: 500; font-size: 14px; word-break: break-all; }
.toy-detail__field p { margin: 0; font-weight: 500; font-size: 14px; line-height: 22px; color: var(--color-text); opacity: .85; }

/* ============================================================
 * 대여/예약 내역 카드
 * ============================================================ */
.toy-resvlist { display: flex; flex-direction: column; padding: 8px 0; }

.toy-resv {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--color-border);
}

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

.toy-resv__state {
	font-weight: 700;
	font-size: 14px;
	line-height: 24px;
	color: var(--color-primary);
}

.toy-resv__state--done { color: var(--color-text); opacity: .4; }

.toy-resv__badge {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border-radius: 8px;
	background: rgba(0, 145, 132, .12);
	color: var(--color-primary);
	font-weight: 700;
	font-size: 12px;
}

.toy-resv__title {
	margin: 0;
	font-weight: 700;
	font-size: 18px;
	line-height: 26px;
	color: var(--color-text);
}

.toy-resv__code {
	font-weight: 500;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-text);
	opacity: .4;
}

.toy-resv__kind {
	font-weight: 500;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-text);
	opacity: .6;
}

.toy-resv__dates { margin: 4px 0 0; display: flex; flex-direction: column; gap: 2px; }

.toy-resv__row { display: flex; gap: 12px; font-size: 13px; line-height: 22px; }

.toy-resv__row dt { flex: 0 0 auto; width: 32px; font-weight: 700; color: var(--color-primary); }
.toy-resv__row dd { margin: 0; font-weight: 500; color: var(--color-text); opacity: .8; }

/* ============================================================
 * 회원 신청 — 회원 카드 목록
 * ============================================================ */
.toy-memberlist { display: flex; flex-direction: column; padding: 8px 0; }

.toy-membercard {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--color-border);
}

.toy-membercard__state {
	font-weight: 700;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-primary);
}

.toy-membercard__state--wait { color: var(--color-accent); }
.toy-membercard__state--done { color: var(--color-text); opacity: .4; }

.toy-membercard__name {
	margin: 0;
	font-weight: 700;
	font-size: 18px;
	line-height: 26px;
	color: var(--color-text);
}

.toy-membercard__date {
	font-weight: 500;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-text);
	opacity: .45;
}

.toy-membercard__rel {
	font-weight: 600;
	font-size: 14px;
	line-height: 22px;
	color: var(--color-primary);
}

.toy-membercard__rel span { color: var(--color-text); opacity: .8; font-weight: 500; }

/* 자녀 카드 (키움노리카 회원신청) */
.toy-childcard {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 16px 20px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 20px;
	box-shadow: 0 0 6px rgba(0, 0, 0, .04);
}

.toy-childcard__avatar {
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--color-primary);
}

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

.toy-childcard__info { display: flex; flex-direction: column; gap: 2px; }

.toy-childcard__row { font-size: 14px; line-height: 22px; }

.toy-childcard__row b { color: var(--color-primary); font-weight: 600; margin-right: 8px; }
.toy-childcard__row span { color: var(--color-text); opacity: .8; font-weight: 500; }

/* ============================================================
 * 회원 신청 폼
 * ============================================================ */
.toy-form {
	background: #fff;
	display: flex;
	flex-direction: column;
	padding: 8px 0 16px;
}

.toy-form__back {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px 8px;
}

.toy-form__back-ico {
	width: 9px;
	height: 9px;
	border-left: 2px solid var(--color-text);
	border-bottom: 2px solid var(--color-text);
	transform: rotate(45deg);
}

.toy-form__back-label { font-weight: 700; font-size: 16px; color: var(--color-text); }

.toy-form__group-title {
	padding: 16px 24px 8px;
	font-weight: 700;
	font-size: 18px;
	line-height: 24px;
	color: var(--color-text);
}

.fld {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px 24px;
}

.fld__label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 14px;
	line-height: 24px;
	color: var(--color-text);
}

.fld__label::before {
	content: "";
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 50%;
	background: var(--color-primary);
}

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

.fld__input {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex: 1 0 0;
	min-width: 0;
	height: 52px;
	padding: 14px 16px;
	border: 1px solid var(--color-border-strong);
	border-radius: 14px;
	background: #fff;
	font-weight: 500;
	font-size: 15px;
	line-height: 20px;
	color: var(--color-text);
}

.fld__input::placeholder { color: var(--color-text); opacity: .3; }
.fld__input:focus { outline: none; border-color: var(--color-primary); }
.fld__input.is-placeholder { color: var(--color-text); opacity: .35; }
.fld__input--sm { flex: 0 0 auto; width: auto; min-width: 0; }
.fld__input--select { cursor: pointer; }

.fld__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);
}

.fld__sep { flex: 0 0 auto; color: var(--color-text); opacity: .4; }

.fld textarea.fld__input { height: 120px; resize: none; align-items: flex-start; }

.fld__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 18px;
	border-radius: 14px;
	background: #f0f0f0;
	font-weight: 700;
	font-size: 14px;
	color: var(--color-text);
	opacity: .85;
}

/* 라디오 (있음/없음, 동의함 등) */
.radio-row { display: flex; align-items: center; gap: 24px;
    justify-content: flex-start;
}

.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

.radio__dot {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	border: 2px solid var(--color-border-strong);
	border-radius: 50%;
}

.radio.is-checked .radio__dot {
	border-color: var(--color-primary);
	background: radial-gradient(circle, var(--color-primary) 0 5px, #fff 6px);
}

.radio__label { font-weight: 500; font-size: 15px; line-height: 24px; color: var(--color-text); opacity: .85; }

/* 개인정보 동의 박스 */
.consent {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 8px 24px;
	padding: 16px;
	background: #f8f8f8;
	border-radius: 16px;
}

.consent__head {
	margin: 8px 0 0;
	font-weight: 700;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-text);
}

.consent__head:first-child { margin-top: 0; }

.consent__text {
	margin: 0;
	font-weight: 500;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-text);
	opacity: .65;
}

.consent__sub {
	margin: 8px 0 0;
	font-weight: 700;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-primary);
}

/* ============================================================
 * 키움노리카 소개 (06-2-1)
 * ============================================================ */
/* 상단 헤더 (좌측정렬 + 일러스트, Figma 742:8178) */
.toy-introhead {
	position: relative;
	min-height: 200px;
	padding: 24px 24px 32px;
	background: #eef8f8;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.toy-introhead__deco {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 0;
	width: 200px;
	height: 153px;
	opacity: .2;
	pointer-events: none;
	background: url('../img/applybox-deco.svg') no-repeat right bottom / contain;
}

.toy-introhead__title {
	position: relative;
	z-index: 1;
	margin: 0;
	font-weight: 800;
	font-size: 28px;
	line-height: 36px;
	color: var(--color-text);
}

.toy-introhead__desc {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 78%;
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	color: var(--color-text);
	opacity: .8;
}

/* 프로그램 아이콘 카드 (장난감·도서 등) */
.toy-iconcards {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 20px;
}

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

.toy-iconcard__ico {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.toy-iconcard__ico img { width: 24px; height: 24px; display: block; }

.toy-iconcard__label {
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	color: var(--color-text);
}

/* 이미지 갤러리 카드 (가족캠프·체험 등) */
.toy-gcards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 8px 20px;
}

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

.toy-gcard__img {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	background: #f0f0f0;
}

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

/* 검사 항목 (아이사랑플래너) — 들여쓴 제목 + 설명 */
.toy-exam { padding: 0 24px 0 36px; }
.toy-exam__t { margin: 0; font-weight: 700; font-size: 14px; line-height: 24px; color: var(--color-text); }
.toy-exam__d { margin: 0; font-weight: 500; font-size: 14px; line-height: 24px; color: var(--color-text); opacity: .8; }

/* ============================================================
 * (구) 키움노리카 소개 — 히어로 / 카드 (미사용)
 * ============================================================ */
.toy-hero {
	margin: 16px 20px;
	padding: 28px 24px;
	border-radius: 24px;
	background: linear-gradient(160deg, #d8f3ee 0%, #b8ecf6 100%);
	text-align: center;
}

.toy-hero__badge {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 14px;
	border-radius: 14px;
	background: #fff;
	color: var(--color-primary);
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 12px;
}

.toy-hero__title {
	margin: 0 0 8px;
	font-weight: 800;
	font-size: 24px;
	line-height: 1.35;
	color: var(--color-text-deep);
	letter-spacing: -.02em;
}

.toy-hero__desc {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	line-height: 22px;
	color: var(--color-text-deep);
	opacity: .85;
}

.toy-featgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 8px 20px;
}

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

.toy-feat__ico {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: rgba(0, 145, 132, .1);
}

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

.toy-feat__desc { margin: 0; font-weight: 500; font-size: 13px; line-height: 20px; color: var(--color-text); opacity: .6; }

/* ============================================================
 * 대여 검색 (키움노리카)
 * ============================================================ */
.toy-search { padding: 16px 20px 8px; }

.srchbox__ico { position: relative; width: 18px; height: 18px; flex: 0 0 auto; }

.srchbox__ico::before {
	content: "";
	position: absolute;
	left: 0; top: 0;
	width: 13px; height: 13px;
	border: 2px solid var(--color-text);
	border-radius: 50%;
	opacity: .55;
}

.srchbox__ico::after {
	content: "";
	position: absolute;
	right: 0; bottom: 0;
	width: 7px; height: 2px;
	background: var(--color-text);
	transform: rotate(45deg);
	transform-origin: right;
	opacity: .55;
}

.toy-result-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 24px 4px;
}

.toy-result-head__count { font-weight: 700; font-size: 15px; color: var(--color-text); }
.toy-result-head__count strong { color: var(--color-primary); }

.toy-result { display: flex; flex-direction: column; }

.toy-result__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 24px;
	border-top: 1px solid var(--color-border);
}

.toy-result__thumb {
	width: 72px;
	height: 72px;
	flex: 0 0 auto;
	border-radius: 14px;
	background: #f0f0f0;
}

.toy-result__body { flex: 1 0 0; min-width: 0; }

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

.toy-result__code { font-weight: 500; font-size: 13px; line-height: 20px; color: var(--color-text); opacity: .4; }

.toy-result__state {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 12px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 13px;
}

.toy-result__state--ok { background: rgba(0, 145, 132, .12); color: var(--color-primary); }
.toy-result__state--out { background: #f0f0f0; color: var(--color-text); opacity: .5; }

/* 상품 그리드 (2열 카드) — 대여 검색 / 장난감·도서 목록 공용 */
.toy-prodgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 8px 20px;
}

.toy-prod {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 8px 12px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 24px;
}

.toy-prod__thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	background: #f8f8f8;
}

.toy-prod__badge {
	position: absolute;
	left: 8px;
	top: 8px;
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 12px;
	border-radius: 12px;
	background: rgba(40, 40, 40, .7);
	color: #fff;
	font-weight: 700;
	font-size: 12px;
}

/* 상태별 배지 — 목록 그리드는 모두 다크 오버레이 (Figma) */
.toy-prod__badge--ok,
.toy-prod__badge--out { background: rgba(40, 40, 40, .7); color: #fff; }

.toy-prod__name {
	margin: 0;
	padding: 0 8px;
	min-height: 40px;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: var(--color-text);
	opacity: .8;
	text-align: center;
}

/* ============================================================
 * 상품 상세 (장난감·도서 — 06-1-2-2)
 * ============================================================ */
.toy-pdimg {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #f0f0f0;
}

.toy-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 0;
}

.toy-dots span {
	width: 8px;
	height: 8px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1.5px solid rgba(40, 40, 40, .3);
	background: transparent;
}

/* 현재 위치(채워진 점) — Figma: #282828 30% */
.toy-dots span.is-active { border: 0; background: rgba(40, 40, 40, .3); }

.toy-pdhead {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 8px 24px;
}

.toy-pdhead__badge {
	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: 12px;
}

.toy-pdhead__badge--out { background: rgba(40, 40, 40, .55); }

.toy-pdhead__title {
	margin: 0;
	font-weight: 700;
	font-size: 20px;
	line-height: 32px;
	color: var(--color-text);
}

/* 상세 스펙 표 (라벨 | 값) */
.toy-spectable {
	margin: 8px 20px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	overflow: hidden;
}

.toy-spectable__row { display: flex; }

.toy-spectable__th {
	flex: 0 0 92px;
	padding: 8px 12px;
	background: #f8f8f8;
	border-bottom: 1px solid #e8e8e8;
	font-weight: 500;
	font-size: 12px;
	line-height: 24px;
	color: var(--color-text);
	opacity: .6;
}

.toy-spectable__td {
	flex: 1 0 0;
	min-width: 0;
	padding: 8px 12px;
	background: #fff;
	border-bottom: 1px solid var(--color-border);
	font-weight: 500;
	font-size: 12px;
	line-height: 20px;
	color: var(--color-text);
	opacity: .8;
}

.toy-spectable__row:last-child .toy-spectable__th,
.toy-spectable__row:last-child .toy-spectable__td { border-bottom: 0; }

/* ============================================================
 * 모달 (반납 예정 알림 — 키움노리카 내역)
 * ============================================================ */
.toy-modal {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(40, 40, 40, .45);
}

.toy-modal.is-open { display: flex; }

.toy-modal__panel {
	width: 100%;
	max-width: 360px;
	padding: 28px 24px 20px;
	background: #fff;
	border-radius: 24px;
	text-align: center;
}

.toy-modal__ico {
	width: 44px;
	height: 44px;
	margin: 0 auto 12px;
	border-radius: 14px;
	background: rgba(0, 145, 132, .1);
}

.toy-modal__title {
	margin: 0 0 8px;
	font-weight: 700;
	font-size: 18px;
	line-height: 26px;
	color: var(--color-primary);
}

.toy-modal__text {
	margin: 0 0 20px;
	font-weight: 500;
	font-size: 14px;
	line-height: 22px;
	color: var(--color-text);
	opacity: .8;
}

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

/* 빈 상태 */
.toy-empty {
	padding: 48px 24px;
	text-align: center;
	font-weight: 500;
	font-size: 14px;
	line-height: 22px;
	color: var(--color-text);
	opacity: .45;
}

/* ============================================================
 * API 연동 화면에서 쓰는 보조 스타일
 * (목록·달력·신청서를 JS 가 채우면서 필요해진 것들입니다)
 * ============================================================ */

/* 썸네일 이미지 — 배경으로 깔아 비율을 유지합니다. */
.toy-prod__thumb--img,
.toy-pdimg--img {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* 그리드·리스트 안의 로딩·빈 상태는 한 줄을 다 씁니다. */
.toy-prodgrid .ik-state,
.toy-wishlist .ik-state,
.toy-resvlist .ik-state,
.toy-memberlist .ik-state,
.toy-slots .ik-state,
.toy-picker__list .ik-state {
	grid-column: 1 / -1;
	width: 100%;
	padding: 32px 0;
	text-align: center;
}

/* 안내 문구 (로그인 필요 · 회원 신청 필요 등) */
.toy-guard {
	margin: 8px 20px;
	padding: 20px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	background: #fafafa;
	font-weight: 500;
	font-size: 14px;
	line-height: 22px;
	color: var(--color-text);
	text-align: center;
}

.toy-guard strong { display: block; margin-bottom: 8px; font-weight: 700; }
.toy-guard a { color: var(--color-primary); font-weight: 700; text-decoration: underline; }

/* 대여/예약 내역 — 구역 제목 */
.toy-secttl {
	margin: 16px 20px 4px;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: var(--color-text);
}

/* 예약 카드의 버튼 줄 */
.toy-resv__btns {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.toy-resv__btns .toy-btn { flex: 1 1 0; height: 44px; font-size: 14px; }

/* 키움노리카 운행 일정 목록 */
.toy-slots {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 20px;
}

/* 상품 선택기 (키움노리 예약 품목 · 키움노리카 예약) */
.toy-picker {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 20px;
}

.toy-picker__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.toy-picker__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px 8px 12px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 20px;
	cursor: pointer;
	text-align: left;
}

.toy-picker__item.is-selected { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary) inset; }
.toy-picker__item[disabled] { opacity: .45; cursor: default; }

.toy-picker__thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 14px;
	background: #f8f8f8 no-repeat center / cover;
}

.toy-picker__name {
	margin: 0;
	font-weight: 600;
	font-size: 13px;
	line-height: 18px;
	color: var(--color-text);
}

.toy-picker__meta {
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-text);
	opacity: .6;
}

/* 남은 예약 수량 표 (키움노리카) */
.toy-quota {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin: 8px 20px;
	padding: 16px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	background: #fafafa;
}

.toy-quota__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 500;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-text);
}

.toy-quota__row b { font-weight: 700; }

/* 선택한 상품 목록 */
.toy-picked {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 8px 20px;
}

.toy-picked__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 16px;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	background: #fff;
	font-weight: 500;
	font-size: 13px;
	line-height: 20px;
}

.toy-picked__del {
	flex: 0 0 auto;
	padding: 4px 10px;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	font-size: 12px;
	color: var(--color-text);
	opacity: .7;
}

/* 폼 입력 — 퍼블리싱의 .fld__input 을 실제 입력 요소로 씁니다. */
input.fld__input,
textarea.fld__input,
select.fld__input {
	width: 100%;
	font: inherit;
	color: var(--color-text);
	background: #fff;
}

textarea.fld__input { height: 120px; padding: 12px 16px; resize: vertical; }

.fld__error {
	margin-top: 6px;
	font-weight: 500;
	font-size: 12px;
	line-height: 18px;
	color: #d64545;
}

/* 파일 첨부 줄 */
.fld__file { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.fld__file input[type="file"] { font-size: 13px; }

/* 연·월 선택 드롭다운 (toysel) — 열두달 놀이터 plsel 과 같은 구조입니다. */
.toysel__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 16px;
	background: #fff;
	border: 2px solid var(--color-border);
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}

.toysel.is-open .toysel__menu { display: block; }

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

.toysel__option.is-selected { opacity: 1; }

/* 달력 칸 — 신청 가능한 날짜는 눌러서 신청서로 넘어갑니다. */
.dcal__cell--open { cursor: pointer; }
.dcal__cell--holiday { color: #d64545; }

.dcal__cell small {
	display: block;
	font-weight: 500;
	font-size: 10px;
	line-height: 14px;
}

/* 사진이 들어간 썸네일 — 비율을 유지하며 칸을 채웁니다. */
img.toy-gallery__thumb,
img.toy-gcard__img {
	display: block;
	object-fit: cover;
}