/* Home hero: 잠실 skyline drawn as a fine-line elevation on a calm dusk-blue sky */

.lr-hero.lr-hero--night {
  --lh-amber: #FFD43B;
  min-height: 0;
  padding: 96px 0 300px;
  background-color: var(--lr-dusk-2);
  background-image:
    radial-gradient(ellipse 60% 38% at 60% 100%, rgba(255, 236, 200, 0.16), transparent 75%),
    linear-gradient(180deg, #173a68 0%, #1f4b82 55%, #2a5f9b 100%);
  background-size: auto;
  background-position: 0 0;
  background-repeat: no-repeat;
  color: #fff;
  isolation: isolate;
}

.lr-hero--night::after {
  display: none;
}

.lr-hero--night .lr-hero__content {
  z-index: 2;
}

.lr-hero--night .lr-kicker {
  color: var(--lh-amber);
}

.lr-hero--night .lr-hero-title {
  color: #fff;
}

.lr-hero--night .lr-hero-title span:last-child {
  color: #fff;
}

.lr-hero--night .lr-lead {
  color: rgba(255, 255, 255, 0.94);
}

.lr-hero--night .lr-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
  backdrop-filter: blur(6px);
}

.lr-hero--night .lr-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.lr-hero--night .lr-btn--text {
  color: #fff;
}

.lr-hero--night .lr-btn--text:hover {
  color: var(--lh-amber);
}

/* Facts read as one quiet line separated by hairlines, not pills */
.lr-hero--night .lr-proof-strip {
  gap: 0;
}

.lr-hero--night .lr-proof-strip span {
  padding: 2px 18px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
  background: none;
  color: rgba(255, 255, 255, 0.92);
  box-shadow: none;
  backdrop-filter: none;
}

.lr-hero--night .lr-proof-strip span:first-child {
  padding-left: 0;
  border-left: 0;
}

.lr-hero--night .lr-proof-strip strong {
  color: #fff;
  font-weight: 700;
}

.lr-hero--night .lr-meta {
  color: rgba(255, 255, 255, 0.88);
}

.lr-hero--night .lr-brief-card h2 {
  word-break: keep-all;
}

.lr-hero--night .lr-brief-card {
  background: rgba(14, 40, 76, 0.62);
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Entrance */
.lr-hero--night .lr-hero__content > div > *,
.lr-hero--night .lr-brief-card {
  animation: lh-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.lr-hero--night .lr-hero__content > div > :nth-child(2) { animation-delay: 0.08s; }
.lr-hero--night .lr-hero__content > div > :nth-child(3) { animation-delay: 0.16s; }
.lr-hero--night .lr-hero__content > div > :nth-child(4) { animation-delay: 0.24s; }
.lr-hero--night .lr-hero__content > div > :nth-child(5) { animation-delay: 0.32s; }
.lr-hero--night .lr-hero__content > div > :nth-child(6) { animation-delay: 0.4s; }
.lr-hero--night .lr-brief-card { animation-delay: 0.35s; }

/* Compact night hero (inner pages, no skyline) */
.lr-hero.lr-hero--night.lr-hero--compact {
  padding: 88px 0 72px;
  background-image:
    radial-gradient(ellipse 55% 60% at 88% 100%, rgba(255, 236, 200, 0.14), transparent 72%),
    linear-gradient(160deg, var(--lr-dusk-1) 0%, var(--lr-dusk-2) 60%, var(--lr-dusk-3) 100%);
}

.lr-hero--night.lr-hero--compact h1 {
  color: #fff;
}

.lr-hero--night.lr-hero--compact .lr-hero__card .lr-kicker {
  color: var(--lr-accent-text, #a14a07);
}

.lr-hero--night.lr-hero--compact .lr-hero__card {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 30px 70px rgba(5, 12, 22, 0.45);
}

/* Listing request card */
.lr-hero--night h1 {
  word-break: keep-all;
}

.lr-listing-request {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px 48px;
  padding: 34px 30px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 96% 0%, rgba(255, 236, 200, 0.14), transparent 45%),
    linear-gradient(160deg, var(--lr-dusk-1), var(--lr-dusk-2));
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.lr-listing-request > div {
  display: grid;
  gap: 12px;
}

.lr-listing-request .lr-kicker {
  margin: 0;
  color: var(--lh-amber, #f8c26a);
}

.lr-listing-request h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  line-height: 1.3;
  word-break: keep-all;
}

.lr-listing-request p {
  margin: 0;
  color: rgba(255, 255, 255, 0.94);
  line-height: 1.7;
  word-break: keep-all;
}

.lr-listing-request ul {
  display: grid;
  gap: 8px;
  margin: 4px 0 6px;
  padding: 0;
  list-style: none;
}

.lr-listing-request li {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  color: #fff;
  font-size: 14px;
}

.lr-listing-request li::before {
  content: '';
  flex: 0 0 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lh-amber, #FFD43B);
}

.lr-listing-request .lr-actions {
  margin: 4px 0 0;
}

.lr-listing-request .lr-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* 직방·다방 profile links under the request actions; pending ones are plain text */
.lr-listing-external {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.lr-listing-external p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 700;
}

.lr-listing-external div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lr-listing-external a,
.lr-listing-external span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.lr-listing-external a {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  text-decoration: none;
}

.lr-listing-external a:hover,
.lr-listing-external a:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.lr-listing-external span.is-pending {
  color: rgba(255, 255, 255, 0.82);
  border: 1px dashed rgba(255, 255, 255, 0.35);
}

/* Skyline -------------------------------------------------------- */

.lr-hero-skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 340px;
  pointer-events: none;
}

.lh-ground {
  fill: rgba(16, 42, 78, 0.45);
}

.lh-line {
  fill: none;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

.lh-line--back {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1;
}

.lh-line--front {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.25;
}

.lh-line--joints,
.lh-line--floors {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1;
}

.lh-line--tower {
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.5;
}

.lh-line--seam {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1;
}

.lh-line--horizon {
  stroke: rgba(255, 236, 200, 0.45);
  stroke-width: 1;
}

.lh-beacon {
  fill: var(--lr-yellow, #FFC20E);
}

.lh-beacon-halo {
  fill: rgba(255, 194, 14, 0.18);
}

/* One orchestrated moment: the elevation draws itself once on load */
.lh-line--back,
.lh-line--front,
.lh-line--tower {
  stroke-dasharray: 1;
  animation: lrc-draw 2.6s cubic-bezier(0.45, 0, 0.2, 1) both;
}

.lh-line--front { animation-delay: 0.25s; }
.lh-line--tower { animation-delay: 0.6s; animation-duration: 1.8s; }

.lh-line--joints,
.lh-line--floors,
.lh-line--seam,
.lh-beacon,
.lh-beacon-halo {
  animation: lh-fade 1.2s ease-out 1.6s both;
}

/* Mobile --------------------------------------------------------- */

@media (max-width: 768px) {
  .lr-hero.lr-hero--night {
    padding: 88px 20px 190px !important;
    background-color: var(--lr-dusk-2) !important;
    background-image:
      radial-gradient(ellipse 100% 26% at 60% 100%, rgba(255, 236, 200, 0.16), transparent 75%),
      linear-gradient(180deg, #173a68 0%, #1f4b82 55%, #2a5f9b 100%) !important;
  }

  .lr-hero--night h1,
  .lr-hero--night .lr-hero-title {
    color: #fff !important;
  }

  .lr-hero--night .lr-kicker {
    color: var(--lh-amber) !important;
  }

  .lr-hero--night .lr-lead {
    color: rgba(255, 255, 255, 0.94) !important;
  }

  .lr-hero--night .lr-btn--primary {
    background: var(--lr-yellow, #FFC20E) !important;
    border-color: var(--lr-yellow, #FFC20E) !important;
    color: var(--lr-ink-on-yellow, #13263f) !important;
    box-shadow: 0 10px 28px rgba(255, 194, 14, 0.35) !important;
  }

  .lr-hero--night .lr-btn--ghost {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.32) !important;
    color: #fff !important;
  }

  .lr-hero--night .lr-btn--text {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
  }

  .lr-hero--night .lr-proof-strip span {
    box-sizing: border-box;
    max-width: 100%;
    background: none;
    color: rgba(255, 255, 255, 0.92);
  }

  .lr-hero--night .lr-meta {
    color: rgba(255, 255, 255, 0.88) !important;
  }

  .lr-hero-skyline {
    height: 200px;
  }

  body:has(.lr-hero--night) .lr-header {
    background: var(--lr-dusk-1) !important;
  }

  .lr-hero.lr-hero--night.lr-hero--compact {
    padding: 84px 20px 48px !important;
  }

  .lr-listing-request {
    grid-template-columns: 1fr;
    padding: 28px 22px;
  }
}

/* Report cover art ------------------------------------------------ */

.lr-report-showcase .lr-card--with-cover {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  overflow: hidden;
}

.lr-report-cover {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 24px;
  overflow: hidden;
}

.lr-report-cover svg {
  width: 100%;
  max-width: 260px;
  height: auto;
}

.lr-report-cover--market {
  background:
    radial-gradient(circle at 85% 0%, rgba(255, 236, 200, 0.14), transparent 50%),
    linear-gradient(150deg, var(--lr-dusk-1), var(--lr-dusk-3));
}

.lr-report-cover--dispute {
  background:
    radial-gradient(circle at 15% 85%, rgba(30, 58, 95, 0.12), transparent 55%),
    linear-gradient(150deg, #fff7ed, #fde7c2);
}

.lrc-grid { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
.lrc-bar { fill: rgba(255, 255, 255, 0.16); transform-box: fill-box; transform-origin: bottom; }
.lrc-line { fill: none; stroke: #FFC20E; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.lrc-dot { fill: #FFC20E; transform-box: fill-box; transform-origin: center; }

.lrc-doc { fill: #fff; stroke: rgba(30, 58, 95, 0.12); }
.lrc-doc-line { fill: #e2e8f0; transform-box: fill-box; transform-origin: left; }
.lrc-scale path { fill: none; stroke: #1E3A5F; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.lrc-scale { transform-box: fill-box; transform-origin: 50% 10%; }
.lrc-check { fill: none; stroke: #d97706; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }

.lr-report-cover .lrc-bar { animation: lrc-grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.lr-report-cover .lrc-bar:nth-of-type(2) { animation-delay: 0.08s; }
.lr-report-cover .lrc-bar:nth-of-type(3) { animation-delay: 0.16s; }
.lr-report-cover .lrc-bar:nth-of-type(4) { animation-delay: 0.24s; }
.lr-report-cover .lrc-bar:nth-of-type(5) { animation-delay: 0.32s; }
.lr-report-cover .lrc-line { animation: lrc-draw 1.4s ease-in-out 0.4s both; }
.lr-report-cover .lrc-dot { animation: lrc-pulse 2.4s ease-in-out 1.8s infinite; }
.lr-report-cover .lrc-doc-line { animation: lrc-grow-x 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.lr-report-cover .lrc-scale { animation: lrc-tilt 4s ease-in-out infinite; }
.lr-report-cover .lrc-check { animation: lrc-draw 0.8s ease-out 0.6s both; }

@media (max-width: 768px) {
  .lr-report-showcase .lr-card--with-cover {
    grid-template-columns: 1fr;
  }

  .lr-report-cover {
    min-height: 150px;
    padding: 18px;
  }

  .lr-report-cover svg {
    max-width: 200px;
  }
}

/* Weekly official change chart ---------------------------------- */

.lr-weekly {
  --lw-up: #d97706;
  --lw-down: #2f6db5;
  --lw-name: 84px;
  --lw-value: 64px;
  --lw-gap: 12px;
}

.lr-weekly .lr-stats-card__intro h2 {
  word-break: keep-all;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.lr-weekly__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
}

.lr-weekly__legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.lr-weekly__legend li::before {
  display: none;
}

.lr-weekly__key {
  width: 14px;
  height: 10px;
  border-radius: 3px;
}

.lr-weekly__key.is-up { background: var(--lw-up); }
.lr-weekly__key.is-down { background: var(--lw-down); }
.lr-weekly__key.is-prev { width: 2px; height: 14px; border-radius: 1px; background: #0f172a; }

.lr-weekly__chart {
  margin: 0;
  padding: 22px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(30, 58, 95, 0.08);
}

.lr-weekly__caption {
  margin-bottom: 14px;
  color: var(--lr-muted, #5b6578);
  font-size: 13px;
  font-weight: 600;
}

.lr-weekly__rows {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lr-weekly__row {
  position: relative;
  display: grid;
  grid-template-columns: var(--lw-name) minmax(0, 1fr) var(--lw-value);
  gap: var(--lw-gap);
  align-items: center;
  margin: 0;
  padding: 7px 8px;
  border-radius: 10px;
  outline: none;
  transition: background 0.2s ease;
}

.lr-weekly__row::before {
  display: none;
}

.lr-weekly__row:hover,
.lr-weekly__row:focus-visible,
.lr-weekly__row.is-focus {
  background: #fff7ed;
}

.lr-weekly__row:focus-visible {
  box-shadow: 0 0 0 2px var(--lr-primary, #d97706);
}

.lr-weekly__name {
  display: grid;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.lr-weekly__name em {
  color: var(--lr-primary-strong, #b45309);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.lr-weekly__track {
  position: relative;
  height: 22px;
}

.lr-weekly__track::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: #cbd5e1;
}

.lr-weekly__bar {
  position: absolute;
  top: 4px;
  height: 14px;
  width: var(--w);
}

.is-up .lr-weekly__bar {
  left: 50%;
  border-radius: 0 4px 4px 0;
  background: var(--lw-up);
  transform-origin: left center;
}

.is-down .lr-weekly__bar {
  right: 50%;
  border-radius: 4px 0 0 4px;
  background: var(--lw-down);
  transform-origin: right center;
}

.lr-weekly__prev {
  position: absolute;
  top: 0;
  width: 2px;
  height: 22px;
  margin-left: -1px;
  border-radius: 1px;
  background: #0f172a;
  box-shadow: 0 0 0 2px #fff;
}

.lr-weekly__value {
  color: #0f172a;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.lr-weekly__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 2px);
  z-index: 3;
  padding: 6px 10px;
  border-radius: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.lr-weekly__row:hover .lr-weekly__tip,
.lr-weekly__row:focus-visible .lr-weekly__tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.lr-weekly__axis {
  display: flex;
  justify-content: space-between;
  margin: 8px calc(var(--lw-value) + var(--lw-gap) + 8px) 0 calc(var(--lw-name) + var(--lw-gap) + 8px);
  color: #64748b;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.lr-weekly__axis span:nth-child(1) { transform: translateX(-50%); }
.lr-weekly__axis span:nth-child(3) { transform: translateX(50%); }

.lr-source-note a {
  color: inherit;
  text-decoration: underline;
}

@supports (animation-timeline: view()) {
  .lr-weekly__bar {
    animation: lw-bar linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 40%;
  }
}

@media (max-width: 768px) {
  .lr-weekly {
    --lw-name: 64px;
    --lw-value: 56px;
    --lw-gap: 8px;
  }

  .lr-weekly__chart {
    padding: 16px 10px;
  }
}

/* Section reveal (scroll-driven; browsers without support show content as-is) */

@supports (animation-timeline: view()) {
  main > .lr-section:not(.lr-hero) > .lr-container,
  main > .lr-home-intro > .lr-container {
    animation: lh-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lr-hero--night *,
  .lr-hero-skyline *,
  main > .lr-section > .lr-container,
  main > .lr-home-intro > .lr-container,
  .lr-report-cover *,
  .lr-weekly__bar {
    animation: none !important;
  }
}

@keyframes lh-rise {
  from { opacity: 0; transform: translateY(18px); }
}

@keyframes lh-reveal {
  from { opacity: 0; transform: translateY(40px); }
}

@keyframes lw-bar {
  from { transform: scaleX(0); }
}

@keyframes lrc-grow {
  from { transform: scaleY(0); }
}

@keyframes lrc-grow-x {
  from { transform: scaleX(0); }
}

@keyframes lrc-draw {
  from { stroke-dashoffset: 1; }
}

@keyframes lrc-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}

@keyframes lrc-tilt {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

@keyframes lh-fade {
  from { opacity: 0; }
}

/* The self-serve tools share one quiet dusk band instead of stacked navy cards */
.lr-home-tools {
  color: #fff;
  background: linear-gradient(180deg, var(--lr-dusk-1) 0%, #183d6c 100%);
}

.lr-home-tools h2 {
  max-width: 44rem;
  margin: 0 0 36px;
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  word-break: keep-all;
}

.lr-home-tools__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.lr-home-tools__grid article {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 30px 40px 6px 0;
}

.lr-home-tools__grid article + article {
  padding: 30px 40px 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.lr-home-tools__grid article:last-child {
  padding-right: 0;
}

.lr-home-tools h3 {
  margin: 0;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.4;
  word-break: keep-all;
}

.lr-home-tools p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  line-height: 1.75;
  word-break: keep-all;
}

.lr-home-tools .lr-actions {
  align-items: center;
  margin-top: 8px;
}

.lr-home-tools .lr-link {
  color: #fff;
}

@media (max-width: 768px) {
  .lr-home-tools__grid {
    grid-template-columns: 1fr;
  }

  .lr-home-tools__grid article,
  .lr-home-tools__grid article + article,
  .lr-home-tools__grid article:last-child {
    padding: 26px 0;
    border-left: 0;
  }

  .lr-home-tools__grid article + article {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
  }
}