style.css

/* ───────────────────── 墨韵 · 样式 ───────────────────── */

:root {
  --bg: #ece6d8;
  --ink: #3a352d;
  --ink-soft: #8d857a;
  --ink-faint: #b5ac9d;
  --cinnabar: #9e3b26;
  --line: #d3cab7;
  --serif: 'Noto Serif SC', 'Noto Serif TC', 'Songti SC', 'STSong', serif;
  --brush: 'Ma Shan Zheng', 'Kaiti SC', 'STKaiti', 'KaiTi', 'Noto Serif TC', cursive;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body { touch-action: manipulation; }

body {
  background:
    radial-gradient(ellipse 90% 70% at 50% 30%, rgba(255, 252, 244, 0.5), transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(190, 178, 152, 0.18), transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

.view { position: fixed; inset: 0; }
.hidden { display: none !important; }

::selection { background: rgba(158, 59, 38, 0.18); }

/* ───────────── 全局标注 ───────────── */

.site-credit {
  position: fixed;
  right: 16px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  max-width: min(640px, calc(100vw - 24px));
  padding: 0;
  font-size: 10px;
  letter-spacing: 0.2px;
  color: var(--ink-faint);
  pointer-events: auto;
}

.credit-item { white-space: nowrap; }

.credit-dot {
  color: var(--ink-faint);
  opacity: 0.55;
  font-size: 9px;
  line-height: 1;
  user-select: none;
}

.credit-link {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.credit-link:hover { color: var(--ink-soft); }

.credit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--ink-faint);
  text-decoration: none;
  opacity: 0.7;
  transition: color 0.2s, opacity 0.2s;
}

.credit-icon:hover {
  color: var(--ink-soft);
  opacity: 1;
}

/* ───────────── 画廊 ───────────── */

#view-gallery {
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
}

.gallery-inner {
  flex: 1;
  display: flex;
  padding: 72px 80px 24px 88px;
  gap: 64px;
  min-height: 0;
}

.gallery-body { flex: 1; }

.brand {
  flex: none;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 22px;
  padding-top: 8px;
}

.brand-title {
  margin: 0;
  font-family: var(--brush);
  font-weight: 400;
  font-size: 76px;
  line-height: 1;
  writing-mode: vertical-rl;
  letter-spacing: 22px;
  color: var(--ink);
}

.brand-seal {
  width: 38px;
  height: 38px;
  margin-bottom: 6px;
  background: var(--cinnabar);
  color: #f3ecda;
  font-family: var(--brush);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(158, 59, 38, 0.3);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 172px);
  gap: 44px 40px;
  align-content: start;
}

/* 新建画卷 */
.new-card {
  aspect-ratio: 1000 / 1390;
  border: 1px dashed var(--ink-faint);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all 0.35s ease;
}

.new-card:hover {
  border-color: var(--cinnabar);
  color: var(--cinnabar);
  transform: translateY(-4px);
}

.new-plus { font-size: 30px; font-weight: 300; line-height: 1; }

.new-text {
  writing-mode: vertical-rl;
  letter-spacing: 8px;
  font-size: 15px;
}

/* 画作卡片 */
.work-card { cursor: pointer; position: relative; }

.work-thumb {
  aspect-ratio: 1000 / 1390;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  background: #f4eedd;
  box-shadow: 0 3px 18px rgba(80, 68, 45, 0.1);
  transition: all 0.35s ease;
}

.work-card:hover .work-thumb {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(80, 68, 45, 0.18);
}

.work-thumb img { width: 100%; height: 100%; display: block; }

.work-meta {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.work-name {
  font-family: var(--brush);
  font-size: 17px;
  letter-spacing: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-date { font-size: 11px; color: var(--ink-faint); flex: none; }

.work-del {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(58, 53, 45, 0.55);
  color: #ece6d8;
  font-size: 12px;
  font-family: var(--serif);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s;
}

.work-card:hover .work-del { opacity: 1; }
.work-del:hover { background: var(--cinnabar); }

.gallery-empty {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-align: center;
  font-family: var(--brush);
  font-size: 26px;
  letter-spacing: 10px;
  color: var(--ink-faint);
  pointer-events: none;
  z-index: 2;
}

.gallery-foot {
  flex: none;
  text-align: center;
  padding: 20px 0 28px;
  font-size: 12px;
  letter-spacing: 8px;
  color: var(--ink-faint);
}

/* ───────────── 绘制 ───────────── */

#view-paint { display: flex; }

#toolbar {
  flex: none;
  width: 112px;
  padding: 26px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  overflow-y: auto;
  scrollbar-width: none;
}

#toolbar .action-group { margin-top: 0; }

#toolbar::-webkit-scrollbar { display: none; }

.tool-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 100%;
}

.g-label {
  font-family: var(--brush);
  font-size: 17px;
  color: var(--ink-soft);
  letter-spacing: 4px;
  padding: 0 4px 3px;
  margin-bottom: 3px;
  border-bottom: 1px solid var(--line);
}

.tool-group .brush-item {
  width: 100%;
  justify-content: center;
}

/* 笔 */
.brush-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  cursor: pointer;
  color: var(--ink-soft);
  border-left: 2px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}

.brush-item .b-name { font-size: 14px; letter-spacing: 2px; }
.brush-item .b-sub { font-size: 11px; color: var(--ink-faint); letter-spacing: 1px; }

.brush-item:hover { color: var(--ink); }

.brush-item.sel {
  color: var(--ink);
  border-left-color: var(--cinnabar);
}

.brush-item.sel .b-sub { color: var(--cinnabar); }

.tool-group.disabled .g-label,
.tool-group.disabled .brush-item,
.brush-item.disabled {
  opacity: 0.36;
  pointer-events: none;
  cursor: default;
}

.brush-item.disabled:hover { color: var(--ink-soft); }

.brush-item.disabled.sel {
  border-left-color: rgba(168, 58, 42, 0.35);
}

.brush-item.disabled.sel .b-sub { color: rgba(168, 58, 42, 0.45); }

/* 墨 / 色 圆点 */
.dot-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 76px;
}

.ink-dot, .color-dot {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(58, 53, 45, 0.18);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.ink-dot:hover, .color-dot:hover { transform: scale(1.18); }

.ink-dot.sel, .color-dot.sel {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--cinnabar);
}

.dot-name {
  position: absolute;
  left: 50%;
  top: -26px;
  transform: translateX(-50%);
  background: rgba(58, 53, 45, 0.88);
  color: #ede7d8;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 2px 7px;
  border-radius: 2px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 10;
}

.ink-dot:hover .dot-name, .color-dot:hover .dot-name { opacity: 1; }

/* 清水笔 */
.water-item {
  font-size: 14px;
  letter-spacing: 4px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 14px;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: all 0.25s;
}

.water-item:hover { color: #4a6a82; }

.water-item.sel {
  color: #f0ebdd;
  background: #5c7a90;
  border-color: #5c7a90;
}

/* 操作 */
.action-group { margin-top: auto; gap: 10px; }

.action-btn {
  background: none;
  border: none;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 5px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 3px 0 3px 5px;
  transition: color 0.25s;
}

.action-btn:hover { color: var(--cinnabar); }

.action-btn.primary { color: var(--ink); }
.action-btn.primary:hover { color: var(--cinnabar); }

.action-sep {
  width: 30px;
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

/* 动作按钮悬浮提示：固定定位在按钮右侧，不受工具栏溢出裁剪 */
#action-tip {
  position: fixed;
  transform: translateY(-50%) translateX(-4px);
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 1px;
  color: #f3ede0;
  background: rgba(48, 42, 34, 0.94);
  padding: 5px 10px;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 200;
}
#action-tip.show { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 920px) { #action-tip { display: none; } }

/* 画布舞台：左右等宽留白，画布始终居中（左栏加宽也不挤偏） */
#stage {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  column-gap: 28px;
  position: relative;
  min-width: 0;
  padding: 26px 12px 0;
}

#tools-left {
  grid-column: 1;
  justify-self: end;
}

.canvas-wrap {
  grid-column: 2;
  justify-self: center;
}

#tools-right {
  grid-column: 3;
  justify-self: start;
}

.canvas-tools {
  flex: none;
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding-top: 4px;
  max-height: min(92vh, calc((100vw - 616px) * 1.39));
  overflow-y: auto;
  scrollbar-width: none;
}

/* 左栏双列：笔|毫、锋|顺、墨|色（间距对齐右侧单栏） */
#tools-left {
  width: 220px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 16px;
  align-content: start;
  align-items: start;
  padding-top: 4px;
  overflow-y: visible;
  max-height: min(92vh, calc((100vw - 616px) * 1.39));
}

#tools-left .tool-group {
  width: 100%;
  min-width: 0;
}

/* 墨/色：与原先单栏一致，一行两粒 */
#tools-left .dot-row {
  max-width: 76px;
  gap: 10px;
}

.canvas-tools::-webkit-scrollbar { display: none; }

#paper {
  height: min(92vh, calc((100vw - 616px) * 1.39));
  width: auto;
  display: block;
  box-shadow:
    0 1px 2px rgba(70, 58, 38, 0.08),
    0 10px 48px rgba(70, 58, 38, 0.18);
  border-radius: 1px;
  cursor: none;
  touch-action: none;   /* 触屏绘制不触发滚动/缩放 */
}

/* 题名栏（与左侧功能栏对侧） */
.title-aside {
  flex: none;
  width: 112px;
  padding: 26px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.work-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 22px;
}

.work-title {
  writing-mode: vertical-rl;
  font-family: var(--brush);
  font-size: 25px;
  letter-spacing: 7px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-right: 1px solid transparent;
  outline: none;
  width: 36px;
  max-height: 320px;
  text-align: start;
  transition: border-color 0.3s;
}

.work-title:hover, .work-title:focus { border-right-color: var(--line); }

.title-seal {
  width: 26px;
  height: 26px;
  background: var(--cinnabar);
  color: #f3ecda;
  font-family: var(--brush);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  opacity: 0.92;
}

/* ───────────── 题款钤印弹窗 ───────────── */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(60, 52, 40, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
}

.modal-card {
  background: #f3edde;
  border: 1px solid var(--line);
  padding: 30px 36px 24px;
  width: 360px;
  box-shadow: 0 14px 50px rgba(50, 42, 26, 0.3);
  border-radius: 2px;
}

.modal-card h3 {
  font-family: var(--brush);
  font-weight: 400;
  font-size: 23px;
  letter-spacing: 7px;
  margin: 0 0 22px;
  color: var(--ink);
}

.modal-card label {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 3px;
  margin-bottom: 16px;
}

.modal-card input {
  display: block;
  width: 100%;
  margin-top: 7px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 2px;
  padding: 6px 2px;
  outline: none;
  color: var(--ink);
}

.modal-card input:focus { border-bottom-color: var(--cinnabar); }

.modal-card-wide { width: 400px; }

.modal-field {
  margin-bottom: 16px;
}

.field-label {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 3px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.chip {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 5px 14px;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.chip:hover { color: var(--ink); border-color: var(--ink-faint); }

.chip.sel {
  color: var(--cinnabar);
  border-color: var(--cinnabar);
}

.seal-preview-wrap {
  display: flex;
  justify-content: center;
  margin: 18px 0 6px;
}

#seal-preview {
  width: 96px;
  height: 96px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #f4eedd;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
  margin-top: 24px;
}

.modal-actions button {
  background: none;
  border: none;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 4px;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 4px 2px;
}

.modal-actions button:hover { color: var(--ink); }

#ins-ok { color: var(--cinnabar); }
#ins-ok:hover { color: #7c2c1b; }

/* ───────────── 笔锋光标 / 提示 ───────────── */

#cursor-ring {
  position: fixed;
  border: 1px solid rgba(58, 53, 45, 0.6);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 60;
}

#cursor-ring.water { border-color: rgba(74, 106, 130, 0.85); border-style: dashed; }

#cursor-ring.hold {
  border-color: rgba(161, 53, 36, 0.75);
  transition: box-shadow 0.08s linear;
}

#toast {
  position: fixed;
  left: 50%;
  bottom: 52px;
  transform: translateX(-50%);
  background: rgba(58, 53, 45, 0.92);
  color: #f1ead9;
  padding: 9px 26px;
  letter-spacing: 5px;
  font-size: 13px;
  font-family: var(--serif);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
  z-index: 70;
}

#toast.show { opacity: 1; }

/* ───────────── 移动端布局（两侧抽屉 + 底部功能栏，均可收起） ───────────── */

.drawer-handle {
  display: none;
  position: fixed;
  z-index: 41;
  background: rgba(243, 237, 222, 0.95);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: var(--brush);
  font-size: 15px;
  letter-spacing: 4px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.3s ease, bottom 0.3s ease, color 0.2s;
}

#handle-left {
  left: 0; top: 32%;
  width: 32px; height: 92px;
  border-left: none;
  border-radius: 0 8px 8px 0;
  writing-mode: vertical-rl;
}

#handle-right {
  right: 0; top: 32%;
  width: 32px; height: 92px;
  border-right: none;
  border-radius: 8px 0 0 8px;
  writing-mode: vertical-rl;
}

#handle-actions {
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 100px; height: 28px;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  font-size: 13px;
}

@media (max-width: 920px) {
  /* ── 画廊 ── */
  .gallery-inner {
    flex-direction: column-reverse;
    padding: 18px 18px 10px;
    gap: 18px;
  }

  .brand {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0;
  }

  .brand-title {
    writing-mode: horizontal-tb;
    font-size: 34px;
    letter-spacing: 12px;
  }

  .brand-seal { width: 30px; height: 30px; font-size: 19px; margin: 0; }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 26px 16px;
  }

  .work-del { opacity: 1; width: 30px; height: 30px; font-size: 13px; }
  .gallery-foot { padding: 12px 0 16px; }

  .site-credit {
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 20px);
    font-size: 9px;
    gap: 5px 6px;
  }

  .credit-icon svg { width: 11px; height: 11px; }

  /* ── 绘制页：画布满幅 ── */
  #view-paint { display: block; }

  #stage {
    padding: 10px 0 0;
    gap: 0;
    justify-content: center;
  }

  .canvas-wrap { margin: 0 auto; }

  #paper {
    height: auto;
    width: min(96vw, calc((100vh - 140px) / 1.39));
    cursor: default;
  }

  #title-aside { display: none; }
  #cursor-ring { display: none !important; }
  #toast { bottom: 96px; }

  /* ── 两侧文房抽屉 ── */
  .canvas-tools {
    position: fixed;
    top: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    width: 136px;
    margin: 0;
    padding: 22px 8px 26px;
    max-height: none;
    background: rgba(243, 237, 222, 0.96);
    transition: transform 0.3s ease;
    z-index: 40;
  }

  #tools-left {
    left: 0;
    width: 236px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 14px;
    align-content: start;
    overflow-y: auto;
    max-height: none;
    border-right: 1px solid var(--line);
    box-shadow: 6px 0 24px rgba(60, 50, 30, 0.12);
    transform: translateX(-105%);
  }

  /* 触屏圆点放大时仍保持一行两粒 */
  #tools-left .dot-row {
    max-width: 67px;
    gap: 13px;
  }

  #tools-right {
    right: 0;
    border-left: 1px solid var(--line);
    box-shadow: -6px 0 24px rgba(60, 50, 30, 0.12);
    transform: translateX(105%);
  }

  body.m-left-open #tools-left { transform: translateX(0); }
  body.m-right-open #tools-right { transform: translateX(0); }

  /* ── 底部功能栏 ── */
  #toolbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: auto;
    height: calc(58px + env(safe-area-inset-bottom));
    flex-direction: row;
    justify-content: center;
    gap: 0;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
    background: rgba(243, 237, 222, 0.96);
    border-top: 1px solid var(--line);
    transform: translateY(105%);
    transition: transform 0.3s ease;
    z-index: 40;
  }

  body.m-actions-open #toolbar { transform: translateY(0); }

  #toolbar .action-group {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0;
    gap: 2px;
    width: auto;
  }

  .action-btn {
    font-size: 14px;
    letter-spacing: 3px;
    padding: 13px 9px;
    min-width: 44px;
  }

  .action-sep { width: 1px; height: 22px; margin: 0 4px; }

  /* ── 抽屉把手 ── */
  .drawer-handle { display: flex; }
  body.m-left-open #handle-left { transform: translateX(236px); }
  body.m-right-open #handle-right { transform: translateX(-136px); }
  body.m-actions-open #handle-actions { bottom: calc(58px + env(safe-area-inset-bottom)); }

  /* ── 触屏目标放大 ── */
  .ink-dot, .color-dot { width: 27px; height: 27px; }
  .dot-row { gap: 13px; max-width: 110px; }
  .brush-item { padding: 9px 10px; }
  .g-label { font-size: 18px; }

  /* ── 弹窗改为底部 Sheet，避开键盘 ── */
  .modal { align-items: flex-end; }

  .modal-card, .modal-card-wide {
    width: 100%;
    border-radius: 10px 10px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 24px 24px calc(20px + env(safe-area-inset-bottom));
  }

  .modal-card input { font-size: 16px; }   /* ≥16px 防 iOS 聚焦自动放大 */
  .chip { padding: 9px 16px; }
}