/* article-maker.css - 記事化機能のスタイル */

/* プレビューダイアログ */
.article-preview-overlay {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.85);
	z-index: 10000;
	justify-content: center;
	align-items: flex-start;
	overflow-y: auto;
	padding: 20px;
}
.article-preview-overlay.show { display: flex; }
.article-preview-box {
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	width: fit-content;
	max-width: 100%;
	box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.article-preview-box h2 {
	font-size: 18px;
	color: #333;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid #ff6b6b;
}
.article-preview-box .preview-area {
	margin: 12px 0;
	border: 1px solid #ddd;
	padding: 0;
	background: #f9f9f9;
	border-radius: 8px;
	max-height: 600px;
	overflow: auto;
	width: fit-content;
	max-width: 100%;
}
/* 1024pxの元サイズを縮小表示（html2canvas はそのままフルサイズでレンダリング） */
.article-preview-box .preview-area .article-deck-image {
	transform-origin: top left;
	zoom: 0.7;
}
.article-preview-box .actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin-top: 16px;
}
.article-preview-box .actions .btn {
	padding: 10px 16px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: bold;
}
.article-preview-box .actions .btn-primary {
	background: linear-gradient(135deg, #ff6b6b, #feca57);
	color: #fff;
}
.article-preview-box .actions .btn-primary:hover { filter: brightness(1.1); }
.article-preview-box .actions .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.article-preview-box .actions .btn-secondary {
	background: #e4e6ef;
	color: #555;
}
.article-preview-box .actions .btn-secondary:hover { background: #d4d6df; }
.article-preview-box .snippet-area {
	margin-top: 16px;
	padding: 12px;
	background: #f5f6fa;
	border-radius: 8px;
}
.article-preview-box .snippet-area h4 {
	font-size: 13px;
	color: #666;
	margin-bottom: 6px;
}
.article-preview-box .snippet-area textarea {
	width: 100%;
	height: 100px;
	padding: 8px;
	font-size: 11px;
	font-family: 'Consolas', monospace;
	border: 1px solid #ddd;
	border-radius: 4px;
	resize: vertical;
	box-sizing: border-box;
}

/* 記事イメージ本体 - 本番 makeDeckImage() の忠実な再現
   サーバサイドの仕様（pclb094.fcgi makeDeckImage）:
   - 背景画像: img/back180628.jpg （幅1024px固定）
   - カード: 100x140px、9列、オフセット (62, 46)
   - 最大7行（超過ぶんは切り捨て）
   - 枚数画像: img/no/cardXX.jpg を (card_x + 39, card_y + 110) に配置
   - 高さ: hh*ymax + yoff*2 （basehh）、幅 1024px */
.article-deck-image {
	position: relative;
	/* width/height はインラインで動的指定 */
	background-image: url('../img/back180628.jpg');
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 1024px auto;
	font-family: 'Hiragino Sans', 'Meiryo', sans-serif;
	box-sizing: border-box;
	overflow: hidden;
}
.article-deck-image .article-header {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	text-shadow: 0 1px 4px rgba(0,0,0,0.55), 0 0 2px #000;
	letter-spacing: 1px;
	z-index: 3;
	padding: 4px 14px;
	background: rgba(0,0,0,0.35);
	border-radius: 18px;
}
.article-deck-image .card-cell {
	position: absolute;
	width: 100px;
	height: 140px;
	/* top/left はインライン指定 */
}
.article-deck-image .card-cell > img.card-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 140px;
	display: block;
}
.article-deck-image .card-cell > img.count-img {
	position: absolute;
	/* サーバ側: 枚数画像は card位置 + (39, 110) に配置
	   各枚数画像 card01.jpg〜card31.jpg の幅は推定 ~22px */
	left: 39px;
	top: 110px;
	/* 画像のネイティブサイズで表示 */
	display: block;
}

/* デッキコードダイアログ内の「記事にする」ボタン */
.article-make-area {
	margin-top: 12px;
	padding: 12px;
	background: #fce4ec;
	border: 1px solid #f48fb1;
	border-radius: 8px;
}
.article-make-area .area-title {
	font-weight: bold;
	color: #c2185b;
	margin-bottom: 6px;
	font-size: 13px;
}
.article-make-area button {
	padding: 8px 16px;
	background: linear-gradient(135deg, #c2185b, #e91e63);
	color: #fff;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: bold;
}
.article-make-area button:hover {
	filter: brightness(1.1);
}