/*
THESIS: まとめ検索.comを、説明を読むサイトではなく情報を操作する夜間コンソールにする。
OWN-WORLD: 青みのある黒い面、明確な罫線、ページごとに限定した一色のアクセント。
STORY: 共通ナビで目的面へ移動し、各面では検索・比較・読解に集中する。
FIRST VIEWPORT: ブランド、4導線、ページ固有の主要操作または主要情報が見える。
FORM: Operate / Read。モードを混ぜず、共通部品だけを共有する。
*/
:root {
  color-scheme: dark;
  --ui-canvas: #090c11;
  --ui-surface: #11161e;
  --ui-raised: #171e28;
  --ui-border: #2a3442;
  --ui-border-strong: #3a4758;
  --ui-text: #edf2f7;
  --ui-secondary: #b7c1ce;
  --ui-muted: #7f8b99;
  --ui-search: #64d8d0;
  --ui-deals: #ffb45b;
  --ui-news: #78b7ff;
  --ui-read: #b6a1ff;
  --ui-danger: #ff7e86;
  --ui-success: #67d391;
  --ui-radius-sm: 4px;
  --ui-radius: 8px;
  --ui-radius-lg: 12px;
  --ui-max: 1200px;
  --ui-font: "Segoe UI", "Yu Gothic UI", "BIZ UDPGothic", Meiryo, sans-serif;
}

html { background: var(--ui-canvas); }
.mk-page *,
.mk-page *::before,
.mk-page *::after { box-sizing: border-box; }
body.mk-page {
  margin: 0;
  background: var(--ui-canvas);
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  -webkit-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}
.page-search { --page-accent: var(--ui-search); }
.page-deals { --page-accent: var(--ui-deals); }
.page-news { --page-accent: var(--ui-news); }
.page-read { --page-accent: var(--ui-read); }

.mk-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: block;
  width: auto;
  min-height: 58px;
  height: auto;
  padding: 0;
  background: rgba(9, 12, 17, .97);
  border-bottom: 1px solid var(--ui-border);
  box-shadow: none;
}
.mk-header__inner {
  width: min(100% - 32px, var(--ui-max));
  min-height: 58px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 24px;
}
.mk-brand {
  color: var(--ui-read);
  font-family: var(--ui-font);
  font-size: 1.1rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.mk-brand strong { color: var(--ui-search); font-weight: 800; }
.mk-nav {
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  align-self: stretch;
  gap: 0;
}
.mk-nav a {
  min-height: 44px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid transparent;
  color: var(--ui-muted);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0;
}
.mk-nav a:hover { color: var(--ui-text); background: var(--ui-surface); }
.mk-nav a[aria-current="page"] { color: var(--page-accent); border-bottom-color: var(--page-accent); }

.mk-page :focus-visible {
  outline: 2px solid var(--page-accent);
  outline-offset: 2px;
}
.mk-page input,
.mk-page select,
.mk-page button { font-family: inherit; letter-spacing: 0; }
.mk-page input::placeholder { color: var(--ui-muted); opacity: 1; }
.mk-page img { max-width: 100%; height: auto; }

.mk-page footer {
  border-top: 1px solid var(--ui-border);
  background: var(--ui-canvas);
  color: var(--ui-muted);
}
.mk-page footer a { color: var(--ui-secondary); }

@media (max-width: 680px) {
  .mk-header { position: static; }
  .mk-header__inner {
    width: 100%;
    min-height: 0;
    padding: 12px 12px 0;
    display: block;
  }
  .mk-brand { display: inline-block; min-height: 36px; padding: 4px 4px 8px; }
  .mk-nav {
    width: 100%;
    margin: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .mk-nav a { padding: 0 2px; font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-page *, .mk-page *::before, .mk-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}