:root {
  --est-navy: #0b1f38;
  --est-blue: #1769e0;
  --est-blue-soft: #eaf2ff;
  --est-gold: #d99a32;
  --est-ink: #142033;
  --est-muted: #68758a;
  --est-line: #dfe6ef;
  --est-surface: #f3f6fa;
}

body:has(.estimate-hero) {
  background: var(--est-surface);
  color: var(--est-ink);
}

.estimate-hero {
  min-height: 360px;
  padding: 72px 24px 96px;
  background:
    linear-gradient(115deg, rgba(6, 24, 45, .96), rgba(10, 50, 88, .82)),
    url('/assets/images/estimate-hero_01.jpg') center 46% / cover no-repeat;
}

.estimate-hero::before {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 52px 52px;
}

.estimate-hero__inner { max-width: 760px; padding: 0; }
.estimate-kicker {
  margin-bottom: 20px;
  padding: 8px 15px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: #ffd58a;
  font-size: 11px;
}
.estimate-hero__inner h1 { margin-bottom: 16px; font-size: clamp(38px, 5vw, 60px); letter-spacing: -.045em; }
.estimate-hero__inner p { font-size: 17px; line-height: 1.7; }
.estimate-hero-features { margin-top: 25px; gap: 8px; }
.estimate-hero-features span { padding: 9px 14px; border-color: rgba(255,255,255,.15); font-size: 12px; }

.estimate-guide {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: -42px auto 32px;
  padding: 24px 28px;
  border: 1px solid rgba(217, 226, 238, .9);
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 20px 50px rgba(11,31,56,.11);
}
.guide-step { flex: 1; min-width: 0; }
.guide-no { width: 38px; height: 38px; background: var(--est-navy); font-size: 12px; }
.guide-step strong { color: var(--est-ink); }
.guide-step span { margin-top: 3px; color: var(--est-muted); line-height: 1.4; }
.guide-arrow { color: #bcc6d4; font-size: 19px; }

.estimate-search,
.estimate-summary-wrap,
.estimate-recommend { max-width: 1120px; }
.estimate-search { margin: 32px auto 90px; padding: 0 20px; }
.estimate-card {
  padding: 38px;
  border-color: var(--est-line);
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(11,31,56,.07);
}
.estimate-card-head { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--est-line); }
.estimate-card-head h2 { font-size: 27px; letter-spacing: -.035em; }
.estimate-card-head p { color: var(--est-muted); line-height: 1.6; }
.estimate-card-head p[style] { padding: 10px 12px; border-radius: 9px; background: #f7f9fc; }
.estimate-card-head p[style] span { background: transparent !important; color: var(--est-blue) !important; font-weight: 800; }

.estimate-form-row { position: relative; gap: 14px; margin-bottom: 22px; }
.estimate-form-group label { margin: 0 0 9px; color: #445167; font-size: 12px; letter-spacing: .01em; }
.choice { margin-left: 6px; padding: 3px 7px; border-radius: 999px; background: #eaf2ff; color: var(--est-blue); font-size: 10px; }
.estimate-form-group select {
  height: 58px;
  padding: 0 42px 0 16px;
  border: 1px solid #cfd9e6;
  border-radius: 13px;
  color: var(--est-ink);
  box-shadow: 0 2px 0 rgba(11,31,56,.02);
}
.estimate-form-group select:hover:not(:disabled) { border-color: #8a9bb1; }
.estimate-form-group select:focus { border-color: var(--est-blue); box-shadow: 0 0 0 4px rgba(23,105,224,.1); }
.estimate-form-group select:disabled { background: #f4f6f8; color: #9aa5b3; opacity: 1; }

.estimate-add-room-btn {
  max-width: none;
  height: 52px;
  margin: 0 0 18px;
  border-radius: 12px;
  background: var(--est-blue);
}
.estimate-add-room-btn:hover { background: #0f58c4; }
.estimate-add-room-btn:disabled,
.estimate-btn:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.estimate-preview { margin-bottom: 18px; padding: 22px; border-radius: 16px; background: #f7f9fc; border-color: var(--est-line); }
.estimate-preview > span { margin-bottom: 14px; color: var(--est-ink); font-size: 14px; text-align: left; }
.selected-room-list { justify-content: flex-start; margin-top: 0; }
.empty-room { width: 100%; padding: 22px; border: 1px dashed #c9d4e2; border-radius: 12px; background: #fff; }
.empty-room p { margin: 0 0 14px; color: var(--est-muted); line-height: 1.65; }
.empty-room-status-btn { margin-top: 0; background: var(--est-navy); }
.selected-room-card { border-color: #cbd9ea; border-radius: 12px; box-shadow: none; }
.estimate-btn { height: 58px; border-radius: 13px; background: linear-gradient(135deg, var(--est-navy), #163d68); }

.estimate-login-required {
  margin-bottom: 26px;
  padding: 36px 28px;
  border: 1px solid #d8e4f3;
  border-radius: 17px;
  background: linear-gradient(135deg, #f7fbff, #edf4ff);
}
.estimate-login-required h3 { margin: 0 0 8px; font-size: 22px; }
.estimate-login-required p { margin: 0 auto 20px; color: var(--est-muted); line-height: 1.65; }
.estimate-login-btn, .estimate-register-btn { height: 46px; border-radius: 10px; }
.estimate-login-btn { background: var(--est-blue); }

.estimate-summary-wrap.is-show { margin-top: 48px; }
.summary-header { position: relative; margin: 0 0 22px; gap: 5px; }
.summary-header h2, .section-head h2 { color: var(--est-ink); font-size: 28px; letter-spacing: -.035em; }
.summary-header p, .section-head p { color: var(--est-muted); }
.summary-more-btn { position: absolute; right: 0; bottom: 0; border-radius: 11px; background: var(--est-navy); }
.estimate-summary { gap: 12px; }
.summary-card { padding: 22px 16px; border-radius: 16px; box-shadow: 0 8px 24px rgba(11,31,56,.05); }
.summary-card strong { margin-bottom: 5px; font-size: 32px; }

.estimate-recommend.is-show { margin-top: 62px; margin-bottom: 58px; }
.recommend-project-name { margin: 0 0 22px; color: var(--est-navy); font-size: clamp(28px, 4vw, 42px); letter-spacing: -.045em; }
.section-head { margin-bottom: 20px; }
.recommend-grid { gap: 14px; }
.recommend-card { padding: 19px; border-radius: 15px; box-shadow: 0 8px 24px rgba(11,31,56,.05); }
.recommend-card h3 { margin-top: 18px; font-size: 25px; }
.recommend-badge { font-size: 13px; }
.recommend-price { font-size: 18px; }
.estimate-member-notice { border-color: #f0ddb9; background: #fffaf0; }

.status-modal { backdrop-filter: blur(5px); }
.status-modal-inner { border-radius: 20px; }
.status-modal-head { background: var(--est-navy); color: #fff; }
.status-floor-label { background: var(--est-navy); }
.status-room-item.is-active, .status-room-item.is-selected { border-color: var(--est-blue); background: var(--est-blue-soft); }

@media (max-width: 900px) {
  .estimate-form-row { grid-template-columns: repeat(2, 1fr); }
  .estimate-guide { margin-left: 20px; margin-right: 20px; }
}

@media (max-width: 768px) {
  html:has(.estimate-hero),
  body:has(.estimate-hero) {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  body:has(.estimate-hero) > * { max-width: 100%; }
  .estimate-guide {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .estimate-search,
  .estimate-summary-wrap,
  .estimate-recommend {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .estimate-card,
  .estimate-summary,
  .recommend-grid,
  .recommend-card,
  .section-head,
  .summary-header { min-width: 0; max-width: 100%; }
  .recommend-grid > *,
  .estimate-summary > *,
  .estimate-form-row > * { min-width: 0; }
  .estimate-hero { min-height: 310px; padding: 58px 20px 76px; }
  .estimate-hero__inner h1 { font-size: 34px; }
  .estimate-hero__inner p { font-size: 15px; }
  .estimate-hero-features span { padding: 8px 10px; }
  body:has(.estimate-hero) { overflow-x: clip; }\n  .estimate-guide { width: auto; max-width: none; align-items: stretch; margin: -32px 14px 24px; padding: 18px; border: 1px solid var(--est-line); border-radius: 17px; }
  .guide-step { padding: 8px 0; }
  .estimate-search { margin-top: 24px; padding: 0 12px; }
  .estimate-card { padding: 20px 16px; border-radius: 17px; }
  .estimate-card-head { margin-bottom: 22px; }
  .estimate-card-head h2 { font-size: 23px; }
  .estimate-form-row { grid-template-columns: 1fr; gap: 13px; }
  .estimate-form-group select { height: 54px; }
  .estimate-login-required { padding: 26px 16px; }
  .estimate-preview { padding: 14px; }
  .empty-room { padding: 18px 12px; }
  .estimate-summary-wrap, .estimate-recommend { padding-left: 14px; padding-right: 14px; }
  .summary-header { padding-right: 0; }
  .summary-more-btn { position: static; align-items: center; margin-top: 12px; }
  .estimate-summary { grid-template-columns: repeat(2, 1fr); }
  .summary-card { padding: 18px 10px; }
  .summary-card strong { font-size: 27px; }
  .section-head h2, .summary-header h2 { font-size: 24px; }
  .recommend-project-name { text-align: left; }
  .recommend-grid { grid-template-columns: 1fr; }
  .selected-room-card { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .estimate-summary-wrap, .estimate-recommend, .recommend-card, .estimate-btn, .estimate-add-room-btn { transition: none; }
}