/* =====================================================================
   風格 A｜紙本雜誌
   像一本周年特刊：黑字、大號宋體標題，每個單元用代表色的正方形
   標出章節（呼應首頁的彩色方塊與大塊文化的方形 Logo），大塊綠作為全站品牌色。
   底色三選一：body.bg-white（白）／bg-gray（淡灰）／bg-green（淺綠灰）
   ===================================================================== */
:root{--paper:#ffffff;--card:#f5f5f3;--ink:#1c1c1a;--muted:#5b5b56;--rule:#1c1c1a;--line:#e2e2de}
body.bg-white{--paper:#ffffff;--card:#f5f5f3;--line:#e2e2de}
body.bg-gray{--paper:#f0f0ee;--card:#ffffff;--line:#d9d9d4}
body.bg-green{--paper:#edf2ef;--card:#ffffff;--line:#d3ddd7}

/* ---- 刊頭：上方一道大塊綠，黑體站名 ---- */
.top{background:var(--paper);color:var(--ink);border-top:6px solid var(--brand);border-bottom:2px solid var(--rule)}
.brand{color:var(--ink)}
.brand-sub{color:var(--brand);opacity:1}
.brand-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.brand-issue{font:700 11px/1 var(--mono);letter-spacing:.14em;color:var(--ink);opacity:.8}
#home .mag-issue{display:none}
#home .mag-hero{padding-top:8px}
.nav a{color:var(--ink)}
.nav a.active:after{height:4px;bottom:-2px}
.toggle{border-color:var(--ink);color:var(--ink)}

/* ---- 首頁彩色入口：正方形（一排 4 個或 3 個）---- */
.mag-covers.sq-grid{container-type:inline-size;--u:.25cqw;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;border-bottom:0;background:transparent}
.mag-covers.sq-cols-3{--u:.333cqw;grid-template-columns:repeat(3,minmax(0,1fr))}
.mag-cover.sq{aspect-ratio:1/1;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;padding:calc(9*var(--u)) calc(9*var(--u)) calc(8*var(--u));border:0;overflow:hidden}
.mag-cover.sq>.sq-top{display:flex;align-items:flex-start;gap:calc(6*var(--u));height:auto;margin:0;font:inherit;letter-spacing:0}
.sq-no{font:900 calc(21*var(--u))/.74 var(--serif);font-style:normal;letter-spacing:-.02em}
.sq-label{border-left:1.5px solid currentColor;padding:0 0 0 calc(4*var(--u));font:700 max(12px,calc(5.2*var(--u)))/1.25 var(--sans);letter-spacing:.08em;text-transform:uppercase;align-self:flex-start;margin-top:calc(-1.1*var(--u))}
.mag-cover.sq .sq-title{display:block;margin:calc(9*var(--u)) 0 0;font:900 max(20px,calc(12.5*var(--u)))/1.18 var(--serif);letter-spacing:.01em}
.mag-cover.sq .sq-sum{display:block;margin-top:auto;font:500 max(13px,calc(6.2*var(--u)))/1.55 var(--sans)}
.mag-cover.sq:hover,.mag-cover.sq:focus-visible{transform:none;filter:brightness(1.04);outline:3px solid var(--ink);outline-offset:-3px}
.sq-extra{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.sq-extra .sq-label{border-left:0;padding-left:0;color:var(--brand)}
@media(max-width:760px){.mag-covers.sq-grid,.mag-covers.sq-cols-3{--u:.5cqw;grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- 內頁刊頭：左方彩色正方形（章節編號）、右側文字上下對齊方塊、最右放圖 ---- */
.inner{position:relative;background:var(--paper);border-bottom:2px solid var(--rule);display:grid;grid-template-columns:minmax(0,1fr);column-gap:28px;align-items:stretch;padding-top:32px;padding-bottom:32px;--sq:132px}
.has-square .inner{grid-template-columns:var(--sq) minmax(0,1fr) auto;grid-template-rows:auto 1fr auto}
.has-square .inner::before{content:var(--chapter);grid-column:1;grid-row:1/span 3;width:var(--sq);height:var(--sq);box-sizing:border-box;padding:14px 16px;background:var(--mod);color:var(--mod-ink);font:900 50px/.8 var(--serif);letter-spacing:-.02em}
.inner>small,.inner>h1,.inner>p{grid-column:2;margin:0}
.page:not(.has-square) .inner>small,.page:not(.has-square) .inner>h1,.page:not(.has-square) .inner>p{grid-column:1}
.inner>small{grid-row:1;align-self:start;color:var(--ink);font:700 14px/1 var(--sans);letter-spacing:.14em;display:block}
.inner>small::before{content:none}
.inner>h1{grid-row:2;align-self:center;font-size:clamp(30px,3.4vw,44px);line-height:1.15;padding:6px 0}
.inner>p{grid-row:3;align-self:end;color:var(--muted);font-size:17px;line-height:1.2}
.has-square .inner{min-height:0}
.hdr-media{display:block;grid-column:3;grid-row:1/span 3;align-self:center;justify-self:end;max-width:100%}
.hdr-photo{display:block;width:440px;max-width:100%;height:var(--sq);object-fit:cover}
.hdr-covers{display:flex;gap:6px;justify-content:flex-end;align-items:center;height:var(--sq)}
.hdr-covers img{height:var(--sq);width:auto;min-width:0;flex:0 1 auto;object-fit:contain;mix-blend-mode:multiply}
@media(max-width:1100px){.hdr-photo{width:300px}.hdr-covers img:nth-child(n+4){display:none}}
@media(max-width:760px){
  .inner{--sq:80px;padding-top:24px;padding-bottom:24px;column-gap:16px}
  .has-square .inner{grid-template-columns:var(--sq) minmax(0,1fr);grid-template-rows:auto 1fr auto}
  .has-square .inner::before{grid-row:1/span 2;padding:9px 10px;font-size:30px}
  .hdr-media{display:none}
  .inner>h1{font-size:28px;align-self:end;padding:0}
  .inner>p{grid-column:1/-1;grid-row:3;margin-top:14px;font-size:15px;line-height:1.5}
}

/* ---- 單元內容 ---- */
.content{background:var(--paper)}
.light-row-0915,.timeline-card,.activity-note,.diary-entry,.notice,.rex-live,.empty-note{background:var(--card);border:0;border-top:3px solid var(--mod)}
.light-row-0915{padding:30px 32px}
.light-copy-0915 small{color:var(--muted);letter-spacing:.14em}
.light-copy-0915 h2{font-weight:900}
.real-card,.book-detail-copy,.gift-card,.gift-detail,.store-section,.letter-full,.rex-map-card,.meta,.form,.vote-selected{background:var(--card);border-top:3px solid var(--mod)}
.gallery figure{background:var(--card)}
.activity-note>small,.store-section>small,.rex-map-heading small,.gift-card small,.gift-detail>div>small{color:var(--ink)}
.activity-note>small::before,.store-section>small::before{content:"";display:inline-block;width:18px;height:3px;background:var(--mod);vertical-align:middle;margin-right:8px}
.lights-subnav a,.flow a{border:1.5px solid var(--ink);background:transparent;color:var(--ink)}
.lights-subnav a.current,.flow a.current{background:var(--ink);color:var(--paper)}
.site-btn,a.action{background:var(--brand)}
.back{color:var(--brand)}
.selection-copy em{color:var(--ink);font-weight:700}
.selection-copy small{color:var(--muted)}
.form input,.form textarea{background:var(--paper)}

/* ---- 首頁 ---- */
.mag-issue{border-bottom-width:2px}
.mag-hero{border-bottom-width:2px}
.mag-hero-copy>small,.mag-heading small,.mag-index b{color:var(--brand)}
.mag-covers{border-bottom-color:var(--brand)}
.mag-index{border-top-width:2px}

/* ---- 頁尾：大塊綠 ---- */
.site-footer{background:var(--brand);color:#fff}
.site-footer a{color:#fff}
.ft-copy{border-top:1px solid rgba(255,255,255,.3)}
.ft-logo{box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.mag-cover.sq:last-child{grid-column:auto;min-height:0}
@media(max-width:760px){.brand-issue{display:none}}

/* ---- 30道光：書封放大、等高，超出時左右滑動 ---- */
.light-row-0915{grid-template-columns:minmax(220px,.62fr) minmax(0,1.9fr);align-items:center}
.light-covers-0915{position:relative;gap:22px;align-items:flex-end;padding:14px 4px 18px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.light-covers-0915 .cover-button{flex:0 0 auto;scroll-snap-align:start}
.light-covers-0915 .book-cover.thumb{height:250px;width:auto;max-width:none}
.light-covers-0915 .book-cover-missing.thumb{height:250px;width:176px}
.light-covers-0915.is-scroll:not(.at-end){-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.light-row-0915{position:relative}
.light-covers-0915.is-scroll+.scroll-hint{display:block}
@media(max-width:760px){.light-covers-0915 .book-cover.thumb{height:190px}.light-covers-0915 .book-cover-missing.thumb{height:190px;width:134px}}
.scroll-hint{display:none;grid-column:2;margin:-6px 0 0;text-align:right;font:700 13px/1 var(--sans);letter-spacing:.06em;color:var(--muted)}
@media(max-width:760px){.scroll-hint{grid-column:1}}
@media(max-width:760px){.light-row-0915{grid-template-columns:minmax(0,1fr)}.scroll-hint{grid-column:1;text-align:left;margin-top:-4px}}
