/* =========================================================
   home sweet home — 방 창(방 버튼을 누르면 뜬다, plan/room-window.js)
   폴더 탭 + 주소창 줄이 있는 브라우저 창 꼴(스크롤바 없음)에 무늬 스티커를 무작위로 걸쳐 둔다.
   선은 모두 로딩 화면 집 윤곽처럼 얇은 회색. 탭 · 주소창 줄은 누른 버튼의 바탕색(--hsh-win-tint),
   제목 밑줄은 버튼 글자색(--hsh-win-ink).
   ========================================================= */

.hsh-win {
  --hsh-win-tint: #fbd5e3;
  --hsh-win-ink: #4a98e4;
  --hsh-win-line: #8f9497; /* 로딩 화면 집 윤곽(--hsh-line)과 같은 회색 */
  --hsh-win-text: #3a3b3e;
  --hsh-win-paper: #fffefb;
  --hsh-win-note: #7d8386;
  --hsh-win-like: #f08cbf;
  /* 창 안쪽 글자(제목 · 이름표 · 내용) — 탭 · 주소창 줄은 로딩과 같은 글꼴 그대로 */
  --hsh-win-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", sans-serif;

  /* 창은 보이는 화면(모바일 주소창 · 툴바를 뺀 높이) 한가운데 — 위아래 여백도 같게 */
  --hsh-win-gap-y: max(36px, calc(max(env(safe-area-inset-top), env(safe-area-inset-bottom)) + 20px));
  position: fixed;
  inset: 0 0 auto;
  height: 100vh;
  height: 100svh;
  z-index: 50;
  display: grid;
  place-items: center;
  padding:
    var(--hsh-win-gap-y)
    max(20px, calc(env(safe-area-inset-right) + 16px))
    var(--hsh-win-gap-y)
    max(20px, calc(env(safe-area-inset-left) + 16px));
}

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

/* 홈 화면 위 반투명 덮개 */
.hsh-win__veil {
  position: absolute;
  inset: 0;
  background: rgb(252 251 248 / 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 260ms ease-out;
}

.hsh-win.is-open .hsh-win__veil { opacity: 1; }

/* ---------- 창 ---------- */

.hsh-win__frame {
  position: relative;
  width: min(560px, 100%);
  /* 높이는 안쪽 내용만큼, 보이는 화면 높이의 90%(위아래 여백 안쪽)까지 — 넘치면 안쪽 칸이 스크롤 */
  max-height: min(90vh, 100vh - 2 * var(--hsh-win-gap-y));
  max-height: min(90svh, 100svh - 2 * var(--hsh-win-gap-y));
  display: flex;
  flex-direction: column;
  opacity: 0;
  scale: 0.92;
  transition: opacity 220ms ease-out, scale 220ms ease-out;
}

.hsh-win.is-open .hsh-win__frame {
  opacity: 1;
  scale: 1;
  animation: hsh-win-pop 380ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

@keyframes hsh-win-pop {
  0% { scale: 0.9; }
  60% { scale: 1.02; }
  100% { scale: 1; }
}

/* 폴더 탭 — 왼쪽 위. 사이트 이름 + 오른쪽 끝(비스듬히 내려오는 곳 바로 앞)에 × */
.hsh-win__tab {
  position: relative;
  flex: none;
  align-self: flex-start;
  width: 52%;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 0 14px;
  background: var(--hsh-win-tint);
  border: 1px solid var(--hsh-win-line);
  border-bottom: 0;
  border-right: 0;
  border-radius: 12px 0 0 0;
  margin-bottom: -1px;
  z-index: 1;
}

.hsh-win__tab::after {
  content: "";
  position: absolute;
  right: -16px;
  top: -1px;
  bottom: 0;
  width: 16px;
  background:
    linear-gradient(to top right, var(--hsh-win-tint) calc(50% - 0.6px), var(--hsh-win-line) calc(50% - 0.6px), var(--hsh-win-line) calc(50% + 0.6px), transparent calc(50% + 0.6px));
}

.hsh-win__site {
  flex: 1;
  min-width: 0;
  font-family: "Nanum Gothic Coding", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--hsh-win-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hsh-win__x {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--hsh-win-text);
  cursor: pointer;
}

.hsh-win__x svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.hsh-win__x:hover { background: rgb(255 255 255 / 0.5); }
.hsh-win__x:focus-visible,
.hsh-win__like:focus-visible,

/* 주소창 줄 */
.hsh-win__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 9px 12px;
  background: var(--hsh-win-tint);
  border: 1px solid var(--hsh-win-line);
  border-bottom: 0;
  border-radius: 0 12px 0 0;
}

.hsh-win__nav { display: flex; gap: 2px; margin-left: -4px; }
.hsh-win__nav button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.hsh-win__nav button:hover:not(:disabled) { background: rgb(255 255 255 / 0.5); }
.hsh-win__nav button:disabled { cursor: default; opacity: 0.35; }
.hsh-win__nav button:focus-visible { outline: 1.5px solid var(--hsh-win-line); outline-offset: 1px; }
.hsh-win__nav svg { width: 12px; height: 12px; fill: none; stroke: var(--hsh-win-line); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

.hsh-win__url {
  flex: 1;
  min-width: 0;
  height: 22px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--hsh-win-line);
  border-radius: 999px;
  background: var(--hsh-win-paper);
  font-family: "Nanum Gothic Coding", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--hsh-win-note);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 하트 — 누르면 분홍으로 채워지고 이 브라우저에 기억한다 */
.hsh-win__like {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hsh-win__like svg {
  width: 17px;
  height: 17px;
  fill: var(--hsh-win-paper);
  stroke: var(--hsh-win-line);
  stroke-width: 1.6;
  stroke-linejoin: round;
  transition: fill 180ms ease;
}

.hsh-win__like[aria-pressed="true"] svg { fill: var(--hsh-win-like); }

/* 몸통 */
.hsh-win__body {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 18px 20px;
  background: var(--hsh-win-paper);
  border: 1px solid var(--hsh-win-line);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.hsh-win__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--hsh-win-line);
}

.hsh-win__thumb {
  position: relative;
  flex: none;
  width: 54px;
  height: 54px;
  border: 1px solid var(--hsh-win-line);
  border-radius: 9px;
  background: center / cover no-repeat; /* 사진은 room-window.js 가 방마다 넣는다 */
}

/* 썸네일 귀퉁이에 걸친 망점 하트 */
.hsh-win__thumb-heart {
  position: absolute;
  right: -15px;
  top: -14px;
  width: 30px;
  height: 30px;
  overflow: visible;
}

.hsh-win__titles { display: grid; gap: 7px; justify-items: start; min-width: 0; }

.hsh-win__title {
  margin: 0;
  font-family: var(--hsh-win-font);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--hsh-win-text);
  text-decoration: underline 3px var(--hsh-win-ink);
  text-underline-offset: 5px;
}

/* 방 이름표 — 검정 알약 + 흰 글자(레퍼런스 'options') */
.hsh-win__pill {
  padding: 3px 12px 4px;
  border: 0;
  border-radius: 999px;
  background: #262628;
  color: #fff;
  font-family: var(--hsh-win-font);
  font-size: 13px;
  line-height: 1.3;
}


.hsh-win__page {
  position: relative;
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hsh-win-line);
  border-radius: 12px;
  overflow: hidden;
}

/* 안쪽 칸 — 기본 스크롤바는 숨기고 .hsh-win__rail 을 대신 그린다 */
.hsh-win__scroll {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.hsh-win__scroll::-webkit-scrollbar { display: none; }

.hsh-win__empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  margin: 0;
  font-family: var(--hsh-win-font);
  font-size: 13px;
  color: var(--hsh-win-note);
}

.hsh-win__empty[hidden],
.hsh-win__note[hidden],
.hsh-note__tabs[hidden],
.hsh-win__rail[hidden] { display: none; }

/* 스크롤바 — 얇은 회색 길 위에 창 머리 색 알약 */
.hsh-win__rail {
  position: absolute;
  right: 5px;
  top: 12px;
  bottom: 12px;
  width: 8px;
  background: linear-gradient(var(--hsh-win-line), var(--hsh-win-line)) center / 1px 100% no-repeat;
}

.hsh-win__knob {
  position: absolute;
  inset: 0 0 auto;
  background: var(--hsh-win-tint);
  border: 1px solid var(--hsh-win-line);
  border-radius: 999px;
  touch-action: none;
  cursor: grab;
}

/* 공지 — 위쪽 탭(ABOUT · ME · NG), 누른 칸만 아래에 */
.hsh-note__tabs {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 22px;
  padding: 18px 18px 4px;
}

.hsh-note__tab {
  padding: 2px 2px 4px;
  border: 0;
  background: none;
  font-family: var(--hsh-win-font);
  font-size: 13px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--hsh-win-note);
  text-decoration: underline 2px transparent;
  text-underline-offset: 5px;
  cursor: pointer;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.hsh-note__tab[aria-selected="true"] {
  color: var(--hsh-win-text);
  text-decoration-color: var(--hsh-win-ink);
}

.hsh-note__tab:focus-visible { outline: 1.5px solid var(--hsh-win-line); outline-offset: 2px; border-radius: 4px; }

.hsh-note {
  padding: 14px 22px 22px;
  font-family: var(--hsh-win-font);
  color: var(--hsh-win-text);
  text-align: left;
  word-break: keep-all;
}

/* 세 칸을 한자리에 겹쳐 두고 고른 칸만 보인다 — 높이는 제일 긴 칸(ABOUT · ME)에 맞춰 고정 */
.hsh-note { display: grid; align-items: start; }
.hsh-note__sec { grid-area: 1 / 1; display: grid; gap: 15px; }
.hsh-note__sec[hidden] { display: grid; visibility: hidden; }

.hsh-note__item { display: grid; gap: 0; margin: 0; }

.hsh-note__line {
  margin: 0;
  font-size: 13px;
  line-height: 1.38;
  letter-spacing: -0.01em;
}

.hsh-note__line sup { font-size: 0.8em; color: var(--hsh-win-note); }

.hsh-note__more {
  font-size: 12.5px;
  line-height: 1.38;
  letter-spacing: -0.01em;
  color: var(--hsh-win-note);
}

/* **강조** — 버튼 바탕색 형광펜 */
.hsh-note strong {
  font-weight: 600;
  color: var(--hsh-win-text);
  background: linear-gradient(transparent 55%, var(--hsh-win-tint) 55%);
  padding: 0 2px;
}

/* ---------- about __VE — Vibe · Echo 카드(about.js) ----------
   S-CLASS 카드를 흰 바탕으로: 사진 아래쪽이 흰색으로 흐려지고 그 위에 [ 꼬리표 ] · 큰 이름 · 소개글.
   글자 크기는 카드 너비 기준(cqi)이라 좁은 화면에서도 비율이 그대로.
   몇 초마다 카드 위로 비스듬한 빛이 한 줄 지나간다(두 장이 조금 엇갈려서). */

.hsh-ve {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 두 카드는 같은 높이 */
  gap: 8px;
  padding: 12px; /* 네모칸 안을 카드가 넓게 쓰도록 — 칸 선과는 살짝만 띄운다 */
  font-family: var(--hsh-win-font);
}

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

.hsh-ve__card {
  --ve-night: #0d0e0f; /* 앞면 바탕 · 사진 흐림 */
  container-type: inline-size;
  position: relative;
  min-width: 0;
  perspective: 1400px;
  color: var(--hsh-win-text);
}

/* 뒤집기 — 앞 · 뒷면을 한 칸에 겹쳐서(카드 높이 = 둘 중 긴 쪽) 가로축으로 반 바퀴 */
.hsh-ve__flip {
  position: relative;
  display: grid;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1); /* 앞뒤 대칭 — 반쯤 돌아선 모습이 보이게 */
}

.hsh-ve__card.is-flipped .hsh-ve__flip { transform: rotateY(180deg); }

.hsh-ve__face {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hsh-win-line);
  border-radius: 8px;
  background: #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* iOS Safari 는 안에 움직이는 것(배지 · 반짝 · 사진 필터)이 있으면 backface 를 무시하고 등 쪽을 거울처럼 비춘다 —
     그래서 반 바퀴(800ms 의 절반) 도는 순간 안 보일 면을 아예 감춘다 */
  transition: visibility 0s linear 400ms;
}

/* 카드 높이는 보이는 면만 따른다 — 기본은 앞면(한 화면에 들어오게), 뒤집으면 뒷면(서사 길이만큼, 창 안에서 내려 읽기).
   안 보이는 면은 띄워서(absolute) 높이에 안 끼고 카드 크기에 맞춰 잘린다 */
.hsh-ve__face.is-back,
.hsh-ve__card.is-flipped .hsh-ve__face.is-front { position: absolute; inset: 0; visibility: hidden; }
.hsh-ve__card.is-flipped .hsh-ve__face.is-back { position: relative; inset: auto; visibility: visible; }

/* 앞면 — 원본 카드처럼 검정 바탕에 흰 이름 · 옅은 글, 꼬리표 · 버튼은 밝은 카드 색 */
.hsh-ve__face.is-front { background: var(--ve-night); color: #e9eaeb; }
.is-front .hsh-ve__tag { color: var(--ve-accent); }
.is-front .hsh-ve__name { color: #fff; }
.is-front .hsh-ve__quote { color: #eef0f2; }
.is-front .hsh-ve__ptitle { color: #fff; }
.is-front .hsh-ve__specs div { background: #1b1c1e; }
.is-front .hsh-ve__specs dt { color: #8d9296; }
.is-front .hsh-ve__specs dd { color: #f2f2f2; }
.is-front .hsh-ve__specs dd.is-hot { color: var(--ve-accent); }
.is-front .hsh-ve__more { color: var(--ve-accent); }

/* 뒷면 — 위쪽은 카드 색을 아주 옅게, 오른쪽 위에 큰 이름을 흐리게 */
.hsh-ve__face.is-back {
  transform: rotateY(180deg);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ve-accent) 14%, #fff), #fff 42%);
}

.hsh-ve__mark {
  position: absolute;
  top: 4cqi;
  right: 6cqi;
  color: color-mix(in srgb, var(--ve-accent) 28%, transparent);
  font-size: 30cqi;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  transform: scaleX(0.8);
  transform-origin: right;
  pointer-events: none;
}

.hsh-ve__face.is-back .hsh-ve__text { margin-top: 0; padding-top: 32cqi; } /* 큰 이름 아래부터 */

.hsh-ve__face.is-back .hsh-ve__ptitle {
  font-size: max(11px, 6.4cqi);
  letter-spacing: -0.01em;
  line-height: 1.35;
  word-break: normal; /* 한글은 글자 단위로 줄바꿈 */
  margin-top: 2cqi;
}

.hsh-ve__story p {
  margin: 5cqi 0 0;
  color: #55595d;
  font-size: max(10px, 5.2cqi);
  line-height: 1.8;
  word-break: normal; /* 한글은 글자 단위로 줄바꿈 */
}

.hsh-ve__story p:first-child { margin-top: 6cqi; }

/* 반짝 — 가느다란 빛 한 줄이 카드 밖 왼쪽에서 오른쪽 밖으로, 한 바퀴(5.6s)의 앞 10%(0.56s) 동안 빠르게 지나가고 나머지는 쉰다 */
.hsh-ve__face::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -20% auto -20% 0;
  width: 12%;
  background: linear-gradient(90deg, rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0.75) 50%, rgb(255 255 255 / 0) 70%);
  translate: -250% 0;
  opacity: 0; /* 애니메이션 밖에서는 늘 안 보이게 */
  rotate: 8deg;
  pointer-events: none;
  animation: hsh-ve-shine 5.6s ease-in-out infinite;
}

.hsh-ve__card.is-echo .hsh-ve__face::after { animation-delay: 0.45s; }

/* 쉬는 동안은 완전히 투명 + 카드 밖 멀리 — 기울어진 줄의 모서리가 귀퉁이에 남아 비치지 않게 */
@keyframes hsh-ve-shine {
  0% { translate: -250% 0; opacity: 0; }
  1%, 9% { opacity: 1; }
  10%, 100% { translate: 1100% 0; opacity: 0; }
}

/* 사진 자리 — 사진이 오기 전(못 불러와도) 카드 색을 아주 옅게 */
.hsh-ve__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* 맨 아래는 앞면과 같은 검정 — 칸 경계가 소수점 픽셀에 걸려도 옅은 바탕이 줄로 비치지 않게 */
  background:
    linear-gradient(to bottom, transparent 70%, var(--ve-night) 96%),
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--ve-accent) 26%, #fff) 0 22%, transparent 23%),
    color-mix(in srgb, var(--ve-accent) 12%, #fff);
}

.hsh-ve__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 두 장 모두 같은 배율 · 같은 자리(위부터) — 어깨선이 같은 높이에 온다 */
  object-position: center top;
  filter: saturate(1.3) brightness(1.1); /* 흰 카드에서 칙칙하지 않게 — 더 밝고 진하게 */
}

/* 바이브는 얼굴이 조금 작아서 5% 키운다. 어깨(원본 y≈850 → 에코 ≈845)가 제자리에 오게
   축을 원본 y≈950(사진 칸 4:5 = 원본 1040 줄 중 91%)에 둔다 — 머리 꼭대기도 에코와 거의 같은 높이 */
.is-vibe .hsh-ve__img { transform: scale(1.05); transform-origin: 50% 91%; }

/* 사진 아래쪽을 검정으로 흐려 글자가 올라앉게(앞면 바탕도 같은 검정) */
.hsh-ve__photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 48%;
  background: linear-gradient(to bottom, rgb(13 14 15 / 0), var(--ve-night) 92%);
  pointer-events: none;
}

.hsh-ve__badge {
  position: absolute;
  z-index: 1;
  top: 7cqi;
  right: 7cqi;
  padding: 2.6cqi 4.4cqi;
  border-radius: 2cqi;
  background: var(--ve-accent);
  color: #10201e;
  font-size: max(7px, 4.4cqi);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  /* 빛이 숨 쉬듯 번졌다 줄었다 + 카드 반짝이 지나갈 때 배지에도 작은 빛이 한 번 */
  box-shadow: 0 0 0 0 var(--ve-accent);
  /* 5초마다 한 번 뽀잉 — 눌렸다 튀어 올랐다 내려앉고 쉰다 */
  transform-origin: 50% 100%;
  animation: hsh-ve-glow 2.8s ease-in-out infinite, hsh-ve-boing 5s ease-out infinite;
}

.hsh-ve__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.85) 50%, transparent 70%);
  translate: -110% 0;
  opacity: 0;
  animation: hsh-ve-shine-badge 5.6s ease-in-out infinite;
  animation-delay: inherit;
}

.hsh-ve__card.is-echo .hsh-ve__badge,
.hsh-ve__card.is-echo .hsh-ve__badge::after { animation-delay: 0.45s; }

@keyframes hsh-ve-boing {
  0%, 14%, 100% { translate: 0 0; scale: 1 1; }
  3% { translate: 0 0; scale: 1.1 0.86; }
  7% { translate: 0 -3.2cqi; scale: 0.94 1.1; }
  11% { translate: 0 0; scale: 1.05 0.94; }
}

@keyframes hsh-ve-glow {
  0%, 100% { box-shadow: 0 0 2cqi 0 color-mix(in srgb, var(--ve-accent) 45%, transparent); }
  50% { box-shadow: 0 0 6cqi 1cqi color-mix(in srgb, var(--ve-accent) 85%, transparent); }
}

/* 카드 빛(앞 10%)이 배지 자리(오른쪽 위)에 닿을 즈음 */
@keyframes hsh-ve-shine-badge {
  0%, 6% { translate: -110% 0; opacity: 0; }
  7%, 10% { opacity: 1; }
  11%, 100% { translate: 110% 0; opacity: 0; }
}

.hsh-ve__text {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: -27cqi; /* 흐려지는 사진 위로 올린다 */
  padding: 0 10cqi 9cqi 11cqi;
}

.hsh-ve__tag {
  margin: 0;
  color: var(--ve-deep);
  font-size: max(8px, 5.2cqi); /* 휴대폰에서 너무 작아지지 않게 — 아래도 같다 */
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.45;
}

.hsh-ve__name {
  margin: 0.5cqi 0 0;
  color: #1d1e20;
  font-size: 25cqi;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.95;
  /* 원본 카드처럼 키 크고 얄쌍하게 — 글꼴에 좁은 폭이 없어서 가로로만 눌러 준다 */
  transform: scaleX(0.8);
  transform-origin: left;
}

.hsh-ve__quote {
  margin: 7cqi 0 0;
  color: #55595d;
  font-size: max(10px, 5.6cqi);
  line-height: 1.85;
  word-break: normal; /* 한글은 글자 단위로 줄바꿈 */
}

/* AGENT PROFILE — 제목 밑 카드 색 줄, 칸마다 옅은 회색 상자(이름 위 · 값 아래) */
.hsh-ve__profile { margin: 7cqi 0 0; }

.hsh-ve__ptitle {
  margin: 0;
  padding-bottom: 3.6cqi;
  border-bottom: max(2px, 1.2cqi) solid var(--ve-accent);
  color: #1d1e20;
  font-size: max(11px, 7cqi);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.hsh-ve__specs {
  display: grid;
  gap: 2.6cqi;
  margin: 4.4cqi 0 0;
}

.hsh-ve__specs div {
  padding: 3.4cqi 4.4cqi;
  border-radius: 1.8cqi;
  background: #f3f4f4;
}

.hsh-ve__specs dt {
  color: #8a8f93;
  font-size: max(8px, 4cqi);
  letter-spacing: 0.02em;
}

.hsh-ve__specs dd {
  margin: 0.8cqi 0 0;
  color: #1d1e20;
  font-size: max(10px, 5.4cqi);
  line-height: 1.35;
  word-break: normal; /* 한글은 글자 단위로 줄바꿈 */
}

.hsh-ve__specs dd.is-hot { color: var(--ve-deep); font-weight: 700; }

.hsh-ve__quote[hidden],
.hsh-ve__profile[hidden] { display: none; }

/* 아래 작은 버튼 — profile(소개글 ↔ 프로필) · about(뒤집기). 면 맨 아래에 붙는다 */
.hsh-ve__btns {
  display: flex;
  justify-content: flex-end;
  gap: 2.4cqi;
  margin-top: auto;
  padding-top: 6cqi;
}

.hsh-ve__more {
  padding: 1.2cqi 3.6cqi;
  border: 1px solid var(--ve-accent);
  border-radius: 999px;
  background: none;
  color: var(--ve-deep);
  font: italic 700 max(8px, 4cqi) var(--hsh-win-font);
  letter-spacing: 0.14em;
  cursor: pointer;
}

.hsh-ve__more:hover,
.hsh-ve__more[aria-expanded="true"],
.hsh-ve__more[aria-pressed="true"] { background: var(--ve-accent); color: #10201e; }
.hsh-ve__more:focus-visible { outline: 1.5px solid var(--hsh-win-line); outline-offset: 2px; }

@media (max-width: 480px) {
  .hsh-ve { gap: 6px; padding: 8px; }
}

/* ---------- 스티커 — 창 둘레에 무작위로 3~6개(자리 · 크기는 room-window.js) ---------- */

.hsh-win__deco {
  position: absolute;
  translate: -50% -50%; /* 자리(left · top)가 스티커 가운데 */
  overflow: visible;
  pointer-events: none;
  animation: hsh-win-nod 3.2s ease-in-out infinite;
}

/* 스티커 · 썸네일 하트 외곽선 — 로딩 집 윤곽처럼 화면에서 1px 회색 */
.hsh-win__outline {
  fill: none;
  stroke: var(--hsh-win-line);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

@keyframes hsh-win-nod {
  0%, 100% { rotate: 0deg; }
  50% { rotate: 8deg; }
}

@media (max-width: 480px) {
  .hsh-win__title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .hsh-win__frame,
  .hsh-win.is-open .hsh-win__frame { scale: 1; animation: none; }
  .hsh-win__deco,
  .hsh-ve__badge { animation: none; }
  .hsh-ve__flip,
  .hsh-ve__face { transition: none; }
  .hsh-ve__face::after,
  .hsh-ve__badge::after { display: none; }
}