/* =========================================
   Common Forms, Search, & Navigation Elements
   ========================================= */

/* Background Color Utilities */
.bg-gray { background-color: #F8F8F8 !important; }
.bg-white { background-color: #FFFFFF !important; }
.bg-none { background-color: transparent !important; border:none !important; }

/* Vertical Padding Utilities */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.py-20 { padding-top: 20px !important; padding-bottom: 20px !important; }
.py-30 { padding-top: 30px !important; padding-bottom: 30px !important; }
.py-40 { padding-top: 40px !important; padding-bottom: 40px !important; }
.py-50 { padding-top: 50px !important; padding-bottom: 50px !important; }
.py-60 { padding-top: 60px !important; padding-bottom: 60px !important; }
.py-70 { padding-top: 70px !important; padding-bottom: 70px !important; }
.py-80 { padding-top: 80px !important; padding-bottom: 80px !important; }
.py-90 { padding-top: 90px !important; padding-bottom: 90px !important; }
.py-100 { padding-top: 100px !important; padding-bottom: 100px !important; }

/* Horizontal Margin utilities */
.m-auto { margin-left: auto !important; margin-right: auto !important; }

/* =========================================
   Common Search / Filter Group
   ========================================= */
.search-wrap { margin: 0 auto 30px; max-width: 1440px; padding: 20px 20px;

    border-top: 2px solid #000;
    border-bottom: 1px solid #000;

}
.search-wrap .search-inner { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px 42px; padding: 0; }
.search-wrap .filter-row { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; width: auto; }
.search-wrap .filter-row.full-width { flex: 0 0 100%; width: 100%; margin-top: 10px; display: flex; align-items: center; }
.search-wrap .filter-label { display: flex; align-items: center; gap: 12px; min-width: 60px; width: auto; flex-shrink: 0; font-size: 16px; font-weight: 700; color: #222; white-space: nowrap; min-height: 40px; }
.search-wrap .filter-label img { width: 20px; height: 20px; object-fit: contain; }
.search-wrap .filter-controls { flex: 1; display: flex; flex-direction: row; align-items: center; gap: 10px; }
.search-wrap .filter-btn-group { display: flex; gap: 0; }

.search-wrap .btn-filter { display: inline-flex; align-items: center; justify-content: center; min-width: 80px; height: 40px; padding: 0 15px; border: 1px solid #D5D5D5; background: #fff; color: #000; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; border-radius: 0; margin-left: -1px; }
.search-wrap .btn-filter:first-child { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.search-wrap .btn-filter:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.search-wrap .btn-filter:hover { background-color: #f5f5f5; }
.search-wrap .btn-filter.active { background: #000; border-color: #000; color: #fff; z-index: 1; font-weight: 500; }

.search-wrap .price-inputs { display: flex; align-items: center; gap: 5px; }
.search-wrap .price-field { width: 120px; }
.search-wrap .price-dash { color: #999; margin: 0 2px; }

.search-wrap .search-input-wrap { display: flex; align-items: center; gap: 10px; width: 100%; }
.search-wrap .inp-search { height: 40px; padding: 0 15px; border: 1px solid #D5D5D5; border-radius: 4px; font-size: 14px; background: #fff; transition: all 0.2s; flex: 1; width: 100%; }
.search-wrap .inp-search:focus { outline: none; border-color: #000; }

.search-wrap .inp-box-detail { width: 200px; }
.search-wrap .inp-box-detail select { width: 100%; }

.search-wrap .btn-search { height: 40px; padding: 0 20px; background: #fff; border: 1px solid #000; border-radius: 4px; font-size: 14px; font-weight: 500; color: #000; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.search-wrap .btn-search:hover, .search-wrap .btn-search.active { background: #000; color: #fff; }

.search-wrap .btn-inquiry { height: 30px; line-height:30px; padding: 0 15px; border: 1px solid #D5D5D5; background: #fff; font-size: 13px; border-radius: 4px; margin-left: 0; cursor: pointer; }
.search-wrap .btn-inquiry.active { background: #000; border-color:#000; color:#fff; }

/* Responsive Search */
@media (max-width: 1100px) {
    .search-wrap .search-inner { flex-direction: column; align-items: stretch; gap: 20px; }
    .search-wrap .filter-row { width: 100%; justify-content: space-between; }
    .search-wrap .filter-controls { flex: 1; justify-content: flex-start; }
    .search-wrap .filter-row.full-width { flex-direction: row; margin-top: 0; }
}

@media (max-width: 480px) {
    .search-wrap .filter-row { flex-direction: row; align-items: center; gap: 10px; }
    .search-wrap .filter-controls { width: 100%; justify-content: flex-start; }
    .search-wrap .filter-btn-group { width: 100%; }
    .search-wrap .btn-filter { flex: 1; min-width: 0; }
    .search-wrap .inp-box-detail { width: 100% !important; }
    .search-wrap .price-inputs { width: 100%; flex-wrap: wrap; }
    .search-wrap .price-field { flex: 1; }
    .search-wrap .btn-inquiry { width: 100%; margin-top: 10px; }
    .search-wrap .btn-search { width: 100px !important; }
}

/* removed nested charset */
/********** 숨김 **********/
.hide { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); }

/********** overflow-hidden **********/
.overflow-hidden { overflow: hidden; }

/* background color */
.bg-gray-33 { background-color: var(--gray-33); color: #fff; }
.bg-gray-f467 { background-color: var(--gray-f467); }
.bg-fff { background-color: #ffffff; }
.bg-main1 { background-color: var(--main1); color: #fff; }

/* font color */
.fc-gray-33 { color: var(--gray-33); }
.fc-fff { color: #fff !important; }

.esn { font-size: 14px; color: var(--sub1); }
.h-tit-st2 { display: block; line-height: 1.4; font-family: var(--head-font); font-weight: 300; font-size: 3.5rem; color: #000; word-break: keep-all; word-wrap: break-word; }
.h-tit-st3 { display: block; line-height: 1.4; font-family: var(--head-font); font-weight: 300; font-size: 2.6rem; color: #000; word-break: keep-all; word-wrap: break-word; }
@media only screen and (max-width: 1023px) {
	.h-tit-st2 { font-size: 3rem; }
	.h-tit-st3 { font-size: 2.1rem; }
}

@keyframes shakeLeft {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-5px);
  }
}
/* NOTE: 메인 비주얼 전용 애니메이션(bounce, rotate, livelyWiggle, sway, scrollX/Y,
   slideIn*, sparkle, blink, fadeIn, rotateCube, rotateSlightClockwise)은
   main.css로 이관 완료 */
.swiper-btn-st1 .swiper-button-prev { background-image: url("data:image/svg+xml,%3Csvg width='10' height='17' viewBox='0 0 10 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L1.5 8.5L9 16' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.swiper-btn-st1 .swiper-button-next { background-image: url("data:image/svg+xml,%3Csvg width='10' height='17' viewBox='0 0 10 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 16L8.5 8.5L1 0.999999' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.swiper-btn-st2 .swiper-button-prev { background-image: url("data:image/svg+xml,%3Csvg width='10' height='17' viewBox='0 0 10 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L1.5 8.5L9 16' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.swiper-btn-st2 .swiper-button-next { background-image: url("data:image/svg+xml,%3Csvg width='10' height='17' viewBox='0 0 10 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 16L8.5 8.5L1 0.999999' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }

/* 에디터 텍스트 */
.editor-text { line-height: 1.4 !important; font-family: "Pretendard" !important; font-size: 16px !important; color: #111 !important; }
.editor-text img { max-width: 100% !important; height: auto !important; }
.editor-text .youtube-wrap { max-width: 1000px; margin: 0 auto; }
.editor-text .youtube-wrap .youtube { position: relative; width: 100%; height: 0; padding-bottom: 56%; }
.editor-text .youtube-wrap .youtube iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

/********** tab **********/
.tab-btn.tab-st1 { position: relative; display: flex; flex-wrap: wrap; align-items: center; width: fit-content; background: var(--gray-f6); border-radius: 50px; }
.tab-btn.tab-st1 li { position: relative; z-index: 1; width: fit-content; }
.tab-btn.tab-st1 li a { display: inline-block; height: 40px; line-height: 40px; padding: 0 33px; font-weight: 700; color: #333; border-radius: 50px; white-space: nowrap; text-align: center; }
.tab-btn.tab-st1 li.on a { color: #fff; background: var(--main1); }

.tab-btn.tab-st2 { position: relative; display: flex; align-items: center; gap: 5px; padding-left: 30px; width: fit-content; background: var(--gray-f6); border-radius: 50px; }
.tab-btn.tab-st2 li { position: relative; z-index: 1; width: fit-content; }
.tab-btn.tab-st2 li a { display: inline-block; height: 40px; line-height: 40px; padding: 0 33px; background: var(--gray-dd); border-radius: 1rem 1rem 0 0; white-space: nowrap; text-align: center; }
.tab-btn.tab-st2 li.on a { background: #fff; }
.tab-swiper-wrap .swiper-btn-st2 .swiper-button-prev { left: 0; }
.tab-swiper-wrap .swiper-btn-st2 .swiper-button-next { right: 0; }

@media only screen and (max-width: 1023px) {
  .tab-btn.tab-st1 { gap: 5px; background: none; }
  .tab-btn.tab-st1 li a { width: 100%; padding: 0 15px; background: var(--gray-f6); }
	
}
@media only screen and (max-width: 450px) {
  .tab-btn.tab-st2 li a { padding: 0 15px; }
}

.no-list { padding: 100px 0; text-align: center; }
.bd-box-st2 { border: 1px solid var(--gray-dd); border-radius: 1rem; overflow: hidden; }
.bd-box-st4 { padding: 20px; background: var(--gray-f467); border-top: 1px solid var(--gray-e5); }

/* input */
.inp-st1 { height: 40px; line-height: 40px; padding: 0 15px; color: #444; border: 1px solid var(--gray-dd); border-radius: 0px; background: #fff; white-space: nowrap; text-overflow: ellipsis; }
select.inp-st1 { min-width: fit-content; width: fit-content; padding: 0 40px 0 15px; background: #fff url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.5 7.5'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23666; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M.75.75l6,6L12.75.75'/%3E%3C/svg%3E") no-repeat right 15px center / auto 5px; appearance: none; }
textarea.inp-st1 { height: unset; padding: 15px; }
.inp-flex { display: flex; align-items: center; gap: 5px; }
@media only screen and (max-width: 767px) {
	.inp-st1 { padding: 0 10px; }
	select.inp-st1 { padding: 0 30px 0 10px; background-position: right 10px center; }
  .inp-flex { flex-direction: column; }
  .inp-flex .inp-st1 { width: 100%; }
  .inp-flex.inp-flex-st1 { align-items: flex-start; }
  .inp-flex.inp-flex-st2 { flex-direction: row; }
  .inp-flex.inp-flex-st2 select.inp-st1 { width: unset; }
}

/********** checkbox & radio **********/
/* 리스트 */
.chk-list1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.chk-list2 { display: flex; align-items: center; gap: 8px 20px; }

/* checkbox */
.chk-st1 { position: relative; flex-shrink: 0; }
.chk-st1 input { appearance:none; position: absolute; top: -1px; left: 0; width: 25px; height: 25px; border: none; background: transparent; }
.chk-st1 label { position: relative; display: inline-block; line-height: 1.5; padding-left: 35px; font-size: 15px; cursor: pointer; }
.chk-st1 label::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: -1; width: 25px; height: 25px; border: 1px solid var(--gray-b5); background: #fff; }
.chk-st1 input:checked + label { color: #333; }
.chk-st1 input:checked + label::before { background: var(--gray-f467); }
.chk-st1 input:checked + label::after { content:""; position: absolute; top: 50%; left: 8px; transform: translateY(-50%); width: 10px; height: 10px; background: var(--sub1); }

/* radio */
.rdo-st1 { position: relative; }
.rdo-st1 input { appearance: none; position: absolute; top: 1px; left: 0; width: 18px; height: 18px; margin: 0; border: none; background: transparent; }
.rdo-st1 label { position: relative; line-height: 1.4; padding-left: 25px; font-size: 15px; color: #555; cursor: pointer; }
.rdo-st1 label.hide { font-size: 0; }
.rdo-st1 label:before { content: ""; position: absolute; top: 1px; left: 0; width: 18px; height: 18px; background: #fff; border: 1px solid var(--gray-dd); border-radius: 100%; }
.rdo-st1 input:checked + label { font-weight: 600; }
.rdo-st1 input:checked + label:before { content: ""; position: absolute; top: 1px; left: 0; width: 18px; height: 18px; background: var(--primary1); border: 1px solid var(--primary1); }
.rdo-st1 input:checked + label:after { content: ""; position: absolute; top: 7px; left: 6px; width: 6px; height: 6px; background: #fff; border-radius: 100%; }
.form-wrap1 .title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; padding: 20px 0; border-bottom: 2px solid #222; }
.form-wrap1 .title strong { font-size: 2.4rem; color: #222; }
.form-wrap1 .title .esn { font-size: 14px; color: #555; }
.form-wrap1 .title .esn b { color: var(--red1); }
.form-wrap1 .form-group { display: flex; padding: 2rem 0.6rem 0 0.6rem; }
.form-wrap1 .form-group .label { flex-shrink: 0; width: 10rem; padding-top: 1.2rem; font-weight: 600; }
.form-wrap1 .form-group .inp-box { position: relative; width: 100%; }
.form-wrap1 .form-group .inp-box .checklist-st1 { padding-top: 10px; }
.form-wrap1 .form-group .inp-box .inp-st1 { width: 100%; }
.form-wrap1 .form-group .inp-box .inp-st1.input1 { max-width: 200px; }
.form-wrap1 .form-group .inp-box .inp-st1.input2 { max-width: 300px; }
.form-wrap1 .form-group .inp-box .inp-st1.input3 { max-width: 100px; }
.form-wrap1 .form-group .inp-flex { display: flex; align-items: center; gap: 5px; }
.form-wrap1 .form-group .inp-flex-st1 .inp-flex { width: 100%; }
.form-wrap1 .form-group .inp-flex-st2 { gap: 10px; }
.form-wrap1 .form-group .inp-flex-st2 .btn-bace1 { margin-left: auto; }
.form-wrap1 .form-group .po-ab-btn { position: absolute; top: 5px; right: 5px; }

/******* 첨부파일 *******/
.file-list {  }
.file-list li { display: flex; align-items: center; gap: 10px; margin-top: 0.5rem; margin-bottom: 0.5rem; }
.file-list li span { color: #777; }
.file-list li .delete-btn { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 10px; border: 1px solid var(--gray-e5); }
@media only screen and (max-width: 1023px) {
	.form-wrap1 .form-group .inp-flex-st1 { flex-direction: column; }
	.form-wrap1 .form-group .inp-flex-st1 .btn-bace1 { width: 100%; }

}
@media only screen and (max-width: 767px) {
	.form-wrap1 .form-group { flex-direction: column; }
	.form-wrap1 .form-group .label { padding-bottom: 1.2rem; }

	.form-wrap1 .form-group .inp-flex-st2 { flex-direction: column; }
	.form-wrap1 .form-group .inp-flex-st2 .inp-st1.input1 { max-width: 100%; }
	.form-wrap1 .form-group .inp-flex-st2 .chk-list2 { width: 100%; }
	.form-wrap1 .form-group .inp-flex-st2 .btn-bace1 { width: 100%; }
}
@media only screen and (max-width: 390px) {
	.form-wrap1 .form-group .inp-flex-st3 { flex-direction: column; }
	.form-wrap1 .form-group .inp-flex-st3 .inp-st1.input1 { max-width: 100%; }
	.form-wrap1 .form-group .inp-flex-st3 .inp-st1.input3 { max-width: 100%; }
	.form-wrap1 .form-group .inp-flex-st3 .chk-list2 { width: 100%; }
	.form-wrap1 .form-group .inp-flex-st3 .btn-bace1 { width: 100%; }
}

.form-table { width: 100%; table-layout: fixed; border-top: 2px solid var(--main1); }
.form-table th { padding: 18px 18px; line-height: 1.3; font-weight: 600; font-size: 15px; /*background: var(--gray-f467); border-right: 1px solid var(--gray-e5);*/ border-bottom: 1px solid var(--gray-e5); text-align: left; word-break: keep-all; vertical-align: middle; }
.form-table td { padding: 18px 18px; line-height: 1.3; font-size: 15px; border-bottom: 1px solid var(--gray-e5); border-right: 1px solid var(--gray-e5); text-align: left; }
.form-table td:last-child { border-right: none; }
.form-table td .flex-st1 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.form-table td .flex-st1 .btn-bace1 { flex-shrink: 0; }
.form-table td .flex-st2 { display: flex; align-items: center; gap: 5px; }
.form-table td .inp-sht1 { max-width: 80px; }
.form-table td .inp-sht2 { max-width: 250px; }
@media only screen and (max-width: 1023px) {
  .form-table td { padding: 10px; }
}
@media only screen and (max-width: 767px) {
  .form-table-wrap { overflow: scroll; }
  .form-table-wrap .form-table { min-width: 700px; }
  .form-table colgroup { display: none; }
  .form-table tr { display: flex; flex-wrap: wrap; width: 100%; }
  .form-table th { display: block; width: 120px; padding: 10px; text-align: left; }
  .form-table td { display: block; width: calc(100% - 120px); padding: 10px; border-right: none; }
  .form-table td.wh100p { width: 100%; }
  .form-table td .flex-st1 { flex-direction: column; align-items: baseline; }
  
}
@media only screen and (max-width: 560px) {
  .form-table td .inp-st2 { width: 100%; }
  .form-table td .inp-sht2 { max-width: unset; }
}
@media only screen and (max-width: 767px) {
    .tableA tbody tr.no-list { justify-content: center; padding: 50px 0; }
    .tableA tbody tr td .tit { display: flex; width: 100% !important; padding: 0; text-align: left !important; border-top: none; }
	.table-scroll-event.hidden { display: none; }
	.table-scroll-event .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
	.table-scroll-event .inner::before { content:""; display: block; position: absolute; top: -25px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 64.28'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='cls-1' d='M26.24,52.94s-8.39-7.82-8.39-15.08v-8.7c0-2.32,1.88-4.2,4.2-4.2h0c2.32,0,4.2,1.88,4.2,4.2V6.25c0-2.45,2.11-4.42,4.61-4.18,2.18.21,3.79,2.17,3.79,4.36v12.24c0-2.45,2.11-4.42,4.61-4.18,2.18.21,3.79,2.17,3.79,4.36v3.74c0-2.32,1.88-4.2,4.2-4.2h0c2.32,0,4.2,1.88,4.2,4.2v3.12c0-2.59,2.35-4.64,5.04-4.11,1.99.39,3.35,2.26,3.35,4.3h0c0,5.83.45,10.07-.06,15.51-.12,1.25-.34,2.49-.67,3.7l-2.09,7.84h-30.76Z'/%3E%3Cline class='cls-1' x1='26.24' y1='29.16' x2='26.24' y2='35.78'/%3E%3Cline class='cls-1' x1='34.63' y1='18.67' x2='34.63' y2='29.16'/%3E%3Cline class='cls-1' x1='43.03' y1='20.59' x2='43.03' y2='29.16'/%3E%3Cline class='cls-1' x1='51.42' y1='25.71' x2='51.42' y2='29.16'/%3E%3Crect class='cls-1' x='26.24' y='52.94' width='30.76' height='10.34'/%3E%3C/g%3E%3Cline class='cls-1' x1='40.31' y1='7.05' x2='58.94' y2='7.05'/%3E%3Cpolyline class='cls-1' points='52.89 1 58.94 7.05 52.89 13.11'/%3E%3Cline class='cls-1' x1='19.63' y1='7.05' x2='1' y2='7.05'/%3E%3Cpolyline class='cls-1' points='7.05 1 1 7.05 7.05 13.11'/%3E%3C/svg%3E"); animation: leftRight 2.4s infinite linear; }
	@keyframes leftRight {
		0% { transform: translateX(0px); }
	 	50% { transform: translateX(-20px); }  
		100% { transform: translateX(0px); }
	}
	.table-scroll-event .inner::after { content:"좌우로 스크롤하세요"; display: block; margin-top: 15px; font-size: 14px; }
}
.btn-ce { display: flex; justify-content: center; gap: 5px; }
.btn-rg { display: flex; justify-content: flex-end; gap: 5px; }
@media only screen and (max-width: 560px) {
	.btn-ce { flex-wrap: wrap; }
	.btn-ce > a, .btn-ce > button { flex: 1; min-width: fit-content; }
}

.btn-bace1 { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 150px; height: 48px; line-height: 48px; padding: 0 20px; font-family: "Pretendard"; font-weight: 600; font-size: 1.6rem; text-align: center; border-radius: 50px; }
.btn-bace2 { display: block; min-width: 180px; height: 55px; line-height: 55px; padding: 0 35px; font-family: "Pretendard"; font-weight: 500; font-size: 19px; text-align: center; overflow: hidden; white-space: nowrap; text-align: center; border-radius: 50px; }
.btn-bace3 { display: block; min-width: fit-content; height: 40px; line-height: 40px; padding: 0 15px; font-family: "Pretendard"; font-weight: 500; font-size: 16px; text-align: center; overflow: hidden; white-space: nowrap; text-align: center; border-radius: 50px; }
@media only screen and (max-width: 560px) {
	.btn-bace1 { min-width: unset; padding: 0 15px; }
  .btn-bace2 { height: 45px; line-height: 45px; padding: 0 20px; font-size: 16px; }
}

.underline { text-decoration: underline; }
.popup-wrap.active { display: block; }
.popup-list-st1.active { display: block; }
.popup-list-st1 .popup-list-inner .popup-list-box .popup .popup-inner .popup-box1 .btn-ce { background-color: #fff; }
.popup-list-st1 .popup-list-inner .popup-list-box .popup .popup-inner .popup-box1 .btn-ce button { white-space: nowrap; }
@media only screen and (max-width: 767px) {
	.popup-wrap .popup-box1 .close { top: 10px; right: 10px; }
	.popup-wrap .popup-box1 .close i { font-size: 20px; }
}

.no-img { position: relative; background: var(--gray-f6); }

/********** 텍스트 ...처리 **********/
.txt-over1 {display: -webkit-box; display: -ms-flexbox; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.d-flex {display: flex;}
.flx-ali-center { align-items: center; }
.flx-jty-center { justify-content: center; }
.gap10 { gap: 10px; }
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt40 {margin-top:40px;}
.mt60 {margin-top:60px;}
.mt80 {margin-top:80px;}
.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}

@media only screen and (max-width: 560px) {
	.mt60 {margin-top: 30px;}
}

/******************** padding ********************/
.pd0 {padding:0;}
.pd50 {padding:50px;}
.pl15 {padding-left:15px;}

/********** pagination **********/
.pagination-wrap { display: flex; align-items: center; justify-content: center; }
.pagination-wrap a, 
.pagination-wrap strong { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border-radius: 5px; background-color: #fff; text-decoration: none; font-family: "Pretendard"; font-size: 16px; color: #000; }
.pagination-wrap strong { background-color: #000; color: #fff; font-weight: 400; }
.pagination-wrap a.paging-btn { width: 40px; padding: 0; }

.pagination-wrap .paging-btn .hide { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); }
.pagination-wrap .paging-btn::before { content: ""; display: block; width: 14px; height: 14px; background-repeat: no-repeat; background-position: center; background-size: contain; }

.pagination-wrap .paging-btn.first::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='11 17 6 12 11 7'/%3E%3Cpolyline points='18 17 13 12 18 7'/%3E%3C/svg%3E"); }
.pagination-wrap .paging-btn.prev { margin-right: 22px; }
.pagination-wrap .paging-btn.prev::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); }
.pagination-wrap .paging-btn.next { margin-left: 22px; }
.pagination-wrap .paging-btn.next::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); }
.pagination-wrap .paging-btn.last::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='13 17 18 12 13 7'/%3E%3Cpolyline points='6 17 11 12 6 7'/%3E%3C/svg%3E"); }

@media only screen and (max-width: 767px) {
    .pagination-wrap { gap: 0; }
    .pagination-wrap .paging-btn.prev { margin-right: 10px; }
    .pagination-wrap .paging-btn.next { margin-left: 10px; }
}
@media (max-width: 991px) {
    .filter-row { gap: 15px; }
    .filter-label { width: 80px; }
}
@media (max-width: 768px) {
    .search-inner { flex-direction: column; align-items: stretch; gap: 24px; }
    .filter-row { flex-direction: row; align-items: flex-start; gap: 10px; }
    .filter-controls { width: 100%; flex-direction: row; align-items: stretch; }
    .search-input-wrap { max-width: none; }
    
    .filter-btn-group { width: 100%; }
    .btn-filter { flex: 1; min-width: 0; }
    .inp-box-detail { width: 100%; }
    .price-inputs { width: 100%; }
    .price-field { flex: 1; }
}
@media (max-width: 480px) {
    .filter-btn-group, .search-input-box { width: 100%; }
}

    @media (max-width: 480px) {

    }

    @media (max-width: 480px) {

    }

    @media (max-width: 480px) {

    }

    @media (max-width: 480px) {

    }

    @media (max-width: 480px) {

    }

    @media (max-width: 480px) {

    }

/* Styles extracted from mypage\info\edit.jsp */
/* Radio button selection color fix */
    .rdo-st1 input:checked + label:before {
        background: #000;
        border-color: #000;
    }
    .rdo-st1 input:checked + label:after {
        background: #fff;
    }
.unit { font-size:15px; color:#333; }
.btn-download { width: 26px; height: 26px; background: url('/resource/www/images/common/icon-download.png') no-repeat center / contain; border: none; cursor: pointer; }
.badge { display:inline-block; padding: 4px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; color: #fff; }
.dynamic-table th, .dynamic-table td { border-bottom: 1px solid #e5e5e5; padding: 15px 10px; text-align:center; }
.dynamic-table tr:hover { background-color: #fcfcfc; }

/* Custom Modal */
.custom-modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999; justify-content:center; align-items:center; }
.custom-modal-overlay.is-open { display:flex; }
.custom-modal-dialog { transform: translateY(-30px); transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0; background:#fff; }
.custom-modal-overlay.is-open .custom-modal-dialog { transform: translateY(0); opacity: 1; }

/* Button Styles */
.btn-add-purple:hover { opacity: 0.9; box-shadow: 0 4px 12px rgba(44, 91, 171, 0.3); }
.btn-modal-confirm:hover { background-color: #442c93 !important; color: #fff !important; }
.btn-modal-search:hover { background-color: #442c93 !important; color: #fff !important; }
.btn-table-link { padding: 5px 12px; border: 1px solid #ddd; background: #fff; font-size: 13px; border-radius: 4px; cursor: pointer; }
.btn-table-link:hover { background-color: #f9f9f9; }
.btn-table-remove { padding: 5px 12px; border: 1px solid #ddd; background: #fff; font-size: 13px; border-radius: 4px; cursor: pointer; color:#ee3e41; }
.btn-table-remove:hover { background-color: #fff0f0; }
.mypage-btn:hover { background-color: #f0f0f0 !important; }

/* Guide Box */
.guide-box ul { list-style-type: none; padding-left: 0; }
.guide-box li::before { content: "•"; color: #442c93; font-weight: bold; display: inline-block; width: 1em; margin-left: -1em; }
.unit { font-size:15px; color:#333; }
.btn-download { width: 26px; height: 26px; background: url('/resource/www/images/common/icon-download.png') no-repeat center / contain; border: none; cursor: pointer; }
.badge { display:inline-block; padding: 4px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; color: #fff; }

/* Table Common Class */
.table-border-right { border-right: 1px solid #e5e5e5; }
.custom-tab-left .tab-list { justify-content: flex-start; }
.custom-tab-left .tab-list .tab-item.on > a::after { display: none; }
.pagination ul { display: flex; justify-content: center; list-style: none; padding: 0; margin: 0; }

/* Custom Modal Animation */
.custom-modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999; justify-content:center; align-items:center; }
.custom-modal-overlay.is-open { display:flex; }
.custom-modal-dialog { transform: translateY(-30px); transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0; }
.custom-modal-overlay.is-open .custom-modal-dialog { transform: translateY(0); opacity: 1; }

.dynamic-table th, .dynamic-table td { border-bottom: 1px solid #e5e5e5; padding: 15px 10px; }
.dynamic-table tr:hover { background-color: #fcfcfc; }

/* Button Hover Effects */
.btn-add-purple:hover { opacity: 0.9; box-shadow: 0 4px 12px rgba(44, 91, 171, 0.3); }
.btn-modal-confirm:hover { background-color: #442c93 !important; color: #fff !important; }
.btn-modal-search:hover { background-color: #442c93 !important; color: #fff !important; }
.mypage-btn:hover { background-color: #f0f0f0 !important; }

/* Styles extracted from mypage\qna\list.jsp */
.badge { display:inline-block; padding: 4px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; color: #fff; }

/* Styles extracted from mypage\qna\regist.jsp */
.search-box-inline { display:flex; gap:5px; align-items:center;}

/* Styles extracted from mypage\qna\view.jsp */
.view-title {
    font-size: 28px;
    font-weight: 700;
    color: #000;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2; /* Added for compatibility */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-comment-reg:hover { background: #442c93 !important; color: #fff !important; }
.btn-comment-del:hover { background: #f5f5f5 !important; }
.nav-item:hover { background: #eef2f5 !important; }

/* Styles extracted from mypage\result\list.jsp */
/* Reused styles from other mypage lists */
.tab-list.type-year { display:flex; gap:10px; margin-bottom:20px; }
.tab-list.type-year li a { padding: 5px 15px; border-radius:15px; background:#f0f0f0; }
.tab-list.type-year li.active a { background:#333; color:#fff; } */

    /* 2. Page Title hide (if needed, but user said breadcrumb) */
    
    /* 3. Terms width different (Widen the container) */
    .signup-wrap { max-width: 100% !important; padding: 0; } 
    /* inner-padding handles the max-width of 1500px, signup-wrap was restricting to 800px. changing to 100% lets it expand. */

    /* 4. Radio button & Checkbox selection color fix */
    .rdo-st1 input:checked + label:before {
        background: #000;
        border-color: #000;
    }
    .rdo-st1 input:checked + label:after {
        background: #fff;
    }
    .chk-st1 input:checked + label::after {
        background: transparent;
    }

    /* 5. Terms All Checkbox Style Adjustment - Removed to avoid conflict with signup.css */
    
    /* 6. Buttons */
    .btn-ce { margin-top: 60px; gap: 10px; }
    .btn-round { display: flex; align-items: center; justify-content: center; min-width: 200px; height: 60px; font-size: 18px; border-radius: 60px !important; padding: 0; }
    .btn-round.bg-fff { border: 1px solid #000; color: #000; }
    .btn-round.bg-main1 { background: #fff; color: #442c93; border: 1px solid #442c93; }

    /* 2. Breadcrumb hide (Handled in nav.jsp, but adding sub-content adjustment) */
    .sub-content { background: transparent; }
    .inner-padding { max-width: 1440px; margin: 0 auto; }

    /* 3. Signup Wrap Width */
    .signup-wrap { max-width: 1200px !important; margin: 0 auto; }

    /* 4. Membership Type Cards */
    .user-type-wrap { padding: 60px 0; }
    .user-type-wrap .h-tit-st2 { font-size: 32px; font-weight: 700; color: #000; margin-bottom: 50px; text-align: center; }
    
    .user-type-list { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
    .user-type-list li { flex: 1; min-width: 260px; max-width: 280px; }
    .user-type-list li a { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center;
        height: 100%; 
        padding: 50px 30px; 
        border: solid 1px #442c93;
        border-radius: 30px; 
        text-align: center; 
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 
        background: rgba(255, 255, 255, 0.9); 
        backdrop-filter: blur(10px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }
    
    .user-type-list li a:hover { 
        border-color: #442c93; 
        box-shadow: 0 20px 40px rgba(68, 44, 147, 0.15); 
        transform: translateY(-10px); 
        background: #fff;
    }
    
    .user-type-icon { 
        width: 130px; 
        height: 130px; 
        margin-bottom: 30px; 
        background-color: #f8f7ff; 
        border-radius: 50%; 
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
    }
    .user-type-list li a:hover .user-type-icon { background-color: #f1eeff; transform: scale(1.1); }
    
    /* Placeholder for actual icons if images aren't found */
    .user-type-icon:after {
        content: '';
        width: 130px;
        height: 130px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .icon-general:after { background-image: url('/resource/www/images/common/login-normal-2.png'); }
    .icon-artist-indi:after { background-image: url('/resource/www/images/common/login-artist-ind-2.png'); }
    .icon-artist-group:after { background-image: url('/resource/www/images/common/login-artist-org-2.png'); }
    .icon-org:after { background-image: url('/resource/www/images/common/login-org-2.png'); }

    .user-type-txt { display: block; font-size: 24px; font-weight: 700; color: #333; margin-bottom: 12px; }
    .user-type-desc { font-size: 16px; color: #666; line-height: 1.5; word-break: keep-all; }

    .user-type-label { 
        display: block; 
        font-size: 15px; 
        font-weight: 500; 
        color: #666; 
        margin-bottom: 8px; 
    }
    .user-type-list li a:hover .user-type-label { color: #442c93; }

/* Styles extracted from signup\step3.jsp */
/* Radio button selection color fix (from step1.jsp) */
    .rdo-st1 input:checked + label:before {
        background: #000;
        border-color: #000;
    }
    .rdo-st1 input:checked + label:after {
        background: #fff;
    }
    
    /* Buttons (from step1.jsp) */
    .btn-ce { margin-top: 60px; gap: 10px; display: flex; justify-content: center; }
    .btn-round { display: flex; align-items: center; justify-content: center; min-width: 200px; height: 60px; font-size: 18px; border-radius: 60px !important; padding: 0; }
    .btn-round.bg-fff { border: 1px solid #000; color: #000; background: #fff; }
    .btn-round.bg-main1 { background: #fff; color: #442c93; border: 1px solid #442c93; }
    .btn-round.bg-main1:hover { background: #fdfdfd; }

    /* Layout align (from step1.jsp) */
    .signup-wrap { max-width: 100% !important; padding: 0; }
    
    /* Form Table Border (Black) */
    .form-table-wrap { border-top: 2px solid #000 !important; }

/* =========================================
   Common Creation List / Item Component
   ========================================= */
.creation-list-wrap {
    margin-top: 30px;
}
.creation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.creation-item {
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: all 0.4s ease;
}
.creation-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}
.card-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #fff;
    border-bottom: 1px solid #f2f2f2;
}
.card-item-header .badge {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
}
.card-item-header .btn-like {
    width: 24px;
    height: 24px;
    background: transparent url('/resource/www/images/common/btn-like.png') no-repeat center / contain;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}
.card-item-header .btn-like:hover, 
.card-item-header .btn-like.active {
    background-image: url('/resource/www/images/common/btn-like-on.png');
}

.thumb-box {
    position: relative;
    aspect-ratio: 3 / 4; 
    overflow: hidden;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.thumb-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}
.thumb-box::after {
    content: 'VIEW';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -70%);
    background: rgba(68, 44, 147, 0.9); /* #442C93 with slight transparency */
    border: none;
    color: #fff;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 11;
    pointer-events: none;
}
.thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
    position: relative;
    z-index: 1;
}
.creation-item:hover .thumb-box::before {
    opacity: 1;
}
.creation-item:hover .thumb-box::after {
    opacity: 1;
    transform: translate(-50%, -50%); /* small slide down animation */
}
.creation-item:hover .thumb-box img {
    transform: scale(1.05);
}

.info-box {
    padding: 20px 24px;
}
.work-title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.artist-name {
    font-size: 14px;
    color: #888;
    margin-bottom: 12px;
    display: block;
}
.price-info {
    font-size: 14px;
    color: #222;
}
.price-info strong {
    font-size: 18px;
    color: #000;
}

@media(max-width: 1024px) {
    .creation-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media(max-width: 768px) {
    .creation-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media(max-width: 480px) {
    .creation-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .info-box {
        padding: 15px;
    }
    .work-title {
        font-size: 16px;
    }
    .price-info strong {
        font-size: 16px;
    }
}