/* 設定資料（reference/）だけの見た目。三面図の3枚並び・カラーパレット（押すとコピー）・配布素材。幅での切り替えは site-responsive.css の K4 の区切り */

/* 三面図：正面・側面・背面を同じ枠で並べる */
.turnaround { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.turnaround[hidden] { display: none; }
.turnaround-item { margin: 0; }
.turnaround-frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(ellipse at 50% 40%, rgb(255 178 94 / .12), transparent 65%), var(--lacquer); }
.turnaround-frame::after { position: absolute; inset: .55rem; border: 1px solid rgb(245 195 75 / .16); content: ""; pointer-events: none; }
.turnaround-frame img { width: 100%; height: 100%; object-fit: cover; }
.turnaround-empty { position: absolute; inset: 1.5rem; border: 1px dashed rgb(255 246 232 / .22); }
.turnaround-item figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin-top: .8rem; }
.turnaround-item figcaption strong { font-family: var(--mincho); font-size: 1.15rem; font-weight: 400; letter-spacing: .08em; }
.turnaround-item figcaption span { color: var(--muted); font-size: .8rem; }

/* カラーパレット */
.palette-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 0; list-style: none; }
.swatch-card { display: grid; align-content: start; width: 100%; height: 100%; padding: 0 0 1.1rem; border: 1px solid var(--line); color: var(--paper); background: var(--lacquer); text-align: left; transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.swatch-card:hover { border-color: rgb(245 195 75 / .6); box-shadow: 0 1rem 2rem rgb(0 0 0 / .25); transform: translateY(-.2rem); }
.swatch-chip { display: block; height: clamp(5rem, 9vw, 7rem); border-bottom: 1px solid var(--line); background: var(--swatch); box-shadow: inset 0 0 0 1px rgb(255 246 232 / .06); }
.swatch-name { margin: .9rem 1.1rem 0; font-family: var(--mincho); font-size: 1.1rem; letter-spacing: .06em; }
.swatch-hex { margin: .15rem 1.1rem 0; color: var(--gold); font-size: .86rem; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.swatch-use { margin: .4rem 1.1rem 0; color: var(--muted); font-size: .8rem; line-height: 1.6; }

/* 配布素材 */
.download-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.download-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); background: linear-gradient(160deg, rgb(59 32 56 / .55), rgb(26 14 20 / .9)); }
.download-preview { display: grid; place-items: center; height: 12rem; padding: 1.2rem; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 50% 60%, rgb(143 216 255 / .08), transparent 70%), rgb(11 7 18 / .6); }
.download-frame { height: 100%; max-width: 100%; overflow: hidden; border: 1px solid rgb(245 195 75 / .35); background: var(--dusk); box-shadow: 0 .8rem 1.6rem rgb(0 0 0 / .4); }
.download-frame img { width: 100%; height: 100%; object-fit: cover; }
.download-card.is-soon .download-frame { opacity: .45; filter: saturate(.6); }
.download-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 1.2rem 1.25rem 1.35rem; }
.download-body h3 { margin: 0; font-family: var(--mincho); font-size: 1.1rem; line-height: 1.5; }
.download-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; }
.download-meta span { padding: .02rem .5rem; border: 1px solid var(--line); color: rgb(255 246 232 / .8); font-size: .74rem; letter-spacing: .04em; }
.download-terms { margin: .7rem 0 1.2rem; color: var(--muted); font-size: .84rem; line-height: 1.7; }
.download-body .button { min-height: 2.6rem; margin-top: auto; }
.download-soon { display: inline-flex; align-items: center; min-height: 2.6rem; margin-top: auto; padding: .4rem 1rem; border: 1px dashed rgb(143 216 255 / .5); color: var(--kitsunebi); font-size: .86rem; font-weight: 700; }
.download-terms-all { max-width: 48rem; margin: 1.5rem 0 0; color: var(--muted); font-size: .88rem; }

/* 衣装・表情・小物のカード：文字だけの枠（小物）が、カードの高さいっぱいに広がるようにする（QK 総点検：点線の枠の下だけが大きく空いていた）。
   絵のカードは絵が absolute なので見た目は変わらない。絵の上の文字は、明るい髪の上でも読めるように影を足す */
.reference-card { display: grid; }
.reference-card > div:not(.placeholder) { text-shadow: 0 1px 3px rgb(11 7 18 / .9), 0 0 14px rgb(11 7 18 / .75); }
.reference-card--expressions { grid-template-rows: auto 1fr; }
.reference-expression-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .25rem; padding: .5rem; background: var(--lacquer); }
/* 表情は800×800の内在比率を保つ。共通カードの背景画像用absolute・height:100%を解除し、
   4枚を通常のグリッド配置へ戻す（修正前は1440px幅で558×16pxに潰れていた）。 */
.reference-expression-grid img { position: static; inset: auto; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; opacity: 1; border: 1px solid rgb(245 195 75 / .25); border-radius: 50%; }