/* 칠판 글꼴(교실 사이트와 같은 파일): 마을 소개에 씁니다 */
@font-face {
  font-family: "Hakgyoansim Bunpil";
  src: url("assets/HakgyoansimBunpilR.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

/* ---------- 계절 테마 ----------
   바탕은 늘 하얗고, 계절마다 바뀌는 그림(가로수, 떨어지는 것)만 여기서 갈아 끼웁니다.
   계절은 village.js 가 달력을 보고 <html data-season="…"> 에 적습니다.
   새 계절을 더하려면 assets/village/<계절>/ 에 tree.svg · leaf.svg · leaf-2.svg 를 넣고
   아래에 [data-season="<계절>"] 덩어리를 하나 더 적은 뒤, village.js 의 READY_SEASONS 에 이름을 보태세요. */
:root,
[data-season="autumn"] {
  --street-tree: url("assets/village/autumn/tree.svg");
  --fall-a: url("assets/village/autumn/leaf.svg");
  --fall-b: url("assets/village/autumn/leaf-2.svg");
}

:root {
  /* 크기 배수: 넓은 화면은 1.25배, 휴대폰(640px 이하)은 1배. 집 · 길 · 알림판이 함께 커집니다. */
  --u: 1.25;
  --house-w: calc(180px * var(--u)); /* 집 한 칸 폭 */
  --ink: #2a2728;
  --ink-soft: #5c5859;
  --line: rgba(42, 39, 40, 0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: #fff;
  color: var(--ink);
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Pretendard", system-ui, sans-serif;
  font-size: calc(16px * var(--u));
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 머리말: 게임 화면의 알림판처럼 ---------- */

.village-head {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: calc(16px * var(--u)) calc(16px * var(--u)) calc(40px * var(--u));
}

/* 하늘: 하얀 구름을 옅은 하늘색으로 물들여 천천히 흘려보냅니다 */
.cloud {
  position: absolute;
  height: auto;
  pointer-events: none;
  filter: brightness(0.86) sepia(0.4) hue-rotate(170deg) saturate(1.8);
  opacity: 0.8;
  animation: drift 22s ease-in-out infinite alternate;
}
.cloud-1 { top: calc(84px * var(--u)); left: 22%; width: calc(150px * var(--u)); }
.cloud-2 { top: calc(120px * var(--u)); right: 8%; width: calc(110px * var(--u)); animation-duration: 28s; animation-direction: alternate-reverse; }
@keyframes drift {
  from { transform: translateX(calc(-24px * var(--u))); }
  to { transform: translateX(calc(24px * var(--u))); }
}

.hud {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap; /* 소개와 아이콘들은 늘 한 줄 */
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(10px * var(--u));
}
.hud-intro, .hud-tools { display: flex; align-items: center; gap: calc(8px * var(--u)); min-width: 0; }
.hud-intro { flex: 0 1 auto; }
.hud-tools { flex: none; }

/* 하얀 알약 모양 판 */
.hud-panel {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--u));
  min-height: calc(44px * var(--u));
  margin: 0;
  padding: calc(6px * var(--u)) calc(14px * var(--u)) calc(6px * var(--u)) calc(6px * var(--u));
  border-radius: calc(14px * var(--u));
  /* 하얀 바탕 위에서 판이 보이도록 따뜻한 미색 */
  background: #f4eee4;
  box-shadow: 0 1px 2px rgba(42, 39, 40, 0.06);
}

.hud-about { flex-direction: column; align-items: flex-start; gap: 0; padding: calc(7px * var(--u)) calc(16px * var(--u)); }
/* 마을 소개 두 줄은 같은 칠판 글꼴·크기·굵기로 */
.hud-about h1,
.hud-about p {
  font-family: "Hakgyoansim Bunpil", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  font-size: calc(17px * var(--u));
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
}

/* 아이콘 칩: 동그란 색 바탕에 선 아이콘 */
.hud-chip {
  flex: none;
  display: grid; place-items: center;
  width: calc(32px * var(--u)); height: calc(32px * var(--u));
  border: 0;
  border-radius: 50%;
  background: #ead28a;
  color: var(--ink);
  padding: 0;
}
.hud-chip svg {
  width: calc(19px * var(--u)); height: calc(19px * var(--u));
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.hud-num { font-size: calc(15px * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 1ch; }

/* 찾기: 평소엔 돋보기만, 누르면 칸이 펼쳐집니다 */
.hud-search { padding-right: calc(6px * var(--u)); }
.hud-search-btn { background: #c9dce7; cursor: pointer; }
.hud-search-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hud-search input {
  width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: calc(14px * var(--u));
  color: inherit;
  outline: none;
  transition: width 0.25s ease, padding 0.25s ease;
}
.hud-search.is-open input { width: min(calc(180px * var(--u)), 42vw); padding: 0 calc(8px * var(--u)) 0 calc(2px * var(--u)); }
.hud-search input::-webkit-search-cancel-button { cursor: pointer; }

/* ---------- 마을: 집들이 보도 위에 줄지어 섭니다 ---------- */

.town { position: relative; overflow: hidden; padding-top: calc(24px * var(--u)); }

/* 한 줄 골목: 새하루 집을 가운데, 이웃은 양옆으로. 화면보다 길면 좌우로 밀어서 둘러봅니다.
   다 들어가면 가운데 정렬, 넘치면 처음 열 때 새하루 집이 가운데 오도록 village.js 가 밀어 둡니다. */
.village {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  justify-content: safe center;
  --edge: calc(16px * var(--u));
  padding: 0 var(--edge);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.village::-webkit-scrollbar { display: none; }
/* 골목이 화면보다 길 때(village.js 가 붙임): 양 끝에 반 화면만큼 여유를 둬 맨 끝 집도 가운데로 */
.village.is-long { padding-inline: max(var(--edge), calc(50% - var(--house-w) / 2)); }

/* 좌우 화살표: 알림판과 같은 미색 동그라미. 손가락으로 미는 화면에선 숨깁니다. */
.village-arrow {
  position: absolute;
  top: 45%;
  z-index: 4;
  display: grid; place-items: center;
  width: calc(40px * var(--u)); height: calc(40px * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f4eee4;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(42, 39, 40, 0.12), 0 4px 12px rgba(42, 39, 40, 0.1);
  cursor: pointer;
}
.village-arrow[hidden] { display: none; }
.village-arrow.is-prev { left: calc(16px * var(--u)); }
.village-arrow.is-next { right: calc(16px * var(--u)); }
.village-arrow:hover { background: #ece4d6; }
.village-arrow:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.village-arrow svg { width: calc(20px * var(--u)); height: calc(20px * var(--u)); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: none), (pointer: coarse) {
  .village-arrow { display: none; }
}

.village-empty {
  flex: 1 0 100%;
  padding: calc(48px * var(--u)) 0;
  text-align: center;
  color: var(--ink-soft);
}

.house {
  position: relative;
  flex: 0 0 var(--house-w);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(16px * var(--u)) calc(12px * var(--u)) 0;
}
.house[hidden] { display: none; }

/* 집 사이의 거리 소품: 오른쪽 틈에 가로수나 가로등, 문 옆에 꽃 바구니. 집마다 바꿉니다. */
.house::before,
.house::after {
  content: "";
  position: absolute;
  bottom: 0;
  background: center bottom / contain no-repeat;
  pointer-events: none;
}
/* 집 사이 틈: 대개는 가로수, 세 번째마다 가로등 */
.house::after {
  right: 0;
  z-index: 0;
  width: calc(54px * var(--u)); height: calc(127px * var(--u));
  transform: translateX(50%);
  background-image: var(--street-tree);
}
.house:nth-child(3n)::after { width: calc(20px * var(--u)); height: calc(112px * var(--u)); background-image: url("assets/village/lamp.svg"); }
.house::before {
  display: none;
  left: calc(16px * var(--u));
  z-index: 2;
  width: calc(26px * var(--u)); height: calc(29px * var(--u));
  background-image: url("assets/village/flowers.svg");
}
.house:nth-child(odd)::before { display: block; }

/* 집 한 채: 실제 집을 같은 배율로 줄여 세웁니다. 층이 많을수록 키가 큽니다.
   지붕 윤곽 밖은 잘라서(village.js) 하얀 바탕이 보이게 합니다. */
.house-screen {
  position: relative;
  z-index: 1;
  max-width: 100%;
  background: #f7f1e6;
  overflow: hidden;
  transition: filter 0.2s ease;
}
.house:hover .house-screen { filter: brightness(1.05); }

/* 실제 크기로 띄우고 줄입니다(배율과 자르는 자리는 village.js). 누르는 건 카드가 받습니다. */
.house-frame {
  position: absolute;
  top: 0; left: 0;
  border: 0;
  background: #fff;
  transform-origin: 0 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.house-screen.is-loaded .house-frame { opacity: 1; }

/* 미리보기가 뜨기 전이나 미리보기를 끈 집에 보이는 이름표 */
.house-cover {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: calc(6px * var(--u));
  padding: calc(12px * var(--u));
  text-align: center;
}
.house-cover-name { font-size: calc(13px * var(--u)); font-weight: 600; line-height: 1.3; }

/* 집 위를 덮는 버튼: 어디를 눌러도 그 집 소개 카드가 열립니다 */
.house-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 0;
  border: 0;
  border-radius: calc(6px * var(--u));
  background: none;
  cursor: pointer;
}
.house-link:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* ---------- 집 소개 막: 누른 집 위에 집 모양 그대로 씌웁니다 ---------- */

.house-info {
  position: absolute;
  inset: 0;
  z-index: 2; /* 미리보기는 나중에 붙어서, 막을 그보다 위에 둡니다 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4px * var(--u));
  padding: 0 calc(10px * var(--u));
  background: rgba(255, 252, 245, 0.93);
  backdrop-filter: blur(2px);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  /* 걷힐 땐 흐려진 다음 숨고, 씌울 땐 바로 보이게(그래야 '놀러 가기'로 초점이 갑니다) */
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.house.is-open .house-info { opacity: 1; visibility: visible; transition: opacity 0.2s ease, visibility 0s; }
/* 열려 있는 동안엔 막이 누름을 받습니다 */
.house.is-open .house-link { pointer-events: none; }
.house.is-open .house-screen { filter: none; }

.house-info-name { margin: 0; font-size: calc(13.5px * var(--u)); font-weight: 600; line-height: 1.35; }
.house-info-intro {
  margin-top: calc(2px * var(--u));
  font-size: calc(11px * var(--u));
  line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden;
}
/* 놀러 가기: 문 위 이름표 + 집 현관 자리에 그린 문. 마우스를 올리면 문이 열리며 안쪽 불빛이 보입니다. */
.house-info-go {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(5px * var(--u));
  width: 100%;
  color: inherit;
  text-decoration: none;
  outline: none;
}
.house-info-knock {
  padding: calc(3px * var(--u)) calc(9px * var(--u));
  border-radius: 999px;
  background: var(--door, #2f3b55);
  color: #fff;
  font-size: calc(11px * var(--u));
  font-weight: 600;
  white-space: nowrap;
}
.house-info-door {
  position: relative;
  aspect-ratio: 32 / 40;
  background: url("assets/village/door-inside.svg") center / 100% 100% no-repeat;
  perspective: calc(160px * var(--u));
}
.door-leaf {
  position: absolute;
  inset: 0;
  color: var(--door, #a2967f);
  transform-origin: left center;
  transition: transform 0.35s ease;
}
.house-info-go:hover .door-leaf,
.house-info-go:focus-visible .door-leaf { transform: rotateY(-62deg); }
.door-leaf svg { display: block; width: 100%; height: 100%; }
.house-info-go:hover .house-info-knock { filter: brightness(0.92); }
.house-info-go:focus-visible .house-info-knock { outline: 2px solid #f3dd8e; outline-offset: 2px; }

/* ---------- 마을 길 ---------- */

/* 위 46px 보도, 연석, 아래 찻길. 크레용 결의 거리 그림을 가로로 이어 붙입니다.
   집 발치가 보도에 살짝 올라서도록 위로 겹칩니다. */
.street {
  position: relative;
  height: calc(124px * var(--u));
  margin: calc(-12px * var(--u)) 0 calc(40px * var(--u)); /* 화면 끝에서 끝까지 이어지는 길 */
  overflow: hidden;
  container-type: inline-size;
  background: url("assets/village/street.svg") left top / calc(600px * var(--u)) calc(124px * var(--u)) repeat-x;
}
.crosswalk { position: absolute; left: 68%; bottom: calc(2px * var(--u)); width: calc(62px * var(--u)); height: auto; }

/* 오가는 것들: 길 왼쪽 밖에서 오른쪽 밖까지. to-left 는 거꾸로 가고 그림도 뒤집습니다. */
.mover {
  position: absolute;
  left: 0;
  z-index: 3; /* 집 발치가 보도에 겹쳐 있어서, 오가는 것들은 집보다 앞에 그립니다 */
  animation: pass 40s linear infinite;
}
.mover img { width: 100%; height: auto; }
.mover.to-left { animation-direction: reverse; }
.mover.to-left img { scale: -1 1; }
@keyframes pass {
  from { transform: translateX(calc(-80px * var(--u))); }
  to { transform: translateX(calc(100cqw + calc(10px * var(--u)))); }
}

/* 보도의 사람들: 느릿느릿, 걸음마다 통통 */
.walker { width: calc(22px * var(--u)); }
.walker img { animation: bob 0.5s ease-in-out infinite alternate; }
.w1 { bottom: calc(79px * var(--u)); animation-duration: 48s; animation-delay: -6s; }
.w2 { bottom: calc(76px * var(--u)); width: calc(40px * var(--u)); animation-duration: 58s; animation-delay: -30s; }
.w3 { bottom: calc(80px * var(--u)); animation-duration: 44s; animation-delay: -24s; }
.w4 { bottom: calc(77px * var(--u)); animation-duration: 52s; animation-delay: -44s; }
@keyframes bob {
  from { translate: 0 0; }
  to { translate: 0 calc(-2px * var(--u)); }
}

/* 찻길: 자전거는 아래 차선으로 천천히, 차는 위아래 차선으로 가끔 한 대씩 */
.bike { bottom: calc(16px * var(--u)); width: calc(50px * var(--u)); animation-duration: 26s; animation-delay: -9s; }
.car { bottom: calc(34px * var(--u)); width: calc(66px * var(--u)); animation: pass-now-and-then 34s linear infinite reverse; }
/* 두 번째 차: 아래 차선으로 오른쪽을 향해, 첫 차와 엇갈린 때에 */
.car-2 { bottom: calc(2px * var(--u)); animation: pass-now-and-then 41s linear infinite; animation-delay: -20s; }
@keyframes pass-now-and-then {
  0%   { transform: translateX(calc(-80px * var(--u))); }
  40%  { transform: translateX(calc(100cqw + calc(10px * var(--u)))); }
  100% { transform: translateX(calc(100cqw + calc(10px * var(--u)))); }
}

/* 떨어지는 것(가을엔 낙엽): 마을 위에서 천천히 흔들리며 떨어집니다 */
.leaves { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.leaf {
  position: absolute;
  top: calc(-20px * var(--u));
  width: calc(12px * var(--u)); height: calc(10px * var(--u));
  background: var(--fall-a) center / contain no-repeat;
  animation: fall 16s linear infinite, sway 3s ease-in-out infinite alternate;
}
.leaf.leaf-b { background-image: var(--fall-b); }
.l1 { left: 12%; animation-delay: -2s, 0s; }
.l2 { left: 34%; animation-duration: 19s, 3.6s; animation-delay: -9s, -1s; }
.l3 { left: 57%; animation-duration: 14s, 2.6s; animation-delay: -5s, -2s; }
.l4 { left: 76%; animation-duration: 21s, 3.2s; animation-delay: -14s, 0s; }
.l5 { left: 90%; animation-duration: 17s, 2.8s; animation-delay: -11s, -1.4s; }
@keyframes fall {
  from { top: calc(-20px * var(--u)); rotate: 0deg; }
  to { top: 100%; rotate: 360deg; }
}
@keyframes sway {
  from { translate: calc(-14px * var(--u)) 0; }
  to { translate: calc(14px * var(--u)) 0; }
}

/* ---------- 꼬리말 ---------- */

.village-foot { padding: 0 calc(16px * var(--u)) calc(32px * var(--u)); text-align: center; }
/* 교실로 가는 작은 버튼: 테두리 + 바깥으로 나가는 화살표 */
.village-foot a {
  display: inline-flex; align-items: center; gap: calc(6px * var(--u));
  padding: calc(4px * var(--u)) calc(10px * var(--u)) calc(4px * var(--u)) calc(8px * var(--u));
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: calc(12px * var(--u));
  line-height: 1.4;
  text-decoration: none;
}
.village-foot a:hover { border-color: rgba(42, 39, 40, 0.35); color: var(--ink); }
.village-foot a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.village-foot img { width: calc(22px * var(--u)); height: auto; }
.village-foot svg {
  width: calc(12px * var(--u)); height: calc(12px * var(--u));
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* 휴대폰: 크기는 1배, 한 집씩 딱딱 멈추며 밀리게, 집 칸은 조금 좁게 */
@media (max-width: 640px) {
  :root { --u: 1; }
  .village { scroll-snap-type: x mandatory; }
  :root { --house-w: 160px; }
}

/* 휴대폰: 한 줄에 들어가도록 소개 글은 조금 작게(판 안에서 줄바꿈), 아이콘은 조금 작게 */
@media (max-width: 480px) {
  .hud { gap: calc(6px * var(--u)); }
  .hud-tools { gap: calc(6px * var(--u)); }
  .hud-about { padding: calc(6px * var(--u)) calc(10px * var(--u)); }
  .hud-about h1, .hud-about p { font-size: 14px; line-height: 1.4; }
  .hud-panel { min-height: calc(40px * var(--u)); padding: calc(4px * var(--u)) calc(10px * var(--u)) calc(4px * var(--u)) calc(4px * var(--u)); }
  .hud-search { padding-right: calc(4px * var(--u)); }
  .hud-chip { width: calc(30px * var(--u)); height: calc(30px * var(--u)); }
  .hud-chip svg { width: calc(17px * var(--u)); height: calc(17px * var(--u)); }
  .hud-num { font-size: calc(14px * var(--u)); }
  /* 찾기 칸이 펼쳐진 동안엔 소개 판을 잠시 접어 자리를 내줍니다 */
  .hud:has(.hud-search.is-open) .hud-intro { display: none; }
  .hud:has(.hud-search.is-open) .hud-tools { margin-left: auto; }
  .hud-search.is-open input { width: min(calc(200px * var(--u)), calc(100vw - calc(150px * var(--u)))); }
}

@media (prefers-reduced-motion: reduce) {
  .house-screen, .house-frame { transition: none; }
  .cloud, .mover, .mover img, .leaf { animation: none; }
  .hud-search input { transition: none; }
  .house-info, .door-leaf { transition: none; }
  .w1 { left: 10%; } .w2 { left: 40%; } .w3 { left: 62%; } .w4 { left: 86%; }
  .bike { left: 24%; } .car { left: 50%; } .car-2 { left: 8%; }
  .leaf { display: none; }
}