/* ============================================================
   design_mobile.css — モバイル版 デザインCSS
   色・フォント・背景・ボーダー・装飾スタイル

   【このファイルについて】
   ビジュアルデザインに関するすべての設定をここに記述します。
   レイアウトや機能に影響を与えずに、見た目のカスタマイズが可能です。

   【編集ガイド】
   - 色を変えたい場合      → 「CSS変数」セクションの --c-xxx 変数を編集
   - フォントを変えたい場合 → body の font-family を編集
   - ヘッダーのデザイン    → 「ヘッダー デザイン」セクションを編集
   - 各パーツの色         → 該当するセクションを編集

   【ファイル構成】
   style_mobile.css  ← システムCSS（触らない）
   design_mobile.css ← このファイル（デザイン変更用）
============================================================ */


/* ============================================================
   RESET & BASE
============================================================ */
html { height: 100%; }
body {
  font-family: 'Noto Sans JP', sans-serif;
  background: #1a1a1a;
  color: #2a2420;
}
a {
  color: inherit;
}
button {
  font-family: inherit;
  border: none;
  background: none;
}

/* ============================================================
   CSS変数
============================================================ */
:root {
  --c-bg:       #f5f2ed;
  --c-surface:  #ffffff;
  --c-surface2: #f0ece6;
  --c-border:   #ddd8d0;
  --c-border2:  #c8c0b4;
  --c-crimson:  #9b2335;
  --c-crimson-dk: #7a1928;
  --c-gold:     #b07d1a;
  --c-text:     #2a2420;
  --c-text-sub: #6a5f54;
  --c-text-dim: #a09080;
  --c-warn:     #c04a10;
  --c-success:  #2e7d32;
  --ease:       0.18s ease;
  --header-h:   84px;   /* 56px × 1.5 */
  --bar-h:      44px;
}

/* ============================================================
   LAYOUT
============================================================ */
#app {
  background: var(--c-bg);
}

/* ============================================================
   HEADER（固定）
============================================================ */
#header {
  background: #000;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto var(--header-h);
  border-bottom: 2px solid var(--c-crimson);
}
#header-avatar {
  border-radius: 12px;
  border: 1px solid rgba(155,35,53,.6);
}

/* ヘッダー右ブロック：アイコンの右側 */

/* タイトルは右上 */
#header-title {
  font-family: 'Arial Black', Arial, sans-serif;
  color: #cc0033;
  text-shadow: 2px 2px 4px rgba(0,0,0,.9), 0 0 20px rgba(0,0,0,.8);
}

/* キャッチコピーは左下 */
#header-tagline {
  color: rgba(220,210,200,.75);
  text-shadow: 1px 1px 3px rgba(0,0,0,.9);
}

/* ============================================================
   RESULT BAR (sticky — スクロールで一番上に固定)
============================================================ */
#result-bar {
  background: rgba(245,242,237,.97);
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* ナビアイコン群（左側） */

/* bar-nav内の縦ラインは左右マージンで隙間を制御 */
.bar-nav-btn {
  border-radius: 8px;
  color: var(--c-text-sub);
  border: 1px solid var(--c-border2);
  background: var(--c-surface);
}
.bar-nav-btn:active {
  background: var(--c-crimson);
  border-color: var(--c-crimson);
  color: #fff;
}

/* 区切り線 */
#bar-nav-sep {
  background: var(--c-border);
}

/* フィルターチップ */

/* result-bar の選択タグ横スクロール */
.tag-bar-chip {
  border-radius: 20px;
  background: rgba(155,35,53,.12);
  border: 1px solid rgba(155,35,53,.4);
  color: var(--c-crimson);
}
.tag-bar-chip:active {
  background: var(--c-crimson);
  color: #fff;
}
.tag-bar-chip .chip-x {
  opacity: .7;
}
.filter-chip {
  border-radius: 20px;
  background: rgba(155,35,53,.1);
  border: 1px solid rgba(155,35,53,.35);
  color: var(--c-crimson);
}
.filter-chip button {
  color: var(--c-crimson);
}

/* ============================================================
   MAIN SCROLL AREA
============================================================ */

/* ============================================================
   リンクリスト
============================================================ */
.link-row {
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: 8px;
}
.link-row.gensen {
  border-left: 3px solid var(--c-gold);
}
.link-row.pressing {
  background: rgba(155,35,53,.12);
}

/* 左カラム：ファビコン＋クリック数 */

/* ファビコン：タイトル行＋タグ行の高さを1辺とした正方形 */
.row-thumb {
  border-radius: 6px;
  background: var(--c-bg);
}

/* クリック数 */
.row-clicks {
  color: var(--c-text-dim);
}

/* 右カラム：タイトル・タグ・メモ */

/* タイトル行 */
.row-title {
  color: var(--c-text);
}
.row-dead {
  color: var(--c-warn);
}

/* タグ行：厳選リボンバッジ + タグ */

/* 厳選バッジ（リボン型：左フラット・右がV字切り欠き） */
.row-gensen-badge {
  background: var(--c-gold);
  color: #fff;
}
.row-tag {
  border-radius: 3px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  color: var(--c-text-dim);
}

/* メモ：2行固定 */
.row-desc {
  color: var(--c-text-sub);
}

/* ============================================================
   詳細ポップアップ（上から降りてくる）
============================================================ */
#detail-overlay {
  background: rgba(0,0,0,.5);
  opacity: 0;
}
#detail-overlay.show {
  opacity: 1;
}
#detail-panel {
  background: var(--c-surface);
  border-radius: 16px;
}
#detail-thumb {
  background: var(--c-surface2);
}

/* リンクアイコン（右上） */
#detail-link-icon {
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  color: #fff;
}

/* OGP左上エリア：共有アイコン＋更新日 横並び */
#detail-share-thumb {
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  color: #fff;
  border: none;
}
#detail-share-thumb:active {
  background: rgba(155,35,53,.8);
}
#detail-updated-at {
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}

/* ファビコン左カラム：ファビコン＋クリック数 */
#detail-clicks {
  color: var(--c-text-dim);
}
#detail-thumb-placeholder {
  background: var(--c-surface2);
}
#detail-thumb-favicon {
  border-radius: 12px;
}
#detail-thumb-domain {
  color: var(--c-text-dim);
}

/* ファビコン＋タイトル＋URLの横並びブロック */
#detail-header-favicon {
  border-radius: 8px;
  background: var(--c-surface2);
}
#detail-title {
  color: var(--c-text);
}

/* URLはOGP画像エリア右下に移動（CSS）*/
#detail-url {
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.detail-tag {
  border-radius: 4px;
  background: var(--c-bg);
  border: 1px solid var(--c-border2);
  color: var(--c-text-sub);
}
#detail-desc {
  color: var(--c-text);
}
#detail-desc::-webkit-scrollbar-track {
  background: transparent;
}
#detail-desc a {
  color: var(--c-crimson);
}
#detail-footer {
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
}
#detail-open-btn {
  background: var(--c-crimson);
  color: #fff;
  border-radius: 8px;
}
#detail-open-btn:active {
  background: var(--c-crimson-dk);
}
.detail-icon-btn {
  border-radius: 8px;
  border: 1px solid var(--c-border2);
  color: var(--c-text-sub);
  background: var(--c-surface2);
}
.detail-icon-btn:active {
  background: var(--c-crimson);
  border-color: var(--c-crimson);
  color: #fff;
}

/* ============================================================
   検索バー（下から引き上げ式）
============================================================ */
#search-tab {
  background: var(--c-crimson);
  color: #fff;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -3px 12px rgba(0,0,0,.2);
}

/* 引き上げインジケーター（ピル型バー） */
#search-drag-indicator {
  border-radius: 2px;
  background: rgba(255,255,255,0.5);
}

/* コンテンツ行（search-tab-left + tab-sort）横並び */
#search-tab-count {
  opacity: .9;
}
.tab-sort-btn {
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.4);
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.1);
}
.tab-sort-btn.active {
  background: #fff;
  color: var(--c-crimson);
  border-color: #fff;
}
#search-panel {
  background: var(--c-surface);
  box-shadow: 0 -4px 20px rgba(0,0,0,.2);
}

/* 検索入力 */
#search-input-wrap {
  border-bottom: 1px solid var(--c-border);
}

/* すべて・リロードボタン */
#search-login-btn, #search-reload-btn, #search-share-btn {
  border-radius: 8px;
  color: var(--c-text-sub);
  border: 1px solid var(--c-border2);
  background: var(--c-surface2);
}
#search-login-btn:active, #search-reload-btn:active, #search-share-btn:active {
  background: var(--c-crimson);
  border-color: var(--c-crimson);
  color: #fff;
}

/* 新規登録ボタン：縦ラインの右にスペースなしでうっすら赤 */
#btn-new {
  border-radius: 8px;
  color: var(--c-crimson);
  border: 1px solid rgba(155,35,53,.5);
  background: rgba(155,35,53,.08);
}
#btn-new:active {
  background: var(--c-crimson);
  border-color: var(--c-crimson);
  color: #fff;
}

/* タグエリアとの区切り縦ライン */
#bar-chips-sep {
  background: var(--c-border);
}

/* 虫眼鏡アイコン付き検索ボックスのラッパー */
#search-input-icon {
  color: var(--c-text-dim);
}
#search-input {
  border-radius: 8px;
  font-family: inherit;
  background: var(--c-bg);
  color: var(--c-text);
}
#search-input:focus {
  border-color: var(--c-crimson);
}
#search-input:focus + #search-input-icon,
#search-input-box:focus-within #search-input-icon {
  color: var(--c-crimson);
}
#search-clear-btn {
  border-radius: 8px;
  color: var(--c-text-dim);
  border: 1px solid var(--c-border2);
  background: var(--c-surface2);
}

/* フィルターモード */

/* すべて・厳選 横並び固定エリア */
#search-top-tags {
  border-bottom: 1px solid var(--c-border);
}
#search-filter-row {
  border-bottom: 1px solid var(--c-border);
}
#search-filter-label {
  color: var(--c-text-sub);
}

/* 右寄せ */
.filter-mode-btn {
  border-radius: 4px;
  border: 1px solid var(--c-border2);
  color: var(--c-text-dim);
  background: transparent;
}
.filter-mode-btn.active {
  background: var(--c-border2);
  color: var(--c-text);
}

/* タグ一覧：横並びフロー */
.search-tag-item {
  border-radius: 20px;
  border: 1px solid var(--c-border2);
  color: var(--c-text-sub);
  background: var(--c-surface);
}
.search-tag-item.active {
  background: rgba(155,35,53,.1);
  border-color: rgba(155,35,53,.5);
  color: var(--c-crimson-dk);
}
.search-tag-item.gensen-item {
  color: var(--c-gold);
  border-color: rgba(176,125,26,.4);
}
.search-tag-item.gensen-item.active {
  background: rgba(176,125,26,.1);
  border-color: var(--c-gold);
}
.search-tag-divider {
  background: var(--c-border);
}
.tag-chip-bar.gensen-chip {
  background: rgba(176,125,26,.15);
  color: var(--c-gold);
  border: 1px solid rgba(176,125,26,.4);
}
.search-tag-count {
  color: var(--c-text-dim);
  background: var(--c-surface2);
  border-radius: 10px;
}

/* ============================================================
   共有モーダル（QRコード）
============================================================ */
#share-modal {
  background: rgba(0,0,0,.55);
  opacity: 0;
}
#share-modal.show {
  opacity: 1;
}

/* 消えるとき: オーバーレイをフェードアウトしながらボックスを上へ */
#share-modal.hide {
  opacity: 0;
}
#share-modal-box {
  background: var(--c-surface);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
#share-modal-header {
  background: var(--c-surface2);
  border-bottom: 1px solid var(--c-border);
}
#share-modal-title {
  color: var(--c-text);
}
#share-modal-close {
  color: var(--c-text-dim);
}
#share-url-input {
  border: 1px solid var(--c-border2);
  border-radius: 6px;
  font-family: inherit;
  background: var(--c-bg);
  color: var(--c-text-sub);
}
#btn-copy-url {
  border-radius: 6px;
  border: 1px solid var(--c-border2);
  background: var(--c-surface2);
  color: var(--c-text-sub);
}
#btn-copy-url.copied {
  background: var(--c-success);
  border-color: var(--c-success);
  color: #fff;
}

/* QR保存ボタン: アイコンボタン（URLテキストボックス左） */
#btn-qr-dl {
  border-radius: 6px;
  border: 1px solid var(--c-border2);
  background: var(--c-surface2);
  color: var(--c-text-sub);
}

/* 閉じるボタン（幅いっぱい） */
#btn-share-close {
  border-radius: 6px;
  font-family: inherit;
  border: 1px solid var(--c-border2);
  background: var(--c-surface2);
  color: var(--c-text-sub);
}
#btn-share-close:hover {
  border-color: var(--c-text-sub);
  color: var(--c-text);
}

/* ============================================================
   ログインモーダル
============================================================ */
.modal-overlay {
  background: rgba(0,0,0,.5);
}
.modal-box {
  background: var(--c-surface);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.modal-header {
  background: var(--c-surface2);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
}
.modal-close {
  color: var(--c-text-dim);
}
.form-label {
  color: var(--c-text-sub);
}
.form-input {
  border: 1px solid var(--c-border2);
  border-radius: 6px;
  font-family: inherit;
  background: var(--c-bg);
  color: var(--c-text);
}
.form-input:focus {
  border-color: var(--c-crimson);
}
.btn-primary {
  background: var(--c-crimson);
  color: #fff;
  border-radius: 8px;
}
.btn-primary:active {
  background: var(--c-crimson-dk);
}

/* ============================================================
   編集パネル（下からスライドアップ）
============================================================ */
#edit-panel {
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,.25);
}
#edit-overlay {
  background: rgba(0,0,0,.5);
}
#edit-panel-header {
  background: var(--c-crimson);
}
#edit-panel-title {
  color: #fff;
}
#edit-panel-close {
  color: rgba(255,255,255,.8);
}

/* Wiki記法入力補助ボタン */
.btn-wiki-insert {
  color: var(--c-text-dim);
  border: 1px solid var(--c-border2);
  border-radius: 4px;
  background: var(--c-surface2);
}
.btn-wiki-insert:hover, .btn-wiki-insert:active {
  background: var(--c-crimson);
  border-color: var(--c-crimson);
  color: #fff;
}
.form-label {
  color: var(--c-text-sub);
}
.form-input {
  border: 1px solid var(--c-border2);
  border-radius: 6px;
  font-family: inherit;
  background: var(--c-bg);
  color: var(--c-text);
}
.form-input:focus {
  border-color: var(--c-crimson);
}
.form-textarea {
  border: 1px solid var(--c-border2);
  border-radius: 6px;
  font-family: inherit;
  background: var(--c-bg);
  color: var(--c-text);
}
.form-textarea:focus {
  border-color: var(--c-crimson);
}

/* URL行: テキストボックス + 取得ボタン */
#btn-edit-fetch {
  color: #fff;
  border-radius: 6px;
}
#btn-edit-fetch:active {
  background: var(--c-crimson-dk);
}
#btn-edit-fetch .spinner {
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 50%;
}

/* サイト名行: ファビコン + テキストボックス */
#edit-favicon-wrap {
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
}
#edit-favicon-placeholder {
  opacity: .35;
}

/* タグ入力 */
#edit-tag-input {
  border: 1px solid var(--c-border2);
  border-radius: 6px;
  font-family: inherit;
  background: var(--c-bg);
  color: var(--c-text);
}
#edit-tag-input:focus {
  border-color: var(--c-crimson);
}
.edit-tag-chip {
  border-radius: 4px;
  background: rgba(155,35,53,.1);
  border: 1px solid rgba(155,35,53,.35);
  color: var(--c-crimson-dk);
}
.edit-tag-chip button {
  color: var(--c-crimson);
}
.palette-chip {
  border-radius: 4px;
  border: 1px solid var(--c-border2);
  color: var(--c-text-sub);
  background: var(--c-surface2);
}
.palette-chip.selected {
  background: rgba(155,35,53,.1);
  border-color: var(--c-crimson);
  color: var(--c-crimson-dk);
}

/* OGP画像プレビュー */
#edit-thumb-area {
  border-radius: 6px;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
}

/* gensen チェック */
#edit-gensen-wrap {
  border-radius: 8px;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
}
#edit-gensen-wrap input[type="checkbox"] {
  accent-color: var(--c-gold);
}
#edit-gensen-label {
  color: var(--c-text-sub);
}
#edit-panel-footer {
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
}
#edit-save-btn {
  background: var(--c-crimson);
  color: #fff;
  border-radius: 8px;
}
#edit-delete-btn {
  border: 1px solid var(--c-warn);
  color: var(--c-warn);
  border-radius: 8px;
}
#edit-delete-btn:active {
  background: var(--c-warn);
  color: #fff;
}

/* ============================================================
   トースト
============================================================ */
.toast {
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  background: var(--c-surface);
  border: 1px solid var(--c-border2);
  color: var(--c-text);
}
.toast.success {
  background: #e8f5e9;
  border-color: var(--c-success);
  color: var(--c-success);
}
.toast.error {
  background: #fdecea;
  border-color: var(--c-warn);
  color: var(--c-warn);
}

/* ============================================================
   スピナー / 空表示
============================================================ */
.spinner-wrap {
  color: var(--c-text-dim);
}
.spinner {
  border: 2px solid var(--c-border2);
  border-radius: 50%;
}
.empty-state {
  color: var(--c-text-dim);
}
/* ============================================================
   PCバナー デザイン
============================================================ */
#pc-banner {
  background: var(--c-surface2);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text-sub);
}
.pc-banner-text { 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:active { 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:active { border-color: var(--c-text-sub); color: var(--c-text-sub); }