/* =======================================================================
   教材ハブ — styles.css
   セクション別の色は .sec-* の --c / --c-soft / --c-ink を変えるだけ
   ======================================================================= */
:root{
  --paper:#F1F3F2; --ink:#12171A; --muted:#59635E; --line:#DBE0DC;
  --c:#0E7C63; --c-soft:#E1EFE9; --c-ink:#0a5c49;      /* 既定アクセント */
  --display:"Space Grotesk", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --jp:system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

/* --- セクション別テーマ --- */
.sec-udemy  { --c:#A435F0; --c-soft:#F2E9FD; --c-ink:#6D28D9; } /* Udemy: 紫 */
.sec-kindle { --c:#FF9900; --c-soft:#FDEFD6; --c-ink:#B45309; } /* Kindle: アンバー(Amazon) */
.sec-about  { --c:#0E7C63; --c-soft:#E1EFE9; --c-ink:#0a5c49; } /* About: 緑(既定アクセント) */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--jp); line-height:1.75; -webkit-font-smoothing:antialiased;
  padding:clamp(28px,7vw,80px) clamp(20px,6vw,40px);
}
.wrap{max-width:760px; margin:0 auto}

/* --- header / intro --- */
.mark{font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(24px,5.5vw,32px); margin:0}
.mark span{color:#A435F0}
.tag{color:var(--muted); font-size:15px; margin:.4rem 0 0}
.intro{font-size:16px; margin:1.1rem 0 0; max-width:60ch}

/* --- 著者リンク pills --- */
.links{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.links a{display:inline-flex; align-items:center; gap:7px;
  font-family:var(--display); font-weight:500; font-size:13px; color:var(--ink);
  text-decoration:none; border:1px solid var(--line); border-radius:999px;
  padding:.42em .9em; background:#fff; transition:border-color .15s, background .15s, color .15s}
.links a img{width:15px; height:15px; display:block; flex:none}
.links a:hover{border-color:var(--brand, #b9c1bb);
  background:color-mix(in srgb, var(--brand, #000000) 7%, #fff); color:#000}

/* --- タブ（共通の土台線＋選択タブを塗りつぶし） --- */
.tabs{display:flex; gap:4px; margin-top:30px; border-bottom:1px solid var(--line)}
.tab{appearance:none; cursor:pointer; background:none; border:1px solid transparent; border-bottom:none;
  font-family:var(--display); font-weight:600; font-size:15px; color:var(--muted);
  padding:10px 18px; border-radius:10px 10px 0 0; margin-bottom:-1px;
  transition:color .15s, background .15s}
.tab:hover{color:var(--ink); background:#fff}
.tab.is-active,
.tab.is-active:hover{color:#fff; background:var(--c-ink); border-color:var(--c-ink)}

/* --- パネル --- */
.panel{margin-top:22px}
.panel[hidden]{display:none}
.eyebrow{font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size:11.5px; color:var(--c-ink); margin:0}

/* --- card grid --- */
.cards{display:grid; gap:16px; margin-top:14px;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr))}
.card{display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:14px; padding:16px;
  transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-2px); box-shadow:0 12px 28px -16px rgba(18,23,26,.32)}
.card h3{font-size:16px; font-weight:600; margin:0; line-height:1.5}
.card .desc{color:var(--muted); font-size:13.5px; margin:.35rem 0 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* --- images --- */
.thumb{position:relative; aspect-ratio:16/9; background:var(--c-soft); border-radius:10px;
  overflow:hidden; margin-bottom:12px}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}

/* --- 教材種別バッジ(カード左上・画像に重ねる) --- */
.badge{position:absolute; top:8px; left:8px; z-index:1;
  font-family:var(--display); font-weight:600; font-size:10.5px; letter-spacing:.08em;
  color:#fff; background:rgba(18,23,26,.78); padding:.3em .75em; border-radius:999px}
.card > .badge{position:static; display:inline-block; align-self:flex-start;
  margin-bottom:8px; background:var(--c-ink)} /* 画像なしカード用 */
.cover{height:172px; background:var(--c-soft); border-radius:10px; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center; padding:14px}
.cover img{max-height:100%; width:auto; object-fit:contain; border-radius:2px;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.45)}

/* --- udemy coupon block --- */
.deal{margin-top:10px}
.mini{font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; font-size:10.5px; color:var(--muted);
  display:inline-flex; align-items:center; gap:7px}
.dot{width:7px; height:7px; border-radius:50%; background:var(--c); animation:pulse 2.6s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--c) 42%, transparent)}
  70%{box-shadow:0 0 0 6px color-mix(in srgb, var(--c) 0%, transparent)}
  100%{box-shadow:0 0 0 0 transparent}
}
.price{font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.01em;
  color:var(--ink); margin:.15rem 0 0; line-height:1.15}
.price small{font-size:11px; font-weight:500; color:var(--muted); margin-left:6px; letter-spacing:0}
.codeline{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:5px}
.code{font-family:var(--mono); font-weight:700; font-size:13.5px; letter-spacing:.02em;
  background:var(--c-soft); color:var(--c-ink); padding:.15em .45em; border-radius:7px}
.copy{font-family:var(--display); font-weight:600; font-size:11.5px; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:7px; padding:.3em .6em; transition:background .15s,border-color .15s,color .15s}
.copy:hover{background:var(--paper); border-color:#c7cec9}
.copy.done{color:var(--c-ink); border-color:var(--c)}
.warn{color:#9a4a1a; font-size:12px; margin:.5rem 0 0; display:none}

/* --- action button --- */
.buy{margin-top:auto; padding-top:10px}
.buy a{display:block; text-align:center; font-family:var(--display); font-weight:600; font-size:13.5px;
  background:var(--c-ink); color:#fff; text-decoration:none;
  border-radius:9px; padding:.72em 1em; transition:filter .15s}
.buy a:hover{filter:brightness(1.08)}

:focus-visible{outline:2px solid var(--c-ink); outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.dot{animation:none}.card{transition:none}}

/* --- about panel --- */
.about{background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:20px 22px; margin-top:14px; font-size:14.5px; max-width:64ch}
.about p{margin:0 0 .9em}
.about p:last-child{margin-bottom:0}

/* --- footer --- */
footer{margin-top:clamp(44px,8vw,64px); padding-top:20px; border-top:1px solid var(--line);
  color:var(--muted); font-size:13px; display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between}
footer a{color:var(--ink); text-decoration:none; font-weight:600}
footer a:hover{text-decoration:underline}