/* =========================================================
   VAIZO OPS Dashboard
   Design Policy v1: 白黒エディトリアル × ミッション主義
   ──────────────────────────────────────────────────────
   非交渉領域:
   - カラー: #0a0a0a / #ffffff / グレースケールのみ
   - 階層用語禁止・採用語排除
   - 装飾最小・罫線とタイポと余白で構造を語る
   ========================================================= */

:root {
  --c-ink: #0a0a0a;
  --c-paper: #ffffff;
  --c-line: #0a0a0a;
  --c-line-soft: #d4d4d4;
  --c-mute: #6e6e6e;
  --c-bg-soft: #f4f4f4;
  --c-invert-mute: rgba(255,255,255,0.62);
  --c-invert-line: rgba(255,255,255,0.18);

  --font-en: 'Inter', system-ui, -apple-system, sans-serif;
  --font-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;

  --maxw: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-gap: clamp(56px, 8vw, 120px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-jp);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.is-mono { font-family: var(--font-en); font-feature-settings: "tnum" 1; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  background: var(--c-ink);
  color: var(--c-paper);
  position: relative;
  overflow: hidden;
}
.hero__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 72px) var(--gutter) clamp(28px, 5vw, 56px);
}
.hero__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 1px solid var(--c-invert-line);
  padding-bottom: 16px;
  margin-bottom: clamp(28px, 5vw, 56px);
}
.hero__brand {
  font-family: var(--font-en);
  font-weight: 800;
  letter-spacing: 0.28em;
  font-size: 12px;
}
.hero__viewer {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero__viewer-label {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--c-invert-mute);
}
.hero__viewer-select {
  font-family: var(--font-jp);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 32px 6px 12px;
  background: transparent;
  color: var(--c-paper);
  border: 1px solid var(--c-paper);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='white'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-width: 200px;
}
.hero__viewer-select option { background: var(--c-ink); color: var(--c-paper); }
.hero__mission {
  font-weight: 900;
  font-size: clamp(28px, 5.6vw, 60px);
  line-height: 1.32;
  letter-spacing: -0.015em;
  margin: 0 0 clamp(28px, 4vw, 48px);
  max-width: 22em;
}
.hero__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  border-top: 1px solid var(--c-invert-line);
  padding-top: 20px;
}
.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.meta-label {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--c-invert-mute);
}
.meta-value {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.hero__meta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* PERSONAL VIEW indicator */
.hero--personal .hero__viewer-select {
  background-color: var(--c-paper);
  color: var(--c-ink);
}
.hero--personal .hero__viewer-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='black'/></svg>");
}
.hero__personal-tag {
  display: none;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.24em;
  border: 1px solid var(--c-paper);
  padding: 4px 10px;
}
.hero--personal .hero__personal-tag { display: inline-block; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 9px 16px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  transition: background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn--stack {
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  text-align: center;
  min-width: 120px;
}
.btn__main {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.btn__sub {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.7;
  line-height: 1.2;
}
.btn--filled .btn__sub { opacity: 0.55; }
.btn--filled {
  background: var(--c-paper);
  color: var(--c-ink);
  border-color: var(--c-paper);
}
.hero .btn:hover:not(.btn--filled) { background: var(--c-paper); color: var(--c-ink); }
.btn--filled:hover { opacity: 0.85; }
.btn--sm { font-size: 11px; padding: 6px 12px; }
.btn--ink { color: var(--c-ink); border-color: var(--c-ink); }
.btn--ink:hover { background: var(--c-ink); color: var(--c-paper); }
.btn--ink-filled { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }

/* =========================================================
   STATUS BAR
   ========================================================= */
.status-bar {
  background: var(--c-ink);
  color: var(--c-paper);
  text-align: center;
  padding: 10px;
  font-size: 12px;
  letter-spacing: 0.05em;
}

/* =========================================================
   MAIN / SECTION
   ========================================================= */
.main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 96px) var(--gutter) 0;
}
.section { margin-bottom: var(--section-gap); }
.section__head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  column-gap: 24px;
  row-gap: 4px;
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 16px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.section__num {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin: 0;
}
.section__title {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
}
.section__lede {
  grid-column: 2;
  font-size: 13px;
  color: var(--c-mute);
  margin: 4px 0 0;
}

/* =========================================================
   01 TODAY
   ========================================================= */
.today {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--c-line);
}
@media (max-width: 880px) { .today { grid-template-columns: 1fr; } }

/* NOW (left half: overdue + today list) */
.now {
  border-right: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
}
@media (max-width: 880px) { .now { border-right: none; border-bottom: 1px solid var(--c-line); } }
.now__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--c-line);
}
.now__title {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.18em;
  margin: 0;
}
.now__count {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 14px;
}
.now__list { list-style: none; margin: 0; padding: 0; }
.now__item {
  padding: 16px 24px;
  border-bottom: 1px solid var(--c-line-soft);
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 16px;
  row-gap: 4px;
  align-items: baseline;
}
.now__item:last-child { border-bottom: none; }
.now__tag {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 3px 8px;
  border: 1px solid var(--c-ink);
  white-space: nowrap;
}
.now__tag--today { background: var(--c-ink); color: var(--c-paper); }
.now__id {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  color: var(--c-mute);
  margin-right: 6px;
}
.now__title-text { font-weight: 700; font-size: 14px; line-height: 1.5; }
.now__deadline {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.now__sub {
  grid-column: 2 / 4;
  font-size: 11px;
  color: var(--c-mute);
  letter-spacing: 0.02em;
}
.now__empty {
  padding: 40px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--c-mute);
}

/* SUMMARY (right half: numeric strip) */
.summary { display: flex; flex-direction: column; }
.summary__head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--c-line);
}
.summary__title {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.18em;
  margin: 0;
}
.summary__sub {
  font-size: 11px;
  color: var(--c-mute);
  margin: 4px 0 0;
}
.summary__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
}
.summary__cell {
  padding: 22px 24px;
  border-bottom: 1px solid var(--c-line-soft);
  border-right: 1px solid var(--c-line-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.summary__cell:nth-child(2n) { border-right: none; }
.summary__cell:nth-last-child(-n+2) { border-bottom: none; }
.summary__num {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.summary__label {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--c-mute);
}

/* THIS WEEK */
.week { margin-top: 20px; border: 1px solid var(--c-line); }
.week__head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--c-line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.week__title {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.18em;
  margin: 0;
}
.week__count {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 14px;
}
.week__list { list-style: none; margin: 0; padding: 0; }
.week__item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  column-gap: 20px;
  align-items: baseline;
  padding: 14px 24px;
  border-bottom: 1px solid var(--c-line-soft);
}
.week__item:last-child { border-bottom: none; }
.week__when {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-ink);
}
.week__main { font-weight: 600; font-size: 14px; line-height: 1.45; }
.week__sub {
  font-family: var(--font-en);
  font-size: 11px;
  color: var(--c-mute);
  letter-spacing: 0.04em;
}
.week__empty {
  padding: 40px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--c-mute);
}

/* =========================================================
   02 GOALS
   ========================================================= */
.goals { border-top: 1px solid var(--c-line); }
.goal {
  display: grid;
  grid-template-columns: 88px minmax(0, 1.6fr) minmax(0, 1fr) 64px;
  column-gap: 24px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.goal--ANNUAL { background: var(--c-ink); color: var(--c-paper); padding: 22px 16px; }
.goal--ANNUAL .goal__type { color: var(--c-invert-mute); }
.goal--ANNUAL .goal__kpi { color: var(--c-invert-mute); }
.goal--ANNUAL .goal__bar { background: var(--c-invert-line); }
.goal--ANNUAL .goal__bar-fill { background: var(--c-paper); }
.goal--Q { padding-left: 24px; }
.goal--MONTH { padding-left: 56px; color: var(--c-ink); }
.goal--MONTH .goal__type { color: var(--c-mute); }
.goal__type {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--c-mute);
}
.goal__title { font-weight: 700; font-size: 14px; line-height: 1.4; }
.goal__kpi {
  font-family: var(--font-en);
  font-size: 11px;
  color: var(--c-mute);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.goal__bar {
  height: 6px;
  background: var(--c-line-soft);
  position: relative;
}
.goal__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--c-ink);
}
.goal__pct {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 14px;
  text-align: right;
}
@media (max-width: 720px) {
  .goal { grid-template-columns: 60px 1fr 52px; }
  .goal__bar { grid-column: 1 / -1; }
}

/* =========================================================
   03 PORTFOLIO (Cross-tab)
   ========================================================= */
.portfolio { overflow-x: auto; }
.cross {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: 1px solid var(--c-line);
}
.cross th, .cross td {
  padding: 12px 16px;
  text-align: center;
  border-right: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
}
.cross th:last-child, .cross td:last-child { border-right: none; }
.cross thead th {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.14em;
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink);
}
.cross tbody th {
  text-align: left;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 13px;
  background: var(--c-bg-soft);
}
.cross__num {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 15px;
}
.cross__num--zero { color: var(--c-line-soft); font-weight: 400; }
.cross tfoot th, .cross tfoot td {
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: var(--c-ink);
  font-weight: 900;
}
.cross tfoot th { text-align: left; }

/* Heatmap density (灰色濃淡で量を表現) */
.cross__num[data-density="0"] { color: var(--c-line-soft); }
.cross__num[data-density="1"] { color: #999; }
.cross__num[data-density="2"] { color: #555; }
.cross__num[data-density="3"] { color: var(--c-ink); }

/* =========================================================
   04 ALL TASKS
   ========================================================= */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-line-soft);
}
.filter-bar__input,
.filter-bar__select {
  font-family: var(--font-jp);
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  color: var(--c-ink);
  outline: none;
}
.filter-bar__input { flex: 1 1 240px; }
.filter-bar__input:focus,
.filter-bar__select:focus { background: var(--c-bg-soft); }

.table-meta {
  font-family: var(--font-en);
  font-size: 11px;
  color: var(--c-mute);
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); }
.tasks {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tasks th, .tasks td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--c-line-soft);
  vertical-align: top;
}
.tasks thead th {
  background: var(--c-ink);
  color: var(--c-paper);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.14em;
  position: sticky;
  top: 0;
  z-index: 1;
}
.tasks tbody tr:hover td { background: var(--c-bg-soft); }
.tasks__id {
  font-family: var(--font-en);
  font-weight: 700;
  white-space: nowrap;
  width: 70px;
  color: var(--c-mute);
}
.tasks__title { font-weight: 700; line-height: 1.45; }
.tasks__empty { text-align: center; padding: 40px; color: var(--c-mute); }

/* Status pills (色なし、線と塗り) */
.pill {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  border: 1px solid var(--c-ink);
  white-space: nowrap;
  text-transform: uppercase;
}
.pill--進行中 { background: var(--c-ink); color: var(--c-paper); }
.pill--完了 { background: transparent; color: var(--c-mute); border-color: var(--c-mute); text-decoration: line-through; }
.pill--保留 { background: transparent; color: var(--c-mute); border: 1px dashed var(--c-mute); }
.pill--未着手 { background: var(--c-paper); color: var(--c-ink); }

/* Priority indicator: 色なし、●●●で表現 */
.pri {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--c-ink);
}
.pri__dots { color: var(--c-ink); letter-spacing: -1px; }
.pri__dots--low { color: var(--c-line-soft); }

/* Deadline rendering */
.deadline {
  font-family: var(--font-en);
  font-weight: 700;
  white-space: nowrap;
  font-size: 12px;
}
.deadline--overdue { font-weight: 900; text-decoration: underline; text-underline-offset: 4px; }
.deadline--today { font-weight: 900; background: var(--c-ink); color: var(--c-paper); padding: 2px 6px; }
.deadline--soon { font-weight: 800; }
.deadline--later { color: var(--c-mute); font-weight: 600; }
.deadline--none { color: var(--c-line-soft); font-weight: 400; }

/* =========================================================
   05 WEEKLY MEETING
   ========================================================= */
.agenda { border: 1px solid var(--c-line); }
.agenda__list { list-style: none; margin: 0; padding: 0; counter-reset: agenda; }
.agenda__item, .agenda__total {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  column-gap: 24px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--c-line-soft);
  counter-increment: agenda;
  position: relative;
}
.agenda__item::before {
  content: counter(agenda, decimal-leading-zero);
  position: absolute;
  left: 24px;
  top: 18px;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--c-mute);
}
.agenda__item { padding-left: 64px; }
.agenda__item:last-of-type { border-bottom: 1px solid var(--c-line); }
.agenda__total {
  background: var(--c-ink);
  color: var(--c-paper);
  border-bottom: none;
  padding-left: 24px;
}
.agenda__time {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.agenda__unit {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-mute);
  margin-left: 4px;
}
.agenda__total .agenda__unit { color: var(--c-invert-mute); }
.agenda__what {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
}
.agenda__sub {
  font-weight: 500;
  font-size: 12px;
  color: var(--c-mute);
  margin-left: 8px;
}
.agenda__total .agenda__what { font-weight: 800; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--c-ink);
  color: var(--c-paper);
  padding: 32px var(--gutter);
  margin-top: var(--section-gap);
}
.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-invert-mute);
}
.footer a { color: var(--c-paper); text-decoration: underline; text-underline-offset: 4px; }

/* =========================================================
   MODAL (sync help)
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal[hidden] { display: none; }
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.62);
  backdrop-filter: blur(2px);
}
.modal__panel {
  position: relative;
  max-width: 560px;
  width: 100%;
  background: var(--c-paper);
  color: var(--c-ink);
  border: 1px solid var(--c-ink);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--c-line);
}
.modal__eyebrow {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--c-mute);
}
.modal__close {
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--c-ink);
  padding: 0 4px;
}
.modal__body { padding: 24px 24px 8px; }
.modal__title {
  font-weight: 900;
  font-size: 22px;
  line-height: 1.4;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.modal__lede {
  font-size: 13px;
  color: var(--c-mute);
  margin: 0 0 20px;
  line-height: 1.6;
}
.modal__steps {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal__steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 14px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.6;
}
.modal__step-no {
  font-weight: 900;
  font-size: 13px;
  color: var(--c-ink);
  border-bottom: 2px solid var(--c-ink);
  display: inline-block;
  width: 28px;
}
.modal__steps strong {
  font-weight: 800;
  background: var(--c-bg-soft);
  padding: 1px 6px;
  border: 1px solid var(--c-line-soft);
}
.modal__note {
  font-size: 12px;
  color: var(--c-mute);
  margin: 0 0 8px;
  padding: 12px 14px;
  border-left: 3px solid var(--c-ink);
  background: var(--c-bg-soft);
  line-height: 1.6;
}
.modal__foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--c-line-soft);
}

/* =========================================================
   PASSWORD GATE
   ========================================================= */
.gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-ink);
  color: var(--c-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.gate--hidden { display: none; }
.gate__inner { max-width: 480px; width: 100%; text-align: center; }
.gate__brand {
  font-family: var(--font-en);
  font-weight: 800;
  letter-spacing: 0.28em;
  font-size: 11px;
  color: var(--c-invert-mute);
  margin: 0 0 36px;
}
.gate__title {
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 28px);
  margin: 0 0 32px;
  letter-spacing: -0.01em;
}
.gate__form { display: flex; gap: 8px; }
.gate__input {
  flex: 1;
  padding: 12px 16px;
  font-size: 14px;
  font-family: inherit;
  background: transparent;
  color: var(--c-paper);
  border: 1px solid var(--c-paper);
  outline: none;
  letter-spacing: 0.1em;
}
.gate__input:focus { background: rgba(255,255,255,0.08); }
.gate .btn--filled { background: var(--c-paper); color: var(--c-ink); border-color: var(--c-paper); }
.gate__error {
  color: var(--c-paper);
  font-size: 12px;
  margin: 18px 0 0;
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: 0.05em;
  border-top: 1px solid var(--c-paper);
  padding-top: 12px;
}

/* =========================================================
   PRINT
   ========================================================= */
@media print {
  .hero, .footer { background: var(--c-paper) !important; color: var(--c-ink) !important; }
  .btn, .filter-bar, .gate { display: none !important; }
}