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

.righter_modal.on {
  display: flex;
}

/* hidden 속성이 display 지정에 밀리지 않게 */
.righter_modal [hidden] {
  display: none !important;
}

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

/* 높이 800px 넘으면 본문만 스크롤, 하단(박수+버튼) 고정 (Figma 주석) */
.righter_modal_box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 600px;
  max-height: min(800px, calc(100vh - 60px));
  max-height: min(800px, calc(100svh - 60px)); 
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 74px; /* 닫기 버튼 영역: 본문 스크롤과 겹치지 않게 고정 */
  border-radius: 20px;
  background-color: #fff;
  text-align: left;
}

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

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

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

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

/* 하단 영역이 본문 위에 떠 있으므로 끝까지 스크롤해도 가리지 않게 하단 영역 높이만큼 여백
   (--foot-h: 박수 안내 문구 표시 여부로 높이가 바뀌어 module.js가 측정해서 넣음) */
.righter_modal_body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 30px var(--foot-h, 200px);
}

/* ===== 상단 (사진·배지·이름) ===== */
.righter_hero {
  position: relative;
  height: 260px;
  overflow: hidden;
  border-radius: 20px;
  background-color: #eee;
}

.righter_hero .photo {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 279px;
  height: 260px;
  object-fit: cover;
  object-position: center top;
}

.righter_hero .tags {
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 20px;
  display: flex;
  gap: 8px;
}

.righter_hero .tags > span {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.28px;
  white-space: nowrap;
}

.righter_hero .tag_category {
  color: #fff;
}

.righter_hero .tag_category img {
  display: block;
  width: 20px;
  height: 20px;
}

.righter_hero .tag_category.is_expertise { background-image: linear-gradient(88.69deg, #f9cc7d 1.57%, #9f7223 99.64%); }
.righter_hero .tag_category.is_contribution { background-image: linear-gradient(88.38deg, #504b56 1.57%, #09060d 99.64%); }
.righter_hero .tag_category.is_innovation { background-image: linear-gradient(88.54deg, #780005 1.57%, #350204 99.64%); }

.righter_hero .tag_country {
  background-color: #d7d7d7;
  color: #333;
}

/* 이름: 아래 기준 정렬 (길면 위로 늘어남) */
.righter_hero .name {
  position: absolute;
  z-index: 1;
  bottom: 20px;
  left: 20px;
  width: 280px;
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.6px;
  word-break: keep-all;
  color: #222;
}

/* ===== 본문 섹션 ===== */
.righter_sections {
  margin-top: 30px;
}

/* 블록 사이 구분선: 위 25px + 선 + 아래 25px. 보이는 첫 블록(.is_first)엔 없음 (module.js에서 지정) */
.righter_sections > * {
  position: relative;
  margin-top: 51px;
}

.righter_sections > *::before {
  content: "";
  position: absolute;
  top: -26px;
  right: 0;
  left: 0;
  height: 1px;
  background-color: #e5e8eb;
}

.righter_sections > .is_first {
  margin-top: 0;
}

.righter_sections > .is_first::before {
  display: none;
}

.r_section h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 23px;
  letter-spacing: 1.3px;
  color: #cb8932;
}

.r_section .text {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.28px;
  white-space: pre-line;
  color: #222;
}

/* My Right */
/* 수상자 본인 문장이라 말줄임 없이 줄바꿈해서 전체 노출
   바로가기 아이콘은 문구 안 마지막 단어 옆에 인라인으로 (module.js에서 .quote_tail로 묶음) */
.my_right .quote {
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -0.32px;
  overflow-wrap: break-word;
  color: #222;
}

.my_right .quote_tail {
  white-space: nowrap;
}

.my_right .outlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 1px 0 0 10px;
  border-radius: 50%;
  background-color: #eee;
  transition: background-color 0.2s;
  vertical-align: top;
}

.my_right .outlink img {
  position: absolute;
  display: block;
  width: 10.5577px;
  height: 10.5607px;
  transition: opacity 0.2s;
}

.my_right .outlink .ico_hover { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .my_right .outlink:hover { background-color: #222; }
  .my_right .outlink:hover .ico_default { opacity: 0; }
  .my_right .outlink:hover .ico_hover { opacity: 1; }
}

/* Featured Project (Swiper 슬라이드) */
.project_swiper {
  overflow: hidden;
}

.project_name {
  font-size: 16px;
  font-weight: 700;
  line-height: 28.8px;
  color: #191f28;
}

.project_body {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.project_body:first-child {
  margin-top: 0;
}

.project_body .thumb {
  flex: none;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 10px;
  background-color: #d9d9d9;
}

.project_body .thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project_label {
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.2px;
  color: #222;
}

.project_about {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.28px;
  white-space: pre-line;
  color: rgba(34, 34, 34, 0.6);
}

.r_section .dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 15px;
}

.r_section .dots:empty {
  display: none;
}

/* Swiper pagination (bulletClass: dot, bulletActiveClass: active) */
.r_section .dots .dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: #e5e8eb;
  cursor: pointer;
  transition: background-color 0.2s;
}

.r_section .dots .dot.active {
  background-color: #3f3f3f;
}

/* Cause 박스 (분야별 색) */
.righter_sections > .cause_box {
  text-align: center;
}

.cause_box {
  padding: 12px 20px;
  word-break: keep-all;
  overflow-wrap: break-word;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.3px;
  text-align: center;
  color: #191f28;
}

.cause_box b {
  font-weight: 700;
}

.cause_box.is_infrastructure { background-color: #eff7ff; }
.cause_box.is_infrastructure .cause { color: #1a75dd; }
.cause_box.is_disaster { background-color: #fff6ef; }
.cause_box.is_disaster .cause { color: #d78d2b; }

/* ===== 하단 고정 (박수 + 버튼) ===== */
/* 본문 위에 겹쳐 고정 → 뒤 본문이 흰색 70% + 블러로 비쳐 스크롤할 내용이 있다는 걸 알 수 있게 */
.righter_modal_foot {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 56px 30px 30px;
  isolation: isolate;
}

/* 위쪽 40%는 투명 → 불투명으로 서서히 (경계가 딱 끊기지 않게) */
.righter_modal_foot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(transparent, #000 40%);
  mask-image: linear-gradient(transparent, #000 40%);
}

.btn_applaud {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 18px 8px;
  border: 1px solid #e5e8eb;
  border-radius: 1000px;
  background-color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.32px;
  color: #222;
  transition: border-color 0.2s;
}

.btn_applaud img {
  display: block;
  width: 28px;
  height: 28px;
}

.btn_applaud b {
  font-weight: 700;
}

.btn_applaud.is_active {
  border-color: #1A75DD;
}

.btn_applaud.is_active b {
  color: #1a75dd;
}

.applaud_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.applaud_hint {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.28px;
  color: rgba(34, 34, 34, 0.6);
}

.foot_btns {
  display: flex;
  gap: 10px;
  width: 100%;
}

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

.btn_share_profile {
  width: 220px;
  border: 1px solid #e5e8eb;
  background-color: #fff;
  color: #222;
}

.btn_support_cause {
  flex: 1;
  border: 0;
  background-color: #222;
  color: #fff;
}

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

.righter_modal_body::-webkit-scrollbar {
  width: 4px;
}

.righter_modal_body::-webkit-scrollbar-track {
  background: transparent;
}

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

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

/* ===== 모바일 (Figma 팝업 320 기준) ===== */
@media (max-width: 767px) {
  /* 760px 넘으면 본문만 스크롤 + 하단 고정 (Figma 주석) */
  .righter_modal_box {
    width: calc(100% - 40px);
    max-width: 320px;
    max-height: min(760px, calc(100vh - 40px));
    max-height: min(760px, calc(100svh - 40px));
    padding-top: 0; /* 닫기 버튼은 사진 영역 위에 겹침 */
  }

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

  .righter_modal_body {
    padding: 0 20px var(--foot-h, 200px);
  }

  /* 상단: 모달 폭 꽉 차게 (좌우 여백 없이, 위쪽만 둥글게) */
  .righter_hero {
    height: 223px;
    margin: 0 -20px;
    border-radius: 20px 10px 0 0;
  }

  .righter_hero .photo {
    width: 160px;
    height: 223px;
  }

  .righter_hero .tags {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .righter_hero .tags > span {
    font-size: 13px;
    letter-spacing: -0.26px;
  }

  .righter_hero .name {
    width: 140px;
    font-size: 24px;
    line-height: 26px;
    letter-spacing: -0.48px;
  }

  /* 블록 사이: 위 20px + 선 + 아래 20px */
  .righter_sections {
    margin-top: 20px;
  }

  .righter_sections > * {
    margin-top: 41px;
  }

  .righter_sections > *::before {
    top: -21px;
  }

  .project_body .project_text {
    min-width: 0;
  }

  /* 하단: 박수 + 버튼 2개 세로 */
  .righter_modal_foot {
    padding: 40px 20px 20px;
  }

  .btn_applaud {
    padding: 6px 18px;
    font-size: 14px;
    letter-spacing: -0.28px;
  }

  .btn_applaud img {
    width: 26px;
    height: 26px;
  }

  .applaud_hint {
    text-align: center;
    word-break: keep-all;
  }

  .foot_btns {
    flex-direction: column-reverse;
  }

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

  .btn_share_profile {
    width: 100%;
  }

  .btn_support_cause {
    flex: none;
  }
}