/* =========================================================
   엘비 인테리어 — 레이아웃 정렬 + 모션 업그레이드
   (style.css 뒤에 불러옵니다. 원본 style.css는 수정하지 않음)
   ========================================================= */

/* ---------- 1. 좌우 여백·열 정렬 통일 ---------- */
:root{
  --gutter:clamp(1.5rem,6vw,7rem);          /* 모든 섹션 공통 좌우 여백 */
  --col-gap:clamp(3rem,8vw,9rem);           /* 2단 레이아웃 공통 간격 */
  --cols:1.05fr 1fr;                        /* 2단 레이아웃 공통 비율 */
  --ease-out:cubic-bezier(.19,1,.22,1);
  --ease-io:cubic-bezier(.77,0,.18,1);
}
.site-header{padding-left:var(--gutter);padding-right:var(--gutter)}
.section-pad{padding-left:var(--gutter);padding-right:var(--gutter)}
.project-grid{padding-left:var(--gutter);padding-right:var(--gutter)}
.image-note{padding-left:var(--gutter);padding-right:var(--gutter)}
.contact{padding-left:var(--gutter);padding-right:var(--gutter)}
footer{padding-left:var(--gutter);padding-right:var(--gutter)}

.intro-grid,.process-grid{grid-template-columns:var(--cols);gap:var(--col-gap)}
.contact{display:grid;grid-template-columns:var(--cols);gap:var(--col-gap);align-items:start}
.contact-copy{max-width:none;padding:0}
.inquiry-form{width:100%}
footer{grid-template-columns:var(--cols);column-gap:var(--col-gap)}

@media(min-width:821px){
  .hero-copy{left:var(--gutter)}
  .scroll-cue{left:var(--gutter)}
}
@media(max-width:820px){
  .hero-copy{padding-left:var(--gutter);padding-right:var(--gutter)}
  .intro-grid,.process-grid,.contact,footer{grid-template-columns:1fr}
  .intro-grid,.process-grid,.contact{gap:3rem}
}

/* ---------- 0. 한글 줄바꿈: 단어 단위로만 끊고 줄 길이 균형 ---------- */
h1,h2,h3,p,li,.reveal-line>span{word-break:keep-all;overflow-wrap:break-word}
h1,h2,.reveal-line>span{text-wrap:balance}

/* ---------- 2. 인트로 로더 ---------- */
.loader{position:fixed;inset:0;z-index:500;background:var(--ink);display:grid;place-items:center;
  transition:transform 1s var(--ease-io);animation:loaderFailsafe .01s 4.5s forwards}
.loader-inner{display:flex;align-items:center;gap:1rem;color:#fff;font:700 1.05rem "Noto Sans KR",sans-serif;letter-spacing:.04em;
  opacity:0;transform:translateY(14px);animation:loaderIn .8s var(--ease-out) .1s forwards}
.loader-inner img{width:54px;height:54px;background:#fff;border-radius:50%;padding:3px}
.loader-bar{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;
  animation:loaderBar 1.1s var(--ease-io) forwards}
.is-loaded .loader{transform:translateY(-100%)}
.is-loaded .loader-inner{transition:opacity .3s;opacity:0}
.skip-loader .loader,html:not(.js) .loader{display:none}
@keyframes loaderIn{to{opacity:1;transform:none}}
@keyframes loaderBar{to{transform:scaleX(1)}}
@keyframes loaderFailsafe{to{visibility:hidden}}

/* ---------- 3. 스크롤 진행바 + 헤더 ---------- */
.scroll-progress{position:fixed;left:0;top:0;width:100%;height:3px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:400;pointer-events:none}
.site-header{position:sticky;top:0;z-index:50;transition:transform .5s var(--ease-out),box-shadow .3s}
.site-header.is-scrolled{box-shadow:0 10px 30px rgba(25,50,74,.08)}
.site-header.is-hidden{transform:translateY(-100%)}

.site-header nav a:not(.nav-cta){position:relative}
.site-header nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.site-header nav a:hover{opacity:1}
.site-header nav a:not(.nav-cta):hover::after,.site-header nav a.current::after{transform:scaleX(1);transform-origin:left}
.nav-cta{position:relative;overflow:hidden;isolation:isolate;transition:translate .4s var(--ease-out)}
.nav-cta::before{content:"";position:absolute;inset:0;background:var(--ink);z-index:-1;transform:translateY(101%);transition:transform .45s var(--ease-out)}
.nav-cta:hover::before{transform:none}
@media(max-width:820px){
  .site-header nav.open{animation:navDrop .45s var(--ease-out)}
  .site-header nav a:not(.nav-cta)::after{bottom:-3px;right:auto;width:2.5rem}
}
@keyframes navDrop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

/* ---------- 4. 히어로 ---------- */
.js .hero>img{scale:1.18;transition:scale 2.6s var(--ease-out);will-change:translate}
.is-loaded .hero>img{scale:1.04}
.js .hero-shade{opacity:0;transition:opacity 1.6s ease .3s}
.is-loaded .hero-shade{opacity:1}

.reveal-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.reveal-line>span{display:block}
.js .reveal-line>span{transform:translateY(110%);transition:transform 1.2s var(--ease-out) calc(var(--i,0) * .12s + var(--base,0s))}
.is-in .reveal-line>span,.is-loaded .hero .reveal-line>span{transform:none}
.hero{--base:.45s}

.js .hero-copy>.eyebrow,.js .hero-copy>p:not(.eyebrow),.js .hero-copy>.text-link{opacity:0;translate:0 26px;
  transition:opacity 1s ease,translate 1.2s var(--ease-out)}
.js .hero-copy>.eyebrow{transition-delay:.3s}
.js .hero-copy>p:not(.eyebrow){transition-delay:.85s}
.js .hero-copy>.text-link{transition-delay:1.05s}
.is-loaded .hero-copy>.eyebrow,.is-loaded .hero-copy>p:not(.eyebrow),.is-loaded .hero-copy>.text-link{opacity:1;translate:0 0}
.text-link span{display:inline-block;transition:transform .35s var(--ease-out)}
.text-link:hover span{transform:translate(5px,5px)}

.scroll-cue{position:absolute;bottom:1.8rem;display:flex;align-items:center;gap:.9rem;font:600 .62rem "DM Sans";letter-spacing:.26em;color:var(--ink);z-index:2;
  opacity:0;transition:opacity 1s 1.4s}
.is-loaded .scroll-cue{opacity:1}
.scroll-cue i{position:relative;width:64px;height:1px;background:rgba(25,50,74,.2);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--accent);animation:cue 1.9s var(--ease-io) infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@media(max-width:820px){.scroll-cue{display:none}}

/* ---------- 5. 공통 스크롤 등장 ---------- */
.js [data-reveal]{opacity:0;transform:translateY(42px);transition:opacity .9s ease,transform 1.1s var(--ease-out);transition-delay:var(--d,0s)}
body{overflow-x:clip}
.js [data-reveal="right"]{transform:translateX(70px)}
@media(max-width:820px){.js [data-reveal="right"]{transform:translateY(42px)}}
.js [data-reveal="pop"]{transform:scale(.6)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* 전문분야 리스트: 선이 그어지며 등장 + 호버 */
.expertise-list article{position:relative;border-top-color:transparent;transition:padding-left .45s var(--ease-out)}
.expertise-list article::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:#cbd6d9;transform-origin:left;transition:transform 1.3s var(--ease-io) var(--d,0s)}
.js .expertise-list article::before{transform:scaleX(0)}
.js .expertise-list article.is-in::before{transform:scaleX(1)}
.expertise-list article::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.js .expertise-list article[data-reveal]{transition:opacity .9s ease,transform 1.1s var(--ease-out),padding-left .45s var(--ease-out);transition-delay:var(--d,0s),var(--d,0s),0s}
.expertise-list article:hover{padding-left:.9rem}
.expertise-list article:hover::after{transform:scaleX(1)}
.expertise-list h3{transition:color .3s}
.expertise-list article:hover h3{color:var(--accent)}

/* ---------- 6. 마퀴 띠 ---------- */
.marquee{background:var(--accent);color:#fff;overflow:hidden;white-space:nowrap;padding:.7rem 0;position:relative;z-index:1}
.marquee-track{display:inline-flex;align-items:center;gap:1.4rem;padding-right:1.4rem;will-change:transform;
  font:700 clamp(.9rem,1.4vw,1.2rem)/1 "DM Sans",sans-serif;letter-spacing:.02em}
.marquee-track .ko{font-family:"Jua","Noto Sans KR",sans-serif;font-weight:400}
.marquee-track .outline{color:transparent;-webkit-text-stroke:1px #fff}
.marquee-track i{font-style:normal;font-size:.5em;opacity:.85}

/* ---------- 7. 프로젝트 ---------- */
.projects-head{position:relative;overflow:hidden}
.projects-head>*:not(.projects-bg-word){position:relative;z-index:1}
.projects-bg-word{position:absolute;right:-4%;bottom:-.2em;font:700 clamp(6rem,19vw,18rem)/1 "DM Sans",sans-serif;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.16);white-space:nowrap;pointer-events:none;will-change:translate}

.project-grid{counter-reset:proj}
.project-card{counter-increment:proj}
.project-media{position:relative;overflow:hidden;background:var(--cream)}
.project-card:hover img{transform:none}
.project-media img{scale:1.12;transition:scale 1.4s var(--ease-out);will-change:translate}
.project-card:hover .project-media img{scale:1.18}
.js .project-media{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease-io) var(--d,0s)}
.js .project-media img{scale:1.35}
.js .project-card.is-in .project-media{clip-path:inset(0 0 0 0)}
.js .project-card.is-in .project-media img{scale:1.12}
.js .project-card.is-in:hover .project-media img{scale:1.18}

.project-meta{position:relative;left:auto;right:auto;bottom:auto}
.project-meta::before{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.project-card:hover .project-meta::before{transform:scaleX(1)}
.project-meta::after{content:"0" counter(proj) " / 06";position:absolute;right:0;top:1.35rem;font:700 .72rem "DM Sans";letter-spacing:.12em;color:#a8b4bc}
.project-meta h3{transition:color .3s}
.project-card:hover .project-meta h3{color:var(--accent)}
.js .project-meta>*{opacity:0;translate:0 22px;transition:opacity .8s ease,translate 1s var(--ease-out)}
.js .project-meta>span{transition-delay:calc(var(--d,0s) + .55s)}
.js .project-meta>h3{transition-delay:calc(var(--d,0s) + .65s)}
.js .project-meta>p{transition-delay:calc(var(--d,0s) + .75s)}
.js .project-card.is-in .project-meta>*{opacity:1;translate:0 0}

/* ---------- 8. 진행 과정: 스크롤 따라 채워지는 타임라인 ---------- */
@media(min-width:821px){.process-grid>div:first-child{position:sticky;top:7rem;align-self:start}}
.process ol{position:relative}
.process ol::before,.process ol::after{content:"";position:absolute;left:14px;top:calc(1.8rem + 15px);bottom:3.5rem;width:2px;background:#c3d1d2}
.process ol::after{background:var(--accent);transform-origin:top;transform:scaleY(var(--line,0))}
.process li{position:relative;z-index:1;border-top-color:transparent}
.process li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:#c3d1d2;transform-origin:left;transition:transform 1.3s var(--ease-io) var(--d,0s)}
.js .process li::before{transform:scaleX(0)}
.js .process li.is-in::before{transform:scaleX(1)}
.process li>span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#eaf1f0;border:1.5px solid #c3d1d2;
  font-size:.62rem;transition:background .4s,border-color .4s,color .4s,transform .5s var(--ease-out)}
.process li.active>span{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.18)}
.process li h3{transition:color .4s}
.process li.active h3{color:var(--accent)}

/* ---------- 9. 문의 폼 ---------- */
.inquiry-form label:focus-within>span{color:var(--accent)}
.inquiry-form label>span{transition:color .25s}
.inquiry-form button{transition:background .25s,translate .4s var(--ease-out)}
.inquiry-form button span{display:inline-block;transition:transform .35s var(--ease-out)}
.inquiry-form button:hover span{transform:translate(4px,-4px)}
.inquiry-form button:hover{background:var(--accent)}

/* ---------- 10. 맨 위로 버튼 ---------- */
.to-top{position:fixed;right:1.4rem;bottom:1.4rem;z-index:60;width:54px;height:54px;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer;
  display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(20px) scale(.8);
  transition:opacity .4s,transform .5s var(--ease-out),translate .4s var(--ease-out),background .3s;box-shadow:0 10px 30px rgba(25,50,74,.25)}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:var(--accent)}
.to-top svg{position:absolute;inset:3px;width:48px;height:48px;transform:rotate(-90deg)}
.to-top circle{fill:none;stroke:rgba(255,255,255,.18);stroke-width:2}
.to-top .ring{stroke:#fff;stroke-dasharray:125.7;stroke-dashoffset:calc(125.7 - 125.7 * var(--p,0))}
.to-top span{font:600 1.1rem "DM Sans";position:relative}

/* ---------- 11. 커서 (마우스 사용 PC만) ---------- */
.cursor{position:fixed;left:0;top:0;z-index:450;pointer-events:none}
.cursor span{position:absolute;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:1.5px solid var(--accent);
  display:grid;place-items:center;text-align:center;padding:0 10px;color:transparent;font:700 .6rem/1.3 "DM Sans";letter-spacing:.14em;opacity:0;
  transition:width .4s var(--ease-out),height .4s var(--ease-out),margin .4s var(--ease-out),background .3s,border-color .3s,color .2s,opacity .3s}
.cursor.on span{opacity:1}
.cursor.hover span{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(232,93,52,.12)}
.cursor.card span{width:118px;height:118px;margin:-59px 0 0 -59px;background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- 12. 모션 최소화 설정 존중 ---------- */
@media(prefers-reduced-motion:reduce){
  .loader,.cursor,.scroll-cue{display:none!important}
  .js [data-reveal],.js .reveal-line>span,.js .hero-copy>*,.js .project-meta>*{opacity:1!important;transform:none!important;translate:none!important;transition:none!important}
  .js .project-media{clip-path:none!important;transition:none!important}
  .js .hero>img,.js .project-media img{scale:1!important;translate:none!important;transition:none!important}
  .js .expertise-list article::before,.js .process li::before{transform:none!important}
  .js .hero-shade{opacity:1!important}
}

/* ---------- 13. 하단(푸터) 높이 2/3로 축소 ---------- */
footer{padding-top:2.6rem;padding-bottom:1.3rem;row-gap:1.6rem}
.footer-brand img.brand-mark{width:40px;height:40px}
.company-info{gap:.4rem 2rem}
.copyright{margin-top:.6rem;padding-top:1rem}