/* SpaceBridge V58 candidate — one clear action path, compact mobile form, no production publish. */
:root {
  --sb58-ink: #16233a;
  --sb58-copy: #526a7c;
  --sb58-blue: #075f9c;
  --sb58-blue-dark: #075f96;
  --sb58-mint: #0a8b75;
  --sb58-line: #d7e3ea;
  --sb58-canvas: #f5fafc;
  --sb58-soft: #f5fafc;
  --sb58-ease: cubic-bezier(.22, 1, .36, 1);
}

html body.sb-v58 { color: var(--sb58-ink); background: #fff; }

/* The homepage explains one journey once: choose → receive a sheet → request consultation. */
html body.sb-v58 .sb45-journey {
  width: min(1200px, calc(100% - 40px));
  margin: 24px auto 0;
  border: 1px solid var(--sb58-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-m);
}
html body.sb-v58 .sb45-journey ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body.sb-v58 .sb45-journey li {
  position: relative;
  min-height: 82px;
  padding: 16px 24px;
  border-right: 1px solid var(--sb58-line);
}
html body.sb-v58 .sb45-journey li:last-child { border-right: 0; }
html body.sb-v58 .sb45-journey li:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -13px;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sb58-line);
  border-radius: 50%;
  background: #fff;
  color: var(--sb58-blue-dark);
  transform: translateY(-50%);
}
html body.sb-v58 .sb45-journey b { color: var(--sb58-blue-dark); }

/* Core tool follows situation selection. The former duplicate process section is removed. */
html body.sb-v58 .condition-lab { background: var(--sb58-canvas) !important; }
html body.sb-v58 .categories { background: #fff !important; }
html body.sb-v58 .section.process { display: none !important; }
html body.sb-v58 .sb58-condition-intro {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--sb58-line);
  background: #fff;
}
html body.sb-v58 .sb58-condition-intro b { font-size: 15px; }
html body.sb-v58 .sb58-condition-intro span { color: var(--sb58-copy); font-size: 13px; }
html body.sb-v58 .sb56-condition-guide { border-bottom: 1px solid var(--sb58-line); }
html body.sb-v58 .sb56-condition-guide li.is-current {
  background: var(--sb58-soft);
  box-shadow: inset 0 -3px 0 var(--sb58-blue);
}
.sb58-step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}
.sb58-step-actions button {
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid #bfd3df;
  border-radius: 12px;
  background: #fff;
  color: var(--sb58-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.sb58-step-actions .sb58-next {
  border-color: var(--sb58-blue);
  background: var(--sb58-blue);
  color: #fff;
}
html body.sb-v58 .condition-sheet { scroll-margin-top: 100px; }

/* Category discovery stays visible: no 2,556px blind horizontal rail on tablet/mobile. */
@media (max-width: 900px) {
  html body.sb-v58 .sb46-category-switcher {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  html body.sb-v58 .sb46-category-switcher button {
    width: 100%;
    min-height: 48px;
    margin: 0 !important;
    white-space: normal;
    text-align: left;
  }
  html body.sb-v58 .sb46-category-stage { grid-template-columns: 1fr !important; }
  html body.sb-v58 .category-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    gap: 12px !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }
  html body.sb-v58 .category-grid .service-card {
    min-width: 0 !important;
    width: auto !important;
  }
  html body.sb-v58 .category-grid .service-card figure { aspect-ratio: 16 / 10; }
  html body.sb-v58 .category-grid .service-body { padding: 16px 14px; }
  html body.sb-v58 .category-grid .service-body h3 { font-size: clamp(16px, 2.7vw, 20px); }
  html body.sb-v58 .category-grid .service-body p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12px;
  }
  html body.sb-v58 .category-grid .scope-list { gap: 5px; }
  html body.sb-v58 .category-grid .scope-list span { padding: 5px 7px; font-size: 12px; }
}

@media (max-width: 520px) {
  html body.sb-v58 .category-grid .scope-list { display: none; }
  html body.sb-v58 .category-grid .service-body { min-height: 184px; }
  html body.sb-v58 .category-grid .service-links { margin-top: auto; }
  html body.sb-v58 .category-grid .service-links a { width: 100%; min-height: 44px; justify-content: center; }
}

/* V59 좌표 안정화: 상황을 바꿔도 컨테이너는 고정하고 글자만 교체한다. */
html body.sb-v58 .situation-panel {
  block-size: 456px;
  min-block-size: 456px;
  max-block-size: 456px;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  grid-template-rows: minmax(0, 1fr);
}
html body.sb-v58 .situation-content {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: auto;
  align-self: stretch;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 24px 12px 128px 108px 59px;
  align-content: start;
  padding: 24px 44px 116px;
  overflow: hidden;
}
html body.sb-v58 .situation-content #situation-kicker {
  grid-row: 1;
  height: 24px;
  margin: 0;
  overflow: hidden;
}
html body.sb-v58 .situation-content #situation-heading {
  grid-row: 3;
  height: 128px;
  margin: 0;
  overflow: hidden;
}
html body.sb-v58 .situation-content #situation-copy {
  grid-row: 4;
  height: 108px;
  margin: 0;
  overflow: hidden;
}
html body.sb-v58 .situation-content #situation-route {
  grid-row: 5;
  height: 59px;
  margin: 0;
  overflow: hidden;
}
/* 문장 길이가 달라도 상담요청의 좌표는 바뀌지 않는다. */
html body.sb-v58 .situation-content #situation-cta {
  position: absolute;
  left: 44px;
  bottom: 44px;
  margin: 0;
}
html body.sb-v58 .situation-photo {
  position: relative;
  min-height: 0 !important;
  height: auto;
  align-self: stretch;
  box-sizing: border-box;
  isolation: isolate;
  background: #f5fafc;
}
html body.sb-v58 .situation-photo::before {
  content: none;
}
html body.sb-v58 .situation-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: 12% center;
}

/* 첫 화면 인물의 얼굴을 프레임 안전영역 안에 고정한다. */
html body.sb-v58 .hero-visual img {
  object-position: 69% 44%;
  transform-origin: 69% 44%;
}

/* 8개 분야는 8:5 프레임을 공유하고 각 장면의 중심만 개별 보정한다. */
html body.sb-v58 .category-grid .service-card figure {
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5 !important;
}
html body.sb-v58 .category-grid .service-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html body.sb-v58 #service-interior figure img { object-position: 48% 44%; transform-origin: 48% 44%; }
html body.sb-v58 #service-pos figure img { object-position: 52% 42%; transform-origin: 52% 42%; }
html body.sb-v58 #service-tax figure img { object-position: 47% 45%; transform-origin: 47% 45%; }
html body.sb-v58 #service-accounting figure img { object-position: 54% 43%; transform-origin: 54% 43%; }
html body.sb-v58 #service-insurance figure img { object-position: 46% 46%; transform-origin: 46% 46%; }
html body.sb-v58 #service-realestate figure img { object-position: 51% 45%; transform-origin: 51% 45%; }
html body.sb-v58 #service-website figure img { object-position: 49% 44%; transform-origin: 49% 44%; }
html body.sb-v58 #service-app figure img { object-position: 53% 43%; transform-origin: 53% 43%; }

@media (max-width: 1023px) {
  html body.sb-v58 .situation-panel {
    block-size: 432px;
    min-block-size: 432px;
    max-block-size: 432px;
  }
  html body.sb-v58 .situation-content {
    grid-template-rows: 24px 12px 66px 108px 59px;
    padding-top: 24px;
  }
  html body.sb-v58 .situation-content #situation-heading { height: 66px; }
  html body.sb-v58 .hero-visual img {
    object-position: 50% 35%;
    transform-origin: 50% 35%;
  }
}

@media (max-width: 700px) {
  html body.sb-v58 .situation-panel {
    block-size: 574px;
    min-block-size: 574px;
    max-block-size: 574px;
    grid-template-columns: 1fr;
    grid-template-rows: 218px 354px;
  }
  html body.sb-v58 .situation-photo {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }
  html body.sb-v58 .situation-content {
    height: auto;
    min-height: 0;
    grid-template-rows: 24px 12px 66px 76px 26px;
    padding: 24px 22px 94px;
    overflow: hidden;
  }
  html body.sb-v58 .situation-content #situation-heading { height: 66px; }
  html body.sb-v58 .situation-content #situation-copy { height: 76px; }
  html body.sb-v58 .situation-content #situation-route { height: 26px; }
  html body.sb-v58 .situation-content #situation-cta {
    left: 22px;
    bottom: 28px;
  }
}

/* Keep the selected service when a visitor arrives from a service guide. */
.sb58-prefill-notice {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #b9d8e6;
  border-radius: 12px;
  background: #edf8fc;
  color: #234b63;
  font-size: 13px;
  font-weight: 700;
}

/* Desktop keeps a compact utility rail; consultation content never reserves page width. */
html body.sb-v50.sb-v56.sb-v58.sb-v53-quick-dock { padding-right: 0 !important; }
html body.sb-v50.sb-v56.sb-v58.sb-v53-quick-dock.sb58-dock-suppressed .sb-contact-dock,
html body.sb-v50.sb-v56.sb-v58.sb-v53-quick-dock.sb-v53-dock-suppressed .sb-contact-dock {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px) !important;
}
html body.sb-v58 .sb-contact-dock { transition: opacity .18s ease, transform .18s ease, width .22s ease !important; }

@media (max-width: 900px) {
  html body.sb-v58 { padding-right: 0 !important; padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
  html body.sb-v58 .sb45-journey { width: calc(100% - 28px); margin-top: 14px; }
  html body.sb-v58 .sb45-journey ol { grid-template-columns: 1fr; }
  html body.sb-v58 .sb45-journey li {
    min-height: 68px;
    padding: 14px 20px 14px 58px;
    border-right: 0;
    border-bottom: 1px solid var(--sb58-line);
  }
  html body.sb-v58 .sb45-journey li:last-child { border-bottom: 0; }
  html body.sb-v58 .sb45-journey li b { position: absolute; left: 18px; top: 22px; }
  html body.sb-v58 .sb45-journey li:not(:last-child)::after {
    top: auto;
    right: 18px;
    bottom: -13px;
    content: "↓";
    transform: none;
  }

  html body.sb-v58 .condition-builder { overflow: visible; }
  html body.sb-v58 .sb58-condition-intro { display: grid; padding: 16px; }
  html body.sb-v58 .sb58-condition-intro span { line-height: 1.55; }
  html body.sb-v58 .sb56-condition-guide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: sticky;
    top: 70px;
    z-index: 5;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(10px);
  }
  html body.sb-v58 .sb56-condition-guide li {
    min-height: 64px;
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 3px 8px;
    padding: 12px 8px;
    border-top: 0;
    border-left: 1px solid var(--sb58-line);
  }
  html body.sb-v58 .sb56-condition-guide li:first-child { border-left: 0; }
  html body.sb-v58 .sb56-condition-guide li:not(:last-child)::after { display: none; }
  html body.sb-v58 .sb56-condition-guide li span { grid-row: 1 / 3; }
  html body.sb-v58 .sb56-condition-guide li b { align-self: end; font-size: 12px; white-space: nowrap; }
  html body.sb-v58 .sb56-condition-guide li small { font-size: 12px; white-space: nowrap; }
  html body.sb-v58 .condition-controls { padding: 14px !important; }
  html body.sb-v58 .condition-step { display: none; margin: 0 !important; }
  html body.sb-v58 .condition-step.is-sb58-active { display: block; animation: sb58-step-in .28s var(--sb58-ease) both; }
  html body.sb-v58 .condition-sheet { display: none; }
  html body.sb-v58 .condition-builder.sb58-sheet-ready .condition-sheet { display: block; animation: sb58-step-in .3s var(--sb58-ease) both; }
  html body.sb-v58 .condition-options { grid-template-columns: 1fr !important; }
  html body.sb-v58 .condition-option { min-height: 50px; text-align: left; }
  html body.sb-v58 .condition-inline { grid-template-columns: 1fr !important; }
  .sb58-step-actions { justify-content: stretch; }
  .sb58-step-actions button { flex: 1; min-height: 50px; }

  html body.sb-v50.sb-v56.sb-v58.sb-v53-quick-dock .sb-contact-dock,
  html body.sb-v50.sb-v56.sb-v58.sb-v53-quick-dock.sb-v53-dock-suppressed .sb-contact-dock {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: calc(100dvh - 92px);
    padding: 6px !important;
    overflow-y: auto;
    border-radius: 16px !important;
  }
  html body.sb-v50.sb-v56.sb-v58.sb-v53-quick-dock.sb56-quick-open .sb-contact-dock {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
  }
  html body.sb-v58 .sb56-quick-toggle,
  html body.sb-v58.sb56-quick-open .sb56-quick-toggle {
    min-height: 56px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 6px 8px;
    text-align: left;
  }
  html body.sb-v58 .sb56-quick-toggle > span:nth-child(2) { align-items: flex-start; }
  html body.sb-v58 .sb56-quick-toggle b {
    writing-mode: horizontal-tb;
    letter-spacing: normal;
    font-size: 14px;
  }
  html body.sb-v58 .sb56-quick-toggle small { display: block; font-size: 12px; }
  html body.sb-v58 .sb56-quick-toggle em {
    min-height: 44px;
    display: inline-flex;
    justify-content: center;
    padding-inline: 14px;
  }
  html body.sb-v58 .sb56-quick-panel { max-height: 66dvh; }
}

@keyframes sb58-step-in {
  from { opacity: 0; transform: translateX(10px); }
}

@media (prefers-reduced-motion: reduce) {
  html body.sb-v58 *,
  html body.sb-v58 *::before,
  html body.sb-v58 *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}