/* ============================================================
   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: clamp(60px, 10.6vw, 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-yellow { background: rgba(237,179,35,.15); }

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

/* 헤더 알림 (Figma 876:3735) — 거버넌스/참여(.dao-header-icon-btn)와 동일한 45×45 옐로우 카드 + bell 22 + 빨간 점 우상단.
   button reset 필요 (기존 button 태그 유지 — aria-expanded dropdown trigger). 카운트 텍스트 없이 점만 표시. */
.dao-header-notif-btn {
  position: relative;
  width: 45px;
  height: 45px;
  background: rgba(237,179,35,.15);
  border: none;
  border-radius: 12px;
  box-shadow: 0 3.5px 5.5px rgba(0,0,0,.02);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

/* bell — Figma 876:3736: 22×22 옐로우 fill SVG. button flex center 로 가운데 정렬 (absolute 제거). */
.dao-header-notif-bell {
  width: 22px;
  height: 22px;
  display: block;
}

/* 빨간 점 — 카운트 없이 표시만. icon-btn (45×45) 우상단 absolute. */
.dao-header-notif-badge {
  position: absolute;
  top: 8px;
  right: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f1634f;
}

/* "알림" 라벨 — Figma 876:3741: Bold 12 #303030 (거버넌스/디렉토리와 동일 tone) */
.dao-header-icon-group--notif .dao-header-icon-label {
  font-weight: 700;
}

/* 알림 그룹 — 거버넌스/디렉토리와 동일하게 ml:15 (Figma 876:3734) */
.dao-header-icon-group--notif {
  margin-left: 15px;
}

/* 언어 버튼 */
.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;
  min-width: 0;
}

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

.dao-header-username {
  font-size: 14px;
  font-weight: 700;
  color: #171a1f;
  letter-spacing: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

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

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

/* 모바일 헤더 우측 actions wrapper (알림 벨 + 메뉴 묶음) — Figma 258:1076;337:72 */
.dao-mobile-header-actions {
  display: flex;
  align-items: center;
}

/* 모바일 헤더 알림 벨 (Figma 258:1076;337:73 — 44×44 + 24×24 bell + coral 3 badge) */
.dao-mobile-notif-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.dao-mobile-notif-icon-wrap {
  position: relative;
  width: 24px;
  height: 24px;
  display: block;
}

.dao-mobile-notif-bell {
  display: block;
  width: 24px;
  height: 24px;
}

.dao-mobile-notif-badge {
  position: absolute;
  top: -3px;
  left: 18px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f1634f;
}


/* ============================================================
   레이아웃
============================================================ */
.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-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;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 12px;
  width: auto;
}

/* 수정 취소하기 버튼 (회색 pill) */
.dao-edit-cancel-btn {
  height: 50px;
  padding: 0 28px;
  background: #afafaf;
  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;
  white-space: nowrap;
}

.dao-edit-cancel-btn:hover {
  background: #9b9b9b;
}

/* 개인정보 변경 저장 버튼 (다크 pill) */
.dao-edit-save-btn {
  height: 50px;
  padding: 0 28px;
  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;
  white-space: nowrap;
}

.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 {
    gap: 2px;
    flex-shrink: 0;
  }

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

  /* 피그마 unit frame w=34, text-center, LS 0.12 ("CSET"/"개"/"USDT"/"POL") */
  .dao-token-symbol {
    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;
    min-width: 0;
  }

  .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-icon-wrap img[src="/assets/img/homes.png"] {
    width: 17px;
    height: 17px;
    min-width: 17px;
    min-height: 17px;
  }

  .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;
  }

  /* 저장 + 취소 버튼 — 모바일에서도 가로 나란히 (디자인 757-5529) */
  .dao-edit-field--btn {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
  }

  .dao-edit-cancel-btn {
    flex: 1 1 0;
    max-width: 142px;
    height: 50px;
    padding: 0;
    font-size: 16px;
  }

  .dao-edit-save-btn {
    flex: 1 1 0;
    max-width: 175px;
    height: 50px;
    padding: 0;
    font-size: 16px;
  }

  /* 보유현황 숨김 */
  .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;
  table-layout: fixed;
  width: 100%;
}

/* 컬럼 너비: 구분 18% | 거버넌스 34% | 점수/상세 22% | 지급방법/빈칸 26% */
.dao-opt-mobile-table th:nth-child(1) { width: 18%; }
.dao-opt-mobile-table th:nth-child(2) { width: 34%; }
.dao-opt-mobile-table th:nth-child(3) { width: 22%; }
.dao-opt-mobile-table th:nth-child(4) { width: 26%; }

/* 헤더 행 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;
  overflow: hidden;
  text-overflow: ellipsis;
  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;
  white-space: pre-wrap;
  word-break: break-word;
}

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

/* 첨부 이미지 */
.dao-inq-detail-file-img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  border-radius: 6px;
  object-fit: contain;
  border: 1px solid #e8e8e8;
}

/* 구분선 (첨부파일 ↔ 답변 사이) */
.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;
}

.dao-gov-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 0;
  color: #888;
  font-size: 16px;
}

/* 개별 거버넌스 카드 */
/* 피그마: 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;
}

/* ──── 카드 variant: 라이트(미참여 ACTIVE) ──── */
/* Figma 757-5832: 진행중 + 미참여 사용자 — 라이트 회색 카드 안에 흰 박스로 안내 + cyan 참여하기 버튼 */
.dao-gov-card--inactive {
  background: #ebebeb;
  position: relative;
}

/* inactive 의 tag chip 은 회색 처리 (Figma 757:5909 bg #b4b4b4) */
.dao-gov-card-tag--muted {
  background: #b4b4b4;
  color: #ffffff;
}

.dao-gov-card--inactive .dao-gov-card-title {
  color: #b4b4b4;
}

.dao-gov-card--inactive .dao-gov-card-info-text {
  color: #8b8b8b;
}

/* inactive 의 흰 박스/참여하기 버튼 — Figma 757:5905 정확 좌표 */
/* 카드 outer 452.8 기준: 박스 left/right = 40 (Figma x=411-370=41 / 카드 right-박스 right=355-325=30 -> 평균 40) */
/* 박스 top 105 (Figma y=1165-1060), 확인 버튼 bottom 51 (Figma y=1388-1337) */
.dao-gov-card--inactive > .dao-gov-card-info-box {
  position: absolute;
  left: 40px;
  right: 40px;
  top: 105px;
  margin: 0;
}

.dao-gov-card--inactive > .dao-gov-card-cta-btn {
  position: absolute;
  left: 50%;
  bottom: 51px;
  transform: translateX(-50%);
  margin: 0;
}

/* ──── 카드 variant: 종료(CLOSED·FINALIZED) — 진행률 위에 어두운 반투명 오버레이 ──── */
/* Figma 757-5832: default 카드 layout(진행률+미참여) 위에 어두운 반투명(rgba(80,83,100,0.85))
   오버레이가 덮이고, 그 위로 검은 박스 + 확인하기 버튼이 absolute 로 떠 있는 구조. */
.dao-gov-card--closed {
  position: relative;
  /* outer 는 default 와 같은 #505364 유지 (오버레이가 위에서 덮으므로 background 변경 X) */
}

.dao-gov-card--closed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(80, 83, 100, 0.85);
  border-radius: 6px;
  pointer-events: none;
  z-index: 1;
}

.dao-gov-card--closed .dao-gov-card-tag,
.dao-gov-card--closed .dao-gov-card-title {
  opacity: 1;
}

.dao-gov-card--closed .dao-gov-card-title {
  color: #ffffff;
}

.dao-gov-card--closed .dao-gov-card-info-text {
  color: #ebebeb;
}

/* closed 의 info-box, cta-btn 은 layout 위에 떠야 함 (오버레이보다 위 z-index) */
/* Figma 757:5951 정확: 카드 outer 452.8 기준 좌우 40px 간격, top 105, 버튼 bottom 51 */
.dao-gov-card--closed > .dao-gov-card-info-box {
  position: absolute;
  left: 40px;
  right: 40px;
  top: 105px;
  margin: 0;
  z-index: 2;
}

.dao-gov-card--closed > .dao-gov-card-cta-btn {
  position: absolute;
  left: 50%;
  bottom: 51px;
  transform: translateX(-50%);
  margin: 0;
  z-index: 2;
}

/* default progress 도 closed 에서는 오버레이 아래로 보임 */
.dao-gov-card--closed .dao-gov-card-progress,
.dao-gov-card--closed .dao-gov-card-header {
  position: relative;
  z-index: 0;
}

/* ──── 안내 박스 (라이트=흰 / closed=검정) — Figma height 108px ──── */
.dao-gov-card-info-box {
  background: #ffffff;
  border-radius: 6px;
  height: 108px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

.dao-gov-card-info-box--dark {
  background: #303030;
}

.dao-gov-card-info-text {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  white-space: pre-line;
  word-break: keep-all;
  letter-spacing: -0.5px;
}

/* closed 검은 박스 텍스트는 line-height 28 (Figma 757:5952) */
.dao-gov-card-info-box--dark .dao-gov-card-info-text {
  line-height: 28px;
}

/* ──── CTA 버튼 — cyan(참여하기) / light(확인하기, 흰 배경) ──── */
.dao-gov-card-cta-btn {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  padding: 0 30px;
  margin-top: 10px;
  background: #3eb5c9;
  color: #ffffff;
  border: none;
  border-radius: 30px;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.dao-gov-card-cta-btn:hover {
  background: #2fa2b6;
}

/* closed 카드의 확인하기 — 흰 배경 + #505364 텍스트 (Figma 757:5948) */
.dao-gov-card-cta-btn--light {
  background: #ffffff;
  color: #505364;
}

.dao-gov-card-cta-btn--light:hover {
  background: #f0f0f0;
}


/* ============================================================
   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;
  }

  /* inactive/closed variant: 모바일 절대좌표 — Figma 757-5742(inactive), 757-5784(closed) 기준
     카드 335×243, 박스 top 76 / left 31 right 30 / height 80, 버튼 bottom 36, 100×26 */
  .dao-gov-card--inactive,
  .dao-gov-card--closed {
    height: 243px;
    min-height: 0;
  }

  .dao-gov-card--inactive > .dao-gov-card-info-box,
  .dao-gov-card--closed > .dao-gov-card-info-box {
    position: absolute;
    left: 31px;
    right: 30px;
    top: 76px;
    height: 80px;
    padding: 0 16px;
    margin: 0;
  }

  .dao-gov-card--inactive > .dao-gov-card-cta-btn,
  .dao-gov-card--closed > .dao-gov-card-cta-btn {
    position: absolute;
    left: 50%;
    bottom: 36px;
    transform: translateX(-50%);
    width: 100px;
    height: 26px;
    padding: 0;
    margin: 0;
    font-size: 12px;
    border-radius: 13px;
  }

  /* 모바일에서도 closed 카드의 진행률(첫 progress) 표시 — Figma 757:5790 박스 뒤로 가려짐 */
  .dao-gov-card--closed > .dao-gov-card-progress:first-of-type {
    display: block;
  }

  /* 모바일 박스 텍스트 폰트 축소 */
  .dao-gov-card-info-text {
    font-size: 12px;
    line-height: 18px;
  }

  .dao-gov-card-info-box--dark .dao-gov-card-info-text {
    line-height: 20px;
  }

  .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: 2px solid #e8e8e8;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}

.gov-result-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════
   [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 128px 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;
}

/* [수정 #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(6) {
  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: 4px;
    margin-bottom: 10px;
  }
  .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: 10px;
  }
  .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 영역에 흰색 노출 */
    align-items: center;
  }

  /* 헤더 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;
  }

  /* 빈 스페이서 셀 숨김 → 헤더·아이템 열 정렬 맞춤 */
  .crp-table th.crp-table-status,
  .crp-table td.crp-table-status {
    display: none;
  }

  /* No Data 행: grid 해제 → td가 전체 너비로 가운데 정렬 */
  .crp-table .crp-table-empty-row {
    display: block;
  }

  .crp-table .crp-table-empty-row td {
    display: block;
    width: 100%;
    text-align: center;
    padding: 20px 0;
  }

  /* [non-admin] 4열 그리드: row1=판매자·단가·수량·상태(각 1/4), row2=날짜2+매입2 */
  .crp-table:not(.crp-table--admin) thead tr,
  .crp-table:not(.crp-table--admin) tbody tr {
    grid-template-columns: repeat(4, 1fr);
  }

  /* [non-admin] 날짜 셀: row2 좌측 2칸 */
  .crp-table:not(.crp-table--admin) thead th:nth-child(6),
  .crp-table:not(.crp-table--admin) tbody td:nth-child(6) {
    grid-column: span 2;
    text-align: center;
  }

  /* [non-admin] 매입하기 셀: row2 우측 2칸 */
  .crp-table:not(.crp-table--admin) thead th:nth-child(8),
  .crp-table:not(.crp-table--admin) tbody td:nth-child(8) {
    grid-column: span 2;
  }

  /* [admin] crp-admin 스페이서 셀 숨김 */
  .crp-table--admin th.crp-admin,
  .crp-table--admin td.crp-admin {
    display: none;
  }

  /* [admin] row2: 수량(1)+상태(1)+날짜(1)+매입(1)+거래종류(1)=5, 영수증ID/상세 숨김 */
  .crp-table--admin thead th:nth-child(14),
  .crp-table--admin thead th:nth-child(15),
  .crp-table--admin tbody td:nth-child(14),
  .crp-table--admin tbody td:nth-child(15) {
    display: none;
  }

  /* <br> 숨김 → 한 줄 표시 */
  .crp-table-br {
    display: none;
  }


  /* 데이터 행 → 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;
    align-items: center;
  }

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

  /* 짝수 행 배경 유지 */
  .crp-table tbody tr:nth-child(even) {
    background: #f8f8f8;
  }

  /* 데이터 셀 — 피그마 Regular 11 leading 22, 넘치면 말줄임 */
  .crp-table tbody td {
    font-size: 11px;
    line-height: 22px;
    padding: 4px 3px 3px;
    text-align: center;
    border: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 모바일 뱃지 — 피그마 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;
}

/* 퍼센트 빠른선택 버튼 그룹 */
.crc-qty-pct-group {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  width: 367px;
  max-width: 100%;
}

.crc-qty-pct-btn {
  flex: 1;
  height: 32px;
  border: 1.5px solid #c8bfb0;
  border-radius: 5px;
  background: #fdfaf6;
  color: #6b5a48;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  white-space: nowrap;
  padding: 0;
}

.crc-qty-pct-btn:hover:not(:disabled) {
  border-color: #401D01;
  color: #401D01;
  background: rgba(64, 29, 1, 0.06);
}

.crc-qty-pct-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.crc-qty-pct-btn--active {
  border-color: #401D01;
  background: #401D01;
  color: #e6dbc8;
}

.crc-qty-pct-btn--active:hover:not(:disabled) {
  background: #2d1500;
  border-color: #2d1500;
  color: #e6dbc8;
}

.crc-qty-pct-btn--max {
  border-color: #401D01;
  color: #401D01;
  background: rgba(64, 29, 1, 0.04);
}

.crc-qty-pct-btn--max:hover:not(:disabled) {
  background: #401D01;
  color: #e6dbc8;
}

.crc-qty-pct-btn--max.crc-qty-pct-btn--active {
  background: #401D01;
  color: #e6dbc8;
  border-color: #401D01;
}

/* ── 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;
  }

  .crc-qty-pct-group {
    width: 100%;
    gap: 4px;
  }

  .crc-qty-pct-btn {
    height: 32px;
    font-size: 12px;
  }

  /* 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;
  }

  .crc-qty-pct-btn {
    height: 30px;
    font-size: 11px;
  }

}


/* ============================================================
   판매등록 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: 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-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-) — Figma 754:3818 / 754:4082 (2026-05 리뉴얼)
============================================================ */

.land-body {
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  background: #272729;
  color: #f1f1f1;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
  flex: 1 0 100%;
  min-width: 0;
}

.land-text-green { color: #afce35; }
.land-text-white { color: #f1f1f1; }

/* ── 공용 pill 버튼 ──────────────────────────────────────── */
.land-pill-btn {
  /* figma 1920 hero 버튼 777:6486 — w=237.62, h=55.72, font 20 Bold, leading 17, ls -0.2, icon 20.65×20.06.
     padding-left/right figma 좌표 28.74/28.71. justify-content center + gap 15 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  height: 55.72px;
  min-width: 237.62px;
  padding-left: 28.74px;
  padding-right: 28.71px;
  border: none;
  border-radius: 100px;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: -0.2px;
  cursor: pointer;
  white-space: nowrap;
}

.land-pill-btn img {
  width: 21px;
  height: 21px;
}

.land-pill-btn--green {
  background: #afce35;
  color: #022813;
}

.land-pill-btn--white {
  background: #f1f1f1;
  color: #022813;
}

.land-pill-btn--center {
  /* figma 1920 777:6559 — AI era CTA w=260, h=62, bg #afce35 radius 100.
     padding 좌우 40 (content w=180 = text 140 + icon 22 + gap 18) */
  margin: 0 auto;
  width: 260px;
  height: 62px;
  min-width: 260px;
  padding: 0 40px;
  gap: 18px;
}

.land-pill-btn--center img {
  /* figma 1920 — icon 22×22 */
  width: 22px;
  height: 22px;
}

/* ── 1) 히어로 ───────────────────────────────────────────── */
.land-hero {
  /* figma 1920 777:6480 — h=1080 */
  position: relative;
  height: 1080px;
  background: #022813;
  overflow: hidden;
}

.land-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 1080px;
  object-fit: cover;
  object-position: center;
}

.land-hero-content {
  /* figma 1920 777:6480 — title x=213, y=318 (영역 y=176 기준 padding 142). 1920×11.1% = 213
     1441+ 모든 폭에서 좌상단 비례 정렬 */
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 142px 11.1% 0;
  box-sizing: border-box;
}

.land-hero-title {
  /* figma 1920 777:6483 — font 60 ExtraBold, leading 80, ls 0.5, color white + "공존" #afce35 */
  margin: 0 0 45px;
  font-size: 60px;
  font-weight: 800;
  line-height: 80px;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.land-hero-title-line {
  display: block;
}

/* PC / Mobile 분기 — 한국어 figma 모바일은 콤마/줄바꿈/띄어쓰기가 PC와 다름 */
.land-hero-title-pc,
.land-hero-desc-pc {
  display: block;
}

.land-hero-title-mobile,
.land-hero-desc-mobile {
  display: none;
}

.land-hero-desc {
  /* figma 1920 777:6482 — font 22 Regular, leading 34, ls -0.3, color white */
  margin: 0 0 45px;
  font-size: 22px;
  font-weight: 400;
  line-height: 34px;
  color: #ffffff;
  letter-spacing: -0.3px;
}

.land-hero-actions {
  /* figma 1920 — gap (465.38-(213+237.62))=14.76 */
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

/* ── 공통 섹션 헤더 ──────────────────────────────────────── */
.land-section-header {
  /* figma 1920 intro: header 끝(1810) ~ 카드 시작(1910) = 100 */
  text-align: center;
  margin-bottom: 100px;
}

.land-section-brand {
  /* figma 1920 777:6498 — font 60 ExtraBold, leading normal, ls 0.5, color #afce35 (PC 전체 녹색).
     margin-bottom = title y(1609) - brand end(1548) = 61 */
  margin: 0 0 61px;
  font-size: 60px;
  font-weight: 800;
  line-height: 1.2;
  color: #afce35;
  letter-spacing: 0.5px;
}

/* 데스크탑 figma PC intro brand: 전체 #afce35 (모바일은 split 유지) */
.land-section-brand .land-text-white {
  color: #afce35;
}

.land-section-title {
  /* figma 1920 777:6499 — font 60 ExtraBold, ls 0.5, color white.
     margin-bottom = desc y(1730) - title end(1669) = 61 */
  margin: 0 0 61px;
  font-size: 60px;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
  letter-spacing: 0.5px;
}

/* PC / Mobile 분기 — figma 모바일 781:8032 영문은 2줄 강제 */
.land-section-title-pc {
  display: block;
}

.land-section-title-mobile {
  display: none;
}

.land-section-title--brand {
  /* figma 1920 777:6567 (플랫폼 brand) — font 60, brand end → desc 시작 gap 27
     (intro title의 margin-bottom 61과 다름) */
  font-size: 60px;
  margin-bottom: 27px;
}

.land-section-desc {
  /* figma 1920 777:6500 — font 26 Regular, leading 40, color white */
  margin: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 40px;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.land-section-desc--light {
  color: #f1f1f1;
}

/* PC / Mobile 분기 — figma 모바일 781:8049 영문은 3줄 line break (PC는 2줄, 위치 다름) */
.land-platform-desc-pc {
  display: block;
}

.land-platform-desc-mobile {
  display: none;
}

/* ── 2) 인트로 + 3 카드 ──────────────────────────────────── */
.land-intro {
  /* figma 1920 영역 y=1488, h=1113.37 / hero end y=1256 → padding-top 232,
     intro end 2601.37 / AI era start 2834 → padding-bottom 233 */
  background: #272729;
  padding: 232px 0 233px;
}

.land-cards-row {
  /* figma 1920 777:6501 — 영역 w=1702.93, 3 카드(531.93×3) + 2 gap(54.07) = 1703.93 */
  display: flex;
  gap: 54.07px;
  justify-content: center;
  flex-wrap: nowrap;
  max-width: 1703.93px;
  margin: 0 auto;
}

.land-card {
  /* figma 1920 777:6502 — w=531.93, h=691.37, radius 15.
     내부 spacing: padding-top 91, icon~title 71, title~desc 29, desc~btn 39, btn end~bottom 65 */
  width: 531.93px;
  height: 691.37px;
  padding: 91px 30px 65px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

.land-card--dark {
  background: #505364;
}

.land-card--light {
  background: #ffffff;
}

.land-card-icon {
  /* figma 1920 777:6504 — w=246.42, h=224.04. image end ~ title gap 71.47.
     flex-shrink: 0 — card content overflow 시 icon이 줄어들어 title 위치 카드별 다르게 보이는 이슈 차단 */
  width: 246.42px;
  height: 224.04px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 71.47px;
}

.land-card-icon img {
  /* PC 카드별 img 자연 크기 차이 무시하고 부모 박스(246×224)에 동일 표시 */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.land-card-title {
  /* figma 1920 777:6505 — font 40 ExtraBold, leading normal, ls 0.5. margin-bottom 29 (title~desc) */
  margin: 0 0 29px;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.land-card--dark .land-card-title {
  color: #f1f1f1;
}

.land-card--light .land-card-title {
  color: #303030;
}

.land-card-desc {
  /* figma 1920 777:6506 — font 22 Regular, leading 30, color #f1f1f1/#303030 */
  margin: 0 0 auto;
  font-size: 22px;
  line-height: 30px;
  font-weight: 400;
}

.land-card--dark .land-card-desc {
  color: #f1f1f1;
}

.land-card--light .land-card-desc {
  color: #303030;
}

.land-card-btn {
  /* figma 1920 777:6508 — h=62, font 22 Bold (NanumGothicOTF:Bold), leading 17, ls -0.2.
     gap 15 (text~icon), padding 좌우 ~40. margin-top 39 (desc~btn). icon 22 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  height: 62px;
  padding: 0 40px;
  border-radius: 100px;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: -0.2px;
  border: none;
  cursor: pointer;
  margin-top: 39px;
}

.land-card-btn img {
  width: 22px;
  height: 22px;
}

.land-card-btn--green {
  background: #afce35;
  color: #022813;
  font-weight: 600;
}

/* figma 영문 PC 카드 CTA 781:7768~7772 — bg h=60, content h=26.67 → padding top/bottom 17, 좌우 38, gap 5, icon 16×16.
   padding-based로 명시 (height: 60 + flex가 cascade로 33.88로 적용되는 이슈 회피). */
.land-card-btn--en {
  height: auto;
  min-height: 60px;
  padding: 17px 38px;
  gap: 5px;
}

.land-card-btn--en img {
  width: 16px;
  height: 16px;
}

.land-card-btn--dark {
  background: #505364;
  color: #ffffff;
  font-weight: 600;
}

/* ── 3) AI 시대 ──────────────────────────────────────────── */
.land-ai-era {
  /* figma 1920 777:6532 — y=2834, h=2331, w=1920. mask 페이지 전폭. padding-bottom 170 */
  position: relative;
  background: #0a0919;
  height: 2331px;
  padding: 0 0 170px;
  overflow: hidden;
  box-sizing: border-box;
}

.land-ai-era-scale {
  /* figma 1920 777:6552 mask: w=1920, h=1016. image top과 mask top 동일 → flex-start */
  position: relative;
  width: 100%;
  height: 1016px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.land-ai-era-scale img {
  /* figma 1920 777:6554 — w=1578, h=1052. opacity figma 명시 없음 = 1.0 */
  width: 1578px;
  height: 1052px;
  object-fit: contain;
}

.land-ai-era-content {
  /* figma 1920 — title y=3957, mask end y=3850 → margin-top 107 */
  position: relative;
  text-align: center;
  margin-top: 107px;
}

.land-ai-era-title {
  /* figma 1920 777:6556 — font 60 ExtraBold, box h=125.85, color white.
     margin-bottom = desc y(4099.67) - title end(4082.85) = 17 */
  margin: 0 0 17px;
  min-height: 125.85px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.land-ai-era-desc {
  /* figma 1920 777:6557 — font 26 Regular, leading 34, ls -0.2.
     margin-bottom = CTA y(4203) - desc end(4143.67) = 59 */
  margin: 0 0 59px;
  font-size: 26px;
  line-height: 34px;
  color: #ffffff;
  letter-spacing: -0.2px;
}

/* PC / Mobile 분기 — figma 모바일 777:5322는 한글 두 줄 강제 */
.land-ai-era-desc-pc {
  display: block;
}

.land-ai-era-desc-mobile {
  display: none;
}

.land-features {
  /* figma 1920 777:6534 — x=411, y=4349, w=1100, h=646.
     inner 777:6536: x=645.99, y=4453 → padding-top 104, padding-left 235.
     CTA end y=4265 → features y=4349 → margin-top 84. gap (feature1~2) = 47 */
  margin: 84px auto 0;
  max-width: 1100px;
  height: 646px;
  background: rgba(217, 217, 217, 0.15);
  border-radius: 15px;
  padding: 104px 235px;
  display: flex;
  flex-direction: column;
  gap: 47px;
  box-sizing: border-box;
}

/* 영문 PC 전용 — 좌우 padding 131로 줄여 text 1줄 fit (한국어는 base 235 유지) */
.land-features--en {
  padding-left: 131px;
  padding-right: 131px;
}

.land-feature {
  /* figma 1920 777:6537 — h=115, icon~text gap 38 */
  display: flex;
  align-items: center;
  gap: 38px;
  height: 115px;
}

.land-feature-icon {
  /* figma 1920 777:6540 — 115×115, radius 10, bg #6c9dd4 */
  flex-shrink: 0;
  width: 115px;
  height: 115px;
  border-radius: 10px;
  background: #6c9dd4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.land-feature-icon img {
  /* figma 1920 — icon image 가변 (65×73, 70×73, 60×67) 평균 65×71 */
  width: 65px;
  height: 71px;
  object-fit: contain;
}

.land-feature-text {
  /* figma 1920 777:6538 — font 24 Regular, leading 20, ls -0.2 */
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 20px;
  color: #ffffff;
  letter-spacing: -0.2px;
}

/* PC / Mobile 분기 — PC 영문 1줄, 모바일 영문 \n으로 2줄 */
.land-feature-text-pc {
  display: block;
  /* features inner 477px 폭이 영문 text 너비보다 좁아 자동 wrap되는 것 차단 */
  white-space: nowrap;
}

.land-feature-text-mobile {
  display: none;
}

/* ── 4) 플랫폼 카드 ──────────────────────────────────────── */
.land-platforms {
  /* figma 1920 777:6563 — y=5165, h=1489. padding-top 207, padding-bottom 213 */
  background: #505364;
  padding: 207px 24px 213px;
  position: relative;
}

.land-platforms-header {
  /* figma 1920 — header end (desc end 5551) → cards y=5652 = 101 gap */
  margin-bottom: 101px;
}

.land-platforms-controls {
  /* figma 1920 777:6609 — slider w=181 (button 80×80 + gap 21).
     desc end y=5551, slider y=5543 → 거의 동일 라인 (실제 -80px margin으로 header 위로 끌어올림) */
  display: flex;
  justify-content: flex-end;
  gap: 21px;
  max-width: 1410px;
  margin: -80px auto 21px;
  position: relative;
  z-index: 1;
}

.land-slider-btn {
  /* figma 1920 — button 80×80 */
  width: 80px;
  height: 80px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.land-slider-btn img {
  width: 80px;
  height: 80px;
}

/* prev 버튼은 좌측 화살표가 되도록 수평 뒤집기 */
.land-platforms-controls .land-slider-btn--prev img {
  transform: scaleX(-1);
}

/* prev/next 버튼 disabled/hover/active/focus 시각 효과 모두 제거 — 기본 상태와 동일하게 표시 */
.land-slider-btn--prev,
.land-slider-btn--prev:hover,
.land-slider-btn--prev:active,
.land-slider-btn--prev:focus,
.land-slider-btn--prev:disabled,
.land-slider-btn--next,
.land-slider-btn--next:hover,
.land-slider-btn--next:active,
.land-slider-btn--next:focus,
.land-slider-btn--next:disabled {
  background: none;
  opacity: 1;
  outline: none;
  box-shadow: none;
  cursor: pointer;
}

.land-platforms-cards {
  /* figma 1920 — 카드 영역 w=1410, 2 카드 × 669 + gap 72 = 1410 */
  display: flex;
  gap: 72px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1410px;
  margin: 0 auto;
}

.land-platform-card {
  /* figma 1920 777:6572 — w=669, h=789, bg #272729, radius 16 */
  width: 669px;
  height: 789px;
  background: #272729;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* figma 흰 박스 (카드 상단 0~550): image + title + desc 포함 */
.land-platform-card-white {
  /* figma 1920 777:6574 — w=669, h=550. image y=5687 (카드 내 35) */
  height: 550px;
  background: #ffffff;
  border-radius: 16px;
  padding: 35px 0 0;
  flex-shrink: 0;
  box-sizing: border-box;
}

.land-platform-card-img-wrap {
  /* figma 1920 777:6589 — w=419, h=300 */
  width: 419px;
  height: 300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.land-platform-card-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.land-platform-card-title {
  /* figma 1920 777:6575 — font 24 Bold, leading 36, color #272729, text-center.
     image end (5687+300=5987) → title y=6001 = margin-top 14 */
  margin: 14px 0 0;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #272729;
}

.land-platform-card-desc {
  /* figma 1920 777:6576 — font 20 Regular, leading 30, ls -0.2, color #505364, text-center.
     title end (6001+73=6074) → desc y=6097 = margin-top 23 */
  margin: 23px 110px 0;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.2px;
  color: #505364;
}

/* PC / Mobile 분기 — figma 모바일 781:8055 영문 desc는 3줄 (PC는 2줄) */
.land-platform-card-desc-pc {
  display: block;
}

.land-platform-card-desc-mobile {
  display: none;
}

/* 회색 영역 (카드 550~789, h=239): stats
   figma 1920 — stats container y=6256.99, padding-top 55 (- 흰박스 end 6202), padding-bottom 52 */
.land-platform-stats {
  padding: 55px 63px 52px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 1;
  box-sizing: border-box;
}

.land-platform-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.land-platform-stat-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
}

.land-platform-stat-label {
  /* figma 1920 777:6581 — font 24 Bold, leading 32, color white, box h=23.72 */
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  line-height: 24px;
}

.land-platform-stat-caption {
  /* figma 1920 777:6582 — font 18, color #999, leading 32, box h=21 */
  margin: 0;
  font-size: 18px;
  color: #999999;
  line-height: 21px;
}

.land-platform-stat-value {
  /* figma 1920 777:6583 — font 32, color #afce35, leading 32, ls -0.096, text-right */
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  color: #afce35;
  line-height: 32px;
  letter-spacing: -0.096px;
  text-align: right;
}

/* ── 5) 페르소나 ────────────────────────────────────────── */
.land-personas {
  /* figma 1920 777:6616 — y=6654, h=1200. padding-top 189 (title y=6843), padding-bottom 189 (illust end 7665) */
  background: #ffffff;
  height: 1200px;
  padding: 189px 24px 189px;
  text-align: center;
  box-sizing: border-box;
}

/* 페르소나 한정 강조 색상 (figma #9ec014, 흰 배경 위 짙은 녹색) */
.land-personas-title .land-text-green {
  color: #9ec014;
}

/* PC / Mobile 분기 — figma 모바일 781:8043 영문 personas title은 2줄 강제 */
.land-personas-title-pc {
  display: block;
}

.land-personas-title-mobile {
  display: none;
  white-space: pre-line;
}

/* PC / Mobile 분기 — figma 모바일 781:8112 영문 faq subtitle은 2줄 */
.land-faq-subtitle-pc {
  display: block;
}

.land-faq-subtitle-mobile {
  display: none;
}

/* PC / Mobile 분기 — figma 모바일 781:8165/8173/8181/8189/8197/8205 영문 FAQ 답변 line break */
.land-faq-answer-body-pc {
  display: block;
}

.land-faq-answer-body-mobile {
  display: none;
}

.land-personas-title {
  /* figma 1920 777:6618 — font 60 ExtraBold, leading 60, ls -0.5, color #303030, h=98.
     margin-bottom = desc y(6977) - title end(6941) = 36 */
  margin: 0 0 36px;
  font-size: 60px;
  font-weight: 800;
  line-height: 60px;
  letter-spacing: -0.5px;
  color: #303030;
}

.land-personas-desc {
  /* figma 1920 777:6619 — font 26 Regular, leading 40, ls -0.2, color #505364.
     margin-bottom = illust y(7151) - desc end(7050) = 101 */
  margin: 0 0 101px;
  font-size: 26px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: -0.2px;
  color: #505364;
}

.land-personas-img-wrap {
  /* figma 1920 777:6620 — w=708 */
  margin: 0 auto;
  max-width: 708px;
}

.land-personas-img {
  /* figma 1920 — h=514 */
  width: 100%;
  height: 514px;
  display: block;
  object-fit: contain;
}

/* ── 6) FAQ ─────────────────────────────────────────────── */
.land-faq {
  /* figma 1920 777:6621 — x=292, y=8010, w=1336, h=858. 좌우 padding 292.
     prev (페르소나 end 7854) → FAQ start 8010 = padding-top 156.
     next (CTA y=9034) - FAQ end (8868) = padding-bottom 166. gap 좌~우 = 918-872 = 46 */
  background: #272729;
  padding: 156px 292px 166px;
  display: flex;
  gap: 46px;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
}

.land-faq-left {
  flex: 0 0 580px;
  padding-top: 321px;
  display: flex;
  flex-direction: column;
}

.land-faq-bubble {
  /* figma 1920 782:9439 — w=394, h=262 (이전 580×421에서 축소) */
  width: 394px;
  max-width: 100%;
  height: auto;
  margin: -17px 0 0 0;
  object-fit: contain;
}

.land-faq-brand {
  /* figma 1920 777:6662 — font 60 ExtraBold, ls 0.5 (1440의 2px와 다름), color #f1f1f1 + DAO #afce35.
     margin-bottom = subtitle y(8264) - brand end(8247) = 17 */
  margin: 0 0 17px;
  font-size: 60px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.land-faq-subtitle {
  /* figma 1920 777:6664 — font 24 Regular, leading 34, color white */
  margin: 0;
  font-size: 24px;
  line-height: 34px;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.land-faq-list {
  /* figma 1920 — Q items gap 25 (8308-(8010+273)), max-width 710 (Q card w) */
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 25px;
  max-width: 710px;
}

.land-faq-item {
  border-radius: 15px;
  background: #f1f1f1;
  overflow: hidden;
  transition: background 0.18s ease, border-color 0.18s ease;
  border: 2.5px solid transparent;
  box-sizing: border-box;
}

.land-faq-item--open {
  background: #272729;
  border-color: #e34b5d;
}

.land-faq-toggle {
  /* figma 1920 — card w=710 h=92. icon (777:6634) y=8329 → top padding 21, bottom padding 21.
     q text는 align-items center로 자동 수직 가운데. left padding 50, right padding 20 (icon~card right) */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 21px 20px 21px 50px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.land-faq-item--open .land-faq-toggle {
  padding-bottom: 22px;
}

.land-faq-question {
  /* figma 1920 777:6628 — font 24 Bold, leading 28, color #303030 (open: #f1f1f1) */
  flex: 1;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: #303030;
  padding-right: 20px;
}

.land-faq-item--open .land-faq-question {
  color: #f1f1f1;
}

.land-faq-icon {
  /* figma 1920 777:6625/6633/등 — 50×50 */
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.land-faq-icon img {
  width: 50px;
  height: 50px;
}

.land-faq-answer {
  /* figma 1920 — answer text w=554, card w=710 → 좌 50, 우 106.
     separator는 별도 .land-faq-answer-divider div로 처리 (figma 777:6630 Line52)
     padding-top 0 (divider가 top), padding-bottom 38, 좌 50, 우 106. */
  padding: 0 106px 38px 50px;
  margin: 0;
}

/* figma 777:6630 separator — answer 상단 divider line. answer padding 안쪽 (좌 50, 우 106) */
.land-faq-answer-divider {
  /* divider~answer text gap 38 (separator y=8092 → answer y=8130) */
  height: 1px;
  background: rgba(241, 241, 241, 0.3);
  margin: 0 0 38px;
}

.land-faq-answer-strong {
  margin: 0 0 4px;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: #f1f1f1;
}

.land-faq-answer-line {
  margin: 0;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: #f1f1f1;
  white-space: pre-wrap;
  word-break: keep-all;
}

.land-faq-answer-line:empty {
  height: 14px;
}

/* ── 7) 하단 CTA ────────────────────────────────────────── */
.land-bottom-cta {
  /* figma 1920 782:9444 — y=9034, h=250, bg #ffffff. padding-top 63 / bottom 62 (image y=9097 - bg y=9034 = 63) */
  background: #ffffff;
  height: 250px;
  padding: 63px 0 62px;
  box-sizing: border-box;
}

.land-bottom-cta-inner {
  /* figma 1920 782:9446 image 128×125 + gap 53 (text x=622 - image end x=569) + 782:9447 text w=859 h=102.
     inner h=125 (63 + 125 + 62 = 250) */
  background: #ffffff;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 53px;
  height: 125px;
  max-width: 1041px;
  margin: 0 auto;
  box-sizing: border-box;
}

.land-bottom-cta-img {
  /* figma 1920 782:9446 — w=128, h=125 */
  flex-shrink: 0;
  width: 128px;
  height: 125px;
  object-fit: contain;
}

.land-bottom-cta-text {
  /* figma 1920 777:6669 — font 28 Bold, leading 32, ls -0.3, color #303030 */
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  color: #303030;
  letter-spacing: -0.3px;
}

/* ── ≤1440 시안 보존 (PC base는 1920, 1440 이하는 기존 1440 시안) ─────── */
@media (max-width: 1440px) {
  /* Phase 1: Hero — 기존 1440 시안 보존 */
  .land-hero {
    height: 929px;
  }

  .land-hero-bg {
    height: 929px;
  }

  .land-hero-content {
    max-width: 1440px;
    padding: 149px 8% 0;
  }

  .land-hero-title {
    font-size: 50px;
    line-height: 70px;
    margin-bottom: 19px;
  }

  .land-hero-desc {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 43px;
  }

  .land-hero-actions {
    gap: 13px;
  }

  .land-pill-btn {
    height: 50px;
    min-width: 207px;
    padding: 0 25px;
  }

  .land-pill-btn img {
    width: 18px;
    height: 18px;
  }

  /* Phase 2: 섹션 헤더 + 인트로 카드 — 1440 시안 보존 */
  .land-section-header {
    margin-bottom: 78px;
  }

  .land-section-brand {
    font-size: 50px;
    margin-bottom: 25px;
  }

  .land-section-title {
    font-size: 50px;
    margin-bottom: 42px;
  }

  .land-section-title--brand {
    font-size: 50px;
  }

  .land-section-desc {
    font-size: 24px;
    line-height: 36px;
  }

  .land-intro {
    padding: 163px 24px 164px;
  }

  .land-cards-row {
    gap: 39px;
    max-width: 1239px;
  }

  .land-card {
    width: 387px;
    height: 503px;
    padding: 66px 30px 36px;
  }

  .land-card-icon {
    width: 179px;
    height: 163px;
    margin-bottom: 50px;
  }

  .land-card-title {
    font-size: 32px;
    margin-bottom: 18px;
  }

  .land-card-desc {
    font-size: 18px;
    line-height: 24px;
  }

  .land-card-btn {
    gap: 5px;
    height: 45px;
    padding: 0 28px;
    font-size: 18px;
    margin-top: 40px;
  }

  .land-card-btn img {
    width: 15px;
    height: 15px;
  }

  /* Phase 3: AI era + features — 1440 시안 보존 */
  .land-ai-era {
    height: 1705px;
    padding: 0 0 140px;
  }

  .land-ai-era-scale {
    height: 729px;
  }

  .land-ai-era-scale img {
    width: 1114px;
    height: 743px;
  }

  .land-ai-era-content {
    margin-top: 97px;
  }

  .land-ai-era-title {
    margin-bottom: 13px;
    min-height: 94px;
    font-size: 50px;
  }

  .land-ai-era-desc {
    margin-bottom: 47px;
    font-size: 24px;
  }

  .land-features {
    margin-top: 64px;
    max-width: 928px;
    height: 438px;
    padding: 59px 195px;
    gap: 41px;
  }

  .land-feature {
    gap: 34px;
    height: 80px;
  }

  .land-feature-icon {
    width: 80px;
    height: 80px;
  }

  .land-feature-icon img {
    width: 56px;
    height: 56px;
  }

  .land-feature-text {
    font-size: 20px;
  }

  .land-pill-btn--center {
    width: auto;
    height: 50px;
    min-width: 207px;
    padding: 0 36px;
  }

  .land-pill-btn--center img {
    width: 15px;
    height: 15px;
  }

  /* Phase 4: 플랫폼 — 1440 시안 보존 */
  .land-platforms {
    padding: 155px 24px 157px;
  }

  .land-platforms-header {
    margin-bottom: 13px;
  }

  .land-platforms-controls {
    max-width: 1123px;
    margin: 0 auto 30px;
  }

  .land-slider-btn,
  .land-slider-btn img {
    width: 60px;
    height: 60px;
  }

  .land-platforms-cards {
    gap: 89px;
    max-width: 1123px;
  }

  .land-platform-card {
    width: 517px;
    height: 597px;
  }

  .land-platform-card-white {
    height: 412px;
    padding: 18px 0 0;
  }

  .land-platform-card-img-wrap {
    width: 335px;
    height: 240px;
  }

  .land-platform-card-title {
    margin: 8px 66px 0;
    font-size: 22px;
    line-height: 32px;
  }

  .land-platform-card-desc {
    margin: 14px 66px 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
  }

  .land-platform-stats {
    padding: 36px 55px 33px;
    gap: 26px;
  }

  .land-platform-stat-text {
    gap: 4px;
  }

  .land-platform-stat-label {
    font-size: 22px;
    line-height: 20px;
  }

  .land-platform-stat-caption {
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.14px;
  }

  .land-platform-stat-value {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.084px;
  }

  /* Phase 5: 페르소나 — 1440 시안 보존 */
  .land-personas {
    height: 1051px;
    padding: 109px 24px 102px;
  }

  .land-personas-title {
    margin-bottom: 30px;
    font-size: 50px;
  }

  .land-personas-desc {
    margin-bottom: 60px;
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    color: #8f8f8f;
  }

  .land-personas-img-wrap {
    max-width: 796px;
  }

  /* Phase 6: FAQ — 1440 시안 보존 */
  .land-faq {
    padding: 151px 128px 152px;
    gap: 109px;
  }

  .land-faq-left {
    flex: 0 0 455px;
    padding-top: 229px;
  }

  .land-faq-bubble {
    width: 455px;
    margin: -4px 0 0 -53px;
  }

  .land-faq-brand {
    font-size: 55px;
    letter-spacing: 2px;
    margin-bottom: 14px;
  }

  .land-faq-list {
    gap: 19px;
    max-width: 620px;
  }

  .land-faq-question {
    font-size: 22px;
  }

  .land-faq-icon,
  .land-faq-icon img {
    width: 42px;
    height: 42px;
  }

  .land-faq-answer {
    padding: 0 94px 26px 50px;
  }

  .land-faq-answer-divider {
    margin: 0 0 21px;
  }

  /* Phase 7: 하단 CTA — 1440 시안 보존 */
  .land-bottom-cta {
    background: #272729;
    padding: 0 62px 65px;
  }

  .land-bottom-cta-inner {
    padding: 34px 161px;
    gap: 80px;
    height: 220px;
    max-width: 1316px;
  }

  .land-bottom-cta-img {
    width: 155px;
    height: 152px;
  }
}

/* ── 모바일 반응형 ≤1200px ───────────────────────────────── */
@media (max-width: 1200px) {
  .land-hero {
    /* figma 모바일 770:4416 Rectangle 4412: w=376, h=473 고정 */
    height: 473px;
    min-height: 473px;
  }

  .land-hero-bg {
    width: 100%;
    height: 473px;
  }

  .land-hero-content {
    /* figma 모바일 777:5684 — content w=376 전폭 (좌우 padding 0). text-center로 가운데 정렬 */
    padding: 112px 0 112px;
    text-align: center;
  }

  .land-hero-title {
    font-size: 32px;
    line-height: 48px;
    letter-spacing: 0.5px;
    margin-bottom: 40px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  }

  /* 모바일 영문 figma 777:5686은 단일 텍스트 (자동 wrap, <br/> 없음) — spans inline 처리 */
  .land-hero-title-line {
    display: inline;
  }

  /* 모바일 한글 figma 777:5301은 "AI는 허락을 배우고" / "세상은 공존을 배운다" 두 줄 강제 — 영문은 inline 유지 */
  .land-hero-title-mobile--ko .land-hero-title-line {
    display: block;
  }

  /* PC/Mobile 분기 toggle — 모바일에서는 mobile 버전만 노출 */
  .land-hero-title-pc,
  .land-hero-desc-pc {
    display: none;
  }

  .land-hero-title-mobile,
  .land-hero-desc-mobile {
    display: block;
  }

  .land-hero-desc {
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: -0.2px;
    margin-bottom: 40px;
    text-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
  }

  .land-hero-actions {
    flex-direction: row;
    gap: 8px;
    max-width: 268px;
    margin: 0 auto;
    flex-wrap: nowrap;
    justify-content: center;
  }

  .land-pill-btn {
    /* figma 모바일 btn — width text 길이에 따라 가변 (한글 ~130, 영문 116/179).
       flex 0 0 auto + max-width 없음 → 콘텐츠 폭. padding 좌우 16 (figma), gap 5 */
    height: 30px;
    min-width: 0;
    flex: 0 0 auto;
    max-width: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    padding: 0 16px;
    gap: 5px;
  }

  .land-pill-btn img {
    width: 12px;
    height: 12px;
  }

  .land-pill-btn--center img {
    width: 12px;
    height: 12px;
  }

  /* 모바일 섹션 헤더 — intro 헤더 spacing */
  .land-section-header {
    margin-bottom: 42px;
  }

  .land-section-brand {
    /* figma 770:4470 모바일: NanumGothicOTF ExtraBold, 32px, leading normal, tracking 0.5,
       box h=70.79, "CoReset" white + "DAO" #afce35
       gap 0.25em — flex item 두 spans 사이 띄어쓰기 보존 */
    min-height: 71px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    font-size: 32px;
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0.5px;
    margin-bottom: 0;
  }

  /* 모바일 split 복원 — figma 770:4470 "CoReset" white + "DAO" #afce35 */
  .land-section-brand .land-text-white {
    color: #f1f1f1;
  }

  .land-section-title {
    /* figma 770:4471 모바일 box h=43.09, font 24 Bold, leading 30 (영문 781:8032은 leading 36 2줄) */
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: -0.5px;
    margin-bottom: 13px;
  }

  /* PC/Mobile toggle */
  .land-section-title-pc {
    display: none;
  }

  /* figma 한국어 모바일 781:6883 — leading 30 (1줄 강제, 자동 wrap 차단) */
  .land-section-title-mobile {
    display: block;
    line-height: 30px;
    white-space: nowrap;
  }

  /* figma 영문 모바일 781:8032 — leading 36 (2줄 강제), \n 줄바꿈 허용 */
  .land-section-title-mobile--en {
    line-height: 36px;
    white-space: normal;
  }

  /* figma 770:4488 모바일 platforms brand:
     box h=69, font 36 ExtraBold, letter-spacing 0.5, "CoReset" white + "DAO" #afce35 */
  .land-section-title--brand {
    min-height: 69px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.5px;
  }

  .land-section-desc {
    /* figma 770:4472 모바일 box h=40, font 14 Bold, leading 22 (한국어 시안) */
    min-height: 40px;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: -0.2px;
  }

  /* figma 영문 모바일 781:8033 — NanumGothic Regular (한국어 Bold와 다름) */
  .land-section-desc--en {
    font-weight: 400;
  }

  /* PC/Mobile platform desc toggle — figma 781:8049 영문 3줄 매칭 */
  .land-platform-desc-pc {
    display: none;
  }

  .land-platform-desc-mobile {
    display: block;
  }

  /* 카드 섹션 */
  .land-intro {
    padding: 64px 20px 65px;
  }

  .land-cards-row {
    flex-direction: column;
    align-items: center;
    gap: 31px;
  }

  .land-card {
    /* figma 한국어 모바일 781:6938 — w=333, h=337.53 (≈338), padding-top 32 (32-857.29+889) */
    width: 100%;
    max-width: 333px;
    height: 338px;
    min-height: 0;
    padding: 32px 0 27px;
  }

  .land-card-icon {
    /* figma 한국어 모바일 781:6947 — w=116, h=105 (icon h=105, gap to title 23) */
    width: 116px;
    height: 105px;
    margin-bottom: 23px;
  }

  .land-card-title {
    font-size: 26px;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
  }

  .land-card-desc {
    /* figma 한국어 모바일 781:6946 ~ 781:6940 gap 21.39 (≈22) — base의 margin-bottom: auto 제거 */
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: -0.2px;
  }

  .land-card-btn {
    /* figma 모바일 781:8101 — bg h=30, text 781:8104 leading 17 + top 8 + bottom 7 → padding top/bottom 7
       padding-based로 명시적 30px 확보 (height: 30 + flex가 어떤 cascade로 17px만 적용되는 이슈 회피) */
    font-size: 14px;
    line-height: 17px;
    height: auto;
    min-height: 30px;
    margin-top: 22px;
    padding: 7px 21px;
    gap: 4px;
  }

  /* figma 모바일 카드 CTA icon 781:8094/8105 — 14×14 (base 22에서 override) */
  .land-card-btn img {
    width: 14px;
    height: 14px;
  }

  /* AI era — figma 모바일 770:4434 height 848, mask 376×448, 화면 전폭 */
  .land-ai-era {
    height: auto;
    padding: 0 0 54px;
  }

  .land-ai-era-scale {
    /* figma 770:4437 mask x=-1 w=376 → 화면 전폭. height 100% (콘텐츠/부모 따라) */
    height: 100%;
    margin-left: -1px;
    width: calc(100% + 2px);
  }

  .land-ai-era-scale img {
    /* figma 770:4438 모바일 명시 고정값 446×298. mask 안 가운데 정렬 */
    width: 446px;
    height: 298px;
    margin: 0;
  }

  .land-ai-era-content {
    /* figma 모바일 title/desc 전폭(w=376) → padding 0, text-center로 가운데 */
    margin-top: 22px;
    padding: 0;
    box-sizing: border-box;
  }

  .land-ai-era-title {
    /* figma 770:4440 모바일 box h=58, font 24, leading 30, letter-spacing 명시 없음 = 0 */
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0;
    margin-bottom: 8px;
    word-break: keep-all;
  }

  .land-ai-era-desc {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 13px;
    word-break: keep-all;
  }

  /* PC/Mobile toggle — 모바일에서는 mobile 버전 노출 */
  .land-ai-era-desc-pc {
    display: none;
  }

  .land-ai-era-desc-mobile {
    display: block;
  }

  /* AI era CTA (--center) — 모바일 figma 121×30, font 12, color #303030
     hero pill의 flex:1 상속 차단 (--center는 가운데 고정폭 버튼) */
  .land-pill-btn--center {
    flex: none;
    min-width: 0;
    max-width: 121px;
    padding: 0 24px;
    font-size: 12px;
    color: #303030;
  }

  /* figma 모바일 777:5324 — AI era CTA 버튼은 화살표 없음 (텍스트만) */
  .land-pill-btn--center img {
    display: none;
  }

  .land-features {
    /* figma 770:4448 모바일 container x=8 w=359 → 화면 폭 376에서 좌우 8 여백 */
    margin-top: 37px;
    margin-left: auto;
    margin-right: auto;
    max-width: 359px;
    width: calc(100% - 16px);
    height: auto;
    padding: 31px 17px;
    border-radius: 5px;
    gap: 24px;
  }

  .land-feature {
    height: 55px;
    gap: 10px;
  }

  .land-feature-icon {
    width: 55px;
    height: 55px;
  }

  .land-feature-icon img {
    width: 33px;
    height: 36px;
  }

  .land-feature-text {
    /* 좌측 정렬 통일 (한국어/영문 모두) — 부모 .land-ai-era-content text-align: center 상속 차단 */
    text-align: start;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.2px;
    word-break: keep-all;
  }

  /* figma 영문 모바일 781:8012/8017/8029 — NanumGothic Regular (한국어 Bold와 다름) */
  .land-feature-text--en {
    font-weight: 400;
  }

  /* PC/Mobile toggle */
  .land-feature-text-pc {
    display: none;
  }

  .land-feature-text-mobile {
    display: block;
  }

  /* Platforms — figma 모바일: 영역 769, 카드 333.89×451, 흰박스 300.34 */
  .land-platforms {
    padding: 58px 20px 58px;
  }

  .land-platforms-header {
    margin-bottom: 38px;
  }

  .land-platforms-controls {
    gap: 11px;
    margin-bottom: 12px;
  }

  .land-slider-btn,
  .land-slider-btn img {
    width: 40px;
    height: 40px;
  }

  /* 모바일에도 prev/next 버튼 disabled/hover/active/focus 시각 효과 모두 제거 */
  .land-slider-btn--prev,
  .land-slider-btn--prev:hover,
  .land-slider-btn--prev:active,
  .land-slider-btn--prev:focus,
  .land-slider-btn--prev:disabled,
  .land-slider-btn--next,
  .land-slider-btn--next:hover,
  .land-slider-btn--next:active,
  .land-slider-btn--next:focus,
  .land-slider-btn--next:disabled {
    background: none;
    opacity: 1;
    outline: none;
    box-shadow: none;
    cursor: pointer;
  }

  .land-platforms-cards {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  /* 모바일에서는 한 번에 1개 카드만 표시, 슬라이더 화살표로 prev/next */
  .land-platform-card {
    display: none;
  }

  .land-platform-card.land-platform-card--active {
    display: flex;
  }

  /* 카드 높이는 figma 기준이되 콘텐츠 wrap 시 늘어날 수 있게 min-height + auto */
  .land-platform-card {
    width: 100%;
    max-width: 333px;
    height: auto;
    min-height: 451px;
  }

  .land-platform-card-white {
    height: auto;
    min-height: 300px;
    padding: 23px 0 0;
  }

  .land-platform-card-img-wrap {
    width: 274px;
    height: 196px;
    margin: 0 auto;
    padding: 0;
  }

  .land-platform-card-title {
    margin: 7px 0 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    color: #272729;
  }

  /* figma 영문 모바일 781:8054 — font 18 Bold, leading 24, color #505364 (한국어와 다름) */
  .land-platform-card-title--en {
    font-size: 18px;
    line-height: 24px;
    color: #505364;
  }

  /* figma 모바일은 desc 없음 — 흰박스 안 title만 (한국어 시안 기본) */
  .land-platform-card-desc {
    display: none;
  }

  /* figma 영문 모바일 781:8055 — desc 노출 + 3줄 + NanumGothic Regular 14/20 #505364.
     흰박스 내부 padding-bottom — figma desc end(y=3822) ~ 흰박스 end(y=3845) = 23 */
  .land-platform-card-desc.land-platform-card-desc--en {
    display: block;
    margin: 7px 0 0;
    padding-bottom: 23px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #505364;
  }

  /* PC/Mobile wrapper toggle (영문 desc 내부) */
  .land-platform-card-desc-pc {
    display: none;
  }

  .land-platform-card-desc-mobile {
    display: block;
  }

  .land-platform-stats {
    padding: 30px 29px 30px;
    gap: 23px;
  }

  .land-platform-stat-text {
    gap: 0;
  }

  .land-platform-stat-label {
    font-size: 14px;
    line-height: 18px;
  }

  .land-platform-stat-caption {
    font-size: 11px;
    line-height: 16px;
    letter-spacing: -0.055px;
  }

  .land-platform-stat-value {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.066px;
  }

  /* Personas — figma 모바일: 영역 583, title font 32 line-height 46 */
  .land-personas {
    height: 583px;
    padding: 61px 0 49px;
  }

  .land-personas-title {
    /* figma 770:4482 모바일 2줄 강제 — em1의 \n을 줄바꿈으로 인식 */
    font-size: 32px;
    line-height: 46px;
    white-space: pre-line;
    word-break: keep-all;
  }

  /* PC/Mobile toggle — 영문 781:8043 모바일 2줄, PC 1줄 */
  .land-personas-title-pc {
    display: none;
  }

  .land-personas-title-mobile {
    display: block;
  }

  .land-personas-desc {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 48px;
    word-break: keep-all;
  }

  /* figma 모바일 777:5365 — illust 이미지 370×269 고정 */
  .land-personas-img-wrap {
    max-width: 370px;
  }

  .land-personas-img {
    height: 269px;
  }

  /* FAQ — figma 모바일: bubble 위 → brand → subtitle → list. radius 5, 1.5px border */
  .land-faq {
    flex-direction: column;
    padding: 38px 17px 48px;
    gap: 0;
    align-items: center;
  }

  .land-faq-left {
    flex: none;
    padding-top: 0;
    text-align: center;
    align-items: center;
    width: 100%;
    margin-bottom: 40px;
  }

  /* 모바일은 figma에서 bubble이 brand 위 → CSS order로 위로 */
  .land-faq-bubble {
    order: -1;
    width: 270px;
    margin: 0 auto -13px;
  }

  .land-faq-brand {
    /* figma 770:4549 모바일: box h=69, font 36 ExtraBold, "CoReset DAO" 전체 white,
       gap 0.25em — flex spans 사이 띄어쓰기 보존 */
    min-height: 69px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    font-size: 36px;
    letter-spacing: 0.5px;
    margin-bottom: -6px;
  }

  /* 모바일 figma faq-brand는 DAO도 white (데스크탑은 #afce35 녹색) */
  .land-faq-brand .land-text-green {
    color: #f1f1f1;
  }

  .land-faq-subtitle {
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: -0.2px;
  }

  /* PC/Mobile toggle — 영문 781:8112 모바일 2줄 */
  .land-faq-subtitle-pc {
    display: none;
  }

  .land-faq-subtitle-mobile {
    display: block;
  }

  /* PC/Mobile toggle — FAQ 답변 line break */
  .land-faq-answer-body-pc {
    display: none;
  }

  .land-faq-answer-body-mobile {
    display: block;
  }

  .land-faq-list {
    width: 100%;
    gap: 14px;
    max-width: 100%;
  }

  .land-faq-item {
    border-radius: 5px;
    border-width: 1.5px;
  }

  .land-faq-item--open {
    border-color: #e44558;
  }

  .land-faq-toggle {
    /* 모든 박스 동일 height 60으로 통일. q2 2줄 wrap도 fit: line-height 20 × 2 + padding 10 × 2 = 60 */
    padding: 10px 11px 10px 17px;
    min-height: 60px;
    box-sizing: border-box;
  }

  .land-faq-item--open .land-faq-toggle {
    padding-bottom: 11px;
    min-height: 0;
  }

  .land-faq-question {
    /* figma 781:8115 leading 20 — 2줄 wrap도 60 박스 안에 fit */
    font-size: 14px;
    line-height: 20px;
    padding-right: 10px;
    word-break: keep-all;
  }

  .land-faq-icon,
  .land-faq-icon img {
    width: 30px;
    height: 30px;
  }

  .land-faq-answer {
    padding: 0 17px 18px;
    margin: 0;
  }

  .land-faq-answer-divider {
    margin: 0 0 11px;
  }

  .land-faq-answer-strong,
  .land-faq-answer-line {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: -0.2px;
    word-break: keep-all;
  }

  .land-faq-answer-line {
    font-weight: 400;
  }

  /* Bottom CTA — figma 모바일: 영역 376×115, image+text 가로 배치 */
  .land-bottom-cta {
    padding: 0 0 68px;
  }

  .land-bottom-cta-inner {
    flex-direction: row;
    text-align: left;
    padding: 22px 38px 17px;
    gap: 28px;
    height: 115px;
    max-width: none;
    border-radius: 0;
    align-items: center;
  }

  .land-bottom-cta-img {
    width: 78px;
    height: 76px;
  }

  .land-bottom-cta-text {
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.3px;
    word-break: keep-all;
  }
}

/* (≥1441px 미디어쿼리 hero-content 룰 제거 — PC base 1920 시안에 통합) */


/* ============================================================
   글로벌 헤더 / 모바일 햄버거 드롭다운 — land-* 의존 클래스 복원
   (src/_container/_common/header/header.tsx 와
    src/_container/_common/header/_component/sidebar-mobile.tsx 가 의존)
============================================================ */

/* 모바일 헤더 — 홈일 때 로고 wrapper */
.land-nav-logo {
  display: inline-flex;
  align-items: center;
}

/* 데스크탑 헤더 우측 액션 영역 — 비로그인 시 지갑연결 버튼 wrapper */
.land-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 메타마스크 지갑 연결 버튼 (데스크탑 헤더) */
.land-btn--metamask {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  background: #f1f1f1;
  color: #303030;
  border: 1px solid #e8e8e8;
  border-radius: 50px;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.land-btn--metamask:hover {
  background: #e8e8e8;
}

.land-btn-metamask-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* 모바일 햄버거 드롭다운 — 오버레이 + 드롭다운 컨테이너 */
.land-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.land-menu-overlay-bg {
  position: absolute;
  inset: 0;
  background: rgba(48, 48, 48, 0.7);
  cursor: pointer;
}

.land-menu-dropdown {
  position: absolute;
  top: 70px;
  right: 0;
  width: 250px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 활성 링크 wrapper (흰 배경) */
.land-menu-links {
  background: #ffffff;
}

/* 비활성 링크 wrapper (어두운 반투명) */
.land-menu-links-dark {
  background: rgba(60, 60, 60, 0.95);
}

.land-menu-link {
  display: block;
  padding: 18px 35px;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

.land-menu-link:hover {
  color: #afce35;
}

.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-btns {
  background: rgba(60, 60, 60, 0.95);
  padding: 18px 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.land-menu-btn--metamask {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  background: #f1f1f1;
  color: #303030;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.land-menu-btn--metamask:hover {
  background: #e8e8e8;
}

/* OWNER 전용 의장실 버튼 (드롭다운 안) */
.mobile-chair-btn--main {
  width: 100%;
  height: 46px;
  background: #afce35;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.mobile-chair-btn--main:hover {
  background: #9ec014;
}

/* "이용방법" 서브메뉴 확장 — Figma 995:8514 */
.land-menu-link--has-subs {
  border-bottom: 0 !important;
  padding-bottom: 14px;
}
.land-menu-sub-list {
  list-style: none;
  margin: 0;
  padding: 0 35px 22px 35px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.land-menu-sub-item {
  margin: 0;
  padding: 0;
}
.land-menu-sub-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: #adadad;
}
.land-menu-sub-btn:hover {
  color: #303030;
}
.land-menu-sub-item--active .land-menu-sub-btn {
  color: #3b3b3b;
}
.land-menu-sub-dot {
  display: inline-flex;
  flex-shrink: 0;
  width: 6px;
  justify-content: center;
  line-height: 22px;
}


/* ============================================================
   지갑 연결 모달 (wc- 접두사)
   피그마: 301:165 — 350×500px 모달
============================================================ */

/* SweetAlert2 가 wallet 계열 오버레이(.wc/wt/we/wd/wl-overlay, z:9999) 위에 뜨도록 */
.swal2-container {
  z-index: 10500 !important;
}

/* ── 오버레이 (반투명 배경) ─────────────────────────────────── */
.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;
  }
  /* 모달 내부 좌우 padding 축소 */
  .we-modal {
    padding: 36px 18px 22px;
  }
  /* 인증코드 row 의 좌우 47/48 padding 제거 — 좁은 화면에서 input 이 사라지는 원인 */
  .we-code-row {
    padding: 0;
  }
  /* 버튼 너비 살짝 축소해 input 영역 확보 */
  .we-btn--send {
    width: 96px;
    font-size: 13px;
  }
  .we-btn--verify {
    width: 64px;
    font-size: 12px;
  }
  /* 재전송 영역 gap 축소 */
  .we-resend-row {
    gap: 12px;
  }
  /* 에러 메시지 좌측 정렬을 input 시작점과 맞춤 (padding 좌측 0 으로 변경) */
  .we-error {
    padding-left: 0;
  }
  /* 메타마스크 서명 버튼 — 좁은 화면에선 가로 가득 채우되 너무 길지 않게 */
  .we-submit {
    width: 100%;
    max-width: 240px;
  }
}


/* ============================================================
   지갑 등록 완료 모달 (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;
}

.sam-row-user {
  grid-template-rows: auto auto;
  height: auto;
  padding: 8px 0;
  row-gap: 4px;
  height: 50px;
}

/* 짝수 데이터 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: #636678;
  }

  /* 헤더 두 번째 줄 */
  .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: #505364;
  }

  /* ── 옵션 테이블 모바일 2행 그리드 ────────────────────────── */
  .sam-row-option {
    grid-template-columns: minmax(0, 0.6fr) minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas:
      "no option-id option-title snapshot"
      "target-count score status date";
  }

  .sam-row-option .sam-cell[data-col="no"]           { grid-area: no; }
  .sam-row-option .sam-cell[data-col="option-id"]    { grid-area: option-id; }
  .sam-row-option .sam-cell[data-col="option-title"] { grid-area: option-title; }
  .sam-row-option .sam-cell[data-col="snapshot"]     { grid-area: snapshot; }
  .sam-row-option .sam-cell[data-col="target-count"] { grid-area: target-count; }
  .sam-row-option .sam-cell[data-col="score"]        { grid-area: score; }
  .sam-row-option .sam-cell[data-col="status"]       { grid-area: status; }
  .sam-row-option .sam-cell[data-col="date"]         { grid-area: date; }

  /* 옵션 헤더 1행: #505364 */
  .sam-row-option.sam-row--head .sam-cell[data-col="no"],
  .sam-row-option.sam-row--head .sam-cell[data-col="option-id"],
  .sam-row-option.sam-row--head .sam-cell[data-col="option-title"],
  .sam-row-option.sam-row--head .sam-cell[data-col="snapshot"] {
    background: #505364;
  }

  /* 옵션 헤더 2행: #636678 */
  .sam-row-option.sam-row--head .sam-cell[data-col="target-count"],
  .sam-row-option.sam-row--head .sam-cell[data-col="score"],
  .sam-row-option.sam-row--head .sam-cell[data-col="status"],
  .sam-row-option.sam-row--head .sam-cell[data-col="date"] {
    background: #636678;
  }

  /* ── 스냅샷 테이블 모바일 2행 그리드 ──────────────────────── */
  .sam-row-snapshot {
    grid-template-columns: minmax(0, 0.6fr) minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas:
      "no snapshot-id governance period"
      "target-count target-count status date";
  }

  .sam-row-snapshot .sam-cell[data-col="no"]           { grid-area: no; }
  .sam-row-snapshot .sam-cell[data-col="snapshot-id"]  { grid-area: snapshot-id; }
  .sam-row-snapshot .sam-cell[data-col="governance"]   { grid-area: governance; }
  .sam-row-snapshot .sam-cell[data-col="period"]       { grid-area: period; }
  .sam-row-snapshot .sam-cell[data-col="target-count"] { grid-area: target-count; }
  .sam-row-snapshot .sam-cell[data-col="status"]       { grid-area: status; }
  .sam-row-snapshot .sam-cell[data-col="date"]         { grid-area: date; }

  /* 스냅샷 헤더 1행: #505364 */
  .sam-row-snapshot.sam-row--head .sam-cell[data-col="no"],
  .sam-row-snapshot.sam-row--head .sam-cell[data-col="snapshot-id"],
  .sam-row-snapshot.sam-row--head .sam-cell[data-col="governance"],
  .sam-row-snapshot.sam-row--head .sam-cell[data-col="period"] {
    background: #505364;
  }

  /* 스냅샷 헤더 2행: #636678 */
  .sam-row-snapshot.sam-row--head .sam-cell[data-col="target-count"],
  .sam-row-snapshot.sam-row--head .sam-cell[data-col="status"],
  .sam-row-snapshot.sam-row--head .sam-cell[data-col="date"] {
    background: #636678;
  }

  /* ── 로그 테이블 모바일 2행 그리드 ────────────────────────── */
  .sam-row-log {
    grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.9fr);
    grid-template-areas:
      "no log-type content processor"
      "target-id target-id status date";
  }

  .sam-row-log .sam-cell[data-col="no"]        { grid-area: no; }
  .sam-row-log .sam-cell[data-col="log-type"]  { grid-area: log-type; }
  .sam-row-log .sam-cell[data-col="content"]   { grid-area: content; }
  .sam-row-log .sam-cell[data-col="processor"] { grid-area: processor; }
  .sam-row-log .sam-cell[data-col="target-id"] { grid-area: target-id; }
  .sam-row-log .sam-cell[data-col="status"]    { grid-area: status; }
  .sam-row-log .sam-cell[data-col="date"]      { grid-area: date; }

  /* 로그 헤더 1행: #505364 */
  .sam-row-log.sam-row--head .sam-cell[data-col="no"],
  .sam-row-log.sam-row--head .sam-cell[data-col="log-type"],
  .sam-row-log.sam-row--head .sam-cell[data-col="content"],
  .sam-row-log.sam-row--head .sam-cell[data-col="processor"] {
    background: #505364;
  }

  /* 로그 헤더 2행: #636678 */
  .sam-row-log.sam-row--head .sam-cell[data-col="target-id"],
  .sam-row-log.sam-row--head .sam-cell[data-col="status"],
  .sam-row-log.sam-row--head .sam-cell[data-col="date"] {
    background: #636678;
  }

  /* ── 영수증 테이블 모바일 2행 그리드 ───────────────────────── */
  .sam-row-receipt {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
    grid-template-areas:
      "no type receipt-id trade-id"
      "user-id amount status date";
  }

  .sam-row-receipt .sam-cell[data-col="no"]         { grid-area: no; }
  .sam-row-receipt .sam-cell[data-col="type"]       { grid-area: type; }
  .sam-row-receipt .sam-cell[data-col="receipt-id"] { grid-area: receipt-id; }
  .sam-row-receipt .sam-cell[data-col="trade-id"]   { grid-area: trade-id; }
  .sam-row-receipt .sam-cell[data-col="user-id"]    { grid-area: user-id; }
  .sam-row-receipt .sam-cell[data-col="amount"]     { grid-area: amount; }
  .sam-row-receipt .sam-cell[data-col="status"]     { grid-area: status; }
  .sam-row-receipt .sam-cell[data-col="date"]       { grid-area: date; }

  /* 영수증 헤더 1행: #505364 */
  .sam-row-receipt.sam-row--head .sam-cell[data-col="no"],
  .sam-row-receipt.sam-row--head .sam-cell[data-col="type"],
  .sam-row-receipt.sam-row--head .sam-cell[data-col="receipt-id"],
  .sam-row-receipt.sam-row--head .sam-cell[data-col="trade-id"] {
    background: #505364;
  }

  /* 영수증 헤더 2행: #636678 */
  .sam-row-receipt.sam-row--head .sam-cell[data-col="user-id"],
  .sam-row-receipt.sam-row--head .sam-cell[data-col="amount"],
  .sam-row-receipt.sam-row--head .sam-cell[data-col="status"],
  .sam-row-receipt.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;
}

/* 라벨 셀 — 2줄: PC에서는 일반 라벨과 동일(1줄 가운데정렬), 모바일에서만 2줄 우측정렬 */
.samd-info-label--2line {
  height: 44px;
  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%;
  height: 100%;
  position: relative;
}

.samd-role-select .sam-select-toggle {
  height: 100%;
  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;
  }
}

/* ≤380px — 매우 좁은 화면 overflow 방지 */
@media (max-width: 380px) {
  .samd-memo-row {
    grid-template-columns: 80px 1fr;
    column-gap: 3px;
    overflow: hidden;
  }
  .samd-memo-label {
    padding: 10px 6px;
    min-height: 180px;
    font-size: 12px;
  }
  .samd-memo-cell {
    min-height: 180px;
  }
  .samd-memo-input {
    padding: 10px 10px;
    font-size: 14px;
  }
}

/* ============================================================
   사용자 관리 상세 - 반응형 (≤ 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;
  }

  /* 2줄 라벨 — 모바일에서만 column/우측정렬 적용 */
  .samd-info-label--2line {
    flex-direction: column;
    height: auto;
    min-height: 65px;
    white-space: normal;
    gap: 2px;
    align-items: flex-end;
    text-align: right;
  }

  /* 페이지 제목 — 어두운 배경 위 흰색 텍스트 */
  .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: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .sgm-header {
    flex-shrink: 0;
    padding: 75px 16px 19px;
  }

  .sgm-title {
    font-size: 26px;
  }

  .sgm-close {
    right: 24px;
    top: 23px;
    font-size: 20px;
  }

  .sgm-filter {
    flex-shrink: 0;
    padding: 31px 11px 9px;
  }

  .sgm-table {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .sgm-row--head {
    flex-shrink: 0;
  }

  .sgm-table-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .sgm-pagination {
    flex-shrink: 0;
  }

  .sgm-actions {
    flex-shrink: 0;
  }

  .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     id"
      "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: none;
  }

  .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;
}

/* 제외대상 행 — 높이 가변 (항목 2줄 이상 시 라벨도 함께 늘어남) */
.sasd2-info-row--exclude .sasd2-info-label,
.sasd2-info-row--exclude .sasd2-info-value {
  height: auto;
  min-height: 44px;
}


.sasd2-exclude-item {
  display: inline;
}

.sasd2-exclude-comma {
  display: inline;
}

/* ── 히스토리 바디 ─────────────────────────────────────────── */
.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-info-value--exclude {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .sasd2-exclude-item {
    display: block;
  }

  .sasd2-exclude-comma {
    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 {
  height: 44px;
  border: 2px solid #f1f1f1;
  min-width: 0;
}

@media (min-width: 1820px) {
  .saod-info-value--unit .saod-input {
    width: 280px;
  }
}

/* ── 텍스트 입력 ───────────────────────────────────────────── */
.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: 90vh;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .sosm-header {
    flex-shrink: 0;
    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;
  }

  .sosm-table {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .sosm-table-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  /* 테이블 — 모바일: 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 {
    flex-shrink: 0;
    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 {
    flex-shrink: 0;
    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 {
    flex-shrink: 0;
    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-cancel-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: not-allowed;
}

.sam-pag-btn:disabled img {
  opacity: 0.35;
}

.sam-pag-btn:disabled:hover img {
  opacity: 0.35;
}

.crp-table-section {
  background: var(--dao-white);
  border-radius: 10px;
  margin-top: 16px;
  margin-bottom: 49px;
}



/* ============================================================
   보상지급(Airdrop) 관리 — saod/scod/sosm 기반 복제
   option 디자인 시스템을 유지하되 추후 독립 수정이 가능하도록
   전용 prefix(saad-/scad-/aosm-)로 분리
============================================================ */
.saad-main {
  padding: 80px 60px 60px;
}

.saad-page-title {
  font-size: 34px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 17px;
  font-family: 'Nanum Gothic', sans-serif;
}

.saad-detail-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 71px 194px 79px;
}

.saad-section {
  margin-bottom: 83px;
}

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

.saad-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;
}

.saad-section-body {
  margin-top: 4px;
}

.saad-section--target .saad-section-body {
  margin-top: 6px;
}

.saad-info-row {
  display: grid;
  grid-template-columns: 200px 1fr 200px 1fr;
  column-gap: 3px;
}

.saad-info-row + .saad-info-row {
  margin-top: 4px;
}

.saad-info-row--wide .saad-info-value {
  grid-column: 2 / -1;
}

.saad-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;
}

.saad-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;
}

.saad-info-value--input {
  padding: 0;
}

.saad-info-value--snap-id {
  padding: 0;
  border: none;
  gap: 3px;
}

.saad-info-value--snap-id .saad-input {
  flex: 1;
  min-width: 0;
  border: 2px solid #f1f1f1;
  height: 44px;
}

.saad-info-value--unit {
  padding: 0;
  border: none;
  gap: 0;
}

.saad-info-value--unit .saad-input {
  width: 280px;
  height: 44px;
  border: 2px solid #f1f1f1;
  min-width: 0;
}

.saad-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;
}

.saad-unit {
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  color: #000000;
  white-space: nowrap;
  flex: 1;
  text-align: center;
}

.saad-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;
}

.saad-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;
}

.saad-br-mobile {
  display: none;
}

.saad-section-note {
  font-size: 16px;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  text-align: center;
  margin: 20px 0 0;
  line-height: 1.4;
}

.saad-section--payment .saad-section-note {
  margin-top: 22px;
}

.saad-nft-item {
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 16px;
}

.saad-nft-item + .saad-nft-item {
  margin-top: 16px;
}

.saad-nft-header {
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  color: #000000;
  margin-bottom: 12px;
}

.saad-nft-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.saad-nft-preview-card {
  flex: 0 0 240px;
  background: #ffffff;
  border: 2px solid #f1f1f1;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.saad-nft-preview-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.saad-nft-preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.saad-nft-preview-placeholder {
  color: #909090;
  font-size: 14px;
  font-family: 'Nanum Gothic', sans-serif;
  text-align: center;
  padding: 0 16px;
  line-height: 1.4;
}

.saad-nft-preview-name {
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 12px 16px 4px;
  word-break: break-word;
}

.saad-nft-preview-name--empty {
  color: #b0b0b0;
  font-weight: 400;
}

.saad-nft-preview-description {
  color: #303030;
  font-size: 14px;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 16px 16px;
  line-height: 1.4;
  word-break: break-word;
}

.saad-nft-preview-description--empty {
  color: #b0b0b0;
}

.saad-nft-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.saad-nft-field {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 3px;
}

.saad-nft-field-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;
}

.saad-nft-field-input {
  border: 2px solid #f1f1f1;
  background: #ffffff;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  color: #000000;
  padding: 0 20px;
  outline: none;
  height: 44px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.saad-nft-field-file {
  display: none;
}

.saad-nft-field-upload {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  border: 2px solid #f1f1f1;
  background: #ffffff;
  padding: 0 16px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.saad-nft-upload-btn {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  height: 28px;
  background: #3a3a3a;
  color: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}

.saad-nft-upload-btn:hover {
  background: #555555;
}

.saad-nft-upload-btn--disabled {
  background: #b0b0b0;
  cursor: not-allowed;
}

.saad-nft-upload-filename {
  color: #b0b0b0;
  font-size: 14px;
  font-family: 'Nanum Gothic', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.saad-nft-upload-filename--selected {
  color: #000000;
}

.saad-bottom-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 53px;
}

.saad-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;
}

.saad-bottom-btn--list {
  background: #ffffff;
  color: #4779ae;
  border: 1px solid #b4b4b4;
}

.saad-bottom-btn--create {
  background: #4779ae;
  color: #ffffff;
}

@media (max-width: 1660px) {
  .saad-main {
    padding: 0 20px 30px;
  }

  .saad-page-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 48px 0 48px;
  }

  .saad-detail-card {
    padding: 56px 16px 58px;
    border-radius: 0;
  }

  .saad-section {
    margin-bottom: 68px;
  }

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

  .saad-info-row {
    grid-template-columns: 119px 1fr;
    column-gap: 4px;
    row-gap: 4px;
  }

  .saad-info-row + .saad-info-row {
    margin-top: 4px;
  }

  .saad-info-row--wide .saad-info-value {
    grid-column: auto;
  }

  .saad-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;
  }

  .saad-info-value {
    font-size: 15px;
    height: auto;
    min-height: 44px;
    padding: 8px 14px 8px 24px;
  }

  /* 입력 셀 — padding 재설정 */
  .saad-info-value--input {
    padding: 0;
  }

  /* 스냅샷 ID — padding/border 재설정 */
  .saad-info-value--snap-id {
    padding: 0;
    border: none;
    gap: 3px;
  }

  .saad-info-value--snap-id .saad-input {
    min-height: 44px;
    height: auto;
  }

  .saad-select-btn {
    width: 56px;
    font-size: 14px;
    min-height: 44px;
    height: auto;
  }

  .saad-br-mobile {
    display: inline;
  }

  /* 섹션 2, 3: 모바일 헤더→바디 4px (피그마: 792-788, 1354-1350) */
  .saad-section--payment .saad-section-body,
  .saad-section--target .saad-section-body {
    margin-top: 4px;
  }

  /* 버튼 포함 값 셀 — 텍스트+버튼 나란히 배치 */
  .saad-info-value--with-btn {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .saad-value-text {
    flex: 1;
    min-width: 0;
  }

  .saad-view-btn {
    width: 72px;
    height: 25px;
    font-size: 13px;
    margin-left: 0;
    flex-shrink: 0;
  }

  /* 단위 셀 — 모바일: padding/border 재설정 */
  .saad-info-value--unit {
    padding: 0;
    border: none;
    gap: 4px;
    align-items: center;
    min-width: 0;
    overflow: hidden;
  }

  .saad-info-value--unit .saad-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 100%;
    border: 2px solid #f1f1f1;
  }

  .saad-info-value--unit .saad-unit {
    flex: 0 0 48px;
    text-align: left;
    padding-right: 8px;
    box-sizing: border-box;
  }

  .saad-unit {
    font-size: 15px;
  }

  .saad-input {
    font-size: 15px;
  }

  /* 노트 */
  .saad-section-note {
    font-size: 14px;
    margin-top: 17px;
    text-align: left;
  }

  /* 하단 버튼 */
  .saad-bottom-actions {
    margin-top: 35px;
    gap: 10px;
  }

  .saad-bottom-btn {
    flex: 1;
    width: auto;
    height: 50px;
    font-size: 17px;
    border-radius: 4px;
  }

  .saad-bottom-btn--list {
    border-color: #3eb5c9;
  }

  /* NFT 입력 섹션 — 모바일에서 세로 스택 */
  .saad-nft-header {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .saad-nft-layout {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .saad-nft-preview-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 320px;
    align-self: flex-start;
  }

  .saad-nft-preview-name {
    font-size: 15px;
  }

  .saad-nft-preview-description {
    font-size: 13px;
  }

  .saad-nft-fields {
    gap: 4px;
  }

  .saad-nft-field {
    grid-template-columns: 119px 1fr;
    column-gap: 4px;
  }

  .saad-nft-field-label {
    font-size: 15px;
    height: auto;
    min-height: 44px;
    padding: 8px 15px 8px 10px;
    white-space: normal;
    line-height: 1.4;
    justify-content: flex-end;
    text-align: right;
  }

  .saad-nft-field-input {
    font-size: 15px;
    height: auto;
    min-height: 44px;
    padding: 8px 14px 8px 16px;
  }

  .saad-nft-field-file {
    font-size: 14px;
    height: auto;
    min-height: 44px;
    padding: 8px 12px;
  }
}

@media (max-width: 1200px) {
  .saad-main {
    padding: 0 0 30px;
  }

  .saad-detail-card {
    padding: 56px 16px 58px;
    border-radius: 0;
  }

  .saad-bottom-actions {
    padding: 0 16px;
  }
}

.aosm-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;
}

.aosm-modal {
  background: #ffffff;
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  border-radius: 15px;
}

.aosm-header {
  background: #4779ae;
  padding: 41px 24px 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 15px 15px 0 0;
}

.aosm-title {
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Nanum Gothic', sans-serif;
}

.aosm-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;
}

.aosm-filter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 30px 5px 16px;
}

.aosm-filter-label {
  font-size: 16px;
  font-weight: 700;
  color: #3a3a3a;
  font-family: 'Nanum Gothic', sans-serif;
}

.aosm-select {
  width: 181px;
}

.aosm-select .sam-select-toggle {
  height: 45px;
  font-size: 14px;
}

.aosm-table {
  width: 100%;
}

.aosm-row {
  display: grid;
  grid-template-columns: 1fr 1.22fr 1.59fr 1.52fr 1.37fr 1.36fr;
  align-items: center;
  min-height: 53px;
}

.aosm-row--head {
  background: #505364;
  min-height: 58px;
}

.aosm-row--head .aosm-cell {
  font-weight: 700;
  color: #ffffff;
  font-size: 17px;
}

.aosm-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;
}

.aosm-table-body .aosm-row {
  border-bottom: none;
}

.aosm-table-body .aosm-row:nth-child(even) {
  background: #F8F9FA;
}

.aosm-empty {
  text-align: center;
  color: #909090;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 40px 16px;
}

.aosm-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;
}

.aosm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 64px;
  padding: 0 24px;
  margin-top: 23px;
}

.aosm-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;
}

.aosm-pag-selector span {
  font-size: 14px;
  color: #344055;
  font-family: 'Inter', sans-serif;
  flex: 1;
  text-align: right;
}

.aosm-pag-selector img {
  width: 16px;
  height: 16px;
}

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

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

.aosm-pag-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.aosm-actions {
  display: flex;
  justify-content: center;
  padding: 17px 24px 30px;
}

.aosm-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;
}

@media (max-width: 945px) {

  .aosm-overlay {
    padding: 60px 14px;
    align-items: flex-start;
  }

  .aosm-modal {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 15px;
  }

  .aosm-header {
    padding: 75px 16px 19px;
    border-radius: 15px 15px 0 0;
  }

  .aosm-title {
    font-size: 26px;
  }

  .aosm-close {
    right: 24px;
    top: 23px;
    transform: none;
    font-size: 20px;
    width: 20px;
    height: 20px;
  }

  /* 필터 — 모바일 */
  .aosm-filter {
    padding: 31px 10px 9px;
    gap: 6px;
  }

  .aosm-filter-label {
    font-size: 14px;
    color: rgba(48, 48, 48, 0.7);
  }

  .aosm-select {
    width: 130px;
  }

  .aosm-select .sam-select-toggle {
    height: 32px;
    font-size: 14px;
  }

  /* 테이블 — 모바일: 3열 x 2행 그리드 */
  .aosm-row {
    grid-template-columns: 1fr 1.11fr 1.17fr;
    grid-template-rows: auto auto;
    min-height: auto;
    padding: 0;
    row-gap: 1px;
  }

  /* 헤더: 보임, 2행 각각 다른 bg */
  .aosm-row--head {
    background: #777A8E;
    min-height: auto;
    row-gap: 0;
    column-gap: 0;
  }

  /* 헤더 행1 — #777A8E (No, 스냅샷 ID, 확정승인완료 일시) */
  .aosm-row--head .aosm-cell[data-col="no"],
  .aosm-row--head .aosm-cell[data-col="id"],
  .aosm-row--head .aosm-cell[data-col="date"] {
    background: #777A8E;
  }

  /* 헤더 행2 — #505364 (생성사유, 스냅샷 제목, 선택) */
  .aosm-row--head .aosm-cell[data-col="reason"],
  .aosm-row--head .aosm-cell[data-col="title"],
  .aosm-row--head .aosm-cell[data-col="select"] {
    background: #505364;
  }

  .aosm-row--head .aosm-cell {
    font-size: 13px;
    padding: 8px 4px;
  }

  .aosm-cell {
    font-size: 11px;
    padding: 6px 4px;
    white-space: normal;
    text-align: center;
  }

  /* 6셀 → 3열 x 2행 배치 (figma: row1=No/ID/일시, row2=사유/제목/선택) */
  .aosm-cell[data-col="no"] {
    grid-column: 1;
    grid-row: 1;
  }

  .aosm-cell[data-col="id"] {
    grid-column: 2;
    grid-row: 1;
  }

  .aosm-cell[data-col="date"] {
    grid-column: 3;
    grid-row: 1;
  }

  .aosm-cell[data-col="reason"] {
    grid-column: 1;
    grid-row: 2;
  }

  .aosm-cell[data-col="title"] {
    grid-column: 2;
    grid-row: 2;
  }

  .aosm-cell[data-col="select"] {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .aosm-select-btn {
    width: 40px;
    height: 22px;
    font-size: 11px;
  }

  /* 데이터 행 짝수 bg — SVG fill #F8F9FA */
  .aosm-table-body .aosm-row:nth-child(even) {
    background: #F8F9FA;
  }

  /* 모바일: 5개 행만 표시 */
  .aosm-table-body .aosm-row:nth-child(n+6) {
    display: none;
  }

  /* 페이지네이션 — 모바일 */
  .aosm-pagination {
    margin-top: 53px;
    height: 39px;
    padding: 0 16px;
    gap: 16px;
  }

  .aosm-pag-selector {
    width: 54px;
    height: 28px;
    padding: 4px 6px;
  }

  .aosm-pag-selector span {
    font-size: 12px;
  }

  /* double arrow (1,4번째): 26x28 */
  .aosm-pag-btn {
    width: 26px;
    height: 28px;
  }

  /* single arrow (2,3번째): 30x26 */
  .aosm-pag-btn:nth-child(2),
  .aosm-pag-btn:nth-child(3) {
    width: 30px;
    height: 26px;
  }

  .aosm-pag-controls {
    gap: 18px;
  }

  /* 취소 버튼 — 모바일 */
  /* 취소 버튼 — 모바일 */
  .aosm-actions {
    padding: 27px 24px 40px;
  }

  .aosm-cancel-btn {
    font-size: 17px;
    height: 50px;
  }
}

.scad-main {
  padding: 80px 60px 60px;
}

.scad-page-title {
  font-size: 34px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 17px;
  font-family: 'Nanum Gothic', sans-serif;
}

.scad-detail-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 71px 194px 79px;
}

.scad-section {
  margin-bottom: 70px;
}

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

.scad-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;
}

.scad-section-header--log {
  position: relative;
}

.scad-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;
}

.scad-section-body {
  margin-top: 4px;
}

.scad-info-row {
  display: grid;
  grid-template-columns: 200px 1fr 200px 1fr;
  column-gap: 3px;
}

.scad-info-row + .scad-info-row {
  margin-top: 4px;
}

.scad-info-row--wide .scad-info-value {
  grid-column: 2 / -1;
}

.scad-info-row--memo {
  grid-template-columns: 200px 1fr;
}

.scad-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;
}

.scad-info-label--memo {
  height: 175px;
}

.scad-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;
}

.scad-info-value--memo {
  height: 175px;
  padding-left: 59px;
}

.scad-info-value--right {
  justify-content: flex-end;
  padding: 0 70px 0 39px;
}

.scad-section--payment .scad-info-row--wide {
  position: relative;
}

.scad-section--payment .scad-info-row--wide::after {
  content: '';
  position: absolute;
  left: 203px;
  right: 0;
  top: 0;
  bottom: 0;
  background: #ffffff;
  border: 2px solid #f1f1f1;
}

.scad-section--payment .scad-info-row--wide .scad-info-label {
  position: relative;
  z-index: 1;
}

.scad-section--payment .scad-info-row--wide .scad-info-value {
  grid-column: auto;
  position: relative;
  z-index: 1;
  background: transparent;
  border-color: transparent;
}

.scad-info-value--with-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 5px;
}

.scad-value-text {
  flex: 1;
  min-width: 0;
}

.scad-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;
}

.scad-br-mobile {
  display: none;
}

.scad-section-note {
  font-size: 16px;
  color: #303030;
  font-family: 'Nanum Gothic', sans-serif;
  text-align: center;
  margin: 23px 0 0;
  line-height: 1.4;
}

.scad-nft-item {
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 16px;
}

.scad-nft-item + .scad-nft-item {
  margin-top: 16px;
}

.scad-nft-header {
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  color: #000000;
  margin-bottom: 12px;
}

.scad-nft-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.scad-nft-preview-card {
  flex: 0 0 240px;
  background: #ffffff;
  border: 2px solid #f1f1f1;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.scad-nft-preview-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.scad-nft-preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scad-nft-preview-placeholder {
  color: #909090;
  font-size: 14px;
  font-family: 'Nanum Gothic', sans-serif;
  text-align: center;
  padding: 0 16px;
  line-height: 1.4;
}

.scad-nft-preview-name {
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 12px 16px 4px;
  word-break: break-word;
}

.scad-nft-preview-name--empty {
  color: #b0b0b0;
  font-weight: 400;
}

.scad-nft-preview-description {
  color: #303030;
  font-size: 14px;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 16px 16px;
  line-height: 1.4;
  word-break: break-word;
}

.scad-nft-preview-description--empty {
  color: #b0b0b0;
}

.scad-nft-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scad-nft-field {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 3px;
}

.scad-nft-field-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;
}

.scad-nft-field-value {
  background: #ffffff;
  color: #000000;
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  padding: 0 20px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border: 2px solid #f1f1f1;
  word-break: break-all;
  box-sizing: border-box;
}

.scad-nft-field-value a {
  color: #4779ae;
  text-decoration: underline;
}

.scad-section--manage .scad-section-body {
  margin-top: 5px;
}

.scad-info-row--memo + .scad-info-row {
  margin-top: 5px;
}

.scad-log-body {
  margin-top: 3px;
}

.scad-log-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 3px;
}

.scad-log-row + .scad-log-row {
  margin-top: 4px;
}

.scad-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;
}

.scad-log-cell--date {
  background: #f1f1f1;
  border: none;
}

.scad-manage-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 35px;
}

.scad-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;
}

.scad-manage-btn--reject-no {
  background: #f1634f;
  color: #ffffff;
  width: 159px;
}

.scad-manage-note {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  color: #000000;
  font-family: 'Nanum Gothic', sans-serif;
  margin: 0;
  padding-left: 5px;
}

.scad-manage-btn--list {
  background: #ffffff;
  color: #4779ae;
  border: 1px solid #4779ae;
  width: 136px;
}

.scad-manage-btn--save {
  background: #4779ae;
  color: #ffffff;
  width: 136px;
}

.scad-manage-btn--approve-req {
  background: #edb323;
  color: #ffffff;
  width: 159px;
}

.scad-reject-body {
  display: block !important;
  border: 2px solid #f1f1f1;
  background: #ffffff;
  padding: 0;
  margin-top: 1px;
}

.scad-reject-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  padding: 9px 11px;
}

.scad-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;
}

.scad-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;
}

.scad-reject-btn--list {
  background: #ffffff;
  color: #4779ae;
  border: 1px solid #4779ae;
}

.scad-reject-btn--approve {
  background: #edb323;
  color: #ffffff;
}

.scad-reject-btn--deny {
  background: #f1634f;
  color: #ffffff;
}

@media (max-width: 1400px) {
  .scad-info-row {
    grid-template-columns: 160px 1fr 160px 1fr;
  }

  .scad-info-row--memo {
    grid-template-columns: 160px 1fr;
  }

  .scad-info-label {
    font-size: 14px;
  }

  .scad-info-value {
    font-size: 15px;
  }

  .scad-detail-card {
    padding: 71px 100px 79px;
  }

  .scad-section--payment .scad-info-row--wide::after {
    left: 163px;
  }
}

@media (max-width: 1660px) {
  .scad-main {
    padding: 0 20px 30px;
  }

  .scad-page-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 48px 0 48px;
  }

  .scad-detail-card {
    padding: 58px 16px 58px;
    border-radius: 0;
  }

  .scad-section {
    margin-bottom: 54px;
  }

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

  /* ── 정보 그리드 — 2열로 전환 ──── */
  .scad-info-row {
    grid-template-columns: 119px 1fr;
    column-gap: 4px;
    row-gap: 4px;
  }

  .scad-info-row + .scad-info-row {
    margin-top: 4px;
  }

  .scad-info-row--wide .scad-info-value {
    grid-column: auto;
  }

  .scad-info-row--memo {
    grid-template-columns: 119px 1fr;
  }

  /* ── 라벨 — 모바일 ──── */
  .scad-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;
  }

  .scad-info-label--memo {
    height: 119px;
    min-height: 119px;
  }

  /* ── 값 — 모바일 ──── */
  .scad-info-value {
    font-size: 15px;
    height: auto;
    min-height: 44px;
    padding: 8px 10px 8px 24px;
  }

  /* 관리정보 값 — 모바일: color + padding */
  .scad-section--manage .scad-info-value {
    color: #303030;
    padding-left: 27px;
    padding-right: 0;
  }

  /* 관리정보 — header→body gap 모바일 */
  .scad-section--manage .scad-section-body {
    margin-top: 3px;
  }

  /* 관리정보 — 메모→등록일시 gap 모바일 */
  .scad-section--manage .scad-info-row--memo + .scad-info-row {
    margin-top: 4px;
  }

  .scad-info-value--memo {
    height: 119px;
    min-height: 119px;
  }

  /* 우측 정렬 값 — 모바일 */
  .scad-info-value--right {
    padding: 8px 28px;
  }

  /* ── 옵션 지급 정보 wide 행 — pseudo 숨김, 값 셀 복원 ──── */
  .scad-section--payment .scad-info-row--wide::after {
    display: none;
  }

  .scad-section--payment .scad-info-row--wide .scad-info-value {
    background: #ffffff;
    border-color: #f1f1f1;
  }

  /* ── 옵션 지급 정보 / 지급 대상 및 금액 — 셀 높이 통일 ──── */
  .scad-section--payment .scad-info-label,
  .scad-section--payment .scad-info-value,
  .scad-section--target .scad-info-label,
  .scad-section--target .scad-info-value {
    min-height: 65px;
  }

  /* 지급 대상 및 금액 — 모바일에서 우측 정렬 + 우측 패딩 */
  .scad-section--target .scad-info-value {
    justify-content: flex-end;
    padding-right: 28px;
  }

  /* ── 모바일 줄바꿈 표시 ──── */
  .scad-br-mobile {
    display: inline;
  }

  /* ── 상세보기 버튼 포함 값 — 모바일 ──── */
  .scad-info-value--with-btn {
    padding-right: 5px;
  }

  .scad-view-btn {
    width: 66px;
    height: 25px;
    font-size: 14px;
  }

  /* ── 섹션 노트 — 모바일 ──── */
  .scad-section-note {
    font-size: 14px;
    margin-top: 16px;
    text-align: left;
    padding-left: 5px;
    line-height: 1.43;
  }

  /* ── NFT 섹션 — 모바일 (세로 스택) ──── */
  .scad-nft-header {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .scad-nft-layout {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .scad-nft-preview-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 320px;
    align-self: flex-start;
  }

  .scad-nft-preview-name {
    font-size: 15px;
  }

  .scad-nft-preview-description {
    font-size: 13px;
  }

  .scad-nft-fields {
    gap: 4px;
  }

  .scad-nft-field {
    grid-template-columns: 119px 1fr;
    column-gap: 4px;
  }

  .scad-nft-field-label {
    font-size: 15px;
    height: auto;
    min-height: 44px;
    padding: 8px 15px 8px 10px;
    white-space: normal;
    line-height: 1.4;
    justify-content: flex-end;
    text-align: right;
  }

  .scad-nft-field-value {
    font-size: 15px;
    min-height: 44px;
    padding: 8px 14px 8px 16px;
  }

  /* ── 로그 섹션 — 모바일 ──── */
  .scad-section--log {
    position: relative;
    padding-top: 36px;
  }

  .scad-section-header--log {
    position: static;
  }

  .scad-log-btn {
    position: absolute;
    right: 0;
    top: 0;
    transform: none;
    width: 90px;
    height: 30px;
    font-size: 14px;
  }

  /* 로그 바디 — 모바일 gap */
  .scad-log-body {
    margin-top: 4px;
  }

  /* 로그 행 — 2x2 그리드 */
  .scad-log-row {
    grid-template-columns: 1fr 1fr;
    column-gap: 3px;
    row-gap: 3px;
  }

  .scad-log-row + .scad-log-row {
    margin-top: 6px;
  }

  .scad-log-cell {
    font-size: 15px;
  }

  /* ── 관리정보 버튼 — 모바일 2x2 그리드 ──── */
  .scad-manage-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    margin-top: 29px;
  }

  .scad-manage-btn {
    font-size: 17px;
    height: 50px;
    width: auto;
    border-radius: 4px;
  }

  .scad-manage-btn--reject-no {
    order: 3;
  }

  .scad-manage-btn--list {
    order: 1;
  }

  .scad-manage-btn--save {
    order: 2;
  }

  .scad-manage-btn--approve-req {
    order: 4;
  }

  .scad-manage-note {
    order: 5;
    grid-column: 1 / -1;
    padding-left: 9px;
    font-size: 15px;
    margin-top: 1px;
  }

  /* ── 반려사유 바디 — 모바일 ──── */
  .scad-reject-body {
    padding: 0;
    margin-top: 3px;
  }

  .scad-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;
  }

  .scad-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;
  }

  .scad-reject-btn {
    font-size: 17px;
  }
}

@media (max-width: 1200px) {
  .scad-main {
    padding: 0 0 30px;
  }

  .scad-detail-card {
    padding: 58px 16px 58px;
    border-radius: 0;
  }
}

.saad-main--detail .saad-section {
  margin-bottom: 77px;
}

.saad-main--detail .saad-section:last-of-type {
  margin-bottom: 0;
}

.saad-main--detail .saad-info-value {
  padding: 0 39px;
}

.saad-main--detail .saad-info-value--unit {
  padding: 0;
}

.saad-main--detail .saad-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;
}

.saad-main--detail .saad-info-value--with-btn {
  padding-right: 5px;
}

.saad-main--detail .saad-info-value--unit .saad-input {
  text-align: right;
  padding: 0 22px;
}

.saad-main--detail .saad-section-note {
  margin: 23px 0 0;
}

.saad-main--detail .saad-info-row--memo {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 3px;
}

.saad-info-label--memo {
  height: 175px;
}

.saad-info-value--memo {
  height: 175px;
  padding-left: 59px;
}

.saad-main--detail .saad-info-row--memo + .saad-info-row {
  margin-top: 5px;
}

.saad-main--detail .saad-section--manage .saad-section-body {
  margin-top: 5px;
}

.saad-manage-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 35px;
}

.saad-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;
}

.saad-manage-btn--list {
  background: #ffffff;
  color: #4779ae;
  border: 1px solid #4779ae;
}

.saad-manage-btn--save {
  background: #4779ae;
  color: #ffffff;
}

.saad-section-header--log {
  position: relative;
}

.saad-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;
}

.saad-log-body {
  margin-top: 3px;
}

.saad-log-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 3px;
}

.saad-log-row + .saad-log-row {
  margin-top: 4px;
}

.saad-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;
}

.saad-log-cell--date {
  background: #f1f1f1;
  border: none;
}

@media (max-width: 1660px) {

  /* ── 정보 그리드 2열 전환 ──── */
  .saad-main--detail .saad-info-row {
    grid-template-columns: 119px 1fr;
    column-gap: 4px;
    row-gap: 4px;
  }

  .saad-main--detail .saad-info-row + .saad-info-row {
    margin-top: 4px;
  }

  .saad-main--detail .saad-info-row--wide .saad-info-value {
    grid-column: auto;
  }

  .saad-main--detail .saad-info-row--memo {
    grid-template-columns: 119px 1fr;
  }

  /* ── 라벨 모바일 ──── */
  .saad-main--detail .saad-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;
  }

  .saad-main--detail .saad-info-label--memo {
    height: 119px;
    min-height: 119px;
  }

  /* ── 값 셀 모바일 ──── */
  .saad-main--detail .saad-info-value {
    font-size: 15px;
    height: auto;
    min-height: 44px;
    padding: 8px 10px 8px 24px;
  }

  .saad-main--detail .saad-info-value--memo {
    height: 119px;
    min-height: 119px;
    padding: 8px 24px;
  }

  /* 관리정보 값 — 모바일에서 #303030 + padding 조정 */
  .saad-main--detail .saad-section--manage .saad-info-value {
    color: #303030;
    padding-left: 27px;
    padding-right: 0;
  }

  .saad-main--detail .saad-section--manage .saad-section-body {
    margin-top: 3px;
  }

  .saad-main--detail .saad-section--manage .saad-info-row--memo + .saad-info-row {
    margin-top: 4px;
  }

  /* 섹션 margin 모바일 ── */
  .saad-main--detail .saad-section {
    margin-bottom: 59px;
  }

  /* 옵션 기본 정보 — 반려사유 wide row: 2줄 value h:65 */
  .saad-main--detail .saad-section--basic .saad-info-row--wide .saad-info-label,
  .saad-main--detail .saad-section--basic .saad-info-row--wide .saad-info-value {
    min-height: 65px;
  }

  /* 상세보기 버튼 포함 값 — 모바일 우측 padding 5px */
  .saad-main--detail .saad-info-value--with-btn {
    padding-right: 5px;
  }

  /* ── 모바일 줄바꿈 ──── */
  .saad-main--detail .saad-br-mobile {
    display: inline;
  }

  /* ── 스냅샷 ID 모바일 — w:161, 선택 버튼 w:56, gap:3px ──── */
  .saad-main--detail .saad-info-value--snap-id {
    padding: 0;
    gap: 3px;
  }

  /* 2줄 라벨/값 셀 min-height 65px (grid stretch로 쌍 셀 자동 맞춤) */
  .saad-main--detail .saad-info-label:has(br.saad-br-mobile),
  .saad-main--detail .saad-info-value--with-btn,
  .saad-main--detail .saad-info-value--unit {
    min-height: 65px;
  }

  .saad-main--detail .saad-info-value--snap-id .saad-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 24px;
    font-size: 15px;
  }

  .saad-main--detail .saad-value-text--snap-id {
    height: 44px;
    padding: 0 24px;
    font-size: 15px;
  }

  .saad-main--detail .saad-select-btn {
    width: 56px;
    height: 44px;
    font-size: 16px;
    flex-shrink: 0;
  }

  /* ── 옵션지급 정보 모바일 ──── */
  .saad-main--detail .saad-section--payment .saad-info-label,
  .saad-main--detail .saad-section--payment .saad-info-value {
    min-height: 65px;
  }

  .saad-main--detail .saad-section--payment .saad-info-value--unit {
    padding: 0;
    gap: 8px;
  }

  .saad-main--detail .saad-section--payment .saad-info-value--unit .saad-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;
  }

  .saad-main--detail .saad-section--payment .saad-unit {
    font-size: 15px;
    padding-right: 0;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* 예상 총 옵션점수 — 값 우측 정렬 (--unit 값 제외) */
  .saad-main--detail .saad-section--payment .saad-info-row > .saad-info-value:nth-child(4):not(.saad-info-value--unit) {
    justify-content: flex-end;
    padding: 8px 28px;
  }

  /* ── 지급 대상 및 금액 모바일 ──── */
  .saad-main--detail .saad-section--target .saad-info-label,
  .saad-main--detail .saad-section--target .saad-info-value {
    min-height: 65px;
  }

  .saad-main--detail .saad-section--target .saad-info-value {
    justify-content: flex-end;
    padding-right: 28px;
  }

  /* ── 섹션 노트 모바일 ──── */
  .saad-main--detail .saad-section-note {
    font-size: 13px;
    color: #707070;
    font-weight: 700;
    text-align: left;
    padding-left: 14px;
    margin-top: 18px;
    line-height: 1.38;
  }

  /* ── 로그 섹션 모바일 ──── */
  .saad-section--log {
    position: relative;
    padding-top: 36px;
  }

  .saad-main--detail .saad-section-header--log {
    position: static;
  }

  .saad-main--detail .saad-log-btn {
    position: absolute;
    right: 0;
    top: 0;
    transform: none;
    width: 90px;
    height: 30px;
    font-size: 14px;
  }

  .saad-log-body {
    margin-top: 4px;
  }

  .saad-log-row {
    grid-template-columns: 1fr 1fr;
    column-gap: 3px;
    row-gap: 3px;
  }

  .saad-log-row + .saad-log-row {
    margin-top: 6px;
  }

  .saad-log-cell {
    font-size: 15px;
  }

  /* ── 관리정보 하단 버튼 모바일 (2열 grid) ──── */
  .saad-manage-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 47px;
    justify-content: stretch;
  }

  .saad-manage-btn {
    font-size: 17px;
    height: 50px;
    width: auto;
    border-radius: 4px;
  }
}

@media (max-width: 1200px) {
  .saad-main--detail {
    padding: 0 0 30px;
  }
}

.scad-reject-btn--approve:hover {
  background: #d9a11e;
}

.scad-view-btn:hover {
  background: #444444;
}

.scad-reject-btn--deny:hover {
  background: #db5544;
}

.aosm-cancel-btn:hover {
  background: #e0e0e0;
}

.aosm-select-btn:disabled {
  background: #9d9d9d;
  color: #ffffff;
  border-color: #9d9d9d;
  cursor: not-allowed;
}

.scad-reject-btn--list:hover {
  background: #f5f8fb;
}

.aosm-pag-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.aosm-pag-btn:disabled {
  background: #f1f1f1;
  color: #9d9d9d;
  border-color: #d0d0d0;
  cursor: not-allowed;
}

/* ============================================================
   오픈 디렉토리 (CoReset Directory) — coreset_directory.html
   prefix: crd-
============================================================ */

.crd-main {
  /* 코리셋 모듈 디자인 토큰 (페이지 scope) */
  --crd-card-bg:     #353539;
  --crd-profile-bg:  #3a3a3e;
  --crd-cream:       #e6dbc8;
  --crd-text-main:   #f1f1f1;
  --crd-text-muted:  #b5b5b5;
  --crd-text-header: #303030;
  --crd-coral:       #f1634f;
  --crd-lime:        #afce35;
  --crd-radius-card:   12px;
  --crd-radius-button:  4px;

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 48px 100px;
  background: #272729;
  min-height: calc(100vh - var(--dao-header-h));
}

.crd-content {
  width: 100%;
  max-width: 1320px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 페이지 제목 — Figma 876:3847: 32 Bold #f1f1f1 line 42 letter-spacing -0.32 */
.crd-title {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 42px;
  letter-spacing: -0.32px;
  color: var(--crd-text-main);
  margin: 0;
}

/* 부연 설명 — Figma 876:3848 PC: 16 Reg #b5b5b5 line 24 / 876:3905 Mobile: 15 Reg line 24 */
.crd-subtitle {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--crd-text-muted);
  margin: 0;
}

/* NoticeBox — Figma 876:3849 PC / 876:3906 Mobile: border-left 4 #b7cd47 (lime), bg #353539, padding 14 20, rounded 8 */
.crd-notice {
  background: var(--crd-card-bg);
  border-left: 4px solid #b7cd47;
  border-radius: 8px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
}

/* Figma 876:3849 PC inner: 16 Reg #f1f1f1 line 26 / 876:3906 Mobile: 14 Reg line 20 */
.crd-notice-line {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--crd-text-main);
  margin: 0;
}

/* 검색 영역 */
.crd-search {
  width: 880px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* search label — Figma 876:3851 PC: 16 Bold #b5b5b5 line 20 / 876:3907 Mobile: 14 Bold line 20 */
.crd-search-label {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: var(--crd-text-muted);
  margin: 0;
}

.crd-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Input — Figma 876:3853 PC / 876:3909 Mobile: bg #f1f1f1 light, border #3a3a3e, h 50, px 16, rounded 8 */
.crd-search-input-wrap {
  flex: 1 1 0;
  min-width: 0;
  height: 50px;
  background: #f1f1f1;
  border: 1px solid var(--crd-profile-bg);
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

/* input text — Figma 876:3853 inner: 16 Reg #b5b5b5 placeholder. 입력 시 dark text */
.crd-search-input {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--crd-text-header);
}

.crd-search-input::placeholder {
  color: var(--crd-text-muted);
}

/* PC/모바일 placeholder 텍스트 분기 — Figma는 두 텍스트 다름 */
.crd-search-input--mb {
  display: none;
}

.crd-search-btn {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

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

/* 필터 (PC: 칩 / 모바일: Select) */
.crd-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.crd-filter-label {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--crd-text-muted);
  white-space: nowrap;
}

.crd-chip {
  height: auto;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--crd-profile-bg);
  background: var(--crd-card-bg);
  color: var(--crd-text-main);
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  white-space: nowrap;
}

.crd-chip--active {
  background: var(--crd-cream);
  border-color: var(--crd-cream);
  color: var(--crd-text-header);
}

/* 모바일 전용 라벨 / Select */
.crd-filter-label--mb {
  display: none;
}

/* Select 드롭다운 (모바일 토큰 수량 범위) — details/summary 패턴 */
.crd-select-wrap {
  display: none;
  position: relative;
  width: 100%;
}

/* details/summary 기본 마커 제거 */
.crd-select-wrap > summary {
  list-style: none;
}
.crd-select-wrap > summary::-webkit-details-marker {
  display: none;
}

.crd-select-toggle {
  width: 100%;
  height: 50px;
  background: var(--crd-card-bg);
  border: 1px solid var(--crd-profile-bg);
  border-radius: 8px;
  padding: 0 12px 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.crd-select-value {
  flex: 1 1 0;
  min-width: 0;
  text-align: left;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--crd-text-main);
}

.crd-select-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform .2s ease;
}

.crd-select-wrap[open] .crd-select-chevron {
  transform: rotate(180deg);
}

.crd-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #1f1f21; /* page-bg보다 약간 짙게 — 메뉴 분리감 */
  border: 1px solid var(--crd-profile-bg);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  z-index: 20;
  max-height: 280px;
  overflow-y: auto;
}

.crd-select-item {
  padding: 12px 16px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--crd-text-main);
  cursor: pointer;
  white-space: nowrap;
}

.crd-select-item:hover {
  background: var(--crd-profile-bg);
}

.crd-select-item--active {
  background: var(--crd-profile-bg);
  font-weight: 700;
}

/* 참여자 헤더 */
.crd-participants-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* Figma 876:3863 PC: 26 Bold #f1f1f1 line 30 letter-spacing -0.26 / 876:3915 Mobile: 18 Bold line 26 */
.crd-participants-title {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 30px;
  letter-spacing: -0.26px;
  color: var(--crd-text-main);
}

/* Figma 876:3864 PC: 16 Reg #b5b5b5 line 20 / 876:3916 Mobile: 13 Reg line 18 */
.crd-participants-count {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--crd-text-muted);
}

/* 카드 그리드 (PC 3열) — minmax(0,1fr)로 콘텐츠 폭 무시하고 균등 분배 */
.crd-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Figma 876:3867 PC: bg #f1f1f1 light, border 1 #3a3a3e, padding 20 24, rounded 12.
   min-height 122 — email 있는 카드 자연 height(name 30 + gap 4 + email 20 + gap 4 + amount 24 = 82 + padding 40 = 122)에 맞춰
   email 없는 카드 / skeleton 카드 / disabled 카드까지 사이즈 통일 (skeleton↔정상 전환 시 height 변동 X). */
.crd-card {
  min-width: 0; /* grid item이 콘텐츠 따라 늘어나지 않도록 */
  min-height: 122px;
  background: #f1f1f1;
  border: 1px solid var(--crd-profile-bg);
  border-radius: var(--crd-radius-card);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.crd-card-info {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

/* card-name — Figma 876:I3867;39:4: 20 Bold #272729 dark line 30 letter-spacing -0.2 */
.crd-card-name {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.2px;
  color: #272729;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* email 보조 톤 — dark muted */
.crd-card-email {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: #6b6b6b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crd-card-amount {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* card-num — Figma 876:I3867;39:5 inner: 16 Reg #272729 dark line 24 */
.crd-card-num {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #272729;
}

/* card-unit — Figma 876:I3867;39:5 inner: 10 Reg #272729 line 24 */
.crd-card-unit {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 24px;
  color: #272729;
}

/* Figma 876:I3867;39:6: bg #b7cd47 lime, w 140, h 40, px 24, rounded 4, text 14 Bold #303030 line 20 */
.crd-card-btn {
  flex: 0 0 auto;
  width: 140px;
  height: 40px;
  background: #b7cd47;
  border: 0;
  border-radius: var(--crd-radius-button);
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--crd-text-header);
  cursor: pointer;
  white-space: nowrap;
}

/* disabled — Figma 876:3881: button bg #afafaf, cursor 차단 (회색 자체로 disabled 표현, opacity 변경 안 함) */
.crd-card-btn:disabled {
  background: #afafaf;
  cursor: not-allowed;
  pointer-events: none;
}

/* disabled 카드 전체 — Figma 876:3881: 카드 bg #6b6b6b gray, info text #f1f1f1 white
   :has() 셀렉터로 button[disabled] 가진 카드 자동 분기 (JSX 변경 없이) */
.crd-card:has(.crd-card-btn:disabled) {
  background: #6b6b6b;
  border-color: var(--crd-profile-bg);
}

.crd-card:has(.crd-card-btn:disabled) .crd-card-name,
.crd-card:has(.crd-card-btn:disabled) .crd-card-num,
.crd-card:has(.crd-card-btn:disabled) .crd-card-unit {
  color: #f1f1f1;
}

.crd-card:has(.crd-card-btn:disabled) .crd-card-email {
  color: #d0d0d0;
}

/* 페이지네이션 */
.crd-pagination {
  border-top: 1px solid var(--crd-profile-bg);
  height: 84px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* 페이지 selector — details/summary 드롭다운 */
.crd-page-selector {
  position: relative;
}

.crd-page-selector > summary {
  list-style: none;
}
.crd-page-selector > summary::-webkit-details-marker {
  display: none;
}

.crd-page-selector-toggle {
  width: 72px;
  height: 44px;
  background: var(--crd-card-bg);
  border: 1px solid var(--crd-profile-bg);
  border-radius: 8px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--crd-text-main);
  cursor: pointer;
}

.crd-page-selector-chevron {
  width: 12px;
  height: 12px;
  transition: transform .2s ease;
}

.crd-page-selector[open] .crd-page-selector-chevron {
  transform: rotate(180deg);
}

.crd-page-selector-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  min-width: 72px;
  background: #1f1f21;
  border: 1px solid var(--crd-profile-bg);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  z-index: 20;
  max-height: 240px;
  overflow-y: auto;
}

.crd-page-selector-item {
  padding: 10px 16px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--crd-text-main);
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}

.crd-page-selector-item:hover {
  background: var(--crd-profile-bg);
}

.crd-page-selector-item--active {
  background: var(--crd-profile-bg);
  font-weight: 700;
}

.crd-page-controls {
  display: flex;
  align-items: center;
  gap: 18px;
}

.crd-page-btn {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.crd-page-btn img {
  width: 22px;
  height: 22px;
}

/* ============================================================
   모바일 (≤1200px) — S1 모바일 디자인 (414w 기준)
============================================================ */
@media (max-width: 1200px) {
  .crd-main {
    padding: 24px 16px 100px;
    align-items: stretch;
  }

  .crd-content {
    width: 100%;
    max-width: 100%;
    gap: 20px;
  }

  /* PC 제목 숨김 (모바일 헤더에 이미 표시) */
  .crd-title {
    display: none;
  }

  /* Mobile subtitle — Figma 876:3905: 15 Reg #b5b5b5 line 24 (PC 16/24) */
  .crd-subtitle {
    font-size: 15px;
    line-height: 24px;
  }

  /* Mobile NoticeBox — Figma 876:3906 inner: 14 Reg #f1f1f1 line 20 (PC 16/26) */
  .crd-notice-line {
    font-size: 14px;
    line-height: 20px;
  }

  /* Mobile search label — Figma 876:3907: 14 Bold #b5b5b5 line 20 (PC 16/20) */
  .crd-search-label {
    font-size: 14px;
    line-height: 20px;
  }

  /* 검색 영역 풀폭 + main과 동일 호흡 */
  .crd-search {
    width: 100%;
    gap: 20px;
  }

  .crd-search-row {
    gap: 8px;
  }

  /* PC chip 필터 숨김, 모바일 Select 노출 */
  .crd-filter-row--pc {
    display: none;
  }

  .crd-filter-label--mb {
    display: block;
    margin-top: 12px;
  }

  .crd-select-wrap {
    display: block;
    width: 100%;
  }

  /* 참여자 헤더 톤 */
  .crd-participants-title {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0;
  }

  .crd-participants-count {
    font-size: 13px;
    line-height: 18px;
  }

  /* 카드 1열 + 풀폭 vertical 레이아웃 */
  .crd-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Mobile column layout — info 82 + gap 16 + btn 40 + padding 36 = 174 (email 있을 때).
     min-height 174 로 강제해 skeleton/정상/disabled/email 유무 무관하게 모든 카드 동일 height. */
  .crd-card {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 20px;
    gap: 16px;
    min-height: 174px;
  }

  .crd-card-info {
    flex: 0 0 auto; /* PC의 flex:1 1 0 reset — column에서 height 0 되는 문제 해결 */
    width: 100%;
    /* overflow: hidden은 PC 정의 그대로 유지 (자식 ellipsis 동작에 필요) */
  }
  /* name/amount는 PC와 동일 white-space:nowrap + text-ellipsis 유지 (Figma 일치) */

  .crd-card-btn {
    width: 100%;
    height: 40px;
    font-size: 16px;
    line-height: 22px;
  }

  /* 검색 input PC/모바일 분기 */
  .crd-search-input--pc {
    display: none;
  }
  .crd-search-input--mb {
    display: block;
  }

  /* 페이지네이션은 PC와 동일 (Figma 모바일도 gap 20 / controls gap 18) */
}

/* 극소형 모바일 (≤480px) */
@media (max-width: 480px) {
  .crd-main {
    padding: 20px 16px 100px;
  }

  .crd-card-name {
    font-size: 18px;
    line-height: 26px;
  }
}

/* ============================================================
   참여자 상세 (CoReset Directory Detail) — coreset_directory_detail.html
   prefix: crdd-
============================================================ */

.crdd-main {
  /* 코리셋 모듈 디자인 토큰 (페이지 scope) */
  --crdd-card-bg:     #353539;
  --crdd-profile-bg:  #3a3a3e;
  --crdd-cream:       #e6dbc8;
  --crdd-text-main:   #f1f1f1;
  --crdd-text-muted:  #b5b5b5;
  --crdd-text-header: #303030;
  --crdd-page-bg:     #272729;
  --crdd-radius-card:   12px;
  --crdd-radius-button:  4px;

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 48px 100px;
  background: var(--crdd-page-bg);
  /* min-height 미설정 — Figma main h=874 콘텐츠+padding 자연 결정 */
}

.crdd-content {
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* 디렉토리로 돌아가기 link */
.crdd-back-link {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--crdd-cream);
  text-decoration: none;
  white-space: nowrap;
}
.crdd-back-link:hover {
  color: var(--crdd-cream);
  opacity: .85;
}

/* 페이지 제목 */
.crdd-title {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 42px;
  letter-spacing: -0.32px;
  color: var(--crdd-text-main);
  margin: 0;
}

.crdd-subtitle {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--crdd-text-muted);
  margin: 0;
}

/* 참여자 정보 카드 */
.crdd-info-card {
  background: var(--crdd-card-bg);
  border: 1px solid var(--crdd-profile-bg);
  border-radius: var(--crdd-radius-card);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gap: Figma 명시 없음 — space-between으로 양쪽 끝 정렬 */
}

.crdd-info-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.crdd-info-block--right {
  align-items: flex-end;
}

.crdd-info-label {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--crdd-text-muted);
}

.crdd-info-name {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.2px;
  color: var(--crdd-text-main);
}

.crdd-info-amount {
  display: inline-block;
  color: var(--crdd-text-main);
}
.crdd-amount-num {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.09px;
}
.crdd-amount-unit {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 26px;
  letter-spacing: -0.06px;
}

/* 지갑 카드 */
.crdd-wallet-card {
  background: var(--crdd-card-bg);
  border: 1px solid var(--crdd-profile-bg);
  border-radius: var(--crdd-radius-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.crdd-wallet-label {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--crdd-text-muted);
  margin: 0;
}

.crdd-wallet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* PC: gap 0 — Figma는 address 522 + button 110이 정확히 인접 (632w에 딱 맞춤) */
}

.crdd-wallet-address {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--crdd-text-main);
  word-break: break-all;
}

.crdd-copy-btn {
  flex: 0 0 auto;
  width: 110px;
  height: 40px;
  padding: 0 16px;
  background: transparent;
  border: 1.5px solid var(--crdd-cream);
  border-radius: var(--crdd-radius-button);
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--crdd-cream);
  cursor: pointer;
  white-space: nowrap;
}

.crdd-wallet-meta {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-top: 12px;
}

.crdd-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.crdd-meta-label {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--crdd-text-muted);
}

.crdd-meta-value {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: normal;
  color: var(--crdd-text-main);
}

/* NoticeBox */
.crdd-notice {
  background: var(--crdd-card-bg);
  border-left: 4px solid var(--crdd-cream);
  border-radius: 8px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
}

.crdd-notice-line {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--crdd-text-main);
  margin: 0;
}

/* CTA */
.crdd-cta-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.crdd-cta-btn {
  width: 360px;
  height: 50px;
  padding: 0 24px;
  background: var(--crdd-cream);
  border: 0;
  border-radius: var(--crdd-radius-button);
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--crdd-text-header);
  cursor: pointer;
  white-space: nowrap;
}

/* ============================================================
   모바일 (≤1200px) — S3 참여자 상세 모바일 (414w 기준)
============================================================ */
@media (max-width: 1200px) {
  .crdd-main {
    padding: 24px 16px 100px;
    align-items: stretch;
  }

  .crdd-content {
    max-width: 100%;
    gap: 20px;
  }

  /* 모바일 헤더에 이미 표시 → back/title/subtitle 숨김 */
  .crdd-back-link,
  .crdd-title,
  .crdd-subtitle {
    display: none;
  }

  /* 참여자 정보 카드 — column 변경 */
  .crdd-info-card {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    gap: 16px;
  }
  .crdd-info-block,
  .crdd-info-block--right {
    align-items: flex-start;
  }

  /* 지갑 카드 */
  .crdd-wallet-card {
    padding: 20px;
    gap: 16px;
  }

  /* 지갑 row — column으로 변경 */
  .crdd-wallet-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  /* 주소 텍스트 — page-bg 박스 안에 표기 */
  .crdd-wallet-address {
    background: var(--crdd-page-bg);
    padding: 12px;
    border-radius: 8px;
  }

  /* 주소 복사 버튼 — 풀폭 50h, 폰트 키움 */
  .crdd-copy-btn {
    width: 100%;
    height: 50px;
    font-size: 20px;
    line-height: 24px;
  }

  /* 메타 라벨 톤 다운 (모바일) */
  .crdd-meta-item {
    gap: 2px;
  }
  .crdd-meta-label {
    font-size: 12px;
    line-height: normal;
  }
  .crdd-meta-value {
    font-size: 14px;
    line-height: normal;
  }

  /* CTA 풀폭 */
  .crdd-cta-btn {
    width: 100%;
  }
}

/* ============================================================
   S4 — TX 입력 모달 / 바텀시트
   prefix: crdtx-
   파일: coreset_directory_tx_modal.html
   - 데스크톱: 중앙 모달 (640w, rounded:16, shadow)
   - 모바일(≤1199): 하단 바텀시트 (full-width, rounded-top:20, drag handle)
============================================================ */
.crdtx-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.crdtx-modal {
  --crdtx-card-bg:     #353539;
  --crdtx-page-bg:     #272729;
  --crdtx-border:      #3a3a3e;
  --crdtx-cream:       #e6dbc8;
  --crdtx-text-main:   #f1f1f1;
  --crdtx-text-muted:  #b5b5b5;
  --crdtx-text-header: #303030;
  --crdtx-error:       #F1634F;
  --crdtx-handle:      #5a5a62;

  width: 640px;
  background: var(--crdtx-card-bg);
  border: 1px solid var(--crdtx-border);
  border-radius: 16px;
  box-shadow: 0 24px 48px 0 rgba(0, 0, 0, 0.5);
  padding: 24px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: 'Nanum Gothic', sans-serif;
  box-sizing: border-box;
}

/* drag handle (모바일 전용) */
.crdtx-handle-wrap {
  display: none;
}

/* 헤더 */
.crdtx-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.crdtx-title {
  margin: 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -0.24px;
  color: var(--crdtx-text-main);
}

.crdtx-close {
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.crdtx-close img {
  width: 14px;
  height: 14px;
  display: block;
}

/* 검증 대상 카드 */
.crdtx-target {
  background: var(--crdtx-page-bg);
  border: 1px solid var(--crdtx-border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.crdtx-target-label {
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: var(--crdtx-text-muted);
}

.crdtx-target-name {
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.09px;
  color: var(--crdtx-text-main);
}

.crdtx-target-addr {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--crdtx-text-muted);
}

.crdtx-target-meta {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.4px;
  color: var(--crdtx-text-muted);
}

/* TX Hash 입력 영역 */
.crdtx-input-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crdtx-input-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.crdtx-input-label {
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--crdtx-text-muted);
}

.crdtx-paste-btn {
  width: 110px;
  height: 40px;
  padding: 0 16px;
  background: transparent;
  border: 1.5px solid var(--crdtx-text-muted);
  border-radius: 4px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--crdtx-text-muted);
  cursor: pointer;
}

.crdtx-input-field {
  display: block;
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 14px;
  background: var(--crdtx-page-bg);
  border: 1px solid var(--crdtx-border);
  border-radius: 8px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--crdtx-text-main);
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.crdtx-input-field::placeholder {
  color: var(--crdtx-text-muted);
  opacity: 1;
}

.crdtx-input-field:focus {
  border-color: var(--crdtx-cream);
}

.crdtx-input-hint {
  margin: 0;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: var(--crdtx-text-muted);
}

.crdtx-error {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
}

.crdtx-error-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crdtx-error);
  flex-shrink: 0;
}

.crdtx-error-text {
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  color: var(--crdtx-text-main);
}

/* NoticeBox */
.crdtx-notice {
  background: var(--crdtx-card-bg);
  border-left: 4px solid var(--crdtx-cream);
  border-radius: 8px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
}

.crdtx-notice-line {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--crdtx-text-main);
}

/* 확인 버튼 */
.crdtx-confirm-btn {
  width: 100%;
  height: 50px;
  padding: 0 24px;
  background: var(--crdtx-cream);
  border: none;
  border-radius: 4px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--crdtx-text-header);
  cursor: pointer;
}

/* ============================================================
   모바일 — 바텀시트 변환 (≤ 1199px)
============================================================ */
@media (max-width: 1199px) {
  .crdtx-overlay {
    align-items: flex-end;
  }

  .crdtx-modal {
    width: 100%;
    max-width: 100%;
    border: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 24px 0 rgba(0, 0, 0, 0.4);
    padding: 12px 16px 32px;
    gap: 24px;
  }

  .crdtx-handle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .crdtx-handle {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--crdtx-handle);
  }

  .crdtx-title {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.2px;
  }

  .crdtx-close {
    width: 44px;
    height: 44px;
    border-radius: 0;
  }

  .crdtx-notice-line {
    font-size: 14px;
    line-height: 22px;
  }
}

/* ============================================================
   coreset_directory* — 버튼 hover & 인터랙션
   prefix: crd- / crdd- / crdtx-
   원칙:
   - cream filled CTA hover: #d4c9b3 (기존 .crc-btn-next, .crb-btn-next와 일관)
   - cream outline hover: filled로 전환 (bg cream / text dark)
   - 회색 outline (paste): border/text를 text-main으로 강조
   - icon-only transparent: bg rgba(255,255,255,0.06)
   - text link: underline 추가
   - transition: 150ms ease (micro-interaction)
============================================================ */

/* 부드러운 전환 */
.crd-search-btn,
.crd-chip,
.crd-card,
.crd-card-btn,
.crd-page-btn,
.crd-select-toggle,
.crd-page-selector-toggle,
.crdd-back-link,
.crdd-copy-btn,
.crdd-cta-btn,
.crdtx-close,
.crdtx-paste-btn,
.crdtx-confirm-btn {
  transition: background-color 150ms ease,
  border-color 150ms ease,
  color 150ms ease,
  box-shadow 150ms ease;
}

/* ── crd- (오픈 디렉토리 목록) ─────────────── */

/* 검색 버튼 (icon-only transparent) */
.crd-search-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* 칩 — 비활성: border/text를 cream으로 강조 */
.crd-chip:hover {
  border-color: #e6dbc8;
  color: #e6dbc8;
}

/* 칩 — 활성 (cream filled) */
.crd-chip--active:hover {
  background: #d4c9b3;
  border-color: #d4c9b3;
  color: #303030;
}

/* 셀렉트 토글 (드롭다운) */
.crd-select-toggle:hover,
.crd-page-selector-toggle:hover {
  border-color: #e6dbc8;
}

/* 카드 — border 강조 (실제 click 타겟은 카드 안 버튼). disabled 카드는 hover 비활성 */
.crd-card:hover {
  border-color: #b7cd47;
}

.crd-card:has(.crd-card-btn:disabled):hover {
  border-color: var(--crd-profile-bg);
}

/* 카드 안 버튼 (lime filled) — hover 시 더 진한 lime */
.crd-card-btn:hover {
  background: #a3b73e;
}

/* disabled 버튼은 hover 색 변경 안 함 — disabled 시 background 항상 #afafaf */
.crd-card-btn:disabled:hover {
  background: #afafaf;
}

/* 페이지네이션 화살표 (icon-only transparent) */
.crd-page-btn:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}

/* 페이지네이션 비활성 (첫/마지막 페이지) — 아이콘 흐리게 + hover/cursor 차단 */
.crd-page-btn:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.crd-page-btn:disabled img {
  opacity: 0.28;
}

/* ── crdd- (참여자 정보) ─────────────── */

/* 디렉토리로 돌아가기 (텍스트 링크) — underline */
.crdd-back-link:hover {
  color: var(--crdd-cream);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 주소 복사 (cream outline) — filled로 전환 */
.crdd-copy-btn:hover {
  background: var(--crdd-cream);
  color: var(--crdd-text-header);
}

/* TX 입력하기 (cream filled) */
.crdd-cta-btn:hover {
  background: #d4c9b3;
}

/* ── crdtx- (TX 입력 모달) ─────────────── */

/* close (icon-only) */
.crdtx-close:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* 붙여넣기 (muted outline) — border/text를 text-main으로 강조 */
.crdtx-paste-btn:hover {
  border-color: var(--crdtx-text-main);
  color: var(--crdtx-text-main);
}

/* 확인 (cream filled) */
.crdtx-confirm-btn:hover {
  background: #d4c9b3;
}

/* ============================================================
   S5 — TX 검증 중 모달 / 바텀시트
   prefix: crdv- (CoReset Directory Verifying)
   파일: coreset_directory_verifying.html
   - 데스크톱: 중앙 모달 (640w, h 자동, rounded:16)
   - 모바일(≤1199): 하단 바텀시트 (full-width, h:780 / calc(100vh-78px))
   - 큰/작은 스피너는 lottie (assets/lottie/*.json)
============================================================ */
.crdv-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.crdv-modal {
  --crdv-card-bg:     #353539;
  --crdv-page-bg:     #272729;
  --crdv-border:      #3a3a3e;
  --crdv-cream:       #e6dbc8;
  --crdv-text-main:   #f1f1f1;
  --crdv-text-muted:  #b5b5b5;
  --crdv-text-header: #303030;
  --crdv-handle:      #5a5a62;

  width: 640px;
  background: var(--crdv-card-bg);
  border: 1px solid var(--crdv-border);
  border-radius: 16px;
  box-shadow: 0 24px 48px 0 rgba(0, 0, 0, 0.5);
  padding: 24px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: 'Nanum Gothic', sans-serif;
  box-sizing: border-box;
}

/* drag handle (모바일 전용) */
.crdv-handle-wrap {
  display: none;
}

/* 헤더 */
.crdv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.crdv-title {
  margin: 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -0.24px;
  color: var(--crdv-text-main);
}

/* 검증 중에는 close 비활성 (opacity 0.4) */
.crdv-close,
.crdv-close:disabled,
.crdv-close[disabled] {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  background-color: transparent;
  border: none;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  cursor: not-allowed;
  outline: none;
  box-shadow: none;
}

.crdv-close img {
  width: 14px;
  height: 14px;
  display: block;
}

/* 검증 중 상태 영역 */
.crdv-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0 24px;
  width: 100%;
}

/* 큰 스피너 — lottie 컨테이너 */
.crdv-spinner {
  width: 48px;
  height: 48px;
}

.crdv-status-title {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.2px;
  color: var(--crdv-text-main);
}

.crdv-status-desc {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--crdv-text-muted);
}

/* spacer (모바일 전용 — 시트 풀높이 분리용) */
.crdv-spacer {
  display: none;
}

/* 체크리스트 */
.crdv-checklist {
  list-style: none;
  margin: 0;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crdv-step {
  display: flex;
  align-items: center;
  gap: 12px;
}

.crdv-step-text {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

/* 단계 상태별 텍스트 색상 */
.crdv-step--done .crdv-step-text,
.crdv-step--active .crdv-step-text {
  color: var(--crdv-text-main);
}

.crdv-step--pending .crdv-step-text {
  color: var(--crdv-text-muted);
}

/* 16×16 아이콘 슬롯 (inline svg 또는 lottie wrapper)
   - block으로 만들어 baseline 정렬 영향 제거 → 행 vertical center 균일
   - 내부 SVG도 block + 박스 100% fit (lottie가 삽입한 svg 포함) */
.crdv-icon-check,
.crdv-icon-dot,
.crdv-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.crdv-icon-check,
.crdv-icon-dot {
  /* inline svg는 그대로 — display:block으로 baseline 정렬 차단 */
}

.crdv-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.crdv-icon--mini-spinner {
  width: 16px;
  height: 16px;
}

/* ============================================================
   모바일 — 바텀시트 변환 (≤ 1199px)
============================================================ */
@media (max-width: 1199px) {
  .crdv-overlay {
    align-items: flex-end;
  }

  .crdv-modal {
    width: 100%;
    max-width: 100%;
    border: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 24px 0 rgba(0, 0, 0, 0.4);
    padding: 12px 16px 32px;
    gap: 20px;
    /* Figma 명시값 — 다음 동작(완료/실패 전환) 고려한 고정 높이 */
    height: 780px;
  }

  .crdv-handle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    opacity: 0.3;
  }

  .crdv-handle {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--crdv-handle);
  }

  .crdv-title {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.2px;
  }

  .crdv-close {
    width: 44px;
    height: 44px;
    border-radius: 0;
  }

  /* 모바일은 검증영역 pb-20 (데스크톱 pb-24와 다름) */
  .crdv-status {
    padding: 16px 0 20px;
  }

  /* spacer — Figma 지정 높이 212 고정 (시트 height 780과 함께 절대 좌표 유지) */
  .crdv-spacer {
    display: block;
    flex: 0 0 212px;
    height: 212px;
    width: 100%;
  }
}

/* ============================================================
   S5 — 검증 완료 모달 / 바텀시트 (Success)
   prefix: crds- (CoReset Directory Success)
   파일: coreset_directory_success.html
   - 데스크톱: 중앙 모달 (640w, h:auto)
   - 모바일(≤1199): 하단 바텀시트 (full-width, h:780 hardcoded)
   - close 버튼: 활성 (성공 상태이므로 닫기 가능)
============================================================ */
.crds-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.crds-modal {
  --crds-card-bg:     #353539;
  --crds-page-bg:     #272729;
  --crds-info-bg:     #3a3a3e;  /* 정보 카드 bg = profile-bg */
  --crds-border:      #3a3a3e;
  --crds-cream:       #e6dbc8;
  --crds-cream-hover: #d4c9b3;
  --crds-text-main:   #f1f1f1;
  --crds-text-muted:  #b5b5b5;
  --crds-text-header: #303030;
  --crds-handle:      #5a5a62;
  --crds-success:     #AFCE35;

  width: 640px;
  background: var(--crds-card-bg);
  border: 1px solid var(--crds-border);
  border-radius: 16px;
  box-shadow: 0 24px 48px 0 rgba(0, 0, 0, 0.5);
  padding: 24px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: 'Nanum Gothic', sans-serif;
  box-sizing: border-box;
}

/* drag handle (모바일 전용) */
.crds-handle-wrap {
  display: none;
}

/* 헤더 */
.crds-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.crds-title {
  margin: 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -0.24px;
  color: var(--crds-text-main);
}

.crds-close,
.crds-close:disabled,
.crds-close[disabled] {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  background-color: transparent;
  border: none;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  transition: background-color 150ms ease;
}

.crds-close img {
  width: 14px;
  height: 14px;
  display: block;
}

.crds-close:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* 상태 영역 (큰 체크 + 제목 + 부연) */
.crds-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 0 8px;
  width: 100%;
}

.crds-status-icon {
  display: block;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.crds-status-title {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.2px;
  color: var(--crds-text-main);
}

.crds-status-desc {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--crds-text-muted);
  text-align: center;
}

/* 정보 카드 */
.crds-info {
  margin: 0;
  padding: 16px;
  background: var(--crds-info-bg);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crds-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  width: 100%;
}

.crds-info-label {
  margin: 0;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: var(--crds-text-muted);
}

.crds-info-value {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--crds-text-main);
}

/* 권리 기록 row 전용 — 숫자 + 단위 mixed font-size */
.crds-info-value--mixed {
  font-size: 0;
  line-height: 0;
}

.crds-info-num {
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--crds-text-main);
}

.crds-info-unit {
  font-weight: 700;
  font-size: 10px;
  line-height: 20px;
  color: var(--crds-text-main);
}

/* 단계별 체크 (6개 모두 완료) */
.crds-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crds-step {
  display: flex;
  align-items: center;
  gap: 10px;
}

.crds-step-icon {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.crds-step-text {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--crds-text-muted);
}

/* CTA */
.crds-confirm-btn {
  width: 100%;
  height: 50px;
  padding: 0 24px;
  background: var(--crds-cream);
  border: none;
  border-radius: 4px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--crds-text-header);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.crds-confirm-btn:hover {
  background: var(--crds-cream-hover);
}

/* ============================================================
   모바일 — 바텀시트 변환 (≤ 1199px)
============================================================ */
@media (max-width: 1199px) {
  .crds-overlay {
    align-items: flex-end;
  }

  .crds-modal {
    width: 100%;
    max-width: 100%;
    border: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 24px 0 rgba(0, 0, 0, 0.4);
    padding: 12px 16px 32px;
    gap: 20px;
    /* Figma 명시 — 자식 합산도 정확히 780 */
    height: 780px;
  }

  .crds-handle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .crds-handle {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--crds-handle);
  }

  .crds-title {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.2px;
  }

  .crds-close,
  .crds-close:disabled,
  .crds-close[disabled] {
    width: 44px;
    height: 44px;
    border-radius: 0;
  }
}

/* ============================================================
   S5 — 검증 실패 모달 / 바텀시트 (Failed)
   prefix: crdf- (CoReset Directory Failed)
   파일: coreset_directory_failed.html
   - 데스크톱: 중앙 모달 (640w, h:auto)
   - 모바일(≤1199): 하단 바텀시트 (full-width, h:780)
   - 단계 상태: done(✓ lime), failed(✗ coral, Bold), pending(dot gray)
   - 에러박스 내부 순서: 데스크톱 (제목→부연→비교) / 모바일 (제목→비교→부연)
============================================================ */
.crdf-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.crdf-modal {
  --crdf-card-bg:     #353539;
  --crdf-page-bg:     #272729;
  --crdf-error-bg:    #3a3a3e;  /* 에러 박스 bg = profile-bg */
  --crdf-border:      #3a3a3e;
  --crdf-cream:       #e6dbc8;
  --crdf-cream-hover: #d4c9b3;
  --crdf-text-main:   #f1f1f1;
  --crdf-text-muted:  #b5b5b5;
  --crdf-text-header: #303030;
  --crdf-handle:      #5a5a62;
  --crdf-success:     #AFCE35;
  --crdf-coral:       #F1634F;
  --crdf-pending:     #5A5A62;

  width: 640px;
  background: var(--crdf-card-bg);
  border: 1px solid var(--crdf-border);
  border-radius: 16px;
  box-shadow: 0 24px 48px 0 rgba(0, 0, 0, 0.5);
  padding: 24px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: 'Nanum Gothic', sans-serif;
  box-sizing: border-box;
}

.crdf-handle-wrap {
  display: none;
}

/* 모바일 전용 spacer (Figma 153:881, 159:881) — h:4
   - 데스크톱에서는 hidden (status ↔ error ↔ steps 사이 추가 여백 없음)
   - 모바일에서는 시트 height 780과 자식 합 매칭을 위해 표시 */
.crdf-spacer {
  display: none;
}

/* 헤더 */
.crdf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.crdf-title {
  margin: 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -0.24px;
  color: var(--crdf-text-main);
}

.crdf-close,
.crdf-close:disabled,
.crdf-close[disabled] {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  background-color: transparent;
  border: none;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  transition: background-color 150ms ease;
}

.crdf-close img {
  width: 14px;
  height: 14px;
  display: block;
}

.crdf-close:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* 상태 영역 (큰 X + 제목 + 부연) */
.crdf-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 0 8px;
  width: 100%;
}

.crdf-status-icon {
  display: block;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.crdf-status-title {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.2px;
  color: var(--crdf-text-main);
}

.crdf-status-desc {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--crdf-text-muted);
  text-align: center;
}

/* 에러 박스 (border-l 4 coral)
   - Figma: 자식 x:20 (frame 기준)
   - border 4 + padding-left 16 = 20 (Figma 자식 시작 위치) */
.crdf-error {
  background: var(--crdf-error-bg);
  border-left: 4px solid var(--crdf-coral);
  border-radius: 8px;
  padding: 16px 20px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crdf-error-title {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  color: var(--crdf-text-main);
}

.crdf-error-desc {
  margin: 0;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: var(--crdf-text-muted);
}

/* 주소 비교 */
.crdf-compare {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
  width: 100%;
}

.crdf-compare-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.crdf-compare-label {
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: var(--crdf-text-muted);
}

.crdf-compare-value {
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  color: var(--crdf-text-main);
  word-break: break-all;
}

/* 단계 체크리스트 */
.crdf-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crdf-step {
  display: flex;
  align-items: center;
  gap: 10px;
}

.crdf-step-icon {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.crdf-step-text {
  font-size: 13px;
  line-height: 18px;
}

/* 단계 상태별 텍스트 */
.crdf-step--done .crdf-step-text {
  font-weight: 400;
  color: var(--crdf-text-main);
}

.crdf-step--failed .crdf-step-text {
  font-weight: 700;  /* 실패는 Bold 강조 */
  color: var(--crdf-text-main);
}

.crdf-step--pending .crdf-step-text {
  font-weight: 400;
  color: var(--crdf-text-muted);
}

/* CTA */
.crdf-confirm-btn {
  width: 100%;
  height: 50px;
  padding: 0 24px;
  background: var(--crdf-cream);
  border: none;
  border-radius: 4px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--crdf-text-header);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.crdf-confirm-btn:hover {
  background: var(--crdf-cream-hover);
}

/* ============================================================
   모바일 — 바텀시트 변환 (≤ 1199px)
============================================================ */
@media (max-width: 1199px) {
  .crdf-overlay {
    align-items: flex-end;
  }

  .crdf-modal {
    width: 100%;
    max-width: 100%;
    border: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 24px 0 rgba(0, 0, 0, 0.4);
    padding: 12px 16px 32px;
    gap: 20px;
    height: 780px;
  }

  .crdf-handle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .crdf-handle {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--crdf-handle);
  }

  .crdf-title {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.2px;
  }

  .crdf-close,
  .crdf-close:disabled,
  .crdf-close[disabled] {
    width: 44px;
    height: 44px;
    border-radius: 0;
  }

  /* 에러박스 내부 순서 변경: 제목 → 비교 → 부연 (Figma 모바일) */
  .crdf-error-desc {
    order: 2;
  }
  .crdf-compare {
    order: 1;
  }

  /* spacer 활성화 — Figma 153:881, 159:881 (h:4 each) */
  .crdf-spacer {
    display: block;
    width: 100%;
    height: 4px;
    flex: 0 0 4px;
  }
}

/* ============================================================
   mypage_license_history.html — 라이선스 실행 내역 (D1)
   - 다크 테마 마이페이지 신규 메뉴 (Figma node 244:826 / 258:1075)
   - .dao-mlh-page 스코프로 격리하여 기존 페이지에 영향 없도록 처리
============================================================ */

/* 페이지 컨테이너 (PC) ----------------------------------------- */
body.dao-mlh-page {
  background: #272729;
}

.dao-mlh-main {
  flex: 1;
  min-width: 0;
  background: #272729;
  padding: 56px 162px 56px 161px;
  display: flex;
  flex-direction: column;
}

.mlh-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 1320px;   /* Figma content width — 화면 1920+ 폭에서 NoticeBox/Pagination이 우측으로 늘어나는 것 방지 */
  margin: 0 auto;      /* 1920+ 폭에서 main 안쪽 영역 가운데 정렬 (1920에서는 padding 161/162로 0 여백이라 영향 없음) */
}

/* Footer — 다크 보정 ------------------------------------------ */
.dao-mlh-page .dao-footer {
  background: #272729;
}

/* Title block ------------------------------------------------- */
.mlh-title-block {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mlh-title-accent {
  width: 4px;
  height: 36px;
  background: #e6dbc8;
  flex-shrink: 0;
}

.mlh-title-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mlh-title {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: normal;
  color: #f1f1f1;
  white-space: nowrap;
}

.mlh-subtitle {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: #b5b5b5;
  white-space: nowrap;
}

/* Summary cards (PC: 4열) -------------------------------------- */
.mlh-summary-row {
  display: flex;
  gap: 24px;
}

/* Summary 카드 — Figma 디자인 라이트 톤 (#f1f1f1 / #f0e1d0 + #412000 텍스트).
   PC: 첫 카드/크림 카드는 border 없음, 3·4번 카드만 border. 모바일은 4개 모두 border (모바일 디자인 일관). */
.mlh-summary-card {
  display: flex;
  align-items: stretch;
  width: 312px;
  background: #f1f1f1;
  border-radius: 12px;
  overflow: hidden;
}

.mlh-summary-card:nth-child(3),
.mlh-summary-card:nth-child(4) {
  border: 1px solid #3a3a3e;
}

.mlh-summary-card--cream {
  background: #f0e1d0;
}

.mlh-summary-accent {
  width: 4px;
  flex-shrink: 0;
  align-self: stretch;
  background: transparent;
}

/* cream 카드는 디자인상 accent bar 없음 — 4px 자리만 비워 일관된 padding 유지 */
.mlh-summary-accent--cream {
  background: transparent;
}

.mlh-summary-content {
  flex: 1;
  min-width: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.mlh-summary-label {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: #412000;
}

.mlh-summary-value-row {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  white-space: nowrap;
}

.mlh-summary-value {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 38px;
  color: #412000;
  letter-spacing: -0.28px;
}

.mlh-summary-value--cream {
  color: #412000;
}

/* Loading skeleton — value slot only (label/unit/accent stays visible)
   Outer height matches mlh-summary-value line-height (38px) so that the
   parent flex row keeps a stable height and the card doesn't jump when
   the real number replaces the bar. The visual bar is drawn via ::before
   so that its thickness (28px) is independent of the layout box. */
.mlh-summary-skeleton {
  display: inline-block;
  position: relative;
  width: 96px;
  height: 38px;
  vertical-align: bottom;
  background: transparent;
}

.mlh-summary-skeleton::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(65, 32, 0, 0.06) 0%,
    rgba(65, 32, 0, 0.16) 50%,
    rgba(65, 32, 0, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: mlh-skeleton-shimmer 1.6s ease-in-out infinite;
}

.mlh-summary-skeleton--cream::before {
  background: linear-gradient(
    90deg,
    rgba(65, 32, 0, 0.08) 0%,
    rgba(65, 32, 0, 0.18) 50%,
    rgba(65, 32, 0, 0.08) 100%
  );
  background-size: 200% 100%;
  animation: mlh-skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes mlh-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mlh-summary-skeleton::before,
  .mlh-summary-skeleton--cream::before {
    animation: none;
  }
}

.mlh-summary-unit {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  color: #412000;
}

/* NoticeBox --------------------------------------------------- */
.mlh-notice {
  width: 100%;
  background: #353539;
  border-left: 4px solid #e6dbc8;
  border-radius: 8px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
}

.mlh-notice-line {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #f1f1f1;
}

/* Filter bar -------------------------------------------------- */
.mlh-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mlh-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mlh-filter-label {
  width: 48px;
  flex-shrink: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #f1f1f1;
}

.mlh-date-wrap {
  position: relative;
  width: 220px;
  height: 50px;
  flex-shrink: 0;
}

.mlh-date-input {
  width: 100%;
  height: 100%;
  background: #353539;
  border: 1px solid #3a3a3e;
  border-radius: 8px;
  padding: 0 16px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #f1f1f1;
  outline: none;
  transition: border-color 150ms ease;
}

.mlh-date-input::placeholder {
  color: #b5b5b5;
}

.mlh-date-wrap:hover .mlh-date-input,
.mlh-date-input:focus {
  border-color: #4a4a4e;
}

.mlh-date-cal {
  position: absolute;
  top: 15px;
  left: 184px;
  width: 20px;
  height: 20px;
  border: 1.5px solid #b5b5b5;
  border-radius: 2px;
  pointer-events: none;
  display: block;
}

.mlh-date-cal-bar {
  position: absolute;
  top: 3.5px;
  left: -1.5px;
  width: 20px;
  height: 1.5px;
  background: #b5b5b5;
  display: block;
}

.mlh-date-cal-tick {
  position: absolute;
  top: -3.5px;
  width: 1.5px;
  height: 4px;
  background: #b5b5b5;
  display: block;
}

.mlh-date-cal-tick--l { left: 3.5px; }
.mlh-date-cal-tick--r { left: 12px; }

.mlh-date-sep {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #b5b5b5;
}

/* Search Type dropdown — Figma 876:3956;251:11: bg #353539, border 1.5px #eee (라이트 강조), text #d9d9d9 */
.mlh-search-type {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 220px;
  height: 50px;
  background: #353539;
  border: 1.5px solid #eee;
  border-radius: 8px;
  padding-left: 16px;
  padding-right: 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 150ms ease;
}

.mlh-search-type:hover {
  border-color: #fff;
}

.mlh-search-type--status {
  width: 220px;
}

.mlh-search-type-wrap--status .mlh-search-type-value {
  white-space: nowrap;
}

.mlh-search-type-value {
  flex: 1;
  min-width: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #d9d9d9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mlh-search-type-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Keyword input — Figma 876:3956;251:15: 라이트 배경 #eee, border 없음, placeholder #b5b5b5 */
.mlh-search-keyword {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;             /* flex 자식 축소 허용 (intrinsic 크기 무시) */
  max-width: 500px;         /* Figma 1920 디자인 폭 — 콘텐츠 영역이 좁아지면 자동 축소 */
  height: 50px;
  background: #eee;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  transition: background-color 150ms ease;
}

.mlh-search-keyword:hover,
.mlh-search-keyword:focus-within {
  background: #f5f5f5;
}

.mlh-search-keyword-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #272729;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mlh-search-keyword-input::placeholder {
  color: #b5b5b5;
}

.mlh-search-btn {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms ease;
}

.mlh-search-btn:hover {
  background: rgba(255, 255, 255, 0.04);
}

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

/* Sort & Count ------------------------------------------------ */
.mlh-sort-count {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #b5b5b5;
}

/* Data Table (PC) — Figma 디자인: 카드형 wrapper (bg #353539, border 3px #7c7c7c, radius 12px),
   thead bg transparent, 헤더 16px Bold center #b5b5b5, 데이터/헤더 모두 가운데 정렬 */
.mlh-table-wrap {
  width: 1320px;
  max-width: 100%;
  background: #353539;
  border: 3px solid #7c7c7c;
  border-radius: 12px;
  overflow-x: auto;        /* 1920 미만 좁은 PC 폭에서 테이블 가로 스크롤 */
  overflow-y: hidden;
}

.mlh-table {
  width: 1320px;            /* Figma 디자인 폭 고정 — wrap이 좁아져도 cell width 보존 */
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0;
}

.mlh-table thead .mlh-th {
  height: 56px;
  background: transparent;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #b5b5b5;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #3a3a3e;
  /* padding은 col 클래스에서 명시 — 여기서 padding 정의 시 specificity가 col을 덮어 헤더/데이터 정렬 어긋남 */
}

.mlh-table-row {
  height: 80px;
  background: transparent;
  border-bottom: 1px solid #3a3a3e;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.mlh-table-row:hover {
  background: #3f3f43;
}

.mlh-table-row .mlh-td {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #f1f1f1;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 6컬럼 너비/padding — Figma 새 디자인: 행 padding 0, 각 셀 자체 padding-left:24 padding-right:16, 가운데 정렬.
   합계 220+320+160+160+220+240 = 1320 ✓ */
.mlh-col-name {
  width: 220px;
  padding-left: 24px;
  padding-right: 16px;
}
.mlh-col-wallet {
  width: 320px;
  padding-left: 24px;
  padding-right: 16px;
}
.mlh-col-amount {
  width: 160px;
  padding-left: 24px;
  padding-right: 16px;
}
.mlh-col-status {
  width: 160px;
  padding-left: 24px;
  padding-right: 16px;
}
.mlh-col-date {
  width: 220px;
  padding-left: 24px;
  padding-right: 16px;
}
.mlh-col-detail {
  width: 240px;
  padding-left: 24px;
  padding-right: 16px;
  overflow: visible !important;
}

/* 데이터 셀 컬럼별 폰트 차별화 — Figma 435:3408 등.
   닉네임/이전 수량/상태 = Bold 14 #f1f1f1, 지갑/일시 = Reg 13 #b5b5b5(muted) */
.mlh-table-row .mlh-col-name {
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  color: #f1f1f1;
}
.mlh-table-row .mlh-col-wallet {
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: #b5b5b5;
}
.mlh-table-row .mlh-col-amount {
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  color: #f1f1f1;
}
.mlh-table-row .mlh-col-status {
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  color: #f1f1f1;
}
.mlh-table-row .mlh-col-status.mlh-col-status--processing { color: #e6dbc8; }
.mlh-table-row .mlh-col-status.mlh-col-status--refunded  { color: #b5b5b5; }
.mlh-table-row .mlh-col-status.mlh-col-status--expired   { color: #f1634f; }
.mlh-table-row .mlh-col-date {
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: #b5b5b5;
}

/* 상세보기 버튼 — Figma 435:3420: subtle border 1px #3a3a3e + Reg 13 #f1f1f1 + radius 8 */
.mlh-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 40px;
  background: transparent;
  border: 1px solid #3a3a3e;
  border-radius: 8px;
  padding: 0 16px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: #f1f1f1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.mlh-detail-btn:hover {
  background: rgba(230, 219, 200, 0.06);
  border-color: #e6dbc8;
}

/* Empty state (table + card) ---------------------------------- */
.mlh-empty-row {
  height: 240px;
  background: #353539;
}

.mlh-empty-cell {
  text-align: center;
  vertical-align: middle;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #b5b5b5;
}

.mlh-card-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: #353539;
  border-radius: 12px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #b5b5b5;
}

/* Card list (Mobile) ------------------------------------------ */
.mlh-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mlh-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #353539;
  border: 1px solid #3a3a3e;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: background-color 150ms ease,
  border-color 150ms ease,
  color 150ms ease,
  box-shadow 150ms ease;
}

/* 카드 — border 강조 (crd-card hover와 동일 패턴) */
.mlh-card:hover {
  border-color: #e6dbc8;
}

.mlh-card-header {
  display: flex;
  align-items: center;
  gap: 6px;        /* status ↔ chevron 6 (Figma 437:3310 inner gap), name ↔ status는 flex grow로 push */
}

.mlh-card-name {
  flex: 1;
  min-width: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;       /* Figma 876:4117: Bold 14 line-height 22 */
  line-height: 22px;
  color: #f1f1f1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 모바일 카드 상태 라벨 — Figma 876:4119 (Bold 14 line 18, 색상 분기) */
.mlh-card-status {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: #f1f1f1;
  flex-shrink: 0;
  white-space: nowrap;
}
.mlh-card-status--processing { color: #e6dbc8; }
.mlh-card-status--refunded   { color: #b5b5b5; }
.mlh-card-status--expired    { color: #f1634f; }

.mlh-card-chevron {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;       /* Figma 876:4120: Bold 14 line-height 22 cream */
  line-height: 22px;
  color: #e6dbc8;
  flex-shrink: 0;
}

.mlh-card-wallet {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 13px;        /* Figma 876:4121: Reg 13 line 20 muted */
  line-height: 20px;
  color: #b5b5b5;
}

.mlh-card-divider {
  height: 1px;
  background: #3a3a3e;
}

.mlh-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mlh-card-amount {
  display: flex;
  gap: 4px;
  align-items: baseline;
  margin: 0;
  white-space: nowrap;
}

.mlh-card-num {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;        /* Figma 876:4125: Bold 16 line 24 */
  line-height: 24px;
  color: #f1f1f1;
}

.mlh-card-unit {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 12px;        /* Figma 876:4126: Bold 12 line 20 muted */
  line-height: 20px;
  color: #b5b5b5;
}

.mlh-card-date {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 12px;        /* Figma 876:4127: Reg 12 line 18 muted */
  line-height: 18px;
  color: #b5b5b5;
  white-space: nowrap;
}

/* Pagination -------------------------------------------------- */
.mlh-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.mlh-pagination-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 800px;
  height: 84px;
  padding: 20px;
  border-top: 1px solid #3a3a3e;
}

.mlh-page-selector-wrap {
  position: relative;
}

.mlh-page-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 72px;
  height: 44px;
  background: #353539;
  border: 1px solid #3a3a3e;
  border-radius: 8px;
  padding: 0 12px;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: border-color 150ms ease;
}

.mlh-page-selector:hover {
  border-color: #5a5a60;
}

.mlh-page-selector--open {
  border-color: #e6dbc8;
}

.mlh-page-selector-value {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #f1f1f1;
}

.mlh-page-selector-chevron {
  width: 12px;
  height: 12px;
  transition: transform 200ms ease;
}

.mlh-page-selector--open .mlh-page-selector-chevron {
  transform: rotate(180deg);
}

.mlh-page-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 80px;
  max-height: 200px;
  overflow-y: auto;
  background: #2c2c30;
  border: 1px solid #3a3a3e;
  border-radius: 10px;
  margin: 0;
  padding: 4px 0;
  z-index: 100;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
  scrollbar-width: thin;
  scrollbar-color: #4a4a4e transparent;
}

.mlh-page-dropdown::-webkit-scrollbar {
  width: 4px;
}

.mlh-page-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.mlh-page-dropdown::-webkit-scrollbar-thumb {
  background: #4a4a4e;
  border-radius: 2px;
}

.mlh-page-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 14px;
  color: #b5b5b5;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.mlh-page-option:hover {
  background: #3a3a3e;
  color: #f1f1f1;
}

.mlh-page-option--active {
  color: #e6dbc8;
  font-weight: 700;
}

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

.mlh-pag-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.mlh-pag-btn:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.04);
}

.mlh-pag-btn img {
  width: 22px;
  height: 22px;
}

.mlh-pag-btn:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.mlh-pag-btn:disabled img {
  opacity: 0.28;
}

/* ============================================================
   mypage_license_history.html — Mobile (≤ 1199px)
============================================================ */
@media (max-width: 1199px) {
  .dao-mlh-main {
    padding: 24px 16px;
  }

  /* 모바일 헤더 타이틀 — Figma 258:1076;29:5: 우측 actions(notif+menu)가 두 버튼이라
     기본 space-between만으로는 가운데 정렬 어긋남. position absolute로 viewport 가운데 */
  .dao-mlh-page .dao-mobile-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .mlh-content {
    gap: 24px;
  }

  /* Title — 18B + cream bar 4×28, 부연 제거 (Figma 모바일 876:4088-4090) */
  .mlh-title-block {
    gap: 12px;
  }

  .mlh-title-accent {
    height: 28px;
  }

  .mlh-title {
    font-size: 18px;
    white-space: normal;
  }

  .mlh-subtitle {
    display: none;
  }

  /* Summary cards — 1열 stack, 4장 모두 border (Figma 모바일 876:4092-4095 일관) */
  .mlh-summary-row {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .mlh-summary-card {
    width: 100%;
    border: 1px solid #3a3a3e;
  }

  /* 모바일 Summary 폰트 사이즈 — Figma: label 15/22, value 24/38, unit 14/20 */
  .mlh-summary-label {
    font-size: 15px;
    line-height: 22px;
  }

  .mlh-summary-value {
    font-size: 24px;
    letter-spacing: -0.24px;
  }

  .mlh-summary-unit {
    font-size: 14px;
    line-height: 20px;
  }

  /* 모바일 NoticeBox — Figma 876:4096: 14/20 */
  .mlh-notice-line {
    font-size: 14px;
    line-height: 20px;
  }

  /* 모바일 Sort & Count — Figma 876:4113: 14 */
  .mlh-sort-count {
    font-size: 14px;
  }

  /* Filter — 라벨 제거, 너비 축소 */
  .mlh-filter-row {
    flex-wrap: nowrap;
  }

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

  .mlh-date-wrap {
    width: 100%;
    max-width: 165px;
    flex: 1;
  }

  .mlh-date-cal {
    left: auto;
    right: 16px;
    top: 16px;
    width: 18px;
    height: 18px;
  }

  .mlh-date-cal-bar {
    top: 2.5px;
    width: 18px;
  }

  .mlh-date-cal-tick {
    display: none;
  }

  .mlh-search-type {
    width: 108px;
    flex-shrink: 0;
  }

  .mlh-search-type--status {
    width: 164px;
  }

  .mlh-search-type-wrap--status .mlh-search-type-value {
    white-space: nowrap;
  }

  .mlh-search-keyword {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  /* Pagination — 폭 축소 */
  .mlh-pagination-inner {
    width: 100%;
    max-width: 382px;
  }
}

/* 극소형 모바일 보정 ----------------------------------------- */
@media (max-width: 480px) {
  .mlh-title {
    white-space: normal;
    word-break: keep-all;
  }

  .mlh-search-type {
    width: 96px;
  }

  .mlh-search-type--status {
    width: 180px;
  }

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

/* ============================================================
   mypage_license_history_detail.html — D2 라이선스 실행 내역 상세
   - Figma node 263:1225 (PC) / 265:1328 (Mobile)
   - 다크 사이드바·푸터는 D1과 동일하게 .dao-mlh-page 스코프 재사용
   - mlhd- 접두사로 D1(mlh-)와 분리
============================================================ */

/* 페이지 컨테이너 (PC) ----------------------------------------- */
.dao-mlhd-main {
  flex: 1;
  min-width: 0;
  background: #272729;
  padding: 56px 162px 56px 161px;
  display: flex;
  flex-direction: column;
}

.mlhd-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 680px;            /* Figma D2 콘텐츠 폭 */
  margin: 0 auto;              /* main 안쪽 가운데 정렬 */
}

/* Title block ------------------------------------------------- */
.mlhd-title-block {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mlhd-title-accent {
  width: 4px;
  height: 36px;
  background: #e6dbc8;
  flex-shrink: 0;
}

.mlhd-title {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: normal;
  color: #f1f1f1;
  white-space: nowrap;
}

.mlhd-title-pc {
  display: inline;             /* PC: " (상세보기)" 함께 노출 */
}

.mlhd-title-sub {
  display: none;               /* PC 숨김 (Mobile에서만 14 reg muted) */
}

/* 기본정보 카드 ------------------------------------------------ */
.mlhd-info-card {
  width: 100%;
  background: #353539;
  border: 1px solid #3a3a3e;
  border-radius: 12px;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
}

.mlhd-info-section-header {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #f1f1f1;
}

.mlhd-info-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  width: 100%;
}

.mlhd-info-label {
  flex-shrink: 0;
  width: 140px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #f1f1f1;
}

.mlhd-info-value {
  flex: 1;
  min-width: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #f1f1f1;
}

.mlhd-info-value--wallet {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.mlhd-info-wallet-address {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mlhd-info-wallet-address--pc { display: inline; }
.mlhd-info-wallet-address--mobile { display: none; }

/* 복사 버튼 + 아이콘 (CSS pseudo로 두 사각형 그리기) */
.mlhd-copy-btn {
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  border-radius: 2px;
  transition: background-color 150ms ease;
}

.mlhd-copy-btn:hover {
  background: rgba(230, 219, 200, 0.1);
}

.mlhd-copy-icon {
  display: block;
  position: relative;
  width: 20px;
  height: 20px;
}

.mlhd-copy-icon::before,
.mlhd-copy-icon::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid #e6dbc8;
  border-radius: 2px;
  box-sizing: border-box;
}

.mlhd-copy-icon::before {       /* back square — 좌상단 */
  left: 0;
  top: 0;
  background: transparent;
}

.mlhd-copy-icon::after {        /* front square — 6px 어긋나 겹침, bg는 카드 색으로 마스킹 */
  left: 6px;
  top: 6px;
  background: #353539;
}

/* 라이선스 사용료 TX 카드 ---------------------------------------- */
.mlhd-tx-card {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: #353539;
  border-radius: 12px;
  overflow: hidden;
}

.mlhd-tx-accent {
  width: 4px;
  flex-shrink: 0;
  align-self: stretch;
  background: #e6dbc8;
}

.mlhd-tx-content {
  flex: 1;
  min-width: 0;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mlhd-tx-header {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #f1f1f1;
}

.mlhd-tx-row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 40px;
  padding: 12px 0;
  width: 100%;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 150ms ease;
}

.mlhd-tx-row:hover {
  background: rgba(230, 219, 200, 0.06);
}

.mlhd-tx-label {
  flex-shrink: 0;
  width: 140px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #f1f1f1;
}

.mlhd-tx-value {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}

.mlhd-tx-hash {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #f1f1f1;
}

.mlhd-tx-arrow {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #e6dbc8;
}

/* NoticeBox — D1과 동일 패턴 (5줄) ----------------------------- */
.mlhd-notice {
  width: 100%;
  background: #353539;
  border-left: 4px solid #e6dbc8;
  border-radius: 8px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
}

.mlhd-notice-line {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #f1f1f1;
}

/* 액션 버튼 ---------------------------------------------------- */
.mlhd-action-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;     /* PC: 가운데 */
}

.mlhd-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;                /* PC: Figma 디자인 그대로 180w 가운데 */
  height: 50px;
  background: transparent;
  border: 1.5px solid #e6dbc8;
  border-radius: 4px;
  padding: 0 24px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: #e6dbc8;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms ease;
}

.mlhd-back-btn:hover {
  background: rgba(230, 219, 200, 0.1);
  color: #e6dbc8;
}

/* ============================================================
   mypage_license_history_detail.html — Mobile (≤ 1199px)
============================================================ */
@media (max-width: 1199px) {
  .dao-mlhd-main {
    padding: 24px 16px;
  }

  .mlhd-content {
    gap: 24px;
    max-width: none;            /* 모바일은 전체 폭 사용 */
  }

  /* Title — 22B + 14reg 부제 인라인 */
  .mlhd-title-block {
    gap: 12px;
  }

  .mlhd-title-accent {
    height: 28px;
  }

  .mlhd-title {
    font-size: 22px;
    white-space: normal;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .mlhd-title-pc {
    display: none;              /* 모바일은 (상세보기) 부제로 분리 */
  }

  .mlhd-title-sub {
    display: inline;
    font-size: 14px;
    font-weight: 400;
    color: #b5b5b5;
  }

  /* 기본정보 카드 — padding 16/12 */
  .mlhd-info-card {
    padding: 12px 16px;
  }

  /* TX 카드 — padding 16/12, 라벨 폭 80 */
  .mlhd-tx-content {
    padding: 12px 16px;
  }

  .mlhd-tx-label {
    width: 80px;
  }

  /* 지갑 주소 — 줄임 표시 + 14 reg */
  .mlhd-info-wallet-address--pc { display: none; }
  .mlhd-info-wallet-address--mobile {
    display: inline-block;
    font-size: 14px;
  }

  .mlhd-info-row--wallet .mlhd-info-label {
    align-self: flex-start;     /* 디자인: 라벨 상단 정렬 (4px 차이 미세) */
  }

  /* 액션 버튼 — 모바일은 콘텐츠 폭 꽉차게 (Figma 모바일 디자인 변경) */
  .mlhd-action-wrap {
    justify-content: stretch;
  }

  .mlhd-back-btn {
    display: flex;
    width: 100%;
  }
}

/* 극소형 모바일 ----------------------------------------------- */
@media (max-width: 480px) {
  .mlhd-title {
    flex-wrap: wrap;
    word-break: keep-all;
  }

  .mlhd-info-label,
  .mlhd-tx-label {
    width: 100px;               /* 좁은 화면 대응 */
  }
}

/* ============================================================
   mypage_lcl_create.html — L-1 Agreement 생성 폼
   - LCL Phase 2 첫 페이지 (Figma node 361:1972 PC / 365:2065 Mobile)
   - 다크 셸은 .dao-mlh-page 스코프 재사용 (D1과 동일 사이드바 active 처리)
   - .mlcl- 접두사로 D1(mlh-)와 분리
============================================================ */

/* 페이지 컨테이너 (PC) ----------------------------------------- */
.dao-mlcl-main {
  flex: 1;
  min-width: 0;
  background: #272729;
  padding: 56px 162px 56px 161px;     /* main 1643 - content 1320 = 161+162 ✓ */
  display: flex;
  flex-direction: column;
}

.mlcl-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

/* 빈 상태 (no_data) — directory detail 등 user 미발견 시 단순 메시지 표시 */
.mlcl-content--empty {
  color: #f1f1f1;
  padding-top: 40px;
}

/* PC/Mobile 텍스트 토글 (display 유지) ------------------------ */
@media (min-width: 1200px) {
  .mlcl-mobile-only { display: none !important; }
}
@media (max-width: 1199px) {
  .mlcl-pc-only { display: none !important; }
  .mlcl-pc-only-i { display: none !important; }
}

/* 백 링크 + 페이지 헤더 -------------------------------------- */
/* 백 링크 — Figma 876:4327: Bold 16/20 cream #f0e1d0 + ◀ 글리프 */
.mlcl-back-link {
  display: inline-block;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #f0e1d0;
  text-decoration: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  transition: opacity 150ms ease;
}

.mlcl-back-link:hover {
  color: #f0e1d0;
  opacity: 0.85;
}

.mlcl-page-title {
  margin: 16px 0 0 0;             /* 백 링크와 16px gap (Figma h:16 spacer) */
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 42px;
  color: #f1f1f1;
  white-space: nowrap;
}

.mlcl-page-subtitle {
  margin: 8px 0 0 0;              /* 제목과 8px gap */
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #b5b5b5;
  white-space: nowrap;
}

/* NoticeBox — Figma 876:4333: bg card-bg, border-left 4px #f0e1d0, p 14 20, radius 8 */
.mlcl-notice {
  margin-top: 32px;               /* 부연과 32px gap */
  width: 100%;
  background: #353539;
  border-left: 4px solid #f0e1d0;
  border-radius: 8px;
  padding: 14px 20px;
  box-sizing: border-box;
}

.mlcl-notice-line {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: #f1f1f1;
}

/* form-grid: form-card 840 + gap 40 + preview-card 440 -------- */
.mlcl-form-grid {
  margin-top: 32px;               /* NoticeBox와 32px gap */
  display: flex;
  gap: 40px;
  align-items: stretch;           /* form-card와 preview-card 같은 높이 */
  width: 100%;
}

.mlcl-form-card {
  width: 840px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #353539;
  border: 1px solid #3a3a3e;
  border-radius: 16px;
  /* overflow: visible — deadline dropdown 메뉴가 form-card 아래로 떠야 하므로 hidden 금지 */
}

.mlcl-form-section {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mlcl-form-divider {
  height: 1px;
  background: #3a3a3e;
  width: 100%;
}

.mlcl-section-title {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: #f1f1f1;
}

.mlcl-section-desc {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #b5b5b5;
  white-space: nowrap;            /* PC: Figma 1줄 의도 (모바일 미디어 쿼리에서 normal로 풀어줌) */
}

/* counterparty-card (PC: 776×82, padding 18 20, gap 16) ------- */
.mlcl-counterparty-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #272729;
  border: 1px solid #3a3a3e;
  border-radius: 12px;
  padding: 18px 20px;
  width: 100%;
  box-sizing: border-box;
}

.mlcl-cp-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: #303030;
}

.mlcl-cp-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.mlcl-cp-name {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: #f1f1f1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mlcl-cp-wallet {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: #b5b5b5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 변경 ↗ — Figma 876:4346: Bold 14/20 #f1f1f1 (cream 아님) */
.mlcl-cp-change {
  flex-shrink: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #f1f1f1;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 150ms ease;
}

.mlcl-cp-change:hover {
  color: #f1f1f1;
  opacity: 0.7;
}

.mlcl-cp-change-arrow {
  display: inline-block;
  margin-left: 2px;
}

/* 외부 합의 수량 — 2col (PC) / 1col stack (Mobile) ----------- */
.mlcl-amount-row {
  display: flex;
  gap: 12px;
  width: 100%;
}

.mlcl-field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 필드 라벨 (이전할 권리/라이선스 사용료) — Figma 876:4353: Bold 14/18 cream #f0e1d0 */
.mlcl-field-label {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: #f0e1d0;
  white-space: nowrap;
}

/* 입력 (PC h:52 / Mobile h:50) ------------------------------- */
.mlcl-input {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 52px;
  background: #272729;
  border: 1px solid #3a3a3e;
  border-radius: 10px;
  padding: 0 16px;
  box-sizing: border-box;
  transition: border-color 150ms ease;
}

.mlcl-input:hover,
.mlcl-input:focus-within {
  border-color: #4a4a4e;
}

.mlcl-input-text {
  flex: 1;
  min-width: 0;                   /* flex 자식 폼 요소 축소 허용 (CLAUDE.md 원칙) */
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #f1f1f1;
}

.mlcl-input-text::placeholder {
  color: #b5b5b5;
}

/* 단위 (CSET/USDT) — Figma 876:4354 input wrapper text-[16px] 상속 / 876:4356:
   PC: Bold 16/18 cream #f0e1d0 (input 부모 16px 상속, 자식 size override 없음)
   Mobile: Bold 14/18 #f1f1f1 (876:4468 명시 text-[14px]) */
.mlcl-input-unit {
  flex-shrink: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  color: #f0e1d0;
}

/* deadline-dropdown — <details>/<summary> 기반 커스텀 드롭다운.
   메모리 D5: 옵션 4h / 12h / 24h(기본) / 3d / 7d / 30d. 다크 톤 옵션 패널 + inline JS로 선택 동작 */
.mlcl-deadline-dropdown {
  position: relative;
  width: 100%;
}

/* native disclosure marker 제거 — 모든 브라우저 */
.mlcl-deadline-dropdown summary::-webkit-details-marker {
  display: none;
}
.mlcl-deadline-dropdown summary::marker {
  content: "";
}

/* 트리거 (summary) — Figma 876:4366/4367: Bold 14/22 (input과 통일) */
.mlcl-deadline-select {
  list-style: none;                   /* Firefox details summary marker 제거 */
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 52px;
  background: #272729;
  border: 1px solid #3a3a3e;
  border-radius: 10px;
  padding: 0 16px;
  box-sizing: border-box;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  color: #f1f1f1;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.mlcl-deadline-select:hover,
.mlcl-deadline-select:focus-visible {
  border-color: #4a4a4e;
}

/* 열렸을 때 — cream border + 약간 밝은 bg로 강조 */
.mlcl-deadline-dropdown[open] .mlcl-deadline-select {
  border-color: #e6dbc8;
  background: #2c2c2e;
}

.mlcl-deadline-text {
  flex: 1;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mlcl-deadline-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: block;
  transition: transform 200ms ease;
}

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

/* 옵션 패널 — 트리거 아래 absolute, card-bg 다크 + drop shadow + fade-in */
.mlcl-deadline-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #353539;
  border: 1px solid #3a3a3e;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32),
  0 2px 6px rgba(0, 0, 0, 0.16);
  z-index: 20;
  max-height: 300px;
  overflow-y: auto;
  box-sizing: border-box;
  animation: mlcl-deadline-fade 160ms ease-out;
}

@keyframes mlcl-deadline-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 스크롤바 스타일 (Webkit) — 다크 톤 */
.mlcl-deadline-menu::-webkit-scrollbar {
  width: 6px;
}
.mlcl-deadline-menu::-webkit-scrollbar-thumb {
  background: #4a4a4e;
  border-radius: 3px;
}
.mlcl-deadline-menu::-webkit-scrollbar-track {
  background: transparent;
}

/* 옵션 항목 */
.mlcl-deadline-option {
  display: flex;
  align-items: center;
  position: relative;
  height: 48px;
  padding: 0 38px 0 14px;             /* right 38 = check 12 + 외측 14 + gap 12 */
  border-radius: 8px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #f1f1f1;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, color 120ms ease;
}

.mlcl-deadline-option:hover {
  background: rgba(230, 219, 200, 0.08);     /* cream 8% subtle hint */
}

.mlcl-deadline-option:active {
  background: rgba(230, 219, 200, 0.14);
}

.mlcl-deadline-option--active {
  background: rgba(230, 219, 200, 0.12);
  color: #e6dbc8;
  font-weight: 700;
}

.mlcl-deadline-option--active:hover {
  background: rgba(230, 219, 200, 0.18);
}

/* 활성 옵션 우측 ✓ 체크 (CSS만으로 그리기 — 12×6 박스를 회전) */
.mlcl-deadline-option--active::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 12px;
  height: 6px;
  border-left: 2px solid #e6dbc8;
  border-bottom: 2px solid #e6dbc8;
  transform: translateY(-70%) rotate(-45deg);
  pointer-events: none;
}

/* preview-card 440×596 (PC) — column FILL + spacer로 CTA bottom docking */
.mlcl-preview-card {
  width: 440px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #353539;
  border: 1px solid #3a3a3e;
  border-radius: 16px;
  overflow: hidden;
}

.mlcl-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 20px 28px;
}

.mlcl-preview-title {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: #f1f1f1;
  white-space: nowrap;
}

.mlcl-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* LIVE indicator — Figma 876:4374/4375: 6px dot + Bold 18/16 cream #f0e1d0 */
.mlcl-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f0e1d0;
  display: block;
  flex-shrink: 0;
}

.mlcl-live-text {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 16px;
  color: #f0e1d0;
  white-space: nowrap;
}

.mlcl-preview-divider {
  height: 1px;
  background: #3a3a3e;
  width: 100%;
}

.mlcl-preview-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px 28px;
}

.mlcl-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  white-space: nowrap;
}

.mlcl-preview-row--two-line {
  align-items: flex-start;
}

/* preview-label — Figma 876:4379 등: Bold 16/20 #f1f1f1 (좌측 항목명) */
.mlcl-preview-label {
  flex-shrink: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #f1f1f1;
}

/* Default value: Bold 16/22 white right (라이선스 사용료 등) */
.mlcl-preview-value {
  flex-shrink: 0;
  text-align: right;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: #f1f1f1;
}

/* Regular variant: Reg 16/22 white right (내 역할 / 처리 시한 값 등) */
.mlcl-preview-value--regular {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
}

/* Cream variant: Bold 16/24 cream right (이전할 권리/라이선스 사용료) — Figma 876:4388 */
.mlcl-preview-value--cream {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #f0e1d0;
}

/* 상대방 row stack value (Bold 14 + Reg 12 muted, gap 2 right-aligned) */
.mlcl-preview-value-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  text-align: right;
  flex-shrink: 0;
}

.mlcl-preview-value-stack .mlcl-preview-value {
  text-align: right;
}

/* 상대방 wallet sub — Figma 876:4382: Reg 14/18 #f1f1f1 (muted 아님) */
.mlcl-preview-value-sub {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #f1f1f1;
  text-align: right;
  white-space: nowrap;
}

/* 처리 시한 row + sub (gap 4) */
.mlcl-preview-deadline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

/* 처리 시한 sub — Figma 876:4396: Bold 12/16 muted text-right */
.mlcl-preview-deadline-sub {
  display: block;
  text-align: right;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  color: #b5b5b5;
  white-space: nowrap;
}

/* Spacer — PC에서 form-card 높이에 맞춰 CTA를 카드 바닥으로 push */
.mlcl-preview-spacer {
  flex: 1 0 0;
  min-height: 0;
  width: 100%;
}

/* CTA 영역 (PC: pt 20 / pb 24 / px 28, gap 12) ---------------- */
.mlcl-preview-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 28px 24px 28px;
}

/* CTA 버튼 — Figma 876:4400/4401: bg #f0e1d0 cream, h 56, radius 12, text 18 Bold #303030 line 22 */
.mlcl-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  background: #f0e1d0;
  border: none;
  border-radius: 12px;
  padding: 0 24px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: #303030;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, opacity 150ms ease;
}

.mlcl-cta-btn:hover {
  background: #e5d3b6;            /* cream slightly darker */
}

.mlcl-cta-btn:active {
  opacity: 0.9;
}

/* CTA hint — Figma 876:4402: Reg 12/18 muted text-center */
.mlcl-cta-hint {
  margin: 0;
  text-align: center;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #b5b5b5;
}

/* ============================================================
   mypage_lcl_create.html — Mobile (≤ 1199px)
============================================================ */
@media (max-width: 1199px) {
  .dao-mlcl-main {
    padding: 20px 16px 32px 16px;     /* Figma main padding pt:20 pb:32 px:16 */
  }

  .mlcl-content {
    max-width: none;
  }

  /* 백 링크 — 모바일은 헤더에 ← 화살표가 있어 중복. Figma는 모바일에 없음 */
  .mlcl-back-link {
    display: none;
  }

  /* Mobile title — Figma 876:4443: Bold 18/30 */
  .mlcl-page-title {
    margin-top: 0;                    /* 모바일은 백 링크 없으니 main padding-top 20만 */
    font-size: 18px;
    line-height: 30px;
    white-space: normal;
    word-break: keep-all;
  }

  /* Mobile subtitle — Figma 876:4445: Reg 14/20 muted */
  .mlcl-page-subtitle {
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
    white-space: normal;
    word-break: keep-all;
  }

  /* Mobile NoticeBox — Figma 876:4447: text 14/20 */
  .mlcl-notice-line {
    font-size: 14px;
    line-height: 20px;
  }

  .mlcl-notice {
    margin-top: 20px;                 /* PC 32 → Mobile 20 */
  }

  /* form-grid → 단일 컬럼 stack (form-card 위 / preview-card 아래) */
  .mlcl-form-grid {
    margin-top: 20px;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .mlcl-form-card {
    width: 100%;
  }

  .mlcl-form-section {
    padding: 22px 20px;               /* PC 32 → Mobile py:22 px:20 */
    gap: 12px;
  }

  /* Mobile section-title — Figma 876:4451: Bold 16/22 */
  .mlcl-section-title {
    font-size: 16px;
    line-height: 22px;
  }

  /* Mobile section-desc — Figma 876:4452: Reg 14/18 muted, wrap */
  .mlcl-section-desc {
    font-size: 14px;
    line-height: 18px;
    white-space: normal;              /* PC nowrap → Mobile 자연 wrap */
    word-break: keep-all;
  }

  /* counterparty-card 모바일 padding 12 14 12 12, avatar 40 */
  .mlcl-counterparty-card {
    padding: 12px 14px 12px 12px;
    gap: 12px;
    border-radius: 12px;
  }

  .mlcl-cp-avatar {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }

  .mlcl-cp-text {
    gap: 2px;                         /* PC 4 → Mobile 2 */
  }

  /* Mobile cp-name — Figma 876:4457: Bold 15/22 */
  .mlcl-cp-name {
    font-size: 15px;
    line-height: 22px;
  }

  /* Mobile cp-wallet — Figma 876:4458: Reg 12/18 muted */
  .mlcl-cp-wallet {
    font-size: 12px;
    line-height: 18px;
  }

  /* Mobile cp-change — Figma 876:4459: Bold 14/18 #f1f1f1 */
  .mlcl-cp-change {
    font-size: 14px;
    line-height: 18px;
  }

  /* Mobile input-unit — Figma 876:4468: Bold 14/18 #f1f1f1 (cream 아닌 흰색, PC 16와 분리) */
  .mlcl-input-unit {
    font-size: 14px;
    color: #f1f1f1;
  }

  /* 외부 합의 수량 — 2col → 1col stack */
  .mlcl-amount-row {
    flex-direction: column;
    gap: 12px;
  }

  /* input — height 50, padding 0 14 (PC 52 / 0 16) */
  .mlcl-input {
    height: 50px;
    padding: 0 14px;
  }

  /* deadline-select 모바일 — height 50, padding 0 14 (button-flex 패턴) */
  .mlcl-deadline-select {
    height: 50px;
    padding: 0 14px;
  }

  /* 모바일 옵션 항목 — 약간 작은 padding */
  .mlcl-deadline-option {
    padding-left: 12px;
    padding-right: 36px;
  }
  .mlcl-deadline-option--active::after {
    right: 12px;
  }

  /* preview-card — width full, header / body / CTA 모바일 patch */
  .mlcl-preview-card {
    width: 100%;
  }

  .mlcl-preview-header {
    padding: 18px 20px 14px 20px;
  }

  /* Mobile preview-title — Figma 876:4485: Bold 16/22 */
  .mlcl-preview-title {
    font-size: 16px;
    line-height: 22px;
  }

  /* Mobile LIVE — Figma 876:4488: Bold 14/16 cream */
  .mlcl-live-text {
    font-size: 14px;
    line-height: 16px;
  }

  /* Mobile preview-label/value — Figma 876:4492 등: 14 (PC 16) */
  .mlcl-preview-label {
    font-size: 14px;
    line-height: 20px;
  }

  .mlcl-preview-value {
    font-size: 14px;
    line-height: 22px;
  }

  .mlcl-preview-value--regular {
    font-size: 14px;
    line-height: 22px;
  }

  .mlcl-preview-value--cream {
    font-size: 14px;
    line-height: 24px;
  }

  /* Mobile sub — Figma 876:4495/4509: muted #999 톤
     - value-sub (876:4495): 부모 row text-[14px] 상속 → 14 Reg #999 line 18
     - deadline-sub (876:4509): text-[12px] 명시 → 12 Reg #999 line 16 */
  .mlcl-preview-value-sub {
    font-size: 14px;
    line-height: 18px;
    color: #999;
  }

  .mlcl-preview-deadline-sub {
    color: #999;
  }

  .mlcl-preview-body {
    padding: 16px 20px;
    gap: 12px;                        /* PC 22 → Mobile 12 */
  }

  /* 모바일은 spacer 비활성 (자연 높이) */
  .mlcl-preview-spacer {
    display: none;
  }

  .mlcl-preview-cta {
    padding: 14px 20px 18px 20px;
    gap: 10px;
  }

  /* Mobile CTA btn — Figma 876:4512/4513: h 52, text 15 Bold line 22 */
  .mlcl-cta-btn {
    height: 52px;
    font-size: 15px;
    line-height: 22px;
  }

  /* Mobile CTA hint — Figma 876:4514: Reg 11/16 muted */
  .mlcl-cta-hint {
    font-size: 11px;
    line-height: 16px;
  }
}

/* 극소형 모바일 ----------------------------------------------- */
@media (max-width: 480px) {
  .mlcl-page-title {
    word-break: keep-all;
  }
}

/* ============================================================
   mypage_lcl_creating.html — L-2 Agreement 생성 중 (PROCESSING)
   - LCL Phase 2 모달 페이지 (Figma 369:2100 PC / 370:2144 Mobile)
   - 새 스코프 .dao-mlcr-page (사이드바 없는 modal 페이지)
   - PC: dao-header fixed top + dim 위 가운데 modal 560×478
   - Mobile: 자체 헤더+center+footer로 full-screen
============================================================ */

/* 페이지 스코프 — dao-footer / dao-tab-bar / dao-mobile-header 모두 숨김 */
body.dao-mlcr-page {
  background: #272729;
  margin: 0;
}
/* dao-mlcr-page 스코프 — lcl_create 본문 inline 깔린 상태.
   기존에 dao-footer / dao-tab-bar / dao-mobile-header 를 숨겼으나, "배경 = lcl_create"
   요구사항으로 해제. PC 에서는 dim overlay 가 본문/사이드바/푸터 dim 처리.
   Mobile 에서는 모달 fixed full-screen 으로 모두 가려져 표시 차이 없음. */

/* PC 전용: dao-header z-index 를 200 으로 낮춰 modal-overlay(1000) 아래에 두되,
   overlay top:88 로 헤더 영역(0~88)은 overlay 밖이라 그대로 보임 (Figma 동일 동작) */
.dao-mlcr-page .dao-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
}

/* 모달 오버레이 — PC: dim + 가운데 modal (top:88 로 헤더는 dim 제외)
   동일 페이지에 inline 으로 깔린 lcl_create 폼/사이드바/푸터를 dim 으로 가림.
   z-index:1000 으로 dao-header(있다면) / 본문 / 사이드바 / 푸터 모두 위에 표시. */
/* Modal overlay dim — Figma 876:4525: rgba(0,0,0,0.55) */
.mlcl-modal-overlay {
  position: fixed;
  top: 88px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  box-sizing: border-box;
}

/* 모달 — PC: 560 wide, dark card-bg + radius + shadow */
.mlcl-modal {
  width: 560px;
  max-width: 100%;
  background: #353539;
  border: 1px solid #3a3a3e;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Modal 내부 divider 1px */
.mlcl-modal-divider {
  height: 1px;
  background: #3a3a3e;
  width: 100%;
  flex-shrink: 0;
}

/* Modal Header (PC 70h: pt 24 / pb 20 / px 32) */
.mlcl-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px 20px 32px;
  flex-shrink: 0;
}

.mlcl-modal-title {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  color: #f1f1f1;
  white-space: nowrap;
}

/* Status chip — Figma 876:4529: border 1px #f0e1d0, padding 4px 10px, dot 6 + text 16 Bold #f0e1d0 (PC) */
.mlcl-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid #f0e1d0;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
  box-sizing: border-box;
}

.mlcl-status-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f0e1d0;
  display: inline-block;
  flex-shrink: 0;
}

.mlcl-status-chip-text {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  color: #f0e1d0;
}

/* COMPLETED 상태 chip — cream filled, no dot, dark text */
.mlcl-status-chip--completed {
  background: #f0e1d0;
  border: none;
}

.mlcl-status-chip--completed .mlcl-status-chip-dot {
  display: none;
}

.mlcl-status-chip--completed .mlcl-status-chip-text {
  color: #303030;
}

/* Modal Content wrapper */
.mlcl-modal-content {
  display: flex;
  flex-direction: column;
}

/* Stepper 110h: pt 36 / pb 16 / px 80, justify-center
   PC: step1 140 + connector 100 + step2 140 = 380, padding 80 = 540 (modal 560 inner ≈) */
.mlcl-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 36px 80px 16px 80px;
}

.mlcl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 140px;
  flex-shrink: 0;
}

.mlcl-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;             /* border 2 포함 outer 32 (active/wait state) */
  overflow: hidden;
}

/* done state: cream filled + ✓ check (CSS pseudo) — Figma 876:4535 */
.mlcl-step-circle--done {
  background: #f0e1d0;
}

.mlcl-step-check {
  display: block;
  width: 12px;
  height: 6px;
  border-left: 2px solid #303030;
  border-bottom: 2px solid #303030;
  transform: translateY(-25%) rotate(-45deg);
}

/* active state: cream outline 2px + "2" Bold cream — Figma 876:4544/4545 */
.mlcl-step-circle--active {
  background: transparent;
  border: 2px solid #f0e1d0;
}

/* step-num "2" — Figma 876:4545: 13 Bold #e6dbc8 (cream variable token, NOT #f0e1d0) */
.mlcl-step-num {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
  color: #e6dbc8;
}

/* wait state — Figma 876:4685: outline #5b5b5b border + "2" 13 Bold #5b5b5b */
.mlcl-step-circle--wait {
  background: transparent;
  border: 2px solid #5b5b5b;
}
.mlcl-step-circle--wait .mlcl-step-num {
  color: #5b5b5b;
}

/* step label — Figma 876:4539/4546: Bold 16/18 cream #f0e1d0 (PC) — done/active 동일 톤 */
.mlcl-step-label {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
  width: 100%;
  color: #f0e1d0;
}

.mlcl-step-label--done   { color: #f0e1d0; }
.mlcl-step-label--active { color: #f0e1d0; }
/* wait label — Figma 876:4689: Regular 16/18 #5b5b5b */
.mlcl-step-label--wait   { color: #5b5b5b; font-weight: 400; }

/* connector 100×32 (PC) — 안에 100×2 line at vertical center (32 안에서 가운데) */
.mlcl-step-connector {
  width: 100px;
  height: 32px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
}

.mlcl-step-connector::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #3a3a3e;
}

.mlcl-step-connector--done::before {
  background: #f0e1d0;
}

/* spinner-wrap — PC: pt 24 / px 40 / pb 0 (Figma 메타 정확 매핑) */
.mlcl-spinner-wrap {
  display: flex;
  justify-content: center;
  padding: 24px 40px 0 40px;
}

/* spinner — Lottie container 72×72 (PC) / 80×80 (Mobile) */
.mlcl-spinner {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  position: relative;
}

/* Lottie가 SVG로 렌더링하면 컨테이너 크기 채움 */
.mlcl-spinner > svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Fallback CSS spinner — Lottie 로드 실패 시 (script 미로드 / 네트워크 X) */
.mlcl-spinner:empty::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6px solid rgba(240, 225, 208, 0.18);
  border-top-color: #f0e1d0;
  animation: mlcl-spin 1s linear infinite;
  box-sizing: border-box;
}

@keyframes mlcl-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Progress text (title + desc) — PC: padding 20 40 36 40, gap 20 */
.mlcl-progress-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px 40px 36px 40px;
  text-align: center;
}

.mlcl-progress-title {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  color: #f1f1f1;
  text-align: center;
}

/* progress desc — Figma 876:4553: Reg 15/26 #f1f1f1 (PC, muted 아님) */
.mlcl-progress-desc {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  color: #f1f1f1;
  text-align: center;
}

/* Modal Footer — Figma 876:4555: bg #f1f1f1 라이트, padding 18 32 20 32, text #303030 */
.mlcl-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px 20px 32px;
  background: #f1f1f1;
  flex-shrink: 0;
}

.mlcl-tx-label {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  color: #303030;
  white-space: nowrap;
}

.mlcl-tx-hash-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #303030;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 150ms ease;
}

.mlcl-tx-hash-link:hover {
  color: #303030;
  opacity: 0.7;
}

.mlcl-tx-hash-arrow {
  font-weight: 700;
  font-size: 14px;
  color: #303030;
}

/* PC/Mobile 텍스트 토글 (mlcr 페이지 스코프) */
@media (min-width: 1200px) {
  .dao-mlcr-page .mlcl-mobile-only { display: none !important; }
}
@media (max-width: 1199px) {
  .dao-mlcr-page .mlcl-pc-only { display: none !important; }
  .dao-mlcr-page .mlcl-pc-only-i { display: none !important; }
}

/* ============================================================
   L-2 Mobile (≤1199px) — full-screen page (모달 dim 풀기)
============================================================ */
@media (max-width: 1199px) {
  .dao-mlcr-page .dao-header { display: none; }

  /* Mobile overlay — fixed full-screen 으로 inline 깔린 lcl_create 본문 완전 가림.
     position:fixed + inset:0 + 불투명 #272729 + z-index:1000 으로 뒤 페이지 차단.
     PC 의 position:static / transparent / z-index:auto 를 모두 명시 override. */
  .mlcl-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #272729;
    padding: 0;
    z-index: 1000;
    min-height: 100vh;
    overflow-y: auto;            /* 모달 본문이 화면 높이 초과 시 모달 자체 스크롤 */
    display: flex;
    align-items: stretch;
    justify-content: stretch;
  }

  .mlcl-modal {
    width: 100%;
    max-width: none;
    background: #272729;
    border: none;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
    flex: 1;
  }

  /* Mobile header 58h: py 18 / px 20 */
  .mlcl-modal-header {
    padding: 18px 20px;
  }

  /* Mobile title — Figma 876:4562: Bold 18/22 */
  .mlcl-modal-title {
    font-size: 18px;
    line-height: 22px;
  }

  /* Mobile chip — Figma 876:4563-4565: padding 4 10, dot 5, text 14 Bold cream #e6dbc8 (PC #f0e1d0와 분리) */
  .mlcl-status-chip {
    padding: 4px 10px;
    border-color: #e6dbc8;
  }

  .mlcl-status-chip-dot {
    width: 5px;
    height: 5px;
    background: #e6dbc8;
  }

  .mlcl-status-chip-text {
    font-size: 14px;
    line-height: 14px;
    color: #e6dbc8;
  }

  /* footer 위 divider — Figma Mobile에는 없음 (header 다음 divider만 존재) */
  .mlcl-modal-content + .mlcl-modal-divider {
    display: none;
  }

  /* Modal content — flex grow + center */
  .mlcl-modal-content {
    flex: 1;
    min-height: 0;
    padding: 40px 32px;
    gap: 28px;
    align-items: center;
    justify-content: center;
  }

  /* Mobile Stepper — Figma 876:4568: pb 16 pt 36 px 32 (step-indicator 자체 padding) */
  .mlcl-stepper {
    padding: 36px 32px 16px 32px;
  }

  /* Mobile step width — Figma 876:4569: 100 (PC 140) */
  .mlcl-step {
    width: 100px;
  }

  /* Mobile step-circle — Figma 876:4570/4578: 28×28, --done bg #e6dbc8, --active border #e6dbc8 (cream variable) */
  .mlcl-step-circle {
    width: 28px;
    height: 28px;
  }

  .mlcl-step-circle--done {
    background: #e6dbc8;
  }

  .mlcl-step-circle--active {
    border-color: #e6dbc8;
  }

  /* Mobile step-num — Figma 876:4580: 12 Bold #e6dbc8 line 18 */
  .mlcl-step-num {
    font-size: 12px;
    line-height: 18px;
    color: #e6dbc8;
  }

  /* Mobile step label — Figma 876:4574(서명)/4581(전송): 디자인 업데이트로 둘 다 cream #f0e1d0 통일 (PC와 동일) */
  .mlcl-step-label {
    font-size: 14px;
    line-height: 18px;
  }

  .mlcl-step-label--done {
    color: #f0e1d0;
  }

  .mlcl-step-label--active {
    color: #f0e1d0;
  }

  /* Mobile connector — Figma 876:4575/4576: 60×28, bar #e6dbc8 */
  .mlcl-step-connector {
    width: 60px;
    height: 28px;
  }

  .mlcl-step-connector--done::before {
    background: #e6dbc8;
  }

  /* Mobile spinner color — Figma 876:4582 SVG token: cream variable #e6dbc8 */
  .mlcl-spinner:empty::before {
    border-color: rgba(230, 219, 200, 0.18);
    border-top-color: #e6dbc8;
  }

  /* spinner-wrap 모바일 — padding 0 (modal-content gap이 외곽 spacing 처리) */
  .mlcl-spinner-wrap {
    padding: 0;
  }

  .mlcl-spinner {
    width: 80px;
    height: 80px;
  }

  /* progress-text 모바일 — gap 8, padding 0, full width */
  .mlcl-progress-text {
    padding: 0;
    gap: 8px;
    width: 100%;
  }

  /* Mobile progress title — Figma 876:4587: Bold 16/24 */
  .mlcl-progress-title {
    font-size: 16px;
    line-height: 24px;
  }

  /* Mobile progress desc — Figma 876:4588: Reg 14/24 */
  .mlcl-progress-desc {
    font-size: 14px;
    line-height: 24px;
  }

  /* Mobile Footer — Figma 876:4589/4590/4592/4593:
     bg #f1f1f1 그대로, py 18 / px 20
     - label/hash: 14 Bold #353539 (PC #303030과 분리)
     - arrow: 14 Bold #272729 (page-bg, 가장 어두운 톤) */
  .mlcl-modal-footer {
    padding: 18px 20px;
  }

  .mlcl-tx-label {
    font-size: 14px;
    color: #353539;
  }

  .mlcl-tx-hash-link {
    font-size: 14px;
    color: #353539;
  }

  .mlcl-tx-hash-link:hover {
    color: #353539;
  }

  .mlcl-tx-hash-arrow {
    color: #272729;
  }
}

/* ============================================================
   mypage_lcl_created.html — L-3 Agreement 생성 완료 (COMPLETED)
   - LCL Phase 2 결과 모달 (Figma 371:2144 PC / 372:2189 Mobile)
   - .dao-mlcr-page 스코프 재사용 (L-2와 동일)
   - PC modal 560×676 / Mobile full-screen + footer sticky CTA
   - PC와 Mobile id-section 마크업 분리 (구조 차이 큼)
============================================================ */

/* PC/Mobile 마크업 토글 — hide 룰만 적용 (show는 element 자연 display 유지)
   .dao-mlcr-page 스코프 + !important로 .mlcl-id-card{display:flex} 등 동일 specificity 룰 override */
@media (min-width: 1200px) {
  .dao-mlcr-page .mlcl-mobile-only-block { display: none !important; }
}
@media (max-width: 1199px) {
  .dao-mlcr-page .mlcl-pc-only-block { display: none !important; }
}

/* L-3 본문 wrapper — success/id/notice가 vertical stack */
.mlcl-modal-content--created {
  display: flex;
  flex-direction: column;
}

/* ============================================================
   L-3 Success Modal context overrides — Figma 876:4594 PC / 876:4630 Mobile
   - Notice bg/border 색 (PC #272729 + #f0e1d0)
   - Notice-line 폰트 (14/22, form-create 16/28과 분리)
   - 모달 한정 적용 (.mlcl-modal--created 스코프)
============================================================ */
.mlcl-modal--created .mlcl-notice {
  background: #272729;
  border-left-color: #f0e1d0;
}

.mlcl-modal--created .mlcl-notice-line {
  font-size: 14px;
  line-height: 22px;
}

/* 성공 섹션 (PC: padding 40 32 28 32, gap 16) */
.mlcl-success-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 32px 28px 32px;
  width: 100%;
  box-sizing: border-box;
}

/* 성공 아이콘 — Figma 876:4606 PC / 876:4635 Mobile: 64×64 blue #4779ae filled + 흰색 ✓ check */
.mlcl-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #4779ae;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.mlcl-success-icon::after {
  content: "";
  display: block;
  width: 22px;
  height: 11px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: translateY(-25%) rotate(-45deg);
}

.mlcl-success-title {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  color: #f1f1f1;
  text-align: center;
  width: 100%;
}

/* success-desc — Figma 876:4611: Reg 16/20 #f1f1f1 (PC) */
.mlcl-success-desc {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: #f1f1f1;
  text-align: center;
  width: 100%;
}

/* AGREEMENT ID 섹션 (PC) — label + dark input row + hint */
.mlcl-id-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 32px;
  width: 100%;
  box-sizing: border-box;
}

/* id-label — Figma 876:4614: Bold 14/18 muted */
.mlcl-id-label {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: #b5b5b5;
  white-space: nowrap;
  letter-spacing: 0.4px;          /* 대문자 가독성 */
}

.mlcl-id-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  background: #272729;
  border: 1px solid #3a3a3e;
  border-radius: 10px;
  padding: 0 8px 0 14px;          /* pl 14 / pr 8 (Figma 메타 정확) */
  width: 100%;
  box-sizing: border-box;
}

/* id-text — Figma 876:4616: Reg 14/20 #f1f1f1 */
.mlcl-id-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #f1f1f1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 복사 버튼 — Figma 876:4617/4620: PC 80×32 cream filled #f0e1d0, text 14 Bold #303030 line 18 (Mobile --sm: 60×26 with 14 Bold line 16) */
.mlcl-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  width: 80px;
  padding: 0 12px;
  background: #f0e1d0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: #303030;
  white-space: nowrap;
  transition: background-color 150ms ease;
  box-sizing: border-box;
}

.mlcl-copy-btn:hover {
  background: #e5d3b6;
}

.mlcl-copy-btn:active {
  opacity: 0.9;
}

/* Mobile sm — Figma 876:4647/4650: 60×26, gap 5, px 10, text 14 Bold line 16 */
.mlcl-copy-btn--sm {
  height: 26px;
  width: 60px;
  padding: 0 10px;
  gap: 5px;
  font-size: 14px;
  line-height: 16px;
}

/* 복사 아이콘 — Figma 876:4618 SVG (clipboard 단일 모양, stroke #303030) */
.mlcl-copy-icon {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-image: url('/assets/img/icon-copy.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Mobile 작은 변형 — Figma 876:4648: 12×12 동일 SVG */
.mlcl-copy-icon--sm {
  width: 12px;
  height: 12px;
}

/* id-hint — Figma 876:4621: Reg 14/16 #f1f1f1 (PC) */
.mlcl-id-hint {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #f1f1f1;
}

/* AGREEMENT ID 카드 (Mobile only) — Figma 876:4644: bg page-bg #272729, border #3a3a3e, radius 12, p 14 16, gap 12 */
.mlcl-id-card {
  background: #272729;
  border: 1px solid #3a3a3e;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.mlcl-id-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.mlcl-id-text--mobile {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: #f1f1f1;
  letter-spacing: 0.2px;
  white-space: normal;            /* PC와 다르게 wrap 허용 */
  overflow: visible;
  text-overflow: clip;
  word-break: break-all;          /* hex 문자열 강제 줄바꿈 */
  width: 100%;
}

/* NoticeBox 섹션 wrapper (PC: pt 24 / px 32 / pb 0) */
.mlcl-notice-section {
  padding: 24px 32px 0 32px;
  width: 100%;
  box-sizing: border-box;
}
/* .mlcl-notice / .mlcl-notice-line은 L-1 CSS에 이미 정의됨 (재사용) */

/* CTA 섹션 — PC: pt 24/pb 32/px 32, gap 10 */
.mlcl-cta-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 32px 32px 32px;
  width: 100%;
  box-sizing: border-box;
}

.mlcl-cta-section--created {
  /* PC default — modal 안 자연 위치 (Mobile 미디어쿼리에서 sticky bottom 적용) */
}

/* Secondary CTA — Figma 876:4626/4627: border 1 #f0e1d0, h 48, radius 12, text 18 Bold cream #f0e1d0 line 20 */
.mlcl-cta-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  background: transparent;
  border: 1px solid #f0e1d0;
  border-radius: 12px;
  padding: 0 16px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: #f0e1d0;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease;
  box-sizing: border-box;
}

.mlcl-cta-secondary:hover {
  background: rgba(240, 225, 208, 0.10);
  border-color: #f0e1d0;
  color: #f0e1d0;
}

/* Primary CTA를 anchor로 쓸 때 underline 제거 */
a.mlcl-cta-btn {
  text-decoration: none;
}

/* ============================================================
   L-3 Mobile (≤1199px) — full-screen + sticky bottom CTA
============================================================ */
@media (max-width: 1199px) {
  /* Mobile은 modal-content가 위쪽 정렬 + body padding 처리 */
  .mlcl-modal-content--created {
    flex: 1;
    min-height: 0;
    padding: 32px 16px 24px 16px;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
  }

  /* 성공 섹션 — Mobile은 padding 0, spacer는 자식 margin-top으로 */
  .mlcl-success-section {
    padding: 0;
    gap: 0;
  }

  /* Mobile success-title — Figma 876:4640: Bold 18/24 */
  .mlcl-success-title {
    margin-top: 20px;             /* Figma spacer 20 */
    font-size: 18px;
    line-height: 24px;
  }

  /* Mobile success-desc — Figma 876:4642: Reg 14/22 #f1f1f1 */
  .mlcl-success-desc {
    margin-top: 8px;              /* Figma spacer 8 */
    font-size: 14px;
    line-height: 22px;
  }

  /* id-card — success-section 다음 28px 간격 */
  .mlcl-id-card {
    margin-top: 28px;
  }

  /* Mobile id-label — Figma 876:4646: Bold 14/22 #f1f1f1 (PC와 다른 흰색) */
  .mlcl-id-card .mlcl-id-label {
    font-size: 14px;
    line-height: 22px;
    color: #f1f1f1;
  }

  /* Mobile NoticeBox 섹션 — id-card 다음 20px 간격 */
  .mlcl-notice-section {
    margin-top: 20px;
    padding: 0;
  }

  /* Mobile NoticeBox 폰트 — Figma 876:4653 inner: Reg 14/22 #f1f1f1 (mlcr 스코프 한정) */
  .dao-mlcr-page .mlcl-notice-line {
    font-size: 14px;
    line-height: 22px;
  }

  /* Mobile CTA 섹션 — sticky bottom card-bg, gap 8 (PC 10), pt 16/pb 24/px 16 */
  .mlcl-cta-section--created {
    background: #353539;
    padding: 16px 16px 24px 16px;
    gap: 8px;
    flex-shrink: 0;
  }

  /* Mobile CTA secondary — Figma 876:4656: 15 Bold cream h 56 */
  .mlcl-cta-secondary {
    height: 56px;
    font-size: 15px;
    line-height: 20px;
  }

  /* ----------------------------------------------------------
     L-3 Success Modal — Mobile은 cream 톤을 #e6dbc8 사용 (PC #f0e1d0와 분리)
     Figma 모바일 디자인: copy-btn / notice border / cta-secondary text / cta-primary bg = #e6dbc8
  ---------------------------------------------------------- */
  /* Mobile modal bg — Figma 876:4630 root bg #353539 (overlay #272729와 분리) */
  .mlcl-modal--created {
    background: #353539;
  }

  /* Mobile success-icon — Figma 876:4635: PC와 동일 blue #4779ae (글로벌 상속) */

  /* Mobile copy-btn--sm — Figma 876:4647: bg cream #e6dbc8 */
  .mlcl-modal--created .mlcl-copy-btn--sm {
    background: #e6dbc8;
  }

  .mlcl-modal--created .mlcl-copy-btn--sm:hover {
    background: #ddd0b9;
  }

  /* copy-icon SVG는 background-image라 button bg에 따른 마스킹 불필요 (이전 pseudo 패턴 제거됨) */

  /* Mobile notice border-left — Figma 876:4653: #e6dbc8 (PC #f0e1d0와 분리) */
  .mlcl-modal--created .mlcl-notice {
    border-left-color: #e6dbc8;
  }

  /* Mobile cta-secondary text — Figma 876:4656: cream #e6dbc8 (PC #f0e1d0와 분리)
     border는 #f0e1d0 유지 (디자인 모바일 border 동일) */
  .mlcl-modal--created .mlcl-cta-secondary {
    color: #e6dbc8;
  }

  /* Mobile cta-primary — Figma 876:4657/4658: bg #e6dbc8, h 56 (글로벌 모바일 52와 분리), text 15 Bold #303030 line 22 */
  .mlcl-modal--created .mlcl-cta-btn {
    height: 56px;
    background: #e6dbc8;
    font-size: 15px;
    line-height: 22px;
  }

  .mlcl-modal--created .mlcl-cta-btn:hover {
    background: #ddd0b9;
  }
}


/* ============================================================
   mypage_lcl_create_failed.html — L-2-fail Agreement 생성 실패 (FAILED)
   - LCL Phase 2 실패 모달 (Figma 421:2794 PC / 422:2838 Mobile)
   - .dao-mlcr-page 스코프 재사용 (L-2/L-3 와 동일)
   - PC modal 560×615 / Mobile full-screen + sticky bottom 2-button footer
   - 베이스 .mlcl-modal* 토큰 재사용, FAILED chip 만 coral-fill 변형
============================================================ */

/* FAILED 상태 chip — coral filled, no dot, white text
   기존 .mlcl-status-chip(cream-outline+dot) 의 bg/border/color 만 override
   height(PC 24 / Mobile 22) 와 padding(0 10) 은 베이스 그대로 사용 */
/* FAILED chip — Figma 876:5764: bg #cc421f (어두운 빨강), text 16 Bold white line 16 */
.mlcl-status-chip--failed {
  background: #cc421f;
  border: none;
}

.mlcl-status-chip--failed .mlcl-status-chip-text {
  color: #fff;
}

/* L-2-fail 본문 wrapper — PC: 베이스 (display: flex column) 그대로
   섹션 + divider 가 자식으로 누적되며 자체 높이 = 218 + 1 + 162 = 381 */
.mlcl-modal-content--failed {
  /* PC default — 섹션이 자체 padding 으로 spacing 처리. Mobile 에서 override */
}

/* 실패 섹션 (PC: 218h, padding 40 32 24 / gap 16, items center) */
.mlcl-fail-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 32px 24px 32px;
  width: 100%;
  box-sizing: border-box;
}

/* PC: text-block dissolve → (icon, title, desc) 가 fail-section 의 균일 gap 16 적용
   Mobile MQ 에서 display:flex 로 복원하여 title↔desc 만 gap 8 적용 */
.mlcl-fail-text-block {
  display: contents;
}

/* 실패 아이콘 — Figma 876:5768: 72×72 #cc421f filled + 흰색 X (CSS pseudo) */
.mlcl-fail-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #cc421f;
  position: relative;
  flex-shrink: 0;
}

.mlcl-fail-icon::before,
.mlcl-fail-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 3.5px;
  background: #fff;
  border-radius: 2px;
  transform-origin: center;
}

.mlcl-fail-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.mlcl-fail-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 실패 타이틀 — PC 22/30 Bold center */
.mlcl-fail-title {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  color: #f1f1f1;
  text-align: center;
  width: 100%;
}

/* 실패 설명 — Figma 876:5702 (L-S3 PC) / 876:5773 (directory-fail PC): Reg 16/24 #f1f1f1, 2 lines split */
.mlcl-fail-desc {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #f1f1f1;
  text-align: center;
  width: 100%;
  white-space: pre-line;        /* i18n \n 두 줄 분리 (디자인: 두 p로 명시) */
}

/* 가능한 원인 섹션 — Figma 876:5775: bg #2a2a2a, radius 12, padding py 24 px 32, gap 12, items-start, width 404 (PC도 카드형) */
.mlcl-reasons-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 32px;
  width: 404px;
  max-width: 100%;
  margin: 0 auto;
  background: #2a2a2a;
  border-radius: 12px;
  box-sizing: border-box;
}

/* "가능한 원인" 라벨 — Figma 876:5776: Bold 16/18 #f1f1f1 */
.mlcl-reasons-label {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  color: #f1f1f1;
  white-space: nowrap;
}

/* 원인 리스트 — gap 12 (PC) / 10 (Mobile) */
.mlcl-reasons-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* 원인 항목 — Figma 876:5777/5780/5783: Reg 14/20 #f1f1f1, items-center gap 8 */
.mlcl-reasons-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #f1f1f1;
  width: 100%;
}

/* bullet dot 4×4 — items-center 이므로 margin-top 불필요 */
.mlcl-reasons-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f1f1f1;
  flex-shrink: 0;
}

.mlcl-reasons-text {
  flex: 1;
  min-width: 0;
}

/* 액션 섹션 — Figma 876:5787: PC pt 20 pb 28 px 32, gap 10, items-start */
.mlcl-fail-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 32px 28px 32px;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* 취소 버튼 (secondary) — 48h, transparent + border 1 #3a3a3e, 13/20 white */
.mlcl-fail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 12px;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background-color 150ms ease, border-color 150ms ease;
}

/* 취소 (secondary) — Figma 876:5717 (L-S3 PC): border 1 #f0e1d0, h 52 (primary 56과 분리), 18 Bold #f0e1d0 line 20 */
.mlcl-fail-btn--secondary {
  height: 52px;
  background: transparent;
  border: 1px solid #f0e1d0;
  padding: 0 16px;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: #f0e1d0;
}

.mlcl-fail-btn--secondary:hover {
  background: rgba(240, 225, 208, 0.10);
  border-color: #f0e1d0;
}

/* 다시 시도 (primary) — Figma 876:5790/5791: bg #f0e1d0 (PC), h 56, 18 Bold #303030 line 22 */
.mlcl-fail-btn--primary {
  height: 56px;
  background: #f0e1d0;
  border: none;
  padding: 0 16px;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: #303030;
}

.mlcl-fail-btn--primary:hover {
  background: #e5d3b6;
}

.mlcl-fail-btn--primary:active {
  opacity: 0.95;
}

/* ============================================================
   L-2-fail Mobile (≤1199px) — full-screen layout
   - modal-content--failed: flex:1 + center vertical
   - fail-section padding 0 + gap 24 (PC 16 override)
   - text-block 복원: gap 8 (title↔desc 만 8, icon 과는 fail-section gap 24)
   - reasons 카드화: bg #353539 + border #3a3a3e + radius 12 + p 18 + gap 10
   - actions sticky bottom card-bg
============================================================ */
@media (max-width: 1199px) {
  /* FAILED chip Mobile — height 22 는 베이스에서 상속, bg/border/color 는 PC 와 동일 변형 */

  /* Mobile content — flex grow + 36/24/24 padding, gap 24, items center, justify center
     베이스 mobile rule (40 32, gap 28) override */
  .mlcl-modal-content--failed {
    flex: 1;
    min-height: 0;
    padding: 36px 24px 24px 24px;
    gap: 24px;
    align-items: center;
    justify-content: center;
  }

  /* fail-section: padding 제거 (modal-content 가 외곽 처리), gap 24 (icon ↔ text-block) */
  .mlcl-fail-section {
    padding: 0;
    gap: 24px;
  }

  /* text-block 복원: title (18/26) + gap 8 + desc (12/18 2-line wrap) */
  .mlcl-fail-text-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .mlcl-fail-title {
    font-size: 18px;
    line-height: 26px;
  }

  /* Mobile fail-desc — Figma 876:5805: Reg 14/22 #f1f1f1 */
  .mlcl-fail-desc {
    font-size: 14px;
    line-height: 22px;
  }

  /* Mobile reasons 카드 — Figma 876:5806: bg #2a2a2a, no border, radius 12, p 18, gap 10 */
  .mlcl-reasons-section {
    background: #2a2a2a;
    border: none;
    border-radius: 12px;
    padding: 18px;
    gap: 10px;
    width: 100%;
    margin: 0;
  }

  /* Mobile reasons-label — Figma 876:5807: Bold 15/16 #f1f1f1 */
  .mlcl-reasons-label {
    font-size: 15px;
    line-height: 16px;
  }

  .mlcl-reasons-list {
    gap: 10px;
  }

  /* Mobile reasons-item — Figma 876:5808/5811/5814: Reg 14/18 #f1f1f1, pt 4, items-center */
  .mlcl-reasons-item {
    padding-top: 4px;
    font-size: 14px;
    line-height: 18px;
  }

  /* items-center이므로 margin-top 불필요 */
  .mlcl-reasons-dot {
    margin-top: 0;
  }

  /* actions sticky bottom — Figma 876:5817: bg #353539, pb 24 pt 16 px 16, gap 8 */
  .mlcl-fail-actions {
    background: #353539;
    padding: 16px 16px 24px 16px;
    gap: 8px;
  }

  /* ----------------------------------------------------------
     Fail Modal Mobile cream 분리 — PC #f0e1d0 vs Mobile #e6dbc8 (success-modal과 동일 패턴)
  ---------------------------------------------------------- */
  /* Mobile modal bg — Figma 876:5793-5798: bg #353539 (전체 모달 root 한정) */
  .mlcl-modal--failed {
    background: #353539;
  }

  /* Mobile title — Figma 876:5794: Bold 14/22 (PC 18에서 14로 축소) */
  .mlcl-modal--failed .mlcl-modal-title {
    font-size: 14px;
    line-height: 22px;
  }

  /* Mobile chip — Figma 876:5795: bg #cb421f (PC #cc421f와 1 hex 차이) */
  .mlcl-modal--failed .mlcl-status-chip--failed {
    background: #cb421f;
  }

  /* Mobile cta-secondary — Figma 876:5748 (L-S3 mobile): text 15 Bold #f0e1d0 line 20 (h 52는 글로벌 base) */
  .mlcl-modal--failed .mlcl-fail-btn--secondary {
    font-size: 15px;
    color: #f0e1d0;
  }

  /* Mobile cta-primary — Figma 876:5820/5821: bg #e6dbc8 (cream variable), 15 Bold */
  .mlcl-modal--failed .mlcl-fail-btn--primary {
    background: #e6dbc8;
    font-size: 15px;
  }

  .mlcl-modal--failed .mlcl-fail-btn--primary:hover {
    background: #ddd0b9;
  }
}


/* ============================================================
   L-2-confirm — Directory 라이선스 요청 확인 모달
   - .mlcl-modal--confirm: PC 폭 500 (failed 560 / created 560 보다 컴팩트)
   - variant: info (#2563EB blue) / warning (#FFA500 amber)
   - fail/created 모달의 chip/section/btn 규약을 그대로 미러 (토큰만 교체)
============================================================ */

/* Confirm modal — Figma 876:7456 (PC info) / 876:7478 (PC warning): bg white, radius 16
   width 500 (PC, fail/created 560보다 컴팩트), Mobile은 100%
   info: border 0, shadow 없음 / warning: border 1 #3a3a3e, shadow 0 16 48 rgba(0,0,0,0.32) */
.mlcl-modal--confirm {
  width: 500px;
  background: #fff;
  border: none;
  box-shadow: none;
}

/* PC body divider 제거 — 디자인엔 header divider만 (content와 actions 사이 divider 없음) */
.mlcl-modal--confirm .mlcl-modal-content--confirm + .mlcl-modal-divider {
  display: none;
}

/* Warning variant 한정 — Figma 876:7481: border 1 #3a3a3e + shadow 0.32 */
.mlcl-modal--confirm-warning {
  border: 1px solid #3a3a3e;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
}

/* Modal title — 다크 텍스트 #303030 (라이트 톤 모달) */
.mlcl-modal--confirm .mlcl-modal-title {
  color: #303030;
}

/* Divider — info: #8d857c (Figma 876:7465) / warning: #3a3a3e (Figma 876:7487) */
.mlcl-modal--confirm .mlcl-modal-divider {
  background: #8d857c;
}

.mlcl-modal--confirm-warning .mlcl-modal-divider {
  background: #3a3a3e;
}

/* INFO chip — Figma 876:7462: transparent + border 1 #4779ae blue outline + dot + text 11 Bold #4779ae */
.mlcl-status-chip--info {
  background: transparent;
  border: 1px solid #4779ae;
  padding: 4px 10px;
}

.mlcl-status-chip--info .mlcl-status-chip-text {
  color: #4779ae;
  font-size: 11px;
  line-height: 16px;
}

/* INFO chip dot — JSX에 dot 자식 없으므로 ::before pseudo로 6×6 blue dot 추가 */
.mlcl-status-chip--info::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4779ae;
  flex-shrink: 0;
}

/* WARNING chip — Figma 876:7484: transparent + border 1 #cc421f red outline + dot + text 11 Bold #cc421f */
.mlcl-status-chip--warning {
  background: transparent;
  border: 1px solid #cc421f;
  padding: 4px 10px;
}

.mlcl-status-chip--warning .mlcl-status-chip-text {
  color: #cc421f;
  font-size: 11px;
  line-height: 16px;
}

/* WARNING chip dot — JSX dot 자식 없으므로 ::before pseudo로 6×6 red dot 추가 */
.mlcl-status-chip--warning::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cc421f;
  flex-shrink: 0;
}

/* Confirm content wrapper — bg white (라이트 톤) */
.mlcl-modal-content--confirm {
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* Confirm 섹션 — Figma 876:7466 PC: padding pt 40 pb 32 px 32, gap 16, items-center */
.mlcl-confirm-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 32px 32px 32px;
  width: 100%;
  box-sizing: border-box;
}

/* PC: text-block dissolve → icon/title/desc 가 confirm-section 균일 gap 적용
   Mobile MQ 에서 flex 복원 (fail 모달 동일 패턴) */
.mlcl-confirm-text-block {
  display: contents;
}

/* Confirm 아이콘 — 64×64 원형 (fail 72 보다 컴팩트), variant 별 배경/글리프 분기 */
.mlcl-confirm-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

/* INFO 아이콘 — Figma 876:7467/7469: bg #4779ae + 흰색 "i" 단일 텍스트 글리프 (36 Bold line 44 PC) */
.mlcl-confirm-icon--info {
  background: #4779ae;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mlcl-confirm-icon--info::before {
  content: "i";
  position: static;
  transform: none;
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  color: #fff;
  text-align: center;
}

/* 단일 "i" 텍스트로 충분 — stem(::after) 제거 */
.mlcl-confirm-icon--info::after {
  content: none;
}

/* WARNING 아이콘 — Figma 876:7489/7491: bg red #cc421f + 흰색 "!" 단일 텍스트 글리프 (36 Bold line 44 PC) */
.mlcl-confirm-icon--warning {
  background: #cc421f;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mlcl-confirm-icon--warning::before {
  content: "!";
  position: static;
  transform: none;
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  color: #fff;
  text-align: center;
}

/* 단일 "!" 텍스트로 충분 — dot(::after) 제거 */
.mlcl-confirm-icon--warning::after {
  content: none;
}

/* Confirm 타이틀 — Figma 876:7470 PC: Bold 20/28 #303030 center (라이트 톤) */
.mlcl-confirm-title {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: #303030;
  text-align: center;
  width: 100%;
}

/* Confirm 설명 — Figma 876:7471 PC: Reg 14/24 #303030 (라이트 톤, pre-line 유지) */
.mlcl-confirm-desc {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #303030;
  text-align: center;
  width: 100%;
  white-space: pre-line;
}

/* Confirm actions — Figma 876:7473 PC: row, gap 10, padding pb 28 pt 20 px 32, items-start */
.mlcl-confirm-actions {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 32px 28px 32px;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Confirm 버튼 공용 base — fail-btn 과 동일 규약 */
.mlcl-confirm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  border-radius: 12px;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

/* Secondary (취소) — Figma 876:7474 (info): bg #eaeaea, h 56, no border, 16 Bold #303030 line 20
   warning은 line 22 (876:7497) — variant override */
.mlcl-confirm-btn--secondary {
  height: 56px;
  background: #eaeaea;
  border: none;
  padding: 0 16px;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #303030;
}

.mlcl-confirm-btn--secondary:hover {
  background: #d4d4d4;
  border-color: transparent;
}

/* PC Warning secondary text line 22 (info 20과 분리) — Figma 876:7497 */
.mlcl-modal--confirm-warning .mlcl-confirm-btn--secondary {
  line-height: 22px;
}

/* Primary (확인) — Figma 876:7476/7477 PC: bg #f0e1d0 cream, h 56, 16 Bold #303030 line 22 */
.mlcl-confirm-btn--primary {
  height: 56px;
  background: #f0e1d0;
  border: none;
  padding: 0 16px;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: #303030;
}

.mlcl-confirm-btn--primary:hover {
  background: #e5d3b6;
}

.mlcl-confirm-btn--primary:active {
  opacity: 0.95;
}

/* ============================================================
   L-2-confirm Mobile (≤1199px) — full-screen layout
   - modal--confirm 폭은 베이스 max-width:100% 가 처리 → 별도 override 불필요
   - confirm-section: padding/gap 재조정 + items center
   - text-block 복원 (PC contents → flex column)
   - actions: column stack + sticky bottom card-bg (fail-actions Mobile 미러)
============================================================ */
@media (max-width: 1199px) {
  /* Mobile content — flex grow + center, fail-content--failed 동일 패턴 */
  .mlcl-modal-content--confirm {
    flex: 1;
    min-height: 0;
    padding: 36px 24px 24px 24px;
    gap: 24px;
    align-items: center;
    justify-content: center;
  }

  /* confirm-section: padding 제거 (modal-content 가 외곽 처리), gap 24 (icon ↔ text-block) */
  .mlcl-confirm-section {
    padding: 0;
    gap: 24px;
  }

  /* text-block 복원: title (18/26) + gap 8 + desc (12/18) */
  .mlcl-confirm-text-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .mlcl-confirm-title {
    font-size: 18px;
    line-height: 26px;
  }

  .mlcl-confirm-desc {
    font-size: 12px;
    line-height: 18px;
  }

  /* actions Mobile — column stack + sticky bottom card-bg (fail-actions Mobile 미러).
     column-reverse 로 primary(확인) 가 위, secondary(취소) 가 아래에 와서 사용자 액션 유도 우선. */
  .mlcl-confirm-actions {
    flex-direction: column-reverse;
    background: #353539;
    padding: 16px 20px 28px 20px;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* Mobile 공용 hit-area — flex:1 (PC row 분배용) 을 column 에서 0 0 auto 로 override.
     56h — PC 48 보다 약간 키운 자연스러운 모바일 CTA 사이즈. */
  .mlcl-confirm-btn {
    flex: 0 0 auto;
    height: 52px;
    min-height: 52px;
    font-size: 15px;
    line-height: 22px;
    border-radius: 14px;
    padding: 0 20px;
    width: 100%;
  }

  /* Mobile primary 강조 — fs 16 / weight 700 (base 15 보다 큰 강조) */
  .mlcl-confirm-btn--primary {
    flex: 0 0 auto;
    height: 52px;
    min-height: 52px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    letter-spacing: -0.2px;
  }

  /* Mobile secondary 톤 다운 — 누름 영역 가시화 + medium weight */
  .mlcl-confirm-btn--secondary {
    flex: 0 0 auto;
    height: 52px;
    min-height: 52px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
  }

  /* ============================================================
     Confirm Modal Mobile — Light Tone (Figma 876:7500)
     디자인 업데이트: 다크 톤 → 흰색/라이트 톤으로 완전 전환
     스코프: .mlcl-modal--confirm 한정 (PC는 기존 다크 톤 유지)
  ============================================================ */
  /* Mobile modal — bg white, 전체 라이트 톤 */
  .mlcl-modal--confirm {
    background: #fff;
  }

  /* Mobile header — title 20 Bold #303030 (다크 텍스트) */
  .mlcl-modal--confirm .mlcl-modal-title {
    font-size: 20px;
    line-height: 22px;
    color: #303030;
  }

  /* Mobile chip "확인 필요" — Figma 876:7503: outline blue (filled가 아닌!), text 14 Bold #4779ae line 14 */
  .mlcl-modal--confirm .mlcl-status-chip--info {
    background: transparent;
    border: 1px solid #4779ae;
    padding: 4px 10px;
  }

  .mlcl-modal--confirm .mlcl-status-chip--info .mlcl-status-chip-text {
    color: #4779ae;
    font-size: 14px;
    line-height: 14px;
  }

  /* Mobile chip dot — Figma 876:7504: 6×6 blue (JSX에 dot 자식 없으므로 ::before pseudo로 추가) */
  .mlcl-modal--confirm .mlcl-status-chip--info::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4779ae;
    flex-shrink: 0;
  }

  /* Mobile divider color — info: bg #3a3a3e (Figma 876:7506) / warning: bg #3a3a3e (Figma 876:7524) — 둘 다 #3a3a3e */
  .mlcl-modal--confirm .mlcl-modal-divider {
    background: #3a3a3e;
  }

  /* Mobile WARNING chip text — Figma 876:7523: 14 Bold #cc421f line 14 */
  .mlcl-modal--confirm .mlcl-status-chip--warning .mlcl-status-chip-text {
    font-size: 14px;
    line-height: 14px;
  }

  /* Mobile WARNING confirm-title — Figma 876:7529: Bold 18/26 (info 18/20과 분리) */
  .mlcl-modal--confirm-warning .mlcl-confirm-title {
    line-height: 26px;
  }

  /* Mobile content — bg white, padding 40 32 (Figma 876:7507), gap 18 */
  .mlcl-modal--confirm .mlcl-modal-content--confirm {
    background: #fff;
    padding: 40px 32px;
    gap: 18px;
  }

  /* Mobile confirm-section: padding 0 (modal-content 외곽 처리), gap 18 */
  .mlcl-modal--confirm .mlcl-confirm-section {
    padding: 0;
    gap: 18px;
  }

  /* Mobile text-block: gap 18 (icon ↔ title ↔ desc 균일) */
  .mlcl-modal--confirm .mlcl-confirm-text-block {
    gap: 18px;
  }

  /* Mobile icon — Figma 876:7508: 80×80 blue circle + 흰 "i" 큰 글리프 (44 Bold line 52) */
  .mlcl-modal--confirm .mlcl-confirm-icon--info {
    width: 80px;
    height: 80px;
    background: #4779ae;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* "i" 글리프 — 큰 텍스트로 표현 (디자인 정확 매칭) */
  .mlcl-modal--confirm .mlcl-confirm-icon--info::before {
    content: "i";
    position: static;
    transform: none;
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 52px;
    color: #fff;
    text-align: center;
  }

  /* ::after 글리프(stem) 제거 — 단일 "i" 텍스트로 충분 */
  .mlcl-modal--confirm .mlcl-confirm-icon--info::after {
    content: none;
  }

  /* Mobile confirm-title — Figma 876:7511: Bold 18/20 #303030 (다크 텍스트) */
  .mlcl-modal--confirm .mlcl-confirm-title {
    font-size: 18px;
    line-height: 20px;
    color: #303030;
  }

  /* Mobile confirm-desc — Figma 876:7512: Reg 14/22 #303030 (다크 텍스트, pre-line 유지) */
  .mlcl-modal--confirm .mlcl-confirm-desc {
    font-size: 14px;
    line-height: 22px;
    color: #303030;
  }

  /* Mobile confirm-actions — Figma 876:7513: bg white, padding pb 24 pt 16 px 16, gap 8, column (취소 위/확인 아래) */
  .mlcl-modal--confirm .mlcl-confirm-actions {
    background: #fff;
    flex-direction: column;
    padding: 16px 16px 24px 16px;
    gap: 8px;
    border-top: none;
  }

  /* Mobile 취소 — Figma 876:7514/7515: bg #eaeaea (라이트 fill), h 48, radius 12, text 14 Bold #303030 line 20 */
  .mlcl-modal--confirm .mlcl-confirm-btn--secondary {
    flex: 0 0 auto;
    height: 48px;
    min-height: 48px;
    background: #eaeaea;
    border: none;
    padding: 0;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #303030;
    border-radius: 12px;
    letter-spacing: 0;
  }

  /* Mobile 확인 — Figma 876:7516/7517: bg #f0e1d0 (PC와 동일 cream), h 56, radius 12, text 14 Bold #303030 line 22 */
  .mlcl-modal--confirm .mlcl-confirm-btn--primary {
    flex: 0 0 auto;
    height: 56px;
    min-height: 56px;
    background: #f0e1d0;
    border: none;
    padding: 0;
    font-weight: 700;
    font-size: 14px;
    line-height: 22px;
    color: #303030;
    border-radius: 12px;
    letter-spacing: 0;
  }

  .mlcl-modal--confirm .mlcl-confirm-btn--primary:hover {
    background: #e5d3b6;
  }

  /* Mobile divider 색 — Figma 876:7506: #3a3a3e 그대로 (라이트 톤 모달에서도 다크 1px divider 명시) */
}


/* ============================================================
   mypage_lcl_pending.html — L-X1 라이선스 이전 진행 중 (Pending)
   - Figma 375:2234 PC / 391:2464 Mobile
   - .dao-mlh-page 스코프 (lcl_create 와 동일 셸 재사용)
   - PC main 880w / Mobile px:16, 본문 단일 컬럼
   - 신규 prefix mlcl-pd- 로 격리
============================================================ */

/* 타이틀 + 칩 row (PC: 38h justify-between / Mobile: 28h)
   Figma spacer 16 → margin-top:16 (백 링크 다음) */
.mlcl-pd-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
}

/* 페이지 타이틀 — PC 28/38 Bold, Mobile 20/28 Bold */
.mlcl-pd-title {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 38px;
  color: #f1f1f1;
  white-space: nowrap;
}

/* 상태 칩 (outline cream) — Figma 876:4778 PC: padding 8 14, border 1.5 #f0e1d0, gap 8, dot 8 #f0e1d0, text 16 Bold #f0e1d0 line 18
   Mobile 876:5090: padding 6 10, border 1 #e6dbc8, dot 6, text 14 Bold #e6dbc8 line 16 */
.mlcl-pd-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1.5px solid #f0e1d0;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
  box-sizing: border-box;
  background: transparent;
}

/* dot — PC 8×8 #f0e1d0 / Mobile 6×6 #e6dbc8 */
.mlcl-pd-chip-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f0e1d0;
  flex-shrink: 0;
}

/* chip text — PC 16 Bold #f0e1d0 line 18 / Mobile 14 Bold #e6dbc8 line 16 */
.mlcl-pd-chip-text {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  color: #f0e1d0;
}

/* 부제 — Figma 876:4782 PC: 16 Reg #b5b5b5 line 22 / Figma 876:5094 Mobile: 14 Reg #f1f1f1 line 20
   Figma spacer PC 12 / Mobile 10 → margin-top */
.mlcl-pd-subtitle {
  margin: 12px 0 0 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #b5b5b5;
  width: 100%;
}

/* 처리 시한 카드 (PC 880×92 p:24 28 / Mobile 382×76 p:18) */
.mlcl-pd-deadline-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #353539;
  border: 1px solid #3a3a3e;
  border-radius: 12px;
  padding: 24px 28px;
  width: 100%;
  margin-top: 28px;
  box-sizing: border-box;
  white-space: nowrap;
}

/* 좌측 — label(12/18) + value(14/22), gap 4 */
.mlcl-pd-deadline-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

/* deadline-label — Figma 876:4787 PC: 18 Bold #f1f1f1 line 18 / 876:5098 Mobile: 16 Bold #f1f1f1 line 16 */
.mlcl-pd-deadline-label {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 18px;
  color: #f1f1f1;
}

/* deadline-value — Figma 876:4788 PC: 16 Reg #f1f1f1 line 22 / 876:5099 Mobile: 12 Reg #f1f1f1 line 20 */
.mlcl-pd-deadline-value {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #f1f1f1;
}

/* 우측 카운트다운 — items-baseline gap 6 (PC) / 4 (Mobile)
   "23" 24/40 Bold cream + "시간 12분 남음" 16/22 Bold cream (PC) */
.mlcl-pd-deadline-countdown {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}

/* deadline-num — Figma 876:4790 PC: 24 Bold #f0e1d0 line 40 / 876:5101 Mobile: 20 Bold #e6dbc8 line 32 */
.mlcl-pd-deadline-num {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 40px;
  color: #f0e1d0;
}

/* deadline-unit — Figma 876:4791 PC: 16 Bold #f0e1d0 line 22 / 876:5102 Mobile: 12 Bold #f0e1d0 line 18 */
.mlcl-pd-deadline-unit {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: #f0e1d0;
}

/* 입금 진행 상태 카드 (PC 880×240 / Mobile 382×194)
   Figma spacer 20 (PC) / 16 (Mobile) → margin-top */
.mlcl-pd-progress-card {
  display: flex;
  flex-direction: column;
  background: #353539;
  border: 1px solid #3a3a3e;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  margin-top: 20px;
  box-sizing: border-box;
}

/* 카드 헤더 (PC 58h px:28 py:18 / Mobile 50h px:18 py:14) */
.mlcl-pd-progress-header {
  display: flex;
  align-items: center;
  padding: 18px 28px;
  width: 100%;
  box-sizing: border-box;
}

/* Figma 876:4794 PC: 18 Bold #f1f1f1 line 22 / 876:5106 Mobile: 16 Bold line 22 */
.mlcl-pd-progress-title {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: #f1f1f1;
  white-space: nowrap;
}

/* row 사이 1px divider */
.mlcl-pd-progress-divider {
  height: 1px;
  background: #3a3a3e;
  width: 100%;
  flex-shrink: 0;
}

/* 진행 상태 row (PC 90h px:28 py:22 / Mobile 71h px:18 py:16) */
.mlcl-pd-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  width: 100%;
  box-sizing: border-box;
  gap: 12px;
}

/* 좌측 party — avatar + text-block (gap 14 PC / 12 Mobile) */
.mlcl-pd-progress-party {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* avatar 36×36 (PC) / 28×28 (Mobile) — cream outline ring (CSS pseudo) */
.mlcl-pd-progress-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2.5px solid #e6dbc8;
  background: transparent;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* avatar 안에 inset arc 효과 — Figma 진행 상태 ring 시각 표현
   border 색상 + radial 그라데이션 inner 살짝 어둡게 (대기중 느낌) */
.mlcl-pd-progress-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, transparent 60%, rgba(230,219,200,0.06) 100%);
}

/* avatar done 변형 (입금 완료) — cream filled + ✓ check (CSS pseudo)
   기존 mlcl-success-icon ✓ 패턴 재사용 (3px stroke / 22×11 / -25% Y rotate -45deg)
   PC 36×36, Mobile 28×28 — 사이즈에 맞춰 check 비율 축소 */
.mlcl-pd-progress-avatar--done {
  background: #e6dbc8;
  border-color: #e6dbc8;
}

/* radial overlay 숨기고 ::after 로 check 그림 */
.mlcl-pd-progress-avatar--done::before {
  display: none;
}

.mlcl-pd-progress-avatar--done::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;                      /* PC: 36 avatar 안 ✓ */
  height: 7px;
  border-left: 2.5px solid #303030;
  border-bottom: 2.5px solid #303030;
  transform: translate(-50%, -65%) rotate(-45deg);
  box-sizing: border-box;
}

/* text-block — PC label 12/18 + gap 2 + name 15/22 / Mobile 11/16 + gap 1 + 14/22 */
.mlcl-pd-progress-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* role — Figma 876:4803 PC: 14 Bold #f0e1d0 line 18 / 876:5115 Mobile: 12 Bold #f0e1d0 line 16 */
.mlcl-pd-progress-role {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: #f0e1d0;
}

/* name — Figma 876:4804 PC: 18 Bold #f1f1f1 line 22 / 876:5116 Mobile: 15 Bold line 22 */
.mlcl-pd-progress-name {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: #f1f1f1;
}

/* 우측 amount block — amount(num+unit) + status, gap 2 (PC) / 1 (Mobile), items-end */
.mlcl-pd-progress-amount-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* amount row — items-baseline gap 4 */
.mlcl-pd-progress-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

/* num — Figma 876:4807 PC: 24 Bold #f1f1f1 line 26 / 876:5119 Mobile: 18 Bold line 22 */
.mlcl-pd-progress-num {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 26px;
  color: #f1f1f1;
}

/* unit — Figma 876:4808 PC: 16 Bold #f0e1d0 line 20 / 876:5120 Mobile: 12 Bold #f0e1d0 line 16 */
.mlcl-pd-progress-unit {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #f0e1d0;
}

/* status — Figma 876:4809 PC: 14 Reg #f0e1d0 line 18 / 876:5121 Mobile: 12 Reg #f0e1d0 line 16 */
.mlcl-pd-progress-status {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #f0e1d0;
}

/* NoticeBox — Figma 876:4825 PC: border-left 4 #f0e1d0, radius 8, padding 14 20 / 876:5138 Mobile: border-left 4 #e6dbc8 */
.mlcl-pd-notice {
  display: flex;
  align-items: center;
  background: #353539;
  border-left: 4px solid #f0e1d0;
  border-radius: 8px;
  padding: 14px 20px;
  width: 100%;
  margin-top: 20px;
  box-sizing: border-box;
}

/* PC: 16 Reg #f1f1f1 line 24 / Mobile: 14 Reg #f1f1f1 line 22 */
.mlcl-pd-notice-line {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #f1f1f1;
}

/* CTA 액션 (PC: 본문 안 880×116 gap 12 / Mobile: position fixed sticky bottom)
   Figma spacer 20 (PC) → margin-top:20 */
.mlcl-pd-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 20px;
  box-sizing: border-box;
}

/* 공통 버튼 베이스 */
.mlcl-pd-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 12px;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background-color 150ms ease, border-color 150ms ease;
}

/* secondary — Figma 876:4858 PC: h 52, border 1 #f0e1d0, rounded 12, text 18 Bold #f0e1d0 line 20 */
.mlcl-pd-btn--secondary {
  height: 52px;
  background: transparent;
  border: 1px solid #f0e1d0;
  padding: 0 16px;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: #f0e1d0;
}

.mlcl-pd-btn--secondary:not(:disabled):hover {
  background: rgba(240, 225, 208, 0.10);
  border-color: #f0e1d0;
}

/* primary — Figma 876:4860 PC: h 52, bg #f0e1d0, rounded 12, text 18 Bold #303030 line 22 */
.mlcl-pd-btn--primary {
  height: 52px;
  background: #f0e1d0;
  border: none;
  padding: 0 16px;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: #303030;
}

.mlcl-pd-btn--primary:not(:disabled):hover {
  background: #e5d3b6;
}

.mlcl-pd-btn--primary:not(:disabled):active {
  opacity: 0.95;
}

/* disabled 공통 — deadline 만료 등 진입 차단 시 hover/active 시각이 활성처럼 보이지 않도록.
   기존 hover/active 룰을 :not(:disabled) 로 좁힌 뒤, disabled 전용 톤 다운을 명시. */
.mlcl-pd-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* L-X1c chip filled 변형 — bg cream + no border + dark text
   기존 .mlcl-pd-chip(outline cream)과 시각이 완전히 다른 완료 상태 칩.
   PC padding 8 14 / Mobile padding 6 10 — border 사라진 만큼 padding 보강해 outer 사이즈 동일 유지 */
.mlcl-pd-chip--filled {
  background: #e6dbc8;
  border: none;
  padding: 8px 14px;
}

.mlcl-pd-chip--filled .mlcl-pd-chip-dot {
  background: #303030;
}

.mlcl-pd-chip--filled .mlcl-pd-chip-text {
  color: #303030;
}

/* L-X1d chip coral filled 변형 — bg coral + no border + white text/dot
   처리 시한 만료 상태 칩. .mlcl-pd-chip--filled 와 동일 구조의 색상 변형 */
.mlcl-pd-chip--coral {
  background: #f1634f;
  border: none;
  padding: 8px 14px;
}

.mlcl-pd-chip--coral .mlcl-pd-chip-dot {
  background: #fff;
}

.mlcl-pd-chip--coral .mlcl-pd-chip-text {
  color: #fff;
}

/* L-X1d done card — "만료" coral text (처리 시한 만료 표기)
   PC 22/40 Bold coral / Mobile 18/32. ✓(28/40)와 다른 사이즈라 별도 클래스 */
.mlcl-pd-deadline-expired {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 40px;
  color: #f1634f;
}

/* L-X1c done card — 처리 완료 ✓ glyph (Figma 메타 매칭)
   PC 28/40 Bold cream / Mobile 22/32. Noto Sans Symbols 2 fallback 으로 ✓ 글리프 시각 일치 */
.mlcl-pd-deadline-check {
  font-family: 'Nanum Gothic', 'Noto Sans Symbols 2', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 40px;
  color: #e6dbc8;
}

@media (max-width: 1199px) {
  .mlcl-pd-deadline-check {
    font-size: 22px;
    line-height: 32px;
  }
}

/* primary 버튼 안 ↗ external arrow — 텍스트 옆 gap 6, 동일 baseline */
.mlcl-pd-btn--external {
  gap: 6px;
}

.mlcl-pd-btn-arrow {
  display: inline-block;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  color: #303030;
  flex-shrink: 0;
}

/* PC/Mobile 토글 (mlcl-pd 페이지 스코프) — pc-only/mobile-only 는 베이스 .dao-mlh-page 스코프에서 처리됨 */
@media (min-width: 1200px) {
  .dao-mlcl-pd-page .mlcl-mobile-only { display: none !important; }
  .dao-mlcl-pd-page .mlcl-mobile-only-block { display: none !important; }

  /* license-detail 한정 — grid 가 880+40+440=1360 이라 기본 .mlcl-content max-width 1320 으로는 잘림.
     main padding 도 (1920-277sidebar-1360)/2 ≈ 141 로 줄여 본문이 가운데 정렬되도록.
     Figma 876:4761 PC 1920 디자인과 동일 정렬을 위해 페이지 한정 override. */
  .dao-mlcl-pd-page .dao-mlcl-main {
    padding-left: 141px;
    padding-right: 141px;
  }
  .dao-mlcl-pd-page .mlcl-content {
    max-width: 1360px;
  }
}
@media (max-width: 1199px) {
  .dao-mlcl-pd-page .mlcl-pc-only { display: none !important; }
  .dao-mlcl-pd-page .mlcl-pc-only-i { display: none !important; }
  .dao-mlcl-pd-page .mlcl-pc-only-block { display: none !important; }
}

/* ============================================================
   L-X1 Mobile (≤1199px) — px:16, 폰트 size↓, actions sticky bottom
============================================================ */
@media (max-width: 1199px) {
  /* Mobile main 안쪽 padding — 부모 .dao-mlcl-main 모바일 룰이 이미 padding 20/16/32/16 을 가짐.
     .mlcl-content 에 또 padding 을 주면 좌우가 32px 로 누적되어 figma 391:2464 사양(382 폭)과 어긋남.
     따라서 .mlcl-content 는 padding 0 으로 두고 외곽 padding 책임은 .dao-mlcl-main 에만 둔다. */
  .dao-mlcl-pd-page .mlcl-content {
    padding: 0;
  }

  .dao-mlcl-pd-page .mlcl-pd-title-row {
    margin-top: 0;             /* 백 링크 없으므로 첫 요소 — main padding 이 외곽 처리 */
    align-items: flex-start;
  }

  /* Mobile title — Figma 876:5089: 18 Bold #f1f1f1 line 28 */
  .mlcl-pd-title {
    font-size: 18px;
    line-height: 28px;
    white-space: normal;
    word-break: keep-all;
    min-width: 0;
    flex: 1 1 auto;
  }

  /* Mobile chip — Figma 876:5090: padding 6 10, border 1 #e6dbc8, gap 6, dot 6 #e6dbc8, text 14 Bold #e6dbc8 line 16 */
  .mlcl-pd-chip {
    padding: 6px 10px;
    border-width: 1px;
    border-color: #e6dbc8;
    gap: 6px;
  }

  .mlcl-pd-chip-dot {
    width: 6px;
    height: 6px;
    background: #e6dbc8;
  }

  .mlcl-pd-chip-text {
    font-size: 14px;
    line-height: 16px;
    color: #e6dbc8;
  }

  /* L-X1c filled chip Mobile padding (no border 라 6 10 으로 28h 매칭) */
  .mlcl-pd-chip--filled {
    padding: 6px 10px;
  }

  /* L-X1d coral chip Mobile padding (no border 라 6 10 으로 28h 매칭) */
  .mlcl-pd-chip--coral {
    padding: 6px 10px;
  }

  /* L-X1d "만료" Mobile — 18/32 coral */
  .mlcl-pd-deadline-expired {
    font-size: 18px;
    line-height: 32px;
  }

  /* Mobile subtitle — Figma 876:5094: 14 Reg #f1f1f1 line 20, spacer 10 */
  .mlcl-pd-subtitle {
    margin-top: 10px;
    font-size: 14px;
    line-height: 20px;
    color: #f1f1f1;
  }

  /* Mobile deadline-card — Figma 876:5096: p 18, spacer 20 (PC 28) */
  .mlcl-pd-deadline-card {
    padding: 18px;
    margin-top: 20px;
  }

  /* Mobile deadline-label — Figma 876:5098: 16 Bold #f1f1f1 line 16 (PC 18/18) */
  .mlcl-pd-deadline-label {
    font-size: 16px;
    line-height: 16px;
  }

  /* Mobile deadline-value — Figma 876:5099: 12 Reg #f1f1f1 line 20 (PC 16/22) */
  .mlcl-pd-deadline-value {
    font-size: 12px;
    line-height: 20px;
  }

  /* Mobile countdown gap — Figma 876:5100: 4 (PC 6) */
  .mlcl-pd-deadline-countdown {
    gap: 4px;
  }

  /* Mobile deadline-num — Figma 876:5101: 20 Bold #e6dbc8 line 32 (PC 24/40 #f0e1d0) */
  .mlcl-pd-deadline-num {
    font-size: 20px;
    line-height: 32px;
    color: #e6dbc8;
  }

  /* Mobile deadline-unit — Figma 876:5102: 12 Bold #f0e1d0 line 18 (PC 16/22) */
  .mlcl-pd-deadline-unit {
    font-size: 12px;
    line-height: 18px;
  }

  /* 입금 진행 상태 카드 — Mobile spacer 16 (PC 20) */
  .mlcl-pd-progress-card {
    margin-top: 16px;
  }

  /* Mobile 카드 헤더 — Figma 876:5105: padding 14 18 */
  .mlcl-pd-progress-header {
    padding: 14px 18px;
  }

  /* Mobile progress-title — Figma 876:5106: 16 Bold line 22 (PC 18) */
  .mlcl-pd-progress-title {
    font-size: 16px;
  }

  /* Mobile row — Figma 876:5108: padding 16 18 */
  .mlcl-pd-progress-row {
    padding: 16px 18px;
  }

  .mlcl-pd-progress-party {
    gap: 12px;
  }

  /* Mobile avatar 28×28 + border 2 cream */
  .mlcl-pd-progress-avatar {
    width: 28px;
    height: 28px;
    border-width: 2px;
  }

  /* Mobile avatar done check ✓ — 28×28 안에 11×5.5 stroke 2 */
  .mlcl-pd-progress-avatar--done::after {
    width: 11px;
    height: 5.5px;
    border-left-width: 2px;
    border-bottom-width: 2px;
  }

  .mlcl-pd-progress-info {
    gap: 1px;
  }

  /* Mobile role — Figma 876:5115: 12 Bold #f0e1d0 line 16 (PC 14/18) */
  .mlcl-pd-progress-role {
    font-size: 12px;
    line-height: 16px;
  }

  /* Mobile name — Figma 876:5116: 15 Bold #f1f1f1 line 22 (PC 18/22) */
  .mlcl-pd-progress-name {
    font-size: 15px;
  }

  .mlcl-pd-progress-amount-block {
    gap: 1px;
  }

  /* Mobile num — Figma 876:5119: 18 Bold #f1f1f1 line 22 (PC 24/26) */
  .mlcl-pd-progress-num {
    font-size: 18px;
    line-height: 22px;
  }

  /* Mobile unit — Figma 876:5120: 12 Bold #f0e1d0 line 16 (PC 16/20) */
  .mlcl-pd-progress-unit {
    font-size: 12px;
    line-height: 16px;
  }

  /* Mobile status — Figma 876:5121: 12 Reg #f0e1d0 line 16 (PC 14/18) */
  .mlcl-pd-progress-status {
    font-size: 12px;
    line-height: 16px;
  }

  /* Mobile NoticeBox — Figma 876:5138: border-left #e6dbc8, spacer 16 */
  .mlcl-pd-notice {
    border-left-color: #e6dbc8;
    margin-top: 16px;
  }

  /* Mobile notice-line — Figma 876:5138 inner: 14 Reg #f1f1f1 line 22 (PC 16/24) */
  .mlcl-pd-notice-line {
    font-size: 14px;
    line-height: 22px;
  }

  /* Actions — Mobile 자연 흐름 (notice 바로 아래)
     Figma Mobile spacer notice→actions 16 → margin-top:16, gap 8 (Mobile spec) */
  .mlcl-pd-actions {
    margin-top: 16px;
    gap: 8px;
  }

  /* Mobile secondary button — Figma 876:5171: h 48, border 1 #f0e1d0, rounded 12, text 15 Bold #f0e1d0 line 20 (PC h 52, text 18) */
  .mlcl-pd-btn--secondary {
    height: 48px;
    font-size: 15px;
    line-height: 20px;
  }

  /* Mobile primary button — Figma 876:5173: h 56, bg #f0e1d0, rounded 12, text 15 Bold #303030 line 22 (PC h 52, text 18) */
  .mlcl-pd-btn--primary {
    height: 56px;
    font-size: 15px;
    line-height: 22px;
  }
}


/* ============================================================
   L-X1 detail page — 풀-블리드 페이지 헤더 + 2-column grid + Transaction History 카드
   - 페이지 헤더 max-width 1360
   - 본문 grid (PC 1280+): 좌 880 + gap 40 + 우 440
   - 본문 grid (≤1279): stack
   - Transaction History 카드 prefix: .mlcl-pd-txh__*
   - 액션 버튼 modifier: .mlcl-pd-action-btn--narrow (360 폭) + .mlcl-pd-actions--center
============================================================ */

/* 페이지 헤더 래퍼 — 풀-블리드 안에서 1360 max-width.
   백 링크 + 타이틀-row + 부제 묶음. mlcl-content 자체가 max-width:1320 이므로
   여기선 별도 너비 제약 없이 부모(.mlcl-content) 폭을 그대로 따른다. */
.mlcl-pd-page-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1360px;
}

/* 헤더 안 타이틀 row 가 기존 .mlcl-pd-title-row 와 동일 스타일 — modifier 만 추가 */
.mlcl-pd-page-header__title-row {
  /* 추가 스타일 없음 — 기존 .mlcl-pd-title-row 의 space-between 그대로 사용 */
}

/* 2-column grid — PC 1280+ : 좌 880 + gap 40 + 우 440 = 1360
   align-items: stretch — 좌측 NoticeBox 줄 수에 따라 컬럼 높이가 변해도 좌·우 컬럼이 동일 높이로 정렬됨 */
.mlcl-pd-grid {
  display: grid;
  grid-template-columns: 880px 440px;
  column-gap: 40px;
  align-items: stretch;
  width: 100%;
  max-width: 1360px;
  margin-top: 32px;             /* 페이지 헤더와 32px gap */
}

/* 좌측 컬럼 — 880 폭 고정 자식들이 width:100% 로 채움 */
.mlcl-pd-grid__left {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

/* 우측 컬럼 — 440 폭, 카드 단일 렌더링 컨테이너 */
.mlcl-pd-grid__right {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

/* 좌측 컬럼 안의 처리 시한 카드 첫 margin-top 제거
   (기존 .mlcl-pd-deadline-card 가 margin-top: 28px 였으나 grid 안에서는 0 으로 — 우측 카드와 top 정렬) */
.mlcl-pd-grid__left .mlcl-pd-deadline-card {
  margin-top: 0;
}

/* 액션 버튼 그룹 — center modifier (grid 외부, 페이지 중앙 정렬)
   - 자식 버튼 폭이 360px 인 .mlcl-pd-action-btn--narrow 와 함께 사용
   - .mlcl-pd-actions 의 base 룰(display:flex, flex-direction:column, gap:12, width:100%, margin-top:20)
     을 override 하여 페이지 중앙 정렬 + grid 와 32px 간격 확보 */
.mlcl-pd-actions--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* 360 폭 버튼 — 기존 .mlcl-pd-btn (width:100%) 위에 modifier 로 폭만 좁힘 */
.mlcl-pd-action-btn--narrow {
  width: 360px;
  max-width: 100%;
}

/* Transaction History 카드 — 440 폭, height 는 grid align-items: stretch 로 좌측 컬럼 height 에 자동 맞춤
   좌측 컬럼 기본: 처리 시한 92 + spacer 20 + 입금 진행 240 + spacer 20 + NoticeBox 84 = 456 (min)
   NoticeBox 가 3줄로 늘어나면 좌측 컬럼이 더 커지고 카드도 stretch 로 함께 늘어남 */
.mlcl-pd-txh {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 456px;
  background: #353539;
  border: 1px solid #3a3a3e;
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
}

/* 헤더 — SPACE_BETWEEN, padding 22 20 (좁힘 — 카드 폭 440 안에 title+updated 한 줄 fit) */
.mlcl-pd-txh__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 22px 20px;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Figma 876:4829 PC: 18 Bold #f1f1f1 line 22 / 876:5142 Mobile: 16 Bold line 20 */
.mlcl-pd-txh__title {
  margin: 0;
  flex-shrink: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: #f1f1f1;
  white-space: nowrap;
}

/* Figma 876:4830 PC: 14 Reg #f1f1f1 line 18 / 876:5143 Mobile: 11 Reg #f1f1f1 line 16
   카드 폭 440 안에서 title 18 Bold + updated 14 Reg 한 줄 fit 보장 — 잘림 시 자연 wrap */
.mlcl-pd-txh__updated {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #f1f1f1;
  text-align: right;
  white-space: normal;
  word-break: keep-all;
}

/* 헤더 ↔ body 간 1px divider */
.mlcl-pd-txh__divider {
  height: 1px;
  background: #3a3a3e;
  width: 100%;
  flex-shrink: 0;
}

/* body — 4 row 컨테이너 */
.mlcl-pd-txh__body {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

/* row — HORIZONTAL 3-column (label / content / datetime), padding 18 20
   카드 폭 440 / inner 400 안에 label 92 + body + datetime 120 fit 보장.
   PC (≥1280): body 잔여 height 를 4 row 가 균등 분배 (flex: 1 1 0). */
.mlcl-pd-txh__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #3a3a3e;
  flex: 1 1 0;
  min-height: 0;
}

/* 마지막 row 의 bottom border 제거 (카드 외곽선과 중복 방지) */
.mlcl-pd-txh__row:last-child {
  border-bottom: none;
}

/* 진행 완료 row — Figma 876:4834: 16 Bold #f1f1f1 line 20 */
.mlcl-pd-txh__row--success .mlcl-pd-txh__label {
  color: #f1f1f1;
  font-weight: 700;
}

/* 미진행 row — Figma 876:4841: 16 Reg #999999 line 20 */
.mlcl-pd-txh__row--pending .mlcl-pd-txh__label {
  color: #999999;
  font-weight: 400;
}

/* PC label width 80 / Mobile 80, size 16/20 (PC) → 14/18 (Mobile)
   "USDT 예치"/"CSET 예치" 16 Bold ≈ 76px 가 최대 — 80 으로 fit + datetime/body 영역 확보 */
.mlcl-pd-txh__label {
  flex-shrink: 0;
  width: 80px;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 16px;
  line-height: 20px;
}

/* 중앙 본문 (hash + ↗ 또는 placeholder) */
.mlcl-pd-txh__body-content {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Figma 876:4836 PC: 16 Bold #f1f1f1 line 20 / 876:5149 Mobile: 14 Bold line 18 */
.mlcl-pd-txh__hash {
  font-family: 'Nanum Gothic', monospace, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #f1f1f1;
  white-space: nowrap;
}

.mlcl-pd-txh__hash--link {
  text-decoration: none;
  cursor: pointer;
}

.mlcl-pd-txh__hash--link:hover {
  text-decoration: underline;
  color: #f1f1f1;
}

/* Figma 876:4837 PC: 16 ExtraBold #f1f1f1 line 18 / 876:5150 Mobile: 14 Bold line 18 */
.mlcl-pd-txh__explorer-link {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 18px;
  color: #f1f1f1;
  text-decoration: none;
  white-space: nowrap;
}

.mlcl-pd-txh__explorer-link:hover {
  text-decoration: underline;
  color: #f1f1f1;
}

/* Figma 876:4843 PC: 16 Reg #999 line 18 / 876:5156 Mobile: 14 Reg line 18 */
.mlcl-pd-txh__placeholder {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  color: #999999;
  white-space: nowrap;
}

/* 우측 datetime — Figma 876:4838 PC: 14 Reg #f1f1f1 line 18
   width 144 — "2026.05.19 17:11:11" 14 Reg ≈ 143 fit. label 80 으로 줄여 확보된 폭 활용.
   row inner 400 = label 80 + gap 12 + body + gap 12 + datetime 144 → body 152 (hash+arrow fit) */
.mlcl-pd-txh__datetime {
  flex-shrink: 0;
  width: 144px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #f1f1f1;
  text-align: right;
  white-space: nowrap;
}

/* empty datetime — Figma 876:4844: 12 Reg #999 line 18 (PC) */
.mlcl-pd-txh__datetime--empty {
  font-size: 12px;
  color: #999999;
}

/* ≤1279px (태블릿/모바일): grid → stack, 우측 카드 width 100% */
@media (max-width: 1279px) {
  .mlcl-pd-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 24px;
    margin-top: 24px;
  }

  .mlcl-pd-txh {
    height: auto;
    min-height: 0;
  }

  /* stack 상태에서 우측 카드 row 높이는 자연 흐름 — 헤더 + 4 row */
  .mlcl-pd-txh__body {
    flex: 0 0 auto;
  }

  /* 모바일에선 카드 height 고정이 해제되므로 row 도 자연 height 로 — PC 의 균등 분배(flex:1 1 0) 해제 */
  .mlcl-pd-txh__row {
    flex: 0 0 auto;
    min-height: 0;
  }
}

/* Mobile (≤1199px) — 라벨 width 축소, datetime width 축소, padding 축소 */
@media (max-width: 1199px) {
  .mlcl-pd-page-header {
    /* 모바일에선 백 링크 숨김 (mlcl-pc-only-block 처리) — 추가 패딩 없음 */
  }

  .mlcl-pd-grid {
    margin-top: 20px;
    row-gap: 20px;
  }

  .mlcl-pd-actions--center {
    align-items: stretch;
    gap: 8px;
    margin-top: 20px;
  }

  .mlcl-pd-action-btn--narrow {
    width: 100%;
  }

  /* Mobile header — Figma 876:5141: padding 18 20 (PC 22 28) */
  .mlcl-pd-txh__header {
    padding: 18px 20px;
  }

  /* Mobile title — Figma 876:5142: 16 Bold line 20 (PC 18/22) */
  .mlcl-pd-txh__title {
    font-size: 16px;
    line-height: 20px;
  }

  /* Mobile updated — Figma 876:5143: 11 Reg #f1f1f1 line 16 (PC 14/18) */
  .mlcl-pd-txh__updated {
    font-size: 11px;
    line-height: 16px;
  }

  /* Mobile row — Figma 876:5146: padding 14 20, gap 10 (PC 18 28, gap 12) */
  .mlcl-pd-txh__row {
    padding: 14px 20px;
    gap: 10px;
  }

  /* Mobile label — 한 줄 레이아웃 유지를 위해 너비/폰트 조정 */
  .mlcl-pd-txh__label {
    width: 72px;
    font-size: 13px;
    line-height: 18px;
  }

  /* Mobile hash/arrow/placeholder — 폰트 조정 */
  .mlcl-pd-txh__hash,
  .mlcl-pd-txh__explorer-link,
  .mlcl-pd-txh__placeholder {
    font-size: 12px;
    line-height: 18px;
  }

  /* Mobile datetime — width: auto + flex-shrink:0 으로 날짜 전체 표시 보장 */
  .mlcl-pd-txh__datetime {
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 11px;
    line-height: 18px;
  }

  /* Mobile empty datetime */
  .mlcl-pd-txh__datetime--empty {
    font-size: 11px;
  }
}

/* inline-style 치환 — 기존 license-detail 의 inline whiteSpace:pre-line 4 지점 */
.mlcl-pd-notice-line--preline {
  white-space: pre-line;
}


/* ============================================================
   mypage_lcl_approve.html — L-4 USDT 사용 권한 승인 (Approve modal)
   - Figma 373:2190 PC / 374:2234 Mobile
   - 뒷 배경: lcl_pending 본문 inline (.dao-mlcr-page 모달 시리즈 스코프)
   - PC modal 560×660 / Mobile full-screen
   - 3-step stepper + amount box + cta + LCL 컨트랙트 footer
============================================================ */

/* Stepper 3-step variant — PC: padding 36 30 16 30, step 120 + connector 60
   기존 .mlcl-stepper(2-step, padding 36 80 16 80, step 140 + connector 100) 와 다른 사이즈 */
.mlcl-stepper--3step {
  padding: 36px 30px 16px 30px;
}

.mlcl-stepper--3step .mlcl-step {
  width: 120px;
}

.mlcl-stepper--3step .mlcl-step-connector {
  width: 60px;
}

/* L-4 한정 — chip border/text + step wait state color #5b5b5b (Figma 876:4659 / 4715) */
.mlcl-modal--l4 .mlcl-status-chip {
  border-color: #e6dbc8;
}

.mlcl-modal--l4 .mlcl-status-chip-dot {
  background: #e6dbc8;
}

.mlcl-modal--l4 .mlcl-status-chip-text {
  font-size: 14px;
  color: #f0e1d0;
}

/* L-4 wait state — Figma 876:4688/4695: 모든 wait 요소 #5b5b5b */
.mlcl-modal--l4 .mlcl-step-circle--wait {
  border-color: #5b5b5b;
}

.mlcl-modal--l4 .mlcl-step-circle--wait .mlcl-step-num {
  color: #5b5b5b;
}

.mlcl-modal--l4 .mlcl-step-label--wait {
  color: #5b5b5b;
  font-weight: 400;
}

/* L-4 connector — Figma 876:4684/5292: h-px (1px, processing modal 2px와 분리) */
.mlcl-modal--l4 .mlcl-step-connector::before {
  height: 1px;
  background: #5b5b5b;
}

.mlcl-modal--l4 .mlcl-step-connector--done::before {
  background: #f0e1d0;
}

/* L-4 modal-content body — items center, gap 16, padding 28 40 (PC) */
.mlcl-modal-content--l4 {
  align-items: center;
  gap: 16px;
  padding: 28px 40px;
  width: 100%;
  box-sizing: border-box;
}

/* "입금 금액" 라벨 — Figma 876:4698 PC: 18 Bold #f0e1d0 line 18 / Mobile 876:4744: 16 line 18 */
.mlcl-l4-amount-label {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 18px;
  color: #f0e1d0;
  text-align: center;
}

/* Amount unit — Figma 876:4701 PC: 18 Bold #f0e1d0 line 26 / Mobile 876:4747: 16 #e6dbc8 line 26 */
.mlcl-l4-amount-unit {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  color: #f0e1d0;
}

/* L-4c amount inline — input 박스 없이 단순 텍스트 (100 + USDT baseline) */
.mlcl-l4-amount-inline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
}

/* L-4c amount num — span 텍스트 (form reset 없음)
   금액은 서버 확정값을 표시만 — atomic swap 헌장상 사용자 입력 input 없음 */
.mlcl-l4-amount-num-text {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  color: #f1f1f1;
}

/* L-4c desc (step 2 active) — Figma 876:5407 PC: Reg 16/24 #f1f1f1 / Mobile 876:5455: 14/22 */
.mlcl-l4-desc-text {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #f1f1f1;
  text-align: center;
  width: 100%;
}

/* Headline — Figma 876:4702 PC L-4: Bold 18/24 #f1f1f1 / Mobile 876:4749: 16 line 26 */
.mlcl-l4-headline {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: #f1f1f1;
  text-align: center;
  width: 100%;
}

/* L-4c (step 2 active) PC Headline — Figma 876:5406: Bold 22/24 (L-4 step 1 18/24와 분리)
   JSX에 이미 step 분기 (mlcl-l4-desc-text는 step 2 한정) — :has() sibling selector로 step 2 분기 */
.mlcl-l4-headline:has(+ .mlcl-l4-desc-text) {
  font-size: 16px;
}

/* Desc — Figma 876:4703 PC: Reg 15/26 #f1f1f1 (3 p) / Mobile 876:4750: 14/22 */
.mlcl-l4-desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.mlcl-l4-desc p {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  color: #f1f1f1;
}

/* Mobile desc — Figma 876:4750: Reg 14/22 #f1f1f1 (PC 15/26과 분리) */
.mlcl-l4-desc-mobile {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #f1f1f1;
  text-align: center;
  width: 100%;
}

/* PC CTA group — modal-content 안 마지막 자식, pt:12 + gap 10 */
.mlcl-l4-cta-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  width: 100%;
  box-sizing: border-box;
}

/* Mobile CTA bar — modal 직접 자식 sticky bottom (card-bg + p:16 16 24 16) */
.mlcl-l4-cta-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #353539;
  padding: 16px 16px 24px 16px;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* CTA buttons — secondary 44h border / primary 52h cream */
.mlcl-l4-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 12px;
  font-family: 'Nanum Gothic', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background-color 150ms ease, border-color 150ms ease;
}

/* Secondary "취소" — Figma 876:4705 PC: border 1 #f0e1d0, h 52, 18 Bold #f1f1f1 line 20 */
.mlcl-l4-btn--secondary {
  height: 52px;
  background: transparent;
  border: 1px solid #f0e1d0;
  padding: 0 16px;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: #f1f1f1;
}

.mlcl-l4-btn--secondary:not(:disabled):hover {
  background: rgba(240, 225, 208, 0.10);
  border-color: #f0e1d0;
}

/* Primary "지갑에서 서명하기" — Figma 876:4707 PC: bg #f0e1d0, h 52, 18 Bold #303030 line 22 */
.mlcl-l4-btn--primary {
  height: 52px;
  background: #f0e1d0;
  border: none;
  padding: 0 16px;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: #303030;
}

.mlcl-l4-btn--primary:not(:disabled):hover {
  background: #e5d3b6;
}

.mlcl-l4-btn--primary:not(:disabled):active {
  opacity: 0.95;
}

/* disabled 공통 — isSubmitting (트랜잭션 처리 중) 또는 deadline race 가드 차단 시
   hover 시각이 활성처럼 보이지 않도록 + opacity / cursor / background 모두 비활성 표시. */
.mlcl-l4-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;          /* hover/click 자체 차단 — :hover 룰이 :not(:disabled) 라 무관하지만 안전망 */
}
.mlcl-l4-btn--primary:disabled {
  background: #b8ad9b;            /* 활성 #e6dbc8 보다 한 톤 어둡게 — 처리 중임을 시각적으로 명확히 */
  color: #707070;
}
.mlcl-l4-btn--secondary:disabled {
  border-color: #444448;
  color: #777777;
}

/* footer ↗ arrow Bold cream — Noto Sans Symbols 2 fallback 추가 (글리프 일관성) */
.mlcl-tx-hash-arrow {
  font-family: 'Nanum Gothic', 'Noto Sans Symbols 2', sans-serif;
}

/* ============================================================
   L-4 Mobile (≤1199px) — full-screen modal, stepper 90+40 sizing
============================================================ */
@media (max-width: 1199px) {
  /* Mobile stepper 3-step — Figma 876:4724: padding pb 16 pt 36 px 16, step 90, connector 40 */
  .mlcl-stepper--3step {
    padding: 36px 16px 16px 16px;
  }

  .mlcl-stepper--3step .mlcl-step {
    width: 90px;
  }

  .mlcl-stepper--3step .mlcl-step-connector {
    width: 40px;
    height: 28px;
  }

  /* Mobile L-4 connector wait color — Figma 876:4731/5344: bg #3a3a3e (PC #5b5b5b와 분리) */
  .mlcl-modal--l4 .mlcl-step-connector::before {
    background: #3a3a3e;
  }

  /* Mobile modal-content--l4 — Figma 876:4723: flex-1 center, gap 28, padding pb 24 pt 36 px 24 */
  .mlcl-modal-content--l4 {
    flex: 1;
    min-height: 0;
    padding: 36px 24px 24px 24px;
    gap: 28px;
    align-items: center;
    justify-content: center;
  }

  /* L-4c desc Mobile — Figma 876:5455: Reg 14/22 #f1f1f1 (PC 16/24와 분리) */
  .mlcl-l4-desc-text {
    font-size: 14px;
    line-height: 22px;
    white-space: pre-line;
  }

  /* Mobile L-4 amount-label — Figma 876:4744: 16 Bold #f0e1d0 line 18 (PC 18과 분리) */
  .mlcl-l4-amount-label {
    font-size: 16px;
  }

  /* Mobile L-4 (step 1) amount inline → 카드형 — Figma 876:4745: bg #272729, padding 18 32, radius 12 */
  .mlcl-l4-amount-inline {
    background: #272729;
    padding: 18px 32px;
    border-radius: 12px;
  }

  /* Mobile amount num — Figma 876:4746: 22 Bold #f1f1f1 line 44 (PC 36 → mobile 22) */
  .mlcl-l4-amount-num-text {
    font-size: 22px;
  }

  /* Mobile amount unit — Figma 876:4747: 16 Bold #e6dbc8 line 26 (PC 18 #f0e1d0 → mobile 16 #e6dbc8) */
  .mlcl-l4-amount-unit {
    font-size: 16px;
    color: #e6dbc8;
  }

  /* Mobile L-4c (step 2 active) amount — Figma 876:5450: card 제거 + PC 사이즈 (num 36, unit 18 #f0e1d0)
     JSX step 2 한정 .mlcl-l4-desc-text 존재 시 :has 분기 */
  .mlcl-modal-content--l4:has(.mlcl-l4-desc-text) .mlcl-l4-amount-inline {
    background: transparent;
    padding: 0;
    border-radius: 0;
  }

  .mlcl-modal-content--l4:has(.mlcl-l4-desc-text) .mlcl-l4-amount-num-text {
    font-size: 36px;
  }

  .mlcl-modal-content--l4:has(.mlcl-l4-desc-text) .mlcl-l4-amount-unit {
    font-size: 18px;
    color: #f0e1d0;
  }

  /* Mobile headline — Figma 876:4749: 16 Bold line 26 (PC 18/24) */
  .mlcl-l4-headline {
    font-size: 16px;
    line-height: 26px;
  }

  /* Mobile desc — Figma 876:4750: Reg 14/22 (PC desc는 15/26) */
  .mlcl-l4-desc p {
    font-size: 14px;
    line-height: 22px;
  }

  /* Mobile CTA bar — Figma 876:4751: padding 16 (모든면), gap 8 (PC 10) */
  .mlcl-l4-cta-bar {
    padding: 16px;
    gap: 8px;
  }

  /* Mobile L-4 buttons — Figma 876:4752/4754: h 52, secondary border #f0e1d0 15 Bold #f1f1f1, primary 15 Bold #303030 */
  .mlcl-l4-btn--secondary {
    height: 52px;
    font-size: 15px;
  }

  .mlcl-l4-btn--primary {
    font-size: 15px;
  }
}

/* ============================================================
   mypage_lcl_refund_processing.html — L-Refund 환불 처리 (Refund Processing)
   - Figma 425:2966 PC / 426:3010 Mobile
   - 뒷 배경: lcl_expired (만료 후 환불 시도)
   - PC modal 560×468 / Mobile full-screen
   - spinner + amount inline + headline + desc + tx hash footer (CTA/Stepper 없음)
============================================================ */

/* L-Refund modal-content — items center + gap 18 (PC 36/40/32 padding)
   기존 .mlcl-modal-content--l4(gap 16, padding 28 40)와 spacing 다름 → 별도 modifier */
.mlcl-modal-content--refund {
  align-items: center;
  gap: 18px;
  padding: 36px 40px 32px 40px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1199px) {
  /* Mobile: flex-1 + center, padding 0 (위/아래 spacer 자동 분배). gap 18 유지 */
  .mlcl-modal-content--refund {
    flex: 1;
    min-height: 0;
    padding: 0;
    gap: 18px;
    justify-content: center;
  }

  /* Mobile amount text 사이즈 다운 — PC 36/44+18/26 → Mobile 32/40+16/24 (메타) */
  .mlcl-modal-content--refund .mlcl-l4-amount-num-text {
    font-size: 32px;
    line-height: 40px;
  }

  .mlcl-modal-content--refund .mlcl-l4-amount-unit {
    font-size: 16px;
    line-height: 24px;
  }
}


/* ============================================================
   mypage_notifications.html — N1 알림 페이지
   - Figma 342:1545 PC / 343:1719 Mobile
   - 사이드바: mypage_main 6개 + 알림 active 추가 = 7개
   - 본문: title-row + filter chips + card list + pagination
   - 신규 prefix: notif-*
============================================================ */

/* PC/Mobile 토글 (notif 페이지 한정 스코프) */
@media (min-width: 1200px) {
  .dao-notif-page .notif-mobile-only { display: none !important; }
}
@media (max-width: 1199px) {
  .dao-notif-page .notif-pc-only { display: none !important; }
}

/* notif-content wrap — PC 1320 max + center / Mobile 100% */
.notif-content {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 56px 0;
  box-sizing: border-box;
}

/* PC title row — 알림 (28/42) + 모두 읽음 우측 */
.notif-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.notif-title {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 42px;
  color: #f1f1f1;
}

/* 모두 읽음 — Figma 889:6192: Bold 14/22 #f1f1f1 (no decoration) */
.notif-mark-read {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  color: #f1f1f1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 150ms ease;
}

.notif-mark-read:hover {
  color: #edb323;
}

/* Title-actions / Filter-actions 공용 pill 버튼 — Figma 889:6189, 889:6201
   default: yellow outline (선택 버튼), --danger: coral outline (읽은 알림 삭제) */
.notif-title-actions,
.notif-mobile-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notif-mobile-actions {
  gap: 10px;
}

/* button, a 등 어떤 호스트 요소가 와도 글로벌 reset(`button { border: none }`)을
   덮어쓰도록 longhand 명시 + box-sizing 고정. Figma 889:6202 btn/select 색상 매칭 */
button.notif-action-btn,
a.notif-action-btn,
.notif-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  background: transparent;
  border-style: solid;
  border-width: 1px;
  border-color: #edb323;
  border-radius: 999px;
  box-sizing: border-box;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: normal;
  color: #f1f1f1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

button.notif-action-btn:hover,
a.notif-action-btn:hover,
.notif-action-btn:hover {
  background: rgba(237, 179, 35, 0.10);
}

button.notif-action-btn--danger,
a.notif-action-btn--danger,
.notif-action-btn--danger {
  border-color: #f1634f;
  color: #f1634f;
}

button.notif-action-btn--danger:hover,
a.notif-action-btn--danger:hover,
.notif-action-btn--danger:hover {
  background: rgba(241, 99, 79, 0.10);
}

/* PC 부제 — 14/22 muted */
.notif-subtitle {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #b5b5b5;
}

/* Mobile meta-row — "라이선스 실행 수신 알림" 14/20 + "모두 읽음" 14/20 */
.notif-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.notif-meta-text {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #f1f1f1;
}

/* filter-bar — Figma 889:6195: 좌측 chip-row + 우측 select 액션 (space-between) */
.notif-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 32px;                 /* PC subtitle → filter spacer */
}

/* filter row — chip 두 개 gap 8 (PC: 65-57=8 / Mobile: 61-53=8) */
.notif-filter-row {
  display: flex;
  gap: 8px;
}

/* filter-actions wrapper — Figma 889:6201: flex items-center justify-center shrink-0 */
.notif-filter-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 선택 모드 바 — select 모드 진입 시 표시 (전체선택 + 삭제) */
.notif-select-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  background: #353539;
  border: 1px solid #3a3a3e;
  border-radius: 12px;
}

.notif-select-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.notif-select-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #f1f1f1;
  cursor: pointer;
  user-select: none;
}

.notif-select-all-check {
  width: 18px;
  height: 18px;
  accent-color: #edb323;
  cursor: pointer;
}

.notif-select-count {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #b5b5b5;
}

.notif-select-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid #f1634f;
  border-radius: 999px;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #f1634f;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.notif-select-delete-btn:hover:not(:disabled) {
  background: rgba(241, 99, 79, 0.10);
}

.notif-select-delete-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 칩 base — Figma 889:6197/6199: default outline yellow + active yellow filled
   PC default text 14 Bold #f1f1f1 / active text 14 Bold #303030 (h32 px16 py7) */
.notif-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border: 1px solid #edb323;
  border-radius: 999px;
  background: transparent;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: #f1f1f1;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.notif-chip:hover {
  background: rgba(237, 179, 35, 0.10);
}

.notif-chip--active {
  background: #edb323;
  border-color: #edb323;
  color: #303030;
}

.notif-chip--active:hover {
  background: #d49f1f;
  border-color: #d49f1f;
}

/* 알림 리스트 — gap 12 (PC) / 10 (Mobile) */
.notif-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;                 /* filter → list spacer */
}

/* 알림 빈 상태 */
.notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 56px 24px;
  margin-top: 16px;
  background: #353539;
  border: 1px dashed #4a4a4e;
  border-radius: 16px;
  text-align: center;
}

.notif-empty-icon {
  width: 48px;
  height: 48px;
  opacity: 0.35;
}

.notif-empty-title {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #a0a0a8;
}

.notif-empty-desc {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 13px;
  color: #606068;
  line-height: 1.6;
}

/* 알림 카드 — Figma 889:6206: bg card-bg + border + radius 12 + p:16 + gap 12 + h 96 고정 */
.notif-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: 96px;
  background: #353539;
  border: 1px solid #3a3a3e;
  border-radius: 12px;
  padding: 16px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 150ms ease;
}

.notif-card:hover {
  border-color: #4a4a4e;
}

/* 카드 status — Figma 889:6206;333:16: 8×24 컨테이너 안 노란 dot (위쪽 정렬)
   안 읽음: yellow dot 8×8 at top / 읽음: 빈 공간 (자리만 유지) */
.notif-card-status {
  position: relative;
  display: block;
  width: 8px;
  height: 24px;
  background: transparent;
  flex-shrink: 0;
}

.notif-card--unread .notif-card-status::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #edb323;
}

/* card body — flex 1 + min-width 0 (텍스트 wrap 안전) */
.notif-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notif-card-name {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #f1f1f1;
}

.notif-card-desc {
  margin: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #b5b5b5;
}

/* card meta — 시간 + arrow, gap 6, pt 4 */
.notif-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
}

.notif-card-time {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #b5b5b5;
}

/* tx-arrow icon — Figma 889:6206;333:23: 12×12 SVG (stroke cream) */
.notif-card-arrow {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  display: block;
}

/* 페이지네이션 — border-top + p:20 + gap 20 + page-selector + pag-controls */
.notif-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  margin-top: 32px;                 /* list → pagination spacer */
  border-top: 1px solid #3a3a3e;
}

/* page selector wrap — relative anchor for dropdown */
.notif-page-selector-wrap {
  position: relative;
}

/* page selector button */
.notif-page-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 72px;
  height: 44px;
  padding: 0 12px;
  background: #353539;
  border: 1px solid #3a3a3e;
  border-radius: 8px;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 150ms ease;
}

.notif-page-selector:hover {
  border-color: #5a5a60;
}

.notif-page-selector--open {
  border-color: #e6dbc8;
}

.notif-page-num {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #f1f1f1;
}

.notif-page-chevron {
  font-size: 11px;
  color: #b5b5b5;
  line-height: 1;
  transition: transform 200ms ease;
  display: inline-block;
}

.notif-page-chevron--up {
  transform: rotate(180deg);
}

/* page dropdown list */
.notif-page-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 80px;
  max-height: 200px;
  overflow-y: auto;
  background: #2c2c30;
  border: 1px solid #3a3a3e;
  border-radius: 10px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  z-index: 100;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);

  scrollbar-width: thin;
  scrollbar-color: #4a4a4e transparent;
}

.notif-page-dropdown::-webkit-scrollbar {
  width: 4px;
}

.notif-page-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.notif-page-dropdown::-webkit-scrollbar-thumb {
  background: #4a4a4e;
  border-radius: 2px;
}

.notif-page-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 14px;
  color: #b5b5b5;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.notif-page-option:hover {
  background: #3a3a3e;
  color: #f1f1f1;
}

.notif-page-option--active {
  color: #e6dbc8;
  font-weight: 700;
}

/* pag controls — 4 chevron buttons gap 18 */
.notif-pag-controls {
  display: flex;
  align-items: center;
  gap: 18px;
}

.notif-pag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  font-family: 'Nanum Gothic', 'Noto Sans Symbols 2', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: #f1f1f1;
  cursor: pointer;
  transition: color 150ms ease;
}

.notif-pag-btn:hover {
  color: #e6dbc8;
}

.notif-pag-btn:disabled {
  background: transparent;
}

/* ============================================================
   N1 Mobile (≤1199px)
============================================================ */
@media (max-width: 1199px) {
  /* Mobile content padding 24 16 */
  .notif-content {
    padding: 24px 16px;
    max-width: 100%;
  }

  /* meta-row 첫 요소 (Mobile 헤더가 "알림" 표시) — Figma 889:6236: 16 Bold #f1f1f1 line 20 */
  .notif-meta-text {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
  }

  /* filter-bar — meta-row → filter 사이 16 spacer (Figma 889:6242) */
  .notif-filter-bar {
    margin-top: 16px;
  }

  /* Mobile chip — Figma 889:6245/6247: h32 px14 py7, text 12 Bold */
  .notif-chip {
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
  }

  /* Mobile action-btn (선택 / 읽은 알림 삭제) — Figma 889:6239/6250: h30 px12 text 12 Bold */
  .notif-action-btn {
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
  }

  /* Mobile mark_all_read 텍스트 — Figma 889:6241: 12 Bold #f1f1f1 line 20 */
  .notif-mark-read {
    font-size: 12px;
    line-height: 20px;
  }

  /* list gap 10 (PC 12) */
  .notif-list {
    gap: 10px;
    margin-top: 16px;
  }

  /* pagination 24 spacer (PC 32) */
  .notif-pagination {
    margin-top: 24px;
  }

  button.notif-action-btn,
  a.notif-action-btn,
  .notif-action-btn  {
    font-size: 12px !important;
  }
}


/* ============================================================
   Notification Dropdown — 헤더 알림 버튼 클릭 시 토글
   - Figma 344:1873 (380×642), bg #353539 + border + radius 12 + shadow
   - 트리거: .dao-header-notif-btn (button)
   - 드롭다운: .dao-header-icon-group--notif 안 absolute (top:100%+8 right:0)
============================================================ */

/* 알림 group 부모 — dropdown absolute 기준점 */
.dao-header-icon-group--notif {
  position: relative;
}

/* dao-header-notif-btn 시각 스타일은 상단 (line 136~) 정의에서 처리 — Figma 876:3735 옐로우 카드 45×45.
   여기는 dropdown 트리거 wrapper 룰만 유지 (button reset 은 상단 룰에 통합되어 중복 제거). */

/* Dropdown wrapper — 380×642, Bootstrap .dropdown-menu + 커스텀 스타일 합성
   Bootstrap data-bs-display="static" 적용 시 [data-bs-popper="static"] 인라인 속성 + transform/margin 자동 설정 → !important 로 우리 좌표 강제 */
.notif-dropdown.dropdown-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important; /* 헤더 알림 버튼 아래 8px gap */
  right: 0 !important;
  left: auto !important;            /* Bootstrap default left:0 override */
  bottom: auto !important;
  transform: none !important;       /* Popper transform 무력화 */
  margin: 0 !important;             /* Bootstrap dropdown-menu margin 제거 */
  width: 380px;
  min-width: 380px;                 /* Bootstrap min-width 10rem override */
  padding: 0;                       /* Bootstrap padding 0.5rem 제거 */
  background: #353539;
  border: 1px solid #3a3a3e;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  z-index: 1200;                    /* dao-header z-index 1100 위 */
  overflow: hidden;
  display: none;                    /* default 닫힘 */
  flex-direction: column;
  color: inherit;
}

/* Bootstrap .show 클래스 시 flex (Bootstrap default block override) */
.notif-dropdown.dropdown-menu.show {
  display: flex;
}

/* Dropdown header — 56h, padding 18 20, "알림" 16/20 Bold + "모두 읽음" 13/18 cream */
.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  height: 56px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.notif-dropdown-title {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #f1f1f1;
}

.notif-dropdown-mark-read {
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: #e6dbc8;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.notif-dropdown-mark-read:hover {
  color: #e6dbc8;
  opacity: 0.85;
}

/* Dropdown divider — 1px #3a3a3e */
.notif-dropdown-divider {
  height: 1px;
  background: #3a3a3e;
  flex-shrink: 0;
}

/* Dropdown list — padding 12, gap 8, 5 cards × 96 = 480 + 4×8 = 512 + padding 24 = 536 */
.notif-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  flex-shrink: 0;
}

.notif-dropdown-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 14px 16px;
  box-sizing: border-box;
  font-family: 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: #e6dbc8;
  text-decoration: none;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.notif-dropdown-footer:hover {
  color: #e6dbc8;
  opacity: 0.85;
}

/* Mobile (≤1199px) — dropdown 작아지면 풀 width 또는 모바일 헤더 클릭 시 페이지 이동 등
   Figma 메타에 Mobile dropdown 디자인 없음 → Mobile 에서 dropdown 숨김(헤더 알림 버튼은 페이지로 이동) */
@media (max-width: 1199px) {
  .notif-dropdown {
    /* Mobile 화면 폭에 맞춰 축소 — right:16 left:16 으로 자동 align */
    width: auto;
    left: auto;
    right: 8px;
    max-width: calc(100vw - 16px);
  }
}

/* Directory page — skeleton placeholders for card loading & per-card balance fetch
   Phase 1 (server query loading): full card placeholder via .crd-card--skeleton + .crd-skeleton-bar children
   Phase 2 (server done, balance pending): amount slot only via .crd-card-num--skeleton
   다크 테마(--crd-card-bg: #353539)에 맞춰 톤다운된 shimmer 사용 */
.crd-skeleton-bar {
  display: block;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: crd-skeleton-shimmer 1.6s ease-in-out infinite;
}

/* bar height = 정상 카드 line-height 매칭 (name 30 / email 20 / num 24) — info gap 4 와 합쳐 정상 카드와 동일 height 확보.
   .crd-card-info { gap: 4px } 가 자식 사이 spacing 담당 → bar 자체에 margin 두지 않음 (이중 spacing 방지). */
.crd-skeleton-bar--name {
  width: 65%;
  height: 30px;
}

.crd-skeleton-bar--email {
  width: 50%;
  height: 20px;
}

.crd-skeleton-bar--num {
  width: 42%;
  height: 24px;
}

.crd-skeleton-bar--btn {
  flex: 0 0 auto;
  width: 140px;
  height: 40px;
  border-radius: var(--crd-radius-button);
  background: linear-gradient(
    90deg,
    rgba(230, 219, 200, 0.12) 0%,
    rgba(230, 219, 200, 0.22) 50%,
    rgba(230, 219, 200, 0.12) 100%
  );
  background-size: 200% 100%;
  animation: crd-skeleton-shimmer 1.6s ease-in-out infinite;
}

/* skeleton 카드 — light(#f1f1f1) / disabled gray(#6b6b6b) 두 상태로 분기되기 전 중립 dark bg.
   balance 조회 완료 후 light or gray 로 결정 → 흰색↔회색 직접 전환의 어색함을 dark→결정색 으로 완충.
   .crd-card 기본 bg(light) override 필요. shimmer bar 는 dark 위에 흰색 톤이라 가시성 확보. */
.crd-card--skeleton {
  background: var(--crd-card-bg);
  border-color: var(--crd-profile-bg);
  cursor: default;
}

.crd-card--skeleton:hover {
  border-color: var(--crd-profile-bg);
}

.crd-card-num--skeleton {
  display: inline-block;
  width: 96px;
  height: 18px;
  vertical-align: middle;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: crd-skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes crd-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .crd-skeleton-bar,
  .crd-skeleton-bar--btn,
  .crd-card-num--skeleton {
    animation: none;
  }
}

/* ===== Notice popup (ntcp-*) — landing 진입 시 활성 공지 stack ===== */
.ntcp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  overflow-y: auto;
  padding: 24px;
}
.ntcp-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  min-height: calc(100vh - 48px);
}
.ntcp-card {
  position: relative;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ntcp-card-linkable .ntcp-card-content {
  cursor: pointer;
}
.ntcp-card-content {
  display: flex;
  flex-direction: column;
}
.ntcp-card-header {
  padding: 20px 24px 12px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ntcp-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  line-height: 1.4;
}
.ntcp-card-image {
  width: 100%;
  background: #f3f4f6;
}
.ntcp-card-image img {
  width: 100%;
  height: auto;
  display: block;
}
.ntcp-card-body {
  padding: 16px 24px;
  font-size: 15px;
  color: #1f2937;
  line-height: 1.6;
  max-height: 360px;
  overflow-y: auto;
}
.ntcp-card-body p {
  margin-bottom: 10px;
}
.ntcp-card-body img {
  max-width: 100%;
  height: auto;
}
.ntcp-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #fafafa;
}
.ntcp-card-hide-today {
  background: none;
  border: none;
  padding: 6px 8px;
  font-size: 13px;
  color: #6b7280;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ntcp-card-hide-today:hover {
  color: #111827;
}
.ntcp-card-close-btn {
  background: #111827;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.ntcp-card-close-btn:hover {
  background: #374151;
}
@media (max-width: 600px) {
  .ntcp-overlay {
    padding: 24px 12px;
  }
  .ntcp-stack {
    max-width: 100%;
    gap: 12px;
  }
  .ntcp-card-header {
    padding: 16px 18px 10px 18px;
  }
  .ntcp-card-title {
    font-size: 16px;
  }
  .ntcp-card-body {
    padding: 14px 18px;
    font-size: 14px;
  }
  .ntcp-card-footer {
    padding: 10px 16px;
  }
}

/* ============================================================
   license-deposit-success-modal — Figma 876:7332 PC / 876:7412 Mobile
   - .mlcl-modal--l4 안에 .mlcl-success-section 이 있는 경우 (success modal 한정)
   - chip: blue filled + pseudo dot + white text (L-3 cream-filled completed chip 과 분리)
   - PC: modal-content--l4 padding 0 으로 풀고 자식이 자체 spacing 처리
   - Mobile: LCL 컨트랙트 footer 숨김 (Figma 모바일 디자인엔 footer 없음)
============================================================ */

/* COMPLETED chip — Figma 876:7345/7415 PC: bg #4779ae, padding 4 10, gap 6, dot 6×6 #f1f1f1, text 16 Bold #f1f1f1 line 16
   L-4 deposit-success/deposit-modal 만 매칭. refund-success(modal--refund) 는 기존 cream chip 유지 */
.mlcl-modal--l4 .mlcl-status-chip--completed {
  background: #4779ae;
  border: none;
  padding: 4px 10px;
  gap: 6px;
}
.mlcl-modal--l4 .mlcl-status-chip--completed::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f1f1f1;
  flex-shrink: 0;
}
.mlcl-modal--l4 .mlcl-status-chip--completed .mlcl-status-chip-text {
  color: #f1f1f1;
  font-size: 16px;
  line-height: 16px;
}

/* PC modal-content — Figma 876:7349/7356/7362 가 각자 padding 보유 → 부모 modal-content--l4 padding 0 */
.mlcl-modal--l4:has(.mlcl-success-section) .mlcl-modal-content--l4 {
  padding: 0;
  gap: 0;
}

/* PC success-section — Figma 876:7349: pt 40 / pb 32 / px 32, gap 16 */
.mlcl-modal--l4:has(.mlcl-success-section) .mlcl-success-section {
  padding: 40px 32px;
  gap: 16px;
}

/* PC success-desc — Figma 876:7354: 16 Reg #f1f1f1 line 24 (L-3 기본 20 → 24) */
.mlcl-modal--l4:has(.mlcl-success-section) .mlcl-success-desc {
  line-height: 24px;
}

/* PC amount section — Figma 876:7356: pt 24 / pb 24 / px 32, gap 10 (label↔inline)
   amount-label/amount-inline 은 modal-content 직접 자식이라 margin 으로 spacing 처리 */
.mlcl-modal--l4:has(.mlcl-success-section) .mlcl-l4-amount-label {
  margin-top: 24px;
}
.mlcl-modal--l4:has(.mlcl-success-section) .mlcl-l4-amount-inline {
  margin-top: 10px;
  margin-bottom: 24px;
  gap: 8px;
}

/* PC CTA group — Figma 876:7362: pt 20 / pb 28 / px 32, gap 8 (기본 pt 12, gap 10 override) */
.mlcl-modal--l4:has(.mlcl-success-section) .mlcl-l4-cta-group {
  padding: 20px 32px 28px 32px;
  gap: 8px;
}

/* PC CTA buttons — Figma 876:7363/7365: 둘 다 h 56, secondary text cream #f0e1d0 line 20 (기본 #f1f1f1 → cream) */
.mlcl-modal--l4:has(.mlcl-success-section) .mlcl-l4-btn--secondary {
  color: #f0e1d0;
  height: 56px;
  line-height: 20px;
}
.mlcl-modal--l4:has(.mlcl-success-section) .mlcl-l4-btn--primary {
  height: 56px;
}

/* ============================================================
   license-deposit-success-modal — Mobile (≤1199px)
============================================================ */
@media (max-width: 1199px) {
  /* Mobile chip — Figma 876:7415-7417: 동일 blue + dot 6 + text 14 Bold #f1f1f1 line 14 */
  .mlcl-modal--l4 .mlcl-status-chip--completed .mlcl-status-chip-text {
    font-size: 14px;
    line-height: 14px;
  }

  /* Mobile modal-title — Figma 876:7414: Bold 16/22 (기본 18/22 → 16/22) */
  .mlcl-modal--l4:has(.mlcl-success-section) .mlcl-modal-title {
    font-size: 16px;
    line-height: 22px;
  }

  /* Mobile content — Figma 876:7419: flex-1 center, padding 40 32, gap 18 (success-section ↔ amount 사이 단일 컨테이너) */
  .mlcl-modal--l4:has(.mlcl-success-section) .mlcl-modal-content--l4 {
    padding: 40px 32px;
    gap: 18px;
  }

  /* Mobile success-section — padding 0, gap 18 (modal-content gap 과 동일하게 자식간 균등) */
  .mlcl-modal--l4:has(.mlcl-success-section) .mlcl-success-section {
    padding: 0;
    gap: 18px;
  }

  /* Mobile success-icon — Figma 876:7420: 80×80 (PC 64 → 80), check 비율도 1.25× 확대 */
  .mlcl-modal--l4:has(.mlcl-success-section) .mlcl-success-icon {
    width: 80px;
    height: 80px;
  }
  .mlcl-modal--l4:has(.mlcl-success-section) .mlcl-success-icon::after {
    width: 28px;
    height: 14px;
  }

  /* Mobile success-title — Figma 876:7423: 18 Bold #f1f1f1 line 26 (L-3 기본 18/24 → 26) */
  .mlcl-modal--l4:has(.mlcl-success-section) .mlcl-success-title {
    margin-top: 0;
    font-size: 18px;
    line-height: 26px;
  }

  /* Mobile success-desc — Figma 876:7424: 14 Reg #f1f1f1 line 22 */
  .mlcl-modal--l4:has(.mlcl-success-section) .mlcl-success-desc {
    margin-top: 0;
    font-size: 14px;
    line-height: 22px;
  }

  /* Mobile amount — Figma 876:7425/7426: label 16 Bold #f0e1d0 line 18 / inline gap 8 (모바일 카드형 제거) */
  .mlcl-modal--l4:has(.mlcl-success-section) .mlcl-l4-amount-label {
    margin-top: 0;
    font-size: 16px;
    line-height: 18px;
  }
  .mlcl-modal--l4:has(.mlcl-success-section) .mlcl-l4-amount-inline {
    margin-top: 0;
    margin-bottom: 0;
    background: transparent;
    padding: 0;
    border-radius: 0;
    gap: 8px;
  }

  /* Mobile amount-num — Figma 876:7427: 32 Bold #f1f1f1 line 40 (기본 모바일 22 → 32) */
  .mlcl-modal--l4:has(.mlcl-success-section) .mlcl-l4-amount-num-text {
    font-size: 32px;
    line-height: 40px;
  }

  /* Mobile amount-unit — Figma 876:7428: 16 Bold #f0e1d0 line 24 (기본 모바일 16 #e6dbc8 line 26 → cream/24) */
  .mlcl-modal--l4:has(.mlcl-success-section) .mlcl-l4-amount-unit {
    font-size: 16px;
    line-height: 24px;
    color: #f0e1d0;
  }

  /* Mobile CTA bar — Figma 876:7429: bg #353539, pt 16 / pb 24 / px 16, gap 8 (기본 padding 16 → pb 24) */
  .mlcl-modal--l4:has(.mlcl-success-section) .mlcl-l4-cta-bar {
    padding: 16px 16px 24px 16px;
    gap: 8px;
  }

  /* Mobile CTA buttons — Figma 876:7430-7433: 둘 다 h 52, secondary text cream #f0e1d0 15 Bold line 20, primary 15 Bold #303030 line 22 */
  .mlcl-modal--l4:has(.mlcl-success-section) .mlcl-l4-btn--secondary {
    height: 52px;
    color: #f0e1d0;
    font-size: 15px;
    line-height: 20px;
  }
  .mlcl-modal--l4:has(.mlcl-success-section) .mlcl-l4-btn--primary {
    height: 52px;
    font-size: 15px;
    line-height: 22px;
  }

  /* Mobile footer hide — Figma 876:7412 디자인에 LCL 컨트랙트 footer 없음.
     cta-bar 다음 divider 도 같이 숨겨 시각적 1px 잔존선 제거 */
  .mlcl-modal--l4:has(.mlcl-success-section) .mlcl-modal-footer,
  .mlcl-modal--l4:has(.mlcl-success-section) .mlcl-l4-cta-bar + .mlcl-modal-divider {
    display: none;
  }
}

/* ============================================================
   Guide pages (이용방법) — lgd-* prefix
   • 공유 자산 없음. 향후 가이드 디자인 변경은 이 블록 안에서만 처리.
   • 페이지 bg: 랜딩과 동일 #272729 (다크).
   ============================================================ */

.lgd-body {
  display: flex;
  align-items: stretch;
  background: #272729;
  color: #f1f1f1;
  width: 100%;
  flex: 1 0 100%;
  min-width: 0;
  min-height: calc(100vh - 88px);
  box-sizing: border-box;
}

/* Sidebar — PC only */
.lgd-sidebar {
  flex-shrink: 0;
  width: 277px;
  padding-top: 70px;
}
.lgd-sidebar-card {
  position: relative;
  background: #ffffff;
  border-radius: 10px;
  width: 277px;
  padding: 50px 27px 36px 27px;
  box-sizing: border-box;
}
.lgd-sidebar-card-bar {
  position: absolute;
  left: 0;
  top: 37px;
  width: 5.33px;
  height: 42px;
  background: #afce35;
  border-radius: 0 5px 5px 0;
  display: block;
}
.lgd-sidebar-card-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 36px;
}
.lgd-sidebar-card-header-icon {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}
.lgd-sidebar-card-header-label {
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: #272729;
  letter-spacing: -0.16px;
}
.lgd-sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 27px;
}
.lgd-sidebar-menu-item {
  display: block;
}
.lgd-sidebar-menu-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  padding-left: 24px;
}
.lgd-sidebar-menu-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #adadad;
  flex-shrink: 0;
}
.lgd-sidebar-menu-label {
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.16px;
  color: #adadad;
}
.lgd-sidebar-menu-item--active .lgd-sidebar-menu-dot {
  background: #272729;
}
.lgd-sidebar-menu-item--active .lgd-sidebar-menu-label {
  color: #272729;
}

/* Main content */
.lgd-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 61px 48px 80px 48px;
  box-sizing: border-box;
}
.lgd-page-title {
  margin: 0;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 42px;
  letter-spacing: -0.3px;
  color: #f1f1f1;
}
.lgd-page-intro {
  margin: 5px 0 0 0;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.16px;
  color: #f1f1f1;
}

/* Section title (절차 안내 / 용어 안내) */
.lgd-section-title {
  margin: 0;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 42px;
  letter-spacing: -0.22px;
  color: #f1f1f1;
}

/* PC/Mobile text-variant toggles — Figma 줄바꿈을 너비별로 정확히 매칭하기 위함 */
.lgd-text-pc {
  display: inline;
}
.lgd-text-mobile {
  display: none;
}

/* Steps section */
.lgd-steps {
  margin-top: 70px;
}
.lgd-steps-card {
  margin-top: 9px;
  background: #f1f1f1;
  border-radius: 12px;
  padding: 41px 24px;
}
.lgd-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
.lgd-steps-cell {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-shrink: 1;
}
.lgd-steps-cell:last-child {
  /* No arrow inside; let it sit naturally */
}
.lgd-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 225px;
  max-width: 225px;
  min-width: 0;
  flex-shrink: 1;
}
.lgd-step-icon-wrap {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lgd-step-icon {
  width: 80px;
  height: 80px;
  display: block;
}
.lgd-step-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.lgd-step-title {
  margin: 0;
  font-family: 'Inter', 'Noto Sans KR', 'Nanum Gothic', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  color: #4779ae;
  text-align: center;
}
.lgd-step-desc {
  margin: 0;
  font-family: 'Inter', 'Noto Sans KR', 'Nanum Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #303030;
  text-align: center;
}
.lgd-step-arrow {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: block;
}

/* Terms section */
.lgd-terms {
  margin-top: 70px;
}
.lgd-terms-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 21px;
}
.lgd-term-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 42px 60px 40px 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}
.lgd-term-card--tall {
  min-height: 300px;
}
.lgd-term-card--short {
  min-height: 250px;
}
.lgd-term-card-icon {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.lgd-term-card-icon--governance {
  background: rgba(71, 121, 174, 0.15);
  box-shadow: 0 3.5px 5.5px rgba(0, 0, 0, 0.02);
}
.lgd-term-card-icon--governance img {
  width: 30px;
  height: 30px;
  display: block;
}
.lgd-term-card-icon--bare {
  background: transparent;
  border-radius: 0;
  overflow: visible;
  width: 54px;
  height: 54px;
}
.lgd-term-card-icon--bare img {
  width: 54px;
  height: 54px;
  display: block;
  object-fit: contain;
}
.lgd-term-card-title {
  margin: 17px 0 0 0;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.18px;
  color: #4779ae;
}
.lgd-term-card-subtitle {
  margin: 28px 0 0 0;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.16px;
  color: #767676;
}
.lgd-term-card-body {
  margin: 24px 0 0 0;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: #272729;
}
.lgd-term-card-body--paragraph {
  font-weight: 400;
  line-height: 26px;
}
.lgd-term-card-body-item {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0;
}
.lgd-term-card-body-item--gap {
  margin-top: 12px;
}
.lgd-term-card-body-item__label {
  white-space: nowrap;
  flex-shrink: 0;
}
.lgd-term-card-body-item__content {
  display: flex;
  flex-direction: column;
}

/* Placeholder for upcoming sub-pages */
.lgd-placeholder {
  margin-top: 80px;
  padding: 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
}
.lgd-placeholder-text {
  margin: 0;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #adadad;
}

/* Mobile breakpoint — match landing page (1200px) */
@media (max-width: 1200px) {
  .lgd-text-pc {
    display: none;
  }
  .lgd-text-mobile {
    display: inline;
  }
  .lgd-body {
    flex-direction: column;
    min-height: calc(100vh - 56px - 72px);
  }
  .lgd-sidebar {
    display: none;
  }
  .lgd-main {
    padding: 24px 16px 50px 16px;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
  .lgd-page-title {
    display: none;
  }
  .lgd-page-intro {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.14px;
    width: 100%;
    max-width: 382px;
  }
  .lgd-section-title {
    font-size: 22px;
    line-height: 42px;
    text-align: center;
    margin-top: 26px;
  }
  .lgd-steps,
  .lgd-terms {
    margin-top: 0;
    width: 100%;
    max-width: 382px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .lgd-steps-card {
    margin-top: 24px;
    padding: 24px 23px;
    width: 100%;
    box-sizing: border-box;
  }
  .lgd-steps-list {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .lgd-steps-cell {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .lgd-step {
    width: 225px;
    gap: 15px;
  }
  .lgd-step-arrow {
    transform: rotate(90deg);
    width: 35px;
    height: 35px;
    margin: 28px 0;
  }
  .lgd-terms-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 24px;
    width: 100%;
  }
  .lgd-term-card {
    padding: 28px 29px 32px 29px;
  }
  .lgd-term-card--tall {
    min-height: 278px;
  }
  .lgd-term-card--short {
    min-height: 196px;
  }
  .lgd-term-card-title {
    font-size: 16px;
    letter-spacing: -0.16px;
  }
  .lgd-term-card-subtitle {
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.14px;
    margin-top: 28px;
  }
  .lgd-term-card-body {
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.14px;
  }
  .lgd-placeholder {
    margin-top: 40px;
    padding: 40px 16px;
    width: 100%;
    max-width: 382px;
    box-sizing: border-box;
  }
}

/* ============================================================
   Permission page (권한종류) — lpm-* prefix
   • 공유 자산 없음. 가이드/권한 디자인이 독립적으로 진화 가능하게 분리.
   • 페이지 bg: 가이드와 동일 #272729 (다크).
   ============================================================ */

.lpm-body {
  display: flex;
  align-items: stretch;
  background: #272729;
  color: #f1f1f1;
  width: 100%;
  flex: 1 0 100%;
  min-width: 0;
  min-height: calc(100vh - 88px);
  box-sizing: border-box;
}

/* Sidebar — PC only */
.lpm-sidebar {
  flex-shrink: 0;
  width: 277px;
  padding-top: 70px;
}
.lpm-sidebar-card {
  position: relative;
  background: #ffffff;
  border-radius: 10px;
  width: 277px;
  height: 67px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 32px;
  box-sizing: border-box;
  overflow: hidden;
}
.lpm-sidebar-card-bar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5.33px;
  height: 42px;
  background: #4779ae;
  border-radius: 0 5px 5px 0;
  display: block;
}
.lpm-sidebar-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lpm-sidebar-card-header-icon {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}
.lpm-sidebar-card-header-label {
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: #4779ae;
  letter-spacing: -0.16px;
}

/* Main content */
.lpm-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 61px 48px 80px 48px;
  box-sizing: border-box;
}
.lpm-page-title {
  margin: 0;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 42px;
  letter-spacing: -0.3px;
  color: #f1f1f1;
}
.lpm-page-intro {
  margin: 5px 0 0 0;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 42px;
  letter-spacing: -0.16px;
  color: #f1f1f1;
}

/* PC/Mobile text-variant toggles */
.lpm-text-pc {
  display: inline;
}
.lpm-text-mobile {
  display: none;
}

/* Role list */
.lpm-role-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
}

/* Role card — PC 4-column grid (Figma 995:7855/7866/7876 기준)
   col1 이미지(0-287) | col2 라벨(287-527, 의장 center 400) | col3 흰 inset(527-801) | col4 설명(시작 873)
   • 너비는 main 의 % — 큰 모니터에서 가득 차지 않게 cap 1400 */
.lpm-role-card {
  background: #f1f1f1;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 287px 240px 274px 1fr;
  grid-template-rows: 195px;
  align-items: center;
  width: 90%;
  max-width: 1400px;
}
.lpm-role-image-wrap {
  grid-column: 1;
  grid-row: 1;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
}
.lpm-role-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}
.lpm-role-title-area {
  grid-column: 2;
  grid-row: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lpm-role-title {
  margin: 0;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.2px;
  color: #272729;
  text-align: center;
}
.lpm-role-subtitle {
  grid-column: 3;
  grid-row: 1;
  background: #ffffff;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.18px;
  color: #272729;
  text-align: center;
}
/* desc 영역(col 4)에서 inner 블록을 가운데로 배치하고, 블록 내부 텍스트는 start 정렬 */
.lpm-role-desc {
  grid-column: 4;
  grid-row: 1;
  margin: 0;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.lpm-role-desc-inner {
  margin: 0;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.18px;
  color: #272729;
  text-align: start;
}

/* Mobile breakpoint — permission 페이지는 1500px 이하부터 모바일 뷰 (4-column grid 가 좁아지면 카드 가독성 떨어짐) */
@media (max-width: 1500px) {
  .lpm-text-pc {
    display: none;
  }
  .lpm-text-mobile {
    display: inline;
  }
  .lpm-body {
    flex-direction: column;
    min-height: calc(100vh - 56px - 72px);
  }
  .lpm-sidebar {
    display: none;
  }
  .lpm-main {
    padding: 24px 16px 50px 16px;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
  .lpm-page-title {
    display: none;
  }
  .lpm-page-intro {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.14px;
    width: 100%;
    max-width: 382px;
  }
  .lpm-role-list {
    margin-top: 30px;
    gap: 30px;
    width: 100%;
    max-width: 382px;
  }
  /* Mobile role card layout — Figma 995:7928/7938/7948 정확 매칭 (card 382x496):
     row1: 이미지 268
     row2: title-area = 33 갭 + 라벨 42 + 8 갭 → 83 (gray bg)
     row3: 흰색 strip 60 (subtitle inside)
     row4: 12 갭 + 설명 52 + 21 갭 → 85 (gray bg)
     합계: 268+83+60+85 = 496 ✓ */
  .lpm-role-card {
    grid-template-columns: 1fr;
    grid-template-rows: 268px auto 60px auto;
    height: auto;
    min-height: 496px;
    width: 100%;
  }
  .lpm-role-image-wrap {
    grid-column: 1;
    grid-row: 1;
    /* Figma 마스크는 4면 모두 12px radius — 하단 갭이 83px라서
       하단 코너 라운드가 회색 카드 bg에 자연스럽게 노출됨 */
  }
  .lpm-role-title-area {
    grid-column: 1;
    grid-row: 2;
    background: transparent;
    height: auto;
    padding: 33px 0 8px 0;
  }
  .lpm-role-title {
    font-size: 18px;
    line-height: 42px;
    letter-spacing: -0.18px;
  }
  .lpm-role-subtitle {
    grid-column: 1;
    grid-row: 3;
    height: 60px;
    padding: 0;
    font-size: 15px;
    line-height: 42px;
    letter-spacing: -0.15px;
  }
  .lpm-role-desc {
    grid-column: 1;
    grid-row: 4;
    padding: 12px 0 21px 0;
    display: block;
    height: auto;
  }
  .lpm-role-desc-inner {
    font-size: 14px;
    line-height: 26px;
    letter-spacing: -0.07px;
    text-align: center;
  }
}

/* ============================================================
   Terms page (이용약관) — ltm-* prefix
   • Figma: PC 1005:6550 / Mobile 1013:6550
   • 가이드/권한과 CSS 공유 금지 — 향후 디자인 변경 시 독립 진화
   ============================================================ */

.ltm-body {
  display: flex;
  align-items: stretch;
  background: #272729;
  color: #f1f1f1;
  width: 100%;
  flex: 1 0 100%;
  min-width: 0;
  min-height: calc(100vh - 88px);
  box-sizing: border-box;
}

/* Sidebar — PC only */
.ltm-sidebar {
  flex-shrink: 0;
  width: 277px;
  padding-top: 70px;
}
.ltm-sidebar-card {
  position: relative;
  background: #ffffff;
  border-radius: 10px;
  width: 277px;
  padding: 50px 27px 36px 27px;
  box-sizing: border-box;
}
.ltm-sidebar-card-bar {
  position: absolute;
  left: 0;
  top: 37px;
  width: 5.33px;
  height: 42px;
  background: #afce35;
  border-radius: 0 5px 5px 0;
  display: block;
}
.ltm-sidebar-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 36px;
}
.ltm-sidebar-card-header-label {
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: #272729;
  letter-spacing: -0.16px;
}
.ltm-sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 27px;
}
.ltm-sidebar-menu-item {
  display: block;
}
.ltm-sidebar-menu-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  padding-left: 24px;
}
.ltm-sidebar-menu-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #adadad;
  flex-shrink: 0;
}
.ltm-sidebar-menu-label {
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.16px;
  color: #adadad;
}
.ltm-sidebar-menu-item--active .ltm-sidebar-menu-dot {
  background: #272729;
}
.ltm-sidebar-menu-item--active .ltm-sidebar-menu-label {
  color: #272729;
}

/* Main content */
.ltm-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 61px 48px 80px 48px;
  box-sizing: border-box;
}
.ltm-page-title {
  margin: 0;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 42px;
  letter-spacing: -0.3px;
  color: #f1f1f1;
}
.ltm-page-subtitle {
  margin: 22px 0 0 0;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 42px;
  letter-spacing: -0.22px;
  color: #f1f1f1;
}

/* Tabs — mobile only (hidden on PC by default) */
.ltm-tabs {
  display: none;
}
.ltm-tab {
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
}

/* PDF viewer container */
.ltm-pdf-viewer {
  margin-top: 16px;
  width: 100%;
  height: 900px;
  border-radius: 12px;
  overflow: hidden;
  background: #f1f1f1;
}

/* PDF placeholder (when no fileUrl) */
.ltm-pdf-placeholder {
  margin-top: 16px;
  width: 100%;
  height: 900px;
  border-radius: 12px;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  box-sizing: border-box;
}
.ltm-pdf-placeholder-sheet {
  width: 600px;
  max-width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ltm-pdf-placeholder-text {
  margin: 0;
  font-family: 'Nanum Gothic', 'NanumGothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #adadad;
  text-align: center;
  white-space: pre-line;
}

/* Mobile breakpoint */
@media (max-width: 1200px) {
  .ltm-body {
    flex-direction: column;
    min-height: calc(100vh - 56px - 72px);
  }
  .ltm-sidebar {
    display: none;
  }
  .ltm-main {
    padding: 24px 16px 50px 16px;
  }
  .ltm-page-title,
  .ltm-page-subtitle {
    display: none;
  }

  /* Tabs on mobile */
  .ltm-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 0;
  }
  .ltm-tab {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 999px;
    background: #1a1a1c;
    border: 1px solid #44444b;
    color: #adadad;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.13px;
    cursor: pointer;
    white-space: nowrap;
  }
  .ltm-tab:hover {
    color: #ffffff;
  }
  .ltm-tab--active {
    background: #ffffff;
    color: #272729;
    border-color: #ffffff;
  }
  .ltm-tab--active:hover {
    color: #272729;
  }

  /* PDF on mobile */
  .ltm-pdf-viewer,
  .ltm-pdf-placeholder {
    margin-top: 24px;
    height: 600px;
  }
  .ltm-pdf-placeholder {
    padding: 30px 16px;
  }
  .ltm-pdf-placeholder-sheet {
    width: 300px;
  }
  .ltm-pdf-placeholder-text {
    font-size: 13px;
  }
}

/* ============================================================
   Guide - Metamask sub-page (이미지 stack)
   Figma: PC 1026:6571 (6 composite images) / Mobile 1026:6710 (9 composite images)
   ============================================================ */

/* PC: 6 step images stacked, 47px gap (Figma 절대 위치에서 산출) */
.lgd-mm-pc-stack {
  display: flex;
  flex-direction: column;
  gap: 47px;
  margin-top: 30px;
  width: 100%;
}
/* PC step image — 화면 비율에 맞게 작아지고 커짐
   • 13"~14" 노트북 (1280~1440px 뷰포트): 이미지 ~970~1100px
   • 24" FHD (1920px): ~1547px
   • 27" QHD (2560px): 1600px (캡)
   • 32" UHD 이상: 1600px (캡) — 너무 거대해지지 않게 제한 */
.lgd-mm-pc-step {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1600px;
  border-radius: 8px;
}

/* 작은 PC 화면에서는 main padding 을 좁혀 컨텐츠 영역 확보 (13" 노트북에서 이미지 1000px 근처 보장) */
@media (min-width: 1201px) and (max-width: 1440px) {
  .lgd-main {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Mobile stack hidden on PC */
.lgd-mm-mb-stack {
  display: none;
}

@media (max-width: 1200px) {
  /* PC stack hidden on mobile */
  .lgd-mm-pc-stack {
    display: none;
  }

  /* Mobile: 9 images stacked, 30px gap (Figma main gap-[30px]) */
  .lgd-mm-mb-stack {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;
    width: 100%;
    max-width: 388px;
    align-self: center;
  }
  .lgd-mm-mb-step {
    display: block;
    width: 100%;
    height: auto;
  }
}