/* r36: coherent functional-site finish. No data, calculator or form logic here. */

/* Keep the neutral graphite and the one approved brand accent above legacy layers. */
:root{
  --em-graphite:#242424;
  --em-surface:#303030;
  --em-card-surface:#333333;
  --em-line:#606060;
  --em-yellow:#F2C230;
  --em-ink:#181818;
}

/* A display face identifies page and section hierarchy; Inter remains the UI face. */
body[data-set*=':497:'] h1,
body[data-set*=':426:'] h1{
  margin-bottom:24px;
  color:#fff;
  font-family:Oswald,Arial,sans-serif!important;
  font-size:30px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.015em;
}

/* SEO helpers are administrator tooling, never visitor-facing content. */
html body .wrap.maket_2 main .shortcode{display:none!important}

/* One accent replaces the almost-identical yellow introduced by the prior patch. */
body .looking__item:hover,
body .looking__item:focus-within{border-color:var(--em-yellow);background:#383838!important}
body .looking__item a:focus-visible,
body .price-breakdown :focus-visible{outline-color:var(--em-yellow)}
body .card-row mark{background:rgba(242,194,48,.14);color:#f2d36b}
body .price-breakdown__close,
body .price-breakdown__average,
body .price-breakdown__total>span:last-child{color:var(--em-yellow)}
body .price-breakdown .em-price-context-r29{border-left-color:var(--em-yellow)}
body .em-krw-unavailable-text{color:#f2d36b;font-size:.82em;white-space:nowrap}
body .em-krw-unavailable-note{
  margin:18px 0 0;
  padding:16px 18px;
  border:1px solid #6a5a2a;
  border-left:3px solid var(--em-yellow);
  border-radius:8px;
  background:#353126;
  color:#f0f0f0;
}
body .price-breakdown__footer .btn,
body .price-breakdown .em-price-action .btn{background:var(--em-yellow);color:var(--em-ink)}

/* Search history is a compact functional rail, not a stack of oversized banners. */
body .looking{display:block;margin:18px 0 24px;min-width:0}
body .looking__label{display:block;margin:0 0 9px}
body .em-looking-track{
  display:flex;
  gap:8px;
  max-width:100%;
  padding:0 0 5px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
  scrollbar-color:#707070 #303030;
}
body .em-looking-track::-webkit-scrollbar{height:6px}
body .em-looking-track::-webkit-scrollbar-track{background:#303030}
body .em-looking-track::-webkit-scrollbar-thumb{background:#707070;border-radius:20px}
body .em-looking-track .looking__item{flex:0 0 auto;width:auto;max-width:300px}
body .em-looking-track .looking__item a{min-width:0}

/* The site already owns the filter fields; r36 only makes them reachable on phones. */
body .em-filter-toggle{
  display:none;
  width:100%;
  min-height:44px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 13px;
  border:1px solid #858585;
  border-radius:9px;
  background:#303030;
  color:#fff;
  font:600 13px/1.4 Inter,Arial,sans-serif;
  text-align:left;
  cursor:pointer;
}
body .em-filter-toggle::after{
  content:'+';
  flex:0 0 auto;
  color:var(--em-yellow);
  font:600 22px/1 Inter,Arial,sans-serif;
}
body .filter.em-filter-expanded .em-filter-toggle::after{content:'−'}
body .em-filter-toggle:focus-visible{outline:2px solid var(--em-yellow);outline-offset:3px}

/* Calculation stays readable, but reaches the decision action much sooner. */
body .price-breakdown{
  background:var(--em-surface)!important;
  border-color:var(--em-line);
  scrollbar-color:#707070 var(--em-surface);
}
body .price-breakdown--abs{width:min(900px,calc(100vw - 32px))!important}
body .price-breakdown .em-price-action{
  position:sticky;
  top:-1px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0;
  padding:13px 0;
  border-bottom:1px solid #505050;
  background:linear-gradient(180deg,#303030 82%,rgba(48,48,48,.94));
}
body .price-breakdown .em-price-action__context{
  min-width:0;
  color:#d5d5d5;
  font:500 13px/1.45 Inter,Arial,sans-serif;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body .price-breakdown .em-price-action .btn{
  flex:0 0 auto;
  min-height:42px;
  padding:9px 16px;
  border:0;
  border-radius:8px;
  font:600 13px/1.4 Inter,Arial,sans-serif;
  text-decoration:none;
  text-transform:none;
}
body .price-breakdown .em-price-action .btn:hover,
body .price-breakdown .em-price-action .btn:focus-visible{background:#f2f2f2;color:var(--em-ink)}
body .price-breakdown #calc-fixed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px}
body .price-breakdown #calc-fixed>.price-breakdown__section{align-content:start}
body .price-breakdown #calc-fixed>.price-breakdown__footer{grid-column:1/-1}

/* Keep catalogue photography in its source geometry on desktop.  The legacy
   flex row stretched a 4:3 or 16:9 image to a tall portrait slot. */
@media(min-width:768px){
  body .catalog-list>.card-row>.card-row-gallery{
    align-self:flex-start!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4/3;
  }
  body .catalog-list>.card-row>.card-row-gallery .pic,
  body .catalog-list>.card-row>.card-row-gallery .list,
  body .catalog-list>.card-row>.card-row-gallery .img,
  body .catalog-list>.card-row>.card-row-gallery img{height:100%!important}
  body .catalog-list>.card-row>.card-row-gallery img{
    width:100%!important;
    object-fit:contain!important;
    background:var(--em-surface);
  }
}

/* Long business contacts are indivisible values. */
body .footer a.tel,
body .footer a[href^='tel:'],
body .footer .f-contacts__tel{white-space:nowrap;word-break:keep-all;overflow-wrap:normal}

@media(max-width:767px){
  body[data-set*=':497:'] h1,
  body[data-set*=':426:'] h1{font-size:26px;line-height:1.28;margin-bottom:20px}

  /* The same links already exist in the full mobile drawer opened by the burger. */
  body .em-header-native .menu{display:none!important}

  body .em-filter-toggle{display:flex}
  body .filter.em-filter-expanded .filter__hmob{display:block!important}

  body .em-looking-track .looking__item{max-width:min(278px,82vw)}
  body .looking{margin-bottom:20px}

  /* Replace the legacy fixed 320 px gallery height with the image's useful ratio. */
  body .card-row-gallery{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4/3;
  }
  body .card-row-gallery>a.pic,
  body .card-row-gallery>a.pic>span.list{height:100%!important;min-height:0!important}

  body .price-breakdown--abs{
    inset:12px auto auto 50%!important;
    width:calc(100vw - 24px)!important;
    max-height:calc(100dvh - 24px);
    padding:20px 16px max(20px,env(safe-area-inset-bottom));
  }
  body .price-breakdown #calc-fixed{display:block}
  body .price-breakdown .em-price-action{
    align-items:stretch;
    flex-direction:column;
    gap:9px;
    margin:0 -1px;
    padding:12px 1px;
  }
  body .price-breakdown .em-price-action__context{white-space:normal}
  body .price-breakdown .em-price-action .btn{width:100%}
}

@media(max-width:374px){
  body .price-breakdown .em-price-action__context{font-size:12px}
}