/* Folio v0.8.2 — 紙・スクラップブック基準デザイン */
:root {
  --folio-oat: #f4ecd9;
  --folio-cream: #fffaf0;
  --folio-pencil: #3f4039;
  --folio-sky-note: #b9dce8;
  --folio-leaf-note: #cfdcab;
  --folio-blush-note: #efc1b8;
  --folio-lavender-note: #cdbfd9;
  --folio-paper-line: rgba(87, 89, 76, .095);
  --folio-tape: rgba(224, 193, 137, .62);
  --display: "Folio Hand", "Yu Mincho", serif;
  --body: "Yu Mincho", "Hiragino Mincho ProN", serif;
  --utility: "Hiragino Sans", "Yu Gothic", sans-serif;
  --folio-ink: var(--folio-pencil);
  --ink: var(--folio-pencil);
}

html,
body {
  background-color: #eee5d7;
  background-image:
    radial-gradient(circle at 16% 12%, rgba(140, 111, 73, .065) 0 1px, transparent 1.4px),
    linear-gradient(115deg, #f4ecdf, #e8dccb);
}

body::after { box-shadow: inset 0 0 70px rgba(86, 55, 31, .14); }

button,
input,
select,
textarea { border-radius: 2px; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #6b8b8f;
  outline-offset: 2px;
}

.paper-page,
.detail-paper,
.contents-page {
  color: var(--folio-pencil);
  background-color: var(--folio-oat);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.28), transparent 13%, transparent 88%, rgba(96,66,38,.045)),
    radial-gradient(circle at 18% 27%, rgba(92,79,57,.055) 0 .8px, transparent 1.3px),
    repeating-linear-gradient(0deg, transparent 0 28px, var(--folio-paper-line) 28px 29px);
  background-size: auto, 9px 9px, auto;
}

.paper-card,
.calendar-card,
.family-upcoming-panel,
.settings-list,
.ai-chat-sheet,
.schedule-candidate,
.candidate-empty {
  border: 1px solid rgba(93, 81, 59, .16);
  background-color: rgba(255, 251, 241, .66);
  box-shadow: 2px 4px 11px rgba(78, 56, 33, .08);
}

.section-heading > span,
.today-heading-button {
  width: fit-content;
  padding: 3px 13px 2px 9px;
  background: linear-gradient(96deg, rgba(238,199,143,.65), rgba(238,199,143,.32));
  box-shadow: 1px 2px 4px rgba(78,55,31,.07);
  transform: rotate(-.55deg);
  font-family: var(--display);
  font-weight: 500;
}

.eyebrow { color: #956047; letter-spacing: .12em; }
.text-button { color: #6f7660; }

.folio-greeting {
  position: relative;
  z-index: 4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2px 20px 5px;
  border-bottom: 1px dashed rgba(117, 99, 70, .25);
}

.folio-greeting::after {
  content: "";
  position: absolute;
  width: 38px;
  height: 18px;
  right: 22px;
  top: 8px;
  border-top: 2px solid #d99a57;
  border-radius: 50%;
  transform: rotate(-12deg);
}

.folio-greeting strong { font: 500 clamp(20px, 2vw, 30px)/1.08 var(--display); letter-spacing: .05em; }
.folio-greeting small { margin-top: 5px; color: #6d6658; font: 11px var(--body); letter-spacing: .05em; }

.weather-card {
  color: #34443f;
  border: 7px solid rgba(255,250,239,.86);
  background-position: center 55%;
  box-shadow: 3px 6px 13px rgba(60,72,62,.16);
}

.weather-card::before {
  background: linear-gradient(90deg, rgba(182,222,236,.08) 0 35%, rgba(224,238,235,.76) 48%, rgba(251,246,225,.9) 100%);
}

.weather-card::after {
  width: 76px;
  height: 15px;
  inset: auto;
  top: -11px;
  left: 45%;
  border: 0;
  background: var(--folio-tape);
  transform: rotate(1.4deg);
}

.left-sticker-plant,
.mini-photo,
.large-polaroid {
  padding: 7px 7px 20px;
  border: 0;
  background: #fffaf0;
  box-shadow: 3px 7px 13px rgba(63,45,29,.18);
}

.calendar-card { position: relative; }
.calendar-card::before {
  content: "カレンダー";
  position: absolute;
  z-index: 3;
  top: 3px;
  left: 38%;
  padding: 4px 17px 3px;
  color: #4e4b42;
  background: rgba(239, 196, 137, .58);
  box-shadow: 1px 2px 4px rgba(70,50,29,.08);
  transform: translateX(-50%) rotate(-1.1deg);
  font: 13px var(--display);
  letter-spacing: .08em;
}

.calendar-controls { border-bottom: 1px solid rgba(93,81,59,.13); }
.calendar-heading .eyebrow { display: none; }
.calendar-heading h1 { font-family: var(--display); letter-spacing: .04em; }
.calendar-view-switch { border-color: rgba(86,93,75,.18); background: rgba(232,224,198,.72); }
.calendar-view-switch button.is-active { background: #72836d; }
.calendar-day { color: #44483f; border-color: rgba(86,88,75,.09); }
.calendar-day.is-today::before,
.calendar-day.is-today::after { border-radius: 50% !important; border-color: #df7568 !important; }
.week-row span:first-child { color: #d1655c; }
.week-row span:last-child { color: #4f93ae; }

.favorites::before {
  width: fit-content;
  padding: 3px 15px 2px 9px;
  color: #4d4a41;
  background: linear-gradient(96deg, rgba(239,196,137,.7), rgba(239,196,137,.32));
  box-shadow: 1px 2px 4px rgba(72,52,30,.07);
  transform: rotate(-.6deg);
  font-family: var(--display);
}

.app-tile {
  border: 3px solid rgba(255,250,239,.9);
  border-radius: 9px !important;
  box-shadow: 2px 4px 8px rgba(54,51,40,.15);
}

.right-page-tab-group button,
.page-turn-tab {
  color: #4a4b43;
  border: 1px solid rgba(87,77,60,.18);
  box-shadow: 1px 3px 7px rgba(72,52,32,.11);
  font-family: var(--display);
}

.right-page-tab-group button:nth-child(1),
.page-turn-left { background: #e5c490; }
.right-page-tab-group button:nth-child(2) { background: var(--folio-leaf-note); }
.right-page-tab-group button:nth-child(3),
.page-turn-right { background: var(--folio-lavender-note); }
.right-page-tab-group button.is-active { color: #3d433b; background: var(--folio-sky-note); }

.page-fold-actions { background: transparent; }
.page-fold-actions button {
  border: 1px solid rgba(83,74,60,.27);
  background: rgba(255,252,244,.94);
  box-shadow: 2px 4px 9px rgba(55,40,25,.17);
}

.more-sheet {
  border: 9px solid #50382a;
  border-radius: 16px;
  color: var(--folio-pencil);
  background: #5b3d2d;
  box-shadow: 0 20px 46px rgba(48,30,18,.34);
}

.contents-page { position: relative; }
.contents-heading b,
.detail-header h1 { font-family: var(--display); font-weight: 500; }
.contents-list > button { color: var(--folio-pencil); border-bottom: 1px dashed rgba(88,80,64,.14); }
.contents-list > button:nth-child(4n+1) svg { color: #cc8452; }
.contents-list > button:nth-child(4n+2) svg { color: #6ca8bd; }
.contents-list > button:nth-child(4n+3) svg { color: #829269; }
.contents-list > button:nth-child(4n) svg { color: #a987ad; }

.detail-view { background: #eee5d7; }
.detail-paper {
  border-color: #593e2d;
  border-radius: 13px 20px 16px 12px;
  box-shadow: inset 0 0 20px rgba(104,73,41,.08), 0 16px 35px rgba(64,42,25,.22);
}

.detail-header { border-bottom: 1px dashed rgba(83,79,66,.23); }
.detail-header h1 {
  width: fit-content;
  padding: 3px 18px 2px 10px;
  background: linear-gradient(96deg, rgba(230,206,153,.58), rgba(230,206,153,.24));
  transform: rotate(-.45deg);
}

.back-button,
.primary-small,
.ai-header-actions > button {
  border-color: rgba(80,78,66,.22);
  color: #485148;
  background: rgba(255,251,241,.7);
}

.settings-list { max-width: 980px; }
.settings-list > button,
.settings-list > label,
.ai-setting-row { border-bottom-style: dashed; }
.settings-list input,
.settings-list select,
.ai-setting-row input,
.ai-limit-input input {
  border-color: rgba(80,78,66,.2) !important;
  background: rgba(255,252,244,.8) !important;
}

.home-switch-panel,
.ai-settings-panel,
.page-settings,
.candidate-box-intro {
  border-left: 0;
  border-top: 5px solid rgba(211, 161, 105, .58);
  background: rgba(255, 248, 232, .52);
}

.folio-ai-layout { gap: 14px; }
.ai-margin-note { border-top-color: #9aaa7f; background: rgba(234,239,215,.65); }
.ai-chat-sheet {
  background-image: repeating-linear-gradient(0deg, transparent 0 30px, rgba(86,88,76,.075) 30px 31px);
}
.ai-message { border-radius: 2px 9px 3px 7px; }
.ai-message[data-role="assistant"] { border-left-color: #7d9db1; }
.ai-message[data-role="user"] { border-right-color: #d5927d; background: #f4ddc8; }
.ai-suggestions button { color: #6b7b65; border-color: rgba(101,122,97,.36); background: rgba(246,242,220,.72); }
.ai-composer button { background: #71816c; }

.candidate-source-legend span[data-source="folio-ai"],
.candidate-source[data-source="folio-ai"] { background: var(--folio-lavender-note); }
.candidate-source-legend span[data-source="line"],
.candidate-source[data-source="line"] { background: var(--folio-leaf-note); }
.candidate-source-legend span[data-source="alexa"],
.candidate-source[data-source="alexa"] { background: var(--folio-sky-note); }
.schedule-candidate { border-top: 5px solid rgba(211,161,105,.55); transform: rotate(var(--candidate-tilt, -.15deg)); }
.schedule-candidate:nth-child(even) { --candidate-tilt: .18deg; }
.candidate-actions .candidate-register { background: #739468; }
.candidate-actions .candidate-edit { background: #e6a85c; }
.candidate-actions .candidate-delete { color: #fffaf0; background: #dd7e70; }

@media (min-width: 840px) {
  .home-view.is-active { overflow: hidden; background: #eee5d7; }
  .home-view .book {
    width: calc(100vw - 18px);
    height: calc(100dvh - 16px);
    margin: 8px auto;
    padding: 10px 12px;
    grid-template-columns: minmax(0,1fr) 16px minmax(0,1fr);
    border: 2px solid #17130f;
    border-radius: 28px 30px 27px 29px;
    background:
      linear-gradient(90deg, rgba(255,255,255,.09), transparent 9%, rgba(16,10,6,.25) 49%, rgba(255,255,255,.08) 51%, transparent 91%),
      #4f392c;
    box-shadow: inset 0 0 0 4px rgba(220,197,157,.12), 0 14px 28px rgba(65,42,25,.25);
  }
  .home-view .paper-page {
    height: 100%;
    padding: 17px 22px 15px;
    border-radius: 4px;
    background-color: var(--folio-oat);
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.3), transparent 12%, transparent 88%, rgba(96,66,38,.05)),
      radial-gradient(circle at 18% 27%, rgba(92,79,57,.052) 0 .8px, transparent 1.3px),
      repeating-linear-gradient(0deg, transparent 0 28px, var(--folio-paper-line) 28px 29px);
    background-size: auto, 9px 9px, auto;
    box-shadow: inset 0 0 22px rgba(104,73,41,.09);
  }
  .home-view .left-page {
    display: grid;
    grid-template-rows: 55px minmax(0,27%) minmax(0,26%) minmax(0,1fr) 52px !important;
    gap: 9px;
  }
  .home-view .folio-greeting { grid-row: 1; }
  .home-view .left-page > .weather-card {
    grid-row: 2;
    left: 0;
    width: 72%;
    height: 100%;
    margin: 0 !important;
    grid-template-columns: 40% 33% 27%;
  }
  .home-view .left-sticker-plant {
    top: 76px !important;
    right: 21px !important;
    width: 25% !important;
    height: 24% !important;
    transform: rotate(2.2deg);
  }
  .home-view .left-page > .today-card { grid-row: 3; height: 100%; margin: 0 !important; padding: 9px 12px; }
  .home-view .left-page > .favorites { grid-row: 4; height: 100%; margin: 0 !important; padding: 29px 8px 5px; }
  .home-view .left-page > .left-lower-controls { grid-row: 5; }

  .home-view .right-page {
    display: grid;
    grid-template-rows: minmax(0,61%) minmax(0,1fr) 52px !important;
    gap: 9px;
  }
  .home-view .right-page > .calendar-card {
    grid-row: 1;
    min-height: 0;
    height: 100%;
    padding: 29px 10px 8px;
    grid-template-rows: 40px 22px minmax(0,1fr) !important;
  }
  .home-view .right-page > .family-today-mount { grid-row: 2; min-height: 0; }
  .home-view .right-page .family-today-panel { height: 100%; padding: 8px 31% 8px 12px; background: rgba(255,251,241,.6); }
  .home-view .right-page > .right-lower-controls { grid-row: 3; min-height: 0; padding-right: 92px; border-top: 0; background: transparent; }
  .home-view .right-page .family-today-panel .bottom-photo { width: 28%; height: 83%; right: 1.5%; bottom: 6%; transform: rotate(3deg); }
  .right-page-tab-group { height: 45px; align-self: end; gap: 5px; }
  .right-page-tab-group button { min-height: 43px; }
  .page-fold-actions { right: 19px; bottom: 11px; width: 78px; height: 60px; gap: 7px; }
  .page-fold-actions button { width: 40px; height: 40px; }
  .page-turn-tab { width: 35px; min-height: 104px; color: #4b493f; }
  .app-version-footer { color: rgba(255,246,224,.72); }
}

@media (max-width: 839px) {
  .folio-greeting { display: none; }
  .home-view.is-active { height: 100dvh; min-height: 0; overflow: hidden; background: #e9dfd0; }
  .home-view .book {
    width: calc(100vw - 8px);
    height: calc(100dvh - 8px);
    min-height: 0;
    margin: 4px;
    padding: 7px;
    border: 2px solid #231a14;
    border-radius: 22px;
    background: #523c2f;
    box-shadow: inset 0 0 0 3px rgba(223,199,160,.13), 0 8px 20px rgba(60,40,25,.24);
  }
  .home-view .paper-page {
    height: 100%;
    min-height: 0;
    padding: 12px 13px 17px;
    border-radius: 13px;
    background-color: var(--folio-oat);
  }
  .cover-masthead { padding-left: 6px; }
  .cover-masthead span { color: #4b4a43; }
  .weather-card { border-width: 5px; }
  .today-card,
  .family-today-panel { background: rgba(255,251,241,.67); }
  .favorites { background: rgba(255,251,241,.26); }
  .cover-ai-shortcuts button { border-color: rgba(83,75,60,.18); box-shadow: 2px 4px 8px rgba(68,48,29,.12); }
  .cover-ai-shortcut { background: #e5d9ea; }
  .cover-candidate-shortcut { background: #dbe8d1; }
  .detail-paper { border-radius: 0; border-width: 0; box-shadow: none; }
  .detail-header h1 { padding-right: 11px; }
}

@media (orientation: landscape) and (max-height: 540px) {
  .home-view .book { width: 100%; height: 100dvh; min-height: 0; margin: 0; border-radius: 0; }
  .home-view .paper-page { min-height: 0; height: calc(100dvh - 18px); border-radius: 2px; }
}

@media (prefers-reduced-motion: no-preference) {
  .home-view.is-active .folio-greeting strong { animation: folio-pencil-in .42s ease-out both; }
  @keyframes folio-pencil-in { from { opacity: 0; transform: translateY(5px) rotate(-.8deg); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  .home-view.is-active .folio-greeting strong { animation: none; }
}