/*
  AOYIN CHRISTMAS 2026 — 聖誕小博物館 V5
  ====== 這份檔案專門負責視覺，覆蓋原本 styles.css ======
  想改風格，優先修改下方的 8 個變數。
  SNS 帳號標籤：.art-action-band / .art-post-button
  正方形展示框：.art-thumb；圖片完整顯示：.art-thumb img
  創作者署名：.art-author；SNS 帳號已移至 .art-post-button
  首頁右側 PNG：images/hero-art.png；大小：--hero-image-size
*/
:root{
  --pine:#247f7d;         /* 深湖水綠：文字與按鈕 */
  --pine-soft:#3b9990;
  --gold:#e38e6d;         /* 珊瑚橘：小重點 */
  --gold-light:#ffe6c3;
  --cream:#f9f4e9;        /* 奶油紙張 */
  --paper:#fffdf6;
  --ink:#305358;
  --muted:#718580;
  --line:#e5dccc;
  --berry:#e97763;
  --mint:#b4ded6;
  --hero-image-size:550px; /* 首頁右側 PNG 在桌機的最大顯示寬度 */
  --teal:#28ada6;
  --shadow:0 14px 38px rgba(58,95,84,.10);
}
body{background:var(--cream);color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible{outline-color:#ea8b68}
.container{width:min(100% - 64px,1230px)}
.section{padding:100px 0}
.section-label{color:#bd7964;letter-spacing:.18em;font-size:11px}
.section h2{font-family:Georgia,"Noto Serif TC",serif;letter-spacing:.015em;font-weight:600}
/* 導覽列：像貼在博物館門口的奶油色標牌 */
.site-header{height:75px;background:#fffcf3;color:#346c70;border-bottom:1px solid #e6dccc}
.brand{font-size:18px;letter-spacing:.08em;color:#2d7c78}
.brand-icon{background:#e1f4ed;border:1px solid #b7ded7;color:#ed8e73;display:grid;place-items:center;border-radius:13px;width:43px;height:43px;font-size:30px;transform:rotate(-8deg)}
.brand small{color:#8f9790;font-size:9px;letter-spacing:.2em}
.site-header nav{gap:14px;font-size:12px}
.site-header nav a{padding:7px 12px;border-radius:30px}
.site-header nav a:hover{background:#e3f2e9;color:#2a7673}
/* 英雄區：薄荷綠展廳；右側主視覺使用可自由替換的透明 PNG */
.hero{color:#275c60;background:linear-gradient(135deg,#a8e0d7 0%,#b9e4db 50%,#e0eee3 100%)}
.hero::before{content:"";pointer-events:none;position:absolute;inset:0;opacity:.28;background-image:radial-gradient(#fffdfa 1.6px,transparent 1.6px);background-size:34px 34px;mask-image:linear-gradient(to bottom,transparent 2%,#000 65%)}
.hero-grid{min-height:560px;grid-template-columns:1fr .94fr;gap:25px;padding-top:38px;padding-bottom:48px}
.hero-copy{padding:35px 0 44px}
.eyebrow{color:#2d7b77;letter-spacing:.15em;font-weight:700;margin-bottom:35px}
.eyebrow .line{background:#ed9673;height:3px;width:30px;border-radius:3px}
.hero-kicker{color:#558e89;font-family:Georgia,serif;font-size:11px;letter-spacing:.15em}
.hero h1{color:#276b68;font-size:clamp(34px,4.25vw,58px);line-height:1.48;font-weight:600;letter-spacing:.015em;margin-bottom:21px}
.hero h1 em{color:#de745c;display:inline}
.hero-intro{color:#476e6d;font-size:14px;max-width:450px;line-height:2.2}
.hero-cta{border-radius:100px;box-shadow:0 7px 0 rgba(69,126,112,.11);background:#fffbef;color:#2f7974;border:1px solid #d9c6ac;font-weight:700;letter-spacing:.05em;gap:35px;padding:11px 19px}
.hero-cta:hover{background:#fff1d6;transform:translateY(-2px)}
.hero-bottom{border-top:1px dashed rgba(42,133,124,.28);color:#518681;background:rgba(255,255,255,.16)}
/* 只顯示一張圖片，不再由信封、票券、卡片等 HTML 元件堆疊。 */
.hero-art{
  width:min(100%,var(--hero-image-size));
  aspect-ratio:1/1;
  justify-self:center;
  display:grid;
  place-items:center;
  position:relative;
  overflow:visible;
  transform:none;
}
.hero-art-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;   /* 不管換直式、橫式或正方形 PNG，都不裁圖 */
  object-position:center;
  border:0;
  background:transparent;
}
/* 關於活動：紙質牆面 */
.about{background:#fffaf0;border-bottom:1px dashed #e5d8c5}
.about-grid{gap:70px}
.about-right>p{color:#677773}
.stat-row{border-top:1px dashed #d6cbb9}
.stat-row strong{color:#278b83}
/* 展品牆 */
.gallery-section{background:linear-gradient(#f9f4e9,#fff8ea)}
.gallery-heading h2 span{color:#ed9375}
.gallery-heading p{color:#69837d}
.rule{background:#ed987c;height:3px;border-radius:8px}
.sample-note{border-radius:12px;border:1px dashed #e0ac8d;border-left:4px solid #e68f76;background:#fff3df;color:#a36a4c}
.toolbar{margin-top:39px}
.filters{gap:9px}
.filter-btn{padding:9px 15px;border-radius:50px;border:1px solid #d9d2c2;background:#fffdf6;color:#567971;letter-spacing:0;font-size:12px;font-weight:600}
.filter-btn[aria-pressed="true"],.filter-btn:hover{background:#28978c;border-color:#28978c;color:#fff}
.search-box{border-color:#e5dbca;background:#fffef9;border-radius:40px;color:#668a82;padding:9px 15px}
.search-box input{color:#385e5b}
.result-count{color:#77918b}
.art-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 19px;align-items:start}
.art-card{min-width:0;background:#fffdf7;border:1px solid #e6dbc8;border-radius:17px;overflow:hidden;box-shadow:0 7px 20px rgba(79,108,92,.065);transition:transform .22s,box-shadow .22s}
.art-card:hover{transform:translateY(-3px);box-shadow:0 15px 28px rgba(79,108,92,.12)}
.art-open{display:block;width:100%;border:0;padding:10px 10px 0;background:transparent;text-align:left;cursor:zoom-in}
/* 無論直圖、橫圖、長漫畫，都完整縮進正方形內，不作裁切 */
.art-thumb{display:grid;place-items:center;width:100%;aspect-ratio:1/1;position:relative;overflow:hidden;background:#e6f3ed;border-radius:11px;border:1px solid #dfeae3}
.art-thumb img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;background:transparent;transition:transform .22s ease}
.art-open:hover .art-thumb img{transform:scale(1.02)}
.art-thumb::after{display:none}
.art-open-hint{position:absolute;right:9px;bottom:9px;background:#fffbf3ea;color:#44827b;border:1px solid #cfdfd5;border-radius:22px;padding:4px 9px;font-size:10px;line-height:1.4;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none}
.art-open:hover .art-open-hint,.art-open:focus-visible .art-open-hint{opacity:1;transform:none}
.category-pill,.pages-pill{z-index:1;background:#fffaefee;color:#43756b;border:1px solid #dde9dc;border-radius:40px;padding:4px 9px;font-size:10px;font-weight:600;left:9px;top:9px;letter-spacing:.02em}
.pages-pill{left:auto;right:9px;background:#fff3e5;color:#a26751;border-color:#f2ded2}
.art-card.category-text .art-thumb{background:#f5e7d2}
.art-card.category-cos .art-thumb{background:#e8f1ef}
/* 自動文章封面：正方形內完整排版，只有文章展示題名 */
.placeholder{background:linear-gradient(145deg,#c6e7df,#7abcb4);color:#ffffff;gap:14px}
.placeholder::before{border-color:#fffaef88;inset:12%;transform:rotate(6deg);border-radius:12px}
.placeholder::after{border-color:#fff2d899;inset:27%;transform:rotate(18deg)}
.placeholder.p1{background:linear-gradient(145deg,#e8bc9f,#dda494)}
.placeholder.p2{background:linear-gradient(145deg,#a0d3c8,#5eaa9d)}
.placeholder.p3{background:linear-gradient(145deg,#d8dfac,#9cc4af)}
.placeholder .placeholder-symbol{font-size:50px}
.text-placeholder{background:linear-gradient(150deg,#fff3e1,#efd6bd);color:#5e8b7f;justify-content:center;padding:12% 9%;gap:7px}
.text-placeholder .placeholder-symbol{font-size:35px;margin:0}
.text-placeholder .placeholder-category{color:#ad775c;font-size:9px;letter-spacing:.15em}
.text-placeholder .placeholder-title{font-family:"Noto Serif TC",serif;font-weight:700;font-size:clamp(13px,1.45vw,19px);line-height:1.65;max-width:100%;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;z-index:1}
.story-snippet{display:none}
/* 封面下方的 SNS 帳號標籤：預設安靜，滑過才變成聖誕薄荷綠 */
.art-action-band{margin:0 10px;min-height:48px;display:flex;align-items:center;justify-content:center;border-bottom:1px dashed #e8d9c7}
.art-post-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 8px);max-width:210px;min-height:32px;border:1px solid #d5e3da;background:#f4f9f2;border-radius:30px;color:#548379;text-align:center;font-size:11px;line-height:1.4;letter-spacing:.02em;text-decoration:none;transition:all .2s ease}
a.art-post-button:hover,a.art-post-button:focus-visible{background:#dff2e9;border-color:#83c7b6;color:#24766f;transform:translateY(-1px)}
.art-post-button.is-disabled{background:#f8f5ef;border-color:#e7e2d8;color:#a6aaa4;cursor:default}
/* 署名在卡片底部；只文章顯示標題。SNS 帳號文字是個人頁面連結 */
.art-meta{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:12px 16px 17px;min-height:100px}
.art-order{display:block;color:#ce8b70;font:11px Georgia,serif;letter-spacing:.13em;margin:0 0 3px}
.art-title{display:block;color:#966e62;font-family:"Noto Serif TC",serif;font-size:12px;line-height:1.6;font-weight:600;margin:0 0 3px;overflow-wrap:anywhere}
.art-author{display:block;font-size:16px;color:#315b59;font-weight:700;line-height:1.55;overflow-wrap:anywhere}
.art-sns{display:inline-block;max-width:100%;overflow-wrap:anywhere;color:#7a9b92;font-size:12px;line-height:1.7;text-decoration:none;text-underline-offset:3px}
a.art-sns:hover,a.art-sns:focus-visible{color:#226f68;text-decoration:underline;text-decoration-color:#dbac8e}
.art-sns-pending{color:#9eada6}
/* 頁尾 */
.thanks-section{background:linear-gradient(130deg,#348b83,#2b7779);color:#fffdf3}
.thanks-symbol{color:#ffe0bd}
.thanks-section .section-label{color:#f3cfbc}
.thanks-section h2{color:#fff7e6}
.thanks-section p:not(.section-label){color:#e1f2ed}
.text-link{color:#ffe2c7;border-color:#ffe2c7}
.site-footer{background:#276e70;color:#d8ece5}
/* 燈箱：同一個小博物館的閱讀空間 */
.art-dialog{background:#fffbf3;border-radius:19px;box-shadow:0 30px 95px #153f3b77}
.art-dialog::backdrop{background:#214743c9;backdrop-filter:blur(5px)}
.dialog-image-area{background:#e5f2ed}
.dialog-info{background:#fffbf3}
.dialog-close{border-radius:50%;color:#3f7770;background:#fff8ee}
.dialog-eyebrow{color:#c68067}
.dialog-info .dialog-artist{color:#2d716a}
.dialog-info h2{color:#967368}
.dialog-info .dialog-divider{border-color:var(--line)}
.dialog-sns a:hover{color:#24766c}
.dialog-links a,.dialog-links a:first-child{color:#5b8d83;border-color:#badbcf}
.dialog-links a:hover,.dialog-links a:first-child:hover{color:#24766c;border-color:#e39a7e}
.dialog-navigation button{color:#357e76}
.photo-controls{background:#327b74ec}
.reading-mode{background:#fffaf0}
.article-reader{color:#3c5f59}
.article-kicker{color:#d48d72}
.article-byline{border-color:#e9dcca}
.article-body{color:#405f5b}
/* RWD */
@media(max-width:1080px){
  .art-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-grid{min-height:510px}
}
@media(max-width:760px){
  .container{width:min(100% - 34px,640px)}
  .section{padding:69px 0}
  .site-header{height:68px}
  .brand-icon{width:36px;height:36px;font-size:24px}
  .site-header nav{gap:0;font-size:11px}
  .site-header nav a{padding:6px 8px}
  .hero-grid{grid-template-columns:1fr;gap:0;padding-top:50px;padding-bottom:18px}
  .hero-copy{padding:0}
  .hero h1{font-size:clamp(31px,8vw,45px)}
  .eyebrow{margin-bottom:22px;font-size:10px}
  .hero-intro{font-size:13px;line-height:2.1}
  .hero-art{width:min(90%,350px);margin:12px auto 18px}
  .about-grid{gap:25px}
  .stat-row{gap:27px}
  .art-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .art-card{border-radius:12px}
  .art-open{padding:6px 6px 0}
  .art-thumb{border-radius:8px}
  .category-pill,.pages-pill{left:5px;top:5px;padding:2px 6px;font-size:9px}
  .pages-pill{left:auto;right:5px}
  .art-action-band{margin:0 7px;min-height:46px}
  .art-post-button{width:100%;padding:2px 6px;font-size:10px;min-height:30px}
  .art-meta{padding:10px 11px 14px;min-height:96px}
  .art-author{font-size:13px}
  .art-title{font-size:11px}
  .art-sns{font-size:11px}
  .art-order{font-size:10px}
  .text-placeholder .placeholder-symbol{font-size:27px}
  .text-placeholder .placeholder-category{font-size:7px}
  .text-placeholder .placeholder-title{font-size:clamp(12px,3.1vw,16px)}
  .art-dialog{border-radius:10px}
  .dialog-info{max-height:34dvh}
  .dialog-info .dialog-artist{font-size:19px}
}
@media(max-width:380px){
  .site-header nav a:first-child{display:none}
  .hero h1{font-size:29px}
  .hero-bottom .container{font-size:8px;letter-spacing:.05em}
  .art-grid{gap:17px 9px}
  .art-author{font-size:12px}
  .art-post-button{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.art-card:hover,.hero-cta:hover,a.art-post-button:hover{transform:none}}

/* V7 · 接龍排程提示（不透露尚未公開作品內容） */
.release-notice{margin:0 0 19px;padding:12px 17px;border-radius:12px;
  border:1px solid #beded4;background:#e9f7f0;color:#327d77;font-size:13px;line-height:1.85}
.release-notice[hidden]{display:none!important}
@media(max-width:760px){.release-notice{font-size:11px;padding:10px 13px}}

/* V9 · 通用素材圖片與四類創作者統計 */
.brand-icon{transform:none;overflow:hidden}
.brand-icon img{display:block;width:100%;height:100%;object-fit:contain;padding:6px}
.brand{min-width:0}
#brand-text{display:block}
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 12px}
.stat-row>div{min-width:0}
.stat-row strong{font-size:clamp(27px,2.8vw,38px)}
.stat-row span{letter-spacing:0;white-space:normal;line-height:1.6}
.empty-mark img{width:64px;height:64px;object-fit:contain;display:block;margin:0 auto}
.empty-state .empty-mark{display:flex;justify-content:center;align-items:center}
.thanks-symbol img{width:54px;height:54px;display:block;margin:0 auto;object-fit:contain}
.about-section-mark{width:24px;height:24px;vertical-align:middle;object-fit:contain;margin-right:8px}
.gallery-mark{height:32px;width:32px;vertical-align:middle;object-fit:contain}
.inline-mark{height:18px;width:18px;vertical-align:middle;object-fit:contain;display:inline-block;margin-right:3px}
.release-notice .inline-mark{margin-right:8px}
.article-finale .inline-mark{margin-right:7px}
@media(max-width:900px){.stat-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 16px}}
@media(max-width:760px){.stat-row{gap:20px 12px}.stat-row strong{font-size:32px}.about-section-mark{width:20px;height:20px}.gallery-mark{width:23px;height:23px}}

.placeholder-mark{height:62px!important;width:62px!important;object-fit:contain;z-index:1}

.gallery-heading h2 #gallery-title-text{font-size:inherit;color:inherit;vertical-align:baseline}
.hero-cta #hero-cta-label{font-size:12px;letter-spacing:inherit}


/* ───────────── V10：背景圖片、SNS 導覽與聖誕分類色 ───────────── */
/* 背景是整個區塊的圖片，不是 img 內容；大螢幕使用 cover，邊緣會裁切。 */
.hero{
  background-color:#B2DDD4;
  background-image:url("images/hero-background.svg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
}
.hero::before{display:none} /* 避免 CSS 斑點覆蓋在作者自行畫的背景上 */
.about{
  background-color:#FFFAF0;
  background-image:url("images/about-background.svg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
}
.about-title-art{margin:0;line-height:0}
.about-title-art img{display:block;width:100%;max-width:510px;height:auto;object-fit:contain;object-position:left center}
/* 卡片原 SNS 行已搬到上方按鈕，保留資訊區只顯示編號與作者。 */
.art-meta{min-height:78px}
.art-post-button{max-width:100%;padding:5px 11px;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.art-action-band{padding:3px 0}
/* 低飽和三展區配色，配合活動主視覺的暖黃／松綠／珊瑚紅。 */
.art-card.category-art .category-pill{background:#F7E8B8;color:#85682F;border-color:#E9D7A5}
.art-card.category-text .category-pill{background:#DAEBDD;color:#4D775D;border-color:#C4DDCD}
.art-card.category-cos .category-pill{background:#F5D9D2;color:#9B5D52;border-color:#EEC6BE}
.filter-btn[data-category="繪圖"]{background:#FFF5DC;color:#866C3A;border-color:#E8D7AC}
.filter-btn[data-category="文章"]{background:#E9F3EA;color:#547E60;border-color:#C8DEC9}
.filter-btn[data-category="Cosplay"]{background:#FBEBE7;color:#A4665A;border-color:#EED0C9}
.filter-btn[data-category="繪圖"][aria-pressed="true"],.filter-btn[data-category="繪圖"]:hover{background:#E9D5A1;border-color:#DCC18B;color:#6C542A}
.filter-btn[data-category="文章"][aria-pressed="true"],.filter-btn[data-category="文章"]:hover{background:#C8E2CF;border-color:#B2D4BC;color:#3E6950}
.filter-btn[data-category="Cosplay"][aria-pressed="true"],.filter-btn[data-category="Cosplay"]:hover{background:#F0C8BF;border-color:#E4B3A9;color:#814B43}
.filter-btn[data-category="全部作品"]{background:#FFFDF6;color:#507C78;border-color:#DAE8DD}
.filter-btn[data-category="全部作品"][aria-pressed="true"],.filter-btn[data-category="全部作品"]:hover{background:#D9EEEA;color:#246F6A;border-color:#B9DED5}
/* 移除範例公告；倒數採用原本公告的珊瑚色紙卡風格 */
.release-notice{
  margin:0 0 19px;padding:13px 17px;border-radius:12px;
  border:1px dashed #E0AC8D;border-left:4px solid #E68F76;
  background:#FFF3DF;color:#95664E;font-size:13px;line-height:1.85;
}
.release-notice .inline-mark{margin-right:8px}
@media(max-width:760px){
 .about-title-art img{max-width:460px}
 .release-notice{padding:11px 14px;font-size:11px}
 .art-meta{min-height:72px}
 .art-post-button{font-size:10px}
}