/* =====================================================
   俳句カードメーカー - haiku-card-maker.css
   すべてのセレクタは .hcm-root でスコープ化し
   WordPressテーマとの干渉を防いでいます
   ===================================================== */

/* CSS変数はルートに定義（スコープ内でも参照可） */
.hcm-root {
  --hcm-base: #ffffff;
  --hcm-base-light: #fafafa;
  --hcm-base-dark: #f5f5f5;
  --hcm-main: #1e3a5f;
  --hcm-main-light: #2d5a8f;
  --hcm-main-dark: #0f1e3a;
  --hcm-accent: #d4af37;
  --hcm-accent-light: #f4cf5f;
  --hcm-accent-dark: #b8941f;
  --hcm-text: #2c3e50;
  --hcm-text-light: #6f7d8a;
  --hcm-border: #e8e8e8;
  --hcm-shadow: 0 10px 30px rgba(30,58,95,.12);
  font-family: "BIZ UDGothic","Hiragino Sans","Yu Gothic","Meiryo",system-ui,sans-serif;
  color: var(--hcm-text);
  box-sizing: border-box;
}

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

/* ── アプリ全体 ─────────────────────────── */
.hcm-app {
  width: 100%;
  padding: 8px 0;
}

/* ── 3カラムレイアウト ───────────────────── */
.hcm-layout {
  display: grid;
  grid-template-columns: minmax(300px,440px) 1fr minmax(260px,380px);
  gap: 16px;
  align-items: start;
}

/* ── パネル共通 ─────────────────────────── */
.hcm-panel {
  position: relative;
  background: var(--hcm-base);
  border: 2px solid var(--hcm-border);
  border-radius: 24px;
  box-shadow: var(--hcm-shadow);
  overflow: hidden;
}

.hcm-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--hcm-accent), var(--hcm-accent-light), var(--hcm-accent));
}

.hcm-panel-inner { padding: 18px; }

.hcm-panel-header {
  background: var(--hcm-main);
  color: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(30,58,95,.18);
}

.hcm-panel-header h2 {
  margin: 0;
  font-size: clamp(18px,2vw,24px);
  font-weight: 900;
  letter-spacing: .03em;
  border-left: 4px solid var(--hcm-accent);
  padding-left: 10px;
  color: #fff;
}

.hcm-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--hcm-main);
  font-size: 18px;
  font-weight: 900;
}

.hcm-panel-title::before {
  content: "";
  width: 6px; height: 22px;
  border-radius: 999px;
  background: var(--hcm-accent);
  flex: 0 0 auto;
}

/* ── セクション ─────────────────────────── */
.hcm-section {
  margin-bottom: 16px;
  padding: 14px;
  background: var(--hcm-base-light);
  border: 1px solid var(--hcm-border);
  border-radius: 18px;
}

.hcm-section h3 {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--hcm-main);
  font-weight: 800;
}

/* ── フォームパーツリセット＋スタイル ────── */
.hcm-root input[type="text"],
.hcm-root input[type="range"],
.hcm-root select,
.hcm-root textarea {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  border: 2px solid var(--hcm-border);
  border-radius: 14px;
  background: #fff;
  color: var(--hcm-text);
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.hcm-root input[type="range"] {
  padding: 4px 0;
  cursor: pointer;
  accent-color: var(--hcm-main);
}

.hcm-root input[type="text"]:focus,
.hcm-root select:focus,
.hcm-root textarea:focus {
  border-color: var(--hcm-accent);
  box-shadow: 0 0 0 4px rgba(212,175,55,.15);
}

.hcm-field { margin-bottom: 10px; }
.hcm-field:last-child { margin-bottom: 0; }

.hcm-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--hcm-text);
}

.hcm-sub { color: var(--hcm-text-light); font-size: 12px; font-weight: 600; }

.hcm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ── 縦書き入力グリッド ─────────────────── */
.hcm-verse-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 8px;
}

.hcm-verse-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hcm-verse-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--hcm-main);
  background: var(--hcm-base-dark);
  border-radius: 8px;
  padding: 3px 6px;
  width: 100%;
  text-align: center;
}

.hcm-verse-textarea {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  height: 140px;
  writing-mode: vertical-rl !important;
  text-orientation: upright !important;
  resize: none !important;
  border: 2px solid var(--hcm-border);
  border-radius: 14px;
  background: #fff;
  color: var(--hcm-text);
  padding: 10px 6px;
  font-size: 20px;
  font-family: "BIZ UDGothic","Hiragino Sans","Yu Gothic",sans-serif;
  font-weight: 700;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  line-height: 1.6;
  letter-spacing: .05em;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;
}

/* テーマ干渉対策：verse-textarea は必ず縦書き */
.hcm-root textarea.hcm-verse-textarea {
  writing-mode: vertical-rl !important;
  text-orientation: upright !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  resize: none !important;
  display: block !important;
}

.hcm-verse-textarea:focus {
  border-color: var(--hcm-accent);
  box-shadow: 0 0 0 4px rgba(212,175,55,.15);
}

.hcm-yomi-textarea {
  font-size: 14px !important;
  color: var(--hcm-text-light);
  letter-spacing: .08em;
}

/* ── タブ ────────────────────────────────── */
.hcm-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.hcm-tab-btn {
  all: unset;
  box-sizing: border-box;
  flex: 1;
  border: 2px solid var(--hcm-border);
  background: #fff;
  border-radius: 12px;
  padding: 9px 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--hcm-text-light);
  cursor: pointer;
  transition: .2s ease;
  font-family: inherit;
  text-align: center;
  display: block;
}

.hcm-tab-btn.active {
  background: var(--hcm-main);
  color: #fff;
  border-color: var(--hcm-main);
}

.hcm-tab-pane { display: none; }
.hcm-tab-pane.active { display: block; }

/* ── 季節タブ ────────────────────────────── */
.hcm-season-tabs {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 4px;
  margin-bottom: 4px;
}

.hcm-season-tab-btn {
  all: unset;
  box-sizing: border-box;
  border: 2px solid var(--hcm-border);
  background: #fff;
  border-radius: 10px;
  padding: 6px 3px;
  font-size: 11px;
  font-weight: 800;
  color: var(--hcm-text-light);
  cursor: pointer;
  transition: .2s ease;
  font-family: inherit;
  text-align: center;
  line-height: 1.3;
  display: block;
}

.hcm-season-tab-btn.active {
  background: var(--hcm-main);
  color: #fff;
  border-color: var(--hcm-main);
}

.hcm-season-pane { display: none; }
.hcm-season-pane.active { display: block; }

/* ── テンプレートグリッド ────────────────── */
.hcm-templates-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 8px;
}

.hcm-template-btn {
  all: unset;
  box-sizing: border-box;
  border: 2px solid var(--hcm-border);
  background: #fff;
  border-radius: 14px;
  padding: 6px;
  cursor: pointer;
  text-align: left;
  transition: .2s ease;
  display: block;
}

.hcm-template-btn.active {
  border-color: var(--hcm-main);
  box-shadow: 0 6px 20px rgba(30,58,95,.14);
  transform: translateY(-2px);
}

.hcm-thumb {
  height: 58px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.06);
  margin-bottom: 5px;
  overflow: hidden;
}

.hcm-template-name {
  font-size: 11px;
  font-weight: 800;
  color: var(--hcm-main);
  padding: 0 2px;
}

/* ── 背景サムネイル ──────────────────────── */
.hcm-washi { background: radial-gradient(circle at 20% 20%,rgba(255,255,255,.6) 0 8%,transparent 9%), radial-gradient(circle at 80% 35%,rgba(255,255,255,.35) 0 7%,transparent 8%), linear-gradient(135deg,#f5eddc 0%,#fcf8ef 50%,#efe2c8 100%); }
.hcm-sakura { background: radial-gradient(circle at 12% 28%,rgba(255,183,197,.9) 0 7%,transparent 8%), radial-gradient(circle at 68% 18%,rgba(255,214,221,.95) 0 8%,transparent 9%), linear-gradient(135deg,#fff7fb 0%,#ffeef5 52%,#ffdfe9 100%); }
.hcm-night { background: radial-gradient(circle at 25% 25%,rgba(255,255,255,.9) 0 1.6%,transparent 1.7%), radial-gradient(circle at 60% 36%,rgba(255,255,255,.75) 0 1.4%,transparent 1.5%), linear-gradient(135deg,#0f1e3a 0%,#203d70 55%,#345e9a 100%); }
.hcm-sea { background: radial-gradient(circle at 78% 18%,rgba(255,238,153,.95) 0 7%,transparent 8%), linear-gradient(180deg,#dff4ff 0 45%,#79c6ef 46% 72%,#52a8db 73% 100%); }
.hcm-simple { background: linear-gradient(135deg,#ffffff 0%,#f7f7f7 50%,#efefef 100%); }
.hcm-spring-peach { background: radial-gradient(circle at 20% 30%,rgba(255,160,180,.9) 0 9%,transparent 10%), radial-gradient(circle at 70% 50%,rgba(255,190,200,.8) 0 8%,transparent 9%), linear-gradient(135deg,#fff0f5 0%,#ffe4ec 55%,#ffd0e0 100%); }
.hcm-spring-green { background: radial-gradient(circle at 30% 40%,rgba(160,220,120,.8) 0 9%,transparent 10%), linear-gradient(135deg,#f0fbe0 0%,#e0f5c0 55%,#c8eba0 100%); }
.hcm-summer-sunflower { background: radial-gradient(circle at 75% 25%,rgba(255,220,0,.98) 0 9%,transparent 10%), linear-gradient(180deg,#87ceeb 0 50%,#5aaa40 51% 100%); }
.hcm-summer-sunset { background: linear-gradient(180deg,#ff8c00 0%,#ff4500 35%,#ff6347 65%,#1a1a4e 100%); }
.hcm-autumn-maple { background: radial-gradient(circle at 20% 25%,rgba(220,80,0,.85) 0 9%,transparent 10%), radial-gradient(circle at 70% 40%,rgba(200,120,0,.85) 0 8%,transparent 9%), linear-gradient(135deg,#fff3e0 0%,#ffe0b2 55%,#ffcc80 100%); }
.hcm-autumn-moon { background: radial-gradient(circle at 78% 20%,rgba(255,248,200,.98) 0 8%,transparent 9%), linear-gradient(135deg,#1a2840 0%,#2c3e6a 55%,#3d5080 100%); }
.hcm-winter-snow { background: radial-gradient(circle at 20% 20%,rgba(255,255,255,.95) 0 5%,transparent 6%), radial-gradient(circle at 60% 50%,rgba(230,240,255,.9) 0 6%,transparent 7%), linear-gradient(135deg,#e8f4fc 0%,#ddeeff 55%,#c8e4f8 100%); }
.hcm-winter-frost { background: radial-gradient(circle at 30% 30%,rgba(200,230,255,.9) 0 7%,transparent 8%), linear-gradient(135deg,#eaf2ff 0%,#d0e8ff 55%,#b8d8f8 100%); }

/* ── 用紙サイズボタン ────────────────────── */
.hcm-paper-size-btns { display: flex; gap: 10px; }

.hcm-paper-btn {
  all: unset;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid var(--hcm-border);
  background: #fff;
  border-radius: 14px;
  padding: 10px 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--hcm-text-light);
  cursor: pointer;
  transition: .2s ease;
  font-family: inherit;
}

.hcm-paper-btn.active {
  background: var(--hcm-main);
  color: #fff;
  border-color: var(--hcm-main);
}

.hcm-paper-icon {
  display: inline-block;
  border: 2px solid currentColor;
  border-radius: 2px;
  flex-shrink: 0;
}

.hcm-landscape-icon { width: 18px; height: 13px; }
.hcm-portrait-icon  { width: 13px; height: 18px; }

/* ── ボタン ─────────────────────────────── */
.hcm-actions {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
}

.hcm-btn {
  all: unset;
  box-sizing: border-box;
  display: block;
  border-radius: 14px;
  padding: 13px 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  transition: .2s ease;
  font-family: inherit;
  text-align: center;
}

.hcm-btn:hover { transform: translateY(-2px); }
.hcm-btn:active { transform: translateY(0); }

.hcm-btn-primary   { background: linear-gradient(135deg,var(--hcm-main-light),var(--hcm-main)); color: #fff; box-shadow: 0 6px 18px rgba(30,58,95,.25); }
.hcm-btn-secondary { background: linear-gradient(135deg,var(--hcm-accent-light),var(--hcm-accent)); color: var(--hcm-main-dark); box-shadow: 0 6px 18px rgba(212,175,55,.25); }
.hcm-btn-outline   { border: 2px solid var(--hcm-main); color: var(--hcm-main); background: #fff; }
.hcm-btn-danger    { border: 2px solid #f2caca; color: #b82f2f; background: #fff6f6; }

/* ── プレビュー ─────────────────────────── */
.hcm-preview-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hcm-preview-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 2px solid var(--hcm-border);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: var(--hcm-shadow);
}

.hcm-hint { font-size: 13px; color: var(--hcm-text-light); line-height: 1.5; }

.hcm-stage {
  background: linear-gradient(180deg,#eef3f8,#e5ebf2);
  border: 2px solid var(--hcm-border);
  border-radius: 24px;
  padding: 16px;
  box-shadow: var(--hcm-shadow);
  overflow: auto;
}

/* ── カード ─────────────────────────────── */
.hcm-card {
  position: relative;
  width: min(100%, 980px);
  aspect-ratio: 1.414/1; /* JS で上書き */
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(30,58,95,.22);
  background: #fff;
}

.hcm-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.02);
}

.hcm-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,rgba(255,255,255,.06),rgba(255,255,255,.12));
  pointer-events: none;
}

.hcm-card-frame {
  position: absolute;
  inset: 18px;
  border: 3px solid rgba(255,255,255,.65);
  border-radius: 24px;
  pointer-events: none;
}

.hcm-card-inner {
  position: absolute;
  inset: 0;
  padding: 34px 34px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hcm-haiku-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 20px 10px;
}

.hcm-haiku {
  max-width: 100%;
  max-height: 100%;
  color: #222;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
  font-weight: 700;
}

/* 縦書き固定 */
.hcm-haiku.hcm-vertical {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
}

.hcm-haiku.hcm-vertical .hcm-line {
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
}

.hcm-haiku.hcm-vertical .hcm-line:nth-child(1) { margin-top: 0; }
.hcm-haiku.hcm-vertical .hcm-line:nth-child(2) { margin-top: 42px; }
.hcm-haiku.hcm-vertical .hcm-line:nth-child(3) { margin-top: 84px; }

.hcm-line {
  display: inline-block;
  background: rgba(255,255,255,.30);
  backdrop-filter: blur(1px);
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  line-height: 1.35;
}

.hcm-author-line {
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  font-size: .65em !important;
  opacity: .85;
  margin-top: auto;
  align-self: flex-end;
}

/* カスタム背景時：ボックスを濃くして文字を見やすく */
.hcm-haiku.hcm-custom-bg .hcm-line {
  background: rgba(255,255,255,.58) !important;
  border-color: rgba(255,255,255,.72) !important;
}

.hcm-root ruby rt {
  font-size: .34em;
  color: #4e5c66;
  letter-spacing: .02em;
  user-select: none;
}

.hcm-title-chip {
  align-self: flex-start;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(2px);
  color: var(--hcm-main);
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
}

.hcm-empty-note {
  color: #4d5964;
  text-align: center;
  font-size: clamp(16px,2vw,26px);
  line-height: 1.8;
  font-weight: 900;
  background: rgba(255,255,255,.5);
  padding: 18px 22px;
  border-radius: 20px;
  border: 2px dashed rgba(30,58,95,.18);
}

.hcm-small-note {
  font-size: 12px;
  color: var(--hcm-text-light);
  line-height: 1.7;
  margin-top: 8px;
}

.hcm-footer-note {
  text-align: center;
  font-size: 12px;
  color: var(--hcm-text-light);
  line-height: 1.7;
}

/* ── レスポンシブ ────────────────────────── */
@media (max-width: 1200px) {
  .hcm-layout { grid-template-columns: minmax(300px,420px) 1fr; }
  .hcm-right-panel { display: none; }
}

@media (max-width: 900px) {
  .hcm-layout { grid-template-columns: 1fr; }
  .hcm-preview-topbar { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .hcm-row, .hcm-actions, .hcm-templates-grid { grid-template-columns: 1fr; }
  .hcm-panel-inner { padding: 12px; }
  .hcm-stage { padding: 10px; }
  .hcm-card-inner { padding: 18px 14px 14px; }
  .hcm-haiku.hcm-vertical .hcm-line:nth-child(2) { margin-top: 20px; }
  .hcm-haiku.hcm-vertical .hcm-line:nth-child(3) { margin-top: 40px; }
}