@import url('./../common/css/tokens.css');

/* =========================================
   Base
========================================= */
.main { padding:12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
hr { border:none; border-top:1px solid var(--border); margin:14px 0; }

/* =========================================
   Books / Bookshelf
========================================= */
.books { display:flex; flex-direction:column; gap:24px; }
.book-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.book-row .title { font-weight:700; font-size:18px; margin-right:auto; }
.book-actions { display:flex; gap:8px; flex-wrap:wrap; }

.bookshelf { display:grid; gap:16px; }
.book-card.panel { padding:18px; }
.book-card .book-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.book-card .book-title { font-weight:800; font-size:18px; margin-right:auto; }
.book-card .book-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* =========================================
   Checker: Preview (Bookshelf内の小型)
   10列固定 20px / gap 2px / none=枠のみ
========================================= */
.checker-preview {
  margin-top:12px;
  border:1px solid var(--border);
  background:var(--panel-2);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}
.checker-preview .grid {
  display:grid;
  grid-template-columns:repeat(10,20px);
  grid-auto-rows:20px;
  gap:2px;
  align-items:start;
  justify-content:start;
}
.checker-preview .sq {
  width:20px; height:20px; border-radius:3px;
  border:1px solid #2a3248; background:transparent;
}
.checker-preview .sq.red  { background:#ffd95b; border-color:#e6b422; }
.checker-preview .sq.blue { background:#3b82f6; border-color:#1d4ed8; }
.checker-preview .sq.gray { background:#4b5563; border-color:#374151; }
.checker-preview .sq.none { background:transparent; border-color:#2a3248; }

/* =========================================
   Learn / Swipe card（配色の基準）
========================================= */
.sw-shell { display:flex; flex-direction:column; align-items:center; gap:14px; }
.sw-head  { width:min(980px,95vw); display:flex; align-items:center; gap:10px; }
.sw-main  { width:min(980px,95vw); display:flex; justify-content:center; }
.sw-foot  { width:min(980px,95vw); text-align:center; }


/* ヒント（左右に張る静的ラベル） */
.sw-hints {
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
}
.sw-hint { font-size:12px; opacity:.8; user-select:none; }
.sw-hint-left { text-align:left; }
.sw-hint-right { text-align:right; }
.sw-hint-center { text-align:center; opacity:.9; }

/* 現在カードの統計（通算／今回） */
.sw-stats { display:flex; gap:12px; justify-content:flex-end; font-size:12px; opacity:.9; }
.sw-stats span::before { content:"• "; opacity:.6; }


/* swipeカード本体（色は .red/.blue/.gray/.none を共通利用） */
.sw-card {
  box-sizing:border-box;
  width:220px; height:120px; min-height:120px;
  margin:12px auto; border-radius:16px; border:1px solid #2a3248;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff; background:#111827;
  overflow:hidden; user-select:none;
}
.sw-card.wide { width:330px; }
.sw-area {
  width:100%; height:100%; padding:6px 10px;
  display:flex; align-items:center; justify-content:center;
}
.sw-area.center { text-align:center; }
.sw-area.wrap-left { text-align:left; }

/* ← この色設計を checker のボタンにも流用します */
.sw-card.red  { background:#5a3b00; border-color:#facc15; }
.sw-card.blue { background:#0d1b3a; border-color:#1d4ed8; }
.sw-card.gray { background:#1e2228; border-color:#374151; }
.sw-card.none { background:transparent; border-style:dashed; color:#d0d6e3; }

.sw-ans { margin-top:8px; }
.sw-ans mjx-container { margin:0 auto; }

/* アニメーション */
.sw-card.anim-leave-right { animation: swipeLeaveRight .18s ease forwards; }
.sw-card.anim-leave-left  { animation: swipeLeaveLeft  .18s ease forwards; }
@keyframes swipeLeaveRight { to { transform: translateX(120%); opacity: 0; } }
@keyframes swipeLeaveLeft  { to { transform: translateX(-120%); opacity: 0; } }
.sw-card.anim-enter { animation: swipeEnter .18s ease forwards; opacity:0; transform:scale(.98); }
@keyframes swipeEnter { to { transform:scale(1); opacity:1; } }
.sw-card.anim-pull-up    { animation: pullUp .18s ease; }
.sw-card.anim-pull-down  { animation: pullDown .18s ease; }
@keyframes pullUp   { 50% { transform:translateY(-5%); } 100% { transform:translateY(0); } }
@keyframes pullDown { 50% { transform:translateY( 5%); } 100% { transform:translateY(0); } }
.sw-area { touch-action:none; }
html, body { overscroll-behavior:contain; }

/* =========================================
   Checker page（本画面）
   - ミニマップとカード群の間隔
   - カード = swipe配色を踏襲
========================================= */
.mini-legend { display:flex; gap:12px; justify-content:center; align-items:center; font-size:12px; opacity:.9; }
/* ミニマップの下に余白を付与（ご要望の “少し間”） */
.panel + .card-grid { margin-top:16px; }

/* カードグリッド（レスポンシブ整列・等幅等高） */
.card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:12px;
}

/* 汎用カードボタン */
.btn-prob {
  display:flex; flex-direction:column;
  justify-content:space-between; align-items:stretch;
  min-height:120px; padding:10px 12px; border-radius:12px;
  border:1px solid #2a3b66; background:#121a2c; color:#e7eef7;
  text-align:center; cursor:pointer;
  transition:transform .06s ease, filter .2s ease;
}
.btn-prob:hover { filter:brightness(1.06); }
.btn-prob:active { transform:translateY(1px); }

/* === 配色（swipeカードと同一トーン） === */
.btn-red  { background:#5a3b00; border-color:#facc15; }
.btn-blue { background:#0d1b3a; border-color:#1d4ed8; }
.btn-gray { background:#1e2228; border-color:#374151; color:#d3d8e0; }
.btn-none { background:transparent; border-style:dashed; color:#9aa3b2; }

/* 本文＝縦横センター */
.prob-body {
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:6px 4px;
}

/* フッタ（統計表示） */
.prob-meta {
  margin-top:8px; font-size:12px; color:var(--muted);
  display:flex; align-items:center; justify-content:center; gap:8px;
  white-space:nowrap;
}

/* 1行省略（念のため） */
.one-line { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 画像サムネの余地（今は未使用） */
.btn-prob .thumb {
  width:100%; height:80px; border-radius:8px; background:#0e1525;
  overflow:hidden; display:none;
}

/* ====== Mini Checker（共通・本棚/チェッカー共用） ====== */
.mini-checker {
  display: grid;
  grid-template-columns: repeat(10, 18px);
  grid-auto-rows: 18px;
  gap: 2px;
  justify-content: center;
}
.mini-checker .cell {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid #2a3248;
}
.mini-checker .cell.red  { background: #ffd95b; border-color: #e6b422; }
.mini-checker .cell.blue { background: #3b82f6; border-color: #1d4ed8; }
.mini-checker .cell.gray { background: #4b5563; border-color: #374151; }
.mini-checker .cell.none { background: transparent; } /* 未挑戦 = 枠のみ */

/* ==== Learn: 長文対応（横を1.5倍まで広げ、さらに溢れるなら折返し＋左寄せ） ==== */
.sw-card { width:220px; }           /* 既定 */
.sw-card.wide { width:330px; }       /* 1.5倍（= 220 * 1.5） */
.sw-area.center {                    /* 既定：中央・改行なし */
  white-space: nowrap;
  text-align: center;
}
.sw-area.wrap-left {                 /* 長文：折返し許可＆左寄せ */
  white-space: normal;
  word-break: break-word;            /* 英単語が長いケースも安全に */
  text-align: left;
}

/* ==== Checker: 本文は1行・はみ出しは三点リーダ ==== */
.prob-body {
  flex: 1 1 auto;
  display:flex; align-items:center; justify-content:center;
  padding:6px 4px;
  text-align:center;

  white-space: nowrap;               /* 折返しなし */
  overflow: hidden;
  text-overflow: ellipsis;           /* … */
}

/* edit view vertical layout */
.rows { display: flex; flex-direction: column; gap: .8rem; margin-top: .8rem; }
.edit-row { display: flex; flex-direction: column; gap: .4rem; padding: .6rem 1rem; border-radius: .75rem; background: rgba(255,255,255,.04); }
.row-head { display:flex; align-items:center; gap:.6rem; font-weight:600; opacity:.9; }
.tb { width:100%; min-height:34px; padding:.45rem .6rem; border:1px solid rgba(255,255,255,.15); border-radius:.6rem; background:rgba(0,0,0,.2); color:inherit; }
.tb:focus { outline:2px solid rgba(100,150,255,.55); border-color:transparent; }
.bulk-ta { width:100%; min-height:380px; }

/* modal 基本 */
#modalContainer { display:none; position:fixed; inset:0; z-index:9999; }
#modalContainer.is-open { display:block; }
#modalContainer .modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); }
#modalContainer .modal-card {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  max-width:min(780px, calc(100% - 32px)); max-height:80vh; overflow:auto;
  background:#000; color:#fff; border-radius:12px; padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* === Clear Checker Legend === */
.mini-legend{
  display:flex; gap:12px; justify-content:center;
  font-size:12px; opacity:.9; margin:8px 0 4px;
}
.mini-legend .legend{
  display:inline-block; width:10px; height:10px; border-radius:2px;
  margin-right:4px; vertical-align:middle;
}
.mini-legend .l-red  { background:#ffd95b; border:1px solid #e6b422; }
.mini-legend .l-blue { background:#3b82f6; border:1px solid #1d4ed8; }
.mini-legend .l-gray { background:#4b5563; border:1px solid #374151; }
.mini-legend .l-none { background:transparent; border:1px dashed #475569; }