/*
 * trendbook.css
 * Trendbook list page & Latest Insights widget styles
 * Used by: trendbook.html / index.html
 * Created: 2026-05-27
 */

/* =====================================================
   COMMON BASE (trendbook.html固有 - 他ページのインラインstyleと同等)
   ===================================================== */
:root{--bg:#FFFFFF;--bg-soft:#F7F7F5;--bg-dark:#1A1A1A;--text:#1A1A1A;--text-muted:#6B6B6B;--text-light:#FFFFFF;--accent:#6B7C8A;--accent-hover:#4F5A65;--border:#E0E0E0;--serif:'Noto Serif JP',serif;--sans:'Noto Sans JP',sans-serif;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);color:var(--text);background:var(--bg);line-height:1.8;font-size:15px;-webkit-font-smoothing:antialiased;padding-top:72px;}
img{display:block;width:100%;height:100%;object-fit:cover;}
a{color:inherit;text-decoration:none;}
section{padding:100px 0;}
.container{max-width:1200px;margin:0 auto;padding:0 80px;}
.section-label{font-size:12px;letter-spacing:0.3em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;font-weight:400;}
.section-title{font-family:var(--serif);font-size:clamp(24px,3vw,36px);font-weight:300;line-height:1.6;letter-spacing:0.05em;color:var(--text);margin-bottom:16px;}
.divider{width:40px;height:1px;background:var(--accent);margin:20px 0;}
.fade-in{opacity:0;transform:translateY(24px);transition:opacity 0.7s ease,transform 0.7s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}

/* =====================================================
   PAGE HERO (trendbook.html)
   ===================================================== */
.page-hero{padding-top:72px;height:280px;display:flex;align-items:flex-end;position:relative;overflow:hidden;}
.page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.page-hero-overlay{position:absolute;inset:0;background:rgba(26,26,26,0.55);}
.page-hero-content{position:relative;z-index:2;padding:0 80px 48px;}
.page-hero-label{font-size:10px;letter-spacing:0.35em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:12px;}
.page-hero-title{font-family:var(--serif);font-size:clamp(28px,4vw,44px);font-weight:300;color:#fff;letter-spacing:0.05em;}
.fade-in{opacity:0;transform:translateY(24px);transition:opacity 0.7s ease,transform 0.7s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}

/* =====================================================
   INTRO (trendbook.html)
   ===================================================== */
.tb-intro{background:var(--bg-soft);padding:48px 0 40px;}
.tb-intro-inner{max-width:640px;}
.tb-intro-desc{font-size:14px;font-weight:300;color:var(--text-muted);line-height:2.2;}

/* =====================================================
   CATEGORY TABS (trendbook.html)
   ===================================================== */
.tb-tabs{display:flex;gap:8px;margin-bottom:32px;flex-wrap:wrap;}
.tb-tab{padding:8px 20px;font-size:11px;letter-spacing:0.15em;border:1px solid var(--border);color:var(--text-muted);background:transparent;cursor:pointer;transition:all 0.2s;font-family:var(--sans);font-weight:400;}
.tb-tab:hover{border-color:var(--accent);color:var(--text);}
.tb-tab.active{background:var(--text);color:#fff;border-color:var(--text);}

/* =====================================================
   CARD GRID (trendbook.html)
   ===================================================== */
.tb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.tb-card{background:var(--bg);transition:transform 0.2s;overflow:hidden;display:block;}
.tb-card:hover{transform:translateY(-3px);}
.tb-card-img{height:160px;overflow:hidden;}
.tb-card-img img{transition:transform 0.6s;}
.tb-card:hover .tb-card-img img{transform:scale(1.04);}
.tb-card-body{padding:20px 4px 24px;}
.tb-card-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.tb-card-date{font-size:11px;color:var(--text-muted);letter-spacing:0.08em;}
.tb-card-tag{font-size:9px;letter-spacing:0.15em;padding:2px 8px;border:1px solid var(--border);color:var(--text-muted);}
.tb-card-title{font-family:var(--serif);font-size:15px;font-weight:300;color:var(--text);line-height:1.7;margin-bottom:10px;letter-spacing:0.02em;}
.tb-card-excerpt{font-size:12px;font-weight:300;color:var(--text-muted);line-height:1.9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tb-card-readmore{display:inline-block;margin-top:12px;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);transition:color 0.2s;}
.tb-card-readmore:hover{color:var(--text);}

/* =====================================================
   PLACEHOLDER CARD IMAGE (trendbook.html)
   ===================================================== */
.tb-card-img-placeholder{height:160px;background:linear-gradient(135deg,#f0eeea 0%,#e5e3de 100%);display:flex;align-items:center;justify-content:center;}
.tb-card-img-placeholder span{font-family:var(--serif);font-size:12px;font-weight:300;color:var(--text-muted);letter-spacing:0.15em;}

/* =====================================================
   PAGINATION (trendbook.html)
   ===================================================== */
.tb-pagination{display:flex;justify-content:center;gap:8px;margin-top:48px;}
.tb-page-btn{width:40px;height:40px;font-size:12px;letter-spacing:0.05em;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;font-family:var(--sans);transition:all 0.2s;}
.tb-page-btn:hover{border-color:var(--accent);color:var(--text);}
.tb-page-btn.active{background:var(--text);color:#fff;border-color:var(--text);}

/* =====================================================
   SEARCH (trendbook.html)
   ===================================================== */
.tb-search-wrap{position:relative;margin-bottom:20px;}
.tb-search-input{width:100%;padding:11px 40px 11px 16px;font-size:13px;font-family:var(--sans);font-weight:300;letter-spacing:0.03em;border:1px solid var(--border);background:var(--bg);color:var(--text);outline:none;transition:border-color 0.2s;}
.tb-search-input:focus{border-color:var(--accent);}
.tb-search-input::placeholder{color:var(--text-muted);font-weight:300;}
.tb-search-clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:18px;line-height:1;padding:0 4px;display:none;}
.tb-search-clear.show{display:block;}
.tb-no-results{text-align:center;padding:64px 0;font-size:13px;color:var(--text-muted);letter-spacing:0.05em;display:none;}

/* =====================================================
   LATEST INSIGHTS WIDGET (index.html)
   ===================================================== */
.tb-idx-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.tb-idx-card{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start;padding:24px 0;border-bottom:1px solid var(--border);transition:opacity 0.2s;}
.tb-idx-card:first-child{border-top:1px solid var(--border);}
.tb-idx-card:hover{opacity:0.7;}
.tb-idx-thumb{height:64px;overflow:hidden;flex-shrink:0;}
.tb-idx-thumb img{width:100%;height:100%;object-fit:cover;}
.tb-idx-thumb-soon{height:64px;background:linear-gradient(135deg,#f0eeea,#e5e3de);display:flex;align-items:center;justify-content:center;}
.tb-idx-soon-lbl{font-size:9px;letter-spacing:0.12em;color:var(--text-muted);}
.tb-idx-meta{display:flex;gap:8px;margin-bottom:8px;align-items:center;}
.tb-idx-date{font-size:11px;color:var(--text-muted);letter-spacing:0.06em;}
.tb-idx-tag{font-size:9px;letter-spacing:0.1em;border:1px solid var(--border);color:var(--text-muted);padding:1px 7px;flex-shrink:0;}
.tb-idx-title{font-family:var(--serif);font-size:14px;font-weight:300;color:var(--text);line-height:1.7;letter-spacing:0.02em;}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media(max-width:1024px){
  .container{padding:0 40px;}
  .page-hero-content{padding:0 40px 40px;}
  .tb-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  section{padding:64px 0;}
  .container{padding:0 24px;}
  .tb-grid{grid-template-columns:1fr;gap:32px;}
  .tb-card-img,.tb-card-img-placeholder{height:180px;}
  .tb-idx-grid{grid-template-columns:1fr;}
  .tb-idx-card:nth-child(2){display:none;}
}