/* TodayHousePrice 2026 final design layer
   Source of truth: /DESIGN.md
   Goal: calm data density, consistent hierarchy, accessible interaction. */

:root{
  --thp-canvas:#f6f7f9;
  --thp-surface:#fff;
  --thp-surface-subtle:#fafbfc;
  --thp-text:#17232d;
  --thp-text-2:#61717e;
  --thp-text-3:#8a98a3;
  --thp-border:#dde4e9;
  --thp-border-strong:#c8d3da;
  --thp-primary:#236a8e;
  --thp-primary-hover:#1b5878;
  --thp-primary-soft:#eaf3f7;
  --thp-success:#147a55;
  --thp-success-soft:#edf8f2;
  --thp-danger:#c34b58;
  --thp-danger-soft:#fff1f3;
  --thp-warning:#956f1d;
  --thp-warning-soft:#fff8e7;
  --thp-focus:#2e7fa6;
  --thp-radius-sm:8px;
  --thp-radius-md:12px;
  --thp-radius-lg:16px;
  --thp-shadow-float:0 14px 38px rgba(22,43,57,.14);

  /* Bridge legacy tokens to the current system. */
  --bg:var(--thp-canvas);
  --surface:var(--thp-surface);
  --surface-soft:var(--thp-surface-subtle);
  --text:var(--thp-text);
  --muted:var(--thp-text-2);
  --line:var(--thp-border);
  --line-strong:var(--thp-border-strong);
  --brand:var(--thp-primary);
  --brand-dark:var(--thp-primary-hover);
  --brand-soft:var(--thp-primary-soft);
  --accent:var(--thp-success);
  --danger:var(--thp-danger);
  --radius:var(--thp-radius-md);
  --radius-sm:var(--thp-radius-sm);

  --app-bg:var(--thp-canvas);
  --app-card:var(--thp-surface);
  --app-line:var(--thp-border);
  --app-ink:var(--thp-text);
  --app-muted:var(--thp-text-2);
  --app-brand:var(--thp-primary);
  --app-brand-2:#377f9f;
  --app-soft:var(--thp-primary-soft);
  --app-up:var(--thp-success);
  --app-down:var(--thp-danger);
  --app-radius:var(--thp-radius-lg);
  --app-shadow:0 1px 2px rgba(22,43,57,.03);
}

html{
  background:var(--thp-canvas);
  color:var(--thp-text);
  scroll-behavior:smooth;
}

body{
  color:var(--thp-text);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
}

html:not([data-page="apart_map_smart"]) body:not(.auth-page){
  background:var(--thp-canvas)!important;
}

button,input,select,textarea{font:inherit}
button,a,input,select,textarea{ -webkit-tap-highlight-color:transparent }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid color-mix(in srgb,var(--thp-focus) 34%,transparent)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 1px var(--thp-focus)!important;
}

:where(.price,.money,[class*="price"],[class*="amount"],[class*="metric"],[class*="stat"],td,th){
  font-variant-numeric:tabular-nums;
}

/* Content hierarchy: fewer decorative effects, clearer grouping. */
.page-hero,
.stats-hero,
.detail-home-hero,
.week-hero,
.smart-hero,
.radar-hero,
.opportunity-hero{
  border:1px solid var(--thp-border)!important;
  border-radius:var(--thp-radius-lg)!important;
  background:var(--thp-surface)!important;
  box-shadow:none!important;
}

.page-hero::before,
.page-hero::after,
.stats-hero::before,
.stats-hero::after{
  opacity:.22!important;
}

.page-hero h1,
.stats-hero h1,
.detail-home-hero h1{
  color:var(--thp-text)!important;
  font-weight:850!important;
  letter-spacing:-.045em!important;
}

.page-lead,
.page-hero p,
.stats-hero p{
  color:var(--thp-text-2)!important;
}

/* Shared panels */
.smart-section,
.smart-compare-box,
.query-panel,
.filter-panel,
.map-viewport-panel,
.detail-analysis,
.detail-checklist-card,
.detail-facts-card,
.detail-permit-card,
.modern-price-chart,
.detail-kb-price-card,
.detail-kb-chart,
.detail-kb-history,
.week-dashboard-page .thp-chart-modern,
.weekly-chart-shell,
.auth-page .jumbotron{
  border-color:var(--thp-border)!important;
  border-radius:var(--thp-radius-md)!important;
  background:var(--thp-surface)!important;
  box-shadow:none!important;
}

.smart-section,
.smart-compare-box,
.detail-analysis,
.detail-checklist-card,
.detail-facts-card,
.detail-permit-card,
.modern-price-chart{
  margin-top:14px!important;
  margin-bottom:14px!important;
}

/* Controls */
:where(
  #box-center input[type="text"],
  #box-center input[type="search"],
  #box-center input[type="number"],
  #box-center input[type="date"],
  #box-center select,
  #box-center textarea,
  .auth-page .form-control
){
  border:1px solid var(--thp-border-strong)!important;
  border-radius:var(--thp-radius-sm)!important;
  background:var(--thp-surface)!important;
  color:var(--thp-text)!important;
  box-shadow:none!important;
}

:where(
  #box-center input[type="text"],
  #box-center input[type="search"],
  #box-center input[type="number"],
  #box-center input[type="date"],
  #box-center select,
  .auth-page .form-control
):focus{
  border-color:var(--thp-focus)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--thp-focus) 14%,transparent)!important;
}

:where(.smart-btn,.detail-more-panel button,.query-panel button,.filter-panel button){
  border-radius:var(--thp-radius-sm)!important;
  box-shadow:none!important;
}

/* Dense data tables */
#box-center table:not(.property-tabs):not(.primary-nav):not(.secondary-nav){
  border-color:var(--thp-border)!important;
  background:var(--thp-surface)!important;
  box-shadow:none!important;
}

#box-center table:not(.property-tabs):not(.primary-nav):not(.secondary-nav) th{
  background:#f4f6f8!important;
  color:#4f606d!important;
  font-weight:800!important;
}

#box-center table:not(.property-tabs):not(.primary-nav):not(.secondary-nav) td{
  border-color:#e7ecef!important;
}

#box-center table:not(.property-tabs):not(.primary-nav):not(.secondary-nav) tbody tr:hover td{
  background:#f9fbfc!important;
}

/* Today's new-deal feed: calmer, flatter, denser. */
.today-deal-section{
  margin-top:14px!important;
  margin-bottom:18px!important;
}

.today-deal-summary{gap:5px!important}
.today-deal-summary__item{
  padding:8px 9px!important;
  border-color:var(--thp-border)!important;
  border-radius:9px!important;
  box-shadow:none!important;
}
.today-deal-summary__item.is-record-high,
.today-deal-summary__item.is-up{
  border-color:#c9e4d7!important;
  background:var(--thp-success-soft)!important;
}
.today-deal-summary__item.is-down{
  border-color:#eed0d5!important;
  background:var(--thp-danger-soft)!important;
}

.today-deal-list{gap:6px!important}
.today-deal-card{
  border-color:var(--thp-border)!important;
  border-radius:var(--thp-radius-md)!important;
  box-shadow:none!important;
  transition:border-color .15s ease,background-color .15s ease!important;
}
.today-deal-card:hover{
  border-color:#bfcdd5!important;
  box-shadow:none!important;
  transform:none!important;
}
.today-deal-card__main>div{
  padding:13px 12px!important;
  border-color:#e8edf0!important;
}
.today-deal-card__title strong{color:#1d607f!important;font-size:14px!important}
.today-deal-card__meta small,
.today-deal-card__price small,
.today-deal-card__compare small,
.today-deal-card__peak>small{color:var(--thp-text-3)!important}
.today-deal-card__price{background:#f8fafb!important}
.today-deal-card__price strong{color:#17384b!important;font-size:19px!important}
.today-deal-card.is-record-high .today-deal-card__price,
.today-deal-card.is-up .today-deal-card__price{
  background:var(--thp-success-soft)!important;
  box-shadow:inset 3px 0 0 #60a980!important;
}
.today-deal-card.is-down .today-deal-card__price,
.today-deal-card.is-record-low .today-deal-card__price{
  background:var(--thp-danger-soft)!important;
  box-shadow:inset 3px 0 0 #d77b85!important;
}
.today-status-badge{min-height:24px!important;padding:0 7px!important}
.today-deal-card__price .trend{border-radius:6px!important}

/* Detail pages */
.apartment-detail-hero,
.property-detail-hero{
  border-radius:var(--thp-radius-lg)!important;
  box-shadow:none!important;
}
.detail-size-picker,
.detail-more-panel,
.property-location-card{
  border-color:var(--thp-border)!important;
  border-radius:var(--thp-radius-md)!important;
  box-shadow:none!important;
}
.detail-size-chip{
  border-radius:9px!important;
  box-shadow:none!important;
}
.detail-size-chip.is-active{
  border-color:var(--thp-primary)!important;
  background:var(--thp-primary-soft)!important;
  box-shadow:inset 0 0 0 1px var(--thp-primary)!important;
}
.detail-more-panel>summary{border-radius:inherit}
.detail-transactions-more{
  border-color:var(--thp-border)!important;
  border-radius:var(--thp-radius-sm)!important;
  background:#f8fafb!important;
}

/* Charts and KPI surfaces */
.detail-permit-summary>div,
.modern-chart-stats>div,
.smart-kpi,
.dashboard-kpi,
.week-kpi,
.supply-card,
.heat-card{
  border-color:var(--thp-border)!important;
  border-radius:10px!important;
  background:var(--thp-surface-subtle)!important;
  box-shadow:none!important;
}

/* Auth surfaces */
.auth-page{
  background:var(--thp-canvas)!important;
  color:var(--thp-text)!important;
}
.auth-page .jumbotron{border-radius:var(--thp-radius-lg)!important}
.auth-page .form-control{min-height:44px!important}
.auth-page .btn.form-control{
  min-height:44px!important;
  border-radius:var(--thp-radius-sm)!important;
  box-shadow:none!important;
}
.auth-page input[type="submit"].btn,
.auth-page button.btn{
  background:var(--thp-primary)!important;
  border-color:var(--thp-primary)!important;
  color:#fff!important;
}

/* Bottom nav / drawer are product navigation, not decoration. */
.mobile-app-nav{
  border-top-color:var(--thp-border)!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:0 -2px 8px rgba(22,43,57,.045)!important;
}
.mobile-app-nav a.is-active{color:var(--thp-primary)!important}
.mobile-app-nav a.is-active .mobile-app-nav__icon{background:var(--thp-primary-soft)!important}

/* Accessibility and motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

@media(max-width:760px){
  body:not(.map-home-v2){background:var(--thp-canvas)!important}

  :where(
    button,
    input[type="button"],
    input[type="submit"],
    select,
    summary,
    .smart-btn,
    .detail-more-panel button,
    .map-sheet-actions a
  ){min-height:44px}

  :where(
    input[type="text"],
    input[type="search"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    input[type="email"],
    select,
    textarea
  ){font-size:16px!important}

  .page-hero,
  .stats-hero,
  .detail-home-hero{border-radius:14px!important}

  .today-deal-card__main>div{padding:11px 10px!important}
  .today-deal-card__price strong{font-size:18px!important}
  .today-deal-summary__item{min-height:44px!important}

  .today-status-badge{font-size:12px!important}
  .today-deal-card__meta small,
  .today-deal-card__price small,
  .today-deal-card__compare small,
  .today-deal-card__peak>small{font-size:12px!important}
}

@media(max-width:520px){
  .smart-section,
  .smart-compare-box,
  .detail-analysis,
  .detail-checklist-card,
  .detail-facts-card,
  .detail-permit-card,
  .modern-price-chart{border-radius:11px!important}
}


/* App shell: compact, quiet, content-first. */
html:not([data-page="apart_map_smart"]) .site-header-shell{
  position:sticky!important;
  top:0!important;
  z-index:8000!important;
  border-bottom:1px solid var(--thp-border)!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:none!important;
  backdrop-filter:saturate(140%) blur(10px);
}
.site-header-shell{box-shadow:none!important}
.thp-appbar{
  max-width:1320px!important;
  height:56px!important;
  padding-inline:16px!important;
  background:transparent!important;
}
.thp-appbrand strong{
  color:var(--thp-text)!important;
  font-size:18px!important;
  font-weight:850!important;
  letter-spacing:-.045em!important;
}
.thp-appbrand img{border-radius:9px!important}
.thp-menu-btn,
.thp-appbar-search,
#thp-menu-close{
  border:1px solid var(--thp-border)!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#385466!important;
  box-shadow:none!important;
}
.thp-menu-btn:hover,
.thp-appbar-search:hover,
#thp-menu-close:hover{background:#f6f8f9!important}
.thp-asset-switch{
  margin-left:14px!important;
  padding:3px!important;
  border:1px solid var(--thp-border)!important;
  border-radius:10px!important;
  background:#f4f6f7!important;
}
.thp-asset-switch a{
  border-radius:7px!important;
  color:#667783!important;
  font-weight:750!important;
}
.thp-asset-switch a.is-active{
  background:#fff!important;
  color:var(--thp-primary)!important;
  box-shadow:none!important;
}
.thp-app-drawer{
  border-right:1px solid var(--thp-border)!important;
  background:#fff!important;
  box-shadow:12px 0 32px rgba(20,42,56,.13)!important;
}
.thp-drawer-assets{
  border:1px solid var(--thp-border)!important;
  border-radius:10px!important;
  background:#f5f7f8!important;
}
.thp-drawer-assets a{border-radius:7px!important}
.thp-drawer-assets a.is-active{box-shadow:none!important}
.thp-drawer-grid{gap:6px!important}
.thp-drawer-grid a{
  min-height:66px!important;
  border-color:var(--thp-border)!important;
  border-radius:10px!important;
  box-shadow:none!important;
}
.thp-drawer-list{
  border-color:var(--thp-border)!important;
  border-radius:10px!important;
}
.thp-drawer-list a,
.thp-drawer-list .drawer-logout-form button{border-color:#e9edf0!important}
.thp-drawer-market{
  border:1px solid var(--thp-border)!important;
  border-radius:10px!important;
  background:#f7f9fa!important;
}

@media(max-width:760px){
  .thp-appbar{height:54px!important;padding-inline:10px!important}
  .thp-menu-btn,.thp-appbar-search,#thp-menu-close{
    width:44px!important;
    height:44px!important;
  }
  .thp-appbrand strong{font-size:17px!important}
  .mobile-app-nav{min-height:66px!important}
  .mobile-app-nav a{min-height:48px!important}
}

/* Shell geometry token alignment */
:root{--thp-topbar:56px}
@media(max-width:760px){:root{--thp-topbar:54px}}


/* Visual QA polish: keep fixed mobile nav viewport-bound and tighten lookup hero. */
html:not([data-page="apart_map_smart"]) .site-header-shell{
  background:#fff!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.page-hero::after,
.stats-hero::after{display:none!important}
.page-eyebrow,
.panel-eyebrow{color:var(--thp-primary)!important}

.lookup-hero{
  padding:26px clamp(20px,3vw,34px)!important;
}
.lookup-hero h1{
  margin-top:5px!important;
  margin-bottom:8px!important;
  font-size:clamp(28px,3vw,36px)!important;
}
.lookup-hero .search-form{margin:18px 0 0!important}
.lookup-hero #search{
  height:50px!important;
  min-height:50px!important;
  border-radius:10px!important;
  box-shadow:none!important;
}
.lookup-hero>br{display:none!important}
.lookup-hero #livesearch:empty{display:none!important}

@media(max-width:760px){
  .lookup-hero{
    padding:18px 14px 20px!important;
    margin-top:10px!important;
    margin-bottom:12px!important;
  }
  .lookup-hero h1{
    font-size:24px!important;
    line-height:1.24!important;
  }
  .lookup-hero .page-lead{font-size:13px!important}
  .lookup-hero .search-form{margin-top:16px!important}
  .lookup-hero #search{
    height:48px!important;
    min-height:48px!important;
    font-size:16px!important;
  }
}


/* Long feeds: skip paint/layout work for off-screen transaction cards. */
@supports (content-visibility:auto){
  .today-deal-card{
    content-visibility:auto;
    contain-intrinsic-size:auto 94px;
  }
}


/* Legacy specificity guard for lookup search typography. */
html:not([data-page="apart_map_smart"]) #box-center .lookup-hero #search.today-search-input{
  font-size:15px!important;
}
@media(max-width:760px){
  html:not([data-page="apart_map_smart"]) #box-center .lookup-hero #search.today-search-input{
    font-size:16px!important;
  }
}

/* Related external content: news / blog / YouTube */
.related-content-section{margin:18px 0;padding:18px;border:1px solid #dfe8ed;border-radius:18px;background:#fff;box-shadow:0 5px 18px rgba(28,60,78,.04)}
.related-content-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:13px}
.related-content-head span{font-size:12px;font-weight:950;letter-spacing:.12em;color:#267596}
.related-content-head h2{margin:4px 0 2px;color:#173a50;font-size:20px;letter-spacing:-.03em}
.related-content-head p{margin:0;color:#82919a;font-size:12px}
.related-content-head>a,.related-content-head>button{flex:0 0 auto;padding:7px 10px;border:0;border-radius:9px;background:#edf5f8;color:#286f8e;text-decoration:none;font-size:12px;font-weight:900;cursor:pointer;font-family:inherit}.related-content-head>button[hidden]{display:none!important}
.related-content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.related-content-card{display:grid;grid-template-columns:82px minmax(0,1fr);gap:10px;min-height:80px;padding:9px;border:1px solid #e3ebef;border-radius:13px;background:#fbfdfe;text-decoration:none;transition:.15s ease}.related-content-card[hidden]{display:none!important}
.related-content-card:hover{border-color:#cadde6;transform:translateY(-1px);box-shadow:0 5px 12px rgba(29,66,87,.06)}
.related-content-thumb,.related-content-type-icon{display:flex;align-items:center;justify-content:center;width:82px;height:62px;overflow:hidden;border-radius:9px;background:#edf4f7;color:#257191;font-size:21px;font-weight:950}
.related-content-thumb img{width:100%;height:100%;object-fit:cover}

.related-content-visual{position:relative;overflow:hidden}
.related-content-visual>i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:22px;font-weight:950;z-index:1}
.related-content-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;background:#fff}
.related-content-visual.is-news{background:#eef4fb;color:#2b668f}
.related-content-visual.is-blog{background:#eef8f3;color:#24805e}
.related-content-visual.is-youtube{background:#fff1f1;color:#c63c3c}
.related-content-copy{display:flex;flex-direction:column;min-width:0}
.related-content-copy em{font-size:12px;font-style:normal;font-weight:900;color:#2b7898;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.related-content-copy b{margin:4px 0;color:#173a50;font-size:12px;line-height:1.42;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.related-content-copy small{margin-top:auto;color:#8a9aa4;font-size:12px}
.related-content-empty{padding:24px;border:1px dashed #d9e4e9;border-radius:12px;background:#fafcfd;color:#82929c;text-align:center;font-size:12px}
@media(max-width:760px){
  .related-content-section{padding:14px;margin:14px 0}
  .related-content-head{align-items:flex-start}.related-content-head h2{font-size:17px}.related-content-head p{display:none}
  .related-content-grid{grid-template-columns:1fr}
}
.related-content-tags{display:flex;flex-wrap:wrap;gap:3px;margin:1px 0 5px}
.related-content-tags i{padding:2px 5px;border-radius:999px;background:#edf5f8;color:#477389;font-size:12px;font-style:normal;font-weight:800}

.related-content-more-bottom{display:block;width:100%;margin-top:10px;min-height:40px;border:1px solid #dbe5ea;border-radius:10px;background:#f7fafb;color:#315d77;font-size:12px;font-weight:900;cursor:pointer;font-family:inherit}
.related-content-more-bottom:hover{background:#eef5f8}
.related-content-more-bottom[hidden]{display:none!important}
@media(max-width:700px){.related-content-more-bottom{min-height:44px}}

/* Interior pyeong filters */
.related-content-size-filter{display:flex;gap:6px;overflow-x:auto;margin:-2px 0 12px;padding:1px 0 3px;scrollbar-width:thin}
.related-content-size-filter button{flex:0 0 auto;min-height:32px;padding:6px 11px;border:1px solid #d9e5ea;border-radius:999px;background:#fff;color:#567181;font:inherit;font-size:12px;font-weight:900;cursor:pointer}
.related-content-size-filter button.is-active{border-color:#2b7898;background:#2b7898;color:#fff}