* {
  box-sizing: border-box;
}


/* ==============================
   全体
   ============================== */

body {
  margin: 0;

  font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

  background: #0f172a;

  color: #e5e7eb;
}


/* ==============================
   ヘッダー
   ============================== */

header {
  background:
    linear-gradient(
      135deg,
      #111827,
      #1e293b
    );

  border-bottom:
    1px solid #334155;

  padding:
    18px 28px;
}


header h1 {
  margin: 0;

  font-size: 24px;

  letter-spacing: 1px;

  color: #f8fafc;
}


/* ==============================
   メインレイアウト
   ============================== */

.layout {
  display: grid;

  grid-template-columns:
    2fr 1fr;

  gap: 18px;

  padding: 18px;

  min-height:
    calc(100vh - 70px);

  height:
    calc(100vh - 70px);

  overflow: hidden;
}


/* ==============================
   本文・サイドパネル
   ============================== */

.text-area,
.side-panel {
  background: #111827;

  border:
    1px solid #334155;

  border-radius: 12px;

  padding: 12px;

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.25);
}


/* ==============================
   本文タイトル
   ============================== */

.text-area h2,
.tab-content h2 {
  margin-top: 0;

  color: #f8fafc;
}


.text-area h2 {
  color: #222222;
}


/* ==============================
   本文背景
   ============================== */

.text-area p,
.text-area {
  background: #f8f5e9;
}


/* ==============================
   パーリ語本文
   ============================== */

.pali-text {
  color: #222222;

  font-size: 18px;

  line-height: 1.35;

  letter-spacing: 0.2px;
}


/* ==============================
   本文1行
   ============================== */

.pali-line {
  margin-bottom: 1px;
}


/* ==============================
   パーリ語単語
   ============================== */

.pali-word {
  display: inline-block;

  padding:
    1px 3px;

  margin:
    0 1px;

  border-radius: 6px;

  cursor: pointer;

  transition: 0.2s;
}


.pali-word:hover {
  background:
    rgba(
      79,
      70,
      229,
      0.25
    );

  color: #222222;
}


.pali-word.selected {
  background:
    linear-gradient(
      135deg,
      #4f46e5,
      #2563eb
    );

  color: white;
}


/* ==============================
   DPR見出し
   ============================== */

.dpr-heading {
  color: #222222;

  font-weight: bold;

  margin-top: 14px;

  margin-bottom: 6px;

  line-height: 1.3;

  scroll-margin-top: 20px;
}


/* ==============================
   DPR見出し階層
   ============================== */

.dpr-heading-level-1 {
  font-size: 26px;

  margin-top: 8px;

  margin-bottom: 12px;

  padding-bottom: 6px;

  border-bottom:
    2px solid #cbd5e1;
}


.dpr-heading-level-2 {
  font-size: 23px;

  margin-top: 18px;

  margin-bottom: 9px;
}


.dpr-heading-level-3 {
  font-size: 21px;

  margin-top: 16px;

  margin-bottom: 7px;
}


.dpr-heading-level-4 {
  font-size: 20px;

  margin-top: 14px;

  margin-bottom: 6px;
}


.dpr-heading-level-5,
.dpr-heading-level-6,
.dpr-heading-level-7,
.dpr-heading-level-8,
.dpr-heading-level-9 {
  font-size: 18px;

  margin-top: 12px;

  margin-bottom: 5px;
}


/* ==============================
   目次エリア
   ============================== */

.toc-container {
  margin-bottom: 12px;
}


/* ==============================
   目次ボタン
   ============================== */

.toc-toggle-button {
  width: 100%;

  text-align: left;

  border:
    1px solid #cbd5e1;

  background: #eee8d5;

  color: #222222;

  padding:
    8px 12px;

  border-radius: 7px;

  font-size: 15px;

  font-weight: bold;

  cursor: pointer;
}


.toc-toggle-button:hover {
  background: #e5dfcc;
}


/* ==============================
   目次本体
   ============================== */

.toc {
  margin-top: 6px;

  padding:
    8px;

  background: #fffdf5;

  border:
    1px solid #d6d3c8;

  border-radius: 8px;

  max-height: 320px;

  overflow-y: auto;
}


/* ==============================
   目次リスト
   ============================== */

.toc-list,
.toc-sublist {
  list-style: none;

  margin: 0;

  padding: 0;
}


.toc-sublist {
  margin-left: 18px;
}


/* ==============================
   目次項目
   ============================== */

.toc-list li,
.toc-sublist li {
  display: flex;

  align-items: center;

  margin:
    1px 0;
}


/* ==============================
   目次開閉ボタン
   ============================== */

.toc-expand-button {
  width: 22px;

  height: 24px;

  padding: 0;

  border: none;

  background: transparent;

  color: #555555;

  cursor: pointer;

  flex-shrink: 0;

  font-size: 12px;
}


.toc-expand-button:hover {
  color: #4f46e5;
}


/* ==============================
   子階層がない場合の記号
   ============================== */

.toc-expand-spacer {
  width: 22px;

  display: inline-block;

  color: #999999;

  text-align: center;

  flex-shrink: 0;
}


/* ==============================
   目次テキスト
   ============================== */

.toc-item {
  flex: 1;

  border: none;

  background: transparent;

  color: #333333;

  text-align: left;

  padding:
    4px 5px;

  border-radius: 4px;

  cursor: pointer;

  font-size: 14px;

  line-height: 1.4;
}


.toc-item:hover {
  background: #eee8d5;

  color: #111827;
}


/* ==============================
   目次階層ごとの文字サイズ
   ============================== */

.toc-level-1 > .toc-item {
  font-weight: bold;

  font-size: 16px;
}


.toc-level-2 > .toc-item {
  font-weight: bold;

  font-size: 15px;
}


.toc-level-3 > .toc-item {
  font-size: 14px;
}


.toc-level-4 > .toc-item,
.toc-level-5 > .toc-item,
.toc-level-6 > .toc-item,
.toc-level-7 > .toc-item,
.toc-level-8 > .toc-item,
.toc-level-9 > .toc-item {
  font-size: 13px;
}


/* ==============================
   目次なし
   ============================== */

.toc-empty {
  margin: 0;

  color: #777777;

  font-size: 13px;
}


/* ==============================
   タブ
   ============================== */

.tabs {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 20px;
}


.tab-button {
  border:
    1px solid #475569;

  background: #1e293b;

  color: #cbd5e1;

  padding:
    10px 15px;

  border-radius: 8px;

  cursor: pointer;

  transition: 0.2s;
}


.tab-button:hover {
  background: #334155;

  color: #ffffff;
}


.tab-button.active {
  background:
    linear-gradient(
      135deg,
      #4f46e5,
      #2563eb
    );

  border-color:
    transparent;

  color: white;

  box-shadow:
    0 4px 14px
    rgba(
      79,
      70,
      229,
      0.35
    );
}


/* ==============================
   タブ内容
   ============================== */

.tab-content {
  border-top:
    1px solid #334155;

  padding-top: 18px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}


.tab-content p {
  color: #cbd5e1;

  line-height: 1.8;
}


/* ==============================
   辞書カード
   ============================== */

.dictionary-card {
  background: #1e293b;

  border:
    1px solid #334155;

  border-radius: 10px;

  padding: 18px;
}


/* ==============================
   辞書ラベル
   ============================== */

.dictionary-label {
  margin:
    0 0 6px;

  color: #94a3b8;

  font-size: 13px;
}


/* ==============================
   選択単語
   ============================== */

.selected-word {
  margin:
    0 0 22px;

  color: #818cf8;

  font-size: 26px;

  font-weight: bold;
}


/* ==============================
   辞書の意味
   ============================== */

.word-meaning {
  margin: 0;

  color: #e2e8f0;

  line-height: 1.8;
}

/* ==============================
   水野先生の和訳
   ============================== */

.mizuno-label {
  margin-top: 22px;
}

.mizuno-meaning {
  white-space: pre-line;
}


/* ==============================
   編集ボタン
   ============================== */

.edit-actions {
  display: flex;

  gap: 10px;

  margin-top: 24px;
}


.action-button {
  border:
    1px solid #475569;

  background: #1e293b;

  color: #e2e8f0;

  padding:
    9px 18px;

  border-radius: 8px;

  cursor: pointer;
}


.action-button:hover {
  background: #334155;
}


.restore-button {
  border-color: #7f1d1d;
  color: #fecaca;
}

.restore-button:hover {
  background: #451a1a;
}

.save-button {
  background:
    linear-gradient(
      135deg,
      #4f46e5,
      #2563eb
    );

  border-color:
    transparent;

  color: white;
}


/* ==============================
   編集可能部分
   ============================== */

[contenteditable="true"] {
  background: #0f172a;

  border:
    1px solid #6366f1;

  border-radius: 6px;

  padding: 8px;

  outline: none;
}


/* ==============================
   本文スクロール
   ============================== */

.text-area {
  overflow-y: auto;

  min-height: 0;
}


/* ==============================
   サイドパネルスクロール
   ============================== */

.side-panel {
  overflow-y: auto;

  min-height: 0;
}


/* ==============================
   スマートフォン
   ============================== */

@media (max-width: 800px) {

  .layout {
    grid-template-columns: 1fr;
  }

}


/* ==============================
   選択部分の参考訳
   ============================== */

.translation-help,
.translation-status {
  color: #cbd5e1;
  line-height: 1.6;
}

.selected-pali-text {
  padding: 10px 12px;
  border: 1px solid #475569;
  border-radius: 8px;
  background: #0f172a;
  color: #f8fafc;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.selection-translation-result {
  color: #f8fafc;
  font-size: 1.1rem;
  line-height: 1.8;
  white-space: pre-wrap;
}

.selection-gloss-details {
  margin-top: 18px;
  color: #cbd5e1;
}

.selection-gloss-details summary {
  cursor: pointer;
}

.selection-gloss-details li {
  margin: 6px 0;
  line-height: 1.6;
}

.morphology-candidate {
  display: block;
  margin-top: 3px;
  color: #aab8ca;
  font-size: 0.88em;
}

.morphology-unavailable {
  color: #8492a6;
}

.word-morphology {
  margin: 12px 0 18px;
  padding: 10px 12px;
  border-left: 3px solid #64748b;
  border-radius: 4px;
  background: rgba(100, 116, 139, 0.12);
  color: #cbd5e1;
  line-height: 1.65;
}

.word-morphology p {
  margin: 4px 0;
}

.word-morphology .morphology-title {
  margin-bottom: 6px;
  color: #e2e8f0;
}