:root { --green-900:#24453b; --green-700:#477969; --green-500:#82aa9b; --green-300:#b9d8cb; --green-100:#edf6f1; --mint:#f7fbf9; --text:#26352f; --muted:#718079; --line:#dce9e2; --shadow:0 16px 40px rgba(45,85,70,.10); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--text); background:var(--mint); font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Segoe UI",sans-serif; line-height:1.75; }
button,input { font:inherit; }
.site-header { position:sticky; top:0; z-index:30; background:rgba(247,251,249,.92); backdrop-filter:blur(14px); border-bottom:1px solid rgba(220,233,226,.9); }
.header-inner { height:72px; max-width:1120px; margin:auto; padding:0 24px; display:flex; align-items:center; gap:24px; }
.brand { color:var(--green-900); text-decoration:none; font-weight:800; letter-spacing:.04em; }
.desktop-nav { margin-left:auto; display:flex; gap:8px; }
.desktop-nav a { color:var(--muted); text-decoration:none; padding:10px 14px; border-radius:12px; }
.desktop-nav a:hover { color:var(--green-900); background:var(--green-100); }
.menu-button { display:none; margin-left:auto; width:44px; height:44px; border:0; border-radius:12px; color:var(--green-900); background:var(--green-100); cursor:pointer; }
.mobile-menu { display:none; padding:12px 24px 20px; border-top:1px solid var(--line); background:var(--mint); }
.mobile-menu a { display:block; color:var(--text); text-decoration:none; padding:12px; border-radius:10px; }
.mobile-menu.open { display:block; }
main { max-width:1120px; margin:auto; padding:48px 24px 72px; }
.hero { padding:40px; border:1px solid var(--line); border-radius:28px; background:linear-gradient(135deg,#fff 0%,var(--green-100) 100%); box-shadow:var(--shadow); }
.hero h1 { margin:0 0 10px; color:var(--green-900); font-size:clamp(2rem,5vw,3.4rem); line-height:1.15; }
.hero p { max-width:650px; margin:0; color:var(--muted); }
.search { position:relative; margin-top:28px; }
.search svg { position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--green-500); }
.search input { width:100%; height:56px; padding:0 18px 0 52px; border:1px solid var(--line); border-radius:16px; outline:none; color:var(--text); background:#fff; box-shadow:0 8px 24px rgba(45,85,70,.05); }
.search input:focus { border-color:var(--green-500); box-shadow:0 0 0 4px rgba(130,170,155,.18); }
.toolbar { margin:28px 0 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--muted); }
.filter-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.filter-button { border:1px solid var(--line); border-radius:999px; padding:8px 14px; color:var(--muted); background:#fff; cursor:pointer; }
.filter-button.active,.filter-button:hover { border-color:var(--green-300); color:var(--green-900); background:var(--green-100); }
.archive-list { display:grid; gap:14px; }
.archive-card { display:grid; grid-template-columns:112px 1fr auto; align-items:center; gap:20px; padding:22px; border:1px solid var(--line); border-radius:20px; text-decoration:none; color:inherit; background:#fff; transition:.2s ease; }
.archive-card:hover { transform:translateY(-3px); border-color:var(--green-300); box-shadow:var(--shadow); }
.archive-date { color:var(--green-700); font-size:.86rem; font-weight:700; }
.archive-date strong { display:block; color:var(--green-900); font-size:1.25rem; }
.archive-card h2 { margin:4px 0 2px; color:var(--green-900); font-size:1.18rem; }
.archive-card p { margin:0; color:var(--muted); font-size:.92rem; }
.arrow { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:var(--green-900); background:var(--green-100); }
.empty-state { display:none; padding:56px 20px; text-align:center; border:1px dashed var(--green-300); border-radius:20px; color:var(--muted); }
.viewer-main { max-width:820px; }
.episode-header { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.breadcrumbs { margin-bottom:18px; color:var(--muted); font-size:.88rem; }
.breadcrumbs a { color:var(--green-700); text-decoration:none; }
.episode-header h1 { margin:10px 0 12px; color:var(--green-900); font-size:clamp(1.8rem,5vw,3rem); line-height:1.2; }
.meta { display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--muted); font-size:.92rem; }
.category { padding:5px 11px; border-radius:999px; color:var(--green-900); background:var(--green-100); }
.transcript { display:grid; gap:14px; }
.transcript-entry { display:grid; grid-template-columns:74px 1fr; gap:16px; padding:20px; border-radius:18px; background:#fff; border:1px solid var(--line); }
.speaker { color:var(--green-700); font-weight:800; font-size:.86rem; }
.transcript-entry p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.limited { margin-top:24px; padding:28px; text-align:center; border-radius:20px; background:var(--green-100); border:1px solid var(--green-300); }
.limited p { margin-top:0; }
.primary-button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px; border-radius:12px; color:#fff; background:var(--green-700); text-decoration:none; font-weight:700; }
.primary-button:hover { background:var(--green-900); }
.footer { padding:24px; text-align:center; color:var(--muted); font-size:.82rem; }
.view-tabs { display:flex; gap:8px; }
.view-button,.page-button { min-height:40px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:#fff; cursor:pointer; }
.view-button.active { border-color:var(--green-300); color:var(--green-900); background:var(--green-100); }
.pagination { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:24px; }
.page-status { min-width:180px; text-align:center; color:var(--muted); }
.page-button:disabled { opacity:.45; cursor:not-allowed; }
.calendar-view { display:grid; gap:24px; }
.calendar-month { padding:24px; border:1px solid var(--line); border-radius:20px; background:#fff; }
.calendar-month h2 { margin:0 0 16px; color:var(--green-900); font-size:1.2rem; }
.calendar-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.calendar-day { min-height:110px; display:flex; flex-direction:column; padding:14px; border:1px solid var(--line); border-radius:14px; color:var(--text); text-decoration:none; background:var(--mint); }
.calendar-day strong { color:var(--green-900); font-size:1.5rem; }
.calendar-day span { color:var(--muted); font-size:.78rem; }
.calendar-day b { margin-top:4px; font-size:.92rem; }
.calendar-day:hover { border-color:var(--green-300); box-shadow:var(--shadow); }
[hidden] { display:none !important; }
@media (max-width:720px) {
  .header-inner { height:64px; padding:0 16px; }
  main { padding:24px 16px 48px; }
  .desktop-nav { display:none; }
  .menu-button { display:grid; place-items:center; }
  .hero { padding:26px 20px; border-radius:22px; }
  .toolbar { align-items:flex-start; flex-direction:column; }
  .archive-card { grid-template-columns:82px 1fr; gap:14px; padding:18px; }
  .archive-card .arrow { display:none; }
  .transcript-entry { grid-template-columns:1fr; gap:4px; padding:18px; }
}