@charset "utf-8";

:root {
  --form-red-color: #E00719;
}

/* Info
 ========================================================================== */
/**
    * 1. Writer: goun.lee (Weaverloft Corp.)
    * 2. Production Date: 2026-03
    * 3. Client: Neopharm
 */

/*========== Common ==========*/

.sub-header .title-wrap {display: flex; align-items: center; justify-content: center;}
.sub-header .sec-title {color:#AAAAAA;}
.sub-header .sec-title.active {color:var(--font-color-1);}
.sub-header .divider {display: inline-block; width: 2px; height: 40px; background: #CCCCCC; margin-inline: 32px;}

/*========== intro content ==========*/
.intro-content {padding-block: 60px ;}
.intro-content .intro-list {display: flex; gap:40px; max-width: 880px; width: 100%; margin: 0 auto;}
.intro-content .intro-list .intro-item {max-width: 420px; width: 100%;}
.intro-content .intro-list .intro-item > a {width: 100%;}
.intro-content .intro-list .intro-item .img-wrap {width: 100%;min-height: 334px; padding: 20px; background: rgba(255, 207, 26, 0.08); border-radius: 20px; border:2px solid #FFCF1A; display: flex; align-items: center; justify-content: center; }
.intro-content .intro-list .intro-item .img-wrap img {width: auto;}
.intro-content .intro-list .intro-item .text-wrap {display: flex; flex-direction: column; align-items: center; gap: 15px;padding: 34px 10px; background: #fff; border-radius:20px; border:2px solid #FFCF1A; margin-top: -2px; position: relative;}
.intro-content .intro-list .intro-item .intro-line {position: absolute;top:-2px; background:#fff; width: auto;}
.intro-content .intro-list .intro-item .text-wrap .title {font-size: 28px; color:#F5A112; font-weight: 700;}
.intro-content .intro-list .intro-item .text-wrap .desc { font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: -3%; text-align: center; color:#666;}
.intro-content .intro-list .intro-item:nth-child(2) .title {color:var(--point-color);}
.intro-content .intro-list .intro-item:nth-child(2) .img-wrap {border-color:#67C55C;background: rgba(103, 197, 92,0.08);}
.intro-content .intro-list .intro-item:nth-child(2) .text-wrap {border-color:#67C55C;}


/* ============== 모달 팝업 커스텀 ============== */
.modal-popup .front-btn.sml {min-width: 175px; min-height: 43px; font-weight: 500; font-size: 14px;}
.modal-popup .modal-icon {width:clamp(94px,calc(120 / 767 * 100vw),120px);}

/* ============== 버튼 ============== */
.form-check-btn {flex-shrink: 0; height:42px; padding:10px 20px; border-radius: 6px; font-size:14px; font-weight: 500; white-space: nowrap; color:var(--font-color);}
.form-check-btn.theme-green {background: var(--green-color); color:#fff;}
.form-check-btn.theme-border {border:1px solid var(--border-color-c);}
.front-btn.size-300 {min-width: 300px; min-height: 60px;}
.front-btn.theme-green { background: var(--point-color); color: #fff; }
.front-btn.theme-border { border:1px solid var(--point-color); color: var(--point-color); }
.front-btn.theme-border-dark { border:1px solid var(--border-color-c); color: var(--font-color); }



/*========== 접수 및 확인 공통요소 ==========*/
.point-color {color:var(--point-color);}
.blue-board {background:#F7F8FA; border-radius:12px; padding: 30px;  color:var(--font-color);}
.receipt-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px;border-bottom: 2px solid var(--font-color-1);}
.receipt-header .form-title { font-size: 24px; font-weight: 600; color: var(--font-color-1); }
.receipt-section { padding-block: 60px; max-width: 1040px; margin: 0 auto; --form-red-color: #E00719;}
.form-section.header-none .receipt-header {display: none;}

/* 단계 표시 */
.apply-step {display: flex; align-items: center; justify-content: center; gap: 20px;  margin-bottom: 36px; }
.apply-step .step {font-weight: 600; font-size: 20px; line-height: 100%; color: var(--font-color-a); }
.apply-step .step.active {color: var(--font-color-1); }
.apply-step .step-arrow { display: inline-block; width: 16px; height: 16px; background: url("/atp_gcontest/front/assets/images/sub/icon-path-arrow.svg") no-repeat center / contain; }

/* 안내 박스 */
.notice-box {  margin-bottom: clamp(16px,calc(20 / 1024 * 100vw),20px); background: #fff; border:1px solid #DDDDDD;}
.notice-box ul { display: flex; flex-direction: column; }
.notice-box ul li { position: relative; padding-left: 14px; font-size: 13px; color: var(--font-color); line-height: 1.38; position: relative;}
.notice-box ul li::before { content: ''; position: absolute; left: 0; background: var(--font-color); width: 5px;height: 5px; border-radius: 50%; top: 50%; transform: translateY(-50%); }

/* 보호자 정보 폼 섹션 */
.form-section { margin-bottom: 80px; position: relative; }
.receipt-header .required-note { font-size: 16px; font-weight: 500; color:var(--font-color-6)}
.receipt-header .required-note .required { color: var(--form-red-color); font-weight: 500;}

.form-body { border-bottom: 1px solid var(--border-color-c); }
.form-group { display: flex; align-items: flex-start; gap: 24px; padding: 20px 0; border-top: 1px solid var(--border-color-c); }
.form-label { flex-shrink: 0; width: clamp(100px,calc(180 / 1399 * 100vw),180px); font-size: 16px; font-weight: 500; color: var(--font-color-6); padding-top: 10px; }
.form-label.required::after { content: ' *'; color: var(--form-red-color); }
.form-control { flex: 1; display: flex; gap: 12px;}

.input-text { width: 100%; min-width: 400px; height: 42px; padding:14px; border: 1px solid var(--border-color-c); border-radius: 6px;  background: #fff; outline: none;  font-size: clamp(14px,calc(16 / 1024 * 100vw),16px);}
.input-text:focus { border-color: var(--green-color); }
.input-text::placeholder { color: var(--font-color-a); }
.error-message { display: none; margin-top: 6px; font-size: 13px; color: var(--form-red-color); position: relative; gap: .2rem;}
.error-message::before { content: '';display: inline-block;width: 16px;height: 16px;background: url("/atp_gcontest/admin/assets/images/icon-info.svg") no-repeat center / cover; }
.form-control.is-error .input-text { border-color: var(--form-red-color); }
.form-control.is-error .error-message { display: flex; }

.input-group { display: flex; align-items: flex-start; flex-direction: column;}
.input-timer-wrap { position: relative; flex: 1; max-width: 400px;}
.input-timer-wrap .timer { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 16px; font-weight: 400; color: var(--point-color);  display: none;}
.input-timer-wrap.timer-start .timer { display: flex;}
.verify-success { margin-top: 8px; font-size: clamp(12px,calc(13 / 1024 * 100vw),13px); color: var(--point-color);}
.btn-confirm {opacity: 0.5; pointer-events: none;}
.btn-confirm.enabled {opacity: 1; pointer-events: initial;}


/* 개인정보 동의 섹션 */

.agree-body { padding-top: 20px; }
.agree-list-wrap {border-bottom: 1px solid var(--border-color-c); padding-bottom: 20px; margin-bottom: 10px;}
.agree-list { border-radius: 8px; display: flex; flex-direction: column; gap: 6px;}
.agree-list li { font-size: 13px; color: var(--font-color); margin-bottom: 1rem;}
.agree-list li:last-child { margin-bottom: 0;} 
.agree-title {display: block;  font-size: clamp(12px,calc(13 / 767 * 100vw),13px); color:var(--font-color)}



/* 라디오, 체크박스 */
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; color: var(--font-color-1); }
.checkbox-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.checkbox-custom { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid #ccc; border-radius: 1px; background: #fff; flex-shrink: 0; transition: all 0.2s; }
.checkbox-input:checked + .checkbox-custom { background: var(--green-color); border-color: var(--green-color); }
.checkbox-input:checked + .checkbox-custom::after { content: ''; display: block; width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg) translate(-1px,-1px); }

.radio-label {display: flex; align-items: center; gap: 5px; cursor:pointer; font-size: 16px; color:var(--font-color); height: 42px;}
.radio-input {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.radio-custom {display: flex; align-items: center; justify-content: center;  width: 20px; height: 20px;  border-radius: 50%; background: #CCCCCC; flex-shrink: 0; transition: all 0.2s; }
.radio-input + .radio-custom::after { content: ''; display: block; width: 10px; height: 10px; background: #fff; border-radius: 50%;}
.radio-input:checked + .radio-custom { background: var(--green-color); border-color: var(--green-color); }



/* 접수하기 버튼 */
.agree-wrap {padding-bottom: 30px;}
.agree-section {padding-bottom: 50px;}
.submit-wrap.gap-20 {gap: 20px;}
.submit-wrap .front-btn {border-radius: 6px;}

.submit-wrap .btn-save-draft {position: relative; overflow: visible;}
.submit-wrap .btn-save-draft:before {content: '임시저장 되었습니다.'; position: absolute; bottom:calc(100% + 10px); left:50%;  font-size: clamp(10px,calc(14 / 1024 * 100vw),14px); background:var(--point-color); color:#fff; border-radius: 50px; padding: .5rem 1rem; line-height: 1.5; opacity: 0; transform:translateX(-50%) translateY(10px); transition: .3s ease-in;}
.submit-wrap .btn-save-draft.active:before {opacity: 1; transform:translateX(-50%) translateY(0);}
.textarea-field {width: 100%; height: 70px; padding: 10px 14px; border: 1px solid var(--border-color-c); border-radius: 6px;  background: #fff; outline: none;   font-size: clamp(14px,calc(16 / 1024 * 100vw),16px)}
.input-group:has(.textarea-field) {width: 100%;}
.group-form-section {position: relative;}

/* 제출정보 1개만 있을때 삭제버튼 비노출, 추가버튼 노출 */
.group-form-section .form-section:first-child .form-group-info-number {display: none;}
.group-form-section .form-section:first-child .btn-info-delete {display: none;}



/* 제출정보 추가될 경우 삭제버튼 노출, 번호 노출 ,receipt-header 비노출*/
.group-form-section:has(.add-info-section) .form-section .btn-info-delete {display: block;}
.group-form-section:has(.add-info-section) .form-section .form-group-info-number {display: block;}
.group-form-section .add-info-section:not(:first-child) .receipt-header {padding: 0;}
.group-form-section .add-info-section:not(:first-child) .form-title {display: none;}
.group-form-section .add-info-section:not(:first-child) .required-note {display: none;}

.group-form-section .form-section:not(:last-child) .last-save-time-wrap {display: none;}
.group-form-section .form-section:last-child .last-save-time-wrap {display: block;}

.group-form-section .last-save-time-wrap {position: absolute; bottom:0; left:0;}
.last-save-time-wrap {position: relative;}
.last-save-time-wrap .last-save-time {margin-top: 20px; color:var(--font-color-6); }
.last-save-time-wrap .last-save-tit {font-weight: 700; font-size: clamp(13px,calc(16 / 1024 * 100vw),16px);}
.last-save-time-wrap .last-save-time-text {font-size: clamp(13px,calc(14 / 1024 * 100vw),14px); color: var(--font-color-6); line-height: 1.38;}
.last-save-time-wrap .last-save-time-text .green {color: var(--point-color); font-weight: 500;}
.last-save-time-wrap .last-save-time-text.no-date {display: inline-block;}
.last-save-time-wrap .last-date {display: none;}

.last-save-time-wrap.active .no-date {display: none;}
.last-save-time-wrap.active .last-date {display: inline-block;}

.form-title:has(.notice-info) {display: flex;  gap:1rem; align-items: center;}
.notice-info {position: relative; color:#999; font-size: clamp(10px,calc(13 / 1024 * 100vw),13px); display: flex; gap: 4px;  padding-top: 5px; font-weight: 400;}
.notice-info:before {content: ''; display: block; width: 16px; height: 16px; background: url("/atp_gcontest/admin/assets/images/icon-info-gray.svg") no-repeat center / cover;}

.form-group-info-status {display: flex; gap: 8px; padding-top: 12px; justify-content: flex-end;}
.form-group-info-status .form-check-btn {min-width: 80px; height: 37px;}
.form-group-info-number {font-weight: 600;color:var(--font-color-1);padding-block: 12px; font-size: clamp(14px,calc(16 / 1024 * 100vw),16px);}


/* 상세 보기 전용 */
.form-body-view .form-label {padding-top: 0; line-height: 1.5;}
.form-value {color: var(--font-color); line-height: 1.5; display: flex; align-items: center; gap: 8px; font-size: clamp(14px,calc(16 / 1024 * 100vw),16px);}
.file-img-icon {display: inline-block; width: 24px; height: 24px; background: url("/atp_gcontest/front/assets/images/sub/receipt/icon-file-img.svg") no-repeat center / contain; flex-shrink: 0;}
.file-name {font-size: clamp(14px,calc(16 / 1024 * 100vw),16px);}
.last-save-time-text.submit-complete { color: var(--point-color); }
.last-save-time-text.draft-saved { color: var(--font-color-6);}

/* 개인접수 상세페이지 */
.receipt-detail-indiv .form-body {padding-block:16px;}
.receipt-detail-indiv .form-group {border:none; padding-block:16px;}

/* 개인접수 수정페이지 */
.receipt-edit-page .input-text {color:var(--font-color-1);}

/* 단체접수 상세페이지 */
.receipt-detail-group .group-form-section .receipt-header {border-bottom:none;}
.receipt-detail-group .form-group {border:none;padding-block:16px;}
.receipt-detail-group .form-group-info-number {border-bottom:1px solid var(--border-color-c); border-top:2px solid var(--font-color-1)}
.receipt-detail-group .group-form-section .last-save-time-wrap {top:100%;}
.receipt-detail-group .agree-section {padding-top: 30px;}





/* 수정작업 진행 */
.group-form-section .completed-info-section .btn-info-add {display: none;}
.group-form-section .completed-info-section:not(:first-child) .form-title { display: none;}
.group-form-section .completed-info-section:not(:first-child) .required-note { display: none;}
.receipt-edit-page .file-display {display: flex; align-items: center; gap: 8px;}
.group-form-section .add-info-section .btn-info-add {display: block;}

.agree-checkbox-wrap {display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px,calc(16 / 1024 * 100vw),16px); margin-bottom: clamp(40px,calc(60 / 1024 * 100vw),60px);}
.agree-checkbox-wrap .arrow-icon {display: inline-block;width: 20px;height: 20px; background: url("/atp_gcontest/front/assets/images/sub/icon-path-arrow.svg") no-repeat center / contain;}
.agree-checkbox-wrap .arrow-icon.rotate {transform: rotate(180deg);}



.agree-info-modal .modal-wrap {max-width:var(--modal-width-narrow);}
.agree-info-modal .modal-content {padding:0;padding-bottom: 30px; align-items: flex-start;}
.agree-info-modal .modal-txt-wrap {padding-block:0; text-align: left; width: 100%; }
.agree-info-modal .modal-title {padding:16px;}
.agree-info-modal .divider {width: 100%; height: 1px; background: var(--border-color-c); }
.agree-info-modal .agree-info-body {padding-inline:20px; overflow-y: auto; max-height:307px; margin-block:20px; position: relative;}
.agree-info-modal .agree-info-body:before {content:'';position: fixed; bottom:95px; left:50%; transform: translateX(-50%); display: block; width:calc(100% - 65px); background: #F7F8FA; height:20px;  border-radius: 6px; }
.agree-info-modal .agree-info-body::-webkit-scrollbar  {width: 4px;}
.agree-info-modal .agree-list-wrap {min-height:307px; padding:clamp(16px,calc(20 / 767 * 100vw),20px);  border-bottom: none; border-radius: 6px; margin-bottom: 0; }
.agree-info-modal .agree-list li {font-size: clamp(12px,calc(14 / 767 * 100vw),14px); line-height: 1.6;}
.agree-info-modal .agree-title {margin-bottom: .5rem; font-weight: 600; font-size: clamp(12px,calc(14 / 767 * 100vw),14px);}
.agree-checkbox-title {font-size: 16px; font-weight: 500; color:var(--font-color-6);}

@media screen and (max-width:1024px){
  .sub-header .divider {height:clamp(18px,3.91vw,40px); width: 1px;}
  .intro-content {padding-block: clamp(30px,5.86vw,60px);}
  .intro-content .intro-list {width: 100%; gap: clamp(16px,3.91vw,40px);}
  .intro-content .intro-list .intro-item .text-wrap {gap: 8px; padding:12px;margin-top: 0;}
  .intro-content .intro-list .intro-item .text-wrap .title {font-size: clamp(16px,2.73vw,28px);}
  .intro-content .intro-list .intro-item .text-wrap .desc {font-size: clamp(12px,1.56vw,16px);}
  .intro-content .intro-list .intro-item .intro-line {height: 3px; top:-3px; width:calc(100% - 32px);}

  .apply-step .step {font-size: clamp(13px,1.95vw,20px);}

  .notice-box ul li {font-size: clamp(12px,1.27vw,13px); word-break: keep-all; padding-left: 10px;}
  .agree-list li {font-size: clamp(12px,1.27vw,13px); word-break: keep-all;}
  .receipt-header .required-note {font-size: clamp(12px,1.27vw,13px);}
  .form-label {font-size: clamp(14px,1.56vw,16px);}
  .radio-label {font-size: clamp(14px,1.56vw,16px);}
  .checkbox-label {font-size: clamp(14px,1.56vw,16px); font-weight: 400;}
  .front-btn {font-size: clamp(14px,1.56vw,16px);}
  .receipt-header .form-title {font-size: clamp(16px,2.34vw,24px);}
  .error-message {font-size: clamp(12px,1.27vw,13px);}
}
@media screen and (max-width:767px){
  .intro-content .intro-list {flex-direction: column;}
  .intro-content .intro-list .intro-item {max-width: 100%;}
  .intro-content .intro-list .intro-item > a {flex-direction:row; display: flex;}
  .intro-content .intro-list .intro-item .img-wrap {width: 100%; min-height: auto; border-radius: 10px; border-width:1px;}
  .intro-content .intro-list .intro-item:nth-child(1) .img-wrap img { width:clamp(65px, 15.56vw, 147px); height:auto; aspect-ratio: 65 / 96;  }
  .intro-content .intro-list .intro-item:nth-child(2) .img-wrap img { width:clamp(120px, 30.37vw, 311px); height:auto; aspect-ratio: 120 / 91;  }
  .intro-content .intro-list .intro-item .intro-line {transform: rotate(90deg); top:50%; right:50%; width: 100%; display: none;}
  .intro-content .intro-list .intro-item .text-wrap {min-width: 140px;justify-content: center;margin-left: -2px; padding: 5px; width:40%; border-width:1px; position: relative; border-radius: 10px;}
  .intro-content .intro-list .intro-item .text-wrap::before {content: ''; display: block; background: url("/atp_gcontest/front/assets/images/sub/receipt/intro-line-1-mo.svg") no-repeat center / cover; position: absolute; left:-1px; top:50%; transform: translateY(-50%); width:1px; height:90%; background-color:#fff;}
  .intro-content .intro-list .intro-item:nth-child(2) .text-wrap::before {background: url("/atp_gcontest/front/assets/images/sub/receipt/intro-line-2-mo.svg") no-repeat center / cover;  background-color:#fff;}
  .intro-content .intro-list .intro-item .text-wrap .desc {word-break: keep-all; line-height: 1.2;}
  .receipt-section {padding-block:clamp(30px,5.86vw,60px);}
  .apply-step {flex-direction: column; gap: 6px;}
  .apply-step .step-arrow {transform:rotate(90deg);}
  .blue-board {padding:clamp(16px,2.93vw,30px);}
  .notice-box {padding-left: 20px; }
  .agree-checkbox-wrap {margin-bottom: 40px;}

  .notice-box ul li::before {width:3px; height: 3px; /*top:18%;*/}
  .receipt-header {padding-bottom: clamp(14px,1.56vw,16px);}
  .form-section {margin-bottom: clamp(60px,7.81vw,80px);}
  .form-group {flex-direction: column; gap: 10px; padding-block: clamp(16px,1.95vw,20px);}
  .form-label {padding-top: 0;width: 100%;}
  .radio-label {height:clamp(17px,3.91vw,42px);}
  .form-control {flex-direction: column; gap: 8px; width: 100%;}
  .form-control:has(.radio-label) {flex-direction: row; gap: 20px;}
  .form-control:has(.radio-label) .input-group {width: auto;}
  .input-text {width: 100%; min-width: 100%; height: clamp(40px,4.10vw,42px);padding:10px; border-radius: 4px;}

  .agree-list-wrap {padding-bottom: clamp(16px,1.95vw,20px); margin-bottom: clamp(16px,1.95vw,20px);}
  .checkbox-custom {width: 16px; height: 16px;}
  .agree-section {padding-bottom: clamp(50px,7.81vw,80px);}
  .front-btn.size-300 {min-height: 17px; min-width: 0; width: 100%;}
  .input-timer-wrap {width: 100%; max-width: 100%;}
  .input-timer-wrap .timer {font-size: clamp(13px,1.56vw,16px);right: 8px;}
  .form-check-btn {border-radius: 4px;}
  .textarea-field {height: clamp(120px,6.84vw,70px);}
  textarea.textarea-field::placeholder {font-size: clamp(13px,1.56vw,16px);}
  .last-save-time-wrap .last-save-time {margin-top: clamp(16px,1.95vw,20px);}
  .last-save-time-wrap .last-save-time {font-size: clamp(13px,1.56vw,16px);}
  .last-save-time-wrap .last-save-time-text {font-size: clamp(13px,1.37vw,14px);}
  .input-group {width: 100%;}
  .submit-wrap.gap-20 {flex-direction: column; gap: 10px;}
  .form-group-info-status .form-check-btn {min-width:0; flex: 1;}
  .form-group-info-number {padding-block:8px;}
  .agree-body {padding-top: 16px;}

  .group-form-section .add-info-section:not(:has(~ .add-info-section)) .form-group-info-status {padding-top: 50px;}
  .group-form-section .last-save-time-wrap {bottom:55px;}

  .modal-popup .front-btn.sml {min-width:0; width: 100%; padding: .5rem; min-height: auto; line-height: 1.8;}
  .modal-popup .modal-txt-wrap {padding-block: 28px 30px;}

  .form-body-view .form-label {width: 78px; font-weight: 600;}
  .receipt-detail-indiv .form-group,
  .receipt-detail-group .form-group {flex-direction: row; border-bottom:1px solid var(--border-color-c);}
  .receipt-detail-indiv .form-body,
  .receipt-detail-group .form-body {border-bottom:none; padding-block: 0;}

  .file-img-icon {width: 16px; height: 16px;}
  .form-value {gap: 4px; font-weight: 600;}
  .radio-custom {width: 16px; height: 16px;}
  .radio-input + .radio-custom::after {width: 8px; height: 8px;}

  .agree-info-modal .agree-list-wrap {margin-bottom: 0; border-radius: 4px; min-height:258px;}
  .agree-info-modal .modal-txt-wrap {padding-block:0;}
  .agree-info-modal .modal-btn-wrap {width: calc(100% - 32px); margin: 0 auto;}
  .agree-info-modal .modal-content {padding-bottom: 20px;}
  .agree-info-modal .agree-info-body {max-height:258px;}
  .agree-info-modal .agree-info-body:before {bottom:83px;}
  .agree-info-modal .agree-info-body::-webkit-scrollbar {width: 3px;}
  .agree-info-modal .modal-title {padding:14px}
}


@media screen and (max-width:599px){
  .intro-content .intro-list .intro-item .intro-line {right:55%; width: calc(100% - 12px);}
}
@media screen and (max-width:360px){
  .intro-content .intro-list .intro-item > a {overflow: hidden; min-height: 120px;}
  .intro-content .intro-list .intro-item .img-wrap {padding: 10px;}
  .intro-content .intro-list .intro-item .text-wrap .title {font-size: 14px;}
}


select.input-select {min-width:400px; padding-left: 14px; color:#8c8c8c;}
select.input-select:invalid {color:#8c8c8c;}
select.input-select:valid {color:#333;}
select.input-select option {color:#333;}

@media screen and (max-width:767px){
  select.input-select {min-width:100%;}
}


/* 제출완료 배너 */
.complete-banner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding-bottom: 60px; text-align: center; }
.complete-icon { display: block; width: clamp(40px,calc(68 / 1024 * 100vw),68px); height: clamp(40px,calc(68 / 1024 * 100vw),68px); background: var(--point-color); border-radius: 50%; position: relative; flex-shrink: 0; }
.complete-icon::after { content: ''; display: block; width: 30px; height: 16px; border: 5px solid #fff; border-top: none; border-right: none; transform: rotate(-45deg) translate(2px, 4px); position: absolute; top: 50%; left: 50%; margin-top: -14px; margin-left: -19px; border-radius: 3px; }
.complete-title { font-size: 30px; font-weight: 700; color: var(--point-color); }
.complete-desc { font-size: 24px; color: var(--font-color-9); line-height: 1.5; font-weight: 500; }

@media screen and (max-width:1024px){
  .complete-title {font-size: clamp(26px,calc(26 / 1024 * 100vw),30px);}
  .complete-desc {font-size: clamp(16px,calc(18 / 1024 * 100vw),24px);}
}
@media screen and (max-width:767px){
  .complete-banner { padding-block: clamp(30px,5.86vw,50px) clamp(36px,7.03vw,60px); gap: 12px; }
  .complete-icon::after { width: 20px; height: 12px; margin-top: -10px; margin-left: -13px; border-width: 4px;}
  .complete-title { font-size: clamp(18px,5.33vw,26px); }
  .complete-desc { font-size: clamp(14px,3.73vw,16px); }
}


/* 쿠폰 지급 섹션 */
.coupon-section { margin-bottom: 80px; }
.coupon-section-title { font-size: clamp(20px,calc(24 / 1024 * 100vw),24px); font-weight: 600; color: var(--font-color-1); padding-bottom: 20px; border-bottom: 1px solid var(--font-color-1); margin-bottom: 32px; }
.coupon-wrap { display: flex; align-items: center; gap: clamp(20px,calc(50 / 1024 * 100vw),80px); border-bottom: 1px solid #ccc; padding-bottom: 40px;}

.coupon-card { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 266px; background:url("/atp_gcontest/front/assets/images/sub/receipt/coupon-img.svg") no-repeat center / cover; border-radius: 10px; padding: 26px 24px; position: relative;  min-height: auto; aspect-ratio: 266 / 167; }
.coupon-shop { font-size: clamp(14px,calc(18 / 1024 * 100vw),18px); font-weight: 600; letter-spacing: -0.01em; color:#fff;}
.coupon-amount { font-size: clamp(32px,calc(48 / 1024 * 100vw),48px); font-weight: 700; color: #fff; line-height: 1.1; }
.coupon-amount span { font-size: clamp(20px,calc(32 / 1024 * 100vw),32px); font-weight: 400; }
.coupon-info { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.coupon-info-row { display: flex; align-items: flex-start; gap: 27px; }
.coupon-info-label { flex-shrink: 0; width: 72px; font-size: 16px; font-weight: 500; color: var(--font-color-6); padding-top: 10px; }
.coupon-code-wrap { display: flex; align-items: center; gap: 8px; }
.coupon-code-input { height: 40px; padding: 0 14px; border: 1px solid var(--border-color-c); border-radius: 6px; font-size: 14px; color: var(--font-color-1); background: #fff; width: 240px; outline: none; }
.coupon-copy-btn { flex-shrink: 0; height: 40px; padding: 0 20px; background: var(--green-color); color: #fff; border-radius: 6px; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: opacity .2s; }
.coupon-copy-btn:hover { opacity: .85; }
.coupon-usage-list { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.coupon-usage-list li { font-size: 16px; color: var(--font-color); line-height: 1.6; counter-increment: coupon-step; }
.coupon-usage-list li::before { content: counter(coupon-step) '. '; }
.coupon-usage-list { counter-reset: coupon-step; }
.coupon-note { font-size: 16px; color: var(--font-color-6); margin-top: 4px; padding-left: 96px; }
.coupon-note-star { color: var(--point-color); }

@media screen and (max-width:1024px){
  .coupon-card {width: clamp(180px,calc(266 / 1024 * 100vw),266px); min-height: auto; aspect-ratio: 266 / 167; }
}
@media screen and (max-width:767px){
  .coupon-section {margin-bottom: 40px;}
  .coupon-wrap {flex-wrap: wrap; align-items: flex-start; gap: 20px; }
  .coupon-card::before { left: -9px; }
  .coupon-card::after { right: -9px; }
  .coupon-amount { font-size: clamp(36px,calc(40 / 767 * 100vw),40px); }
  .coupon-code-input { width: 100%; }
  .coupon-code-wrap { width: 100%; }
  .coupon-info {min-width: 300px;}
  .coupon-info-row { flex-direction: column; gap: 6px; }
  .coupon-info-label { padding-top: 0; width: auto; font-size: 14px;}
  .coupon-usage-list li {font-size: 14px;}
  .coupon-note { padding-left: 0; font-size: 14px;}
}

@media screen and (max-width:399px){
  .coupon-card {padding:20px 24px;}
  .coupon-wrap {flex-direction: column;}
  .coupon-info {min-width: auto;}
}