/* 라이트 전용. HTML 의 <meta name="color-scheme" content="only light"> 와 같은 선언을
   CSS 에도 둔다 - meta 가 빠지거나 다른 페이지가 추가될 때를 대비한 이중 잠금이다.
   이 선언이 없으면 안드로이드 다크 모드에서 브라우저가 색을 강제로 반전한다
   (흰 입력 카드가 검게 되고 하늘 배경만 밝게 남는다). 반전은 계산된 스타일이 아니라
   렌더링 단계에서 일어나서 getComputedStyle 로는 안 잡힌다 - 화면으로 확인해야 한다.
   native 컨트롤(셀렉트 목록·체크박스)도 이 값을 따라 라이트로 그려진다. */
:root { color-scheme: only light; }

/* ── 고정 캔버스 + 전체 스케일링 ────────────────────────────────────
   반응형(요소별 재배치)이 아니라, 아이폰 390x844를 기준 캔버스로 고정해두고
   화면 크기에 따라 캔버스를 통째로 축소·확대한다.

   - 캔버스 안의 모든 좌표·크기·간격·폰트는 390px 기준 고정값이다
   - transform: scale()은 레이아웃을 다시 계산하지 않으므로
     화면 폭이 바뀌어도 줄바꿈이 절대 달라지지 않는다 (zoom과 다른 점)
   - 실제 배율은 canvas.js가 --canvas-scale 로 넣어준다

   캔버스 안에서는 vh/vw/미디어쿼리를 쓰지 않는다. 쓰면 화면 크기에 따라
   내부가 흔들려서 이 방식의 전제가 깨진다. */

:root {
  --canvas-w: 390px;
  --canvas-h: 844px;
  --canvas-scale: 1;
}

html, body {
  margin: 0;
  /* 캔버스를 축소·확대해도 가로 스크롤이 생기지 않게 */
  overflow-x: hidden;
}

/* 캔버스가 차지할 자리. 높이는 canvas.js가 (캔버스 높이 x 배율)로 넣는다 */
.canvas-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* 기준 캔버스 - 폭은 항상 390px로 고정하고 transform으로만 키운다 */
.canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--canvas-w);
  transform-origin: 0 0;
  /* 배율이 바뀔 때 텍스트가 다시 그려지는 티가 덜 나게 */
  backface-visibility: hidden;
}

/* 모달·결과 패널처럼 화면에 붙는 레이어.
   캔버스 안에 두면 transform 때문에 캔버스 전체 높이(수천 px)를 덮어버려서
   모달이 화면 밖 중앙에 놓인다. 그래서 캔버스 밖에 따로 두고 같은 배율로 키운다.
   크기는 canvas.js가 "화면 크기 ÷ 배율"로 넣어준다 - 배율을 곱하면 정확히 화면을 덮으므로
   안에서 inset:0 + align-items:center 를 쓰면 팝업이 화면 정중앙에 온다.
   (전에는 이 레이어가 844px 고정이라, 화면이 그보다 짧으면 팝업이 아래로 밀렸다) */
.overlay-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--canvas-w);
  height: var(--canvas-h);
  transform-origin: 0 0;
  z-index: 40;
  /* 레이어 자체는 클릭을 막지 않고, 안에 열린 것만 받는다 */
  pointer-events: none;
}
.overlay-layer > * {
  pointer-events: auto;
}
/* 닫혀 있을 때(.hidden)는 자리도 차지하지 않는다 */
.overlay-layer > .hidden {
  display: none !important;
}

/* ── 이미지 저장 막기 ──────────────────────────────────────────
   길게 눌러 '이미지 저장' 이 뜨면 화면 조각이 그대로 저장된다.
   빌리지는 아래 다운로드 버튼으로만 받게 한다.
   (스크린샷 자체는 막을 수 없다 - 웹에서 되는 선까지다) */
.canvas img,
.overlay-layer img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
/* 창문처럼 눌러야 하는 이미지는 부모가 클릭을 받는다.
   그래도 개별적으로 필요한 곳은 이 클래스로 되살린다 */
.canvas img.is-tappable { pointer-events: auto; }

/* ── 브랜드 표기 ─────────────────────────────────────────────────
   빌리지 메인 화면과 입주 테스트 화면 맨 아래. FATE PROJECT 로고 + 태그라인.
   여기(canvas.css)에 두는 이유: host.html 은 landing.css 를 안 불러서
   .page-footer 규칙이 없다. 세 화면이 다 불러오는 곳은 canvas.css 뿐이다. */
.brand-footer {
  padding: 22px 22px 26px;
  text-align: center;
}
/* 저작권 줄. 시작 화면 푸터(.cover-copy)와 글꼴·크기·자간·굵기·색을 같게 맞춘다.
   landing.css 의 .cover-copy 를 그대로 쓰지 않는 이유가 두 가지다 -
   host.html 은 landing.css 를 아예 안 불러오고, guest.html 은 불러오는데
   .page-footer 안이면 회색(#9198a5)으로 덮인다. 여기서는 두 화면이 같아야 한다. */
.brand-copy {
  margin: 0;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(58, 38, 32, 0.5);
}
/* 저작권 줄과 브랜드 표기를 나누는 점선. 가운데 일부만 그린다 */
.brand-divider {
  width: 34%;
  height: 0;
  margin: 14px auto;
  border-top: 1px dashed rgba(58, 38, 32, 0.3);
}
/* 원본은 2048x722. 400px 로 뽑아 두고 표시는 52px 이다 - 필요한 최대치가
   52px x 캔버스 1.103배 x DPR 3 = 약 172px 이라 400px 이면 넉넉하다.
   (표시 크기를 줄인 뒤로 원본이 필요 이상 크지만, 8KB 라 그대로 둔다) */
.brand-logo {
  display: block;
  width: 52px;
  height: auto;
  margin: 0 auto 6px;
}
/* 태그라인은 저작권 줄보다 한 단계 작게. 색·굵기·자간은 같다 */
.brand-tagline {
  margin: 0;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(58, 38, 32, 0.5);
}

/* ── 브랜드 푸터를 화면 맨 아래 끝에 붙이기 ─────────────────────────
   화면(.page)을 세로 flex 로 두고 본문을 남은 높이만큼 늘린 뒤, 푸터에
   margin-top:auto 를 준다. 이걸로 두 가지가 같이 해결된다 -
     1) 내용이 844px 보다 짧아도 푸터가 캔버스 바닥에 앉는다
        (입주 테스트 화면은 844px 안에 들어오도록 짜여 있어서 그냥 두면 중간에 뜬다)
     2) 푸터 아래에 부모의 하단 패딩이 빈 배경으로 남지 않는다
        (그냥 두면 host 는 56px, 입주 테스트는 24px 이 죽은 여백으로 깔린다)
   vh 는 쓰지 않는다. 기준은 .page 의 min-height: 844px 이다 (이 파일 맨 위 참고). */
.brand-anchor {
  display: flex;
  flex-direction: column;
}
/* .page 를 flex 로 바꾸면 그 안의 화면(main)이 전부 flex 아이템이 된다.
   화면들은 max-width: 420px + margin: 0 auto 로 가운데 정렬돼 있어서, 그냥 두면
   auto 마진이 stretch 를 막고 폭이 내용에 맞춰진다 - 실제로 입주 테스트 화면은
   25px 좁아지고 입주 신청서 폼은 max-width 까지 벌어져 30px 넘쳤다.
   폭이 바뀌면 줄바꿈이 달라져서 고정 캔버스의 전제가 깨지므로 폭을 명시한다.
   (box-sizing 은 host.css / landing.css 첫 줄의 * 규칙으로 이미 border-box 다) */
.brand-anchor > main {
  width: 100%;
}
/* 자식 선택자로 특이도를 올려 둔 것이 중요하다. .host-page(host.css) 와
   .hero(landing.css) 의 padding 은 같은 클래스 하나짜리 특이도인데 두 파일이
   canvas.css 보다 뒤에 로드돼서, 클래스 하나로 쓰면 padding-bottom: 0 이 진다. */
.brand-anchor > .brand-anchor-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* 화면 끝과의 간격은 .brand-footer 가 직접 갖는다 (아래 패딩 26px) */
  padding-bottom: 0;
}
.brand-anchor-body > .brand-footer {
  margin-top: auto;
}