:root{
    /* 헤더 높이(필요시 조정) */
    --header-h: 80px;
  }
  
  /* 헤더가 fixed라서 본문이 가리지 않도록 위 패딩 부여 */



html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
img, video { max-width: 100%; height: auto; }

/* body는 한 번만 선언하고 padding-top을 포함 */
body {
    margin: 0;
    padding: var(--header-h) 0 0; /* ← 여기! 상단 패딩 유지 */
    font-family: 'Pretendard', sans-serif;
    background: #f7f9fc;
  }

.container {
  max-width: 500px;
  margin: auto;
  padding: 1rem 1.2rem;
  background: #fff;
  min-height: 100vh;
  overflow-x: hidden;
}

h2 { font-size: 22px; margin-bottom: 10px; }



p { color: #444; font-size: 14px; margin-bottom: 20px; }


input, select, textarea, button { font-size: 1em; }
/* input, select, textarea, button { font-size: 13px; } */

input, select, textarea, button {
    font-family: 'Pretendard', sans-serif;
    font-size: 1em;
  }
  

input, select, textarea {
  width: 100%;
  padding: 14px;
  margin: 6px 0 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
  max-width: 100%;
}

textarea {
    resize: none;
  }
  

button {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 10px;
  background-color: #1e90ff;
  color: #fff;
  cursor: pointer;
}

.nav-buttons { display: flex; gap: 10px; margin-top: 20px; }
.back-button { background: #ccc; color: #333; }

.step { display: none; }
.step.active { display: block; animation: fadeIn 0.3s ease-in-out; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 14px; */
}

.back-round, .next-round {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e6f2ff;
  border: none;
  cursor: pointer;
  font-size: 20px;     /* 글자 조금 크게 */
  line-height: 1;      /* ✅ 글자 세로정렬 보정 */
  color: #1e90ff;
  transition: all 0.2s ease-in-out;
}

.back-round:hover, .next-round:hover { background-color: #1e90ff; color: #fff; }

.option {
  background: #f1f4f9;
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid transparent;
}
.option:hover { border-color: #1e90ff; background-color: #e6f2ff; }
.option strong { font-size: 17px; }
.option small  { color: #666; font-size: 13px; }
.option.is-selected { border-color: #1e90ff; background-color: #e6f2ff; }



.progress-bar {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 20px;
    background: #f1f5f9; /* 바탕 은은한 회색 */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.08); /* 살짝 입체감 */
  }
  
  .progress {
    height: 100%;
    width: 0%;
    transition: width 0.4s ease;
    
    /* 최신 감성: 그라데이션 + 스트라이프 애니메이션 */
    background: linear-gradient(90deg, #3b82f6, #2563eb, #3b82f6);
    background-size: 200% 100%;
    animation: progress-stripes 1.5s linear infinite;
  }
  
  /* 움직이는 스트라이프 효과 */
  @keyframes progress-stripes {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  
  
/* 업로드 목록 */
.uploads-wrap { margin-top: 10px; }
.file-summary { font-size:12px; color:#666; margin-top:6px; }
.file-list { margin-top: 10px; }
.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 6px;
  background: #fff;
}
.file-name {
  flex: 1;
  font-size: 13px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 8px;
}
.file-remove {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background: red;
  color: #fff;
  font-size: 14px;
  padding: 6px;
  border: none;
  cursor: pointer;
  transform: scale(0.8);
  border-radius: 10px;
}
.file-remove:hover { filter: brightness(0.95); }

/* 예쁘게 커스텀한 업로드 버튼 */
.upload-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: 1px dashed #9ecbff;
  background: #f0f7ff;
  color: #1e5eff;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  width: auto; /* 전체폭 X */
}
.upload-button:hover { background: #e6f1ff; }

/* 실제 input은 숨김 */
#fileInput { display: none; }


/* 추가: 힌트 박스 마진/라인 정리 */
/* 추가: 힌트 박스 마진/라인 정리 */
#stepHint {
  margin-top: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #ffffff !important;              /* ✅ 글자색 화이트 */
  background: rgb(217 22 22) !important;  /* ✅ 배경색 빨강 */
  padding: 10px 12px;
  border-radius: 8px;
  display: none;
}


/* === Upload Nudge Modal: Overlay === */
.modal-overlay{
position:fixed; inset:0;
background:rgba(0,0,0,.4);
display:none;                     /* JS로 flex 토글 */
align-items:center; justify-content:center;
z-index:9999;
padding:16px;                     /* 가장자리 여백 */
}






/* 첨부/미첨부 카드 */
.time-box {
display: flex;
flex-direction: column; /* 좌우 → 상하 */
gap: 10px;
}

.time{
flex:1; border:1px solid #e5e7eb; border-radius:10px; padding:10px;
background:#f7f9fc;
}
.time strong{ display:block; margin-bottom:4px; font-weight:700; }
.time.attach{ border-color:#c7ecd9; background:#eefaf4; box-shadow:0 0 0 2px rgba(16,185,129,.15) inset; }
.time.no-attach{ border-color:#f9d3cf; background:#fff5f4; box-shadow:0 0 0 2px rgba(239,68,68,.15) inset; }

/* === 업로드 섹션: “글 → 사진(아래)” 버전 === */
.upload-sections{
display:flex; flex-direction:column; gap:18px;
}

/* 각 블록(공사/요금) */
.upload-block{
display:flex; flex-direction:column; gap:10px;
padding:14px;
border:1px solid #eef2ff; background:#fafbff;
border-radius:10px;
}

/* 텍스트 리스트 */
.upload-block h4{ font-size:14px; margin:4px 0 8px; }
.bullet{ margin:0; padding-left:18px; }
.bullet li{ margin:6px 0; }

/* 사진 그리드 */
.block-photos .label{
display:block; font-size:12px; color:#666; margin-bottom:6px;
}
.block-photos .photo-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
}
.block-photos img{
width:100%; aspect-ratio:1/1; object-fit:cover;
border:1px solid #ddd; border-radius:6px;
}

/* 버튼 줄 */
.btns{
display:flex; gap:8px;
margin-top:auto; padding:0 16px 16px;
}
.btns button{ flex:1; padding:12px; border-radius:10px; border:none; cursor:pointer; font-size:14px; }
.btns .primary{ background:#1e90ff; color:#fff; }
.btns .ghost{ background:#eef3ff; color:#1e3a8a; }

/* 모바일 미세조정 */
@media (max-width:480px){
.block-photos .photo-grid{ grid-template-columns:repeat(3,1fr); }
}

/* 모달 열릴 때 배경 스크롤 잠금(선택) */
body.modal-open{ overflow:hidden; touch-action:none; }


/* 토글 버튼 */
.toggle-photos{
display:inline-flex; align-items:center; gap:6px;
padding:8px 10px; border:1px solid #e5e7eb; background:#cb2121;
border-radius:8px; font-size:12px; cursor:pointer;
}
.toggle-photos .chev{ transition:transform .25s ease; }

/* 슬라이드 영역 */
.collapsible{
overflow:hidden;
max-height:0;                   /* 닫힘 */
transition:max-height .32s ease;
}
.collapsible.open{ /* 열림은 JS에서 높이 지정 */ }

/* 모션 줄이기 선호 시 즉시 전환 */
@media (prefers-reduced-motion: reduce){
.collapsible{ transition:none; }
.toggle-photos .chev{ transition:none; }
}


/* 간단 스타일 */
#uploadWarning .modal { max-width: 460px; }
#uploadWarning p { line-height:1.6; text-align:center; }
#uploadWarning .btns { flex-direction:column; }
#uploadWarning .btns button { width:100%; }









/* === Brand Hero (상단 헤더) === */
/* === Brand Hero (상단 헤더) === */
.brand-hero {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    z-index: 1000;
  
    text-align: center;
    padding: 10px 10px 10px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fbff;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
  }
  
/* 로고 + 회사명: 한 줄 고정 */
/* 1) 줄 자체를 콘텐츠 너비만큼만 만들고 중앙 배치 */
/* 헤더 전체의 기준 글자 크기를 유동형으로 (원하는 값으로 조정) */
.brand-hero {
    font-size: clamp(16px, 2.2vw + 0.2rem, 20px);
  }
  
  /* 상단 정렬 */
  .brand-hero__top{
    display:flex; align-items:center; gap:0.6em;  /* ← 간격도 글자에 비례 */
  }
  
  /* 로고: 글자 크기에 비례해서 스케일 */
  .brand-hero__logo{
    width:2.25em;           /* ← 텍스트 기준 상대값 */
    height:2.25em;          /* 로고가 정사각형이면 그대로 OK */
    object-fit:contain;
    flex:0 0 auto;
  }
  
  /* 텍스트 박스도 상대 레이아웃 */
  .brand-hero__text{
    flex:0 1 auto;          /* 커지지 않음 */
    min-width:0;            /* 말줄임 허용 */
    text-align:center;
  }
  
  /* 회사명: 기본 글자 대비 비율 */
  .brand-hero__title{
    font-size:1.2em;        /* 헤더 기준 대비 1.2배 */
    margin:0;
    color:#000;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  
  /* 부제목도 글자 기준 비율 */
  .brand-hero__sub{
    font-size:0.85em;
    color:#555;
    margin:2px 0 0;
  }
  
  
 
  
 /* SNS 버튼 (톤 통일: 파란 계열) */
.brand-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; 
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
    text-decoration: none;
    background: #e0f2fe;   /* 파란 톤 배경 */
    color: #1e3a8a;        /* 진한 파란색 아이콘 */
    transition: all .2s ease-in-out;
  }
  
  /* hover 효과 */
  .brand-link:hover {
    background: #bfdbfe;   /* 좀 더 진한 파랑 */
    color: #1d4ed8;
  }
  
  /* 아이콘 */
  .brand-link i { font-size: 15px; }







/* 0단계: 개인정보 동의 카드 */
.consent-card{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:14px;
  }
  
  /* 라벨을 한 줄 정렬 */
  .consent-check{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    color:#333;
    padding:8px 10px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:8px;
  }
  
  /* 체크박스 크기/정렬 보정 */
  .consent-check input{
    width:20px;
    height:20px;
    margin:0;              /* ← 기본 마진 제거 */
    accent-color:#1e90ff;  /* 지원 브라우저에서 체크 색상 */
    flex:0 0 auto;
  }
  
  /* 텍스트 영역 */
  .consent-text{
    line-height:1.3;
    flex:1 1 auto;
  }
  .consent-text .required{
    color:#1d4ed8;
    margin-right:4px;
  }
  
  /* 상세/버튼 간격 */
  .consent-more{ margin-top:12px; }
  .consent-more summary{ cursor:pointer; color:#1e3a8a; font-size:13px; }
  .consent-terms{ margin-top:8px; font-size:12px; color:#666; line-height:1.6; }
  .consent-card .nav-buttons{ margin-top:12px; }
  
  /* 진행바/힌트 숨김(0단계) */
  body.consent-mode .progress-bar,
  body.consent-mode #progressMeta,
  body.consent-mode #progressMessage,
  body.consent-mode #stepHint { display:none !important; }
  
  /* 시작 버튼 비활성화 시 */
  #startBtn:disabled{ opacity:.5; cursor:not-allowed; }
  

  /* 0단계: 상단 안내 박스 */
.intro-card{
    background:#f0f7ff;
    border:1px solid #dbeafe;
    border-radius:10px;
    padding:12px 14px;
    margin-bottom:14px;
  }
  .intro-title{
    margin:0 0 8px;
    font-weight:700;
    color:#1e3a8a;
    font-size:14px;
  }
  .intro-list{
    list-style:none;
    margin:0;
    padding:0;
  }
  .intro-list li{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:#334155;
    margin:6px 0;
  }
  .intro-list i{
    font-size:14px;     /* 통일된 크기 */
    line-height:1;      /* 아이콘 세로 치우침 방지 */
    vertical-align:middle;
  }
  
  .pill{
    display:inline-block;
    padding:2px 8px;
    border-radius:999px;
    background:#1e40af;
    color:#fff;
    font-size:12px;
    margin-left:4px;
  }
  




/* 전역 width:100% 적용 범위를 축소 (권장) */
.nav-buttons button,
.modal .btns button { width: 100%; }

/* 주소 검색 컴포넌트 */
.address-group{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 20px;
}
.address-group .clickable-input{
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  cursor: pointer;
  background: #f8fafc;
}
.address-group .clickable-input:focus{
  outline: none;
  border-color: #1e90ff;
  box-shadow: 0 0 0 3px rgba(30,144,255,.18);
}

/* 검색 버튼은 내용만큼만 */
.address-group .btn-search{
  width: auto;            /* 전역 width:100% 덮어쓰기 */
  flex: 0 0 auto;         /* 커지지 않도록 */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  white-space: nowrap;
  border-radius: 10px;
  border: 1px dashed #9ecbff;
  background: #f0f7ff;
  color: #1e5eff;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s ease-in-out;
}
.address-group .btn-search:hover{ background: #e6f1ff; }
.address-group .btn-search i{ font-size: 16px; }

/* 모바일에선 세로 스택 */
@media (max-width: 420px){
  .address-group{ flex-direction: column; align-items: stretch; }
  .address-group .btn-search{ justify-content: center; width: 100%; }
}



/* ==== Toast ==== */
.toast-wrap{
    position: fixed;
    top: calc(var(--header-h, 72px) + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none; /* 배경 클릭 방해 X */
  }
  .toast{
    pointer-events: auto;
    min-width: min(480px, 92vw);
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: #f1f5f9;
    color: #0f172a;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    opacity: 0; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .toast.show{ opacity: 1; transform: translateY(0); }
  .toast--error{ background:#fef2f2; color:#7f1d1d; border-color:#fecaca; }
  .toast--success{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
  .toast--info{ background:#eef2ff; color:#1e3a8a; border-color:#c7d2fe; }
  .toast-close{
    background: transparent; border:0; font-size:18px; cursor:pointer; color:inherit;
    width:28px; height:28px; line-height:1; border-radius:6px;
  }
  .toast-close:hover{ background: rgba(0,0,0,.06); }
  
  /* 잘못된 입력 강조 */
  .is-invalid{
    border-color:#ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.15);
  }
  
  


/*   
  
#step-1.active{
    display: grid;                                
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
  }
  
  
  #step-1.active > :not(.option){
    grid-column: 1 / -1;
  }
  
  
  #step-1 .option{
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  
  @media (max-width: 420px){
    #step-1.active{
      grid-template-columns: 1fr;
    }
  } */
  



/* 
  Step3: 옵션 카드만 2열 그리드
#step-3.active {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  
  옵션이 아닌 요소(헤더 등)는 전체 너비 차지
  #step-3.active > :not(.option) {
    grid-column: 1 / -1;
  }
  
  옵션 카드 통일
  #step-3 .option {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  📱 작은 화면에서는 1열
  @media (max-width: 420px) {
    #step-3.active {
      grid-template-columns: 1fr;
    }
  }
  


   */
   






   .upload-benefit{
    margin: 8px 0 16px;
    padding: 14px 16px;
    background: #f7fbff;               /* 은은한 블루 톤 */
    border: 1px solid #d6ecff;
    border-radius: 10px;
  }
  .upload-benefit .lead{
    margin: 0 0 8px;
    font-size: 0.8em;
    line-height: 1.5;
  }
  .upload-benefit .benefit-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
  }
  .upload-benefit .benefit-list li{
    display: flex; align-items: center; gap: 8px;
    font-size: 0.6em;
  }
  .upload-benefit .benefit-list li.ok i{ color: #2e7d32; }       /* 초록 체크 */
  .upload-benefit .benefit-list li.warn i{ color: #c77700; }     /* 경고색 */
  .upload-benefit strong{ font-weight: 700; }
  










  /* === Footer: 고정 해제 + 헤더와 동일 폭/스타일 === */
footer.site-footer{
    position: static;                /* 고정 X */
    width: 100%;
    margin: 16px 0 24px;             /* 본문과 간격 */
    padding: 0 12px;                 /* 좌우 가드레일 */
    background: transparent;         /* 바탕 투명 (카드만 보이게) */
  }
  
  /* 카드 본체: 헤더 카드와 톤 맞춤 */
  footer.site-footer .bizline{
    width: 100%;
    max-width: 500px;                /* 헤더와 동일 폭 */
    margin: 0 auto;                  /* 중앙 정렬 */
    padding: 10px 12px;
    background: #f9fbff;
    border-top: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 -4px 16px rgba(0,0,0,.04);
  
    /* 줄바꿈 정리 */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
  
    /* 작고 단정한 텍스트 */
    font-size: clamp(10px, 1.6vw, 12px);
    line-height: 1.45;
    color: #667085;
  }
  
  /* 1줄: 상호는 전체폭 사용 */
    footer.site-footer .bizline > strong{
    flex: 1 1 auto !important;   /* 기존 1 0 100% 덮기 */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }
  

  footer.site-footer .bizline > span:nth-of-type(3)::after{ content: ""; }
  
  /* 3줄: 주소는 단독 줄(줄바꿈 허용) */
  footer.site-footer .bizline > span:nth-of-type(4){
    flex-basis: 100%;
    white-space: normal;
    word-break: keep-all;
  }
  
  /* 4줄: 연락처(전화·이메일) 한 줄 + 중간점 구분 */
  footer.site-footer .bizline > span:nth-of-type(5)::after{
    content: "·";
    margin: 0 6px;
    opacity: .6;
  }
  
  /* 링크 톤 다운 */
  footer.site-footer .bizline a{
    color: #475467;
    text-decoration: none;
  }
  /* footer.site-footer .bizline a:hover{ text-decoration: underline; } */
  
  /* 작은 화면에선 글자 더 소폭 축소 */
  @media (max-width: 480px){
    footer.site-footer .bizline{
      font-size: clamp(10px, 3.2vw, 12px);
    }
  }
  

  /* === Footer 1행: 상호(좌) + SNS(우) 정렬 고정 === */
footer.site-footer .bizline{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap: 2px 10px;
  }
  
  /* 상호가 줄 전체를 차지하지 않게 오버라이드 */
  footer.site-footer .bizline > strong{
    flex: 1 1 auto !important;  /* ← 기존 1 0 100% 덮어쓰기 */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* SNS 묶음: 첫 줄 오른쪽 정렬 */
  footer.site-footer .bizline > .brand-links{
    order: 1;
    display:flex;
    align-items:center;
    gap: 8px;
    margin-left:auto;            /* 오른쪽 정렬 핵심 */
    flex: 0 0 auto;           /* 내용만큼만 */
  }
  
  /* 상호도 1행에 고정, 나머지 정보는 2행 이후로 */
  footer.site-footer .bizline > strong{ order: 1; }
  footer.site-footer .bizline > span{ order: 2; }
  
  /* 필요 시 1행 뒤 강제 줄바꿈 */
  footer.site-footer .bizline > .brand-links::after{
    content:"";
    flex-basis:100%;
  }
  
  /* 푸터 아이콘 크기 살짝 소형화 */
  footer.site-footer .bizline .brand-link{
    width: 24px;
    height: 24px;
    font-size: 13px;
  }
  

  /* ★ 여기! SNS 다음부터는 무조건 새 줄 시작 */
footer.site-footer .bizline > span:first-of-type{
    flex-basis:100%;
  }
  
  /* (이전 패치가 남아있다면 비활성화) */
  footer.site-footer .bizline > .brand-links::after{ content:none; }
  
  /* 아이콘 사이즈(선택) */
  footer.site-footer .bizline .brand-link{ width:24px; height:24px; font-size:13px; }


  /* === Footer SNS 아이콘 완전 중앙 정렬 === */
footer.site-footer .bizline .brand-links{
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;             /* 우측 정렬 유지 */
  }
  
  footer.site-footer .bizline .brand-link{
    display:inline-grid;          /* grid로 중앙 정렬이 가장 안정적 */
    place-items:center;           /* 가로/세로 중앙 */
    width:24px; height:24px;
    border-radius:50%;
    background:#e0f2fe;
    color:#1e3a8a;
    text-decoration:none;
    line-height:1;                /* 인라인 베이스라인 간격 제거 */
  }
  
  /* 폰트어썸 아이콘의 베이스라인/여백 리셋 */
  footer.site-footer .bizline .brand-link i,
  footer.site-footer .bizline .brand-link svg,
  footer.site-footer .bizline .brand-link .svg-inline--fa{
    display:block;
    line-height:1;
    vertical-align:middle;        /* 폰트어썸 기본 보정(-0.125em) 무력화 */
    width:1em; height:1em;        /* 일부 아이콘의 상하 여백 균일화 */
    /* 필요 시 아주 살짝 미세 조정 ↓
    transform: translateY(-0.5px);
    */
  }
  


  /* 업로드 버튼 비활성화 */
label.upload-button.disabled {
    opacity: 0.5;
    pointer-events: none;   /* 클릭 막기 */
    cursor: not-allowed;
    filter: grayscale(1);
  }
  


  /* === Daum Postcode: 내부 모달 === */
.postcode-overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,.45);
    z-index: 10000;                 /* 헤더/토스트보다 위 */
    display:flex; align-items:center; justify-content:center;
    padding:12px;
  }
  .postcode-dialog{
    width:min(520px, 96vw);
    height:min(560px, 86vh);
    background:#fff; border-radius:12px;
    box-shadow:0 12px 36px rgba(0,0,0,.2);
    display:flex; flex-direction:column; overflow:hidden;
  }
  @supports(height: 100dvh){
    .postcode-dialog{ height:min(560px, 86dvh); }
  }
  
  .postcode-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px; border-bottom:1px solid #e5e7eb; background:#fff;
  }
  .postcode-header h3{ margin:0; font-size:16px; }
  .postcode-close{
    width:32px; height:32px;
    display:inline-grid;        /* 중앙 정렬 한 방 */
    place-items:center;         /* 가로·세로 중앙 */
    padding:0;                  /* 기본 패딩 제거 */
    line-height:1;              /* 베이스라인 영향 제거 */
    border:0; border-radius:8px;
    background:transparent;
    color:#666; font-size:18px; font-weight:400;
    cursor:pointer;
    appearance:none; -webkit-appearance:none; /* iOS 기본 버튼 보정 */
  }
  .postcode-close:hover{ background:#f2f2f2; }
  
  
  .postcode-body{
    flex:1 1 auto; /* Daum 우편번호 iframe이 여기 채움 */
    min-height:260px;
  }
  
  /* 배경 스크롤 잠금 */
  body.postcode-open{ overflow:hidden; touch-action:none; }
  


  /* 완료 스텝에선 진행바/메타 숨김 */
body.complete-mode .progress-bar,      /* ← 트랙까지 숨기기 */
body.complete-mode #progress,
body.complete-mode #progressMeta,
body.complete-mode #progressMessage,
body.complete-mode #progressWrap,
body.complete-mode .progress-wrap { display: none !important; }

/* 카드 */
.complete-card{
  text-align:center;
  padding:28px 24px;
  border:1px solid #eee;
  border-radius:16px;
  background:#fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}

/* 체크 애니메이션 */
.big-check{ display:flex; justify-content:center; margin-bottom:14px; }
.checkmark{ width:72px; height:72px; }
.checkmark__circle{
  stroke:#e5f3ff; stroke-width:3; stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: circle-draw .6s ease-out forwards;
}
.checkmark__check{
  stroke:#2c7be5; stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray: 36; stroke-dashoffset: 36;
  animation: check-draw .35s .35s ease-out forwards;
}
@keyframes circle-draw { to { stroke-dashoffset: 0; } }
@keyframes check-draw  { to { stroke-dashoffset: 0; } }

.complete-card h3{ margin:8px 0 6px; font-size:20px; }
.complete-card p{ margin:0 0 12px; color:#666; }

/* 버튼들 */
.btn-row{ display:flex; gap:10px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:10px; font-weight:600; text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.btn-primary{ background:#2c7be5; color:#fff; box-shadow: 0 4px 12px rgba(44,123,229,.22); }
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(44,123,229,.28); }
.btn-secondary{ background:#f5f7fb; color:#2c2c2c; }
.btn-secondary:hover{ background:#eef1f7; transform: translateY(-1px); }

/* 미세한 페이드업 */
.complete-card{ animation: complete-pop .36s ease-out both; }
@keyframes complete-pop{
  from{ opacity:0; transform: translateY(6px) scale(.98); }
  to  { opacity:1; transform: translateY(0)   scale(1); }
}

/* 컨페티 조각 */
.confetti{
  position:fixed; top:-10px; width:8px; height:12px; opacity:0.9; z-index:9999;
  border-radius:2px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall{
  to { transform: translate3d(var(--x,0), 110vh, 0) rotate(var(--r, 180deg)); opacity: 1; }
}

/* 모션 최소화 환경 배려 */
@media (prefers-reduced-motion: reduce){
  .checkmark__circle, .checkmark__check, .complete-card{ animation: none !important; }
}













/* === 예시 모달 내부 레이아웃 === */
.ex-section + .ex-section { margin-top: 18px; }
.ex-head h4 { margin: 0 0 4px; font-size: 16px; }
.ex-head p { margin: 0 0 10px; font-size: 14px; color:#374151; }

.ex-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 420px){
  .ex-grid { grid-template-columns: 1fr 1fr; }
}

.ex-grid figure{
  margin:0; padding:10px; border:1px solid #e5e7eb; border-radius:10px;
  background:#fff;
  display:flex; flex-direction:column; gap:8px; align-items:center;
}
/* 썸네일: 이미지 전체가 보이도록(=안 짤림) */
.ex-grid img{
  width: 100%;
  height: 150px;              /* 모바일 기본 높이 */
  object-fit: contain;         /* ← contain으로 변경: 전부 보이게 */
  background: #f8fafc;         /* 레터박스 영역 톤 */
  border-radius: 8px;
  display: block;
  cursor: zoom-in;             /* 확대 가능 시각적 힌트 */
}

/* PC(가로 넓은 화면)에서 더 크게 보이게 */
@media (min-width: 1024px){
  #exampleModal .m-dialog{ width: min(900px, 96vw); }  /* 모달 자체 확대 */
  .ex-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
  }
  .ex-grid img{
    height: 260px;            /* PC에서 썸네일 키우기 */
  }
}

.ex-grid figcaption{
  font-size:12px; color:#6b7280;
}

/* 재사용: 예시 버튼(기존 정의 있다면 생략 가능) */
.tips-button{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px;
  background:#000000; font-size:14px; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}



















/* ===== Modal: Base ===== */
.m-overlay{
    position: fixed;
    inset: 0;
    display: none;                    /* 기본은 숨김 */
    justify-content: center;
    align-items: center;
    padding: 16px;
    background: rgba(0,0,0,.45);
    z-index: 9999;
  }
  
  /* 열림 상태 */
  .m-overlay.is-open{ display: flex; }
  
  /* 본체(다이얼로그) */
  .m-dialog{
    width: min(520px, 92vw);
    max-height: calc(100vh - 32px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
  
    display: flex;
    flex-direction: column;
  
    /* 혹시 남아있는 구 전역 속성 무력화 */
    float: none; left: auto; right: auto; transform: none;
  }
  
  /* dvh 지원 */
  @supports (height: 100dvh){
    .m-dialog{ max-height: calc(100dvh - 32px); }
    .m-overlay{ min-height: 100dvh; }
  }
  
  /* 헤더/바디/풋터 */
  .m-header{
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
    border-top-left-radius: 12px; border-top-right-radius: 12px;
  }
  .m-header h3{ margin:0; font-size:18px; }
  
  .m-close{
    width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:none; border-radius:50%;
    font-size:20px; color:#666; cursor:pointer;
  }
  .m-close:hover{ background:#f2f2f2; }
  
  .m-body{ padding:16px; display:flex; flex-direction:column; gap:12px; }
  .m-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 12px 16px;
    border-top: 1px solid #f1f5f9;
  
    display: flex;
    gap: 8px;
  }
  
  .m-footer .btn {
    flex: 1;       /* 두 버튼 균등 분할 */
    width: auto;   /* 전역 button {width:100%} 무력화 */
  }
  
  
  /* 공통 버튼 톤(원하면 기존 클래스 사용) */
  .btn.primary{ background:#1e90ff; color:#fff; }
  .btn.ghost{ background:#eef3ff; color:#1e3a8a; }
  
  /* ===== Body 스크롤 잠금 ===== */
  body.modal-open{ overflow:hidden; touch-action:none; }
  
  /* ===== 각 모달별 개별 오버라이드 ===== */
  /* 예시사진 모달 */
  #exampleModal .m-dialog{ width: min(720px, 100%); }
  
  /* 업로드 유도 모달(기본 폭 그대로 쓰면 생략 가능) */
  #uploadNudge .m-dialog{ width: min(520px, 92vw); }
  
  /* 업로드 경고 */
  #uploadWarning .m-dialog{ width: min(460px, 92vw); }
  
  /* 우편번호 모달 */
  #postcodeLayer .m-dialog{
    width: min(520px, 96vw);
    height: min(560px, 86vh);
    overflow: hidden;                 /* 내부 iframe용 */
  }
  @supports(height: 100dvh){
    #postcodeLayer .m-dialog{ height: min(560px, 86dvh); }
  }
  
  /* (선택) 겹칠 때 우선순위: 우편번호 > 예시모달 > 유도/경고 */
  #postcodeLayer.m-overlay{ z-index: 10010; }
  #exampleModal.m-overlay{  z-index: 10005; }
  #uploadNudge.m-overlay,
  #uploadWarning.m-overlay{ z-index: 10000; }
  





  /* 1) 모달 더 큼직하게 */
#postcodeLayer .m-dialog{
    width: min(760px, 98vw);
    height: min(680px, 90vh);
  }
  
  /* 2) 바디 패딩 제거(안쪽 여백 때문에 실제 표시 영역이 줄어들던 문제) */
  #postcodeLayer .m-body{ padding: 0; }
  
  /* 3) 내부 래퍼가 부모 높이를 100% 차지하도록 */
  #postcodeInner{ height: 100%; min-height: 0 !important; }
  
  @media (max-width: 480px){
    #postcodeLayer .m-dialog{
      width: 100vw;
      height: 100dvh;      /* iOS 키보드 대응 */
      border-radius: 0;    /* 시트 느낌 */
    }
  }
  


  /* 확대 오버레이 */
#ex-zoom {
    position: fixed; inset: 0;
    display: none;                /* 기본 숨김 */
    align-items: center; justify-content: center;
    background: rgba(0,0,0,.75);
    z-index: 10050;               /* exampleModal(10005)보다 위 */
  }
  #ex-zoom.is-open { display: flex; }
  #ex-zoom img{
    max-width: 96vw; max-height: 92vh;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0,0,0,.6);
    border-radius: 8px;
    cursor: zoom-out;             /* 닫힘 힌트 */
  }
  /* 상단 안내 */
  #ex-zoom .hint{
    position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
    padding: 6px 10px; border-radius: 999px;
    background: rgba(17,24,39,.8); color: #fff; font-size: 12px;
    pointer-events: none; user-select: none;
  }
  



  /* 업로드 컨트롤을 한 줄 정렬 */
.upload-controls{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:nowrap;          /* 줄바꿈 방지 */
  }
  
  /* 버튼을 오른쪽으로 밀기 */
  .upload-controls .tips-button{ margin-left:auto; }
  

  /* 예시사진 버튼 강화 스타일 */
  .tips-button{
    display:inline-flex; align-items:center; justify-content:center;
    gap:8px;
    padding:10px 14px;
    border-radius:10px;
    border:1px solid transparent;
    background:#eef3ff;
    color:#1e3a8a;
    font-size:14px; font-weight:700;
    cursor:pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    width:auto;            /* 전역 button {width:100%} 무력화 */
  }
  
  .tips-button--cute{
    background: linear-gradient(90deg, #e0f2ff, #dbeafe);
    border-color:#c7d2fe;
    box-shadow: 0 4px 12px rgba(44,123,229,.18);
  }
  
  .tips-button--cute:hover{
    background: linear-gradient(90deg, #dbeafe, #c7d2fe);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(44,123,229,.24);
  }
  
  /* 높이 밸런스: 업로드 라벨과 비슷하게 */
  .upload-button,
  .tips-button{ line-height:1; }