/* =========================================================
   STAFF NOTE 学習アプリ UI（app.js が注入する要素のスタイル）
   マステ美学（暖色アーストーン）準拠
   ========================================================= */

/* ページ遷移アニメ（対応ブラウザのみ・サクサクめくり） */
@view-transition { navigation: auto; }

/* 印刷時はアプリUIを完全に隠す（ノートはA4のまま） */
@media print {
  .sn-topbar, .sn-botbar, .sn-memo-panel, .sn-reco, .sn-confetti, .sn-toast, .sn-dash { display: none !important; }
}

@media screen {
  body.sn-note-page { padding-top: 54px; padding-bottom: 66px; }
}

/* ============ トップバー ============ */
.sn-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 54px; z-index: 1000;
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: rgba(250, 246, 238, 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--earth);
  font-family: 'Klee One', serif;
}
.sn-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; text-decoration: none; color: var(--ink);
  background: rgba(255, 255, 255, 0.6); border: 1px solid var(--earth);
  transition: background .15s ease, transform .15s ease;
}
.sn-icon:hover { background: #fff; transform: translateY(-1px); }
.sn-top-mid { flex: 1; min-width: 0; }
.sn-prog { height: 8px; background: var(--paper); border-radius: 5px; overflow: hidden; }
.sn-prog-fill { height: 100%; background: linear-gradient(90deg, var(--coral), var(--sunlight)); border-radius: 5px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.sn-top-meta { font-size: 9.5pt; color: var(--ink-soft); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-part-tag { background: var(--moss); color: #fff; border-radius: 8px; padding: 0 7px; font-size: 8pt; }

/* ============ 下部バー（モバイルタブ風） ============ */
.sn-botbar {
  position: fixed; bottom: 0; left: 0; right: 0; height: 60px; z-index: 1000;
  display: flex; align-items: stretch;
  background: rgba(250, 246, 238, 0.95); backdrop-filter: blur(10px);
  border-top: 1px solid var(--earth);
  font-family: 'Klee One', serif;
}
.sn-bot-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 17px; color: var(--ink); text-decoration: none; background: none; border: none; cursor: pointer;
  border-right: 1px solid rgba(184,152,118,0.25); transition: background .12s ease;
}
.sn-bot-btn:last-child { border-right: none; }
.sn-bot-btn small { font-size: 8pt; color: var(--ink-soft); }
.sn-bot-btn:hover { background: rgba(255,255,255,0.5); }
.sn-bot-btn.disabled { opacity: .35; pointer-events: none; }
.sn-bot-read { color: var(--coral); font-weight: 700; }

/* ============ 読了ボタン＆レコメンド ============ */
.sn-reco { max-width: 210mm; margin: 18px auto 28px; padding: 0 12px; font-family: 'Zen Maru Gothic', sans-serif; }
.sn-reco-read { text-align: center; margin-bottom: 14px; }
.sn-read-btn {
  font-family: 'Klee One', serif; font-size: 13pt; font-weight: 600;
  padding: 12px 30px; border-radius: 30px; border: 2px solid var(--coral);
  background: #fff; color: var(--coral); cursor: pointer;
  transition: all .18s ease;
}
.sn-read-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(232,151,121,.3); }
.sn-read-btn.done { background: var(--moss); border-color: var(--moss); color: #fff; }
.sn-reco-next {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: linear-gradient(105deg, var(--cream), #fff); border: 1.5px solid var(--earth);
  border-radius: 14px; padding: 14px 18px; color: var(--ink);
  box-shadow: 0 3px 12px rgba(0,0,0,.05); transition: transform .18s ease, box-shadow .18s ease;
}
.sn-reco-next:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.09); }
.sn-reco-label { font-family: 'Klee One', serif; font-size: 9pt; color: var(--moss); }
.sn-reco-title { font-family: 'Klee One', serif; font-size: 13pt; font-weight: 600; flex: 1; }
.sn-reco-part { font-size: 8pt; color: #fff; background: var(--sky); border-radius: 8px; padding: 2px 8px; }
.sn-reco-arrow { font-size: 18pt; color: var(--coral); }
.sn-reco-last { justify-content: center; flex-direction: column; gap: 3px; text-align: center; }

/* ============ メモパネル ============ */
.sn-memo-panel {
  position: fixed; bottom: 60px; left: 0; right: 0; z-index: 1001;
  background: #fff; border-top: 2px solid var(--coral); border-radius: 16px 16px 0 0;
  padding: 14px 16px 18px; box-shadow: 0 -6px 22px rgba(0,0,0,.12);
  transform: translateY(130%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
  font-family: 'Zen Maru Gothic', sans-serif; max-width: 600px; margin: 0 auto;
}
.sn-memo-panel.open { transform: translateY(0); }
.sn-memo-head { font-family: 'Klee One', serif; font-size: 11pt; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.sn-memo-tags { display: flex; gap: 8px; margin-bottom: 10px; }
.sn-tag {
  font-family: 'Klee One', serif; font-size: 10pt; padding: 7px 14px; border-radius: 20px;
  border: 1.5px solid var(--earth); background: var(--cream); color: var(--ink-soft); cursor: pointer;
  transition: all .15s ease;
}
.sn-tag.sn-tag-hard.on { background: #E89779; border-color: #E89779; color: #fff; }
.sn-tag.sn-tag-imp.on { background: var(--sunlight); border-color: var(--sunlight); color: #7A5A1F; }
.sn-memo-text {
  width: 100%; min-height: 72px; border: 1.5px solid var(--earth); border-radius: 10px;
  padding: 10px; font-family: 'Zen Maru Gothic', sans-serif; font-size: 11pt; color: var(--ink);
  resize: vertical; box-sizing: border-box; background: var(--cream);
}
.sn-memo-text:focus { outline: 2px solid var(--coral); outline-offset: 1px; }

/* ============ トースト ============ */
.sn-toast {
  position: fixed; left: 50%; bottom: 80px; transform: translate(-50%, 20px); z-index: 2000;
  background: var(--ink); color: #fff; padding: 11px 20px; border-radius: 24px;
  font-family: 'Klee One', serif; font-size: 11pt; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  opacity: 0; transition: opacity .35s ease, transform .35s ease; pointer-events: none; text-align: center;
}
.sn-toast.show { opacity: 1; transform: translate(-50%, 0); }
.sn-toast-big {
  bottom: 50%; transform: translate(-50%, 40%); background: linear-gradient(135deg, var(--coral), var(--sunlight));
  color: #fff; font-size: 14pt; padding: 22px 30px; border-radius: 18px; line-height: 1.6; max-width: 86%;
}
.sn-toast-big.show { transform: translate(-50%, 50%); }

/* ============ 紙吹雪 ============ */
.sn-confetti { position: fixed; inset: 0; z-index: 1999; pointer-events: none; overflow: hidden; }
.sn-confetti span {
  position: absolute; top: -16px; width: 11px; height: 14px; border-radius: 2px;
  animation: sn-fall 3.6s linear forwards;
}
@keyframes sn-fall {
  0% { transform: translateY(-16px) rotate(0); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .sn-confetti { display: none; }
  .sn-prog-fill, .sn-reco-next, .sn-read-btn, .sn-icon { transition: none; }
}

/* ============ ダッシュボード（目次に注入） ============ */
.sn-dash { font-family: 'Zen Maru Gothic', sans-serif; margin: 4px 0 14px; }
.sn-dash-top {
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(120deg, #fff, var(--cream)); border: 1.5px solid var(--earth);
  border-radius: 14px; padding: 14px 18px; margin-bottom: 12px;
}
.sn-dash-ring {
  flex: 0 0 auto; width: 86px; height: 86px; border-radius: 50%;
  background: conic-gradient(var(--coral) calc(var(--pct) * 1%), var(--paper) 0);
  display: flex; align-items: center; justify-content: center;
}
.sn-dash-ring::before { content: ''; position: absolute; width: 64px; height: 64px; border-radius: 50%; background: #fff; }
.sn-dash-ring-num { position: relative; font-family: 'Klee One', serif; font-size: 20pt; font-weight: 600; color: var(--ink); }
.sn-dash-ring-num small { font-size: 10pt; }
.sn-dash-summary { flex: 1; }
.sn-dash-title { font-family: 'Klee One', serif; font-size: 12pt; font-weight: 600; color: var(--ink); }
.sn-dash-count { font-size: 10pt; color: var(--ink-soft); margin: 3px 0 8px; }
.sn-dash-count b { color: var(--coral); font-size: 13pt; }
.sn-dash-resume {
  display: inline-block; font-family: 'Klee One', serif; font-size: 10.5pt; font-weight: 600;
  background: var(--moss); color: #fff; padding: 7px 16px; border-radius: 20px; text-decoration: none;
}
.sn-dash-resume:hover { filter: brightness(1.06); }
.sn-dash-resume.done { background: var(--sunlight); color: #7A5A1F; }
.sn-dash-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; margin-bottom: 12px; }
.sn-dash-part { display: flex; align-items: center; gap: 8px; font-size: 8.5pt; }
.sn-dash-pname { flex: 0 0 38%; color: var(--ink); }
.sn-dash-pbar { flex: 1; height: 7px; background: var(--paper); border-radius: 4px; overflow: hidden; }
.sn-dash-pbar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--moss), var(--sky)); }
.sn-dash-pnum { flex: 0 0 auto; font-family: 'Klee One', serif; font-size: 8pt; color: var(--ink-soft); }
.sn-dash-memos { background: rgba(232,151,121,.08); border-left: 3px solid var(--coral); border-radius: 0 8px 8px 0; padding: 10px 12px; }
.sn-dash-mhead { font-family: 'Klee One', serif; font-size: 10pt; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.sn-memo-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; text-decoration: none; color: var(--ink); font-size: 9pt; border-bottom: 1px dotted var(--earth); }
.sn-memo-item:last-child { border-bottom: none; }
.sn-memo-item b { font-family: 'Klee One', serif; }
.sn-mi-text { color: var(--ink-soft); font-size: 8pt; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.topic.sn-read-topic { box-shadow: inset 0 0 0 2px var(--moss); }

/* ============ モバイル最適化（スマホで最高の可読性）============ */
@media screen and (max-width: 820px) {
  html, body { background: var(--cream); }
  .page {
    width: 100% !important; max-width: 100% !important; min-height: auto !important;
    margin: 0 !important; box-shadow: none !important;
    padding: 18px clamp(12px, 4vw, 22px) 30px !important; overflow: visible !important;
  }
  .tape { display: none !important; }

  /* 見出し・リード（画面幅で可変） */
  header { margin-bottom: 14px !important; }
  .eyebrow { font-size: clamp(11px, 3.2vw, 13px) !important; letter-spacing: .06em !important; }
  h1 { font-size: clamp(20px, 6.2vw, 27px) !important; line-height: 1.3 !important; }
  h1 .ruby { font-size: clamp(11px, 3vw, 13px) !important; margin-left: 0 !important; display: inline-block; }
  .intro { font-size: clamp(13px, 3.8vw, 15px) !important; line-height: 1.8 !important; padding: 12px 14px !important; margin-bottom: 16px !important; }

  /* レベルブロック：縦積みでゆったり */
  .level-block { padding: 15px 15px 17px !important; margin-bottom: 18px !important; border-left-width: 6px !important; }
  .level-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .level-head { flex-wrap: wrap; gap: 6px !important; margin-bottom: 11px !important; padding-bottom: 8px !important; }
  .badge { font-size: clamp(11px, 3.2vw, 13px) !important; padding: 3px 13px !important; }
  .level-title { font-size: clamp(15px, 4.6vw, 19px) !important; line-height: 1.45 !important; }
  .level-audience { font-size: clamp(10px, 3vw, 12px) !important; margin-left: 0 !important; flex-basis: 100%; }

  /* 本文：14〜16pxで読みやすく */
  .col h3 { font-size: clamp(14px, 4.2vw, 17px) !important; margin-bottom: 8px !important; }
  .col p, .col li { font-size: clamp(14px, 4vw, 16px) !important; line-height: 1.9 !important; }
  .col ul { padding-left: 20px !important; margin-top: 4px !important; }
  .col ul li { margin-bottom: 6px !important; }
  .col-approach { padding: 11px 14px !important; }

  /* カード・チップ・タグ */
  .grid-cards.cols-2, .grid-cards.cols-3 { grid-template-columns: 1fr !important; gap: 9px !important; }
  .card-item { font-size: clamp(13px, 3.8vw, 15px) !important; padding: 9px 13px !important; border-left-width: 4px !important; }
  .card-item .cname { font-size: clamp(14px, 4vw, 16px) !important; margin-bottom: 3px !important; }
  .chip { font-size: clamp(12px, 3.6vw, 14px) !important; padding: 5px 13px !important; }
  .chip-group { gap: 6px !important; }
  .term { font-size: clamp(12px, 3.4vw, 14px) !important; padding: 2px 8px !important; }
  .progression { gap: 6px !important; }
  .progression .step { font-size: clamp(11px, 3.2vw, 13px) !important; padding: 4px 10px !important; }
  .progression .arrow { font-size: 13px !important; }
  footer { flex-direction: column; gap: 5px !important; font-size: clamp(10px, 2.8vw, 12px) !important; text-align: center; }

  /* 表紙・はじめに・目次も1カラムに */
  .level-row, .axis-grid, .note-grid, .curriculum { grid-template-columns: 1fr !important; }
  .axis-card p, .lv-card p { font-size: clamp(13px, 3.6vw, 15px) !important; line-height: 1.7 !important; }
  .ax-name, .lv-for { font-size: clamp(14px, 4vw, 16px) !important; }
  .topic { font-size: clamp(12px, 3.6vw, 14px) !important; padding: 3px 11px !important; }
  .sn-dash-parts { grid-template-columns: 1fr !important; }
  .sn-dash-top { gap: 12px; }

  /* ビジュアル表紙：縦長画面に最適化 */
  .cover-inner { min-height: auto !important; padding: 18px 16px 26px !important; }
  .big-title { font-size: clamp(40px, 13vw, 62px) !important; }
  .subtitle { font-size: clamp(16px, 5vw, 21px) !important; }
  .scene { gap: 8px !important; flex-wrap: wrap; }
  .crayon-fig { width: 21% !important; }
  .bubble { font-size: clamp(8px, 2.4vw, 10px) !important; min-height: 34px !important; }
}