/* =========================================================
   グループ枠（バナーグループ全体）
========================================================= */
.group{
	border:1px solid #ddd;
	padding:10px;
	margin-bottom:15px;
	background:#fff;
	width:100%; /* 横幅をフルに使う */
}

/* =========================================================
   グループヘッダー（タイトル＋削除ボタン）
========================================================= */
.group-head{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:10px;
}

/* ▼ グループ名入力 */
.group-head input{
	flex:1;
	max-width:300px; /* ← 必要ならここを広げる */
}

/* =========================================================
   バナー一覧ラップ
========================================================= */
.banners{
	width:100%;
}

/* =========================================================
   バナー1行（Sortable対象）
========================================================= */
.banner-row{
	width:100%;
	cursor:grab;
	display:block;
}

.banner-row:active{
	cursor:grabbing;
}
.banner-row > div{
	width:100%;
}
/* =========================
   バナー画面だけフル幅
========================= */
.grm-banner-page .grm-inner{
	max-width:100% !important;
}

.grm-banner-item{
	box-sizing:border-box;
}

.grm-banner-item img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}
.grm-banner-wrap.raw .grm-banner-item {
	margin:0;
}
/* =========================================================
   バナー本体（GRMカードUI）
========================================================= */
.grm-banner-item{
	display:flex;
	align-items:center;
	gap:15px;
	padding:12px;
	border:1px solid #dcdcde;
	border-radius:8px;
	background:#fff;
	margin-bottom:10px;
	transition:.2s ease;
}

/* ▼ ホバー時（GRM共通） */
.grm-banner-item:hover{
	box-shadow:0 6px 16px rgba(0,0,0,0.08);
}

/* =========================================================
   ドラッグハンドル
========================================================= */
.grm-banner-item .drag-handle{
	cursor:grab;
	font-size:18px;
	color:#666;
	flex-shrink:0;
}

.grm-banner-item .drag-handle:active{
	cursor:grabbing;
}

/* =========================================================
   サムネイル
========================================================= */
.grm-banner-item .thumb{
	width:70px;
	height:50px;
	border-radius:6px;
	overflow:hidden;
	background:#f6f7f7;
	border:1px solid #e5e7eb;
	flex-shrink:0;
}

.grm-banner-item .thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

/* =========================================================
   情報エリア（タイトル・サイズ）
========================================================= */
.grm-banner-item .info{
	flex:1;
	min-width:0;
}

.grm-banner-item .info .title{
	font-size:15px;
	font-weight:600;
	color:#2c3338;
	line-height:1.4;
	word-break:break-word;
}

.grm-banner-item .info .meta{
	font-size:12px;
	color:#777;
	margin-top:4px;
}

/* =========================================================
   操作ボタン（編集・削除）
========================================================= */
.grm-banner-item .actions{
	display:flex;
	align-items:center;
	gap:8px;
	flex-shrink:0;
}

/* =========================================================
   バナー追加ボタン
========================================================= */
.add-banner{
	margin-bottom:15px;
}

.grm-banner-edit{
	margin:10px 0 15px 40px;
	padding:15px;
	border:1px solid #ddd;
	border-radius:8px;
	background:#f9f9f9;
}

.drop-zone{
	border:2px dashed #ccc;
	border-radius:8px;
	padding:20px;
	min-height:80px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	color:#666;
	background:#fafafa;
	cursor:pointer;
	transition:.2s;
}

.drop-zone:hover{
	border-color:#0073aa;
	background:#f0f8ff;
}