
:root {
  --color-accent: #ff7675;
  --color-accent-light: #fecfef;
  --bg-section: #fff0f3;
  --color-danger: #e74c3c;
  --text-muted: #888;
  --border-color: #eee;
}
/* From dashboard.php */
/* 欠落していたユーティリティクラス等の補完 */
    :root { --color-accent: #ff7675; --color-accent-light: #fecfef; --bg-section: #fff0f3; --color-danger: #e74c3c; --text-muted: #888; --border-color: #eee; }
    .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .flex-wrap { flex-wrap: wrap; }
    .items-center { align-items: center; } .justify-between { justify-content: space-between; }
    .gap-xl { gap: 30px; } .mt-xs { margin-top: 5px; } .mt-md { margin-top: 20px; } .mb-md { margin-bottom: 20px; } .mb-lg { margin-bottom: 30px; } .mb-xl { margin-bottom: 40px; } .mr-sm { margin-right: 10px; }
    .py-md { padding-top: 15px; padding-bottom: 15px; } .p-0 { padding: 0 !important; }
    .text-xs { font-size: 0.75rem; } .text-sm { font-size: 0.85rem; } .text-md { font-size: 1.1rem; } .text-primary { color: #333; } .text-muted { color: var(--text-muted); } .font-bold { font-weight: bold; }
    .border-bottom { border-bottom: 1px solid var(--border-color); }
    
    .card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); padding: 25px; border: 1px solid rgba(255,183,197,0.3); }
    .page-info-banner { display:flex; align-items:center; background:#fff0f3; padding:15px 25px; border-radius:15px; margin-bottom:30px; border:1px solid #ffb7c5; }
    .info-icon { font-size:1.5rem; margin-right:15px; } .page-id { font-size:0.75rem; background:#ff7675; color:#fff; padding:3px 8px; border-radius:10px; margin-right:10px; }
    .page-title { font-family: 'Outfit', sans-serif; color: #ff7675; font-size: 1.8rem; margin:0 0 20px 0; border-bottom:2px dashed #ffb7c5; padding-bottom:10px; }
    .section-title { font-size:1.2rem; margin-bottom:15px; color:#333; border-left:4px solid #ff7675; padding-left:10px; }
    .status-active { color:#2ecc71; font-weight:bold; }
    .unread-badge { background:#e74c3c; color:#fff; font-size:0.75rem; padding:2px 8px; border-radius:10px; }
    .stat-card { text-align:center; padding:20px; border-top:4px solid #ff7675; }
    .stat-value { font-size:2rem; font-weight:bold; color:#ff7675; font-family:'Outfit', sans-serif; margin-bottom:5px; }
    .stat-label { font-size:0.9rem; color:#666; }
    .badge-pink { background:#fecfef; color:#ff7675; padding:3px 8px; border-radius:10px; font-weight:bold; } .badge-mint { background:#a8e6cf; color:#2d3436; padding:3px 8px; border-radius:10px; font-weight:bold; } .badge-orange { background:#ffeaa7; color:#e67e22; padding:3px 8px; border-radius:10px; font-weight:bold; }
    .grid-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap:20px; }
    .grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
    .btn-block { display:block; text-align:center; width:100%; box-sizing:border-box; }
    .btn-lg { font-size:1.2rem; padding:20px; text-decoration:none; display:flex; align-items:center; justify-content:center; }
    .btn-sm { padding:5px 15px; font-size:0.8rem; border-radius:15px; text-decoration:none; display:inline-block; }
    .btn-accent { background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%); color: #2d3436; font-weight:bold; border-radius:20px; box-shadow:0 4px 15px rgba(168,230,207,0.4); border:none; transition:0.3s; } .btn-accent:hover { transform: translateY(-2px); }
    
    @media (max-width: 768px) {
      .flex-wrap { flex-direction: column; }
      .grid-3, .grid-2 { grid-template-columns: 1fr; }
      .page-info-banner { flex-direction: column; text-align: center; }
      .info-icon { margin-right: 0; margin-bottom: 10px; }
      .flex-col > a > span:first-child { text-align: center; width: 100%; display:block; }
    }

/* From products.php */
body[data-page-id="S-10"] {
  --bg-section: #f8f7ff;
  --border-color: #e2d9f3;
}
    .card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); padding: 25px; border: 1px solid rgba(255,118,117,0.3); }
    .page-info-banner { display:flex; align-items:center; background:#fecfef; padding:15px 25px; border-radius:15px; margin-bottom:30px; border:1px solid #ff7675; }
    .info-icon { font-size:1.5rem; margin-right:15px; } .page-id { font-size:0.75rem; background:#ff7675; color:#fff; padding:3px 8px; border-radius:10px; margin-right:10px; }
    .page-title { font-family: 'Outfit', sans-serif; color: #ff7675; font-size: 1.8rem; margin:0 0 20px 0; border-bottom:2px dashed #ffb7c5; padding-bottom:10px; }
    .section-title { font-size:1.2rem; margin-bottom:15px; color:#333; border-left:4px solid #ff7675; padding-left:10px; }
    .status-active { color:#2ecc71; font-weight:bold; }
    .unread-badge { background:#e74c3c; color:#fff; font-size:0.75rem; padding:2px 8px; border-radius:10px; }
    .stat-card { text-align:center; padding:20px; border-top:4px solid #ff7675; }
    .stat-value { font-size:2rem; font-weight:bold; color:#ff7675; font-family:'Outfit', sans-serif; margin-bottom:5px; }
    .stat-label { font-size:0.9rem; color:#666; }
    .badge-pink { background:#fecfef; color:#ff7675; padding:3px 8px; border-radius:10px; font-weight:bold; border: 1px solid #ff7675; }
    .product-card { background:linear-gradient(135deg, #fdf6e3, #e1c699); color:#8b6508; border:2px solid #8b6508; border-radius:20px; padding:20px 30px; display:flex; align-items:center; justify-content:flex-start; gap:25px; text-decoration:none; transition:0.3s; box-shadow:0 4px 15px rgba(139,101,8,0.2); margin-bottom:20px; }
    .product-card:hover { transform: translateY(-2px); box-shadow:0 6px 20px rgba(139,101,8,0.3); }
    .product-thumb { width:60px; height:60px; background:#fff; padding:15px; border-radius:15px; box-shadow:0 4px 10px rgba(139,101,8,0.15); display:flex; align-items:center; justify-content:center; flex-shrink: 0; font-size:2.5rem; }
    .product-thumb img { width:100%; height:100%; object-fit:cover; }
    @media (max-width: 768px) {
      .flex-wrap { flex-direction: column; }
      .page-info-banner { flex-direction: column; text-align: center; }
      .info-icon { margin-right: 0; margin-bottom: 10px; }
    }

/* From chats.php */
/* From chats.php (L2-L9に定義済みの共通ユーティリティ重複ブロックを安全に整理・削除しました) */
    .card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); padding: 25px; border: 1px solid rgba(255,183,197,0.3); }
    .page-info-banner { display:flex; align-items:center; background:#fff0f3; padding:15px 25px; border-radius:15px; margin-bottom:30px; border:1px solid #ffb7c5; }
    .info-icon { font-size:1.5rem; margin-right:15px; } .page-id { font-size:0.75rem; background:#ff7675; color:#fff; padding:3px 8px; border-radius:10px; margin-right:10px; }
    .page-title { font-family: 'Outfit', sans-serif; color: #ff7675; font-size: 1.8rem; margin:0 0 20px 0; border-bottom:2px dashed #ffb7c5; padding-bottom:10px; }
    .section-title { font-size:1.2rem; margin-bottom:15px; color:#333; border-left:4px solid #ff7675; padding-left:10px; }
    .status-active { color:#2ecc71; font-weight:bold; }
    .unread-badge { background:#e74c3c; color:#fff; font-size:0.75rem; padding:2px 8px; border-radius:10px; }
    .stat-card { text-align:center; padding:20px; border-top:4px solid #ff7675; }
    .stat-value { font-size:2rem; font-weight:bold; color:#ff7675; font-family:'Outfit', sans-serif; margin-bottom:5px; }
    .stat-label { font-size:0.9rem; color:#666; }
    .badge-pink { background:#fecfef; color:#ff7675; padding:3px 8px; border-radius:10px; font-weight:bold; } .badge-mint { background:#a8e6cf; color:#2d3436; padding:3px 8px; border-radius:10px; font-weight:bold; } .badge-orange { background:#ffeaa7; color:#e67e22; padding:3px 8px; border-radius:10px; font-weight:bold; } .badge-lavender { background:#e2d9f3; color:#6c5ce7; padding:3px 8px; border-radius:10px; font-weight:bold; }
    .grid-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap:20px; }
    .grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
    .btn-block { display:block; text-align:center; width:100%; box-sizing:border-box; }
    .btn-lg { font-size:1.2rem; padding:20px; text-decoration:none; display:flex; align-items:center; justify-content:center; }
    .btn-sm { padding:5px 15px; font-size:0.8rem; border-radius:15px; text-decoration:none; display:inline-block; }
    .btn-accent { background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%); color: #2d3436; font-weight:bold; border-radius:20px; box-shadow:0 4px 15px rgba(168,230,207,0.4); border:none; transition:0.3s; } .btn-accent:hover { transform: translateY(-2px); }
    @media (max-width: 768px) {
      .flex-wrap { flex-direction: column; }
      .grid-3, .grid-2 { grid-template-columns: 1fr; }
      .page-info-banner { flex-direction: column; text-align: center; }
      .info-icon { margin-right: 0; margin-bottom: 10px; }
      .flex-col > a > span:first-child { text-align: center; width: 100%; display:block; }
    }

/* From finance.php */
.form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 5px; font-weight: 600; color: var(--text-dark); }
        .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #ddd; outline: none; background: rgba(255,255,255,0.8); box-sizing: border-box; }
        .chat-bubble { padding: 15px; border-radius: 20px; margin-bottom: 15px; max-width: 70%; }
        .chat-left { background: #fff; align-self: flex-start; border-bottom-left-radius: 5px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
        .chat-right { background: var(--primary-pink); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
    /* From finance.php (L2-L9に定義済みの共通ユーティリティ重複ブロックを安全に整理・削除しました) */
    .card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); padding: 25px; border: 1px solid rgba(255,183,197,0.3); }
    .page-info-banner { display:flex; align-items:center; background:#fff0f3; padding:15px 25px; border-radius:15px; margin-bottom:30px; border:1px solid #ffb7c5; }
    .info-icon { font-size:1.5rem; margin-right:15px; } .page-id { font-size:0.75rem; background:#ff7675; color:#fff; padding:3px 8px; border-radius:10px; margin-right:10px; }
    .page-title { font-family: 'Outfit', sans-serif; color: #ff7675; font-size: 1.8rem; margin:0 0 20px 0; border-bottom:2px dashed #ffb7c5; padding-bottom:10px; }
    .section-title { font-size:1.2rem; margin-bottom:15px; color:#333; border-left:4px solid #ff7675; padding-left:10px; }
    .status-active { color:#2ecc71; font-weight:bold; }
    .unread-badge { background:#e74c3c; color:#fff; font-size:0.75rem; padding:2px 8px; border-radius:10px; }
    .stat-card { text-align:center; padding:20px; border-top:4px solid #ff7675; }
    .stat-value { font-size:2rem; font-weight:bold; color:#ff7675; font-family:'Outfit', sans-serif; margin-bottom:5px; }
    .stat-label { font-size:0.9rem; color:#666; }
    .badge-pink { background:#fecfef; color:#ff7675; padding:3px 8px; border-radius:10px; font-weight:bold; } .badge-mint { background:#a8e6cf; color:#2d3436; padding:3px 8px; border-radius:10px; font-weight:bold; } .badge-orange { background:#ffeaa7; color:#e67e22; padding:3px 8px; border-radius:10px; font-weight:bold; } .badge-lavender { background:#e2d9f3; color:#6c5ce7; padding:3px 8px; border-radius:10px; font-weight:bold; }
    .grid-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap:20px; }
    .grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
    .btn-block { display:block; text-align:center; width:100%; box-sizing:border-box; }
    .btn-lg { font-size:1.2rem; padding:20px; text-decoration:none; display:flex; align-items:center; justify-content:center; }
    .btn-sm { padding:5px 15px; font-size:0.8rem; border-radius:15px; text-decoration:none; display:inline-block; }
    .btn-accent { background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%); color: #2d3436; font-weight:bold; border-radius:20px; box-shadow:0 4px 15px rgba(168,230,207,0.4); border:none; transition:0.3s; } .btn-accent:hover { transform: translateY(-2px); }
    @media (max-width: 768px) {
      .flex-wrap { flex-direction: column; }
      .grid-3, .grid-2 { grid-template-columns: 1fr; }
      .page-info-banner { flex-direction: column; text-align: center; }
      .info-icon { margin-right: 0; margin-bottom: 10px; }
      .flex-col > a > span:first-child { text-align: center; width: 100%; display:block; }
    }

/* From template_settings.php */
/* From template_settings.php (重複ブロックを整理し、新規の .gap-md のみ安全に定義維持しました) */
.gap-md { gap: 15px; }
    
    .card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); padding: 25px; border: 1px solid rgba(255,183,197,0.3); }
    .page-info-banner { display:flex; align-items:center; background:#fff0f3; padding:15px 25px; border-radius:15px; margin-bottom:30px; border:1px solid #ffb7c5; }
    .info-icon { font-size:1.5rem; margin-right:15px; } .page-id { font-size:0.75rem; background:#ff7675; color:#fff; padding:3px 8px; border-radius:10px; margin-right:10px; }
    .page-title { font-family: 'Outfit', sans-serif; color: #ff7675; font-size: 1.5rem; margin:0 0 20px 0; border-bottom:2px dashed #ffb7c5; padding-bottom:10px; }
    .section-title { font-size:1.1rem; margin-bottom:15px; color:#333; border-left:4px solid #ff7675; padding-left:10px; }
    .status-active { color:#2ecc71; font-weight:bold; }
    
    .btn-block { display:block; text-align:center; width:100%; box-sizing:border-box; }
    .btn-lg { font-size:1.1rem; padding:15px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; border:none; cursor:pointer;}
    .btn-sm { padding:8px 15px; font-size:0.85rem; border-radius:15px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; border:none; cursor:pointer;}
    .btn-accent { background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%); color: #2d3436; font-weight:bold; border-radius:20px; box-shadow:0 4px 15px rgba(168,230,207,0.4); border:none; transition:0.3s; } .btn-accent:hover { transform: translateY(-2px); }
    .btn-outline { background: transparent; border: 2px solid var(--color-accent); color: var(--color-accent); font-weight: bold; border-radius: 20px; transition: 0.3s;}
    .btn-outline:hover { background: var(--bg-section); }
    .btn-danger-outline { background: transparent; border: 1px solid var(--color-danger); color: var(--color-danger); border-radius: 10px; transition: 0.3s;}
    .btn-danger-outline:hover { background: #ffeaa7; }

    /* Tabs */
    .tabs-header { display: flex; gap: 10px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 5px; }
    .tab-btn { padding: 10px 20px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 15px; cursor: pointer; font-weight: bold; color: #555; white-space: nowrap; transition: 0.2s;}
    .tab-btn.active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); box-shadow: 0 4px 10px rgba(255,118,117,0.3); }

    /* Form Elements */
    .form-group { margin-bottom: 20px; }
    .form-label { display: block; font-size: 0.85rem; font-weight: bold; color: #555; margin-bottom: 8px; }
    .form-input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 10px; font-size: 1rem; box-sizing: border-box; outline: none; transition: 0.2s; background:#fdfdfd;}
    .form-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(255,118,117,0.2); }
    
    .option-list { border: 1px solid var(--border-color); border-radius: 15px; overflow: hidden; background: #fff;}
    .option-item { display: flex; align-items: center; gap: 10px; padding: 15px; border-bottom: 1px solid var(--border-color); background: #fafafa;}
    .option-item:last-child { border-bottom: none; }
    .drag-handle { cursor: grab; color: #ccc; font-size: 1.2rem; padding: 0 5px; }
    
    .toast { position: fixed; bottom: 30px; right: 30px; background: rgba(46, 204, 113, 0.9); color: #fff; padding: 15px 25px; border-radius: 15px; font-weight: bold; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transform: translateY(100px); opacity: 0; transition: 0.3s; z-index: 1000;}
    .toast.show { transform: translateY(0); opacity: 1; }

    @media (max-width: 768px) {
      .flex-wrap { flex-direction: column; }
      .page-info-banner { flex-direction: column; text-align: center; }
      .info-icon { margin-right: 0; margin-bottom: 10px; }
      .option-item { flex-direction: column; align-items: stretch; }
      .option-item .flex { width: 100%; }
    }

/* From profile.php */
.form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 5px; font-weight: 600; color: var(--text-dark); }
        .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #ddd; outline: none; background: rgba(255,255,255,0.8); box-sizing: border-box; }
        .chat-bubble { padding: 15px; border-radius: 20px; margin-bottom: 15px; max-width: 70%; }
        .chat-left { background: #fff; align-self: flex-start; border-bottom-left-radius: 5px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
        .chat-right { background: var(--primary-pink); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
    /* From profile.php (L2-L9に定義済みの共通ユーティリティ重複ブロックを安全に整理・削除しました) */
    .card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); padding: 25px; border: 1px solid rgba(255,183,197,0.3); }
    .page-info-banner { display:flex; align-items:center; background:#fff0f3; padding:15px 25px; border-radius:15px; margin-bottom:30px; border:1px solid #ffb7c5; }
    .info-icon { font-size:1.5rem; margin-right:15px; } .page-id { font-size:0.75rem; background:#ff7675; color:#fff; padding:3px 8px; border-radius:10px; margin-right:10px; }
    .page-title { font-family: 'Outfit', sans-serif; color: #ff7675; font-size: 1.8rem; margin:0 0 20px 0; border-bottom:2px dashed #ffb7c5; padding-bottom:10px; }
    .section-title { font-size:1.2rem; margin-bottom:15px; color:#333; border-left:4px solid #ff7675; padding-left:10px; }
    .status-active { color:#2ecc71; font-weight:bold; }
    .unread-badge { background:#e74c3c; color:#fff; font-size:0.75rem; padding:2px 8px; border-radius:10px; }
    .stat-card { text-align:center; padding:20px; border-top:4px solid #ff7675; }
    .stat-value { font-size:2rem; font-weight:bold; color:#ff7675; font-family:'Outfit', sans-serif; margin-bottom:5px; }
    .stat-label { font-size:0.9rem; color:#666; }
    .badge-pink { background:#fecfef; color:#ff7675; padding:3px 8px; border-radius:10px; font-weight:bold; } .badge-mint { background:#a8e6cf; color:#2d3436; padding:3px 8px; border-radius:10px; font-weight:bold; } .badge-orange { background:#ffeaa7; color:#e67e22; padding:3px 8px; border-radius:10px; font-weight:bold; } .badge-lavender { background:#e2d9f3; color:#6c5ce7; padding:3px 8px; border-radius:10px; font-weight:bold; }
    .grid-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap:20px; }
    .grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
    .btn-block { display:block; text-align:center; width:100%; box-sizing:border-box; }
    .btn-lg { font-size:1.2rem; padding:20px; text-decoration:none; display:flex; align-items:center; justify-content:center; }
    .btn-sm { padding:5px 15px; font-size:0.8rem; border-radius:15px; text-decoration:none; display:inline-block; }
    .btn-accent { background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%); color: #2d3436; font-weight:bold; border-radius:20px; box-shadow:0 4px 15px rgba(168,230,207,0.4); border:none; transition:0.3s; } .btn-accent:hover { transform: translateY(-2px); }
    @media (max-width: 768px) {
      .flex-wrap { flex-direction: column; }
      .grid-3, .grid-2 { grid-template-columns: 1fr; }
      .page-info-banner { flex-direction: column; text-align: center; }
      .info-icon { margin-right: 0; margin-bottom: 10px; }
      .flex-col > a > span:first-child { text-align: center; width: 100%; display:block; }
    }

/* From manual.php */
/* ダッシュボード共通のユーティリティクラス */
    /* From manual.php (L2-L9に定義済みの共通ユーティリティ重複ブロックを安全に整理・削除しました) */
    
    .card, .glass-card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); padding: 25px; border: 1px solid rgba(255,183,197,0.3); }
    .page-title { font-family: 'Outfit', sans-serif; color: #ff7675; font-size: 1.8rem; margin:0 0 20px 0; border-bottom:2px dashed #ffb7c5; padding-bottom:10px; }
    
    @media (max-width: 768px) {
      .flex-wrap { flex-direction: column; }
    }

/* --- Blog List & Post Edit Page (Seq 52) Semantic Classes --- */
.btn-new-post {
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 20px;
  text-decoration: none;
}
.blog-card-padding {
  padding: 20px;
}
.blog-thumb-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.blog-body-text {
  line-height: 1.5;
}
.btn-blog-action {
  padding: 5px 15px;
  border-radius: 20px;
  text-decoration: none;
}
.btn-blog-delete {
  padding: 5px 15px;
  border-color: #ff7675;
  border-radius: 20px;
}
.badge-public {
  background: #e3f2fd;
  color: #1976d2;
  border: none;
}
.layout-main-col-narrow {
  flex: 2;
  min-width: 300px;
}
.blog-post-card {
  max-width: 800px;
  margin: 0 auto;
}
.blog-post-intro-text {
  color: var(--text-light);
  margin-bottom: 20px;
}
.blog-post-limit-badge {
  margin-top: 5px;
  display: inline-block;
}
.blog-post-upload-text {
  margin: 0;
  font-weight: bold;
}
.blog-post-option-container {
  background: rgba(255, 255, 255, 0.8);
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #ddd;
  margin-top: 20px;
}
.blog-post-checkbox-label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.blog-post-checkbox {
  width: 20px;
  height: 20px;
}
.btn-blog-save {
  border-radius: 30px;
}

/* --- Seller Chat Page (Seq 53) Semantic Classes --- */
.chat-container {
  max-width: 800px;
}
.chat-card {
  display: flex;
  flex-direction: column;
  height: 60vh;
  padding: 25px;
}
.chat-header {
  border-bottom: 1px solid #ddd;
  padding-bottom: 15px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn-chat-back {
  font-size: 0.8rem;
  padding: 5px 15px;
  text-decoration: none;
}
.chat-user-avatar {
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.chat-user-name {
  margin: 0;
  font-size: 1.1rem;
  color: #333;
}
.chat-product-info {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.chat-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.chat-status-badge {
  font-size: 0.8rem;
  padding: 4px 10px;
}
.btn-block-user {
  font-size: 0.7rem;
  padding: 4px 10px;
  border-width: 1px;
}
.chat-history-area {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.4);
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 20px;
}
.chat-system-badge {
  font-size: 0.8rem;
  padding: 4px 12px;
  background: #fff0f3;
  color: #ff7675;
  border: 1px solid #ff7675;
}
.chat-msg-right-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  align-items: flex-end;
  margin-bottom: 15px;
}
.chat-msg-bubble {
  margin-bottom: 0;
}
.chat-msg-time {
  font-size: 0.7rem;
  color: #888;
  margin-top: 4px;
}
.chat-msg-left-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  align-items: flex-start;
  margin-bottom: 15px;
}
.chat-input-wrapper {
  display: flex;
  gap: 10px;
}
.btn-chat-media {
  padding: 10px 15px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  border: 1px solid #ddd;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-input-field {
  flex: 1;
  padding: 15px;
  border-radius: 30px;
  border: 1px solid #ddd;
  outline: none;
  background: rgba(255,255,255,0.8);
}
.btn-chat-send {
  width: auto;
  border-radius: 30px;
  padding: 10px 20px;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
  color: #fff;
  font-weight: bold;
}

/* --- Seller Chats Page (Seq 54) Semantic Classes --- */
.chats-main-col {
  flex: 2;
  min-width: 300px;
}
.chats-section-title {
  font-size: 1.5rem;
}
.chats-broadcast-card {
  padding: 0;
  overflow: hidden;
  border: 2px solid #ff7675;
}
.chats-broadcast-link {
  text-decoration: none;
  color: var(--text-primary);
  padding: 16px;
  background: #fff0f3;
  transition: 0.3s;
}
.chats-broadcast-icon {
  width: 50px;
  height: 50px;
  background: #ff7675;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 10px rgba(255,118,117,0.3);
}
.chats-broadcast-title {
  color: #ff7675;
}
.chats-text-color-primary {
  color: var(--text-primary);
}
.chats-admin-card {
  padding: 0;
  overflow: hidden;
  border: 2px solid #74b9ff;
}
.chats-admin-link {
  text-decoration: none;
  color: var(--text-primary);
  padding: 16px;
  background: #f0f8ff;
  transition: 0.3s;
}
.chats-admin-icon {
  width: 50px;
  height: 50px;
  background: #74b9ff;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 10px rgba(116,185,255,0.3);
}
.chats-admin-title {
  color: #74b9ff;
}
.chats-filter-buttons-wrapper {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.chats-filter-btn {
  padding: 8px 15px;
  font-size: 0.9rem;
}
.chats-list-card {
  padding: 0;
  overflow: hidden;
}
.chats-list-item-unread {
  text-decoration: none;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  padding: 16px;
  background: var(--bg-section);
}
.chats-avatar-wrapper {
  position: relative;
}
.chats-avatar-placeholder {
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chats-unread-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  background: var(--color-danger);
  border-radius: 50%;
  border: 2px solid var(--bg-section);
}
.chats-list-item-read {
  text-decoration: none;
  color: var(--text-primary);
  padding: 16px;
  opacity: 0.7;
}
.chats-avatar-read-placeholder {
  width: 50px;
  height: 50px;
  background: var(--bg-section);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Seller Dashboard Left Menu Component (Seq 55) Semantic Classes --- */
.menu-sidebar-container {
  flex: 1;
  min-width: 250px;
  max-width: 300px;
}
.menu-sidebar-card {
  padding: 0;
  overflow: hidden;
}
.menu-profile-header {
  background: var(--color-accent-light);
  padding: 24px;
  text-align: center;
}
.menu-avatar-wrapper {
  width: 80px;
  height: 80px;
  background: white;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  overflow: hidden;
}
.menu-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menu-list-wrapper {
  padding: 16px 0;
}
.menu-item-link {
  padding: 12px 24px;
  border-left: 3px solid transparent;
  color: var(--text-primary);
  text-decoration: none;
}
.menu-item-link.active {
  border-left-color: var(--color-accent);
  background: var(--bg-section);
  color: #4A8A6A;
  font-weight: bold;
}

/* --- Seller Common Settings Notice Component (Seq 56) Semantic Classes --- */
.notice-banner-caution {
  background: #fff8e1;
  border-color: #ffd54f;
}
.notice-badge-label {
  background: #ffca28;
  color: #333;
}

/* --- Seller Dashboard Page (Seq 57) Semantic Classes --- */
.dashboard-unread-card {
  border-top-color: var(--color-danger);
}
.btn-dashboard-action {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,118,117,0.3);
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border-radius: 20px;
  text-decoration: none;
  color: var(--text-primary);
  transition: 0.3s;
}
.btn-dashboard-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,118,117,0.15);
  background: #fff;
}
.dashboard-action-icon {
  font-size: 2rem;
  width: 50px;
  height: 50px;
  background: var(--bg-section);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dashboard-action-text-wrapper {
  text-align: left;
}
.dashboard-action-title {
  font-weight: bold;
  font-size: 1.1rem;
  color: #ff7675;
  margin-bottom: 5px;
}
.dashboard-action-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.dashboard-activity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-color);
}
.dashboard-activity-item-last {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}

/* --- Seller Finance Page (Seq 58) Semantic Classes --- */
.finance-card {
  max-width: 800px;
  margin: 0 auto;
}
.finance-amount-text {
  font-size: 4rem;
}
.finance-notice-box {
  border: 1px solid #ffb7c5;
  border-radius: 15px;
}
.btn-finance-request {
  padding: 15px 40px;
  background: linear-gradient(45deg, #a8e6cf, #dcedc1);
  color: #2d3436;
  box-shadow: none;
}
.finance-history-table {
  border-collapse: collapse;
}
.finance-revenue-text {
  color: #2ecc71;
}

/* --- Seller Manual Page (Seq 59) Semantic Classes --- */
.manual-header-border {
  border-bottom: 2px solid #ffb7c5;
}
.manual-warning-box {
  border-radius: 10px;
}

/* --- Seller Product Movie Register & Edit Page (Seq 60 & 61) Semantic Classes --- */
.product-movie-body {
  background: #fffbfa;
}
.product-movie-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}
.product-movie-back-btn-wrapper {
  margin-bottom: 20px;
}
.product-movie-card {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.product-movie-title {
  color: #a18cd1;
  margin-bottom: 10px;
}
.product-movie-warning {
  color: #e74c3c;
  font-weight: 600;
  margin-bottom: 30px;
  font-size: 0.9rem;
}
.product-movie-section {
  margin-bottom: 30px;
}
.product-movie-label {
  display: block;
  text-align: left;
  font-weight: 600;
  margin-bottom: 5px;
}
.product-movie-upload-cloud-icon {
  font-size: 4rem;
  margin-bottom: 10px;
}
.product-movie-upload-main-title {
  margin: 0;
}
.product-movie-upload-sub-title {
  color: var(--text-light);
  margin-top: 5px;
}
.product-movie-form-wrapper {
  text-align: left;
}
.product-movie-thumbnail-icon {
  font-size: 1.5rem;
}
.product-movie-thumbnail-text-wrapper {
  text-align: left;
  flex: 1;
}
.product-movie-thumbnail-title {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--text-dark);
}
.product-movie-thumbnail-desc {
  font-size: 0.75rem;
  color: var(--text-light);
}
.btn-movie-upload {
  width: 100%;
  margin-top: 20px;
}
.btn-movie-save {
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  border-radius: 15px;
}
.btn-movie-terminate {
  width: 100%;
  margin-top: 10px;
  padding: 15px;
  border-radius: 15px;
}

/* --- Seller Product Physical Register & Edit Page (Seq 62 & 63) Semantic Classes --- */
.product-physical-body {
  background: #fffbfa;
}
.product-physical-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}
.product-physical-back-btn-wrapper {
  margin-bottom: 20px;
}
.product-physical-card {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.product-physical-title {
  color: #a18cd1;
  margin-bottom: 10px;
}
.product-physical-warning {
  color: #e74c3c;
  font-weight: 600;
  margin-bottom: 30px;
  font-size: 0.9rem;
}
.product-physical-section {
  margin-bottom: 30px;
}
.product-physical-label {
  display: block;
  text-align: left;
  font-weight: 600;
  margin-bottom: 5px;
}
.product-physical-upload-cloud-icon {
  font-size: 4rem;
  margin-bottom: 10px;
}
.product-physical-upload-main-title {
  margin: 0;
}
.product-physical-upload-sub-title {
  color: var(--text-light);
  margin-top: 5px;
}
.product-physical-form-wrapper {
  text-align: left;
}
.product-physical-option-section {
  margin-top: 30px;
  text-align: left;
  border-top: 1px dashed #ffb7c5;
  padding-top: 20px;
}
.product-physical-option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.product-physical-option-title {
  margin: 0;
  color: #ff7675;
}
.btn-template-call {
  padding: 5px 15px;
  border-radius: 15px;
  font-size: 0.85rem;
}
.product-physical-option-desc {
  color: var(--text-light);
  font-size: 0.85rem;
  margin-bottom: 15px;
}
.product-physical-option-input-wrapper {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.product-physical-option-input-text {
  flex: 2;
}
.product-physical-option-input-price {
  flex: 1;
}
.btn-option-add {
  padding: 10px 20px;
  border-radius: 10px;
}
.btn-physical-upload {
  width: 100%;
  margin-top: 20px;
}
.btn-physical-save {
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  border-radius: 15px;
}
.btn-physical-terminate {
  width: 100%;
  margin-top: 10px;
  padding: 15px;
  border-radius: 15px;
}
.product-physical-upgrade-box {
  background: #fff0f3;
  border: 1px solid #ffb7c5;
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 30px;
  text-align: left;
}
.product-physical-upgrade-title {
  margin-top: 0;
  color: #ff7675;
}
.product-physical-upgrade-desc {
  margin-bottom: 15px;
  font-size: 0.9rem;
}
.btn-physical-upgrade {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 20px;
  text-decoration: none;
}

/* --- Seller Product Set Register Page (Seq 64) Semantic Classes --- */
.product-set-body {
  background: #fffbfa;
}
.product-set-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}
.product-set-back-btn-wrapper {
  margin-bottom: 20px;
}
.product-set-card {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.product-set-title {
  color: #a18cd1;
  margin-bottom: 10px;
}
.product-set-warning {
  color: #e74c3c;
  font-weight: 600;
  margin-bottom: 30px;
  font-size: 0.9rem;
}
.product-set-section {
  margin-bottom: 30px;
}
.product-set-label {
  display: block;
  text-align: left;
  font-weight: 600;
  margin-bottom: 5px;
}
.product-set-upload-cloud-icon {
  font-size: 4rem;
  margin-bottom: 10px;
}
.product-set-upload-main-title {
  margin: 0;
}
.product-set-upload-sub-title {
  color: var(--text-light);
  margin-top: 5px;
}
.product-set-form-wrapper {
  text-align: left;
}
.product-set-option-section {
  margin-top: 30px;
  text-align: left;
  border-top: 1px dashed #ffb7c5;
  padding-top: 20px;
}
.product-set-option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.product-set-option-title {
  margin: 0;
  color: #ff7675;
}
.product-set-option-desc {
  color: var(--text-light);
  font-size: 0.85rem;
  margin-bottom: 15px;
}
.product-set-option-input-wrapper {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.product-set-option-input-text {
  flex: 2;
}
.product-set-option-input-price {
  flex: 1;
}
.btn-set-upload {
  width: 100%;
  margin-top: 20px;
}

/* --- Seller Product Set Edit Page (Seq 65) Semantic Classes --- */
.btn-set-save {
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  border-radius: 15px;
}
.btn-set-terminate {
  width: 100%;
  margin-top: 10px;
  padding: 15px;
  border-radius: 15px;
}

/* --- Seller Products Page (Seq 66) Semantic Classes --- */
.product-card-icon-wrapper {
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.product-card-title {
  color: #2d3436;
}
.badge-physical-sold {
  background: #ffeaa7;
  color: #e67e22;
  border: 1px solid #e67e22;
}

/* --- Seller Profile Page (Seq 67) Semantic Classes --- */
.profile-bank-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.profile-document-upload-area {
  background: #fafafa;
  border: 2px dashed #ddd;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
}
.profile-document-upload-area:hover {
  border-color: var(--color-accent);
  background: var(--bg-section);
}
.profile-document-upload-icon {
  font-size: 2rem;
  color: #888;
}
.btn-profile-submit {
  border-radius: 15px;
}

/* --- Seller Template Settings Page (Seq 68) Semantic Classes --- */
.btn-option-delete {
  /* 削除ボタンの調整 */
}


