#contents{background: var(--neutral-20, #F8FAFC);}
.goods_view .container{display: flex; flex-direction: column; gap: 14px; padding: 48px 40px;max-width: 1072px; }
.goods_view .part{width: 100%; display: flex; gap: 24px; align-items: flex-start;}
.goods_view .contents{flex: 1 0 0; display: flex; flex-direction: column; flex-basis: 52%;}
.goods_view section{display: flex; border-radius: 12px; background: #FFF; flex-direction: column;}
.goods_view section+section{margin-top: 14px;}

/* summary */
.summary{padding: 24px; gap: 16px;}
.summary .information{display: flex; flex-direction: column;}
.summary .information .top{display: flex; justify-content: space-between; align-items: center;}
.summary .information .top .tag{display: flex; gap: 6px;}
.summary .information .top .icon{display: flex; gap: 4px;}
.summary .information .top .icon button{width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;}
.summary .information .top .icon button img{width: 24px;}
.summary .information .top .icon .btn_wish:before{content: ''; display: block; width: 24px; height: 24px; background: url('/images/icon/icon-heart.svg')no-repeat; background-size: 24px;}
.summary .information .top .icon .btn_wish.on:before{content: ''; display: block; width: 24px; height: 24px; background: url('/images/icon/icon-heart-fill.svg')no-repeat; background-size: 24px;}
.summary .information strong{font: var(--title-title4-b); letter-spacing: var(--ls-title-title4-b); word-break: keep-all;}

.summary .main_img{border: 1px solid var(--neutral-alpha-120, rgba(21, 28, 41, 0.12)); border-radius: 16px; width: 100%; aspect-ratio: 1/0.57; overflow: hidden;}
.summary .main_img img{width: 100%; height: 100%; object-fit: cover;}


/* 탭 */
._tab{border-radius: 12px 12px 0 0; overflow: hidden;padding-top: 15px; position: sticky; top: 68px; margin-top: 14px;}

/* 상세정보 */
.goods_view .contents .information{padding: 15px 24px 31px; display: flex; flex-direction: column; gap: 12px; border-radius: 0 0 12px 12px;}
.information .quick{display: flex; flex-direction: column; gap: 4px; gap: 4px;}
.information .quick dl{display: flex; align-items: flex-start; gap: 16px;}
.information .quick dt{width: 120px; color: var(--neutral-600, #555F6F); font: var(--label-label3-sb); letter-spacing: var(--ls-label-label3-sb);}
.information .quick dd{flex-grow: 1; font: var(--body-body2-r); letter-spacing: var(--ls-body-body2-r);}
.information .explanation{font: var(--body-body1-r-l); letter-spacing: var(--ls-body-body1-r-l);}

/* 프로세스 */
.process h2 {display: flex; padding: 18px 24px 0px 24px; flex-direction: column; font: var(--title-title6-b); letter-spacing: var(--ls-title-title6-b);}
.process .contents{display: flex; padding: 16px 24px; display: flex; flex-direction: column;}
.process .step{display: flex; gap: 12px;}
.process .step .flow{display: flex; flex-direction: column;align-items: center;}
.process .step .flow:before{content: ''; display: block; width: 1px; height: 7px;}
.process .step .flow:after{content: ''; display: block; width: 1px; height: 0; flex-grow: 1;}
.process .step .flow .circle{width: 6px; height: 6px; border-radius: 100%;}
.process .step .detail{display: flex; gap: 10px; flex-grow: 1;}
.process .step:not(:last-child) .detail{padding-bottom: 18px;}
.process .step .detail dt{width: 87px; flex-shrink: 0; font: var(--title-title7-sb); letter-spacing: var(--ls-title-title7-sb);}
.process .step .detail dd{flex-grow: 1; display: flex; flex-direction: column; gap: 4px;}
.process .step .detail dd p{color: var(--neutral-600, #555F6F); font: var(--body-body2-r); letter-spacing: var(--ls-body-body2-r);}
.process .step .detail dd .img{position: relative; display: inline-flex; align-items: center; vertical-align: top; padding: 3px; margin: 0 0 0 -3px;}
.process .step .detail dd .img img{width: 12px; opacity: 0.5;}
.process .step .detail dd .img ._tooltip{white-space: nowrap; margin-left: 25px; display: none;}
.process .step .detail dd .img:hover ._tooltip{display: flex;}
.process .step:nth-child(1) .flow:after{background: linear-gradient(180deg, #FB923C 0%, #58DACA 100%);}
.process .step:nth-child(1) .flow .circle{background: var(--orange-400, #FB923C);}
.process .step:nth-child(2) .flow:before{background: #58DACA;}
.process .step:nth-child(2) .flow:after{background: linear-gradient(180deg, #58DACA 0%, #B672ED 100%);}
.process .step:nth-child(2) .flow .circle{background: var(--teal-200, #58DACA);}
.process .step:nth-child(3) .flow:before{background: #B672ED;}
.process .step:nth-child(3) .flow .circle{background: var(--lilac-400, #B672ED);}
.process .step.not .flow .circle{background: var(--neutral-80, #E2E8EF);}
.process .step.not:not(:last-child) .flow:after{background: var(--neutral-80, #E2E8EF);}
.process .step.not+.step .flow:before{background: var(--neutral-80, #E2E8EF);}

/* 소개 */
.introduction h2 {display: flex; padding: 18px 24px 0px 24px; flex-direction: column; font: var(--title-title6-b); letter-spacing: var(--ls-title-title6-b);}
.introduction .contents{display: flex; padding: 16px 24px; display: flex; flex-direction: column; gap: 12px;}
.introduction .name{display: flex; align-items: center; gap: 16px;}
.introduction .name img{width: 72px; height: 72px; padding: 4.5px; border-radius: 100%;}

.introduction .name strong{font: var(--body-body1-b); letter-spacing: var(--ls-body-boy1-b);}
.introduction .company_summary{display: flex; flex-direction: column; gap: 4px;}
.introduction .company_summary li{display: flex; align-items: center; gap: 6px;}
.introduction .company_summary .img{width: 20px; height: 20px; border-radius: 100%; display: flex; align-items: center; justify-content: center;}
.introduction .company_summary .contact .img{background: var(--orange-50, #FFF7ED);}
.introduction .company_summary .business .img{background: var(--blue-40, #EEF4FF);}
.introduction .company_summary .map .img{background: var(--amber-50, #FFFBEB);}
.introduction .company_summary img{width: 14px;}
.introduction .text{color: var(--neutral-750, #333C4B); font: var(--body-body1-r-l); letter-spacing: var(--ls-body-body1-r-l);}

/* 우측 영역 */
.goods_view .fixed{flex-basis: 40%; flex-shrink: 0; padding: 24px; display: flex; flex-direction: column; gap: 18px; border-radius: 8px; background: #FFF;}
.goods_view .fixed{padding: 24px; display: flex; flex-direction: column; gap: 18px; border-radius: 8px; background: #FFF; position: sticky; top: 96px;}
.goods_view .fixed .price_wrap{display: flex; flex-direction: column; gap: 6px;}
.goods_view .fixed .price_wrap dl{display: flex; align-items: center; justify-content: space-between;}
.goods_view .fixed .price_wrap dt{color: var(--neutral-600, #555F6F); font: var(--label-label3-b); letter-spacing: var(--ls-label-label3-b);}
.goods_view .fixed .price_wrap dd{display: flex; gap: 4px;}
.goods_view .fixed .price_wrap .discount{color: var(--orange-600, #EA580C); font: var(--title-title5-b); letter-spacing: var(--ls-title-title5-b);}
.goods_view .fixed .price_wrap .price{display: flex; gap: 1px; align-items: center; font: var(--title-title7-b); letter-spacing: var(--ls-title-title7-b);}
.goods_view .fixed .price_wrap .price strong{font: var(--title-title5-b); letter-spacing: var(--ls-title-title5-b);}
.goods_view .fixed .producer{display: flex; flex-direction: column; align-items: center; gap: 16px;}
.goods_view .fixed .producer .name{display: flex; flex-direction: column; align-items: center; gap: 8px;}
.goods_view .fixed .producer .name img{width: 72px; height: 72px; border-radius: 100%; padding: 4.5px;}
.goods_view .fixed .producer .name strong{font: var(--body-body2-sb); letter-spacing: var(--ls-body-boy2-sb);}
.goods_view .fixed .producer p{align-self: stretch; color: var(--neutral-600, #555F6F); font: var(--caption-caption1-r); letter-spacing: var(--ls-caption-caption1-r);}

/* 다른 콘텐츠 추천 */
.recommend h2{display: flex; padding: 18px 24px 0px 24px; flex-direction: column; font: var(--title-title6-b); letter-spacing: var(--ls-title-title6-b);}
.recommend .swiper-outer{width: 100%; padding: 16px 62px;}
.recommend .swiper{width: 100%;}
.recommend .contents_product .thumb{aspect-ratio: 1.57/1; border-radius: 16px;}
.recommend .contents_product .text .tag{padding-bottom: 8px;}
.recommend .contents_product .text .name{padding-bottom: 4px; border: none;}
.recommend .contents_product .text .price{padding: 0; justify-content: flex-start; gap: 4px;}
.recommend .contents_product .text .price strong{font: var(--body-body1-b); letter-spacing: var(--ls-body-body1-b);}
.recommend .contents_product .text .price .period{color: var(--neutral-600, #555F6F); font: var(--body-body2-sb); letter-spacing: var(--ls-body-body2-sb);}
.recommend .swiper-button-prev{left: 12px; top: calc(50% - 19px);}
.recommend .swiper-button-next{right: 12px; top: calc(50% - 19px);}


/********** 콘텐츠 제작 견적 모달 **********/
.modal_container{position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column;z-index: 1040; display: none;background: var(--neutral-40, #F0F4F8);}
.modal_container .container{width: 100%; height: 100%; max-width: 600px; display: flex; flex-direction: column;}
.modal_container.show{display: flex;}
/* 모달 헤더 */
.modal_container .modal_header{display: flex; height: 52px; padding: 0px 8px 0px 24px; border-bottom: 1px solid var(--neutral-alpha-120, rgba(21, 28, 41, 0.12)); background: var(--neutral-00, #FFF); }
.modal_container .modal_header .container{height: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between;}
.modal_container .modal_header .container strong{font: var(--title-title6-b); letter-spacing: var(--ls-title-title6-b);}
.modal_container .modal_header .container .btn_close{width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;}
.modal_container .modal_header .container .btn_close img{width: 24px;}

/* 콘텐츠 레이아웃 */
.modal_contents{display: flex; flex-direction: column; flex-grow: 1;}
.modal_container .modal_contents{height: 0; flex-grow: 1;}
.modal_container .modal_contents .container{height: 100%; display: flex; flex-direction: column;}
.modal_container .modal_contents .form{display: flex; flex-direction: column; height: 0; flex-grow: 1;}
.modal_container .step{flex-grow: 1; display: none; flex-direction: column; height: 100%;}
.modal_container .step.active{display: flex;}
.modal_container .step_contents{flex-grow: 1; display: flex; flex-direction: column; overflow-y: auto; gap: 12px; height: 100%;}
.modal_container .step_contents::-webkit-scrollbar-thumb{border: 4px solid var(--neutral-40, #F0F4F8); }
/* 프로그레스 */
.modal_container .progress{padding: 32px 0 24px; display: flex; flex-shrink: 0;}
.modal_container .progress li{flex: 1 0 0; display: flex; flex-direction: column; align-items: center; gap: 20px; z-index: 1;}
.modal_container .progress li .number{width: 16px; height: 16px;  border-radius: 100%; font: var(--label-label4-sb); letter-spacing: var(--ls-label-label4-sb); display: flex; align-items: center; justify-content: center; background: var(--neutral-00, #FFF);;}
.modal_container .progress li strong{color: var(--neutral-600, #555F6F); font: var(--title-title7-sb); letter-spacing: var(--ls-title-title7-sb);}
.modal_container .progress li .number{ outline-width: 3px; outline-style: solid; font: var(--label-label4-b); letter-spacing: var(--ls-label-label4-b);}
.modal_container .progress li:nth-child(1) .number{color: var(--orange-500, #F97316);}
.modal_container .progress li:nth-child(2) .number{color: var(--teal-400, #00A293);}
.modal_container .progress li:nth-child(3) .number{color: var(--lilac-400, #B672ED);}
.modal_container .progress li.active~li .number{color: var(--neutral-00, #FFF); background: var(--neutral-200, #BDC7D6); outline-color: transparent;}
.modal_container .progress:before{content: ''; display: block; height: 1px; width: calc(50% - (100% / 6)); background: var(--neutral-80, #E2E8EF); position: absolute; top: 40px; left: calc(100% / 6); z-index: 0;}
.modal_container .progress:after{content: ''; display: block; height: 1px; width: calc(50% - (100% / 6)); background: var(--neutral-80, #E2E8EF); position: absolute; top: 40px; right: calc(100% / 6); z-index: 0;}
.modal_container .progress:has(li:nth-child(2).active):before, .modal_container .progress:has(li:nth-child(3).active):before{ background: linear-gradient(90deg, #F97316 0%, #00A293 100%);}
.modal_container .progress:has(li:nth-child(3).active):after{ background: linear-gradient(90deg, #00A293 0%, #B672ED 100%), #E2E8EF;}
.modal_container .progress li.active strong{color: var(--neutral-900, #151C29);}
.modal_container .progress:has(+form .step.end.active){display: none;}

.modal_container section{display: flex; overflow: hidden; border-radius: 12px; background: #FFF; flex-direction: column; flex-shrink: 0;}
.modal_container section h2{display: flex; flex-direction: column; gap: 2px; padding: 24px 24px 0px 24px; font: var(--title-title6-b); letter-spacing: var(--ls-title-title6-b); flex-shrink: 0;}
.modal_container section h2 .required:after{content: '*'; color: var(--rose-500, #DF2E5C); font: var(--title-title7-sb); margin-left: 4px;}
.modal_container section h2 p{color: var(--neutral-400, #8692A3); font: var(--body-body2-r); letter-spacing: var(--ls-body-body-r);}
.modal_container section .contents{padding: 16px 24px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px;}
/* 2part 레이아웃 */
.modal_container section .input_select_wrap{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; gap: 5px;}
.modal_container section .input_select_wrap > *{flex: 1 0 40%}
.modal_container section .input_select_wrap.col{display: flex; flex-direction: column; gap: 6px;}

/* 질문 안에 카테고리 있을 때 */
.modal_container section .field{display: flex; flex-direction: column; gap: 6px;}

/* 레이아웃 */
.modal_container section ._label_control{padding: 0;}
.modal_container section .row{display: flex; flex-direction: row; gap: 10px;}
.modal_container section .row ._input{flex-grow: 1;}
.modal_container section input[type="checkbox"]+label:has(> span), .modal_container section input[type="radio"]+label{padding: 7px 0;}

/* 추가 입력 */
.modal_container section .etc{display: flex; flex-direction: column; gap: 2px;}
.modal_container section .input_etc{width: 100%; max-width: 250px;}
.modal_container section textarea{resize: vertical;}


/* 레퍼런스 영상 */
.modal_container .contents.reference{align-items: flex-start;}
.modal_container section .reference_wrap{display: flex; flex-direction: column; gap: 16px; align-self: stretch;}
.modal_container section .reference_wrap ._label_control{justify-content: space-around;}
.modal_container section .reference_wrap ._label_control .btn_del{color: var(--rose-500, #DF2E5C);}
.modal_container section .reference_wrap ._label_control:first-child .btn_del{display: none;}
.modal_container .contents.reference ._label{justify-content: space-between; align-items: center;}

/* 제작 편수 */
.modal_container section .number .control{display: flex; align-items: center; gap: 5px; font: var(--label-label2-r); letter-spacing: var(--ls-label-label2-r); flex-direction: row;}
.modal_container section .number input[type="text"]{width: 110px;}

/* 파일 첨부 */
.modal_container section .file{display: flex; flex-direction: column; gap: 20px; align-items: flex-start;}


/* 토스트 */
.modal_container section ._toast{left: 0;}

/* 하단 버튼 */
.modal_container .modal_contents .btn_wrap{display: flex ;justify-content: center; gap: 8px; padding: 24px 0 32px;}
.modal_container .modal_contents .btn_wrap button{width: 100%; max-width: 240px;}

/* 작성 완료 */
.step.end .title{padding: 32px 24px; display: flex ;flex-direction: column; align-items: center; gap: 12px;}
.step.end .title img{width: 93px; border-radius: 100%;}
.step.end .title strong{font: var(--title-title5-sb); color: var(--neutral-750, #333C4B);}
.step.end .title strong .color{color: var(--orange-600, #EA580C);}

.step.end section h2{display: flex; flex-direction: row; padding: 24px 24px 0 24px; justify-content: space-between;}
.step.end section h2 strong{font: var(--title-title6-b); letter-spacing: var(--ls-title-title6-b);}
.step.end section h2 button{opacity: 0.5;}
.step.end section .contents{gap: 6px;}
.step.end section .contents dl{display: flex; align-items: flex-start; gap: 16px;}
.step.end section .contents dt{width: 80px; flex-shrink: 0; font: var(--label-label3-sb); letter-spacing: var(--ls-label-label3-sb);}
.step.end section .contents dd{flex-grow: 1; font: var(--label-label3-r); letter-spacing: var(--label-label3-r);}
.step.end section .contents dd a{text-decoration: underline;}
.step.end .btn_wrap{flex-direction: column; gap: 16px; align-items: center;}