@font-face {
  font-family: "Nanum Gothic Coding";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/nanum-gothic-coding-latin.woff2") format("woff2");
}

/* 타자기 라틴만 — 영문은 타자기, 한글은 다음 글꼴(Pretendard)로 넘기는 이름표용(Nanum 한글 서브셋을 건너뛴다) */
@font-face {
  font-family: "HSH Type Latin";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nanum-gothic-coding-latin.woff2") format("woff2");
  unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2190-21FF;
}

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

/* 집 색 — 불러올 때마다 넷 중 하나(index.html 인라인 스크립트가 고른다).
   house: 집 · 상태 아이콘 바탕, door: 문틈, stars: 로딩 배경 별 · 홈 화면 여백 별(집보다 채도 · 명도를 낮춘 색) */
:root,
:root[data-hsh-tone="sky"] { --hsh-tone-house: #f1f8fb; --hsh-tone-door: #dfeaf0; --hsh-tone-stars: #c5d8dd; }
:root[data-hsh-tone="green"] { --hsh-tone-house: #f2f9ea; --hsh-tone-door: #e1ecd4; --hsh-tone-stars: #cbd9bf; }
:root[data-hsh-tone="yellow"] { --hsh-tone-house: #fdf8e2; --hsh-tone-door: #f1e8c9; --hsh-tone-stars: #ded5b4; }
:root[data-hsh-tone="pink"] { --hsh-tone-house: #fcf0f4; --hsh-tone-door: #f1dde5; --hsh-tone-stars: #dfc6cf; }

/* 세 화면(로딩 · 홈 평면도 · archive)이 같이 쓰는 바탕 · 선 · 글자 · 파스텔 · 글꼴.
   기준은 로딩 화면 — 따뜻한 아이보리 바탕에 얇은 회색 선. 파스텔은 홈 평면도 색종이 라벨(tools/floorplan.mjs tag) 색 */
:root {
  --hsh-paper: #fcfbf8; /* 순백이 아닌 아주 연한 아이보리 */
  --hsh-line: #8f9497; /* 로딩 집 윤곽 · 평면도 벽 · 가구 */
  --hsh-detail: #b4b9bc; /* 안쪽 묘사 — 더 연하게 */
  --hsh-text: #3a3b3e;
  --hsh-note: #7d8386; /* 로딩 방문 단계 글 · click the · archive 안내 */

  --hsh-link: #5f6468; /* 누르는 회색 글자(← home) — --hsh-note 보다 한 단 짙게(대비 4.5 이상) */

  /* 파스텔 — 홈 라벨 바탕색 그대로. archive 열쇠 · 키링 · 라벨도 이 색 */
  --hsh-sky: #cfe0fb;
  --hsh-mint: #cdeed6;
  --hsh-butter: #fbefae;
  --hsh-pink: #fbd5e3;
  --hsh-lilac: #e4d4fb;
  --hsh-silver: #e4e7ea;
  --hsh-lilac-ink: #6444bd; /* 홈 Archive 라벨 글씨(#8a62dc)를 한 단 짙게 — 연보라 위에서 읽히게(대비 약 5) */

  /* 글꼴 역할 — 새 글꼴 없이 프로젝트에 있는 것만.
     손글씨(로딩 home sweet home · 시계 단어)와 타자기(제목 · 짧은 영문 · 링크 이름 · 한글 안내)는 같은 Nanum Gothic Coding */
  --hsh-hand: "Nanum Gothic Coding", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --hsh-mono: "Nanum Gothic Coding", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* 홈 방 라벨(색종이) 글자 — 둥근 이탤릭. neighbor 제목도 같은 것 */
  --hsh-tag-font: "Varela Round", "Arial Rounded MT Bold", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  /* 이름표 — 영문은 타자기, 한글은 Pretendard */
  --hsh-label-font: "HSH Type Latin", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", sans-serif;

  /* 흰 화면(archive · neighbor · 앞으로 만드는 같은 꼴 화면) 위 줄 — ← home · 제목 · 오른쪽 버튼은 화면 가운데 1/3 구역 양끝에.
     구역 반폭 = 화면의 1/6, 좁아도 200px(구역 400px) — 그보다 좁은 화면(휴대폰)은 양끝까지.
     쓰는 법: left / right: max(가장자리 여백, env(safe-area-inset-*), calc(50vw - var(--hsh-band))) */
  --hsh-band: max(16.67vw, 200px);
  /* 그 위 줄의 자리 — 화면 위에서 --hsh-top 만큼 내려, 높이 44px 한 줄(← home · 제목 · 오른쪽 버튼 모두 이 줄 가운데에) */
  --hsh-top: max(28px, calc(env(safe-area-inset-top) + 16px));

  /* 손그림 위글 박자 — loader/wobble.js · plan/index.js · archive/keyring.js 가 같은 190ms */
  --hsh-wobble: 190ms;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--hsh-paper); /* 로딩 · 평면도 · archive 같은 아이보리 */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* 방문 단계 글에 쓰는 한글만 담은 서브셋(라틴은 위 파일) */
@font-face {
  font-family: "Nanum Gothic Coding";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/nanum-gothic-coding-status.woff2") format("woff2");
  unicode-range: U+AC00-D7A3;
}

/* 공통 별(src/shared/star.js) — 테두리 없이 별 색만. 로딩은 화면 가득, 홈 · archive 는 여백에 성글게 */
.hsh-star {
  position: absolute;
  translate: -50% -50%;
  overflow: visible;
  fill: var(--hsh-tone-stars);
  pointer-events: none;
  transition: opacity 300ms ease;
}
.hsh-star.is-away { opacity: 0; }