@charset "UTF-8";
/* ==========================================================================
   DailyNewSpot 全站公共样式
   所有页面均需引入本文件，且必须排在页面专属 css 之前。
   内容范围：设计变量 / reset / 页头导航 / 分类徽章 / 通用缩图 / 侧栏组件 / 页脚 / 公共响应式
   ========================================================================== */

/* ===== 设计变量 ===== */
:root{
  --ink:#16302B;--pine:#1F4A40;--paper:#FFFFFF;--mist:#EFF5F2;--line:#DCE7E2;
  --muted:#5C6B66;--spot:#FF7A1A;--spot-deep:#D95F00;--good:#1E8A5A;
  --serif:'Noto Serif TC',serif;--sans:'Noto Sans TC',-apple-system,sans-serif;--maxw:1200px;
}

/* ===== reset / 基础排版 ===== */
*{margin:0;padding:0;box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.65;font-size:15.5px}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--spot);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ===== 页头 ===== */
header.site{background:var(--ink);color:#fff;position:sticky;top:0;z-index:60}
.masthead{display:flex;align-items:center;gap:18px;padding:11px 0}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand .mark{width:38px;height:38px}
.brand .word{font-weight:900;font-size:20px;letter-spacing:-.5px;color:#fff;line-height:1.05}
.brand .word em{font-style:normal;color:var(--spot)}
.brand .tag{font-size:9.5px;letter-spacing:3px;color:#9FB3AC;font-weight:600}
/* 注意:此處不可加 overflow(-x) 裁切——二級下拉是 position:absolute 且落在 nav 盒子外(top:100%)，
   而 CSS 規範下任一軸非 visible 會令另一軸由 visible 變成 auto，結果把下拉整個裁走(hover 無反應)。
   項目過多時改用換行(flex-wrap:wrap)處理，不用橫向捲動。 */
nav.primary{display:flex;gap:0;align-items:center;flex:1;flex-wrap:wrap;overflow:visible}
.navitem{position:relative;flex:none}
.navitem>a{display:block;padding:9px 10px;font-weight:800;font-size:13.5px;color:#E8F1ED;border-radius:7px;white-space:nowrap}
.navitem>a:hover{background:var(--pine);color:#fff}
.navitem>a[aria-current="page"]{color:var(--spot)}
.navitem.has-child>a:after{content:"▾";margin-left:5px;font-size:10px;color:#9FB3AC}
.submenu{display:none;position:absolute;top:100%;left:0;min-width:168px;background:var(--ink);border-radius:0 0 9px 9px;box-shadow:0 14px 28px rgba(0,0,0,.3);list-style:none;padding:6px 0;z-index:70}
.navitem:hover .submenu,.navitem:focus-within .submenu{display:block}
.submenu a{display:block;padding:9px 15px;font-size:13px;font-weight:700;color:#CFE0DA;white-space:nowrap}
.submenu a:hover{background:var(--pine);color:#fff}
a.submit-cta{flex:none;display:inline-flex;align-items:center;gap:7px;background:var(--spot);color:#fff;font-weight:900;font-size:13.5px;padding:9px 16px;border-radius:9px;white-space:nowrap}
a.submit-cta:hover{background:var(--spot-deep)}
.menu-btn{display:none;background:none;border:1.5px solid #3A5A52;border-radius:8px;padding:7px 12px;font-weight:700;font-size:14px;color:#fff;cursor:pointer}
.utility{background:var(--pine);color:#CFE0DA;font-size:12.5px}
.utility .wrap{display:flex;justify-content:space-between;gap:14px;padding:6px 20px}
.utility b{color:#fff}

/* ===== 分类徽章:颜色按分类名 crc32 取模固定分配，同一分类永远同色 ===== */
.tb{display:inline-block;font-size:11px;font-weight:900;letter-spacing:1px;padding:3px 9px;border-radius:5px;line-height:1.5}
.tb.c0{background:var(--good);color:#fff}
.tb.c1{background:var(--spot);color:#fff}
.tb.c2{background:#28527F;color:#fff}
.tb.c3{background:#7A5AA0;color:#fff}
.tb.c4{background:#8A8F93;color:#fff}
.tb.c5{background:#B5642C;color:#fff}

/* ===== 通用缩图占位:内部放 <img> 自动裁切填满 ===== */
.thumb{background:linear-gradient(135deg,#E7F0EB,#D5E4DD);display:flex;align-items:center;justify-content:center;color:#9FB3AC;font-size:11.5px;letter-spacing:2px;border-radius:10px;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}

/* ===== 面包屑 ===== */
/* 行内文字型（列表页 / 文章页） */
.crumb{font-size:12.5px;color:var(--muted)}
.crumb a:hover{color:var(--spot-deep)}
/* 通栏横条型（投稿页 / 各信息页） */
.crumbbar{border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted);background:var(--paper)}
.crumbbar .wrap{padding:10px 20px}
.crumbbar a:hover{color:var(--spot-deep);text-decoration:underline}
.crumbbar span{margin:0 7px;color:#B9C8C2}

/* ===== 侧栏通用组件(列表页 / 文章页共用) ===== */
aside.side{display:flex;flex-direction:column;gap:24px}
.sbox{border:1.5px solid var(--line);border-radius:13px;overflow:hidden}
.sbox .sh{background:var(--ink);color:#fff;padding:10px 15px;display:flex;justify-content:space-between;align-items:baseline}
.sbox .sh b{font-size:14.5px;letter-spacing:1px}
.sbox .sh span{font-size:11px;color:#9FB3AC;letter-spacing:2px}
/* 热榜(首页 .hotbox 内亦复用) */
.hotlist{list-style:none}
.hotlist li{display:flex;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);align-items:flex-start}
.hotlist li:last-child{border-bottom:none}
.hotlist .rank{font-family:var(--serif);font-weight:900;font-size:21px;color:var(--spot);line-height:1;width:23px;flex:none;font-style:italic}
.hotlist li:nth-child(n+4) .rank{color:#B9C8C2}
.hotlist a{font-size:13.5px;font-weight:800;line-height:1.5}
.hotlist a:hover{color:var(--spot-deep)}
.hotlist .hm{display:block;font-size:11px;color:var(--muted);font-weight:500;margin-top:2px}
/* 工具列表 */
.toollist{list-style:none}
.toollist li{border-bottom:1px solid var(--line)}
.toollist li:last-child{border-bottom:none}
.toollist a{display:flex;gap:10px;align-items:center;padding:12px 14px;font-weight:800;font-size:14px}
.toollist a:hover{background:var(--mist)}
.toollist .ti{font-size:19px}
.toollist small{display:block;font-weight:500;color:var(--muted);font-size:11.5px}
/* 侧栏投稿招商盒(深色 CTA) */
.submitbox{background:var(--ink);color:#E8F1ED;border-radius:13px;padding:20px 18px}
.submitbox h3{font-family:var(--serif);font-size:19px;font-weight:900;color:#fff;line-height:1.5}
.submitbox h3 em{font-style:normal;color:var(--spot)}
.submitbox p{font-size:13px;color:#B9CCC5;margin-top:9px;line-height:1.75}
.submitbox a{display:inline-flex;align-items:center;gap:7px;margin-top:14px;background:var(--spot);color:#fff;font-weight:900;padding:10px 20px;border-radius:9px;font-size:14px}
.submitbox a:hover{background:var(--spot-deep)}
.submitbox small{display:block;margin-top:11px;font-size:11px;color:#8FA69F}

/* ===== 页脚(三栏版;文章页的单行版见 article.css 覆盖) ===== */
footer{background:#0F211D;color:#9FB3AC;font-size:13.5px}
footer .wrap{padding:34px 20px 26px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
footer .word{color:#fff;font-weight:900;font-size:18px}
footer .word em{font-style:normal;color:var(--spot)}
footer p{margin-top:10px;line-height:1.8;max-width:32em}
footer h4{color:#fff;font-size:13.5px;letter-spacing:2px;margin-bottom:10px}
footer ul{list-style:none;display:grid;gap:7px}
footer a:hover{color:#fff}
footer .legal{border-top:1px solid #22443C;padding:14px 20px;text-align:center;color:#6E837C;font-size:12px}

/* ===== 公共响应式 ===== */
@media (max-width:1080px){
  /* 导航折叠为汉堡菜单，子菜单展开为静态缩进列表 */
  nav.primary{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink);flex-direction:column;align-items:stretch;padding:8px 14px 14px;overflow:visible;box-shadow:0 16px 30px rgba(0,0,0,.28)}
  nav.primary.open{display:flex}
  .navitem{flex:auto}
  .navitem>a{padding:12px}
  .submenu{display:block;position:static;box-shadow:none;background:transparent;padding:0 0 6px 14px;min-width:0}
  .submenu a{padding:7px 0;color:#9FB3AC}
  .menu-btn{display:block;margin-left:auto}
}
@media (max-width:600px){
  footer .wrap{grid-template-columns:1fr}
  .utility .wrap{flex-direction:column;gap:1px}
  a.submit-cta span{display:none}
  a.submit-cta{padding:9px 12px}
}
/* 页脚分类栏：宽屏（≥601px，即页脚多列布局时）用 columns 自动分两列，纵向填充、列满换列；
   ≤600px 页脚整体转单列，本栏默认继承 footer ul 的单列 grid，无需额外处理。 */
@media (min-width:601px){
  footer ul.footcats{display:block;columns:2;column-gap:18px}
  footer ul.footcats li{margin-bottom:7px;break-inside:avoid}
}