/*
 * LUEN — Homepage Design Finish / 2026-10-17
 *
 * Non-destructive final layer for the homepage. This replaces neither
 * the legacy CSS nor the motion layer. Subpages remain unchanged.
 *
 * Editorial hierarchy:
 *   canvas: warm ivory       #F5F3EE
 *   card/surface: warm cream #FFF9F1
 *   CTA: accessible orange   #B9552A  (white text contrast >4.5:1)
 *   small-label orange:      #A74722  (cream contrast >4.5:1)
 *   panel radius:            20px
 *   media radius:            18px (16px mobile)
 *   rectangular CTA radius:  10px; floating CTA remains a pill
 */
:root{
  --luen-finish-cta:#B9552A;
  --luen-finish-cta-hover:#A74722;
  --luen-finish-label:#A74722;
  --luen-finish-panel-radius:20px;
  --luen-finish-media-radius:18px;
  --luen-finish-button-radius:10px;
}

/* Consistent rounded media and editorial cards. Images keep their
   original aspect ratios and the moving thumbnail lanes are untouched. */
html body main#top>.hero .creator-network-showcase,
html body #cases.case-studies-v7 .case-content-chapter-v7,
html body #performance .performance-dashboard,
html body #contact .contact-form {
  border-radius:var(--luen-finish-panel-radius)!important;
}

html body main#top #services .luen-service-choice {
  border-radius:var(--luen-finish-panel-radius)!important;
}

html body #cases.case-studies-v7 .case-support-card-v7 figure{
  border-radius:var(--luen-finish-media-radius)!important;
}

/* Keep the 18/16px rounded thumbnails already implemented in
   .case-selected-work-v10; do not override their animation transforms. */

/* A consistent action color for each primary conversion CTA.
   Text links stay understated and the floating CTA keeps its pill shape. */
html body #nav .nav-contact,
html body main#top>.hero .hero-cta .btn-primary,
html body #cases.case-studies-v7 .case-inquiry-btn-v7,
html body #contact .form-submit,
html body .float-cta,
html body .mobile-menu .btn-primary{
  border-color:var(--luen-finish-cta)!important;
  background:var(--luen-finish-cta)!important;
  color:#FFF9F1!important;
}
html body #nav .nav-contact:hover,
html body main#top>.hero .hero-cta .btn-primary:hover,
html body #cases.case-studies-v7 .case-inquiry-btn-v7:hover,
html body #contact .form-submit:hover,
html body .float-cta:hover,
html body .mobile-menu .btn-primary:hover{
  border-color:var(--luen-finish-cta-hover)!important;
  background:var(--luen-finish-cta-hover)!important;
  color:#FFF9F1!important;
}

html body #nav .nav-contact,
html body main#top>.hero .hero-cta .btn-primary,
html body #contact .form-submit,
html body .mobile-menu .btn-primary{
  border-radius:var(--luen-finish-button-radius)!important;
}
html body main#top #services .luen-service-choice>a{
  color:var(--luen-finish-label)!important;
  border-bottom-color:rgba(167,71,34,.45)!important;
}
html body main#top #services .luen-service-choice>a:hover{
  border-bottom-color:var(--luen-finish-label)!important;
}

/* Small labels were historically 8–9px on several sections.
   Keep them editorial but readable, including narrow mobile screens. */
html body main#top>.brand-wall .brand-wall-micro-label,
html body main#top>.hero .creator-network-head>span,
html body main#top>.hero .creator-network-head>strong,
html body main#top #services .luen-service-choice-index,
html body main#top #services .luen-service-choice-channel,
html body #cases.case-studies-v7 .case-support-copy-v7>span,
html body #work .portfolio-head span,
html body main#top #services .luen-service-help span{
  font-size:10.5px!important;
  line-height:1.35!important;
}
html body main#top>.brand-wall .brand-wall-micro-label,
html body main#top>.hero .creator-network-head>span,
html body main#top #services .luen-service-choice-index,
html body main#top #services .luen-service-choice-channel,
html body #cases.case-studies-v7 .case-support-copy-v7>span,
html body #work .portfolio-head span,
html body main#top #services .luen-service-help span{
  color:var(--luen-finish-label)!important;
}
html body main#top #services .luen-service-choice-options-detail strong{
  font-size:12px!important;
  line-height:1.45!important;
}
html body main#top #services .luen-service-choice-options-detail small{
  font-size:12px!important;
  line-height:1.55!important;
  overflow-wrap:anywhere;
}

/* The legacy mobile supporting-case title shrank to 12px.
   Give creator / brand names a distinct, readable typographic tier. */
@media(max-width:767px){
  html body #cases.case-studies-v7 .case-support-copy-v7 h3{
    font-size:clamp(16px,4.6vw,19px)!important;
    line-height:1.32!important;
    overflow-wrap:anywhere;
  }
  html body #cases.case-studies-v7 .case-support-card-v7 figure,
  html body #cases.case-studies-v7 .case-content-chapter-v7{
    border-radius:16px!important;
  }
  html body main#top>.hero .creator-network-showcase,
  html body #performance .performance-dashboard,
  html body #contact .contact-form,
  html body main#top #services .luen-service-choice{
    border-radius:18px!important;
  }
  html body main#top #services .luen-service-choice-options-detail>div{
    grid-template-columns:minmax(76px,.38fr) minmax(0,1fr);
    gap:10px;
  }
}

/* Warm beige instead of a separate dark/brown footer block.
   The homepage already uses dark text and orange signals here. */
html body>footer{
  background:#EAE4DA!important;
  border-top-color:rgba(93,76,64,.14)!important;
}
html body footer .footer-brand p,
html body footer .footer-bottom p,
html body footer .footer-business-info,
html body footer .footer-business-info a{
  color:#61564E!important;
}
html body footer .footer-business-info{
  font-size:11px!important;
  line-height:1.6!important;
}

/* Keyboard and assistive input: focus remains visible on pale panels. */
html body main#top a:focus-visible,
html body #nav a:focus-visible,
html body .mobile-menu a:focus-visible,
html body footer a:focus-visible,
html body #contact .form-submit:focus-visible,
html body .float-cta:focus-visible{
  outline:2px solid var(--luen-finish-label)!important;
  outline-offset:3px!important;
}

/* Services hub deep links: keep selected channel visible beneath the
   sticky navbar, without changing the existing card grid or motion. */
html body main#top #services .luen-service-choice[id]{
  scroll-margin-top:clamp(80px,9vw,112px);
}
html body main#top #services .luen-service-choice:target{
  border-color:rgba(185,85,42,.48)!important;
  box-shadow:0 12px 36px rgba(77,49,30,.07);
}


/* Homepage section-title hierarchy.
   English labels are the visible h2 headings; the existing Korean copy
   in HOW LUEN WORKS / PERFORMANCE / FAQ / PROJECT INQUIRY is a smaller
   secondary line. No additional visibility gates or scroll observers. */
html body main#top .luen-section-primary-title{
  display:block;
  width:100%;
  max-width:100%;
  margin:0!important;
  padding:0;
  color:var(--luen-finish-cta)!important;
  font-family:var(--luen-type-ui)!important;
  font-size:clamp(40px,4vw,52px)!important;
  font-weight:700!important;
  line-height:1.08!important;
  letter-spacing:-.046em!important;
  text-transform:none;
  text-wrap:balance;
  overflow-wrap:normal;
}
html body main#top .luen-section-subheading{
  max-width:38ch;
  margin:18px 0 0!important;
  padding:0;
  color:var(--luen-ink-soft)!important;
  font-family:var(--luen-type-display)!important;
  font-size:clamp(18px,1.65vw,21px)!important;
  font-weight:600!important;
  line-height:1.48!important;
  letter-spacing:-.032em!important;
  word-break:keep-all;
  overflow-wrap:break-word;
}
html body main#top .luen-section-subheading em{
  color:var(--luen-finish-label);
  font-style:normal;
}

/* The old Services header was a two-column title/description grid.
   With a single large heading, it should use the full width. */
html body main#top #services .luen-home-services-head{
  display:block;
  max-width:none;
}

/* Preserve short explanatory text beneath the HOW LUEN WORKS subtitle. */
html body main#top #content-flow .luen-section-subheading + .section-copy{
  margin-top:14px!important;
}
/* Keep supporting proof and inquiry notes visually below the new subhead. */
html body main#top #contact .luen-section-subheading + .contact-copy{
  margin-top:16px!important;
}

@media(max-width:767px){
  html body main#top .luen-section-primary-title{
    font-size:clamp(30px,8vw,34px)!important;
    line-height:1.08!important;
    letter-spacing:-.048em!important;
  }
  html body main#top .luen-section-subheading{
    font-size:clamp(16px,4vw,17px)!important;
    line-height:1.5!important;
  }
}

/* Controlled editorial rhythm: headline-to-content gaps are section-specific.
   Existing imagery, moving strips and card layouts remain unchanged. */
html body main#top #services .luen-home-services-head,
html body main#top #content-flow .luen-home-section-head{
  margin-bottom:clamp(42px,4vw,56px)!important;
}
html body main#top #cases.case-studies-v7 .case-feature-v7{
  margin-top:clamp(40px,4vw,54px)!important;
}
html body main#top #performance .performance-layout,
html body main#top #faq .faq-layout,
html body main#top #contact .contact-layout{
  gap:clamp(42px,4vw,56px)!important;
}
html body main#top #performance .luen-section-subheading + .data-source-badge{
  margin-top:20px!important;
}
@media(max-width:1100px){
  html body main#top #performance .performance-layout,
  html body main#top #faq .faq-layout,
  html body main#top #contact .contact-layout{
    gap:36px!important;
  }
}
@media(max-width:767px){
  html body main#top .luen-section-subheading{
    margin-top:12px!important;
  }
  html body main#top #services .luen-home-services-head,
  html body main#top #content-flow .luen-home-section-head{
    margin-bottom:32px!important;
  }
  html body main#top #cases.case-studies-v7 .case-feature-v7{
    margin-top:30px!important;
  }
  html body main#top #performance .performance-layout,
  html body main#top #faq .faq-layout,
  html body main#top #contact .contact-layout{
    gap:30px!important;
  }
  html body main#top #performance .luen-section-subheading + .data-source-badge{
    margin-top:16px!important;
  }
}


/* 2026-10-18 real-screen QA — mobile navigation should belong to LUEN's
   ivory/orange editorial system, not the retired near-black theme.
   Keep overlay behavior, click targets and existing menu transitions intact. */
html body .mobile-menu{
  background:#F5F3EE!important;
  color:#2A2521!important;
}
html body .mobile-menu::before{
  content:"LUEN";
  position:absolute;
  top:32px;
  left:22px;
  font:800 20px/1 "Inter","Pretendard",sans-serif;
  letter-spacing:.17em;
  color:#2A2521;
  pointer-events:none;
}
html body .mobile-menu .mobile-link:not(.btn-primary){
  color:#2A2521!important;
}
html body .mobile-menu .mobile-link:not(.btn-primary):hover{
  color:#A74722!important;
}
html body .mobile-menu .mobile-close{
  border-color:#D7CCBD!important;
  background:#FFF9F1!important;
  color:#2A2521!important;
}
html body .mobile-menu .mobile-close:focus-visible{
  outline:2px solid #A74722!important;
  outline-offset:3px!important;
}


/* 2026-10-18 performance QA: the portfolio rail's max-content track must
   never enlarge its viewport/parent. Intrinsic grid/flex sizing previously
   allowed a moving strip to grow to several thousand px on mobile.
   Keep the track wide for seamless motion; clip it at a real viewport width. */
html body #cases #work{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
}
html body #cases #work .case-portfolio-v10,
html body #cases #work .portfolio-lane,
html body #cases #work .portfolio-viewport{
  box-sizing:border-box!important;
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
}
@media(prefers-reduced-motion:reduce){
  html body #cases #work .portfolio-track{
    will-change:auto!important;
  }
}