/* UUCMM 網站樣式（深色版） */
/* ---------- 色彩（深色底） ---------- */
:root{
  --ink:#ecebe3;          /* 主要文字 */
  --paper:#131512;        /* 頁面底色 */
  --orange:#f07a36;       /* 品牌橘 */
  --line:#2f332c;         /* 分隔線 */
  --muted:#a3a698;        /* 次要文字 */
  --soft:#1c1f1a;         /* 區塊底色 */
  --card:#20241e;         /* 卡片／圖片底 */
  --green:#aec29c;        /* 小標綠 */
  --deep:#0d0f0c;         /* 頁尾 */
  --radius:8px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif;font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%;height:auto}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.25}
h1{font-size:clamp(40px,5.6vw,82px);letter-spacing:-.05em;font-weight:750}
h2{font-size:clamp(28px,3vw,44px);letter-spacing:-.04em}
h3{font-size:23px;letter-spacing:-.02em}
::selection{background:var(--orange);color:#fff}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip{position:absolute;top:-100px;left:10px;z-index:100;background:var(--ink);color:var(--paper);padding:8px 14px}
.skip:focus{top:10px}

/* ---------- 頁首 ---------- */
.site-header{padding:22px 4%;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:30px;background:var(--paper);position:relative;z-index:20}
.brand{display:flex;gap:12px;align-items:center}
.brand img{height:47px;width:47px;object-fit:contain;border-radius:6px}
.brand>span{font-size:25px;font-weight:800;line-height:1.1;letter-spacing:-1px}
.brand small{display:block;font-size:8px;letter-spacing:1.2px;margin-top:6px;color:var(--muted)}
.main-nav{display:flex;gap:24px;align-items:center;margin-left:auto}
.main-nav a{font-size:12px;line-height:1.4;position:relative;padding:4px 0}
.main-nav small{display:block;font-size:9px;letter-spacing:1px;color:var(--muted);margin-top:4px}
.main-nav a:hover{color:var(--orange)}
.main-nav a.active{color:var(--orange)}
.main-nav a.active:after{content:'';position:absolute;bottom:-24px;left:0;right:0;height:3px;background:var(--orange)}
.cart-link{font-size:12px;border-left:1px solid var(--line);padding-left:22px}
.cart-link span{display:inline-grid;place-items:center;min-width:20px;height:20px;border:1px solid var(--line);border-radius:50%;font-size:11px;margin-left:6px}
.mobile-toggle{display:none}

/* ---------- 版面 ---------- */
.container{width:min(1320px,92%);margin:auto}
.section{padding:88px 0}
.rule{border-top:1px solid var(--line)}
.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;display:block;margin-bottom:24px;color:var(--green);text-transform:uppercase}
.orange{color:var(--orange)}
.muted{color:var(--muted)}
.space-top{margin-top:35px}
.link-line{display:inline-flex;gap:40px;align-items:center;border-bottom:1px solid currentColor;padding-bottom:7px;font-size:13px;font-weight:600}
.link-line:hover{color:var(--orange)}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:36px}
.section-heading .eyebrow{margin-bottom:10px}
.section-heading p{max-width:420px;color:var(--muted);font-size:14px}
.page-head{padding:65px 0 40px}
.page-head h1{font-size:clamp(40px,5vw,66px)}
.page-head .subtitle{max-width:650px;color:var(--muted);margin-top:22px}

/* ---------- 首頁主視覺 ---------- */
.hero-intro{display:grid;grid-template-columns:1.3fr 1fr;gap:70px;padding:64px 0 48px;align-items:end}
.hero-side{max-width:360px;justify-self:end;padding-bottom:7px}
.hero-side p{font-size:15px;color:var(--muted);line-height:1.9;margin-bottom:24px}
.hero-image{position:relative;overflow:hidden;border-radius:4px}
.hero-image>img{width:100%;height:clamp(280px,37vw,520px);object-fit:cover;object-position:center 54%}
.hero-image .image-label{position:absolute;left:28px;bottom:24px;color:#fff;background:#0d0f0cb3;padding:8px 16px;font-size:11px;border:1px solid #ffffff33;backdrop-filter:blur(6px)}
.hero-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;font-size:10px;letter-spacing:1.5px;color:var(--muted)}
.hero-caption a:hover{color:var(--orange)}

/* ---------- 原創宇宙卡片 ---------- */
.world-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:28px}
.world-grid.single{grid-template-columns:1fr}
.world-card{position:relative;display:block}
.world-cover{background:var(--card);overflow:hidden;height:350px;border-radius:5px}
.world-cover img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.world-card:hover .world-cover img{transform:scale(1.025)}
.world-cover.empty-art{display:grid;place-items:center;background:#1e231c}
.empty-art .word{font-size:76px;font-family:Georgia,serif;line-height:1;text-align:center;color:#b9c6a8;font-style:italic}
.empty-art .word small{display:block;font-family:Arial,sans-serif;font-size:9px;margin-top:18px;letter-spacing:5px;font-style:normal;color:var(--muted)}
.card-meta{display:flex;justify-content:space-between;padding:20px 0;gap:15px}
.card-meta small{color:var(--muted);font-size:10px;letter-spacing:1.5px;display:block;margin-bottom:7px}
.card-meta h3{font-size:25px}
.card-meta p{color:var(--muted);margin-top:12px;font-size:13px;max-width:460px}
.round-arrow{height:36px;width:36px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;flex-shrink:0;transition:.2s}
.world-card:hover .round-arrow{background:var(--orange);border-color:var(--orange);color:#fff}

/* ---------- 一般卡片 ---------- */
.three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.four-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.item-card{display:block}
.item-card .art{aspect-ratio:1/1;background:var(--card);display:grid;place-items:center;overflow:hidden;border-radius:4px;color:var(--muted)}
.item-card .art img{width:100%;height:100%;object-fit:contain;padding:15px;transition:transform .3s}
.item-card:hover .art img{transform:scale(1.04)}
.item-card h3{font-size:18px;margin:13px 0 8px}
.item-card:hover h3{color:var(--orange)}
.item-card p{font-size:13px;color:var(--muted)}
.item-card .meta{display:flex;justify-content:space-between;gap:10px;font-size:13px}

/* ---------- 標籤、空狀態、按鈕 ---------- */
.tag{font-size:10px;display:inline-block;padding:3px 9px;background:#262b23;border-radius:3px;margin:0 5px 5px 0;color:#c3cbb6}
a.tag:hover{background:var(--orange);color:#fff}
.empty-state{padding:45px;background:var(--soft);border:1px solid var(--line);border-radius:5px}
.empty-state h3{font-size:23px;margin-bottom:15px}
.empty-state p{color:var(--muted);max-width:650px}
.btn,.wp-block-button__link,input[type=submit],button[type=submit]{display:inline-flex;justify-content:center;align-items:center;gap:15px;background:var(--orange);color:#fff;border:1px solid var(--orange);border-radius:4px;padding:13px 22px;font-size:13px;cursor:pointer;transition:.2s}
.btn:hover,.wp-block-button__link:hover,input[type=submit]:hover,button[type=submit]:hover{background:#ff8a46;border-color:#ff8a46}
.btn.light{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.light:hover{border-color:var(--ink)}
.button-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.notice{background:#1f2a1d;border-left:3px solid var(--green);padding:13px 18px;font-size:13px;margin:20px 0}
.notice.error{background:#2c1b17;border-left-color:#d3664e}

/* ---------- 引言帶、合作 ---------- */
.quote-band{background:var(--soft);padding:65px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quote-band .container{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px}
.quote-band img{width:100%;max-height:180px;object-fit:contain}
.quote-band p{font-size:30px;line-height:1.5;letter-spacing:-.04em}
.quote-band small{display:block;margin-top:18px;font-size:10px;letter-spacing:2px;color:var(--muted)}
.collaboration-grid>div{border-top:1px solid var(--line);padding:24px 0}
.collaboration-grid small{display:block;color:var(--orange);margin-bottom:30px;letter-spacing:2px}
.collaboration-grid h3{margin-bottom:16px}
.collaboration-grid p{color:var(--muted);font-size:14px;max-width:310px}
.story-invitation{background:#25352a;color:var(--ink);padding:40px;display:flex;justify-content:space-between;align-items:end;gap:30px;margin:50px 0 35px;border-radius:4px}
.story-invitation .eyebrow{color:#cdd8bf}
.story-invitation p{max-width:280px;font-size:14px;color:#d5dccb}
.story-invitation h2{font-size:34px}

/* ---------- 文章列表 ---------- */
.article-list{display:grid;gap:22px}
.article-row{display:grid;grid-template-columns:250px 1fr;gap:30px;padding:25px 0;border-bottom:1px solid var(--line)}
.article-row .thumb{width:250px;height:160px;background:var(--card);border-radius:3px;overflow:hidden}
.article-row .thumb img{width:100%;height:100%;object-fit:cover}
.article-row h3{margin:10px 0}
.article-row:hover h3{color:var(--orange)}
.article-row p{color:var(--muted);font-size:14px}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px;align-items:center}
.filters a{border:1px solid var(--line);border-radius:30px;padding:8px 20px;font-size:12px}
.filters a.active,.filters a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.filters form{flex:1;min-width:200px;display:flex;gap:8px;justify-content:flex-end}
.filters input[type=search]{max-width:260px}
.pagination{margin:40px 0;display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{border:1px solid var(--line);padding:6px 14px;border-radius:4px;font-size:13px}
.pagination .current{background:var(--orange);border-color:var(--orange);color:#fff}

/* ---------- 內文 ---------- */
.reading{max-width:820px;margin:30px auto 80px}
.entry-meta{color:var(--muted);font-size:12px;letter-spacing:1px;margin-top:18px}
.article-cover{max-height:500px;width:100%;object-fit:cover;border-radius:5px}
.prose{font-size:17px;line-height:2;overflow-wrap:anywhere}
.prose>*{margin:0 0 1.3em}
.prose h2{font-size:30px;margin-top:1.6em}
.prose h3{font-size:22px;margin-top:1.4em}
.prose a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.prose figure{margin:30px 0}
.prose img{border-radius:4px}
.prose figcaption,.wp-element-caption{font-size:12px;color:var(--muted);margin-top:10px;text-align:left}
.prose blockquote{border-left:3px solid var(--orange);margin-left:0;padding:4px 0 4px 22px;color:#d4d4cb}
.prose hr{border:0;border-top:1px solid var(--line)}
.prose ul,.prose ol{padding-left:1.3em}
.prose .wp-block-media-text{gap:30px}
.prose .wp-block-media-text__content{padding:0 0 0 30px}
.prose iframe,.prose video{width:100%;aspect-ratio:16/9;border:0}
.prose .alignwide{margin-left:-10%;margin-right:-10%}
.prose .wp-block-gallery{gap:16px}
.post-nav{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:24px;font-size:13px}
.post-nav a:hover{color:var(--orange)}

/* ---------- 角色頁 ---------- */
.detail-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:65px;margin:50px 0}
.detail-art{background:var(--soft);border-radius:5px;display:grid;place-items:center;min-height:360px;padding:20px}
.detail-art img{width:100%;max-height:550px;object-fit:contain}
.detail-copy{padding:30px 0}
.detail-copy h1{font-size:45px}
.detail-copy .summary{color:var(--muted);line-height:1.9;margin:25px 0}

/* ---------- 關於我們 ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.about-copy .prose{font-size:15px;color:var(--muted);margin-top:25px}
.contact-form{background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:32px;align-self:start;scroll-margin-top:30px}
.contact-form h3{margin-bottom:6px}
.field{display:block;margin-bottom:18px;font-size:12px;font-weight:600}
.field input,.field textarea,.field select{display:block;width:100%;margin-top:7px}
input,textarea,select{background:#151813;color:var(--ink);border:1px solid #3a3f36;border-radius:4px;padding:11px 12px;max-width:100%}
textarea{resize:vertical;min-height:120px}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--orange)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:12px;margin:15px 0;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.hp{position:absolute;left:-9999px}

/* ---------- 頁尾 ---------- */
.site-footer{padding:55px 4% 30px;border-top:1px solid var(--line);background:var(--deep)}
.footer-top{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:60px}
.footer-top p{font-size:38px;line-height:1.45;letter-spacing:-.03em}
.footer-top a{font-size:18px;border-bottom:1px solid var(--ink);padding-bottom:10px}
.footer-top a:hover{color:var(--orange);border-color:var(--orange)}
.footer-top a span{display:block;font-size:9px;letter-spacing:2px;margin-top:10px}
.footer-bottom{display:flex;gap:25px;justify-content:space-between;border-top:1px solid var(--line);padding-top:25px;font-size:10px;letter-spacing:1px;color:var(--muted)}
.footer-bottom strong{font-size:18px;letter-spacing:-.5px;color:var(--ink)}


/* ---------- 商店 ---------- */
.price{font-size:28px;font-weight:600;display:block;margin:22px 0;color:var(--orange)}
.item-card .meta{margin-top:4px}
.item-card .meta .p{color:var(--orange);font-weight:600}
.badge{font-size:10px;padding:3px 8px;border:1px solid var(--line);border-radius:3px;display:inline-block;color:var(--muted)}
.badge.sold{color:#e6a88a;border-color:#6b3b2a}
.badge.example{color:#e8c98c;border-color:#5d4a25;background:#2a2316}
.spec-list{list-style:none;padding:22px 0 0;margin:22px 0 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted);display:grid;gap:8px}
.buy-note{font-size:12px;color:var(--muted);margin-top:14px}
.shop-note{font-size:13px;color:var(--muted);margin:-10px 0 30px}
.filters button{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:30px;padding:8px 20px;font-size:12px;cursor:pointer}
.filters button.active,.filters button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.contact-card{background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:32px;align-self:start}
.contact-card h3{margin-bottom:10px}
.contact-card p{color:var(--muted);font-size:14px}
.ally-link{font-size:12px;color:var(--orange);margin-top:8px;display:inline-block}

/* ---------- 平板 ---------- */
@media(max-width:1100px){
  .main-nav{gap:14px}
  .site-header{gap:18px}
  .brand>span{display:none}
  .hero-intro{gap:40px}
  .four-grid{grid-template-columns:repeat(2,1fr)}
  .world-cover{height:280px}
  .hero-side{max-width:320px}
}
/* ---------- 手機 ---------- */
@media(max-width:760px){
  .site-header{padding:15px 5%;flex-wrap:wrap;gap:16px}
  .brand>span{display:block;font-size:22px}
  .brand img{height:40px;width:40px}
  .mobile-toggle{display:block;margin-left:auto;background:transparent;color:var(--ink);border:1px solid var(--line);padding:6px 12px;font-size:12px;border-radius:4px}
  .main-nav{display:none;order:4;width:100%;margin:0;padding:15px 0;grid-template-columns:repeat(3,1fr);gap:20px}
  .main-nav.open{display:grid}
  .main-nav a.active:after{bottom:-6px}
  .cart-link{order:3;border:0;padding:0}
  .hero-intro{grid-template-columns:1fr;gap:25px;padding:40px 0 30px}
  .hero-side{max-width:100%;justify-self:start}
  .hero-image>img{height:300px}
  .hero-image .image-label{left:18px;bottom:18px;font-size:10px}
  .hero-caption{font-size:8px;gap:12px}
  .eyebrow{font-size:9px;margin-bottom:20px}
  .section{padding:55px 0}
  .section-heading{align-items:start}
  .section-heading p{display:none}
  .section-heading .link-line{font-size:11px;gap:12px;white-space:nowrap}
  .world-grid{grid-template-columns:1fr}
  .world-cover{height:290px}
  .empty-art .word{font-size:56px}
  .quote-band{padding:40px 0}
  .quote-band .container{grid-template-columns:1fr;gap:30px}
  .quote-band p{font-size:26px}
  .quote-band img{max-height:100px}
  .three-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .collaboration-grid{grid-template-columns:1fr}
  .collaboration-grid small{margin-bottom:15px}
  .four-grid{gap:18px}
  .item-card h3{font-size:15px}
  .page-head{padding:40px 0 30px}
  .detail-hero{grid-template-columns:1fr;gap:5px;margin-top:25px}
  .detail-art{min-height:250px}
  .detail-copy h1{font-size:34px}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .form-grid{grid-template-columns:1fr}
  .contact-form{padding:22px}
  .article-row{grid-template-columns:100px 1fr;gap:18px}
  .article-row .thumb{width:100px;height:100px}
  .article-row h3{font-size:20px}
  .article-row p{font-size:12px}
  .filters form{justify-content:flex-start}
  .story-invitation{padding:25px;display:block}
  .story-invitation p{margin-top:22px}
  .prose{font-size:16px}
  .prose .alignwide{margin-left:0;margin-right:0}
  .prose .wp-block-media-text__content{padding:20px 0 0}
  .footer-top{display:block;margin-bottom:35px}
  .footer-top p{font-size:26px;margin-bottom:25px}
  .footer-top a{font-size:14px;display:inline-block}
  .footer-bottom{flex-wrap:wrap;font-size:9px;gap:14px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}