/* ===== 基本レイアウト ===== */
.otasukew-user-container { max-width:1200px; margin:0 auto; background:#E4E8E3; padding:30px; border-radius:8px; box-shadow:0 4px 6px rgba(0,0,0,0.1); font-family:sans-serif; }
.otasukew-user-top, .otasukew-user-page { background:#fff; border-radius:6px; padding:20px; }

/* ===== ボタン共通 ===== */
.otasukew-user-container button { background:white; color:#292200; border:none; padding:10px 20px; border-radius:4px; cursor:pointer; font-weight:bold; font-size:0.95em; }
.otasukew-user-container button:hover { opacity:0.88; }

/* ===== TOPページ ===== */
.otasukew-user-top-lead { color:#555; font-size:0.95em; margin:0 0 20px; }

.otasukew-user-top-cat1-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:28px; }
.otasukew-user-top-cat1-card { background:#fff; border:2px solid #e0d8ff; border-radius:10px; padding:18px 10px 14px; text-align:center; cursor:pointer; transition:border-color 0.15s,box-shadow 0.15s; }
.otasukew-user-top-cat1-card:hover { border-color:#6c5ce7; box-shadow:0 4px 14px rgba(108,92,231,0.15); }
.otasukew-user-top-cat1-fav { border-color:#f1c40f; }
.otasukew-user-top-cat1-name { font-weight:bold; color:#2c3e50; font-size:1em; margin-bottom:6px; }
.otasukew-user-top-cat1-count { font-size:0.8em; color:#9b8fe8; }

.otasukew-user-top-tag-section { margin-bottom:28px; }
.otasukew-user-top-tag-label { font-weight:bold; color:#555; font-size:0.88em; margin-bottom:10px; }
.otasukew-user-top-tag-list { display:flex; flex-wrap:wrap; gap:8px; }
.otasukew-user-top-tag-btn { display:inline-block; padding:6px 16px; border-radius:20px; border:1px solid #c8c0f0; background:#fff; color:#6c5ce7; font-size:0.88em; cursor:pointer; transition:background 0.15s; user-select:none; }
.otasukew-user-top-tag-btn:hover { background:#f0eaff; }

.otasukew-user-top-new-section { margin-bottom:14px; }
.otasukew-user-top-new-section-col2 { margin-top:24px; }
.otasukew-user-top-new-label { font-weight:bold; color:#555; font-size:0.88em; margin-bottom:12px; padding-bottom:4px; border-bottom:1px solid #eee; }
.otasukew-user-top-new-main-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
.otasukew-user-top-new-col1-stack { display:flex; flex-direction:column; gap:14px; }
.otasukew-user-top-new-banner { display:flex; flex-direction:column; align-self:stretch; }
.otasukew-user-top-new-banner > * { height:100%; }
.otasukew-user-top-new-col1-grid { display:flex; flex-direction:column; gap:14px; }
.otasukew-user-top-new-col2-grid { display:grid; grid-template-columns:1fr; gap:14px; }

/* ===== 新着カード ===== */
.otasukew-user-new-card { background:#fff; border:1px solid #e0d8ff; border-radius:8px; overflow:hidden; box-shadow:0 2px 6px rgba(108,92,231,0.06); display:flex; flex-direction:column; }
.otasukew-user-new-card-tags { display:flex; flex-wrap:wrap; gap:4px; padding:8px 10px; background:#fff !important; border-bottom:1px solid #e8e2ff; }
.otasukew-user-new-card-preview-wrap { width:100%; overflow:hidden; position:relative; background:#fafafa; height:220px; }
.otasukew-user-new-card-preview-wrap iframe { border:none; display:block; transform-origin:top left; }
.otasukew-user-new-card-goto { width:100%; background:#f0eaff !important; color:#6c5ce7 !important; border-top:1px solid #e0d8ff !important; border-radius:0 !important; padding:8px !important; font-size:0.82em !important; text-align:center; flex-shrink:0; }
.otasukew-user-new-card-goto:hover { background:#e0d8ff !important; }

/* ===== TOPに戻るボタン ===== */
.otasukew-user-btn-back-sidebar { width:100%; background:#ecf0f1 !important; color:#2c3e50 !important; border:1px solid #bdc3c7 !important; padding:8px 12px !important; font-size:0.88em !important; border-radius:4px !important; text-align:center; display:block; }
.otasukew-user-btn-back-sidebar:hover { background:#d5dbdb !important; }

/* ===== ページレイアウト ===== */
.otasukew-user-twocol { display:flex; gap:24px; align-items:flex-start; }
.otasukew-user-sidebar { width:180px; flex-shrink:0; position:sticky; top:20px; max-height:calc(100vh - 40px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:#d0c8f0 transparent; }
.otasukew-user-sidebar::-webkit-scrollbar { width:4px; }
.otasukew-user-sidebar::-webkit-scrollbar-track { background:transparent; }
.otasukew-user-sidebar::-webkit-scrollbar-thumb { background:#d0c8f0; border-radius:4px; }
.otasukew-user-sidebar-block { margin-bottom:20px; }
.otasukew-user-sidebar-block-title { font-weight:bold; font-size:0.82em; color:#888; text-transform:uppercase; letter-spacing:0.05em; padding:0 0 6px; border-bottom:1px solid #eee; margin-bottom:8px; }
.otasukew-user-sidebar-nav { list-style:none; margin:0; padding:0; }
.otasukew-user-sidebar-nav-item { padding:7px 12px; border-radius:5px; cursor:pointer; font-size:0.9em; color:#444; transition:background 0.12s; user-select:none; }
.otasukew-user-sidebar-nav-item:hover { background:#f0eaff; color:#6c5ce7; }
.otasukew-user-sidebar-active { background:#6c5ce7 !important; color:#fff !important; font-weight:bold; }
.otasukew-user-sidebar-fav-item { color:#c8950a; font-weight:bold; }
.otasukew-user-sidebar-fav-item:hover { background:#fffde7; color:#a07800; }

/* ===== 飾りブロック上の区切り線 ===== */
#otasukew-user-sidebar-block-kazari { border-top:2px solid #e0d8ff; padding-top:16px; }

/* ===== 右メイン ===== */
.otasukew-user-main { flex:1; min-width:0; }
.otasukew-user-top-bar { display:flex; flex-direction:column; align-items:stretch; gap:8px; margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid #e0d8ff; }
.otasukew-user-page-title { display:none; }
.otasukew-user-col-switch-topbar { width:100%; }
.otasukew-user-col-switch-topbar .otasukew-user-col-switch { width:100%; display:flex; gap:0; }
.otasukew-user-col-switch-topbar .otasukew-user-col-switch-btn { flex:1; padding:10px 0 !important; font-size:0.95em !important; border:1px solid #ccc !important; border-radius:0 !important; background:#f8f8f8 !important; color:#444 !important; }
.otasukew-user-col-switch-topbar .otasukew-user-col-switch-btn:first-child { border-radius:4px 0 0 4px !important; }
.otasukew-user-col-switch-topbar .otasukew-user-col-switch-btn:last-child { border-radius:0 4px 4px 0 !important; }
.otasukew-user-col-switch-active,
.otasukew-user-col-switch-topbar .otasukew-user-col-switch-btn.otasukew-user-col-switch-active { background:#6c5ce7 !important; color:#fff !important; border-color:#6c5ce7 !important; }

/* ===== タグフィルター ===== */
.otasukew-user-tag-filter { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.otasukew-user-tag-btn { display:inline-block; padding:5px 14px; border-radius:20px; border:1px solid #ccc; background:#f8f8f8; color:#555; font-size:0.84em; cursor:pointer; user-select:none; transition:background 0.14s; }
.otasukew-user-tag-btn:hover { background:#e8e2ff; border-color:#9b8fe8; color:#4a3aaa; }
.otasukew-user-tag-active { background:#6c5ce7 !important; color:#fff !important; border-color:#6c5ce7 !important; }
.otasukew-user-empty { color:#aaa; padding:30px; text-align:center; font-size:0.95em; }

/* ===== カラム切り替え ===== */
#otasukew-user-col-switch { display:none; } /* サイドバー側は非表示（topbarの全幅版を使用） */
.otasukew-user-col-switch { display:flex; gap:6px; }
.otasukew-user-col-switch-btn { flex:1; padding:7px 0 !important; font-size:0.85em !important; border:1px solid #ccc !important; border-radius:4px !important; background:#f8f8f8 !important; color:#444 !important; cursor:pointer; text-align:center; }
.otasukew-user-col-switch-active { background:#6c5ce7 !important; color:#fff !important; border-color:#6c5ce7 !important; }

/* ===== カードグリッド ===== */
.otasukew-user-cards-grid.otasukew-user-cards-2col { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.otasukew-user-cards-grid.otasukew-user-cards-1col { display:grid; grid-template-columns:1fr; gap:20px; }
.otasukew-user-cards-grid .otasukew-user-design-card.otasukew-user-card-open { grid-column:1 / -1; }

/* ===== デザインカード ===== */
.otasukew-user-design-card { background:#fff; border:1px solid #e0d8ff; border-radius:10px; overflow:hidden; box-shadow:0 2px 10px rgba(108,92,231,0.07); transition:box-shadow 0.15s; display:flex; flex-direction:column; }
.otasukew-user-design-card.otasukew-user-card-open { box-shadow:0 4px 20px rgba(108,92,231,0.18); }
.otasukew-user-design-card-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:#f5f2ff; border-bottom:1px solid #e8e2ff; }
.otasukew-user-design-card-tags { display:flex; flex-wrap:wrap; gap:5px; }
.otasukew-user-design-card-tag { display:inline-block; padding:3px 10px; border-radius:12px; background:#D1AD00; color:#fff; font-size:0.76em; font-weight:bold; }

/* お気に入り */
.otasukew-user-fav-btn { background:none !important; border:none !important; font-size:1.3em; color:#ccc; cursor:pointer; padding:0 4px !important; line-height:1; transition:color 0.15s; }
.otasukew-user-fav-btn:hover { color:#f1c40f; }
.otasukew-user-fav-on { color:#f1c40f !important; }

/* カード一覧プレビュー */
.otasukew-user-card-list-preview-wrap { width:100%; overflow:hidden; position:relative; background:#fafafa; border-bottom:1px solid #e8e2ff; height:320px; }
.otasukew-user-card-list-preview-wrap iframe { border:none; display:block; transform-origin:top left; }

/* 編集ボタン固定 */
.otasukew-user-card-open-btn-wrap { padding:10px 14px 14px; margin-top:auto; }
.otasukew-user-btn-open-edit { width:100%; background:#6c5ce7 !important; color:#fff !important; border-radius:6px !important; padding:9px !important; font-size:0.9em !important; font-weight:bold !important; }
.otasukew-user-btn-open-edit:hover { background:#5a4bd1 !important; }
.otasukew-user-btn-open-edit.is-open { background:#e74c3c !important; }
.otasukew-user-btn-open-edit.is-open:hover { background:#c0392b !important; }

/* 編集エリア */
.otasukew-user-design-card-edit { border-top:1px solid #f0eeff; padding:0; }
.otasukew-user-card-edit-inner { padding:16px; }
/* 編集エリア：左プレビュー＝右フォームの約半分幅 */
.otasukew-user-card-edit-twocol { display:grid; grid-template-columns:1fr 2fr; gap:20px; align-items:start; margin-bottom:16px; }
.otasukew-user-card-edit-left-preview { position:sticky; top:20px; align-self:start; display:flex; flex-direction:column; gap:8px; }
.otasukew-user-card-edit-right-form { display:flex; flex-direction:column; gap:10px; }
.otasukew-user-edit-preview-wrap { width:100%; overflow:hidden; position:relative; background:#fafafa; border:1px dashed #d0c8f0; border-radius:6px; min-height:80px; }
.otasukew-user-edit-preview-wrap iframe { border:none; display:block; transform-origin:top left; }

/* コピーボタン */
.otasukew-user-copy-btn-bottom { margin-top:14px; padding-top:14px; border-top:1px solid #ede8ff; }
.otasukew-user-btn-copy-code { background:#6c5ce7 !important; color:#fff !important; padding:10px 24px !important; font-size:0.95em !important; border-radius:6px !important; width:100%; font-weight:bold !important; }
.otasukew-user-btn-copy-code:hover { background:#5a4bd1 !important; }
.otasukew-user-btn-copy-code-bottom { width:100%; background:#6c5ce7 !important; color:#fff !important; padding:10px 24px !important; font-size:0.85em !important; border-radius:6px !important; font-weight:bold !important; }
.otasukew-user-btn-copy-code-bottom:hover { background:#5a4bd1 !important; }

/* リセットボタン */
.otasukew-user-btn-clear-fields { width:100%; background:#fff8e1 !important; color:#7a5c00 !important; border:1px solid #f0c040 !important; border-radius:6px !important; padding:10px 14px !important; font-size:0.85em !important; font-weight:bold !important; line-height:1.5; text-align:center; }
.otasukew-user-btn-clear-fields:hover { background:#fff3c0 !important; }

/* 閉じるボタン */
.otasukew-user-btn-close-edit { width:100%; background:#ecf0f1 !important; color:#666 !important; border-radius:0 0 6px 6px !important; padding:8px !important; font-size:0.85em !important; border-top:1px solid #e0d8ff !important; }

/* フィールド */
.otasukew-user-input-block-title { font-size:0.84em; font-weight:bold; color:#6c5ce7; margin-bottom:10px; padding-bottom:4px; border-bottom:1px solid #ede8ff; }
.otasukew-user-field-row { display:flex; align-items:flex-start; gap:6px; margin-bottom:10px; }
.otasukew-user-field-label { width:110px; flex-shrink:0; font-size:0.84em; color:#555; font-weight:bold; padding-top:8px; }
.otasukew-user-field-inputs { flex:1; min-width:0; }
.otasukew-user-custom-input { width:100%; padding:7px 10px; border:1px solid #ccc; border-radius:4px; font-size:0.87em; box-sizing:border-box; resize:vertical; }
.otasukew-user-custom-input:focus { border-color:#9b8fe8; outline:none; }
/* カラーフィールド行：ラベル右にカラーピッカー横並び・高さ揃え */
.otasukew-user-field-row--color { align-items:center; }
.otasukew-user-field-row--color .otasukew-user-field-label { padding-top:0; }
.otasukew-user-btn-hide-field { padding:3px 8px !important; font-size:0.75em !important; border:1px solid #e0d8ff !important; border-radius:4px !important; background:#f5f2ff !important; color:#6c5ce7 !important; cursor:pointer; flex-shrink:0; white-space:nowrap; margin-top:7px; }
.otasukew-user-btn-hide-field.is-hidden { background:#e74c3c !important; color:#fff !important; border-color:#e74c3c !important; }
.otasukew-user-field-row.field-hidden .otasukew-user-field-inputs { opacity:0.35; pointer-events:none; }
.otasukew-user-field-row.field-hidden .otasukew-user-field-label { opacity:0.35; }
.otasukew-user-live-note { font-size:0.78em; color:#9b8fe8; margin:0 0 10px; padding:4px 8px; background:#f5f2ff; border-left:3px solid #9b8fe8; border-radius:0 4px 4px 0; }
/* カラーピッカー：横長・1行高さ・枠なし */
.otasukew-user-color-input { width:100% !important; height:2em !important; padding:0 !important; cursor:pointer; border:none !important; border-radius:4px; box-shadow:none !important; outline:none !important; background:none; display:block; }

/* セクション区切り（タグ・お気に入り） */
.otasukew-user-section-cat1-heading { font-size:1.05em; font-weight:bold; color:#2c3e50; padding:10px 0 8px; margin-top:24px; border-bottom:2px solid #e0d8ff; margin-bottom:14px; }
.otasukew-user-section-cat1-heading:first-child { margin-top:0; }
.otasukew-user-section-grid-2col { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:20px; }
.otasukew-user-section-grid-1col { display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:20px; }
.otasukew-user-section-grid-2col .otasukew-user-design-card.otasukew-user-card-open { grid-column:1 / -1; }

/* ===== レスポンシブ ===== */
@media (max-width:900px) {
    .otasukew-user-cards-grid.otasukew-user-cards-2col { grid-template-columns:1fr; }
    .otasukew-user-top-new-main-grid { grid-template-columns:1fr; }
    .otasukew-user-card-edit-twocol { grid-template-columns:1fr; }
    .otasukew-user-section-grid-2col { grid-template-columns:1fr; }
}
@media (max-width:860px) {
    .otasukew-user-twocol { flex-direction:column; }
    .otasukew-user-sidebar { width:100%; position:static; max-height:none; }
    .otasukew-user-sidebar-nav { display:flex; flex-wrap:wrap; gap:6px; }
    .otasukew-user-sidebar-nav-item { border:1px solid #ddd; border-radius:4px; }
    .otasukew-user-top-cat1-grid { grid-template-columns:repeat(3,1fr); }
    .otasukew-user-field-row { flex-direction:column; }
    .otasukew-user-field-label { width:auto; padding-top:0; }
    .otasukew-user-top-bar { flex-direction:column; align-items:flex-start; }
}
@media (max-width:520px) {
    .otasukew-user-top-cat1-grid { grid-template-columns:repeat(2,1fr); }
}
/* ===== 絵文字・ライン 閲覧グリッド ===== */
/* 絵文字: 6列 */
.otasukew-user-simple-grid--emoji { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
/* ライン: 2列 */
.otasukew-user-simple-grid--line  { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (max-width:700px) {
    .otasukew-user-simple-grid--emoji { grid-template-columns:repeat(4,1fr); }
    .otasukew-user-simple-grid--line  { grid-template-columns:1fr; }
}
.otasukew-user-simple-cell { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px; border:1px solid #e0d8ff; border-radius:8px; background:#fff; }
.otasukew-user-simple-preview { font-size:1.4em; text-align:center; line-height:1.5; word-break:break-all; min-height:30px; width:100%; }
.otasukew-user-simple-copy-btn { background:#fff !important; color:#888 !important; border:1px solid #ddd !important; border-radius:4px !important; padding:4px 10px !important; font-size:0.78em !important; width:100%; font-weight:normal !important; }
.otasukew-user-simple-copy-btn:hover { background:#f5f5f5 !important; border-color:#bbb !important; color:#555 !important; }

/* ===== 絵文字・ライン タグで移動サイドバー（管理側と同等） ===== */
#otasukew-user-sidebar-block-simple-tag .otasukew-user-sidebar-block-title { font-weight:bold; font-size:0.82em; color:#888; text-transform:uppercase; letter-spacing:0.05em; }