/* オウンドメディア（/{lang}/media/）専用。共通部分は styles.css を使う。 */
.media-main{max-width:880px;padding:56px 0 88px}
.media-title{max-width:none;margin:14px 0 16px;font:800 clamp(30px,5vw,48px)/1.2 var(--display);letter-spacing:-.02em;color:#fff}
.media-lead{margin:0 0 28px;color:#cbc3d7;font-size:clamp(16px,2vw,19px);line-height:1.75}
.media-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px}
.media-nav a{padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(25,28,34,.8);color:var(--muted);font-size:14px;text-decoration:none}
.media-nav a:hover{color:#fff}
.media-nav a[aria-current="page"]{background:var(--primary);border-color:var(--primary);color:#30106a;font-weight:700}
.media-list{display:grid;gap:16px}
.media-card{padding:24px 26px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(34,38,46,.95),rgba(25,28,34,.82))}
.media-card h2{margin:10px 0 8px;font:700 clamp(19px,2.6vw,23px)/1.4 var(--display)}
.media-card h2 a{color:#fff;text-decoration:none}
.media-card h2 a:hover{text-decoration:underline}
.media-card p{margin:0;color:var(--muted);line-height:1.7}
.media-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;color:var(--muted);font-size:13px}
.media-category{color:var(--secondary);font-weight:700;text-decoration:none}
.media-badge{padding:2px 9px;border:1px solid var(--tertiary);border-radius:999px;color:#ff9cc2;font-size:12px;font-weight:700}
.media-empty{padding:40px 24px;border:1px dashed var(--line);border-radius:20px;color:var(--muted);text-align:center}
.media-breadcrumb{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;color:var(--muted);font-size:13px}
.media-breadcrumb a{color:var(--muted)}
.media-byline{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 20px;color:var(--muted);font-size:14px}
.media-contrib-note{margin:0 0 20px;padding:12px 16px;border:1px solid var(--tertiary);border-radius:12px;background:rgba(247,81,161,.08);color:#ffd8e7;font-size:14px;line-height:1.7}
.media-body{max-width:none;padding-top:8px}
.media-tags{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0;padding:0;list-style:none}
.media-tags li{padding:3px 11px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:13px}
.media-back{margin:40px 0 0}
.media-back a{color:var(--secondary)}
.x-card{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:20px 0;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.x-card-label{padding:2px 10px;border-radius:6px;background:#fff;color:#000;font-size:12px;font-weight:700}
.x-card .x-card-user{flex:1 1 160px;margin:0;color:#fff}
.x-card .x-card-link{padding:8px 16px;border-radius:10px;background:var(--primary);color:#30106a;font-weight:700;text-decoration:none}
.x-card-note{flex-basis:100%;color:var(--muted);font-size:12px}
@media (max-width:520px){.media-main{padding:36px 0 64px}.media-card{padding:20px 18px}}

/* プレビュー（MEDIA_PREVIEW_DRAFTS=1）で出す下書きの表示 */
.media-badge-draft{border-color:#f5c451;color:#ffd978}
.media-draft-notice{margin:0 0 20px;padding:12px 16px;border:1px solid #f5c451;border-radius:12px;background:rgba(245,196,81,.1);color:#ffd978;font-weight:700;line-height:1.6}

/* 記事の画像（docs/media/images.json に登録したものだけ）。出典は図の下に小さく出す。 */
.media-figure{margin:28px 0}
.media-figure img{display:block;width:100%;height:auto;border-radius:18px;background:var(--surface-2)}
.media-figure figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-top:8px;color:var(--muted);font-size:13px;line-height:1.6}
.media-figure-caption{color:#cbc3d7}
.media-credit,.media-credit a{color:var(--muted);font-size:12px}
.media-cover{margin:8px 0 32px}
.media-cover img{aspect-ratio:16/9;object-fit:cover}
.media-card-has-thumb{display:grid;grid-template-columns:200px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:22px}
.media-card-has-thumb .media-card-thumb{grid-row:1/4;align-self:start}
.media-card-thumb img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
@media (max-width:620px){.media-card-has-thumb{grid-template-columns:1fr}.media-card-has-thumb .media-card-thumb{grid-row:auto;margin-bottom:14px}.media-card-thumb img{aspect-ratio:16/9}}

/* アフィリエイト（Webのメディア記事だけ）。広告であることを常に表示する。 */
.affiliate-label{display:inline-block;padding:1px 8px;border:1px solid #f5c451;border-radius:6px;color:#ffd978;font-size:12px;font-weight:700;letter-spacing:.04em}
.media-pr-notice{display:flex;align-items:baseline;gap:10px;margin:0 0 18px;padding:10px 14px;border:1px solid rgba(245,196,81,.4);border-radius:12px;background:rgba(245,196,81,.07);color:#e9dcb8;font-size:13px;line-height:1.65}
.media-pr-notice .affiliate-label{flex:none}
.affiliate-card{display:grid;gap:6px;margin:24px 0;padding:18px 20px;border:1px solid rgba(245,196,81,.35);border-radius:16px;background:var(--surface)}
.affiliate-card p{margin:0}
.affiliate-card .affiliate-label{justify-self:start}
.affiliate-card .affiliate-partner{color:var(--muted);font-size:13px}
.affiliate-card .affiliate-title{color:#fff;font-weight:700;font-size:17px;line-height:1.5}
.affiliate-card .affiliate-text{color:#cbc3d7;font-size:15px;line-height:1.7}
.affiliate-card .affiliate-link{justify-self:start;margin-top:6px;padding:9px 18px;border-radius:10px;background:var(--primary);color:#30106a;font-weight:700;text-decoration:none}
.affiliate-note{color:var(--muted);font-size:12px;line-height:1.6}