/* Hallmark · shape: Feature Stack · genre: editorial · theme: brand · redesign: full · draw: 28aceb
 * paper: oklch(98.0% 0.024 88) · accent: oklch(52.9% 0.106 154) · display: Hahmlet · body: Gothic A1 · hero: Ledge · nav: edge-aligned · footer: letter close · signature: the listing ledger, prices set large beside a held filter pane
 * axes: warm-ivory/korean-serif/spring-green · posture: quiet · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V3 · weakest: V, one example photo per type repeats across rows; kept small beside large prices so type carries the page */
/* answered 23: section heads stay in the brand green, as the company brief sets green for titles */
/* waive 8: the kept content order changes only by moving listings up, the visitor's job */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --pane-top: calc(var(--notice-height) + var(--space-lg));
  --notice-height: 40px;
}

h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; min-width: 0; word-break: keep-all; }
body { word-break: keep-all; overflow-wrap: break-word; }
[id] { scroll-margin-top: calc(var(--notice-height) + var(--space-md)); }

/* Always-visible notice */
.notice {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

/* Nav */
.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-lg);
  padding-block: var(--space-xs);
}
.logo {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  text-decoration: none;
}
.site-nav { display: flex; gap: var(--space-md); }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-md);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--color-accent); text-decoration: underline; }
.site-nav a:active { color: var(--color-ink-2); }

/* Hero: a tall field of the neighbourhood, the head resting on a ledge below */
.hero {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: calc(100svh - 116px);
}
.hero-field { position: relative; min-height: 240px; overflow: hidden; background: var(--color-paper-3); }
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 70%;
}
.hero-credit, .photo-note {
  position: absolute;
  background: var(--color-veil);
  color: var(--color-paper);
  font-size: var(--text-xs);
  line-height: 1.4;
  border-radius: var(--radius-card);
}
.hero-credit { right: var(--space-sm); bottom: var(--space-sm); padding: var(--space-2xs) var(--space-xs); }
.ledge {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: var(--space-lg) var(--gap-columns);
  padding-block: var(--space-lg);
}
.hero h1 { max-width: none; font-size: var(--text-display-s); line-height: 1.16; color: var(--color-ink); }
.hero h1 span { display: block; }
.ledge .lead { font-size: var(--text-lg); line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-md); }
.hero-tag { font-size: var(--text-sm); font-weight: 700; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-xs) var(--space-lg);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border: 0;
  border-radius: var(--radius-card);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.button:hover { background: var(--color-accent-deep); }
.button:active { transform: translateY(1px); }
.button:disabled { background: var(--color-rule); color: var(--color-muted); cursor: not-allowed; }

/* Listings: a held filter pane beside the ledger */
.listings {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--gap-columns);
  align-items: start;
  padding-block: var(--section-gap-s);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.pane { position: sticky; top: var(--pane-top); }
.pane h2 { color: var(--color-accent); font-size: var(--text-section); line-height: 1.2; }
.pane-note { margin-top: var(--space-md); color: var(--color-muted); }
.filters { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.filter-name { display: block; margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip {
  min-height: 44px;
  min-width: 56px;
  padding: var(--space-xs) var(--space-md);
  background: transparent;
  color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-muted);
  border-radius: var(--radius-card);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.chip:hover { border-color: var(--color-accent); background: var(--color-paper-2); }
.chip:active { background: var(--color-sprout); }
.chip:disabled { color: var(--color-muted); border-color: var(--color-rule); cursor: not-allowed; }
.chip[aria-pressed="true"] {
  background: var(--color-sprout);
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
  font-weight: 700;
}
.result-count { margin-top: var(--space-md); font-size: var(--text-sm); font-weight: 500; }

.card {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.card:first-child { padding-top: 0; border-top: 0; }
.photo { position: relative; align-self: start; }
.photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-card); }
.photo-note { left: var(--space-xs); bottom: var(--space-xs); padding: var(--space-3xs) var(--space-xs); }
.card-head { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); }
.deal { padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; }
.card[data-deal="전세"] .deal { background: var(--color-sprout); color: var(--color-ink); }
.card[data-deal="월세"] .deal { background: var(--color-ink); color: var(--color-paper); }
.card-kind { color: var(--color-muted); font-weight: 500; }
.price { margin-top: var(--space-xs); }
.price small { display: block; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.4; }
.price b {
  display: block;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.25;
}
.card h3 { margin-top: var(--space-sm); color: var(--color-accent); font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.35; }
.feature { margin-top: var(--space-2xs); }
.facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-md);
  margin: var(--space-sm) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.facts dt { color: var(--color-muted); }
.facts dd { margin: 0; }
.card-foot { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); line-height: 1.5; }
.empty { padding: var(--space-2xl) var(--space-lg); border-block: var(--rule-hair) solid var(--color-rule); text-align: center; }
.empty p { margin: 0 auto var(--space-md); }

/* About */
.about { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); padding-block: var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-rule); }
.about h2, .info h2 { color: var(--color-accent); font-size: var(--text-title); line-height: 1.3; }
.about-lead { font-size: var(--text-lg); line-height: 1.6; max-width: 40em; }
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-xl); }
.about-grid h3 { padding-bottom: var(--space-xs); border-bottom: 2px solid var(--color-accent); font-size: var(--text-md); font-family: var(--font-body); }
.about-grid ul { margin: 0; padding: 0; list-style: none; }
.point { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.point strong, .point span { display: block; }
.point span { margin-top: var(--space-2xs); color: var(--color-muted); }

/* Visit and contact */
.info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); padding-block: var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-rule); }
.info-note { margin-top: var(--space-sm); color: var(--color-muted); }
.rows { margin: var(--space-md) 0 0; }
.rows > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.rows dt { font-weight: 700; }
.rows dd { margin: 0; }
.rows small { display: block; margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }
.hours span { display: block; }

/* Footer: a letter close */
.letter { background: var(--color-sprout); }
.letter-body { padding-block: var(--section-gap-s); }
.letter blockquote { max-width: 34em; margin: 0; font-family: var(--font-display); font-size: var(--text-title); font-weight: 500; line-height: 1.7; }
.letter p { margin-top: var(--space-md); font-size: var(--text-sm); font-weight: 500; }
.site-foot { padding-block: var(--space-2xl); background: var(--color-ink); color: var(--color-paper); }
.foot-notice { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.4; }
.foot-all { margin-top: var(--space-xs); max-width: 44em; }
.foot-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-xs) var(--gap-columns); margin: var(--space-lg) 0 0; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-ink-2); font-size: var(--text-sm); line-height: 1.6; }
.foot-info div { display: flex; flex-wrap: wrap; gap: 0 var(--space-xs); }
.foot-info dt { font-weight: 700; }
.foot-info dd { margin: 0; }

@media (max-width: 60rem) {
  .listings, .about, .info, .ledge { grid-template-columns: minmax(0, 1fr); }
  .pane { position: static; }
  .hero { min-height: calc(100svh - 150px); }
}
@media (max-width: 40rem) {
  .card, .about-grid { grid-template-columns: minmax(0, 1fr); }
  .card { gap: var(--space-sm); }
  .site-nav { gap: var(--space-sm); }
  .site-nav a { font-size: var(--text-sm); }
  .hero { min-height: 0; grid-template-rows: 300px auto; }
}