/* Butter & Brass — 한 방이 시간대에 따라 표정을 바꾼다.
   시간대 전환(data-side)이 이 페이지의 유일한 큰 동작이고, 나머지는 조용히 둔다. */

:root {
  /* Butter — 아침 카페 */
  --paper: #FAF3E3;
  --paper-2: #FFFDF7;
  --ink: #33241B;
  --ink-2: #6B5646;
  --brass: #A9762C;
  --brass-soft: #E8D6B4;
  --rule: #DFCFB2;
  --scrim: rgba(250, 243, 227, .92);

  --display: "Fraunces", "Noto Serif KR", "Noto Serif JP",
             "Apple SD Gothic Neo", "Hiragino Mincho ProN", "Iowan Old Style", Georgia, serif;
  --ui: "Jost", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
        "Hiragino Sans", "Noto Sans KR", "Noto Sans JP", "Segoe UI", sans-serif;

  --page: min(1120px, 92vw);
  --step: clamp(1.05rem, .95rem + .35vw, 1.22rem);
  --ease: cubic-bezier(.2, .6, .2, 1);
}

html[data-side="Brass"] {
  /* Brass — 심야 바 */
  --paper: #221812;
  --paper-2: #2C2019;
  --ink: #F1E4D0;
  --ink-2: #B9A48A;
  --brass: #D3A052;
  --brass-soft: #4A3826;
  --rule: #40301F;
  --scrim: rgba(28, 20, 14, .92);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* 세로 스크롤바를 감춘다 (PC·모바일 공통). 스크롤 자체는 그대로 동작한다 */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* 구 Edge/IE */
}
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: var(--step);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}

img { max-width: 100%; height: auto; display: block; }   /* height 속성이 aspect-ratio 를 이기지 않게 */
a { color: inherit; }

.wrap { width: var(--page); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 99;
}
.skip:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* ---------- 헤더 ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--scrim);
  backdrop-filter: none;
  border-bottom: 1px solid var(--rule);
  transition: background-color .5s var(--ease), border-color .5s var(--ease);
}
.top .wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.mark {
  font-family: var(--display);
  font-weight: 600; font-size: 1.14rem; letter-spacing: .04em;
  text-decoration: none; white-space: nowrap;
}
.mark em { font-style: normal; color: var(--brass); }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.top nav a {
  font-size: .92rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-2);
  transition: color .2s var(--ease);
}
.top nav a:hover { color: var(--ink); }
@media (max-width: 700px) { .top nav a.hide-sm { display: none; } }

.lang { position: relative; }
.lang summary {
  list-style: none; cursor: pointer; font-size: .92rem; letter-spacing: .06em;
  color: var(--ink-2); text-transform: uppercase;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { color: var(--ink); }
.lang ul {
  position: absolute; right: 0; top: calc(100% + 10px); margin: 0; padding: 6px;
  list-style: none; min-width: 168px;
  background: var(--paper-2); border: 1px solid var(--rule);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
}
.lang li a {
  display: block; padding: 8px 12px; text-decoration: none; font-size: .96rem;
}
.lang li a:hover, .lang li a[aria-current="true"] { background: var(--brass-soft); }

/* ---------- 히어로 ----------
   이 페이지가 시키려는 단 하나의 행동은 「재생」이다. 그래서 첫 화면이 곧 플레이어다.
   왼쪽은 무엇을 듣게 되는지, 오른쪽은 그것 자체. */
.hero { border-bottom: 1px solid var(--rule); }
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 60px); align-items: stretch;
  padding: clamp(44px, 5.5vw, 80px) 0 clamp(44px, 5.5vw, 76px);
}
/* 왼쪽 글은 위에서 시작하고, 버튼은 아래로 내려 오른쪽 칸 바닥에 맞춘다 */
.hero-copy { max-width: 42ch; display: flex; flex-direction: column; }
.hero-copy .row-actions { margin-top: auto; padding-top: 24px; }
/* 제목이 먼저 오고, 회차 정보는 같은 줄 오른쪽 끝에 붙는다.
   baseline 을 맞춰야 크기가 다른 두 글자가 한 줄로 읽힌다. */
.now-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px 20px; flex-wrap: wrap; margin-top: 18px;
}
.hero-play .meta { margin: 0; flex: none; }
.hero-play .now {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem);
  line-height: 1.24; margin: 0;
}
.hero-play .row-actions { margin-top: 18px; }
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 26px; }
  .hero-copy { max-width: none; }
  .hero-play { order: -1; }            /* 모바일에서는 영상이 먼저 */
  .hero-copy .row-actions { margin-top: 0; padding-top: 4px; }
}
/* 히어로의 주인공은 영상이다. 왼쪽은 조용히 받쳐만 준다 —
   큰 제목을 두면 영상이 묻힌다. 브랜드 줄은 헤더 로고와 같은 글자라 뺐고,
   h1 은 이 lede 가 맡는다 (문서에 h1 이 하나는 있어야 한다). */
.eyebrow {
  font-family: var(--display);
  font-size: .95rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 20px;
}
h1.lede { font-weight: 500; }
.lede {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.15rem, 1.02rem + .5vw, 1.42rem);
  line-height: 1.5; letter-spacing: -.005em;
  word-break: keep-all; text-wrap: pretty;
  color: var(--ink); margin: 0 0 20px; max-width: 30ch;
}

/* 두 사이드와 공개 주기. 라벨은 흐리게, 값은 본문색으로.
   **「지금」이라고 쓰지 않는다.** 오른쪽 영상은 늘 최신 회차라 시간대와 무관한데,
   나란히 두면 밤에 아침 영상을 걸어 놓고 "지금 심야 세트"라고 말하는 꼴이 된다.
   대신 접속자 현지 시각에 해당하는 줄에만 점을 켠다 — 사실만 말한다. */
.facts { margin: 4px 0 0; border-top: 1px solid var(--rule); }
.facts > div {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
}
.facts dt {
  margin: 0; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); align-self: center;
}
/* 점이 붙는 줄만 밀리지 않게 값은 늘 같은 자리에서 시작한다 — 점은 여백 안에 띄운다 */
.facts dd {
  margin: 0; font-size: .98rem; color: var(--ink-2); align-self: center;
  position: relative; padding-left: 15px;
}
.facts dt, .facts dd { transition: color .5s var(--ease); }

/* 지금 시간대인 줄만 살아난다 — 라벨에 불이 들어오고 값이 본문색이 된다 */
[data-side="Butter"] .facts [data-row="Butter"] dt,
[data-side="Brass"]  .facts [data-row="Brass"]  dt { color: var(--brass); }
[data-side="Butter"] .facts [data-row="Butter"] dd,
[data-side="Brass"]  .facts [data-row="Brass"]  dd { color: var(--ink); }
[data-side="Butter"] .facts [data-row="Butter"] dd::before,
[data-side="Brass"]  .facts [data-row="Brass"]  dd::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--brass);
}

/* ---------- 섹션 ---------- */
section { padding: clamp(52px, 7vw, 92px) 0; }
.sec-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 8px; flex-wrap: wrap; }
h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.05rem);
  letter-spacing: -.01em; margin: 0;
}

/* ---------- 플레이어 ---------- */
.player {
  position: relative; aspect-ratio: 16 / 9; background: var(--paper-2);
  border: 1px solid var(--rule); overflow: hidden;
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.facade {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0;
  border: 0; background: none; cursor: pointer; display: block;
}
.facade img { width: 100%; height: 100%; object-fit: cover; }
.facade::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(20, 14, 10, .18);
  transition: background .25s var(--ease);
}
.facade:hover::after { background: rgba(20, 14, 10, .06); }
.facade .btn-play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2;
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--rule);
  display: grid; place-items: center;
  transition: scale .25s var(--ease);
}
.facade:hover .btn-play { scale: 1.06; }
.facade .btn-play::before {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 18px solid var(--brass);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}

.meta { font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.row-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

.btn {
  appearance: none; cursor: pointer; font: inherit; font-size: .95rem;
  padding: 12px 22px; border: 1px solid var(--brass); background: var(--brass); color: var(--paper);
  text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
  transition: opacity .2s var(--ease);
}
.btn:hover { opacity: .88; }

/* 좁은 화면에서는 두 버튼이 **폭을 반씩 나눠** 한 줄에 선다.
   기본값(내용 만큼 넓어짐)으로 두면 버튼 하나가 143px 라 275px 짜리 줄에
   둘이 못 들어가 아래로 접힌다 — 실기기(2026-08-23 제보)에서 그렇게 나왔다.
   버튼 글자 폭은 **기기마다 다르다.** 한글은 본문 글꼴(Jost)에 없어 기기가
   저마다 다른 글꼴로 대신 그리기 때문이다. 그래서 글자 길이에 기대지 않고
   자리를 반씩 나눠 어떤 글꼴이 와도 한 줄을 유지하게 한다. */
@media (max-width: 520px) {
  .hero .row-actions { gap: 8px; }
  .hero .row-actions .btn {
    flex: 1 1 0; min-width: 0;          /* 반씩 나눠 갖는다 */
    padding: 12px 10px; font-size: .88rem;
    justify-content: center; text-align: center;
  }
}
/* 테두리가 --rule(구분선 색) 이면 배경과 대비가 1.38 밖에 안 나와 버튼 꼴이 안 보인다
   — UI 요소는 3:1 이상이어야 형태가 읽힌다(WCAG). 브랜드색을 옅게 섞어 띄운다.
   글자는 그대로 두고(대비 13.87) 테두리와 바탕만 손댄다. */
.btn.ghost {
  background: color-mix(in srgb, var(--brass) 8%, transparent);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--brass) 60%, transparent);
}
.btn.ghost:hover {
  background: color-mix(in srgb, var(--brass) 16%, transparent);
  border-color: var(--brass);
  opacity: 1;
}
.btn.ghost:hover { border-color: var(--brass); opacity: 1; }

/* ---------- 목록 ---------- */
.filters { display: flex; gap: 8px; margin: 0 0 26px; flex-wrap: wrap; }
.filters button {
  appearance: none; cursor: pointer; font: inherit; font-size: .9rem;
  padding: 8px 16px; border: 1px solid var(--rule); background: transparent; color: var(--ink-2);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.filters button[aria-pressed="true"] { color: var(--ink); border-color: var(--brass); }

/* 행마다 날짜·태그 길이가 달라 오른쪽 두 칸이 들쭉날쭉했다 (실측 92~108px · 72~102px).
   항목이 각각 따로 grid 라 컬럼 폭이 행끼리 공유되지 않은 탓이다.
   목록 전체를 하나의 grid 로 잡고 li·button 이 그 컬럼을 subgrid 로 물려받게 한다 —
   가장 긴 내용에 맞춰 모든 행이 자동으로 같은 자리에 선다. 언어가 바뀌어도 그대로 맞는다. */
.list {
  list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 3.2rem 1fr max-content max-content;
}
.list li {
  border-bottom: 1px solid var(--rule);
  display: grid; grid-column: 1 / -1; grid-template-columns: subgrid;
}
/* **display 를 지정하면 hidden 속성이 무력해진다.** 목록은 서버가 열여덟 편을 모두 굽고
   지금 고른 쪽이 아닌 것을 hidden 으로 접는데, 이 한 줄이 없으면 전부 펼쳐진 채로 보인다. */
.list li[hidden] { display: none; }
.ep {
  width: 100%; display: grid; align-items: center; gap: 4px 20px;
  grid-column: 1 / -1; grid-template-columns: subgrid;
  /* 배지가 있는 줄만 높아지지 않게 — 위아래 여백을 조금 줄이고 최소 높이로 못박는다.
     16px x 2 + 배지 31px = 63px < 4rem 이라 모든 줄이 정확히 64px 로 선다. */
  padding: 16px 4px; min-height: 4rem;
  background: none; border: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
  transition: background-color .2s var(--ease);
}
.ep:hover { background: var(--brass-soft); }
/* 아직 공개 전인 줄은 흐리게 두되 **배지는 빼고** 흐린다.
   행 전체에 opacity 를 걸면 「공개 예정」까지 절반으로 옅어져 읽기 어려워진다 —
   그 글자야말로 왜 눌리지 않는지 알려주는 유일한 단서다. */
.ep[disabled] { cursor: default; }
.ep[disabled] .n, .ep[disabled] .t, .ep[disabled] .d { opacity: .48; }
.ep[disabled]:hover { background: none; }
.ep .n { font-size: .9rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ep .t { font-family: var(--display); font-weight: 500; font-size: 1.12rem; line-height: 1.3; }
/* 태그가 있든 없든 자리를 못박는다 — 날짜는 늘 마지막 칸, 태그는 그 왼쪽.
   요소 순서에 맡기면 태그가 없는 행에서 날짜가 한 칸 앞으로 당겨진다. */
.ep .tag { grid-column: 3; }
.ep .d { grid-column: 4; font-size: .86rem; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.ep .tag {
  font-size: .8rem; letter-spacing: .02em;   /* 「공개 예정」은 자간을 벌릴수록 읽기 나빠진다 */
  border: 1px solid var(--brass-soft); padding: 4px 11px;
  color: var(--brass); white-space: nowrap;  /* 흐린 회색 대신 브랜드색 — 배경과 또렷이 갈린다 */
  text-align: center; justify-self: stretch;
}
@media (max-width: 640px) {
  .list { display: block; }                       /* 좁은 화면은 subgrid 를 풀고 */
  .list li { display: block; }
  /* 두 줄로 접는다 — 윗줄에 번호와 제목, 아랫줄 오른쪽에 배지와 날짜.
     배지와 날짜를 각각 한 줄씩 쌓으면 줄이 셋으로 늘고 왼쪽이 허전해진다. */
  .ep {
    grid-column: auto;
    grid-template-columns: 2.6rem 1fr auto;
    gap: 6px 10px;
  }
  .ep .n   { grid-column: 1; grid-row: 1; }
  .ep .t   { grid-column: 2 / -1; grid-row: 1; }
  /* 배지와 날짜는 글자 크기가 달라 그냥 두면 세로 중심이 어긋난다 — 같은 줄에 눕힌다 */
  .ep .tag { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; font-size: .76rem; }
  .ep .d   { grid-column: 3; grid-row: 2; align-self: center; text-align: right; font-size: .8rem; }
}

/* ---------- 소개 ---------- */
/* 글과 방 사진을 나란히. 카드 두 장을 쌓으면 오른쪽만 길어져 왼쪽 아래가 텅 빈다 —
   사진 한 장이 글 높이를 그대로 채우게 해서 두 단의 키를 맞춘다. */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.about-copy { display: flex; flex-direction: column; }
.about p { margin: 0 0 18px; max-width: 52ch; }
.about .row-actions { margin-top: auto; padding-top: 24px; }

/* 사이드 설명은 히어로와 같은 규칙선 표를 쓴다. 다만 히어로가 「무엇인가」(카페 재즈 / 재즈 바)를
   말하므로 여기서는 「무슨 악기인가」만 말한다 — 같은 말을 두 번 하지 않는다. */
.sides { margin-top: 6px; }
/* 「BUTTER SIDE」가 한 줄에 들어가야 한다 — 히어로보다 단이 좁아 라벨 칸을 넓게 잡는다 */
.sides > div { grid-template-columns: 7.2rem 1fr; }

.room { position: relative; margin: 0; overflow: hidden; min-height: 300px; }
.room img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%;
  opacity: 0; transition: opacity .6s var(--ease);
}
html[data-side="Butter"] .room .butter,
html[data-side="Brass"]  .room .brass { opacity: 1; }

@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .about .row-actions { margin-top: 0; padding-top: 4px; }
  .room { min-height: 0; aspect-ratio: 16 / 9; order: -1; }   /* 모바일은 사진이 먼저 */
  .room img { position: static; height: auto; aspect-ratio: 16 / 9; }
  .room .butter { display: none; } html[data-side="Butter"] .room .butter { display: block; }
  .room .brass  { display: none; } html[data-side="Brass"]  .room .brass  { display: block; }
}

/* ---------- 푸터 ---------- */
footer { border-top: 1px solid var(--rule); padding: 20px 0 24px; }
footer p { margin: 0; color: var(--ink-2); font-size: .86rem; }
/* 열 번 눌러 방문 기록을 여는 자리. 눌리는 곳처럼 보이지 않아야 하지만
   손가락으로도 맞출 수는 있어야 한다 — 커서만 바꾸지 않고 여백만 넓힌다. */
footer .sig { padding: 2px 1px; -webkit-tap-highlight-color: transparent; }

/* ---------- 다른 언어 안내 띠 ---------- */
.langbar {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; padding: 10px 18px;
  background: var(--paper-2); border-bottom: 1px solid var(--rule);
  font-size: .88rem; color: var(--ink-2);
}
.langbar[hidden] { display: none; }
.langbar a { color: var(--brass); text-decoration: none; border-bottom: 1px solid currentColor; }
.langbar a:hover { color: var(--ink); }
.langbar button {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--ink-2); font: inherit; font-size: 1.1rem; line-height: 1; padding: 2px 4px;
}
.langbar button:hover { color: var(--ink); }

/* ---------- 방문 기록 (숨은 화면) ----------
   sosohanapp.com 의 것을 그대로 옮겼다. 색과 모서리만 이 사이트의 것을 쓴다
   (여기는 각진 디자인이라 둥근 모서리를 쓰지 않는다). */

/* 열 번 누르면 글자가 통째로 드래그 선택된다 — 그 상태로는 숨은 기능이
   「글자가 잡힌 것」처럼 보인다. 선택만 막고 색·크기는 그대로 둔다. */
footer .sig { -webkit-user-select: none; user-select: none; }
/* 폰에서 푸터 글자는 작다. 누르는 자리를 세로로 넓히되 **레이아웃은 그대로
   두려고** 같은 값의 음수 마진으로 되돌린다 (푸터 한 줄 유지). */
@media (max-width: 767px) {
  footer .sig { padding: 9px 2px; margin: -9px 0; -webkit-tap-highlight-color: transparent; }
}

.vdim {
  position: fixed; inset: 0; z-index: 90;
  background: color-mix(in srgb, #000 46%, transparent);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.vdim[hidden] { display: none; }
/* 모달이 열려 있는 동안 뒤 배경은 움직이지 않는다 */
html.vopen, html.vopen body { overflow: hidden; }

.vcard {
  background: var(--paper); border: 1px solid var(--rule);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .3);
  width: 100%; max-width: 470px; max-height: 90vh; overflow: auto; outline: none;
  scrollbar-width: none;
  padding: 18px 20px 16px;
}
.vcard::-webkit-scrollbar { display: none; }

.vhead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.vhead h2 { font-family: var(--display); font-size: 1.2rem; font-weight: 500; margin: 0; flex: 1; }
.vx {
  background: none; border: 0; cursor: pointer; color: var(--ink-2);
  width: 34px; height: 34px; margin: -6px -6px -6px 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.vx:hover { color: var(--ink); }
.vx svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* 요약 세 칸 — 오늘 · 최근 7일 · 누적 */
.vsum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vtile { border: 1px solid var(--rule); padding: 10px 6px 9px; text-align: center; }
/* 라벨 칸 높이를 **못 박는다.** 폰에서 칸이 좁아 라벨이 두 줄로 접히는데,
   흐르는 대로 두면 세 칸의 숫자가 서로 다른 높이에 서서 들쑥날쑥해 보인다. */
.vtile .k {
  font-size: .82rem; color: var(--ink); line-height: 1.3; min-height: 34px;
  display: flex; align-items: center; justify-content: center;
}
.vtile .n {
  font-family: var(--display); font-size: 1.8rem; font-weight: 500;
  line-height: 1.15; font-variant-numeric: tabular-nums;
}
.vtile .n i { font-style: normal; font-size: .75rem; color: var(--ink-2); margin-left: 2px; }
.vtile .s { font-size: .8rem; color: var(--ink-2); margin-top: 2px; white-space: nowrap; }
.vtile .d { font-size: .74rem; color: var(--brass); margin-left: 3px; }

.vsec { margin-top: 13px; }
.vsec:first-child { margin-top: 0; }
.vsec h3 { font-size: .82rem; color: var(--ink); margin: 0 0 8px; font-weight: 500; }

/* 최근 30일 — **한 화면에 이레**가 서고, 옆으로 밀면 서른 날까지 간다.
   서른 칸을 한꺼번에 욱여넣으면 칸이 10px 도 안 돼 수치를 얹을 자리가 없다. */
.vbarwrap { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.vbarwrap::-webkit-scrollbar { display: none; }
.vbars { display: flex; align-items: flex-end; gap: 6px; width: max-content; }
/* 칸 너비는 스크립트가 잰다 — 카드 폭에서 이레가 딱 차게. */
.vcol { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.vcol .n {
  font-size: .72rem; color: var(--ink-2); font-variant-numeric: tabular-nums;
  line-height: 1.35; margin-bottom: 3px;
}
.vcol .n.z { opacity: .45; }
/* 막대가 서는 칸의 **높이를 못 박는다.** 흐르는 대로 두면 값이 큰 날과 작은 날의
   수치가 서로 다른 줄에 서서 눈이 오르내린다.
   칸에 **옅은 트랙**을 깐다 — 기준(30일 최다)이 보이는 이레 밖에 있으면 막대가
   다 같이 낮아져 흐름이 안 읽힌다. 트랙이 있으면 「가득 참 대비 얼마」로 읽힌다.
   기준을 보이는 구간의 최다로 바꾸지는 않는다 — 옆으로 밀 때마다 같은 날의
   높이가 달라지면 그래프를 믿을 수 없게 된다. */
.vcol .bwrap {
  width: 100%; height: 54px; display: flex; align-items: flex-end;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.vcol .b { width: 100%; background: var(--brass); min-height: 3px; }
/* 0 인 날도 **자국을 남긴다.** 아예 비우면 그 자리가 「없는 날」로 보여
   가로축이 날짜가 아니라 기록이 있는 날의 나열처럼 읽힌다. */
.vcol .b.z { background: var(--ink); opacity: .18; }
.vcol .d { font-size: .68rem; color: var(--ink-2); margin-top: 4px; white-space: nowrap; }
.vnote { font-size: .8rem; color: var(--ink-2); margin: 6px 0 0; }

/* 분포 한 줄 = 이름 · 막대 · % · 수.
   한 칸에 「88% · 1,602」처럼 붙이면 자릿수가 세로로 안 맞아 읽기 어렵다 —
   칸을 나눠 우측 정렬한다. */
.vrow {
  display: grid; grid-template-columns: 62px 1fr 38px 52px; gap: 10px;
  align-items: center; font-size: .88rem; line-height: 2;
}
.vrow .t { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrow .g { background: color-mix(in srgb, var(--ink) 11%, transparent); height: 10px; overflow: hidden; }
.vrow .g i { display: block; height: 100%; background: var(--brass); }
.vrow .p { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vrow .c { text-align: right; font-variant-numeric: tabular-nums; }
.vhost {
  font-size: .8rem; color: var(--ink-2); margin: 6px 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.vfoot {
  margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--rule);
  font-size: .8rem; color: var(--ink-2);
}
.vmsg { font-size: .94rem; color: var(--ink-2); padding: 22px 0; text-align: center; margin: 0; }

/* 폰 — 아래에서 올라오는 시트로 편다.
   가운데 카드로 두면 좌우 여백만 남고 정작 표가 좁아진다. */
@media (max-width: 520px) {
  .vdim { align-items: flex-end; padding: 0; }
  .vcard {
    max-width: none; max-height: 88vh; border-bottom: 0;
    padding: 18px 18px calc(16px + env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: no-preference) {
  .vcard { animation: vin .18s var(--ease); }
  @keyframes vin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ---------- 등장 ----------
   기본값은 「보인다」. 자바스크립트가 살아 있을 때만(html.js) 숨겼다가 올린다.
   스크립트가 막히거나 관찰자가 실패해도 본문이 사라지지 않게 하려는 것이다. */
html.js .rise { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
html.js .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .rise { opacity: 1; transform: none; transition: none; }
  body, .top, .room img { transition: none; }
}

/* CJK 는 라틴 기준 자간이 넓어 보인다 — 언어별로 조인다 */
html[lang="ko"] h1, html[lang="ja"] h1 { letter-spacing: -.03em; line-height: 1.24; }
html[lang="ko"] .ep .t, html[lang="ja"] .ep .t { letter-spacing: -.01em; }