:root {
  --primary-color: #6c5ce7;
  --light-gray: #f0f2f5;
  --dark-gray: #333;
  --text-gray: #666;
  --card-bg: #ffffff;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
  background: var(--light-gray);
  color: var(--dark-gray);
  margin: 0;
}

header {
  background: var(--card-bg);
  padding: 15px 30px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}
.logo { margin: 0; font-size: 1.8em; color: var(--primary-color); }
.search-sort-container { display: flex; gap: 10px; }
#searchInput, #sortSelect { padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 1em; }
#searchInput { width: 250px; }
.tag-cloud { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-item { background-color: #eee; color: var(--text-gray); padding: 4px 10px; border-radius: 12px; font-size: 0.9em; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.tag-item:hover, .tag-item.active { background-color: var(--primary-color); color: white; }

main { padding: 30px; }
.gallery { column-count: 4; column-gap: 20px; }
.artwork { background: var(--card-bg); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; overflow: hidden; cursor: pointer; display: inline-block; width: 100%; margin-bottom: 20px; break-inside: avoid; }
.artwork:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.15); }
.artwork img { width: 100%; height: auto; display: block; background-color: #eee; }
.artwork .info { padding: 15px; }
.artwork .info .title { font-weight: bold; font-size: 1.0em; margin: 0 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artwork .info .tags { font-size: 0.8em; color: var(--text-gray); }
.no-results { width: 100%; text-align: center; font-size: 1.2em; color: var(--text-gray); padding: 50px 0; }

.modal { display: none; position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); justify-content: center; align-items: center; animation: fadeIn 0.3s ease; }
.modal.active { display: flex; }
.modal-content { position: relative; text-align: center; }
#modalImg { max-width: 90vw; max-height: 80vh; border-radius: 8px; box-shadow: 0 0 30px rgba(0,0,0,0.5); }
.modal-info { color: white; margin-top: 15px; }
#modalTitle { margin: 0 0 10px; font-size: 1.5em; }
.close-button { position: absolute; top: 20px; right: 35px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; transition: color 0.2s; }
.close-button:hover { color: #bbb; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

footer { text-align: center; padding: 20px; color: var(--text-gray); font-size: 0.9em; }

@media (max-width: 1200px) { .gallery { column-count: 3; } }
@media (max-width: 900px) { .gallery { column-count: 2; } }
@media (max-width: 600px) { .gallery { column-count: 1; } }
@media (max-width: 768px) { .header-container { flex-direction: column; align-items: flex-start; } .search-sort-container { width: 100%; } #searchInput { flex-grow: 1; } }