* {
   box-sizing: border-box;
 }

 html,
 body {
   margin: 0;
   padding: 0;
 }

 img {
   max-width: 100%;
   height: auto;
   display: block;
 }

 :root {
   --bg: #ffffff;
   /* 背景は白 */
   --fg: #3a0b1a;
   --muted: #a14a61;
   --primary: #e91e63;
   /* ピンク */
   --border: #f7c9d8;
   --card: #fff0f5;
   --radius: 14px;
   --w: 1080px;
 }


 body {
   font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", "游ゴシック体", "Meiryo", sans-serif;
   background: var(--bg);
   color: var(--fg);
 }

 a {
   color: var(--primary);
   text-decoration: none;
 }

 .wrap {
   max-width: var(--w);
   margin-inline: auto;
   padding: 10px 24px;
 }

 header.site-header {
   position: sticky;
   top: 0;
   backdrop-filter: blur(6px);
   background: color-mix(in oklab, var(--bg) 85%, transparent);
   border-bottom: 1px solid var(--border);
   z-index: 50;
 }

 .brand {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 700;
 }

 .brand .dot {
   width: 10px;
   height: 10px;
   background: var(--primary);
   border-radius: 50%;
   display: inline-block;
 }

 nav ul {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
 }

 nav a {
   border-radius: 999px;
 }

 nav a:hover {
   background: var(--card);
 }

 .hero {
   text-align: center;
   padding: 40px 0;
 }

 .hero h1 {
   font-size: clamp(28px, 4vw, 48px);
   line-height: 1.2;
   margin: 12px 0;
 }

 .hero p {
   color: var(--muted);
   margin: 0 0 0px;
 }

 p {
   margin: 0;
   font-size: 14px;
 }

 .btns {
   display: flex;
   justify-content: center;
   gap: 12px;
   flex-wrap: wrap;
 }

 .btn {
   display: inline-block;
   padding: 12px 18px;
   border-radius: 999px;
   border: 1px solid var(--border);
   transition: all 0.2s ease;
 }

 .btn.primary {
   background: var(--primary);
   color: #fff;
   border-color: transparent;
 }

 .btn.primary:hover {
   background: #ff5c8d;
 }

 section {
   scroll-margin-top: 72px;
 }

 .card {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 20px;
 }

 .features {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   gap: 16px;
 }

 .feature {
   grid-column: span 12;
 }

 @media (min-width: 550px) {
   .feature {
     grid-column: span 4;
   }
 }

 .footer {
   color: var(--muted);
   font-size: 14px;
   padding: 24px 0;
   text-align: center;
 }

 .muted {
   color: var(--muted);
 }

 .spacer {
   height: 8px;
 }

 h3 {
   margin: 0px;
   font-size: 16px;

 }




 .top-gallery {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 4px;
   max-width: 800px;
   margin: 0 auto;
 }

 .top-gallery img {
   width: 100%;
   height: auto;
 }

 .gallery {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2px;
   width: 100%;
   height: 100%;
   max-width: 540px;
 }

 .thumbnail img {
   width: 100%;
   height: auto;
   margin: 0 0 0 0;
   cursor: pointer;
 }

 /* モーダル背景 */
 .modal {
   opacity: 1;
   /* ← 表示非表示は opacity ではなく display で切り替える */
   pointer-events: auto;
   position: fixed;
   z-index: 10;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
   /* ← 背景即表示 */
   display: none;
   /* ← 初期状態は非表示 */
   align-items: center;
   justify-content: center;
 }

 .modal.show {
   display: flex;
   /* ← 表示時は即 flex */
 }

 /* モーダル本体 */
 .modal-content {
   background-color: #fff;
   padding: 20px;
   border: 1px solid #888;
   width: 90%;
   max-width: 540px;
   position: relative;
   transform: scale(1);
   opacity: 1;
 }




 .modal-content img {
   display: block;
   max-width: 100%;
   max-height: 80vh;
   height: auto;
   margin: 0 auto;
   object-fit: contain;
 }



 .modal.withAnimation .modal-content {
   transform: scale(0.95);
   opacity: 0;
   transition: transform 0.3s ease, opacity 0.3s ease;
 }

 .modal.withAnimation.show .modal-content {
   transform: scale(1);
   opacity: 1;
 }









 /* 投稿番号 */
 .modal-content .number {
   font-weight: bold;
   font-size: 1.2em;
   margin-top: 10px;
 }

 /* コメント */
 .modal-content .comment {
   margin-top: 5px;
   font-size: 0.95em;
   color: #666;
 }

 /* 閉じるボタン */
 .close {
   color: #aaa;
   position: absolute;
   top: 10px;
   right: 15px;
   font-size: 28px;
   font-weight: bold;
   cursor: pointer;
 }

 .close:hover,
 .close:focus {
   color: black;
 }




 /* =========================
   PCレイアウト（1024px～）
   ========================= */
 @media (min-width: 550px) {


   /* PCは5列レイアウトを維持 */
   .top-gallery {
     grid-template-columns: repeat(8, 1fr);
     gap: 6px;
     max-width: 1100px;
   }
 }



 /* ========= Tag Bar ========= */
 .tag-bar {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   align-items: center;
   margin: 8px auto 12px;
   max-width: 1100px;
 }

 .tag-chip {
   border: 1px solid #ccc;
   background: #fff;
   border-radius: 999px;
   padding: 6px 10px;
   font-size: .9rem;
   cursor: pointer;
 }

 .tag-chip.is-active {
   border-color: #333;
   background: #f2f2f2;
 }

 .tag-count {
   font-size: .8rem;
   opacity: .7;
   margin-left: 4px;
 }

 /* ========= Gallery ========= */
 .top-gallery {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 4px;
   max-width: 800px;
   margin: 0 auto;
 }

 /* 正方形サムネ（古いブラウザ対応のパディング法） */
 .thumbnail {
   position: relative;
   overflow: hidden;
 }

 .thumbnail::before {
   content: "";
   display: block;
   padding-top: 100%;
 }

 .thumbnail img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   cursor: pointer;
 }

 /* ========= Modal ========= */
 .modal {
   position: fixed;
   inset: 0;
   z-index: 9999;
   display: none;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, .8);
 }

 .modal.show {
   display: flex;
 }

 .modal-content {
   background: #fff;
   padding: 20px;
   border: 1px solid #888;
   width: 90%;
   max-width: 540px;
   position: relative;
 }

 .modal-content img {
   display: block;
   max-width: 100%;
   max-height: 80vh;
   height: auto;
   object-fit: contain;
   margin: 0 auto;
 }

 .close {
   color: #888;
   position: absolute;
   top: 10px;
   right: 15px;
   font-size: 28px;
   font-weight: bold;
   cursor: pointer;
 }

 .close:hover {
   color: #000;
 }

 /* モーダルのタグ */
 .modal-content .tags {
   margin-top: 8px;
 }

 .tag-in-modal {
   margin-right: 6px;
   margin-bottom: 6px;
 }

 /* ========= Empty State ========= */
 .empty-state {
   max-width: 520px;
   margin: 24px auto;
   padding: 24px 16px;
   text-align: center;
   background: rgba(255, 255, 255, .6);
   border: 1px dashed #bbb;
   border-radius: 12px;
 }

 .empty-state h3 {
   margin: 8px 0 4px;
   font-size: 1.1rem;
 }

 .empty-state p {
   margin: 0;
   color: #666;
 }

 .empty-illust {
   width: 96px;
   height: 96px;
   margin: 0 auto 8px;
   background: linear-gradient(135deg, #eaeaea, #f7f7f7);
   border-radius: 16px;
 }

 /* ========= 枚数制限（通常時のみ） ========= */
 /* 絞り込み中は #topGallery.filter-active になる → 枚数制限を解除し、マッチのみ表示 */
 #topGallery.filter-active .thumbnail {
   display: none;
 }

 #topGallery.filter-active .thumbnail.is-match {
   display: block;
 }



 @media (min-width:570px) {

   /* PC 5列＆通常時は10枚だけ表示（11枚目以降は非表示） */
   .top-gallery {
     grid-template-columns: repeat(8, minmax(0, 1fr));
     gap: 6px;
     max-width: 1100px;
     width: 100%;
   }

 }

 /* 画像ドラッグ無効（任意） */
 img {
   -webkit-user-drag: none;
   user-drag: none;
 }


 .tag-filter {
   margin-bottom: 1rem;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }

 .tag-btn {
   padding: 4px 10px;
   background: #ffe4f2;
   border: 0;
   border-radius: 6px;
   font-size: 0.85rem;
   cursor: pointer;
   color: #d63384;
 }

 .tag-btn:hover {
   opacity: .8;
 }