/* ==========================================================================
   友だち側だけの調整
   スマホで読む前提のため、文字サイズと余白を一段大きい既存値に寄せている。
   （管理画面は 13.5px 基準。こちらは 15px 基準）
   値はすべて globals.css / karte.module.css に実在するもの。
   ========================================================================== */
body {
  font-size: 15px;
  line-height: 1.6;
}

.wrap {
  max-width: 34rem;
  margin: 0 auto;
  min-height: 100%;
  background: var(--color-canvas);
}

.top {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-hairline);
  padding: 13px 15px;
}
.top h1 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.2px;
}
.top .who {
  font-size: 12px;
  color: var(--color-ink-3);
  margin: 1px 0 0;
}

.pad {
  padding: 15px;
}

/* スマホは2区画を上下に積む。横に並べると1枠180pxになり名前が読めないため。
   区画の中はスクロールさせず、ページ全体をスクロールさせる
   （枠の中だけスクロールさせると、画面のスクロールと取り合いになる） */
.zones {
  flex-direction: column;
}
.zone {
  width: 100%;
  flex: 0 0 auto;
}

/* 行の密度をスマホ用に上げる（PC用の 10px では窮屈になる） */
.frow {
  padding: 15px;
  gap: 13px;
}
.fnm {
  font-size: 14px;
}
.fsub {
  font-size: 12.5px;
  margin-top: 1px;
}
.sendBox {
  padding: 15px;
}
.pick .btn {
  padding: 11px 13px;
  font-size: 13.5px;
}

.notes {
  margin: 15px 0 0;
  padding: 0 0 0 1.15em;
  color: var(--color-ink-3);
  font-size: 11.5px;
}
.notes li + li {
  margin-top: 3px;
}

/* PCで開いたときは2区画を横に並べる */
@media (min-width: 48rem) {
  .wrap {
    max-width: 64rem;
  }
  .zones {
    flex-direction: row;
  }
  .zone {
    flex: 1 1 0;
  }
  .frow {
    padding: 10px 15px;
    gap: 11px;
  }
  .fnm {
    font-size: 13.5px;
  }
  .fsub {
    font-size: 12px;
  }
}