/* 진열 — 밝은 방에 걸린 작은 화면들
   ─────────────────────────────────────────────────────────────
   이야기: 오락실이 아니라 전시장입니다. 밝은 종이색 벽에 어두운
   진열장이 격자로 박혀 있고, 그 안에서만 게임이 움직입니다.
   틈은 벽 색이라 화면들이 흰 여백으로 나뉜 작품처럼 읽히고,
   마지막 줄의 빈 칸은 그냥 빈 벽입니다.

   버린 것 — 스캔라인, 화면 비네트, 전면 비네트, 발광 LED,
             글로우 그림자. 전부 레트로 기호라 촌스러움의 뿌리였습니다.

   색 — 크롬에 강조색이 없습니다. 위계는 무채색 명도와 굵기로만.
        채도가 있는 것은 게임 화면과 장르 견본뿐입니다.

   한글 조판 — 자간을 벌리지 않고, 한글을 모노로 찍지 않고,
               라틴 전용 서체를 한글 자리에 쓰지 않습니다.
   ───────────────────────────────────────────────────────────── */

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

/* 브라우저 기본 [hidden] 규칙은 우선순위가 낮아서 display 를 지정한 요소
   (.mast 는 grid)에서는 무시됩니다. 숨겼는데 자리를 차지하는 사고가 납니다. */
[hidden] { display: none !important; }

:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 36px; --s7: 52px;

  --cell: 152px;
  --rowh: 104px;
  --mullion: 2px;          /* 화면 사이 흰 여백 */

  /* 모든 크롬과 벽이 같은 여백선에 섭니다. 넓은 화면에서는 여백이 자라고
     본문은 --page 에서 멈춥니다. %는 스크롤바를 제외한 본문 폭 기준이라
     100vw 처럼 가로 넘침을 만들지 않습니다. */
  --page: 1560px;
  --gut: max(var(--s6), calc((100% - var(--page)) / 2));

  /* 밤의 유원지 — 기본값.
     네온이 아니라 에나멜 간판과 전구입니다. 색은 아무 데나 쓰지 않고
     정해진 자리에만 나옵니다: 구역 간판, 전구줄, 표. 그 밖의 크롬은
     무채색이고, 놀이기구 화면은 어두운 바닥 위에서 스스로 빛납니다. */
  --paper:  #131A30;       /* 밤하늘 */
  --paper2: #1E2745;       /* 들린 면 — 빈 자리, 칩 */
  --glass:  #05060A;       /* 놀이기구 화면 바닥 */
  --txt:    #F7F0E1;              /* 14.6:1 — 간판 크림 */
  --dim:    rgba(247,240,225,.74);
  --mute:   rgba(247,240,225,.55);
  --hair:   rgba(247,240,225,.16);
  --sink:   inset 0 1px 4px rgba(0,0,0,.5);
  --lift:   0 14px 36px rgba(0,0,0,.55);
  --lamp:   rgba(255,194,74,.16);    /* 입구에 걸린 조명 */

  --bulb:   #FFC24A;       /* 전구 · 간판 */
  --ticket: #FF5560;       /* 표 · 별도 요금 */

  --ui:  "Pretendard Variable", Pretendard, "Apple SD Gothic Neo",
         "Malgun Gothic", system-ui, -apple-system, sans-serif;
  --num: "Cascadia Mono", Consolas, ui-monospace, "SF Mono", monospace;

  --ease: cubic-bezier(.2,.8,.25,1);
}

/* 기본값이 밤이므로 뒤집힙니다 — 낮 취향인 사람에게만 영업 시작 전의
   같은 유원지를 보여줍니다. 하늘색 바탕, 같은 간판 잉크. */
@media (prefers-color-scheme: light) {
  :root {
    --paper:#DCE7F0; --paper2:#C7D8E6; --glass:#05060A;
    --txt:#131A30; --dim:rgba(19,26,48,.78); --mute:rgba(19,26,48,.66);
    --hair:rgba(19,26,48,.18);
    --sink: inset 0 1px 4px rgba(19,26,48,.26);
    --lift: 0 12px 32px rgba(19,26,48,.24);
    --lamp: rgba(255,255,255,.5);
    --bulb:#B87200; --ticket:#D8323F;
  }
}
:root[data-theme="dark"] {
  --paper:#131A30; --paper2:#1E2745; --glass:#05060A;
  --txt:#F7F0E1; --dim:rgba(247,240,225,.74); --mute:rgba(247,240,225,.55);
  --hair:rgba(247,240,225,.16);
  --sink: inset 0 1px 4px rgba(0,0,0,.5);
  --lift: 0 14px 36px rgba(0,0,0,.55);
  --lamp: rgba(255,194,74,.16);
  --bulb:#FFC24A; --ticket:#FF5560;
}
/* 낮의 유원지 — 같은 곳의 영업 시작 전. 하늘색 바탕에 같은 간판 잉크. */
:root[data-theme="light"] {
  --paper:#DCE7F0; --paper2:#C7D8E6; --glass:#05060A;
  --txt:#131A30; --dim:rgba(19,26,48,.78); --mute:rgba(19,26,48,.66);
  --hair:rgba(19,26,48,.18);
  --sink: inset 0 1px 4px rgba(19,26,48,.26);
  --lift: 0 12px 32px rgba(19,26,48,.24);
  --lamp: rgba(255,255,255,.5);
  --bulb:#B87200; --ticket:#D8323F;
}

/* 종이 결.
   단색 한 값은 "색" 이지 "재질" 이 아니라서 비어 보입니다. feTurbulence
   노이즈를 채도 0 · 알파 5% 로 깔아 종이의 이빨을 만듭니다. 파일 없이
   data URI 하나이고, 160px 타일이라 비용이 사실상 없습니다.
   이 결은 벽·선반·막대에 전부 같이 깔아야 면이 이어져 보입니다. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.085'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* ⚠ 이 목록의 면들은 아래에서 background-color 로만 색을 칠해야 합니다.
   `background:` 단축 속성을 쓰면 background-image 가 none 으로 리셋되어
   결이 통째로 지워집니다. */
body, .bar, .rule, .read, .wall, .shelf {
  background-color: var(--paper);
  background-image: var(--grain);
  background-size: 160px 160px;
}

body {
  margin: 0; color: var(--txt);
  font-family: var(--ui); font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* 한글은 기본적으로 어디서나 줄이 끊겨서 "자유이용" / "권" 처럼 갈라집니다.
     keep-all 이 낱말을 지키고, 긴 라틴 문자열만 break-word 로 흘립니다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 제목은 줄 길이를 고르게, 본문은 외톨이 줄을 줄입니다. */
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: var(--bulb); color: #131A30; }

/* 들머리에는 위에서 빛이 떨어집니다. 스크롤하지 않는 면이라
   이음새 걱정 없이 이 한 곳에만 둡니다. */
.mast {
  background-image:
    radial-gradient(120% 78% at 50% -14%, var(--lamp), transparent 62%),
    var(--grain);
  background-size: auto, 160px 160px;
}
.lit, .strip__c, .read__p, .sheet__mr i { font-variant-numeric: tabular-nums; }

:where(button, a, input):focus-visible {
  outline: 2px solid var(--txt); outline-offset: 2px; border-radius: 1px;
}

/* ══════════  들머리  ══════════
   페이지가 툴바로 시작하면 정체성도, 숨 쉴 틈도, 시선이 처음 닿을 곳도
   없습니다. 여기서만 활자가 크게 서고 스크롤하면 사라집니다. */

/* 폭을 안 쓰고 왼쪽으로만 쌓으면 오른쪽이 통째로 빕니다.
   제목은 왼쪽, 사실 정보는 오른쪽 — 두 기둥이 폭을 잡아 줍니다. */
.mast {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(30px, 4.5vh, 52px) var(--s7);
  align-items: end;
  padding: clamp(60px, 10vh, 120px) var(--gut) clamp(38px, 6.5vh, 68px);
}
@media (min-width: 880px) { .mast { grid-template-columns: minmax(0,1fr) auto; } }

.mast__t {
  margin: 0 0 var(--s4);
  font-size: clamp(46px, 7.5vw, 96px); font-weight: 900;
  line-height: .96; letter-spacing: -.055em; color: var(--txt);
}

/* 입구에 걸린 전구줄. 이 모티프는 여기 한 번만 씁니다 — 여기저기 뿌리면
   그 순간 촌스러워집니다. */
.mast::after {
  content: ""; grid-column: 1 / -1;
  height: 7px; margin-top: clamp(28px, 4vh, 44px);
  background-image: radial-gradient(circle at 50% 50%, var(--bulb) 2.6px, transparent 3.1px);
  background-size: 24px 7px; background-repeat: repeat-x;
  opacity: .9;
}
.mast__d {
  margin: 0; max-width: 34ch;
  font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6;
  letter-spacing: -.018em; color: var(--dim);
}
.mast__d b { color: var(--txt); font-weight: 700; }

.mast__n {
  margin: 0; display: grid; gap: 0;
  grid-template-columns: repeat(2, auto);
}
@media (min-width: 880px) { .mast__n { grid-template-columns: auto; min-width: 210px; } }
.mast__n div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s5);
  padding: 9px 0; box-shadow: inset 0 -1px 0 var(--hair);
}
.mast__n div:first-child { box-shadow: inset 0 -1px 0 var(--hair), inset 0 1px 0 var(--hair); }
.mast__n dt { font-size: 12.5px; color: var(--mute); letter-spacing: -.01em; }
.mast__n dd {
  margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.02em;
  color: var(--txt); font-variant-numeric: tabular-nums;
}
@media (max-width: 879px) {
  .mast__n { column-gap: var(--s6); }
  .mast__n div:nth-child(2) { box-shadow: inset 0 -1px 0 var(--hair), inset 0 1px 0 var(--hair); }
}

/* ══════════  상단  ══════════ */

.bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--s5);
  height: 54px; padding: 0 var(--gut);
  background-color: var(--paper);}

/* 들머리의 큰 이름이 화면 밖으로 나가야 작은 이름이 나타납니다.
   판별이 안 되면 계속 보이는 쪽으로 떨어집니다. */
.bar__mark {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 700; letter-spacing: -.025em;
  white-space: nowrap; color: var(--txt); text-decoration: none;
  transition: opacity .2s var(--ease);
}
:root.at-top .bar__mark { opacity: 0; pointer-events: none; }
.bar__pip { width: 6px; height: 6px; flex: none; background: var(--txt); }

/* 채운 사각형 대신 밑줄 한 줄. 훨씬 가볍고 편집물처럼 읽힙니다. */
.seek {
  flex: 1 1 auto; min-width: 0; max-width: 380px;
  display: flex; align-items: center; gap: var(--s2);
  height: 34px; padding: 0 2px; color: var(--mute);
  box-shadow: inset 0 -1px 0 var(--hair);
  transition: box-shadow .16s var(--ease), color .16s;
}
.seek svg { width: 13px; height: 13px; flex: none; }
.seek:hover { box-shadow: inset 0 -1px 0 var(--dim); }
.seek:focus-within { color: var(--dim); box-shadow: inset 0 -2px 0 var(--txt); }
#q {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--txt);
  font-family: var(--ui); font-size: 13.5px; letter-spacing: -.015em;
}
#q::placeholder { color: var(--mute); }
#q::-webkit-search-cancel-button { -webkit-appearance: none; }

/* 채운 버튼 세 개가 나란히 있으면 툴바가 됩니다. 글자만 남기고 눌림은 밑줄로. */
.knobs { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
.knob {
  position: relative; border: 0; background: none; cursor: pointer; color: var(--mute);
  font-family: var(--ui); font-size: 13px; font-weight: 400; letter-spacing: -.015em;
  padding: 9px 2px; white-space: nowrap; transition: color .14s;
}
.knob::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 1px;
  background: currentColor; transform: scaleX(0); transition: transform .18s var(--ease);
}
.knob:hover { color: var(--dim); }
.knob[aria-pressed="true"], .knob[aria-expanded="true"] { color: var(--txt); }
.knob[aria-pressed="true"]::after, .knob[aria-expanded="true"]::after { transform: scaleX(1); }

/* 정렬 메뉴 */
.menu { position: relative; }
.menu__pop {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 80;
  display: flex; flex-direction: column; min-width: 140px; padding: var(--s1);
  background-color: var(--paper);   /* 단축 속성을 쓰면 결(background-image)이 지워집니다 */ box-shadow: var(--lift), 0 0 0 1px var(--hair);
}
.menu__item {
  border: 0; background: none; cursor: pointer; text-align: left;
  padding: 9px 12px; color: var(--dim);
  font-family: var(--ui); font-size: 13px; letter-spacing: -.01em;
  display: flex; align-items: center; gap: var(--s2);
  transition: color .12s, background .12s;
}
.menu__item::before {
  content: ""; width: 5px; height: 5px; flex: none;
  background: var(--txt); opacity: 0;
}
.menu__item:hover { color: var(--txt); background: var(--paper2); }
.menu__item[aria-checked="true"] { color: var(--txt); font-weight: 600; }
.menu__item[aria-checked="true"]::before { opacity: 1; }

/* ══════════  장르 줄  ══════════ */

/* 막대와 한 면으로 붙습니다. 둘 사이엔 선을 긋지 않고, 스티키 영역
   전체의 아래쪽에만 실선 하나를 둡니다. */
.rule {
  position: sticky; top: 54px; z-index: 59;
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--gut); height: 36px;
  background-color: var(--paper);  box-shadow: inset 0 -1px 0 var(--hair);
}

.inks { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.inks::-webkit-scrollbar { display: none; }

.ink {
  position: relative; flex: none;
  border: 0; background: none; cursor: pointer;
  padding: 10px 12px 11px; color: var(--mute);
  font-family: var(--ui); font-size: 13px; font-weight: 500; letter-spacing: -.01em;
  transition: color .14s;
}
/* 잉크색은 켜진 장르에만, 평면 밑줄로. 글로우 없음. */
.ink::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px;
  background: var(--dot); transform: scaleX(0);
  transition: transform .2s var(--ease);
}
.ink:hover { color: var(--dim); }
.ink[aria-pressed="true"] { color: var(--txt); font-weight: 600; }
.ink[aria-pressed="true"]::after { transform: scaleX(1); }

.lit {
  margin: 0 0 0 auto; flex: none;
  font-family: var(--num); font-size: 11px; color: var(--mute); white-space: nowrap;
  opacity: 0; transition: opacity .18s;
}
.lit.on { opacity: 1; }
.lit b { color: var(--txt); font-weight: 400; }

/* ══════════  지도  ══════════ */

/* 보기 전환 — 이 페이지의 주된 선택이라 무게를 줍니다. 다만 앰버 덩어리는
   나머지 조용한 크롬과 안 어울려서, 켜진 쪽만 글자색을 뒤집는 정도로. */
.views {
  display: flex; margin-right: var(--s3);
  background: var(--paper2); padding: 2px; border-radius: 3px;
}
.view {
  border: 0; cursor: pointer; padding: 6px 14px; border-radius: 2px;
  background: none; color: var(--mute);
  font-family: var(--ui); font-size: 12.5px; font-weight: 600; letter-spacing: -.02em;
  transition: background .16s var(--ease), color .16s;
}
.view:hover { color: var(--dim); }
.view[aria-pressed="true"] { background: var(--txt); color: var(--paper); }

/* --head 는 app.js 가 실제 고정 머리(막대+장르줄) 높이를 재서 넣습니다.
   모바일에서 막대가 줄바꿈되면 상수로는 절대 못 맞춥니다. */
.park { position: relative; height: calc(100dvh - var(--head, 94px) - 48px); min-height: 380px; }
#parkCv { display: block; width: 100%; height: 100%; outline: 0; touch-action: none; cursor: pointer; }
#parkCv:focus-visible { box-shadow: inset 0 0 0 2px var(--bulb); }
.park__hint {
  position: absolute; left: var(--gut); bottom: var(--s4); margin: 0; pointer-events: none;
  font-size: 12px; color: var(--mute); letter-spacing: -.01em;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  padding: 6px 10px;
}
.park__hint b { color: var(--txt); font-weight: 700; }

/* 터치 조작 — 방향키도 Enter 도 없는 기기용 */
/* 화면에 고정합니다. 지도 상자에 붙여 두면 스크롤 위치에 따라 손이 닿지
   않는 곳으로 밀려납니다. .park 가 hidden 이면 같이 사라집니다. */
.pad {
  position: fixed; z-index: 40;
  left: var(--s4); bottom: calc(64px + env(safe-area-inset-bottom));
  width: 116px; height: 116px; border-radius: 50%;
  background: color-mix(in srgb, var(--paper2) 76%, transparent);
  box-shadow: inset 0 0 0 1px var(--hair);
  display: grid; place-items: center;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.pad__knob {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--bulb); box-shadow: 0 2px 10px rgba(0,0,0,.4);
  pointer-events: none; transition: transform .06s linear;
}
.ridebtn {
  position: fixed; right: var(--s4); bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 40;
  max-width: 52%; border: 0; cursor: pointer;
  padding: 15px 22px; background: var(--bulb); color: #131A30;
  font-family: var(--ui); font-size: 15px; font-weight: 800; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.ridebtn:active { transform: translateY(1px); }

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

/* ══════════  벽  ══════════ */

.wall { position: relative; background-color: var(--paper);   /* 단축 속성을 쓰면 결(background-image)이 지워집니다 */ padding-bottom: var(--s7); }

.fatal { padding: 110px 20px; text-align: center; color: var(--dim); line-height: 1.9; }
.fatal code { display: inline-block; margin-top: var(--s2); font-family: var(--num); font-size: 12px; }

/* 벽면 라벨 */
.strip {
  display: flex; align-items: baseline; gap: var(--s4);
  padding: clamp(44px, 6vh, 76px) var(--gut) var(--s4);
}
/* 구역 간판 — 에나멜 판. 색은 games.json 의 sections[].ink 에서 옵니다.
   판 위에는 항상 어두운 글자가 올라가므로 잉크를 어둡게 잡으면 안 됩니다. */
.strip__n {
  margin: 0; flex: none;
  font-size: 17px; font-weight: 800; letter-spacing: -.03em;
  background: var(--zone, var(--txt)); color: #131A30;
  padding: 5px 11px 6px;
}
.strip__r { flex: 1 1 auto; height: 1px; min-width: var(--s4); background: var(--hair); align-self: center; }
.strip__m { flex: none; font-size: 12.5px; color: var(--mute); letter-spacing: -.01em; }
.strip__c { flex: none; font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; }

/* 틈이 벽 색입니다. 빈 칸은 그냥 빈 벽이 됩니다. */
.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cell), 1fr));
  grid-auto-flow: row dense;
  gap: var(--mullion);
  padding: 0 var(--gut);
  background-color: var(--paper);}

/* 놀이기구 = 밤하늘에 박힌 화면 */
.tile {
  position: relative; display: block; height: var(--rowh);
  background: var(--glass); overflow: hidden; text-decoration: none;
  /* <a> 라서 색을 안 주면 브라우저 기본 링크색(다크에서 연보라)을 물고,
     currentColor 를 쓰는 순간 엉뚱한 색이 새어 나옵니다. */
  color: var(--txt);
  box-shadow: var(--sink);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.tile canvas {
  display: block; width: 100%; height: 100%;
  image-rendering: pixelated;
  transition: opacity .22s var(--ease), filter .18s;
}
/* 유리 한 겹. 주사선 아님. */
.tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.07), transparent 42%);
}
.tile:hover, .tile:focus-visible {
  transform: scale(1.09); z-index: 30; outline: 0;
  box-shadow: var(--lift);
}
.tile:hover canvas, .tile:focus-visible canvas { filter: brightness(1.25) saturate(1.1); }

.tile__t {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 18px 11px 9px;
  font-size: 13px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.9) 18%, transparent);
  opacity: 0; transform: translateY(4px); transition: opacity .13s, transform .13s var(--ease);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile:hover .tile__t, .tile:focus-visible .tile__t { opacity: 1; transform: none; }

/* 유료 = 포일 광택 */
/* 별도 요금 = 화면 왼쪽 위에 붉은 표 딱지. 홀로그램 광택은 유원지 어법이
   아니라 걷어냈고, 대신 정지 상태에서도 안 사라지는 표시를 씁니다. */
.tile--foil::before {
  content: ""; position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none;
  border-width: 15px 15px 0 0; border-style: solid;
  border-color: var(--ticket) transparent transparent transparent;
}
.wall.is-tight .tile--foil::before { border-width: 10px 10px 0 0; }

.tile--wide { grid-column: span 2; }

/* 거르면 작품이 내려가고 빈 액자만 남습니다. 자리는 그대로. */
.tile[data-hit="0"] {
  pointer-events: none;
  background: var(--paper2); box-shadow: inset 0 0 0 1px var(--hair);
}
.tile[data-hit="0"] canvas { opacity: 0; }
/* 빈 액자 위에 제목이 남아 있으면 안 됩니다 (터치의 읽기 띠 포함) */
.tile[data-hit="0"] .tile__t { opacity: 0; }
.tile[data-hit="0"]::before { opacity: 0; animation: none; }
.tile[data-hit="0"]::after { background: none; }

.wall.is-mid   { --cell: 218px; --rowh: 146px; --mullion: 3px; }
.wall.is-mid  .tile__t { font-size: 15px; }
.wall.is-tight { --cell: 104px; --rowh: 72px; --mullion: 1px; }
.wall.is-tight .tile__t { font-size: 11px; padding: 13px 7px 6px; }

/* ══════════  벽면 명제표  ══════════ */

.read {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: center; gap: var(--s3);
  height: 48px; padding: 0 var(--gut);
  background-color: var(--paper);  box-shadow: inset 0 1px 0 var(--hair);
}
/* 장르 견본 — 발광하지 않는 납작한 사각형 */
.read__sw {
  width: 9px; height: 9px; flex: none;
  background: var(--hair); transition: background .18s;
}
.read.is-on .read__sw { background: var(--dot); }

.read__t {
  flex: none; max-width: 32%;
  font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.read__g { flex: none; font-size: 12.5px; color: var(--dim); letter-spacing: -.01em; }
.read__d {
  flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--dim); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-left: var(--s3); box-shadow: inset 1px 0 0 var(--hair);
}
/* 가격 자리에는 "₩4,500" 도 "무료" 도 들어옵니다. 모노를 걸면 한글이
   폴백되므로, 본문 서체에 자릿수 고정만 얹습니다. */
.read__p {
  flex: none; margin-left: auto; padding: 5px 11px;
  font-family: var(--ui); font-size: 12px; letter-spacing: -.01em;
}
/* 표. 자유이용권은 점선으로 절취선을 흉내내고, 별도 요금은 붉은 표입니다. */
.read__p[data-free="1"] {
  color: var(--dim); box-shadow: inset 0 0 0 1px var(--hair);
  border-left: 2px dashed var(--hair); border-right: 2px dashed var(--hair);
}
.read__p[data-free="0"] { color: #FFF6F0; font-weight: 700; background: var(--ticket); }
.read.is-idle .read__t { font-size: 13px; font-weight: 400; color: var(--mute); }
.read.is-idle .read__d, .read.is-idle .read__g, .read.is-idle .read__p { display: none; }

/* ══════════  상세  ══════════ */

.sheet__wrap {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center; padding: var(--s5);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(8px);
  overflow-y: auto;
}
.sheet__wrap.on { display: flex; animation: fade .16s; }
@keyframes fade { from { opacity: 0; } }

.sheet {
  position: relative; width: min(560px, 100%);
  background-color: var(--paper);   /* 단축 속성을 쓰면 결(background-image)이 지워집니다 */ box-shadow: var(--lift), 0 0 0 1px var(--hair);
  animation: rise .24s var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.985); } }

.sheet__x {
  position: absolute; top: var(--s3); right: var(--s3); z-index: 3;
  width: 30px; height: 30px; cursor: pointer; border: 0;
  background: rgba(8,8,11,.5); color: #fff; font-size: 12px; line-height: 1;
  transition: background .14s, color .14s;
}
.sheet__x:hover { background: #fff; color: #000; }

.sheet__scr { position: relative; background: var(--glass); aspect-ratio: 16 / 9; overflow: hidden; }
.sheet__scr canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.sheet__scr::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.06), transparent 38%);
}

.sheet__b { padding: var(--s5) var(--s6) var(--s6); }
.sheet__meta {
  margin: 0 0 var(--s2);
  display: flex; align-items: center; gap: var(--s2);
  font-size: 12.5px; color: var(--mute); letter-spacing: -.01em;
}
/* 장르색을 글자에 쓰면 중간 톤 벽 위에서 안 읽힙니다 (라임은 1.5:1).
   색은 견본 사각형이 맡고, 글자는 본문색으로 둡니다. */
.sheet__sw {
  width: 8px; height: 8px; flex: none; background: var(--dot);
  display: inline-block; margin-right: 2px;
}
.sheet__meta b { color: var(--dim); font-weight: 600; }
.sheet__meta span { color: var(--hair); }
.sheet h2 {
  margin: 0 0 var(--s3);
  font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -.035em;
}
.sheet__d { margin: 0 0 var(--s5); font-size: 15px; line-height: 1.65; color: var(--dim); max-width: 38ch; }
.sheet__by {
  margin: -6px 0 var(--s4);
  font-size: 13px; color: var(--mute); letter-spacing: -.01em;
}
.sheet__by a { color: var(--dim); text-decoration: none; }
.sheet__by a:hover { color: var(--txt); box-shadow: inset 0 -1px 0 var(--hair); }

.sheet__act { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.pbtn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  padding: 13px 26px; background: var(--txt); color: var(--paper);
  font-family: var(--ui); font-size: 14.5px; font-weight: 700; letter-spacing: -.02em;
  transition: opacity .14s, transform .14s var(--ease);
}
.pbtn:hover { opacity: .84; transform: translateY(-1px); }
.pbtn--buy { background: var(--ticket); color: #FFF6F0; }
.pbtn--out {
  background: transparent; color: var(--txt);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.pbtn--out:hover { box-shadow: inset 0 0 0 1px var(--txt); }
.pbtn--ghost {
  background: transparent; color: var(--dim); padding: 13px 16px;
}
.pbtn__note { font-size: 12.5px; color: var(--mute); line-height: 1.5; letter-spacing: -.01em; }

.sheet__wip {
  margin: var(--s5) 0 0; padding: var(--s3) var(--s4);
  background: var(--paper2); font-size: 13px; line-height: 1.6; color: var(--dim);
}
.sheet__wip code { font-family: var(--num); font-size: 11.5px; color: var(--txt); }

.sheet__more { margin-top: var(--s6); padding-top: var(--s4); box-shadow: inset 0 1px 0 var(--hair); }
.sheet__ml { margin: 0 0 var(--s3); font-size: 12.5px; color: var(--mute); letter-spacing: -.01em; }
.sheet__mr { display: flex; flex-wrap: wrap; gap: var(--s1); }
.sheet__mr a {
  display: flex; align-items: baseline; gap: var(--s2);
  padding: 9px 13px; background: var(--paper2); text-decoration: none;
  color: var(--dim); font-size: 13.5px; letter-spacing: -.01em;
  transition: color .14s, box-shadow .14s;
}
.sheet__mr a i { font-style: normal; font-size: 11.5px; color: var(--mute); letter-spacing: -.01em; }
.sheet__mr a:hover { color: var(--txt); box-shadow: inset 0 -2px 0 var(--dot); }

/* ══════════  터치 — 스크롤이 hover 를 대신합니다  ══════════
   화면 한가운데 띠에 들어온 타일만 제목이 켜집니다. 상시 노출하면
   "타일 위엔 아무것도 없다" 는 전제가 무너지고 밀도도 잃습니다. */

@media (hover: none) {
  .tile.is-read .tile__t { opacity: 1; transform: none; }
  .tile.is-read canvas { filter: brightness(1.2) saturate(1.06); }

  /* 탭 뒤에 :hover 가 눌어붙는 것을 막습니다 */
  .tile:hover { transform: none; box-shadow: var(--sink); }
  .tile:hover canvas { filter: none; }
  .tile:hover .tile__t { opacity: 0; transform: translateY(4px); }
  .tile.is-read:hover canvas { filter: brightness(1.2) saturate(1.06); }
  .tile.is-read:hover .tile__t { opacity: 1; transform: none; }

  .knob:hover, .ink:hover { background: none; color: var(--dim); }
  .pbtn:hover { opacity: 1; transform: none; }
  .sheet__mr a:hover { color: var(--dim); box-shadow: none; }
}

/* iOS 홈 인디케이터 아래로 명제표가 잘리지 않게 */
.read { padding-bottom: env(safe-area-inset-bottom); height: calc(48px + env(safe-area-inset-bottom)); }
.wall { padding-bottom: calc(var(--s7) + env(safe-area-inset-bottom)); }

/* ══════════  줄임 · 좁은 화면  ══════════ */

@media (prefers-reduced-motion: reduce) {
  .tile, .tile canvas, .tile__t, .ink::after, .pbtn, .lit { transition-duration: .01ms; }
  .tile:hover, .tile:focus-visible, .pbtn:hover { transform: none; }
  .sheet, .sheet__wrap.on { animation: none; }
}

@media (max-width: 900px) {
  :root { --gut: var(--s5); }
}
@media (max-width: 720px) {
  :root { --cell: 108px; --rowh: 74px; --gut: var(--s3); }
  .mast { padding-top: clamp(40px, 7vh, 64px); }
  .mast__n { gap: var(--s5); }
  .bar { height: auto; flex-wrap: wrap; padding-block: var(--s2); gap: var(--s2); }
  :root.v-park .bar { height: auto; }
  .seek { order: 3; flex-basis: 100%; max-width: none; }
  .rule { position: static; }
  .strip { padding-top: var(--s6); }
  .read__d, .read__g { display: none; }
  .read__t { max-width: 58%; }
  .sheet__wrap { padding: 0; align-items: flex-end; }
  .sheet { width: 100%; max-height: 94vh; overflow-y: auto; }
  .sheet__b { padding: var(--s4) var(--s4) var(--s5); }
  .sheet h2 { font-size: 25px; }
}

/* ─────────────────────────────────────────────────────────
   내 캐릭터 고르기
   ───────────────────────────────────────────────────────── */

.dress { width: min(720px, 100%); }

.dress__top { display: grid; grid-template-columns: 260px 1fr; }
@media (max-width: 640px) {
  .dress__top { grid-template-columns: 1fr; }
}

/* 미리보기 — 공원 바닥과 같은 밤색으로 둡니다. 테마가 낮이어도
   여기만 밤인 게 맞습니다. 캐릭터는 공원에 서니까요. */
.dress__view {
  position: relative; background-color: #131A30;
  border-right: 1px solid var(--hair);
  min-height: 300px;
}
@media (max-width: 640px) {
  .dress__view { border-right: 0; border-bottom: 1px solid var(--hair); min-height: 240px; }
}
#dressBig { display: block; width: 100%; height: 300px; }
@media (max-width: 640px) { #dressBig { height: 240px; } }

/* 큰 미리보기가 가운데 서 있으므로 위쪽 구석으로. 아래에 두면 다리를 가립니다. */
.dress__mini {
  position: absolute; left: var(--s3); top: var(--s3);
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3) var(--s2) var(--s2);
  background: rgba(11,18,32,.72); box-shadow: 0 0 0 1px rgba(247,240,225,.12);
}
.dress__mini canvas { display: block; width: 46px; height: 58px; }
.dress__mini span {
  font-family: var(--ui); font-size: 10px; line-height: 1.35;
  color: rgba(247,240,225,.5); max-width: 62px; word-break: keep-all;
}

.dress__pick { padding: var(--s5); }
.dress__h {
  margin: 0 0 var(--s4); font-family: var(--ui);
  font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--txt);
}

.dress__row { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s3); }
.dress__lab {
  flex: none; width: 48px; padding-top: 5px;
  font-family: var(--ui); font-size: 12px; color: var(--mute); word-break: keep-all;
}
.dress__opts { display: flex; flex-wrap: wrap; gap: var(--s1); }

.dress__opt {
  border: 0; cursor: pointer; padding: 5px 10px;
  background-color: transparent; box-shadow: inset 0 0 0 1px var(--hair);
  font-family: var(--ui); font-size: 12px; letter-spacing: -.01em;
  color: var(--mute); transition: color .14s, box-shadow .14s;
}
.dress__opt:hover { color: var(--dim); box-shadow: inset 0 0 0 1px var(--dim); }
.dress__opt[aria-pressed="true"] {
  color: #131A30; background-color: var(--bulb); box-shadow: none; font-weight: 600;
}

/* 색 견본 — 글자가 아니라 색 자체가 라벨입니다 */
.dress__sw {
  width: 22px; height: 22px; border: 0; cursor: pointer; padding: 0;
  background-color: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  transition: transform .12s var(--ease), box-shadow .12s;
}
.dress__sw:hover { transform: scale(1.12); }
.dress__sw[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 0 0 2px var(--paper), 0 0 0 3px var(--bulb);
}

.dress__note {
  margin: var(--s4) 0 0; font-family: var(--ui); font-size: 11px; color: var(--mute);
}

/* ─────────────────────────────────────────────────────────
   내 프로필 — 미니홈피
   싸이월드의 핵심은 화려함이 아니라 「이건 내 자리다」입니다.
   방문 수 · 함께한 날 · 한 줄 상태글 · 내 아바타, 이 넷이 그걸 만듭니다.
   ───────────────────────────────────────────────────────── */

.mini { width: min(760px, 100%); background-color: var(--paper); }
.mini__top {
  padding: var(--s3) var(--s5);
  background: linear-gradient(135deg, var(--c1), var(--c2));
  border-bottom: 1px solid var(--hair);
}
.mini__hits {
  margin: 0; font-family: var(--ui); font-size: 11px; letter-spacing: .02em;
  color: rgba(255,255,255,.62);
}
.mini__hits b { color: var(--bulb); font-weight: 600; }

.mini__grid { display: grid; grid-template-columns: 232px 1fr; }
@media (max-width: 640px) { .mini__grid { grid-template-columns: 1fr; } }

.mini__me {
  padding: var(--s4); border-right: 1px solid var(--hair);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c2) 55%, transparent), transparent 70%);
}
@media (max-width: 640px) { .mini__me { border-right: 0; border-bottom: 1px solid var(--hair); } }

/* 사진과 아바타를 겹쳐 둡니다 — 사진 앞에 내 캐릭터가 서 있는 모양 */
.mini__photo {
  position: relative; width: 200px; height: 200px; margin: 0 auto;
  background-color: #131A30; overflow: hidden;
}
.mini__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini__photo canvas {
  position: absolute; right: -6px; bottom: 0; width: 96px; height: 128px;
  pointer-events: none;
}
.mini__empty {
  display: grid; place-items: center; height: 100%;
  font-family: var(--ui); font-size: 12px; line-height: 1.5; color: var(--mute);
  text-align: center;
}
.mini__photo--polaroid {
  border: 8px solid #F7F0E1; border-bottom-width: 28px;
  box-shadow: 0 6px 18px rgba(0,0,0,.4); transform: rotate(-1.4deg);
}
.mini__photo--round { border-radius: 50%; box-shadow: 0 0 0 3px var(--bulb); }
.mini__photo--heart {
  /* 하트는 clip-path 로. 테두리는 못 주지만 실루엣이 확실합니다 */
  clip-path: path("M100 186C40 140 8 108 8 72 8 40 32 18 58 18c16 0 32 8 42 24 10-16 26-24 42-24 26 0 50 22 50 54 0 36-32 68-92 114z");
}
.mini__photo--none { border: 1px solid var(--hair); }

.mini__ctl { display: flex; gap: var(--s3); justify-content: center; margin-top: var(--s3); }
.mini__file, .mini__lnk {
  border: 0; background: none; cursor: pointer; padding: 2px 0;
  font-family: var(--ui); font-size: 11px; color: var(--mute);
  border-bottom: 1px dotted currentColor; transition: color .14s;
}
.mini__file:hover, .mini__lnk:hover { color: var(--txt); }

.mini__side { padding: var(--s5); min-width: 0; }
.mini__name {
  width: 100%; border: 0; background: none; padding: 0 0 2px;
  font-family: var(--ui); font-size: 21px; font-weight: 700; letter-spacing: -.02em;
  color: var(--txt); border-bottom: 1px solid transparent; transition: border-color .14s;
}
.mini__name:hover, .mini__name:focus { border-bottom-color: var(--hair); outline: none; }
.mini__mood { display: flex; align-items: baseline; gap: 2px; margin-top: var(--s1); }
.mini__mood span { color: var(--bulb); font-size: 15px; }
.mini__mood input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 2px 0;
  font-family: var(--ui); font-size: 13px; color: var(--dim);
  border-bottom: 1px solid transparent;
}
.mini__mood input:hover, .mini__mood input:focus { border-bottom-color: var(--hair); outline: none; }

.mini__nums {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3);
  margin: var(--s4) 0; padding: var(--s3) 0;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.mini__nums dt { font-family: var(--ui); font-size: 10px; color: var(--mute); }
.mini__nums dd {
  margin: 2px 0 0; font-family: var(--num); font-size: 17px; color: var(--txt);
}
.mini__nums dd i { font-style: normal; font-size: 11px; color: var(--mute); margin-left: 1px; }

.mini__box + .mini__box { margin-top: var(--s4); }
.mini__box h3 {
  margin: 0 0 var(--s2); font-family: var(--ui); font-size: 12px; font-weight: 600;
  color: var(--dim);
}
.mini__list { list-style: none; margin: 0; padding: 0; }
.mini__list li {
  display: flex; align-items: center; gap: var(--s2);
  padding: 5px 0; border-bottom: 1px dotted var(--hair);
  font-family: var(--ui); font-size: 12px;
}
.mini__list li:last-child { border-bottom: 0; }
.mini__list i {
  flex: none; width: 6px; height: 6px; background: var(--dot); border-radius: 50%;
}
.mini__list a { color: var(--txt); text-decoration: none; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini__list a:hover { text-decoration: underline; }
.mini__list b { font-family: var(--num); font-weight: 400; color: var(--dim); }
.mini__list span { color: var(--mute); font-size: 11px; }
.mini__list--thin li { padding: 3px 0; }
.mini__none { margin: 0; font-family: var(--ui); font-size: 12px; color: var(--mute); }
.mini__note {
  margin: 0; padding: var(--s3) var(--s5); border-top: 1px solid var(--hair);
  font-family: var(--ui); font-size: 11px; color: var(--mute);
}

.tile__tag {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  font-style: normal; font-size: 10px; letter-spacing: -.01em;
  color: var(--paper); background: rgba(8,11,22,.72);
  padding: 2px 6px; border-radius: 999px;
}

.booth { width: min(520px, 100%); }
.booth__b { padding: var(--s5) var(--s6) var(--s6); }
.booth h2 { margin: 0 0 var(--s4); }
.booth__tabs { display: flex; gap: var(--s2); margin: 0 0 var(--s4); }
.booth__tab {
  border: 0; cursor: pointer; background: transparent;
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  color: var(--mute); padding: 6px 12px; border-radius: 999px;
}
.booth__tab[aria-selected="true"] { color: var(--txt); background: var(--paper2); }
.booth__empty { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mute); }
.booth__list { list-style: none; margin: 0; padding: 0; }
.booth__list li {
  display: flex; align-items: center; gap: var(--s2);
  padding: 8px 0; box-shadow: inset 0 -1px 0 var(--hair);
}
.booth__list li:last-child { box-shadow: none; }
.booth__go {
  flex: 1; min-width: 0; text-align: left; border: 0; cursor: pointer;
  background: transparent; font-family: var(--ui); padding: 0;
}
.booth__go b { display: block; font-size: 15px; color: var(--txt); letter-spacing: -.02em; }
.booth__go i { display: block; font-style: normal; font-size: 12px; color: var(--mute); margin-top: 2px; }
.booth__to {
  flex: none; border: 0; cursor: pointer;
  background: transparent; color: var(--dim);
  font-family: var(--ui); font-size: 12px; padding: 6px 8px;
}
.booth__to:hover { color: var(--txt); }
.booth__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 520px) { .booth__row { grid-template-columns: 1fr; } }
.booth__f {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0 0 var(--s3); font-size: 12px; color: var(--mute);
}
.booth__f input, .booth__f select {
  font-family: var(--ui); font-size: 14px; color: var(--txt);
  background: var(--paper2); border: 0; box-shadow: inset 0 0 0 1px var(--hair);
  padding: 9px 10px; width: 100%;
}
.booth__f input:focus, .booth__f select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--txt); }
.booth__note { margin: 0 0 var(--s4); font-size: 12.5px; line-height: 1.55; color: var(--mute); }

:root.v-park .booth { background-color: #141A2C; color: #EDF1FA; box-shadow: var(--lift), 0 0 0 1px rgba(255,255,255,.1); }
:root.v-park .booth__tab[aria-selected="true"] { background: rgba(255,255,255,.08); color: #EDF1FA; }
:root.v-park .booth__f input, :root.v-park .booth__f select {
  background: rgba(8,11,22,.55); color: #EDF1FA; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

/* ══════════════════════════════════════════════════════════
   지도 안의 크롬 — 게임 화면처럼
   ══════════════════════════════════════════════════════════

   지도를 보는 동안은 크롬도 공원 안입니다. app.js 가 :root 에 .v-park 를
   붙이고, 여기서 색과 모양을 통째로 갈아입힙니다. 목록으로 돌아가면 원래
   편집물 크롬이 그대로 돌아옵니다 — 두 화면은 성격이 다르니 옷도 다릅니다.

   왜 색까지 뒤집나: OS 가 밝은 테마면 밤 공원 위에 흰 막대가 얹힙니다.
   그러면 「게임」이 아니라 「웹사이트에 그림이 하나 있는 것」으로 보입니다.
   지도는 언제나 밤이므로 크롬도 밤이어야 합니다. */

:root.v-park {
  --paper:  #0F1729;
  --paper2: #1B2440;
  --txt:    #F7F0E1;
  --dim:    rgba(247,240,225,.72);
  --mute:   rgba(247,240,225,.50);
  --hair:   rgba(247,240,225,.13);
  --bulb:   #FFC24A;
  --ticket: #FF5560;
  --lift:   0 18px 44px rgba(0,0,0,.62);
  --lamp:   rgba(255,194,74,.16);
  color-scheme: dark;
}

/* 위 두 줄(막대·장르줄)은 화면을 두르는 틀입니다. 유리처럼 비치게 두고
   아래에 따뜻한 실선을 한 줄 깝니다. */
:root.v-park .bar,
:root.v-park .rule {
  background-color: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: none;
}
:root.v-park .bar { height: 48px; box-shadow: inset 0 -1px 0 rgba(247,240,225,.07); }
:root.v-park .bar__mark { opacity: 1 !important; pointer-events: auto; }
:root.v-park .rule { height: 34px; top: 48px; }

/* 장르줄 아래에 걸린 전구줄. 공원 안 전구와 같은 것이 크롬에도 걸립니다 —
   이 한 줄이 「사이트 머리」를 「간판」으로 바꿉니다. */
:root.v-park .rule::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  /* 원 중심을 타일 한가운데 두어야 전구가 온전히 보입니다. 위쪽(50% 0)에
     두면 아래 반쪽만 나와서 그냥 흐린 줄로 보입니다. */
  background-image: radial-gradient(circle at 50% 50%, var(--bulb) 0 1.4px, transparent 2px);
  background-size: 24px 5px;
  opacity: .62; pointer-events: none;
}

/* 이름 — 전구 하나가 붙어 있고 실제로 켜져 있습니다 */
:root.v-park .bar__mark { color: var(--txt); }
:root.v-park .bar__pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bulb); box-shadow: 0 0 8px rgba(255,194,74,.75);
}

/* 찾는 곳 — 매표소 창구처럼 둥글고 안으로 파입니다 */
:root.v-park .seek {
  height: 34px; padding: 0 13px; border-radius: 999px;
  background-color: rgba(255,255,255,.055);
  box-shadow: inset 0 0 0 1px var(--hair);
}
:root.v-park .seek:hover { background-color: rgba(255,255,255,.08); }
:root.v-park .seek:focus-within {
  color: var(--dim);
  background-color: rgba(255,255,255,.09);
  box-shadow: inset 0 0 0 1px rgba(255,194,74,.5), 0 0 0 3px rgba(255,194,74,.11);
}

/* 보기 전환 — 켜진 쪽에 전구색을 줍니다. 지금 어느 화면인지가 이 막대에서
   가장 중요한 정보라 여기에만 색을 씁니다. */
:root.v-park .views {
  background-color: rgba(255,255,255,.06); border-radius: 999px; padding: 3px;
  box-shadow: inset 0 0 0 1px var(--hair);
}
:root.v-park .view { border-radius: 999px; padding: 6px 15px; }
:root.v-park .view[aria-pressed="true"] {
  background-color: var(--bulb); color: #10182B;
  box-shadow: 0 0 14px rgba(255,194,74,.28);
}

/* 나머지 단추 — 밑줄 대신 알약. 밑줄은 편집물 어법이라 게임 화면에서 뜹니다. */
:root.v-park .knob { border-radius: 999px; padding: 7px 12px; }
:root.v-park .knob::after { display: none; }
:root.v-park .knob:hover { color: var(--txt); background-color: rgba(255,255,255,.07); }
:root.v-park .knob[aria-pressed="true"] {
  color: var(--bulb); background-color: rgba(255,194,74,.13);
  box-shadow: inset 0 0 0 1px rgba(255,194,74,.3);
}

/* 장르 — 각자의 잉크를 단 표 */
:root.v-park .ink {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 999px; padding: 6px 13px 6px 10px; margin-right: 2px;
}
:root.v-park .ink::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--dot); opacity: .5; transition: opacity .16s, box-shadow .16s;
}
:root.v-park .ink::after { display: none; }
:root.v-park .ink:hover { background-color: rgba(255,255,255,.06); }
:root.v-park .ink:hover::before { opacity: .85; }
:root.v-park .ink[aria-pressed="true"] {
  color: var(--txt);
  background-color: color-mix(in srgb, var(--dot) 17%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dot) 46%, transparent);
}
:root.v-park .ink[aria-pressed="true"]::before {
  opacity: 1; box-shadow: 0 0 7px var(--dot);
}
:root.v-park .lit { font-size: 11px; letter-spacing: .02em; }
:root.v-park .inks {
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 22px), transparent);
}
:root.v-park .menu__pop {
  border-radius: 12px; padding: 6px;
  background-color: #141C30;
  box-shadow: 0 16px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(247,240,225,.12);
}
:root.v-park .menu__item { border-radius: 8px; }
:root.v-park .menu__item:hover { background: rgba(255,255,255,.06); }
:root.v-park .menu__item[aria-checked="true"] { color: var(--bulb); }

/* 지도는 아래 띠 밑까지 내려갑니다 — 띠가 화면 위에 뜬 계기판이 되게.
   그래서 배율·좌표를 재는 쪽(park.js size())도 자동으로 넓은 값을 받습니다. */
:root.v-park .park { height: calc(100dvh - var(--head, 94px)); }
/* 손잡이가 나오는 기기에서는 왼쪽 아래가 이미 손잡이 자리입니다.
   안내문을 그대로 두면 손잡이 밑에 깔립니다 — 위로 올립니다. */
:root.v-park.no-hover .park__hint { top: var(--s3); bottom: auto; }
:root.v-park .park__hint {
  bottom: calc(48px + var(--s3) + env(safe-area-inset-bottom));
  border-radius: 999px; padding: 7px 14px;
  background-color: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--dim);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
:root.v-park .park__hint b { color: var(--bulb); }
:root.v-park .park__hint.is-away {
  opacity: 0; transform: translateY(6px); pointer-events: none;
}

:root.v-park .ridebtn {
  left: 50%; right: auto;
  bottom: calc(56px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  border-radius: 999px; padding: 12px 26px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,194,74,.28);
}
:root.v-park .ridebtn:active { transform: translateX(-50%) translateY(1px); }

/* ══════════  아래 띠 — 계기판  ══════════ */

:root.v-park .read {
  background-color: color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(247,240,225,.08);
}
/* 초점이 간 기구가 있으면 그 장르 잉크가 왼쪽에 그어집니다 */
:root.v-park .read.is-on { box-shadow: inset 0 1px 0 rgba(247,240,225,.08), inset 3px 0 0 var(--dot); }
:root.v-park .read__sw { border-radius: 50%; }
:root.v-park .read.is-on .read__sw { box-shadow: 0 0 8px var(--dot); }

/* 아무것도 안 보고 있을 때의 요약 — 숫자를 세는 계기판으로 */
.hud { display: inline-flex; align-items: baseline; gap: 6px; margin-right: 15px; }
.hud em {
  font-style: normal; font-size: 11px; color: var(--mute); letter-spacing: -.01em;
}
.hud b {
  font-family: var(--num); font-size: 13px; font-weight: 500; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
:root.v-park .hud--total b { color: var(--txt); }
:root.v-park .hud--free  b { color: var(--bulb); }
:root.v-park .hud--paid  b { color: var(--ticket); }
:root.v-park .read.is-idle .read__t { font-size: inherit; }
@media (max-width: 560px) { .hud { margin-right: 11px; } .hud em { font-size: 10px; } }

/* ══════════════════════════════════════════════════════════
   오른쪽 아래 채팅
   ══════════════════════════════════════════════════════════

   공원 안에 걸린 안내판처럼 보이게 했습니다 — 전구가 하나 켜져 있고,
   접으면 간판만 남습니다. 말은 말풍선으로 나눕니다: 남의 말은 왼쪽,
   내 말은 오른쪽에 전구색으로. 이름 색은 이름에서 뽑기 때문에 같은
   사람은 늘 같은 색입니다(chat.js `hue()`).

   테마를 안 가립니다. 지도든 목록이든 채팅은 늘 밤색입니다 — 여기만
   공원에서 떼어 오면 붕 뜹니다. */

.chat {
  position: fixed; right: var(--s4); bottom: calc(48px + var(--s3) + env(safe-area-inset-bottom));
  z-index: 85;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2);
  --ch-bg:   #101828;
  --ch-bg2:  #18223A;
  --ch-txt:  #F7F0E1;
  --ch-dim:  rgba(247,240,225,.74);
  --ch-mute: rgba(247,240,225,.46);
  --ch-hair: rgba(247,240,225,.12);
}

/* ── 접었을 때: 간판 하나 ── */
.chat__tab {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; cursor: pointer; padding: 10px 16px 10px 13px; border-radius: 999px;
  background-color: var(--ch-bg); color: var(--ch-dim);
  box-shadow: 0 12px 30px rgba(0,0,0,.5), inset 0 0 0 1px var(--ch-hair);
  font-family: var(--ui); font-size: 12.5px; font-weight: 600; letter-spacing: -.015em;
  transition: color .14s, transform .14s var(--ease), box-shadow .14s;
}
.chat__tab:hover {
  color: var(--ch-txt); transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,194,74,.28);
}
.chat__tab:active { transform: translateY(0); }
.chat.is-open .chat__tab { display: none; }

/* 켜진 전구. 채팅이 살아 있다는 표시라 아주 천천히 숨 쉽니다. */
.chat__bulb {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #FFC24A; box-shadow: 0 0 8px rgba(255,194,74,.8);
  animation: chatbulb 3.4s ease-in-out infinite;
}
@keyframes chatbulb { 0%,100% { opacity: .72 } 50% { opacity: 1 } }

.chat__dot {
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  background: #FF5560; color: #fff;
  font-family: var(--num); font-size: 10px; font-style: normal; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 0 10px rgba(255,85,96,.5);
}

/* ── 펼쳤을 때 ── */
.chat__panel {
  width: min(330px, calc(100vw - var(--s4) * 2));
  border-radius: 16px; overflow: hidden;
  background-color: var(--ch-bg);
  box-shadow: 0 22px 52px rgba(0,0,0,.62), inset 0 0 0 1px var(--ch-hair);
  display: flex; flex-direction: column;
  animation: rise .2s var(--ease);
}

.chat__head {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 12px var(--s3) 11px;
  background-color: var(--ch-bg2);
  font-family: var(--ui); font-size: 12.5px; color: var(--ch-dim);
}
/* 머리 아래에 걸린 전구줄 — 공원 간판과 같은 장식입니다 */
.chat__head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background-image: radial-gradient(circle at 50% 50%, #FFC24A 0 1.4px, transparent 2px);
  background-size: 21px 5px; opacity: .58;
}
.chat__head b { color: var(--ch-txt); font-weight: 700; letter-spacing: -.02em; }
.chat__local {
  margin-left: auto; font-size: 10px; color: var(--ch-mute);
  padding: 3px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ch-hair);
}
.chat__min {
  border: 0; background: none; cursor: pointer; color: var(--ch-mute);
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  transition: color .14s, background-color .14s;
}
.chat__min svg { width: 13px; height: 13px; }
.chat__min:hover { color: var(--ch-txt); background-color: rgba(255,255,255,.07); }

/* ── 말 ── */
.chat__log {
  list-style: none; margin: 0; padding: var(--s3);
  height: 258px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 9px;
  scrollbar-width: thin; scrollbar-color: rgba(247,240,225,.16) transparent;
}
.chat__log::-webkit-scrollbar { width: 7px; }
.chat__log::-webkit-scrollbar-thumb {
  background: rgba(247,240,225,.16); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}

.msg { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 100%; }
.msg.is-me { align-items: flex-end; }
/* 같은 사람이 이어서 말하면 이름을 지웁니다 — 대화가 훨씬 조용해집니다 */
.msg.is-run { margin-top: -6px; }

.msg__who {
  font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: -.01em;
  color: var(--who, #FFC24A); padding: 0 4px;
}
.msg__b {
  margin: 0; max-width: 86%; padding: 7px 11px;
  border-radius: 13px 13px 13px 4px;
  background-color: #1D2740; color: var(--ch-dim);
  font-family: var(--ui); font-size: 12.5px; line-height: 1.55; letter-spacing: -.01em;
  word-break: break-word; overflow-wrap: anywhere;
}
.msg.is-run .msg__b { border-radius: 13px 13px 13px 13px; }
.msg.is-me .msg__b {
  border-radius: 13px 13px 4px 13px;
  background-color: rgba(255,194,74,.15);
  color: #FFE9BC;
  box-shadow: inset 0 0 0 1px rgba(255,194,74,.22);
}
/* 시각은 말 끝에 붙입니다. 줄을 따로 잡으면 짧은 말도 두 줄이 되어
   말풍선이 통통해집니다. 긴 말이면 알아서 마지막 줄 끝으로 흘러갑니다. */
.msg time {
  margin-left: 7px; vertical-align: baseline;
  font-family: var(--num); font-size: 9.5px; color: var(--ch-mute);
  font-variant-numeric: tabular-nums;
}
.msg.is-me time { color: rgba(255,233,188,.5); }
/* 내 이름은 안 답니다 — 오른쪽에 전구색으로 붙는 것만으로 이미 나입니다 */
.msg.is-me .msg__who { display: none; }
.msg.is-me + .msg.is-me { margin-top: -6px; }

.chat__none {
  margin: auto; text-align: center; color: var(--ch-mute);
  font-family: var(--ui); font-size: 12px; line-height: 1.7;
}
.chat__none span { display: block; font-size: 20px; margin-bottom: 4px; opacity: .5; }

/* ── 보내는 곳 ── */
.chat__form {
  display: flex; gap: 8px; align-items: center;
  padding: var(--s2) var(--s3) var(--s3);
  background-color: var(--ch-bg);
}
.chat__form input {
  flex: 1; min-width: 0; border: 0; height: 34px; padding: 0 13px; border-radius: 999px;
  background-color: rgba(255,255,255,.055); color: var(--ch-txt);
  font-family: var(--ui); font-size: 12.5px; letter-spacing: -.01em;
  box-shadow: inset 0 0 0 1px var(--ch-hair);
  transition: box-shadow .14s, background-color .14s;
}
.chat__form input::placeholder { color: var(--ch-mute); }
.chat__form input:focus {
  outline: 0; background-color: rgba(255,255,255,.085);
  box-shadow: inset 0 0 0 1px rgba(255,194,74,.5), 0 0 0 3px rgba(255,194,74,.1);
}
.chat__form button {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background-color: #FFC24A; color: #10182B;
  display: grid; place-items: center;
  transition: transform .14s var(--ease), box-shadow .14s, opacity .14s;
}
.chat__form button svg { width: 15px; height: 15px; }
.chat__form button:hover { box-shadow: 0 0 16px rgba(255,194,74,.45); transform: scale(1.06); }
.chat__form button:active { transform: scale(.96); }

@media (max-width: 640px) {
  .chat { right: var(--s3); }
  .chat__log { height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat__bulb { animation: none; }
  .chat__panel { animation: none; }
  .chat__tab:hover, .chat__form button:hover { transform: none; }
}

/* ══════════  터치 조작기 — 지도 안에서  ══════════
   손잡이와 탑승 단추는 화면에 늘 떠 있습니다. 불투명한 덩어리로 두면
   공원을 가리는 UI 가 되고, 유리로 두면 계기판이 됩니다. */

:root.v-park .pad {
  background-color: rgba(20,28,50,.42);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(247,240,225,.14), 0 10px 26px rgba(0,0,0,.4);
}
/* 가운데 십자 눈금 — 어디가 중립인지 보입니다 */
:root.v-park .pad::before {
  content: ""; position: absolute; inset: 22px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(247,240,225,.07);
}
:root.v-park .pad__knob {
  width: 44px; height: 44px;
  background: radial-gradient(circle at 38% 32%, #FFDC8E, var(--bulb) 62%);
  box-shadow: 0 3px 12px rgba(0,0,0,.45), 0 0 18px rgba(255,194,74,.35);
}

:root.v-park .ridebtn {
  border-radius: 999px; padding: 14px 24px;
  background: linear-gradient(180deg, #FFD37A, var(--bulb));
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 22px rgba(255,194,74,.28);
}
:root.v-park .ridebtn:active { transform: translateY(1px) scale(.98); }
/* 채팅이 오른쪽 아래에 있으니 탑승 단추는 그 위로 올립니다 */
:root.v-park .ridebtn { bottom: calc(112px + env(safe-area-inset-bottom)); }