/* FLOORMW detail polish (2026-10-06)
   Loaded last on top of the v2.4.1 stylesheets. Layout and content stay as they are;
   this file only fixes details found in a side-by-side review of the live design. */

/* 1. Actually load Pretendard. The site names it in font-family but never loads it,
      so most Windows PCs fall back to Malgun Gothic. Same family name, no other change. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css');
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* 2. Arrows: they were 18-20px next to 14-16px text and 20-25px away from it,
      so they looked detached. Keep the arrows, tie them to their label. */
.button,.text-link,.contact-email,.email-link{gap:.4em!important}
.button{justify-content:center!important}
a span[aria-hidden="true"]{display:inline-block;font-size:.92em!important;line-height:1;opacity:1!important;transform:translateY(-.04em);transition:transform .18s ease-out}
a:hover>span[aria-hidden="true"]{transform:translate(.12em,-.16em)}
.contact-email{align-items:baseline}

/* 3. The Gwang9 planning image is mostly white and disappeared into the white page.
      Give it a frame so the card reads as a card. */
#case-gwang9 .showcase-screen,#gwang9 .curated-preview,.project-detail .project-image-frame{background:#f3f5f9;border:1px solid #e1e5ec}
#case-gwang9 .showcase-screen img,#gwang9 .curated-preview img{mix-blend-mode:multiply}

/* 4. The LOCAON note in the inquiry form looked like an error (red box).
      It is information, so use the neutral information style. */
.inquiry-service-notice{color:#3a404c!important;background:#f3f5f9!important;border-left:3px solid #2455ed!important}
.inquiry-service-notice strong{color:#15181e}

/* 5. Rhythm: the portfolio section and the about section are both white, and their
      paddings added up to about 260px of empty space. Halve the seam. */
@media (min-width:901px){
  .studio-work{padding-bottom:72px!important}
  .home-about{padding-top:72px!important}
}

/* 6. Contact: the form is much taller than the copy beside it. Keep the copy in view
      while the form scrolls (desktop only). */
@media (min-width:901px){
  .editorial-contact-copy{position:sticky;top:104px;align-self:start}
}

/* 7. Mobile hero: the brand shape sat behind the headline and lowered its contrast. */
@media (max-width:720px){
  .clear-brand-art{display:none!important}
}

/* 8. Small finishing touches */
img{image-rendering:auto}
.showcase-screen img,.curated-preview img{transition:transform .35s ease-out}
.showcase-card:hover .showcase-screen img,.curated-card:hover .curated-preview img{transform:scale(1.015)}
.curated-brand-grid img{transition:transform .2s ease-out}
.curated-brand-grid li:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}a:hover>span[aria-hidden="true"]{transform:translateY(-.04em)}}