/* ============================================
 * manga_inkblot · 日式漫画水墨 黑白红 分镜风格
 * Variables · Reset · Layout · Components
 * ============================================ */
:root{
    --ink:#0A0A0A;
    --paper:#F5F2E8;
    --blood:#D81E1E;
    --ash:#888;
    --line:#0A0A0A;
    --halftone:radial-gradient(circle, #0A0A0A 1.2px, transparent 1.6px);
}
*,*:before,*:after{box-sizing:border-box}
html,body{margin:0;padding:0}
body.mg-body{
    background:var(--paper);
    color:var(--ink);
    font-family:"Courier New","Andale Mono","Liberation Mono",monospace;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    background-image:var(--halftone);
    background-size:6px 6px;
}
a{color:inherit;text-decoration:none}
img,mip-img{max-width:100%;display:block}
.mg-stage{display:block}

/* SFX Word */
.mg-cta__fx,.mg-h__sfx,.mg-hero__sfx,.mg-strip__no,.mg-marquee .mg-h__sfx,
.mg-promo__stamp,.mg-foot__fx,.mg-list__sfx,.mg-detail__sfx,.mg-final__sfx,
.mg-card__sfx,.mg-404__sfx,.mg-foot__bar-fx{
    font-family:"Impact","Arial Black","Helvetica",sans-serif;
    letter-spacing:.05em;
    font-style:italic;
    font-weight:900;
}

/* HEADER ============================== */
.mg-bar{
    display:grid;
    grid-template-columns:1fr 2fr 1fr;
    align-items:center;
    border-bottom:4px solid var(--ink);
    background:var(--paper);
    padding:14px 28px;
    position:sticky;top:0;z-index:50;
}
.mg-logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:22px}
.mg-logo__kanji{
    display:inline-grid;place-items:center;
    width:42px;height:42px;
    background:var(--ink);color:var(--paper);
    border-radius:50%;font-size:24px;
    transform:rotate(-6deg);
}
.mg-nav{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:22px;flex-wrap:wrap}
.mg-nav a{
    font-weight:900;font-size:13px;letter-spacing:.1em;
    padding:6px 0;border-bottom:2px solid transparent;
}
.mg-nav a:hover{border-bottom-color:var(--blood);color:var(--blood)}
.mg-bar__panel--cta{text-align:right}
.mg-cta{
    position:relative;display:inline-flex;align-items:center;gap:10px;
    background:var(--ink);color:var(--paper);
    padding:12px 22px;font-weight:900;letter-spacing:.08em;
    border:3px solid var(--ink);
    clip-path:polygon(6% 0,100% 0,94% 100%,0 100%);
    transition:transform .15s;
}
.mg-cta:hover{transform:translate(-2px,-2px);background:var(--blood);border-color:var(--blood)}
.mg-cta__fx{
    color:var(--blood);background:var(--paper);
    padding:2px 8px;font-size:13px;
    transform:rotate(-8deg);
}
.mg-cta--ghost{background:transparent;color:var(--ink);}
.mg-cta--ghost:hover{background:var(--ink);color:var(--paper)}
.mg-cta--lg{padding:22px 40px;font-size:20px}

/* HERO ================================ */
.mg-hero{
    position:relative;
    display:grid;grid-template-columns:1.5fr 1fr;
    gap:0;
    border-bottom:4px solid var(--ink);
    overflow:hidden;
}
.mg-hero__halftone{
    position:absolute;inset:0;
    background-image:radial-gradient(circle, #0A0A0A 2px, transparent 2.5px);
    background-size:14px 14px;
    opacity:.18;pointer-events:none;
}
.mg-hero__sfx{
    position:absolute;font-size:120px;color:var(--blood);
    -webkit-text-stroke:3px var(--ink);
    text-shadow:6px 6px 0 var(--ink);
    z-index:3;pointer-events:none;
}
.mg-hero__sfx--1{top:8%;left:42%;transform:rotate(-12deg)}
.mg-hero__sfx--2{bottom:6%;right:6%;transform:rotate(8deg);font-size:90px;color:var(--ink);text-shadow:6px 6px 0 var(--blood);-webkit-text-stroke:3px var(--paper)}
.mg-hero__panel{padding:80px 60px;position:relative;z-index:2;border-right:4px solid var(--ink)}
.mg-hero__panel--main{background:var(--paper)}
.mg-hero__panel--side{
    background:var(--ink);color:var(--paper);
    display:grid;grid-template-columns:1fr 1fr;gap:18px;align-content:center;
    border-right:none;
}
.mg-hero__tag{display:inline-block;background:var(--blood);color:var(--paper);padding:4px 12px;font-weight:900;letter-spacing:.1em;font-size:12px;margin-bottom:18px}
.mg-hero__title{font-family:"Impact","Arial Black",sans-serif;font-size:74px;line-height:.95;margin:0 0 22px;text-transform:uppercase}
.mg-hero__title em{color:var(--blood);font-style:italic;text-decoration:underline wavy var(--blood) 4px}
.mg-hero__sub{font-size:16px;max-width:520px;margin-bottom:30px;color:#222}
.mg-hero__btns{display:flex;gap:14px;flex-wrap:wrap}
.mg-hero__stat{
    border:2px dashed var(--paper);
    padding:18px;text-align:center;
}
.mg-hero__num{display:block;font-family:"Impact",sans-serif;font-size:38px;color:var(--blood);line-height:1}
.mg-hero__stat span:last-child{display:block;font-size:11px;letter-spacing:.2em;margin-top:6px}

/* SECTION HEADER */
.mg-h{padding:50px 28px 20px;text-align:center;position:relative}
.mg-h__sfx{position:absolute;top:0;left:50%;transform:translate(-50%,-30%) rotate(-6deg);font-size:70px;color:#0A0A0A0d;-webkit-text-stroke:2px var(--ink)}
.mg-h h2{font-family:"Impact",sans-serif;font-size:38px;margin:0;letter-spacing:.04em}
.mg-h p{color:var(--ash);margin:8px 0 0}
.mg-h--inv{background:var(--ink);color:var(--paper);padding:36px 28px}
.mg-h--inv h2{color:var(--paper)}

/* ABOUT ================================ */
.mg-about{padding:0 28px 60px;background:var(--paper)}
.mg-about__body{max-width:900px;margin:0 auto;border:3px solid var(--ink);padding:32px 28px;background:var(--paper);position:relative}
.mg-about__body:before{content:"INFO";position:absolute;top:-14px;left:20px;background:var(--blood);color:var(--paper);padding:4px 14px;font-weight:900;font-size:12px;letter-spacing:.1em}
.mg-about__body p{margin:0 0 14px;line-height:1.85;color:#222}
.mg-about__body p:last-child{margin-bottom:0}

/* STRIP ================================ */
.mg-strip{padding:0 28px 60px;background:var(--paper)}
.mg-strip__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:4px solid var(--ink)}
.mg-strip__cell{
    position:relative;padding:14px;
    border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);
    background:var(--paper);
    transition:background .2s;
}
.mg-strip__cell:nth-child(4n){border-right:none}
.mg-strip__cell:nth-last-child(-n+4){border-bottom:none}
.mg-strip__cell:hover{background:var(--blood);color:var(--paper)}
.mg-strip__no{
    position:absolute;top:8px;left:8px;z-index:2;
    background:var(--ink);color:var(--paper);
    padding:3px 10px;font-size:12px;font-weight:900;letter-spacing:.1em;
}
.mg-strip__cell mip-img{aspect-ratio:4/3;background:#000}
.mg-strip__name{font-family:"Impact",sans-serif;font-size:16px;margin:10px 0 4px;text-transform:uppercase}
.mg-strip__rtp{display:inline-block;border:2px solid currentColor;padding:2px 8px;font-size:11px;font-weight:900}

/* MARQUEE ============================== */
.mg-marquee{background:var(--ink);color:var(--paper);padding-bottom:40px}
.mg-marquee__rail{overflow:hidden;border-top:3px solid var(--paper);border-bottom:3px solid var(--paper);padding:24px 0}
.mg-marquee__track{display:flex;gap:24px;animation:mg-scroll 35s linear infinite;width:max-content}
.mg-marquee__cell{flex:0 0 220px;text-align:center}
.mg-marquee__cell mip-img{border:3px solid var(--paper);aspect-ratio:3/2}
.mg-marquee__cell span{display:block;margin-top:8px;font-size:13px;letter-spacing:.1em}
@keyframes mg-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* PROMO ================================ */
.mg-promo{padding:0 28px 70px;background:var(--paper)}
.mg-promo__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.mg-promo__card{
    position:relative;padding:36px 22px 26px;
    border:3px solid var(--ink);
    background:var(--paper);
    transition:transform .2s;
}
.mg-promo__card:nth-child(odd){transform:rotate(-1deg)}
.mg-promo__card:nth-child(even){transform:rotate(1deg)}
.mg-promo__card:hover{transform:translateY(-4px) rotate(0)}
.mg-promo__stamp{
    position:absolute;top:-18px;right:-18px;
    width:64px;height:64px;border-radius:50%;
    background:var(--blood);color:var(--paper);
    display:grid;place-items:center;
    font-size:18px;font-weight:900;
    border:3px solid var(--ink);
    transform:rotate(-12deg);
}
.mg-promo__card h3{font-family:"Impact",sans-serif;font-size:22px;margin:0 0 10px}
.mg-promo__card p{margin:0;color:#333}

/* QNA :: DETAILS ======================= */
.mg-qna{padding:0 28px 80px;background:var(--paper)}
.mg-qna__list{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.mg-qna__item{border:3px solid var(--ink);background:var(--paper)}
.mg-qna__item summary{
    list-style:none;cursor:pointer;
    padding:18px 22px;font-weight:900;font-size:16px;
    display:flex;justify-content:space-between;align-items:center;
}
.mg-qna__item summary::-webkit-details-marker{display:none}
.mg-qna__item summary:after{content:"＋";font-size:24px;color:var(--blood);font-weight:900}
.mg-qna__item[open] summary:after{content:"−"}
.mg-qna__item[open]{background:var(--ink);color:var(--paper)}
.mg-qna__item p{margin:0;padding:0 22px 22px;line-height:1.8;color:inherit}

/* FINAL CTA ============================ */
.mg-final{
    text-align:center;padding:90px 28px;
    background:var(--blood);color:var(--paper);
    border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);
    position:relative;overflow:hidden;
}
.mg-final__sfx{
    font-size:120px;color:transparent;-webkit-text-stroke:3px var(--paper);
    position:absolute;top:-30px;left:50%;transform:translateX(-50%) rotate(-6deg);
    pointer-events:none;
}
.mg-final h2{font-family:"Impact",sans-serif;font-size:46px;margin:30px 0 16px;letter-spacing:.04em}
.mg-final p{max-width:600px;margin:0 auto 30px}
.mg-final .mg-cta{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.mg-final .mg-cta:hover{background:var(--ink);color:var(--paper)}

/* FOOT ================================= */
.mg-foot{background:var(--ink);color:var(--paper);padding:60px 28px 0}
.mg-foot__row{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;max-width:1200px;margin:0 auto}
.mg-foot__title{font-family:"Impact",sans-serif;font-size:18px;letter-spacing:.15em;border-bottom:2px solid var(--blood);padding-bottom:10px;margin:0 0 14px}
.mg-foot__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.mg-foot__list a:hover{color:var(--blood)}
.mg-foot__sfx{color:var(--blood);font-style:italic}
.mg-foot__fx{font-size:34px;margin:6px 0;color:var(--paper)}
.mg-foot__fx--1{color:var(--blood);transform:rotate(-3deg)}
.mg-foot__fx--2{transform:rotate(2deg)}
.mg-foot__fx--3{color:var(--ash);transform:rotate(-1deg)}
.mg-foot__bar{
    margin-top:40px;padding:18px 0;
    border-top:2px dashed var(--ash);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
    font-size:12px;letter-spacing:.1em;
}
.mg-foot__bar-fx{color:var(--blood)}

/* ARTICLE LIST ========================= */
.mg-list{padding:60px 28px}
.mg-list__head{text-align:center;margin-bottom:40px;position:relative}
.mg-list__sfx{font-size:60px;color:var(--blood);transform:rotate(-8deg);display:inline-block}
.mg-list__title{font-family:"Impact",sans-serif;font-size:48px;margin:6px 0;letter-spacing:.04em}
.mg-list__sub{color:var(--ash)}
.mg-list__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1200px;margin:0 auto}
.mg-card{position:relative;border:3px solid var(--ink);background:var(--paper);transition:transform .2s}
.mg-card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--blood)}
.mg-card__sfx{position:absolute;top:-14px;left:-14px;background:var(--blood);color:var(--paper);padding:4px 10px;font-size:13px;z-index:2;transform:rotate(-6deg)}
.mg-card__img{display:block}
.mg-card__img mip-img{aspect-ratio:5/3;border-bottom:3px solid var(--ink)}
.mg-card__body{padding:18px}
.mg-card__title{font-family:"Impact",sans-serif;font-size:18px;margin:0 0 10px}
.mg-card__excerpt{color:#333;font-size:14px;margin:0 0 12px;line-height:1.7}
.mg-card__date{color:var(--ash);font-size:12px;letter-spacing:.1em}

/* DETAIL =============================== */
.mg-detail{max-width:900px;margin:60px auto;padding:0 28px}
.mg-detail__panel{border:4px solid var(--ink);padding:36px 30px;background:var(--paper);position:relative}
.mg-detail__sfx{position:absolute;top:-22px;right:18px;background:var(--blood);color:var(--paper);padding:6px 14px;font-size:14px}
.mg-detail__title{font-family:"Impact",sans-serif;font-size:42px;margin:0 0 14px;line-height:1.1}
.mg-detail__meta{display:flex;flex-wrap:wrap;gap:18px;color:var(--ash);font-size:13px;letter-spacing:.05em}
.mg-detail__body{padding:30px 0;font-size:16px;line-height:1.9}
.mg-detail__body img{margin:14px 0;border:3px solid var(--ink)}
.mg-detail__foot{text-align:center;padding-top:20px;border-top:3px dashed var(--ink)}

/* 404 ================================== */
.mg-404{min-height:60vh;display:grid;place-items:center;padding:60px 28px}
.mg-404__panel{text-align:center;border:4px solid var(--ink);background:var(--paper);padding:60px 50px;position:relative}
.mg-404__sfx{display:block;font-size:90px;color:var(--blood);-webkit-text-stroke:3px var(--ink);transform:rotate(-8deg)}
.mg-404__num{font-family:"Impact",sans-serif;font-size:120px;margin:10px 0;letter-spacing:.1em}
.mg-404__txt{margin:0 0 24px;color:#333}

/* RESPONSIVE =========================== */
@media (max-width:960px){
    .mg-bar{grid-template-columns:1fr 1fr;padding:12px 18px}
    .mg-bar__panel--nav{display:none}
    .mg-hero{grid-template-columns:1fr}
    .mg-hero__panel{padding:50px 24px;border-right:none;border-bottom:4px solid var(--ink)}
    .mg-hero__title{font-size:48px}
    .mg-hero__sfx{font-size:70px}
    .mg-strip__grid{grid-template-columns:repeat(2,1fr)}
    .mg-strip__cell:nth-child(2n){border-right:none}
    .mg-strip__cell{border-right:3px solid var(--ink);border-bottom:3px solid var(--ink)}
    .mg-promo__grid{grid-template-columns:repeat(2,1fr)}
    .mg-foot__row{grid-template-columns:1fr}
    .mg-list__grid{grid-template-columns:1fr}
    .mg-final h2{font-size:32px}
    .mg-final__sfx{font-size:70px}
}