:root {
  --ink: #1a1a18;
  --ink-muted: #4a4a47;
  --ink-faint: #888884;
  --paper: #fafaf7;
  --paper-warm: #f5f3ee;
  --paper-grid: #e8e6e0;
  --red-pen: #c8392b;
  --yellow-hl: rgba(255, 230, 0, 0.55);
  --pink-hl: rgba(255, 100, 160, 0.28);
  --blue-hl: rgba(80, 140, 220, 0.22);
  --teal-accent: #2a9d8f;
  --amber-accent: #e9a624;
}

* { box-sizing: border-box; }

body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: var(--paper);
  color: var(--ink);
  font-weight: 400;
  line-height: 2.0;
  font-size: 16px;
}

.grid-bg {
  background-image:
    linear-gradient(var(--paper-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px);
  background-size: 32px 32px;
}

.dot-bg {
  background-image: radial-gradient(circle, var(--paper-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}

.handwrite { font-family: 'Caveat', cursive; }
.mono { font-family: 'Space Mono', monospace; }
.serif { font-family: 'Noto Serif JP', serif; }

.hl-yellow { background: linear-gradient(transparent 55%, var(--yellow-hl) 55%); }
.hl-pink   { background: linear-gradient(transparent 55%, var(--pink-hl) 55%); }
.hl-blue   { background: linear-gradient(transparent 55%, var(--blue-hl) 55%); }

.redpen {
  text-decoration: underline;
  text-decoration-color: var(--red-pen);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.redpen-wavy {
  text-decoration: underline wavy var(--red-pen);
  text-underline-offset: 4px;
}

.hand-border {
  border: 2px solid var(--red-pen);
  border-radius: 255px 8px 220px 10px / 10px 220px 8px 255px;
}
.hand-border-ink {
  border: 1.5px solid var(--ink);
  border-radius: 200px 12px 180px 14px / 14px 180px 12px 200px;
}

.sticky {
  transform: rotate(-1.5deg);
  transition: transform 0.2s ease;
}
.sticky:hover { transform: rotate(0deg) scale(1.02); }
.sticky-2 { transform: rotate(1.2deg); }
.sticky-2:hover { transform: rotate(0deg) scale(1.02); }

.ruled-line {
  background: repeating-linear-gradient(
    transparent,
    transparent 31px,
    #d8d5ce 31px,
    #d8d5ce 32px
  );
}

.log-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: white;
  position: relative;
  cursor: pointer;
}
.log-card:hover {
  transform: translateY(-3px);
  box-shadow: 4px 6px 0 rgba(0,0,0,0.07);
}
.log-card a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

.timeline-dot::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red-pen);
  position: absolute;
  left: -5px;
  top: 6px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.6s ease both; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.55s; }

.label-tape {
  display: inline-block;
  background: var(--amber-accent);
  color: white;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 2px 10px;
  transform: rotate(-1deg);
}

.progress-track {
  height: 4px;
  background: #e8e5de;
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--teal-accent);
  border-radius: 2px;
  transition: width 1s ease;
}

.notebook-margin {
  border-left: 3px solid #f0c0c0;
  padding-left: 24px;
  margin-left: 40px;
}

.ai-badge {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  border: 1px solid currentColor;
  padding: 2px 6px;
  border-radius: 2px;
}

.section-num {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}

hr.dashed {
  border: none;
  border-top: 1.5px dashed var(--paper-grid);
  margin: 0;
}

p, li { font-size: 15px; }
.section-num { font-size: 12px; }
.log-card p { font-size: 14px; line-height: 1.85; }
.notebook-margin p { font-size: 15px; line-height: 2.0; }
.log-card .handwrite { font-size: 18px; }
.hero-desc { font-size: 17px; line-height: 2.0; }
#workflow p { font-size: 14px; line-height: 1.9; }
#memo p { font-size: 15px; line-height: 2.1; }
footer p { font-size: 14px; }

::-webkit-scrollbar { display: none; }

nav a {
  position: relative;
  text-decoration: none;
}
nav a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1.5px;
  background: var(--red-pen);
  transition: width 0.25s ease;
}
nav a:hover::after { width: 100%; }

/* カード装飾（JS生成用） */
.card-tape {
  position: absolute;
  top: -12px;
  width: 60px;
  height: 12px;
}
.card-tape--left { left: 24px; transform: rotate(-1deg); }
.card-tape--right { right: 24px; transform: rotate(0.8deg); }
.card-tape--center { left: 50%; transform: translateX(-50%) rotate(-0.5deg); }

.status-badge {
  font-size: 10px;
  font-family: 'Space Mono', monospace;
  border-radius: 2px;
  padding: 2px 8px;
}
.status-badge--active {
  color: var(--red-pen);
  border: 2px solid var(--red-pen);
  border-radius: 255px 8px 220px 10px / 10px 220px 8px 255px;
}
.status-badge--design {
  color: var(--amber-accent);
  background: rgba(233, 166, 36, 0.12);
}
.status-badge--plan {
  color: var(--ink-faint);
  background: #f5f5f4;
}
.status-badge--done {
  color: var(--teal-accent);
  background: rgba(42, 157, 143, 0.1);
}

.tag {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 2px;
  color: var(--ink-muted);
  background: #f5f5f4;
}
.tag--teal {
  color: var(--teal-accent);
  background: rgba(42, 157, 143, 0.1);
}
.tag--blue {
  color: #5b6ef5;
  background: rgba(91, 110, 245, 0.1);
}

.log-card--dimmed { opacity: 0.8; }

#experiments-grid.is-loading {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-family: 'Space Mono', monospace;
  font-size: 12px;
}

/* ===== RESPONSIVE ===== */

/* ハンバーガーメニュー */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: all 0.3s ease;
}
.nav-mobile {
  display: none;
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  background: white;
  border-bottom: 1px solid #e0ddd6;
  padding: 16px 24px;
  z-index: 100;
  flex-direction: column;
  gap: 16px;
}
.nav-mobile.is-open { display: flex; }

/* タブレット（768px以下） */
@media (max-width: 768px) {
  body { font-size: 15px; }

  /* ナビ */
  .nav-desktop { display: none !important; }
  .nav-toggle { display: flex !important; }

  /* パディング縮小 */
  .max-w-5xl { padding-left: 20px !important; padding-right: 20px !important; }
  header .max-w-5xl { padding-left: 16px !important; padding-right: 16px !important; }

  /* ヒーローテキスト */
  .text-7xl { font-size: 3.2rem !important; }
  .text-5xl { font-size: 2.2rem !important; }
  .text-4xl { font-size: 1.9rem !important; }
  .text-3xl { font-size: 1.5rem !important; }

  /* ヒーローの装飾付箋を隠す */
  .absolute.top-16.right-12,
  .absolute.bottom-24.left-10 { display: none !important; }

  /* ノートブックマージン縮小 */
  .notebook-margin { margin-left: 16px; padding-left: 16px; }

  /* 付箋の回転をなくす（狭い画面では回転しない方が読みやすい） */
  .sticky { transform: none !important; }
  .sticky:hover { transform: scale(1.01) !important; }
  .sticky-2 { transform: none !important; }
  .sticky-2:hover { transform: scale(1.01) !important; }

  /* グリッドを1カラムに */
  .grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* 実験ログカードのpaddingを調整 */
  .log-card .p-6 { padding: 20px 16px !important; }

  /* 付箋コーナーを折り返し対応 */
  .flex-wrap.gap-5 { gap: 12px !important; }
  .w-44 { width: 140px !important; }

  /* EXPERIMENT WORKFLOW の横スクロール */
  .flex.items-center.gap-0.flex-wrap {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 8px;
  }

  /* py縮小 */
  .py-24 { padding-top: 48px !important; padding-bottom: 48px !important; }
  .py-16 { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* 実験詳細のサイドバーを下に */
  .lg\:grid-cols-3 { grid-template-columns: 1fr !important; }
  .lg\:col-span-2 { border-right: none !important; border-bottom: 1px solid #e8e6e0 !important; }

  /* ツール本棚 */
  .shelf-container { padding: 0 16px !important; }
}

/* スマホ（480px以下） */
@media (max-width: 480px) {
  .text-7xl { font-size: 2.6rem !important; }
  .text-5xl { font-size: 1.8rem !important; }
  .text-4xl { font-size: 1.6rem !important; }
  .text-2xl { font-size: 1.25rem !important; }

  /* ツールカードを少し小さく */
  .tool-card { min-width: 240px !important; max-width: 240px !important; }

  /* AIセクションを1カラムに */
  .lg\:grid-cols-4 { grid-template-columns: 1fr !important; }

  /* フッターのセンタリング */
  footer .flex-col { align-items: center !important; text-align: center !important; }
  footer .text-right { text-align: center !important; }

  /* セクションpadding */
  .px-8 { padding-left: 16px !important; padding-right: 16px !important; }
  .p-8 { padding: 20px 16px !important; }
  .p-6 { padding: 16px 12px !important; }
}