/* 테이블 */
@import "../table/_table";

/* 폼 입력 */
@import "../form/_input-text";

/* 상세 페이지 */
@import "_detail";

/* 탭 영역 */
.type-select-area {
	display: flex; gap: 0; padding-top: 10px;
	.item {
		flex: 1; border: 1px solid var(--line); border-radius: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; background: #fff;
		& + .item {
			margin-left: -1px;
		}
		&:first-child {
			border-radius: 5px 0 0 5px;
		}
		&:last-child {
			border-radius: 0 5px 5px 0;
		}
		.btn {
			display: flex; align-items: center; justify-content: center; width: 100%; padding: 15px 20px; border: none; background: transparent; cursor: pointer;
			p {
				font-size: 1.6rem; font-weight: 600; color: #333;
			}
		}
		&:hover {
			border-color: var(--theme); background: rgba(16, 135, 245, 0.06); z-index: 1;
			.btn p {
				color: var(--theme);
			}
		}
		&.active {
			border-color: var(--theme); background: rgba(16, 135, 245, 0.10); z-index: 2;
			.btn p {
				color: var(--theme); font-weight: 700;
			}
		}
	}
}

/* 알림 박스 */
.notice-box {
	margin-top: 15px; padding: 15px 20px; background: #f3f3f3; border-radius: 2px;
	&.mg-bot {
		margin-bottom: 10px;
	}
	p {
		font-size: 1.4rem; line-height: 1.5; color: #333;
	}
}

/* 날짜/시간 그룹 */
.date-time-group {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	.input-text {
		width: 150px; margin: 0;
	}
	.time-range {
		display: flex; align-items: center; gap: 5px;
		.selectbox {
			width: 100px; margin: 0;
			select {
				height: 45px; line-height: 45px;
			}
		}
		.time-separator {
			font-size: 1.6rem; color: #666; font-weight: 500; padding: 0 5px;
		}
	}
	&.full-row {
		width: 100%; flex-wrap: nowrap; gap: 10px;
		.date-time-item {
			display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0;
			.input-text {
				flex: 1; width: auto; min-width: 0; margin: 0;
			}
			.selectbox {
				flex: 0 0 auto; width: 100px; margin: 0;
				select {
					height: 45px; line-height: 45px;
				}
			}
		}
		.range-separator {
			flex: 0 0 auto; font-size: 1.6rem; color: #666; font-weight: 500; padding: 0 5px;
		}
	}
}


/* 안내사항 - valid 스타일 확장 */
.valid {
	&.hide {
		display: none;
	}
	p {
		&:not(:last-child) {
			margin-bottom: 4px;
		}
	}
}

/* 폼 그룹 */
.form-group {
	.form-wrap {
		.fomr-title {
			text-align: center;
			.tit {
				font-size: 3rem; font-weight: 400; position: relative; display: inline-block;
				&:after {
					content: ''; display: block; width: 5px; height: 5px; background: var(--theme); border-radius: 50%; position: absolute; right: -8px; top: 0;
				}
			}
			.box {
				background: #f0f0f0; border-radius: 0; padding: 10px 20px; font-size: 1.6rem; font-weight: 600; color: #333; margin-top: 15px;
			}
		}
		.group {
			.group-title {
				&.flex {
					display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px;
					.tit {
						padding-bottom: 0;
					}
				}
			}
		}
	}
	&.apply {
		.form-wrap {
			.group {
				&:not(:first-child) {
					padding-top: 50px;
				}
			}
		}
	}
}

/* 버튼 래퍼 */
.btn-wrap {
	&.form-btn {
		display: flex;
		.btn-center {
			display: flex; gap: 10px; width: 100%;
			.a-btn,
			button {
				display: inline-flex; align-items: center; justify-content: center;
				height: 50px; font-size: 1.5rem; font-weight: 700;
				text-align: center; border-radius: 5px;
				&:only-child {
					width: 100%; flex: 1;
				}
				&:first-child:not(:only-child) {
					flex: 7;
				}
				&:last-child:not(:only-child) {
					flex: 3;
				}
			}
		}
	}
}

/* 정보 폼 */
.info-form {
	border: 1px solid var(--line); margin-top: 10px; border-radius: 5px;
	.info-title {
		display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 10px 20px; cursor: pointer; border-radius: 5px;
		.title-left {
			display: flex; gap: 5px; flex: 1;
			.toggle-btn {
				position: relative; width: 24px; height: 24px; background: transparent; cursor: pointer;
				.toggle-icon {
					font-size: 1.2rem; color: #666; display: inline-block;
				}
				&:hover .toggle-icon {
					opacity: 0.8;
				}
			}
			.tit {
				font-size: 1.8rem; font-weight: 800; color: #333;
			}
		}
		&.collapsed {
			.toggle-btn .toggle-icon {
				transform: rotate(-90deg);
			}
		}
	}
	&:not(.collapsed) {
		.info-title {
			background: #e8edf1; border-radius: 5px 5px 0 0; border-bottom: 1px solid var(--line);
			.title-left {
				.toggle-btn .toggle-icon {
					color: #333;
				}
				.tit {
					color: #333;
				}
			}
		}
	}
	.info-content {
		padding: 0 30px 30px 30px;
	}
	&.collapsed {
		.info-content {
			max-height: 0; padding: 0 30px; opacity: 0; overflow: hidden; pointer-events: none;
		}
	}
}

/* 금액 리스트 */
.amount-list {
	dl {
		display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--line);
		&:last-child {
			border-bottom: none;
		}
		&.total {
			background: #f3f3f3;
			dt, dd {
				font-size: 1.8rem; font-weight: 700;
			}
			dd {
				color: var(--theme);
			}
		}
		dt {
			font-size: 1.6rem; font-weight: 500; color: #333;
		}
		dd {
			display: flex; gap: 20px; font-size: 1.6rem; font-weight: 500; color: #333; text-align: right;
			.amount-item {
				min-width: 100px; text-align: right;
			}
		}
	}
}

/* 창업 프로세스 */
.benefits-wrapper {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-bottom: 20px;
	.benefits-card {
		border: 1px solid #b3b3b3; border-radius: 12px; padding: 25px 20px; display: flex; flex-direction: column;
		.card-top {
			display: flex; align-items: center; justify-content: space-between; gap: 20px;
		}
		.card-content {
			flex: 1; min-width: 0;
			.card-number {
				font-size: 1.5rem; font-weight: 800; color: var(--theme); margin: 0 0 5px 0; line-height: 1;
			}
			.card-title {
				font-size: 1.8rem; font-weight: 700; color: #333; margin: 0 0 8px 0; line-height: 1.4;
			}
			.card-desc {
				font-size: 1.5rem; color: #666; margin: 0; line-height: 1.6;
			}
		}
		.card-icon {
			width: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
			img {
				width: 100%; height: auto; object-fit: contain;
			}
		}
		.card-detail {
			font-size: 1.4rem; color: #666; line-height: 1.6; padding-top: 20px;
			p {
				margin: 0 0 8px 0; padding: 3px 8px; background: #f8f8f8;
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
}

.add-input-group {
	.inputbtn-group {
		gap: 10px;
		&:not(:last-child) {
			margin-bottom: 5px;
		}
		.input-text {
			flex: 1; border-right: 1px solid var(--line);
			input {
				height: 40px;
			}
		}
		.btn-wrap {
			width: 60px !important;
			button {
				height: 40px; border-radius: 3px; font-size: 1.3rem;
			}
		}
	}
	.add-btn {
		text-align: center; width: 100%; height: 30px; border-radius: 3px; font-size: 1.4rem; background: #f9f0df; color: #c97a00; font-weight: 600;
		&:hover {
			background: #faedd4;
		}
	}
}

.contents-group.map-group {
	padding-bottom: 50px;
	.map-area {
		width: 100%; height: 300px; border-radius: 5px; overflow: hidden; position: relative;
		.pin {
			position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
			img {
				width: 46px; height: auto; object-fit: contain; display: block;
			}
		}
	}
	.map-title {
		.tit {
			font-size: 2.5rem; font-weight: 800; display: inline-block; padding-bottom: 10px;
		}
	}
}

/* 미디어 쿼리 */
@media (max-width: 1024px) {
	.contents-group.map-group {
		.map-area {
			height: 250px;
		}
		.map-title {
			.tit {
				font-size: 2rem;
			}
		}
	}
	.type-select-area {
		.item {
			.btn {
				padding: 12px 10px;
				p {
					font-size: 1.5rem;
				}
			}
		}
	}
	.form-group {
		&.apply {
			.form-wrap {
				.group {
					&:not(:first-child) {
						padding-top: 40px;
					}
				}
			}
		}
		.form-wrap {
			.fomr-title {
				.box {
					font-size: 1.4rem;
				}
				.tit {
					font-size: 2.4rem;
				}
			}
		}
	}
	.info-form {
		.info-title {
			padding: 10px 15px;
			.title-left {
				.tit {
					font-size: 1.6rem;
				}
				.toggle-btn {
					width: 20px; height: 20px; top: -1px;
					.toggle-icon {
						font-size: 1rem;
					}
				}
			}
		}
	}
	.benefits-wrapper {
		grid-template-columns: repeat(3, 1fr); gap: 18px;
		.benefits-card {
			padding: 22px 18px;
			.card-top {
				gap: 18px; margin-bottom: 18px;
			}
			.card-content {
				.card-title {
					font-size: 1.6rem;
				}
				.card-desc {
					font-size: 1.3rem;
				}
			}
			.card-detail {
				font-size: 1.2rem; padding-top: 18px;
			}
		}
	}
	.date-time-group {
		&.full-row {
			&.my-com {
				flex-direction: column; gap: 10px;
				.date-time-item {
					width: 100%; display: block;
					.input-text {
						width: 100%; margin-bottom: 10px;
					}
					> .selectbox:nth-child(2) {
						display: inline-block; width: calc(50% - 5px); margin-right: 5px; vertical-align: top;
					}
					> .selectbox:nth-child(3) {
						display: inline-block; width: calc(50% - 5px); vertical-align: top;
					}
				}
				.range-separator {
					align-self: center; padding: 5px 0;
				}
			}
		}
	}
}

@media (max-width: 768px) {
	.contents-group.map-group {
		padding-bottom: 10px;
		.map-area {
			height: 200px;
			.pin {
				img {
					width: 36px;
				}
			}
		}
		.map-title {
			.tit {
				font-size: 1.8rem;
			}
		}
	}
	.type-select-area {
		.item {
			.btn {
				padding: 8px;
				p {
					font-size: 1.4rem;
				}
			}
		}
	}
	.form-group {
		.form-wrap {
			.group {
				.group-title {
					.tit {
						font-size: 1.8rem; font-weight: 700;
					}
				}
			}
		}
		&.apply {
			.form-wrap {
				.fomr-title {
					.box {
						font-size: 1.3rem; padding: 8px 15px;
					}
					.tit {
						font-size: 2.2rem;
					}
				}
			}
		}
	}
	.btn-wrap {
		&.form-btn {
			.btn-center {
				gap: 5px;
				.a-btn,
				button {
					font-size: 1.4rem; height: 40px;
				}
			}
		}
	}
	.info-form {
		.info-title {
			padding: 7px 12px;
			.title-left {
				.tit {
					font-size: 1.5rem;
				}
				.toggle-btn {
					width: 18px; height: 18px; top: -3px;
					.toggle-icon {
						font-size: 0.8rem;
					}
				}
			}
		}
		.info-content {
			padding: 0 15px 15px 15px;
		}
	}
	.benefits-wrapper {
		grid-template-columns: repeat(2, 1fr); gap: 15px;
		.benefits-card {
			padding: 20px 16px;
			.card-top {
				gap: 15px; margin-bottom: 15px;
			}
			.card-content {
				.card-title {
					font-size: 1.5rem; margin-bottom: 6px;
				}
			}
			.card-detail {
				font-size: 1.2rem; padding-top: 15px;
			}
		}
	}
}

@media (max-width: 580px) {
	.contents-group.map-group {
		.map-area {
			height: 150px;
			.pin {
				img {
					width: 30px;
				}
			}
		}
	}
	.benefits-wrapper {
		grid-template-columns: 1fr;
		.benefits-card {
			padding: 18px 15px; border-radius: 10px;
			.card-top {
				gap: 15px; margin-bottom: 15px;
			}
			.card-detail {
				font-size: 1.1rem; padding-top: 15px;
			}
		}
	}
}

@media (max-width: 768px) {
	.notice-section {
		margin-top: 20px;
		.notice-box {
			padding: 12px 15px;
			.notice-title {
				font-size: 1.6rem; margin-bottom: 12px;
			}
			.notice-list {
				li {
					font-size: 1.4rem; line-height: 1.6;
				}
			}
		}
	}
	.date-time-group {
		flex-direction: column; align-items: flex-start; gap: 10px;
		.input-text {
			width: 100%;
		}
		.time-range {
			width: 100%; flex-wrap: wrap;
			.selectbox {
				width: calc(50% - 15px);
			}
		}
		&.full-row {
			gap: 5px;
			.date-time-item {
				width: 100%;
				.input-text {
					input {
						padding: 0 5px 0 10px;
					}
				}
				.selectbox {
					width: 75px;
					&:after {
						right: 10px; width: 5px; height: 5px;
					}
					select {
						padding: 0 15px 0 10px; font-size: 1.5rem;
					}
				}
			}
			.range-separator {
				display: none;
			}
		}
	}
}