:root{
  --bg:#faf6f1;
  --card:#ffffff;
  --ink:#4a413b;
  --ink-soft:#6f635a;
  --muted:#9c9087;
  --line:#ece3d9;
  --line-soft:#f4ede5;
  --accent:#c97b5a;
  --accent-soft:#fbeee7;
  --both:#7d9e7f;
  --both-soft:#eef4ee;
  --husband:#6c8eb0;
  --husband-soft:#eaf1f7;
  --wife:#c98099;
  --wife-soft:#f9edf1;
  --ok:#5f9e6a;
  --mid:#d9a441;
  --ng:#b98b8b;
  --radius:16px;
  --shadow:0 1px 2px rgba(74,65,59,.04), 0 6px 18px rgba(74,65,59,.06);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:default;}
input,select,textarea{font-family:inherit;font-size:16px;color:inherit;}

.app{max-width:720px;margin:0 auto;min-height:100dvh;}

/* ---------- header ---------- */
.app-header{
  position:sticky;top:0;z-index:30;
  background:linear-gradient(180deg,#fdfaf6 0%, rgba(250,246,241,.94) 100%);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
  padding-top:env(safe-area-inset-top);
}
.header-inner{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px 12px;
  max-width:720px;margin:0 auto;
}
.header-text{flex:1;min-width:0;}
.app-header h1{margin:0;font-size:18px;font-weight:700;letter-spacing:.02em;}
.app-header p{margin:2px 0 0;font-size:12px;color:var(--muted);}
.icon-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink-soft);line-height:1;font-size:16px;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- layout ---------- */
.main{padding:16px 16px calc(96px + env(safe-area-inset-bottom));}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;margin-bottom:14px;
}
.card-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.card-head h2{margin:0;font-size:14px;font-weight:700;letter-spacing:.04em;flex:1;}
.card-head .head-ico{font-size:15px;}
.empty{color:var(--muted);font-size:13px;text-align:center;padding:14px 4px;}

/* ---------- buttons ---------- */
.btn{
  border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:8px 14px;font-size:13px;font-weight:600;color:var(--ink-soft);
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn-ghost{background:transparent;border-color:transparent;color:var(--accent);padding:6px 8px;}
.btn-danger{color:#b4544a;border-color:#f0d9d5;background:#fdf3f1;}
.btn-block{display:block;width:100%;text-align:center;padding:12px;}
.btn:disabled{opacity:.4;cursor:default;}
.btn-row{display:flex;gap:8px;}
.btn-row .btn{flex:1;text-align:center;}

/* ---------- owner badge ---------- */
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap;
}
.badge.both{background:var(--both-soft);color:#4e7351;}
.badge.husband{background:var(--husband-soft);color:#3d6488;}
.badge.wife{background:var(--wife-soft);color:#a3576f;}

/* ---------- schedule list ---------- */
.ev{
  display:flex;gap:12px;align-items:flex-start;
  padding:11px 12px;border-radius:12px;background:#fff;border:1px solid var(--line-soft);
  margin-bottom:8px;width:100%;text-align:left;
}
.ev:last-child{margin-bottom:0;}
.ev .bar{width:4px;align-self:stretch;border-radius:99px;flex:0 0 4px;}
.ev.both .bar{background:var(--both);}
.ev.husband .bar{background:var(--husband);}
.ev.wife .bar{background:var(--wife);}
.ev .time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
.ev .body{flex:1;min-width:0;}
.ev .title{font-size:14px;font-weight:600;word-break:break-word;}

/* ---------- calendar ---------- */
.month-nav{display:flex;align-items:center;gap:6px;margin-bottom:12px;}
.month-nav .month-label{flex:1;text-align:center;font-size:16px;font-weight:700;}
.nav-btn{
  width:36px;height:36px;border-radius:12px;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);
}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cal-dow{text-align:center;font-size:11px;color:var(--muted);padding-bottom:4px;font-weight:600;}
.cal-dow.sun{color:#c4756f;}
.cal-dow.sat{color:#6f8bc4;}
.cal-cell{
  min-height:60px;border:1px solid var(--line-soft);border-radius:10px;background:#fff;
  padding:4px 3px;display:flex;flex-direction:column;gap:3px;align-items:stretch;text-align:left;
}
.cal-cell.other{background:#fbf8f4;opacity:.55;}
.cal-cell.today{border-color:var(--accent);background:var(--accent-soft);}
.cal-num{font-size:12px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;}
.cal-cell.sun .cal-num{color:#c4756f;}
.cal-cell.sat .cal-num{color:#6f8bc4;}
.cal-dots{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;}
.dot{width:7px;height:7px;border-radius:50%;}
.dot.both{background:var(--both);}
.dot.husband{background:var(--husband);}
.dot.wife{background:var(--wife);}
.cal-chips{display:none;flex-direction:column;gap:2px;}
.chip{
  font-size:10px;line-height:1.35;padding:1px 4px;border-radius:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chip.both{background:var(--both-soft);color:#4e7351;}
.chip.husband{background:var(--husband-soft);color:#3d6488;}
.chip.wife{background:var(--wife-soft);color:#a3576f;}
.chip-more{font-size:9px;color:var(--muted);text-align:center;}
@media (min-width:600px){
  .cal-cell{min-height:78px;}
  .cal-dots{display:none;}
  .cal-chips{display:flex;}
}
.legend{display:flex;gap:14px;justify-content:center;margin-top:12px;flex-wrap:wrap;}
.legend span{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-soft);}

/* ---------- goals ---------- */
.goal-cols{display:grid;grid-template-columns:1fr;gap:12px;}
@media (min-width:600px){.goal-cols{grid-template-columns:1fr 1fr;}}
.goal-col{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;}
.goal-col-head{
  display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:13px;font-weight:700;
}
.goal-col.husband .goal-col-head{background:var(--husband-soft);color:#3d6488;}
.goal-col.wife .goal-col-head{background:var(--wife-soft);color:#a3576f;}
.goal-col-head .count{margin-left:auto;font-size:11px;font-weight:600;opacity:.75;}
.goal-item{
  display:flex;align-items:center;gap:8px;padding:11px 12px;border-top:1px solid var(--line-soft);
}
.goal-item .txt{flex:1;font-size:14px;word-break:break-word;}
.goal-col .add-row{padding:9px 12px;border-top:1px solid var(--line-soft);}
.goal-col .empty{padding:12px;}

/* ---------- rating ---------- */
.rate-group{display:flex;gap:6px;}
.rate-btn{
  width:38px;height:38px;border-radius:11px;border:1px solid var(--line);
  background:#fff;font-size:17px;font-weight:700;color:var(--muted);
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.rate-btn.on.o{background:#eaf5eb;border-color:var(--ok);color:var(--ok);}
.rate-btn.on.t{background:#fcf3e1;border-color:var(--mid);color:#b8862c;}
.rate-btn.on.x{background:#f8eeee;border-color:var(--ng);color:#a5706f;}
.rate-row{padding:12px 0;border-top:1px solid var(--line-soft);}
.rate-row:first-of-type{border-top:0;padding-top:0;}
.rate-row .rate-label{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.rate-row .rate-label .txt{font-size:14px;font-weight:600;flex:1;word-break:break-word;}

/* ---------- matrix ---------- */
.matrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px;}
table.matrix{border-collapse:separate;border-spacing:0;font-size:12px;}
table.matrix th,table.matrix td{padding:0;text-align:center;}
table.matrix thead th{
  height:28px;min-width:28px;color:var(--muted);font-weight:600;font-size:11px;
  font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line);
}
table.matrix thead th.today-col{color:var(--accent);font-weight:800;}
table.matrix th.gname,table.matrix td.gname{
  position:sticky;left:0;z-index:2;background:#fff;
  text-align:left;min-width:138px;max-width:138px;padding:6px 8px 6px 0;
  border-right:1px solid var(--line);
}
table.matrix td.gname{font-size:12px;line-height:1.35;}
.gname .gname-in{display:flex;align-items:center;gap:5px;}
.gname .gname-txt{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.mcell{width:28px;height:30px;border:0;background:transparent;font-size:14px;font-weight:700;color:#d9cfc4;border-bottom:1px solid var(--line-soft);}
.mcell.o{color:var(--ok);}
.mcell.t{color:#c99a35;}
.mcell.x{color:var(--ng);}
.mcell.today-col{background:var(--accent-soft);}
.matrix-note{font-size:11px;color:var(--muted);margin-top:8px;}
.summary{display:flex;gap:10px;font-size:11px;color:var(--ink-soft);margin-top:2px;}

/* ---------- thanks ---------- */
.thanks-block{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:12px;background:#fff;}
.thanks-head{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:13px;font-weight:700;}
.thanks-block.husband .thanks-head{background:var(--husband-soft);color:#3d6488;}
.thanks-block.wife .thanks-head{background:var(--wife-soft);color:#a3576f;}
.thanks-head .count{margin-left:auto;font-size:11px;font-weight:600;opacity:.75;}
.thanks-item{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-top:1px solid var(--line-soft);}
.thanks-item .mark{color:var(--accent);font-size:13px;line-height:1.6;}
.thanks-body{flex:1;min-width:0;}
.thanks-body .msg{font-size:14px;word-break:break-word;}
.thanks-actions{display:flex;align-items:center;gap:8px;margin-top:7px;}
.thanks-actions .btn-ghost{margin-left:auto;}
.react-btn{
  display:inline-flex;align-items:center;gap:5px;line-height:1;
  border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:5px 11px;font-size:12px;color:var(--muted);
  transition:transform .12s ease;
}
.react-btn .heart{font-size:13px;}
.react-btn.on{background:var(--accent-soft);border-color:#f0cdbc;color:var(--accent);font-weight:700;}
.react-btn.on .heart{animation:pop .3s ease;}
.react-btn:active{transform:scale(.93);}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.45)}100%{transform:scale(1)}}
.thanks-block .add-row{padding:9px 12px;border-top:1px solid var(--line-soft);}
.date-nav{display:flex;align-items:center;gap:6px;margin-bottom:12px;}
.date-nav .date-label{flex:1;text-align:center;font-size:15px;font-weight:700;}
.date-input{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;
}

/* ---------- sheet / modal ---------- */
.backdrop{
  position:fixed;inset:0;background:rgba(60,50,44,.38);z-index:50;
  display:flex;align-items:flex-end;justify-content:center;
  animation:fade .18s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  background:var(--bg);width:100%;max-width:560px;
  border-radius:22px 22px 0 0;padding:18px 18px calc(20px + env(safe-area-inset-bottom));
  max-height:88dvh;overflow-y:auto;animation:up .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes up{from{transform:translateY(18px);opacity:.6}to{transform:translateY(0);opacity:1}}
@media (min-width:600px){
  .backdrop{align-items:center;}
  .sheet{border-radius:20px;}
}
.sheet-head{display:flex;align-items:center;margin-bottom:14px;}
.sheet-head h3{margin:0;font-size:16px;font-weight:700;flex:1;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:6px;}
.field input[type=text],.field input[type=date],.field select,.field textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;
}
.field textarea{resize:vertical;min-height:76px;line-height:1.5;}
.time-row{display:flex;align-items:center;gap:8px;}
.time-row select{flex:1;}
.time-row .tilde{color:var(--muted);}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.seg button{
  padding:11px 4px;border-radius:12px;border:1px solid var(--line);background:#fff;
  font-size:13px;font-weight:700;color:var(--ink-soft);
}
.seg button.on.both{background:var(--both-soft);border-color:var(--both);color:#4e7351;}
.seg button.on.husband{background:var(--husband-soft);border-color:var(--husband);color:#3d6488;}
.seg button.on.wife{background:var(--wife-soft);border-color:var(--wife);color:#a3576f;}
.err{color:#b4544a;font-size:12px;margin:-6px 0 10px;min-height:1px;}
.sheet-actions{display:flex;gap:8px;margin-top:6px;}
.sheet-actions .btn{flex:1;text-align:center;padding:12px;}
.sheet-list-item{
  display:flex;gap:10px;align-items:center;width:100%;text-align:left;
  padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:8px;
}

/* ---------- tabbar ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  max-width:720px;margin:0 auto;
}
.tab{
  border:0;background:transparent;padding:8px 2px 9px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:10px;font-weight:600;color:var(--muted);
}
.tab .tab-ico{font-size:19px;line-height:1;filter:grayscale(.55);opacity:.7;}
.tab.is-active{color:var(--accent);}
.tab.is-active .tab-ico{filter:none;opacity:1;}

.fab-note{font-size:11px;color:var(--muted);text-align:center;margin-top:-4px;}