:root{font-family:system-ui,sans-serif;color:#283e34;background:#f2f5ef;--hours:14}
*{box-sizing:border-box}
body{margin:0}
button,input,select{font:inherit}
button{cursor:pointer;min-height:44px;padding:10px 16px;border:1px solid #c5d3c7;border-radius:10px;background:white;color:#283e34}
button:hover{background:#e9f1e7}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #df9d35}
button.active,.primary{background:#365d45;color:white}
button.primary:hover{background:#2c4d39}
button.danger{border-color:#c98b7f;color:#9a3a2a}
button:disabled{opacity:.55;cursor:default}
.shell{max-width:1120px;margin:auto;padding:24px}
header{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
h1{font-size:25px;margin:8px 0}h2{font-size:21px}h3{font-size:17px;margin:16px 0 6px}
p{line-height:1.65}
.muted{color:#617267;font-size:14px}
.big{font-size:24px;margin:6px 0}
.nav,.week,.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.stack{display:grid;gap:10px;margin-top:12px}
.grow{flex:1;min-width:120px}
.align-end{align-self:flex-end;margin-bottom:14px}
.nav{margin:24px 0}
.panel{background:white;border:1px solid #dce4da;border-radius:18px;padding:24px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:24px}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.badge{display:inline-block;padding:5px 10px;background:#e8efdc;border-radius:8px;font-size:14px}
.dog{font-size:55px;margin:0}
dialog{border:1px solid #cbd7c8;border-radius:18px;max-width:480px;width:calc(100% - 28px);padding:26px}
dialog::backdrop{background:#14251b77}
label{display:block;margin:14px 0}
input,select{width:100%;padding:10px;border:1px solid #b9c9bb;border-radius:8px;margin-top:6px;background:white}
.file-button{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:10px 16px;border:1px solid #c5d3c7;border-radius:10px;cursor:pointer}
.file-button input{display:none}
footer{padding:20px 0;font-size:13px;color:#617267}
[role=alert]{color:#9a3a2a}
[hidden]{display:none!important}

/* 子ども・きょう */
#completed{font-size:24px;font-weight:800;color:#365d45}
.task{padding:18px;border:1px solid #d6e2d3;border-radius:14px;margin:14px 0;background:#fafcf8}
.task.done{background:#e7f0e2}
.task.rest{opacity:.65}
.task h3{margin:0 0 4px;font-size:19px}
.task-time{margin:2px 0;color:#617267}
.task-side{display:flex;align-items:center;gap:12px}
.reward-chip{font-size:22px;padding:6px 12px;background:#fff6e2;border-radius:12px;white-space:nowrap}
.task .primary,.task button{min-height:56px;font-size:18px;padding:12px 22px}
.mini{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.mini .habit-stars{font-size:20px;letter-spacing:2px}
.mini .frozen-star{font-size:19px;min-height:0;padding:2px 8px}
.mini-count{font-weight:800;font-size:22px;color:#365d45}
.cheer{text-align:center}.cheer h2{font-size:20px;margin:8px 0}
.empty{padding:30px;text-align:center;color:#617267}

/* カード・きろく */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.collect{padding:20px;background:#f4f6ef;border-radius:14px;text-align:center}
.collect p{font-size:28px;font-weight:800;margin:4px 0}
.habit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.habit-card{padding:22px;border:2px solid #dce8d4;border-radius:20px;background:#f7fbf1;text-align:center}
.habit-icon{font-size:40px}
.habit-number{font-size:64px;font-weight:800;line-height:1.2;color:#365d45}
.habit-number small{font-size:20px;margin-left:5px}
.habit-card h3{margin:8px 0}.habit-card p{margin:8px 0}
.habit-next{font-size:13px;color:#617267}
.medals{font-size:24px}
.habit-stars{font-size:25px;letter-spacing:4px;color:#ae7011;overflow-wrap:anywhere}
.empty-star{opacity:.4}
.after-star{color:#8fb3c4}
.frozen-star{position:relative;min-height:0;font-size:29px;color:#3789b0;background:#d9f5ff;border:2px solid #9ed9ed;border-radius:12px;padding:2px 9px;box-shadow:inset 0 0 10px white;vertical-align:middle;letter-spacing:0}
.frozen-star::after{content:'❄';position:absolute;font-size:16px;right:-6px;bottom:-7px;color:#206d96}
.frozen-star:hover{background:#b9edff}

/* 親・予定 */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin:12px 0}
.week button{padding:8px 2px;white-space:nowrap;font-size:14px}
.week button.today:not(.active){border:2px solid #df9d35}
.week button.past:not(.active){color:#8a978e}
.timeline{position:relative;border-top:1px solid #dae2d8;margin-top:10px;height:calc(72px * var(--hours))}
.hour{height:calc(100% / var(--hours));border-bottom:1px solid #e5eae2;display:flex}
.hour span{width:65px;padding:4px 8px;color:#617267;font-size:12px}
.hour .space{flex:1;border-left:1px solid #dae2d8}
.event{position:absolute;left:76px;right:12px;min-height:30px;background:#e5eedd;border-left:4px solid #638056;border-radius:8px;overflow:hidden;container-type:size;cursor:pointer}
.event.rest{background:#f1f1ec;border-color:#9eaa98}
.event.done{background:#d5e8cc;border-color:#365d45}
.event.missed{background:#e4f3f9;border-color:#5aa4c4}
.event-body{height:100%;padding:8px 12px;overflow:hidden}
.event strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.event p{margin:2px 0;font-size:13px}
.event-summary{display:none}
@container (max-height: 56px){.event-body{padding:2px 8px;display:flex;align-items:center}.event-full{display:none}.event-summary{display:block;font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
body.parent-view .shell{height:100dvh;display:flex;flex-direction:column;padding:12px 24px}
body.parent-view header .muted,body.parent-view footer{display:none}
body.parent-view h1{font-size:20px;margin:0}
body.parent-view .nav{margin:8px 0}
body.parent-view #parent{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px 18px}
body.parent-view #parent h3{margin:4px 0}
body.parent-view #parent p{margin:3px 0;font-size:13px}
body.parent-view .timeline{flex:1;min-height:0;height:auto}

/* 1週間・印刷 */
.weekly-grid{display:grid;grid-template-columns:46px repeat(7,minmax(0,1fr));height:min(65dvh,650px);border:1px solid #bac9ba;margin-top:12px}
.weekly-axis,.weekly-day{position:relative;min-width:0;border-right:1px solid #ccd7c8}
.weekly-heading{height:32px;text-align:center;font-size:13px;padding:6px 0;border-bottom:1px solid #bac9ba;background:#edf2e8;white-space:nowrap}
.weekly-slots{position:absolute;top:32px;bottom:0;left:0;right:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(100% / var(--hours) - 1px),#e0e6dc calc(100% / var(--hours) - 1px),#e0e6dc calc(100% / var(--hours)))}
.weekly-hour{height:calc(100% / var(--hours));font-size:11px;padding:0 2px;color:#617267}
.weekly-event{position:absolute;left:2px;right:2px;padding:1px 3px;background:#e5eedd;border-left:3px solid #638056;border-radius:3px;font-size:11px;line-height:1.2;overflow:hidden;cursor:pointer}
.weekly-event span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.weekly-event.rest{background:#eee;border-color:#999}
.weekly-event.done{background:#d5e8cc;border-color:#365d45}
#weekly-title{margin:0;font-size:18px}
@page{size:A4 landscape;margin:10mm}
@media print{
  body{background:white!important}
  .shell,body.parent-view .shell{display:block!important;max-width:none;padding:0!important;height:auto!important}
  header,nav,footer,.shell>section:not(#weekly),dialog,#print-week,#w-prev,#w-next{display:none!important}
  #weekly[hidden],#weekly{display:block!important;border:0;padding:0}
  .weekly-grid{height:158mm;break-inside:avoid}
  .weekly-event{-webkit-print-color-adjust:exact;print-color-adjust:exact;font-size:9px}
  .weekly-heading{font-size:11px}
}

@media(max-width:720px){
  .shell{padding:12px}.layout{grid-template-columns:1fr}.panel{padding:14px}
  .event{left:56px;right:4px}.hour span{width:50px}
  .week{gap:4px}.week button{font-size:11px}
  .nav button{padding:6px 8px;font-size:13px}
  h1{font-size:21px}
  body.parent-view .shell{padding:8px}
  .task .between{align-items:flex-start}
}
