/* ========================================
   style-100.css  v16.0
   100均商品辞典・管理ツール スタイルシート
   クラスプレフィックス: ad100-
   ======================================== */

/* ===== 基本コンテナ ===== */
.ad100-container { max-width: 1300px; margin: 0 auto; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); font-family: sans-serif; }
.ad100-container h1 { text-align: center; color: #2c3e50; margin-bottom: 30px; font-size: 1.8em; }
.ad100-section { margin-bottom: 35px; padding: 20px; border: 1px solid #ddd; border-radius: 6px; background: #fcfcfc; }
.ad100-section-title { margin-top: 0; font-size: 1.25em; color: #2c3e50; border-bottom: 2px solid #4a90e2; padding-bottom: 5px; margin-bottom: 15px; }
.ad100-instruction { font-size: 0.85em; color: #555; margin-bottom: 15px; line-height: 1.5; }
.ad100-container textarea { width: 100%; height: 120px; padding: 10px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; font-family: monospace; resize: vertical; }

/* ===== ボタン ===== */
.ad100-btn-group { display: flex; gap: 10px; flex-wrap: wrap; }
.ad100-container button { background-color: #4a90e2; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 0.95em; }
.ad100-container button:hover { opacity: 0.9; }
.ad100-btn-green { background-color: #2ecc71 !important; font-size: 1.1em !important; padding: 12px 30px !important; }
.ad100-btn-secondary { background-color: #7f8c8d !important; }
.ad100-btn-small-blue { background-color: #3498db !important; padding: 6px 12px !important; font-size: 0.85em !important; }
.ad100-btn-bulk-delete { background-color: #c0392b !important; }
.ad100-btn-bulk-delete:hover { background-color: #a93226 !important; }

/* ===== 編集コントロール ===== */
.ad100-edit-controls { display: flex; gap: 15px; margin-bottom: 15px; align-items: center; }
.ad100-search-box-mini { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.9em; }

/* ===== 警告 ===== */
.ad100-warning-alert { padding: 12px 15px; background-color: #fff5f5; border: 1px solid #ffcccc; border-left: 5px solid #e74c3c; border-radius: 4px; color: #c0392b; font-size: 0.9em; line-height: 1.5; }

/* ===== ランダム素材エリア ===== */
.ad100-random-area { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; padding: 16px 20px 14px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.ad100-random-label { font-size: 0.78em; font-weight: bold; color: #aaa; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.ad100-random-content { min-height: 48px; }
.ad100-random-inner { display: flex; gap: 16px; align-items: flex-start; }
.ad100-random-img-wrap { flex: 0 0 auto; width: 110px; height: 110px; border-radius: 8px; overflow: hidden; background: #f5f5f5; display: flex; align-items: center; justify-content: center; border: 1px solid #eee; }
.ad100-random-img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.ad100-random-body { flex: 1; min-width: 0; }
.ad100-random-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ad100-random-store { font-size: 0.8em; color: #777; }
.ad100-random-title { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.ad100-random-title strong { font-size: 1.15em; color: #1a1a1a; }
.ad100-random-yomi { font-size: 0.82em; color: #999; }
.ad100-random-desc { font-size: 0.88em; color: #555; margin: 0; line-height: 1.55; }
.ad100-btn-random-next { font-size: 0.82em !important; padding: 5px 14px !important; margin-top: 12px; background-color: #fff !important; color: #555 !important; border: 1px solid #ccc !important; border-radius: 20px !important; }
.ad100-btn-random-next:hover { background-color: #f5f5f5 !important; }
@media (max-width: 600px) {
    .ad100-random-img-wrap { width: 80px; height: 80px; }
}

/* ===== フィルター ===== */
.ad100-store-filter-wrap,
.ad100-corner-filter-wrap { margin-bottom: 14px; }
.ad100-filter-label { font-size: 0.75em; font-weight: bold; color: #999; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.ad100-filter-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ad100-filter-chip { flex: 0 0 auto; font-size: 0.84em; padding: 6px 14px; border: 1px solid #ddd; border-radius: 4px; background: #fafafa; color: #444; cursor: pointer; font-weight: 600; transition: background 0.12s, color 0.12s, border-color 0.12s; user-select: none; line-height: 1; }
.ad100-filter-chip:hover { background: #f0f0f0; border-color: #bbb; }
.ad100-store-btn.ad100-filter-active { background: #2c3e50; color: #fff; border-color: #2c3e50; }
.ad100-corner-btn.ad100-filter-active { background: #5f4fcf; color: #fff; border-color: #5f4fcf; }
/* 後方互換：古いクラス名を残してもセレクタが壊れないよう最低限定義 */
.ad100-store-filter-label, .ad100-corner-filter-label { display: none; }
.ad100-store-btn, .ad100-corner-btn { }

/* ===== プレビュー（3番）共通 ===== */
.ad100-search-box { width:100%; padding:12px; font-size:1em; border:2px solid #4a90e2; border-radius:4px; box-sizing:border-box; margin-bottom:15px; }
.ad100-preview-wrap { }
@media (max-width:900px) { .ad100-cat1-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px) { .ad100-cat1-grid { grid-template-columns: 1fr; } }

/* ===== 大分類カード（プレビュー）===== */
.ad100-cat1-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; align-items: start; }
.ad100-cat1-block { border: 1px solid #e8e8e8; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: box-shadow 0.18s; }
.ad100-cat1-block:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
.ad100-cat1-block.ad100u-open { grid-column: 1 / -1; }
/* ヘッダー：白背景、アイコンのみカラー */
.ad100-cat1-header { padding: 14px 16px 12px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; transition: background 0.15s; border-bottom: 2px solid var(--cat1-color, #ccc); }
.ad100-cat1-header:hover { background: #fafafa; }
.ad100-cat1-header-text { display: flex; align-items: center; gap: 8px; }
.ad100-cat1-icon { font-size: 1.35em; line-height: 1; flex-shrink: 0; }
.ad100-cat1-name { font-size: 0.97em; font-weight: 700; color: #1a1a1a; }
.ad100-cat1-count { font-size: 0.75em; font-weight: 600; color: #fff; background: var(--cat1-color, #aaa); padding: 2px 7px; border-radius: 10px; margin-left: 2px; white-space: nowrap; }
.ad100-cat1-toggle-icon { display: inline-block; width: 9px; height: 9px; border-top: 2px solid #aaa; border-right: 2px solid #aaa; transform: rotate(135deg); transition: transform 0.2s; flex-shrink: 0; }
.ad100-cat1-block.ad100u-open > .ad100-cat1-header .ad100-cat1-toggle-icon { transform: rotate(-45deg); margin-top: 4px; }
.ad100-cat1-content { display: none; padding: 14px; background: #fafafa; }
.ad100-cat1-block.ad100u-open > .ad100-cat1-content { display: block; }

/* ===== 小分類アコーディオン（プレビュー） ===== */
.ad100-cat2-grid    { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:start; }
.ad100-cat2-section { border:1px solid #ddd; border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.ad100-cat2-section.ad100u-open { grid-column:1 / -1; }
.ad100-cat2-header  { padding:12px 16px; font-size:0.98em; font-weight:bold; color:#2c3e50; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:space-between; user-select:none; transition:background 0.15s; border-left:5px solid; }
.ad100-cat2-header:hover { background:#f5f5f5; }
.ad100-cat2-toggle-icon { display:inline-block; width:9px; height:9px; border-top:2px solid #2c3e50; border-right:2px solid #2c3e50; transform:rotate(135deg); transition:transform 0.2s; margin-right:5px; }
.ad100-cat2-section.ad100u-open .ad100-cat2-toggle-icon { transform:rotate(-45deg); margin-top:4px; }
.ad100-cat2-content { display:none; padding:16px 16px 4px; background:#fff; border-top:1px solid #eee; }
.ad100-cat2-section.ad100u-open .ad100-cat2-content { display:block; }
.ad100-edit-cat1-group { border: 2px solid #ccc; border-radius: 6px; margin-bottom: 12px; overflow: hidden; }
.ad100-edit-cat1-header { padding: 10px 15px; font-weight: bold; color: #fff; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; font-size: 1em; }
.ad100-edit-cat1-header:hover { opacity: 0.9; }
.ad100-edit-cat1-content { display: none; padding: 10px; background: #fff; }
.ad100-edit-cat1-group.ad100-open .ad100-edit-cat1-content { display: block; }
.ad100-acc-arrow { font-size: 0.8em; }

/* ===== 編集アコーディオン（小分類） ===== */
.ad100-edit-cat2-group { border: 1px solid #ddd; border-radius: 4px; margin-bottom: 8px; overflow: hidden; }
.ad100-edit-cat2-header { background: #eaedf1; padding: 8px 12px; font-weight: bold; color: #2c3e50; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; font-size: 0.92em; border-left: 4px solid; }
.ad100-edit-cat2-content { display: none; padding: 8px; background: #fff; overflow-x: auto; }
.ad100-edit-cat2-group.ad100-open .ad100-edit-cat2-content { display: block; }

/* ===== 未保存バッジ（黄色） ===== */
.ad100-edit-cat1-group.ad100-pending { border-color: #f0c040; }
.ad100-edit-cat2-group.ad100-pending .ad100-edit-cat2-header { background: #fffbe6; color: #7a5c00; }
.ad100-pending-badge { font-size: 0.75em; font-weight: bold; color: #fff; background: #e6a817; padding: 2px 8px; border-radius: 10px; margin-left: 8px; }
.ad100-new-badge { display: inline-block; font-size: 0.7em; font-weight: bold; color: #fff; background: #e67e22; padding: 1px 6px; border-radius: 4px; margin-right: 4px; vertical-align: middle; }

/* ===== テーブル ===== */
.ad100-desc-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #555; }
.ad100-table { width: 100%; border-collapse: collapse; font-size: 0.85em; text-align: left; min-width: 900px; }
.ad100-table th, .ad100-table td { border: 1px solid #ddd; padding: 8px; vertical-align: middle; }
.ad100-edit-tr:hover { background: #f9f9f9; }
/* 未保存行 = 黄色背景 */
.ad100-edit-tr.ad100-tr-new { background: #fffde7 !important; }
.ad100-edit-tr.ad100-tr-new:hover { background: #fff9c4 !important; }
.ad100-btn-edit-row   { background-color: #f39c12 !important; padding: 5px 10px !important; font-size: 0.8em !important; margin-bottom: 5px; display: inline-block; width: 100%; box-sizing: border-box; }
.ad100-btn-delete-row { background-color: #7f8c8d !important; padding: 5px 10px !important; font-size: 0.8em !important; display: inline-block; width: 100%; box-sizing: border-box; }
.ad100-table th.ad100-th-check, .ad100-table td.ad100-td-check { width: 36px; text-align: center; padding: 6px 4px; }
.ad100-edit-tr.ad100-tr-checked { background: #fff0f0 !important; }

/* ===== 編集モーダル ===== */
.ad100-modal-overlay { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999; justify-content:center; align-items:center; }
.ad100-modal-overlay.ad100-show { display: flex; }
.ad100-modal-content { background:#fff; padding:25px; border-radius:8px; width:90%; max-width:650px; box-shadow:0 4px 15px rgba(0,0,0,0.2); display:flex; flex-direction:column; max-height:85vh; }
.ad100-modal-content h3 { margin-top:0; border-bottom:2px solid #f39c12; padding-bottom:8px; margin-bottom:15px; }
.ad100-modal-scroll-area { overflow-y:auto; flex:1; padding-right:5px; margin-bottom:15px; }
.ad100-modal-grid { display:grid; grid-template-columns:140px 1fr; gap:12px; align-items:center; }
.ad100-modal-grid label { font-weight:bold; font-size:0.9em; color:#444; }
.ad100-modal-grid input[type="text"], .ad100-modal-grid textarea, .ad100-modal-grid select { width:100%; box-sizing:border-box; padding:8px; border:1px solid #ccc; border-radius:4px; font-family:inherit; }
.ad100-modal-grid textarea { height:120px; resize:vertical; }
.ad100-modal-hr { border:0; border-top:2px dashed #ddd; margin:20px 0 15px 0; }
.ad100-modal-content h4 { margin:0 0 10px 0; color:#2c3e50; }
.ad100-modal-article-row { display:flex; gap:8px; margin-bottom:8px; align-items:center; }
.ad100-modal-article-row input[type="text"] { padding:6px; border:1px solid #ccc; border-radius:4px; font-size:0.9em; box-sizing:border-box; }
.ad100-modal-article-text { flex:2; }
.ad100-modal-article-url  { flex:3; }
.ad100-btn-delete-article { background-color:#7f8c8d !important; padding:6px 10px !important; font-size:0.85em !important; }
.ad100-modal-actions { display:flex; justify-content:flex-end; gap:10px; border-top:1px solid #eee; padding-top:15px; }

/* ===== 商品カード ===== */
.ad100-term-item { padding:18px; border:1px solid #eee; border-radius:6px; background:#fff; margin-bottom:16px; box-shadow:0 2px 4px rgba(0,0,0,0.02); display:flex; gap:18px; align-items:flex-start; justify-content:space-between; }
.ad100-card-left  { flex:2; min-width:0; }
.ad100-card-right { flex:1; max-width:300px; width:100%; padding:12px; box-sizing:border-box; }
.ad100-term-item.ad100-no-right-content .ad100-card-left  { flex:1; }
.ad100-term-item.ad100-no-right-content .ad100-card-right { display:none !important; }
.ad100-term-header  { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.ad100-term-cat-badge { color:white; padding:2px 8px; border-radius:4px; font-size:0.78em; font-weight:bold; }
.ad100-title-wrap   { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.ad100-term-title   { font-size:1.25em; font-weight:bold; margin:0; color:#232323; line-height:1.2; }
.ad100-term-yomi    { font-size:0.85em; color:#666; }
.ad100-purchase-row { display:flex; align-items:center; gap:16px; margin:6px 0 12px 0; flex-wrap:wrap; }
.ad100-store-info   { font-size:0.85em; color:#444; font-weight:bold; }
.ad100-corner-info  { font-size:0.85em; color:#666; }
.ad100-term-desc    { margin:0; line-height:1.6; color:#333; font-size:0.95em; }
.ad100-line         { border:0; border-top:1px solid #eee; margin:10px 0; }
.ad100-term-rel     { font-size:0.9em; color:#555; }
.ad100-rel-tag      { display:inline-block; background:#f0f0f0; border:1px solid #ddd; border-radius:4px; padding:2px 8px; margin-right:5px; margin-bottom:5px; font-size:0.85em; color:#4a90e2; font-weight:bold; cursor:pointer; transition:background-color 0.1s; user-select:none; }
.ad100-rel-tag:hover { background:#e5e9ec; color:#2475d2; }
.ad100-term-note    { padding:10px 14px; background:#fff5f5; border-radius:4px; color:#c0392b; font-size:0.9em; line-height:1.5; }
.ad100-card-image-wrapper { width:100%; margin-bottom:12px; border-radius:4px; overflow:hidden; border:1px solid #eee; display:flex; }
.ad100-card-image   { width:100%; height:auto; object-fit:contain; max-height:180px; background:#f8f8f8; }
.ad100-articles-title { font-size:0.95em; font-weight:bold; color:#2c3e50; margin:0 0 8px 0; display:flex; align-items:center; gap:5px; border-bottom:1px solid #eee; padding-bottom:4px; }
.ad100-articles-list  { margin:0; padding-left:18px; }
.ad100-articles-list li  { margin-bottom:6px; font-size:0.88em; line-height:1.4; color:#333; }
.ad100-articles-link { color:#4a90e2; text-decoration:none; font-weight:500; word-break:break-all; }
.ad100-articles-link:hover { text-decoration:underline; }

@media (max-width:768px) {
    .ad100-cat2-grid { grid-template-columns:1fr; }
    .ad100-term-item { flex-direction:column; gap:12px; }
    .ad100-card-right { max-width:100%; }
}

/* ===== 画像オーバーレイ ===== */
.ad100-img-overlay-bg    { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.82); z-index:10000; justify-content:center; align-items:center; }
.ad100-img-overlay-bg.ad100-show { display:flex; }
.ad100-img-overlay-inner { position:relative; max-width:90vw; max-height:90vh; display:flex; flex-direction:column; align-items:center; }
.ad100-img-overlay-close { position:absolute; top:-14px; right:-14px; background:#fff; color:#333; border:none; border-radius:50%; width:32px; height:32px; font-size:1em; cursor:pointer; font-weight:bold; line-height:1; z-index:1; }
.ad100-img-overlay-close:hover { background:#eee; }
.ad100-img-overlay-img    { max-width:90vw; max-height:80vh; object-fit:contain; border-radius:4px; background:#fff; box-shadow:0 4px 24px rgba(0,0,0,0.5); }
.ad100-img-overlay-caption { color:#eee; font-size:0.95em; margin-top:12px; text-align:center; }