/* ============================================================
   GIZSEEK 首页改版 - 中间区样式（仿 kocpc.com.tw 版式）
   仅作用于 banner 下方至 footer 上方的改版区域
   前缀 kz- 避免与原站样式冲突
   ============================================================ */

:root {
  --kz-accent: #1a66c9;          /* 主题蓝 */
  --kz-dark: #212121;
  --kz-text: #53585c;
  --kz-gray: #a0a0a0;
  --kz-line: #ebebeb;
  --kz-bg: #f5f5f5;
  --kz-width: 1140px;
}

/* 注意：不做全局 reset，避免破坏原站 header / footer 样式。
   所有重置限定在 .kz-main-wrap 作用域内。 */
.kz-main-wrap * { margin: 0; padding: 0; box-sizing: border-box; }

.kz-main-wrap {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    "Noto Sans JP", "Meiryo", -apple-system, "Segoe UI", sans-serif;
  color: var(--kz-text);
  font-size: 15px;
  line-height: 1.6;
}

.kz-main-wrap a { text-decoration: none; color: inherit; }
.kz-main-wrap img { max-width: 100%; display: block; }
.kz-main-wrap .kz-container {
  max-width: var(--kz-width);
  margin: 0 auto;
  padding: 0 14px;
}

/* 中间改版区整体白底 */
.kz-main-wrap {  }
.kz-hero .kz-slider,
.kz-widget { background: #fff; }

/* 兼容 container 与 main-wrap 同元素写法 */
.kz-container.kz-main-wrap {
  max-width: calc(var(--kz-width) + 28px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 14px;   /* 同元素写法必须有真实内边距，否则窄屏顶边 */
  padding-right: 14px;
}

/* 侧栏为普通流式布局：与左栏一起滚动，内容结束后右侧自然留白 */

/* ============ ① 轮播大图（kocpc jeg_slide 风格） ============ */
.kz-hero { padding-top: 20px; background: #fff; }

.kz-slider {
  position: relative;
  width: 100%;
  height: 450px;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
}

.kz-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .6s ease;
  display: block;
}
.kz-slide.is-active { opacity: 1; z-index: 1; }

/* 底部渐变遮罩 + 白字标题（kocpc 同款） */
.kz-slide-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 80px 36px 26px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.78) 100%);
  color: #fff;
}
.kz-slide-cat {
  display: inline-block;
  background: var(--kz-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 3px;
  letter-spacing: .5px;
  margin-bottom: 12px;
}
.kz-slide-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-height: 4em;
}
.kz-slide-meta {
  margin-top: 10px;
  font-size: 13px;
  opacity: .85;
  display: flex;
  gap: 16px;
}

/* 轮播控制 */
.kz-slide-nav {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
}
.kz-slide-btn {
  width: 36px; height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  color: #fff;
  font-size: 22px;
  line-height: 34px;
  cursor: pointer;
  transition: background .2s;
  backdrop-filter: blur(4px);
}
.kz-slide-btn:hover { background: var(--kz-accent); }
.kz-slide-dots { display: flex; gap: 8px; }
.kz-slide-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.kz-slide-dot.is-active { background: #fff; transform: scale(1.2); }

/* ============ ② 主内容双栏布局 ============ */
.kz-main-wrap {
  display: flex;
  gap: 30px;
  margin-top: 30px;
  align-items: flex-start;
  padding-bottom: 50px;
}
.kz-main { flex: 1 1 auto; min-width: 0; }
.kz-sidebar {
  flex: 0 0 320px;
  width: 320px;
}

/* 区块标题条（kocpc jeg_block_head 风格） */
.kz-block-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 3px solid var(--kz-dark);
  padding-bottom: 10px;
  margin-bottom: 24px;
}
.kz-block-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--kz-dark);
  letter-spacing: 1px;
}
.kz-block-sub {
  font-size: 12px;
  color: var(--kz-accent);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ---- 主栏横向文章列表（kocpc jeg_pl_md_2：左图右文） ---- */
.kz-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.kz-card {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--kz-line);

}
.kz-card:last-child { border-bottom: none; }

.kz-card-thumb {
  display: block;
  position: relative;
  padding-top: 56.25%;        /* 16:9 */
  overflow: hidden;
  border-radius: 4px;
  background: #eee;
}
.kz-card-thumb img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.kz-card:hover .kz-card-thumb img { transform: scale(1.05); }

.kz-card-body { display: flex; flex-direction: column; justify-content: center; }

/* 注意：body 带 .tailwind，而 digg.css 里有 .tailwind h2{font-size:inherit;font-weight:inherit}
   特异性 0,1,1 会压过 .kz-card-title(0,1,0)，故此处用 .kz-card .kz-card-title 提升到 0,2,1 */
.kz-card .kz-card-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--kz-dark);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  max-height: calc(1.5em * 4);
  overflow: hidden;
  word-break: break-word;
  transition: color .2s;
}
.kz-card:hover .kz-card-title { color: var(--kz-accent); }

.kz-card-meta {
  margin-top: 10px;
  font-size: 12px;
  color: var(--kz-gray);
  display: flex;
  align-items: center;
  gap: 14px;
  text-transform: uppercase;
}
.kz-card-meta .by { color: #999; }
.kz-card-meta .author { color: var(--kz-accent); font-weight: 700; }
/* 时钟图标（kocpc 同款：作者与日期之间的 ⏰） */
.kz-card-meta .dot {
  width: 13px; height: 13px;
  color: var(--kz-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kz-card-meta .dot svg { display: block; }

.kz-card-excerpt {
  margin-top: 10px;
  font-size: 14px;
  color: var(--kz-text);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ---- 分页（kocpc 方块样式） ---- */
.kz-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.kz-pg-total {
  font-size: 13px;
  color: var(--kz-gray);
  margin-right: 12px;
}
.kz-pg, .kz-pg-nav {
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--kz-line);
  border-radius: 3px;
  font-size: 14px;
  font-weight: 600;
  color: var(--kz-text);
  transition: all .2s;
}
.kz-pg:hover, .kz-pg-nav:hover {
  border-color: var(--kz-accent);
  color: var(--kz-accent);
}
.kz-pg-current {
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kz-accent);
  border: 1px solid var(--kz-accent);
  border-radius: 3px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

/* ---- 无限滚动加载指示器 ---- */
.kz-sentinel {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 30px 0 10px;
  min-height: 24px;
  color: var(--kz-gray);
  font-size: 13px;
  letter-spacing: 1px;
}
.kz-sentinel span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--kz-accent);
  opacity: .25;
  animation: kzBounce 1.2s infinite;
}
.kz-sentinel span:nth-child(2) { animation-delay: .15s; }
.kz-sentinel span:nth-child(3) { animation-delay: .3s; }
.kz-sentinel.is-loading span { opacity: 1; }
.kz-sentinel:not(.is-loading):not(:empty) { animation: none; }
.kz-sentinel:not(.is-loading) span { display: none; }

@keyframes kzBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .25; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ============ ③ 右侧栏 ============ */
.kz-widget {
  background: var(--bg);
  border: 1px solid var(--kz-line);
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 24px;
}
.kz-widget-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--kz-dark);
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--kz-accent);
  position: relative;
  letter-spacing: 1px;
}

/* SNS 按钮 */
.kz-sns { display: flex; gap: 10px; }
.kz-sns-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  transition: opacity .2s, transform .2s;
}
.kz-sns-btn:hover { opacity: .85; transform: translateY(-2px); }
.kz-fb { background: #1877f2; }
.kz-tw { background: #000; }
.kz-yt { background: #ff0000; }
.kz-ig { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }

/* 标签云 */
.kz-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.kz-tag {
  display: inline-block;
  padding: 5px 12px;
  background: var(--kz-bg);
  border: 1px solid var(--kz-line);
  border-radius: 3px;
  font-size: 12px;
  color: var(--kz-text);
  transition: all .2s;
}
.kz-tag:hover { background: var(--kz-accent); border-color: var(--kz-accent); color: #fff; }

/* ---- kocpc 风格侧栏标题（左侧色条 + 下划线） ---- */
.kz-w-head {
  border-bottom: 1px solid var(--kz-line);
  margin-bottom: 16px;
  position: relative;
}
.kz-widget .kz-w-head h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--kz-dark);
  padding-bottom: 10px;
  position: relative;
  display: inline-block;
  letter-spacing: .5px;
}
.kz-w-head h3::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--kz-accent);
}

/* ---- ① 検索フォーム（kocpc：灰底输入框 + 深色方按钮） ---- */
.kz-search-form { display: flex; }
.kz-search-form input[type="text"] {
  flex: 1;
  min-width: 0;
  border: 1px solid #e3e3e3;
  background: #f7f7f7;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--kz-text);
  border-radius: 2px 0 0 2px;
  outline: none;
}
.kz-search-form input[type="text"]:focus { border-color: var(--kz-accent); background: #fff; }
.kz-search-form input::placeholder { color: #b5b5b5; }
.kz-search-form button {
  border: none;
  background: var(--kz-accent);
  color: #fff;
  width: 46px;
  cursor: pointer;
  border-radius: 0 2px 2px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.kz-search-form button:hover { background: #124a94; }

/* ---- ② 人気記事（首条大图 + 序号标题） ---- */
.kz-pop-list { list-style: none; margin: 0; padding: 0; }
.kz-pop-item {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--kz-line);
}
.kz-pop-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.kz-pop-item .kz-pop-thumb {
  display: block;
  position: relative;
  padding-top: 71.4%;          /* 350x250 */
  overflow: hidden;
  border-radius: 3px;
  background: #eee;
  margin-bottom: 10px;
}
.kz-pop-item .kz-pop-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.kz-pop-item:hover .kz-pop-thumb img { transform: scale(1.05); }
.kz-pop-item .kz-pop-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--kz-dark);
  position: relative;
  padding-left: 30px;
  display: block;
}
/* 序号 01 02 03 ... */
.kz-pop-item .kz-pop-title::before {
  content: attr(data-num);
  position: absolute;
  left: 0; top: 1px;
  font-size: 13px;
  font-weight: 800;
  color: var(--kz-accent);
  letter-spacing: 0;
}
.kz-pop-item:hover .kz-pop-title { color: var(--kz-accent); }
/* 第二条起无缩图时不需要左留白 */
.kz-pop-item.no-thumb .kz-pop-title { padding-left: 30px; }

/* ---- ③ 人気記事（横向小卡：图 + 标题） ---- */
.kz-block-list { display: flex; flex-direction: column; }
.kz-block-item {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--kz-line);
  align-items: flex-start;
}
.kz-block-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.kz-block-thumb {
  position: relative;
  padding-top: 62%;
  overflow: hidden;
  border-radius: 3px;
  background: #eee;
}
.kz-block-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.kz-block-item:hover .kz-block-thumb img { transform: scale(1.05); }
.kz-block-item .kz-block-tt {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--kz-dark);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.kz-block-item:hover .kz-block-tt { color: var(--kz-accent); }

/* 广告占位 */
.kz-ad-box {
  min-height: 250px;
  background: var(--kz-bg);
  border: 1px dashed #ccc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 14px;
  letter-spacing: 2px;
  text-align: center;
}


/* ============ 响应式 ============ */
@media (max-width: 1024px) {
  .kz-sidebar { display: none; }
  .kz-slider { height: 380px; }
  .kz-card { grid-template-columns: 280px minmax(0,1fr); gap: 18px; }
  .kz-card .kz-card-title { font-size: 17px; }
}

@media (max-width: 860px) {
  .kz-slide-title { font-size: 20px; }
  .kz-slider { height: 320px; }
  .kz-card .kz-card-title { font-size: 16px; }
}

@media (max-width: 640px) {
  /* ---- 两侧留边，不再顶边 ---- */
  .kz-main-wrap .kz-container,
  .kz-container.kz-main-wrap { padding-left: 16px; padding-right: 16px; }
  .tb-gallery { padding-left: 16px !important; padding-right: 16px !important; margin-top: 14px !important; }
  .tb-gallery-grid { gap: 10px !important; }
  .tb-gallery .tb-gallery-tile { border-radius: 8px !important; }
  .tb-gallery .tb-gallery-title { font-size: 14px !important; }
  .tb-gallery .tb-gallery-lead .tb-gallery-title { font-size: 16px !important; }

  /* ---- 区块标题（テクノロジー TECHNOLOGY） ---- */
  .kz-block-head, .kz-block-title { margin-bottom: 16px; }
  .kz-block-title { font-size: 19px; letter-spacing: .5px; }
  .kz-block-sub { font-size: 11px; letter-spacing: 1.5px; }

  /* ---- 卡片排版：字号/行距/间距整体放大一档，更透气 ---- */
  .kz-card { grid-template-columns: 1fr; gap: 10px; padding-bottom: 22px; }
  .kz-card:last-child { padding-bottom: 8px; }
  .kz-card-thumb { border-radius: 8px; }
  .kz-card .kz-card-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    max-height: calc(1.6em * 4);
    letter-spacing: .2px;
  }
  .kz-card-meta { margin-top: 8px; font-size: 11px; gap: 10px; }
  .kz-card-meta .dot { width: 12px; height: 12px; }
  .kz-card-excerpt {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.75;
    -webkit-line-clamp: 3;
    max-height: calc(1.75em * 3);
  }

  /* ---- 挂件 ---- */
  .kz-widget { padding: 14px; }
  .kz-w-head h3 { font-size: 16px; }

  .kz-slider { height: 220px; }
  .kz-slide-cap { padding: 50px 18px 16px; }
  .kz-slide-title {
    font-size: 15px;
    -webkit-line-clamp: 3;
    max-height: 4.4em;
  }
  .kz-slide-meta { display: none; }
  .kz-hero { padding-top: 10px; }
}

/* ============================================================
   夜间模式：kz 区域变量覆盖（配合 body.dark）
   ============================================================ */
body.dark {
  --kz-accent: #5aa2ff;
  --kz-dark: #e6eaef;
  --kz-text: #c6cdd6;
  --kz-gray: #7d8896;
  --kz-line: #272f3a;
  --kz-bg: #1d242e;
  background: #0f1216 !important;
  color: var(--kz-text);
}
body.dark .kz-hero,
body.dark .kz-main-wrap,
body.dark .kz-widget { background: transparent !important; }
body.dark .kz-main-wrap { background: #0f1216 !important; }

/* 卡片 */
body.dark .kz-card { border-bottom-color: var(--kz-line); }
body.dark .kz-card-title { color: var(--kz-dark); }
body.dark .kz-card-excerpt { color: var(--kz-text); }
body.dark .kz-card-meta { color: var(--kz-gray); }
body.dark .kz-card-meta .by { color: var(--kz-gray); }
body.dark .kz-card-thumb { background: #1d242e; }

/* 侧栏 */
body.dark .kz-widget { background: #181e26; border-color: var(--kz-line); }
body.dark .kz-w-head { border-bottom-color: var(--kz-line); }
body.dark .kz-w-head h3 { color: var(--kz-dark); }
body.dark .kz-pop-item { border-bottom-color: var(--kz-line); }
body.dark .kz-pop-title { color: var(--kz-dark); }
body.dark .kz-pop-thumb { background: #1d242e; }
body.dark .kz-block-item { border-bottom-color: var(--kz-line); }
body.dark .kz-block-title { color: var(--kz-dark); }
body.dark .kz-block-thumb { background: #1d242e; }
body.dark .kz-ad-box { background: #1d242e; border-color: #2c3542; color: #5c6773; }

/* 搜索框 */
body.dark .kz-search-form input[type="text"] {
  background: #1d242e; border-color: #2c3542; color: var(--kz-dark);
}
body.dark .kz-search-form input[type="text"]:focus { background: #222a34; border-color: var(--kz-accent); }

/* 分页 */
body.dark .kz-pg,
body.dark .kz-pg-nav { background: #181e26; border-color: var(--kz-line); color: var(--kz-text); }
body.dark .kz-pg:hover,
body.dark .kz-pg-nav:hover { border-color: var(--kz-accent); color: var(--kz-accent); }
body.dark .kz-pg-current { background: var(--kz-accent); border-color: var(--kz-accent); color: #0f1216; }
body.dark .kz-pg-total { color: var(--kz-gray); }

/* 区块标题 */
body.dark .kz-block-title { color: var(--kz-dark); }
body.dark .kz-block-sub { color: var(--kz-gray); }

/* 加载指示器 */
body.dark .kz-sentinel { color: var(--kz-gray); }

/* ============================================================
   顶部图片画廊（tb-gallery）：左大图 + 中图 + 右侧两小图
   原静态稿遗漏定义，此处补齐
   ============================================================ */
.tb-gallery {
  max-width: var(--kz-width);
  margin: 20px auto 0;
  padding: 0 14px;
}
.tb-gallery-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr 0.78fr;
  grid-template-rows: repeat(2, 224px);
  gap: 12px;
}
.tb-gallery-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: #eee;
}
.tb-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.tb-gallery-tile:hover img { transform: scale(1.05); }

/* 左大图占两行 */
.tb-gallery-lead { grid-row: span 2; }
/* 中图占两行 */
.tb-gallery-mid  { grid-row: span 2; }
/* 右侧两小图列 */
.tb-gallery-col {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
}

/* 底部渐变标题条 */
.tb-gallery-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 46px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.tb-gallery-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.tb-gallery-lead .tb-gallery-title,
.tb-gallery-mid .tb-gallery-title { font-size: 16px; }
.tb-gallery-col .tb-gallery-title { font-size: 13px; }

@media (max-width: 900px) {
  .tb-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, 180px);
  }
  .tb-gallery-lead { grid-row: span 1; grid-column: span 2; }
  .tb-gallery-mid  { grid-row: span 1; }
  .tb-gallery-col  { grid-row: span 1; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; }
}
@media (max-width: 600px) {
  .tb-gallery-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 179px); }
  .tb-gallery-lead, .tb-gallery-mid { grid-column: span 1; }
  .tb-gallery-col { grid-template-columns: repeat(2, 1fr); }
  .tb-gallery-title { font-size: 13px; }
}

/* 夜间模式 */
body.dark .tb-gallery-tile { background: #232b36; }