/* ===== cocokyoryu — style.css ===== */

:root {
  --bg: #fafaf8;
  --bg2: #f0ede6;
  --card: #ffffff;
  --border: #e0d8cc;
  --text: #2a2010;
  --text2: #6b5e4a;
  --accent: #7b5e2a;
  --accent2: #c8873a;
  --tag-bg: #f5ede0;
  --shadow: 0 2px 12px rgba(100,70,20,0.08);
  --shadow-hover: 0 8px 28px rgba(100,70,20,0.18);
  --nav-bg: rgba(250,250,248,0.92);
  --badge-cret: #c85a2a;
  --badge-jur: #3a7a4a;
  --badge-tri: #5a4a8a;
  --tr: 0.25s ease;
}

[data-theme="dark"] {
  --bg: #181410;
  --bg2: #221e18;
  --card: #2a2418;
  --border: #3a3028;
  --text: #f0e8d8;
  --text2: #a89070;
  --accent: #d4a050;
  --accent2: #e8b870;
  --tag-bg: #3a2e18;
  --shadow: 0 2px 12px rgba(0,0,0,0.4);
  --shadow-hover: 0 8px 28px rgba(0,0,0,0.65);
  --nav-bg: rgba(24,20,16,0.95);
  --badge-cret: #e87050;
  --badge-jur: #60c070;
  --badge-tri: #8878d0;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  background:var(--bg); color:var(--text);
  transition:background var(--tr),color var(--tr);
  line-height:1.7;
}

/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--nav-bg); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 24px; height:56px;
  display:flex; align-items:center; justify-content:space-between;
  transition:background var(--tr);
}
.nav-logo {
  font-size:1.25rem; font-weight:800; color:var(--accent);
  text-decoration:none; letter-spacing:-0.5px;
  display:flex; align-items:center; gap:6px;
}
.nav-links { display:flex; align-items:center; gap:2px; list-style:none; }
.nav-links a {
  color:var(--text2); text-decoration:none; font-size:0.84rem;
  padding:6px 11px; border-radius:20px; transition:all var(--tr);
}
.nav-links a:hover,.nav-links a.active { background:var(--tag-bg); color:var(--accent); }
.theme-btn {
  background:var(--tag-bg); border:1px solid var(--border);
  color:var(--text2); padding:6px 14px; border-radius:20px;
  cursor:pointer; font-size:0.82rem; transition:all var(--tr);
  white-space:nowrap;
}
.theme-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

/* HERO */
.hero {
  min-height:100vh; display:flex; align-items:center;
  justify-content:center; text-align:center;
  position:relative; overflow:hidden; padding-top:56px;
}
.hero-deco {
  position:absolute; font-size:20rem; opacity:0.04;
  bottom:-2rem; right:-1rem; pointer-events:none; user-select:none;
}
.hero-content { position:relative; z-index:1; max-width:700px; padding:0 24px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--tag-bg); color:var(--accent);
  border:1px solid var(--border); padding:5px 14px;
  border-radius:20px; font-size:0.78rem; font-weight:600;
  letter-spacing:0.05em; margin-bottom:20px;
}
.hero h1 {
  font-size:clamp(2.5rem,7vw,4.4rem); font-weight:900;
  color:var(--text); line-height:1.1; letter-spacing:-1.5px; margin-bottom:16px;
}
.hero h1 em { color:var(--accent2); font-style:normal; }
.hero p { font-size:1rem; color:var(--text2); margin-bottom:32px; }
.hero-stats { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin-bottom:32px; }
.stat-num { font-size:1.7rem; font-weight:800; color:var(--accent); line-height:1; }
.stat-label { font-size:0.74rem; color:var(--text2); margin-top:2px; }
.hero-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn-primary {
  background:var(--accent); color:#fff; padding:12px 28px;
  border-radius:28px; text-decoration:none; font-weight:700; font-size:0.92rem;
  transition:all var(--tr);
}
.btn-primary:hover { background:var(--accent2); transform:translateY(-2px); }
.btn-secondary {
  background:var(--card); color:var(--text); padding:12px 28px;
  border-radius:28px; text-decoration:none; font-weight:600; font-size:0.92rem;
  border:1px solid var(--border); transition:all var(--tr);
}
.btn-secondary:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* SECTION */
section { padding:80px 24px; }
.inner { max-width:1100px; margin:0 auto; }
.sec-head { text-align:center; margin-bottom:48px; }
.sec-head h2 { font-size:1.9rem; font-weight:800; letter-spacing:-0.5px; margin-bottom:8px; }
.sec-head p { color:var(--text2); font-size:0.94rem; }

/* SEARCH */
.search-wrap {
  background:var(--bg2); border-radius:20px; padding:24px 28px;
  margin-bottom:36px; border:1px solid var(--border);
}
.search-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.search-input,.search-select {
  padding:10px 15px; border-radius:12px; border:1px solid var(--border);
  background:var(--card); color:var(--text); font-size:0.88rem; outline:none;
  transition:border-color var(--tr);
  font-family: inherit;
}
.search-input { flex:1; min-width:160px; }
.search-input:focus { border-color:var(--accent); }
.search-btn {
  background:var(--accent); color:#fff; padding:10px 20px;
  border-radius:12px; border:none; font-weight:700; cursor:pointer;
  font-size:0.88rem; transition:all var(--tr); font-family:inherit;
}
.search-btn:hover { background:var(--accent2); }

/* DINO GRID — PHOTO CARDS */
.dino-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:20px;
}
.dino-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; overflow:hidden; transition:all var(--tr);
  cursor:pointer; display:flex; flex-direction:column;
}
.dino-card:hover {
  box-shadow:var(--shadow-hover); transform:translateY(-5px);
  border-color:var(--accent);
}

/* 写真エリア */
.dino-photo {
  width:100%; aspect-ratio:4/3; object-fit:cover;
  background:var(--bg2);
  display:block;
  transition:transform 0.4s ease;
}
.dino-card:hover .dino-photo { transform:scale(1.04); }
.dino-photo-wrap {
  overflow:hidden; position:relative;
  background:var(--bg2);
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
}
.dino-photo-placeholder {
  font-size:4rem; opacity:0.35;
}
.dino-photo-credit {
  position:absolute; bottom:0; right:0;
  background:rgba(0,0,0,0.45); color:#fff;
  font-size:0.6rem; padding:2px 6px;
  border-top-left-radius:6px;
}

/* カード本文 */
.dino-body { padding:16px 18px 18px; flex:1; display:flex; flex-direction:column; gap:6px; }
.dino-name { font-size:1.05rem; font-weight:800; color:var(--text); }
.dino-latin { font-size:0.76rem; color:var(--text2); font-style:italic; }
.tags { display:flex; gap:5px; flex-wrap:wrap; }
.tag {
  padding:2px 9px; border-radius:10px; font-size:0.7rem; font-weight:600;
  background:var(--tag-bg); color:var(--accent); border:1px solid var(--border);
}
.tag-cret { background:#fff0ec; color:var(--badge-cret); border-color:transparent; }
.tag-jur  { background:#ecf5ee; color:var(--badge-jur);  border-color:transparent; }
.tag-tri  { background:#eeeaf8; color:var(--badge-tri);  border-color:transparent; }
[data-theme="dark"] .tag-cret { background:#3a1a10; }
[data-theme="dark"] .tag-jur  { background:#102a18; }
[data-theme="dark"] .tag-tri  { background:#1e1a3a; }
.tag-meat { background:#fce8e8; color:#b04040; border-color:transparent; }
.tag-herb { background:#e8f5e8; color:#3a7040; border-color:transparent; }
[data-theme="dark"] .tag-meat { background:#301010; color:#e08080; }
[data-theme="dark"] .tag-herb { background:#102010; color:#70c070; }
.dino-len { font-size:0.8rem; color:var(--text2); margin-top:2px; }

/* TIMELINE */
.tl { position:relative; padding-left:32px; }
.tl::before {
  content:''; position:absolute; left:12px; top:0; bottom:0;
  width:2px; background:linear-gradient(180deg,var(--badge-tri),var(--badge-jur),var(--badge-cret));
}
.tl-item { position:relative; margin-bottom:28px; }
.tl-dot {
  position:absolute; left:-26px; top:8px;
  width:14px; height:14px; border-radius:50%; border:2px solid var(--card);
}
.tl-tri .tl-dot { background:var(--badge-tri); }
.tl-jur .tl-dot { background:var(--badge-jur); }
.tl-cret .tl-dot { background:var(--badge-cret); }
.tl-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:18px 20px; transition:box-shadow var(--tr);
}
.tl-card:hover { box-shadow:var(--shadow-hover); }
.tl-era { font-size:0.72rem; font-weight:700; letter-spacing:0.08em; margin-bottom:4px; }
.tl-tri .tl-era { color:var(--badge-tri); }
.tl-jur .tl-era { color:var(--badge-jur); }
.tl-cret .tl-era { color:var(--badge-cret); }
.tl-title { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:4px; }
.tl-desc { font-size:0.84rem; color:var(--text2); }

/* KNOWLEDGE */
.know-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:20px; }
.know-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:28px; transition:all var(--tr);
}
.know-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-3px); }
.know-icon { font-size:2.2rem; margin-bottom:12px; display:block; }
.know-title-text { font-size:1rem; font-weight:700; margin-bottom:8px; }
.know-text { font-size:0.84rem; color:var(--text2); line-height:1.9; }

/* MODAL */
.modal-ov {
  position:fixed; inset:0; background:rgba(0,0,0,0.55);
  backdrop-filter:blur(6px); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity var(--tr);
}
.modal-ov.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--card); border:1px solid var(--border);
  border-radius:24px; max-width:580px; width:100%;
  position:relative; transform:translateY(20px);
  transition:transform var(--tr); max-height:90vh; overflow-y:auto;
  display:flex; flex-direction:column;
}
.modal-ov.open .modal { transform:translateY(0); }
.modal-x {
  position:absolute; top:14px; right:14px; z-index:10;
  background:rgba(0,0,0,0.3); border:none; width:32px; height:32px;
  border-radius:50%; cursor:pointer; font-size:1rem; color:#fff;
  display:flex; align-items:center; justify-content:center; transition:all var(--tr);
}
.modal-x:hover { background:var(--accent); }

/* モーダル写真 */
.modal-photo-wrap {
  width:100%; aspect-ratio:16/9; overflow:hidden;
  border-radius:24px 24px 0 0;
  background:var(--bg2);
  display:flex; align-items:center; justify-content:center;
  position:relative; flex-shrink:0;
}
.modal-photo {
  width:100%; height:100%; object-fit:cover;
}
.modal-photo-ph { font-size:6rem; opacity:0.3; }
.modal-photo-credit {
  position:absolute; bottom:0; right:0;
  background:rgba(0,0,0,0.45); color:#fff;
  font-size:0.65rem; padding:3px 8px;
  border-top-left-radius:6px;
}

.modal-body { padding:28px 32px 32px; }
.modal-name { font-size:1.55rem; font-weight:900; margin-bottom:3px; }
.modal-lat { font-size:0.87rem; font-style:italic; color:var(--text2); margin-bottom:14px; }
.modal-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0; }
.modal-item { background:var(--bg2); border-radius:10px; padding:11px 14px; }
.modal-lbl { font-size:0.68rem; color:var(--text2); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:2px; }
.modal-val { font-size:0.92rem; font-weight:700; }
.modal-desc { font-size:0.87rem; color:var(--text2); line-height:1.95; border-top:1px solid var(--border); padding-top:14px; margin-top:4px; }

/* LOADING */
.loading { text-align:center; padding:64px 24px; color:var(--text2); font-size:0.9rem; }
.spinner {
  width:36px; height:36px; border:3px solid var(--border);
  border-top-color:var(--accent); border-radius:50%;
  animation:spin 0.8s linear infinite; margin:0 auto 12px;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* FOOTER */
footer { background:var(--bg2); border-top:1px solid var(--border); padding:40px 24px 24px; }
.ft { max-width:1100px; margin:0 auto; }
.ft-top { display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:32px; }
.ft-logo { font-size:1.35rem; font-weight:900; color:var(--accent); margin-bottom:6px; }
.ft-desc { font-size:0.82rem; color:var(--text2); line-height:1.9; }
.ft-links { display:flex; gap:40px; flex-wrap:wrap; }
.ft-col h4 { font-size:0.74rem; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px; }
.ft-col a { display:block; font-size:0.83rem; color:var(--text2); text-decoration:none; margin-bottom:6px; transition:color var(--tr); }
.ft-col a:hover { color:var(--accent); }
.ft-bottom { border-top:1px solid var(--border); padding-top:18px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.ft-bottom p { font-size:0.78rem; color:var(--text2); }
.ft-bottom a { color:var(--accent); text-decoration:none; }

/* FADE */
.fade { opacity:0; transform:translateY(20px); transition:opacity .5s ease,transform .5s ease; }
.fade.vis { opacity:1; transform:translateY(0); }

/* RESPONSIVE */
@media(max-width:768px) {
  .nav-links { display:none; }
  .hero h1 { font-size:2.3rem; }
  .modal-grid { grid-template-columns:1fr; }
  .ft-top { flex-direction:column; }
  .dino-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
}