/* ===== YJH RESPONSIVE FIT V85 =====
   True viewport-centered navigation + actual-width home/contact fit. */

/* ---------- HEADER: keep category navigation on the true viewport center ---------- */
@media (min-width:901px){
  header{
    display:block!important;
    position:fixed!important;
    height:64px!important;
    padding:0!important;
    overflow:visible!important;
  }
  header .brand{
    position:absolute!important;
    left:clamp(18px,1.9vw,34px)!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    min-width:0!important;
    z-index:2!important;
  }
  header .brand img,header .brand-logo{
    width:clamp(60px,4.35vw,80px)!important;
    height:auto!important;
  }
  header .nav{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    width:max-content!important;
    max-width:none!important;
    padding:0!important;
    margin:0!important;
    justify-content:center!important;
    gap:clamp(13px,1.35vw,26px)!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    z-index:3!important;
  }
  header .nav a{
    font-size:clamp(9.5px,.66vw,13px)!important;
    letter-spacing:.08em!important;
    white-space:nowrap!important;
  }
  header .header-right{
    position:absolute!important;
    right:clamp(18px,1.9vw,34px)!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    min-width:max-content!important;
    display:flex!important;
    align-items:center!important;
    gap:clamp(7px,.65vw,11px)!important;
    white-space:nowrap!important;
    z-index:2!important;
  }
  header .lang-switch{gap:clamp(4px,.4vw,7px)!important;flex:0 0 auto!important}
  header .lang-switch a{font-size:clamp(6.5px,.4vw,8px)!important}
  header .place{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    flex:0 0 auto!important;
    font-size:clamp(7px,.46vw,9px)!important;
    letter-spacing:.085em!important;
    white-space:nowrap!important;
  }

  /* JS adds these only if the centered navigation approaches either side group. */
  html.yjh-header-tight header .brand img,
  html.yjh-header-tight header .brand-logo{width:56px!important}
  html.yjh-header-tight header .nav{gap:10px!important}
  html.yjh-header-tight header .nav a{font-size:8.8px!important;letter-spacing:.055em!important}
  html.yjh-header-tight header .header-right{gap:5px!important}
  html.yjh-header-tight header .lang-switch{gap:3px!important}
  html.yjh-header-tight header .lang-switch a{font-size:6.3px!important}
  html.yjh-header-tight header .place{font-size:6.6px!important;letter-spacing:.055em!important}

  html.yjh-header-ultra header .brand img,
  html.yjh-header-ultra header .brand-logo{width:50px!important}
  html.yjh-header-ultra header .nav{gap:7px!important}
  html.yjh-header-ultra header .nav a{font-size:8px!important;letter-spacing:.035em!important}
  html.yjh-header-ultra header .place{font-size:6px!important;letter-spacing:.035em!important}
}

/* iPad / Fold inner screens: preserve the same single-row hierarchy as desktop. */
@media (min-width:600px) and (max-width:900px){
  header{
    display:block!important;
    height:64px!important;
    padding:0!important;
    overflow:visible!important;
  }
  header .brand{
    position:absolute!important;
    left:14px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    z-index:2!important;
  }
  header .brand img,header .brand-logo{width:48px!important;height:auto!important}
  header .nav{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    width:max-content!important;
    padding:0!important;
    margin:0!important;
    justify-content:center!important;
    gap:clamp(7px,1.2vw,11px)!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    z-index:3!important;
  }
  header .nav a{font-size:clamp(7.5px,1.05vw,9px)!important;letter-spacing:.05em!important}
  header .header-right{
    position:absolute!important;
    right:12px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    white-space:nowrap!important;
    z-index:2!important;
  }
  header .place{display:block!important;visibility:visible!important;font-size:6px!important;letter-spacing:.045em!important}
  header .lang-switch{gap:3px!important}
  header .lang-switch a{font-size:6px!important}
  .page{padding-top:96px!important}
}

/* Narrow phones keep the second-row navigation, but center it instead of drifting left. */
@media (max-width:599px){
  header .nav{
    justify-content:center!important;
    gap:clamp(12px,4vw,18px)!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  header .nav a{font-size:clamp(9px,2.65vw,11px)!important}
}

/* ---------- HOME: JS supplies the final fitted size from real available width ---------- */
#page-home .split-left{min-width:0!important}
#page-home .split-title{
  font-size:var(--yjh-home-title-fit,clamp(56px,6.15vw,118px))!important;
  max-width:none!important;
  transform-origin:left bottom!important;
}

@media (min-width:901px) and (max-width:1920px),
       (min-width:901px) and (max-height:1000px){
  #page-home .split-title{
    font-size:var(--yjh-home-title-fit,clamp(48px,4.85vw,96px))!important;
  }
}
@media (min-width:600px) and (max-width:900px){
  #page-home .split-title{
    font-size:var(--yjh-home-title-fit,clamp(38px,6.7vw,58px))!important;
  }
}
@media (max-width:599px){
  #page-home .split-title{
    font-size:var(--yjh-home-title-fit,clamp(40px,13.2vw,60px))!important;
  }
}

/* ---------- CONTACT / KAKAO: use same column rhythm as DIRECT CONTACT ---------- */
@media (min-width:901px){
  #page-studio .kakao-contact-section{
    position:relative!important;
    width:min(1220px,calc(100vw - (var(--pad) * 2)))!important;
    max-width:1220px!important;
    margin:0 auto!important;
    padding:5vw 0 6vw!important;
    display:grid!important;
    grid-template-columns:150px minmax(0,1fr)!important;
    gap:52px!important;
    align-items:start!important;
  }
  #page-studio .kakao-contact-panel{
    grid-column:2!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) clamp(168px,14vw,210px)!important;
    gap:clamp(30px,4vw,56px)!important;
    width:100%!important;
    min-width:0!important;
  }
  #page-studio .kakao-contact-copy{max-width:none!important;min-width:0!important}
  #page-studio .kakao-contact-eyebrow{
    position:absolute!important;
    left:0!important;
    top:calc(5vw + 2px)!important;
    width:150px!important;
    margin:0!important;
  }
  #page-studio .kakao-chat-button{width:min(100%,456px)!important}
  #page-studio .kakao-qr{
    width:clamp(168px,14vw,210px)!important;
    justify-self:end!important;
  }
  #page-studio .kakao-qr img{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1/1!important;
  }
}

@media (min-width:600px) and (max-width:900px){
  #page-studio .kakao-contact-section{
    position:relative!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(130px,.65fr) minmax(0,2fr)!important;
    gap:4vw!important;
    padding:42px 0 54px!important;
  }
  #page-studio .kakao-contact-panel{
    grid-column:2!important;
    grid-template-columns:minmax(0,1fr) 150px!important;
    gap:20px!important;
  }
  #page-studio .kakao-contact-eyebrow{
    position:absolute!important;
    left:0!important;
    top:44px!important;
    margin:0!important;
  }
  #page-studio .kakao-qr{width:150px!important;justify-self:end!important}
  #page-studio .kakao-qr img{width:150px!important;height:150px!important}
}

@media (max-width:599px){
  #page-studio .kakao-contact-section{display:block!important;width:100%!important}
  #page-studio .kakao-contact-panel{display:grid!important;grid-template-columns:1fr!important;gap:28px!important}
  #page-studio .kakao-contact-eyebrow{position:static!important;width:auto!important;margin:0 0 14px!important}
  #page-studio .kakao-qr{justify-self:start!important}
}

/* ===== /YJH RESPONSIVE FIT V85 ===== */