/* メディアキット（media-kit/）だけの見た目。A4 縦1枚の紙の中は mm と pt で組む（画面では部品が紙ごと縮める）。
   紙は生成りの地に、上だけ夜市の帯。印刷でも同じ見た目（print-sheet.css が色の印刷を指定している）。
   幅での切り替えは site-responsive.css の K4 の区切り */

.mk-hero { min-height: min(40vw, 24rem); }
.mk-section { padding-top: clamp(3rem, 6vw, 4.5rem); }
.mk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; max-width: 210mm; margin: 0 auto 1.5rem; }
.mk-toolbar-note { margin: 0; color: var(--muted); font-size: .86rem; }
.mk-sheet { max-width: 210mm; margin: 0 auto; }

/* ---- 紙 ---- */
.mk-paper {
  --mk-ink: #1a0e14;
  --mk-sub: #6c5a63;
  --mk-rule: #eadfcd;
  --mk-hi: #c23b31;
  --mk-gold: #b8862b;
  display: flex;
  flex-direction: column;
  color: var(--mk-ink);
  font-family: var(--gothic);
  font-size: 8.4pt;
  line-height: 1.6;
  text-wrap: pretty;
}
.mk-paper p, .mk-paper h2, .mk-paper h3, .mk-paper ul, .mk-paper ol, .mk-paper dl, .mk-paper dd, .mk-paper figure { margin: 0; }
.mk-paper ul, .mk-paper ol { padding: 0; list-style: none; }

/* 上の帯：夜市の地に金の題 */
.mk-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40mm;
  gap: 9mm;
  align-items: end;
  min-height: 66mm;
  padding: 12mm 13mm 9mm;
  color: #fff6e8;
  background:
    radial-gradient(circle at 78% 18%, rgb(255 178 94 / .22), transparent 42%),
    radial-gradient(circle at 12% 110%, rgb(143 216 255 / .14), transparent 45%),
    linear-gradient(160deg, #1f1020, #0b0712 70%);
}
.mk-head::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1.2mm; background: linear-gradient(90deg, #e8443a, #f5c34b 55%, #8fd8ff); content: ""; }
.mk-eyebrow { color: #f5c34b; font-size: 7pt; font-weight: 700; letter-spacing: .32em; }
.mk-title { display: grid; gap: 1.2mm; margin-top: 3mm !important; font-family: var(--mincho); font-weight: 400; line-height: 1.2; }
.mk-name { font-size: 27pt; letter-spacing: .08em; }
.mk-edition { color: #f5c34b; font-size: 11pt; letter-spacing: .06em; }
.mk-tagline { max-width: 112mm; margin-top: 4.5mm !important; color: rgb(255 246 232 / .82); font-size: 8.6pt; line-height: 1.75; }
.mk-portrait { position: relative; align-self: stretch; overflow: hidden; border-radius: 20mm 20mm 1mm 1mm; box-shadow: 0 0 0 .35mm #f5c34b, 0 0 0 1.6mm rgb(11 7 18 / .9), 0 0 0 1.9mm rgb(245 195 75 / .4); }
.mk-portrait img { width: 100%; height: 100%; min-height: 48mm; object-fit: cover; object-position: 35% 30%; }

/* 本文 */
.mk-body { display: grid; gap: 5.5mm; padding: 7.5mm 13mm 6mm; }
.mk-profile { padding-left: 4mm; border-left: .8mm solid var(--mk-hi); font-family: var(--mincho); font-size: 10pt; line-height: 1.8; }
.mk-h { display: flex; align-items: baseline; gap: 2mm; margin-bottom: 2.6mm !important; color: var(--mk-hi); font-size: 7.4pt; font-weight: 700; letter-spacing: .18em; }
.mk-h::after { flex: 1; height: .25mm; align-self: center; background: var(--mk-rule); content: ""; }
.mk-h-note { color: var(--mk-sub); font-size: 6.6pt; font-weight: 400; letter-spacing: .04em; }

.mk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: .25mm solid var(--mk-rule); border-left: .25mm solid var(--mk-rule); }
.mk-stats > div { display: flex; flex-direction: column; padding: 2.4mm 3mm 2.6mm; border-right: .25mm solid var(--mk-rule); border-bottom: .25mm solid var(--mk-rule); }
.mk-stats dt { color: var(--mk-sub); font-size: 6.8pt; font-weight: 700; letter-spacing: .04em; line-height: 1.4; }
.mk-stat-value { order: -1; color: var(--mk-ink); font-family: var(--mincho); font-size: 16pt; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mk-stat-note { margin-top: .6mm !important; color: var(--mk-sub); font-size: 6pt; line-height: 1.4; }

.mk-cols { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 8mm; }
.mk-col { display: grid; align-content: start; gap: 5.5mm; }
.mk-bar { display: flex; height: 4.2mm; overflow: hidden; border-radius: .6mm; }
.mk-bar-seg--1 { background: #3b2038; }
.mk-bar-seg--2 { background: #c23b31; }
.mk-bar-seg--3 { background: #e89a3c; }
.mk-bar-seg--4 { background: #d9cbb6; }
.mk-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1mm 4mm; margin-top: 2.4mm !important; font-size: 7.6pt; }
.mk-legend li { display: flex; align-items: center; gap: 1.6mm; }
.mk-legend i { display: block; flex: none; width: 2.4mm; height: 2.4mm; border-radius: 50%; }
.mk-legend b { margin-left: auto; font-family: var(--mincho); font-size: 9pt; font-weight: 400; }
.mk-small { margin-top: 1.6mm !important; color: var(--mk-sub); font-size: 7.2pt; }
.mk-text { font-size: 8.8pt; line-height: 1.75; }

.mk-cases { display: grid; }
.mk-cases li { display: grid; grid-template-columns: 17mm minmax(0, 1fr); gap: 3mm; padding: 2mm 0; border-bottom: .25mm solid var(--mk-rule); }
.mk-cases li:first-child { padding-top: 0; }
.mk-case-date { color: var(--mk-gold); font-family: var(--mincho); font-size: 8pt; line-height: 1.7; }
.mk-case-body { display: grid; gap: .3mm; }
.mk-case-client { color: var(--mk-sub); font-size: 6.8pt; line-height: 1.45; }
.mk-case-body b { font-size: 8.4pt; line-height: 1.5; }
.mk-case-meta { color: var(--mk-sub); font-size: 7pt; line-height: 1.5; }

.mk-ng { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4mm 7mm; }
.mk-ng li { position: relative; padding-left: 4.2mm; font-size: 8pt; line-height: 1.55; }
.mk-ng li::before { position: absolute; top: 0; left: 0; color: var(--mk-hi); font-weight: 700; content: "×"; }

/* 下の帯：クレジット・ロゴ・連絡先 */
.mk-foot { display: grid; grid-template-columns: 1fr 1.1fr 1.35fr; gap: 6mm; margin-top: auto; padding: 5mm 13mm 6mm; border-top: .25mm solid var(--mk-rule); background: #f6eddc; font-size: 7.8pt; line-height: 1.6; }
.mk-foot-label { margin-bottom: .8mm !important; color: var(--mk-hi); font-size: 6.6pt; font-weight: 700; letter-spacing: .16em; }
.mk-foot .mk-small { margin-top: .4mm !important; font-size: 6.8pt; }