/* /assets/css/network.css
   =========================================================
   fudosha.net /network/
   - Link cards (banner left / description right)
   - Visual: mimic /about/ NPC card
   - Rows: split/join switch (per card / per row)
   - Whole card clickable (JS)
   - SP: 縦積み（画像→説明）
   - No banner: alt を白デカ文字で中央表示
   ========================================================= */

:root{
  --network-ink: #1c2233;
  --network-hover: #f08a2a;

  --network-gap: clamp(0rem, 2.2vw, .95rem);
  --network-pad-y: clamp(.6rem, 2.4vw, 1.1rem);
  --network-pad-x: clamp(.8rem, 2.4vw, 1.75rem);
  --network-tile-gap: clamp(1.25rem, 3.0vw, 1.85rem);

  --network-card-line: rgba(20, 95, 145, 0.62);
  --network-card-fill: rgba(108, 138, 172, 0.83);
  --network-card-shadow: rgba(0, 0, 0, 0.42);

  --network-panel-fill: rgba(245,245,245,.46);
  --network-panel-shadow: rgba(0,0,0,.22);

  --network-ribbon-bg: rgba(0,0,0,.92);
  --network-ribbon-ink: #fff;
  --network-ribbon-fs: clamp(.75rem, 1.2vw, .9rem);

  --network-row-fs-pc: clamp(.9rem, 1.05vw, .9rem);
  --network-row-fs-sp: clamp(0.7rem, 3.8vw, .8rem);

  /* Banner stage (PC only) */
  --network-banner-stage-bg: rgba(0,0,0,.92);
  --network-banner-stage-border: rgba(255,255,255,.08);
  --network-banner-stage-radius: calc(12px * var(--pc-ui-scale, 1));
  --network-banner-stage-inset: 100%;
  --network-hero-banner-gap: .75rem;  /* 2枚の間隔 */
  --network-hero-banner-maxw: calc(200px * var(--pc-ui-scale, 1));  /* 1枚あたりの上限幅（←ここを変える） */

  /* no banner */
  --network-empty-minh: clamp(calc(120px * var(--pc-ui-scale, 1)), 18vw, calc(200px * var(--pc-ui-scale, 1)));
  --network-empty-fs: clamp(1.2rem, 3.2vw, 2.2rem);
  /* HERO */
  --net-hero-veil-color: rgba(245,245,245,1);

  --net-hero-pc-text: rgba(15, 18, 28, 0.92);
  --net-hero-pc-outline: rgba(255,255,255,.94);
  --net-hero-pc-outline-w: 1px;

  --net-hero-sp-text: rgba(15, 18, 28, 0.92);
  --net-hero-sp-outline: rgba(255,255,255,.96);
  --net-hero-sp-outline-w: 1px;

  /* separator */
  --network-sep: rgba(15, 18, 28, 0.35);

}

.network,
.network *{ box-sizing: border-box; }

.network{
  color: var(--network-ink);
  overflow-x: clip;
}

/* inject時に<p>が混ざっても余白源を殺す */
.network > p:not(.network-friends-label){
  margin: 0;
  height: 0;
}

.network-block{
  position: relative;
  padding: 0;
}

/* カード間隔 */
.network-block.network-tile{
  margin: 0 0 var(--network-tile-gap);
}

/* 念のため（カード自体は親幅に追従） */
#network .network-card{
  width: 100%;
}

/* card shell */
.network-card{
  background: var(--network-card-fill);
  border: 2px solid var(--network-card-line);
  border-radius: 14px;
  box-shadow: 0 12px 28px var(--network-card-shadow);
  overflow: hidden;
  width: 100%;
}

/* =========================================================
   Friends cards: hover "pyoko"
   ========================================================= */

/* hover演出は Friends のカード群だけに限定 */
.network-friends-cards .network-card{
  transform: translateZ(0);
  transition: transform 140ms ease, box-shadow 140ms ease;
  will-change: transform;
}

/* マウスオーバーでぴょこっと */
@media (hover: hover) and (pointer: fine){
  .network-friends-cards .network-card:hover{
    transform: translateY(-4px);
  }
}

/* キーボード操作でも同等（カード内のリンクにフォーカスが入った時） */
.network-friends-cards .network-card:focus-within{
  transform: translateY(-4px);
}

/* 動きを減らす設定の人には無効化 */
@media (prefers-reduced-motion: reduce){
  .network-friends-cards .network-card{
    transition: none;
  }
  .network-friends-cards .network-card:hover,
  .network-friends-cards .network-card:focus-within{
    transform: none;
  }
}

/* whole card link */
.network-card.is-link{
  cursor: pointer;
}
.network-card.is-link:focus-visible{
  outline: 3px solid rgba(240,138,42,.95);
  outline-offset: 4px;
}

.network-card-inner{
  padding: var(--network-pad-y);
}

/* grid: banner left / info right (PC) */
.network-tile-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--network-gap);
  align-items: stretch;
}

.network-tile-fig{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  position: relative; /* ← empty表示の ::after 用 */
}

.network-banner-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

/* base banner */
.network-banner{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
}

.network-info{
  background: var(--network-panel-fill);
  color: var(--network-ink);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 10px 18px var(--network-panel-shadow);
  text-align:left;
  min-width:0;
}

/* ribbon */
.network-role{
  display:inline-flex;
  align-items:center;
  margin: 0 0 .55em;
  padding: .35em .75em;
  background: var(--network-ribbon-bg);
  color: var(--network-ribbon-ink);
  font-size: var(--network-ribbon-fs);
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height:1;
}

.network-name{
  margin: 0 0 .55rem;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.05;
  font-size: clamp(1.4rem, 2.8vw, 1.8rem);
}

.network-name-sub{
  display:block;
  margin-top:.35rem;
  font-weight:800;
  font-size: clamp(.6rem, 1.1vw, .8rem);
  letter-spacing:.18em;
  opacity:.9;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.network-desc{
  margin: 0 0 .8rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}


/* links */
.network a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.network a:hover{ color: var(--network-hover); }

/* rows base */
.network-table{ margin:0; padding:0; }

/* default = split（2カラム） */
.network-row{
  display:grid;
  grid-template-columns: calc(140px * var(--pc-ui-scale, 1)) minmax(0, 1fr);
  gap: calc(16px * var(--pc-ui-scale, 1));
  padding: .6rem 0;
  border-top: 2px dashed rgba(28,34,51,.22);
}

.network-row dt,
.network-row dd{
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: var(--network-row-fs-pc);
}

.network-row dt{
  margin:0;
  font-weight:900;
  letter-spacing:.06em;
}

.network-row dd{
  margin:0;
  line-height:1.65;
}

.network-row.is-full{
  grid-template-columns: 1fr;
  gap: 0;
}

/* reverse option */
.network-tile.is-reverse .network-tile-fig{ order: 2; }
.network-tile.is-reverse .network-info{ order: 1; }

/* Friendsラベルは100%（=親の幅） */
.network-friends-label{
  margin: 0 0 .6rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* カード群だけ 90% */
.network-friends-cards{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
}

/* 既存カードは親幅に追従 */
.network-friends-cards .network-card{
  width: 100%;
}




/* =========================================================
   HERO (network)
   - 背景 + veil + overlay（/about/hero を簡略化：立ち絵なし）
   ========================================================= */

.network-hero{ padding: 0; }

.network-hero{
  --net-hero-bg-pos-pc: left top;
  --net-hero-bg-pos-sp: center;

  --net-hero-veil-pc: .72; /* inlineで上書き可 */
  --net-hero-veil-sp: .72; /* inlineで上書き可 */
}

.network-hero-media{
  display: grid;
  grid-template-areas: "stack";
  overflow: hidden;

  background-image: var(--net-hero-bg-pc, var(--net-hero-bg-sp));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--net-hero-bg-pos-pc);
  background-color: var(--bg);

  min-height: clamp(30rem, 50vw, 52dvh);
}

.network-hero-overlay{
  grid-area: stack;
  position: relative;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--network-gap);
  align-items: end;

  padding: var(--network-pad-y) var(--network-pad-x);
  padding-bottom: max(var(--network-pad-y), env(safe-area-inset-bottom));
}

/* HERO veil（PC既定） */
.network-hero-overlay::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--net-hero-veil-color);
  opacity: var(--net-hero-veil-pc);
  pointer-events: none;
  z-index: 0;
}

.network-hero-overlay > *{
  position: relative;
  z-index: 1;
}

.network-hero-info{
  max-width: 48rem;
  min-width: 0;
}

/* hero heading only */
.network-hero .network-name{
  font-size: clamp(1.5rem, 3.4vw, 1.8rem);
}

/* banner list in hero */
.network-hero-fig{
  margin: .65rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

.network-hero-banner{
  display: block;
  width: min(320px, 100%);
  height: auto;
  border-radius: 0px;
}

/* readability: text outline (PC) */
@media (min-width: 768px){
  .network-hero-info :is(.network-name, .network-name-sub, .network-row dt, .network-row dd){
    color: var(--net-hero-pc-text);
    text-shadow:
      var(--net-hero-pc-outline-w) 0 0 var(--net-hero-pc-outline),
      calc(var(--net-hero-pc-outline-w) * -1) 0 0 var(--net-hero-pc-outline),
      0 var(--net-hero-pc-outline-w) 0 var(--net-hero-pc-outline),
      0 calc(var(--net-hero-pc-outline-w) * -1) 0 var(--net-hero-pc-outline),
      var(--net-hero-pc-outline-w) var(--net-hero-pc-outline-w) 0 var(--net-hero-pc-outline),
      calc(var(--net-hero-pc-outline-w) * -1) var(--net-hero-pc-outline-w) 0 var(--net-hero-pc-outline),
      var(--net-hero-pc-outline-w) calc(var(--net-hero-pc-outline-w) * -1) 0 var(--net-hero-pc-outline),
      calc(var(--net-hero-pc-outline-w) * -1) calc(var(--net-hero-pc-outline-w) * -1) 0 var(--net-hero-pc-outline);
  }
}

@media (max-width: 767px){
  .network-hero-media{
    background-image: var(--net-hero-bg-sp, var(--net-hero-bg-pc));
    background-position: var(--net-hero-bg-pos-sp);
    min-height: clamp(24rem, 140vw, 52rem);
  }

  .network-hero-overlay::before{
    opacity: var(--net-hero-veil-sp);
  }

  .network-hero-info :is(.network-name, .network-name-sub, .network-row dt, .network-row dd){
    color: var(--net-hero-sp-text);
    text-shadow:
      var(--net-hero-sp-outline-w) 0 0 var(--net-hero-sp-outline),
      calc(var(--net-hero-sp-outline-w) * -1) 0 0 var(--net-hero-sp-outline),
      0 var(--net-hero-sp-outline-w) 0 var(--net-hero-sp-outline),
      0 calc(var(--net-hero-sp-outline-w) * -1) 0 var(--net-hero-sp-outline),
      var(--net-hero-sp-outline-w) var(--net-hero-sp-outline-w) 0 var(--net-hero-sp-outline),
      calc(var(--net-hero-sp-outline-w) * -1) var(--net-hero-sp-outline-w) 0 var(--net-hero-sp-outline),
      var(--net-hero-sp-outline-w) calc(var(--net-hero-sp-outline-w) * -1) 0 var(--net-hero-sp-outline),
      calc(var(--net-hero-sp-outline-w) * -1) calc(var(--net-hero-sp-outline-w) * -1) 0 var(--net-hero-sp-outline);
  }
}

/* hero -> friends separator */
.network-sep{
  border: 0;
  border-top: 2px dashed var(--network-sep);
    margin-top: 0;
}

/* =========================================================
   Rows layout switch
   ========================================================= */

/* join */
.network-table[data-layout="join"] .network-row,
.network-row.is-join{
  display:block;
}

.network-table[data-layout="join"] .network-row dt,
.network-table[data-layout="join"] .network-row dd,
.network-row.is-join dt,
.network-row.is-join dd{
  display:inline;
  margin:0;
}

.network-table[data-layout="join"] .network-row dt::after,
.network-row.is-join dt::after{
  content: attr(data-sep);
  font-weight:700;
  opacity:.75;
  margin-right: .45em;
}

.network-table[data-layout="join"] .network-row.is-full dt::after,
.network-row.is-full dt::after{
  content:"";
  margin:0;
}

/* joinカードでも、この行だけsplitへ */
.network-table[data-layout="join"] .network-row.is-split{
  display:grid;
  grid-template-columns: calc(140px * var(--pc-ui-scale, 1)) minmax(0, 1fr);
  gap: calc(16px * var(--pc-ui-scale, 1));
}
.network-table[data-layout="join"] .network-row.is-split dt,
.network-table[data-layout="join"] .network-row.is-split dd{
  display:block;
}
.network-table[data-layout="join"] .network-row.is-split dt::after{
  content:"";
  margin:0;
  opacity:0;
}

/* =========================================================
   PC: バナーを黒ステージに浮かせる（PCだけ）
   ========================================================= */
@media (min-width: 768px){
  .network-tile-fig{
    background: var(--network-banner-stage-bg);
    border: 0;
    overflow: hidden;
  }

  .network-banner-link{
    height: 100%;
  }

  .network-banner{
    width: var(--network-banner-stage-inset); /* ←100%維持 */
    box-shadow: none;
    border-radius: 0;
  }
}

/* =========================================================
   No banner fallback
   ========================================================= */
.network-tile-fig.is-empty{
  background: var(--network-banner-stage-bg);
  border: 1px solid var(--network-banner-stage-border);
  border-radius: var(--network-banner-stage-radius);
  overflow: hidden;
  min-height: var(--network-empty-minh);
}

.network-tile-fig.is-empty .network-banner-link{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.network-tile-fig.is-empty .network-banner{
  display: none;
}

.network-tile-fig.is-empty::after{
  content: attr(data-empty-text);
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 1rem;
  text-align: center;

  color: #fff;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: var(--network-empty-fs);

  /* クリックは下のリンクへ通す */
  pointer-events: none;
}

/* =========================================================
   SP: 縦積み（画像→説明）
   ========================================================= */
@media (max-width: 767px){
  .network-card-inner{
    padding: var(--network-pad-y);
  }

  .network-tile-grid{
    grid-template-columns: 1fr;
    gap: var(--network-gap);
  }

  .network-banner{
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 18px rgba(0,0,0,.35);
  }

  .network-row{
    grid-template-columns: 7.2em minmax(0, 1fr);
    gap: .8rem;
    padding: .45rem 0;
  }

  .network-row dt,
  .network-row dd{
    font-size: var(--network-row-fs-sp);
  }

  .network-table[data-layout="join"] .network-row.is-split{
    display:grid;
    grid-template-columns: 7.2em minmax(0, 1fr);
    gap: .8rem;
  }
}

.network-hero-fig{ gap: var(--network-hero-banner-gap); }

.network-hero-banner{
  width: min(var(--network-hero-banner-maxw),
             calc((100% - var(--network-hero-banner-gap)) / 2));
  height: auto;
}

/* =========================================================
   /network/ HERO: 説明下端＝背景下端（余白ゼロ）
   ========================================================= */

/* 1) ヒーローの“強制高さ”を無効化（これが本丸） */
.network-hero .network-hero-media{
  min-height: 0;
}

/* SP側で min-height を再指定してるので、こっちも潰す */
@media (max-width: 767px){
  .network-hero .network-hero-media{
    min-height: 0;
  }
}

/* 2) 下端の“下駄”を消す（safe-areaが欲しいなら env(...) だけ残す） */
.network-hero .network-hero-overlay{
  padding-bottom: 0; /* ←完全に下端一致 */
  /* padding-bottom: env(safe-area-inset-bottom);  ←iPhone下端だけ欲しいならこっち */
}

/* 3) 最終行の下paddingを消す（:last-child は改行テキストノードで外れるので last-of-type） */
.network-hero .network-table > .network-row:last-of-type{
  padding-bottom: 0;
}