/* ===============================
 全体
=============================== */
* { box-sizing: border-box; }

html, body {
margin: 0;
padding: 0;
font-family: 'Noto Sans', system-ui, sans-serif;
background: #f7f7f5;
color: #111;
overflow-x: hidden;
}

/* ===============================
 ヘッダー（高さ10%）
=============================== */
.header {
display: flex;
align-items: center;
justify-content: space-between;
height: 10vh;
padding: 0 24px;
border-bottom: 1px solid #e8e8e6;
background: #ffffff;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10000;
box-shadow: 0 1px 0 #e8e8e6, 0 2px 8px rgba(0,0,0,0.06);
}

#site-title {
margin: 0;
font-size: 20px;
color: #111;
user-select: none;
}

/* PC検索バー */
.pc-search {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 999px;
background: #f2f2f0;
border: 1px solid #e2e2e0;
}

.pc-search input {
border: none;
outline: none;
background: transparent;
color: #111;
font-size: 13px;
min-width: 180px;
}

#search-clear {
display: none;
cursor: pointer;
font-size: 18px;
color: #666;
padding: 0 6px;
}

#search-clear:hover { color: #000; }

.search-icon {
color: #666;
font-size: 16px;
}

/* ===============================
 ハンバーガー
=============================== */
.mobile-menu-btn {
display: none;
position: fixed;
top: 14px;
right: 14px;
width: 28px;
height: 22px;
z-index: 20000;
cursor: pointer;
}

.mobile-menu-btn span {
display: block;
height: 3px;
background: #111;
margin-bottom: 5px;
border-radius: 3px;
}

/* スマホメニュー */
.mobile-menu-panel {
display: none;
position: fixed;
top: -100%;
left: 0;
width: 100%;
background: #ffffff;
padding: 20px;
z-index: 15000;
transition: top 0.3s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.mobile-menu-panel.open {
top: 10vh;
}

.mobile-menu-panel .nav-item {
padding: 16px;
font-size: 16px;
color: #111;
}

.mobile-menu-panel .consult-btn {
margin-top: 20px;
width: 100%;
}

/* スマホ検索バー */
.mobile-search-area {
margin-top: 20px;
}

.mobile-search-box {
display: flex;
align-items: center;
gap: 8px;
background: #f2f2f0;
border: 1px solid #e2e2e0;
padding: 8px 12px;
border-radius: 999px;
}

#mobile-search-input {
flex: 1;
border: none;
outline: none;
background: transparent;
color: #111;
font-size: 14px;
}

#mobile-search-btn {
background: #1a1a1a;
color: #fff;
border: none;
padding: 6px 12px;
border-radius: 999px;
cursor: pointer;
font-size: 13px;
}

/* ===============================
 レイアウト
=============================== */
.layout {
display: flex;
min-height: 90vh;
padding-top: 10vh;
}

/* ===============================
 PCサイドバー
=============================== */
.sidebar {
width: 220px;
background: #ffffff;
border-right: 1px solid #e8e8e6;
display: flex;
flex-direction: column;
padding: 10px 0 40px 0px;
position: fixed;
top: 10vh;
bottom: 0;
left: 0;
z-index: 9000;
box-shadow: 1px 0 0 #f0f0ee;
}

.nav-item {
display: block;
width: 100%;
padding: 14px 28px;
background: transparent;
color: #555;
font-size: 14px;
text-decoration: none;
cursor: pointer;
border-left: 2px solid transparent;
position: relative;
overflow: hidden;
transition: color 0.2s ease;
}

.nav-item::after {
content: "";
position: absolute;
top: 50%;
right: 28px;
width: 0%;
height: 1px;
background: #ffffff;
transition: width 0.2s ease 0.15s;
z-index: 3;
transform: translateY(-50%);
}

.nav-item:hover::after {
width: calc(100% - 170px);
}

.nav-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: #1a1a1a;
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
}

.nav-item:hover::before {
width: 100%;
}

.nav-item:hover {
color: #fff;
}

.nav-item span,
.nav-item {
position: relative;
z-index: 1;
}

.sidebar-bottom { margin-top: auto; }

.consult-btn {
display: block;
text-decoration: none;
text-align: center;
width: 90%;
padding: 10px 12px;
border-radius: 6px;
background: #8b1e3f;
color: #fff;
border: none;
font-size: 13px;
font-weight: 600;
cursor: pointer;
margin: 0 auto;
transition: background 0.15s ease;
}

.consult-btn:hover { background: #7a1937; }

#admin-panel {
font-size: 12px;
color: #666;
}

/* ===============================
 メイン
=============================== */
.main {
flex: 1;
padding: 24px;
margin-left: 220px;
}

.view.hidden { display: none; }

/* ===============================
 画像グリッド（Masonry）
=============================== */
.works-grid {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.work-card {
break-inside: avoid;
margin-bottom: 16px;
background: #ffffff;
border-radius: 10px;
border: 1px solid #e8e8e6;
cursor: pointer;
position: relative;
animation: fadeIn 0.8s ease;
overflow: visible;
box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.work-card:hover {
box-shadow: 0 6px 20px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
transform: translateY(-2px);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.work-image {
width: 100%;
height: auto;
display: block;
background: #eee;
border-radius: 10px 10px 0 0;
}

/* タイトル（ホバー時のみ） */
.work-title {
position: absolute;
bottom: 8px;
left: 12px;
margin: 0;
font-weight: 600;
font-size: 14px;
color: #fff;
opacity: 0;
z-index: 2;
transition: opacity 0.2s ease;
}

/* 黒グラデ */
.work-card::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
opacity: 0;
transition: opacity 0.2s ease;
z-index: 1;
border-radius: 0 0 10px 10px;
}

.work-card:hover::after,
.work-card:hover .work-title {
opacity: 1;
}

/* ===============================
 ★ 管理者モード：ホバー演出を透明化
=============================== */
body.admin-mode .work-card::after {
opacity: 0 !important;
}

body.admin-mode .work-title {
opacity: 0 !important;
}

/* ===============================
 管理者モード
=============================== */
.admin-only { display: none; }
body.admin-mode .admin-only { display: block; }

/* 編集・削除ボタンのクリック優先度UP */
.work-actions {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 9999;
}

.edit-button,
.delete-button {
position: relative;
z-index: 10000;
padding: 6px 10px;
font-size: 12px;
border-radius: 4px;
border: none;
cursor: pointer;
background: #fff;
}

/* ===============================
 ドロップゾーン
=============================== */
.upload-dropzone {
margin-bottom: 24px;
padding: 24px;
border: 2px dashed #ccc;
border-radius: 10px;
background: #ffffff;
color: #888;
text-align: center;
font-size: 14px;
}

.upload-dropzone.dragover {
border-color: #111;
background: #f7f7f5;
}

/* ===============================
 viewer（PC）
=============================== */
.image-viewer {
position: fixed;
top: 10vh;
left: 0;
width: 100%;
height: 90vh;
display: flex;
background: rgba(0,0,0,0.4);
transform: translateY(20px);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
z-index: 9600;
}

.image-viewer.open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

.viewer-left {
width: 80%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin: auto 0;
}

.viewer-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
margin: auto;
display: block;
}

.viewer-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: rgba(0,0,0,0.35);
color: #fff;
font-size: 28px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
z-index: 9700;
}

.viewer-arrow.left { left: 20px; }
.viewer-arrow.right { right: 20px; }

.viewer-close-btn {
display: none;
}

/* viewer-right（PC） */
.viewer-right {
width: 20%;
height: 100%;
background: #ffffff;
border-left: 1px solid #e8e8e6;
padding: 20px;
overflow-y: auto;
box-shadow: -4px 0 20px rgba(0,0,0,0.06);
}

/* ===============================
 viewer（スマホ）
=============================== */
@media (max-width: 768px) {

.sidebar { display: none; }

.mobile-menu-btn { display: block; }
.mobile-menu-panel { display: block; }

.pc-search { display: none; }

.main {
margin-left: 0;
padding: 16px;
}

.works-grid {
  display: flex;
  gap: 8px;
}

.image-viewer {
position: fixed;
top: 10vh;
left: 0;
width: 100%;
height: calc(100dvh - 10vh);
display: flex;
flex-direction: column;
}

.viewer-close-btn {
display: block;
position: absolute;
top: 16px;
right: 16px;
z-index: 9999;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(4px);
color: #fff;
border: none;
width: 42px;
height: 42px;
border-radius: 50%;
font-size: 22px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
transition: background 0.2s ease, transform 0.15s ease;
}

.viewer-close-btn:active {
transform: scale(0.92);
background: rgba(0,0,0,0.75);
}

.viewer-left {
width: 100%;
height: 70%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin: 0;
}

.viewer-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
padding: 10px;
}

.viewer-right {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 30%;
background: #ffffff;
border-radius: 16px 16px 0 0;
padding: 16px;
overflow: hidden;
transition: height 0.3s ease;
box-shadow: 0 -6px 20px rgba(0,0,0,0.08);
border-top: 1px solid #e8e8e6;
}

.viewer-right.active {
height: 60%;
overflow-y: auto;
}

.viewer-drag-handle {
width: 50px;
height: 6px;
background: #ccc;
border-radius: 999px;
margin: 0 auto 12px;
touch-action: none;
}
}

/* ===============================
 モーダル
=============================== */
.modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
display: none;
align-items: center;
justify-content: center;
z-index: 20000;
}

.modal.open {
display: flex;
}

.modal-content {
width: 70%;
height: 70%;
background: #fff;
color: #111;
border-radius: 10px;
padding: 20px;
display: flex;
flex-direction: column;
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

#modal-textarea {
flex: 1;
width: 100%;
resize: none;
font-size: 14px;
padding: 10px;
border: 1px solid #e2e2e0;
border-radius: 6px;
}

.modal-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 12px;
}

.modal-btn {
padding: 8px 16px;
border-radius: 6px;
border: none;
cursor: pointer;
font-size: 14px;
}

.modal-btn.save {
background: #1a1a1a;
color: #fff;
}

.modal-btn.cancel {
background: #f2f2f0;
color: #555;
}

/* ===============================
 ステップ式アップロードモーダル
=============================== */
#upload-step-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
display: none;
align-items: center;
justify-content: center;
z-index: 30000;
}

#upload-step-modal.open {
display: flex;
}

.upload-step-content {
width: 480px;
background: #fff;
color: #111;
padding: 24px;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 16px;
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

#upload-step-title {
margin: 0;
font-size: 16px;
}

#upload-step-input,
#upload-step-month,
#upload-step-textarea {
width: 100%;
font-size: 14px;
padding: 10px;
border: 1px solid #e2e2e0;
border-radius: 6px;
}

#upload-step-textarea {
height: 120px;
resize: none;
}

#upload-step-ok {
align-self: flex-end;
padding: 10px 16px;
background: #1a1a1a;
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
}

/* ===============================
 スクロールバー
=============================== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 4px;
}

.upload-step-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

#upload-step-back,
#upload-step-ok {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

#upload-step-back {
  background: #f2f2f0;
  color: #555;
}

#upload-step-ok {
  background: #1a1a1a;
  color: #fff;
}

.viewer-admin-actions {
  margin-top: 20px;
  gap: 10px;
}

body.admin-mode .viewer-admin-actions {
  display: flex;
}

#viewer-edit-work,
#viewer-delete-work {
  flex: 1;
  padding: 10px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

#viewer-edit-work {
  background: #1a1a1a;
  color: #fff;
}

#viewer-delete-work {
  background: #d93025;
  color: #fff;
}

/* ===============================
 アバウト/制作について
=============================== */
#about-content,
#info-content {
  animation: fadeIn 0.8s ease;
}

/* ===============================
 ローディングアニメーション
=============================== */
#loading-overlay {
  position: fixed;
  inset: 0;
  background: #f7f7f5;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.4s ease;
}

#loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e2e2e0;
  border-top-color: #111;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}