/* 스토릿 - 공통 리셋 & 디자인 토큰 */

@font-face {
  font-family: "Jalnan 2";
  src:
    url("../fonts/Jalnan2.woff2") format("woff2"),
    url("../fonts/Jalnan2.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 폼 요소는 폰트를 상속하지 않고 UA 기본(시스템) 폰트를 씀 → 본문 폰트로 강제.
   font-family 미지정 버튼/입력의 텍스트가 시스템 폰트로 렌더돼 같은 font-weight 여도
   Noto Sans KR 보다 얇게 보이던 문제 방지. (font-family 를 명시한 버튼은 그대로 우선) */
button,
input,
textarea,
select {
  font-family: inherit;
}

/* 스크롤바 전역 숨김 (스크롤 기능은 유지) */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* 구형 Edge/IE */
}

*::-webkit-scrollbar {
  display: none; /* Chrome / Safari / Brave */
}

:root {
  /* 프레임 규격 */
  --frame-w: 375px;
  --frame-h: 812px;

  /* 바텀시트를 뷰포트 바닥에 붙이는 하단 보정(프레임 세로 중앙정렬 여백만큼 당김, ≤0).
     margin-bottom(플렉스 정렬 시트) 또는 bottom(absolute 시트)에 사용.
     높이는 100vh(주소창 숨김 가정) 대신 frame-scale.js 가 실측해 발행하는 --vh 를 쓴다.
     100vh 는 모바일에서 실제 보이는 높이보다 커서 시트가 화면 밖으로 밀려났다. */
  --sheet-pull: calc(
    (var(--frame-h) - var(--vh, 100vh) / var(--frame-scale, 1)) / 2
  );

  /* 컬러 */
  --bg: #fefaf4;
  --brown-900: #322814;
  --brown-800: #3d2000;
  --brown-700: #5d3300;
  --orange: #ef9f27;
  --yellow: #ffd95e;
  --yellow-deep: #fed16a;
  --gray: #8b95a1;
  --cta-bg: #fef4d2;
  --muted: rgba(136, 136, 128, 0.8);
  --green: #43bb65;
  --green-soft: #d7ffc2;
  --ink: #191f28;

  /* 폰트 */
  --font-display: "Jalnan 2", "JalnanGothic", "Noto Sans KR", sans-serif;
  --font-body: "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
}

html,
body {
  width: 100%;
  height: 100%;
  background: var(--bg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* 문서(root) 자체는 절대 스크롤/확장되지 않게 클리핑.
   프레임은 항상 뷰포트에 contain 되고, 내부 스크롤은 .mn-scroll 등 각 컨테이너가 담당.
   모달이 열리면 딤 오버레이가 inset:-100vmax 로 커지는데(프레임 밖 여백까지 딤),
   이 오버슈트를 body{overflow:hidden} 만으로는 root 스크롤 영역을 못 막아
   스크롤/탭 시 우·하단으로 화면이 확장돼 보이는 버그가 생김.
   뷰포트 스크롤을 지배하는 root(html)에서 확실히 클리핑해 확장을 차단한다. */
html {
  overflow: hidden;
  overscroll-behavior: none;
}

/* 화면 중앙에 프레임 배치 (스케일 시 상하좌우 여백은 --bg로 채워짐)
   높이 기준은 --vh(실측). 100vh 로 잡으면 모바일에서 주소창 높이만큼 상자가 더 커져
   프레임이 아래로 밀리고 상단 헤더가 화면 최상단에서 떨어져 보인다. */
body {
  min-height: var(--vh, 100vh);
  /* html{height:100%} 의 기준(ICB)이 브라우저에 따라 "주소창 숨긴 큰 뷰포트"라
     min-height 만으로는 body 가 화면보다 커질 수 있다 → 실측 높이로 못박는다. */
  height: var(--vh, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── 전체 폭 배경 채우기 (프레임 밖 여백) ─────────────────
   프레임은 375px 고정·중앙정렬이라 넓은 화면에선 좌우 여백이 생김.
   그 여백을 페이지 배경색으로 채워 화면 전체가 채워져 보이게 함.
   페이지별로 --page-fill 지정(기본 크림). 이미지/시트/signup 등
   자체 body::before 를 정의한 페이지는 각자 규칙이 우선함. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  /* 기본: 대다수 페이지 패턴(상단 16px 노랑 + 크림 시트)에 맞춘 여백.
     예외 페이지는 각 CSS에서 --page-fill 재정의. */
  background: var(
    --page-fill,
    linear-gradient(
      var(--yellow) 0 calc(16px * var(--frame-scale, 1)),
      var(--bg) calc(16px * var(--frame-scale, 1))
    )
  );
}

/* ── 모달 딤 오버레이가 좌우/상하 여백까지 덮도록 ───────────────
   모달은 .frame 안에 있어 overflow:hidden 에 클리핑됨 → 프레임(375)만 어두워지고
   넓은/특이 비율 화면에선 여백이 밝게 남음. 모달이 열리면(has-open-modal, frame-scale.js가 토글)
   프레임 클리핑을 풀고 딤 오버레이를 뷰포트 밖까지 확장해 전체를 덮는다.
   (뒤 콘텐츠가 삐져나와도 딤이 위에서 덮으므로 안전) */
/* 모달이 열린 동안엔 페이지 바탕(html·body)도 딤 색으로 깔아 둔다.
   기기 뷰포트 높이가 소수(예: 914.28)면 화면 맨 끝 서브픽셀 행이 페이지 배경색으로
   래스터되는데, 그 자리는 모달 딤이 닿지 못해 밝은 1px 줄로 보인다(하단·우측 가장자리).
   바탕을 미리 어둡게 해 두면 그 행까지 딤과 같은 톤이 되어 줄이 보이지 않는다.
   (크림 #fefaf4 위에 rgba(0,0,0,0.6) 을 얹은 색) */
html:has(.frame.has-open-modal) {
  background: #666462;
}

.frame.has-open-modal {
  overflow: visible;
  /* 모달 열릴 때 프레임을 body 로 옮긴 네비/헤더(z:20) 위로 올림
     → 모달 딤·시트가 네비게이션 바보다 위에 표시 */
  z-index: 30;
}
/* ── 모달 중 하단 네비의 레이어 순서 ─────────────────────────
   .frame 은 transform 때문에 자체 스택 컨텍스트라, 네비가 프레임 밖(body)에 있으면
   "프레임 전체보다 위" 아니면 "아래" 둘 중 하나만 가능하다. 모달이 열리면 프레임이
   네비 위로 올라가므로(z:30) 프레임 안 스크롤 콘텐츠(흰 카드)까지 네비를 덮어버린다.
   → 모달 중에는 frame-scale.js 가 네비를 프레임 "안"으로 옮겨(z:10) 같은 스택
   컨텍스트에 넣는다. 그러면 본문(z:auto) < 네비(z:10) < 딤·모달(z:50) 순서가 된다.
   프레임 안이므로 크기·좌표는 디자인 단위 그대로 쓰고(프레임이 스케일함),
   폭만 화면 전체가 되도록 역보정한다. */
.frame.has-open-modal > .mn-nav {
  position: absolute;
  left: 50%;
  right: auto;
  /* 프레임 세로 중앙정렬 여백만큼 내려 화면 바닥에 밀착 */
  bottom: var(--sheet-pull);
  width: calc(100vw / var(--frame-scale, 1));
  height: 84px;
  transform: translateX(-50%);
  z-index: 10;
  background: var(--yellow);
  border-radius: 24px 24px 0 0;
}
.frame.has-open-modal > .mn-nav .mn-nav-items {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 0;
}
.frame.has-open-modal > .mn-nav .mn-nav-indicator {
  left: 50%;
  transform: translateX(-50%);
}

.frame.has-open-modal [class*="-overlay"] {
  inset: -100vmax;
  /* 일부 오버레이(rs-exp/ci-guide)는 width:100% 를 갖고 있어 left/right(-100vmax)와
     충돌 → 폭이 컨테이너(375)로 고정되고 왼쪽으로 밀려 딤이 화면을 못 덮음.
     width/height:auto 로 풀어 좌우·상하가 -100vmax 까지 모두 늘어나게 함. */
  width: auto;
  height: auto;
}

/* ── terms 처럼 전체 폭 크림 시트 (표준 "노랑 + ::before 크림 시트" 패턴 페이지) ──
   프레임을 투명하게 하고 인셋 크림 시트(::before)를 제거한 뒤,
   body 배경(노랑) + body::before(크림 시트, 상단 16px 아래·라운드 20)를
   화면 전체 폭 레이어로 제공 → 카드처럼 보이지 않고 terms 와 동일하게 꽉 참. */
.ci-page, .st-page, .nc-page, .cp-page, .vc-page, .ck-page, .ex-page,
.nt-page, .pd-page, .qc-page, .qd-page, .mq-page, .se-page, .wd-page,
.rk-page, .sh-page, .mp-page, .iq-page, .ms-page, .cr-page, .qz-page,
.rs-page {
  background: transparent !important;
}
.ci-page::before, .st-page::before, .nc-page::before, .cp-page::before,
.vc-page::before, .ck-page::before, .ex-page::before, .nt-page::before,
.pd-page::before, .qc-page::before, .qd-page::before, .mq-page::before,
.se-page::before, .wd-page::before, .rk-page::before, .sh-page::before,
.mp-page::before, .iq-page::before, .ms-page::before, .cr-page::before,
.qz-page::before,
.rs-page::before {
  display: none !important;
}
body:has(.ci-page, .st-page, .nc-page, .cp-page, .vc-page, .ck-page,
    .ex-page, .nt-page, .pd-page, .qc-page, .qd-page, .mq-page,
    .se-page, .wd-page, .rk-page, .sh-page, .mp-page, .iq-page, .ms-page, .cr-page,
    .qz-page, .rs-page) {
  background: var(--yellow);
}
body:has(.ci-page, .st-page, .nc-page, .cp-page, .vc-page, .ck-page,
    .ex-page, .nt-page, .pd-page, .qc-page, .qd-page, .mq-page,
    .se-page, .wd-page, .rk-page, .sh-page, .mp-page, .iq-page, .ms-page, .cr-page,
    .qz-page, .rs-page)::before {
  inset: calc(16px * var(--frame-scale, 1)) 0 0 0;
  background: var(--bg);
  border-radius: calc(20px * var(--frame-scale, 1))
    calc(20px * var(--frame-scale, 1)) 0 0;
}

/* ── 하단 네비게이션 (공통) ───────────────────────────────────
   main·ranking·season·mypage·shop 이 같은 네비를 쓴다. 예전엔 페이지별 CSS 에
   같은 규칙이 통째로 복사돼 있었고, 그러다 높이가 84/76 으로 어긋난 적이 있어
   여기 한 곳으로 모았다. 페이지별로 다른 건 활성 탭(.is-active) 뿐이다.
   아이콘은 modifier 클래스(--home/--ranking/--shop/--profile)로 지정한다. */
.mn-nav {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 375px;
  height: 84px;
  z-index: 10;
  background: var(--yellow);
  border-radius: 24px 24px 0 0;
}

/* 항목 4개 (Figma: @ 46, 20, gap 62) */
.mn-nav-items {
  position: absolute;
  left: 46px;
  top: 20px;
  display: flex;
  align-items: flex-end;
  gap: 62px;
}

.mn-nav-item {
  width: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 500;
  color: var(--brown-700);
  opacity: 0.4;
  white-space: nowrap;
}

.mn-nav-item.is-active {
  color: var(--brown-800);
  opacity: 1;
}

/* 아이콘 색은 currentColor 를 따름 */
.mn-nav-icon {
  width: 25px;
  height: 25px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.mn-nav-item--home .mn-nav-icon {
  background-image: url("nav_home.svg");
}
.mn-nav-item--ranking .mn-nav-icon {
  background-image: url("nav_ranking.svg");
}
.mn-nav-item--profile .mn-nav-icon {
  background-image: url("nav_profile.svg");
}
/* 상점 아이콘만 23x23 + 라벨 간격 2px */
.mn-nav-item--shop .mn-nav-icon {
  width: 23px;
  height: 23px;
  margin-bottom: 2px;
  background-image: url("nav_gift.svg");
}

/* 홈 인디케이터 (Figma: 72px @ 151, 70 — 375 기준 가로 중앙) */
.mn-nav-indicator {
  position: absolute;
  left: 151px;
  top: 70px;
  width: 72px;
  height: 3px;
  border-radius: 2px;
  background: var(--brown-700);
}

/* 하단 네비: frame-scale.js 가 body 로 옮긴 뒤 전체 폭 바 + 아이콘 균등 분포.
   내용(아이콘/라벨)은 --frame-scale 로 스케일해 디자인 비율 유지. */
body > .mn-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: calc(84px * var(--frame-scale, 1));
  z-index: 20;
  background: var(--yellow);
  border-radius: calc(24px * var(--frame-scale, 1))
    calc(24px * var(--frame-scale, 1)) 0 0;
}
body > .mn-nav .mn-nav-items {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 0;
}
body > .mn-nav .mn-nav-icon {
  width: calc(25px * var(--frame-scale, 1));
  height: calc(25px * var(--frame-scale, 1));
}
body > .mn-nav .mn-nav-item {
  font-size: calc(8px * var(--frame-scale, 1));
}
body > .mn-nav .mn-nav-indicator {
  left: 50%;
  transform: translateX(-50%);
}

/* 공통 하단 스캘럽 장식(노란 원 띠)을 화면 전체 폭으로 확장.
   프레임 내부의 것은 숨기고, html::after 로 프레임 위(z:2) 전체 폭 재현
   (원 지름 96.58 / 겹침 22.2 → pitch 74.38, 보이는 높이 57, --frame-scale 반영). */
.ci-scallop,
.st-scallop,
.nc-scallop,
.cp-scallop,
.vc-scallop,
.ck-scallop,
.ex-scallop,
.nt-scallop,
.pd-scallop,
.rf-scallop,
.ui-scallop,
.ms-scallop,
.cr-scallop,
.bk-scallop,
.se-scallop {
  /* 각 페이지 CSS가 display:flex 를 명시하므로 !important 로 확실히 숨김 */
  display: none !important;
}

html:has(
    .ci-scallop,
    .st-scallop,
    .nc-scallop,
    .cp-scallop,
    .vc-scallop,
    .ck-scallop,
    .ex-scallop,
    .nt-scallop,
    .pd-scallop,
    .rf-scallop,
    .ui-scallop,
    .ms-scallop,
    .cr-scallop,
    .bk-scallop,
    .se-scallop
  )::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(57px * var(--frame-scale, 1));
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
      circle calc(48.29px * var(--frame-scale, 1)) at 50%
        calc(48.29px * var(--frame-scale, 1)),
      var(--yellow) calc(48.29px * var(--frame-scale, 1)),
      transparent calc(48.79px * var(--frame-scale, 1))
    )
    top center /
    calc(74.38px * var(--frame-scale, 1)) calc(96.58px * var(--frame-scale, 1))
    repeat-x;
}

img {
  display: block;
  max-width: 100%;
}

/* 375x812 모바일 프레임 (Figma 기준) */
.frame {
  position: relative;
  z-index: 1; /* 배경 레이어(body::before) 위에 컴포넌트 표시 */
  width: var(--frame-w);
  height: var(--frame-h);
  flex: 0 0 auto;
  background: var(--bg);
  overflow: hidden;
  /* 폰 크기 대응: frame-scale.js가 --frame-scale을 화면에 맞춰 설정 */
  transform: scale(var(--frame-scale, 1));
  transform-origin: center center;
}

/* 하단 페이지 인디케이터 (온보딩 3단계 공통) */
.dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 771px; /* Figma 좌표 기준 (812 프레임에서 하단 29px) */
  display: flex;
  align-items: center;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background: var(--yellow);
}

.dot.is-active {
  background: var(--brown-700);
}