@import url('https://fonts.googleapis.com/css?family=Gaegu:400');

/* ── 홈페이지: about.css와 같은 뉴트럴 라이트 톤을 그대로 가져와
   about/in-the-dark/end-of-day로 흩어지는 입구답게 톤을 통일한다. ── */
:root {
  --text:   #2c2422;
  --sub:    #93908a;
  --paper:  #f7f6f4;
  --ring:   rgba(44, 36, 34, 0.12);

  --gs-page-bg: #ffffff;
  --gs-card-bg: #ffffff;
  --gs-card-border: transparent;
  --gs-card-shadow: transparent;
  --gs-card-radius: 0;
  --gs-max-width: 480px;
  --gs-card-min-height: auto;

  --gh-accent: rgba(44, 36, 34, 0.08);
  --gh-accent-2: rgba(44, 36, 34, 0.14);
  --gh-on-accent: var(--text);
  --gh-surface: rgba(44, 36, 34, 0.08);
  --gh-surface-hover: rgba(44, 36, 34, 0.15);
  --gh-icon: rgba(44, 36, 34, 0.65);
  --gh-icon-muted: rgba(44, 36, 34, 0.3);
  --gh-text: #93908a;
  --gh-text-strong: #2c2422;
  --gh-divider: rgba(44, 36, 34, 0.12);
  --gh-font: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;

  --gh-modal-bg: var(--gs-card-bg);
  --gh-modal-border: var(--ring);
  --gh-body-text: var(--text);
  --gh-cancel-bg: rgba(44, 36, 34, 0.06);
  --gh-cancel-bg-hover: rgba(44, 36, 34, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--gh-font);
  -webkit-font-smoothing: antialiased;
}

.home-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ── 집: attic이 맨 위, 그 아래로 wall이 층마다 쌓이고, 각 층의 wall 위에
   테마 이미지가 얹힌다. line-height:0 + block 이미지로 층 사이 잔여 간격을
   없애 이미지들이 이음매 없이 이어지게 한다. GameHeader 아이콘이 top:26px에
   절대좌표로 뜨므로 위쪽 여백으로 피하고, 화면이 좁을 때 집이 카드 가장자리에
   바로 붙어 꽉 차 보이지 않도록 좌우/아래 여백을 둔다. 배경과 분리된 "카드"처럼
   보이지 않도록 배경색·둥근 모서리·그림자는 페이지와 동일하게 없앤다. */
.home-house {
  display: flex;
  flex-direction: column;
  line-height: 0;
  /* GameHeader 아이콘(top:26px 절대좌표)을 피하고, 그 위로 굴뚝 연기가 잘리지 않고
     올라갈 만큼 위쪽 여백을 둔다(연기는 지붕 박스 바깥으로 떠오른다 —
     .home-floor--attic의 overflow:visible 참고). */
  margin: 118px 20px 24px;
  /* 층수는 문패 HTML에 직접 적지 않고 CSS 카운터로 매긴다 — 방이 늘어도
     숫자가 저절로 다시 매겨진다. 위에서 아래로 1씩 줄어드는 방식이라,
     reset 값이 곧 "번호가 붙는 방의 개수"다.

     맨 위 다락(소개)과 그 아래 작업실은 층수 표기 대상이 아니라 카운터에서
     빠진다 — 다락은 집의 머리이고, 작업실은 층이 아니라 "짓는 자리"다.

     ▶ 새 방을 추가할 때: 작업실 바로 아래에 넣고 이 reset 값을 1 올린다.
       작업실은 언제나 다락 바로 아래에 고정이고(짓는 자리는 늘 지붕 가까이),
       새 방일수록 작업실에 가깝다. 그러면 번호는 아래에서 위로 1F, 2F, 3F…
       순으로 자동으로 맞는다. */
  counter-reset: home-floor 3;
}

.home-floor {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.home-floor--attic {
  aspect-ratio: 1000 / 713;
  /* 굴뚝 연기가 지붕 위 하늘로 잘리지 않고 올라가도록 다락만 연다 */
  overflow: visible;
}

.home-floor--inthedark {
  aspect-ratio: 1000 / 608;
  counter-increment: home-floor -1;
}

/* 하루끝그림일기는 항상 집의 맨 아래층이라, 다른 층과 같은 벽 높이로
   자르면 콘텐츠 아래 벽 여백이 짧아 어색해 보인다. 더 높이가 긴 전용 벽
   이미지(home_wall_bottom.png, 1000×661)를 써서 그 여백을 넉넉히 확보한다
   — .home-floor-theme의 top:8.4%/width:90%는 그대로 두고 층 높이만
   늘렸으니, 콘텐츠(900×510 캔버스)는 원래 크기 그대로 위쪽에 자리 잡고
   늘어난 높이만큼이 고스란히 아래쪽 벽 여백으로 남는다. */
.home-floor--endofday {
  aspect-ratio: 1000 / 661;
  counter-increment: home-floor -1;
}

/* 공사층은 다른 층과 다른 전용 벽 이미지(home_wall_top.png, 1000×363)를 쓴다
   — 공사층만 다른 층과 톤이 달라 보이던 문제를 CSS 필터 대신 이미지
   자체로 해결한 것이라, 층 높이도 이 벽 이미지의 원본 비율에 정확히
   맞춘다. 펜스(900×250)는 이 벽보다 작아서 위아래로 여백이 남는다(아래
   .home-floor--construction .home-floor-theme의 top:15.3% 여백과 세트 —
   .home-construction-character / .home-construction-sign 좌표는 이 여백
   기준으로 역산한 값이다). */
/* 작업실에는 층수를 붙이지 않고 카운터에서도 빠진다(다락과 같은 취급).
   층이 아니라 "짓는 자리"라서다 — 원래 이 자리에 있던 공사층이 하던
   "다음 방은 여기서 나온다"는 역할을 그대로 이어받는다. 위 counter-reset
   주석의 추가 규칙 참고. */
.home-floor--construction {
  aspect-ratio: 1000 / 363;
}

.home-floor-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ── 클릭(탭) 히트박스: 층마다 벽(home-floor-img)까지 통째로 클릭되던 걸,
   실제 방 내용물(.home-floor-theme) 영역으로만 좁힌다 — 벽 위에서는
   커서도 그대로 기본 화살표고 클릭도 아무 반응이 없다. 위치는 모든
   방형 층이 공유하는 .home-floor-theme와 같은 left:5%/width:90%를
   그대로 쓰고, 위아래 여백(top/bottom)만 층마다 다른 벽 이미지 비율에
   맞춰 따로 잡는다(다락은 모양이 완전히 달라 .home-attic-hotspot을
   따로 쓴다). ── */
.home-floor-hotspot {
  position: absolute;
  left: 5%;
  width: 90%;
  -webkit-tap-highlight-color: transparent;
}

.home-inthedark-hotspot {
  top: 8.4%;
  bottom: 7.72%;
  cursor: pointer;
}

.home-endofday-hotspot {
  top: 8.4%;
  bottom: 14.44%;
  cursor: pointer;
}

/* 공사층 히트박스는 위 .home-floor--construction::after와 같은
   top:15.3%/bottom:15.8%(펜스 내용물 영역)를 그대로 맞춘다. */
.home-construction-hotspot {
  top: 15.3%;
  bottom: 15.8%;
  /* /workroom/이 아직 빈 자리라 이 층은 눌리지 않는다 — 그 페이지를 열 때
     pointer로 되돌리고, 아래 호버·액티브 밝기 규칙에도 다시 넣는다. */
  cursor: not-allowed;
}

/* ── 다락 클릭 영역: 지붕 전체가 아니라 창문+문패가 있는 자리만 클릭되게
   좁힌 히트박스. home_attic_window_open.png의 실제 그림 영역(좌우 날개
   포함 21.8%~76.3%, 위아래 34.2%~79.2%)에 문패(top 72.8%)까지 여유 있게
   담기는 크기로 잡았다. 눈에 보이는 배경/테두리는 없고 클릭 판정만
   한다 — 실제 시각 요소(창문/캐릭터/문패)는 이 뒤에 형제로 그려져
   그대로 보인다. ── */
.home-attic-hotspot {
  position: absolute;
  left: 20%;
  top: 32%;
  width: 60%;
  height: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── 호버 하이라이트: wall 전체가 아니라 그림(테마 이미지) 영역만 밝힌다.
   다락은 배경(지붕·벽)이 home-floor-img 한 장에 통째로 그려져 있으므로
   이 이미지는 건드리지 않고, 창문·캐릭터(.home-attic-window img)만
   밝혀서 다른 층들과 마찬가지로 배경 톤은 유지한다. 모든 층은 히트박스가
   테마/창문/문패보다 앞선 형제라 :hover ~ 로 뒤 형제들만 밝히고, 벽
   영역(히트박스 바깥)은 호버해도 반응하지 않는다. ── */
.home-floor-theme,
.home-attic-window img {
  transition: filter 150ms ease;
}

.home-inthedark-hotspot:hover ~ .home-floor-theme,
.home-endofday-hotspot:hover ~ .home-floor-theme,
.home-attic-hotspot:hover ~ .home-attic-window img {
  filter: brightness(1.06);
}

.home-inthedark-hotspot:active ~ .home-floor-theme,
.home-endofday-hotspot:active ~ .home-floor-theme,
.home-attic-hotspot:active ~ .home-attic-window img {
  filter: brightness(0.98);
}

/* ── 작업실 층: 방은 있지만 /workroom/이 아직 빈 자리라 지금은 눌리지 않는다.
   그걸 커서(not-allowed)로만 알려준다 — 이 커서는 벽이 아니라 위
   .home-construction-hotspot(펜스 내용물 영역)에서만 뜬다. 채도는 벽이 아니라 내용물(테마 이미지)에만 낮춰
   적용한다 — 아래 .home-floor--construction .home-floor-theme 참고.
   아래층과의 경계 그림자는 공사층 높이(aspect-ratio 1000/363)에 비해
   박스 경계선이 뚜렷한 띠로 보여 오히려 어색해서 걷어냈다 — 펜스
   내용물 영역(top:15.3%/bottom:15.8%)을 옅게 눌러 주는 그러데이션만
   남긴다. ── */
.home-floor--construction::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 15.3%;
  bottom: 15.8%;
  pointer-events: none;
}

/* ── 스크롤 리빌: 각 층이 뷰포트에 들어올 때 살짝 페이드인 + 위로 슬라이드.
   js-reveal은 JS가 IntersectionObserver를 지원할 때만 body에 붙으므로,
   JS가 없거나 실패해도 층들은 기본적으로 그냥 보인다(점진적 향상). ── */
.js-reveal .home-floor {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.js-reveal .home-floor.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .home-floor {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── 숨쉬는 글로우 키프레임: 2F 노란 문 불빛이 쓴다. ── */
@keyframes home-glow-breathe {
  0%, 100% { opacity: 0.45; transform: scale(0.96); }
  50% { opacity: 0.85; transform: scale(1.05); }
}

/* ── in-the-dark 노란 문 불빛: 다락방 창과 같은 숨쉬는 글로우.
   home_inthedark.png(900×510)가 wall 위 left:5%/top:8.4%/width:90%로
   얹히는 것을 감안해 층 좌표계로 환산한 문 영역이다. 다락방과 위상이
   어긋나게 delay를 줘서 집 전체가 기계적으로 깜빡이지 않게 한다. ── */
.home-door-glow {
  position: absolute;
  left: 69%;
  top: 14%;
  width: 22%;
  height: 44%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 223, 155, 0.5), rgba(255, 223, 155, 0) 72%);
  pointer-events: none;
  animation: home-glow-breathe 3.2s ease-in-out -1.6s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .home-door-glow {
    animation: none;
    opacity: 0.6;
  }
}


/* ── 그림 속 잔잔한 애니메이션들: 문 불빛처럼 그림 좌표 위에
   CSS로 그려 얹는 작은 오브제들. 전부 pointer-events:none. ── */

/* 다락 굴뚝 연기: 뭉게뭉게 세 덩이가 시차를 두고 떠오르며 흐려진다.
   home_attic.png의 굴뚝 입구(약 29.5% / 8.3%)에서 시작해 하늘로 올라간다.
   지붕(어두움)과 하늘(흰색) 둘 다를 지나므로 중간 회색으로 그린다. */
.home-smoke {
  position: absolute;
  left: 29.5%;
  top: 8.3%;
  pointer-events: none;
}

.home-smoke span {
  position: absolute;
  left: 0;
  top: 0;
  width: 21px;
  height: 21px;
  background: url("/home/home_smoke.webp") center / contain no-repeat;
  filter: brightness(0.72);
  opacity: 0;
  animation: home-smoke-rise 6.5s ease-out infinite;
}

.home-smoke span:nth-child(2) {
  left: -6px;
  width: 16px;
  height: 16px;
  animation-delay: 2.2s;
}

.home-smoke span:nth-child(3) {
  left: 6px;
  width: 18px;
  height: 18px;
  animation-delay: 4.4s;
}

/* 하늘 높이까지 천천히 올라가며 서서히 흩어진다 — 중반까지는
   또렷하게 남아 있다가 끝에서야 사라져서 "금방 꺼지는" 느낌이 없다.
   굴뚝이 지붕 왼편에 있으므로 지붕 반대쪽(왼쪽)으로 흘러간다. */
@keyframes home-smoke-rise {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  15% { opacity: 0.7; }
  55% { opacity: 0.5; }
  100% { transform: translate(-16px, -95px) scale(1.65); opacity: 0; }
}

/* 2F 검은 바람: 5초마다 바람 소용돌이 그림이 왼쪽에서 문 쪽으로 휑 하고
   쓸고 지나간다. 바람이 문에 닿는 순간 문이 덜컹이고, 그 직후 캐릭터가
   오들오들 떤다 — 셋 다 같은 5초 주기 안에서 위상만 맞춘 것이라 동기화된다. */
.home-inthedark-wind {
  opacity: 0;
  animation: home-inthedark-wind-sweep 5s linear -1s infinite;
}

@keyframes home-inthedark-wind-sweep {
  0% { transform: translateX(-18%); opacity: 0; }
  10% { opacity: 0.85; }
  22% { opacity: 0.55; }
  30%, 100% { transform: translateX(70%); opacity: 0; }
}

/* 2F 문: 바람이 닿는 26%~38% 구간에서 문이 왼쪽 문틀(경첩)을 축으로
   덜컹덜컹 흔들린다 — 캐릭터 shiver와 같은 구간이라 동시에 떤다. */
.home-inthedark-door {
  transform-origin: 74% 33%;
  animation: home-inthedark-door-rattle 5s linear -1s infinite;
}

@keyframes home-inthedark-door-rattle {
  0%, 26% { transform: rotate(0deg); }
  28% { transform: rotate(-1.8deg); }
  30% { transform: rotate(1.6deg); }
  32% { transform: rotate(-1.4deg); }
  34% { transform: rotate(1deg); }
  36% { transform: rotate(-0.6deg); }
  38%, 100% { transform: rotate(0deg); }
}

/* 2F 오들오들 떠는 표시(《《): 캐릭터가 떠는 구간에만 나타났다 사라진다.
   transform-origin을 캐릭터와 같은 좌표(80% 41%, 표시가 실제로 그려진
   자리)로 맞춰야 scale 애니메이션 중에도 제자리에서 커지고 작아진다 —
   기본값(50% 50%, 캔버스 중앙)이면 축소될 때 중앙 쪽(왼쪽)으로 당겨져
   보인다. */
.home-inthedark-shiver {
  opacity: 0;
  transform-origin: 80% 41%;
  animation: home-inthedark-shiver-marks 5s linear -1s infinite;
}

@keyframes home-inthedark-shiver-marks {
  0%, 24% { opacity: 0; transform: scale(0.85); }
  26% { opacity: 0.9; transform: scale(1); }
  30% { opacity: 0.5; transform: scale(0.95); }
  33% { opacity: 0.9; transform: scale(1); }
  36% { opacity: 0.6; transform: scale(0.95); }
  39%, 100% { opacity: 0; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .home-smoke span {
    animation: none;
  }

  .home-inthedark-wind,
  .home-inthedark-shiver {
    animation: none;
    opacity: 0;
  }

  .home-inthedark-door {
    animation: none;
    transform: none;
  }
}

/* 테마 이미지: wall(1000×608) 위에 원본 비율(900×510) 그대로,
   가운데 정렬로 살짝 액자처럼 얹는다. 층 그림은 배경(_bg) 위에
   캐릭터·소품 레이어(같은 900×510 풀캔버스)를 겹쳐 쌓는 구조라,
   모든 레이어가 이 규칙 하나로 정확히 겹친다. */
.home-floor-theme {
  position: absolute;
  left: 5%;
  top: 8.4%;
  width: 90%;
  height: auto;
  display: block;
  pointer-events: none;
}

/* 공사층은 다른 층보다 위아래 벽 여유를 훨씬 넉넉하게 주고 싶어서, 기본
   top:8.4% 대신 더 큰 값으로 덮어써 펜스를 층 중앙에 가깝게 띄운다(위
   .home-floor--construction의 aspect-ratio 1000/363과 세트 — 위 15.3%,
   아래 15.8%로 여백이 남는다). 채도는 벽(home_wall_top.png)은 그대로 두고
   이 테마 이미지(배경/펜스/캐릭터)에만 낮춰서, 아직 완성되지 않은
   "내용물"만 바래 보이게 한다. */
.home-floor--construction .home-floor-theme {
  top: 15.3%;
  filter: saturate(0.85);
}

/* 공사장 캐릭터는 펜스 널빤지 위에 올라선 것처럼 보이도록 별도 좌표를
   준다. left/top은 캐릭터 그림(900×510) 속 발끝(48.6%, 60.6%)이 펜스
   널빤지 윗면(가로 중앙 50.4%, 세로 56% — 위 top:15.3% 여백이 적용된
   펜스 기준으로 역산)에 닿도록 역산한 값이다. */
.home-floor--construction .home-construction-character {
  left: 13.9%;
  top: -17.1%;
  width: 75%;
}

/* 공사장 알전구: 방 천장(펜스 위 top:15.3% 여백이 끝나는 지점 = 위
   .home-floor--construction .home-floor-theme와 같은 위치)에서 전선으로
   늘어진 백열등. 평소엔 꺼진 채 가만히 있다가, 호버(또는 탭 후 잠깐
   호버하면 살랑 흔들리며 지지직 깜빡인다 — 전선은
   ::before, 전구알은 ::after로 그린다. */
.home-bulb {
  position: absolute;
  left: 82%;
  top: 15.3%;
  pointer-events: none;
  transform-origin: top center;
}

.home-bulb::before {
  content: '';
  position: absolute;
  left: -0.75px;
  top: 0;
  width: 1.5px;
  height: 20px;
  background: rgba(44, 36, 34, 0.45);
}

.home-bulb::after {
  content: '';
  position: absolute;
  left: -5px;
  top: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffdf9b;
  opacity: 0.3;
  transition: opacity 200ms ease;
}

.home-construction-hotspot:hover ~ .home-bulb {
  animation: home-bulb-sway 1.1s ease-in-out infinite;
}

.home-construction-hotspot:hover ~ .home-bulb::after {
  opacity: 1;
  box-shadow: 0 0 7px 2px rgba(255, 223, 155, 0.5);
  animation: home-bulb-flicker 900ms ease-in-out infinite;
}

@keyframes home-bulb-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes home-bulb-flicker {
  0%, 100% { opacity: 1; }
  15% { opacity: 0.4; }
  30% { opacity: 1; }
  45% { opacity: 0.3; }
  55% { opacity: 1; }
  70% { opacity: 0.5; }
  85% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .home-construction-hotspot:hover ~ .home-bulb {
    animation: none;
  }

  .home-construction-hotspot:hover ~ .home-bulb::after {
    animation: none;
    opacity: 1;
  }
}

/* ── 레이어 애니메이션: 분리된 캐릭터·소품을 살아 있게 움직인다.
   주의: 1F/2F 배경(_bg)에는 캐릭터가 아직 그려져 있어서, 그 두 층의
   레이어는 반드시 "1.02 이상으로 커지는" 변형만 쓴다 — 레이어가 밑그림을
   항상 덮고 있어야 이중상이 안 보인다. transform-origin은 캔버스가 아니라
   그림 속 해당 사물의 중심/손잡이 좌표다. ── */

/* 2F 문 앞 캐릭터: 검은 바람이 지나가면(주기 5s 동기화) 오들오들 떤다.
   밑그림을 덮는 1.03 확대를 유지한 채 작은 회전 지터만 준다. */
.home-inthedark-character {
  transform-origin: 80% 41%;
  transform: scale(1.03);
  animation: home-inthedark-shiver 5s linear -1s infinite;
}

@keyframes home-inthedark-shiver {
  0%, 24% { transform: scale(1.03) rotate(0deg); }
  26% { transform: scale(1.03) rotate(-1.2deg); }
  28% { transform: scale(1.03) rotate(1.2deg); }
  30% { transform: scale(1.03) rotate(-1.2deg); }
  32% { transform: scale(1.03) rotate(1.2deg); }
  34% { transform: scale(1.03) rotate(-1.2deg); }
  36% { transform: scale(1.03) rotate(0.8deg); }
  38%, 100% { transform: scale(1.03) rotate(0deg); }
}

/* 1F 캐릭터가 올라선 구름: 밤하늘을 아주 은은하게 오르내리며 떠다닌다.
   눈에 띄는 움직임보다는 "숨 쉬듯 떠 있다"는 느낌 정도로만 살짝
   흔들리게 진폭을 작게, 주기를 느긋하게 잡았다. */
.home-endofday-cloud {
  transform-origin: 65% 70%;
  animation: home-endofday-cloud-float 6s ease-in-out infinite;
}

@keyframes home-endofday-cloud-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.008); }
}

/* 1F 캔버스(이젤+천): 위쪽 고정점을 축으로 밤바람에 흔들리다가, 캐릭터가
   붓을 내리찍는 순간(브러시와 같은 3.2s 주기, 45% 지점) 살짝 들썩이며
   반응한다 — 붓이 캔버스에 닿는 게 느껴지도록 캐릭터·붓과 박자를 맞췄다. */
.home-endofday-calendar {
  transform-origin: 65% 30%;
  animation: home-endofday-calendar-sway 3.2s ease-in-out infinite;
}

@keyframes home-endofday-calendar-sway {
  0%, 100% { transform: rotate(-1deg) translateX(0); }
  25% { transform: rotate(-2.2deg) translateX(-1px); }
  45% { transform: rotate(1.6deg) translateX(1px); }
  60% { transform: rotate(-1deg) translateX(-0.5px); }
  80% { transform: rotate(0.7deg) translateX(0.5px); }
}

/* 1F 그림 그리는 캐릭터: 붓이 캔버스에 닿는 박자(45%)에 맞춰 몸을 앞으로
   기울였다가 돌아오는 붓질 동작 — 숨쉬기보다 훨씬 뚜렷하게 움직여서
   실제로 그림을 그리고 있는 것처럼 보이게 한다. 배경(_bg)엔 캐릭터가
   그려져 있지 않은 순수 배경색이라 다른 층과 달리 확대 제약 없이
   자유롭게 움직인다. 발이 붙은 자리(하단 중앙)를 축으로 삼아 서 있는
   느낌을 유지한다. */
.home-endofday-character {
  transform-origin: 72% 72%;
  animation: home-endofday-breathe 3.2s ease-in-out infinite;
}

@keyframes home-endofday-breathe {
  0%, 100% { transform: scale(1) rotate(0deg) translateY(0); }
  25% { transform: scale(1.015) rotate(-2deg) translateY(-2px); }
  45% { transform: scale(1.04) rotate(3deg) translateY(3px); }
  60% { transform: scale(1.02) rotate(-1deg) translateY(1px); }
  80% { transform: scale(1.005) rotate(0.5deg) translateY(0); }
}

/* 1F 붓: 손에 쥔 쪽(붓 아랫부분)을 축으로만 회전해 캔버스를 향해 붓질하는
   동작을 반복한다 — 이동(translate) 없이 회전만 써서 손에서 벗어나
   멀리 날아가 보이지 않고, 손끝에 붙은 채로 붓끝만 오간다. 캐릭터·캔버스와
   같은 3.2s 주기로 맞춰 셋이 한 동작처럼 읽힌다. */
.home-endofday-brush {
  transform-origin: 67% 67%;
  animation: home-endofday-brush-dab 3.2s ease-in-out infinite;
}

@keyframes home-endofday-brush-dab {
  0%, 100% { transform: rotate(-2deg); }
  20% { transform: rotate(-15deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(4deg); }
  80% { transform: rotate(-6deg); }
}

/* 1F 캔버스 위 꽃 세 송이: 붓이 캔버스를 향해 내려찍는 순간(브러시와 같은
   3.2s 주기) 즈음에 맞춰 꽃 그림이 톡톡 피어났다가, 다음 붓질 전에 옅어져
   사라진다 — 실제로 그리고 지우는 것처럼 반복된다. 같은 이미지를 세 장
   겹쳐 각각 다른 위치로 옮기고(translate) 크기·타이밍을 살짝 어긋나게
   해서 한 송이가 복제된 게 아니라 세 송이가 도란도란 피어나는 것처럼
   보이게 한다. transform-origin을 꽃 자신의 중심(그림 속 좌표)으로 잡아
   캔버스 구석이 아니라 꽃 스스로 피어나는 것처럼 커진다. */
.home-endofday-flower {
  transform-origin: 63% 55%;
  animation-duration: 3.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.home-endofday-flower--1 {
  animation-name: home-endofday-flower-bloom-1;
}

.home-endofday-flower--2 {
  animation-name: home-endofday-flower-bloom-2;
  animation-delay: -0.4s;
}

.home-endofday-flower--3 {
  animation-name: home-endofday-flower-bloom-3;
  animation-delay: -0.8s;
}

@keyframes home-endofday-flower-bloom-1 {
  0%, 30% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  45% { opacity: 0.9; transform: translate(0, 0) scale(0.85); }
  55% { opacity: 1; transform: translate(0, 0) scale(1); }
  75% { opacity: 0.9; transform: translate(0, 0) scale(1); }
  95%, 100% { opacity: 0; transform: translate(0, 0) scale(1.1); }
}

@keyframes home-endofday-flower-bloom-2 {
  0%, 30% { opacity: 0; transform: translate(-5.1%, -8.1%) scale(0.2); }
  45% { opacity: 0.9; transform: translate(-5.1%, -8.1%) scale(0.6); }
  55% { opacity: 1; transform: translate(-5.1%, -8.1%) scale(0.75); }
  75% { opacity: 0.9; transform: translate(-5.1%, -8.1%) scale(0.75); }
  95%, 100% { opacity: 0; transform: translate(-5.1%, -8.1%) scale(0.85); }
}

@keyframes home-endofday-flower-bloom-3 {
  0%, 30% { opacity: 0; transform: translate(-2.3%, 6.5%) scale(0.35); }
  45% { opacity: 0.9; transform: translate(-2.3%, 6.5%) scale(1); }
  55% { opacity: 1; transform: translate(-2.3%, 6.5%) scale(1.15); }
  75% { opacity: 0.9; transform: translate(-2.3%, 6.5%) scale(1.15); }
  95%, 100% { opacity: 0; transform: translate(-2.3%, 6.5%) scale(1.25); }
}

/* 1F 밤하늘 달: 다락방 문 불빛과 같은 문법으로 은은하게 숨쉬듯 빛나며,
   거기에 귀엽게 까딱까딱 고개를 갸웃하는 움직임을 더한다. 원본 그림 속
   위치가 문패 바로 아래에 붙어 있어, 문패 아래로 내려서 가려지지 않고
   뚜렷이 보이도록 translateY로 자리를 옮긴다. transform에 회전을 함께
   넣으므로 모든 스텝에 translateY·scale·rotate를 다 같이 적어야
   부드럽게 보간된다. */
.home-endofday-moon {
  transform-origin: 17% 28%;
  filter: drop-shadow(0 0 3px rgba(255, 240, 200, 0.35));
  animation: home-endofday-moon-glow 4.5s ease-in-out infinite;
}

@keyframes home-endofday-moon-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 240, 200, 0.3)); transform: translateY(11%) scale(1) rotate(0deg); }
  15% { transform: translateY(11%) scale(1.03) rotate(10deg); }
  30% { transform: translateY(11%) scale(1.05) rotate(-8deg); }
  50% { filter: drop-shadow(0 0 9px rgba(255, 240, 200, 0.75)); transform: translateY(11%) scale(1.09) rotate(6deg); }
  65% { transform: translateY(11%) scale(1.06) rotate(-4deg); }
  80% { transform: translateY(11%) scale(1.03) rotate(2deg); }
}

/* 1F 별: 밤하늘 전체가 반짝이듯 불규칙한 리듬으로 명멸한다 —
   알전구 지지직 깜빡임과 같은 문법을 별빛에 맞게 가져왔다. 위쪽 별 몇 개가
   문패에 가려 있던 것도 달과 함께 문패 아래로 내려서 해결한다. */
.home-endofday-star {
  transform: translateY(18%);
  animation: home-endofday-star-twinkle 3.6s ease-in-out infinite;
}

@keyframes home-endofday-star-twinkle {
  0%, 100% { opacity: 0.55; }
  15% { opacity: 1; }
  32% { opacity: 0.6; }
  50% { opacity: 0.95; }
  68% { opacity: 0.5; }
  84% { opacity: 0.9; }
}

/* 공사장 캐릭터: 펜스 위에 올라선 채 콩콩 뛰듯 들썩인다. transform-origin은
   발끝(그림 속 49%/60%)이라 발이 펜스에 붙은 채 몸만 움직이는 것처럼 보인다. */
.home-construction-character {
  transform-origin: 49% 60%;
  animation: home-work-bob 2.6s ease-in-out infinite;
}

@keyframes home-work-bob {
  0%, 48%, 100% { transform: translateY(0) rotate(0deg); }
  12% { transform: translateY(-4px) rotate(-1.2deg); }
  24% { transform: translateY(0) rotate(0deg); }
  36% { transform: translateY(-4px) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .home-inthedark-character,
  .home-endofday-cloud,
  .home-endofday-calendar,
  .home-endofday-character,
  .home-endofday-brush,
  .home-endofday-moon,
  .home-endofday-star,
  .home-construction-character {
    animation: none;
    transform: none;
  }

  .home-endofday-moon {
    filter: drop-shadow(0 0 3px rgba(255, 240, 200, 0.35));
  }

  .home-endofday-star {
    opacity: 0.85;
  }

  .home-endofday-flower {
    animation: none;
    opacity: 0.9;
  }

  .home-endofday-flower--1 {
    transform: translate(0, 0) scale(1);
  }

  .home-endofday-flower--2 {
    transform: translate(-5.1%, -8.1%) scale(0.75);
  }

  .home-endofday-flower--3 {
    transform: translate(-2.3%, 6.5%) scale(1.15);
  }
}

/* ── 층 문패: 각 층 방(테마 그림) 천장에 끈 두 가닥으로 매달린 손글씨 팻말.
   집 세계관 속 사물처럼 보이도록 종이 배경 + 잉크색 테두리로 그리고,
   살짝 기울어 있다가 호버하면 가볍게 흔들린다. 층수는 문패 글자로 직접
   박아두지 않고 .home-floor-badge(아래)로 얹는다 — 공사층 자리에 새 방이
   들어와 순서가 바뀌어도 CSS 카운터가 알아서 다시 매겨준다. ── */
.home-floor-sign {
  position: absolute;
  left: 11%;
  top: 13.5%;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 3px;
  background: var(--paper);
  border: 1.5px solid rgba(44, 36, 34, 0.35);
  border-radius: 10px;
  font-family: 'Gaegu', var(--gh-font);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.2;
  color: rgba(44, 36, 34, 0.72);
  white-space: nowrap;
  pointer-events: none;
  transform: rotate(-2deg);
  transform-origin: 50% -14px;
  transition: color 150ms ease, border-color 150ms ease;
}

/* 천장과 문패를 잇는 끈 두 가닥 */
.home-floor-sign::before,
.home-floor-sign::after {
  content: '';
  position: absolute;
  top: -13px;
  width: 1.5px;
  height: 13px;
  background: rgba(44, 36, 34, 0.35);
}

.home-floor-sign::before {
  left: 18%;
  transform: rotate(7deg);
}

.home-floor-sign::after {
  right: 18%;
  transform: rotate(-7deg);
}

.home-inthedark-hotspot:hover ~ .home-floor-sign,
.home-endofday-hotspot:hover ~ .home-floor-sign {
  color: var(--text);
  border-color: rgba(44, 36, 34, 0.55);
  animation: home-sign-swing 900ms ease-in-out;
}

@keyframes home-sign-swing {
  0%, 100% { transform: rotate(-2deg); }
  30% { transform: rotate(2.5deg); }
  60% { transform: rotate(-3.5deg); }
}

/* 층 번호 배지: 문패 글자보다 살짝 작고 옅게 앞에 붙어, 방 이름을
   가리지 않으면서도 몇 층인지 바로 알 수 있게 한다. 내용은 counter()로
   채우므로 .home-floor-badge에 직접 텍스트를 쓰지 않는다(위 counter-reset/
   increment 참고). 다락(About)은 층수 표기가 없다. */
.home-floor-badge {
  font-size: 0.7em;
  font-weight: 700;
  color: rgba(44, 36, 34, 0.42);
  letter-spacing: 0.01em;
}

.home-floor-badge::before {
  content: counter(home-floor) 'F';
}

/* 공사층 "Coming Soon!"은 다른 층처럼 매달린 문패가 아니라, 펜스 널빤지에
   직접 적힌 글씨처럼 보이도록 종이/테두리 없이 폰트만 얹는다. 펜스 널빤지
   중앙(가로 50%, 세로 61.9% — 위 top:15.3% 여백이 적용된 펜스 기준으로
   역산) 위에 살짝 기울여 손글씨 느낌을 준다. */
.home-construction-sign {
  position: absolute;
  left: 50%;
  top: 61.9%;
  display: flex;
  align-items: center;
  gap: 5px;
  transform: translate(-50%, -50%) rotate(-2deg);
  font-family: 'Gaegu', var(--gh-font);
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(44, 36, 34, 0.78);
  white-space: nowrap;
  pointer-events: none;
}

/* 호버하면 글씨가 까딱거린다 — 기울기(rotate(-2deg))는 유지한 상태에서만
   흔들려야 하니, translate로 중심을 맞춘 채 rotate 값만 바뀌는 전용
   키프레임을 쓴다. */
.home-construction-hotspot:hover ~ .home-construction-sign {
  animation: home-construction-sign-wiggle 900ms ease-in-out;
}

@keyframes home-construction-sign-wiggle {
  0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); }
  30% { transform: translate(-50%, -50%) rotate(3deg); }
  60% { transform: translate(-50%, -50%) rotate(-4.5deg); }
}

/* ── 다락방 창문 연출: 랜딩 시 닫힌 창 → 안에서 미는 듯 창이 달칵거리다가 →
   활짝 열리면 캐릭터가 창턱 뒤에서 쏙 올라온다. 이후엔 창가에서 잔잔히
   숨쉬며 갸웃거린다. 네 이미지가 같은 1000px 아트보드 상단 기준으로 잘려
   있어서 전부 top:0 / width:100%로 겹치면 좌표가 맞는다. ── */
.home-attic-window {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.home-attic-window img {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* 창문 세로 위치: about 문패(top 72.8%)의 끈이 닿는 곳(y≈508)에 창턱
   하단이 오도록, 닫힌 창(+28px)과 열린 창(+55px)을 각각 내려 바닥을
   맞춘다(둘 다 y≈505). 열리는 순간 창턱은 그대로 두고 아치만 위로
   자라나는 것처럼 보인다. */
.home-attic-window-img--closed {
  top: 4%;
}

.home-attic-window-img--open {
  top: 7.7%;
}

/* 캐릭터 클립 박스: 창턱 상단선(아트보드 y≈488/713)에서 아래를 잘라,
   캐릭터가 창턱 뒤(창 안)에서 올라오는 것처럼 보이게 한다. 잘린 직선
   단면은 어두운 창틀 위에 놓여 눈에 띄지 않는다. */
.home-attic-character-clip {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 68.5%;
  overflow: hidden;
}

/* 캐릭터: 창이 열린 직후 올라온다(스프링 이징으로 살짝 통통).
   이미지 하단을 클립 박스 바닥(=창턱 상단선)에 붙여서, 캐릭터가 잘리지 않고
   턱에 딱 얹혀 보이게 한다. 올라온 뒤엔 idle 애니메이션이 이어받는다. */
.home-attic-character {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  transform: translateY(46%);
  transform-origin: 50% 100%;
  animation:
    home-attic-rise 750ms cubic-bezier(0.34, 1.3, 0.5, 1) 1.55s forwards,
    home-attic-idle 3.4s ease-in-out 3.2s infinite alternate;
}

@keyframes home-attic-rise {
  to { transform: translateY(0); }
}

/* idle: 위아래로 들썩이는 대신, 바닥(창턱)에 붙은 채 숨쉬듯 살짝
   눌렸다 펴지며 고개를 갸웃한다 — 턱에 앉아 있는 느낌이 유지된다. */
@keyframes home-attic-idle {
  0% { transform: scaleY(1) rotate(0deg); }
  100% { transform: scaleY(0.97) rotate(0.7deg); }
}

/* 손 흔들기: 팔만 따로 그려 어깨 관절(캔버스 기준 57.5%/89%)을 축으로
   시계추처럼 회전시킨다 — 몸통(home_attic_character.png)은 이제 팔이
   없는 그림이라 겹쳐도 팔 자리가 비어 보이지 않는다. 창턱에 올라와
   자리 잡은 뒤(rise 종료 시점)부터 세 번 흔들고 원래 각도(rotate 0deg)로
   쉬다가, 한 주기(6s) 뒤에 다시 흔든다 — 흔드는 구간(0~30%)은 실제
   1.8초 그대로라 속도는 안 바뀌고, 나머지는 쉬는 시간이라 계속
   흔들리기만 하는 기계적인 틱처럼 보이지 않는다. */
.home-attic-window img.home-attic-character-body,
.home-attic-window img.home-attic-character-arm {
  top: auto;
  bottom: 0;
}

.home-attic-character-arm {
  transform-origin: 57.5% 89%;
  animation: home-attic-arm-wave 5s ease-in-out 2.3s infinite;
}

@keyframes home-attic-arm-wave {
  0%, 30%, 100% { transform: rotate(0deg); }
  3% { transform: rotate(-20deg); }
  9% { transform: rotate(16deg); }
  15% { transform: rotate(-18deg); }
  21% { transform: rotate(14deg); }
  25.5% { transform: rotate(-6deg); }
}

/* 닫힌 창: 열리기 직전 안에서 미는 것처럼 달칵달칵 흔들리고,
   열리는 순간 스톱모션처럼 한 번에 사라진다. */
.home-attic-window-img--closed {
  transform-origin: 49% 80%;
  animation:
    home-attic-rattle 450ms ease-in-out 0.9s,
    home-attic-hide 10ms steps(1, end) 1.4s forwards;
}

@keyframes home-attic-rattle {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20% { transform: translateX(-0.35%) rotate(-0.4deg); }
  45% { transform: translateX(0.35%) rotate(0.4deg); }
  70% { transform: translateX(-0.25%) rotate(-0.25deg); }
}

@keyframes home-attic-hide {
  to { opacity: 0; visibility: hidden; }
}

/* 열린 창: 닫힌 창이 사라지는 같은 순간에 나타나며 살짝 튕겨 커진다 —
   두 프레임짜리 스톱모션이 크레용 그림체와 어울린다. */
.home-attic-window-img--open {
  opacity: 0;
  transform-origin: 49% 55%;
  animation: home-attic-pop 350ms cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s forwards;
}

@keyframes home-attic-pop {
  0% { opacity: 1; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

/* 모션 최소화: 연출 없이 완성 장면(열린 창 + 창가의 캐릭터)만 보여준다. */
@media (prefers-reduced-motion: reduce) {
  .home-attic-window-img--closed {
    animation: none;
    opacity: 0;
    visibility: hidden;
  }

  .home-attic-window-img--open {
    animation: none;
    opacity: 1;
  }

  .home-attic-character {
    animation: none;
    transform: none;
  }

  .home-attic-character-arm {
    animation: none;
  }
}

/* ── 다락방 about 간판: 창문 바로 아래 지붕에 매달린 작은 간판.
   층 문패와 같은 종이+잉크 문법이지만, 창가 캐릭터의 집 간판처럼
   창 가운데에 맞춰 단다. home_attic.png의 창 좌표(34.7%~63.5%) 기준. ── */
.home-attic-sign {
  position: absolute;
  left: 49.1%;
  top: 72.8%;
  padding: 2px 12px 1px;
  background: var(--paper);
  border: 1.5px solid rgba(44, 36, 34, 0.4);
  border-radius: 9px;
  font-family: 'Gaegu', var(--gh-font);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(44, 36, 34, 0.75);
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%) rotate(-2.5deg);
  transform-origin: 50% -12px;
  transition: color 150ms ease, border-color 150ms ease;
}

.home-attic-sign::before,
.home-attic-sign::after {
  content: '';
  position: absolute;
  top: -11px;
  width: 1.5px;
  height: 11px;
  background: rgba(44, 36, 34, 0.4);
}

.home-attic-sign::before {
  left: 20%;
  transform: rotate(7deg);
}

.home-attic-sign::after {
  right: 20%;
  transform: rotate(-7deg);
}

.home-attic-hotspot:hover ~ .home-attic-sign {
  color: var(--text);
  border-color: rgba(44, 36, 34, 0.6);
  animation: home-attic-sign-swing 900ms ease-in-out;
}

@keyframes home-attic-sign-swing {
  0%, 100% { transform: translateX(-50%) rotate(-2.5deg); }
  30% { transform: translateX(-50%) rotate(2.5deg); }
  60% { transform: translateX(-50%) rotate(-3.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .home-inthedark-hotspot:hover ~ .home-floor-sign,
  .home-endofday-hotspot:hover ~ .home-floor-sign,
  .home-attic-hotspot:hover ~ .home-attic-sign,
  .home-construction-hotspot:hover ~ .home-construction-sign {
    animation: none;
  }
}

/* ── 푸터: 아래 고정된 home-dock에 가려지지 않도록 dock 높이만큼
   하단 여백을 더 준다. ── */
.home-footer {
  padding: 4px 20px calc(30px + 76px);
  text-align: center;
}

.home-footer p {
  margin: 0;
  font-family: var(--gh-font);
  font-size: 0.76rem;
  color: var(--sub);
}

.home-footer a {
  color: var(--sub);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home-footer a:hover {
  color: var(--text);
}

/* ── 하단 고정 독: 집을 스크롤하는 동안에도 항상 같은 자리에 떠 있어서,
   이미 집을 둘러본 사람이 스크롤 위치와 상관없이 바로 눌러볼 수 있게 한다.
   .game-shell과 같은 폭 규칙(min(480px, 100vw-40px))을 써서 카드와 좌우가 맞는다. */
.home-dock {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: min(360px, calc(100vw - 48px));
  padding: 8px 6px;
  border-radius: 20px;
  background: rgba(96, 94, 94, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(96, 94, 94, 0.35);
}

.home-dock-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 8px 7px;
  border-radius: 14px;
  color: var(--paper);
  text-decoration: none;
  transition: background 150ms ease, transform 100ms ease;
}

.home-dock-link svg {
  width: 19px;
  height: 19px;
}

.home-dock-label {
  font-family: var(--gh-font);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.home-dock-link:hover {
  background: rgba(255, 255, 255, 0.14);
}

.home-dock-link:active {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0.92);
}