/* =====================================================================
   Bio Page OVERRIDE (final / single source of truth)
   Goal (now): Make layout NEVER overflow horizontally.
   - Keep the existing List "top area" (thumb + title + role + body line drop)
   - Do NOT chase visual polish yet; just make it safe/stable.
   - Switch by: #bio-page[data-bio-view]
===================================================================== */

/* Hide both, then show via #bio-page attribute */
body.bio-page #bio-page .bio[data-bio-view="grid"],
body.bio-page #bio-page .bio[data-bio-view="list"]{
  display: none;
}

body.bio-page #bio-page[data-bio-view="grid"] .bio[data-bio-view="grid"]{
  display: block;
}
body.bio-page #bio-page[data-bio-view="list"] .bio[data-bio-view="list"]{
  display: block;
}

/* ---------------------------------------------------------------------
   NO-OVERFLOW SAFETY (Grid + List 共通)
   - ここが本体：どの要素が固定幅でも、横にはみ出さない
--------------------------------------------------------------------- */

/* Bio page root: keep content below fixed header, and never overflow */
body.bio-page #bio-page{
  max-width: 100%;
  box-sizing: border-box;
}

/* Grid only: page padding */
body.bio-page #bio-page[data-bio-view="grid"]{
  padding:
    calc(var(--header-h) + 40px)
    clamp(24px, 4vw, 40px)
    56px;
}

/* List only: no extra page padding */
body.bio-page #bio-page[data-bio-view="list"]{
  --bio-list-date-gap: 10px;
  --bio-list-date-tracking: 0.0em;
  padding: var(--header-h) 0 0;
}

/* Grid only: close button visible */
body.bio-page .bio-page-close{
  position: fixed;
  top: calc(var(--header-h, 60px) + 12px);
  left: 12px;
  z-index: 1200;

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

  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;

  color: currentColor;
  text-decoration: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 0.4;
}

body.bio-page .bio-page-close:hover{
  opacity: 1;
}

body.bio-page .bio-page-close-icon{
  display: block;
  width: 20px;
  height: 20px;
}

body.bio-page.bio-list-view .bio-page-close{
  display: none;
}

body.bio-page.bio-grid-view .bio-page-close{
  display: inline-flex;
}

  /* ===== Bio Grid (profile page) =====
     Scope: only when Grid view is active
     Policy: 1 knob = 1 responsibility
  */
  body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root{
    /* ===== Layout ===== */
    --bio-grid-width: 1040px;
    --bio-grid-media-width: 360px;
    --bio-grid-gap-x: 28px;
    --bio-grid-gap-y: 20px;
    --bio-grid-align-items: start;

    /* ===== Media ===== */
    --bio-grid-photo-max-h: 76vh;

    /* ===== Name ===== */
    --bio-grid-name-mb: 6px;
    --bio-grid-name-size: 19px;
    --bio-grid-name-lh: 1.2;
    --bio-grid-name-weight: 500;
    --bio-grid-name-tracking: 0.01em;

    /* ===== Role ===== */
    --bio-grid-role-mb: 18px;
    --bio-grid-role-size: 12px;
    --bio-grid-role-lh: 1.1;
    --bio-grid-role-opacity: 0.72;

    /* ===== Body Text ===== */
    --bio-grid-text-mb: 16px;
    --bio-grid-text-size: 13px;
    --bio-grid-text-lh: 1.75;

    /* ===== CV ===== */
    --bio-grid-cv-mb: 16px;
    --bio-grid-cv-row-gap-x: 10px;
    --bio-grid-cv-row-pad-y: 3px;
    --bio-grid-cv-dt-size: 11px;
    --bio-grid-cv-dt-lh: 1.5;
    --bio-grid-cv-dt-opacity: 0.72;
    --bio-grid-cv-dd-size: 12px;
    --bio-grid-cv-dd-lh: 1.5;

    /* ===== Social ===== */
    --bio-grid-social-mt: 0px;
    --bio-grid-social-mb: 18px;
    --bio-grid-social-gap: 12px;
    --bio-grid-social-size: 30px;
    --bio-grid-social-icon-size: 14px;
    --bio-grid-social-border-w: 1px;
    --bio-grid-social-border: rgba(0,0,0,0.1);
    --bio-grid-social-border-hover: rgba(0,0,0,0.24);
    --bio-grid-social-radius: 999px;
    --bio-grid-social-bg: rgba(0,0,0,0.02);
    --bio-grid-social-bg-hover: rgba(0,0,0,0.05);
    --bio-grid-social-icon-opacity: 0.8;
    --bio-grid-social-shift-y-hover: -1px;
    --bio-grid-social-padding-top: 2px;

    /* ===== Links ===== */
    --bio-grid-links-mt: 0px;
    --bio-grid-links-size: 12px;
    --bio-grid-links-lh: 1.5;
    --bio-grid-links-opacity: 0.82;
    --bio-grid-links-underline-offset: 2px;

    box-sizing: border-box;
    max-width: var(--bio-grid-width, 1040px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, var(--bio-grid-media-width, 360px)) minmax(0, 1fr);
    gap: var(--bio-grid-gap-y, 20px) var(--bio-grid-gap-x, 28px);
    align-items: var(--bio-grid-align-items, start);
  }

  body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root .bio__media{
    min-width: 0;
  }

  body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root .bio__photo{
    display: block;
    width: 100%;
    height: auto;
    max-height: var(--bio-grid-photo-max-h, 76vh);
    object-fit: contain;
  }

  body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root .bio__body{
    min-width: 0;
  }

  body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root .bio__name{
    margin: 0 0 var(--bio-grid-name-mb, 6px);
    font-size: var(--bio-grid-name-size, 19px);
    line-height: var(--bio-grid-name-lh, 1.2);
    font-weight: var(--bio-grid-name-weight, 500);
    letter-spacing: var(--bio-grid-name-tracking, 0.01em);
  }

  body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root .bio__role{
    margin: 0 0 var(--bio-grid-role-mb, 18px);
    font-size: var(--bio-grid-role-size, 12px);
    line-height: var(--bio-grid-role-lh, 1.4);
    opacity: var(--bio-grid-role-opacity, 0.72);
  }

  body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root .bio__text p{
    margin: 0 0 var(--bio-grid-text-mb, 16px);
    font-size: var(--bio-grid-text-size, 13px);
    line-height: var(--bio-grid-text-lh, 1.75);
  }

  body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root .bio__cv{
    margin: 0 0 var(--bio-grid-cv-mb, 16px);
  }

  body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root .bio__cv-row{
    column-gap: var(--bio-grid-cv-row-gap-x, 10px);
    padding: var(--bio-grid-cv-row-pad-y, 3px) 0;
  }

  body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root .bio__cv-row dt{
    font-size: var(--bio-grid-cv-dt-size, 12px);
    line-height: var(--bio-grid-cv-dt-lh, 1.5);
    opacity: var(--bio-grid-cv-dt-opacity, 0.72);
  }

  body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root .bio__cv-row dd{
    font-size: var(--bio-grid-cv-dd-size, 12px);
    line-height: var(--bio-grid-cv-dd-lh, 1.5);
  }

  body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root .bio__socials{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--bio-grid-social-gap, 12px);
    margin: var(--bio-grid-social-mt, 0px) 0 var(--bio-grid-social-mb, 18px);
    padding-top: var(--bio-grid-social-padding-top, 2px);
  }

  body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root .bio__socials a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--bio-grid-social-size, 30px);
    height: var(--bio-grid-social-size, 30px);
    border: var(--bio-grid-social-border-w, 1px) solid var(--bio-grid-social-border, rgba(0,0,0,0.1));
    border-radius: var(--bio-grid-social-radius, 999px);
    background: var(--bio-grid-social-bg, rgba(0,0,0,0.02));
    transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
  }

  body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root .bio__socials a:hover{
    border-color: var(--bio-grid-social-border-hover, rgba(0,0,0,0.24));
    background: var(--bio-grid-social-bg-hover, rgba(0,0,0,0.05));
    transform: translateY(var(--bio-grid-social-shift-y-hover, -1px));
  }

  body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root .bio__socials img{
    display: block;
    width: var(--bio-grid-social-icon-size, 14px);
    height: var(--bio-grid-social-icon-size, 14px);
    object-fit: contain;
    opacity: var(--bio-grid-social-icon-opacity, 0.8);
  }

  body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root .bio__links{
    margin-top: var(--bio-grid-links-mt, 0px);
  }

  body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root .bio__links a{
    font-size: var(--bio-grid-links-size, 12px);
    line-height: var(--bio-grid-links-lh, 1.5);
    text-decoration: underline;
    text-underline-offset: var(--bio-grid-links-underline-offset, 2px);
    opacity: var(--bio-grid-links-opacity, 0.82);
  }

  body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root .bio__links a:hover{
    opacity: 1;
  }

  /* responsive: stack */
  @media screen and (max-width: 820px){
    body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root{
      --bio-grid-sp-padding: 20px;
      --bio-grid-sp-gap: 16px;

      grid-template-columns: 1fr;
      padding: var(--bio-grid-sp-padding, 20px);
      gap: var(--bio-grid-sp-gap, 16px);
    }

    body.bio-page #bio-page[data-bio-view="grid"] .bio-grid #bio-grid-root .bio__photo{
      max-height: none;
    }
  }
  /* ===== /Bio Grid (profile page) ===== */

/* ---------------------------------------------------------------------
   List view: keep the "top area" you already have
--------------------------------------------------------------------- */

/* List row: thumb + title/role line + body line below */
body.bio-page #bio-page[data-bio-view="list"] .bio-list-row{
  display: flex;
  flex-wrap: wrap;                    /* allow body to drop below */
  align-items: center;
  gap: 12px;

  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.bio-page #bio-page[data-bio-view="list"] .bio-list-row img.thumb-img{
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 auto;
  margin: 0;
}

body.bio-page #bio-page[data-bio-view="list"] .bio-list-row-social img.thumb-img{
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 auto;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.02);
}

body.bio-page #bio-page[data-bio-view="list"] .bio-social-link{
  display: block;
  text-decoration: none;
  color: inherit;
}

body.bio-page #bio-page[data-bio-view="list"] .bio-social-link:hover{
  opacity: 1;
}

/* Title + role line: match Works List (row / baseline / ellipsis) */
body.bio-page #bio-page[data-bio-view="list"] .bio-list-info.item-info{
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  padding: 0;
  flex: 1 1 auto;
}

body.bio-page #bio-page[data-bio-view="list"] .bio-list-info.item-info h3,
body.bio-page #bio-page[data-bio-view="list"] .bio-list-info.item-info p{
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.bio-page #bio-page[data-bio-view="list"] .bio-list-info.item-info h3{
  font-size: 14px;
  font-weight: 600;
}

body.bio-page #bio-page[data-bio-view="list"] .bio-list-info.item-info p.bio__role{
  font-size: 12px;
  opacity: 0.8;
}

/* Body text: visible. Keep it simple/safe first (no horizontal overflow). */
body.bio-page #bio-page[data-bio-view="list"] .bio-list-text{
  flex: 0 0 100%;
  min-width: 0;
  margin-top: 12px;
  margin-left: 60px;                  /* 48px thumb + 12px gap */
}

body.bio-page #bio-page[data-bio-view="list"] .bio-line-plain{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;

  /* Start Works-like: 1-line ellipsis (later you can expand to multi-line) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.bio-page #bio-page[data-bio-view="list"] .bio-line-plain.bio-line-split{
  display: flex;
  align-items: baseline;
  gap: var(--bio-list-date-gap, 10px);
}

body.bio-page #bio-page[data-bio-view="list"] .bio-line-date{
  flex: 0 0 auto;
  margin: 0;
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: var(--bio-list-date-tracking, 0.08em);
  opacity: 0.9;
}

body.bio-page #bio-page[data-bio-view="list"] .bio-line-body{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* List 2行目以降用：サムネ領域(48) + gap(12) */
body.bio-page #bio-page[data-bio-view="list"] .bio-list-spacer{
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
}

/* 強弱なし行は p だけ（Works listの p 相当） */
body.bio-page #bio-page[data-bio-view="list"] .bio-line-plain.bio-back-link{
  display: inline-block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

body.bio-page #bio-page[data-bio-view="list"] .bio-line-plain.bio-back-link:hover{
  opacity: 1;
}

/* ===== /Bio Page OVERRIDE ===== */