/* ============================================================
 * Drum.Y Studio — 공통 스타일 (흑/백/그레이 · minimal)
 * ============================================================ */

/* 따뜻한 크림/아이보리 팔레트
 * bg(크림화이트) · surface(아이보리) · dark(웜 차콜) — 순백/순흑 대비를 부드럽게 */
:root{
  --bg:#FBF8F1; --surface:#F3ECDE; --surface-2:#EDE4D2;
  --fg:#1A1611; --fg-2:#4A4337; --muted:#6B6355; /* 크림 배경 4종 모두 대비 4.5:1 이상 (구 #948A79는 2.6~3.2:1) */ --border:#E7DECE;
  --dark:#17130D; --cream:#FBF8F1;
  /* 모션 토큰 */
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);
}

html{ font-family:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif; -webkit-font-smoothing:antialiased; color:var(--fg); background:var(--bg); }
body{ overflow-x:hidden; background:var(--bg); }
.font-display{ font-family:'Archivo','Inter','Pretendard',sans-serif; }

/* 헤더 — 스크롤 시 배경 전환 (transition:all 대신 속성 지정) */
#site-header{ transition:background-color .3s ease, border-color .3s ease; }
#site-header .hdr-logo, #site-header .hdr-sub, #site-header .hdr-lang, #site-header .nav-link{ transition:color .3s ease; }
#site-header .hdr-bar{ transition:background-color .3s ease; }

/* 헤더 — 기본: 어두운 히어로 위(크림 글자) */
#site-header .hdr-logo{ color:var(--cream); }
#site-header .hdr-sub{ color:rgba(251,248,241,.6); }
#site-header .hdr-lang{ color:var(--cream); }
#site-header .hdr-bar{ background:var(--cream); }
#site-header .nav-link{ color:rgba(251,248,241,.9); }
#site-header .hdr-cta{ background:var(--cream); color:var(--dark); }
#site-header .hdr-cta:hover{ background:#EFE7D7; }

/* 헤더 — 솔리드: 스크롤 시 또는 밝은 히어로 페이지(웜 다크 글자) */
#site-header.header-solid{ background:rgba(251,248,241,.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
#site-header.header-solid .hdr-logo{ color:var(--fg); }
#site-header.header-solid .hdr-sub{ color:var(--muted); }
#site-header.header-solid .hdr-lang{ color:var(--fg); }
#site-header.header-solid .hdr-bar{ background:var(--fg); }
#site-header.header-solid .nav-link{ color:var(--fg-2); }
#site-header.header-solid .nav-link:hover{ color:var(--fg); }
#site-header.header-solid .hdr-cta{ background:var(--fg); color:var(--cream); }
#site-header.header-solid .hdr-cta:hover{ background:#332B20; }

/* ── 따뜻한 톤 유틸리티 오버라이드 (Tailwind 기본 흑/백을 크림·차콜로 치환) ── */
.bg-white{ background-color:var(--bg) !important; }
.bg-paper{ background-color:var(--surface) !important; }
.bg-black{ background-color:var(--dark) !important; }
.bg-ink{ background-color:var(--fg) !important; }
.bg-line{ background-color:var(--border) !important; }
.text-black{ color:var(--fg) !important; }
.text-ink{ color:var(--fg) !important; }
.text-white{ color:var(--cream) !important; }
.text-stone{ color:var(--muted) !important; }
.border-line{ border-color:var(--border) !important; }
.hover\:bg-paper:hover{ background-color:var(--surface) !important; }
.hover\:bg-neutral-800:hover{ background-color:#332B20 !important; }
.hover\:bg-neutral-200:hover{ background-color:#EFE7D7 !important; }
.bg-neutral-900{ background-color:#221C14 !important; }

.nav-link{ position:relative; font-size:13.5px; letter-spacing:.01em; transition:color .2s; }
.nav-link.nav-active{ font-weight:600; }
.nav-link.nav-active::after{ content:''; position:absolute; left:0; right:0; bottom:-7px; height:1.5px; background:currentColor; }

.lang-btn{ opacity:.5; transition:opacity .2s; }
.lang-btn.lang-on{ opacity:1; font-weight:700; }

/* 스크롤 리빌 — 짧고 강한 ease-out */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease-out), transform .7s var(--ease-out); }
.reveal.show{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.08s; } .reveal-d2{ transition-delay:.16s; } .reveal-d3{ transition-delay:.24s; }

/* 섹션 제목 — 아래 선에서 밀어 올라오는 마스크 리빌 (사이트 대표 모션)
 * 리빌 컨테이너 안의 h2만 — 관찰 대상 자체를 잘라 두면 IntersectionObserver가 '안 보임'으로 판정함 */
.reveal h2{
  clip-path:inset(calc(100% + .3em) -.15em -.3em -.15em); transform:translateY(.35em);
  transition:clip-path .8s var(--ease-out) .06s, transform .8s var(--ease-out) .06s;
}
.reveal.show h2{ clip-path:inset(-.3em -.15em -.3em -.15em); transform:none; }

/* 묶음 리빌 — 카드·칸이 박자처럼 60ms 간격으로 */
.reveal.stagger{ opacity:1; transform:none; }
.stagger > *{ opacity:0; }
.stagger.show > *{ opacity:1; animation:rise .6s var(--ease-out) backwards; }
.stagger.show > :nth-child(2){ animation-delay:60ms; }
.stagger.show > :nth-child(3){ animation-delay:120ms; }
.stagger.show > :nth-child(4){ animation-delay:180ms; }
.stagger.show > :nth-child(5){ animation-delay:240ms; }
.stagger.show > :nth-child(n+6){ animation-delay:300ms; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } }

/* 첫 화면에 이미 보이는 요소는 움직이지 않고 바로 표시 (LCP 보호) */
.reveal-instant, .reveal-instant h2{ transition:none !important; }
.reveal-instant > *{ animation:none !important; }

/* 화면 내용 교체(갤러리 필터·지점 탭) */
.swap-in{ animation:rise .36s var(--ease-out) backwards; animation-delay:calc(min(var(--i, 0), 10) * 35ms); }

/* 섹션 라벨(eyebrow) */
.eyebrow{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }

/* 가로 슬라이더 스크롤바 숨김 */
.no-scrollbar{ scrollbar-width:none; -ms-overflow-style:none; }
.no-scrollbar::-webkit-scrollbar{ display:none; }

/* 한글 줄바꿈 */
h1,h2,h3,p,span,a,li{ word-break:keep-all; overflow-wrap:break-word; }

/* 미디어 호버 — 마우스 기기에서만 (터치 탭 후 확대된 채 남는 문제 방지) */
.media-zoom img, .branch-bg{ transition:transform .7s var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .media-zoom:hover img, .branch-card:hover .branch-bg{ transform:scale(1.04); }
}

/* 누름 피드백 — 버튼·카드·사진 */
a[class*="rounded-full"], button[class*="rounded-full"],
.branch-card, #grid > button, #consult-modal a, a.group[class*="rounded-2xl"]{
  transition:transform .16s var(--ease-out), background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
a[class*="rounded-full"]:active, button[class*="rounded-full"]:active{ transform:scale(.97); }
.branch-card:active, #grid > button:active, #consult-modal a:active, a.group[class*="rounded-2xl"]:active{ transform:scale(.98); }
.mbar-btn{ transition:background-color .16s ease; }
.mbar-btn:active{ background-color:rgba(251,248,241,.1); }
.hdr-menu{ transition:transform .16s var(--ease-out); }
.hdr-menu:active{ transform:scale(.9); }

/* 모바일 메뉴 — 오른쪽에서 밀려 들어오는 드로어 + 메뉴 순차 등장 */
#mobile-nav{ transition:transform .45s var(--ease-drawer); }
#mobile-nav nav a{ opacity:0; transform:translateX(28px); transition:opacity .2s ease, transform .2s var(--ease-out); }
#mobile-nav.is-open nav a{ opacity:1; transform:none; transition:opacity .4s var(--ease-out), transform .5s var(--ease-out); }
#mobile-nav.is-open nav a:nth-child(1){ transition-delay:.12s; }
#mobile-nav.is-open nav a:nth-child(2){ transition-delay:.16s; }
#mobile-nav.is-open nav a:nth-child(3){ transition-delay:.20s; }
#mobile-nav.is-open nav a:nth-child(4){ transition-delay:.24s; }
#mobile-nav.is-open nav a:nth-child(5){ transition-delay:.28s; }

/* 상담 지점 선택 — 모바일은 아래에서 올라오는 시트, PC는 살짝 커지며 등장 */
#consult-modal > .relative{ transform:translateY(100%); transition:transform .45s var(--ease-drawer); }
#consult-modal:not(.opacity-0) > .relative{ transform:none; }
@media (min-width:640px){
  #consult-modal > .relative{ transform:scale(.96); transition:transform .22s var(--ease-out); }
  #consult-modal:not(.opacity-0) > .relative{ transform:none; }
}

/* 갤러리 확대 보기 */
#lightbox img{ transform:scale(.96); transition:transform .3s var(--ease-out); }
#lightbox:not(.opacity-0) img{ transform:none; }

/* 모바일 하단 CTA만큼 본문 여백 */
@media (max-width:1023px){ body{ padding-bottom:56px; } }

/* 포커스 접근성 */
a:focus-visible, button:focus-visible{ outline:2px solid #0b0b0b; outline-offset:3px; border-radius:2px; }

/* 모션 줄이기 */
/* 위치 이동은 빼고 투명도 변화만 남김 (0이 아니라 더 부드럽게) */
@media (prefers-reduced-motion:reduce){
  .reveal{ transform:none; transition:opacity .3s ease; }
  .reveal h2, .reveal.show h2{ clip-path:none; transform:none; }
  .stagger.show > *, .swap-in{ animation-name:fade; }
  @keyframes fade{ from{ opacity:0; } }
  a[class*="rounded-full"]:active, button[class*="rounded-full"]:active,
  .branch-card:active, #grid > button:active, #consult-modal a:active, a.group[class*="rounded-2xl"]:active,
  .hdr-menu:active{ transform:none; }
  .media-zoom:hover img, .branch-card:hover .branch-bg{ transform:none; }
  #mobile-nav.translate-x-full{ transform:none !important; opacity:0; visibility:hidden; }
  #mobile-nav{ transition:opacity .2s ease, visibility .2s; }
  #mobile-nav nav a{ transform:none; }
  #consult-modal > .relative, #lightbox img{ transform:none !important; }
  *{ scroll-behavior:auto !important; }
}