/* ============================================================
   design.css — デザインCSS（ライトテーマ）
   LinkCMS 色・フォント・背景・ボーダー・装飾スタイル
   
   【このファイルについて】
   ビジュアルデザインに関するすべての設定をここに記述します。
   レイアウトや機能に影響を与えずに、見た目のカスタマイズが可能です。
   
   【ダークテーマのバックアップ】
   design.css.dark.bak に保存済み
   
   【編集ガイド】
   - 色を変えたい場合     → 「カラーパレット」セクションの変数を編集
   - フォントを変えたい場合 → 「タイポグラフィ」セクションを編集
   - ヘッダーのデザイン    → 「ヘッダー デザイン」セクションを編集
   - 各パーツの色         → 該当するセクションを編集
   
   【ファイル構成】
   style.css        ← システムCSS（触らない）
   design.css       ← このファイル（デザイン変更用）
   design.css.dark.bak ← ダークテーマのバックアップ
============================================================ */

/* ============================================================
   カラーパレット & CSS変数
   ここを変更するだけで全体の配色が変わります
============================================================ */
/* ページ背景 — ここだけ変えれば全体の背景が変わります */
html {
  background:
    radial-gradient(
      ellipse 180% 200% at 100% 0%,
      #000000  0%,
      #000000 10%,
      #1a1a1a 25%,
      #3d3d3d 45%,
      #707070 65%,
      #a8a8a8 82%,
      #d0d0d0 100%
    );
  min-height: 100vh;  /* 背景グラデーションをページ全体に適用するために必要 */
}

:root {
  /* --- 背景色 --- */
  --c-bg:         #f5f2ed;   /* ページ全体：温かみのあるオフホワイト */
  --c-surface:    #ffffff;   /* カード・パネル：白 */
  --c-surface2:   #f0ece6;   /* 入力欄・サブパネル：薄ベージュ */

  /* --- ボーダー --- */
  --c-border:     #ddd8d0;   /* 主要ボーダー */
  --c-border2:    #c8c0b4;   /* サブボーダー */

  /* --- アクセントカラー（深紅） --- */
  --c-crimson:    #9b2335;   /* メインアクセント */
  --c-crimson-dk: #7a1928;   /* 暗め */
  --c-crimson-lt: #c42840;   /* 明るめ */

  /* --- アクセントカラー（ゴールド） --- */
  --c-gold:       #b07d1a;   /* 厳選・重要（ライト向けに少し濃く） */
  --c-gold-lt:    #c8920f;   /* リンク色 */

  /* --- テキスト色 --- */
  --c-text:       #2a2420;   /* 主要テキスト：濃いブラウン系 */
  --c-text-sub:   #6a5f54;   /* サブテキスト */
  --c-text-dim:   #a09080;   /* 薄いテキスト */

  /* --- リンク色 --- */
  --c-link:       #9b2335;   /* ダークより濃い深紅でライト背景でも読みやすく */

  /* --- タグ背景 --- */
  --c-tag-bg:     #ede8e0;

  /* --- ステータスカラー --- */
  --c-success:    #2e7d32;
  --c-warn:       #c04a10;

  /* --- サイズ変数 --- */
  --sidebar-w:    200px;
  --header-h:     160px;
  --radius:       4px;
  --radius-md:    6px;
  --ease:         0.18s ease;

  /* --- フォント --- */
  --font-ja:      'Noto Sans JP', 'Meiryo', sans-serif;
  --font-disp:    'Bebas Neue', 'Impact', sans-serif;

  /* --- シャドウ（ライトテーマ向け：やや強め） --- */
  --shadow-card:  0 1px 4px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --shadow-modal: 0 8px 32px rgba(0,0,0,.18);
}


/* ============================================================
   ヘッダー デザイン
   ★ このセクションはダークのまま維持 ★
   月背景・タイトルロゴのデザインを変えないこと
============================================================ */
#header {
  background-color: #000;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto var(--header-h);  /* ヘッダー高さに収める */
  border-bottom: 3px solid var(--c-crimson);
  box-shadow: 0 3px 16px rgba(0,0,0,.5);
}

.header-nav {
  border-top: 1px solid rgba(155,35,53,.4);
  background: rgba(0,0,0,.55);
}

.header-avatar {
  border: 2px solid rgba(155,35,53,.7);
  background: #1a1a1a;
  border-radius: 12px;
}
.header-avatar-placeholder {
  font-size: 32px;
  color: var(--c-crimson);
}

.header-site-title {
  font-size: 52px;
  font-family: 'Arial Black', 'Arial Bold', Arial, sans-serif;
  color: #cc0033;
  text-shadow:
    2px  2px  4px rgba(0,0,0,.9),
    0    0   20px rgba(0,0,0,.8),
    0    0   40px rgba(204,0,51,.4);
}

.header-tagline {
  font-size: 11px;
  color: rgba(220,210,200,.8);
  text-shadow: 1px 1px 3px rgba(0,0,0,.9);
}


/* ============================================================
   ナビバー デザイン（ヘッダー内 → ダーク維持）
============================================================ */
.nav-link {
  color: rgba(220,210,200,.75);
}
.nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.12);
  text-decoration: none;
}
.nav-sep { color: rgba(155,35,53,.6); }

.btn-login {
  background: transparent;
  border: 1px solid rgba(155,35,53,.8);
  color: #cc0033;
}
.btn-login:hover { background: var(--c-crimson); color: #fff; }
.btn-login.logged-in { background: var(--c-crimson); color: #fff; }

.btn-nav-icon {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(155,35,53,.7);
  color: rgba(220,200,200,.9);
}
.btn-nav-icon:hover { background: var(--c-crimson); color: #fff; }

/* クレジットチップ */
.nav-credit {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  color: rgba(220,210,200,.55);
  border: 1px solid rgba(220,210,200,.2);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--ease);
  flex-shrink: 0;
}
.nav-credit:hover {
  color: rgba(220,210,200,.9);
  border-color: rgba(220,210,200,.45);
  text-decoration: none;
}


/* ============================================================
   サイドバー デザイン
============================================================ */
#sidebar {
  border-right: 1px solid var(--c-border);
  background: rgba(250,248,244,.90);  /* 半透明（backdrop-filter不使用） */
  border-radius: 0 8px 0 0;
}
#sidebar::-webkit-scrollbar-thumb { background: var(--c-border2); }
#sidebar-scroll::-webkit-scrollbar-thumb { background: var(--c-border); }

.sidebar-heading {
  color: var(--c-text-dim);
  border-bottom: 1px solid var(--c-border);
  font-size: 10px;
  letter-spacing: 1.5px;
}

.filter-mode-btn {
  background: transparent;
  border: 1px solid var(--c-border2);
  color: var(--c-text-dim);
}
.filter-mode-btn.active { background: var(--c-border2); color: var(--c-text); }
.filter-mode-btn:hover { border-color: var(--c-text-sub); }
.filter-mode-btn::after {
  background: #fff;
  border: 1px solid var(--c-border);
  color: var(--c-text-sub);
}

.tag-item {
  font-size: 13px;
  color: var(--c-text-sub);
}
.tag-item:hover { background: var(--c-surface2); color: var(--c-text); }
.tag-item.active {
  border-left-color: var(--c-crimson);
  background: rgba(155,35,53,.07);
  color: var(--c-crimson-dk);
  font-weight: 600;
}
.tag-item.gensen.active { border-left-color: var(--c-gold); }
.tag-item.gensen { color: var(--c-gold); }

.tag-count {
  font-size: 11px;
  color: var(--c-text-dim);
  background: var(--c-surface2);
}
.tag-item.active .tag-count { color: var(--c-text-sub); }

.sidebar-search-section { border-bottom: 1px solid var(--c-border); }
.sidebar-search-input {
  background: #fff;
  border: 1px solid var(--c-border2);
  color: var(--c-text);
}
.sidebar-search-input:focus { border-color: var(--c-crimson); }
.sidebar-search-input::placeholder { color: var(--c-text-dim); }
.sidebar-search-icon { color: var(--c-text-dim); }


/* ============================================================
   件数バー デザイン
============================================================ */
.result-bar {
  border: 1px solid rgba(221,216,208,.7);
  border-radius: 8px;
  color: var(--c-text-sub);
  background: rgba(245,242,237,.92);  /* 半透明（backdrop-filter不使用） */
}
.result-count strong { color: var(--c-crimson); }

.filter-chip {
  background: rgba(155,35,53,.08);
  border: 1px solid rgba(155,35,53,.35);
  color: var(--c-crimson);
}

.sort-btn {
  background: transparent;
  border: 1px solid var(--c-border2);
  color: var(--c-text-sub);
}
.sort-btn:hover { border-color: var(--c-gold); color: var(--c-gold); }
.sort-btn.active { background: var(--c-gold); border-color: var(--c-gold); color: #fff; font-weight: 700; }

.view-toggle { border: 1px solid var(--c-border2); }
.view-toggle button { color: var(--c-text-sub); }
.view-toggle button.active { background: var(--c-surface2); color: var(--c-text); }
.view-toggle button:hover:not(.active) { color: var(--c-text); }

#btn-sidebar-toggle {
  border: 1px solid var(--c-border2);
  color: var(--c-text-dim);
}
#btn-sidebar-toggle:hover { border-color: var(--c-crimson); color: var(--c-crimson); }
.btn-share-icon {
  background: var(--c-surface);
  border: 1px solid var(--c-border2);
  color: var(--c-text-sub);
}
.btn-share-icon:hover { background: var(--c-crimson); border-color: var(--c-crimson); color: #fff; }


/* ============================================================
   リンクカード デザイン
============================================================ */
.link-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-card);
}
.link-card:hover {
  border-color: var(--c-crimson);
  box-shadow: 0 4px 16px rgba(155,35,53,.15), 0 1px 4px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.link-card.gensen { border-color: rgba(176,125,26,.4); }
.link-card.gensen:hover { border-color: var(--c-gold); }

.card-thumb { background: var(--c-surface2); }
.card-thumb-favicon-lg {
  background: var(--c-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.card-thumb-domain { color: var(--c-text-dim); }

.gensen-ribbon { background: var(--c-gold); color: #fff; }
.dead-badge { background: var(--c-warn); color: #fff; }

.card-title { color: var(--c-text); }
.card-desc  { color: var(--c-text-sub); }
.card-clicks { color: var(--c-text-dim); }

.tag-chip {
  background: var(--c-tag-bg);
  border: 1px solid var(--c-border);
  color: var(--c-text-sub);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  cursor: pointer;
  transition: all var(--ease);
  white-space: nowrap;
}
.tag-chip:hover { border-color: var(--c-crimson); color: var(--c-crimson); background: rgba(155,35,53,.06); }


/* ============================================================
   カードポップアップ デザイン
============================================================ */
.card-popup-inner {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 0 0 1px rgba(155,35,53,.15);
}
.card-popup-inner.gensen { border-color: rgba(176,125,26,.5); }
.card-popup-link-btn {
  background: rgba(255,255,255,.85);
  border: 1px solid var(--c-border);
  color: var(--c-text-sub);
}
.card-popup-thumb:hover .card-popup-link-btn {
  background: var(--c-crimson);
  border-color: var(--c-crimson);
  color: #fff;
}
.card-popup-title  { color: var(--c-text); }
.card-popup-desc   { color: var(--c-text-sub); scrollbar-color: var(--c-border2) transparent; }
.card-popup-desc::-webkit-scrollbar-thumb { background: var(--c-border2); }
.card-popup-desc a { color: var(--c-link); }
.card-popup-tags::-webkit-scrollbar-thumb { background: var(--c-border2); }
.card-popup-clicks { color: var(--c-text-sub); }
.card-popup-share-btn {
  background: var(--c-surface2);
  border: 1px solid var(--c-border2);
  color: var(--c-text-sub);
}
.card-popup-share-btn:hover { background: var(--c-crimson); border-color: var(--c-crimson); color: #fff; }


/* ============================================================
   リスト表示 デザイン
============================================================ */
/* リスト表示コンテナ — 構造は style.css が管理（display:none / display:flex の切り替えはJS+style.cssが行う）*/
#links-list {
  background: transparent;
  border-radius: var(--radius-md);
  /* flex-direction: column / gap: 6px は style.css の #links-list.active で管理 */
}
.link-row {
  border-bottom: none;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: background var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.link-row:hover {
  background: #e8d4d7;                /* 不透明な淡い深紅（黒背景に影響されない） */
  border-color: rgba(155,35,53,.5);
  box-shadow: 0 2px 10px rgba(155,35,53,.15);
}
.link-row:hover .row-title  { color: var(--c-crimson-dk); }
.link-row:hover .row-desc   { color: var(--c-text-sub); }
.link-row.gensen { border-left: 3px solid var(--c-gold); }

.row-thumb { background: var(--c-surface2); }
.row-title  { color: var(--c-text); }
.row-desc   { color: var(--c-text-sub); }
.row-desc a { color: var(--c-link); }
.row-clicks { color: var(--c-text-dim); }

.row-ogp-float { box-shadow: 0 4px 20px rgba(0,0,0,.20); }  /* style.css の --shadow-ogp-float 変数で管理可 */
.row-gensen-badge { background: var(--c-gold); color: #fff; }

.row-action-btn {
  background: var(--c-surface);
  border: 1px solid var(--c-border2);
  color: var(--c-text-sub);
}
.row-action-btn:hover { background: var(--c-crimson); border-color: var(--c-crimson); color: #fff; }

[title="編集"] {
  border-color: var(--c-gold) !important;
  color: var(--c-gold) !important;
}
[title="編集"]:hover {
  background: var(--c-crimson) !important;
  border-color: var(--c-crimson) !important;
  color: #fff !important;
}


/* ============================================================
   編集・登録パネル デザイン
============================================================ */
#reg-panel {
  background: var(--c-surface);
  border-left: 2px solid var(--c-crimson);
  box-shadow: -6px 0 24px rgba(0,0,0,.12);
}
.reg-panel-header {
  background: var(--c-crimson);
  border-bottom: 1px solid var(--c-crimson-dk);
}
.reg-panel-title { color: #fff; }
.reg-panel-close { color: rgba(255,255,255,.7); }
.reg-panel-close:hover { color: #fff; }
.reg-panel-body::-webkit-scrollbar-thumb { background: var(--c-border2); }

.form-label  { color: var(--c-text-sub); }
.form-input, .form-textarea, .form-select {
  background: #fff;
  border: 1px solid var(--c-border2);
  color: var(--c-text);
}
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--c-crimson); }

.reg-favicon-wrap {
  border: 1px solid var(--c-border2);
  background: var(--c-surface2);
}

.btn-fetch {
  background: rgba(155,35,53,.08);
  border: 1px solid rgba(155,35,53,.4);
  color: var(--c-crimson);
}
.btn-fetch:hover { background: var(--c-crimson); color: #fff; border-color: var(--c-crimson); }

/* ── OGP画像プレビュー ─────────────────────────────────────────────────────── */
.thumb-preview-area {
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
}
.thumb-preview-img { background: var(--c-bg); }
/* thumb-opt-btn は廃止（アップロード機能廃止に伴い）*/

/* ── PC版タグ編集チップ ─────────────────────────────────────────────────── */
.pc-tag-chip {
  background: rgba(155,35,53,.1);
  border-color: rgba(155,35,53,.35);
  color: var(--c-crimson-dk);
}
.pc-palette-chip {
  border: 1px solid var(--c-border2);
  color: var(--c-text-sub);
  background: var(--c-surface2);
}
.pc-palette-chip.selected {
  background: rgba(155,35,53,.1);
  border-color: var(--c-crimson);
  color: var(--c-crimson-dk);
}
/* 旧クラス tag-chips-input / input-tag-chip / tag-suggest / tag-palette-chip は廃止済み */

/* ── 厳選チェックボックス ───────────────────────────────────────────────── */
/* gensen-check-box（カスタム）は廃止。標準チェックボックス + label を使用 */
.gensen-check-wrap {
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
}
.gensen-check-wrap:hover { border-color: var(--c-gold); }
.gensen-check-wrap label { color: var(--c-text-sub); }
.gensen-check-wrap:has(input:checked) label { color: var(--c-gold); font-weight: 700; }

.reg-panel-footer {
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
}

/* ── Wiki記法ボタン ───────────────────────────────────────────────────── */
.btn-wiki-insert {
  color: var(--c-text-dim);
  border: 1px solid var(--c-border2);
  background: var(--c-surface2);
}
.btn-wiki-insert:hover {
  background: var(--c-crimson);
  border-color: var(--c-crimson);
  color: #fff;
}


/* ============================================================
   ボタン デザイン
============================================================ */
.btn-primary { background: var(--c-crimson); color: #fff; }
.btn-primary:hover { background: var(--c-crimson-lt); }
.btn-secondary {
  background: transparent;
  border: 1px solid var(--c-border2);
  color: var(--c-text-sub);
}
.btn-secondary:hover { border-color: var(--c-text-sub); color: var(--c-text); }
.btn-danger {
  background: transparent;
  border: 1px solid var(--c-warn);
  color: var(--c-warn);
}
.btn-danger:hover { background: var(--c-warn); color: #fff; }


/* ============================================================
   モーダル デザイン
============================================================ */
.modal-overlay { background: rgba(0,0,0,.45); }
.modal-box {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-modal);
}
.modal-header {
  background: var(--c-surface2);
  border-bottom: 1px solid var(--c-border);
}
.modal-title { color: var(--c-text); }
.modal-close { color: var(--c-text-sub); }
.modal-close:hover { color: var(--c-text); }
.login-hint { color: var(--c-text-sub); }
.share-url-input {
  background: var(--c-surface2);
  border: 1px solid var(--c-border2);
  color: var(--c-text-sub);
}
.btn-copy {
  background: rgba(155,35,53,.1);
  border: 1px solid rgba(155,35,53,.4);
  color: var(--c-crimson);
}
.btn-copy:hover { background: var(--c-crimson); color: #fff; }
.btn-copy.copied { background: var(--c-success); border-color: var(--c-success); color: #fff; }
#qr-canvas { background: #fff; }
.btn-qr-dl {
  background: transparent;
  border: 1px solid var(--c-border2);
  color: var(--c-text-sub);
}
.btn-qr-dl:hover { border-color: var(--c-gold); color: var(--c-gold); }


/* ============================================================
   リンクチェック デザイン
============================================================ */
.linkcheck-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border2);
}
.linkcheck-header {
  background: var(--c-surface2);
  color: var(--c-text-sub);
}
.linkcheck-progress { background: var(--c-border); }
.linkcheck-progress-bar { background: var(--c-crimson); }
.linkcheck-results { color: var(--c-text-sub); }


/* ============================================================
   ドロップゾーン デザイン
============================================================ */
#drop-overlay { background: rgba(245,242,237,.92); }
.drop-zone-box {
  border: 3px dashed var(--c-crimson);
  color: var(--c-crimson);
}
.drop-zone-box p { color: var(--c-text-sub); }


/* ============================================================
   モバイルバナー デザイン
============================================================ */
#mobile-banner {
  background: var(--c-surface2);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text-sub);
}
.btn-banner-yes {
  background: rgba(155,35,53,.1);
  border: 1px solid rgba(155,35,53,.4);
  color: var(--c-crimson);
}
.btn-banner-yes:hover { background: var(--c-crimson); color: #fff; }
.btn-banner-no {
  background: transparent;
  border: 1px solid var(--c-border2);
  color: var(--c-text-dim);
}
.btn-banner-no:hover { border-color: var(--c-text-sub); color: var(--c-text-sub); }


/* ============================================================
   トースト通知 デザイン
============================================================ */
.toast {
  background: var(--c-surface);
  border: 1px solid var(--c-border2);
  color: var(--c-text);
  box-shadow: var(--shadow-modal);
}
.toast.success { border-color: var(--c-success); color: var(--c-success); }
.toast.error   { border-color: var(--c-warn); color: var(--c-warn); }


/* ============================================================
   空表示・スピナー デザイン
============================================================ */
.empty-state { color: var(--c-text-dim); }
.spinner {
  border: 2px solid var(--c-border2);
  border-top-color: var(--c-crimson);
}


/* ── 区切り線 ────────────────────────────────────────────────────────── */
.tag-divider { background: var(--c-border); }


/* ============================================================
   スクロールバー デザイン
============================================================ */
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: var(--c-border2); }
#sidebar::-webkit-scrollbar-thumb { background: var(--c-border); }


/* ============================================================
   タグ一括編集ツール デザイン（機能モーダル内）
   「機能」ボタンから開くタグ管理画面のスタイル
============================================================ */
.tools-tag-row { border-radius: var(--radius); }
.tools-tag-row:hover { background: var(--c-surface2); }
.tools-tag-chip { color: var(--c-text); font-size: 12px; font-weight: 600; }
.tools-tag-count { color: var(--c-text-dim); font-size: 10px; }
.tools-tag-btn {
  background: var(--c-surface2);
  border: 1px solid var(--c-border2);
  color: var(--c-text-sub);
}
.tools-tag-rename:hover { border-color: var(--c-gold); color: var(--c-gold); background: rgba(176,125,26,.08); }
.tools-tag-delete:hover { border-color: var(--c-warn); color: var(--c-warn); background: rgba(192,74,16,.06); }
.tools-tag-actions { opacity: 0; transition: opacity var(--ease); }
.tools-tag-row:hover .tools-tag-actions { opacity: 1; }

/* ============================================================
   END OF DESIGN CSS
   
   【追加・変更の際のガイドライン】
   - 色・背景・ボーダー・シャドウのみこのファイルで定義する
   - display/position/flex-direction/padding/margin など
     レイアウトに関わる値は style.css を編集する
   - 変数 (--c-xxx) の追加は :root セクションで行う
   - セクション見出しコメント形式を維持すること
============================================================ */