* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #fbf3e6;
  color: #4a3a30;
  font-family: -apple-system, "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}

.back { display: inline-block; font-size: 14px; color: #b9874e; text-decoration: none; padding: 4px 0; }

.hero { text-align: center; margin: 8px 0 20px; }
.hero h1 { font-size: 28px; margin: 0; }
.lead { margin: 6px 0 0; font-size: 14px; opacity: 0.75; }

.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.entry {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fffaf2;
  border: 2px solid #ead7c3;
}
.pic {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #f4e6d4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pic .cat { width: 72px; height: 72px; }
.info { min-width: 0; }
.no { margin: 0; font-size: 12px; color: #b9874e; font-variant-numeric: tabular-nums; }
.name { margin: 0; font-size: 18px; }
.text { margin: 4px 0 0; font-size: 13px; line-height: 1.6; }