/* ===========================
   보금자리톡 - 홈 (index)
   =========================== */

/* --- 공통 레이아웃 --- */
main {
  padding-bottom: 8rem;
}

main > section:last-child {
  margin-bottom: 0;
}

.container {
  padding: 0 1.6rem;
}

.sec-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1.4rem;
}


/* ===========================
   가점 진단 배너
   =========================== */
.sec-banner {
  padding: 1.6rem 0;
}

.banner-card {
  display: flex;
  align-items: center;
  background: #EDF3FB url(../img/mb_illust_1.png) no-repeat right 5% bottom 5%;
  background-size: 40rem;
  border-radius: 1.4rem;
  padding: 1.5rem;
  text-decoration: none;
  gap: 0.8rem;
  min-height: 13rem;
  position: relative;
  overflow: hidden;
}

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

.banner-sub {
  font-size: 1.85rem;
  font-weight: 600;
  color: #111;
  line-height: 1.35;
}

.banner-title {
  font-size: 1.85rem;
  font-weight: 600;
  color: #111;
  line-height: 1.35;
}

.banner-stats {
  font-size: 1.3rem;
  color: #4b5563;
  margin-bottom: 1.4rem;
  background: #fff;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid #eee;
  margin-top: 1rem;
  display: inline-block;
  z-index: 1;
  position: relative;
}

.banner-stats strong {
  color: #1F5EFF;
  font-weight: 700;
  font-size: 1.3rem;
  margin-left: 0.5rem;
}

.banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #1f5eff;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
  padding: 1rem 1rem;
  border-radius: 1rem;
  white-space: nowrap;
}
.banner-btn img{width: 1.5rem;}

.banner-img {
  flex-shrink: 0;
  width: 8rem;
  align-self: flex-start;
  position: absolute;
  bottom: 2rem;
  right: 1rem;
  z-index: 0;
}

.banner-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* ===========================
   TOP5 가로 스크롤
   =========================== */
.sec-top5 {
  padding: 2rem 0 2.4rem;
}

.sec-top5 .container {
  padding-bottom: 0;
}

.top5-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.4rem 1.6rem 0.4rem;
  scrollbar-width: none;
}

.top5-track::-webkit-scrollbar {
  display: none;
}

.top5-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 38vw;
  background: #FDF6E6;
  border-radius: 1.4rem;
  padding: 1.6rem 1.4rem;
  text-decoration: none;
  scroll-snap-align: start;
  border: 1px solid #FFE6AE;
  align-items: center;
  gap: 1rem;
}

.top5-card.rank2 { background: #F3F4F7; border: 1px solid #D0DCFF;}
.top5-card.rank3 { background: #FEF1E8; border: 1px solid #FFCEAD;}
.top5-card.rank4 { background: #F7F7F8; border: 1px solid #D5D5D5;}
.top5-card.rank5 { background: #F7F7F8; border: 1px solid #D5D5D5;}

.rank-badge {
  display: block;
  width: 5rem;
  height: 5rem;
}

.rank-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.top5-card .ratio {
  font-size: 2rem;
  font-weight: 600;
  color: #1F5EFF;
  line-height: 1;
}

.top5-card.rank2 .ratio { color: #6b7280; }
.top5-card.rank3 .ratio { color: #d97706; }
.top5-card.rank4 .ratio,
.top5-card.rank5 .ratio { color: #4338ca; }

.top5-card .name {
  font-size: 1.4rem;
  color: #333;
  font-weight: 500;
}


/* ===========================
   청약 공고 그리드
   =========================== */
.sec-notice {
  padding: 2rem 0;
}

.notice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.notice-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 1.4rem;
  padding: 1.6rem 1.4rem 1.4rem;
  text-decoration: none;
  min-height: 12rem;
  position: relative;
  overflow: hidden;
  background: #EDF3FB;
  border: 1px solid #A8CDFF;
}

.notice-card:nth-child(2) { background: #F6F4FD; border:1px solid #DED4FF;}
.notice-card:nth-child(3) { background: #F3FBF7; border:1px solid #C5EFDA;}
.notice-card:nth-child(4) { background: #F7F7F8; border:1px solid #D5D5D5;}

.notice-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.notice-name {
  font-size: 1.8rem;
  font-weight: 700;
  color: #111;
  line-height: 1.35;
}

.notice-more .notice-name {
  font-size: 1.3rem;
}

.notice-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background: #fff;
  border-radius: 50%;
  color: #374151;
  flex-shrink: 0;
  border: 1px solid #A8CDFF;
  margin-top: 2rem;
}

.notice-card:nth-child(2) .notice-arrow{border: 1px solid #DED4FF;}
.notice-card:nth-child(3) .notice-arrow{border:1px solid #C5EFDA;}
.notice-card:nth-child(4) .notice-arrow{ border:1px solid #D5D5D5;}


.notice-arrow img{width: 2rem;}

.notice-txt{display: flex;flex-direction: column;gap: 0.5rem;}

.notice-sub {
  font-size: 1.4rem;
  color: #6b7280;
  margin-bottom: 0;
}

.notice-sub strong {
  color: #1F5EFF;
  font-weight: 600;
  font-size: 1.4rem;
}

.notice-sub.notice-purple {
  color: #6C45C5;
}

.notice-bottom {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.notice-img {
  width: 6rem;
  height: 6rem;
  position: relative;
}

.notice-card:nth-of-type(1) .notice-img{left: -3rem;}
.notice-img::before
{
  content: '';
  position: absolute;
  width: 120%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #E2EEFE;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.notice-card:nth-child(2) .notice-img::before{background: #EFE9FD;}
.notice-card:nth-child(3) .notice-img::before{background: #E8F9F1;}
.notice-card:nth-child(4) .notice-img::before{background: none;}


.notice-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}


/* ===========================
   지역별 가점 커트라인
   =========================== */
.sec-cutline {
  padding: 2rem 0;
}

.cutline-card {
  background: #F8FAFD;
  border-radius: 1.4rem;
  padding: 1.5rem;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  border: 1px solid #C2DAFF;
  display: block;
}
.cutline-card > div{display: flex;justify-content: space-between;}

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

.cutline-date {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #DEEBFF;
  color: #1F5EFF;
  font-size: 1.3rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
  border-radius: 10rem;
  margin-bottom: 1.2rem;
}
.cutline-date img{width: 2rem;}

.cutline-title {
  font-size: 1.85rem;
  font-weight: 600;
  color: #111;
  line-height: 1.4;
  margin-bottom: 1.6rem;
}

.cutline-title span {
  color: #1F5EFF;
  font-size: 1.85rem;
  font-weight: 600;
}

.cutline-sub {
  font-size: 1.3rem;
  color: #6b7280;
  margin-bottom: 0.3rem;
}

.cutline-score {
  font-size: 4rem;
  font-weight: 600;
  color: #1F5EFF;
  line-height: 1;
  margin-bottom: 2rem;
  letter-spacing: -0.1rem;
}

.cutline-score span {
  font-size: 2rem;
  font-weight: 600;
  color: #374151;
  margin-left: 0.3rem;
}

.cutline-img {
  width: 14rem;
  flex-shrink: 0;
  margin-left: 1rem;
  align-self: center;
}

.cutline-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cutline-btn {
  display: flex;
  background: #1F5EFF;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  padding: 1.5rem;
  margin-top: 0;
  border-radius: 1rem;
  letter-spacing: 0.02rem;
  align-items: center;
  justify-content: space-between;
}
.cutline-btn img{width: 1.5rem;}


/* ===========================
   청약 공지사항
   =========================== */
.sec-news {
  padding: 2rem 0;
}

.news-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.news-header .sec-title {
  margin-bottom: 0;
}

.news-more {
  font-size: 1.4rem;
  color: #333;
  text-decoration: none;
  display: flex;
  align-items: center;
}
.news-more img{width: 1.5rem;margin-left: 0.5rem;}


.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-list li + li {
  border-top: 1px solid #e4e4e4;
}

.news-item {
  display: block;
  padding: 1.5rem 0;
  text-decoration: none;
}

.news-title {
  font-size: 1.5rem;
  font-weight: 500;
  color: #111;
  margin-bottom: 0.6rem;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-meta {
  font-size: 1.3rem;
}

.news-meta span{font-size: 1.3rem;}


/* ===========================
   배지 - 건수
   =========================== */
.badge-count {
  display: inline-block;
  background: #E9F1FD;
  color: #1d4ed8;
  font-size: 1.4rem;
  font-weight: 600;
  padding: 0.7rem 1rem;
  border-radius: 0.7rem;
  vertical-align: middle;
  margin-left: 0.5rem;
}

/* ===========================
   진단 페이지 
   =========================== */

/* 페이지 타이틀 */
.sec-page-title {
  padding: 2rem 0;
}

.page-back {
  display: flex;
  font-size: 1.7rem;
  font-weight: 700;
  color: #111;
  text-decoration: none;
  gap: 1rem;
  align-items: center;
}
.page-back img{width: 1.5rem;}

/* 스텝바 */
.sec-step {
  background: #fff;
  padding: 2.4rem 0 2rem;
}

.step-bar {
  display: flex;
  align-items: center;
  gap: 0;
}

.step-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  background: #F7F7F8;
  flex-shrink: 0;
  color: #9CA3AF;
}

.step-item.is-active {
  background: #1F5EFF;
  color: #fff;
}

.step-num {
  font-size: 1.6rem;
  font-weight: 700;
}

.step-line {
  flex: 1;
  height: 0.2rem;
  background: #F7F7F8;
}
.step-line.is-active{
  background: #1F5EFF;
}

/* 안내 카드 */

.diag-info-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 1.2rem;
  padding: 1.6rem 1.8rem;
  border: 1px solid #C2DAFF;
  background: #F8FAFD;
  margin-bottom: 2rem;
}

.diag-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background: #fff;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid #C2DAFF;
}

.diag-info-icon img {
  width: 2.2rem;
  height: 2.2rem;
  object-fit: contain;
}

.diag-info-text {
  font-size: 1.3rem;
  color: #374151;
  line-height: 1.6;
  font-weight: 500;
}

/* Q 카드 공통 */
.sec-diag-q {
  padding: 0 0 1.6rem;
}

.diag-q-card {
  background: #fff;
  border-radius: 1.4rem;
  padding: 2rem 1.8rem;
  box-shadow: 0 0.1rem 0.6rem rgba(0,0,0,0.05);
  border: 1px solid #eee;
}

.diag-q-label {
  font-size: 1.6rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.diag-q-num {
  color: #1d4ed8;
  font-size: 1.7rem;
  font-weight: 600;
  margin-right: 0.5rem;
}

.diag-q-sub {
  font-size: 1.4rem;
  color: #9ca3af;
  margin-bottom: 1.6rem;
}

/* 점수 입력 */
.diag-score-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #e5e7eb;
  border-radius: 1rem;
  padding: 1.4rem 2rem;
  width: 80%;
  margin: 0 auto;
}

.diag-score-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 3.2rem;
  font-weight: 700;
  color: #9ca3af;
  text-align: center;
  width: 8rem;
  -moz-appearance: textfield;
}

.diag-score-input::-webkit-inner-spin-button,
.diag-score-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.diag-score-input.has-value {
  color: #1d4ed8;
}

.diag-score-wrap:focus-within {
  border-color: #1d4ed8;
}

.diag-score-unit {
  font-size: 2rem;
  font-weight: 600;
  color: #9ca3af;
}

/* 지역 선택 그리드 */
.diag-region-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}

.diag-region-btn {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 0.8rem;
  padding: 1.1rem 0;
  font-size: 1.5rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.diag-region-btn.is-active {
  border-color: #1F5EFF;
  color: #1F5EFF;
  font-weight: 700;
  background: #fff;
}

/* 체크 아이콘 (선택된 지역) */
.diag-region-btn.is-active::after {
  content: ' ✓';
  font-size: 1.2rem;
  color: #fff;
  background: #1F5EFF;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  line-height: 1.5rem;
  text-align: center;
}

/* 제출 버튼 */
.sec-diag-submit {
  padding: 0.8rem 0 2rem;
}

.diag-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  background: #9ca3af;
  color: #fff;
  border: none;
  border-radius: 1.2rem;
  padding: 1.8rem 0;
  font-size: 1.7rem;
  font-weight: 600;
  cursor: default;
}

.diag-submit-btn.is-active {
  background: #1F5EFF;
  cursor: pointer;
}

.diag-submit-arrow {
  font-size: 1.6rem;
  font-weight: 600;
}
.diag-submit-arrow img{width: 1.5rem;}

.diag-submit-desc span{
  text-align: center;
  font-size: 1.4rem;
  color: #9ca3af;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.diag-submit-desc img{width: 1.5rem;}



/* ===========================
   진단 결과 페이지
   =========================== */

/* 내 정보 요약 태그 */
.sec-result-meta{margin-bottom: 2rem;}
.sec-result-meta .container{display: flex;justify-content: center;}

.result-meta-bar {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10rem;
  padding: 0.8rem 1.8rem;
}

.result-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.4rem;
  color: #374151;
}

.result-meta-item img {
  width: 1.6rem;
  height: 1.6rem;
  object-fit: contain;
}

.result-meta-item strong {
  font-weight: 700;
  font-size: 1.4rem;
}

.result-meta-divider {
  color: #d1d5db;
  font-size: 1.4rem;
}

/* 결과 전체 감싸기 */
.sec-result-card {
  padding: 0 0 2rem;
}

.result-wrap {
  background: #fff;
  border-radius: 1.6rem;
  overflow: hidden;
}

/* 신호등 결과 카드 */
.result-signal-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
}

.result-signal-top {
  flex: 1;
}

.result-signal-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.6rem;
}

.result-signal-dot {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}

.result-signal-title span{
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 1rem;
}

.result-signal-desc {
  font-size: 1.4rem;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.result-signal-img {
  flex-shrink: 0;
  width: 11rem;
  height: 13rem;
}

.result-signal-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 비교 스코어보드 */
.result-scoreboard {
  padding: 2rem 1.8rem;
  border-radius: 1rem 1rem 0 0;
  overflow: hidden;
}

.result-scoreboard-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1.2rem;
}

.result-score-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}

.result-score-item {
  border-radius: 1.2rem;
  padding: 1.4rem 1rem 1.2rem;
}

.result-score-icon-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 0.6rem;
  justify-content: center;
}

.result-score-icon-label img {
  width: 1.4rem;
  height: 1.4rem;
  object-fit: contain;
}

.result-score-num {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.8rem;
  text-align: center;
}

.result-score-num span {
  font-size: 1.5rem;
  font-weight: 600;
  margin-left: 0.2rem;
}

.result-score-desc {
  font-size: 1.2rem;
  color: #333;
  line-height: 1.5;
  text-align: center;
}

/* 맞춤 전략 코멘트 */
.result-comment {
  margin: 0 1.8rem 1.8rem;
  border-radius: 1.2rem;
  padding: 1.6rem 1.6rem;
}

.result-comment-title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.result-comment-star {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.result-comment-star img{width: 2rem;}

.result-comment-text {
  font-size: 1.35rem;
  color: #374151;
  line-height: 1.7;
}

/* 버튼 */
.result-btn-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 1.8rem 1rem;
  border-radius: 1.2rem;
  padding: 1.8rem 0;
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  position: relative;
}
.result-btn-main span{position: absolute;right: 2rem;}
.result-btn-main span img{
  width: 1.5rem;
}

.result-btn-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0 1.8rem 2rem;
  border: 1px solid #e5e7eb;
  border-radius: 1.2rem;
  padding: 1.8rem 0;
  font-size: 1.6rem;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  position: relative;
}
.result-btn-sub span{position: absolute;right: 2rem;}
.result-btn-sub span img {
  width: 1.5rem;
}

/* ===========================
   공지사항 목록
   =========================== */
  
  /* 게시글 카드 */
  .notice-list-card {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1.4rem;
    padding: 1.8rem 1.6rem;
    text-decoration: none;
    margin-bottom: 1.2rem;
  }
  
  .notice-list-card:last-of-type {
    margin-bottom: 0;
  }
  
  /* 상단 - 뱃지 */
  .notice-list-top {
    margin-bottom: 1rem;
  }
  
  .notice-list-badge {
    display: inline-block;
      background: #1F5EFF;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 500;
    padding: 0.7rem 1.2rem;
    border-radius: 10rem;
  }
  
  /* 중단 - 제목 + 화살표 */
  .notice-list-middle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
  }
  
  .notice-list-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111;
    line-height: 1.45;
    flex: 1;
  }
  
  .notice-list-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top: 0.2rem;
  }
  
  .notice-list-arrow img {
    width: 1.6rem;
    height: 1.6rem;
    object-fit: contain;
  }
  
  /* 하단 - 날짜 | 조회수 */
  .notice-list-bottom {
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }
  
  .notice-list-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.4rem;
    color: #9ca3af;
  }
  
  .notice-list-meta img {
    width: 1.6rem;
    height: 1.6rem;
    object-fit: contain;
  }
  
  .notice-list-divider {
    font-size: 1.4rem;
    color: #d1d5db;
  }
  
  /* 빈 목록 */
  .notice-empty {
    text-align: center;
    font-size: 1.4rem;
    color: #9ca3af;
    padding: 4rem 0;
  }
  
  /* 페이지네이션 */
  .notice-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.4rem;
    padding-bottom: 2rem;
  }
  
  .page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background: #fff;
    text-decoration: none;
  }
  
  .page-btn img {
    width: 1.4rem;
    height: 1.4rem;
    object-fit: contain;
  }
  
  .page-btn.is-disabled {
    opacity: 0.35;
    pointer-events: none;
  }
  
  .page-info {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 8rem;
    height: 3.6rem;
    border: 1px solid #e5e7eb;
    border-radius: 10rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: #374151;
    background: #fff;
  }

  /* ===========================
   공지사항 상세
   =========================== */

.sec-notice-detail {
  padding: 0.4rem 0 2rem;
}

/* 뱃지 */
.notice-detail-badge {
  display: inline-block;
  background: #1F5EFF;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
  padding: 0.7rem 1.2rem;
  border-radius: 10rem;
  margin-bottom: 1.4rem;
}

/* 제목 */
.notice-detail-title {
  font-size: 2rem;
  font-weight: 700;
  color: #111;
  line-height: 1.45;
  margin-bottom: 1.6rem;
}

/* 메타 */
.notice-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  color: #9ca3af;
  margin-bottom: 1.4rem;
}

.notice-detail-meta span{font-size: 1.4rem;}

.notice-detail-meta-divider {
  color: #d1d5db;
}

/* 구분선 */
.notice-detail-line {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin-bottom: 2rem;
}

/* 본문 */
.notice-detail-content {
  font-size: 1.45rem;
  color: #374151;
  line-height: 1.85;
  word-break: keep-all;
  margin-bottom: 3.2rem;
}

/* 목록으로 버튼 */
.notice-detail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #1F5EFF;
  color: #fff;
  font-size: 1.7rem;
  font-weight: 600;
  border-radius: 1.2rem;
  padding: 1.8rem 0;
  text-decoration: none;
}

.notice-detail-btn span {
  position: absolute;
  right: 2rem;
  font-size: 1.6rem;
}

.notice-detail-btn span img{width: 1.5rem;}



/* ===========================
   커트라인 페이지
   =========================== */
  
  /* 지역 선택 버튼 */
  .cutline-region-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 0.9rem 1.4rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 2rem;
    cursor: pointer;
  }
  
  .cutline-region-btn img {
    width: 1.6rem;
    height: 1.6rem;
    object-fit: contain;
  }
  
  .icon-chevron {
    width: 1.2rem !important;
    height: 1.2rem !important;
  }
  
  /* 설명 텍스트 */
  .cutline-desc {
    font-size: 1.6rem;
    color: #374151;
    line-height: 1.6;
    margin-bottom: 2rem;
    font-weight: 600;
  }
  
  .cutline-desc strong {
    font-size: 2rem;
    font-weight: 600;
    color: #111;
  }
  
  .cutline-score-highlight {
    color: #1F5EFF;
    font-size: 2rem;
    font-weight: 800;
  }
  
  /* 점수 그리드 2x2 */
  .cutline-score-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
  }
  
  .cutline-score-card {
    border-radius: 1.4rem;
    padding: 1.6rem 1.6rem 1.4rem;
  }
  
  .cutline-min    { background: #FEF3F2; border:1px solid #FFB7B1;}
  .cutline-avg    { background: #EDF3FB; border:1px solid #A8CDFF;}
  .cutline-median { background: #F6F4FD; border:1px solid #DED4FF;}
  .cutline-max    { background: #F2F9F4; border:1px solid #BCE8C9;}
  
  .cutline-score-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.8rem;
    justify-content: center;
    margin-bottom: 1rem;
  }
  .cutline-score-label span{width: 2.5rem;height: 2.5rem;background: #fee5e6;border-radius: 50%;display: flex;justify-content: center;align-items: center;}
  .cutline-score-card:nth-child(2) .cutline-score-label span{background: #e5eefd;}
  .cutline-score-card:nth-child(3) .cutline-score-label span{background: #efe8fe;}
  .cutline-score-card:nth-child(4) .cutline-score-label span{background: #e6f6ec;}
  .cutline-score-label img {
    width: 10em;
  }

  .cutline-score-card:nth-child(3) .cutline-score-label img{width: 2rem;}
  .cutline-score-card:nth-child(4) .cutline-score-label img{width: 2rem;}
  
  .cutline-score-num {
    font-size: 3.6rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
  }
  
  .cutline-min    .cutline-score-num { color: #ef4444; }
  .cutline-avg    .cutline-score-num { color: #3b82f6; }
  .cutline-median .cutline-score-num { color: #7c3aed; }
  .cutline-max    .cutline-score-num { color: #16a34a; }
  
  .cutline-score-num span {
    font-size: 1.8rem;
    font-weight: 700;
    margin-left: 0.2rem;
  }
  
  /* 진단하기 버튼 */
  .cutline-diag-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #1F5EFF;
    color: #fff;
    font-size: 1.7rem;
    font-weight: 600;
    border-radius: 1.2rem;
    padding: 1.8rem 0;
    text-decoration: none;
  }
  
  .cutline-diag-btn span {
    position: absolute;
    right: 2rem;
    font-size: 1.6rem;
  }

  .cutline-diag-btn span img{width: 1.5rem;}
  
  
  /* ===========================
     지역 선택 모달
     =========================== */
  
  .cutline-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 200;
  }
  
  .cutline-modal-overlay.is-show {
    display: block;
  }
  
  .cutline-modal {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 201;
    background: #fff;
    border-radius: 2rem 2rem 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .cutline-modal.is-show {
    display: block;
  }
  
  .cutline-modal-handle {
    width: 4rem;
    height: 0.4rem;
    background: #d1d5db;
    border-radius: 10rem;
    margin: 1.2rem auto 0;
  }
  
  .cutline-modal-inner {
    padding: 2rem 2rem 0;
    max-height: 80vh;
    overflow-y: auto;
  }
  
  .cutline-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.6rem;
  }
  
  .cutline-modal-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #111;
    line-height: 1.45;
  }
  
  .cutline-modal-close {
    background: none;
    border: none;
    font-size: 1.8rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0.2rem;
    flex-shrink: 0;
  }
  
  .cutline-modal-line {
    border: none;
    border-top: 1px solid #f1f2f4;
    margin-bottom: 1.8rem;
  }
  
  /* 지역 버튼 그리드 */
  .cutline-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin-bottom: 2rem;
  }
  
  .cutline-modal-btn {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 0.8rem;
    padding: 1.1rem 0;
    font-size: 1.4rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    text-align: center;
  }
  
  .cutline-modal-btn.is-active {
    background: #1F5EFF;
    border-color: #1F5EFF;
    color: #fff;
    font-weight: 700;
  }
  
  /* 안내 문구 */
  .cutline-modal-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    background: #eff6ff;
    border-radius: 1rem;
    padding: 1.4rem 1.4rem;
    margin-bottom: 2rem;
    min-width: 0;
  }
  
  .cutline-modal-notice img {
    width: 1.8rem;
    height: 1.8rem;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 0.1rem;
  }
  
  .cutline-modal-notice p {
    font-size: 1.25rem;
  color: #374151;
  line-height: 1.6;
  word-break: keep-all;
  min-width: 0;
  flex: 1;
  }



  /* ===========================
   청약 공고 목록 추가 CSS
   =========================== */

/* 타이틀 행 */
.list-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.list-title-left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.list-title-text {
  font-size: 1.8rem;
  font-weight: 700;
  color: #111;
}

.list-search-btn {
  background: none;
  border: none;
  padding: 0.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.list-search-btn img {
  width: 2.2rem;
  height: 2.2rem;
  object-fit: contain;
}

/* 필터 셀렉트 */
.sec-list-filter {
  padding: 1.2rem 0 0;
}

.list-filter-row {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.list-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 0.8rem 1.2rem;
  font-size: 1.3rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
}

.list-filter-btn.is-active {
  background: #eff6ff;
  border-color: #1d4ed8;
  color: #1d4ed8;
  font-weight: 700;
}

.list-filter-btn img {
  width: 1.4rem;
  height: 1.4rem;
  object-fit: contain;
}

/* 정렬 탭 */
.sec-list-tab {
  padding: 1.4rem 0 0;
}

.list-tab-row {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
}

.list-tab-btn {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 1rem 0 1.2rem;
  font-size: 1.35rem;
  font-weight: 500;
  color: #9ca3af;
  cursor: pointer;
  margin-bottom: -1px;
  white-space: nowrap;
}

.list-tab-btn.is-active {
  color: #1d4ed8;
  font-weight: 700;
  border-bottom-color: #1d4ed8;
}

/* 카드 목록 */
.sec-list-items {
  padding: 1.6rem 0 2rem;
}

.list-card {
  display: block;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1.4rem;
  padding: 1.6rem;
  text-decoration: none;
  margin-bottom: 1.2rem;
}

/* 카드 상단: 상태뱃지 + rcept */
.list-card-top {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* 상태 뱃지 */
.list-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 0.6rem 1.5rem;
  border-radius: 10rem;
}

.list-status-badge img {
  width: 1.3rem;
  height: 1.3rem;
  object-fit: contain;
}

.badge-dday {
  background: #fff1f2;
  color: #ef4444;
}

.badge-upcoming {
  background: #fffbeb;
  color: #f59e0b;
}

.badge-open {
  background: #f0fdf4;
  color: #16a34a;
}

.badge-closed {
  background: #f3f4f6;
  color: #6b7280;
}


/* 유형 태그 */
.list-card-types {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.list-type-tag {
  display: inline-block;
  background: #E9F1FD;
  color: #1d4ed8;
  font-size: 1.2rem;
  font-weight: 500;
  padding: 0.6rem 1rem;
  border-radius: 0.6rem;
}
.list-type-tag:nth-of-type(2){background: #EAF6EF;color: #16A34A;}

/* 제목 */
.list-card-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: #111;
  line-height: 1.4;
  margin-bottom: 0.9rem;
}

/* 메타 정보 */
.list-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.4rem;
  color: #6b7280;
  margin-bottom: 1rem;
}

.list-card-meta img {
  width: 1.5rem;
  object-fit: contain;
  flex-shrink: 0;
}

.list-meta-divider {
  color: #d1d5db;
  margin: 0 0.2rem;
}

/* 안내 메시지 */
.list-card-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.4rem;
  color: #6b7280;
  margin-top: 0.8rem;
}

.list-card-notice img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  flex-shrink: 0;
}

/* 구분선 */
.list-card-line {
  border: none;
  border-top: 1px dashed #e5e7eb;
  margin: 1.2rem 0 1rem;
}

/* 경쟁률 */
.list-card-competition {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.4rem;
  color: #6b7280;
}

.list-card-competition img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

.list-card-competition strong {
  color: #EF4444;
  font-weight: 600;
  font-size: 1.4rem;
}

/* ===========================
   검색 모달
   =========================== */
   #searchResults {
    max-height: 50vh;
    overflow-y: auto;
  }
  #searchRecent {
    max-height: 50vh;
    overflow-y: auto;
  }

   .search-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 200;
  }
   
  .search-modal-overlay.is-show { display: block; }
   
  .search-modal {
    display: none;
    position: fixed;
    top: 20%;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 201;
    border-radius: 1.5rem;
    padding-bottom: 2rem;
    box-shadow: 0 0.4rem 2rem rgba(0,0,0,0.12);
    margin: 0 1.5rem;
  }
   
  .search-modal.is-show { display: block; }
   
  .search-modal-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.6rem;
  }
   
  .search-back-btn {
    background: none;
    border: none;
    padding: 0.2rem;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
   
  .search-back-btn img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
  }
   
  .search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    border-radius: 10rem;
    padding: 0.9rem 1.4rem;
    gap: 0.8rem;
    border: 1px solid #eee;
  }
   
  .search-input-icon {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    flex-shrink: 0;
  }
   
  .search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 1.4rem;
    color: #111;
  }
   
  .search-clear-btn {
    background: none;
    border: none;
    padding: 0.2rem;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
   
  .search-clear-btn img {
    width: 2.2rem;
    height: 2.2rem;
    object-fit: contain;
  }
   
  .search-modal-line {
    border: none;
    border-top: 1px solid #f1f2f4;
    margin: 0 0 1.6rem;
  }
   
  .search-recent,
  .search-results {
    padding: 0 1.6rem;
    min-height: 20rem;
  }
   
  .search-section-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #111;
    margin-bottom: 1.2rem;
  }
   
  .search-recent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
  }
   
  .search-recent-header .search-section-title { margin-bottom: 0; }
   
  .search-delete-all {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
  }
   
  .search-recent-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
  }
   
  .search-recent-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #f3f4f6;
    border-radius: 10rem;
    padding: 0.7rem 1.2rem;
    font-size: 1.3rem;
    color: #374151;
    border: none;
    cursor: pointer;
  }
   
  .search-recent-tag-del {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #9ca3af;
    font-size: 1.4rem;
    line-height: 1;
    display: flex;
    align-items: center;
  }
   
  .search-result-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
   
  .search-result-list li + li { border-top: 1px solid #f1f2f4; }
   
  .search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.3rem 0;
    text-decoration: none;
    gap: 1rem;
  }
   
  .search-result-left {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: 1;
    min-width: 0;
  }
   
  .search-result-left img {
    width: 1.4rem;
    height: 1.4rem;
    object-fit: contain;
    flex-shrink: 0;
  }
   
  .search-result-text {
    font-size: 1.4rem;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
   
  .search-result-text em {
    color: #1d4ed8;
    font-style: normal;
    font-weight: 700;
  }
   
  .search-result-arrow {
    flex-shrink: 0;
    color: #9ca3af;
    font-size: 1.4rem;
  }

  .search-result-arrow img{width: 1.5rem;}
   

  /* ===========================
   상태 필터 모달
   =========================== */
.filter-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200;
}
 
.filter-modal-overlay.is-show { display: block; }
 
.filter-modal {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 201;
  background: #fff;
  border-radius: 2rem 2rem 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}
 
.filter-modal.is-show { display: block; }
 
.filter-modal-handle {
  width: 4rem;
  height: 0.4rem;
  background: #d1d5db;
  border-radius: 10rem;
  margin: 1.2rem auto 0;
}
 
.filter-modal-inner {
  padding: 2rem 2rem 1rem;
}
 
.filter-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}
 
.filter-modal-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #111;
}
 
.filter-modal-close {
  background: none;
  border: none;
  font-size: 1.8rem;
  color: #6b7280;
  cursor: pointer;
  padding: 0.2rem;
}
 
.filter-status-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.filter-status-list li + li {
  margin-top: 0.4rem;
}
 
.filter-status-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  background: none;
  border: none;
  padding: 1.4rem 0.4rem;
  font-size: 1.6rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  text-align: left;
}
 
.filter-status-item img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  flex-shrink: 0;
}

.filter-status-list li:nth-child(1) .filter-status-item img { width: 1.7rem; }
.filter-status-list li:nth-child(2) .filter-status-item img { width: 1.7rem; }
.filter-status-list li:nth-child(3) .filter-status-item img { width: 1.7rem; }
 
.filter-status-item.is-active {
  color: #1d4ed8;
  font-weight: 700;
}
 
.filter-status-dday {
  color: #ef4444;
}
 
.filter-status-dday.is-active {
  color: #ef4444;
}
 
 
/* 지역 필터 그리드 */
.filter-region-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  padding-bottom: 1rem;
}
 
.filter-region-btn {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 0.8rem;
  padding: 1.1rem 0;
  font-size: 1.4rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  text-align: center;
}
 
.filter-region-btn.is-active {
  background: #1F5EFF;
  border-color: #1F5EFF;
  color: #fff;
  font-weight: 700;
}
 
/* 주택유형 필터 라디오 리스트 */
.filter-type-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.filter-type-list li + li {
  margin-top: 0.4rem;
}
 
.filter-type-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  background: none;
  border: none;
  padding: 1rem 0.4rem;
  font-size: 1.6rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  text-align: left;
}
 
.filter-type-item.is-active {
  color: #1d4ed8;
  font-weight: 700;
}
.filter-type-group-header span{font-size: 1.6rem;font-weight: 500;
  color: #374151;}
 
.filter-type-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  flex-shrink: 0;
  background: #fff;
}
 
.filter-type-radio.is-checked {
  border-color: #1F5EFF;
  background: #1F5EFF;
}
 
.filter-type-radio.is-checked::after {
  content: '';
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: #fff;
}


/* ===========================
   공고 상세 추가 CSS
   =========================== */

/* 히어로 */
.sec-detail-hero {
  background: #fff;
  padding: 2rem 0 1.6rem;
}

.sec-detail-hero .list-status-badge {
  margin-bottom: 1.2rem;
}

.detail-title {
  font-size: 2rem;
  font-weight: 700;
  color: #111;
  line-height: 1.4;
  margin-bottom: 0.8rem;
}

.detail-area {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.4rem;
  color: #6b7280;
}

.detail-area img {
  width: 1.4rem;
  height: 1.4rem;
  object-fit: contain;
}

/* 기본 정보 그리드 */
.sec-detail-info {
  padding: 1.6rem 0;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-radius: 1.4rem;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
}
.detail-info-grid.is-single {
  grid-template-columns: 1fr;
  max-width: 56%;
}

.detail-info-item {
  padding: 1.4rem 1.6rem;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.detail-info-item:nth-child(2n) { border-right: none; }
.detail-info-item:nth-last-child(-n+2) { border-bottom: none; }
.detail-info-item img{height: 2rem;}
.detail-info-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  color: #9ca3af;
  margin-bottom: 0.6rem;
}

.detail-info-label img {
  width: 1.4rem;
  height: 1.4rem;
  object-fit: contain;
}

.detail-info-value {
  font-size: 1.45rem;
  font-weight: 600;
  color: #111;
}

/* 규제 태그 */
.sec-detail-tags {
  background: #fff;
  padding: 2rem 0;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.detail-tag {
  display: inline-block;
  background: #E9F1FD;
  color: #1d4ed8;
  font-size: 1.3rem;
  font-weight: 500;
  padding: 0.8rem 1.3rem;
  border-radius: 1rem;
}

/* 실시간 접수 현황 아코디언 */
.sec-detail-apply {
  background: #fff;
  padding: 2rem 0;
}

.detail-apply-wrap {
  border: 1px solid #FFE1DE;
  border-radius: 1.4rem;
  overflow: hidden;
}

.detail-apply-hot-header {
  background: #FEF3F2;
  padding: 1.6rem;
  cursor: pointer;
  position: relative;
}

.detail-apply-hot-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.4rem;
  color: #ef4444;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.detail-apply-hot-label img {
  width: 1.4rem;
  height: 1.4rem;
  object-fit: contain;
}

.detail-apply-hot-title {
  font-size: 1.5rem;
  color: #ef4444;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.detail-apply-hot-title strong {
  color: #ef4444;
  font-size: 1.5rem;
  font-weight: 700;
}

.detail-apply-hot-sub {
  font-size: 1.4rem;
  color: #374151;
}

.detail-apply-toggle-icon {
  position: absolute;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  transition: transform 0.2s;
}

.detail-apply-toggle-icon img {
  width: 1.6rem;
  height: 1.6rem;
  object-fit: contain;
}

.detail-apply-toggle-icon.is-open {
  transform: translateY(-50%) rotate(180deg);
}

/* 아코디언 바디 */
.detail-apply-body {
  display: none;
  background: #fff;
}

.detail-apply-body.is-open {
  display: block;
}

.detail-apply-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1.6rem;
  border-top: 1px solid #f1f2f4;
}

.detail-apply-name {
  font-size: 1.6rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 0.3rem;
}

.detail-apply-meta {
  font-size: 1.4rem;
  color: #9ca3af;
}

.detail-apply-ratio {
  font-size: 1.5rem;
  font-weight: 700;
  color: #374151;
}

.detail-apply-ratio.is-hot {
  color: #ef4444;
}

.detail-apply-empty{background: #FEF3F2;font-size: 1.4rem;padding: 1rem;}





















.sec-detail-schedule {
  background: #fff;
  padding: 2rem 0;
}

.detail-schedule-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 1.4rem;
  overflow: hidden;
}

.detail-schedule-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid #eee;
  position: relative;
}

.detail-schedule-row:last-child {
  border-bottom: none;
}

.detail-schedule-left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex: 1;
  min-width: 0;
}

.detail-schedule-icon {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  flex-shrink: 0;
}

.detail-schedule-label {
  font-size: 1.4rem;
  font-weight: 500;
  color: #9ca3af;
}

.detail-schedule-row.is-done .detail-schedule-label {
  color: #111;
  font-weight: 600;
}

/* 가운데 점 - row 안에 두되 위/아래 선은 ::before/::after */
.detail-schedule-center {
  position: relative;
  width: 1.4rem;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.detail-schedule-dot {
  position: relative;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #e5e7eb;
  z-index: 2;
}

.detail-schedule-dot.is-done {
  background: #16A34A;
}

.detail-schedule-row:not(:first-child) .detail-schedule-center::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -1.3rem;        /* padding 만큼 위로 */
  bottom: 50%;
  width: 0.2rem;
  background: #e5e7eb;
  transform: translateX(-50%);
  z-index: 1;
  height: auto;        /* height 제거 */
}

/* 아래쪽 선 (마지막 row 제외) */
.detail-schedule-row:not(:last-child) .detail-schedule-center::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: -1.3rem;     /* padding 만큼 아래로 */
  width: 0.2rem;
  background: #e5e7eb;
  transform: translateX(-50%);
  z-index: 1;
  height: auto;
}

/* 완료된 row의 선 */
.detail-schedule-row.is-done .detail-schedule-center::before,
.detail-schedule-row.is-done .detail-schedule-center::after {
  background: #16A34A;
}

.detail-schedule-date {
  font-size: 1.35rem;
  font-weight: 500;
  color: #9ca3af;
  flex-shrink: 0;
  width: 18rem;  
  text-align: left;
}

.detail-schedule-row.is-done .detail-schedule-date {
  color: #374151;
  font-weight: 600;
}


















/* 다른 정보 카드 */
.sec-detail-more {
  background: #fff;
  padding: 2rem 0;
}

.detail-more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.detail-more-card {
  display: flex;
  flex-direction: column;
  background: #F2F9F4;
  border-radius: 1.4rem;
  padding: 1.6rem 1.4rem 1.4rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  min-height: 11rem;
  border: 1px solid #BCE8C9;
}

.detail-more-text {
  font-size: 1.35rem;
  font-weight: 600;
  color: #111;
  line-height: 1.45;
  margin-bottom: 3rem;
}

.detail-more-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: #16A34A;
  padding: 0.5rem 1rem;
  align-self: flex-start;
  border: 1px solid #16A34A;
}
.detail-more-btn img{width: 1.5rem;}

.detail-more-img {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  width: 5rem;
  height: 5rem;
}

.detail-more-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.detail-more-card:nth-of-type(2) {background: #F8FAFD;border: 1px solid #C2DAFF;}
.detail-more-card:nth-of-type(2) .detail-more-btn{border: 1px solid #1F5EFF;color: #1F5EFF;}

/* 문의 안내 */
.sec-detail-contact {
  background: #fff;
  padding: 2rem 0;
}

.detail-contact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem;
  border: 1px solid #e5e7eb;
  border-radius: 1.2rem;
  text-decoration: none;
  margin-bottom: 1rem;
  box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
}

.detail-contact-item:last-child { margin-bottom: 0; }

.detail-contact-label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.45rem;
  font-weight: 600;
  color: #111;
}

.detail-contact-label img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.detail-contact-arrow {
  width: 1.8rem;
  height: 1.8rem;
  object-fit: contain;
}

.detail-contact-phone {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1d4ed8;
}

/* 청약홈 접수 버튼 */
.sec-detail-submit {
  padding: 1.6rem 0 2rem;
}

.detail-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #1F5EFF;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 500;
  border-radius: 1.2rem;
  padding: 1.8rem 0;
  text-decoration: none;
}

.detail-submit-btn span {
  position: absolute;
  right: 2rem;
  font-size: 1.6rem;
}

.detail-submit-btn span img{width: 1.5rem;}