/* ===== YJH RESPONSIVE SYSTEM V81 =====
   Height-aware desktop scaling + tablet/fold continuity + portfolio lightbox UX.
   Loaded after legacy/mobile CSS so these rules are authoritative. */

html,body{max-width:100%;overflow-x:clip}
img{max-width:100%}
.hero h1,.page-title,.split-title,.service-block-lead,.inquiry-lead{max-width:100%;}

/* ---------- Universal compact desktop / 24-inch / laptop ---------- */
@media (min-width:901px){
  header{padding-left:clamp(22px,2.2vw,42px)!important;padding-right:clamp(22px,2.2vw,42px)!important}
  header .nav{gap:clamp(20px,2vw,38px)!important;min-width:0}
  header .nav a{font-size:clamp(11px,.78vw,15px)!important}
  header .header-right{min-width:0;gap:clamp(10px,1.2vw,20px)!important}
  header .place{font-size:clamp(8px,.58vw,11px)!important}

  .service-page,.page{overflow-x:clip}
  .service-shell{max-width:100%}
  .service-page .hero>*,.page-head>*{min-width:0}
  .service-page .hero h1{font-size:clamp(50px,5.35vw,102px)!important;line-height:.89!important;overflow-wrap:normal!important}
  .portfolio-category .hero h1{font-size:clamp(58px,6.6vw,116px)!important}
  #page-about .page-title,#page-studio .page-title{font-size:clamp(54px,6.2vw,112px)!important;line-height:.9!important}
}

@media (min-width:901px) and (max-width:1600px),
       (min-width:901px) and (max-height:920px){
  header .place{display:none!important}
  .service-page{padding-top:108px!important}
  .page{padding-top:102px!important}
  .service-page .hero h1{font-size:clamp(48px,4.9vw,82px)!important}
  .portfolio-category .hero h1{font-size:clamp(54px,5.8vw,94px)!important}
  #page-about .page-title,#page-studio .page-title{font-size:clamp(50px,5.7vw,92px)!important}
  .service-page .hero-intro{font-size:clamp(16px,1.25vw,20px)!important;max-width:390px!important}
  .service-page .lead{font-size:clamp(27px,3.15vw,48px)!important}
  .service-block-lead{font-size:clamp(22px,2vw,32px)!important}
  .service-offer-card{min-height:205px!important}
  .service-step{min-height:185px!important}
  #page-about .lead{font-size:clamp(30px,3.5vw,54px)!important}

  /* Korean fixed lines may wrap naturally before they overflow the viewport. */
  html[lang="ko"] .service-page .ko-service-cta-lines,
  html[lang="ko"] #page-studio .inquiry-lead.contact-fixed-lines{
    width:auto!important;max-width:100%!important;text-wrap:pretty!important
  }
  html[lang="ko"] .service-page .ko-service-cta-lines>span,
  html[lang="ko"] #page-studio .inquiry-lead.contact-fixed-lines>span{
    width:auto!important;white-space:normal!important
  }
}

/* ---------- HOME: collision-proof composition ---------- */
@media (min-width:901px) and (max-width:1920px),
       (min-width:901px) and (max-height:1000px){
  #page-home .split-left{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    min-width:0!important;
    overflow:hidden!important;
    padding:clamp(26px,2.4vw,46px)!important;
  }
  #page-home .split-kicker,
  #page-home .split-title,
  #page-home .split-meta{
    position:static!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    transform:none!important;
  }
  #page-home .split-kicker{
    margin:0 0 clamp(14px,1.8vh,22px)!important;
    font-size:clamp(10px,.72vw,14px)!important;
    line-height:1.25!important;
    letter-spacing:.09em!important;
  }
  #page-home .split-title{
    margin:0!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:clamp(54px,5vw,100px)!important;
    line-height:.84!important;
    letter-spacing:-.055em!important;
    font-weight:500!important;
    white-space:nowrap!important;
    max-width:100%!important;
  }
  #page-home .split-meta{
    position:static!important;
    margin-top:clamp(18px,2.6vh,30px)!important;
    width:min(78%,720px)!important;
    max-width:calc(100% - 82px)!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:clamp(12px,1.35vw,24px)!important;
    font-size:clamp(9px,.62vw,12px)!important;
    line-height:1.32!important;
    letter-spacing:.045em!important;
  }
  #page-home .hero-instagram{
    position:absolute!important;
    right:clamp(24px,2.4vw,46px)!important;
    bottom:clamp(26px,2.4vw,46px)!important;
    left:auto!important;top:auto!important;
    transform:none!important;
    font-size:clamp(8px,.58vw,11px)!important;
  }
}

@media (min-width:901px) and (max-height:760px){
  #page-home .split-left{padding-top:20px!important;padding-bottom:20px!important}
  #page-home .split-kicker{margin-bottom:10px!important;font-size:9px!important}
  #page-home .split-title{font-size:clamp(48px,4.25vw,76px)!important}
  #page-home .split-meta{margin-top:14px!important;font-size:8.5px!important;gap:10px!important}
  #page-home .hero-instagram{bottom:20px!important}
}

/* ---------- TABLETS / FOLD INNER DISPLAY: keep desktop visual logic ---------- */
@media (min-width:600px) and (max-width:900px){
  /* Keep the compact two-row touch header, but restore desktop-like page geometry. */
  header .brand-logo,header .brand img{width:68px!important}
  header .nav{justify-content:center!important;gap:clamp(16px,3vw,28px)!important}
  header .nav a{font-size:clamp(9px,1.45vw,11px)!important}

  #page-home .split-hero{
    display:grid!important;
    grid-template-columns:minmax(0,48%) minmax(0,52%)!important;
    grid-template-rows:1fr!important;
    height:100svh!important;
    min-height:620px!important;
    padding-top:calc(96px + env(safe-area-inset-top))!important;
    overflow:hidden!important;
  }
  #page-home .split-left{
    order:1!important;
    position:relative!important;
    height:100%!important;min-height:0!important;
    padding:clamp(20px,3.2vw,30px)!important;
    display:flex!important;flex-direction:column!important;justify-content:flex-end!important;
    overflow:hidden!important;
  }
  #page-home .split-right{
    order:2!important;
    width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;
  }
  #page-home .split-kicker,#page-home .split-title,#page-home .split-meta{
    position:static!important;transform:none!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important
  }
  #page-home .split-kicker{margin:0 0 13px!important;font-size:8px!important;line-height:1.25!important}
  #page-home .split-title{
    margin:0!important;
    font-size:clamp(43px,7.2vw,64px)!important;
    line-height:.84!important;letter-spacing:-.055em!important;white-space:nowrap!important;max-width:100%!important
  }
  #page-home .split-meta{
    margin:18px 0 0!important;width:100%!important;max-width:100%!important;
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px 14px!important;
    font-size:7.5px!important;line-height:1.35!important
  }
  #page-home .split-meta span:last-child{grid-column:1/-1!important}
  #page-home .hero-instagram{display:none!important}

  .page,.service-page{padding-top:calc(118px + env(safe-area-inset-top))!important;padding-left:clamp(22px,4vw,34px)!important;padding-right:clamp(22px,4vw,34px)!important}
  .page-head{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important;gap:4vw!important;align-items:end!important}
  .page-title{font-size:clamp(44px,8vw,68px)!important;line-height:.9!important;overflow-wrap:normal!important}
  .page-intro{margin:0 0 4px!important;font-size:12px!important;line-height:1.58!important}

  #page-about .about-grid,#page-about .credits{display:grid!important;grid-template-columns:minmax(120px,.65fr) minmax(0,2fr)!important;gap:4vw!important}
  #page-about .bodycopy{display:grid!important;grid-template-columns:1fr 1fr!important;gap:3vw!important;max-width:100%!important}
  #page-about .bodycopy p{font-size:12px!important}
  #page-about .credit-cols{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4vw!important}

  .service-page .hero{display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr)!important;gap:4vw!important;align-items:end!important}
  .service-page .hero h1{font-size:clamp(38px,6.8vw,56px)!important;line-height:.9!important}
  .service-page .hero-intro{margin:0 0 4px!important;font-size:12.5px!important;line-height:1.55!important;max-width:100%!important}
  .service-page .work-grid,.portfolio-category .work-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:18px!important}
  .service-page .work-card,.service-page .work-card:nth-child(2),.portfolio-category .work-card{margin:0 0 28px!important}
  .service-page .service-visuals{display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(180px,.65fr)!important;gap:16px!important}
  .service-page .service-visuals figure:last-child{width:88%!important}
  .service-page .service-offer-grid,.service-page .service-process-grid{grid-template-columns:1fr 1fr!important}
  .service-page .service-output{grid-template-columns:1fr 1fr!important;gap:5vw!important}
  .service-page .cta{grid-template-columns:minmax(120px,.55fr) minmax(0,1.45fr)!important;gap:4vw!important}

  #page-studio .studio-grid{display:grid!important;grid-template-columns:minmax(130px,.65fr) minmax(0,2fr)!important;gap:4vw!important}
  #page-studio .contact-grid{grid-template-columns:1fr 1fr!important}
  #page-studio .contact-row:nth-child(odd){padding-right:3vw!important}
  #page-studio .contact-row:nth-child(even){padding-left:3vw!important;border-left:1px solid var(--line)!important}
  #page-studio .inquiry-section{width:100%!important}
  #page-studio .inquiry-head{grid-template-columns:minmax(115px,.55fr) minmax(0,1.45fr)!important;gap:4vw!important}
  #page-studio .project-inquiry-form{grid-template-columns:1fr 1fr!important;column-gap:26px!important}
  #page-studio .inquiry-field-full,#page-studio .privacy-consent,#page-studio .inquiry-submit-row{grid-column:1/-1!important}
}

/* ---------- NARROW PHONES / FOLD OUTER: same hierarchy, no clipping ---------- */
@media (max-width:599px){
  .split-title,.page-title,.service-page .hero h1{max-width:100%!important;overflow-wrap:normal!important;word-break:normal!important}
  #page-home .split-title{font-size:clamp(46px,14.1vw,66px)!important;white-space:nowrap!important}
  .page-title{font-size:clamp(42px,13vw,62px)!important}
  .service-page .hero h1{font-size:clamp(36px,10.4vw,52px)!important}
  .service-page .ko-service-cta-lines,.service-page .ko-service-cta-lines>span,
  #page-studio .inquiry-lead.contact-fixed-lines,#page-studio .inquiry-lead.contact-fixed-lines>span{
    width:auto!important;max-width:100%!important;white-space:normal!important
  }
}

/* ---------- Portfolio grid performance / stable layout ---------- */
.portfolio-category .yjh-auto-portfolio-card img{
  width:100%!important;height:auto!important;content-visibility:auto;
}
.portfolio-category .yjh-auto-portfolio-card{content-visibility:auto;contain-intrinsic-size:600px 450px}

/* ---------- V81 Lightbox: large, easy controls ---------- */
.yjh-v81-lightbox{
  position:fixed;inset:0;z-index:12000;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.975);padding:clamp(20px,3vw,52px);touch-action:none
}
.yjh-v81-lightbox.is-open{display:flex}
.yjh-v81-lightbox-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(54px,5vw,78px) clamp(64px,7vw,112px)}
.yjh-v81-lightbox img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;opacity:1;transition:opacity .16s ease}
.yjh-v81-lightbox.is-loading img{opacity:.72}
.yjh-v81-lightbox.is-loading::after{
  content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border:1px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:yjh-spin .7s linear infinite;z-index:3
}
@keyframes yjh-spin{to{transform:rotate(360deg)}}
.yjh-v81-lightbox button,
.yjh-auto-lightbox button{
  position:fixed!important;z-index:5!important;display:flex!important;align-items:center!important;justify-content:center!important;
  width:58px!important;height:58px!important;padding:0!important;border:1px solid rgba(255,255,255,.24)!important;border-radius:50%!important;
  background:rgba(8,8,8,.62)!important;color:#fff!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;
  cursor:pointer!important;transition:background .18s ease,border-color .18s ease,transform .18s ease!important
}
.yjh-v81-lightbox button:hover,.yjh-auto-lightbox button:hover{background:rgba(28,28,28,.86)!important;border-color:rgba(255,255,255,.6)!important}
.yjh-v81-lightbox-close,.yjh-auto-lightbox-close{top:max(24px,env(safe-area-inset-top))!important;right:max(26px,env(safe-area-inset-right))!important;font-size:36px!important;line-height:1!important}
.yjh-v81-lightbox-prev,.yjh-v81-lightbox-next,.yjh-auto-lightbox-prev,.yjh-auto-lightbox-next{top:50%!important;transform:translateY(-50%)!important;font-size:34px!important;line-height:1!important}
.yjh-v81-lightbox-prev,.yjh-auto-lightbox-prev{left:max(24px,env(safe-area-inset-left))!important}
.yjh-v81-lightbox-next,.yjh-auto-lightbox-next{right:max(24px,env(safe-area-inset-right))!important}
.yjh-v81-lightbox-count{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);font-size:10px;letter-spacing:.14em;color:#9a9a96;z-index:5}

@media (max-width:900px){
  .yjh-v81-lightbox-stage{padding:70px 14px 68px}
  .yjh-v81-lightbox button,.yjh-auto-lightbox button{width:54px!important;height:54px!important}
  .yjh-v81-lightbox-close,.yjh-auto-lightbox-close{top:max(14px,env(safe-area-inset-top))!important;right:max(14px,env(safe-area-inset-right))!important;font-size:32px!important}
  .yjh-v81-lightbox-prev,.yjh-auto-lightbox-prev{left:max(10px,env(safe-area-inset-left))!important}
  .yjh-v81-lightbox-next,.yjh-auto-lightbox-next{right:max(10px,env(safe-area-inset-right))!important}
  .yjh-v81-lightbox-prev,.yjh-v81-lightbox-next,.yjh-auto-lightbox-prev,.yjh-auto-lightbox-next{font-size:30px!important;background:rgba(8,8,8,.72)!important}
}

@media (pointer:coarse){
  .yjh-v81-lightbox button,.yjh-auto-lightbox button{width:60px!important;height:60px!important}
}
/* ===== /YJH RESPONSIVE SYSTEM V81 ===== */

/* ===== YJH HOME VERTICAL TUNE V83 =====
   Move the approved compact-desktop home typography group up by ~24px
   without changing type scale or large-screen composition. */
@media (min-width:901px) and (max-height:1000px){
  #page-home .split-left{
    padding-bottom:calc(clamp(26px,2.4vw,46px) + 24px)!important;
  }
  #page-home .hero-instagram{
    bottom:calc(clamp(26px,2.4vw,46px) + 24px)!important;
  }
}
@media (min-width:901px) and (max-height:760px){
  #page-home .split-left{
    padding-bottom:44px!important;
  }
  #page-home .hero-instagram{
    bottom:44px!important;
  }
}
/* ===== /YJH HOME VERTICAL TUNE V83 ===== */