/* ==========================================================================
   HM SIGN — 인터랙션 한 겹 (2차 폴리싱)  motion.css

   이 파일은 화면을 다시 그리지 않는다. 이미 있는 화면 위에 "반응"만 얹는다.
   그래서 home-v18.css / about-v18.css / site.css 는 손대지 않는다.

   ⚠ 반드시 각 페이지의 마지막 스타일시트로 불러올 것.
     내부 페이지 site.css 에 이미 있는 규칙(.nav a:after 의 밑줄,
     .live-portfolio-card 의 확대)과 같은 자리를 다루기 때문에,
     순서가 뒤바뀌면 색과 곡선이 예전 값으로 되돌아간다.

   색 원칙 — 평소에는 흑백. 손이 닿을 때만 하늘색이 나온다.
     hover · active · 선택된 필터

   ⚠ 이 사이트가 하지 않기로 한 것 (2026-08-21, 만들었다가 전부 걷어냄)
     · 화면을 통째로 덮는 페이지 전환막 (§3)
     · 기본 커서를 감추고 띄우는 동그란 커서 (§4)
     · 마우스 좌표를 따라 움직이는 사진·버튼 (§8·9)
     반응은 hover / active 같은 "상태"로만 준다. 되살리려면 먼저 물어볼 것.

   ⚠ 하늘색은 밝다. 흰 글씨를 얹으면 안 읽힌다.
     칠(fill)에는 --sky / --sky-strong,
     흰 바탕 위 글자에는 --sky-ink 를 쓴다.
   ========================================================================== */

:root{
  /* ⚠ 파란색은 사이트 전체에서 하나다.

     처음에는 브리프에 적힌 색(#a9d8f5 / #eaf6fd / #77c3ee)을 그대로 넣었는데,
     사이트가 이미 쓰고 있던 #56c1de 와 나란히 놓이면서 한 화면에 파란색이
     세 가지가 됐다. 배지는 #56c1de, 띠는 #a9d8f5, 번호는 #1c6f96.
     "통일성은 다른데는 또 다른색이고 제각각이네" 라는 말을 그대로 다시 만든 셈이다.

     그래서 새 색을 들여오는 대신, 원래 쓰던 #56c1de 한 계열로 맞춘다.
     밝기만 다르고 색상(hue)은 하나여야 한 벌로 보인다. */
  --sky:        #56c1de;   /* 그 하나. 칠·전환막·밑줄·커서 전부 이 색 */
  --sky-light:  #eaf7fb;   /* 같은 색을 흰색에 섞어 옅게 (바탕용) */
  --sky-strong: #56c1de;   /* 따로 두지 않는다 — 두는 순간 색이 둘이 된다 */
  --sky-ink:    #1c7f9f;   /* 흰 바탕 위 글자용. site.css 의 --gold-text 와 같은 값이다.
                              밝은 하늘로 글자를 쓰면 안 읽혀서 어둡게 내린 것이고,
                              이미 사이트가 쓰던 값이라 여기서 새로 만들지 않는다. */

  /* 움직임은 하나의 곡선으로 통일한다. 튀거나 출렁이지 않는다.
     지금 사이트에는 (.22,.61,.36,1) (.2,.72,.2,1) (.2,.65,.3,1) … 9종이 섞여 있다.
     여기서 덮는 자리만이라도 하나로 맞춘다. */
  --mo-ease:  cubic-bezier(.16, 1, .3, 1);
  --mo-quick: .3s;   /* 누름·밑줄 같은 짧은 반응 */
  --mo-img:   .6s;   /* 사진 확대 */
  --mo-sect:  .85s;  /* 구간 등장 */
}

/* ==========================================================================
   1. 눌렀다는 느낌 — 반응 없는 링크를 없앤다
   ========================================================================== */
a,button,summary,[role="button"]{ -webkit-tap-highlight-color:transparent }

html.mo a:active,
html.mo button:active,
html.mo [role="button"]:active{ transform:scale(.98);transition:transform .08s var(--mo-ease) }

/* 사진 카드는 이미 hover 에서 살짝 떠 있다. 그 자세를 유지한 채 눌린다 —
   translateY 를 빼면 누를 때 카드가 아래로 툭 떨어져 보인다. */
html.mo .live-portfolio-card:active{ transform:translateY(-2px) scale(.99) }
html.mo .ba-card:active,
html.mo .kind:active{ transform:scale(.995) }

/* ==========================================================================
   2. 머리글 밑줄 — 왼쪽에서 오른쪽으로 그어진다

   내부 페이지(site.css)에는 이미 같은 동작이 있다. currentColor 1px 을
   right:100%→0 으로 움직인다. 여기서는 색을 하늘색으로, 곡선을 통일값으로
   바꾸고 transform 으로 굴린다. 홈(home-v18.css)에는 밑줄이 아예 없어
   같은 규칙이 새로 만들어 준다. 두 페이지가 같은 모습이 된다.
   ========================================================================== */
html.mo .nav a,
html.mo .ft-nav a,
html.mo .footer-links a{ position:relative }

html.mo .nav a::after,
html.mo .ft-nav a::after,
html.mo .footer-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--sky-strong);opacity:1;border-radius:1px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--mo-quick) var(--mo-ease);
}
html.mo .nav a:hover::after,          html.mo .nav a:focus-visible::after,
html.mo .ft-nav a:hover::after,       html.mo .ft-nav a:focus-visible::after,
html.mo .footer-links a:hover::after, html.mo .footer-links a:focus-visible::after{ transform:scaleX(1) }

/* 지금 보고 있는 쪽은 늘 그어져 있다 */
html.mo .nav a[aria-current="page"]::after{ transform:scaleX(1) }
html.mo .header.inner .nav a[aria-current="page"],
html.mo .header.inner .nav a:hover{ color:var(--sky-ink) }

/* ==========================================================================
   3. 페이지 전환 — 걷어냈다 (2026-08-21)

   화면 전체를 색으로 덮었다가 걷는 연출이었다. 대표님이 싫다고 하셔서 뺐다.
   같이 없어진 것: 링크 클릭을 가로채던 코드. 이제 브라우저가 바로 이동하므로
   페이지 넘어가는 게 오히려 빨라졌다.

   ⚠ 되살리지 말 것. 되살리려면 먼저 물어볼 것.
   ========================================================================== */

/* 아래 keyframes 는 전환막이 아니라 "사진이 화면에 들어올 때 막이 걷히는" 연출이
   쓴다(§5). 전환막을 걷어냈다고 같이 지우면 사진이 가려진 채로 남는다. */
@keyframes mo-unmask{
  from{ clip-path:inset(0 0 100% 0) }
  to  { clip-path:inset(0 0 0 0) }
}

/* ==========================================================================
   4. 커서 — 걷어냈다 (2026-08-21)

   사진 위에서 기본 커서를 감추고 하늘색 동그라미(VIEW)를 띄웠다.
   대표님이 싫다고 하셔서 뺐다. 커서는 브라우저 것을 그대로 쓴다.
   ⚠ 다시 만들지 말 것.
   ========================================================================== */

/* ==========================================================================
   5. 사진이 화면에 들어올 때 막이 걷힌다

   ★ animation 으로 쓴다. 예전에 transition 으로 만들었다가, 화면 갱신이
     멈춘 환경에서 시작값(가려짐)에 굳어 사진이 통째로 사라진 적이 있다.
     animation … both 는 시작 전에도 끝난 뒤에도 정해진 값에 머문다.
   ★ 그리고 js 가 살아 있을 때만(html.mo) 숨긴다. 스크립트가 죽으면 그냥 보인다.
   ========================================================================== */
html.mo [data-mo-reveal].shown       { animation:mo-unmask var(--mo-sect) var(--mo-ease) both }
html.mo [data-mo-reveal].shown img,
html.mo [data-mo-reveal].shown > *   { animation:mo-settle var(--mo-sect) var(--mo-ease) both }
@keyframes mo-settle{ from{ transform:scale(1.05) } to{ transform:none } }

/* ==========================================================================
   5-2. 섹션이 화면에 들어올 때 (2026-08-24)

   ⚠ 모든 요소에 같은 fade 를 거는 것은 일부러 안 한다.
     참고한 메이크사인도 스크롤 등장 연출을 쓰지 않는다 — 화면 밖 섹션의 투명도를
     전부 재봤는데 숨어 있는 것이 0개였다. 그쪽의 "보는 재미"는 등장 연출이 아니라
     섹션마다 판이 다른 데서 온다.
   그래서 여기서는 딱 두 가지만 한다:
     · 섹션 제목 묶음이 아래에서 살짝 올라온다 (18px, 0.6초)
     · 캐러셀 카드가 차례로 든다 (한 장씩 70ms 씩 늦게)
   ★ 기본은 "보임"이다. .shown 이 붙었을 때만 animation 이 돈다.
     스크립트가 죽어도 글과 사진은 그대로 있다.
   ========================================================================== */
html.mo [data-mo-rise].shown{ animation:mo-rise .6s var(--mo-ease) both }
@keyframes mo-rise{
  from{ opacity:0; transform:translate3d(0,18px,0) }
  to  { opacity:1; transform:none }
}
/* 카드가 하나씩 늦게 든다. 순서는 js 가 --i 로 넣는다. */
html.mo [data-mo-stagger].shown > *{
  animation:mo-rise .6s var(--mo-ease) both;
  animation-delay:calc(var(--i, 0) * 70ms);
}

@media (prefers-reduced-motion:reduce){
  html.mo [data-mo-rise].shown,
  html.mo [data-mo-stagger].shown > *{ animation:none !important }
}

/* ==========================================================================
   6. 시공사례 카드 hover

   확대(1.035)와 이름 표시는 site.css 에 이미 있다. 여기서는 브리프가 더한
   두 가지만 얹는다 — 하늘색 얇은 막, 이름이 아래에서 올라오는 것.
   곡선과 시간도 통일값으로 맞춘다.
   ========================================================================== */
@media (hover:hover) and (pointer:fine){
  html.mo .live-portfolio-card img{ transition:transform var(--mo-img) var(--mo-ease),filter .4s var(--mo-ease) }

  /* 사진을 가리지 않을 만큼만 깔린다. 사진 영역(4/3)에만 얹어 글 위로 번지지 않게. */
  html.mo .live-portfolio-card::after{
    content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:4/3;border-radius:8px;
    background:var(--sky);opacity:0;pointer-events:none;mix-blend-mode:multiply;
    transition:opacity var(--mo-img) var(--mo-ease);
  }
  html.mo .live-portfolio-card:hover::after,
  html.mo .live-portfolio-card:focus-visible::after{ opacity:.16 }

  /* 이름은 10px 올라오며 드러난다 (모바일은 항상 떠 있으므로 건드리지 않는다) */
  html.mo .live-portfolio-name{
    transform:translateY(10px);
    transition:opacity var(--mo-img) var(--mo-ease),transform var(--mo-img) var(--mo-ease);
  }
  html.mo .live-portfolio-card:hover .live-portfolio-name,
  html.mo .live-portfolio-card:focus-visible .live-portfolio-name{ transform:none }
}

/* ==========================================================================
   7. 링크 화살표 — 있던 화살표가 오른쪽으로 빠지고 새 화살표가 왼쪽에서 들어온다
      (사이트 전체에서 같은 방식으로 움직인다)
   ========================================================================== */
.mo-arrow{
  display:inline-block;position:relative;width:1em;height:1em;overflow:hidden;
  vertical-align:-.11em;margin-left:.4em;
}
.mo-arrow b,.mo-arrow i{
  position:absolute;inset:0;display:grid;place-items:center;
  font-style:normal;font-weight:inherit;
  transition:transform var(--mo-quick) var(--mo-ease);
}
.mo-arrow i{ transform:translateX(-120%) }

/* 홈의 "시공사례 전체 보기" 알약 버튼은 display:grid + place-items:center 다.
   그대로 두면 화살표가 글자 옆이 아니라 아랫줄로 떨어진다.
   같은 가운데 정렬을 flex 로 다시 만들어 한 줄에 세운다 (모양은 그대로). */
html.mo .more a{ display:flex;align-items:center;justify-content:center }
html.mo a:hover .mo-arrow b,   html.mo a:focus-visible .mo-arrow b,
html.mo button:hover .mo-arrow b, html.mo button:focus-visible .mo-arrow b{ transform:translateX(120%) }
html.mo a:hover .mo-arrow i,   html.mo a:focus-visible .mo-arrow i,
html.mo button:hover .mo-arrow i, html.mo button:focus-visible .mo-arrow i{ transform:none }

/* ==========================================================================
   8·9. 마우스를 따라 움직이던 것들 — 걷어냈다 (2026-08-21)

   버튼이 커서 쪽으로 끌려오던 것(자석), 첫 화면 사진이 마우스를 따라
   ±8px 움직이던 것(시차이동). 둘 다 뺐다.

   ⚠ 마우스 좌표를 따라 무언가를 움직이는 연출은 이 사이트에 넣지 않는다.
     반응은 hover / active 같은 "상태"로만 준다.
   ========================================================================== */

/* ==========================================================================
   10. 고른 것 — 필터에 하늘색 밑줄. 검은 배경은 site.css 것을 그대로 둔다
   ========================================================================== */
html.mo .filter button{ position:relative;transition:border-color var(--mo-quick) var(--mo-ease),color var(--mo-quick) var(--mo-ease) }
html.mo .filter button:hover{ border-color:var(--sky-strong);color:var(--sky-ink) }
html.mo .filter button.active:hover{ color:#fff }
html.mo .filter button.active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:7px;height:2px;
  background:var(--sky);border-radius:1px;
}

/* ==========================================================================
   11. 사인 종류 목록 — 한 줄에 손을 올리면 하늘색이 깔리고 화살표가 움직인다

   줄이 밀리는 것(padding-left)과 테두리 색은 site.css 에 이미 있다.
   여기서는 옅은 하늘색 바탕과 화살표만 더하고, 시간을 통일값(0.4s)으로 맞춘다.
   ⚠ 마우스가 있을 때만. 손가락에서는 :hover 가 눌린 채 남아 줄이 밀린 상태로 굳는다.
   ========================================================================== */
/* 가상요소를 z-index:-1 로 깔면 상위 요소의 배경에 가려질 수 있다.
   그래서 <a> 자체의 배경을 왼쪽에서 오른쪽으로 펼친다 — 겹침 문제가 아예 없고
   밑줄이 그어지는 방향과도 같은 방향이라 손맛이 하나로 읽힌다. */
@media (hover:hover) and (pointer:fine){
  html.mo .service-list a{
    background-image:linear-gradient(90deg,var(--sky-light),rgba(234,246,253,0) 62%);
    background-repeat:no-repeat;
    background-size:0 100%;
    transition:border-color .4s var(--mo-ease),padding-left .4s var(--mo-ease),
               background-size .4s var(--mo-ease);
  }
  html.mo .service-list a:hover,
  html.mo .service-list a:focus-visible{ background-size:100% 100% }
  html.mo .service-list a:hover small{ color:var(--sky-ink) }
}
/* 화살표는 비어 있던 네 번째 칸에 들어간다 (markup 은 motion.js 가 채운다) */
html.mo .service-list a > .mo-arrow{
  justify-self:end;margin-left:0;font-size:18px;color:var(--sky-ink);
}

/* ==========================================================================
   12. 손가락 기기
   ========================================================================== */
@media (hover:none),(pointer:coarse){
  /* 손가락에서는 :hover 가 눌린 채 남는다 — 카드가 커진 상태로 굳지 않게 한다 */
  html.mo .live-portfolio-card img{ transform:none !important }
}

/* ==========================================================================
   13. 움직임을 줄이라고 설정한 사용자에게는 전부 끈다
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html.mo [data-mo-reveal].shown,
  html.mo [data-mo-reveal].shown img,
  html.mo [data-mo-reveal].shown > *{ animation:none !important;clip-path:none !important;transform:none !important }
  html.mo a:active,html.mo button:active,html.mo [role="button"]:active{ transform:none }
  .mo-arrow b,.mo-arrow i{ transition:none }
}