/* ===== 모달 틀 ===== */
.support_modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}

.support_modal.on {
  display: flex;
}

.support_modal_dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.support_modal_box {
  position: relative;
  width: 600px;
  max-height: calc(100vh - 40px);
  max-height: calc(100svh - 40px);
  overflow-y: auto;
  padding: 74px 30px 30px;
  box-sizing: border-box;
  border-radius: 20px;
  background-color: #fff;
  text-align: left;
}

/* 스크롤 잠금은 body에 (html에 걸면 BIZ의 html,body{height:100%} 때문에 최상단으로 튐) */
body.support_modal_open {
  overflow: hidden;
}

.support_modal button {
  font-family: inherit;
  cursor: pointer;
}

.support_modal .is_hide {
  display: none !important;
}

.support_modal_close {
  position: absolute;
  top: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
}

.support_modal_close img {
  display: block;
  width: 17.1993px;
  height: 17.1993px;
}

/* ===== 단계 표시 ===== */
.support_step {
  position: relative;
  height: 31px;
}

.support_step p {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: rgba(34, 34, 34, 0.4);
}

.support_step .label {
  margin-right: 8px;
}

.support_step b {
  margin-right: 2px;
  font-weight: 600;
  color: #222;
}

.support_step .bar {
  position: absolute;
  top: 29px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #e5e8eb;
}

.support_step .bar span {
  display: block;
  width: 33.33%;
  height: 100%;
  background-color: #cb8932;
  transition: width 0.3s;
}

/* 이미 참여함 화면엔 단계 표시 없음 */
.support_modal.is_duplicate .support_step {
  display: none;
}

.support_form_area {
  margin-top: 30px;
}

/* ===== HubSpot 폼 (developer embed) 디자인 덮어쓰기 ===== */
.support_modal .hs-form-html {
  --hsf-row__vertical-spacing: 10px;
  --hsf-module__vertical-spacing: 4px;
  font-family: 'Poppins', sans-serif;
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-Step__Content,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-Step__Content{
  display: flex;
  flex-direction: column;
  padding: 0;
}

.support_modal .hsfc-Row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

/* 라벨 공통 */
.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-FieldLabel,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-FieldLabel{
  color: #222;
  font-family: inherit;
  font-size: 30px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.6px;
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-RadioFieldGroup .hsfc-FieldLabel,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-RadioFieldGroup .hsfc-FieldLabel{
  font-size: 13px;
  font-weight: 600;
  line-height: 24px;
  color: rgba(34, 34, 34, 0.60);
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-Row .hsfc-FieldLabel,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-Row .hsfc-FieldLabel{
  color: rgba(34, 34, 34, 0.60);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.26px;
}

.support_modal .hsfc-FieldLabel__RequiredIndicator {
  display: none;
}

/* Step 1: 메시지 라벨 = 큰 제목 */
.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-TextareaField > .hsfc-FieldLabel,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-TextareaField > .hsfc-FieldLabel{
  width: 426px;
  font-size: 30px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.6px;
  color: #222;
}

.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-TextareaField > .hsfc-FieldLabel span>span{
  white-space: nowrap;
}

.support_modal .hsfc-TextareaField {
  position: relative;
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-TextareaField textarea,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-TextareaField textarea{
  resize: none;
  border: 1px solid #E5E8EB;
  background: #fff;
  margin-top: 30px;
  font-family: inherit;
  font-size: 16px;
  color: #222;
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-NavigationRow__Alerts,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-NavigationRow__Alerts{
  display: none;
}

.support_modal .hsfc-TextareaInput {
  display: block; /* inline이면 아래 글자 여백이 생겨 Get a Suggestion 간격(10px)이 벌어짐 */
  width: 100%;
  height: 100px;
  padding: 16px 16px 30px;
  box-sizing: border-box;
  border: 1px solid #e5e8eb;
  border-radius: 4px;
  font-family: inherit;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.32px;
  color: #222;
  resize: none;
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-TextareaInput::placeholder,
.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-TextInput::placeholder,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-TextareaInput::placeholder,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-TextInput::placeholder{
  color: rgba(34, 34, 34, 0.3);
}

.support_modal .support_counter {
  position: absolute;
  right: 16px;
  top: 181px;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.42px;
  color: rgba(34, 34, 34, 0.4);
}

/* KO 폼은 위쪽 높이가 달라 카운터 위치만 조정 (module.html의 data-lang) */
.support_modal[data-lang="ko"] .support_counter {
  top: 141px;
}

/* Get a Suggestion: 텍스트 칸 아래 오른쪽 (module.js가 주입) */
.support_modal .support_suggest {
  display: block;
  margin: 10px 0 20px auto; /* 아래 20 + 폼 행 간격 10 = Choose a Cause까지 30 */
  padding: 8px 16px;
  border: 0;
  border-radius: 4px;
  background-color: #cb8932;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.28px;
  color: #fff;
}

/* Step 1: Cause 라디오 = 카드 */
.support_modal .hsfc-RadioFieldGroup > .hsfc-FieldLabel {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 23px;
  text-transform: uppercase;
  color: rgba(34, 34, 34, 0.6);
}

.support_modal .hsfc-RadioFieldGroup__Options {
  display: flex;
  flex-direction: column;
}

.support_modal .hsfc-RadioFieldGroup__Options .hsfc-FieldLabel {
  position: relative;
  display: block;
  min-height: 83px;
  margin: 0;
  padding: 16px 16px 16px 46px;
  box-sizing: border-box;
  border: 1px solid #e5e8eb;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.32px;
  color: #222;
  cursor: pointer;
}

.support_modal .hsfc-RadioFieldGroup__Options .hsfc-FieldLabel:has(input:checked) {
  border-color: #222;
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-RadioFieldGroup__Options label>span,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-RadioFieldGroup__Options label>span{
  margin-left: -19px;
  color: #222;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
  line-height: 26px;
}

/* 옵션 아래 지역 설명 (폼 옵션에 없는 문구라 값 기준으로 추가) */
.support_modal .hsfc-FieldLabel:has(input[value="Disaster Recovery and Community Rebuilding"])::after,
.support_modal .hsfc-FieldLabel:has(input[value="Infrastructure for Safer Lives"])::after {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.28px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.4);
}

.support_modal .hsfc-FieldLabel:has(input[value="Disaster Recovery and Community Rebuilding"])::after {
  content: "(Colombia · Earthquake Recovery)";
}

.support_modal .hsfc-FieldLabel:has(input[value="Infrastructure for Safer Lives"])::after {
  content: "(Ta Phin Village, Vietnam · Community Empowerment Project)";
}

.support_modal[data-lang="ko"] .hsfc-FieldLabel:has(input[value="Disaster Recovery and Community Rebuilding"])::after {
  content: "(콜롬비아 · 지진 긴급 구호)";
}

.support_modal[data-lang="ko"] .hsfc-FieldLabel:has(input[value="Infrastructure for Safer Lives"])::after {
  content: "(베트남 타핀 마을 자립 프로젝트)";
}

/* 라디오 원 */
.support_modal .hsfc-RadioInput {
  position: absolute;
  top: 5px;
  left: -28px;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid #d1d6db;
  border-radius: 50%;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
}

.support_modal .hsfc-RadioInput:checked {
  border-color: #222;
  background: radial-gradient(circle, #222 0 5px, #fff 5.5px);
}

/* Step 2: 제목·설명 */
.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-Heading,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-Heading{
  font-family: 'Poppins';
  font-size: 30px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.6px;
  color: #222;
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-RichText,
.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-RichText p,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-RichText,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-RichText p{
  font-family: 'Poppins';
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.28px;
  color: rgba(34, 34, 34, 0.6);
  font-weight: 400;
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 #hsForm-2,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 #hsForm-2{
  margin-bottom: 30px;
}

/* Step 2: 입력칸 */
.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-TextInput,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-TextInput{
  width: 100%;
  height: 56px;
  padding: 0 16px;
  box-sizing: border-box;
  border: 1px solid #e5e8eb;
  border-radius: 4px;
  background-color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #222;
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-TextInput:hover,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-TextInput:hover{
  box-shadow: none;
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-TextInput:focus,
.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-TextareaInput:focus,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-TextInput:focus,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-TextareaInput:focus{
  border-color: #222;
  outline: none;
}

/* Step 2: 체크박스 (학생 여부, 동의) */
.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-CheckboxField .hsfc-FieldLabel,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-CheckboxField .hsfc-FieldLabel{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.28px;
  color: #222;
  cursor: pointer;
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-CheckboxField span:has(>a),
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-CheckboxField span:has(>a){
  display: flex;
  justify-content: space-between;
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-CheckboxInput,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-CheckboxInput{
  flex: none;
  width: 20px;
  height: 20px;
  background: url("https://resource.midasuser.com/hubfs/globalRighters/icon/icon-check.svg") no-repeat;
  border: none;
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-CheckboxInput:hover,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-CheckboxInput:hover{
  box-shadow: none;
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-CheckboxInput:checked,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-CheckboxInput:checked{
  background: url("https://resource.midasuser.com/hubfs/globalRighters/icon/icon-checked.svg") no-repeat;
}
.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-CheckboxInput:checked:after,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-CheckboxInput:checked:after{
  background: transparent;
}


.support_modal .hsfc-DataPrivacyField .hsfc-RichText {
  display: none;
}

/* 하단 버튼 (Continue / Back / 제출) */
.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-NavigationRow__Buttons,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-NavigationRow__Buttons{
  display: flex;
  gap: 10px;
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-Button,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-Button{
  flex: 1;
  height: 60px;
  padding: 0 40px;
  border: 1px solid #222;
  border-radius: 4px;
  background-color: #222;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.36px;
  color: #fff;
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-Button:hover,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-Button:hover{
  transform: translateY(0);
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-Button[type="button"]:not(:only-child),
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-Button[type="button"]:not(:only-child){
  flex: none;
  width: 220px;
  border-color: #e5e8eb;
  background-color: #fff;
  color: #222;
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-Button:disabled,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-Button:disabled{
  opacity: 0.4;
  cursor: default;
}

.support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-ErrorAlert,
.support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-ErrorAlert{
  font-family: inherit;
}

/* ===== 결과 화면 공통 ===== */
.support_result h2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.6px;
  color: #222;
}

.support_result > p,
.support_result .result_tit p {
  margin-top: 6px;
  word-break: keep-all;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.28px;
  color: rgba(34, 34, 34, 0.6);
}

/* 선물 배너 */
.support_modal .gift_banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  height: 140px;
  padding-left: 40px;
  box-sizing: border-box;
  border-radius: 4px;
  background: #130707 url("https://resource.midasuser.com/hubfs/globalRighters/img/img-bg-gift-banner.jpg") center / cover no-repeat;
  text-decoration: none;
}

.support_modal .gift_banner p {
  font-family: 'Noto Serif HK', serif;
  font-size: 20px;
  line-height: normal;
  color: #fff;
}

.support_modal .gift_banner .btn {
  padding: 6px 12px;
  border-radius: 2px;
  background-color: #cca667;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.24px;
  color: #222;
}

/* ===== 완료 (Step 3) ===== */
.support_done .thanks_card {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 40px auto 0;
  overflow: hidden;
  box-sizing: border-box;
  border: 1.111px solid #eee;
  border-radius: 10px;
  background-color: #f3ece8;
  box-shadow: inset -5.556px -5.556px 0.741px rgba(255, 255, 255, 0.25), inset 5.556px 5.556px 0.741px rgba(212, 219, 235, 0.45);
}

.thanks_card img {
  position: absolute;
  display: block;
  max-width: none;
}

.thanks_card .noise1 { top: -267.8px; left: -249px; width: 386.407px; height: 386.407px; }
.thanks_card .noise2 { top: 265.9px; left: 100.33px; width: 386.407px; height: 386.407px; }
.thanks_card .white1 { top: 152.03px; left: -124.46px; width: 220.461px; height: 220.461px; }
.thanks_card .white2 { top: 61.02px; left: 189.31px; width: 304.62px; height: 304.62px; }
.thanks_card .laurel { top: 25.56px; left: 267.7px; width: 105.421px; height: 26.667px; }

.thanks_card .star {
  top: 11.89px;
  left: 79px;
  width: 242.198px;
  height: 242.198px;
  filter: drop-shadow(3.704px 3.704px 0.741px rgba(219, 224, 235, 0.25));
}

.thanks_card .card_text {
  position: absolute;
  top: 248.22px;
  left: 0;
  width: 100%;
  font-family: 'Noto Serif HK', serif;
  text-align: center;
  text-shadow: 3.704px 3.704px 0.741px rgba(219, 224, 235, 0.25);
}

.thanks_card .card_text .sub {
  font-family: 'Noto Serif HK', serif;
  font-size: 11px;
  letter-spacing: -0.22px;
  color: #d78d2b;
}

.thanks_card .card_text .main {
  font-family: 'Noto Serif HK', serif;
  margin-top: 10px;
  font-size: 22px;
  line-height: 33.333px;
  letter-spacing: -0.44px;
  color: #7d6760;
}

.thanks_card .card_text span {
  font-family: 'Noto Serif HK', serif;
}

.thanks_card .card_cause,
.thanks_card .card_date {
  position: absolute;
  top: 367.31px;
  font-family: 'Noto Serif HK', serif;
  font-size: 11px;
  line-height: 1;
  letter-spacing: -0.1px;
  color: #7d6760;
  opacity: 0.7;
}

.thanks_card .card_cause { left: 24.35px; }
.thanks_card .card_date { right: 26px; }

/* Infrastructure for Safer Lives 카드 (Figma 979:3358): 배경·글자색만 파랑 계열, 별은 module.js에서 파란 이미지로 교체 */
.thanks_card.is_infrastructure {
  background-color: #e8ecf3;
}

.thanks_card.is_infrastructure .card_text .sub {
  color: #2b8cd7;
}

.thanks_card.is_infrastructure .card_text .main,
.thanks_card.is_infrastructure .card_cause,
.thanks_card.is_infrastructure .card_date {
  color: #54636e;
}

.support_done .gift_banner {
  margin-top: 50px;
}

/* 완료 화면: 모달 최대 955px, 버튼 위 영역(.done_scroll)만 스크롤, 버튼은 고정 */
.support_modal.is_done .support_modal_box {
  display: flex;
  flex-direction: column;
  max-height: min(955px, calc(100vh - 40px));
  max-height: min(955px, calc(100svh - 40px));
  overflow: hidden;
}

.support_modal.is_done .support_form_area {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.support_modal.is_done .support_done {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.support_done .done_scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.support_done .result_btns {
  position: relative;
  display: flex;
  flex: none;
  gap: 10px;
  margin-top: 30px;
}

.support_done .result_btns [hidden] {
  display: none;
}

/* 카드 이미지 준비 전 (module.js가 렌더 끝나면 해제) — 준비된 뒤 탭해야 iOS Safari에서 공유창/저장이 열림 */
.support_done .result_btns .is_loading:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0.6;
  cursor: progress;
}

/* 대기 중 표시: 버튼 글자 왼쪽 회전 링 */
.support_done .result_btns .is_loading:not([hidden])::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: resultBtnSpin 0.8s linear infinite;
}

@keyframes resultBtnSpin {
  to { transform: rotate(360deg); }
}

.support_done .result_btns button {
  height: 60px;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.36px;
}

.support_done .btn_save,
.support_done .btn_share {
  width: 220px;
  border: 1px solid #e5e8eb;
  background-color: #fff;
  color: #222;
}

/* 앞 칸(흰색): PC는 Save Image, MO는 Share / 뒤 칸(검정): Copy Link */
.support_done .btn_copy_link {
  flex: 1;
  border: 0;
  background-color: #222;
  color: #fff;
}

/* ===== 이미 참여함 ===== */
.support_modal.is_duplicate .support_modal_box {
  padding-top: 100px;
}

.support_modal.is_duplicate .support_form_area {
  margin-top: 0;
}

.support_duplicate {
  text-align: center;
}

.support_duplicate .check {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 30px;
}

.support_duplicate > p {
  margin-top: 10px;
}

.support_duplicate .gift_banner {
  margin-top: 80px;
  text-align: left;
}

/* 내부 스크롤바: 얇은 회색 (Chrome·Safari·Edge = webkit, Firefox = scrollbar-*) */
/* Firefox 전용 (Chrome 121+는 이 표준 속성이 있으면 아래 webkit 스타일을 무시하므로 분리) */
@supports not selector(::-webkit-scrollbar) {
  .support_done .done_scroll {
    scrollbar-width: thin;
    scrollbar-color: #d1d6db transparent;
  }
}

.support_done .done_scroll::-webkit-scrollbar {
  width: 4px;
}

.support_done .done_scroll::-webkit-scrollbar-track {
  background: transparent;
}

.support_done .done_scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #d1d6db;
}

.support_done .done_scroll::-webkit-scrollbar-thumb:hover {
  background-color: #8b95a1;
}

/* ===== 모바일 (Figma 팝업 320 기준) ===== */
@media (max-width: 767px) {
  .support_modal_box {
    width: calc(100% - 40px);
    max-width: 320px;
    padding: 40px 20px 20px;
  }

  .support_modal_close {
    top: 18px;
    right: 18px;
  }

  .support_form_area {
    margin-top: 24px;
  }

  /* Step 1: 메시지 제목 */
  .support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-TextareaField > .hsfc-FieldLabel,
  .support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-TextareaField > .hsfc-FieldLabel {
    width: auto;
    font-size: 24px;
    line-height: 34px;
    letter-spacing: -0.48px;
  }

  .support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-TextareaField > .hsfc-FieldLabel span > span {
    white-space: normal;
    word-break: keep-all;
  }

  .support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-TextareaField textarea,
  .support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-TextareaField textarea {
    margin-top: 20px;
  }

  .support_modal .hsfc-TextareaInput {
    height: 120px;
  }

  /* 글자 수: 제목 줄 수와 상관없이 텍스트 칸 오른쪽 아래 안쪽에 (top 고정값 대신 흐름 배치) */
  .support_modal .support_counter,
  .support_modal[data-lang="ko"] .support_counter {
    position: relative;
    top: auto;
    right: auto;
    display: block;
    width: max-content;
    margin: -38px 16px 0 auto;
    pointer-events: none;
  }

  .support_modal .support_suggest {
    margin-top: 26px; /* 카운터가 칸 안으로 16px 겹쳐 올라간 만큼 보정 → 칸 아래 10px */
  }

  /* Step 2: 제목·입력칸 */
  .support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-Heading,
  .support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-Heading {
    font-size: 24px;
    line-height: 34px;
    letter-spacing: -0.48px;
  }

  .support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 #hsForm-2,
  .support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 #hsForm-2 {
    margin-bottom: 20px;
  }

  .support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-TextInput,
  .support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-TextInput {
    height: 48px;
  }

  .support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-Step__Content #hsForm-20,
  .support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-Step__Content #hsForm-20,
  .support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-Step__Content #hsForm-3403672584373,
  .support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-Step__Content #hsForm-3403672584373  {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* 하단 버튼: 세로로 (Back 위, 제출 아래) */
  .support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-NavigationRow__Buttons,
  .support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-NavigationRow__Buttons {
    flex-direction: column;
  }

  .support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-Button,
  .support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-Button {
    flex: none;
    width: 100%;
    font-size: 16px;
    letter-spacing: -0.32px;
  }

  .support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-Button[type="button"]:not(:only-child),
  .support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-Button[type="button"]:not(:only-child) {
    width: 100%;
  }

  /* 동의 문구 오른쪽 More 링크: 좁은 폭에서 글자가 세로로 쪼개지지 않게 */
  .support_modal #hsForm-15f98ce2-8997-4c82-a646-405319e78b40 .hsfc-CheckboxField span:has(>a) > a,
  .support_modal #hsForm-ca76b45f-61ba-4a6a-bd13-f24a4edd8998 .hsfc-CheckboxField span:has(>a) > a {
    flex: none;
    margin-left: 8px;
    white-space: nowrap;
  }

  /* 결과 화면 공통 */
  .support_result h2 {
    font-size: 24px;
    line-height: 34px;
    letter-spacing: -0.48px;
    word-break: keep-all;
  }

  .support_result > p,
  .support_result .result_tit p {
    margin-top: 4px;
  }

  /* 선물 배너: 280x230, 가운데 정렬 */
  .support_modal .gift_banner {
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    height: 230px;
    padding: 30px 0 0;
    background-image: url("https://resource.midasuser.com/hubfs/globalRighters/img/img-bg-gift-banner-mo.jpg");
    background-position: center 50%;
    text-align: center;
  }

  .support_modal .gift_banner p {
    width: 206px;
    line-height: 30px;
    text-wrap: balance;
  }

  /* 완료 (Step 3): 감사 카드 400 → 280 (70%). 저장 이미지는 module.js에서 원래 크기로 캡처 */
  /* 레이아웃상 400px 그대로라 가운데 기준으로 직접 맞추고, 줄어든 높이(400 x 0.3)만큼 아래 여백 당김 */
  .support_done .thanks_card {
    margin: 30px 0 -120px calc(50% - 200px);
    transform: scale(0.7);
    transform-origin: top center;
  }

  .support_done .done_scroll {
    overflow-x: hidden;
  }

  .support_done .gift_banner {
    margin-top: 30px;
  }

  .support_done .result_btns {
    flex-direction: column;
  }

  .support_done .result_btns button {
    font-size: 16px;
    letter-spacing: -0.32px;
  }

  .support_done .btn_save,
  .support_done .btn_share,
  .support_done .btn_copy_link {
    flex: none;
    width: 100%;
  }

  /* 이미 참여함 */
  .support_modal.is_duplicate .support_modal_box {
    padding-top: 80px;
  }

  .support_duplicate .check {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
  }

  .support_duplicate > p {
    margin-top: 4px;
  }

  .support_duplicate .gift_banner {
    margin-top: 30px;
    text-align: center;
  }
}