:root {
    --bg: #f4f4f2;
    --ink: #1a1a1a;
    --faint: #8a8a8a;
    --line: #1a1a1a;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { background: var(--bg); }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    max-width: 920px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 26px 22px 120px;
    position: relative;
  }
  a, a:link, a:visited, a:active, a:focus {
    color: var(--ink);
    -webkit-text-fill-color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    cursor: pointer;
    background: none; border: none; font: inherit;
    transition: opacity .15s ease;
  }
  a:hover { opacity: .55; }
  button, .icon-btn, .menu-btn, input, textarea {
    color: var(--ink);
  }
  .btn.primary, .weather-row button.sel, .plus {
    -webkit-text-fill-color: #fff;
  }
  #detailBack::after {
    -webkit-text-fill-color: #fff;
  }
  header { margin-bottom: 40px; }
  #topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; }
  .site-title { height: 22px; width: auto; display: block; }
  .tb-right { display: flex; align-items: center; gap: 20px; }
  .icon-btn {
    background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer;
    color: var(--ink); padding: 7px; border-radius: 50%;
    transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .icon-btn:hover { opacity: .85; transform: rotate(25deg); background: rgba(26,26,26,.08); }
  .avatar-btn:hover { transform: none; }
  .avatar-btn img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: block; }
  .login-anchor {
    position: relative; width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; overflow: hidden; transition: background-color .15s ease;
  }
  .login-anchor:hover { background: rgba(26,26,26,.08); }
  .login-anchor .login-visual {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink); pointer-events: none;
    transition: transform .15s ease, opacity .15s ease;
  }
  .login-anchor:hover .login-visual { opacity: .85; transform: rotate(25deg); }
  .login-anchor #gLoginBtn { position: absolute; inset: 0; opacity: 0; z-index: 2; }
  .login-anchor #gLoginBtn > div { width: 100% !important; height: 100% !important; }
  .plus {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink);
    background: var(--ink); color: #fff; font-size: 22px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform .15s ease, opacity .15s ease;
  }
  .plus:hover { transform: scale(1.08); opacity: .88; }

  /* card grid (home) */
  #feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 34px 24px;
    max-width: 840px; margin: 0 auto;
  }
  .card { cursor: pointer; position: relative; }
  .card .menu-btn {
    position: absolute; top: 4px; right: 0;
    background: none; border: none; font-size: 16px; cursor: pointer;
    color: var(--faint); padding: 5px; border-radius: 50%;
    opacity: 0; transition: opacity .15s ease, color .15s ease, background-color .15s ease;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .card:hover .menu-btn, .card .menu-btn:focus { opacity: 1; }
  .card .menu-btn:hover { color: var(--ink); background: rgba(26,26,26,.08); }
  .card-photo {
    width: 100%; aspect-ratio: 1 / 1; display: block;
    image-rendering: pixelated; object-fit: cover;
    transition: opacity .2s ease, transform .2s ease;
  }
  .card:hover .card-photo { opacity: .86; transform: scale(1.04); }
  .card-photo.empty {
    display: flex; align-items: center; justify-content: center;
    color: var(--faint); font-size: 13px;
    border-radius: 22%;
  }
  /* thumbnail crop shapes */
  .card-photo.shape-clover {
    clip-path: polygon(77.00% 50.00%, 77.50% 52.41%, 78.89% 55.09%, 80.91% 58.28%, 83.14% 62.06%, 85.11% 66.37%, 86.37% 71.00%, 86.58% 75.62%, 85.54% 79.82%, 83.23% 83.23%, 79.82% 85.54%, 75.62% 86.58%, 71.00% 86.37%, 66.37% 85.11%, 62.06% 83.14%, 58.28% 80.91%, 55.09% 78.89%, 52.41% 77.50%, 50.00% 77.00%, 47.59% 77.50%, 44.91% 78.89%, 41.72% 80.91%, 37.94% 83.14%, 33.63% 85.11%, 29.00% 86.37%, 24.38% 86.58%, 20.18% 85.54%, 16.77% 83.23%, 14.46% 79.82%, 13.42% 75.62%, 13.63% 71.00%, 14.89% 66.37%, 16.86% 62.06%, 19.09% 58.28%, 21.11% 55.09%, 22.50% 52.41%, 23.00% 50.00%, 22.50% 47.59%, 21.11% 44.91%, 19.09% 41.72%, 16.86% 37.94%, 14.89% 33.63%, 13.63% 29.00%, 13.42% 24.38%, 14.46% 20.18%, 16.77% 16.77%, 20.18% 14.46%, 24.38% 13.42%, 29.00% 13.63%, 33.63% 14.89%, 37.94% 16.86%, 41.72% 19.09%, 44.91% 21.11%, 47.59% 22.50%, 50.00% 23.00%, 52.41% 22.50%, 55.09% 21.11%, 58.28% 19.09%, 62.06% 16.86%, 66.37% 14.89%, 71.00% 13.63%, 75.62% 13.42%, 79.82% 14.46%, 83.23% 16.77%, 85.54% 20.18%, 86.58% 24.38%, 86.37% 29.00%, 85.11% 33.63%, 83.14% 37.94%, 80.91% 41.72%, 78.89% 44.91%, 77.50% 47.59%);
    filter: drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)) drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink));
  }
  .card-photo.shape-wavy {
    clip-path: polygon(85.70% 50.00%, 85.06% 52.30%, 83.50% 54.41%, 81.94% 56.35%, 81.30% 58.39%, 81.94% 60.84%, 83.50% 63.88%, 85.06% 67.29%, 85.70% 70.61%, 85.06% 73.42%, 83.50% 75.71%, 81.94% 78.01%, 81.30% 81.30%, 78.01% 81.94%, 75.71% 83.50%, 73.42% 85.06%, 70.61% 85.70%, 67.29% 85.06%, 63.88% 83.50%, 60.84% 81.94%, 58.39% 81.30%, 56.35% 81.94%, 54.41% 83.50%, 52.30% 85.06%, 50.00% 85.70%, 47.70% 85.06%, 45.59% 83.50%, 43.65% 81.94%, 41.61% 81.30%, 39.16% 81.94%, 36.12% 83.50%, 32.71% 85.06%, 29.39% 85.70%, 26.58% 85.06%, 24.29% 83.50%, 21.99% 81.94%, 18.70% 81.30%, 18.06% 78.01%, 16.50% 75.71%, 14.94% 73.42%, 14.30% 70.61%, 14.94% 67.29%, 16.50% 63.88%, 18.06% 60.84%, 18.70% 58.39%, 18.06% 56.35%, 16.50% 54.41%, 14.94% 52.30%, 14.30% 50.00%, 14.94% 47.70%, 16.50% 45.59%, 18.06% 43.65%, 18.70% 41.61%, 18.06% 39.16%, 16.50% 36.12%, 14.94% 32.71%, 14.30% 29.39%, 14.94% 26.58%, 16.50% 24.29%, 18.06% 21.99%, 18.70% 18.70%, 21.99% 18.06%, 24.29% 16.50%, 26.58% 14.94%, 29.39% 14.30%, 32.71% 14.94%, 36.12% 16.50%, 39.16% 18.06%, 41.61% 18.70%, 43.65% 18.06%, 45.59% 16.50%, 47.70% 14.94%, 50.00% 14.30%, 52.30% 14.94%, 54.41% 16.50%, 56.35% 18.06%, 58.39% 18.70%, 60.84% 18.06%, 63.88% 16.50%, 67.29% 14.94%, 70.61% 14.30%, 73.42% 14.94%, 75.71% 16.50%, 78.01% 18.06%, 81.30% 18.70%, 81.94% 21.99%, 83.50% 24.29%, 85.06% 26.58%, 85.70% 29.39%, 85.06% 32.71%, 83.50% 36.12%, 81.94% 39.16%, 81.30% 41.61%, 81.94% 43.65%, 83.50% 45.59%, 85.06% 47.70%);
    filter: drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)) drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink));
  }
  .card-photo.shape-burst {
    clip-path: polygon(97.50% 50.00%, 95.50% 52.98%, 90.65% 55.35%, 85.70% 57.10%, 83.32% 58.93%, 84.47% 61.70%, 87.88% 65.69%, 90.89% 70.17%, 91.14% 73.75%, 87.91% 75.33%, 82.53% 74.96%, 77.37% 74.00%, 74.40% 74.40%, 74.00% 77.37%, 74.96% 82.53%, 75.33% 87.91%, 73.75% 91.14%, 70.17% 90.89%, 65.69% 87.88%, 61.70% 84.47%, 58.93% 83.32%, 57.10% 85.70%, 55.35% 90.65%, 52.98% 95.50%, 50.00% 97.50%, 47.02% 95.50%, 44.65% 90.65%, 42.90% 85.70%, 41.07% 83.32%, 38.30% 84.47%, 34.31% 87.88%, 29.83% 90.89%, 26.25% 91.14%, 24.67% 87.91%, 25.04% 82.53%, 26.00% 77.37%, 25.60% 74.40%, 22.63% 74.00%, 17.47% 74.96%, 12.09% 75.33%, 8.86% 73.75%, 9.11% 70.17%, 12.12% 65.69%, 15.53% 61.70%, 16.68% 58.93%, 14.30% 57.10%, 9.35% 55.35%, 4.50% 52.98%, 2.50% 50.00%, 4.50% 47.02%, 9.35% 44.65%, 14.30% 42.90%, 16.68% 41.07%, 15.53% 38.30%, 12.12% 34.31%, 9.11% 29.83%, 8.86% 26.25%, 12.09% 24.67%, 17.47% 25.04%, 22.63% 26.00%, 25.60% 25.60%, 26.00% 22.63%, 25.04% 17.47%, 24.67% 12.09%, 26.25% 8.86%, 29.83% 9.11%, 34.31% 12.12%, 38.30% 15.53%, 41.07% 16.68%, 42.90% 14.30%, 44.65% 9.35%, 47.02% 4.50%, 50.00% 2.50%, 52.98% 4.50%, 55.35% 9.35%, 57.10% 14.30%, 58.93% 16.68%, 61.70% 15.53%, 65.69% 12.12%, 70.17% 9.11%, 73.75% 8.86%, 75.33% 12.09%, 74.96% 17.47%, 74.00% 22.63%, 74.40% 25.60%, 77.37% 26.00%, 82.53% 25.04%, 87.91% 24.67%, 91.14% 26.25%, 90.89% 29.83%, 87.88% 34.31%, 84.47% 38.30%, 83.32% 41.07%, 85.70% 42.90%, 90.65% 44.65%, 95.50% 47.02%);
    filter: drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)) drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink));
  }
  .card-photo.shape-squircle {
    clip-path: polygon(91.50% 50.00%, 91.50% 53.63%, 91.49% 57.32%, 91.45% 61.11%, 91.32% 65.04%, 91.02% 69.13%, 90.42% 73.34%, 89.32% 77.54%, 87.53% 81.49%, 84.90% 84.90%, 81.49% 87.53%, 77.54% 89.32%, 73.34% 90.42%, 69.13% 91.02%, 65.04% 91.32%, 61.11% 91.45%, 57.32% 91.49%, 53.63% 91.50%, 50.00% 91.50%, 46.37% 91.50%, 42.68% 91.49%, 38.89% 91.45%, 34.96% 91.32%, 30.87% 91.02%, 26.66% 90.42%, 22.46% 89.32%, 18.51% 87.53%, 15.10% 84.90%, 12.47% 81.49%, 10.68% 77.54%, 9.58% 73.34%, 8.98% 69.13%, 8.68% 65.04%, 8.55% 61.11%, 8.51% 57.32%, 8.50% 53.63%, 8.50% 50.00%, 8.50% 46.37%, 8.51% 42.68%, 8.55% 38.89%, 8.68% 34.96%, 8.98% 30.87%, 9.58% 26.66%, 10.68% 22.46%, 12.47% 18.51%, 15.10% 15.10%, 18.51% 12.47%, 22.46% 10.68%, 26.66% 9.58%, 30.87% 8.98%, 34.96% 8.68%, 38.89% 8.55%, 42.68% 8.51%, 46.37% 8.50%, 50.00% 8.50%, 53.63% 8.50%, 57.32% 8.51%, 61.11% 8.55%, 65.04% 8.68%, 69.13% 8.98%, 73.34% 9.58%, 77.54% 10.68%, 81.49% 12.47%, 84.90% 15.10%, 87.53% 18.51%, 89.32% 22.46%, 90.42% 26.66%, 91.02% 30.87%, 91.32% 34.96%, 91.45% 38.89%, 91.49% 42.68%, 91.50% 46.37%);
    filter: drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)) drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink));
  }
  .card-photo.shape-hex {
    clip-path: polygon(78.88% 66.67%, 77.78% 68.56%, 76.68% 70.47%, 75.56% 72.41%, 74.41% 74.41%, 73.22% 76.47%, 71.97% 78.63%, 70.65% 80.91%, 69.25% 83.34%, 66.44% 83.34%, 63.81% 83.34%, 61.32% 83.34%, 58.93% 83.34%, 56.63% 83.34%, 54.39% 83.34%, 52.19% 83.34%, 50.00% 83.34%, 47.81% 83.34%, 45.61% 83.34%, 43.37% 83.34%, 41.07% 83.34%, 38.68% 83.34%, 36.19% 83.34%, 33.56% 83.34%, 30.75% 83.34%, 29.35% 80.91%, 28.03% 78.63%, 26.78% 76.47%, 25.59% 74.41%, 24.44% 72.41%, 23.32% 70.47%, 22.22% 68.56%, 21.13% 66.67%, 20.03% 64.78%, 18.93% 62.87%, 17.81% 60.93%, 16.66% 58.93%, 15.47% 56.87%, 14.22% 54.71%, 12.90% 52.43%, 11.50% 50.00%, 12.90% 47.57%, 14.22% 45.29%, 15.47% 43.13%, 16.66% 41.07%, 17.81% 39.07%, 18.93% 37.13%, 20.03% 35.22%, 21.12% 33.33%, 22.22% 31.44%, 23.32% 29.53%, 24.44% 27.59%, 25.59% 25.59%, 26.78% 23.53%, 28.03% 21.37%, 29.35% 19.09%, 30.75% 16.66%, 33.56% 16.66%, 36.19% 16.66%, 38.68% 16.66%, 41.07% 16.66%, 43.37% 16.66%, 45.61% 16.66%, 47.81% 16.66%, 50.00% 16.66%, 52.19% 16.66%, 54.39% 16.66%, 56.63% 16.66%, 58.93% 16.66%, 61.32% 16.66%, 63.81% 16.66%, 66.44% 16.66%, 69.25% 16.66%, 70.65% 19.09%, 71.97% 21.37%, 73.22% 23.53%, 74.41% 25.59%, 75.56% 27.59%, 76.68% 29.53%, 77.78% 31.44%, 78.88% 33.33%, 79.97% 35.22%, 81.07% 37.13%, 82.19% 39.07%, 83.34% 41.07%, 84.53% 43.13%, 85.78% 45.29%, 87.10% 47.57%, 88.50% 50.00%, 87.10% 52.43%, 85.78% 54.71%, 84.53% 56.87%, 83.34% 58.93%, 82.19% 60.93%, 81.07% 62.87%, 79.97% 64.78%);
    filter: drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)) drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink));
  }
  .card-photo.shape-petal {
    clip-path: polygon(96.50% 50.00%, 95.27% 52.97%, 92.06% 55.54%, 88.15% 57.59%, 85.00% 59.38%, 83.66% 61.43%, 84.29% 64.20%, 86.13% 67.82%, 87.89% 71.88%, 88.32% 75.60%, 86.74% 78.19%, 83.34% 79.24%, 78.99% 78.99%, 74.83% 78.31%, 71.73% 78.31%, 69.96% 79.87%, 69.12% 83.13%, 68.45% 87.42%, 67.18% 91.47%, 64.93% 93.99%, 61.84% 94.20%, 58.41% 92.28%, 55.17% 89.24%, 52.40% 86.56%, 50.00% 85.50%, 47.60% 86.56%, 44.83% 89.24%, 41.59% 92.28%, 38.16% 94.20%, 35.07% 93.99%, 32.82% 91.47%, 31.55% 87.42%, 30.88% 83.13%, 30.04% 79.87%, 28.27% 78.31%, 25.17% 78.31%, 21.01% 78.99%, 16.66% 79.24%, 13.26% 78.19%, 11.68% 75.60%, 12.11% 71.88%, 13.87% 67.82%, 15.71% 64.20%, 16.34% 61.43%, 15.00% 59.38%, 11.85% 57.59%, 7.94% 55.54%, 4.73% 52.97%, 3.50% 50.00%, 4.73% 47.03%, 7.94% 44.46%, 11.85% 42.41%, 15.00% 40.62%, 16.34% 38.57%, 15.71% 35.80%, 13.87% 32.18%, 12.11% 28.13%, 11.68% 24.40%, 13.26% 21.81%, 16.66% 20.76%, 21.01% 21.01%, 25.17% 21.69%, 28.27% 21.69%, 30.04% 20.13%, 30.87% 16.87%, 31.55% 12.58%, 32.82% 8.53%, 35.07% 6.01%, 38.16% 5.80%, 41.59% 7.72%, 44.83% 10.76%, 47.60% 13.44%, 50.00% 14.50%, 52.40% 13.44%, 55.17% 10.76%, 58.41% 7.72%, 61.84% 5.80%, 64.93% 6.01%, 67.18% 8.53%, 68.45% 12.58%, 69.12% 16.87%, 69.96% 20.13%, 71.73% 21.69%, 74.83% 21.69%, 78.99% 21.01%, 83.34% 20.76%, 86.74% 21.81%, 88.32% 24.40%, 87.89% 28.12%, 86.13% 32.18%, 84.29% 35.80%, 83.66% 38.57%, 85.00% 40.62%, 88.15% 42.41%, 92.06% 44.46%, 95.27% 47.03%);
    filter: drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)) drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink));
  }
  .card-photo.shape-seal {
    clip-path: polygon(96.00% 50.00%, 95.37% 52.97%, 93.62% 55.74%, 91.19% 58.19%, 88.64% 60.35%, 86.49% 62.39%, 85.11% 64.54%, 84.56% 67.04%, 84.64% 70.00%, 84.92% 73.33%, 84.91% 76.79%, 84.18% 79.98%, 82.53% 82.53%, 79.98% 84.18%, 76.79% 84.91%, 73.33% 84.92%, 70.00% 84.64%, 67.04% 84.56%, 64.54% 85.11%, 62.39% 86.49%, 60.35% 88.64%, 58.19% 91.19%, 55.74% 93.62%, 52.97% 95.37%, 50.00% 96.00%, 47.03% 95.37%, 44.26% 93.62%, 41.81% 91.19%, 39.65% 88.64%, 37.61% 86.49%, 35.46% 85.11%, 32.96% 84.56%, 30.00% 84.64%, 26.67% 84.92%, 23.21% 84.91%, 20.02% 84.18%, 17.47% 82.53%, 15.82% 79.98%, 15.09% 76.79%, 15.08% 73.33%, 15.36% 70.00%, 15.44% 67.04%, 14.89% 64.54%, 13.51% 62.39%, 11.36% 60.35%, 8.81% 58.19%, 6.38% 55.74%, 4.63% 52.97%, 4.00% 50.00%, 4.63% 47.03%, 6.38% 44.26%, 8.81% 41.81%, 11.36% 39.65%, 13.51% 37.61%, 14.89% 35.46%, 15.44% 32.96%, 15.36% 30.00%, 15.08% 26.67%, 15.09% 23.21%, 15.82% 20.02%, 17.47% 17.47%, 20.02% 15.82%, 23.21% 15.09%, 26.67% 15.08%, 30.00% 15.36%, 32.96% 15.44%, 35.46% 14.89%, 37.61% 13.51%, 39.65% 11.36%, 41.81% 8.81%, 44.26% 6.38%, 47.03% 4.63%, 50.00% 4.00%, 52.97% 4.63%, 55.74% 6.38%, 58.19% 8.81%, 60.35% 11.36%, 62.39% 13.51%, 64.54% 14.89%, 67.04% 15.44%, 70.00% 15.36%, 73.33% 15.08%, 76.79% 15.09%, 79.98% 15.82%, 82.53% 17.47%, 84.18% 20.02%, 84.91% 23.21%, 84.92% 26.67%, 84.64% 30.00%, 84.56% 32.96%, 85.11% 35.46%, 86.49% 37.61%, 88.64% 39.65%, 91.19% 41.81%, 93.62% 44.26%, 95.37% 47.03%);
    filter: drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)) drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink));
  }
  .card-photo.shape-blobby {
    clip-path: polygon(91.74% 50.00%, 91.35% 52.71%, 90.91% 55.39%, 90.40% 58.04%, 89.85% 60.68%, 89.25% 63.32%, 88.58% 65.98%, 87.81% 68.65%, 86.92% 71.31%, 85.84% 73.95%, 84.52% 76.49%, 82.93% 78.88%, 81.05% 81.05%, 78.89% 82.94%, 76.51% 84.54%, 73.97% 85.87%, 71.34% 86.96%, 68.67% 87.87%, 66.01% 88.64%, 63.35% 89.32%, 60.70% 89.92%, 58.05% 90.47%, 55.39% 90.97%, 52.71% 91.42%, 50.00% 91.79%, 47.24% 92.09%, 44.43% 92.29%, 41.57% 92.37%, 38.67% 92.30%, 35.72% 92.06%, 32.76% 91.61%, 29.81% 90.93%, 26.92% 89.98%, 24.13% 88.71%, 21.53% 87.10%, 19.20% 85.12%, 17.21% 82.79%, 15.62% 80.15%, 14.42% 77.30%, 13.60% 74.32%, 13.08% 71.31%, 12.80% 68.35%, 12.65% 65.47%, 12.59% 62.70%, 12.53% 60.04%, 12.44% 57.47%, 12.29% 54.97%, 12.05% 52.49%, 11.74% 50.00%, 11.36% 47.47%, 10.92% 44.86%, 10.48% 42.14%, 10.08% 39.30%, 9.76% 36.34%, 9.59% 33.26%, 9.64% 30.10%, 9.98% 26.89%, 10.67% 23.72%, 11.79% 20.68%, 13.37% 17.88%, 15.42% 15.42%, 17.89% 13.38%, 20.70% 11.81%, 23.74% 10.71%, 26.92% 10.02%, 30.12% 9.70%, 33.29% 9.66%, 36.36% 9.83%, 39.32% 10.15%, 42.15% 10.55%, 44.86% 10.99%, 47.47% 11.42%, 50.00% 11.79%, 52.48% 12.10%, 54.96% 12.31%, 57.47% 12.45%, 60.04% 12.53%, 62.71% 12.57%, 65.48% 12.63%, 68.37% 12.76%, 71.34% 13.04%, 74.36% 13.55%, 77.34% 14.37%, 80.20% 15.56%, 82.84% 17.16%, 85.17% 19.15%, 87.15% 21.49%, 88.76% 24.10%, 90.02% 26.89%, 90.97% 29.80%, 91.64% 32.75%, 92.07% 35.72%, 92.30% 38.67%, 92.36% 41.57%, 92.27% 44.44%, 92.05% 47.24%);
    filter: drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)) drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink));
  }
  .card-date {
    color: #8f8f8a; font-size: 12.5px; margin-top: 8px;
    font-variant-numeric: tabular-nums; transition: color .15s ease;
  }
  .card:hover .card-date { color: var(--ink); }
  @media (max-width: 599px) {
    #feed { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  }

  /* detail view */
  #detailView { display: none; max-width: 480px; margin: 60px auto 0; }
  #detailBack {
    position: absolute; top: 16px; left: 14px; font-size: 14.5px;
    cursor: pointer; text-decoration: none; color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    transition: opacity .15s ease, background-color .15s ease;
  }
  #detailBack:hover { opacity: 1; background: rgba(26,26,26,.08); }
  #detailBack::after {
    content: "記事一覧へ戻る"; position: absolute; left: 100%; top: 50%;
    transform: translateY(-50%); margin-left: 10px; white-space: nowrap;
    background: var(--ink); color: #fff; font-size: 12px; padding: 5px 10px;
    border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s ease;
  }
  #detailBack:hover::after { opacity: 1; }
  .entry { margin: 0 8px 88px; scroll-margin-top: 40px; }
  .entry-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 14px; font-size: 15.5px;
  }
  .entry-head .menu-btn {
    background: none; border: none; font-size: 18px; cursor: pointer;
    color: var(--faint); padding: 5px; border-radius: 50%;
    transition: color .15s ease, background-color .15s ease;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .entry-head .menu-btn:hover { color: var(--ink); background: rgba(26,26,26,.08); }
  .entry .place { font-size: 13.5px; color: var(--faint); margin-bottom: 12px; }
  .entry img {
    width: 100%; display: block;
    border: 1px solid var(--ink);
    image-rendering: pixelated;
  }
  .entry .body { margin-top: 14px; font-size: 15.5px; white-space: pre-wrap; }
  #empty { text-align: center; color: var(--faint); margin-top: 96px; font-size: 15px; }

  /* modals */
  .overlay {
    position: fixed; inset: 0; background: rgba(20,20,20,.45);
    display: none; align-items: flex-end; justify-content: center; z-index: 20;
  }
  .overlay.open { display: flex; }
  .sheet {
    background: var(--bg); width: 100%; max-width: 480px;
    border-radius: 18px 18px 0 0; padding: 28px 24px 44px;
    max-height: 92vh; max-height: 92dvh; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sheet h2 { font-size: 16px; font-weight: 600; margin-bottom: 22px; text-align: center; }
  .field { margin-bottom: 20px; }
  .field label { display: block; font-size: 13px; color: var(--faint); margin-bottom: 6px; }
  .field input[type=text], .field input[type=date], .field textarea {
    width: 100%; border: 1px solid #c9c9c5; background: #fff; border-radius: 8px;
    padding: 10px 12px; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
  }
  .field textarea { min-height: 110px; resize: vertical; }
  .suggest-list {
    position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px;
    background: #fff; border: 1px solid #d8d8d3; border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.08); z-index: 5; overflow: hidden; display: none;
  }
  .suggest-list.show { display: block; }
  .suggest-list button {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 10px 12px; background: none; border: none; font: inherit; font-size: 13.5px;
    cursor: pointer; color: var(--ink); border-bottom: 1px solid #eee;
  }
  .suggest-list button:last-child { border-bottom: none; }
  .suggest-list button:hover { background: #f4f4f2; }
  .suggest-list .s-icon { color: var(--faint); flex: none; display: inline-flex; }
  .place a, .place a:link, .place a:visited { color: inherit; -webkit-text-fill-color: inherit; text-decoration: underline; text-underline-offset: 3px; }
  .weather-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .weather-row button {
    padding: 10px 4px; font: inherit; font-size: 15px; cursor: pointer;
    border: 1px solid #c9c9c5; background: #fff; border-radius: 8px;
    transition: border-color .15s ease, transform .1s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap; min-width: 0;
  }
  .weather-row button:hover { border-color: var(--ink); }
  @media (max-width: 380px) {
    .weather-row { grid-template-columns: repeat(2, 1fr); }
  }
  .weather-row button.sel { border-color: var(--ink); background: var(--ink); color: #fff; }
  #photoDrop {
    border: 1px dashed #b5b5b0; border-radius: 8px; background: #fff;
    text-align: center; padding: 26px 12px; cursor: pointer; color: var(--faint); font-size: 14px;
    transition: border-color .15s ease, color .15s ease;
  }
  #photoDrop:hover { border-color: var(--ink); color: var(--ink); }
  #photoPreview { width: 100%; display: none; border: 1px solid var(--ink); cursor: pointer; transition: opacity .15s ease; }
  #photoPreview:hover { opacity: .85; }
  .btn-row { display: flex; gap: 12px; margin-top: 26px; }
  .btn {
    flex: 1; padding: 13px 0; font: inherit; font-size: 15px; cursor: pointer;
    border: 1px solid var(--ink); border-radius: 999px; background: none;
    transition: opacity .15s ease;
  }
  .btn:hover { opacity: .6; }
  .btn.primary { background: var(--ink); color: #fff; }
  .btn.primary:hover { opacity: .82; }
  /* receipt print animation */
  #printOverlay {
    position: fixed; inset: 0; background: rgba(12,12,12,.82);
    display: none; flex-direction: column; align-items: center;
    padding-top: 7vh; z-index: 60;
  }
  #printOverlay.open { display: flex; }
  .printer-head {
    width: min(360px, 88vw); height: 34px; position: relative; z-index: 2;
    background: linear-gradient(#3a3a3a, #262626);
    border-radius: 10px; box-shadow: 0 6px 14px rgba(0,0,0,.5);
  }
  .printer-head::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px;
    height: 5px; background: #0c0c0c; border-radius: 3px;
  }
  .paper-mask {
    width: min(300px, 74vw); max-height: 62vh; overflow: hidden;
    margin-top: -8px; z-index: 1;
  }
  #printImg {
    width: 100%; display: block;
    transform: translateY(-101%);
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.45));
  }
  #printImg.printing { animation: feed 3s steps(70) forwards; }
  @keyframes feed {
    from { transform: translateY(-101%); }
    to   { transform: translateY(0); }
  }
  #printBar { margin-top: 26px; display: flex; gap: 14px; opacity: 0; transition: opacity .4s; }
  #printBar.show { opacity: 1; }
  #printBar .btn { background: var(--bg); min-width: 130px; }
  #printBar .btn.primary { background: var(--ink); border-color: #555; }
  #toast {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
    background: var(--ink); color: #fff; padding: 9px 20px; border-radius: 999px;
    font-size: 13.5px; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 50;
    white-space: nowrap;
  }
  #toast.show { opacity: 1; }
  /* entry menu popover */
  #popMenu {
    position: absolute; background: #fff; border: 1px solid #ccc; border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0,0,0,.12); display: none; z-index: 30; overflow: hidden;
  }
  #popMenu button { display: block; width: 100%; padding: 11px 26px; background: none; border: none; font: inherit; font-size: 14.5px; cursor: pointer; text-align: left; white-space: nowrap; }
  #popMenu button:hover { background: #f0f0ee; }
  #popMenu button.danger { color: #c02020; }
  #userMenu {
    position: absolute; min-width: max-content; background: #fff; border: 1px solid #ccc; border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0,0,0,.12); display: none; z-index: 30; overflow: hidden;
  }
  #userMenu button { display: block; width: 100%; padding: 11px 26px; background: none; border: none; font: inherit; font-size: 14.5px; cursor: pointer; text-align: left; white-space: nowrap; }
  #userMenu button:hover { background: #f0f0ee; }