/* =====================================================
   佐倉ミント 公式サイト - works.css
   works.html 専用スタイル（STEP 4）
   common.css の後に読み込む
   ※ send_mail.php / phpmailer は一切参照しない
===================================================== */

/* =====================================================
   PAGE HEADER
===================================================== */
.works-page-header {
  padding: 5rem 0 3rem;
  background: linear-gradient(160deg, var(--sakura-pale) 0%, var(--mint-pale) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.works-page-header::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 20% 50%, rgba(212,95,138,.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 80% 50%, rgba(90,171,143,.08) 0%, transparent 60%);
}
.works-page-header .container { position: relative; z-index: 1; }
.works-page-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: .5rem;
  line-height: 1.15;
}
.works-page-title span {
  color: var(--sakura);
}
.works-page-desc {
  font-size: 1rem;
  color: var(--text-sub);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}
.works-count-badges {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center;
}
.works-count-badge {
  font-size: .75rem; font-weight: 700;
  padding: .3rem .85rem;
  border-radius: 99px;
  border: 1.5px solid;
}
.badge--3d    { color: var(--mint-dark);  border-color: var(--mint-light);   background: var(--mint-pale); }
.badge--l2d   { color: var(--sakura);     border-color: var(--sakura-light); background: var(--sakura-pale); }
.badge--illus { color: var(--brown);      border-color: #d0b8ae;             background: #fdf6f2; }
.badge--anim  { color: var(--sakura-dark);border-color: var(--sakura-light); background: var(--sakura-pale); }
.badge--goods { color: var(--mint-dark);  border-color: var(--mint-light);   background: var(--mint-pale); }
.badge--pr    { color: #7a5000;           border-color: #f5c878;             background: #fffbee; }

/* =====================================================
   FILTER BAR
===================================================== */
.works-filter-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
  background: rgba(255,249,245,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: .9rem 0;
}
.works-filter-inner {
  display: flex;
  align-items: center;
  gap: .4rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: .1rem .05rem;
}
.works-filter-inner::-webkit-scrollbar { display: none; }

.filter-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: 99px;
  background: var(--white);
  color: var(--text-sub);
  font-family: var(--font);
  font-size: .82rem; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .2s ease;
}
.filter-btn:hover {
  border-color: var(--sakura-light);
  color: var(--sakura);
  background: var(--sakura-pale);
}
.filter-btn.active {
  background: var(--sakura);
  border-color: var(--sakura);
  color: var(--white);
  box-shadow: 0 2px 10px rgba(212,95,138,.3);
}
.filter-btn .filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 99px;
  font-size: .68rem; font-weight: 900;
  background: rgba(0,0,0,.08);
  color: inherit;
  transition: background .2s;
}
.filter-btn.active .filter-count {
  background: rgba(255,255,255,.25);
}

/* =====================================================
   GALLERY SECTION
===================================================== */
.works-gallery-section {
  padding: 3rem 0 5rem;
}
.works-gallery-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: .5rem;
}
.works-showing-count {
  font-size: .85rem; color: var(--text-muted); font-weight: 500;
}
.works-showing-count strong { color: var(--text-main); font-weight: 700; }

/* ギャラリーグリッド */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* 作品カード */
.work-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sakura-pale);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, opacity .3s ease;
  aspect-ratio: 3 / 4;
  display: block;
}
.work-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}
.work-item.hidden {
  display: none;
}
.work-item.filtering-out {
  opacity: 0;
  transform: scale(.95);
}
.work-item.filtering-in {
  animation: filterIn .35s ease both;
}
@keyframes filterIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* カード内の画像 */
.work-item-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  transition: transform .35s ease;
  display: block;
  /* 右クリック・ドラッグ禁止はJSで制御 */
  pointer-events: none; /* 画像自体のイベントをOFF、カードがイベント受け取る */
  user-select: none;
  -webkit-user-drag: none;
}
.work-item:hover .work-item-img { transform: scale(1.06); }

/* プレースホルダー（画像なし時） */
.work-item-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .5rem;
  color: var(--sakura);
  font-size: .78rem; font-weight: 700;
  text-align: center; padding: 1rem;
  background: linear-gradient(160deg, var(--sakura-pale), var(--mint-pale));
}
.work-item-placeholder svg { opacity: .35; width: 40px; height: 40px; }

/* カテゴリバッジ（左上） */
.work-item-badge {
  position: absolute; top: .75rem; left: .75rem; z-index: 2;
  font-size: .66rem; font-weight: 700; letter-spacing: .05em;
  padding: .2rem .65rem;
  border-radius: 99px;
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.work-item-badge--3d    { background: rgba(90,171,143,.9);  color: #fff; }
.work-item-badge--live2d{ background: rgba(212,95,138,.9);  color: #fff; }
.work-item-badge--illustration { background: rgba(92,58,46,.85); color: #fff; }
.work-item-badge--animation    { background: rgba(160,48,96,.9);  color: #fff; }
.work-item-badge--goods { background: rgba(45,122,97,.9);   color: #fff; }
.work-item-badge--pr    { background: rgba(186,117,23,.9);  color: #fff; }

/* カードオーバーレイ */
.work-item-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to top,
    rgba(45,26,26,.92) 0%,
    rgba(45,26,26,.5)  40%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity .3s ease;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.2rem;
  pointer-events: none;
}
.work-item:hover .work-item-overlay { opacity: 1; }
.work-item-overlay-cat   { font-size: .68rem; font-weight: 700; color: var(--sakura-light); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .3rem; }
.work-item-overlay-title { font-size: .95rem; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: .25rem; }
.work-item-overlay-meta  { font-size: .72rem; color: rgba(255,255,255,.7); display: flex; gap: .5rem; flex-wrap: wrap; }

/* 拡大アイコン（右下） */
.work-item-zoom {
  position: absolute; bottom: .75rem; right: .75rem; z-index: 2;
  width: 32px; height: 32px;
  background: rgba(255,255,255,.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.work-item:hover .work-item-zoom { opacity: 1; }
.work-item-zoom svg { width: 16px; height: 16px; }

/* 空状態 */
.works-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 0;
  color: var(--text-muted);
}
.works-empty svg { width: 48px; height: 48px; opacity: .3; margin: 0 auto 1rem; }
.works-empty h3  { font-size: 1.2rem; font-weight: 700; color: var(--text-sub); margin-bottom: .5rem; }

/* =====================================================
   MODAL
===================================================== */
.works-modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 10, 10, .85);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.works-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.works-modal {
  position: relative;
  background: var(--white);
  /* overflow:hidden を削除 → 子パネル側で角丸+クリッピングを管理 */
  border-radius: var(--radius-lg);
  overflow: visible;
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  display: grid;
  grid-template-columns: 1fr 360px;
  box-shadow: 0 24px 80px rgba(0,0,0,.4);
  transform: scale(.94) translateY(16px);
  transition: transform .3s ease;
}
.works-modal-backdrop.open .works-modal {
  transform: scale(1) translateY(0);
}




/* 左右矢印 */
.works-modal-arrow {
  position: absolute; top: 50%; z-index: 20;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.25);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-family: var(--font);
  transition: background .2s;
}
.works-modal-arrow:hover { background: rgba(255,255,255,.3); }
.works-modal-arrow svg  { width: 20px; height: 20px; }
.works-modal-arrow--prev { left: .75rem; }
.works-modal-arrow--next { right: .75rem; }
.works-modal-arrow:disabled,
.works-modal-arrow[disabled] {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}

/* 画像カウンター */
.works-modal-counter {
  position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%);
  z-index: 20;
  font-size: .72rem; font-weight: 700;
  color: rgba(255,255,255,.7);
  background: rgba(0,0,0,.4);
  padding: .25rem .7rem;
  border-radius: 99px;
  backdrop-filter: blur(4px);
}

/* 情報パネル */
.works-modal-info-panel {
  display: flex; flex-direction: column;
  /* overflow:hidden が .works-modal から外れたため、ここで明示的にスクロール確保 */
  overflow-y: auto;
  max-height: 90vh;
  padding: 2rem 1.75rem;
  background: var(--white);
  /* PC: モーダル右側の角丸を担当 */
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.works-modal-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 30;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
  font-family: var(--font);
}
.works-modal-close:hover { background: rgba(0,0,0,.75); }
.works-modal-close svg { width: 18px; height: 18px; }

.works-modal-cat-badge {
  display: inline-block;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  padding: .25rem .75rem;
  border-radius: 99px;
  margin-bottom: 1rem;
}
.works-modal-cat-badge--3d    { background: var(--mint-pale);   color: var(--mint-dark); }
.works-modal-cat-badge--live2d{ background: var(--sakura-pale); color: var(--sakura); }
.works-modal-cat-badge--illustration { background: #fdf6f2; color: var(--brown); }
.works-modal-cat-badge--animation    { background: var(--sakura-pale); color: var(--sakura-dark); }
.works-modal-cat-badge--goods { background: var(--mint-pale); color: var(--mint-dark); }
.works-modal-cat-badge--pr    { background: #fffbee; color: #7a5000; }

.works-modal-title {
  font-size: 1.3rem; font-weight: 900;
  color: var(--text-main);
  line-height: 1.3; margin-bottom: 1.2rem;
}
.works-modal-meta {
  display: flex; flex-direction: column; gap: .6rem;
  margin-bottom: 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--border);
}
.works-modal-meta-row {
  display: flex; gap: .75rem; align-items: baseline;
  font-size: .85rem;
}
.works-modal-meta-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
  width: 64px; flex-shrink: 0;
}
.works-modal-meta-value { color: var(--text-main); font-weight: 500; }

.works-modal-desc {
  font-size: .9rem; color: var(--text-sub);
  line-height: 1.8; margin-bottom: 1.5rem; flex: 1;
}
.works-modal-actions {
  display: flex; flex-direction: column; gap: .6rem;
  margin-top: auto;
}

/* 画像保護注記（モーダル内） */
.works-modal-protect-note {
  font-size: .68rem;
  color: var(--text-muted);
  line-height: 1.5;
  padding: .6rem .8rem;
  background: var(--sakura-pale);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--sakura-light);
  margin-top: .75rem;
}

/* =====================================================
   ページ下部 保護ポリシー注記
===================================================== */
.works-protect-notice {
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--border);
}
.works-protect-notice-inner {
  display: flex; align-items: flex-start; gap: .75rem;
  background: var(--sakura-pale);
  border: 1px solid var(--sakura-light);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: .8rem; color: var(--text-sub); line-height: 1.7;
}
.works-protect-notice-inner svg {
  width: 18px; height: 18px;
  color: var(--sakura); flex-shrink: 0; margin-top: .1rem;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 900px) {
  .works-modal {
    grid-template-columns: 1fr;
    max-height: 92vh;
  }
  /* 縦積み時: 上側が画像パネル → 上角丸、下側が情報パネル → 下角丸 */
  .works-modal-image-panel {
    min-height: 200px;
    max-height: 45vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .works-modal-img { max-height: 42vh; }
  .works-modal-info-panel {
    padding: 1.5rem;
    /* 縦積み時はモーダル残り高さ内でスクロール */
    max-height: 52vh;
    overflow-y: auto;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
}

@media (max-width: 768px) {
  .works-page-header { padding: 4rem 0 2.5rem; }
  .works-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .works-modal-close { top: .5rem; right: .5rem; }
  .works-modal-arrow--prev { left: .35rem; }
  .works-modal-arrow--next { right: .35rem; }
}

@media (max-width: 480px) {
  .works-grid { grid-template-columns: 1fr; }
  .works-modal-info-panel { padding: 1.2rem; }
}

/* =====================================================
   STEP 8 追加: CSV読み込み・ローディング・エラー
===================================================== */
.works-loading {
  display: flex; justify-content: center; align-items: center;
  min-height: 280px;
}
.works-loading-inner {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.works-loading-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--sakura);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.works-loading-text { font-size: .88rem; color: var(--text-muted); font-weight: 500; }

.works-error {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .75rem; padding: 4rem 0;
  color: var(--text-muted); text-align: center;
}
.works-error svg { width: 40px; height: 40px; opacity: .4; }
.works-error p   { font-size: .9rem; }

/* =====================================================
   STEP 8 追加: モーダル画像サイズ追従
===================================================== */

/* 画像パネルは flex でセンタリング。固定aspect-ratioを廃止 */
.works-modal-image-panel {
  position: relative;
  background: #1a0f0f;
  display: flex; align-items: center; justify-content: center;
  min-height: 300px;
  overflow: hidden;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* 画像・保護レイヤー・透かしのラッパー */
.works-modal-img-wrap {
  position: relative;
  display: inline-flex; /* 子要素の自然サイズに追従 */
  align-items: center; justify-content: center;
  /* JS が width/height を動的にセットする */
}
.works-modal-img {
  display: block;
  max-width: 100%; max-height: 75vh;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none; /* 保護レイヤーがイベントを受け取る */
}

/* 透明保護レイヤー（画像サイズに追従） */
.works-modal-protect-layer {
  position: absolute;
  /* top/left/width/height は JS が img.getBoundingClientRect() から計算してセット */
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 10;
  background: transparent;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

/* =====================================================
   STEP 8 追加: 透かしレイヤー
===================================================== */
.works-modal-watermark {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 9;
  pointer-events: none;
  overflow: hidden;
  user-select: none;
}
/* JS が .watermark-tile を複数生成してタイル状に配置する */
.watermark-tile {
  position: absolute;
  transform: rotate(-45deg);
  white-space: nowrap;
  font-weight: 900;
  font-family: var(--font);
  color: #fff;
  letter-spacing: .25em;
  user-select: none;
  pointer-events: none;
  /* opacity / font-size は JS が CSV の値から設定する */
}

/* =====================================================
   STEP 8 追加: 関連画像インジケーター
===================================================== */
.modal-indicator-wrap {
  border-bottom: 1px solid var(--border);
  padding: .5rem 0 .9rem;
  margin-bottom: .9rem;
}
.modal-indicator {
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: .1rem .05rem;
}
.modal-indicator::-webkit-scrollbar { display: none; }

.modal-indicator-thumb {
  width: 54px; height: 54px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  cursor: pointer;
  opacity: .55;
  border: 2px solid transparent;
  flex-shrink: 0;
  transition: opacity .2s, border-color .2s;
  user-select: none;
  -webkit-user-drag: none;
}
.modal-indicator-thumb:hover  { opacity: .85; }
.modal-indicator-thumb.active {
  opacity: 1;
  border-color: var(--sakura);
  box-shadow: 0 0 0 1px var(--sakura-light);
}

/* =====================================================
   STEP 8 追加: レスポンシブ調整（インジケーター）
===================================================== */
@media (max-width: 900px) {
  .modal-indicator-wrap { padding: .4rem 0 .7rem; }
  .modal-indicator-thumb { width: 46px; height: 46px; }
}
@media (max-width: 480px) {
  .modal-indicator-thumb { width: 40px; height: 40px; }
  .watermark-tile { letter-spacing: .1em; }
}

/* =====================================================
   Excel/CSV管理版 追加: ラベルバッジ
   label_new / label_hot / label_setting
===================================================== */
.work-label {
  position: absolute;
  top: .65rem; right: .65rem;
  z-index: 3;
  font-size: .64rem; font-weight: 700;
  padding: .18rem .6rem;
  border-radius: 99px;
  letter-spacing: .05em;
  pointer-events: none;
  line-height: 1.4;
}
/* 複数ラベルが重ならないよう縦に並べる */
.work-label + .work-label { top: auto; /* JS で動的配置 / CSSでは初期値 */ }

.work-label--new {
  background: var(--sakura);
  color: #fff;
  box-shadow: 0 1px 4px rgba(212,95,138,.4);
}
.work-label--hot {
  background: #e05c20;
  color: #fff;
  box-shadow: 0 1px 4px rgba(224,92,32,.4);
}
.work-label--setting {
  background: rgba(92,58,46,.75);
  color: #fff;
  backdrop-filter: blur(4px);
}