/* ======================================================
   Resident Diary（研修医日記）
   - archive + single
   - Recruit NEWS風（max-width:980px / 白カード / 薄枠 / 影）
====================================================== */

/* ======================================================
   Archive：パンくず=1100 / タイトル=980（研修医日記）
====================================================== */

/* パンくずの基準：1100 */
.archive-resident-diary .rd-head{
  max-width: var(--container);  /* 1100px */
  margin: 0 auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}

/* タイトル：980 */
.archive-resident-diary .rd-head .page-header{
  max-width: 980px;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  width: auto; /* full-bleed系の事故防止 */
}


/* ======================================================
   Archive
====================================================== */

/* 全体幅を 980px に揃える */
.archive-resident-diary .page-content{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* 一覧をカード化 */
.archive-resident-diary .diary-list{
  margin: 18px auto 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  border-radius: 0;
  overflow: hidden;
}

/* 行区切り */
.archive-resident-diary .diary-item{
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.archive-resident-diary .diary-item:last-child{
  border-bottom: 0;
}

/* 3カラム：日付 / タイトル / 研修医名（署名） */
.archive-resident-diary .diary-link{
  display: grid;
  grid-template-columns: 110px 1fr 140px;
  column-gap: 12px;
  align-items: center;
  padding: 12px 16px;
  text-decoration: none;
  transition: background-color .2s ease;
}

/* 日付 */
.archive-resident-diary .diary-date{
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.2;
  color: rgba(0,0,0,.55);
}

/* タイトル（はみ出し対策つき） */
.archive-resident-diary .diary-title{
  font-size: 14px;
  line-height: 1.4;
  color: #666;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: transform .2s ease, color .2s ease;
  transform-origin: left center;
}

/* 研修医名（署名） */
.archive-resident-diary .diary-resident{
  text-align: right;
  white-space: nowrap;
  color: #555;
  font-size: 14px;
}

/* hover / focus */
.archive-resident-diary .diary-link:hover,
.archive-resident-diary .diary-link:focus-visible{
  background: rgba(30, 90, 170, 0.04);
}
.archive-resident-diary .diary-link:hover .diary-title,
.archive-resident-diary .diary-link:focus-visible .diary-title{
  transform: scale(1.03);
  color: #1f5aa6;
}

/* スマホ：2段レイアウト（date/resident → title） */
@media (max-width: 520px){
  .archive-resident-diary .diary-link{
    grid-template-columns: 1fr 140px;
    grid-template-areas:
      "date resident"
      "title title";
    row-gap: 6px;
  }
  .archive-resident-diary .diary-date{ grid-area: date; }

  .archive-resident-diary .diary-resident{
    grid-area: resident;
    justify-self: end;
  }

  .archive-resident-diary .diary-title{
    grid-area: title;
    white-space: normal; /* 2行OK（1行固定なら white-space: nowrap; に） */
  }
}


/* ======================================================
   Single
====================================================== */

.single-resident-diary .diary-single__wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* 日付＋研修医名（上段） */
.single-resident-diary .diary-single__meta{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 10px;
  color: rgba(0,0,0,.55);
  font-size: 13px;
  line-height: 1.2;
}

.single-resident-diary .diary-single__date{
  white-space: nowrap;
}

.single-resident-diary .diary-single__resident{
  white-space: nowrap;
  color: #555;
  font-size: 18px;
  font-weight: 700;
}

/* 本文カード */
.single-resident-diary .diary-single__card{
  margin: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  border-radius: 0;
  overflow: hidden;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* 本文（罫線は擬似要素で描画する） */
.single-resident-diary .diary-single__content{
  position: relative;
  padding: 22px 16px; /* 上を少し増やして、開始行ズレを吸収 */
  background: #fff;
}

/* 本文の読みやすさ */
.single-resident-diary .diary-single__content p{
  margin: 0 0 1.8em;   /* ← 行高と同じ */
  line-height: 1.8;
  color: #333;
  text-align: justify;
}

/* 見出し */
.single-resident-diary .diary-single__content h2,
.single-resident-diary .diary-single__content h3{
  margin: 22px 0 10px;
  line-height: 1.3;
}

/* テキストを罫線より1文字分内側に */
.single-resident-diary .diary-single__content{
  padding-left: calc(16px + 2em);
  padding-right: calc(16px + 2em);
}

@media (max-width: 520px){

  /* 本文（罫線は擬似要素で描画する） */
  .single-resident-diary .diary-single__content{
    position: relative;
    padding: 16px 16px; /* 上を少し増やして、開始行ズレを吸収 */
    background: #fff;
  }
}


/* ======================================================
   レポート用紙風：罫線（左右を30px空ける・開始位置を合わせる）
====================================================== */

/* 罫線レイヤー */
.single-resident-diary .diary-single__content::before{
  content: "";
  position: absolute;

  /* 左右30pxは罫線を出さない */
  left: 30px;
  right: 30px;

  /* 開始行のズレ調整：上に余白を作って開始位置を下げる */
  top: 22px;   /* ← ここが「開始行」調整ポイント */
  bottom: 0;

  /* クリックを邪魔しない */
  pointer-events: none;

  /* 罫線 */
  background-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.06) 1px,
      transparent 1px
    );
  background-size: 100% 1.8em;  /* line-height 1.8 と一致 */
  background-position: left top;
}

/* 見出し・画像まわりは罫線から浮かせる（読みやすさ） */
.single-resident-diary .diary-single__content h2,
.single-resident-diary .diary-single__content h3,
.single-resident-diary .diary-single__content figure{
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 4px 0;
}

/* p も手前に出しておく（線の上に文字が乗るのを安定化） */
.single-resident-diary .diary-single__content p{
  position: relative;
  z-index: 1;
}


/* ======================================================
   Single：最下部ナビ（前/一覧/次）
   - PC：3列（前｜一覧｜次）
   - SP：1行目 2列（前｜次） / 2行目 一覧（全幅）
====================================================== */

.single-resident-diary .diary-single__nav{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin: 14px 0 0;
  padding: 0 2px;
}

/* ボタン共通 */
.single-resident-diary .diary-single__nav a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  text-decoration: none;
  font-weight: 700;
  color: rgba(0,0,0,.72);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* PC：配置 */
.single-resident-diary .diary-single__prev{ justify-self: start; }
.single-resident-diary .diary-single__next{ justify-self: end; }
.single-resident-diary .diary-single__index{ justify-self: center; }

/* 一覧は少し強調 */
.single-resident-diary .diary-single__btn--index{
  padding: 10px 18px;
  border-color: rgba(31,90,166,.25);
  color: #1f5aa6;
}

/* hover / focus */
.single-resident-diary .diary-single__nav a:hover,
.single-resident-diary .diary-single__nav a:focus-visible{
  background: rgba(31,90,166,.06);
  border-color: rgba(31,90,166,.35);
  color: #1f5aa6;
  transform: translateY(-1px);
}

/* スマホ：360pxでも前/次を横並び、次は右側、一覧は下で全幅 */
@media (max-width: 520px){

  .single-resident-diary .diary-single__meta{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .single-resident-diary .diary-single__nav{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "prev next"
      "index index";
    gap: 10px 8px;
  }

  .single-resident-diary .diary-single__prev{ grid-area: prev; justify-self: start; }
  .single-resident-diary .diary-single__next{ grid-area: next; justify-self: end; }
  .single-resident-diary .diary-single__index{ grid-area: index; justify-self: stretch; }

  .single-resident-diary .diary-single__prev a,
  .single-resident-diary .diary-single__next a{
    width: 100%;
    max-width: 160px;
    padding: 10px 8px;
    font-size: 13px;
  }

  .single-resident-diary .diary-single__next a{
    margin-left: auto;
  }

  .single-resident-diary .diary-single__btn--index{
    width: 100%;
    justify-content: center;
  }

  /* 罫線の左右余白はスマホでは少し狭める */
  .single-resident-diary .diary-single__content::before{
    left: 18px;
    right: 18px;
    top: 16px;
  }
}