/* ============================================================
   CoReset DAO — 커스텀 스타일
   Bootstrap 클래스 미사용, dao- 접두사로 충돌 방지
   반응형 기준: 480px
============================================================ */

/* ── 변수 ─────────────────────────────────────────────── */
:root {
  --dao-dark:        #272729;
  --dao-card-bg:     #505364;
  --dao-profile-bg:  #6c778b;
  --dao-white:       #ffffff;
  --dao-light:       #f1f1f1;
  --dao-text-main:   #f1f1f1;
  --dao-text-muted:  #989898;
  --dao-header-text: #303030;
  --dao-header-h:    88px;
  --dao-sidebar-w:   277px;
  --dao-footer-h:    247px;
}

/* ── 리셋 & 베이스 ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.dao-body {
  font-family: 'Nanum Gothic', sans-serif;
  background: var(--dao-dark);
  color: var(--dao-text-main);
  min-height: 100vh;
}

a { text-decoration: none; }
img { display: block; }
button { cursor: pointer; border: none; background: none; }



/* ============================================================
   헤더 (데스크탑)
============================================================ */
.dao-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--dao-header-h);
  background: var(--dao-white);
  box-shadow: 0 0 2px rgba(23,26,31,.2), 0 0 1px rgba(23,26,31,.15);
  z-index: 1100;
  display: flex;
  align-items: center;
}

/* 헤더 inner — 3열 grid: 로고 | 네비(중앙) | 우측액션 */
.dao-header-inner {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 56px 0 35px;
}

/* 로고 */
.dao-logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* 네비 — grid 2열, 자동으로 중앙 */
.dao-header-nav {
  display: flex;
  align-items: center;
  gap: 149px;
}

.dao-nav-link {
  font-size: 20px;
  font-weight: bold;
  color: var(--dao-header-text);
  white-space: nowrap;
}

/* 우측 액션 — grid 3열, 우측 정렬 */
.dao-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0px;
}

/* 아이콘 그룹 — 세로(아이콘 위, 라벨 아래), 헤더 전체 높이 채움 */
.dao-header-icon-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: 3px;
  padding: 11px 0 8px;
  margin-left: 15px;
}

.dao-header-icon-btn {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3.5px 5.5px rgba(0,0,0,.02);
}

.dao-header-icon-btn img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.dao-header-icon-blue  { background: rgba(71,121,174,.15); }
.dao-header-icon-green { background: rgba(183,205,71,.15); }

.dao-header-icon-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--dao-header-text);
  white-space: nowrap;
  line-height: 1;
}

/* 언어 버튼 */
.dao-lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 30px;
  border: 1px solid #dee1e6;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  color: rgba(48,48,48,.5);
  white-space: nowrap;
  margin-left: 27px;
}

.dao-lang-btn img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

/* 유저 프로필 */
.dao-header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 24px;
}

.dao-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: rgba(116,116,116,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.dao-header-username {
  font-size: 14px;
  font-weight: 700;
  color: #171a1f;
  letter-spacing: 3px;
}

.dao-header-chevron {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

/* 모바일 헤더 — 기본 숨김 */
.dao-mobile-header { display: none; }


/* ============================================================
   레이아웃
============================================================ */
.dao-layout {
  display: flex;
  margin-top: var(--dao-header-h);
  min-height: calc(80vh - var(--dao-header-h));
}


/* ============================================================
   사이드바 (데스크탑)
============================================================ */
.dao-sidebar {
  width: var(--dao-sidebar-w);
  background: var(--dao-dark);
  flex-shrink: 0;
  padding-top: 70px;
}

.dao-sidebar-item {
  position: relative;
  height: 67px;
  display: flex;
  align-items: center;
}

.dao-sidebar-item--active {
  background: var(--dao-white);
  border-radius: 10px;
}

.dao-sidebar-active-bar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5.3px;
  height: 42px;
}

.dao-sidebar-active-bar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dao-sidebar-item-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 32px;
}

.dao-sidebar-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.gov-vote-content-textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  margin-bottom: 10px;
}

/* 비활성 아이콘 → 흰색 강제 변환 (img 태그에서 동작)
   brightness(0): 모든 픽셀 → 검정
   invert(1): 검정 → 흰색
   어떤 원본 색이든 흰색 아이콘으로 표시됨 */
.dao-sidebar-item:not(.dao-sidebar-item--active) .dao-sidebar-icon {
  filter: brightness(0) invert(1);
}

/* 활성 아이콘 → 검정 강제 변환
   brightness(0): 모든 픽셀 → 검정
   흰색 배경 위에서 아이콘이 보임 */
.dao-sidebar-item--active .dao-sidebar-icon {
  filter: brightness(0);
}

.dao-sidebar-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--dao-white);
}

.dao-sidebar-label--dark {
  color: #272729;
}

/* 거버넌스 사이드바 활성 라벨: 피그마 #4779ae */
.dao-sidebar-label--blue {
  color: #4779ae;
}

/* 거버넌스 사이드바 활성 아이콘: 피그마 #4779ae 파란색 */
.dao-sidebar-item--active .dao-sidebar-icon--blue-active {
  filter: brightness(0) saturate(100%) invert(47%) sepia(29%) saturate(748%) hue-rotate(177deg) brightness(92%) contrast(84%);
}


/* ============================================================
   메인
============================================================ */
.dao-main {
  flex: 1;
  background: var(--dao-dark);
  padding: 40px 30px 100px;
  min-width: 0;
}


/* ============================================================
   프로필 카드
============================================================ */
.dao-profile-card {
  position: relative;
  background: var(--dao-profile-bg);
  border-radius: 15px;
  box-shadow: 0 2px 5.5px rgba(0,0,0,.02);
  backdrop-filter: blur(10.5px);
  height: 298px;
  padding: 0 264px 0 264px;
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 40px;
}

/* 수정 버튼 */
.dao-profile-edit-btn {
  position: absolute;
  top: 21px;
  right: 21px;
  width: 41px;
  height: 40px;
  background: var(--dao-white);
  border-radius: 8px;
  box-shadow: 0 2px 5.5px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.dao-profile-edit-btn img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

/* 아바타 + 닉네임 묶음
   긴 닉네임이 info 블록을 밀어내지 않도록 shrink 허용 + min-width 0 */
.dao-profile-left {
  display: flex;
  align-items: center;
  gap: 62px;
  flex-shrink: 1;
  min-width: 0;
  margin-right: auto;
}

/* 아바타 — 고정 크기 */
.dao-profile-avatar-wrap {
  flex-shrink: 0;
}

.dao-profile-avatar-box {
  width: 128px;
  height: 125px;
  background: var(--dao-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dao-profile-avatar-icon {
  width: 45px;
  height: 45px;
  object-fit: contain;
}

/* 닉네임 — 길면 ellipsis 처리 (info 블록 보호) */
.dao-profile-nickname {
  font-size: 26px;
  font-weight: 800;
  color: var(--dao-white);
  letter-spacing: 2.6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* 정보 — grid 2칼럼 (label | value), 피그마 정확 크기 */
.dao-profile-info {
  display: grid;
  grid-template-columns: 143px 246px;
  column-gap: 76px;
  row-gap: 0;
  align-items: center;
  flex-shrink: 0;
}

.dao-profile-info-row {
  display: contents;
}

.dao-profile-info-label {
  font-size: 20px;
  font-weight: 700;
  color: var(--dao-white);
  line-height: 50px;
  text-align: left;
}

.dao-profile-info-value {
  font-size: 20px;
  font-weight: 400;
  color: #fafafa;
  line-height: 50px;
  text-align: right;
}

/* 모바일 전용 지갑 안내 — 데스크탑에서 숨김 */
.dao-profile-wallet-notice { display: none; }


/* ============================================================
   나의 보유현황
============================================================ */
.dao-holdings-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--dao-white);
  margin-bottom: 20px;
}

.dao-holdings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* 토큰 카드 */
.dao-token-card {
  background: var(--dao-card-bg);
  border-radius: 15px;
  box-shadow: 0 2px 2px rgba(0,0,0,.05);
  padding: 22px 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 147px;
}

.dao-token-icon-wrap {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  box-shadow: 0 3.5px 5.5px rgba(0,0,0,.02);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dao-token-icon-wrap img {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

/* USDT는 이미지가 아이콘 배경색까지 포함되어 있으므로 그대로 */
.dao-token-icon-usdt {
  background: transparent;
  overflow: hidden;
}

.dao-token-icon-usdt img {
  width: 84px;
  height: 84px;
  object-fit: cover;
}

/* Polygon 겹쳐진 이미지 */
.dao-token-icon-wrap { position: relative; }

.dao-token-polygon-vector {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
}

.dao-token-polygon-group {
  position: relative;
  width: 44px;
  height: 44px;
  object-fit: contain;
  z-index: 1;
}

.dao-token-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--dao-light);
  flex: 1;
}

.dao-token-amount-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-left: auto;
}

.dao-token-amount {
  font-size: 36px;
  font-weight: 800;
  color: var(--dao-white);
  white-space: nowrap;
}

.dao-token-symbol {
  font-size: 24px;
  font-weight: 700;
  color: var(--dao-light);
  white-space: nowrap;
}

/* ============================================================
   나의 NFT
============================================================ */
.dao-my-nft-status-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--dao-card-bg);
  padding: 38px 20px 39px 25px;
  border-radius: 10px;
  min-height: 147px;
}

.dao-my-nft-status-text {
  font-size: 20px;
  font-weight: bold;
  color: var(--dao-white);
  padding-left: 18px;
  line-height: 36px;
}

.dao-my-nft-label-mobile {
  display: none;
}

.dao-my-nft-status-value {
  font-size: 32px;
  font-weight: bold;
  color: var(--dao-white);
  padding-right: 5px;
}

.dao-my-nft-status-unit {
  font-size: 24px;
  font-weight: bold;
  color: var(--dao-white);
}

.dao-my-nft-description {
  padding-top: 23px;
  padding-bottom: 63px;
  font-size: 16px;
  color: var(--dao-light);
  font-weight: 400;
  text-align: end;
}

.dao-my-nft-table-box {
  background: var(--dao-white);
  border-radius: 10px;
  padding-top: 25px;
  padding-bottom: 25px;
}

.dao-my-nft-table-nft-image {
  width: 45px;
  height: 45px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3.5px 5.5px rgba(0, 0, 0, 0.02);
}

.dao-my-nft-table-nft-image img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.crs-table-detail-btn {
  width: 78px;
  height: 20px;
  color: var(--dao-white);
  align-items: center;
  justify-content: center;
  display: flex;
  background-color: #9D9D9D;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  margin: 0 auto;
}

.dao-my-nft-name-wrap {
  gap: 14px;
}

.dao-my-nft-name-main {
  font-weight: 700;
}

.dao-my-nft-name-num {
  font-weight: 400;
}

.dao-my-nft-br-mobile {
  display: none;
}

.dao-my-nft-time-desktop {
  display: inline;
}

.dao-my-nft-detail-title {
  font-weight: bold;
  font-size: 34px !important;
  margin-bottom: 17px !important;
}
/* ============================================================
   풋터
============================================================ */
.dao-footer {
  background: var(--dao-dark);
  padding: 40px 20px 36px;
}

.dao-footer-inner {
  max-width: 1534px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.dao-footer-logo {
  height: 67px;
  width: auto;
  object-fit: contain;
  margin-bottom: 6px;
}

.dao-footer-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.dao-footer-nav a {
  font-size: 14px;
  font-weight: 400;
  color: var(--dao-light);
  padding: 0 6px;
}

.dao-footer-divider {
  color: #c5c5c5;
  font-size: 14px;
}

.dao-footer-biz,
.dao-footer-addr,
.dao-footer-copy {
  font-size: 14px;
  color: var(--dao-light);
  text-align: center;
}

.dao-footer-sep {
  color: #989898;
  margin: 0 6px;
}

.dao-footer-biz strong { font-weight: 700; }
.dao-footer-copy { color: var(--dao-white); margin-top: 4px; }


/* ============================================================
   모바일 탭바 — 기본 숨김
============================================================ */
.dao-tab-bar { display: none; }


/* ============================================================
   반응형: 1400px 이하 → 헤더 여백 / 프로필 카드 패딩 축소
============================================================ */
/* ============================================================
   반응형: 1660px 이하 → 프로필 카드 padding 중간 단계 축소
   (1601~1919 구간 padding 264로 overflow 발생 방지)
============================================================ */
@media (max-width: 1660px) {
  .dao-profile-card {
    padding: 0 120px;
  }
  .dao-profile-left {
    gap: 50px;
  }
}

@media (max-width: 1400px) {
  /* 헤더 */
  .dao-header-inner {
    padding: 0 36px 0 24px;
  }
  .dao-header-nav {
    gap: 60px;
  }
  .dao-lang-btn {
    padding: 0 16px;
    margin-left: 16px;
  }
  .dao-header-user {
    margin-left: 16px;
  }
  .dao-header-icon-group {
    margin-left: 10px;
  }

  /* 프로필 카드 (≤1400 ~ 1201 구간 padding 추가 축소) */
  .dao-profile-card {
    padding: 0 60px;
  }
  .dao-profile-left {
    gap: 40px;
  }

  /* 프로필 수정 카드 */
  .dao-edit-card {
    padding: 80px 60px 80px 50px;
    gap: 40px;
  }
  .dao-edit-fields {
    gap: 40px;
  }
}

/* ============================================================
   반응형: 1100px 이하 → 헤더 더 축소 / 카드 더 축소
============================================================ */
@media (max-width: 1100px) {
  /* 헤더 */
  .dao-header-inner {
    padding: 0 20px 0 16px;
  }
  .dao-header-nav {
    gap: 24px;
  }
  .dao-nav-link {
    font-size: 15px;
  }
  .dao-lang-btn {
    padding: 0 10px;
    margin-left: 10px;
    font-size: 12px;
  }
  .dao-header-user {
    margin-left: 10px;
  }
  .dao-header-username {
    font-size: 13px;
    letter-spacing: 4px;
  }
  .dao-header-icon-group {
    margin-left: 6px;
  }

  /* 프로필 카드 */
  .dao-profile-card {
    padding: 0 40px;
  }
  .dao-profile-left {
    gap: 24px;
  }
  .dao-profile-info {
    grid-template-columns: 100px auto;
    column-gap: 40px;
  }
  .dao-profile-info-label,
  .dao-profile-info-value {
    font-size: 16px;
  }
  .dao-profile-nickname {
    font-size: 20px;
  }

  /* 프로필 수정 카드 */
  .dao-edit-card {
    padding: 60px 40px 60px 40px;
    gap: 30px;
  }
  .dao-edit-fields {
    gap: 24px;
  }
  .dao-edit-avatar {
    width: 100px;
    height: 100px;
  }
}

/* ============================================================
   반응형: 900px 이하 → 카드 더 압축
============================================================ */
@media (max-width: 900px) {
  .dao-profile-card {
    padding: 0 24px;
    height: auto;
    min-height: 160px;
    flex-wrap: wrap;
    align-content: center;
    gap: 16px;
  }
  .dao-profile-left {
    gap: 16px;
    margin-right: 0;
    flex: 0 0 auto;
  }
  .dao-profile-avatar-box {
    width: 80px;
    height: 78px;
  }
  .dao-profile-avatar-icon {
    width: 32px;
    height: 32px;
  }
  .dao-profile-info {
    grid-template-columns: auto 1fr;
    column-gap: 20px;
    flex: 1;
    min-width: 0;
  }
  .dao-profile-info-label,
  .dao-profile-info-value {
    font-size: 14px;
    line-height: 40px;
  }
  .dao-profile-nickname {
    font-size: 18px;
    letter-spacing: 1px;
  }
}

/* ============================================================
   반응형: 768px 이하 → 헤더 최소화 (네비 숨김)
============================================================ */
@media (max-width: 768px) {
  .dao-header-inner {
    grid-template-columns: auto 1fr;
    padding: 0 16px;
  }
  .dao-header-nav {
    display: none;
  }
  .dao-header-actions {
    grid-column: 2;
  }
  .dao-lang-btn {
    padding: 0 8px;
    margin-left: 8px;
  }
  .dao-header-username {
    display: none;
  }

  .dao-my-nft-description {
    text-align: center;
    font-size: 12px;
    padding-top: 12px;
    padding-bottom: 41px;
  }

  .dao-my-nft-table-nft-image {
    display: none;
  }

  .dao-my-nft-status-box {
    padding: 18px 21px 17px 17px;
    min-height: 85px;
  }

  .dao-my-nft-status-text {
    font-size: 14px;
    padding-left: 13px;
    line-height: 36px;
  }

  .dao-my-nft-label-desktop {
    display: none;
  }

  .dao-my-nft-label-mobile {
    display: inline;
  }

  .dao-my-nft-status-value {
    font-size: 26px;
    padding-right: 12px;
  }

  .dao-my-nft-status-unit {
    font-size: 13px;
  }

  /* 모바일: 테이블 박스 꽉 차게 (dao-main padding 8px 상쇄) */
  .dao-my-nft-table-box {
    border-radius: 0;
    padding: 15px 0 0 0;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  /* 모바일: 필터바 한 줄 유지 */
  .crs-filter-bar {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 0 11px !important;
    margin-bottom: 12px;
  }

  .crs-filter-select {
    width: 77px !important;
    font-size: 11px !important;
    padding: 0 10px !important;
    height: 29px !important;
    border-radius: 3px !important;
  }

  .crs-date-wrap {
    width: 114px !important;
    height: 29px !important;
    padding: 0 12px !important;
    border-radius: 3px !important;
  }

  .crs-date-cal-icon {
    width: 16px !important;
    height: 16px !important;
  }

  .crs-filter-date {
    font-size: 11px !important;
  }

  .crs-search-btn {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }

  .crs-search-btn img {
    width: 15px !important;
    height: 15px !important;
  }
}

/* ============================================================
   프로필 수정 페이지 (dao-edit- 접두사)
============================================================ */

/* 수정 카드 컨테이너 */
.dao-edit-card {
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 2px 5.5px rgba(0,0,0,.02);
  backdrop-filter: blur(10.5px);
  padding: 111px 93px 111px 69px;
  display: flex;
  align-items: center;
  gap: 54px;
  margin-bottom: 74px;
}

/* 데스크톱 전용 프로필 아바타 래퍼 */
.dao-edit-desktop-avatar {
  display: block;
  flex-shrink: 0;
}

/* 모바일 전용 프로필 영역 — 데스크톱에서 숨김 */
.dao-edit-mobile-profile {
  display: none;
}

/* 프로필 아바타 박스 공통 */
.dao-edit-avatar {
  width: 125px;
  height: 125px;
  background: #f1f1f1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 모바일 소형 아바타 */
.dao-edit-avatar--sm {
  width: 80px;
  height: 80px;
}

/* 아바타 아이콘 */
.dao-edit-avatar-icon {
  width: 45px;
  height: 45px;
  object-fit: contain;
}

/* 폼 필드 영역: 데스크톱 1행 flex */
.dao-edit-fields {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 57px;
  min-width: 0;
}

/* 개별 필드 래퍼 */
.dao-edit-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

/* 라벨 */
.dao-edit-label {
  font-size: 14px;
  font-weight: 700;
  color: #505364;
  line-height: 1.4;
}

/* 인풋 래퍼 (relative 기준점) */
.dao-edit-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* 인풋 공통 */
.dao-edit-input {
  width: 100%;
  height: 48px;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  color: #121212;
  box-sizing: border-box;
  outline: none;
}

.dao-edit-input::placeholder {
  color: #868686;
  font-weight: 700;
}

.dao-edit-input:focus {
  border-color: #3eb5c9;
}

/* 이메일 인증 버튼 — 인풋 안쪽 우측 (데스크톱) */
.dao-edit-verify-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 99px;
  height: 34px;
  background: #3eb5c9;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 저장 버튼 필드 — 하단 정렬 */
.dao-edit-field--btn {
  align-self: flex-end;
  justify-content: flex-end;
}

/* 개인정보 변경 저장 버튼 */
.dao-edit-save-btn {
  width: 100%;
  height: 48px;
  background: #272729;
  color: #ffffff;
  border: none;
  border-radius: 48px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  letter-spacing: -0.5px;
  cursor: pointer;
}

.dao-edit-save-btn:hover {
  background: #3a3a3c;
}

/* 모바일 닉네임 텍스트 */
.dao-edit-mobile-nickname {
  font-size: 20px;
  font-weight: 700;
  color: #6c778b;
  letter-spacing: 3px;
}

/* 보유현황 — 모바일에서 숨김용 modifier */
.dao-edit-holdings {
  /* 데스크톱에서는 정상 표시 (dao-holdings 그대로) */
}


/* ============================================================
   반응형: 1600px 이하 ~ 1201px 이상
   → 프로필 수정 카드: 닉네임/이메일 2행 grid,
     저장 버튼은 우측에서 2행 span + 세로 중앙 정렬
   (base 선언 뒤에 위치시켜야 cascade로 이김)
============================================================ */
@media (max-width: 1600px) and (min-width: 1201px) {
  .dao-edit-fields {
    display: grid;
    grid-template-columns: 1fr 327px;
    align-items: end;
    column-gap: 57px;
    row-gap: 20px;
  }
  .dao-edit-field {
    flex: initial;
  }
  .dao-edit-field--btn {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}


/* ============================================================
   반응형: 1200px 이하 → 모바일
============================================================ */
@media (max-width: 1200px) {

  html { overflow-x: hidden; }

  /* 헤더 전환 */
  .dao-header { display: none; }

  .dao-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: var(--dao-white);
    padding: 0 16px;
    z-index: 100;
    border-bottom: 1px solid #e8e8e8;
  }

  .dao-mobile-back,
  .dao-mobile-menu {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dao-mobile-back img,
  .dao-mobile-menu img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  .dao-mobile-title {
    font-size: 20px;
    font-weight: 700;
    color: #121212;
  }

  /* 레이아웃 */
  .dao-layout {
    margin-top: 56px;
    flex-direction: column;
  }

  /* 사이드바 숨김 */
  .dao-sidebar { display: none; }

  /* 메인 */
  .dao-main {
    padding: 20px 8px 120px;
  }

  /* 옵션 페이지: main 좌우 padding 제거
     피그마 모바일 448:3892: title y=148 (main top 100 기준 offset 48)
     pagination bottom 744 → footer 792 = 48 gap
     !important: base shorthand padding(line 1660)이 source상 뒤에 있어 덮어씀 방지 */
  .dao-mypage-main {
    padding: 48px 0 20px !important;
    overflow-x: hidden;
  }

  /* 옵션 카드 영역: 양 옆 10px */
  .dao-mypage-cards {
    padding: 0 10px;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
  }
  .dao-mypage-cards .row.g-3 {
    --bs-gutter-x: 0;
    --bs-gutter-y: 20px;
    margin-left: 0;
    margin-right: 0;
  }

  /* 옵션 나머지 콘텐츠: 기존 dao-main padding 적용 */
  .dao-mypage-content {
    padding: 0 8px;
  }

  .crs-main {
    padding-top: 20px;
  }

  /* mypage_main 전용 main 오버라이드
     (dao-main은 mypage_history/inquiries/option 등 다른 페이지도 사용하므로 별도 클래스)
     피그마 448:9300: 카드 양옆 꽉차게 + 모바일 헤더 바로 아래 시작 */
  .dao-mypage-profile-main {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 49px !important;
  }

  /* 프로필 카드 — 모바일 세로 레이아웃
     ≤900 잔여 속성(flex-wrap/min-height/align-content) 명시적 리셋
     피그마 448:9300: y=59-481, border-radius 15 (상단 모바일 헤더에 가려짐 → 하단 radius 15)
     padding-top 68 = avatar top y=168, padding-bottom 28 = card bottom y=481
     gap 0 + 자식별 margin으로 피그마 간격(avatar→nickname 20, nickname→info 34) 제어 */
  .dao-profile-card {
    height: auto;
    min-height: auto;
    padding: 68px 16px 28px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: stretch;
    gap: 0;
    border-radius: 0 0 15px 15px;
    margin-bottom: 0;
  }

  /* 프로필 좌측(아바타+닉네임) — 모바일 세로
     긴 닉네임이 카드 폭을 초과하지 않도록 width 100% + min-width 0
     avatar→nickname gap 20 (피그마 avatar bottom 268 → nickname top 288) */
  .dao-profile-left {
    width: 100%;
    flex-direction: column;
    gap: 20px;
    margin-right: 0;
    min-width: 0;
  }

  .dao-profile-edit-btn {
    top: 14px;
    right: 14px;
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--dao-light);
  }

  .dao-profile-edit-btn img {
    width: 16.25px;
    height: 16.25px;
  }

  /* 피그마 avatar box 100×100 */
  .dao-profile-avatar-box {
    width: 100px;
    height: 100px;
    border: 1px dashed var(--dao-light);
  }

  .dao-profile-avatar-icon {
    width: 40px;
    height: 40px;
  }

  /* 피그마 nickname h=26 (y=288-314) → line-height 26px로 정확한 높이 */
  .dao-profile-nickname {
    font-size: 24px;
    letter-spacing: 2.4px;
    text-align: center;
    max-width: 100%;
    line-height: 26px;
  }

  /* 정보: 모바일 — 레이블 왼쪽, 값 오른쪽
     nickname → info gap 34 (피그마 nickname bottom 314 → info top 348)
     폰트 16 (피그마 448:9329/9330), 피그마 info h=105 → line-height 45×2=90 + padding-bottom 15
     피그마 Group 1000004037 x=50 ~ x=319 (w=269): card padding-left 16 기준
     → info padding-left 34 (50-16), padding-right 40 (359-319) */
  .dao-profile-info {
    width: 100%;
    grid-template-columns: auto 1fr;
    column-gap: 20px;
    min-width: 0;
    margin-top: 34px;
    padding: 0 40px 15px 34px;
  }

  /* 값이 길 때 잘림 방지 */
  .dao-profile-info-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dao-profile-info-label {
    font-size: 16px;
    line-height: 45px;
    text-align: left;
  }

  .dao-profile-info-value {
    font-size: 16px;
    line-height: 45px;
    text-align: right;
  }

  /* 지갑주소 안내 (피그마 448:9331: 14 Regular #fafafa, h=18 center)
     ⚠️ 카드 외부 위치 (피그마 카드 bg bottom y=481, notice top y=492, gap 11)
     element h=18 match → line-height 18px */
  .dao-profile-wallet-notice {
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: #fafafa;
    text-align: center;
    padding: 0 10px;
    margin: 11px 0 0;
  }

  /* 보유현황 (피그마 448:9357: 카드 x=8, w=360 - edge 8px 여백)
     main padding 0일 때 홀딩스만 좌우 8px 여백
     margin-top 46: 피그마 notice bottom y=510 → title top y=556 (gap 46) */
  .dao-holdings {
    margin-top: 46px;
    padding: 0 8px;
  }

  .dao-holdings-title {
    font-size: 18px;
    margin-bottom: 19px;
    padding-left: 20px;
  }

  .dao-holdings-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  /* 카드 padding 피그마 실측: T16 R21 B19 L23 (unit 프레임 right edge x=347, card right 368 → padding-right 21)
     flex gap 16 (icon right x=71 → name x=87) */
  .dao-token-card {
    min-height: 75px;
    padding: 16px 21px 19px 23px;
    gap: 16px;
    border-radius: 10px;
  }

  /* 피그마 amount group w=119 (amount 83 + gap 2 + unit 34) */
  .dao-token-amount-wrap {
    width: 119px;
    gap: 2px;
  }

  /* 피그마 amount frame w=83, text-right ("100,000" 등 우측 정렬) */
  .dao-token-amount {
    width: 83px;
    text-align: right;
  }

  /* 피그마 unit frame w=34, text-center, LS 0.12 ("CSET"/"개"/"USDT"/"POL") */
  .dao-token-symbol {
    width: 34px;
    text-align: center;
    letter-spacing: 0.12px;
  }

  .dao-token-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  /* 데스크톱 base에 min-width/min-height: 44px 있어 모바일에서 26px 덮어써도
     min 값이 우선되어 icon이 wrapper 40px를 초과함 → 명시적 리셋 */
  .dao-token-icon-wrap img {
    width: 26px;
    height: 26px;
    min-width: 0;
    min-height: 0;
  }

  .dao-token-icon-usdt img {
    width: 50px;
    height: 50px;
  }

  .dao-token-polygon-group {
    width: 26px;
    height: 26px;
  }

  .dao-token-name {
    font-size: 14px;
  }

  .dao-token-amount {
    font-size: 18px;
  }

  .dao-token-symbol {
    font-size: 12px;
  }

  /* 풋터 */
  .dao-footer {
    padding: 30px 16px 100px;
  }

  .dao-footer-logo {
    height: 49px;
  }

  .dao-footer-nav a,
  .dao-footer-divider,
  .dao-footer-biz,
  .dao-footer-addr,
  .dao-footer-copy {
    font-size: 11px;
  }

  /* 탭바 */
  .dao-tab-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 72px;
    background: white;
    border-radius: 0;
    padding: 0 24px;
    z-index: 100;
    border-top: 1px solid #e8e8e8;
  }

  .dao-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .dao-tab-icon-wrap {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3.5px 5.5px rgba(0,0,0,.02);
  }

  .dao-tab-icon-wrap img {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .dao-tab-label {
    font-size: 11px;
    font-weight: 700;
    color: #303030;
  }

  .dao-tab-item--active .dao-tab-label {
    color: #272729;
  }

  /* ---- 프로필 수정 페이지 모바일 ---- */

  /* 메인 영역: 좌우·상단 여백 제거 (카드가 화면 끝까지 꽉 차도록) */
  .dao-edit-main {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }

  /* 수정 카드: 흰 배경 유지, 패딩·flex 방향 변경 */
  .dao-edit-card {
    padding: 0;
    border-radius: 0;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: #ffffff;
    margin-bottom: 0;
  }

  /* 모바일 전용 프로필 영역 표시 */
  .dao-edit-mobile-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 34px 0 17px;
    width: 100%;
  }

  /* 모바일 아바타 크기 축소 */
  .dao-edit-avatar--sm {
    width: 80px;
    height: 80px;
  }

  .dao-edit-avatar--sm .dao-edit-avatar-icon {
    width: 24px;
    height: 24px;
  }

  /* 데스크톱 아바타 숨김 */
  .dao-edit-desktop-avatar {
    display: none;
  }

  /* 폼 필드: 세로 스택 */
  .dao-edit-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding: 0 24px 30px;
    box-sizing: border-box;
  }

  /* 이메일 ~ 저장 버튼 gap: 20 → 17 보정 (-3px) */
  .dao-edit-field--btn {
    margin-top: -3px;
  }

  /* 필드 너비: 데스크톱 327px 고정폭 해제 */
  .dao-edit-field {
    width: 100%;
    flex-shrink: 1;
  }

  /* 이메일 인증 버튼: 인풋 아래 별도 행 */
  .dao-edit-input-wrap--email {
    flex-wrap: wrap;
  }

  .dao-edit-input-wrap--email .dao-edit-input {
    width: 100%;
  }

  .dao-edit-input-wrap--email .dao-edit-verify-btn {
    position: static;
    transform: none;
    margin-top: 6px;
    width: 99px;
    height: 34px;
    padding: 0;
  }

  /* 저장 버튼 */
  .dao-edit-save-btn {
    width: 100%;
  }

  /* 보유현황 숨김 */
  .dao-edit-holdings {
    display: none;
  }
}


/* ============================================================
   나의 CoReset 페이지 추가 스타일 (crs- 접두사)
============================================================ */

/* 페이지 메인 영역 (dao-main 오버라이드)
   피그마 content 시작 x=349 → sidebar 277 + padding-left 72
   피그마 content 끝 x=1825 → viewport 1920 − padding-right 95 */
.crs-main {
  padding: 64px 95px 100px 72px;
}

/* mypage 리스트/상세 페이지 공용 main (mypage_history, mypage_nft,
   mypage_option, mypage_inquiries 등) — 피그마 x=349 동일 패턴
   padding-bottom 56: 피그마 pagination bottom 1181 → footer 1237 = 56
   모바일은 @media 1200 블록에서 오버라이드됨 */
.dao-mypage-main {
  padding: 64px 95px 56px 72px;
}

/* 페이지 제목 */
.crs-page-title {
  font-size: 34px;
  font-weight: 700;
  color: var(--dao-white);
  margin-bottom: 24px;
  margin-top: 0;
  padding: 0;
  line-height: 1.2;
}

.crs-page-title-sub {
  font-size: 24px;
  font-weight: 700;
}

/* 분석 카드 그리드 */
.crs-analytics-row {
  --bs-gutter-x: 18px;
  margin-bottom: 24px;
}

/* 분석 카드 */
.crs-card {
  background: var(--dao-card-bg);
  border-radius: 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
  padding: 40px 20px 41px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 34px;
  height: 230px;
}

/* 카드 상단: 아이콘 + 라벨 (가로 배치) */
.crs-card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.crs-card-icon {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3.5px 5.5px rgba(0, 0, 0, 0.02);
}

.crs-card-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.crs-card-label {
  font-size: 20px;
  font-weight: 700;
  color: var(--dao-white);
  margin: 0;
  line-height: 1.3;
}

.crs-card-label-sub {
  font-size: 14px;
  font-weight: 400;
  color: var(--dao-light);
}

/* 카드 하단: 금액 + 단위 (가로 배치) */
.crs-card-bottom {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 5px;
}

.crs-card-amount {
  font-size: 32px;
  font-weight: 800;
  color: var(--dao-white);
  white-space: nowrap;
  line-height: 1.4;
}

.crs-card-unit {
  font-size: 24px;
  font-weight: 700;
  color: var(--dao-light);
  white-space: nowrap;
}

/* 카드 구분선 (모바일 전용) */
.crs-card-divider {
  display: none;
  border: none;
  height: 2px;
  background: rgba(255, 255, 255);
  margin: 8px auto;
}

/* 모바일 전용 판매 버튼 래퍼 — 데스크톱에서 숨김 */
.crs-sell-btn-mobile-wrap {
  display: none;
}

/* "판매 등록하기" 버튼 */
/* 버튼 + 주의문구 한 줄 행 */
.crs-action-row {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.crs-sell-btn {
  display: block;
  flex-shrink: 0;
  width: 146px;
  height: 33px;
  /* 첫 번째 카드(25%) 중앙 정렬: 12.5% - 버튼 절반 */
  margin-left: calc(12.5% - 73px);
  background-color: #b7cd47;
  color: #272729;
  border: none;
  font-size: 17px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  line-height: 1;
}

/* 주의 문구 불릿 */
.crs-note-bullet {
  display: inline;
}

/* 주의 문구 */
.crs-note {
  margin: 0 0 0 auto;
  padding: 0;
  text-align: right;
  font-size: 16px;
  font-weight: 400;
  color: var(--dao-text-main);
  line-height: 1.5;
}

/* 테이블 섹션 */
.crs-table-section {
  background: var(--dao-white);
  border-radius: 10px;
  padding: 20px 0 0 0;
  margin-bottom: 50px;
  overflow: hidden;
}

/* 필터 바 — 오른쪽 정렬 */
.crs-filter-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 0 29px;
}

.crs-filter-label {
  font-size: 18px;
  font-weight: 700;
  color: #303030;
  margin: 0;
  white-space: nowrap;
}

.crs-filter-select {
  width: 107px;
  height: 40px;
  font-size: 16px;
  color: rgba(48, 48, 48, 0.7);
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  flex-shrink: 0;
}

/* 날짜 입력 래퍼 */
.crs-date-wrap {
  display: flex;
  align-items: center;
  width: 159px;
  height: 40px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: white;
  padding: 0 12px;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  flex-shrink: 0;
}

/* 날짜 아이콘 */
.crs-date-cal-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* 날짜 텍스트 입력 */
.crs-filter-date {
  border: none;
  outline: none;
  width: 100%;
  font-size: 16px;
  color: rgba(48, 48, 48, 0.7);
  background: transparent;
  padding: 0;
  font-family: inherit;
}

.crs-date-separator {
  color: #303030;
  font-weight: 700;
  margin: 0 8px;
}

.crs-search-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  flex-shrink: 0;
}

.crs-search-btn img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* 테이블 스타일 */
.crs-table {
  margin-bottom: 0;
  border-collapse: collapse;
  width: 100%;
}

.crs-table thead tr {
  background: #505364;
  border: none;
}

.crs-table thead th {
  background: #505364;
  color: var(--dao-white);
  font-size: 17px;
  font-weight: 700;
  padding: 12px 10px;
  border: none;
  text-align: center;
  line-height: 1.2;
  width: 25%;
}

.dao-my-nft-table-item {
  width: 20% !important;
  align-items: center;
  justify-content: center;
}

.crs-th-category {
  text-align: center !important;
}

.crs-th-amount {
  text-align: center !important;
}

.crs-th-reason {
  text-align: center !important;
}

.crs-th-datetime {
  text-align: center !important;
}

.crs-table tbody tr {
  height: 65px;
}

.crs-table tbody tr:last-child {
  border-bottom: none;
}

.crs-table.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: transparent;
  background-color: transparent;
}

.crs-table.table-striped > tbody > tr:nth-of-type(even) > * {
  --bs-table-bg-type: rgba(0, 0, 0, 0.04);
  background-color: rgba(0, 0, 0, 0.04);
}

.crs-table tbody td {
  padding: 12px 10px;
  font-size: 16px;
  color: #303030;
  border: none;
  text-align: center;
  vertical-align: middle;
  width: 25%;
}

.crs-td-category {
  text-align: center !important;
  font-weight: 400;
}

.crs-td-amount {
  text-align: center !important;
}

.crs-td-reason {
  text-align: center !important;
}

.crs-td-datetime {
  text-align: center !important;
}

/* 옵션 테이블 7컬럼 레이아웃 (피그마 448:1436 텍스트 중심 기반) */
.dao-option-table-item {
  text-align: center !important;
  vertical-align: middle;
}
.dao-option-table-item.dao-opt-col-type {
  width: 16% !important;
}
.dao-option-table-item.dao-opt-col-governance {
  width: 14% !important;
}
.dao-option-table-item.dao-opt-col-score {
  width: 14% !important;
}
.dao-option-table-item.dao-opt-col-method {
  width: 14% !important;
}
.dao-option-table-item.dao-opt-col-status {
  width: 13% !important;
}
.dao-option-table-item.dao-opt-col-date {
  width: 13% !important;
}
.dao-option-table-item.dao-opt-col-detail {
  width: 16% !important;
}

/* ============================================================
   참여내역 테이블 컬럼 레이아웃 (7컬럼)
============================================================ */
.dao-hist-table-item {
  text-align: center !important;
  vertical-align: middle;
}
.dao-hist-table-item.dao-hist-col-type   { width: 8% !important; }
.dao-hist-table-item.dao-hist-col-qty    { width: 14% !important; }
.dao-hist-table-item.dao-hist-col-price  { width: 10% !important; }
.dao-hist-table-item.dao-hist-col-total  { width: 14% !important; }
.dao-hist-table-item.dao-hist-col-status { width: 14% !important; }
.dao-hist-table-item.dao-hist-col-date   { width: 26% !important; }
.dao-hist-table-item.dao-hist-col-detail { width: 14% !important; }

/* 참여내역 데스크톱 테이블 헤더 row h=58 (피그마 448:2735 Rectangle 4398)
   텍스트 h=22 → padding 18/18 */
.crs-table thead th.dao-hist-table-item {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* 참여내역 모바일 테이블 (2줄 헤더 + 2줄 데이터) */
.dao-hist-mobile-table {
  border-collapse: separate;
  border-spacing: 0 0;
}

/* 헤더 행 1: 밝은 회색 */
.dao-hist-mobile-table thead tr:first-child th {
  background-color: #6e7080;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 4px;
  text-align: center;
  white-space: nowrap;
  border: none;
  border-bottom: 3px solid #fff;
}

/* 헤더 행 2: 진한 색 */
.dao-hist-mobile-table thead tr:last-child th {
  background-color: #505364;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 4px;
  text-align: center;
  white-space: nowrap;
  border: none;
  border-bottom: none;
}

/* 데이터 행 공통 */
.dao-hist-mobile-table tbody td {
  font-size: 11px;
  padding: 5px 4px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  border: none !important;
}

/* 항목 위쪽 행 (row1) */
.dao-hist-mob-row1 td {
  padding-bottom: 2px !important;
}

/* 항목 아래쪽 행 (row2) */
.dao-hist-mob-row2 td {
  padding-top: 2px !important;
}

/* 2항목(4행) 단위 교차 줄무늬 */
.dao-hist-mobile-table tbody tr:nth-child(4n+3) td,
.dao-hist-mobile-table tbody tr:nth-child(4n+4) td {
  background-color: #f2f2f2;
}

.dao-hist-mobile-table .crs-table-detail-btn {
  width: 52px;
  height: 22px;
  font-size: 11px;
  margin: 0 auto;
}

/* 옵션 모바일 테이블 (2줄 헤더 + 2줄 데이터) */
.dao-opt-mobile-table {
  border-collapse: separate;
  border-spacing: 0 0;
}

/* 헤더 행 1: 밝은 회색 */
.dao-opt-mobile-table thead tr:first-child th {
  background-color: #6e7080;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 4px;
  text-align: center;
  white-space: nowrap;
  border: none;
  border-bottom: 3px solid #fff;
}

/* 헤더 행 2: 진한 색 */
.dao-opt-mobile-table thead tr:last-child th {
  background-color: #505364;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 4px;
  text-align: center;
  white-space: nowrap;
  border: none;
  border-bottom: none;
}

/* 데이터 행 공통: border 없음 */
.dao-opt-mobile-table tbody td {
  font-size: 11px;
  padding: 5px 4px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  border: none !important;
}

/* 항목 위쪽 행 (row1): 아랫줄 없음 */
.dao-opt-mob-row1 td {
  padding-bottom: 2px !important;
}

/* 항목 아래쪽 행 (row2): 윗줄 없음 */
.dao-opt-mob-row2 td {
  padding-top: 2px !important;
}

/* 2항목(4행) 단위 교차 줄무늬: 3~4번째 행마다 연한 회색 */
.dao-opt-mobile-table tbody tr:nth-child(4n+3) td,
.dao-opt-mobile-table tbody tr:nth-child(4n+4) td {
  background-color: #f2f2f2;
}

.dao-opt-mobile-table .crs-table-detail-btn {
  width: 52px;
  height: 22px;
  font-size: 11px;
  margin: 0 auto;
}

/* 페이지네이션 */
.crs-table-detail-btn {
  width: 78px;
  height: 20px;
  color: var(--dao-white);
  align-items: center;
  justify-content: center;
  display: flex;
  background-color: #9D9D9D;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  margin: 0 auto;
}

.crs-pagination {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 0;
  padding: 20px;
  border-top: 1px solid #e8e8e8;
  justify-content: center;
}

.crs-page-selector {
  width: 72px;
  height: 44px;
}

.crs-page-selector select {
  width: 100%;
  height: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  font-size: 14px;
  color: #344055;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.crs-pag-controls {
  display: flex;
  gap: 18px;
  align-items: center;
}

.crs-pag-btn {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.crs-pag-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.crs-pag-btn:hover img {
  opacity: 1;
}

/* 모바일 반응형: 1100px 이하 */
@media (max-width: 1100px) {
  .crs-page-title {
    font-size: 28px;
    margin-bottom: 30px;
  }

  .crs-card {
    height: auto;
    min-height: 200px;
  }

  .crs-table-section {
    padding: 20px;
  }

  .crs-filter-bar {
    gap: 12px;
  }

  .crs-filter-select{
    width: 140px;
    font-size: 14px;
  }

  .crs-filter-date {
    font-size: 14px;
  }

  .crs-table thead th {
    font-size: 14px;
    padding: 10px 8px;
  }

  .crs-table tbody td {
    padding: 10px 8px;
    font-size: 14px;
  }
}

/* 모바일 반응형: 1200px 이하 */
@media (max-width: 1200px) {
  /* 메인 컨테이너 (CoReset 페이지) */
  .crs-main {
    padding: 20px 35px 120px;
  }

  /* 페이지 제목 */
  .crs-page-title {
    font-size: 20px;
    margin-bottom: 28px;
    text-align: center;
  }

  /* 카드 그리드 */
  .crs-analytics-row {
    margin-bottom: 0;
    --bs-gutter-x: 15px;
    --bs-gutter-y: 0px;
  }

  /* 카드 */
  .crs-card {
    height: 178px;
    padding: 27px 24px 19px;
    gap: 0;
    flex-direction: column;
    justify-content: flex-start;
  }

  .crs-card-icon {
    width: 42px;
    height: 42px;
  }

  .crs-card-icon img {
    width: 26px;
    height: 26px;
  }

  /* 카드 상단: 아이콘과 라벨 세로 배치 */
  .crs-card-top {
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
  }

  .crs-card-label {
    font-size: 14px;
    line-height: 16px;
    margin-top: 19px;
    min-height: 32px;
  }

  .crs-card-label-sub {
    font-size: 11px;
    line-height: 16px;
  }

  /* 카드 구분선 */
  .crs-card-divider {
    display: block;
    height: 2px;
    width: 100%;
    background: rgba(255, 255, 255, 0.3);
    opacity: 1;
    border: none;
    padding: 0;
    margin: 5px auto 0;
  }

  /* 카드 하단 */
  .crs-card-bottom {
    margin-top: 11px;
  }

  .crs-card-amount {
    font-size: 16px;
    line-height: 1.25;
  }

  .crs-card-unit {
    font-size: 12px;
    line-height: 1.25;
  }

  /* 모바일 전용 판매 버튼 래퍼 — 총 보유 수량 카드 아래 중앙 */
  .crs-sell-btn-mobile-wrap {
    display: flex;
    justify-content: flex-start;
    padding: 9px 0 13px;
    padding-left: calc(25% - 49px);
  }

  .crs-sell-btn-mobile {
    width: 98px;
    height: 23px;
    background-color: #b7cd47;
    color: #272729;
    border: none;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Nanum Gothic', sans-serif;
    cursor: pointer;
    line-height: 1;
  }

  /* 버튼 + 주의문구 행 — 모바일에서 세로 스택 */
  .crs-action-row {
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 0;
  }

  /* 기존 판매 버튼 — 모바일에서 숨김 */
  .crs-action-row .crs-sell-btn {
    display: none;
  }

  /* 주의 문구 */
  .crs-note {
    padding: 0;
    margin: 24px 20px 40px;
    font-size: 12px;
    text-align: center;
    line-height: 16px;
    color: #f1f1f1;
  }

  .crs-note-bullet {
    display: none;
  }

  /* 테이블 발생일시 — 시간 부분 숨김 */
  .crs-time {
    display: none;
  }

  /* 테이블 박스 꽉 차게 (crs-main padding 35px 상쇄) */
  .dao-my-nft-table-box {
    border-radius: 0;
    padding: 15px 0 0 0;
    margin-left: -35px;
    margin-right: -35px;
  }

  /* dao-mypage-content 안에서는 8px만 상쇄 */
  .dao-mypage-content .dao-my-nft-table-box {
    margin-left: -8px;
    margin-right: -8px;
  }

  /* 테이블 섹션 (전체 너비) */
  .crs-table-section {
    padding: 16px 0 0 0;
    margin-left: -35px;
    margin-right: -35px;
    margin-bottom: 30px;
    border-radius: 0;
    overflow: visible;
  }

  .crs-filter-bar {
    gap: 8px;
    margin-bottom: 20px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    flex-wrap: wrap;
  }

  .crs-filter-bar > div:first-child {
    flex-shrink: 0;
  }

  .crs-filter-label {
    display: none;
  }

  .crs-filter-select {
    height: 29px;
    font-size: 11px;
    padding: 0 10px;
    width: 77px;
    flex-shrink: 0;
    border-radius: 3px;
  }

  .crs-filter-group-dates {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
  }

  .crs-date-wrap {
    height: 29px;
    padding: 0 12px;
    width: 114px;
    flex-shrink: 0;
    border-radius: 3px;
  }

  .crs-date-cal-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .crs-filter-date {
    font-size: 11px;
  }

  .crs-date-separator {
    display: none;
  }

  .crs-search-btn {
    width: 29px;
    height: 29px;
    flex-shrink: 0;
    padding: 0;
  }

  .crs-search-btn img {
    width: 15px;
    height: 15px;
  }

  .dao-my-nft-table-item {
    width: auto !important;
    white-space: nowrap;
  }

  .crs-table .crs-table-detail-btn {
    width: 52px;
    height: 22px;
    font-size: 11px;
    line-height: 20px;
  }

  .crs-table thead th {
    font-size: 14px;
    padding: 8px 6px;
  }

  .crs-table tbody tr {
    height: 29px;
  }

  .dao-opt-mobile-table tbody tr,
  .dao-hist-mobile-table tbody tr {
    height: auto;
  }

  .crs-table tbody td {
    padding: 4px 6px;
    font-size: 11px;
  }

  /* 모바일 NFT 이름: 2줄 (CoReset NFT / #0001) */
  .dao-my-nft-br-mobile {
    display: inline;
  }

  .dao-my-nft-time-desktop {
    display: none;
  }

  .dao-my-nft-name {
    display: inline-block;
    text-align: center;
    line-height: 14px;
  }

  .dao-my-nft-name-main {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: -0.33px;
    line-height: 14px;
  }

  .dao-my-nft-name-num {
    font-size: 9px;
    line-height: 14px;
  }

  .dao-my-nft-name-wrap {
    gap: 0;
  }

  .crs-pagination {
    gap: 12px;
    padding: 12px;
    margin-top: 0;
  }

  .crs-page-selector {
    width: 54px;
    height: 28px;
  }

  .crs-page-selector select {
    height: 100%;
    font-size: 12px;
    padding: 4px 20px 4px 4px;
    line-height: 1.2;
    background-position: right 4px center;
  }

  .crs-pag-controls {
    gap: 12px;
  }

  .crs-pag-btn {
    width: 26px;
    height: 28px;
  }
}

/* ============================================================
   NFT 상세보기 페이지 추가 스타일 (nftd- 접두사)
============================================================ */

/* NFT 상세 카드
   피그마 1920: card w=1476, 섹션 inner w=1084 → 좌우 padding 196 = 13.3%
   퍼센트 padding으로 1201~1920 구간 카드 여백 비례 유지 */
.nftd-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  padding: 43px 13.3% 53px;
}

/* NFT 이미지 섹션: 흰색 배경, 내부 회색 플레이스홀더 */
.nftd-image-section {
  background: white;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nftd-image-placeholder {
  background: #d9d9d9;
  width: 225px;
  height: 225px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nftd-image-label {
  color: #000000;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}

/* NFT명 행 */
.nftd-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 49px;
  height: 100px;
  background: #b7cd47;
  color: #272729;
  margin-bottom: 4px !important;
}

.nftd-name-label {
  font-size: 22px;
  font-weight: 700;
}

.nftd-name-pipe {
  color: white;
  font-size: 16px;
}

.nftd-name-value {
  font-size: 22px;
  font-weight: normal;
}

/* 섹션 (지급정보, 기술정보) */
.nftd-section {
  margin-bottom: 17px;
}

/* 섹션 헤더 */
.nftd-section-header {
  background: #272729;
  color: white;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 4px;
}

/* 데이터 행 */
.nftd-row {
  display: flex;
  min-height: 44px;
  margin-bottom: 3px;
  gap: 4px;
}

.nftd-row:last-child {
  margin-bottom: 0;
}

.nftd-label {
  width: 45%;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 17px;
  font-weight: 700;
  color: #000000;
  padding: 12px 50px 12px 12px;
  text-align: right;
}

.nftd-value {
  flex: 1;
  background: white;
  display: flex;
  align-items: center;
  padding: 12px 20px 12px 50px;
  font-size: 17px;
  font-weight: 400;
  color: #000000;
  word-break: break-all;
  border: 2px solid #f1f1f1;
}

/* 버튼 영역 (흰 카드 밖, 어두운 배경 위) */
.nftd-btn-wrap {
  display: flex;
  justify-content: center;
  padding: 40px 20px;
  background: transparent;
  max-width: 1084px;
  margin: 36px auto 0;
}

.nftd-back-btn {
  width: 243px;
  height: 50px;
  background: #b7cd47;
  color: #272729;
  border: none;
  border-radius: 5px;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

/* 모바일 반응형 (1200px 이하) */
@media (max-width: 1200px) {
  .nftd-card {
    margin-left: -30px;
    margin-right: -30px;
    width: calc(100% + 60px);
    padding: 28px 11px 31px;
  }

  .nftd-image-section {
    height: 248px;
    align-items: flex-start;
    padding-top: 41px;
  }

  .nftd-image-placeholder {
    width: 150px;
    height: 150px;
  }

  .nftd-name-row {
    height: 74px;
    gap: 30px;
    margin-bottom: 6px !important;
  }
  .nftd-name-pipe {
    font-size: 16px;
    color: white;
  }
  .nftd-name-label,
  .nftd-name-value {
    font-size: 16px;
  }

  .nftd-section {
    margin-bottom: 6px;
  }

  .nftd-section-header {
    font-size: 16px;
  }

  .nftd-label {
    width: 35%;
    font-size: 14px;
    padding: 10px 8px;
    text-align: center;
    justify-content: center;
  }

  .nftd-value {
    font-size: 14px;
    padding: 10px 14px 10px 29px;
  }

  .nftd-back-btn {
    width: 180px;
    font-size: 18px;
  }

  .nftd-image-section,
  .nftd-name-row,
  .nftd-section,
  .nftd-btn-wrap {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .nftd-btn-wrap {
    margin-top: 19px;
    padding: 0 20px 30px;
  }
}

/* ============================================================
   옵션 상세보기 페이지 추가 스타일 (optd- 접두사)
============================================================ */

/* 옵션 상세 메인 영역 (crs-main 대신 사용, 모바일 35px 패딩 적용 안 함) */
.optd-main {
  padding-top: 64px;
}

/* 옵션 상세 카드 */
.optd-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  padding-top: 109px;
  padding-bottom: 110px;
}

/* 옵션 점수 바 */
.optd-score-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  height: 100px;
  background: #b7cd47;
  color: #272729;
  max-width: 1084px;
  margin: 0 auto 4px;
}

.optd-score-label {
  font-size: 22px;
  font-weight: 700;
}

.optd-score-pipe {
  color: white;
  font-size: 16px;
}

.optd-score-value {
  font-size: 22px;
  font-weight: 400;
}

/* 섹션 (참여정보, 지급정보) */
.optd-section {
  max-width: 1084px;
  margin: 0 auto 17px;
}

/* 섹션 헤더 */
.optd-section-header {
  background: #3a3a3a;
  color: white;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* 데이터 행 */
.optd-row {
  display: flex;
  min-height: 44px;
  margin-bottom: 3px;
  gap: 4px;
}

.optd-row:last-child {
  margin-bottom: 0;
}

.optd-label {
  width: 45%;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 17px;
  font-weight: 700;
  color: #000000;
  padding: 12px 50px 12px 12px;
  text-align: right;
}

.optd-value {
  flex: 1;
  background: white;
  display: flex;
  align-items: center;
  padding: 12px 20px 12px 50px;
  font-size: 17px;
  font-weight: 400;
  color: #000000;
  border: 2px solid #f1f1f1;
}

/* 지급정보 섹션: 라벨 16px (참여정보는 17px) */
.optd-section--payment .optd-label {
  font-size: 16px;
}

/* 지급방식 행: 값 + 버튼 */
.optd-value-with-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 31px;
}

.optd-detail-link {
  background: #9d9d9d;
  color: white;
  border: none;
  border-radius: 0;
  font-size: 14px;
  font-weight: 400;
  padding: 5px 7px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

/* 안내 문구 (피그마: 카드 중앙에 w=597 리스트) */
.optd-notes {
  max-width: 1084px;
  margin: 45px auto 0;
  text-align: center;
}

.optd-notes ul {
  list-style: disc;
  padding-left: 22px;
  margin: 0;
  display: inline-block;
  text-align: left;
}

.optd-notes ul li {
  font-size: 15px;
  font-weight: 400;
  color: #000000;
  line-height: 25px;
}

/* 버튼 영역 (흰 카드 밖, 어두운 배경 위) */
.optd-btn-wrap {
  display: flex;
  justify-content: center;
  padding: 0 20px;
  background: transparent;
  margin: 59px 0 0;
}

.optd-back-btn {
  width: 243px;
  height: 50px;
  background: #b7cd47;
  color: #272729;
  border: none;
  border-radius: 5px;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

/* 중간 해상도 보정 (1500px 이하)
   카드가 좁아지면서 content max-width 1084와 card 폭 차이가 사라져
   좌우 공간이 부족하게 보이는 문제 방지 */
@media (max-width: 1200px) {
  .optd-card {
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 40px;
    padding-right: 40px;
  }

  .optd-score-row,
  .optd-section,
  .optd-notes {
    max-width: none;
  }

  .optd-notes {
    margin-top: 30px;
  }

  .optd-btn-wrap {
    margin-top: 40px;
  }
}

/* 모바일 반응형 (1200px 이하) */
@media (max-width: 1200px) {
  /* 페이지 제목 y=148 (헤더 100 + 48) */
  .optd-main {
    padding-top: 48px;
  }

  .optd-card {
    border-radius: 10px;
    max-width: none;
    margin-left: -3px;
    margin-right: -3px;
    width: calc(100% + 6px);
    padding: 53px 11px 56px;
  }

  /* 점수 바: 좌측 정렬 (피그마 옵션점수 x=34, 카드 x=5 기준 pl=29, score-row x=17 기준 pl=17) */
  .optd-score-row {
    height: 74px;
    justify-content: flex-start;
    gap: 16px;
    padding-left: 17px;
    color: #303030;
  }

  /* pipe→+10 gap 29 = base gap 16 + margin-right 13 */
  .optd-score-pipe {
    font-size: 16px;
    margin-right: 13px;
  }

  .optd-score-label {
    font-size: 20px;
  }

  .optd-score-value {
    font-size: 17px;
  }

  .optd-section {
    margin-bottom: 6px;
  }

  .optd-section-header {
    font-size: 18px;
  }

  .optd-row {
    margin-bottom: 4px;
  }

  /* 라벨 피그마: 셀 right 135, text right 120 → padding-right 15 */
  .optd-label {
    width: 35%;
    font-size: 15px;
    padding: 10px 15px 10px 0;
  }

  /* 값 피그마: 셀 x=139, text x=168 → padding-left 29 */
  .optd-value {
    font-size: 15px;
    padding: 10px 14px 10px 29px;
  }

  /* 지급내역 버튼 우측 여백 14 (셀 right 359 - btn right 345) */
  .optd-value-with-btn {
    padding-right: 14px;
  }

  .optd-detail-link {
    font-size: 11px;
    padding: 2px 6px;
  }

  /* 모바일 notes: 카드 내 왼쪽 (피그마 x=30, 카드 x=5 + pl=11 → notes pl=14) */
  .optd-notes {
    margin-top: 23px;
    text-align: left;
    padding-left: 14px;
    padding-right: 10px;
  }

  .optd-notes ul {
    padding-left: 20px;
    display: block;
  }

  /* 피그마: 첫 bullet leading 25 / 두 번째 leading 18 */
  .optd-notes ul li {
    font-size: 13px;
    line-height: 18px;
  }

  .optd-notes ul li:first-child {
    line-height: 25px;
    margin-bottom: 3px;
  }

  .optd-back-btn {
    width: 180px;
    font-size: 18px;
  }

  .optd-score-row,
  .optd-section,
  .optd-btn-wrap {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* 카드 bottom y=953 → 버튼 top y=989: gap 36 */
  .optd-btn-wrap {
    padding: 0 20px;
    margin-top: 36px;
  }
}

/* ============================================================
   참여내역 상세보기 페이지 추가 스타일 (histd- 접두사)
============================================================ */

/* 참여내역 상세 메인 */
.histd-main {
  padding-top: 64px;
}

/* 참여내역 상세 카드 */
.histd-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  max-width: 1476px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 40px;
  padding-bottom: 64px;
}

/* 페이지 타이틀 바 (녹색) */
.histd-title-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  background: #b7cd47;
  color: #272729;
  font-size: 22px;
  font-weight: 700;
  max-width: 1084px;
  margin: 0 auto 16px;
}

/* 섹션 공통 */
.histd-section {
  max-width: 1084px;
  margin: 0 auto 50px;
}

.histd-section:last-of-type {
  margin-bottom: 0;
}

.histd-section--basic {
  margin-top: 0;
}

/* 섹션 헤더 */
.histd-section-header {
  background: #3a3a3a;
  color: white;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* 2열 그리드 (데스크탑) */
.histd-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 4px;
}

/* 데이터 행 */
.histd-row {
  display: flex;
  min-height: 44px;
  gap: 3px;
}

/* full-width 행 (그리드 내 전체 열 차지) */
.histd-row--full {
  grid-column: 1 / -1;
}

/* full-width 행의 값은 가운데 정렬 (Figma 실측) */
.histd-row--full > .histd-value {
  justify-content: center;
  text-align: center;
  padding-left: 20px;
}

/* 단독 행 가운데 정렬 (기술정보 등) */
.histd-row--center > .histd-value {
  justify-content: center;
  text-align: center;
  padding-left: 20px;
  font-size: 16px;
}

/* 섹션 직계 자식 행 — grid 밖 단독 행 간격 (Figma 실측 4px) */
.histd-section > .histd-row {
  margin-bottom: 4px;
}
.histd-section > .histd-row:last-child {
  margin-bottom: 0;
}

/* 상태바 행은 자체 min-height 없음 */
.histd-row--status {
  min-height: unset;
}

/* 영수증 행은 min-height 65px */
.histd-row--receipt {
  min-height: 65px;
}

/* 레이블 — Figma 실측 200px 고정, 가운데 정렬 */
.histd-label {
  width: 200px;
  flex-shrink: 0;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  color: #000000;
  padding: 12px;
  text-align: center;
  white-space: nowrap;
}

/* 값 — 피그마: 좌측 정렬 text x=844, cell x=757 → padding-left 87 */
.histd-value {
  flex: 1;
  background: white;
  display: flex;
  align-items: center;
  padding: 12px 20px 12px 87px;
  font-size: 17px;
  font-weight: 400;
  color: #000000;
  word-break: break-all;
  border: 2px solid #f1f1f1;
}

/* 영수증 값 — 버튼 그룹 가운데 정렬 */
.histd-value--receipt {
  padding-left: 20px;
  justify-content: center;
}

/* 거래경로 row — 지인전용 링크 복사 버튼 */
.histd-copy-link-btn {
  flex-shrink: 0;
  margin-left: 16px;
  background: #9d9d9d;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  padding: 6px 12px;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}

.histd-copy-link-btn:hover {
  background: #7f7f7f;
}

/* ── 상태 진행바 ─────────────────── */
.histd-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 65px;
  background: white;
  border: 2px solid #f1f1f1;
  padding: 12px 85px 12px 67px;
}

.histd-status-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.histd-status-step {
  width: 154px;
  height: 40px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: default;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.histd-status-step--active {
  background: #b7cd47;
  color: white;
  border: none;
}

.histd-status-step--inactive {
  background: white;
  color: #9d9d9d;
  border: 1px solid #e3e3e3;
}

.histd-status-arrow {
  width: 37px;
  font-size: 20px;
  font-weight: 700;
  color: #9d9d9d;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

/* 데스크탑: 좌우 화살표만 표시, 상하 화살표 숨김 */
.histd-status-arrow--right {
  display: flex;
}
.histd-status-arrow--down {
  display: none;
}

.histd-cancel-btn {
  background: #e84141;
  color: white;
  border: none;
  width: 125px;
  height: 25px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 영수증 버튼 ─────────────────── */
.histd-receipt-buttons {
  display: flex;
  align-items: center;
  gap: 23px;
  flex-wrap: nowrap;
}

.histd-receipt-btn {
  width: 154px;
  height: 40px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.histd-receipt-btn--view  { background: #4779ae; }
.histd-receipt-btn--pdf   { background: #d46351; }
.histd-receipt-btn--email { background: #b7cd47; }

/* ── 안내 문구 (피그마: 카드 중앙 w=490 리스트) ─────────────────── */
.histd-notes {
  max-width: 1084px;
  margin: 42px auto 0;
  text-align: center;
}

.histd-notes ul {
  list-style: disc;
  padding-left: 22px;
  margin: 0;
  display: inline-block;
  text-align: left;
}

.histd-notes ul li {
  font-size: 15px;
  font-weight: 400;
  color: #000000;
  line-height: 25px;
}

/* ── 버튼 영역 (피그마: 카드 하단 57px gap → 버튼) ─────────────────── */
.histd-btn-wrap {
  display: flex;
  justify-content: center;
  padding: 0 20px;
  background: transparent;
  max-width: 1476px;
  margin: 57px auto 0;
}

.histd-back-btn {
  width: 243px;
  height: 50px;
  background: #b7cd47;
  color: #272729;
  border: none;
  border-radius: 5px;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

/* 중간 해상도 보정 (1500px 이하) — 콘텐츠가 카드 가장자리에 닿지 않도록 */
@media (max-width: 1200px) {
  .histd-card {
    padding-left: 40px;
    padding-right: 40px;
  }

  .histd-title-bar,
  .histd-section,
  .histd-notes {
    max-width: none;
  }

  .histd-btn-wrap {
    max-width: none;
  }

  /* 상태바: 카드 폭이 좁아질 때 steps 그룹과 cancel 버튼이 줄바꿈되도록 허용 */
  .histd-status-bar {
    padding: 12px 20px;
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .histd-status-steps {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

/* ============================================================
   참여내역 상세 — 모바일 반응형 (1200px 이하)
============================================================ */
@media (max-width: 1200px) {
  /* 페이지 제목 y=148 (헤더 100 + 48) — optd와 동일 */
  .histd-main {
    padding-top: 48px;
  }

  .histd-card {
    border-radius: 10px;
    max-width: none;
    margin-left: -3px;
    margin-right: -3px;
    width: calc(100% + 6px);
    padding: 53px 11px 38px;
  }

  /* 타이틀 바 */
  .histd-title-bar {
    height: 74px;
    font-size: 20px;
    max-width: none;
    margin: 0 0 7px;
  }

  /* 2열 → 1열, 피그마 행 gap=4 */
  .histd-row-grid {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }

  /* full-width 행 해제 */
  .histd-row--full {
    grid-column: auto;
  }

  /* 섹션 — Figma 모바일 실측 41px */
  .histd-section {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 41px;
  }

  /* 섹션 헤더 */
  .histd-section-header {
    font-size: 18px;
  }

  /* 라벨 — 피그마 모바일: 오른쪽 정렬, padding-right 22 (cell right 135 − text right 113) */
  .histd-label {
    width: 119px;
    flex-shrink: 0;
    font-size: 15px;
    padding: 10px 22px 10px 0;
    text-align: right;
    justify-content: flex-end;
    white-space: normal;
  }

  /* 값 — 피그마: text x=168, cell x=139 → padding-left 29 */
  .histd-value {
    font-size: 15px;
    padding: 10px 14px 10px 29px;
  }

  .histd-copy-link-btn {
    margin-left: 8px;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 3px;
  }

  .histd-value--receipt {
    padding-left: 29px;
    justify-content: center;
  }

  /* 모바일: 모든 값 왼쪽 정렬 padding-left 29 */
  .histd-row--full > .histd-value,
  .histd-row--center > .histd-value {
    justify-content: flex-start;
    text-align: left;
    padding-left: 29px;
  }

  /* 상태 진행바 — 세로 배치 */
  .histd-status-bar {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
  }

  /* 피그마: 스텝 간 gap 5 */
  .histd-status-steps {
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
  }

  .histd-status-step {
    width: 131px;
    height: 30px;
    font-size: 15px;
  }

  /* 모바일: 상하 화살표 표시, 좌우 화살표 숨김 */
  .histd-status-arrow--right {
    display: none;
  }
  .histd-status-arrow--down {
    display: flex;
    width: auto;
    font-size: 20px;
  }

  /* 피그마: 체결완료 → 취소버튼 gap 38 */
  .histd-cancel-btn {
    width: 91px;
    height: 30px;
    font-size: 12px;
    margin-top: 38px;
  }

  /* 영수증 버튼 — 세로 중앙 배치 (피그마: 버튼 left padding 47, right 47 centered) */
  .histd-receipt-buttons {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .histd-receipt-btn {
    width: 125px;
    height: 30px;
    font-size: 14px;
  }

  /* 안내 문구 — 피그마 x=37 (카드 x=5 + 11 pl + notes pl 21) */
  .histd-notes {
    max-width: none;
    margin: 25px 0 0;
    padding: 0 16px 0 22px;
    text-align: left;
  }

  .histd-notes ul {
    padding-left: 15px;
    display: block;
  }

  .histd-notes ul li {
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 4px;
  }

  .histd-notes ul li:first-child {
    line-height: 25px;
  }

  /* 버튼 영역 — 피그마: 카드 bottom 2400 → 버튼 top 2433: gap 33 */
  .histd-btn-wrap {
    max-width: none;
    margin: 33px 0 0;
    padding: 0 20px;
  }

  .histd-back-btn {
    width: 180px;
    font-size: 18px;
  }
}


/* ============================================================
   1:1 문의하기 페이지 (dao-inq- 접두사)
============================================================ */

/* 필터 바: 좌측(구분+셀렉트) / 우측(문의하기 버튼) 양쪽 배치 */
.dao-inq-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 102px 0 94px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* 1:1 문의하기 작성 버튼 — 피그마 w=154 h=40 */
.dao-inq-write-btn {
  width: 154px;
  height: 40px;
  padding: 0 20px;
  background: #b7cd47;
  color: #272729;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  border: none;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.dao-inq-write-btn:hover {
  background: #a3b83e;
}

/* 테이블 셀 공통 */
.dao-inq-table-item {
  text-align: center !important;
  vertical-align: middle;
}

/* 컬럼 너비 — 피그마 4개 동일 25% (header 중심 529.5 / 908 / 1286.5 / 1645.5 = 각 378-380 간격) */
.dao-inq-table-item.dao-inq-col-type    { width: 25% !important; }
.dao-inq-table-item.dao-inq-col-content { width: 25% !important; }
.dao-inq-table-item.dao-inq-col-date    { width: 25% !important; }
.dao-inq-table-item.dao-inq-col-detail  { width: 25% !important; }

/* 모바일 테이블 스타일 */
.dao-inq-mobile-table {
  border-collapse: collapse;
}

.dao-inq-mobile-table thead th {
  background-color: #505364;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 4px;
  text-align: center;
  white-space: nowrap;
  border: none;
}

.dao-inq-mobile-table tbody td {
  font-size: 11px;
  padding: 8px 4px;
  text-align: center;
  vertical-align: middle;
  border: none !important;
  color: #303030;
}

.dao-inq-mobile-table .crs-table-detail-btn {
  width: 52px;
  height: 22px;
  font-size: 11px;
  margin: 0 auto;
}

/* ── 반응형: 1200px 이하 ─────────────────────────────────── */
@media (max-width: 1200px) {
  /* 필터 바 모바일 — 피그마: select x=11 pl / btn right 13 pr */
  .dao-inq-filter-bar {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 0 13px 0 11px !important;
    margin-bottom: 12px;
    align-items: center;
  }

  /* 모바일 작성 버튼 — 피그마 w=110 h=30 */
  .dao-inq-write-btn {
    width: 110px;
    height: 30px;
    padding: 0 12px;
    font-size: 13px;
  }
}

/* ── 반응형: 768px 이하 ─────────────────────────────────── */
@media (max-width: 768px) {
  .dao-inq-filter-bar {
    gap: 6px !important;
    padding: 0 13px 0 11px !important;
  }

  .dao-inq-write-btn {
    width: 110px;
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
  }
}


/* ============================================================
   1:1 문의하기 작성 페이지 (dao-inq-action- 접두사)
============================================================ */

/* 설명 텍스트 (데스크탑) */
.dao-inq-action-desc {
  font-size: 16px;
  font-weight: 400;
  font-family: 'Nanum Gothic', sans-serif;
  color: #ffffff;
  margin-top: 8px;
  margin-bottom: 28px;
  max-width: 450px;
}

/* 모바일 히어로 영역 — 기본 숨김, 1200px 이하에서 표시 */
.dao-inq-action-mobile-hero {
  display: none;
  text-align: center;
  /* 피그마: 제목 중앙 y=158, header=100, main padding-top=20 → top padding ≈ 38px */
  padding: 38px 20px 0;
}

.dao-inq-action-mobile-title {
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  color: #ffffff;
  /* 피그마: 제목 bottom ~ 설명 top ≈ 17px */
  margin-bottom: 17px;
}

.dao-inq-action-mobile-desc {
  font-size: 14px;
  font-weight: 400;
  font-family: 'Nanum Gothic', sans-serif;
  color: #ffffff;
  line-height: 1.6;
  /* 피그마: 설명 bottom(229) → 카드 top(264) = 35px */
  margin-bottom: 35px;
}

/* 폼 카드 */
.dao-inq-action-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 105px 19% 133px;
}

/* 각 폼 행 */
/* 피그마: 라벨이 필드와 수직 중앙 정렬 (문의내용 라벨이 textarea 세로 중앙) */
.dao-inq-action-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 60px;
}

/* 라벨 */
.dao-inq-action-label {
  flex-shrink: 0;
  width: 125px;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  color: rgba(48, 48, 48, 0.7);
  line-height: 1.4;
}

/* 필드 컨테이너 */
.dao-inq-action-field {
  flex: 1;
}

/* 셀렉트 드롭다운 */
.dao-inq-action-select {
  width: 266px;
  height: 45px;
  border: 1px solid #c9c9c9;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #7d7d7d;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%237d7d7d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  text-align: center;
}

.dao-inq-action-select:focus {
  outline: none;
  border-color: #a0a0a0;
}

/* 텍스트에리어 */
/* 피그마: placeholder center-y = textarea center-y (수직 중앙 정렬)
   textarea height=330, placeholder height≈61px → padding-top ≈ (330-61)/2 = 134px */
.dao-inq-action-textarea {
  width: 100%;
  max-width: 783px;
  height: 330px;
  border: 1px solid #c9c9c9;
  border-radius: 10px;
  padding: 134px 25px 16px;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  resize: none;
  line-height: 1.6;
  box-sizing: border-box;
}

.dao-inq-action-textarea::placeholder {
  color: #7d7d7d;
  text-align: left;
}

.dao-inq-action-textarea:focus {
  outline: none;
  border-color: #a0a0a0;
}

/* 첨부파일 영역 */
.dao-inq-action-file-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.dao-inq-action-file-btn {
  width: 171px;
  height: 40px;
  background: #7d7d7d;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  border: none;
  border-radius: 0;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dao-inq-action-file-btn:hover {
  background: #6a6a6a;
}

.dao-inq-action-file-info {
  font-size: 14px;
  font-weight: 400;
  font-family: 'Nanum Gothic', sans-serif;
  color: #7d7d7d;
  line-height: 1.5;
}

/* 하단 버튼 + 안내문구 영역 */
/* 피그마: 버튼 하단~안내문구 상단 간격 ~10px */
.dao-inq-action-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dao-inq-action-buttons {
  display: flex;
  align-items: center;
  gap: 14px;
  /* 피그마: 취소 버튼이 라벨과 동일한 x 좌표 — 들여쓰기 없음 */
  padding-left: 0;
}

/* 취소 버튼 */
.dao-inq-action-cancel-btn {
  width: 121px;
  height: 50px;
  background: #ffffff;
  border: 1px solid rgba(48, 48, 48, 0.3);
  border-radius: 5px;
  color: rgba(48, 48, 48, 0.3);
  font-size: 17px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dao-inq-action-cancel-btn:hover {
  background: #f5f5f5;
}

/* 문의하기 버튼 */
.dao-inq-action-submit-btn {
  width: 196px;
  height: 50px;
  background: #edb323;
  border: none;
  border-radius: 5px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dao-inq-action-submit-btn:hover {
  background: #d9a11e;
}

/* 안내 문구 */
/* 피그마: 안내 문구가 라벨/버튼과 동일한 x 좌표, 불릿 들여쓰기 22.5px */
.dao-inq-action-notice {
  padding-left: 22px;
  margin-bottom: 0;
  list-style: disc;
}

.dao-inq-action-notice li {
  font-size: 15px;
  font-weight: 400;
  font-family: 'Nanum Gothic', sans-serif;
  color: #7d7d7d;
  line-height: 1.6;
}

/* ── 반응형: 1200px 이하 ─────────────────────────────────── */
@media (max-width: 1200px) {
  /* 데스크탑 제목 영역 숨김, 모바일 히어로 표시
     (inquiry_action/detail 전용 — dao-inq-action-desc 있는 경우만)
     mypage_history/nft/option 등은 모바일에서도 title 표시되어야 함 */
  .dao-mypage-cards:has(.dao-inq-action-desc) .crs-page-title,
  .dao-inq-action-desc {
    display: none;
  }

  .dao-inq-action-mobile-hero {
    display: block;
  }

  /* Step 2: 카드 패딩
     좌우: 부모(dao-mypage-content) 8px + 카드 21px = 29px (피그마 요소 x=29)
     상단: 17px (피그마: 카드 top 264 → 첫 라벨 top 281 = 17px)
     하단: 63px (피그마: 마지막 요소 bottom 914 → 카드 bottom 977 = 63px) */
  .dao-inq-action-card {
    border-radius: 0px;
    /* 음수 마진으로 부모(dao-mypage-content)의 8px padding 상쇄 → 카드 화면 끝까지 */
    margin: 0 -8px 20px;
    /* 좌우 패딩 8px 보정: 8(상쇄) + 21(원래) = 29px → 피그마 요소 x=29 유지 */
    padding: 17px 29px 63px;
  }

  /* Step 3: 행 간격 — 세로 방향 전환
     margin-bottom: 32px (피그마: 행 사이 gap ≈ 42~43px)
     gap: 10px (피그마: 라벨 bottom ~ 필드 top ≈ 10px) */
  .dao-inq-action-row {
    flex-direction: column;
    align-items: stretch; /* 수평 중앙 정렬 버그 방지: 자식을 전폭으로 늘려 왼쪽 정렬 */
    gap: 10px;
    margin-bottom: 32px;
  }

  /* 라벨 */
  .dao-inq-action-label {
    width: auto;
    padding-top: 0;
    font-size: 16px;
  }

  /* 셀렉트 */
  .dao-inq-action-select {
    width: 200px;
    height: 30px;
    border-radius: 5px;
    font-size: 14px;
    padding: 0 10px;
  }

  /* 텍스트에리어 — placeholder 수직 중앙 정렬
     height=194, border=2px → 내부 192px
     placeholder 3줄 × line-height 20px = 60px
     중앙: (192 - 60) / 2 = 66px → 상하 대칭 패딩 */
  .dao-inq-action-textarea {
    max-width: 100%;
    height: 194px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 20px;
    padding: 66px 14px;
  }

  /* 첨부파일 버튼 */
  .dao-inq-action-file-btn {
    width: 125px;
    height: 35px;
    border-radius: 5px;
    font-size: 14px;
    margin-bottom: 11px;
  }

  /* 첨부파일 안내 텍스트 */
  .dao-inq-action-file-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Step 6: 파일 안내 텍스트 font-size (피그마: 14px) */
  .dao-inq-action-file-info {
    font-size: 14px;
  }

  /* Step 4: 버튼 수평 중앙 정렬
     피그마: 취소 left=40, 문의하기 right=41 → 대칭 중앙 배치 */
  .dao-inq-action-buttons {
    padding-left: 0;
    gap: 14px;
    justify-content: center;
  }

  .dao-inq-action-submit-btn {
    width: 159px;
  }

  /* Step 5: 안내 문구 위치
     피그마 x=38, 카드 내부 오프셋 29px → 추가 indent 9px */
  .dao-inq-action-notice {
    padding-left: 9px;
    text-align: left;
    display: flex;
    justify-content: center;
  }

  .dao-inq-action-notice li {
    font-size: 15px;
    max-width: 250px;
  }
}


/* ============================================================
   1:1 문의 상세 페이지 (dao-inq-detail- 접두사)
============================================================ */

/* 문의내용 읽기 전용 텍스트 */
.dao-inq-detail-content-text {
  font-size: 16px;
  font-weight: 400;
  font-family: 'Nanum Gothic', sans-serif;
  color: #7d7d7d;
  line-height: 1.6;
  margin: 0;
}

/* 첨부파일명 텍스트 */
.dao-inq-detail-file-text {
  font-size: 16px;
  font-weight: 400;
  font-family: 'Nanum Gothic', sans-serif;
  color: #7d7d7d;
}

/* 구분선 (첨부파일 ↔ 답변 사이) */
.dao-inq-detail-divider {
  border: none;
  border-top: 2px solid #c9c9c9;
  /* 피그마: 구분선 아래 여백 = 다음 행 상단 간격 (행 margin-bottom 60px 과 동일) */
  margin: 0 0 60px 0;
}

/* 답변 행 — 라벨과 답변박스 수평 배치 */
.dao-inq-detail-answer-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 40px;
}

/* 답변 라벨 */
/* 피그마: 라벨 width=69px, center x=680+34.5=714.5 → 라벨 center-aligned */
.dao-inq-detail-answer-label {
  flex-shrink: 0;
  /* 피그마: 69px 너비 박스에 text-center → 2글자 "답변"이 4글자 라벨 중앙에 정렬 */
  /* margin-right 56px으로 총 125px 유지 → 답변 박스 시작 위치가 위 필드와 동일 */
  width: 69px;
  margin-right: 56px;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  color: #656565;
  text-align: center;
  line-height: 1.4;
}

/* 답변 회색 배경 박스 */
/* 피그마: x=805, width=689, height=171 */
.dao-inq-detail-answer-box {
  flex: 1;
  max-width: 689px;
  min-height: 171px;
  background: #f5f5f5;
  padding: 24px 35px;
  box-sizing: border-box;
}

/* 답변 텍스트 */
.dao-inq-detail-answer-text {
  font-size: 16px;
  font-weight: 400;
  font-family: 'Nanum Gothic', sans-serif;
  color: #656565;
  line-height: 28px;
  margin: 0;
}

/* 문의취소 버튼 래퍼 */
.dao-inq-detail-cancel-wrap {
  margin-top: 69px;
}

/* 문의취소 하기 버튼 (카드 내부, 금색 테두리) */
/* 피그마: 200x50px, border #edb323, white bg, text #edb323 20px bold, line-height 24px */
.dao-inq-detail-cancel-btn {
  width: 200px;
  height: 50px;
  background: #ffffff;
  border: 1px solid #edb323;
  border-radius: 5px;
  color: #edb323;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dao-inq-detail-cancel-btn:hover {
  background: #fef9ed;
}

/* 목록 버튼 래퍼 (카드 외부, 중앙 정렬) */
.dao-inq-detail-list-btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 60px;
}

/* 목록으로 이동 버튼 (녹색) */
/* 피그마: 200x50px, bg #b7cd47, text #272729 20px bold, line-height 18px */
.dao-inq-detail-list-btn {
  width: 200px;
  height: 50px;
  background: #b7cd47;
  border: none;
  border-radius: 5px;
  color: #272729;
  font-size: 20px;
  line-height: 18px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dao-inq-detail-list-btn:hover {
  background: #a8bd3a;
}

/* ── 반응형: 1200px 이하 ─────────────────────────────────── */
@media (max-width: 1200px) {
  /* 문의내용 텍스트 */
  .dao-inq-detail-content-text {
    font-size: 14px;
  }

  /* 첨부파일 텍스트 */
  .dao-inq-detail-file-text {
    font-size: 14px;
  }

  /* 구분선 하단 여백 축소 */
  .dao-inq-detail-divider {
    margin: 0 0 32px 0;
  }

  /* 답변 행: 세로 방향 전환 */
  .dao-inq-detail-answer-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 32px;
  }

  /* 답변 라벨: 왼쪽 정렬, 모바일 색상 */
  .dao-inq-detail-answer-label {
    width: auto;
    margin-right: 0;
    font-size: 16px;
    color: rgba(48, 48, 48, 0.7);
    text-align: left;
  }

  /* 답변 박스: 전체 너비, 높이 확대 */
  /* 피그마: 모바일 답변 박스 width=319, height=257
     padding-left=29, padding-right=16 (비대칭 — 피그마 텍스트 w=274 유지) */
  .dao-inq-detail-answer-box {
    max-width: 100%;
    min-height: 257px;
    padding: 24px 16px 24px 29px;
    /* 피그마: 텍스트(157px)가 박스(257px) 안에서 수직 중앙 정렬 */
    display: flex;
    align-items: center;
  }

  /* 답변 텍스트: 모바일에서 br 제거 → 텍스트 자연 줄바꿈 */
  .dao-inq-detail-answer-text br {
    display: none;
  }

  /* 문의취소 버튼 래퍼: 중앙 정렬 */
  .dao-inq-detail-cancel-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
  }

  /* 문의취소 버튼 축소 */
  /* 피그마: 150x35px, font-size 16px */
  .dao-inq-detail-cancel-btn {
    width: 150px;
    height: 35px;
    font-size: 16px;
  }

  /* 목록 버튼 축소 */
  /* 피그마: 180x50px, font-size 18px */
  .dao-inq-detail-list-btn {
    width: 180px;
    height: 50px;
    font-size: 18px;
  }

  .dao-inq-detail-list-btn-wrap {
    margin-top: 30px;
    margin-bottom: 40px;
  }
}


/* ============================================================
   CoReset 거버넌스 페이지 (gov_main.html)
============================================================ */

/* ── 메인 영역 ──────────────────────────────────────────── */
/* 피그마: 콘텐츠 시작 top 162px = 헤더 88px + padding 74px */
.dao-gov-main {
  padding: 74px 30px 100px;
}

/* ── 페이지 제목 ─────────────────────────────────────────── */
/* 피그마: 34px ExtraBold, line-height 48px, white */
.dao-gov-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 48px;
  color: #ffffff;
  margin: 0 0 21px 0;
  letter-spacing: -0.5px;
}

/* ── 통계 카드 그리드 ────────────────────────────────────── */
/* 피그마: 2열×2행, row-gap 19px / col-gap 22px, 카드 745px×125px */
.dao-gov-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 19px 22px;
  margin-bottom: 80px;
}

/* 개별 통계 카드 */
/* 피그마: bg #505364, height 125px, border-radius 10px */
.dao-gov-stat-card {
  background: var(--dao-card-bg);
  border-radius: 10px;
  box-shadow: 0 3.5px 5.5px rgba(0, 0, 0, 0.02);
  height: 125px;
  display: flex;
  align-items: center;
  padding: 0 30px;
  gap: 20px;
}

/* 아이콘 원형 */
/* 피그마: 70px, border-radius 12px */
.dao-gov-stat-icon {
  width: 70px;
  height: 70px;
  min-width: 70px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dao-gov-stat-icon img {
  width: 35px;
  height: 35px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* 아이콘 색상 변형 */
.dao-gov-stat-icon--blue   { background: #3eb5c9; }
.dao-gov-stat-icon--green  { background: #afce35; }
.dao-gov-stat-icon--yellow { background: #edb323; }
.dao-gov-stat-icon--red    { background: #f1634f; }

/* 통계 정보 영역 */
/* 피그마: 라벨 좌측 + 수치 우측 — 가로 배치 */
.dao-gov-stat-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* 카드 라벨 */
/* 피그마: 20px bold white */
.dao-gov-stat-label {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}

/* 수치 가로 배치 */
.dao-gov-stat-values {
  display: flex;
  align-items: baseline;
  gap: 0;
  flex-shrink: 0;
}

.dao-gov-stat-value-item {
  display: flex;
  align-items: center;
  gap: 0;
}

/* 소분류 텍스트 (설문, 투표) */
/* 피그마: 55px 고정폭 center, 20px bold white */
.dao-gov-stat-value-sub {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  min-width: 55px;
  text-align: center;
}

/* 숫자 */
/* 피그마: 69~77px 고정폭 right, 32px Bold white, line-height 1.4 */
.dao-gov-stat-value-num {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.4;
  min-width: 70px;
  text-align: right;
}

/* 세로 구분선 */
/* 피그마: 숫자→구분선 22px, 구분선→라벨 13px */
.dao-gov-stat-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
  align-self: center;
  margin: 0 13px 0 22px;
}

/* ── 흰색 컨테이너 (필터 + 카드 리스트) ──────────────────── */
/* 피그마: bg white, border-radius 10px, 1514×871px */
/* top 51px padding (필터까지), 좌우 60px, 하단 63px */
.dao-gov-container {
  background: #ffffff;
  border-radius: 10px;
  padding: 51px 60px 63px;
}

/* ── 필터 바 ─────────────────────────────────────────────── */
/* 피그마: 필터 bottom↔카드 top gap = 30px */
.dao-gov-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.dao-gov-filter-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* ── 커스텀 드롭다운 ────────────────────────────────────────── */
.dao-gov-dropdown {
  position: relative;
  width: 107px;
}

/* 기본 삼각형 마커 제거 */
.dao-gov-dropdown summary {
  list-style: none;
}
.dao-gov-dropdown summary::-webkit-details-marker {
  display: none;
}

/* 토글 버튼 (닫힌 상태) */
.dao-gov-dropdown-toggle {
  width: 107px;
  height: 50px;
  font-size: 16px;
  font-family: inherit;
  color: rgba(48, 48, 48, 0.7);
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.dao-gov-dropdown-toggle:hover {
  border-color: #d0d0d0;
}

.dao-gov-dropdown[open] .dao-gov-dropdown-toggle {
  border-color: #3eb5c9;
  box-shadow: 0 0 0 3px rgba(62, 181, 201, 0.12);
}

.dao-gov-dropdown-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 화살표 아이콘 */
.dao-gov-dropdown-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.dao-gov-dropdown[open] .dao-gov-dropdown-chevron {
  transform: rotate(180deg);
}

/* 드롭다운 메뉴 (열린 상태) */
.dao-gov-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  min-width: 120px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 6px 0;
  margin: 0;
  z-index: 100;
  animation: dao-gov-dropdown-slide 0.2s ease;
}

@keyframes dao-gov-dropdown-slide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 메뉴 항목 */
.dao-gov-dropdown-item {
  padding: 10px 14px;
  font-size: 15px;
  font-family: inherit;
  color: #505364;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.dao-gov-dropdown-item:hover {
  background: #f5f7fa;
  color: #303030;
}

/* 선택된 항목 */
.dao-gov-dropdown-item--active {
  color: #3eb5c9;
  font-weight: 700;
}

.dao-gov-dropdown-item--active::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: #3eb5c9;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

/* 날짜 인풋 래퍼 */
/* 피그마: 159×50px, border 1px #e8e8e8, border-radius 8px */
.dao-gov-date-wrap {
  display: flex;
  align-items: center;
  width: 159px;
  height: 50px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #ffffff;
  padding: 0 12px;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

/* 날짜 입력 필드 */
/* 피그마: 16px, color rgba(48,48,48,0.7), placeholder "시작일" / "종료일" */
.dao-gov-date-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: inherit;
  color: rgba(48, 48, 48, 0.7);
  background: transparent;
  padding: 0;
  min-width: 0;
}

/* 캘린더 아이콘 */
/* 피그마: 20×20px */
.dao-gov-date-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* 검색 버튼 */
/* 피그마: 아이콘 22px, 버튼 높이 50px (필터 행과 동일) */
.dao-gov-search-btn {
  width: 50px;
  height: 50px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
}

.dao-gov-search-btn img {
  width: 22px;
  height: 22px;
}

/* 작성하기 버튼 */
/* 피그마: gradient bg, border-radius 4px, 180×50px, 20px bold white */
.dao-gov-write-btn {
  background: linear-gradient(180deg, rgba(62, 181, 201, 0.7) 44.737%, #3eb5c9 100%);
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  font-family: inherit;
  border: none;
  border-radius: 4px;
  width: 180px;
  height: 50px;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  line-height: 24px;
}

/* 투표 작성하기 버튼 — 녹색 그라데이션 */
.dao-gov-write-btn--vote {
  background: linear-gradient(180deg, rgba(175, 206, 53, 0.7) 44.737%, #afce35 100%);
}

/* PC 작성 버튼 래퍼 */
.dao-gov-write-btns--pc {
  display: flex;
  gap: 12px;
}

/* 모바일 전용 작성하기 래퍼: PC에서 숨김 */
.dao-gov-write-wrap-mobile {
  display: none;
}

/* ── 거버넌스 카드 그리드 ────────────────────────────────── */
/* 피그마: 3열×2행, row-gap 20px / col-gap 17px */
.dao-gov-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 17px;
}

/* 개별 거버넌스 카드 */
/* 피그마: 452.8×328px, bg #505364, border-radius 6px */
/* padding: top 47px(tag 시작), 좌우 42px, bottom 46px
   제목 길이에 관계없이 모든 카드 동일 크기 유지 — height 고정 */
.dao-gov-card {
  background: var(--dao-card-bg);
  border-radius: 6px;
  padding: 47px 42px 46px;
  height: 328px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* 카드 상단 헤더 */
/* 피그마: 태그 bottom~progress top 사이 gap 47px, 헤더 내부 gap 10px */
.dao-gov-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 47px;
}

/* 태그 (설문/투표) */
/* 피그마: 76.6×33.5px, 20px bold white
   제목 길이·언어에 관계없이 고정 크기 유지 — flex/min/max 전방위 잠금 */
.dao-gov-card-tag {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  flex: 0 0 77px;
  width: 77px;
  min-width: 77px;
  max-width: 77px;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.dao-gov-card-tag--survey { background: #3eb5c9; }
.dao-gov-card-tag--vote   { background: #afce35; }

/* 카드 제목 */
/* 피그마: 20px bold white, letter-spacing -0.5px
   min-width: 0 으로 flex 부모 내에서 truncate 가능하게 → tag 영역을 잠식하지 않음 */
.dao-gov-card-title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.5px;
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 좌/우 화살표 버튼 묶음 */
.dao-gov-card-arrows {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* 화살표 버튼 */
/* 피그마: 22px 원형, bg white, border-radius 11.294px */
.dao-gov-card-arrow {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  padding: 0;
}

.dao-gov-card-arrow img {
  width: 10px;
  height: 10px;
  object-fit: contain;
}

/* 진행률 / 미참여 섹션 */
/* 피그마: 라벨↔바 gap 10px, 섹션 간 gap 35px */
.dao-gov-card-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 35px;
}

.dao-gov-card-progress:last-of-type {
  margin-bottom: 0;
}

.dao-gov-card-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 진행률 라벨 / 값 */
/* 피그마: 17px bold white */
.dao-gov-card-progress-label,
.dao-gov-card-progress-value {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
}

/* 프로그레스 바 */
/* 피그마: height 29px, bg white, border-radius 15px */
.dao-gov-card-progress-bar {
  width: 100%;
  height: 29px;
  background: #ffffff;
  border-radius: 15px;
  overflow: hidden;
}

/* 채움 바 공통 */
.dao-gov-card-progress-fill {
  height: 100%;
  border-radius: 15px;
}

/* 설문 진행률: gradient #3eb5c9 */
.dao-gov-card-progress-fill--survey {
  background: linear-gradient(90deg, rgba(62, 181, 201, 0.25), #3eb5c9);
}

/* 투표 진행률: gradient #afce35 */
.dao-gov-card-progress-fill--vote {
  background: linear-gradient(90deg, rgba(175, 206, 53, 0.25), #afce35);
}

/* 미참여: #a7a7a7 */
.dao-gov-card-progress-fill--inactive {
  background: #a7a7a7;
}


/* ============================================================
   CoReset 거버넌스 — 반응형 (1500px 이하)
   사이드바 277px 포함 시 콘텐츠 영역 축소 대응
============================================================ */
@media (max-width: 1200px) {

  /* 메인 패딩 축소 */
  .dao-gov-main {
    padding: 74px 20px 100px;
  }

  /* 통계 카드 축소 */
  .dao-gov-stat-card {
    padding: 0 20px;
    gap: 14px;
    height: 110px;
  }

  .dao-gov-stat-icon {
    width: 55px;
    height: 55px;
    min-width: 55px;
  }

  .dao-gov-stat-icon img {
    width: 28px;
    height: 28px;
  }

  .dao-gov-stat-label {
    font-size: 16px;
  }

  .dao-gov-stat-value-num {
    font-size: 26px;
    min-width: 50px;
  }

  .dao-gov-stat-value-sub {
    font-size: 16px;
    min-width: 40px;
  }

  .dao-gov-stat-divider {
    margin: 0 8px 0 12px;
  }

  /* 컨테이너 패딩 축소 */
  .dao-gov-container {
    padding: 40px 30px 50px;
  }

  /* 필터 드롭다운 축소 */
  .dao-gov-dropdown {
    width: 95px;
  }
  .dao-gov-dropdown-toggle {
    width: 95px;
    height: 44px;
    font-size: 14px;
  }
  .dao-gov-dropdown-item {
    font-size: 14px;
    padding: 9px 12px;
  }

  .dao-gov-date-wrap {
    width: 140px;
    height: 44px;
  }

  .dao-gov-date-input {
    font-size: 14px;
  }

  .dao-gov-search-btn {
    width: 44px;
    height: 44px;
  }

  /* 작성 버튼 축소 */
  .dao-gov-write-btn {
    width: 150px;
    height: 44px;
    font-size: 16px;
  }

  /* 카드 패딩 축소 */
  .dao-gov-card {
    padding: 35px 28px 35px;
    height: 290px;
  }

  .dao-gov-card-header {
    margin-bottom: 35px;
  }

  .dao-gov-card-tag {
    font-size: 17px;
    flex: 0 0 66px;
    width: 66px;
    min-width: 66px;
    max-width: 66px;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
  }

  .dao-gov-card-title {
    font-size: 17px;
  }

  .dao-gov-card-progress-label,
  .dao-gov-card-progress-value {
    font-size: 15px;
  }

  .dao-gov-card-progress-bar {
    height: 24px;
    border-radius: 12px;
  }

  .dao-gov-card-progress-fill {
    border-radius: 12px;
  }
}

/* ============================================================
   CoReset 거버넌스 — 반응형 (1300px 이하)
   3열→2열 전환, 통계 카드 세로 배치
============================================================ */
@media (max-width: 1300px) {

  /* 통계 카드: 라벨/수치 세로 배치로 넘침 방지 */
  .dao-gov-stat-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .dao-gov-stat-card {
    height: auto;
    min-height: 95px;
    padding: 14px 20px;
  }

  .dao-gov-stat-label {
    font-size: 14px;
  }

  .dao-gov-stat-value-num {
    font-size: 22px;
    min-width: 40px;
  }

  .dao-gov-stat-value-sub {
    font-size: 14px;
    min-width: 34px;
  }

  /* 카드 그리드: 2열 전환 */
  .dao-gov-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 필터 드롭다운 추가 축소 */
  .dao-gov-dropdown {
    width: 85px;
  }
  .dao-gov-dropdown-toggle {
    width: 85px;
    height: 40px;
    font-size: 13px;
  }
  .dao-gov-dropdown-item {
    font-size: 13px;
    padding: 8px 10px;
  }

  .dao-gov-date-wrap {
    width: 120px;
    height: 40px;
  }

  .dao-gov-date-input {
    font-size: 13px;
  }

  .dao-gov-search-btn {
    width: 40px;
    height: 40px;
  }

  .dao-gov-write-btn {
    width: 130px;
    height: 40px;
    font-size: 15px;
  }

  .dao-gov-container {
    padding: 30px 24px 40px;
  }

  .dao-gov-filter-left {
    gap: 10px;
  }
}

/* ============================================================
   CoReset 거버넌스 — 모바일 반응형 (1200px 이하)
============================================================ */
@media (max-width: 1200px) {

  /* 메인 패딩 축소 */
  /* 피그마: 첫 통계카드 y=136, 모바일 헤더 bottom=100 → padding-top 36 */
  .dao-gov-main {
    padding: 36px 0 120px;
  }

  /* 페이지 제목: 모바일 헤더에 표시되므로 숨김 */
  .dao-gov-title {
    display: none;
  }

  /* 통계 카드: 1열 세로 배치 */
  /* 피그마: 355px×77px, gap 18px, 좌우 margin 10px */
  .dao-gov-stats {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 10px;
    margin-bottom: 40px;
    max-width: 100%;
  }

  /* 통계 카드 모바일 크기 */
  /* 피그마: height 77px */
  .dao-gov-stat-card {
    height: 77px;
    padding: 0 18px;
    gap: 12px;
  }

  /* 아이콘 축소 */
  /* 피그마: 35px, border-radius 10px */
  .dao-gov-stat-icon {
    width: 35px;
    height: 35px;
    min-width: 35px;
    border-radius: 10px;
  }

  .dao-gov-stat-icon img {
    width: 18px;
    height: 18px;
  }

  /* 라벨 축소 */
  /* 피그마 모바일: 14px (PC는 20px) */
  .dao-gov-stat-label {
    font-size: 14px;
    letter-spacing: -0.28px;
  }

  /* 소분류 텍스트 축소 */
  /* 피그마 모바일: 12px */
  .dao-gov-stat-value-sub {
    font-size: 12px;
    min-width: 26px;
  }

  /* 수치 축소 */
  /* 피그마 모바일: 20px */
  .dao-gov-stat-value-num {
    font-size: 20px;
    min-width: 35px;
  }

  /* 구분선 간격 축소 */
  .dao-gov-stat-divider {
    margin: 0 4px 0 8px;
  }

  /* 흰색 컨테이너 모바일 */
  .dao-gov-container {
    margin: 0 10px;
    padding: 16px 10px 24px;
    max-width: 100%;
  }

  /* 필터 바 */
  .dao-gov-filter-bar {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  .dao-gov-filter-left {
    gap: 8px;
    width: 100%;
    justify-content: center;
  }

  /* 드롭다운 모바일 축소 */
  /* 피그마: 85×29px, border-radius 5px, 12px */
  .dao-gov-dropdown {
    width: 85px;
  }
  .dao-gov-dropdown-toggle {
    width: 85px;
    height: 29px;
    font-size: 12px;
    border-radius: 5px;
    padding: 0 8px;
  }
  .dao-gov-dropdown-chevron {
    width: 10px;
    height: 10px;
  }
  .dao-gov-dropdown-menu {
    border-radius: 5px;
    min-width: 100px;
  }
  .dao-gov-dropdown-item {
    font-size: 12px;
    padding: 8px 10px;
  }

  /* 날짜 인풋 모바일 축소 */
  /* 피그마: 100×29px, border-radius 5px */
  .dao-gov-date-wrap {
    width: 100px;
    height: 29px;
    border-radius: 5px;
    padding: 0 8px;
    gap: 4px;
  }

  .dao-gov-date-input {
    font-size: 12px;
  }

  .dao-gov-date-icon {
    width: 15px;
    height: 15px;
  }

  /* 검색 버튼 모바일 */
  .dao-gov-search-btn {
    width: 29px;
    height: 29px;
  }

  .dao-gov-search-btn img {
    width: 15px;
    height: 15px;
  }

  /* PC 작성하기 버튼 래퍼 숨김 */
  .dao-gov-write-btns--pc {
    display: none;
  }

  /* 카드 그리드: 1열 */
  .dao-gov-card-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* 카드 모바일 크기 복원 */
  /* 피그마 모바일: 335×243px, padding 16px 24px 20px — 높이 고정 */
  .dao-gov-card {
    max-width: 335px;
    margin: 0 auto;
    width: 100%;
    padding: 16px 24px 20px;
    height: 243px;
  }

  /* 카드 헤더 margin 복원 */
  .dao-gov-card-header {
    margin-bottom: 30px;
  }

  /* 태그 모바일 크기 복원 */
  /* 피그마 모바일: 45×21px, 12px — 제목 길이 무관 고정 크기 */
  .dao-gov-card-tag {
    font-size: 12px;
    flex: 0 0 45px;
    width: 45px;
    min-width: 45px;
    max-width: 45px;
    height: 21px;
    min-height: 21px;
    max-height: 21px;
  }

  /* 카드 제목 모바일 크기 복원 */
  .dao-gov-card-title {
    font-size: 14px;
  }

  /* 진행률 섹션 모바일 복원 */
  .dao-gov-card-progress {
    gap: 7px;
    margin-bottom: 22px;
  }

  /* 진행률 라벨 모바일 복원 */
  /* 피그마 모바일: 13px */
  .dao-gov-card-progress-label,
  .dao-gov-card-progress-value {
    font-size: 13px;
  }

  /* 프로그레스 바 모바일 복원 */
  /* 피그마 모바일: 21px, radius 10.5px */
  .dao-gov-card-progress-bar {
    height: 21px;
    border-radius: 10.5px;
  }

  .dao-gov-card-progress-fill {
    border-radius: 10.5px;
  }

  /* 모바일 전용 작성하기 버튼 표시 */
  /* 피그마: 중앙 정렬, height 38px, 14px */
  .dao-gov-write-wrap-mobile {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
  }

  /* 피그마: 143×38 고정, gap 9 */
  .dao-gov-write-wrap-mobile .dao-gov-write-btn {
    width: 143px;
    height: 38px;
    font-size: 14px;
    padding: 0;
  }
}

/* ============================================================
   CoReset 거버넌스 — 반응형 (768px 이하)
   모바일 소형 화면 대응
============================================================ */
@media (max-width: 768px) {

  /* 통계 카드 추가 축소 */
  .dao-gov-stat-card {
    height: 70px;
    padding: 0 14px;
    gap: 10px;
  }

  .dao-gov-stat-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
  }

  .dao-gov-stat-icon img {
    width: 16px;
    height: 16px;
  }

  .dao-gov-stat-label {
    font-size: 13px;
  }

  .dao-gov-stat-value-num {
    font-size: 18px;
    min-width: 30px;
  }

  .dao-gov-stat-value-sub {
    font-size: 11px;
    min-width: 22px;
  }

  .dao-gov-stat-divider {
    margin: 0 3px 0 6px;
    height: 14px;
  }

  /* 필터 바 줄바꿈 허용 */
  .dao-gov-filter-left {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .dao-gov-dropdown {
    width: 75px;
  }
  .dao-gov-dropdown-toggle {
    width: 75px;
    height: 28px;
    font-size: 11px;
    border-radius: 5px;
    padding: 0 6px;
  }
  .dao-gov-dropdown-chevron {
    width: 9px;
    height: 9px;
  }
  .dao-gov-dropdown-menu {
    border-radius: 5px;
  }
  .dao-gov-dropdown-item {
    font-size: 11px;
    padding: 7px 8px;
  }

  .dao-gov-date-wrap {
    width: 92px;
    height: 28px;
    border-radius: 5px;
    padding: 0 6px;
    gap: 4px;
  }

  .dao-gov-date-input {
    font-size: 11px;
  }

  .dao-gov-date-icon {
    width: 13px;
    height: 13px;
  }

  .dao-gov-search-btn {
    width: 28px;
    height: 28px;
  }

  .dao-gov-search-btn img {
    width: 14px;
    height: 14px;
  }

  /* 작성 버튼 세로 배치 */
  .dao-gov-write-wrap-mobile {
    flex-direction: column;
    align-items: center;
  }

  .dao-gov-write-wrap-mobile .dao-gov-write-btn {
    width: 100%;
    max-width: 280px;
  }
}

/* ============================================================
   CoReset 거버넌스 — 반응형 (480px 이하)
   극소형 모바일 대응
============================================================ */
@media (max-width: 480px) {

  /* 메인 패딩 */
  .dao-gov-main {
    padding: 16px 0 100px;
  }

  /* 통계 카드 */
  .dao-gov-stats {
    padding: 0 6px;
    gap: 12px;
    margin-bottom: 30px;
  }

  .dao-gov-stat-card {
    height: 64px;
    padding: 0 12px;
    gap: 8px;
  }

  .dao-gov-stat-label {
    font-size: 12px;
  }

  .dao-gov-stat-value-num {
    font-size: 16px;
    min-width: 26px;
  }

  .dao-gov-stat-value-sub {
    font-size: 10px;
    min-width: 20px;
  }

  /* 컨테이너 */
  .dao-gov-container {
    margin: 0 6px;
    padding: 12px 8px 20px;
  }

  /* 필터 바 */
  .dao-gov-filter-left {
    gap: 5px;
  }

  .dao-gov-dropdown {
    width: 68px;
  }
  .dao-gov-dropdown-toggle {
    width: 68px;
    padding: 0 5px;
  }
  .dao-gov-dropdown-item {
    font-size: 10px;
    padding: 6px 7px;
  }

  .dao-gov-date-wrap {
    width: 84px;
    padding: 0 5px;
  }

  .dao-gov-date-input {
    font-size: 10px;
  }

  .dao-gov-date-icon {
    width: 12px;
    height: 12px;
  }

  /* 카드 전체 너비 */
  .dao-gov-card {
    max-width: 100%;
    padding: 14px 18px 18px;
    min-height: auto;
  }

  .dao-gov-card-header {
    margin-bottom: 20px;
  }

  .dao-gov-card-tag {
    font-size: 11px;
    width: 40px;
    height: 20px;
  }

  .dao-gov-card-title {
    font-size: 13px;
  }

  .dao-gov-card-progress {
    gap: 5px;
    margin-bottom: 16px;
  }

  .dao-gov-card-progress-label,
  .dao-gov-card-progress-value {
    font-size: 12px;
  }

  .dao-gov-card-progress-bar {
    height: 18px;
    border-radius: 9px;
  }

  .dao-gov-card-progress-fill {
    border-radius: 9px;
  }

  /* 작성 버튼 */
  .dao-gov-write-wrap-mobile .dao-gov-write-btn {
    max-width: 100%;
    height: 36px;
    font-size: 13px;
    padding: 0 20px;
  }
}


/* ============================================================
   모바일 사이드 메뉴 Offcanvas (dao-offcanvas)
   피그마: 151:16 / 모바일 햄버거 버튼 → 우측 슬라이드 패널
============================================================ */

/* ── 패널 본체 ───────────────────────────────────────────── */
/* 피그마: 227px × 469px, bg rgba(80,83,100,0.95), radius 15px */
.dao-offcanvas {
  width: 227px !important;
  background: rgba(80, 83, 100, 0.95) !important;
  border: none !important;
  border-radius: 15px;             /* 피그마: 네 모서리 모두 15px */
  top: 56px !important;           /* 모바일 헤더(56px) 아래에서 시작 */
  bottom: auto !important;
  height: auto !important;
  max-height: none !important;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.1);
}

/* ── Backdrop 오버레이 ────────────────────────────────────── */
/* 피그마: rgba(39,39,41,0.7) */
.offcanvas-backdrop {
  background-color: #272729 !important;
  top: 56px !important;           /* 모바일 헤더 아래에서 시작 */
}

.offcanvas-backdrop.show {
  opacity: 0.7 !important;
}

/* ── Offcanvas body ──────────────────────────────────────── */
/* 피그마: 상단 21px 패딩, 좌우 0 */
.dao-offcanvas-body {
  padding: 21px 0 24px 0;
  overflow-y: hidden;
}

/* ── 메뉴 항목 공통 ─────────────────────────────────────── */
/* 피그마: 높이 ~67px, flex center */
.dao-offcanvas-item {
  position: relative;
  height: 67px;
  display: flex;
  align-items: center;
}

/* ── 항목 내부 (아이콘 + 라벨) ──────────────────────────── */
/* 피그마: 아이콘 left 20px, 라벨 left 58px → gap 18px */
.dao-offcanvas-item-inner {
  display: flex;
  align-items: center;
  padding-left: 40px;
  gap: 18px;
  width: 100%;
}

/* ── 아이콘 ─────────────────────────────────────────────── */
/* 피그마: 24px, 비활성 → 흰색 */
.dao-offcanvas-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

/* ── 라벨 ───────────────────────────────────────────────── */
/* 피그마: 16px bold white */
.dao-offcanvas-label {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}

/* ── 활성 항목: 흰색 배경 ───────────────────────────────── */
/* 피그마: bg white, radius 10px, 높이 67px */
.dao-offcanvas-item--active {
  background: #ffffff;
  border-radius: 10px;
}

/* 활성 아이콘 → 검정 */
.dao-offcanvas-item--active .dao-offcanvas-icon {
  filter: brightness(0);
}

/* 활성 라벨 → #505364 */
.dao-offcanvas-label--dark {
  color: #505364;
}

/* ── 활성 바 ─────────────────────────────────────────────── */
/* 피그마: 5.333px × 42px, 좌측 절대 배치 */
.dao-offcanvas-active-bar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5.333px;
  height: 42px;
  overflow: hidden;
  border-radius: 0 3px 3px 0;
}

.dao-offcanvas-active-bar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── PC에서 offcanvas 표시 방지 ─────────────────────────── */
@media (min-width: 1201px) {
  .dao-offcanvas {
    display: none !important;
  }
}



/* ============================================================
   설문 생성 페이지 (gov_survey_create.html)
   접두사: gov-survey-
============================================================ */

/* ── 모바일 전용 제목 (PC에서 hidden) ───────────────────── */
.gov-survey-mobile-title {
  display: none;
}

/* ── 컨테이너 ───────────────────────────────────────────── */
/* 피그마 448:7392: 카드 (349, 233) 1476×982 ends 1215
   panel top 270 → 카드 padding-top = 37
   미리보기 btn bottom 1186 → 카드 padding-bottom = 29 */
.gov-survey-container {
  padding: 37px 0 29px;
}

/* ── 설문 패널 (객관식, 테두리 있는 박스) ───────────────── */
/* 피그마 448:7406: (592, 270) 991×837, border 2px #3eb5c9, radius 10
   family 패턴: max-width 991 centered (gov_vote/result 동일) */
.gov-survey-panel {
  max-width: 991px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #3eb5c9;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* 패널 헤더 — 피그마 448:7407: #3eb5c9, 991×63.32, "설문" 28 Bold white leading 24 center */
.gov-survey-panel-header {
  background: #3eb5c9;
  height: 63px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 24px;
  font-weight: 700;
  color: #fff;
  font-family: 'Nanum Gothic', sans-serif;
}

/* 패널 본문 */
/* 피그마: 헤더 end y=333, 제목 field y=356 → padding-top 23
   field left x=694 = panel 592 + 102 → padding-left 102
   field right x=1482 = panel right 1583 - 101 → padding-right 101
   질문추가 btns bottom y=1056, panel bottom y=1107 → padding-bottom 51 */
.gov-survey-panel-body {
  padding: 23px 101px 51px 102px;
}

/* 패널 본문 — 왼쪽 패딩 102px */
.gov-survey-panel-body--indent {
  padding: 30px 40px 40px 102px;
}

/* 설문 상세(action) 페이지 panel body padding 전체 정의
   피그마 448:7224: header end y=359, info row y=391 → padding-top 32
   field left x=695 = panel 593+102 → padding-left 102
   field right x=1483 = panel right 1584-101 → padding-right 101
   답변 field bottom y=1122, panel bottom y=1161 → padding-bottom 39 */
.gov-action-container .gov-survey-panel-body--indent {
  padding: 32px 101px 39px 102px;
}

/* indent 패널 내 info-row는 왼쪽 패딩 상쇄 (102px - 40px = 62px) */
.gov-survey-panel-body--indent .gov-action-info-row,
.gov-survey-panel-body--indent .gov-action-info-row--mb30 {
  margin-left: -62px;
}

/* action 페이지 — info row 너비 935 확보 (4×230 + 3×5 gap)
   panel left(102)/right(101) inset → info row panel inset 28씩
   margin-left -(102-28)=-74, margin-right -(101-28)=-73 */
.gov-action-container .gov-survey-panel-body--indent .gov-action-info-row,
.gov-action-container .gov-survey-panel-body--indent .gov-action-info-row--mb30 {
  margin-left: -74px;
  margin-right: -73px;
}

/* result 페이지 — 피그마 448:6346: row w=935, x=621, end=1556
   panel(593, w=991) body padding 102/110 → inner w 779
   row w 935 = 779 + 74(margin-L) + 82(margin-R)
   action의 margin-right -73 대신 -82 (0,3,0 동등 specificity, source order 승리) */
.gov-result-container .gov-survey-panel-body--indent .gov-action-info-row,
.gov-result-container .gov-survey-panel-body--indent .gov-action-info-row--mb30 {
  margin-left: -74px;
  margin-right: -82px;
}

/* ── 필드 행 (라벨 + 인풋 수평 배치) ───────────────────── */
/* 라벨은 콘텐츠 첫 줄과 정렬 (row 중앙 아님) — flex-start + label padding-top
   피그마: 제목(356,40)→질문(407) gap 11; 질문(407,154)→답변(572) gap 11 */
.gov-survey-field {
  display: flex;
  align-items: flex-start;
  margin-bottom: 11px;
}

.gov-survey-field:last-child {
  margin-bottom: 0;
}

/* ── 라벨 ────────────────────────────────────────────────── */
/* padding-top 8: 피그마 제목 row 기준 (라벨 y=364, row y=356 → 8);
   질문/답변(154h)의 박스 첫 줄(padding-top 15)과는 7px 차이 감수 */
.gov-survey-label {
  width: 69px;
  flex-shrink: 0;
  font-size: 17px;
  font-weight: 700;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  padding-top: 8px;
  line-height: 24px;
}

/* ── 인풋 래퍼 ───────────────────────────────────────────── */
.gov-survey-input-wrap {
  flex: 1;
  min-width: 0;
}

/* ── 텍스트 인풋 ─────────────────────────────────────────── */
.gov-survey-input {
  width: 100%;
  height: 40px;
  border: 2px solid #d9d9d9;
  border-radius: 10px;
  padding: 0 20px;
  font-size: 14px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  background: #fff;
  outline: none;
}

.gov-survey-input::placeholder {
  color: #b7b7b7;
}

.gov-survey-input:focus {
  border-color: #3eb5c9;
}

/* ── 콘텐츠 박스 (bordered 컨테이너, 질문/답변 공통) ─────── */
/* 피그마: 2px solid #e8e8e8, radius 10px, padding 15 25 (내부 텍스트 x=788 box x=763 → L=25; 텍스트 y=422 box y=407 → T=15) */
.gov-survey-content-box {
  position: relative;
  width: 100%;
  border: 2px solid #e8e8e8;
  border-radius: 10px;
  padding: 15px 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ── 콘텐츠 박스 우상단 X 닫기 버튼 ─────────────────────── */
/* 피그마 Group 1000003731 (448:7462/7464): 23×23, 박스 기준 top=8 right=10 */
.gov-survey-box-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 23px;
  height: 23px;
  background: #f08080;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
}

/* ── 이미지 업로드 박스 X 닫기 버튼 ─────────────────────── */
.gov-survey-upload-wrap {
  position: relative;
  display: inline-block;
}

.gov-survey-upload-close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  background: #f08080;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
}

/* 답변 필드: 왼쪽 회색 바 있는 변형 → flex-row, padding 제거 */
.gov-survey-content-box--with-bar {
  flex-direction: row;
  padding: 0;
  overflow: visible;
  align-items: stretch;
}

/* ── 콘텐츠 박스 우측 영역 (회색 바 있는 경우) ────────────── */
/* 피그마 (448:7411 답변 row): 바 right=793
   - 텍스트 x=818 y=587 → padding-left=25, padding-top=15
   - 업로드 bottom=701, box bottom=726 → padding-bottom=25
   - 콘텐츠는 박스 상단 앵커 (y=587부터), 수직 중앙 정렬 아님 */
.gov-survey-content-inner {
  flex: 1;
  padding: 15px 25px 25px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}


/* ── 텍스트 입력 영역 (contenteditable) ──────────────────── */
.gov-survey-editable {
  min-height: 24px;
  outline: none;
  font-size: 14px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  line-height: 24px;
  margin-bottom: 8px;
  word-break: break-word;
}

/* 질문 박스(content-box 직접 자식) — 텍스트↔이미지 간격 증가
   답변 박스의 .content-inner > .editable은 영향 없음 (사용자 요청) */
.gov-survey-content-box > .gov-survey-editable {
  margin-bottom: 14px;
}

/* 비어 있을 때 플레이스홀더 표시 */
.gov-survey-editable:empty::before {
  content: attr(data-placeholder);
  color: #b7b7b7;
  pointer-events: none;
}

/* ── 왼쪽 회색 드래그 핸들 바 ────────────────────────────── */
.gov-survey-textarea-bar {
  width: 30px;
  flex-shrink: 0;
  background: #d9d9d9;
  border-radius: 8px 0 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* 핸들 도트 */
.gov-survey-bar-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
}

/* ── 짧은 텍스트에어리어 (주관식 답변) ──────────────────── */
.gov-survey-textarea--short {
  width: 100%;
  height: 109px;
  border: 2px solid #e8e8e8;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  resize: none;
  outline: none;
  background: #fff;
}

.gov-survey-textarea--short::placeholder {
  color: #b7b7b7;
}

.gov-survey-textarea--short:focus {
  border-color: #3eb5c9;
}

/* ── 이미지 업로드 박스 (콘텐츠 박스 내부) ──────────────── */
/* 피그마: 데스크톱·모바일 동일 83×86 (Group 25) */
.gov-survey-upload {
  width: 83px;
  height: 86px;
  background: #f1f1f1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.gov-survey-upload img {
  width: 36px;
  height: 36px;
  opacity: 0.6;
}

/* ── 답변 항목 추가 버튼 ─────────────────────────────────── */
/* 피그마: 답변 field bottom y=726, 답변항목추가 btn top y=739 → gap 13
   field margin-bottom 11 + wrap padding-top 2 = 13 */
.gov-survey-add-answer-wrap {
  display: flex;
  justify-content: center;
  padding-top: 2px;
}

.gov-survey-add-answer-btn {
  width: 154px;
  height: 47px;
  background: #3eb5c9;
  border: none;
  border-radius: 4px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  color: #fff;
  cursor: pointer;
}

/* ── 주관식 질문 섹션 ────────────────────────────────────── */
/* 피그마: 답변항목추가 btn bottom y=786.49, 주관식 질문 row top y=831 → gap 45 */
.gov-survey-subjective {
  margin-top: 45px;
}

/* ── 질문 추가 버튼 행 ───────────────────────────────────── */
/* 피그마: 객관식(913, 165) → 주관식(1097) gap 19
   주관식 답변 bottom y=991, 질문추가 btns top y=1006 → margin-top 15 */
.gov-survey-add-question-wrap {
  display: flex;
  justify-content: center;
  gap: 19px;
  margin-top: 15px;
}

/* ── 버튼 공통 베이스 ────────────────────────────────────── */
.gov-survey-btn {
  border: none;
  cursor: pointer;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Primary 버튼 (객관식/주관식 질문 추가) */
/* 피그마: 165×50 bg #3eb5c9 radius 4, text Bold 18 white line-height 24 */
.gov-survey-btn--primary {
  width: 165px;
  height: 50px;
  background: #3eb5c9;
  border-radius: 4px;
  font-size: 18px;
  line-height: 24px;
  color: #fff;
}

/* 미리보기 버튼 */
/* 피그마: 154×50, text Bold 22 line-height 18 */
.gov-survey-btn--preview {
  width: 154px;
  height: 50px;
  background: #666666;
  border-radius: 5px;
  font-size: 22px;
  line-height: 18px;
  color: #fff;
}

/* 등록 버튼 */
/* 피그마: 215×50 bg #3eb5c9 radius 5, text Bold 22 white line-height 18 */
.gov-survey-btn--submit {
  width: 215px;
  height: 50px;
  background: #3eb5c9;
  border-radius: 5px;
  font-size: 22px;
  line-height: 18px;
  color: #fff;
}

/* 취소 버튼 */
/* 피그마: 154×50 white, border #b4b4b4, text #b4b4b4 Bold 22 line-height 18 */
.gov-survey-btn--cancel {
  width: 154px;
  height: 50px;
  background: #fff;
  border: 1px solid #b4b4b4;
  border-radius: 5px;
  font-size: 22px;
  line-height: 18px;
  color: #b4b4b4;
}

/* ── 미리보기 래퍼 ───────────────────────────────────────── */
/* 피그마: panel bottom y=1107, 미리보기 btn top y=1136 → gap 29 */
.gov-survey-preview-wrap {
  display: flex;
  justify-content: center;
  margin-top: 29px;
}

/* ── 하단 등록/취소 래퍼 (컨테이너 밖) ─────────────────── */
/* 피그마: 등록(896, 215) → 취소(1124, 154) gap 13
   컨테이너 bottom y=1215, 등록/취소 top y=1276 → margin-top 61 */
.gov-survey-action-wrap {
  display: flex;
  justify-content: center;
  gap: 13px;
  margin-top: 61px;
}



/* ============================================================
   설문 생성 — 모바일 반응형 (1500px 이하)
============================================================ */
@media (max-width: 1500px) {

  /* gov_survey_* 전용: 데스크톱 타이틀 숨김 (모바일 타이틀과 중복 방지)
     :has() 스코프 → gov_main 등 다른 페이지 영향 없음
     기존 gov common 블록은 @media 1200에서만 숨김 → 1201~1500 보강 */
  main:has(.gov-survey-mobile-title) .dao-gov-title {
    display: none;
  }

  /* gov_survey_* 전용: dao-gov-main 모바일 padding을 1500까지 확장
     기존 gov common 블록은 @media 1200에서만 padding 36 0 120 적용 →
     1201~1500에서 base padding 74 30 100이 남아 타이틀 y=186 (figma 148과 불일치)
     :has() 스코프로 gov_main 등 다른 페이지 영향 없음
     padding-bottom: 등록/취소 bottom y=1707, footer top y=1788 → gap 81 */
  main.dao-gov-main:has(.gov-survey-mobile-title) {
    padding: 36px 0 81px;
  }

  /* 모바일 전용 제목 표시 — 피그마 448:7620
     y=148 (status bar 44 포함) → web y=104
     layout m-t 56 + main p-t 36 + title p-t 12 = 104 ✓
     title h 20 ends 124, container top Figma y=202 → web y=158
     124 + title p-b 34 = 158 ✓ */
  .gov-survey-mobile-title {
    display: block;
    text-align: center;
    font-size: 20px;
    line-height: 20px;
    font-weight: 700;
    font-family: 'Nanum Gothic', sans-serif;
    color: #fff;
    margin: 0;
    padding: 12px 0 34px;
  }

  /* 컨테이너 — 모바일 전체폭
     피그마 448:7541: 흰색 bg (0, 202) 374×1411 ends 1613
     panel (7, 250) → top 48, left 7, right 6
     미리보기 btn bottom 1588 → pad-bottom 25 */
  .gov-survey-container {
    margin: 0;
    padding: 48px 7px 25px;
    border-radius: 0;
  }

  /* 설문 패널 — 모바일: max-width 해제, margin 리셋 */
  .gov-survey-panel {
    max-width: none;
    margin: 0;
  }

  .gov-result-mgmt-panel {
    border: none;
    border-radius: 0;
  }

  /* 패널 헤더 — 피그마 448:7553: 62px, margin 없음 (body padding으로 첫 field 40 offset) */
  .gov-survey-panel-header {
    height: 62px;
    font-size: 22px;
    margin-bottom: 0;
  }

  /* 패널 본문 — 피그마 첫 field y=352, panel top=250 + header 62 = 312 → top pad 40
     질문추가 btns end y=1484, panel bottom y=1511 → bottom pad 27 */
  .gov-survey-panel-body {
    padding: 40px 16px 27px;
  }

  /* 필드 행 — 라벨이 인풋 위로 수직 배치
     피그마: label bottom=376, input top=381 → gap=5
     field margin-bottom: 제목(421)→질문(432)=11, 질문(637)→답변(648)=11 */
  .gov-survey-field {
    flex-direction: column;
    gap: 5px;
    margin-bottom: 11px;
  }

  /* 객관식 답변 필드 — desktop의 align-items: center 오버라이드
     (flex-column + center는 라벨/옵션을 수평 중앙 정렬시켜 피그마 x=24 왼쪽 정렬과 불일치)
     !important 필요: base `.gov-survey-field--answer { align-items: center }` (line ~6407)가
     source order상 뒤에 있어 mobile 규칙을 덮어쓰는 현상 방지 */
  .gov-survey-field--answer {
    align-items: flex-start !important;
  }

  /* 라벨 */
  .gov-survey-label {
    width: auto;
    padding-top: 0;
  }

  /* 인풋 래퍼 — 모바일 전체폭 */
  .gov-survey-input-wrap {
    width: 100%;
  }

  /* 텍스트 인풋 */
  .gov-survey-input {
    height: 40px;
    border-width: 1px;
    border-radius: 5px;
  }

  /* 콘텐츠 박스 (질문 전용) — 피그마 448:7598: 175h
     text y=494 / upload bottom=610 / box y=462 bottom=637
     → padding-top=32, padding-bottom=27 (비대칭, 정확한 피그마 좌표 반영)
     :not(--with-bar)로 스코프 — with-bar(답변)에는 적용 금지 (padding:0 유지해야 bar+inner 정상 동작) */
  .gov-survey-content-box:not(.gov-survey-content-box--with-bar) {
    border-width: 1px;
    padding: 32px 25px 27px;
    justify-content: flex-start;
  }

  /* 콘텐츠 박스 (답변 with-bar) — 피그마 448:7564: 334×266
     padding: 0 재명시 (같은 specificity mobile 선언 충돌 방지) */
  .gov-survey-content-box--with-bar {
    border-width: 1px;
    min-height: 266px;
    padding: 0;
  }

  /* 모바일 답변 content-inner — 피그마: 내용 세로 중앙 정렬
     피그마 448:7564: text y=755 / upload bottom=871 / box y=679 bottom=945 → pad 76/74 (거의 대칭)
     flex-start + 76/74 asymmetric 적용 시 content(117) + padding(150) = 267 > box 266로 1px overflow 발생.
     center + symmetric padding 15/25로 유지: 효과적 padding ~75/75 (피그마 76/74와 1-2px 차이, 시각상 동일) */
  .gov-survey-content-inner {
    justify-content: center;
    align-items: flex-start;
    padding: 15px 25px;
  }

  /* 편집 가능 텍스트 영역 — 명시적 좌측 정렬 + 전체 폭 사용
     (contenteditable div이 수평 중앙에 보이는 현상 방지) */
  .gov-survey-content-inner .gov-survey-editable {
    text-align: left;
    align-self: stretch;
    width: 100%;
  }

  /* 모바일 닫기 버튼 — 질문 박스와 답변 박스가 top 위치 다름 (right=7 공통)
     피그마 448:7601 (질문 박스): box y=462 close y=471 → top=9
     피그마 448:7586 (답변 박스): box y=679 close y=691 → top=12 */
  .gov-survey-box-close {
    top: 9px;
    right: 7px;
    width: 23px;
    height: 23px;
  }

  /* 답변 박스 (with-bar)만 top=12 (질문 top=9과 다름) */
  .gov-survey-content-box--with-bar .gov-survey-box-close {
    top: 12px;
  }

  /* 모바일 라디오 — 피그마 15×15 (448:7571) */
  .gov-preview-radio,
  .gov-survey-textarea-bar input[type="radio"] {
    width: 15px;
    height: 15px;
    margin: 0;
  }

  /* 짧은 텍스트에어리어 (주관식 답변) — 피그마 448:7615
     textarea 175h, padding-left 25 (placeholder x=49 - textarea x=24)
     padding-top 32 (placeholder y=1260 - textarea y=1228) */
  .gov-survey-textarea--short {
    height: 175px;
    border-width: 1px;
    padding: 32px 25px;
  }

  /* 주관식 질문 row margin-bottom — 질문2 bottom=1167 → 답변2 top=1198 → gap 31 */
  .gov-survey-subjective .gov-survey-field:not(:last-child) {
    margin-bottom: 31px;
  }

  /* 답변 항목 추가 버튼 — 피그마 448:7557: 154×45 */
  .gov-survey-add-answer-btn {
    height: 45px;
  }

  /* 답변 필드의 margin-bottom 제거 — wrap padding-top으로만 gap 제어 */
  .gov-survey-field--answer {
    margin-bottom: 0;
  }

  /* 답변 항목 추가 wrap — 피그마 답변 row bottom=945 → 버튼 top=963 → gap=18 */
  .gov-survey-add-answer-wrap {
    padding-top: 18px;
  }

  /* 주관식 섹션 — 피그마: 답변항목추가 bottom=1008 → 질문 row 2 top=1098 → gap 90 */
  .gov-survey-subjective {
    margin-top: 90px;
  }

  /* 질문 추가 버튼 행 — 피그마 448:7559
     객관식 x=18 + w=165 = 183 → 주관식 x=192 → gap=9
     답변2 row bottom=1403 → wrap top=1434 → margin-top=31 */
  .gov-survey-add-question-wrap {
    gap: 9px;
    margin-top: 31px;
  }

  /* Primary 버튼 */
  .gov-survey-btn--primary {
    font-size: 17px;
  }

  /* 미리보기 버튼 */
  .gov-survey-btn--preview {
    font-size: 20px;
  }

  /* 등록 버튼 */
  .gov-survey-btn--submit {
    width: 185px;
    font-size: 20px;
  }

  /* 취소 버튼 */
  .gov-survey-btn--cancel {
    width: 135px;
    font-size: 20px;
  }

  /* 미리보기 래퍼 — 피그마 448:7555: 패널 bottom=1511 → 미리보기 top=1538 → gap=27
     (질문추가 btn bottom 1484 기준 54는 잘못. 패널 padding-bottom 24 포함된 값이라 margin에 넣으면 중복) */
  .gov-survey-preview-wrap {
    margin-top: 27px;
  }

  /* 하단 액션 래퍼 — 피그마 448:7543
     btn gap: 218-(21+185)=12
     피그마 미리보기 bottom 1588 → 등록/취소 top 1657 = gap 69
     container padding-bottom 25 (변경됨) → margin-top = 69-25 = 44 */
  .gov-survey-action-wrap {
    gap: 12px;
    margin-top: 44px;
  }

}


/* ============================================================
   설문 미리보기 페이지 (gov_survey_preview.html)
   접두사: gov-preview-
============================================================ */

/* ── 제목 + 모드 버튼 한 줄 래퍼 ───────────────────────── */
.gov-preview-title-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 21px;
}

.gov-preview-title-row .dao-gov-title {
  margin-bottom: 0;
}

/* ── 모드 전환 버튼 바 ───────────────────────────────────── */
.gov-preview-mode-bar {
  display: flex;
  gap: 0;
  margin-bottom: 0;
}

/* PC용 인라인 버튼 바 — title-row 내부 */
.gov-preview-mode-bar--inline {
  display: flex;
  gap: 18px;
}

/* 모바일 전용 버튼 바 — PC에서 숨김 */
.gov-preview-mode-bar--mobile {
  display: none;
}

/* 버튼 공통 베이스 */
.gov-preview-mode-btn {
  height: 50px;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

/* 미리보기 모드 버튼 (활성 상태) */
.gov-preview-mode-btn--active {
  width: 164px;
  background: #3eb5c9;
  color: #fff;
  border: none;
}

/* 작성 화면으로 이동 버튼 */
.gov-preview-mode-btn--back {
  width: 238px;
  background: #fff;
  color: #848484;
  border: 1px solid #ddd;
}

/* ── 읽기 전용 텍스트 (desktop 16px Regular #303030) ────── */
/* 피그마 448:6116: 제목 value / Q1 text / 답변 option text / Q2 value 공통
   margin/padding은 부모 컨테이너에서 개별 제어 (content-box / input-wrap) */
.gov-preview-text {
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  line-height: 24px;
  margin: 0;
  padding: 0;
}

/* ── 질문 콘텐츠 박스 (읽기 전용 — 테두리 없음) ────────── */
.gov-preview-content-box {
  border: none;
  padding: 0;
  min-height: auto;
  cursor: default;
}

/* 질문 display 업로드 — 피그마 448:6660: 80×80, bg #f1f1f1 dashed #f1f1f1 radius 10
   (survey_create 83×86과 다른 preview 전용 치수) */
.gov-preview-content-box .gov-survey-upload {
  width: 80px;
  height: 80px;
  border: 1px dashed #f1f1f1;
}

/* ── 라디오 답변 옵션 행 ─────────────────────────────────── */
/* 피그마 448:6116 desktop: 옵션1 bottom=791, 옵션2 top=802 → gap 11
   (모바일 13은 @media에서 override) */
.gov-preview-option {
  margin-bottom: 11px;
}

.gov-preview-option:last-child {
  margin-bottom: 0;
}

/* 라디오 바 — 회색 바 안에 라디오 버튼 배치 */
.gov-preview-radio-bar {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 라디오 버튼 — 선택된 상태로 표시 */
.gov-preview-radio {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border: 2px solid #aaa;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  cursor: default;
  position: relative;
}

/* 중앙 채워진 내부 점 (선택 상태 표현) */
.gov-preview-radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5px;
  height: 5px;
  background: #aaa;
  border-radius: 50%;
}

/* ── 짧은 답변 옵션 박스 ─────────────────────────────────── */
.gov-preview-content-box--short {
  min-height: 49px !important;
}

/* ── 주관식 섹션 라벨 색상 (반투명) ─────────────────────── */
.gov-survey-subjective .gov-survey-label {
  color: rgba(48, 48, 48, 0.7);
}

/* ── 객관식 답변 라벨 — 두 옵션 전체 기준 수직 중앙 정렬 ── */
.gov-survey-field--answer {
  align-items: center;
}

/* ── 주관식 답변 — 읽기전용 textarea 모양 ───────────────── */
/* 피그마 448:6143 desktop: 719×109, border 1px #e8e8e8, radius 10
   placeholder x=785 y=956 → padding-left 21, padding-top 9 */
.gov-preview-textarea-display {
  width: 100%;
  height: 109px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 9px 21px;
  background: #fff;
  box-sizing: border-box;
}

/* placeholder 텍스트 — 피그마 14px Regular #b7b7b7 leading 24 */
.gov-preview-placeholder {
  font-size: 14px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #b7b7b7;
  line-height: 24px;
}

/* ── 계속 작성하기 버튼 ──────────────────────────────────── */
/* 피그마 448:6124 desktop: 외부 컨테이너 bottom 1217 → 버튼 top 1253 = 36
   버튼 250×50 white bg, border 없음, radius 5, 22px Bold #3eb5c9 leading 18 */
.gov-preview-continue-wrap {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.gov-preview-continue-btn {
  width: 250px;
  height: 50px;
  background: #fff;
  border: none;
  border-radius: 5px;
  color: #3eb5c9;
  font-size: 22px;
  line-height: 18px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}


/* ============================================================
   설문 미리보기 — 데스크톱 레이아웃 (gov-preview-container scope)
   피그마 448:6116 좌표 기반 fresh rewrite
============================================================ */

/* === 컨테이너 padding (흰카드) === */
/* 피그마 Rect 4401 (x=350 y=246 w=1476 h=971), Panel (x=593 y=335 w=991 h=793)
   → top pad = 335-246 = 89
   → bottom pad = 1217-1128 = 89
   (좌우는 panel max-width 991 + margin auto 센터링으로 처리) */
.gov-preview-container {
  padding: 89px 0;
}

/* === 패널 헤더 — 피그마 Rect 4441 (991×60) === */
.gov-preview-container .gov-survey-panel-header {
  height: 60px;
}

/* === 패널 본문 padding === */
/* 피그마: label x=695 (panel-L 593) → pad-L 102
          content-R x=1483 (panel-R 1584) → pad-R 101
          헤더 end 395 → 제목 top 427 → pad-T 32
          A2 textarea bottom 1056 → panel bottom 1128 → pad-B 72 */
.gov-preview-container .gov-survey-panel-body {
  padding: 32px 101px 72px 102px;
}

/* === 필드 — 라벨/값 수직 중앙 정렬 === */
/* 피그마: 모든 field에서 label.center-y ≈ value.center-y (align-items: center) */
.gov-preview-container .gov-survey-field {
  align-items: center;
  margin-bottom: 0;
}

/* === 필드 간 gap (desktop) — margin-bottom 기반 ===
   피그마 448:6116:
   - 제목 end 456 → Q1 top 487 = 31
   - Q1 end 599 → A1 top 637 = 38
   - A1 end 851 → subjective top 902 = 51
   - Q2 end 931 → A2 top 947 = 16 */

/* 제목 (panel-body 첫 자식): mb 31 → Q1 */
.gov-preview-container .gov-survey-panel-body > .gov-survey-field:first-child {
  margin-bottom: 31px;
}

/* Q1 (panel-body 둘째 자식): mb 38 → A1 */
.gov-preview-container .gov-survey-panel-body > .gov-survey-field:nth-child(2) {
  margin-bottom: 38px;
}

/* A1 (--answer modifier): mb 51 → 주관식 섹션 */
.gov-preview-container .gov-survey-field--answer {
  margin-bottom: 51px;
}

/* 주관식 내부 Q2 (첫 자식): mb 16 → A2 */
.gov-preview-container .gov-survey-subjective > .gov-survey-field:first-child {
  margin-bottom: 16px;
}

/* === 라벨 (desktop) === */
/* 피그마: 17px Bold. align-items:center 사용으로 padding-top 제거 */
.gov-preview-container .gov-survey-label {
  padding-top: 0;
}

/* === 제목/Q2 값 텍스트 (desktop) — input-wrap 직계 === */
/* 피그마 제목 value x=785, content-L 764 → padding-left 21
   텍스트 세로 중앙 정렬(field align center로 해결) */
.gov-preview-container .gov-survey-input-wrap > .gov-preview-text {
  padding-left: 21px;
}

/* === 질문1 content-box (객관식 질문 — 테두리 없음, 텍스트+이미지 세로 스택) === */
/* 피그마: 텍스트 x=789 → pad-L 25 (content-L 764 + 25); 이미지 x=790 y=519
   텍스트 y=487 (field top) → pad-T 0
   텍스트 bottom 510 → image 519 → text-mb 9 */
.gov-preview-container .gov-preview-content-box {
  border: none;
  padding: 0 0 0 25px;
  min-height: auto;
  align-items: flex-start;
}

.gov-preview-container .gov-preview-content-box .gov-preview-text {
  margin-bottom: 9px;
}

/* === 객관식 답변 옵션 (content-box--with-bar) === */
/* 피그마: option1 719×154, option2 719×49, border 1px #e8e8e8 radius 10 */
.gov-preview-container .gov-preview-option .gov-survey-content-box--with-bar {
  border-width: 1px;
  min-height: 154px;
}

/* 옵션 내부 — 피그마 option1: 텍스트 x=819 (bar-R 794 + 25), y=652 (box-T 637 + 15)
   이미지 y=686 (text-B 675 + 11), 이미지 bottom 766, box bottom 791 → pad-B 25 */
.gov-preview-container .gov-preview-option .gov-survey-content-inner {
  padding: 15px 25px 25px;
  justify-content: flex-start;
  align-items: flex-start;
}

.gov-preview-container .gov-preview-option .gov-survey-content-inner .gov-preview-text {
  margin-bottom: 11px;
}

/* Option 2 (짧은 박스) — 피그마 h=49, 텍스트 세로 중앙 (y=815, box center_y=826.5) */
.gov-preview-container .gov-preview-content-box--short {
  min-height: 49px !important;
}

.gov-preview-container .gov-preview-content-box--short .gov-survey-content-inner {
  padding: 0 25px;
  justify-content: center;
}

.gov-preview-container .gov-preview-content-box--short .gov-survey-content-inner .gov-preview-text {
  margin-bottom: 0;
}

/* === 라디오 바 (왼쪽 30px bg #d9d9d9) === */
/* 피그마: bar 30×박스높이, bg #d9d9d9 (박스 rounded-10이 부모에서 clip) */
.gov-preview-container .gov-survey-content-box--with-bar .gov-preview-radio-bar {
  width: 30px;
  background: #d9d9d9;
}

/* === 라디오 버튼 (15×15) === */
/* 피그마 Ellipse 36/37: outer 15×15 border 2 #aaa; option1 inner dot 5×5 #aaa (선택됨) */
.gov-preview-container .gov-preview-radio {
  width: 15px;
  height: 15px;
}


/* ============================================================
   설문 미리보기 — 모바일 반응형 (1500px 이하)
============================================================ */
@media (max-width: 1500px) {

  /* 제목+버튼 한줄 래퍼 — 모바일에서 숨김 */
  .gov-preview-title-row {
    display: none;
  }

  /* PC용 인라인 버튼 바 — 모바일에서도 숨김 */
  .gov-preview-mode-bar--inline {
    display: none;
  }

  /* 모바일 전용 버튼 바 — 피그마 448:6743: Group x=20 y=226 w=334.28 h=50
     - 좌우 padding 20 (버튼1 abs x=20)
     - 버튼 gap 9 (122+9+203 = 334 inner)
     - title element bottom (main pt 36 + title pad 20+20+16 = 92) → mode bar top=226 → mt=34
     - mode bar bottom 276 → 흰카드 top 299 → mb=23
     CLAUDE.md 섹션 L: 부모 padding/margin 누적 계산 후 역산 */
  .gov-preview-mode-bar--mobile {
    display: flex;
    gap: 9px;
    padding: 0 20px;
    margin-top: 34px;
    margin-bottom: 23px;
    justify-content: flex-start;
  }

  .gov-preview-mode-btn--active {
    width: 122px;
    font-size: 16px;
  }

  .gov-preview-mode-btn--back {
    width: 203px;
    font-size: 16px;
  }

  /* 읽기 전용 텍스트 (mobile 14px) */
  .gov-preview-text {
    font-size: 14px;
  }

  /* 질문1 content-box (텍스트+이미지 스택) — 피그마 448:6655
     - 라벨 bottom=560 → 텍스트 y=598 = gap 38 (field flex-col gap 5 + pad-T 33)
     - 텍스트 x=49, label x=24, input-wrap x=24 → pad-L = 49-24 = 25
     - 텍스트 bottom 621 → 이미지 y=630 = gap 9 (text margin-bottom) */
  .gov-preview-container .gov-preview-content-box {
    border: none;
    padding: 33px 0 0 25px;
  }

  /* 질문1 내부 텍스트 — 이미지와 gap 9 (figma text bottom 621 → upload 630) */
  .gov-preview-container .gov-preview-content-box .gov-preview-text {
    margin-bottom: 9px;
  }

  /* 답변 옵션 (이미지 포함) — 피그마 448:6620 334×266 */
  .gov-preview-container .gov-preview-option .gov-survey-content-box--with-bar {
    min-height: 266px;
  }

  /* 짧은 답변 옵션 — 피그마 448:6639 334×76 */
  .gov-preview-container .gov-preview-content-box--short {
    min-height: 76px !important;
  }

  /* 답변 옵션 inner — 피그마 448:6627/6646
     Option 1 (h=266): 내용 (text 23 + mb 11 + image 80 = 114) 수직 중앙
     Option 2 (h=76): 내용 (text 23) 수직 중앙
     padding 15 25 + justify-content: center로 양쪽 동일 처리 */
  .gov-preview-container .gov-preview-option .gov-survey-content-inner {
    padding: 15px 25px;
    justify-content: center;
  }

  /* 옵션 내부 텍스트 margin-bottom (option1 전용) */
  .gov-preview-container .gov-preview-option .gov-survey-content-inner .gov-preview-text {
    margin-bottom: 11px;
  }

  /* 짧은 옵션은 내부 텍스트 margin 0 (단일 줄 중앙) */
  .gov-preview-container .gov-preview-content-box--short .gov-survey-content-inner .gov-preview-text {
    margin-bottom: 0;
  }

  /* 주관식 답변 textarea — 피그마 448:6670: 334×175 border 1px radius 10
     placeholder x=49 y=1353 → pad-L 25, pad-T 32 */
  .gov-preview-textarea-display {
    height: 175px;
    border-width: 1px;
    padding: 32px 25px;
  }

  /* 계속 작성하기 버튼 — 피그마 448:6609: 185×50 white bg
     border 1px #3eb5c9 rounded-5, 20px Bold #3eb5c9 leading 18
     카드 bottom 1591 → 버튼 top 1631 → margin-top 40 */
  .gov-preview-continue-wrap {
    margin-top: 40px;
  }

  .gov-preview-continue-btn {
    width: 185px;
    font-size: 20px;
    border: 1px solid #3eb5c9;
  }

  /* 프리뷰 전용 컨테이너 (흰카드) — 피그마 448:6601 Rectangle 4401: y=299 h=1292
     Panel x=7 (figma 절대), viewport 375 → container margin 0 padding-L 7 (survey_create margin 10+pad 10=20과 다름)
     Panel y=347 → 카드 내부 top padding=48
     Panel bottom 1538, 카드 bottom 1591 → bottom padding = 53 */
  .gov-preview-container {
    margin: 0;
    padding: 48px 7px 53px;
  }

  /* 프리뷰 패널 헤더 — 피그마 Rect 4441 h=58.55 */
  .gov-preview-container .gov-survey-panel-header {
    height: 58px;
  }

  /* 프리뷰 패널 body padding — 피그마 좌표
     panel x=7 border 2px → inner-L x=9
     label x=24 → pad-L = 24-9 = 15
     최대 content 영역 R: option x=24+334=358, inner-R x=368-2=366 → pad-R = 8
     헤더 bottom 405.56 → 제목 top 436 → pad-T = 30
     A2 textarea bottom 1496 → panel bottom 1538 → pad-B = 42 */
  .gov-preview-container .gov-survey-panel-body {
    padding: 30px 8px 42px 15px;
  }

  /* 프리뷰 패널 margin-bottom 제거 — 카드 pad-bottom 53만 사용 */
  .gov-preview-container .gov-survey-panel {
    margin-bottom: 0;
  }

  /* 제목/Q2 값 텍스트 — 피그마 448:6648/6652
     제목/Q2 value x=43, label x=24, input-wrap x=24 → pad-L = 19
     label bottom 460 → value top 471 → 11 gap (field flex-col gap 5 + pad-T 6) */
  .gov-preview-container .gov-survey-input-wrap > .gov-preview-text {
    padding: 6px 0 0 19px;
  }

  /* 주관식 섹션 라벨 — 모바일은 #303030 (피그마 448:6653/6669)
     데스크톱 base rgba(0.7) override 필요 */
  .gov-preview-container .gov-survey-subjective .gov-survey-label {
    color: #303030;
  }

  /* === 필드 수직 스택 — 라벨 위, 값 아래 (mobile) ===
     데스크톱 align-items: center가 모바일 flex-col에서 수평 중앙 정렬을 일으키는 것 override */
  .gov-preview-container .gov-survey-field {
    align-items: stretch;
  }

  /* === 필드 간 gap (mobile) — margin-bottom 기반, 데스크톱과 동일 구조 ===
     피그마 448:6601:
     - 제목 end 500 → Q1 top 536 = 36
     - Q1 end 710 → A1 top 772 = 62
     - A1 end 1158 → subjective top 1191 = 33
     - Q2 end 1255 → A2 top 1291 = 36 */

  /* 제목 (첫 자식): mb 36 → Q1 */
  .gov-preview-container .gov-survey-panel-body > .gov-survey-field:first-child {
    margin-bottom: 36px;
  }

  /* Q1 (둘째 자식): mb 62 → A1 */
  .gov-preview-container .gov-survey-panel-body > .gov-survey-field:nth-child(2) {
    margin-bottom: 62px;
  }

  /* A1 (--answer modifier): mb 33 → 주관식 섹션 */
  .gov-preview-container .gov-survey-field--answer {
    margin-bottom: 33px;
  }

  /* 주관식 내부 Q2 (첫 자식): mb 36 → A2 */
  .gov-preview-container .gov-survey-subjective > .gov-survey-field:first-child {
    margin-bottom: 36px;
  }

}


/* ============================================================
   설문 상세/답변 페이지 (gov_survey_action.html)
   접두사: gov-action-
============================================================ */

/* ── 콘텐츠 박스 border 오버라이드 (피그마: 1px) ─────────── */
/* 기존 gov-survey-content-box는 2px이나 이 페이지는 1px */
.gov-action-container .gov-survey-content-box {
  border-width: 1px;
}

/* ── 주관식 섹션 라벨 — 불투명 복원 ─────────────────────── */
/* 미리보기/생성 페이지에서 반투명 처리된 것을 이 페이지에서 되돌림 */
.gov-action-container .gov-survey-subjective .gov-survey-label {
  color: #303030;
}

/* ── 라디오 버튼 — 기본 내부 점 숨김 ────────────────────── */
/* 미리보기 페이지는 항상 점 표시, 답변 페이지는 선택 시에만 표시 */
.gov-action-container .gov-preview-radio::after {
  display: none;
}

/* 라디오 선택 시 — 청록색 점 표시 */
.gov-action-container .gov-preview-radio:checked::after {
  display: block;
  background: #3eb5c9;
}

/* 라디오 선택 시 — 테두리 색상 변경 */
.gov-action-container .gov-preview-radio:checked {
  border-color: #3eb5c9;
}

/* ── 정보 필드 행 (작성자 / 작성일 / 응답수 / 설문상태) ─── */
.gov-action-info-row {
  display: flex;
  gap: 5px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

/* 피그마 448:7262: 정보 row bottom 441 → 제목 top 478 = 37 */
.gov-action-info-row--mb30 {
  display: flex;
  gap: 5px;
  margin-bottom: 37px;
  flex-wrap: wrap;
}

/* 데스크톱 action 필드 간격 — 피그마 448:7262
   제목→질문1: 11 / 질문1→답변1: 11 / 질문2→답변2: 11 (모두 11)
   답변1→subjective는 collapse max(field mb 11, subjective mt 45) = 45 */
.gov-action-container .gov-survey-field:not(:last-child) {
  margin-bottom: 11px;
}

.gov-action-container .gov-survey-subjective {
  margin-top: 45px;
}

/* 답변1 옵션1→옵션2 gap 11 (mobile 13) */
.gov-action-container .gov-preview-option:not(:last-child) {
  margin-bottom: 11px;
}

/* ── 개별 정보 필드 ──────────────────────────────────────── */
.gov-action-info-item {
  flex: 1;
  min-height: 40px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  display: flex;
  overflow: hidden;
  min-width: 0;
}

/* ── 필드 라벨 (왼쪽 회색 배경) ─────────────────────────── */
/* 피그마 448:7234: label bg w=79.22, font Bold 16 #303030 line-h 24 */
.gov-action-info-label {
  width: 80px;
  flex-shrink: 0;
  background: #d9d9d9;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ── 필드 값 (오른쪽 흰색 배경) ─────────────────────────── */
/* 피그마 448:7240: value text x=717.1, item left=621, label bg=79.22
   → padding-left = 717.1-621-79.22 = 16.88 ≈ 17
   font Regular 16 #818181 line-h 24 */
.gov-action-info-value {
  flex: 1;
  font-size: 16px;
  line-height: 24px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #818181;
  display: flex;
  align-items: center;
  padding-left: 17px;
  background: #fff;
}

/* ── 제목 읽기전용 표시 박스 ─────────────────────────────── */
.gov-action-title-box {
  width: 100%;
  height: 40px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 0 20px;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  background: #fff;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* ── 주관식 질문 짧은 박스 ───────────────────────────────── */
/* 피그마: 1px solid #e8e8e8, radius 10px, 높이 49px, 텍스트 x=789(box x=764) → padding-left 25 */
.gov-action-question-box {
  min-height: 49px !important;
  max-height: 49px;
  padding: 12px 25px;
  border: 1px solid #e8e8e8 !important;
  border-radius: 10px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* 박스 내부 텍스트 — padding-top 제거, 크기 통일 */
.gov-action-question-box .gov-preview-text {
  padding-top: 0;
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
}

/* ── 주관식 답변 입력 textarea ───────────────────────────── */
/* 피그마: 1px solid #e8e8e8, radius 10, h=109, placeholder padding 9 top / 21 left */
.gov-action-textarea {
  width: 100%;
  height: 109px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 9px 21px;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  resize: none;
  outline: none;
  background: #fff;
  box-sizing: border-box;
}

.gov-action-textarea::placeholder {
  color: #b7b7b7;
}

.gov-action-textarea:focus {
  border-color: #3eb5c9;
}

/* ── 라디오 버튼 커서 (선택 가능) ───────────────────────── */
.gov-action-container .gov-preview-radio {
  cursor: pointer;
}

/* ── 이미지 업로드 박스 (action 페이지 전용) ─────────────── */
/* 피그마 448:6794 (모바일) / 448:7215 (데스크톱): 모두 80×80
   bg #f1f1f1, border 1px dashed #f1f1f1, radius 10
   (기본 .gov-survey-upload는 83×86, border 없음 → action에서 80×80 + dashed) */
.gov-action-container .gov-survey-upload {
  width: 80px;
  height: 80px;
  border: 1px dashed #f1f1f1;
}

/* ── action 페이지: info row item 높이 50px (피그마) ───── */
/* 기본 .gov-result-info-item은 min-height 54 (result 페이지용) → action에서 50으로 축소 */
.gov-action-container .gov-result-info-item {
  min-height: 50px;
}

/* ── action 페이지: 패널 간격 피그마 일치 ──────────────── */
/* 피그마: 인너 패널 bottom(1161) → 컨테이너 bottom(1208) = 47, action-wrap top(1235) = 74 총 gap */
/* 패널 margin-bottom 30 제거, 컨테이너 padding-bottom 47, action-wrap margin-top 27 */
.gov-action-container .gov-survey-panel {
  margin-bottom: 0;
}

/* 데스크톱 컨테이너 padding — action 전용 (create 페이지와 다름)
   피그마 448:7217: 흰색 bg (350, 246) 1476×962 ends 1208
   panel top 299 → padding-top 53
   panel bottom 1161 → padding-bottom 47 */
.gov-action-container.gov-survey-container {
  padding-top: 53px;
  padding-bottom: 47px;
}

/* 데스크톱 패널 헤더 height — action 전용 (create는 63, action은 60) */
/* 피그마 448:7230: Rectangle 4441 h=60 */
.gov-action-container .gov-survey-panel-header {
  height: 60px;
}

.gov-action-container ~ .gov-survey-action-wrap {
  margin-top: 27px;
}


/* ============================================================
   설문 상세/답변 — 중간 해상도 (1501~1660)
   정보 필드 행 2×2 grid 전환
   !important: HTML에 Bootstrap d-flex (display: flex !important) 충돌 방지
   ≤1500은 모바일 flex-column이므로 겹침 방지 */
@media (max-width: 1660px) and (min-width: 1501px) {
  .gov-action-info-row,
  .gov-action-info-row--mb30 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 5px;
    row-gap: 11px;
  }
}


/* ============================================================
   설문 상세/답변 — 모바일 반응형 (1500px 이하)
============================================================ */
@media (max-width: 1500px) {

  /* 정보 필드 행 — 세로 배치 (피그마 모바일: row bottom 550 → 제목 top 591 = 41) */
  .gov-action-info-row,
  .gov-action-info-row--mb30 {
    flex-direction: column;
    gap: 11px;
    margin-bottom: 41px;
  }

  /* 모바일 action 필드 간격 — 피그마 448:6750
     제목→질문1: 23 / 질문1→답변1: 23 / 질문2→답변2: 36 */
  .gov-action-container .gov-survey-field:not(:last-child) {
    margin-bottom: 23px;
  }

  /* 모바일 action subjective gap (답변1→질문2 = 48) */
  .gov-action-container .gov-survey-subjective {
    margin-top: 48px;
  }

  /* 모바일 action subjective 내부 질문2→답변2 = 36 */
  .gov-action-container .gov-survey-subjective .gov-survey-field:not(:last-child) {
    margin-bottom: 36px;
  }

  /* 모바일 action 옵션 간격 13 (desktop 11과 다름) */
  .gov-action-container .gov-preview-option:not(:last-child) {
    margin-bottom: 13px;
  }

  /* 모바일에서 마이너스 마진 모두 리셋 */
  .gov-survey-panel-body--indent .gov-action-info-row--mb30,
  .gov-action-container .gov-survey-panel-body--indent .gov-action-info-row--mb30 {
    margin-left: 0;
    margin-right: 0;
  }

  /* action 페이지 패널 본문 모바일 — 데스크톱 102/101 좌우 leak 차단
     피그마 448:6753: 첫 info row y=357, header end 323.72 → padding-top 34
     field x=21, panel x=7 → padding-left 14
     field right x=355, panel right x=368 → padding-right 13
     마지막 답변 ends y=1692, panel bottom y=1730 → padding-bottom 38 */
  .gov-action-container .gov-survey-panel-body--indent {
    padding: 34px 13px 38px 14px;
  }

  /* 개별 정보 필드 — 전체폭, 높이 40px */
  .gov-action-info-item {
    width: 100%;
    height: 40px;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
  }

  /* 라벨 — 피그마 448:6765: "작성자" (3chars) text w=52.64 → 1char ~17.5, font ~16
     label h=24 = font 16 × line-height 1.5, cell w=85 center=42.5 ≈ 피그마 center 41.95 */
  .gov-action-info-label {
    width: 85px;
    font-size: 16px;
  }

  /* 값 — 피그마 448:6765: text x offset 99 = label cell 85 + padding 14, font 16 */
  .gov-action-info-value {
    font-size: 16px;
    padding-left: 14px;
  }

  /* 제목 박스 */
  .gov-action-title-box {
    font-size: 14px;
    border-width: 1px;
    border-radius: 5px;
  }

  /* 주관식 질문 박스 */
  .gov-action-question-box {
    min-height: 76px !important;
    max-height: none;
  }

  /* 주관식 답변 textarea */
  .gov-action-textarea {
    height: 175px;
    font-size: 14px;
  }

  /* action 페이지: info item 높이 40px (피그마 모바일 각 항목 334×40) */
  .gov-action-container .gov-result-info-item {
    min-height: 40px;
    max-height: 40px;
  }

  /* action 페이지: 패널 헤더 72×font 22
     피그마 모바일 448:6760: Rectangle 4441 h=72.72, 설문 font-size 22 NanumGothic Bold leading 24 */
  .gov-action-container .gov-survey-panel-header {
    height: 72px;
    font-size: 22px;
  }

  /* action 페이지: panel-body padding-top — 피그마 첫 info row y=357, header bottom=323 → 34 */
  .gov-action-container .gov-survey-panel-body {
    padding-top: 34px;
  }

  /* action 페이지: 컨테이너 margin/padding 모바일 (피그마 448:6753)
     흰색 bg (0, 216) 374×1573 ends 1789
     title block (main p-t 36 + title p-t 12 + glyph 20 + p-b 34) = 102 from main start
     main start at layout m-t 56 → title block ends at web y=158
     Figma 카드 top web y=216-44=172 → margin-top 14 (158→172 gap)
     panel top web y=251-44=207 → container padding-top 35 (172→207)
     panel bottom web 1730-44=1686, 카드 bottom web 1789-44=1745 → padding-bottom 59 */
  .gov-action-container.gov-survey-container {
    margin-top: 14px;
    padding-top: 35px;
    padding-bottom: 59px;
  }

  /* action 페이지: 버튼 wrap margin-top — 피그마 카드 bottom 1789 → btn top 1820 = 31 */
  .gov-action-container ~ .gov-survey-action-wrap {
    margin-top: 31px;
  }

  /* action 페이지: main padding-bottom override — 피그마 btns end y=1870, footer top y=1931 → gap 61
     base @1500 has padding-bottom: 81 (gov_survey_create 기준) → action 전용 61로 오버라이드
     specificity (0,3,1) 동일 → source order 후순위 승리 */
  main.dao-gov-main:has(.gov-action-container) {
    padding-bottom: 61px;
  }

}

/* ============================================================
   설문 결과 페이지 (gov_survey_result.html)
   접두사: gov-result-
   피그마 데스크톱 448:6263 / 모바일 448:6926

   ⚠ 원칙: 모든 수치를 피그마 좌표에서 직접 유도. 기존 CSS 값 참조 금지.
   ⚠ HTML 컨테이너: dao-gov-container + gov-result-container (공유 클래스 없음)
============================================================ */

/* ═══════════════════════════════════════════════════════════
   [1] 페이지 제목
   ═══════════════════════════════════════════════════════════ */

/* 모바일 전용 페이지 제목 (데스크톱은 .dao-gov-title 사용, 여기서 모바일 노출) */
.gov-result-mobile-title {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   [2] 카드 컨테이너 & 패널
   ═══════════════════════════════════════════════════════════ */

/* 카드 padding (피그마 카드 y=246~2468 / 첫 panel y=297 / 마지막 panel bottom 2390)
   padding-top = 297-246 = 51, padding-bottom = 2468-2390 = 78 */
.gov-result-container {
  padding-top: 51px;
  padding-bottom: 78px;
}

/* 패널 공통 (피그마 panel: border 2px #3eb5c9, radius 10, 991 wide 중앙 정렬)
   피그마 bg (350, 246) 1476×2222, panel (593, 297) 991 → 수평 padding 242/243
   CSS container 수평 padding이 Figma와 다르므로 max-width로 정확한 너비 보장 */
.gov-result-panel {
  max-width: 991px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #3eb5c9;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* 설문 panel → 관리정보 panel gap (피그마: 1222→1310 = 88) */
.gov-result-panel:not(.gov-result-mgmt-panel) {
  margin-bottom: 88px;
}

/* 패널 헤더 (cyan): h=60, "설문"/"관리정보" 28px Bold white leading 24 center */
/* 피그마 448:6344/6459: font-size 28, leading 24 */
.gov-result-panel-header {
  background: #3eb5c9;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 28px;
  line-height: 24px;
  font-weight: 700;
  color: #fff;
}

/* 패널 본문 (관리정보 panel용 — base padding)
   피그마: section header x=643 / panel x=593 → padding-left/right 50
   panel header bottom 1370 / 첫 section header y=1404 → padding-top 34
   panel bottom 2390 / 마지막 액션 row bottom 2346 → padding-bottom 44 */
.gov-result-panel-body {
  padding: 34px 50px 44px;
}

/* 설문 panel용 indent 변형
   피그마: field x=695 → padding-left 102; field right 1483 → padding-right 101
   panel header bottom 357 / 첫 info row y=376.4 → padding-top 19
   panel bottom 1222 / 마지막 "답변 2개" bottom 1202 → padding-bottom 20 */
.gov-result-panel-body--indent {
  padding: 19px 101px 20px 102px;
}

/* ═══════════════════════════════════════════════════════════
   [3] 정보 행 (작성자 / 작성일 / 응답수 / 설문상태)
   ═══════════════════════════════════════════════════════════ */

/* info row 컨테이너 (피그마 448:6346 x=621 w=935): 4 items gap 5
   margin-bottom: 피그마 654:1352 info end y=458 / 일정 y=492 = 34 */
.gov-result-info-row {
  display: flex;
  gap: 5px;
  margin-bottom: 34px;
  /* panel-body indent inner left=695 / row x=621 → margin-left -74
     panel-body indent inner right=1483 / row right 1556 → margin-right -73 */
  margin-left: -74px;
  margin-right: -73px;
}

/* 개별 info item (피그마 448:6347): w=230, h=53.65, border 1px #d9d9d9, radius 5 */
.gov-result-info-item {
  flex: 1;
  min-height: 54px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  display: flex;
  overflow: hidden;
  min-width: 0;
}

/* 라벨 영역 (피그마 448:6352 text x=633.6 w=52.6 center=660 → 라벨 폭 ~80) */
.gov-result-info-label {
  width: 80px;
  flex-shrink: 0;
  background: #d9d9d9;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #303030;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 24px;
}

/* 값 영역 (피그마 448:6353 text x=717.1, item left=621, label w=80 → padding-left 17) */
.gov-result-info-value {
  flex: 1;
  min-width: 0;
  background: #fff;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 16px;
  color: #818181;
  line-height: 24px;
  padding-left: 17px;
  display: flex;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════
   [4] 필드 공통 & 라벨
   ═══════════════════════════════════════════════════════════ */

/* 필드 (라벨 + input-wrap + count-spacer 가로 배치) */
.gov-result-field {
  display: flex;
  align-items: center;
  margin-bottom: 17px; /* 제목 bottom 510 / 질문1 top 527 = 17 */
}

.gov-result-field:last-child {
  margin-bottom: 0;
}

/* 답변 필드는 margin-bottom 0 (총합 wrap의 margin-top으로 제어) */
.gov-result-field--answer {
  margin-bottom: 0;
}

/* 라벨 (피그마 448:6380 "제목": x=695, w=69, h=24, 17px Bold #303030 leading 24) */
.gov-result-label {
  width: 69px;
  flex-shrink: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #303030;
  line-height: 24px;
}

/* input-wrap (input/box 영역) */
.gov-result-input-wrap {
  flex: 1;
  min-width: 0;
}

/* count-spacer (제목/질문 field에 우측 공간 확보 — 답변 field option-row의 count box 너비 매칭) */
.gov-result-count-spacer {
  width: 59px;
  flex-shrink: 0;
  margin-left: 13px;
}

/* ═══════════════════════════════════════════════════════════
   [4-2] 일정 필드 (시작일/종료일) — 피그마 654:1455
   ═══════════════════════════════════════════════════════════ */

/* schedule field 전용 간격: 피그마 654:1352 schedule end y=532 → title y=564 = 32 */
.gov-result-field--schedule {
  margin-bottom: 32px;
}

/* 일정 row: input area x=764~1483 (w=719), 각 input 355×40, gap 9 */
.gov-result-schedule-row {
  display: flex;
  gap: 9px;
  width: 100%;
}

/* date wrap: 40h, border 1px #d9d9d9, radius 5, padding 0 20, icon 20×20 */
.gov-result-date-wrap {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  background: #fff;
  padding: 0 20px;
  gap: 12px;
  box-sizing: border-box;
}

.gov-result-date-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  line-height: 24px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  padding: 0;
}

.gov-result-date-input::placeholder {
  color: rgba(48, 48, 48, 0.7);
}

.gov-result-date-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   [5] 제목 박스
   ═══════════════════════════════════════════════════════════ */

/* 피그마 448:6379: w=719, h=50, bg white, border 1px #d9d9d9, radius 10
   text 448:6381 x=785 / box x=764 / border 1px → padding-left = 20 */
.gov-result-title-box {
  width: 100%;
  height: 50px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 0 20px;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 16px;
  color: #303030;
  line-height: 24px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════
   [6] 객관식 질문 박스 (이미지 포함)
   ═══════════════════════════════════════════════════════════ */

/* 피그마 448:6384: w=719, h=154, bg white, border 1px #e8e8e8, radius 10
   text 448:6385 x=789, image y=576 (box y=527) → padding-top 15 */
.gov-result-question-box {
  width: 100%;
  min-height: 154px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 15px 25px 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}

/* 박스 내 텍스트 + 업로드 (피그마 448:6385: text 16px #303030 leading 24, 텍스트→이미지 gap ≈ 11) */
.gov-result-question-box .gov-result-text {
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 16px;
  color: #303030;
  line-height: 24px;
  margin: 0 0 11px 0;
}

/* 첨부 이미지 박스 (피그마 448:6387 / 6422): 80×80, bg #f1f1f1, border 1px dashed #f1f1f1, radius 10
   결과 페이지는 읽기 전용 — 업로드 동작 없음. 이미지 표시 영역 */
.gov-result-image-box {
  width: 80px;
  height: 80px;
  background: #f1f1f1;
  border: 1px dashed #f1f1f1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 박스 내부 아이콘 (피그마 448:6388/6423 gallery-add: w=24 h=24) */
.gov-result-image-box img {
  width: 24px;
  height: 24px;
}

/* ═══════════════════════════════════════════════════════════
   [7] 답변 옵션 + 카운트 (option-row: 같은 row로 묶어 높이 동기화)
   ═══════════════════════════════════════════════════════════ */

/* 옵션 row: option-box + count-box flex 묶음
   align-items: stretch (flex 기본) → answer 콘텐츠 변경 시 count도 자동 같은 높이
   gap: answer right 1483 / count left 1496 = 13 */
.gov-result-option-row {
  display: flex;
  gap: 13px;
  align-items: stretch;
}

.gov-result-option-row > .gov-result-option-box {
  flex: 1;
  min-width: 0;
}

.gov-result-option-row > .gov-result-count-box {
  flex-shrink: 0;
}

/* 옵션 row 간 세로 gap: option1 bottom 852 / option2 top 863 = 11 */
.gov-result-option-row.gov-result-answer-gap {
  margin-top: 11px;
}

/* 옵션 박스 (tall, 피그마 448:6401): bg white, border 1px #e8e8e8, radius 10
   왼쪽 라디오 bar 30px wide */
.gov-result-option-box {
  min-height: 154px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  box-sizing: border-box;
}

/* 짧은 옵션 박스 (피그마 448:6408): h=50 */
.gov-result-option-box--short {
  min-height: 49px;
}

/* 라디오 bar (피그마 448:6404 mask): w=30, bg #d9d9d9
   box border 1px → 내부 radius 9 (10-1) */
.gov-result-option-bar {
  width: 30px;
  flex-shrink: 0;
  background: #d9d9d9;
  border-radius: 9px 0 0 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 정적 라디오 점 (피그마 448:6405 ellipse): 15×15, border 2px #d9d9d9, bg white */
.gov-result-radio-dot {
  display: block;
  width: 15px;
  height: 15px;
  background: #fff;
  border: 2px solid #d9d9d9;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 옵션 내부 (텍스트 + 업로드 영역)
   tall: 피그마 텍스트 y=713 (box y=698) → padding-top = 15
         text→image gap ≈ 11px (text margin-bottom)
         image bottom 836 (box bottom 852) → padding-bottom 25 */
.gov-result-option-content {
  flex: 1;
  padding: 15px 25px 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* short 옵션은 텍스트 1줄 → 수직 중앙, 상하 padding 0 */
.gov-result-option-box--short .gov-result-option-content {
  padding: 0 25px;
  justify-content: center;
}

/* 옵션 텍스트 (피그마 448:6406/6412: 16px #303030 leading 24) */
.gov-result-option-content .gov-result-text {
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 16px;
  color: #303030;
  line-height: 24px;
  margin: 0 0 11px 0;
}

.gov-result-option-box--short .gov-result-text {
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   [8] 카운트 박스 (10개 / 11개)
   ═══════════════════════════════════════════════════════════ */

/* 피그마 448:6417/6418: w=59, bg #d9d9d9, radius 10
   text 14px Bold rgba(48,48,48,0.7) leading 24 center */
.gov-result-count-box {
  width: 59px;
  flex-shrink: 0;
  background: #d9d9d9;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: rgba(48, 48, 48, 0.7);
  line-height: 24px;
}

.gov-result-count-box--tall {
  min-height: 154px;
}

.gov-result-count-box--short {
  min-height: 49px;
}

/* ═══════════════════════════════════════════════════════════
   [9] 답변 총합 ("답변 21개" / "답변 2개")
   ═══════════════════════════════════════════════════════════ */

/* 총합 wrap (필드 밖 형제, 우측 정렬) */
.gov-result-answer-total-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px; /* 주관식: 답변 박스2 bottom 1172 / "답변 2개" text top 1178 = 6 */
}

/* 객관식 총합 gap: 답변 field bottom 913 / "답변 21개" text top 927 = 14 */
.gov-result-answer-total-wrap--objective {
  margin-top: 14px;
}

/* 총합 텍스트 (피그마 448:6431): 14px Bold rgba(48,48,48,0.7) leading 24 */
.gov-result-answer-total {
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: rgba(48, 48, 48, 0.7);
  line-height: 24px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   [10] 주관식 섹션
   ═══════════════════════════════════════════════════════════ */

/* 주관식 섹션 top margin: "답변 21개" text bottom 951 / 주관식 질문 top 1000 = 49 */
.gov-result-subjective {
  margin-top: 49px;
}

/* 주관식 질문 field → 답변 field gap: 1050 → 1068 = 18 */
.gov-result-subjective > .gov-result-field:not(.gov-result-field--answer) {
  margin-bottom: 18px;
}

/* 주관식 라벨 (피그마 448:6441/6444): #303030 (객관식과 동일) */
.gov-result-subjective .gov-result-label {
  color: #303030;
}

/* 주관식 질문 박스 (피그마 448:6445): w=719, h=50, bg white, border 1px #d9d9d9, radius 10
   text 448:6446 x=785 → padding-left 20 */
.gov-result-subj-question-box {
  width: 100%;
  min-height: 50px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
}

.gov-result-subj-question-box .gov-result-text {
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 16px;
  color: #303030;
  line-height: 24px;
  margin: 0;
}

/* 주관식 읽기전용 답변 박스 (피그마 448:6436/6439): h=50, bg white, border 1px #e8e8e8, radius 10
   text x=786 / box x=764 / border 1 → padding-left 21 */
.gov-result-subjective-answer {
  width: 100%;
  height: 50px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 0 21px;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 16px;
  color: #303030;
  line-height: 24px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* 주관식 답변 박스 간 gap: 박스1 bottom 1118 / 박스2 top 1122 = 4 */
.gov-result-subjective-answer.gov-result-answer-gap {
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════
   [11] 관리정보 패널 - 서브섹션 헤더 & 테이블
   ═══════════════════════════════════════════════════════════ */

.gov-result-section {
  margin-bottom: 0;
}

/* 서브섹션 간 간격 (피그마 기본정보 bottom 1547 / 이력 top 1592 = 45) */
.gov-result-section-margin-top {
  margin-top: 45px;
}

/* 서브섹션 다크 헤더 (피그마 448:6485): bg #3a3a3a, h=44, 18px Bold white center
   margin-bottom: header bottom 1448 / 첫 row top 1452 = 4 */
.gov-result-section-header {
  height: 44px;
  background: #3a3a3a;
  color: #fff;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  margin-bottom: 4px;
}

/* 이력 헤더 — 좌측 spacer + 중앙 텍스트 + 우측 로그보기 버튼
   피그마 버튼 right 1472 / section right 1535 → 우측 inset 63 */
.gov-result-section-header--with-btn {
  justify-content: space-between;
  padding: 0 63px;
}

.gov-result-log-btn-spacer {
  width: 90px;
  flex-shrink: 0;
}

/* 로그보기 버튼 (피그마 448:6578): w=90, h=30, bg #9d9d9d, radius 0, 14px Regular white */
.gov-result-log-btn {
  width: 90px;
  height: 30px;
  background: #9d9d9d;
  border: none;
  border-radius: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── 테이블 (기본정보 / 관리정보) ─────────────────────── */
.gov-result-table {
  width: 100%;
}

/* 피그마 448:6462: row h=44, col gap 5, row mb 7 */
.gov-result-table-row {
  display: flex;
  min-height: 44px;
  gap: 5px;
  margin-bottom: 7px;
}

.gov-result-table-row:last-child {
  margin-bottom: 0;
}

/* 라벨 셀 (피그마 448:6464): w=213, bg #f1f1f1, 16px Bold #303030 center */
.gov-result-table-label {
  width: 213px;
  flex-shrink: 0;
  background: #f1f1f1;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #303030;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 12px;
  box-sizing: border-box;
}

/* 값 셀 (피그마 448:6465): bg white, border 2px #f1f1f1, 16px Regular */
.gov-result-table-value {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 2px solid #f1f1f1;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 16px;
  color: #303030;
  line-height: 24px;
  display: flex;
  align-items: center;
  padding: 8px 16px 8px 44px; /* text x=907 / cell x=861 / border 2 → padding-left 44 */
  box-sizing: border-box;
}

/* 그룹 간 경계: V1 right 1085 → L2 left 1093 = 8 (gap 5 + margin 3) */
.gov-result-table:not(.gov-result-history-table) .gov-result-table-value + .gov-result-table-label {
  margin-left: 3px;
}

/* 메모 row (피그마 448:6488): h=175 */
.gov-result-table-row--memo .gov-result-table-label,
.gov-result-table-row--memo .gov-result-table-value {
  min-height: 175px;
}

/* 메모 row → 다음 row gap: 메모 bottom 2144 / 다음 top 2149 = 5 */
.gov-result-table-row--memo {
  margin-bottom: 5px;
}

/* ── 이력 테이블 (피그마 448:6509: label w=220, col gap 4, row mb 4, value text center) ── */
.gov-result-history-table .gov-result-table-row {
  gap: 4px;
  margin-bottom: 4px;
}

.gov-result-history-table .gov-result-table-label {
  width: 220px;
  font-weight: 400; /* 이력 라벨은 Regular (피그마 448:6512 Regular) */
}

.gov-result-history-table .gov-result-table-value {
  padding: 8px 16px;
  justify-content: center;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   [12] 액션 버튼 (관리정보 panel 내)
   ═══════════════════════════════════════════════════════════ */

/* 액션 영역: row1 y=2239 / row2 y=2298 → row gap 11 (2298 - (2239+48) = 11) */
.gov-result-actions {
  margin-top: 30px;
}

.gov-result-actions-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 11px;
}

.gov-result-actions-row:last-child {
  margin-bottom: 0;
}

/* 피그마: 삭제→수정 gap 5 (784-779), 목록→저장→개시승인요청 gap 6 (1235-1229, 1377-1371)
   평균 6 적용 (기존 10 → 6) */
.gov-result-actions-group {
  display: flex;
  gap: 6px;
}

/* 버튼 공통 (피그마 448:6581): w=136, h=48, radius 5, 20px Bold */
.gov-result-btn {
  width: 136px;
  height: 48px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* 삭제 (피그마 448:6580): border #d46351, text #d46351 */
.gov-result-btn--delete {
  border-color: #d46351;
  color: #d46351;
}

/* 수정 (피그마 448:6589): bg #d46351, white */
.gov-result-btn--edit {
  background: #d46351;
  color: #fff;
  border-color: #d46351;
}

/* 목록 (피그마 448:6583): border #3eb5c9, text #3eb5c9 */
.gov-result-btn--list {
  border-color: #3eb5c9;
  color: #3eb5c9;
}

/* 저장 (피그마 448:6592): bg #3eb5c9, white */
.gov-result-btn--save {
  background: #3eb5c9;
  color: #fff;
  border-color: #3eb5c9;
}

/* 개시승인요청 (피그마 448:6595): w=159, border #edb323, text #edb323 */
.gov-result-btn--open-request {
  width: 159px;
  border-color: #edb323;
  color: #edb323;
}

/* 답변보기 (피그마 448:6586): border #5c5c5c, text #5c5c5c */
.gov-result-btn--view-answer {
  border-color: #5c5c5c;
  color: #5c5c5c;
}

/* 결과승인요청 (피그마 448:6598): w=159, bg #edb323, white */
.gov-result-btn--result-request {
  width: 159px;
  background: #edb323;
  color: #fff;
  border-color: #edb323;
}

/* ═══════════════════════════════════════════════════════════
   [13] 하단 버튼 wrap (카드 밖 — 목록/승인)
   ═══════════════════════════════════════════════════════════ */

/* 카드 → action-wrap gap (피그마: card bottom 2468 / wrap top 2523 = 55) */
.gov-result-action-wrap {
  margin-top: 55px;
}

/* 버튼 wrap (피그마 448:6447): 가로 2버튼, gap 16 */
.gov-result-bottom-wrap {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* 하단 버튼 공통 (피그마 448:6449/6452): w=225, h=50, radius 5, 22px Bold */
.gov-result-bottom-btn {
  width: 225px;
  height: 50px;
  border-radius: 5px;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 목록 (피그마 448:6449): bg white, border 1px #b4b4b4, text #3eb5c9 */
.gov-result-bottom-btn--list {
  background: #fff;
  border: 1px solid #b4b4b4;
  color: #3eb5c9;
}

/* 승인 (피그마 448:6452): bg #3eb5c9, white, border 1px #3eb5c9 */
.gov-result-bottom-btn--approve {
  background: #3eb5c9;
  color: #fff;
  border: 1px solid #3eb5c9;
}


/* ============================================================
   설문 결과 — 모바일 반응형 (≤1500px)
   피그마 448:6926
============================================================ */
@media (max-width: 1500px) {

  /* ═════════════════════════════════════════════════════════
     [M-1] 페이지 제목 & 카드 & 패널
     ═════════════════════════════════════════════════════════ */

  /* 데스크톱 페이지 제목 숨김, 모바일 제목 표시 */
  .dao-gov-title {
    display: none;
  }

  /* 모바일 페이지 타이틀 (피그마 448:7145): NanumGothic Bold 20px white center leading 1.4
     위치 y=148 (모바일 nav header bottom 100 → 48px), bottom y=168 → bg top 216 = 48px */
  .gov-result-mobile-title {
    display: block;
    font-family: 'Nanum Gothic', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    text-align: center;
    margin: 48px 0 48px 0;
  }

  /* 카드 padding 모바일 (피그마 448:6929 흰 페이지 bg: x=0 y=216 w=374 h=2900)
     padding-top: bg y=216 / 첫 panel y=268 = 52
     padding-right: bg right 374 / 패널 right 368 = 6
     padding-bottom: bg bottom 3116 / 결과승인요청 row bottom 3081 = 35
     padding-left: 패널 x=7 / bg x=0 = 7
     base .dao-gov-container의 padding 51 60 63 누수 차단 */
  .gov-result-container {
    padding: 52px 6px 35px 7px;
  }

  /* 설문 panel 모바일: 피그마 448:7053 — bg white, border 2px #3eb5c9, radius 10 (base 그대로 유지) */

  /* 관리정보 panel 모바일: 피그마 448:6930 — 3개 sub-frame sibling 구조 (outer panel 시각 요소 없음)
     448:7025 첫 cyan 헤더가 sharp rect 단독이므로 panel은 transparent + sharp */
  .gov-result-mgmt-panel {
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }

  /* 패널 헤더 모바일 (설문) - 피그마 448:7050 header h=66.23 */
  .gov-result-panel:not(.gov-result-mgmt-panel) .gov-result-panel-header {
    height: 66px;
  }

  /* 패널 헤더 모바일 (관리정보) - 피그마 448:7025 cyan h=74 sharp rect, "관리정보" 20px */
  .gov-result-mgmt-panel .gov-result-panel-header {
    height: 74px;
    font-size: 20px;
  }

  /* 설문 panel body indent 모바일 padding (피그마 448:7050 정밀)
     panel x=7 w=361 right=368 / 콘텐츠 x=21~355
     padding-left = 21-7 = 14, padding-right = 368-355 = 13
     padding-top: header bottom 334 / 첫 info row 374 = 40
     padding-bottom: panel bottom 1615 / "답변 2개" bottom 1594 = 21 */
  .gov-result-panel-body--indent {
    padding: 40px 13px 21px 14px;
  }

  /* 관리정보 panel body 모바일 padding
     padding-top: cyan header bottom 1772 / 첫 row top 1779 = 7
     padding-left/right 0 (edge-to-edge sub-frames) */
  .gov-result-mgmt-panel .gov-result-panel-body {
    padding: 7px 0 0 0;
  }

  /* 관리정보 첫 서브섹션 dark 헤더 숨김 (모바일은 cyan panel 헤더가 "관리정보" 역할) */
  .gov-result-mgmt-panel .gov-result-section:first-child .gov-result-section-header {
    display: none;
  }

  /* ═════════════════════════════════════════════════════════
     [M-2] 정보 행: 세로 스택, h=40
     ═════════════════════════════════════════════════════════ */

  /* 피그마 448:7066-7087: row h=40, y 374/425/476/527 → gap 11
     margin-bottom: 피그마 654:1167 info end y=550 / 일정 y=572 = 22 */
  .gov-result-info-row {
    flex-direction: column;
    gap: 11px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 22px;
  }

  .gov-result-info-item {
    min-height: 40px;
    max-height: 40px;
  }

  /* 모바일 라벨 w=85, font 14 */
  .gov-result-info-label {
    width: 85px;
    font-size: 14px;
  }

  .gov-result-info-value {
    font-size: 14px;
  }

  /* ═════════════════════════════════════════════════════════
     [M-3] 필드: 세로 배치 (라벨 위, 박스 아래)
     ═════════════════════════════════════════════════════════ */

  .gov-result-field {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin-bottom: 19px; /* 제목 bottom 677 / 질문1 top 696 = 19 */
  }

  .gov-result-field--answer {
    margin-bottom: 0;
  }

  .gov-result-label {
    width: auto;
  }

  .gov-result-input-wrap {
    width: 100%;
  }

  /* 모바일에선 count-spacer 숨김 (option-row에 카운트 통합) */
  .gov-result-count-spacer {
    display: none;
  }

  /* ═════════════════════════════════════════════════════════
     [M-3b] 일정 필드 모바일 (시작일/종료일) — 피그마 654:1178
     ═════════════════════════════════════════════════════════ */

  /* schedule field: label 24 + gap 7 + input row 40, 다음 title까지 26 */
  .gov-result-field--schedule {
    gap: 7px;
    margin-bottom: 26px;
  }

  /* 2개 date input 나란히 */
  .gov-result-schedule-row {
    gap: 4px;
  }

  /* 모바일 date wrap: h=40, padding 15 */
  .gov-result-date-wrap {
    padding: 0 15px;
    gap: 8px;
  }

  .gov-result-date-input {
    font-size: 14px;
  }

  /* ═════════════════════════════════════════════════════════
     [M-4] 제목 박스 모바일 (h=40, border radius 5)
     ═════════════════════════════════════════════════════════ */

  /* 피그마 448:7098: w=334 h=40, border 1px #d9d9d9, radius 5 */
  .gov-result-title-box {
    height: 40px;
    border-radius: 5px;
    padding: 0 19px;
  }

  /* ═════════════════════════════════════════════════════════
     [M-5] 객관식 질문 박스 모바일 (h=175)
     ═════════════════════════════════════════════════════════ */

  /* 피그마 448:7128: w=334 h=175, border 1px #e8e8e8, radius 10 */
  .gov-result-question-box {
    min-height: 175px;
  }

  .gov-result-question-box .gov-result-text {
    font-size: 14px;
  }

  /* ═════════════════════════════════════════════════════════
     [M-6] 객관식 답변 옵션 + 카운트 모바일
     ═════════════════════════════════════════════════════════ */

  /* tall 옵션 모바일: h=190 (피그마 448:7103) */
  .gov-result-option-box {
    min-height: 190px;
  }

  /* short 옵션 모바일: h=76 (피그마 448:7123) */
  .gov-result-option-box--short {
    min-height: 76px;
  }

  /* tall count 모바일: h=190 */
  .gov-result-count-box--tall {
    min-height: 190px;
  }

  /* short count 모바일: h=76 */
  .gov-result-count-box--short {
    min-height: 76px;
  }

  /* 모바일 option-row gap 6 (피그마: answer right 290 / count left 296 = 6) */
  .gov-result-option-row {
    gap: 6px;
  }

  /* 모바일 옵션 간 세로 gap 7 (피그마: option1 bottom 1141 / option2 top 1148 = 7) */
  .gov-result-option-row.gov-result-answer-gap {
    margin-top: 7px;
  }

  /* 라디오 점 축소 12×12 */
  .gov-result-radio-dot {
    width: 12px;
    height: 12px;
  }

  /* 옵션 텍스트 모바일 14 */
  .gov-result-option-content .gov-result-text {
    font-size: 14px;
  }

  /* ═════════════════════════════════════════════════════════
     [M-7] 답변 총합 모바일
     ═════════════════════════════════════════════════════════ */

  /* 객관식 모바일: count-short bottom 1224 / "답변 21개" top 1231 = 7 */
  .gov-result-answer-total-wrap--objective {
    margin-top: 7px;
  }

  /* 모바일 총합 텍스트: Regular + #303030 (데스크톱 Bold + rgba와 다름) */
  .gov-result-answer-total {
    font-weight: 400;
    color: #303030;
  }

  /* ═════════════════════════════════════════════════════════
     [M-8] 주관식 모바일
     ═════════════════════════════════════════════════════════ */

  /* 주관식 섹션 top margin 모바일 (피그마: "답변 21개" bottom 1254 / 주관식 질문 top 1303 = 49) */
  .gov-result-subjective {
    margin-top: 49px;
  }

  /* 주관식 답변 field 세로 배치 */
  .gov-result-subjective .gov-result-field--answer {
    flex-direction: column;
  }

  /* 주관식 질문 → 답변 gap 모바일 (피그마: 1409 → 1426 = 17) */
  .gov-result-subjective > .gov-result-field:not(.gov-result-field--answer) {
    margin-bottom: 17px;
  }

  /* 주관식 질문 박스 모바일 (피그마 448:7142): border #e8e8e8 (데스크톱 #d9d9d9와 다름), h=76 */
  .gov-result-subj-question-box {
    border-color: #e8e8e8;
    min-height: 76px;
  }

  .gov-result-subj-question-box .gov-result-text {
    font-size: 14px;
  }

  /* 주관식 답변 박스 모바일: font 14 */
  .gov-result-subjective-answer {
    font-size: 14px;
  }

  /* 주관식 답변 박스 간 gap 모바일 (피그마: 박스1 bottom 1506 / 박스2 top 1515 = 9) */
  .gov-result-subjective-answer.gov-result-answer-gap {
    margin-top: 9px;
  }

  /* ═════════════════════════════════════════════════════════
     [M-9] 서브섹션 헤더 모바일
     ═════════════════════════════════════════════════════════ */

  .gov-result-section-header {
    font-size: 16px;
    padding: 0 14px;
    margin-bottom: 7px;
  }

  /* 이력 헤더 모바일: 텍스트 중앙, 로그보기 버튼은 헤더 위 absolute */
  .gov-result-section-header--with-btn {
    position: relative;
    justify-content: center;
    padding: 0 14px;
  }

  .gov-result-section-header--with-btn .gov-result-log-btn-spacer {
    display: none;
  }

  .gov-result-section-header--with-btn .gov-result-log-btn {
    position: absolute;
    right: 0;
    bottom: 100%;
    margin-bottom: 6px;
  }

  /* 모바일 서브섹션 간 간격 */
  .gov-result-section-margin-top {
    margin-top: 69px;
  }

  /* ═════════════════════════════════════════════════════════
     [M-10] 테이블 모바일 - 2열 wrap
     ═════════════════════════════════════════════════════════ */

  /* 피그마 448:7029 mobile row: label(w=119) + col gap 4 + value(w=219)
     col gap base 5 → 모바일 4로 override */
  .gov-result-table-row {
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
  }

  /* 모바일 라벨 w=119 (피그마 448:7030) */
  .gov-result-table-label {
    width: 119px;
    font-size: 13px;
    padding: 8px 8px;
  }

  /* 모바일 값 w=219 (= 100% - label 119 - gap 4 = 100% - 123) */
  .gov-result-table-value {
    font-size: 15px;
    padding: 8px 12px;
    flex: 0 0 calc(100% - 123px);
    min-width: 0;
  }

  /* 모바일 그룹 간 margin 리셋 */
  .gov-result-table:not(.gov-result-history-table) .gov-result-table-value + .gov-result-table-label {
    margin-left: 0;
  }

  /* 메모 row 모바일 h=119 */
  .gov-result-table-row--memo .gov-result-table-label,
  .gov-result-table-row--memo .gov-result-table-value {
    min-height: 119px;
  }

  /* 이력 테이블 모바일: 2열 wrap (label+value / value+value) */
  .gov-result-history-table .gov-result-table-label,
  .gov-result-history-table .gov-result-table-value {
    width: auto;
    flex: 0 0 calc(50% - 2.5px);
  }

  /* ═════════════════════════════════════════════════════════
     [M-11] 액션 버튼 모바일 (2열 그리드)
     ═════════════════════════════════════════════════════════ */

  /* 액션 영역 모바일 (피그마 448:6983)
     등록자 row bottom 2895 / 첫 action row top 2913 → margin-top 18
     action row 간 row-gap 9 (피그마: row1 bottom 2963 / row2 top 2972)
     같은 row 내 col-gap 10 (피그마: 삭제 right 182 / 수정 left 192) */
  .gov-result-actions {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 9px;
    margin-top: 18px;
  }

  .gov-result-actions-row,
  .gov-result-actions-group {
    display: contents;
  }

  /* 모바일 버튼 (피그마 448:6985): w=165, h=50, radius 4, 17px Bold
     50% 기준 col gap 10 → width = calc((100% - 10px) / 2) = calc(50% - 5px) */
  .gov-result-btn {
    flex: 0 0 calc(50% - 5px);
    width: calc(50% - 5px);
    height: 50px;
    font-size: 17px;
    border-radius: 4px;
  }

  .gov-result-btn--open-request,
  .gov-result-btn--result-request {
    width: calc(50% - 5px);
  }

  /* 답변보기는 모바일에 없음 */
  .gov-result-btn--view-answer {
    display: none;
  }

  /* ═════════════════════════════════════════════════════════
     [M-12] 하단 버튼 모바일
     ═════════════════════════════════════════════════════════ */

  /* 모바일: 흰 페이지 bg(448:6929) bottom 3116 → 목록/승인 row top 3149 = 33
     (container padding-bottom 35로 결과승인요청 row 아래 흰 영역 채우고,
     action-wrap이 33px 아래에 위치 → 총 시각 gap = 35+33 = 68) */
  .gov-result-action-wrap {
    margin-top: 33px;
  }

  .gov-result-bottom-wrap {
    gap: 10px;
  }

  .gov-result-bottom-btn {
    flex: 0 0 165px;
    width: 165px;
    height: 50px;
    font-size: 17px;
  }

}

/* ============================================================
   투표 결과 페이지 (gov_vote_result.html)
   접두사: gov-vr-
============================================================ */

/* ── 투표 패널 컨테이너 ──────────────────────────────────── */
/* 피그마 448:5511: 흰색 bg (350, 246) 1476×2096 ends 2342
   첫 panel top 297 → padding-top 51
   mgmt panel bottom 2266 → padding-bottom 76 */
.gov-vr-container {
  padding: 51px 0 76px;
}

/* ── 투표 패널 ───────────────────────────────────────────── */
/* 피그마 448:5675: panel (546, 297) 1084×626, border 2px #afce35, radius 10
   ⚠ 다른 vote 페이지(create/edit 991)와 달리 vote_result는 1084 wide */
.gov-vr-panel {
  max-width: 1084px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #afce35;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05);
}

/* 패널 헤더 */
/* 피그마 448:5680: 1084×60, "투표" 28 Bold white leading 24 */
.gov-vr-panel-header {
  background: #afce35;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 24px;
  font-weight: 700;
  color: #fff;
  font-family: 'Nanum Gothic', sans-serif;
}

/* 패널 본문 */
/* 피그마 654:532: panel y=348 h=746, header h=60 → body y=408~1094
   info row y=457 → padding-top 49
   field x=694 = panel 546+148 → padding-left 148
   field right x=1482 = panel right 1630-148 → padding-right 148
   마지막 items bottom y=1026, body end y=1094 → padding-bottom 68 */
.gov-vr-panel-body {
  padding: 49px 148px 68px;
}

/* ── 메타 정보 행 ────────────────────────────────────────── */
/* 피그마: info end y=510.65 → schedule y=560 = 49.35 ≈ 50 */
.gov-vr-info-row {
  display: flex;
  gap: 5px;
  margin-bottom: 50px;
}

/* ── 메타 정보 아이템 ────────────────────────────────────── */
.gov-vr-info-item {
  flex: 1;
  min-height: 54px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  display: flex;
  overflow: hidden;
  min-width: 0;
}

/* 라벨 영역 (왼쪽 회색 배경) */
.gov-vr-info-label {
  width: 79px;
  flex-shrink: 0;
  background: #d9d9d9;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px 8px;
}

/* 값 영역 (오른쪽 흰색) */
.gov-vr-info-value {
  flex: 1;
  background: #fff;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #818181;
  display: flex;
  align-items: center;
  padding: 4px 12px;
  min-width: 0;
}

/* ── 필드 행 (라벨 + 인풋) ───────────────────────────────── */
/* 피그마: schedule→title 26, title→items 26 */
.gov-vr-field {
  display: flex;
  align-items: flex-start;
  margin-bottom: 26px;
  padding: 0 73px;
}

.gov-vr-field:last-child {
  margin-bottom: 0;
}

/* ── 라벨 ────────────────────────────────────────────────── */
.gov-vr-label {
  width: 69px;
  flex-shrink: 0;
  font-size: 17px;
  font-weight: 700;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  padding-top: 8px;
  line-height: 1.4;
}

/* ── 인풋 래퍼 ───────────────────────────────────────────── */
.gov-vr-input-wrap {
  flex: 1;
  min-width: 0;
}

/* ── 일정 row (시작일/종료일) — 피그마 654:705 ────────────── */
/* 피그마: input area x=764~1483 (w=719), 각 input 355×50, gap 9 */
.gov-vr-schedule-row {
  display: flex;
  gap: 9px;
  width: 100%;
}

/* 피그마: 50×50 input, border 1px #d9d9d9, radius 10, padding 0 20, icon 20×20 */
.gov-vr-date-wrap {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  height: 50px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  background: #fff;
  padding: 0 20px;
  gap: 12px;
}

.gov-vr-date-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  line-height: 24px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  padding: 0;
}

.gov-vr-date-input::placeholder {
  color: rgba(48, 48, 48, 0.7);
}

.gov-vr-date-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ── 제목 박스 ───────────────────────────────────────────── */
.gov-vr-title-box {
  width: 100%;
  height: 50px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 0 20px;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  background: #fff;
  display: flex;
  align-items: center;
}

/* ── 투표 항목 박스 ──────────────────────────────────────── */
.gov-vr-item-box {
  display: flex;
  align-items: stretch;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* 항목 간 간격 */
.gov-vr-item-box--gap {
  margin-top: 8px;
}

/* 왼쪽 회색 바 */
.gov-vr-item-bar {
  width: 30px;
  flex-shrink: 0;
  background: #d9d9d9;
  border-radius: 8px 0 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 라디오 점 */
.gov-vr-radio-dot {
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid #d9d9d9;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}

/* 항목 콘텐츠 영역 */
.gov-vr-item-content {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
}

/* 항목 텍스트 */
.gov-vr-item-text {
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  margin: 0 0 10px;
  line-height: 1.4;
}

/* 이미지 영역 */
.gov-vr-item-image {
  width: 80px;
  height: 80px;
  background: #f1f1f1;
  border: 1px dashed #f1f1f1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gov-vr-item-image img {
  width: 36px;
  height: 36px;
  opacity: 0.5;
}

/* 투표수 카운트 */
.gov-vr-item-count {
  flex-shrink: 0;
  width: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  padding: 0 8px;
}

/* ── 투표 참여 버튼 영역 ──────────────────────────────────── */
/* 피그마: panel bottom y=923, 첫 row top y=946 → margin-top 23
   row1 ends y=996, row2 y=1006 → row gap 10
   row2 ends y=1056, mgmt panel y=1141 → margin-bottom 85 */
.gov-vr-vote-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 23px;
  margin-bottom: 85px;
}

/* 투표 버튼 행 */
/* 피그마: 투표참여(914,216) → 취소(1139,124) → gap 9 */
.gov-vr-vote-row {
  display: flex;
  gap: 9px;
  align-items: center;
}

/* 투표 버튼 공통 */
.gov-vr-vote-btn {
  border: none;
  cursor: pointer;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

/* 투표참여 */
.gov-vr-vote-btn--join {
  width: 216px;
  height: 50px;
  background: #afce35;
  color: #fff;
}

/* 다시 투표 */
.gov-vr-vote-btn--revote {
  width: 216px;
  height: 50px;
  background: #d46351;
  color: #fff;
}

/* 취소 */
.gov-vr-vote-btn--cancel {
  width: 124px;
  height: 50px;
  background: #fff;
  border: 1px solid #b4b4b4;
  color: #b4b4b4;
}

/* ── 관리정보 패널 ────────────────────────────────────────── */
/* 피그마 448:5519: panel (546, 1141) 1084×1125, border 2px #afce35, radius 10
   ⚠ vote_result는 1084 wide (다른 페이지와 다름) */
.gov-vr-mgmt-panel {
  max-width: 1084px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 85px;
  margin-bottom: 0;
  border: 2px solid #afce35;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* 관리정보 헤더 */
/* 피그마 448:5524: 1084×60, "관리정보" 28 Bold white leading 24 */
.gov-vr-mgmt-header {
  background: #afce35;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 24px;
  font-weight: 700;
  color: #fff;
  font-family: 'Nanum Gothic', sans-serif;
}

/* 관리정보 본문 */
/* 피그마: header end y=1201, 첫 section header y=1266 → padding-top 65
   section x=642 = panel 546+96 → padding-left 96
   section right x=1534 = panel right 1630-96 → padding-right 96
   마지막 result-request btn bottom y=2189, panel bottom y=2266 → padding-bottom 77 */
.gov-vr-mgmt-body {
  padding: 65px 96px 77px;
}

/* ── 관리정보 내 액션 버튼 2행 오른쪽 정렬 ─────────────────── */
.gov-vr-actions-row--right {
  justify-content: flex-end;
}

/* ── 투표 결과 전용 버튼 색상 오버라이드 ─────────────────── */
/* 목록 — border #afce35, 텍스트 #afce35 */
.gov-vr-btn--list {
  border-color: #afce35 !important;
  color: #afce35 !important;
}

/* 저장 — bg #afce35 */
.gov-vr-btn--save {
  background: #afce35 !important;
  color: #fff !important;
  border-color: #afce35 !important;
}

/* ── 하단 버튼 영역 ──────────────────────────────────────── */
/* 피그마 448:5512: (859, 2390) 466×50
   목록(225)+gap16+승인(225)=466 ✓
   container bottom y=2342 → btn top y=2390 → margin-top 48
   base .gov-survey-action-wrap margin-top 61 override 필요 */
.gov-vr-bottom-wrap {
  gap: 16px;
  margin-top: 48px;
}

/* 하단 버튼 공통 */
.gov-vr-bottom-btn {
  width: 225px;
  height: 50px;
  border-radius: 5px;
  font-size: 22px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 목록 — border #afce35, 텍스트 #afce35 */
.gov-vr-bottom-btn--list {
  background: #fff;
  border: 1px solid #afce35;
  color: #afce35;
}

/* 승인 — bg #afce35 */
.gov-vr-bottom-btn--approve {
  background: #afce35;
  color: #fff;
  border: 1px solid #afce35;
}


/* ============================================================
   투표 결과 — 모바일 반응형 (1200px 이하)
============================================================ */
@media (max-width: 1200px) {

  /* 투표 패널 컨테이너 — 모바일: 투명 래퍼 (자식 vote-section + mgmt-panel이 흰배경 제공)
     피그마: title block end web y=158 → white bg 1 top web y=172 → padding-top 14
     mgmt panel ends web y=2850, bottom buttons top web y=2883 → padding-bottom 33 */
  .gov-vr-container {
    margin: 0;
    padding: 14px 0 33px;
    border-radius: 0;
    background: transparent !important;
  }

  /* dao-gov-container 양쪽 margin/padding 완전 제거 (specificity 충돌 방지) */
  .dao-gov-container.gov-vr-container {
    margin: 0;
    padding: 14px 0 33px;
  }

  /* ── 투표 섹션 래퍼 (피그마: 흰색 bg 1 — Rectangle 4401 (0, 216) 374×1143) ──
     panel y=251 → padding-top 35 (251-216)
     buttons row 2 ends y=1312, white bg 1 ends y=1359 → padding-bottom 47
     side: panel x=7, white bg x=0 → padding-left 7, panel right 368, bg right 374 → right 6
     margin-bottom 65 = white bg 2 (mgmt) y=1424 - white bg 1 ends 1359 = dark gap */
  .gov-vr-vote-section {
    background: #fff;
    border-radius: 0;
    padding: 35px 7px 47px;
    margin-bottom: 65px;
  }

  /* 투표 패널 헤더 */
  /* 피그마 448:5838: 361×46.12, "투표" 22 Bold white leading 22.7 */
  .gov-vr-panel-header {
    height: 46px;
    font-size: 22px;
  }

  /* 투표 패널 본문 */
  /* 피그마: header end y=297, info row y=332 → padding-top 35
     field x=21, panel x=7 → padding-left 14
     마지막 항목 bottom y=1121, panel bottom y=1168 → padding-bottom 47 */
  .gov-vr-panel-body {
    padding: 35px 14px 47px;
  }

  /* 메타 정보 행 — 세로 배치 */
  /* 피그마 654:863: info 마지막 item ends y=525, 일정 y=549 → margin-bottom 24 */
  .gov-vr-info-row {
    flex-direction: column;
    gap: 11px;
    margin-bottom: 24px;
  }

  /* 메타 정보 아이템 — 높이 축소 */
  .gov-vr-info-item {
    min-height: 40px;
  }

  /* 라벨 영역 — 너비 축소 */
  .gov-vr-info-label {
    width: 85px;
    font-size: 14px;
  }

  /* 값 영역 */
  .gov-vr-info-value {
    font-size: 14px;
    padding: 4px 10px;
  }

  /* 필드 행 — 세로 배치 */
  .gov-vr-field {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 35px;
    padding: 0;
  }

  /* 라벨 */
  .gov-vr-label {
    width: auto;
    padding-top: 0;
  }

  /* 인풋 래퍼 — 전체폭 */
  .gov-vr-input-wrap {
    width: 100%;
  }

  /* 일정 field — column 배치 (라벨 위, inputs 아래) */
  /* 피그마: label h=24, gap 14, input row h=40, total h=78 */
  .gov-vr-field--schedule {
    gap: 14px;
    margin-bottom: 27px;
  }

  /* 일정 row — 2개 date input 나란히 (모바일) */
  .gov-vr-schedule-row {
    gap: 4px;
  }

  /* date wrap — 모바일 사이즈 */
  /* 피그마: h=40, padding 좌우 15 */
  .gov-vr-date-wrap {
    height: 40px;
    padding: 0 15px;
    gap: 8px;
  }

  /* date input — 모바일 폰트 */
  .gov-vr-date-input {
    font-size: 14px;
  }

  /* 제목 박스 */
  .gov-vr-title-box {
    height: 40px;
    font-size: 14px;
    border-radius: 5px;
  }

  /* 투표 항목 박스 — 높이 확장 */
  .gov-vr-item-box {
  }

  /* 항목 텍스트 */
  .gov-vr-item-text {
    font-size: 14px;
  }

  /* 투표수 카운트 */
  .gov-vr-item-count {
    font-size: 14px;
    width: 50px;
  }

  /* 투표 참여 버튼 영역 */
  .gov-vr-vote-actions {
    margin-top: 24px;
    margin-bottom: 0;
    gap: 8px;
  }

  /* 투표 버튼 공통 */
  .gov-vr-vote-btn {
    font-size: 18px;
  }

  /* 투표참여/다시투표 */
  .gov-vr-vote-btn--join,
  .gov-vr-vote-btn--revote {
    width: 204px;
  }

  /* 취소 */
  .gov-vr-vote-btn--cancel {
    width: 117px;
  }

  /* 관리정보 헤더 */
  .gov-vr-mgmt-header {
    height: 74px;
    font-size: 20px;
  }

  /* 관리정보 본문 — 패딩 제거 (테이블 full-width) */
  .gov-vr-mgmt-body {
    padding: 0;
  }

  /* 관리정보 내 기본정보 섹션 헤더 숨김 (모바일 피그마와 동일) */
  .gov-vr-mgmt-panel .gov-result-section:first-child .gov-result-section-header {
    display: none;
  }

  /* 관리정보 패널 — 피그마: border 없음, 흰배경 독립 영역 */
  .gov-vr-mgmt-panel {
    border: none;
    border-radius: 0;
    background: #fff;
    padding: 44px 15px 24px;
    margin-bottom: 0;
    overflow: visible;
  }

  /* 거버넌스 이력 시간 부분 숨김 */
  .gov-vr-time {
    display: none;
  }

  /* 하단 목록/승인 버튼 — 모바일 사이즈 (피그마: 165px) */
  .gov-vr-bottom-btn {
    width: 165px;
    font-size: 17px;
  }

}


/* ============================================================
   투표 생성 페이지 (gov_vote_create.html)
   접두사: gov-vote-
============================================================ */

/* ── 모바일 전용 제목 (PC에서 hidden) ───────────────────── */
.gov-vote-mobile-title {
  display: none;
}

/* ── 컨테이너 ───────────────────────────────────────────── */
/* 피그마(448:20134): 흰색 bg Rectangle4401 (349, 233) 1476×819,
   panel (592, 315) 991×650 → container→panel top 82, bottom 87 */
.gov-vote-container {
  padding: 82px 0 87px;
}

/* ── 투표 패널 (테두리 있는 박스) ────────────────────────── */
/* 피그마 448:20143: border 1px #afce35, radius 10, 991×650, 중앙 정렬 */
.gov-vote-panel {
  max-width: 991px;
  margin: 0 auto;
  border: 1px solid #afce35;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* 패널 헤더 — 피그마 448:20220: #afce35, 991×60, "투표" 28 Bold white leading 24 */
.gov-vote-panel-header {
  background: #afce35;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 24px;
  font-weight: 700;
  color: #fff;
  font-family: 'Nanum Gothic', sans-serif;
}

/* 패널 본문 */
/* 피그마: 헤더 end y=375, 일정 row y=425 → padding-top 50
   label left x=694 = panel 592 + 102 → padding-left 102
   input row right x=1482 = panel right 1583 - 101 → padding-right 101
   항목추가 btn bottom y=909, panel bottom y=965 → padding-bottom 56 */
.gov-vote-panel-body {
  padding: 50px 101px 56px 102px;
}

/* ── 필드 행 (라벨 + 인풋 수평 배치) ───────────────────── */
/* 피그마: 라벨이 입력/박스의 수직 중앙에 정렬 (40h, 250h 모두) */
.gov-vote-field {
  display: flex;
  align-items: center;
}

/* 일정→제목 row gap: 492-(425+40)=27 */
.gov-vote-field--schedule {
  margin-bottom: 27px;
}

/* 제목→항목 row gap: 569-(492+40)=37 */
.gov-vote-field--title {
  margin-bottom: 37px;
}

/* 항목→항목추가 버튼 gap: 864-(569+250)=45 (wrap padding-top로 제어) */
.gov-vote-field--items {
  margin-bottom: 0;
  align-items: center;
}

/* ── 라벨 ────────────────────────────────────────────────── */
/* 피그마 448:20234/20237/20241: label left x=694, input left x=763 → container 69px
   font 17 Bold #303030 leading 24 */
.gov-vote-label {
  width: 69px;
  flex-shrink: 0;
  font-size: 17px;
  font-weight: 700;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  line-height: 24px;
}

/* ── 일정 row (시작일/종료일) ────────────────────────────── */
/* 피그마: 첫 input x=763, 두 번째 x=1127, 각 355×40 → gap 9 */
.gov-vote-schedule-row {
  display: flex;
  gap: 9px;
  width: 100%;
}

/* 피그마 448:20226/20230: 355×40, bg white, border 1px #e8e8e8, radius 5,
   shadow 0 1px 2px rgba(16,24,40,0.05) */
.gov-vote-date-wrap {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  border: 1px solid #e8e8e8;
  border-radius: 5px;
  background: #fff;
  padding: 0 20px;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.gov-vote-date-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* 피그마 448:20227: 16px Regular rgba(48,48,48,0.7) leading 24 center */
.gov-vote-date-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  line-height: 24px;
  font-family: 'Nanum Gothic', sans-serif;
  color: rgba(48, 48, 48, 0.7);
  text-align: center;
  padding: 0;
}

.gov-vote-date-input::placeholder {
  color: rgba(48, 48, 48, 0.7);
}

/* ── 인풋 래퍼 ───────────────────────────────────────────── */
.gov-vote-input-wrap {
  flex: 1;
  min-width: 0;
}

/* ── 제목 텍스트 인풋 ────────────────────────────────────── */
/* 피그마 448:20238: 719×40, border 1px #d9d9d9, radius 5
   placeholder: 14 Regular #b7b7b7 leading 24, text x=784 (padding-left 20) */
.gov-vote-input {
  width: 100%;
  height: 40px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  padding: 0 20px;
  font-size: 14px;
  line-height: 24px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  background: #fff;
  outline: none;
}

.gov-vote-input::placeholder {
  color: #b7b7b7;
}

.gov-vote-input:focus {
  border-color: #afce35;
}

/* ── 콘텐츠 박스 (큰 항목, 텍스트 + 이미지 업로드) ────────── */
/* 피그마 448:20244: 719×154, border 1px #e8e8e8, radius 10
   placeholder x=788 (padding-left 25 inc border), upload y=616 (from top 47) */
.gov-vote-content-box {
  position: relative;
  width: 100%;
  min-height: 154px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 14px 24px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 8px;
  background: #fff;
}

/* ── 콘텐츠 박스 우상단 X 닫기 버튼 ─────────────────────── */
/* 피그마 448:20256: 23×23, 박스 기준 top 8 right 9 */
.gov-vote-box-close {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 23px;
  height: 23px;
  background: #f08080;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
}

/* ── 텍스트 입력 영역 (contenteditable) ──────────────────── */
/* 피그마 448:20245: placeholder "텍스트 또는 이미지 등록" 14 Regular #b7b7b7 leading 24
   text y=584, upload y=616 → text→upload gap 32-텍스트 h 23 = 9 */
.gov-vote-editable {
  min-height: 23px;
  outline: none;
  font-size: 14px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  line-height: 24px;
  margin-bottom: 9px;
  word-break: break-word;
  width: 100%;
}

/* 비어 있을 때 플레이스홀더 표시 */
.gov-vote-editable:empty::before {
  content: attr(data-placeholder);
  color: #b7b7b7;
  pointer-events: none;
}

/* ── 이미지 업로드 래퍼 ───────────────────────────────────── */
.gov-vote-upload-wrap {
  position: relative;
  display: inline-block;
}

/* ── 업로드 박스 X 닫기 버튼 ─────────────────────────────── */
.gov-vote-upload-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  background: #f08080;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
}

/* ── 이미지 업로드 박스 ──────────────────────────────────── */
/* 피그마 448:20246: 83×86 Group 25 (upload icon 포함 이미지) */
.gov-vote-upload {
  width: 83px;
  height: 86px;
  background: #f1f1f1;
  border: 2px dashed #d0d0d0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.gov-vote-upload img {
  width: 36px;
  height: 36px;
  opacity: 0.6;
}

/* ── 작은 항목 인풋 행 ───────────────────────────────────── */
/* 피그마: Item1 bottom 723, Item2 top 731 → gap 8 */
.gov-vote-item-row {
  position: relative;
  width: 100%;
  margin-bottom: 8px;
}

.gov-vote-item-row:last-child {
  margin-bottom: 0;
}

/* 작은 항목 인풋 */
/* 피그마 448:20259/20264: 719×40, border 1px #d9d9d9, radius 10, placeholder x=784 (pl 20) */
.gov-vote-item-input {
  width: 100%;
  height: 40px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 0 45px 0 20px;
  font-size: 14px;
  line-height: 24px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  background: #fff;
  outline: none;
}

.gov-vote-item-input::placeholder {
  color: #b7b7b7;
}

.gov-vote-item-input:focus {
  border-color: #afce35;
}

/* 작은 항목 행 X 닫기 버튼 */
/* 피그마 448:20260/20265: 23×23, row 기준 top 9 right 9 (수직 중앙) */
.gov-vote-item-close {
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  width: 23px;
  height: 23px;
  background: #f08080;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* ── 항목 추가 버튼 래퍼 ─────────────────────────────────── */
/* 피그마: 항목 row bottom y=819, 항목추가 btn top y=864 → gap 45 */
.gov-vote-add-item-wrap {
  display: flex;
  justify-content: center;
  padding-top: 45px;
}

/* ── 항목 추가 버튼 ──────────────────────────────────────── */
/* 피그마 448:20222: 154×45 #afce35 radius 4, text Bold 18 white line-height 24 */
.gov-vote-add-item-btn {
  width: 154px;
  height: 45px;
  background: #afce35;
  border: none;
  border-radius: 4px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  color: #fff;
  cursor: pointer;
}

/* ── 버튼 공통 베이스 ────────────────────────────────────── */
.gov-vote-btn {
  border: none;
  cursor: pointer;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 등록 버튼 */
/* 피그마 448:20139: 215×50 #afce35 radius 5, text Bold 22 white line-height 18 uppercase */
.gov-vote-btn--submit {
  width: 215px;
  height: 50px;
  background: #afce35;
  border-radius: 5px;
  font-size: 22px;
  line-height: 18px;
  color: #fff;
  text-transform: uppercase;
}

/* 취소 버튼 */
/* 피그마 448:20141: 154×50 white, border 1px #b4b4b4 radius 5, text Bold 22 #b4b4b4 line-height 18 uppercase */
.gov-vote-btn--cancel {
  width: 154px;
  height: 50px;
  background: #fff;
  border: 1px solid #b4b4b4;
  border-radius: 5px;
  font-size: 22px;
  line-height: 18px;
  color: #b4b4b4;
  text-transform: uppercase;
}

/* ── 하단 등록/취소 래퍼 (컨테이너 밖) ─────────────────── */
/* 피그마: 등록 right x=1131, 취소 left x=1144 → gap 13;
   컨테이너 bottom y=1052, 버튼 top y=1081 → margin-top 29 */
.gov-vote-action-wrap {
  display: flex;
  justify-content: center;
  gap: 13px;
  margin-top: 29px;
}


/* ============================================================
   투표 생성 — 1201~1500 보강 (데스크톱 타이틀 숨김 + main padding 리셋)
   피그마 ref: 448:20003 (mobile)
   — 1201~1500 구간에서 mobile-title가 아직 display:none이면서 main base padding
     74 30 100이 남아 데스크톱 타이틀이 좌측 30 오프셋으로 렌더되는 문제 수정
   — gov_survey와 동일한 패턴. :has() 스코프로 타 gov 페이지 영향 없음
============================================================ */
@media (max-width: 1500px) {

  /* 데스크톱 타이틀 숨김 */
  main:has(.gov-vote-mobile-title) .dao-gov-title {
    display: none;
  }

  /* main padding 리셋 (가로 0) + 상단 36 하단 48 */
  main.dao-gov-main:has(.gov-vote-mobile-title) {
    padding: 36px 0 48px;
  }

  /* 모바일 타이틀 표시 (1201~1500 구간) */
  .gov-vote-mobile-title {
    display: block;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Nanum Gothic', sans-serif;
    color: #fff;
    line-height: 1.4;
    margin: 0;
    padding: 12px 0 34px;
  }

}


/* ============================================================
   투표 생성 — 모바일 반응형 (1200px 이하)
   피그마 ref: 448:20003 (375×1495)
============================================================ */
@media (max-width: 1200px) {

  /* 메인 padding-bottom 오버라이드 — 이 페이지만 적용 (:has scope)
     피그마: 등록/취소 bottom y=1125, footer top y=1173 → gap 48
     base .dao-gov-main (@1200) padding-bottom 120 → 72px 초과 */
  main.dao-gov-main:has(.gov-vote-mobile-title) {
    padding-bottom: 48px;
  }

  /* 모바일 전용 제목 표시 */
  /* 피그마 448:20065: "CoReset 거버넌스" 20px Bold white (검정 배경 위)
     Figma y=148 (status bar 44 포함) → web y=104
     layout m-t 56 + main p-t 36 + title p-t 12 = 104 ✓
     title h 20 ends 124, container top at Figma y=202 → web y=158
     124 + title p-b 34 = 158 ✓ */
  .gov-vote-mobile-title {
    display: block;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Nanum Gothic', sans-serif;
    color: #fff;
    line-height: 1.4;
    margin: 0;
    padding: 12px 0 34px;
  }

  /* 컨테이너 — 모바일 전체폭 */
  /* 피그마 Rectangle4401(흰색): x=0 y=202 374×830
     panel x=7 y=250 → top 48, left 7, right 7, bottom 52 */
  .gov-vote-container {
    margin: 0;
    padding: 48px 7px 52px;
    border-radius: 0;
  }

  /* 투표 패널 */
  /* 피그마 448:20014: border 2px #afce35 (데스크톱 1px와 다름!) */
  .gov-vote-panel {
    max-width: none;
    margin: 0;
    border-width: 2px;
  }

  /* 패널 헤더 */
  /* 피그마 448:20018: #afce35 361×56.15 ≈ 56, "투표" 22 Bold white leading 24 */
  .gov-vote-panel-header {
    height: 56px;
    font-size: 22px;
  }

  /* 패널 본문 */
  /* 피그마: 헤더 end y=306, 일정 label y=350 → top 44
     label/field left x=21, panel left x=7 → left 14
     add-item btn bottom y=938, panel bottom y=980 → bottom 42 */
  .gov-vote-panel-body {
    padding: 44px 14px 42px;
  }

  /* 필드 행 — 세로 배치 */
  .gov-vote-field {
    flex-direction: column;
    align-items: stretch;
  }

  /* 일정 field: row→next 30, label→row 14 */
  /* 피그마: 일정 field h=78 (label 24 + gap 14 + row 40), 다음 field y=458 */
  .gov-vote-field--schedule {
    margin-bottom: 30px;
    gap: 14px;
  }

  /* 제목 field: row→next 30, label→input 5 */
  /* 피그마: 제목 field h=69 (label 24 + gap 5 + input 40), 다음 field y=557 */
  .gov-vote-field--title {
    margin-bottom: 30px;
    gap: 5px;
  }

  /* 항목 field: label→items 6 */
  /* 피그마: 항목 label y=557, item1 y=587 → gap 6 */
  .gov-vote-field--items {
    gap: 6px;
  }

  /* 라벨 */
  .gov-vote-label {
    width: auto;
  }

  /* 모바일 일정 row — 2개 date input, gap 4 */
  /* 피그마: 1st input x=24, 2nd x=193 (각 165w) → gap 4 */
  .gov-vote-schedule-row {
    gap: 4px;
  }

  /* date wrap padding */
  /* 피그마 design_context: px-15 py-10 */
  .gov-vote-date-wrap {
    padding: 0 15px;
    gap: 8px;
  }

  /* 인풋 래퍼 — 모바일 전체폭 */
  .gov-vote-input-wrap {
    width: 100%;
    flex: 0 1 auto;
  }

  /* 콘텐츠 박스 (큰 항목) */
  /* 피그마 448:20035: 334×175, border 1px #e8e8e8, radius 10
     text x=46 y=619 → padding-top 31 padding-left 24 (border 1 제외)
     upload y=644 ends 730, box ends 762 → padding-bottom 31 */
  .gov-vote-content-box {
    min-height: 175px;
    padding: 31px 25px 31px 24px;
  }

  /* 콘텐츠 박스 X 닫기 버튼 */
  /* 피그마 448:20048: box 기준 top 9 right 7, 23×23 */
  .gov-vote-box-close {
    top: 9px;
    right: 7px;
  }

  /* 작은 항목 인풋 */
  /* 피그마 448:20029/20032: 334×40, border 1px #d9d9d9, radius 5 (데스크톱 10과 다름!)
     placeholder x=40 → padding-left 19 (21+19=40, border 1) */
  .gov-vote-item-input {
    border-radius: 5px;
    padding: 0 40px 0 19px;
  }

  /* 작은 항목 row margin-bottom */
  /* 피그마: 769-(587+175)=7 */
  .gov-vote-item-row {
    margin-bottom: 7px;
  }

  /* 작은 항목 close btn */
  /* 피그마 448:20050/20052: row 기준 top 8 right 7, 23×23 */
  .gov-vote-item-close {
    right: 7px;
  }

  /* 항목 추가 버튼 래퍼 */
  /* 피그마: item3 bottom y=856, btn top y=893 → gap 37 */
  .gov-vote-add-item-wrap {
    padding-top: 37px;
  }

  /* 등록 버튼 */
  /* 피그마 448:20010: 185×50 bg #afce35(alpha 0.89) radius 5, text 20 Bold white leading 18 uppercase */
  .gov-vote-btn--submit {
    width: 185px;
    font-size: 20px;
  }

  /* 취소 버튼 */
  /* 피그마 448:20012: 135×50 white border 1 #b4b4b4 radius 5, text 20 Bold #b4b4b4 leading 18 uppercase */
  .gov-vote-btn--cancel {
    width: 135px;
    font-size: 20px;
  }

  /* 하단 액션 래퍼 */
  /* 피그마: 등록 right=206, 취소 left=218 → gap 12
     container bottom y=1032, 버튼 top y=1075 → margin-top 43 */
  .gov-vote-action-wrap {
    gap: 12px;
    margin-top: 43px;
  }

}


/* ============================================================
   투표 수정 페이지 (gov_vote_edit.html)
   접두사: gov-ve-
============================================================ */

/* ── 모바일 전용 제목 (PC에서 hidden) ───────────────────── */
.gov-ve-mobile-title {
  display: none;
}

/* ── 컨테이너 ───────────────────────────────────────────── */
/* 피그마 448:7833: 흰색 bg (349, 233) 1476×971
   panel (592, 323) 991×593 → container→panel top 90
   action-wrap bottom y=1106, container bottom y=1204 → bottom 98 */
.gov-ve-container {
  padding: 90px 0 98px;
}

/* ── 투표 패널 (테두리 있는 박스) ────────────────────────── */
/* 피그마 448:7835: border 2px #afce35 radius 10, 991×593, 중앙 정렬 */
.gov-ve-panel {
  max-width: 991px;
  margin: 0 auto;
  border: 2px solid #afce35;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* 패널 헤더 — 피그마 448:7864: #afce35, 991×60, "투표" 28 Bold white leading 24 */
.gov-ve-panel-header {
  background: #afce35;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 24px;
  font-weight: 700;
  color: #fff;
  font-family: 'Nanum Gothic', sans-serif;
}

/* 패널 본문 */
/* 피그마: 헤더 end y=383, 제목 row y=436 → top 53
   label left x=694=panel 592+102 → left 102
   input right x=1482=panel right 1583-101 → right 101
   항목추가 btn bottom y=880, panel bottom y=916 → bottom 36 */
.gov-ve-panel-body {
  padding: 53px 101px 36px 102px;
}

/* ── 필드 행 (라벨 + 인풋 수평 배치) ───────────────────── */
/* 라벨이 입력 박스의 수직 중앙에 정렬 */
.gov-ve-field {
  display: flex;
  align-items: center;
}

/* 제목→항목 gap: 495-(436+40)=19 */
.gov-ve-field--title {
  margin-bottom: 19px;
}

/* 항목 field: 항목 label 세로 중앙 (row h=314, label y=639 center=651 = row 495+157-... 중앙 정렬)
   margin-bottom 0 (add-item-wrap padding으로 제어) */
.gov-ve-field--items {
  align-items: center;
  margin-bottom: 0;
}

/* ── 라벨 ────────────────────────────────────────────────── */
/* 피그마 448:7869/7873: 17 Bold #303030 leading 24, width 69 (label left x=694, input left x=763) */
.gov-ve-label {
  width: 69px;
  flex-shrink: 0;
  font-size: 17px;
  font-weight: 700;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  line-height: 24px;
}

/* ── 인풋 래퍼 ───────────────────────────────────────────── */
.gov-ve-input-wrap {
  flex: 1;
  min-width: 0;
}

/* ── 제목 텍스트 인풋 ────────────────────────────────────── */
/* 피그마 448:7870: 719×40, border 1px #d9d9d9, radius 10
   placeholder x=784 (padding-left 21 with border 1), 14 Regular #b7b7b7 leading 24 */
.gov-ve-input {
  width: 100%;
  height: 40px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 0 20px;
  font-size: 14px;
  line-height: 24px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  background: #fff;
  outline: none;
}

.gov-ve-input::placeholder {
  color: #b7b7b7;
}

.gov-ve-input:focus {
  border-color: #afce35;
}

/* ── 콘텐츠 박스 (항목, 텍스트 + 이미지 업로드) ────────── */
/* 피그마 448:7876: 719×154, border 1px #e8e8e8, radius 10
   placeholder y=516 (pad-top 20 + border 1), text x=788 (pad-left 24 + border 1)
   upload y=542, upload ends 628, box ends 649 → pad-bottom 20 */
.gov-ve-content-box {
  position: relative;
  width: 100%;
  min-height: 154px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 6px;
  background: #fff;
}

/* Item1→Item2 gap 6 (655-649=6) */
.gov-ve-content-box:last-child {
  margin-bottom: 0;
}

/* ── 콘텐츠 박스 우상단 X 닫기 버튼 ─────────────────────── */
/* 피그마 448:7889: 23×23, 박스 기준 top 11(506-495) right 10(1482-1449-23) */
.gov-ve-box-close {
  position: absolute;
  top: 11px;
  right: 10px;
  width: 23px;
  height: 23px;
  background: #f08080;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
}

/* ── 텍스트 입력 영역 (contenteditable) ──────────────────── */
/* 피그마 448:7878: placeholder "투표 항목 001" 14 Regular #b7b7b7 leading 24
   text y=516 h=23, upload y=542 → text→upload gap 3 */
.gov-ve-editable {
  min-height: 23px;
  outline: none;
  font-size: 14px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  line-height: 24px;
  margin-bottom: 3px;
  word-break: break-word;
  width: 100%;
}

.gov-ve-editable:empty::before {
  content: attr(data-placeholder);
  color: #b7b7b7;
  pointer-events: none;
}

/* ── 이미지 업로드 래퍼 ───────────────────────────────────── */
.gov-ve-upload-wrap {
  position: relative;
  display: inline-block;
}

/* ── 업로드 박스 X 닫기 버튼 ─────────────────────────────── */
.gov-ve-upload-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  background: #f08080;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
}

/* ── 이미지 업로드 박스 ──────────────────────────────────── */
/* 피그마 448:7879: 83×86 Group 25 */
.gov-ve-upload {
  width: 83px;
  height: 86px;
  background: #f1f1f1;
  border: 2px dashed #d0d0d0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.gov-ve-upload img {
  width: 36px;
  height: 36px;
  opacity: 0.6;
}

/* ── 항목 추가 버튼 래퍼 ─────────────────────────────────── */
/* 피그마: Item2 bottom y=809, 항목추가 btn top y=835 → gap 26 */
.gov-ve-add-item-wrap {
  display: flex;
  justify-content: center;
  padding-top: 26px;
}

/* ── 항목 추가 버튼 ──────────────────────────────────────── */
/* 피그마 448:7866: 154×45 #afce35 radius 4, text 18 Bold white leading 24 */
.gov-ve-add-item-btn {
  width: 154px;
  height: 45px;
  background: #afce35;
  border: none;
  border-radius: 4px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  color: #fff;
  cursor: pointer;
}

/* ── 상태 정보 행 ─────────────────────────────────────────── */
/* 피그마 448:7836: (592, 942) 991×50
   panel bottom 916 → margin-top 26
   좌우 panel과 동일 폭 (max-width 991 auto center) */
.gov-ve-status-row {
  display: flex;
  gap: 11px;
  margin: 26px auto 0;
  max-width: 991px;
}

/* 상태 정보 필드 (투표상태 / 작성일시) */
/* 피그마 448:7838/7845: 490×50, border 1px #d9d9d9, radius 5, bg white */
.gov-ve-status-field {
  flex: 1;
  height: 50px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #fff;
}

/* 라벨 영역 (회색 배경) */
/* 피그마 448:7841: 91.68×50 bg #d9d9d9
   text "투표상태" 16 Bold rgba(48,48,48,0.7) leading 24 centered */
.gov-ve-status-label {
  flex-shrink: 0;
  width: 92px;
  height: 100%;
  background: #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  color: rgba(48, 48, 48, 0.7);
}

/* 값 영역 */
/* 피그마: value x=704 (label bg ends x=683.68, value starts 704 → gap ~20)
   16 Regular #818181 leading 24 */
.gov-ve-status-value {
  padding-left: 20px;
  font-size: 16px;
  line-height: 24px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #818181;
}

/* ── 버튼 공통 베이스 ────────────────────────────────────── */
.gov-ve-btn {
  border: none;
  cursor: pointer;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

/* 수정 버튼 */
/* 피그마 448:7858: 185×50 white, border 1px #afce35 radius 5, text 22 Bold #afce35 leading 18 uppercase */
.gov-ve-btn--edit {
  width: 185px;
  height: 50px;
  border: 1px solid #afce35;
  border-radius: 5px;
  font-size: 22px;
  line-height: 18px;
  color: #afce35;
  text-transform: uppercase;
}

/* 취소 버튼 */
/* 피그마 448:7854: 185×50 white, border 1px #b4b4b4 radius 5, text 22 Bold #b4b4b4 leading 18 uppercase */
.gov-ve-btn--cancel {
  width: 185px;
  height: 50px;
  border: 1px solid #b4b4b4;
  border-radius: 5px;
  font-size: 22px;
  line-height: 18px;
  color: #b4b4b4;
  text-transform: uppercase;
}

/* ── 하단 수정/취소 래퍼 ─────────────────────────────────── */
/* 피그마: 수정 right=1082, 취소 left=1093 → gap 11
   status row bottom 992, btn top 1056 → margin-top 64 */
.gov-ve-action-wrap {
  display: flex;
  justify-content: center;
  gap: 11px;
  margin-top: 64px;
}


/* ============================================================
   투표 수정 — 1201~1500 보강 (데스크톱 타이틀 숨김 + main padding 리셋)
   피그마 ref: 448:7690 (mobile)
   ※ gov_vote_create와 동일한 패턴 (:has() 스코프 → 타 페이지 영향 없음)
============================================================ */
@media (max-width: 1500px) {

  /* 데스크톱 타이틀 숨김 */
  main:has(.gov-ve-mobile-title) .dao-gov-title {
    display: none;
  }

  /* main padding 리셋 (가로 0) + 상단 36, 하단 39 (피그마 container bottom 1207, footer top 1246 → gap 39) */
  main.dao-gov-main:has(.gov-ve-mobile-title) {
    padding: 36px 0 39px;
  }

  /* 모바일 타이틀 표시 */
  /* 피그마 448:7742: y=148 (status bar 44 포함) → web y=104
     layout m-t 56 + main p-t 36 + title p-t 12 = 104 ✓
     title h 20 ends 124, container top at Figma y=202 → web y=158
     124 + title p-b 34 = 158 ✓ */
  .gov-ve-mobile-title {
    display: block;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Nanum Gothic', sans-serif;
    color: #fff;
    line-height: 1.4;
    margin: 0;
    padding: 12px 0 34px;
  }

}


/* ============================================================
   투표 수정 — 모바일 반응형 (1200px 이하)
   피그마 ref: 448:7690 (375×1581 including status bar)
============================================================ */
@media (max-width: 1200px) {

  /* 컨테이너 — 모바일 전체폭 */
  /* 피그마 Rectangle4401: (0, 202) 374×1005, ends 1207
     panel (7, 250) → top 48, left 7
     action-wrap ends 1155, container ends 1207 → bottom 52 */
  .gov-ve-container {
    margin: 0;
    padding: 48px 7px 52px;
    border-radius: 0;
  }

  /* 투표 패널 */
  /* 피그마 448:7695: border 2px #afce35 radius 10, 361×682 */
  .gov-ve-panel {
    max-width: none;
    margin: 0;
    border-width: 2px;
  }

  /* 패널 헤더 */
  /* 피그마 448:7699: 361×69.22 ≈ 69, "투표" 22 Bold white leading 24 */
  .gov-ve-panel-header {
    height: 69px;
    font-size: 22px;
  }

  /* 패널 본문 */
  /* 피그마: header end y=319, 제목 label y=352 → top 33
     label/items left x=24, panel left x=7 → left 17
     items right x=358, panel right x=368 → right 10
     항목추가 btn bottom y=904, panel bottom y=932 → bottom 28 */
  .gov-ve-panel-body {
    padding: 33px 10px 28px 17px;
  }

  /* 필드 행 — 세로 배치 */
  .gov-ve-field {
    flex-direction: column;
    align-items: stretch;
  }

  /* 제목 field: label→input 5, field→next 26 */
  /* 피그마: 제목 field y=352 h=69, 다음 항목 y=447 → field→field gap 26 */
  .gov-ve-field--title {
    margin-bottom: 26px;
    gap: 5px;
  }

  /* 항목 field: label→items 6 */
  /* 피그마: 항목 label y=447 ends 471, item1 y=477 → gap 6 */
  .gov-ve-field--items {
    gap: 6px;
  }

  /* 라벨 */
  .gov-ve-label {
    width: auto;
  }

  /* 인풋 래퍼 — 모바일 전체폭 */
  .gov-ve-input-wrap {
    width: 100%;
    flex: 0 1 auto;
  }

  /* 제목 인풋 */
  /* 피그마 448:7706: 334×40, border 1px #d9d9d9, radius 5 (데스크톱 10과 다름!)
     placeholder x=43 → padding-left 18 (43-24-1=18, but 19~20로 반올림) */
  .gov-ve-input {
    border-radius: 5px;
    padding: 0 19px;
  }

  /* 콘텐츠 박스 (항목) */
  /* 피그마 448:7710: 334×175, border 1px #e8e8e8, radius 10
     text x=49 y=509 → padding-top 32 padding-left 24 (border 1 제외)
     upload y=536 ends 622, box ends 652 → padding-bottom 30 */
  .gov-ve-content-box {
    min-height: 175px;
    padding: 32px 25px 30px 24px;
    margin-bottom: 6px;
  }

  /* 콘텐츠 박스 X 닫기 버튼 */
  /* 피그마 448:7711: box 기준 top 9(486-477) right 8(358-327-23), 23×23 */
  .gov-ve-box-close {
    top: 9px;
    right: 8px;
  }

  /* 모바일: 플레이스홀더 텍스트 ↔ 업로드 이미지 간격 증가 (사용자 요청) */
  .gov-ve-editable {
    margin-bottom: 12px;
  }

  /* 항목 추가 버튼 래퍼 */
  /* 피그마: item2 bottom y=833, btn top y=859 → gap 26 */
  .gov-ve-add-item-wrap {
    padding-top: 26px;
  }

  /* 상태 정보 행 — 세로 스택 */
  /* 피그마: 항목추가 btn bottom 904, status1 y=945 → margin-top 41
     status1 ends 995, status2 y=1006 → gap 11 (status field margin-bottom) */
  .gov-ve-status-row {
    flex-direction: column;
    gap: 0;
    margin: 41px 0 0;
    max-width: none;
  }

  /* 상태 정보 필드 */
  /* 피그마 448:7818/7825: 360×50 border 1 #d9d9d9 radius 5 */
  .gov-ve-status-field {
    width: 100%;
    flex: none;
    border-radius: 5px;
    margin-bottom: 11px;
  }

  .gov-ve-status-field:last-child {
    margin-bottom: 0;
  }

  /* 상태 라벨 폭 */
  /* 피그마 448:7821: 91.68 ≈ 92 */
  .gov-ve-status-label {
    width: 92px;
  }

  /* 상태 값 padding */
  /* 피그마: label bg ends x=98.68, value x=119 → gap 20 */
  .gov-ve-status-value {
    padding-left: 20px;
  }

  /* 수정 버튼 */
  /* 피그마 448:7815: 165×50, border 1 #afce35 radius 5, text 20 Bold #afce35 leading 18 uppercase */
  .gov-ve-btn--edit {
    width: 165px;
    font-size: 20px;
  }

  /* 취소 버튼 */
  /* 피그마 448:7813: 165×50, border 1 #b4b4b4 radius 5, text 20 Bold #b4b4b4 leading 18 uppercase */
  .gov-ve-btn--cancel {
    width: 165px;
    font-size: 20px;
  }

  /* 하단 액션 래퍼 */
  /* 피그마: status2 ends 1056, btn y=1105 → margin-top 49
     수정 right=182, 취소 left=192 → gap 10 */
  .gov-ve-action-wrap {
    gap: 10px;
    margin-top: 49px;
  }

}


/* ============================================================
   CoReset 참여 페이지 (crp- 접두사)
============================================================ */

/* 메인 영역 — 피그마: 좌72/우95, 아래 60 (버튼→footer gap) */
.crp-main {
  padding-top: 64px;
  padding-left: 72px;
  padding-right: 95px;
  padding-bottom: 60px;
}

/* 페이지 제목 — 피그마 NanumGothic ExtraBold 34 leading 48 */
.crp-page-title {
  font-size: 34px;
  font-weight: 800;
  color: var(--dao-white);
  margin-bottom: 24px;
  line-height: 48px;
}

/* ── 통계 카드 ─────────────────────────────────────────── */

.crp-analytics-row {
  --bs-gutter-x: 18px;
  /* 카드~검색 행 간격 87px (피그마: y:371→y:458) */
  margin-bottom: 87px;
}

.crp-card {
  background: var(--dao-card-bg);
  border-radius: 10px;
  box-shadow: 0 3.5px 5.5px rgba(0, 0, 0, 0.02);
  height: 147px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
  gap: 12px;
}

.crp-card-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.crp-card-icon {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3.5px 5.5px rgba(0, 0, 0, 0.02);
}

.crp-card-icon img {
  width: 45px;
  height: 45px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.crp-card-label {
  font-size: 20px;
  font-weight: 700;
  line-height: 36px;
  color: var(--dao-white);
  white-space: nowrap;
}

.crp-card-value-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.crp-card-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--dao-white);
  white-space: nowrap;
  line-height: 1.4;
}

.crp-card-unit {
  font-size: 20px;
  font-weight: 700;
  color: var(--dao-white);
  white-space: nowrap;
}

/* ── 검색 행 (다크 배경 위) ─────────────────────────────── */

.crp-search-section {
  margin-bottom: 0;
}

/* 검색 행 (row1) — flex, PC에서 order 사용 */
.crp-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
  padding: 0 47px;
}

/* 모바일 sub-row wrapper — 데스크톱에서는 display:contents로 투명 처리 */
.crp-search-row-1,
.crp-search-row-2,
.crp-search-row-3 {
  display: contents;
}

/* [수정 #4] PC에서 날짜를 맨 뒤로 보내는 order 값
   피그마 1920 검색 행 간격: 거래종류↔거래ID 12, 거래ID↔input 15, input↔검색 13, 검색↔시작일 24, 시작일↔종료일 7
   기본 gap:12 + 개별 margin-left로 보정 */
.crp-sel-type   { order: 1; }
.crp-sel-id     { order: 2; }
.crp-search-input { order: 3; margin-left: 3px; }   /* 15-12 */
.crp-search-btn   { order: 4; margin-left: 1px; }   /* 13-12 */
.crp-date-start   { order: 5; margin-left: 12px; }  /* 24-12 */
.crp-date-end     { order: 6; margin-left: -5px; }  /* 7-12 */

/* ── 커스텀 드롭다운 ────────────────────────────────────────── */
.crp-dropdown {
  position: relative;
  flex-shrink: 0;
}

/* 기본 삼각형 마커 제거 */
.crp-dropdown summary {
  list-style: none;
}
.crp-dropdown summary::-webkit-details-marker {
  display: none;
}

/* 토글 버튼 */
.crp-dropdown-toggle {
  height: 50px;
  width: 100%;
  border: 1px solid #f1f1f1;
  border-radius: 8px;
  background: var(--dao-white);
  color: rgba(48, 48, 48, 0.7);
  font-size: 17px;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.crp-dropdown-toggle:hover {
  border-color: #d0d0d0;
}

.crp-dropdown[open] .crp-dropdown-toggle {
  border-color: #3eb5c9;
  box-shadow: 0 0 0 3px rgba(62, 181, 201, 0.12);
}

.crp-dropdown-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 화살표 아이콘 — 피그마 24×24 */
.crp-dropdown-chevron {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  opacity: 0.5;
}

.crp-dropdown[open] .crp-dropdown-chevron {
  transform: rotate(180deg);
}

/* 드롭다운 메뉴 */
.crp-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  min-width: 140px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 6px 0;
  margin: 0;
  z-index: 100;
  animation: crp-dropdown-slide 0.2s ease;
}

@keyframes crp-dropdown-slide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 메뉴 항목 */
.crp-dropdown-item {
  padding: 10px 14px;
  font-size: 15px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #505364;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.crp-dropdown-item:hover {
  background: #f5f7fa;
  color: #303030;
}

/* 선택된 항목 */
.crp-dropdown-item--active {
  color: #3eb5c9;
  font-weight: 700;
}

.crp-dropdown-item--active::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: #3eb5c9;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

/* 크기 변형 */
.crp-dropdown--180 {
  width: 180px;
}

.crp-dropdown--150 {
  width: 150px;
}

/* 정��� 드롭다운 — 우측 정렬 */
.crp-dropdown--sort {
  width: 220px;
  margin-left: auto;
}

/* 텍스트 검색 입력 */
.crp-search-input {
  flex: 1;
  height: 50px;
  border: 1px solid #f1f1f1;
  border-radius: 8px;
  background: var(--dao-white);
  font-size: 17px;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
  outline: none;
  min-width: 0;
}

/* 검색 버튼 — 피그마 Regular 17 leading 24 */
.crp-search-btn {
  width: 163px;
  height: 50px;
  background: var(--dao-card-bg);
  color: var(--dao-white);
  border: none;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
}

/* [수정 #8] 날짜 래퍼 — 아이콘(좌) + 텍스트(우) */
.crp-date-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 159px;
  height: 50px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: var(--dao-white);
  padding: 0 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  flex-shrink: 0;
}

.crp-date-input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: rgba(48, 48, 48, 0.7);
  background: transparent;
  padding: 0;
  text-align: center;
  min-width: 0;
}

.crp-date-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ── 데이터 테이블 섹션 (흰색 배경) ────────────────────── */

/* [수정 #1, #9] 필터 행이 테이블 섹션 안에 위치 */
.crp-table-section {
  background: var(--dao-white);
  border-radius: 10px;
  margin-top: 16px;
  margin-bottom: 49px;
  overflow: hidden;
}

/* [수정 #9] 필터 행 (흰색 박스 내부)
   피그마 1920: 카드 x=350 → 상태 x=397 (pad-L 47) / 카드 right 1825 → 수량많은순 right 1782 (pad-R 43)
   드롭다운 간격 9 (556-397-150=9) */
.crp-filter-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 20px 43px 23px 47px;
}

/* 정렬 드롭다운 — 기존 select (미사용, crp-dropdown--sort로 대체) */

.crp-table-wrap {
  overflow-x: auto;
}

.crp-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1100px;
}

.crp-table thead tr {
  background: var(--dao-card-bg);
}

/* 피그마 1920: 헤더 컨테이너 h=99.77, 텍스트 중앙 정렬
   height 고정 + horizontal padding으로 구현 (2줄 상태진행일시도 동일 height 내 중앙) */
.crp-table thead th {
  color: var(--dao-white);
  font-size: 17px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  height: 99.77px;
  padding: 0 8px;
  text-align: center;
  vertical-align: middle;
  border: none;
  white-space: nowrap;
  line-height: 22px;
}

/* 상태 진행일시 컬럼만 피그마 leading 18 */
.crp-table thead th:nth-child(8) {
  line-height: 18px;
}

.crp-table tbody tr {
  border-bottom: none;
}

.crp-table tbody tr:last-child {
  border-bottom: none;
}

/* [수정 #3] 홀짝 행 스트라이프 */
.crp-table tbody tr:nth-child(even) {
  background: #f8f8f8;
}

.crp-table tbody td {
  padding: 15px 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  text-align: center;
  vertical-align: middle;
  border: none;
  white-space: nowrap;
}

/* 뱃지 공통 — 피그마: 사각형(radius 0), Regular 16, leading 20, padding 없음 */
.crp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0;
  line-height: 20px;
  border-radius: 0;
}

/* 매입하기 신청 뱃지 — 피그마 60.67×28.31, 고정 너비 */
.crp-badge--buy {
  background: #3eb5c9;
  color: var(--dao-white);
  width: 61px;
  height: 28px;
  flex-shrink: 0;
}

/* 상세 보기 뱃지 */
.crp-badge--detail {
  background: #303030;
  color: var(--dao-white);
  width: 61px;
  height: 28px;
  flex-shrink: 0;
}

/* ── 하단 액션 버튼 ─────────────────────────────────────── */

.crp-action-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 0;
}

.crp-btn {
  width: 241px;
  height: 50px;
  border: none;
  border-radius: 4px;
  font-size: 22px;
  font-weight: 500;
  line-height: 24px;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crp-btn--sell {
  background: #3eb5c9;
  color: var(--dao-white);
}

.crp-btn--view {
  background: #afce35;
  color: #272729;
}

/* ── 반응형 (≤ 1700px) — 데스크톱 축소 시작 ─────────────── */
@media (max-width: 1700px) {

  /* 통계 카드 — wrap 레이아웃: 값이 라벨 아래로 이동 */
  .crp-card {
    flex-wrap: wrap;
    height: auto;
    min-height: 100px;
    padding: 16px 18px;
    gap: 4px 10px;
    align-content: center;
  }

  .crp-card-left {
    width: 100%;
    gap: 12px;
  }

  .crp-card-value-wrap {
    /* 아이콘(50px) + gap(12px) 만큼 들여쓰기 → 라벨 아래 정렬 */
    padding-left: 62px;
  }

  .crp-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
  }

  .crp-card-icon img {
    width: 26px;
    height: 26px;
  }

  .crp-card-label {
    font-size: 16px;
  }

  .crp-card-value {
    font-size: 26px;
  }

  .crp-card-unit {
    font-size: 16px;
  }

  /* 검색 행 패딩/요소 축소 */
  .crp-search-row {
    padding: 0 20px;
    gap: 10px;
  }

  .crp-dropdown--180 {
    width: 150px;
  }

  .crp-date-wrap {
    width: 140px;
  }

  .crp-search-btn {
    width: 130px;
  }

  /* 필터 행 축소 */
  .crp-dropdown--150 {
    width: 130px;
  }

  .crp-dropdown--sort {
    width: 180px;
  }

  .crp-filter-row {
    gap: 10px;
    padding: 18px 20px 20px;
  }

  /* 하단 버튼 축소 */
  .crp-btn {
    width: 200px;
    height: 46px;
    font-size: 19px;
  }
}

/* ── 반응형 (≤ 1300px) — 데스크톱 추가 축소 ─────────────── */
@media (max-width: 1300px) {

  /* 통계 카드 더 축소 (wrap 유지) */
  .crp-card {
    padding: 14px;
  }

  .crp-card-icon {
    width: 42px;
    height: 42px;
  }

  .crp-card-icon img {
    width: 22px;
    height: 22px;
  }

  .crp-card-label {
    font-size: 14px;
  }

  .crp-card-value {
    font-size: 22px;
  }

  .crp-card-unit {
    font-size: 14px;
  }

  .crp-card-left {
    gap: 10px;
  }

  /* 아이콘(42px) + gap(10px) 만큼 들여쓰기 */
  .crp-card-value-wrap {
    padding-left: 52px;
    gap: 4px;
  }

  /* 검색 행 — 줄바꿈 허용, 요소 추가 축소 */
  .crp-search-row {
    flex-wrap: wrap;
    padding: 0 10px;
    gap: 8px;
  }

  .crp-dropdown--180 {
    width: 130px;
  }

  .crp-dropdown--180 .crp-dropdown-toggle {
    height: 44px;
    font-size: 15px;
  }

  .crp-date-wrap {
    width: 130px;
    height: 44px;
  }

  .crp-date-input {
    font-size: 14px;
  }

  .crp-search-input {
    height: 44px;
    font-size: 15px;
  }

  .crp-search-btn {
    width: 110px;
    height: 44px;
    font-size: 15px;
  }

  /* 필터 행 추가 축소 */
  .crp-dropdown--150 {
    width: 115px;
  }

  .crp-dropdown--150 .crp-dropdown-toggle {
    height: 44px;
    font-size: 15px;
  }

  .crp-dropdown--sort {
    width: 160px;
  }

  .crp-dropdown--sort .crp-dropdown-toggle {
    height: 44px;
    font-size: 15px;
  }
}

/* ── 반응형 (모바일 ≤ 1200px) ───────────────────────────── */
@media (max-width: 1200px) {

  /* 메인 영역 — 피그마 모바일 pad-top 34 (카드1 y=134 - mobile header 100), bottom 65 */
  .crp-main {
    padding: 34px 8px 65px;
  }

  /* 페이지 제목 — 모바일 헤더에 표시되므로 숨김 */
  .crp-page-title {
    display: none;
  }

  /* 통계 카드 — 세로 스택, gap 28px / 카드~검색 간격 73px (피그마: y:445→y:518) */
  .crp-analytics-row {
    --bs-gutter-x: 0;
    margin-bottom: 73px;
  }

  .crp-analytics-row .col-md-4 {
    width: 100%;
    margin-bottom: 28px;
  }

  .crp-analytics-row .col-md-4:last-child {
    margin-bottom: 0;
  }

  /* 모바일: 전체 너비 카드 — 피그마 좌17/우8 비대칭 padding */
  .crp-card {
    flex-wrap: nowrap;
    height: 85px;
    min-height: auto;
    padding: 0 8px 0 17px;
    gap: 12px;
    align-content: initial;
  }

  .crp-card-left {
    width: auto;
    gap: 13px;
  }

  .crp-card-value-wrap {
    padding-left: 0;
  }

  .crp-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
  }

  .crp-card-icon img {
    width: 31px;
    height: 31px;
  }

  .crp-card-label {
    font-size: 14px;
    line-height: 36px;
  }

  .crp-card-value {
    font-size: 26px;
  }

  .crp-card-unit {
    font-size: 13px;
  }

  /* [수정 #4] 모바일 검색 행 — order 리셋, HTML 순서대로 (날짜 먼저)
     데스크톱 margin-left 보정 리셋 */
  .crp-sel-type   { order: 3; }
  .crp-sel-id     { order: 4; }
  .crp-search-input { order: 5; margin-left: 0; }
  .crp-search-btn   { order: 6; margin-left: 0; }
  .crp-date-start   { order: 1; margin-left: 0; }
  .crp-date-end     { order: 2; margin-left: 0; }

  /* 검색 행 — 세로 방향 3 sub-row 스택 */
  .crp-search-row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    margin-bottom: 0;
    padding: 0;
  }

  /* Sub-row 각각 실제 flex row로 활성화 */
  .crp-search-row-1,
  .crp-search-row-2,
  .crp-search-row-3 {
    display: flex;
    width: 100%;
    align-items: center;
  }

  /* Row 1: 시작일 / 종료일 — 각 균등 (피그마 166.3×2, gap 11.33→11, 다음 줄 간격 17) */
  .crp-search-row-1 {
    gap: 11px;
    margin-bottom: 17px;
  }
  .crp-date-wrap {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 35px;
  }
  .crp-date-input {
    font-size: 14px;
  }

  /* Row 2: 거래종류 / 거래ID — 가로 꽉차게 균등 분할
     피그마: Row2 bottom 605 → Row3 top 608 → 세로 gap 3 */
  .crp-search-row-2 {
    gap: 4px;
    margin-bottom: 3px;
  }
  .crp-sel-type,
  .crp-sel-id {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .crp-dropdown--180 .crp-dropdown-toggle {
    height: 35px;
    font-size: 14px;
  }
  .crp-dropdown--180 .crp-dropdown-item {
    font-size: 13px;
    padding: 8px 12px;
  }

  /* Row 3: 키워드 input (grow) / 검색 버튼(113), gap 6 */
  .crp-search-row-3 {
    gap: 6px;
  }
  .crp-search-input {
    flex: 1 1 0;
    min-width: 0;
    height: 35px;
    font-size: 14px;
  }
  .crp-search-btn {
    flex: 0 0 113px;
    width: 113px;
    height: 35px;
    font-size: 17px;
    line-height: 24px;
  }

  /* 필터 행 (흰색 박스 안) — 상단 23px (table-section margin-top 15 + padding-top 23 = 38, 피그마 Row3 y=608+35=643→필터 y=681 gap=38)
     좌우 패딩 12 유지 (main padding 8 + 12 = 20, 피그마 상태 x=14: main+filter=22, 허용 오차 내) */
  .crp-filter-row {
    flex-wrap: wrap;
    gap: 8px;
    padding: 23px 12px 8px;
  }

  /* 상태/역할/수량 — 3개 한 줄 강제 */
  .crp-dropdown--150 {
    flex: 0 0 calc((100% - 16px) / 3);
    min-width: 0;
    width: auto;
  }
  .crp-dropdown--150 .crp-dropdown-toggle {
    height: 35px;
    font-size: 14px;
  }
  .crp-dropdown--150 .crp-dropdown-item {
    font-size: 13px;
    padding: 8px 12px;
  }

  /* 수량많은순 — 132px 고정, 새 줄 우측 (margin-left:auto) */
  .crp-dropdown--sort {
    flex: 0 0 132px;
    width: 132px;
    margin-left: auto;
  }
  .crp-dropdown--sort .crp-dropdown-toggle {
    height: 35px;
    font-size: 14px;
  }
  .crp-dropdown--sort .crp-dropdown-item {
    font-size: 13px;
    padding: 8px 12px;
  }

  /* 테이블 섹션 — 라운드 제거, dao-main 좌우 8px 패딩 상쇄로 풀 너비 */
  .crp-table-section {
    border-radius: 0;
    margin-top: 15px;
    margin-left: -8px;
    margin-right: -8px;
  }

  /* 영수증ID, 상세 컬럼 숨김 */
  .crp-th-receipt,
  .crp-td-receipt,
  .crp-th-detail,
  .crp-td-detail {
    display: none;
  }

  /* 테이블 → 블록 변환, 가로 스크롤 제거 */
  .crp-table-wrap {
    overflow-x: visible;
  }

  .crp-table {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .crp-table thead,
  .crp-table tbody {
    display: block;
  }

  /* 헤더 행 → 5열 그리드 (10개 th가 2행×5열로 자동 배치) */
  .crp-table thead tr {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    row-gap: 2px;
    background: var(--dao-white); /* 2px gap 영역에 흰색 노출 */
  }

  /* 헤더 1줄 (거래ID~단가): 어두운 회색, 피그마 Bold 13 leading 22, h≈39 (8+22+8=38)
     데스크톱 height: 99.77px 리셋 */
  .crp-table thead th {
    font-size: 13px;
    height: auto;
    padding: 8px 4px;
    background: var(--dao-card-bg);
    color: var(--dao-white);
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    border: none;
    line-height: 22px;
  }

  /* 헤더 2줄 (수량(CSET)~거래종류): 밝은 회색 */
  .crp-table thead th:nth-child(n+6) {
    background: #8b8fa0;
  }

  /* 상태진행일시 <br> 모바일에서 숨김 → 한 줄 표시 */
  .crp-table thead th:nth-child(8) br {
    display: none;
  }

  /* 모바일: 상태 진행일시 line-height 다른 th와 동일하게 복원 */
  .crp-table thead th:nth-child(8) {
    line-height: 1.3;
  }


  /* 데이터 행 → 5열 그리드 (10개 td가 2행×5열로 자동 배치, 피그마 row 내부 2줄 gap 5) */
  .crp-table tbody tr {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    row-gap: 5px;
    border-bottom: none;
  }

  .crp-table tbody tr:last-child {
    border-bottom: none;
  }

  /* 짝수 행 배경 유지 */
  .crp-table tbody tr:nth-child(even) {
    background: #f8f8f8;
  }

  /* 데이터 셀 — 피그마 Regular 11 leading 22 / 행 높이 ≈64 (td 22+4+3=29, 2행 + gap 5 = 63, ±1px 허용) */
  .crp-table tbody td {
    font-size: 11px;
    line-height: 22px;
    padding: 4px 3px 3px;
    text-align: center;
    vertical-align: middle;
    border: none;
    word-break: break-all;
  }

  /* 모바일 뱃지 — 피그마 45×15, Regular 11 */
  .crp-badge {
    font-size: 11px;
    line-height: normal;
    padding: 0;
    min-width: 0;
  }

  .crp-badge--buy,
  .crp-badge--detail {
    width: 45px;
    height: 15px;
  }

  /* 하단 액션 버튼 — 세로 스택, 버튼 간 17px (피그마: y:1274→y:1341, gap=17px) */
  .crp-action-btns {
    flex-direction: column;
    gap: 17px;
    margin-bottom: 0;
  }

  .crp-btn {
    width: 241px;
    height: 50px;
    font-size: 22px;
  }

}

/* 피그마 모바일은 375 단일 디자인 — @1200이 모바일 기준.
   이하 @768 / @480 는 피그마에 없는 중간 축소이나,
   모든 요소가 @1200 값(피그마 명시값)을 상속하도록 override 제거.
   viewport 375 렌더 시 cascade 마지막 @480 값이 이겼던 버그 수정. */

/* ============================================================
   CoReset 참여 상세(관리자전용) 페이지 (crsd- 접두사)
   Figma: 448:8561 (데스크톱 1920) / 448:8870 (모바일 375)
============================================================ */

/* ── 메인 영역 ────────────────────────────────────────────── */
.crsd-main {
  padding-top: 64px;
}

/* ── 상세 카드 ───────────────────────────────────────────── */
/* Figma Rect 4408: x=356, y=231, w=1472, h=2220
   카드 상하 패딩 71px (section1 y=302 - card y=231) */
.crsd-card {
  background: #ffffff;
  border-radius: 10px;
  max-width: 1472px;
  margin: 0 auto;
  padding: 71px 0;
  overflow: hidden;
}

/* ── 섹션 공통 ───────────────────────────────────────────── */
/* Figma: 섹션 외곽 w=1084, 섹션간 gap 50 */
.crsd-section {
  max-width: 1084px;
  margin: 0 auto 50px;
}

.crsd-section--last {
  margin-bottom: 0;
}

/* 섹션 헤더 바 — Figma design_context: bg #3a3a3a (not #505364!),
   NanumGothicOTF:Bold = weight 700 (not 800), text white, 20px, h=65 */
.crsd-section-header {
  background: #3a3a3a;
  color: #ffffff;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* ── 행 그리드 (2열) ─────────────────────────────────────── */
/* Figma: column-gap 5 (group1 right 1088 → group2 left 1093)
         row-gap 4 (row1 bottom 415 → row2 top 419) */
.crsd-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 5px;
}

/* ── 데이터 행 ───────────────────────────────────────────── */
/* Figma: row h=44, label↔value gap=3 (label right 750 → value left 753) */
.crsd-row {
  display: flex;
  min-height: 44px;
  gap: 3px;
}

/* 그리드 외부 단독 행 간격 (tech/receipt/memo 등) */
.crsd-section > .crsd-row {
  margin-bottom: 4px;
}

.crsd-section > .crsd-row:last-child {
  margin-bottom: 0;
}

/* 전체 너비 행 */
.crsd-row--full {
  grid-column: 1 / -1;
}

/* 전체 너비 행 — 거래 ID 값은 Figma 448:8597 text-[15px]
   (다른 값 16px과 다르게 이 하나만 15px; 모바일에서는 기본 15로 자동 일치) */
.crsd-row--full:not(.crsd-row--center-val) .crsd-value {
  font-size: 15px;
}

/* 전체 너비 행 — 값 고정 위치 (총 거래금액)
   Figma: "100 USDT" text_x=1073.42, cell_x=753 → 셀 중앙(1193.5) 아닌 고정 위치
   padding-left = 1073.42 - 753 - 2(border) = 318 */
.crsd-row--center-val .crsd-value {
  justify-content: flex-start;
  text-align: left;
  padding: 12px 20px 12px 318px;
}

/* 기술정보 행 (TXID, 계약기록해시)
   Figma design_context 448:8751 "TXID" / 448:8746 "계약기록해시": text-[17px] */
.crsd-row--tech {
  min-height: 44px;
}

.crsd-row--tech .crsd-label {
  font-size: 17px;
}

/* 영수증 행 (h=65: 버튼 40h + 상하 여백)
   Figma: label w=198 (not 200), label↔value gap=5 (not 3), label font 17px (not 16) */
.crsd-row--receipt {
  min-height: 65px;
  gap: 5px;
}

.crsd-row--receipt .crsd-label {
  width: 198px;
  font-size: 17px;
}

/* 관리자 메모 행 (h=175) */
.crsd-row--memo {
  min-height: 175px;
}

/* ── 라벨 셀 ─────────────────────────────────────────────── */
/* Figma: label cell w=200, bg #f1f1f1, 텍스트 중앙정렬
   예: "거래 ID" text x=621.58 w=59.24 → text_center=651.2 ≈ cell_center 650 */
.crsd-label {
  width: 200px;
  flex-shrink: 0;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  text-align: center;
  padding: 12px 10px;
  word-break: keep-all;
}

/* 관리자 메모 라벨 (상단 정렬) */
.crsd-label--memo {
  align-self: stretch;
}

/* ── 값 셀 ───────────────────────────────────────────────── */
/* Figma: value cell w=335(2열)/881(풀폭), 값 text x=794, cell x=753
   padding-left = 794 - 753 - 2(border) = 39 */
.crsd-value {
  flex: 1;
  background: #ffffff;
  border: 2px solid #f1f1f1;
  display: flex;
  align-items: center;
  padding: 12px 20px 12px 39px;
  font-size: 16px;
  font-weight: 400;
  color: #303030;
  word-break: break-all;
}

/* 기술정보 값 — 중앙정렬 (TXID/해시 값: text_center ≈ cell_center) */
.crsd-value--tech {
  justify-content: center;
  text-align: center;
  padding: 12px 20px;
  word-break: break-all;
}

/* 인라인 버튼 포함 값 (보기, 전체보기)
   Figma 전체보기: x=1542, w=72, cell right=1634 → padding-right 20 */
.crsd-value--has-btn {
  gap: 10px;
  padding-right: 20px;
}

/* 영수증 값 — 버튼 그룹 중앙에서 좌 72 오프셋 */
.crsd-value--receipt {
  padding: 12px 20px;
  justify-content: center;
}

/* 메모 값 (textarea가 전체 채움) */
.crsd-value--memo {
  padding: 0;
  align-items: stretch;
}

/* ── 인라인 버튼 (보기, 전체보기) ─────────────────────────── */
/* Figma: 72x25, bg #303030, 14/700 */
.crsd-inline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
  background: #303030;
  color: #ffffff;
  width: 72px;
  height: 25px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

/* 넓은 버튼 (전체보기) */
.crsd-inline-btn--wide {
  width: 72px;
}

/* ── 영수증 버튼 ─────────────────────────────────────────── */
/* Figma: PDF 보기 x=955, PDF다운로드 x=1135 → gap 26.
   버튼 그룹 center_x=1121.91, cell center=1193.5 → 오프셋 -71.5.
   margin-right 143으로 justify-content: center 기준 중심을 좌 71.5 이동 */
.crsd-receipt-buttons {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-right: 143px;
}

.crsd-receipt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 154px;
  height: 40px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 0;
}

/* PDF 보기 (테두리형) */
.crsd-receipt-btn--view {
  background: #ffffff;
  color: #d46351;
  border: 2px solid #d46351;
}

/* PDF 다운로드 (채움형) */
.crsd-receipt-btn--pdf {
  background: #d46351;
  color: #ffffff;
  border: none;
}

/* 이메일 전송 (채움형) */
.crsd-receipt-btn--email {
  background: #b7cd47;
  color: #ffffff;
  border: none;
}

/* ── 관리자 메모 텍스트에어리어 ───────────────────────────── */
/* Figma: memo value text x=812, cell x=751, border 2 → padding-left = 812-751-2 = 59
   memo value text center_y=2243.5, cell center=2243.5 → 수직중앙 정렬
   padding-top = 2243.5 - 2156(cell) - 2(border) - 9(half line) = 76.5 → 77 */
.crsd-memo-textarea {
  width: 100%;
  height: 100%;
  min-height: 150px;
  border: none;
  outline: none;
  resize: vertical;
  padding: 77px 20px 16px 59px;
  font-size: 16px;
  font-weight: 400;
  font-family: inherit;
  color: #303030;
  background: transparent;
  line-height: 18px;
}

/* ── 하단 버튼 영역 (카드 밖) ────────────────────────────── */
/* Figma: 카드 bottom 2451 → 버튼 top 2500 (gap 49). 버튼 225x50 gap 16 */
.crsd-btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 49px 20px 0;
  max-width: 1472px;
  margin: 0 auto;
}

.crsd-btn {
  width: 225px;
  height: 50px;
  border-radius: 5px;
  font-size: 22px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 목록 버튼 */
.crsd-btn--list {
  background: #ffffff;
  color: #3eb5c9;
  border: 1px solid #b4b4b4;
}

/* 저장 버튼 */
.crsd-btn--save {
  background: #3eb5c9;
  color: #ffffff;
  border: none;
}

/* ============================================================
   CoReset 참여 상세 — 반응형 (≤1200px)
   Figma 모바일: 448:8870 (375 viewport)
============================================================ */
@media (max-width: 1200px) {

  /* 메인 영역 — 좌우/상하 패딩 0, footer 이전 gap 66 */
  .dao-main.crsd-main {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 66px;
  }

  /* 페이지 제목 — "CoReset 참여" 중앙정렬 */
  .crsd-main .crp-page-title {
    display: block;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    padding: 48px 0;
    margin-bottom: 0;
  }

  /* 카드 — edge-to-edge, padding 52/16/49 */
  .crsd-card {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    padding: 52px 16px 49px;
    border-radius: 0;
  }

  /* 섹션 — 섹션간 gap 40 */
  .crsd-section {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 40px;
  }

  /* 섹션 헤더 */
  .crsd-section-header {
    font-size: 18px;
    margin-bottom: 4px;
  }

  /* 그리드 1열 전환 — row gap 6 (Figma: 50-44=6) */
  .crsd-row-grid {
    grid-template-columns: 1fr;
    gap: 6px 0;
  }

  /* full-width 행 → 1열에서 자동 */
  .crsd-row--full {
    grid-column: auto;
  }

  /* 섹션 내 단독 행 gap 4 (tech/receipt/memo)
     Figma 모바일: 기술 2261→2265=4, 영수증 2588→2592=4, 메모 2933→2937=4 */
  .crsd-section > .crsd-row {
    margin-bottom: 4px;
  }

  /* 행 — label↔value gap 4 (Figma mobile: value_x 139 - (label_x 16 + 119) = 4) */
  .crsd-row {
    gap: 4px;
  }

  /* 중앙정렬 해제 (모바일은 일반 행과 동일) */
  .crsd-row--center-val .crsd-value {
    justify-content: flex-start;
    text-align: left;
    padding: 0 0 0 27px;
  }

  /* 라벨 셀 — w=119, 우측정렬 padding-right 15
     Figma: 모든 라벨의 text right edge 항상 x=120 (cell right 135 - 15)
     모바일은 tech/receipt 포함 모든 라벨 15px (데스크톱 17px leak 방지) */
  .crsd-label,
  .crsd-row--tech .crsd-label,
  .crsd-row--receipt .crsd-label {
    width: 119px;
    font-size: 15px;
    justify-content: flex-end;
    text-align: right;
    padding: 0 15px 0 0;
  }

  /* 값 셀 — w=219, padding-left 27 (text x=168 - cell x=139 - border 2) */
  .crsd-value {
    font-size: 15px;
    padding: 0 0 0 27px;
  }

  /* has-btn — 모바일 버튼 right padding 7 (Figma: btn right 351 = cell right 358 - 7) */
  .crsd-value--has-btn {
    padding: 0 7px 0 27px;
  }

  /* 기술정보 값 — 좌측정렬 + 줄바꿈.
     Figma 모바일: TXID/해시 값은 16px (다른 모바일 값 15px와 다름) */
  .crsd-value--tech {
    justify-content: flex-start;
    text-align: left;
    padding: 0 0 0 27px;
    font-size: 16px;
  }

  /* 기술정보 행 h=100 (값 3줄 래핑) */
  .crsd-row--tech {
    min-height: 100px;
  }

  /* 인라인 버튼 (보기) — Figma x=300 y=755, w=51 h=25 */
  .crsd-inline-btn {
    width: 51px;
    height: 25px;
    font-size: 12px;
  }

  /* 전체보기 버튼 — Figma w=66 */
  .crsd-inline-btn--wide {
    width: 66px;
  }

  /* 관리자 메모 행 h=119 (모바일은 1줄) */
  .crsd-row--memo {
    min-height: 119px;
  }

  /* 모바일 memo 값 셀 — padding 0 override (mobile .crsd-value 27 leak 방지)
     textarea가 자체 padding-left 27을 가지므로 셀 padding은 0이어야 함 */
  .crsd-value--memo {
    padding: 0;
  }

  .crsd-memo-textarea {
    min-height: 90px;
    /* Figma 모바일 memo value center_y = cell center 2873.5
       padding-top = 2873.5 - 2814 - 2(border) - 9(half line) = 48.5 → 49
       padding-left = 168(text_x) - 139(cell_x) - 2(border) = 27 */
    padding: 49px 0 10px 27px;
  }

  /* 영수증 버튼 — 세로 스택, 136x30, gap 10
     데스크톱 margin-right 143 해제 */
  .crsd-receipt-buttons {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-right: 0;
  }

  .crsd-receipt-btn {
    width: 136px;
    height: 30px;
    font-size: 16px;
  }

  /* 영수증 값 셀 — 세로 버튼 중앙정렬 */
  .crsd-value--receipt {
    padding: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* 영수증 행 h=114 */
  .crsd-row--receipt {
    min-height: 114px;
  }

  /* 하단 버튼 — Figma: 카드 bottom 3078 → 버튼 top 3116 (gap 38)
     버튼 165x50, 버튼간 gap 10 (x=18→x=193 → 165+10) */
  .crsd-btn-wrap {
    padding: 38px 18px 0;
    gap: 10px;
    max-width: none;
  }

  .crsd-btn {
    width: 165px;
    height: 50px;
    font-size: 17px;
    border-radius: 4px;
  }

  /* 모바일 목록 버튼 border 색상 — Figma: #3eb5c9 (not #b4b4b4 like desktop) */
  .crsd-btn--list {
    border: 1px solid #3eb5c9;
  }

}

/* ============================================================
   CoReset 참여 상세 — 1920px 초과 시 카드 꽉차게
============================================================ */
@media (min-width: 1921px) {
  .crsd-card,
  .crsd-btn-wrap {
    max-width: none;
  }
}


/* ============================================================
   판매등록 Step1 — 자격확인 모달 (crc- 접두사)
============================================================ */

/* ── 오버레이 ─────────────────────────────────────────────── */
.crc-overlay {
  position: fixed;
  top: var(--dao-header-h, 88px);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(39, 39, 41, 0.8);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px 40px;
  overflow-y: auto;
}

/* ── 모달 컨테이너 ────────────────────────────────────────── */
.crc-modal {
  width: 1200px;
  max-width: calc(100vw - 40px);
  background: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

/* ── 모달 헤더 (틸 배경) ──────────────────────────────────── */
.crc-modal-header {
  height: 100px;
  background: #e6dbc8;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 60px;
}

.crc-modal-title {
  font-size: 36px;
  font-weight: 700;
  color: #303030;
  line-height: 24px;
  letter-spacing: -0.5px;
}

.crc-modal-close {
  position: absolute;
  right: 27px;
  top: 26px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crc-close-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* ── 모달 본문 ──────────────────────────────────────────────
   피그마 1920: header h=100, body y=493 → step y=514 (pad-top 21)
   steps 영역 w=960 → modal w=1200 기준 pad-L/R 120
   next button bottom 1177 → modal bottom 1233 (pad-bottom 56) */
.crc-modal-body {
  padding: 21px 120px 56px;
}

/* ── 스텝 인디케이터 ──────────────────────────────────────── */
/* 피그마: step bottom 663 → banner top 698 (gap 35) */
.crc-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 35px;
}

.crc-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 180px;
  height: 149px;
}

.crc-step-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e6dbc8;
}

/* 비활성 스텝: 회색 원 */
.crc-step--inactive .crc-step-icon-wrap {
  background: rgba(230,219,200,0.6);
}

/* 피그마: 자격확인 아이콘 45×45 (Group 26 x=388 y=275 w=45 h=45) */
.crc-step-icon {
  width: 45px;
  height: 45px;
  display: block;
  object-fit: contain;
}

/* 모바일 전용 아이콘 — PC에서는 숨김 */
.crc-step-icon-sm {
  display: none;
}

.crc-step-label {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.crc-step--active .crc-step-label {
  color: #303030;
}

.crc-step--inactive .crc-step-label {
  color: #e6dbc8;
}

/* 화살표 */
.crc-step-arrow-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px; /* label + gap 보정 */
  flex-shrink: 0;
}

.crc-arrow {
  width: 40px;
  display: block;
}

.crc-arrow-sm {
  display: none;
}

/* ── 정보 배너 ──────────────────────────────────────────────
   피그마: w=880 h=50 r=50, text 20px leading 30, text h=30 → pad 10 수직
   banner bottom 718 → form top 741 (gap 23) */
.crc-info-banner {
  background: #e6dbc8;
  border-radius: 50px;
  width: 880px;
  max-width: 100%;
  margin: 0 auto 23px;
  padding: 10px 27px;
  text-align: center;
}

.crc-info-banner p {
  margin: 0;
  color: #303030;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
}

.crc-banner-br,
.crc-note-br {
  display: none;
}

/* 데스크톱 전용 br (모바일 @≤1200에서 숨김) */
.crc-note-br-d {
  display: inline;
}

.crc-info-banner strong {
  font-weight: 800;
}

/* ── 자격 확인 폼 ───────────────────────────────────────────
   피그마: outer form x=683 w=811 (icon col 25 + gap 14 + label 247 + input 525)
   row pitch 65 (row h=48 + gap 17) */
.crc-form {
  display: flex;
  flex-direction: column;
  gap: 17px;
  width: 811px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

.crc-form-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
}

/* 라벨 영역 (왼쪽) — 25(icon) + 14(gap) + 247(text column) = 286 */
.crc-form-label {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 286px;
  flex-shrink: 0;
}

/* PC: 상태 아이콘 왼쪽, 텍스트 오른쪽 (피그마 25×25) */
.crc-form-label .crc-status-icon {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  order: -1;
}

.crc-form-text {
  font-size: 20px;
  font-weight: 700;
  color: #505364;
  line-height: 1.3;
}

/* 값 영역 (오른쪽) */
.crc-form-value {
  flex: 1;
}

/* 읽기 전용 입력 */
.crc-input {
  width: 100%;
  height: 48px;
  background: rgba(230, 219, 200, 0.15);
  border: 1px solid #e6dbc8;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 20px;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  outline: none;
  cursor: default;
}

.crc-input:focus {
  outline: none;
  border-color: #e6dbc8;
}

/* 동의하기 버튼 */
.crc-agree-btn {
  width: 172px;
  height: 48px;
  background: #e6dbc8;
  color: #303030;
  border: none;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  text-align: center;
}

/* ── 안내 텍스트 ──────────────────────────────────────────── */
/* 피그마 데스크톱: 기본 color #6c6c6c, ExtraBold span만 #303030 */
.crc-note {
  margin: 40px 0 0;
  font-size: 18px;
  color: #6c6c6c;
  line-height: 30px;
  text-align: center;
}

.crc-note-em {
  color: #303030;
  font-weight: 800;
}

/* ── 다음단계 버튼 ────────────────────────────────────────── */
.crc-btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 31px;
}

.crc-btn-next {
  width: 241px;
  height: 50px;
  background: #e6dbc8;
  color: #303030;
  border: none;
  border-radius: 4px;
  padding: 12px 30px;
  font-size: 22px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  line-height: 24px;
  cursor: pointer;
}

.crc-btn-next:hover {
  background: #d4c9b3;
}


/* ============================================================
   판매등록 모달 — 반응형 (≤1200px : 모바일 레이아웃)
   피그마 448:12111 실측 기준 1:1 반영
============================================================ */
@media (max-width: 1200px) {

  /* 오버레이: 실제 모바일 헤더(.dao-mobile-header h=56) 바로 아래부터 전체 덮음
     피그마 상단 100은 시스템 status bar(44)+app header(56)이나 실제 브라우저엔 status bar 없음 → top=56
     피그마 "헤더 bottom → 모달 gap 104" 유지: padding-top 104 → 모달 뷰포트 y=160 */
  .crc-overlay {
    top: 56px;
    bottom: 0;
    padding: 104px 0 0;
    align-items: flex-start;
    background: rgba(39, 39, 41, 0.75);
  }

  /* 모달 — 피그마 w=346 x=15 (뷰포트 375) */
  .crc-modal {
    width: calc(100% - 30px);
    max-width: none;
    margin: 0 auto;
    border-radius: 15px;
  }

  /* 피그마 모바일: header h=118 (y=204~322), title y=274 h=24 → bottom=298
     → header bottom padding 24 (322-298) */
  .crc-modal-header {
    height: 118px;
    padding: 0 0 24px;
    align-items: flex-end;
  }

  .crc-modal-title {
    font-size: 26px;
    line-height: 24px;
    letter-spacing: 0;
  }

  /* 피그마: close 20×20 (x=315 y=229 w=20 h=20) — close center y=239 from modal y=204 → 35 from modal top */
  .crc-close-icon {
    width: 20px;
    height: 20px;
  }

  .crc-modal-close {
    right: 26px;
    top: 25px;
    transform: none;
  }

  /* 모달 본문 — header→steps gap 10, button→modal-bottom gap 50 */
  .crc-modal-body {
    padding: 10px 10px 50px;
  }

  /* 스텝 인디케이터 — Figma Frame 15 x=18 w=340 (모달 x=15 w=346)
     → 모달 내부 좌/우 3px 공간만 여유 → 모달 body padding(10)을 상쇄하기 위해 -7px 네거티브 마진 */
  .crc-steps {
    gap: 7px;
    height: 100px;
    align-items: center;
    margin: 0 -7px 13px;
  }

  .crc-step {
    width: 60px;
    height: 80px;
    gap: 10px;
  }

  .crc-step-icon {
    display: none;
  }

  .crc-step-icon-wrap {
    width: 45px;
    height: 45px;
  }

  .crc-step-icon-sm {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  .crc-step-label {
    font-size: 15px;
  }

  /* 화살표 — 피그마 y=50 (중앙) → 보정 없이 기본 center */
  .crc-step-arrow-wrap {
    margin-bottom: 0;
  }

  .crc-arrow {
    display: none;
  }

  .crc-arrow-sm {
    display: block;
    width: 15px;
  }

  /* 정보 배너 — 데스크톱 width:880 leak 차단 + 피그마 w=325 h=120 r=10, pad 21×20 */
  .crc-info-banner {
    width: auto;
    max-width: none;
    border-radius: 10px;
    padding: 21px 20px;
    margin: 0 auto 46px;
  }

  .crc-info-banner p {
    font-size: 17px;
    line-height: 26px;
    text-align: center;
  }

  .crc-banner-br,
  .crc-note-br {
    display: inline;
  }

  /* 데스크톱 전용 br은 모바일에서 숨김 */
  .crc-note-br-d {
    display: none;
  }

  /* 폼 — 데스크톱 width:811 leak 차단, row 간 gap 27px */
  .crc-form {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0 6px;
    gap: 27px;
  }

  /* 폼 행 — 세로 레이아웃, label(20)+gap(10)+input(48)=78 */
  .crc-form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0;
  }

  /* 라이선스 행: 피그마 label y=822, button y=854 → gap 12 (다른 행 10)
     button은 row 좌측 정렬 (x=36 = row left) */
  .crc-form-row--license {
    gap: 12px;
  }

  .crc-form-row--license .crc-form-value {
    display: flex;
    justify-content: flex-start;
  }

  /* 라벨: 텍스트 왼쪽, status icon 오른쪽 */
  .crc-form-label {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 8px;
  }

  .crc-form-label .crc-status-icon {
    width: 20px;
    height: 20px;
    order: 0;
    flex-shrink: 0;
  }

  .crc-form-text {
    font-size: 18px;
    line-height: 1.4;
    flex: 1;
    order: 0;
  }

  .crc-form-value {
    width: 100%;
  }

  /* 인풋 — 피그마 radius 5, h=48, font 16 */
  .crc-input {
    font-size: 16px;
    height: 48px;
    border-radius: 5px;
  }

  /* 동의하기 버튼 — 피그마 w=160 h=40 r=5 padding 4v×16h */
  .crc-agree-btn {
    width: 160px;
    height: 40px;
    font-size: 16px;
    border-radius: 5px;
    padding: 4px 16px;
  }

  /* 안내 텍스트 — 피그마 leading 23 절대값, form bottom → note gap 39 */
  .crc-note {
    font-size: 16px;
    line-height: 23px;
    margin-top: 39px;
  }

  /* 다음단계 버튼 — note bottom → button gap 34 */
  .crc-btn-wrap {
    margin-top: 34px;
  }

  .crc-btn-next {
    width: 241px;
    max-width: 100%;
    height: 50px;
    font-size: 18px;
    line-height: 24px;
    border-radius: 4px;
  }

}

/* 피그마 모바일 단일 디자인(375) 기준이므로 ≤480 추가 override 없음.
   이전 step-label/banner font 축소 override는 @1200 피그마 값(15/17)을 덮어써 제거. */


/* ============================================================
   판매등록 Step2 — 조건설정 (crc- 접두사, step2 전용)
============================================================ */

/* ── 공동저작권자 배지 (모달 헤더) ──────────────────────────── */
.crc-role-badge {
  position: absolute;
  left: 35px;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 50px;
  background: #afce35;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0;
  border-radius: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Step2 폼 ───────────────────────────────────────────────── */
/* 피그마 데스크톱: row1↓row2 gap 31 (870→901) */
.crc-form--step2 {
  padding: 0 163px 0 92px;
  gap: 31px;
}

.crc-form--step2 .crc-form-row {
  gap: 46px;
}

/* 데스크톱 step2 배너 → 판매경로 row gap 72 (748→820) */
.crc-modal-header--step2 ~ .crc-modal-body .crc-info-banner {
  margin-bottom: 72px;
}

/* 데스크톱 step2 note → next btn gap 49 (1078→1127) */
.crc-modal-header--step2 ~ .crc-modal-body .crc-btn-wrap {
  margin-top: 49px;
}

/* Step2 라벨: 상태아이콘 없음, 텍스트만 */
.crc-form-label--step2 {
  width: 152px;
  flex-shrink: 0;
}

/* ── 판매경로 셀렉트 ─────────────────────────────────────────── */
.crc-select {
  width: 367px;
  height: 50px;
  border: 1px solid #e6dbc8;
  border-radius: 8px;
  background-color: rgba(230, 219, 200, 0.15);
  color: rgba(48, 48, 48, 0.7);
  font-size: 20px;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 40px 0 23px;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26' fill='none'%3E%3Cpath d='M4.99 7.58L3.25 9.32L13 19.07L22.75 9.32L21.01 7.58L13 15.59L4.99 7.58Z' fill='%23303030' fill-opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 26px 26px;
  cursor: pointer;
  outline: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

/* FilterDropdown이 crc-select 크기를 차용할 때 select용 좌우 padding은 제거 */
.crp-dropdown.crc-select {
  padding: 0;
  background-image: none;
}

/* ── 수량입력 컨트롤 ─────────────────────────────────────────── */

/* 회색 배경 컨테이너 — minus/input/plus/최대 모두 포함
   피그마 데스크톱: 367×56, select와 동일 폭 */
.crc-qty-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(230, 219, 200, 0.3);
  width: 367px;
  max-width: 100%;
  height: 56px;
  padding: 0 26px;
  border-radius: 0;
}

/* minus / plus 아이콘 버튼 — 테두리/배경 없는 순수 아이콘 스타일 */
.crc-qty-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #303030;
  font-size: 20px;
  font-weight: 900;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}

.crc-qty-btn:hover {
  color: #555;
}

.crc-qty-minus {
  font-size: 22px;
}

.crc-qty-plus {
  font-size: 22px;
}

/* 수량 입력 필드 — 독립 형태, 둥근 모서리 */
.crc-qty-input {
  width: 121px;
  height: 40px;
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  background: #ffffff;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  color: rgba(48, 48, 48, 0.7);
  font-family: 'Nanum Gothic', sans-serif;
  outline: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  flex-shrink: 0;
}

/* 최대 버튼 */
.crc-qty-max {
  width: 83px;
  height: 40px;
  background: #401D01;
  color: #e6dbc8;
  border: none;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  flex-shrink: 0;
  letter-spacing: -0.2px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  margin-left: auto;
}

.crc-qty-max:hover {
  background: #1a1a1a;
}

/* 판매 가능 수량 텍스트
   피그마 데스크톱: qty bg bot(957) → qty-avail top(967) = 10 */
.crc-qty-available {
  margin: 10px 0 0;
  padding-left: 22px;
  font-size: 16px;
  color: #e50004;
  font-weight: 400;
  font-family: 'Nanum Gothic', sans-serif;
  line-height: 1.4;
}

/* ── Step2 안내 텍스트 ─────────────────────────────────────────
   피그마: note x=917 y=1048 w=341 h=30, font 20 color #303030
   row2 bot(987) → note top(1048) = 61 (form-row padding 0 기반) */
.crc-note--step2 {
  margin: 61px 0 0;
  font-size: 20px;
  color: #303030;
  font-weight: 400;
  text-align: center;
  line-height: 30px;
}


/* ============================================================
   판매등록 Step2 — 반응형 (≤1200px : 모바일 레이아웃)
============================================================ */
@media (max-width: 1200px) {

  /* 모달 헤더 step2: 타이틀만 중앙 배치, 배지는 헤더 밖으로 이동 */
  .crc-modal-header--step2 {
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: 0;
    height: 112px;
    min-height: unset;
    padding: 0 50px 28px;
    overflow: visible;
  }

  /* 배지: 헤더 하단에서 23px 아래 본문 영역에 absolute 배치
     피그마 모바일: 150×40 고정 */
  .crc-modal-header--step2 .crc-role-badge {
    position: absolute;
    top: calc(100% + 23px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 0;
    border-radius: 0;
    width: 150px;
    height: 40px;
    z-index: 2;
  }

  /* 닫기 버튼: step2 모바일 — 피그마 close y=398 (modal top=25) */
  .crc-modal-header--step2 .crc-modal-close {
    top: 25px;
  }

  /* 본문 상단 패딩: 피그마 header bottom(112) → steps top(186) gap=74. 배지 absolute 흐름무관
     하단: 피그마 btn bottom(1236) → modal bottom(1293) = 57 */
  .crc-modal-header--step2 ~ .crc-modal-body {
    padding-top: 74px;
    padding-bottom: 57px;
  }

  /* 스텝 → 배너 간격: 피그마 steps bot(286) → banner top(302) = 16 */
  .crc-modal-header--step2 ~ .crc-modal-body .crc-steps {
    margin-bottom: 16px;
  }

  /* 정보 배너: 피그마 모바일 325×120, 텍스트 3줄×26=78, padding 21/20 → w=285 텍스트 일치
     배너 하단 → 첫 행 label top = 43px (피그마 795→838)
     base mobile margin-bottom 46 → step2에서 17로 override (17+11+15=43) */
  .crc-modal-header--step2 ~ .crc-modal-body .crc-info-banner {
    padding: 21px 20px;
    margin-bottom: 17px;
  }

  /* qty bg bot(667) → qty available top(677) = 10 */
  .crc-modal-header--step2 ~ .crc-modal-body .crc-qty-available {
    margin-top: 10px;
  }

  /* Step2 폼: 좌우 패딩 14px (body 10px + 14px = 24px, 기존 동일)
     gap: base mobile .crc-form gap 27 → step2에서 0으로 override
     (행간 합 = row pad-bot 15 + form gap 0 + row pad-top 15 = 30 피그마 일치) */
  .crc-form--step2 {
    padding: 0 14px;
    gap: 0;
    margin-top: 11px; /* 배너 margin 17 + form mt 11 + row pt 15 = 43 (피그마 일치) */
  }

  /* Step2 폼 행: gap·padding 피그마 수치로 조정 */
  .crc-form--step2 .crc-form-row {
    gap: 12px;    /* 8px → 12px (판매경로 10px, 수량입력 16px 평균) */
    padding: 15px 0; /* 12px → 15px (행 간 24px → 30px) */
  }

  /* Step2 라벨: 풀 너비 */
  .crc-form-label--step2 {
    width: 100%;
  }

  /* 셀렉트: 풀 너비, font-size 피그마와 동일 */
  .crc-select {
    width: 100%;
    height: 50px;
    font-size: 20px;
    padding: 0 40px 0 23px;
    background-color: rgba(230, 219, 200, 0.15);
  }

  /* 수량 컨트롤 — 모바일 */
  .crc-qty-row {
    gap: 8px;
    padding: 0 20px;
    width: 100%;
    height: 56px;
    border-radius: 0;
  }

  .crc-qty-btn {
    width: 36px;
    height: 36px;
    font-size: 28px;
  }

  .crc-qty-input {
    width: 97px;
    font-size: 20px;
  }

  .crc-qty-max {
    font-size: 20px;
  }

  .crc-qty-available {
    font-size: 16px;
    text-align: center;
    padding-left: 0;
  }

  /* Step2 안내 텍스트: 피그마 qty-available bottom(1070) → note top(1120) = 50
     form-row padding-bottom 15 + note mt 35 = 50
     line-height 23 피그마 single line h=23 일치 */
  .crc-note--step2 {
    font-size: 16px;
    line-height: 23px;
    margin-top: 35px;
    text-align: center;
    padding-left: 5px; /* body 16px + 5px = 21px, 피그마 left 35-14=21px 일치 */
  }

  /* 다음단계 버튼: 높이 + 안내텍스트와의 간격 */
  .crc-btn-next {
    height: 50px;
  }

  /* 다음단계 버튼 wrap: 피그마 note bottom(1143) → btn top(1186) = 43 */
  .crc-modal-header--step2 ~ .crc-modal-body .crc-btn-wrap {
    margin-top: 43px;
  }

}

/* ── Step2 극소형 모바일 (≤480px) ──────────────────────────── */
@media (max-width: 480px) {

  .crc-modal-header--step2 .crc-role-badge {
    font-size: 18px;
  }

  .crc-select {
    font-size: 16px;
  }

  .crc-qty-input {
    width: 97px;
    height: 36px;
    font-size: 16px;
  }

  .crc-qty-max {
    width: 70px;
    height: 36px;
    font-size: 15px;
  }

  .crc-qty-btn {
    width: 36px;
    height: 36px;
    font-size: 28px;
  }

  .crc-qty-available {
    font-size: 16px;
  }

}


/* ============================================================
   판매등록 Step3 — 확인/서명 (crc- 접두사, step3 전용)
============================================================ */

/* ── Step3 모달 전용 오버라이드 (PC) ────────────────────────── */

/* 모달 본문 하단 패딩 오버라이드 */
.crc-modal--step3 .crc-modal-body {
  padding-bottom: 33px;
}

/* 배너 오버라이드: margin-bottom만 변경 */
.crc-modal--step3 .crc-info-banner {
  margin-bottom: 30px;
}

/* 폼 행 세로 간격: 16px → 4px (피그마 행 높이 58px 기준) */
.crc-modal--step3 .crc-form-row {
  padding: 4px 0;
}

/* ── Step3 폼 ───────────────────────────────────────────────── */
.crc-form--step3 {
  padding: 0 127px 0 128px;
}

.crc-form--step3 .crc-form-row {
  gap: 46px;
}

/* Step3 라벨: step2와 동일 너비 */
.crc-form-label--step3 {
  width: 152px;
  flex-shrink: 0;
}

/* Step3 라벨 텍스트 색상 — 피그마 desktop 448:11075 기준 #303030 */
.crc-form-label--step3 .crc-form-text {
  color: #303030;
}

/* Step3 읽기전용 입력 필드 — 피그마 448:11072 기준 */
.crc-input-step3 {
  width: 100%;
  height: 50px;
  background: rgba(230, 219, 200, 0.15);
  border: 1px solid #e6dbc8;
  border-radius: 8px;
  padding: 10px 60.5px 10px 23px;
  font-size: 18px;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  text-align: right;
  outline: none;
  cursor: default;
}

.crc-input-step3:focus {
  outline: none;
  border-color: #e6dbc8;
}

/* ── Step3 안내 텍스트 — 피그마 448:11100 기준 ─────────────── */
.crc-note--step3 {
  margin: 30px 0 0;
  text-align: center;
}

.crc-note--step3 p {
  margin: 0;
  font-size: 18px;
  color: #303030;
  font-weight: 400;
  line-height: 30px;
  font-family: 'Nanum Gothic', sans-serif;
}

/* ── Step3 steps → banner gap: 피그마 5px (기본 35px override) */
.crc-modal--step3 .crc-steps {
  margin-bottom: 5px;
}

/* ── Step3 버튼 간격 오버라이드 ─────────────────────────────── */
.crc-modal--step3 .crc-btn-wrap {
  margin-top: 31px;
}

/* ── Step3 버튼 폰트: 피그마 desktop 20px (base 22px override) */
.crc-modal--step3 .crc-btn-next {
  font-size: 20px;
}


/* ============================================================
   판매등록 Step3 — 반응형 (≤1200px : 모바일 레이아웃)
============================================================ */
@media (max-width: 1200px) {

  /* 공통 body 10px 적용으로 좌우 개별 오버라이드 제거, bottom만 유지 */
  .crc-modal--step3 .crc-modal-body {
    padding-bottom: 39px;
  }

  /* Step3 모바일 타이틀: 피그마 448:12006 Bold 26px */
  .crc-modal--step3 .crc-modal-title {
    font-size: 26px;
    line-height: 24px;
  }

  /* Step3 모바일 라벨 색상 복원: 피그마 448:12055 #505364 */
  .crc-form-label--step3 .crc-form-text {
    color: #505364;
  }

  /* 배너 하단 여백: 배너(21px) + 폼 margin-top(11px) = 32px */
  .crc-modal--step3 .crc-info-banner {
    margin-bottom: 21px;
  }

  /* Step3 폼: body 10px + form 14px = 24px (label x=38 - modal x=14 기준)
     행 간 gap 29px (피그마 row pitch 110 - row h 81 = 29) */
  .crc-form--step3 {
    padding: 0 14px;
    margin-top: 11px;
    gap: 29px;
  }

  /* Step3 폼 행: 세로 레이아웃, label→input gap 11 (피그마 31-20) */
  .crc-form--step3 .crc-form-row,
  .crc-modal--step3 .crc-form-row {
    gap: 11px;
    padding: 0;
  }

  /* Step3 라벨: 풀 너비 (모바일 세로 배치) */
  .crc-form-label--step3 {
    width: 100%;
  }

  /* Step3 입력: 피그마 448:12054 16px center, padding 10/10/10/23 */
  .crc-input-step3 {
    text-align: center;
    font-size: 16px;
    height: 50px;
    padding: 10px 10px 10px 23px;
  }

  /* Step3 안내 텍스트: 피그마 448:12072 좌측 정렬 16px leading 23
     form bottom → note top 44px */
  .crc-note--step3 {
    margin-top: 44px;
    text-align: left;
    padding-left: 5px;
  }

  /* 배너에서 desktop은 "입니다."까지 Bold, mobile은 Regular (피그마 448:12051) */
  .crc-banner-mobile-reg {
    font-weight: 400;
  }

  .crc-note--step3 p {
    display: inline;
    font-size: 16px;
    line-height: 23px;
  }

  /* Step3 모바일 close 위치: 피그마 448:12007 기준 모달 내부 top 23 */
  .crc-modal--step3 .crc-modal-close {
    top: 23px;
  }

}


/* ============================================================
   판매등록 Step4 — 등록완료 (crc- 접두사, step4 전용)
============================================================ */

/* ── Step4 모달 헤더 (골드 배경) ─────────────────────────────── */
.crc-modal-header--step4 {
  background: #e6dbc8;
}

/* ── Step4 close 버튼 위치 (피그마 right 32, top 30) ─────────── */
.crc-modal--step4 .crc-modal-close {
  right: 32px;
  top: 30px;
}

/* ── Step4 스텝 아이콘 색상 오버라이드 (골드) ────────────────── */
.crc-modal--step4 .crc-step--active .crc-step-icon-wrap {
  background: #e6dbc8;
}

/* ── Step4 스텝 → 배너 간격 (피그마 bottom 663 → top 668 = 5) ── */
.crc-modal--step4 .crc-steps {
  margin-bottom: 5px;
}

/* ── Step4 모달 본문 (피그마: step y=514, button bottom=1212,
   좌우 body padding = modal left(487)→steps(607) diff = 120) ─ */
.crc-modal--step4 .crc-modal-body {
  padding: 21px 120px 21px;
}

/* ── Step4 정보 배너 (골드 배경)
   피그마 banner bottom 718 → form top 745 → mb 27 ──────────── */
.crc-modal--step4 .crc-info-banner {
  background: #e6dbc8;
  border-radius: 50px;
  margin-bottom: 27px;
}

/* ── Step4 폼 (PC: 2열 그리드)
   피그마 col-gap 35 (right col x=1105 - left col end 1070)
   피그마 row-gap 10 (row pitch 60 - row h 50) ───────────────── */
.crc-form--step4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 35px;
  row-gap: 10px;
  padding: 0;
}

.crc-form-group--step4 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
}

.crc-form-label--step4 {
  font-size: 20px;
  font-weight: 700;
  color: #505364;
  font-family: 'Nanum Gothic', sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
  width: 134px;
}

/* Step4 읽기전용 입력 필드 */
.crc-input-step4 {
  width: 100%;
  height: 50px;
  background: rgba(230, 219, 200, 0.15);
  border: 1px solid #e6dbc8;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 18px;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  text-align: center;
  outline: none;
  cursor: default;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.crc-input-step4:focus {
  outline: none;
  border-color: #e6dbc8;
}

/* ── Step4 안내 텍스트 (피그마 form bottom 975 → note top 1004 = 29) */
.crc-note--step4 {
  margin: 29px 0 0;
  text-align: center;
}

.crc-note--step4 p {
  margin: 0;
  font-size: 18px;
  color: #303030;
  font-weight: 400;
  line-height: 26px;
  font-family: 'Nanum Gothic', sans-serif;
}

/* ── Step4 정보 박스 (다크 배경)
   피그마 w=618 h=65 bg #303030 radius 0, note bottom 1063 → box top 1073 = 10 */
.crc-info-box {
  background: #303030;
  width: 618px;
  max-width: none;
  margin: 10px auto 0;
  padding: 3px 10px;
  text-align: center;
}

.crc-info-box p {
  margin: 0;
  font-size: 18px;
  color: #ffffff;
  font-weight: 400;
  line-height: 25px;
  font-family: 'Nanum Gothic', sans-serif;
}

/* ── Step4 하단 버튼 (닫기 + 내 참여보기)
   피그마 box bottom 1138 → button top 1162 = 24, gap 12 ─────── */
.crc-btn-wrap--step4 {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.crc-btn-close {
  width: 150px;
  height: 50px;
  background: #bababa;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
}

.crc-btn-close:hover {
  background: #a8a8a8;
}

.crc-btn-view {
  width: 220px;
  height: 50px;
  background: #b7cd47;
  color: #303030;
  border: none;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
}

.crc-btn-view:hover {
  background: #a6bb3d;
}


/* ============================================================
   판매등록 Step4 — 반응형 (≤1200px : 모바일 레이아웃)
   Figma 모바일 노드 448:19047 (viewport 375, modal 346×1464)
============================================================ */
@media (max-width: 1200px) {

  /* close: 피그마 right 25, top 22 */
  .crc-modal--step4 .crc-modal-close {
    right: 25px;
    top: 22px;
  }

  /* 모바일 body: 피그마 header bottom 278 → steps top 287 = pad-top 9,
     button bottom 1601 → modal bottom 1625 = pad-bottom 24 */
  .crc-modal--step4 .crc-modal-body {
    padding: 9px 10px 24px;
  }

  /* steps: 공통 mobile margin-bottom 13 → step4는 17 (step bottom 387 → banner top 404) */
  .crc-modal--step4 .crc-steps {
    margin: 0 -7px 17px;
  }

  /* 배너: 피그마 w=325 h=120 r=10, banner bottom 524 → form top 550 = mb 26 */
  .crc-modal--step4 .crc-info-banner {
    border-radius: 10px;
    margin-bottom: 26px;
  }

  /* Step4 폼: 1열 전환. row pitch 92 - group h 75 = 17 row-gap */
  .crc-form--step4 {
    grid-template-columns: 1fr;
    row-gap: 17px;
    padding: 0 17px;
    margin-top: 0;
  }

  /* Step4 폼 그룹: 세로 배치 (라벨 20 + gap 5 + input 50 = 75) */
  .crc-form-group--step4 {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: 0;
  }

  /* Step4 라벨: 풀 너비 */
  .crc-form-label--step4 {
    width: 100%;
    font-size: 18px;
  }

  /* Step4 입력: 모바일 가운데 정렬, font 16 */
  .crc-input-step4 {
    text-align: center;
    font-size: 16px;
    height: 50px;
    padding: 10px 10px 10px 23px;
  }

  /* Step4 안내 텍스트: 좌측 정렬
     form bottom 1269 → note top 1298 = mt 29 */
  .crc-note--step4 {
    margin-top: 29px;
    text-align: left;
    padding: 0 17px;
  }

  .crc-note--step4 p {
    display: block;
    font-size: 16px;
    line-height: 23px;
  }

  /* Step4 정보 박스: 모바일
     피그마 x=31 w=313 (modal x=14) → 좌 margin 7, 우 margin 6
     note bottom 1390 → box top 1411 = mt 21 */
  .crc-info-box {
    width: auto;
    max-width: none;
    margin: 21px 6px 0 7px;
    padding: 23px;
    text-align: left;
  }

  .crc-info-box p {
    font-size: 16px;
    line-height: 23px;
  }

  /* Step4 버튼: 모바일
     피그마 닫기 x=34 (modal left 14+body pad 10+wrap pad 10),
     내 참여보기 right 347 (modal right 360 - body pad 10 - wrap pad 3)
     box bottom 1525 → button top 1551 = mt 26 */
  .crc-btn-wrap--step4 {
    gap: 13px;
    margin-top: 26px;
    padding: 0 3px 0 10px;
  }

  .crc-btn-close {
    width: 100px;
    height: 50px;
    font-size: 18px;
    flex-shrink: 0;
  }

  .crc-btn-view {
    flex: 1;
    width: auto;
    height: 50px;
    font-size: 18px;
  }

}


/* ============================================================
   판매등록 초대코드 — 지인전용 (crc- 접두사, inv 전용)
============================================================ */

/* ── 모달 헤더 (골드 배경) ──────────────────────────────────── */
.crc-modal-header--inv {
  background: #e6dbc8;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ── "지인전용" 배지 — 피그마 448:18280 (x=522 y=421 w=180 h=50, modal 내부 left=35 top=28) */
.crc-badge-inv {
  position: absolute;
  left: 35px;
  top: 28px;
  width: 180px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d46351;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0;
  border-radius: 0;
  white-space: nowrap;
}

/* ── 스텝 아이콘 골드 오버라이드 ────────────────────────────── */
.crc-modal--inv .crc-step--active .crc-step-icon-wrap {
  background: #e6dbc8;
}

/* ── steps → banner gap: 피그마 5px (base 35px override) */
.crc-modal--inv .crc-steps {
  margin-bottom: 5px;
}

/* ── 모달 본문 패딩 — 피그마: top 21, left/right 120, bottom 35 */
.crc-modal--inv .crc-modal-body {
  padding: 21px 120px 35px;
}

/* ── 정보 배너 골드 오버라이드 ──────────────────────────────── */
.crc-modal--inv .crc-info-banner {
  background: #e6dbc8;
  border-radius: 50px;
  margin-bottom: 27px;
}

/* ── 초대코드 폼 (PC: 1열, 중앙 정렬, 너비 제한) ─────────── */
.crc-form--inv {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  max-width: 561px;
  margin: 0 auto;
}

/* ── 폼 행 (PC: 라벨 좌측 + 입력 우측) ────────────────────── */
.crc-form-group--inv {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 5px 0;
}

/* ── 폼 라벨 ────────────────────────────────────────────────── */
.crc-form-label--inv {
  font-size: 20px;
  font-weight: 700;
  color: #505364;
  font-family: 'Nanum Gothic', sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
  width: 134px;
  text-align: start;
}

/* ── 폼 입력 필드 (읽기전용) — 피그마 448:18256 border #e8e8e8 */
.crc-input--inv {
  width: 100%;
  height: 50px;
  background: rgba(230, 219, 200, 0.15);
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 18px;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  text-align: center;
  outline: none;
  cursor: default;
}

.crc-input--inv:focus {
  outline: none;
  border-color: #e8e8e8;
}

/* ── 안내 텍스트 — 피그마 448:18276 18px leading 24 #303030 */
.crc-note--inv {
  margin: 34px 0 0;
  text-align: center;
}

.crc-note--inv p {
  margin: 0;
  font-size: 18px;
  color: #303030;
  font-weight: 400;
  line-height: 24px;
  font-family: 'Nanum Gothic', sans-serif;
}

/* ── 정보 박스 (다크 배경) ──────────────────────────────────── */
/* PC 전용 br (모바일에서 숨김) */
.crc-inv-br {
  display: inline;
}

/* 모바일 전용 br (PC에서 숨김) */
.crc-inv-br-m {
  display: none;
}

/* ── 정보 박스 — 피그마 448:18278 (w=618 h=65 bg #303030, text 18/25 white center) */
.crc-info-box--inv {
  max-width: 618px;
  width: 100%;
  height: 65px;
  margin: 24px auto 0;
  padding: 0 10px;
  background: #303030;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.crc-info-box--inv p {
  margin: 0;
  font-size: 18px;
  color: #ffffff;
  font-weight: 400;
  line-height: 25px;
  font-family: 'Nanum Gothic', sans-serif;
}

/* ── 하단 버튼 3개 래퍼 ─────────────────────────────────────── */
.crc-btn-wrap--inv {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 34px;
}

/* ── 카카오톡 공유하기 버튼 (밝은 노랑) ─────────────────────── */
.crc-btn-kakao {
  width: 210px;
  height: 50px;
  background: #ffe032;
  color: #303030;
  border: none;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
}

.crc-btn-kakao:hover {
  background: #f5d52e;
}

/* ── 문자 공유하기 버튼 (틸) ────────────────────────────────── */
.crc-btn-sms {
  width: 210px;
  height: 50px;
  background: #3EB5C9;
  color: #303030;
  border: none;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
}

.crc-btn-sms:hover {
  background: #34a3b5;
}

/* ── 내 참여보기 버튼 (라임 그린) ──────────────────────────── */
.crc-btn-myview {
  width: 180px;
  height: 50px;
  background: #b7cd47;
  color: #303030;
  border: none;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
}

.crc-btn-myview:hover {
  background: #a6bb3d;
}


/* ============================================================
   판매등록 초대코드 — 반응형 (≤1200px : 모바일 레이아웃)
============================================================ */
@media (max-width: 1200px) {

  /* 모달 헤더: step2와 동일 패턴 */
  .crc-modal-header--inv {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0;
    height: 112px;
    padding: 0 50px;
    overflow: visible;
  }

  /* 모바일 타이틀 — 피그마 448:18546 Bold 26px */
  .crc-modal--inv .crc-modal-title {
    font-size: 26px;
    line-height: 24px;
  }

  /* 배지 — 피그마 448:18548 (x=112 y=301 w=150 h=40, header bottom=273 → top gap=28) */
  .crc-badge-inv {
    position: absolute;
    top: calc(100% + 28px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 0;
    border-radius: 0;
    width: 150px;
    height: 40px;
    z-index: 2;
  }

  /* 닫기 버튼 — 피그마 448:18547 (x=316 y=180, modal top=161 → top=19) */
  .crc-modal-header--inv .crc-modal-close {
    top: 19px;
  }

  /* 모달 본문: 배지 공간 확보 (step2 패턴) */
  .crc-modal--inv .crc-modal-body {
    padding: 95px 10px 37px;
  }

  /* 배너: 모바일 둥근 직사각형 */
  .crc-modal--inv .crc-info-banner {
    border-radius: 10px;
    margin-bottom: 40px;
  }

  /* "코리셋DAO는" 모바일만 Bold (피그마 448:18594) */
  .crc-banner-inv-bold-m {
    font-weight: 800;
  }

  /* 폼: 모바일 max-width 해제 + 패딩 */
  .crc-form--inv {
    max-width: none;
    padding: 0 12px;
  }

  /* 폼 행: 세로 스택 */
  .crc-form-group--inv {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: 8.5px 0;
  }

  /* 라벨: 풀 너비 */
  .crc-form-label--inv {
    width: 100%;
    font-size: 18px;
  }

  /* 입력: 피그마 448:18597 (text-center 16px, pl 23 pr 10) */
  .crc-input--inv {
    text-align: center;
    font-size: 16px;
    height: 50px;
    padding: 10px 10px 10px 23px;
  }

  /* 안내 텍스트 — 피그마 448:18622 (y=1039, form bottom=999 → gap 40, 16/23 #303030) */
  .crc-note--inv {
    text-align: left;
    padding: 0 10px;
    margin-top: 40px;
  }

  .crc-note--inv p {
    font-size: 16px;
    line-height: 23px;
  }

  .crc-note--inv .crc-note-br {
    display: none;
  }

  .crc-info-box--inv .crc-note-br {
    display: none;
  }

  /* PC 전용 br 숨김 */
  .crc-inv-br {
    display: none;
  }

  /* 모바일 전용 br 표시 */
  .crc-inv-br-m {
    display: inline;
  }

  /* 정보 박스 — 피그마 448:18612 (h=114, padding top 23 left 19, text 16/23 white left) */
  .crc-info-box--inv {
    max-width: none;
    width: auto;
    height: auto;
    min-height: 114px;
    margin: 29px 10px 0;
    padding: 23px 19px;
    text-align: left;
    justify-content: flex-start;
  }

  .crc-info-box--inv p {
    font-size: 16px;
    line-height: 23px;
    text-align: left;
  }

  /* 버튼 3개: 모바일 세로 스택 — 피그마 448:18615 (w=200 h=50, gap 17) */
  .crc-btn-wrap--inv {
    flex-direction: column;
    align-items: center;
    gap: 17px;
    margin-top: 40px;
    padding: 0;
  }

  .crc-btn-wrap--inv .crc-btn-kakao,
  .crc-btn-wrap--inv .crc-btn-sms,
  .crc-btn-wrap--inv .crc-btn-myview {
    width: 200px;
    font-size: 18px;
  }

}

/* 피그마 모바일 단일 디자인(375) 기준이므로 ≤480 추가 override 없음.
   이전 font-size 16 축소 override는 @1200 피그마 값(18/16)을 덮어써 제거. */

.crc-referral-badge {
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);
  background: #e04d4d;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 6px 18px;
  border-radius: 6px;
  white-space: nowrap;
}

.crc-info-box--referral {
  background: #4a4a4a;
  color: #ffffff;
  border-radius: 6px;
  padding: 16px 20px;
  text-align: center;
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
}

.crc-btn-referral {
  width: 100%;
  max-width: 340px;
  height: 50px;
  background: #e04d4d;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
}

.crc-btn-referral:hover {
  background: #c93c3c;
}

@media (max-width: 1200px) {
  .crp-table-status {
    display: block
  }
  .crp-table-br {
    display: none
  }

  .crc-modal-header--step4 {
    position: relative;
    overflow: visible;
  }

  .crc-modal-header--step4 .crc-referral-badge {
    position: absolute;
    top: calc(100% + 23px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 0;
    width: 150px;
    height: 40px;
    border-radius: 4px;
    z-index: 2;
    white-space: nowrap;
  }

  .crc-modal-header--step4:has(.crc-referral-badge) ~ .crc-modal-body {
    padding-top: 80px;
  }
}

@media (max-width: 480px) {
  .crc-modal-header--step4 .crc-referral-badge {
    font-size: 14px;
  }
}


/* ============================================================
   매입신청 Step1 — 자격확인 모달 (crb- 접두사)
============================================================ */

/* ── 오버레이 ─────────────────────────────────────────────── */
.crb-overlay {
  position: fixed;
  top: var(--dao-header-h, 88px);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(39, 39, 41, 0.8);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px 40px;
  overflow-y: auto;
}

/* ── 모달 컨테이너 ────────────────────────────────────────── */
.crb-modal {
  width: 1200px;
  max-width: calc(100vw - 40px);
  background: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

/* ── 모달 헤더 (틸 배경) ──────────────────────────────────── */
.crb-modal-header {
  height: 100px;
  background: #e6dbc8;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 60px;
}

.crb-modal-title {
  font-size: 36px;
  font-weight: 700;
  color: #303030;
  letter-spacing: -0.5px;
}

/* 신규참여자 배지 — PC: 헤더 좌측 */
.crb-header-badge {
  position: absolute;
  left: 31px;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  color: #e6dbc8;
  border: none;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  width: 227px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  white-space: nowrap;
}

/* ── "지인전용" 배지 (매입 초대) ────────────────────────────── */
.crb-badge-inv {
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);
  background: #d46351;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 13px 52px;
  border-radius: 0;
  white-space: nowrap;
}

/* ── 지인전용 모달 본문 패딩 ───────────────────────────────── */
.crb-modal--inv .crb-modal-body {
  padding: 40px 100px 40px;
}

.crb-modal-close {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crb-close-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* ── 모달 본문 — 피그마 448:12469 body padding-top 42 (header→subtitle), bottom 32 */
.crb-modal-body {
  padding: 42px 120px 32px;
}

/* ── 부제목 — 피그마 448:12890 Bold 20px leading 30, gap to steps 24 */
.crb-subtitle {
  font-size: 20px;
  font-weight: 700;
  color: #303030;
  text-align: center;
  margin: 0 0 24px;
}

/* ── 스텝 인디케이터 — steps→banner gap 7 (피그마 738→745) */
.crb-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 7px;
}

.crb-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 180px;
}

.crb-step-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e6dbc8;
}

/* 비활성 스텝: 회색 원 */
.crb-step--inactive .crb-step-icon-wrap {
  background: rgba(230,219,200,0.6);
}

.crb-step-icon {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
}

/* 모바일 전용 아이콘 — PC에서는 숨김 */
.crb-step-icon-sm {
  display: none;
}

.crb-step-label {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.crb-step--active .crb-step-label {
  color: #303030;
}

.crb-step--inactive .crb-step-label {
  color: #cfcfcf;
}

/* 화살표 */
.crb-step-arrow-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  flex-shrink: 0;
}

.crb-arrow {
  width: 40px;
  display: block;
}

.crb-arrow-sm {
  display: none;
}

/* ── 정보 배너 — banner→form gap 20 (피그마 795→815) */
.crb-info-banner {
  background: #e6dbc8;
  border-radius: 50px;
  padding: 10px 27px;
  text-align: center;
  margin-bottom: 20px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crb-info-banner p {
  margin: 0;
  color: #303030;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
}

.crb-banner-br,
.crb-note-br {
  display: none;
}

.crb-info-banner strong {
  font-weight: 800;
}

/* ── 자격 확인 폼 ─────────────────────────────────────────── */
.crb-form {
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding: 0;
}

.crb-form-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  min-height: 48px;
}

/* 라벨 영역 — 피그마 448:12849 label area 247 (icon25 + gap17 + text 205) */
.crb-form-label {
  display: flex;
  align-items: center;
  gap: 17px;
  width: 247px;
  flex-shrink: 0;
}

/* PC: 상태 아이콘 25×25 (피그마 448:12882) */
.crb-form-label .crb-status-icon {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  order: -1;
}

/* 라벨 텍스트 — 피그마 Bold 20px #303030 leading 1.4 */
.crb-form-text {
  font-size: 20px;
  font-weight: 700;
  color: #303030;
  line-height: 1.4;
}

/* 값 영역 (오른쪽) */
.crb-form-value {
  flex: 1;
  background: #ffffff;
}

/* 읽기 전용 입력 — 피그마 448:12851 (w=525 h=48 r=8, text 20px #303030 left, py12 px16) */
.crb-input {
  width: 100%;
  height: 48px;
  background: rgba(230, 219, 200, 0.15);
  border: 1px solid #e6dbc8;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 20px;
  font-weight: 400;
  color: #303030;
  text-align: left;
  font-family: 'Nanum Gothic', sans-serif;
  outline: none;
  cursor: default;
}

div.crb-input {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.crb-input-sub {
  font-size: 14px;
}

.crb-input:focus {
  outline: none;
  border-color: #e8e8e8;
}

.crb-input--right {
  text-align: right;
  padding-right: 43px;
}

/* ── Step2 조건확인 — 좁은 폼 레이아웃 ──────────────────── */
.crb-form--narrow {
  max-width: 565px;
  margin-left: auto;
  margin-right: auto;
  gap: 8px;
}

.crb-form--narrow .crb-form-label {
  width: 152px;
}

.crb-form--narrow .crb-form-row {
  gap: 46px;
}

.crb-form--narrow .crb-form-value {
  flex: none;
  width: 367px;
}

/* ── 안내 텍스트 — 피그마 448:12891 (18px #303030 leading 30 center, form→note gap 34) */
.crb-note {
  margin: 34px 0 0;
  font-size: 18px;
  color: #303030;
  line-height: 30px;
  text-align: center;
}

.crb-note-em {
  color: #303030;
  font-weight: 800;
}

.crb-note-underline {
  text-decoration: none;
}

.crb-btn-view {
  background: #b7cd47;
  color: #303030;
}

/* ── Step4 매입완료 — 그리드 폼 레이아웃 ──────────────────── */
.crb-form--grid {
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 35px;
  row-gap: 10px;
  max-width: 831px;
  margin-left: auto;
  margin-right: auto;
}

.crb-form--grid .crb-form-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.crb-form-row--full {
  width: 100%;
}

.crb-form-row--half {
  width: calc(50% - 17.5px);
}

.crb-form--grid .crb-form-label {
  width: 134px;
  flex-shrink: 0;
}

.crb-form--grid .crb-form-value {
  flex: 1;
}

/* PC 전용 br (모바일에서 숨김) */
.crb-br-pc {
  display: inline;
}

/* Step4 안내 텍스트 */
.crb-note--step4 {
  text-align: center;
  font-size: 18px;
  color: #303030;
  line-height: 26px;
  margin-top: 30px;
}

/* Step4 정보 박스 (다크 배경) */
.crb-info-box {
  background: #303030;
  padding: 3px 30px;
  margin-top: 20px;
  text-align: center;
  max-width: 618px;
  margin-left: auto;
  margin-right: auto;
}

.crb-info-box p {
  margin: 0;
  font-size: 18px;
  color: #ffffff;
  font-weight: 400;
  line-height: 25px;
  font-family: 'Nanum Gothic', sans-serif;
}

/* 정보박스 desktop/mobile 버전 토글 (Figma 448:16319 vs 448:16659 텍스트 구조 상이) */
.crb-info-box-p--pc {
  display: block;
}
.crb-info-box-p--mobile {
  display: none;
}

.crb-info-box strong {
  font-weight: 800;
}

/* 2버튼 레이아웃 */
.crb-btn-wrap--double {
  gap: 20px;
  margin-top: 30px;
}

.crb-btn-close {
  width: 150px;
  height: 50px;
  background: #bababa;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
}

.crb-btn-close:hover {
  background: #a8a8a8;
}

.crb-btn-view {
  width: 220px;
  height: 50px;
  background: #b7cd47;
  color: #303030;
  border: none;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
}

.crb-btn-view:hover {
  background: #a6bb3d;
}

/* ── 다음단계 버튼 — note→button gap 24 (피그마 1187→1211) */
.crb-btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* 버튼 — 피그마 448:12801 Bold 20px leading 24 */
.crb-btn-next {
  width: 241px;
  height: 50px;
  background: #e6dbc8;
  color: #303030;
  border: none;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  letter-spacing: -0.3px;
}

.crb-btn-next:hover {
  background: #d4c9b3;
}


/* ============================================================
   매입신청 Step2 — 조건확인 전용 (crb-modal--step2)
   Figma 데스크톱 448:14025 (modal 1200×840)
============================================================ */

/* Step2 모달 본문 (피그마: steps x=607 → body pad-left 120,
   body pad-top = step y(514) - header bottom(493) = 21,
   body pad-bottom = modal bottom(1233) - button bottom(1200) = 33) */
.crb-modal--step2 .crb-modal-body {
  padding: 21px 120px 33px;
}

/* Step2 close 버튼 (피그마 right 32, top 25)
   base padding 4 제거: icon이 4px 안쪽으로 밀리던 문제 해결 */
.crb-modal--step2 .crb-modal-close {
  right: 32px;
  top: 25px;
  transform: none;
  padding: 0;
}

/* Step2 스텝 → 배너 간격 (피그마 step bottom 663 → banner top 668 = 5) */
.crb-modal--step2 .crb-steps {
  margin-bottom: 5px;
}

/* Step2 화살표 wrap: Figma Frame 15 center(y=74.5)에 정렬.
   base margin-bottom 25 제거 → flex align-items: center 기본 동작 복원 */
.crb-modal--step2 .crb-step-arrow-wrap {
  margin-bottom: 0;
}

/* Step2 배너 → 폼 간격 (피그마 banner bottom 718 → form top 769 = 51) */
.crb-modal--step2 .crb-info-banner {
  margin-bottom: 51px;
}

/* Step2 폼 narrow 전용 수치 교정 (desktop)
   - label color Figma #303030 (base #505364 override)
   - input color Figma #303030, height 50
   - input--right padding-right 10 (text flush right with 10px gap) */
.crb-form--narrow .crb-form-text {
  color: #303030;
}

.crb-form--narrow .crb-input {
  color: #303030;
  height: 50px;
  font-size: 18px;
}

/* Figma text right-edge가 input 외곽 right에서 47.5. border-box에서
   border 1 + padding-right X = 47.5 → X = 46.5 */
.crb-form--narrow .crb-input--right {
  padding-right: 46.5px;
}

/* Step2 안내 텍스트 (피그마 color #303030, line-height 30, margin-top 42) */
.crb-modal--step2 .crb-note {
  margin-top: 42px;
  color: #303030;
  line-height: 30px;
}

/* Step2 다음단계 버튼 wrap margin-top (피그마 notice bottom 1123 → button top 1150 = 27) */
.crb-modal--step2 .crb-btn-wrap {
  margin-top: 27px;
}

/* Step2 다음단계 버튼 (피그마 font 20 Bold, no letter-spacing) */
.crb-modal--step2 .crb-btn-next {
  font-size: 20px;
  letter-spacing: 0;
}

/* Step2 제목 letter-spacing 0 (피그마 tracking 값 없음, base -0.5 제거) */
.crb-modal--step2 .crb-modal-title {
  letter-spacing: 0;
}

/* Step2 폼 라벨 line-height 1.4 (피그마 leading-[1.4], base 1.3 override) */
.crb-form--narrow .crb-form-text {
  line-height: 1.4;
}

/* Step2 입력 padding-left 23 (피그마 pl-[23px], base padding 0 16 의 left 23 override) */
.crb-form--narrow .crb-input {
  padding-left: 23px;
}


/* ============================================================
   매입신청 Step3 — 확인/서명 (crb-modal--step3 스코프, PC)
   Figma 448:14433 (modal 1200×840, subtitle 없음, 폼 4행)
============================================================ */

/* close 위치 — 피그마 448:14834 x=1630 y=426 (modal 내 top=33 right=33), transform 제거 */
.crb-modal--step3 .crb-modal-close {
  top: 33px;
  right: 33px;
  transform: none;
}

/* body padding: top 21 (header→steps), bottom 33 (button→modal bottom) */
.crb-modal--step3 .crb-modal-body {
  padding: 21px 120px 33px;
}

/* steps→banner gap 5 (피그마 270→275, base 7 override) */
.crb-modal--step3 .crb-steps {
  margin-bottom: 5px;
}

/* banner→form gap 51 (피그마 325→376) */
.crb-modal--step3 .crb-info-banner {
  margin-bottom: 51px;
}

/* 라벨 색상: 피그마 448:14814 #505364 */
.crb-modal--step3 .crb-form-text {
  color: #505364;
}

/* 입력: 피그마 448:14811 h=50 border 1px #e6dbc8, 18px, text-right, inner box center (padding-right 60.5, -left 23) */
.crb-modal--step3 .crb-input {
  height: 50px;
  font-size: 18px;
  text-align: right;
  padding: 10px 60.5px 10px 23px;
  border-color: #e6dbc8;
}

/* form bottom → note top 52 */
.crb-modal--step3 .crb-note {
  margin-top: 52px;
}

/* note bottom → button top 45 */
.crb-modal--step3 .crb-btn-wrap {
  margin-top: 45px;
}

/* 버튼 letter-spacing 제거 (피그마 448:14767 0, base -0.3) */
.crb-modal--step3 .crb-btn-next {
  letter-spacing: 0;
}

/* desktop에서도 note 줄바꿈 (피그마 448:14833 2줄) */
.crb-modal--step3 .crb-note-br {
  display: inline;
}

/* step3 title letter-spacing 제거 (Figma 448:14835 tracking 없음) */
.crb-modal--step3 .crb-modal-title {
  letter-spacing: 0;
}

/* 배너 "시스템"↔"입니다" 사이 공백: desktop만 표시 (Figma 448:14832 "시스템 입니다") */
.crb-banner-desktop-sp {
  display: inline;
}

/* note 모바일 전용 br: 데스크톱 숨김 (Figma 448:14833 "수 없으며" 자동 흐름) */
.crb-note-mobile-br {
  display: none;
}


/* ============================================================
   매입신청 Step4 — 매입완료 (crb-modal--step4 스코프, PC)
   Figma 448:15901 (modal 1200×840)
============================================================ */

/* step4 title letter-spacing 제거 (Figma 448:16312 tracking 없음) */
.crb-modal--step4 .crb-modal-title {
  letter-spacing: 0;
}

/* close 25×25 (Figma 448:16233 실측, base 24×24 override) top=25 right=32 */
.crb-modal--step4 .crb-close-icon {
  width: 25px;
  height: 25px;
}

.crb-modal--step4 .crb-modal-close {
  top: 25px;
  right: 32px;
  transform: none;
}

/* body padding: top 21 (header 493→steps 514), bottom 33 (button 1212→modal 1233 diff 21 but base 33 OK) */
.crb-modal--step4 .crb-modal-body {
  padding: 21px 120px 21px;
}

/* steps→banner gap 5 (Figma 663→668) */
.crb-modal--step4 .crb-steps {
  margin-bottom: 5px;
}

/* banner→form gap 27 (Figma 718→745) */
.crb-modal--step4 .crb-info-banner {
  margin-bottom: 27px;
}

/* 폼 그리드 label→input gap 14 (Figma 672+134=806, input x=820 → gap 14; base 16 override) */
.crb-modal--step4 .crb-form--grid .crb-form-row {
  gap: 14px;
}

/* 입력 — Figma 448:16282 bg rgba(230,219,200,0.2) border-2 #e6dbc8 radius 8 text-center 18 */
.crb-modal--step4 .crb-input {
  background: rgba(230, 219, 200, 0.2);
  border: 2px solid #e6dbc8;
  height: 50px;
  font-size: 18px;
  text-align: center;
  padding: 10px;
}

/* --right modifier 무력화 (Step4는 모든 행 text-center per Figma) */
.crb-modal--step4 .crb-input--right {
  text-align: center;
  padding-right: 10px;
}

/* form→note gap (form bottom 975 → note top 1004 = 29) */
.crb-modal--step4 .crb-note--step4 {
  margin-top: 29px;
}

/* note→info box gap 10 (Figma 1063→1073) */
.crb-modal--step4 .crb-info-box {
  margin-top: 10px;
}

/* info box→btn gap 24 (Figma 1138→1162) + 버튼 사이 gap 12 */
.crb-modal--step4 .crb-btn-wrap--double {
  gap: 12px;
  margin-top: 24px;
}


/* ============================================================
   매입신청 모달 — 반응형 (≤1200px : 모바일 레이아웃)
============================================================ */
@media (max-width: 1200px) {

  /* 오버레이: 모바일 헤더(56px) 아래부터 + 탭바(72px) 위까지 */
  .crb-overlay {
    top: 56px;
    bottom: 72px;
    padding: 0;
    align-items: flex-start;
    background: rgba(39, 39, 41, 0.75);
  }

  /* 모달: 거의 전체 너비, 중앙 정렬 */
  .crb-modal {
    width: calc(100% - 30px);
    max-width: none;
    margin: 16px auto;
    border-radius: 15px;
  }

  /* 모달 헤더 — 피그마 448:13575 height 117, 제목만 center (subtitle은 body) */
  .crb-modal-header {
    height: 117px;
    padding: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  .crb-modal-title {
    font-size: 26px;
    line-height: 24px;
  }

  /* 지인전용 배지 — 모바일: 제목 아래 중앙 */
  .crb-badge-inv {
    position: absolute;
    top: calc(100% + 23px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 8px 41px;
    border-radius: 0;
    width: auto;
    height: auto;
    z-index: 2;
  }

  .crb-modal--inv .crb-modal-body {
    padding: 95px 10px 45px;
  }

  /* 신규참여자 배지 — 모바일: 제목 아래 중앙 */
  .crb-header-badge {
    position: static;
    transform: none;
    font-size: 18px;
    width: 150px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* close — 피그마 448:13577 20×20 (x=315 y=226, modal top=202, right=31 top=24) */
  .crb-close-icon {
    width: 20px;
    height: 20px;
  }

  .crb-modal-close {
    right: 31px;
    top: 24px;
    transform: none;
  }

  /* 모달 본문 — subtitle top gap 34, button→bottom gap 50 */
  .crb-modal-body {
    padding: 34px 10px 50px;
  }

  /* 부제목 — 피그마 448:13668 Bold 20px leading 30 */
  .crb-subtitle {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 19px;
  }

  /* 스텝 인디케이터 — steps→banner gap 16 */
  .crb-steps {
    gap: 7px;
    margin-bottom: 16px;
  }

  .crb-step {
    flex: 1;
    min-width: 0;
    gap: 10px;
  }

  /* 모바일: 작은 아이콘으로 교체 */
  .crb-step-icon {
    display: none;
  }

  .crb-step-icon-wrap {
    width: 45px;
    height: 45px;
  }

  .crb-step-icon-sm {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  .crb-step-label {
    font-size: 14px;
    line-height: 17px;
  }

  /* 화살표 — 모바일 전환 */
  .crb-step-arrow-wrap {
    margin-bottom: 18px;
  }

  .crb-arrow {
    display: none;
  }

  .crb-arrow-sm {
    display: block;
    width: 15px;
  }

  /* 정보 배너 — 피그마 448:13579 h=120 r=10, banner→form gap 35 */
  .crb-info-banner {
    border-radius: 10px;
    padding: 21px 20px;
    margin-bottom: 35px;
    margin-left: 0;
    margin-right: 0;
    height: auto;
    max-width: none;
  }

  /* Desktop은 "시스템 입니다." 전체 Bold, Mobile은 "입니다." Regular (피그마 448:13580) */
  .crb-banner-mobile-reg {
    font-weight: 400;
  }

  .crb-info-banner p {
    font-size: 17px;
    text-align: center;
  }

  .crb-banner-br,
  .crb-note-br {
    display: inline;
  }

  /* 폼 영역 — 피그마 form x=32, modal x=15 → body pad 10 + form pad 7 = 17 */
  .crb-form {
    padding: 0 7px;
    gap: 0;
  }

  /* 폼 행 — 피그마 448:13582 row h=78 (label 20 + gap 10 + input 48), row gap 21 */
  .crb-form-row {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    padding: 10.5px 0;
    min-height: 78px;
  }

  /* 모바일 라벨: 텍스트 왼쪽 / 상태아이콘 오른쪽 */
  .crb-form-label {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 8px;
  }

  /* 모바일 status icon — 피그마 20×20 우측 정렬 */
  .crb-form-label .crb-status-icon {
    order: 0;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
  }

  .crb-form-text {
    font-size: 18px;
    flex: 1;
    order: 0;
  }

  /* 값 영역 */
  .crb-form-value {
    width: 100%;
  }

  .crb-form-value:empty {
    display: none;
  }

  /* 입력 — 피그마 448:13588 radius 5, padding 12/16, left-align 16px */
  .crb-input {
    font-size: 16px;
    height: 48px;
    border-radius: 5px;
    padding: 12px 16px;
    text-align: left;
  }

  .crb-input--right {
    text-align: center;
    padding-right: 16px;
  }

  /* 안내 텍스트 — 피그마 448:13625 16/23 #303030
     form-row pb(10.5) + note mt(32.5) = 43 (피그마 form→note gap) */
  .crb-note {
    font-size: 16px;
    line-height: 23px;
    margin-top: 32.5px;
  }

  /* 다음단계 버튼 — 피그마 448:13623 241×50, note→button gap 30 */
  .crb-btn-wrap {
    margin-top: 30px;
  }

  .crb-btn-next {
    width: 100%;
    max-width: 241px;
    height: 50px;
    font-size: 18px;
  }

  /* Step2 좁은 폼 — 모바일 리셋 */
  .crb-form--narrow {
    max-width: none;
  }

  .crb-form--narrow .crb-form-label {
    width: 100%;
  }

  .crb-form--narrow .crb-form-row {
    gap: 8px;
  }

  .crb-form--narrow .crb-form-value {
    flex: none;
    width: 100%;
  }

  /* Step4 그리드 폼 — 모바일 단일열 */
  .crb-form--grid {
    max-width: none;
  }

  .crb-form-row--half {
    width: 100%;
  }

  .crb-form--grid .crb-form-label {
    width: 100%;
  }

  .crb-form--grid .crb-form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }

  /* PC 전용 br 숨김 */
  .crb-br-pc {
    display: none;
  }

  /* Step4 안내 텍스트 — 모바일 */
  .crb-note--step4 {
    text-align: left;
    font-size: 16px;
    line-height: 23px;
    padding: 0 17px;
    margin-top: 29px;
  }

  /* Step4 정보 박스 — 모바일 */
  .crb-info-box {
    max-width: none;
    margin: 26px 17px 0;
    padding: 18px 15px;
    text-align: left;
  }

  .crb-info-box p {
    font-size: 16px;
    line-height: 23px;
  }

  .crb-btn-close {
    width: 100px;
    height: 50px;
    font-size: 18px;
  }

  .crb-btn-view {
    flex: 1;
    width: auto;
    height: 50px;
    font-size: 18px;
  }

  .crb-btn-wrap--double {
    padding: 0 17px;
    margin-top: 25px;
  }

  /* ============================================================
     Step2 모바일 override — Figma 448:15242 (viewport 375)
  ============================================================ */

  /* close 아이콘 20×20 (Figma 실측) */
  .crb-modal--step2 .crb-close-icon {
    width: 20px;
    height: 20px;
  }

  /* close 버튼 위치 (Figma right 23, top 22) */
  .crb-modal--step2 .crb-modal-close {
    right: 23px;
    top: 22px;
  }

  /* body padding-top (header bottom 389 → steps top 412 = 23) */
  .crb-modal--step2 .crb-modal-body {
    padding: 23px 10px 45px;
  }

  /* steps margin-bottom (steps bottom 512 → banner top 529 = 17) */
  .crb-modal--step2 .crb-steps {
    margin-bottom: 17px;
  }

  /* 배너: pad 21/20, banner bottom 649 → form top 678 = mb 29 */
  .crb-modal--step2 .crb-info-banner {
    padding: 21px 20px;
    margin-bottom: 29px;
  }

  /* 폼 narrow 모바일: label #505364 (Figma), input center font 18 height 50,
     row group h=81 (label 20 + gap 11 + input 50), row pitch 100 → row-gap 19
     폼 좌우 pad 12 (Figma form x=36 - modal x=14 - body pad 10 = 12) */
  .crb-modal--step2 .crb-form--narrow {
    gap: 19px;
    padding: 0 12px;
  }

  .crb-modal--step2 .crb-form--narrow .crb-form-text {
    color: #505364;
    font-size: 18px;
  }

  .crb-modal--step2 .crb-form--narrow .crb-form-row {
    gap: 11px;
    padding: 0;
    min-height: auto;
  }

  .crb-modal--step2 .crb-form--narrow .crb-input {
    height: 50px;
    font-size: 18px;
    text-align: center;
    border-radius: 8px;
  }

  .crb-modal--step2 .crb-form--narrow .crb-input--right {
    text-align: center;
    padding-left: 23px;
    padding-right: 10px;
  }

  /* 안내 (Figma x=37 → modal inset 23, body pad 10, notice pad-l 13;
     form bottom 1159 → notice top 1198 = mt 39) */
  .crb-modal--step2 .crb-note {
    margin-top: 39px;
    padding: 0 13px;
    text-align: left;
    color: #303030;
    line-height: 23px;
    font-size: 16px;
  }

  /* 다음단계 버튼 (notice bottom 1244 → button top 1277 = mt 33, h 50) */
  .crb-modal--step2 .crb-btn-wrap {
    margin-top: 33px;
  }

  .crb-modal--step2 .crb-btn-next {
    height: 50px;
  }

  /* 배너 p line-height 26 (Figma leading-[26], base 30 override) */
  .crb-modal--step2 .crb-info-banner p {
    line-height: 26px;
  }

  /* 스텝 라벨 15 (Figma text-[15px], 모바일 base 13 override) */
  .crb-modal--step2 .crb-step-label {
    font-size: 15px;
  }

  /* ============================================================
     매입신청 Step3 — 확인/서명 (모바일)
     Figma 448:15573 (modal 346×1000)
  ============================================================ */

  /* body padding: top 14 (header→steps gap), bottom 33 */
  .crb-modal--step3 .crb-modal-body {
    padding: 14px 10px 33px;
  }

  /* close — 피그마 448:15800 top 21 right 26 (x=314 y=293, modal top=272 x=14 w=346) */
  .crb-modal--step3 .crb-modal-close {
    top: 21px;
    right: 26px;
  }

  /* banner→form gap 28 */
  .crb-modal--step3 .crb-info-banner {
    margin-bottom: 28px;
  }

  /* form — 피그마 448:15801 x=36 / body pad 10 → form pad 12, row gap 14 */
  .crb-modal--step3 .crb-form {
    padding: 0 12px;
    gap: 14px;
  }

  /* row — 세로 배치, label→input 내부 gap 11, row padding 제거 */
  .crb-modal--step3 .crb-form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
    padding: 0;
    min-height: 0;
  }

  /* 라벨 — 피그마 448:15805 Bold 18 #505364 */
  .crb-modal--step3 .crb-form-text {
    font-size: 18px;
    color: #505364;
  }

  /* 입력 — 피그마 448:15803 h=50 r=8, text-center 16, pl23 pr10 */
  .crb-modal--step3 .crb-input {
    height: 50px;
    font-size: 16px;
    text-align: center;
    padding: 10px 10px 10px 23px;
    border-radius: 8px;
  }

  /* 안내 텍스트 — form bottom(row 14 + no padding) → note top 35 */
  .crb-modal--step3 .crb-note {
    font-size: 16px;
    line-height: 23px;
    margin-top: 35px;
    text-align: left;
    padding-left: 5px;
  }

  /* note bottom → button top 29 */
  .crb-modal--step3 .crb-btn-wrap {
    margin-top: 29px;
  }

  /* 배너 "입니다." 모바일 Regular (피그마 448:15897) */
  .crb-banner-mobile-reg {
    font-weight: 400;
  }

  /* 배너 p line-height 26 (Figma 448:15897 leading-[26px], base 30 override) */
  .crb-modal--step3 .crb-info-banner p {
    line-height: 26px;
  }

  /* 스텝 라벨 15 (Figma 448:15862 text-[15px], 모바일 base 14 override) */
  .crb-modal--step3 .crb-step-label {
    font-size: 15px;
  }

  /* note-br 모바일 숨김 (desktop inline 규칙이 MQ 밖에 있어 모바일까지 적용되는 것 차단) */
  .crb-modal--step3 .crb-note-br {
    display: none;
  }

  /* note 모바일 전용 break — "수 없으며" 뒤 */
  .crb-modal--step3 .crb-note-mobile-br {
    display: inline;
  }

  /* 배너 desktop-sp: 모바일 숨김 ("시스템입니다" 공백 제거) */
  .crb-banner-desktop-sp {
    display: none;
  }

  /* ============================================================
     매입신청 Step4 — 매입완료 (모바일)
     Figma 448:16320 (modal 346×1400)
  ============================================================ */

  /* close — 피그마 448:16583 20×20 (top 20 right 19) */
  .crb-modal--step4 .crb-close-icon {
    width: 20px;
    height: 20px;
  }

  .crb-modal--step4 .crb-modal-close {
    top: 20px;
    right: 19px;
  }

  /* body padding: header bottom 278 → steps top 293 = 15; info-box 외 요소 좌우 여백은 각 요소 margin 으로 제어 */
  .crb-modal--step4 .crb-modal-body {
    padding: 15px 10px 33px;
  }

  /* steps→banner gap 10 (Figma 393→403) */
  .crb-modal--step4 .crb-steps {
    margin-bottom: 10px;
  }

  /* banner→form gap 27 (Figma 523→550) */
  .crb-modal--step4 .crb-info-banner {
    margin-bottom: 27px;
  }

  /* 배너 p line-height 26 (Figma 17/26 multiline) */
  .crb-modal--step4 .crb-info-banner p {
    line-height: 26px;
  }

  /* 스텝 라벨 15 (Figma text-[15px]) */
  .crb-modal--step4 .crb-step-label {
    font-size: 15px;
  }

  /* 배너 desktop-sp 모바일 숨김은 이미 위에서 처리. 모바일은 "시스템입니다." */

  /* 폼 행 label→input 내부 gap 5 (base grid mobile이 이미 5로 설정되어 있으나 명시) */
  .crb-modal--step4 .crb-form--grid .crb-form-row {
    gap: 5px;
  }

  /* 폼 행 사이 row-gap 18 (Figma pitch 93 - row h 75 = 18; base 10 override) */
  .crb-modal--step4 .crb-form--grid {
    row-gap: 18px;
  }

  /* 라벨 font 18 color #303030 (base mobile 18 ✓, color base #303030) */
  .crb-modal--step4 .crb-form-text {
    font-size: 18px;
    color: #303030;
  }

  /* 입력: border 2, bg 0.2, text-center 16, 높이 50 */
  .crb-modal--step4 .crb-input {
    height: 50px;
    font-size: 16px;
    text-align: center;
    border: 2px solid #e6dbc8;
    background: rgba(230, 219, 200, 0.2);
    padding: 10px;
    border-radius: 8px;
  }

  /* 노트 — 피그마 448:16656 16/23 left, form bottom 1183 → note top 1225 = mt 42,
     note x=36 / modal x=14 / body pad 10 → note padding-left 12 */
  .crb-modal--step4 .crb-note--step4 {
    margin-top: 42px;
    padding: 0 5px 0 12px;
    font-size: 16px;
    line-height: 23px;
    text-align: left;
  }

  /* 정보박스 — 피그마 448:16657 x=34 y=1326 w=313 h=114. note bottom 1294 → box top 1326 = mt 32.
     box margin from modal edge: left=34-14=20, body pad=10 → margin-left 10 (=20-10).
     padding: 참고 text x=49 y=1349 w=284 h=69. pad-top=1349-1326=23, pad-left=49-34=15, pad-bottom=22, pad-right=14 */
  .crb-modal--step4 .crb-info-box {
    margin: 32px 10px 0;
    padding: 23px 14px 22px 15px;
    max-width: none;
    text-align: left;
  }

  /* 정보박스 p (폰트 16 leading 23 white left) */
  .crb-modal--step4 .crb-info-box p {
    font-size: 16px;
    line-height: 23px;
  }

  /* desktop/mobile 정보박스 텍스트 토글 */
  .crb-modal--step4 .crb-info-box-p--pc {
    display: none;
  }
  .crb-modal--step4 .crb-info-box-p--mobile {
    display: block;
  }

  /* 버튼 — 닫기 x=34 w=100, 내참여 x=147 w=200 gap 13; box bottom 1440 → button top 1475 = mt 35
     button wrap padding-left 10 (닫기 abs x=34 = modal_x 14 + body_pad 10 + wrap_pad 10) */
  .crb-modal--step4 .crb-btn-wrap--double {
    gap: 13px;
    margin-top: 35px;
    padding: 0 0 0 10px;
    justify-content: flex-start;
  }

  /* 닫기 mobile: width 100 font 18 */
  .crb-modal--step4 .crb-btn-close {
    width: 100px;
    height: 50px;
    font-size: 18px;
    flex: none;
  }

  /* 내 참여보기 mobile: width 200 font 18 (base flex:1 override) */
  .crb-modal--step4 .crb-btn-view {
    width: 200px;
    flex: none;
    height: 50px;
    font-size: 18px;
  }

}

/* ── 매입신청 극소형 모바일 (≤480px) ──────────────────────── */
@media (max-width: 480px) {

  .crb-modal {
    width: calc(100% - 20px);
    margin: 12px auto;
  }

  .crb-step-label {
    font-size: 11px;
  }

  .crb-info-banner p {
    font-size: 17px;
  }

  .crb-form-text {
    font-size: 18px;
  }

}

/* ============================================================
   매입신청 Step4 — 지인전용 (.crb-modal--inv) 전용 override
   Figma 데스크톱 448:16665 / 모바일 448:17092
   (.crb-modal--step4 공통 레이아웃 위에 invitation 차이만 덮어쓰기)
============================================================ */

/* ── 데스크톱 ───────────────────────────────────────── */

/* title letter-spacing 0 (Figma 448:17080 tracking 없음) */
.crb-modal--inv .crb-modal-title {
  letter-spacing: 0;
}

/* body padding: top 19 (header 495→steps 514), bottom 31 (btn bottom 1222→modal 1253) */
.crb-modal--inv .crb-modal-body {
  padding: 19px 120px 31px;
}

/* close 위치: Figma 448:16997 x=1633 y=418 → 모달(487,393) 기준 top 25, right 29 */
.crb-modal--inv .crb-modal-close {
  top: 25px;
  right: 29px;
  transform: none;
}

.crb-modal--inv .crb-close-icon {
  width: 25px;
  height: 25px;
}

/* 지인전용 배지: Figma 448:17089 (522,421 180×50 bg #d46351) → 모달 기준 left 35 top 28 */
.crb-modal--inv .crb-badge-inv {
  left: 35px;
  top: 28px;
  transform: none;
  width: 180px;
  height: 50px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  background: #d46351;
  border-radius: 0;
}

/* input: Figma 1px border / bg 0.15 (step4 base 2px/0.2 override) */
.crb-modal--inv .crb-input {
  border: 1px solid #e6dbc8;
  background: rgba(230, 219, 200, 0.15);
}

/* 우열 text-right 복원 + padding-right 43.5 (지인전용 경로 / 2¢ / 100 USDT 3개) */
.crb-modal--inv .crb-input--right {
  text-align: right;
  padding-right: 43.5px;
}

/* 폼→노트 gap 39 (Figma form bottom 975 → note top 1014) */
.crb-modal--inv .crb-note--step4 {
  margin-top: 39px;
}

/* 노트→정보박스 gap 12 (Figma 1073 → 1085) & padding 3/10 (Figma box 618 - text 599 ≈ 19 horiz) */
.crb-modal--inv .crb-info-box {
  margin-top: 12px;
  padding: 3px 10px;
}

/* 정보박스→버튼 gap 22 (Figma 1150 → 1172) */
.crb-modal--inv .crb-btn-wrap--double {
  margin-top: 22px;
}

/* ── 모바일 (≤1200px) ───────────────────────────────── */
@media (max-width: 1200px) {

  /* 헤더 h=112 (Figma 448:17353, step4 mobile base 117 override) */
  .crb-modal--inv .crb-modal-header {
    height: 112px;
  }

  /* close (Figma 448:17355 x=314 y=261 20×20) → 모달(14,241) 기준 top 20, right 26 */
  .crb-modal--inv .crb-modal-close {
    top: 20px;
    right: 26px;
  }

  /* 지인전용 배지: Figma 448:17432 (112,381 150×40) → 헤더 아래 28px */
  .crb-modal--inv .crb-badge-inv {
    top: calc(100% + 28px);
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    background: #d46351;
    border-radius: 0;
  }

  /* body padding-top = steps(442) - modal(241) - header(112) = 89 */
  .crb-modal--inv .crb-modal-body {
    padding: 89px 10px 45px;
  }

  /* 스텝→배너 gap 21 (Figma steps bottom 542 → banner top 563) */
  .crb-modal--inv .crb-steps {
    margin-bottom: 21px;
  }

  /* 배너→폼 gap 43 (Figma banner bottom 683 → form top 726) */
  .crb-modal--inv .crb-info-banner {
    margin-bottom: 43px;
  }

  /* 라벨 color #505364 (Figma 18 bold #505364, step4 mobile #303030 override) */
  .crb-modal--inv .crb-form-text {
    color: #505364;
  }

  /* 폼 row-gap 17 (Figma pitch 92 - row h 75 = 17; step4 mobile 18 override) */
  .crb-modal--inv .crb-form--grid {
    row-gap: 17px;
  }

  /* row 간격 총합을 정확히 17px 로 맞추기 위해 base mobile row padding(10.5) 제거 */
  .crb-modal--inv .crb-form--grid .crb-form-row {
    padding: 0;
    min-height: 0;
  }

  /* input: 1px bg 0.15 pad pl23 pr10 py10 (Figma 448:17358 등 전수 동일) */
  .crb-modal--inv .crb-input {
    border: 1px solid #e6dbc8;
    background: rgba(230, 219, 200, 0.15);
    padding: 10px 10px 10px 23px;
  }

  /* 노트: form bottom(1445) → note top(1486) gap 41, padding-left 13 (Figma x=37) */
  .crb-modal--inv .crb-note--step4 {
    margin-top: 41px;
    padding: 0 5px 0 13px;
  }

  /* 정보박스: note bottom(1555) → box top(1596) gap 41, padding ≈ 23 22 */
  .crb-modal--inv .crb-info-box {
    margin-top: 41px;
    padding: 23px 22px 22px 22px;
  }

  /* 버튼 wrap padding-left 7 (Figma 닫기 x=31 - modal 14 - body 10 = 7) */
  .crb-modal--inv .crb-btn-wrap--double {
    padding: 0 0 0 7px;
  }

}

.crc-role-badge--dealer {
  background: #edb323;
  color: #ffffff;
}

.crc-input--fixed {
  background: #ffffff;
  color: #888;
  cursor: default;
  text-align: center;
}


/* ============================================================
   랜딩 페이지 (land-)
============================================================ */

.land-body {
  font-family: 'Nanum Gothic', sans-serif;
  background: #272729;
  color: #f1f1f1;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  max-width: 100%;
}

/* ── 네비게이션 ──────────────────────────────────────────── */
.land-nav {
  position: relative;
  z-index: 100;
  padding: 20px 4%;
  background-color: #ffffff;
}

.land-nav-inner {
  display: flex;
  align-items: center;
  position: relative;
}

.land-logo-img {
  height: 73px;
  width: auto;
}

.land-nav-links {
  display: flex;
  gap: clamp(60px, 8vw, 170px);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.land-nav-link {
  font-size: 20px;
  font-weight: 700;
  color: #303030;
  text-decoration: none;
}

.land-nav-link:hover {
  color: #afce35;
}

.land-btn--login {
  background: #afce35;
  color: #ffffff;
  border: none;
}

.land-btn--signup {
  background: #ffffff;
  color: #afce35;
  border: 1px solid #afce35;
}

.land-nav-actions {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.land-btn {
  height: 48px;
  width: 173px;
  border-radius: 50px;
  font-size: 20px;
  font-weight: 800;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
}


.land-nav-mobile-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

/* 햄버거 체크박스 숨김 */
.land-menu-checkbox {
  display: none;
}

/* 드롭다운 오버레이 — PC 숨김 */
.land-menu-overlay {
  display: none;
}

/* ── 히어로 ─────────────────────────────────────────────── */
.land-hero {
  position: relative;
  height: 929px;
  overflow: hidden;
}

.land-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.land-hero-content {
  position: relative;
  z-index: 2;
  padding-top: 200px;
  padding-left: 5%;
}

.land-hero-title {
  font-size: 50px;
  font-weight: 800;
  color: #ffffff;
  line-height: 70px;
  letter-spacing: 0.5px;
  margin: 0 0 30px;
}

.land-hero-br-m {
  display: none;
}

.land-hero-desc {
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;
  line-height: 30px;
  margin: 0;
}

/* ── 공통 섹션 헤더 ──────────────────────────────────────── */
.land-section-header {
  text-align: center;
  margin-bottom: 60px;
}

.land-section-title {
  font-size: 60px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0 0 30px;
}

.land-section-title--left {
  text-align: left;
}

.land-text-white { color: #f1f1f1; }
.land-text-green { color: #afce35; }

.land-section-desc {
  font-size: 22px;
  font-weight: 400;
  color: #f1f1f1;
  line-height: 32px;
  margin: 0;
}

/* ── 카드 섹션 ──────────────────────────────────────────── */
.land-cards {
  background: #272729;
  padding: 201px 96px 201px;
}

.land-cards-row {
  display: flex;
  gap: 40px;
  justify-content: center;
}

.land-card {
  width: 387px;
  padding: 80px 40px 60px;
  border-radius: 15px;
  text-align: center;
}

.land-card--dark {
  background: #505364;
}

.land-card--dark .land-card-title,
.land-card--dark .land-card-desc {
  color: #f1f1f1;
}

.land-card--light {
  background: #ffffff;
}

.land-card--light .land-card-title,
.land-card--light .land-card-desc {
  color: #272729;
}

.land-card-title {
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 40px;
  letter-spacing: 0.5px;
}

.land-card-desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  margin: 0 0 50px;
}

.land-card-btn {
  display: inline-block;
  padding: 15px 39px;
  border-radius: 100px;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.5px;
}

.land-card-btn--green {
  background: #afce35;
  color: #505364;
}

.land-card-btn--dark {
  background: #505364;
  color: #ffffff;
}

/* ── 참여 통계 섹션 ──────────────────────────────────────── */
.land-stats {
  background: #505364;
  padding: 121px 5% 163px;
}

.land-stats .land-section-title {
  font-size: 55px;
}

.land-stats-slider {
  position: relative;
}

.land-stats-controls {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  margin-bottom: 30px;
  max-width: calc(375px * 3 + 40px * 2);
  margin-left: auto;
  margin-right: auto;
}

.land-slider-btn {
  width: 50px;
  height: 50px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.land-slider-btn img {
  width: 50px;
  height: 50px;
}

.land-stats-row {
  display: flex;
  gap: 40px;
  justify-content: center;
}

.land-stat-card {
  width: 375px;
  background: #272729;
  border-radius: 15px;
  overflow: hidden;
}

.land-stat-img-wrap {
  height: 335px;
  background: #ffffff;
  border-radius: 15px 15px 0 0;
  overflow: hidden;
}

.land-stat-img {
  width: 100%;
  height: 268px;
  object-fit: cover;
  margin-top: 30px;
}

.land-stat-info {
  padding: 25px 28px 30px;
}

.land-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.land-stat-row:last-child {
  margin-bottom: 0;
}

.land-stat-label {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  line-height: 32px;
}

.land-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #afce35;
  line-height: 32px;
  text-align: right;
}

/* ── 서비스 소개 섹션 ────────────────────────────────────── */
.land-service {
  background: #272729;
  padding: 201px 5% 101px;
}

.land-service .land-section-title {
  font-size: 55px;
}

.land-service-card {
  display: flex;
  background: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  max-width: 100%;
  margin: 0 auto;
}

.land-service-text {
  flex: 1;
  padding: 100px 60px;
}

.land-service-title {
  font-size: 45px;
  font-weight: 800;
  color: #303030;
  margin: 0 0 30px;
}

.land-service-desc {
  font-size: 22px;
  font-weight: 400;
  color: #303030;
  line-height: 28px;
  letter-spacing: 0.5px;
  margin: 0 0 50px;
}

.land-service-btn {
  display: inline-block;
  padding: 15px 39px;
  background: #272729;
  color: #ffffff;
  border-radius: 100px;
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
  line-height: 28px;
}

.land-service-img-wrap {
  width: 40%;
  flex-shrink: 0;
}

.land-service-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── FAQ 섹션 ────────────────────────────────────────────── */
.land-faq {
  background: #272729;
  padding: 100px 5% 120px;
  display: flex;
  gap: 5%;
}

.land-faq-left {
  flex: 0 0 35%;
}

.land-faq-desc {
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;
  line-height: 34px;
  margin: 0 0 60px;
}

.land-faq-img-wrap {
  max-width: 554px;
}

.land-faq-img {
  width: 100%;
  height: auto;
}

.land-faq-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.land-faq-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 92px;
  padding: 0 50px;
  border-radius: 15px;
  background: #f1f1f1;
  cursor: pointer;
}

.land-faq-item--active {
  background: #e34b5d;
}

.land-faq-question {
  font-size: 22px;
  font-weight: 700;
  color: #303030;
}

.land-faq-item--active .land-faq-question {
  color: #ffffff;
}

.land-faq-icon {
  width: 42px;
  height: 42px;
}

/* ── 푸터 ────────────────────────────────────────────────── */
.land-footer {
  background: #272729;
  padding: 60px 0 80px;
  text-align: center;
}

.land-footer-inner {
  max-width: 90%;
  margin: 0 auto;
}

.land-footer-logo {
  height: 103px;
  width: auto;
  margin-bottom: 40px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.land-footer-nav {
  margin-bottom: 20px;
}

.land-footer-nav a {
  color: #f1f1f1;
  text-decoration: none;
  font-size: 22px;
}

.land-footer-divider {
  color: #c5c5c5;
  margin: 0 15px;
  font-size: 22px;
}

.land-footer-biz {
  font-size: 22px;
  color: #f1f1f1;
  margin: 0 0 12px;
}

.land-footer-biz strong {
  font-weight: 700;
}

.land-footer-sep {
  color: #989898;
  margin: 0 15px;
}

.land-footer-addr {
  font-size: 22px;
  color: #f1f1f1;
  margin: 0 0 36px;
}

.land-footer-copy {
  font-size: 20px;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.5px;
}

/* ── 랜딩 모바일 반응형 (≤1200px) ────────────────────────── */
@media (max-width: 1200px) {

  .land-nav {
    padding: 20px 18px;
  }

  .land-logo-img {
    height: 41px;
  }

  .land-nav-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .land-nav-links {
    display: none;
    position: static;
    transform: none;
  }

  .land-nav-actions {
    display: none;
  }

  .land-nav-mobile-menu {
    display: block;
    margin-left: auto;
    width: 30px;
    height: 30px;
    padding: 0;
  }

  .land-nav-mobile-menu img {
    width: 30px;
    height: 30px;
  }

  /* ── 모바일 드롭다운 메뉴 ──────────────────────────────── */
  .land-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
  }

  .land-menu-overlay-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(48, 48, 48, 0.7);
  }

  .land-menu-dropdown {
    position: absolute;
    top: 70px;
    right: 0;
    width: 250px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1);
  }

  .land-menu-links {
    background: #ffffff;
    padding: 0;
  }

  .land-menu-links-dark {
    background: rgba(60, 60, 60, 0.95);
    padding: 0;
  }

  .land-menu-link--active {
    color: #3c3c3c !important;
    border-bottom: 1px solid #e8e8e8;
    position: relative;
  }

  .land-menu-link--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 42px;
    background: #afce35;
    border-radius: 0 2px 2px 0;
  }

  .land-menu-link--dark {
    color: #ffffff;
  }

  .land-menu-link {
    display: block;
    padding: 23px 35px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Nanum Gothic', sans-serif;
  }

  .land-menu-link:hover {
    color: #afce35;
  }

  .land-menu-btns {
    background: rgba(60, 60, 60, 0.95);
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .land-menu-btn {
    width: 100%;
    height: 50px;
    border-radius: 5px;
    font-size: 20px;
    font-weight: 800;
    font-family: 'Nanum Gothic', sans-serif;
    cursor: pointer;
  }

  .land-menu-btn--login {
    background: #afce35;
    color: #ffffff;
    border: none;
  }

  .land-menu-btn--signup {
    background: #ffffff;
    color: #afce35;
    border: 1px solid #afce35;
  }

  /* 체크박스 토글 */
  .land-menu-checkbox:checked ~ .land-menu-overlay {
    display: block;
  }

  .land-hero {
    height: 480px;
    background-color: #022813;
  }

  .land-hero-bg {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65%;
    object-fit: cover;
    object-position: center top;
  }

  .land-hero-content {
    padding-top: 35px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .land-hero-title {
    font-size: 28px;
    line-height: 38px;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
  }

  .land-hero-desc {
    font-size: 12px;
    line-height: 16px;
  }

  .land-hero-br {
    display: none;
  }

  .land-hero-br-m {
    display: inline;
  }

  .land-section-title {
    font-size: 36px;
  }

  .land-section-desc {
    font-size: 16px;
    line-height: 26px;
  }

  /* 카드 */
  .land-cards {
    padding: 60px 20px 80px;
  }

  .land-cards-row {
    flex-direction: column;
    gap: 30px;
    align-items: center;
  }

  .land-card {
    width: 333px;
    padding: 60px 20px 45px;
  }

  .land-card-title {
    font-size: 30px;
    margin-bottom: 20px;
  }

  .land-card-desc {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 40px;
  }

  /* 통계 */
  .land-stats {
    padding: 80px 20px;
  }

  .land-stats .land-section-title {
    font-size: 36px;
  }

  .land-stats-row {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .land-stat-card {
    width: 333px;
  }

  .land-stats-controls {
    justify-content: flex-end;
  }

  .land-stat-label {
    font-size: 20px;
  }

  /* 서비스 */
  .land-service {
    padding: 60px 10px 80px;
  }

  .land-service .land-section-title {
    font-size: 36px;
  }

  .land-service-card {
    flex-direction: column-reverse;
    padding: 44px 0;
  }

  .land-service-text {
    display: none;
  }

  .land-service-title {
    font-size: 30px;
  }

  .land-service-desc {
    font-size: 16px;
    line-height: 26px;
  }

  .land-service-img-wrap {
    width: 100%;
    height: 256px;
    flex-shrink: 1;
  }

  /* FAQ */
  .land-faq {
    flex-direction: column;
    padding: 60px 17px 80px;
    gap: 40px;
  }

  .land-faq-left {
    flex: none;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  .land-faq-left .land-faq-img-wrap {
    order: -2;
  }

  .land-faq-left .land-section-title {
    order: -1;
  }

  .land-faq .land-section-title--left {
    text-align: center;
  }

  .land-faq-desc {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 0;
  }

  .land-faq-img-wrap {
    max-width: 352px;
    margin: 0 auto;
  }

  .land-faq-right {
    gap: 14px;
  }

  .land-faq-item {
    height: 60px;
    padding: 0 17px;
    border-radius: 5px;
  }

  .land-faq-question {
    font-size: 16px;
  }

  .land-faq-icon {
    width: 30px;
    height: 30px;
  }

  /* 푸터 */
  .land-footer {
    padding-top: 0;
  }

  .land-footer-logo {
    height: 49px;
    margin-bottom: 30px;
  }

  .land-footer-nav {
    white-space: nowrap;
  }

  .land-footer-nav a {
    font-size: 11px;
  }

  .land-footer-divider {
    font-size: 11px;
    margin: 0 1px;
  }

  .land-footer-biz {
    font-size: 11px;
    margin-bottom: 5px;
  }

  .land-footer-sep {
    margin: 0 8px;
  }

  .land-footer-addr {
    font-size: 11px;
  }

  .land-footer-copy {
    font-size: 11px;
  }
}


/* ============================================================
   지갑 연결 모달 (wc- 접두사)
   피그마: 301:165 — 350×500px 모달
============================================================ */

/* ── 오버레이 (반투명 배경) ─────────────────────────────────── */
.wc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(39, 39, 41, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ── 모달 본체 ──────────────────────────────────────────────── */
/* 피그마: 350×500px, bg white, border-radius 16px */
.wc-modal {
  position: relative;
  width: 100%;
  max-width: 350px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  padding: 45px 14px 51px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── 닫기 버튼 ──────────────────────────────────────────────── */
/* 피그마 Close 노드: x=320, y=20, 14×14 (modal 350×500)
   → top=20, right=350-320-14=16, 버튼 크기 = 이미지 크기 14×14 */
.wc-close {
  position: absolute;
  top: 20px;
  right: 16px;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wc-close img {
  width: 14px;
  height: 14px;
}

/* ── 로고 영역 ──────────────────────────────────────────────── */
/* 피그마: 322×170px, bg #f4f4f4, border-radius 10px */
.wc-logo-area {
  width: 100%;
  height: 170px;
  background: #f4f4f4;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wc-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 피그마: CoReset 로고 128×32px */
.wc-logo-coreset {
  width: 128px;
  height: 32px;
  object-fit: contain;
}

/* 피그마: 링크 아이콘 24×24px */
.wc-logo-link {
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: 0.5;
}

/* 피그마: MetaMask 아이콘 44×41px */
.wc-logo-metamask {
  width: 44px;
  height: 41px;
  object-fit: contain;
}

/* ── 제목 ───────────────────────────────────────────────────── */
/* 피그마: 22px ExtraBold, color #333, 중앙 정렬 */
.wc-title {
  font-size: 22px;
  font-weight: 800;
  color: #333333;
  text-align: center;
  margin: 47px 0 29px;
  letter-spacing: -0.22px;
  line-height: 24px;
}

/* ── 설명 텍스트 ────────────────────────────────────────────── */
/* 피그마: 14px Bold, color #757575, line-height 24px */
.wc-desc {
  font-size: 14px;
  font-weight: 700;
  color: #757575;
  text-align: center;
  line-height: 24px;
  margin: 0 0 46px;
}

/* ── 버튼 영역 ──────────────────────────────────────────────── */
.wc-btn-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0 14px;
}

/* 버튼 공통 */
.wc-btn {
  height: 40px;
  border: none;
  border-radius: 5px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 취소 버튼 */
/* 피그마: 99px, bg #e4e4e4, 14px, color #757575 */
.wc-btn--cancel {
  width: 99px;
  background: #e4e4e4;
  color: #757575;
  font-size: 14px;
  flex-shrink: 0;
}

.wc-btn--cancel:hover {
  background: #d8d8d8;
}

/* 메타마스크 지갑 연결 버튼 */
/* 피그마: 189px, bg #ff6c00, 16px, color white */
.wc-btn--connect {
  flex: 1;
  background: #ff6c00;
  color: #ffffff;
  font-size: 16px;
}

.wc-btn--connect:hover {
  background: #e86200;
}

/* 지갑 연결 모달은 피그마 350×500 고정 레이아웃을 모바일에서도 동일하게 유지 (사이즈 작음)
   좁은 뷰포트(<390px)에서는 width:100%; max-width:350px로 자연스럽게 축소 */

/* ============================================================
   지갑 연결 모달 — 모바일 오버레이 padding 축소 (≤ 480px)
   overlay padding 20 → 10: 375~389 뷰포트에서 모달이 350px 풀 폭으로 렌더
============================================================ */
@media (max-width: 480px) {
  .wc-overlay {
    padding: 10px;
  }
}


/* ============================================================
   지갑정보 확인 및 약관동의 모달 (wt- 접두사)
   피그마: 301:276 — 450×500px 모달
============================================================ */

/* ── 오버레이 ───────────────────────────────────────────────── */
.wt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(39, 39, 41, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ── 모달 본체 ──────────────────────────────────────────────── */
/* 피그마: 450×500px, bg white, border-radius 16px
   padding-top 46 = title top y=46
   padding-bottom 44 = 500 − (submit y=416 + h=40) */
.wt-modal {
  position: relative;
  width: 100%;
  max-width: 450px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  padding: 46px 21px 44px;
  display: flex;
  flex-direction: column;
}

/* ── 닫기 버튼 ──────────────────────────────────────────────── */
/* 피그마 Close 노드: x=412, y=22, 14×14 (modal 450)
   → top=22, right=450-412-14=24, 버튼 크기 = 이미지 크기 14×14 */
.wt-close {
  position: absolute;
  top: 22px;
  right: 24px;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wt-close img {
  width: 14px;
  height: 14px;
}

/* ── 제목 ───────────────────────────────────────────────────── */
/* 피그마: 22px ExtraBold, #333, 중앙, h=24 (line-height 24) */
.wt-title {
  font-size: 22px;
  font-weight: 800;
  color: #333333;
  text-align: center;
  margin: 0 0 21px;
  letter-spacing: -0.22px;
  line-height: 24px;
}

/* ── 설명 ───────────────────────────────────────────────────── */
/* 피그마: 14px Bold, #757575, line-height 24px, 데스크톱 1줄 / 모바일 2줄 */
.wt-desc {
  font-size: 14px;
  font-weight: 700;
  color: #757575;
  text-align: center;
  line-height: 24px;
  letter-spacing: -0.14px;
  margin: 0 0 17px;
}

/* 모바일 전용 줄바꿈: 데스크톱 숨김, 모바일 활성 */
.wt-br-m {
  display: none;
}

@media (max-width: 480px) {
  .wt-br-m {
    display: inline;
  }
}

/* ── 지갑주소 영역 ──────────────────────────────────────────── */
/* 피그마: x=35, y=132, 377×83, bg #f4f4f4, border-radius 10
   modal padding-left 21 + margin-left 14 = 35, margin-right 17 → width 377
   내부: padding-top 17 (y=132→149), 2줄 텍스트(24+24=48, gap 0), padding-bottom 18 */
.wt-address-box {
  background: #f4f4f4;
  border-radius: 10px;
  padding: 17px 32px 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 17px 31px 14px;
}

/* 피그마: 12px Bold, #303030 */
.wt-address-label {
  font-size: 12px;
  font-weight: 700;
  color: #303030;
  line-height: 24px;
}

/* 피그마: 12px Regular, #303030, letter-spacing 0.36px */
.wt-address-value {
  font-size: 12px;
  font-weight: 400;
  color: #303030;
  line-height: 24px;
  letter-spacing: 0.36px;
  word-break: break-all;
}

/* ── 약관 항목 컨테이너 ─────────────────────────────────────── */
/* 피그마: x=41, y=246, 366×138
   modal padding-left 21 + margin-left 20 = 41, margin-right 22 → width 366
   세 항목 row-gap 23 (278→301, 333→356), terms → submit gap 32 */
.wt-terms {
  display: flex;
  flex-direction: column;
  gap: 23px;
  margin: 0 22px 32px 20px;
}

/* ── 개별 약관 항목 ─────────────────────────────────────────── */
/* 피그마 내부 gap 비대칭: bar→text 16, text→detail 9, detail→check 15
   uniform flex gap으로는 구현 불가 → 개별 margin-right 사용 */
.wt-term-item {
  display: flex;
  align-items: center;
}

/* 피그마: 3×28px, bg #d9d9d9, border-radius 10px */
.wt-term-bar {
  width: 3px;
  height: 28px;
  background: #d9d9d9;
  border-radius: 10px;
  flex-shrink: 0;
  margin-right: 16px;
}

/* 약관 텍스트 (Figma w=246) */
.wt-term-text {
  flex: 1;
  font-size: 12px;
  font-weight: 400;
  color: #6c6c6c;
  line-height: 16px;
  min-width: 0;
  margin-right: 9px;
}

/* (필수) / (선택) 강조 */
.wt-term-required {
  font-weight: 700;
  color: #434343;
}

.wt-term-optional {
  font-weight: 700;
  color: #434343;
}

/* 상세보기 버튼 */
/* 피그마: 59×16px 고정, bg #9d9d9d, 10px Regular white 중앙 */
.wt-term-detail {
  width: 59px;
  height: 16px;
  background: #9d9d9d;
  border: none;
  border-radius: 0;
  font-size: 10px;
  font-weight: 400;
  font-family: 'Nanum Gothic', sans-serif;
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wt-term-detail:hover {
  background: #8a8a8a;
}

/* 체크박스 */
/* 피그마: 18×18px, border 1px #cdcdcd, border-radius 5px */
.wt-term-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #cdcdcd;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
  position: relative;
}

.wt-term-check:checked {
  background: #afce35;
  border-color: #afce35;
}

.wt-term-check:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── 이메일 등록하기 버튼 ───────────────────────────────────── */
/* 피그마: 229px, bg #afce35, 16px Bold white, 중앙 */
.wt-submit {
  width: 229px;
  height: 40px;
  background: #afce35;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wt-submit:hover {
  background: #9dbc28;
}

.wt-submit:disabled {
  background: #9d9d9d;
  cursor: not-allowed;
}

/* ============================================================
   지갑정보 확인 및 약관동의 — 모바일 오버레이 padding 축소 (≤ 480px)
   모달 450w는 모바일에서 responsive shrink, overlay padding 20→10로 가용폭 확보
   (데스크톱과 동일한 레이아웃 로직 유지, 자연 축소) */
@media (max-width: 480px) {
  .wt-overlay {
    padding: 10px;
  }
}


/* ============================================================
   이메일 주소 등록 모달 (we- 접두사)
   피그마: 301:457 — 450×500px 모달
============================================================ */

/* ── 오버레이 ───────────────────────────────────────────────── */
.we-overlay {
  position: fixed;
  inset: 0;
  background: rgba(39, 39, 41, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ── 모달 본체 ──────────────────────────────────────────────── */
/* 피그마: 450×500px, bg white, border-radius 16px
   padding-top 46 = title top y=46, padding-bottom 22 = 500-(submit y 438+h 40) */
.we-modal {
  position: relative;
  width: 100%;
  max-width: 450px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  padding: 46px 33px 22px;
  display: flex;
  flex-direction: column;
}

/* ── 닫기 버튼 ──────────────────────────────────────────────── */
/* 피그마 Close 노드: x=412, y=22, 14×14 (modal 450)
   → top=22, right=450-412-14=24, 버튼 크기 = 이미지 크기 14×14 */
.we-close {
  position: absolute;
  top: 22px;
  right: 24px;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.we-close img {
  width: 14px;
  height: 14px;
}

/* ── 제목 ───────────────────────────────────────────────────── */
/* 피그마: 22px ExtraBold, #333, h=24 (line-height 24) */
.we-title {
  font-size: 22px;
  font-weight: 800;
  color: #333333;
  text-align: center;
  margin: 0 0 21px;
  letter-spacing: -0.22px;
  line-height: 24px;
}

/* ── 설명 텍스트 ────────────────────────────────────────────── */
/* 피그마: 14px Bold, #757575 */
.we-desc {
  font-size: 14px;
  font-weight: 700;
  color: #757575;
  text-align: center;
  line-height: 24px;
  margin: 0 0 10px;
}

.we-desc--code {
  margin: 0 0 10px;
}

/* ── 이메일 입력 행 ─────────────────────────────────────────── */
.we-email-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

/* ── 공통 인풋 ──────────────────────────────────────────────── */
.we-input {
  height: 40px;
  border: 1px solid #787878;
  border-radius: 5px;
  background: rgba(241, 241, 241, 0.12);
  font-size: 12px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  padding: 0 12px;
  outline: none;
}

.we-input::placeholder {
  color: #9e9e9e;
}

/* 피그마: 이메일 인풋 263px */
.we-input--email {
  flex: 1;
}

/* 피그마: 인증코드 인풋 203px, height 33px */
.we-input--code {
  flex: 1;
  height: 33px;
}

/* ── 공통 버튼 ──────────────────────────────────────────────── */
.we-btn {
  border: none;
  border-radius: 5px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 피그마: 이메일 전송 114px, bg #afce35, 14px */
.we-btn--send {
  width: 114px;
  height: 40px;
  background: #afce35;
  font-size: 14px;
}

.we-btn--send:hover {
  background: #9dbc28;
}

.we-btn--send:disabled {
  background: #9d9d9d;
  cursor: not-allowed;
}

/* 피그마: 확인 79px×33px, bg #afce35, 12px */
.we-btn--verify {
  width: 79px;
  height: 33px;
  background: #afce35;
  font-size: 12px;
}

.we-btn--verify:hover {
  background: #9dbc28;
}

.we-btn--verify:disabled {
  background: #9d9d9d;
  cursor: not-allowed;
}

/* ── 에러 메시지 ────────────────────────────────────────────── */
/* 피그마: 10px, #ff3232, container h=17 (y=172-189) */
.we-error {
  font-size: 10px;
  font-weight: 400;
  color: #ff3232;
  line-height: 17px;
  margin: 0;
  padding-left: 12px;
}

/* ── 구분선 ─────────────────────────────────────────────────── */
.we-divider {
  border: none;
  border-top: 1px solid #B9B9B9;
  margin: 17px 0 21px;
}

/* ── 인증코드 입력 행 ───────────────────────────────────────── */
/* 피그마: row x=80-369, modal padding-left 33 + padding 47 = 80 ✓
   row right: modal-right 33 + padding 48 = 81 → padding 0 48 0 47 */
.we-code-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  padding: 0 48px 0 47px;
}

/* ── 안내 텍스트 ────────────────────────────────────────────── */
/* 피그마: 10px Regular, #757575, hint bottom 330 → resend top 352 (gap 22) */
.we-hint {
  font-size: 10px;
  font-weight: 400;
  color: #757575;
  line-height: 13px;
  margin: 0 0 22px;
  text-align: center;
}

/* ── 재전송 행 ──────────────────────────────────────────────── */
/* 피그마 gap: 재전송 질문 텍스트 right edge ~ 재전송 버튼 left (x=246) 사이 23
   resend row bottom 368 → complete top 391 (gap 23) */
.we-resend-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 23px;
  margin-bottom: 23px;
}

/* 피그마: 10px, #303030 */
.we-resend-text {
  font-size: 10px;
  font-weight: 400;
  color: #303030;
}

/* 피그마: 59×16px, bg #303030, 10px white */
.we-btn--resend {
  width: 59px;
  height: 16px;
  background: #303030;
  border: none;
  font-size: 10px;
  font-weight: 400;
  font-family: 'Nanum Gothic', sans-serif;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.we-btn--resend:hover {
  background: #444444;
}

/* ── 인증 완료 메시지 ───────────────────────────────────────── */
/* 피그마: 14px Bold, #4867ff */
.we-complete {
  font-size: 14px;
  font-weight: 700;
  color: #4867ff;
  text-align: center;
  line-height: 24px;
  margin: 0 0 23px;
}

/* ── 메타마스크 서명하기 버튼 ───────────────────────────────── */
/* 피그마: 229px, bg #ff6c00, 16px Bold white */
.we-submit {
  width: 229px;
  height: 40px;
  background: #ff6c00;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.we-submit:hover {
  background: #e86200;
}

.we-submit:disabled {
  background: #9d9d9d;
  cursor: not-allowed;
}

/* ============================================================
   이메일 주소 등록 — 모바일 오버레이 padding 축소 (≤ 480px)
   모달 450w는 모바일에서 responsive shrink, overlay padding 20→10
   (데스크톱과 동일한 레이아웃 로직 유지) */
@media (max-width: 480px) {
  .we-overlay {
    padding: 10px;
  }
}


/* ============================================================
   지갑 등록 완료 모달 (wd- 접두사)
   피그마: 301:220 — 350×500px 모달
============================================================ */

/* ── 오버레이 ───────────────────────────────────────────────── */
.wd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(39, 39, 41, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ── 모달 본체 ──────────────────────────────────────────────── */
/* 피그마: 350×500px, bg white, border-radius 16px
   padding-top 45 = logo top y=45, padding-bottom 43 = 500-(버튼 y 417+h 40) */
.wd-modal {
  position: relative;
  width: 100%;
  max-width: 350px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  padding: 45px 14px 43px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── 닫기 버튼 ──────────────────────────────────────────────── */
/* 피그마 Close 노드: x=316, y=20, 14×14 (modal 350)
   → top=20, right=350-316-14=20, 버튼 크기 = 이미지 크기 14×14 */
.wd-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wd-close img {
  width: 14px;
  height: 14px;
}

/* ── 제목 ───────────────────────────────────────────────────── */
/* 피그마: 22px ExtraBold, #333, h=24 (line-height 24) */
.wd-title {
  font-size: 22px;
  font-weight: 800;
  color: #333333;
  text-align: center;
  margin: 47px 0 18px;
  letter-spacing: -0.22px;
  line-height: 24px;
}

/* ── 설명 텍스트 ────────────────────────────────────────────── */
/* 피그마: 14px Bold, #757575 */
.wd-desc {
  font-size: 14px;
  font-weight: 700;
  color: #757575;
  text-align: center;
  line-height: 24px;
  margin: 0 0 13px;
}

/* 피그마: 하단 설명 — line-height 20px */
.wd-desc--sub {
  line-height: 20px;
  margin: 0 0 36px;
}

/* ── 버튼 영역 ──────────────────────────────────────────────── */
/* 피그마 row: x=46, w=258 (modal 350, L/R gap 46)
   modal padding-left 14 + row padding-left 32 = 46 ✓
   cancel(99) + gap(15) + agree(144) = 258 ✓ */
.wd-btn-row {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 0 32px;
}

/* 버튼 공통 */
.wd-btn {
  height: 40px;
  border: none;
  border-radius: 5px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 취소 버튼 */
/* 피그마: 99px, bg #e4e4e4, 14px, #757575 */
.wd-btn--cancel {
  width: 99px;
  background: #e4e4e4;
  color: #757575;
  font-size: 14px;
  flex-shrink: 0;
}

.wd-btn--cancel:hover {
  background: #d8d8d8;
}

/* 동의하기 버튼 */
/* 피그마: 144px, bg #afce35, 16px, white */
.wd-btn--agree {
  flex: 1;
  background: #afce35;
  color: #ffffff;
  font-size: 16px;
}

.wd-btn--agree:hover {
  background: #9dbc28;
}

/* ============================================================
   지갑 등록 완료 — 모바일 오버레이 padding 축소 (≤ 480px)
   모달 350w는 모바일에서 responsive shrink, overlay padding 20→10
   (데스크톱과 동일한 레이아웃 로직 유지) */
@media (max-width: 480px) {
  .wd-overlay {
    padding: 10px;
  }
}


/* ============================================================
   인증 코드 입력 모달 (wv- 접두사)
   피그마: 301:486 — 350×350px 모달
============================================================ */

/* ── 오버레이 ───────────────────────────────────────────────── */
.wv-overlay {
  position: fixed;
  inset: 0;
  background: rgba(39, 39, 41, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ── 모달 본체 ──────────────────────────────────────────────── */
/* 피그마: 350×350px (정사각형), bg white, border-radius 16px
   overflow: hidden으로 하단 #303030 footer 라운드 처리 */
.wv-modal {
  position: relative;
  width: 100%;
  max-width: 350px;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── 닫기 버튼 ──────────────────────────────────────────────── */
/* 피그마 Close 노드: x=314, y=22, 14×14 (modal 350)
   → top=22, right=350-314-14=22, 버튼 크기 = 이미지 크기 14×14 */
.wv-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.wv-close img {
  width: 14px;
  height: 14px;
}

/* ── 상단 콘텐츠 영역 ──────────────────────────────────────── */
/* padding-top 60 = title y=60, padding-bottom 30 = hint(y=263) → footer(y=293)
   padding L=31 (code row x=31), R=30 (code row right edge = 31+289=320, modal-right gap 30) */
.wv-body {
  padding: 60px 30px 30px 31px;
  background: white;
  flex: 1;
}

/* ── 제목 ───────────────────────────────────────────────────── */
/* 피그마: 22px ExtraBold, #333, h=24 (line-height 24) */
.wv-title {
  font-size: 22px;
  font-weight: 800;
  color: #333333;
  text-align: center;
  margin: 0 0 38px;
  letter-spacing: -0.22px;
  line-height: 24px;
}

/* ── 설명 ───────────────────────────────────────────────────── */
/* 피그마: 14px Bold, #757575 */
.wv-desc {
  font-size: 14px;
  font-weight: 700;
  color: #757575;
  text-align: center;
  line-height: 24px;
  margin: 0 0 36px;
}

/* ── 인증코드 입력 행 ───────────────────────────────────────── */
/* 피그마: input 203 + gap 7 + btn 79 = 289 */
.wv-code-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
}

/* 피그마: 203×33px, border 1px #787878, border-radius 5px */
.wv-input {
  flex: 1;
  height: 33px;
  border: 1px solid #787878;
  border-radius: 5px;
  background: rgba(241, 241, 241, 0.12);
  font-size: 12px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  padding: 0 12px;
  outline: none;
}

.wv-input::placeholder {
  color: #9e9e9e;
}

/* 피그마: 79×33px, bg #afce35, 14px Bold white */
.wv-btn--verify {
  width: 79px;
  height: 33px;
  background: #afce35;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wv-btn--verify:hover {
  background: #9dbc28;
}

/* ── 안내 텍스트 ────────────────────────────────────────────── */
/* 피그마: 10px Regular, #757575, leading 13, 3줄 (h=39)
   x=37 (body content left x=31+margin 6), w=191, 좌측 정렬 */
.wv-hint {
  font-size: 10px;
  font-weight: 400;
  color: #757575;
  line-height: 13px;
  margin: 0 0 0 6px;
  width: 191px;
  text-align: left;
}

/* ── 하단 다크 바 ───────────────────────────────────────────── */
/* 피그마: height 57px 고정, bg #303030 (modal radius 16이 overflow: hidden으로 하단 라운드 처리)
   질문텍스트(w=120) + gap 9 + 재전송 버튼(w=59) = 188, 모달 350 중앙 → 좌/우 gap 81 */
.wv-footer {
  height: 57px;
  background: #303030;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0;
}

/* 피그마: 10px #f1f1f1, frame 고정 폭 120 (자연 텍스트 폭보다 큼 → 중앙 정렬 계산 고정) */
.wv-footer-text {
  font-size: 10px;
  font-weight: 400;
  color: #f1f1f1;
  width: 120px;
}

/* 피그마: 59×16px, bg #f1f1f1, 10px #303030 */
.wv-btn--resend {
  width: 59px;
  height: 16px;
  background: #f1f1f1;
  border: none;
  font-size: 10px;
  font-weight: 400;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wv-btn--resend:hover {
  background: #e0e0e0;
}

/* ============================================================
   인증 코드 입력 — 모바일 오버레이 padding 축소 (≤ 480px)
   모달 350w는 모바일에서 responsive shrink, overlay padding 20→10
   (데스크톱과 동일한 레이아웃 로직 유지) */
@media (max-width: 480px) {
  .wv-overlay {
    padding: 10px;
  }
}


/* ============================================================
   이메일 재전송 모달 (wr- 접두사)
   피그마: 301:508 — 350×350px 모달
============================================================ */

/* ── 오버레이 ───────────────────────────────────────────────── */
.wr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(39, 39, 41, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ── 모달 본체 ──────────────────────────────────────────────── */
/* 피그마: 350×350px (정사각형), bg white, radius 16
   padding-top 46 = title y=46, padding-bottom 20 = 350-(btn y 290+h 40) */
.wr-modal {
  position: relative;
  width: 100%;
  max-width: 350px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  padding: 46px 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── 닫기 버튼 ──────────────────────────────────────────────── */
/* 피그마 Close 노드: x=314, y=22, 14×14 (modal 350)
   → top=22, right=350-314-14=22, 버튼 크기 = 이미지 크기 14×14 */
.wr-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wr-close img {
  width: 14px;
  height: 14px;
}

/* ── 제목 ───────────────────────────────────────────────────── */
/* 피그마: 22px ExtraBold, #333, h=24 (line-height 24) */
.wr-title {
  font-size: 22px;
  font-weight: 800;
  color: #333333;
  text-align: center;
  margin: 0 0 17px;
  letter-spacing: -0.22px;
  line-height: 24px;
}

/* ── 메일 아이콘 ────────────────────────────────────────────── */
/* 피그마: 100×100px, 중앙 */
.wr-icon-wrap {
  width: 100px;
  height: 100px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wr-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── 설명 ───────────────────────────────────────────────────── */
/* 피그마: 14px Bold, #757575 */
.wr-desc {
  font-size: 14px;
  font-weight: 700;
  color: #757575;
  text-align: center;
  line-height: 24px;
  margin: 0 0 9px;
}

/* 피그마: 12px Regular, #757575, line-height 16px */
.wr-hint {
  font-size: 12px;
  font-weight: 400;
  color: #757575;
  text-align: center;
  line-height: 16px;
  margin: 0 0 20px;
}

/* ── 버튼 영역 ──────────────────────────────────────────────── */
/* 피그마 row: x=48, w=254 (modal 350, L/R gap 48)
   modal padding-left 22 + row padding 26 = 48 ✓
   cancel(99) + gap(9) + send(146) = 254 ✓ */
.wr-btn-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 0 26px;
}

/* 버튼 공통 */
.wr-btn {
  height: 40px;
  border: none;
  border-radius: 5px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 취소 — 피그마: 99px, bg #e4e4e4, #757575 */
.wr-btn--cancel {
  width: 99px;
  background: #e4e4e4;
  color: #757575;
  flex-shrink: 0;
}

.wr-btn--cancel:hover {
  background: #d8d8d8;
}

/* 이메일 전송 — 피그마: 146px, bg #afce35, white */
.wr-btn--send {
  flex: 1;
  background: #afce35;
  color: #ffffff;
}

.wr-btn--send:hover {
  background: #9dbc28;
}

/* ============================================================
   이메일 재전송 — 모바일 오버레이 padding 축소 (≤ 480px)
   모달 350w는 모바일에서 responsive shrink, overlay padding 20→10 */
@media (max-width: 480px) {
  .wr-overlay {
    padding: 10px;
  }
}


/* ============================================================
   이메일 인증 실패 모달 (wf- 접두사)
   피그마: 301:599 — 350×350px 모달
============================================================ */

.wf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(39, 39, 41, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* 피그마: 350×350, padding-top 46 = title y=46, padding-bottom 20 = 350-(btn y=290+h=40) */
.wf-modal {
  position: relative;
  width: 100%;
  max-width: 350px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  padding: 46px 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 피그마 Close: x=314, y=22, 14×14 → top=22, right=22, 버튼 = 이미지 크기 */
.wf-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf-close img {
  width: 14px;
  height: 14px;
}

/* 피그마: 22px ExtraBold, #333, h=24 */
.wf-title {
  font-size: 22px;
  font-weight: 800;
  color: #333333;
  text-align: center;
  margin: 0 0 17px;
  letter-spacing: -0.22px;
  line-height: 24px;
}

/* 피그마: 100×100px */
.wf-icon-wrap {
  width: 100px;
  height: 100px;
  margin: 0 auto 18px;
}

.wf-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 피그마: 14px Bold, #757575 */
.wf-desc {
  font-size: 14px;
  font-weight: 700;
  color: #757575;
  text-align: center;
  line-height: 24px;
  margin: 0 0 17px;
}

/* 피그마: 12px Regular, #757575 */
.wf-hint {
  font-size: 12px;
  font-weight: 400;
  color: #757575;
  text-align: center;
  line-height: 16px;
  margin: 0 0 28px;
}

/* 피그마: 119px, bg #afce35, 14px Bold white, 중앙 */
.wf-submit {
  width: 119px;
  height: 40px;
  background: #afce35;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf-submit:hover {
  background: #9dbc28;
}


/* ============================================================
   이메일 재전송 완료 모달 (wrc- 접두사)
   피그마: 301:541 — 350×350px 모달
============================================================ */

.wrc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(39, 39, 41, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* 피그마: 350×350, padding-top 46, padding-bottom 20 */
.wrc-modal {
  position: relative;
  width: 100%;
  max-width: 350px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  padding: 46px 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 피그마 Close: x=314, y=22, 14×14 → top=22, right=22 */
.wrc-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrc-close img {
  width: 14px;
  height: 14px;
}

.wrc-title {
  font-size: 22px;
  font-weight: 800;
  color: #333333;
  text-align: center;
  margin: 0 0 17px;
  letter-spacing: -0.22px;
  line-height: 24px;
}

.wrc-icon-wrap {
  width: 100px;
  height: 100px;
  margin: 0 auto 18px;
}

.wrc-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wrc-desc {
  font-size: 14px;
  font-weight: 700;
  color: #757575;
  text-align: center;
  line-height: 24px;
  margin: 0 0 17px;
}

.wrc-hint {
  font-size: 12px;
  font-weight: 400;
  color: #757575;
  text-align: center;
  line-height: 16px;
  margin: 0 0 28px;
}

.wrc-submit {
  width: 127px;
  height: 40px;
  background: #afce35;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrc-submit:hover {
  background: #9dbc28;
}


/* ============================================================
   지갑주소 확인 모달 (ws- 접두사)
   피그마: 301:583 — 350×350px 모달
============================================================ */

.ws-overlay {
  position: fixed;
  inset: 0;
  background: rgba(39, 39, 41, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* 피그마: 350×350 (정사각형), radius 16, overflow hidden으로 하단 다크 footer 라운드 */
.ws-modal {
  position: relative;
  width: 100%;
  max-width: 350px;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 피그마 Close: x=314, y=22, 14×14 → top=22, right=22 */
.ws-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.ws-close img {
  width: 14px;
  height: 14px;
}

/* ── 상단 콘텐츠 ───────────────────────────────────────────── */
.ws-body {
  padding: 46px 12px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
}

/* 피그마: 22px ExtraBold, #333, h=24 */
.ws-title {
  font-size: 22px;
  font-weight: 800;
  color: #333333;
  text-align: center;
  margin: 0 0 34px;
  letter-spacing: -0.22px;
  line-height: 24px;
}

/* 피그마: 326×83, bg #f4f4f4, radius 10
   내부 텍스트 x=31 y=122 → padding-top 18, padding-left 19, padding-right 19, padding-bottom 17
   2줄 텍스트 leading 24 (gap 0) */
.ws-address-box {
  width: 100%;
  background: #f4f4f4;
  border-radius: 10px;
  padding: 18px 19px 17px;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 19px;
}

.ws-address-label {
  font-size: 12px;
  font-weight: 700;
  color: #303030;
  line-height: 24px;
}

.ws-address-value {
  font-size: 12px;
  font-weight: 400;
  color: #303030;
  line-height: 24px;
  letter-spacing: -0.36px;
  word-break: break-all;
}

/* 피그마: 167px, bg #ff6c00, 14px Bold, #f1f1f1 */
.ws-copy-btn {
  width: 167px;
  height: 40px;
  background: #ff6c00;
  color: #f1f1f1;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ws-copy-btn:hover {
  background: #e86200;
}

/* ── 하단 다크 바 ───────────────────────────────────────────── */
/* 피그마: y=282-350, h=68, bg #303030
   텍스트 x=29 → padding-left 29, padding-right 27 (350-29-294=27), padding-vertical 16 */
.ws-footer {
  background: #303030;
  padding: 16px 27px 16px 29px;
}

/* 피그마: 11px, #f1f1f1, line-height 18px */
.ws-footer-text {
  font-size: 11px;
  font-weight: 400;
  color: #f1f1f1;
  line-height: 18px;
  margin: 0;
}


/* ============================================================
   라이선스 사전 동의 모달 (wl- 접두사)
   피그마: 301:642 — 350×450px 모달
============================================================ */

.wl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(39, 39, 41, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* 피그마: 350×450, padding-top 46 = title y=46, padding-bottom 22 = 450-(submit y=388+h=40) */
.wl-modal {
  position: relative;
  width: 100%;
  max-width: 350px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  padding: 46px 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 피그마 Close: x=318, y=17, 15×15 (다른 모달들과 달리 15px) → top=17, right=350-318-15=17 */
.wl-close {
  position: absolute;
  top: 17px;
  right: 17px;
  width: 15px;
  height: 15px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wl-close img {
  width: 15px;
  height: 15px;
}

/* 피그마: 22px ExtraBold, #333, h=24 */
.wl-title {
  font-size: 22px;
  font-weight: 800;
  color: #333333;
  text-align: center;
  margin: 0 0 23px;
  letter-spacing: -0.22px;
  line-height: 24px;
}

/* 피그마: 14px Bold, #757575, line-height 20px */
.wl-desc {
  font-size: 14px;
  font-weight: 700;
  color: #757575;
  text-align: center;
  line-height: 20px;
  letter-spacing: -0.14px;
  margin: 0 0 23px;
}

/* 피그마: 315×163, bg #f4f4f4, radius 10
   terms box bottom 319 → agree row top 348 gap 29 */
.wl-terms-box {
  width: 100%;
  height: 163px;
  background: #f4f4f4;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 29px;
}

.wl-terms-text {
  font-size: 12px;
  font-weight: 400;
  color: #303030;
  text-align: center;
  line-height: 24px;
}

/* ── 동의 체크 행 ───────────────────────────────────────────── */
.wl-agree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-left: 76px;
  margin-bottom: 22px;
  cursor: pointer;
}

/* 피그마: 18×18px, border 1px #cdcdcd, border-radius 5px */
.wl-agree-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #cdcdcd;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
  position: relative;
}

.wl-agree-check:checked {
  background: #afce35;
  border-color: #afce35;
}

.wl-agree-check:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 피그마: 13px Regular, #434343 */
.wl-agree-label {
  font-size: 13px;
  font-weight: 400;
  color: #434343;
  line-height: 16px;
}

/* 라이선스 PDF 다운로드 (보조 액션 — 뷰어 바로 아래) */
.wl-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 200px;
  height: 36px;
  background: #ffffff;
  color: #505050;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Nanum Gothic', sans-serif;
  border: 1px solid #d0d0d0;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
  margin: -14px 0 18px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wl-download:hover {
  background: #f7faed;
  border-color: #afce35;
  color: #6f8a1f;
}

.wl-download-icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  flex-shrink: 0;
}

/* 피그마: 200px, bg #afce35, 16px Bold white */
.wl-submit {
  width: 200px;
  height: 40px;
  background: #afce35;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wl-submit:hover {
  background: #9dbc28;
}

.wl-submit:disabled {
  background: #9D9D9D;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .wf-overlay,
  .wrc-overlay,
  .wl-overlay,
  .ws-overlay {
    padding: 10px;
  }
  /* wv-overlay는 상단 @media(line 14416)에서 padding 10 적용 — 여기서 제외 */
}


/* ============================================================
   시스템 관리 - 의장 운영 현황 (sa- 접두사)
   피그마: 319:16130 — 1920px 데스크톱
============================================================ */

/* ── 사이드바 활성 그룹 (시스템 관리 + 하위 메뉴) ─────────── */
/* 피그마: 277px 너비 흰색 박스, 시스템 관리 + 하위 메뉴 5개 포함 */
.sa-sidebar-active-group {
  position: relative;
  background: #ffffff;
  border-radius: 10px;
  margin: 0 0 0 0;
  padding: 18px 0 24px;
}

/* 좌측 활성 바 (피그마: 5.333×42px, top 13px from white box top) */
.sa-sidebar-active-group .dao-sidebar-active-bar {
  position: absolute;
  left: 0;
  top: 13px;
  width: 5.333px;
  height: 42px;
  transform: none;
}

/* 시스템 관리 항목 (활성) */
/* 피그마: 시스템 관리 텍스트 16px Bold, color #4779AE, 아이콘 28x28 */
.sa-sidebar-active-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px 0 32px;
  margin-bottom: 32px;
}

.sa-sidebar-active-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(45%) sepia(51%) saturate(484%) hue-rotate(174deg) brightness(91%) contrast(86%);
}

.sa-sidebar-active-label {
  font-size: 16px;
  font-weight: 700;
  color: #4779ae;
}

/* 하위 메뉴 — 피그마: 16px Bold #272729, bullet point, 51px 간격 */
.sa-sidebar-submenu {
  list-style: disc;
  margin: 0;
  padding: 0 0 0 92px;
  display: flex;
  flex-direction: column;
  gap: 29px;
}

.sa-sidebar-subitem {
  font-size: 16px;
  font-weight: 700;
  color: #272729;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  line-height: 22px;
  transition: opacity 0.2s;
}

.sa-sidebar-subitem::marker {
  color: #272729;
}

.sa-sidebar-subitem:hover {
  opacity: 0.7;
}

.sa-sidebar-subitem--active {
  color: #4779ae;
}

.sa-sidebar-subitem--active::marker {
  color: #4779ae;
}

/* ── 메인 영역 ──────────────────────────────────────────────── */
.sa-main {
  padding: 74px 95px 100px;
}

/* 페이지 제목 */
.sa-page-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 48px;
  color: #ffffff;
  margin: 0 0 36px;
  letter-spacing: -0.5px;
}

/* ── 통계 카드 그리드 (5개) ─────────────────────────────────── */
/* 피그마: 5열, 카드 288×300px */
.sa-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  margin-bottom: 74px;
}

/* 개별 통계 카드 */
.sa-stat-card {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 3.5px 5.5px rgba(0, 0, 0, 0.02);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 카드 상단 (다크 영역 — 아이콘 + 라벨) */
.sa-stat-card-top {
  background: #505364;
  height: 165px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 20px;
}

/* 아이콘 원형 */
.sa-stat-icon {
  width: 65px;
  height: 65px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3.5px 5.5px rgba(0, 0, 0, 0.02);
}

.sa-stat-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.sa-stat-icon--cyan   { background: #3eb5c9; }
.sa-stat-icon--red    { background: #f1634f; }
.sa-stat-icon--orange { background: #edb323; }
.sa-stat-icon--green  { background: #b7cd47; }

/* 카드 라벨 */
.sa-stat-label {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  line-height: 1.4;
}

/* 카드 하단 (수치 영역) */
.sa-stat-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 30px;
  gap: 8px;
}

.sa-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
}

.sa-stat-num {
  font-size: 32px;
  font-weight: 700;
  color: #505364;
  line-height: 1.4;
}

.sa-stat-unit {
  font-size: 18px;
  font-weight: 700;
  color: #505364;
  min-width: 50px;
}

/* ── 섹션 제목 ──────────────────────────────────────────────── */
.sa-section-title {
  font-size: 28px;
  font-weight: 800;
  line-height: 48px;
  color: #ffffff;
  margin: 0 0 22px;
  letter-spacing: -0.5px;
}

/* ── 오늘의 할 일 그리드 (2x2) ─────────────────────────────── */
.sa-tasks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  row-gap: 11px;
  margin-bottom: 74px;
}

/* 개별 카드 */
.sa-task-card {
  background: #505364;
  border-radius: 10px;
  box-shadow: 0 3.5px 5.5px rgba(0, 0, 0, 0.02);
  padding: 55px 24px;
  display: flex;
  align-items: center;
  gap: 31px;
}

.sa-task-card--single {
  padding: 40px 24px;
}

/* 좌측 영역 (아이콘 + 라벨) — Figma: 아이콘 끝 443 → 라벨 x=464 gap 21 */
.sa-task-card-left {
  display: flex;
  align-items: center;
  gap: 21px;
  flex: 0 0 auto;
  min-width: 308px;
}

/* 아이콘 */
.sa-task-icon {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sa-task-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.sa-task-icon--blue   { background: #4779ae; }
.sa-task-icon--green  { background: #b7cd47; }
.sa-task-icon--yellow { background: #edb323; }
.sa-task-icon--red    { background: #f1634f; }

/* 카드 라벨 (Figma 22/800 leading-[36px] #fff) */
.sa-task-label {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  line-height: 36px;
}

/* 우측 영역 (행들) */
.sa-task-card-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 29px;
}

/* 개별 행 */
.sa-task-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sa-task-row-label {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  min-width: 40px;
}

.sa-task-row-num {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  flex: 1;
  text-align: right;
  padding-right: 22px;
}

.mobile-sa-task-btns {
  display: flex;
  gap: 6px;
}

/* ── 버튼 ───────────────────────────────────────────────────── */
.sa-btn {
  height: 41px;
  border: none;
  border-radius: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
}

/* 보기 버튼 — 피그마: bg #E0E0E0, text #303030 */
.sa-btn--view {
  width: 70px;
  background: #e0e0e0;
  color: #303030;
}

.sa-btn--view:hover {
  background: #d0d0d0;
}

/* 승인하기 버튼 (기본) — 거버넌스 카드용 — 피그마: bg #4779AE, text white */
.sa-btn--approve {
  width: 110px;
  background: #4779ae;
  color: #ffffff;
}

.sa-btn--approve:hover {
  background: #3a6798;
}

/* 승인하기 버튼 — 스냅샷용 — 피그마: bg #EDB323, text #303030 */
.sa-btn--approve--yellow {
  background: #edb323;
  color: #303030;
}

.sa-btn--approve--yellow:hover {
  background: #d6a01f;
}

/* 승인하기 버튼 — 옵션용 — 피그마: bg #F1634F, text white */
.sa-btn--approve--red {
  background: #f1634f;
  color: #ffffff;
}

.sa-btn--approve--red:hover {
  background: #db5544;
}

/* 승인하기 버튼 — 거버넌스 투표용 — 피그마: bg #B7CD47, text #303030 */
.sa-btn--approve--green {
  background: #b7cd47;
  color: #303030;
}

.sa-btn--approve--green:hover {
  background: #a3b93f;
}

/* ── 최근 승인 내역 테이블 ──────────────────────────────────── */
.sa-history-box {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3.5px 5.5px rgba(0, 0, 0, 0.02);
  padding: 13px 0 26px;
}

.sa-history-table {
  width: 100%;
  border-collapse: collapse;
}

/* zebra striping — 홀수 행 흰색, 짝수 행 회색 */
.sa-history-table tr:nth-child(odd) {
  background: #ffffff;
}

.sa-history-table tr:nth-child(even) {
  background: #f1f1f1;
}

.sa-history-table td {
  padding: 16px 24px;
  font-size: 16px;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  vertical-align: middle;
  text-align: center;
}

.sa-history-time {
  width: 25%;
  color: #757575;
  text-align: left;
  padding-left: 120px;
}

/* PC/모바일 시간 포맷 토글 — 기본은 PC 표시 */
.sa-history-time--mobile {
  display: none;
}

.sa-history-time--pc {
  display: inline;
}

.sa-history-type {
  width: 20%;
  color: #303030;
}

.sa-history-desc {
  width: 35%;
  color: #303030;
}

.sa-history-status {
  width: 20%;
  color: #303030;
  text-align: center;
}

/* ============================================================
   시스템 관리 - 반응형 (≤ 1700px) — 통계/할일카드 축소
============================================================ */
@media (max-width: 1700px) {
  .sa-main {
    padding: 74px 20px 100px;
  }

  .sa-stat-card-top {
    height: 130px;
    gap: 10px;
  }

  .sa-stat-icon {
    width: 55px;
    height: 55px;
  }

  .sa-stat-icon img {
    width: 26px;
    height: 26px;
  }

  .sa-stat-label {
    font-size: 18px;
  }

  .sa-stat-num {
    font-size: 26px;
  }

  .sa-stat-unit {
    font-size: 15px;
    min-width: 42px;
  }

  .sa-task-card-left {
    min-width: 220px;
  }

  .sa-task-icon {
    width: 60px;
    height: 60px;
  }

  .sa-task-icon img {
    width: 30px;
    height: 30px;
  }

  .sa-task-label {
    font-size: 18px;
  }

  .sa-task-row-num {
    font-size: 24px;
  }
}

/* ============================================================
   시스템 관리 - 반응형 (≤ 1500px) — 태스크 그리드 단일 열 전환
   (사이드바 277 + main pad 40 + 2카드 min(≈543×2+10=1096)이 ≤1470 구간
    main 가용폭을 넘어 카드 우측 버튼·숫자가 잘리는 현상 방지)
============================================================ */
@media (max-width: 1500px) {
  .sa-tasks-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   시스템 관리 - 반응형 (≤ 1200px) — 할일카드 세로 정렬 (카드 내부 스택)
============================================================ */
@media (max-width: 1200px) {
  .sa-task-card {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .sa-task-card-left {
    min-width: 0;
  }

  .sa-task-card-right {
    width: 100%;
  }
}

/* ============================================================
   시스템 관리 - 반응형 (≤ 1300px) — 통계 카드 3열
============================================================ */
@media (max-width: 1300px) {
  .sa-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   시스템 관리 - 반응형 (≤ 1200px) — 모바일
============================================================ */
@media (max-width: 1200px) {

  /* 메인 패딩 */
  .sa-main {
    padding: 20px 10px 120px;
  }

  /* 페이지 제목 — 모바일 헤더에 표시되므로 숨김 */
  .sa-page-title {
    display: none;
  }

  /* 통계 카드 1열 — 가로 레이아웃 */
  .sa-stats {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 93px;
  }

  /* 모바일: 카드 전체 다크 배경, 단일 행 레이아웃 */
  .sa-stat-card {
    background: #505364;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 30px 17px;
    gap: 14px;
    overflow: visible;
  }

  .mobile-sa-stat-card {
    padding: 42px 17px;
  }

  /* 카드 상단 영역 — 아이콘 + 라벨 (좌측, transparent bg) */
  .sa-stat-card-top {
    background: transparent;
    height: auto;
    flex-direction: row;
    width: auto;
    flex: 0 1 auto;
    padding: 0;
    gap: 14px;
    justify-content: flex-start;
    align-items: center;
    min-width: 0;
  }

  .sa-stat-icon {
    width: 50px;
    height: 50px;
  }

  .sa-stat-icon img {
    width: 24px;
    height: 24px;
  }

  .sa-stat-label {
    font-size: 16px;
    text-align: left;
    color: #ffffff;
  }

  /* 카드 하단 영역 — 수치 (우측 정렬, transparent bg, white text) */
  .sa-stat-card-body {
    flex: 0 0 auto;
    padding: 0;
    gap: 4px;
  }

  .sa-stat-row {
    justify-content: flex-end;
    gap: 6px;
  }

  .sa-stat-num {
    font-size: 22px;
    color: #ffffff;
  }

  .sa-stat-unit {
    font-size: 13px;
    min-width: auto;
    color: #ffffff;
  }

  /* 섹션 제목 모바일 크기 */
  .sa-section-title {
    font-size: 20px;
    line-height: 1.4;
    margin: 0 0 32px;
    text-align: center;
  }

  /* 오늘의 할 일 — 1열, 세로 레이아웃 */
  .sa-tasks-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 89px;
  }

  .sa-task-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 37px 21px;
    gap: 27px;
    min-height: 302px;
  }

  .sa-task-card-left {
    flex-direction: column;
    align-items: center;
    min-width: 0;
    gap: 27px;
  }

  .sa-task-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
  }

  .sa-task-icon img {
    width: 26px;
    height: 26px;
  }

  .sa-task-label {
    font-size: 18px;
    text-align: center;
  }

  .mobile-sa-task-card {
    gap: 21px
  }

  .mobile-sa-task-column {
    display: grid;
    gap: 33px !important;
  }

  .mobile-sa-task-column .sa-task-row-num {
    text-align: center;
    padding: 0;
  }

  .mobile-sa-task-btns {
    display: flex;
    gap: 7px;
  }

  /* 모바일에서 PC용 줄바꿈 숨김 → 한 줄로 표시 */
  .sa-br-pc {
    display: none;
  }

  .sa-task-card-right {
    width: 100%;
    gap: 14px;
  }

  .sa-task-row {
    justify-content: center;
    gap: 7px;
  }

  .sa-task-row-label {
    font-size: 18px;
    min-width: 40px;
    text-align: left;
  }

  .sa-task-row-num {
    font-size: 22px;
    flex: 1;
    padding-right: 19px;
    min-width: 30px;
    text-align: end;
  }

  .sa-btn {
    height: 32px;
    font-size: 13px;
    padding: 0 10px;
  }

  .sa-btn--view {
    width: 60px;
  }

  .sa-btn--approve {
    width: 90px;
  }

  /* 최근 승인 내역 — 컴팩트 */
  .sa-history-box {
    padding: 10px 0;
    margin-left: -10px;
    margin-right: -10px;
    border-radius: 0;
  }

  .sa-history-table td {
    padding: 10px 6px;
    font-size: 11px;
  }

  .sa-history-time {
    width: auto;
    white-space: nowrap;
    padding-left: 12px;
  }

  /* 모바일에서는 짧은 포맷 표시 */
  .sa-history-time--pc {
    display: none;
  }

  .sa-history-time--mobile {
    display: inline;
  }

  .sa-history-type {
    width: auto;
  }

  .sa-history-status {
    width: auto;
    white-space: nowrap;
    padding-right: 12px;
  }
}

/* ============================================================
   시스템 관리 - 반응형 (≤ 480px)
============================================================ */
@media (max-width: 480px) {
  .sa-history-table td {
    padding: 8px 0px;
    font-size: 11px;
  }
}


/* ============================================================
   시스템 관리 - 사용자 관리 (sam- 접두사)
   피그마: 319:16469 — 1920px 데스크톱 / 319:17294 — 375px 모바일
============================================================ */

/* ── 페이지 제목 ─────────────────────────────────────────────── */
/* 피그마: 34px ExtraBold #fff, 좌측 정렬, 마진 36px */
.sam-page-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 48px;
  color: #ffffff;
  margin: 0 0 19px;
  letter-spacing: -0.5px;
}

/* ── 필터 카드 ───────────────────────────────────────────────── */
/* 피그마: 1476×255 다크그레이 카드, 좌측 폼 + 우측 액션 버튼
   레이아웃: 99px 좌패딩 + 폼영역(가변) + 55px gap + 274px 액션버튼 + 99px 우패딩
   1920px 초과 시 폼영역(.sam-filter-rows)은 우측으로 확장되며 actions와의 55px gap은 유지 */
.sam-filter-card {
  background: #505364;
  border-radius: 10px;
  padding: 50px 99px;
  display: flex;
  align-items: center;
  gap: 55px;
}

.sam-filter-rows {
  /* 큰 화면에서 가용 공간을 모두 흡수하여 우측으로 확장 */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 17px;
  min-width: 0;
}

.sam-filter-row {
  display: flex;
  align-items: center;
  gap: 0;
  justify-content: space-between;
  width: 100%;
}


/* 필터 라벨 — 가입일/역할/상태/검색 (3글자) 너비 63px, 라이선스(4글자) 78px */
/* 피그마: 18px Bold 흰색, 라벨→인풋 14px gap (margin-right로 표현) */
.sam-filter-label {
  flex-shrink: 0;
  width: 70px;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  text-align: end;
  font-family: 'Nanum Gothic', sans-serif;
  margin-right: 14px;
  white-space: nowrap;
}

/* 가입일 row 컨텐츠 (날짜 + 칩 그룹 가로 배열) */
/* 피그마: 시작일|종료일 사이 10px, 종료일→첫 칩 14px */
.sam-filter-row--date .sam-filter-row-content {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 0;
  justify-content: space-between;
}

/* 날짜 인풋 그룹 (시작일 + 종료일) — 종료일 다음에 칩 그룹과 14px 간격 */
.sam-dates {
  display: flex;
  flex: 1;
  gap: 10px;
  margin-right: 14px;
  min-width: 0;
}

/* 칩 그룹 (오늘/1주일/1개월/3개월) — 칩 사이 8px */
.sam-chip-group {
  display: flex;
  gap: 8px;
}

/* 개별 칩 버튼 — 피그마: 86×40px, 흰 배경 + 회색 테두리 */
.sam-chip {
  width: 86px;
  height: 40px;
  background: #ffffff;
  border: 1px solid #686868;
  border-radius: 8px;
  font-size: 16px;
  color: #000000;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  min-width: 0;
  box-sizing: border-box;
}

/* 활성 칩 — 피그마: 노란 배경 #edb323 */
.sam-chip--active {
  background: #edb323;
}

/* 역할/상태/라이선스 row — 3개 그룹 가로 배치 */
/* 피그마: 역할 그룹 → 상태 그룹 59px, 상태 그룹 → 라이선스 그룹 44px */
.sam-filter-row--triple {
  gap: 0;
}

.sam-filter-row--triple .sam-filter-group {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.sam-filter-row--triple .sam-filter-group:nth-child(1) {
  margin-right: auto;
}

.sam-filter-row--triple .sam-filter-group:nth-child(2) {
  margin-right: auto;
}

/* 라이선스 라벨(4글자) 폭 78 — 피그마 text w=78 */
.sam-filter-row--triple .sam-filter-group:nth-child(3) .sam-filter-label {
  width: 78px;
}

/* 검색 row 컨텐츠 (드롭다운 + 텍스트 input) */
/* 피그마: 사용자 ID select(200px) → text input(662px) 사이 10px */
.sam-filter-row--search .sam-filter-row-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

/* ── 셀렉트 드롭다운 (details/summary 기반, gov_main과 동일 스타일) ── */
/* 사이즈는 기존 sam-input--select(200×40)와 sam-perpage-select(181×45) 유지 */
.sam-select {
  position: relative;
  width: 200px;
  flex-shrink: 0;
}

/* 기본 삼각형 마커 제거 */
.sam-select summary {
  list-style: none;
}
.sam-select summary::-webkit-details-marker {
  display: none;
}

/* 토글 버튼 (닫힌 상태) */
.sam-select-toggle {
  width: 100%;
  height: 40px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
  font-size: 16px;
  color: rgba(48, 48, 48, 0.7);
  font-family: 'Nanum Gothic', sans-serif;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.sam-select-toggle:hover {
  border-color: #d0d0d0;
}

.sam-select[open] .sam-select-toggle {
  border-color: #3eb5c9;
  box-shadow: 0 0 0 3px rgba(62, 181, 201, 0.12);
}

.sam-select-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 화살표 아이콘 */
.sam-select-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.sam-select[open] .sam-select-chevron {
  transform: rotate(180deg);
}

/* 드롭다운 메뉴 (열린 상태) */
.sam-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  min-width: 100%;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 6px 0;
  margin: 0;
  z-index: 100;
  animation: sam-select-slide 0.2s ease;
}

@keyframes sam-select-slide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 메뉴 항목 */
.sam-select-item {
  padding: 10px 16px;
  font-size: 15px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #505364;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sam-select-item:hover {
  background: #f5f7fa;
  color: #303030;
}

/* 선택된 항목 */
.sam-select-item--active {
  color: #3eb5c9;
  font-weight: 700;
}

/* 페이지당 보기 셀렉트 (181×45) */
.sam-select--perpage {
  width: 181px;
}

.sam-select--perpage .sam-select-toggle {
  height: 45px;
  color: #3a3a3a;
}

/* ── 인풋 공통 ──────────────────────────────────────────────── */
/* 흰 배경, 라이트 회색 테두리, 둥근 모서리 8px */
.sam-input {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
}

.sam-input--date {
  flex: 1;
  /*min-width: 240px;*/
  justify-content: space-between;
}

.sam-input--select {
  width: 200px;
  gap: 8px;
}

.sam-input--select-sm {
  width: 200px;
}

.sam-input--text {
  flex: 1;
  padding: 0 16px;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  outline: none;
}

.sam-input--text::placeholder {
  color: rgba(48, 48, 48, 0.5);
}

.sam-input-text {
  font-size: 16px;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  line-height: 24px;
  white-space: nowrap;
}

.sam-input-text--placeholder {
  color: rgba(48, 48, 48, 0.7);
}

.sam-input-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

.sam-input-icon--chev {
  width: 24px;
  height: 24px;
}

/* 모바일 전용 placeholder 텍스트 — PC에서는 숨김 */
.sam-input-text--date-mobile {
  display: none;
}

/* ── 액션 버튼 (검색 / 초기화) ─────────────────────────────── */
/* 피그마: 검색 178×80, 노랑 #edb323 / 초기화 90×80, 흰색 */
.sam-filter-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.sam-btn {
  border: none;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  cursor: pointer;
  height: 80px;
  line-height: 1;
}

.sam-btn--search {
  width: 178px;
  background: #edb323;
}

.sam-btn--reset {
  width: 90px;
  background: #ffffff;
}

/* ── 데이터 카드 (툴바 + 테이블 통합 박스) ─────────────────── */
/* 피그마: 1476×650 흰 박스, 둥근 10px */
.sam-table-card {
  background: #ffffff;
  border-radius: 10px;
  margin-top: 73px;
  overflow: hidden;
}

/* 데이터 툴바 (데이터 총 + 15개씩 보기 + 엑셀 버튼) */
/* 피그마: 카드 w=1476, 데이터 총 텍스트 x=399(pad-left 50), 엑셀 업로드 right=1753 → pad-right 72 */
.sam-data-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 72px 23px 50px;
}

/* "데이터 총 000건" 텍스트 */
.sam-data-count {
  font-size: 18px;
  font-weight: 700;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
}

.sam-data-count span {
  font-weight: 400;
}

.sam-data-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* "15개씩 보기" 셀렉트 — 피그마: 181×45 */
.sam-perpage-select {
  width: 181px;
  height: 45px;
  border-radius: 8px;
  margin-right: 8px;
}

.sam-perpage-select .sam-input-text {
  font-size: 16px;
  color: #3a3a3a;
}

/* 엑셀 버튼 그룹 */
.sam-excel-group {
  display: flex;
  gap: 8px;
}

/* 엑셀 다운로드 / 업로드 버튼 — 피그마: 144×45 */
.sam-btn-excel {
  width: 144px;
  height: 45px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  border: 1px solid #4779ae;
  line-height: 1;
}

.sam-btn-excel--download {
  background: #4779ae;
  color: #ffffff;
}

.sam-btn-excel--upload {
  background: #ffffff;
  color: #4779ae;
}

/* ── 데이터 테이블 (div 기반 그리드) ───────────────────────── */
/* 10개 컬럼: No / 사용자ID / 이메일 / 지갑주소 / DAO 권한 / 역할 / 지갑인증 / 라이선스 / 상태 / 가입일시 */
.sam-table {
  width: 100%;
  padding: 0 0 7px;
}

.sam-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.1fr 1.1fr 1fr 1fr 1fr 1fr 0.5fr 1.5fr;
  align-items: center;
  height: 50px;
  min-width: 0;
}

/* 헤더 row — 다크그레이 #505364, 흰 텍스트 17px Bold */
.sam-row--head {
  background: #505364;
  height: 58px;
}

.sam-row--head .sam-cell {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
}

/* 셀 — 16px Regular #303030, 가운데 정렬 */
.sam-cell {
  text-align: center;
  font-size: 16px;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  line-height: 20px;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* 짝수 데이터 row — 라이트 블루그레이 zebra 줄무늬 */
.sam-table-body .sam-row:nth-child(even) {
  background: #F8F9FA;
}

/* 가입일시 — PC/모바일 별도 텍스트 */
.sam-date-mobile {
  display: none;
}

/* ── 페이지네이션 ─────────────────────────────────────────── */
/* 피그마: 가운데 정렬, 1 dropdown + 4개 chevron 버튼 */
.sam-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 30px;
  margin-top: 26px;
}

.sam-pag-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 12px;
  width: 72px;
  height: 44px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
}

.sam-pag-selector span {
  font-size: 14px;
  color: #344055;
  font-family: 'Inter', sans-serif;
}

.sam-pag-selector img {
  width: 16px;
  height: 16px;
}

.sam-pag-controls {
  display: flex;
  align-items: center;
  gap: 18px;
}

.sam-pag-btn {
  background: transparent;
  border: none;
  padding: 0;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sam-pag-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.2s;
}

.sam-pag-btn:hover img {
  opacity: 0.7;
}

@media (max-width: 1900px) {
  .sam-filter-card {
    display: grid;
  }

  .sam-filter-actions {
    width: 100%;
    display: flex;
    justify-content: center;
  }

}

/* ============================================================
   사용자 관리 - 반응형 (≤ 1500px) — 필터 카드 패딩 축소
============================================================ */
@media (max-width: 1200px) {
  .sam-filter-card {
    padding: 40px 50px;
    gap: 24px;
  }

  .sam-input--date {
    width: 200px;
  }

  .sam-select {
    width: 170px;
  }

  .sam-filter-row--triple .sam-filter-group:nth-child(1) {
    margin-right: 30px;
  }

  .sam-filter-row--triple .sam-filter-group:nth-child(2) {
    margin-right: 24px;
  }
}

/* ============================================================
   사용자 관리 - 반응형 (≤ 1300px) — 추가 압축
============================================================ */
@media (max-width: 1300px) {
  .sam-filter-card {
    padding: 30px 30px;
    gap: 18px;
  }

  .sam-input--date {
    width: 170px;
  }

  .sam-select {
    width: 150px;
  }

  .sam-input--text {
    min-width: 0;
  }

  .sam-chip {
    width: 70px;
  }

  .sam-btn--search {
    width: 130px;
  }

  .sam-btn--reset {
    width: 80px;
  }

  .sam-filter-row--triple .sam-filter-group:nth-child(1) {
    margin-right: 16px;
  }

  .sam-filter-row--triple .sam-filter-group:nth-child(2) {
    margin-right: 12px;
  }

  .sam-row {
    grid-template-columns: 1.1fr 0.9fr 1.1fr 1fr 0.9fr 0.9fr 0.8fr 0.8fr 0.4fr 1.3fr;
  }

  .sam-row--head .sam-cell {
    font-size: 15px;
  }

  .sam-cell {
    font-size: 14px;
  }

  .sam-data-toolbar {
    padding: 22px 30px 23px;
  }
}

/* ============================================================
   사용자 관리 - 반응형 (≤ 1200px) — 모바일 레이아웃
============================================================ */
@media (max-width: 1200px) {

  /* 가로 스크롤 방지 — sam-main 영역에서만 적용 */
  .sam-main {
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 7px;
    padding-right: 7px;
  }

  /* 페이지 제목 — 모바일 헤더가 "시스템 관리"이므로 사용자 관리 부제목 표시 */
  .sam-page-title {
    display: block;
    font-size: 20px;
    line-height: 1.4;
    color: #ffffff;
    text-align: center;
    margin: 26px 0 37px;
    letter-spacing: 0;
  }

  /* ── 필터 카드 — 세로 적층 ─────────────────────────────── */
  .sam-filter-card {
    flex-direction: column;
    align-items: stretch;
    padding: 53px 24px 35px;
    gap: 0;
    border-radius: 10px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .sam-filter-rows {
    gap: 24px;
  }

  /* 필터 row — 세로 정렬 (라벨 위, 인풋 아래) */
  .sam-filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .sam-filter-label {
    width: auto;
    text-align: left;
    font-size: 14px;
  }

  /* 가입일 row — 콘텐츠 세로 정렬 */
  .sam-filter-row--date .sam-filter-row-content {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* 시작일/종료일 — 2열 그리드 */
  .sam-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  /* 칩 그룹 — 4열 그리드 (피그마 칩 gap ≈ 3.9px) */
  .sam-chip-group {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    min-width: 0;
  }

  .sam-chip {
    width: 100%;
    height: 35px;
    font-size: 14px;
    border-radius: 5px;
    min-width: 0;
    /* 피그마 모바일: 비활성 칩 텍스트 #686868 (회색) */
    color: #686868;
  }

  /* 활성 칩 — 모바일에서도 텍스트는 검정 유지 */
  .sam-chip--active {
    color: #000000;
  }

  /* 역할/상태/라이선스 row — 세로 적층 */
  .sam-filter-row--triple {
    flex-direction: column;
    gap: 8px;
  }

  .sam-filter-row--triple .sam-filter-group {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
  }

  .sam-filter-row--triple .sam-filter-group + .sam-filter-group {
    margin-left: 0;
  }

  .sam-filter-row--triple .sam-filter-group .sam-filter-label {
    width: auto;
  }

  /* 검색 row — 콘텐츠 세로 정렬 */
  .sam-filter-row--search .sam-filter-row-content {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  /* 인풋 — 모바일 사이즈 */
  .sam-input {
    height: 35px;
    border-radius: 5px;
    padding: 0 12px;
  }

  .sam-input--date,
  .sam-input--text {
    width: 100%;
    min-width: 0;
  }

  .sam-input-text {
    font-size: 14px;
  }

  .sam-input--text {
    font-size: 14px;
    min-height: 35px;
  }

  .sam-dates {
    margin: 0;
  }

  /* 셀렉트 — 모바일 풀너비 + 35px */
  .sam-select {
    width: 100%;
  }

  .sam-select-toggle {
    width: 100%;
    height: 35px;
    border-radius: 5px;
    padding: 0 12px;
    font-size: 14px;
  }

  .sam-select-item {
    font-size: 14px;
    padding: 8px 12px;
  }

  /* 모바일에서는 placeholder 텍스트 표시, PC 텍스트 숨김 */
  .sam-input-text--date-pc {
    display: none;
  }

  .sam-input-text--date-mobile {
    display: inline;
  }

  /* 액션 버튼 — 가로 2열, 카드 하단 */
  .sam-filter-actions {
    flex-direction: row;
    gap: 7px;
    margin-top: 24px;
  }

  .sam-btn {
    flex: 1;
    height: 50px;
    font-size: 14px;
    border-radius: 5px;
  }

  .sam-btn--search,
  .sam-btn--reset {
    width: auto;
  }

  /* ── 데이터 카드 — 모바일 ─────────────────────────────── */
  .sam-table-card {
    margin-top: 38px;
    background: transparent;
    border-radius: 0;
    margin-left: -10px;
    margin-right: -10px;
  }

  /* 툴바 — "데이터 총" 우측 정렬 + 액션 행 */
  .sam-data-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 15px 10px 18px;
    gap: 13px;
    background: white;
  }

  .sam-data-count {
    font-size: 16px;
    text-align: right;
    color: #505364;
  }

  .sam-data-actions {
    justify-content: space-between;
    gap: 6px;
  }

  /* 15개씩 보기 — 모바일 사이즈 */
  .sam-select--perpage {
    width: 121px;
  }

  .sam-select--perpage .sam-select-toggle {
    height: 35px;
    border-radius: 5px;
    border-color: #f1f1f1;
    padding: 0 10px;
    font-size: 14px;
    color: rgba(48, 48, 48, 0.7);
  }

  .sam-excel-group {
    display: flex;
    gap: 6px;
  }

  .sam-btn-excel {
    width: 110px;
    height: 35px;
    font-size: 14px;
    border-radius: 5px;
  }

  /* ── 테이블 — 모바일 그리드 (2행으로 분할) ─────────────── */
  .sam-row {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.05fr);
    grid-template-areas:
      "no id email wallet role"
      "dao verify license status date";
    align-items: center;
    height: auto;
    padding: 8px 0;
    row-gap: 4px;
    width: 100%;
    min-width: 0;
  }

  .sam-row--head {
    background: #ffffff;
    padding: 0;
    row-gap: 2px;
    height: auto;
  }

  .sam-row--head .sam-cell {
    font-size: 13px;
    background: #505364;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* 헤더 첫 번째 줄 */
  .sam-row--head .sam-cell[data-col="no"],
  .sam-row--head .sam-cell[data-col="id"],
  .sam-row--head .sam-cell[data-col="email"],
  .sam-row--head .sam-cell[data-col="wallet"],
  .sam-row--head .sam-cell[data-col="role"] {
    background: #505364;
  }

  /* 헤더 두 번째 줄 */
  .sam-row--head .sam-cell[data-col="dao"],
  .sam-row--head .sam-cell[data-col="verify"],
  .sam-row--head .sam-cell[data-col="license"],
  .sam-row--head .sam-cell[data-col="status"],
  .sam-row--head .sam-cell[data-col="date"] {
    background: #636678;
  }

  .sam-cell {
    font-size: 11px;
    padding: 0 2px;
    line-height: 22px;
  }

  /* 그리드 area 매핑 */
  .sam-cell[data-col="no"]      { grid-area: no; }
  .sam-cell[data-col="id"]      { grid-area: id; }
  .sam-cell[data-col="email"]   { grid-area: email; }
  .sam-cell[data-col="wallet"]  { grid-area: wallet; }
  .sam-cell[data-col="dao"]     { grid-area: dao; }
  .sam-cell[data-col="role"]    { grid-area: role; }
  .sam-cell[data-col="verify"]  { grid-area: verify; }
  .sam-cell[data-col="license"] { grid-area: license; }
  .sam-cell[data-col="status"]  { grid-area: status; }
  .sam-cell[data-col="date"]    { grid-area: date; }

  /* 데이터 row 배경 — 흰색/zebra */
  .sam-table-body .sam-row {
    background: #ffffff;
  }

  .sam-table-body .sam-row:nth-child(even) {
    background: #f0f3f7;
  }

  /* 모바일 가입일시 — 짧은 포맷 표시 */
  .sam-date-pc {
    display: none;
  }

  .sam-date-mobile {
    display: inline;
  }

  /* ── 페이지네이션 — 모바일 ────────────────────────────── */
  .sam-pagination {
    margin-top: 24px;
    padding: 14px 30px;
    gap: 16px;
  }

  .sam-pag-selector {
    width: 54px;
    height: 28px;
    padding: 4px 6px;
    border-radius: 4px;
  }

  .sam-pag-selector span {
    font-size: 12px;
    font-weight: 700;
  }

  .sam-pag-controls {
    gap: 14px;
  }

  .sam-pag-btn {
    width: 28px;
    height: 28px;
  }
}

/* ============================================================
   사용자 관리 - 반응형 (≤ 480px) — 극소형 모바일
============================================================ */
@media (max-width: 480px) {
  .sam-cell {
    font-size: 10px;
    padding: 0 1px;
  }

  .sam-row--head .sam-cell {
    font-size: 12px;
  }

  .sam-perpage-select {
    width: 110px;
  }

  .sam-btn-excel {
    width: 100px;
    font-size: 13px;
  }
}

/* ============================================================
   사용자 관리 상세 (samd-)
============================================================ */

/* ── 메인 영역 ─────────────────────────────────────────────── */
.samd-main {
  padding: 80px 60px 60px;
}

/* ── 페이지 제목 ───────────────────────────────────────────── */
.samd-page-title {
  font-size: 34px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 17px;
  font-family: 'Nanum Gothic', sans-serif;
}

/* ── 상세 카드 (전체 래퍼) ─────────────────────────────────── */
.samd-detail-card,
.sasd-detail-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 71px 194px 105px;
}

/* ── 섹션 ──────────────────────────────────────────────────── */
.samd-section {
  margin-bottom: 71px;
}

.samd-section:last-child {
  margin-bottom: 0;
}

/* ── 섹션 헤더 ─────────────────────────────────────────────── */
.samd-section-header {
  background: #3a3a3a;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 24px;
  height: 65px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* 섹션 헤더 내 로그보기/전체보기 버튼 */
.samd-header-view-btn {
  position: absolute;
  right: 20px;
  background: #9d9d9d;
  color: #ffffff;
  border: none;
  border-radius: 0;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  font-family: 'Nanum Gothic', sans-serif;
}

/* ── 섹션 바디 (정보 테이블) ───────────────────────────────── */
.samd-section-body {
  background: #ffffff;
  border: none;
  border-radius: 0 0 6px 6px;
  overflow: visible;
  margin-top: 4px;
}

/* ── 정보 행 — 4열 그리드 ──────────────────────────────────── */
.samd-info-row {
  display: grid;
  grid-template-columns: 200px 1fr 200px 1fr;
  column-gap: 5px;
}

/* 행 사이 간격 — 4px 흰색 갭 */
.samd-info-row + .samd-info-row {
  margin-top: 4px;
}

/* 라벨 셀 */
.samd-info-label {
  background: #f1f1f1;
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 10px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  white-space: nowrap;
}

/* 값 셀 */
.samd-info-value {
  background: #ffffff;
  color: #000000;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 20px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
  border: 2px solid #f1f1f1;
}

/* 사용자 관리 상세 - 값 셀 좌측 padding (Figma: 텍스트가 cell outer +38~41px에서 시작)
   데스크톱(>1660px)에서만 적용. 모바일은 아래 max-width 블록에서 별도 수치 사용. */
@media (min-width: 1661px) {
  .samd-detail-card .samd-info-value:not(.samd-info-value--select) {
    padding-left: 38px;
  }
  .samd-detail-card .samd-role-select .sam-select-toggle {
    padding-left: 38px;
  }
}

/* 넓은 행 — 값이 나머지 3열 차지 */
.samd-info-row--wide .samd-info-value {
  grid-column: 2 / -1;
}

/* ── 값 셀 내부 전체보기 버튼 ──────────────────────────────── */
.samd-view-btn {
  background: #303030;
  color: #ffffff;
  border: none;
  border-radius: 0;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Nanum Gothic', sans-serif;
  white-space: nowrap;
  margin-left: auto;
}

/* ── 활동내역 — 값 우측 정렬 ───────────────────────────────── */
.samd-section--activity .samd-info-value {
  justify-content: flex-end;
  gap: 18px;
}

/* 전체보기 버튼 — 활동내역에서 auto margin 제거 */
.samd-section--activity .samd-view-btn {
  margin-left: 0;
}

/* 전체보기 버튼 없는 항목 — 버튼(72px) + 간격(18px)만큼 오른쪽 여백 */
.samd-section--activity .samd-info-value:not(:has(.samd-view-btn)) {
  padding-right: 114px;
}

/* ── 모바일 전용 줄바꿈 — PC에서 숨김 ──────────────────────── */
.samd-br-mobile {
  display: none;
}

/* ── 역할 셀렉트 쉐브론 ───────────────────────────────────── */
.samd-select-chevron {
  width: 12px;
  height: 12px;
  margin-left: 4px;
  cursor: pointer;
}

/* ── 역할 드롭다운 — 값 셀 내부 ───────────────────────────── */
.samd-info-value--select {
  padding: 0;
  overflow: visible;
}

.samd-role-select {
  width: 100%;
  position: relative;
}

.samd-role-select .sam-select-toggle {
  height: 44px;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0 20px;
  font-size: 16px;
  color: #3a3a3a;
}

/* ── 권한/상태 변경 이력 — 히스토리 바디 ───────────────────── */
.samd-history-body {
  display: block !important;
  background: #ffffff;
  border: none;
}

.samd-history-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 3px;
  align-items: center;
}

.samd-history-row + .samd-history-row {
  margin-top: 4px;
}

.samd-history-cell {
  font-size: 16px;
  color: #000000;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 20px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ffffff;
  border: 2px solid #f1f1f1;
}

/* 첫 번째 열 (날짜) — 라벨 스타일 */
.samd-history-cell:first-child {
  background: #f1f1f1;
  border: none;
}

/* ── 이용정지 사유 — 텍스트에리어/버튼 ─────────────────────── */
.samd-suspend-body {
  display: block !important;
  border: 2px solid #f1f1f1;
  background: #ffffff;
  padding: 0;
}

/* 이용정지 섹션 내 버튼 그룹 */
.samd-suspend-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
}

/* 이용정지 사유 입력 */
.samd-suspend-input {
  flex: 1;
  height: 45px;
  border: none;
  padding: 10px 14px;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #000000;
  background: #ffffff;
  outline: none;
  box-sizing: border-box;
  resize: none;
  line-height: 1.4;
}

.samd-textarea {
  width: 100%;
  min-height: 100px;
  border: 2px solid #f1f1f1;
  border-radius: 8px;
  padding: 14px;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #000000;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  background: #ffffff;
}

.samd-textarea:focus {
  border-color: #3a3a3a;
}

.samd-textarea::placeholder {
  color: #999999;
}

/* ── 하단 액션 버튼 ────────────────────────────────────────── */
.samd-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 68px;
  padding-bottom: 40px;
}

.samd-btn {
  width: 225px;
  height: 50px;
  border: none;
  border-radius: 5px;
  font-size: 22px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
}

/* 목록 버튼 — 흰색 배경, 청록색 텍스트 */
.samd-btn--list {
  background: #ffffff;
  color: #3eb5c9;
  border: 1px solid #b4b4b4;
}

/* 저장 버튼 — 청록색 배경 */
.samd-btn--save {
  background: #3eb5c9;
  color: #ffffff;
}

/* 이용정지 버튼 (섹션 내부) */
.samd-btn--suspend {
  width: 150px;
  height: 45px;
  background: #f1634f;
  color: #ffffff;
  border-radius: 10px;
  font-size: 20px;
}

/* 이용정지 해제 버튼 (섹션 내부) */
.samd-btn--release {
  width: 150px;
  height: 45px;
  background: #edb323;
  color: #303030;
  border-radius: 10px;
  font-size: 20px;
}

/* 관리자 메모 행 — 높이 175px */
.samd-info-row--memo .samd-info-label,
.samd-info-row--memo .samd-info-value {
  height: 175px;
  align-items: center;
}

/* ============================================================
   관리자 메모 (관리정보 섹션) — 전용 클래스 (standalone)
============================================================ */
/* 행 — 2열 grid: 라벨 200px + 값 셀 1fr, gap 5px */
.samd-memo-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 5px;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* 라벨 셀 — Figma 200×175, #f1f1f1 bg, 중앙 정렬 */
.samd-memo-label {
  background: #f1f1f1;
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  height: 175px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
}

/* 값 셀 — Figma 885×175, white bg + 2px #f1f1f1 border */
.samd-memo-cell {
  background: #ffffff;
  border: 2px solid #f1f1f1;
  height: 175px;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

/* 메모 입력 textarea — 좌측 상단 정렬 */
.samd-memo-input {
  flex: 1;
  min-width: 0;
  min-height: 0;
  border: none;
  background: transparent;
  resize: none;
  outline: none;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 16px;
  color: #000000;
  padding: 17px 0 17px 39px;
  line-height: 1.4;
}
.samd-memo-input::placeholder { color: #b7b7b7; }

/* 우측 버튼 영역 — 세로 중앙 */
.samd-memo-actions {
  display: flex;
  align-items: center;
  padding: 0 14px 0 0;
  align-self: stretch;
}

/* 버튼 공통 — 정사각형 100×100 */
.samd-memo-btn {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  border: none;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.samd-memo-btn--input { background: #f1f1f1; color: #303030; }
.samd-memo-btn--save  { background: #3eb5c9; color: #ffffff; }

/* ≤1400px — 라벨 축소 */
@media (max-width: 1400px) {
  .samd-memo-row {
    grid-template-columns: 160px 1fr;
  }
  .samd-memo-label { font-size: 14px; }
  .samd-memo-input { font-size: 15px; }
}

/* ≤1660px — 모바일 레이아웃 (라벨 130px, 값 셀 column flex, 버튼 가로 배치) */
@media (max-width: 1660px) {
  .samd-memo-row {
    grid-template-columns: 130px 1fr;
    column-gap: 4px;
    margin-top: 4px;
  }
  .samd-memo-label {
    font-size: 15px;
    height: auto;
    padding: 12px 14px;
    justify-content: flex-end;
    text-align: right;
    white-space: normal;
  }
  .samd-memo-cell {
    height: auto;
    flex-direction: column;
    align-items: stretch;
  }
  .samd-memo-input {
    font-size: 15px;
    padding: 12px 14px;
  }
  .samd-memo-actions {
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0 8px 9px 0;
    align-self: auto;
  }
  .samd-memo-btn {
    width: 50px;
    height: 50px;
    font-size: 14px;
  }
}

/* ≤480px — Figma 375 매핑: 라벨 119×226, 값 셀 219×226 */
@media (max-width: 480px) {
  .samd-memo-row {
    grid-template-columns: 119px 1fr;
  }
  .samd-memo-label {
    padding: 10px 15px 10px 10px;
    min-height: 226px;
  }
  .samd-memo-cell {
    min-height: 226px;
  }
  .samd-memo-input {
    padding: 12px 27px;
  }
}

/* ============================================================
   사용자 관리 상세 - 반응형 (≤ 1400px) — 라벨 축소
============================================================ */
@media (max-width: 1400px) {
  .samd-info-row,
  .samd-info-row--wide {
    grid-template-columns: 160px 1fr 160px 1fr;
  }

  .samd-info-label {
    font-size: 14px;
  }

  .samd-info-value {
    font-size: 15px;
  }

  .samd-history-cell {
    font-size: 14px;
  }
}

/* ============================================================
   사용자 관리 상세 - 반응형 (≤ 1660px) — 모바일
============================================================ */
@media (max-width: 1660px) {

  /* 메인 영역 — 모바일 */
  .samd-main {
    padding: 0 20px 30px;
  }

  /* 페이지 제목 — 어두운 배경 위 흰색 텍스트 */
  .samd-page-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 48px 0 48px;
  }

  /* 상세 카드 — 모바일 흰색 배경 */
  .samd-detail-card,
  .sasd-detail-card {
    padding: 67px 16px 63px;
    border-radius: 0;
    background: #ffffff;
  }

  /* 섹션 간격 축소 */
  .samd-section {
    margin-bottom: 35px;
  }

  /* 섹션 헤더 */
  .samd-section-header {
    font-size: 15px;
    height: 44px;
    padding: 0 16px;
    border-radius: 0;
  }

  /* 섹션 바디 */
  .samd-section-body {
    border-top: none;
    border-radius: 0;
    margin-top: 0;
  }

  /* 정보 행 — 2열 그리드 (모바일) */
  .samd-info-row,
  .samd-info-row--wide {
    grid-template-columns: 130px 1fr;
    column-gap: 4px;
    row-gap: 4px;
  }

  /* 행 간격 — 4px */
  .samd-info-row + .samd-info-row {
    margin-top: 4px;
  }

  /* 넓은 값 — 모바일에서 스팬 해제 */
  .samd-info-row--wide .samd-info-value {
    grid-column: auto;
  }

  .samd-info-label {
    font-size: 15px;
    height: auto;
    padding: 12px 14px;
    justify-content: flex-end;
    text-align: right;
    white-space: normal;
  }

  .samd-br-mobile {
    display: inline;
  }

  .samd-info-value {
    font-size: 15px;
    height: auto;
    padding: 12px 14px;
    border: 2px solid #f1f1f1;
  }

  .samd-info-value--select {
    padding: 0 !important;
  }

  .samd-role-select .sam-select-toggle {
    height: auto;
    padding: 10px 14px 10px 14px;
    font-size: 13px;
  }

  /* 관리자 메모 — 모바일 높이 리셋 */
  .samd-info-row--memo .samd-info-label,
  .samd-info-row--memo .samd-info-value {
    height: auto;
    padding: 12px 14px;
  }

  /* 히스토리 — 모바일 (2열 × 2줄) */
  .samd-history-row {
    grid-template-columns: 1fr 1fr;
    column-gap: 3px;
    row-gap: 3px;
  }

  .samd-history-row + .samd-history-row {
    margin-top: 6px;
  }

  .mobile-samd-info-min-height {
    min-height: 119px;
  }

  .samd-history-cell {
    font-size: 15px;
    height: auto;
    padding: 10px 8px;
    border: 2px solid #f1f1f1;
  }

  .samd-history-cell:first-child,
  .samd-history-cell:nth-child(3) {
    background: #f1f1f1;
    border: none;
  }

  /* 이용정지 사유 — 모바일 */
  .samd-suspend-body {
    padding: 0;
    border: 2px solid #f1f1f1;
  }

  .samd-suspend-actions {
    display: flex;
    flex-wrap: wrap;
    padding: 16px 14px;
    gap: 10px;
  }

  .samd-suspend-input {
    width: 100%;
    flex: 0 0 100%;
    height: 202px;
    font-size: 14px;
    resize: none;
    box-sizing: border-box;
    border: none;
  }

  .samd-btn--suspend,
  .samd-btn--release {
    flex: 1;
  }

  .samd-textarea {
    min-height: 80px;
    font-size: 14px;
  }

  /* 하단 목록/저장 버튼 — Figma 모바일(448:23863): 165×50, gap 10, font 17 bold, radius 4 */
  .samd-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
    padding: 0 16px 20px;
  }

  .samd-header-view-btn {
    display: none;
  }

  /* 목록/저장만 대상 — suspend/release는 아래에서 별도 override (radius 10 유지) */
  .samd-btn--list,
  .samd-btn--save {
    width: 165px;
    height: 50px;
    font-size: 17px;
    border-radius: 4px;
  }

  /* 목록 버튼 — Figma 모바일 border #3eb5c9 (데스크톱 #b4b4b4와 구분) */
  .samd-btn--list {
    border: 1px solid #3eb5c9;
  }

  .samd-btn--suspend,
  .samd-btn--release {
    width: auto;
    height: 50px;
    font-size: 16px;
  }

  .sam-select-label {
    font-size: 15px;
  }

  .sasd-cards {
    margin-left: 150px !important;
  }
}

@media (max-width: 1200px) {
  .samd-main {
    padding: 0 0 30px;
  }

  .sasd-card {
    width: 100%;
  }
}

/* ============================================================
   사용자 관리 상세 - 반응형 (≤ 480px) — 극소형 모바일
============================================================ */
@media (max-width: 480px) {

  .samd-info-row,
  .samd-info-row--wide {
    grid-template-columns: 119px 1fr;
  }

  /* Figma 모바일: 라벨 셀 119×44 (멀티라인 65), text-right padding-right 15 */
  .samd-info-label {
    font-size: 15px;
    padding: 10px 15px 10px 10px;
    min-height: 44px;
  }

  /* Figma 모바일: 값 셀 219×44 (border 2), padding-left 24 → 텍스트 cell.outer+26,
     padding-right 5 → 전체보기 버튼 right edge가 cell.right - 7 (Figma button at x=285, w=66) */
  .samd-detail-card .samd-info-value {
    font-size: 15px;
    padding: 10px 5px 10px 24px;
    min-height: 44px;
  }

  /* 2줄 라벨 (가입일시, 라이선스 동의일시, 이용정지 사유) — Figma 65h */
  .samd-info-label:has(> .samd-br-mobile) {
    min-height: 65px;
  }

  /* 관리자메모 행 — Figma 119h (라벨 119×119, 값 219×119).
     앞의 .samd-info-label min-height:44(0,1,0)가 source order로
     .mobile-samd-info-min-height(0,1,0)을 덮는 문제 해결 — 2/3 class 스코프로 우선. */
  .samd-info-row--memo .samd-info-label {
    min-height: 119px;
  }
  .samd-detail-card .samd-info-row--memo .samd-info-value {
    min-height: 119px;
  }

  .mobile-samd-info-value-padding {
    padding: 0 90px 0 0 !important;
  }

  .samd-history-cell {
    font-size: 15px;
    padding: 8px 6px;
  }

  /* Figma 모바일: 섹션 헤더 65h, 18px bold (≤1660 44h/15px 오버라이드) */
  .samd-section-header {
    font-size: 18px;
    height: 65px;
    padding: 0 16px;
    margin-bottom: 4px;
  }

  /* Figma 모바일: 전체보기 버튼 66×25 */
  .samd-view-btn {
    width: 66px;
    height: 25px;
    padding: 0;
  }

  .samd-section--activity .samd-info-value:not(:has(.samd-view-btn)) {
    padding: 0 105px 0 0;
  }

  .mobile-sand-info-date {
    padding: 0 !important;
    justify-content: center !important;
  }

  .samd-info-value--select {
    padding: 0 !important;
  }

  .samd-role-select .sam-select-toggle {
    padding: 10px 10px 10px 26px;
  }

  .sasd-action-btn {
    width: 140px !important;
  }
}

/* ============================================================
   스냅샷 관리 상세 (sasd-)
============================================================ */

/* ── sasd 스코프 기본 보정 (samd 공통 override) ─────────────── */
.sasd-detail-card .samd-info-value {
  padding: 0 20px 0 39px;
}

.sasd-detail-card .samd-info-value.samd-info-value--select {
  padding: 0;
}

.sasd-detail-card .samd-section {
  margin-bottom: 65px;
}

.sasd-detail-card .samd-section:last-child {
  margin-bottom: 0;
}

/* ── 거버넌스 ID 값 셀 ─────────────────────────────────────── */
.sasd-id-value {
  padding: 0 !important;
  border: none !important;
  gap: 3px !important;
}

/* 빈 입력 영역 */
.sasd-id-input {
  flex: 1;
  height: 44px;
  background: #ffffff;
  border: 2px solid #f1f1f1;
  box-sizing: border-box;
}

/* 선택 버튼 */
.sasd-select-btn {
  width: 95px;
  height: 44px;
  background: #4779ae;
  color: #ffffff;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 날짜/시간 입력 행 ─────────────────────────────────────── */
.sasd-date-value {
  flex-wrap: wrap;
  gap: 4px;
  border: none !important;
  padding: 0 !important;
}

/* 날짜 그룹 (날짜+시+분+~) 한 줄 */
.sasd-date-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

/* 날짜 입력 */
.sasd-date-input {
  flex: 2;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  gap: 10px;
  justify-content: space-between;
  border-radius: 0;
}

/* 시간 드롭다운 */
.sasd-time-select {
  flex: 1;
  min-width: 0;
  height: 40px;
  border-radius: 0;
  position: relative;
}

.sasd-time-select .sam-select-toggle {
  height: 40px;
  border: 1px solid #e8e8e8;
  border-radius: 0;
  background: #ffffff;
  padding: 0 10px;
  font-size: 16px;
  color: #4a4a4a;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.sasd-time-select .sam-select-menu {
  max-height: 200px;
  overflow-y: auto;
}

/* 날짜/시간 내부 텍스트 input */
.sasd-date-text,
.sasd-time-text {
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #4a4a4a;
  text-align: center;
  width: 100%;
  padding: 0;
}

/* ~ 구분자 */
.sasd-separator {
  font-size: 20px;
  font-weight: 700;
  color: #8b8b8b;
  padding: 0 6px;
  display: flex;
  align-items: center;
}

/* ── 인원 드롭다운 ─────────────────────────────────────────── */
.sasd-person-select {
  width: 100%;
}

.sasd-person-select .sam-select-toggle {
  height: 44px;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0 20px;
  font-size: 16px;
  color: #3a3a3a;
}

/* ── 텍스트 입력 (스냅샷 제목, 생성사유) ───────────────────── */
.sasd-input-value {
  padding: 0 !important;
}

.sasd-text-input {
  width: 100%;
  height: 100%;
  min-height: 44px;
  border: none;
  padding: 0 20px;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #000000;
  background: transparent;
  outline: none;
  box-sizing: border-box;
}

/* ── 미리보기 행 — 높이 55px ───────────────────────────────── */
.sasd-preview-row .samd-info-label,
.sasd-preview-row .samd-info-value {
  height: 55px;
}

.sasd-preview-row .samd-info-value {
  gap: 15px;
}

/* ── 액션 버튼 (미리보기, 엑셀다운로드) ────────────────────── */
.sasd-action-btn {
  border: none;
  border-radius: 0;
  padding: 0 20px;
  height: 35px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

.sasd-action-btn--dark {
  background: #505364;
  color: #ffffff;
  width: 150px;
}

.sasd-action-btn--blue {
  background: #4779ae;
  color: #ffffff;
  width: 180px;
}

/* ── 안내 문구 ─────────────────────────────────────────────── */
.sasd-note {
  font-size: 16px;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  line-height: 1.6;
  padding: 12px 20px;
  margin: 0;
  text-align: center;
}

/* ── 스냅샷 비교 카드 — 좌측 라벨열(#505364) + 우측 값열(흰색) ── */
.sasd-cards {
  display: flex;
  gap: 31px;
  margin-top: 23px;
  margin-left: 243px;
}

.sasd-card {
  /*max-width: 385px;*/
  display: flex;
  border: 1px solid #f1f1f1;
  border-bottom: none;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  align-self: flex-start;
}

/* 카드 내부 — 라벨 열 */
.sasd-card-labels {
  width: 133px;
  flex-shrink: 0;
  background: #505364;
  display: flex;
  flex-direction: column;
  padding: 19px 0 3px;
}

.sasd-card-label {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 16px 16px 0;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

/* 카드 내부 — 값 열 */
.sasd-card-values {
  flex: 1;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 19px 15px 3px 0;
}

.sasd-card-value {
  font-size: 14px;
  color: #505364;
  font-family: 'Nanum Gothic', sans-serif;
  /*padding: 12px 16px;*/
  padding: 0 0 16px 22px;
  display: flex;
  align-items: center;
  flex: 1;
  line-height: 1.4;
}

/* ============================================================
   스냅샷 관리 상세 - 반응형 (≤ 1200px) — 모바일
============================================================ */
@media (max-width: 1200px) {

  /* ── sasd 전용 컨테이너 — samd 공통 모바일 override ─────── */
  .sasd-detail-card {
    padding: 36px 16px 30px;
  }

  .sasd-detail-card .samd-section {
    margin-bottom: 79px;
  }

  .sasd-detail-card .samd-section:last-child {
    margin-bottom: 0;
  }

  .sasd-detail-card .samd-section-header {
    height: 65px;
    font-size: 18px;
    padding: 0 16px;
    margin-bottom: 4px;
  }

  /* 라벨 컬럼 폭 — Figma 119px */
  .sasd-detail-card .samd-info-row,
  .sasd-detail-card .samd-info-row--wide {
    grid-template-columns: 119px 1fr;
    column-gap: 4px;
    row-gap: 4px;
  }

  /* 값 셀 pad-left 24 (Figma text_x=165 - cell_x=139 - border=2), pad-right 7 (전체보기 btn 우측 여백) */
  .sasd-detail-card .samd-info-value {
    padding: 12px 7px 12px 24px;
  }

  .sasd-detail-card .samd-info-label {
    padding: 12px 15px 12px 14px;
  }

  /* 선택 버튼 모바일 — 56×44 */
  .sasd-select-btn {
    width: 56px;
  }

  /* 미리보기 행 — 버튼 세로 stack */
  .sasd-preview-row .samd-info-value {
    flex-direction: column;
    gap: 7px;
    align-items: flex-start;
    padding: 22px 14px 22px 26px;
  }

  .sasd-action-btn--dark,
  .sasd-action-btn--blue {
    width: 140px;
    height: 35px;
  }

  /* ── 생성기준 — 모바일 레이아웃 ────────────────────────── */

  /* 기준기간 행 — 라벨을 풀 너비 중앙 서브헤더로 */
  .sasd-criteria .samd-info-row--wide {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .sasd-criteria .samd-info-row--wide > .samd-info-label {
    justify-content: center;
    text-align: center;
    background: #F1F1F1;
    font-size: 15px;
    font-weight: 700;
    height: 44px;
  }

  .sasd-criteria .samd-info-row--wide > .samd-info-label,
  .sasd-criteria .samd-info-row--wide > .samd-info-value,
  .sasd-criteria .samd-info-row--wide > .sasd-date-value {
    grid-column: 1 / -1;
  }

  .sasd-criteria .samd-info-row--wide > .sasd-date-value {
    border: none !important;
    padding: 8px 0 !important;
  }

  /* 날짜/시간 입력 */
  .sasd-date-value {
    flex-wrap: wrap;
    gap: 4px;
  }

  .sasd-date-input {
    flex: 2;
    min-width: 0;
    height: 36px;
    padding: 0 8px;
    border-radius: 0;
  }

  .sasd-time-select {
    flex: 1;
    min-width: 0;
    height: 36px;
  }

  .sasd-time-select .sam-select-toggle {
    height: 36px;
    padding: 0 6px;
    font-size: 13px;
    border-radius: 0;
  }

  .sasd-date-text {
    font-size: 13px;
  }

  /* ~ 구분자 */
  .sasd-separator {
    font-size: 14px;
    font-weight: 700;
    color: #8b8b8b;
    padding: 0 2px;
    flex-shrink: 0;
  }

  /* 날짜 그룹 — 모바일 세로 배치 */
  .sasd-date-value {
    flex-direction: column;
    gap: 4px;
  }

  .sasd-date-group {
    width: 100%;
  }

  .sasd-date-group:last-child {
    padding-right: 18px;
  }

  /* 기준인원 행 — 라벨 풀 너비 + 드롭다운/인원수/값 3열 */
  .sasd-criteria .samd-info-row:not(.samd-info-row--wide) {
    grid-template-columns: 144px 1fr 131px;
    column-gap: 0;
    row-gap: 0;
  }

  .sasd-criteria .samd-info-row:not(.samd-info-row--wide) > :first-child {
    grid-column: 1 / -1;
    background: #f1f1f1;
    justify-content: center;
    text-align: center;
    font-size: 15px;
    height: 44px;
    margin-bottom: 5px;
    padding: 0;
  }

  .sasd-criteria .samd-info-row:not(.samd-info-row--wide) > :nth-child(2) {
    border: 2px solid #f1f1f1;
  }

  /* 인원수 플로팅 라벨 — Figma 는 배경 없음 */
  .sasd-criteria .samd-info-row:not(.samd-info-row--wide) > :nth-child(3) {
    background: transparent;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    padding: 0;
  }

  .sasd-criteria .samd-info-row:not(.samd-info-row--wide) > :nth-child(4) {
    border: 2px solid #f1f1f1;
    justify-content: center;
    font-weight: 700;
    padding: 12px 10px;
  }

  /* 인원 드롭다운 — 모바일 */
  .sasd-criteria .sasd-person-select .sam-select-toggle {
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    border-radius: 0;
    border: none;
  }

  /* 텍스트 입력 — 모바일 */
  .sasd-text-input {
    min-height: 36px;
    padding: 10px 14px;
    font-size: 13px;
  }

  /* 액션 버튼 — 모바일 */
  .sasd-action-btn {
    font-size: 13px;
    padding: 0 12px;
    height: 35px;
  }

  /* 안내 문구 — 모바일 */
  .sasd-note {
    font-size: 14px;
    padding: 10px 11px;
    line-height: 20px;
    text-align: left;
    color: #303030;
  }

  /* 미리보기 행 — 모바일 높이 리셋 */
  .sasd-preview-row .samd-info-label,
  .sasd-preview-row .samd-info-value {
    height: auto;
  }

  /* 비교 카드 — 모바일 세로 배치 (Figma 카드 오른쪽이 section 우측 edge 를 8px 초과) */
  .sasd-cards {
    flex-direction: column;
    gap: 29px;
    margin-top: 22px;
    margin-left: 0 !important;
    margin-right: -8px;
  }

  .sasd-card {
    flex-direction: row;
  }

  .sasd-card-labels {
    width: 119px;
    padding: 19px 0 18px;
  }

  .sasd-card-values {
    padding: 19px 0 18px;
  }

  .sasd-card-label {
    font-size: 14px;
    height: 25px;
    flex: 0 0 25px;
    padding: 0 15px 0 0;
    justify-content: flex-end;
    align-items: center;
    line-height: 18px;
  }

  .sasd-card-value {
    font-size: 14px;
    height: 25px;
    flex: 0 0 25px;
    padding: 0 0 0 12px;
    align-items: center;
    line-height: 18px;
  }

  /* 카드별 행간격 — Figma: 카드1(5행) gap 16, 카드2(6행) gap 18 */
  .sasd-cards > .sasd-card:nth-child(1) .sasd-card-labels,
  .sasd-cards > .sasd-card:nth-child(1) .sasd-card-values {
    gap: 16px;
  }

  .sasd-cards > .sasd-card:nth-child(2) .sasd-card-labels,
  .sasd-cards > .sasd-card:nth-child(2) .sasd-card-values {
    gap: 18px;
  }

}

@media (max-width: 480px) {
  .sasd-card {
    width: 100%;
  }
}

/* ============================================================
   거버넌스 선택 모달 (sgm-)
============================================================ */

/* ── 오버레이 ──────────────────────────────────────────────── */
.sgm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

/* ── 모달 다이얼로그 ───────────────────────────────────────── */
.sgm-modal {
  background: #ffffff;
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  border-radius: 15px;
}

/* ── 모달 헤더 ─────────────────────────────────────────────── */
.sgm-header {
  background: #4779AE;
  height: 100px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 15px 15px 0 0;
}

.sgm-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 24px;
  color: #ffffff;
  font-family: 'Nanum Gothic', sans-serif;
}

.sgm-close {
  position: absolute;
  right: 35px;
  top: 29px;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 24px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

/* ── 필터 ──────────────────────────────────────────────────── */
.sgm-filter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 30px 5px 16px;
}

.sgm-filter-label {
  font-size: 16px;
  font-weight: 700;
  color: #3a3a3a;
  font-family: 'Nanum Gothic', sans-serif;
}

.sgm-select {
  width: 181px;
}

.sgm-select .sam-select-toggle {
  height: 45px;
  font-size: 14px;
}

/* ── 테이블 ────────────────────────────────────────────────── */
.sgm-table {
  width: 100%;
}

.sgm-row {
  display: grid;
  grid-template-columns: 1.03fr 1fr 1.23fr 1.36fr 1.35fr 1.37fr 1.46fr;
  align-items: center;
  min-height: 52px;
}

.sgm-row--head {
  background: #505364;
  min-height: 58px;
}

.sgm-row--head .sgm-cell {
  font-weight: 700;
  color: white;
  font-size: 17px;
}

.sgm-cell {
  font-size: 16px;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 8px 6px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sgm-table-body .sgm-row {
  border-bottom: none;
}

.sgm-table-body .sgm-row:nth-child(even) {
  background: #F8F9FA;
}

/* spacer는 모바일 헤더에서만 표시 */
.sgm-head-spacer {
  display: none;
}

/* 선택 버튼 */
.sgm-select-btn {
  background: #9D9D9D;
  color: #ffffff;
  border: none;
  width: 95px;
  height: 35px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

/* ── 페이지네이션 ──────────────────────────────────────────── */
.sgm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 64px;
  padding: 0 24px;
  margin-top: 31px;
}

.sgm-pag-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 12px;
  width: 72px;
  height: 44px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
}

.sgm-pag-selector span {
  font-size: 14px;
  color: #344055;
  font-family: 'Inter', sans-serif;
}

.sgm-pag-selector img {
  width: 16px;
  height: 16px;
}

.sgm-pag-controls {
  display: flex;
  align-items: center;
  gap: 18px;
}

.sgm-pag-btn {
  background: transparent;
  border: none;
  padding: 0;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sgm-pag-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.2s;
}

.sgm-pag-btn:hover img {
  opacity: 0.7;
}

/* ── 취소 버튼 ─────────────────────────────────────────────── */
.sgm-actions {
  display: flex;
  justify-content: center;
  padding: 17px 24px 30px;
}

.sgm-cancel-btn {
  background: #F1F1F1;
  border: none;
  border-radius: 4px;
  width: 241px;
  height: 50px;
  font-size: 22px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
}

/* ============================================================
   거버넌스 선택 모달 - 반응형 (≤ 1200px) — 모바일
============================================================ */
@media (max-width: 945px) {

  .sgm-overlay {
    padding: 60px 14px;
    align-items: flex-start;
  }

  .sgm-modal {
    max-width: 100%;
    max-height: 80vh;
  }

  .sgm-header {
    padding: 75px 16px 19px;
  }

  .sgm-title {
    font-size: 26px;
  }

  .sgm-close {
    right: 24px;
    top: 23px;
    font-size: 20px;
  }

  .sgm-filter {
    padding: 31px 11px 9px;
  }

  .sgm-filter-label {
    display: none;
  }

  .sgm-select {
    width: 130px;
  }

  .sgm-mobile-hide {
    display: none;
  }

  .sgm-row,
  .sgm-row--head {
    grid-template-columns: 1.7fr 1.05fr 1.4fr 0.8fr;
    grid-template-areas:
      "no   type   id   spacer"
      "title status snap select";
    row-gap: 5px;
    padding: 0;
    min-height: auto;
    column-gap: 0;
  }

  .sgm-row--head {
    padding: 0;
    background: #ffffff;
    row-gap: 2px;
  }

  .sgm-head-spacer {
    display: block;
    grid-area: spacer;
    align-self: stretch;
    background: #777A8E;
  }

  .sgm-row--head .sgm-cell {
    font-size: 13px;
    font-weight: 700;
    padding: 8px 4px;
    letter-spacing: -0.03em;
    white-space: nowrap;
  }

  .sgm-row--head .sgm-cell[data-col="no"],
  .sgm-row--head .sgm-cell[data-col="type"],
  .sgm-row--head .sgm-cell[data-col="id"] {
    background: #777A8E;
  }

  .sgm-row--head .sgm-cell[data-col="title"],
  .sgm-row--head .sgm-cell[data-col="status"],
  .sgm-row--head .sgm-cell[data-col="snap"],
  .sgm-row--head .sgm-cell[data-col="select"] {
    background: #505364;
  }

  .sgm-cell[data-col="title"] {
    white-space: nowrap;
  }

  .sgm-cell[data-col="no"]     { grid-area: no; }
  .sgm-cell[data-col="type"]   { grid-area: type; }
  .sgm-cell[data-col="id"]     { grid-area: id; }
  .sgm-cell[data-col="title"]  { grid-area: title; }
  .sgm-cell[data-col="status"] { grid-area: status; }
  .sgm-cell[data-col="snap"]   { grid-area: snap; }
  .sgm-cell[data-col="select"] { grid-area: select; }

  /* 데이터 행 — 모바일 */
  .sgm-table-body .sgm-row {
    background: #ffffff;
    border-bottom: none;
  }

  .sgm-table-body .sgm-row:nth-child(even) {
    background: #F8F9FA;
  }

  .sgm-cell {
    font-size: 11px;
    padding: 4px 4px;
    text-align: center;
    letter-spacing: -0.03em;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
  }

  /* 선택 헤더 셀: 텍스트 우측 정렬, 셀 bg가 col 4 전체 채우도록 block 유지 */
  .sgm-row--head .sgm-cell[data-col="select"] {
    text-align: right;
    padding: 8px 6px 8px 4px;
  }

  /* 선택 데이터 셀: 버튼만 우측 정렬 */
  .sgm-table-body .sgm-cell[data-col="select"] {
    padding: 4px 6px 4px 4px;
    text-align: right;
  }

  .sgm-table-body .sgm-cell[data-col="select"] .sgm-select-btn {
    margin-left: auto;
  }

  .sgm-select-btn {
    font-size: 11px;
    font-weight: 400;
    width: 40px;
    height: 22px;
  }

  .sgm-pagination {
    height: 39px;
    padding: 0 16px;
    margin-top: 27px;
    gap: 16px;
  }

  .sgm-pag-selector {
    width: 54px;
    height: 28px;
    padding: 4px 6px;
    border-radius: 4px;
  }

  .sgm-pag-selector span {
    font-size: 12px;
    font-weight: 700;
  }

  .sgm-pag-controls {
    gap: 18px;
  }

  /* double arrow (1,4번째): 26x28 */
  .sgm-pag-btn {
    width: 26px;
    height: 28px;
  }

  /* single arrow (2,3번째): 30x26 */
  .sgm-pag-btn:nth-child(2),
  .sgm-pag-btn:nth-child(3) {
    width: 30px;
    height: 26px;
  }

  .sgm-actions {
    padding: 27px 16px 40px;
  }

  .sgm-cancel-btn {
    width: 241px;
    height: 50px;
    font-size: 18px;
  }


  .sgm-select .sam-select-toggle {
    height: 32px;
    font-size: 14px;
  }
}

/* ============================================================
   스냅샷 관리 상세 v2 (sasd2-) — 읽기 전용 상세보기
============================================================ */

/* ── 상세 카드 (전체 래퍼) ─────────────────────────────────── */
.sasd2-detail-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 73px 194px 45px;
}

/* ── 페이지 메인/타이틀 ────────────────────────────────────── */
.sasd2-main {
  padding: 80px 60px 60px;
}

.sasd2-page-title {
  font-size: 34px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 17px;
  font-family: 'Nanum Gothic', sans-serif;
}

/* ── 섹션 ──────────────────────────────────────────────────── */
.sasd2-section {
  margin-bottom: 69px;
}

.sasd2-section:last-of-type {
  margin-bottom: 0;
}

/* ── 섹션 헤더 ─────────────────────────────────────────────── */
.sasd2-section-header {
  background: #3a3a3a;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 24px;
  height: 65px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ── 섹션 헤더 — 디바이스별 텍스트 (대상자 목록/상태정보) ── */
.sasd2-header-text-desktop {
  display: inline;
}

.sasd2-header-text-mobile {
  display: none;
}

/* ── 섹션 바디 (정보 테이블) ───────────────────────────────── */
.sasd2-section-body {
  background: #ffffff;
  border: none;
  border-radius: 0 0 6px 6px;
  overflow: visible;
  margin-top: 4px;
}

/* ── 정보 행 — 4열 그리드 ──────────────────────────────────── */
.sasd2-info-row {
  display: grid;
  grid-template-columns: 200px 1fr 200px 1fr;
  column-gap: 5px;
}

.sasd2-info-row + .sasd2-info-row {
  margin-top: 4px;
}

/* 라벨 셀 */
.sasd2-info-label {
  background: #f1f1f1;
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 10px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  white-space: nowrap;
}

/* 값 셀 */
.sasd2-info-value {
  background: #ffffff;
  color: #000000;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 14px 0 40px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
  border: 2px solid #f1f1f1;
}

/* 넓은 행 — 값이 나머지 3열 차지 */
.sasd2-info-row--wide .sasd2-info-value {
  grid-column: 2 / -1;
}

/* 값 셀 내부 전체보기 버튼 */
.sasd2-view-btn {
  background: #303030;
  color: #ffffff;
  border: none;
  border-radius: 0;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Nanum Gothic', sans-serif;
  white-space: nowrap;
  margin-left: auto;
}

/* 관리자 메모 행 — 높이 175px */
.sasd2-info-row--memo .sasd2-info-label,
.sasd2-info-row--memo .sasd2-info-value {
  height: 175px;
  align-items: center;
}

/* ── 모바일 전용 줄바꿈 — PC에서 숨김 ──────────────────────── */
.sasd2-br-mobile {
  display: none;
}

/* ── 히스토리 바디 ─────────────────────────────────────────── */
.sasd2-history-body {
  display: block !important;
  background: #ffffff;
  border: none;
  margin-top: 4px;
}

.sasd2-history-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 3px;
  align-items: center;
}

.sasd2-history-row + .sasd2-history-row {
  margin-top: 4px;
}

.sasd2-history-cell {
  font-size: 16px;
  color: #000000;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 20px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ffffff;
  border: 2px solid #f1f1f1;
}

.sasd2-history-cell:first-child {
  background: #f1f1f1;
  border: none;
}

/* ── 섹션 헤더 내 버튼 (엑셀다운로드, 로그보기) ──────────── */
.sasd2-header-btn {
  position: absolute;
  right: 40px;
  border: none;
  border-radius: 0;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Nanum Gothic', sans-serif;
  color: #ffffff;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sasd2-header-btn--blue {
  background: #4779ae;
  min-width: 174px;
}

.sasd2-header-btn--gray {
  background: #9d9d9d;
  min-width: 103px;
}

/* ── 대상자 목록 — 테이블 ─────────────────────────────────── */
.sasd2-table-body {
  background: #ffffff;
  margin-top: 4px;
}

.sasd2-table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 3px;
  align-items: center;
}

.sasd2-table-row + .sasd2-table-row {
  margin-top: 4px;
}

/* 테이블 헤더 행 */
.sasd2-table-row--header .sasd2-table-cell {
  background: #f1f1f1;
  font-weight: 400;
  border: none;
}

/* 테이블 셀 */
.sasd2-table-cell {
  font-size: 16px;
  color: #000000;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 20px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ffffff;
  border: 2px solid #f1f1f1;
}

/* ── 페이지네이션 ─────────────────────────────────────────── */
.sasd2-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 30px;
  height: 64px;
  margin-top: 9px;
}

.sasd2-page-select {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  min-width: 72px;
  justify-content: center;
  cursor: pointer;
}

.sasd2-page-num {
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: #344055;
  text-align: right;
  flex: 1;
}

.sasd2-page-chevron {
  width: 16px;
  height: 16px;
}

.sasd2-page-arrows {
  display: flex;
  align-items: center;
  gap: 18px;
}

.sasd2-page-btn {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sasd2-page-btn img {
  width: 31px;
  height: 31px;
}

/* ── 승인요청 버튼 영역 ───────────────────────────────────── */
.sasd2-approval-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 0;
}

/* PC: 안내문구가 남는 공간을 차지 → 버튼들을 우측으로 밀어냄 */
.sasd2-approval-actions .sasd2-approval-note {
  flex: 1;
}

/* ── 승인요청/승인요청안함 버튼 ───────────────────────────── */
.sasd2-btn-approval {
  border: none;
  border-radius: 5px;
  padding: 0 10px;
  height: 48px;
  min-width: 159px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sasd2-btn-approval--request {
  background: #edb323;
}

.sasd2-btn-approval--reject {
  background: #f1634f;
}

/* ── 공통 버튼 (목록/저장/승인/반려) ──────────────────────── */
.sasd2-btn {
  border: none;
  border-radius: 5px;
  padding: 0 10px;
  height: 48px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sasd2-btn--list-sm {
  min-width: 102px;
  background: #ffffff;
  color: #4779ae;
  border: 1px solid #4779ae;
}

.sasd2-btn--save {
  min-width: 136px;
  background: #4779ae;
  color: #ffffff;
}

.sasd2-btn--approve {
  min-width: 102px;
  background: #edb323;
  color: #ffffff;
}

.sasd2-btn--reject {
  min-width: 102px;
  background: #f1634f;
  color: #ffffff;
}

/* ── 승인요청 안내 문구 (버튼 행 안에 인라인) ─────────────── */
.sasd2-approval-note {
  font-size: 16px;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  line-height: 1.6;
  margin: 0;
  white-space: nowrap;
}

/* ── 반려사유 영역 ────────────────────────────────────────── */
.sasd2-reject-body {
  border: 2px solid #f1f1f1;
  background: #ffffff;
  height: 65px;
  display: flex;
  align-items: center;
}

.sasd2-reject-content {
  flex: 1;
  padding: 0 20px;
  min-width: 0;
}

.sasd2-reject-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 13px 0 0;
  flex-shrink: 0;
}

/* ── 하단 버튼 영역 (목록/재생성) ─────────────────────────── */
.sasd2-bottom-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 21px;
}

.sasd2-bottom-btn {
  width: 136px;
  height: 48px;
  border: none;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sasd2-bottom-btn--list {
  background: #ffffff;
  color: #4779ae;
  border: 1px solid #4779ae;
}

.sasd2-bottom-btn--regen {
  background: #4779ae;
  color: #ffffff;
}

/* ============================================================
   스냅샷 관리 상세 v2 - 반응형 (≤ 1400px) — 라벨 축소
============================================================ */
@media (max-width: 1400px) {
  .sasd2-info-row,
  .sasd2-info-row--wide {
    grid-template-columns: 160px 1fr 160px 1fr;
  }

  .sasd2-info-label {
    font-size: 14px;
  }

  .sasd2-info-value {
    font-size: 15px;
  }

  .sasd2-history-cell {
    font-size: 14px;
  }
}

/* ============================================================
   스냅샷 관리 상세 v2 - 반응형 (≤ 1660px)
============================================================ */
@media (max-width: 1660px) {

  .sasd2-main {
    padding: 0 20px 30px;
  }

  .sasd2-page-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 48px 0 48px;
  }

  .sasd2-br-mobile {
    display: inline;
  }

  .sasd2-detail-card {
    padding: 67px 16px 63px;
    border-radius: 0;
  }

  .sasd2-section {
    margin-bottom: 67px;
  }

  .sasd2-section-header {
    font-size: 18px;
    height: 65px;
    padding: 0 16px;
    border-radius: 0;
  }

  .sasd2-section-body {
    border-top: none;
    border-radius: 0;
    margin-top: 4px;
  }

  .sasd2-info-row,
  .sasd2-info-row--wide {
    grid-template-columns: 119px 1fr;
    column-gap: 4px;
    row-gap: 4px;
  }

  .sasd2-info-row + .sasd2-info-row {
    margin-top: 4px;
  }

  .sasd2-info-row--wide .sasd2-info-value {
    grid-column: auto;
  }

  .sasd2-info-label {
    font-size: 15px;
    height: auto;
    padding: 12px 15px 12px 10px;
    justify-content: flex-end;
    text-align: right;
    white-space: normal;
  }

  .sasd2-info-value {
    font-size: 15px;
    height: auto;
    padding: 12px 14px 12px 26px;
    border: 2px solid #f1f1f1;
  }

  .sasd2-info-row--memo .sasd2-info-label,
  .sasd2-info-row--memo .sasd2-info-value {
    height: 119px;
    padding: 12px 14px;
  }

  .sasd2-history-row {
    grid-template-columns: 1fr 1fr;
    column-gap: 3px;
    row-gap: 3px;
  }

  .sasd2-history-row + .sasd2-history-row {
    margin-top: 6px;
  }

  .sasd2-history-cell {
    font-size: 15px;
    height: 44px;
    padding: 2px 4px;
    border: 2px solid #f1f1f1;
  }

  .sasd2-history-cell:first-child {
    border: none;
  }

  .sasd2-header-btn {
    top: -36px;
    right: 0;
    font-size: 13px;
    height: 30px;
    padding: 4px 10px;
    right: 16px;
  }

  .sasd2-header-btn--blue {
    min-width: 120px;
  }

  .sasd2-header-btn--gray {
    min-width: 80px;
  }

  .sasd2-table-cell {
    font-size: 15px;
    height: auto;
    padding: 10px 8px;
  }

  .sasd2-btn-approval {
    font-size: 17px;
    height: 48px;
    min-width: 140px;
  }

  .sasd2-btn {
    font-size: 17px;
    height: 48px;
  }

  .sasd2-btn--list-sm {
    min-width: 90px;
  }

  .sasd2-btn--save {
    min-width: 120px;
  }

  .sasd2-bottom-btn {
    font-size: 17px;
    height: 48px;
    flex: 1;
    width: auto;
  }

  .sasd2-approval-note {
    font-size: 14px;
  }
}

/* ============================================================
   스냅샷 관리 상세 v2 - 반응형 (≤ 1200px) — 모바일
============================================================ */
@media (max-width: 1200px) {

  .sasd2-main {
    padding: 0 0 30px;
  }

  .sasd2-detail-card {
    padding: 58px 16px 53px;
    border-radius: 0;
  }

  /* 섹션 헤더 텍스트 — 모바일 swap (대상자 목록 → 상태정보) */
  .sasd2-header-text-desktop {
    display: none;
  }

  .sasd2-header-text-mobile {
    display: inline;
  }

  /* 테이블 — 모바일 (2열 × 2줄) */
  .sasd2-table-row {
    grid-template-columns: 1fr 1fr;
    column-gap: 3px;
    row-gap: 1px;
  }

  .sasd2-table-row + .sasd2-table-row {
    margin-top: 4px;
  }

  .sasd2-table-row--header .sasd2-table-cell {
    font-size: 15px;
  }

  .sasd2-table-cell {
    font-size: 15px;
    height: 44px;
    padding: 2px 4px;
    border: 2px solid #f1f1f1;
  }

  /* 페이지네이션 — 모바일 */
  .sasd2-pagination {
    height: auto;
    padding: 14px 16px;
  }

  .sasd2-page-select {
    min-width: 54px;
    padding: 4px 3px;
  }

  .sasd2-page-num {
    font-size: 12px;
    font-weight: 700;
  }

  .sasd2-page-btn img {
    width: 26px;
    height: 28px;
  }

  /* 승인요청 버튼 — 모바일 2행 배치 */
  .sasd2-approval-actions {
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 10px;
    margin-top: 33px;
  }

  /* 모바일: margin-right: auto 해제 */
  .sasd2-approval-actions .sasd2-btn-approval--reject {
    margin-right: 0;
  }

  /* 모바일: 목록+저장을 윗줄에 (order: -1) */
  .sasd2-approval-actions .sasd2-btn--list-sm {
    order: -2;
    flex: 0 0 calc(50% - 5px);
    height: 50px;
    font-size: 17px;
    min-width: auto;
    border-radius: 4px;
  }

  .sasd2-approval-actions .sasd2-btn--save {
    order: -1;
    flex: 0 0 calc(50% - 5px);
    height: 50px;
    font-size: 17px;
    min-width: auto;
    border-radius: 4px;
  }

  /* 모바일: 승인요청안함+승인요청을 아랫줄에 (order: 0) */
  .sasd2-approval-actions .sasd2-btn-approval--reject {
    order: 0;
    flex: 0 0 calc(50% - 5px);
    height: 50px;
    font-size: 17px;
    min-width: auto;
    border-radius: 4px;
  }

  .sasd2-approval-actions .sasd2-btn-approval--request {
    order: 1;
    flex: 0 0 calc(50% - 5px);
    height: 50px;
    font-size: 17px;
    min-width: auto;
    border-radius: 4px;
  }

  /* 모바일: 안내문구를 별도 줄에 배치 (order: 2) */
  .sasd2-approval-actions .sasd2-approval-note {
    order: 2;
    flex: 0 0 100%;
    font-size: 15px;
    white-space: normal;
  }

  /* 모바일: 하단 버튼 */
  .sasd2-bottom-actions {
    padding: 0;
    gap: 10px;
    margin-top: 44px;
  }

  /* 반려사유 — 모바일 세로 배치 */
  .sasd2-reject-body {
    height: 268px;
    flex-direction: column;
    align-items: stretch;
  }

  .sasd2-reject-content {
    flex: 1;
    padding: 14px 16px;
  }

  /* 반려사유 버튼 — 모바일 */
  .sasd2-reject-actions {
    padding: 13px 11px;
    gap: 5px;
  }

  .sasd2-reject-actions .sasd2-btn {
    flex: 0 0 102px;
    min-width: auto;
    height: 48px;
    font-size: 17px;
  }

  /* 하단 버튼 — 모바일 */
  .sasd2-bottom-btn {
    flex: 1;
    width: auto;
    height: 50px;
    font-size: 17px;
    border-radius: 4px;
  }

  /* 헤더 버튼 — 모바일: 헤더 위로 이동 */
  .sasd2-header-btn {
    font-size: 14px;
    height: 30px;
    padding: 4px 10px;
    top: -36px;
    right: 0;
    min-width: auto !important;
  }
}

/* ============================================================
   스냅샷 관리 상세 v2 - 반응형 (≤ 480px) — 극소형 모바일
============================================================ */
@media (max-width: 480px) {
  .sasd2-detail-card {
    padding: 58px 16px 53px;
  }

  .sasd2-info-row,
  .sasd2-info-row--wide {
    grid-template-columns: 119px 1fr;
  }

  .sasd2-info-label {
    font-size: 15px;
    padding: 10px 10px 10px 6px;
  }

  .sasd2-info-value {
    font-size: 15px;
    padding: 13px 6px 13px 26px !important;
    letter-spacing: -0.45px;
  }

  .sasd2-history-cell {
    font-size: 15px;
    height: 44px;
    padding: 2px 4px;
  }

  .sasd2-section-header {
    font-size: 18px;
    height: 65px;
    padding: 0 14px;
  }

  .sasd2-approval-actions .sasd2-btn-approval--reject,
  .sasd2-approval-actions .sasd2-btn-approval--request,
  .sasd2-approval-actions .sasd2-btn--list-sm,
  .sasd2-approval-actions .sasd2-btn--save {
    font-size: 15px;
    height: 46px;
  }

  .sasd2-reject-actions .sasd2-btn {
    font-size: 15px;
    height: 46px;
  }

  .sasd2-bottom-btn {
    font-size: 15px;
    height: 46px;
  }
}


/* ============================================================
   스냅샷 관리 상세 재생성 — 기본 스타일 (sasr-)
============================================================ */

/* ── 상세 카드 (전체 래퍼) ─────────────────────────────────── */
.sasr-detail-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 71px 194px 45px;
}

/* ── 페이지 메인/타이틀 ────────────────────────────────────── */
.sasr-main {
  padding: 80px 60px 60px;
}

.sasr-page-title {
  font-size: 34px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 17px;
  font-family: 'Nanum Gothic', sans-serif;
}

/* ── 섹션 ──────────────────────────────────────────────────── */
.sasr-section {
  margin-bottom: 81px;
}

.sasr-section:last-of-type {
  margin-bottom: 0;
}

/* ── 섹션 헤더 ─────────────────────────────────────────────── */
.sasr-section-header {
  background: #3a3a3a;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 24px;
  height: 65px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ── 섹션 바디 (정보 테이블) ───────────────────────────────── */
.sasr-section-body {
  background: #ffffff;
  border: none;
  border-radius: 0 0 6px 6px;
  overflow: visible;
  margin-top: 4px;
}

/* ── 정보 행 — 4열 그리드 ──────────────────────────────────── */
.sasr-info-row {
  display: grid;
  grid-template-columns: 200px 1fr 200px 1fr;
  column-gap: 3px;
}

.sasr-info-row + .sasr-info-row {
  margin-top: 4px;
}

/* 라벨 셀 */
.sasr-info-label {
  background: #f1f1f1;
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 10px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  white-space: nowrap;
}

/* 값 셀 */
.sasr-info-value {
  background: #ffffff;
  color: #000000;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 20px 0 39px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
  border: 2px solid #f1f1f1;
}

/* 넓은 행 — 값이 나머지 3열 차지 */
.sasr-info-row--wide .sasr-info-value {
  grid-column: 2 / -1;
}

/* 값 셀 내부 전체보기 버튼 */
.sasr-view-btn {
  background: #303030;
  color: #ffffff;
  border: none;
  border-radius: 0;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Nanum Gothic', sans-serif;
  white-space: nowrap;
  margin-left: auto;
}

/* 관리자 메모 행 — 높이 175px */
.sasr-info-row--memo .sasr-info-label,
.sasr-info-row--memo .sasr-info-value {
  height: 175px;
  align-items: center;
}

/* ── 모바일 전용 줄바꿈 — PC에서 숨김 ──────────────────────── */
.sasr-br-mobile {
  display: none;
}

/* ── 히스토리 바디 ─────────────────────────────────────────── */
.sasr-history-body {
  display: block !important;
  background: #ffffff;
  border: none;
  margin-top: 3px;
}

.sasr-history-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 3px;
  align-items: center;
}

.sasr-history-row + .sasr-history-row {
  margin-top: 4px;
}

.sasr-history-cell {
  font-size: 16px;
  color: #000000;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 20px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ffffff;
  border: 2px solid #f1f1f1;
}

.sasr-history-cell:first-child {
  background: #f1f1f1;
  border: none;
}

/* ── 섹션 헤더 내 버튼 (엑셀다운로드, 로그보기) ──────────── */
.sasr-header-btn {
  position: absolute;
  right: 20px;
  border: none;
  border-radius: 0;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Nanum Gothic', sans-serif;
  color: #ffffff;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sasr-header-btn--blue {
  background: #4779ae;
  min-width: 174px;
}

.sasr-header-btn--gray {
  background: #9d9d9d;
  min-width: 103px;
}

/* ── 대상자 목록 — 테이블 ─────────────────────────────────── */
.sasr-table-body {
  background: #ffffff;
  margin-top: 4px;
}

.sasr-table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 3px;
  align-items: center;
}

.sasr-table-row + .sasr-table-row {
  margin-top: 4px;
}

/* 테이블 헤더 행 */
.sasr-table-row--header .sasr-table-cell {
  background: #f1f1f1;
  font-weight: 400;
  border: none;
}

/* 테이블 셀 */
.sasr-table-cell {
  font-size: 16px;
  color: #000000;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 20px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ffffff;
  border: 2px solid #f1f1f1;
}

/* ── 페이지네이션 ─────────────────────────────────────────── */
.sasr-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 30px;
  height: 64px;
  margin-top: 9px;
}

.sasr-page-select {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  min-width: 72px;
  justify-content: center;
  cursor: pointer;
}

.sasr-page-num {
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: #344055;
  text-align: right;
  flex: 1;
}

.sasr-page-chevron {
  width: 16px;
  height: 16px;
}

.sasr-page-arrows {
  display: flex;
  align-items: center;
  gap: 18px;
}

.sasr-page-btn {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sasr-page-btn img {
  width: 31px;
  height: 31px;
}

/* ── 승인요청 버튼 영역 ───────────────────────────────────── */
.sasr-approval-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 38px;
  padding: 0;
}

/* PC: 안내문구가 남는 공간을 차지 → 버튼들을 우측으로 밀어냄 */
.sasr-approval-actions .sasr-approval-note {
  flex: 1;
}

/* ── 승인요청/승인요청안함 버튼 ───────────────────────────── */
.sasr-btn-approval {
  border: none;
  border-radius: 5px;
  padding: 0 10px;
  height: 48px;
  min-width: 159px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sasr-btn-approval--request {
  background: #edb323;
}

.sasr-btn-approval--reject {
  background: #f1634f;
  margin-right: auto;
}

/* ── 공통 버튼 (목록/저장/승인/반려) ──────────────────────── */
.sasr-btn {
  border: none;
  border-radius: 5px;
  padding: 0 10px;
  height: 48px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sasr-btn--list-sm {
  min-width: 136px;
  background: #ffffff;
  color: #4779ae;
  border: 1px solid #4779ae;
}

.sasr-btn--save {
  min-width: 136px;
  background: #4779ae;
  color: #ffffff;
}

.sasr-btn--approve {
  min-width: 102px;
  background: #edb323;
  color: #ffffff;
}

.sasr-btn--reject {
  min-width: 102px;
  background: #f1634f;
  color: #ffffff;
}

/* ── 승인요청 안내 문구 (버튼 행 안에 인라인) ─────────────── */
.sasr-approval-note {
  font-size: 16px;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  line-height: 1.6;
  margin: 0;
  white-space: nowrap;
}

/* ── 반려사유 영역 ────────────────────────────────────────── */
.sasr-reject-body {
  border: 2px solid #f1f1f1;
  background: #ffffff;
  height: 65px;
  display: flex;
  align-items: center;
}

.sasr-reject-content {
  flex: 1;
  padding: 0 20px;
  min-width: 0;
}

.sasr-reject-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 13px 0 0;
  flex-shrink: 0;
}

/* ── 하단 버튼 영역 (목록/재생성) ─────────────────────────── */
/* PC 전용 요소 */
.sasr-desktop-only {
  display: flex;
}

/* 모바일 전용 요소 — PC에서 숨김 */
.sasr-mobile-only {
  display: none;
}

/* 모바일 하단 버튼 (카드 바깥) — PC에서 숨김 */
.sasr-mobile-bottom-actions {
  display: none;
}

.sasr-mobile-bottom-btn {
  height: 50px;
  border-radius: 4px;
  font-size: 17px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.sasr-mobile-bottom-btn--list {
  background: #ffffff;
  color: #4779ae;
  border: 1px solid #3eb5c9;
}

.sasr-mobile-bottom-btn--save {
  background: #4779ae;
  color: #ffffff;
  border: none;
}

.sasr-bottom-actions {
  display: none;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 21px;
}

.sasr-bottom-btn {
  width: 136px;
  height: 48px;
  border: none;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sasr-bottom-btn--list {
  background: #ffffff;
  color: #4779ae;
  border: 1px solid #4779ae;
}

.sasr-bottom-btn--regen {
  background: #4779ae;
  color: #ffffff;
}

/* ============================================================
   스냅샷 관리 상세 재생성 — 기본 스타일 반응형 (≤ 1400px)
============================================================ */
@media (max-width: 1400px) {
  .sasr-info-row,
  .sasr-info-row--wide {
    grid-template-columns: 160px 1fr 160px 1fr;
  }

  .sasr-info-label {
    font-size: 14px;
  }

  .sasr-info-value {
    font-size: 15px;
  }

  .sasr-history-cell {
    font-size: 14px;
  }
}

/* ============================================================
   스냅샷 관리 상세 재생성 — 기본 스타일 반응형 (≤ 1660px)
============================================================ */
@media (max-width: 1660px) {

  .sasr-main {
    padding: 0 20px 30px;
  }

  .sasr-page-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 48px 0 48px;
  }

  .sasr-br-mobile {
    display: inline;
  }

  .sasr-detail-card {
    padding: 67px 16px 63px;
    border-radius: 0;
  }

  .sasr-section {
    margin-bottom: 63px;
  }

  .sasr-section-header {
    font-size: 18px;
    height: 65px;
    padding: 0 16px;
    border-radius: 0;
  }

  .sasr-section-body {
    border-top: none;
    border-radius: 0;
    margin-top: 4px;
  }

  .sasr-info-row,
  .sasr-info-row--wide {
    grid-template-columns: 119px 1fr;
    column-gap: 4px;
    row-gap: 4px;
  }

  .sasr-info-row + .sasr-info-row {
    margin-top: 4px;
  }

  .sasr-info-row--wide .sasr-info-value {
    grid-column: auto;
  }

  .sasr-info-label {
    font-size: 15px;
    height: auto;
    padding: 12px 14px;
    justify-content: flex-end;
    text-align: right;
    white-space: normal;
  }

  .sasr-info-value {
    font-size: 15px;
    height: auto;
    padding: 12px 14px 12px 24px;
    border: 2px solid #f1f1f1;
  }

  .sasr-info-row--memo .sasr-info-label,
  .sasr-info-row--memo .sasr-info-value {
    height: 119px;
    padding: 12px 14px 12px 27px;
  }

  .sasr-history-row {
    grid-template-columns: 1fr 1fr;
    column-gap: 3px;
    row-gap: 3px;
  }

  .sasr-history-row + .sasr-history-row {
    margin-top: 6px;
  }

  .sasr-history-cell {
    font-size: 15px;
    height: 44px;
    padding: 2px 4px;
    border: 2px solid #f1f1f1;
  }

  .sasr-history-cell:first-child {
    border: none;
  }

  .sasr-section:has(.sasr-header-btn) {
    padding-top: 36px;
  }

  .sasr-header-btn {
    top: -36px;
    right: 0;
    font-size: 13px;
    height: 30px;
    min-width: 90px;
    padding: 4px 13px;
  }

  .sasr-header-btn--blue {
    min-width: 120px;
  }

  .sasr-table-cell {
    font-size: 15px;
    height: auto;
    padding: 10px 8px;
  }

  .sasr-btn-approval {
    font-size: 20px;
    height: 48px;
    min-width: 159px;
  }

  .sasr-btn {
    font-size: 17px;
    height: 48px;
  }

  .sasr-btn--list-sm {
    min-width: 90px;
  }

  .sasr-btn--save {
    min-width: 120px;
  }

  .sasr-bottom-btn {
    font-size: 17px;
    height: 48px;
    flex: 1;
    width: auto;
  }

  .sasr-approval-note {
    font-size: 14px;
  }
}

/* ============================================================
   스냅샷 관리 상세 재생성 — 기본 스타일 반응형 (≤ 1200px)
============================================================ */
@media (max-width: 1200px) {

  .sasr-main {
    padding: 0 0 30px;
  }

  .sasr-detail-card {
    padding: 58px 16px 53px;
    border-radius: 0;
  }

  /* 테이블 — 모바일 (2열 × 2줄) */
  .sasr-table-row {
    grid-template-columns: 1fr 1fr;
    column-gap: 3px;
    row-gap: 1px;
  }

  .sasr-table-row + .sasr-table-row {
    margin-top: 4px;
  }

  .sasr-table-row--header .sasr-table-cell {
    font-size: 15px;
  }

  .sasr-table-cell {
    font-size: 15px;
    height: 44px;
    padding: 2px 4px;
    border: 2px solid #f1f1f1;
  }

  /* 페이지네이션 — 모바일 */
  .sasr-pagination {
    height: auto;
    padding: 14px 16px;
  }

  .sasr-page-select {
    min-width: 54px;
    padding: 4px 3px;
  }

  .sasr-page-num {
    font-size: 12px;
    font-weight: 700;
  }

  .sasr-page-btn img {
    width: 26px;
    height: 28px;
  }

  /* 승인요청 버튼 — 모바일 2행 배치 */
  .sasr-approval-actions {
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 10px;
    margin-top: 52px;
    justify-content: flex-end;
  }

  .sasr-approval-actions .sasr-btn-approval--reject {
    margin-right: 0;
  }

  /* 모바일: 목록+저장을 윗줄에 (order: -1) */
  .sasr-approval-actions .sasr-btn--list-sm {
    order: -2;
    flex: 0 0 calc(50% - 5px);
    height: 50px;
    font-size: 17px;
    min-width: auto;
    border-radius: 4px;
  }

  .sasr-approval-actions .sasr-btn--save {
    order: -1;
    flex: 0 0 calc(50% - 5px);
    height: 50px;
    font-size: 17px;
    min-width: auto;
    border-radius: 4px;
  }

  /* 모바일: 승인요청안함 — 피그마 원본 크기 유지 */
  .sasr-approval-actions .sasr-btn-approval--reject {
    order: 0;
    flex: 0 0 auto;
    height: 48px;
    font-size: 20px;
    min-width: 159px;
    border-radius: 5px;
  }

  .sasr-approval-actions .sasr-btn-approval--request {
    order: 1;
    flex: 0 0 auto;
    height: 48px;
    font-size: 20px;
    min-width: 159px;
    border-radius: 5px;
  }

  /* 모바일: 안내문구를 별도 줄에 배치 (order: 2) */
  .sasr-approval-actions .sasr-approval-note {
    order: 2;
    flex: 0 0 100%;
    font-size: 15px;
    white-space: normal;
  }

  /* 모바일 전용 요소 표시 / PC 전용 숨김 */
  .sasr-mobile-only {
    display: inline;
  }

  button.sasr-mobile-only,
  div.sasr-mobile-only {
    display: flex;
  }

  span.sasr-mobile-only {
    display: inline;
  }

  .sasr-desktop-only {
    display: none !important;
  }

  /* 모바일 하단 버튼 (카드 바깥) */
  .sasr-mobile-bottom-actions {
    display: flex;
    gap: 10px;
    margin-top: 51px;
    padding: 0 16px;
  }

  /* 모바일: 하단 버튼 */
  .sasr-bottom-actions {
    display: flex;
    padding: 0;
    gap: 10px;
    margin-top: 44px;
  }

  /* 반려사유 — 모바일 세로 배치 */
  .sasr-reject-body {
    height: 268px;
    flex-direction: column;
    align-items: stretch;
  }

  .sasr-reject-content {
    flex: 1;
    padding: 14px 16px;
  }

  /* 반려사유 버튼 — 모바일 */
  .sasr-reject-actions {
    padding: 13px 11px;
    gap: 5px;
  }

  .sasr-reject-actions .sasr-btn {
    flex: 0 0 102px;
    min-width: auto;
    height: 48px;
    font-size: 17px;
  }

  /* 하단 버튼 — 모바일 */
  .sasr-bottom-btn {
    flex: 1;
    width: auto;
    height: 50px;
    font-size: 17px;
    border-radius: 4px;
  }

  /* 헤더 버튼 — 모바일: 헤더 위로 이동 */
  .sasr-header-btn {
    font-size: 14px;
    height: 30px;
    padding: 4px 13px;
    top: -36px;
    right: 0;
    min-width: 90px;
  }
}

/* ============================================================
   스냅샷 관리 상세 재생성 — 기본 스타일 반응형 (≤ 480px)
============================================================ */
@media (max-width: 480px) {
  .sasr-detail-card {
    padding: 58px 16px 53px;
  }

  .sasr-info-row,
  .sasr-info-row--wide {
    grid-template-columns: 119px 1fr;
  }

  .sasr-info-label {
    font-size: 15px;
    padding: 10px 10px;
  }

  .sasr-info-value {
    font-size: 15px;
    padding: 13px 6px 13px 24px;
    letter-spacing: -0.45px;
  }

  .sasr-history-cell {
    font-size: 15px;
    height: 44px;
    padding: 2px 4px;
  }

  .sasr-section-header {
    font-size: 18px;
    height: 65px;
    padding: 0 14px;
  }

  .sasr-approval-actions .sasr-btn--list-sm,
  .sasr-approval-actions .sasr-btn--save {
    font-size: 15px;
    height: 46px;
  }

  .sasr-approval-actions .sasr-btn-approval--reject,
  .sasr-approval-actions .sasr-btn-approval--request {
    font-size: 20px;
    height: 48px;
    min-width: 159px;
    border-radius: 5px;
  }

  .sasr-reject-actions .sasr-btn {
    font-size: 15px;
    height: 46px;
  }

  .sasr-bottom-btn {
    font-size: 15px;
    height: 46px;
  }
}


/* ============================================================
   스냅샷 관리 상세 재생성 (sasr-) — 재생성 페이지 전용 스타일
============================================================ */

/* 관리정보 섹션: 헤더→본문 3px, 행간 4px */
.sasr-mgmt-section .sasr-section-body {
  margin-top: 3px;
}

.sasr-mgmt-section .sasr-info-row + .sasr-info-row {
  margin-top: 4px;
}

/* 생성기준 섹션 래퍼 */
.sasr-criteria-section .sasr-section-body {
  padding: 0;
}

/* 기준기간 / 기준인원 그룹 (데스크톱: 라벨+입력 같은 행) */
.sasr-criteria-group {
  display: flex;
  gap: 3px;
}

.sasr-criteria-group + .sasr-criteria-group {
  margin-top: 4px;
}

/* 기준기간 / 기준인원 라벨 */
.sasr-criteria-label {
  width: 200px;
  min-width: 200px;
  height: 44px;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
}

/* 날짜 행 */
.sasr-date-row {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
}

/* 날짜 입력 */
.sasr-date-input {
  height: 40px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  padding: 10px 12px;
  font-size: 16px;
  color: #4a4a4a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  flex: 1;
}

.sasr-date-input img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sasr-date-text {
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: #4a4a4a;
  font-family: 'Nanum Gothic', sans-serif;
  text-align: center;
  width: 100%;
}

/* 시간 선택 (details 드롭다운) */
.sasr-time-select {
  height: 40px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  font-size: 16px;
  color: #4a4a4a;
  position: relative;
  min-width: 103px;
  cursor: pointer;
  font-family: 'Nanum Gothic', sans-serif;
  list-style: none;
}

.sasr-time-toggle {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  cursor: pointer;
  list-style: none;
  box-sizing: border-box;
}

.sasr-time-toggle::-webkit-details-marker {
  display: none;
}

.sasr-time-toggle span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sasr-time-toggle img {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.sasr-time-select[open] .sasr-time-toggle img {
  transform: rotate(180deg);
}

.sasr-time-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  min-width: 100%;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 6px 0;
  margin: 0;
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
  animation: sasr-time-slide 0.2s ease;
}

@keyframes sasr-time-slide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.sasr-time-item {
  padding: 10px 16px;
  font-size: 15px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #505364;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sasr-time-item:hover {
  background: #f5f7fa;
  color: #303030;
}

.sasr-time-item--active {
  color: #3eb5c9;
  font-weight: 700;
}


/* ~ 구분자 */
.sasr-tilde {
  font-size: 20px;
  font-weight: 700;
  color: #8b8b8b;
  text-align: center;
  width: 25px;
}

/* 기준인원 행 */
.sasr-criteria-row {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
}

/* 드롭다운 셀렉트 박스 */
.sasr-select-box {
  height: 44px;
  background: #ffffff;
  border: 2px solid #f1f1f1;
  position: relative;
  font-size: 16px;
  cursor: pointer;
  flex: 1;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  list-style: none;
}

.sasr-select-toggle {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  cursor: pointer;
  list-style: none;
  box-sizing: border-box;
}

.sasr-select-toggle::-webkit-details-marker {
  display: none;
}

.sasr-select-toggle span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sasr-select-toggle img {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.sasr-select-box[open] .sasr-select-toggle img {
  transform: rotate(180deg);
}

.sasr-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  min-width: 100%;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 6px 0;
  margin: 0;
  z-index: 100;
  animation: sasr-select-slide 0.2s ease;
}

@keyframes sasr-select-slide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.sasr-select-item {
  padding: 10px 16px;
  font-size: 15px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #505364;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sasr-select-item:hover {
  background: #f5f7fa;
  color: #303030;
}

.sasr-select-item--active {
  color: #3eb5c9;
  font-weight: 700;
}

/* 인원수 라벨 */
.sasr-count-label {
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  white-space: nowrap;
  margin-left: 8px;
  min-width: 65px;
}

/* 인원수 입력 */
.sasr-count-input {
  height: 44px;
  background: #ffffff;
  border: 2px solid #f1f1f1;
  padding: 0 20px;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  outline: none;
  flex: 1.45;
  min-width: 0;
}

/* 안내 문구 */
.sasr-note {
  font-size: 16px;
  color: #303030;
  line-height: 1.6;
  margin-top: 16px;
  text-align: center;
}

/* 스냅샷 정보 섹션 */
.sasr-snapshot-section .sasr-section-body {
  margin-top: 6px;
  padding-bottom: 0;
}

.sasr-snapshot-section .sasr-info-row + .sasr-info-row {
  margin-top: 5px;
}

.sasr-snapshot-section .sasr-info-row--wide {
  align-items: stretch;
  min-height: 55px;
}

.sasr-snapshot-section .sasr-info-row--wide .sasr-info-label,
.sasr-snapshot-section .sasr-info-row--wide .sasr-info-value {
  height: auto;
  min-height: 55px;
}

.sasr-snapshot-section .sasr-info-row--wide .sasr-info-value {
  padding-left: 39px;
}

/* 편집 가능 입력 필드 */
.sasr-input-field {
  height: 100%;
  background: #ffffff;
  border: none;
  padding: 0;
  font-size: 16px;
  width: 100%;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  outline: none;
}

/* 미리보기 버튼 */
.sasr-preview-btn {
  background: #505364;
  color: #ffffff;
  border: none;
  height: 35px;
  font-size: 14px;
  font-weight: 700;
  min-width: 150px;
  cursor: pointer;
  font-family: 'Nanum Gothic', sans-serif;
}

/* 엑셀다운로드 버튼 */
.sasr-excel-btn {
  background: #4779ae;
  color: #ffffff;
  border: none;
  height: 35px;
  font-size: 14px;
  font-weight: 700;
  min-width: 180px;
  cursor: pointer;
  font-family: 'Nanum Gothic', sans-serif;
}

/* 비교 카드 컨테이너 */
.sasr-compare-cards {
  display: flex;
  align-items: flex-start;
  gap: 31px;
  margin-top: 29px;
  margin-left: 244px;
  margin-right: 39px;
}

/* 비교 카드 */
.sasr-compare-card {
  display: flex;
}

/* 카드 좌측 사이드바 */
.sasr-compare-sidebar {
  width: 133px;
  background: #505364;
  flex-shrink: 0;
  padding: 19px 0 18px;
}

/* 카드 우측 본문 */
.sasr-compare-body {
  flex: 1;
  padding: 19px 0 18px;
  border: 1px solid #f1f1f1;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
}

.sasr-compare-body .sasr-compare-row {
  padding-left: 21px;
}

/* 카드2 (재생성 기준): 행 높이 43px, top padding 18px */
.sasr-compare-card--regen .sasr-compare-sidebar,
.sasr-compare-card--regen .sasr-compare-body {
  padding: 18px 0 18px;
}

.sasr-compare-card--regen .sasr-compare-row {
  height: 43px;
}

/* 비교 카드 행 */
.sasr-compare-row {
  display: flex;
  height: 41px;
  align-items: center;
  padding: 0 16px;
}

.sasr-compare-row + .sasr-compare-row {
  border-top: none;
}

.sasr-compare-sidebar .sasr-compare-row {
  padding: 0 16px 0 5px;
}

/* 비교 카드 라벨 (좌측 사이드바 내) */
.sasr-compare-label {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
  width: 100%;
  font-family: 'Nanum Gothic', sans-serif;
}

/* 비교 카드 값 (우측 본문 내) */
.sasr-compare-value {
  color: #505364;
  font-size: 14px;
  padding-left: 0;
  font-family: 'Nanum Gothic', sans-serif;
}


/* ── 반응형: ≤1660px ────────────────────────────────── */
@media (max-width: 1660px) {
  .sasr-criteria-group {
    flex-direction: column;
    gap: 4px;
  }

  .sasr-criteria-label {
    width: 100%;
    height: 44px;
    font-size: 15px;
  }

  .sasr-date-input {
    height: 40px;
    font-size: 15px;
  }

  .sasr-time-select {
    min-width: 78px;
    font-size: 15px;
  }

  .sasr-select-box {
    font-size: 15px;
  }

  .sasr-count-label {
    font-size: 15px;
    margin-left: 12px;
    margin-right: 6px;
  }

  .sasr-count-input {
    font-size: 15px;
    flex: 1;
  }

  .sasr-note {
    font-size: 14px;
    margin-top: 17px;
  }

  .sasr-compare-cards {
    flex-direction: column;
    gap: 29px;
    margin-top: 22px;
    margin-left: -4px;
    margin-right: -4px;
  }

  .sasr-compare-card {
    flex-direction: row;
    width: 100%;
  }

  .sasr-compare-sidebar {
    width: 119px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .sasr-compare-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .sasr-compare-row {
    font-size: 14px;
    height: 25px;
  }

  .sasr-compare-card--regen .sasr-compare-sidebar,
  .sasr-compare-card--regen .sasr-compare-body {
    gap: 18px;
    padding: 18px 0;
  }

  .sasr-compare-card--regen .sasr-compare-row {
    height: 25px;
  }

  .sasr-compare-label {
    font-size: 14px;
    width: 100%;
  }

  .sasr-compare-value {
    font-size: 14px;
  }

  .sasr-compare-sidebar .sasr-compare-row {
    padding: 0 13px 0 14px;
  }

  .sasr-compare-body .sasr-compare-row {
    padding-left: 12px;
  }

  /* 미리보기 행 — 모바일 120px */
  .sasr-snapshot-section .sasr-info-row--wide {
    min-height: 120px;
  }

  .sasr-snapshot-section .sasr-info-row--wide .sasr-info-label,
  .sasr-snapshot-section .sasr-info-row--wide .sasr-info-value {
    min-height: 120px;
  }

  .sasr-snapshot-section .sasr-info-row--wide .sasr-info-value {
    padding-left: 20px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
  }

  .sasr-preview-btn,
  .sasr-excel-btn {
    min-width: 140px;
    font-size: 14px;
  }
}

/* ── 반응형: ≤480px ─────────────────────────────────── */
@media (max-width: 480px) {
  .sasr-date-row {
    flex-wrap: wrap;
    row-gap: 4px;
    position: relative;
    padding-right: 22px;
  }

  .sasr-date-input {
    flex: 2;
    min-width: 140px;
  }

  .sasr-time-select {
    min-width: auto;
    flex: 1;
  }

  .sasr-tilde {
    position: absolute;
    right: 0;
    top: 11px;
    width: auto;
  }

  .sasr-select-box {
    flex: 1.1;
  }

  .sasr-note {
    font-size: 14px;
    text-align: left;
  }

  .sasr-criteria-section .sasr-section-body {
    padding: 0;
  }

  .sasr-compare-cards {
    padding: 0;
  }
}


/* ============================================================
   옵션 관리 생성 (saoc-) — 시스템 관리자 옵션 생성 페이지
============================================================ */

/* ── 페이지 메인/타이틀 ────────────────────────────────────── */
.saoc-main {
  padding: 80px 60px 60px;
}

.saoc-page-title {
  font-size: 34px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 17px;
  font-family: 'Nanum Gothic', sans-serif;
}

/* ── 상세 카드 (전체 래퍼) ─────────────────────────────────── */
.saoc-detail-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 71px 194px 79px;
}

/* ── 섹션 ──────────────────────────────────────────────────── */
.saoc-section {
  margin-bottom: 83px;
}

.saoc-section:last-of-type {
  margin-bottom: 0;
}

/* ── 섹션 헤더 ─────────────────────────────────────────────── */
.saoc-section-header {
  background: #3a3a3a;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  height: 65px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 섹션 바디 (정보 테이블) ───────────────────────────────── */
.saoc-section-body {
  margin-top: 4px;
}

/* ── 정보 행 — 4열 그리드 ──────────────────────────────────── */
.saoc-info-row {
  display: grid;
  grid-template-columns: 200px 1fr 200px 1fr;
  column-gap: 3px;
}

.saoc-info-row + .saoc-info-row {
  margin-top: 4px;
}

/* 넓은 행 — 값이 나머지 3열 차지 */
.saoc-info-row--wide .saoc-info-value {
  grid-column: 2 / -1;
}

/* ── 라벨 셀 ───────────────────────────────────────────────── */
.saoc-info-label {
  background: #f1f1f1;
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 10px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* ── 값 셀 ─────────────────────────────────────────────────── */
.saoc-info-value {
  background: #ffffff;
  color: #000000;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 20px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid #f1f1f1;
}

/* ── 입력 필드가 있는 값 셀 ────────────────────────────────── */
.saoc-info-value--input {
  padding: 0;
}

/* ── 스냅샷 ID 셀 (입력 + 선택 버튼) ──────────────────────── */
.saoc-info-value--snap-id {
  padding: 0;
  border: none;
  gap: 3px;
}

.saoc-info-value--snap-id .saoc-input {
  flex: 1;
  min-width: 0;
  border: 2px solid #f1f1f1;
  height: 44px;
}

/* ── 단위 라벨이 있는 값 셀 ────────────────────────────────── */
.saoc-info-value--unit {
  padding: 0;
  border: none;
  gap: 4px;
}

.saoc-info-value--unit .saoc-input {
  width: 280px;
  height: 44px;
  border: 2px solid #f1f1f1;
}

/* ── 텍스트 입력 필드 ──────────────────────────────────────── */
.saoc-input {
  border: none;
  background: #ffffff;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #000000;
  padding: 0 20px;
  outline: none;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* ── 단위 텍스트 (점, CSET, 개) ────────────────────────────── */
.saoc-unit {
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  color: #000000;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 선택 버튼 (스냅샷 ID) ─────────────────────────────────── */
.saoc-select-btn {
  background: #4779ae;
  color: #ffffff;
  border: none;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  width: 95px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 전체보기 버튼 ─────────────────────────────────────────── */
.saoc-view-btn {
  background: #303030;
  color: #ffffff;
  border: none;
  padding: 4px 5px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Nanum Gothic', sans-serif;
  white-space: nowrap;
  margin-left: auto;
  width: 72px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── 섹션 노트 ─────────────────────────────────────────────── */
.saoc-section-note {
  font-size: 16px;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  text-align: center;
  margin: 20px 0 0;
  line-height: 1.4;
}

/* ── 하단 버튼 영역 ────────────────────────────────────────── */
.saoc-bottom-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 53px;
}

.saoc-bottom-btn {
  width: 225px;
  height: 50px;
  border: none;
  border-radius: 5px;
  font-size: 22px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.saoc-bottom-btn--list {
  background: #ffffff;
  color: #4779ae;
  border: 1px solid #b4b4b4;
}

.saoc-bottom-btn--create {
  background: #4779ae;
  color: #ffffff;
}


/* ============================================================
   옵션 관리 생성 - 반응형 (≤ 1400px) — 라벨 축소
============================================================ */
@media (max-width: 1400px) {
  .saoc-info-row {
    grid-template-columns: 160px 1fr 160px 1fr;
  }

  .saoc-info-label {
    font-size: 14px;
  }

  .saoc-info-value {
    font-size: 15px;
  }

  .saoc-detail-card {
    padding: 71px 100px 79px;
  }
}


/* ============================================================
   옵션 관리 생성 - 반응형 (≤ 1660px) — 카드/버튼 축소
============================================================ */
@media (max-width: 1660px) {
  .saoc-main {
    padding: 0 20px 30px;
  }

  .saoc-page-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 48px 0 48px;
  }

  .saoc-detail-card {
    padding: 56px 16px 58px;
    border-radius: 0;
  }

  .saoc-section {
    margin-bottom: 68px;
  }

  .saoc-section-header {
    font-size: 18px;
  }

  .saoc-info-row {
    grid-template-columns: 119px 1fr;
    column-gap: 4px;
    row-gap: 4px;
  }

  .saoc-info-row + .saoc-info-row {
    margin-top: 4px;
  }

  .saoc-info-row--wide .saoc-info-value {
    grid-column: auto;
  }

  .saoc-info-label {
    font-size: 15px;
    height: auto;
    min-height: 44px;
    padding: 8px 10px;
    white-space: normal;
    line-height: 1.4;
  }

  .saoc-info-value {
    font-size: 15px;
    height: auto;
    min-height: 44px;
    padding: 8px 14px;
  }

  /* 입력 셀 — 모바일: padding 재설정 (일반 값 셀 스타일 덮어쓰기 방지) */
  .saoc-info-value--input {
    padding: 0;
  }

  /* 스냅샷 ID: 모바일에서 입력+버튼 */
  .saoc-info-value--snap-id {
    padding: 0;
    border: none;
    gap: 3px;
  }

  .saoc-info-value--snap-id .saoc-input {
    min-height: 44px;
    height: auto;
  }

  .saoc-select-btn {
    width: 56px;
    font-size: 14px;
    min-height: 44px;
    height: auto;
  }

  /* 스냅샷 제목: 모바일에서 높이 확장 */
  .saoc-info-value {
    flex-wrap: wrap;
  }

  .saoc-view-btn {
    width: 72px;
    height: 25px;
    font-size: 13px;
  }

  /* 단위 있는 셀 — 모바일: padding/border 재설정 */
  .saoc-info-value--unit {
    padding: 0;
    border: none;
    gap: 6px;
  }

  .saoc-info-value--unit .saoc-input {
    flex: 1;
    min-width: 0;
    width: auto;
    min-height: 44px;
    height: auto;
    border: 2px solid #f1f1f1;
  }

  .saoc-unit {
    font-size: 15px;
  }

  .saoc-input {
    font-size: 15px;
  }

  /* 섹션 노트 — 모바일 */
  .saoc-section-note {
    font-size: 14px;
    margin-top: 17px;
    text-align: center;
  }

  /* 하단 버튼 — 모바일 */
  .saoc-bottom-actions {
    margin-top: 40px;
    gap: 10px;
  }

  .saoc-bottom-btn {
    flex: 1;
    width: auto;
    height: 48px;
    font-size: 18px;
  }
}


/* ============================================================
   옵션 관리 생성 - 반응형 (≤ 1200px) — 모바일
============================================================ */
@media (max-width: 1200px) {
  .saoc-main {
    padding: 0 0 30px;
  }

  .saoc-detail-card {
    padding: 56px 16px 58px;
    border-radius: 0;
  }

  .saoc-bottom-actions {
    padding: 0 16px;
  }
}


/* ============================================================
   옵션 관리 상세 (saod-) — 시스템 관리자 옵션 상세 페이지
============================================================ */

/* ── 페이지 메인/타이틀 ────────────────────────────────────── */
.saod-main {
  padding: 80px 60px 60px;
}

.saod-page-title {
  font-size: 34px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 17px;
  font-family: 'Nanum Gothic', sans-serif;
}

/* ── 상세 카드 ─────────────────────────────────────────────── */
.saod-detail-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 71px 194px 79px;
}

/* ── 섹션 ──────────────────────────────────────────────────── */
.saod-section {
  margin-bottom: 83px;
}

.saod-section:last-of-type {
  margin-bottom: 0;
}

/* ── 섹션 헤더 ─────────────────────────────────────────────── */
.saod-section-header {
  background: #3a3a3a;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  height: 65px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 섹션 바디 ─────────────────────────────────────────────── */
.saod-section-body {
  margin-top: 4px;
}

/* 섹션 2, 3: 헤더→바디 6px (피그마: 703-697, 1037-1031) */
.saod-section--payment .saod-section-body,
.saod-section--target .saod-section-body {
  margin-top: 6px;
}

/* ── 정보 행 — 4열 그리드 (데스크톱) ──────────────────────── */
.saod-info-row {
  display: grid;
  grid-template-columns: 200px 1fr 200px 1fr;
  column-gap: 3px;
}

.saod-info-row + .saod-info-row {
  margin-top: 4px;
}

.saod-info-row--wide .saod-info-value {
  grid-column: 2 / -1;
}

/* ── 라벨 셀 ───────────────────────────────────────────────── */
.saod-info-label {
  background: #f1f1f1;
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 10px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* ── 값 셀 ─────────────────────────────────────────────────── */
.saod-info-value {
  background: #ffffff;
  color: #000000;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 20px 0 39px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid #f1f1f1;
}

/* ── 입력 필드 값 셀 ───────────────────────────────────────── */
.saod-info-value--input {
  padding: 0;
}

/* ── 스냅샷 ID 셀 (입력 + 선택 버튼) ──────────────────────── */
.saod-info-value--snap-id {
  padding: 0;
  border: none;
  gap: 3px;
}

.saod-info-value--snap-id .saod-input {
  flex: 1;
  min-width: 0;
  border: 2px solid #f1f1f1;
  height: 44px;
}

/* ── 단위 라벨 값 셀 ───────────────────────────────────────── */
.saod-info-value--unit {
  padding: 0;
  border: none;
  gap: 0;
}

.saod-info-value--unit .saod-input {
  width: 280px;
  height: 44px;
  border: 2px solid #f1f1f1;
  min-width: 0;
}

/* ── 텍스트 입력 ───────────────────────────────────────────── */
.saod-input {
  border: none;
  background: #ffffff;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #000000;
  /*padding: 0 20px;*/
  padding: 0 20px 0 39px;
  outline: none;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* ── 단위 텍스트 — 남은 공간 중앙 배치 ─────────────────────── */
.saod-unit {
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  color: #000000;
  white-space: nowrap;
  flex: 1;
  text-align: center;
}

/* ── 선택 버튼 ─────────────────────────────────────────────── */
.saod-select-btn {
  background: #4779ae;
  color: #ffffff;
  border: none;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  width: 95px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 전체보기 버튼 ─────────────────────────────────────────── */
.saod-view-btn {
  background: #303030;
  color: #ffffff;
  border: none;
  padding: 4px 5px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Nanum Gothic', sans-serif;
  white-space: nowrap;
  margin-left: auto;
  width: 72px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── 모바일 전용 줄바꿈 — PC에서 숨김 ──────────────────────── */
.saod-br-mobile {
  display: none;
}

/* ── 섹션 노트 ─────────────────────────────────────────────── */
.saod-section-note {
  font-size: 16px;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  text-align: center;
  margin: 20px 0 0;
  line-height: 1.4;
}

/* 섹션 2 노트: margin-top 22px (피그마: 865-843) */
.saod-section--payment .saod-section-note {
  margin-top: 22px;
}

/* ── 하단 버튼 ─────────────────────────────────────────────── */
.saod-bottom-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 53px;
}

.saod-bottom-btn {
  width: 225px;
  height: 50px;
  border: none;
  border-radius: 5px;
  font-size: 22px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.saod-bottom-btn--list {
  background: #ffffff;
  color: #4779ae;
  border: 1px solid #b4b4b4;
}

.saod-bottom-btn--create {
  background: #4779ae;
  color: #ffffff;
}


/* ============================================================
   옵션 관리 상세 - 반응형 (≤ 1660px) — 모바일 전환
============================================================ */
@media (max-width: 1660px) {
  .saod-main {
    padding: 0 20px 30px;
  }

  .saod-page-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 48px 0 48px;
  }

  .saod-detail-card {
    padding: 56px 16px 58px;
    border-radius: 0;
  }

  .saod-section {
    margin-bottom: 68px;
  }

  .saod-section-header {
    font-size: 18px;
  }

  .saod-info-row {
    grid-template-columns: 119px 1fr;
    column-gap: 4px;
    row-gap: 4px;
  }

  .saod-info-row + .saod-info-row {
    margin-top: 4px;
  }

  .saod-info-row--wide .saod-info-value {
    grid-column: auto;
  }

  .saod-info-label {
    font-size: 15px;
    height: auto;
    min-height: 44px;
    min-width: 0;
    padding: 8px 15px 8px 10px;
    white-space: normal;
    line-height: 1.4;
    justify-content: flex-end;
    text-align: right;
  }

  .saod-info-value {
    font-size: 15px;
    height: auto;
    min-height: 44px;
    padding: 8px 14px 8px 24px;
  }

  /* 입력 셀 — padding 재설정 */
  .saod-info-value--input {
    padding: 0;
  }

  /* 스냅샷 ID — padding/border 재설정 */
  .saod-info-value--snap-id {
    padding: 0;
    border: none;
    gap: 3px;
  }

  .saod-info-value--snap-id .saod-input {
    min-height: 44px;
    height: auto;
  }

  .saod-select-btn {
    width: 56px;
    font-size: 14px;
    min-height: 44px;
    height: auto;
  }

  .saod-br-mobile {
    display: inline;
  }

  /* 섹션 2, 3: 모바일 헤더→바디 4px (피그마: 792-788, 1354-1350) */
  .saod-section--payment .saod-section-body,
  .saod-section--target .saod-section-body {
    margin-top: 4px;
  }

  /* 버튼 포함 값 셀 — 텍스트+버튼 나란히 배치 */
  .saod-info-value--with-btn {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .saod-value-text {
    flex: 1;
    min-width: 0;
  }

  .saod-view-btn {
    width: 72px;
    height: 25px;
    font-size: 13px;
    margin-left: 0;
    flex-shrink: 0;
  }

  /* 단위 셀 — 모바일: padding/border 재설정 */
  .saod-info-value--unit {
    padding: 0;
    border: none;
    gap: 4px;
    align-items: center;
    min-width: 0;
    overflow: hidden;
  }

  .saod-info-value--unit .saod-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 100%;
    border: 2px solid #f1f1f1;
  }

  .saod-info-value--unit .saod-unit {
    flex: 0 0 48px;
    text-align: left;
    padding-right: 8px;
    box-sizing: border-box;
  }

  .saod-unit {
    font-size: 15px;
  }

  .saod-input {
    font-size: 15px;
  }

  /* 노트 */
  .saod-section-note {
    font-size: 14px;
    margin-top: 17px;
    text-align: left;
  }

  /* 하단 버튼 */
  .saod-bottom-actions {
    margin-top: 35px;
    gap: 10px;
  }

  .saod-bottom-btn {
    flex: 1;
    width: auto;
    height: 50px;
    font-size: 17px;
    border-radius: 4px;
  }

  .saod-bottom-btn--list {
    border-color: #3eb5c9;
  }
}


/* ============================================================
   옵션 관리 상세 - 반응형 (≤ 1200px) — 모바일
============================================================ */
@media (max-width: 1200px) {
  .saod-main {
    padding: 0 0 30px;
  }

  .saod-detail-card {
    padding: 56px 16px 58px;
    border-radius: 0;
  }

  .saod-bottom-actions {
    padding: 0 16px;
  }
}


/* ============================================================
   옵션 스냅샷 선택 모달 (sosm-) — 기준 스냅샷 선택 팝업
============================================================ */

/* ── 오버레이 ──────────────────────────────────────────────── */
.sosm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

/* ── 모달 다이얼로그 ───────────────────────────────────────── */
.sosm-modal {
  background: #ffffff;
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  border-radius: 15px;
}

/* ── 모달 헤더 ─────────────────────────────────────────────── */
.sosm-header {
  background: #4779ae;
  padding: 41px 24px 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 15px 15px 0 0;
}

.sosm-title {
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Nanum Gothic', sans-serif;
}

.sosm-close {
  position: absolute;
  right: 35px;
  top: 29px;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 24px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

/* ── 필터 ──────────────────────────────────────────────────── */
.sosm-filter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 30px 5px 16px;
}

.sosm-filter-label {
  font-size: 16px;
  font-weight: 700;
  color: #3a3a3a;
  font-family: 'Nanum Gothic', sans-serif;
}

.sosm-select {
  width: 181px;
}

.sosm-select .sam-select-toggle {
  height: 45px;
  font-size: 14px;
}

/* ── 테이블 ────────────────────────────────────────────────── */
.sosm-table {
  width: 100%;
}

.sosm-row {
  display: grid;
  grid-template-columns: 1fr 1.22fr 1.59fr 1.52fr 1.37fr 1.36fr;
  align-items: center;
  min-height: 53px;
}

.sosm-row--head {
  background: #505364;
  min-height: 58px;
}

.sosm-row--head .sosm-cell {
  font-weight: 700;
  color: #ffffff;
  font-size: 17px;
}

.sosm-cell {
  font-size: 16px;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 8px 6px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sosm-table-body .sosm-row {
  border-bottom: none;
}

.sosm-table-body .sosm-row:nth-child(even) {
  background: #F8F9FA;
}

/* ── 선택 버튼 ─────────────────────────────────────────────── */
.sosm-select-btn {
  background: #9d9d9d;
  color: #ffffff;
  border: none;
  width: 95px;
  height: 35px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
}

/* ── 페이지네이션 ──────────────────────────────────────────── */
.sosm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 64px;
  padding: 0 24px;
  margin-top: 23px;
}

.sosm-pag-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 12px;
  width: 72px;
  height: 44px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
  cursor: pointer;
}

.sosm-pag-selector span {
  font-size: 14px;
  color: #344055;
  font-family: 'Inter', sans-serif;
  flex: 1;
  text-align: right;
}

.sosm-pag-selector img {
  width: 16px;
  height: 16px;
}

.sosm-pag-controls {
  display: flex;
  align-items: center;
  gap: 18px;
}

.sosm-pag-btn {
  background: transparent;
  border: none;
  padding: 0;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sosm-pag-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── 취소 버튼 ─────────────────────────────────────────────── */
.sosm-actions {
  display: flex;
  justify-content: center;
  padding: 17px 24px 30px;
}

.sosm-cancel-btn {
  background: #f1f1f1;
  border: none;
  border-radius: 4px;
  width: 241px;
  height: 50px;
  font-size: 22px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  color: #303030;
  cursor: pointer;
}


/* ============================================================
   옵션 스냅샷 선택 모달 - 반응형 (≤ 945px) — 모바일
============================================================ */
@media (max-width: 945px) {

  .sosm-overlay {
    padding: 60px 14px;
    align-items: flex-start;
  }

  .sosm-modal {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 15px;
  }

  .sosm-header {
    padding: 75px 16px 19px;
    border-radius: 15px 15px 0 0;
  }

  .sosm-title {
    font-size: 26px;
  }

  .sosm-close {
    right: 24px;
    top: 23px;
    transform: none;
    font-size: 20px;
    width: 20px;
    height: 20px;
  }

  /* 필터 — 모바일 */
  .sosm-filter {
    padding: 31px 10px 9px;
    gap: 6px;
  }

  .sosm-filter-label {
    font-size: 14px;
    color: rgba(48, 48, 48, 0.7);
  }

  .sosm-select {
    width: 130px;
  }

  .sosm-select .sam-select-toggle {
    height: 32px;
    font-size: 14px;
  }

  /* 테이블 — 모바일: 3열 x 2행 그리드 */
  .sosm-row {
    grid-template-columns: 1fr 1.11fr 1.17fr;
    grid-template-rows: auto auto;
    min-height: auto;
    padding: 0;
    row-gap: 1px;
  }

  /* 헤더: 보임, 2행 각각 다른 bg */
  .sosm-row--head {
    background: #777A8E;
    min-height: auto;
    row-gap: 0;
    column-gap: 0;
  }

  /* 헤더 행1 — #777A8E (No, 스냅샷 ID, 확정승인완료 일시) */
  .sosm-row--head .sosm-cell[data-col="no"],
  .sosm-row--head .sosm-cell[data-col="id"],
  .sosm-row--head .sosm-cell[data-col="date"] {
    background: #777A8E;
  }

  /* 헤더 행2 — #505364 (생성사유, 스냅샷 제목, 선택) */
  .sosm-row--head .sosm-cell[data-col="reason"],
  .sosm-row--head .sosm-cell[data-col="title"],
  .sosm-row--head .sosm-cell[data-col="select"] {
    background: #505364;
  }

  .sosm-row--head .sosm-cell {
    font-size: 13px;
    padding: 8px 4px;
  }

  .sosm-cell {
    font-size: 11px;
    padding: 6px 4px;
    white-space: normal;
    text-align: center;
  }

  /* 6셀 → 3열 x 2행 배치 (figma: row1=No/ID/일시, row2=사유/제목/선택) */
  .sosm-cell[data-col="no"] {
    grid-column: 1;
    grid-row: 1;
  }

  .sosm-cell[data-col="id"] {
    grid-column: 2;
    grid-row: 1;
  }

  .sosm-cell[data-col="date"] {
    grid-column: 3;
    grid-row: 1;
  }

  .sosm-cell[data-col="reason"] {
    grid-column: 1;
    grid-row: 2;
  }

  .sosm-cell[data-col="title"] {
    grid-column: 2;
    grid-row: 2;
  }

  .sosm-cell[data-col="select"] {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .sosm-select-btn {
    width: 40px;
    height: 22px;
    font-size: 11px;
  }

  /* 데이터 행 짝수 bg — SVG fill #F8F9FA */
  .sosm-table-body .sosm-row:nth-child(even) {
    background: #F8F9FA;
  }

  /* 모바일: 5개 행만 표시 */
  .sosm-table-body .sosm-row:nth-child(n+6) {
    display: none;
  }

  /* 페이지네이션 — 모바일 */
  .sosm-pagination {
    margin-top: 53px;
    height: 39px;
    padding: 0 16px;
    gap: 16px;
  }

  .sosm-pag-selector {
    width: 54px;
    height: 28px;
    padding: 4px 6px;
  }

  .sosm-pag-selector span {
    font-size: 12px;
  }

  /* double arrow (1,4번째): 26x28 */
  .sosm-pag-btn {
    width: 26px;
    height: 28px;
  }

  /* single arrow (2,3번째): 30x26 */
  .sosm-pag-btn:nth-child(2),
  .sosm-pag-btn:nth-child(3) {
    width: 30px;
    height: 26px;
  }

  .sosm-pag-controls {
    gap: 18px;
  }

  /* 취소 버튼 — 모바일 */
  /* 취소 버튼 — 모바일 */
  .sosm-actions {
    padding: 27px 24px 40px;
  }

  .sosm-cancel-btn {
    font-size: 17px;
    height: 50px;
  }
}


/* ============================================================
   의장 옵션 관리 상세 (scod-) — 의장 옵션 관리 상세 페이지
============================================================ */

/* ── 페이지 메인/타이틀 ────────────────────────────────────── */
.scod-main {
  padding: 80px 60px 60px;
}

.scod-page-title {
  font-size: 34px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 17px;
  font-family: 'Nanum Gothic', sans-serif;
}

/* ── 상세 카드 (전체 래퍼) ─────────────────────────────────── */
.scod-detail-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 71px 194px 79px;
}

/* ── 섹션 ──────────────────────────────────────────────────── */
.scod-section {
  margin-bottom: 70px;
}

.scod-section:last-of-type {
  margin-bottom: 0;
}

/* ── 섹션 헤더 ─────────────────────────────────────────────── */
.scod-section-header {
  background: #3a3a3a;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  height: 65px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 로그 섹션 헤더 (버튼 포함) ────────────────────────────── */
.scod-section-header--log {
  position: relative;
}

.scod-log-btn {
  position: absolute;
  right: 39px;
  top: 50%;
  transform: translateY(-50%);
  background: #9d9d9d;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  border: none;
  cursor: pointer;
  width: 103px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 섹션 바디 (정보 테이블) ───────────────────────────────── */
.scod-section-body {
  margin-top: 4px;
}

/* ── 정보 행 — 4열 그리드 ──────────────────────────────────── */
.scod-info-row {
  display: grid;
  grid-template-columns: 200px 1fr 200px 1fr;
  column-gap: 3px;
}

.scod-info-row + .scod-info-row {
  margin-top: 4px;
}

/* 넓은 행 — 값이 나머지 3열 차지 */
.scod-info-row--wide .scod-info-value {
  grid-column: 2 / -1;
}

/* 메모 행 — 2열 그리드 */
.scod-info-row--memo {
  grid-template-columns: 200px 1fr;
}

/* ── 라벨 셀 ───────────────────────────────────────────────── */
.scod-info-label {
  background: #f1f1f1;
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 10px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* 메모 라벨 — 높이 175px */
.scod-info-label--memo {
  height: 175px;
}

/* ── 값 셀 ─────────────────────────────────────────────────── */
.scod-info-value {
  background: #ffffff;
  color: #000000;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 39px;
  height: 44px;
  display: flex;
  align-items: center;
  border: 2px solid #f1f1f1;
}

/* 메모 값 — 높이 175px, 세로 중앙 정렬 */
.scod-info-value--memo {
  height: 175px;
  padding-left: 59px;
}

/* 우측 정렬 값 (옵션 지급 정보) */
.scod-info-value--right {
  justify-content: flex-end;
  padding: 0 70px 0 39px;
}

/* 옵션 지급 정보 — wide 행: 값 셀은 col2에서 텍스트 정렬, pseudo로 전체 너비 배경 제공 */
.scod-section--payment .scod-info-row--wide {
  position: relative;
}

.scod-section--payment .scod-info-row--wide::after {
  content: '';
  position: absolute;
  left: 203px;
  right: 0;
  top: 0;
  bottom: 0;
  background: #ffffff;
  border: 2px solid #f1f1f1;
}

.scod-section--payment .scod-info-row--wide .scod-info-label {
  position: relative;
  z-index: 1;
}

.scod-section--payment .scod-info-row--wide .scod-info-value {
  grid-column: auto;
  position: relative;
  z-index: 1;
  background: transparent;
  border-color: transparent;
}

/* 상세보기 버튼 포함 값 */
.scod-info-value--with-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 5px;
}

.scod-value-text {
  flex: 1;
  min-width: 0;
}

/* ── 상세보기 버튼 ─────────────────────────────────────────── */
.scod-view-btn {
  background: #303030;
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  width: 72px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── 데스크톱에서 모바일 줄바꿈 숨김 ──────────────────────── */
.scod-br-mobile {
  display: none;
}

/* ── 섹션 노트 ─────────────────────────────────────────────── */
.scod-section-note {
  font-size: 16px;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  text-align: center;
  margin: 23px 0 0;
  line-height: 1.4;
}

/* ── 관리정보 섹션 — header→body 간격 5px ──────────────────── */
.scod-section--manage .scod-section-body {
  margin-top: 5px;
}

/* ── 관리정보 — 메모→등록일시 행 간격 5px ──────────────────── */
.scod-info-row--memo + .scod-info-row {
  margin-top: 5px;
}

/* ── 로그 테이블 바디 ──────────────────────────────────────── */
.scod-log-body {
  margin-top: 3px;
}

/* ── 로그 행 — 4열 그리드 ──────────────────────────────────── */
.scod-log-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 3px;
}

.scod-log-row + .scod-log-row {
  margin-top: 4px;
}

/* ── 로그 셀 ───────────────────────────────────────────────── */
.scod-log-cell {
  background: #ffffff;
  color: #000000;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #f1f1f1;
  text-align: center;
}

/* 날짜 셀 — 배경색 다름 */
.scod-log-cell--date {
  background: #f1f1f1;
  border: none;
}

/* ── 관리정보 하단 버튼 영역 ───────────────────────────────── */
.scod-manage-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 35px;
}

.scod-manage-btn {
  border: none;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  white-space: nowrap;
}

/* 승인요청안함 (빨강, 왼쪽) */
.scod-manage-btn--reject-no {
  background: #f1634f;
  color: #ffffff;
  width: 159px;
}

/* 관리 노트 (버튼 사이 텍스트) */
.scod-manage-note {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  color: #000000;
  font-family: 'Nanum Gothic', sans-serif;
  margin: 0;
  padding-left: 5px;
}

/* 목록 (아웃라인) */
.scod-manage-btn--list {
  background: #ffffff;
  color: #4779ae;
  border: 1px solid #4779ae;
  width: 136px;
}

/* 저장 (파랑) */
.scod-manage-btn--save {
  background: #4779ae;
  color: #ffffff;
  width: 136px;
}

/* 승인요청 (노랑) */
.scod-manage-btn--approve-req {
  background: #edb323;
  color: #ffffff;
  width: 159px;
}

/* ── 반려사유 바디 ─────────────────────────────────────────── */
.scod-reject-body {
  display: block !important;
  border: 2px solid #f1f1f1;
  background: #ffffff;
  padding: 0;
  margin-top: 1px;
}

/* ── 반려사유 — 버튼/입력 래퍼 ─────────────────────────────── */
.scod-reject-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  padding: 9px 11px;
}

/* ── 반려사유 입력 ─────────────────────────────────────────── */
.scod-reject-input {
  flex: 1;
  height: 45px;
  border: none;
  padding: 10px 14px;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #000000;
  background: #ffffff;
  outline: none;
  box-sizing: border-box;
  resize: none;
  line-height: 1.4;
  min-width: 0;
}

.scod-reject-btn {
  border: none;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 102px;
  height: 48px;
  white-space: nowrap;
}

/* 목록 (아웃라인) */
.scod-reject-btn--list {
  background: #ffffff;
  color: #4779ae;
  border: 1px solid #4779ae;
}

/* 승인 (노랑) */
.scod-reject-btn--approve {
  background: #edb323;
  color: #ffffff;
}

/* 반려 (빨강) */
.scod-reject-btn--deny {
  background: #f1634f;
  color: #ffffff;
}


/* ============================================================
   의장 옵션 관리 상세 - 반응형 (≤ 1400px) — 라벨 축소
============================================================ */
@media (max-width: 1400px) {
  .scod-info-row {
    grid-template-columns: 160px 1fr 160px 1fr;
  }

  .scod-info-row--memo {
    grid-template-columns: 160px 1fr;
  }

  .scod-info-label {
    font-size: 14px;
  }

  .scod-info-value {
    font-size: 15px;
  }

  .scod-detail-card {
    padding: 71px 100px 79px;
  }

  .scod-section--payment .scod-info-row--wide::after {
    left: 163px;
  }
}


/* ============================================================
   의장 옵션 관리 상세 - 반응형 (≤ 1660px) — 모바일
============================================================ */
@media (max-width: 1660px) {
  .scod-main {
    padding: 0 20px 30px;
  }

  .scod-page-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 48px 0 48px;
  }

  .scod-detail-card {
    padding: 58px 16px 58px;
    border-radius: 0;
  }

  .scod-section {
    margin-bottom: 54px;
  }

  .scod-section-header {
    font-size: 18px;
  }

  /* ── 정보 그리드 — 2열로 전환 ──── */
  .scod-info-row {
    grid-template-columns: 119px 1fr;
    column-gap: 4px;
    row-gap: 4px;
  }

  .scod-info-row + .scod-info-row {
    margin-top: 4px;
  }

  .scod-info-row--wide .scod-info-value {
    grid-column: auto;
  }

  .scod-info-row--memo {
    grid-template-columns: 119px 1fr;
  }

  /* ── 라벨 — 모바일 ──── */
  .scod-info-label {
    font-size: 15px;
    height: auto;
    min-height: 44px;
    padding: 8px 15px;
    white-space: normal;
    line-height: 1.2;
    justify-content: flex-end;
    text-align: right;
  }

  .scod-info-label--memo {
    height: 119px;
    min-height: 119px;
  }

  /* ── 값 — 모바일 ──── */
  .scod-info-value {
    font-size: 15px;
    height: auto;
    min-height: 44px;
    padding: 8px 10px 8px 24px;
  }

  /* 관리정보 값 — 모바일: color + padding */
  .scod-section--manage .scod-info-value {
    color: #303030;
    padding-left: 27px;
    padding-right: 0;
  }

  /* 관리정보 — header→body gap 모바일 */
  .scod-section--manage .scod-section-body {
    margin-top: 3px;
  }

  /* 관리정보 — 메모→등록일시 gap 모바일 */
  .scod-section--manage .scod-info-row--memo + .scod-info-row {
    margin-top: 4px;
  }

  .scod-info-value--memo {
    height: 119px;
    min-height: 119px;
  }

  /* 우측 정렬 값 — 모바일 */
  .scod-info-value--right {
    padding: 8px 28px;
  }

  /* ── 옵션 지급 정보 wide 행 — pseudo 숨김, 값 셀 복원 ──── */
  .scod-section--payment .scod-info-row--wide::after {
    display: none;
  }

  .scod-section--payment .scod-info-row--wide .scod-info-value {
    background: #ffffff;
    border-color: #f1f1f1;
  }

  /* ── 옵션 지급 정보 / 지급 대상 및 금액 — 셀 높이 통일 ──── */
  .scod-section--payment .scod-info-label,
  .scod-section--payment .scod-info-value,
  .scod-section--target .scod-info-label,
  .scod-section--target .scod-info-value {
    min-height: 65px;
  }

  /* 지급 대상 및 금액 — 모바일에서 우측 정렬 + 우측 패딩 */
  .scod-section--target .scod-info-value {
    justify-content: flex-end;
    padding-right: 28px;
  }

  /* ── 모바일 줄바꿈 표시 ──── */
  .scod-br-mobile {
    display: inline;
  }

  /* ── 상세보기 버튼 포함 값 — 모바일 ──── */
  .scod-info-value--with-btn {
    padding-right: 5px;
  }

  .scod-view-btn {
    width: 66px;
    height: 25px;
    font-size: 14px;
  }

  /* ── 섹션 노트 — 모바일 ──── */
  .scod-section-note {
    font-size: 14px;
    margin-top: 16px;
    text-align: left;
    padding-left: 5px;
    line-height: 1.43;
  }

  /* ── 로그 섹션 — 모바일 ──── */
  .scod-section--log {
    position: relative;
    padding-top: 36px;
  }

  .scod-section-header--log {
    position: static;
  }

  .scod-log-btn {
    position: absolute;
    right: 0;
    top: 0;
    transform: none;
    width: 90px;
    height: 30px;
    font-size: 14px;
  }

  /* 로그 바디 — 모바일 gap */
  .scod-log-body {
    margin-top: 4px;
  }

  /* 로그 행 — 2x2 그리드 */
  .scod-log-row {
    grid-template-columns: 1fr 1fr;
    column-gap: 3px;
    row-gap: 3px;
  }

  .scod-log-row + .scod-log-row {
    margin-top: 6px;
  }

  .scod-log-cell {
    font-size: 15px;
  }

  /* ── 관리정보 버튼 — 모바일 2x2 그리드 ──── */
  .scod-manage-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    margin-top: 29px;
  }

  .scod-manage-btn {
    font-size: 17px;
    height: 50px;
    width: auto;
    border-radius: 4px;
  }

  .scod-manage-btn--reject-no {
    order: 3;
  }

  .scod-manage-btn--list {
    order: 1;
  }

  .scod-manage-btn--save {
    order: 2;
  }

  .scod-manage-btn--approve-req {
    order: 4;
  }

  .scod-manage-note {
    order: 5;
    grid-column: 1 / -1;
    padding-left: 9px;
    font-size: 15px;
    margin-top: 1px;
  }

  /* ── 반려사유 바디 — 모바일 ──── */
  .scod-reject-body {
    padding: 0;
    margin-top: 3px;
  }

  .scod-reject-actions {
    display: grid;
    grid-template-columns: 102px 102px 102px;
    grid-template-rows: 1fr auto;
    justify-content: center;
    gap: 10px 5px;
    padding: 0 11px 15px;
    min-height: 264px;
  }

  .scod-reject-input {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: stretch;
    width: 100%;
    height: 100%;
    border: none;
    resize: none;
    padding: 14px 3px;
    font-size: 15px;
    box-sizing: border-box;
    vertical-align: top;
  }

  .scod-reject-btn {
    font-size: 17px;
  }
}


/* ============================================================
   의장 옵션 관리 상세 - 반응형 (≤ 1200px)
============================================================ */
@media (max-width: 1200px) {
  .scod-main {
    padding: 0 0 30px;
  }

  .scod-detail-card {
    padding: 58px 16px 58px;
    border-radius: 0;
  }
}


/* ============================================================
   시스템 관리자 옵션 관리 상세/수정 (saod- + .saod-main--detail)
   — system_admin_option_detail.html
   기존 saod- 스타일(옵션 관리 생성)과 충돌 방지 위해 스코프 적용
============================================================ */

/* ── 섹션 margin override (77px) ────────────────────────── */
.saod-main--detail .saod-section {
  margin-bottom: 77px;
}

.saod-main--detail .saod-section:last-of-type {
  margin-bottom: 0;
}

/* ── 값 셀 padding override (39px) ──────────────────────── */
.saod-main--detail .saod-info-value {
  padding: 0 39px;
}

/* 입력 포함 값 — padding 재설정 */
.saod-main--detail .saod-info-value--input,
.saod-main--detail .saod-info-value--snap-id,
.saod-main--detail .saod-info-value--unit {
  padding: 0;
}

/* 스냅샷 ID span — input과 동일한 시각 */
.saod-main--detail .saod-value-text--snap-id {
  flex: 1;
  min-width: 0;
  border: 2px solid #f1f1f1;
  background: #ffffff;
  height: 44px;
  padding: 0 39px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #000000;
}

/* 상세보기 버튼 포함 값 — 우측 패딩 5px */
.saod-main--detail .saod-info-value--with-btn {
  padding-right: 5px;
}

/* 옵션지급 정보 unit input — 우측 정렬 */
.saod-main--detail .saod-info-value--unit .saod-input {
  text-align: right;
  padding: 0 22px;
}

/* ── 섹션 노트 margin ───────────────────────────────────── */
.saod-main--detail .saod-section-note {
  margin: 23px 0 0;
}

/* ── 메모 행 (2열 그리드) ───────────────────────────────── */
.saod-main--detail .saod-info-row--memo {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 3px;
}

.saod-info-label--memo {
  height: 175px;
}

.saod-info-value--memo {
  height: 175px;
  padding-left: 59px;
}

.saod-main--detail .saod-info-row--memo + .saod-info-row {
  margin-top: 5px;
}

/* ── 관리정보 섹션 ──────────────────────────────────────── */
.saod-main--detail .saod-section--manage .saod-section-body {
  margin-top: 5px;
}

/* 관리정보 하단 버튼 (목록/저장) — 우측 정렬 */
.saod-manage-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 35px;
}

.saod-manage-btn {
  border: none;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 136px;
  height: 48px;
  white-space: nowrap;
}

.saod-manage-btn--list {
  background: #ffffff;
  color: #4779ae;
  border: 1px solid #4779ae;
}

.saod-manage-btn--save {
  background: #4779ae;
  color: #ffffff;
}

/* ── 로그 섹션 헤더 + 버튼 ───────────────────────────────── */
.saod-section-header--log {
  position: relative;
}

.saod-log-btn {
  position: absolute;
  right: 39px;
  top: 50%;
  transform: translateY(-50%);
  background: #9d9d9d;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  border: none;
  cursor: pointer;
  width: 103px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 로그 테이블 ────────────────────────────────────────── */
.saod-log-body {
  margin-top: 3px;
}

.saod-log-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 3px;
}

.saod-log-row + .saod-log-row {
  margin-top: 4px;
}

.saod-log-cell {
  background: #ffffff;
  color: #000000;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #f1f1f1;
  text-align: center;
}

.saod-log-cell--date {
  background: #f1f1f1;
  border: none;
}

/* ============================================================
   옵션 관리 상세 - 반응형 (≤ 1660px) — 모바일
============================================================ */
@media (max-width: 1660px) {

  /* ── 정보 그리드 2열 전환 ──── */
  .saod-main--detail .saod-info-row {
    grid-template-columns: 119px 1fr;
    column-gap: 4px;
    row-gap: 4px;
  }

  .saod-main--detail .saod-info-row + .saod-info-row {
    margin-top: 4px;
  }

  .saod-main--detail .saod-info-row--wide .saod-info-value {
    grid-column: auto;
  }

  .saod-main--detail .saod-info-row--memo {
    grid-template-columns: 119px 1fr;
  }

  /* ── 라벨 모바일 ──── */
  .saod-main--detail .saod-info-label {
    font-size: 15px;
    height: auto;
    min-height: 44px;
    padding: 8px 15px;
    white-space: normal;
    line-height: 1.2;
    justify-content: flex-end;
    text-align: right;
  }

  .saod-main--detail .saod-info-label--memo {
    height: 119px;
    min-height: 119px;
  }

  /* ── 값 셀 모바일 ──── */
  .saod-main--detail .saod-info-value {
    font-size: 15px;
    height: auto;
    min-height: 44px;
    padding: 8px 10px 8px 24px;
  }

  .saod-main--detail .saod-info-value--memo {
    height: 119px;
    min-height: 119px;
    padding: 8px 24px;
  }

  /* 관리정보 값 — 모바일에서 #303030 + padding 조정 */
  .saod-main--detail .saod-section--manage .saod-info-value {
    color: #303030;
    padding-left: 27px;
    padding-right: 0;
  }

  .saod-main--detail .saod-section--manage .saod-section-body {
    margin-top: 3px;
  }

  .saod-main--detail .saod-section--manage .saod-info-row--memo + .saod-info-row {
    margin-top: 4px;
  }

  /* 섹션 margin 모바일 ── */
  .saod-main--detail .saod-section {
    margin-bottom: 59px;
  }

  /* 옵션 기본 정보 — 반려사유 wide row: 2줄 value h:65 */
  .saod-main--detail .saod-section--basic .saod-info-row--wide .saod-info-label,
  .saod-main--detail .saod-section--basic .saod-info-row--wide .saod-info-value {
    min-height: 65px;
  }

  /* 상세보기 버튼 포함 값 — 모바일 우측 padding 5px */
  .saod-main--detail .saod-info-value--with-btn {
    padding-right: 5px;
  }

  /* ── 모바일 줄바꿈 ──── */
  .saod-main--detail .saod-br-mobile {
    display: inline;
  }

  /* ── 스냅샷 ID 모바일 — w:161, 선택 버튼 w:56, gap:3px ──── */
  .saod-main--detail .saod-info-value--snap-id {
    padding: 0;
    gap: 3px;
  }

  /* 2줄 라벨/값 셀 min-height 65px (grid stretch로 쌍 셀 자동 맞춤) */
  .saod-main--detail .saod-info-label:has(br.saod-br-mobile),
  .saod-main--detail .saod-info-value--with-btn,
  .saod-main--detail .saod-info-value--unit {
    min-height: 65px;
  }

  .saod-main--detail .saod-info-value--snap-id .saod-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 24px;
    font-size: 15px;
  }

  .saod-main--detail .saod-value-text--snap-id {
    height: 44px;
    padding: 0 24px;
    font-size: 15px;
  }

  .saod-main--detail .saod-select-btn {
    width: 56px;
    height: 44px;
    font-size: 16px;
    flex-shrink: 0;
  }

  /* ── 옵션지급 정보 모바일 ──── */
  .saod-main--detail .saod-section--payment .saod-info-label,
  .saod-main--detail .saod-section--payment .saod-info-value {
    min-height: 65px;
  }

  .saod-main--detail .saod-section--payment .saod-info-value--unit {
    padding: 0;
    gap: 8px;
  }

  .saod-main--detail .saod-section--payment .saod-info-value--unit .saod-input {
    flex: 0 0 177px;
    min-width: 0;
    width: 177px;
    height: 100%;
    padding: 0 11px 0 0;
    font-size: 15px;
    text-align: right;
    border: 2px solid #f1f1f1;
    box-sizing: border-box;
  }

  .saod-main--detail .saod-section--payment .saod-unit {
    font-size: 15px;
    padding-right: 0;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* 예상 총 옵션점수 — 값 우측 정렬 (--unit 값 제외) */
  .saod-main--detail .saod-section--payment .saod-info-row > .saod-info-value:nth-child(4):not(.saod-info-value--unit) {
    justify-content: flex-end;
    padding: 8px 28px;
  }

  /* ── 지급 대상 및 금액 모바일 ──── */
  .saod-main--detail .saod-section--target .saod-info-label,
  .saod-main--detail .saod-section--target .saod-info-value {
    min-height: 65px;
  }

  .saod-main--detail .saod-section--target .saod-info-value {
    justify-content: flex-end;
    padding-right: 28px;
  }

  /* ── 섹션 노트 모바일 ──── */
  .saod-main--detail .saod-section-note {
    font-size: 13px;
    color: #707070;
    font-weight: 700;
    text-align: left;
    padding-left: 14px;
    margin-top: 18px;
    line-height: 1.38;
  }

  /* ── 로그 섹션 모바일 ──── */
  .saod-section--log {
    position: relative;
    padding-top: 36px;
  }

  .saod-main--detail .saod-section-header--log {
    position: static;
  }

  .saod-main--detail .saod-log-btn {
    position: absolute;
    right: 0;
    top: 0;
    transform: none;
    width: 90px;
    height: 30px;
    font-size: 14px;
  }

  .saod-log-body {
    margin-top: 4px;
  }

  .saod-log-row {
    grid-template-columns: 1fr 1fr;
    column-gap: 3px;
    row-gap: 3px;
  }

  .saod-log-row + .saod-log-row {
    margin-top: 6px;
  }

  .saod-log-cell {
    font-size: 15px;
  }

  /* ── 관리정보 하단 버튼 모바일 (2열 grid) ──── */
  .saod-manage-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 47px;
    justify-content: stretch;
  }

  .saod-manage-btn {
    font-size: 17px;
    height: 50px;
    width: auto;
    border-radius: 4px;
  }
}


/* ============================================================
   옵션 관리 상세 - 반응형 (≤ 1200px)
============================================================ */
@media (max-width: 1200px) {
  .saod-main--detail {
    padding: 0 0 30px;
  }
}


/* ============================================================
   영수증 관리 상세 (sard-) — system_admin_receipt_detail.html
============================================================ */

/* ── 페이지 메인/타이틀 ──── */
.sard-main {
  padding: 80px 60px 60px;
}

.sard-page-title {
  font-size: 34px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 17px;
  font-family: 'Nanum Gothic', sans-serif;
}

/* ── 상세 카드 ──── */
.sard-detail-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 71px 194px 79px;
}

/* ── 섹션 (margin-bottom: 64px) ──── */
.sard-section {
  margin-bottom: 64px;
}

.sard-section:last-of-type {
  margin-bottom: 0;
}

/* ── 섹션 헤더 ──── */
.sard-section-header {
  background: #3a3a3a;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  height: 65px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 섹션 바디 ──── */
.sard-section-body {
  margin-top: 4px;
}

/* ── 정보 행 (4열 grid) ──── */
.sard-info-row {
  display: grid;
  grid-template-columns: 200px 1fr 200px 1fr;
  column-gap: 3px;
}

.sard-info-row + .sard-info-row {
  margin-top: 4px;
}

.sard-info-row--wide .sard-info-value {
  grid-column: 2 / -1;
}

/* 메모 행 — 2열 grid */
.sard-info-row--memo {
  grid-template-columns: 200px 1fr;
}

/* ── 라벨 셀 ──── */
.sard-info-label {
  background: #f1f1f1;
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 10px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.sard-info-label--memo {
  height: 175px;
}

/* ── 값 셀 ──── */
.sard-info-value {
  background: #ffffff;
  color: #000000;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 39px;
  height: 44px;
  display: flex;
  align-items: center;
  border: 2px solid #f1f1f1;
}

.sard-info-value--memo {
  height: 175px;
  padding-left: 39px;
}

/* ── 문서관리 — 문서보기 3개 버튼 행 ──── */
.sard-info-row--doc .sard-info-label,
.sard-info-row--doc .sard-info-value {
  height: 65px;
}

/* 계약기록해시 값 — 공백 없는 긴 문자열 자연 래핑 */
.sard-info-value--hash {
  word-break: break-all;
}

/* 문서관리 섹션 라벨 — fs:17 (계약기록해시, 문서보기) */
.sard-section--doc .sard-info-label {
  font-size: 17px;
}

.sard-info-value--doc-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 23px;
  padding: 0;
}

/* 문서관리 버튼 공통 */
.sard-doc-btn {
  width: 154px;
  height: 40px;
  border-radius: 0;
  border: none;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
}

/* PDF확인하기 — 아웃라인 coral */
.sard-doc-btn--view {
  background: #ffffff;
  color: #d46351;
  border: 1px solid #d46351;
}

/* PDF다운로드 — coral fill */
.sard-doc-btn--download {
  background: #d46351;
  color: #ffffff;
}

/* 이메일 전송 — green fill */
.sard-doc-btn--email {
  background: #b7cd47;
  color: #ffffff;
}

/* ── 로그 섹션 ──── */
.sard-section-header--log {
  position: relative;
}

.sard-log-btn {
  position: absolute;
  right: 39px;
  top: 50%;
  transform: translateY(-50%);
  background: #9d9d9d;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  border: none;
  cursor: pointer;
  width: 103px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sard-log-body {
  margin-top: 3px;
}

.sard-log-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 3px;
}

.sard-log-row + .sard-log-row {
  margin-top: 4px;
}

.sard-log-cell {
  background: #ffffff;
  color: #000000;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #f1f1f1;
  text-align: center;
}

.sard-log-cell--date {
  background: #f1f1f1;
  border: none;
}

/* ── 관리정보 섹션 ──── */
.sard-section--manage .sard-section-body {
  margin-top: 5px;
}

.sard-info-row--memo + .sard-info-row {
  margin-top: 5px;
}

/* ── 재발급 사유 섹션 ──── */
.sard-reissue-body {
  display: block !important;
  border: 2px solid #f1f1f1;
  background: #ffffff;
  padding: 0;
  margin-top: 1px;
}

.sard-reissue-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  padding: 9px 45px 9px 11px;
}

.sard-reissue-input {
  flex: 1;
  height: 45px;
  border: none;
  padding: 10px 14px;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #000000;
  background: #ffffff;
  outline: none;
  box-sizing: border-box;
  resize: none;
  line-height: 1.4;
  min-width: 0;
}

.sard-reissue-btn {
  background: #ffffff;
  color: #4779ae;
  border: 1px solid #4779ae;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  width: 159px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 하단 버튼 (목록/저장 중앙정렬) ──── */
.sard-bottom-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 52px;
}

.sard-bottom-btn {
  width: 225px;
  height: 50px;
  border-radius: 5px;
  font-size: 22px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.sard-bottom-btn--list {
  background: #ffffff;
  color: #4779ae;
  border: 1px solid #b4b4b4;
}

.sard-bottom-btn--save {
  background: #4779ae;
  color: #ffffff;
  border: none;
}

.sard-br-mobile {
  display: none;
}


/* ============================================================
   영수증 관리 상세 - 반응형 (≤ 1660px) — 모바일
============================================================ */
@media (max-width: 1660px) {
  .sard-main {
    padding: 0 20px 30px;
  }

  .sard-page-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 48px 0 48px;
  }

  .sard-detail-card {
    padding: 58px 16px 58px;
    border-radius: 0;
  }

  .sard-section {
    margin-bottom: 55px;
  }

  .sard-section-header {
    font-size: 18px;
  }

  /* ── 정보 그리드 2열 전환 ──── */
  .sard-info-row {
    grid-template-columns: 119px 1fr;
    column-gap: 4px;
    row-gap: 4px;
  }

  .sard-info-row + .sard-info-row {
    margin-top: 4px;
  }

  .sard-info-row--wide .sard-info-value {
    grid-column: auto;
  }

  .sard-info-row--memo {
    grid-template-columns: 119px 1fr;
  }

  /* ── 라벨 모바일 ──── */
  .sard-info-label {
    font-size: 15px;
    height: auto;
    min-height: 44px;
    padding: 8px 15px;
    white-space: normal;
    line-height: 1.2;
    justify-content: flex-end;
    text-align: right;
  }

  .sard-info-label--memo {
    height: 119px;
    min-height: 119px;
  }

  /* ── 값 셀 모바일 ──── */
  .sard-info-value {
    font-size: 15px;
    height: auto;
    min-height: 44px;
    padding: 8px 10px 8px 24px;
  }

  .sard-info-value--memo {
    height: 119px;
    min-height: 119px;
    padding: 8px 24px;
  }

  /* 2줄 라벨/값 min-height 65px (grid stretch로 쌍 셀 자동 맞춤) */
  .sard-info-label:has(br.sard-br-mobile),
  .sard-info-value:has(br.sard-br-mobile) {
    min-height: 65px;
  }

  /* 관리정보 값 — 모바일 color + padding */
  .sard-section--manage .sard-info-value {
    color: #303030;
    padding-left: 27px;
    padding-right: 0;
  }

  .sard-section--manage .sard-section-body {
    margin-top: 3px;
  }

  .sard-section--manage .sard-info-row--memo + .sard-info-row {
    margin-top: 4px;
  }

  /* 모바일 줄바꿈 표시 */
  .sard-br-mobile {
    display: inline;
  }

  /* ── 문서관리 모바일 ──── */
  .sard-section--doc .sard-section-header {
    height: 44px;
    font-size: 18px;
  }

  .sard-info-row--doc .sard-info-label,
  .sard-info-row--doc .sard-info-value {
    min-height: 202px;
  }

  .sard-info-value--doc-actions {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 32px 0;
  }

  .sard-doc-btn {
    width: 125px;
    height: 30px;
    font-size: 14px;
  }

  /* PDF확인하기 — 모바일 border 1px → 2px */
  .sard-doc-btn--view {
    border: 2px solid #d46351;
  }

  /* ── 로그 섹션 모바일 ──── */
  .sard-section--log {
    position: relative;
    padding-top: 36px;
  }

  .sard-section-header--log {
    position: static;
  }

  .sard-log-btn {
    position: absolute;
    right: 0;
    top: 0;
    transform: none;
    width: 90px;
    height: 30px;
    font-size: 14px;
  }

  .sard-log-body {
    margin-top: 4px;
  }

  .sard-log-row {
    grid-template-columns: 1fr 1fr;
    column-gap: 3px;
    row-gap: 3px;
  }

  .sard-log-row + .sard-log-row {
    margin-top: 6px;
  }

  .sard-log-cell {
    font-size: 15px;
  }

  /* ── 재발급 사유 모바일 ──── */
  .sard-reissue-body {
    padding: 0;
    margin-top: 3px;
  }

  .sard-reissue-actions {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    gap: 15px;
    padding: 0 0 15px;
    min-height: 264px;
  }

  .sard-reissue-input {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: auto;
    padding: 8px 2px;
    font-size: 15px;
    text-align: left;
    vertical-align: top;
    align-self: stretch;
  }


  .sard-reissue-btn {
    grid-column: 1;
    grid-row: 2;
    width: 170px;
    height: 48px;
    font-size: 17px;
    justify-self: center;
  }

  /* ── 하단 버튼 모바일 (2열 grid) ──── */
  .sard-bottom-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 35px;
  }

  .sard-bottom-btn {
    font-size: 17px;
    height: 50px;
    width: auto;
    border-radius: 4px;
  }
}


/* ============================================================
   영수증 관리 상세 - 반응형 (≤ 1200px)
============================================================ */
@media (max-width: 1200px) {
  .sard-main {
    padding: 0 0 30px;
  }
}


/* ============================================================
   영수증 PDF 모달 (판매자용) - rcs-
============================================================ */

/* ── 오버레이 (배경 어둡게) ──── */
.rcs-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(39, 39, 41, 0.8);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 265px 0 40px;
}

/* ── 모달 박스 ──── */
.rcs-modal {
  position: relative;
  width: 1200px;
  min-height: 1100px;
  background: #ffffff;
  border-radius: 15px;
  padding: 29px 32px 32px;
}

/* ── 닫기 버튼 (우상단) ──── */
.rcs-modal-close {
  position: absolute;
  right: 35px;
  top: 29px;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rcs-modal-close-icon {
  width: 24px;
  height: 24px;
  display: block;
}

/* ── 성공 아이콘 (체크) ──── */
.rcs-success-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  background: rgba(71, 121, 174, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rcs-success-icon-inner {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 총 결제 금액 헤더 ──── */
.rcs-total-wrap {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.rcs-total-label {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #4779ae;
  line-height: 28px;
  text-align: center;
}

.rcs-total-amount {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 800;
  font-size: 32px;
  color: #121212;
  line-height: 40px;
  text-align: center;
  white-space: nowrap;
}

/* ── 영수증 상세 카드 ──── */
.rcs-receipt-card {
  width: 896px;
  margin: 35px auto 0;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 24px 0 rgba(170, 170, 170, 0.12);
  padding: 8px 8px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  overflow: hidden;
}

.rcs-receipt-card-header {
  width: 100%;
  background: #f5f6f7;
  border-radius: 12px;
  padding: 18px 0;
  font-family: 'Poppins', 'Nanum Gothic', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #121212;
  line-height: 24px;
  text-align: center;
}

/* ── 영수증 상세 Details Row ──── */
.rcs-details-row {
  width: 512px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rcs-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
}

.rcs-detail-label {
  flex: 1;
  min-width: 0;
  color: #707070;
}

.rcs-detail-value {
  flex-shrink: 0;
  color: #303030;
  text-align: right;
  white-space: nowrap;
}

/* ── 구분선 (점선) ──── */
.rcs-divider {
  width: 480px;
  height: 0;
  border-top: 1px dashed #dedede;
}

/* ── 메타정보 + 안내문구 (좌/우 2-col) ──── */
.rcs-meta-wrap {
  margin-top: 39px;
  display: grid;
  grid-template-columns: 362px 297px;
  gap: 87px;
  justify-content: center;
  align-items: start;
}

.rcs-meta-details {
  width: 362px;
  padding: 3px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 18px;
}

.rcs-meta-details .rcs-detail-label {
  color: #707070;
  font-size: 15px;
}

.rcs-meta-details .rcs-detail-value {
  color: #303030;
  font-size: 15px;
}

/* ── 안내 문구 ──── */
.rcs-notes {
  width: 297px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rcs-note {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #707070;
  line-height: 20px;
}

/* ── 구매자(buyer) 전용 메타영역 오버라이드 ──── */
.rcs-meta-wrap--buyer {
  gap: 54px;
}

.rcs-meta-wrap--buyer .rcs-meta-details {
  padding: 0 16px;
}

.rcs-meta-wrap--buyer .rcs-notes {
  padding-top: 13px;
}

.rcs-meta-wrap--buyer .rcs-note {
  line-height: 22px;
}

/* ── PDF 다운로드 버튼 ──── */
.rcs-pdf-btn-wrap {
  margin-top: 44px;
  display: flex;
  justify-content: center;
}

.rcs-pdf-btn {
  width: 250px;
  height: 50px;
  background: #ffffff;
  border: 2px solid #dedede;
  border-radius: 100px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  font-family: 'Poppins', 'Nanum Gothic', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #3d3d3d;
  line-height: 24px;
  white-space: nowrap;
}

.rcs-pdf-btn-icon {
  width: 24px;
  height: 24px;
}


/* ============================================================
   영수증 PDF 모달 (판매자용) - 반응형 (≤ 1200px)
============================================================ */
@media (max-width: 1200px) {
  .rcs-modal-overlay {
    padding: 172px 15px 40px;
    align-items: flex-start;
  }

  .rcs-modal {
    width: 100%;
    max-width: 346px;
    min-height: 1275px;
    padding: 29px 6px 0;
    border-radius: 15px;
  }

  .rcs-modal-close {
    right: 24px;
    top: 23px;
    width: 20px;
    height: 20px;
  }

  .rcs-modal-close-icon {
    width: 20px;
    height: 20px;
  }

  .rcs-success-icon {
    width: 72px;
    height: 72px;
  }

  .rcs-total-wrap {
    margin-top: 24px;
    gap: 5px;
  }

  .rcs-total-label {
    font-size: 18px;
    line-height: 28px;
  }

  .rcs-total-amount {
    font-size: 28px;
    line-height: 40px;
  }

  /* 카드 */
  .rcs-receipt-card {
    width: 333px;
    margin: 30px auto 0;
    padding: 8px 2px 24px;
    gap: 18px;
  }

  .rcs-receipt-card-header {
    max-width: 317px;
    font-size: 16px;
    padding: 18px 0;
    border-radius: 12px;
  }

  .rcs-details-row {
    width: 329px;
    padding: 0 16px;
    gap: 14px;
  }

  .rcs-detail-item {
    font-size: 13px;
    line-height: 18px;
    gap: 16px;
  }

  .rcs-divider {
    width: 297px;
  }

  /* 메타 영역: 모바일은 1열 세로 배치 */
  .rcs-meta-wrap {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
  }

  .rcs-meta-details {
    width: 100%;
    padding: 0 16px;
    font-size: 13px;
  }

  .rcs-meta-details .rcs-detail-label,
  .rcs-meta-details .rcs-detail-value {
    font-size: 13px;
  }

  .rcs-notes {
    width: 100%;
    padding: 0 16px;
    gap: 11px;
  }

  /* buyer 모바일 전용: 데스크톱 buyer 오버라이드 무효화 + 모바일 buyer 값 적용 */
  .rcs-meta-wrap--buyer .rcs-notes {
    gap: 14px;
    padding-top: 0;
  }

  .rcs-meta-wrap--buyer .rcs-note {
    line-height: 18px;
  }

  .rcs-note {
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    color: #707070;
    width: 297px;
  }

  /* PDF 버튼 — seller 모바일 기준 (margin-top 33, padding-bottom 21) */
  .rcs-pdf-btn-wrap {
    margin-top: 33px;
    padding-bottom: 21px;
  }

  /* buyer 모바일 전용 여백 (margin-top 41, padding-bottom 43) */
  .rcs-modal--buyer .rcs-pdf-btn-wrap {
    margin-top: 41px;
    padding-bottom: 43px;
  }

  /* buyer 모바일 모달 높이 (seller 1275px과 다르게 1113px로 오버라이드) */
  .rcs-modal--buyer {
    min-height: 1113px;
  }

  .rcs-pdf-btn {
    width: 250px;
    height: 48px;
    font-size: 18px;
  }

  /* ============================================================
     모바일에서 모든 close_black.png 닫기 아이콘 통일 크기 20×20
     (coreset_buy/create, wallet_*, email_*, receipt_seller/buyer)
  ============================================================ */
  img[src$="close_black.png"] {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ============================================================
   로그 관리 상세 (system_admin_log_detail.html, sald- prefix)
   데스크톱 사양: 카드 1472×983, 섹션 폭 1084, 행 높이 44, 4열 grid
============================================================ */
.sald-main {
  padding: 80px 60px 60px;
}

.sald-page-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 48px;
  color: #ffffff;
  margin: 0 0 17px;
  font-family: 'Nanum Gothic', sans-serif;
}

.sald-detail-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 80px 194px 81px;
}

/* ── 섹션 ──── */
.sald-section {
  margin-bottom: 60px;
}

.sald-section:last-of-type {
  margin-bottom: 0;
}

.sald-section-header {
  background: #3a3a3a;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sald-section-body {
  margin-top: 6px;
}

/* ── 정보 행 (기본: 4열 grid, label/value × 2쌍) ──── */
.sald-info-row {
  display: grid;
  grid-template-columns: 200px 1fr 200px 1fr;
  column-gap: 3px;
}

.sald-info-row + .sald-info-row {
  margin-top: 4px;
}

/* 값이 전체 폭 스팬 (label 1개 + value 3컬럼) — 2열 grid로 전환 */
.sald-info-row--wide {
  grid-template-columns: 200px 1fr;
}

/* ── 라벨 셀 ──── */
.sald-info-label {
  background: #f1f1f1;
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  height: 44px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* ── 값 셀 ──── */
.sald-info-value {
  background: #ffffff;
  color: #000000;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  height: 44px;
  padding: 0 39px;
  display: flex;
  align-items: center;
  border: 2px solid #f1f1f1;
}

/* 값 + 액션 버튼 (상세보기) — space-between 레이아웃 */
.sald-info-value--action {
  justify-content: space-between;
  padding-right: 5px;
}

/* 상세보기 버튼 (72×25, #303030 bg, 흰 텍스트) */
.sald-info-action {
  background: #303030;
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  width: 72px;
  height: 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 해시 행 (데스크톱: 2줄, h=65) */
.sald-info-row--hash .sald-info-label,
.sald-info-row--hash .sald-info-value {
  height: 65px;
}

.sald-info-value--hash {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 18px;
}

.sald-info-hash-line {
  display: block;
}

/* ── 하단 버튼 (카드 외부 중앙 정렬) ──── */
.sald-bottom-actions {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.sald-bottom-btn {
  width: 225px;
  height: 50px;
  border-radius: 5px;
  font-size: 22px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: transparent;
}

.sald-bottom-btn--list {
  background: #ffffff;
  color: #4779ae;
  border: 1px solid #b4b4b4;
}


/* ============================================================
   로그 관리 상세 - 반응형 (≤ 1660px) — 모바일
============================================================ */
@media (max-width: 1660px) {
  .sald-main {
    padding: 0 20px 30px;
  }

  .sald-page-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
    text-align: center;
    margin: 48px 0 48px;
  }

  .sald-detail-card {
    padding: 58px 16px 49px;
    border-radius: 0;
  }

  .sald-section {
    margin-bottom: 71px;
  }

  .sald-section-header {
    font-size: 18px;
  }

  /* 2열 grid 전환 (label 119px + value 1fr) */
  .sald-info-row {
    grid-template-columns: 119px 1fr;
    column-gap: 4px;
    row-gap: 4px;
  }

  .sald-info-row + .sald-info-row {
    margin-top: 4px;
  }

  .sald-info-row--wide {
    grid-template-columns: 119px 1fr;
  }

  /* ── 라벨 모바일 (우측 정렬, 15px) ──── */
  .sald-info-label {
    font-size: 15px;
    height: auto;
    min-height: 44px;
    padding: 8px 15px;
    white-space: normal;
    line-height: 1.2;
    justify-content: flex-end;
    text-align: right;
  }

  /* ── 값 셀 모바일 (좌측 정렬, 15px, 패딩 24) ──── */
  .sald-info-value {
    font-size: 15px;
    height: auto;
    min-height: 44px;
    padding: 8px 10px 8px 24px;
  }

  /* 모바일: 상세보기 버튼 숨김, 값 좌측 정렬 */
  .sald-info-value--action {
    justify-content: flex-start;
    padding: 8px 10px 8px 24px;
  }

  .sald-info-action {
    display: none;
  }

  /* 관련작업 행 (모바일 h=65, 2줄 텍스트) */
  .sald-info-row--related .sald-info-label,
  .sald-info-row--related .sald-info-value {
    min-height: 65px;
  }

  /* 해시 행 (모바일 h=160, 워드브레이크) */
  .sald-info-row--hash .sald-info-label {
    min-height: 160px;
    height: auto;
  }

  .sald-info-row--hash .sald-info-value {
    min-height: 160px;
    height: auto;
    word-break: break-all;
  }

  .sald-info-value--hash {
    padding: 17px 10px 17px 24px;
    gap: 18px;
  }

  .sald-info-hash-line {
    word-break: break-all;
  }

  /* 하단 버튼 (모바일: 165×50, #4779ae border) */
  .sald-bottom-actions {
    margin-top: 40px;
  }

  .sald-bottom-btn {
    width: 165px;
    height: 50px;
    font-size: 17px;
    line-height: 24px;
    border-radius: 4px;
  }

  .sald-bottom-btn--list {
    border: 1px solid #4779ae;
  }
}


/* ============================================================
   로그 관리 상세 - 반응형 (≤ 1200px, 좁은 폰 화면: 카드 edge-to-edge)
============================================================ */
@media (max-width: 1200px) {
  .sald-main {
    padding: 0 0 30px;
  }
}

/* ============================================================
   나의 NFT v2 (mypage_nft_v2.html) — nftv2- 접두사 독립 CSS
   피그마: 448:729 (데스크톱 1920) / 448:1232 (모바일 375)
============================================================ */

/* 섹션 래퍼 */
.nftv2-cards-section {
  margin-bottom: 0;
}

.nftv2-content-section {
  display: block;
}

/* 페이지 제목 */
.nftv2-page-title {
  font-size: 34px;
  font-weight: 700;
  color: var(--dao-white);
  margin-bottom: 24px;
  margin-top: 0;
  padding: 0;
  line-height: 1.2;
}

/* 카드 3개 그리드 */
.nftv2-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* 상단 분석 카드 (5/4/1 통계) */
.nftv2-status-box {
  display: flex;
  align-items: center;
  background-color: var(--dao-card-bg);
  padding: 38px 20px 39px 25px;
  border-radius: 10px;
  min-height: 147px;
}

.nftv2-card-icon {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3.5px 5.5px rgba(0, 0, 0, 0.02);
}

.nftv2-card-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.nftv2-status-text {
  flex: 1;
  min-width: 0;
  font-size: 20px;
  font-weight: bold;
  color: var(--dao-white);
  padding-left: 18px;
  line-height: 36px;
  text-align: left;
}

.nftv2-label-mobile {
  display: none;
}

.nftv2-status-amount {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.nftv2-status-value {
  font-size: 32px;
  font-weight: bold;
  color: var(--dao-white);
  padding-right: 5px;
}

.nftv2-status-unit {
  font-size: 24px;
  font-weight: bold;
  color: var(--dao-white);
}

/* 설명 텍스트 */
.nftv2-description {
  padding-top: 23px;
  padding-bottom: 63px;
  font-size: 16px;
  color: var(--dao-light);
  font-weight: 400;
  text-align: end;
}

/* 테이블 박스 */
.nftv2-table-box {
  background: var(--dao-white);
  border-radius: 10px;
  padding-top: 25px;
  padding-bottom: 25px;
}

.nftv2-table-nft-image {
  width: 45px;
  height: 45px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3.5px 5.5px rgba(0, 0, 0, 0.02);
}

.nftv2-table-nft-image img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

/* 상세보기 버튼 */
.nftv2-table-detail-btn {
  width: 78px;
  height: 20px;
  color: var(--dao-white);
  align-items: center;
  justify-content: center;
  display: flex;
  background-color: #9D9D9D;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  margin: 0 auto;
}

/* NFT 이름 + 번호 */
.nftv2-name-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.nftv2-name {
  display: inline-block;
}

.nftv2-name-main {
  font-weight: 700;
}

.nftv2-name-num {
  font-weight: 400;
}

.nftv2-br-mobile {
  display: none;
}

.nftv2-time-desktop {
  display: inline;
}

/* 필터바 */
.nftv2-filter-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 0 29px;
}

.nftv2-filter-group-select {
  display: flex;
  align-items: center;
  gap: 7px;
}

.nftv2-filter-group-dates {
  display: flex;
  align-items: center;
  gap: 9px;
}

.nftv2-filter-label {
  font-size: 18px;
  font-weight: 700;
  color: #303030;
  margin: 0;
  white-space: nowrap;
}

.nftv2-filter-select {
  width: 107px;
  height: 40px;
  font-size: 16px;
  color: rgba(48, 48, 48, 0.7);
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  flex-shrink: 0;
}

.nftv2-date-wrap {
  display: flex;
  align-items: center;
  width: 159px;
  height: 40px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: white;
  padding: 0 12px;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  flex-shrink: 0;
}

.nftv2-date-cal-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nftv2-filter-date {
  border: none;
  outline: none;
  width: 100%;
  min-width: 0;
  font-size: 16px;
  color: rgba(48, 48, 48, 0.7);
  background: transparent;
  padding: 0;
  font-family: inherit;
}

.nftv2-search-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  flex-shrink: 0;
}

.nftv2-search-btn img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* 테이블 */
.nftv2-table {
  margin-bottom: 0;
  border-collapse: collapse;
  width: 100%;
}

.nftv2-table thead tr {
  background: #505364;
  border: none;
}

.nftv2-table thead th {
  background: #505364;
  color: var(--dao-white);
  font-size: 17px;
  font-weight: 700;
  padding: 12px 10px;
  border: none;
  text-align: center;
  line-height: 1.2;
  width: 20%;
}

.nftv2-table-item {
  width: 20% !important;
  align-items: center;
  justify-content: center;
}

.nftv2-th-category,
.nftv2-th-amount,
.nftv2-th-reason,
.nftv2-th-datetime,
.nftv2-th-detail {
  text-align: center !important;
}

.nftv2-table tbody tr {
  height: 65px;
}

.nftv2-table tbody tr:last-child {
  border-bottom: none;
}

.nftv2-table.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: transparent;
  background-color: transparent;
}

.nftv2-table.table-striped > tbody > tr:nth-of-type(even) > * {
  --bs-table-bg-type: rgba(0, 0, 0, 0.04);
  background-color: rgba(0, 0, 0, 0.04);
}

.nftv2-table tbody td {
  padding: 12px 10px;
  font-size: 16px;
  color: #303030;
  border: none;
  text-align: center;
  vertical-align: middle;
  width: 20%;
}

.nftv2-td-category,
.nftv2-td-amount,
.nftv2-td-reason,
.nftv2-td-datetime,
.nftv2-td-detail {
  text-align: center !important;
}

.nftv2-td-category {
  font-weight: 400;
}

/* 페이지네이션 */
.nftv2-pagination {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 0;
  padding: 20px;
  border-top: 1px solid #e8e8e8;
  justify-content: center;
}

.nftv2-page-selector {
  width: 72px;
  height: 44px;
}

.nftv2-page-selector select {
  width: 100%;
  height: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  font-size: 14px;
  color: #344055;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.nftv2-pag-controls {
  display: flex;
  gap: 18px;
  align-items: center;
}

.nftv2-pag-btn {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.nftv2-pag-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.nftv2-pag-btn:hover img {
  opacity: 1;
}

/* ============================================================
   나의 NFT v2 — 모바일 반응형 (≤1200 주요 전환점)
============================================================ */
/* ============================================================
   나의 NFT v2 — 카드 섹션만 ≤1400px부터 모바일 스타일 적용
   (테이블/필터/페이지네이션은 아래 @1200 블록에서 처리)
============================================================ */
@media (max-width: 1400px) {
  /* 카드 섹션 패딩: 10px 인셋 */
  .nftv2-cards-section {
    padding: 0 10px;
  }

  .nftv2-page-title {
    font-size: 20px;
    margin-bottom: 16px;
    text-align: center;
  }

  /* 카드 세로 스택 */
  .nftv2-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .nftv2-status-box {
    padding: 18px 21px 17px 17px;
    min-height: 85px;
  }

  .nftv2-card-icon {
    width: 50px;
    height: 50px;
  }

  .nftv2-card-icon img {
    width: 32px;
    height: 32px;
  }

  .nftv2-status-text {
    font-size: 14px;
    padding-left: 13px;
    line-height: 36px;
  }

  .nftv2-label-desktop {
    display: none;
  }

  .nftv2-label-mobile {
    display: inline;
  }

  .nftv2-status-value {
    font-size: 26px;
    padding-right: 12px;
  }

  .nftv2-status-unit {
    font-size: 13px;
  }
}

@media (max-width: 1200px) {
  .nftv2-content-section {
    padding: 0;
  }

  .nftv2-description {
    text-align: center;
    font-size: 12px;
    padding-top: 12px;
    padding-bottom: 41px;
  }

  .nftv2-table-box {
    border-radius: 0;
    padding: 15px 0 0 0;
    margin-left: 0;
    margin-right: 0;
  }

  .nftv2-filter-bar {
    flex-wrap: nowrap;
    gap: 4px;
    padding: 0 11px;
    margin-bottom: 12px;
    justify-content: center;
  }

  .nftv2-filter-label {
    display: none;
  }

  .nftv2-filter-select {
    height: 29px;
    font-size: 11px;
    padding: 0 10px;
    width: 77px;
    border-radius: 3px;
  }

  .nftv2-filter-group-dates {
    gap: 4px;
  }

  .nftv2-filter-group-select {
    gap: 0;
  }

  .nftv2-date-wrap {
    height: 29px;
    padding: 0 12px;
    width: 114px;
    border-radius: 3px;
  }

  .nftv2-date-cal-icon {
    width: 16px;
    height: 16px;
  }

  .nftv2-filter-date {
    font-size: 11px;
  }

  .nftv2-search-btn {
    width: 29px;
    height: 29px;
    min-width: 29px;
  }

  .nftv2-search-btn img {
    width: 15px;
    height: 15px;
  }

  .nftv2-table-item {
    width: auto !important;
    white-space: nowrap;
  }

  .nftv2-table thead th {
    font-size: 14px;
    padding: 8px 6px;
  }

  .nftv2-table tbody tr {
    height: 29px;
  }

  .nftv2-table tbody td {
    padding: 4px 6px;
    font-size: 11px;
  }

  .nftv2-table-nft-image {
    display: none;
  }

  .nftv2-br-mobile {
    display: inline;
  }

  .nftv2-time-desktop {
    display: none;
  }

  .nftv2-name {
    display: inline-block;
    text-align: center;
    line-height: 14px;
  }

  .nftv2-name-main {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: -0.33px;
    line-height: 14px;
  }

  .nftv2-name-num {
    font-size: 9px;
    line-height: 14px;
  }

  .nftv2-name-wrap {
    gap: 0;
  }

  .nftv2-table .nftv2-table-detail-btn {
    width: 52px;
    height: 22px;
    font-size: 11px;
    line-height: 20px;
  }

  .nftv2-pagination {
    gap: 12px;
    padding: 12px;
  }

  .nftv2-page-selector {
    width: 54px;
    height: 28px;
  }

  .nftv2-page-selector select {
    font-size: 11px;
    padding: 4px 8px;
  }

  .nftv2-pag-controls {
    gap: 14px;
  }

  .nftv2-pag-btn {
    width: 26px;
    height: 26px;
  }
}


/* ============================================================
   나의 옵션 v2 (mypage_option_v2.html) — opt2- 접두사 독립 CSS
   피그마: 448:1436 (데스크톱 1920) / 448:1740 (모바일 375)
   Bootstrap 미사용, 독립 CSS Grid/Flexbox
============================================================ */

/* 메인 컨테이너 오버라이드 (데스크톱: 헤더 아래 64, 좌 72, 우 95, 하 80) */
.opt2-main {
  padding: 64px 95px 80px 72px;
}

/* 페이지 제목 */
.opt2-title {
  font-size: 34px;
  font-weight: 700;
  color: var(--dao-white);
  margin: 0 0 24px 0;
  padding: 0;
  line-height: 1.2;
  font-family: 'Nanum Gothic', sans-serif;
}

/* ---------- 카드 ---------- */
.opt2-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.opt2-card {
  display: flex;
  align-items: center;
  background: #505364;
  border-radius: 10px;
  padding: 38px 20px 39px 25px;
  min-height: 147px;
  box-sizing: border-box;
}

.opt2-card-icon {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3.5px 5.5px rgba(0, 0, 0, 0.02);
}

.opt2-card-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.opt2-card-label {
  flex: 1;
  min-width: 0;
  padding-left: 18px;
  font-size: 20px;
  font-weight: 700;
  color: var(--dao-white);
  line-height: 1.3;
  font-family: 'Nanum Gothic', sans-serif;
}

.opt2-card-amount {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
}

.opt2-card-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--dao-white);
  line-height: 1;
  white-space: nowrap;
  font-family: 'Nanum Gothic', sans-serif;
}

.opt2-card-unit {
  font-size: 24px;
  font-weight: 700;
  color: var(--dao-light);
  line-height: 1;
  font-family: 'Nanum Gothic', sans-serif;
}

/* ---------- 안내 문구 ---------- */
.opt2-notice {
  margin: 23px 0 63px;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--dao-white);
  text-align: right;
  line-height: 1.4;
  font-family: 'Nanum Gothic', sans-serif;
}

/* ---------- 테이블 컨테이너 ---------- */
.opt2-table-wrap {
  background: var(--dao-white);
  border-radius: 10px;
  overflow: hidden;
}

/* ---------- 필터 바 ---------- */
.opt2-filter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 25px 25px 23px;
}

.opt2-filter-label {
  font-size: 18px;
  font-weight: 700;
  color: #303030;
  margin-right: 6px;
  white-space: nowrap;
  font-family: 'Nanum Gothic', sans-serif;
}

.opt2-filter-select {
  width: 107px;
  height: 40px;
  padding: 0 36px 0 12px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%23303030'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  font-size: 14px;
  color: rgba(48, 48, 48, 0.7);
  font-family: 'Nanum Gothic', sans-serif;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  cursor: pointer;
}

.opt2-date-group {
  display: flex;
  align-items: center;
  gap: 9px;
}

.opt2-date-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 159px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  box-sizing: border-box;
}

.opt2-date-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

.opt2-date-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: rgba(48, 48, 48, 0.7);
  padding: 0;
  font-family: 'Nanum Gothic', sans-serif;
}

.opt2-search-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.opt2-search-btn img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* ---------- 데스크톱 테이블 ---------- */
.opt2-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  table-layout: fixed;
}

.opt2-table--mob { display: none; }

.opt2-thead-row {
  background: #505364;
}

.opt2-th {
  background: #505364;
  color: var(--dao-white);
  font-size: 17px;
  font-weight: 700;
  padding: 18px 10px;
  text-align: center;
  line-height: 1.2;
  vertical-align: middle;
  white-space: nowrap;
  border: none;
  font-family: 'Nanum Gothic', sans-serif;
}

/* 컬럼 너비 (피그마 텍스트 센터 midpoint 기반) */
.opt2-col-type       { width: 16%; }
.opt2-col-governance { width: 14%; }
.opt2-col-score      { width: 14%; }
.opt2-col-method     { width: 14%; }
.opt2-col-status     { width: 13%; }
.opt2-col-date       { width: 13%; }
.opt2-col-detail     { width: 16%; }

.opt2-td {
  font-size: 16px;
  font-weight: 400;
  color: #303030;
  padding: 15px 10px;
  text-align: center;
  vertical-align: middle;
  border: none;
  line-height: 1.25;
  height: 53px;
  box-sizing: border-box;
  font-family: 'Nanum Gothic', sans-serif;
}

/* 짝수 행 줄무늬 (피그마 2,4,6,8 행 striped) */
.opt2-table--desk tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.05);
}

/* ---------- 상세보기 버튼 ---------- */
.opt2-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 20px;
  background: #9d9d9d;
  color: var(--dao-white);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  font-family: 'Nanum Gothic', sans-serif;
}

/* ---------- 페이지네이션 ---------- */
.opt2-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  border-top: 1px solid #e8e8e8;
  background: #fff;
}

.opt2-page-select {
  width: 72px;
  height: 44px;
  padding: 0 28px 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  color: #344055;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%23344055'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  font-family: 'Nanum Gothic', sans-serif;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  cursor: pointer;
}

.opt2-pag-ctrls {
  display: flex;
  align-items: center;
  gap: 18px;
}

.opt2-pag-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.opt2-pag-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.opt2-pag-btn:hover img {
  opacity: 1;
}


/* ============================================================
   나의 옵션 v2 — 반응형 (≤1600px: 카드만 세로 스택)
============================================================ */
@media (max-width: 1600px) {
  .opt2-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .opt2-card {
    min-height: 85px;
    padding: 17px 21px 18px 17px;
  }

  .opt2-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
  }

  .opt2-card-icon img {
    width: 30px;
    height: 30px;
  }

  .opt2-card-label {
    padding-left: 13px;
    font-size: 20px;
  }

  .opt2-card-value {
    font-size: 30px;
  }

  .opt2-card-unit {
    font-size: 14px;
  }
}

/* ============================================================
   나의 옵션 v2 — 반응형 (≤1400px: 중간 여백 축소)
============================================================ */
@media (max-width: 1400px) {
  .opt2-main {
    padding: 56px 48px 80px 48px;
  }
}

/* ============================================================
   나의 옵션 v2 — 모바일 (≤1200px)
============================================================ */
@media (max-width: 1200px) {
  .opt2-main {
    padding: 28px 0 49px;
  }

  /* 제목 */
  .opt2-title {
    font-size: 20px;
    margin: 0 0 27px;
    text-align: center;
  }

  /* 카드 세로 스택 */
  .opt2-cards {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 10px;
  }

  .opt2-card {
    min-height: 85px;
    padding: 17px 21px 18px 17px;
  }

  .opt2-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
  }

  .opt2-card-icon img {
    width: 30px;
    height: 30px;
  }

  .opt2-card-label {
    padding-left: 13px;
    font-size: 20px;
  }

  .opt2-card-value {
    font-size: 30px;
  }

  .opt2-card-unit {
    font-size: 14px;
  }

  /* 안내 문구 */
  .opt2-notice {
    margin: 12px 35px 41px;
    font-size: 14px;
    text-align: left;
    line-height: 1.4;
  }

  /* 테이블 박스 edge-to-edge */
  .opt2-table-wrap {
    border-radius: 0;
  }

  /* 필터 바 모바일 */
  .opt2-filter {
    justify-content: center;
    gap: 5px;
    padding: 15px 13px 20px;
    flex-wrap: nowrap;
  }

  .opt2-filter-label {
    display: none;
  }

  .opt2-filter-select {
    width: 77px;
    height: 29px;
    font-size: 11px;
    padding: 0 22px 0 8px;
    border-radius: 3px;
    background-position: right 6px center;
    background-size: 10px 10px;
  }

  .opt2-date-group {
    gap: 4px;
  }

  .opt2-date-wrap {
    width: 114px;
    height: 29px;
    padding: 0 8px;
    gap: 4px;
    border-radius: 3px;
  }

  .opt2-date-icon {
    width: 16px;
    height: 16px;
  }

  .opt2-date-input {
    font-size: 11px;
  }

  .opt2-search-btn {
    width: 29px;
    height: 29px;
  }

  .opt2-search-btn img {
    width: 15px;
    height: 15px;
  }

  /* 테이블 전환 */
  .opt2-table--desk { display: none; }
  .opt2-table--mob {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* 모바일 헤더 행 1 (밝은 회색) */
  .opt2-mhead-row1 th {
    background: #6e7080;
    color: var(--dao-white);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 4px;
    text-align: center;
    white-space: nowrap;
    border: none;
    border-bottom: 3px solid var(--dao-white);
    font-family: 'Nanum Gothic', sans-serif;
  }

  /* 모바일 헤더 행 2 (진한 색) */
  .opt2-mhead-row2 th {
    background: #505364;
    color: var(--dao-white);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 4px;
    text-align: center;
    white-space: nowrap;
    border: none;
    font-family: 'Nanum Gothic', sans-serif;
  }

  /* 모바일 데이터 공통 */
  .opt2-table--mob tbody td {
    font-size: 11px;
    font-weight: 400;
    color: #303030;
    padding: 5px 4px;
    text-align: center;
    border: none;
    white-space: nowrap;
    vertical-align: middle;
    font-family: 'Nanum Gothic', sans-serif;
  }

  /* 상단 행 (row--a): 아래 padding 축소 */
  .opt2-mrow--a td {
    padding-top: 8px;
    padding-bottom: 2px;
  }

  /* 하단 행 (row--b): 위 padding 축소 */
  .opt2-mrow--b td {
    padding-top: 2px;
    padding-bottom: 8px;
  }

  /* 짝수 아이템(3,4번째, 7,8번째 tr) 줄무늬 */
  .opt2-table--mob tbody tr:nth-child(4n+3) td,
  .opt2-table--mob tbody tr:nth-child(4n+4) td {
    background: #f2f2f2;
  }

  /* 모바일 상세보기 버튼 */
  .opt2-table--mob .opt2-detail-btn {
    width: 52px;
    height: 22px;
    font-size: 11px;
  }

  /* 페이지네이션 모바일 */
  .opt2-pagination {
    gap: 12px;
    padding: 12px;
  }

  .opt2-page-select {
    width: 54px;
    height: 28px;
    padding: 0 18px 0 6px;
    font-size: 12px;
    border-radius: 4px;
    background-position: right 4px center;
    background-size: 10px 10px;
  }

  .opt2-pag-ctrls {
    gap: 12px;
  }

  .opt2-pag-btn {
    width: 28px;
    height: 28px;
  }
}

/* ============================================================
   login_toolbar — 로그인 toolbar 드롭다운 (lt-*)
   ============================================================ */

/* 오버레이 (헤더 아래 전체 영역 dim) */
.lt-overlay {
  position: fixed;
  top: var(--dao-header-h); /* 88px */
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(39, 39, 41, 0.8);
  z-index: 1000;
  pointer-events: none;
}

/* 사용자 드롭다운 팝업 카드 */
.lt-popup {
  position: fixed;
  top: 88px;
  right: 45px;
  width: 382px;
  height: 200px;
  background: #ffffff;
  border: 1px solid #f1f1f1;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  z-index: 1100;
}

/* 상단 프로필/지갑 정보 영역 (150px) */
.lt-popup-top {
  position: relative;
  height: 150px;
}

/* 좌측 열 — 아바타 + 닉네임 */
.lt-avatar-col {
  position: absolute;
  left: 54px;
  top: 28px;
  width: 78px;
}

.lt-avatar {
  display: block;
  margin: 0 auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #f1f1f1;
}

.lt-nickname {
  margin-top: 4px;
  text-align: center;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #171a1f;
}

/* 우측 열 — 라벨 + 지갑주소 */
.lt-user-info {
  position: absolute;
  left: 179px;
  top: 36px;
}

.lt-wallet-label {
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  color: #171a1f;
  white-space: nowrap;
}

.lt-wallet-address {
  margin-top: 12px;
  margin-left: 8px;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #171a1f;
  white-space: nowrap;
}

/* 하단 액션 버튼 영역 (50px) */
.lt-popup-actions {
  display: flex;
  height: 50px;
}

.lt-btn {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  color: #ffffff;
  text-decoration: none;
  transition: background 0.15s ease;
}

.lt-btn--mypage {
  background: #b7cd47;
}

.lt-btn--mypage:hover {
  background: #a3b83f;
  color: #ffffff;
}

.lt-btn--logout {
  background: #505050;
}

.lt-btn--logout:hover {
  background: #3a3a3a;
  color: #ffffff;
}

/* ── 반응형: 1200px 이하 (모바일에서는 오버레이/팝업 미사용) ── */
@media (max-width: 1200px) {
  .lt-overlay,
  .lt-popup {
    display: none;
  }
}

/* ============================================================
   chair_agree_modal — 의장 승인 모달 (cam-*)
   ============================================================ */

/* 오버레이: 전체 화면 dim + 중앙 정렬 */
.cam-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

/* 모달 카드: 너비 350, 높이는 콘텐츠에 맞게 늘어남 */
.cam-modal {
  position: relative;
  width: 350px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
  max-height: calc(100vh - 32px);
}

/* 상단 회색 헤더 영역 */
.cam-logo-area {
  position: relative;
  width: 100%;
  height: 123px;
  background: #f4f4f4;
  flex-shrink: 0;
}

.cam-logo {
  position: absolute;
  top: 47px;
  left: 83px;
  width: 184px;
  height: 46px;
  object-fit: contain;
}

/* Close 버튼: 우상단 */
.cam-close {
  position: absolute;
  top: 20px;
  right: 14px;
  width: 14px;
  height: 14px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
}

.cam-close img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 제목: "의장 승인" */
.cam-title {
  margin: 41px 0 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: -0.22px;
  color: #333333;
  text-align: center;
  flex-shrink: 0;
}

/* Q 리스트 */
.cam-q-list {
  margin: 39px 28px 0 88px;
  padding: 0;
  list-style: none;
  flex-shrink: 0;
}

.cam-q-item {
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #757575;
}

.cam-q-item + .cam-q-item {
  margin-top: 6px;
}

/* 설명 (2줄, 2번째 줄 빨강 강조) */
.cam-desc {
  margin: 38px 0 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #757575;
  text-align: center;
  flex-shrink: 0;
}

.cam-desc-warn {
  color: #da0f0f;
}

/* 하단 버튼 영역 */
.cam-btn-row {
  margin: 23px 28px 0;
  display: flex;
  gap: 6px;
  height: 40px;
  flex-shrink: 0;
}

.cam-btn {
  height: 40px;
  border: none;
  border-radius: 5px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  line-height: 18px;
  cursor: pointer;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.cam-btn--cancel {
  width: 99px;
  background: #e4e4e4;
  color: #757575;
  font-size: 14px;
}

.cam-btn--cancel:hover {
  background: #d5d5d5;
}

.cam-btn--approve {
  flex: 1;
  background: #afce35;
  color: #ffffff;
  font-size: 16px;
}

.cam-btn--approve:hover {
  background: #9cb92f;
}

/* ── 반응형: 모달 세로 너비가 부족한 소형 모바일에서도 유지 ── */
@media (max-width: 380px) {
  .cam-overlay {
    padding: 8px;
  }
  .cam-modal {
    width: 100%;
    max-width: 350px;
  }
}


/* ============================================================
   지인초대 링크 모달 (inv-) — invitation_modal.html
============================================================ */

/* ── 오버레이 ──────────────────────────────────────────────── */
.inv-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* ── 모달 — 350×450, 상단 rounded 코너로 베이지 클립 ───────── */
.inv-modal {
  position: relative;
  width: 350px;
  height: 450px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  font-family: 'Nanum Gothic', sans-serif;
  box-sizing: border-box;
}

/* ── 닫기 버튼 (우측 상단) ─────────────────────────────────── */
.inv-close {
  position: absolute;
  top: 19px;
  right: 21px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inv-close img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── 상단 헤더 (베이지 189h) ───────────────────────────────── */
.inv-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 189px;
  background: #e6dbc8;
}

/* ── 제목 — ExtraBold 26px #303030 center y:82.5 ───────────── */
.inv-title {
  position: absolute;
  top: 82.5px;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #303030;
  letter-spacing: -0.26px;
  line-height: 1.2;
  white-space: nowrap;
}

/* ── 설명 — Bold 16px leading 22 center y:154 (2줄) ────────── */
.inv-desc {
  position: absolute;
  top: 154px;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #303030;
  text-align: center;
  line-height: 22px;
  white-space: nowrap;
}

/* ── 본문 영역 (189 ~ 450, 흰색) ───────────────────────────── */
.inv-body {
  position: absolute;
  top: 189px;
  left: 0;
  right: 0;
  bottom: 0;
}

/* ── 링크 — Bold 16px leading 24 center (modal y:250)
   긴 URL은 모달 내부 폭 제한 + 단어 단위로 자동 줄바꿈 ──────── */
.inv-link {
  position: absolute;
  top: 61px;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 32px);
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #303030;
  text-align: center;
  line-height: 24px;
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* ── 안내문 — Regular 15px leading 20 (modal top y:297, 3줄) ── */
.inv-note {
  position: absolute;
  top: 108px;
  left: 33px;
  width: 284px;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  color: #303030;
  line-height: 20px;
}

.inv-note strong {
  font-weight: 700;
}

/* ── 복사 버튼 — 180×45 bg #e6dbc8 radius 5 ────────────────── */
.inv-copy-btn {
  position: absolute;
  top: 188px;
  left: 85px;
  width: 180px;
  height: 45px;
  background: #e6dbc8;
  border: 0;
  border-radius: 5px;
  padding: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #303030;
  line-height: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* ── 반응형 — 극소형 모바일 (≤380px) ──────────────────────── */
@media (max-width: 380px) {
  .inv-overlay {
    padding: 8px;
  }
}

/* ============================================================
   receipt_email_modal — 영수증 이메일 전송 모달 (rem-*)
   ============================================================ */

/* 오버레이 */
.rem-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

/* 모달 카드: 350×350 */
.rem-modal {
  position: relative;
  width: 350px;
  height: 350px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Close 버튼 */
.rem-close {
  position: absolute;
  top: 22px;
  right: 23px;
  width: 14px;
  height: 14px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
}

.rem-close img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 제목 */
.rem-title {
  position: absolute;
  top: 46px;
  left: 0;
  right: 0;
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: -0.22px;
  color: #333333;
  text-align: center;
}

/* 이메일 아이콘 */
.rem-icon {
  position: absolute;
  top: 87px;
  left: 125px;
  width: 100px;
  height: 100px;
}

.rem-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 설명 (3줄 center) */
.rem-desc {
  position: absolute;
  top: 211px;
  left: 0;
  right: 0;
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #757575;
  text-align: center;
}

/* 하단 버튼 영역 */
.rem-btn-row {
  position: absolute;
  top: 290px;
  left: 48px;
  right: 47px;
  display: flex;
  gap: 10px;
  height: 40px;
}

.rem-btn {
  height: 40px;
  border: none;
  border-radius: 5px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  line-height: 18px;
  cursor: pointer;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.rem-btn--send {
  width: 146px;
  background: #b7cd47;
  color: #ffffff;
  font-size: 16px;
}

.rem-btn--send:hover {
  background: #a3b83f;
}

.rem-btn--cancel {
  width: 99px;
  background: #e4e4e4;
  color: #757575;
  font-size: 14px;
}

.rem-btn--cancel:hover {
  background: #d5d5d5;
}

/* ── 반응형 — 극소형 모바일 (≤380px) ──────────────────────── */
@media (max-width: 380px) {
  .rem-overlay {
    padding: 8px;
  }
  .rem-modal {
    width: 100%;
    max-width: 350px;
  }
}


/* ============================================================
   자동 로그아웃 안내 모달 (slm-) — session_logout_modal.html
============================================================ */

/* ── 오버레이 ──────────────────────────────────────────────── */
.slm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* ── 모달 — 350×350 white radius 16 shadow ────────────────── */
.slm-modal {
  position: relative;
  width: 350px;
  height: 350px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  font-family: 'Nanum Gothic', sans-serif;
  box-sizing: border-box;
}

/* ── 닫기 15×15 @ top:20 right:17 (350-318-15=17) ──────────── */
.slm-close {
  position: absolute;
  top: 20px;
  right: 17px;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slm-close img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── 제목 — ExtraBold 22px #333 letter-spacing -0.22px center y:58 ── */
.slm-title {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #333333;
  letter-spacing: -0.22px;
  line-height: 1.2;
  white-space: nowrap;
}

/* ── 상단 설명 — Bold 13px #757575 leading 20 center y:108 (2줄) ── */
.slm-desc-top {
  position: absolute;
  top: 108px;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 239px;
  font-size: 13px;
  font-weight: 700;
  color: #757575;
  text-align: center;
  line-height: 20px;
}

/* ── 일러스트 100×100 @ (118, 128) ─────────────────────────── */
.slm-icon {
  position: absolute;
  top: 128px;
  left: 118px;
  width: 100px;
  height: 100px;
}

.slm-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* ── 하단 설명 — Regular 12px #757575 leading 16 center y:259 (2줄) ── */
.slm-desc-bottom {
  position: absolute;
  top: 259px;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 239px;
  font-size: 12px;
  font-weight: 400;
  color: #757575;
  text-align: center;
  line-height: 16px;
}

/* ── 로그인 버튼 — 127×40 bg #afce35 radius 5 Bold 14 white ──── */
.slm-login-btn {
  position: absolute;
  top: 289px;
  left: 109px;
  width: 127px;
  height: 40px;
  background: #afce35;
  color: #ffffff;
  border: 0;
  border-radius: 5px;
  padding: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* ── 반응형 — 극소형 모바일 (≤380px) ──────────────────────── */
@media (max-width: 380px) {
  .slm-overlay {
    padding: 8px;
  }
}

/* ============================================================
   excel_upload_modal — 엑셀 업로드 모달 (eum-*)
   ============================================================ */

/* 오버레이 */
.eum-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

/* 모달 카드: 350×520 */
.eum-modal {
  position: relative;
  width: 350px;
  height: 520px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 상단 회색 헤더 영역 (0~100px) */
.eum-logo-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: #f4f4f4;
}

.eum-logo {
  position: absolute;
  top: 34px;
  left: 83px;
  width: 184px;
  height: 46px;
  object-fit: contain;
}

/* Close 버튼 */
.eum-close {
  position: absolute;
  top: 20px;
  right: 14px;
  width: 14px;
  height: 14px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
}

.eum-close img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* "파일 업로드" 라벨 */
.eum-upload-label {
  position: absolute;
  top: 120px;
  left: 38px;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  color: #757575;
}

/* 입력 + 찾기 버튼 */
.eum-upload-row {
  position: absolute;
  top: 154px;
  left: 38px;
  right: 37px;
  height: 30px;
  display: flex;
  gap: 2px;
}

.eum-upload-input {
  flex: 1;
  min-width: 0;
  height: 30px;
  border: 1px solid #dbdbdb;
  border-radius: 5px;
  background: #ffffff;
  padding: 0 10px;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 12px;
  color: #303030;
}

.eum-upload-input:focus {
  outline: none;
  border-color: #afce35;
}

.eum-upload-browse {
  width: 59px;
  height: 30px;
  background: #787878;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 21px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.eum-upload-browse:hover {
  background: #5f5f5f;
}

/* 검증하기 버튼 (중앙) */
.eum-verify-btn {
  position: absolute;
  top: 196px;
  left: 118px;
  width: 114px;
  height: 35px;
  background: #afce35;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.eum-verify-btn:hover {
  background: #9cb92f;
}

/* 구분선 */
.eum-divider {
  position: absolute;
  top: 250px;
  left: 31px;
  right: 31px;
  height: 1px;
  background: #e0e0e0;
}

/* 파일 검증결과 제목 */
.eum-result-title {
  position: absolute;
  top: 263px;
  left: 0;
  right: 0;
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: #757575;
  text-align: center;
}

/* 결과 테이블 */
.eum-result-table {
  position: absolute;
  top: 300px;
  left: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.eum-result-row {
  display: flex;
  height: 30px;
  gap: 2px;
}

.eum-result-label {
  width: 100px;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  color: #000000;
}

.eum-result-value {
  flex: 1;
  background: #ffffff;
  border: 2px solid #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 35px 0 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: #303030;
}

/* 경고 텍스트 */
.eum-warning {
  position: absolute;
  top: 417px;
  left: 23px;
  width: 308px;
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #757575;
}

/* 하단 버튼 영역 */
.eum-btn-row {
  position: absolute;
  top: 463px;
  left: 28px;
  right: 28px;
  display: flex;
  gap: 6px;
  height: 40px;
}

.eum-btn {
  height: 40px;
  border: none;
  border-radius: 5px;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  cursor: pointer;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.eum-btn--cancel {
  width: 99px;
  background: #e4e4e4;
  color: #757575;
}

.eum-btn--cancel:hover {
  background: #d5d5d5;
}

.eum-btn--upload {
  flex: 1;
  background: #afce35;
  color: #ffffff;
}

.eum-btn--upload:hover {
  background: #9cb92f;
}

/* ── 반응형 — 극소형 모바일 (≤380px) ──────────────────────── */
@media (max-width: 380px) {
  .eum-overlay {
    padding: 8px;
  }
  .eum-modal {
    width: 100%;
    max-width: 350px;
  }
}


/* ============================================================
   엑셀 업로드 확인 모달 (ecm-) — excel_confirm_modal.html
============================================================ */

/* ── 오버레이 ──────────────────────────────────────────────── */
.ecm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* ── 모달 — 350×350 white radius 16 shadow ────────────────── */
.ecm-modal {
  position: relative;
  width: 350px;
  height: 350px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  font-family: 'Nanum Gothic', sans-serif;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── 상단 헤더 배경 (회색 100h) ────────────────────────────── */
.ecm-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: #f4f4f4;
}

/* ── 로고 — 184×46 @ (83, 34) ──────────────────────────────── */
.ecm-logo {
  position: absolute;
  top: 34px;
  left: 83px;
  width: 184px;
  height: 46px;
  display: block;
  object-fit: contain;
}

/* ── 닫기 14×14 @ top:20 right:14 (350-322-14=14) ──────────── */
.ecm-close {
  position: absolute;
  top: 20px;
  right: 14px;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ecm-close img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── 상단 설명 — 14px leading 24 center y:165 (2줄) ────────── */
.ecm-desc-top {
  position: absolute;
  top: 165px;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #757575;
  text-align: center;
  line-height: 24px;
  white-space: nowrap;
}

.ecm-desc-top strong {
  font-weight: 800;
  color: #4c4c4c;
}

/* ── 질문 — Bold 14px #4c4c4c leading 24 center y:228 ──────── */
.ecm-desc-question {
  position: absolute;
  top: 228px;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #4c4c4c;
  text-align: center;
  line-height: 24px;
  white-space: nowrap;
}

/* ── 버튼 영역 @ top:280 (취소 x:28 w:99 / 확인 x:133 w:189, gap 6) ── */
.ecm-actions {
  position: absolute;
  top: 280px;
  left: 28px;
  width: 294px;
  height: 40px;
  display: flex;
  gap: 6px;
}

.ecm-btn {
  height: 40px;
  border: 0;
  border-radius: 5px;
  padding: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  line-height: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-sizing: border-box;
}

/* 취소 — 99×40 bg #e4e4e4 Bold 14 #757575 */
.ecm-btn--cancel {
  width: 99px;
  background: #e4e4e4;
  color: #757575;
  font-size: 14px;
}

/* 확인 — 189×40 bg #afce35 Bold 16 white */
.ecm-btn--confirm {
  flex: 1;
  background: #afce35;
  color: #ffffff;
  font-size: 16px;
}

/* ── 반응형 — 극소형 모바일 (≤380px) ──────────────────────── */
@media (max-width: 380px) {
  .ecm-overlay {
    padding: 8px;
  }
}


/* ============================================================
   버튼 공통 :disabled 규칙 — hover 정의된 버튼의 disabled 상태 일괄 보완
   (Specificity가 기존 :hover와 동일한 블록을 source order 뒤쪽에 배치해
    disabled 상태가 hover 시각 효과를 덮도록 한다)
============================================================ */

/* 전역 fallback — class-level hover가 없는 일반 button:disabled 기본 스타일 */
button:disabled {
  background: #9d9d9d;
  color: #ffffff;
  border-color: #9d9d9d;
  cursor: not-allowed;
}

/* hover 있는 44개 버튼 class의 disabled 상태 (class specificity 매칭) */
.cam-btn--approve:disabled,
.cam-btn--cancel:disabled,
.crb-btn-close:disabled,
.crb-btn-next:disabled,
.crb-btn-view:disabled,
.crc-btn-close:disabled,
.crc-btn-kakao:disabled,
.crc-btn-myview:disabled,
.crc-btn-next:disabled,
.crc-btn-referral:disabled,
.crc-btn-sms:disabled,
.crc-btn-view:disabled,
.crc-qty-btn:disabled,
.dao-edit-save-btn:disabled,
.dao-inq-action-cancel-btn:disabled,
.dao-inq-action-file-btn:disabled,
.dao-inq-action-submit-btn:disabled,
.dao-inq-detail-cancel-btn:disabled,
.dao-inq-detail-list-btn:disabled,
.dao-inq-write-btn:disabled,
.eum-btn--cancel:disabled,
.eum-btn--upload:disabled,
.eum-verify-btn:disabled,
.eum-upload-browse:disabled,
.lt-btn--logout:disabled,
.lt-btn--mypage:disabled,
.rem-btn--cancel:disabled,
.rem-btn--send:disabled,
.sa-btn--approve:disabled,
.sa-btn--approve--green:disabled,
.sa-btn--approve--red:disabled,
.sa-btn--approve--yellow:disabled,
.sa-btn--view:disabled,
.wc-btn--cancel:disabled,
.wc-btn--connect:disabled,
.wd-btn--agree:disabled,
.wd-btn--cancel:disabled,
.we-btn--resend:disabled,
.wf-submit:disabled,
.wr-btn--cancel:disabled,
.wr-btn--send:disabled,
.wrc-submit:disabled,
.ws-copy-btn:disabled,
.wv-btn--resend:disabled,
.wv-btn--verify:disabled {
  background: #9d9d9d;
  color: #ffffff;
  border-color: #9d9d9d;
  cursor: not-allowed;
}


/* ============================================================
   버튼 :hover 일괄 보완 — base bg 색상 매핑 기반 자동 생성
   (기존 style.css의 hover 색상 매핑 패턴을 따라 누락된 버튼에 적용)
============================================================ */

/* #4779ae → #3a6798 (19개) */
.histd-receipt-btn--view:hover,
.sam-btn-excel--download:hover,
.sasd-select-btn:hover,
.sasd-action-btn--blue:hover,
.sasd2-header-btn--blue:hover,
.sasd2-btn--save:hover,
.sasd2-bottom-btn--regen:hover,
.sasr-header-btn--blue:hover,
.sasr-btn--save:hover,
.sasr-mobile-bottom-btn--save:hover,
.sasr-bottom-btn--regen:hover,
.sasr-excel-btn:hover,
.saoc-select-btn:hover,
.saoc-bottom-btn--create:hover,
.saod-select-btn:hover,
.saod-bottom-btn--create:hover,
.scod-manage-btn--save:hover,
.saod-manage-btn--save:hover,
.sard-bottom-btn--save:hover {
  background: #3a6798;
}

/* #9d9d9d → #8a8a8a (12개) */
.crs-table-detail-btn:hover,
.gov-result-log-btn:hover,
.samd-header-view-btn:hover,
.sgm-select-btn:hover,
.sasd2-header-btn--gray:hover,
.sasr-header-btn--gray:hover,
.sosm-select-btn:hover,
.scod-log-btn:hover,
.saod-log-btn:hover,
.sard-log-btn:hover,
.nftv2-table-detail-btn:hover,
.opt2-detail-btn:hover {
  background: #8a8a8a;
}

/* #afce35 → #9dbc28 (11개) */
.gov-vr-vote-btn--join:hover,
.gov-vr-btn--save:hover,
.gov-vr-bottom-btn--approve:hover,
.gov-vote-add-item-btn:hover,
.gov-vote-btn--submit:hover,
.gov-ve-add-item-btn:hover,
.crp-btn--view:hover,
.land-btn--login:hover,
.land-card-btn--green:hover,
.slm-login-btn:hover,
.ecm-btn--confirm:hover {
  background: #9dbc28;
}

/* #3eb5c9 → #34a3b5 (10개) */
.dao-edit-verify-btn:hover,
.gov-survey-add-answer-btn:hover,
.gov-survey-btn--primary:hover,
.gov-survey-btn--submit:hover,
.gov-preview-mode-btn--active:hover,
.gov-result-btn--save:hover,
.gov-result-bottom-btn--approve:hover,
.crp-btn--sell:hover,
.crsd-btn--save:hover,
.samd-btn--save:hover {
  background: #34a3b5;
}

/* #edb323 → #d9a11e (9개) */
.gov-result-btn--result-request:hover,
.sam-btn--search:hover,
.samd-btn--release:hover,
.sasd2-btn-approval--request:hover,
.sasd2-btn--approve:hover,
.sasr-btn-approval--request:hover,
.sasr-btn--approve:hover,
.scod-manage-btn--approve-req:hover,
.scod-reject-btn--approve:hover {
  background: #d9a11e;
}

/* #b7cd47 → #a6bb3d (7개) */
.crs-sell-btn:hover,
.nftd-back-btn:hover,
.optd-back-btn:hover,
.histd-receipt-btn--email:hover,
.histd-back-btn:hover,
.crsd-receipt-btn--email:hover,
.sard-doc-btn--email:hover {
  background: #a6bb3d;
}

/* #303030 → #444444 (7개) */
.crsd-inline-btn:hover,
.samd-view-btn:hover,
.sasd2-view-btn:hover,
.sasr-view-btn:hover,
.saoc-view-btn:hover,
.saod-view-btn:hover,
.scod-view-btn:hover {
  background: #444444;
}

/* #f1634f → #db5544 (7개) */
.samd-btn--suspend:hover,
.sasd2-btn-approval--reject:hover,
.sasd2-btn--reject:hover,
.sasr-btn-approval--reject:hover,
.sasr-btn--reject:hover,
.scod-manage-btn--reject-no:hover,
.scod-reject-btn--deny:hover {
  background: #db5544;
}

/* #e6dbc8 → #d4c9b3 (2개) */
.crc-agree-btn:hover,
.inv-copy-btn:hover {
  background: #d4c9b3;
}

/* #f1f1f1 → #e0e0e0 (2개) */
.sgm-cancel-btn:hover,
.sosm-cancel-btn:hover {
  background: #e0e0e0;
}

/* #272729 → #3a3a3c (1개) */
.land-service-btn:hover {
  background: #3a3a3c;
}

/* #e4e4e4 → #d5d5d5 (1개) */
.ecm-btn--cancel:hover {
  background: #d5d5d5;
}

/* 상기 hover 추가 class 대응 :disabled (hover 시각 효과를 덮도록 source order 뒤쪽) */
.crc-agree-btn:disabled,
.crp-btn--sell:disabled,
.crp-btn--view:disabled,
.crs-sell-btn:disabled,
.crs-table-detail-btn:disabled,
.crsd-btn--save:disabled,
.crsd-inline-btn:disabled,
.crsd-receipt-btn--email:disabled,
.dao-edit-verify-btn:disabled,
.ecm-btn--cancel:disabled,
.ecm-btn--confirm:disabled,
.gov-preview-mode-btn--active:disabled,
.gov-result-bottom-btn--approve:disabled,
.gov-result-btn--result-request:disabled,
.gov-result-btn--save:disabled,
.gov-result-log-btn:disabled,
.gov-survey-add-answer-btn:disabled,
.gov-survey-btn--primary:disabled,
.gov-survey-btn--submit:disabled,
.gov-ve-add-item-btn:disabled,
.gov-vote-add-item-btn:disabled,
.gov-vote-btn--submit:disabled,
.gov-vr-bottom-btn--approve:disabled,
.gov-vr-btn--save:disabled,
.gov-vr-vote-btn--join:disabled,
.histd-back-btn:disabled,
.histd-receipt-btn--email:disabled,
.histd-receipt-btn--view:disabled,
.inv-copy-btn:disabled,
.land-btn--login:disabled,
.land-card-btn--green:disabled,
.land-service-btn:disabled,
.nftd-back-btn:disabled,
.nftv2-table-detail-btn:disabled,
.opt2-detail-btn:disabled,
.optd-back-btn:disabled,
.sam-btn--search:disabled,
.sam-btn-excel--download:disabled,
.samd-btn--release:disabled,
.samd-btn--save:disabled,
.samd-btn--suspend:disabled,
.samd-header-view-btn:disabled,
.samd-view-btn:disabled,
.saoc-bottom-btn--create:disabled,
.saoc-select-btn:disabled,
.saoc-view-btn:disabled,
.saod-bottom-btn--create:disabled,
.saod-log-btn:disabled,
.saod-manage-btn--save:disabled,
.saod-select-btn:disabled,
.saod-view-btn:disabled,
.sard-bottom-btn--save:disabled,
.sard-doc-btn--email:disabled,
.sard-log-btn:disabled,
.sasd-action-btn--blue:disabled,
.sasd-select-btn:disabled,
.sasd2-bottom-btn--regen:disabled,
.sasd2-btn--approve:disabled,
.sasd2-btn--reject:disabled,
.sasd2-btn--save:disabled,
.sasd2-btn-approval--reject:disabled,
.sasd2-btn-approval--request:disabled,
.sasd2-header-btn--blue:disabled,
.sasd2-header-btn--gray:disabled,
.sasd2-view-btn:disabled,
.sasr-bottom-btn--regen:disabled,
.sasr-btn--approve:disabled,
.sasr-btn--reject:disabled,
.sasr-btn--save:disabled,
.sasr-btn-approval--reject:disabled,
.sasr-btn-approval--request:disabled,
.sasr-excel-btn:disabled,
.sasr-header-btn--blue:disabled,
.sasr-header-btn--gray:disabled,
.sasr-mobile-bottom-btn--save:disabled,
.sasr-view-btn:disabled,
.scod-log-btn:disabled,
.scod-manage-btn--approve-req:disabled,
.scod-manage-btn--reject-no:disabled,
.scod-manage-btn--save:disabled,
.scod-reject-btn--approve:disabled,
.scod-reject-btn--deny:disabled,
.scod-view-btn:disabled,
.sgm-cancel-btn:disabled,
.sgm-select-btn:disabled,
.slm-login-btn:disabled,
.sosm-cancel-btn:disabled,
.sosm-select-btn:disabled {
  background: #9d9d9d;
  color: #ffffff;
  border-color: #9d9d9d;
  cursor: not-allowed;
}

/* ============================================================
   Outline / Ghost 버튼 :hover 일괄 보완
   (border color별 light tint 또는 ghost 버튼 subtle bg)
============================================================ */

/* blue-outline → hover bg #f5f8fb (8개) */
.saod-manage-btn--list:hover,
.sard-reissue-btn:hover,
.sasd2-bottom-btn--list:hover,
.sasd2-btn--list-sm:hover,
.sasr-bottom-btn--list:hover,
.sasr-btn--list-sm:hover,
.scod-manage-btn--list:hover,
.scod-reject-btn--list:hover {
  background: #f5f8fb;
}

/* gray-outline → hover bg #f5f5f5 (12개) */
.crsd-btn--list:hover,
.gov-result-bottom-btn--list:hover,
.gov-survey-btn--cancel:hover,
.gov-vote-btn--cancel:hover,
.gov-vr-vote-btn--cancel:hover,
.sald-bottom-btn--list:hover,
.samd-btn--list:hover,
.saoc-bottom-btn--list:hover,
.saod-bottom-btn--list:hover,
.sard-bottom-btn--list:hover,
.rcs-pdf-btn:hover,
.gov-preview-mode-btn--back:hover {
  background: #f5f5f5;
}

/* lime-outline → hover bg #f6fbe7 (2개) */
.gov-vr-bottom-btn--list:hover,
.land-btn--signup:hover {
  background: #f6fbe7;
}

/* coral-outline → hover bg #fcf2f0 (2개) */
.crsd-receipt-btn--view:hover,
.sard-doc-btn--view:hover {
  background: #fcf2f0;
}

/* teal-outline → hover bg #eff9fb (1개) */
.sasr-mobile-bottom-btn--list:hover {
  background: #eff9fb;
}

/* white-ghost → hover bg #f5f5f5 (3개) */
.gov-preview-continue-btn:hover,
.gov-result-btn:hover,
.gov-ve-btn:hover {
  background: #f5f5f5;
}

/* 채움형 버튼 hover — generic .gov-result-btn:hover 가 회색으로 덮어쓰는 것을 방지 */
.gov-result-btn--edit:hover {
  background: #bd5949;
  color: #fff;
}
.gov-result-btn--delete:hover {
  background: #fbeeec;
  color: #d46351;
}
.gov-result-btn--result-request:hover {
  background: #d9a11e;
  color: #fff;
}

/* icon-ghost → hover bg rgba(0, 0, 0, 0.05) (13개) */
.crc-qty-btn:hover,
.crs-pag-btn:hover,
.crs-search-btn:hover,
.dao-gov-search-btn:hover,
.nftv2-pag-btn:hover,
.nftv2-search-btn:hover,
.opt2-pag-btn:hover,
.opt2-search-btn:hover,
.sam-pag-btn:hover,
.sasd2-page-btn:hover,
.sasr-page-btn:hover,
.sgm-pag-btn:hover,
.sosm-pag-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* 상기 outline/ghost 버튼의 :disabled (source order 뒤쪽) */
.crc-qty-btn:disabled,
.crs-pag-btn:disabled,
.crs-search-btn:disabled,
.crsd-btn--list:disabled,
.crsd-receipt-btn--view:disabled,
.dao-gov-search-btn:disabled,
.gov-preview-continue-btn:disabled,
.gov-preview-mode-btn--back:disabled,
.gov-result-bottom-btn--list:disabled,
.gov-result-btn:disabled,
.gov-survey-btn--cancel:disabled,
.gov-ve-btn:disabled,
.gov-vote-btn--cancel:disabled,
.gov-vr-bottom-btn--list:disabled,
.gov-vr-vote-btn--cancel:disabled,
.land-btn--signup:disabled,
.nftv2-pag-btn:disabled,
.nftv2-search-btn:disabled,
.opt2-pag-btn:disabled,
.opt2-search-btn:disabled,
.rcs-pdf-btn:disabled,
.sald-bottom-btn--list:disabled,
.samd-btn--list:disabled,
.saoc-bottom-btn--list:disabled,
.saod-bottom-btn--list:disabled,
.saod-manage-btn--list:disabled,
.sard-bottom-btn--list:disabled,
.sard-doc-btn--view:disabled,
.sard-reissue-btn:disabled,
.sasd2-bottom-btn--list:disabled,
.sasd2-btn--list-sm:disabled,
.sasd2-page-btn:disabled,
.sasr-bottom-btn--list:disabled,
.sasr-btn--list-sm:disabled,
.sasr-mobile-bottom-btn--list:disabled,
.sasr-page-btn:disabled,
.scod-manage-btn--list:disabled,
.scod-reject-btn--list:disabled,
.sgm-pag-btn:disabled,
.sosm-pag-btn:disabled {
  background: #f1f1f1;
  color: #9d9d9d;
  border-color: #d0d0d0;
  cursor: not-allowed;
}

/* sam-pag-btn은 disabled 스타일 제외 — 전역 button:disabled override */
.sam-pag-btn:disabled {
  background: transparent;
  color: inherit;
  border-color: transparent;
  cursor: pointer;
}

.crp-table-section {
  background: var(--dao-white);
  border-radius: 10px;
  margin-top: 16px;
  margin-bottom: 49px;
}