html, body { overscroll-behavior: none; }
/* archive 진입 시 외침 화면(밝은 배경·안내문구) 플래시 제거 */
html.archive-mode #main-body { background: rgb(28, 28, 30) !important; }
html.archive-mode #bg-layer { opacity: 1 !important; }
html.archive-mode #instruction-text,
html.archive-mode #text-screen,
html.archive-mode #volume-bar-wrap,
html.archive-mode #scream-cheer { display: none !important; }
body {
  margin: 0;
  background: #dcdcdc;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  height: 100vh;
  height: 100dvh;
  padding: clamp(1rem, 3vw, 2.5rem);
  overflow: hidden;
  /* 이 페이지는 영어 UI지만 본문은 사용자가 쓴 답변이라 한국어가 섞인다.
     어절 단위로만 줄바꿈하고(단어 중간 끊김 방지), 끊을 데 없는 긴 토큰만
     break-word로 흘려보낸다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

.text-wrap {
  width: min(25rem, 100%);
  max-height: 60vh;
  overflow-y: auto;
  position: relative;
  transition:
    opacity 120ms linear,
    filter 120ms linear,
    transform 120ms linear;
  z-index: 6;
  scrollbar-width: none;
}

.text-wrap::-webkit-scrollbar {
  display: none;
}

#text-content {
  color: transparent;
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
  font-style: normal;
  font-size: clamp(0.7rem, 1vw, 1rem);
  line-height: 1.45;
  margin: 0;
  text-align: center;
}

#blob-screen {
  display: none;
}

#instruction-text {
  position: fixed;
  left: 50%;
  bottom: 85%;
  transform: translateX(-50%);
  width: min(25rem, 90%);
  text-align: center;
  color: #1c1c1e;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: normal;
  font-size: 1.3rem;
  line-height: 1.45;
  pointer-events: none;
  z-index: 7;
}

#sentiment-score {
  color: #e8e8e8;
  font-family: var(--font-body) !important;
  font-size: clamp(0.8rem, 1vw, 1rem);
  letter-spacing: 0;
  margin: 0.9rem 0 0;
  opacity: 0.72;
  text-align: center;
  width: min(25rem, 100%);
}

#selectedBox {
  position: fixed;
  display: none;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(12, 12, 16, 0.88);
  pointer-events: none;
  z-index: 4;
}

/* 텍스트+칩 오버레이: canvas(z-index 5) 위에 표시 */
#selection-overlay {
  position: fixed;
  display: none;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  pointer-events: auto;
  z-index: 6;
}

#selection-text {
  flex: 1;
  overflow: auto;
  color: #e8e8e8;
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 1.5;
  white-space: pre-wrap;
  pointer-events: auto;
  margin: 0;
  /* Firefox 스크롤바: 얇고 은은하게 */
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 232, 232, 0.25) transparent;
}

/* 아래에 더 읽을 내용이 있을 때만 하단을 희미하게 (JS가 토글) */
#selection-text.fade-bottom {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

/* WebKit 스크롤바: 얇고 은은하게 */
#selection-text::-webkit-scrollbar {
  width: 0.375rem;
}
#selection-text::-webkit-scrollbar-track {
  background: transparent;
}
#selection-text::-webkit-scrollbar-thumb {
  background: rgba(232, 232, 232, 0.25);
  border-radius: 999px;
}
#selection-text::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 232, 232, 0.45);
}

#selection-score {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  font-family: var(--font-body) !important;
  font-size: 0.8125rem;
  letter-spacing: 0;
  pointer-events: auto;
  padding-top: 1.875rem;
}

#selection-score .cat-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* --chip-pad(0.45em)의 절반으로 줄였다가 너무 얇아 1.5배 되돌림 → 0.3375em.
     높이 하한(--chip-min-h, 36px)이 남아 있으면 패딩이 높이에 반영되지 않아 해제. */
  min-height: 0;
  padding: 0.4em 1.2em;
  border-radius: 999px;
  color: #1c1c1e;
  white-space: nowrap;
  /* 좌측 메뉴(.cm-tag)·본문과 같은 ogg-text 300으로 고정.
     칩만 weight를 비워두면 400으로 떨어지는데, ogg-text의 400–700 페이스가
     안 실릴 때 이 칩만 sans-serif로 새 버려 폰트가 사라진 것처럼 보였다. */
  font-weight: 300;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: opacity 0.15s;
}

#selection-score .cat-chip:hover {
  opacity: 0.85;
}

/* 선택된 칩이 있으면 나머지 칩은 호버처럼 살짝 흐리게 (외곽선 대신) */
#selection-score:has(.cat-chip.active) .cat-chip:not(.active) {
  opacity: 0.85;
}

#selection-score .no-emotion {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(232, 232, 232, 0.3);
  pointer-events: none;
}

#selection-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  color: rgba(232, 232, 232, 0.5);
  font-size: 1rem;
  cursor: pointer;
  /* 24×16 → 44×44. 오버레이를 닫는 유일한 버튼이라 특히 커야 한다.
     top/right를 0.5rem으로 당긴 건 늘어난 패딩만큼 되돌려 ✕의 위치를 유지하기 위함. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  line-height: 1;
  transition: color 150ms;
  font-family: system-ui, sans-serif;
}

#selection-close:hover {
  color: #ffffff;
}

#bg-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  background:
    url("data:image/png;base64,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"),
    linear-gradient(0deg, #8c8681, #01506c, #1c1c1e);
  background-blend-mode: overlay, normal;
  background-repeat: repeat, no-repeat;
  background-size: 30px, cover;
}

canvas:not(#particle-canvas) {
  position: fixed;
  inset: 0;
  z-index: 5;
}

/* 완료 카드: 블롭 결과 화면에서 2초 후 페이드인 */

/* 상단 바: About(좌) · 로고(중앙) · Question(우) — 탐색 단계에서 표시 */
#top-nav {
  position: fixed;
  /* viewport-fit=cover라 top: 0.75rem은 노치/다이나믹 아일랜드 아래로 들어간다 */
  top: calc(0.75rem + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  height: 4.5rem;
  display: none; /* JS가 flex로 토글 */
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  z-index: 11;
  pointer-events: none;
}
#top-nav .tn-link {
  pointer-events: auto;
  text-decoration: none;
  color: rgba(232, 232, 232, 0.82);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0.06em;
  transition: color 150ms;
  /* 글자 높이만으로는 탭 타깃이 24px에 그친다. 세로 패딩으로 44px을 만들고
     좌우 음수 마진으로 되돌려, 보이는 글자 위치는 그대로 둔다. */
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  margin: 0 -0.5rem;
  /* 이 링크들은 색색의 블롭이 지나다니는 캔버스 위에 떠 있다. 밝은 파티클
     덩어리가 뒤로 지나가면 글자가 사라지므로 얇은 그림자로 형태를 지킨다. */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
#top-nav .tn-link:hover {
  color: #ffffff;
}

/* 좌측 상단 패널: 로고 + 뒤로가기 + 카테고리 (상단 바 아래로 내림) */
#left-panel {
  position: fixed;
  /* 상단 바(#top-nav)의 "About" 링크 바로 아래에 붙어 있어 좌상단이 붐볐다.
     상단 바 높이 + 세이프 에어리어만큼 확실히 내려 두 덩어리를 분리한다. */
  top: calc(clamp(1rem, 3vw, 2.5rem) + 4.25rem + env(safe-area-inset-top, 0px));
  left: clamp(1rem, 3vw, 2.5rem);
  /* 최소 1.5컬럼, 더 긴 카테고리명이 있으면 그만큼만 늘어남 (줄바꿈 방지) */
  width: max-content;
  min-width: calc(
    1.5 * (100vw - 2 * clamp(1rem, 3vw, 2.5rem) - 6.875rem) / 12 +
      0.3125rem
  );
  display: none; /* JS가 flex로 토글 */
  flex-direction: column;
  gap: 1.4rem;
  z-index: 10;
}
/* 블롭 카드와 감정 메뉴가 겹치는 문제는 z-index가 아니라 "카드가 열리면 메뉴를
   닫는" 것으로 푼다(js/answer.js의 updateSelectionOverlay). 카드 배경(#selectedBox)은
   선택된 블롭이 검은 면 위에 그려지도록 일부러 캔버스(5) 아래인 z-index 4에 있어서,
   카드만 메뉴 위로 올릴 방법이 없기 때문이다. */

/* 햄버거 토글: 데스크톱에선 숨김 */
#menu-toggle {
  display: none;
  align-self: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 0.28rem;
  background: rgba(255, 255, 255, 0.13);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  border: none;
  border-radius: 0.75rem;
  /* 42×36 → 44×44. 터치 최소 타깃 */
  padding: 0.75rem 0.85rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  cursor: pointer;
}
#menu-toggle span {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: #e8e8e8;
  border-radius: 2px;
}

/* 브레이크포인트는 사이트 공통인 640(폰)으로 통일한다. 예전엔 이 파일만
   600(햄버거)과 480(본문 크기)을 따로 써서, 481~600px에서는 메뉴는 접히는데
   본문은 데스크탑 크기로 남는 어중간한 조합이 나왔다. */
@media (max-width: 640px) {
  /* 작은 화면: 카드 접고 햄버거로 토글 */
  #menu-toggle {
    display: flex;
  }
  #left-panel #menu-card {
    display: none;
  }
  #left-panel.menu-open #menu-card {
    display: flex;
  }

  /* 블롭 텍스트 폰트 크기 모바일 보정 */
  #text-content { font-size: clamp(0.8125rem, 3.2vw, 1rem); }
  /* 상단 여백 — 하단 음량 바의 세이프에어리어 기준 여백과 대칭되도록,
     "Grab the Burst Box..." 안내문을 상태바 아래로 내린다 */
  #instruction-text {
    bottom: auto;
    top: calc(clamp(2rem, 7vh, 5rem) + env(safe-area-inset-top, 0px));
  }
  /* 음량 바 폭은 파일 끝의 미디어쿼리에서 지정한다 — 기본 #volume-bar-wrap
     규칙이 이 블록보다 뒤에 있어, 여기서 지정하면 기본값에 덮이기 때문. */
  #scream-cheer { font-size: 0.8125rem; white-space: normal; text-align: center; width: 80vw; left: 10vw; transform: none; }
  /* 선택 오버레이 텍스트 크기 */
  #selection-text { font-size: 1rem; }
}

#site-logo {
  color: rgba(232, 232, 232, 0.7);
  flex-shrink: 0;
}
#site-logo svg {
  width: 6.875rem;
  display: block;
}

/* 유리 카드: back-to-mine + category-menu 래퍼 */
#menu-card {
  background: rgba(255, 255, 255, 0.13);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  border: none;
  border-radius: 1rem;
  padding: 1.1rem 1.3rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#back-to-mine {
  align-self: flex-start;
  background: transparent;
  color: #e8e8e8;
  border: 1px solid rgba(232, 232, 232, 0.3);
  font-family: var(--font-body) !important;
  font-weight: 300;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  padding: var(--chip-pad);
  /* 이 버튼만 높이 하한이 없어 31px이었다(칩 토큰을 쓰면 28.5px). 같은 칩 등급인
     .cat-chip과 같은 하한을 줘 36px로 맞춘다 — 44px까지 올리면 31 → 44로 42%
     커져 이 자리에서 너무 두꺼워진다. */
  min-height: var(--chip-min-h);
  cursor: pointer;
  transition:
    border-color 150ms,
    color 150ms;
}
#back-to-mine:hover {
  border-color: rgba(232, 232, 232, 0.75);
  color: #ffffff;
}

/* 왼쪽 감정 태그 메뉴 */
#category-menu {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}
#category-menu .cm-tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: none;
  /* 항목 간격을 절반으로 좁히기 위해 높이 하한을 뺐다 — 이제 줄 높이(≈22px)가
     그대로 탭 타깃이다(이전 36px). 12개가 붙어 있는 목록이라 오탭 위험이 있다. */
  min-height: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: rgba(232, 232, 232, 0.55);
  transition: color 150ms;
  text-align: left;
  white-space: nowrap;
}
#category-menu .cm-tag:hover {
  color: rgba(232, 232, 232, 0.9);
}
#category-menu .cm-tag.active {
  color: #ffffff;
}
#category-menu .cm-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.8;
}

/* 블롭 탐색 안내: 화면 중앙 하단 */
#move-hint {
  position: fixed;
  left: 50%;
  bottom: calc(clamp(1.5rem, 5vh, 3rem) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: none; /* JS가 flex로 토글 */
  align-items: center;
  gap: 0.6rem;
  color: #e8e8e8;
  opacity: 0.7;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 8;
}
#move-hint svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}
/* 안내 문구는 조작 방식별로 두 벌을 넣어 두고 여기서 고른다.
   폰에는 스크롤이 없고 실제 구현은 1손가락 드래그 + 2손가락 핀치다
   (js/answer.js의 touchMoved). 마우스 호버가 되는 기기에만 스크롤 문구를 보인다. */
#move-hint .mh-touch { display: inline; }
#move-hint .mh-pointer { display: none; }
@media (hover: hover) and (pointer: fine) {
  #move-hint .mh-touch { display: none; }
  #move-hint .mh-pointer { display: inline; }
}

#volume-bar-wrap {
  width: calc(
    (100vw - 2 * clamp(1rem, 3vw, 2.5rem) - 6.875rem) / 3 + 1.875rem
  );
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(clamp(2rem, 7vh, 5rem) + 1.125rem + env(safe-area-inset-bottom, 0px));
  height: 0.625rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18);
  z-index: 9999;
  transition: opacity 0.4s ease;
  overflow: hidden;
}

/* 격려 문구 (volume bar 위, charge 단계별) */
#scream-cheer {
  position: fixed;
  bottom: calc(clamp(2rem, 7vh, 5rem) + 2.5rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  color: #e8e8e8;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 8;
}

/* 음량 적립 진행 — 밝은 유리 */
#volume-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.9)
  );
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

/* 음량 바 — 데스크탑 폭 공식이 폰에서는 113px짜리 토막이 되므로 여기서 넓힌다.
   그리드 전폭(6컬럼, 358px)으로도 재 봤지만 27% 넓어져 원래 크기를 유지했다 —
   그리드 정렬은 요소 크기를 10% 넘게 바꾸지 않는 선에서만 한다.
   위 기본 규칙보다 뒤에 와야 실제로 적용된다 (동일 우선순위). */
@media (max-width: 640px) {
  #volume-bar-wrap {
    width: min(90vw, calc(2.5 * ((100vw - 2 * clamp(1rem, 3vw, 2.5rem) - 6.875rem) / 3 + 1.875rem)));
  }
  /* 안내문·결과 텍스트는 그리드 전폭(6컬럼) 안에 */
  #instruction-text { width: min(25rem, var(--col-6)); }
  .text-wrap,
  #sentiment-score { width: min(25rem, var(--col-6)); }
}

/* ───────── 한국어 전용 보정 ─────────
   answer.ko.css를 없애면서 남은, 폰트만으로는 설명되지 않는 차이. */
:lang(ko) #top-nav .tn-link {
  /* 두 글자짜리 한글 라벨은 가로 폭이 42px밖에 안 나온다 */
  justify-content: center;
  min-width: 2.75rem;
}