/* v186 — cross-device polish: shared rhythm, headers, footers */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
img,video,iframe{max-width:100%}
button,a,input,select,textarea{touch-action:manipulation}

/* Shared header geometry on main-site pages */
.site-header{min-height:80px}
.site-header .brand{min-width:max-content}
.site-header nav a{white-space:nowrap}
.lang-toggle,.mobile-menu-toggle{flex:0 0 auto}

/* Shared business footer: desktop = left / center / right */
body>footer:not(.legal-footer), .seo-foot{
  position:relative;
}
body>footer:not(.legal-footer) .motif-business-footer,
.seo-foot .motif-business-footer{min-width:0}
.motif-footer-copyright{white-space:nowrap}

@media (min-width:1101px){
  body>footer:not(.legal-footer),.seo-foot{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    align-items:start!important;
    column-gap:32px!important;
  }
  body>footer:not(.legal-footer) .motif-business-footer,.seo-foot .motif-business-footer{grid-column:1;justify-self:start}
  body>footer:not(.legal-footer) .motif-footer-copyright,.seo-foot .motif-footer-copyright{grid-column:2;justify-self:center}
  body>footer:not(.legal-footer) .site-legal-links,.seo-foot .site-legal-links{grid-column:3;justify-self:end}
}

/* Tablet */
@media (min-width:701px) and (max-width:1100px){
  .section{padding-left:40px!important;padding-right:40px!important}
  .site-header{padding-left:28px!important;padding-right:28px!important}
  body>footer:not(.legal-footer),.seo-foot{padding-left:32px!important;padding-right:32px!important}
}

/* Phone */
@media (max-width:700px){
  .site-header{padding-left:18px!important;padding-right:18px!important}
  .section{padding-left:20px!important;padding-right:20px!important}
  .section-head{margin-bottom:38px!important}
  .display{letter-spacing:-.04em}
  body>footer:not(.legal-footer),.seo-foot{
    padding:26px 20px!important;
    gap:14px!important;
  }
  .motif-business-footer{font-size:9px!important;line-height:1.7!important;word-break:keep-all}
  .site-legal-links{gap:12px!important;flex-wrap:wrap!important}
  .motif-footer-copyright{font-size:9px!important;letter-spacing:.08em!important}
}

/* v186 unified public navigation */
.unified-shop-header,.info-header,.service-site-header{background:#77726f!important;border-bottom:1px solid rgba(24,20,22,.12)!important}
.unified-shop-header .motif-header-logo,.info-header .motif-header-logo,.service-site-header .motif-header-logo{color:#171514!important}
@media(min-width:1101px){
 .unified-shop-header,.info-header,.service-site-header{min-height:80px!important;padding-left:30px!important;padding-right:30px!important}
 .unified-shop-header nav,.info-header nav,.service-site-header nav{gap:26px!important}
}
@media(min-width:701px) and (max-width:1100px){
 .unified-shop-header,.info-header,.service-site-header{min-height:72px!important}
}
@media(max-width:700px){
 .unified-shop-header,.info-header,.service-site-header{min-height:64px!important}
 .unified-shop-header .brand,.info-header .brand,.service-site-header .brand{align-self:center}
}

/* Unified footer component */
.motif-unified-footer{background:#0c0b0c;color:rgba(255,255,255,.46);border-top:1px solid rgba(255,255,255,.1);padding:26px 7vw;font-size:9px;letter-spacing:.1em}
.motif-unified-footer .motif-business-footer{font-size:10px;line-height:1.75;letter-spacing:.01em;opacity:.78;max-width:760px}
.motif-unified-footer .site-legal-links{display:flex;gap:15px;flex-wrap:wrap;justify-content:flex-end}
.motif-unified-footer .site-legal-links a{text-decoration:none;color:inherit}
@media(min-width:1101px){.motif-unified-footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:32px}.motif-unified-footer .motif-footer-copyright{justify-self:center}.motif-unified-footer .site-legal-links{justify-self:end}}
@media(max-width:1100px){.motif-unified-footer{display:flex;flex-direction:column;gap:13px;padding-left:32px;padding-right:32px}.motif-unified-footer .site-legal-links{justify-content:flex-start}}
@media(max-width:700px){.motif-unified-footer{padding:24px 20px}.motif-unified-footer .motif-business-footer{font-size:9px;line-height:1.7}.motif-unified-footer .site-legal-links{gap:12px}}

/* v187 — full responsive QA */
:root{--motif-page-pad:clamp(20px,4vw,64px)}
body{min-width:0}
.site-header,.shop-header,.legal-nav,.checkout-header,.lp-header{box-sizing:border-box}
.site-header nav,.shop-header nav{min-width:0}

/* Public footer: calm and consistent across every viewport */
body>footer:not(.legal-footer),.seo-foot,.motif-unified-footer{
  box-sizing:border-box;
}
body>footer:not(.legal-footer) .motif-business-footer,
.seo-foot .motif-business-footer,
.motif-unified-footer .motif-business-footer{word-break:keep-all;overflow-wrap:anywhere}

@media (min-width:1101px){
  body>footer:not(.legal-footer),.seo-foot,.motif-unified-footer{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    padding-left:clamp(32px,4vw,72px)!important;
    padding-right:clamp(32px,4vw,72px)!important;
  }
  .motif-business-footer{max-width:620px!important}
  .site-legal-links{align-items:center!important}
}

@media (min-width:701px) and (max-width:1100px){
  body>footer:not(.legal-footer),.seo-foot,.motif-unified-footer{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
    gap:18px 28px!important;padding:28px 32px!important;align-items:start!important;
  }
  body>footer:not(.legal-footer) .motif-business-footer,.seo-foot .motif-business-footer,.motif-unified-footer .motif-business-footer{grid-column:1;grid-row:1}
  body>footer:not(.legal-footer) .motif-footer-copyright,body>footer:not(.legal-footer) .footer-copyright,.seo-foot .motif-footer-copyright,.motif-unified-footer .motif-footer-copyright{grid-column:2;grid-row:1;justify-self:end;white-space:nowrap}
  body>footer:not(.legal-footer) .site-legal-links,.seo-foot .site-legal-links,.motif-unified-footer .site-legal-links{grid-column:1/-1;grid-row:2;justify-self:start!important;justify-content:flex-start!important}
}

@media (max-width:700px){
  body>footer:not(.legal-footer),.seo-foot,.motif-unified-footer{
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;
    padding:28px 20px calc(30px + env(safe-area-inset-bottom))!important;gap:14px!important;
  }
  .motif-business-footer{font-size:10px!important;line-height:1.75!important;letter-spacing:0!important;max-width:100%!important;opacity:.68!important}
  .motif-footer-copyright,.footer-copyright{order:2;font-size:9px!important;line-height:1.5!important;letter-spacing:.1em!important;white-space:normal!important}
  .site-legal-links{order:3;display:flex!important;justify-content:flex-start!important;gap:8px 15px!important;flex-wrap:wrap!important;font-size:9px!important;line-height:1.5!important}
}

/* Main / information headers: desktop stays editorial, mobile becomes intentional */
@media (max-width:700px){
  .site-header:not(.credits-header){min-height:64px!important;height:64px!important;padding:0 18px!important;grid-template-columns:1fr auto auto!important;gap:12px!important}
  .site-header:not(.credits-header) .motif-header-logo{font-size:19px!important;letter-spacing:.11em!important}
  .site-header:not(.credits-header) .lang-toggle{width:38px!important;height:32px!important}
  .site-header:not(.credits-header) .mobile-menu-toggle{font-size:9px!important;letter-spacing:.12em!important}
}

/* More Credits: fix the page that exposed the old desktop-on-phone behavior */
@media (max-width:800px){
  .credits-header{position:fixed!important;min-height:64px!important;height:64px!important;padding:0 18px!important;grid-template-columns:1fr auto auto!important;gap:12px!important;background:#77726f!important}
  .credits-header .motif-header-logo{font-size:19px!important;color:#f4f0e8!important}
  .credits-header .lang-toggle{width:38px!important;height:32px!important;order:2}
  .credits-menu-toggle{order:3;font-size:9px!important;letter-spacing:.12em!important;padding:10px 0!important}
  .credits-header nav{position:absolute!important;top:64px!important;left:0!important;right:0!important;grid-column:auto!important;background:#77726f!important;padding:5px 18px 16px!important;border-top:1px solid rgba(24,20,22,.12)!important;box-shadow:0 10px 22px rgba(20,16,18,.08)!important}
  .credits-header nav a{padding:10px 0!important;font-size:11px!important;line-height:1.25!important}
  .credits-page{margin:0!important;padding:96px 20px 68px!important;width:100%!important}
  .credits-hero{padding:20px 0 36px!important;gap:18px!important}
  .credits-hero .eyebrow{font-size:9px!important;line-height:1.5!important;margin-bottom:12px!important}
  .credits-hero h1{font-size:clamp(48px,15vw,66px)!important;line-height:.92!important}
  .credits-intro{font-size:12.5px!important;line-height:1.75!important;color:#675b5f!important}
  .archive-year{padding:23px 0 25px!important;gap:10px!important}
  .archive-year-label{font-size:31px!important;line-height:1!important}
  .archive-credit{font-size:12.5px!important;line-height:1.68!important;padding:10px 0!important;word-break:keep-all!important;overflow-wrap:break-word!important}
  .archive-back{margin-top:34px!important;font-size:10px!important;letter-spacing:.08em!important}
}
@media (max-width:390px){
  .credits-page{padding-left:18px!important;padding-right:18px!important}
  .archive-credit{font-size:12px!important}
}

/* v190 — unified navigation + tablet/mobile QA */
@media (max-width:900px){
  .score-detail-header{display:grid!important;grid-template-columns:1fr auto!important;min-height:64px!important;height:auto!important;padding:0 18px!important;gap:10px!important;position:sticky!important;top:0!important;z-index:100!important}
  .score-detail-header nav{display:none!important;position:absolute!important;top:100%!important;left:0!important;right:0!important;width:100%!important;padding:8px 18px 14px!important;background:#f3eee8!important;border-top:1px solid rgba(31,26,28,.08)!important;border-bottom:1px solid rgba(31,26,28,.12)!important;flex-direction:column!important;gap:0!important;z-index:100!important}
  .score-detail-header.menu-open nav{display:flex!important}
  .score-detail-header nav a{width:100%!important;padding:10px 0!important;border-bottom:1px solid rgba(31,26,28,.08)!important;font-size:11px!important;text-align:left!important}
  .score-detail-header nav a:last-child{border-bottom:0!important}
  .score-detail-menu-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important}
  .score-detail-actions{justify-self:end!important;gap:6px!important;margin-left:0!important}

  .info-header{display:grid!important;grid-template-columns:1fr auto auto!important;align-items:center!important;min-height:64px!important;height:64px!important;padding:0 18px!important;gap:8px!important;position:sticky!important;top:0!important;z-index:100!important}
  .info-header nav{display:none!important;position:absolute!important;top:100%!important;left:0!important;right:0!important;width:100%!important;padding:8px 18px 14px!important;background:#77726f!important;border-top:1px solid rgba(24,20,22,.12)!important;box-shadow:0 10px 22px rgba(20,16,18,.08)!important;flex-direction:column!important;gap:0!important;z-index:100!important}
  .info-header.menu-open nav{display:flex!important}
  .info-header nav a{width:100%!important;padding:10px 0!important;border-bottom:1px solid rgba(24,20,22,.12)!important;font-size:11px!important;text-align:left!important}
  .info-header nav a:last-child{border-bottom:0!important}
  .info-header .nav-utility-first{margin-left:0!important;padding-left:0!important;border-left:0!important}
  .info-menu-toggle{display:inline-flex!important;align-items:center;justify-content:center;border:1px solid rgba(24,20,22,.26);background:transparent;border-radius:999px;padding:8px 10px;font-size:9px;letter-spacing:.10em;color:inherit;cursor:pointer;white-space:nowrap}
  .info-lang{justify-self:end!important}
}
@media (min-width:701px) and (max-width:900px){
  .featured-score{grid-template-columns:minmax(250px,340px) 1fr!important;gap:42px!important;padding:44px 5vw 58px!important;align-items:start!important}
  .featured-cover{max-width:340px!important;margin:0!important}
  .featured-cover img{max-height:455px!important;object-fit:contain!important}
  .featured-info{padding-top:8px!important}
}
@media (max-width:560px){
  .checkout-intro h1{font-size:clamp(46px,15vw,64px)!important;line-height:.9!important}
  .mypage-page-placeholder{display:none}
}
/* v190 — use one navigation mode through portrait-tablet widths */
@media (max-width:900px){
  .site-header:not(.info-header):not(.credits-header):not(.service-site-header){display:grid!important;grid-template-columns:1fr auto auto!important;grid-template-rows:auto!important;min-height:64px!important;height:64px!important;padding:0 18px!important;gap:8px!important;position:sticky!important;top:0!important;z-index:100!important}
  .site-header:not(.info-header):not(.credits-header):not(.service-site-header) .lang-toggle{grid-column:2!important;grid-row:1!important}
  .site-header:not(.info-header):not(.credits-header):not(.service-site-header) .mobile-menu-toggle{display:block!important;grid-column:3!important;grid-row:1!important;margin-left:0!important}
  .site-header:not(.info-header):not(.credits-header):not(.service-site-header) nav{display:none!important;position:absolute!important;left:0!important;right:0!important;top:100%!important;width:100%!important;padding:10px 18px 16px!important;margin:0!important;background:#0d0c0d!important;border-top:1px solid rgba(255,255,255,.10)!important;border-bottom:1px solid rgba(255,255,255,.12)!important;flex-direction:column!important;gap:0!important}
  .site-header:not(.info-header):not(.credits-header):not(.service-site-header).menu-open nav{display:flex!important}
  .site-header:not(.info-header):not(.credits-header):not(.service-site-header) nav a{width:100%!important;padding:10px 2px!important;border-bottom:1px solid rgba(255,255,255,.08)!important;font-size:11px!important;text-align:left!important}
  .site-header.menu-open .mobile-menu-toggle{font-size:0!important}
  .site-header.menu-open .mobile-menu-toggle::before{content:"닫기 ×"!important;font-size:10px!important;letter-spacing:.04em!important}
  html[lang="en"] .site-header.menu-open .mobile-menu-toggle::before{content:"CLOSE ×"!important}
}


/* v190 final QA — MOTIF identity + service portrait navigation */
.motif-header-logo{
  font-family:"DM Serif Display",Georgia,"Times New Roman",serif!important;
  font-weight:400!important;letter-spacing:.12em!important;line-height:1!important;
}
@media (max-width:900px){
  .service-site-header{display:grid!important;grid-template-columns:1fr auto auto!important;min-height:64px!important;height:64px!important;padding:0 18px!important;gap:8px!important;position:sticky!important;top:0!important;z-index:1000!important}
  .service-site-header .brand{justify-self:start!important}
  .service-site-header .service-lang-toggle{grid-column:2!important;grid-row:1!important;justify-self:end!important}
  .service-site-header .service-menu-toggle{display:inline-flex!important;grid-column:3!important;grid-row:1!important;align-items:center!important;justify-content:center!important;margin:0!important}
  .service-site-header nav{display:none!important;position:absolute!important;top:100%!important;left:0!important;right:0!important;width:100%!important;max-width:none!important;padding:8px 18px 14px!important;margin:0!important;background:#77726f!important;border-top:1px solid rgba(24,20,22,.12)!important;border-bottom:1px solid rgba(24,20,22,.14)!important;box-shadow:0 10px 22px rgba(20,16,18,.08)!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;overflow:visible!important;white-space:normal!important}
  .service-site-header.menu-open nav{display:flex!important}
  .service-site-header nav a{width:100%!important;padding:10px 0!important;border-bottom:1px solid rgba(24,20,22,.12)!important;font-size:11px!important;text-align:left!important}
  .service-site-header nav a:last-child{border-bottom:0!important}
  .service-site-header .active-service:after{display:none!important}
}
@media (max-width:560px){
  .checkout-intro h1{font-size:clamp(42px,13vw,58px)!important;line-height:.95!important;word-break:keep-all!important}
  .mypage-page,.mypage-shell,.mypage-main{padding-top:min(80px,12vh)!important}
}


/* v191 — desktop header regression fix + final MOTIF/header polish */
/* Dynamically-created menu controls must never appear in desktop navigation. */
.info-menu-toggle{display:none;}
@media (min-width:901px){
  .info-menu-toggle,.service-menu-toggle,.score-detail-menu-toggle,.mobile-menu-toggle{display:none!important;}
  .info-header{display:flex!important;}
  .info-header nav{display:flex!important;}
}
/* Keep active navigation underline visually attached to its label. */
.service-site-header .active-service:after{bottom:-4px!important;}


/* v192 — final header identity + desktop info-header + compact home services */
.motif-header-logo{
  font-family:"DM Serif Display",Georgia,"Times New Roman",serif!important;
  font-size:22px!important;font-weight:400!important;line-height:1!important;
  letter-spacing:.12em!important;font-style:normal!important;white-space:nowrap!important;
}
@media (max-width:700px){.motif-header-logo{font-size:20px!important}}

/* NOTICE / FAQ: desktop uses the same three-part header geometry as HOME. */
@media (min-width:901px){
  .info-header{
    display:grid!important;grid-template-columns:1fr auto 1fr!important;
    align-items:center!important;padding:20px 34px!important;min-height:0!important;height:auto!important;
  }
  .info-header .brand{justify-self:start!important}
  .info-header nav{display:flex!important;justify-self:center!important;align-items:center!important;gap:25px!important;position:static!important;width:auto!important;padding:0!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important;flex-direction:row!important;white-space:nowrap!important}
  .info-header .info-lang{justify-self:end!important}
  .info-menu-toggle{display:none!important}
}

/* HOME services: less empty real estate, quieter labels, same clean sans typography as service UI. */
#services{padding-top:78px!important;padding-bottom:82px!important}
#services .section-head{margin-bottom:34px!important}
#services .section-head .display{font-size:clamp(42px,5.2vw,72px)!important}
#services .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#services .service{min-height:172px!important;padding:22px 26px!important}
#services .service h3{
  font-family:var(--sans)!important;font-size:18px!important;line-height:1.35!important;
  font-weight:500!important;letter-spacing:-.025em!important;margin:22px 0 10px!important;
}
#services .service p{font-size:12.5px!important;line-height:1.65!important;margin:0!important;max-width:500px!important}
@media (max-width:900px){
  #services{padding-top:58px!important;padding-bottom:62px!important}
  #services .section-head{margin-bottom:26px!important}
  #services .service{min-height:150px!important;padding:20px 22px!important}
  #services .service h3{font-size:17px!important;margin:18px 0 9px!important}
}
@media (max-width:560px){
  #services{padding-top:48px!important;padding-bottom:52px!important}
  #services .services-grid{grid-template-columns:1fr!important}
  #services .service{min-height:0!important;padding:18px 18px 20px!important}
  #services .service h3{font-size:16px!important;margin:14px 0 7px!important}
  #services .service p{font-size:12px!important}
}

/* v193 — active underline + orchestration heading typography */
/* Keep the active nav marker visually attached to the label on every header variant. */
.service-site-header .active-service:after{bottom:-2px!important;}
@media (min-width:901px){
  .service-site-header nav a{padding-bottom:3px!important;}
  .service-site-header .active-service:after{bottom:-2px!important;}
}

/* v199 — subtle editorial scroll reveal
   Progressive enhancement only: content stays fully visible if JS is unavailable. */
html.motif-reveal-ready .motif-reveal{
  opacity:0;
  transform:translate3d(0,10px,0);
  transition:opacity .48s cubic-bezier(.22,.61,.36,1),transform .48s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--motif-reveal-delay,0ms);
  will-change:opacity,transform;
}
html.motif-reveal-ready .motif-reveal.motif-reveal-in{
  opacity:1;
  transform:translate3d(0,0,0);
}
@media (max-width:700px){
  html.motif-reveal-ready .motif-reveal{transform:translate3d(0,8px,0);transition-duration:.42s;}
}
@media (prefers-reduced-motion:reduce){
  html.motif-reveal-ready .motif-reveal,
  html.motif-reveal-ready .motif-reveal.motif-reveal-in{
    opacity:1!important;transform:none!important;transition:none!important;
  }
}

/* v200 — mobile spacing integrity
   Keep checkout/footer information compact and keep score policy content on the shared mobile gutter. */
@media (max-width:700px){
  .checkout-footer{
    justify-content:flex-start!important;
    align-content:flex-start!important;
    gap:10px!important;
    padding:26px 22px calc(28px + env(safe-area-inset-bottom))!important;
  }
  .checkout-footer .motif-business-footer{
    display:block!important;
    width:100%!important;
    margin:0!important;
    font-size:10px!important;
    line-height:1.75!important;
    letter-spacing:0!important;
  }
  .checkout-footer .motif-business-footer span{display:inline!important;margin:0!important}
  .checkout-footer>span{margin:0!important;line-height:1.55!important}
  .checkout-footer>div:not(.motif-business-footer){
    display:flex!important;
    gap:8px 15px!important;
    margin:0!important;
    justify-content:flex-start!important;
  }

  .score-policy-section{
    box-sizing:border-box!important;
    width:auto!important;
    max-width:none!important;
    margin:34px 22px 70px!important;
    padding:24px 0!important;
  }
}
@media (min-width:701px) and (max-width:1024px){
  .score-policy-section{
    box-sizing:border-box!important;
    width:auto!important;
    max-width:none!important;
    margin-left:32px!important;
    margin-right:32px!important;
  }
}