:root{
  --bg:#ffffff;
  --bg-soft:#f9fafb;
  --border:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;
  --muted2:#9ca3af;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; }
a{ color:#374151; }

.nw-header{
  padding: 16px 12px 8px;
  text-align:center;
}
.tool-title{ margin: 6px 0 6px; font-size: 18px; }
.tool-sub{ margin: 0 auto 8px; max-width: 42em; font-size: 13px; color: var(--muted); line-height: 1.5; }

.nw-lang-switch{ text-align:center; margin: 4px 0 8px; font-size:11px; color: var(--muted); }
.nw-lang-switch button{
  border:none; background:transparent; padding:0 2px; cursor:pointer; font-size:11px; color:#4b5563;
}
.nw-lang-switch button.active{ font-weight:600; text-decoration:underline; }

.usage-link{ margin: 0 0 6px; font-size: 14px; }
.usage-link a{ text-decoration: underline; }

.nw-main{
  max-width: 600px; /* smartphone-oriented tool */
  margin: 0 auto;
  padding: 0 12px 24px;
}

/* ad slots (common) */
.ad-slot{
  margin: 12px 0 16px;
  padding: 8px;
  border: 1px dashed #d4d4d4;
  font-size: 11px;
  color: var(--muted2);
  text-align: center;
  min-height: 60px;
}
.ad-top{ margin-top:4px; }
.ad-bottom{ margin-bottom:8px; }

.panel{
  border:1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  margin: 10px 0;
}

.form-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.field .label{ display:block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.field input, .field select{
  width: 100%;
  padding: 10px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  color: var(--text);
}

.actions{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.actions button{
  flex: 1 1 180px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}
.actions button.primary{
  border-color:#111827;
  background:#111827;
  color:#fff;
}
.hint{
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.result-head{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.result-title{ margin:0; font-size: 16px; }
.result-meta{ font-size: 12px; color: var(--muted); }

.checklist{ margin-top: 10px; }
.empty{
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  background: var(--bg-soft);
}

.day-block{
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 10px;
}
.day-head{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.day-title{ margin:0; font-size: 14px; }
.day-sub{ font-size: 12px; color: var(--muted); }

.task{
  display:flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px dashed #f0f0f0;
}
.task:last-child{ border-bottom:none; }
.task input{ margin-top: 2px; width: 18px; height: 18px; }
.task .ttext{ font-size: 14px; line-height: 1.45; }
.task .tmeta{ font-size: 12px; color: var(--muted); margin-top: 2px; }

.disclaimer{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

/* donate (common-ish) */
.nw-donate{
  text-align:center;
  margin: 16px 0 8px;
  padding: 8px 0;
  font-size: 12px;
  color: var(--muted);
}
.nw-donate-text{ margin: 4px 0; font-size: 12px; }
.nw-donate-links{
  display:flex;
  justify-content:center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.nw-donate-links a{
  display:inline-block;
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background:#fff;
  font-size: 13px;
  color: var(--text);
  text-decoration:none;
  transition: all .2s ease;
}
.nw-donate-links a:hover{
  background: var(--bg-soft);
  transform: translateY(-1px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.nw-footer{
  margin-top: 24px;
  padding: 16px 8px 12px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  text-align:center;
  line-height: 1.6;
}
.nw-footer-line{ margin: 2px 0; }
.nw-footer a{ color: var(--muted); text-decoration: underline; }

/* responsive: <=480px force vertical-ish buttons */
@media (max-width: 480px){
  .actions{ flex-direction: column; }
  .actions button{ width: 100%; flex: 1 1 auto; }
}

/* 481-768: allow 2-col feel */
@media (min-width: 481px) and (max-width: 768px){
  .form-grid{ grid-template-columns: 1fr 1fr; }
  .field:nth-child(1){ grid-column: 1 / -1; }
  .actions button{ flex: 1 1 45%; }
}

/* print */
.only-print{ display:none; }
@media print{
  .no-print{ display:none !important; }
  .only-print{ display:block !important; }
  body{ background:#fff; }
  .nw-main{ max-width: none; padding: 0 10mm 0; }
  .panel{ border: none; padding: 0; margin: 0 0 6mm; }
  .ad-slot, .nw-donate, .nw-footer, .usage-link, .nw-lang-switch{ display:none !important; }
  .task{ border-bottom: 1px solid #eaeaea; padding: 4mm 0; }
  .task input{ width: 5mm; height: 5mm; }
  .print-title-main{ font-size: 16pt; font-weight: 700; }
  .print-title-sub{ font-size: 10pt; color:#444; margin-top: 1mm; }
}
