:root {
  --ink: #253238; --muted: #718087; --paper: #fffdf8; --line: #e6e4dc;
  --teal: #277f78; --teal-dark: #1e625d; --cream: #f5f1e8; --coral: #e8846f;
  --sunny: #f4c95d; --cloudy: #aebfc5; --rainy: #66a6c8; --snowy: #c5dfe7; --stormy: #716a91;
  --shadow: 0 18px 50px rgba(55, 70, 66, .09);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #f7f5ef; font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif; }
button, input, textarea { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; background: radial-gradient(circle at 85% 5%, rgba(244,201,93,.14), transparent 27%), linear-gradient(#fbfaf6, #f4f1e9); }
.app-header { height: 86px; padding: 0 max(4vw, 30px); display: flex; align-items: center; justify-content: space-between; background: rgba(255,253,248,.88); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; gap: 12px; align-items: center; background: none; border: 0; cursor: pointer; text-align: left; }
.brand-mark { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--sunny); font-size: 24px; box-shadow: 0 5px 14px rgba(244,201,93,.35); }
.brand img.brand-mark { display: block; object-fit: cover; border-radius: 10px; background: transparent; box-shadow: 0 5px 14px rgba(39,127,120,.24); }
.brand strong, .brand small { display: block; }
.brand small { line-height: 1.05; }
.brand b { display: block; font-size: 18px; letter-spacing: .04em; }.brand small { color: var(--muted); font-size: 11px; letter-spacing: .12em; }
.header-actions { display: flex; gap: 10px; }
.language-button { min-width: 46px; padding-inline: 12px; background: #f2eee4; border: 1px solid var(--line); color: var(--teal-dark); }
.button { border: 0; border-radius: 12px; padding: 11px 17px; cursor: pointer; font-weight: 700; transition: .18s ease; }
.button:hover, .circle-button:hover { transform: translateY(-1px); }.button.primary { color: white; background: var(--teal); box-shadow: 0 8px 20px rgba(39,127,120,.2); }.button.primary:hover { background: var(--teal-dark); }.button.ghost { background: white; border: 1px solid var(--line); }.button.today { background: #e5f0ed; color: var(--teal-dark); }
main { width: min(1420px, 94vw); margin: auto; padding: 24px 0 24px; }.view { display: none; }.view.active { display: block; animation: fade .28s ease; } @keyframes fade { from { opacity: 0; transform: translateY(5px); } }
.calendar-toolbar, .editor-heading { display: flex; justify-content: space-between; gap: 25px; align-items: flex-end; margin-bottom: 28px; }.eyebrow { margin: 0 0 7px; color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .22em; }.calendar-toolbar h1, .editor-heading h1 { margin: 0; font-family: "Yu Mincho", serif; font-size: clamp(32px, 4vw, 52px); font-weight: 600; letter-spacing: .03em; }.subcopy { color: var(--muted); margin: 8px 0 0; }
.month-controls { display: flex; gap: 9px; align-items: center; }.circle-button { width: 42px; height: 42px; flex: 0 0 42px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: white; cursor: pointer; display: inline-grid; place-items: center; line-height: 0; }.circle-button svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }.month-picker-wrap { display: flex; align-items: center; gap: 9px; background: white; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font-size: 12px; color: var(--muted); }.month-picker-wrap input { border: 0; color: var(--ink); background: transparent; outline: 0; }
.calendar-card { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); }.weekdays { display: grid; grid-template-columns: repeat(7,1fr); background: #f0eee6; border-bottom: 1px solid var(--line); }.weekdays div { padding: 13px; text-align: center; font-size: 12px; font-weight: 800; color: var(--muted); }.weekdays div:first-child { color: #cb7064; }.weekdays div:last-child { color: #5686a0; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }.day-cell { min-width: 0; min-height: 142px; padding: 12px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); text-align: left; cursor: pointer; position: relative; overflow: hidden; transition: background .15s; }.day-cell:nth-child(7n) { border-right: 0; }.day-cell:hover { background: #f3f8f6; }.day-cell.other { color: #acb2b0; background: #f9f7f2; }.day-cell.today::after { content: "今日"; position: absolute; top: 13px; right: 11px; background: var(--teal); color: white; border-radius: 10px; padding: 3px 7px; font-size: 9px; }.day-number { font: 600 18px "Yu Mincho", serif; }.day-cell.sunday .day-number { color: #cb7064; }.day-cell.saturday .day-number { color: #5686a0; }.day-content { display: flex; align-items: center; gap: 10px; margin-top: 11px; min-width: 0; }.mini-chart { width: 59px; height: 59px; flex: 0 0 auto; border-radius: 50%; position: relative; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }.mini-chart::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--paper); }.day-cell.other .mini-chart::after { background: #f9f7f2; }.weather-summary { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; white-space: nowrap; }.summary-separator { color: #cbd1cf; font-size: .8em; margin: 0 .28em; font-family: sans-serif; }.summary-weather { display: inline-block; }.memo-preview { color: #5f6e72; font-size: 11px; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }.mood-badge { font-size: 15px; margin-top: 5px; }
.back-button { border: 0; background: transparent; color: var(--teal); font-weight: 800; padding: 0 0 26px; cursor: pointer; }.save-state { color: var(--teal); background: #e5f0ed; padding: 9px 14px; border-radius: 99px; font-size: 12px; font-weight: 700; }.editor-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 24px; }.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 3vw, 36px); box-shadow: var(--shadow); }.panel-title { display: flex; gap: 13px; align-items: center; }.panel-title h2 { margin: 0 0 4px; font-size: 20px; }.panel-title p { margin: 0; color: var(--muted); font-size: 12px; }.step { width: 34px; height: 34px; display: grid; place-items: center; background: var(--teal); color: white; border-radius: 50%; font-family: serif; }.step.coral { background: var(--coral); }
.weather-palette { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }.weather-option { border: 1px solid var(--line); background: white; border-radius: 99px; padding: 9px 13px; cursor: pointer; font-size: 12px; font-weight: 700; }.weather-option i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }.weather-option.selected { border-color: var(--teal); background: #e7f1ef; color: var(--teal-dark); box-shadow: 0 0 0 2px rgba(39,127,120,.09); }
.chart-area { width: min(360px, 72vw); aspect-ratio: 1; margin: 22px auto; position: relative; }.weather-chart { position: absolute; inset: 22px; border-radius: 50%; touch-action: none; filter: drop-shadow(0 10px 15px rgba(60,70,70,.12)); cursor: crosshair; }.chart-center { position: absolute; inset: 35%; background: var(--paper); border-radius: 50%; z-index: 3; display: grid; place-content: center; text-align: center; pointer-events: none; box-shadow: 0 3px 14px rgba(40,50,50,.08); }.chart-center > span { display: inline-flex; align-items: center; justify-content: center; font-size: 25px; line-height: 1; white-space: nowrap; }.chart-center small { color: var(--muted); font-size: 8px; letter-spacing: .12em; margin-top: 7px; }.time-label { position: absolute; color: var(--muted); font-size: 10px; font-weight: 700; }.time-label.top { top: 0; left: 50%; transform: translateX(-50%); }.time-label.right { right: 0; top: 50%; }.time-label.bottom { bottom: 0; left: 50%; transform: translateX(-50%); }.time-label.left { left: 0; top: 50%; }
.quick-fill { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; margin: 10px 0 21px; }.quick-fill span { color: var(--muted); font-size: 11px; }.quick-fill button { border: 1px solid var(--line); background: #faf9f5; border-radius: 8px; padding: 6px 9px; font-size: 10px; cursor: pointer; }.hour-legend { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; }.hour-chip { text-align: center; padding: 6px 2px; border-radius: 7px; font-size: 9px; color: #425055; }
.memo-panel textarea { width: 100%; height: 250px; resize: vertical; border: 1px solid var(--line); border-radius: 14px; padding: 17px; margin-top: 26px; outline: 0; line-height: 1.8; background: #fbfaf6; }.memo-panel textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(39,127,120,.1); }.memo-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; color: #98a0a0; font-size: 9px; }.mood-block { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 22px; }.mood-block h3 { font-size: 13px; margin: 0 0 13px; }.mood-block h3 small { color: var(--muted); font-weight: 400; }.mood-picker { display: flex; gap: 8px; }.mood-picker button { width: 45px; height: 45px; background: #faf9f5; border: 1px solid var(--line); border-radius: 12px; font-size: 21px; cursor: pointer; }.mood-picker button.selected { border-color: var(--coral); background: #fff0ec; transform: translateY(-2px); }.save-button { width: 100%; margin-top: 28px; padding: 14px; }.toast { position: fixed; left: 50%; bottom: 25px; transform: translate(-50%, 20px); opacity: 0; background: #263736; color: white; padding: 12px 20px; border-radius: 10px; z-index: 50; transition: .25s; pointer-events: none; }.toast.show { opacity: 1; transform: translate(-50%, 0); }.app-footer { min-height: 112px; padding: 24px max(4vw, 30px); border-top: 1px solid var(--line); background: #ede9df; display: flex; align-items: center; justify-content: space-between; gap: 30px; color: #697779; }.footer-brand { display: flex; align-items: center; gap: 11px; color: var(--ink); }.footer-brand > span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--sunny); }.footer-brand b,.footer-brand small { display: block; }.footer-brand b { font-size: 13px; }.footer-brand small { color: var(--muted); font-size: 9px; margin-top: 2px; }.app-footer p { max-width: 520px; margin: 0; font-size: 10px; line-height: 1.8; text-align: center; }.app-footer > small { white-space: nowrap; }.app-footer a { color: var(--teal-dark); font-weight: 800; text-decoration: none; }
@media (max-width: 850px) { .app-header { padding: 0 18px; }.brand small { display: none; }.header-actions .button { font-size: 0; padding: 10px; }.header-actions .button::first-letter { font-size: 16px; }.header-actions #importButton::after { content: "読込"; font-size: 11px; }.header-actions #exportButton::after { content: "保存"; font-size: 11px; }.calendar-toolbar, .editor-heading { align-items: flex-start; flex-direction: column; }.month-controls { width: 100%; flex-wrap: wrap; }.editor-grid { grid-template-columns: 1fr; }.day-cell { min-height: 100px; padding: 8px; }.day-content { display: block; }.mini-chart { width: 100%; height: 32px; display: flex; align-items: center; background: none !important; box-shadow: none; overflow: visible; }.mini-chart::after { display: none; }.weather-summary { display: inline-flex; font-size: 18px; }.memo-preview { display: none; }.app-footer { flex-direction: column; gap: 13px; text-align: center; padding: 24px 18px; }.app-footer .footer-brand { order: 1; }.app-footer p { order: 2; }.app-footer > small { order: 3; } }
@media (max-width: 520px) { main { width: 96vw; padding-top: 28px; }.app-header { height: 72px; }.brand b { font-size: 14px; }.brand-mark { width: 36px; height: 36px; }.calendar-toolbar { padding: 0 8px; }.calendar-toolbar h1, .editor-heading h1 { font-size: 31px; }.month-picker-wrap span, #todayButton { display: none; }.day-cell { min-height: 84px; }.day-cell.today::after { display: none; }.day-number { font-size: 15px; }.panel { padding: 20px 16px; border-radius: 15px; }.hour-legend { grid-template-columns: repeat(4,1fr); } }

/* Keep date numbers anchored regardless of whether a day has a record. */
.day-number { position: absolute; top: 12px; left: 12px; z-index: 2; line-height: 1; }
.day-content { margin-top: 28px; }
@media (max-width: 850px) {
  .day-number { top: 8px; left: 8px; }
  .day-content { margin-top: 25px; }
}

/* Today is indicated by its cell tint and circled date number. */
.day-cell.today { background: #e8f3f0; }
.day-cell.today:hover { background: #deeeea; }
.day-cell.today::after { display: none; }
.day-cell.today .day-number {
  width: 30px;
  height: 30px;
  top: 7px;
  left: 7px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 15px;
}
.day-cell.today .mini-chart::after { background: #e8f3f0; }
.day-cell.today:hover .mini-chart::after { background: #deeeea; }
@media (max-width: 850px) {
  .day-cell.today .day-number { width: 26px; height: 26px; top: 5px; left: 5px; font-size: 13px; }
}

/* Align side labels to the chart's horizontal center line. */
.time-label.left { left: -8px; transform: translateY(-50%); }
.time-label.right { transform: translateY(-50%); }
.hour-chip { font-size: 11px; }
.day-weather-label { position: absolute; top: 13px; left: 43px; z-index: 2; color: #718087; font-size: 11px; font-weight: 800; line-height: 1; }.day-cell.today .day-weather-label { top: 15px; left: 44px; color: var(--teal-dark); }.button.image-save { background: #fff; border: 1px solid var(--teal); color: var(--teal-dark); white-space: nowrap; }
@media (max-width: 850px) { .day-weather-label { top: 10px; right: 8px; left: auto; font-size: 9px; text-align: right; }.day-cell.today .day-weather-label { top: 12px; right: 8px; left: auto; }.button.image-save { font-size: 11px; padding: 10px 12px; } }
.seo-guide { margin: 34px auto 0; max-width: 920px; padding: 28px 32px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,253,248,.72); }.seo-guide h2 { margin: 0 0 9px; font-size: 18px; }.seo-guide > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }.guide-items { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 19px; }.guide-items details { padding: 13px 15px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }.guide-items summary { cursor: pointer; color: var(--teal-dark); font-size: 11px; font-weight: 800; }.guide-items p { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }.noscript-message { padding: 13px; background: #fff0d4; color: #6d5523; text-align: center; font-size: 13px; }
@media (max-width: 700px) { .seo-guide { padding: 22px 18px; }.guide-items { grid-template-columns: 1fr; } }

.ad-area {
  width: min(1100px, calc(100% - 40px));
  min-height: 120px;
  margin: 8px auto 36px;
  padding: 14px 16px 16px;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255,255,255,.46);
  text-align: center;
}
.ad-label { display: block; margin-bottom: 8px; color: #a3aaa9; font-size: 8px; letter-spacing: .18em; }
.ad-unit { width: 100%; max-width: 100%; min-height: 90px; overflow: hidden; }
.ad-unit .adsbygoogle { width: 100%; max-width: 100%; margin: 0 auto; }
.ad-area:has(.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
@media (max-width: 700px) {
  .ad-area { width: calc(100% - 20px); min-height: 90px; margin-bottom: 24px; padding: 10px 6px 12px; border-radius: 10px; }
  .ad-unit { min-height: 60px; }
}

@media (max-width: 850px) {
  .app-header { height: auto; min-height: 86px; padding-top: 10px; padding-bottom: 10px; flex-wrap: nowrap; gap: 8px; }
  .brand { min-width: 0; flex: 1 1 0; }
  .brand > span:last-child { min-width: 0; }
  .brand small { display: block; white-space: normal; line-height: 1.05; }
  .header-actions { flex: 0 0 auto; }
  .header-actions .button { font-size: 11px; }
  .header-actions .button::first-letter { font-size: inherit; }
  .header-actions #importButton::after, .header-actions #exportButton::after { display: none; }
}
@media (max-width: 520px) {
  .app-header { height: auto; align-items: center; }
  .brand { flex: 1 1 0; gap: 7px; }
  .brand img.brand-mark { width: 32px; height: 32px; flex: 0 0 32px; }
  .brand b, .brand strong { font-size: 14px; }
  .brand small { font-size: 9px; }
  .header-actions { width: auto; flex: 0 0 auto; justify-content: flex-end; gap: 4px; }
  .header-actions .button { padding: 8px 7px; font-size: 9px; white-space: nowrap; }
  .day-cell { padding-left: 5px; padding-right: 5px; }
  .mini-chart { justify-content: center; }
  .weather-summary { width: 100%; justify-content: center; font-size: 14px; line-height: 1; }
  .weather-summary .summary-separator { margin: 0 .08em; font-size: .68em; }
  .day-weather-label { top: 9px; right: 4px; left: auto; font-size: 8px; }
  .day-cell.today .day-number { width: 24px; height: 24px; top: 4px; left: 3px; font-size: 12px; }
  .day-cell.today .day-weather-label { top: 9px; right: 4px; left: auto; }
}
@media (max-width: 380px) {
  .day-cell { padding-left: 3px; padding-right: 3px; }
  .weather-summary { font-size: 12px; }
  .weather-summary .summary-separator { margin: 0 .03em; }
}
.delete-record-button { width: 100%; margin-top: 11px; padding: 11px; border: 0; background: transparent; color: #b45f55; font-size: 11px; font-weight: 800; cursor: pointer; }.delete-record-button:hover { color: #913d35; text-decoration: underline; }.delete-record-button[hidden] { display: none; }

/* Keep today's date visible even when weekday and mobile button styles overlap. */
.day-cell.today .day-number,
.day-cell.today.sunday .day-number,
.day-cell.today.saturday .day-number {
  z-index: 10;
  visibility: visible;
  opacity: 1;
  color: #fff;
  -webkit-text-fill-color: #fff;
}