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

/* 따뜻한 크림/아이보리 팔레트
 * bg(크림화이트) · surface(아이보리) · dark(웜 차콜) — 순백/순흑 대비를 부드럽게 */
:root{
  --bg:#FBF8F1; --surface:#F3ECDE; --surface-2:#EDE4D2;
  --fg:#1A1611; --fg-2:#4A4337; --muted:#948A79; --border:#E7DECE;
  --dark:#17130D; --cream:#FBF8F1;
}

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; }

/* 헤더 — 기본: 어두운 히어로 위(크림 글자) */
#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; }

/* 스크롤 리빌 */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.2,0,0,1), transform .9s cubic-bezier(.2,0,0,1); }
.reveal.show{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.08s; } .reveal-d2{ transition-delay:.16s; } .reveal-d3{ transition-delay:.24s; }

/* 섹션 라벨(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{ transition:transform .7s cubic-bezier(.2,0,0,1); }
.media-zoom:hover img{ transform:scale(1.05); }

/* 모바일 하단 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; }

/* 모션 줄이기 */
@media (prefers-reduced-motion:reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
  *{ scroll-behavior:auto !important; }
}