:root {
  --ui-control-height: 42px;
  --ui-control-radius: 10px;
  --ui-compact-height: 38px;
  --ui-compact-radius: 9px;
  --ui-card-radius: 14px;
  --ui-panel-radius: 18px;
  --ui-panel-x: 28px;
  --ui-title-size: 18px;
  --ui-title-weight: 850;
  --ui-motion: 160ms ease;
}

/* Shared header controls use one compact button system on both pages. */
header.site-header .top-button,
header.site-header.app-header .top-button,
header.site-header.app-header .account-button.top-button {
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  max-height: var(--ui-control-height) !important;
  border-radius: var(--ui-control-radius) !important;
  font-weight: 800 !important;
  transition:
    border-color var(--ui-motion),
    background-color var(--ui-motion),
    color var(--ui-motion),
    box-shadow var(--ui-motion),
    transform var(--ui-motion) !important;
}

header.site-header .top-button:hover,
header.site-header .top-button:focus-visible,
header.site-header.app-header .top-button:hover,
header.site-header.app-header .top-button:focus-visible {
  border-color: #9fc2f4 !important;
  transform: translateY(-1px) !important;
}

header.site-header .top-button.primary:hover,
header.site-header .top-button.primary:focus-visible,
header.site-header.app-header .top-button.primary:hover,
header.site-header.app-header .top-button.primary:focus-visible {
  border-color: #0f5fd0 !important;
  background: #0f5fd0 !important;
  box-shadow: 0 10px 22px rgba(23, 105, 224, 0.24) !important;
}

/* Landing page: keep section rhythm, title hierarchy, and primary CTA consistent. */
.landing-top-band .hero-grid {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

.landing-top-band .hero-title {
  font-weight: 900 !important;
  line-height: 1.24 !important;
}

.landing-top-band .hero-copy {
  margin-top: 20px !important;
}

.landing-report-page-button {
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 24px !important;
  border-radius: 12px !important;
  font-size: 0.96rem !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  transition:
    background-color var(--ui-motion),
    box-shadow var(--ui-motion),
    transform var(--ui-motion) !important;
}

.landing-report-page-button:hover,
.landing-report-page-button:focus-visible {
  background: #0f5fd0 !important;
  box-shadow: 0 13px 28px rgba(23, 105, 224, 0.24) !important;
  transform: translateY(-1px) !important;
}

.core-features {
  padding-top: 76px !important;
  padding-bottom: 84px !important;
}

.core-features-head {
  margin-bottom: 40px !important;
}

.core-features-title {
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

.core-feature-card {
  min-height: 184px !important;
  padding: 20px 22px !important;
  border-radius: var(--ui-card-radius) !important;
}

.core-feature-card h3,
.core-flow-copy h3 {
  font-weight: 800 !important;
}

.core-features-flow {
  padding: 28px 30px !important;
  border-radius: var(--ui-card-radius) !important;
}

/* Feature page: align the four workflow headings and their numbered badges. */
.app-shell .panel-title-block h1,
.app-shell .research-drawer > .panel-section > .section-label,
.app-shell .info-viewer-panel > .section-label,
.app-shell .viewer-title-block #documentTitle,
.app-shell .archive-checklist-head .archive-step-title {
  gap: 10px !important;
  color: #0b1535 !important;
  -webkit-text-fill-color: #0b1535 !important;
  font-size: var(--ui-title-size) !important;
  font-weight: var(--ui-title-weight) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

.app-shell .panel-title-block h1 .step-number,
.app-shell .research-drawer > .panel-section > .section-label .step-number,
.app-shell .info-viewer-panel > .section-label .step-number,
.app-shell .viewer-title-block #documentTitle .step-number,
.app-shell .archive-checklist-head .archive-step-number {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  flex: 0 0 30px !important;
  font-size: 0.9rem !important;
  font-weight: 850 !important;
}

.app-shell .library,
.app-shell .research-drawer,
.app-shell .info-viewer,
.app-shell .viewer,
.app-shell .archive-checklist-panel {
  border-radius: var(--ui-panel-radius) !important;
}

@media (min-width: 1180px) {
  .app-shell .workspace > .library > .library-header {
    padding-right: var(--ui-panel-x) !important;
    padding-left: var(--ui-panel-x) !important;
  }

  .app-shell .workspace > .research-drawer > .panel-section,
  .app-shell .workspace > .info-viewer > .info-viewer-panel {
    padding-right: var(--ui-panel-x) !important;
    padding-left: var(--ui-panel-x) !important;
  }

  .app-shell .workspace > .viewer > .viewer-header,
  .app-shell .workspace > .viewer > .document-stage {
    padding-right: var(--ui-panel-x) !important;
    padding-left: var(--ui-panel-x) !important;
  }
}

/* Report-selection cards share one size and corner radius. */
.app-shell .workspace > .research-drawer > .panel-section .report-category-items > button.summary-card {
  min-height: 54px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  transition:
    border-color var(--ui-motion),
    background-color var(--ui-motion),
    box-shadow var(--ui-motion),
    transform var(--ui-motion) !important;
}

.app-shell .workspace > .research-drawer > .panel-section .report-category-items > button.summary-card:hover,
.app-shell .workspace > .research-drawer > .panel-section .report-category-items > button.summary-card:focus-visible {
  transform: translateY(-1px) !important;
}

.app-shell .research-drawer .report-category {
  border-radius: var(--ui-card-radius) !important;
}

/* Compact report and archive actions use the same 38px control size. */
.app-shell .workspace > .viewer > .document-tools > button.document-tool-button,
.app-shell .document-archive-list-actions .document-archive-action {
  height: var(--ui-compact-height) !important;
  min-height: var(--ui-compact-height) !important;
  padding: 0 13px !important;
  border-radius: var(--ui-compact-radius) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  transition:
    border-color var(--ui-motion),
    background-color var(--ui-motion),
    color var(--ui-motion) !important;
}

.app-shell .workspace > .viewer > .document-tools > button.document-tool-button:hover:not(:disabled),
.app-shell .workspace > .viewer > .document-tools > button.document-tool-button:focus-visible:not(:disabled),
.app-shell .document-archive-list-actions .document-archive-action:hover,
.app-shell .document-archive-list-actions .document-archive-action:focus-visible {
  border-color: #9fc2f4 !important;
  background: #f4f9ff !important;
}

.app-shell .info-action-row .make-document-button,
.app-shell .info-action-row .basic-report-transfer-button,
.app-shell .broker-disclosure-add-button,
.app-shell .modal-actions button {
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  border-radius: var(--ui-control-radius) !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
}

.app-shell .workspace > .info-viewer > .info-viewer-panel > .building-info-viewer {
  padding-right: 18px !important;
  padding-left: 0 !important;
  scrollbar-gutter: stable !important;
}

/* Large report-page titles stay black; table and section labels use dark blue. */
.paper.app-report-page .report-document-head h3,
.paper.app-report-page.land-report-page .report-document-head h3,
.paper.app-report-page:not(.land-report-page) .report-document-head h3 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* Cadastre uses the same main-title scale as the environment analysis report. */
.paper.app-report-page.cadastre-report-page .report-document-head h3,
.paper.app-report-page.a4-report-page.cadastre-report-page .report-document-head h3 {
  font-size: 2.02rem !important;
}

.paper.app-report-page .report-cell > strong,
.paper.app-report-page.land-report-page .report-cell > strong,
.paper.app-report-page:not(.land-report-page) .report-cell > strong,
.paper.app-report-page .report-floor-overview-cell.is-header,
.paper.app-report-page th,
.paper.app-report-page .label,
.paper.app-report-page .land-use-summary-card.is-core > strong,
.paper.app-report-page .land-use-summary-card.is-all > strong,
.paper.app-report-page .report-section-heading,
.paper.app-report-page.building-register-report-page .report-section-heading.floor-overview-heading,
.paper.app-report-page.enforcement-report-page .enforcement-report-section h4,
.paper.app-report-page.enforcement-report-page .enforcement-record-section h4 {
  color: #1e40af !important;
  -webkit-text-fill-color: #1e40af !important;
  font-weight: 800 !important;
}

/* Environment analysis keeps one compact, aligned label column. */
.paper.app-report-page.ai-report-page .report-cell,
.paper.app-report-page.ai-report-page .report-cell.is-multiline {
  grid-template-columns: 21.5% minmax(0, 1fr) !important;
}

/* Broker explanation pages follow the building-register table rhythm. */
.paper.app-report-page.broker-disclosure-report-page .broker-report-list {
  margin-top: 12px !important;
  border: 1.5px solid #bfd0e4 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

.paper.app-report-page.broker-disclosure-report-page .broker-report-row {
  grid-template-columns: 21.5% minmax(0, 1fr) !important;
  gap: 0 !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-bottom: 1px solid #d5e0ec !important;
}

.paper.app-report-page.broker-disclosure-report-page .broker-report-row:last-child {
  border-bottom: 0 !important;
}

.paper.app-report-page.broker-disclosure-report-page .broker-report-row > span,
.paper.app-report-page.broker-disclosure-report-page .broker-report-row > strong {
  display: flex !important;
  align-items: center !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
  line-height: 1.35 !important;
}

.paper.app-report-page.broker-disclosure-report-page .broker-report-row > span {
  border-right: 1px solid #d5e0ec !important;
  background: #f4f7fb !important;
  color: #1e40af !important;
  -webkit-text-fill-color: #1e40af !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  text-align: left !important;
}

.paper.app-report-page.broker-disclosure-report-page .broker-report-row > strong {
  background: #ffffff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  text-align: left !important;
}

.paper.app-report-page.broker-disclosure-report-page .broker-report-notice {
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

/* The basic cover uses the A4 page edge itself, without an extra black frame. */
.paper.app-report-page.cover-report-page .report-document,
.paper.app-report-page.a4-report-page.cover-report-page .report-document,
#coverModal .cover-modal-sheet {
  border: 0 !important;
}

/* Building-register labels use the same dark-blue tone. */
.paper.app-report-page.building-register-report-page .report-cell strong,
.paper.app-report-page.building-register-report-page .report-section-heading,
.paper.app-report-page.building-register-report-page .report-floor-overview-cell.is-header,
.paper.app-report-page.building-register-report-page th,
.paper.app-report-page.building-register-report-page .label {
  color: #1e40af !important;
  -webkit-text-fill-color: #1e40af !important;
}

.app-shell .archive-checklist-panel {
  padding: 26px var(--ui-panel-x) 28px !important;
}

.app-shell .archive-checklist-head {
  margin-bottom: 18px !important;
}

@media (max-width: 760px) {
  :root {
    --ui-panel-x: 18px;
    --ui-title-size: 17px;
  }

  .landing-top-band .hero-grid {
    padding-top: 36px !important;
    padding-bottom: 42px !important;
  }

  .core-features {
    padding-top: 58px !important;
    padding-bottom: 64px !important;
  }

  .core-features-head {
    margin-bottom: 30px !important;
  }

  .core-feature-card {
    min-height: 0 !important;
    padding: 18px 20px !important;
  }

  .app-shell .library,
  .app-shell .research-drawer,
  .app-shell .info-viewer,
  .app-shell .viewer,
  .app-shell .archive-checklist-panel {
    border-radius: 16px !important;
  }
}

@media (max-width: 1220px) and (min-width: 761px) {
  .landing-top-band .hero-grid {
    gap: 36px !important;
    padding-top: 44px !important;
    padding-bottom: 50px !important;
  }
}

@media (max-width: 820px) {
  .landing-top-band .hero-grid {
    gap: 28px !important;
  }
}

/* 2026-07-20: true final mobile app override.
   ui-polish.css is loaded after styles.css, so mobile visibility must end here.
   Phones should see the report builder as a normal vertical page: 1→2→3→4→5. */
@media (max-width: 920px), (hover: none) and (pointer: coarse) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    background: #f4f8ff !important;
  }

  .app-shell {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }

  .app-shell .app-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 950 !important;
  }

  .app-shell .workspace {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10px !important;
    gap: 12px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .app-shell .workspace > .library {
    order: 1 !important;
  }

  .app-shell .workspace > .research-drawer {
    order: 2 !important;
  }

  .app-shell .workspace > .info-viewer {
    order: 3 !important;
  }

  .app-shell .workspace > .viewer {
    order: 4 !important;
  }

  .app-shell .workspace > .library,
  .app-shell .workspace > .research-drawer,
  .app-shell .workspace > .info-viewer,
  .app-shell .workspace > .viewer,
  .app-shell .workspace > .library > .library-header,
  .app-shell .workspace > .research-drawer > .panel-section,
  .app-shell .workspace > .info-viewer > .info-viewer-panel {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .app-shell .workspace > .library,
  .app-shell .workspace > .research-drawer,
  .app-shell .workspace > .info-viewer,
  .app-shell .workspace > .viewer,
  .app-shell .workspace-lower-row > .actual-record-comparison,
  .app-shell .workspace-lower-row > #documentArchiveSection {
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(16, 60, 120, 0.06) !important;
    scroll-margin-top: 76px !important;
  }

  .app-shell .workspace > .library > .library-header {
    padding: 12px !important;
  }

  .app-shell .workspace > .library > .library-header > .map-panel {
    display: grid !important;
    grid-template-rows: auto auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .app-shell .workspace > .library > .library-header > .map-panel > .map-canvas {
    width: 100% !important;
    height: min(72svh, 640px) !important;
    min-height: 520px !important;
    max-height: 640px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .app-shell .workspace > .library > .library-header > .map-panel.map-focus-mode > .map-canvas {
    height: min(78svh, 700px) !important;
    min-height: 560px !important;
    max-height: 700px !important;
  }

  .app-shell .workspace > .research-drawer .quick-list,
  .app-shell .workspace > .research-drawer .report-category-listing,
  .app-shell .workspace > .info-viewer .building-info-viewer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .app-shell .workspace > .viewer > .document-tools {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
  }

  .app-shell .workspace > .viewer > .document-stage,
  .app-shell .workspace > .viewer > .document-stage.is-scroll-preview {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: min(72svh, 680px) !important;
    min-height: 460px !important;
    max-height: 680px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .app-shell > .workspace-lower-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 10px 24px !important;
    gap: 12px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .app-shell .workspace-lower-row > #documentArchiveSection,
  .app-shell .workspace-lower-row > .actual-record-comparison,
  .app-shell .workspace-lower-row > #documentArchiveSection > .archive-checklist-panel {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .app-shell .archive-scroll-cue {
    display: none !important;
  }

  .app-shell .mobile-app-tabs {
    position: fixed !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 58px !important;
    padding: 6px !important;
    border: 1px solid rgba(169, 199, 241, 0.9) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 16px 40px rgba(19, 78, 156, 0.18) !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
  }

  .app-shell .mobile-app-tabs a {
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 5px 3px !important;
    gap: 2px !important;
    border-radius: 13px !important;
    font-size: 0.68rem !important;
    white-space: nowrap !important;
  }

  .app-shell .mobile-app-tabs .mobile-tab-icon {
    width: 18px !important;
    height: 18px !important;
  }
}

/* 2026-07-23: 건축물정보 주동/부속동 버튼 최종 색상 — 선택 전 흰/검, 선택 후 파랑/흰 */
.app-shell .info-viewer .building-variant-tabs button:not(.is-active) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #d8e4f4 !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

.app-shell .info-viewer .building-variant-tabs button:not(.is-active) strong,
.app-shell .info-viewer .building-variant-tabs button:not(.is-active) span {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

.app-shell .info-viewer .building-variant-tabs button.is-active {
  background: #1f6fe5 !important;
  background-color: #1f6fe5 !important;
  background-image: none !important;
  border-color: #1f6fe5 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.app-shell .info-viewer .building-variant-tabs button.is-active strong,
.app-shell .info-viewer .building-variant-tabs button.is-active span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.app-shell .info-viewer .building-variant-tabs button::before,
.app-shell .info-viewer .building-variant-tabs button::after {
  display: none !important;
  content: none !important;
}