/**
 * Type S 样式（留白排版 / 参考图）
 * 布局：白色画布 + 居中照片（可拖动）+ 左上两行文字 + 右侧竖排日期与三角标记 + 右下参数行
 * 尺寸由 JS 通过 inline style 设置
 */

.frame-wrapper.type-s {
  display: block !important;
  position: relative;
  background: #ffffff;
  max-width: none !important;
  max-height: none !important;
}

/* 照片：cover 填满照片区，可拖动 */
.frame-wrapper.type-s > img {
  position: absolute;
  object-fit: cover;
  object-position: center center;
  max-width: none;
  max-height: none;
  border-radius: 0;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
}

.frame-wrapper.type-s > img:active {
  cursor: grabbing;
}

/* 隐藏 photoFooter */
.frame-wrapper.type-s .photo-footer {
  display: none;
}

/* 文字层：铺满整个画布 */
.frame-wrapper.type-s .border-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.type-s-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: 'MiSans', sans-serif;
  font-weight: 400;
  pointer-events: none;
}

/* 左上两行文字 */
.type-s-top {
  position: absolute;
  white-space: nowrap;
}

.type-s-top-line {
  white-space: nowrap;
}

/* 右侧竖排日期 + 三角标记（垂直居中） */
.type-s-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.0em;
}

.type-s-date {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1;
  white-space: nowrap;
}

/* 针状标记：上平边、下收尖、尖端渐隐（随文字颜色） */
.type-s-mark {
  width: 1em;
  height: 5em;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
}

/* 右下参数行 */
.type-s-params {
  position: absolute;
  transform: translateY(-50%);
  white-space: nowrap;
  text-align: right;
}

/* 拖动提示：显示在预览区底部居中 */
.type-s-drag-hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: rgba(136, 136, 136, 0.75);
  white-space: nowrap;
  pointer-events: none;
}

/* Type S 面板：下拉框与文本输入外观一致 */
#typeSSection .param-item select {
  flex: 1;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: #eee;
  padding: 0;
  margin: 0;
  font-size: 12px;
  min-width: 0;
  cursor: pointer;
}

#typeSSection .param-item select:focus {
  outline: none;
}

/* Type S 面板：日期控件与文本输入外观一致（深色原生控件） */
#typeSSection input[type="date"] {
  width: 100%;
  height: 38px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  color: #eee;
  padding: 0 12px;
  font-size: 13px;
  color-scheme: dark;
}

#typeSSection input[type="date"]:focus {
  outline: none;
  border-color: #68bbff;
}

/* Type S 面板：自定义取色行（原生选色器 + 点选图片） */
#typeSSection .type-s-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

#typeSSection .btn-pick {
  flex: 1;
  height: 32px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  color: #eee;
  font-size: 12px;
  cursor: pointer;
}

#typeSSection .btn-pick:hover {
  border-color: #68bbff;
}

#typeSSection .btn-pick.active {
  border-color: #68bbff;
  color: #68bbff;
}