:root{
  --bg:#faf7f2;
  --card:#ffffff;
  --text:#3a3330;
  --sub:#8a817b;
  --line:#eee7de;
  --accent:#a5713f;
  --accent-soft:#f3e5d5;
  --danger:#d9534f;
  --sun:#d9534f;
  --sat:#4a7fd4;
  --today:#fdeeda;
  --shadow:0 2px 10px rgba(90,70,50,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#141210;
    --card:#201c19;
    --text:#ece5df;
    --sub:#9b918a;
    --line:#3a332d;
    --accent:#d3a26c;
    --accent-soft:#3d3225;
    --danger:#e07370;
    --sun:#e07370;
    --sat:#7ba3e8;
    --today:#3d3225;
    --shadow:0 2px 10px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  background:var(--bg);color:var(--text);
  padding:0 14px calc(24px + env(safe-area-inset-bottom));
  max-width:560px;margin:0 auto;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}

.app-header{
  padding:calc(14px + env(safe-area-inset-top)) 2px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.app-title{font-size:20px;font-weight:700}
.share-btn{padding:7px 12px;font-size:12px;flex-shrink:0}

/* ---- 入力ボタン ---- */
.input-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.input-btn{
  flex:1 1 calc(33.33% - 7px);min-width:calc(33.33% - 7px);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:14px 4px 10px;box-shadow:var(--shadow);
  transition:transform .08s;
}
.input-btn:active{transform:scale(.94);background:var(--accent-soft)}
.input-emoji{font-size:32px;line-height:1;position:relative;display:inline-block}
.input-label{
  font-size:13px;font-weight:700;color:var(--sub);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.meds-btn{display:block;margin:0 auto 14px;padding:7px 14px;font-size:12px}

/* 下痢マーク：うんち絵文字＋「下痢」の文字 */
.geri-emoji .geri-badge,
.mark .geri-badge{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:-2px;
  font-style:normal;font-weight:800;color:#fff;background:var(--danger);
  border-radius:6px;padding:0 3px;line-height:1.35;
  font-size:9px;white-space:nowrap;
}

/* ---- カレンダー ---- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:12px;box-shadow:var(--shadow);
}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-title{font-size:16px;font-weight:700}
.nav-btn{
  width:38px;height:38px;border-radius:12px;font-size:22px;color:var(--accent);
  background:var(--accent-soft);
}
.weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}
.wd{text-align:center;font-size:11px;font-weight:700;color:var(--sub);padding:2px 0}
.wd.sun{color:var(--sun)}
.wd.sat{color:var(--sat)}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.day{
  min-height:56px;border-radius:8px;padding:2px 1px;
  display:flex;flex-direction:column;align-items:center;
  border:1px solid transparent;
  cursor:pointer;
}
.day:not(.other):active{background:var(--accent-soft)}
.day.other{opacity:0}
.day.today{background:var(--today);border-color:var(--accent)}
.day-num{font-size:11px;font-weight:600;color:var(--sub);line-height:1.4}
.day.today .day-num{color:var(--accent);font-weight:800}
.day-num.sun{color:var(--sun)}
.day-num.sat{color:var(--sat)}

.marks{display:flex;flex-wrap:wrap;justify-content:center;gap:1px;width:100%}
.mark{
  position:relative;font-size:15px;line-height:1;padding:2px 1px 4px;
  border-radius:6px;
}
.mark:active{background:var(--accent-soft)}
.mark .geri-badge{font-size:7px;bottom:-3px;padding:0 2px}

/* 薬マーク：絵文字＋薬の名前 */
.mark .med-badge{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:-3px;
  font-style:normal;font-weight:800;color:#fff;background:var(--accent);
  border-radius:6px;padding:0 2px;line-height:1.35;
  font-size:7px;white-space:nowrap;
  max-width:44px;overflow:hidden;text-overflow:ellipsis;
}

.today-btn{display:block;margin:10px auto 0}

/* ---- 汎用 ---- */
.primary-btn{
  background:var(--accent);color:#fff;font-weight:700;
  border-radius:12px;padding:10px 18px;
}
.ghost-btn{
  color:var(--sub);font-weight:600;border:1px solid var(--line);
  border-radius:12px;padding:9px 14px;background:var(--card);
}
.danger-btn{
  color:var(--danger);font-weight:700;border:1px solid var(--danger);
  border-radius:12px;padding:9px 14px;
}
.data-note{font-size:11px;color:var(--sub);margin-top:12px;line-height:1.7;padding:0 2px}

/* ---- 編集モーダル ---- */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:10;
}
.modal{
  background:var(--card);border-radius:18px;padding:18px;
  width:100%;max-width:340px;box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.modal-title{font-size:16px;margin-bottom:14px}
.field{margin-bottom:14px}
.field-label{font-size:12px;font-weight:700;color:var(--sub);margin-bottom:6px;display:block}
.type-row{display:flex;gap:6px}
.type-row.wrap{flex-wrap:wrap}
.type-row.wrap .type-opt{flex:1 1 calc(33.33% - 4px);min-width:calc(33.33% - 4px)}
.type-opt{flex:1}
.type-opt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-list{display:flex;flex-wrap:wrap;gap:6px}
.member-chip{
  font-size:13px;font-weight:700;
  background:var(--accent-soft);color:var(--accent);
  border-radius:999px;padding:6px 12px;
}
.member-chip.me{background:var(--accent);color:#fff}
.member-none{font-size:12px;color:var(--sub)}
.med-list{margin-bottom:14px}
.med-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 2px;border-bottom:1px solid var(--line);font-size:14px;font-weight:600;
}
.med-item .danger-btn{padding:5px 12px;font-size:12px;flex-shrink:0}
.type-opt input{position:absolute;opacity:0;pointer-events:none}
.type-opt span{
  display:block;text-align:center;font-size:12px;font-weight:700;
  border:1px solid var(--line);border-radius:10px;padding:8px 2px;
}
.type-opt input:checked + span{
  background:var(--accent-soft);border-color:var(--accent);color:var(--accent);
}
#editDt{
  /* iOS Safariのdatetime-localは固有幅ではみ出すため、appearanceを切って幅を強制する */
  display:block;width:100%;max-width:100%;min-width:0;
  -webkit-appearance:none;appearance:none;
  min-height:42px;text-align:left;
  font:inherit;font-size:15px;color:var(--text);
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 10px;
}
.modal-btns{display:flex;gap:8px;align-items:center}
.spacer{flex:1}

/* ---- 共有・セットアップ ---- */
.modal-text{font-size:13px;color:var(--sub);line-height:1.7;margin-bottom:14px}
.big-btn{width:100%;padding:13px 10px;font-size:14px}
.divider{
  display:flex;align-items:center;gap:10px;margin:16px 0 10px;
  color:var(--sub);font-size:11px;font-weight:700;
}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.text-input{width:100%}
.name-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:13px;color:var(--sub);
  border-top:1px solid var(--line);padding:12px 0;margin-bottom:4px;
}
.name-row b{color:var(--text)}
.name-row .ghost-btn{padding:6px 12px;font-size:12px}
.join-row{display:flex;gap:8px}
.text-input,
.join-row input{
  flex:1;min-width:0;font:inherit;font-size:16px;color:var(--text);
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 10px;
}
.setup-cancel-row{margin-top:10px}
.code-box{
  text-align:center;font-size:26px;font-weight:800;letter-spacing:4px;
  background:var(--accent-soft);color:var(--accent);
  border-radius:12px;padding:14px 8px;margin-bottom:12px;
  user-select:all;-webkit-user-select:all;
}
.share-btns{display:flex;gap:8px;margin-bottom:16px}
.share-btns button{flex:1;padding:10px 4px;font-size:13px}
.pending-badge{
  margin-top:10px;text-align:center;font-size:11px;font-weight:700;
  color:var(--danger);
}

/* ---- トースト ---- */
.toast{
  position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  background:var(--text);color:var(--bg);
  font-size:13px;font-weight:700;
  padding:10px 18px;border-radius:999px;box-shadow:var(--shadow);
  z-index:20;white-space:nowrap;
  animation:toast-in .18s ease-out;
}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}