/* ============================================================
   layout.css — TWC 页面级布局骨架
   工具内页标题区 + 全站外壳让位（左栏/顶栏本身由 header.js 渲染）
   依赖 common.css / components.css
   ============================================================ */

/* ---------- 工具内页骨架 ---------- */
.twc-tool-head { margin-bottom: var(--twc-space-5); }
.twc-tool-head__title {
  font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.03em;
  color: var(--twc-ink); margin: var(--twc-space-4) 0 var(--twc-space-3);
  display: flex; align-items: center; gap: var(--twc-space-3); flex-wrap: wrap;
}
.twc-tool-head__icon {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--twc-radius-md);
  background: var(--twc-accent-soft); border: 1px solid var(--twc-accent-line);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.twc-tool-head__desc { font-size: var(--twc-text-md); color: var(--twc-muted); line-height: 1.75; }

/* 工具工作区面板 */
.twc-panel {
  background: var(--twc-surface); border: var(--twc-border);
  border-radius: var(--twc-radius-lg); padding: var(--twc-space-5);
}

/* ============================================================
   全站统一外壳：常驻可折叠左栏(240px) + 顶部搜索栏(72px)
   左栏与顶栏由 <waoww-header>(header.js) 渲染；此处只负责为页面内容让位。
   html.twc-shell-on            -> 外壳已挂载
   html.twc-sidebar-collapsed   -> 桌面端左栏收起
   ============================================================ */
:root { --twc-sidebar-w: 240px; }

html.twc-shell-on body { padding-left: var(--twc-sidebar-w); transition: padding-left 0.22s var(--twc-ease); }
html.twc-shell-on.twc-sidebar-collapsed body { padding-left: 0; }
html.twc-shell-on.twc-no-anim body { transition: none; }
html { scroll-padding-top: calc(var(--twc-header-h) + 12px); }

/* 全宽工作区主体（所有内页 main 统一使用） */
.twc-workspace-shell {
  width: 100%;
  padding: 16px clamp(16px, 3vw, 32px) 32px;
}

@media (max-width: 900px) {
  html.twc-shell-on body { padding-left: 0; }
  .twc-workspace-shell { padding: var(--twc-space-4) var(--twc-space-4) var(--twc-space-5); }
}