/* presets.css */

/* 共通ベース定義（プレビューおよび書き出し用） */
.preset-heading {
  --h-text-color: #2d3748;
  --h-main-color: #3b82f6;
  --h-sub-color: #93c5fd;
  --h-bg-color: #f3f4f6;
  --h-font-size: 24px;
  --h-font-weight: 700;
  --h-letter-spacing: 0px;
  --h-padding-tb: 12px;
  --h-padding-lr: 16px;
  --h-border-width: 4px;
  --h-border-radius: 4px;
  
  font-size: var(--h-font-size);
  font-weight: var(--h-font-weight);
  letter-spacing: var(--h-letter-spacing);
  color: var(--h-text-color);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.4;
  position: relative;
  display: block;
  width: 100%;
}
.preset-heading i {
  margin-right: 8px;
  color: var(--h-icon-color, var(--h-main-color));
  font-size: 1em;
  vertical-align: baseline;
}

/* 1. 左線＋下線グラデーション (定番) */
.preset-1 {
  padding: var(--h-padding-tb) var(--h-padding-lr);
  border-left: var(--h-border-width) solid var(--h-main-color);
  border-bottom: 1px solid #e2e8f0;
}
.preset-1::after {
  content: '';
  position: absolute;
  left: calc(-1 * var(--h-border-width));
  bottom: -1px;
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, var(--h-main-color), var(--h-sub-color));
}

/* 2. 上下ボーダー＋中央寄せ */
.preset-2 {
  text-align: center;
  padding: var(--h-padding-tb) var(--h-padding-lr);
  border-top: var(--h-border-width) solid var(--h-main-color);
  border-bottom: var(--h-border-width) solid var(--h-main-color);
  background-color: var(--h-bg-color);
  border-radius: var(--h-border-radius);
}

/* 3. 左グラデーション太線 */
.preset-3 {
  padding: var(--h-padding-tb) var(--h-padding-lr);
  border-left: var(--h-border-width) solid transparent;
  border-image: linear-gradient(to bottom, var(--h-main-color), var(--h-sub-color)) 1 100%;
}

/* 4. 斜め背景カット (クリップパス) */
.preset-4 {
  padding: var(--h-padding-tb) calc(var(--h-padding-lr) + 15px) var(--h-padding-tb) var(--h-padding-lr);
  background: linear-gradient(135deg, var(--h-main-color), var(--h-sub-color));
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
  border-radius: var(--h-border-radius);
}

/* 5. 吹き出し風 (疑似要素で三角ピン) */
.preset-5 {
  padding: var(--h-padding-tb) var(--h-padding-lr);
  background-color: var(--h-bg-color);
  border: var(--h-border-width) solid var(--h-main-color);
  border-radius: var(--h-border-radius);
}
.preset-5::after {
  content: '';
  position: absolute;
  bottom: calc(-1 * (10px + var(--h-border-width)));
  left: 30px;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: var(--h-main-color) transparent transparent;
  display: block;
  width: 0;
}
.preset-5::before {
  content: '';
  position: absolute;
  bottom: calc(-1 * 9px);
  left: 31px;
  border-width: 9px 9px 0;
  border-style: solid;
  border-color: var(--h-bg-color) transparent transparent;
  display: block;
  width: 0;
  z-index: 1;
}

/* 6. インナー点線付きボックス (ステッチ調) */
.preset-6 {
  padding: var(--h-padding-tb) var(--h-padding-lr);
  background-color: var(--h-bg-color);
  border: var(--h-border-width) solid var(--h-main-color);
  border-radius: var(--h-border-radius);
}
.preset-6-inner {
  border: 1px dashed var(--h-main-color);
  padding: 8px 12px;
  border-radius: calc(var(--h-border-radius) - 2px);
  box-sizing: border-box;
  width: 100%;
}

/* 7. ストライプ背景 */
.preset-7 {
  padding: var(--h-padding-tb) var(--h-padding-lr);
  background: repeating-linear-gradient(
    45deg,
    var(--h-bg-color),
    var(--h-bg-color) 10px,
    #ffffff 10px,
    #ffffff 20px
  );
  border-left: var(--h-border-width) solid var(--h-main-color);
  border-radius: var(--h-border-radius);
}

/* 8. リボン風 */
.preset-8-wrapper {
  position: relative;
  margin: 10px 20px;
  display: block;
}
.preset-8 {
  padding: var(--h-padding-tb) var(--h-padding-lr);
  background: linear-gradient(to right, var(--h-main-color), var(--h-sub-color));
  text-align: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.preset-8-ribbon-left, .preset-8-ribbon-right {
  position: absolute;
  top: 5px;
  width: 15px;
  height: 100%;
  z-index: 0;
  background-color: var(--h-main-color);
  filter: brightness(80%);
}
.preset-8-ribbon-left {
  left: -10px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 50% 50%);
}
.preset-8-ribbon-right {
  right: -10px;
  clip-path: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%);
}
.preset-8-fold-left, .preset-8-fold-right {
  position: absolute;
  top: 100%;
  border-style: solid;
  z-index: 0;
}
.preset-8-fold-left {
  left: 0;
  border-width: 5px 5px 0 0;
  border-color: #000 transparent transparent transparent;
  opacity: 0.4;
}
.preset-8-fold-right {
  right: 0;
  border-width: 5px 0 0 5px;
  border-color: #000 transparent transparent transparent;
  opacity: 0.4;
}

/* 9. 蛍光ペン風マーカー (下半分塗りつぶし) */
.preset-9 {
  display: inline-block;
  width: auto;
  padding: 0 8px;
  background: linear-gradient(transparent 50%, var(--h-sub-color) 50%);
  border-radius: var(--h-border-radius);
}

/* 10. 立体もこもこ（丸み＋シャドウ） */
.preset-10 {
  padding: var(--h-padding-tb) var(--h-padding-lr);
  background-color: var(--h-bg-color);
  border: var(--h-border-width) solid var(--h-main-color);
  border-radius: 30px;
  box-shadow: 0 4px 0 var(--h-sub-color);
  text-align: center;
}

/* 11. 吹き出し風ミニマル（左端に丸ドット） */
.preset-11 {
  padding: var(--h-padding-tb) var(--h-padding-lr) var(--h-padding-tb) calc(var(--h-padding-lr) + 15px);
  border-bottom: 2px solid var(--h-main-color);
}
.preset-11::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: var(--h-main-color);
  border-radius: 50%;
}

/* 12. グラデーション背景カード */
.preset-12 {
  padding: var(--h-padding-tb) var(--h-padding-lr);
  background: linear-gradient(135deg, var(--h-main-color), var(--h-sub-color));
  border-radius: var(--h-border-radius);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}

/* 13. 英語サブテキスト付き中央寄せ */
.preset-13 {
  text-align: center;
  padding: var(--h-padding-tb) var(--h-padding-lr);
  border-bottom: 2px solid var(--h-main-color);
}
.preset-13::before {
  content: var(--h-sub-text, "RECOMMEND");
  display: block;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--h-main-color);
  margin-bottom: 6px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: 'Outfit', sans-serif;
  line-height: 1;
}

/* 14. グラデーションテキスト */
.preset-14 {
  padding: var(--h-padding-tb) var(--h-padding-lr);
  background: linear-gradient(to right, var(--h-main-color), var(--h-sub-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  width: auto;
}

/* 15. ダブルブロックドット */
.preset-15 {
  padding: var(--h-padding-tb) var(--h-padding-lr) var(--h-padding-tb) calc(var(--h-padding-lr) + 18px);
}
.preset-15::before, .preset-15::after {
  content: '';
  position: absolute;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.preset-15::before {
  top: calc(50% - 9px);
  background-color: var(--h-main-color);
}
.preset-15::after {
  top: calc(50% + 2px);
  background-color: var(--h-sub-color);
}

/* 16. レトロ3D影テキスト */
.preset-16 {
  padding: var(--h-padding-tb) var(--h-padding-lr);
  text-shadow: 3px 3px 0px var(--h-sub-color);
}

/* 17. 上下ステッチライン */
.preset-17 {
  padding: var(--h-padding-tb) var(--h-padding-lr);
  border-top: 1.5px dashed var(--h-main-color);
  border-bottom: 1.5px dashed var(--h-main-color);
  text-align: center;
}

/* 18. ダブルスラッシュ */
.preset-18 {
  padding: var(--h-padding-tb) var(--h-padding-lr) var(--h-padding-tb) calc(var(--h-padding-lr) + 15px);
}
.preset-18::before {
  content: '//';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--h-main-color);
  font-weight: 700;
  font-style: italic;
  font-size: 1.1em;
  letter-spacing: -2px;
}

/* 19. 左右水平線 */
.preset-19 {
  display: flex;
  align-items: center;
  justify-content: var(--h-justify-content, center);
  gap: 16px;
  text-align: center;
  padding: var(--h-padding-tb) var(--h-padding-lr);
}
.preset-19::before, .preset-19::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--h-main-color);
  max-width: 150px;
}

/* 20. 角折れ付箋紙 */
.preset-20 {
  padding: var(--h-padding-tb) var(--h-padding-lr);
  background: linear-gradient(135deg, transparent 15px, var(--h-bg-color) 0);
  border-radius: var(--h-border-radius);
}
.preset-20::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 15px 15px 0;
  border-style: solid;
  border-color: #fff #fff var(--h-main-color) var(--h-main-color);
  box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.15);
  border-bottom-left-radius: 4px;
}

/* 21. ダブル下線 */
.preset-21 {
  padding: var(--h-padding-tb) var(--h-padding-lr);
  border-bottom: 3px double var(--h-main-color);
}

/* 22. 隙間付き縦棒 */
.preset-22 {
  padding: var(--h-padding-tb) var(--h-padding-lr) var(--h-padding-tb) calc(var(--h-padding-lr) + 12px);
  border-left: var(--h-border-width) solid var(--h-main-color);
}
.preset-22::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--h-border-width) + 3px);
  top: 0;
  width: 2px;
  height: 100%;
  background-color: #ffffff; /* 隙間の色。プレビューエリアで正しく透過または白に見えるように設定 */
}

/* 23. ステッチ枠メモ */
.preset-23 {
  padding: var(--h-padding-tb) var(--h-padding-lr);
  background-color: var(--h-bg-color);
  border: 2px dashed var(--h-main-color);
  border-radius: var(--h-border-radius);
}

/* 24. 波線アンダー */
.preset-24 {
  padding: var(--h-padding-tb) var(--h-padding-lr) calc(var(--h-padding-tb) + 6px) var(--h-padding-lr);
  background-image: radial-gradient(circle at 50% 120%, transparent 4px, var(--h-main-color) 4px, var(--h-main-color) 6px, transparent 6px);
  background-size: 12px 12px;
  background-repeat: repeat-x;
  background-position: bottom;
}

/* --- ナンバリング（数字）のプレビュースタイル --- */
.preset-heading .heading-num {
  font-family: 'Outfit', 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: var(--h-number-weight, 700);
  margin-right: 8px;
  display: inline-block;
  line-height: 1;
  font-size: var(--h-number-size, 18px);
  vertical-align: baseline; /* 見出しテキストと下揃え */
}

/* 1. シンプル */
.preset-heading .heading-num.num-simple {
  color: var(--h-main-color);
}

/* 2. 丸バッジ */
.preset-heading .heading-num.num-badge-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background-color: var(--h-main-color);
  color: #ffffff;
  font-size: calc(var(--h-number-size, 18px) * 0.8); /* フォントサイズに対してスケール */
  vertical-align: -0.05em; /* バッジの底を合わせる調整 */
  margin-right: 10px;
}

/* 3. 四角バッジ */
.preset-heading .heading-num.num-badge-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2em 0.5em;
  border-radius: 4px;
  background-color: var(--h-main-color);
  color: #ffffff;
  font-size: calc(var(--h-number-size, 18px) * 0.8); /* フォントサイズに対してスケール */
  vertical-align: -0.05em; /* バッジの底を合わせる調整 */
  margin-right: 10px;
}

/* 4. スラッシュ付き */
.preset-heading .heading-num.num-slash {
  color: var(--h-main-color);
}
.preset-heading .heading-num.num-slash::after {
  content: '/';
  color: var(--h-sub-color);
  margin-left: 4px;
  font-weight: 400;
}

/* 5. 縦線区切り */
.preset-heading .heading-num.num-pipe {
  color: var(--h-main-color);
}
.preset-heading .heading-num.num-pipe::after {
  content: '|';
  color: var(--h-sub-color);
  margin-left: 6px;
  font-weight: 300;
}

/* 6. 左側に大きく配置 */
.preset-heading .heading-num.num-large-left {
  font-size: calc(var(--h-number-size, 18px) * 1.3); /* フォントサイズに対してスケール */
  color: var(--h-main-color);
  margin-right: 12px;
  vertical-align: baseline; /* 大きな数字を下揃えにする */
}

/* 自動連番用のプレビュー設定 */
#preview-area {
  counter-reset: h-counter; /* プレビューエリアで自動連番が機能するようにリセット */
}
.preset-heading {
  counter-increment: h-counter;
}
.preset-heading .heading-num.num-auto {
  /* 自動連番時は中身を空にして ::before でカウンターを表示 */
}
.preset-heading .heading-num.num-auto::before {
  content: counter(h-counter, decimal-leading-zero);
}

/* 25. 左右斜め線 */
.preset-25 {
  display: flex;
  align-items: center;
  justify-content: var(--h-justify-content, center);
  gap: var(--h-padding-lr);
  padding: var(--h-padding-tb) var(--h-padding-lr);
}
.preset-25::before,
.preset-25::after {
  content: '';
  width: var(--h-border-width);
  height: 1.5em;
  background-color: var(--h-main-color);
  display: inline-block;
  flex-shrink: 0;
}
.preset-25::before {
  transform: rotate(-35deg);
}
.preset-25::after {
  transform: rotate(35deg);
}