/* =========================================================
   home sweet home — 평면도(로딩 다음 화면)
   상태: [hidden] → .is-playing(선 → 색 등장 중) → .is-done
   ========================================================= */

.hsh-plan {
  --hsh-plan-paper: var(--hsh-paper); /* 로딩 화면과 같은 아이보리(base.css) */
  --hsh-plan-ink: #262628;
  --hsh-plan-soft: #9a9ea2;
  --hsh-plan-wall: var(--hsh-line); /* 집 외곽선(벽) — 로딩 화면 집 테두리(--hsh-line)와 같은 색 */
  --hsh-plan-line: var(--hsh-line); /* 가구 · 스티커 윤곽도 같은 부드러운 중간 회색 */
  --hsh-plan-detail: var(--hsh-detail); /* 세면대 · 책 · 타일 같은 안쪽 묘사 — 더 얇고 연하게 */
  --hsh-plan-note: var(--hsh-note); /* 하단 안내 — 로딩 방문 단계 글(--hsh-note)과 같은 색 */
  --hsh-plan-stars: var(--hsh-tone-stars); /* 바깥 여백 별 — 로딩 배경 별(--hsh-pattern)과 같은 색 */
  --hsh-plan-gutter: 16px;

  position: fixed;
  inset: 0; /* 주소창이 줄었다 늘어도 보이는 영역에 맞춘다 */
  display: grid;
  place-items: center;
  /* 노치 · 홈 막대를 피하고, 남은 칸에 집을 가로·세로 중 좁은 쪽에 맞춰 넣는다 */
  padding:
    max(var(--hsh-plan-gutter), env(safe-area-inset-top))
    max(var(--hsh-plan-gutter), env(safe-area-inset-right))
    calc(max(var(--hsh-plan-gutter), env(safe-area-inset-bottom)) + 44px) /* 아래 안내(click the) 자리 */
    max(var(--hsh-plan-gutter), env(safe-area-inset-left));
  background: var(--hsh-plan-paper);
  overflow: hidden;
  perspective: 700px; /* 가까이 둘수록 기울 때 원근이 세다 */
  /* 누른 채 끄는 것은 기울이기에만 — 스크롤 · 당겨서 새로고침 · 확대 없음 */
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* 시계 자리 — 시계는 집 오른쪽 위(주방 위) 빈 곳에 들어가는 것이 먼저.
   그래도 집과 겹칠 때만 index.js 가 --hsh-clock-room 만큼(세로 화면은 위, 가로 화면은 양옆) 비운다 */
.hsh-plan {
  --hsh-clock-h: 93px; /* 납작한 시계 — 폭은 약 161px */
  --hsh-clock-w: calc(var(--hsh-clock-h) * 228 / 132); /* clock.js 의 viewBox 비율 */
  --hsh-clock-gap: 12px;
  --hsh-clock-top: max(var(--hsh-clock-gap), env(safe-area-inset-top));
  --hsh-clock-right: max(var(--hsh-clock-gap), env(safe-area-inset-right));
  --hsh-clock-room: 0px;
  padding-top: calc(max(var(--hsh-plan-gutter), env(safe-area-inset-top)) + var(--hsh-clock-room));
}

@media (min-width: 768px) and (min-height: 600px) {
  .hsh-plan { --hsh-clock-h: 132px; }
}

/* 세로 화면은 집이 위로 쏠려 보여서 조금 아래로 */
@media (max-aspect-ratio: 1/1) {
  .hsh-plan { --hsh-plan-drop: 3.5vh; }
}

@media (min-aspect-ratio: 1/1) {
  .hsh-plan {
    padding-top: max(var(--hsh-plan-gutter), env(safe-area-inset-top));
    padding-right: calc(max(var(--hsh-plan-gutter), env(safe-area-inset-right)) + var(--hsh-clock-room));
    padding-left: calc(max(var(--hsh-plan-gutter), env(safe-area-inset-left)) + var(--hsh-clock-room)); /* 집은 가운데에 그대로 */
  }
}

.hsh-plan[hidden] {
  display: none;
}

/* 기울어지는 카드 — 집 그림 자체는 2D 그대로, 판 전체만 살짝 */
.hsh-plan__card {
  --rx: 0deg;
  --ry: 0deg;
  --tx: 0px;
  --ty: 0px;
  --s: 1;

  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  transform: translate3d(var(--tx), calc(var(--ty) + var(--hsh-plan-drop, 0px)), 0) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s));
  transform-origin: 50% 50%;
  transition: transform 420ms cubic-bezier(0.25, 0.8, 0.3, 1); /* 놓으면 부드럽게 제자리(지나치지 않음) */
  will-change: transform;
}

.hsh-plan__card.is-pressed {
  transition: transform 140ms ease-out; /* 끄는 동안에도 아주 짧게 따라가 덜컥이지 않게 */
}

.hsh-plan__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 등장 준비 전 — 선 · 색 모두 숨김(JS 가 획마다 대시를 걸고 나면 .is-playing) */
.hsh-plan:not(.is-playing):not(.is-done) .hsh-plan__svg {
  visibility: hidden;
}

/* ---------- 선 ---------- */

.hsh-plan__lines {
  fill: none;
  stroke: var(--hsh-plan-line);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hsh-plan__lines .hsh-wall { stroke-width: 3.2; stroke: var(--hsh-plan-wall); }
/* 벽 위글 — 4장 중 한 장만(plan/index.js 가 data-wall-frame 을 바꾼다) */
.hsh-plan__lines [data-wall] { display: none; }
.hsh-plan:not([data-wall-frame]) [data-wall="0"],
.hsh-plan[data-wall-frame="0"] [data-wall="0"],
.hsh-plan[data-wall-frame="1"] [data-wall="1"],
.hsh-plan[data-wall-frame="2"] [data-wall="2"],
.hsh-plan[data-wall-frame="3"] [data-wall="3"] { display: inline; }
.hsh-plan__lines .hsh-door { stroke-width: 1.4; }
.hsh-plan__lines .hsh-thin { stroke-width: 1.1; }
.hsh-plan__lines .hsh-fine { stroke-width: 0.9; stroke: var(--hsh-plan-detail); }
.hsh-plan__lines .hsh-hair { stroke-width: 0.7; stroke: var(--hsh-plan-detail); }
.hsh-plan__lines .hsh-hair-dark { stroke-width: 0.8; stroke: var(--hsh-plan-detail); }
.hsh-plan__lines .hsh-frame { stroke-width: 1; stroke: #d8c896; }
.hsh-plan__lines .hsh-crease-blue { stroke-width: 0.9; stroke: #97b5d6; }
.hsh-plan__lines .hsh-crease-pink { stroke-width: 0.9; stroke: #dca3b6; }
.hsh-plan__lines .hsh-pencil { stroke-width: 1.6; stroke: #b88d4e; }
.hsh-plan__lines .hsh-stem { stroke-width: 0.9; stroke: #7ea466; }
.hsh-plan__lines .hsh-pen { stroke-width: 2.6; }

/* ---------- 채색 ---------- */

.hsh-plan__color .hsh-mask {
  fill: var(--hsh-plan-paper);
}

/* 방 하나가 한 덩어리로 튄다(plan/index.js) */
.hsh-plan__color > [data-room] {
  transform-box: fill-box;
  transform-origin: 50% 50%; /* 방 가운데에서 튄다 */
}

/* ---------- 방 버튼 — 길쭉한 색 네모 + 글자 ---------- */

.hsh-sticker {
  cursor: pointer;
  outline: none;
}

/* 위글 · 누름 · 등장은 안쪽 몸통이 맡는다(바깥 g 의 translate · rotate 속성을 덮지 않게) */
.hsh-sticker__body {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: scale 120ms ease-out, rotate 220ms ease-out, translate 220ms ease-out;
}

.hsh-sticker.is-pressed .hsh-sticker__body { scale: 0.9; }

/* 테두리 없는 단색 네모 + 성글게 띄운 둥근 글자(레퍼런스 'today's energy') */
.hsh-tag__text {
  font-family: "Varela Round", "Arial Rounded MT Bold", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-size: 33px; /* 평면도 단위 — tools/floorplan.mjs 의 TAG.font 와 같다 */
  font-weight: 400;
  font-style: italic;
  letter-spacing: 2px;
}

.hsh-sticker:focus-visible .hsh-tag__bg { stroke: var(--hsh-plan-line); stroke-width: 2.5; vector-effect: non-scaling-stroke; }

/* 누를 수 있다는 표시 — 진한 테두리 대신 스티커마다 엇갈려 살짝 까딱 · 들썩(로딩 아이콘처럼).
   위글(index.js 의 transform)과 겹치도록 translate · rotate 낱개 속성을 쓴다 */
.hsh-plan.is-done .hsh-sticker__body { animation: hsh-nod 2.6s ease-in-out infinite; }
.hsh-plan.is-done .hsh-sticker:nth-child(2n) .hsh-sticker__body { animation-delay: -0.9s; }
.hsh-plan.is-done .hsh-sticker:nth-child(3n) .hsh-sticker__body { animation-delay: -1.7s; }

@keyframes hsh-nod {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  25% { translate: 0 -1.5px; rotate: -1.5deg; } /* 위글(±2°)과 겹쳐도 작게 — 판 전체가 들썩이지 않게 */
  50% { translate: 0 0; rotate: 0deg; }
  75% { translate: 0 -0.8px; rotate: 1deg; }
}

/* 마우스를 올리면 까딱임을 멈추고 살짝 갸웃 */
@media (hover: hover) {
  .hsh-plan.is-done .hsh-sticker:hover .hsh-sticker__body {
    animation: none;
    rotate: -4deg;
    translate: 0 -1.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hsh-plan.is-done .hsh-sticker__body { animation: none; }
}

/* ---------- 하단 안내 — click the ( ) ---------- */

.hsh-plan__hint {
  position: absolute;
  left: 50%;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
  translate: -50% 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--hsh-mono);
  font-size: 14px; /* 로딩 방문 단계 글처럼 작고 옅게 */
  letter-spacing: 0;
  color: var(--hsh-plan-note);
  white-space: pre;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease-out;
}

.hsh-plan.is-done .hsh-plan__hint { opacity: 1; }

.hsh-plan__hint-char { display: inline-block; } /* plan/index.js 가 글자마다 살짝 기울인다 */

/* 괄호 속 — 나중에 누를 물건 아이콘이 돌아가며 바뀐다(index.js). 칸 크기 고정이라 글자는 제자리 */
.hsh-plan__hint-icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0 4px;
  overflow: visible;
}

.hsh-plan__hint-art .o,
.hsh-plan__hint-art .d {
  stroke: var(--hsh-plan-line);
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.hsh-plan__hint-art .d { stroke: var(--hsh-plan-detail); stroke-width: 0.8; }
.hsh-plan__hint-art .pen { stroke-width: 1.8; }

/* ---------- 대사 두 줄 — 하단 안내 위(bubbles.js). 지원은 왼쪽 < (  ), 우연은 오른쪽 (  ) > ---------- */

.hsh-talk {
  position: absolute;
  left: 50%;
  bottom: calc(max(18px, calc(env(safe-area-inset-bottom) + 10px)) + 28px); /* 하단 안내 바로 위 */
  translate: -50% 0;
  width: min(calc(100% - 32px), 380px);
  display: grid;
  gap: 4px;
  pointer-events: none;
}

.hsh-talk__row {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  min-height: 1.5em;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--hsh-plan-ink);
  white-space: nowrap;
  padding: 0 6px;
  background: var(--hsh-plan-paper); /* 평면도 위에서도 잘 읽히게 글자 높이만큼 바탕색(흰 네모가 드러나지 않게) */
  border-radius: 3px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 500ms ease;
}

.hsh-talk__row.is-jiwon { justify-self: start; }
.hsh-talk__row.is-wooyeon { justify-self: end; }
.hsh-talk__row.is-on { visibility: visible; opacity: 1; }
.hsh-talk__row.is-fading { opacity: 0; }

/* 괄호 · 화살표 — 시계 home 밑줄과 같은 색 */
.hsh-talk__mark { white-space: pre; }
.hsh-talk__row.is-jiwon .hsh-talk__mark { color: #4fb3a9; }
.hsh-talk__row.is-wooyeon .hsh-talk__mark { color: #e5a83a; }

/* 치는 동안 깜빡이는 커서 */
.hsh-talk__row.is-typing .hsh-talk__say::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: currentColor;
  animation: hsh-caret 0.8s steps(1) infinite;
}

@keyframes hsh-caret { 50% { opacity: 0; } }

/* ---------- 시계(오른쪽 위, 화면 고정 — clock.js) ---------- */

.hsh-clock {
  position: absolute;
  top: var(--hsh-clock-top);
  right: var(--hsh-clock-right);
  width: var(--hsh-clock-w);
  height: var(--hsh-clock-h);
  z-index: 3; /* 평면도 판보다 위 — 단어 버튼(.hsh-clock__hit)이 판에 가려지지 않게 */
  pointer-events: none; /* 그림은 장식 — 단어 버튼만 누르고, 나머지 누르기 · 끌기는 판으로 */
  opacity: 0;
  transition: opacity 500ms ease-out;
}

.hsh-plan:is(.is-playing, .is-done) .hsh-clock { opacity: 1; }

.hsh-clock__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hsh-clock__face text {
  font-family: "Helvetica Neue", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  letter-spacing: -0.04em;
  fill: #7fb1e4;
  stroke: #7fb1e4; /* 가는 글자에 획을 아주 살짝 더한다 */
  stroke-width: 0.4;
  stroke-linejoin: round;
}

.hsh-clock__num { font-size: 22px; }
/* 12 · 3 · 6 자리 단어 — 로딩 집 안 home sweet home 과 같은 손글씨 글꼴(--hsh-hand). 장평은 clock.js 가 줄인다 */
.hsh-clock__face .hsh-clock__word { font-family: var(--hsh-hand); font-size: 27px; font-weight: 400; letter-spacing: -0.06em; stroke-width: 0.3; }
.hsh-clock__tick { stroke: #a9cbee; stroke-width: 1.6; stroke-linecap: round; }
.hsh-clock__word.is-sweet { font-style: italic; }
.hsh-clock__underline { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.hsh-clock__underline.is-sweet { stroke: #f3a2b2; }
.hsh-clock__underline.is-jiwon { stroke: #4fb3a9; } /* bubbles.js PEOPLE 색과 같다 */
.hsh-clock__underline.is-wooyeon { stroke: #e5a83a; }

/* 시계 단어 자리 — 그림 위에 얹은 투명 버튼(bubbles.js). 시계의 나머지는 그대로 누름이 판으로 간다 */
.hsh-clock__hit {
  position: absolute;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hsh-clock__hit.is-sweet { left: 72%; top: 28%; width: 28%; height: 46%; }
.hsh-clock__hit.is-top { left: 31%; top: -4%; width: 30%; height: 30%; }
.hsh-clock__hit.is-bottom { left: 31%; top: 74%; width: 30%; height: 30%; }
.hsh-clock__hit:focus-visible { outline: 1.5px solid #a9cbee; outline-offset: 2px; }

/* ---------- 디데이 생각 풍선(화면 왼쪽 위 구석, bubbles.js) — 끌어 옮길 수 있다 ---------- */

.hsh-bubble {
  --hsh-bubble-accent: #7fb1e4;
  position: absolute;
  top: max(4px, env(safe-area-inset-top));
  left: max(4px, env(safe-area-inset-left));
  z-index: 5;
  width: clamp(190px, 46vw, 250px);
  aspect-ratio: 240 / 160;
  transform-origin: 8% 92%; /* 꼬리 쪽에서 부풀어 오른다 */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.hsh-bubble[hidden] { display: none; }
.hsh-bubble.is-dragging { cursor: grabbing; }

.hsh-bubble__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.hsh-bubble__line {
  fill: var(--hsh-plan-paper);
  stroke: var(--hsh-plan-line);
  stroke-width: 1.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* 글자 — 풍선 몸통 한가운데 */
.hsh-bubble__text {
  position: absolute;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
}

.hsh-bubble.is-thought .hsh-bubble__text {
  left: 14%; right: 7%; top: 15%; height: 58%;
  font-family: "Helvetica Neue", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif; /* 시계 글자와 같게 */
  font-weight: 300;
  color: #7fb1e4;
  white-space: nowrap;
}

.hsh-bubble__small[hidden] { display: none; }
.hsh-bubble__small { font-size: 11px; font-style: italic; letter-spacing: 0.06em; color: #a9cbee; }
.hsh-bubble__big { font-size: clamp(22px, 6.4vw, 28px); letter-spacing: -0.02em; }
.hsh-bubble__big b { font-weight: 400; }
.hsh-bubble__deco { color: #7fb1e4; }
.hsh-bubble__heart { color: #f3a2b2; }

.hsh-bubble__x {
  position: absolute;
  top: 7%;
  right: 5%;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--hsh-plan-line);
  border-radius: 50%;
  background: var(--hsh-plan-paper);
  color: var(--hsh-plan-line);
  cursor: pointer;
}

/* 손가락으로 누르기 쉽게 — 보이는 동그라미는 작게, 누르는 자리는 넓게 */
.hsh-bubble__x::before { content: ""; position: absolute; inset: -10px; }
.hsh-bubble__x svg { width: 7px; height: 7px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.hsh-bubble__x:focus-visible { outline: 1.5px solid #a9cbee; outline-offset: 2px; }

@media (min-width: 768px) {
  .hsh-bubble__x { width: 22px; height: 22px; }
  .hsh-bubble__x svg { width: 8px; height: 8px; }
}

.hsh-clock__hand line { stroke-linecap: round; }
.hsh-clock__hour line { stroke: #46474b; stroke-width: 5; }
.hsh-clock__minute line { stroke: #46474b; stroke-width: 4; }
.hsh-clock__second line { stroke: #f3a2b2; stroke-width: 1.3; }
.hsh-clock__pin { fill: #f3a2b2; }

/* ---------- 바깥 여백 별 — 로딩 배경 별을 같은 자리로 옮겨 온 것(main.js) ---------- */
/* 로딩이 바래는 동안은 로딩 별과 겹쳐 그대로 보이고, 들어온 뒤 집 · 시계 · 안내 둘레와 대부분은 옅어져 사라진다(index.js) */

.hsh-plan__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  fill: var(--hsh-plan-stars);
}

.hsh-plan__stars use { transition: opacity 1.6s ease 0.5s; }
.hsh-plan__stars use.is-away { opacity: 0; }
.hsh-plan__stars use.is-faint { opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
  .hsh-plan__stars use { transition: none; }
}