/* =========================================
   이음 — 스플래시 / 로그인 (공통 다크 배경)
   공통 리셋·버튼·토큰은 tokens.css 사용
========================================= */
html,body{background:var(--g900)}
/* PC: 다른 페이지처럼 앱 기둥(--app-max 768px) 바깥은 공통 배경 — 동일한 앱 폭이 눈에 보이게 */
@media (min-width:769px){
  html,body{background:var(--app-bg)}
}

/* ---------- 공통 배경 (한옥 사진 + 딤) ---------- */
.auth{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;background:var(--g900)}
.auth__bg{position:absolute;inset:0;
  background:linear-gradient(rgba(17,17,17,.46),rgba(17,17,17,.46)),url(../images/photo-hanok.png) center/cover no-repeat}

/* ---------- 스플래시 (라이트 · 상단 브랜드 + 하단 한옥 컷아웃 + 連 워터마크) ----------
   Figma 935:2303 기준(360×760). 컨테이너 쿼리 단위(cqw/cqh)로 비율을 그대로 유지한다.
   모션은 splash.html 의 Web Animations API(JS)로 구동한다.
   (CSS @media prefers-reduced-motion 이 일부 웹뷰에서 오적용돼 애니메이션을 죽이는
    문제가 있어, 접근성 분기는 JS에서 직접 처리) */
.splash{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;
  background:var(--white);container-type:size;
  /* 폭 스케일 단위 — 1cqw 기준이되 430px 폭에서 상한. 넓은 화면(태블릿/PC 기둥)에서
     요소가 무한정 커지는 것을 막고, 모바일에서는 Figma(360×760) 비율 그대로 */
  --sw:min(1cqw,4.3px)}
.app.splash{background:var(--white)}

/* 배경 워터마크: splash-bg.svg (회색 원 + 連, 428×458) — 하단 기준 앵커.
   Figma 기준 원 좌상단 (-30, 461)/360×760 → svg 원점 환산 */
.splash__wm{position:absolute;left:50%;z-index:1;
  width:calc(var(--sw)*118.9);height:calc(var(--sw)*127.2);
  margin-left:calc(var(--sw)*-58.4);
  bottom:calc(var(--sw)*-35.8);
  opacity:0;pointer-events:none;will-change:opacity}

/* 상단 브랜드: 로고(이음 + HERITAGE) + 태그라인 */
.splash__brand{position:absolute;left:0;right:0;top:min(28.35cqh,26cqh + 18px);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:min(2.1cqh,18px)}
/* 로고 SVG 는 흰색 도형 → invert 로 검정 렌더 (viewBox 76x93.936, 이음 + HERITAGE).
   SVG 가 preserveAspectRatio=none 이라 비율을 명시(76:93.936)해야 세로 왜곡이 없다 */
.splash__logo{width:calc(var(--sw)*21.03);height:calc(var(--sw)*25.99);display:block;opacity:0;
  filter:invert(1);will-change:transform,opacity,clip-path}
.splash__tagline{color:var(--g900);font-size:max(15px,calc(var(--sw)*4.44));line-height:1.4;
  letter-spacing:-.025em;font-weight:500;opacity:0;will-change:transform,opacity}
.splash__tagline b{font-weight:700}
/* SplitText: 글자 단위 스태거 등장 — JS 가 각 글자를 span 으로 쪼개 애니메이션 */
.splash__char{display:inline-block;white-space:pre;will-change:transform,opacity}

/* 하단 한옥 컷아웃 (투명 PNG) — 화면 폭(상한 적용)보다 넓게, 하단 기준 앵커.
   이미지 비율 1536:1024 → 높이 = 폭*0.667. Figma 원본처럼 지붕~몸체~기단까지
   보이도록 23%만 크롭. 로그인 버튼이 올라올 때 JS 가 아래로 가라앉힌다 */
.splash__hanok{position:absolute;left:50%;
  width:calc(var(--sw)*141.17);
  margin-left:calc(var(--sw)*-70.6);
  bottom:calc(var(--sw)*141.17*.667*-.23);
  height:auto;z-index:2;opacity:0;pointer-events:none;
  will-change:transform,opacity}

/* 스플래시 하단 로그인 액션 — 연출 종료 후 한옥 지붕 바로 위로 올라옴 (초기 숨김, JS 가 등장시킴).
   한옥 가시 높이(폭*0.667*0.42)+여백만큼 띄워 버튼이 한옥과 겹치지 않게 */
.splash__actions{position:absolute;left:50%;z-index:4;
  width:min(100cqw - 48px,384px);
  margin-left:calc(min(100cqw - 48px,384px)/-2);
  bottom:calc(24px + env(safe-area-inset-bottom) + var(--sw)*40);
  opacity:0;will-change:transform,opacity}
/* JS 미구동(예: 스크립트 차단) 시 폴백 — 최소한 콘텐츠는 보이게 */
.no-js .splash__logo,.no-js .splash__tagline,.no-js .splash__hanok,.no-js .splash__wm{opacity:1}
.no-js .splash__actions,.splash__actions.is-shown{opacity:1}

/* ---------- 로그인 ---------- */
.login__inner{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  padding:calc(24px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom))}
.login__brand{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.login__logo{width:72px;height:89px;display:block} /* SVG preserveAspectRatio=none — 비율(76:93.936) 명시 */
.login__tagline{color:var(--white);font-size:16px;font-weight:500;letter-spacing:-.4px;
  text-shadow:0 1px 2px rgba(17,17,17,.5)}
.login__actions{display:flex;flex-direction:column;gap:10px}
.login__more{margin-top:14px;text-align:center;color:rgba(255,255,255,.78);font-size:14px;letter-spacing:-.35px;
  text-decoration:underline;text-underline-offset:2px}

/* ---------- 온보딩 (첫 실행 · 3장 슬라이드 · 풀블리드 사진) ---------- */
.onb__skip{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:3;
  height:44px;padding:0 12px;background:none;color:rgba(255,255,255,.85);
  font-size:14px;font-weight:600;letter-spacing:-.35px;text-shadow:0 1px 2px rgba(17,17,17,.5)}
/* 슬라이드 트랙 — data-i 로 페이지 이동 (히어로 슬라이더와 동일 패턴) */
.onb__track{position:absolute;inset:0;display:flex;transition:transform .35s ease;touch-action:pan-y}
.onb__track[data-i="1"]{transform:translateX(-100%)}
.onb__track[data-i="2"]{transform:translateX(-200%)}
.onb__slide{position:relative;flex:0 0 100%;overflow:hidden}
.onb__bg{position:absolute;inset:0;
  background:linear-gradient(rgba(17,17,17,.2),rgba(17,17,17,.78) 82%),url(../images/photo-hanok.png) center/cover no-repeat}
.onb__bg--2{background-image:linear-gradient(rgba(17,17,17,.2),rgba(17,17,17,.78) 82%),url(../images/photo-night.png)}
.onb__bg--3{background-image:linear-gradient(rgba(17,17,17,.2),rgba(17,17,17,.78) 82%),url(../images/theme-bulmeong.png)}
/* 카피는 하단 푸터(도트+CTA) 위에 위치 */
.onb__copy{position:absolute;left:24px;right:24px;bottom:180px;z-index:1;color:var(--white);
  display:flex;flex-direction:column;gap:12px}
.onb__eyebrow{font-size:14px;font-weight:600;letter-spacing:-.35px;color:rgba(255,255,255,.8)}
.onb__title{font-size:26px;font-weight:700;letter-spacing:-.65px;line-height:1.4}
.onb__desc{font-size:15px;letter-spacing:-.375px;line-height:1.6;color:rgba(255,255,255,.85)}
/* 하단 오버레이: 진행 도트 + CTA */
.onb__foot{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:20px;
  padding:0 24px calc(24px + env(safe-area-inset-bottom))}
.onb__dots{display:flex;justify-content:center;gap:6px}
.onb__dots span{width:6px;height:6px;border-radius:9999px;background:rgba(255,255,255,.35);
  transition:width .25s,background .25s}
.onb__dots span.on{width:20px;background:var(--white)}

/* ---------- 소셜 버튼 ---------- */
.sbtn{width:100%;height:52px;border-radius:var(--radius-base);display:flex;align-items:center;justify-content:center;
  gap:8px;font-family:inherit;font-size:16px;font-weight:700;letter-spacing:-.4px;cursor:pointer;border:0;position:relative}
.sbtn i{font-size:20px}
.sbtn__ico{width:20px;height:20px;object-fit:contain;flex:0 0 auto}
.sbtn--apple .sbtn__ico{filter:brightness(0) invert(1)} /* 검정 애플 로고 → 흰색(검정 버튼 대비) */
.sbtn--kakao{background:var(--kakao);color:var(--kakao-txt)}
.sbtn--apple{background:var(--g900);color:var(--white)}
.sbtn--google{background:var(--white);color:var(--blue-strong);border:1px solid var(--g200)}