@charset "UTF-8";

/************************************
* 마이페이지 1:1 문의 CSS
* 작성일 : 2026-02-05
* 수정일 : 2026-04-28
************************************/

.mypage__inquiry {
	
}
.file-attach-area {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width:100%;
}
	.file-attach-btn-wrap {
		display: flex;
		align-items: flex-end;
		flex-wrap:wrap;
		gap: 6px;
		width:auto;
	}
		.file-attach-btn-wrap .file-attach-btn {
			position: relative;
			display:flex;
			justify-content:center;
			align-items:center;
			gap:5px;
			margin-bottom:0;
			padding:10px;
			border:1px solid #1c4485;
			border-radius:5px;
			color:#1c4485;
			font-size:0.75rem;
			font-weight:600;
			transition:0.3s all ease-in-out;
			cursor:pointer;
		}

		.file-attach-btn-wrap .file-attach-btn:hover,
		.file-attach-btn-wrap .file-attach-btn:focus {
			background-color:#1c4485;
			color:#fff;
			text-decoration:none;
		}

			.file-attach-btn-wrap .input-hide {
				position: absolute;
				top: 0;
				left: 0;
				width: 0;
				height: 0;
				opacity: 0;
				overflow: hidden !important;
			}

			/* 용량 표시 */
			.file-attach-area .file-size-info {
				display:block;
				width:auto;
				padding-bottom:2px;
				font-size: 0.8rem;
				color: #667085;
			}

	.file-attach-area .file-list {
		display:flex;
		justify-content:flex-start;
		flex-wrap:wrap;
		gap:10px;
		width:100%;
		padding-top:12px;
	}

		.file-attach-area .file-list .file-item {
			display: flex;
			align-items: center;
			flex-wrap:wrap;
			gap: 15px;
			width:auto;
			padding: 6px 10px;
			border-radius: 5px;
			border: 1px solid #e4e7ec;
			background-color: #f9fafb;
			font-size: 0.91rem;
			color: #344054;
		}

			.file-attach-area .file-list .file-item .file-list--info {
				display:flex;
				flex-direction: column;
				gap:5px;
				width:auto;font-size:0.75rem;
				font-weight:600;
			}

				.file-attach-area .file-list .file-item .file-name {
					word-break: keep-all;
					word-wrap: break-word;
					overflow-wrap: anywhere;
				}

				.file-attach-area .file-list .file-item .file-size {
					color: #98a2b3;
					white-space: nowrap;
				}

				.file-attach-area .file-list .file-item .file-badge-new {
					position: relative;
					flex-shrink: 0;
					display: inline-block;
					padding: 4px 8px 2px 8px;
					margin-right: 6px;
					border-radius: 4px;
					background-color: #f44;
					color: #fff;
					font-size: 0.6rem;
					font-weight: 600;
					vertical-align: middle;
					overflow: hidden;
				}

				.file-attach-area .file-list .file-item .new-badge-shine::before {
					content: '';
					position: absolute;
					top: 0;
					left: -100%;
					width: 100%;
					height: 100%;
					background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
					animation: shine 3s infinite;
				}

				@keyframes shine {
					0% {
						left: -100%;
					}
					20%, 100% {
						left: 100%;
					}
				}

				.file-attach-area .file-list .file-item .file-remove {
					display:block;
					width:auto;
					padding: 0;
					background-color: transparent;
					border: none;
					cursor: pointer;
					color: #98a2b3;
					font-size: 0.91rem;
					flex-shrink: 0;
				}

				.file-attach-area .file-list .file-item .file-remove:hover { color: #ef4444; }

.form--frame .privacy-box {
	display:block;
	width:100%;
	padding: 12px;
	border: 1px solid #e4e7ec;
	border-radius: 6px;
	background-color: #f9fafb;
	color: #667085;
	line-height: 1.7;
	margin-top: 8px;
}
	.form--frame .privacy-box .privacy-detail {
		display:block;
		width:100%;
		padding-bottom:10px;
		padding-left:0;
		border-bottom:1px solid #efefef;
		list-style: none;
	}
		.form--frame .privacy-box .privacy-item {
			display:block;
			width:100%;
		}
			.form--frame .btn-privacy-toggle {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				width:30px;
				height:30px;
				padding: 0.4rem 0.7rem;
				background-color: #fff;
				border:2px solid #282a3c;
				border-radius: 4px;
				color: #282a3c;
				font-size: 0.8rem;
				font-weight:600;
				line-height: 1.5;
				transition: 0.3s all ease-in-out;
			}
			.form--frame .btn-privacy-toggle:hover,
			.form--frame .btn-privacy-toggle:focus {
				background-color: #282a3c;
				color: #fff;
				text-decoration: none;
			}

		.form--frame .privacy-box .privacy-item:not(:last-of-type) { margin-bottom:10px; }

			.form--frame .privacy-box .privacy-item--title {
				display:block;
				width:100%;
				padding-bottom:5px;
				font-size: 0.91rem;
				font-weight: 600;
				color: #000;
			}

			.form--frame .privacy-box .privacy-item--cont {
				display:block;
				width:100%;
				font-size:.85rem;
				font-weight:600;
				color:rgba(0,0,0,.6);
			}
			.form--frame .privacy-box .privacy-item--cont:not(:last-of-type) { padding-bottom:10px; }

				.form--frame .privacy-box .privacy-agree {
					display: flex;
					align-items: center;
					gap: 6px;
					width:100%;
				}
					.form--frame .privacy-box .privacy-agree .text {
						margin-bottom: 0;
						font-size:0.91rem;
						font-weight: 600;
						color: #000;
						cursor: pointer;
					}

	/*** 게시글이 없을 때 ***/
	.mypage__inquiry .inquiry__no-list {
		display:flex;
		justify-content:center;
		align-items:center;
		width:100%;
	}
		.mypage__inquiry .inquiry__no-list .inner--frame {
			display:block;
			width:auto;
		}
		
			.mypage__inquiry .inquiry__no-list .image-box {
				display: block;
				width: 100%;
				text-align: center;
			}
				.mypage__inquiry .inquiry__no-list .image-box img {
					max-width:100%;
					vertical-align:top;
				}
	
			.mypage__inquiry .inquiry__no-list .text-box {
				display:block;
				width:auto;
			}
				.mypage__inquiry .inquiry__no-list .main-title {
					display:block;
					width:auto;
					padding:20px;
					border-radius:100px;
					font-family: 'SEBANG_Gothic_Regular', sans-serif;
					font-size: 1.35rem;
					font-weight: 300;
					text-align: center;
					background-color:#d1ede9;
					color:rgba(0,0,0,1);
				}
				
				.mypage__inquiry .inquiry__no-list .desc {
					display:block;
					width:100%;
					padding-top: 20px;
					padding-bottom: 20px;
					text-align:center;
				}
					.mypage__inquiry .inquiry__no-list .desc .block {
						display:block;
						width:100%;
						font-family: 'SEBANG_Gothic_Regular', sans-serif;
						font-size: 1rem;
						font-weight: 300;
						color:rgba(0,0,0,.6);
						line-height: 1.4;
					}
				
			.mypage__inquiry .inquiry__no-list .link-box {
				display:flex;
				justify-content:center;
				width:100%;
			}
				.mypage__inquiry .inquiry__no-list .link-btn {
					display:flex;
					justify-content:center;
					align-items:center;
					width:auto;
					padding:19px;
					border-radius:50px;
					background-color:#2c3539;
					color:#fff;
					transition:0.3s all ease-in-out;
				}
					.mypage__inquiry .inquiry__no-list .link-box .text,
					.mypage__inquiry .inquiry__no-list .link-box .icon {
						display:block;
						width:auto;
						font-size:0.85rem;
						font-weight:600;
					}
					
					.mypage__inquiry .inquiry__no-list .link-box .text { padding-right:20px; }
			
				.mypage__inquiry .inquiry__no-list .link-btn:hover,
				.mypage__inquiry .inquiry__no-list .link-btn:focus {
					background-color:#F9D829;
					color:#2c3539;
					text-decoration:none;
				}
			
	/*** 게시글이 있을 때 ***/
	.mypage__inquiry .inquiry__board-frame {
		display:block;
		width:100%;
	}
		/*** 문의글 목록 ***/
		.mypage__inquiry .inquiry__board-frame .inquiry__board-list-box {
			display:grid;
			gap:20px;
			width:100%;
			margin-top:20px;
			padding-bottom:20px;
		}
			.mypage__inquiry .inquiry__board-frame .inquiry__board-list {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding:15px;
				background-color:#fff;
				border:1px solid #ccc;
				border-radius:5px;
				transition:0.3s all ease-in-out;
			}
			
			.mypage__inquiry .inquiry__board-frame .inquiry__board-list:hover,
			.mypage__inquiry .inquiry__board-frame .inquiry__board-list:focus {
				text-decoration:none;
				border-color:#000;
				box-shadow:3px 3px 10px rgba(0,0,0,0.2);
			}
			
				.mypage__inquiry .inquiry__board-frame .inquiry__board-list .list-title {
					display:block;
					width:100%;
					padding-bottom: 15px;
					word-wrap:break-word;
					word-break:keep-all;
					overflow-wrap:anywhere;
				}
					.mypage__inquiry .inquiry__board-frame .inquiry__board-list .link-title {
						font-family: 'SEBANG_Gothic_Regular', sans-serif;
						font-size: 1.15rem;
						font-weight: 300;
						line-height: 1.4;
						letter-spacing: -.6px;
					}

						.mypage__inquiry .inquiry__board-frame .inquiry__board-list .new-badge-shine {
							flex-shrink: 0;
							display: inline-flex;
							justify-content: center;
							align-items: center;
							padding: 4px 8px 2px 8px;
							background-color: #f44;
							color: #fff;
							font-size: 0.6rem;
							font-weight: 600;
							border-radius: 4px;
							margin-right: 6px;
							position: relative;
							overflow: hidden;
						}

						.mypage__inquiry .inquiry__board-frame .inquiry__board-list .new-badge-shine::before {
							content: '';
							position: absolute;
							top: 0;
							left: -100%;
							width: 100%;
							height: 100%;
							background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
							animation: shine 3s infinite;
						}

						@keyframes shine {
							0% {
								left: -100%;
							}
							20%, 100% {
								left: 100%;
							}
						}

						.mypage__inquiry .inquiry__board-frame .inquiry__board-list .re-badge {
							display: inline-block;
							min-width: 18px;
							height: 18px;
							margin-left: 6px;
							padding: 0 5px;
							border-radius: 9px;
							background-color: #2563EB;
							color: #fff;
							font-size: 11px;
							font-weight: 600;
							line-height: 18px;
							text-align: center;
							vertical-align: middle;
						}

				.mypage__inquiry .inquiry__board-frame .inquiry__board-list .list-info {
					display:flex;
					justify-content:space-between;
					align-items:center;
					flex-wrap:wrap;
					width:100%;
					padding-top:15px;
					margin-top:15px;
					border-top:1px solid #efefef;
				}
					.mypage__inquiry .inquiry__board-frame .inquiry__board-list .info-frame {
						display:flex;
						justify-content:flex-start;
						align-items:center;
						flex-wrap:wrap;
						width:auto;
					}
						.mypage__inquiry .inquiry__board-frame .inquiry__board-list .info-title {
							display:block;
							width:auto;
							padding-right:10px;
							font-size:0.8rem;
							font-weight:600;
							color:rgba(0,0,0,1);
						}
						
						.mypage__inquiry .inquiry__board-frame .inquiry__board-list .info-cont {
							display:block;
							width:auto;
							font-size:0.8rem;
							font-weight:600;
							color:rgba(0,0,0,.6);
						}
						
						.mypage__inquiry .inquiry__board-frame .inquiry__board-list .answer .info-cont {
							display:block;
							width:auto;
							padding:5px;
							border-radius:3px;
							font-size:0.7rem;
							color:#fff;
						}
							.mypage__inquiry .inquiry__board-frame .inquiry__board-list .status {
								font-size:0.8rem;
								line-height:1.4;
							}

	/*** 게시글 상세 상태표시 ***/
	.board-view { position:relative; }
	.board-view .info .info-item .state {
		display:inline;
		padding:5px;
		border-radius:5px;
		font-size:0.85rem;
		font-weight:600;
		color:#fff;
	}
		.board-view .info .info-item .state.received { background-color:var(--received); }
		.board-view .info .info-item .state.wait { background-color:var(--wait); }
		.board-view .info .info-item .state.complete { background-color:var(--complete); }

	.board__write-info--frame {
		display:flex;
		justify-content:flex-start;
		align-items:center;
		flex-wrap:wrap;
		width:100%;
		padding:20px;
		margin-bottom:15px;
		border-radius:5px;
		border:2px solid #22766d;
		background-color:rgba(34,118,109,.15);
	}
		.board__write-info--frame .image-box { display:block; }
			.board__write-info--frame .image-box img {
				max-width:100%;
				vertical-align:top;
			}
		
		.board__write-info--frame .text-box { display:block; }
			.board__write-info--frame .text-box .block {
				display:block;
				width:100%;
				font-size:0.85rem;
				font-weight:600;
				line-height: 1.4;
			}

	/*** 게시글 작성 이메일 ***/
	.form--frame .form-group .e-adr {
		display:flex;
		justify-content:flex-start;
		align-items:center;
		flex-wrap:wrap;
		width:100%;
	}
		.form--frame .form-group .e-adr .item-input {
			display:block;
			width:calc(100% - 130px);
			margin-right:10px;
		}
		
		.form--frame .form-group .e-adr .item-check {
			display:block;
			width:auto;
			font-size:0.85rem;
			font-weight:600;
			color:#000;
		}
			.form--frame .form-group .e-adr .item-check label[for="email-check"] {
				display:flex;
				justify-content:flex-start;
				align-items:center;
			}
				.form--frame .form-group .e-adr .item-check label[for="email-check"] input { margin-right:5px; }

.icoRequired {
    display: inline-block;
    margin: 0 0 0 6px;
    width: 4px;
    height: 4px;
    text-indent: -999px;
    overflow: hidden;
    border-radius: 50%;
    transform: translate(0, 2px);
    vertical-align: top;
    background-color: #f00;
}

.modal.home-modal {
	position:fixed;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:1000;
	display:none;
	justify-content:center;
	align-items:center;
	padding-left: 0px !important;
	padding-right: 0px !important;
	overflow: hidden;
	background-color:rgba(0,0,0,.3);
}

	.modal.home-modal .modal-dialog {
		width: 75%;
		height: 70%;
		margin: 0px;
		padding: 0px;
	}

		.modal.home-modal .modal-content {
			border: 0px;
			height: 100%;
			min-height: 100%;
			max-height: 100%;
			border-radius: 0;
			width: 100%;
		}

			.modal.home-modal .modal-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				padding: 1rem 1.25rem;
				background-color: #1c354c;
				border-bottom: 0px;
				border-radius: 5px 5px 0 0;
			}

				.modal.home-modal .modal-header .close {
					background-color:transparent;
					border:0;
					color: #fff;
					opacity: 1;
					font-size: 1.15rem;
					letter-spacing: -.6px;
					font-family: 'GmarketSansMedium', sans-serif;
				}

				.modal.home-modal .modal-header .close:hover,
				.modal.home-modal .modal-header .close:focus { color: #ff0; }

				.modal.home-modal .modal-header .modal-title {
					display: block;
					width: 100%;
					font-weight: 600;
					color: #fff;
					font-size: 1.15rem;
					letter-spacing: -.6px;
					font-family: 'GmarketSansMedium', sans-serif;
				}

			.modal.home-modal .modal-body {
				width:100%;
				height:calc(100% - 55px);
				max-height: 100%;
				padding: 0;
				background-color: #fff;
				border-radius: 0 0 5px 5px;
				overflow-y: auto;
				scrollbar-width: auto;
				scrollbar-color: initial;
			}

			.modal.home-modal .modal-body::-webkit-scrollbar { width: 5px !important; }
			.modal.home-modal .modal-body::-webkit-scrollbar-track { background: #f5f5f5 !important; }
			.modal.home-modal .modal-body::-webkit-scrollbar-thumb {
				background-color: #ddd !important;
				border-radius: 4px !important;
			}
			.modal.home-modal .modal-body::-webkit-scrollbar-thumb:hover { background-color: #000 !important; }

				.modal.home-modal .modal-btn-area {
					position:sticky;
					left:0;
					top:0;
					z-index:10;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					gap:5px;
					width: 100%;
					padding: 10px;
					background-color: #fff;
					border-bottom: 1px solid #ccc;
				}
					.modal.home-modal .modal-btn-area .btn {
						display:flex;
						justify-content:flex-start;
						align-items:center;
						gap:5px;
						width:auto;
						padding:0.4rem 0.7rem;
						background-color:#fff;
						border:1px solid #ccc;
						border-radius:3px;
						font-size:0.8rem;
						font-weight: 600;
						line-height: 1;
					}

					.modal.home-modal .modal-btn-area .apply-btn {
						border-color:var(--blue);
						color:var(--blue);
					}
					.modal.home-modal .modal-btn-area .apply-btn:hover,
					.modal.home-modal .modal-btn-area .apply-btn:focus {
						background-color:var(--blue);
						color:var(--white);
					}

					.modal.home-modal .modal-btn-area .btn-close {
						border-color:var(--dark);
						color:var(--dark);
					}
					.modal.home-modal .modal-btn-area .btn-close:hover,
					.modal.home-modal .modal-btn-area .btn-close:focus {
						background-color:var(--dark);
						color:var(--white);
					}

			.modal.home-modal .modal-body .board-write-form-box {
				display:block;
				width:100%;
				padding: 30px;
				border:0;
			}
				.modal.home-modal .modal-body .form--frame {
					padding:0;
					border:0;
				}

				.modal.home-modal .modal-body textarea { height:300px !important; }

.form--frame .form-group--title	{ font-size:1rem; }


.board-view-content { padding:0 !important; }

	.board-view-content .inquiry__thread {
		height:500px;
		padding:24px;
		overflow-y:scroll;
		scrollbar-width: auto;
		scrollbar-color: initial;
	}

	.board-view-content .inquiry__thread::-webkit-scrollbar { width: 5px !important; }
	.board-view-content .inquiry__thread::-webkit-scrollbar-track { background: #f5f5f5 !important; }
	.board-view-content .inquiry__thread::-webkit-scrollbar-thumb {
		background-color: #ddd !important;
		border-radius: 4px !important;
	}
	.board-view-content .inquiry__thread::-webkit-scrollbar-thumb:hover { background-color: #000 !important; }

		.board-view-content .inquiry__thread .inquiry__thread-bubble--content {
			font-size:0.8rem;
		}


@media screen and (min-width:1px) and (max-width:360px) {
	/************************  ************************/
	
}	

/*** Mobile ***/
@media screen and (min-width:1px) and (max-width:480px) {
	/************************  ************************/
	
}

@media screen and (min-width:1px) and (max-width:639px) {
	/*** 문의글 목록 ***/
	.mypage__inquiry .inquiry__board-frame .inquiry__board-list-box { grid-template-columns: repeat(1, 1fr); }

	/*** 게시글 작성 ***/
	.board__write-info--frame .image-box {
		width:100%;
		margin-bottom:10px;
		text-align: center;
	}
	
	.board__write-info--frame .text-box { width:100%; }
	
	.board__write-info--frame .text-box .block {
		font-size:0.8rem;
		text-align:center;
		word-wrap:break-word;
		word-break:keep-all;
		overflow-wrap:wrap;
	}
	
	.form--frame .form-group--title { font-size:1rem; }
	
	.form--frame .form-group.form-group--flex .form-item_depart,
	.form--frame .form-group.form-group--flex .form-item_email { width:100% }
	
	.form--frame .form-group.form-group--flex .form-item_depart { margin-bottom:10px; }
	
	.form--frame .form-group .e-adr .e-adr_item { width:100%; }
	.form--frame .form-group .e-adr .e-adr_item.item-check { margin-top:12px; }
	
	.custom-select { max-width:100%; }
	
	.btn-box.flex-wrap .btn {
		width:100%;
		margin-right:0 !important;
	}
	
	.btn-box.flex-wrap .btn:not(:last-of-type) { margin-bottom:10px; }
}

/*** Mobile & Tablet ***/
@media screen and (min-width:1px) and (max-width:760px) {
	/*** 상태요약 & 검색영역 ***/
	.mypage__inquiry .inquiry__board-frame .search-area { flex-wrap:wrap; }
		.mypage__inquiry .inquiry__board-frame .search-area .item { width:100%; }
		
		.mypage__inquiry .inquiry__board-frame .search-area .left-item { padding-bottom:10px; }
		
			.mypage__inquiry .inquiry__board-frame .search-area .func-area input {
				width:calc(100% - 130px);
			}
}

/*** Mobile & Tablet ***/
@media screen and (min-width:640px) and (max-width:999px) {
	/*** 문의글 목록 ***/
	.mypage__inquiry .inquiry__board-frame .inquiry__board-list-box { grid-template-columns: repeat(2, 1fr); }
}


/*** Mobile & Tablet ***/
@media screen and (min-width:1px) and (max-width:1216px) {
	/************************  ************************/
	.mypage__inquiry {
		padding-left:20px;
		padding-right:20px;
	}
}

/*** Tablet ***/
@media screen and (min-width:640px) and (max-width:1216px) {	
	/************************  ************************/
	
}

/*** Tablet & Desktop ***/
@media screen and (min-width:640px) {	
	/*** 문의글 목록 ***/
	.mypage__inquiry .inquiry__board-frame .inquiry__board-list { min-height:160px; }
	
	/*** 게시글 작성 ***/
	.board__write-info--frame .image-box {
		width:auto;
		padding-right: 15px;
	}
	
	.board__write-info--frame .text-box { width:calc(100% - 51px); }

	.form--frame .form-group.form-group--flex .form-item_depart { width:30% }
	.form--frame .form-group.form-group--flex .form-item_email { width:68% }
}

/*** Tablet & Desktop ***/
@media screen and (min-width:1000px) {	
	/*** 문의글 목록 ***/
	.mypage__inquiry .inquiry__board-frame .inquiry__board-list-box { grid-template-columns: repeat(3, 1fr); }
	
}

/*** Desktop ***/
@media screen and (min-width:1217px) {
	/************************  ************************/
	
}