/* 裏サイト（裏口）。古い雑居ビルの裏口を大まじめに再現する：コンクリートの壁、鉄の扉、アクリルの表札、
   ラベルテープ、養生テープで留めた貼り紙、白い文字の館内案内板。絵文字は使わない。 */
:root {
  --wall: #4a4c4d;
  --wall-dark: #2f3132;
  --steel: #7c8287;
  --steel-light: #a3a9ad;
  --steel-dark: #50565b;
  --plate: #f3f1ea;
  --ink: #17191b;
  --paper: #efe9d6;
  --masking: rgba(222, 205, 150, 0.85);
  --board: #1b1c1d;
  --board-line: #2a2b2c;
  --letter: #f2efe6;
  --sign-green: #1c8a4c;
  --lamp: #e9f3ef;
  --gothic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", "Apple SD Gothic Neo", "Malgun Gothic", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  color: var(--letter);
  font-family: var(--gothic);
  line-height: 1.6;
  background-color: var(--wall);
  /* 打ちっぱなしのコンクリート：型枠の継ぎ目とセパ穴、うっすらした汚れ */
  background-image:
    radial-gradient(circle at 12px 12px, rgba(0, 0, 0, 0.35) 2.5px, transparent 3.5px),
    linear-gradient(rgba(0, 0, 0, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18) 1px, transparent 1px),
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(80% 50% at 20% 90%, rgba(0, 0, 0, 0.25), transparent 70%);
  background-size: 180px 90px, 180px 90px, 180px 90px, 100% 100%, 100% 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

a { color: inherit; }

:focus-visible { outline: 3px solid #f4c430; outline-offset: 3px; }

svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 16px;
}

/* 表へ戻る：非常口の誘導灯のような緑の札 */
.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 4px;
  background: var(--sign-green);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85) inset, 0 0 18px rgba(48, 200, 120, 0.35);
}

.lang { position: relative; }
.lang summary {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 2px solid var(--steel-light);
  border-radius: 4px;
  background: var(--wall-dark);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  list-style: none;
}
.lang summary::-webkit-details-marker { display: none; }
.lang ul {
  position: absolute;
  right: 0;
  z-index: 2;
  min-width: 180px;
  margin: 6px 0 0;
  padding: 6px;
  list-style: none;
  border: 2px solid var(--steel-light);
  border-radius: 4px;
  background: var(--board);
}
.lang a { display: block; padding: 10px 12px; min-height: 44px; text-decoration: none; }
.lang a[aria-current="page"] { background: var(--board-line); font-weight: 700; }

main { max-width: 640px; margin: 0 auto; padding: 8px 16px 32px; }

/* 鉄の扉。上に蛍光灯、中ほどに表札・ラベルテープ・貼り紙、右にノブ */
.door {
  position: relative;
  margin: 28px 0 0;
  padding: 44px 22px 72px;
  border: 10px solid var(--steel-dark);
  border-bottom-width: 0;
  border-radius: 2px 2px 0 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.07), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.14)),
    repeating-linear-gradient(180deg, transparent 0 180px, rgba(0, 0, 0, 0.12) 180px 182px),
    linear-gradient(180deg, var(--steel-light), var(--steel) 40%, #6d7378);
  box-shadow: 0 0 0 2px #222 inset, 0 30px 60px rgba(0, 0, 0, 0.45);
  color: var(--ink);
}
.lamp {
  position: absolute;
  top: -30px;
  left: 50%;
  width: 58%;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 6px;
  background: var(--lamp);
  box-shadow: 0 0 22px 6px rgba(225, 245, 235, 0.55), 0 0 90px 30px rgba(225, 245, 235, 0.18);
  animation: flicker 7s infinite;
}
@keyframes flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.35; }
  94% { opacity: 1; }
  96% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) { .lamp { animation: none; } }

/* アクリルの表札：白地に黒のゴシック、四隅のビス */
.plate {
  position: relative;
  display: grid;
  gap: 4px;
  margin: 0 auto;
  max-width: 340px;
  padding: 18px 20px 14px;
  border-radius: 3px;
  background: var(--plate);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25), 0 6px 14px rgba(0, 0, 0, 0.3);
  text-align: center;
  background-image:
    radial-gradient(circle at 10px 10px, #9aa0a4 3px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 10px) 10px, #9aa0a4 3px, transparent 3.6px),
    radial-gradient(circle at 10px calc(100% - 10px), #9aa0a4 3px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #9aa0a4 3px, transparent 3.6px);
}
.plate-name { font-size: clamp(2.4rem, 12vw, 3.4rem); font-weight: 800; line-height: 1.1; letter-spacing: 0.12em; }
.plate-sub { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: #45494c; }

/* ラベルテープ：黒地に白の浮き出し文字 */
.tape {
  width: fit-content;
  margin: 18px auto 0;
  padding: 4px 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2b2b2b, #0f0f0f);
  color: #f5f5f5;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, var(--gothic);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.8);
  transform: rotate(-1.5deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 養生テープで留めた貼り紙 */
.notice {
  position: relative;
  margin: 26px auto 0;
  max-width: 400px;
  padding: 22px 20px 18px;
  background: var(--paper);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
  transform: rotate(0.8deg);
}
.notice::before, .notice::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 64px;
  height: 22px;
  background: var(--masking);
}
.notice::before { left: -12px; transform: rotate(-28deg); }
.notice::after { right: -12px; transform: rotate(26deg); }
.notice h2 { margin: 0 0 6px; font-size: 1.05rem; letter-spacing: 0.3em; text-align: center; border-bottom: 2px solid var(--ink); padding-bottom: 4px; }
.notice p { margin: 0; font-size: 0.95rem; word-break: keep-all; overflow-wrap: anywhere; }

.knob {
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 18px;
  height: 46px;
  border-radius: 9px;
  background: linear-gradient(90deg, #5c6166, #c9cdd0 45%, #6e7378);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

/* 館内案内板：黒いフェルトの溝に白い差し込み文字 */
.directory {
  margin: 0;
  padding: 18px 12px 22px;
  border: 8px solid #3a3b3c;
  border-radius: 2px;
  background: var(--board) repeating-linear-gradient(180deg, transparent 0 21px, var(--board-line) 21px 23px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45), 0 0 0 2px #111 inset;
}
.directory-head {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--letter);
  font-size: 1.15rem;
  letter-spacing: 0.4em;
  text-align: center;
}
.directory-list { margin: 0; padding: 0; list-style: none; }
.directory-list li + li { border-top: 1px dashed rgba(242, 239, 230, 0.35); }
/* 見出しの下の「地下へ」：エレベーターの下り表示のような小さな札 */
.directory-down {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: -4px 0 8px;
  color: #f4b740;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.directory-down svg { animation: descend 2.4s ease-in-out infinite; }
@keyframes descend { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .directory-down svg { animation: none; } }
/* 1行：上に階の札と作品名、左に壁に貼った写真、右に説明と「入る」 */
.tenant {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas: "floor body" "photo body" "photo enter";
  grid-template-rows: auto 1fr auto;
  align-items: start;
  gap: 8px 12px;
  min-height: 56px;
  padding: 14px 2px;
  text-decoration: none;
}
/* 階の札：地下の階（B1〜）を、エレベーターの階表示のような白枠の札で */
.floor {
  grid-area: floor;
  display: grid;
  place-items: center;
  width: 64px;
  height: 32px;
  border: 2px solid var(--letter);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
/* 壁に貼った写真：白い縁、少し傾けてピンで留めたように */
.tenant-photo {
  grid-area: photo;
  display: block;
  width: 64px;
  height: 85px;
  object-fit: cover;
  border: 3px solid #f2efe6;
  background: #2a2b2c;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transform: rotate(-1.5deg);
}
.directory-list li:nth-child(even) .tenant-photo { transform: rotate(1.2deg); }
.tenant-body { grid-area: body; display: grid; gap: 4px; align-content: start; min-width: 0; }
.tenant-name { font-size: 1.1rem; letter-spacing: 0.04em; word-break: keep-all; overflow-wrap: anywhere; }
.tenant-tag { width: fit-content; padding: 0 6px; background: #c0392b; color: #fff; font-size: 0.75rem; font-weight: 700; }
.tenant-text { font-size: 0.85rem; color: #cfcbc0; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.tenant-enter {
  grid-area: enter;
  justify-self: end;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--letter);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.tenant:active .tenant-enter { background: var(--letter); color: var(--board); }
.directory-empty { margin: 8px 0 0; text-align: center; letter-spacing: 0.1em; color: #cfcbc0; }

.footer {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 16px 28px;
  font-size: 0.8rem;
  color: #c7c9ca;
  text-align: center;
}
.footer p { margin: 0; }
.footer a { display: inline-flex; align-items: center; min-height: 44px; }