/* Front CSS */
.hm-sm { position: fixed; inset: 0; z-index: 999999; display: none; }
.hm-sm--hidden { display: none; }
.hm-sm:not(.hm-sm--hidden) { display: block; } /* 非hidden状態では表示する（JSがクラスを切替） */
.hm-sm--enter, .hm-sm--leave { display: block; } /* アニメ中も可視にする */
.hm-sm__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.hm-sm__dialog { position: relative; max-width: 720px; margin: 40px auto; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); overflow: hidden; transform: translateY(20px); opacity: 0; }
.hm-sm__content { max-height: 60vh; overflow: auto; padding: 16px; }
.hm-sm__actions { display: flex; justify-content: center; padding: clamp(12px, 2.5vw, 20px) clamp(16px, 4vw, 28px) clamp(30px, 3vw, 24px); border-top: none; /* 下部の白い線を除去 */ }
.hm-sm__close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; cursor: pointer; }
.hm-sm__btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 10px; border: 1px solid #111827; background: #111827; color: #fff; text-decoration: none; font-weight: 600; }
.hm-sm__btn--ghost { background: #fff; color: #111827; }

.hm-sm-trigger { position: fixed; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 10px; font-weight: 700; cursor: pointer; z-index: 999998; border: 0 solid transparent; text-decoration: none; }
.hm-sm-trigger--right-center { top: 50%; right: 10px; transform: translateY(-50%); }
.hm-sm-trigger--left-center { top: 50%; left: 10px; transform: translateY(-50%); }
.hm-sm-trigger--right-bottom { bottom: 10px; right: 10px; }
.hm-sm-trigger--top-center { top: 10px; left: 50%; transform: translateX(-50%); }
.hm-sm-trigger--bottom-center { bottom: 10px; left: 50%; transform: translateX(-50%); }
.hm-sm-trigger--left-bottom { bottom: 10px; left: 10px; }

.hm-sm__dialog--sm { max-width: 420px; }
.hm-sm__dialog--md { max-width: 720px; }
.hm-sm__dialog--lg { max-width: 1024px; }

.hm-sm__content--scroll { overflow: auto; }
.hm-sm__content--no-scroll { overflow: visible; }

.hm-sm--enter .hm-sm__dialog { opacity: 1; transform: translateY(0); transition: transform var(--hm-sm-anim, .25s) var(--hm-sm-ease, ease), opacity var(--hm-sm-anim, .25s) var(--hm-sm-ease, ease); }
.hm-sm--leave .hm-sm__dialog { opacity: 0; transform: translateY(20px); transition: transform var(--hm-sm-anim, .25s) var(--hm-sm-ease, ease), opacity var(--hm-sm-anim, .25s) var(--hm-sm-ease, ease); }


/* モーダルの中央寄せ＆最大サイズ制御 */
.hm-sm { /* モーダル全体のレイヤー */ 
  position: fixed; /* 画面に固定 */
  inset: 0; /* 全面に広げる */
  display: none; /* JSで切替（open時にblock） */
  z-index: 9999; /* 最前面に表示 */
}
.hm-sm:not(.hm-sm--hidden) { display: block; } /* 可視制御（補強） */

.hm-sm__overlay { /* 背景と中央配置用のフレックスコンテナ */
  position: absolute; /* 親基準 */
  inset: 0; /* 全面 */
  display: flex; /* 中央配置 */
  align-items: center; /* 縦中央 */
  justify-content: center; /* 横中央 */
  background: rgba(0,0,0,.5); /* 半透明の暗幕 */
  padding: 2vmin; /* 端の余白（狭小端末対策） */
}

.hm-sm__content, .hm-sm__dialog, .hm-sm__panel { /* 白背景のコンテンツボックス（存在するクラスにヒット） */
  background: #fff; /* 白背景 */
  color: #111; /* 文字色 */
  max-width: 96vw; /* 画面幅の96%まで */
  max-height: 96vh; /* 画面高の96%まで */
  width: auto; /* 内容ベース */
  height: auto; /* 内容ベース */
  overflow: auto; /* はみ出すとスクロール */
  border-radius: 12px; /* 角丸（調整可） */
  box-shadow: 0 10px 30px rgba(0,0,0,.25); /* 影 */
}


.hm-sm:not(.hm-sm--hidden){ display:block; }

.hm-sm--hidden{ display:none; }


/* === HM Smart Modal v1.0.7 consolidated overrides (do-not-remove) === */
/* 1) Root: ensure dialog is truly centered */
.hm-sm:not(.hm-sm--hidden), .hm-sm--enter, .hm-sm--leave {
  display:flex; align-items:center; justify-content:center;
}

/* 2) Dialog: white outer frame w/ shadow; no margins to break centering */
.hm-sm__dialog {
  background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25);
  max-height:96vh; overflow:hidden; margin:0 !important; align-self:center;
  padding:0; /* paddings are handled by content/actions */
}

/* 3) Inner content: NO shadow/NO radius; center children; safe paddings */
#hm-sm-content, .hm-sm__content { box-shadow:none !important; border-radius:0 !important; background:transparent; }
.hm-sm__content {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(12px, 2.5vw, 18px);
  box-sizing:border-box;
  padding:clamp(48px, 8vw, 64px) clamp(24px, 5vw, 48px) clamp(12px, 3vw, 20px);
  max-height:60vh; overflow:auto;
}

/* 4) Actions row & buttons */
.hm-sm__actions {
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px, 2.5vw, 16px);
  padding: clamp(12px, 2.5vw, 20px) clamp(16px, 4vw, 28px) clamp(30px, 3vw, 24px);
  border-top:none;
}
.hm-sm__btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:clamp(140px, 32vw, 220px);
  padding:clamp(12px, 2.8vw, 16px) clamp(16px, 4vw, 24px);
  border-radius:10px; font-weight:700; font-size:clamp(14px, 1.8vw, 16px);
  line-height:1; text-decoration:none; cursor:pointer;
}
.hm-sm__btn--ghost { border:1px solid #e5e7eb; background:#fff; color:#111827; }

/* 5) Close (×) button: bigger and tappable */
.hm-sm__close {
  top:clamp(10px, 1.8vw, 14px); right:clamp(10px, 1.8vw, 14px);
  width:clamp(32px, 6vw, 40px); height:clamp(32px, 6vw, 40px);
  border-radius:9999px; font-size:clamp(18px, 3.4vw, 20px);
  display:inline-flex; align-items:center; justify-content:center;
}
/* === End consolidated overrides === */

/* v1.0.1 final: button padding */
.hm-sm__btn { padding: 16px 20px !important; }