:root {
  color-scheme: light;
  --emoji-bg: #f4f6f8;
  --emoji-panel: #ffffff;
  --emoji-soft: #f7f9fc;
  --emoji-soft-strong: #eef3f8;
  --emoji-text: #172033;
  --emoji-muted: #5d6879;
  --emoji-border: #cbd5e1;
  --emoji-border-strong: #aebdcd;
  --emoji-primary: #0969da;
  --emoji-primary-hover: #075bbd;
  --emoji-success: #08783e;
  --emoji-error: #b42318;
  --emoji-notice-text: #075985;
  --emoji-notice-bg: #e0f2fe;
  --emoji-notice-border: #7dd3fc;
  --emoji-focus: rgb(9 105 218 / 25%);
  --emoji-shadow: 0 1px 2px rgb(15 23 42 / 8%);
  --emoji-radius: 10px;
  --emoji-control-radius: 7px;
  --emoji-card-radius: 8px;
  --emoji-small-radius: 6px;
  --emoji-control-height: 40px;
  --emoji-button-height: 38px;
  --emoji-panel-gap: 14px;
  --emoji-field-gap: 10px;
  --emoji-card-gap: 8px;
  --emoji-focus-outline: 3px solid var(--emoji-focus);
  --emoji-focus-offset: 2px;
  --emoji-filter-columns: minmax(260px, 2fr) repeat(4, minmax(150px, 1fr));
  --emoji-settings-columns: repeat(4, minmax(150px, 1fr)) minmax(190px, 1fr);
  --emoji-detail-columns: repeat(4, minmax(0, 1fr));
  --emoji-section-columns: repeat(2, minmax(0, 1fr));
  --emoji-collection-columns: repeat(5, minmax(0, 1fr));
  --emoji-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  --emoji-font-mono: "Cascadia Code", Consolas, monospace;
  font-family: var(--emoji-font);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --emoji-bg: #0f141a;
  --emoji-panel: #161c24;
  --emoji-soft: #1d2530;
  --emoji-soft-strong: #252f3c;
  --emoji-text: #e6edf3;
  --emoji-muted: #a8b3c1;
  --emoji-border: #344252;
  --emoji-border-strong: #536477;
  --emoji-primary: #58a6ff;
  --emoji-primary-hover: #79b8ff;
  --emoji-success: #7ee2a8;
  --emoji-error: #ff938a;
  --emoji-notice-text: #9cdcfe;
  --emoji-notice-bg: #122f43;
  --emoji-notice-border: #285e7a;
  --emoji-shadow: 0 1px 2px rgb(0 0 0 / 35%);
}

/* ページ全体 */
body.emoji-page,
body.emoji-page * {
  box-sizing: border-box;
}

body.emoji-page {
  margin: 0;
  color: var(--emoji-text);
  background: var(--emoji-bg);
  font-family: var(--emoji-font);
  line-height: 1.65;
}

body.emoji-page a {
  color: var(--emoji-primary);
}

.emoji-main {
  width: min(1440px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 48px;
}

.emoji-page-header {
  margin-bottom: 16px;
}

.emoji-page-header h1 {
  margin: 0 0 4px;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.35;
}

.emoji-page-header p,
.emoji-panel-heading p {
  margin: 0;
  color: var(--emoji-muted);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  font-size: .9rem;
}

.emoji-split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.emoji-notice {
  margin-bottom: var(--emoji-panel-gap);
  padding: 12px 14px;
  color: var(--emoji-notice-text);
  background: var(--emoji-notice-bg);
  border: 1px solid var(--emoji-notice-border);
  border-radius: var(--emoji-radius);
}

/* 共通パネル */
.emoji-panel {
  margin-bottom: var(--emoji-panel-gap);
  padding: 16px;
  background: var(--emoji-panel);
  border: 1px solid var(--emoji-border);
  border-radius: var(--emoji-radius);
  box-shadow: var(--emoji-shadow);
}

.emoji-panel:focus {
  outline: var(--emoji-focus-outline);
  outline-offset: var(--emoji-focus-offset);
}

.emoji-panel-heading {
  margin-bottom: var(--emoji-panel-gap);
}

.emoji-panel h2,
.emoji-panel h3,
.emoji-panel p {
  margin-top: 0;
}

.emoji-panel-heading h2,
.emoji-about h2 {
  margin-bottom: 4px;
  font-size: 1.12rem;
  line-height: 1.45;
}

/* 入力コントロール */
.emoji-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  color: var(--emoji-muted);
  font-size: .88rem;
  font-weight: 600;
}

.emoji-control {
  width: 100%;
  min-height: var(--emoji-control-height);
  padding: 8px 10px;
  color: var(--emoji-text);
  background: var(--emoji-panel);
  border: 1px solid var(--emoji-border-strong);
  border-radius: var(--emoji-control-radius);
  font: inherit;
}

/* キーボード操作時のフォーカス状態 */
.emoji-control:focus-visible,
.emoji-button:focus-visible,
.emoji-card-symbol:focus-visible,
.emoji-icon-button:focus-visible,
.emoji-variant-button:focus-visible,
.emoji-copy-link:focus-visible,
.emoji-check-card:focus-within {
  outline: var(--emoji-focus-outline);
  outline-offset: var(--emoji-focus-offset);
}

.emoji-composition {
  min-height: 96px;
  resize: vertical;
  font-size: 1.5rem;
}

/* ボタン */
.emoji-button,
.emoji-icon-button,
.emoji-variant-button,
.emoji-copy-link {
  font: inherit;
  cursor: pointer;
}

.emoji-button {
  min-height: var(--emoji-button-height);
  padding: 7px 13px;
  color: var(--emoji-text);
  background: var(--emoji-soft);
  border: 1px solid var(--emoji-border-strong);
  border-radius: var(--emoji-control-radius);
  font-weight: 700;
}

.emoji-button:hover:not(:disabled) {
  background: var(--emoji-soft-strong);
}

.emoji-button--primary {
  color: #fff;
  background: var(--emoji-primary);
  border-color: var(--emoji-primary);
}

.emoji-button--primary:hover:not(:disabled) {
  background: var(--emoji-primary-hover);
}

.emoji-button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.emoji-action-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--emoji-card-gap);
}

/* 検索・表示設定 */
.emoji-filter-grid,
.emoji-settings-grid,
.emoji-grid,
.emoji-detail-grid,
.emoji-two-column,
.emoji-collection-grid,
.emoji-about-grid {
  display: grid;
}

.emoji-filter-grid {
  grid-template-columns: var(--emoji-filter-columns);
  gap: var(--emoji-field-gap);
  align-items: end;
}

.emoji-field--search {
  grid-column: span 2;
}

.emoji-settings-grid {
  grid-template-columns: var(--emoji-settings-columns);
  gap: var(--emoji-field-gap);
  align-items: end;
}

.emoji-check-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--emoji-panel-gap);
  min-height: var(--emoji-control-height);
  align-items: center;
}

.emoji-check-list label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.emoji-check-card {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: var(--emoji-control-height);
  padding: 8px 10px;
  background: var(--emoji-soft);
  border: 1px solid var(--emoji-border);
  border-radius: var(--emoji-control-radius);
}

/* 絵文字一覧 */
.emoji-result-count {
  margin: 0;
  color: var(--emoji-muted);
  white-space: nowrap;
}

.emoji-results {
  /* renderEmojiResults()が表示設定に合わせてこの2値を更新する。 */
  --emoji-size: 38px;
  --emoji-columns: 10;
  --emoji-result-columns: repeat(var(--emoji-columns), minmax(0, 1fr));
  --emoji-detail-result-columns: repeat(min(5, var(--emoji-columns)), minmax(180px, 1fr));
}

.emoji-grid {
  grid-template-columns: var(--emoji-result-columns);
  gap: var(--emoji-card-gap);
}

.emoji-card {
  display: grid;
  grid-template-rows: auto minmax(46px, 1fr) auto;
  min-width: 0;
  padding: 8px;
  background: var(--emoji-soft);
  border: 1px solid var(--emoji-border);
  border-radius: var(--emoji-card-radius);
}

.emoji-card-symbol {
  display: block;
  width: 100%;
  min-height: calc(var(--emoji-size) + 16px);
  padding: 3px;
  color: inherit;
  background: transparent;
  border: 0;
  font-size: var(--emoji-size);
  line-height: 1.25;
  cursor: pointer;
}

.emoji-card-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: center;
}

.emoji-card-content strong,
.emoji-card-content span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emoji-card-content strong {
  font-size: .82rem;
}

.emoji-card-content span {
  color: var(--emoji-muted);
  font-size: .7rem;
}

.emoji-card-actions {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
}

.emoji-icon-button {
  min-height: 28px;
  padding: 3px 7px;
  color: var(--emoji-text);
  background: var(--emoji-panel);
  border: 1px solid var(--emoji-border);
  border-radius: var(--emoji-small-radius);
  font-size: .72rem;
}

.emoji-icon-button:hover {
  color: var(--emoji-primary);
  border-color: var(--emoji-primary);
}

/* renderEmojiResults()が表示形式に応じて付け外しする状態クラス。 */
.emoji-results--detail .emoji-grid {
  grid-template-columns: var(--emoji-detail-result-columns);
}

.emoji-results--detail .emoji-card {
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
}

.emoji-results--detail .emoji-card-symbol {
  grid-row: span 2;
}

.emoji-results--detail .emoji-card-content {
  text-align: left;
}

.emoji-results--detail .emoji-card-actions {
  justify-content: flex-start;
}

.emoji-category-section {
  margin-bottom: 12px;
  border: 1px solid var(--emoji-border);
  border-radius: var(--emoji-card-radius);
}

.emoji-category-section > summary {
  padding: 10px 12px;
  background: var(--emoji-soft-strong);
  border-radius: var(--emoji-card-radius);
  font-weight: 700;
  cursor: pointer;
}

.emoji-category-section > .emoji-grid {
  padding: 10px;
}

.emoji-load-more {
  display: flex;
  justify-content: center;
  margin-top: var(--emoji-panel-gap);
}

.emoji-empty {
  padding: 30px 12px;
  color: var(--emoji-muted);
  text-align: center;
}

.emoji-message {
  min-height: 1.6em;
  margin: 10px 0 0;
}

/* setEmojiMessage()がdata-kindへ設定する処理結果の状態。 */
.emoji-message[data-kind="success"] {
  color: var(--emoji-success);
}

.emoji-message[data-kind="error"] {
  color: var(--emoji-error);
}

/* 絵文字の詳細 */
.emoji-detail-title {
  display: flex;
  align-items: center;
  gap: var(--emoji-panel-gap);
}

.emoji-detail-symbol {
  font-size: 4.5rem;
  line-height: 1;
}

.emoji-detail-grid {
  grid-template-columns: var(--emoji-detail-columns);
  gap: var(--emoji-field-gap);
  margin: 0;
}

.emoji-detail-grid > div {
  position: relative;
  min-width: 0;
  padding: 12px;
  background: var(--emoji-soft);
  border: 1px solid var(--emoji-border);
  border-radius: var(--emoji-card-radius);
}

.emoji-detail-grid dt {
  color: var(--emoji-muted);
  font-size: .78rem;
  font-weight: 700;
}

.emoji-detail-grid dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-family: var(--emoji-font-mono);
}

.emoji-copy-link {
  position: absolute;
  top: 7px;
  right: 8px;
  padding: 3px 5px;
  color: var(--emoji-primary);
  background: transparent;
  border: 0;
  font-size: .72rem;
}

.emoji-variants {
  margin-top: 16px;
}

.emoji-variants h3 {
  margin-bottom: 2px;
}

.emoji-variants > p {
  color: var(--emoji-muted);
}

.emoji-variant-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.emoji-variant-button {
  padding: 6px 9px;
  color: var(--emoji-text);
  background: var(--emoji-soft);
  border: 1px solid var(--emoji-border);
  border-radius: var(--emoji-control-radius);
}

.emoji-muted {
  color: var(--emoji-muted);
}

/* お気に入り・履歴・ツール情報 */
.emoji-two-column {
  grid-template-columns: var(--emoji-section-columns);
  gap: var(--emoji-panel-gap);
}

.emoji-collection-grid {
  grid-template-columns: var(--emoji-collection-columns);
  gap: 7px;
}

/* createEmojiCard()がお気に入り・履歴カードへ付与する状態クラス。 */
.emoji-card--compact .emoji-card-content {
  display: none;
}

.emoji-card--compact {
  grid-template-rows: auto auto;
}

.emoji-empty-collection {
  margin-bottom: 0;
  color: var(--emoji-muted);
}

.emoji-about-grid {
  grid-template-columns: var(--emoji-section-columns);
  gap: 24px;
}

.emoji-about-grid ul {
  margin: 0;
  padding-left: 1.3rem;
}

.emoji-source {
  margin-bottom: 0;
  padding-top: 12px;
  border-top: 1px solid var(--emoji-border);
  color: var(--emoji-muted);
  font-size: .84rem;
}

/* レスポンシブレイアウト */
@media (max-width: 1100px) {
  :root {
    --emoji-filter-columns: repeat(3, minmax(0, 1fr));
    --emoji-settings-columns: repeat(3, minmax(0, 1fr));
    --emoji-detail-columns: repeat(2, minmax(0, 1fr));
  }

  .emoji-results {
    --emoji-result-columns: repeat(6, minmax(0, 1fr));
  }

}

@media (max-width: 720px) {
  :root {
    --emoji-filter-columns: 1fr;
    --emoji-settings-columns: 1fr;
    --emoji-detail-columns: 1fr;
    --emoji-section-columns: 1fr;
    --emoji-collection-columns: repeat(3, minmax(0, 1fr));
  }

  .emoji-results {
    --emoji-result-columns: repeat(3, minmax(0, 1fr));
    --emoji-detail-result-columns: 1fr;
  }

  .emoji-main {
    width: min(100% - 20px, 1440px);
    padding-top: 14px;
  }

  .emoji-mobile-stack {
    flex-direction: column;
    align-items: stretch;
    gap: var(--emoji-field-gap);
  }

  .emoji-field--search {
    grid-column: auto;
  }

  .emoji-action-list {
    width: 100%;
  }

  .emoji-action-list .emoji-button {
    flex: 1;
  }
}

@media (max-width: 420px) {
  .emoji-results {
    --emoji-result-columns: repeat(2, minmax(0, 1fr));
  }

  .emoji-panel {
    padding: 12px;
  }

  .emoji-detail-symbol {
    font-size: 3.4rem;
  }
}