/* Folio v0.5.2 — 見本画像への再構成パス */
:root {
  --desk: #251207;
  --leather: #57351f;
  --leather-dark: #29150c;
  --paper: #f0e5cb;
  --paper-light: #fff9e9;
  --ink: #2d281f;
  --ink-soft: #665846;
  --terracotta: #b65c3d;
  --mustard: #c89d42;
  --olive: #637451;
  --sky: #85adb7;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.018), transparent 18%, rgba(0,0,0,.08) 48%, transparent 82%),
    repeating-linear-gradient(1deg, transparent 0 73px, rgba(20,8,3,.08) 74px 76px);
  mix-blend-mode: multiply;
}
.app-shell { position: relative; z-index: 1; }

.left-sticker-plant {
  display: none;
  position: absolute;
  z-index: 8;
  margin: 0;
  padding: 6px 6px 18px;
  background: #f8efd9;
  box-shadow: 2px 6px 10px rgba(47,29,14,.25);
  transform: rotate(3.5deg);
}
.left-sticker-plant::before {
  content: "";
  position: absolute;
  width: 52px;
  height: 16px;
  left: 50%;
  top: -10px;
  transform: translateX(-50%) rotate(-5deg);
  background: rgba(190,151,82,.44);
}
.left-sticker-plant img { display: block; width: 100%; height: 100%; object-fit: cover; }

.favorites {
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.favorites::-webkit-scrollbar { display: none; }
.favorites button { flex: 0 0 auto; scroll-snap-align: start; }
.app-tile.real-app-icon { overflow: hidden; padding: 0; background: rgba(255,250,237,.72); }
.app-tile.real-app-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.app-tile.app-initial { color: #fff9ea; background: #6c795a; }
.add-app-button .app-tile {
  color: var(--ink-soft);
  border: 2px dashed rgba(91,68,39,.44);
  background: rgba(255,250,237,.42);
  box-shadow: none;
}

.app-picker-dialog { width: min(760px, calc(100vw - 30px)); max-height: min(760px, calc(100dvh - 28px)); }
.app-picker-paper {
  position: relative;
  min-height: 490px;
  max-height: min(760px, calc(100dvh - 28px));
  display: flex;
  flex-direction: column;
  padding: 24px 26px 22px;
  border: 11px solid var(--leather);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 15% 18%, rgba(104,82,48,.06) 0 1px, transparent 1.5px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(65,66,56,.055) 31px 32px);
  background-size: 9px 9px, auto;
  box-shadow: 0 24px 50px rgba(13,6,2,.58), inset 0 0 20px rgba(98,66,33,.11);
}
.app-picker-paper::before {
  content: "";
  position: absolute;
  width: 92px;
  height: 22px;
  left: 50%;
  top: -7px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(200,164,89,.5);
}
.app-picker-header { display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid rgba(77,57,34,.33); }
.app-picker-header h2 { margin: 2px 0 8px; font: 29px var(--display); font-weight: 400; }
.app-picker-header > button { width: 36px; height: 36px; border: 0; background: transparent; font-size: 25px; }
.app-picker-paper > p { margin: 9px 0 10px; color: var(--ink-soft); font: 11px var(--utility); }
.app-search {
  min-height: 42px;
  display: grid;
  grid-template-columns: 25px 1fr;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid rgba(81,60,35,.25);
  background: rgba(255,251,240,.56);
}
.app-search input { width: 100%; border: 0; outline: 0; background: transparent; }
.app-picker-list {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  align-content: start;
  gap: 0 12px;
  margin-top: 10px;
  overflow-y: auto;
}
.app-picker-item {
  min-width: 0;
  min-height: 64px;
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 22px;
  align-items: center;
  gap: 9px;
  padding: 7px 6px;
  text-align: left;
  border: 0;
  border-bottom: 1px dashed rgba(80,59,35,.23);
  background: transparent;
}
.app-picker-item .app-tile { width: 40px; height: 40px; border-width: 3px; }
.app-picker-item span:nth-child(2) { min-width: 0; }
.app-picker-item b,
.app-picker-item small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.app-picker-item b { font: 14px var(--body); }
.app-picker-item small { margin-top: 3px; color: var(--ink-soft); font: 8px var(--utility); }
.app-picker-item > i { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid rgba(84,62,36,.32); border-radius: 50%; font-style: normal; }
.app-picker-item.is-selected { background: rgba(197,158,75,.13); }
.app-picker-item.is-selected > i { color: #fff9e9; border-color: var(--olive); background: var(--olive); }

@media (min-width: 840px) {
  .home-view.is-active { display: grid; place-items: center; min-height: 100dvh; }
  .home-view:not(.is-active) { display: none; }
  .book {
    width: 100vw;
    height: 100dvh;
    min-height: 600px;
    margin: 0;
    padding: 9px 11px 10px;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
    border-radius: 0;
    box-shadow:
      inset 0 0 0 2px rgba(237,204,153,.09),
      inset 0 0 34px rgba(0,0,0,.48),
      0 14px 0 rgba(19,8,3,.22),
      0 28px 52px rgba(0,0,0,.55);
  }
  .paper-page {
    min-height: 0;
    padding: 19px 25px 18px;
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.13), transparent 13%, transparent 88%, rgba(90,60,31,.07)),
      radial-gradient(circle at 14% 12%, rgba(104,82,48,.065) 0 1px, transparent 1.4px),
      radial-gradient(circle at 72% 68%, rgba(104,82,48,.045) 0 1px, transparent 1.5px),
      repeating-linear-gradient(0deg, transparent 0 27px, rgba(65,66,56,.06) 27px 28px);
    background-size: auto, 8px 8px, 10px 10px, auto;
  }
  .left-page { box-shadow: inset 8px 0 16px rgba(116,77,38,.11), inset -14px 0 18px rgba(70,43,22,.07); }
  .right-page { box-shadow: inset -8px 0 16px rgba(116,77,38,.11), inset 14px 0 18px rgba(70,43,22,.07); }
  .page-rule { inset: 10px; }

  .left-sticker-plant {
    display: block;
    width: 118px;
    height: 122px;
    top: 27px;
    right: 28px;
  }
  .weather-card {
    width: calc(100% - 137px);
    height: 88px;
    grid-template-columns: 112px minmax(105px,.82fr) minmax(112px,1fr);
    border-radius: 1px 2px 1px 1px;
    box-shadow: 0 4px 9px rgba(63,48,29,.16);
  }
  .weather-main { padding: 7px 10px; }
  .weather-main strong { font-size: 34px; line-height: .9; }
  .weather-main > span:last-child { font-size: 11px; }
  .weather-stats { padding: 8px 9px; font-size: 10px; }
  .sun { width: 34px; height: 34px; left: 18px; top: 13px; }
  .cloud { transform: scale(.75); transform-origin: left center; }
  .cloud-a { left: 37px; top: 47px; }
  .cloud-b { display: none; }

  .news-card,
  .today-card { width: calc(100% - 8px); padding: 5px 9px 6px; margin-top: 9px; }
  .news-card { min-height: 95px; }
  .news-card::before { left: 30%; width: 62px; height: 17px; top: -8px; }
  .section-heading { min-height: 26px; margin-bottom: 3px; }
  .section-heading > span { font-size: 16px; }
  .section-heading svg { width: 14px; }
  .text-button { padding: 2px 4px; font-size: 9px; }
  .news-list { grid-template-columns: 1fr; }
  .news-item {
    min-height: 19px;
    padding: 2px 4px;
    grid-template-columns: 48px 1fr;
    border-right: 0;
    border-bottom: 1px dashed rgba(79,58,34,.18);
  }
  .news-item:last-child { border-bottom: 0; }
  .news-item small { font-size: 8px; }
  .news-item b { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .today-card { min-height: 156px; }
  .today-card::before { left: 67%; width: 55px; height: 16px; top: -7px; transform: rotate(4deg); }
  .completed-toggle { padding: 2px 7px; font-size: 9px; }
  .task-row { min-height: 28px; grid-template-columns: 20px 42px minmax(0,1fr) auto; gap: 5px; }
  .task-check { width: 14px; height: 14px; }
  .task-time { font-size: 9px; }
  .task-open { font-size: 12px; }
  .category-tag { padding: 2px 5px; font-size: 8px; }
  .cover-upcoming { max-height: 50px; margin-top: 2px; padding-top: 2px; }
  .cover-upcoming::before { font-size: 12px; }
  .cover-upcoming .agenda-row { min-height: 18px; grid-template-columns: 55px 1fr; }
  .cover-upcoming .agenda-row time,
  .cover-upcoming .agenda-row button { font-size: 9px; }

  .favorites {
    width: calc(100% - 138px);
    justify-content: space-around;
    gap: 8px;
    margin: 9px 0 0;
    padding: 17px 6px 0;
  }
  .favorites::before { font-size: 11px; padding: 1px 45px 1px 6px; }
  .favorites button { width: 41px; }
  .app-tile { width: 31px; height: 31px; border-width: 3px; font-size: 13px; }
  .favorites small { font-size: 7px; }

  .cover-scraps {
    display: block;
    left: auto;
    right: 18px;
    bottom: 17px;
    width: 126px;
    height: 142px;
    border: 0;
    background: none;
  }
  .cover-scraps::after,
  .cover-hand-note,
  .cover-plant { display: none; }
  .cover-polaroid.cover-dog {
    display: block;
    left: 2px;
    top: 15px;
    width: 112px;
    height: 116px;
    padding: 0;
    transform: rotate(-5deg);
  }

  .right-header { min-height: 62px; padding-right: 115px; }
  .right-header h1 { margin-top: 2px; font-size: 27px; }
  .right-header .eyebrow { font-size: 8px; }
  .top-photo { width: 88px; height: 76px; top: 12px; right: 24px; border-width: 6px; }
  .category-filters { gap: 5px; margin: 3px 0 7px; }
  .category-filters button { min-height: 25px; padding: 3px 10px; font-size: 9px; border-radius: 2px; }

  .calendar-card { padding: 6px 8px 7px; }
  .calendar-controls { height: 28px; font-size: 14px; }
  .calendar-controls button { width: 28px; height: 25px; }
  .week-row { height: 22px; font-size: 8px; }
  .calendar-day { height: 31px; font-size: 10px; }
  .calendar-day span:first-child { margin-top: 2px; }
  .day-dots { height: 4px; }
  .day-dots i { width: 4px; height: 4px; }

  .day-agenda { margin-top: 7px; }
  .day-agenda .section-heading { margin-bottom: 2px; }
  .day-agenda .agenda-row { min-height: 27px; grid-template-columns: 8px 43px 1fr; gap: 7px; }
  .agenda-row time { font-size: 9px; }
  .agenda-row button { font-size: 12px; }
  .right-bottom-row { min-height: 78px; margin-top: 5px; padding-right: 100px; }
  .quick-memo { min-height: 62px; padding: 7px 10px; }
  .quick-memo b { font-size: 15px; }
  .quick-memo small { font-size: 9px; }
  .bottom-photo { width: 86px; height: 75px; right: 4px; bottom: 0; border-width: 6px; }

  .index-tabs { top: 98px; gap: 4px; }
  .index-tabs button {
    width: 51px;
    height: 32px;
    transform: translateX(8px);
    border-radius: 6px 0 0 6px;
    font-size: 8px;
  }
  .page-fold-actions { width: 54px; height: 54px; }

  .memo-layout {
    grid-template-columns: 1fr;
    gap: 7px;
    width: min(980px, calc(100% - 34px));
    margin: 0 auto;
  }
  .text-memo { padding: 7px 14px 9px; }
  .text-memo textarea { height: 112px; font-size: 17px; line-height: 1.72; }
  .drawing-memo { min-height: 405px; padding: 7px 14px 10px; }
  #drawingCanvas { height: 338px; }
  .coffee-cup { width: 94px; height: 94px; right: 25px; top: -8px; }

  .settings-list { max-width: 990px; margin: 0 auto; }
  .settings-list > button,
  .settings-list > label { min-height: 57px; padding: 7px 12px; }
  .settings-list b { font-size: 15px; }
  .settings-list small { font-size: 9px; }
}

/* 閉じた状態は独立した細長い革手帳として組む */
@media (max-width: 839px) {
  .book {
    width: calc(100% - 10px);
    min-height: calc(100dvh - 10px);
    margin: 5px;
    padding: 7px;
    border: 1px solid #1d0d07;
    border-radius: 13px 7px 7px 15px;
    box-shadow: inset 0 0 24px rgba(0,0,0,.43), 0 7px 18px rgba(0,0,0,.48);
  }
  .paper-page { min-height: calc(100dvh - 24px); padding: 10px 45px 14px 10px; }
  .cover-masthead { min-height: 57px; padding: 0 8px 6px; }
  .cover-masthead span { font-size: 42px; }
  .cover-masthead small { font-size: 10px; }
  .cover-masthead b { font-size: 8px; }
  .left-sticker-plant { display: none; }

  .weather-card { height: 78px; margin-top: 6px; grid-template-columns: 82px minmax(78px,.78fr) minmax(95px,1fr); }
  .weather-main { padding: 5px 7px; }
  .weather-main strong { font-size: 29px; }
  .weather-main > span:last-child { font-size: 9px; }
  .weather-stats { padding: 5px 6px; font-size: 8px; }
  .sun { width: 31px; height: 31px; top: 12px; left: 14px; }
  .cloud-a { transform: scale(.68); left: 31px; top: 40px; }
  .cloud-b { display: none; }

  .news-card,
  .today-card { margin-top: 6px; padding: 4px 7px 5px; }
  .news-card { display: block; min-height: 84px; }
  .section-heading { min-height: 24px; margin-bottom: 2px; }
  .section-heading > span { font-size: 15px; }
  .news-item { min-height: 18px; padding: 1px 3px; grid-template-columns: 43px 1fr; }
  .news-item b { font-size: 9px; }
  .news-item small { font-size: 7px; }
  .today-card { min-height: 139px; }
  .task-row { min-height: 27px; grid-template-columns: 20px 38px minmax(0,1fr) auto; gap: 4px; }
  .task-check { width: 14px; height: 14px; }
  .task-time { font-size: 8px; }
  .task-open { font-size: 11px; }
  .category-tag { font-size: 7px; padding: 2px 4px; }
  .cover-upcoming,
  .cover-upcoming.is-open { max-height: 46px; }
  .cover-upcoming::before { font-size: 11px; }
  .cover-upcoming .agenda-row { min-height: 17px; }
  .cover-upcoming .agenda-row time,
  .cover-upcoming .agenda-row button { font-size: 8px; }

  .favorites { margin-top: 6px; padding-top: 16px; }
  .favorites::before { font-size: 10px; }
  .favorites button { width: 38px; }
  .app-tile { width: 29px; height: 29px; font-size: 12px; }
  .favorites small { font-size: 7px; }
  .cover-scraps {
    position: absolute;
    left: 21px;
    right: 51px;
    bottom: 48px;
    height: 117px;
    margin: 0;
  }
  .cover-polaroid { width: 87px; height: 78px; }
  .cover-dog { left: 10px; top: 15px; }
  .cover-plant { left: 94px; top: 5px; }
  .cover-hand-note { display: block; width: 82px; right: 0; top: 18px; font-size: 12px; }

  .bottom-nav { top: 28%; width: 37px; gap: 4px; }
  .bottom-nav button { width: 37px; height: 53px; }
  .bottom-nav span { font-size: 8px; }
  .page-fold-actions { width: 51px; height: 51px; }

  .app-picker-dialog { width: calc(100vw - 18px); max-height: calc(100dvh - 18px); }
  .app-picker-paper { min-height: calc(100dvh - 18px); max-height: calc(100dvh - 18px); padding: 19px 15px 14px; border-width: 8px; }
  .app-picker-header h2 { font-size: 24px; }
  .app-picker-paper > p { font-size: 9px; }
  .app-picker-list { grid-template-columns: 1fr; }
  .app-picker-item { min-height: 58px; }
}

@media (max-height: 760px) and (max-width: 839px) {
  .news-card { min-height: 68px; }
  .news-item:nth-child(3) { display: none; }
  .today-card { min-height: 116px; }
  .cover-upcoming { max-height: 27px; }
  .cover-scraps { height: 82px; }
  .cover-polaroid { width: 72px; height: 65px; }
  .cover-plant { left: 78px; }
}

@media (orientation: landscape) and (max-height: 540px) {
  .book { width: 100%; height: 100dvh; margin: 0; border-radius: 0; }
  .cover-masthead { display: grid; min-height: 47px; }
  .weather-card { height: 66px; width: 56%; }
  .news-card { display: block; position: absolute; left: 58%; right: 47px; top: 61px; min-height: 66px; }
  .today-card { width: 56%; min-height: 121px; }
  .favorites { width: 56%; }
  .cover-scraps { position: absolute; left: 59%; right: 44px; top: 141px; height: 108px; }
}

@media (prefers-reduced-motion: no-preference) {
  .left-sticker-plant { animation: settle-photo .5s .16s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes settle-photo { from { opacity: 0; transform: translateY(-8px) rotate(1deg); } }
}