/* KK工具网 · 基础布局 + 通用工具类
 * 详细规范见 ../docs/STYLE_GUIDE.md
 */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--kk-font-sans);
  font-size: var(--kk-fs-base);
  line-height: var(--kk-lh-base);
  color: var(--kk-text-1);
  background: var(--kk-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--kk-primary);
  text-decoration: none;
}
a:hover { color: var(--kk-primary-hover); }

button {
  font-family: inherit;
  cursor: pointer;
}

img, svg { display: block; max-width: 100%; }

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ===== 通用工具类 ===== */
.kk-flex { display: flex; }
.kk-flex-1 { flex: 1; min-width: 0; }
.kk-flex-col { display: flex; flex-direction: column; }
.kk-items-center { align-items: center; }
.kk-justify-between { justify-content: space-between; }
.kk-gap-2 { gap: var(--kk-space-2); }
.kk-gap-3 { gap: var(--kk-space-3); }
.kk-gap-4 { gap: var(--kk-space-4); }
.kk-gap-5 { gap: var(--kk-space-5); }

.kk-text-1 { color: var(--kk-text-1); }
.kk-text-2 { color: var(--kk-text-2); }
.kk-text-3 { color: var(--kk-text-3); }
.kk-text-sm { font-size: var(--kk-fs-sm); }
.kk-text-xs { font-size: var(--kk-fs-xs); }
.kk-text-md { font-size: var(--kk-fs-md); }
.kk-text-lg { font-size: var(--kk-fs-lg); }

.kk-fw-500 { font-weight: 500; }
.kk-fw-600 { font-weight: 600; }

.kk-mt-2 { margin-top: var(--kk-space-2); }
.kk-mt-4 { margin-top: var(--kk-space-4); }
.kk-mt-6 { margin-top: var(--kk-space-6); }

/* ===== 页面整体外壳 ===== */
.kk-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;   /* 页面整体不滚动，仅右侧主区内部滚动 → 左侧栏真正固定 */
}

.kk-sidebar-col {
  width: var(--kk-sidebar-w);
  flex-shrink: 0;
  /* 外层 .kk-shell 不滚动，侧栏恒定占满视口高度，始终固定在左侧 */
  background: var(--kk-sidebar);
  border-right: 1px solid var(--kk-border);
  position: sticky;
  top: 0;
  height: 100vh;
  /* flex 纵向：brand 固定高度，.kk-side 占满剩余并可内部滚动，
     使侧栏底部的「反馈」入口能用 margin-top:auto 贴底 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kk-main-col {
  flex: 1;
  min-width: 0;
  height: 100vh;
  overflow-y: auto;             /* 只有右侧内容滚动 */
  -webkit-overflow-scrolling: touch;
  padding: var(--kk-space-6) var(--kk-space-8);
}

/* ===== Logo 区 ===== */
.kk-brand {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--kk-space-5);
  border-bottom: 1px solid var(--kk-border);
  flex-shrink: 0;
}
.kk-brand__mark {
  width: 32px; height: 32px;
  border-radius: var(--kk-radius-sm);
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.kk-brand__tx {
  font-size: 16px; font-weight: 650;
  color: var(--kk-text-1);
  letter-spacing: -.2px;
}
.kk-brand__tx small {
  display: block;
  font-size: 11px;
  color: var(--kk-text-3);
  font-weight: 400;
  letter-spacing: .4px;
  margin-top: 1px;
}

/* ===== 移动端顶栏 / 抽屉（桌面端全部隐藏，≤768px 才启用）===== */
.kk-mtop { display: none; }

.kk-drawer-mask {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(29, 33, 41, .45);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}
.kk-drawer-mask.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* 抽屉内关闭按钮：桌面端侧栏常驻，不需要 */
.kk-drawer-close {
  display: none;
  margin-left: auto;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  border-radius: var(--kk-radius-sm);
  color: var(--kk-text-3);
  align-items: center;
  justify-content: center;
  transition: background .14s, color .14s;
}
.kk-drawer-close:hover {
  background: var(--kk-border-soft);
  color: var(--kk-text-1);
}

/* ===== Hero 欢迎区 ===== */
.kk-hero {
  background:
    linear-gradient(135deg, rgba(7, 42, 58, .82), rgba(9, 60, 80, .72)),
    url('/uploads/site/hero.webp') center/cover no-repeat;
  background-color: var(--kk-primary);
  border-radius: var(--kk-radius);
  padding: var(--kk-space-6) var(--kk-space-8);
  color: var(--kk-primary-fg);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--kk-space-6);
}
.kk-hero::before {
  content: "";
  position: absolute;
  right: -80px; top: -60px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.kk-hero::after {
  content: "";
  position: absolute;
  right: 60px; bottom: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
}
.kk-hero__inner { position: relative; z-index: 1; }
.kk-hero__title {
  font-size: var(--kk-fs-xl);
  font-weight: 650;
  margin: 0 0 var(--kk-space-2);
  letter-spacing: -.3px;
}
.kk-hero__sub {
  font-size: var(--kk-fs-sm);
  color: rgba(255, 255, 255, .82);
  margin: 0 0 var(--kk-space-5);
}

/* ===== 搜索框（Hero 内） ===== */
.kk-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 var(--kk-space-4);
  background: var(--kk-surface);
  border-radius: var(--kk-radius);
  box-shadow: var(--kk-shadow-lg);
  max-width: 600px;
}
.kk-search__icon {
  color: var(--kk-text-3);
  flex-shrink: 0;
}
.kk-search__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--kk-fs-base);
  color: var(--kk-text-1);
  height: 100%;
}
.kk-search__input::placeholder { color: var(--kk-text-3); }
.kk-search__btn {
  height: 32px;
  padding: 0 18px;
  border-radius: var(--kk-radius-sm);
  background: var(--kk-primary);
  color: var(--kk-primary-fg);
  border: none;
  font-weight: 500;
  font-size: var(--kk-fs-sm);
}
.kk-search__btn:hover { background: var(--kk-primary-hover); }

.kk-search-hint {
  margin-top: var(--kk-space-3);
  font-size: var(--kk-fs-xs);
  color: rgba(255, 255, 255, .7);
}
.kk-search-hint b { color: var(--kk-primary-fg); margin-right: 4px; }

/* ===== 区块标题 ===== */
.kk-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--kk-fs-lg);
  font-weight: 650;
  color: var(--kk-text-1);
  margin: 0 0 var(--kk-space-5);
  padding-bottom: var(--kk-space-3);
  border-bottom: 1px solid var(--kk-border-soft);
}
.kk-section-title__icon {
  width: 28px; height: 28px;
  border-radius: var(--kk-radius-sm);
  background: var(--kk-primary-bg);
  color: var(--kk-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kk-section-title__sub {
  font-size: var(--kk-fs-sm);
  color: var(--kk-text-3);
  font-weight: 400;
  margin-left: 4px;
}

/* ===== 工具卡片网格 ===== */
.kk-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--kk-space-5);
}

/* ===== 空态 ===== */
.kk-empty {
  text-align: center;
  padding: var(--kk-space-10) var(--kk-space-5);
  color: var(--kk-text-3);
  font-size: var(--kk-fs-sm);
}
.kk-empty__icon {
  font-size: 40px;
  margin-bottom: var(--kk-space-3);
  opacity: .5;
}

/* ===== 响应式 ===== */
@media (max-width: 1024px) {
  .kk-tool-grid { grid-template-columns: repeat(2, 1fr); }
  .kk-main-col { padding: var(--kk-space-5); }
}
@media (max-width: 768px) {

  /* ---- 顶部栏：只放汉堡按钮 + 站名，不再堆侧栏内容 ---- */
  .kk-mtop {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 60;
    height: 52px;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    padding: 0 var(--kk-space-4);
    background: var(--kk-surface);
    border-bottom: 1px solid var(--kk-border);
  }
  .kk-mtop__btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--kk-radius-sm);
    color: var(--kk-text-2);
    transition: background .14s, color .14s;
  }
  .kk-mtop__btn:hover {
    background: var(--kk-border-soft);
    color: var(--kk-primary);
  }
  .kk-mtop__brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .kk-brand__mark--sm {
    width: 26px;
    height: 26px;
  }
  .kk-mtop__title {
    font-size: 15px;
    font-weight: 650;
    color: var(--kk-text-1);
    letter-spacing: -.2px;
    white-space: nowrap;
  }

  /* ---- 遮罩启用 ---- */
  .kk-drawer-mask { display: block; }

  .kk-shell {
    flex-direction: column;
    height: auto;
    overflow: visible;   /* 移动端恢复整页滚动（侧栏为抽屉） */
  }

  /* ---- 侧栏改为左侧滑出抽屉（不再占据顶部空间）---- */
  .kk-sidebar-col {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 264px;
    max-width: 82vw;
    height: 100vh;
    z-index: 100;
    border-right: 1px solid var(--kk-border);
    transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
    box-shadow: var(--kk-shadow-lg);
    overflow: hidden;
  }
  .kk-sidebar-col.is-open { transform: translateX(0); }

  /* 抽屉内显示关闭按钮 */
  .kk-drawer-close { display: flex; }

  /* 抽屉内分类区可滚动，反馈入口仍贴底 */
  .kk-side {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .kk-side-feedback { margin: auto var(--kk-space-1) 0; }

  /* ---- 主区 ---- */
  .kk-main-col {
    height: auto;
    overflow-y: visible;   /* 移动端整页滚动 */
    padding: var(--kk-space-4);
  }
  .kk-tool-grid { grid-template-columns: 1fr; }
  .kk-hero { padding: var(--kk-space-5); }
  .kk-hero__title { font-size: 18px; }
}