/* アリガトノート v2 レスポンシブ（PC/スマホ共通）— 温かみのある配色 */
* { box-sizing: border-box; }
:root {
  --brand:#f2764e;      /* コーラル */
  --brand2:#f7a24b;     /* アンバー */
  --bg1:#fff4ea; --bg2:#fff9f3;
  --card:#fffdfb;
  --ink:#4b3b33;        /* 温かいダークブラウン */
  --muted:#a68e80;
  --line:#f1e4d8;
  --peach:#fff0e4;      /* やわらかいピーチ */
}
html, body { margin: 0; }
body {
  font-family: "Kiwi Maru", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  color: var(--ink); line-height: 1.7;
  background: linear-gradient(180deg, var(--bg1), var(--bg2)) fixed;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 18px; }
.wrap.wide { max-width: 1100px; }   /* 列の多い管理画面用（メンバー管理）。狭い画面では .card.scroll の横スクロールにフォールバック */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px; margin-bottom: 16px; box-shadow: 0 10px 30px rgba(214,142,90,.10);
}
h1 { font-size: 1.45rem; margin: 0 0 .3em; letter-spacing:.02em; }
h2 { font-size: 1.08rem; margin: 1.1em 0 .4em; color:#7a5b45; }
p { margin: .3em 0 .8em; }
.muted { color: var(--muted); font-size: .9rem; }
label { display:block; font-weight:700; font-size:.9rem; margin: 12px 0 5px; color:#6b5648; }
input, select, textarea {
  width:100%; padding:12px 13px; border:1px solid #e6d5c6; border-radius:12px; font-size:16px; outline:none;
  background:#fffdfb; color:var(--ink); transition:border .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(242,118,78,.18); }
textarea { resize:vertical; min-height:120px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:none; border-radius:999px; padding:12px 24px; font-size:15px; font-weight:800; cursor:pointer;
  background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff;
  box-shadow:0 8px 18px rgba(242,118,78,.30); transition:transform .08s, box-shadow .12s, opacity .1s;
}
.btn:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 11px 22px rgba(242,118,78,.36); }
.btn:disabled { opacity:.5; cursor:default; box-shadow:none; }
.btn.sec { background:#fbeee4; color:#8a6a52; box-shadow:none; }
.btn.sm { padding:7px 14px; font-size:13px; }
.btn.danger { background:linear-gradient(135deg,#ef7d7d,#f0a05a); }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.right { margin-left:auto; }
.error { color:#c0392b; font-size:.9rem; min-height:1.1em; }
.ok { color:#2e9e5b; font-size:.9rem; min-height:1.1em; }
.pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.75rem; font-weight:800; }
.pill.req { background:#ffe6d5; color:#c85a2b; }
.pill.opt { background:#fde9cf; color:#a9772a; }
.pill.done { background:#e3f5e6; color:#2e9e5b; }
.summary {
  background:linear-gradient(135deg,#fff0e4,#ffe7d4); color:#b8551f; border:1px solid #ffd9bf;
  border-radius:14px; padding:12px 16px; font-weight:800;
}
/* 今日の一言占い */
.fortune { margin-top:12px; background:linear-gradient(135deg,#fff7ef,#fbeede); border:1px dashed #f0c9a8; border-radius:14px; padding:12px 16px; }
.fortune .ftitle { font-weight:800; color:#c85a2b; font-size:.85rem; margin-bottom:4px; }
.fortune .fmsg { color:var(--ink); font-weight:700; overflow-wrap:anywhere; }
.fortune .fadvice { color:#5b4636; font-size:.9rem; margin-top:3px; overflow-wrap:anywhere; }
.fortune .fmeta { color:#7a5b45; font-size:.82rem; font-weight:700; margin-top:6px; }
.fortune .fstars { color:#f2a24b; letter-spacing:1px; }
/* サイト最下部のブランドフッター */
.sitefoot { text-align:center; color:var(--muted); font-size:.78rem; letter-spacing:.06em; margin-top:-8px; padding:0 8px 14px; }
.msg { border-bottom:1px solid var(--line); padding:10px 0; }
.msg:last-child { border-bottom:none; }
.msg .from { font-weight:800; color:#6b5648; }
.msg .body { white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; margin-top:3px; }
.msg .meta { color:var(--muted); font-size:.78rem; margin-top:3px; }
table { width:100%; border-collapse:collapse; font-size:.88rem; }
th, td { border-bottom:1px solid var(--line); padding:9px 6px; text-align:left; white-space:nowrap; }
th { color:var(--muted); font-weight:800; }
.scroll { overflow:auto; }
a.link { color:var(--brand); text-decoration:none; font-weight:700; }
a.link:hover { text-decoration:underline; }
.topbar { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.chk { display:flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; font-size:.9rem; background:#fffdfb; }
.chk input { width:auto; }
/* 在籍状況の色分け（前バージョン準拠） */
select.st-active { background:#dcfce7; color:#15803d; border-color:#86efac; font-weight:700; }
select.st-leave  { background:#fef9c3; color:#a16207; border-color:#fcd34d; font-weight:700; }
select.st-quit   { background:#fee2e2; color:#b91c1c; border-color:#fca5a5; font-weight:700; }
.logo { text-align:center; margin:2px 0 14px; }
.logo img { width:260px; max-width:80%; height:auto; }
/* モーダル */
.overlay { position:fixed; inset:0; background:rgba(74,59,51,.45); display:none; align-items:center; justify-content:center; padding:16px; z-index:50; }
.overlay.show { display:flex; }
.modal { background:var(--card); border-radius:18px; padding:24px; max-width:460px; width:100%; box-shadow:0 24px 60px rgba(74,59,51,.35); overflow-wrap:anywhere; }
@media (max-width:480px){ .wrap{padding:12px;} .card{padding:17px;border-radius:14px;} h1{font-size:1.28rem;} }
/* ロゴ＋QRの横並び（QRはロゴの右）。スマホはQR非表示＝ロゴのみ中央 */
.qr-block { display:none; text-align:center; }
.brand { display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; margin:2px 0 14px; }
.brand .logo { margin:0; }
.brand .logo img { max-width:min(300px,82vw); width:auto; height:auto; }   /* 既定(スマホ): 画面内に収める */
.qr-side img { width:104px; height:104px; border:1px solid var(--line); border-radius:8px; background:#fff; }
/* PC（マウス操作・広い画面）のみ: QR表示＋ロゴをQRと同じ高さ104pxに揃える */
@media (min-width:700px) and (hover:hover) and (pointer:fine) {
  .qr-block { display:block; }
  .brand .logo img { height:104px; width:auto; max-width:none; }
}