:root{
    --bg:#ffffff; --ink:#0a0a0a; --muted:#6b7280; --line:#e5e7eb; --chip:#f7f8fa;
    --gutter:16px; --sidebar:240px; --header-h:72px;

    /* === 可调参数（统一改这里） === */
    --featured-tile-w: 240px;    /* 第一栏卡片宽（桌面） */
    --featured-tile-w-sm: 82vw;  /* 第一栏卡片宽（手机） */
    --ratio-featured: 16/9;      /* 第一栏图片比例：16/9、4/3、1/1... */
    --grid-min: 220px;           /* 第二栏最小卡片宽 */
    --ratio-grid: 16/9;          /* 第二栏图片比例 */
    --thumb-radius: 12px;        /* 所有列表图片圆角 */
  }

  *,*::before,*::after{box-sizing:border-box}
  html,body{height:100%; overflow-x:hidden}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:"Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Arial,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    line-height:1.6;-webkit-font-smoothing:antialiased
  }
  img{max-width:100%;display:block;border:0}
  a{color:inherit;text-decoration:none}
  a:hover{text-decoration:underline}
  button{font:inherit;cursor:pointer}
  [hidden]{display:none !important}

  .site{width:100%;padding:0 var(--gutter) 60px}

  /* ===== Header（logo左 / 搜索居中 / 按钮右） ===== */
  .site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
  @media (max-width:640px){ .site-header{position:static} }
  .site-header__bar{
    height:var(--header-h);display:grid;gap:12px;align-items:center;
    grid-template-columns:auto 1fr auto; padding:0 var(--gutter);
  }
  .logo{margin:0;line-height:1;font-weight:700;font-size:clamp(26px,5.6vw,36px)}
  .logo a{display:inline-flex;align-items:center}

  .search{position:relative;justify-self:center;min-width:0}
  .search input{
    width:clamp(320px,48vw,720px);height:44px;border:1px solid var(--line);
    border-radius:10px;padding:0 14px 0 44px;background:#fff;outline:none;font-size:16px;
    box-shadow:0 1px 0 rgba(0,0,0,.02) inset
  }
  .search .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#9aa0a6}

  .header-actions{display:flex;gap:12px;white-space:nowrap}
  .btn{height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:#fff}
  .btn--primary{background:#0b141a;color:#fff;border-color:#0b141a}
  .hamburger{display:none;background:transparent;border:0;padding:8px}
  .hamburger svg{width:24px;height:24px}

  /* ===== Layout ===== */
  .grid{display:grid;gap:24px;margin-top:20px;grid-template-columns:var(--sidebar) 1fr}
  .grid > *{min-width:0}

  /* 左侧导航样式 */
  .side{
    position:sticky;top:calc(var(--header-h) + 8px);align-self:start;
    border-right:1px solid var(--line);padding-right:12px;
    max-height:calc(100vh - var(--header-h) - 24px);overflow:auto
  }
  .side h3{margin:10px 0;font-size:14px}
  .side ul{list-style:none;margin:0;padding:0}
  .side li{margin:2px 0}
  .side li a{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 8px;border-radius:8px;color:#111
  }
  .side li a:hover{background:var(--chip)}
  .side .active a{background:#eef8ee;color:#0a7f0a}

  .section{margin-bottom:32px}
  .section__hd{display:flex;align-items:center;justify-content:space-between;margin:6px 0 14px}
  .section__title{font-size:18px;font-weight:700}

  /* ===== 卡片（图片圆角，无黑框；图片和文字分离） ===== */
  .tile{min-width:0}
  .tile__thumb{
    display:block;border-radius:var(--thumb-radius);overflow:hidden;
    background:transparent;border:0;outline:0;
  }
  .tile__thumb img{width:100%;height:100%;object-fit:cover;background:#fff}
  .tile__title{
    font-weight:700;font-size:15px;line-height:1.6;margin-top:10px;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden
  }
  .tile__meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin-top:10px}
  .tile__avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;flex:0 0 auto}

  /* ===== 第一栏：横向（无渐变；按钮只在可滚方向显示） ===== */
  .carousel{position:relative;width:100%}
  .carousel__track{
    display:flex;gap:18px;align-items:flex-start;
    overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;
    padding:2px 2px 8px 2px;scrollbar-width:none;overscroll-behavior-x:contain
  }
  .carousel__track::-webkit-scrollbar{display:none}
  .carousel__track .tile{scroll-snap-align:start;flex:0 0 var(--featured-tile-w)}
  .carousel .tile__thumb{aspect-ratio:var(--ratio-featured)}
  .carousel__nav{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;
    padding:0 6px;z-index:3;pointer-events:none
  }
  .carousel__btn{
    pointer-events:auto;width:44px;height:44px;border-radius:9999px;
    background:rgba(255,255,255,.95);border:1px solid #e5e7eb;
    box-shadow:0 6px 22px rgba(17,24,39,.15);
    display:flex;align-items:center;justify-content:center;
    backdrop-filter:saturate(150%) blur(4px)
  }
  .carousel__btn svg{width:22px;height:22px;stroke:#111827;stroke-width:2.5}
  @media (hover:hover){
    .carousel__btn:hover{transform:translateY(-1px)}
    .carousel__btn:active{transform:translateY(0)}
  }

  /* ===== 第二栏：自适应网格（固定比例 + 圆角） ===== */
  .grid-posts{display:grid;gap:18px;grid-template-columns:repeat(auto-fill, minmax(var(--grid-min), 1fr))}
  .grid-posts .tile__thumb{aspect-ratio:var(--ratio-grid)}

  /* ===== 响应式 ===== */
  @media (max-width:1100px){
    .grid{grid-template-columns:1fr}
    .side{position:static;border-right:0;padding-right:0;max-height:none}
  }
  @media (max-width:640px){
    /* 手机端搜索放到第二行且占满整行，与 logo 那排宽度一致 */
    .site-header__bar{
      grid-template-columns:1fr auto;grid-template-rows:auto auto;
      height:auto;padding:8px var(--gutter)
    }
    .search{grid-column:1/-1;grid-row:2;margin:8px 0 10px;justify-self:stretch;width:100%}
    .search input{width:100%;max-width:100%}
    .hamburger{display:inline-flex}
    .carousel__track .tile{flex-basis:var(--featured-tile-w-sm)}
  }
  @media (max-width:480px){ .header-actions .btn--ghost{display:none} }

  /* ===== 手机抽屉（如需） ===== */
  .only-mobile{display:none}
  .only-desktop{display:block}
  .side-wrap[aria-hidden="true"]{display:none}
  .side-wrap{position:fixed;inset:0 0 0 auto;width:min(84vw,320px);background:#fff;border-left:1px solid var(--line);z-index:60;padding:16px}
  .side-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:55}
  .side-mask.show{display:block}
  @media (max-width:1024px){ .only-mobile{display:block} .only-desktop{display:none} }